Flock Search

'use client';

import './flock-search.css';

import { useEffect, useRef } from 'react';

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

/**
 * A search empty state whose backdrop is a real flock: four hundred Reynolds boids.
 *
 * Every bird integrates a_i = Ws·Σ r̂/|r| + Wa·(v̄ − v_i) + Wc·(x̄ − x_i), each term first turned
 * into a steering force — desired velocity at MAX_SPEED along the rule's direction, minus the
 * current velocity, clipped to MAX_FORCE — then semi-implicit Euler at a fixed 1/90 s with |v|
 * held inside a band. The three radii differ, which is the whole behaviour: separation is short
 * and stiff, alignment medium, cohesion long, so birds crowd, agree, and pull back in at
 * different distances. Collapse them to one radius and you get a blob.
 *
 * Neighbours come from a uniform spatial hash rebuilt every step, cell size equal to the largest
 * radius so a 3x3 block covers it. The obvious version — every bird against every other — is
 * 160 000 distance tests per step, roughly two million per second, and it drops frames on a
 * gallery page with other canvases running. The hash makes it about twenty candidates per bird.
 *
 * Fear is a fourth accumulator, weighted far above cohesion, so inside the pointer radius flight
 * beats company: the flock tears open instead of orbiting. Cohesion is what closes it again once
 * the cursor has passed, and that split-and-rejoin is the only proof the three rules are real.
 */

const STEP = 1 / 90;
const COUNT = 400;

const SEP_R = 13;
const ALI_R = 34;
const COH_R = 54;
const SEP_W = 2.05;
const ALI_W = 1.05;
const COH_W = 0.9;

const FEAR_R = 104;
const FEAR_R_HELD = 152;
const FEAR_W = 5.4;

const MAX_SPEED = 196;
const MIN_SPEED = 96;
const MAX_FORCE = 460;

const EDGE_MARGIN = 64;
const EDGE_ACCEL = 1150;

const KICK_ACCEL = 640;
const KICK_DECAY = 3.4;

const WARM_STEPS = 176;
const BIRD_LEN = 7.4;
const BIRD_HALF = 2.9;

interface State {
  clock: number;
  carry: number;
  snap: boolean;
  kick: number;
  width: number;
  height: number;
  cols: number;
  rows: number;
  px: Float64Array;
  py: Float64Array;
  vx: Float64Array;
  vy: Float64Array;
  cellOf: Int32Array;
  cellStart: Int32Array;
  cursor: Int32Array;
  order: Int32Array;
}

const STEER = new Float64Array(2);

/**
 * The clip is load-bearing, not tidiness. Separation divides by |r|, so two birds that land on
 * top of each other ask for an unbounded acceleration and one of them leaves the frame forever.
 */
function steer(dx: number, dy: number, vx: number, vy: number): void {
  const len = Math.hypot(dx, dy);
  if (len < 1e-6) {
    STEER[0] = 0;
    STEER[1] = 0;
    return;
  }
  let sx = (dx / len) * MAX_SPEED - vx;
  let sy = (dy / len) * MAX_SPEED - vy;
  const mag = Math.hypot(sx, sy);
  if (mag > MAX_FORCE) {
    const scale = MAX_FORCE / mag;
    sx *= scale;
    sy *= scale;
  }
  STEER[0] = sx;
  STEER[1] = sy;
}

// Seeded so the warmed first frame is the same formation on every mount and every resize.
function noise(seed: number): () => number {
  let a = seed >>> 0;
  return () => {
    a = (a + 0x6d2b79f5) >>> 0;
    let t = Math.imul(a ^ (a >>> 15), 1 | a);
    t = (t + Math.imul(t ^ (t >>> 7), 61 | t)) ^ t;
    return ((t ^ (t >>> 14)) >>> 0) / 4294967296;
  };
}

