Shutter Compare

'use client';

import './shutter-compare.css';

import { useEffect, useRef, useState, type KeyboardEvent } from 'react';

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

/**
 * A before/after comparison slider whose divider is the trailing edge of a
 * focal-plane shutter curtain.
 *
 * Two curtains cross the frame. Each is a mass on a spring released by a latch and
 * integrates m·x'' = −k·(x − x_rest) − b·x' + F_drive, with the mass absorbed into
 * the constants. The two force terms are gated by position, which is the split a
 * mechanical shutter actually has: the mainspring supplies a constant F_drive
 * through free travel and is cut at a buffer an eighth of the frame from the stop,
 * and the return spring −k·(x − x_rest) is engaged only inside that buffer. So the
 * traverse is flat and the arrest is a spring, rather than the quarter-sine one
 * spring pulling from end to end would give.
 *
 * The second curtain is not geometrically pinned to the first. It is latched, and
 * its latch is released one exposure time after the first curtain's, so the slit is
 * whatever gap the two have opened up by then — at full travel, frame · exposure /
 * traverse. That ratio is the whole mechanism. At 1/250 the gap is exactly one
 * frame: the X-sync limit of a mechanical shutter, and the reason a flash cannot be
 * used faster than it. Above it the slit is narrower than the frame, so the reveal
 * is not a divider crossing an already-open gate but a moving band — one edge of
 * the frame is exposed measurably later than the other, which is the honest
 * behaviour of a focal-plane shutter and the reason rolling-shutter distortion
 * exists at all.
 *
 * Dragging sets the slit position directly, so the handle leads and the curtains
 * lag behind it under their springs; letting go leaves the springs to travel to
 * rest. A press far from the divider is a full release: both curtains traverse at
 * mainspring speed, which is the only time the gap reaches its stated width.
 *
 * STEP is 1/120. The springs are not stiff: the return spring is k = 784 s⁻² per
 * unit mass, so ω is 28 rad/s and ω·STEP is 0.23 — an eighth of what semi-implicit
 * Euler carries. 1/240 would buy nothing but heat, because the fast part of the
 * motion is the drive-limited traverse and that is a straight line no step size
 * renders better.
 *
 * What is compared is one drawing under two treatments, both composed here: the
 * same five-room plan as a setting-out wireframe — grid, single-weight outlines,
 * door swings, a dimension chain — on the side the slit has not reached, and as a
 * rendered plan with poché walls, floor tints and filled fittings on the side it
 * has passed.
 *
 * Under prefers-reduced-motion the loop never starts, so `setup` composes the still
 * itself: the curtains parted at the commanded position by the gap the selected
 * exposure implies, wireframe left of the divider, rendered plan right of it, and
 * the lit slit between the two curtain edges at its real width.
 *
 * The one thing here that is a rendering choice rather than the mechanism: the frame
 * keeps what the slit has passed over, the way film does, and dragging back resets
 * it. A shutter cannot un-expose. A comparison slider has to be reversible.
 */

/** Seconds per step. */
const STEP = 1 / 120;
/** 10 steps span 83ms, so a 12fps frame is still integrated in full. */
const MAX_SUBSTEPS = 10;
/** Return-spring rate per unit curtain mass, s⁻². ω = 28 rad/s. */
const K = 784;
/** Damping per unit mass, s⁻¹. ζ = 0.92, which puts the stop at about 0.2s and no ring. */
const B = 51.5;
/**
 * Seconds a curtain takes to cross the whole frame under the mainspring. A real
 * one does it in about 4ms, which is nothing to look at; the ratio exposure /
 * traverse is the only quantity that sets the slit width, and the shutter speeds
 * below are scaled against this so that ratio is preserved exactly.
 */
