Relaxation Typing

'use client';

import './relaxation-typing.css';

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

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

/*
 * THREE COUPLED RELAXATION OSCILLATORS — the neon-lamp kind, one lamp per dot.
 *
 * Each dot is a capacitor charging through the cadence resistor toward the supply:
 *
 *     dV/dt = (VS - V) / (R·C)        →    V(t) = VS - (VS - V0)·exp(-t / R·C)
 *
 * At V_FIRE the lamp breaks down and a much smaller resistance appears across the same
 * capacitor, so the same first-order equation runs again toward a far lower target:
 *
 *     dV/dt = (VS - V)/(R·C) + (V_EXT + u - V)/(R_ON·C)
 *
 * and it keeps conducting until the arc current (V - V_EXT)/R_ON falls below I_MAINT. That
 * is the entire mechanism: one linear equation whose coefficients switch on a threshold,
 * with hysteresis between the strike and the drop-out. Both legs are stepped with the exact
 * solution of dV/dt = (V∞ - V)/τ over a fixed 1/240 s, which is what survives the 25:1
 * stiffness ratio between charging and dumping with no stability guard anywhere.
 *
 * The three are not three copies of one thing. Each lamp's arc current returns through a
 * shared cathode resistor wired into the *next* stage's return, lifting it by u = R_K·I.
 * That lift both pushes the follower's capacitor voltage down and raises the potential it
 * has to climb to, so a conducting stage holds the stage downstream of it off until its own
 * arc drops out. The dots are phase-coupled, not delayed.
 *
 * NOT a sine wave with a phase offset. NOT three eased keyframes on a stagger. NOT a spring
 * pulled toward a rounded target. NOT a gradient sweep. There is no duration in this file.
 *
 * THE CONSEQUENCE YOU ONLY GET BY SOLVING IT: the period is R·C·ln((VS-V_OFF)/(VS-V_FIRE))
 * plus the dump, and the cascade lag is the dump alone, set by R_ON·C — two different
 * products, and the cadence control only touches R. Dragging it stretches the period from
 * 229 ms to 583 ms while the gap from the first dot to the third only drifts 89 ms to 76 ms,
 * so the wave does not merely slow down: the spread sweeps from 39% of a cycle to 13% and the
 * ripple visibly tightens into a near-simultaneous blink. A keyframe stagger is always a
 * fraction of its duration and cannot do that. And every rise is an exponential against a
 * vertical collapse — 4.6:1 asymmetric at the fast end, 17:1 at the slow end — which is not a
 * shape any ease-in-out produces at any control points.
 */

/** Lamps in the chain. Three, because a typing indicator has three dots. */
const STAGES = 3;
/** Supply, volts. 15 V of headroom over the strike keeps the climb steep when it arrives. */
const V_SUPPLY = 105;
/** Breakdown voltage, volts. Nothing conducts below it; this is the upper switch. */
const V_FIRE = 90;
/** Arc voltage the capacitor dumps toward, volts. 28 V under the strike. */
const V_EXT = 62;
/** Conducting resistance, MΩ. 26 kΩ against 220–660 kΩ charging: the 25:1 that makes the
 *  fall look vertical next to the rise while both are the same exponential. */
const R_ON = 0.026;
/** Maintaining current, µA. Below it the arc cannot sustain itself and the lamp opens. */
const I_MAINT = 350;
/** Drop-out voltage: V_EXT + R_ON·I_MAINT = 71.1 V. The floor of every cycle, and with
 *  V_FIRE the 18.9 V swing that one dot's brightness is mapped from. */
const V_OFF = V_EXT + R_ON * I_MAINT;
/** Shared cathode resistor, MΩ. 4 kΩ lifts a follower 4.4 V at peak arc current, the least
 *  that gates it completely: at 2 kΩ the gate leaks and the spread collapses to 17%, and at
 *  0 the chain is three unrelated lamps whose dots scatter to 85% of a cycle apart. */
const R_K = 0.004;
/** Capacitances, µF, falling along the chain so every follower is intrinsically the faster
 *  lamp and is always pressing against the gate ahead of it rather than trailing it. */