/** Counting sort of the birds into grid cells: one O(n) pass, no per-cell arrays to allocate. */
function rehash(s: State): void {
  const cells = s.cols * s.rows;
  const start = s.cellStart;
  start.fill(0);
  for (let i = 0; i < COUNT; i += 1) {
    const cx = Math.min(s.cols - 1, Math.max(0, Math.floor(s.px[i] / COH_R)));
    const cy = Math.min(s.rows - 1, Math.max(0, Math.floor(s.py[i] / COH_R)));
    const c = cy * s.cols + cx;
    s.cellOf[i] = c;
    start[c + 1] += 1;
  }
  for (let c = 0; c < cells; c += 1) {
    start[c + 1] += start[c];
  }
  s.cursor.set(start);
  for (let i = 0; i < COUNT; i += 1) {
    const c = s.cellOf[i];
    s.order[s.cursor[c]] = i;
    s.cursor[c] += 1;
  }
}

/** One fixed step. `fr` is the fear radius in pixels; zero means the pointer is off the stage. */
function advance(s: State, fx: number, fy: number, fr: number): void {
  rehash(s);
  const { px, py, vx, vy, cols, rows, cellStart, order } = s;
  let cenX = 0;
  let cenY = 0;
  if (s.kick > 0.002) {
    for (let i = 0; i < COUNT; i += 1) {
      cenX += px[i];
      cenY += py[i];
    }
    cenX /= COUNT;
    cenY /= COUNT;
  }
  for (let i = 0; i < COUNT; i += 1) {
    const x = px[i];
    const y = py[i];
    const ivx = vx[i];
    const ivy = vy[i];
    let sepX = 0;
    let sepY = 0;
    let aliX = 0;
    let aliY = 0;
    let cohX = 0;
    let cohY = 0;
    let aliN = 0;
    let cohN = 0;
    const gx = Math.min(cols - 1, Math.max(0, Math.floor(x / COH_R)));
    const gy = Math.min(rows - 1, Math.max(0, Math.floor(y / COH_R)));
    const x1 = Math.min(cols - 1, gx + 1);
    const y1 = Math.min(rows - 1, gy + 1);
    for (let cy = Math.max(0, gy - 1); cy <= y1; cy += 1) {
      for (let cx = Math.max(0, gx - 1); cx <= x1; cx += 1) {
        const c = cy * cols + cx;
        const end = cellStart[c + 1];
        for (let k = cellStart[c]; k < end; k += 1) {
          const j = order[k];
          if (j === i) {
            continue;
          }
          const dx = px[j] - x;
          const dy = py[j] - y;
          const d2 = dx * dx + dy * dy;
          if (d2 > COH_R * COH_R) {
            continue;
          }
          const d = Math.sqrt(d2);
          if (d < SEP_R) {
            // r̂/|r|, as the header says, not r̂. The accumulated direction has to be dominated by
            // the bird about to be hit; plain unit vectors let a neighbour at SEP_R outvote one at
            // two pixels and the pair never resolves. d² is floored so the divide cannot blow up.
            const crowd = 1 / Math.max(d2, 0.25);
            sepX -= dx * crowd;
            sepY -= dy * crowd;
          }
          if (d < ALI_R) {
            aliX += vx[j];
            aliY += vy[j];
            aliN += 1;
          }
          cohX += px[j];
          cohY += py[j];
          cohN += 1;
        }
      }
    }
    let ax = 0;
    let ay = 0;
    if (sepX !== 0 || sepY !== 0) {
      steer(sepX, sepY, ivx, ivy);
      ax += STEER[0] * SEP_W;
      ay += STEER[1] * SEP_W;
    }
    if (aliN > 0) {
      steer(aliX / aliN, aliY / aliN, ivx, ivy);
      ax += STEER[0] * ALI_W;
      ay += STEER[1] * ALI_W;
    }
    if (cohN > 0) {
      steer(cohX / cohN - x, cohY / cohN - y, ivx, ivy);
      ax += STEER[0] * COH_W;
      ay += STEER[1] * COH_W;
    }
    if (fr > 0) {
      const dx = x - fx;
      const dy = y - fy;
      const d = Math.hypot(dx, dy);
      // Linear falloff: a hard cutoff at the radius makes a visible circular wall of birds.
      if (d < fr) {
        steer(dx, dy, ivx, ivy);
        const w = FEAR_W * (1 - d / fr);
        ax += STEER[0] * w;
        ay += STEER[1] * w;
      }
    }
    if (s.kick > 0.002) {
      const dx = x - cenX;
      const dy = y - cenY;
      const d = Math.hypot(dx, dy);
      if (d > 1e-6) {
        const w = (KICK_ACCEL * s.kick) / d;
        ax += dx * w;
        ay += dy * w;
      }
    }
    // A linear spring in the last EDGE_MARGIN pixels. Wrapping would be cheaper but the hash has
    // no seam, so cohesion would tear the flock in half every time it crossed one.
    if (x < EDGE_MARGIN) {
      ax += EDGE_ACCEL * (1 - x / EDGE_MARGIN);
    } else if (x > s.width - EDGE_MARGIN) {
      ax -= EDGE_ACCEL * (1 - (s.width - x) / EDGE_MARGIN);
    }
    if (y < EDGE_MARGIN) {
      ay += EDGE_ACCEL * (1 - y / EDGE_MARGIN);
    } else if (y > s.height - EDGE_MARGIN) {
      ay -= EDGE_ACCEL * (1 - (s.height - y) / EDGE_MARGIN);
    }
    let nvx = ivx + ax * STEP;
    let nvy = ivy + ay * STEP;
    const sp = Math.hypot(nvx, nvy);
    if (sp > MAX_SPEED) {
      nvx *= MAX_SPEED / sp;
      nvy *= MAX_SPEED / sp;
    } else if (sp < 1e-6) {
      nvx = MIN_SPEED;
      nvy = 0;
    } else if (sp < MIN_SPEED) {
      // A stalled boid stops being one: its neighbours read a dead heading as a vote to stop too.
      nvx *= MIN_SPEED / sp;
      nvy *= MIN_SPEED / sp;
    }
    vx[i] = nvx;
    vy[i] = nvy;
    px[i] = x + nvx * STEP;
    py[i] = y + nvy * STEP;
  }
  s.kick *= Math.exp(-STEP * KICK_DECAY);
}