const TRAVEL = 0.3;
/**
 * Fraction of the frame the return spring owns at the end of the travel. With
 * TRAVEL, this fixes ω: arresting v = frame/TRAVEL inside BUFFER·frame without
 * overshoot needs ω ≈ 1/(TRAVEL·BUFFER) = 28, and the frame width cancels — which
 * is why one ω works at every card size.
 */
const BUFFER = 0.12;
/** The exposure whose slit is exactly one frame wide. A real shutter's X-sync speed. */
const SYNC = 250;
const SPEEDS = [60, 250, 1000, 4000];
const START_SPEED = 250;
const START_VALUE = 45;
const KEY_STEP = 2;
const PAGE_STEP = 10;

const ACCENT = '255, 201, 120';
const INK = '236, 243, 255';

/** The setting-out grid the plan is drawn on. Both treatments read from it. */
const GRID_W = 12;
const GRID_H = 8;

/** Rooms, as an exact partition of the grid: [x, y, w, h]. */
const ROOMS = [
  [0, 0, 7, 5],
  [7, 0, 5, 5],
  [0, 5, 4, 3],
  [4, 5, 2, 3],
  [6, 5, 6, 3],
];

/** Fittings. Outlines under the wireframe, filled masses under the render. */
const BLOCKS = [
  [0.6, 3.5, 3.6, 1],
  [4.7, 2.5, 1.7, 1.4],
  [7.4, 0.4, 4.2, 0.8],
  [8.5, 2.3, 2.2, 1],
  [0.4, 5.4, 1.1, 2.2],
  [2.5, 5.4, 1.1, 1.1],
  [7.1, 5.6, 2.4, 1.9],
  [10.4, 5.4, 1.2, 2.2],
];

/** The two fittings the rendered side picks out in the accent. Indices into BLOCKS. */
const LIT = [1, 6];

/** Door swings: [hinge x, hinge y, radius, quarter turn the leaf opens through]. */
const DOORS = [
  [7, 1.75, 0.95, 0],
  [4.9, 5, 0.9, 1],
  [4, 6.3, 0.85, 3],
  [6, 6.3, 0.85, 0],
];

/** The lines the plan is dimensioned from, in grid units. */
const DIM_X = [0, 7, 12];
const DIM_Y = [0, 5, 8];

interface Curtain {
  /** The edge that matters, in px from the left of the frame. */
  x: number;
  v: number;
  /** Where this curtain's return spring wants that edge. */
  rest: number;
}

interface State {
  clock: number;
  carry: number;
  snap: boolean;
  /** Plan geometry. All of it is derived from the frame size, in `setup`. */
  ox: number;
  oy: number;
  scale: number;
  wall: number;
  dim: number;
  /** The first curtain's trailing edge: the divider between the two treatments. */
  first: Curtain;
  /** The second curtain's leading edge: the far side of the slit. */
  second: Curtain;
  /** Seconds of latch left on the second curtain. Above zero it is held shut. */
  hold: number;
  /** Commanded divider position in px, written from the slider value each frame. */
  cmd: number;
  lastCmd: number;
  /** Seconds the second curtain's latch waits — the exposure time, scaled. */
  delay: number;
  /** The gap that delay opens at full travel. Only used to place the still frame. */
  slit: number;
  /** Mainspring force per unit mass, set so a full traverse takes TRAVEL seconds. */
  drive: number;
  /** Where the return spring takes over from the mainspring, in px. */
  buffer: number;
}

const px = (s: State, u: number): number => s.ox + u * s.scale;
const py = (s: State, v: number): number => s.oy + v * s.scale;

/**
 * One fixed step of m·x'' = −k·(x − x_rest) − b·x' + F_drive for one curtain.
 *
 * Both force terms are gated on how far the curtain still has to go. Outside the
 * buffer only the mainspring and the damper act, so the curtain settles onto a
 * terminal velocity of drive/b and holds it — a flat traverse, which is what a
 * curtain crossing a gate does. Inside the buffer the mainspring is cut and the
 * return spring takes the velocity out. Letting the return spring pull across the
 * whole frame instead would make the traverse a quarter-sine: fastest in the middle,
 * asymptotically slow at the end, and the slit would change width as it crossed.
 */
