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:T287e,"use client"; import { useEffect, useId, useRef, useState } from "react"; // --------------------------------------------------------------------------- // RemontoireRewind — a sync/upload progress strip driven by a constant-force // remontoire instead of a plain glide. In a real remontoire d'egalite (e.g. // Harrison's regulators) a small secondary spring is slowly wound by the // mainspring, then trips and dumps ONE calibrated, constant-force release // into the escapement, over and over — the escapement only ever feels the // remontoire's flat repeated kick, never the mainspring's decaying torque. // Here the spring glyph (an SVG coil, drawn fresh each frame as a sampled // sine path so its pitch reads continuously, not as a swapped sprite) winds // tighter — 5 visible turns compressing to 2 — over a slow "wind" phase, // then snaps back out to 5 with one small overshoot on "trip". The bar // underneath mirrors the same two-speed rhythm: a near-invisible 0.3%/s // creep through the wind, then a fixed 6% kick — ~20x the creep rate — in // the same instant the spring releases, so trip reads as a distinct payoff // and never blurs into the creep. A brighter leading-edge segment (a pure // --foreground luminance lift, never --ns-accent) flashes on that kick and // eases back to the fill's resting opacity over 150ms. // // One real-time cycle = 3.2s (2.9s wind + 0.3s trip), compressed ~9.4x from // a typical 30s precision-clock rearm interval — a discrete event, not a // continuous oscillation, so it sits clear of any paint-rate aliasing band. // The whole thing runs on one rAF loop keyed off real elapsed time (never // frame count), self-driven, unbounded — nothing here waits on input. // // Optional controlled `value` (0-100) lets this sit on a real transfer: the // bar's overall width then tracks `value` directly and the wind/trip cycle // keeps running underneath purely as "work is happening" chrome layered on // top, never touching the actual fill width itself. // --------------------------------------------------------------------------- const WIND_MS = 2900; const TRIP_MS = 300; const CYCLE_MS = WIND_MS + TRIP_MS; const CREEP_PCT_PER_MS = 0.3 / 1000; // 0.3%/s const TRIP_JUMP_PCT = 6; const WIND_EASE_POWER = 1.6; // ease-in: slow start, accelerating tighten const TURNS_RELAXED = 5; const TURNS_WOUND = 2; const FLASH_MS = 150; const TRIP_BEZIER: [number, number, number, number] = [0.2, 1.4, 0.4, 1]; // one small overshoot function clamp(n: number, lo: number, hi: number) { return Math.max(lo, Math.min(hi, n)); } function bez1d(u: number, a: number, b: number, c: number, d: number) { const mu = 1 - u; return mu * mu * mu * a + 3 * mu * mu * u * b + 3 * mu * u * u * c + u * u * u * d; } // Solves x(u) = t for a cubic bezier anchored at (0,0)/(1,1) via bisection // (x is monotonic since p1x/p2x sit in [0,1]), returns y(u) — which CAN // exceed 1 mid-curve when a control point's y does, giving the overshoot. function cubicBezierEase(t: number, [p1x, p1y, p2x, p2y]: [number, number, number, number]) { let lo = 0; let hi = 1; let u = t; for (let i = 0; i < 20; i++) { u = (lo + hi) / 2; const x = bez1d(u, 0, p1x, p2x, 1); if (x < t) lo = u; else hi = u; } return bez1d(u, 0, p1y, p2y, 1); } // Samples the coil as a plain sine wave across a 0-100 x span and returns an // SVG path `d`. `turns` is the (continuous) number of full periods visible — // fewer turns at the same span reads as coils bunched/compressed together, // more turns reads as the loose, fully relaxed spring. function springPath(turns: number, amplitude: number, samples: number) { let d = ""; for (let i = 0; i <= samples; i++) { const x = (i / samples) * 100; const y = 12 + amplitude * Math.sin((i / samples) * turns * Math.PI * 2); d += i === 0 ? `M${x.toFixed(2)} ${y.toFixed(2)}` : `L${x.toFixed(2)} ${y.toFixed(2)}`; } return d; } function useReducedMotion() { const [reduced, setReduced] = useState(false); useEffect(() => { const mq = window.matchMedia("(prefers-reduced-motion: reduce)"); setReduced(mq.matches); const onChange = () => setReduced(mq.matches); mq.addEventListener("change", onChange); return () => mq.removeEventListener("change", onChange); }, []); return reduced; } export interface RemontoireRewindProps { /** real transfer progress, 0-100. Omit to let the remontoire drive its own idle loop. */ value?: number; /** visible + accessible label, e.g. "Syncing workspace" (default "Sync progress") */ label?: string; /** extra classes merged onto the rendered root element */ className?: string; } export function RemontoireRewind({ value, label = "Sync progress", className = "" }: RemontoireRewindProps) { const uid = useId(); const labelId = `${uid}-label`; const reduced = useReducedMotion(); const rootRef = useRef(null); const springRef = useRef(null); const fillRef = useRef(null); const flashRef = useRef(null); const controlledValueRef = useRef(value); controlledValueRef.current = value; useEffect(() => { const root = rootRef.current; const spring = springRef.current; const fill = fillRef.current; const flash = flashRef.current; if (!root || !spring || !fill || !flash) return; let disposed = false; let visible = true; let raf = 0; // uncontrolled accumulation: how much of the strip the remontoire itself // has "delivered" so far this wrap, independent of any controlled value. let internalFill = 0; let fillAtTripStart = 0; let cycleStart = 0; let lastPhase: "wind" | "trip" = "wind"; const paint = (now: number) => { let elapsed = now - cycleStart; if (elapsed >= CYCLE_MS) { const wraps = Math.floor(elapsed / CYCLE_MS); cycleStart += wraps * CYCLE_MS; elapsed -= wraps * CYCLE_MS; } let turns: number; let tripped = false; if (elapsed < WIND_MS) { const t = elapsed / WIND_MS; turns = TURNS_RELAXED - (TURNS_RELAXED - TURNS_WOUND) * Math.pow(t, WIND_EASE_POWER); if (lastPhase === "trip") { // just re-entered wind on a fresh cycle: lock in the post-trip baseline fillAtTripStart = internalFill; } lastPhase = "wind"; internalFill = fillAtTripStart + elapsed * CREEP_PCT_PER_MS; } else { const t = clamp((elapsed - WIND_MS) / TRIP_MS, 0, 1); const eased = cubicBezierEase(t, TRIP_BEZIER); turns = TURNS_WOUND + (TURNS_RELAXED - TURNS_WOUND) * eased; if (lastPhase === "wind") fillAtTripStart = internalFill; lastPhase = "trip"; const jumpEase = 1 - Math.pow(1 - t, 3); // ease-out, distinct kick internalFill = fillAtTripStart + jumpEase * TRIP_JUMP_PCT; tripped = t >= 1; } if (internalFill >= 100) internalFill -= 100; // seamless wrap, no pause at the seam const controlled = controlledValueRef.current; const displayFill = controlled === undefined ? internalFill : clamp(controlled, 0, 100); spring.setAttribute("d", springPath(turns, 4.5, 48)); fill.style.width = `${displayFill}%`; if (tripped) { flash.style.transition = "none"; flash.style.opacity = "1"; // next frame: ease the flash back down over FLASH_MS requestAnimationFrame(() => { if (disposed) return; flash.style.transition = `opacity ${FLASH_MS}ms ease-out`; flash.style.opacity = "0"; }); } }; const loop = (now: number) => { if (!visible) { raf = 0; return; } paint(now); raf = requestAnimationFrame(loop); }; if (reduced) { // Deliberately chosen non-t0, most-structured freeze: mid-wind (turns // clearly between fully coiled and fully tripped) with the bar sitting // just after a trip-jump, so it reads as "a mechanism mid-cycle". spring.setAttribute("d", springPath(3.5, 4.5, 48)); const controlled = controlledValueRef.current; fill.style.width = `${controlled === undefined ? 46 : clamp(controlled, 0, 100)}%`; flash.style.transition = "none"; flash.style.opacity = "0.55"; } else { cycleStart = performance.now(); raf = requestAnimationFrame(loop); } const io = new IntersectionObserver((entries) => { visible = entries[0]?.isIntersecting ?? true; if (visible && !reduced && !raf) raf = requestAnimationFrame(loop); }); io.observe(root); return () => { disposed = true; cancelAnimationFrame(raf); raf = 0; io.disconnect(); }; // eslint-disable-next-line react-hooks/exhaustive-deps -- `value` is read live via controlledValueRef, not a loop dependency }, [reduced]); const valueNow = value === undefined ? undefined : Math.round(clamp(value, 0, 100)); return (

{label} {valueNow !== undefined ? ( {valueNow}% ) : null}

); } 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/remontoire-rewind/component.tsx","content":"$69","type":"registry:ui","target":"components/ui/remontoire-rewind.tsx"}],"className":"h-[70svh] min-h-80"}]]}]