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:T11c4,"use client"; import { useEffect, useLayoutEffect, useRef, type CSSProperties, type ReactNode } from "react"; import { AnimatePresence, animate, motion, useMotionValue, useReducedMotion, type AnimationPlaybackControls } from "motion/react"; import { motionTokens } from "../lib/motion-tokens"; import styles from "./skeleton.module.css"; export interface SkeletonProps { label?: string; lines?: number; avatar?: boolean; className?: string; /** Content to reveal once loading finishes. With children, the placeholder crossfades into them. */ children?: ReactNode; /** Keeps the placeholder visible while true. Only used together with children. */ loading?: boolean; } /** Follows its content height. After `morphKey` changes, the height springs from the old size to the new one and then returns to auto, so passive reflows (a resize, a font swap) follow instantly. It clips only while moving, so focus rings stay visible at rest. */ function HeightFrame({ className, busy, reduce, children }: { className?: string; busy: boolean; reduce: boolean | null; children: ReactNode }) { const frame = useRef(null); const content = useRef(null); const height = useMotionValue("auto"); const changedAt = useRef(0); useLayoutEffect(() => { changedAt.current = performance.now(); }, [busy]); useEffect(() => { const node = content.current; if (!node || typeof ResizeObserver === "undefined") return; let last: number | undefined; let controls: AnimationPlaybackControls | undefined; const settle = () => { height.jump("auto"); if (frame.current) Object.assign(frame.current.style, { overflow: "", height: "auto" }); }; const observer = new ResizeObserver(([entry]) => { if (!entry) return; const next = entry.borderBoxSize?.[0]?.blockSize ?? node.offsetHeight; const current = height.get(); const from = typeof current === "number" ? current : last; last = next; controls?.stop(); if (reduce || from === undefined || from === next || performance.now() - changedAt.current > 120) return settle(); // Pin the old height before this frame paints, then spring to the new one. if (frame.current) Object.assign(frame.current.style, { overflow: "hidden", height: `${from}px` }); controls = animate(height, [from, next], { ...motionTokens.spring.smooth, onComplete: settle }); }); observer.observe(node); return () => { observer.disconnect(); controls?.stop(); }; }, [height, reduce]); return

{children}

; } export function Skeleton({ label = "Loading content", lines = 3, avatar = false, className, children, loading = true }: SkeletonProps) { const reduce = useReducedMotion(); const count = Math.min(Math.max(Math.floor(lines), 1), 6); // Each block pulses a beat after the one above it, so the wait reads as one calm wave. const placeholder = (extra?: string) =>

{avatar &&

; if (children === undefined) return placeholder(className); return {loading ? {placeholder()} : {children}} ; } export default Skeleton; 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":[["$","ul",null,{"className":"flex min-w-0 flex-wrap gap-2","aria-label":"Package dependencies","children":[["$","li","motion",{"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"}]]}]}]]}],["$","$L61",null,{"namespace":"@uiarc","registryDependencies":["https://uiarc.dev/r/arc-motion-tokens.json"]}]]}],null]}],["$","$L62",null,{"files":[{"path":"registry/components/skeleton/skeleton.tsx","content":"$63","type":"registry:component","target":"@components/arc/skeleton/skeleton.tsx"},{"path":"registry/components/skeleton/skeleton.module.css","content":".root { display: flex; width: 100%; min-width: 0; align-items: flex-start; gap: var(--space-4); }\n/* A calm, finite pulse: each block dims a beat after the one above it, then rests after about 20 seconds. */\n.avatar, .line { display: block; flex: 0 0 auto; border-radius: var(--radius-control); background: color-mix(in oklab, var(--border-strong) 38%, var(--surface)); animation: skeleton-pulse 1.8s var(--ease-in-out) calc(var(--index, 0) * 90ms) 11 both; }\n.avatar { width: var(--control-height-md); height: var(--control-height-md); border-radius: var(--radius-pill); }\n.lines { display: grid; flex: 1; gap: var(--space-3); padding-top: var(--space-1); }\n.line { width: 100%; height: var(--space-3); }\n.line:first-child { width: 48%; height: var(--space-4); }\n.line:last-child { width: 72%; }\n.frame { position: relative; display: flow-root; }\n@keyframes skeleton-pulse { 0%, 100% { opacity: 1; } 50% { opacity: .52; } }\n@media (prefers-reduced-motion: reduce) { .avatar, .line { animation: none; } }\n","type":"registry:component","target":"@components/arc/skeleton/skeleton.module.css"}],"className":"h-[70svh] min-h-80"}]]}]