Euler Disk Spinner

'use client';

import './euler-disk-spinner.css';

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

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

/**
 * A determinate loader whose spinner is Euler's disk: a coin rolling on its rim, rattling faster
 * as it dies, then lying flat and dead the moment the job is done.
 *
 * Rolling without slipping locks the precession rate to the inclination, Omega^2 = (4g/3R)/sin a,
 * so Omega DIVERGES like a^-1/2 while the energy E = MgR*sin a drains away. Two sinks drain it:
 * air squeezed out of the closing wedge, P ~ Omega^2/sin a (Moffatt), and rolling friction at the
 * contact, P ~ Omega. Dividing by dE/da = MgR*cos a gives the equation this file integrates,
 *
 *     da/dt = -(C_v * Omega^2 / sin a + C_r * Omega) / cos a,
 *
 * whose viscous term alone makes a^3 fall linearly in time: a reaches zero at a finite instant
 * with the rate still climbing. That is why this beats a rotating arc — the ending is a real
 * singularity, not a fade-out.
 *
 * a and Omega are separate states and Omega is capped at the step limit. Solve Omega from the
 * constraint alone and the last frames turn over more than a lap each: the contact point aliases
 * into a jitter and the coin tears off the plate one frame before it should be flat.
 */

const TAU = Math.PI * 2;
const STEP = 1 / 240;              // the rattle clears 7 Hz before it dies; 120 Hz aliases the tail
const MAX_SUBSTEPS = 8;
const ALPHA_START = 0.6;           // rad of inclination at full energy: 34 degrees, a 2.5 s run
const SIN_START = Math.sin(ALPHA_START);
const ALPHA_FLOOR = 0.0035;        // the drain divides by sin(alpha), so it never sees zero
const ALPHA_STOP = 0.006;          // the singularity has arrived: lie flat and stop dead
const GRAV_COUPLE = 26;            // 4g/3R in stage units: 1.1 Hz at full tilt, 7.3 Hz at the cap
const OMEGA_CAP = 46;              // rad/s, i.e. 0.19 rad per substep — the last frames climb toward this
const VISC_DRAIN = 1.0e-4;         // air in the closing wedge: only wins below 5 degrees, as Moffatt has it
const ROLL_DRAIN = 0.018;          // rolling friction, the sink that carries the first two seconds
const CONSTRAINT_LAG = 120;        // contact friction pulling Omega onto the rolling constraint: 8 ms,
                                   // because the constraint gains 30 rad/s in the run's last 70 ms
const TRAIL_MAX = 40;
const TRAIL_SPACING = 0.09;        // rad of precession per sample, so the tail reads the same at any rate
const WARM_SECONDS = 0.45;         // first painted frame already has tilt, a tail and a percentage
const CAM_FOOT = 0.42;             // sin(camera elevation): how flat the plate reads
const CAM_RISE = 0.906;            // cos(camera elevation): how much height reads
const RIM_SEGMENTS = 44;
const WIDE_PX = 512;
const COIN_EDGE = '#f3c04a';
const COIN_DARK = '#4b3a15';

interface State {
  clock: number;
  carry: number;
  alpha: number;
  omega: number;
  phase: number;
  settled: boolean;
  sinceSample: number;
  /** (phase, alpha) per sample, never pixels — a resize must not invalidate the tail. */
  trail: Float64Array;
  trailHead: number;
  trailCount: number;
  pctShown: number;
  rateShown: number;
  settleShown: boolean;
  kickSeen: number;
  wasDown: boolean;
}

type View = { cx: number; cy: number; r: number };

/** Readouts are written straight to the DOM; the nodes only exist after mount. */
function setText(node: HTMLElement | null, text: string): void {
  if (node) {
    node.textContent = text;
  }
}

/** The rolling constraint. Capped, because sin(alpha)^-1/2 outruns any fixed timestep. */
function constraintOmega(alpha: number): number {
  return Math.min(OMEGA_CAP, Math.sqrt(GRAV_COUPLE / Math.max(Math.sin(alpha), ALPHA_FLOOR)));
}

function pushTrail(state: State): void {
  const i = state.trailHead * 2;
  state.trail[i] = state.phase;
  state.trail[i + 1] = state.alpha;
  state.trailHead = (state.trailHead + 1) % TRAIL_MAX;
  if (state.trailCount < TRAIL_MAX) {
    state.trailCount += 1;
  }
}

