"use client";

// Renders one composed line of ransom-note cutouts. Each glyph is an <img> of a real
// torn-paper letter, sized to a shared line height (width follows the sprite's aspect),
// tilted / baseline-bounced / scaled per the composition. Spaces become a gap.
//
// Appear vocabulary is "slam & settle": a scrap punches in slightly too big with extra
// tilt and overshoots flat, like it's being pressed / taped onto the page (scale + rotate,
// no vertical drop). `direction` lets the same line animate OUT (fade + shrink) so the card
// can crossfade one phrase into the next with no blank gap.
//
// Each scrap also carries a per-letter parallax `depth` (data-depth) + its resting rotation
// (data-rot) so a cursor engine can lean the whole collage toward the pointer.

import { type CSSProperties, useEffect, useRef, useState } from "react";
import { spriteUrl, variantsFor, type Placed, type Variant } from "./manifest";
import { hapticTap } from "../../lib/haptics";

// Back-out overshoot: scrap springs past its size then settles flat — the "tape-down" snap.
const SLAM_EASE = "cubic-bezier(.34,1.56,.64,1)";
// A calm ease-OUT for the box-width glide. The slam ease overshoots, which on `width` shoved
// neighbors wider-then-back; width should settle monotonically so the row never jitters.
const WIDTH_EASE = "cubic-bezier(.22,.61,.36,1)";
// Switch (phrase→phrase) vertical-pass motion: a soft rise + un-blur in, a quick lift-blur out.
const RISE_EASE = "cubic-bezier(.16,1,.3,1)"; // expo-out — fast start, long glide, no overshoot
const IN_MS = 460; // per-scrap rise-in duration (slower than a slam → smoother, feathered)
const OUT_MS = 240; // lift-blur-out duration (whole line together)
const STAGGER_MS = 26; // left-to-right cascade step on the rise-in
const SWAP_MS = 260; // click-swap flip duration

export function RansomLine({
  placed,
  lineH,
  revealed = true,
  direction = "in",
  staggerStart = 0,
  nowrap = false,
  className = "",
}: {
  placed: Placed[];
  /** cap height of a letter in px (the sprites are 220px tall; width scales to aspect) */
  lineH: number;
  /** when false, letters sit hidden (for an entrance animation) */
  revealed?: boolean;
  /** "in" = slam/settle to rest; "out" = fade + shrink away (for the crossfade) */
  direction?: "in" | "out";
  /** index offset so multiple lines can stagger continuously */
  staggerStart?: number;
  /** keep the whole line on one row (no wrapping) — the caller sizes it to fit */
  nowrap?: boolean;
  className?: string;
}) {
  let gi = staggerStart;
  return (
    <div
      className={`flex items-center justify-center ${nowrap ? "flex-nowrap" : "flex-wrap"} ${className}`}
      style={{ gap: `${lineH * 0.04}px` }}
    >
      {placed.map((p, i) => {
        if (p.kind === "space") {
          return <span key={i} style={{ width: `${lineH * 0.32}px` }} aria-hidden />;
        }
        return (
          <Scrap key={i} p={p} lineH={lineH} revealed={revealed} direction={direction} idx={gi++} />
        );
      })}
    </div>
  );
}

// One cutout letter. Owns two things beyond rendering:
//  • the entrance/exit slam (inner <img> transform, staggered per idx),
//  • click-to-swap — clicking flips the scrap to a DIFFERENT variant of the same character
//    with a quick spin/scale flip (old image flips out, new one slams in over it).
// The outer <span> is the parallax lean layer the cursor engine writes --px/--py/--pr/--ps to.
function Scrap({
  p,
  lineH,
  revealed,
  direction,
  idx,
}: {
  p: Placed;
  lineH: number;
  revealed: boolean;
  direction: "in" | "out";
  idx: number;
}) {
  // A click-chosen override variant, or null to show the composed one. Derived (no effect):
  // when the composition changes (re-roll / phrase switch), p.variant changes identity and
  // the override is dropped so the fresh cutout shows.
  const [override, setOverride] = useState<{ base: Variant; picked: Variant } | null>(null);
  const variant = override && override.base === p.variant ? override.picked : p.variant!;
  // During a swap: `incoming` = the new width target (box glides to it); `outgoing` = the OLD
  // cutout, rendered as an overlay that flips OUT on top of the already-promoted base.
  const [incoming, setIncoming] = useState<Variant | null>(null);
  const [outgoing, setOutgoing] = useState<Variant | null>(null);
  const swapTimer = useRef<number | null>(null);
  useEffect(() => () => {
    if (swapTimer.current) window.clearTimeout(swapTimer.current);
  }, []);

  const h = lineH * p.scale;
  const aspect = (vr: Variant) => (vr.w / vr.h) * h;
  const w = aspect(variant); // width of the currently-shown variant
  // While swapping, the box targets the INCOMING variant's width immediately (on click), so
  // it glides to the real size right away and neighbors slide along with it — no end-of-swap
  // jump. The two images inside keep their own true widths so neither distorts mid-animation.
  const boxW = incoming ? aspect(incoming) : w;

  const baseY = (p.dy * lineH).toFixed(2);
  const leanTransform = `translate(var(--px, 0px), calc(${baseY}px + var(--py, 0px))) rotate(var(--pr, 0deg)) scale(var(--ps, 1))`;
  const restInner = `translateY(0px) rotate(${p.rot}deg) scale(1)`;
  // Switch vocabulary — a soft VERTICAL PASS with a feathered blur (the note re-assembling):
  //   • in  → the scrap rises from just below, un-blurs and settles (staggered L→R);
  //   • out → the scrap lifts up, blurs and fades away (peeled off the board).
  const RISE = Math.max(10, lineH * 0.18);
  const hiddenInner =
    direction === "in"
      ? `translateY(${RISE.toFixed(1)}px) rotate(${(p.rot * 1.25).toFixed(2)}deg) scale(0.96)`
      : `translateY(${(-RISE * 0.8).toFixed(1)}px) rotate(${(p.rot * 0.8).toFixed(2)}deg) scale(0.98)`;
  // drop-shadow is constant (the paper contact); the blur is what animates on the switch.
  const SHADOW = "drop-shadow(0 2px 3px rgba(20,20,25,0.16)) drop-shadow(0 6px 10px rgba(20,20,30,0.10))";
  const blurAmt = revealed ? 0 : direction === "in" ? 3.5 : 5;

  const swap = () => {
    if (incoming) return; // already mid-swap
    const all = variantsFor(p.ch);
    const others = all.filter((v) => v.file !== variant.file);
    if (!others.length) return; // only one cutout for this letter — nothing to swap to
    hapticTap();
    const next = others[Math.floor(Math.random() * others.length)];
    // Promote immediately: the BASE image now shows `next` (fully opaque, at rest), and the
    // OLD variant becomes a transient overlay that flips OUT on top of it. So when the overlay
    // is removed at the end, the base is already the final letter — no empty blink frame.
    setOverride({ base: p.variant!, picked: next });
    setOutgoing(variant); // the letter we're leaving, flips out over the new base
    setIncoming(next); // (kept for the box-width target)
    swapTimer.current = window.setTimeout(() => {
      setOutgoing(null);
      setIncoming(null);
    }, SWAP_MS);
  };

  const outerStyle: CSSProperties = {
    transform: leanTransform,
    // No CSS transition here: the magnetism/drag/breathe hook eases every value per frame in
    // JS, so a CSS transition on top would just add lag and fight the spring. When the hook is
    // inactive (reduced-motion / touch) the vars stay 0 and this is a plain static transform.
    willChange: "transform",
    marginRight: `${p.mx * lineH}px`,
    lineHeight: 0,
    cursor: "grab",
    touchAction: "none", // let the scrap own drag gestures (no scroll hijack fighting)
  };
  const wrapStyle: CSSProperties = {
    display: "flex",
    alignItems: "center",
    justifyContent: "center",
    position: "relative",
    width: `${boxW}px`,
    height: `${h}px`,
    transformOrigin: "center center",
    transform: revealed ? restInner : hiddenInner,
    opacity: revealed ? 1 : 0,
    transition:
      direction === "in"
        ? // rise + un-blur + fade in, per-letter staggered L→R on a smooth ease-out.
          `transform ${IN_MS}ms ${RISE_EASE} ${idx * STAGGER_MS}ms, opacity ${Math.round(IN_MS * 0.7)}ms ease ${idx * STAGGER_MS}ms, filter ${IN_MS}ms ease ${idx * STAGGER_MS}ms, width ${SWAP_MS}ms ${WIDTH_EASE}`
        : // lift + blur + fade out, quick, all letters together (no cascade) so it clears fast.
          `transform ${OUT_MS}ms cubic-bezier(.4,0,.7,1), opacity ${OUT_MS}ms ease, filter ${OUT_MS}ms ease, width ${SWAP_MS}ms ${WIDTH_EASE}`,
    filter: `${SHADOW} blur(${blurAmt}px)`,
    willChange: "transform, opacity, filter, width",
  };

  // Each image keeps its OWN true aspect width (centered in the box) so the animating box
  // width never stretches/distorts a scrap. Both are absolute + centered so they overlap.
  const imgBase = (vr: Variant): CSSProperties => ({
    position: "absolute",
    top: "50%",
    left: "50%",
    width: `${aspect(vr)}px`,
    height: `${h}px`,
    transition: `transform ${SWAP_MS}ms ${SLAM_EASE}, opacity ${SWAP_MS}ms ease`,
  });

  return (
    <span
      style={outerStyle}
      data-depth={p.depth ?? 0.5}
      onPointerDown={(e) => {
        // don't begin a native text selection / image drag when grabbing a scrap
        e.preventDefault();
      }}
      onClick={(e) => {
        // a real drag sets data-dragging on this element (see use-magnetism); a click that
        // follows a drag should NOT swap — only a genuine tap does.
        if (e.currentTarget.dataset.dragging) return;
        swap();
      }}
    >
      <span style={wrapStyle}>
        {/* BASE: always the shown variant, fully at rest. During a swap it's already the NEW
            cutout underneath, so removing the overlay reveals it with no empty frame. */}
        <img
          src={spriteUrl(variant.file)}
          alt={p.ch}
          draggable={false}
          decoding="async"
          className="select-none"
          style={{
            ...imgBase(variant),
            transform: "translate(-50%,-50%)",
            // during a swap the new letter slams in via the overlay, so keep the base itself
            // steady (no reverse transition = no blink); at rest it's just the letter.
            transition: "none",
          }}
        />
        {/* OVERLAY: the OLD cutout, flipping OUT on top of the already-swapped base (spin +
            shrink + fade). When it finishes and unmounts, the new base is simply revealed. */}
        {outgoing && (
          <img
            src={spriteUrl(outgoing.file)}
            alt=""
            aria-hidden
            draggable={false}
            decoding="async"
            className="select-none"
            style={{
              ...imgBase(outgoing),
              animation: `ransom-swap-out ${SWAP_MS}ms ${SLAM_EASE} both`,
            }}
          />
        )}
      </span>
    </span>
  );
}

// A RansomLine that manages its OWN entrance: mounts hidden, then slams in on the next
// frame. Remount it (change its `key`) to replay the slam — used by the playground's
// Re-roll / live edits so a fresh composition punches back in with no shared reveal state.
export function SlammingLine(props: Omit<Parameters<typeof RansomLine>[0], "revealed">) {
  const [revealed, setRevealed] = useState(false);
  useEffect(() => {
    const r = requestAnimationFrame(() => setRevealed(true));
    return () => cancelAnimationFrame(r);
  }, []);
  return <RansomLine {...props} revealed={revealed} />;
}

"use client";

// A live, display-only Vault card: short phrases assembled as a ransom note out of real
// torn-paper cutout letters. Each phrase SLAMS in letter-by-letter (scale + tilt overshoot,
// like it's taped down), holds, then CROSSFADES straight into the next — the outgoing line
// shrinks/fades out while the incoming line is already slamming in over it, so there's no
// blank gap. Moving the cursor magnetizes each scrap toward the pointer by its own proximity
// (near letters lean + lift, far ones stay put). Pauses when offscreen / hidden.

import { useEffect, useMemo, useRef, useState } from "react";
import { RansomLine } from "./RansomLine";
import { useMagnetism } from "./use-magnetism";
import { composeLine, hashSeed, lineWidth, DEFAULT_JITTER, type Placed } from "./manifest";

// kept short so they compose cleanly on one card and stay readable
const PHRASES = ["stay weird", "make stuff", "be kind", "trust me", "keep going", "no rules"];

// cycle timing
const REVEAL_HOLD = 1800; // ms held fully revealed (quicker resting state)
const CROSS_OVERLAP = 150; // ms after the old line lifts off before the new one rises in
const OUT_MS = 260; // how long the outgoing line stays mounted while it lifts + blurs away

type Slot = { key: number; phraseIdx: number; placed: Placed[]; direction: "in" | "out"; revealed: boolean };

export function RansomNoteCard({
  bare = false,
  viewTransitionName,
}: {
  bare?: boolean;
  viewTransitionName?: string;
} = {}) {
  void bare;
  const hostRef = useRef<HTMLDivElement>(null);
  const [avail, setAvail] = useState(900);

  // The card renders 1 or 2 stacked lines: the current one (slamming in / resting) and,
  // briefly during a switch, the outgoing one (fading out underneath). A monotonic key
  // guarantees React remounts each line so its enter transition re-fires. The counter lives
  // in a ref and is only ever bumped inside effects/handlers (never during render).
  const seq = useRef(1);
  const makeSlot = (phraseIdx: number): Slot => ({
    key: seq.current++,
    phraseIdx,
    placed: composeLine(PHRASES[phraseIdx].toUpperCase(), hashSeed(PHRASES[phraseIdx]), DEFAULT_JITTER),
    direction: "in",
    revealed: false,
  });
  // Initial slot built without touching the ref (key 0), so nothing is read during render.
  const [slots, setSlots] = useState<Slot[]>(() => [
    {
      key: 0,
      phraseIdx: 0,
      placed: composeLine(PHRASES[0].toUpperCase(), hashSeed(PHRASES[0]), DEFAULT_JITTER),
      direction: "in",
      revealed: false,
    },
  ]);

  // fit the CURRENT phrase to ONE row: comfortable target height, scaled down if it would
  // overflow the card's usable width (padding leaves ~86% for the letters). The outgoing
  // line reuses this height (it's leaving, exact fit doesn't matter).
  const current = slots[slots.length - 1];
  const lineH = useMemo(() => {
    const usable = avail * 0.86;
    const target = Math.max(48, Math.min(112, Math.round(avail * 0.085)));
    const natural = lineWidth(current.placed, target);
    return natural > usable ? Math.max(30, Math.floor((target * usable) / natural)) : target;
  }, [current.placed, avail]);

  // ── cycle: slam in → hold → crossfade to next ──────────────────────────────
  useEffect(() => {
    const host = hostRef.current;
    if (!host) return;
    const reduced = window.matchMedia("(prefers-reduced-motion: reduce)").matches;

    const ro = new ResizeObserver(() => setAvail(host.clientWidth));
    ro.observe(host);

    if (reduced) {
      // static: just show the current phrase revealed, no cycling. Deferred a frame so it
      // isn't a synchronous set in the effect body (avoids a cascading render).
      const raf = requestAnimationFrame(() =>
        setSlots((s) => [{ ...s[s.length - 1], revealed: true }]),
      );
      return () => {
        cancelAnimationFrame(raf);
        ro.disconnect();
      };
    }

    let onScreen = false;
    let hidden = false;
    let hovering = false; // freeze the phrase while the cursor is on the card
    let running = false;
    const timers = new Set<number>();
    const after = (fn: () => void, ms: number) => {
      const id = window.setTimeout(() => {
        timers.delete(id);
        fn();
      }, ms);
      timers.add(id);
      return id;
    };
    const clearTimers = () => {
      for (const id of timers) window.clearTimeout(id);
      timers.clear();
    };

    const revealCurrent = () => {
      // flip the just-mounted line to revealed so it slams in.
      setSlots((s) => s.map((sl, i) => (i === s.length - 1 ? { ...sl, revealed: true } : sl)));
    };

    const toNext = () => {
      if (!running) return;
      setSlots((s) => {
        const cur = s[s.length - 1];
        const nextIdx = (cur.phraseIdx + 1) % PHRASES.length;
        // mark current as leaving (out), add the next as an incoming hidden line on top.
        const leaving: Slot = { ...cur, direction: "out", revealed: false };
        const incoming = makeSlot(nextIdx);
        return [leaving, incoming];
      });
      // drop the outgoing line once it's faded, and slam the incoming one in.
      after(() => setSlots((s) => s.slice(-1)), OUT_MS);
      after(revealCurrent, CROSS_OVERLAP);
      // schedule the next switch.
      after(toNext, CROSS_OVERLAP + REVEAL_HOLD);
    };

    const start = () => {
      if (running) return;
      running = true;
      // reveal whatever's current, then begin the loop.
      revealCurrent();
      after(toNext, REVEAL_HOLD);
    };
    const stop = () => {
      running = false;
      clearTimers();
    };
    // Freeze the auto-cycle while hovering, so a phrase never switches out from under the
    // cursor mid-interaction (the letters you're leaning / dragging stay put). Because a
    // switch only ever fires from a queued timer, stopping before it fires leaves the current
    // phrase fully settled; leaving resumes the loop and the next switch happens then.
    const sync = () => (onScreen && !hidden && !hovering ? start() : stop());

    const io = new IntersectionObserver(
      (es) => {
        onScreen = es[0]?.isIntersecting ?? false;
        sync();
      },
      { threshold: 0.2 },
    );
    io.observe(host);
    const onVis = () => {
      hidden = document.hidden;
      sync();
    };
    document.addEventListener("visibilitychange", onVis);

    // pause on hover, resume on leave (pointer devices only — a touch has no lingering hover)
    const canHover = window.matchMedia("(hover: hover) and (pointer: fine)").matches;
    const onEnter = () => {
      hovering = true;
      sync();
      // if a crossfade was mid-flight when the pointer arrived, collapse to a single clean,
      // fully-revealed line so it freezes tidily (no half-faded outgoing scrap left behind).
      setSlots((s) => {
        if (s.length === 1 && s[0].revealed && s[0].direction === "in") return s;
        const cur = s[s.length - 1];
        return [{ ...cur, direction: "in", revealed: true }];
      });
    };
    const onLeave = () => {
      hovering = false;
      sync();
    };
    if (canHover) {
      host.addEventListener("pointerenter", onEnter);
      host.addEventListener("pointerleave", onLeave);
    }

    return () => {
      stop();
      ro.disconnect();
      io.disconnect();
      document.removeEventListener("visibilitychange", onVis);
      host.removeEventListener("pointerenter", onEnter);
      host.removeEventListener("pointerleave", onLeave);
    };
  }, []);

  // cursor magnetism: each scrap reacts to the pointer's proximity to ITSELF (near letters
  // lean toward it + lift, far ones stay put) — a per-letter field, not a flat card tilt.
  useMagnetism(hostRef);

  return (
    <div
      ref={hostRef}
      data-canvas-card
      aria-label="Short phrases spelled out as a ransom note from torn-paper cutout letters, revealing one letter at a time."
      style={viewTransitionName ? { viewTransitionName } : undefined}
      className="relative mx-auto flex aspect-[1344/620] w-full select-none items-center justify-center overflow-hidden rounded-[12px] border border-[var(--border-line)] bg-[var(--bg-page)] px-10 sm:px-16"
    >
      {/* Stacked lines: outgoing (leaving) sits under the incoming during a crossfade.
          Absolute so both occupy the same centered box; the current one is last. */}
      {slots.map((sl) => (
        <div key={sl.key} className="absolute inset-0 flex items-center justify-center px-10 sm:px-16">
          <RansomLine
            placed={sl.placed}
            lineH={lineH}
            revealed={sl.revealed}
            direction={sl.direction}
            nowrap
          />
        </div>
      ))}
    </div>
  );
}

"use client";

// Ransom-note playground — the detail-page editor. Type any text and it composes into a
// note built from real torn-paper cutout letters, with live jitter controls (tilt, bounce,
// scale variance, spacing, size) and a Re-roll that reshuffles which cutouts are used.
// Built on the shared composeLine picker the display card uses.

import { useEffect, useMemo, useRef, useState } from "react";
import { SlammingLine } from "./RansomLine";
import { useMagnetism } from "./use-magnetism";
import { composeLine, hashSeed, lineWidth, type JitterConfig } from "./manifest";
import { PG_PREVIEW, PG_PANEL, Slider, GhostButton } from "../swirl/controls";
import { SectionLabel } from "../section-label";
import { hapticTap } from "../../lib/haptics";

const LABEL = "text-[12px] text-[var(--text-tertiary)]";

export function RansomNotePlayground() {
  const [text, setText] = useState("stay weird");
  const [seed, setSeed] = useState(() => hashSeed("stay weird"));
  const [jit, setJit] = useState<JitterConfig>({ rot: 8, dy: 0.06, scale: 0.12, gap: 0.2 });
  const [size, setSize] = useState(78);
  const stageRef = useRef<HTMLDivElement>(null);
  const [avail, setAvail] = useState(900); // usable inner width of the preview
  // bumps on every Re-roll so the lines remount (via key) and slam back in.
  const [playKey, setPlayKey] = useState(0);

  // split into lines (Enter breaks a line); compose each with a per-line seed so re-roll
  // reshuffles everything at once.
  const lines = useMemo(() => {
    const raw = (text || " ").split("\n");
    return raw.map((ln, i) => composeLine(ln.toUpperCase(), seed + i * 101, jit));
  }, [text, seed, jit]);

  // track the stage width so we can shrink each line to fit on ONE row (never wrap)
  useEffect(() => {
    const el = stageRef.current;
    if (!el) return;
    const ro = new ResizeObserver(() => setAvail(el.clientWidth));
    ro.observe(el);
    setAvail(el.clientWidth);
    return () => ro.disconnect();
  }, []);

  // cursor magnetism: each scrap reacts to the pointer's proximity to itself (same per-letter
  // field as the display card), scoped to the preview stage.
  useMagnetism(stageRef);

  // per line: use the Size slider as the max height, but scale down if the line would
  // overflow the stage width, so the whole note always stays on a single row.
  const fittedH = (placed: (typeof lines)[number]) => {
    // small safety factor: tilt expands each letter's box a little beyond its upright width
    const room = avail * 0.94;
    const natural = lineWidth(placed, size);
    if (natural <= room || natural <= 0) return size;
    return Math.max(20, Math.floor((size * room) / natural));
  };

  const reroll = () => {
    hapticTap();
    setSeed((s) => (s + 0x9e3779b1) >>> 0);
    setPlayKey((k) => k + 1); // remount → slam the fresh scraps back in
  };

  return (
    <div className="flex min-w-0 flex-col gap-4">
      <SectionLabel action={<GhostButton onClick={reroll}>Re-roll</GhostButton>}>
        Playground
      </SectionLabel>

      {/* live preview */}
      <div className={`${PG_PREVIEW} aspect-[1344/620] w-full bg-[var(--bg-page)]`}>
        <div
          ref={stageRef}
          className="absolute inset-0 flex flex-col items-center justify-center gap-[3%] overflow-hidden px-[5%]"
        >
          {/* Keyed on playKey only, so Re-roll remounts → slams the fresh scraps in, while
              live typing / slider edits update the same lines in place (no replayed slam). */}
          {lines.map((placed, i) => (
            <SlammingLine key={`${playKey}-${i}`} placed={placed} lineH={fittedH(placed)} nowrap />
          ))}
        </div>
      </div>

      {/* controls */}
      <div className={PG_PANEL}>
        {/* text */}
        <div className="flex flex-col gap-2 sm:flex-row sm:items-center">
          <span className={`${LABEL} shrink-0`}>Text</span>
          <input
            value={text}
            onChange={(e) => setText(e.target.value)}
            placeholder="type a note"
            maxLength={40}
            className="h-8 min-w-0 flex-1 rounded-lg border border-[var(--border-line)] bg-[var(--bg-page)] px-3 text-[12px] text-[var(--text-primary)] outline-none transition-colors duration-150 ease-[var(--ease-out)] placeholder:text-[var(--text-tertiary)] hover:border-[var(--border-ring)] focus:border-[var(--border-ring)] sm:ml-auto sm:w-[220px] sm:flex-none"
          />
        </div>

        {/* two columns of sliders */}
        <div className="grid grid-cols-1 items-start gap-x-6 gap-y-5 sm:grid-cols-2">
          <div className="flex flex-col gap-3 self-start">
            <span className={LABEL}>Chaos</span>
            <Slider label="Tilt" value={jit.rot} min={0} max={22} step={0.5}
              format={(v) => `${v.toFixed(0)}°`} onChange={(v) => setJit((j) => ({ ...j, rot: v }))} />
            <Slider label="Bounce" value={jit.dy} min={0} max={0.2} step={0.005}
              format={(v) => v.toFixed(2)} onChange={(v) => setJit((j) => ({ ...j, dy: v }))} />
          </div>
          <div className="flex flex-col gap-3 self-start">
            <span className={LABEL}>Layout</span>
            <Slider label="Scale mix" value={jit.scale} min={0} max={0.3} step={0.01}
              format={(v) => v.toFixed(2)} onChange={(v) => setJit((j) => ({ ...j, scale: v }))} />
            <Slider label="Spacing" value={jit.gap} min={0} max={0.25} step={0.01}
              format={(v) => v.toFixed(2)} onChange={(v) => setJit((j) => ({ ...j, gap: v }))} />
            <Slider label="Size" value={size} min={40} max={120} step={1}
              format={(v) => `${v.toFixed(0)}px`} onChange={setSize} />
          </div>
        </div>
      </div>
    </div>
  );
}

export interface WordMask {
  canvas: HTMLCanvasElement;
  x0: number;
  x1: number;
}

export function makeWordMask(
  word: string,
  w: number,
  h: number,
  fontFamily: string,
): WordMask {
  const W = Math.max(1, Math.round(w));
  const H = Math.max(1, Math.round(h));

  const out = document.createElement("canvas");
  out.width = W;
  out.height = H;
  const ctx = out.getContext("2d")!;
  ctx.clearRect(0, 0, W, H);

  const text = (word || "").trim();
  if (!text) return { canvas: out, x0: 0.45, x1: 0.55 };

  const cx = W / 2;
  const cy = H * 0.52;
  const maxW = W * 0.66;

  const LOCK = H * 0.34;

  let size = LOCK;
  ctx.font = `600 ${size}px ${fontFamily}`;
  let measured = ctx.measureText(text).width;
  if (measured > maxW) {
    size *= maxW / measured;
    ctx.font = `600 ${size}px ${fontFamily}`;
    measured = ctx.measureText(text).width;
  }

  ctx.textAlign = "left";
  ctx.textBaseline = "middle";

  const ls = size * 0.015;
  const chars = [...text];
  const widths = chars.map((c) => ctx.measureText(c).width);
  const total = widths.reduce((a, b) => a + b, 0) + ls * (chars.length - 1);
  let x = cx - total / 2;
  const left = x;

  const last = Math.max(1, chars.length - 1);
  for (let i = 0; i < chars.length; i++) {
    const idx = i / last;
    ctx.fillStyle = `rgba(${Math.round(idx * 255)}, 0, 0, 1)`;
    ctx.fillText(chars[i], x, cy);
    x += widths[i] + ls;
  }
  return { canvas: out, x0: left / W, x1: (left + total) / W };
}

export const VERT = `
attribute vec2 aPos;
varying vec2 vUv;
void main() {
  vUv = aPos * 0.5 + 0.5;
  gl_Position = vec4(aPos, 0.0, 1.0);
}`;

export const BLUR_FRAG = `
#ifdef GL_FRAGMENT_PRECISION_HIGH
precision highp float;
#else
precision mediump float;
#endif
varying vec2 vUv;
uniform sampler2D uTex;
uniform vec2 uDir;
uniform float uMorph;
uniform sampler2D uTexB;
uniform float uUseMorph;
uniform float uPartOut;
uniform float uPartIn;
uniform float uLetterSpread;

uniform vec2  uFocus;
uniform float uFocusAmt;

float bhash(vec2 p){ p = fract(p*vec2(123.34,456.21)); p += dot(p, p+45.32); return fract(p.x*p.y); }
float bvnoise(vec2 p){
  vec2 i = floor(p), f = fract(p);
  vec2 u = f*f*(3.0-2.0*f);
  float a = bhash(i), b2 = bhash(i+vec2(1.0,0.0));
  float c = bhash(i+vec2(0.0,1.0)), d = bhash(i+vec2(1.0,1.0));
  return mix(mix(a,b2,u.x), mix(c,d,u.x), u.y);
}
float bfbm(vec2 p){
  float v = 0.0, a = 0.5;
  for (int i = 0; i < 4; i++){ v += a * bvnoise(p); p = p * 2.0 + 11.0; a *= 0.5; }
  return v;
}

float bTransition(vec2 uv, float m){

  vec2 q = vec2(bfbm(uv * 2.1 + 3.7), bfbm(uv * 2.1 - 1.3));
  float n = bfbm(uv * 3.0 + q * 1.1);
  float bias = (uv.x * 0.8 + uv.y * 0.2) * 0.30;
  float field = clamp(n * 0.74 + bias, 0.0, 1.0);
  const float BAND = 0.26;

  float thr = mix(1.0 + BAND, -BAND, m);
  return smoothstep(thr - BAND, thr + BAND, field);
}

float bLetterPhase(sampler2D tex, vec2 uv, float m, float spread){
  float idx = texture2D(tex, uv).r;
  return clamp((m * (1.0 + spread)) - idx * spread, 0.0, 1.0);
}
vec4 samp(vec2 uv){
  if (uUseMorph > 0.5) {

    vec4 aTex = texture2D(uTex, uv);
    vec4 bTex = texture2D(uTexB, uv);
    float outM = bTransition(uv, bLetterPhase(uTex,  uv, uPartOut, uLetterSpread));
    float inM  = bTransition(uv, bLetterPhase(uTexB, uv, uPartIn,  uLetterSpread));
    return max(aTex * (1.0 - outM), bTex * inM);
  }
  return texture2D(uTex, uv);
}
void main(){

  float mid = (uFocus.x + uFocus.y) * 0.5;
  float halfW = max(0.001, (uFocus.y - uFocus.x) * 0.5);
  float ends = clamp(abs(vUv.x - mid) / halfW, 0.0, 1.6);
  float focus = 1.0 + uFocusAmt * ends * ends;
  vec2 dir = uDir * focus;

  float w0 = 0.2270270270;
  float w1 = 0.1945945946;
  float w2 = 0.1216216216;
  float w3 = 0.0540540541;
  float w4 = 0.0162162162;
  vec4 c = samp(vUv) * w0;
  c += samp(vUv + dir * 1.0) * w1;
  c += samp(vUv - dir * 1.0) * w1;
  c += samp(vUv + dir * 2.0) * w2;
  c += samp(vUv - dir * 2.0) * w2;
  c += samp(vUv + dir * 3.0) * w3;
  c += samp(vUv - dir * 3.0) * w3;
  c += samp(vUv + dir * 4.0) * w4;
  c += samp(vUv - dir * 4.0) * w4;
  gl_FragColor = c;
}`;

export const COMPOSITE_FRAG = `
#ifdef GL_FRAGMENT_PRECISION_HIGH
precision highp float;
#else
precision mediump float;
#endif
varying vec2 vUv;

uniform sampler2D uMask;
uniform sampler2D uMaskB;
uniform sampler2D uL0;
uniform sampler2D uL1;
uniform sampler2D uL2;
uniform sampler2D uL3;
uniform vec2  uRes;
uniform float uMorph;
uniform float uPartOut;
uniform float uPartIn;
uniform float uLetterSpread;
uniform float uFront;
uniform vec2  uCursor;
uniform float uCursorOn;
uniform float uWarpRadius;
uniform float uWarpAmp;
uniform float uWarpSwirl;
uniform vec2  uWarpVel;
uniform float uWarpDrag;
uniform float uWarpStretch;
uniform float uPhase;
uniform float uBloom;
uniform vec2  uCast0;
uniform vec2  uCast1;
uniform vec2  uCast2;
uniform vec2  uCast3;

uniform float uPos[5];
uniform vec3  uCol[5];
uniform vec3  uInk;
uniform vec3  uPaper;
uniform float uGrain;

float hash(vec2 p){ p = fract(p*vec2(123.34,456.21)); p += dot(p, p+45.32); return fract(p.x*p.y); }

float vnoise(vec2 p){
  vec2 i = floor(p), f = fract(p);
  vec2 u = f*f*(3.0-2.0*f);
  float a = hash(i), b2 = hash(i+vec2(1.0,0.0));
  float c = hash(i+vec2(0.0,1.0)), d = hash(i+vec2(1.0,1.0));
  return mix(mix(a,b2,u.x), mix(c,d,u.x), u.y);
}
float fbm(vec2 p){
  float v = 0.0, a = 0.5;
  for (int i = 0; i < 4; i++){ v += a * vnoise(p); p = p * 2.0 + 11.0; a *= 0.5; }
  return v;
}

float transitionMask(vec2 uv, float m){

  vec2 q = vec2(fbm(uv * 2.1 + 3.7), fbm(uv * 2.1 - 1.3));
  float n = fbm(uv * 3.0 + q * 1.1);
  float bias = (uv.x * 0.8 + uv.y * 0.2) * 0.30;
  float field = clamp(n * 0.74 + bias, 0.0, 1.0);
  const float BAND = 0.26;
  float thr = mix(1.0 + BAND, -BAND, m);
  return smoothstep(thr - BAND, thr + BAND, field);
}

float letterPhase(sampler2D tex, vec2 uv, float m, float spread){
  float idx = texture2D(tex, uv).r;

  float local = (m * (1.0 + spread)) - idx * spread;
  return clamp(local, 0.0, 1.0);
}
float coverA(vec2 uv){ return texture2D(uMask, uv).a; }
float coverB(vec2 uv){ return texture2D(uMaskB, uv).a; }

float cover(vec2 uv){
  float outM = transitionMask(uv, letterPhase(uMask,  uv, uPartOut, uLetterSpread));
  float inM  = transitionMask(uv, letterPhase(uMaskB, uv, uPartIn,  uLetterSpread));

  return max(coverA(uv) * (1.0 - outM), coverB(uv) * inM);
}

vec3 gradientMap(float x){
  vec3 c = uCol[0];
  c = mix(c, uCol[1], smoothstep(uPos[0], uPos[1], x));
  c = mix(c, uCol[2], smoothstep(uPos[1], uPos[2], x));
  c = mix(c, uCol[3], smoothstep(uPos[2], uPos[3], x));
  c = mix(c, uCol[4], smoothstep(uPos[3], uPos[4], x));
  return c;
}

vec3 softLight(vec3 base, float g){
  vec3 s = vec3(g);
  vec3 lo = 2.0*base*s + base*base*(1.0 - 2.0*s);
  vec3 hi = 2.0*base*(1.0 - s) + sqrt(base)*(2.0*s - 1.0);
  return mix(lo, hi, step(0.5, s));
}

vec2 warpUV(vec2 uv){
  if (uCursorOn < 0.001) return uv;
  float asp = uRes.x / max(1.0, uRes.y);
  vec2 d = (uv - uCursor) * vec2(asp, 1.0);
  float r = length(d);
  float R = uWarpRadius;
  if (r > R || r < 1e-5) return uv;
  float f = 1.0 - r / R;
  f = f * f * (3.0 - 2.0 * f);
  vec2 dir = d / r;
  vec2 swirl = vec2(-dir.y, dir.x);
  vec2 push = mix(dir, swirl, uWarpSwirl);

  push += uWarpVel * uWarpDrag;

  float speed = length(uWarpVel);
  if (speed > 0.02) {
    vec2 vdir = uWarpVel / speed;
    float along = dot(d / r, vdir);
    float stretch = 1.0 + uWarpStretch * clamp(speed, 0.0, 1.0) * (along * along - 0.35);
    f *= clamp(stretch, 0.0, 2.2);
  }

  float ripple = 1.0 + 0.16 * sin(r / R * 3.1416 - uPhase * 5.0);

  float lead = 0.5 + 0.5 * dot(normalize(d + 1e-6), normalize(uWarpVel + 1e-6));
  float visc = mix(1.15, 0.85, lead);

  return uv + push * (f * ripple * visc * uWarpAmp * uCursorOn) / vec2(asp, 1.0);
}

void main(){

  vec2 uv = warpUV(vUv);

  float cd = distance(vUv * uRes, uCursor * uRes);
  float hot = uCursorOn * smoothstep(min(uRes.x, uRes.y) * uWarpRadius * 2.4, 0.0, cd);

  float b = 1.0 + (uBloom - 1.0) * 1.25 + 0.14 * hot;

  float glow =
      1.00 * cover(uv)
    + 0.92 * texture2D(uL0, uv + uCast0).a
    + 0.78 * texture2D(uL1, vUv + uCast1).a * b
    + 0.58 * texture2D(uL2, vUv + uCast2).a * b
    + 0.40 * texture2D(uL3, vUv + uCast3).a * b;
  glow = clamp(glow / 2.45, 0.0, 1.0);

  float field = pow(glow, 0.6);

  field = clamp(field + hot * 0.16 * field, 0.0, 1.0);

  if (uFront > 0.001) {
    vec2 q = vec2(fbm(uv * 2.1 + 3.7), fbm(uv * 2.1 - 1.3));
    float n = fbm(uv * 3.0 + q * 1.1);
    float fieldN = clamp(n * 0.74 + (uv.x * 0.8 + uv.y * 0.2) * 0.30, 0.0, 1.0);
    float thrIn = mix(1.26, -0.26, uPartIn);
    float edge = 1.0 - smoothstep(0.0, 0.30, abs(fieldN - thrIn));

    field = clamp(field + edge * uFront * 0.30 * smoothstep(0.02, 0.45, glow), 0.0, 1.0);
  }

  float drift = 0.022 * sin(uPhase + uv.x * 3.0 + uv.y * 2.0);

  float t = clamp(1.0 - field + drift - hot * 0.10, 0.0, 1.0);
  vec3 col = gradientMap(t);

  vec3 bounced = mix(uPaper, uCol[2], texture2D(uL3, vUv + uCast3).a * 0.16);
  col = mix(bounced, col, smoothstep(0.0, 0.06, field));

  float softCov = clamp(texture2D(uL0, uv).a * 1.05 + cover(uv) * 0.25, 0.0, 1.0);

  float interior = smoothstep(0.18, 0.62, softCov);

  vec3 bodyCol = mix(uInk, uCol[1], 0.5);
  bodyCol = mix(bodyCol, uCol[2], (1.0 - interior) * 0.5);

  float solid = smoothstep(0.35, 0.95, cover(uv));
  bodyCol = mix(mix(bodyCol, uCol[2], 0.30), mix(bodyCol, uInk, 0.22), solid);
  col = mix(col, bodyCol, interior * 0.9);

  float g = hash(gl_FragCoord.xy);
  vec3 grained = softLight(col, g);
  col = mix(col, grained, uGrain * (0.5 + 0.7 * field));

  gl_FragColor = vec4(clamp(col, 0.0, 1.0), 1.0);
}`;

import { VERT, BLUR_FRAG, COMPOSITE_FRAG } from "./shaders";
import { makeWordMask } from "./text-mask";
import {
  PALETTES,
  WORDS,
  GRAIN,
  MORPH_LEAD,
  MORPH_LAG,
  CAST_DIR,
  CAST_STEP,
  HOLD_SCALE,
  LETTER_SPREAD,
  BREATH,
  WARP_RADIUS,
  WARP_AMP,
  WARP_SWIRL,
  WARP_DRAG,
  WARP_STRETCH,
  paletteUniforms,
  lerpPaletteUniforms,
  type PaletteUniforms,
} from "./params";

const FONT = "var(--font-pangram)";
const FOCUS_AMT = 1.5;

const MORPH_SEC = 0.8;
const HOLD_MS = 700;

const LEVELS = [
  { scale: 0.5, radius: 2 },
  { scale: 0.25, radius: 3 },
  { scale: 0.125, radius: 3 },
  { scale: 0.0625, radius: 3 },
];

type Target = { fb: WebGLFramebuffer; tex: WebGLTexture; w: number; h: number };

export class BlurGlow {
  private host: HTMLElement;
  private canvas: HTMLCanvasElement;
  private gl: WebGLRenderingContext | null = null;

  private blurProg: WebGLProgram | null = null;
  private compProg: WebGLProgram | null = null;
  private quad: WebGLBuffer | null = null;

  private maskA: WebGLTexture | null = null;
  private maskB: WebGLTexture | null = null;
  private focusA: [number, number] = [0.35, 0.65];
  private focusB: [number, number] = [0.35, 0.65];
  private levels: { out: Target; tmp: Target }[] = [];

  private blurU: Record<string, WebGLUniformLocation | null> = {};
  private compU: Record<string, WebGLUniformLocation | null> = {};

  private fontFamily = "sans-serif";
  private raf = 0;
  private running = false;
  private destroyed = false;
  private start0 = 0;
  private lastT = 0;
  private revealed = false;

  private wordIdx = 0;
  private paletteIdx = 0;
  private morph = 0;
  private morphEased = 0;
  private morphGlow = 0;
  private morphBody = 0;
  private morphing = false;
  private holdUntil = 0;

  private paletteFrom: PaletteUniforms = paletteUniforms(PALETTES[0]);
  private paletteTo: PaletteUniforms = paletteUniforms(PALETTES[0]);

  private curX = 0.5;
  private curY = 0.5;
  private tgtX = 0.5;
  private tgtY = 0.5;
  private curOn = 0;
  private tgtOn = 0;

  private velX = 0;
  private velY = 0;
  private prevX = 0.5;
  private prevY = 0.5;

  constructor(host: HTMLElement) {
    this.host = host;
    this.canvas = document.createElement("canvas");
    Object.assign(this.canvas.style, {
      display: "block",
      width: "100%",
      height: "100%",
      opacity: "0",
      transition: "opacity 0.4s ease",
    });
    host.appendChild(this.canvas);

    const gl = this.canvas.getContext("webgl", {
      alpha: false,
      antialias: false,
      premultipliedAlpha: false,
      powerPreference: "low-power",
    }) as WebGLRenderingContext | null;
    if (!gl) return;
    this.gl = gl;

    this.buildPrograms();
    if (!this.blurProg || !this.compProg) return;
    this.resolveFont();
    this.resize();

    host.addEventListener("pointermove", this.onMove);
    host.addEventListener("pointerleave", this.onLeave);
  }

  private compile(type: number, src: string): WebGLShader | null {
    const gl = this.gl!;
    const s = gl.createShader(type)!;
    gl.shaderSource(s, src);
    gl.compileShader(s);
    if (!gl.getShaderParameter(s, gl.COMPILE_STATUS)) {
      console.warn("[blur-glow] shader:", gl.getShaderInfoLog(s));
      return null;
    }
    return s;
  }
  private link(vs: string, fs: string): WebGLProgram | null {
    const gl = this.gl!;
    const v = this.compile(gl.VERTEX_SHADER, vs);
    const f = this.compile(gl.FRAGMENT_SHADER, fs);
    if (!v || !f) return null;
    const p = gl.createProgram()!;
    gl.attachShader(p, v);
    gl.attachShader(p, f);
    gl.linkProgram(p);
    if (!gl.getProgramParameter(p, gl.LINK_STATUS)) {
      console.warn("[blur-glow] link:", gl.getProgramInfoLog(p));
      return null;
    }
    return p;
  }

  private buildPrograms() {
    const gl = this.gl!;
    this.quad = gl.createBuffer();
    gl.bindBuffer(gl.ARRAY_BUFFER, this.quad);
    gl.bufferData(gl.ARRAY_BUFFER, new Float32Array([-1, -1, 3, -1, -1, 3]), gl.STATIC_DRAW);

    this.blurProg = this.link(VERT, BLUR_FRAG);
    this.compProg = this.link(VERT, COMPOSITE_FRAG);
    if (!this.blurProg || !this.compProg) return;

    const BU = (n: string) => gl.getUniformLocation(this.blurProg!, n);
    this.blurU = {
      uTex: BU("uTex"),
      uTexB: BU("uTexB"),
      uDir: BU("uDir"),
      uMorph: BU("uMorph"),
      uUseMorph: BU("uUseMorph"),
      uFocus: BU("uFocus"),
      uFocusAmt: BU("uFocusAmt"),
      uPartOut: BU("uPartOut"),
      uPartIn: BU("uPartIn"),
      uLetterSpread: BU("uLetterSpread"),
    };
    const CU = (n: string) => gl.getUniformLocation(this.compProg!, n);
    this.compU = {
      uMask: CU("uMask"),
      uMaskB: CU("uMaskB"),
      uL0: CU("uL0"),
      uL1: CU("uL1"),
      uL2: CU("uL2"),
      uL3: CU("uL3"),
      uRes: CU("uRes"),
      uMorph: CU("uMorph"),
      uCursor: CU("uCursor"),
      uCursorOn: CU("uCursorOn"),
      uWarpRadius: CU("uWarpRadius"),
      uWarpAmp: CU("uWarpAmp"),
      uWarpSwirl: CU("uWarpSwirl"),
      uWarpVel: CU("uWarpVel"),
      uWarpDrag: CU("uWarpDrag"),
      uWarpStretch: CU("uWarpStretch"),
      uPhase: CU("uPhase"),
      uBloom: CU("uBloom"),
      uCast0: CU("uCast0"),
      uCast1: CU("uCast1"),
      uCast2: CU("uCast2"),
      uCast3: CU("uCast3"),
      uPartOut: CU("uPartOut"),
      uPartIn: CU("uPartIn"),
      uLetterSpread: CU("uLetterSpread"),
      uFront: CU("uFront"),
      uPos: CU("uPos[0]"),
      uCol: CU("uCol[0]"),
      uInk: CU("uInk"),
      uPaper: CU("uPaper"),
      uGrain: CU("uGrain"),
    };
  }

  private bindQuad(prog: WebGLProgram) {
    const gl = this.gl!;
    gl.bindBuffer(gl.ARRAY_BUFFER, this.quad);
    const loc = gl.getAttribLocation(prog, "aPos");
    gl.enableVertexAttribArray(loc);
    gl.vertexAttribPointer(loc, 2, gl.FLOAT, false, 0, 0);
  }

  private uploadPalette(u: { positions: number[]; colors: number[]; ink: number[]; paper: number[] }) {
    const gl = this.gl;
    if (!gl || !this.compProg) return;
    gl.useProgram(this.compProg);
    gl.uniform1fv(this.compU.uPos!, new Float32Array(u.positions));
    gl.uniform3fv(this.compU.uCol!, new Float32Array(u.colors));
    gl.uniform3fv(this.compU.uInk!, new Float32Array(u.ink));
    gl.uniform3fv(this.compU.uPaper!, new Float32Array(u.paper));
    this.canvas.style.background = `rgb(${u.paper.map((c) => Math.round(c * 255)).join(",")})`;
  }

  private applyPalette(i: number) {
    const idx = i % PALETTES.length;
    this.paletteFrom = paletteUniforms(PALETTES[idx]);
    this.paletteTo = this.paletteFrom;
    this.uploadPalette(this.paletteFrom);
  }

  private resolveFont() {
    if (typeof document === "undefined") return;
    try {
      const probe = document.createElement("span");
      probe.style.cssText = "position:absolute;visibility:hidden;font-family:" + FONT;
      probe.textContent = "Ag";
      document.body.appendChild(probe);
      this.fontFamily =
        getComputedStyle(probe).fontFamily.split(",")[0].replace(/["']/g, "").trim() || "sans-serif";
      document.body.removeChild(probe);
    } catch {}
  }

  private makeTarget(w: number, h: number): Target {
    const gl = this.gl!;
    const tex = gl.createTexture()!;
    gl.bindTexture(gl.TEXTURE_2D, tex);
    gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, w, h, 0, gl.RGBA, gl.UNSIGNED_BYTE, null);
    gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR);
    gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.LINEAR);
    gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE);
    gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE);
    const fb = gl.createFramebuffer()!;
    gl.bindFramebuffer(gl.FRAMEBUFFER, fb);
    gl.framebufferTexture2D(gl.FRAMEBUFFER, gl.COLOR_ATTACHMENT0, gl.TEXTURE_2D, tex, 0);
    gl.bindFramebuffer(gl.FRAMEBUFFER, null);
    return { fb, tex, w, h };
  }
  private freeLevels() {
    const gl = this.gl;
    if (!gl) return;
    for (const lv of this.levels) {
      gl.deleteFramebuffer(lv.out.fb);
      gl.deleteTexture(lv.out.tex);
      gl.deleteFramebuffer(lv.tmp.fb);
      gl.deleteTexture(lv.tmp.tex);
    }
    this.levels = [];
  }
  private allocLevels() {
    this.freeLevels();
    const W = this.canvas.width;
    const H = this.canvas.height;
    this.levels = LEVELS.map((l) => {
      const w = Math.max(2, Math.round(W * l.scale));
      const h = Math.max(2, Math.round(H * l.scale));
      return { out: this.makeTarget(w, h), tmp: this.makeTarget(w, h) };
    });
  }

  private uploadMask(src: HTMLCanvasElement, existing: WebGLTexture | null): WebGLTexture {
    const gl = this.gl!;
    const tex = existing ?? gl.createTexture()!;
    gl.bindTexture(gl.TEXTURE_2D, tex);

    gl.pixelStorei(gl.UNPACK_FLIP_Y_WEBGL, true);
    gl.pixelStorei(gl.UNPACK_PREMULTIPLY_ALPHA_WEBGL, false);
    gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, src);
    gl.pixelStorei(gl.UNPACK_FLIP_Y_WEBGL, false);
    gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR);
    gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.LINEAR);
    gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE);
    gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE);
    return tex;
  }
  private buildMask() {
    const gl = this.gl;
    if (!gl) return;
    const m = makeWordMask(WORDS[this.wordIdx % WORDS.length], this.canvas.width, this.canvas.height, this.fontFamily);
    this.maskA = this.uploadMask(m.canvas, this.maskA);
    this.focusA = [m.x0, m.x1];
  }

  private buildMaskB() {
    const gl = this.gl;
    if (!gl) return;
    const next = (this.wordIdx + 1) % WORDS.length;
    const m = makeWordMask(WORDS[next], this.canvas.width, this.canvas.height, this.fontFamily);
    this.maskB = this.uploadMask(m.canvas, this.maskB);
    this.focusB = [m.x0, m.x1];
  }

  private resize() {
    const gl = this.gl;
    if (!gl) return;

    const dpr = Math.min(window.devicePixelRatio || 1, 1.5);
    const r = this.host.getBoundingClientRect();
    const w = Math.max(1, Math.round(r.width * dpr));
    const h = Math.max(1, Math.round(r.height * dpr));
    if (this.canvas.width === w && this.canvas.height === h && this.levels.length) return;
    this.canvas.width = w;
    this.canvas.height = h;
    this.allocLevels();
    this.buildMask();

    this.buildMaskB();

    if (!this.morphing) this.applyPalette(this.paletteIdx);
  }

  private beginMorph() {

    this.morph = 0;
    this.morphing = true;

    this.paletteFrom = paletteUniforms(PALETTES[this.paletteIdx % PALETTES.length]);
    this.paletteTo = paletteUniforms(PALETTES[(this.paletteIdx + 1) % PALETTES.length]);
  }
  private finishMorph() {
    this.wordIdx = (this.wordIdx + 1) % WORDS.length;
    const t = this.maskA;
    this.maskA = this.maskB;
    this.maskB = t;
    this.focusA = this.focusB;
    this.morph = 0;
    this.morphing = false;

    this.buildMaskB();

    this.paletteIdx = (this.paletteIdx + 1) % PALETTES.length;
    this.paletteFrom = this.paletteTo;
    this.uploadPalette(this.paletteTo);
  }

  private render(bloom: number, phase: number) {
    const gl = this.gl;
    if (!gl || !this.blurProg || !this.compProg || !this.levels.length) return;

    gl.useProgram(this.blurProg);
    this.bindQuad(this.blurProg);
    gl.disable(gl.BLEND);

    const m = this.morph;
    const em = m * m * m * (m * (m * 6 - 15) + 10);

    this.morphGlow = Math.pow(em, MORPH_LEAD);
    this.morphBody = Math.pow(em, MORPH_LAG);
    this.morphEased = em;

    const clocks = (base: number): [number, number] => [
      Math.min(1, base * (1 + BREATH)),
      Math.max(0, Math.min(1, base * (1 + BREATH) - BREATH)),
    ];
    const [glowOut, glowIn] = clocks(this.morphGlow);
    const [bodyOut, bodyIn] = clocks(this.morphBody);

    const front = this.morphing ? Math.sin(Math.PI * em) : 0;
    const fx0 = this.focusA[0] + (this.focusB[0] - this.focusA[0]) * em;
    const fx1 = this.focusA[1] + (this.focusB[1] - this.focusA[1]) * em;
    gl.uniform2f(this.blurU.uFocus!, fx0, fx1);
    gl.uniform1f(this.blurU.uFocusAmt!, FOCUS_AMT);

    gl.uniform1f(this.blurU.uMorph!, this.morphGlow);
    gl.uniform1f(this.blurU.uPartOut!, glowOut);
    gl.uniform1f(this.blurU.uPartIn!, glowIn);
    gl.uniform1f(this.blurU.uLetterSpread!, LETTER_SPREAD);
    for (let i = 0; i < this.levels.length; i++) {
      const lv = this.levels[i];
      const r = LEVELS[i].radius;
      const srcTex = i === 0 ? this.maskA! : this.levels[i - 1].out.tex;
      const useMorph = i === 0 && this.morphing ? 1 : 0;

      gl.bindFramebuffer(gl.FRAMEBUFFER, lv.tmp.fb);
      gl.viewport(0, 0, lv.tmp.w, lv.tmp.h);
      gl.activeTexture(gl.TEXTURE0);
      gl.bindTexture(gl.TEXTURE_2D, srcTex);
      gl.uniform1i(this.blurU.uTex!, 0);
      gl.activeTexture(gl.TEXTURE1);
      gl.bindTexture(gl.TEXTURE_2D, this.maskB ?? this.maskA!);
      gl.uniform1i(this.blurU.uTexB!, 1);
      gl.uniform1f(this.blurU.uUseMorph!, useMorph);
      gl.uniform2f(this.blurU.uDir!, r / lv.tmp.w, 0);
      gl.drawArrays(gl.TRIANGLES, 0, 3);

      gl.bindFramebuffer(gl.FRAMEBUFFER, lv.out.fb);
      gl.viewport(0, 0, lv.out.w, lv.out.h);
      gl.activeTexture(gl.TEXTURE0);
      gl.bindTexture(gl.TEXTURE_2D, lv.tmp.tex);
      gl.uniform1i(this.blurU.uTex!, 0);
      gl.uniform1f(this.blurU.uUseMorph!, 0);
      gl.uniform2f(this.blurU.uDir!, 0, r / lv.out.h);
      gl.drawArrays(gl.TRIANGLES, 0, 3);
    }

    gl.bindFramebuffer(gl.FRAMEBUFFER, null);
    gl.viewport(0, 0, this.canvas.width, this.canvas.height);
    gl.useProgram(this.compProg);
    this.bindQuad(this.compProg);

    if (this.morphing) {
      this.uploadPalette(lerpPaletteUniforms(this.paletteFrom, this.paletteTo, this.morphEased));
    }

    gl.activeTexture(gl.TEXTURE0);
    gl.bindTexture(gl.TEXTURE_2D, this.maskA!);
    gl.uniform1i(this.compU.uMask!, 0);
    gl.activeTexture(gl.TEXTURE1);
    gl.bindTexture(gl.TEXTURE_2D, this.maskB ?? this.maskA!);
    gl.uniform1i(this.compU.uMaskB!, 1);
    const levelUnits = ["uL0", "uL1", "uL2", "uL3"];
    for (let i = 0; i < this.levels.length; i++) {
      gl.activeTexture(gl.TEXTURE2 + i);
      gl.bindTexture(gl.TEXTURE_2D, this.levels[i].out.tex);
      gl.uniform1i(this.compU[levelUnits[i]]!, 2 + i);
    }
    gl.uniform2f(this.compU.uRes!, this.canvas.width, this.canvas.height);
    gl.uniform1f(this.compU.uMorph!, this.morphBody);
    gl.uniform1f(this.compU.uPartOut!, bodyOut);
    gl.uniform1f(this.compU.uPartIn!, bodyIn);
    gl.uniform1f(this.compU.uLetterSpread!, LETTER_SPREAD);
    gl.uniform1f(this.compU.uFront!, front);
    gl.uniform2f(this.compU.uCursor!, this.curX, this.curY);
    gl.uniform1f(this.compU.uCursorOn!, this.curOn);
    gl.uniform1f(this.compU.uWarpRadius!, WARP_RADIUS);
    gl.uniform1f(this.compU.uWarpAmp!, WARP_AMP);
    gl.uniform1f(this.compU.uWarpSwirl!, WARP_SWIRL);
    gl.uniform2f(this.compU.uWarpVel!, this.velX, this.velY);
    gl.uniform1f(this.compU.uWarpDrag!, WARP_DRAG);
    gl.uniform1f(this.compU.uWarpStretch!, WARP_STRETCH);
    gl.uniform1f(this.compU.uPhase!, phase);
    gl.uniform1f(this.compU.uBloom!, bloom);

    const aspect = this.canvas.width / Math.max(1, this.canvas.height);
    const casts = [this.compU.uCast0, this.compU.uCast1, this.compU.uCast2, this.compU.uCast3];
    for (let i = 0; i < casts.length; i++) {
      const s = CAST_STEP[i];
      gl.uniform2f(casts[i]!, (CAST_DIR[0] * s) / aspect, CAST_DIR[1] * s);
    }
    gl.uniform1f(this.compU.uGrain!, GRAIN);
    gl.drawArrays(gl.TRIANGLES, 0, 3);

    this.reveal();
  }

  private holdFor(i: number) {
    return HOLD_MS * (HOLD_SCALE[i % WORDS.length] ?? 1);
  }

  private frame = (now: number) => {
    if (!this.running || this.destroyed) return;
    if (!this.start0) {
      this.start0 = now;
      this.lastT = now;
      this.holdUntil = now + this.holdFor(this.wordIdx);
    }
    const t = (now - this.start0) / 1000;
    const dt = Math.min(0.05, Math.max(0.001, (now - this.lastT) / 1000));
    this.lastT = now;

    this.curX = this.tgtX;
    this.curY = this.tgtY;

    this.curOn += (this.tgtOn - this.curOn) * (1 - Math.pow(1 - 0.42, dt * 60));

    const vx = (this.curX - this.prevX) / dt;
    const vy = (this.curY - this.prevY) / dt;
    this.prevX = this.curX;
    this.prevY = this.curY;
    const vk = 1 - Math.pow(1 - 0.5, dt * 60);
    this.velX += (vx - this.velX) * vk;
    this.velY += (vy - this.velY) * vk;
    const vmag = Math.hypot(this.velX, this.velY);
    const VMAX = 2.2;
    if (vmag > VMAX) {
      this.velX = (this.velX / vmag) * VMAX;
      this.velY = (this.velY / vmag) * VMAX;
    }

    if (!this.morphing && now >= this.holdUntil) this.beginMorph();
    if (this.morphing) {

      this.morph = Math.min(1, this.morph + dt / MORPH_SEC);
      if (this.morph >= 1) {
        this.finishMorph();
        this.holdUntil = now + this.holdFor(this.wordIdx);
      }
    }

    const bloom = 1.0 + 0.16 * Math.sin(t * 0.6);
    const phase = t * 0.5;
    this.render(bloom, phase);
    this.raf = requestAnimationFrame(this.frame);
  };

  private reveal() {
    if (this.revealed) return;
    this.revealed = true;
    this.canvas.style.opacity = "1";
  }

  private onMove = (e: PointerEvent) => {
    const r = this.host.getBoundingClientRect();
    this.tgtX = (e.clientX - r.left) / r.width;
    this.tgtY = 1 - (e.clientY - r.top) / r.height;
    this.tgtOn = 1;
  };
  private onLeave = () => {
    this.tgtOn = 0;
  };

  start() {
    if (this.running || !this.gl || !this.compProg) return;
    this.running = true;
    this.start0 = 0;
    this.raf = requestAnimationFrame(this.frame);
  }
  stop() {
    this.running = false;
    if (this.raf) cancelAnimationFrame(this.raf);
    this.raf = 0;
  }

  renderStill(instant = false) {
    if (!this.gl || !this.compProg) return;
    if (instant && !this.revealed) {
      this.canvas.style.transition = "none";
      this.revealed = true;
      this.canvas.style.opacity = "1";
    }
    this.render(1.0, 0);
  }
  refreshFont() {
    this.resolveFont();

    this.buildMask();
    this.buildMaskB();
    if (!this.running) this.renderStill();
  }
  onResize() {
    this.resize();
    if (!this.running) this.renderStill();
  }
  destroy() {
    this.destroyed = true;
    this.stop();
    this.host.removeEventListener("pointermove", this.onMove);
    this.host.removeEventListener("pointerleave", this.onLeave);
    const gl = this.gl;
    if (gl) {
      this.freeLevels();
      if (this.maskA) gl.deleteTexture(this.maskA);
      if (this.maskB) gl.deleteTexture(this.maskB);
      if (this.quad) gl.deleteBuffer(this.quad);
      if (this.blurProg) gl.deleteProgram(this.blurProg);
      if (this.compProg) gl.deleteProgram(this.compProg);
      gl.getExtension("WEBGL_lose_context")?.loseContext();
    }
    this.canvas.remove();
  }
}

// Rasterizes ONE word (in Kyoto) into a coverage mask for the ink-bleed shader. The
// shader reads this as the SOLID ink shape and then bleeds / stamps / tears its edges
// with noise. We render white-on-transparent so the shader can read coverage from .r.
// No blur here — all the bleed happens on the GPU.

export async function makeWordMask(
  word: string,
  w: number,
  h: number,
  fontFamily: string,
): Promise<HTMLCanvasElement> {
  const W = Math.max(1, Math.round(w));
  const H = Math.max(1, Math.round(h));

  const out = document.createElement("canvas");
  out.width = W;
  out.height = H;
  const ctx = out.getContext("2d")!;
  ctx.clearRect(0, 0, W, H);

  const text = (word || "").trim();
  if (!text) return out;

  const cx = W / 2;
  const cy = H * 0.52; // Kyoto sits a touch high; nudge down to optically centre
  // leave a wide margin: the ink bleeds OUTWARD past the glyphs, so the word must not
  // touch the edges or the bleed clips.
  const maxW = W * 0.66;

  // Kyoto is a display serif; a big cap height reads as a print. Shrink to fit width.
  let size = H * 0.4;
  ctx.font = `500 ${size}px ${fontFamily}`;
  const measured = ctx.measureText(text).width;
  if (measured > maxW) {
    size *= maxW / measured;
    ctx.font = `500 ${size}px ${fontFamily}`;
  }

  ctx.fillStyle = "#fff";
  ctx.textAlign = "center";
  ctx.textBaseline = "middle";
  ctx.fillText(text, cx, cy);
  return out;
}

// Ink Bleed shaders (raw WebGL1). Turns a word into a rough, stamped ink print bled
// into paper. The pipeline, all noise-driven on the GPU:
//   1. read the word's coverage mask, softened a little into a pseudo distance field
//   2. BLEED  — push the ink edge OUTWARD by low-frequency fbm, so the ink creeps into
//               the paper (the wet spread). Amount + cursor "wetness" grow the push.
//   3. STAMP  — cut it with a noisy high-contrast threshold, so the ink breaks into
//               solid blobs with gaps (a rubber stamp that didn't ink evenly)
//   4. TORN   — modulate the threshold by fine fbm so the edges go ragged / torn
//   5. GRAIN  — speckle the ink + paper with grain
//   6. compose ink colour over a paper texture; optional stroke frame + corner marks
// It animates by scrolling the noise slowly (the ink "breathes"/creeps) and by a local
// wetness bump under the cursor.

export const FULL_VERT = `
attribute vec2 aPosition;
varying vec2 vUv;
void main() {
  vUv = aPosition * 0.5 + 0.5;
  gl_Position = vec4(aPosition, 0.0, 1.0);
}
`;

export const INK_FRAG = `
precision highp float;
varying vec2 vUv;

uniform sampler2D uMask;   // word coverage (.r = inside the glyph)
uniform vec2  uTexel;      // 1/maskSize
uniform vec2  uResolution;
uniform float uTime;
uniform float uAspect;

uniform float uAmount;     // bleed amount (Light..Heavy)
uniform float uWet;        // extra bleed radius (cursor wetness field, 0..1)
uniform vec2  uWetPos;     // cursor position in uv
uniform float uWetOn;      // 1 while the cursor drives wetness
uniform float uGrain;      // grain amount 0..1
uniform float uDistort;    // wet/glass edge distortion amount
uniform vec3  uInk;        // ink colour
uniform vec3  uPaper;      // paper colour
uniform float uSeed;       // per-cycle seed (varies the bleed pattern)

// ---- noise ----
float hash(vec2 p){ p=fract(p*vec2(123.34,345.45)); p+=dot(p,p+34.345); return fract(p.x*p.y); }
float vnoise(vec2 p){
  vec2 i=floor(p), f=fract(p); f=f*f*(3.0-2.0*f);
  float a=hash(i), b=hash(i+vec2(1.0,0.0)), c=hash(i+vec2(0.0,1.0)), d=hash(i+vec2(1.0,1.0));
  return mix(mix(a,b,f.x),mix(c,d,f.x),f.y);
}
float fbm(vec2 p){
  float s=0.0, a=0.5;
  for(int i=0;i<4;i++){ s+=a*vnoise(p); p*=2.03; a*=0.5; }
  return s;
}

// soft coverage of the mask a few px around uv -> a cheap pseudo distance field so the
// bleed has a smooth gradient to push, not a 1px hard edge.
float coverage(vec2 uv){
  float c = texture2D(uMask, uv).r;
  // 4-tap ring blur to soften the edge into a ramp
  float o = 2.0;
  c += texture2D(uMask, uv + vec2(o,0.0)*uTexel).r;
  c += texture2D(uMask, uv - vec2(o,0.0)*uTexel).r;
  c += texture2D(uMask, uv + vec2(0.0,o)*uTexel).r;
  c += texture2D(uMask, uv - vec2(0.0,o)*uTexel).r;
  return c / 5.0;
}

void main() {
  vec2 uv = vUv;
  vec2 ar = vec2(uAspect, 1.0);

  // noise coords; the ink visibly BREATHES: each noise field's phase drifts continuously
  // so the bled edge shimmers + creeps (not a frozen stamp). uSeed offsets the pattern.
  vec2 np = uv * ar;
  float t = uTime * 0.18;          // gentle breathing (slow creep, not churn)

  // --- wet distortion (Glass): warp the sample point by drifting low-freq noise ---
  vec2 warp = vec2(
    fbm(np * 4.0 + vec2(uSeed + t * 0.6, t * 0.4)),
    fbm(np * 4.0 + vec2(7.3 - t * 0.5, uSeed + t * 0.7))
  ) - 0.5;
  vec2 duv = uv + warp * uTexel * (60.0 * uDistort);

  // --- cursor field: a CONCENTRATED spot under the pointer, off near the card edges.
  //     We compute the raw spot here; it is applied ONLY to existing ink below (it never
  //     paints new ink on bare paper — that was the "big circle" bug). ---
  float spot = 0.0;
  if (uWetOn > 0.5) {
    float d = distance(uv * ar, uWetPos * ar);
    float mx = min(uWetPos.x, 1.0 - uWetPos.x);
    float my = min(uWetPos.y, 1.0 - uWetPos.y);
    float inFrame = smoothstep(0.05, 0.13, min(mx, my)); // off near the edges
    spot = smoothstep(0.16, 0.0, d) * uWet * inFrame;    // tight, concentrated
  }

  // base soft coverage
  float cov = coverage(duv);

  // --- BLEED: push the edge outward by fbm (autonomous creep only; the cursor does NOT
  //     add coverage here, so it can't paint a disc on the paper). ---
  float spread = 0.10 + 0.22 * uAmount;
  float bleedN = fbm(np * 3.0 + vec2(uSeed * 2.0 + t * 0.8, t * 0.5));
  float bled = cov + (bleedN - 0.35) * spread;

  // --- TORN edges + STAMP threshold ---
  float tornN = fbm(np * 12.0 + vec2(3.1, uSeed + t));
  float thresh = 0.45 - (uAmount * 0.06) + (tornN - 0.5) * (0.28 + 0.18 * uAmount);
  float aa = 0.02 + 0.03 * uDistort;
  float ink = smoothstep(thresh - aa, thresh + aa, bled);

  // --- CURSOR effect: only where ink already IS. wet is the spot restricted to the
  //     ink, so bare paper is never touched. It (a) fills the stamp's pin-holes/gaps back
  //     in and (b) fattens the ragged edge slightly — the ink under the cursor looks
  //     freshly re-inked, wetter and fuller, but ONLY on the letters. ---
  float wet = spot * ink;

  // tiny speckle INSIDE the ink (unevenly inked stamp): drop a few pin-holes. The cursor
  // wet fills these back in, so the letters read solid + wet under the pointer.
  float holes = step(0.86, fbm(np * 26.0 + uSeed)) * step(0.5, ink);
  ink *= 1.0 - holes * 0.5 * (1.0 - spot);
  // fatten the edge a touch under the cursor (re-inked bleed) — gated by nearby ink so it
  // only grows the existing shape, never a free-floating blob.
  ink = max(ink, smoothstep(thresh - aa - 0.06 * spot, thresh + aa, bled) * step(0.15, cov) * spot);

  // --- PAPER: an off-white sheet with a faint fibre grain ---
  float paperN = fbm(uv * ar * 3.0 + 11.0) * 0.5 + fbm(uv * ar * 9.0) * 0.5;
  vec3 paper = uPaper * (1.0 - paperN * 0.06);

  // --- GRAIN: speckle over both ink + paper ---
  float g = hash(uv * uResolution + uTime);
  float grain = (g - 0.5) * uGrain;

  // ink colour with slight internal density variation (thicker/thinner ink). Under the
  // cursor the ink reads WETTER: fuller density (fills the thin/patchy areas) + a hair
  // darker, so hovering visibly enriches the ink on the letters.
  float density = 0.82 + 0.18 * fbm(np * 8.0 + uSeed);
  density = mix(density, 1.0, wet * 0.8);   // wet ink is fully dense
  vec3 inkC = uInk * density + grain * 0.15;
  inkC *= 1.0 - wet * 0.18;                  // slight wet-pool darkening

  vec3 col = mix(paper + grain * 0.05, inkC, ink);

  gl_FragColor = vec4(col, 1.0);
}
`;

// Ink Bleed engine (raw WebGL1). Renders ONE word as a rough stamped-ink print bled into
// paper, composed as a poster (optional stroke frame + corner marks). One full-screen
// pass over the word mask; all the bleed / stamp / torn / grain is procedural noise in
// the shader. It animates by scrolling the noise slowly (the ink creeps) and by a local
// wetness bump under the cursor. Pauses when offscreen / hidden.

import { FULL_VERT, INK_FRAG } from "./shaders";
import { makeWordMask } from "./text-mask";

export type InkParams = {
  word: string;
  amount: number;   // bleed amount (Light..Heavy), 0..1
  distort: number;  // wet / glass edge distortion, 0..1
  grain: number;    // grain amount, 0..1
  ink: [number, number, number];
  paper: [number, number, number];
};

// Default: black ink on warm paper, a rough standard bleed.
export const INK_DEFAULTS: InkParams = {
  word: "boom",
  amount: 0.55,
  distort: 0.5,
  grain: 0.18,
  ink: [0.08, 0.07, 0.07],   // near-black ink
  paper: [0.95, 0.93, 0.87], // warm off-white paper
};

export class InkBleed {
  private host: HTMLElement;
  private canvas: HTMLCanvasElement;
  private gl: WebGLRenderingContext | null = null;
  private prog: WebGLProgram | null = null;
  private loc: Record<string, WebGLUniformLocation | null> = {};
  private quad: WebGLBuffer | null = null;
  private mask: WebGLTexture | null = null;
  private maskW = 1;
  private maskH = 1;

  private raf = 0;
  private running = false;
  private awake = false;
  private startT = 0;

  private w = 0;
  private h = 0;
  private dpr = 1;
  private fontFamily = "var(--font-kyoto), serif";
  private params: InkParams;

  // rebuild guards (the mask is the only expensive CPU step)
  private builtW = 0;
  private builtH = 0;
  private builtWord = "";
  private builtFont = "";
  private buildScheduled = 0;
  private destroyed = false;
  private painted = false;

  // cursor wetness: eased position + strength (fades in on hover, out on leave)
  private wx = 0.5;
  private wy = 0.5;
  private twx = 0.5;
  private twy = 0.5;
  private wet = 0;
  private tWet = 0;

  ok = false;

  constructor(host: HTMLElement, params?: Partial<InkParams>) {
    this.host = host;
    this.params = { ...INK_DEFAULTS, ...params };
    this.canvas = document.createElement("canvas");
    Object.assign(this.canvas.style, {
      position: "absolute",
      inset: "0",
      width: "100%",
      height: "100%",
      display: "block",
      // hidden until the first real frame so the paper host shows (and gets captured by
      // the view-transition) instead of an undrawn black canvas flashing.
      opacity: "0",
    });
    host.appendChild(this.canvas);

    const gl = this.canvas.getContext("webgl", {
      alpha: false,
      antialias: false,
      premultipliedAlpha: false,
    });
    if (!gl) return;
    this.gl = gl;

    try {
      this.prog = this.build(FULL_VERT, INK_FRAG);
    } catch {
      this.gl = null;
      return;
    }

    for (const u of [
      "uMask", "uTexel", "uResolution", "uTime", "uAspect", "uAmount", "uWet", "uWetPos",
      "uWetOn", "uGrain", "uDistort", "uInk", "uPaper", "uSeed",
    ]) {
      this.loc[u] = gl.getUniformLocation(this.prog, u);
    }

    this.quad = gl.createBuffer();
    gl.bindBuffer(gl.ARRAY_BUFFER, this.quad);
    gl.bufferData(gl.ARRAY_BUFFER, new Float32Array([-1, -1, 3, -1, -1, 3]), gl.STATIC_DRAW);
    const aPos = gl.getAttribLocation(this.prog, "aPosition");
    gl.useProgram(this.prog);
    gl.enableVertexAttribArray(aPos);
    gl.vertexAttribPointer(aPos, 2, gl.FLOAT, false, 0, 0);

    // clear to the paper colour so any pre-draw frame matches the sheet (no flash)
    gl.clearColor(this.params.paper[0], this.params.paper[1], this.params.paper[2], 1);

    this.resize();
    void this.buildMaskNow();

    this.canvas.addEventListener("pointermove", this.onMove);
    this.canvas.addEventListener("pointerenter", this.onEnter);
    this.canvas.addEventListener("pointerleave", this.onLeave);
    this.ok = true;
  }

  private build(vs: string, fs: string): WebGLProgram {
    const gl = this.gl!;
    const c = (type: number, src: string) => {
      const sh = gl.createShader(type)!;
      gl.shaderSource(sh, src);
      gl.compileShader(sh);
      if (!gl.getShaderParameter(sh, gl.COMPILE_STATUS)) {
        throw new Error(gl.getShaderInfoLog(sh) || "compile failed");
      }
      return sh;
    };
    const prog = gl.createProgram()!;
    gl.attachShader(prog, c(gl.VERTEX_SHADER, vs));
    gl.attachShader(prog, c(gl.FRAGMENT_SHADER, fs));
    gl.linkProgram(prog);
    if (!gl.getProgramParameter(prog, gl.LINK_STATUS)) {
      throw new Error(gl.getProgramInfoLog(prog) || "link failed");
    }
    return prog;
  }

  setFont(family: string) {
    if (family === this.fontFamily) return;
    this.fontFamily = family;
    this.scheduleBuild();
  }

  setParams(p: Partial<InkParams>) {
    const wordChanged = p.word !== undefined && p.word !== this.params.word;
    this.params = { ...this.params, ...p };
    if (wordChanged) this.scheduleBuild();
    else if (!this.running) this.renderOnce();
  }

  private onMove = (e: PointerEvent) => {
    const r = this.canvas.getBoundingClientRect();
    this.twx = (e.clientX - r.left) / r.width;
    this.twy = 1 - (e.clientY - r.top) / r.height;
    this.tWet = 1;
    this.wake();
  };
  private onEnter = () => { this.tWet = 1; this.wake(); };
  private onLeave = () => { this.tWet = 0; this.wake(); };

  private wake() {
    if (this.awake && !this.running) this.start();
  }

  resize() {
    const r = this.host.getBoundingClientRect();
    // cap DPR at 1.5: the grungy ink hides the lower resolution and it roughly halves the
    // fragment work vs. 2x on retina, so the continuous breathing stays smooth.
    this.dpr = Math.min(1.5, window.devicePixelRatio || 1);
    this.w = r.width;
    this.h = r.height;
    const cw = Math.max(1, Math.round(this.w * this.dpr));
    const ch = Math.max(1, Math.round(this.h * this.dpr));
    if (this.canvas.width !== cw || this.canvas.height !== ch) {
      this.canvas.width = cw;
      this.canvas.height = ch;
      this.gl?.viewport(0, 0, cw, ch);
      this.scheduleBuild();
    }
  }

  // cap mask resolution so the CPU rasterize stays cheap; the noise hides the softness.
  private maskSize(): [number, number] {
    const MAX_W = 1400;
    const mw = Math.max(2, Math.min(MAX_W, Math.round(this.w * this.dpr)));
    const mh = Math.max(2, Math.round(mw * (this.h / Math.max(1, this.w))));
    return [mw, mh];
  }

  private scheduleBuild() {
    if (!this.gl || this.destroyed) return;
    const [mw, mh] = this.maskSize();
    if (
      mw === this.builtW && mh === this.builtH &&
      this.params.word === this.builtWord && this.fontFamily === this.builtFont
    ) return;
    if (this.buildScheduled) return;
    const run = () => { this.buildScheduled = 0; void this.buildMaskNow(); };
    const ric = (window as unknown as {
      requestIdleCallback?: (cb: () => void, o?: { timeout: number }) => number;
    }).requestIdleCallback;
    this.buildScheduled = ric ? ric(run, { timeout: 200 }) : window.setTimeout(run, 0);
  }

  private async buildMaskNow() {
    const gl = this.gl;
    if (!gl || this.destroyed) return;
    if (this.buildScheduled) {
      const cic = (window as unknown as { cancelIdleCallback?: (id: number) => void })
        .cancelIdleCallback;
      if (cic) cic(this.buildScheduled);
      else window.clearTimeout(this.buildScheduled);
      this.buildScheduled = 0;
    }
    const [mw, mh] = this.maskSize();
    this.builtW = mw;
    this.builtH = mh;
    this.builtWord = this.params.word;
    this.builtFont = this.fontFamily;
    const art = await makeWordMask(this.params.word, mw, mh, this.fontFamily);
    if (!this.gl || this.destroyed) return;
    if (!this.mask) this.mask = gl.createTexture();
    gl.bindTexture(gl.TEXTURE_2D, this.mask);
    gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR);
    gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.LINEAR);
    gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE);
    gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE);
    gl.pixelStorei(gl.UNPACK_FLIP_Y_WEBGL, true);
    gl.pixelStorei(gl.UNPACK_PREMULTIPLY_ALPHA_WEBGL, false);
    gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, art);
    gl.pixelStorei(gl.UNPACK_FLIP_Y_WEBGL, false);
    this.maskW = art.width;
    this.maskH = art.height;
    if (!this.running) this.renderOnce();
  }

  start() {
    if (!this.ok) return;
    this.awake = true;
    if (this.running) return;
    this.running = true;
    this.resize();
    if (!this.startT) this.startT = performance.now();
    const loop = (now: number) => {
      if (!this.running) return;
      this.frame(now);
      this.raf = requestAnimationFrame(loop);
    };
    this.raf = requestAnimationFrame(loop);
  }

  /** Stop and forbid waking (offscreen / hidden). */
  stop() {
    this.awake = false;
    this.running = false;
    if (this.raf) cancelAnimationFrame(this.raf);
    this.raf = 0;
  }

  private renderOnce() {
    if (this.raf) return;
    this.raf = requestAnimationFrame((t) => { this.raf = 0; this.render(t); });
  }

  private frame(now: number) {
    // the spot tracks the cursor tightly (was 0.12 -> trailed behind, felt laggy)
    const k = 0.3;
    this.wx += (this.twx - this.wx) * k;
    this.wy += (this.twy - this.wy) * k;
    this.wet += (this.tWet - this.wet) * 0.18;
    this.render(now);
  }

  private render(now: number) {
    const gl = this.gl;
    if (!gl || !this.prog || !this.mask) return;
    const t = (now - this.startT) / 1000;
    const p = this.params;

    gl.useProgram(this.prog);
    gl.activeTexture(gl.TEXTURE0);
    gl.bindTexture(gl.TEXTURE_2D, this.mask);
    gl.uniform1i(this.loc.uMask, 0);
    gl.uniform2f(this.loc.uTexel, 1 / this.maskW, 1 / this.maskH);
    gl.uniform2f(this.loc.uResolution, this.canvas.width, this.canvas.height);
    gl.uniform1f(this.loc.uTime, t);
    gl.uniform1f(this.loc.uAspect, this.w / Math.max(1, this.h));
    gl.uniform1f(this.loc.uAmount, p.amount);
    gl.uniform1f(this.loc.uWet, this.wet);
    gl.uniform2f(this.loc.uWetPos, this.wx, this.wy);
    gl.uniform1f(this.loc.uWetOn, this.wet > 0.01 ? 1 : 0);
    gl.uniform1f(this.loc.uGrain, p.grain);
    gl.uniform1f(this.loc.uDistort, p.distort);
    gl.uniform3f(this.loc.uInk, p.ink[0], p.ink[1], p.ink[2]);
    gl.uniform3f(this.loc.uPaper, p.paper[0], p.paper[1], p.paper[2]);
    // seed drifts CONTINUOUSLY (not discrete jumps) so the bleed pattern keeps slowly
    // reshaping — the ink breathes / creeps into the paper without a jarring re-stamp.
    gl.uniform1f(this.loc.uSeed, t * 0.25);
    gl.drawArrays(gl.TRIANGLES, 0, 3);

    if (!this.painted) {
      this.painted = true;
      this.canvas.style.opacity = "1";
    }
  }

  /** One static frame for reduced-motion. */
  renderStill() {
    this.resize();
    void this.buildMaskNow();
    this.startT = performance.now();
    this.render(performance.now());
  }

  destroy() {
    this.destroyed = true;
    if (this.buildScheduled) {
      const cic = (window as unknown as { cancelIdleCallback?: (id: number) => void })
        .cancelIdleCallback;
      if (cic) cic(this.buildScheduled);
      else window.clearTimeout(this.buildScheduled);
      this.buildScheduled = 0;
    }
    this.stop();
    this.canvas.removeEventListener("pointermove", this.onMove);
    this.canvas.removeEventListener("pointerenter", this.onEnter);
    this.canvas.removeEventListener("pointerleave", this.onLeave);
    const gl = this.gl;
    if (gl) {
      if (this.mask) gl.deleteTexture(this.mask);
      if (this.quad) gl.deleteBuffer(this.quad);
      gl.getExtension("WEBGL_lose_context")?.loseContext();
    }
    this.canvas.remove();
  }
}

"use client";

// Ink Bleed playground — the detail-page editor. Type a word (set in Kyoto) and it stamps
// as rough bled ink live. Sliders drive the bleed Amount, the Wet distortion, and the
// Grain; a toggle turns the poster Outline frame on/off; two colours set the ink + paper.
// Remix rolls a fresh tinted ink on a matching sheet. Built on the same InkBleed engine
// the card uses, from the shared Vault control kit so it matches the site.

import { useEffect, useMemo, useRef, useState } from "react";
import { InkBleed, type InkParams } from "./engine";
import { defaultInkParams, remixInkParams, toHex, fromHex } from "./params";
import {
  PG_PREVIEW, PG_PANEL, Slider, ColorControl, GhostButton,
} from "../swirl/controls";
import { SectionLabel } from "../section-label";
import { hapticTap } from "../../lib/haptics";

const LABEL = "text-[12px] text-[var(--text-tertiary)]";

export function InkBleedPlayground() {
  const hostRef = useRef<HTMLDivElement>(null);
  const engineRef = useRef<InkBleed | null>(null);

  const [params, setParams] = useState<InkParams>(() => defaultInkParams());
  const [word, setWord] = useState("boom");

  const full = useMemo<InkParams>(() => ({ ...params, word }), [params, word]);

  // Mount the engine only when the playground scrolls into view, so the detail hero card
  // and the playground don't both spin up WebGL during the view-transition morph.
  useEffect(() => {
    const host = hostRef.current;
    if (!host) return;
    let raf = 0;
    let started = false;
    let onScreen = true;
    const sync = () => {
      const eng = engineRef.current;
      if (!eng) return;
      if (onScreen) eng.start();
      else eng.stop();
    };
    const build = () => {
      if (started) return;
      started = true;
      raf = requestAnimationFrame(() => {
        const eng = new InkBleed(host, full);
        if (!eng.ok) return;
        engineRef.current = eng;
        eng.start();
        if (document.fonts?.load) {
          const probe = document.createElement("span");
          probe.style.cssText = "position:absolute;visibility:hidden;font-family:var(--font-kyoto)";
          probe.textContent = "Ag";
          document.body.appendChild(probe);
          const fam = getComputedStyle(probe).fontFamily.split(",")[0].replace(/["']/g, "").trim();
          document.body.removeChild(probe);
          document.fonts.load(`500 1em "${fam}"`).then(() => eng.setFont(`"${fam}", serif`), () => {});
        }
      });
    };
    const io = new IntersectionObserver(
      (es) => {
        onScreen = es[0]?.isIntersecting ?? false;
        if (onScreen) build();
        sync();
      },
      { rootMargin: "200px" },
    );
    io.observe(host);
    const onResize = () => engineRef.current?.resize();
    window.addEventListener("resize", onResize);
    return () => {
      io.disconnect();
      cancelAnimationFrame(raf);
      window.removeEventListener("resize", onResize);
      engineRef.current?.destroy();
      engineRef.current = null;
    };
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, []);

  useEffect(() => { engineRef.current?.setParams(full); }, [full]);

  const patch = (p: Partial<InkParams>) => setParams((prev) => ({ ...prev, ...p }));
  const remix = () => {
    hapticTap();
    setParams((prev) => ({ ...prev, ...remixInkParams() }));
  };

  return (
    <div className="flex min-w-0 flex-col gap-4">
      <SectionLabel action={<GhostButton onClick={remix}>Remix</GhostButton>}>
        Playground
      </SectionLabel>

      {/* live preview */}
      <div className={`${PG_PREVIEW} aspect-[1344/620] w-full bg-[#f2efe6]`}>
        <div ref={hostRef} data-canvas-card className="absolute inset-0 h-full w-full" />
      </div>

      {/* controls */}
      <div className={PG_PANEL}>
        {/* word */}
        <div className="flex flex-col gap-2 sm:flex-row sm:items-center">
          <span className={`${LABEL} shrink-0`}>Word</span>
          <input
            value={word}
            onChange={(e) => setWord(e.target.value)}
            placeholder="type a word"
            maxLength={12}
            className="h-8 min-w-0 flex-1 rounded-lg border border-[var(--border-line)] bg-[var(--bg-page)] px-3 text-[12px] text-[var(--text-primary)] outline-none transition-colors duration-150 ease-[var(--ease-out)] placeholder:text-[var(--text-tertiary)] hover:border-[var(--border-ring)] focus:border-[var(--border-ring)] sm:ml-auto sm:w-[170px] sm:flex-none"
          />
        </div>

        {/* two columns: Bleed | Ink */}
        <div className="grid grid-cols-1 items-start gap-x-6 gap-y-5 sm:grid-cols-2">
          <div className="flex flex-col gap-3 self-start">
            <span className={LABEL}>Bleed</span>
            <Slider label="Amount" value={params.amount} min={0} max={1} step={0.01}
              format={(v) => `${(v * 100) | 0}%`} onChange={(v) => patch({ amount: v })} />
            <Slider label="Wet" value={params.distort} min={0} max={1} step={0.01}
              format={(v) => `${(v * 100) | 0}%`} onChange={(v) => patch({ distort: v })} />
          </div>

          <div className="flex flex-col gap-3">
            <span className={LABEL}>Ink</span>
            <ColorControl label="Ink" value={toHex(params.ink)}
              onChange={(hex) => patch({ ink: fromHex(hex) })} />
            <ColorControl label="Paper" value={toHex(params.paper)}
              onChange={(hex) => patch({ paper: fromHex(hex) })} />
          </div>
        </div>
      </div>
    </div>
  );
}

/* Typer — the styling for the character reveal. The engine (typer.ts) swaps each
   char's class between these states; the CSS is what makes a state look like a
   solid pill, an outlined pill, an accent block, and so on. The nicest trick is
   pill-merging: adjacent same-state chars round only at the two outer ends, so a
   run of them reads as one continuous rounded bar, not separate boxes.

   Everything is themed from four custom properties, so a preset can recolor the
   text, the pill fills, AND the borders all at once:
     --typer-fg          the base ink (plain letters, ink pills, ink borders)
     --typer-bg          the page / knockout color inside a filled pill
     --typer-accent      the accent surface (accent pill fills, accent borders)
     --typer-accent-ink  the text color that sits ON an accent fill
   Set them on the [data-typer] element or any ancestor. */

[data-typer] {
  --typer-fg: #1b1b1b;
  --typer-bg: #fcfcfc;
  --typer-accent: #12a150;
  --typer-accent-ink: #fcfcfc;
  --typer-radius: 5px;
}

/* before the reveal runs, the whole line is invisible (chars are charInit). */
[data-typer][data-typer-type="initial"] {
  opacity: 0;
}

[data-typer] .word {
  white-space: pre; /* keep intra-word spacing exact */
}

[data-typer] .word .char {
  box-sizing: content-box;
  display: inline-block;
  color: var(--typer-fg);
  background: transparent;
  transition: none; /* state changes are discrete frames, not tweened */
}

/* not yet revealed → transparent (holds the layout, shows nothing). */
[data-typer] .word .char.charInit {
  color: transparent;
}

/* ── Solid pill: ink block, knockout text. Adjacent fills merge into one bar. ── */
[data-typer] .word .char.charFill {
  color: var(--typer-bg);
  background: var(--typer-fg);
  border-radius: var(--typer-radius);
}
[data-typer] .word .char.charFill:has(+ .charFill) {
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}
[data-typer] .word .char.charFill + .charFill {
  border-radius: 0;
}
[data-typer] .word .char.charFill + .charFill:last-child,
[data-typer] .word .char.charFill + .charFill:has(+ :not(.charFill)) {
  border-radius: 0 var(--typer-radius) var(--typer-radius) 0;
}

/* ── Inverse: ink knockout, no rounding (a hard block). ── */
[data-typer] .word .char.charInverse {
  color: var(--typer-bg);
  background: var(--typer-fg);
}

/* ── Accent: colored LETTERS on the page (no pill) — the accent reaching the
      text itself, not just a fill. ── */
[data-typer] .word .char.charAccent {
  color: var(--typer-accent);
  background: transparent;
}

/* ── Accent inverse: an accent PILL with knockout text sitting on it. Merges into
      a bar like the ink fill. ── */
[data-typer] .word .char.charAccentInverse {
  color: var(--typer-accent-ink);
  background: var(--typer-accent);
  border-radius: var(--typer-radius);
}
[data-typer] .word .char.charAccentInverse:has(+ .charAccentInverse) {
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}
[data-typer] .word .char.charAccentInverse + .charAccentInverse {
  border-radius: 0;
}
[data-typer] .word .char.charAccentInverse + .charAccentInverse:last-child,
[data-typer]
  .word
  .char.charAccentInverse
  + .charAccentInverse:has(+ :not(.charAccentInverse)) {
  border-radius: 0 var(--typer-radius) var(--typer-radius) 0;
}

/* ── Accent fill: a briefly solid block of pure accent (both fill and text). ── */
[data-typer] .word .char.charAccentFill {
  color: var(--typer-accent);
  background: var(--typer-accent);
}

/* ── Outlined pill: an ACCENT border box around ink text; a run merges like the
      solid pill, but by dropping the inner vertical borders instead of the fill. ── */
[data-typer] .word .char.charBorder {
  position: relative;
  color: var(--typer-fg);
}
[data-typer] .word .char.charBorder::after {
  content: "";
  display: inline-block;
  position: absolute;
  inset: 0;
  border: 1px solid var(--typer-accent);
  border-radius: var(--typer-radius);
}
[data-typer] .word .char.charBorder:has(+ .charBorder)::after {
  border-right: 1px solid transparent;
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}
[data-typer] .word .char.charBorder + .charBorder::after {
  border-left: 1px solid transparent;
  border-right: 1px solid transparent;
  border-radius: 0;
}
[data-typer] .word .char.charBorder + .charBorder:last-child::after,
[data-typer] .word .char.charBorder + .charBorder:has(+ :not(.charBorder))::after {
  border-left: 1px solid transparent;
  border-right: 1px solid var(--typer-accent);
  border-radius: 0 var(--typer-radius) var(--typer-radius) 0;
}

@media (prefers-reduced-motion: reduce) {
  /* no reveal animation: show the text plainly. */
  [data-typer][data-typer-type="initial"] {
    opacity: 1;
  }
  [data-typer] .word .char.charInit {
    color: var(--typer-fg);
  }
}

<!-- Typer — a stacked block of lines that reveal character by character, each glyph
     rippling through randomized pill/highlight/border states before it settles.
     Load typer.css, put one [data-typer] element per line, then drive them with a
     TyperGroup (from typer.ts) for the top-to-bottom cascade.

     Colors are three custom properties (set them on any ancestor):
       --typer-fg  ink/pill · --typer-bg  page/knockout · --typer-accent  highlight -->

<link rel="stylesheet" href="typer.css" />

<div class="typer-block" style="display:flex;flex-direction:column;align-items:center;gap:4px;text-align:center;font-weight:600;font-size:clamp(1.4rem,4vw,2.4rem)">
  <span data-typer data-typer-type="initial">design engineered by me :)</span>
</div>

<!-- typer.ts is an ES module. Instantiate a TyperGroup over the lines and reveal
     them; the group staggers each line so the block cascades in top-to-bottom. -->
<script type="module">
  import { TyperGroup } from "./typer.js"; // built from typer.ts

  const lines = [...document.querySelectorAll("[data-typer]")];
  const group = new TyperGroup(
    lines,
    { fps: 20, cycles: 3 }, // tune speed and how many states each char rolls through
    0.15, // seconds of stagger between consecutive lines
  );

  // reveal once the block scrolls into view
  const io = new IntersectionObserver((entries) => {
    if (entries[0].isIntersecting) {
      group.in();
      io.disconnect();
    }
  }, { threshold: 0.4 });
  io.observe(document.querySelector(".typer-block"));
</script>

import { WORDS, INITIAL, randomSwatchAvoiding, type Swatch } from "./palette";
import { measureWord, REF_FS, BASELINE_Y, type WordMetrics } from "./measure";

const SVGNS = "http://www.w3.org/2000/svg";

const FLY_STAGGER = 130;
const FLY_MS = 760;
const SHUFFLE_MIN = 1300;
const SHUFFLE_MAX = 3200;
const COLOR_MS = 520;

const PAD_Y = 6;
const PAD_X = 2;

const BAND_ASCENT = 82;
const BAND_DESCENT = 26;

type LetterRect = {
  el: SVGRectElement;
  x0: number;
  x1: number;
  baseY: number;
  baseH: number;
  hovered: boolean;
};

type Tile = {
  outer: HTMLSpanElement;
  svg: SVGSVGElement;
  rects: LetterRect[];
  textEl: SVGTextElement;
  word: string;
  swatch: Swatch;
  nextShuffle: number;
};

export class DesignTiles {
  private host: HTMLElement;
  private root: HTMLDivElement;
  private bar: HTMLDivElement;
  private tiles: Tile[] = [];
  private fontFamily = "sans-serif";

  private raf = 0;
  private running = false;
  private disposed = false;
  private revealed = false;
  private now = 0;

  private ro?: ResizeObserver;
  private cleanup: (() => void)[] = [];

  constructor(host: HTMLElement) {
    this.host = host;

    const root = document.createElement("div");
    Object.assign(root.style, {
      position: "absolute",
      inset: "0",
      display: "flex",
      alignItems: "center",
      justifyContent: "center",
      fontFamily: "var(--font-kyoto), var(--font-neue-montreal), system-ui, sans-serif",
      userSelect: "none",
    });
    root.setAttribute("aria-label", WORDS.join(" "));

    this.fontFamily =
      getComputedStyle(root).fontFamily || "var(--font-kyoto), sans-serif";

    const bar = document.createElement("div");

    Object.assign(bar.style, { display: "flex", alignItems: "center" });

    WORDS.forEach((word, i) => {
      const sw = INITIAL[i] ?? randomSwatchAvoiding([]);

      const outer = document.createElement("span");
      Object.assign(outer.style, {
        display: "grid",
        gridTemplateColumns: "0fr",

        transition: `grid-template-columns ${FLY_MS}ms cubic-bezier(.16,1,.3,1)`,
      });
      const clip = document.createElement("span");
      clip.style.overflow = "hidden";

      const svg = document.createElementNS(SVGNS, "svg");
      Object.assign(svg.style, {
        display: "block",

        height: "clamp(1.6rem, 4vw, 2.9rem)",
        opacity: "0",
        transition: `opacity ${Math.round(FLY_MS * 0.8)}ms ease`,
      });

      const gBg = document.createElementNS(SVGNS, "g");
      const textEl = document.createElementNS(SVGNS, "text");
      textEl.setAttribute("font-family", this.fontFamily);
      textEl.setAttribute("font-weight", "500");
      textEl.setAttribute("font-size", String(REF_FS));
      textEl.setAttribute("dominant-baseline", "alphabetic");
      textEl.style.fill = sw.fg;
      textEl.style.transition = `fill ${COLOR_MS}ms ease`;
      textEl.textContent = word;

      svg.appendChild(gBg);
      svg.appendChild(textEl);
      clip.appendChild(svg);
      outer.appendChild(clip);
      bar.appendChild(outer);

      this.tiles.push({
        outer,
        svg,
        rects: [],
        textEl,
        word,
        swatch: sw,
        nextShuffle: 0,
      });
    });

    root.appendChild(bar);
    host.appendChild(root);
    this.root = root;
    this.bar = bar;

    this.layout();
    this.bindEvents();
  }

  private layout() {
    for (const tile of this.tiles) {
      const m = measureWord(tile.word, this.fontFamily, "500");

      for (const r of tile.rects) r.el.remove();
      tile.rects = [];
      if (!m) {

        this.buildFallback(tile);
        continue;
      }
      this.buildRects(tile, m);
    }
  }

  private buildRects(tile: Tile, m: WordMetrics) {
    const gBg = tile.svg.firstChild as SVGGElement;

    const bandTop = BASELINE_Y - BAND_ASCENT;
    const bandBottom = BASELINE_Y + BAND_DESCENT;

    for (let i = 0; i < m.glyphs.length; i++) {
      const g = m.glyphs[i];
      if (g.ch === " ") continue;
      const top = Math.max(bandTop, g.top - PAD_Y);
      const bottom = Math.min(bandBottom, g.bottom + PAD_Y);

      const next = m.glyphs[i + 1];
      const right = next ? next.x : g.x + g.w;
      const left = g.x - (i === 0 ? PAD_X : 0);
      const width = right - left + PAD_X;
      const rect = document.createElementNS(SVGNS, "rect");
      rect.setAttribute("x", String(left));
      rect.setAttribute("y", String(top));
      rect.setAttribute("width", String(width));
      rect.setAttribute("height", String(bottom - top));
      rect.style.fill = tile.swatch.bg;

      rect.style.transition = `fill ${COLOR_MS}ms ease, y 160ms ease, height 160ms ease`;
      gBg.appendChild(rect);
      tile.rects.push({
        el: rect,
        x0: left,
        x1: left + width,
        baseY: top,
        baseH: bottom - top,
        hovered: false,
      });
    }

    tile.textEl.setAttribute("x", "0");
    tile.textEl.setAttribute("y", String(BASELINE_Y));
    const vbX = -PAD_X;
    const vbW = m.width + PAD_X * 2;
    const vbY = bandTop;
    const vbH = bandBottom - bandTop;
    tile.svg.setAttribute("viewBox", `${vbX} ${vbY} ${vbW} ${vbH}`);
    tile.svg.setAttribute("preserveAspectRatio", "xMidYMid meet");

    tile.svg.removeAttribute("width");
    tile.svg.removeAttribute("height");
    tile.svg.style.width = "auto";
  }

  private buildFallback(tile: Tile) {
    const gBg = tile.svg.firstChild as SVGGElement;
    const rect = document.createElementNS(SVGNS, "rect");
    rect.setAttribute("x", "0");
    rect.setAttribute("y", "0");
    rect.setAttribute("width", "100");
    rect.setAttribute("height", "100");
    rect.style.fill = tile.swatch.bg;
    gBg.appendChild(rect);
    tile.rects.push({ el: rect, x0: 0, x1: 100, baseY: 0, baseH: 100, hovered: false });
    tile.svg.setAttribute("viewBox", "0 0 100 100");
  }

  private bindEvents() {
    this.tiles.forEach((tile) => {

      const onEnter = () => this.recolor(tile);
      tile.svg.addEventListener("pointerenter", onEnter);

      const onMove = (e: PointerEvent) => this.hoverLetter(tile, e);
      const onLeave = () => this.clearHover(tile);
      tile.svg.addEventListener("pointermove", onMove);
      tile.svg.addEventListener("pointerleave", onLeave);
      this.cleanup.push(() => {
        tile.svg.removeEventListener("pointerenter", onEnter);
        tile.svg.removeEventListener("pointermove", onMove);
        tile.svg.removeEventListener("pointerleave", onLeave);
      });
    });

    this.ro = new ResizeObserver(() => this.layout());
    this.ro.observe(this.host);
  }

  private hoverLetter(tile: Tile, e: PointerEvent) {
    const rect = tile.svg.getBoundingClientRect();
    if (rect.width < 1) return;
    const vb = tile.svg.viewBox.baseVal;
    const scale = vb.width / rect.width;
    const grow = 2 * scale;
    const px = vb.x + ((e.clientX - rect.left) / rect.width) * vb.width;

    for (const r of tile.rects) {
      const isHit = px >= r.x0 && px < r.x1;
      if (isHit === r.hovered) continue;
      r.hovered = isHit;
      if (isHit) {
        r.el.style.y = `${r.baseY - grow / 2}px`;
        r.el.style.height = `${r.baseH + grow}px`;
      } else {
        r.el.style.y = `${r.baseY}px`;
        r.el.style.height = `${r.baseH}px`;
      }
    }
  }

  private clearHover(tile: Tile) {
    for (const r of tile.rects) {
      if (!r.hovered) continue;
      r.hovered = false;
      r.el.style.y = `${r.baseY}px`;
      r.el.style.height = `${r.baseH}px`;
    }
  }

  private recolor(tile: Tile) {
    const used = this.tiles.filter((t) => t !== tile).map((t) => t.swatch);
    const sw = randomSwatchAvoiding(used);
    tile.swatch = sw;
    for (const r of tile.rects) r.el.style.fill = sw.bg;
    tile.textEl.style.fill = sw.fg;
  }

  refreshFont() {
    this.fontFamily = getComputedStyle(this.root).fontFamily || this.fontFamily;
    for (const tile of this.tiles) tile.textEl.setAttribute("font-family", this.fontFamily);
    this.layout();
  }

  private reveal() {
    if (this.revealed) return;
    this.revealed = true;
    this.tiles.forEach((tile, i) => {
      const delay = i * FLY_STAGGER;
      const t = window.setTimeout(() => {
        tile.outer.style.gridTemplateColumns = "1fr";
        tile.svg.style.opacity = "1";
      }, delay);
      this.cleanup.push(() => window.clearTimeout(t));
    });
    const assembledAt = this.tiles.length * FLY_STAGGER + FLY_MS;
    this.tiles.forEach((tile) => {
      tile.nextShuffle =
        performance.now() + assembledAt + SHUFFLE_MIN + Math.random() * (SHUFFLE_MAX - SHUFFLE_MIN);
    });
  }

  start() {
    if (this.running || this.disposed) return;
    this.running = true;
    this.reveal();
    this.raf = requestAnimationFrame(this.loop);
  }

  stop() {
    this.running = false;
    if (this.raf) cancelAnimationFrame(this.raf);
    this.raf = 0;
  }

  private loop = () => {
    if (!this.running) return;
    this.now = performance.now();
    for (const tile of this.tiles) {
      if (tile.nextShuffle === 0) continue;
      if (this.now >= tile.nextShuffle) {
        this.recolor(tile);
        tile.nextShuffle = this.now + SHUFFLE_MIN + Math.random() * (SHUFFLE_MAX - SHUFFLE_MIN);
      }
    }
    this.raf = requestAnimationFrame(this.loop);
  };

  renderStill() {
    this.revealed = true;
    this.tiles.forEach((tile) => {
      tile.outer.style.transition = "none";
      tile.outer.style.gridTemplateColumns = "1fr";
      tile.svg.style.transition = "none";
      tile.svg.style.opacity = "1";
    });
  }

  destroy() {
    this.disposed = true;
    this.stop();
    this.ro?.disconnect();
    this.cleanup.forEach((fn) => fn());
    this.root.parentNode?.removeChild(this.root);
    void this.bar;
  }
}

export interface TextTexture {
  canvas: HTMLCanvasElement;
  cssW: number;
  cssH: number;
}

export interface TextOpts {
  line: string;
  font: string;
  fill: string;
  cardW: number;
  cardH: number;
  dpr?: number;
}

export function renderText(o: TextOpts): TextTexture {
  const dpr = o.dpr ?? Math.min(window.devicePixelRatio || 1, 2);
  const cssW = Math.max(1, Math.round(o.cardW));
  const cssH = Math.max(1, Math.round(o.cardH));

  const canvas = document.createElement("canvas");
  canvas.width = Math.round(cssW * dpr);
  canvas.height = Math.round(cssH * dpr);
  const ctx = canvas.getContext("2d")!;
  ctx.scale(dpr, dpr);

  ctx.fillStyle = o.fill;
  ctx.textAlign = "center";
  ctx.textBaseline = "middle";
  const maxW = cssW * 0.86;
  let fontSize = Math.min(58, cssW * 0.1);
  for (let i = 0; i < 24; i++) {
    ctx.font = `500 ${fontSize}px ${o.font}`;
    if (ctx.measureText(o.line).width <= maxW || fontSize <= 16) break;
    fontSize -= 2;
  }
  ctx.fillText(o.line, cssW / 2, cssH / 2);

  return { canvas, cssW, cssH };
}

export const REVEAL_VERT =  `
  attribute vec2 aPosition;
  attribute vec2 aUV;
  varying vec2 vUV;
  void main(){
    vUV = aUV;
    gl_Position = vec4(aPosition, 0.0, 1.0);
  }
`;

export const REVEAL_FRAG =  `
  precision highp float;
  uniform sampler2D uTex;
  uniform vec2  uTexel;
  uniform float uProgress;
  uniform float uMaxBlur;
  uniform vec3  uEdge;
  uniform float uTime;
  uniform float uAspect;
  uniform float uSeed;
  varying vec2 vUV;

  float hash(vec2 p){ return fract(sin(dot(p, vec2(41.3, 289.1))) * 43758.5453); }
  float noise(vec2 p){
    vec2 i = floor(p), f = fract(p);
    f = f*f*(3.0-2.0*f);
    float a = hash(i), b = hash(i+vec2(1,0)), c = hash(i+vec2(0,1)), d = hash(i+vec2(1,1));
    return mix(mix(a,b,f.x), mix(c,d,f.x), f.y);
  }

  vec4 blurTex(vec2 uv, float radius){
    if (radius < 0.35) return texture2D(uTex, uv);
    vec2 r1 = uTexel * radius;
    vec2 r2 = uTexel * radius * 2.0;
    vec4 sum = texture2D(uTex, uv) * 1.0;
    float wsum = 1.0;

    for (int i = 0; i < 8; i++){
      float a = float(i) * 0.785398;
      vec2 dir = vec2(cos(a), sin(a));
      sum += texture2D(uTex, uv + dir * r1) * 0.75; wsum += 0.75;
      sum += texture2D(uTex, uv + dir * r2) * 0.5;  wsum += 0.5;
    }
    return sum / wsum;
  }

  float fbm(vec2 p){
    float v = 0.0, amp = 0.5;
    for (int i = 0; i < 4; i++){
      v += amp * noise(p);
      p *= 2.03;
      amp *= 0.5;
    }
    return v;
  }

  void main(){

    if (uProgress >= 0.999) { gl_FragColor = texture2D(uTex, vUV); return; }

    float p = uProgress * 1.3;

    vec2 sd = vec2(uSeed * 1.7, uSeed * -1.3);
    vec2 rc = (vUV - 0.5) * vec2(uAspect, 1.0);
    rc += vec2(sin(uSeed * 2.3), cos(uSeed * 1.9)) * 0.12;
    float radial = length(rc) * 0.9;
    vec2 warp = vec2(fbm(vUV * 3.2 + sd + uTime * 0.05 + 11.0),
                     fbm(vUV * 3.2 - sd - uTime * 0.04 - 7.0)) - 0.5;
    float turb = fbm(vUV * 5.5 + warp * 1.7 + sd + uTime * 0.06);
    float mask = mix(radial, turb, 0.7);

    float reveal = smoothstep(p + 0.34, p - 0.34, mask);
    if (reveal <= 0.0) discard;

    float blurAmt = smoothstep(p - 0.5, p + 0.34, mask);

    vec2 drift = (-rc * 0.010 + vec2(0.0, 0.006)) * blurAmt;
    float grow = 1.0 + 0.03 * blurAmt;
    vec2 suv = (vUV - 0.5) / grow + 0.5 + drift;

    float radius = blurAmt * uMaxBlur;
    vec4 tex = blurTex(suv, radius);

    float fw = 0.30;
    float flare = smoothstep(p - fw, p, mask) * smoothstep(p + fw, p, mask);
    flare *= 1.0 - smoothstep(0.8, 1.0, uProgress);

    vec4 wide = blurTex(suv, uMaxBlur * 1.3);
    float halo = wide.a;

    vec3 rgb = tex.rgb;

    vec3 glow = mix(uEdge, vec3(1.0), 0.3);
    rgb += glow * flare * (tex.a * 0.6 + halo * 0.5);
    float alpha = max(tex.a * reveal, halo * flare * 0.5);

    gl_FragColor = vec4(rgb, alpha);
  }
`;

import { REVEAL_VERT, REVEAL_FRAG } from "./reveal-shader";

export class RevealGL {
  readonly canvas: HTMLCanvasElement;
  private gl: WebGLRenderingContext;
  private prog: WebGLProgram;
  private quad: WebGLBuffer;
  private loc: Record<string, WebGLUniformLocation | null> = {};
  private aPos = 0;
  private aUV = 0;
  private tex: WebGLTexture | null = null;
  private texW = 1;
  private texH = 1;
  private ok = false;

  constructor() {
    this.canvas = document.createElement("canvas");
    Object.assign(this.canvas.style, {
      position: "absolute",
      inset: "0",
      width: "100%",
      height: "100%",
      display: "block",
    });
    const gl = this.canvas.getContext("webgl", { alpha: true, premultipliedAlpha: false });
    if (!gl) {
      this.gl = null as unknown as WebGLRenderingContext;
      this.prog = null as unknown as WebGLProgram;
      this.quad = null as unknown as WebGLBuffer;
      return;
    }
    this.gl = gl;
    this.prog = this.build(REVEAL_VERT, REVEAL_FRAG);
    this.aPos = gl.getAttribLocation(this.prog, "aPosition");
    this.aUV = gl.getAttribLocation(this.prog, "aUV");
    for (const u of ["uTex", "uTexel", "uProgress", "uMaxBlur", "uEdge", "uTime", "uAspect", "uSeed"]) {
      this.loc[u] = gl.getUniformLocation(this.prog, u);
    }

    const data = new Float32Array([
      -1, -1, 0, 1,
       1, -1, 1, 1,
      -1,  1, 0, 0,
       1,  1, 1, 0,
    ]);
    this.quad = gl.createBuffer()!;
    gl.bindBuffer(gl.ARRAY_BUFFER, this.quad);
    gl.bufferData(gl.ARRAY_BUFFER, data, gl.STATIC_DRAW);
    gl.enable(gl.BLEND);
    gl.blendFunc(gl.SRC_ALPHA, gl.ONE_MINUS_SRC_ALPHA);
    this.ok = true;
  }

  get available() {
    return this.ok;
  }

  private build(vs: string, fs: string): WebGLProgram {
    const gl = this.gl;
    const c = (type: number, src: string) => {
      const sh = gl.createShader(type)!;
      gl.shaderSource(sh, src);
      gl.compileShader(sh);
      if (!gl.getShaderParameter(sh, gl.COMPILE_STATUS)) {
        throw new Error(gl.getShaderInfoLog(sh) || "shader compile failed");
      }
      return sh;
    };
    const p = gl.createProgram()!;
    gl.attachShader(p, c(gl.VERTEX_SHADER, vs));
    gl.attachShader(p, c(gl.FRAGMENT_SHADER, fs));
    gl.linkProgram(p);
    if (!gl.getProgramParameter(p, gl.LINK_STATUS)) {
      throw new Error(gl.getProgramInfoLog(p) || "program link failed");
    }
    return p;
  }

  setTexture(art: HTMLCanvasElement) {
    if (!this.ok) return;
    const gl = this.gl;
    if (this.tex) gl.deleteTexture(this.tex);
    const tex = gl.createTexture()!;
    gl.bindTexture(gl.TEXTURE_2D, tex);
    gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR);
    gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.LINEAR);
    gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE);
    gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE);
    gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, art);
    this.tex = tex;
    this.texW = art.width;
    this.texH = art.height;
  }

  resize(w: number, h: number, dpr: number) {
    this.canvas.width = Math.max(1, Math.round(w * dpr));
    this.canvas.height = Math.max(1, Math.round(h * dpr));
    if (this.ok) this.gl.viewport(0, 0, this.canvas.width, this.canvas.height);
  }

  draw(
    progress: number,
    maxBlur: number,
    edge: [number, number, number],
    time: number,
    aspect: number,
    seed: number,
  ) {
    if (!this.ok || !this.tex) return;
    const gl = this.gl;
    gl.clearColor(0, 0, 0, 0);
    gl.clear(gl.COLOR_BUFFER_BIT);
    gl.useProgram(this.prog);
    gl.bindBuffer(gl.ARRAY_BUFFER, this.quad);
    gl.enableVertexAttribArray(this.aPos);
    gl.vertexAttribPointer(this.aPos, 2, gl.FLOAT, false, 16, 0);
    gl.enableVertexAttribArray(this.aUV);
    gl.vertexAttribPointer(this.aUV, 2, gl.FLOAT, false, 16, 8);
    gl.activeTexture(gl.TEXTURE0);
    gl.bindTexture(gl.TEXTURE_2D, this.tex);
    gl.uniform1i(this.loc.uTex, 0);
    gl.uniform2f(this.loc.uTexel, 1 / this.texW, 1 / this.texH);
    gl.uniform1f(this.loc.uProgress, progress);
    gl.uniform1f(this.loc.uMaxBlur, maxBlur);
    gl.uniform3f(this.loc.uEdge, edge[0], edge[1], edge[2]);
    gl.uniform1f(this.loc.uTime, time);
    gl.uniform1f(this.loc.uAspect, aspect);
    gl.uniform1f(this.loc.uSeed, seed);
    gl.drawArrays(gl.TRIANGLE_STRIP, 0, 4);
  }

  destroy() {
    if (!this.ok) return;
    const gl = this.gl;
    if (this.tex) gl.deleteTexture(this.tex);
    gl.getExtension("WEBGL_lose_context")?.loseContext();
  }
}

import { PANELS } from "./panels";
import { RevealGL } from "./gl";
import { renderText } from "./text-texture";

const HOLD_MS = 900;
const OUT_HOLD_MS = 40;
const BG_MS = 320;
const MAX_BLUR = 18;

const K_IN = 42;
const K_OUT = 60;
const DAMP = 1.0;

const REVEALED_AT = 0.992;
const GONE_AT = 0.02;

function resolveFamily(cssFamily: string): string {
  const probe = document.createElement("span");
  probe.style.cssText = "position:absolute;visibility:hidden";
  probe.style.fontFamily = cssFamily;
  probe.textContent = "Ag";
  document.body.appendChild(probe);
  const fam = getComputedStyle(probe).fontFamily || "serif";
  document.body.removeChild(probe);
  return fam;
}

function springStep(
  pos: number,
  vel: number,
  target: number,
  k: number,
  damp: number,
  dt: number,
): [number, number] {
  const c = 2 * Math.sqrt(k) * damp;
  const accel = -k * (pos - target) - c * vel;
  const v = vel + accel * dt;
  const x = pos + v * dt;
  return [x, v];
}

function hexToRgb(hex: string): [number, number, number] {
  let h = hex.replace("#", "");
  if (h.length === 3) h = h.split("").map((c) => c + c).join("");
  const n = parseInt(h, 16);
  return [((n >> 16) & 255) / 255, ((n >> 8) & 255) / 255, (n & 255) / 255];
}

export class BlurReveal {
  private host: HTMLElement;
  private stage: HTMLDivElement;
  private gl: RevealGL | null = null;
  private useGL = false;
  private fallback: HTMLDivElement | null = null;
  private fontFamily = "serif";

  private index = 0;
  private W = 1;
  private H = 1;
  private dpr = 1;

  private raf = 0;
  private running = false;
  private disposed = false;
  private now = 0;
  private last = 0;
  private clock = 0;

  private phase: "in" | "hold" | "out" = "in";
  private phaseStart = 0;
  private progress = 0;
  private vel = 0;
  private target = 1;
  private edge: [number, number, number] = [1, 1, 1];
  private seed = Math.random() * 100;

  private ro?: ResizeObserver;

  constructor(host: HTMLElement) {
    this.host = host;
    this.dpr = Math.min(window.devicePixelRatio || 1, 2);
    this.measure();

    const stage = document.createElement("div");
    Object.assign(stage.style, {
      position: "absolute",
      inset: "0",
      background: PANELS[0].bg,
      transition: `background-color ${BG_MS}ms ease`,
      overflow: "hidden",
      fontFamily: "var(--font-neue-corp), system-ui, sans-serif",
    });
    host.appendChild(stage);
    this.stage = stage;
    this.fontFamily = resolveFamily("var(--font-neue-corp), system-ui, sans-serif");

    const gl = new RevealGL();
    if (gl.available) {
      this.gl = gl;
      this.useGL = true;
      gl.resize(this.W, this.H, this.dpr);
      stage.appendChild(gl.canvas);
    }

    this.ro = new ResizeObserver(() => this.onResize());
    this.ro.observe(host);
  }

  private measure() {
    this.W = this.host.clientWidth || 1;
    this.H = this.host.clientHeight || 1;
  }

  private onResize() {
    this.measure();
    if (this.W < 2 || this.H < 2) return;
    this.gl?.resize(this.W, this.H, this.dpr);
    this.mountPanel(this.index);
  }

  refreshFont() {
    this.fontFamily = resolveFamily("var(--font-neue-corp), system-ui, sans-serif");
    this.mountPanel(this.index);
  }

  private mountPanel(i: number) {
    const p = PANELS[i];
    this.stage.style.background = p.bg;
    this.edge = hexToRgb(p.fg);
    if (this.useGL && this.gl) {
      const t = renderText({
        line: p.line,
        font: this.fontFamily,
        fill: p.fg,
        cardW: this.W,
        cardH: this.H,
        dpr: this.dpr,
      });
      this.gl.setTexture(t.canvas);
    } else {
      this.mountFallback(p.line, p.fg);
    }
  }

  private mountFallback(line: string, fg: string) {
    if (!this.fallback) {
      const el = document.createElement("div");
      Object.assign(el.style, {
        position: "absolute",
        inset: "0",
        display: "flex",
        alignItems: "center",
        justifyContent: "center",
        padding: "8% 10%",
        fontStyle: "italic",
        fontWeight: "500",
        fontSize: "clamp(1.9rem, 7vw, 4rem)",
        textAlign: "center",
        transition: "opacity 300ms ease, filter 300ms ease",
      });
      this.stage.appendChild(el);
      this.fallback = el;
    }
    this.fallback.textContent = line;
    this.fallback.style.color = fg;
  }

  start() {
    if (this.running || this.disposed) return;
    this.running = true;
    this.mountPanel(this.index);
    this.phase = "in";
    this.phaseStart = performance.now();
    this.last = this.phaseStart;
    this.progress = 0;
    this.vel = 0;
    this.target = 1;
    this.raf = requestAnimationFrame(this.loop);
  }

  stop() {
    this.running = false;
    if (this.raf) cancelAnimationFrame(this.raf);
    this.raf = 0;
  }

  private loop = () => {
    if (!this.running) return;
    this.now = performance.now();

    const dt = Math.min(0.05, Math.max(0.001, (this.now - this.last) / 1000));
    this.last = this.now;
    this.clock += dt;

    const k = this.target > 0.5 ? K_IN : K_OUT;
    [this.progress, this.vel] = springStep(this.progress, this.vel, this.target, k, DAMP, dt);

    if (this.phase === "in") {

      if (this.progress >= REVEALED_AT) {
        this.phase = "hold";
        this.phaseStart = this.now;
      }
    } else if (this.phase === "hold") {
      if (this.now - this.phaseStart >= HOLD_MS) {
        this.phase = "out";
        this.phaseStart = this.now;
        this.target = 0;
      }
    } else {

      if (this.progress <= GONE_AT && this.now - this.phaseStart >= OUT_HOLD_MS) {
        this.index = (this.index + 1) % PANELS.length;
        this.seed = Math.random() * 100;
        this.mountPanel(this.index);
        this.phase = "in";
        this.phaseStart = this.now;
        this.progress = 0;
        this.vel = 0;
        this.target = 1;
      }
    }

    const clampP = Math.max(0, Math.min(1, this.progress));
    if (this.useGL && this.gl) {
      this.gl.draw(clampP, MAX_BLUR, this.edge, this.clock, this.W / Math.max(1, this.H), this.seed);
    } else if (this.fallback) {

      this.fallback.style.opacity = String(clampP);
      this.fallback.style.filter = `blur(${(1 - clampP) * 10}px)`;
    }

    this.raf = requestAnimationFrame(this.loop);
  };

  renderStill() {
    this.measure();
    this.gl?.resize(this.W, this.H, this.dpr);
    this.mountPanel(this.index);
    this.progress = 1;
    if (this.useGL && this.gl) this.gl.draw(1, 0, this.edge, 0, this.W / Math.max(1, this.H), this.seed);
    else if (this.fallback) { this.fallback.style.opacity = "1"; this.fallback.style.filter = "none"; }
  }

  destroy() {
    this.disposed = true;
    this.stop();
    this.ro?.disconnect();
    this.gl?.destroy();
    this.stage.parentNode?.removeChild(this.stage);
  }
}

// A small set of geometric symbol glyphs, drawn from scratch as 2D-canvas paths on
// a 32x32 grid. Used by the "symbols" effect: each brightness band stamps one of
// these tiled across the image, tinted with the band's colour. Authored here (not
// imported) so the set is fully self-contained and easy to extend.

export type GlyphDraw = (ctx: CanvasRenderingContext2D, s: number) => void;

const C = 16; // centre of the 32 grid (scaled to `s` at draw time)

// Each glyph is a function that paints a black shape on a transparent square. The
// caller scales the context so coordinates are in the 0..32 design space.
export const GLYPHS: { name: string; draw: GlyphDraw }[] = [
  { name: "empty", draw: () => {} },

  {
    name: "dot",
    draw: (ctx) => {
      ctx.beginPath();
      ctx.arc(C, C, 5, 0, Math.PI * 2);
      ctx.fill();
    },
  },
  {
    name: "ring",
    draw: (ctx) => {
      ctx.beginPath();
      ctx.arc(C, C, 9, 0, Math.PI * 2);
      ctx.arc(C, C, 5.5, 0, Math.PI * 2, true);
      ctx.fill("evenodd");
    },
  },
  {
    name: "square",
    draw: (ctx) => {
      ctx.fillRect(C - 7, C - 7, 14, 14);
    },
  },
  {
    name: "frame",
    draw: (ctx) => {
      ctx.beginPath();
      ctx.rect(C - 9, C - 9, 18, 18);
      ctx.rect(C - 5, C - 5, 10, 10);
      ctx.fill("evenodd");
    },
  },
  {
    name: "diagonal",
    draw: (ctx) => {
      ctx.lineWidth = 5;
      ctx.lineCap = "round";
      ctx.beginPath();
      ctx.moveTo(6, 26);
      ctx.lineTo(26, 6);
      ctx.stroke();
    },
  },
  {
    name: "cross",
    draw: (ctx) => {
      ctx.lineWidth = 5;
      ctx.lineCap = "round";
      ctx.beginPath();
      ctx.moveTo(7, 7);
      ctx.lineTo(25, 25);
      ctx.moveTo(25, 7);
      ctx.lineTo(7, 25);
      ctx.stroke();
    },
  },
  {
    name: "plus",
    draw: (ctx) => {
      ctx.fillRect(C - 2.5, 5, 5, 22);
      ctx.fillRect(5, C - 2.5, 22, 5);
    },
  },
  {
    name: "chevron",
    draw: (ctx) => {
      ctx.lineWidth = 5;
      ctx.lineJoin = "round";
      ctx.lineCap = "round";
      ctx.beginPath();
      ctx.moveTo(8, 10);
      ctx.lineTo(C, 22);
      ctx.lineTo(24, 10);
      ctx.stroke();
    },
  },
  {
    name: "triangle",
    draw: (ctx) => {
      ctx.beginPath();
      ctx.moveTo(C, 6);
      ctx.lineTo(26, 25);
      ctx.lineTo(6, 25);
      ctx.closePath();
      ctx.fill();
    },
  },
  {
    name: "diamond",
    draw: (ctx) => {
      ctx.beginPath();
      ctx.moveTo(C, 5);
      ctx.lineTo(27, C);
      ctx.lineTo(C, 27);
      ctx.lineTo(5, C);
      ctx.closePath();
      ctx.fill();
    },
  },
  {
    name: "bars",
    draw: (ctx) => {
      ctx.fillRect(7, 6, 4, 20);
      ctx.fillRect(14, 6, 4, 20);
      ctx.fillRect(21, 6, 4, 20);
    },
  },
  {
    name: "hexagon",
    draw: (ctx) => {
      ctx.beginPath();
      for (let i = 0; i < 6; i++) {
        const a = (Math.PI / 3) * i - Math.PI / 6;
        const x = C + Math.cos(a) * 11;
        const y = C + Math.sin(a) * 11;
        i === 0 ? ctx.moveTo(x, y) : ctx.lineTo(x, y);
      }
      ctx.closePath();
      ctx.fill();
    },
  },
  {
    name: "star",
    draw: (ctx) => {
      ctx.beginPath();
      for (let i = 0; i < 10; i++) {
        const r = i % 2 === 0 ? 12 : 5;
        const a = (Math.PI / 5) * i - Math.PI / 2;
        const x = C + Math.cos(a) * r;
        const y = C + Math.sin(a) * r;
        i === 0 ? ctx.moveTo(x, y) : ctx.lineTo(x, y);
      }
      ctx.closePath();
      ctx.fill();
    },
  },
  {
    name: "heart",
    draw: (ctx) => {
      ctx.beginPath();
      ctx.moveTo(16, 26);
      ctx.bezierCurveTo(2, 16, 6, 6, 16, 12);
      ctx.bezierCurveTo(26, 6, 30, 16, 16, 26);
      ctx.closePath();
      ctx.fill();
    },
  },
  {
    name: "drop",
    draw: (ctx) => {
      ctx.beginPath();
      ctx.moveTo(16, 5);
      ctx.bezierCurveTo(24, 15, 26, 20, 16, 27);
      ctx.bezierCurveTo(6, 20, 8, 15, 16, 5);
      ctx.closePath();
      ctx.fill();
    },
  },
  {
    name: "flower",
    draw: (ctx) => {
      for (let i = 0; i < 6; i++) {
        const a = (Math.PI / 3) * i;
        ctx.beginPath();
        ctx.ellipse(C + Math.cos(a) * 7, C + Math.sin(a) * 7, 4.5, 4.5, 0, 0, Math.PI * 2);
        ctx.fill();
      }
    },
  },
  {
    name: "asterisk",
    draw: (ctx) => {
      ctx.lineWidth = 4;
      ctx.lineCap = "round";
      for (let i = 0; i < 3; i++) {
        const a = (Math.PI / 3) * i;
        ctx.beginPath();
        ctx.moveTo(C - Math.cos(a) * 11, C - Math.sin(a) * 11);
        ctx.lineTo(C + Math.cos(a) * 11, C + Math.sin(a) * 11);
        ctx.stroke();
      }
    },
  },
  {
    name: "spark",
    draw: (ctx) => {
      ctx.beginPath();
      const pts = [
        [16, 3], [19, 13], [29, 16], [19, 19],
        [16, 29], [13, 19], [3, 16], [13, 13],
      ];
      pts.forEach(([x, y], i) => (i === 0 ? ctx.moveTo(x, y) : ctx.lineTo(x, y)));
      ctx.closePath();
      ctx.fill();
    },
  },
  {
    name: "pentagon",
    draw: (ctx) => {
      ctx.beginPath();
      for (let i = 0; i < 5; i++) {
        const a = (Math.PI * 2 / 5) * i - Math.PI / 2;
        const x = C + Math.cos(a) * 11;
        const y = C + Math.sin(a) * 11;
        i === 0 ? ctx.moveTo(x, y) : ctx.lineTo(x, y);
      }
      ctx.closePath();
      ctx.fill();
    },
  },
  {
    name: "donut",
    draw: (ctx) => {
      ctx.beginPath();
      ctx.arc(C, C, 11, 0, Math.PI * 2);
      ctx.arc(C, C, 4, 0, Math.PI * 2, true);
      ctx.fill("evenodd");
    },
  },
  {
    name: "halfmoon",
    draw: (ctx) => {
      ctx.beginPath();
      ctx.arc(C, C, 11, 0, Math.PI * 2);
      ctx.arc(C + 6, C - 3, 10, 0, Math.PI * 2, true);
      ctx.fill("evenodd");
    },
  },
  {
    name: "arrow",
    draw: (ctx) => {
      ctx.lineWidth = 4;
      ctx.lineJoin = "round";
      ctx.lineCap = "round";
      ctx.beginPath();
      ctx.moveTo(7, 16);
      ctx.lineTo(23, 16);
      ctx.moveTo(16, 9);
      ctx.lineTo(23, 16);
      ctx.lineTo(16, 23);
      ctx.stroke();
    },
  },
  {
    name: "wave",
    draw: (ctx) => {
      ctx.lineWidth = 4;
      ctx.lineCap = "round";
      ctx.beginPath();
      ctx.moveTo(5, 16);
      ctx.quadraticCurveTo(11, 7, 16, 16);
      ctx.quadraticCurveTo(21, 25, 27, 16);
      ctx.stroke();
    },
  },
];

// Render a glyph to an offscreen canvas (black shape, transparent ground) so it can
// become a repeating texture.
export function glyphCanvas(index: number, size = 64): HTMLCanvasElement {
  const c = document.createElement("canvas");
  c.width = c.height = size;
  const ctx = c.getContext("2d")!;
  ctx.clearRect(0, 0, size, size);
  const g = GLYPHS[index];
  if (g) {
    const scale = size / 32;
    ctx.save();
    ctx.scale(scale, scale);
    ctx.fillStyle = "#000";
    ctx.strokeStyle = "#000";
    g.draw(ctx, 32);
    ctx.restore();
  }
  return c;
}

// A minimal, self-contained version of the Symbols effect renderer — the core idea
// with none of the playground machinery (no preset pool, preloading, remix
// crossfade, or recording). This is what's shown in the Code tabs so the effect
// reads clearly; the live playground uses a fuller version of the same shader.
//
// Build a full-frame quad, sample the source per cell, bucket its luminance into a
// band, and stamp that band's glyph tinted with its colour over white paper.

import * as THREE from "three";
import { SANDBOX_VERT, SANDBOX_FRAG } from "../shaders";
import { glyphCanvas } from "../glyphs";

export interface SymbolsParams {
  cell: number; // pixel cell size
  bandColors: string[]; // 4 hex colours, dark band → light band
  bandStops: number[]; // 5 stops → 4 luminance bands
  bandGlyphs: number[]; // 4 glyph indices (0 = empty)
  zoom?: number; // source zoom (1 = fill)
  bg?: string; // background colour around a shrunk source
}

export class SymbolsEffect {
  private renderer: THREE.WebGLRenderer;
  private scene = new THREE.Scene();
  private camera = new THREE.OrthographicCamera(-1, 1, 1, -1, 0, 1);
  private uniforms: Record<string, { value: unknown }>;
  private canvas: HTMLCanvasElement;
  private srcAspect = 1;
  private video: HTMLVideoElement | null = null;
  private raf = 0;
  private reqCell: number; // requested cell size (CSS px @ the 600px ref width)

  constructor(canvas: HTMLCanvasElement, p: SymbolsParams) {
    this.canvas = canvas;
    this.reqCell = p.cell;
    this.renderer = new THREE.WebGLRenderer({ canvas, antialias: true });
    this.renderer.setPixelRatio(Math.min(2, window.devicePixelRatio || 1));
    this.renderer.setClearColor(new THREE.Color(p.bg ?? "#ffffff"), 1);

    const glyph = (i: number) => {
      const t = new THREE.CanvasTexture(glyphCanvas(i));
      t.wrapS = t.wrapT = THREE.RepeatWrapping;
      return t;
    };
    const col = p.bandColors.map((h) => new THREE.Color(h));

    this.uniforms = {
      src: { value: new THREE.Texture() },
      resolution: { value: new THREE.Vector2(1, 1) },
      srcScale: { value: new THREE.Vector2(1, 1) },
      zoom: { value: p.zoom ?? 1 },
      bgColor: { value: new THREE.Color(p.bg ?? "#ffffff") },
      cell: { value: p.cell },
      bandColor: { value: col },
      bandColorB: { value: col.map((c) => c.clone()) },
      bandLo: { value: [p.bandStops[0], p.bandStops[1], p.bandStops[2], p.bandStops[3]] },
      bandHi: { value: [p.bandStops[1], p.bandStops[2], p.bandStops[3], p.bandStops[4]] },
      glyph: { value: p.bandGlyphs.map(glyph) },
      glyphB: { value: p.bandGlyphs.map(glyph) },
      morphT: { value: 1 },
    };

    const mat = new THREE.ShaderMaterial({
      vertexShader: SANDBOX_VERT,
      fragmentShader: SANDBOX_FRAG,
      uniforms: this.uniforms,
    });
    this.scene.add(new THREE.Mesh(new THREE.PlaneGeometry(2, 2), mat));
    this.resize();
  }

  // COVER fit: the quad always fills the frame; we crop the SOURCE sampling instead
  // (a uv scale) so there are never black bars.
  private fit() {
    const r = this.canvas.getBoundingClientRect();
    const ca = r.width / Math.max(1, r.height);
    let ux = 1;
    let uy = 1;
    if (this.srcAspect > ca) ux = ca / this.srcAspect;
    else uy = this.srcAspect / ca;
    (this.uniforms.srcScale.value as THREE.Vector2).set(ux, uy);
  }

  resize = () => {
    const r = this.canvas.getBoundingClientRect();
    const w = Math.max(1, r.width);
    const h = Math.max(1, r.height);
    this.renderer.setSize(w, h, false);
    (this.uniforms.resolution.value as THREE.Vector2).set(w, h);
    // scale the cell with the card width (ref 600px) so a narrow mobile card keeps
    // roughly the same cell density as a wide desktop one, not chunkier cells.
    this.uniforms.cell.value = Math.max(2, this.reqCell * (w / 600));
    this.fit();
    this.render();
  };

  render = () => this.renderer.render(this.scene, this.camera);

  setImage(url: string) {
    new THREE.TextureLoader().load(url, (tex) => {
      tex.colorSpace = THREE.SRGBColorSpace;
      this.uniforms.src.value = tex;
      this.srcAspect = tex.image.width / tex.image.height;
      this.video = null;
      this.fit();
      this.render();
    });
  }

  setVideo(url: string) {
    const v = document.createElement("video");
    v.src = url;
    v.loop = v.muted = v.playsInline = true;
    const tex = new THREE.VideoTexture(v);
    tex.colorSpace = THREE.SRGBColorSpace;
    v.addEventListener("loadeddata", () => {
      this.uniforms.src.value = tex;
      this.srcAspect = v.videoWidth / v.videoHeight || 1;
      this.video = v;
      this.fit();
      v.play();
      this.loop();
    });
    v.load();
  }

  private loop = () => {
    if (!this.video) return;
    this.render();
    this.raf = requestAnimationFrame(this.loop);
  };

  dispose() {
    cancelAnimationFrame(this.raf);
    this.video?.pause();
    this.renderer.dispose();
  }
}

// Stylized pixelation shader. A faithful real-time port of the effect: an image is
// crushed to hard black & white, chopped into big square blocks, softened, then
// re-crushed so the blocks get soft-cornered "stylized" edges, with a subtle offset
// multiply underneath for a printed feel. The recipe (decoded from the source
// action):
//   1. Threshold at 0.5 (midpoint)   -> pure 1-bit black/white
//   2. Mosaic, cell = pixelSize      -> blocky
//   3. Box Blur, radius = smoothing  -> soften the block edges
//   4. Threshold again               -> snap back to 1-bit, now soft-cornered
//   5. Offset multiply (1px)         -> a faint printed/embossed edge
// In colour mode we skip the two thresholds and just mosaic + soften the colour.

export const PIX_VERT = `
attribute vec2 aPosition;
attribute vec2 aUV;
varying vec2 vUV;
void main() {
  vUV = aUV;
  gl_Position = vec4(aPosition, 0.0, 1.0);
}
`;

export const PIX_FRAG = `
precision highp float;

varying vec2 vUV;

uniform sampler2D uTex;    // source image / video / camera frame
uniform vec2  uRes;        // canvas resolution in px
uniform vec2  uSrc;        // source texture size in px (for cover-fit)
uniform float uPixel;      // mosaic cell size in px
uniform float uSmooth;     // box-blur radius in px (smoothing)
uniform float uThreshLvl;  // threshold cutoff 0..1 (128/255 = 0.5 by default)
uniform float uInvert;     // 1 = swap dark/light
uniform float uOffset;     // offset-multiply strength (printed edge), 0..1
uniform vec3  uColorA;     // duotone: maps to the DARK shapes
uniform vec3  uColorB;     // duotone: maps to the LIGHT ground

// cover-fit the source into the canvas (fill, center-crop) -> matches an <img> with
// object-fit: cover, so the card never shows letterboxing.
vec2 coverUV(vec2 uv) {
  float ca = uRes.x / uRes.y;
  float sa = uSrc.x / uSrc.y;
  vec2 s = vec2(1.0);
  if (ca > sa) s.y = sa / ca; else s.x = ca / sa;
  return (uv - 0.5) * s + 0.5;
}

float luma(vec3 c) { return dot(c, vec3(0.299, 0.587, 0.114)); }

// The block origin (top-left) + size for the pixelSize block that uv falls in, in uv
// space. Snapping in CANVAS px keeps blocks perfectly square.
vec2 blockOrigin(vec2 uv) {
  vec2 cell = max(vec2(1.0), vec2(uPixel));
  return floor(uv * uRes / cell) * cell / uRes;
}

// AVERAGE the block instead of point-sampling its center: sample a small grid inside
// the block and mean the luma (a box downscale = Mosaic). This keeps edges legible
// (a half-covered block averages to mid-gray, so the threshold splits it), instead of
// collapsing whole regions to solid black/white.
float blockLuma(vec2 uv) {
  vec2 cell = max(vec2(1.0), vec2(uPixel));
  vec2 o = blockOrigin(uv);
  vec2 cellUV = cell / uRes;
  float sum = 0.0;
  for (int j = 0; j < 3; j++) {
    for (int i = 0; i < 3; i++) {
      vec2 f = (vec2(float(i), float(j)) + 0.5) / 3.0; // 0.166..0.833 across the block
      vec2 s = clamp(coverUV(o + f * cellUV), 0.0, 1.0);
      sum += luma(texture2D(uTex, s).rgb);
    }
  }
  return sum / 9.0;
}

// Sample the mosaic'd field, thresholded to 1 = light ground, 0 = dark shape.
float sampleField(vec2 uv) {
  return step(uThreshLvl, blockLuma(uv));
}

void main() {
  vec2 uv = vUV;

  // --- smoothing: a small box blur of the mosaic'd field, then re-threshold so the
  // softened block edges snap back to crisp but with rounded corners -> the
  // "stylized" block look. ---
  float t;
  if (uSmooth > 0.25) {
    vec2 texel = uSmooth / uRes;
    float sum = 0.0;
    for (int j = -2; j <= 2; j++) {
      for (int i = -2; i <= 2; i++) {
        vec2 o = vec2(float(i), float(j)) * 0.5 * texel;
        sum += sampleField(uv + o);
      }
    }
    t = step(0.5, sum / 25.0); // re-threshold -> soft-cornered blocks
  } else {
    t = sampleField(uv);
  }

  if (uInvert > 0.5) t = 1.0 - t;
  vec3 col = mix(uColorA, uColorB, t); // dark shapes = colorA, light ground = colorB

  // --- offset multiply: a faint printed edge. Sample the field shifted 1px
  // down-right (the decoded nudge); where the neighbour is dark but we are light,
  // darken a touch -> a thin rim on the block's lower-right. ---
  if (uOffset > 0.001) {
    vec2 offv = vec2(1.0, -1.0) / uRes;
    float neighbour = sampleField(uv - offv);
    if (uInvert > 0.5) neighbour = 1.0 - neighbour;
    float rim = t * (1.0 - neighbour); // light cell next to a dark cell
    col *= 1.0 - rim * uOffset;
  }

  gl_FragColor = vec4(col, 1.0);
}
`;

// Stylized pixelation engine. Loads a source (image, video, or camera stream) into a
// texture and renders the pixelation shader. A still image draws once (no rAF); a
// video/camera runs a render loop while onscreen. Same lifecycle contract as the
// other Vault WebGL cards: start/stop on visibility, resize, destroy, and the canvas
// stays hidden until its first real frame so a view-transition never captures black.

import { PIX_VERT, PIX_FRAG } from "./shaders";
import type { PixelateParams } from "./params";

type Source =
  | { kind: "image"; img: HTMLImageElement }
  | { kind: "video"; vid: HTMLVideoElement };

function hexToRGB(hex: string): [number, number, number] {
  let h = hex.replace("#", "").trim();
  if (h.length === 3) h = h.split("").map((c) => c + c).join("");
  return [
    parseInt(h.slice(0, 2), 16) / 255,
    parseInt(h.slice(2, 4), 16) / 255,
    parseInt(h.slice(4, 6), 16) / 255,
  ];
}

export class Pixelate {
  private host: HTMLElement;
  private canvas: HTMLCanvasElement;
  private gl: WebGLRenderingContext | null = null;
  private prog: WebGLProgram | null = null;
  private loc: Record<string, WebGLUniformLocation | null> = {};
  private quad: WebGLBuffer | null = null;
  private tex: WebGLTexture | null = null;
  private srcW = 1;
  private srcH = 1;

  private params: PixelateParams;
  private source: Source | null = null;
  private stream: MediaStream | null = null;

  private raf = 0;
  private running = false;
  private awake = false;
  private w = 0;
  private h = 0;
  private dpr = 1;
  private painted = false;
  private destroyed = false;

  ok = false;

  constructor(host: HTMLElement, params: PixelateParams) {
    this.host = host;
    this.params = params;
    this.canvas = document.createElement("canvas");
    Object.assign(this.canvas.style, {
      position: "absolute",
      inset: "0",
      width: "100%",
      height: "100%",
      display: "block",
      // Hidden until the first real frame so the white host shows (and a morph
      // captures white, not an undrawn black canvas).
      opacity: "0",
    });
    host.appendChild(this.canvas);

    const gl = this.canvas.getContext("webgl", {
      alpha: false,
      antialias: false,
      premultipliedAlpha: false,
    });
    if (!gl) return;
    this.gl = gl;
    gl.clearColor(1, 1, 1, 1);

    try {
      this.prog = this.build(PIX_VERT, PIX_FRAG);
    } catch {
      this.gl = null;
      return;
    }

    for (const u of [
      "uTex", "uRes", "uSrc", "uPixel", "uSmooth", "uThreshLvl",
      "uInvert", "uOffset", "uColorA", "uColorB",
    ]) {
      this.loc[u] = gl.getUniformLocation(this.prog, u);
    }
    const aPos = gl.getAttribLocation(this.prog, "aPosition");
    const aUV = gl.getAttribLocation(this.prog, "aUV");
    this.quad = gl.createBuffer();
    gl.bindBuffer(gl.ARRAY_BUFFER, this.quad);
    gl.bufferData(
      gl.ARRAY_BUFFER,
      new Float32Array([-1, -1, 0, 1, 1, -1, 1, 1, -1, 1, 0, 0, 1, 1, 1, 0]),
      gl.STATIC_DRAW,
    );
    gl.useProgram(this.prog);
    gl.enableVertexAttribArray(aPos);
    gl.vertexAttribPointer(aPos, 2, gl.FLOAT, false, 16, 0);
    gl.enableVertexAttribArray(aUV);
    gl.vertexAttribPointer(aUV, 2, gl.FLOAT, false, 16, 8);

    this.tex = gl.createTexture();
    gl.bindTexture(gl.TEXTURE_2D, this.tex);
    gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR);
    gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.LINEAR);
    gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE);
    gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE);
    // 1x1 white placeholder until the source loads
    gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, 1, 1, 0, gl.RGBA, gl.UNSIGNED_BYTE,
      new Uint8Array([255, 255, 255, 255]));

    this.resize();
    this.ok = true;
  }

  private build(vs: string, fs: string): WebGLProgram {
    const gl = this.gl!;
    const c = (type: number, src: string) => {
      const sh = gl.createShader(type)!;
      gl.shaderSource(sh, src);
      gl.compileShader(sh);
      if (!gl.getShaderParameter(sh, gl.COMPILE_STATUS)) {
        throw new Error(gl.getShaderInfoLog(sh) || "compile failed");
      }
      return sh;
    };
    const prog = gl.createProgram()!;
    gl.attachShader(prog, c(gl.VERTEX_SHADER, vs));
    gl.attachShader(prog, c(gl.FRAGMENT_SHADER, fs));
    gl.linkProgram(prog);
    if (!gl.getProgramParameter(prog, gl.LINK_STATUS)) {
      throw new Error(gl.getProgramInfoLog(prog) || "link failed");
    }
    return prog;
  }

  // ── source loading ──────────────────────────────────────────────────────────

  /** Load a still image. Renders once when ready (no loop). */
  setImage(url: string) {
    this.stopStream();
    const img = new Image();
    img.crossOrigin = "anonymous";
    img.onload = () => {
      if (this.destroyed) return;
      this.source = { kind: "image", img };
      this.srcW = img.naturalWidth || 1;
      this.srcH = img.naturalHeight || 1;
      this.uploadTexture(img);
      this.renderOnce();
    };
    img.src = url;
  }

  /** Load a looping video. Runs the render loop while playing + onscreen. */
  setVideo(url: string) {
    this.stopStream();
    const vid = document.createElement("video");
    vid.crossOrigin = "anonymous";
    vid.muted = true;
    vid.loop = true;
    vid.playsInline = true;
    vid.src = url;
    vid.onloadeddata = () => {
      if (this.destroyed) return;
      this.source = { kind: "video", vid };
      this.srcW = vid.videoWidth || 1;
      this.srcH = vid.videoHeight || 1;
      vid.play().catch(() => {});
      if (this.awake) this.start();
      else this.renderOnce();
    };
  }

  /** Use the device camera. Resolves false if denied/unavailable. */
  async setCamera(): Promise<boolean> {
    try {
      const stream = await navigator.mediaDevices.getUserMedia({
        video: { facingMode: "user" },
        audio: false,
      });
      if (this.destroyed) {
        stream.getTracks().forEach((t) => t.stop());
        return false;
      }
      this.stopStream();
      this.stream = stream;
      const vid = document.createElement("video");
      vid.muted = true;
      vid.playsInline = true;
      vid.srcObject = stream;
      await vid.play().catch(() => {});
      this.source = { kind: "video", vid };
      this.srcW = vid.videoWidth || 1;
      this.srcH = vid.videoHeight || 1;
      if (this.awake) this.start();
      else this.renderOnce();
      return true;
    } catch {
      return false;
    }
  }

  private stopStream() {
    if (this.stream) {
      this.stream.getTracks().forEach((t) => t.stop());
      this.stream = null;
    }
  }

  private uploadTexture(src: TexImageSource) {
    const gl = this.gl;
    if (!gl || !this.tex) return;
    gl.bindTexture(gl.TEXTURE_2D, this.tex);
    gl.pixelStorei(gl.UNPACK_FLIP_Y_WEBGL, true);
    gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, src);
    gl.pixelStorei(gl.UNPACK_FLIP_Y_WEBGL, false);
  }

  setParams(p: PixelateParams) {
    this.params = p;
    this.renderOnce();
  }

  // ── lifecycle ───────────────────────────────────────────────────────────────

  private isLive() {
    return this.source?.kind === "video";
  }

  /** Draw a single frame on the next tick (for images / param edits). */
  private renderOnce() {
    if (this.running) return;
    requestAnimationFrame(() => this.render());
  }

  start() {
    if (!this.ok) return;
    this.awake = true;
    if (this.running) return;
    this.resize();
    // A still image needs just one frame; only a video/camera needs the loop.
    if (!this.isLive()) {
      this.render();
      return;
    }
    this.running = true;
    const loop = () => {
      if (!this.running) return;
      this.render();
      this.raf = requestAnimationFrame(loop);
    };
    this.raf = requestAnimationFrame(loop);
  }

  /** Stop and forbid waking (offscreen / tab hidden). Pauses a playing video. */
  stop() {
    this.awake = false;
    this.running = false;
    if (this.raf) cancelAnimationFrame(this.raf);
    this.raf = 0;
    if (this.source?.kind === "video") this.source.vid.pause();
  }

  renderStill() {
    this.resize();
    this.render();
  }

  resize() {
    const r = this.host.getBoundingClientRect();
    this.dpr = Math.min(2, window.devicePixelRatio || 1);
    this.w = r.width;
    this.h = r.height;
    const cw = Math.max(1, Math.round(this.w * this.dpr));
    const ch = Math.max(1, Math.round(this.h * this.dpr));
    if (this.canvas.width !== cw || this.canvas.height !== ch) {
      this.canvas.width = cw;
      this.canvas.height = ch;
      this.gl?.viewport(0, 0, cw, ch);
      if (!this.running) this.renderOnce();
    }
  }

  private render() {
    const gl = this.gl;
    if (!gl || !this.prog) return;

    // keep the video frame fresh
    if (this.source?.kind === "video" && this.source.vid.readyState >= 2) {
      this.uploadTexture(this.source.vid);
    }

    const p = this.params;
    gl.useProgram(this.prog);
    gl.activeTexture(gl.TEXTURE0);
    gl.bindTexture(gl.TEXTURE_2D, this.tex);
    gl.uniform1i(this.loc.uTex, 0);
    gl.uniform2f(this.loc.uRes, this.canvas.width, this.canvas.height);
    gl.uniform2f(this.loc.uSrc, this.srcW, this.srcH);
    gl.uniform1f(this.loc.uPixel, Math.max(1, p.pixel) * this.dpr);
    gl.uniform1f(this.loc.uSmooth, Math.max(0, p.smooth) * this.dpr);
    gl.uniform1f(this.loc.uThreshLvl, p.thresh);
    gl.uniform1f(this.loc.uInvert, p.invert ? 1 : 0);
    gl.uniform1f(this.loc.uOffset, p.offset);
    const a = hexToRGB(p.colorA);
    const b = hexToRGB(p.colorB);
    gl.uniform3f(this.loc.uColorA, a[0], a[1], a[2]);
    gl.uniform3f(this.loc.uColorB, b[0], b[1], b[2]);
    gl.drawArrays(gl.TRIANGLE_STRIP, 0, 4);

    if (!this.painted) {
      this.painted = true;
      this.canvas.style.opacity = "1";
    }
  }

  destroy() {
    this.destroyed = true;
    this.stop();
    this.stopStream();
    const gl = this.gl;
    if (gl) {
      if (this.tex) gl.deleteTexture(this.tex);
      if (this.quad) gl.deleteBuffer(this.quad);
      gl.getExtension("WEBGL_lose_context")?.loseContext();
    }
    this.canvas.remove();
  }
}

"use client";

// Stylized pixelation playground — a live bench. It runs the effect on a default
// photo, your own upload, or your camera, all on the GPU. The preview is a rounded
// card with its control panel connected underneath, matching the other Vault
// detail pages.

import { useEffect, useRef, useState } from "react";
import { SectionLabel } from "../section-label";
import {
  PG_PREVIEW,
  PG_PANEL,
  Slider,
  ColorControl,
  GhostButton,
} from "../swirl/controls";
import { Pixelate } from "./engine";
import { PRESETS, defaultParams, type PixelateParams } from "./params";
import { hapticTap } from "../../lib/haptics";

const DEFAULT_SRC = "/vault/grid/grid-1.webp";

export function PixelatePlayground_() {
  const hostRef = useRef<HTMLDivElement>(null);
  const engineRef = useRef<Pixelate | null>(null);
  const fileRef = useRef<HTMLInputElement>(null);

  const [params, setParams] = useState<PixelateParams>(() => defaultParams());
  const [presetIdx, setPresetIdx] = useState(0);
  const [camOn, setCamOn] = useState(false);

  // Build the engine only when the playground scrolls into view (keeps the detail
  // page's card->hero morph smooth; the playground below builds lazily).
  useEffect(() => {
    const host = hostRef.current;
    if (!host) return;
    let raf = 0;
    let started = false;
    const build = () => {
      if (started) return;
      started = true;
      raf = requestAnimationFrame(() => {
        const eng = new Pixelate(host, params);
        if (!eng.ok) return;
        engineRef.current = eng;
        eng.setImage(DEFAULT_SRC);
        eng.start();
      });
    };
    const io = new IntersectionObserver(
      (es) => {
        if (es[0]?.isIntersecting) {
          io.disconnect();
          build();
        }
      },
      { rootMargin: "200px" },
    );
    io.observe(host);
    const onResize = () => engineRef.current?.resize();
    window.addEventListener("resize", onResize);
    return () => {
      io.disconnect();
      cancelAnimationFrame(raf);
      window.removeEventListener("resize", onResize);
      engineRef.current?.destroy();
      engineRef.current = null;
    };
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, []);

  // push params to the engine
  useEffect(() => {
    engineRef.current?.setParams(params);
  }, [params]);

  const patch = (p: Partial<PixelateParams>) =>
    setParams((prev) => ({ ...prev, ...p }));

  const remix = () => {
    hapticTap();
    const next = (presetIdx + 1) % PRESETS.length;
    setPresetIdx(next);
    setParams({ ...PRESETS[next].params });
  };

  const onUpload = (e: React.ChangeEvent<HTMLInputElement>) => {
    const f = e.target.files?.[0];
    if (!f) return;
    hapticTap();
    setCamOn(false);
    const url = URL.createObjectURL(f);
    if (f.type.startsWith("video/")) engineRef.current?.setVideo(url);
    else engineRef.current?.setImage(url);
    e.target.value = "";
  };

  const toggleCamera = async () => {
    hapticTap();
    if (camOn) {
      setCamOn(false);
      engineRef.current?.setImage(DEFAULT_SRC);
      return;
    }
    const ok = await engineRef.current?.setCamera();
    setCamOn(!!ok);
  };

  return (
    <section className="flex min-w-0 flex-col gap-3">
      <SectionLabel
        action={
          <div className="flex shrink-0 items-center gap-2">
            <GhostButton onClick={remix}>Remix</GhostButton>
            <GhostButton onClick={() => fileRef.current?.click()}>Upload</GhostButton>
            <GhostButton onClick={toggleCamera}>
              {camOn ? "Stop camera" : "Camera"}
            </GhostButton>
            <input
              ref={fileRef}
              type="file"
              accept="image/*,video/*"
              onChange={onUpload}
              className="hidden"
            />
          </div>
        }
      >
        Playground
      </SectionLabel>

      <div className="flex flex-col">
        {/* preview (rounded top) */}
        <div className={`${PG_PREVIEW} aspect-[1344/620]`}>
          <div ref={hostRef} className="absolute inset-0" />
        </div>

        {/* control panel (rounded bottom, connected) — two aligned columns:
            left = the shape knobs, right = the duotone colours + edge. */}
        <div className={PG_PANEL}>
          <div className="flex flex-col gap-4 sm:flex-row">
            <div className="flex min-w-0 flex-1 flex-col gap-4">
              <Slider
                label="Pixel size"
                value={params.pixel}
                min={4}
                max={48}
                step={1}
                format={(v) => `${v}px`}
                onChange={(v) => patch({ pixel: v })}
              />
              <Slider
                label="Smoothing"
                value={params.smooth}
                min={0}
                max={16}
                step={0.5}
                format={(v) => `${v}px`}
                onChange={(v) => patch({ smooth: v })}
              />
              <Slider
                label="Threshold"
                value={params.thresh}
                min={0.1}
                max={0.9}
                step={0.01}
                format={(v) => `${Math.round(v * 100)}%`}
                onChange={(v) => patch({ thresh: v })}
              />
            </div>

            <div className="flex min-w-0 flex-1 flex-col gap-4">
              <Slider
                label="Edge shadow"
                value={params.offset}
                min={0}
                max={1}
                step={0.01}
                format={(v) => `${Math.round(v * 100)}%`}
                onChange={(v) => patch({ offset: v })}
              />
              <ColorControl
                label="Shapes"
                value={params.colorA}
                onChange={(v) => patch({ colorA: v })}
              />
              <ColorControl
                label="Ground"
                value={params.colorB}
                onChange={(v) => patch({ colorB: v })}
              />
            </div>
          </div>

          {/* invert sits full-width under the columns so the rows above stay aligned */}
          <div className="flex items-center justify-between border-t border-[var(--border-line)] pt-4">
            <span className="text-[12px] text-[var(--text-tertiary)]">
              Swap the two colours
            </span>
            <GhostButton onClick={() => patch({ invert: !params.invert })}>
              Invert
            </GhostButton>
          </div>
        </div>
      </div>
    </section>
  );
}

"use client";

// Experiments: the same vortex engine pushed past the faithful rebuild. Each is
// a small stage plus a short note on what I was trying. Always visible. The
// control panel under each stage tucks UNDER the canvas with the exact styling
// of the main playground panel (see swirl-playground.tsx): the canvas wrapper
// carries the shadow + full rounding, the panel pulls up with -mt-5 / border-t-0
// / no top radius / pt-8 so they read as one piece.

import { useEffect, useMemo, useRef, useState } from "react";
import { SectionLabel } from "../section-label";
import { SegmentedControl, Slider, ColorControl, GhostButton } from "./controls";
import { ExperimentStage } from "./experiment-stage";
import { DEFAULT_STAGE, type StageConfig, type StageEvents } from "./use-swirl-stage";
import type { WavePattern } from "./vortex-field";
import { DEFAULT_TEXT } from "./default-text";
import { renderWord, type FontStyle } from "./block-font";
import { swirlFormation, swirlChurn, swirlMove, swirlClick } from "../../lib/sound";

const BASE: StageConfig = {
  ...DEFAULT_STAGE,
  inkStops: ["#d8d8d8"],
  logoColor: "#ffffff",
  bg: "#0c0c0d",
  rows: undefined,
  word: "ARLAN",
  style: "slant",
  text: DEFAULT_TEXT,
  zoom: 0.62,
};

function Experiment({
  title,
  action,
  children,
}: {
  title: string;
  /** Optional control on the right of the title row (e.g. a Replay button). */
  action?: React.ReactNode;
  children: React.ReactNode;
}) {
  return (
    <div className="flex min-w-0 flex-col gap-3">
      <div className="flex items-center justify-between gap-3">
        <h3 className="font-semibold text-[var(--text-primary)]">{title}</h3>
        {action}
      </div>
      {children}
    </div>
  );
}

// Control panel that tucks under the canvas, matching the main playground panel.
function Panel({ children }: { children: React.ReactNode }) {
  return (
    <div className="-mt-5 flex min-w-0 flex-col gap-3 rounded-b-xl border border-t-0 border-[var(--border-line)] bg-[var(--bg-surface)] p-3 pt-5">
      {children}
    </div>
  );
}

/* ---------- 1. Logo generator ---------- */
const STYLES: { id: FontStyle; label: string }[] = [
  { id: "slant", label: "Slant" },
  { id: "standard", label: "Standard" },
  { id: "ogre", label: "Ogre" },
  { id: "doom", label: "Doom" },
  { id: "big", label: "Big" },
  { id: "speed", label: "Speed" },
  { id: "stop", label: "Stop" },
  { id: "subzero", label: "Sub-Zero" },
  { id: "banner", label: "Banner" },
];

// Wider/taller faces get pulled back a little so the word still fits the frame.
const STYLE_ZOOM: Partial<Record<FontStyle, number>> = {
  subzero: 0.42,
  big: 0.46,
  doom: 0.46,
  stop: 0.46,
  speed: 0.46,
};

const THEMES = [
  { id: "dark", label: "Dark" },
  { id: "light", label: "Light" },
];

// Each font carries its own accent in dark mode, so switching the face also
// switches the palette. [letters, logo]. Light mode overrides to dark-on-white.
const FONT_ACCENT: Record<FontStyle, [string, string]> = {
  slant: ["#e7e3da", "#ffffff"], // warm white
  standard: ["#8fd0ff", "#eaf6ff"], // sky blue
  ogre: ["#7fe3a3", "#e9fff0"], // green
  doom: ["#ff7a6e", "#ffeae7"], // red
  big: ["#9b8cff", "#efeaff"], // indigo
  speed: ["#ffd166", "#fff6e0"], // gold
  stop: ["#ff9ed2", "#ffeaf6"], // pink
  subzero: ["#5fe0e0", "#e6ffff"], // cyan
  banner: ["#c2f06b", "#f4ffe0"], // lime
};

function LogoGenerator() {
  const [word, setWord] = useState("MINERVA");
  const [style, setStyle] = useState<FontStyle>("slant");
  const [theme, setTheme] = useState("dark");
  const light = theme === "light";
  const [accent, logoAccent] = FONT_ACCENT[style];
  const cfg: StageConfig = {
    ...BASE,
    rows: renderWord(word || " ", style),
    zoom: STYLE_ZOOM[style] ?? 0.5,
    // light: dark text + dark logo on a near-white field; dark: the font's accent
    bg: light ? "#fcfcfc" : "#0a0a0c",
    inkStops: [light ? "#9a9a9a" : accent],
    logoColor: light ? "#1b1b1b" : logoAccent,
  };

  return (
    <Experiment
      title="Type your own logo"
    >
      <ExperimentStage config={cfg} />
      <Panel>
        <div className="flex items-stretch gap-2">
          <input
            value={word}
            onChange={(e) => setWord(e.target.value.slice(0, 14))}
            spellCheck={false}
            aria-label="Logo word"
            placeholder="type a word"
            className="h-8 min-w-0 flex-1 rounded-lg border border-[var(--border-line)] bg-[var(--bg-page)] px-3 text-[13px] uppercase tracking-wide text-[var(--text-body)] outline-none transition-colors duration-150 focus:border-[var(--border-ring)]"
          />
          <div className="w-44 shrink-0">
            <SegmentedControl options={THEMES} activeId={theme} onPick={setTheme} />
          </div>
        </div>
        <SegmentedControl options={STYLES} activeId={style} onPick={(id) => setStyle(id as FontStyle)} fill />
      </Panel>
    </Experiment>
  );
}

/* ---------- 2. Sound ---------- */
// The same engine, but wired for AUDIO: a layered synth cue rides the entrance
// (a rising sweep + a tap cascade that lands as the word forms + a low lock
// thud), and a soft churn/CRT-static drone plays while the canvas is on screen.
// All synthesized live (Web Audio, no files), gated on the global mute, first
// user gesture, and reduced-motion. See lib/sound.ts.
function SoundSwirl() {
  const cfg: StageConfig = {
    ...BASE,
    word: "SOUND",
    zoom: 0.62,
    inkStops: ["#cfe0ff"],
    logoColor: "#ffffff",
    bg: "#070a12",
  };

  // the churn drone, started/stopped by visibility; kept in a ref so re-renders
  // don't restart it
  const churn = useRef<{ stop: () => void } | null>(null);
  const reduced = useRef(false);
  useEffect(() => {
    reduced.current =
      typeof window !== "undefined" &&
      window.matchMedia("(prefers-reduced-motion: reduce)").matches;
    return () => churn.current?.stop();
  }, []);

  const restartChurn = () => {
    churn.current?.stop();
    churn.current = reduced.current ? null : swirlChurn();
  };

  const events: StageEvents = useMemo(
    () => ({
      onFormationStart: () => {
        if (!reduced.current) swirlFormation();
      },
      onVisible: (visible) => {
        if (visible && !reduced.current) {
          if (!churn.current) churn.current = swirlChurn();
        } else {
          churn.current?.stop();
          churn.current = null;
        }
      },
      // cursor over the letters → a soft tick that pitches up with speed
      onPointerMove: (speed) => {
        if (!reduced.current) swirlMove(speed);
      },
      // click / shockwave → an impact thud
      onPointerDown: () => {
        if (!reduced.current) swirlClick();
      },
    }),
    [],
  );

  // bumping this replays the entrance (and re-fires the entrance sound, since
  // onFormationStart runs on every (re)start)
  const [replay, setReplay] = useState(0);
  const onReplay = () => {
    setReplay((n) => n + 1); // restarts the visual + the entrance sound
    restartChurn(); // and the ambient bed, so EVERYTHING restarts together
  };

  return (
    <Experiment
      title="The same swirl, with sound"
      action={<GhostButton onClick={onReplay}>Replay</GhostButton>}
    >
      <ExperimentStage
        config={cfg}
        events={events}
        replayKey={replay}
        trackPointer
        burstOnClick
      />
    </Experiment>
  );
}

/* ---------- 3. Cursor trail ---------- */
function CursorTrail() {
  // its own warm-coral palette; dragging lights a hot white-gold trail that
  // churns the soup into the vortex and lingers
  const cfg: StageConfig = {
    ...BASE,
    trail: true,
    trailStrength: 1.6,
    trailFlare: "#fff1c2",
    word: "TRACE",
    zoom: 0.62,
    inkStops: ["#ff7a55"],
    logoColor: "#fff0ea",
    bg: "#160604",
  };
  return (
    <Experiment
      title="Drag a trail through the letters"
    >
      <ExperimentStage config={cfg} trackPointer />
    </Experiment>
  );
}

/* ---------- 4. Flowing multi-stop gradient ---------- */
// Default is ONE color living through its own shades: a single hue ramped from
// deep to bright and back, so it reads as a rich, breathing teal rather than a
// rainbow. The per-letter drift + speed brightness already baked into the field
// turn that one hue into something with real depth.
const MONO_RAMP = ["#0a3d3a", "#13807a", "#2fd4c4", "#9ff5ec", "#13807a"];

function GradientInk() {
  const [stops, setStops] = useState<string[]>(MONO_RAMP);
  const [angle, setAngle] = useState(0.4);
  const [flow, setFlow] = useState(0.06);

  const setStop = (i: number, v: string) =>
    setStops((s) => s.map((c, k) => (k === i ? v : c)));

  const cfg: StageConfig = {
    ...BASE,
    word: "FLOW",
    zoom: 0.55,
    gradient: true,
    inkStops: stops,
    gradientAngle: angle * Math.PI * 2,
    gradientFlow: flow,
    bg: "#08080b",
  };

  return (
    <Experiment
      title="Letters that flow through colors"
    >
      <ExperimentStage config={cfg} />
      <Panel>
        <div className="grid grid-cols-5 gap-1">
          {stops.map((c, i) => (
            <ColorControl key={i} label={`${i + 1}`} value={c} onChange={(v) => setStop(i, v)} />
          ))}
        </div>
        <div className="grid grid-cols-1 gap-x-4 gap-y-2.5 sm:grid-cols-2">
          <Slider label="Angle" value={angle} min={0} max={1} format={(v) => (v * 360).toFixed(0) + "°"} onChange={setAngle} />
          <Slider label="Flow" value={flow} min={0} max={0.4} format={(v) => (v * 100).toFixed(0) + "%"} onChange={setFlow} />
        </div>
      </Panel>
    </Experiment>
  );
}

/* ---------- 5. Shockwaves + sustained wave patterns ---------- */
const PATTERNS = [
  { id: "wavefront", label: "Wavefront" },
  { id: "ripples", label: "Ripples" },
  { id: "flow", label: "Flow" },
  { id: "cloth", label: "Cloth" },
];

// Each pattern gets its own bold palette so switching feels like a mood change.
const WAVE_PALETTE: Record<WavePattern, { ink: string; logo: string; bg: string }> = {
  wavefront: { ink: "#7fb8ff", logo: "#eaf3ff", bg: "#040a1a" }, // ocean blue
  ripples: { ink: "#4fe3d0", logo: "#e6fffb", bg: "#021414" }, // teal
  flow: { ink: "#d98cff", logo: "#f7ebff", bg: "#10031a" }, // magenta / violet
  cloth: { ink: "#ffc266", logo: "#fff4e0", bg: "#1a0f02" }, // amber
};

function ClickShock() {
  const [turbulence, setTurbulence] = useState(0.35);
  const [pattern, setPattern] = useState<WavePattern>("wavefront");
  const pal = WAVE_PALETTE[pattern];
  const cfg: StageConfig = {
    ...BASE,
    shock: true,
    turbulence,
    wavePattern: pattern,
    word: "WAVES",
    zoom: 0.62,
    inkStops: [pal.ink],
    logoColor: pal.logo,
    bg: pal.bg,
  };
  return (
    <Experiment
      title="Click for a wave, or leave it churning"
    >
      <ExperimentStage config={cfg} burstOnClick replayKey={pattern} />
      <Panel>
        <SegmentedControl options={PATTERNS} activeId={pattern} onPick={(id) => setPattern(id as WavePattern)} />
        <Slider label="Strength" value={turbulence} min={0} max={1} format={(v) => (v * 100).toFixed(0) + "%"} onChange={setTurbulence} />
      </Panel>
    </Experiment>
  );
}

export function SwirlExperiments() {
  return (
    <section className="mt-12 flex min-w-0 flex-col gap-6">
      <SectionLabel>Experiments</SectionLabel>
      <p className="-mt-3 text-[15px] leading-[1.7] text-[var(--text-secondary)]">
        A few things I added on top, just to see how far the same idea would go.
      </p>
      {/* each experiment after the first is set off by a hairline divider with
          generous spacing, so they read as distinct sections */}
      <div className="flex min-w-0 flex-col [&>*:not(:first-child)]:mt-14 [&>*:not(:first-child)]:border-t [&>*:not(:first-child)]:border-[var(--border-line)] [&>*:not(:first-child)]:pt-14">
        <LogoGenerator />
        <SoundSwirl />
        <CursorTrail />
        <GradientInk />
        <ClickShock />
      </div>
    </section>
  );
}

"use client";

// Minimalist, site-styled controls for the swirl playground. Native color
// dialog / range chrome is replaced with our own so the panel matches the rest
// of the page (thin lines, soft grays, the site font) and reads as one system.
// The color control's anatomy (swatch trigger -> popover with a hue slider, a
// hex field and quick presets) is adapted from HeroUI's ColorPicker.

import {
  useEffect,
  useLayoutEffect,
  useRef,
  useState,
  type CSSProperties,
  type ReactNode,
} from "react";
import { hapticTap } from "../../lib/haptics";
import { hoverLink } from "../../lib/sound";

const LABEL = "text-[12px] text-[var(--text-tertiary)]";

// ── Shared playground shell ─────────────────────────────────────────────────
// One connected card: a fully-rounded preview box with the control panel tucked
// underneath via a deep negative-margin overlap (the panel slides up under the
// preview's rounded bottom so they read as a single card). Matched to the vector
// editor; used by every Vault playground so their roundings are identical.
// PANEL_PAD covers the overlap so the first control row clears the seam.
export const PG_PREVIEW =
  "relative z-10 overflow-hidden rounded-xl border border-[var(--border-line)] bg-[var(--bg-hover)]";
export const PG_PANEL =
  "-mt-5 flex min-w-0 flex-col gap-4 rounded-b-xl border border-t-0 border-[var(--border-line)] bg-[var(--bg-surface)] p-4 pt-8";

/* ---------- Segmented control (variant picker) ---------- */
// One pill container with a sliding white indicator behind the active segment —
// the same sliding-pill language as the code tabs, so the panel reads cohesive.
export function SegmentedControl({
  options,
  activeId,
  onPick,
  fill = false,
}: {
  options: { id: string; label: string }[];
  activeId: string;
  onPick: (id: string) => void;
  /** Distribute segments to fill the row evenly when there's space, but never
   *  shrink a label below its text — so on a narrow screen the row scrolls
   *  horizontally instead of forcing the page wider. */
  fill?: boolean;
}) {
  const rowRef = useRef<HTMLDivElement>(null);
  const segRefs = useRef<(HTMLButtonElement | null)[]>([]);
  const [pill, setPill] = useState<{ x: number; w: number } | null>(null);
  const activeIndex = Math.max(
    0,
    options.findIndex((o) => o.id === activeId),
  );

  useLayoutEffect(() => {
    const el = segRefs.current[activeIndex];
    if (!el) return;
    setPill({ x: el.offsetLeft, w: el.offsetWidth });
  }, [activeIndex, options.length]);

  useEffect(() => {
    const row = rowRef.current;
    if (!row || typeof ResizeObserver === "undefined") return;
    const ro = new ResizeObserver(() => {
      const el = segRefs.current[activeIndex];
      if (el) setPill({ x: el.offsetLeft, w: el.offsetWidth });
    });
    ro.observe(row);
    return () => ro.disconnect();
  }, [activeIndex]);

  return (
    <div
      ref={rowRef}
      role="tablist"
      aria-label="Variant"
      className="swirl-tabscroll relative flex h-8 w-full items-stretch gap-0 overflow-x-auto rounded-lg border border-[var(--border-line)] bg-[var(--bg-page)] p-0.5"
    >
      {pill && (
        <span
          aria-hidden="true"
          className="pointer-events-none absolute inset-y-0.5 rounded-md border border-[var(--border-line)] bg-[var(--bg-hover)]"
          style={{
            transform: `translateX(${pill.x - 2}px)`,
            width: pill.w,
            transition:
              "transform 0.34s var(--ease-out), width 0.34s var(--ease-out)",
          }}
        />
      )}
      {options.map((o, i) => {
        const active = o.id === activeId;
        return (
          <button
            key={o.id}
            ref={(el) => {
              segRefs.current[i] = el;
            }}
            type="button"
            role="tab"
            aria-selected={active}
            onClick={() => {
              hapticTap();
              onPick(o.id);
            }}
            onPointerEnter={hoverLink}
            className={`relative z-10 flex items-center justify-center whitespace-nowrap rounded-md px-2 py-1 text-[12px] transition-colors duration-150 ease-[var(--ease-out)] ${
              fill ? "flex-1 basis-0 [min-width:fit-content]" : "flex-1"
            } ${
              active
                ? "text-[var(--text-primary)]"
                : "text-[var(--text-tertiary)] hover:text-[var(--text-secondary)]"
            }`}
          >
            {o.label}
          </button>
        );
      })}
    </div>
  );
}

/* ---------- Select (dropdown) ---------- */
// A site-styled select: a pill trigger (same border / radius / 12px text as the
// segmented control and theme toggle) with a chevron, opening a popover of
// options that share the sliding-pill's hover + active treatment. Used where a
// segmented row would be too many options to fit (e.g. the 9 fonts).
export function Select({
  options,
  activeId,
  onPick,
  ariaLabel,
}: {
  options: { id: string; label: string }[];
  activeId: string;
  onPick: (id: string) => void;
  ariaLabel?: string;
}) {
  const [open, setOpen] = useState(false);
  const wrapRef = useRef<HTMLDivElement>(null);
  const active = options.find((o) => o.id === activeId);

  // close on outside click / Escape (same pattern as ColorControl)
  useEffect(() => {
    if (!open) return;
    const onDoc = (e: MouseEvent) => {
      if (wrapRef.current && !wrapRef.current.contains(e.target as Node)) setOpen(false);
    };
    const onKey = (e: KeyboardEvent) => e.key === "Escape" && setOpen(false);
    document.addEventListener("mousedown", onDoc);
    document.addEventListener("keydown", onKey);
    return () => {
      document.removeEventListener("mousedown", onDoc);
      document.removeEventListener("keydown", onKey);
    };
  }, [open]);

  return (
    <div ref={wrapRef} className="relative flex shrink-0">
      <button
        type="button"
        role="combobox"
        aria-expanded={open}
        aria-label={ariaLabel}
        onClick={() => {
          hapticTap();
          setOpen((o) => !o);
        }}
        onPointerEnter={hoverLink}
        className="flex h-8 w-full items-center justify-between gap-1.5 rounded-lg border border-[var(--border-line)] bg-[var(--bg-page)] pl-3 pr-2.5 text-[12px] text-[var(--text-primary)] transition-colors duration-150 ease-[var(--ease-out)] hover:border-[var(--border-ring)]"
      >
        <span className="whitespace-nowrap">{active?.label ?? "Select"}</span>
        <svg
          width="10"
          height="10"
          viewBox="0 0 10 10"
          aria-hidden="true"
          className={`shrink-0 text-[var(--text-tertiary)] transition-transform duration-150 ease-[var(--ease-out)] ${open ? "rotate-180" : ""}`}
        >
          <path d="M2 3.5 5 6.5 8 3.5" fill="none" stroke="currentColor" strokeWidth="1.3" strokeLinecap="round" strokeLinejoin="round" />
        </svg>
      </button>

      {open && (
        <div
          role="listbox"
          className="absolute right-0 top-full z-50 mt-2 flex max-h-64 w-40 flex-col gap-0.5 overflow-y-auto rounded-xl border border-[var(--border-ring)] bg-[var(--bg-surface)] p-1 shadow-[0_1px_2px_rgba(17,24,39,0.06),0_8px_24px_rgba(17,24,39,0.08)]"
          style={{ animation: "swirl-pop 0.16s var(--ease-expo)" }}
        >
          {options.map((o) => {
            const isActive = o.id === activeId;
            return (
              <button
                key={o.id}
                type="button"
                role="option"
                aria-selected={isActive}
                onClick={() => {
                  hapticTap();
                  onPick(o.id);
                  setOpen(false);
                }}
                onPointerEnter={hoverLink}
                className={`rounded-md px-2.5 py-1.5 text-left text-[12px] transition-colors duration-150 ease-[var(--ease-out)] ${
                  isActive
                    ? "bg-[var(--bg-page)] text-[var(--text-primary)]"
                    : "text-[var(--text-secondary)] hover:bg-[var(--bg-page)] hover:text-[var(--text-primary)]"
                }`}
              >
                {o.label}
              </button>
            );
          })}
        </div>
      )}
    </div>
  );
}

/* ---------- Slider ---------- */
// Row slider: the whole row is the track (fill grows from the left), label sits
// left + value right, with a thin handle riding the fill edge. Drag anywhere on
// the row, click to snap, or arrow-key when focused.
const CLICK_THRESHOLD = 3; // px — distinguishes a click from a drag

export function Slider({
  label,
  value,
  min,
  max,
  step = 0.01,
  format,
  onChange,
}: {
  label: string;
  value: number;
  min: number;
  max: number;
  step?: number;
  format?: (v: number) => string;
  onChange: (v: number) => void;
}) {
  const rowRef = useRef<HTMLDivElement>(null);
  const [dragging, setDragging] = useState(false);
  const down = useRef<{ x: number; moved: boolean } | null>(null);

  const pct = max === min ? 0 : ((value - min) / (max - min)) * 100;
  const snap = (v: number) => {
    const snapped = Math.round(v / step) * step;
    const clamped = Math.min(Math.max(snapped, min), max);
    // round float dust from the step division
    return parseFloat(clamped.toPrecision(12));
  };
  const valueFromX = (clientX: number) => {
    const r = rowRef.current!.getBoundingClientRect();
    const t = (clientX - r.left) / r.width;
    return snap(min + t * (max - min));
  };

  const onPointerDown = (e: React.PointerEvent) => {
    (e.target as HTMLElement).setPointerCapture?.(e.pointerId);
    down.current = { x: e.clientX, moved: false };
    setDragging(true);
    hapticTap();
  };
  const onPointerMove = (e: React.PointerEvent) => {
    if (!dragging || !down.current) return;
    if (Math.abs(e.clientX - down.current.x) > CLICK_THRESHOLD) down.current.moved = true;
    onChange(valueFromX(e.clientX));
  };
  const endDrag = (e: React.PointerEvent) => {
    if (!down.current) return;
    if (!down.current.moved) onChange(valueFromX(e.clientX)); // click-to-snap
    down.current = null;
    setDragging(false);
  };

  const onKeyDown = (e: React.KeyboardEvent) => {
    if (e.key === "ArrowLeft" || e.key === "ArrowDown") {
      e.preventDefault();
      onChange(snap(value - step));
    } else if (e.key === "ArrowRight" || e.key === "ArrowUp") {
      e.preventDefault();
      onChange(snap(value + step));
    }
  };

  return (
    <label className="flex min-w-[9rem] flex-1 flex-col">
      <div
        ref={rowRef}
        role="slider"
        tabIndex={0}
        aria-valuemin={min}
        aria-valuemax={max}
        aria-valuenow={value}
        aria-label={label}
        onPointerDown={onPointerDown}
        onPointerMove={onPointerMove}
        onPointerUp={endDrag}
        onPointerCancel={endDrag}
        onPointerEnter={hoverLink}
        onKeyDown={onKeyDown}
        className="relative flex h-8 w-full cursor-pointer touch-none select-none items-center overflow-hidden rounded-lg border border-[var(--border-line)] bg-[var(--bg-page)] outline-none ring-[var(--border-ring)] focus-visible:ring-1"
      >
        {/* fill — a light gray wash so the level reads against the white track */}
        <span
          className="pointer-events-none absolute inset-y-0 left-0 bg-[var(--bg-hover)]"
          style={{ width: `${pct}%` }}
        />
        {/* handle on the fill edge */}
        <span
          className={`pointer-events-none absolute top-1/2 h-4 w-[3px] -translate-y-1/2 rounded-full bg-[var(--text-primary)] transition-opacity duration-150 ${
            dragging ? "opacity-90" : "opacity-40"
          }`}
          style={{ left: `max(3px, calc(${pct}% - 1.5px))` }}
        />
        <span className="pointer-events-none relative z-10 pl-3 text-[12px] text-[var(--text-secondary)]">
          {label}
        </span>
        <span className="pointer-events-none relative z-10 ml-auto mr-3 text-[12px] tabular-nums text-[var(--text-secondary)]">
          {format ? format(value) : value.toFixed(2)}
        </span>
      </div>
    </label>
  );
}

/* ---------- Color helpers ---------- */
function hexToHsl(hex: string): [number, number, number] {
  let h = hex.replace("#", "").trim();
  if (h.length === 3) h = h.split("").map((c) => c + c).join("");
  const r = parseInt(h.slice(0, 2), 16) / 255;
  const g = parseInt(h.slice(2, 4), 16) / 255;
  const b = parseInt(h.slice(4, 6), 16) / 255;
  const max = Math.max(r, g, b);
  const min = Math.min(r, g, b);
  const l = (max + min) / 2;
  let s = 0;
  let hue = 0;
  if (max !== min) {
    const d = max - min;
    s = l > 0.5 ? d / (2 - max - min) : d / (max + min);
    if (max === r) hue = (g - b) / d + (g < b ? 6 : 0);
    else if (max === g) hue = (b - r) / d + 2;
    else hue = (r - g) / d + 4;
    hue *= 60;
  }
  return [Math.round(hue), Math.round(s * 100), Math.round(l * 100)];
}
function hslToHex(h: number, s: number, l: number): string {
  s /= 100;
  l /= 100;
  const k = (n: number) => (n + h / 30) % 12;
  const a = s * Math.min(l, 1 - l);
  const f = (n: number) =>
    l - a * Math.max(-1, Math.min(k(n) - 3, Math.min(9 - k(n), 1)));
  const to = (n: number) =>
    Math.round(255 * f(n))
      .toString(16)
      .padStart(2, "0");
  return `#${to(0)}${to(8)}${to(4)}`;
}
const isHex = (s: string) => /^#?[0-9a-fA-F]{6}$/.test(s.trim());
const normHex = (s: string) => {
  const v = s.trim().replace(/^#?/, "");
  return `#${v.toLowerCase()}`;
};

const PRESET_SWATCHES = [
  "#ffffff", "#d8d8d8", "#9b9b9b", "#1b1b1b", "#0b1733",
  "#e88f00", "#2ee06a", "#3b82f6", "#a855f7", "#f7d8e3",
];

/* ---------- Color control (swatch trigger + popover) ---------- */
export function ColorControl({
  label,
  value,
  onChange,
}: {
  label: string;
  value: string;
  onChange: (v: string) => void;
}) {
  const [open, setOpen] = useState(false);
  const wrapRef = useRef<HTMLDivElement>(null);
  const [h, s, l] = hexToHsl(value);
  const [hexDraft, setHexDraft] = useState(value);

  useEffect(() => setHexDraft(value), [value]);

  // close on outside click / Escape
  useEffect(() => {
    if (!open) return;
    const onDoc = (e: MouseEvent) => {
      if (wrapRef.current && !wrapRef.current.contains(e.target as Node))
        setOpen(false);
    };
    const onKey = (e: KeyboardEvent) => e.key === "Escape" && setOpen(false);
    document.addEventListener("mousedown", onDoc);
    document.addEventListener("keydown", onKey);
    return () => {
      document.removeEventListener("mousedown", onDoc);
      document.removeEventListener("keydown", onKey);
    };
  }, [open]);

  const setHue = (hue: number) => onChange(hslToHex(hue, s || 70, l || 50));

  return (
    <div ref={wrapRef} className="relative flex w-full min-w-0">
      <button
        type="button"
        onClick={() => {
          hapticTap();
          setOpen((o) => !o);
        }}
        onPointerEnter={hoverLink}
        aria-label={`${label}: ${value}`}
        aria-expanded={open}
        className={`group flex h-8 w-full min-w-0 items-center gap-1.5 rounded-lg border border-[var(--border-line)] bg-[var(--bg-page)] px-2.5 transition-colors duration-150 ease-[var(--ease-out)] hover:border-[var(--border-ring)] ${
          label ? "" : "justify-center"
        }`}
      >
        {label && <span className={`${LABEL} truncate`}>{label}</span>}
        <span
          aria-hidden="true"
          className={`h-4 w-4 shrink-0 rounded-[5px] border border-[var(--border-ring)] transition-transform duration-150 ease-[var(--ease-out)] group-active:scale-[0.96] ${
            label ? "ml-auto" : ""
          }`}
          style={{ backgroundColor: value }}
        />
      </button>

      {open && (
        <div
          className="absolute left-0 top-full z-50 mt-2 flex w-56 flex-col gap-3 rounded-xl border border-[var(--border-ring)] bg-[var(--bg-surface)] p-3 shadow-[0_1px_2px_rgba(17,24,39,0.06),0_8px_24px_rgba(17,24,39,0.08)]"
          style={{ animation: "swirl-pop 0.16s var(--ease-expo)" }}
        >
          {/* hue slider */}
          <span className="hue-track relative flex h-4 items-center">
            <span
              className="pointer-events-none absolute h-4 w-4 -translate-x-1/2 rounded-full border-2 border-white shadow-[0_0_0_1px_rgba(0,0,0,0.15)]"
              style={{ left: `${(h / 360) * 100}%`, backgroundColor: value }}
            />
            <input
              type="range"
              min={0}
              max={360}
              step={1}
              value={h}
              onChange={(e) => setHue(+e.target.value)}
              onPointerDown={hapticTap}
              aria-label={`${label} hue`}
              className="swirl-range relative z-10 h-4 w-full cursor-pointer appearance-none bg-transparent"
            />
          </span>

          {/* hex field */}
          <input
            type="text"
            value={hexDraft}
            spellCheck={false}
            onChange={(e) => {
              setHexDraft(e.target.value);
              if (isHex(e.target.value)) onChange(normHex(e.target.value));
            }}
            onBlur={() => setHexDraft(value)}
            aria-label={`${label} hex`}
            className="w-full rounded-md border border-[var(--border-line)] bg-[var(--bg-page)] px-2 py-1 font-mono text-[12px] lowercase text-[var(--text-body)] outline-none transition-colors duration-150 focus:border-[var(--border-ring)]"
          />

          {/* preset swatches */}
          <div className="grid grid-cols-5 gap-1.5">
            {PRESET_SWATCHES.map((c) => (
              <button
                key={c}
                type="button"
                onClick={() => {
                  hapticTap();
                  onChange(c);
                }}
                onPointerEnter={hoverLink}
                aria-label={c}
                className={`h-6 w-full rounded-md border transition-transform duration-150 ease-[var(--ease-out)] active:scale-[0.96] ${
                  c.toLowerCase() === value.toLowerCase()
                    ? "border-[var(--text-primary)]"
                    : "border-[var(--border-ring)]"
                }`}
                style={{ backgroundColor: c }}
              />
            ))}
          </div>
        </div>
      )}
    </div>
  );
}

/* ---------- Auto-growing prompt input ---------- */
export function PromptInput({
  label,
  value,
  onChange,
}: {
  label: string;
  value: string;
  onChange: (v: string) => void;
}) {
  const ref = useRef<HTMLTextAreaElement>(null);
  const [max] = useState(132);

  useEffect(() => {
    const el = ref.current;
    if (!el) return;
    el.style.height = "auto";
    el.style.height = `${Math.min(el.scrollHeight, max)}px`;
  }, [value, max]);

  return (
    <label className="flex flex-col gap-1.5">
      <span className={LABEL}>{label}</span>
      <textarea
        ref={ref}
        value={value}
        onChange={(e) => onChange(e.target.value)}
        onPointerEnter={hoverLink}
        spellCheck={false}
        rows={2}
        className="w-full resize-none overflow-y-auto overscroll-none rounded-lg border border-[var(--border-line)] bg-[var(--bg-page)] px-3 py-2 text-[12px] leading-[1.55] text-[var(--text-body)] outline-none transition-colors duration-150 focus:border-[var(--border-ring)]"
        style={{ maxHeight: max } as CSSProperties}
      />
    </label>
  );
}

/* ---------- Ghost button (panel actions) ---------- */
// Matches the Copy button / code-tab pill language: hairline border, anchored
// surface, hover darkens the border (never dissolves into the panel).
export function GhostButton({
  onClick,
  children,
}: {
  onClick: () => void;
  children: ReactNode;
}) {
  return (
    <button
      type="button"
      onClick={() => {
        hapticTap();
        onClick();
      }}
      onPointerEnter={hoverLink}
      className="inline-flex h-7 shrink-0 items-center self-start rounded-lg border border-[var(--border-line)] bg-[var(--bg-surface)] px-3 text-[12px] font-medium text-[var(--text-secondary)] transition-colors duration-150 ease-[var(--ease-out)] hover:bg-[var(--bg-hover)] hover:border-[var(--border-ring)] hover:text-[var(--text-primary)] active:scale-[0.98]"
    >
      {children}
    </button>
  );
}

// One React hook that mounts the whole pipeline onto a <canvas> and runs the
// frame loop, reading a mutable config ref every frame so controls update the
// effect live (no re-init). Both the main playground and each experiment use
// this — they just feed it a different StageConfig.
//
// Interaction state (the spring-smoothed cursor bend, the velocity smoothing,
// and the click shockwave pool) lives HERE, per frame; the per-cell math that
// consumes it lives in vortex-field. The split keeps the hot loop pure.

import { useEffect, useRef, type RefObject } from "react";
import { buildAtlas, type GlyphAtlas } from "./glyph-atlas";
import { createRenderer, type Renderer } from "./renderer";
import { hexToRgb01 } from "./color";
import {
  composeField,
  makeBuffers,
  makeTarget,
  type FieldBuffers,
  type FieldGrid,
  type InkMode,
  type InkPaint,
  type Shock,
  type Target,
  type WavePattern,
} from "./vortex-field";
import { depositTrail, makeTrailField, stepTrail } from "./trail-field";
import { renderWord, type FontStyle } from "./block-font";

export interface StageConfig {
  /** Pre-baked ASCII rows for the named presets (takes priority over word). */
  rows?: string[];
  /** Live word for the logo generator (used when `rows` is absent). */
  word?: string;
  style?: FontStyle;
  /** Gradient color stops (hex). One stop = flat fill. */
  inkStops: string[];
  /** Color of the resolved logo word (hex), independent of the swirl letters. */
  logoColor: string;
  gradient: boolean;
  gradientAngle: number; // radians
  /** Gradient band drift speed (cycles/sec). 0 = static gradient. */
  gradientFlow: number;
  /** How the stops map onto the field. Defaults to "rows" (color swirls with
   *  the letters); "axis" is the old flat screen-space gradient. */
  gradientMode?: InkMode;
  bg: string;
  text: string;
  scanlines: number;
  aberration: number;
  curvature: number;
  zoom: number;
  /** Enable the persistent cursor trail (wake + local swirl-up). */
  trail: boolean;
  /** Trail intensity multiplier (1 = default). */
  trailStrength?: number;
  /** Hex color hot trail cells glow toward; omit for no color flare. */
  trailFlare?: string;
  /** Enable click shockwaves. */
  shock: boolean;
  /** Sustained ambient ripple, 0..1 (a permanent churning wave). */
  turbulence: number;
  /** Which ambient wave shape to use. */
  wavePattern: WavePattern;
}

export const DEFAULT_STAGE: Omit<StageConfig, "rows" | "word" | "style" | "bg" | "zoom" | "inkStops" | "logoColor"> = {
  gradient: false,
  gradientAngle: 0,
  gradientFlow: 0,
  text: "",
  scanlines: 0.4,
  aberration: 1,
  curvature: 1,
  trail: false,
  shock: false,
  turbulence: 0,
  wavePattern: "wavefront",
};

// Rows of glyphs down the canvas = BASE_ROWS / zoom. Smaller zoom → more, smaller
// cells → more words fit. Driven by the Zoom control.
const BASE_ROWS = 22;
// spring rate for the bend (1/time-constant); ~100ms half-life
// velocity smoothing rate
const VEL_SMOOTH = 5.0;
// shockwaves older than this (seconds) are retired
const SHOCK_LIFE = 2.4;

export interface StageHandle {
  /** Restart the formation so the word condenses from scratch. */
  replay: () => void;
  /** Set the pointer in normalized coords (-1..1); null = pointer left. */
  setPointer: (p: { x: number; y: number } | null) => void;
  /** Spawn a click shockwave at normalized coords (-1..1). */
  burst: (x: number, y: number) => void;
}

function resolveTarget(c: StageConfig): Target {
  if (c.rows && c.rows.length) return makeTarget(c.rows);
  return makeTarget(renderWord(c.word ?? " ", c.style ?? "slant"));
}

function targetKey(c: StageConfig): string {
  return c.rows ? "rows:" + c.rows.join("|") : `word:${c.word}:${c.style}`;
}

export interface StageEvents {
  /** The entrance (re)started — soup begins condensing into the word. */
  onFormationStart?: () => void;
  /** The word has fully formed (formation reached ~1). Fires once per entrance. */
  onSettle?: () => void;
  /** Visibility changed (canvas entered/left the on-screen play band). */
  onVisible?: (visible: boolean) => void;
  /** The very first frame has been drawn (canvas now has real content). */
  onFirstFrame?: () => void;
  /** Pointer moved over the canvas; `speed` is 0..1 (normalized units/frame). */
  onPointerMove?: (speed: number) => void;
  /** Pointer pressed on the canvas (e.g. for a click sound). */
  onPointerDown?: () => void;
}

export function useSwirlStage(
  canvasRef: RefObject<HTMLCanvasElement | null>,
  cfgRef: RefObject<StageConfig>,
  onFail: () => void,
  eventsRef?: RefObject<StageEvents>,
): RefObject<StageHandle> {
  const handle = useRef<StageHandle>({ replay: () => {}, setPointer: () => {}, burst: () => {} });

  useEffect(() => {
    const canvas = canvasRef.current;
    if (!canvas) return;

    const r: Renderer | null = createRenderer(canvas);
    if (!r) {
      onFail();
      return;
    }
    const { gl } = r;
    const { round, max, floor } = Math;

    // Glyph set: printable ASCII + whatever box/block chars the fonts use.
    const glyphs: string[] = [];
    const lookup: Record<string, number> = Object.create(null);
    const addGlyph = (cc: string) => {
      if (lookup[cc] !== undefined) return;
      lookup[cc] = glyphs.length;
      glyphs.push(cc);
    };
    // printable ASCII covers most styles + anything the user types; the full
    // block is for the Banner face
    for (let code = 32; code <= 126; code++) addGlyph(String.fromCharCode(code));
    for (const cc of "█▓") addGlyph(cc);
    addGlyph(" ");
    const spaceSlot = lookup[" "];
    const slotOf = (cc: string, weight: number) => {
      const i = lookup[cc];
      return weight * glyphs.length + (i === undefined ? spaceSlot : i);
    };

    let source: string[] = cfgRef.current.text.split("\n").map((e) => e.replace(/\t/g, "    "));
    let lastText = cfgRef.current.text;

    let target: Target = resolveTarget(cfgRef.current);
    let lastTargetKey = targetKey(cfgRef.current);
    let lastZoom = cfgRef.current.zoom;

    let atlas: GlyphAtlas | null = null;
    let grid: FieldGrid | null = null;
    let buffers: FieldBuffers | null = null;
    let lastCw = -1;
    let lastCh = -1;

    let ro: ResizeObserver | null = null;
    if (typeof ResizeObserver !== "undefined") {
      ro = new ResizeObserver(() => {
        lastCw = -1;
        lastCh = -1;
      });
      ro.observe(canvas);
    }

    // ── play only while roughly centered on screen ──
    // The rAF loop runs only when the canvas is near the vertical middle of the
    // viewport; offscreen it stops entirely (zero per-frame work). Each time it
    // re-enters, the entrance replays so the word condenses in as you scroll to
    // it. rootMargin shrinks the trigger band to the middle ~30% of the screen.
    let visible = true;
    let io: IntersectionObserver | null = null;

    // ── interaction state (per frame) ──
    const pointer = { x: 0, y: 0, active: false };
    const trail = makeTrailField();
    let velX = 0; // smoothed pointer velocity (normalized units / sec)
    let velY = 0;
    let prevPx = 0;
    let prevPy = 0;
    let havePrev = false;
    const shocks: Shock[] = [];

    function rebuild(cw: number, ch: number) {
      const c = cfgRef.current;
      const rows = max(8, round(BASE_ROWS / max(0.3, c.zoom)));
      atlas = buildAtlas(gl, r!.glyphTex, r!.scratch, glyphs, max(8, round(ch / rows)));
      const gridRows = max(target.rows.length, Math.ceil(ch / atlas.inkSize) + 1);
      const contentH = gridRows * atlas.inkSize;
      const cols = floor(cw / atlas.advance);
      grid = {
        cols,
        rows: gridRows,
        inkSize: atlas.inkSize,
        vOffset: round((ch - contentH) / 2),
        targetX: max(0, round((cols - (target.rows[0]?.length ?? 0)) / 2)),
        targetY: max(0, round((gridRows - target.rows.length) / 2)),
      };
      buffers = makeBuffers(gridRows * cols);
      r!.allocCells(buffers);
      r!.resizeTargets(cw, ch);
    }

    let startTime = 0;
    let prevTime = 0;
    let raf = 0;
    let settled = false; // has onSettle fired for the current entrance
    let firstFramePainted = false; // has the canvas drawn its first frame
    // seconds until the word is fully formed — matches FORMATION_SEC in
    // vortex-field (the formation easeOutQuad is ~done by then)
    const FORMATION_SETTLE_SEC = 1.8;

    // (re)start the loop, resetting timing so the first frame after a pause
    // doesn't compute a giant dt from the time spent offscreen.
    function startLoop() {
      if (raf !== 0) return;
      prevTime = 0;
      raf = requestAnimationFrame(frame);
    }
    function stopLoop() {
      if (raf !== 0) {
        cancelAnimationFrame(raf);
        raf = 0;
      }
    }

    handle.current = {
      replay: () => {
        startTime = 0;
      },
      setPointer: (p) => {
        if (p) {
          pointer.x = p.x;
          pointer.y = p.y;
          pointer.active = true;
        } else {
          pointer.active = false;
        }
      },
      burst: (x, y) => {
        shocks.push({ x, y, age: 0 });
        if (shocks.length > 4) shocks.shift();
      },
    };

    function frame(time: number) {
      const c = cfgRef.current;
      if (c.text !== lastText) {
        lastText = c.text;
        source = c.text.split("\n").map((e) => e.replace(/\t/g, "    "));
        lastCw = -1;
      }
      const tk = targetKey(c);
      if (tk !== lastTargetKey) {
        lastTargetKey = tk;
        target = resolveTarget(c);
        lastCw = -1;
        startTime = 0; // re-run the entrance so the new word condenses in
      }
      if (c.zoom !== lastZoom) {
        lastZoom = c.zoom;
        lastCw = -1;
      }

      const rect = canvas!.getBoundingClientRect();
      const dpr = Math.min(window.devicePixelRatio || 1, 2);
      const cw = round(rect.width * dpr);
      const ch = round(rect.height * dpr);
      if (cw > 0 && ch > 0 && (cw !== lastCw || ch !== lastCh)) {
        rebuild(cw, ch);
        lastCw = cw;
        lastCh = ch;
      }

      if (grid && atlas && buffers) {
        if (startTime === 0) {
          startTime = time;
          settled = false; // a fresh entrance is beginning
          eventsRef?.current?.onFormationStart?.();
        }
        if (prevTime === 0) prevTime = time; // first frame after a (re)start
        const elapsed = time - startTime;
        const dt = Math.min(0.05, Math.max(0.001, (time - prevTime) / 1000));
        prevTime = time;

        // fire onSettle once the word has fully formed (formation ~1)
        if (!settled && elapsed * 0.001 >= FORMATION_SETTLE_SEC) {
          settled = true;
          eventsRef?.current?.onSettle?.();
        }

        // ── persistent cursor trail: deposit at the pointer, then decay+diffuse ──
        if (c.trail) {
          if (pointer.active) {
            const vSp = 1 - Math.exp(-VEL_SMOOTH * dt);
            if (havePrev) {
              const instVx = (pointer.x - prevPx) / dt;
              const instVy = (pointer.y - prevPy) / dt;
              velX += (instVx - velX) * vSp;
              velY += (instVy - velY) * vSp;
            }
            prevPx = pointer.x;
            prevPy = pointer.y;
            havePrev = true;
            depositTrail(trail, pointer.x, pointer.y, velX, velY, dt);
          } else {
            havePrev = false;
            velX *= 1 - (1 - Math.exp(-VEL_SMOOTH * dt));
            velY *= 1 - (1 - Math.exp(-VEL_SMOOTH * dt));
          }
          stepTrail(trail, dt);
        }

        // ── age + retire shockwaves ──
        if (shocks.length) {
          for (let i = 0; i < shocks.length; i++) shocks[i].age += dt;
          for (let i = shocks.length - 1; i >= 0; i--) {
            if (shocks[i].age > SHOCK_LIFE) shocks.splice(i, 1);
          }
        }

        const stops = (c.gradient ? c.inkStops : c.inkStops.slice(0, 1)).map(hexToRgb01);
        const paint: InkPaint = {
          stops: stops.length ? (stops as [number, number, number][]) : [[1, 1, 1]],
          angle: c.gradientAngle,
          flow: c.gradient ? (elapsed * 0.001 * c.gradientFlow) : 0,
          gradient: c.gradient && stops.length > 1,
          mode: c.gradientMode ?? "rows",
        };
        const bg = hexToRgb01(c.bg);
        const count = composeField({
          grid,
          atlas,
          buffers,
          source: source.length ? source : [""],
          target,
          elapsed,
          paint,
          logo: hexToRgb01(c.logoColor),
          slotOf,
          trail: c.trail ? trail : undefined,
          trailStrength: c.trailStrength,
          trailFlare: c.trailFlare ? hexToRgb01(c.trailFlare) : undefined,
          shocks: c.shock && shocks.length ? shocks : undefined,
          turbulence: c.turbulence,
          wavePattern: c.wavePattern,
        });
        r!.drawField(count, grid, buffers, bg);
        r!.drawCrt(elapsed * 0.001, cw, ch, {
          scanline: c.scanlines,
          aberration: c.aberration,
          curvature: c.curvature,
          bg,
        });
        if (!firstFramePainted) {
          firstFramePainted = true;
          eventsRef?.current?.onFirstFrame?.();
        }
      }
      raf = 0;
      if (visible) raf = requestAnimationFrame(frame); // stop entirely if offscreen
    }

    if (typeof IntersectionObserver !== "undefined") {
      io = new IntersectionObserver(
        ([entry]) => {
          const nowVisible = entry.isIntersecting;
          if (nowVisible && !visible) {
            visible = true;
            startTime = 0; // replay the entrance each time it scrolls into the middle
            startLoop();
            eventsRef?.current?.onVisible?.(true);
          } else if (!nowVisible && visible) {
            visible = false;
            stopLoop();
            eventsRef?.current?.onVisible?.(false);
          }
        },
        // only "in view" when the canvas is near the vertical middle of the
        // screen: shrink the viewport's effective top/bottom by 35% each.
        { threshold: 0, rootMargin: "-35% 0px -35% 0px" },
      );
      io.observe(canvas);
      // Start hidden until the observer reports; the first callback fires async.
      visible = false;
    } else {
      startLoop();
    }

    return () => {
      stopLoop();
      ro?.disconnect();
      io?.disconnect();
      r.dispose();
    };
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, []);

  return handle;
}

// The WebGL2 plumbing: compile both programs, allocate the buffers and the
// offscreen framebuffer, and expose two draw calls — drawField (instanced text
// into the FBO) and drawCrt (the post pass to the screen). The React component
// drives this; none of the per-frame math lives here.

import { CRT_VERT, CRT_FRAG, TEXT_VERT, TEXT_FRAG } from "./crt-pass";
import type { FieldBuffers, FieldGrid } from "./vortex-field";

export interface Renderer {
  gl: WebGL2RenderingContext;
  glyphTex: WebGLTexture;
  scratch: HTMLCanvasElement;
  resizeTargets: (cw: number, ch: number) => void;
  allocCells: (buffers: FieldBuffers) => void;
  drawField: (
    count: number,
    grid: FieldGrid,
    buffers: FieldBuffers,
    bg: [number, number, number],
  ) => void;
  drawCrt: (
    elapsedSec: number,
    cw: number,
    ch: number,
    uniforms: { scanline: number; aberration: number; curvature: number; bg: [number, number, number] },
  ) => void;
  dispose: () => void;
}

/** Returns null if WebGL2 / 2D context / shader compile fails. */
export function createRenderer(canvas: HTMLCanvasElement): Renderer | null {
  const gl = canvas.getContext("webgl2", { alpha: true, antialias: false, depth: false });
  if (!gl) return null;
  gl.disable(gl.DEPTH_TEST);

  const scratch = document.createElement("canvas");
  if (!scratch.getContext("2d")) return null;

  let ok = true;
  const compile = (type: number, src: string) => {
    const s = gl.createShader(type)!;
    gl.shaderSource(s, src);
    gl.compileShader(s);
    if (!gl.getShaderParameter(s, gl.COMPILE_STATUS)) {
      console.error("swirl shader compile failed:", gl.getShaderInfoLog(s));
      ok = false;
    }
    return s;
  };
  const link = (vs: WebGLShader, fs: WebGLShader) => {
    const p = gl.createProgram()!;
    gl.attachShader(p, vs);
    gl.attachShader(p, fs);
    gl.linkProgram(p);
    if (!gl.getProgramParameter(p, gl.LINK_STATUS)) {
      console.error("swirl program link failed:", gl.getProgramInfoLog(p));
      ok = false;
    }
    return p;
  };

  const crtProg = link(compile(gl.VERTEX_SHADER, CRT_VERT), compile(gl.FRAGMENT_SHADER, CRT_FRAG));
  const textProg = link(compile(gl.VERTEX_SHADER, TEXT_VERT), compile(gl.FRAGMENT_SHADER, TEXT_FRAG));
  if (!ok) return null;

  const C = {
    aPos: gl.getAttribLocation(crtProg, "aPos"),
    aUv: gl.getAttribLocation(crtProg, "aUv"),
    uTex: gl.getUniformLocation(crtProg, "uTex"),
    uTime: gl.getUniformLocation(crtProg, "uTime"),
    uRes: gl.getUniformLocation(crtProg, "uRes"),
    uScanline: gl.getUniformLocation(crtProg, "uScanline"),
    uAberration: gl.getUniformLocation(crtProg, "uAberration"),
    uCurvature: gl.getUniformLocation(crtProg, "uCurvature"),
    uBg: gl.getUniformLocation(crtProg, "uBg"),
  };
  const T = {
    aCorner: gl.getAttribLocation(textProg, "aCorner"),
    aBounds: gl.getAttribLocation(textProg, "aBounds"),
    aGlyphUv: gl.getAttribLocation(textProg, "aGlyphUv"),
    aColor: gl.getAttribLocation(textProg, "aColor"),
    uTarget: gl.getUniformLocation(textProg, "uTarget"),
    uAtlas: gl.getUniformLocation(textProg, "uAtlas"),
  };

  const posBuf = gl.createBuffer()!;
  const uvBuf = gl.createBuffer()!;
  const cornerBuf = gl.createBuffer()!;
  const boundsBuf = gl.createBuffer()!;
  const glyphUvBuf = gl.createBuffer()!;
  const colorBuf = gl.createBuffer()!;
  const glyphTex = gl.createTexture()!;
  const textTex = gl.createTexture()!;
  const fbo = gl.createFramebuffer()!;

  gl.bindBuffer(gl.ARRAY_BUFFER, posBuf);
  gl.bufferData(gl.ARRAY_BUFFER, new Float32Array([-1, 1, 1, 1, -1, -1, 1, -1]), gl.STATIC_DRAW);
  gl.bindBuffer(gl.ARRAY_BUFFER, uvBuf);
  gl.bufferData(gl.ARRAY_BUFFER, new Float32Array([0, 1, 1, 1, 0, 0, 1, 0]), gl.STATIC_DRAW);
  gl.bindBuffer(gl.ARRAY_BUFFER, cornerBuf);
  gl.bufferData(gl.ARRAY_BUFFER, new Float32Array([0, 0, 1, 0, 0, 1, 1, 1]), gl.STATIC_DRAW);

  const configureTex = (tex: WebGLTexture) => {
    gl.bindTexture(gl.TEXTURE_2D, tex);
    gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE);
    gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE);
    gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR);
    gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.LINEAR);
  };
  configureTex(glyphTex);
  configureTex(textTex);

  const allocStream = (buffer: WebGLBuffer, data: Float32Array) => {
    gl.bindBuffer(gl.ARRAY_BUFFER, buffer);
    gl.bufferData(gl.ARRAY_BUFFER, data.byteLength, gl.DYNAMIC_DRAW);
  };
  const streamAttr = (buffer: WebGLBuffer, data: Float32Array, loc: number) => {
    gl.bindBuffer(gl.ARRAY_BUFFER, buffer);
    gl.bufferSubData(gl.ARRAY_BUFFER, 0, data);
    gl.vertexAttribPointer(loc, 4, gl.FLOAT, false, 0, 0);
    gl.enableVertexAttribArray(loc);
    gl.vertexAttribDivisor(loc, 1);
  };

  return {
    gl,
    glyphTex,
    scratch,
    resizeTargets(cw, ch) {
      canvas.width = cw;
      canvas.height = ch;
      gl.bindTexture(gl.TEXTURE_2D, textTex);
      gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, cw, ch, 0, gl.RGBA, gl.UNSIGNED_BYTE, null);
      gl.bindFramebuffer(gl.FRAMEBUFFER, fbo);
      gl.framebufferTexture2D(gl.FRAMEBUFFER, gl.COLOR_ATTACHMENT0, gl.TEXTURE_2D, textTex, 0);
      gl.bindFramebuffer(gl.FRAMEBUFFER, null);
    },
    allocCells(buffers) {
      allocStream(boundsBuf, buffers.bounds);
      allocStream(glyphUvBuf, buffers.glyphUvs);
      allocStream(colorBuf, buffers.colors);
    },
    drawField(count, grid, buffers, bg) {
      void grid;
      gl.bindFramebuffer(gl.FRAMEBUFFER, fbo);
      gl.viewport(0, 0, canvas.width, canvas.height);
      gl.disable(gl.DEPTH_TEST);
      gl.clearColor(bg[0], bg[1], bg[2], 1);
      gl.clear(gl.COLOR_BUFFER_BIT);
      gl.enable(gl.BLEND);
      gl.blendFunc(gl.SRC_ALPHA, gl.ONE_MINUS_SRC_ALPHA);
      gl.useProgram(textProg);
      gl.activeTexture(gl.TEXTURE0);
      gl.bindTexture(gl.TEXTURE_2D, glyphTex);
      gl.uniform1i(T.uAtlas, 0);
      gl.uniform2f(T.uTarget, canvas.width, canvas.height);
      gl.bindBuffer(gl.ARRAY_BUFFER, cornerBuf);
      gl.vertexAttribPointer(T.aCorner, 2, gl.FLOAT, false, 0, 0);
      gl.enableVertexAttribArray(T.aCorner);
      gl.vertexAttribDivisor(T.aCorner, 0);
      streamAttr(boundsBuf, buffers.bounds.subarray(0, count * 4), T.aBounds);
      streamAttr(glyphUvBuf, buffers.glyphUvs.subarray(0, count * 4), T.aGlyphUv);
      streamAttr(colorBuf, buffers.colors.subarray(0, count * 4), T.aColor);
      gl.drawArraysInstanced(gl.TRIANGLE_STRIP, 0, 4, count);
      gl.vertexAttribDivisor(T.aBounds, 0);
      gl.vertexAttribDivisor(T.aGlyphUv, 0);
      gl.vertexAttribDivisor(T.aColor, 0);
    },
    drawCrt(elapsedSec, cw, ch, u) {
      gl.bindFramebuffer(gl.FRAMEBUFFER, null);
      gl.viewport(0, 0, cw, ch);
      gl.disable(gl.BLEND);
      gl.clearColor(0, 0, 0, 0);
      gl.clear(gl.COLOR_BUFFER_BIT);
      gl.useProgram(crtProg);
      gl.activeTexture(gl.TEXTURE0);
      gl.bindTexture(gl.TEXTURE_2D, textTex);
      gl.bindBuffer(gl.ARRAY_BUFFER, posBuf);
      gl.vertexAttribPointer(C.aPos, 2, gl.FLOAT, false, 0, 0);
      gl.enableVertexAttribArray(C.aPos);
      gl.bindBuffer(gl.ARRAY_BUFFER, uvBuf);
      gl.vertexAttribPointer(C.aUv, 2, gl.FLOAT, false, 0, 0);
      gl.enableVertexAttribArray(C.aUv);
      gl.uniform1i(C.uTex, 0);
      gl.uniform1f(C.uTime, elapsedSec);
      gl.uniform2f(C.uRes, cw, ch);
      gl.uniform1f(C.uScanline, u.scanline);
      gl.uniform1f(C.uAberration, u.aberration);
      gl.uniform1f(C.uCurvature, u.curvature);
      gl.uniform3f(C.uBg, u.bg[0], u.bg[1], u.bg[2]);
      gl.drawArrays(gl.TRIANGLE_STRIP, 0, 4);
    },
    dispose() {
      // Intentionally NOT calling WEBGL_lose_context().loseContext(): under
      // React Strict Mode the effect mounts → cleans up → remounts on the same
      // <canvas>, and force-losing the context left the remount with a dead one
      // (the swirl only appeared after a hard reload). Let GC reclaim it.
    },
  };
}

// Glyph atlas: we rasterize every character we might draw ONCE into a hidden 2D
// canvas, then hand that canvas to the GPU as a single texture. After that,
// drawing N letters is N UV lookups into one image instead of N canvas writes —
// which is the whole reason the field can be thousands of cells and still hold
// 60fps.
//
// Two weights are baked (regular + bold) so the resolving word can fade in a
// bolder stroke over the background swirl without a second atlas.

export const WEIGHT_REGULAR = 0;
export const WEIGHT_BOLD = 1;
export const WEIGHT_COUNT = 2;

export interface GlyphAtlas {
  /** Rasterization pixel size (also the cell font-size). */
  inkSize: number;
  /** Advance width of one monospace cell. */
  advance: number;
  cellW: number;
  cellH: number;
  baseline: number;
  pad: number;
  /** [u0,v0,u1,v1] per (weight*glyphCount + glyphIndex). */
  uvs: number[][];
  canvas: HTMLCanvasElement;
}

/**
 * Build the atlas for a given ink size over the supplied glyph list, uploading
 * it into `tex`. The caller owns the GL context and the glyph ordering.
 */
export function buildAtlas(
  gl: WebGL2RenderingContext,
  tex: WebGLTexture,
  scratch: HTMLCanvasElement,
  glyphs: string[],
  inkSize: number,
): GlyphAtlas {
  const { max, ceil, sqrt, floor } = Math;
  const ctx = scratch.getContext("2d")!;
  const baseFont = `${inkSize}px monospace`;
  ctx.font = baseFont;
  ctx.textBaseline = "alphabetic";
  ctx.textAlign = "left";
  const advance = ctx.measureText("M").width;

  // measure the tallest ascent/descent across both weights so every cell fits
  let asc = 0;
  let desc = 0;
  for (let w = 0; w < WEIGHT_COUNT; w++) {
    ctx.font = w === WEIGHT_BOLD ? `bold ${baseFont}` : baseFont;
    for (const g of glyphs) {
      const m = ctx.measureText(g);
      asc = max(asc, m.actualBoundingBoxAscent || inkSize * 0.8);
      desc = max(desc, m.actualBoundingBoxDescent || inkSize * 0.25);
    }
  }

  const pad = max(2, ceil(inkSize * 0.18));
  const cellW = max(1, ceil(advance + pad * 2));
  const cellH = max(1, ceil(asc + desc + pad * 2));
  const baseline = pad + ceil(asc);

  const count = glyphs.length * WEIGHT_COUNT;
  const cols = ceil(sqrt(count));
  const rows = ceil(count / cols);
  scratch.width = cols * cellW;
  scratch.height = rows * cellH;
  ctx.clearRect(0, 0, scratch.width, scratch.height);
  ctx.fillStyle = "#ffffff";
  ctx.textBaseline = "alphabetic";
  ctx.textAlign = "left";

  const uvs: number[][] = new Array(count);
  for (let w = 0; w < WEIGHT_COUNT; w++) {
    ctx.font = w === WEIGHT_BOLD ? `bold ${baseFont}` : baseFont;
    for (let i = 0; i < glyphs.length; i++) {
      const idx = w * glyphs.length + i;
      const cx = (idx % cols) * cellW;
      const cy = floor(idx / cols) * cellH;
      ctx.fillText(glyphs[i], cx + pad, cy + baseline);
      uvs[idx] = [
        cx / scratch.width,
        cy / scratch.height,
        (cx + cellW) / scratch.width,
        (cy + cellH) / scratch.height,
      ];
    }
  }

  gl.pixelStorei(gl.UNPACK_FLIP_Y_WEBGL, false);
  gl.pixelStorei(gl.UNPACK_PREMULTIPLY_ALPHA_WEBGL, false);
  gl.bindTexture(gl.TEXTURE_2D, tex);
  gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, scratch);

  return { inkSize, advance, cellW, cellH, baseline, pad, uvs, canvas: scratch };
}

// The vortex field: a dense grid of monospace cells. Every frame each cell's
// position is rotated around the center by a twist that grows toward the middle
// (fast core, still rim — that gradient is the whirlpool), then the source text
// is sampled at the rotated coordinate. Where a cell lands inside the target
// word's stencil, its character is pulled toward the word so the name condenses
// out of the soup.
//
// Renamed and re-derived from a study of Midjourney Medical's ASCII intro; the
// twist falloff here is our own smoothstep core rather than a raw 1/dist.

import {
  WEIGHT_REGULAR,
  WEIGHT_BOLD,
  type GlyphAtlas,
} from "./glyph-atlas";
import { sampleTrail, type TrailField } from "./trail-field";

// ---- tuning ----
/** Base angular speed; the falloff below scales it up toward the core. */
export const TWIST_RATE = 0.1;
/** Floor on the radius so the very center doesn't spin to infinity. */
export const CORE_FLOOR = 0.1;
/** Seconds for the word to fully condense out of the field. Long enough that the
 *  crossfade entrance clearly reads, short enough not to drag on each keystroke. */
export const FORMATION_SEC = 1.8;
/** How wide the letter-body halo is when carving the stencil. */
export const STENCIL_HALO = 4;
/** Sampling stays in [-1,1] so columns map cleanly onto the grid width. */
export const FIELD_EXTENT = 1.0;

const SPACE = " ";

const easeOutQuad = (t: number) => t * (2 - t);
const mix = (a: number, b: number, t: number) => a * (1 - t) + b * t;
const clamp01 = (v: number) => (v < 0 ? 0 : v > 1 ? 1 : v);
// The twist a cell receives, given its distance from the center: strong at the
// core, fading toward the rim. Expressed as TWIST_RATE over the (floored)
// radius — the floor stops the center spinning to infinity.
const twistAt = (spin: number, dist: number) =>
  (spin * TWIST_RATE) / Math.max(CORE_FLOOR, dist);

/**
 * The target word laid out as 5+ rows of ASCII, plus a stencil marking which
 * cells belong to the letter bodies (so the morph knows what to carve).
 */
export interface Target {
  rows: string[];
  stencil: boolean[][];
}

/** Build the body stencil around a word's glyph cells (incl. interior counters). */
export function carveStencil(rows: string[]): boolean[][] {
  const w = Math.max(0, ...rows.map((l) => l.length));
  return rows.map((line) => {
    const isInk = (x: number) => x >= 0 && x < w && line[x] !== undefined && line[x] !== " ";
    return Array.from({ length: w }, (_u, x) => {
      if (isInk(x) || isInk(x - 1) || isInk(x + 1)) return true;
      // a cell sitting inside a letter counter (ink on both sides) still belongs
      let left = false;
      let right = false;
      for (let d = 1; d <= STENCIL_HALO; d++) {
        if (isInk(x - d)) left = true;
        if (isInk(x + d)) right = true;
      }
      return left && right;
    });
  });
}

export function makeTarget(rows: string[]): Target {
  const w = Math.max(0, ...rows.map((l) => l.length));
  const padded = rows.map((l) => l.padEnd(w, " "));
  return { rows: padded, stencil: carveStencil(padded) };
}

/** A reusable cell buffer the composer fills each frame. */
export interface FieldBuffers {
  bounds: Float32Array;
  glyphUvs: Float32Array;
  colors: Float32Array;
}

export function makeBuffers(maxCells: number): FieldBuffers {
  return {
    bounds: new Float32Array(maxCells * 4),
    glyphUvs: new Float32Array(maxCells * 4),
    colors: new Float32Array(maxCells * 4),
  };
}

export interface FieldGrid {
  cols: number;
  rows: number;
  inkSize: number;
  vOffset: number;
  targetX: number;
  targetY: number;
}

/** Per-cell ink color. Flat color, or a gradient sampled across the field. */
// ---- ink: a flowing multi-stop gradient sampled per cell ----
/**
 * How the stops are mapped onto the field:
 *  - "rows":  hue follows the SOURCE row each character was pulled from, so a
 *             letter carries its color as the vortex flings it around — the
 *             rainbow spirals with the swirl instead of sitting still.
 *  - "axis":  the legacy flat screen-space gradient (a fixed sheet the letters
 *             slide across). Kept for the simple look.
 */
export type InkMode = "rows" | "axis";

export interface InkPaint {
  /** Ordered color stops in 0..1 RGB. One stop = flat fill. */
  stops: [number, number, number][];
  /** Gradient axis direction in radians (0 = left→right). Used by "axis" mode. */
  angle: number;
  /** Phase the bands have drifted (animated by the caller). */
  flow: number;
  /** When false, every cell is stops[0]. */
  gradient: boolean;
  /** Which mapping to use (defaults to "rows" when gradient is on). */
  mode: InkMode;
}

// ---- depth layers stacked on top of the base hue ----
/** Max ± hue offset a single cell can drift, in stop-space (so neighbours
 *  shimmer between adjacent colors instead of matching exactly). */
const HUE_DRIFT = 0.12;
/** How fast each cell's drift cycles. */
const HUE_DRIFT_SPEED = 0.6;
/** Brightness floor for the slowest (rim) cells; the fast core reaches 1. */
const SPEED_DIM = 0.55;

// sample the stop ramp as a closed loop at position t (any real; wrapped to 0..1)
function rampAt(stops: [number, number, number][], t: number): [number, number, number] {
  t = t - Math.floor(t); // 0..1 wrapped
  const seg = t * stops.length;
  const i = Math.floor(seg) % stops.length;
  const j = (i + 1) % stops.length;
  const f = seg - Math.floor(seg);
  const a = stops[i];
  const b = stops[j];
  return [mix(a[0], b[0], f), mix(a[1], b[1], f), mix(a[2], b[2], f)];
}

/** A click shockwave: an expanding ring that displaces the cells it crosses. */
export interface Shock {
  /** Origin in normalized field units (-1..1). */
  x: number;
  y: number;
  /** Seconds since the click (the caller ages this). */
  age: number;
}

// cursor-trail tuning. The trail is a persistent heat+flow field (see
// trail-field.ts); here we turn a cell's local heat into two layers:
//   1. a directional WAKE — push the cell along the remembered flow direction
//   2. a local SWIRL-UP — add to the cell's twist so hot regions spin faster
// Both scale per cell by heat, so a faint lingering trail keeps nudging and
// churning the soup long after the cursor has gone.
const WAKE_PUSH = 0.34; // max wake displacement at full heat (half-field units)
const SWIRL_GAIN = 4.5; // extra spin multiplier per unit heat (strong churn)
const TRAIL_NOISE = 0.9; // per-cell variation so the wake isn't a uniform slab
const FLARE_GAIN = 2.4; // how hard heat drives the color flare (clamped to 1)
// shockwave tuning
const SHOCK_SPEED = 1.4; // ring radius growth per second (field units)
const SHOCK_WIDTH = 0.13; // ring thickness
const SHOCK_PUSH = 0.12; // radial shove at the ring crest (gentle)
const SHOCK_FADE = 1.9; // exp decay per second

// deterministic per-cell hash → 0..1 (so a cell's noise is stable frame to frame)
const cellHash = (col: number, row: number) => {
  const n = Math.sin(col * 127.1 + row * 311.7) * 43758.5453;
  return n - Math.floor(n);
};

// Where this cell sits on the color ramp BEFORE the depth layers. "rows" keys
// off the source row (color travels with the letter); "axis" is the old
// screen-space projection.
interface PaintSample {
  /** Final screen position (-1..1), for the legacy axis mode. */
  fx: number;
  fy: number;
  /** Source row this character came from, normalized 0..1 (for "rows"). */
  srcRow: number;
  /** Stable per-cell hash 0..1, for the per-letter hue drift. */
  jitter: number;
  /** Swirl speed at this cell 0..1 (1 = fast core), for speed brightness. */
  speed: number;
  /** Animation phase in seconds, for the drift cycle. */
  time: number;
}

function paintAt(paint: InkPaint, s: PaintSample): [number, number, number] {
  const stops = paint.stops;
  if (!paint.gradient || stops.length < 2) return stops[0];

  // ── base hue position on the ramp ──
  let t: number;
  if (paint.mode === "axis") {
    const ca = Math.cos(paint.angle);
    const sa = Math.sin(paint.angle);
    t = (s.fx * ca + s.fy * sa) * 0.5 + 0.5 + paint.flow;
  } else {
    // rows: each source line maps to a point on the loop, drifting by flow
    t = s.srcRow + paint.flow;
  }

  // ── layer 1: per-letter hue drift — a slow ± wobble unique to each cell, so
  //    neighbours shimmer between adjacent colors instead of matching exactly ──
  t += Math.sin(s.time * HUE_DRIFT_SPEED + s.jitter * Math.PI * 2) * HUE_DRIFT * s.jitter;

  const rgb = rampAt(stops, t);

  // ── layer 2: speed brightness — the fast-spinning core renders full, the slow
  //    rim dims toward SPEED_DIM, so the swirl's energy reads in the color ──
  const bright = mix(SPEED_DIM, 1, s.speed);
  return [rgb[0] * bright, rgb[1] * bright, rgb[2] * bright];
}

function pushCell(
  buf: FieldBuffers,
  atlas: GlyphAtlas,
  glyphSlot: number,
  x: number,
  baseline: number,
  rgb: [number, number, number],
  alpha: number,
  state: { count: number },
) {
  if (alpha <= 0) return;
  const o = state.count * 4;
  const uv = atlas.uvs[glyphSlot];
  buf.bounds[o] = x - atlas.pad;
  buf.bounds[o + 1] = baseline - atlas.baseline;
  buf.bounds[o + 2] = x - atlas.pad + atlas.cellW;
  buf.bounds[o + 3] = baseline - atlas.baseline + atlas.cellH;
  buf.glyphUvs[o] = uv[0];
  buf.glyphUvs[o + 1] = uv[1];
  buf.glyphUvs[o + 2] = uv[2];
  buf.glyphUvs[o + 3] = uv[3];
  buf.colors[o] = rgb[0];
  buf.colors[o + 1] = rgb[1];
  buf.colors[o + 2] = rgb[2];
  buf.colors[o + 3] = alpha;
  state.count++;
}

export interface ComposeArgs {
  grid: FieldGrid;
  atlas: GlyphAtlas;
  buffers: FieldBuffers;
  source: string[];
  target: Target;
  /** ms since the formation (re)started. */
  elapsed: number;
  paint: InkPaint;
  /** Color of the resolved logo word in 0..1 RGB (independent of the swirl ink). */
  logo: [number, number, number];
  /** Glyph index lookup (resolves a character to its atlas slot, per weight). */
  slotOf: (ch: string, weight: number) => number;
  /** Persistent cursor trail: drives the directional wake + local swirl-up. */
  trail?: TrailField;
  /** Overall trail intensity multiplier (1 = default). */
  trailStrength?: number;
  /** Color hot trail cells flare toward (0..1 RGB); omit for no color flare. */
  trailFlare?: [number, number, number];
  /** Active click shockwaves (optional). */
  shocks?: Shock[];
  /** Sustained ambient wave distortion, 0..1 (a permanent rippling). */
  turbulence?: number;
  /** Which ambient wave shape to use (defaults to "wavefront"). */
  wavePattern?: WavePattern;
}

/**
 * Fill the buffers for this frame and return how many cells were written. The
 * caller uploads `buffers` and issues one instanced draw of `count` quads.
 *
 * The swirl sampling is unchanged from the faithful rebuild; the cursor bend and
 * click shockwaves are applied AFTER, as a positional displacement on each
 * cell's screen position — so the letters physically shove around the pointer
 * and ripple out from a click, rather than the whole field shifting.
 */
// ── ambient wave: a sustained displacement pattern over the whole field. The
// strength is `turbulence` (0..1); the shape is `wavePattern`. ──
export type WavePattern = "wavefront" | "ripples" | "flow" | "cloth";

const WAVE_AMP = 0.16; // max displacement at turbulence = 1
const WAVE_FREQ = 2.4; // spatial frequency
const WAVE_SPEED = 0.9; // travel speed
const WAVE_DIR = Math.PI * 0.15; // wavefront travel direction (radians)

// cheap value noise (hash-lerp) for the "flow" pattern — smooth, scrolling,
// non-repeating. Not Perlin, but plenty for a soft drift.
const vnoise = (x: number, y: number): number => {
  const xi = Math.floor(x);
  const yi = Math.floor(y);
  const xf = x - xi;
  const yf = y - yi;
  const h = (a: number, b: number) => {
    const n = Math.sin(a * 127.1 + b * 311.7) * 43758.5453;
    return n - Math.floor(n);
  };
  const u = xf * xf * (3 - 2 * xf);
  const v = yf * yf * (3 - 2 * yf);
  const a = h(xi, yi);
  const b = h(xi + 1, yi);
  const c = h(xi, yi + 1);
  const d = h(xi + 1, yi + 1);
  return (a + (b - a) * u + (c - a) * v + (a - b - c + d) * u * v) * 2 - 1; // -1..1
};

export function composeField(args: ComposeArgs): number {
  const { grid, atlas, buffers, source, target, elapsed, paint, logo, slotOf, trail, shocks, turbulence } = args;
  const wavePattern = args.wavePattern ?? "wavefront";
  const trailStrength = args.trailStrength ?? 1;
  const flare = args.trailFlare;
  const { sin, cos, sqrt, floor, round, exp, max, PI } = Math;
  const spin = elapsed * 0.001;
  const turbOn = !!turbulence && turbulence > 0.001;
  const tWave = elapsed * 0.001 * WAVE_SPEED;
  const waveDirX = cos(WAVE_DIR);
  const waveDirY = sin(WAVE_DIR);
  const formation = easeOutQuad(clamp01((elapsed * 0.001) / FORMATION_SEC));
  // Highlight tracks the logo color instead of being hardcoded white: nudge it
  // toward whichever end is "further" so a dark logo gets a soft sheen and a
  // light logo a faint lift — never a white wash that breaks on light bgs.
  const lum = 0.299 * logo[0] + 0.587 * logo[1] + 0.114 * logo[2];
  const hi: [number, number, number] = lum < 0.5
    ? [mix(logo[0], 1, 0.5), mix(logo[1], 1, 0.5), mix(logo[2], 1, 0.5)] // lighten dark logo
    : [mix(logo[0], 0, 0.35), mix(logo[1], 0, 0.35), mix(logo[2], 0, 0.35)]; // darken light logo
  const lines = source;
  const tw = target.rows;
  const tWidth = tw[0]?.length ?? 0;
  const state = { count: 0 };

  const trailOn = !!trail;
  const ts = { heat: 0, fx: 0, fy: 0 }; // reused per-cell trail sample
  const shockOn = !!shocks && shocks.length > 0;
  // px per normalized HALF-unit, per axis (the canvas is not square, so x and y
  // get their own scale or the push would skew on one axis).
  const halfW = (grid.cols * atlas.advance) / 2;
  const halfH = (grid.rows * grid.inkSize) / 2;

  for (let row = 0; row < grid.rows; row++) {
    const y = (1 - (row * 2) / grid.rows) * FIELD_EXTENT;
    const baseline = grid.vOffset + row * grid.inkSize;
    // screen-normalized y (-1..1, y-down) for displacement math
    const sny = (row + 0.5) / grid.rows * 2 - 1;
    for (let col = 0; col < grid.cols; col++) {
      const x = ((col * 2) / grid.cols - 1) * FIELD_EXTENT;
      const snx = (col + 0.5) / grid.cols * 2 - 1; // screen-normalized x (y-down)
      const dist = sqrt(x * x + y * y);

      // Sample the persistent cursor trail once (heat + remembered flow). The
      // heat locally spins the whirlpool up so a touched region keeps churning.
      let heat = 0;
      if (trailOn) {
        sampleTrail(trail!, snx, sny, ts);
        heat = ts.heat;
      }
      const twist = twistAt(spin, dist) * (1 + SWIRL_GAIN * heat * trailStrength);
      const s = sin(twist);
      const cse = cos(twist);
      const rx = x * cse + y * s;
      const ry = x * s - y * cse;

      // Sample the source: rows cycle through the prompt lines; the column
      // indexes DIRECTLY into the line so where a line runs out the cell is
      // blank — that ragged edge is what keeps the field open and airy.
      const sampleCol = floor(((rx + 1) / 2) * grid.cols);
      const sampleRow = floor(((ry + 1) / 2) * grid.rows);
      const srcLine = lines[((sampleRow % lines.length) + lines.length) % lines.length] ?? "";
      let ch = sampleCol >= 0 && sampleCol < srcLine.length ? srcLine[sampleCol] ?? SPACE : SPACE;

      // The name reads by NEGATIVE space: inside the logo footprint (the
      // stencil) the soup is cleared so letters never show through the word, and
      // the figlet's own glyph cells morph from the soup char toward the target
      // char as the formation ramps in (the entrance).
      let resolved = SPACE;
      const tx = col - grid.targetX;
      const ty = row - grid.targetY;
      const inTarget = tx >= 0 && tx < tWidth && ty >= 0 && ty < tw.length;
      // The whole logo footprint (every stencil cell, not just glyph cells) is
      // held rigid: no displacement reaches it, so the name never warps while the
      // soup around it bends, shocks and churns.
      const inLogo = inTarget && !!target.stencil[ty]?.[tx];
      if (inLogo) {
        const wordChar = tw[ty][tx];
        if (wordChar && wordChar !== " ") {
          ch = String.fromCharCode(
            round(mix(ch.charCodeAt(0), wordChar.charCodeAt(0), formation)),
          );
          resolved = ch;
        } else if (formation > 0.5) {
          ch = SPACE; // counter / halo cell clears once the word has formed
        }
      }
      if (ch === SPACE && resolved === SPACE) continue;

      // ── positional displacement: cursor wake + click shockwaves ──
      // Worked entirely in SCREEN-normalized space (-1..1, y-down) so the trail /
      // click coordinates line up exactly with where the letters are.
      let dx = 0;
      let dy = 0;
      // Directional WAKE: push the cell along the trail's remembered flow,
      // scaled by heat, with per-cell noise so it isn't a uniform slab. Because
      // the trail lingers, this keeps nudging long after the cursor has left.
      if (trailOn && !inLogo && heat > 0.001) {
        const noise = 1 + (cellHash(col, row) - 0.5) * TRAIL_NOISE;
        const push = WAKE_PUSH * heat * trailStrength * noise;
        dx += ts.fx * push;
        dy += ts.fy * push;
        // a swirl curl: also nudge perpendicular to the flow so the wake twists
        // into the vortex instead of just streaking straight — more alive
        dx += -ts.fy * push * 0.5;
        dy += ts.fx * push * 0.5;
      }
      if (shockOn && !inLogo) {
        for (let k = 0; k < shocks!.length; k++) {
          const sh = shocks![k];
          const ox = snx - sh.x;
          const oy = sny - sh.y;
          const r = sqrt(ox * ox + oy * oy);
          const ringR = sh.age * SHOCK_SPEED;
          const d = (r - ringR) / SHOCK_WIDTH;
          const crest = exp(-d * d) * exp(-sh.age * SHOCK_FADE);
          if (crest > 0.002) {
            const inv = 1 / max(0.0001, r);
            const push = SHOCK_PUSH * crest;
            dx += ox * inv * push;
            dy += oy * inv * push;
          }
        }
      }
      if (turbOn && !inLogo) {
        const a = WAVE_AMP * turbulence!;
        if (wavePattern === "wavefront") {
          // a directional crest sweeps across the field; cells lift along the
          // travel direction as the front passes (water / flag)
          const phase = (snx * waveDirX + sny * waveDirY) * WAVE_FREQ * PI - tWave * PI;
          const w = sin(phase);
          dx += a * w * waveDirX;
          dy += a * w * waveDirY;
        } else if (wavePattern === "ripples") {
          // endless concentric rings radiating from the center (pond breathing)
          const r = sqrt(snx * snx + sny * sny);
          const w = sin(r * WAVE_FREQ * PI * 1.6 - tWave * PI);
          const inv = 1 / max(0.08, r);
          dx += a * w * snx * inv;
          dy += a * w * sny * inv;
        } else if (wavePattern === "flow") {
          // drift each cell along a scrolling noise field (ink / smoke)
          const nx = vnoise(snx * 1.6 + tWave * 0.4, sny * 1.6);
          const ny = vnoise(sny * 1.6 - tWave * 0.4 + 7.3, snx * 1.6 + 3.1);
          dx += a * 1.4 * nx;
          dy += a * 1.4 * ny;
        } else {
          // cloth: columns sway side-to-side, phase increasing down the rows, so
          // the field ripples like a banner in a breeze
          dx += a * 1.3 * sin(sny * WAVE_FREQ * PI * 0.9 + tWave * PI * 1.2);
          dy += a * 0.35 * sin(snx * WAVE_FREQ * PI + tWave * PI);
        }
      }

      const px = col * atlas.advance + dx * halfW;
      const by = baseline + dy * halfH;
      const fx = (col * 2) / grid.cols - 1;
      const fy = 1 - (row * 2) / grid.rows;
      // color by the SOURCE row (so it travels with the letter), shimmered by a
      // per-cell drift and brightened by how fast this cell is spinning.
      const srcRow = floor(((ry + 1) / 2) * grid.rows);
      const rgb = paintAt(paint, {
        fx,
        fy,
        srcRow: (((srcRow % grid.rows) + grid.rows) % grid.rows) / grid.rows,
        jitter: cellHash(col, row),
        speed: clamp01(1 - dist),
        time: spin,
      });
      // COLOR FLARE: hot trail cells glow toward the flare color, so dragging
      // lights up a visible, lingering path (the trail reads as light + heat).
      let cellRgb = rgb;
      if (flare && heat > 0.001 && !inLogo) {
        const t = clamp01(heat * FLARE_GAIN * trailStrength);
        cellRgb = [mix(rgb[0], flare[0], t), mix(rgb[1], flare[1], t), mix(rgb[2], flare[2], t)];
      }
      if (ch !== SPACE) {
        pushCell(buffers, atlas, slotOf(ch, WEIGHT_REGULAR), px, by, cellRgb, 1, state);
      }
      if (resolved !== SPACE) {
        // the forming letter fades in over the morphing char, in the LOGO color
        // plus a sheen derived from it (not pure white, so light themes read)
        pushCell(buffers, atlas, slotOf(resolved, WEIGHT_BOLD), px, by, logo, formation, state);
        pushCell(buffers, atlas, slotOf(resolved, WEIGHT_BOLD), px, by, hi, formation * 0.5, state);
      }
    }
  }
  return state.count;
}

// A persistent "trail" the cursor leaves on the swirl. It is a low-res grid that
// remembers, per cell, how much the pointer has disturbed that spot (heat) and
// which way it was moving when it did (a flow direction). Heat barely fades, so
// a path you trace lingers almost indefinitely — but each deposit is tiny, so it
// stays a faint, slowly-churning trace rather than a bright smear.
//
// The grid is a fixed resolution in normalized field space (-1..1 on both axes),
// independent of the canvas size, so it survives resizes. composeField samples it
// per cell to drive a directional wake (push along the remembered flow) and a
// local swirl-up (extra spin where it is hot).

export const TRAIL_W = 72;
export const TRAIL_H = 40;

// ── tuning ── kept deliberately weak: the trail is near-permanent, so a small
// per-frame deposit accumulates into a faint, lingering trace rather than a
// bright smear. HEAT_MAX caps how strong a hammered spot can ever get.
const DEPOSIT_RADIUS = 0.15; // Gaussian radius of a single deposit (field units)
const DEPOSIT_BASE = 0.05; // heat laid down per second just by hovering
const DEPOSIT_SPEED = 0.8; // extra heat scaled by pointer speed
const HEAT_MAX = 0.7; // clamp: headroom for a strong, visible trail
const DECAY_PER_SEC = 0.025; // near-permanent: ~2.5% of the heat fades per second
const DIFFUSE = 0.12; // per-frame blur so trails soften into pools
const FLOW_BLEND = 0.25; // how fast a cell adopts the latest pointer direction

export interface TrailField {
  heat: Float32Array; // TRAIL_W * TRAIL_H, 0..HEAT_MAX
  flowX: Float32Array; // remembered pointer direction per cell, -1..1
  flowY: Float32Array;
  tmp: Float32Array; // scratch for diffusion
}

export function makeTrailField(): TrailField {
  const n = TRAIL_W * TRAIL_H;
  return {
    heat: new Float32Array(n),
    flowX: new Float32Array(n),
    flowY: new Float32Array(n),
    tmp: new Float32Array(n),
  };
}

export function clearTrail(t: TrailField) {
  t.heat.fill(0);
  t.flowX.fill(0);
  t.flowY.fill(0);
}

// normalized (-1..1) → grid index helpers
const toGX = (nx: number) => ((nx + 1) / 2) * (TRAIL_W - 1);
const toGY = (ny: number) => ((ny + 1) / 2) * (TRAIL_H - 1);

/**
 * Deposit heat + flow at the pointer. `nx,ny` are normalized field coords
 * (-1..1, y-down to match screen). `vx,vy` is the pointer velocity (same units
 * per second); its magnitude scales the deposit and its direction is stored.
 */
export function depositTrail(
  t: TrailField,
  nx: number,
  ny: number,
  vx: number,
  vy: number,
  dt: number,
) {
  const speed = Math.min(3, Math.hypot(vx, vy));
  const amount = (DEPOSIT_BASE + DEPOSIT_SPEED * speed) * dt;
  const dirLen = Math.hypot(vx, vy) || 1;
  const dirX = vx / dirLen;
  const dirY = vy / dirLen;

  const gx = toGX(nx);
  const gy = toGY(ny);
  const rx = DEPOSIT_RADIUS * (TRAIL_W / 2);
  const ry = DEPOSIT_RADIUS * (TRAIL_H / 2);
  const x0 = Math.max(0, Math.floor(gx - rx * 2));
  const x1 = Math.min(TRAIL_W - 1, Math.ceil(gx + rx * 2));
  const y0 = Math.max(0, Math.floor(gy - ry * 2));
  const y1 = Math.min(TRAIL_H - 1, Math.ceil(gy + ry * 2));
  for (let y = y0; y <= y1; y++) {
    for (let x = x0; x <= x1; x++) {
      const ddx = (x - gx) / rx;
      const ddy = (y - gy) / ry;
      const fall = Math.exp(-(ddx * ddx + ddy * ddy));
      if (fall < 0.01) continue;
      const i = y * TRAIL_W + x;
      t.heat[i] = Math.min(HEAT_MAX, t.heat[i] + amount * fall);
      // ease the stored flow toward the current direction, weighted by deposit
      const w = FLOW_BLEND * fall;
      t.flowX[i] += (dirX - t.flowX[i]) * w;
      t.flowY[i] += (dirY - t.flowY[i]) * w;
    }
  }
}

/** Decay (near-permanent) + a light box blur so heat diffuses into soft pools. */
export function stepTrail(t: TrailField, dt: number) {
  const keep = Math.exp(-DECAY_PER_SEC * dt);
  const { heat, tmp } = t;
  // 4-neighbour blur into tmp, then lerp back by DIFFUSE and apply decay
  for (let y = 0; y < TRAIL_H; y++) {
    for (let x = 0; x < TRAIL_W; x++) {
      const i = y * TRAIL_W + x;
      const l = x > 0 ? heat[i - 1] : heat[i];
      const rr = x < TRAIL_W - 1 ? heat[i + 1] : heat[i];
      const u = y > 0 ? heat[i - TRAIL_W] : heat[i];
      const d = y < TRAIL_H - 1 ? heat[i + TRAIL_W] : heat[i];
      tmp[i] = (l + rr + u + d) * 0.25;
    }
  }
  for (let i = 0; i < heat.length; i++) {
    heat[i] = (heat[i] + (tmp[i] - heat[i]) * DIFFUSE) * keep;
  }
}

/** Bilinear-sample heat + flow at normalized coords. Returns into `out`. */
export function sampleTrail(
  t: TrailField,
  nx: number,
  ny: number,
  out: { heat: number; fx: number; fy: number },
) {
  const gx = toGX(nx);
  const gy = toGY(ny);
  const x0 = Math.max(0, Math.min(TRAIL_W - 1, Math.floor(gx)));
  const y0 = Math.max(0, Math.min(TRAIL_H - 1, Math.floor(gy)));
  const x1 = Math.min(TRAIL_W - 1, x0 + 1);
  const y1 = Math.min(TRAIL_H - 1, y0 + 1);
  const tx = gx - x0;
  const ty = gy - y0;
  const i00 = y0 * TRAIL_W + x0;
  const i10 = y0 * TRAIL_W + x1;
  const i01 = y1 * TRAIL_W + x0;
  const i11 = y1 * TRAIL_W + x1;
  const lerp = (a: number, b: number, f: number) => a + (b - a) * f;
  const bi = (arr: Float32Array) =>
    lerp(lerp(arr[i00], arr[i10], tx), lerp(arr[i01], arr[i11], tx), ty);
  out.heat = bi(t.heat);
  out.fx = bi(t.flowX);
  out.fy = bi(t.flowY);
}

// The CRT post pass and the instanced-text pass, as GLSL strings + the named
// constants that tune them. Keeping the shaders here (instead of inline in the
// React component) means the playground file reads as orchestration, and the
// "feel" numbers live in one place where they're documented as decisions.

// ---- tuning constants (named so they read as choices, not copied dust) ----
/** How hard the barrel bulge pushes at full curvature. */
export const BARREL_GAIN = 0.1;
/** Inward pinch that pairs with the bulge to keep the frame square-ish. */
export const BARREL_PINCH = 0.085;
/** Edge-weighted term so the bulge grows toward the corners. */
export const BARREL_EDGE = 0.05;
/** RGB split distance per aberration unit, in UV. */
export const ABERRATION_UV = 0.0028;
/** Vignette darkening at the corners (0 = none). */
export const VIGNETTE = 0.7;
/** Filmic exposure before the tonemap; >1 lifts midtones. */
export const TONEMAP_EXPOSURE = 2.2;
/** Seconds for the curvature to ease in from flat at load. */
export const CURVE_RAMP_SEC = 3.0;

// ---- fullscreen CRT pass over the rendered-text texture ----
export const CRT_FRAG = `#ifdef GL_FRAGMENT_PRECISION_HIGH
precision highp float;
#else
precision mediump float;
#endif
varying vec2 vUv;
uniform sampler2D uTex;
uniform float uTime;
uniform vec2 uRes;
uniform float uScanline;
uniform float uAberration;
uniform float uCurvature;
uniform vec3 uBg;
float easeOutQuad(float t){ return t*(2.0-t); }
void main(){
  float prog = min(uTime / ${CRT_NUM(CURVE_RAMP_SEC)}, 1.0);
  float curve = easeOutQuad(prog) * uCurvature;
  vec2 c = vUv * 2.0 - 1.0;
  c *= 1.0 + ${CRT_NUM(BARREL_GAIN)} * curve;
  c *= 1.0 - ${CRT_NUM(BARREL_PINCH)} * curve + ${CRT_NUM(BARREL_EDGE)} * curve * pow(abs(c.yx), vec2(2.0));
  c = c * 0.5 + 0.5;
  if (c.x < 0.0 || c.x > 1.0 || c.y < 0.0 || c.y > 1.0){ gl_FragColor = vec4(uBg, 1.0); return; }
  float d = uAberration * ${CRT_NUM(ABERRATION_UV)};
  float r = texture2D(uTex, vec2(c.x + d, c.y)).r;
  float g = texture2D(uTex, c).g;
  float b = texture2D(uTex, vec2(c.x - d, c.y)).b;
  vec3 col = vec3(r, g, b);

  // How light the background is (0 = black, 1 = white). The CRT darkening tricks
  // (vignette toward black, filmic tonemap) are tuned for a dark tube and leave
  // a grey halo on a light field, so we fade them out as the bg gets lighter.
  float bgLum = dot(uBg, vec3(0.299, 0.587, 0.114));
  float darkMode = 1.0 - smoothstep(0.4, 0.8, bgLum);

  float scan = max(0.0, sin((c.y + uTime * 0.0005) * uRes.y)) * 0.5;
  col = mix(col, col - vec3(scan), uScanline);

  // Vignette fades the edges toward the ACTUAL background (not black), so on a
  // white field the corners stay white instead of going grey.
  float vig = length(c - 0.5) * ${CRT_NUM(VIGNETTE)};
  col = mix(col, uBg, clamp(vig, 0.0, 1.0) * darkMode);

  // Filmic glow/tonemap only on dark backgrounds; on light it would dull white.
  vec3 toned = 1.0 - exp(-col * ${CRT_NUM(TONEMAP_EXPOSURE)});
  col = mix(col, toned, darkMode);

  gl_FragColor = vec4(col, 1.0);
}`;

export const CRT_VERT = `attribute vec4 aPos; attribute vec2 aUv; varying vec2 vUv;
void main(){ gl_Position = aPos; vUv = aUv; }`;

// ---- instanced text pass: one quad per visible glyph cell ----
export const TEXT_VERT = `attribute vec2 aCorner; attribute vec4 aBounds; attribute vec4 aGlyphUv; attribute vec4 aColor;
uniform vec2 uTarget; varying vec2 vGlyphUv; varying vec4 vColor;
void main(){
  vec2 px = mix(aBounds.xy, aBounds.zw, aCorner);
  vec2 clip = vec2((px.x / uTarget.x) * 2.0 - 1.0, 1.0 - (px.y / uTarget.y) * 2.0);
  gl_Position = vec4(clip, 0.0, 1.0);
  vGlyphUv = mix(aGlyphUv.xy, aGlyphUv.zw, aCorner);
  vColor = aColor;
}`;

export const TEXT_FRAG = `precision mediump float; varying vec2 vGlyphUv; varying vec4 vColor; uniform sampler2D uAtlas;
void main(){ float a = texture2D(uAtlas, vGlyphUv).a; if(a <= 0.001) discard; gl_FragColor = vec4(vColor.rgb, vColor.a * a); }`;

// GLSL needs a decimal point on float literals; this stamps our JS constants in.
function CRT_NUM(n: number): string {
  const s = String(n);
  return s.includes(".") ? s : s + ".0";
}

// The logo-generator font engine. You give it a word and a style; it returns
// rows of monospace ASCII art that the vortex resolves into.
//
// Eight styles come straight from figlet (patorjk/figlet.js), converted to our
// row format in figlet-fonts.ts — real display faces, hand-picked to stay
// legible once the swirl shrinks them (short, sparse line-art). A ninth, Banner,
// is our own block face kept for the chunky poster look. Whatever the source,
// everything flows through one renderWord, so each font automatically inherits
// the entrance morph and all the experiment behaviours.

import { FIGLET_FONTS } from "./figlet-fonts";

export type FontStyle =
  | "slant"
  | "standard"
  | "ogre"
  | "doom"
  | "big"
  | "speed"
  | "stop"
  | "subzero"
  | "banner";

// ── Banner: our own block face. Bitmaps (1 = filled) outlined into hollow
//    letters so they read at small scale instead of merging into a blob. ──
const BANNER_BITS: Record<string, string[]> = {
  A: ["01110", "10001", "11111", "10001", "10001"],
  B: ["11110", "10001", "11110", "10001", "11110"],
  C: ["01111", "10000", "10000", "10000", "01111"],
  D: ["11110", "10001", "10001", "10001", "11110"],
  E: ["11111", "10000", "11110", "10000", "11111"],
  F: ["11111", "10000", "11110", "10000", "10000"],
  G: ["01111", "10000", "10011", "10001", "01111"],
  H: ["10001", "10001", "11111", "10001", "10001"],
  I: ["111", "010", "010", "010", "111"],
  J: ["00111", "00010", "00010", "10010", "01100"],
  K: ["10001", "10010", "11100", "10010", "10001"],
  L: ["10000", "10000", "10000", "10000", "11111"],
  M: ["10001", "11011", "10101", "10001", "10001"],
  N: ["10001", "11001", "10101", "10011", "10001"],
  O: ["01110", "10001", "10001", "10001", "01110"],
  P: ["11110", "10001", "11110", "10000", "10000"],
  Q: ["01110", "10001", "10101", "10010", "01101"],
  R: ["11110", "10001", "11110", "10010", "10001"],
  S: ["01111", "10000", "01110", "00001", "11110"],
  T: ["11111", "00100", "00100", "00100", "00100"],
  U: ["10001", "10001", "10001", "10001", "01110"],
  V: ["10001", "10001", "10001", "01010", "00100"],
  W: ["10001", "10001", "10101", "11011", "10001"],
  X: ["10001", "01010", "00100", "01010", "10001"],
  Y: ["10001", "01010", "00100", "00100", "00100"],
  Z: ["11111", "00010", "00100", "01000", "11111"],
  "0": ["01110", "10011", "10101", "11001", "01110"],
  "1": ["00100", "01100", "00100", "00100", "01110"],
  "2": ["11110", "00001", "01110", "10000", "11111"],
  "3": ["11110", "00001", "01110", "00001", "11110"],
  "4": ["10010", "10010", "11111", "00010", "00010"],
  "5": ["11111", "10000", "11110", "00001", "11110"],
  "6": ["01111", "10000", "11110", "10001", "01110"],
  "7": ["11111", "00010", "00100", "01000", "01000"],
  "8": ["01110", "10001", "01110", "10001", "01110"],
  "9": ["01110", "10001", "01111", "00001", "11110"],
  "!": ["1", "1", "1", "0", "1"],
  "?": ["11110", "00001", "00110", "00000", "00100"],
  ".": ["0", "0", "0", "0", "1"],
  "-": ["000", "000", "111", "000", "000"],
  " ": ["00", "00", "00", "00", "00"],
};

// A filled cell becomes a block only on the EDGE of the shape; interiors go
// blank. Hollow letters read; solid blocks merge into a mass when shrunk.
function bitsToOutline(bits: string[]): string[] {
  const h = bits.length;
  const w = Math.max(0, ...bits.map((r) => r.length));
  const on = (r: number, c: number) =>
    r >= 0 && r < h && c >= 0 && c < w && bits[r]?.[c] === "1";
  return bits.map((row, r) => {
    let line = "";
    for (let c = 0; c < w; c++) {
      if (!on(r, c)) { line += " "; continue; }
      const edge = !on(r - 1, c) || !on(r + 1, c) || !on(r, c - 1) || !on(r, c + 1);
      line += edge ? "█" : " ";
    }
    return line;
  });
}

const BANNER: Record<string, string[]> = Object.fromEntries(
  Object.entries(BANNER_BITS).map(([k, v]) => [k, bitsToOutline(v)]),
);

const TABLES: Record<FontStyle, Record<string, string[]>> = {
  slant: FIGLET_FONTS.slant,
  standard: FIGLET_FONTS.standard,
  ogre: FIGLET_FONTS.ogre,
  doom: FIGLET_FONTS.doom,
  big: FIGLET_FONTS.big,
  speed: FIGLET_FONTS.speed,
  stop: FIGLET_FONTS.stop,
  subzero: FIGLET_FONTS.subzero,
  banner: BANNER,
};

// Banner letters are solid blocks with no built-in gutter, so they need an
// explicit gap; the figlet faces carry their own spacing and smush together.
const GAP_COLS: Partial<Record<FontStyle, number>> = { banner: 1 };

// Pad every row of a glyph to its own widest row, so an uneven glyph never
// shears the letters after it on that row.
function squareGlyph(rows: string[]): string[] {
  const w = Math.max(0, ...rows.map((r) => r.length));
  return rows.map((r) => r.padEnd(w, " "));
}

// How far a glyph can slide left into the canvas without any of its non-space
// cells overlapping one already there. This is figlet "kerning": the blank
// gutters each letter carries get nested instead of stacked, so pairs like V+A
// or M+I sit at a natural spacing rather than far apart.
function overlapAllowed(canvas: string[], glyph: string[], leftEdge: number, minGap: number): number {
  const gw = Math.max(0, ...glyph.map((r) => r.length));
  let shift = 0;
  for (let s = 1; s <= gw; s++) {
    let collides = false;
    for (let r = 0; r < canvas.length && !collides; r++) {
      const crow = canvas[r];
      const grow = glyph[r] ?? "";
      for (let gx = 0; gx < gw; gx++) {
        const gc = grow[gx] ?? " ";
        if (gc === " ") continue;
        const cx = leftEdge - s + gx;
        if (cx < 0) continue;
        // a forced gap reserves `minGap` blank columns between letters
        for (let g = 0; g <= minGap; g++) {
          if ((crow[cx + g] ?? " ") !== " ") { collides = true; break; }
        }
        if (collides) break;
      }
    }
    if (collides) break;
    shift = s;
  }
  return shift;
}

/**
 * Render `word` in the given figlet style. Returns equal-length rows (right-
 * padded) so the caller gets a clean rectangle; row count is the font's height.
 */
export function renderWord(word: string, style: FontStyle): string[] {
  const table = TABLES[style];
  const minGap = GAP_COLS[style] ?? 0;
  const rowCount = table[" "].length;
  const glyphs = word
    .toUpperCase()
    .split("")
    .map((c) => squareGlyph(table[c] ?? table[" "]));
  if (glyphs.length === 0) return Array.from({ length: rowCount }, () => "");

  // Lay glyphs onto a row canvas, smushing each one leftward as far as it fits.
  let canvas: string[] = Array.from({ length: rowCount }, () => "");
  for (const glyph of glyphs) {
    const gw = Math.max(0, ...glyph.map((r) => r.length));
    const cw = Math.max(0, ...canvas.map((r) => r.length));
    const shift = cw > 0 ? overlapAllowed(canvas, glyph, cw, minGap) : 0;
    const at = cw - shift;
    const next: string[] = [];
    for (let r = 0; r < rowCount; r++) {
      const crow = (canvas[r] ?? "").padEnd(at, " ");
      const grow = (glyph[r] ?? "").padEnd(gw, " ");
      let merged = crow.slice(0, at);
      for (let gx = 0; gx < gw; gx++) {
        const cx = at + gx;
        const existing = (canvas[r] ?? "")[cx] ?? " ";
        const gc = grow[gx];
        merged += gc !== " " ? gc : existing;
      }
      next.push(merged);
    }
    canvas = next;
  }
  const w = Math.max(...canvas.map((r) => r.length));
  return canvas.map((r) => r.padEnd(w, " "));
}

// AUTO-GENERATED from figlet.js (patorjk/figlet.js) fonts, converted to our
// compact row format. Each glyph is N equal-height rows; squareGlyph in
// block-font.ts pads each to its own width before joining. Regenerate with
// the script in scripts/gen-figlet.mjs if you add fonts.

export type FigletFont = Record<string, string[]>;

export const FIGLET_FONTS: Record<string, FigletFont> = {
  slant: {
    "0": ["   ____ ", "  / __ \\", " / / / /", "/ /_/ / ", "\\____/  "],
    "1": ["   ___", "  <  /", "  / / ", " / /  ", "/_/   "],
    "2": ["   ___ ", "  |__ \\", "  __/ /", " / __/ ", "/____/ "],
    "3": ["   _____", "  |__  /", "   /_ < ", " ___/ / ", "/____/  "],
    "4": ["   __ __", "  / // /", " / // /_", "/__  __/", "  /_/   "],
    "5": ["    ______", "   / ____/", "  /___ \\  ", " ____/ /  ", "/_____/   "],
    "6": ["   _____", "  / ___/", " / __ \\ ", "/ /_/ / ", "\\____/  "],
    "7": [" _____", "/__  /", "  / / ", " / /  ", "/_/   "],
    "8": ["   ____ ", "  ( __ )", " / __  |", "/ /_/ / ", "\\____/  "],
    "9": ["   ____ ", "  / __ \\", " / /_/ /", " \\__, / ", "/____/  "],
    "A": ["    ___ ", "   /   |", "  / /| |", " / ___ |", "/_/  |_|"],
    "B": ["    ____ ", "   / __ )", "  / __  |", " / /_/ / ", "/_____/  "],
    "C": ["   ______", "  / ____/", " / /     ", "/ /___   ", "\\____/   "],
    "D": ["    ____ ", "   / __ \\", "  / / / /", " / /_/ / ", "/_____/  "],
    "E": ["    ______", "   / ____/", "  / __/   ", " / /___   ", "/_____/   "],
    "F": ["    ______", "   / ____/", "  / /_    ", " / __/    ", "/_/       "],
    "G": ["   ______", "  / ____/", " / / __  ", "/ /_/ /  ", "\\____/   "],
    "H": ["    __  __", "   / / / /", "  / /_/ / ", " / __  /  ", "/_/ /_/   "],
    "I": ["    ____", "   /  _/", "   / /  ", " _/ /   ", "/___/   "],
    "J": ["       __", "      / /", " __  / / ", "/ /_/ /  ", "\\____/   "],
    "K": ["    __ __", "   / //_/", "  / ,<   ", " / /| |  ", "/_/ |_|  "],
    "L": ["    __ ", "   / / ", "  / /  ", " / /___", "/_____/"],
    "M": ["    __  ___", "   /  |/  /", "  / /|_/ / ", " / /  / /  ", "/_/  /_/   "],
    "N": ["    _   __", "   / | / /", "  /  |/ / ", " / /|  /  ", "/_/ |_/   "],
    "O": ["   ____ ", "  / __ \\", " / / / /", "/ /_/ / ", "\\____/  "],
    "P": ["    ____ ", "   / __ \\", "  / /_/ /", " / ____/ ", "/_/      "],
    "Q": ["   ____ ", "  / __ \\", " / / / /", "/ /_/ / ", "\\___\\_\\ "],
    "R": ["    ____ ", "   / __ \\", "  / /_/ /", " / _, _/ ", "/_/ |_|  "],
    "S": ["   _____", "  / ___/", "  \\__ \\ ", " ___/ / ", "/____/  "],
    "T": ["  ______", " /_  __/", "  / /   ", " / /    ", "/_/     "],
    "U": ["   __  __", "  / / / /", " / / / / ", "/ /_/ /  ", "\\____/   "],
    "V": [" _    __", "| |  / /", "| | / / ", "| |/ /  ", "|___/   "],
    "W": [" _       __", "| |     / /", "| | /| / / ", "| |/ |/ /  ", "|__/|__/   "],
    "X": ["   _  __", "  | |/ /", "  |   / ", " /   |  ", "/_/|_|  "],
    "Y": ["__  __", "\\ \\/ /", " \\  / ", " / /  ", "/_/   "],
    "Z": [" _____", "/__  /", "  / / ", " / /__", "/____/"],
    " ": ["         ", "         ", "         ", "         ", "         "],
    "!": ["    __", "   / /", "  / / ", " /_/  ", "(_)   "],
    "?": ["  ___ ", " /__ \\", "  / _/", " /_/  ", "(_)   "],
    ".": ["   ", "   ", "   ", " _ ", "(_)"],
    "-": ["       ", "       ", " ______", "/_____/", "       "],
  },
  standard: {
    "0": ["   ___  ", "  / _ \\ ", " | | | |", " | |_| |", "  \\___/ "],
    "1": ["  _ ", " / |", " | |", " | |", " |_|"],
    "2": ["  ____  ", " |___ \\ ", "   __) |", "  / __/ ", " |_____|"],
    "3": ["  _____ ", " |___ / ", "   |_ \\ ", "  ___) |", " |____/ "],
    "4": ["  _  _   ", " | || |  ", " | || |_ ", " |__   _|", "    |_|  "],
    "5": ["  ____  ", " | ___| ", " |___ \\ ", "  ___) |", " |____/ "],
    "6": ["   __   ", "  / /_  ", " | '_ \\ ", " | (_) |", "  \\___/ "],
    "7": ["  _____ ", " |___  |", "    / / ", "   / /  ", "  /_/   "],
    "8": ["   ___  ", "  ( _ ) ", "  / _ \\ ", " | (_) |", "  \\___/ "],
    "9": ["   ___  ", "  / _ \\ ", " | (_) |", "  \\__, |", "    /_/ "],
    "A": ["     _    ", "    / \\   ", "   / _ \\  ", "  / ___ \\ ", " /_/   \\_\\"],
    "B": ["  ____  ", " | __ ) ", " |  _ \\ ", " | |_) |", " |____/ "],
    "C": ["   ____ ", "  / ___|", " | |    ", " | |___ ", "  \\____|"],
    "D": ["  ____  ", " |  _ \\ ", " | | | |", " | |_| |", " |____/ "],
    "E": ["  _____ ", " | ____|", " |  _|  ", " | |___ ", " |_____|"],
    "F": ["  _____ ", " |  ___|", " | |_   ", " |  _|  ", " |_|    "],
    "G": ["   ____ ", "  / ___|", " | |  _ ", " | |_| |", "  \\____|"],
    "H": ["  _   _ ", " | | | |", " | |_| |", " |  _  |", " |_| |_|"],
    "I": ["  ___ ", " |_ _|", "  | | ", "  | | ", " |___|"],
    "J": ["      _ ", "     | |", "  _  | |", " | |_| |", "  \\___/ "],
    "K": ["  _  __", " | |/ /", " | ' / ", " | . \\ ", " |_|\\_\\"],
    "L": ["  _     ", " | |    ", " | |    ", " | |___ ", " |_____|"],
    "M": ["  __  __ ", " |  \\/  |", " | |\\/| |", " | |  | |", " |_|  |_|"],
    "N": ["  _   _ ", " | \\ | |", " |  \\| |", " | |\\  |", " |_| \\_|"],
    "O": ["   ___  ", "  / _ \\ ", " | | | |", " | |_| |", "  \\___/ "],
    "P": ["  ____  ", " |  _ \\ ", " | |_) |", " |  __/ ", " |_|    "],
    "Q": ["   ___  ", "  / _ \\ ", " | | | |", " | |_| |", "  \\__\\_\\"],
    "R": ["  ____  ", " |  _ \\ ", " | |_) |", " |  _ < ", " |_| \\_\\"],
    "S": ["  ____  ", " / ___| ", " \\___ \\ ", "  ___) |", " |____/ "],
    "T": ["  _____ ", " |_   _|", "   | |  ", "   | |  ", "   |_|  "],
    "U": ["  _   _ ", " | | | |", " | | | |", " | |_| |", "  \\___/ "],
    "V": [" __     __", " \\ \\   / /", "  \\ \\ / / ", "   \\ V /  ", "    \\_/   "],
    "W": [" __        __", " \\ \\      / /", "  \\ \\ /\\ / / ", "   \\ V  V /  ", "    \\_/\\_/   "],
    "X": [" __  __", " \\ \\/ /", "  \\  / ", "  /  \\ ", " /_/\\_\\"],
    "Y": [" __   __", " \\ \\ / /", "  \\ V / ", "   | |  ", "   |_|  "],
    "Z": ["  _____", " |__  /", "   / / ", "  / /_ ", " /____|"],
    " ": ["   ", "   ", "   ", "   ", "   "],
    "!": ["  _ ", " | |", " | |", " |_|", " (_)"],
    "?": ["  ___ ", " |__ \\", "   / /", "  |_| ", "  (_) "],
    ".": ["    ", "    ", "    ", "  _ ", " (_)"],
    "-": ["        ", "        ", "  _____ ", " |_____|", "        "],
  },
  ogre: {
    "0": ["  ___  ", " / _ \\ ", "| | | |", "| |_| |", " \\___/ "],
    "1": [" _ ", "/ |", "| |", "| |", "|_|"],
    "2": [" ____  ", "|___ \\ ", "  __) |", " / __/ ", "|_____|"],
    "3": [" _____ ", "|___ / ", "  |_ \\ ", " ___) |", "|____/ "],
    "4": [" _  _   ", "| || |  ", "| || |_ ", "|__   _|", "   |_|  "],
    "5": [" ____  ", "| ___| ", "|___ \\ ", " ___) |", "|____/ "],
    "6": ["  __   ", " / /_  ", "| '_ \\ ", "| (_) |", " \\___/ "],
    "7": [" _____ ", "|___  |", "   / / ", "  / /  ", " /_/   "],
    "8": ["  ___  ", " ( _ ) ", " / _ \\ ", "| (_) |", " \\___/ "],
    "9": ["  ___  ", " / _ \\ ", "| (_) |", " \\__, |", "   /_/ "],
    "A": ["   _   ", "  /_\\  ", " //_\\\\ ", "/  _  \\", "\\_/ \\_/"],
    "B": ["   ___ ", "  / __\\", " /__\\//", "/ \\/  \\", "\\_____/"],
    "C": ["   ___ ", "  / __\\", " / /   ", "/ /___ ", "\\____/ "],
    "D": ["    ___ ", "   /   \\", "  / /\\ /", " / /_// ", "/___,'  "],
    "E": ["   __ ", "  /__\\", " /_\\  ", "//__  ", "\\__/  "],
    "F": ["   ___ ", "  / __\\", " / _\\  ", "/ /    ", "\\/     "],
    "G": ["   ___ ", "  / _ \\", " / /_\\/", "/ /_\\\\ ", "\\____/ "],
    "H": ["        ", "  /\\  /\\", " / /_/ /", "/ __  / ", "\\/ /_/  "],
    "I": ["  _____ ", "  \\_   \\", "   / /\\/", "/\\/ /_  ", "\\____/  "],
    "J": ["   __  ", "   \\ \\ ", "    \\ \\", " /\\_/ /", " \\___/ "],
    "K": ["       ", "  /\\ /\\", " / //_/", "/ __ \\ ", "\\/  \\/ "],
    "L": ["   __  ", "  / /  ", " / /   ", "/ /___ ", "\\____/ "],
    "M": ["        ", "  /\\/\\  ", " /    \\ ", "/ /\\/\\ \\", "\\/    \\/"],
    "N": ["     __ ", "  /\\ \\ \\", " /  \\/ /", "/ /\\  / ", "\\_\\ \\/  "],
    "O": ["   ___ ", "  /___\\", " //  //", "/ \\_// ", "\\___/  "],
    "P": ["   ___ ", "  / _ \\", " / /_)/", "/ ___/ ", "\\/     "],
    "Q": ["   ____ ", "  /___ \\", " //  / /", "/ \\_/ / ", "\\___,_\\ "],
    "R": ["   __  ", "  /__\\ ", " / \\// ", "/ _  \\ ", "\\/ \\_/ "],
    "S": [" __    ", "/ _\\   ", "\\ \\    ", "_\\ \\   ", "\\__/   "],
    "T": [" _____ ", "/__   \\", "  / /\\/", " / /   ", " \\/    "],
    "U": ["       ", " /\\ /\\ ", "/ / \\ \\", "\\ \\_/ /", " \\___/ "],
    "V": ["         ", " /\\   /\\ ", " \\ \\ / / ", "  \\ V /  ", "   \\_/   "],
    "W": [" __    __ ", "/ / /\\ \\ \\", "\\ \\/  \\/ /", " \\  /\\  / ", "  \\/  \\/  "],
    "X": ["__  __", "\\ \\/ /", " \\  / ", " /  \\ ", "/_/\\_\\"],
    "Y": ["     ", "/\\_/\\", "\\_ _/", " / \\ ", " \\_/ "],
    "Z": [" _____", "/ _  /", "\\// / ", " / //\\", "/____/"],
    " ": ["  ", "  ", "  ", "  ", "  "],
    "!": ["   _ ", "  / \\", " /  /", "/\\_/ ", "\\/   "],
    "?": [" ___ ", "/ _ \\", "\\// /", "  \\/ ", "  () "],
    ".": ["   ", "   ", "   ", " _ ", "(_)"],
    "-": ["       ", "       ", " _____ ", "|_____|", "       "],
  },
  doom: {
    "0": [" _____ ", "|  _  |", "| |/' |", "|  /| |", "\\ |_/ /", " \\___/ "],
    "1": [" __  ", "/  | ", "`| | ", " | | ", "_| |_", "\\___/"],
    "2": [" _____ ", "/ __  \\", "`' / /'", "  / /  ", "./ /___", "\\_____/"],
    "3": [" _____ ", "|____ |", "    / /", "    \\ \\", ".___/ /", "\\____/ "],
    "4": ["   ___ ", "  /   |", " / /| |", "/ /_| |", "\\___  |", "    |_/"],
    "5": [" _____ ", "|  ___|", "|___ \\ ", "    \\ \\", "/\\__/ /", "\\____/ "],
    "6": ["  ____ ", " / ___|", "/ /___ ", "| ___ \\", "| \\_/ |", "\\_____/"],
    "7": [" ______", "|___  /", "   / / ", "  / /  ", "./ /   ", "\\_/    "],
    "8": [" _____ ", "|  _  |", " \\ V / ", " / _ \\ ", "| |_| |", "\\_____/"],
    "9": [" _____ ", "|  _  |", "| |_| |", "\\____ |", ".___/ /", "\\____/ "],
    "A": ["  ___  ", " / _ \\ ", "/ /_\\ \\", "|  _  |", "| | | |", "\\_| |_/"],
    "B": ["______ ", "| ___ \\", "| |_/ /", "| ___ \\", "| |_/ /", "\\____/ "],
    "C": [" _____ ", "/  __ \\", "| /  \\/", "| |    ", "| \\__/\\", " \\____/"],
    "D": ["______ ", "|  _  \\", "| | | |", "| | | |", "| |/ / ", "|___/  "],
    "E": [" _____ ", "|  ___|", "| |__  ", "|  __| ", "| |___ ", "\\____/ "],
    "F": ["______ ", "|  ___|", "| |_   ", "|  _|  ", "| |    ", "\\_|    "],
    "G": [" _____ ", "|  __ \\", "| |  \\/", "| | __ ", "| |_\\ \\", " \\____/"],
    "H": [" _   _ ", "| | | |", "| |_| |", "|  _  |", "| | | |", "\\_| |_/"],
    "I": [" _____ ", "|_   _|", "  | |  ", "  | |  ", " _| |_ ", " \\___/ "],
    "J": ["   ___ ", "  |_  |", "    | |", "    | |", "/\\__/ /", "\\____/ "],
    "K": [" _   __", "| | / /", "| |/ / ", "|    \\ ", "| |\\  \\", "\\_| \\_/"],
    "L": [" _     ", "| |    ", "| |    ", "| |    ", "| |____", "\\_____/"],
    "M": ["___  ___", "|  \\/  |", "| .  . |", "| |\\/| |", "| |  | |", "\\_|  |_/"],
    "N": [" _   _ ", "| \\ | |", "|  \\| |", "| . ` |", "| |\\  |", "\\_| \\_/"],
    "O": [" _____ ", "|  _  |", "| | | |", "| | | |", "\\ \\_/ /", " \\___/ "],
    "P": ["______ ", "| ___ \\", "| |_/ /", "|  __/ ", "| |    ", "\\_|    "],
    "Q": [" _____ ", "|  _  |", "| | | |", "| | | |", "\\ \\/' /", " \\_/\\_\\"],
    "R": ["______ ", "| ___ \\", "| |_/ /", "|    / ", "| |\\ \\ ", "\\_| \\_|"],
    "S": [" _____ ", "/  ___|", "\\ `--. ", " `--. \\", "/\\__/ /", "\\____/ "],
    "T": [" _____ ", "|_   _|", "  | |  ", "  | |  ", "  | |  ", "  \\_/  "],
    "U": [" _   _ ", "| | | |", "| | | |", "| | | |", "| |_| |", " \\___/ "],
    "V": [" _   _ ", "| | | |", "| | | |", "| | | |", "\\ \\_/ /", " \\___/ "],
    "W": [" _    _ ", "| |  | |", "| |  | |", "| |/\\| |", "\\  /\\  /", " \\/  \\/ "],
    "X": ["__   __", "\\ \\ / /", " \\ V / ", " /   \\ ", "/ /^\\ \\", "\\/   \\/"],
    "Y": ["__   __", "\\ \\ / /", " \\ V / ", "  \\ /  ", "  | |  ", "  \\_/  "],
    "Z": [" ______", "|___  /", "   / / ", "  / /  ", "./ /___", "\\_____/"],
    " ": ["  ", "  ", "  ", "  ", "  ", "  "],
    "!": [" _ ", "| |", "| |", "| |", "|_|", "(_)"],
    "?": [" ___  ", "|__ \\ ", "   ) |", "  / / ", " |_|  ", " (_)  "],
    ".": ["   ", "   ", "   ", "   ", " _ ", "(_)"],
    "-": ["        ", "        ", " ______ ", "|______|", "        ", "        "],
  },
  big: {
    "0": ["   ___  ", "  / _ \\ ", " | | | |", " | | | |", " | |_| |", "  \\___/ "],
    "1": ["  __ ", " /_ |", "  | |", "  | |", "  | |", "  |_|"],
    "2": ["  ___  ", " |__ \\ ", "    ) |", "   / / ", "  / /_ ", " |____|"],
    "3": ["  ____  ", " |___ \\ ", "   __) |", "  |__ < ", "  ___) |", " |____/ "],
    "4": ["  _  _   ", " | || |  ", " | || |_ ", " |__   _|", "    | |  ", "    |_|  "],
    "5": ["  _____ ", " | ____|", " | |__  ", " |___ \\ ", "  ___) |", " |____/ "],
    "6": ["    __  ", "   / /  ", "  / /_  ", " | '_ \\ ", " | (_) |", "  \\___/ "],
    "7": ["  ______ ", " |____  |", "     / / ", "    / /  ", "   / /   ", "  /_/    "],
    "8": ["   ___  ", "  / _ \\ ", " | (_) |", "  > _ < ", " | (_) |", "  \\___/ "],
    "9": ["   ___  ", "  / _ \\ ", " | (_) |", "  \\__, |", "    / / ", "   /_/  "],
    "A": ["           ", "     /\\    ", "    /  \\   ", "   / /\\ \\  ", "  / ____ \\ ", " /_/    \\_\\"],
    "B": ["  ____  ", " |  _ \\ ", " | |_) |", " |  _ < ", " | |_) |", " |____/ "],
    "C": ["   _____ ", "  / ____|", " | |     ", " | |     ", " | |____ ", "  \\_____|"],
    "D": ["  _____  ", " |  __ \\ ", " | |  | |", " | |  | |", " | |__| |", " |_____/ "],
    "E": ["  ______ ", " |  ____|", " | |__   ", " |  __|  ", " | |____ ", " |______|"],
    "F": ["  ______ ", " |  ____|", " | |__   ", " |  __|  ", " | |     ", " |_|     "],
    "G": ["   _____ ", "  / ____|", " | |  __ ", " | | |_ |", " | |__| |", "  \\_____|"],
    "H": ["  _    _ ", " | |  | |", " | |__| |", " |  __  |", " | |  | |", " |_|  |_|"],
    "I": ["  _____ ", " |_   _|", "   | |  ", "   | |  ", "  _| |_ ", " |_____|"],
    "J": ["       _ ", "      | |", "      | |", "  _   | |", " | |__| |", "  \\____/ "],
    "K": ["  _  __", " | |/ /", " | ' / ", " |  <  ", " | . \\ ", " |_|\\_\\"],
    "L": ["  _      ", " | |     ", " | |     ", " | |     ", " | |____ ", " |______|"],
    "M": ["  __  __ ", " |  \\/  |", " | \\  / |", " | |\\/| |", " | |  | |", " |_|  |_|"],
    "N": ["  _   _ ", " | \\ | |", " |  \\| |", " | . ` |", " | |\\  |", " |_| \\_|"],
    "O": ["   ____  ", "  / __ \\ ", " | |  | |", " | |  | |", " | |__| |", "  \\____/ "],
    "P": ["  _____  ", " |  __ \\ ", " | |__) |", " |  ___/ ", " | |     ", " |_|     "],
    "Q": ["   ____  ", "  / __ \\ ", " | |  | |", " | |  | |", " | |__| |", "  \\___\\_\\"],
    "R": ["  _____  ", " |  __ \\ ", " | |__) |", " |  _  / ", " | | \\ \\ ", " |_|  \\_\\"],
    "S": ["   _____ ", "  / ____|", " | (___  ", "  \\___ \\ ", "  ____) |", " |_____/ "],
    "T": ["  _______ ", " |__   __|", "    | |   ", "    | |   ", "    | |   ", "    |_|   "],
    "U": ["  _    _ ", " | |  | |", " | |  | |", " | |  | |", " | |__| |", "  \\____/ "],
    "V": [" __      __", " \\ \\    / /", "  \\ \\  / / ", "   \\ \\/ /  ", "    \\  /   ", "     \\/    "],
    "W": [" __          __", " \\ \\        / /", "  \\ \\  /\\  / / ", "   \\ \\/  \\/ /  ", "    \\  /\\  /   ", "     \\/  \\/    "],
    "X": [" __   __", " \\ \\ / /", "  \\ V / ", "   > <  ", "  / . \\ ", " /_/ \\_\\"],
    "Y": [" __     __", " \\ \\   / /", "  \\ \\_/ / ", "   \\   /  ", "    | |   ", "    |_|   "],
    "Z": ["  ______", " |___  /", "    / / ", "   / /  ", "  / /__ ", " /_____|"],
    " ": ["   ", "   ", "   ", "   ", "   ", "   "],
    "!": ["  _ ", " | |", " | |", " | |", " |_|", " (_)"],
    "?": ["  ___  ", " |__ \\ ", "    ) |", "   / / ", "  |_|  ", "  (_)  "],
    ".": ["    ", "    ", "    ", "    ", "  _ ", " (_)"],
    "-": ["         ", "         ", "  ______ ", " |______|", "         ", "         "],
  },
  speed: {
    "0": ["_______ ", "__  __ \\", "_  / / /", "/ /_/ / ", "\\____/  "],
    "1": ["______", "__<  /", "__  / ", "_  /  ", "/_/   "],
    "2": ["______ ", "__|__ \\", "____/ /", "_  __/ ", "/____/ "],
    "3": ["________", "__|__  /", "___/_ < ", "____/ / ", "/____/  "],
    "4": ["_____ __", "__  // /", "_  // /_", "/__  __/", "  /_/   "],
    "5": ["__________", "___  ____/", "______ \\  ", " ____/ /  ", "/_____/   "],
    "6": ["________", "__  ___/", "_  __ \\ ", "/ /_/ / ", "\\____/  "],
    "7": ["______", "/__  /", "__  / ", "_  /  ", "/_/   "],
    "8": ["_______ ", "__( __ )", "_  __  |", "/ /_/ / ", "\\____/  "],
    "9": ["_______ ", "__  __ \\", "_  /_/ /", "_\\__, / ", "/____/  "],
    "A": ["_______ ", "___    |", "__  /| |", "_  ___ |", "/_/  |_|"],
    "B": ["________ ", "___  __ )", "__  __  |", "_  /_/ / ", "/_____/  "],
    "C": ["_________", "__  ____/", "_  /     ", "/ /___   ", "\\____/   "],
    "D": ["________ ", "___  __ \\", "__  / / /", "_  /_/ / ", "/_____/  "],
    "E": ["__________", "___  ____/", "__  __/   ", "_  /___   ", "/_____/   "],
    "F": ["__________", "___  ____/", "__  /_    ", "_  __/    ", "/_/       "],
    "G": ["_________", "__  ____/", "_  / __  ", "/ /_/ /  ", "\\____/   "],
    "H": ["______  __", "___  / / /", "__  /_/ / ", "_  __  /  ", "/_/ /_/   "],
    "I": ["________", "____  _/", " __  /  ", "__/ /   ", "/___/   "],
    "J": ["_________", "______  /", "___ _  / ", "/ /_/ /  ", "\\____/   "],
    "K": ["______ __", "___  //_/", "__  ,<   ", "_  /| |  ", "/_/ |_|  "],
    "L": ["______ ", "___  / ", "__  /  ", "_  /___", "/_____/"],
    "M": ["______  ___", "___   |/  /", "__  /|_/ / ", "_  /  / /  ", "/_/  /_/   "],
    "N": ["_____   __", "___  | / /", "__   |/ / ", "_  /|  /  ", "/_/ |_/   "],
    "O": ["_______ ", "__  __ \\", "_  / / /", "/ /_/ / ", "\\____/  "],
    "P": ["________ ", "___  __ \\", "__  /_/ /", "_  ____/ ", "/_/      "],
    "Q": ["_______ ", "__  __ \\", "_  / / /", "/ /_/ / ", "\\___\\_\\ "],
    "R": ["________ ", "___  __ \\", "__  /_/ /", "_  _, _/ ", "/_/ |_|  "],
    "S": ["________", "__  ___/", "_____ \\ ", "____/ / ", "/____/  "],
    "T": ["________", "___  __/", "__  /   ", "_  /    ", "/_/     "],
    "U": ["_____  __", "__  / / /", "_  / / / ", "/ /_/ /  ", "\\____/   "],
    "V": ["___    __", "__ |  / /", "__ | / / ", "__ |/ /  ", "_____/   "],
    "W": ["___       __", "__ |     / /", "__ | /| / / ", "__ |/ |/ /  ", "____/|__/   "],
    "X": ["____  __", "__  |/ /", "__    / ", "_    |  ", "/_/|_|  "],
    "Y": ["__  __", "_ \\/ /", "__  / ", "_  /  ", "/_/   "],
    "Z": ["______", "___  /", "__  / ", "_  /__", "/____/"],
    " ": ["         ", "         ", "         ", "         ", "         "],
    "!": ["______", "___  /", "__  / ", " /_/  ", "(_)   "],
    "?": ["_____ ", "_ __ \\", "__/ _/", "_/_/  ", "(_)   "],
    ".": ["    ", "    ", "    ", "___ ", "_(_)"],
    "-": ["        ", "        ", "________", "_/_____/", "        "],
  },
  stop: {
    "0": ["  ______ ", " / __   |", "| | //| |", "| |// | |", "|  /__| |", " \\_____/ "],
    "1": ["  __ ", " /  |", "/_/ |", "  | |", "  | |", "  |_|"],
    "2": [" ______  ", "(_____ \\ ", "  ____) )", " /_____/ ", " _______ ", "(_______)"],
    "3": [" ________", "(_______/", "   ____  ", "  (___ \\ ", " _____) )", "(______/ "],
    "4": ["   __    ", "  / /    ", " / /____ ", "|___   _)", "    | |  ", "    |_|  "],
    "5": [" _______ ", "(_______)", " ______  ", "(_____ \\ ", " _____) )", "(______/ "],
    "6": ["    __  ", "   / /  ", "  / /_  ", " / __ \\ ", "( (__) )", " \\____/ "],
    "7": [" _______ ", "(_______)", "      _  ", "     / ) ", "    / /  ", "   (_/   "],
    "8": ["  _____  ", " / ___ \\ ", "( (   ) )", " > > < < ", "( (___) )", " \\_____/ "],
    "9": ["  ____  ", " / __ \\ ", "( (__) )", " \\__  / ", "   / /  ", "  /_/   "],
    "A": ["        ", "   /\\   ", "  /  \\  ", " / /\\ \\ ", "| |__| |", "|______|"],
    "B": [" ______  ", "(____  \\ ", " ____)  )", "|  __  ( ", "| |__)  )", "|______/ "],
    "C": ["  ______ ", " / _____)", "| /      ", "| |      ", "| \\_____ ", " \\______)"],
    "D": [" _____   ", "(____ \\  ", " _   \\ \\ ", "| |   | |", "| |__/ / ", "|_____/  "],
    "E": [" _______ ", "(_______)", " _____   ", "|  ___)  ", "| |_____ ", "|_______)"],
    "F": [" _______ ", "(_______)", " _____   ", "|  ___)  ", "| |      ", "|_|      "],
    "G": ["  ______ ", " / _____)", "| /  ___ ", "| | (___)", "| \\____/|", " \\_____/ "],
    "H": [" _     _ ", "| |   | |", "| |__ | |", "|  __)| |", "| |   | |", "|_|   |_|"],
    "I": [" _____ ", "(_____)", "   _   ", "  | |  ", " _| |_ ", "(_____)"],
    "J": ["   _____ ", "  (_____)", "     _   ", "    | |  ", " ___| |  ", "(____/   "],
    "K": [" _    _ ", "| |  / )", "| | / / ", "| |< <  ", "| | \\ \\ ", "|_|  \\_)"],
    "L": [" _       ", "| |      ", "| |      ", "| |      ", "| |_____ ", "|_______)"],
    "M": [" ______  ", "|  ___ \\ ", "| | _ | |", "| || || |", "| || || |", "|_||_||_|"],
    "N": [" ______  ", "|  ___ \\ ", "| |   | |", "| |   | |", "| |   | |", "|_|   |_|"],
    "O": ["  _____  ", " / ___ \\ ", "| |   | |", "| |   | |", "| |___| |", " \\_____/ "],
    "P": [" ______  ", "(_____ \\ ", " _____) )", "|  ____/ ", "| |      ", "|_|      "],
    "Q": ["  _____  ", " / ___ \\ ", "| |   | |", "| |   |_|", " \\ \\____ ", "  \\_____)"],
    "R": [" ______  ", "(_____ \\ ", " _____) )", "(_____ ( ", "      | |", "      |_|"],
    "S": ["    _    ", "   | |   ", "    \\ \\  ", "     \\ \\ ", " _____) )", "(______/ "],
    "T": [" _______ ", "(_______)", " _       ", "| |      ", "| |_____ ", " \\______)"],
    "U": [" _     _ ", "| |   | |", "| |   | |", "| |   | |", "| |___| |", " \\______|"],
    "V": [" _    _ ", "| |  | |", "| |  | |", " \\ \\/ / ", "  \\  /  ", "   \\/   "],
    "W": [" _  _  _ ", "| || || |", "| || || |", "| ||_|| |", "| |___| |", " \\______|"],
    "X": [" _    _ ", "\\ \\  / /", " \\ \\/ / ", "  )  (  ", " / /\\ \\ ", "/_/  \\_\\"],
    "Y": [" _     _ ", "| |   | |", "| |___| |", " \\_____/ ", "   ___   ", "  (___)  "],
    "Z": [" _______ ", "(_______)", "   __    ", "  / /    ", " / /____ ", "(_______)"],
    " ": ["    ", "    ", "    ", "    ", "    ", "    "],
    "!": [" _ ", "| |", "| |", "|_|", " _ ", "|_|"],
    "?": [" ____  ", "(___ \\ ", "    ) )", "   /_/ ", "   _   ", "  (_)  "],
    ".": ["   ", "   ", "   ", "   ", " _ ", "(_)"],
    "-": ["     ", "     ", " ___ ", "(___)", "     ", "     "],
  },
  subzero: {
    "0": ["", "", "", "", ""],
    "1": ["", "", "", "", ""],
    "2": ["", "", "", "", ""],
    "3": ["", "", "", "", ""],
    "4": ["", "", "", "", ""],
    "5": ["", "", "", "", ""],
    "6": ["", "", "", "", ""],
    "7": ["", "", "", "", ""],
    "8": ["", "", "", "", ""],
    "9": ["", "", "", "", ""],
    "A": [" ______    ", "/\\  __ \\   ", "\\ \\  __ \\  ", " \\ \\_\\ \\_\\ ", "  \\/_/\\/_/ "],
    "B": [" ______    ", "/\\  == \\   ", "\\ \\  __<   ", " \\ \\_____\\ ", "  \\/_____/ "],
    "C": [" ______    ", "/\\  ___\\   ", "\\ \\ \\____  ", " \\ \\_____\\ ", "  \\/_____/ "],
    "D": [" _____    ", "/\\  __-.  ", "\\ \\ \\/\\ \\ ", " \\ \\____- ", "  \\/____/ "],
    "E": [" ______    ", "/\\  ___\\   ", "\\ \\  __\\   ", " \\ \\_____\\ ", "  \\/_____/ "],
    "F": [" ______  ", "/\\  ___\\ ", "\\ \\  __\\ ", " \\ \\_\\   ", "  \\/_/   "],
    "G": [" ______    ", "/\\  ___\\   ", "\\ \\ \\__ \\  ", " \\ \\_____\\ ", "  \\/_____/ "],
    "H": [" __  __    ", "/\\ \\_\\ \\   ", "\\ \\  __ \\  ", " \\ \\_\\ \\_\\ ", "  \\/_/\\/_/ "],
    "I": [" __    ", "/\\ \\   ", "\\ \\ \\  ", " \\ \\_\\ ", "  \\/_/ "],
    "J": ["   __    ", "  /\\ \\   ", " _\\_\\ \\  ", "/\\_____\\ ", "\\/_____/ "],
    "K": [" __  __    ", "/\\ \\/ /    ", "\\ \\  _\"-.  ", " \\ \\_\\ \\_\\ ", "  \\/_/\\/_/ "],
    "L": [" __        ", "/\\ \\       ", "\\ \\ \\____  ", " \\ \\_____\\ ", "  \\/_____/ "],
    "M": [" __    __    ", "/\\ \"-./  \\   ", "\\ \\ \\-./\\ \\  ", " \\ \\_\\ \\ \\_\\ ", "  \\/_/  \\/_/ "],
    "N": [" __   __    ", "/\\ \"-.\\ \\   ", "\\ \\ \\-.  \\  ", " \\ \\_\\\\\"\\_\\ ", "  \\/_/ \\/_/ "],
    "O": [" ______    ", "/\\  __ \\   ", "\\ \\ \\/\\ \\  ", " \\ \\_____\\ ", "  \\/_____/ "],
    "P": [" ______  ", "/\\  == \\ ", "\\ \\  _-/ ", " \\ \\_\\   ", "  \\/_/   "],
    "Q": [" ______    ", "/\\  __ \\   ", "\\ \\ \\/\\_\\  ", " \\ \\___\\_\\ ", "  \\/___/_/ "],
    "R": [" ______    ", "/\\  == \\   ", "\\ \\  __<   ", " \\ \\_\\ \\_\\ ", "  \\/_/ /_/ "],
    "S": [" ______    ", "/\\  ___\\   ", "\\ \\___  \\  ", " \\/\\_____\\ ", "  \\/_____/ "],
    "T": [" ______  ", "/\\__  _\\ ", "\\/_/\\ \\/ ", "   \\ \\_\\ ", "    \\/_/ "],
    "U": [" __  __    ", "/\\ \\/\\ \\   ", "\\ \\ \\_\\ \\  ", " \\ \\_____\\ ", "  \\/_____/ "],
    "V": [" __   __  ", "/\\ \\ / /  ", "\\ \\ \\'/   ", " \\ \\__|   ", "  \\/_/    "],
    "W": [" __     __    ", "/\\ \\  _ \\ \\   ", "\\ \\ \\/ \".\\ \\  ", " \\ \\__/\".~\\_\\ ", "  \\/_/   \\/_/ "],
    "X": [" __  __    ", "/\\_\\_\\_\\   ", "\\/_/\\_\\/_  ", "  /\\_\\/\\_\\ ", "  \\/_/\\/_/ "],
    "Y": [" __  __    ", "/\\ \\_\\ \\   ", "\\ \\____ \\  ", " \\/\\_____\\ ", "  \\/_____/ "],
    "Z": [" ______    ", "/\\___  \\   ", "\\/_/  /__  ", "  /\\_____\\ ", "  \\/_____/ "],
    " ": ["      ", "      ", "      ", "      ", "      "],
    "!": ["", "", "", "", ""],
    "?": ["", "", "", "", ""],
    ".": ["", "", "", "", ""],
    "-": ["", "", "", "", ""],
  },
};

// Variants the swirl resolves into. The three named presets carry hand-set
// figlet "slant" ASCII (the look we want for the real names — crisp, italic,
// hollow letterforms). The free-text logo generator renders ITS word live via
// block-font; that path is the only one that touches the generated fonts.

// figlet "slant" — the original logos, kept verbatim.
const SLANT_ARLAN = [
  "    ___         __          ",
  "   /   |  _____/ /___ _____ ",
  "  / /| | / ___/ / __ `/ __ \\",
  " / ___ |/ /  / / /_/ / / / /",
  "/_/  |_/_/  /_/\\__,_/_/ /_/ ",
];
const SLANT_HUMAN_DELTA = [
  "    __  __                               ____       ____       ",
  "   / / / /_  ______ ___  ____ _____     / __ \\___  / / /_____ _",
  "  / /_/ / / / / __ `__ \\/ __ `/ __ \\   / / / / _ \\/ / __/ __ `/",
  " / __  / /_/ / / / / / / /_/ / / / /  / /_/ /  __/ / /_/ /_/ / ",
  "/_/ /_/\\__,_/_/ /_/ /_/\\__,_/_/ /_/  /_____/\\___/_/\\__/\\__,_/  ",
];
const SLANT_KAMILA = [
  "    __ __                _ __     ",
  "   / //_/___ _____ ___  (_) /___ _",
  "  / ,< / __ `/ __ `__ \\/ / / __ `/",
  " / /| / /_/ / / / / / / / / /_/ / ",
  "/_/ |_\\__,_/_/ /_/ /_/_/_/\\__,_/  ",
];

export interface Variant {
  id: string;
  label: string;
  /** Pre-baked ASCII rows for the named presets. */
  rows: string[];
  /** Swirl-letter color. */
  ink: string;
  /** Resolved-logo color (independent of the swirl letters). */
  logo: string;
  /** Canvas background. */
  bg: string;
  /** Starting zoom (smaller = more cells, fits a wider word). */
  zoom: number;
}

export const VARIANTS: Variant[] = [
  { id: "arlan", label: "Arlan", rows: SLANT_ARLAN, ink: "#d8d8d8", logo: "#ffffff", bg: "#0c0c0d", zoom: 0.62 },
  { id: "human-delta", label: "Human Delta", rows: SLANT_HUMAN_DELTA, ink: "#dfe6f5", logo: "#ffffff", bg: "#0b1733", zoom: 0.62 },
  { id: "kamila", label: "Kamila", rows: SLANT_KAMILA, ink: "#f7d8e3", logo: "#ffffff", bg: "#2a0f1c", zoom: 0.62 },
];

// Hex → linear-ish 0..1 RGB for shader uniforms / per-cell colors.
export function hexToRgb01(hex: string): [number, number, number] {
  let h = hex.replace("#", "").trim();
  if (h.length === 3) h = h.split("").map((c) => c + c).join("");
  const n = parseInt(h, 16);
  return [((n >> 16) & 255) / 255, ((n >> 8) & 255) / 255, (n & 255) / 255];
}

// Placeholder field text. Lines should be LONG and VARIED in length: rows cycle
// through them and each column samples the line directly, so a long line fills
// the width while a short one leaves an airy gap, and that mix is the look.
export const DEFAULT_TEXT = `design is deciding what to leave out, then defending that emptiness against every well meaning request to fill it back in
clarity beats cleverness
the best interfaces feel inevitable, as if no other arrangement of the same pixels could have been correct
ship small
constraints are where the good ideas hide, so a boring problem usually means you have not found the right constraint yet
make it work, then make it right, then make it fast
taste is patience
a product is a long sequence of small decisions made visible, and the work is to keep making them after everyone got tired
the demo is the spec everyone actually reads
delete more than you add
most complexity is a missing decision wearing a costume, a question pushed downstream until it hardened into architecture
read the code before you replace it
motion should explain something true, where a thing came from or where it went, otherwise it is just expensive confetti
small loops beat big plans
the edges are where the craft shows, the empty states and the errors and the quiet moment right after a click
write it down or it did not happen
build for the person in front of you, not the imaginary average user who wants whatever you already built
opinions are cheap, working software is not
the boring solution is usually the correct one, and the urge to make it interesting is your ego asking for a stage
finish something today`;

"use client";

// A compact swirl canvas for the experiments below the main rebuild. Same
// engine, smaller frame. The wrapper matches the main playground's canvas box
// (z-10, shadow, full rounding) so a control Panel can tuck under it. It
// forwards pointer moves (cursor bend) and clicks (shockwave) to the stage.

import { useEffect, useRef, useState, type PointerEvent, type ReactNode } from "react";
import { useSwirlStage, type StageConfig, type StageEvents } from "./use-swirl-stage";

export function ExperimentStage({
  config,
  trackPointer = false,
  burstOnClick = false,
  onClick,
  replayKey,
  events,
  children,
}: {
  config: StageConfig;
  /** Forward normalized pointer (-1..1) to the stage each move (cursor bend). */
  trackPointer?: boolean;
  /** Spawn a shockwave on pointer down at the click point. */
  burstOnClick?: boolean;
  /** Extra click callback (e.g. bump a counter). */
  onClick?: () => void;
  /** Replay the entrance whenever this value changes (e.g. a pattern switch). */
  replayKey?: string | number;
  /** Lifecycle hooks (entrance start / settle / visibility) — e.g. for sound. */
  events?: StageEvents;
  /** Overlay (e.g. a hint line) rendered above the canvas. */
  children?: ReactNode;
}) {
  const canvasRef = useRef<HTMLCanvasElement>(null);
  const cfg = useRef<StageConfig>(config);
  // Sync live config (colors, pattern, sliders) into the ref the frame loop
  // reads every frame, so panel controls update the effect without re-init.
  cfg.current = config;
  const [failed, setFailed] = useState(false);
  // The canvas fades in (opacity only) once it has painted AND is in view, and
  // fades back out when scrolled off the play band, so the idle state shows the
  // dashed placeholder rather than a frozen frame.
  const [painted, setPainted] = useState(false);
  const [inView, setInView] = useState(false);

  // Merge the caller's events with our reveal tracking; keep in a ref so the
  // stage reads the latest without re-initializing.
  const eventsRef = useRef<StageEvents>({});
  eventsRef.current = {
    ...events,
    onFirstFrame: () => {
      setPainted(true);
      events?.onFirstFrame?.();
    },
    onVisible: (v) => {
      setInView(v);
      events?.onVisible?.(v);
    },
  };

  const stage = useSwirlStage(canvasRef, cfg, () => setFailed(true), eventsRef);

  // Restart the formation when replayKey changes (the word condenses again).
  useEffect(() => {
    if (replayKey !== undefined) stage.current.replay();
  }, [replayKey, stage]);

  const norm = (e: PointerEvent) => {
    const rect = (e.currentTarget as HTMLElement).getBoundingClientRect();
    return {
      x: ((e.clientX - rect.left) / rect.width) * 2 - 1,
      y: ((e.clientY - rect.top) / rect.height) * 2 - 1,
    };
  };

  // last pointer position (normalized) for a cheap speed estimate, used to drive
  // the cursor-move sound
  const prevPt = useRef<{ x: number; y: number } | null>(null);
  const handleMove = (e: PointerEvent) => {
    const p = norm(e);
    if (trackPointer) stage.current.setPointer(p);
    const onMove = eventsRef.current.onPointerMove;
    if (onMove) {
      const prev = prevPt.current;
      const speed = prev ? Math.min(1, Math.hypot(p.x - prev.x, p.y - prev.y) * 6) : 0;
      onMove(speed);
    }
    prevPt.current = p;
  };
  const wantsMove = trackPointer || !!events?.onPointerMove;
  const wantsDown = burstOnClick || !!events?.onPointerDown;

  return (
    <div
      // Idle backdrop reads like the Vault "more soon" cards: a light page-bg
      // panel with a dashed hairline border. Before the swirl paints / when it's
      // scrolled off the play band you see that, not a black box. Once the canvas
      // fades in it covers the panel; the solid border returns under it.
      className={`relative z-10 overflow-hidden rounded-xl ${
        painted && inView
          ? "border border-[var(--border-line)] bg-[color-mix(in_srgb,var(--bg-page)_97%,#000)]"
          : "border border-dashed border-[var(--border-line)] bg-[var(--bg-page)]"
      }`}
    >
      {failed ? (
        <div className="flex aspect-[16/9] w-full items-center justify-center px-6 text-center text-[12px] text-[var(--text-tertiary)]">
          WebGL2 unavailable here.
        </div>
      ) : (
        <canvas
          ref={canvasRef}
          style={{ opacity: painted && inView ? 1 : 0 }}
          className={`block aspect-[16/9] w-full transition-opacity duration-500 ease-[var(--ease-out)] motion-reduce:transition-none ${burstOnClick ? "cursor-pointer" : ""}`}
          onPointerMove={wantsMove ? handleMove : undefined}
          onPointerLeave={
            wantsMove
              ? () => {
                  if (trackPointer) stage.current.setPointer(null);
                  prevPt.current = null;
                }
              : undefined
          }
          onPointerDown={
            wantsDown
              ? (e) => {
                  const p = norm(e);
                  if (burstOnClick) stage.current.burst(p.x, p.y);
                  eventsRef.current.onPointerDown?.();
                  onClick?.();
                }
              : undefined
          }
        />
      )}
      {children}
    </div>
  );
}

export interface RenderedSticker {
  canvas: HTMLCanvasElement;
  width: number;
  height: number;
}

export interface RenderOpts {
  word: string;
  font: string;
  weight: number;
  fill: string;
  outline: string;
  fontSizePx: number;
  border?: number;
  dpr?: number;
}

export function renderSticker(opts: RenderOpts): RenderedSticker {
  const dpr = opts.dpr ?? Math.min(window.devicePixelRatio || 1, 2);
  const size = opts.fontSizePx;
  const border = opts.border ?? Math.max(6, Math.round(size * 0.16));
  const fontStr = `${opts.weight} ${size}px ${opts.font}`;

  const meas = document.createElement("canvas").getContext("2d")!;
  meas.font = fontStr;
  const m = meas.measureText(opts.word);
  const ascent = m.actualBoundingBoxAscent || size * 0.8;
  const descent = m.actualBoundingBoxDescent || size * 0.2;
  const textW = m.width;
  const textH = ascent + descent;

  const pad = border + 4;
  const cssW = Math.ceil(textW + pad * 2);
  const cssH = Math.ceil(textH + pad * 2);

  const canvas = document.createElement("canvas");
  canvas.width = Math.ceil(cssW * dpr);
  canvas.height = Math.ceil(cssH * dpr);
  const ctx = canvas.getContext("2d")!;
  ctx.scale(dpr, dpr);
  ctx.textBaseline = "alphabetic";
  ctx.font = fontStr;

  const bx = pad;
  const by = pad + ascent;

  const base = document.createElement("canvas");
  base.width = canvas.width;
  base.height = canvas.height;
  const bctx = base.getContext("2d")!;
  bctx.scale(dpr, dpr);
  bctx.font = fontStr;
  bctx.textBaseline = "alphabetic";
  bctx.fillStyle = opts.outline;

  for (let r = border; r > 0.5; r -= 1) {
    const stamps = Math.max(16, Math.ceil(r * 3));
    for (let a = 0; a < stamps; a++) {
      const ang = (a / stamps) * Math.PI * 2;
      bctx.fillText(opts.word, bx + Math.cos(ang) * r, by + Math.sin(ang) * r);
    }
  }

  bctx.fillText(opts.word, bx, by);

  ctx.setTransform(1, 0, 0, 1, 0, 0);
  ctx.drawImage(base, 0, 0);
  ctx.setTransform(dpr, 0, 0, dpr, 0, 0);

  ctx.fillStyle = opts.fill;
  ctx.font = fontStr;
  ctx.textBaseline = "alphabetic";
  ctx.fillText(opts.word, bx, by);

  return { canvas, width: cssW, height: cssH };
}

import { STICKERS, type StickerDef } from "./stickers";
import { renderSticker } from "./sticker-render";
import { StickerGL } from "./gl-sticker";

function resolveFamily(cssFamily: string): string {
  const probe = document.createElement("span");
  probe.style.fontFamily = cssFamily;
  probe.style.position = "absolute";
  probe.style.visibility = "hidden";
  probe.textContent = "Ag";
  document.body.appendChild(probe);
  const fam = getComputedStyle(probe).fontFamily || "sans-serif";
  document.body.removeChild(probe);
  return fam;
}

const FRICTION = 0.92;
const BOUNCE = 0.55;
const MIN_VEL = 0.05;
const THROW_SCALE = 0.7;
const GRAB_SCALE = 1.12;
const SCALE_EASE = 0.12;
const DRAG_EASE = 0.1;
const PEEL_EASE = 0.1;

const APPEAR_EASE = 0.09;
const APPEAR_STAGGER_MS = 140;

const PEEL_ELEVATION = 0.4;
const PEEL_PULLBACK = 0.16;

interface Item {
  def: StickerDef;
  art: HTMLCanvasElement;
  hit: HTMLDivElement;
  tex: WebGLTexture | null;
  w: number;
  h: number;
  x: number;
  y: number;
  tx: number;
  ty: number;
  vx: number;
  vy: number;
  scale: number;
  dragging: boolean;

  peel: number;
  grabU: number;
  grabV: number;
  anchorU: number;
  anchorV: number;
  offX: number;
  offY: number;

  appear: number;
  appearAt: number;
}

export class WordStickers {
  private host: HTMLElement;
  private items: Item[] = [];
  private W = 1;
  private H = 1;
  private dpr = 1;

  private gl: StickerGL | null = null;
  private useGL = false;

  private raf = 0;
  private running = false;
  private disposed = false;
  private laidOut = false;
  private entranceStarted = false;
  private now = 0;

  private drag: {
    item: Item;
    dx: number;
    dy: number;
    lastX: number;
    lastY: number;
    moved: number;
    pointerId: number;
  } | null = null;

  private ro?: ResizeObserver;
  private cleanup: (() => void)[] = [];

  constructor(host: HTMLElement) {
    this.host = host;
    this.dpr = Math.min(window.devicePixelRatio || 1, 2);
    this.measure();

    const gl = new StickerGL();
    if (gl.available) {
      this.gl = gl;
      this.useGL = true;
      gl.resize(this.W, this.H, this.dpr);
      host.appendChild(gl.canvas);
    }

    for (const def of STICKERS) {
      const fontSizePx = this.stickerFontPx();
      const r = renderSticker({
        word: def.word,
        font: resolveFamily(def.font),
        weight: def.weight,
        fill: def.fill,
        outline: def.outline,
        fontSizePx,
      });

      const art = r.canvas;
      let tex: WebGLTexture | null = null;
      if (this.useGL && this.gl) {
        tex = this.gl.makeTexture(art, r.width, r.height).tex;
      } else {

        Object.assign(art.style, {
          position: "absolute",
          width: `${r.width}px`,
          height: `${r.height}px`,
          left: "0",
          top: "0",
          pointerEvents: "none",
        });
        art.setAttribute("aria-hidden", "true");
        host.appendChild(art);
      }

      const hit = document.createElement("div");
      Object.assign(hit.style, {
        position: "absolute",
        left: "0",
        top: "0",
        width: `${r.width}px`,
        height: `${r.height}px`,
        cursor: "grab",
        touchAction: "none",
      });
      hit.setAttribute("aria-hidden", "true");
      host.appendChild(hit);

      const item: Item = {
        def,
        art,
        hit,
        tex,
        w: r.width,
        h: r.height,
        x: def.x * this.W - r.width / 2,
        y: def.y * this.H - r.height / 2,
        tx: 0,
        ty: 0,
        vx: 0,
        vy: 0,
        scale: 1,
        dragging: false,
        peel: 0,
        grabU: 0.5,
        grabV: 0.5,
        anchorU: 0.5,
        anchorV: 0.5,
        offX: 0,
        offY: 0,
        appear: 0,
        appearAt: 0,
      };
      item.tx = item.x;
      item.ty = item.y;
      this.clampInside(item);
      this.placeItem(item);
      this.items.push(item);
      this.bindDrag(item);
    }

    this.ro = new ResizeObserver(() => this.onResize());
    this.ro.observe(host);
  }

  private measure() {
    this.W = this.host.clientWidth || 1;
    this.H = this.host.clientHeight || 1;
  }

  private stickerFontPx() {
    const w = this.W > 40 ? this.W : 640;
    return Math.max(32, Math.min(66, w * 0.088));
  }

  private onResize() {
    const prevW = this.W;
    const prevH = this.H;
    this.measure();
    if (this.W < 2 || this.H < 2) return;
    this.gl?.resize(this.W, this.H, this.dpr);
    const sx = this.W / (prevW || 1);
    const sy = this.H / (prevH || 1);
    for (const it of this.items) {
      it.x *= sx;
      it.y *= sy;
      it.tx = it.x;
      it.ty = it.y;
    }
    this.rerenderAll();
  }

  private effScale(it: Item) {
    const a = it.appearAt > 0 ? it.appear : 1;
    return it.scale * a;
  }

  private placeItem(it: Item) {
    const s = this.effScale(it);
    const t = `translate(${it.x}px, ${it.y}px)${s !== 1 ? ` scale(${s})` : ""}`;
    it.hit.style.transform = t;
    if (!this.useGL) it.art.style.transform = t;
  }

  private clampInside(it: Item) {
    it.x = Math.max(0, Math.min(this.W - it.w, it.x));
    it.y = Math.max(0, Math.min(this.H - it.h, it.y));
  }

  private bindDrag(it: Item) {
    const onDown = (e: PointerEvent) => {
      e.preventDefault();
      this.host.appendChild(it.hit);
      it.dragging = true;
      it.vx = it.vy = 0;
      it.hit.style.cursor = "grabbing";
      it.hit.style.zIndex = "10";

      const r = this.rect();

      const gx = (e.clientX - r.left - it.x) / it.w;
      const gy = (e.clientY - r.top - it.y) / it.h;
      it.grabU = Math.min(1, Math.max(0, gx));
      it.grabV = Math.min(1, Math.max(0, gy));

      it.anchorU = 1 - it.grabU;
      it.anchorV = 1 - it.grabV;

      this.drag = {
        item: it,
        dx: e.clientX - r.left - it.x,
        dy: e.clientY - r.top - it.y,
        lastX: e.clientX,
        lastY: e.clientY,
        moved: 0,
        pointerId: e.pointerId,
      };
      it.hit.setPointerCapture?.(e.pointerId);
    };
    it.hit.addEventListener("pointerdown", onDown);
    this.cleanup.push(() => it.hit.removeEventListener("pointerdown", onDown));

    const onMove = (e: PointerEvent) => {
      if (!this.drag || this.drag.item !== it) return;
      const r = this.rect();
      it.tx = e.clientX - r.left - this.drag.dx;
      it.ty = e.clientY - r.top - this.drag.dy;
      this.drag.moved += Math.hypot(e.clientX - this.drag.lastX, e.clientY - this.drag.lastY);
      this.drag.lastX = e.clientX;
      this.drag.lastY = e.clientY;
    };
    it.hit.addEventListener("pointermove", onMove);
    this.cleanup.push(() => it.hit.removeEventListener("pointermove", onMove));

    const onUp = (e: PointerEvent) => {
      if (!this.drag || this.drag.item !== it) return;
      it.dragging = false;
      it.hit.style.cursor = "grab";
      it.hit.style.zIndex = "";
      it.vx *= THROW_SCALE;
      it.vy *= THROW_SCALE;
      it.hit.releasePointerCapture?.(e.pointerId);
      this.drag = null;
    };
    it.hit.addEventListener("pointerup", onUp);
    it.hit.addEventListener("pointercancel", onUp);
    this.cleanup.push(() => {
      it.hit.removeEventListener("pointerup", onUp);
      it.hit.removeEventListener("pointercancel", onUp);
    });
  }

  private rect() {
    return this.host.getBoundingClientRect();
  }

  start() {
    if (this.running || this.disposed) return;
    const prevW = this.W;
    this.measure();
    if (!this.laidOut || Math.abs(this.W - prevW) > 2) {
      this.layout();
      this.laidOut = true;
    }

    if (!this.entranceStarted) {
      this.entranceStarted = true;
      const order = [...this.items].sort((a, b) => a.def.x - b.def.x);
      const t0 = performance.now() + 150;
      order.forEach((it, i) => (it.appearAt = t0 + i * APPEAR_STAGGER_MS));
    }
    this.running = true;
    this.raf = requestAnimationFrame(this.loop);
  }

  stop() {
    this.running = false;
    if (this.raf) cancelAnimationFrame(this.raf);
    this.raf = 0;
  }

  private layout() {
    if (this.W < 2 || this.H < 2) return;
    this.gl?.resize(this.W, this.H, this.dpr);
    this.rerenderAll();
    for (const it of this.items) {
      it.x = it.def.x * this.W - it.w / 2;
      it.y = it.def.y * this.H - it.h / 2;
      it.tx = it.x;
      it.ty = it.y;
      it.vx = it.vy = 0;
      it.scale = 1;
      this.clampInside(it);
      this.placeItem(it);
    }
    this.drawGL();
  }

  private loop = () => {
    if (!this.running) return;
    this.now = performance.now();

    for (const it of this.items) {

      if (it.appearAt > 0 && this.now >= it.appearAt && it.appear < 1) {
        it.appear += (1 - it.appear) * APPEAR_EASE;
        if (it.appear > 0.999) it.appear = 1;
      }

      const targetScale = it.dragging ? GRAB_SCALE : 1;
      if (Math.abs(targetScale - it.scale) > 0.001) it.scale += (targetScale - it.scale) * SCALE_EASE;

      const peelTarget = it.dragging ? 1 : 0;
      if (Math.abs(peelTarget - it.peel) > 0.001) it.peel += (peelTarget - it.peel) * PEEL_EASE;

      if (it.dragging) {

        const nx = it.x + (it.tx - it.x) * DRAG_EASE;
        const ny = it.y + (it.ty - it.y) * DRAG_EASE;
        it.vx = nx - it.x;
        it.vy = ny - it.y;
        it.x = nx;
        it.y = ny;
        this.placeItem(it);
        continue;
      }

      const appearing = it.appearAt > 0 && it.appear < 1;
      const moving = Math.abs(it.vx) >= MIN_VEL || Math.abs(it.vy) >= MIN_VEL;
      if (!moving && it.peel < 0.001 && Math.abs(it.scale - 1) < 0.001 && !appearing) continue;

      it.x += it.vx;
      it.y += it.vy;
      if (it.x < 0) { it.x = 0; it.vx = -it.vx * BOUNCE; }
      else if (it.x > this.W - it.w) { it.x = this.W - it.w; it.vx = -it.vx * BOUNCE; }
      if (it.y < 0) { it.y = 0; it.vy = -it.vy * BOUNCE; }
      else if (it.y > this.H - it.h) { it.y = this.H - it.h; it.vy = -it.vy * BOUNCE; }
      it.vx *= FRICTION;
      it.vy *= FRICTION;
      this.placeItem(it);
    }

    this.drawGL();
    this.raf = requestAnimationFrame(this.loop);
  };

  private drawGL() {
    if (!this.useGL || !this.gl) return;
    this.gl.beginFrame();
    for (const it of this.items) {
      if (!it.tex) continue;
      this.gl.drawSticker({
        x: it.x,
        y: it.y,
        w: it.w,
        h: it.h,
        scale: this.effScale(it),
        grabU: it.grabU,
        grabV: it.grabV,
        anchorU: it.anchorU,
        anchorV: it.anchorV,
        fraction: it.peel,
        elevation: PEEL_ELEVATION,
        pullback: PEEL_PULLBACK,
        dragOffX: 0,
        dragOffY: 0,
        tex: it.tex,
      });
    }
  }

  renderStill() {
    for (const it of this.items) {
      it.vx = it.vy = 0;
      it.scale = 1;
      it.peel = 0;
      it.appear = 1;
      this.placeItem(it);
    }
    this.entranceStarted = true;
    this.drawGL();
  }

  refreshFonts() {
    this.measure();
    this.gl?.resize(this.W, this.H, this.dpr);
    this.rerenderAll();
    this.drawGL();
  }

  private rerenderAll() {
    const fontSizePx = this.stickerFontPx();
    for (const it of this.items) {
      const r = renderSticker({
        word: it.def.word,
        font: resolveFamily(it.def.font),
        weight: it.def.weight,
        fill: it.def.fill,
        outline: it.def.outline,
        fontSizePx,
      });
      it.w = r.width;
      it.h = r.height;
      it.hit.style.width = `${r.width}px`;
      it.hit.style.height = `${r.height}px`;
      if (this.useGL && this.gl) {
        it.tex = this.gl.makeTexture(r.canvas, r.width, r.height).tex;
      } else {
        const ctx = it.art.getContext("2d")!;
        it.art.width = r.canvas.width;
        it.art.height = r.canvas.height;
        it.art.style.width = `${r.width}px`;
        it.art.style.height = `${r.height}px`;
        ctx.clearRect(0, 0, it.art.width, it.art.height);
        ctx.drawImage(r.canvas, 0, 0);
      }
      this.clampInside(it);
      this.placeItem(it);
    }
  }

  destroy() {
    this.disposed = true;
    this.stop();
    this.cleanup.forEach((fn) => fn());
    this.ro?.disconnect();
    for (const it of this.items) {
      it.hit.parentNode?.removeChild(it.hit);
      if (!this.useGL) it.art.parentNode?.removeChild(it.art);
    }
    this.gl?.canvas.parentNode?.removeChild(this.gl.canvas);
    this.gl?.destroy();
  }
}

export const RAMP = " .:-=+*#%VAULT";

export function buildAtlas(ramp = RAMP, cell = 64): HTMLCanvasElement {
  const n = ramp.length;
  const c = document.createElement("canvas");
  c.width = cell * n;
  c.height = cell;
  const ctx = c.getContext("2d")!;
  ctx.clearRect(0, 0, c.width, c.height);
  ctx.fillStyle = "#fff";
  ctx.textAlign = "center";
  ctx.textBaseline = "middle";

  ctx.font = `${Math.floor(cell * 0.74)}px ui-monospace, "SF Mono", Menlo, monospace`;
  for (let i = 0; i < n; i++) {
    const ch = ramp[i];
    if (ch !== " ") ctx.fillText(ch, i * cell + cell / 2, cell / 2 + cell * 0.04);
  }
  return c;
}

export interface WordPoints {
  positions: Float32Array;
  count: number;
  aspect: number;
}

export function buildWordPoints(
  word: string,
  size: number,
): WordPoints {
  const count = size * size;

  const W = 1024;
  const H = 320;
  const c = document.createElement("canvas");
  c.width = W;
  c.height = H;
  const ctx = c.getContext("2d", { willReadFrequently: true })!;
  ctx.clearRect(0, 0, W, H);
  ctx.fillStyle = "#fff";
  ctx.textAlign = "center";
  ctx.textBaseline = "middle";

  let fontSize = 240;
  ctx.font = `800 ${fontSize}px ui-sans-serif, system-ui, sans-serif`;
  const margin = 80;
  const measured = ctx.measureText(word).width;
  if (measured > W - margin) {
    fontSize = Math.floor(fontSize * ((W - margin) / measured));
    ctx.font = `800 ${fontSize}px ui-sans-serif, system-ui, sans-serif`;
  }
  ctx.fillText(word, W / 2, H / 2);

  const data = ctx.getImageData(0, 0, W, H).data;

  const lit: [number, number][] = [];
  const stride = 2;
  for (let y = 0; y < H; y += stride) {
    for (let x = 0; x < W; x += stride) {
      const a = data[(y * W + x) * 4 + 3];
      if (a > 128) lit.push([x, y]);
    }
  }

  if (lit.length === 0) {
    for (let i = 0; i < 256; i++) lit.push([W / 2, H / 2]);
  }

  const aspect = W / H;
  const positions = new Float32Array(count * 4);
  for (let i = 0; i < count; i++) {

    const p = lit[(Math.random() * lit.length) | 0];
    const jx = (Math.random() - 0.5) * stride;
    const jy = (Math.random() - 0.5) * stride;
    const nx = ((p[0] + jx) / W - 0.5) * 2 * aspect;
    const ny = -((p[1] + jy) / H - 0.5) * 2;
    const nz = (Math.random() - 0.5) * 0.08;

    positions[i * 4 + 0] = nx;
    positions[i * 4 + 1] = ny;
    positions[i * 4 + 2] = nz;
    positions[i * 4 + 3] = Math.random();
  }

  return { positions, count, aspect };
}

import * as THREE from "three";
import { GPUComputationRenderer } from "three/examples/jsm/misc/GPUComputationRenderer.js";
import { EffectComposer } from "three/examples/jsm/postprocessing/EffectComposer.js";
import { RenderPass } from "three/examples/jsm/postprocessing/RenderPass.js";
import { ShaderPass } from "three/examples/jsm/postprocessing/ShaderPass.js";
import {
  GPGPU_COMPUTE,
  PARTICLE_VERT,
  PARTICLE_FRAG,
  ASCII_VERT,
  ASCII_FRAG,
  TRAIL_LEN,
} from "./shaders";
import { buildAtlas, RAMP } from "./atlas";
import { buildWordPoints } from "./word-points";

const FLOW_INFLUENCE = 0.43;
const FLOW_STRENGTH = 1.09;
const FLOW_FREQUENCY = 0.53;
const MOUSE_STRENGTH = 0.08;
const MOUSE_SPEED_GAIN = 1.5;

const IS_TOUCH =
  typeof window !== "undefined" &&
  (window.matchMedia?.("(pointer: coarse)").matches ?? false);

const FBO_SIZE = IS_TOUCH ? 128 : 200;
const MAX_DPR = IS_TOUCH ? 1.5 : 2;
const RENDER_SCALE = 0.5;
const ASCII_CELL_DIVISOR = 100;

export interface AsciiWordmarkOptions {
  word: string;
  inkColor: string;
}

export class AsciiWordmarkRenderer {
  private host: HTMLElement;
  private opts: AsciiWordmarkOptions;

  private renderer!: THREE.WebGLRenderer;
  private scene = new THREE.Scene();
  private camera!: THREE.PerspectiveCamera;
  private composer!: EffectComposer;
  private asciiPass!: ShaderPass;

  private gpgpu!: GPUComputationRenderer;
  private posVar!: ReturnType<GPUComputationRenderer["addVariable"]>;
  private points!: THREE.Points;
  private pointsMat!: THREE.ShaderMaterial;

  private clock = new THREE.Clock();
  private raf = 0;
  private running = false;
  private onScreen = true;
  private disposed = false;

  private mouse = new THREE.Vector3(9999, 9999, 0);
  private prevMouse = new THREE.Vector3(9999, 9999, 0);
  private mouseSpeed = 0;

  private mouseUv = new THREE.Vector2(9999, 9999);
  private onCard = false;

  private trailPos: THREE.Vector2[] = [];
  private trailAge: Float32Array = new Float32Array(TRAIL_LEN).fill(1);
  private trailOn = 0;
  private visibility = 0;
  private wordAspect = 3;
  private readonly WORD_MARGIN = 0.92;

  private io?: IntersectionObserver;
  private ro?: ResizeObserver;

  constructor(host: HTMLElement, opts: AsciiWordmarkOptions) {
    this.host = host;
    this.opts = opts;
  }

  mount(): boolean {
    const { clientWidth: w, clientHeight: h } = this.host;
    const dpr = Math.min(window.devicePixelRatio || 1, MAX_DPR);

    this.renderer = new THREE.WebGLRenderer({
      alpha: true,
      antialias: false,
      powerPreference: "high-performance",
      failIfMajorPerformanceCaveat: false,
    });
    this.renderer.setPixelRatio(dpr);
    this.renderer.setSize(w, h);
    this.renderer.setClearColor(0x000000, 0);
    this.host.appendChild(this.renderer.domElement);
    Object.assign(this.renderer.domElement.style, {
      position: "absolute",
      inset: "0",
      width: "100%",
      height: "100%",
      display: "block",

      touchAction: "pan-y",
      userSelect: "none",
      WebkitUserSelect: "none",
    });

    const { positions, count, aspect } = buildWordPoints(this.opts.word, FBO_SIZE);
    this.wordAspect = aspect;

    this.camera = new THREE.PerspectiveCamera(35, w / h, 0.1, 100);
    this.frameWord(w / h);
    this.camera.lookAt(0, 0, 0);

    if (!this.initGPGPU(positions)) return false;
    this.initPoints(count);
    this.initComposer(w, h, dpr);

    this.bindEvents();
    return true;
  }

  private initGPGPU(positions: Float32Array): boolean {
    this.gpgpu = new GPUComputationRenderer(FBO_SIZE, FBO_SIZE, this.renderer);

    this.gpgpu.setDataType(THREE.HalfFloatType);

    const baseTex = this.gpgpu.createTexture();
    (baseTex.image.data as Float32Array).set(positions);

    const initTex = this.gpgpu.createTexture();
    (initTex.image.data as Float32Array).set(positions);

    this.posVar = this.gpgpu.addVariable("uParticles", GPGPU_COMPUTE, initTex);
    this.gpgpu.setVariableDependencies(this.posVar, [this.posVar]);

    const u = this.posVar.material.uniforms;
    u.uTime = { value: 0 };
    u.uDeltaTime = { value: 0 };
    u.uBase = { value: baseTex };
    u.uFlowFieldInfluence = { value: FLOW_INFLUENCE };
    u.uFlowFieldStrength = { value: FLOW_STRENGTH };
    u.uFlowFieldFrequency = { value: FLOW_FREQUENCY };
    u.uMouse = { value: new THREE.Vector3(9999, 9999, 0) };
    u.uMouseStrength = { value: MOUSE_STRENGTH };
    u.uMouseSpeed = { value: 0 };

    const err = this.gpgpu.init();
    if (err) {

      console.warn("[ascii-wordmark] GPGPU unsupported, skipping:", err);
      return false;
    }
    return true;
  }

  private initPoints(count: number) {
    const geo = new THREE.BufferGeometry();

    const uvs = new Float32Array(count * 2);
    const sizes = new Float32Array(count);
    let i = 0;
    for (let y = 0; y < FBO_SIZE; y++) {
      for (let x = 0; x < FBO_SIZE; x++) {
        uvs[i * 2] = (x + 0.5) / FBO_SIZE;
        uvs[i * 2 + 1] = (y + 0.5) / FBO_SIZE;
        sizes[i] = 0.6 + Math.random() * 0.8;
        i++;
      }
    }

    geo.setAttribute("position", new THREE.BufferAttribute(new Float32Array(count * 3), 3));
    geo.setAttribute("aParticlesUv", new THREE.BufferAttribute(uvs, 2));
    geo.setAttribute("aSize", new THREE.BufferAttribute(sizes, 1));
    geo.setDrawRange(0, count);

    this.pointsMat = new THREE.ShaderMaterial({
      vertexShader: PARTICLE_VERT,
      fragmentShader: PARTICLE_FRAG,
      transparent: true,
      depthWrite: false,
      blending: THREE.AdditiveBlending,
      uniforms: {
        uResolution: { value: new THREE.Vector2() },
        uSize: { value: 4 },
        uVisibility: { value: 0 },
        uParticlesTexture: { value: null },
      },
    });

    this.points = new THREE.Points(geo, this.pointsMat);
    this.points.frustumCulled = false;
    this.scene.add(this.points);
  }

  private initComposer(w: number, h: number, dpr: number) {
    const bw = Math.max(2, Math.round(w * RENDER_SCALE));
    const bh = Math.max(2, Math.round(h * RENDER_SCALE));

    this.composer = new EffectComposer(this.renderer);
    this.composer.setPixelRatio(dpr);
    this.composer.setSize(w, h);
    this.composer.addPass(new RenderPass(this.scene, this.camera));

    const atlas = buildAtlas(RAMP);
    const atlasTex = new THREE.CanvasTexture(atlas);
    atlasTex.minFilter = THREE.LinearFilter;
    atlasTex.magFilter = THREE.LinearFilter;

    const cell = (bw * dpr) / ASCII_CELL_DIVISOR;

    const ink = new THREE.Color(this.opts.inkColor);

    this.trailPos = Array.from({ length: TRAIL_LEN }, () => new THREE.Vector2(9999, 9999));
    this.trailAge = new Float32Array(TRAIL_LEN).fill(1);

    this.asciiPass = new ShaderPass({
      uniforms: {
        tDiffuse: { value: null },
        uResolution: { value: new THREE.Vector2(bw * dpr, bh * dpr) },
        uAsciiPixelSize: { value: cell },
        uAsciiTexture: { value: atlasTex },
        uCharCount: { value: new THREE.Vector2(RAMP.length, 1) },
        uAsciiContrast: { value: 1.4 },
        uAsciiBrightness: { value: 0.12 },
        uAsciiMin: { value: 0.0 },
        uAsciiMax: { value: 1.0 },
        uAspect: { value: w / h },
        uInk: { value: new THREE.Vector3(ink.r, ink.g, ink.b) },
        uTrail: { value: this.trailPos },
        uTrailAge: { value: this.trailAge },
        uTrailOn: { value: 0 },
      },
      vertexShader: ASCII_VERT,
      fragmentShader: ASCII_FRAG,
    });
    this.asciiPass.renderToScreen = true;
    this.composer.addPass(this.asciiPass);

    this.pointsMat.uniforms.uResolution.value.set(w * dpr, h * dpr);
  }

  private bindEvents() {
    const onPointerMove = (e: PointerEvent) => {
      const r = this.host.getBoundingClientRect();

      const nx = ((e.clientX - r.left) / r.width) * 2 - 1;
      const ny = -(((e.clientY - r.top) / r.height) * 2 - 1);
      const v = new THREE.Vector3(nx, ny, 0.5).unproject(this.camera);
      const dir = v.sub(this.camera.position).normalize();
      const dist = -this.camera.position.z / dir.z;
      this.mouse.copy(this.camera.position).add(dir.multiplyScalar(dist));

      this.mouseUv.set((e.clientX - r.left) / r.width, 1 - (e.clientY - r.top) / r.height);
      this.onCard = true;
    };
    const onPointerLeave = () => {
      this.mouse.set(9999, 9999, 0);
      this.mouseUv.set(9999, 9999);
      this.onCard = false;
    };

    this.host.addEventListener("pointermove", onPointerMove);
    this.host.addEventListener("pointerleave", onPointerLeave);
    this.cleanupFns.push(() => {
      this.host.removeEventListener("pointermove", onPointerMove);
      this.host.removeEventListener("pointerleave", onPointerLeave);
    });

    const onVis = () => (document.hidden ? this.stop() : this.maybeStart());
    document.addEventListener("visibilitychange", onVis);
    this.cleanupFns.push(() => document.removeEventListener("visibilitychange", onVis));

    this.io = new IntersectionObserver(
      (es) => {
        this.onScreen = es[0]?.isIntersecting ?? true;
        this.onScreen ? this.maybeStart() : this.stop();
      },
      { threshold: 0.01 },
    );
    this.io.observe(this.host);

    this.ro = new ResizeObserver(() => this.resize());
    this.ro.observe(this.host);
  }

  private cleanupFns: (() => void)[] = [];

  private frameWord(viewportAspect: number) {
    const halfV = THREE.MathUtils.degToRad(this.camera.fov) / 2;
    const tanV = Math.tan(halfV);
    const distForHeight = 1.0 / tanV;
    const distForWidth = this.wordAspect / (tanV * viewportAspect);
    const dist = Math.max(distForHeight, distForWidth) * this.WORD_MARGIN;
    this.camera.position.set(0, 0, dist);
  }

  private resize() {
    if (this.disposed) return;
    const { clientWidth: w, clientHeight: h } = this.host;
    if (w === 0 || h === 0) return;
    const dpr = Math.min(window.devicePixelRatio || 1, MAX_DPR);
    this.renderer.setPixelRatio(dpr);
    this.renderer.setSize(w, h);
    this.composer.setPixelRatio(dpr);
    this.composer.setSize(w, h);
    this.camera.aspect = w / h;
    this.frameWord(w / h);
    this.camera.updateProjectionMatrix();

    const bw = Math.max(2, Math.round(w * RENDER_SCALE));
    const bh = Math.max(2, Math.round(h * RENDER_SCALE));
    this.asciiPass.uniforms.uResolution.value.set(bw * dpr, bh * dpr);
    this.asciiPass.uniforms.uAsciiPixelSize.value = (bw * dpr) / ASCII_CELL_DIVISOR;
    this.asciiPass.uniforms.uAspect.value = w / h;
    this.pointsMat.uniforms.uResolution.value.set(w * dpr, h * dpr);
  }

  start() {
    this.onScreen = true;
    this.maybeStart();
  }

  private maybeStart() {
    if (this.disposed || this.running || !this.onScreen || document.hidden) return;
    this.running = true;
    this.clock.getDelta();
    this.raf = requestAnimationFrame(this.loop);
  }

  stop() {
    this.running = false;
    if (this.raf) cancelAnimationFrame(this.raf);
    this.raf = 0;
  }

  private advanceTrail(dt: number) {
    const TRAIL_LIFE = 0.75;
    for (let i = 0; i < TRAIL_LEN; i++) {
      this.trailAge[i] = Math.min(1, this.trailAge[i] + dt / TRAIL_LIFE);
    }
    if (this.onCard) {

      for (let i = TRAIL_LEN - 1; i > 0; i--) {
        this.trailPos[i].copy(this.trailPos[i - 1]);
        this.trailAge[i] = this.trailAge[i - 1];
      }
      this.trailPos[0].copy(this.mouseUv);
      this.trailAge[0] = 0;
    }

    this.asciiPass.uniforms.uTrailAge.value = this.trailAge;
  }

  private loop = () => {
    if (!this.running) return;
    const dt = Math.min(this.clock.getDelta(), 1 / 30);
    const t = this.clock.elapsedTime;

    this.mouseSpeed = this.mouse.distanceTo(this.prevMouse);
    if (this.mouse.x > 9000) this.mouseSpeed = 0;
    this.prevMouse.copy(this.mouse);

    const cu = this.posVar.material.uniforms;
    cu.uTime.value = t;
    cu.uDeltaTime.value = dt;
    cu.uMouse.value.copy(this.mouse);
    cu.uMouseSpeed.value = this.mouseSpeed * MOUSE_SPEED_GAIN;
    this.gpgpu.compute();

    this.pointsMat.uniforms.uParticlesTexture.value =
      this.gpgpu.getCurrentRenderTarget(this.posVar).texture;

    this.visibility = Math.min(1, this.visibility + dt * 0.9);
    this.pointsMat.uniforms.uVisibility.value = this.visibility;

    const au = this.asciiPass.uniforms;
    this.advanceTrail(dt);

    this.trailOn += ((this.onCard ? 1 : 0) - this.trailOn) * Math.min(1, dt * 6);
    au.uTrailOn.value = this.trailOn;

    this.composer.render();
    this.raf = requestAnimationFrame(this.loop);
  };

  dispose() {
    this.disposed = true;
    this.stop();
    this.cleanupFns.forEach((fn) => fn());
    this.io?.disconnect();
    this.ro?.disconnect();
    this.points?.geometry.dispose();
    this.pointsMat?.dispose();
    this.asciiPass?.uniforms.uAsciiTexture.value?.dispose?.();
    this.gpgpu?.dispose?.();
    this.composer?.dispose?.();
    this.renderer?.dispose();
    this.renderer?.forceContextLoss?.();
    if (this.renderer?.domElement.parentNode) {
      this.renderer.domElement.parentNode.removeChild(this.renderer.domElement);
    }
  }
}

export type RippleTrigger = "click" | "hover" | "none";

export interface RippleOptions {
  /** Height of the waves (0 to 3). */
  amplitude?: number;
  /** How fast the rings travel outward. 1 is normal speed. */
  speed?: number;
  /** Distance between wave crests in CSS pixels. */
  wavelength?: number;
  /** Number of crests in each wave train (1 to 8). */
  rings?: number;
  /** How quickly the waves lose energy (higher dies faster). */
  decay?: number;
  /** How strongly the waves bend the page content, in CSS pixels. */
  refraction?: number;
  /** Chromatic dispersion splitting colors along the wave slopes (0 to 1). */
  dispersion?: number;
  /** Intensity of the light glints on the wave crests (0 to 2). */
  shine?: number;
  /** What spawns ripples. "click" on press, "hover" also leaves a wake while moving, "none" only ambient. */
  trigger?: RippleTrigger;
  /** Seconds between ambient ripples at random positions. 0 disables them. */
  interval?: number;
}

export interface RippleElements {
  /** Canvas with layoutsubtree that hosts the HTML content. */
  source: HTMLCanvasElement;
  /** The element inside the source canvas that gets captured. */
  content: HTMLElement;
  /** Canvas the WebGL effect renders to. */
  output: HTMLCanvasElement;
}

export interface RippleInstance {
  /** Update effect options live. */
  setOptions: (options: RippleOptions) => void;
  /** Spawn a ripple at a position in CSS pixels relative to the element. */
  splash: (x: number, y: number, strength?: number) => void;
  /** Re-read canvas size. Call when the element is resized. */
  resize: () => void;
  /** Stop the loop and release all GPU resources. */
  destroy: () => void;
}

const DEFAULTS: Required<RippleOptions> = {
  amplitude: 0.5,
  speed: 0.65,
  wavelength: 80,
  rings: 2,
  decay: 1,
  refraction: 100,
  dispersion: 0.5,
  shine: 0.5,
  trigger: "click",
  interval: 0,
};

const MAX_RIPPLES = 12;
const BASE_SPEED = 340;

type PaintableCanvas = HTMLCanvasElement & {
  onpaint?: (() => void) | null;
  requestPaint?: () => void;
};

type ElementImageContext = CanvasRenderingContext2D & {
  drawElementImage?: (element: Element, x: number, y: number) => void;
};

const VERT = `#version 300 es
precision highp float;
layout(location = 0) in vec2 aPos;
out vec2 vUv;
void main () {
  vUv = aPos * 0.5 + 0.5;
  gl_Position = vec4(aPos, 0.0, 1.0);
}`;

const FRAG = `#version 300 es
precision highp float;
in vec2 vUv;
out vec4 outColor;
uniform sampler2D uContent;
uniform vec2 uResolution;
uniform vec4 uRipples[12];
uniform int uCount;
uniform float uSpeed;
uniform float uWavelength;
uniform float uWidth;
uniform float uDecay;
uniform float uRefraction;
uniform float uDispersion;
uniform float uShine;
uniform float uHasContent;
uniform float uMaxX;

vec4 page (vec2 p) {
  p.x = clamp(p.x, 0.0005, uMaxX - 0.0005);
  p.y = clamp(p.y, 0.0005, 0.9995);
  return texture(uContent, p);
}

void main () {
  vec2 pUv = vec2(vUv.x, 1.0 - vUv.y);
  vec2 frag = pUv * uResolution;

  vec2 grad = vec2(0.0);
  float k = 6.28318530718 / uWavelength;
  float w2 = uWidth * uWidth;

  for (int i = 0; i < 12; i++) {
    if (i >= uCount) break;
    vec4 rp = uRipples[i];
    vec2 dv = frag - rp.xy;
    float r = length(dv);
    float front = uSpeed * rp.z;
    float s = r - front;
    float env = exp(-s * s / w2) * exp(-uDecay * rp.z) * rp.w;
    env *= smoothstep(0.0, 0.08, rp.z);
    env *= inversesqrt(1.0 + front / max(uWavelength, 1.0) * 0.2);
    if (env < 0.0015) continue;
    float dh = (k * cos(s * k) - 2.0 * s / w2 * sin(s * k)) * env;
    grad += dv / max(r, 1.0) * dh * uWavelength * 0.16;
  }

  float g = dot(grad, vec2(-0.55, -0.8));
  float glint = pow(clamp(g * 2.2, 0.0, 1.0), 2.0) * uShine;
  float shade = pow(clamp(-g * 1.6, 0.0, 1.0), 2.0) * uShine * 0.3;

  if (uHasContent < 0.5) {
    float a = clamp(glint * 0.9 + shade * 0.5, 0.0, 0.85);
    outColor = vec4(vec3(glint * 0.9), a);
    return;
  }

  vec2 offs = grad * uRefraction / uResolution;
  vec3 col;
  if (uDispersion > 0.001) {
    float d = uDispersion * 0.35;
    col = vec3(
      page(pUv + offs * (1.0 + d)).r,
      page(pUv + offs).g,
      page(pUv + offs * (1.0 - d)).b
    );
  } else {
    col = page(pUv + offs).rgb;
  }
  col += glint;
  col *= 1.0 - shade;
  outColor = vec4(col, 1.0);
}`;

export function supportsHtmlInCanvas(): boolean {
  if (typeof document === "undefined") return false;
  const probe = document.createElement("canvas") as PaintableCanvas;
  const ctx = probe.getContext("2d") as ElementImageContext | null;
  return Boolean(
    ctx &&
    typeof ctx.drawElementImage === "function" &&
    typeof probe.requestPaint === "function",
  );
}

export function createRipple(
  elements: RippleElements,
  options: RippleOptions = {},
): RippleInstance | null {
  const config = { ...DEFAULTS, ...options };
  const { source, content, output } = elements;

  const gl = output.getContext("webgl2", {
    alpha: true,
    depth: false,
    stencil: false,
    antialias: false,
    premultipliedAlpha: true,
  });
  if (!gl || gl.isContextLost()) return null;

  const sourceCtx = source.getContext("2d") as ElementImageContext | null;
  const paintable = source as PaintableCanvas;
  const htmlInCanvas = Boolean(
    sourceCtx &&
    typeof sourceCtx.drawElementImage === "function" &&
    typeof paintable.requestPaint === "function",
  );

  let contentDirty = false;
  let wake = () => {};

  if (htmlInCanvas) {
    paintable.onpaint = () => {
      try {
        sourceCtx!.reset();
        sourceCtx!.drawElementImage!(content, 0, 0);
        contentDirty = true;
        wake();
      } catch {}
    };
  }

  function compile(type: number, text: string): WebGLShader {
    const shader = gl!.createShader(type)!;
    gl!.shaderSource(shader, text);
    gl!.compileShader(shader);
    if (!gl!.getShaderParameter(shader, gl!.COMPILE_STATUS)) {
      console.error("Ripple shader error:", gl!.getShaderInfoLog(shader));
    }
    return shader;
  }

  const vertexShader = compile(gl.VERTEX_SHADER, VERT);
  const fragmentShader = compile(gl.FRAGMENT_SHADER, FRAG);
  const program = gl.createProgram()!;
  gl.attachShader(program, vertexShader);
  gl.attachShader(program, fragmentShader);
  gl.linkProgram(program);

  const uniforms: Record<string, WebGLUniformLocation> = {};
  const count = gl.getProgramParameter(program, gl.ACTIVE_UNIFORMS);
  for (let i = 0; i < count; i++) {
    const info = gl.getActiveUniform(program, i)!;
    uniforms[info.name.replace("[0]", "")] = gl.getUniformLocation(
      program,
      info.name,
    )!;
  }

  const quad = gl.createBuffer();
  gl.bindBuffer(gl.ARRAY_BUFFER, quad);
  gl.bufferData(
    gl.ARRAY_BUFFER,
    new Float32Array([-1, -1, 1, -1, -1, 1, 1, 1]),
    gl.STATIC_DRAW,
  );
  gl.enableVertexAttribArray(0);
  gl.vertexAttribPointer(0, 2, gl.FLOAT, false, 0, 0);

  const contentTexture = gl.createTexture()!;
  gl.bindTexture(gl.TEXTURE_2D, contentTexture);
  gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR);
  gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.LINEAR);
  gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE);
  gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE);
  gl.texImage2D(
    gl.TEXTURE_2D,
    0,
    gl.RGBA,
    1,
    1,
    0,
    gl.RGBA,
    gl.UNSIGNED_BYTE,
    new Uint8Array([0, 0, 0, 0]),
  );

  let contentMaxX = 1;

  function syncCanvasSize() {
    const dpr = Math.min(window.devicePixelRatio || 1, 2);
    const width = Math.max(1, Math.round(output.clientWidth * dpr));
    const height = Math.max(1, Math.round(output.clientHeight * dpr));
    if (output.width !== width || output.height !== height) {
      output.width = width;
      output.height = height;
    }
    contentMaxX = Math.min(
      1,
      Math.max(0.05, content.clientWidth / Math.max(output.clientWidth, 1)),
    );
    if (htmlInCanvas) {
      const cssWidth = Math.max(1, Math.round(source.clientWidth));
      const cssHeight = Math.max(1, Math.round(source.clientHeight));
      if (source.width !== cssWidth || source.height !== cssHeight) {
        source.width = cssWidth;
        source.height = cssHeight;
      }
      paintable.requestPaint!();
    }
  }

  syncCanvasSize();

  function uploadContent() {
    if (!htmlInCanvas || !contentDirty) return;
    contentDirty = false;
    gl!.bindTexture(gl!.TEXTURE_2D, contentTexture);
    gl!.texImage2D(
      gl!.TEXTURE_2D,
      0,
      gl!.RGBA,
      gl!.RGBA,
      gl!.UNSIGNED_BYTE,
      source,
    );
  }

  type Wave = { x: number; y: number; age: number; amp: number };
  const ripples: Wave[] = [];
  const rippleData = new Float32Array(MAX_RIPPLES * 4);

  function splash(x: number, y: number, strength = 1) {
    if (reducedMotion) return;
    if (ripples.length >= MAX_RIPPLES) ripples.shift();
    ripples.push({ x, y, age: 0, amp: strength });
    start();
  }

  function pruneRipples(delta: number) {
    const diag = Math.hypot(output.clientWidth, output.clientHeight);
    const speedPx = BASE_SPEED * Math.max(config.speed, 0.05);
    const width = config.wavelength * Math.max(config.rings, 1) * 0.5;
    for (let i = ripples.length - 1; i >= 0; i--) {
      const rp = ripples[i];
      rp.age += delta;
      const gone =
        rp.age * speedPx > diag + width * 3 ||
        Math.exp(-Math.max(config.decay, 0.05) * rp.age) * rp.amp < 0.012;
      if (gone) ripples.splice(i, 1);
    }
  }

  function render() {
    uploadContent();
    const dpr = output.width / Math.max(output.clientWidth, 1);
    gl!.useProgram(program);
    gl!.activeTexture(gl!.TEXTURE0);
    gl!.bindTexture(gl!.TEXTURE_2D, contentTexture);
    gl!.uniform1i(uniforms.uContent, 0);
    gl!.uniform2f(uniforms.uResolution, output.width, output.height);
    for (let i = 0; i < MAX_RIPPLES; i++) {
      const rp = ripples[i];
      rippleData[i * 4] = rp ? rp.x * dpr : 0;
      rippleData[i * 4 + 1] = rp ? rp.y * dpr : 0;
      rippleData[i * 4 + 2] = rp ? rp.age : 0;
      rippleData[i * 4 + 3] = rp ? rp.amp * Math.max(config.amplitude, 0) : 0;
    }
    gl!.uniform4fv(uniforms.uRipples, rippleData);
    gl!.uniform1i(uniforms.uCount, ripples.length);
    gl!.uniform1f(uniforms.uSpeed, BASE_SPEED * Math.max(config.speed, 0.05) * dpr);
    gl!.uniform1f(uniforms.uWavelength, Math.max(config.wavelength, 4) * dpr);
    gl!.uniform1f(
      uniforms.uWidth,
      Math.max(config.wavelength, 4) * Math.max(config.rings, 1) * 0.5 * dpr,
    );
    gl!.uniform1f(uniforms.uDecay, Math.max(config.decay, 0.05));
    gl!.uniform1f(uniforms.uRefraction, Math.max(config.refraction, 0) * dpr);
    gl!.uniform1f(uniforms.uDispersion, Math.max(config.dispersion, 0));
    gl!.uniform1f(uniforms.uShine, Math.max(config.shine, 0));
    gl!.uniform1f(uniforms.uHasContent, htmlInCanvas ? 1 : 0);
    gl!.uniform1f(uniforms.uMaxX, contentMaxX);
    gl!.bindFramebuffer(gl!.FRAMEBUFFER, null);
    gl!.viewport(0, 0, output.width, output.height);
    gl!.drawArrays(gl!.TRIANGLE_STRIP, 0, 4);
  }

  function renderIdle() {
    gl!.bindFramebuffer(gl!.FRAMEBUFFER, null);
    gl!.viewport(0, 0, output.width, output.height);
    if (htmlInCanvas) {
      render();
    } else {
      gl!.clearColor(0, 0, 0, 0);
      gl!.clear(gl!.COLOR_BUFFER_BIT);
    }
  }

  let raf = 0;
  let lastTime = performance.now();
  let destroyed = false;
  let running = false;
  let visible = true;
  let ambientTimer = 0;

  const motionQuery = window.matchMedia("(prefers-reduced-motion: reduce)");
  let reducedMotion = motionQuery.matches;

  function spawnAmbient() {
    const w = output.clientWidth;
    const h = output.clientHeight;
    if (w < 10 || h < 10) return;
    splash(
      w * (0.15 + Math.random() * 0.7),
      h * (0.15 + Math.random() * 0.7),
      0.6 + Math.random() * 0.5,
    );
  }

  function frame(now: number) {
    if (destroyed) return;
    if (!visible) {
      running = false;
      return;
    }
    const delta = Math.min(Math.max((now - lastTime) / 1000, 0), 1 / 30);
    lastTime = now;
    if (!reducedMotion) {
      pruneRipples(delta);
      if (config.interval > 0) {
        ambientTimer += delta;
        if (ambientTimer >= config.interval) {
          ambientTimer = 0;
          spawnAmbient();
        }
      }
    }
    if (ripples.length > 0) {
      render();
    } else {
      renderIdle();
      if (!contentDirty && (config.interval <= 0 || reducedMotion)) {
        running = false;
        return;
      }
    }
    raf = requestAnimationFrame(frame);
  }

  function start() {
    if (destroyed || running || !visible) return;
    running = true;
    lastTime = performance.now();
    raf = requestAnimationFrame(frame);
  }

  wake = start;
  start();

  function localPoint(event: PointerEvent): [number, number] {
    const rect = output.getBoundingClientRect();
    return [event.clientX - rect.left, event.clientY - rect.top];
  }

  let hoverX = -1e5;
  let hoverY = -1e5;

  function onPointerDown(event: PointerEvent) {
    if (config.trigger === "none") return;
    const [x, y] = localPoint(event);
    splash(x, y, 1);
  }

  function onPointerMove(event: PointerEvent) {
    if (config.trigger !== "hover") return;
    const [x, y] = localPoint(event);
    if (Math.hypot(x - hoverX, y - hoverY) < 56) return;
    hoverX = x;
    hoverY = y;
    splash(x, y, 0.3);
  }

  content.addEventListener("pointerdown", onPointerDown, { passive: true });
  content.addEventListener("pointermove", onPointerMove, { passive: true });

  function onMotionChange() {
    reducedMotion = motionQuery.matches;
    if (reducedMotion) ripples.length = 0;
    start();
  }
  motionQuery.addEventListener("change", onMotionChange);

  const observer = new ResizeObserver(() => {
    syncCanvasSize();
    start();
  });
  observer.observe(output);
  observer.observe(content);

  const intersection = new IntersectionObserver((entries) => {
    visible = entries[entries.length - 1]?.isIntersecting ?? true;
    if (visible) start();
  });
  intersection.observe(output);

  return {
    setOptions(next) {
      Object.assign(config, next);
      start();
    },
    splash,
    resize() {
      syncCanvasSize();
      start();
    },
    destroy() {
      destroyed = true;
      cancelAnimationFrame(raf);
      content.removeEventListener("pointerdown", onPointerDown);
      content.removeEventListener("pointermove", onPointerMove);
      observer.disconnect();
      intersection.disconnect();
      motionQuery.removeEventListener("change", onMotionChange);
      gl!.deleteTexture(contentTexture);
      gl!.deleteProgram(program);
      gl!.deleteShader(vertexShader);
      gl!.deleteShader(fragmentShader);
      gl!.deleteBuffer(quad);
      if (htmlInCanvas) paintable.onpaint = null;
    },
  };
}

export interface GlassOptions {
  /** Lens shape. */
  shape?: "circle" | "square" | "rectangle";
  /** Lens size (radius, or half height for rectangles) in CSS pixels. */
  size?: number;
  /** Width to height ratio of the rectangle shape (1 to 3). */
  aspect?: number;
  /** Corner radius for square and rectangle shapes in CSS pixels. */
  corner?: number;
  /** Index of refraction of the glass (1 to 2). Higher bends light more. */
  ior?: number;
  /** Fraction of the lens that stays optically flat before the rim (0 to 1). */
  edge?: number;
  /** How sharply the rim curves away (1 to 10). */
  bevel?: number;
  /** Optical depth in CSS pixels: how far the glass floats above the page. */
  depth?: number;
  /** Chromatic aberration strength at the rim (0 to 3). 0 disables it. */
  aberration?: number;
  /** Frosted blur of the glass face (0 = optically clear, up to 4). */
  blur?: number;
  /** Strength of the fresnel reflection on the rim (0 to 2). 0 disables it. */
  reflection?: number;
  /**
   * Specular rim highlight (0 to 2). Keeps the lens visible even over plain
   * backgrounds where clear glass would otherwise be invisible. 0 disables it.
   */
  shine?: number;
  /** Magnification while hovering a target element (1 to 3). */
  zoom?: number;
  /** CSS selector for elements that trigger the crystal ball zoom. */
  targets?: string;
  /** How quickly the lens follows the cursor (0 to 1). 1 snaps to it. */
  follow?: number;
}

export interface GlassElements {
  /** Canvas with layoutsubtree that hosts the HTML content. */
  source: HTMLCanvasElement;
  /** The element inside the source canvas that gets captured. */
  content: HTMLElement;
  /** Canvas the WebGL effect renders to. */
  output: HTMLCanvasElement;
}

export interface GlassInstance {
  /** Update effect options live. */
  setOptions: (options: GlassOptions) => void;
  /** Re-read canvas size. Call when the element is resized. */
  resize: () => void;
  /** Stop the loop and release all GPU resources. */
  destroy: () => void;
}

const DEFAULTS: Required<GlassOptions> = {
  shape: "circle",
  size: 120,
  aspect: 1.7,
  corner: 32,
  ior: 1.5,
  edge: 0.7,
  bevel: 4,
  depth: 250,
  aberration: 1,
  blur: 0,
  reflection: 1,
  shine: 0.01,
  zoom: 1.5,
  targets: "[data-glass-target]",
  follow: 0.2,
};

type PaintableCanvas = HTMLCanvasElement & {
  onpaint?: (() => void) | null;
  requestPaint?: () => void;
};

type ElementImageContext = CanvasRenderingContext2D & {
  drawElementImage?: (element: Element, x: number, y: number) => void;
};

const VERT = `#version 300 es
precision highp float;
layout(location = 0) in vec2 aPos;
void main () {
  gl_Position = vec4(aPos, 0.0, 1.0);
}`;

const FRAG = `#version 300 es
precision highp float;
out vec4 outColor;
uniform sampler2D uContent;
uniform vec2 uResolution;
uniform float uMaxX;
uniform float uHasContent;
uniform vec2 uCenter;
uniform vec2 uHalf;
uniform float uCorner;
uniform float uEdge;
uniform float uBevel;
uniform float uIor;
uniform float uDepth;
uniform float uAberration;
uniform float uBlur;
uniform float uReflect;
uniform float uShine;
uniform float uZoom;
uniform float uAlpha;

const float PI = 3.14159265358979;
const float AIR_IOR = 1.0003;
const vec3 INCIDENT = vec3(0.0, 0.0, 1.0);

float pow2 (float x) { return x * x; }
float pow5 (float x) { float x2 = x * x; return x2 * x2 * x; }
float linearStep (float e0, float e1, float x) {
  return clamp((x - e0) / (e1 - e0), 0.0, 1.0);
}

float sdf (vec2 p) {
  vec2 q = abs(p) - (uHalf - vec2(uCorner));
  return length(max(q, 0.0)) + min(max(q.x, q.y), 0.0) - uCorner;
}

float ign (vec2 v) {
  return fract(52.9829189 * fract(0.06711056 * v.x + 0.00583715 * v.y));
}

vec3 page (vec2 px, float lod) {
  vec2 uv = px / uResolution;
  uv.x = clamp(uv.x, 0.0005, uMaxX - 0.0005);
  uv.y = clamp(uv.y, 0.0005, 0.9995);
  return pow(textureLod(uContent, vec2(uv.x, 1.0 - uv.y), lod).rgb, vec3(2.2));
}

float iorForWavelength (float wavelength) {
  float ab = uAberration * 0.1;
  return mix(uIor + ab, uIor - ab,
    1.0 - pow(1.0 - linearStep(450.0, 650.0, wavelength), 4.0));
}

vec3 pageAA (vec2 px, float minLod) {
  float footprint = max(length(fwidth(px)), 1.0);
  return page(px, max(minLod, log2(footprint)));
}

vec3 sampleRefraction (vec2 basePx, float rim, vec3 normal, float glassIor) {
  vec3 rv = refract(INCIDENT, normal, AIR_IOR / glassIor);
  rv /= abs(rv.z) / uDepth;

  return pageAA(basePx + rv.xy, uBlur * (1.0 + rim));
}

float fresnelSchlick (float cosTheta, float f0) {
  return f0 + (1.0 - f0) * pow5(1.0 - cosTheta);
}

float smithSchlickDenom (float cosTheta, float k) {
  return cosTheta * (1.0 - k) + k;
}

float ggx (float roughness, float NDotL, float NDotV, float NDotH) {
  if (NDotL <= 0.0) return 0.0;
  float a2 = pow2(roughness);
  float d = a2 / (PI * pow2(pow2(NDotH) * (a2 - 1.0) + 1.0));
  float k = roughness * 0.5;
  float v = 1.0 / (smithSchlickDenom(NDotL, k)
    * smithSchlickDenom(clamp(NDotV, 0.0, 1.0), k));
  return NDotL * d * v;
}

void main () {
  vec2 fragPx = gl_FragCoord.xy;
  vec2 p = fragPx - uCenter;
  float sd = sdf(p);

  float aa = 1.5;
  float mask = 1.0 - smoothstep(-aa, 0.0, sd);
  float alpha = mask * uAlpha
    * (1.0 - step(uMaxX, fragPx.x / uResolution.x));

  float minHalf = min(uHalf.x, uHalf.y);
  float edgeW = max(minHalf * (1.0 - clamp(uEdge, 0.0, 0.98)), 1.0);
  float rim = pow(linearStep(-edgeW, 0.0, sd), uBevel);

  float scatter = min(uBlur, 1.0) * 0.02;
  float randAngle = ign(fragPx) * PI * 2.0;
  vec3 flatNormal = normalize(
    vec3(sin(randAngle) * scatter, cos(randAngle) * scatter, -1.0));
  float e = 1.0;
  vec2 grad = vec2(
    sdf(p + vec2(e, 0.0)) - sdf(p - vec2(e, 0.0)),
    sdf(p + vec2(0.0, e)) - sdf(p - vec2(0.0, e)));
  vec3 rimNormal = vec3(normalize(grad + vec2(1e-5)), 0.0);
  vec3 normal = normalize(mix(flatNormal, rimNormal, rim));

  if (uHasContent < 0.5) {
    float ldot = dot(rimNormal.xy, normalize(vec2(-0.6, 0.8)));
    float band = pow(rim, 1.8);
    float arcs = pow(abs(ldot), 3.0) * (ldot > 0.0 ? 0.5 : 0.28);
    float shine = band * (0.04 + arcs) * max(uShine, 0.5);
    float a = alpha * clamp(0.06 + 0.12 * rim, 0.0, 1.0);
    outColor = vec4(vec3(shine * 1.6) * alpha, a);
    return;
  }

  vec2 basePx = uCenter + p / uZoom;

  vec3 refracted;
  if (uAberration > 0.001) {
    refracted = sampleRefraction(basePx, rim, normal, iorForWavelength(611.4))
      * vec3(1.0, 0.0, 0.0);
    refracted += sampleRefraction(basePx, rim, normal, iorForWavelength(570.5))
      * vec3(1.0, 1.0, 0.0);
    refracted += sampleRefraction(basePx, rim, normal, iorForWavelength(549.1))
      * vec3(0.0, 1.0, 0.0);
    refracted += sampleRefraction(basePx, rim, normal, iorForWavelength(491.4))
      * vec3(0.0, 1.0, 1.0);
    refracted += sampleRefraction(basePx, rim, normal, iorForWavelength(464.2))
      * vec3(0.0, 0.0, 1.0);
    refracted += sampleRefraction(basePx, rim, normal, iorForWavelength(374.0))
      * vec3(1.0, 0.0, 1.0);
    refracted /= 3.0;
  } else {
    refracted = sampleRefraction(basePx, rim, normal, uIor);
  }

  vec3 glass = refracted;
  if (uReflect > 0.001) {
    const vec3 V = vec3(0.0, 0.0, -1.0);
    float NDotV = clamp(dot(V, normal), 0.0, 1.0);
    float f0 = pow2((uIor - AIR_IOR) / (uIor + AIR_IOR));
    float fresnelV = fresnelSchlick(NDotV, f0) * uReflect;

    vec3 reflectVector = reflect(INCIDENT, normal);
    vec3 L = reflectVector;
    vec3 H = normalize(L + V);
    reflectVector /= abs(reflectVector.z) / uDepth;
    vec3 reflected = page(basePx + reflectVector.xy, 2.5 + uBlur);
    reflected *= ggx(0.5, dot(normal, L), NDotV, dot(normal, H));
    glass = mix(refracted, reflected, clamp(fresnelV, 0.0, 1.0));
  }

  if (uShine > 0.001) {
    float ldot = dot(rimNormal.xy, normalize(vec2(-0.6, 0.8)));
    float band = pow(rim, 1.8);
    float arcs = pow(abs(ldot), 3.0) * (ldot > 0.0 ? 0.5 : 0.28);
    glass += band * (0.04 + arcs) * uShine;
  }

  outColor = vec4(pow(glass, vec3(1.0 / 2.2)) * alpha, alpha);
}`;

export function supportsHtmlInCanvas(): boolean {
  if (typeof document === "undefined") return false;
  const probe = document.createElement("canvas") as PaintableCanvas;
  const ctx = probe.getContext("2d") as ElementImageContext | null;
  return Boolean(
    ctx &&
    typeof ctx.drawElementImage === "function" &&
    typeof probe.requestPaint === "function",
  );
}

export function createGlass(
  elements: GlassElements,
  options: GlassOptions = {},
): GlassInstance | null {
  const config = { ...DEFAULTS, ...options };
  const { source, content, output } = elements;

  const gl = output.getContext("webgl2", {
    alpha: true,
    depth: false,
    stencil: false,
    antialias: false,
    premultipliedAlpha: true,
  });
  if (!gl || gl.isContextLost()) return null;

  const sourceCtx = source.getContext("2d") as ElementImageContext | null;
  const paintable = source as PaintableCanvas;
  const htmlInCanvas = Boolean(
    sourceCtx &&
    typeof sourceCtx.drawElementImage === "function" &&
    typeof paintable.requestPaint === "function",
  );

  let contentDirty = false;
  let wake = () => {};

  if (htmlInCanvas) {
    paintable.onpaint = () => {
      try {
        sourceCtx!.reset();
        sourceCtx!.drawElementImage!(content, 0, 0);
        contentDirty = true;
        wake();
      } catch {}
    };
  }

  function compile(type: number, text: string): WebGLShader {
    const shader = gl!.createShader(type)!;
    gl!.shaderSource(shader, text);
    gl!.compileShader(shader);
    if (!gl!.getShaderParameter(shader, gl!.COMPILE_STATUS)) {
      console.error("Glass shader error:", gl!.getShaderInfoLog(shader));
    }
    return shader;
  }

  const vertexShader = compile(gl.VERTEX_SHADER, VERT);
  const fragmentShader = compile(gl.FRAGMENT_SHADER, FRAG);
  const program = gl.createProgram()!;
  gl.attachShader(program, vertexShader);
  gl.attachShader(program, fragmentShader);
  gl.linkProgram(program);

  const uniforms: Record<string, WebGLUniformLocation> = {};
  const count = gl.getProgramParameter(program, gl.ACTIVE_UNIFORMS);
  for (let i = 0; i < count; i++) {
    const info = gl.getActiveUniform(program, i)!;
    uniforms[info.name] = gl.getUniformLocation(program, info.name)!;
  }

  const quad = gl.createBuffer();
  gl.bindBuffer(gl.ARRAY_BUFFER, quad);
  gl.bufferData(
    gl.ARRAY_BUFFER,
    new Float32Array([-1, -1, 1, -1, -1, 1, 1, 1]),
    gl.STATIC_DRAW,
  );
  gl.enableVertexAttribArray(0);
  gl.vertexAttribPointer(0, 2, gl.FLOAT, false, 0, 0);

  const contentTexture = gl.createTexture()!;
  gl.bindTexture(gl.TEXTURE_2D, contentTexture);
  gl.texParameteri(
    gl.TEXTURE_2D,
    gl.TEXTURE_MIN_FILTER,
    gl.LINEAR_MIPMAP_LINEAR,
  );
  gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.LINEAR);
  gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE);
  gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE);
  gl.texImage2D(
    gl.TEXTURE_2D,
    0,
    gl.RGBA,
    1,
    1,
    0,
    gl.RGBA,
    gl.UNSIGNED_BYTE,
    new Uint8Array([0, 0, 0, 0]),
  );
  gl.generateMipmap(gl.TEXTURE_2D);

  let contentMaxX = 1;

  function syncCanvasSize() {
    const dpr = Math.min(window.devicePixelRatio || 1, 2);
    const width = Math.max(1, Math.round(output.clientWidth * dpr));
    const height = Math.max(1, Math.round(output.clientHeight * dpr));
    if (output.width !== width || output.height !== height) {
      output.width = width;
      output.height = height;
    }
    contentMaxX = Math.min(
      1,
      Math.max(0.05, content.clientWidth / Math.max(output.clientWidth, 1)),
    );
    if (htmlInCanvas) {
      const cssWidth = Math.max(1, Math.round(source.clientWidth));
      const cssHeight = Math.max(1, Math.round(source.clientHeight));
      if (source.width !== cssWidth || source.height !== cssHeight) {
        source.width = cssWidth;
        source.height = cssHeight;
      }
      paintable.requestPaint!();
    }
  }

  syncCanvasSize();

  function uploadContent() {
    if (!htmlInCanvas || !contentDirty) return;
    contentDirty = false;
    gl!.bindTexture(gl!.TEXTURE_2D, contentTexture);
    gl!.texImage2D(
      gl!.TEXTURE_2D,
      0,
      gl!.RGBA,
      gl!.RGBA,
      gl!.UNSIGNED_BYTE,
      source,
    );
    gl!.generateMipmap(gl!.TEXTURE_2D);
  }

  let posX = output.clientWidth / 2;
  let posY = output.clientHeight / 2;
  let presence = 0;
  let presenceTarget = 0;
  let targetX = posX;
  let targetY = posY;
  let zoom = 1;
  let zoomTarget = 1;
  let hasPointer = false;

  function halfExtents(): [number, number] {
    const size = Math.max(config.size, 8);
    if (config.shape === "rectangle") {
      return [size * Math.min(Math.max(config.aspect, 1), 4), size];
    }
    return [size, size];
  }

  function render() {
    uploadContent();
    const dpr = output.width / Math.max(output.clientWidth, 1);
    gl!.bindFramebuffer(gl!.FRAMEBUFFER, null);
    gl!.viewport(0, 0, output.width, output.height);
    gl!.disable(gl!.SCISSOR_TEST);
    gl!.clearColor(0, 0, 0, 0);
    gl!.clear(gl!.COLOR_BUFFER_BIT);
    if (presence <= 0.004) return;

    const [baseHalfW, baseHalfH] = halfExtents();
    const halfW = baseHalfW * presence;
    const halfH = baseHalfH * presence;
    const alpha = Math.min(presence * 5, 1);
    const cx = posX * dpr;
    const cy = output.height - posY * dpr;
    const margin = 4 * dpr;
    const sx = Math.max(0, Math.floor(cx - halfW * dpr - margin));
    const sy = Math.max(0, Math.floor(cy - halfH * dpr - margin));
    gl!.enable(gl!.SCISSOR_TEST);
    gl!.scissor(
      sx,
      sy,
      Math.min(output.width - sx, Math.ceil(halfW * dpr * 2 + margin * 2)),
      Math.min(output.height - sy, Math.ceil(halfH * dpr * 2 + margin * 2)),
    );

    gl!.useProgram(program);
    gl!.activeTexture(gl!.TEXTURE0);
    gl!.bindTexture(gl!.TEXTURE_2D, contentTexture);
    gl!.uniform1i(uniforms.uContent, 0);
    gl!.uniform2f(uniforms.uResolution, output.width, output.height);
    gl!.uniform1f(uniforms.uMaxX, contentMaxX);
    gl!.uniform1f(uniforms.uHasContent, htmlInCanvas ? 1 : 0);
    gl!.uniform2f(uniforms.uCenter, cx, cy);
    gl!.uniform2f(uniforms.uHalf, halfW * dpr, halfH * dpr);
    const corner =
      config.shape === "circle"
        ? Math.min(halfW, halfH)
        : Math.min(Math.max(config.corner, 0), Math.min(halfW, halfH));
    gl!.uniform1f(uniforms.uCorner, corner * dpr);
    gl!.uniform1f(uniforms.uEdge, Math.min(Math.max(config.edge, 0), 0.98));
    gl!.uniform1f(uniforms.uBevel, Math.max(config.bevel, 0.5));
    gl!.uniform1f(uniforms.uIor, Math.min(Math.max(config.ior, 1.01), 2.5));
    gl!.uniform1f(uniforms.uDepth, Math.max(config.depth, 0) * dpr);
    gl!.uniform1f(uniforms.uAberration, Math.max(config.aberration, 0));
    gl!.uniform1f(uniforms.uBlur, Math.max(config.blur, 0));
    gl!.uniform1f(uniforms.uReflect, Math.max(config.reflection, 0));
    gl!.uniform1f(uniforms.uShine, Math.max(config.shine, 0));
    gl!.uniform1f(uniforms.uZoom, Math.max(zoom, 1));
    gl!.uniform1f(uniforms.uAlpha, alpha);
    gl!.drawArrays(gl!.TRIANGLE_STRIP, 0, 4);
    gl!.disable(gl!.SCISSOR_TEST);
  }

  let raf = 0;
  let lastTime = performance.now();
  let destroyed = false;
  let running = false;
  let visible = true;

  const motionQuery = window.matchMedia("(prefers-reduced-motion: reduce)");
  let reducedMotion = motionQuery.matches;

  function frame(now: number) {
    if (destroyed) return;
    if (!visible) {
      running = false;
      return;
    }
    const delta = Math.min((now - lastTime) / 1000, 1 / 30);
    lastTime = now;

    const follow = Math.min(Math.max(config.follow, 0.02), 1);
    const kPos =
      reducedMotion || follow >= 1
        ? 1
        : 1 - Math.exp(-delta * (4 + follow * 26));
    const kZoom = reducedMotion ? 1 : 1 - Math.exp(-delta * 7);
    const kScale = reducedMotion ? 1 : 1 - Math.exp(-delta * 11);
    posX += (targetX - posX) * kPos;
    posY += (targetY - posY) * kPos;
    zoom += (zoomTarget - zoom) * kZoom;
    presence += (presenceTarget - presence) * kScale;

    render();

    const settled =
      Math.abs(targetX - posX) < 0.1 &&
      Math.abs(targetY - posY) < 0.1 &&
      Math.abs(zoomTarget - zoom) < 0.002 &&
      Math.abs(presenceTarget - presence) < 0.002;
    if (settled && !contentDirty) {
      posX = targetX;
      posY = targetY;
      zoom = zoomTarget;
      presence = presenceTarget;
      running = false;
      return;
    }
    raf = requestAnimationFrame(frame);
  }

  function start() {
    if (destroyed || running || !visible) return;
    running = true;
    lastTime = performance.now();
    raf = requestAnimationFrame(frame);
  }

  wake = start;
  start();

  function onPointerMove(event: PointerEvent) {
    const rect = output.getBoundingClientRect();
    targetX = event.clientX - rect.left;
    targetY = event.clientY - rect.top;
    if (!hasPointer) {
      posX = targetX;
      posY = targetY;
      hasPointer = true;
    }
    presenceTarget = 1;
    const target = event.target as Element | null;
    zoomTarget =
      config.zoom > 1 && target?.closest?.(config.targets)
        ? Math.min(Math.max(config.zoom, 1), 4)
        : 1;
    start();
  }

  function onPointerLeave() {
    presenceTarget = 0;
    zoomTarget = 1;
    hasPointer = false;
    start();
  }

  content.addEventListener("pointermove", onPointerMove, { passive: true });
  content.addEventListener("pointerleave", onPointerLeave, { passive: true });

  function onScroll() {
    start();
  }
  content.addEventListener("scroll", onScroll, { passive: true });

  function onMotionChange() {
    reducedMotion = motionQuery.matches;
    start();
  }
  motionQuery.addEventListener("change", onMotionChange);

  const observer = new ResizeObserver(() => {
    syncCanvasSize();
    start();
  });
  observer.observe(output);
  observer.observe(content);

  const intersection = new IntersectionObserver((entries) => {
    visible = entries[entries.length - 1]?.isIntersecting ?? true;
    if (visible) start();
  });
  intersection.observe(output);

  return {
    setOptions(next) {
      Object.assign(config, next);
      start();
    },
    resize() {
      syncCanvasSize();
      start();
    },
    destroy() {
      destroyed = true;
      cancelAnimationFrame(raf);
      content.removeEventListener("pointermove", onPointerMove);
      content.removeEventListener("pointerleave", onPointerLeave);
      content.removeEventListener("scroll", onScroll);
      observer.disconnect();
      intersection.disconnect();
      motionQuery.removeEventListener("change", onMotionChange);
      gl!.deleteTexture(contentTexture);
      gl!.deleteProgram(program);
      gl!.deleteShader(vertexShader);
      gl!.deleteShader(fragmentShader);
      gl!.deleteBuffer(quad);
      if (htmlInCanvas) paintable.onpaint = null;
    },
  };
}

export interface MagnifyOptions {
  /** Lens radius in CSS pixels. */
  size?: number;
  /** Magnification inside the lens (1 to 4). */
  zoom?: number;
  /** HUD accent color as RGB in the 0 to 1 range. Tints the reticle, readout, and ripple outline. */
  color?: [number, number, number];
  /** How quickly the lens follows the cursor (0 to 1). 1 snaps to it. */
  follow?: number;
  /** Overall HUD intensity (0 to 1). 0 hides every reticle element. */
  hud?: number;
  /** Show the outer ring. */
  ring?: boolean;
  /** Show the crosshair lines through the center. */
  crosshair?: boolean;
  /** Show the tick marks around the ring. */
  ticks?: boolean;
  /** Show the corner brackets inside the lens. */
  brackets?: boolean;
  /** Show the center dot. */
  dot?: boolean;
  /** Show a faint measurement grid inside the lens. */
  grid?: boolean;
  /** Show the data readout beside the lens. */
  readout?: boolean;
  /** Chromatic aberration split inside the lens (0 to 3). 0 disables it. */
  aberration?: number;
  /** Dreamy insight haze inside the lens (0 to 1). Softens and lifts the magnified content. */
  haze?: number;
  /** Emit a ripple across the page on click. */
  ripples?: boolean;
  /** How fast the ripple wavefront travels, in CSS pixels per second. */
  rippleSpeed?: number;
  /** Thickness of the colored ripple outline in CSS pixels. */
  rippleWidth?: number;
  /** Width of the band the ripple bends, in CSS pixels. */
  rippleBendWidth?: number;
  /** How many CSS pixels the ripple bends the page. */
  rippleBend?: number;
  /** Strength of the colored ripple outline (0 to 2). 0 hides it. */
  rippleGlow?: number;
  /** Seconds a ripple lives before it fades out. */
  rippleLife?: number;
}

export interface MagnifyElements {
  /** Canvas with layoutsubtree that hosts the HTML content. */
  source: HTMLCanvasElement;
  /** The element inside the source canvas that gets captured. */
  content: HTMLElement;
  /** Canvas the WebGL effect renders to. */
  output: HTMLCanvasElement;
}

export interface MagnifyInstance {
  /** Update effect options live. */
  setOptions: (options: MagnifyOptions) => void;
  /** Re-read canvas size. Call when the element is resized. */
  resize: () => void;
  /** Stop the loop and release all GPU resources. */
  destroy: () => void;
}

const DEFAULTS: Required<MagnifyOptions> = {
  size: 140,
  zoom: 1.5,
  color: [0.8, 0.8, 0.8],
  follow: 0.25,
  hud: 0.8,
  ring: true,
  crosshair: true,
  ticks: true,
  brackets: true,
  dot: true,
  grid: false,
  readout: true,
  aberration: 0.8,
  haze: 0.2,
  ripples: true,
  rippleSpeed: 900,
  rippleWidth: 2,
  rippleBendWidth: 100,
  rippleBend: 20,
  rippleGlow: 1,
  rippleLife: 1.4,
};

const MAX_RIPPLES = 6;

type PaintableCanvas = HTMLCanvasElement & {
  onpaint?: (() => void) | null;
  requestPaint?: () => void;
};

type ElementImageContext = CanvasRenderingContext2D & {
  drawElementImage?: (element: Element, x: number, y: number) => void;
};

const VERT = `#version 300 es
precision highp float;
layout(location = 0) in vec2 aPos;
void main () {
  gl_Position = vec4(aPos, 0.0, 1.0);
}`;

const FRAG = `#version 300 es
precision highp float;
out vec4 outColor;
uniform sampler2D uContent;
uniform vec2 uResolution;
uniform float uMaxX;
uniform float uHasContent;
uniform float uDpr;
uniform vec2 uCenter;
uniform float uRadius;
uniform float uZoom;
uniform float uAlpha;
uniform vec3 uColor;
uniform float uHud;
uniform float uRing;
uniform float uCross;
uniform float uTicks;
uniform float uBrackets;
uniform float uDot;
uniform float uGrid;
uniform float uAberration;
uniform float uHaze;
uniform vec4 uRipples[${MAX_RIPPLES}];
uniform float uRippleWidth;
uniform float uRippleBendWidth;
uniform float uRippleBend;
uniform float uRippleGlow;

const float PI = 3.14159265358979;

float pow2 (float x) { return x * x; }

vec3 page (vec2 px, float lod) {
  vec2 uv = px / uResolution;
  uv.x = clamp(uv.x, 0.0005, uMaxX - 0.0005);
  uv.y = clamp(uv.y, 0.0005, 0.9995);
  return pow(textureLod(uContent, vec2(uv.x, 1.0 - uv.y), lod).rgb, vec3(2.2));
}

vec3 pageAA (vec2 px, float minLod) {
  float footprint = max(length(fwidth(px)), 1.0);
  return page(px, max(minLod, log2(footprint)));
}

float line (float d, float halfWidth) {
  return 1.0 - smoothstep(halfWidth - 0.75, halfWidth + 0.75, abs(d));
}

void main () {
  vec2 fragPx = gl_FragCoord.xy;
  vec2 p = fragPx - uCenter;
  float d = length(p);
  float R = uRadius;
  float w = 1.1 * uDpr;

  vec2 rippleOffset = vec2(0.0);
  float crest = 0.0;
  float bendVis = 0.0;
  for (int i = 0; i < ${MAX_RIPPLES}; i++) {
    vec4 rp = uRipples[i];
    vec2 rd = fragPx - rp.xy;
    float rl = max(length(rd), 1.0);
    float bendBand = exp(-pow2((rl - rp.z) / max(uRippleBendWidth * uDpr, 1.0)));
    float crestBand = exp(-pow2((rl - rp.z) / max(uRippleWidth * uDpr, 1.0)));
    rippleOffset += (rd / rl) * bendBand * rp.w * uRippleBend * uDpr;
    crest = max(crest, crestBand * rp.w);
    bendVis = max(bendVis, bendBand * rp.w);
  }

  float inContent = 1.0 - smoothstep(
    uMaxX * uResolution.x - 2.0, uMaxX * uResolution.x, fragPx.x);
  crest *= inContent;
  float rippleCover = smoothstep(0.001, 0.03, bendVis) * inContent;

  float lensMask = 1.0 - smoothstep(R - 1.5, R, d);
  vec2 lensPx = uCenter + p / max(uZoom, 1.0) - rippleOffset;
  float rimT = pow2(clamp(d / max(R, 1.0), 0.0, 1.0));
  vec2 dir = p / max(d, 0.5);
  float caPx = uAberration * 5.0 * rimT * uDpr;
  float hazeLod = uHaze * 3.0 * (0.3 + 0.7 * rimT);
  vec3 inside;
  inside.r = pageAA(lensPx + dir * caPx, hazeLod).r;
  inside.g = pageAA(lensPx, hazeLod).g;
  inside.b = pageAA(lensPx - dir * caPx, hazeLod).b;

  vec3 soft = page(lensPx, 4.5);
  inside = mix(
    inside,
    soft * (1.0 + 0.4 * uHaze) + uColor * 0.06 * uHaze,
    clamp(uHaze, 0.0, 1.0) * 0.45);

  vec3 bent = pageAA(fragPx - rippleOffset, 0.0);

  float hud = 0.0;

  hud += uRing * line(d - R, 1.3 * uDpr);

  float angle = atan(p.y, p.x);
  float sector = PI / 4.0;
  float da = abs(angle - (floor(angle / sector + 0.5) * sector)) * max(d, 1.0);
  float tickBand = smoothstep(R + 4.0 * uDpr, R + 6.0 * uDpr, d)
    * (1.0 - smoothstep(R + 12.0 * uDpr, R + 14.0 * uDpr, d));
  hud += uTicks * line(da, w) * tickBand;

  float reach = R * 1.14;
  float crossLine = max(
    line(p.x, w) * step(abs(p.y), reach),
    line(p.y, w) * step(abs(p.x), reach));
  hud += uCross * crossLine * smoothstep(6.0 * uDpr, 10.0 * uDpr, d) * 0.75;

  vec2 q = abs(p);
  float c = R * 0.64;
  float len = R * 0.2;
  float arm1 = line(q.x - c, w) * step(c - len, q.y) * step(q.y, c + w);
  float arm2 = line(q.y - c, w) * step(c - len, q.x) * step(q.x, c + w);
  hud += uBrackets * max(arm1, arm2);

  hud += uDot * (1.0 - smoothstep(1.6 * uDpr, 2.6 * uDpr, d));
  hud += uDot * line(d - 5.5 * uDpr, 0.9 * uDpr) * 0.6;

  float spacing = max(R * 0.25, 8.0);
  float gx = line(mod(p.x + spacing * 0.5, spacing) - spacing * 0.5, 0.6 * uDpr);
  float gy = line(mod(p.y + spacing * 0.5, spacing) - spacing * 0.5, 0.6 * uDpr);
  hud += uGrid * max(gx, gy) * lensMask * 0.16;

  hud = clamp(hud, 0.0, 1.0) * uHud;

  if (uHasContent < 0.5) {
    vec3 hudCol = pow(max(uColor, 0.0), vec3(1.0 / 2.2));
    float hudA = hud * uAlpha;
    float glow = clamp(pow(crest, 1.5) * uRippleGlow, 0.0, 1.0) * inContent;
    float a = max(hudA, lensMask * uAlpha * 0.08);
    a = max(a, glow * 0.7);
    outColor = vec4(hudCol * clamp(hudA + glow * 0.7, 0.0, 1.0), a);
    return;
  }

  vec3 base = mix(bent, inside, lensMask * uAlpha);
  base += uColor * pow(crest, 1.5) * uRippleGlow * 0.7;
  float hudA = hud * uAlpha;
  base = mix(base, uColor, hudA);

  float alpha = max(lensMask * uAlpha, rippleCover);
  alpha = max(alpha, clamp(pow(crest, 1.5) * uRippleGlow, 0.0, 1.0));
  alpha = max(alpha, hudA);

  outColor = vec4(pow(max(base, 0.0), vec3(1.0 / 2.2)) * alpha, alpha);
}`;

export function supportsHtmlInCanvas(): boolean {
  if (typeof document === "undefined") return false;
  const probe = document.createElement("canvas") as PaintableCanvas;
  const ctx = probe.getContext("2d") as ElementImageContext | null;
  return Boolean(
    ctx &&
    typeof ctx.drawElementImage === "function" &&
    typeof probe.requestPaint === "function",
  );
}

export function createMagnify(
  elements: MagnifyElements,
  options: MagnifyOptions = {},
): MagnifyInstance | null {
  const config = { ...DEFAULTS, ...options };
  const { source, content, output } = elements;

  const gl = output.getContext("webgl2", {
    alpha: true,
    depth: false,
    stencil: false,
    antialias: false,
    premultipliedAlpha: true,
  });
  if (!gl || gl.isContextLost()) return null;

  const sourceCtx = source.getContext("2d") as ElementImageContext | null;
  const paintable = source as PaintableCanvas;
  const htmlInCanvas = Boolean(
    sourceCtx &&
    typeof sourceCtx.drawElementImage === "function" &&
    typeof paintable.requestPaint === "function",
  );

  let contentDirty = false;
  let wake = () => {};

  if (htmlInCanvas) {
    paintable.onpaint = () => {
      try {
        sourceCtx!.reset();
        sourceCtx!.drawElementImage!(content, 0, 0);
        contentDirty = true;
        wake();
      } catch {}
    };
  }

  function compile(type: number, text: string): WebGLShader {
    const shader = gl!.createShader(type)!;
    gl!.shaderSource(shader, text);
    gl!.compileShader(shader);
    if (!gl!.getShaderParameter(shader, gl!.COMPILE_STATUS)) {
      console.error("Magnify shader error:", gl!.getShaderInfoLog(shader));
    }
    return shader;
  }

  const vertexShader = compile(gl.VERTEX_SHADER, VERT);
  const fragmentShader = compile(gl.FRAGMENT_SHADER, FRAG);
  const program = gl.createProgram()!;
  gl.attachShader(program, vertexShader);
  gl.attachShader(program, fragmentShader);
  gl.linkProgram(program);

  const uniforms: Record<string, WebGLUniformLocation> = {};
  const count = gl.getProgramParameter(program, gl.ACTIVE_UNIFORMS);
  for (let i = 0; i < count; i++) {
    const info = gl.getActiveUniform(program, i)!;
    uniforms[info.name] = gl.getUniformLocation(program, info.name)!;
  }

  const quad = gl.createBuffer();
  gl.bindBuffer(gl.ARRAY_BUFFER, quad);
  gl.bufferData(
    gl.ARRAY_BUFFER,
    new Float32Array([-1, -1, 1, -1, -1, 1, 1, 1]),
    gl.STATIC_DRAW,
  );
  gl.enableVertexAttribArray(0);
  gl.vertexAttribPointer(0, 2, gl.FLOAT, false, 0, 0);

  const contentTexture = gl.createTexture()!;
  gl.bindTexture(gl.TEXTURE_2D, contentTexture);
  gl.texParameteri(
    gl.TEXTURE_2D,
    gl.TEXTURE_MIN_FILTER,
    gl.LINEAR_MIPMAP_LINEAR,
  );
  gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.LINEAR);
  gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE);
  gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE);
  gl.texImage2D(
    gl.TEXTURE_2D,
    0,
    gl.RGBA,
    1,
    1,
    0,
    gl.RGBA,
    gl.UNSIGNED_BYTE,
    new Uint8Array([0, 0, 0, 0]),
  );
  gl.generateMipmap(gl.TEXTURE_2D);

  let contentMaxX = 1;

  const readout = document.createElement("div");
  readout.setAttribute("aria-hidden", "true");
  Object.assign(readout.style, {
    position: "absolute",
    left: "0",
    top: "0",
    pointerEvents: "none",
    whiteSpace: "pre",
    fontFamily: "ui-monospace, SFMono-Regular, Menlo, Consolas, monospace",
    fontSize: "10px",
    lineHeight: "1.8",
    letterSpacing: "0.14em",
    opacity: "0",
    zIndex: "1",
    willChange: "transform, opacity",
  } satisfies Partial<CSSStyleDeclaration>);
  (output.parentElement ?? output.ownerDocument.body).appendChild(readout);

  function accentCss(): string {
    const [r, g, b] = config.color;
    return `rgb(${Math.round(r * 255)} ${Math.round(g * 255)} ${Math.round(b * 255)})`;
  }

  function syncCanvasSize() {
    const dpr = Math.min(window.devicePixelRatio || 1, 2);
    const width = Math.max(1, Math.round(output.clientWidth * dpr));
    const height = Math.max(1, Math.round(output.clientHeight * dpr));
    if (output.width !== width || output.height !== height) {
      output.width = width;
      output.height = height;
    }
    contentMaxX = Math.min(
      1,
      Math.max(0.05, content.clientWidth / Math.max(output.clientWidth, 1)),
    );
    if (htmlInCanvas) {
      const cssWidth = Math.max(1, Math.round(source.clientWidth));
      const cssHeight = Math.max(1, Math.round(source.clientHeight));
      if (source.width !== cssWidth || source.height !== cssHeight) {
        source.width = cssWidth;
        source.height = cssHeight;
      }
      paintable.requestPaint!();
    }
  }

  syncCanvasSize();

  function uploadContent() {
    if (!htmlInCanvas || !contentDirty) return;
    contentDirty = false;
    gl!.bindTexture(gl!.TEXTURE_2D, contentTexture);
    gl!.texImage2D(
      gl!.TEXTURE_2D,
      0,
      gl!.RGBA,
      gl!.RGBA,
      gl!.UNSIGNED_BYTE,
      source,
    );
    gl!.generateMipmap(gl!.TEXTURE_2D);
  }

  let posX = output.clientWidth / 2;
  let posY = output.clientHeight / 2;
  let targetX = posX;
  let targetY = posY;
  let presence = 0;
  let presenceTarget = 0;
  let hasPointer = false;

  const ripples: { x: number; y: number; r0: number; age: number }[] = [];
  const rippleData = new Float32Array(MAX_RIPPLES * 4);

  function syncReadout(now: number) {
    const show = config.readout && config.hud > 0.01 && presence > 0.05;
    readout.style.opacity = show
      ? String(Math.min(presence, 1) * Math.min(config.hud, 1))
      : "0";
    if (!show) return;
    const R = Math.max(config.size, 8) * presence;
    const width = output.clientWidth;
    const boxW = 120;
    let rx = posX + R + 18;
    if (rx + boxW > width - 8) rx = posX - R - 18 - boxW;
    const ry = Math.min(
      Math.max(posY - 34, 8),
      Math.max(output.clientHeight - 90, 8),
    );
    readout.style.transform = `translate(${Math.round(rx)}px, ${Math.round(ry)}px)`;
    readout.style.color = accentCss();
    const blink = Math.floor(now / 600) % 2 === 0 ? "\u25CF" : "\u25CB";
    readout.textContent =
      `X ${String(Math.round(posX)).padStart(4, " ")}\n` +
      `Y ${String(Math.round(posY)).padStart(4, " ")}\n` +
      `${config.zoom.toFixed(1)}X MAG\n` +
      `R ${Math.round(config.size)}PX ${blink}`;
  }

  function render() {
    uploadContent();
    const dpr = output.width / Math.max(output.clientWidth, 1);
    gl!.bindFramebuffer(gl!.FRAMEBUFFER, null);
    gl!.viewport(0, 0, output.width, output.height);
    gl!.disable(gl!.SCISSOR_TEST);
    gl!.clearColor(0, 0, 0, 0);
    gl!.clear(gl!.COLOR_BUFFER_BIT);
    if (presence <= 0.004 && ripples.length === 0) return;

    const R = Math.max(config.size, 8) * presence;
    const alpha = Math.min(presence * 5, 1);
    const cx = posX * dpr;
    const cy = output.height - posY * dpr;

    if (ripples.length === 0) {
      const margin = (R * 0.25 + 160) * dpr;
      const sx = Math.max(0, Math.floor(cx - R * dpr - margin));
      const sy = Math.max(0, Math.floor(cy - R * dpr - margin));
      gl!.enable(gl!.SCISSOR_TEST);
      gl!.scissor(
        sx,
        sy,
        Math.min(output.width - sx, Math.ceil((R * dpr + margin) * 2)),
        Math.min(output.height - sy, Math.ceil((R * dpr + margin) * 2)),
      );
    }

    rippleData.fill(0);
    for (let i = 0; i < Math.min(ripples.length, MAX_RIPPLES); i++) {
      const ripple = ripples[i];
      const t = ripple.age / Math.max(config.rippleLife, 0.1);
      rippleData[i * 4] = ripple.x * dpr;
      rippleData[i * 4 + 1] = output.height - ripple.y * dpr;
      rippleData[i * 4 + 2] =
        (ripple.r0 + Math.max(config.rippleSpeed, 1) * ripple.age) * dpr;
      rippleData[i * 4 + 3] = Math.pow(Math.max(1 - t, 0), 2);
    }

    gl!.useProgram(program);
    gl!.activeTexture(gl!.TEXTURE0);
    gl!.bindTexture(gl!.TEXTURE_2D, contentTexture);
    gl!.uniform1i(uniforms.uContent, 0);
    gl!.uniform2f(uniforms.uResolution, output.width, output.height);
    gl!.uniform1f(uniforms.uMaxX, contentMaxX);
    gl!.uniform1f(uniforms.uHasContent, htmlInCanvas ? 1 : 0);
    gl!.uniform1f(uniforms.uDpr, dpr);
    gl!.uniform2f(uniforms.uCenter, cx, cy);
    gl!.uniform1f(uniforms.uRadius, R * dpr);
    gl!.uniform1f(uniforms.uZoom, Math.min(Math.max(config.zoom, 1), 4));
    gl!.uniform1f(uniforms.uAlpha, alpha);
    gl!.uniform3f(
      uniforms.uColor,
      config.color[0],
      config.color[1],
      config.color[2],
    );
    gl!.uniform1f(uniforms.uHud, Math.min(Math.max(config.hud, 0), 1));
    gl!.uniform1f(uniforms.uRing, config.ring ? 1 : 0);
    gl!.uniform1f(uniforms.uCross, config.crosshair ? 1 : 0);
    gl!.uniform1f(uniforms.uTicks, config.ticks ? 1 : 0);
    gl!.uniform1f(uniforms.uBrackets, config.brackets ? 1 : 0);
    gl!.uniform1f(uniforms.uDot, config.dot ? 1 : 0);
    gl!.uniform1f(uniforms.uGrid, config.grid ? 1 : 0);
    gl!.uniform1f(uniforms.uAberration, Math.max(config.aberration, 0));
    gl!.uniform1f(uniforms.uHaze, Math.min(Math.max(config.haze, 0), 1));
    gl!.uniform4fv(uniforms["uRipples[0]"], rippleData);
    gl!.uniform1f(uniforms.uRippleWidth, Math.max(config.rippleWidth, 0.5));
    gl!.uniform1f(
      uniforms.uRippleBendWidth,
      Math.max(config.rippleBendWidth, 1),
    );
    gl!.uniform1f(uniforms.uRippleBend, Math.max(config.rippleBend, 0));
    gl!.uniform1f(uniforms.uRippleGlow, Math.max(config.rippleGlow, 0));
    gl!.drawArrays(gl!.TRIANGLE_STRIP, 0, 4);
    gl!.disable(gl!.SCISSOR_TEST);
  }

  let raf = 0;
  let lastTime = performance.now();
  let destroyed = false;
  let running = false;
  let visible = true;

  const motionQuery = window.matchMedia("(prefers-reduced-motion: reduce)");
  let reducedMotion = motionQuery.matches;

  function frame(now: number) {
    if (destroyed) return;
    if (!visible) {
      running = false;
      return;
    }
    const delta = Math.min((now - lastTime) / 1000, 1 / 30);
    lastTime = now;

    const follow = Math.min(Math.max(config.follow, 0.02), 1);
    const kPos =
      reducedMotion || follow >= 1
        ? 1
        : 1 - Math.exp(-delta * (4 + follow * 26));
    const kScale = reducedMotion ? 1 : 1 - Math.exp(-delta * 11);
    posX += (targetX - posX) * kPos;
    posY += (targetY - posY) * kPos;
    presence += (presenceTarget - presence) * kScale;

    for (const ripple of ripples) ripple.age += delta;
    for (let i = ripples.length - 1; i >= 0; i--) {
      if (ripples[i].age > Math.max(config.rippleLife, 0.1)) {
        ripples.splice(i, 1);
      }
    }

    render();
    syncReadout(now);

    const settled =
      Math.abs(targetX - posX) < 0.1 &&
      Math.abs(targetY - posY) < 0.1 &&
      Math.abs(presenceTarget - presence) < 0.002;
    if (settled && !contentDirty && ripples.length === 0) {
      posX = targetX;
      posY = targetY;
      presence = presenceTarget;
      running = false;
      return;
    }
    raf = requestAnimationFrame(frame);
  }

  function start() {
    if (destroyed || running || !visible) return;
    running = true;
    lastTime = performance.now();
    raf = requestAnimationFrame(frame);
  }

  wake = start;
  start();

  function onPointerMove(event: PointerEvent) {
    const rect = output.getBoundingClientRect();
    targetX = event.clientX - rect.left;
    targetY = event.clientY - rect.top;
    if (!hasPointer) {
      posX = targetX;
      posY = targetY;
      hasPointer = true;
    }
    presenceTarget = 1;
    start();
  }

  function onPointerLeave() {
    presenceTarget = 0;
    hasPointer = false;
    start();
  }

  function onPointerDown(event: PointerEvent) {
    if (!config.ripples || event.button > 0 || reducedMotion) return;
    if (ripples.length >= MAX_RIPPLES) ripples.shift();
    ripples.push({
      x: posX,
      y: posY,
      r0: Math.max(config.size, 8) * presence,
      age: 0,
    });
    start();
  }

  content.addEventListener("pointermove", onPointerMove, { passive: true });
  content.addEventListener("pointerleave", onPointerLeave, { passive: true });
  content.addEventListener("pointerdown", onPointerDown, { passive: true });

  function onScroll() {
    start();
  }
  content.addEventListener("scroll", onScroll, { passive: true });

  function onMotionChange() {
    reducedMotion = motionQuery.matches;
    start();
  }
  motionQuery.addEventListener("change", onMotionChange);

  const observer = new ResizeObserver(() => {
    syncCanvasSize();
    start();
  });
  observer.observe(output);
  observer.observe(content);

  const intersection = new IntersectionObserver((entries) => {
    visible = entries[entries.length - 1]?.isIntersecting ?? true;
    if (visible) start();
  });
  intersection.observe(output);

  return {
    setOptions(next) {
      Object.assign(config, next);
      start();
    },
    resize() {
      syncCanvasSize();
      start();
    },
    destroy() {
      destroyed = true;
      cancelAnimationFrame(raf);
      content.removeEventListener("pointermove", onPointerMove);
      content.removeEventListener("pointerleave", onPointerLeave);
      content.removeEventListener("pointerdown", onPointerDown);
      content.removeEventListener("scroll", onScroll);
      observer.disconnect();
      intersection.disconnect();
      motionQuery.removeEventListener("change", onMotionChange);
      readout.remove();
      gl!.deleteTexture(contentTexture);
      gl!.deleteProgram(program);
      gl!.deleteShader(vertexShader);
      gl!.deleteShader(fragmentShader);
      gl!.deleteBuffer(quad);
      if (htmlInCanvas) paintable.onpaint = null;
    },
  };
}

export interface RetroDitherOptions {
  /** Radius of the dither lens around the cursor, relative to the screen height. */
  radius?: number;
  /** Edge feather of the lens as a fraction of the radius (0 to 1). */
  softness?: number;
  /** Size of the retro pixels in CSS pixels. */
  pixelSize?: number;
  /** Number of brightness levels the dither quantizes to. */
  levels?: number;
  /** Dark end of the palette as [r, g, b] in 0-1 range. */
  darkColor?: [number, number, number];
  /** Light end of the palette as [r, g, b] in 0-1 range. */
  lightColor?: [number, number, number];
  /** Blend from the content's own colors (0) to the palette (1). */
  colorize?: number;
  /** Contrast applied to brightness before dithering. */
  contrast?: number;
  /** Brightness offset applied before dithering (-1 to 1). */
  brightness?: number;
  /** Coverage of the dithered pixels inside the lens (0 to 1). */
  strength?: number;
  /** Dither coverage across the whole screen, outside the lens (0 to 1). */
  baseStrength?: number;
  /** Invert brightness inside the effect (0 to 1). */
  invert?: number;
  /** Intensity of the retro scanline overlay (0 to 1). */
  scanlines?: number;
  /** How quickly the lens follows the cursor. Higher is snappier. */
  followSpeed?: number;
}

export interface RetroDitherElements {
  /** Canvas with layoutsubtree that hosts the HTML content. */
  source: HTMLCanvasElement;
  /** The element inside the source canvas that gets captured. */
  content: HTMLElement;
  /** Canvas the WebGL effect renders to. */
  output: HTMLCanvasElement;
}

export interface RetroDitherInstance {
  /** Update effect options live. */
  setOptions: (options: RetroDitherOptions) => void;
  /** Re-read canvas size. Call when the element is resized. */
  resize: () => void;
  /** Stop the loop and release all GPU resources. */
  destroy: () => void;
}

const DEFAULTS: Required<RetroDitherOptions> = {
  radius: 0.5,
  softness: 1,
  pixelSize: 2,
  levels: 4,
  darkColor: [0, 0, 0],
  lightColor: [1, 1, 1],
  colorize: 0.1,
  contrast: 0.6,
  brightness: 0,
  strength: 0.75,
  baseStrength: 0,
  invert: 0,
  scanlines: 0,
  followSpeed: 3,
};

type PaintableCanvas = HTMLCanvasElement & {
  onpaint?: (() => void) | null;
  requestPaint?: () => void;
};

type ElementImageContext = CanvasRenderingContext2D & {
  drawElementImage?: (element: Element, x: number, y: number) => void;
};

const VERT = `#version 300 es
precision highp float;
layout(location = 0) in vec2 aPos;
out vec2 vUv;
void main () {
  vUv = aPos * 0.5 + 0.5;
  gl_Position = vec4(aPos, 0.0, 1.0);
}`;

const FRAG = `#version 300 es
precision highp float;
in vec2 vUv;
out vec4 outColor;
uniform sampler2D uContent;
uniform vec2 uResolution;
uniform float uPixelSize;
uniform float uLevels;
uniform float uRadius;
uniform float uSoftness;
uniform vec2 uPointer;
uniform float uActive;
uniform vec3 uDark;
uniform vec3 uLight;
uniform float uColorize;
uniform float uContrast;
uniform float uBrightness;
uniform float uStrength;
uniform float uBase;
uniform float uInvert;
uniform float uScanlines;
uniform float uMaxX;

#define S(a, b, t) smoothstep(a, b, t)

float ditherQuant (float v, ivec2 cell) {
  float x = v * uLevels;
  int level = int(floor(fract(x) * 4.0));
  float add = 0.0;
  if (level == 1) {
    if (cell.x % 4 == (2 * cell.y) % 4) add = 1.0;
  } else if (level == 2) {
    if (cell.x % 2 != cell.y % 2) add = 1.0;
  } else if (level == 3) {
    if (cell.x % 4 != (2 * cell.y) % 4) add = 1.0;
  }
  return floor(x + add) / uLevels;
}

float bayer (ivec2 p) {
  int b[16] = int[16](0, 8, 2, 10, 12, 4, 14, 6, 3, 11, 1, 9, 15, 7, 13, 5);
  return (float(b[(p.y % 4) * 4 + (p.x % 4)]) + 0.5) / 16.0;
}

void main () {
  vec2 uv = vUv;

  if (uv.x > uMaxX) {
    outColor = vec4(0.0);
    return;
  }

  vec4 content = texture(uContent, vec2(uv.x, 1.0 - uv.y));

  vec2 frag = uv * uResolution;
  vec2 cell = floor(frag / uPixelSize);
  vec2 cellUv = (cell + 0.5) * uPixelSize / uResolution;
  cellUv = clamp(cellUv, vec2(0.001), vec2(uMaxX - 0.002, 0.999));
  vec4 pixel = texture(uContent, vec2(cellUv.x, 1.0 - cellUv.y));

  float lum = dot(pixel.rgb, vec3(0.299, 0.587, 0.114));
  lum = clamp((lum - 0.5) * uContrast + 0.5 + uBrightness, 0.0, 1.0);
  lum = mix(lum, 1.0 - lum, clamp(uInvert, 0.0, 1.0));
  float q = ditherQuant(lum, ivec2(cell));

  vec3 palette = mix(uDark, uLight, q);
  vec3 keepHue = pixel.rgb * (q / max(lum, 0.001));
  vec3 dithered = mix(keepHue, palette, clamp(uColorize, 0.0, 1.0));
  dithered *= 1.0 - uScanlines * 0.45 * mod(cell.y, 2.0);

  float aspect = uResolution.x / uResolution.y;
  float dist = length((uv - uPointer) * vec2(aspect, 1.0));
  float radius = max(uRadius * uActive, 1e-4);
  float inner = radius * (1.0 - clamp(uSoftness, 0.0, 1.0));
  float lens = (1.0 - S(inner, radius, dist)) * uActive;
  float mask = clamp(max(lens, clamp(uBase, 0.0, 1.0)), 0.0, 1.0)
    * clamp(uStrength, 0.0, 1.0);

  float apply = step(bayer(ivec2(cell)), mask);

  vec3 col = mix(content.rgb, dithered, apply);
  float alpha = mix(content.a, pixel.a, apply);
  outColor = vec4(col, alpha);
}`;

export function supportsHtmlInCanvas(): boolean {
  if (typeof document === "undefined") return false;
  const probe = document.createElement("canvas") as PaintableCanvas;
  const ctx = probe.getContext("2d") as ElementImageContext | null;
  return Boolean(
    ctx &&
    typeof ctx.drawElementImage === "function" &&
    typeof probe.requestPaint === "function",
  );
}

export function createRetroDither(
  elements: RetroDitherElements,
  options: RetroDitherOptions = {},
): RetroDitherInstance | null {
  const config = { ...DEFAULTS, ...options };
  const { source, content, output } = elements;

  const gl = output.getContext("webgl2", {
    alpha: true,
    depth: false,
    stencil: false,
    antialias: false,
    premultipliedAlpha: false,
  });
  if (!gl || gl.isContextLost()) return null;

  const sourceCtx = source.getContext("2d") as ElementImageContext | null;
  const paintable = source as PaintableCanvas;
  const htmlInCanvas = Boolean(
    sourceCtx &&
    typeof sourceCtx.drawElementImage === "function" &&
    typeof paintable.requestPaint === "function",
  );

  let contentDirty = false;
  let wake = () => {};

  if (htmlInCanvas) {
    paintable.onpaint = () => {
      try {
        sourceCtx!.reset();
        sourceCtx!.drawElementImage!(content, 0, 0);
        contentDirty = true;
        wake();
      } catch {}
    };
  }

  function compile(type: number, text: string): WebGLShader {
    const shader = gl!.createShader(type)!;
    gl!.shaderSource(shader, text);
    gl!.compileShader(shader);
    if (!gl!.getShaderParameter(shader, gl!.COMPILE_STATUS)) {
      console.error("RetroDither shader error:", gl!.getShaderInfoLog(shader));
    }
    return shader;
  }

  const vertexShader = compile(gl.VERTEX_SHADER, VERT);
  const fragmentShader = compile(gl.FRAGMENT_SHADER, FRAG);
  const program = gl.createProgram()!;
  gl.attachShader(program, vertexShader);
  gl.attachShader(program, fragmentShader);
  gl.linkProgram(program);

  const uniforms: Record<string, WebGLUniformLocation> = {};
  const count = gl.getProgramParameter(program, gl.ACTIVE_UNIFORMS);
  for (let i = 0; i < count; i++) {
    const info = gl.getActiveUniform(program, i)!;
    uniforms[info.name] = gl.getUniformLocation(program, info.name)!;
  }

  const quad = gl.createBuffer();
  gl.bindBuffer(gl.ARRAY_BUFFER, quad);
  gl.bufferData(
    gl.ARRAY_BUFFER,
    new Float32Array([-1, -1, 1, -1, -1, 1, 1, 1]),
    gl.STATIC_DRAW,
  );
  gl.enableVertexAttribArray(0);
  gl.vertexAttribPointer(0, 2, gl.FLOAT, false, 0, 0);

  const contentTexture = gl.createTexture()!;
  gl.bindTexture(gl.TEXTURE_2D, contentTexture);
  gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR);
  gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.LINEAR);
  gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE);
  gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE);
  gl.texImage2D(
    gl.TEXTURE_2D,
    0,
    gl.RGBA,
    1,
    1,
    0,
    gl.RGBA,
    gl.UNSIGNED_BYTE,
    new Uint8Array([0, 0, 0, 0]),
  );

  let contentMaxX = 1;

  function syncCanvasSize() {
    const dpr = Math.min(window.devicePixelRatio || 1, 2);
    const width = Math.max(1, Math.round(output.clientWidth * dpr));
    const height = Math.max(1, Math.round(output.clientHeight * dpr));
    if (output.width !== width || output.height !== height) {
      output.width = width;
      output.height = height;
    }
    contentMaxX = Math.min(
      1,
      Math.max(0.05, content.clientWidth / Math.max(output.clientWidth, 1)),
    );
    if (htmlInCanvas) {
      const cssWidth = Math.max(1, Math.round(source.clientWidth));
      const cssHeight = Math.max(1, Math.round(source.clientHeight));
      if (source.width !== cssWidth || source.height !== cssHeight) {
        source.width = cssWidth;
        source.height = cssHeight;
      }
      paintable.requestPaint!();
    }
  }

  syncCanvasSize();

  const pointer = { x: 0.5, y: 0.5, tx: 0.5, ty: 0.5, active: 0, target: 0 };

  function uploadContent() {
    if (!htmlInCanvas || !contentDirty) return;
    contentDirty = false;
    gl!.bindTexture(gl!.TEXTURE_2D, contentTexture);
    gl!.texImage2D(
      gl!.TEXTURE_2D,
      0,
      gl!.RGBA,
      gl!.RGBA,
      gl!.UNSIGNED_BYTE,
      source,
    );
  }

  function render() {
    uploadContent();
    gl!.useProgram(program);
    gl!.activeTexture(gl!.TEXTURE0);
    gl!.bindTexture(gl!.TEXTURE_2D, contentTexture);
    gl!.uniform1i(uniforms.uContent, 0);
    gl!.uniform2f(uniforms.uResolution, output.width, output.height);
    const dpr = output.width / Math.max(output.clientWidth, 1);
    gl!.uniform1f(uniforms.uPixelSize, Math.max(config.pixelSize, 1) * dpr);
    gl!.uniform1f(uniforms.uLevels, Math.max(config.levels, 1));
    gl!.uniform1f(uniforms.uRadius, Math.max(config.radius, 0.01));
    gl!.uniform1f(uniforms.uSoftness, config.softness);
    gl!.uniform2f(uniforms.uPointer, pointer.x, pointer.y);
    gl!.uniform1f(uniforms.uActive, pointer.active);
    gl!.uniform3f(
      uniforms.uDark,
      config.darkColor[0],
      config.darkColor[1],
      config.darkColor[2],
    );
    gl!.uniform3f(
      uniforms.uLight,
      config.lightColor[0],
      config.lightColor[1],
      config.lightColor[2],
    );
    gl!.uniform1f(uniforms.uColorize, config.colorize);
    gl!.uniform1f(uniforms.uContrast, Math.max(config.contrast, 0));
    gl!.uniform1f(uniforms.uBrightness, config.brightness);
    gl!.uniform1f(uniforms.uStrength, config.strength);
    gl!.uniform1f(uniforms.uBase, config.baseStrength);
    gl!.uniform1f(uniforms.uInvert, config.invert);
    gl!.uniform1f(uniforms.uScanlines, config.scanlines);
    gl!.uniform1f(uniforms.uMaxX, contentMaxX);
    gl!.bindFramebuffer(gl!.FRAMEBUFFER, null);
    gl!.viewport(0, 0, output.width, output.height);
    gl!.drawArrays(gl!.TRIANGLE_STRIP, 0, 4);
  }

  let raf = 0;
  let lastTime = performance.now();
  let destroyed = false;
  let running = false;
  let visible = true;

  const motionQuery = window.matchMedia("(prefers-reduced-motion: reduce)");
  let reducedMotion = motionQuery.matches;

  function frame(now: number) {
    if (destroyed) return;
    if (!visible) {
      running = false;
      return;
    }
    const delta = Math.min((now - lastTime) / 1000, 1 / 30);
    lastTime = now;
    const ease = reducedMotion
      ? 1
      : 1 - Math.exp(-delta * Math.max(config.followSpeed, 0.5));
    pointer.x += (pointer.tx - pointer.x) * ease;
    pointer.y += (pointer.ty - pointer.y) * ease;
    pointer.active += (pointer.target - pointer.active) * ease;
    render();
    const settled =
      Math.abs(pointer.tx - pointer.x) < 5e-4 &&
      Math.abs(pointer.ty - pointer.y) < 5e-4 &&
      Math.abs(pointer.target - pointer.active) < 1e-3;
    if (settled && !contentDirty) {
      pointer.x = pointer.tx;
      pointer.y = pointer.ty;
      pointer.active = pointer.target;
      running = false;
      return;
    }
    raf = requestAnimationFrame(frame);
  }

  function start() {
    if (destroyed || running || !visible) return;
    running = true;
    lastTime = performance.now();
    raf = requestAnimationFrame(frame);
  }

  wake = start;
  start();

  function onMotionChange() {
    reducedMotion = motionQuery.matches;
    start();
  }
  motionQuery.addEventListener("change", onMotionChange);

  const observer = new ResizeObserver(() => {
    syncCanvasSize();
    start();
  });
  observer.observe(output);
  observer.observe(content);

  const intersection = new IntersectionObserver((entries) => {
    visible = entries[entries.length - 1]?.isIntersecting ?? true;
    if (visible) start();
  });
  intersection.observe(output);

  const listenTarget = output.parentElement ?? output;

  function onPointerMove(event: PointerEvent) {
    const rect = output.getBoundingClientRect();
    pointer.tx = (event.clientX - rect.left) / Math.max(rect.width, 1);
    pointer.ty = 1 - (event.clientY - rect.top) / Math.max(rect.height, 1);
    pointer.target = 1;
    start();
  }

  function onPointerLeave() {
    pointer.target = 0;
    start();
  }

  listenTarget.addEventListener("pointermove", onPointerMove);
  listenTarget.addEventListener("pointerleave", onPointerLeave);

  return {
    setOptions(next) {
      Object.assign(config, next);
      start();
    },
    resize() {
      syncCanvasSize();
      start();
    },
    destroy() {
      destroyed = true;
      cancelAnimationFrame(raf);
      observer.disconnect();
      intersection.disconnect();
      motionQuery.removeEventListener("change", onMotionChange);
      listenTarget.removeEventListener("pointermove", onPointerMove);
      listenTarget.removeEventListener("pointerleave", onPointerLeave);
      gl!.deleteTexture(contentTexture);
      gl!.deleteProgram(program);
      gl!.deleteShader(vertexShader);
      gl!.deleteShader(fragmentShader);
      gl!.deleteBuffer(quad);
      if (htmlInCanvas) paintable.onpaint = null;
    },
  };
}

<!-- The Art of Color Depth — markup for the ten button materials + three shapes.
     Load color-depth.css, then use `depth-btn` plus one material class. The markup
     is identical for every material; only the second class changes.

     Pure CSS gets you every static look. Two things want the small companion
     script (color-depth.js): the cursor-reactive materials (Metal, Foil) and the
     toggle's slide. Glass also needs the SVG filter at the bottom, once. -->

<link rel="stylesheet" href="color-depth.css" />

<!-- the ten materials, on the default label pill -->
<button class="depth-btn depth-glossy"><span class="depth-label">Get Started</span></button>
<button class="depth-btn depth-glow"><span class="depth-label">Get Started</span></button>
<button class="depth-btn depth-metal"><span class="depth-label">Get Started</span></button>
<button class="depth-btn depth-layered"><span class="depth-label">Get Started</span></button>
<button class="depth-btn depth-inset"><span class="depth-label">Get Started</span></button>
<button class="depth-btn depth-glass"><span class="depth-label">Get Started</span></button>
<button class="depth-btn depth-neon"><span class="depth-label">Get Started</span></button>
<button class="depth-btn depth-duotone"><span class="depth-label">Get Started</span></button>
<button class="depth-btn depth-satin"><span class="depth-label">Get Started</span></button>

<!-- Foil needs its five stacked layers around the label. Without the script it
     is still a handsome static holographic silver; with it, it tracks the cursor. -->
<button class="depth-btn depth-foil">
  <span aria-hidden class="depth-foil-l depth-foil-base"></span>
  <span aria-hidden class="depth-foil-l depth-foil-film"></span>
  <span aria-hidden class="depth-foil-l depth-foil-pearl"></span>
  <span class="depth-label">Get Started</span>
  <span aria-hidden class="depth-foil-l depth-foil-shine"></span>
  <span aria-hidden class="depth-foil-l depth-foil-glare"></span>
</button>

<!-- other shapes, same material class. Icon button (a square) -->
<button class="depth-btn depth-icon depth-glossy" aria-label="Go">
  <span class="depth-label">
    <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"><path d="M5 12h14"/><path d="m13 6 6 6-6 6"/></svg>
  </span>
</button>

<!-- Toggle switch: material on the track, a sliding knob on top. The script flips
     data-on on click; start it on or off with the attribute. -->
<button class="depth-btn depth-toggle depth-glossy" role="switch" data-on="true" aria-label="Toggle">
  <span aria-hidden class="depth-knob"></span>
</button>

<!-- Glass refraction filter. Keep it once in the page (it can be visually
     hidden). The .depth-glass rule points at it via backdrop-filter: url(#…). -->
<svg width="0" height="0" style="position:absolute" aria-hidden="true">
  <defs>
    <filter id="liquid-glass-filter" color-interpolation-filters="sRGB">
      <!-- map: neutral-grey centre (no shift) ramping to colour only at the rim,
           so glass bends the view at its edges and passes the centre through. -->
      <feImage x="0" y="0" width="100%" height="100%"
        href="data:image/svg+xml,%3Csvg%20viewBox%3D%270%200%20200%2080%27%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%3E%3Cdefs%3E%3ClinearGradient%20id%3D%27r%27%20x2%3D%27100%25%27%3E%3Cstop%20stop-color%3D%27%23f00%27%2F%3E%3Cstop%20offset%3D%2750%25%27%20stop-color%3D%27%23808080%27%2F%3E%3Cstop%20offset%3D%27100%25%27%20stop-color%3D%27%230f0%27%2F%3E%3C%2FlinearGradient%3E%3ClinearGradient%20id%3D%27b%27%20y2%3D%27100%25%27%3E%3Cstop%20stop-color%3D%27%2300f%27%2F%3E%3Cstop%20offset%3D%2750%25%27%20stop-color%3D%27%23808080%27%2F%3E%3Cstop%20offset%3D%27100%25%27%20stop-color%3D%27%23ff0%27%2F%3E%3C%2FlinearGradient%3E%3C%2Fdefs%3E%3Crect%20width%3D%27200%27%20height%3D%2780%27%20rx%3D%2740%27%20fill%3D%27url%28%23r%29%27%2F%3E%3Crect%20width%3D%27200%27%20height%3D%2780%27%20rx%3D%2740%27%20fill%3D%27url%28%23b%29%27%20style%3D%27mix-blend-mode%3Aoverlay%27%2F%3E%3Crect%20x%3D%2714%27%20y%3D%2714%27%20width%3D%27172%27%20height%3D%2752%27%20rx%3D%2726%27%20fill%3D%27%23808080%27%20style%3D%27filter%3Ablur%2814px%29%27%2F%3E%3C%2Fsvg%3E"
        result="map" />
      <feDisplacementMap in="SourceGraphic" in2="map" scale="-14" xChannelSelector="R" yChannelSelector="G" result="dispRed" />
      <feColorMatrix in="dispRed" type="matrix" values="1 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 1 0" result="red" />
      <feDisplacementMap in="SourceGraphic" in2="map" scale="-13" xChannelSelector="R" yChannelSelector="G" result="dispGreen" />
      <feColorMatrix in="dispGreen" type="matrix" values="0 0 0 0 0  0 1 0 0 0  0 0 0 0 0  0 0 0 1 0" result="green" />
      <feDisplacementMap in="SourceGraphic" in2="map" scale="-12" xChannelSelector="R" yChannelSelector="G" result="dispBlue" />
      <feColorMatrix in="dispBlue" type="matrix" values="0 0 0 0 0  0 0 0 0 0  0 0 1 0 0  0 0 0 1 0" result="blue" />
      <feBlend in="red" in2="green" mode="screen" result="rg" />
      <feBlend in="rg" in2="blue" mode="screen" result="output" />
      <feGaussianBlur in="output" stdDeviation="0.4" />
    </filter>
  </defs>
</svg>

<!-- optional: cursor-reactive materials + the toggle slide. Static without it. -->
<script src="color-depth.js"></script>

// Optional behaviour for the color-depth buttons. Pure CSS gets you every static
// look; this adds the two interactive bits:
//   1. the cursor-reactive materials (Metal's glint, Foil's sheen) follow the
//      pointer — it writes --pointer-x/y, --glare-x/y and --shine-angle on the
//      element; the smoothing lives in the CSS transitions, not here.
//   2. the toggle switch flips its `data-on` on click so the knob slides.
//
// Drop it in and call `initColorDepth()` once (or let it auto-run on load). It is
// framework-free and safe to run again after adding more buttons.

function initColorDepth(root = document) {
  const reduce = matchMedia("(prefers-reduced-motion: reduce)").matches;

  // cursor-reactive materials
  if (!reduce) {
    root.querySelectorAll(".depth-metal, .depth-foil").forEach((el) => {
      if (el.dataset.depthBound) return;
      el.dataset.depthBound = "1";
      let raf = 0;
      let px = 0.5;
      let py = 0.5;
      const write = () => {
        raf = 0;
        const s = el.style;
        s.setProperty("--pointer-x", (px * 100).toFixed(1) + "%");
        s.setProperty("--pointer-y", (py * 100).toFixed(1) + "%");
        s.setProperty("--glare-x", (px * 100).toFixed(1) + "%");
        s.setProperty("--glare-y", (py * 100).toFixed(1) + "%");
        s.setProperty("--shine-angle", (110 + (px - 0.5) * 50).toFixed(1) + "deg");
      };
      const schedule = () => {
        if (!raf) raf = requestAnimationFrame(write);
      };
      el.addEventListener(
        "pointermove",
        (e) => {
          const r = el.getBoundingClientRect();
          if (r.width && r.height) {
            px = Math.min(1, Math.max(0, (e.clientX - r.left) / r.width));
            py = Math.min(1, Math.max(0, (e.clientY - r.top) / r.height));
          }
          schedule();
        },
        { passive: true },
      );
      el.addEventListener("pointerleave", () => {
        px = 0.5;
        py = 0.5;
        schedule();
      });
    });
  }

  // toggle switches: flip data-on on click (the CSS slides the knob)
  root.querySelectorAll(".depth-toggle").forEach((el) => {
    if (el.dataset.depthToggleBound) return;
    el.dataset.depthToggleBound = "1";
    if (!el.hasAttribute("data-on")) el.setAttribute("data-on", "true");
    el.addEventListener("click", () => {
      el.setAttribute("data-on", el.getAttribute("data-on") === "true" ? "false" : "true");
    });
  });
}

if (typeof document !== "undefined") {
  if (document.readyState === "loading") {
    document.addEventListener("DOMContentLoaded", () => initColorDepth());
  } else {
    initColorDepth();
  }
}

---
name: skeuomorphic-button-depth
description: >-
  Give any button, control, or surface real physical depth in CSS — glossy,
  metal, glass, matte, neon, recessed, and more — in any colour or mode, not just
  dark. Use whenever a button/pill/icon/toggle/card should read as a tactile
  object instead of a flat rectangle. Teaches the layering method (so you can
  build any material on any shape) plus ten ready techniques.
---

# Skeuomorphic button depth

Depth is never one drop shadow. It is many faint layers stacked on the same
element, each faking one part of how light meets a real surface: the body, the
bevel, the inner glow, the reflection. Learn the layers and you can dress any
button in any material — this works in light, dark, or full-colour palettes; the
colours are variables, the method is fixed.

## The one rule everything obeys

Pick a single light direction and commit every layer to it. By default the light
is from the **top**: bright edge on top, dark edge on the bottom, on every
element in the group. The moment two controls disagree about where the light is,
the illusion breaks. Flip the direction only on purpose (a pressed or recessed
control, below).

The surface also has to sit apart from what's behind it — a raised button needs a
background a step darker or lighter than itself, or its lift shadow has nothing to
lift off.

## The layer recipe

Build any material from the same four layers, outermost first:

1. **Body** — usually a top-to-bottom gradient, lighter at the top so the face
   reads as lit from above. `background: linear-gradient(180deg, <light>, <dark>)`.
   A flat fill is fine for matte materials; the doming then comes from step 2.

2. **Inset shadows** — the bevel and inner light, all `box-shadow` with `inset`:
   - a bright inset at the **top** = the lit bevel edge,
   - a dark inset at the **bottom** = weight and thickness,
   - broad soft inner glows = a domed, internally-lit face,
   - a hairline `inset 0 0 0 1px` = a crisp rim that catches light.

3. **Hover layer (`::before`)** — a second, brighter version of the body/insets
   that fades in on hover: "the light turning on." Keep the label above it with
   `isolation: isolate` (or a `z-index` on the text).

4. **Specular (`::after`)** — a soft bright bar or blob near the top edge
   (`linear-gradient` white → transparent, a touch of `blur`, low opacity): the
   reflection on glossy plastic or glass. Move or brighten it on hover for life.

Not every material uses all four — matte uses 1–2, neon leans on the rim, glass
adds real `backdrop-filter`. Add only the layers the material needs.

## Raised vs recessed

Two opposite reads, same toolkit, mirrored:

- **Raised** (sits on the page): bright inset on top, dark inset on the bottom,
  and an outer drop shadow to lift it off the background.
- **Recessed** (carved into the page): flip it — a dark inset on top (the near
  wall in shadow), a bright inset on the bottom (the far wall catching light),
  and **no** outer shadow. Make the fill close to the page colour so it looks
  like the same surface pushed inward, not a separate dark chip.

On press, a raised control should briefly become recessed (swap the outer lift
for inner shadows, ~50ms), so it visibly pushes in.

## Build order (for compound controls)

For anything with parts — a toggle, a segmented control, a stepper — layer from
the outside in, and don't skip a level:

1. the surface behind it (a step darker/lighter than the control),
2. the raised shell / track (the material lives here),
3. any recessed zones inside it (a track well, an active-segment notch),
4. the raised moving parts (a knob, a thumb) — same material as the shell unless
   you want deliberate contrast,
5. the readout on top (label, value, icon).

Put the material on the **container**, not each cell, so a compound control reads
as one carved piece.

## Rules

1. **One element, many layers.** Use `::before`/`::after` for the glow and sheen,
   not extra DOM. `isolation: isolate` keeps the label on top.
2. **Commit to the light direction** (see above). No element disagrees.
3. **Tint the layers toward the material**, don't just add black/white — cyan
   inside a blue glass, warm white inside a warm gel.
4. **Press = invert.** `:active` swaps lift for inner shadow (or collapses the
   sheen). Short transition (~50ms).
5. **Motion is subtle.** The material sells the depth; a hover doesn't need a big
   lift or scale. A moving highlight beats a moving button.
6. **Respect reduced motion.** Guard transforms/animations with
   `@media (prefers-reduced-motion: reduce)`.
7. **Stay compact.** Real controls are dense: tight padding, ~13–15px labels,
   restrained icons. Reach for smaller spacing before bigger type.

## Anti-patterns

- A flat block with a single soft shadow and no inset layers.
- Light coming from different directions on neighbouring controls.
- Glow so bright it erases the form underneath.
- A "recessed" control whose shadows are oriented like a raised one (it pops out).
- A raised control on a background lighter/brighter than itself (nothing to lift
  from).
- One shared inset behind several buttons when each wants its own well.

## Any shape, any palette

The same `depth-btn` base + one material class works on more than a text pill.
This entry ships the label pill, a square **icon** button (`.depth-icon`), and a
**toggle** switch (the material on the track, a sliding knob on top) — and the
method extends to steppers, cards, inputs, or any control you need. Colour is a
value you swap: retint the gradient stops and inset colours and the same material
becomes a new theme.

## Types

Ten techniques, named by method (colour is just a value you swap). Same markup,
one class swap:

- **Glossy** (`depth-glossy`) — a specular highlight bar over a gradient body.
- **Glow** (`depth-glow`) — a solid body lit from inside; hover turns it up.
- **Metal** (`depth-metal`) — a brushed bevel with a glint that follows the cursor.
- **Foil** (`depth-foil`) — iridescent holographic metal; five stacked light layers
  that shift and glare under the cursor (needs its child layers + a tiny pointer
  driver for --pointer-x/y, --glare-x/y, --shine-angle).
- **Layered** (`depth-layered`) — soft translucent overlays over any fill.
- **Inset** (`depth-inset`) — recessed into the surface; the bevel is flipped.
- **Glass** (`depth-glass`) — subtle refraction through an SVG displacement filter.
- **Neon** (`depth-neon`) — a crisp lit outline; a clean ring, not a bloom.
- **Duotone** (`depth-duotone`) — a hard-bevel extruded key from stacked shadows.
- **Satin** (`depth-satin`) — a soft smooth pastel; diffuse light, no gloss or grain.

## Drop-in CSS

A complete `color-depth.css` implementing all ten is the companion to this skill.
Markup is always the same; only the second class changes:

float sdCircle(vec2 p, float r) { return length(p) - r; }

float superellipseCornerSDF(vec2 p, float r, float n) {
  p = abs(p);
  float v = pow(pow(p.x, n) + pow(p.y, n), 1.0 / n);
  return v - r;
}

float roundedRectSDF(vec2 p, vec2 center, float width, float height, float cornerRadius, float n) {
  p -= center;
  float cr = cornerRadius * u_dpr;
  vec2 d = abs(p) - vec2(width * u_dpr, height * u_dpr) * 0.5;
  float dist;
  if (d.x > -cr && d.y > -cr) {
    vec2 cornerCenter = sign(p) * (vec2(width * u_dpr, height * u_dpr) * 0.5 - vec2(cr));
    dist = superellipseCornerSDF(p - cornerCenter, cr, n);
  } else {
    dist = min(max(d.x, d.y), 0.0) + length(max(d, 0.0));
  }
  return dist;
}

float smin(float a, float b, float k) {
  float h = clamp(0.5 + 0.5 * (b - a) / k, 0.0, 1.0);
  return mix(b, a, h) - k * h * (1.0 - h);
}

float mainSDF(vec2 p1, vec2 p2, vec2 p) {
  vec2 p1n = p1 + p / u_resolution.y;
  vec2 p2n = p2 + p / u_resolution.y;
  float d1 = u_showShape1 == 1 ? sdCircle(p1n, 100.0 * u_dpr / u_resolution.y) : 1.0;
  float d2 = roundedRectSDF(p2n, vec2(0.0),
    u_shapeWidth / u_resolution.y, u_shapeHeight / u_resolution.y,
    u_shapeRadius / u_resolution.y, u_shapeRoundness);
  return smin(d1, d2, u_mergeRate);
}

// asin with domain-clamped input; plain asin is undefined for |x|>1 and would
// corrupt the refraction edge just outside the shape where x_R_ratio > 1.
float safeAsin(float x) { return asin(clamp(x, -1.0, 1.0)); }

#version 300 es
precision highp float;
#define MAX_BLUR_RADIUS (200)
in vec2 v_uv;
uniform sampler2D u_prevPassTexture;
uniform vec2 u_resolution;
uniform int u_blurRadius;
uniform float u_blurWeights[MAX_BLUR_RADIUS + 1];
out vec4 fragColor;
void main() {
  vec2 texelSize = 1.0 / u_resolution;
  vec4 color = texture(u_prevPassTexture, v_uv) * u_blurWeights[0];
  for (int i = 1; i <= u_blurRadius; ++i) {
    float w = u_blurWeights[i];
    vec2 offset = vec2(float(i)) * texelSize;
    color += texture(u_prevPassTexture, v_uv + vec2(0.0, offset.y)) * w; // vblur; hblur uses .x
    color += texture(u_prevPassTexture, v_uv - vec2(0.0, offset.y)) * w;
  }
  fragColor = color;
}

// per frame:
u_resolution:        [w * dpr, h * dpr],
u_dpr:               dpr,
u_mouseSpring:       [spring.x, spring.y],           // device px, gl_FragCoord space
u_shapeRadius:       (Math.min(w, h) / 2 * shapeRadius) / 100,
u_shapeRoundness:    shapeRoundness,
u_mergeRate:         mergeRate,
u_glareAngle:        glareAngle * Math.PI / 180,
// mainPass:
u_refThickness:      refThickness,        // raw
u_refFactor:         refFactor,           // raw
u_refDispersion:     refDispersion,       // raw
u_refFresnelRange:   refFresnelRange,     // raw
u_refFresnelHardness: refFresnelHardness / 100,
u_refFresnelFactor:  refFresnelFactor  / 100,
u_glareRange:        glareRange,          // raw
u_glareHardness:     glareHardness     / 100,
u_glareConvergence:  glareConvergence  / 100,
u_glareOppositeFactor: glareOppositeFactor / 100,
u_glareFactor:       glareFactor       / 100,
u_tint:              [r/255, g/255, b/255, a],

// Parse an SVG path `d` string into our editable anchor model, and serialize it
// back. We support the common subset: M/L/H/V/C/S/Q/T/Z (absolute + relative).
// Arcs (A) are not control-point editable, so a path using them is rejected by
// the playground with a friendly message. Everything is normalized to cubic
// beziers internally so the editor only ever deals with anchors + two handles.
//
// Multi-subpath: every `M` opens a new subpath. Anchors stay in one flat array;
// `starts` marks each subpath's first index and `closed` is its per-subpath Z.

import type { Anchor, Vec, VectorPath } from "./types";
import { v, subRange } from "./types";

// Tokenize a `d` string into [command, ...numbers] groups.
function tokenize(d: string): { cmd: string; args: number[] }[] {
  const out: { cmd: string; args: number[] }[] = [];
  const re = /([MmLlHhVvCcSsQqTtAaZz])|(-?\d*\.?\d+(?:e[-+]?\d+)?)/gi;
  let m: RegExpExecArray | null;
  let cur: { cmd: string; args: number[] } | null = null;
  while ((m = re.exec(d))) {
    if (m[1]) {
      cur = { cmd: m[1], args: [] };
      out.push(cur);
    } else if (cur) {
      cur.args.push(parseFloat(m[2]));
    }
  }
  return out;
}

/** Parse a path into the flat multi-subpath model. Throws on unsupported (arc) commands. */
export function parsePath(d: string): VectorPath {
  const tokens = tokenize(d);
  const anchors: Anchor[] = [];
  const starts: number[] = [];
  const closed: boolean[] = [];

  let cur: Vec = v(0, 0);
  let start: Vec = v(0, 0); // current subpath's start point (for Z)
  let prevCtrl: Vec | null = null;
  let prevCmd = "";

  const push = (p: Vec) => anchors.push({ p, out: null, in: null });
  const last = () => anchors[anchors.length - 1];

  // Drop the duplicate trailing anchor a closed subpath often repeats, folding
  // its `in` handle onto the subpath's first anchor (matches old single-ring code).
  const dedupClose = () => {
    if (!starts.length) return;
    const si = starts[starts.length - 1];
    if (anchors.length - si > 1) {
      const a = anchors[si].p;
      const z = anchors[anchors.length - 1].p;
      if (Math.abs(a.x - z.x) < 0.01 && Math.abs(a.y - z.y) < 0.01) {
        anchors[si].in = anchors[anchors.length - 1].in;
        anchors.pop();
      }
    }
  };

  for (const { cmd, args } of tokens) {
    const rel = cmd === cmd.toLowerCase();
    const C = cmd.toUpperCase();
    let i = 0;
    const num = () => args[i++];
    const pt = (): Vec => {
      const x = num();
      const y = num();
      return rel ? { x: cur.x + x, y: cur.y + y } : { x, y };
    };

    switch (C) {
      case "M": {
        // A new M opens a NEW subpath. Finalize the previous one (dedup if it was
        // closed by a Z) before starting fresh.
        if (starts.length && closed[closed.length - 1]) dedupClose();
        cur = pt();
        start = cur;
        starts.push(anchors.length);
        closed.push(false);
        push(cur);
        // extra coordinate pairs after M are implicit L
        while (i < args.length) {
          cur = pt();
          push(cur);
        }
        prevCtrl = null;
        break;
      }
      case "L": {
        while (i < args.length) { cur = pt(); push(cur); }
        prevCtrl = null;
        break;
      }
      case "H": {
        while (i < args.length) {
          const x = num();
          cur = { x: rel ? cur.x + x : x, y: cur.y };
          push(cur);
        }
        prevCtrl = null;
        break;
      }
      case "V": {
        while (i < args.length) {
          const y = num();
          cur = { x: cur.x, y: rel ? cur.y + y : y };
          push(cur);
        }
        prevCtrl = null;
        break;
      }
      case "C": {
        while (i < args.length) {
          const c1 = pt();
          const c2 = pt();
          const end = pt();
          last().out = c1;
          push(end);
          last().in = c2;
          cur = end;
          prevCtrl = c2;
        }
        break;
      }
      case "S": {
        while (i < args.length) {
          const c1: Vec =
            prevCmd === "C" || prevCmd === "S"
              ? { x: 2 * cur.x - (prevCtrl?.x ?? cur.x), y: 2 * cur.y - (prevCtrl?.y ?? cur.y) }
              : cur;
          const c2 = pt();
          const end = pt();
          last().out = c1;
          push(end);
          last().in = c2;
          cur = end;
          prevCtrl = c2;
        }
        break;
      }
      case "Q": {
        while (i < args.length) {
          const qc = pt();
          const end = pt();
          const c1 = { x: cur.x + (2 / 3) * (qc.x - cur.x), y: cur.y + (2 / 3) * (qc.y - cur.y) };
          const c2 = { x: end.x + (2 / 3) * (qc.x - end.x), y: end.y + (2 / 3) * (qc.y - end.y) };
          last().out = c1;
          push(end);
          last().in = c2;
          cur = end;
          prevCtrl = qc;
        }
        break;
      }
      case "T": {
        while (i < args.length) {
          const qc: Vec =
            prevCmd === "Q" || prevCmd === "T"
              ? { x: 2 * cur.x - (prevCtrl?.x ?? cur.x), y: 2 * cur.y - (prevCtrl?.y ?? cur.y) }
              : cur;
          const end = pt();
          const c1 = { x: cur.x + (2 / 3) * (qc.x - cur.x), y: cur.y + (2 / 3) * (qc.y - cur.y) };
          const c2 = { x: end.x + (2 / 3) * (qc.x - end.x), y: end.y + (2 / 3) * (qc.y - end.y) };
          last().out = c1;
          push(end);
          last().in = c2;
          cur = end;
          prevCtrl = qc;
        }
        break;
      }
      case "Z": {
        if (closed.length) closed[closed.length - 1] = true;
        cur = start;
        prevCtrl = null;
        break;
      }
      case "A":
        throw new Error("Arc commands (A) aren't supported by the point editor.");
      default:
        throw new Error(`Unsupported path command: ${cmd}`);
    }
    prevCmd = C;
  }

  // Finalize the trailing subpath.
  if (starts.length && closed[closed.length - 1]) dedupClose();

  return { anchors, starts, closed };
}

const n = (x: number) => {
  // trim to 2 decimals, drop trailing zeros
  const r = Math.round(x * 100) / 100;
  return String(r);
};

/** Serialize the flat model back to a path `d` string (one M…(Z) run per subpath). */
export function serializePath(path: VectorPath): string {
  const { anchors, starts, closed } = path;
  if (!anchors.length || !starts.length) return "";
  const parts: string[] = [];

  for (let s = 0; s < starts.length; s++) {
    const [begin, end] = subRange(path, s);
    const count = end - begin;
    if (count === 0) continue;
    const isClosed = closed[s];

    parts.push(`M ${n(anchors[begin].p.x)} ${n(anchors[begin].p.y)}`);
    const segCount = isClosed ? count : count - 1;
    for (let k = 0; k < segCount; k++) {
      const a = anchors[begin + k];
      const b = anchors[begin + ((k + 1) % count)];
      if (a.out || b.in) {
        const c1 = a.out ?? a.p;
        const c2 = b.in ?? b.p;
        parts.push(`C ${n(c1.x)} ${n(c1.y)} ${n(c2.x)} ${n(c2.y)} ${n(b.p.x)} ${n(b.p.y)}`);
      } else {
        parts.push(`L ${n(b.p.x)} ${n(b.p.y)}`);
      }
    }
    if (isClosed) parts.push("Z");
  }
  return parts.join(" ");
}

/** Axis-aligned bounding box over all anchors + handles of every subpath. */
export function bounds(path: VectorPath): { x: number; y: number; w: number; h: number } {
  let minX = Infinity, minY = Infinity, maxX = -Infinity, maxY = -Infinity;
  const eat = (p: Vec) => {
    if (p.x < minX) minX = p.x;
    if (p.y < minY) minY = p.y;
    if (p.x > maxX) maxX = p.x;
    if (p.y > maxY) maxY = p.y;
  };
  for (const a of path.anchors) {
    eat(a.p);
    if (a.in) eat(a.in);
    if (a.out) eat(a.out);
  }
  if (!isFinite(minX)) return { x: 0, y: 0, w: 0, h: 0 };
  return { x: minX, y: minY, w: maxX - minX, h: maxY - minY };
}

"use client";

// FigmaFrame — the "selected layer" chrome you see in Figma/Framer: a thin
// accent border that draws itself open, four corner handles that pop in one by
// one, and a live W×H dimension badge under the box. Drop it around ANY element
// and it tracks that element's size with a ResizeObserver, so the badge stays
// honest as the content reflows or you drag points inside it.
//
// Everything visual is prop-driven (accent, handle size/color, border width,
// badge on/off) so a playground can restyle it live.

import { useEffect, useRef, useState, type CSSProperties, type ReactNode } from "react";

export interface FrameStyle {
  accent: string;        // selection color (Figma blue by default)
  handleSize: number;    // px, the little corner squares
  handleFill: string;    // usually white
  borderWidth: number;   // px
  showHandles: boolean;
  showBadge: boolean;
  badgeBg: string;
  badgeText: string;
  /** Replay the open animation whenever this value changes. */
  animateKey?: string | number;
}

export const DEFAULT_FRAME: FrameStyle = {
  accent: "#0d99ff",
  handleSize: 8,
  handleFill: "#ffffff",
  borderWidth: 1,
  showHandles: true,
  showBadge: true,
  badgeBg: "#0d99ff",
  badgeText: "#ffffff",
};

export function FigmaFrame({
  children,
  style = DEFAULT_FRAME,
  /** Override the measured size with explicit numbers (e.g. the SVG viewBox). */
  width,
  height,
}: {
  children: ReactNode;
  style?: FrameStyle;
  width?: number;
  height?: number;
}) {
  const ref = useRef<HTMLDivElement>(null);
  const [size, setSize] = useState({ w: 0, h: 0 });
  // true only on the very first render → the intro animation plays once
  const [firstMount, setFirstMount] = useState(true);
  useEffect(() => {
    const id = setTimeout(() => setFirstMount(false), 900);
    return () => clearTimeout(id);
  }, []);

  useEffect(() => {
    if (width != null && height != null) {
      setSize({ w: width, h: height });
      return;
    }
    const el = ref.current;
    if (!el) return;
    const ro = new ResizeObserver(() => {
      const r = el.getBoundingClientRect();
      setSize({ w: Math.round(r.width), h: Math.round(r.height) });
    });
    ro.observe(el);
    return () => ro.disconnect();
  }, [width, height]);

  const w = width ?? size.w;
  const h = height ?? size.h;

  const s = style;
  const half = s.handleSize / 2;
  const handle = (pos: CSSProperties, intro: boolean, delay: number): CSSProperties => ({
    position: "absolute",
    zIndex: 10,
    width: s.handleSize,
    height: s.handleSize,
    backgroundColor: s.handleFill,
    border: `1px solid ${s.accent}`,
    borderRadius: 1,
    // set the shorthand + delay together, or neither — never mix one set with one
    // removed across renders (React warns about shorthand/non-shorthand conflicts)
    ...(intro ? { animation: `bbox-handle 0.25s ease-out both`, animationDelay: `${delay}s` } : {}),
    ...pos,
  });

  // Play the draw-open / pop-in animation only on the FIRST mount. On a remix the
  // box must not disappear and redraw — it just resizes to track the new shape,
  // which it does smoothly because width/height come straight from the viewBox.
  const intro = firstMount;

  return (
    <div ref={ref} className="relative inline-block">
      {/* the selection border — animates open once, then just tracks the size */}
      <div
        className="pointer-events-none absolute inset-0"
        style={{
          border: `${s.borderWidth}px solid ${s.accent}`,
          transformOrigin: "top left",
          animation: intro ? `bbox-open 0.6s var(--ease-expo) both` : undefined,
        }}
      />

      {s.showHandles && (
        <>
          <span style={handle({ top: -half, left: -half }, intro, 0.18)} />
          <span style={handle({ top: -half, right: -half }, intro, 0.28)} />
          <span style={handle({ bottom: -half, right: -half }, intro, 0.38)} />
          <span style={handle({ bottom: -half, left: -half }, intro, 0.48)} />
        </>
      )}

      {s.showBadge && (
        <span
          className="pointer-events-none absolute left-1/2 z-10 whitespace-nowrap rounded-[4px] px-2 py-0.5 text-[11px] tabular-nums"
          style={{
            bottom: -30,
            backgroundColor: s.badgeBg,
            color: s.badgeText,
            transform: "translateX(-50%)",
            ...(intro ? { animation: `bbox-badge 0.25s ease-out both`, animationDelay: "0.2s" } : {}),
          }}
        >
          {w} × {h}
        </span>
      )}

      {children}
    </div>
  );
}

"use client";

// VectorEditor — a live SVG bezier editor. It draws the path and overlays the
// editable rig on top: every ANCHOR is a draggable dot, every bezier HANDLE is a
// draggable diamond joined to its anchor by a thin "arm" line (exactly the rig
// Figma/Framer show when you enter a vector shape). Drag an anchor to move it
// (its handles come along); drag a handle to reshape the curve. By default the
// two handles of an anchor stay mirrored (smooth point) — hold Alt while
// dragging a handle to break the tangent and make a corner.
//
// Pure pointer math, no deps. Coordinates are the SVG's own user units; we map
// screen → user space through the live CTM so it stays correct at any size.

import { useRef, type PointerEvent as RPointerEvent } from "react";
import type { Anchor, Vec, VectorPath } from "./types";
import { serializePath } from "./parse";
import { sub, add } from "./types";

// How an anchor's two bezier handles relate while you drag one (matches Figma's
// Mirroring setting). Hold Alt while dragging to momentarily force "none".
export type Mirror = "none" | "angle" | "angle-length";

export interface EditorStyle {
  accent: string;
  arm: string;        // tangent-line color
  anchorR: number;    // anchor dot radius (user units)
  handleR: number;    // handle diamond half-size (user units)
  pointFill: string;  // dot/diamond fill
  fill: string;       // path fill
  fillOpacity: number;
  stroke: string;     // path stroke
  strokeWidth: number;
  showRig: boolean;   // hide all points → just the shape
  fillRule: "nonzero" | "evenodd"; // evenodd cuts holes from inner subpaths
}

export const DEFAULT_EDITOR: EditorStyle = {
  accent: "#0d99ff",
  arm: "#9bb7d4",
  anchorR: 4,
  handleR: 3.2,
  pointFill: "#ffffff",
  fill: "#0d99ff",
  fillOpacity: 0.08,
  stroke: "#0d99ff",
  strokeWidth: 1.5,
  showRig: true,
  fillRule: "evenodd",
};

type Drag =
  | { kind: "anchor"; i: number }
  | { kind: "handle"; i: number; side: "in" | "out"; mirror: Mirror };

export function VectorEditor({
  path,
  onChange,
  style = DEFAULT_EDITOR,
  mirror = "angle-length",
  viewBox,
  width,
  height,
  className,
}: {
  path: VectorPath;
  onChange: (next: VectorPath) => void;
  style?: EditorStyle;
  /** Default handle-mirroring mode; Alt-drag temporarily forces "none". */
  mirror?: Mirror;
  /** [minX, minY, width, height] of the SVG viewBox. */
  viewBox: [number, number, number, number];
  /** Rendered pixel size. Defaults to the viewBox's own width/height. */
  width?: number;
  height?: number;
  className?: string;
}) {
  const svgRef = useRef<SVGSVGElement>(null);
  const drag = useRef<Drag | null>(null);
  // latest path (so a coalesced rAF reads current state, not a stale closure)
  const pathRef = useRef(path);
  pathRef.current = path;
  const pending = useRef<Vec | null>(null);
  const rafMove = useRef(0);

  // map a pointer event to SVG user-space coordinates via the live screen CTM
  function toUser(e: { clientX: number; clientY: number }): Vec {
    const svg = svgRef.current!;
    const ctm = svg.getScreenCTM();
    if (!ctm) return { x: 0, y: 0 };
    const pt = svg.createSVGPoint();
    pt.x = e.clientX;
    pt.y = e.clientY;
    const u = pt.matrixTransform(ctm.inverse());
    return { x: u.x, y: u.y };
  }

  function startAnchor(e: RPointerEvent, i: number) {
    e.stopPropagation();
    (e.target as Element).setPointerCapture(e.pointerId);
    drag.current = { kind: "anchor", i };
  }
  function startHandle(e: RPointerEvent, i: number, side: "in" | "out") {
    e.stopPropagation();
    (e.target as Element).setPointerCapture(e.pointerId);
    // Alt overrides the active mode to a free corner.
    drag.current = { kind: "handle", i, side, mirror: e.altKey ? "none" : mirror };
  }

  // Apply a drag at user-space point u against the current path → next path.
  function applyDrag(d: Drag, u: Vec): VectorPath {
    const anchors = pathRef.current.anchors.map((a) => ({
      p: { ...a.p },
      in: a.in ? { ...a.in } : null,
      out: a.out ? { ...a.out } : null,
    })) as Anchor[];

    if (d.kind === "anchor") {
      const a = anchors[d.i];
      const delta = sub(u, a.p);
      a.p = u;
      if (a.in) a.in = add(a.in, delta);
      if (a.out) a.out = add(a.out, delta);
    } else {
      const a = anchors[d.i];
      if (d.side === "out") a.out = u;
      else a.in = u;
      const other = d.side === "out" ? a.in : a.out;
      if (d.mirror !== "none" && other) {
        const rel = sub(u, a.p);
        const relLen = Math.hypot(rel.x, rel.y) || 1;
        const len =
          d.mirror === "angle-length" ? relLen : Math.hypot(other.x - a.p.x, other.y - a.p.y);
        const opp = { x: a.p.x - (rel.x / relLen) * len, y: a.p.y - (rel.y / relLen) * len };
        if (d.side === "out") a.in = opp;
        else a.out = opp;
      }
    }
    return { anchors, starts: pathRef.current.starts, closed: pathRef.current.closed };
  }

  // Coalesce rapid pointermove events to ONE commit per animation frame, so a
  // fast drag doesn't fire dozens of re-renders between paints.
  function onMove(e: RPointerEvent) {
    if (!drag.current) return;
    pending.current = toUser(e);
    if (rafMove.current) return;
    rafMove.current = requestAnimationFrame(() => {
      rafMove.current = 0;
      const d = drag.current;
      const u = pending.current;
      if (!d || !u) return;
      onChange(applyDrag(d, u));
    });
  }

  function endDrag(e: RPointerEvent) {
    if (drag.current) {
      // flush any pending coalesced move so the final position isn't dropped
      if (rafMove.current) {
        cancelAnimationFrame(rafMove.current);
        rafMove.current = 0;
        const u = pending.current;
        if (u) onChange(applyDrag(drag.current, u));
      }
      try {
        (e.target as Element).releasePointerCapture(e.pointerId);
      } catch {
        /* capture may already be gone */
      }
      drag.current = null;
      pending.current = null;
    }
  }

  const s = style;
  const d = serializePath(path);

  // tangent arm segments to draw (anchor → handle)
  const arms: { ax: number; ay: number; hx: number; hy: number }[] = [];
  if (s.showRig) {
    for (const a of path.anchors) {
      if (a.out) arms.push({ ax: a.p.x, ay: a.p.y, hx: a.out.x, hy: a.out.y });
      if (a.in) arms.push({ ax: a.p.x, ay: a.p.y, hx: a.in.x, hy: a.in.y });
    }
  }

  return (
    <svg
      ref={svgRef}
      viewBox={viewBox.join(" ")}
      width={width ?? viewBox[2]}
      height={height ?? viewBox[3]}
      className={className}
      style={{ display: "block", touchAction: "none", userSelect: "none", overflow: "visible" }}
      onPointerMove={onMove}
      onPointerUp={endDrag}
      onPointerCancel={endDrag}
    >
      {/* the shape itself */}
      <path d={d} fill={s.fill} fillRule={s.fillRule} fillOpacity={s.fillOpacity} stroke={s.stroke} strokeWidth={s.strokeWidth} />

      {s.showRig && (
        <g>
          {/* tangent arms */}
          <g stroke={s.arm} strokeWidth={Math.max(0.75, s.strokeWidth * 0.6)}>
            {arms.map((a, k) => (
              <line key={k} x1={a.ax} y1={a.ay} x2={a.hx} y2={a.hy} />
            ))}
          </g>

          {/* bezier handles (diamonds) */}
          {path.anchors.map((a, i) => (
            <g key={`h-${i}`}>
              {a.out && (
                <Diamond
                  cx={a.out.x}
                  cy={a.out.y}
                  r={s.handleR}
                  fill={s.pointFill}
                  stroke={s.accent}
                  onPointerDown={(e) => startHandle(e, i, "out")}
                />
              )}
              {a.in && (
                <Diamond
                  cx={a.in.x}
                  cy={a.in.y}
                  r={s.handleR}
                  fill={s.pointFill}
                  stroke={s.accent}
                  onPointerDown={(e) => startHandle(e, i, "in")}
                />
              )}
            </g>
          ))}

          {/* anchors on top so they win the hit-test */}
          {path.anchors.map((a, i) => (
            <g key={`a-${i}`} style={{ cursor: "grab" }} onPointerDown={(e) => startAnchor(e, i)}>
              {/* fat invisible hit target */}
              <circle cx={a.p.x} cy={a.p.y} r={s.anchorR * 3} fill="transparent" />
              <circle cx={a.p.x} cy={a.p.y} r={s.anchorR} fill={s.pointFill} stroke={s.accent} strokeWidth={1.25} />
            </g>
          ))}
        </g>
      )}
    </svg>
  );
}

function Diamond({
  cx,
  cy,
  r,
  fill,
  stroke,
  onPointerDown,
}: {
  cx: number;
  cy: number;
  r: number;
  fill: string;
  stroke: string;
  onPointerDown: (e: RPointerEvent) => void;
}) {
  return (
    <g style={{ cursor: "grab" }} onPointerDown={onPointerDown}>
      <circle cx={cx} cy={cy} r={r * 3.5} fill="transparent" />
      <rect
        x={cx - r}
        y={cy - r}
        width={r * 2}
        height={r * 2}
        fill={fill}
        stroke={stroke}
        strokeWidth={1.1}
        style={{ transform: "rotate(45deg)", transformOrigin: "50% 50%", transformBox: "fill-box" }}
      />
    </g>
  );
}

"use client";

import OtpInput from "./otp-segmented-input";

// Wire your real check through `verify` — sync or async. Return true and the
// cells cascade green; false and the row shakes, drops the digits, and hands
// the caret back:
//
//   <OtpInput
//     verify={async (code) => {
//       const res = await fetch("/api/verify-otp", { method: "POST", body: code });
//       return res.ok;
//     }}
//   />
export default function OtpInputExample() {
  return (
    <div className="flex flex-col items-center gap-8">
      {/* Default: six digits, verified against your adapter (or the `code` prop). */}
      <OtpInput verify={(code) => code === "246810"} />

      {/* Masked — paints • instead of the digit, the value stays untouched. */}
      <OtpInput mask />

      {/* Split 3-3, the way SMS codes are read aloud. */}
      <OtpInput group />

      {/* Any length — the group gap lands at the halfway point. */}
      <OtpInput length={4} code="2468" group />
    </div>
  );
}

"use client";

import WheelList from "./inertial-wheel-list";

// Every quarter hour of the day; the wheel starts on 9:00 AM (index 36).
export const TIMES: string[] = [];
for (let m = 0; m < 24 * 60; m += 15) {
  const h = Math.floor(m / 60);
  TIMES.push(`${h % 12 === 0 ? 12 : h % 12}:${String(m % 60).padStart(2, "0")} ${h < 12 ? "AM" : "PM"}`);
}

export default function WheelListExample() {
  return (
    <div className="flex flex-wrap items-start justify-center gap-6">
      {/* Default: the 3D drum. Selection derives from the scroll position and
          commits when the snap settles. */}
      <WheelList
        items={TIMES}
        label="Pick a start time"
        initialIndex={36}
        onStateChange={(state) => console.log(state.settled ? `selected ${state.value}` : "coasting")}
      />

      {/* drum={false}: a flat wheel — keeps the scale + fade, drops the rotateX. */}
      <WheelList items={TIMES} label="Pick a start time" initialIndex={36} drum={false} />
    </div>
  );
}

"use client";

import { useState } from "react";
import DragReorderList, { type ReorderItem } from "./drag-to-reorder-list";

const TASKS: ReorderItem[] = [
  { id: "design", label: "Design review", meta: "figma" },
  { id: "mention", label: "Ship mention popover", meta: "lab" },
  { id: "staging", label: "Deploy staging", meta: "vercel" },
  { id: "changelog", label: "Write changelog", meta: "notion" },
  { id: "announce", label: "Announce release", meta: "social" },
];

export default function DragReorderListExample() {
  // Controlled: hold the order yourself and persist it in onReorder.
  const [items, setItems] = useState(TASKS);
  return (
    <div className="flex flex-col items-center gap-6">
      <DragReorderList items={items} onReorder={setItems} />

      {/* flip={false} is the hard-snap comparison — same math, no glides. */}
      <DragReorderList defaultItems={TASKS.slice(0, 3)} flip={false} />
    </div>
  );
}