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:T2527,"use client"; import { createContext, useContext } from "react"; import { cn } from "@/lib/cn"; // Bones are the foreground at 7%, so they read on any surface in either theme. // The shimmer is one light passing across every bone at once: the gradient is // pinned to the viewport (background-attachment: fixed), so a wide block and a // short line are lit by the same sweep instead of each flashing on its own. const CSS = ` @keyframes stealth-skeleton-in { from { opacity: 0; } } @keyframes stealth-bone-shimmer { from { background-position: -100vw 0; } to { background-position: 100vw 0; } } @keyframes stealth-bone-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.5; } } .stealth-skeleton { animation: stealth-skeleton-in 240ms cubic-bezier(0.25, 1, 0.5, 1) both; } /* Defaults live in a layer below utilities, so any className you pass wins. */ @layer components { .stealth-bone { display: block; background-color: color-mix(in oklab, var(--fg) 7%, transparent); } .stealth-block { width: 100%; height: 96px; border-radius: 8px; } .stealth-circle { flex-shrink: 0; border-radius: 9999px; } } [data-animation="shimmer"] .stealth-bone { background-image: linear-gradient(100deg, transparent 38%, color-mix(in oklab, var(--fg) 9%, transparent) 50%, transparent 62%); background-size: 100vw 100%; background-repeat: no-repeat; background-attachment: fixed; animation: stealth-bone-shimmer 2.8s linear infinite; } [data-animation="pulse"] .stealth-bone { animation: stealth-bone-pulse 2.4s ease-in-out infinite; } @media (prefers-reduced-motion: reduce) { .stealth-skeleton .stealth-bone { animation: none !important; background-image: none !important; } } `; type Animation = "shimmer" | "pulse" | "static"; const Ctx = createContext<{ animation: Animation } | null>(null); export type SkeletonProps = React.ComponentProps<"div"> & { /** A slow light sweep, a slow opacity pulse, or nothing. */ animation?: Animation; /** What is loading, for screen readers: "Loading invoices". */ label?: string; }; /** The loading container. Marks the region busy and sets the animation for every bone inside. */ export function Skeleton({ animation = "shimmer", label = "Loading", className, children, ...rest }: SkeletonProps) { return (

{label}

{children}

); } /** Presets used on their own bring their own container; inside a Skeleton they don't nest another. */ function Rooted({ root, children }: { root: SkeletonProps; children: React.ReactNode }) { const inside = useContext(Ctx); if (inside) return

{children}

; return {children}; } const len = (v: string | number | undefined) => (typeof v === "number" ? `${v}px` : v); // Deterministic, so server and client agree and reloads don't reshuffle. const WIDTHS = [72, 56, 84, 64, 48, 78, 60, 90, 52, 68]; const pick = (i: number) => WIDTHS[i % WIDTHS.length]; export type SkeletonLineProps = Omit, "children"> & { /** Several lines, as a paragraph. The last one is shorter. */ lines?: number; /** Width of a single line, or of the last line in a paragraph. */ width?: string | number; }; /** * A line of text that hasn't arrived. It is exactly one line-height tall and * draws a bar the height of the letters, so set the same text size and leading * as the real text (className="text-[13px] leading-[18px]") and nothing moves on swap. */ export function SkeletonLine({ lines = 1, width, className, style, ...rest }: SkeletonLineProps) { const one = (w: string | undefined, key?: number) => ( ); if (lines <= 1) return ( {one("100%")} ); return ( {Array.from({ length: lines }, (_, i) => one(i === lines - 1 ? (len(width) ?? "62%") : `${[100, 96, 98, 93][i % 4]}%`, i))} ); } export type SkeletonCircleProps = Omit, "children"> & { /** Diameter in pixels. Match the avatar it stands in for. */ size?: number; }; export function SkeletonCircle({ size = 32, className, style, ...rest }: SkeletonCircleProps) { return ; } export type SkeletonBlockProps = Omit, "children">; /** Any rectangle: an image, a chart, a button. Full width and 96px tall until your className says otherwise. */ export function SkeletonBlock({ className, ...rest }: SkeletonBlockProps) { return ; } export type SkeletonRowProps = SkeletonProps & { /** How many rows. Widths vary row to row so it reads as a list, not a stamp. */ count?: number; avatar?: boolean; /** A second, quieter line under the name. */ meta?: boolean; /** A short value at the end of the row: a time, an amount. */ trailing?: boolean; }; /** A list row: 32px avatar, a 13px name, a 12px meta line and a trailing value. */ export function SkeletonRow({ count = 3, avatar = true, meta = true, trailing = true, className, ...root }: SkeletonRowProps) { return ( {Array.from({ length: count }, (_, i) => (

{avatar && }

{meta && }

{trailing && }

))} ); } export type SkeletonCardProps = SkeletonProps & { /** A media area on top: true for 16:9, or a width-to-height ratio such as 2 or 4 / 3. */ media?: boolean | number; /** Lines of body text under the title. */ lines?: number; /** An avatar, a name and an action along the bottom. */ footer?: boolean; }; /** A card: media, a 15px title, body lines and a footer with an action. */ export function SkeletonCard({ media = true, lines = 2, footer = true, className, ...root }: SkeletonCardProps) { return ( {media !== false && }

{lines > 0 && }

{footer && (

)} ); } export type SkeletonTableProps = SkeletonProps & { rows?: number; columns?: number; /** Draw the header row. Real headers are usually known before the data, so pass false and render yours. */ header?: boolean; }; /** A table: a mono header, then 36px rows. The first column is widest, the last is right-aligned like a number. */ export function SkeletonTable({ rows = 5, columns = 4, header = true, className, ...root }: SkeletonTableProps) { const grid = { gridTemplateColumns: `minmax(0,1.6fr) repeat(${Math.max(columns - 1, 0)}, minmax(0,1fr))` }; const cell = (r: number, c: number, head: boolean) => (

0 && "justify-end")}> 0 ? `${40 + ((r * 13) % 22)}%` : `${pick(r * 3 + c)}%`} />

); return ( {header && (

{Array.from({ length: columns }, (_, c) => cell(0, c, true))}

)} {Array.from({ length: rows }, (_, r) => (

{Array.from({ length: columns }, (_, c) => cell(r, c, false))}

))} ); } 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/skeleton.tsx","content":"$63","type":"registry:ui"}],"className":"h-[70svh] min-h-80"}]]}]