61: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"] 62: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"] 63:T1462,import { cn } from "@/lib/cn"; // Three spinners drawn on the icon grid (16 units, 1.5 stroke), so a spinner can // stand in for an icon at the same size without anything around it moving. // Everything is CSS keyframes: a spinner must keep turning while the main thread // is busy, which is exactly when it is on screen. const CSS = ` @keyframes stealth-spinner-in { from { opacity: 0; transform: scale(0.8); } } @keyframes stealth-spinner-turn { to { transform: rotate(360deg); } } @keyframes stealth-spinner-arc { 0% { stroke-dasharray: 8 92; stroke-dashoffset: 0; } 50% { stroke-dasharray: 46 54; stroke-dashoffset: -22; } 100% { stroke-dasharray: 8 92; stroke-dashoffset: -100; } } @keyframes stealth-spinner-dot { 0%, 64%, 100% { transform: translateY(0); opacity: 0.32; } 30% { transform: translateY(-2.5px); opacity: 1; } } @keyframes stealth-spinner-cell { 0%, 70%, 100% { transform: scale(0.78); opacity: 0.18; } 30% { transform: scale(1); opacity: 1; } } @keyframes stealth-spinner-breathe { 0%, 100% { opacity: 1; } 50% { opacity: 0.35; } } .stealth-spinner { animation: stealth-spinner-in 180ms cubic-bezier(0.16, 1, 0.3, 1) both; animation-delay: var(--spinner-delay, 0ms); } .stealth-spinner [data-part="turn"] { animation: stealth-spinner-turn 1.1s linear infinite; } .stealth-spinner [data-part="arc"] { animation: stealth-spinner-arc 1.5s cubic-bezier(0.65, 0, 0.35, 1) infinite; } .stealth-spinner [data-part="dot"] { transform-box: fill-box; animation: stealth-spinner-dot 1.1s cubic-bezier(0.45, 0, 0.55, 1) infinite; } .stealth-spinner [data-part="cell"] { transform-box: fill-box; transform-origin: center; animation: stealth-spinner-cell 1.2s cubic-bezier(0.45, 0, 0.55, 1) infinite; } /* Reduced motion: nothing travels or turns. The whole mark breathes slowly instead, so "still working" is still said. Specific enough to outrank a global kill switch. */ @media (prefers-reduced-motion: reduce) { .stealth-spinner [data-part] { animation: none !important; } .stealth-spinner [data-part="arc"] { stroke-dasharray: 30 70; } .stealth-spinner [data-part="dot"] { opacity: 0.8; } .stealth-spinner [data-part="cell"] { opacity: 0.55; transform: scale(0.9); } .stealth-spinner > svg { animation: stealth-spinner-breathe 2.4s ease-in-out infinite !important; } } `; const SIZES = { sm: 14, md: 16, lg: 20 } as const; export type SpinnerProps = Omit, "children"> & { variant?: "ring" | "dots" | "grid"; /** 14, 16 or 20px, the same steps as icons. A number sets pixels directly. */ size?: keyof typeof SIZES | number; /** Read by screen readers. Pass an empty string when the parent already says it is busy. */ label?: string; /** Milliseconds to wait before fading in, so fast work never flashes a spinner. */ delay?: number; }; export function Spinner({ variant = "ring", size = "md", label = "Loading", delay = 0, className, style, ...rest }: SpinnerProps) { const px = typeof size === "number" ? size : SIZES[size]; const decorative = !label; return ( {!decorative && {label}} ); } function Ring() { return ( <> {/* The turn and the breathing arc run on different periods, so the loop never looks mechanical. */} ); } function Dots() { return ( <> {[3, 8, 13].map((cx, i) => ( ))} ); } function Grid() { const at = [1.4, 6.2, 11]; return ( <> {at.flatMap((y, row) => at.map((x, col) => ( // A diagonal wave: each cell lights one step after the cell above-left of it. )), )} ); } 60:["$","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,["$","$L61",null,{"namespace":"@stealth","registryDependencies":["https://www.stealth.pm/r/tokens.json","https://www.stealth.pm/r/cn.json"]}]]}],null]}],["$","$L62",null,{"files":[{"path":"components/ui/spinner.tsx","content":"$63","type":"registry:ui"}],"className":"h-[70svh] min-h-80"}]]}]