const CAPS = [1, 0.97, 0.94];
/** Cadence resistance at the slow end of the pot, MΩ, and at the fast end. The 3:1 span is
 *  the whole travel: 583 ms down to 229 ms per cycle. */
const R_SLOW = 0.66;
const R_FAST = 0.22;
/** Keystrokes a minute reported at R_SLOW — 12 wpm, a thumb on a phone. */
const KEYS_SLOW = 60;
/** Pot span. The law is logarithmic, so equal travel is an equal *ratio* of charging
 *  current and the reported cadence stays exactly proportional to VS/R. */
const KEYS_SPAN = R_SLOW / R_FAST;
/** Solver step, seconds: four per display frame, and a sixth of the dump's 24 ms τ. */
const STEP = 1 / 240;
/** Substep ceiling. 12 × STEP is 50 ms, the same window the frame delta is clamped to. */
const MAX_STEPS = 12;
/** Seconds run before the first paint. The chain needs seven of them to converge at the
 *  slowest cadence — only twelve cycles. */
const SETTLE = 8;
/** Runaway bound on settle's stop-on-strike search, in solver steps: comfortably past one
 *  cycle at the slowest cadence, so only the strike itself ever ends that loop. */
const STRIKE_STEPS = 160;
/** Where the pot starts: mid-travel, 105 keys/min, a 23% spread with all three dots
 *  separately legible and the asymmetry already obvious. */
const START = 0.5;
/** One arrow press, as a fraction of travel — 24 notches from end to end. */
const KEY_STEP = 1 / 24;
/** Card side padding in CSS px, matching the face's 1.375rem. */
const INSET = 22;
/** Avatar box, CSS px (1.75rem), and the gap either side of the pill (0.625rem). */
const AVATAR = 28;
const GAP = 10;
/** The typing pill: 60 × 24 px with the three dots on a 16 px pitch about its centre. */
const PILL_W = 60;
const PILL_H = 24;
const DOT_PITCH = 16;
const DOT_R = 3.4;
/** How far a dot rides up between drop-out and strike, CSS px. Small on purpose: the read
 *  is meant to come from the brightness, with the lift only confirming it. */
const LIFT = 5;
/** Cadence track, CSS px up from the bottom of the card. */
const TRACK_Y = 15;
/** Near-white, and the one accent. Everything else is one of these under an alpha. */
const INK = '234, 243, 255';
const ACCENT = '158, 205, 255';
const TAU = Math.PI * 2;

/** Everything the chain owns. Geometry is `readonly` because only `setup` may write it. */
interface RelaxationState {
  /** Centre line of the indicator row, CSS px. */
  readonly rowY: number;
  /** Left edge of the pill, CSS px. */
  readonly pillX: number;
  readonly trackX: number;
  readonly trackW: number;
  readonly trackY: number;
  /** Capacitor-side node voltage of each lamp. */
  readonly node: Float64Array;
  /** Arc current of each lamp from the step just taken, µA. */
  readonly amps: Float64Array;
  /** Cathode lift each lamp is sitting on, volts. */
  readonly lift: Float64Array;
  /** Which lamps are conducting. */
  readonly lit: boolean[];
  /** Simulated time of each lamp's most recent strike, seconds. */
  readonly struck: Float64Array;
  /** Simulated seconds since the scene was built. */
  sim: number;
  /** `performance.now()` at the last paint, and the unspent remainder of the frame delta. */
  clock: number;
  carry: number;
  /** Pot travel, 0 slow to 1 fast. */
  drive: number;
  /** True while a press owns the pot, so a drag survives leaving the card. */
  dragging: boolean;
  /** The travel the frozen picture was solved for. NaN forces a re-solve. */
  frozen: number;
  snap: boolean;
  postedX: number;
  postedY: number;
}

function clamp01(value: number): number {
  return value < 0 ? 0 : value > 1 ? 1 : value;
}

/** The pot's law, and the cadence it is calibrated in. Both geometric in the travel, which
 *  is what keeps the reported keystroke rate proportional to the charging current. */
function ohmsFor(drive: number): number {
  return R_SLOW / KEYS_SPAN ** drive;
}