function advance(state: State): void {
  if (state.settled) {
    return;
  }
  // E = MgR*sin(alpha), so the divisor is dE/dalpha = MgR*cos(alpha), not MgR. The run starts at
  // 34 degrees, where the small-angle shortcut understates the drain by about 20%.
  const lean = Math.max(Math.sin(state.alpha), ALPHA_FLOOR);
  const k = 1 - Math.exp(-STEP * CONSTRAINT_LAG);
  state.omega += (constraintOmega(state.alpha) - state.omega) * k;
  const power = (VISC_DRAIN * state.omega * state.omega) / lean + ROLL_DRAIN * state.omega;
  // Explicit Euler against a rate that diverges: below about 0.03 rad one step already asks for more
  // than the whole remaining tilt, which would leave a negative alpha in state and hand that negative
  // alpha to the trail sample taken further down this same call. Capping the drop at half the tilt
  // keeps the approach one-sided; arrival is still finite because a halving reaches ALPHA_STOP two or
  // three steps later, and the cap only ever engages inside the last few milliseconds.
  const drop = Math.min((power / Math.cos(state.alpha)) * STEP, state.alpha * 0.5);
  state.alpha -= drop;
  state.phase = (state.phase + state.omega * STEP) % TAU;
  state.sinceSample += state.omega * STEP;
  if (state.sinceSample >= TRAIL_SPACING) {
    pushTrail(state);
    state.sinceSample = 0;
  }
  if (state.alpha <= ALPHA_STOP) {
    state.alpha = 0;
    state.omega = 0;
    state.settled = true;
  }
}

function kick(state: State): void {
  state.alpha = ALPHA_START;
  state.omega = constraintOmega(ALPHA_START);
  state.settled = false;
  state.carry = 0;
  state.sinceSample = 0;
  state.trailHead = 0;
  state.trailCount = 0;
}

function warm(state: State, seconds: number): void {
  for (let left = seconds; left > 0; left -= STEP) {
    advance(state);
  }
}

// The coin keeps clear of the card: 1.44r of rim can rise above the centre when the disc leans
// away from the camera, so the radius is bounded by the height as well as the width.
function viewFor(width: number, height: number): View {
  const wide = width >= WIDE_PX;
  const r = wide
    ? Math.min(width * 0.19, height * 0.27, 112)
    : Math.min(width * 0.28, height * 0.19, 96);
  return {
    cx: wide ? width * 0.73 : width * 0.5,
    cy: wide ? height * 0.5 : height * 0.32,
    r: Math.max(34, r),
  };
}

/**
 * The rim of the disc: centre fixed at height R*sin(alpha), contact point riding a circle of
 * radius R*cos(alpha) at azimuth `phase`. `scale` draws a smaller concentric ring in the same
 * plane — the centre height stays R*sin(alpha), so it must not be folded into the radius.
 * `flat` drops the height for the overhead shadow.
 */
function rimPath(
  context: CanvasRenderingContext2D,
  view: View,
  state: State,
  flat: boolean,
  scale: number,
): void {
  const ca = Math.cos(state.alpha);
  const sa = Math.sin(state.alpha);
  const cp = Math.cos(state.phase);
  const sp = Math.sin(state.phase);
  const r = view.r * scale;
  context.beginPath();
  for (let i = 0; i <= RIM_SEGMENTS; i += 1) {
    const psi = (i / RIM_SEGMENTS) * TAU;
    const cw = Math.cos(psi);
    const sw = Math.sin(psi);
    const x = r * (sp * cw + ca * cp * sw);
    const y = r * (ca * sp * sw - cp * cw);
    const z = flat ? 0 : view.r * sa - r * sa * sw;
    const sx = view.cx + x;
    const sy = view.cy - y * CAM_FOOT - z * CAM_RISE;
    if (i === 0) {
      context.moveTo(sx, sy);
    } else {
      context.lineTo(sx, sy);
    }
  }
  context.closePath();
}

