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:T42b6,"use client"; import { useCallback, useEffect, useId, useMemo, useRef, useState, type KeyboardEvent as ReactKeyboardEvent, type PointerEvent as ReactPointerEvent, } from "react"; // --------------------------------------------------------------------------- // PawlTick — autosave status rendered as a mechanical ratchet, not a spinner // or a text swap. A 10-tooth gear (9 teeth in --ns-muted, one index tooth in // --foreground so a one-tooth-width rotation is actually visible against the // gear's own 10-fold symmetry) sits under a fixed pawl triangle. Every // SUCCESSFUL save advances the gear exactly one tooth-width and folds into a // silent running tally; the position is cosmetic (it wraps every 10 saves), // the count and timestamp are the real record and live in the tooltip text. // // Motion is three distinct, non-looping events, all direct-DOM CSS-transform // writes on two SVG refs (no React state on the hot path): // - save-start ("saving"): a small anticipation backswing, winding the // wheel back against the pawl before the outcome is known. // - ack ("saved"): a 200ms ease-out-expo spring settle forward past the // wind-up to the next tooth. Count++, timestamp stamped, wind-up cleared. // - failure ("error"): the pawl slips — the wheel kicks back half a tooth // from its last good seat (not from wherever the wind-up left it, so // repeated failures hold the same broken pose rather than unraveling // further) and the pawl itself lifts off and thickens to 2px // --foreground. That pose holds — no loop — until the next successful // save resolves it. // // Accessibility: a dedicated sr-only span (not the whole wrapper) is the // status live region — role=status/aria-live=polite/aria-atomic=true on // just that span, so re-reading it atomically never picks up the button's // label or an open tooltip's duplicated text, and hovering the tooltip // (marked aria-live=off) can never itself trigger a spurious announcement. // "Saving"/"Saved" chatter is throttled to at most one shared announcement // per 30s so a bursty autosave doesn't spam a screen reader; "Save failed" // always announces and resets that throttle window so the next resolution // is guaranteed to announce too. The gear is aria-hidden; the only focusable // element is the button that doubles as the tooltip trigger (hover or focus // reveals a Geist Mono panel that duplicates every fact as text — status, // session count, time since the last successful save), and Escape closes // it. The failed state additionally renders the plain visible words // "Not saved" beside the wheel, so the state is never carried by the // graphic alone. prefers-reduced-motion drops the wind-up anticipation // entirely (pure flourish, no state of its own), but ack and failure keep a // short 140ms linear settle rather than jumping straight to their resolved // angle — the wheel's position is the only passive signal a save just // landed, so it still has to visibly move. // --------------------------------------------------------------------------- export type PawlTickStatus = "idle" | "saving" | "saved" | "error"; export interface PawlTickProps { /** * Current autosave status. Transitions drive everything: idle/saved/error * -> "saving" plays the anticipation wind-up; "saving" -> "saved" advances * one tooth with a spring settle and folds into the session tally; * any -> "error" plays the pawl-slip kick-back and holds until the next * "saved". */ status: PawlTickStatus; /** Gear glyph size in px. Default 20. */ size?: number; /** extra classes merged onto the rendered root element */ className?: string; } const TOOTH_COUNT = 10; const TOOTH_DEG = 360 / TOOTH_COUNT; const ANTICIPATE_DEG = 8; const FAIL_KICK_DEG = TOOTH_DEG / 2; const EASE_OUT_EXPO = "cubic-bezier(0.16, 1, 0.3, 1)"; const EASE_WINDUP = "cubic-bezier(0.55, 0, 1, 0.45)"; const EASE_KICK = "cubic-bezier(0.7, 0, 0.84, 0)"; const SETTLE_MS = 200; const ANTICIPATE_MS = 130; const KICK_MS = 160; const PAWL_MS = 160; // Reduced motion drops the wind-up anticipation (pure flourish) but keeps a // short, non-eased settle on the ack/fail step itself — the wheel angle is // the only passive signal that a save just landed, so it needs to visibly // move rather than teleport. const REDUCED_MS = 140; const ANNOUNCE_THROTTLE_MS = 30_000; const HOVER_OPEN_DELAY_MS = 400; const TOUCH_AUTOCLOSE_MS = 4000; const TICK_MS = 1000; const CENTER = 12; const R_INNER = 6.2; const R_OUTER = 9.6; interface Tooth { x1: number; y1: number; x2: number; y2: number; index: boolean; } // 10 radial ticks, clock-style, index tooth (the only asymmetric one) at // 12 o'clock — its position is the only thing that makes a one-tooth // rotation of an otherwise 10-fold-symmetric ring visible at all. const TEETH: Tooth[] = Array.from({ length: TOOTH_COUNT }, (_, i) => { const deg = -90 + i * TOOTH_DEG; const rad = (deg * Math.PI) / 180; const cos = Math.cos(rad); const sin = Math.sin(rad); return { x1: CENTER + R_INNER * cos, y1: CENTER + R_INNER * sin, x2: CENTER + R_OUTER * cos, y2: CENTER + R_OUTER * sin, index: i === 0, }; }); // Fixed pawl triangle, apex resting just inside the tooth ring at 12 // o'clock, base above it — never rotates with the wheel. Kept well clear of // the viewBox edge so the thickened+lifted failure pose never clips. const PAWL_PATH = `M ${CENTER} ${CENTER - R_OUTER + 1.2} L ${CENTER - 2.1} ${CENTER - R_OUTER - 0.6} L ${CENTER + 2.1} ${CENTER - R_OUTER - 0.6} Z`; // Returns a complete relative-time phrase ("just now", "5s ago") so callers // never append "ago" themselves — "just now ago" shipped once. function formatAgo(ms: number): string { if (ms < 1000) return "just now"; const s = Math.round(ms / 1000); if (s < 60) return `${s}s ago`; const m = Math.round(s / 60); if (m < 60) return `${m}m ago`; const h = Math.round(m / 60); return `${h}h ago`; } function setWheelAngle(el: SVGGElement | null, deg: number, ms: number, ease: string) { if (!el) return; el.style.transition = ms > 0 ? `transform ${ms}ms ${ease}` : "none"; el.style.transform = `rotate(${deg}deg)`; } function setPawlPose(el: SVGPathElement | null, slipped: boolean, ms: number) { if (!el) return; el.style.transition = ms > 0 ? `transform ${ms}ms ${EASE_OUT_EXPO}, stroke-width ${ms}ms ${EASE_OUT_EXPO}, stroke ${ms}ms linear` : "none"; el.style.transform = slipped ? "translateY(-1.2px)" : "translateY(0)"; el.style.strokeWidth = slipped ? "2" : "1.4"; el.style.stroke = slipped ? "var(--foreground)" : "var(--ns-muted)"; } function buildTooltipText( status: PawlTickStatus, count: number, failed: boolean, lastSavedAt: number | null, now: number ): string { if (failed) { if (count > 0 && lastSavedAt) { return `Save failed. ${count} saved this session, last successful save ${formatAgo(now - lastSavedAt)}.`; } return "Save failed. No successful saves yet this session."; } if (status === "saving") return "Saving…"; if (count === 0) return "No saves yet this session."; const times = count === 1 ? "time" : "times"; return `Saved ${count} ${times}, last ${formatAgo(now - (lastSavedAt ?? now))}.`; } export function PawlTick({ status, size = 20, className = "" }: PawlTickProps) { const autoId = useId(); const tooltipId = `autosave-ratchet-tip-${autoId.replace(/:/g, "")}`; const rootRef = useRef(null); const wheelRef = useRef(null); const pawlRef = useRef(null); const reducedRef = useRef(false); const prevStatusRef = useRef(status); const angleRef = useRef(0); // angle currently applied to the wheel const successBaseRef = useRef(0); // angle of the last confirmed good seat const lastSavedAtRef = useRef(null); const lastRoutineAnnounceRef = useRef(0); const parityRef = useRef(false); const [count, setCount] = useState(0); const [failed, setFailed] = useState(false); const [announceText, setAnnounceText] = useState(""); const [open, setOpen] = useState(false); const [now, setNow] = useState(() => Date.now()); const hoverRef = useRef(false); const focusRef = useRef(false); const viaTouchRef = useRef(false); const openTimerRef = useRef(undefined); useEffect(() => { const mq = window.matchMedia("(prefers-reduced-motion: reduce)"); reducedRef.current = mq.matches; const onChange = () => { reducedRef.current = mq.matches; }; mq.addEventListener("change", onChange); return () => mq.removeEventListener("change", onChange); }, []); const announce = useCallback((message: "Saving" | "Saved" | "Save failed", force: boolean) => { const at = Date.now(); if (!force) { if (at - lastRoutineAnnounceRef.current < ANNOUNCE_THROTTLE_MS) return; lastRoutineAnnounceRef.current = at; } else { lastRoutineAnnounceRef.current = 0; // guarantee the next routine announcement also goes through } // A zero-width toggle forces a real text-node change even when the // message text repeats (e.g. two "Save failed" in a row), which is what // actually re-triggers an aria-live announcement. parityRef.current = !parityRef.current; setAnnounceText(message + (parityRef.current ? "" : "")); }, []); useEffect(() => { const prev = prevStatusRef.current; prevStatusRef.current = status; if (prev === status) return; const reduced = reducedRef.current; if (status === "saving") { if (!reduced) { const target = angleRef.current - ANTICIPATE_DEG; setWheelAngle(wheelRef.current, target, ANTICIPATE_MS, EASE_WINDUP); angleRef.current = target; } announce("Saving", false); return; } if (status === "saved") { const target = successBaseRef.current + TOOTH_DEG; setWheelAngle(wheelRef.current, target, reduced ? REDUCED_MS : SETTLE_MS, reduced ? "linear" : EASE_OUT_EXPO); angleRef.current = target; successBaseRef.current = target; setPawlPose(pawlRef.current, false, reduced ? REDUCED_MS : PAWL_MS); setFailed(false); lastSavedAtRef.current = Date.now(); setCount((c) => c + 1); announce("Saved", false); return; } if (status === "error") { const target = successBaseRef.current - FAIL_KICK_DEG; setWheelAngle(wheelRef.current, target, reduced ? REDUCED_MS : KICK_MS, reduced ? "linear" : EASE_KICK); angleRef.current = target; setPawlPose(pawlRef.current, true, reduced ? REDUCED_MS : PAWL_MS); setFailed(true); announce("Save failed", true); return; } // "idle": no motion — a held failure pose stays held until a save // actually resolves it, never on a plain idle transition. }, [status, announce]); // Tick the tooltip's relative timestamp once a second while it's open. useEffect(() => { if (!open) return; setNow(Date.now()); const id = window.setInterval(() => setNow(Date.now()), TICK_MS); return () => window.clearInterval(id); }, [open]); const evaluate = useCallback(() => { const should = hoverRef.current || focusRef.current; if (should && !open) { if (focusRef.current) { window.clearTimeout(openTimerRef.current); setOpen(true); return; } window.clearTimeout(openTimerRef.current); openTimerRef.current = window.setTimeout(() => setOpen(true), HOVER_OPEN_DELAY_MS); } else if (!should) { window.clearTimeout(openTimerRef.current); if (open) setOpen(false); } }, [open]); // Escape always closes; a touch-opened peek also gets outside-tap, scroll // and a safety timeout, since touch has no hover to release it on. useEffect(() => { if (!open) return; const onKey = (e: KeyboardEvent) => { if (e.key === "Escape") setOpen(false); }; document.addEventListener("keydown", onKey); let onOutside: ((e: PointerEvent) => void) | undefined; let onScroll: (() => void) | undefined; let safety: number | undefined; if (viaTouchRef.current) { onOutside = (e) => { const t = e.target as Node; if (rootRef.current?.contains(t)) return; setOpen(false); }; onScroll = () => setOpen(false); document.addEventListener("pointerdown", onOutside, true); window.addEventListener("scroll", onScroll, true); safety = window.setTimeout(() => setOpen(false), TOUCH_AUTOCLOSE_MS); } return () => { document.removeEventListener("keydown", onKey); if (onOutside) document.removeEventListener("pointerdown", onOutside, true); if (onScroll) window.removeEventListener("scroll", onScroll, true); if (safety !== undefined) window.clearTimeout(safety); }; }, [open]); useEffect(() => () => window.clearTimeout(openTimerRef.current), []); const tooltipText = useMemo( () => buildTooltipText(status, count, failed, lastSavedAtRef.current, now), // eslint-disable-next-line react-hooks/exhaustive-deps [status, count, failed, now] ); return ( {/* The announcer, not the whole wrapper, is the live region: it holds only the throttled status message, so aria-atomic re-reading it on every change never picks up the button's label or an open tooltip's duplicated text along with it. */} {announceText} {failed && ( )} {open && ( )} ); } const CSS = ` .ns-pt-wheel{transform-box:fill-box;transform-origin:center;} .ns-pt-pawl{transform-box:fill-box;transform-origin:center;} @media (prefers-reduced-motion: reduce){ .ns-pt-wheel,.ns-pt-pawl{transition-duration:140ms !important;transition-timing-function:linear !important;} } `; 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-muted",{"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-muted",":"]}]}],["$","div",null,{"className":"hover:bg-muted/50 py-2 px-1 rounded-md w-full","children":"#4d4d4d"}]]}],["$","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"}]]}]}]]}],["$","div",null,{"className":"flex flex-col border rounded-md","children":[["$","p",null,{"className":"text-sm font-medium border-b p-2","children":"Dark 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-muted",{"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-muted",":"]}]}],["$","div",null,{"className":"hover:bg-muted/50 py-2 px-1 rounded-md w-full","children":"#8f8f8f"}]]}]]}],["$","$L67",null,{"orientation":"horizontal"}]]}]}]]}],["$","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-muted",{"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-muted",":"]}]}],["$","div",null,{"className":"hover:bg-muted/50 py-2 px-1 rounded-md w-full","children":"var(--ns-muted)"}]]}],["$","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/autosave-ratchet/component.tsx","content":"$69","type":"registry:ui","target":"components/ui/autosave-ratchet.tsx"}],"className":"h-[70svh] min-h-80"}]]}]