function keysFor(drive: number): number {
  return KEYS_SLOW * KEYS_SPAN ** drive;
}

/**
 * One fixed step of the whole chain. Arc currents and cathode lifts first, from the voltages
 * as they stand; then every capacitor is moved by the exact solution of its own linear leg;
 * then the two thresholds are tested. Nothing here is scaled by a frame time.
 */
function advance(state: RelaxationState, ohms: number): void {
  const { node, amps, lift, lit, struck } = state;

  for (let i = 0; i < STAGES; i += 1) {
    amps[i] = lit[i] ? Math.max(0, (node[i] - lift[i] - V_EXT) / R_ON) : 0;
  }
  // The cathode resistor stores nothing, so its drop is algebraic rather than integrated:
  // stage i rides on the arc current of stage i-1, and the master rides on nothing.
  lift[0] = 0;
  for (let i = 1; i < STAGES; i += 1) lift[i] = R_K * amps[i - 1];

  for (let i = 0; i < STAGES; i += 1) {
    let rate = 1 / (ohms * CAPS[i]);
    let flow = V_SUPPLY / (ohms * CAPS[i]);
    if (lit[i]) {
      rate += 1 / (R_ON * CAPS[i]);
      flow += (V_EXT + lift[i]) / (R_ON * CAPS[i]);
    }
    // τ = 1/Σ(1/RC) and V∞ = τ·Σ(V/RC): the two legs in parallel, solved over the step
    // instead of differenced across it. A forward difference would need h under 50 µs to
    // stay bounded while a lamp conducts, which is twelve times this step.
    const tau = 1 / rate;
    const rest = flow * tau;
    node[i] = rest + (node[i] - rest) * Math.exp(-STEP / tau);
  }

  for (let i = 0; i < STAGES; i += 1) {
    const across = node[i] - lift[i];
    if (lit[i]) {
      if ((across - V_EXT) / R_ON < I_MAINT) lit[i] = false;
      continue;
    }
    if (across < V_FIRE) continue;
    lit[i] = true;
    struck[i] = state.sim;
  }
  state.sim += STEP;
}

/**
 * Run the chain until it has locked, then on to the master's next strike. Stopping on a
 * strike is what makes the frozen reduced-motion picture the same picture every time instead
 * of whichever phase the clock happened to land on.
 */
function settle(state: RelaxationState, ohms: number): void {
  const steps = Math.round(SETTLE / STEP);
  for (let k = 0; k < steps; k += 1) advance(state, ohms);
  const mark = state.struck[0];
  for (let k = 0; k < STRIKE_STEPS && state.struck[0] === mark; k += 1) advance(state, ohms);
  state.frozen = state.drive;
}

function build(
  { width, height }: SceneSetupContext,
  drive: number,
  snap: boolean,
): RelaxationState {
  const state: RelaxationState = {
    rowY: height - 64,
    pillX: INSET + AVATAR + GAP,
    trackX: INSET,
    trackW: Math.max(40, width - INSET * 2),
    trackY: height - TRACK_Y,
    // Staggered start voltages so the chain has somewhere to lock *from*. Where it ends up is
    // the coupling's business, not this line's: with R_K at 0 and the capacitors detuned the
    // three phases just drift past each other forever, which is how the gate was measured.
    node: Float64Array.from([92, 86, 80]),
    amps: new Float64Array(STAGES),
    lift: new Float64Array(STAGES),
    lit: [false, false, false],
    struck: new Float64Array(STAGES),
    sim: 0,
    clock: 0,
    carry: 0,
    drive,
    dragging: false,
    frozen: Number.NaN,
    snap,
    postedX: Number.NaN,
    postedY: Number.NaN,
  };
  settle(state, ohmsFor(drive));
  return state;
}

/**
 * The pill, the three dots, and the pot's rail. Every dot's brightness, radius and lift come
 * off the same capacitor voltage — there is no second animation of the dots anywhere.
 */