function paintPlate(context: CanvasRenderingContext2D, view: View, state: State): void {
  const halo = view.r * 2.6;
  const glow = context.createRadialGradient(view.cx, view.cy, 0, view.cx, view.cy, halo);
  glow.addColorStop(0, 'rgba(243, 192, 74, 0.15)');
  glow.addColorStop(0.5, 'rgba(243, 192, 74, 0.05)');
  glow.addColorStop(1, 'rgba(243, 192, 74, 0)');
  context.fillStyle = glow;
  context.beginPath();
  context.ellipse(view.cx, view.cy, halo, halo * CAM_FOOT + view.r, 0, 0, TAU);
  context.fill();

  const plate = view.r * 1.6;
  context.beginPath();
  context.ellipse(view.cx, view.cy, plate, plate * CAM_FOOT, 0, 0, TAU);
  context.fillStyle = 'rgba(255, 248, 235, 0.045)';
  context.fill();
  context.lineWidth = 1;
  context.strokeStyle = 'rgba(255, 248, 235, 0.13)';
  context.stroke();

  const ring = view.r * Math.cos(state.alpha);
  context.beginPath();
  context.ellipse(view.cx, view.cy, ring, ring * CAM_FOOT, 0, 0, TAU);
  context.strokeStyle = 'rgba(243, 192, 74, 0.16)';
  context.stroke();
}

/**
 * The contact point's own track, sampled per 0.09 rad of precession rather than per frame so the
 * tail is the same length at 1 Hz and at 7 Hz. Drawn in two passes: the disc's footprint all but
 * covers the track, so one pass either buries the near half under the coin or floats the far half
 * over it. Nearer means lower on screen, which is sin(azimuth) < 0.
 */
function paintTrail(context: CanvasRenderingContext2D, view: View, state: State, near: boolean): void {
  const start = (state.trailHead - state.trailCount + TRAIL_MAX) % TRAIL_MAX;
  for (let i = 0; i < state.trailCount; i += 1) {
    const j = ((start + i) % TRAIL_MAX) * 2;
    const swing = Math.sin(state.trail[j]);
    if ((swing < 0) !== near) {
      continue;
    }
    const age = (i + 1) / state.trailCount;
    const reach = view.r * Math.cos(state.trail[j + 1]);
    const sx = view.cx + reach * Math.cos(state.trail[j]);
    const sy = view.cy - reach * swing * CAM_FOOT;
    context.beginPath();
    context.arc(sx, sy, 0.6 + age * 2.2, 0, TAU);
    context.fillStyle = `rgba(243, 192, 74, ${age * age * 0.5})`;
    context.fill();
  }
}

function paintCoin(context: CanvasRenderingContext2D, view: View, state: State): void {
  const ca = Math.cos(state.alpha);
  const sa = Math.sin(state.alpha);
  const cp = Math.cos(state.phase);
  const sp = Math.sin(state.phase);
  const r = view.r;

  rimPath(context, view, state, true, 1);
  context.fillStyle = 'rgba(3, 4, 7, 0.55)';
  context.fill();

  const lowX = view.cx + r * ca * cp;
  const lowY = view.cy - r * ca * sp * CAM_FOOT;
  const highX = view.cx - r * ca * cp;
  const highY = view.cy + r * ca * sp * CAM_FOOT - 2 * r * sa * CAM_RISE;
  const face = context.createLinearGradient(highX, highY, lowX, lowY);
  face.addColorStop(0, '#fce6ab');
  face.addColorStop(0.5, COIN_EDGE);
  face.addColorStop(1, COIN_DARK);

  context.lineJoin = 'round';
  rimPath(context, view, state, false, 1);
  context.fillStyle = face;
  context.fill();
  context.lineWidth = 2;
  context.strokeStyle = 'rgba(255, 245, 222, 0.5)';
  context.stroke();

  rimPath(context, view, state, false, 0.62);
  context.lineWidth = 1;
  context.strokeStyle = 'rgba(74, 55, 18, 0.5)';
  context.stroke();

  if (!state.settled) {
    context.beginPath();
    context.arc(lowX, lowY, 3, 0, TAU);
    context.fillStyle = '#fff6de';
    context.fill();
  }
}

/** `compact` is the 298x240 catalogue card: the same coin and the same solver, with the
 *  copy cut to one line along the bottom edge and the plate given the middle of the box.
 *  Presentation only — see `euler-disk-spinner.css`. */
export type EulerDiskSpinnerProps = { compact?: boolean };

