Sheet Fold

'use client';

import './sheet-fold.css';

import { useEffect, useId, useRef, useState } from 'react';

import {
  useCanvasScene,
  useReducedMotion,
  type SceneDrawContext,
} from '@/hooks/use-canvas-scene';

/**
 * A settings accordion whose panels are hinged plates falling into a tapered orifice
 * damper — a soft-close hinge, solved.
 *
 * This is not a height transition and there is no eased max-height anywhere in the file.
 * Each row owns one angle and that angle is integrated:
 *
 *   I θ̈ = m g L_c cos θ − sign(θ̇) · C(θ) · θ̇²
 *   C(θ) = DAMPER · r_d³ · cos³θ / A(θ)²
 *
 * The panel's height is L·sin θ, so what a reader sees is the projection of a plate that
 * is genuinely falling. The damping is quadratic because turbulent flow through an
 * orifice obeys Q = C_d·A·√(2Δp/ρ), so Δp goes as Q²; Q here is the piston's displacement
 * rate, which is proportional to θ̇, and that leaves a resisting torque in θ̇² rather than
 * in θ̇.
 *
 * That exponent is the whole point, because a quadratic damper has a terminal velocity:
 * ω_term = √(m g L_c cos θ / C). So the leaf does not ease. It accelerates for the first
 * fifth of the stroke, then holds a rate — within three percent of 3.4 rad/s while the
 * four-line panel travels from 31 px to 77 px of its 99, half its height at one speed —
 * and then the bore's clearance runs out and it chokes to a crawl: the last pixel and a
 * half takes 0.20 s, 29% of the whole stroke. No cubic-bezier traces that, and not for
 * want of control points. A bezier has no plateau, and none is flat in the middle, flat
 * again at the end, and a cliff in between.
 *
 * Two consequences of having solved it rather than tweened it, both checkable.
 *
 * Double SHEET — every leaf twice as heavy, damper untouched — and the stroke shortens by
 * 30%, not by half, because terminal velocity goes as the *square root* of the driving
 * torque. Swap the θ̇² for a θ̇ with the same reference terminal velocity and the same
 * experiment takes 54% off. This is why a real soft-close hinge is sold against a door
 * weight *range* instead of a door weight.
 *
 * And the four rows move at four different rates with nothing configured. Each leaf is as
 * long as its own content measures, and the hinge is bought for its leaf, so the yoke
 * radius goes with it: C carries r_d³ where the driving torque only carries L², so the
 * plateau rate falls as 1/√L. The row with four variables in it sweeps at 3.1 rad/s and
 * takes 0.75 s; the two-line row sweeps at 4.4 rad/s and takes 0.52 s. Open one while
 * another is closing and both are in the air at once, visibly out of step.
 */

/** Seconds per step. A θ̇² term against a closing orifice is stiff at the seat, where C
 *  has climbed three orders; 120 Hz overshoots the stop there, 240 Hz does not. */
const STEP = 1 / 240;

/** Gravity, px/s². Not 9.81 scaled to anything — it is the number that lands a panel of
 *  this size in about half a second, and it also sets how long the leaf spends getting up
 *  to rate (2·L·ω_term / 3G, around 60 ms) rather than travelling at it. */
const G = 3600;

/** The hinge's open stop, radians below horizontal. Not π/2: at dead bottom cos θ is zero,
 *  the gravity torque with it, and the leaf would asymptote toward the stop forever. */
const THETA_OPEN = 1.3;
const SIN_OPEN = Math.sin(THETA_OPEN);

/** The leaf the damper was sized against, px, and the mass of one px of leaf. The sheet is
 *  uniform, so LEAF_REF weighs exactly 1 and is the unit of mass in this file. */
const LEAF_REF = 96;
const SHEET = 1 / LEAF_REF;

/** Yoke radius ÷ leaf length. The pin on the leaf rides a slot in the piston rod, so the
 *  piston sits at depth r_d·sin θ — exactly the panel's height, to scale. Nine percent
 *  because the hinge is bought for its leaf: a longer flap gets a longer crank, a longer
 *  bore and a heavier damper, which is what makes the rows disagree about speed. */
const PINION = 0.09;

/** ρ·A_p³ / (2·C_d²·A_mouth²) with every fixed piston dimension folded in. Quoted rather
 *  than derived from SHEET, deliberately, so that doubling SHEET doubles the leaf without
 *  also doubling its damper. It is m·G·L_c / (ω²·r_d³) at θ = 0 for LEAF_REF at 3.5 rad/s,
 *  which is the rate that leaf holds through its plateau. */