function paint({ context, width, height, state }: SceneDrawContext<RelaxationState>): void {
  context.clearRect(0, 0, width, height);

  // The pill the dots sit in. The tint, and nothing else, carries the accent here.
  const pillY = state.rowY - PILL_H / 2;
  const radius = PILL_H / 2;
  context.beginPath();
  context.moveTo(state.pillX + radius, pillY);
  context.arcTo(state.pillX + PILL_W, pillY, state.pillX + PILL_W, pillY + PILL_H, radius);
  context.arcTo(state.pillX + PILL_W, pillY + PILL_H, state.pillX, pillY + PILL_H, radius);
  context.arcTo(state.pillX, pillY + PILL_H, state.pillX, pillY, radius);
  context.arcTo(state.pillX, pillY, state.pillX + PILL_W, pillY, radius);
  context.closePath();
  context.fillStyle = `rgba(${ACCENT}, 0.07)`;
  context.fill();
  context.strokeStyle = `rgba(${INK}, 0.1)`;
  context.lineWidth = 1;
  context.stroke();

  for (let i = 0; i < STAGES; i += 1) {
    const across = state.node[i] - state.lift[i];
    const charge = clamp01((across - V_OFF) / (V_FIRE - V_OFF));
    const x = state.pillX + PILL_W / 2 + (i - 1) * DOT_PITCH;
    // Half the lift each way, so the swing is centred in the pill rather than hanging off
    // the top of it — a discharged dot sits low, a charged one sits high, neither is off axis.
    const y = state.rowY + LIFT / 2 - charge * LIFT;
    if (state.lit[i]) {
      // The strike itself: a bloom that exists only while the arc is drawing current.
      context.beginPath();
      context.arc(x, y, DOT_R * 2.7, 0, TAU);
      context.fillStyle = `rgba(${ACCENT}, 0.1)`;
      context.fill();
    }
    context.beginPath();
    context.arc(x, y, DOT_R * (0.8 + 0.28 * charge), 0, TAU);
    context.fillStyle = `rgba(${ACCENT}, ${0.3 + 0.62 * charge})`;
    context.fill();
  }

  // The pot. Six ticks, then the rail, then the travelled part in the accent so the knob
  // the DOM places on top reads as a level rather than a loose plate.
  context.strokeStyle = `rgba(${INK}, 0.12)`;
  context.lineWidth = 1;
  for (let k = 0; k <= 6; k += 1) {
    const x = Math.round(state.trackX + (k / 6) * state.trackW) + 0.5;
    context.beginPath();
    context.moveTo(x, state.trackY - 4);
    context.lineTo(x, state.trackY - 8);
    context.stroke();
  }
  context.beginPath();
  context.moveTo(state.trackX, state.trackY);
  context.lineTo(state.trackX + state.trackW, state.trackY);
  context.strokeStyle = `rgba(${INK}, 0.14)`;
  context.stroke();
  context.beginPath();
  context.moveTo(state.trackX, state.trackY);
  context.lineTo(state.trackX + state.drive * state.trackW, state.trackY);
  context.strokeStyle = `rgba(${ACCENT}, 0.5)`;
  context.lineWidth = 2;
  context.stroke();
}

/**
 * The knob is a real DOM `role="slider"`, so it has to be moved to the pixel the canvas drew
 * the rail's travel to. Writing it from the solver's own geometry is what keeps the two from
 * drifting; nothing in the stylesheet knows where the track is.
 */
function place(node: HTMLElement | null, state: RelaxationState): void {
  if (!node) return;
  const x = state.trackX + state.drive * state.trackW;
  const y = state.trackY;
  if (Math.abs(x - state.postedX) < 0.4 && Math.abs(y - state.postedY) < 0.4) return;
  // The knob has no position until the solver has been asked for one, so it starts
  // transparent rather than in the corner. Opacity and not `visibility`, which would take
  // the slider out of the accessibility tree for as long as it took to place it.
  if (Number.isNaN(state.postedX)) node.style.opacity = '1';
  state.postedX = x;
  state.postedY = y;
  node.style.transform = `translate(${x.toFixed(1)}px, ${y.toFixed(1)}px) translate(-50%, -50%)`;
}

/**
 * A support thread whose typing indicator is the oscillator chain.
 *
 * The canvas layer takes every pointer event, so the messages, the indicator row and the
 * knob all sit over it in sibling layers that are transparent to the pointer. The knob is
 * still the real slider: a press anywhere on the card hands it focus, so the keyboard reaches
 * the same cadence control the mouse is dragging.
 */