/** `compact` is the 298x240 catalogue-card variant: presentation only, no physics change. */
export type FlockSearchProps = { compact?: boolean };

export function FlockSearch({ compact = false }: FlockSearchProps) {
  const reduced = useReducedMotion();
  const kickRef = useRef(0);
  const inputRef = useRef<HTMLInputElement>(null);

  const setup = ({ width, height }: SceneSetupContext): State => {
    const cols = Math.max(1, Math.ceil(width / COH_R));
    const rows = Math.max(1, Math.ceil(height / COH_R));
    const cells = cols * rows;
    const state: State = {
      clock: 0,
      carry: 0,
      snap: false,
      kick: 0,
      width,
      height,
      cols,
      rows,
      px: new Float64Array(COUNT),
      py: new Float64Array(COUNT),
      vx: new Float64Array(COUNT),
      vy: new Float64Array(COUNT),
      cellOf: new Int32Array(COUNT),
      cellStart: new Int32Array(cells + 1),
      cursor: new Int32Array(cells + 1),
      order: new Int32Array(COUNT),
    };
    // Three loose squadrons, not a uniform sprinkle: cohesion has something to find in the first
    // few steps, so the warm-up ends in lanes rather than in a cloud still deciding what it is.
    const rand = noise(0x5eed17);
    for (let i = 0; i < COUNT; i += 1) {
      const g = i % 3;
      const heading = g * 2.1 + (rand() - 0.5) * 0.7;
      const sx = width * (0.26 + 0.24 * g) + (rand() - 0.5) * width * 0.26;
      const sy = height * (0.3 + 0.2 * (g % 2)) + (rand() - 0.5) * height * 0.36;
      state.px[i] = Math.min(width - 4, Math.max(4, sx));
      state.py[i] = Math.min(height - 4, Math.max(4, sy));
      const speed = MIN_SPEED + rand() * (MAX_SPEED - MIN_SPEED);
      state.vx[i] = Math.cos(heading) * speed;
      state.vy[i] = Math.sin(heading) * speed;
    }
    // A gallery gives a scroller about a second, and boids need longer than that to organise, so
    // WARM_STEPS of the real solver runs here. Frame one is already a flock. This is also the
    // reduced-motion frame: there is no closed-form rest state to draw instead.
    for (let n = 0; n < WARM_STEPS; n += 1) {
      advance(state, 0, 0, 0);
    }
    return state;
  };

  const draw = ({ context, width, height, state, pointer }: SceneDrawContext<State>) => {
    state.snap = reduced;
    const now = performance.now() / 1000;
    const dt = state.clock === 0 ? 0 : Math.min(0.05, now - state.clock);
    state.clock = now;
    if (kickRef.current > 0) {
      kickRef.current = 0;
      // Latched only if something will integrate it away. Under reduced motion `advance` never
      // runs, so a stored 1 would sit on state and fire as a stale burst if the loop ever resumed.
      if (!state.snap) {
        state.kick = 1;
      }
    }
    const fear = pointer.inside ? (pointer.down ? FEAR_R_HELD : FEAR_R) : 0;
    if (!state.snap) {
      state.carry += dt;
      let n = 0;
      while (state.carry >= STEP && n < 8) {
        advance(state, pointer.x, pointer.y, fear);
        state.carry -= STEP;
        n += 1;
      }
      if (n === 8) {
        state.carry = 0;
      }
    }

    context.clearRect(0, 0, width, height);
    if (fear > 0) {
      context.strokeStyle = 'rgba(255, 201, 120, 0.14)';
      context.lineWidth = 1;
      context.beginPath();
      context.arc(pointer.x, pointer.y, fear, 0, Math.PI * 2);
      context.stroke();
    }

    // Two paths, two fills: the birds inside the fear radius are the ones worth colouring, and
    // batching them beats 400 separate fill calls by more than the extra pass costs.
    const calm = new Path2D();
    const spooked = new Path2D();
    for (let i = 0; i < COUNT; i += 1) {
      const x = state.px[i];
      const y = state.py[i];
      const speed = Math.hypot(state.vx[i], state.vy[i]);
      const hx = speed > 1e-6 ? state.vx[i] / speed : 1;
      const hy = speed > 1e-6 ? state.vy[i] / speed : 0;
      const hot = fear > 0 && Math.hypot(x - pointer.x, y - pointer.y) < fear;
      const path = hot ? spooked : calm;
      const bx = x - hx * BIRD_LEN * 0.38;
      const by = y - hy * BIRD_LEN * 0.38;
      path.moveTo(x + hx * BIRD_LEN * 0.62, y + hy * BIRD_LEN * 0.62);
      path.lineTo(bx - hy * BIRD_HALF, by + hx * BIRD_HALF);
      path.lineTo(bx + hy * BIRD_HALF, by - hx * BIRD_HALF);
      path.closePath();
    }
    context.fillStyle = 'rgba(196, 214, 240, 0.82)';
    context.fill(calm);
    context.fillStyle = 'rgba(255, 201, 120, 0.96)';
    context.fill(spooked);

    // Over the birds, not under them: 400 moving triangles behind a 1.5rem heading is the busiest
    // thing on the card, and a text-shadow alone loses at the centre.
    const veil = context.createRadialGradient(
      width / 2,
      height / 2,
      0,
      width / 2,
      height / 2,
      Math.max(120, Math.min(width, height * 1.6) * 0.56),
    );
    veil.addColorStop(0, 'rgba(6, 9, 16, 0.82)');
    veil.addColorStop(0.6, 'rgba(6, 9, 16, 0.36)');
    veil.addColorStop(1, 'rgba(6, 9, 16, 0)');
    context.fillStyle = veil;
    context.fillRect(0, 0, width, height);
  };

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

  // The keyboard path into the physics: no pointer coordinates to borrow, so the impulse is radial
  // from the flock's own centroid and decays as exp(-t/KICK_DECAY). The flock scatters and re-forms.
  const scatter = () => {
    kickRef.current = 1;
    requestRender();
  };

  const applyTerm = (term: string) => {
    const input = inputRef.current;
    if (input) {
      input.value = term;
      input.focus();
    }
    scatter();
  };

  return (
    <div className="flock-search-stage" data-compact={compact ? 'true' : undefined}>
      <div ref={stageRef} className="flock-search-surface">
        <canvas ref={canvasRef} aria-hidden="true" />
      </div>
      <div className="flock-search-content">
        <p className="flock-search-eyebrow">No results</p>
        <h2 className="flock-search-title">Nothing matched that search</h2>
        <p className="flock-search-help">
          Try a shorter term, or search by tag. Every component is indexed by name, category and the
          equation it integrates.
        </p>
        <form
          className="flock-search-field"
          role="search"
          onSubmit={(event) => {
            event.preventDefault();
            scatter();
          }}
        >
          <input
            ref={inputRef}
            className="flock-search-input"
            type="search"
            name="q"
            aria-label="Search the catalogue"
            // Was "Search 214 components". This library has never had 214 of
            // anything, and a placeholder is not the place to invent a catalogue
            // size — the consumer who installs this gets whatever it says.
            placeholder="Search the catalogue"
            defaultValue="verlet nav"
            tabIndex={compact ? -1 : undefined}
          />
          <button className="flock-search-go" type="submit" tabIndex={compact ? -1 : undefined}>
            Search
          </button>
        </form>
        <ul className="flock-search-tries" aria-label="Suggested searches">
          {['spatial hash', 'stick-slip', 'verlet cloth'].map((term) => (
            <li key={term}>
              <button
                className="flock-search-try"
                type="button"
                tabIndex={compact ? -1 : undefined}
                onClick={() => applyTerm(term)}
              >
                {term}
              </button>
            </li>
          ))}
        </ul>
      </div>
      <p className="flock-search-hint">move through the flock</p>
    </div>
  );
}

