63: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"] 64: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"] 65: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"] 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"],"ScrollBar"] 67: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"] 68:T2703,"use client"; import { useEffect, useId, useRef, useState } from "react"; // --------------------------------------------------------------------------- // WickRun — a determinate progress bar that advances by capillary action // instead of gliding. True progress sets a `target`; the visible fill chases // it in discrete draws (quick pull, slowing soak, brief dwell, next pull), // each draw closing ~60% of the remaining gap with ease-out-expo over 300ms // then holding 150ms — an asymptotic approach that re-aims itself whenever // the target moves mid-draw. A second element at --foreground, low opacity, // rides 4-10px ahead of the true fill edge during each draw (its lead // collapsing to ~0 through the dwell) as a faint wet-front preview of where // the fill is about to reach. Widths/positions are written as CSS custom // properties (`--wick-fill`, `--wick-front`) from one rAF loop that sleeps // the instant the gap closes, and wakes again only when `value` moves. // Indeterminate mode drops the fill and sends the front pill alone down the // track in the same draw-dwell cadence, slowed down, looping. `aria-valuenow` // tracks the TRUE `value` directly every render — never the eased display — // so a screen reader is never behind the animation; milestone crossings // (25/50/75/100) are announced through a separate polite live region, and a // Geist Mono percentage sits beside the track so the reading never depends // on the bar alone. Reduced motion strips the wet front and the draws // collapse to a single 150ms linear width transition per update. // --------------------------------------------------------------------------- const DRAW_MS = 300; const DWELL_MS = 150; const DRAW_FRACTION = 0.6; // each draw closes 60% of the remaining gap const SETTLE_EPS = 0.05; // percent — below this the run is "arrived" const SLOW_DRAW_MS = 480; const SLOW_DWELL_MS = 260; const SLOW_SETTLE_EPS = 2; // looser: indeterminate resets before crawling the last % const TRAVEL_START = -16; // % — front pill starts just off the left edge const TRAVEL_END = 116; // % — and exits just off the right edge const MILESTONES = [25, 50, 75, 100]; function clamp(n: number, lo: number, hi: number) { return Math.max(lo, Math.min(hi, n)); } function easeOutExpo(t: number) { return t >= 1 ? 1 : 1 - Math.pow(2, -10 * t); } 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 WickRunProps { /** true progress, 0-100 (controlled). Ignored while `indeterminate` is set. */ value?: number; /** unknown-duration mode: the wet front alone travels the track in slow draws, no fill */ indeterminate?: boolean; /** visible + accessible label, e.g. "Uploading assets.zip" (default "Progress") */ label?: string; /** announce 25/50/75/100% crossings via a polite live region (default true) */ announceMilestones?: boolean; /** extra classes merged onto the rendered root element */ className?: string; } export function WickRun({ value = 0, indeterminate = false, label = "Progress", announceMilestones = true, className = "", }: WickRunProps) { const uid = useId(); const labelId = `${uid}-label`; const reduced = useReducedMotion(); const trackRef = useRef(null); const retargetRef = useRef<((v: number) => void) | null>(null); const lastMilestoneRef = useRef(0); const [announce, setAnnounce] = useState(""); const clampedValue = clamp(value, 0, 100); // Milestone announcements read the TRUE value directly, decoupled from the // rAF loop entirely, so assistive tech is never a beat behind the fill. useEffect(() => { if (indeterminate || !announceMilestones) return; if (clampedValue < lastMilestoneRef.current) lastMilestoneRef.current = 0; for (const m of MILESTONES) { if (clampedValue >= m && lastMilestoneRef.current < m) { lastMilestoneRef.current = m; setAnnounce(m === 100 ? "Complete" : `${m}% complete`); } } }, [clampedValue, indeterminate, announceMilestones]); // Engine: mounts once per indeterminate/reduced-motion combination, then // sleeps between updates. A separate effect below feeds it every `value` // change through `retargetRef` without re-running this setup. useEffect(() => { const track = trackRef.current; if (!track) return; if (reduced) { // Reduced motion: no rAF, no wet front (never rendered, see JSX) — a // plain width write lands on the CSS `transition: width 150ms linear` // declared below, so every update glides once, linearly, and stops. // Indeterminate has nothing to animate under reduced motion, so it // paints one static partial bar rather than an uninformative 0-width // track — `aria-valuetext` still carries the real "in progress" state. if (indeterminate) { track.style.setProperty("--wick-fill", "35%"); return; } const paint = (v: number) => { track.style.setProperty("--wick-fill", `${clamp(v, 0, 100)}%`); }; paint(clampedValue); retargetRef.current = paint; return () => { retargetRef.current = null; }; } let raf = 0; let trackW = track.clientWidth || 1; let phase: "draw" | "dwell" | "idle" = "idle"; let phaseStart = 0; let display = indeterminate ? TRAVEL_START : 0; let target = indeterminate ? TRAVEL_END : clampedValue; let drawFrom = display; let drawTo = display; const drawMs = indeterminate ? SLOW_DRAW_MS : DRAW_MS; const dwellMs = indeterminate ? SLOW_DWELL_MS : DWELL_MS; const eps = indeterminate ? SLOW_SETTLE_EPS : SETTLE_EPS; const pxToPct = (px: number) => (px / trackW) * 100; const beginDraw = (now: number) => { const gap = target - display; drawFrom = display; drawTo = display + gap * DRAW_FRACTION; phase = "draw"; phaseStart = now; }; const paint = (fillPct: number, leadPct: number) => { const fill = clamp(fillPct, 0, 100); track.style.setProperty("--wick-fill", `${indeterminate ? 0 : fill}%`); const frontPos = indeterminate ? fillPct : fill + leadPct; track.style.setProperty("--wick-front", `${frontPos}%`); }; const loop = (now: number) => { if (phase === "idle" && Math.abs(target - display) > eps) beginDraw(now); let leadPct = 0; if (phase === "draw") { const p = clamp((now - phaseStart) / drawMs, 0, 1); display = drawFrom + (drawTo - drawFrom) * easeOutExpo(p); if (!indeterminate) leadPct = pxToPct(10 - 6 * p); // quick pull -> slowing soak if (p >= 1) { display = drawTo; phase = "dwell"; phaseStart = now; } } else if (phase === "dwell") { const p = clamp((now - phaseStart) / dwellMs, 0, 1); if (!indeterminate) leadPct = pxToPct(4 * (1 - p)); // front settles back onto the fill if (p >= 1) { const gap = target - display; if (Math.abs(gap) <= eps) { display = indeterminate ? TRAVEL_START : target; phase = "idle"; } else { phase = "idle"; // re-aim next tick against the latest target } } } paint(display, leadPct); const settled = !indeterminate && phase === "idle" && Math.abs(target - display) <= eps; raf = settled ? 0 : requestAnimationFrame(loop); }; const wake = () => { if (!raf) raf = requestAnimationFrame(loop); }; retargetRef.current = (v: number) => { if (indeterminate) return; target = clamp(v, 0, 100); wake(); }; wake(); const ro = new ResizeObserver(() => { trackW = track.clientWidth || 1; }); ro.observe(track); return () => { cancelAnimationFrame(raf); ro.disconnect(); retargetRef.current = null; }; // eslint-disable-next-line react-hooks/exhaustive-deps -- clampedValue read once at mount, then fed via retargetRef }, [indeterminate, reduced]); useEffect(() => { retargetRef.current?.(clampedValue); }, [clampedValue]); const valueText = indeterminate ? "In progress" : `${Math.round(clampedValue)}%`; return (

{label} {!indeterminate ? ( {Math.round(clampedValue)}% ) : null}

{!reduced ? (

) : null}

{announceMilestones && !indeterminate ? ( {announce} ) : null}

); } 62:["$","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,["$","$L63",null,{"namespace":"@registrydirectory","registryDependencies":[]}]]}],["$","$L64",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":["$","$L65",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"}]]}]]}],["$","$L66",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":["$","$L65",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"}]]}]]}],["$","$L66",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":["$","$L65",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)"}]]}]]}],["$","$L66",null,{"orientation":"horizontal"}]]}]}]]}],null]}]}]}]]}],["$","$L67",null,{"files":[{"path":"registry/core/progress-wick/component.tsx","content":"$68","type":"registry:ui","target":"components/ui/progress-wick.tsx"}],"className":"h-[70svh] min-h-80"}]]}]