/** `compact` is the 298x240 catalogue card: the same chain, the same three lamps and the same
 *  cadence pot, with the hint below the card dropped and the transcript tightened. Not one of
 *  the numbers the canvas and the stylesheet share is touched — the indicator row's 2.75rem
 *  offset and 2.5rem height are what put its centre on `height − 64`, and the 1.375rem side
 *  inset is `INSET`. See `relaxation-typing.css`. */
export type RelaxationTypingProps = { compact?: boolean };

export function RelaxationTyping({ compact = false }: RelaxationTypingProps) {
  const reduced = useReducedMotion();
  const [readout, setReadout] = useState(() => ({
    keys: Math.round(keysFor(START) / 5) * 5,
  }));
  /** What the labels are showing, so `draw` only touches React when a number changes. */
  const shownRef = useRef(readout);
  /** The pot position the solver is holding, read by `setup` and by the key handler. */
  const driveRef = useRef(START);
  const knobRef = useRef<HTMLDivElement>(null);
  /**
   * A keypress leaves the travel it wants here for the next frame to take, rather than
   * reaching into the solver from an event handler: the pot has to move between substeps or
   * the chain integrates half a step against the old resistance.
   */
  const pendingRef = useRef<number | null>(null);

  const draw = (scene: SceneDrawContext<RelaxationState>) => {
    const { state, pointer } = scene;
    state.snap = reduced;

    // The latch is what keeps a drag alive once the pointer has been thrown past the edge of
    // the card: the hook holds the capture, but `inside` goes false at the boundary.
    if (!pointer.down) state.dragging = false;
    else if (pointer.inside) state.dragging = true;
    if (state.dragging) state.drive = clamp01((pointer.x - state.trackX) / state.trackW);

    const pending = pendingRef.current;
    if (pending !== null) {
      pendingRef.current = null;
      state.drive = clamp01(pending);
    }

    const ohms = ohmsFor(state.drive);
    if (state.snap) {
      // The loop is stopped, so an accumulator advanced once per repaint would never arrive.
      // Re-solve to the locked answer for the pot's new position instead — the same chain,
      // run until it settles, which is the only honest still frame of an oscillator. Drag and
      // the arrow keys both still change the value and both still redraw.
      if (state.frozen !== state.drive) settle(state, ohms);
      state.clock = 0;
      state.carry = 0;
    } else {
      const now = performance.now();
      const elapsed = state.clock ? Math.min(0.05, (now - state.clock) / 1000) : STEP;
      state.clock = now;
      state.carry += elapsed;
      const count = Math.min(MAX_STEPS, Math.floor(state.carry / STEP));
      for (let k = 0; k < count; k += 1) advance(state, ohms);
      if (count > 0) state.carry -= count * STEP;
      // A tab left in the background for a minute comes back owing far more than the ceiling
      // can pay; dropping the debt is better than a burst of stale steps.
      if (state.carry > STEP * MAX_STEPS) state.carry = 0;
      state.frozen = Number.NaN;
    }

    paint(scene);
    place(knobRef.current, state);
    driveRef.current = state.drive;

    const next = { keys: Math.round(keysFor(state.drive) / 5) * 5 };
    if (next.keys !== shownRef.current.keys) {
      shownRef.current = next;
      setReadout(next);
    }
  };

  const { stageRef, canvasRef, requestRender } = useCanvasScene<RelaxationState>({
    setup: (scene) => build(scene, driveRef.current, reduced),
    draw,
  });

  // The labels are React and the lamps are not, so a change of reading — or of the motion
  // preference, which stops the loop outright — has to ask for the one repaint that keeps the
  // canvas showing the same cadence the text does.
  useEffect(() => {
    requestRender();
  }, [readout, reduced, requestRender]);

  /** Arrows step the pot by a notch, Home and End take it to the ends of its travel. */
  const handleKey = (event: KeyboardEvent<HTMLDivElement>) => {
    const drive = driveRef.current;
    if (event.key === 'ArrowRight' || event.key === 'ArrowUp') {
      pendingRef.current = drive + KEY_STEP;
    } else if (event.key === 'ArrowLeft' || event.key === 'ArrowDown') {
      pendingRef.current = drive - KEY_STEP;
    } else if (event.key === 'End') {
      pendingRef.current = 1;
    } else if (event.key === 'Home') {
      pendingRef.current = 0;
    } else {
      return;
    }
    event.preventDefault();
    requestRender();
  };

  return (
    <div
      className="relaxation-typing-stage"
      data-compact={compact ? 'true' : undefined}
      /* The knob is transparent to the pointer so the canvas keeps the press and the capture
         with it; without this the pot could only ever be reached 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. */
      onPointerDown={
        compact ? undefined : () => knobRef.current?.focus({ preventScroll: true })
      }
    >
      <div
        className="relaxation-typing-card"
        role="group"
        aria-label="Support thread with Priya Raman"
      >
        <div ref={stageRef} className="relaxation-typing-well" aria-hidden="true">
          <canvas ref={canvasRef} />
        </div>

        <div className="relaxation-typing-face">
          <div className="relaxation-typing-head">
            <span className="relaxation-typing-label">Thread 4821</span>
            <span className="relaxation-typing-label">{readout.keys} keys/min</span>
          </div>

          <ol className="relaxation-typing-log">
            <li className="relaxation-typing-note">
              <span className="relaxation-typing-who">Priya</span>
              <p className="relaxation-typing-said">
                The invoice still shows last month&rsquo;s plan.
              </p>
            </li>
            <li className="relaxation-typing-note relaxation-typing-note-mine">
              <span className="relaxation-typing-who">You</span>
              <p className="relaxation-typing-said">
                Checking now — your card was charged on the 3rd.
              </p>
            </li>
          </ol>
        </div>

        {/* Absolutely placed, because the canvas paints the three dots into the gap this row
            reserves and both have to agree on one number: the row's centre line. */}
        <p className="relaxation-typing-live">
          <span className="relaxation-typing-avatar" aria-hidden="true">
            PR
          </span>
          <span className="relaxation-typing-dots" aria-hidden="true" />
          Priya is typing
        </p>

        <div
          ref={knobRef}
          className="relaxation-typing-knob"
          role="slider"
          tabIndex={compact ? -1 : 0}
          aria-label="Incoming keystroke cadence"
          aria-valuemin={KEYS_SLOW}
          aria-valuemax={Math.round(KEYS_SLOW * KEYS_SPAN)}
          aria-valuenow={readout.keys}
          aria-valuetext={`${readout.keys} keystrokes a minute`}
          onKeyDown={handleKey}
        />
      </div>

      <p className="relaxation-typing-hint">
        <span>Drag for a faster typist</span>
      </p>
    </div>
  );
}

