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[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"] 65:T10f5,"use client"; import { useId, type ComponentProps, type CSSProperties } from "react"; import { cn } from "./lib/cn"; import "./wavy-progress.css"; export type WavyProgressProps = Omit, "children"> & { /** Amount done. Leave it out while the amount is unknown. */ value?: number; max?: number; /** A bar across its container, or a ring. */ variant?: "linear" | "circular"; /** Diameter of the ring in px. */ size?: number; /** Names the progress for assistive technology. */ label: string; /** Shows the percentage beside the bar or inside the ring. */ showValue?: boolean; }; // One ring of `waves` crests around radius r, as a closed path. function ringPath(r: number, amplitude: number, waves: number, c: number) { const steps = waves * 12; let d = ""; for (let i = 0; i <= steps; i++) { const a = (i / steps) * Math.PI * 2; const rr = r + amplitude * Math.sin(a * waves); d += `${i ? "L" : "M"}${(c + rr * Math.cos(a)).toFixed(2)} ${(c + rr * Math.sin(a)).toFixed(2)}`; } return `${d}Z`; } /** * Progress drawn as a travelling wave: the done part ripples, the rest is a flat track ending in a stop mark. The wave * lies flat once the work is done, and under reduced motion it is a plain bar or ring. Without a value it runs as an * indeterminate sweep. */ export function WavyProgress({ value, max = 100, variant = "linear", size = 48, label, showValue = false, className, style, ...props }: WavyProgressProps) { const id = useId(); const known = value !== undefined; const pct = known ? Math.min(100, Math.max(0, (value / max) * 100)) : 30; const done = known && pct >= 100; const text = `${Math.round(pct)}%`; const a11y = { role: "progressbar", "aria-label": label, "aria-valuemin": 0, "aria-valuemax": max, ...(known ? { "aria-valuenow": value, "aria-valuetext": text } : {}), } as const; if (variant === "circular") { const c = size / 2; const stroke = Math.max(2.5, size / 16); const r = c - stroke - 2; // About one crest every 9px of circumference, low enough to read as a ripple on the ring. const waves = Math.max(8, Math.round((2 * Math.PI * r) / 9)); return (

{showValue && known && {text}}

); } return (

); } 66:T10e3,/* wavy-progress.tsx's styles; it imports this file. Edit freely. */ @layer theme, base, components, utilities; @layer components { /* Wavy progress: the done part is a masked wave of ink that travels; it lies flat when done and under reduced motion. */ [data-slot="wavy-progress"] { color: var(--foreground); --wv-track: color-mix(in oklab, var(--foreground) 14%, transparent); } [data-slot="wavy-progress"] [data-slot="wv-fill"] { position: absolute; inset: 0 auto 0 0; width: var(--wv-pct); transition: width var(--duration-deliberate) var(--ease-out); } [data-slot="wavy-progress"] [data-slot="wv-fill"] > [data-slot="wv-wave"] { position: absolute; inset: 0; background: currentColor; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='12'%3E%3Cpath d='M0 6C4 .8 8 .8 12 6S20 11.2 24 6' fill='none' stroke='%23000' stroke-width='3.4'/%3E%3C/svg%3E") 0 0 / 24px 12px repeat-x; animation: wv-travel 1s linear infinite; transition: opacity var(--duration-deliberate) var(--ease-out); } [data-slot="wavy-progress"] [data-slot="wv-fill"] > [data-slot="wv-flat"] { position: absolute; inset: 4px 0; border-radius: 999px; background: currentColor; opacity: 0; transition: opacity var(--duration-deliberate) var(--ease-out); } [data-slot="wavy-progress"] [data-slot="wv-rest"] { position: absolute; top: 4px; right: 0; bottom: 4px; left: min(100%, calc(var(--wv-pct) + 6px)); border-radius: 999px; background: var(--wv-track); transition: left var(--duration-deliberate) var(--ease-out); } [data-slot="wavy-progress"] [data-slot="wv-rest"]::after { content: ""; position: absolute; top: 0; right: 0; width: 4px; height: 4px; border-radius: 50%; background: currentColor; } [data-slot="wavy-progress"][data-done] [data-slot="wv-wave"] { opacity: 0; } [data-slot="wavy-progress"][data-done] [data-slot="wv-flat"] { opacity: 1; } [data-slot="wavy-progress"][data-done] [data-slot="wv-rest"] { opacity: 0; } [data-slot="wavy-progress"][data-variant="linear"][data-indeterminate] [data-slot="wv-fill"] { width: 34%; animation: wv-sweep 1.6s var(--ease-in-out) infinite; } [data-slot="wavy-progress"][data-variant="linear"][data-indeterminate] [data-slot="wv-rest"] { left: 0; } [data-slot="wavy-progress"][data-variant="linear"][data-indeterminate] [data-slot="wv-rest"]::after { display: none; } [data-slot="wavy-progress"][data-variant="linear"][data-indeterminate] [data-slot="wv-bar"] { overflow: hidden; } [data-slot="wavy-progress"][data-variant="circular"] > svg { rotate: -90deg; overflow: visible; } [data-slot="wavy-progress"] [data-slot="wv-track"] { stroke: var(--wv-track); stroke-linecap: round; transition: stroke-dasharray var(--duration-deliberate) var(--ease-out); } [data-slot="wavy-progress"] [data-slot="wv-arc"] { transition: stroke-dasharray var(--duration-deliberate) var(--ease-out); } [data-slot="wavy-progress"] path[data-slot="wv-wave"] { stroke: currentColor; stroke-linejoin: round; animation: wv-turn 7s linear infinite; transition: opacity var(--duration-deliberate) var(--ease-out); } [data-slot="wavy-progress"] circle[data-slot="wv-flat"] { stroke: currentColor; opacity: 0; transition: opacity var(--duration-deliberate) var(--ease-out); } [data-slot="wavy-progress"][data-variant="circular"][data-done] path[data-slot="wv-wave"] { opacity: 0; } [data-slot="wavy-progress"][data-variant="circular"][data-done] circle[data-slot="wv-flat"] { opacity: 1; } [data-slot="wavy-progress"][data-variant="circular"][data-indeterminate] [data-slot="wv-arc"] { animation: wv-turn 1.3s linear infinite; } [data-slot="wavy-progress"] [data-slot="wv-value"] { color: var(--muted-foreground); } [data-slot="wavy-progress"][data-variant="circular"] [data-slot="wv-value"] { color: var(--foreground); } @media (prefers-reduced-motion: reduce) { [data-slot="wavy-progress"] [data-slot="wv-wave"] { opacity: 0; animation: none; } [data-slot="wavy-progress"] [data-slot="wv-flat"] { opacity: 1; } [data-slot="wavy-progress"][data-variant="linear"][data-indeterminate] [data-slot="wv-fill"] { animation-duration: 3.2s; } } @keyframes wv-travel { to { mask-position: 24px 0; } } @keyframes wv-sweep { from { translate: -100% 0; } to { translate: 300% 0; } } @keyframes wv-turn { to { rotate: 360deg; } } } 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":[["$","ul",null,{"className":"flex min-w-0 flex-wrap gap-2","aria-label":"Package dependencies","children":[["$","li","clsx",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/clsx","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":"clsx"}]]}]}],["$","li","tailwind-merge",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/tailwind-merge","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":"tailwind-merge"}]]}]}]]}],["$","$L63",null,{"namespace":"@registrydirectory","registryDependencies":["https://caliperui.site/r/styles.json"]}]]}],null]}],["$","$L64",null,{"files":[{"path":"ui/lib/cn.ts","content":"import { clsx, type ClassValue } from \"clsx\";\nimport { extendTailwindMerge } from \"tailwind-merge\";\n\nconst twMerge = extendTailwindMerge({\n extend: { theme: { radius: [\"control\", \"surface\", \"overlay\"], shadow: [\"overlay\"] } },\n});\n\nexport function cn(...inputs: ClassValue[]) {\n return twMerge(clsx(inputs));\n}\n","type":"registry:ui","target":"components/ui/lib/cn.ts"},{"path":"ui/wavy-progress.tsx","content":"$65","type":"registry:ui","target":"components/ui/wavy-progress.tsx"},{"path":"ui/wavy-progress.css","content":"$66","type":"registry:file","target":"components/ui/wavy-progress.css"}],"className":"h-[70svh] min-h-80"}]]}]