function advance(c: Curtain, drive: number, buffer: number): void {
  const gap = c.rest - c.x;
  const free = Math.abs(gap) > buffer;
  const push = free ? Math.sign(gap) * drive : 0;
  const spring = free ? 0 : K * gap;
  c.v += (spring - B * c.v + push) * STEP;
  c.x += c.v * STEP;
}

/**
 * The latch, then both curtains.
 *
 * A command toward the open side is a release: the first curtain is let go at once
 * and the second is held where it stands for the exposure time, which is what opens
 * the slit. A command the other way is a re-cock, and winding a shutter back pulls
 * both curtains together, so the latch is dropped and no slit opens on the way back.
 */
function step(s: State): void {
  if (s.cmd < s.lastCmd - 0.05) {
    // Only re-armable once the second curtain has caught the first. Mid-exposure
    // the latch is already spent and cannot be spent again.
    if (s.hold <= 0 && s.second.x - s.first.x < s.buffer * 0.5) {
      s.hold = s.delay;
      s.second.rest = s.second.x;
    }
  } else if (s.cmd > s.lastCmd + 0.05) {
    s.hold = 0;
  }
  s.lastCmd = s.cmd;

  s.first.rest = s.cmd;
  if (s.hold > 0) s.hold -= STEP;
  else s.second.rest = s.cmd;

  advance(s.first, s.drive, s.buffer);
  advance(s.second, s.drive, s.buffer);
}

/**
 * The mid-exposure still: the first curtain on the commanded divider, the second
 * parted from it by the gap this exposure implies at full travel, both stationary.
 * This is what `prefers-reduced-motion` gets, and it is also the first painted frame
 * when the loop is running — a shutter caught open reads as a mechanism, where a
 * closed one reads as a line down a picture.
 */
function part(s: State, width: number): void {
  s.first.x = s.cmd;
  s.first.v = 0;
  s.first.rest = s.cmd;
  s.second.x = Math.min(width, s.cmd + s.slit);
  s.second.v = 0;
  s.second.rest = s.second.x;
  s.hold = 0;
  s.lastCmd = s.cmd;
}