export default RelaxationTyping;

/*
 * Two colours and a tint: near-white ink, one accent, and that accent under a tenth of an
 * alpha for the outgoing bubble, the avatar and the pill the dots live in. Nothing here
 * animates — every moving pixel is painted by the solver in the .tsx, and the one geometric
 * number this file shares with it is the indicator row's centre line, which the canvas
 * derives as `height - 64` from the row's own `bottom` and `height`.
 */

.relaxation-typing-stage {
  position: relative;
  display: grid;
  align-content: center;
  justify-items: center;
  gap: 0.75rem;
  width: 100%;
  min-height: 22rem;
  padding: 2rem 1.5rem;
  overflow: hidden;
  border-radius: 0.75rem;
  background: radial-gradient(120% 110% at 50% 0%, #0c1620 0%, #070b12 60%, #05070c 100%);
  color: #eaf3ff;
}

.relaxation-typing-card {
  position: relative;
  width: min(23rem, 100%);
  height: 16.5rem;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.09);
  border-radius: 1rem;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0.015));
  isolation: isolate;
}

/* The canvas layer. It owns the pointer, which is why every layer above it is inert. */
.relaxation-typing-well {
  position: absolute;
  inset: 0;
  touch-action: none;
}

.relaxation-typing-well canvas {
  display: block;
  width: 100%;
  height: 100%;
}
/* Transparent to the pointer, so a press over the transcript still takes the cadence pot.
   The bottom padding is the control's room: the indicator row and the pot both live inside
   it and nothing in the flow may reach them. */