export function EulerDiskSpinner({ compact = false }: EulerDiskSpinnerProps) {
  const reduced = useReducedMotion();
  const uid = useId();
  const statusId = `${uid}-status`;
  const sim = useRef<State | null>(null);
  const kicks = useRef(0);
  const statusRef = useRef<HTMLParagraphElement | null>(null);
  const meterRef = useRef<HTMLDivElement | null>(null);
  const fillRef = useRef<HTMLSpanElement | null>(null);
  const pctRef = useRef<HTMLSpanElement | null>(null);
  const rateRef = useRef<HTMLSpanElement | null>(null);
  const buttonRef = useRef<HTMLButtonElement | null>(null);

  // The run outlives setup deliberately. setup re-runs on every resize, and building the state
  // there would restart the job under the reader each time the pane changes width.
  const setup: (c: SceneSetupContext) => State = () => {
    const existing = sim.current;
    if (existing) {
      return existing;
    }
    const state: State = {
      clock: 0, carry: 0, alpha: ALPHA_START, omega: constraintOmega(ALPHA_START), phase: 0,
      settled: false, sinceSample: 0, trail: new Float64Array(TRAIL_MAX * 2), trailHead: 0,
      trailCount: 0, pctShown: -1, rateShown: -1, settleShown: false, kickSeen: kicks.current,
      wasDown: false,
    };
    if (reduced) {
      state.alpha = 0;
      state.omega = 0;
      state.settled = true;
    } else {
      warm(state, WARM_SECONDS);
    }
    state.settleShown = !state.settled;
    sim.current = state;
    return state;
  };

  // Percentage is the energy already gone, 1 - sin(alpha)/sin(alpha_0), so the readout accelerates
  // because the dissipation does. Written straight to the DOM: setState per frame would re-run setup.
  const syncReadouts = (state: State) => {
    const pct = state.settled
      ? 100
      : Math.max(0, Math.min(99, Math.round((1 - Math.sin(state.alpha) / SIN_START) * 100)));
    if (pct !== state.pctShown) {
      state.pctShown = pct;
      setText(pctRef.current, `${pct}%`);
      if (fillRef.current) {
        fillRef.current.style.width = `${pct}%`;
      }
      meterRef.current?.setAttribute('aria-valuenow', String(pct));
    }
    if (state.settleShown !== state.settled) {
      state.settleShown = state.settled;
      state.rateShown = -1;
      setText(statusRef.current, state.settled ? 'Bundle ready' : 'Compiling template bundle');
      setText(buttonRef.current, state.settled ? 'Spin it up again' : 'Add energy');
    }
    const hz = state.omega / TAU;
    if (Math.abs(hz - state.rateShown) >= 0.05 && rateRef.current) {
      state.rateShown = hz;
      setText(rateRef.current, state.settled ? 'at rest' : `${hz.toFixed(1)} Hz rattle`);
    }
  };

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

    if (reduced) {
      state.alpha = 0;
      state.omega = 0;
      state.settled = true;
      state.trailCount = 0;
    } else {
      const press = pointer.down && pointer.inside;
      if ((press && !state.wasDown) || kicks.current !== state.kickSeen) {
        kick(state);
      }
      state.wasDown = press;
      state.kickSeen = kicks.current;
      state.carry += dt;
      let n = 0;
      while (state.carry >= STEP && n < MAX_SUBSTEPS) {
        advance(state);
        state.carry -= STEP;
        n += 1;
      }
      if (n === MAX_SUBSTEPS) {
        state.carry = 0;
      }
    }

    const view = viewFor(width, height);
    context.clearRect(0, 0, width, height);
    paintPlate(context, view, state);
    paintTrail(context, view, state, false);
    paintCoin(context, view, state);
    paintTrail(context, view, state, true);
    syncReadouts(state);
  };

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

  // Keyboard and pointer arrive here by the same route: the button's click. A press on the plate
  // itself is picked up from the pointer edge inside draw.
  const spin = () => {
    kicks.current += 1;
    requestRender();
  };

  return (
    <div className="euler-disk-spinner-stage" data-compact={compact ? 'true' : undefined}>
      <div ref={stageRef} className="euler-disk-spinner-surface">
        <canvas ref={canvasRef} aria-hidden="true" />
      </div>
      <div className="euler-disk-spinner-content">
        <div className="euler-disk-spinner-card">
          <p ref={statusRef} id={statusId} className="euler-disk-spinner-status" role="status">
            {reduced ? 'Bundle ready' : 'Compiling template bundle'}
          </p>
          <p className="euler-disk-spinner-detail">
            {/* No item count here. It read "24 registry items" — a number that was
                never checked against the catalogue and was wrong by the time anyone
                read it. The line describes the kind of work, which stays true. */}
            One bundle, one lockfile, no network. The coin holds the work that is left.
          </p>
          <div
            ref={meterRef}
            className="euler-disk-spinner-meter"
            role="progressbar"
            aria-labelledby={statusId}
            aria-valuemin={0}
            aria-valuemax={100}
            aria-valuenow={reduced ? 100 : 0}
          >
            <span ref={fillRef} className="euler-disk-spinner-fill" />
          </div>
          <div className="euler-disk-spinner-row">
            <span ref={pctRef} className="euler-disk-spinner-pct">
              {reduced ? '100%' : '0%'}
            </span>
            <span ref={rateRef} className="euler-disk-spinner-rate" aria-hidden="true">
              {reduced ? 'at rest' : '1.1 Hz rattle'}
            </span>
          </div>
          <button
            ref={buttonRef}
            type="button"
            className="euler-disk-spinner-button"
            disabled={reduced}
            // The card frame is aria-hidden, so inside it the button leaves the tab order.
            // It stays clickable — only the keyboard path is withdrawn.
            tabIndex={compact ? -1 : undefined}
            onClick={spin}
          >
            {reduced ? 'Spin it up again' : 'Add energy'}
          </button>
        </div>
      </div>
      <p className="euler-disk-spinner-hint">press to spin it up</p>
    </div>
  );
}

