Checkbox Ink Stroke

1"use client";
2 
3import {
4  useEffect,
5  useId,
6  useRef,
7  useState,
8  type ChangeEvent,
9  type ReactNode,
10} from "react";
11 
12// ---------------------------------------------------------------------------
13// NibCheck — a checkbox (and tri-state parent) whose mark is inked on by a
14// variable-width calligraphic stroke: thin entry, a thick corner flick, and a
15// hair of overshoot past the natural tip. The three states — unchecked,
16// checked, indeterminate — read as three distinct pen gestures rather than a
17// check, a smaller check, and a minus.
18//
19// GEOMETRY: the check is one filled ribbon path built once at module scope by
20// offsetting a hand-placed spine polyline with a per-point half-width (thin
21// at the entry, widest right at the corner, tapering through the flick to a
22// hairline overshoot tip) — see buildRibbon. Interior normals average their
23// two adjacent segment normals, so the sharp direction change at the corner
24// naturally bulges on the convex side and pinches on the concave one, like
25// ink pooling as a pen changes direction. Indeterminate draws a separate,
26// simpler fat rounded dash — not a shrunk-down check.
27//
28// REVEAL: both ink shapes sit under a left-anchored CSS clip-path (inset,
29// fill-box) that transitions from fully clipped to fully revealed over
30// ~220ms ease-out-expo, reading as ink drawn left-to-right: entry, corner,
31// tip. Unchecking reverses the same clip back toward the entry edge — ink
32// retracts — and a small dot at the entry point pops in and fades once
33// retraction finishes. The box's own corner radius relaxes 2px on check, with
34// a small imperative class-toggle "pop" (restarted without remounting, so
35// focus never moves) standing in for the flick's ~4% overshoot.
36//
37// A11Y: a real input[type=checkbox] carries checked/indeterminate/disabled
38// and all native keyboard + AT semantics; it is visually hidden (opacity: 0,
39// sized to cover the box) but stays in the tab order and keeps focus — never
40// aria-hidden. The SVG ink is aria-hidden. Colors: ink is --foreground, the
41// box border is --border; --accent appears only in the focus ring.
42// prefers-reduced-motion disables every transition/animation here, so the
43// final ink for the current state is simply present or absent, instantly.
44// ---------------------------------------------------------------------------
45 
46type Pt = readonly [number, number];
47 
48function normalize(v: Pt): Pt {
49  const len = Math.hypot(v[0], v[1]) || 1;
50// … truncated