export default FlockSearch;

.flock-search-stage {
  position: relative;
  display: grid;
  place-content: center;
  width: 100%;
  min-height: 24rem;
  padding: 3rem 1.5rem;
  overflow: hidden;
  border-radius: 0.75rem;
  background: radial-gradient(130% 120% at 50% 0%, #101827 0%, #0a0e18 55%, #06080e 100%);
  color: #eef3fb;
}

/* No border on the measured element: `inset: 0` is against the padding box, so one
   pixel of border would slide the canvas origin off the pointer the flock reads. */
.flock-search-surface {
  position: absolute;
  inset: 0;
  touch-action: none;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.06);
  border-radius: inherit;
}

.flock-search-surface canvas {
  display: block;
  width: 100%;
  height: 100%;
}

/* A later sibling of the canvas host, not a child: the hook captures the pointer on
   pointerdown, which would eat the field's focus click if this sat inside the stage. */
.flock-search-content {
  position: relative;
  width: min(27rem, 100%);
  margin: 0 auto;
  text-align: center;
  pointer-events: none;
}

.flock-search-eyebrow {
  margin: 0 0 0.625rem;
  font: 500 0.6875rem/1 ui-monospace, 'SFMono-Regular', Menlo, monospace;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(255, 201, 120, 0.78);
}