const DAMPER = 21.9;

/** How late the bore chokes, as an exponent on piston depth. A tenth power leaves the
 *  clearance within a percent of its full value for the first half of the stroke and takes
 *  it out inside the last tenth — the latch, which is the part a soft-close is bought for.
 *  Square it and the whole stroke is a slow crawl with no plateau to speak of. */
const CHOKE = 10;

/** Floor on the clearance, as a fraction of its value at the mouth: a machining clearance,
 *  since the skirt never actually touches the wall. Without it C is unbounded at the seat,
 *  ω_term goes to zero and the leaf never arrives. With it the last pixel takes 0.2 s and
 *  then the panel is down. */
const SKIRT = 0.015;

/** Return-spring preload ÷ the leaf's own static torque. The spring is engaged only on the
 *  way up — a soft-close hinge with a spring strong enough to hold the door open is a door
 *  that will not open. 1.9 beats m·G·L_c at every angle with enough left to bring a panel
 *  home in 0.37 to 0.53 s through the same orifice, so closing is quicker than opening but
 *  not by much: the damper, not the drive, is what sets both. */
const LIFT = 1.9;

interface Row {
  name: string;
  value: string;
  body: string;
  vars?: { key: string; note: string }[];
}

const ROWS: Row[] = [
  {
    name: 'Build command',
    value: 'Node 22',
    body: 'next build in a Node 22 image on four vCPU, killed at twelve minutes. Only .next and public are uploaded; the rest of the tree stays on the builder.',
  },
  {
    name: 'Environment variables',
    value: '4 set',
    body: 'Injected at build and again at run. Four are set on this project:',
    vars: [
      { key: 'DATABASE_URL', note: 'encrypted · build + run' },
      { key: 'STRIPE_SECRET', note: 'encrypted · run only' },
      { key: 'NEXT_PUBLIC_CDN', note: 'plain · build + run' },
      { key: 'LOG_LEVEL', note: 'plain · run only' },
    ],
  },
  {
    name: 'Deploy hooks',
    value: '1 active',
    body: 'A POST to the hook URL queues a build on main and the body is ignored. The URL is the whole credential, so rotating it takes effect on the very next request and anything still holding the old one gets a 404 rather than a queued build.',
  },
  {
    name: 'Log retention',
    value: '90 / 14 d',
    body: 'Build logs are kept ninety days and runtime logs fourteen, after which they are dropped rather than archived. A drain forwards every line to your own sink as it is written; if that sink is failing the drain buffers for an hour and then starts discarding, and it never holds up a deploy. None of this is billed by volume.',
  },
];

/** Fallback leaf content height, px, for the frame before the observer has measured. Close
 *  to the two-line row, so a first paint that lands early is wrong by a few px, not by a
 *  factor. */
const CONTENT_FALLBACK = 60;

interface State {
  /** performance.now in seconds at the last paint, and the leftover of a frame that did not
   *  divide evenly into STEP. The hook hands out no time value, so the scene keeps both. */
  clock: number;
  carry: number;
  theta: Float64Array;
  omega: Float64Array;
  /** Panel height last written to the DOM. A settled row must stop reflowing, so a write
   *  only happens once the solved height has moved by a visible amount. */
  written: Float64Array;
}

/**
 * Flow area past the piston skirt, ÷ its area at the bore mouth. Two factors, and neither
 * is decoration.
 *
 * The cos θ is machined into the bore and it is there to be cancelled. The yoke gives the
 * piston a mechanical advantage of r_d·cos θ, which arrives in C as cos³θ, so a clearance
 * that falls with cos θ divides two of them back out and leaves
 *
 *   ω_term = (1 − u^CHOKE) · √(m G L_c / DAMPER r_d³)
 *
 * with no θ in it at all. That is what a profiled bore is *for*; a door closer sells the
 * same trick as a separate sweep speed and latch speed.
 *
 * The (1 − u^CHOKE) is the latch. u is piston depth, sin θ / sin THETA_OPEN, which is also
 * the panel's height as a fraction of its open height — the same number the CSS gets.
 */
function clearance(cos: number, u: number): number {
  return Math.max(SKIRT, cos * (1 - u ** CHOKE));
}

/**
 * One fixed step of one leaf. `falling` is the row's target, not a guess from the sign of
 * anything: gravity alone on the way down, gravity minus the return spring on the way up.
 */