export default EulerDiskSpinner;

.euler-disk-spinner-stage {
  position: relative;
  display: block;
  width: 100%;
  min-height: 20rem;
  overflow: hidden;
  border-radius: 0.75rem;
  background: radial-gradient(120% 120% at 72% 18%, #14110b 0%, #0a0a0e 58%, #06070a 100%);
  color: #f6f1e6;
}

/* The plate is measured off this box, so it carries no border: `inset: 0` is against
   the padding box and a border would slide the contact circle off the plate. */
.euler-disk-spinner-surface {
  position: absolute;
  inset: 0;
  touch-action: none;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.07);
  border-radius: inherit;
}

.euler-disk-spinner-surface canvas {
  display: block;
  width: 100%;
  height: 100%;
}

/* Transparent to the pointer so a press anywhere on the plate spins the coin up;
   the button takes events back for itself. */
.euler-disk-spinner-content {
  position: relative;
  display: flex;
  align-items: flex-end;
  min-height: 20rem;
  padding: 1.5rem;
  pointer-events: none;
}

.euler-disk-spinner-card {
  width: min(17.5rem, 100%);
}

.euler-disk-spinner-status {
  margin: 0;
  font-size: 1.0625rem;
  font-weight: 500;
  letter-spacing: -0.015em;
  text-shadow: 0 1px 16px rgba(6, 7, 10, 0.85);
}

.euler-disk-spinner-detail {
  margin: 0.375rem 0 0.875rem;
  font-size: 0.8125rem;
  line-height: 1.45;
  color: rgba(246, 241, 230, 0.56);
  text-shadow: 0 1px 14px rgba(6, 7, 10, 0.8);
}

.euler-disk-spinner-meter {
  position: relative;
  height: 0.25rem;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(246, 241, 230, 0.12);
  box-shadow: 0 1px 14px rgba(6, 7, 10, 0.6);
}

.euler-disk-spinner-fill {
  display: block;
  width: 0;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, rgba(243, 192, 74, 0.5), #f3c04a);
}

.euler-disk-spinner-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.75rem;
  margin-top: 0.5rem;
  font: 500 0.6875rem/1 ui-monospace, "SFMono-Regular", Menlo, monospace;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.euler-disk-spinner-pct {
  color: #f3c04a;
}

.euler-disk-spinner-rate {
  color: rgba(246, 241, 230, 0.42);
}

.euler-disk-spinner-button {
  appearance: none;
  margin: 1rem 0 0;
  padding: 0.5rem 1rem;
  border: 1px solid rgba(243, 192, 74, 0.38);
  border-radius: 999px;
  background: rgba(243, 192, 74, 0.1);
  font: inherit;
  font-size: 0.8125rem;
  font-weight: 500;
  color: #f8dfa2;
  cursor: pointer;
  pointer-events: auto;
  transition:
    border-color 160ms ease,
    background-color 160ms ease,
    color 160ms ease;
}

.euler-disk-spinner-button:hover {
  border-color: rgba(243, 192, 74, 0.7);
  background: rgba(243, 192, 74, 0.18);
  color: #fff4dc;
}

.euler-disk-spinner-button:focus-visible {
  outline: 2px solid rgba(243, 192, 74, 0.8);
  outline-offset: 2px;
}

.euler-disk-spinner-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(246, 241, 230, 0.26);
  pointer-events: none;
}

.euler-disk-spinner-button:disabled {
  border-color: rgba(246, 241, 230, 0.16);
  background: rgba(246, 241, 230, 0.04);
  color: rgba(246, 241, 230, 0.4);
  cursor: default;
}