.flock-search-title {
  margin: 0 0 0.5rem;
  font-size: 1.5rem;
  font-weight: 500;
  line-height: 1.15;
  letter-spacing: -0.025em;
  text-shadow: 0 1px 20px rgba(6, 9, 16, 0.9);
}

.flock-search-help {
  margin: 0 auto 1.125rem;
  max-width: 24rem;
  font-size: 0.875rem;
  line-height: 1.5;
  color: rgba(238, 243, 251, 0.6);
  text-shadow: 0 1px 16px rgba(6, 9, 16, 0.85);
}

.flock-search-field {
  display: flex;
  gap: 0.375rem;
  align-items: stretch;
}

/* Opaque enough to hold 4.5:1 text over the busiest part of the flock. */
.flock-search-input {
  flex: 1 1 auto;
  min-width: 0;
  padding: 0.625rem 0.875rem;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 999px;
  background: rgba(8, 12, 20, 0.86);
  font: inherit;
  font-size: 0.875rem;
  color: #f4f8ff;
  pointer-events: auto;
  backdrop-filter: blur(8px);
  transition:
    border-color 160ms ease,
    box-shadow 160ms ease;
}

.flock-search-input::placeholder {
  color: rgba(238, 243, 251, 0.42);
}

.flock-search-input:focus-visible {
  outline: none;
  border-color: rgba(255, 201, 120, 0.72);
  box-shadow: 0 0 0 3px rgba(255, 201, 120, 0.18);
}