function advance(state: State, i: number, leaf: number, falling: boolean): void {
  const theta = state.theta[i];
  const cos = Math.cos(theta);
  const u = Math.sin(theta) / SIN_OPEN;

  // A hinged uniform plate: mass with length, centre of mass at half of it, I = mL²/3 about
  // the hinged edge — not mL²/12, which is about the centre and would be the wrong body.
  const mass = SHEET * leaf;
  const arm = leaf / 2;
  const inertia = (mass * leaf * leaf) / 3;
  const yoke = PINION * leaf;

  const area = clearance(cos, u);
  const c = (DAMPER * yoke ** 3 * cos ** 3) / (area * area);
  const torque = mass * G * arm * (falling ? cos : cos - LIFT);

  /*
   * Drive explicit, damping semi-implicit: ω ← (ω + τ/I·h) / (1 + C|ω|/I·h). Written as an
   * explicit −C·ω²·h the damping can subtract more than the whole velocity once C has grown
   * by three orders near the seat, and hand back a velocity pointing the other way — a
   * dissipative term inventing motion, which then chokes even harder and diverges. In this
   * form the denominator is a divisor greater than one, so it can only ever shrink |ω|,
   * whatever C does. Same equation, same fixed point, and it cannot blow up.
   */
  const was = state.omega[i];
  let omega = (was + (torque / inertia) * STEP) / (1 + (c * Math.abs(was) * STEP) / inertia);
  let next = theta + omega * STEP;

  // Both ends of the travel are seats, and a soft-close bounces off neither — not bouncing
  // is the entire product. The stop takes the momentum and returns none of it.
  if (next <= 0) {
    next = 0;
    omega = 0;
  } else if (next >= THETA_OPEN) {
    next = THETA_OPEN;
    omega = 0;
  }

  state.theta[i] = next;
  state.omega[i] = omega;
}

/** `compact` is the 298x240 catalogue card: the same four hinges, with the heading, the
 *  variable tables and the hint dropped so four rows and one open panel fit the frame. The
 *  panel height is measured off its own content either way — see `sheet-fold.css`. */
export type SheetFoldProps = { compact?: boolean };

