4c: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/3upr08c9vtj8w.js","/_next/static/immutable/chunks/2rwy6tq861e-y.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/2hlz_ivp-qrnh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2zoahorp76dll.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1d0aij627lbx2.js","/_next/static/immutable/chunks/1ud4fi_ghnsx-.js"],"RegistryDependencies"] 4d:I[544296,["/_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/3upr08c9vtj8w.js","/_next/static/immutable/chunks/2rwy6tq861e-y.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/2hlz_ivp-qrnh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2zoahorp76dll.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1d0aij627lbx2.js","/_next/static/immutable/chunks/1ud4fi_ghnsx-.js"],"ItemStyles"] 4e:I[8513,["/_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/3upr08c9vtj8w.js","/_next/static/immutable/chunks/2rwy6tq861e-y.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/2hlz_ivp-qrnh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2zoahorp76dll.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1d0aij627lbx2.js","/_next/static/immutable/chunks/1ud4fi_ghnsx-.js"],"ScrollArea"] 4f:I[8513,["/_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/3upr08c9vtj8w.js","/_next/static/immutable/chunks/2rwy6tq861e-y.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/2hlz_ivp-qrnh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2zoahorp76dll.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1d0aij627lbx2.js","/_next/static/immutable/chunks/1ud4fi_ghnsx-.js"],"ScrollBar"] 50: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/3upr08c9vtj8w.js","/_next/static/immutable/chunks/2rwy6tq861e-y.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/2hlz_ivp-qrnh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2zoahorp76dll.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1d0aij627lbx2.js","/_next/static/immutable/chunks/1ud4fi_ghnsx-.js"],"FilesView"] 51:T22fe,"use client"; import { useEffect, useRef, useState, type CSSProperties, type ReactNode } from "react"; // Loading wrapper whose placeholder DEVELOPS into the real content, like a // print coming up in a tray: on `loading` -> false both layers are stacked and // a soft-edged alpha mask sweeps downward — the ghost blocks dissolve and // settle upward as the children un-blur behind them, top first. No swap, no // flash. While loading, each block carries a token-derived sweep (a recessed // --background trough followed by a --ns-muted crest over a --border bed), not the // white-to-grey shine every skeleton on the internet ships. // // Layout comes from the declarative `blocks` prop — the children are never // measured, because while loading they are not mounted at all. Everything // animating is CSS (compositor-friendly, zero rAF); React only runs the // three-state phase machine. prefers-reduced-motion drops to an instant swap // with still blocks. export type SkeletonBlock = /** One emphasised bar. `width` is a fraction of the container, 0..1. */ | { kind: "heading"; width?: number } /** `lines` body bars; the last one is short, the way a paragraph ends. */ | { kind: "text"; lines?: number; width?: number } /** Avatar / icon disc. `size` in px. */ | { kind: "circle"; size?: number } /** Media or card placeholder. `height` in px, `width` a fraction. */ | { kind: "box"; height?: number; width?: number } /** Horizontal group — an avatar beside its two lines, a row of chips. */ | { kind: "row"; gap?: number; align?: "start" | "center"; items: SkeletonBlock[] }; export interface DevelopSkeletonProps { /** While true the placeholder is shown; flipping it false runs the develop. */ loading: boolean; /** The real content. Not rendered — and so never measured — while loading. */ children: ReactNode; /** Placeholder layout. Defaults to a heading over three lines of text. */ blocks?: SkeletonBlock[]; /** Duration of the develop transition, ms. */ developMs?: number; /** Announced to screen readers while loading. */ loadingLabel?: string; /** extra classes merged onto the rendered root element */ className?: string; } type Phase = "loading" | "developing" | "ready"; const DEFAULT_BLOCKS: SkeletonBlock[] = [ { kind: "heading", width: 0.55 }, { kind: "text", lines: 3 }, ]; const CSS = ` .ns-dev-bar{position:relative;overflow:hidden;background:var(--border)} .ns-dev-bar::after{ content:"";position:absolute;inset:0; background-image:linear-gradient(100deg, transparent 22%, color-mix(in oklab, var(--background) 55%, transparent) 39%, color-mix(in oklab, var(--ns-muted) 24%, transparent) 52%, transparent 74%); transform:translateX(-100%); /* the delay is a custom property, not animation-delay on the host element: animation-delay does not inherit into ::after, custom properties do */ animation:ns-dev-sweep 2600ms cubic-bezier(.42,0,.2,1) var(--ns-dev-delay,0ms) infinite; } @keyframes ns-dev-sweep{0%{transform:translateX(-100%)}64%,100%{transform:translateX(100%)}} /* Alpha masks only — the gradients below are opacity ramps, not ink. */ .ns-dev-content{ -webkit-mask-image:linear-gradient(to bottom,rgb(0 0 0/1) 0 33%,rgb(0 0 0/0) 47% 100%); mask-image:linear-gradient(to bottom,rgb(0 0 0/1) 0 33%,rgb(0 0 0/0) 47% 100%); -webkit-mask-size:100% 300%;mask-size:100% 300%; -webkit-mask-repeat:no-repeat;mask-repeat:no-repeat; animation:ns-dev-resolve var(--ns-dev-ms) cubic-bezier(.22,1,.36,1) both; } @keyframes ns-dev-resolve{ from{-webkit-mask-position:0 100%;mask-position:0 100%;filter:blur(7px) contrast(.7)} to{-webkit-mask-position:0 0%;mask-position:0 0%;filter:blur(0) contrast(1)} } .ns-dev-ghost{ transform-origin:top center; -webkit-mask-image:linear-gradient(to bottom,rgb(0 0 0/0) 0 33%,rgb(0 0 0/1) 47% 100%); mask-image:linear-gradient(to bottom,rgb(0 0 0/0) 0 33%,rgb(0 0 0/1) 47% 100%); -webkit-mask-size:100% 300%;mask-size:100% 300%; -webkit-mask-repeat:no-repeat;mask-repeat:no-repeat; animation:ns-dev-dissolve var(--ns-dev-ms) cubic-bezier(.22,1,.36,1) both; } @keyframes ns-dev-dissolve{ from{-webkit-mask-position:0 100%;mask-position:0 100%;filter:blur(0);transform:scaleY(1)} to{-webkit-mask-position:0 0%;mask-position:0 0%;filter:blur(5px);transform:scaleY(.975)} } @media (prefers-reduced-motion: reduce){ .ns-dev-bar::after{animation:none;background-image:none} .ns-dev-content,.ns-dev-ghost{animation:none;-webkit-mask-image:none;mask-image:none;filter:none} } `; function renderBlocks(blocks: SkeletonBlock[], seq: { n: number }): ReactNode[] { return blocks.map((block, i) => { // negative delays offset each bar's sweep so the panel reads as one wave // travelling through it rather than every bar flashing in lockstep const bar = (width: number, height: number, radius: string) => (

); switch (block.kind) { case "heading": return

{bar(block.width ?? 0.55, 20, "rounded-sm")}

; case "text": { const lines = Math.max(1, block.lines ?? 3); const width = block.width ?? 1; return (

{Array.from({ length: lines }, (_, l) => ( // a paragraph's last line stops short — without it the block // reads as a table, not prose

{bar(l === lines - 1 ? width * 0.62 : width, 12, "rounded-full")}

))}

); } case "circle": { const size = block.size ?? 40; return (

); } case "box": return

{bar(block.width ?? 1, block.height ?? 120, "rounded-md")}

; case "row": return (

{block.items.map((item, j) => ( // a disc keeps its own size; everything else shares the rest

{renderBlocks([item], seq)}

))}

); } }); } export function DevelopSkeleton({ loading, children, blocks = DEFAULT_BLOCKS, developMs = 900, loadingLabel = "Loading", className = "", }: DevelopSkeletonProps) { const [reduced, setReduced] = useState(false); const [phase, setPhase] = useState(loading ? "loading" : "ready"); // content that mounted already-loaded must not play a develop it never earned const wasLoading = useRef(loading); useEffect(() => { const mq = window.matchMedia("(prefers-reduced-motion: reduce)"); const onChange = () => setReduced(mq.matches); onChange(); mq.addEventListener("change", onChange); return () => mq.removeEventListener("change", onChange); }, []); useEffect(() => { if (loading) { wasLoading.current = true; setPhase("loading"); return; } if (!wasLoading.current) { setPhase("ready"); return; } wasLoading.current = false; if (reduced) { setPhase("ready"); return; } setPhase("developing"); const id = window.setTimeout(() => setPhase("ready"), developMs); // flipping back to loading mid-develop lands here first: the pending // settle is dropped, so the ghost cannot un-hide a half-developed layer return () => window.clearTimeout(id); }, [loading, developMs, reduced]); const developing = phase === "developing"; const vars = { "--ns-dev-ms": `${developMs}ms` } as CSSProperties; return (

{phase !== "loading" && (

{children}

)} {phase !== "ready" && (

{renderBlocks(blocks, { n: 0 })}

)} {phase === "loading" && ( {loadingLabel} )}

); } 4b:["$","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,["$","$L4c",null,{"namespace":"@ns-ui","registryDependencies":[]}]]}],["$","$L4d",null,{"children":["$","div",null,{"className":"@container","children":["$","div",null,{"className":"grid grid-cols-1 gap-4 @xl:grid-cols-2","children":[["$","div",null,{"className":"flex flex-col border rounded-md","children":[["$","p",null,{"className":"text-sm font-medium border-b p-2","children":"Light Mode"}],["$","div",null,{"children":["$","$L4e",null,{"type":"always","className":"h-80 px-2","children":[["$","div",null,{"className":"gap-2 pb-8 flex flex-col pt-4","children":[["$","div","ns-muted",{"className":"items-start gap-1 grid grid-cols-2 text-sm","children":[["$","div",null,{"className":"hover:bg-muted/50 py-2","children":["$","p",null,{"className":"text-foreground/80 text-sm","children":["--","ns-muted",":"]}]}],["$","div",null,{"className":"hover:bg-muted/50 py-2 px-1 rounded-md w-full","children":"#4d4d4d"}]]}]]}],["$","$L4f",null,{"orientation":"horizontal"}]]}]}]]}],["$","div",null,{"className":"flex flex-col border rounded-md","children":[["$","p",null,{"className":"text-sm font-medium border-b p-2","children":"Dark Mode"}],["$","div",null,{"children":["$","$L4e",null,{"type":"always","className":"h-80 px-2","children":[["$","div",null,{"className":"gap-2 pb-8 flex flex-col pt-4","children":[["$","div","ns-muted",{"className":"items-start gap-1 grid grid-cols-2 text-sm","children":[["$","div",null,{"className":"hover:bg-muted/50 py-2","children":["$","p",null,{"className":"text-foreground/80 text-sm","children":["--","ns-muted",":"]}]}],["$","div",null,{"className":"hover:bg-muted/50 py-2 px-1 rounded-md w-full","children":"#8f8f8f"}]]}]]}],["$","$L4f",null,{"orientation":"horizontal"}]]}]}]]}],["$","div",null,{"className":"flex flex-col border rounded-md","children":[["$","p",null,{"className":"text-sm font-medium border-b p-2","children":"Theme"}],["$","div",null,{"children":["$","$L4e",null,{"type":"always","className":"h-80 px-2","children":[["$","div",null,{"className":"gap-2 pb-8 flex flex-col pt-4","children":[["$","div","color-ns-muted",{"className":"items-start gap-1 grid grid-cols-2 text-sm","children":[["$","div",null,{"className":"hover:bg-muted/50 py-2","children":["$","p",null,{"className":"text-foreground/80 text-sm","children":["--","color-ns-muted",":"]}]}],["$","div",null,{"className":"hover:bg-muted/50 py-2 px-1 rounded-md w-full","children":"var(--ns-muted)"}]]}]]}],["$","$L4f",null,{"orientation":"horizontal"}]]}]}]]}],null]}]}]}]]}],["$","$L50",null,{"files":[{"path":"registry/core/skeleton-develop/component.tsx","content":"$51","type":"registry:ui","target":"components/ui/skeleton-develop.tsx"}],"className":"h-[70svh] min-h-80"}]]}]