.flock-search-go {
  appearance: none;
  flex: 0 0 auto;
  padding: 0.625rem 1.0625rem;
  border: 1px solid rgba(255, 201, 120, 0.55);
  border-radius: 999px;
  background: rgba(255, 201, 120, 0.16);
  font: inherit;
  font-size: 0.8125rem;
  font-weight: 500;
  color: #ffdca6;
  cursor: pointer;
  pointer-events: auto;
  transition:
    background-color 160ms ease,
    color 160ms ease;
}

.flock-search-go:hover {
  background: rgba(255, 201, 120, 0.26);
  color: #fff1d8;
}

.flock-search-tries {
  display: flex;
  flex-wrap: wrap;
  gap: 0.375rem;
  justify-content: center;
  margin: 0.875rem 0 0;
  padding: 0;
  list-style: none;
}

.flock-search-try {
  appearance: none;
  margin: 0;
  padding: 0.3125rem 0.6875rem;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 999px;
  background: rgba(8, 12, 20, 0.7);
  font: inherit;
  font-size: 0.75rem;
  color: rgba(238, 243, 251, 0.74);
  cursor: pointer;
  pointer-events: auto;
  backdrop-filter: blur(6px);
  transition:
    border-color 160ms ease,
    color 160ms ease;
}

.flock-search-try:hover {
  border-color: rgba(255, 201, 120, 0.45);
  color: #fff3de;
}

.flock-search-go:focus-visible,
.flock-search-try:focus-visible {
  outline: 2px solid rgba(255, 201, 120, 0.8);
  outline-offset: 2px;
}

.flock-search-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;
  pointer-events: none;
  color: rgba(238, 243, 251, 0.26);
}

@media (max-width: 26rem) {
  .flock-search-stage {
    padding: 2.25rem 1rem;
  }

  .flock-search-field {
    flex-wrap: wrap;
  }

  .flock-search-go {
    flex: 1 1 100%;
  }
}

/*
 * Switched off: the integration loop itself. The flock is still solved — setup runs
 * about two seconds of it — but only the one warmed frame is painted, so the birds
 * hold their formation and the cursor no longer splits them. Hover and focus keep
 * their colour change; only their transitions go.
 */
@media (prefers-reduced-motion: reduce) {
  .flock-search-input,
  .flock-search-go,
  .flock-search-try {
    transition: none;
  }
}

/*
 * Card variant: the same flock re-authored for the catalogue's 298x240 frame. That is the real,
 * final pixel size — nothing here is scaled. The section copy collapses to the eyebrow and the
 * search row along the bottom edge, so the four hundred boids get the whole box instead of
 * sharing it with a 1.5rem heading. The card frame rounds and clips, so this stage does neither.
 */