.relaxation-typing-face {
  position: relative;
  display: flex;
  height: 100%;
  flex-direction: column;
  padding: 1.25rem 1.375rem 5.25rem;
  pointer-events: none;
}

.relaxation-typing-head {
  display: flex;
  justify-content: space-between;
  gap: 0.75rem;
  margin-bottom: 0.75rem;
}

.relaxation-typing-label {
  font: 500 0.625rem/1 ui-monospace, "SFMono-Regular", Menlo, monospace;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(234, 243, 255, 0.5);
  white-space: nowrap;
}

/* `justify-content: flex-end` plus `overflow: hidden` is what makes this a transcript: if the
   messages ever outgrow the space — three lines a bubble on a narrow phone — the oldest one
   clips off the top rather than pushing the indicator row down onto the pot. */
.relaxation-typing-log {
  display: flex;
  flex: 1;
  min-height: 0;
  flex-direction: column;
  justify-content: flex-end;
  gap: 0.5rem;
  margin: 0;
  padding: 0;
  overflow: hidden;
  list-style: none;
}

.relaxation-typing-note {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.25rem;
}
.relaxation-typing-note-mine {
  align-items: flex-end;
}

.relaxation-typing-who {
  font: 500 0.625rem/1 ui-monospace, "SFMono-Regular", Menlo, monospace;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(234, 243, 255, 0.34);
}

.relaxation-typing-said {
  max-width: 88%;
  margin: 0;
  padding: 0.5rem 0.6875rem;
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: 0.625rem 0.625rem 0.625rem 0.1875rem;
  background: rgba(255, 255, 255, 0.04);
  font-size: 0.78125rem;
  line-height: 1.4;
  color: rgba(234, 243, 255, 0.78);
}

/* The tint, and the only place the accent carries a whole surface. */
.relaxation-typing-note-mine .relaxation-typing-said {
  border-color: rgba(158, 205, 255, 0.2);
  border-radius: 0.625rem 0.625rem 0.1875rem;
  background: rgba(158, 205, 255, 0.09);
  color: rgba(234, 243, 255, 0.9);
}

/* The indicator row: 2.5rem tall, 2.75rem up, so its centre sits 4rem — 64px — above the
   bottom of the card, which is the line the canvas draws the pill and the dots on. */
.relaxation-typing-live {
  position: absolute;
  right: 1.375rem;
  bottom: 2.75rem;
  left: 1.375rem;
  display: flex;
  height: 2.5rem;
  align-items: center;
  gap: 0.625rem;
  margin: 0;
  font-size: 0.78125rem;
  color: rgba(234, 243, 255, 0.62);
  pointer-events: none;
}

.relaxation-typing-avatar {
  display: grid;
  flex: none;
  place-items: center;
  width: 1.75rem;
  height: 1.75rem;
  border: 1px solid rgba(158, 205, 255, 0.28);
  border-radius: 50%;
  background: rgba(158, 205, 255, 0.09);
  font: 600 0.625rem/1 ui-monospace, "SFMono-Regular", Menlo, monospace;
  letter-spacing: 0.06em;
  color: rgba(234, 243, 255, 0.82);
}

/* Reserves the 3.75rem the canvas paints the pill into. Deliberately empty: the dots are the
   three lamps, and CSS has no business drawing them. */
.relaxation-typing-dots {
  flex: none;
  width: 3.75rem;
  height: 1.5rem;
}

/*
 * The pot's knob. Its `transform` is written by the solver every frame from the same track
 * geometry the canvas drew the rail with, so the only thing CSS owns here is the second
 * translate that centres it on the point it is handed. `pointer-events: none` is what keeps
 * the press on the canvas, where the capture is; focus still lands here, so Tab and the arrow
 * keys reach the real slider.
 */