export function SheetFold({ compact = false }: SheetFoldProps) {
  const reduced = useReducedMotion();
  const uid = useId();
  const [open, setOpen] = useState(0);
  // The solver reads the open row every step and React state is a frame behind a click, so
  // the ref is the authority and the state exists only to re-render aria-expanded.
  const openRef = useRef(0);
  const panels = useRef<Array<HTMLDivElement | null>>(ROWS.map(() => null));
  const content = useRef<Float64Array>(new Float64Array(ROWS.length).fill(CONTENT_FALLBACK));
  // Angle and rate are the only things a resize must not reset. Rebuild them in setup and
  // every reflow would slam the open panel shut and drop it again.
  const hinge = useRef<{ theta: Float64Array; omega: Float64Array } | null>(null);

  const setup = (): State => {
    const held =
      hinge.current ?? { theta: new Float64Array(ROWS.length), omega: new Float64Array(ROWS.length) };
    hinge.current = held;

    const state: State = {
      clock: 0,
      carry: 0,
      theta: held.theta,
      omega: held.omega,
      // −1, so the first frame writes every panel whatever the solver says, including the
      // zeroes; a 0 here would leave the closed panels' inline height unset.
      written: new Float64Array(ROWS.length).fill(-1),
    };

    if (reduced) {
      for (let i = 0; i < ROWS.length; i += 1) {
        state.theta[i] = openRef.current === i ? THETA_OPEN : 0;
        state.omega[i] = 0;
      }
    }
    return state;
  };

  const draw = ({ state }: SceneDrawContext<State>) => {
    const now = performance.now() / 1000;
    const dt = state.clock === 0 ? 0 : Math.min(0.05, now - state.clock);
    state.clock = now;

    // The leaf is as long as its content is tall: height = L·sin θ has to hit the measured
    // height exactly at the stop, so L is the content divided by sin THETA_OPEN. Read live
    // from the observer's ref, never captured, or a re-wrap leaves stale hardware behind.
    const leaves = content.current;

    /*
     * Read `reduced` live rather than off a flag frozen in setup: useReducedMotion is false
     * through SSR and the first paint, so a setup-time copy would still say "animate" on the
     * one frame that machine ever gets, and every panel would be left mid-fall.
     */
    if (reduced) {
      for (let i = 0; i < ROWS.length; i += 1) {
        state.theta[i] = openRef.current === i ? THETA_OPEN : 0;
        state.omega[i] = 0;
      }
    } else {
      state.carry += dt;
      let n = 0;
      // Twelve steps is the 0.05 s the dt clamp allows. Past that the tab was away, and
      // catching up in real time would run the whole stroke inside one frame.
      while (state.carry >= STEP && n < 12) {
        for (let i = 0; i < ROWS.length; i += 1) {
          advance(state, i, leaves[i] / SIN_OPEN, openRef.current === i);
        }
        state.carry -= STEP;
        n += 1;
      }
      if (n === 12) state.carry = 0;
    }

    // The panel height IS L·sin θ, written as a custom property on the panel through a ref.
    // Never React state: this changes every frame and a setState per frame per row would put
    // four renders of the whole subtree between the solver and the pixels.
    for (let i = 0; i < ROWS.length; i += 1) {
      const lift = (leaves[i] / SIN_OPEN) * Math.sin(state.theta[i]);
      const panel = panels.current[i];
      if (panel && Math.abs(lift - state.written[i]) > 0.25) {
        panel.style.setProperty('--sheet-fold-h', `${lift.toFixed(1)}px`);
        // visibility, not aria-hidden: it takes the collapsed copy out of the accessibility
        // tree without hanging an ARIA attribute on a subtree its own button announces.
        panel.style.visibility = lift < 0.6 ? 'hidden' : 'visible';
        state.written[i] = lift;
      }
    }
  };

  const { stageRef, canvasRef, requestRender } = useCanvasScene<State>({ setup, draw });

  /*
   * Measure the copy, do not guess it. Each panel's inner box keeps its natural height inside
   * a zero-height overflow-hidden parent, so offsetHeight is the open height even while the
   * row is shut — and it is re-read on every wrap, because a narrower stage turns three lines
   * into four and that is a different leaf with a different plateau.
   */
  useEffect(() => {
    const inners = panels.current.map((panel) => panel?.firstElementChild ?? null);
    const read = () => {
      let moved = false;
      inners.forEach((node, i) => {
        if (!(node instanceof HTMLElement)) return;
        const next = node.offsetHeight || CONTENT_FALLBACK;
        if (Math.abs(next - content.current[i]) > 0.5) {
          content.current[i] = next;
          moved = true;
        }
      });
      if (moved) requestRender();
    };
    read();
    const observer = new ResizeObserver(read);
    inners.forEach((node) => {
      if (node instanceof HTMLElement) observer.observe(node);
    });
    return () => observer.disconnect();
  }, [requestRender]);

  // Braced on purpose: an expression body would hand requestRender's return value back to
  // React as the effect's cleanup. With the loop stopped this repaint is the only thing that
  // moves a panel at all, so losing it would freeze the accordion shut.
  useEffect(() => {
    requestRender();
  }, [open, reduced, requestRender]);

  // One open at a time, and the row that closes is not snapped shut — it gets the same solver
  // with its own leaf, so a swap has two plates in the air at once at two different rates.
  const toggle = (i: number) => {
    const next = openRef.current === i ? -1 : i;
    openRef.current = next;
    setOpen(next);
    requestRender();
  };

  return (
    <div className="sheet-fold-stage" data-compact={compact ? 'true' : undefined}>
      <div ref={stageRef} className="sheet-fold-section" aria-hidden="true">
        <canvas ref={canvasRef} />
      </div>
      <div className="sheet-fold-face">
        <div className="sheet-fold-col">
          <p className="sheet-fold-eyebrow">Project</p>
          <h2 className="sheet-fold-title">Build and runtime</h2>
          <ul className="sheet-fold-list">
            {ROWS.map((row, i) => (
              <li key={row.name} className="sheet-fold-row">
                <button
                  type="button"
                  id={`${uid}-head-${i}`}
                  className="sheet-fold-head"
                  aria-expanded={open === i}
                  aria-controls={`${uid}-panel-${i}`}
                  /* Still pressable in a card, but out of the tab order: the card frame
                     is aria-hidden, and a focusable node inside one is a trap with no
                     label. */
                  tabIndex={compact ? -1 : undefined}
                  onClick={() => toggle(i)}
                >
                  <span className="sheet-fold-name">{row.name}</span>
                  <span className="sheet-fold-value">{row.value}</span>
                </button>
                <div
                  id={`${uid}-panel-${i}`}
                  ref={(el) => {
                    panels.current[i] = el;
                  }}
                  className="sheet-fold-panel"
                  role="region"
                  aria-labelledby={`${uid}-head-${i}`}
                >
                  <div className="sheet-fold-inner">
                    <p className="sheet-fold-copy">{row.body}</p>
                    {row.vars ? (
                      <dl className="sheet-fold-vars">
                        {row.vars.map((entry) => (
                          <div key={entry.key} className="sheet-fold-var">
                            <dt>{entry.key}</dt>
                            <dd>{entry.note}</dd>
                          </div>
                        ))}
                      </dl>
                    ) : null}
                  </div>
                </div>
              </li>
            ))}
          </ul>
        </div>
      </div>
      <p className="sheet-fold-hint">Open a row, then another</p>
    </div>
  );
}