.flock-search-stage[data-compact='true'] {
  min-height: 0;
  height: 100%;
  padding: 0;
  border-radius: 0;
}

/* pan-y, not none: the card sits in a scrolling grid, and a full-bleed drag surface that swallows
   vertical touch traps the page on a phone. Horizontal drags still reach the flock, and the scene
   hook never calls preventDefault, so touch-action alone decides this. */
.flock-search-stage[data-compact='true'] .flock-search-surface {
  touch-action: pan-y;
}

/* The veil `draw` lays over the birds is there to keep the 1.5rem heading legible, and its radius
   works out at ~167px inside a 298x240 box: with the heading hidden it is a black hole sitting on
   the mechanism. `screen` makes a black fill a no-op, so the middle of the flock comes back
   without the draw call learning anything about the card. */
.flock-search-stage[data-compact='true'] .flock-search-surface canvas {
  mix-blend-mode: screen;
}

/* Off the mechanism entirely: one strip on the bottom edge. `pointer-events: none` is inherited
   from the base rule, so drags across it still land on the canvas. */
/* A scrim, because the strip is over the field rather than beside it. At full size the copy
   sits in a margin the flock never enters; pinned to the bottom edge of a 298px card the birds
   fly straight through both the label and the input, and neither read. The gradient fades to
   nothing at its own top edge, so it darkens the bottom ~45px of the field and stops — no band,
   no visible seam. `pointer-events` is untouched: the base rule leaves this layer deaf and the
   two controls `auto`, so a drag through the scrim still steers the flock. */
.flock-search-stage[data-compact='true'] .flock-search-content {
  position: absolute;
  inset: auto 0 0 0;
  width: auto;
  margin: 0;
  padding: 0.75rem;
  background: linear-gradient(
    to top,
    rgba(6, 10, 18, 0.94) 0%,
    rgba(6, 10, 18, 0.78) 55%,
    rgba(6, 10, 18, 0) 100%
  );
}

/* The one line of copy that survives, at a fixed size: `vw` or a `clamp()` with a `vw` term would
   measure the 1340px viewport rather than this 298px card, which is the bug being fixed.

   The shadow is the whole reason this rule is not just a font size. At full size the eyebrow sits
   in a wide margin the flock never reaches; in a 298px box the birds fly straight through it, and
   10px amber caps over a field of pale triangles at the same y was the least readable thing on the
   card. A tight dark halo pulls it off the field without a scrim rectangle behind it. */
.flock-search-stage[data-compact='true'] .flock-search-eyebrow {
  margin: 0 0 0.375rem;
  font-size: 0.625rem;
  text-shadow:
    0 0 3px rgba(6, 10, 18, 0.95),
    0 1px 8px rgba(6, 10, 18, 0.8);
}

.flock-search-stage[data-compact='true'] .flock-search-title,
.flock-search-stage[data-compact='true'] .flock-search-help,
.flock-search-stage[data-compact='true'] .flock-search-tries,
.flock-search-stage[data-compact='true'] .flock-search-hint {
  display: none;
}

/* The field stays, shrunk: submitting is the second half of the behaviour — a radial kick from the
   flock's own centroid — so a visitor who clicks Search inside the card sees the flock burst and
   re-form. Both controls keep the `pointer-events: auto` from their base rules. Held to one row
   whatever the viewport is, since the 26rem media query would otherwise wrap the button under the
   field and double the height of this strip. */
.flock-search-stage[data-compact='true'] .flock-search-field {
  flex-wrap: nowrap;
  gap: 0.3125rem;
}

.flock-search-stage[data-compact='true'] .flock-search-input {
  padding: 0.375rem 0.625rem;
  font-size: 0.6875rem;
}

.flock-search-stage[data-compact='true'] .flock-search-go {
  flex: 0 0 auto;
  padding: 0.375rem 0.6875rem;
  font-size: 0.6875rem;
}

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