@crievo/omni 0.1.3 → 0.1.4

package/studio/web/components/bencho/AssigneePicker.tsx

@@ -0,0 +1,246 @@
+/* A pill that opens a list, and fills up with faces as you assign them: one, two, four, and the pill grows to hold them
+   as an overlapping stack. The pill is the readout, so there is no count badge: the faces say who.
+   Ported from bencho.dev (MIT).
+
+   Two arrangements: "Row" (the faces overlap and the pill grows sideways) and "Grid" (the same four packed into the
+   footprint of one face, so the pill never grows). Every face is placed by its transform in both, so switching between
+   them is the same animation as arriving. */
+
+import { type CSSProperties, useState } from "react";
+import { AnimatePresence, motion } from "motion/react";
+import { ArrowDown, Check } from "../icons";
+import { VoiceAvatar } from "../VoiceAvatar";
+
+const clamp = (v: number, lo: number, hi: number) => Math.min(hi, Math.max(lo, v));
+
+/* the id is the avatar's seed */
+const CAST = [
+  { id: "kai", name: "Adriano Matos", role: "Design" },
+  { id: "mara", name: "Priscila Ramos", role: "Pesquisa" },
+  { id: "sofia", name: "Nora Vilela", role: "Engenharia" },
+  { id: "ines", name: "Marcos Bellini", role: "Produto" },
+];
+
+/* the block's own box, reserved for the list open so closing it does not resize the card underneath */
+const W = 264;
+const H = 268;
+
+/* the faces in the pill */
+const FACE = 28;
+const CORNER = 20;
+/* how much of each face the next one covers, px */
+const LAP = 10;
+
+/* The Grid arrangement: no overlap, every face fully visible, the box is FACE across whatever the count. Three fills
+   reading order and leaves the last cell empty (centring the odd one would break the grid and shunt it sideways when
+   the fourth arrives). */
+const quad = (n: number, gut: number) => {
+  const cell = (FACE - gut) / 2;
+  const s = cell / FACE;
+  const a = cell / 2; /* centre of the near cell */
+  const b = FACE - cell / 2; /* centre of the far one */
+  const m = FACE / 2;
+  if (n <= 1) return [{ cx: m, cy: m, s: 1 }];
+  if (n === 2)
+    return [
+      { cx: a, cy: m, s },
+      { cx: b, cy: m, s },
+    ];
+  if (n === 3)
+    return [
+      { cx: a, cy: a, s },
+      { cx: b, cy: a, s },
+      { cx: a, cy: b, s },
+    ];
+  return [
+    { cx: a, cy: a, s },
+    { cx: b, cy: a, s },
+    { cx: a, cy: b, s },
+    { cx: b, cy: b, s },
+  ];
+};
+
+export function AssigneePicker({
+  corner = CORNER,
+  overlap = LAP,
+  stack = "Row",
+}: {
+  /* the pill's corner and the card's, px */
+  corner?: number;
+  /* how far the faces overlap, px; 0 is a row of separate circles */
+  overlap?: number;
+  /* "Row" or "Grid" */
+  stack?: string;
+}) {
+  /* drawn open with two already chosen: the pill doing its job and the list showing why */
+  const [open, setOpen] = useState(true);
+  const [picked, setPicked] = useState<string[]>(["kai", "mara"]);
+
+  const r = clamp(corner, 0, 26);
+  const lap = clamp(overlap, 0, 22);
+  const grid = stack === "Grid";
+
+  /* In the quad, overlap reads as packing: 4px of air at nought, 2px at full. It never reaches zero, "they never
+     touch" is the arrangement's one promise. */
+  const spots = quad(picked.length, 4 - (lap / 22) * 2);
+
+  /* The rail's width is computed from the count, not measured: it is the same number at any zoom and CSS can
+     transition it without knowing where the block is. */
+  const rail = !picked.length ? 0 : grid ? FACE : FACE + (picked.length - 1) * (FACE - lap);
+
+  /* It does not close on an outside press: the pill is the toggle, and a click on a different block must not put
+     this one away. A real interface wants a document pointerdown listener here. */
+  const toggle = (id: string) => {
+    setPicked(p => (p.includes(id) ? p.filter(x => x !== id) : [...p, id]));
+  };
+
+  return (
+    <div
+      className="bn-pik"
+      style={
+        {
+          width: W,
+          height: H,
+          /* concentric: the card's radius less the gap between them (its 6px padding). Published from here because
+             the corner is a knob: at 0 both are square, at 26 both are as round as they go. */
+          "--pik-row-r": `${Math.max(0, r - 6)}px`,
+        } as CSSProperties
+      }
+    >
+      <button
+        type="button"
+        className="bn-pik-pill"
+        style={{ borderRadius: r }}
+        onClick={() => {
+          setOpen(v => !v);
+        }}
+        aria-expanded={open}
+        aria-haspopup="listbox"
+      >
+        {/* Faces are absolute inside a rail whose width is the arithmetic above, so the pill grows by one CSS
+            transition and nothing watches the DOM. Reversed z-order: the first face sits on top of the second, so
+            adding a fourth person does not look like losing the first three. */}
+        <span className="bn-pik-rail" style={{ width: rail }}>
+          <AnimatePresence initial={false}>
+            {picked.map((id, i) => {
+              /* one vector and one scale describe both layouts */
+              const spot = grid ? spots[Math.min(i, spots.length - 1)] : null;
+              const tx = spot ? spot.cx - FACE / 2 : i * (FACE - lap);
+              const ty = spot ? spot.cy - FACE / 2 : 0;
+              const sc = spot ? spot.s : 1;
+              return (
+                <motion.span
+                  key={id}
+                  className="bn-pik-face"
+                  style={{ zIndex: CAST.length - i }}
+                  /* A face lands, it does not fade in: it drops from slightly above with a turn on it and
+                     overshoots on the way to rest, so adding somebody reads as a token being put down. Leaving is
+                     the same move backwards and quicker. The drop lands at ty and the pop at sc, since in the quad a
+                     face's rest is its cell. */
+                  initial={{ scale: 0.2 * sc, opacity: 0, x: tx, y: ty - 10, rotate: -22 }}
+                  animate={{ scale: sc, opacity: 1, x: tx, y: ty, rotate: 0 }}
+                  exit={{ scale: 0.2 * sc, opacity: 0, x: tx, y: ty - 6, rotate: 14 }}
+                  /* Two springs: the Overlap slider moves position and size, and a slider wants a follower, not a
+                     bouncer (a 0.48-zeta spring wobbles a third of a second after the thumb stops). So x, y and
+                     scale get a tight one; rotate keeps the loose spring that carries the character. */
+                  transition={{
+                    type: "spring",
+                    stiffness: 500,
+                    damping: 18,
+                    mass: 0.8,
+                    x: { type: "spring", stiffness: 380, damping: 34, mass: 0.7 },
+                    y: { type: "spring", stiffness: 380, damping: 34, mass: 0.7 },
+                    scale: { type: "spring", stiffness: 380, damping: 34, mass: 0.7 },
+                    opacity: { duration: 0.16 },
+                  }}
+                >
+                  <VoiceAvatar seed={id} size={FACE} />
+                </motion.span>
+              );
+            })}
+          </AnimatePresence>
+        </span>
+
+        {/* The pill is a readout: with nobody in it, it reports that nobody is (the state, not the verb). */}
+        {picked.length === 0 && <span className="bn-pik-say">Sem responsável</span>}
+
+        <ArrowDown className="bn-pik-chev" size={16} weight="bold" aria-hidden />
+      </button>
+
+      <AnimatePresence>
+        {open && (
+          <motion.div
+            className="bn-pik-card"
+            style={{ borderRadius: r }}
+            role="listbox"
+            aria-multiselectable="true"
+            /* It unfolds out of the pill: the origin is the card's top-left, the pill's own left edge. Not a goo
+               morph, two objects joined by a bridge read as welded rather than as one opening. The scale starts high
+               (0.86 across, 0.72 down) because a scale drags the corner radius with it; the bounce is where the
+               character is, not the distance. */
+            initial={{ opacity: 0, y: -10, scaleX: 0.86, scaleY: 0.72 }}
+            animate={{ opacity: 1, y: 0, scaleX: 1, scaleY: 1 }}
+            exit={{ opacity: 0, y: -8, scaleX: 0.92, scaleY: 0.86 }}
+            transition={{
+              /* zeta about 0.63: it goes past and comes back */
+              type: "spring",
+              stiffness: 500,
+              damping: 18,
+              mass: 0.9,
+              opacity: { duration: 0.16 },
+            }}
+          >
+            {CAST.map(p => {
+              const on = picked.includes(p.id);
+              return (
+                <motion.button
+                  type="button"
+                  key={p.id}
+                  className="bn-pik-row"
+                  role="option"
+                  aria-selected={on}
+                  data-on={on || undefined}
+                  onClick={() => toggle(p.id)}
+                  /* the rows deal out under the card rather than arriving with it, 40ms apart */
+                  initial={{ opacity: 0, y: -8 }}
+                  animate={{ opacity: 1, y: 0 }}
+                  transition={{
+                    type: "spring",
+                    stiffness: 380,
+                    damping: 34,
+                    mass: 0.7,
+                    delay: 0.04 * CAST.indexOf(p) + 0.03,
+                  }}
+                >
+                  <span className="bn-pik-av">
+                    <VoiceAvatar seed={p.id} size={32} />
+                  </span>
+                  <span className="bn-pik-who">
+                    <span className="bn-pik-name">{p.name}</span>
+                    <span className="bn-pik-role">{p.role}</span>
+                  </span>
+                  {/* the box is always drawn; only the tick arrives, so the row does not read as growing a control */}
+                  <span className="bn-pik-mark">
+                    <AnimatePresence initial={false}>
+                      {on && (
+                        <motion.span
+                          className="bn-pik-tick"
+                          initial={{ scale: 0.4, opacity: 0 }}
+                          animate={{ scale: 1, opacity: 1 }}
+                          exit={{ scale: 0.4, opacity: 0 }}
+                          transition={{ type: "spring", stiffness: 500, damping: 18, mass: 0.6 }}
+                        >
+                          <Check size={14} weight="bold" />
+                        </motion.span>
+                      )}
+                    </AnimatePresence>
+                  </span>
+                </motion.button>
+              );
+            })}
+          </motion.div>
+        )}
+      </AnimatePresence>
+    </div>
+  );
+}