export default SheetFold;

.sheet-fold-stage {
  position: relative;
  width: 100%;
  /* Two panels are open at once during a swap — a 118 px row closing while a 99 px row
     falls — and the tallest transient plus the heads and the heading is 480 px. Reserving
     it here is what keeps the card from breathing every time a row is opened. */
  min-height: 31rem;
  overflow: hidden;
  border-radius: 0.75rem;
  background: radial-gradient(118% 100% at 14% 0%, #121721 0%, #0a0d14 58%, #06080c 100%);
  color: #e8eef7;
}

/* Nothing is drawn here. The frame loop that moves the panels is attached to this element
   and dies with it, so the stage and its canvas stay mounted at full bleed. */
.sheet-fold-section {
  position: absolute;
  inset: 0;
  touch-action: none;
}

.sheet-fold-section canvas {
  display: block;
  width: 100%;
  height: 100%;
}

/* One column, and it starts at the padding edge: the rows are the whole card. */
.sheet-fold-face {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  padding: 1.25rem 1.25rem 2.5rem;
  pointer-events: none;
}

/* Capped, and not only for the reading measure: the leaf lengths are the measured heights of
   these paragraphs, so an uncapped column would re-wrap four lines into two on a wide stage
   and quietly re-specify every hinge. */
.sheet-fold-col {
  min-width: 0;
  max-width: 34rem;
}

.sheet-fold-eyebrow {
  margin: 0 0 0.375rem;
  font: 500 0.6875rem/1 ui-monospace, "SFMono-Regular", Menlo, monospace;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(232, 238, 247, 0.4);
}

.sheet-fold-title {
  margin: 0 0 1.125rem;
  font-size: 1.375rem;
  font-weight: 500;
  line-height: 1.15;
  letter-spacing: -0.02em;
}

.sheet-fold-list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.sheet-fold-row {
  box-shadow: inset 0 1px 0 rgba(232, 238, 247, 0.09);
}

/* pointer-events back on: the face is transparent to the pointer so the stage keeps its
   capture, and these four buttons are the only things inside it that take a click. */
.sheet-fold-head {
  display: flex;
  width: 100%;
  align-items: baseline;
  gap: 0.75rem;
  appearance: none;
  margin: 0;
  padding: 0.875rem 0.25rem;
  border: 0;
  background: none;
  font: inherit;
  font-size: 0.9375rem;
  font-weight: 500;
  line-height: 1.35;
  text-align: left;
  color: rgba(232, 238, 247, 0.86);
  cursor: pointer;
  pointer-events: auto;
  transition: color 140ms linear;
}

.sheet-fold-head:hover {
  color: #f4f9ff;
}

.sheet-fold-head:focus-visible {
  outline: 2px solid rgba(143, 188, 224, 0.85);
  outline-offset: 1px;
}

.sheet-fold-name {
  flex: 1;
  min-width: 0;
}

.sheet-fold-value {
  flex: none;
  font: 500 0.6875rem/1 ui-monospace, "SFMono-Regular", Menlo, monospace;
  letter-spacing: 0.06em;
  color: rgba(232, 238, 247, 0.38);
}

/*
 * The height is L·sin θ, arriving from the solver as --sheet-fold-h on this element. No
 * transition and no max-height: a transition would blend two solver frames and put easing
 * back on screen after all the trouble taken to get rid of it. overflow keeps the copy from
 * spilling out of a plate that is only part way down, and the inner box below is what holds
 * the layout so nothing re-wraps as the height changes.
 */
.sheet-fold-panel {
  height: var(--sheet-fold-h, 0px);
  overflow: hidden;
  visibility: hidden;
}

.sheet-fold-inner {
  padding: 0 3rem 1.125rem 0;
}

.sheet-fold-copy {
  margin: 0;
  font-size: 0.8125rem;
  line-height: 1.55;
  color: rgba(232, 238, 247, 0.56);
}

.sheet-fold-vars {
  margin: 0.5rem 0 0;
  padding: 0;
  font: 500 0.75rem/1.5 ui-monospace, "SFMono-Regular", Menlo, monospace;
}

.sheet-fold-var {
  display: flex;
  gap: 0.75rem;
}

.sheet-fold-var dt {
  flex: 1;
  min-width: 0;
  color: rgba(232, 238, 247, 0.6);
}

.sheet-fold-var dd {
  flex: none;
  margin: 0;
  color: rgba(143, 188, 224, 0.62);
}

.sheet-fold-hint {
  position: absolute;
  right: 0.875rem;
  bottom: 0.75rem;
  margin: 0;
  font: 500 0.6875rem/1 ui-monospace, "SFMono-Regular", Menlo, monospace;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(232, 238, 247, 0.26);
  pointer-events: none;
}

@media (max-width: 34rem) {
  .sheet-fold-title {
    font-size: 1.125rem;
  }

  .sheet-fold-inner {
    padding-right: 0.75rem;
  }

  .sheet-fold-vars {
    font-size: 0.6875rem;
  }
}

/*
 * Switched off: the fall. With the loop stopped every leaf is placed at the angle its row
 * asks for — 0 or the hinge stop, nothing in between — so opening a row costs one repaint
 * and the panel is simply at its height. The colour the head fades to on hover stays,
 * because it is a colour; the fade is cut, since it is the only animation the stylesheet
 * owns.
 */
@media (prefers-reduced-motion: reduce) {
  .sheet-fold-head {
    transition: none;
  }
}

/*
 * The card variant: the 298x240 catalogue frame, at that real size and never scaled.
 * The four hinges are the subject and all four stay; what goes is everything written
 * around them, because a 31rem stage's worth of heading and variable tables in a 15rem
 * box leaves no room for a leaf to fall through.
 *
 * The panel height is not touched here. `.sheet-fold-inner` is watched by a
 * `ResizeObserver` and its `offsetHeight` is what the solver opens to, so hiding the
 * tables below shortens the stroke by itself — the number is read, never written.
 */
.sheet-fold-stage[data-compact='true'] {
  min-height: 0;
  height: 100%;
  /* The card frame rounds and clips already. */
  border-radius: 0;
}

/* A full-bleed surface that claims every touch traps the page inside a scrolling grid.
   `pan-y` hands the vertical gesture back to the document. */
.sheet-fold-stage[data-compact='true'] .sheet-fold-section {
  touch-action: pan-y;
}

.sheet-fold-stage[data-compact='true'] .sheet-fold-face {
  padding: 0.5rem 0.875rem;
}

/* The heading, the tables and the hint. The card's own title carries the first, and the
   other two are what four rows plus an open leaf need the room back from. */
.sheet-fold-stage[data-compact='true'] .sheet-fold-eyebrow,
.sheet-fold-stage[data-compact='true'] .sheet-fold-title,
.sheet-fold-stage[data-compact='true'] .sheet-fold-vars,
.sheet-fold-stage[data-compact='true'] .sheet-fold-hint {
  display: none;
}

/* 33px a row rather than 47, so four heads and one open panel clear 240px. */
.sheet-fold-stage[data-compact='true'] .sheet-fold-head {
  padding: 0.4375rem 0.25rem;
  font-size: 0.875rem;
}

.sheet-fold-stage[data-compact='true'] .sheet-fold-inner {
  padding: 0 1rem 0.625rem 0;
}

.sheet-fold-stage[data-compact='true'] .sheet-fold-copy {
  font-size: 0.75rem;
}

"use client"

import { useCallback, useEffect, useRef, useState } from "react"

/**
 * The canvas preamble every 2D scene needs, in one place: a DPR-scaled backing
 * store, a rebuild on resize, a loop that stops when the stage scrolls out of
 * view, pointer tracking with per-frame deltas, and teardown.
 *
 * A scene supplies two functions. `setup` builds whatever mutable state the
 * animation owns and is re-run whenever the stage changes size, so the state can
 * be sized to the stage without ever being resized in place. `draw` paints one
 * frame from that state — it is called with the transform already scaled to
 * device pixels, so every coordinate in it is a CSS pixel.
 */

export type ScenePointer = {
  x: number
  y: number
  /** Position at the previous painted frame, so `x - lastX` is a frame delta. */
  lastX: number
  lastY: number
  down: boolean
  inside: boolean
}

export type SceneSetupContext = {
  context: CanvasRenderingContext2D
  width: number
  height: number
  dpr: number
}

export type SceneDrawContext<State> = SceneSetupContext & {
  state: State
  pointer: ScenePointer
  /** Painted frames since the last rebuild. Useful for every-Nth-frame work. */
  frame: number
}

export type CanvasSceneOptions<State> = {
  setup: (context: SceneSetupContext) => State
  draw: (context: SceneDrawContext<State>) => void
}

export type CanvasScene = {
  /** The sizing element. Owns the pointer listeners and is what is observed. */
  stageRef: (node: HTMLDivElement | null) => void
  canvasRef: (node: HTMLCanvasElement | null) => void
  /** Paint one frame now. The escape hatch for a paused or reduced-motion loop. */
  requestRender: () => void
}

/** Live `prefers-reduced-motion`. False during SSR and the first paint. */
export function useReducedMotion() {
  const [reduced, setReduced] = useState(false)

  useEffect(() => {
    const query = window.matchMedia("(prefers-reduced-motion: reduce)")
    setReduced(query.matches)
    const onChange = () => setReduced(query.matches)
    query.addEventListener("change", onChange)
    return () => query.removeEventListener("change", onChange)
  }, [])

  return reduced
}

export function useCanvasScene<State>(options: CanvasSceneOptions<State>): CanvasScene {
  const reduced = useReducedMotion()

  /*
   * `draw` is usually an inline closure, so it is a new function on every
   * render. Reading it through a ref keeps the loop from being torn down and
   * the scene from being rebuilt each time the component re-renders.
   */
  const optionsRef = useRef(options)
  optionsRef.current = options

  const stage = useRef<HTMLDivElement | null>(null)
  const canvas = useRef<HTMLCanvasElement | null>(null)

  /*
   * Plain ref assignment, with no state behind it. React attaches refs during
   * the commit phase, before passive effects run, so the effect below already
   * sees both nodes on the first mount — which is why these used to bump a
   * `mounted` counter for nothing: the two `setMounted` calls batched into one
   * re-render, the counter went 0 → 2, and the effect's dependency on it tore
   * the live scene down and rebuilt it. Every scene was constructed, measured
   * and warmed twice on every mount, four times under StrictMode in dev.
   *
   * The requirement this trades for that: a consumer must render the stage and
   * the canvas unconditionally, in the same commit as the component itself. All
   * thirteen do. Gating the canvas behind a flag would leave the effect bailing
   * on the null guard with nothing to re-run it.
   */
  const stageRef = useCallback((node: HTMLDivElement | null) => {
    stage.current = node
  }, [])
  const canvasRef = useCallback((node: HTMLCanvasElement | null) => {
    canvas.current = node
  }, [])

  /** Set once the scene is live, so `requestRender` before that is a no-op. */
  const render = useRef<(() => void) | null>(null)
  const requestRender = useCallback(() => render.current?.(), [])

  useEffect(() => {
    const stageNode = stage.current
    const canvasNode = canvas.current
    if (!stageNode || !canvasNode) return

    const context = canvasNode.getContext("2d")
    if (!context) return

    const pointer: ScenePointer = {
      x: 0,
      y: 0,
      lastX: 0,
      lastY: 0,
      down: false,
      inside: false,
    }

    let state: State | null = null
    let width = 0
    let height = 0
    let dpr = 1
    let frame = 0
    let loop = 0
    let pending = 0
    let visible = true

    /** Rebuild the backing store and the scene state for the current size. */
    const measure = () => {
      // `offsetWidth`/`offsetHeight`, not `getBoundingClientRect()`: the rect is
      // post-transform, so a scene sitting inside a scaled ancestor measured its
      // own frame at the scaled size, sized the backing store to that, and then
      // had CSS scale the result a second time — the scene ran at a fraction of
      // the box it was drawn into. The catalogue's scaled-poster branch is the
      // one place that happens, and it is reachable again the moment an
      // animation is registered without a card composition. These two properties
      // are the untransformed layout box; both are integers, which is what the
      // rounding below already reduced the rect to.
      const nextWidth = Math.max(1, stageNode.offsetWidth)
      const nextHeight = Math.max(1, stageNode.offsetHeight)
      const nextDpr = Math.min(2, window.devicePixelRatio || 1)
      if (nextWidth === width && nextHeight === height && nextDpr === dpr && state) return

      width = nextWidth
      height = nextHeight
      dpr = nextDpr
      canvasNode.width = Math.round(width * dpr)
      canvasNode.height = Math.round(height * dpr)
      canvasNode.style.width = `${width}px`
      canvasNode.style.height = `${height}px`
      frame = 0
      state = optionsRef.current.setup({ context, width, height, dpr })
    }

    const paint = () => {
      if (!state) return
      // Re-applied every frame: a scene is free to install its own transform
      // for a cell or a sprite, and most do.
      context.setTransform(dpr, 0, 0, dpr, 0, 0)
      optionsRef.current.draw({ context, width, height, dpr, state, pointer, frame })
      pointer.lastX = pointer.x
      pointer.lastY = pointer.y
      frame += 1
    }

    /** One frame on the next tick, coalescing however many were asked for. */
    const paintOnce = () => {
      if (pending) return
      pending = requestAnimationFrame(() => {
        pending = 0
        measure()
        paint()
      })
    }
    render.current = paintOnce

    const tick = () => {
      loop = requestAnimationFrame(tick)
      if (visible) paint()
    }

    const start = () => {
      if (loop || reduced) return
      loop = requestAnimationFrame(tick)
    }
    const stop = () => {
      if (!loop) return
      cancelAnimationFrame(loop)
      loop = 0
    }

    const at = (event: PointerEvent) => {
      const rect = stageNode.getBoundingClientRect()
      // The rect is the right thing to subtract here — `clientX` is viewport
      // space and so is the rect — but the difference comes back in *rendered*
      // pixels, and a scene reads `pointer` in the scene pixels `measure()` set
      // up from the untransformed box. Under a CSS scale those two disagree, so
      // divide the transform back out. `rect.width / offsetWidth` is the scale
      // actually in force, whatever produced it, and it is exactly 1 when there
      // is none.
      const scale = stageNode.offsetWidth > 0 ? rect.width / stageNode.offsetWidth : 1
      pointer.x = (event.clientX - rect.left) / (scale || 1)
      pointer.y = (event.clientY - rect.top) / (scale || 1)
      // A frozen loop still owes the user feedback for a drag.
      if (reduced) paintOnce()
    }

    const onEnter = (event: PointerEvent) => {
      pointer.inside = true
      at(event)
      pointer.lastX = pointer.x
      pointer.lastY = pointer.y
    }
    const onMove = (event: PointerEvent) => {
      pointer.inside = true
      at(event)
    }
    const onDown = (event: PointerEvent) => {
      pointer.down = true
      at(event)
      // Capture keeps a drag alive past the edge of the stage, which is where
      // a hard throw naturally ends up.
      stageNode.setPointerCapture(event.pointerId)
    }
    const onUp = (event: PointerEvent) => {
      pointer.down = false
      at(event)
      if (stageNode.hasPointerCapture(event.pointerId)) {
        stageNode.releasePointerCapture(event.pointerId)
      }
    }
    const onLeave = () => {
      pointer.inside = false
      pointer.down = false
      if (reduced) paintOnce()
    }

    stageNode.addEventListener("pointerenter", onEnter)
    stageNode.addEventListener("pointermove", onMove)
    stageNode.addEventListener("pointerdown", onDown)
    stageNode.addEventListener("pointerup", onUp)
    stageNode.addEventListener("pointercancel", onUp)
    stageNode.addEventListener("pointerleave", onLeave)

    const resizes = new ResizeObserver(() => paintOnce())
    resizes.observe(stageNode)

    /*
     * An animation nobody can see is heat. The observer both pauses the loop
     * and, on the way back in, repaints immediately rather than waiting a frame.
     */
    const views = new IntersectionObserver(
      (entries) => {
        visible = entries.some((entry) => entry.isIntersecting)
        if (visible) {
          start()
          paintOnce()
        } else {
          stop()
        }
      },
      { rootMargin: "120px" },
    )
    views.observe(stageNode)

    measure()
    paint()
    start()

    return () => {
      render.current = null
      stop()
      if (pending) cancelAnimationFrame(pending)
      resizes.disconnect()
      views.disconnect()
      stageNode.removeEventListener("pointerenter", onEnter)
      stageNode.removeEventListener("pointermove", onMove)
      stageNode.removeEventListener("pointerdown", onDown)
      stageNode.removeEventListener("pointerup", onUp)
      stageNode.removeEventListener("pointercancel", onUp)
      stageNode.removeEventListener("pointerleave", onLeave)
    }
  }, [reduced])

  return { stageRef, canvasRef, requestRender }
}