50: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/3j06ow7w40nxu.js","/_next/static/immutable/chunks/31nn7jwsjvqii.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"] 51: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/3j06ow7w40nxu.js","/_next/static/immutable/chunks/31nn7jwsjvqii.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"] 52:T2884,"use client"; import { duration, ease } from "@/lib/motion"; import { cn } from "@/lib/utils"; import { cva, type VariantProps } from "class-variance-authority"; import { animate, motion, type Transition, useMotionValue, useReducedMotion, useTransform, } from "motion/react"; import { Progress as ProgressPrimitive } from "radix-ui"; import { type ComponentProps, useEffect, useRef } from "react"; /* * Progress: how far along a task is, as a bar (Progress) or a ring (ProgressRing), both on Radix Progress * (role="progressbar" with the value, and no value while it's indeterminate). Owner's roadmap, 2026-10-16. * Give each a name with aria-label or aria-labelledby. * Motion (.agents/rules/motion.md): * - A new value: the bar's fill slides to it (translateX) and the ring's arc draws to it (pathLength). It rises * continuously, not in parts (owner, 2026-10-21): each change takes as long as the gap since the one before, * at an even pace, so updates that keep coming join into one smooth rise and the fill never stops to wait. * A change after a pause eases in on its own (duration.slow, ease.out). Never a spring: its overshoot would * show more than was done, and past 100 at the end. The first paint shows the value as it is. * - Indeterminate (`value` null or left out): a segment sweeps across the bar; an arc turns round the ring. * Both are transform loops, which motion hands to the Web Animations API (as Spinner does), so they keep * moving while the page is busy. With reduced motion they stop moving and pulse instead, like Spinner. * - ProgressValue, the percentage, counts through every whole number in step with the fill (12, 13, 14…), on * the same timing, so the two never disagree. A deliberate exception to "never a tween through every * number": here the number is the bar read aloud. */ /** Radix's rules: a max above 0 (else 100), a value from 0 to max (clamped here rather than refused) */ function percentOf(value: number | null | undefined, max: number | undefined) { if (value == null || Number.isNaN(value)) return null; const top = max !== undefined && max > 0 ? max : 100; return (Math.min(Math.max(value, 0), top) / top) * 100; } /** Updates closer together than this join into one continuous rise; further apart, each eases in on its own */ const STEADY = duration.slower * 2; /** * How a change to `target` moves: as long as the gap since the last change, at an even pace, while the changes * keep coming; else a quick ease. Progress, its ring and ProgressValue see the same changes at the same moments, * so they keep in step. */ function useFollow(target: number | null, reduce: boolean): Transition { const last = useRef<{ target: number | null; at: number; transition: Transition }>({ target, at: Number.NEGATIVE_INFINITY, transition: { duration: 0 }, }); if (target !== last.current.target) { const now = typeof performance === "undefined" ? 0 : performance.now(); const gap = (now - last.current.at) / 1000; const transition: Transition = reduce ? { duration: 0 } : gap <= STEADY ? { duration: gap, ease: "linear" } : { duration: duration.slow, ease: ease.out }; last.current = { target, at: now, transition }; } return last.current.transition; } /** The indeterminate loops: a calm sweep, and Spinner's pulse with reduced motion */ const sweep = { duration: duration.slower * 3, ease: ease.inOut, repeat: Number.POSITIVE_INFINITY }; const turn = { duration: duration.slower * 3, ease: "linear", repeat: Number.POSITIVE_INFINITY } as const; const pulse = { duration: duration.slower * 3, ease: ease.inOut, repeat: Number.POSITIVE_INFINITY }; export type ProgressProps = ComponentProps; /** * A bar, built on Radix Progress. `value` from 0 to `max` (100); leave it out, or pass null, while there's * no telling how long the task will take. */ function Progress({ className, value, max, ...props }: ProgressProps) { const percent = percentOf(value, max); const top = max !== undefined && max > 0 ? max : 100; const reduce = useReducedMotion() ?? false; const follow = useFollow(percent, reduce); return ( {percent === null ? ( {/* A segment 40% of the track wide, from just off the start to just off the end (250% of itself) */} ) : ( )} ); } const progressRingVariants = cva("relative inline-flex shrink-0 items-center justify-center text-primary", { variants: { size: { sm: "size-(--size-icon-lg)", md: "size-(--size-control-lg)", lg: "size-16 text-sm", }, }, defaultVariants: { size: "md" }, }); /** Stroke widths on the 24-unit drawing, so the line is about 2.5, 3.3 and 4px at 20, 40 and 64px */ const strokes = { sm: 3, md: 2, lg: 1.5 } as const; export type ProgressRingProps = Omit, "children"> & VariantProps & { /** Shows the percentage in the middle, rolling as it changes (md and lg) */ showValue?: boolean; }; /** * A ring, built on Radix Progress: the same `value` and `max` as Progress, drawn as an arc that goes round * from the top. It takes the text colour (text-primary unless you set another). */ function ProgressRing({ className, value, max, size, showValue = false, ...props }: ProgressRingProps) { const percent = percentOf(value, max); const top = max !== undefined && max > 0 ? max : 100; const reduce = useReducedMotion() ?? false; const ring = size ?? "md"; const stroke = strokes[ring]; const radius = 12 - stroke / 2; const indeterminate = percent === null; const loop = !indeterminate ? "still" : reduce ? "pulse" : "turn"; const follow = useFollow(percent, reduce); return ( {/* The drawing turns inside the still root, so nothing passed to the ring turns with it */} {showValue && percent !== null && ring !== "sm" ? ( // Positioned, so it paints above the drawing rather than under it ) : null} ); } export type ProgressValueProps = Omit, "children"> & { /** The same value and max as the Progress it labels */ value?: number | null; max?: number; }; /** * The percentage as text, for beside a bar or inside a ring. It counts to a new value in step with the fill. * Hidden from screen readers: the progressbar already says its value. */ function ProgressValue({ value, max, className, ...props }: ProgressValueProps) { const percent = percentOf(value, max); const reduce = useReducedMotion() ?? false; const follow = useFollow(percent, reduce); const count = useMotionValue(percent ?? 0); const shown = useTransform(count, (current) => Math.round(current)); useEffect(() => { if (percent === null) return; const counting = animate(count, percent, follow); return () => counting.stop(); }, [percent, follow, count]); if (percent === null) return null; return ( {shown} % ); } export { Progress, ProgressRing, ProgressValue, progressRingVariants }; 4f:["$","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":[["$","ul",null,{"className":"flex min-w-0 flex-wrap gap-2","aria-label":"Package dependencies","children":[["$","li","class-variance-authority@^0.7.1",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/class-variance-authority","target":"_blank","rel":"noopener noreferrer","className":"flex max-w-full min-w-0 items-center gap-1.5 rounded-md border px-2 py-1.5 text-xs","children":[["$","svg",null,{"viewBox":"0 0 24 24","className":"size-3 shrink-0","children":["$","path",null,{"d":"M1.763 0C.786 0 0 .786 0 1.763v20.474C0 23.214.786 24 1.763 24h20.474c.977 0 1.763-.786 1.763-1.763V1.763C24 .786 23.214 0 22.237 0zM5.13 5.323l13.837.019-.009 13.836h-3.464l.01-10.382h-3.456L12.04 19.17H5.113z","fill":"currentColor"}]}],["$","span",null,{"className":"min-w-0 break-all text-xs font-medium","children":"class-variance-authority@^0.7.1"}]]}]}],["$","li","motion@^14.0.0",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/motion","target":"_blank","rel":"noopener noreferrer","className":"flex max-w-full min-w-0 items-center gap-1.5 rounded-md border px-2 py-1.5 text-xs","children":[["$","svg",null,{"viewBox":"0 0 24 24","className":"size-3 shrink-0","children":["$","path",null,{"d":"M1.763 0C.786 0 0 .786 0 1.763v20.474C0 23.214.786 24 1.763 24h20.474c.977 0 1.763-.786 1.763-1.763V1.763C24 .786 23.214 0 22.237 0zM5.13 5.323l13.837.019-.009 13.836h-3.464l.01-10.382h-3.456L12.04 19.17H5.113z","fill":"currentColor"}]}],["$","span",null,{"className":"min-w-0 break-all text-xs font-medium","children":"motion@^14.0.0"}]]}]}],["$","li","radix-ui@^1.7.0",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/radix-ui","target":"_blank","rel":"noopener noreferrer","className":"flex max-w-full min-w-0 items-center gap-1.5 rounded-md border px-2 py-1.5 text-xs","children":[["$","svg",null,{"viewBox":"0 0 24 24","className":"size-3 shrink-0","children":["$","path",null,{"d":"M1.763 0C.786 0 0 .786 0 1.763v20.474C0 23.214.786 24 1.763 24h20.474c.977 0 1.763-.786 1.763-1.763V1.763C24 .786 23.214 0 22.237 0zM5.13 5.323l13.837.019-.009 13.836h-3.464l.01-10.382h-3.456L12.04 19.17H5.113z","fill":"currentColor"}]}],["$","span",null,{"className":"min-w-0 break-all text-xs font-medium","children":"radix-ui@^1.7.0"}]]}]}]]}],["$","$L50",null,{"namespace":"@fewtone","registryDependencies":["https://ui.fewtone.com/r/tokens.json","https://ui.fewtone.com/r/motion.json"]}]]}],null]}],["$","$L51",null,{"files":[{"path":"registry/fewtone/ui/progress.tsx","content":"$52","type":"registry:ui"}],"className":"h-[70svh] min-h-80"}]]}]