/** The side the slit has not reached: the plan as it is set out, not as it is built. */
function latent(ctx: CanvasRenderingContext2D, s: State): void {
  ctx.lineJoin = 'miter';
  ctx.lineWidth = 1;

  ctx.strokeStyle = `rgba(${INK}, 0.07)`;
  ctx.beginPath();
  for (let u = 0; u <= GRID_W; u += 1) {
    ctx.moveTo(px(s, u), py(s, 0));
    ctx.lineTo(px(s, u), py(s, GRID_H));
  }
  for (let v = 0; v <= GRID_H; v += 1) {
    ctx.moveTo(px(s, 0), py(s, v));
    ctx.lineTo(px(s, GRID_W), py(s, v));
  }
  ctx.stroke();

  ctx.strokeStyle = `rgba(${INK}, 0.44)`;
  ctx.beginPath();
  for (const r of ROOMS) {
    ctx.rect(px(s, r[0]), py(s, r[1]), r[2] * s.scale, r[3] * s.scale);
  }
  ctx.stroke();

  ctx.strokeStyle = `rgba(${INK}, 0.24)`;
  ctx.beginPath();
  for (const b of BLOCKS) {
    ctx.rect(px(s, b[0]), py(s, b[1]), b[2] * s.scale, b[3] * s.scale);
  }
  ctx.stroke();

  // Door leaf and swing, one path each: a shared path would join the end of one arc
  // to the start of the next with a line across the plan.
  ctx.strokeStyle = `rgba(${INK}, 0.3)`;
  for (const d of DOORS) {
    const from = (d[3] * Math.PI) / 2;
    const r = d[2] * s.scale;
    ctx.beginPath();
    ctx.moveTo(px(s, d[0]), py(s, d[1]));
    ctx.lineTo(px(s, d[0]) + Math.cos(from) * r, py(s, d[1]) + Math.sin(from) * r);
    ctx.arc(px(s, d[0]), py(s, d[1]), r, from, from + Math.PI / 2);
    ctx.stroke();
  }

  // The dimension chain, in the margin `setup` reserved for it.
  const chainY = s.oy - s.dim + 4;
  const chainX = s.ox - s.dim + 4;
  ctx.strokeStyle = `rgba(${INK}, 0.1)`;
  ctx.beginPath();
  for (const u of DIM_X) {
    ctx.moveTo(px(s, u), chainY + 3);
    ctx.lineTo(px(s, u), py(s, 0));
  }
  for (const v of DIM_Y) {
    ctx.moveTo(chainX + 3, py(s, v));
    ctx.lineTo(px(s, 0), py(s, v));
  }
  ctx.stroke();

  ctx.strokeStyle = `rgba(${INK}, 0.26)`;
  ctx.beginPath();
  ctx.moveTo(px(s, 0), chainY);
  ctx.lineTo(px(s, GRID_W), chainY);
  ctx.moveTo(chainX, py(s, 0));
  ctx.lineTo(chainX, py(s, GRID_H));
  for (const u of DIM_X) {
    ctx.moveTo(px(s, u), chainY - 4);
    ctx.lineTo(px(s, u), chainY + 4);
  }
  for (const v of DIM_Y) {
    ctx.moveTo(chainX - 4, py(s, v));
    ctx.lineTo(chainX + 4, py(s, v));
  }
  ctx.stroke();
}

/** The side the slit has passed: the same plan built. */
function exposed(ctx: CanvasRenderingContext2D, s: State): void {
  ctx.lineJoin = 'miter';

  ROOMS.forEach((r, i) => {
    ctx.fillStyle = `rgba(${INK}, ${i % 2 ? 0.055 : 0.095})`;
    ctx.fillRect(px(s, r[0]), py(s, r[1]), r[2] * s.scale, r[3] * s.scale);
  });

  // Poché: the room outlines stroked at wall thickness, so every shared edge gets
  // one wall of the right weight and the perimeter gets half of one.
  ctx.strokeStyle = `rgba(${INK}, 0.62)`;
  ctx.lineWidth = s.wall;
  ctx.beginPath();
  for (const r of ROOMS) {
    ctx.rect(px(s, r[0]), py(s, r[1]), r[2] * s.scale, r[3] * s.scale);
  }
  ctx.stroke();

  BLOCKS.forEach((b, i) => {
    ctx.fillStyle = LIT.includes(i) ? `rgba(${ACCENT}, 0.72)` : `rgba(${INK}, 0.28)`;
    ctx.fillRect(px(s, b[0]), py(s, b[1]), b[2] * s.scale, b[3] * s.scale);
  });
}

/**
 * The divider the two treatments meet on, with its shading falling across the side
 * the reveal has not reached yet.
 */
function divider(ctx: CanvasRenderingContext2D, height: number, x: number): void {
  const fade = ctx.createLinearGradient(x, 0, x - 30, 0);
  fade.addColorStop(0, 'rgba(5, 8, 14, 0.6)');
  fade.addColorStop(1, 'rgba(5, 8, 14, 0)');
  ctx.fillStyle = fade;
  ctx.fillRect(x - 30, 0, 30, height);

  ctx.strokeStyle = `rgba(${ACCENT}, 0.9)`;
  ctx.lineWidth = 1.5;
  ctx.beginPath();
  ctx.moveTo(x, 0);
  ctx.lineTo(x, height);
  ctx.stroke();
}