package/studio/web/components/bencho/BenchoScope.tsx

@@ -0,0 +1,8 @@
+/* Wraps a ported Bencho component inside a real studio screen: it brings Bencho's palette (styles/components/bencho/
+   tokens.css) and the element reset the component needs, and adds no box of its own. */
+
+import type { ReactNode } from "react";
+
+export function BenchoScope({ children }: { children: ReactNode }) {
+  return <span className="bn-scope">{children}</span>;
+}

package/studio/web/components/bencho/Checklist.tsx

@@ -0,0 +1,421 @@
+/* Three tasks, and the only thing this block does is cross one out. Tick the last open one and the list falls into a
+   heap on the bottom edge of the card, lies there three seconds and puts itself away.
+   Ported from bencho.dev (MIT).
+
+   One spring per row, and everything is read off it: the box filling, the tick drawing, the rule crossing the words and
+   the words giving up their ink are four readings of a single number, so none of them can arrive early and break the
+   illusion of one event (which is why the stylesheet carries no transition of its own for them). The fill takes the raw
+   value, so the box swells past full and settles. The tick and the rule take it clamped: a tick that overshoots draws
+   past its own end and pulls back, a rule that overshoots runs off the word. */
+
+import { type CSSProperties, useCallback, useEffect, useLayoutEffect, useRef, useState } from "react";
+import { AnimatePresence, motion } from "motion/react";
+
+const clamp = (v: number, lo: number, hi: number) => Math.min(hi, Math.max(lo, v));
+const mix = (a: number, b: number, t: number) => a + (b - a) * t;
+
+/* 0..100 into the two numbers a spring has, chosen by damping ratio (zeta = -ln(d) / (2 * sqrt(k))) because the ratio
+   is what a person sets: 0 is zeta ~0.85 (heavy, arrives without a ring), 50 ~0.41, 100 ~0.20 (two visible rebounds) */
+const springOf = (tune: number) => ({
+  /* stiffness: how hard it is pulled toward the target */
+  k: 0.08 + (tune / 100) * 0.16,
+  /* decay, per frame: how much of the velocity survives */
+  d: 0.62 + (tune / 100) * 0.2,
+});
+
+/* Frames, not milliseconds: `dt` is in sixtieths of a second and the damping is raised to it rather than multiplied by
+   it, so a dropped frame decays the energy of the two it replaced. The snap threshold is absolute, so the caller works
+   in 0..100 or pixels. The loop parks itself the moment the value has settled. */
+function useSpring(target: number, tune = 50, instant = false) {
+  const [at, setAt] = useState(target);
+  const cur = useRef(target);
+  const vel = useRef(0);
+  const raf = useRef(0);
+
+  useEffect(() => {
+    if (instant) {
+      cur.current = target;
+      vel.current = 0;
+      setAt(target);
+      return;
+    }
+    const { k, d } = springOf(tune);
+    let prev = 0;
+    const tick = (t: number) => {
+      const dt = prev ? clamp((t - prev) / 16.67, 0, 2.5) : 1;
+      prev = t;
+      vel.current += (target - cur.current) * k * dt;
+      vel.current *= d ** dt;
+      cur.current += vel.current * dt;
+      if (Math.abs(target - cur.current) < 0.02 && Math.abs(vel.current) < 0.02) {
+        cur.current = target;
+        vel.current = 0;
+        setAt(target);
+        raf.current = 0;
+        return;
+      }
+      setAt(cur.current);
+      raf.current = requestAnimationFrame(tick);
+    };
+    raf.current = requestAnimationFrame(tick);
+    return () => {
+      cancelAnimationFrame(raf.current);
+      raf.current = 0;
+    };
+    /* `tune` is a dependency because the loop closes over it; restarting picks up from the refs, so it continues
+       rather than snapping */
+  }, [target, tune, instant]);
+
+  return at;
+}
+
+/* read once: a preference, not a live input */
+const stillness = () =>
+  typeof window !== "undefined" && !!window.matchMedia?.("(prefers-reduced-motion: reduce)").matches;
+
+const W = 300;
+/* the inset, the same on all four sides (see padV) */
+const PAD = 14;
+/* the gap between two tasks is what the row has left after the box, twice: 40 makes it a list, 52 made three things */
+const ROW = 40;
+/* sized against the line it sits beside: at 22 the box was half again the cap height of the 14px words */
+const BOX = 18;
+const CORNER = 20;
+const BOUNCE = 50;
+
+/* the rule follows the tick, it does not race it: a window on the same number that starts a tenth in and finishes a
+   little early, so the box answers first and the words are crossed out after (cause and effect, not one wipe) */
+const LAG = 0.12;
+const RUN = 0.72;
+
+/* The finish is a collapse, not a drop. The card stays as tall as its rows, so there is nowhere to fall to: the distance
+   comes from the rows closing up, by twice the slack of a row (40px tall, ~20px of it visible) each. The bottom row
+   barely moves, the top one travels the whole compaction, and each lands where the one below it stopped.
+
+   The row's body is the taller of its checkbox and its line of type, both measured, with no margin added: the slip is
+   the card's own colour, so its edge is invisible, and every pixel of slack it kept would be a pixel the heap cannot
+   close up. */
+const BODY = (side: number, line: number) => Math.max(side, line);
+
+/* how long the furthest fall takes; the others are shorter in proportion (one gravity, t ~ sqrt of distance) */
+const DROP_MS = 0.46;
+/* how far it comes back up off the floor, at most: capped against the distance travelled, or it reads as a trampoline */
+const REBOUND = 8;
+const FALL_EASE = ["easeIn", "easeOut", "easeIn"] as const;
+
+/* how long the heap lies there before the list comes back */
+const HOLD = 3000;
+
+/* The tilt is the overhang. A slip lying on another is held up by as much of it as there is underneath; the rest hangs,
+   and what hangs, tips. Each row is measured (box, gap and type, to the end of the text) and one longer than the one it
+   lands on leans by the difference. It accumulates from the floor up (the bottom one lies flat, every one above inherits
+   the lean it lies on and adds its own), so long-then-short reads differently from short-then-long. The response
+   saturates: two degrees for the 16px those tasks differ by, never six, where a slip stops resting and looks dropped. */
+const MAX_LEAN = 6;
+const REACH = 40;
+const leanOf = (over: number) => MAX_LEAN * (1 - Math.exp(-over / REACH));
+/* the sideways untidiness, which the words have no opinion about: the one thing that is just chosen */
+const DRIFT = [-5, 4, -2, 5, -3];
+
+/* The daylight between two slips is computed from the leans, not picked: tilting moves their ends, and if two converge
+   by more than the gap the upper edge covers the lower words. Measured where the ink is (the far end of the longer
+   text), not across the invisible row, which inflated the gap to 5.7px for a collision that could not happen.
+   Rotation is about the row's middle, so a point at x is displaced by (x - middle) * sin. */
+const SPAN = W - PAD * 2;
+const MID = SPAN / 2;
+const sin = (deg: number) => Math.sin((deg * Math.PI) / 180);
+const gapFor = (leans: number[], runs: number[]) =>
+  1 +
+  Math.max(
+    0,
+    ...leans.slice(1).map((below, i) => {
+      const ink = Math.max(runs[i] ?? MID, runs[i + 1] ?? MID);
+      return Math.max(0, (ink - MID) * (sin(leans[i]) - sin(below)));
+    }),
+  );
+
+/* different enough in length that the heap can be seen measuring the words rather than the row */
+const TASKS = ["Reservar o estúdio", "Enviar o orçamento", "Escolher a fonte"];
+
+/* three that come with it and two of your own: a cap says when the card is full, kinder than a scrollbar inside a
+   block. The spare row goes when the list is full, since an "add" that cannot add is a control lying about itself. */
+const MAX = 5;
+
+export function Checklist({
+  corner = CORNER,
+  /* how far the box swells past full before it settles, 0..100 (0 is a spring that arrives dead) */
+  bounce = BOUNCE,
+  /* the box, px */
+  box = BOX,
+}: {
+  corner?: number;
+  bounce?: number;
+  box?: number;
+} = {}) {
+  /* one array, not two: the list can change, and two arrays that must stay the same length will not */
+  const [items, setItems] = useState(() => TASKS.map(text => ({ text, done: false })));
+  /* the row being typed into; the draft is separate from the list so an abandoned one leaves nothing behind */
+  const [adding, setAdding] = useState(false);
+  const [draft, setDraft] = useState("");
+  /* how long each row is and how tall a line of it sets, reported up from the rows because only they can see it (the
+     width of type is a question for the font). offsetWidth rather than a rect: the block may be drawn under a scale. */
+  const [runs, setRuns] = useState<number[]>([]);
+  const [line, setLine] = useState(20);
+  const measure = useCallback((i: number, px: number, tall: number) => {
+    setRuns(v => (v[i] === px ? v : Object.assign([...v], { [i]: px })));
+    setLine(v => (v === tall ? v : tall));
+  }, []);
+
+  const still = stillness();
+
+  const r = clamp(corner, 0, 40);
+  const side = clamp(Math.round(box), 14, 28);
+
+  /* the whole finish, as one derived boolean and not a state: unticking a task during the three seconds makes this
+     false on the same render and the rows climb back, so "undo while it is on the floor" is free */
+  const fell = items.length > 0 && items.every(t => t.done);
+  /* the spare row holds its space while the heap is down: fading is a paint, removing it would change the height in
+     the middle of a fall */
+  const spare = items.length < MAX;
+
+  /* three seconds on the floor, then all the way back, added tasks included (a demo left by a visitor should not hand
+     the next one a state nobody chose). Cleared if `fell` goes false first, so unticking cancels the reset. Going back
+     to three also gives the closing animation for free: the height transition that opened the card runs in reverse. */
+  useEffect(() => {
+    if (!fell) return;
+    const id = window.setTimeout(() => setItems(TASKS.map(text => ({ text, done: false }))), HOLD);
+    return () => window.clearTimeout(id);
+  }, [fell]);
+
+  /* The vertical padding is derived, not declared. A row is taller than the box in it (the words are the part anybody
+     points at), and that slack sits between the first box and the card's edge, so a uniform padding reads as 14 at the
+     sides and 23 at the top. Taking the slack off, from the box's current size, keeps the four insets looking equal. */
+  const slack = (ROW - side) / 2;
+  const padV = Math.max(0, PAD - slack);
+
+  /* Where the heap goes, worked out from the bottom up: the last row's slip comes to rest on the card's inner edge and
+     every row above lands on the one below. `inset` is the air inside a row that the heap gives up. */
+  const body = BODY(side, line);
+  const inset = (ROW - body) / 2;
+  /* every row the card holds, the spare one included */
+  const slots = items.length + (spare ? 1 : 0);
+  const floor = padV + ROW * slots;
+  /* the lean of each slip from the floor up: zero until the rows have reported their widths, which is one frame */
+  const leans = items.map(() => 0);
+  for (let i = items.length - 2; i >= 0; i--) {
+    const over = Math.max(0, (runs[i] ?? 0) - (runs[i + 1] ?? 0));
+    leans[i] = clamp(leans[i + 1] + leanOf(over), 0, MAX_LEAN);
+  }
+  const touch = gapFor(leans, runs);
+  /* the bottom slip is flat, so its lowest point is its own edge and the seat needs no correction for a tilt */
+  const seat = floor - inset - body;
+  const restTop = (i: number) => padV + i * ROW;
+  const pileTop = (i: number) => seat - (items.length - 1 - i) * (body + touch);
+  const drops = items.map((_, i) => Math.max(0, pileTop(i) - restTop(i)));
+  /* the top row travels furthest, so it sets the clock; the cascade is the bottom row having less far to go */
+  const longest = Math.max(...drops, 1);
+
+  const add = () => {
+    const text = draft.trim();
+    setAdding(false);
+    setDraft("");
+    if (!text || items.length >= MAX) return;
+    setItems(v => [...v, { text, done: false }]);
+  };
+
+  return (
+    <div
+      className="bn-chk"
+      style={{
+        width: W,
+        /* stated, not summed from the rows, so CSS can animate it: adding a task used to snap the card 40px taller */
+        height: padV * 2 + ROW * slots,
+        padding: `${padV}px ${PAD}px`,
+        borderRadius: r,
+      }}
+    >
+      {/* the two rows that leave on a reset from five back to three are held a moment and faded, so the card shuts over
+          them instead of them vanishing out from under it */}
+      <AnimatePresence initial={false}>
+        {items.map((task, i) => (
+          <Row
+            /* text and position: two tasks can have the same words, and nothing reorders */
+            key={`${i}-${task.text}`}
+            label={task.text}
+            on={task.done}
+            side={side}
+            bounce={bounce}
+            still={still}
+            fell={fell}
+            drop={drops[i]}
+            secs={DROP_MS * Math.sqrt(drops[i] / longest)}
+            /* the slip is the part of the row you can see, and the part that comes to rest on the one below */
+            inset={inset}
+            drift={DRIFT[i]}
+            tilt={leans[i]}
+            index={i}
+            onRun={measure}
+            /* the last thing to land is the top of the heap and is painted like it; DOM order would put the bottom
+               row over everything */
+            layer={fell ? items.length - i : undefined}
+            onToggle={() => {
+              setItems(v => v.map((t, k) => (k === i ? { ...t, done: !t.done } : t)));
+            }}
+          />
+        ))}
+      </AnimatePresence>
+
+      {/* The spare row is quiet on purpose, the one thing here that is not a task: at full strength a fourth row of ink
+          reads as a fourth task you have not ticked. It comes up on hover and while you type in it. */}
+      {spare && (
+        <div className="bn-chk-add" data-hide={fell || undefined} style={{ height: ROW }}>
+          <span
+            className="bn-chk-ghost"
+            aria-hidden="true"
+            style={{ width: side, height: side, borderRadius: side * 0.32 }}
+          />
+          {adding ? (
+            <input
+              className="bn-chk-field"
+              autoFocus
+              value={draft}
+              placeholder="Nova tarefa"
+              maxLength={40}
+              onChange={e => setDraft(e.target.value)}
+              /* Enter commits, Escape abandons, and neither is allowed past this block */
+              onKeyDown={e => {
+                if (e.key === "Enter") {
+                  e.stopPropagation();
+                  add();
+                }
+                if (e.key === "Escape") {
+                  e.stopPropagation();
+                  setAdding(false);
+                  setDraft("");
+                }
+              }}
+              onBlur={add}
+            />
+          ) : (
+            <button
+              type="button"
+              className="bn-chk-new"
+              onClick={() => {
+                setAdding(true);
+              }}
+            >
+              Adicionar tarefa
+            </button>
+          )}
+        </div>
+      )}
+    </div>
+  );
+}
+
+function Row({
+  label,
+  on,
+  side,
+  bounce,
+  still,
+  fell,
+  drop,
+  secs,
+  inset,
+  drift,
+  tilt,
+  layer,
+  index,
+  onRun,
+  onToggle,
+}: {
+  label: string;
+  on: boolean;
+  side: number;
+  bounce: number;
+  still: boolean;
+  /* the list is finished and the floor has gone */
+  fell: boolean;
+  drop: number;
+  secs: number;
+  inset: number;
+  drift: number;
+  tilt: number;
+  layer?: number;
+  index: number;
+  onRun: (i: number, px: number, tall: number) => void;
+  onToggle: () => void;
+}) {
+  /* it measures its own line and says how long it is: the span is sized to the words, so its right edge is where this
+     slip actually ends. A layout effect, because the parent leans the heap on this number and a frame of the wrong
+     answer is a frame of the wrong heap. */
+  const say = useRef<HTMLSpanElement | null>(null);
+  useLayoutEffect(() => {
+    const el = say.current;
+    if (el) onRun(index, el.offsetLeft + el.offsetWidth, el.offsetHeight);
+  }, [label, side, index, onRun]);
+
+  /* the one number; a component per row because a hook cannot be called three times from the parent */
+  const t = useSpring(on ? 1 : 0, clamp(bounce, 0, 100), still);
+  const held = clamp(t, 0, 1);
+  /* the rule's own window on the same number */
+  const cut = clamp((held - LAG) / RUN, 0, 1);
+
+  /* Falling and climbing are not the same motion. Down is a duration with gravity's shape (starts at nothing and
+     gains, which is easeIn) and a small rebound as the third keyframe, the difference between landing and being placed.
+     Up is a spring, the list reasserting itself, and a spring interrupts cleanly: unticking mid-fall picks the row up
+     from wherever it got to. With motion turned down there is no quieter version of a thing falling over, so it does
+     not happen; the reset still runs. */
+  const run = still ? 0 : secs;
+  const up = Math.min(REBOUND, drop * 0.22);
+  const land = {
+    duration: run,
+    times: [0, 0.66, 0.84, 1],
+    ease: [...FALL_EASE],
+  };
+  /* the tilt and the sideways drift arrive with the landing and do not bounce */
+  const lean = { duration: run, ease: "easeIn" as const };
+
+  return (
+    <motion.button
+      type="button"
+      className="bn-chk-row"
+      role="checkbox"
+      aria-checked={on}
+      data-fell={fell || undefined}
+      onClick={onToggle}
+      style={{ height: ROW, zIndex: layer, "--slip": `${inset}px` } as CSSProperties}
+      /* the row is drawn where it has always been drawn and moved from there, so the card's layout never changes */
+      initial={false}
+      exit={{ opacity: 0, transition: { duration: 0.16 } }}
+      animate={fell ? { y: [0, drop, drop - up, drop], x: drift, rotate: tilt } : { y: 0, x: 0, rotate: 0 }}
+      transition={
+        fell ? { y: land, x: lean, rotate: lean } : { type: "spring", stiffness: 380, damping: 34, mass: 0.9 }
+      }
+    >
+      {/* the box is two layers and neither is a border being recoloured: the ring is always there and the fill grows
+          inside it, so it reads as a box being filled in rather than one colour swapped for another */}
+      <span className="bn-chk-box" style={{ width: side, height: side, borderRadius: side * 0.32 }}>
+        {/* raw, so it goes past full and settles: the one place the overshoot belongs */}
+        <span className="bn-chk-fill" style={{ borderRadius: side * 0.32, transform: `scale(${t.toFixed(4)})` }} />
+        {/* the tick draws: pathLength="1" normalises the dash to the stroke's own length, so the offset is a fraction
+            and changing the checkmark needs nothing here to know. Clamped. */}
+        <svg className="bn-chk-tick" viewBox="0 0 24 24" aria-hidden="true">
+          <path d="M6 12.4 L10.3 16.7 L18 7.6" pathLength={1} strokeDasharray={1} strokeDashoffset={1 - held} />
+        </svg>
+      </span>
+
+      <span className="bn-chk-say" ref={say}>
+        {/* the words give up their ink as the rule crosses them, off the same number, so a half-crossed line is half
+            faded and the two can never disagree */}
+        <span className="bn-chk-word" style={{ opacity: mix(1, 0.42, held) }}>
+          {label}
+        </span>
+        {/* the rule is scaled, not grown: scaleX from the left needs no measured word, and a 1.5px line has no corner
+            for a scale to distort */}
+        <span className="bn-chk-rule" aria-hidden="true" style={{ transform: `scaleX(${cut.toFixed(4)})` }} />
+      </span>
+    </motion.button>
+  );
+}