Checkbox Domino Run

1"use client";
2 
3import {
4  useCallback,
5  useEffect,
6  useId,
7  useRef,
8  useState,
9  type ChangeEvent,
10} from "react";
11 
12// ---------------------------------------------------------------------------
13// ToppleRun — a select-all whose propagation is the interaction model, not a
14// cosmetic stagger. Flipping the master checkbox releases a wavefront that
15// travels down the list at a fixed rate (14 rows/sec): as the front reaches
16// row i, that row's own checkbox commits its new state under a 120ms
17// spring-eased transition and the row takes a transient translateY(2px)
18// lean toward row i+1 — read as the wave shoving the next domino — handed
19// off with a short overlap so consecutive leans read as continuous contact.
20// A thin tick travels the list's left edge marking the front's live
21// position. Every row commits its state the instant the front passes it, so
22// there is nothing to roll back: stopping the run just stops future rows
23// from being touched.
24//
25// INTERRUPTION: the run is spatially interruptible, not just cancelable —
26// activating ANY row (pointer or keyboard, since every row stays a fully
27// operable checkbox for the run's entire duration) halts the wave
28// immediately. Rows the front already passed keep their committed state;
29// rows beyond the front are simply untouched, standing exactly as they
30// were. Escape halts it too. This is the "all except a few" recovery path:
31// watch the run, stop it where you want, no undo needed because nothing
32// past that point was ever touched.
33//
34// A11Y: the master is a real input[type=checkbox] with aria-controls
35// pointing at the row list's id; a polite live region announces once at
36// the start ("Enabling all…") and once at the end or halt ("Enabled 34 of
37// 40, stopped at row 35."). Every row is a real checkbox with its own
38// native label association — nothing here is conveyed only by animation.
39//
40// REDUCED MOTION: there is no wave to catch, so interruption is replaced by
41// a straightforward safety net — the master flips every row in a single
42// frame and a 5s Undo affordance appears, reverting the whole batch if
43// pressed in time.
44//
45// TOKENS: --foreground for ink (checkbox fill, the traveling tick),
46// --border for hairlines, --muted for secondary text, --accent for the
47// focus ring only. Pure DOM/CSS, no canvas.
48// ---------------------------------------------------------------------------
49 
50const ROWS_PER_SEC = 14;
51// … truncated