.relaxation-typing-knob {
  position: absolute;
  top: 0;
  left: 0;
  width: 1.75rem;
  height: 1.125rem;
  border: 1px solid rgba(158, 205, 255, 0.45);
  border-radius: 0.3125rem;
  background: linear-gradient(180deg, rgba(158, 205, 255, 0.22), rgba(8, 14, 22, 0.74));
  box-shadow:
    0 2px 10px rgba(4, 9, 16, 0.6),
    inset 0 1px 0 rgba(234, 243, 255, 0.18);
  pointer-events: none;
  opacity: 0;
  will-change: transform;
  transition: border-color 160ms ease;
}

/* Knurl, so the plate reads as something a hand holds rather than a rounded rectangle. */
.relaxation-typing-knob::after {
  content: "";
  position: absolute;
  inset: 0.3125rem 0.625rem;
  border-left: 1px solid rgba(234, 243, 255, 0.26);
  border-right: 1px solid rgba(234, 243, 255, 0.26);
}

.relaxation-typing-knob:focus-visible {
  border-color: rgba(158, 205, 255, 0.8);
  outline: 2px solid rgba(158, 205, 255, 0.75);
  outline-offset: 3px;
}

/* Outside the card, in the stage's second grid row, so it stays the card's width at any
   viewport instead of spreading to the edges of a 1340px stage. */
.relaxation-typing-hint {
  display: flex;
  width: min(23rem, 100%);
  justify-content: center;
  margin: 0;
  font: 500 0.625rem/1 ui-monospace, "SFMono-Regular", Menlo, monospace;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(234, 243, 255, 0.28);
  pointer-events: none;
}

/*
 * With the loop stopped the chain is solved to its locked state and held there, so the dots
 * still sit at the phases the coupling put them in — what is gone is the sweep. Dragging the
 * pot and the arrow keys both still re-solve it, which is why the dots still rearrange under
 * this rule.
 */
@media (prefers-reduced-motion: reduce) {
  .relaxation-typing-knob {
    transition: none;
  }
}

/*
 * The card variant: the 298x240 catalogue frame, at that real size and never scaled.
 *
 * Three numbers in this file are shared with the canvas and none of them appears below.
 * `.relaxation-typing-live`'s `bottom: 2.75rem` and `height: 2.5rem` put its centre 4rem up,
 * which is the `height − 64` the pill and the dots are drawn on; its `1.375rem` side inset is
 * `INSET`, off which the pill's left edge and the pot's rail are measured. Move any of them
 * here and the dots leave the gap the row reserves for them. So the bottom padding stays at
 * 5.25rem too — it is that row's room — and everything below is the top half of the card.
 */
.relaxation-typing-stage[data-compact='true'] {
  min-height: 0;
  height: 100%;
  /* Centring leaves the row and the column auto-sized, and a track sized from its content is
     what the card's `height: 100%` and `width: 100%` would then resolve against. Stretched,
     the single track is the frame and the card is the track. */
  align-content: stretch;
  justify-items: stretch;
  gap: 0;
  padding: 0.625rem;
  /* The card frame rounds and clips already. */
  border-radius: 0;
}

.relaxation-typing-stage[data-compact='true'] .relaxation-typing-card {
  width: 100%;
  height: 100%;
}

/* 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 the pot is
   about still arrives. */
.relaxation-typing-stage[data-compact='true'] .relaxation-typing-well {
  touch-action: pan-y;
}

/* 12px of head room rather than 20, and the sides and the floor left alone. */
.relaxation-typing-stage[data-compact='true'] .relaxation-typing-face {
  padding-top: 0.75rem;
}

.relaxation-typing-stage[data-compact='true'] .relaxation-typing-head {
  margin-bottom: 0.5rem;
}

/* Two bubbles have 106px between the head and the indicator row here. At the full size they
   would want 104 of it, which the transcript would survive — it clips from the top by design
   — but only by losing a name. A smaller bubble is the better trade. */
.relaxation-typing-stage[data-compact='true'] .relaxation-typing-said {
  padding: 0.4375rem 0.625rem;
  font-size: 0.75rem;
}

/* It is outside the card, in the stage's second row, and the card's own title says it. */
.relaxation-typing-stage[data-compact='true'] .relaxation-typing-hint {
  display: none;
}

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