function paint(ctx: CanvasRenderingContext2D, width: number, height: number, s: State): void {
  const a = Math.max(0, Math.min(width, s.first.x));
  const b = Math.max(a, Math.min(width, s.second.x));

  ctx.clearRect(0, 0, width, height);

  if (a > 0.5) {
    ctx.save();
    ctx.beginPath();
    ctx.rect(0, 0, a, height);
    ctx.clip();
    latent(ctx, s);
    ctx.restore();
  }

  if (width - a > 0.5) {
    ctx.save();
    ctx.beginPath();
    ctx.rect(a, 0, width - a, height);
    ctx.clip();
    // A faint lift on the exposed field, so the two sides read apart in the margins
    // where the drawing itself has nothing to show.
    ctx.fillStyle = 'rgba(255, 248, 234, 0.035)';
    ctx.fillRect(a, 0, width - a, height);
    exposed(ctx, s);
    ctx.restore();
  }

  // The slit: the band that is open right now, brightest at the edge that opened it.
  if (b - a > 0.75) {
    const lit = ctx.createLinearGradient(a, 0, b, 0);
    lit.addColorStop(0, `rgba(${ACCENT}, 0.2)`);
    lit.addColorStop(1, `rgba(${ACCENT}, 0.04)`);
    ctx.fillStyle = lit;
    ctx.fillRect(a, 0, b - a, height);
  }

  divider(ctx, height, a);
}

/** `compact` is the 298x240 catalogue card: the same two curtains and the same speed
 *  buttons, with the tags and the hint dropped. The frame is measured off the canvas box,
 *  so the traverse and the slit are the same solve — see `shutter-compare.css`. */
export type ShutterCompareProps = { compact?: boolean };