/*
 * The loop never starts, so what is switched off is the run-down itself: the coin is
 * painted at alpha = 0, omega = 0 — the exact fixed point of the solver — with the job
 * reported finished. The spin-up control is disabled and the press hint removed rather
 * than left as an affordance that cannot move, and the button transitions go too.
 */
@media (prefers-reduced-motion: reduce) {
  .euler-disk-spinner-button {
    transition: none;
  }

  .euler-disk-spinner-hint {
    display: none;
  }
}

/*
 * The card variant: the 298x240 catalogue frame, at that real size and never scaled.
 * The copy comes off the plate and down to a single strip along the bottom edge, and
 * the coin is given the middle of the box to rattle in.
 */
.euler-disk-spinner-stage[data-compact='true'] {
  min-height: 0;
  height: 100%;
  /* The card frame rounds and clips already. */
  border-radius: 0;
}

/*
 * `viewFor` in the tsx puts the plate at 0.32 of the canvas height and bounds the coin's
 * radius by 0.19 of it — proportions for a 20rem marketing stage, which inside a 240px
 * card is a 46px radius sitting in the top third with the bottom half of the frame empty.
 * Nothing is scaled to fix that: the surface is handed a taller box and the empty tail of
 * it is cropped by the stage's own `overflow: hidden`. 240 / 0.64 = 375, so 0.32 of the
 * box lands at exactly half the visible height — at any frame height, since the extension
 * is a percentage of it — and the radius bound becomes 0.297 of it: a 71px radius, and
 * the plate centred. The canvas stays 1:1 with CSS pixels; below the plate there is
 * nothing to lose but the outer 2% of the halo gradient, which is what the crop takes.
 *
 * `pan-y`, not `none`: a full-bleed drag surface that claims every touch traps the page
 * inside a scrolling grid of cards, and this mechanism only ever asked for a press —
 * which still lands, along with every horizontal drag.
 */
.euler-disk-spinner-stage[data-compact='true'] .euler-disk-spinner-surface {
  bottom: -56.25%;
  touch-action: pan-y;
  /* Three sides of a 1px inset ring, the fourth cropped away, reads as a seam. */
  box-shadow: none;
}

/*
 * The text layer off the plate and onto the bottom edge. The strip stands 45px tall and
 * the plate's rim reaches 168px of the 240, so the two never meet. Still deaf to the
 * pointer, so a press through the strip spins the coin up; the button goes on taking its
 * own clicks back.
 */
.euler-disk-spinner-stage[data-compact='true'] .euler-disk-spinner-content {
  position: absolute;
  inset: auto 0 0 0;
  min-height: 0;
  padding: 0.75rem;
  pointer-events: none;
}

.euler-disk-spinner-stage[data-compact='true'] .euler-disk-spinner-card {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  width: 100%;
}

/* The paragraph, the two numeric readouts the meter already gives visually, and a hint
   the button makes redundant: a second and a third line of text, all of it. */
.euler-disk-spinner-stage[data-compact='true'] .euler-disk-spinner-detail,
.euler-disk-spinner-stage[data-compact='true'] .euler-disk-spinner-row,
.euler-disk-spinner-stage[data-compact='true'] .euler-disk-spinner-hint {
  display: none;
}

/* The one line that stays, at a fixed 13px and held to a single line. It is the heading
   because the heading is the state readout — it turns over to 'Bundle ready' the instant
   the coin lies flat, which is the event the mechanism exists to show. */
.euler-disk-spinner-stage[data-compact='true'] .euler-disk-spinner-status {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  font-size: 0.8125rem;
  line-height: 1.2;
  white-space: nowrap;
  text-overflow: ellipsis;
}

/* The meter out of the row and full-bleed along the very bottom edge, 3px of it: still
   the live progressbar, but it no longer spends any of the line's width. */
.euler-disk-spinner-stage[data-compact='true'] .euler-disk-spinner-meter {
  position: absolute;
  inset: auto 0 0 0;
  height: 0.1875rem;
  border-radius: 0;
}

/* Kept, and kept clickable: it is the one control that re-runs the spin-up from the top.
   `tabIndex={-1}` in the component keeps it out of the tab order under the card frame's
   `aria-hidden`. */
.euler-disk-spinner-stage[data-compact='true'] .euler-disk-spinner-button {
  flex: none;
  margin: 0;
  padding: 0.25rem 0.625rem;
  font-size: 0.6875rem;
  line-height: 1;
  pointer-events: auto;
}

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