4d: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"] 4e: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"] 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"],"ScrollArea"] 50: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"] 51: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"] 52:T55e9,"use client"; import { useEffect, useLayoutEffect, useRef, useState } from "react"; type ViewId = "overview" | "detail"; type Tone = "foreground" | "muted" | "border" | "accent"; interface RegionRect { x: number; y: number; w: number; h: number; tone: Tone; } interface Grain { x: number; y: number; ox: number; oy: number; tx: number; ty: number; rgb: string; baseAlpha: number; size: number; delay: number; matched: boolean; driftX: number; localSpan: number; // ms available for this grain's own animation (duration - delay) } interface RGB { r: number; g: number; b: number; } const DURATION = 900; // ms, full pour simulation const REDUCED_FADE = 150; // ms, reduced-motion / low-power substitute const GRAVITY_MATCHED = 1500; // px/s^2, fades out as the funnel takes over const GRAVITY_FALL = 2100; // px/s^2, unmatched (departing) grains const K_START = 4; // funnel spring constant at release const K_END = 150; // funnel spring constant at settle const DAMP_MATCHED = 0.9; const DAMP_FALL = 0.995; const MAX_GRAINS = 4000; const LOW_POWER_THRESHOLD_MS = 45; const EDGE_FADE_PX = 24; // px band, inside the canvas, over which a grain dissolves before it would reach the container's edge — matches the layout's own p-6 padding function smoothstep(t: number) { const c = Math.min(1, Math.max(0, t)); return c * c * (3 - 2 * c); } function clamp01(v: number) { return Math.min(1, Math.max(0, v)); } // deterministic-enough color parsing for the four house tokens (hex or rgb()). function parseColor(raw: string): RGB | null { const v = raw.trim(); if (!v) return null; if (v.startsWith("#")) { const hex = v.slice(1); if (hex.length === 3) { const r = parseInt(hex[0] + hex[0], 16); const g = parseInt(hex[1] + hex[1], 16); const b = parseInt(hex[2] + hex[2], 16); if ([r, g, b].some(Number.isNaN)) return null; return { r, g, b }; } if (hex.length >= 6) { const r = parseInt(hex.slice(0, 2), 16); const g = parseInt(hex.slice(2, 4), 16); const b = parseInt(hex.slice(4, 6), 16); if ([r, g, b].some(Number.isNaN)) return null; return { r, g, b }; } return null; } const m = v.match(/rgba?\(\s*([\d.]+)[,\s]+([\d.]+)[,\s]+([\d.]+)/); if (m) return { r: Number(m[1]), g: Number(m[2]), b: Number(m[3]) }; return null; } function rgbString(rgb: RGB | null, fallback: string) { if (!rgb) return fallback; return `${rgb.r},${rgb.g},${rgb.b}`; } // a fixed amount of arithmetic timed synchronously: on a throttled/low-power // device this takes visibly longer than on a normal one, standing in for a // frame-budget check without needing to burn a real animation frame to learn // it. The threshold errs toward NOT flagging: a false negative just runs the // full pour (harmless), a false positive silently skips the signature effect. function detectLowPower(): boolean { if (typeof performance === "undefined") return false; const t0 = performance.now(); let acc = 0; for (let i = 0; i < 200_000; i++) { acc += Math.sqrt(i) * Math.sin(i); } const elapsed = performance.now() - t0; // guard against the loop being optimized away entirely return elapsed > LOW_POWER_THRESHOLD_MS || !Number.isFinite(acc); } function captureRects(container: HTMLElement): Map { const cRect = container.getBoundingClientRect(); const map = new Map(); container.querySelectorAll("[data-scree-id]").forEach((el) => { const id = el.dataset.screeId; if (!id) return; const r = el.getBoundingClientRect(); if (r.width <= 0 || r.height <= 0) return; const tone = (el.dataset.screeTone as Tone) || "foreground"; map.set(id, { x: r.left - cRect.left, y: r.top - cRect.top, w: r.width, h: r.height, tone }); }); return map; } function buildGrains( oldRects: Map, newRects: Map, rgbTable: Record, budget: number ): Grain[] { const entries: { rect: RegionRect; match?: RegionRect }[] = []; let totalArea = 0; oldRects.forEach((rect, id) => { entries.push({ rect, match: newRects.get(id) }); totalArea += Math.max(rect.w * rect.h, 1); }); if (entries.length === 0) return []; const grains: Grain[] = []; for (const { rect, match } of entries) { const area = Math.max(rect.w * rect.h, 40); const count = Math.max(14, Math.round((budget * area) / totalArea)); const rgb = rgbTable[rect.tone]; for (let i = 0; i < count; i++) { const gx = rect.x + Math.random() * rect.w; const gy = rect.y + Math.random() * rect.h; const size = 2 + Math.random(); const delay = Math.random() * 140; const baseAlpha = 0.62 + Math.random() * 0.32; if (match) { const tx = match.x + Math.random() * match.w; const ty = match.y + Math.random() * match.h; grains.push({ x: gx, y: gy, ox: gx, oy: gy, tx, ty, rgb, baseAlpha, size, delay, matched: true, driftX: 0, localSpan: Math.max(120, DURATION - delay), }); } else { grains.push({ x: gx, y: gy, ox: gx, oy: gy, tx: gx, ty: rect.y + rect.h + 400, rgb, baseAlpha, size, delay, matched: false, driftX: (Math.random() - 0.5) * 70, localSpan: Math.max(120, DURATION - delay), }); } if (grains.length >= MAX_GRAINS) return grains; } } return grains; } const LABELS: Record = { overview: "Overview", detail: "Sessions detail", }; /** * A layout transition where the outgoing panel crumbles into token-colored * grains that pour into the incoming panel's silhouette — an hourglass turn * between a dashboard overview and a metric's detail pivot. The DOM swap * itself is instant and fully accessible from frame one (real content, * correct focus, a live-region announcement); the grains are a canvas * overlay riding on top that explains where the old layout's matter went, * then fades to nothing once the new layout has settled. */ export function ScreePour({ className = "", grainBudget = 2400, }: { /** extra classes merged onto the rendered root element */ className?: string; /** total grains spawned per transition, distributed across regions by area */ grainBudget?: number; }) { const containerRef = useRef(null); const canvasRef = useRef(null); const panelRef = useRef(null); const headingOverviewRef = useRef(null); const headingDetailRef = useRef(null); const liveRef = useRef(null); const [active, setActive] = useState("overview"); const [phase, setPhase] = useState<"idle" | "pouring">("idle"); const [lastUpdated, setLastUpdated] = useState("just now"); const phaseRef = useRef<"idle" | "pouring">("idle"); const pendingRef = useRef<{ oldRects: Map; next: ViewId } | null>(null); const rafRef = useRef(0); const colorsRef = useRef>({ foreground: "23,23,23", muted: "77,77,77", border: "235,235,235", accent: "0,107,255", }); const reducedMotionRef = useRef(false); const lowPowerRef = useRef(false); // theme tokens: read at mount, re-read whenever 's class changes useEffect(() => { const read = () => { const cs = getComputedStyle(document.documentElement); colorsRef.current = { foreground: rgbString( parseColor(cs.getPropertyValue("--foreground")), colorsRef.current.foreground ), muted: rgbString(parseColor(cs.getPropertyValue("--ns-muted")), colorsRef.current.muted), border: rgbString(parseColor(cs.getPropertyValue("--border")), colorsRef.current.border), accent: rgbString(parseColor(cs.getPropertyValue("--ns-accent")), colorsRef.current.accent), }; }; read(); const mo = new MutationObserver(read); mo.observe(document.documentElement, { attributes: true, attributeFilter: ["class"] }); return () => mo.disconnect(); }, []); // prefers-reduced-motion, live useEffect(() => { const mq = window.matchMedia("(prefers-reduced-motion: reduce)"); reducedMotionRef.current = mq.matches; const onChange = (e: MediaQueryListEvent) => { reducedMotionRef.current = e.matches; }; mq.addEventListener("change", onChange); return () => mq.removeEventListener("change", onChange); }, []); // one-shot frame-budget check standing in for low-power device detection useEffect(() => { lowPowerRef.current = detectLowPower(); }, []); // canvas backing store tracks the container, dpr-clamped useEffect(() => { const canvas = canvasRef.current; const container = containerRef.current; if (!canvas || !container) return; const resize = () => { const rect = container.getBoundingClientRect(); const dpr = Math.min(2, window.devicePixelRatio || 1); canvas.width = Math.max(1, Math.round(rect.width * dpr)); canvas.height = Math.max(1, Math.round(rect.height * dpr)); const ctx = canvas.getContext("2d"); if (ctx) ctx.setTransform(dpr, 0, 0, dpr, 0, 0); }; resize(); const ro = new ResizeObserver(resize); ro.observe(container); return () => ro.disconnect(); }, []); const runPour = (oldRects: Map, newRects: Map) => { const canvas = canvasRef.current; if (!canvas) { phaseRef.current = "idle"; setPhase("idle"); return; } const ctx = canvas.getContext("2d"); if (!ctx) { phaseRef.current = "idle"; setPhase("idle"); return; } const grains = buildGrains(oldRects, newRects, colorsRef.current, grainBudget); if (grains.length === 0) { phaseRef.current = "idle"; setPhase("idle"); return; } const start = performance.now(); let lastT = start; const frame = (now: number) => { const elapsed = now - start; const dt = Math.min(0.05, (now - lastT) / 1000); lastT = now; const w = canvas.clientWidth; const h = canvas.clientHeight; ctx.clearRect(0, 0, w, h); for (const g of grains) { const gElapsed = elapsed - g.delay; if (gElapsed < 0) { // not yet released: sits at its spawn point, still solid (still // subject to the edge fade below — a region tagged right at the // container's edge shouldn't spawn a hard-edged dot either) const spawnEdge = smoothstep( clamp01(Math.min(g.x, w - g.x, g.y, h - g.y) / EDGE_FADE_PX) ); const spawnAlpha = g.baseAlpha * spawnEdge; if (spawnAlpha > 0.01) { ctx.fillStyle = `rgba(${g.rgb},${spawnAlpha.toFixed(3)})`; ctx.fillRect(g.x - g.size / 2, g.y - g.size / 2, g.size, g.size); } continue; } const localT = clamp01(gElapsed / g.localSpan); let alpha: number; if (g.matched) { const k = K_START + (K_END - K_START) * smoothstep(localT); const gravity = GRAVITY_MATCHED * (1 - smoothstep(localT)); const ax = (g.tx - g.x) * k; const ay = (g.ty - g.y) * k + gravity; const vx = (g.x - g.ox) * DAMP_MATCHED; const vy = (g.y - g.oy) * DAMP_MATCHED; g.ox = g.x; g.oy = g.y; g.x += vx + ax * dt * dt; g.y += vy + ay * dt * dt; const fadeT = clamp01((localT - 0.6) / 0.4); alpha = g.baseAlpha * (1 - smoothstep(fadeT)); } else { const ax = g.driftX; const ay = GRAVITY_FALL; const vx = (g.x - g.ox) * DAMP_FALL; const vy = (g.y - g.oy) * DAMP_FALL; g.ox = g.x; g.oy = g.y; g.x += vx + ax * dt * dt; g.y += vy + ay * dt * dt; const fadeT = clamp01((localT - 0.5) / 0.5); alpha = g.baseAlpha * (1 - smoothstep(fadeT)); } // Fade by proximity to the canvas bounds, not just elapsed time. // Time-based fade alone lets a falling (unmatched) grain reach the // bottom edge at near-full alpha — gravity gets it there in ~350-450ms, // right as its own fade window (localT > 0.5/0.6) has barely started — // so a bright, undecayed mass arrives at the boundary together and // then hard-clips at the canvas edge, reading as a wall of litter at // the edges instead of a dissolve. This tapers alpha to 0 over the // last EDGE_FADE_PX (matches the layout's own p-6 padding, so settled // matched content — which lives inside that padding — is never // touched by it) before a grain would ever reach the boundary. const distToEdge = Math.min(g.x, w - g.x, g.y, h - g.y); alpha *= smoothstep(clamp01(distToEdge / EDGE_FADE_PX)); if (alpha <= 0.01) continue; ctx.fillStyle = `rgba(${g.rgb},${alpha.toFixed(3)})`; ctx.fillRect(g.x - g.size / 2, g.y - g.size / 2, g.size, g.size); } if (elapsed < DURATION) { rafRef.current = requestAnimationFrame(frame); } else { ctx.clearRect(0, 0, w, h); rafRef.current = 0; phaseRef.current = "idle"; setPhase("idle"); } }; rafRef.current = requestAnimationFrame(frame); }; // after a triggered view swap commits, measure the new layout and either // run the full pour or (reduced motion / low power) a plain 150ms fade. useLayoutEffect(() => { const pending = pendingRef.current; if (!pending || pending.next !== active) return; pendingRef.current = null; const headingEl = active === "detail" ? headingDetailRef.current : headingOverviewRef.current; headingEl?.focus(); if (reducedMotionRef.current || lowPowerRef.current) { const panelEl = panelRef.current; if (panelEl) { // floor at 0.6, never 0 — the panel must never read as transparent, // even a single check instant after this branch runs panelEl.style.opacity = "0.6"; panelEl.style.transition = `opacity ${REDUCED_FADE}ms cubic-bezier(0.16,1,0.3,1)`; requestAnimationFrame(() => { panelEl.style.opacity = "1"; }); window.setTimeout(() => { panelEl.style.transition = ""; }, REDUCED_FADE + 40); } phaseRef.current = "idle"; setPhase("idle"); return; } const container = containerRef.current; if (!container) { phaseRef.current = "idle"; setPhase("idle"); return; } const newRects = captureRects(container); runPour(pending.oldRects, newRects); // eslint-disable-next-line react-hooks/exhaustive-deps }, [active]); useEffect(() => { return () => cancelAnimationFrame(rafRef.current); }, []); const trigger = (next: ViewId) => { if (phaseRef.current === "pouring") return; if (liveRef.current) liveRef.current.textContent = `Now showing: ${LABELS[next]}`; const container = containerRef.current; if (!container) { setActive(next); return; } const oldRects = captureRects(container); pendingRef.current = { oldRects, next }; phaseRef.current = "pouring"; setPhase("pouring"); setActive(next); }; const refresh = () => setLastUpdated(new Date().toLocaleTimeString()); const triggerClass = "inline-flex items-center gap-1.5 rounded-sm border border-ns-accent px-3 py-1.5 text-xs font-medium text-ns-accent transition-colors hover:text-ns-accent-hover focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ns-accent disabled:opacity-60 disabled:pointer-events-none"; return (

