64:I[707087,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/1bpgyrs5qflhu.js","/_next/static/immutable/chunks/0-6vu2ul1h6ld.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"RegistryDependencies"] 65:I[544296,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/1bpgyrs5qflhu.js","/_next/static/immutable/chunks/0-6vu2ul1h6ld.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"ItemStyles"] 66:I[8513,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/1bpgyrs5qflhu.js","/_next/static/immutable/chunks/0-6vu2ul1h6ld.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"ScrollArea"] 67:I[8513,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/1bpgyrs5qflhu.js","/_next/static/immutable/chunks/0-6vu2ul1h6ld.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"ScrollBar"] 68:I[314491,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/1bpgyrs5qflhu.js","/_next/static/immutable/chunks/0-6vu2ul1h6ld.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"FilesView"] 69:T2bb1,"use client"; import { useEffect, useId, useRef, useState, type ChangeEvent, type ReactNode, } from "react"; // --------------------------------------------------------------------------- // NibCheck — a checkbox (and tri-state parent) whose mark is inked on by a // variable-width calligraphic stroke: thin entry, a thick corner flick, and a // hair of overshoot past the natural tip. The three states — unchecked, // checked, indeterminate — read as three distinct pen gestures rather than a // check, a smaller check, and a minus. // // GEOMETRY: the check is one filled ribbon path built once at module scope by // offsetting a hand-placed spine polyline with a per-point half-width (thin // at the entry, widest right at the corner, tapering through the flick to a // hairline overshoot tip) — see buildRibbon. Interior normals average their // two adjacent segment normals, so the sharp direction change at the corner // naturally bulges on the convex side and pinches on the concave one, like // ink pooling as a pen changes direction. Indeterminate draws a separate, // simpler fat rounded dash — not a shrunk-down check. // // REVEAL: both ink shapes sit under a left-anchored CSS clip-path (inset, // fill-box) that transitions from fully clipped to fully revealed over // ~220ms ease-out-expo, reading as ink drawn left-to-right: entry, corner, // tip. Unchecking reverses the same clip back toward the entry edge — ink // retracts — and a small dot at the entry point pops in and fades once // retraction finishes. The box's own corner radius relaxes 2px on check, with // a small imperative class-toggle "pop" (restarted without remounting, so // focus never moves) standing in for the flick's ~4% overshoot. // // A11Y: a real input[type=checkbox] carries checked/indeterminate/disabled // and all native keyboard + AT semantics; it is visually hidden (opacity: 0, // sized to cover the box) but stays in the tab order and keeps focus — never // aria-hidden. The SVG ink is aria-hidden. Colors: ink is --foreground, the // box border is --border; --ns-accent appears only in the focus ring. // prefers-reduced-motion disables every transition/animation here, so the // final ink for the current state is simply present or absent, instantly. // --------------------------------------------------------------------------- type Pt = readonly [number, number]; function normalize(v: Pt): Pt { const len = Math.hypot(v[0], v[1]) || 1; return [v[0] / len, v[1] / len]; } // rotate a direction vector 90 degrees (SVG's y-down space) function perp(v: Pt): Pt { return [-v[1], v[0]]; } /** * Offsets a spine polyline by a per-point half-width to build a closed, * filled ribbon outline — the calligraphic nib's variable-width stroke. */ function buildRibbon(spine: Pt[], halfWidth: number[]): string { const n = spine.length; const segNormals: Pt[] = []; for (let i = 0; i < n - 1; i++) { const dx = spine[i + 1]![0] - spine[i]![0]; const dy = spine[i + 1]![1] - spine[i]![1]; segNormals.push(normalize(perp([dx, dy]))); } const ptNormals: Pt[] = spine.map((_, i) => { if (i === 0) return segNormals[0]!; if (i === n - 1) return segNormals[n - 2]!; const a = segNormals[i - 1]!; const b = segNormals[i]!; return normalize([a[0] + b[0], a[1] + b[1]]); }); const left = spine.map((p, i) => [ p[0] + ptNormals[i]![0] * halfWidth[i]!, p[1] + ptNormals[i]![1] * halfWidth[i]!, ]); const right = spine.map((p, i) => [ p[0] - ptNormals[i]![0] * halfWidth[i]!, p[1] - ptNormals[i]![1] * halfWidth[i]!, ]); const fmt = (p: number[]) => `${p[0]!.toFixed(2)},${p[1]!.toFixed(2)}`; let d = `M${fmt(left[0]!)}`; for (let i = 1; i < n; i++) d += ` L${fmt(left[i]!)}`; for (let i = n - 1; i >= 0; i--) d += ` L${fmt(right[i]!)}`; return `${d} Z`; } // spine: entry (bottom-left, thin) -> corner (thick flick) -> tip, with a // small overshoot past the corner's natural stopping point at the very end const SPINE: Pt[] = [ [4, 12.4], [7.6, 15.6], [9.7, 18], [12.3, 15.1], [15.2, 11.5], [18.1, 8], [19.7, 6.1], ]; const HALF_WIDTH = [0.55, 1.05, 1.7, 1.55, 1.15, 0.7, 0.35]; const CHECK_PATH = buildRibbon(SPINE, HALF_WIDTH); const ENTRY: Pt = SPINE[0]!; // indeterminate: a single fat rounded dash, not a shrunk checkmark const DASH = { x: 6, y: 10.6, width: 12, height: 2.8, rx: 1.4 }; export type NibCheckValue = boolean | "indeterminate"; export interface NibCheckProps { /** controlled value; omit for uncontrolled. "indeterminate" is visual/AT only — the underlying value is boolean */ checked?: NibCheckValue; /** initial value when uncontrolled. Default false. */ defaultChecked?: NibCheckValue; /** called with the resolved boolean after a toggle; never fires "indeterminate" */ onCheckedChange?: (checked: boolean) => void; /** blocks the input and mutes the box; the label cursor becomes not-allowed */ disabled?: boolean; /** visible label; also becomes the accessible name via native label association */ label?: ReactNode; /** id for the underlying ``. Auto-generated when omitted. */ id?: string; /** name for the underlying ``, for native form submission */ name?: string; /** value for the underlying ``, for native form submission */ value?: string; /** extra classes merged onto the rendered root element */ className?: string; /** accessible name for the input, used only when `label` is omitted */ "aria-label"?: string; } export function NibCheck({ checked, defaultChecked = false, onCheckedChange, disabled = false, label, id, name, value, className = "", "aria-label": ariaLabel, }: NibCheckProps) { const autoId = useId(); const inputId = id ?? `checkbox-ink-stroke-${autoId}`; const inputRef = useRef(null); const boxRef = useRef(null); const reducedRef = useRef(false); const isControlled = checked !== undefined; const [internal, setInternal] = useState(defaultChecked); const current = isControlled ? checked! : internal; const state: "checked" | "unchecked" | "indeterminate" = current === "indeterminate" ? "indeterminate" : current ? "checked" : "unchecked"; const [dotTick, setDotTick] = useState(0); const [showDot, setShowDot] = useState(false); const prevStateRef = useRef(state); useEffect(() => { reducedRef.current = window.matchMedia( "(prefers-reduced-motion: reduce)" ).matches; }, []); // native indeterminate is a DOM property, not an attribute useEffect(() => { if (inputRef.current) inputRef.current.indeterminate = state === "indeterminate"; }, [state]); // fading entry dot only when ink actually retracts (checked/indeterminate -> unchecked) useEffect(() => { const prev = prevStateRef.current; if (prev !== "unchecked" && state === "unchecked" && !reducedRef.current) { setDotTick((t) => t + 1); setShowDot(true); } prevStateRef.current = state; }, [state]); // restart the box's small settle-pop each time the check lands — an // imperative class-toggle restart, not a remount, so the input never loses focus useEffect(() => { const el = boxRef.current; if (!el || reducedRef.current || state !== "checked") return; el.classList.remove("ns-nib-pop"); void el.offsetWidth; el.classList.add("ns-nib-pop"); }, [state]); const handleChange = (e: ChangeEvent) => { const next = e.target.checked; if (!isControlled) setInternal(next); onCheckedChange?.(next); }; return ( {label && ( {label} )} ); } 63:["$","div",null,{"className":"mt-3 flex min-h-0 min-w-0 flex-1 flex-col gap-3","children":[["$","div",null,{"className":"flex shrink-0 items-start gap-3","children":[["$","div",null,{"className":"flex max-h-28 min-w-0 flex-1 flex-wrap items-center gap-2 overflow-y-auto","children":[null,["$","$L64",null,{"namespace":"@registrydirectory","registryDependencies":[]}]]}],["$","$L65",null,{"children":["$","div",null,{"className":"@container","children":["$","div",null,{"className":"grid grid-cols-1 gap-4 @xl:grid-cols-2","children":[["$","div",null,{"className":"flex flex-col border rounded-md","children":[["$","p",null,{"className":"text-sm font-medium border-b p-2","children":"Light Mode"}],["$","div",null,{"children":["$","$L66",null,{"type":"always","className":"h-80 px-2","children":[["$","div",null,{"className":"gap-2 pb-8 flex flex-col pt-4","children":[["$","div","ns-accent",{"className":"items-start gap-1 grid grid-cols-2 text-sm","children":[["$","div",null,{"className":"hover:bg-muted/50 py-2","children":["$","p",null,{"className":"text-foreground/80 text-sm","children":["--","ns-accent",":"]}]}],["$","div",null,{"className":"hover:bg-muted/50 py-2 px-1 rounded-md w-full","children":"#006bff"}]]}]]}],["$","$L67",null,{"orientation":"horizontal"}]]}]}]]}],null,["$","div",null,{"className":"flex flex-col border rounded-md","children":[["$","p",null,{"className":"text-sm font-medium border-b p-2","children":"Theme"}],["$","div",null,{"children":["$","$L66",null,{"type":"always","className":"h-80 px-2","children":[["$","div",null,{"className":"gap-2 pb-8 flex flex-col pt-4","children":[["$","div","color-ns-accent",{"className":"items-start gap-1 grid grid-cols-2 text-sm","children":[["$","div",null,{"className":"hover:bg-muted/50 py-2","children":["$","p",null,{"className":"text-foreground/80 text-sm","children":["--","color-ns-accent",":"]}]}],["$","div",null,{"className":"hover:bg-muted/50 py-2 px-1 rounded-md w-full","children":"var(--ns-accent)"}]]}]]}],["$","$L67",null,{"orientation":"horizontal"}]]}]}]]}],null]}]}]}]]}],["$","$L68",null,{"files":[{"path":"registry/core/checkbox-ink-stroke/component.tsx","content":"$69","type":"registry:ui","target":"components/ui/checkbox-ink-stroke.tsx"}],"className":"h-[70svh] min-h-80"}]]}]