export function ShutterCompare({ compact = false }: ShutterCompareProps) {
  const reduced = useReducedMotion();
  // The pointer, the keys and the solver all read the divider, so the ref is the
  // single source of truth and the React state is only the copy the label and the
  // grip's position render from.
  const valueRef = useRef(START_VALUE);
  const [value, setValue] = useState(START_VALUE);
  const [speed, setSpeed] = useState(START_SPEED);
  const handleRef = useRef<HTMLDivElement>(null);

  const commit = (next: number) => {
    const clamped = Math.round(Math.min(100, Math.max(0, next)));
    if (clamped === valueRef.current) return;
    valueRef.current = clamped;
    setValue(clamped);
  };

  const setup = ({ width, height }: SceneSetupContext): State => {
    // Every number below is read here and only here: `setup` re-runs on resize and
    // on a DPR change, so nothing downstream can hold geometry from the old size.
    const padX = Math.max(16, Math.min(30, width * 0.055));
    const top = Math.min(80, Math.max(44, height * 0.2));
    const bottom = Math.min(92, Math.max(52, height * 0.24));
    const dim = 15;
    const boxW = Math.max(40, width - padX * 2 - dim);
    const boxH = Math.max(40, height - top - bottom - dim);
    const scale = Math.min(boxW / GRID_W, boxH / GRID_H);

    const state: State = {
      clock: 0,
      carry: 0,
      snap: reduced,
      ox: padX + dim + (boxW - GRID_W * scale) / 2,
      oy: top + dim + (boxH - GRID_H * scale) / 2,
      scale,
      wall: Math.max(2.5, scale * 0.17),
      dim,
      first: { x: 0, v: 0, rest: 0 },
      second: { x: 0, v: 0, rest: 0 },
      hold: 0,
      cmd: (valueRef.current / 100) * width,
      lastCmd: 0,
      delay: TRAVEL * (SYNC / speed),
      slit: Math.min(width, (width * SYNC) / speed),
      drive: B * (width / TRAVEL),
      buffer: Math.max(24, width * BUFFER),
    };

    part(state, width);
    return state;
  };

  const draw = ({ context, width, height, state, pointer }: SceneDrawContext<State>) => {
    const now = performance.now() / 1000;
    const dt = state.clock === 0 ? 0 : Math.min(0.05, now - state.clock);
    state.clock = now;
    state.snap = reduced;
    // The two numbers the speed buttons own. Written every frame rather than read
    // through a closure, so a press changes the mechanism and not the drawing.
    state.delay = TRAVEL * (SYNC / speed);
    state.slit = Math.min(width, (width * SYNC) / speed);

    if (pointer.down && pointer.inside) {
      commit((pointer.x / Math.max(1, width)) * 100);
    }
    state.cmd = (valueRef.current / 100) * width;

    if (state.snap) {
      part(state, width);
    } else {
      state.carry += dt;
      let n = 0;
      while (state.carry >= STEP && n < MAX_SUBSTEPS) {
        step(state);
        state.carry -= STEP;
        n += 1;
      }
      if (n === MAX_SUBSTEPS) state.carry = 0;
    }

    paint(context, width, height, state);
  };

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

  // With the loop stopped, nothing else would repaint: the still would keep the old
  // divider and the old slit width however many keys were pressed.
  useEffect(() => requestRender(), [value, speed, reduced, requestRender]);

  const onKeyDown = (event: KeyboardEvent<HTMLDivElement>) => {
    const at = valueRef.current;
    let next = at;
    if (event.key === 'ArrowRight' || event.key === 'ArrowUp') next = at + KEY_STEP;
    else if (event.key === 'ArrowLeft' || event.key === 'ArrowDown') next = at - KEY_STEP;
    else if (event.key === 'PageUp') next = at + PAGE_STEP;
    else if (event.key === 'PageDown') next = at - PAGE_STEP;
    else if (event.key === 'Home') next = 0;
    else if (event.key === 'End') next = 100;
    else return;
    event.preventDefault();
    commit(next);
    requestRender();
  };

  return (
    // A press hands focus to the divider, since the control is transparent to the
    // pointer and would otherwise only ever be reachable by Tab. In a card there is
    // nothing to hand focus to — the whole frame is aria-hidden — so the press is left
    // to the canvas alone.
    <div
      className="shutter-compare-stage"
      data-compact={compact ? 'true' : undefined}
      onPointerDown={compact ? undefined : () => handleRef.current?.focus()}
    >
      <div ref={stageRef} className="shutter-compare-frame" aria-hidden="true">
        <canvas ref={canvasRef} />
      </div>

      <div className="shutter-compare-ui">
        <div>
          <p className="shutter-compare-label">Unit 4b · plan</p>
          <p className="shutter-compare-read">
            {value}
            <span className="shutter-compare-unit">% built</span>
          </p>
        </div>

        <div className="shutter-compare-base">
          <div className="shutter-compare-foot">
            <p className="shutter-compare-tag">
              <b>setting out</b>
            </p>
            <p className="shutter-compare-tag shutter-compare-tag-end">
              <b>built</b>
            </p>
          </div>

          <div className="shutter-compare-speeds" role="group" aria-label="Shutter speed">
            {SPEEDS.map((each) => (
              <button
                key={each}
                type="button"
                className="shutter-compare-speed"
                aria-pressed={each === speed}
                /* 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={() => setSpeed(each)}
              >
                1/{each}
              </button>
            ))}
          </div>
        </div>
      </div>

      {/* A sibling of the tracked element, never a child of it: the canvas host
          takes pointer capture on pointerdown and would swallow this one's focus
          and its keys. */}
      <div
        ref={handleRef}
        className="shutter-compare-handle"
        style={{ left: `${value}%` }}
        role="slider"
        tabIndex={compact ? -1 : 0}
        aria-label="Reveal divider"
        aria-orientation="horizontal"
        aria-valuemin={0}
        aria-valuemax={100}
        aria-valuenow={value}
        aria-valuetext={`${value} percent built, at 1/${speed} second`}
        onKeyDown={onKeyDown}
      />

      <p className="shutter-compare-hint">drag · arrows · home/end</p>
    </div>
  );
}

export default ShutterCompare;

/* shutter-compare — a before/after divider carried by the two curtains of a
   focal-plane shutter, each a mass on a spring released by its own latch. */

.shutter-compare-stage {
  position: relative;
  width: 100%;
  min-height: 23rem;
  padding: 1.5rem 1.375rem 1.25rem;
  overflow: hidden;
  border-radius: 0.875rem;
  background: radial-gradient(130% 120% at 50% 0%, #0d1420 0%, #080c15 58%, #05070c 100%);
  color: #ecf3ff;
  /* Hairline as an inset shadow rather than a border: the canvas host is inset 0
     against the padding box and the handle is positioned as a percentage of that
     same box, so a 1px border would slide the drawn curtain edge off the grip
     the user is holding. */
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.075);
}

.shutter-compare-frame {
  position: absolute;
  inset: 0;
  touch-action: none;
}

.shutter-compare-frame canvas {
  display: block;
  width: 100%;
  height: 100%;
}

/* Transparent to the pointer so a press anywhere in the frame commands the
   divider. Only the shutter-speed buttons take events back. */
.shutter-compare-ui {
  position: relative;
  display: flex;
  min-height: 19.5rem;
  flex-direction: column;
  justify-content: space-between;
  pointer-events: none;
}

.shutter-compare-label {
  margin: 0;
  font: 500 0.6875rem/1 ui-monospace, 'SFMono-Regular', Menlo, monospace;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(236, 243, 255, 0.5);
}

.shutter-compare-read {
  margin: 0.5rem 0 0;
  font-size: 2rem;
  font-weight: 500;
  line-height: 1;
  letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums;
  text-shadow: 0 1px 18px rgba(5, 8, 14, 0.65);
}

.shutter-compare-unit {
  margin-left: 0.25em;
  font-size: 0.875rem;
  font-weight: 500;
  letter-spacing: 0;
  color: rgba(236, 243, 255, 0.5);
}

/* Both bottom rows in one child, so the flex `space-between` above pins them to
   the floor together instead of stranding the labels over the drawing. */
.shutter-compare-base {
  display: grid;
  gap: 0.75rem;
}

.shutter-compare-foot {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1rem;
}

.shutter-compare-tag {
  margin: 0;
  font: 500 0.625rem/1.45 ui-monospace, 'SFMono-Regular', Menlo, monospace;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(236, 243, 255, 0.32);
  text-shadow: 0 1px 12px rgba(5, 8, 14, 0.75);
}

.shutter-compare-tag b {
  font-weight: 500;
  color: rgba(236, 243, 255, 0.6);
}

.shutter-compare-tag-end {
  text-align: right;
}

.shutter-compare-speeds {
  display: flex;
  gap: 0.3125rem;
}

.shutter-compare-speed {
  appearance: none;
  margin: 0;
  padding: 0.375rem 0.5625rem;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 999px;
  background: rgba(6, 12, 20, 0.5);
  font: inherit;
  font-size: 0.6875rem;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  color: rgba(236, 243, 255, 0.7);
  cursor: pointer;
  pointer-events: auto;
  backdrop-filter: blur(6px);
  transition:
    border-color 160ms ease,
    background-color 160ms ease,
    color 160ms ease;
}

.shutter-compare-speed:hover {
  border-color: rgba(255, 201, 120, 0.42);
  color: #fff6e8;
}

.shutter-compare-speed[aria-pressed='true'] {
  border-color: rgba(255, 201, 120, 0.62);
  background: rgba(255, 201, 120, 0.16);
  color: #fff3df;
}

.shutter-compare-speed:focus-visible {
  outline: 2px solid rgba(255, 201, 120, 0.8);
  outline-offset: 2px;
}

/* The grip the pointer and the arrow keys both move. It is drawn at the commanded
   position while the canvas draws the curtains where the solver has them, so the
   gap between this and the bright edge during a drag is the lag of a real mass on
   a spring and not a rendering slip. `pointer-events` stays none so a press falls
   through to the canvas host, which owns the hook's pointer capture. */
.shutter-compare-handle {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 2.75rem;
  transform: translateX(-50%);
  pointer-events: none;
}

.shutter-compare-handle::before {
  content: '';
  position: absolute;
  top: 3.5rem;
  bottom: 4.75rem;
  left: 50%;
  width: 1px;
  background: repeating-linear-gradient(
    180deg,
    rgba(255, 201, 120, 0.5) 0 3px,
    rgba(255, 201, 120, 0) 3px 7px
  );
}

.shutter-compare-handle::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 1.375rem;
  height: 1.375rem;
  border: 1px solid rgba(255, 201, 120, 0.55);
  border-radius: 999px;
  background: rgba(8, 13, 22, 0.85);
  box-shadow:
    0 0 0 4px rgba(8, 13, 22, 0.45),
    0 0 16px rgba(255, 201, 120, 0.22);
  transform: translate(-50%, -50%);
}

/* The ring belongs on the grip, not on the full-height strip the strip has to be
   to stay easy to hit. */
.shutter-compare-handle:focus-visible {
  outline: none;
}

.shutter-compare-handle:focus-visible::after {
  outline: 2px solid rgba(255, 201, 120, 0.85);
  outline-offset: 3px;
}

.shutter-compare-hint {
  position: absolute;
  top: 1.5rem;
  right: 1.375rem;
  margin: 0;
  font: 500 0.6875rem/1 ui-monospace, 'SFMono-Regular', Menlo, monospace;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  pointer-events: none;
  color: rgba(236, 243, 255, 0.26);
}

/*
 * What is switched off is the travel, not the shutter. With the loop stopped the
 * two curtains are painted parted by exactly the gap the selected exposure implies
 * at full travel, so the still carries both treatments, the divider between them
 * and the real width of the slit — at 1/60 that slit reaches the frame edge, at
 * 1/4000 it is a band a sixteenth of the frame wide. Every arrow key and every
 * speed change repaints that still in its new place.
 */
@media (prefers-reduced-motion: reduce) {
  .shutter-compare-speed {
    transition: none;
  }
}

/*
 * The card variant: the 298x240 catalogue frame, at that real size and never scaled.
 * The curtains are laid out from the canvas box — the top and bottom margins are
 * `height * 0.2` and `height * 0.24` under clamps — so the frame follows the card down
 * and the slit stays the width the selected exposure makes it. All this does is drop the
 * two corner tags and the hint and bring the reading down a size.
 */
.shutter-compare-stage[data-compact='true'] {
  min-height: 0;
  height: 100%;
  padding: 0.75rem 0.875rem;
  /* The card frame rounds and clips already. */
  border-radius: 0;
}

/* A full-bleed drag surface that claims every touch traps the page inside a scrolling
   grid. `pan-y` hands the vertical gesture back to the document; the horizontal drag is
   the one this mechanism is about, and it still arrives. */
.shutter-compare-stage[data-compact='true'] .shutter-compare-frame {
  touch-action: pan-y;
}

/* The full stage reserves 19.5rem for this column. In a card it takes what is left. */
.shutter-compare-stage[data-compact='true'] .shutter-compare-ui {
  min-height: 0;
  height: 100%;
}

.shutter-compare-stage[data-compact='true'] .shutter-compare-read {
  margin-top: 0.25rem;
  font-size: 1.625rem;
}

/* Both are the card's own title's job, and the tags are what the speed row needs the
   room back from. */
.shutter-compare-stage[data-compact='true'] .shutter-compare-foot,
.shutter-compare-stage[data-compact='true'] .shutter-compare-hint {
  display: none;
}

.shutter-compare-stage[data-compact='true'] .shutter-compare-speed {
  padding: 0.25rem 0.4375rem;
  font-size: 0.625rem;
}

"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 }
}