{active === "overview" ? (

Overview

Updated {lastUpdated}

Sessions 12,482

Revenue $8.2k

Users 3,014

) : (

Sessions detail

12,482

Sessions across all surfaces, last 24 hours. Up 6.4% from the previous day, driven mostly by returning users on mobile.

)}

); } 4c:["$","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,["$","$L4d",null,{"namespace":"@ns-ui","registryDependencies":[]}]]}],["$","$L4e",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":["$","$L4f",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"}]]}],["$","div","ns-accent",{"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-accent",":"]}]}],["$","div",null,{"className":"hover:bg-muted/50 py-2 px-1 rounded-md w-full","children":"#006bff"}]]}],["$","div","ns-accent-hover",{"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-accent-hover",":"]}]}],["$","div",null,{"className":"hover:bg-muted/50 py-2 px-1 rounded-md w-full","children":"#0059d1"}]]}]]}],["$","$L50",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":["$","$L4f",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"}]]}]]}],["$","$L50",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":["$","$L4f",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)"}]]}],["$","div","color-ns-accent",{"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-accent",":"]}]}],["$","div",null,{"className":"hover:bg-muted/50 py-2 px-1 rounded-md w-full","children":"var(--ns-accent)"}]]}],["$","div","color-ns-accent-hover",{"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-accent-hover",":"]}]}],["$","div",null,{"className":"hover:bg-muted/50 py-2 px-1 rounded-md w-full","children":"var(--ns-accent-hover)"}]]}]]}],["$","$L50",null,{"orientation":"horizontal"}]]}]}]]}],null]}]}]}]]}],["$","$L51",null,{"files":[{"path":"registry/loud/transition-panel-crumble/component.tsx","content":"$52","type":"registry:ui","target":"components/ui/transition-panel-crumble.tsx"}],"className":"h-[70svh] min-h-80"}]]}]