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:T51bb,"use client"; import { useEffect, useRef, useState } from "react"; // --------------------------------------------------------------------------- // SinkholeRavel — a destructive-action confirm modeled on cover-collapse // sinkhole formation in karst terrain: groundwater dissolves a void in the // bedrock, and the granular cover above it doesn't just sit there — grains at // the void's ceiling continuously RAVEL (individually lose support and fall // into the cavity, a real geotechnical term), so the void migrates upward // through the overburden one grain-layer at a time as a narrow "stoping" // chimney. This can run a long time with no surface expression. Once the // chimney gets close enough to the surface, the remaining crust can no // longer arch-bridge its own weight and drops in one sudden collapse, // leaving a crater whose loose rim material immediately starts sliding back // in to partially backfill it — never fully, so the scar is visible going // into the next cycle, which renucleates at a new lateral position. // // A canvas cross-section renders a lattice of grains packed into rows // (count derived from the container's smaller dimension). A single scalar // void height (0 = void only at the bedrock line, 1 = void has reached the // surface crust) tracks how far the chimney has migrated. Grains fall out of // the lattice individually, each on its own randomized per-250ms trigger // once it enters the ravel band (void height +/- one grain-row) — never in a // body-wide sweep — so the ravel front reads as organic, independently-timed // grain loss rather than a wipe. Crossing 0.94 fires the one big legible // event per cycle: the remaining crust drops as a fast 220ms collapse, then // loose rim grains slide back in along a 34deg angle-of-repose slope for // 3.5s, refilling to ~55% before the chimney renucleates at a new x. // // The confirm control is click-arm-then-confirm: arming visibly accelerates // the ambient ravel rate (teasing an early collapse, fully reversible — a // second click within the window, Escape, or blur before that resolves // nothing), a second click inside the window forces the collapse // immediately regardless of where the ambient cycle sits and fires // onConfirm once, exactly as the crater finishes dropping. // // Every colour is read from the theme via getComputedStyle on // document.documentElement, re-read on a MutationObserver watching its // class, and nothing paints before that first read. --ns-accent never // touches the grains/void/collapse — it is the confirm button's own chrome. // --------------------------------------------------------------------------- type Phase = "ravel" | "collapsing" | "backfilling" | "waiting"; interface Grain { x: number; y: number; r: number; rowFrac: number; // 0 = bedrock (bottom), 1 = surface (top) state: "alive" | "falling" | "gone"; fallStart: number; fallDur: number; fallDist: number; } const RAVEL_RATE = 0.09; // void-height fraction / s, ambient const RAVEL_JITTER = 0.15; // +/-15% amplitude const RAVEL_JITTER_MS = 400; const RAVEL_TICK_MS = 250; const RAVEL_CHANCE = 1 / 6; // per eligible grain, per tick const FALL_DUR_MS = 180; const COLLAPSE_THRESHOLD = 0.94; const COLLAPSE_CRUST_FRAC = 0.06; // top 6% of overburden height const COLLAPSE_DUR_MS = 220; const BACKFILL_DUR_MS = 3500; const BACKFILL_GRAIN_MS = 140; const BACKFILL_FILL_FRAC = 0.55; const BACKFILL_SLOPE_DEG = 34; const RENUCLEATE_DELAY_MS = 900; const ARM_WINDOW_MS = 3200; const ARM_RATE_MULT = 3.5; const ARM_EASE_PER_S = 3.4; // how fast the accel/de-accel ramps function mulberry32(seed: number) { let a = seed >>> 0; return () => { a = (a + 0x6d2b79f5) >>> 0; let t = a; t = Math.imul(t ^ (t >>> 15), t | 1); t ^= t + Math.imul(t ^ (t >>> 7), t | 61); return ((t ^ (t >>> 14)) >>> 0) / 4294967296; }; } function buildGrains( w: number, h: number, minDim: number, rand: () => number ): { grains: Grain[]; rows: number; avgR: number } { const maxGrains = Math.min(2400, Math.max(1800, Math.round((minDim * minDim) / 340))); const cell = Math.sqrt((w * h) / maxGrains); const cols = Math.max(4, Math.round(w / cell)); const rows = Math.max(4, Math.round(h / cell)); const cw = w / cols; const ch = h / rows; const grains: Grain[] = []; let rSum = 0; for (let row = 0; row < rows; row++) { const rowFrac = rows > 1 ? (rows - 1 - row) / (rows - 1) : 1; for (let col = 0; col < cols; col++) { const x = (col + 0.5) * cw + (rand() - 0.5) * 0.7 * cw; const y = (row + 0.5) * ch + (rand() - 0.5) * 0.7 * ch; const r = Math.min(cw, ch) * 0.32 * (0.85 + 0.3 * rand()); rSum += r; grains.push({ x, y, r, rowFrac, state: "alive", fallStart: 0, fallDur: 0, fallDist: 0 }); } } return { grains, rows, avgR: rSum / Math.max(1, grains.length) }; } export interface SinkholeRavelProps { /** idle button label */ children?: string; /** label shown once armed, awaiting the confirming click */ armedLabel?: string; /** ms the armed window stays open before it auto de-arms */ armWindowMs?: number; /** fired once, exactly as the forced crater finishes dropping */ onConfirm?: () => void; /** extra classes merged onto the rendered root element */ className?: string; } export function SinkholeRavel({ children = "Trigger collapse", armedLabel = "Confirm collapse", armWindowMs = ARM_WINDOW_MS, onConfirm, className = "", }: SinkholeRavelProps) { const rootRef = useRef(null); const canvasRef = useRef(null); const [armed, setArmed] = useState(false); const [announcement, setAnnouncement] = useState(""); const onConfirmRef = useRef(onConfirm); onConfirmRef.current = onConfirm; const armWindowRef = useRef(armWindowMs); armWindowRef.current = armWindowMs; const s = useRef({ grains: [] as Grain[], rows: 1, avgR: 2, w: 0, h: 0, dpr: 1, chimneyBase: 0, chimneyX: 0, voidFrac: 0, phase: "ravel" as Phase, jitterMult: 1, lastJitterAt: 0, raveAcc: 0, collapseStart: 0, backfillStart: 0, backfillAcc: 0, backfillSpawned: 0, backfillTarget: 0, waitStart: 0, armed: false, armEase: 0, armTimer: 0, seedCounter: 1, rand: mulberry32(0x5117e0), reduced: false, visible: true, raf: 0, last: 0, mountedAt: 0, tokens: { foreground: "", muted: "", background: "" }, }); useEffect(() => { const st = s.current; const root = rootRef.current; const canvas = canvasRef.current; if (!root || !canvas) return; const ctx = canvas.getContext("2d"); if (!ctx) return; st.mountedAt = performance.now(); st.rand = mulberry32(0xa11ce5ee); const syncTokens = () => { const cs = getComputedStyle(document.documentElement); st.tokens.foreground = cs.getPropertyValue("--foreground").trim(); st.tokens.muted = cs.getPropertyValue("--ns-muted").trim(); st.tokens.background = cs.getPropertyValue("--background").trim(); draw(performance.now()); }; const radiusAt = (rowFrac: number) => st.chimneyBase * (0.6 + 0.4 * rowFrac); const inChimney = (g: Grain) => Math.abs(g.x - st.chimneyX) < radiusAt(g.rowFrac); const triggerFall = (g: Grain, now: number, dur: number, extraDelay: number) => { g.state = "falling"; g.fallStart = now + extraDelay; g.fallDur = dur; g.fallDist = g.r * (2.4 + st.rand() * 2.2); }; // -- one 250ms tick: any alive grain in the chimney whose row sits within // one grain-row of the current void front rolls an independent 1-in-6 // chance to ravel early; anything the front has already passed by more // than a few rows is force-removed as a safety net so nothing is left // floating mid-void. -------------------------------------------------- const raveTick = (now: number) => { const bandHalf = 1 / st.rows; for (const g of st.grains) { if (g.state !== "alive" || !inChimney(g)) continue; const ahead = g.rowFrac - st.voidFrac; // + = not yet engulfed if (ahead < -3 * bandHalf) { triggerFall(g, now, FALL_DUR_MS, 0); } else if (ahead <= bandHalf) { if (st.rand() < RAVEL_CHANCE) triggerFall(g, now, FALL_DUR_MS, 0); } } }; const beginCollapse = (now: number, forced: boolean) => { st.phase = "collapsing"; st.collapseStart = now; st.voidFrac = 1; const crustFloor = forced ? 0 : 1 - COLLAPSE_CRUST_FRAC; for (const g of st.grains) { if (g.state === "alive" && inChimney(g) && g.rowFrac >= crustFloor) { triggerFall(g, now, COLLAPSE_DUR_MS, st.rand() * 40); } } if (forced) { setAnnouncement("Collapsing."); } (st as unknown as { pendingConfirm: boolean }).pendingConfirm = forced; }; const beginBackfill = (now: number) => { st.phase = "backfilling"; st.backfillStart = now; st.backfillAcc = 0; st.backfillSpawned = 0; st.backfillTarget = Math.round(BACKFILL_DUR_MS / BACKFILL_GRAIN_MS); if ((st as unknown as { pendingConfirm: boolean }).pendingConfirm) { (st as unknown as { pendingConfirm: boolean }).pendingConfirm = false; onConfirmRef.current?.(); } }; const spawnBackfillGrain = (now: number) => { const rimRadius = st.chimneyBase * (0.6 + 0.4 * 1) * 1.25; const rowFrac = st.rand() * BACKFILL_FILL_FRAC; const spanFrac = 0.55 + 0.4 * st.rand(); const x = st.chimneyX + (st.rand() - 0.5) * 2 * rimRadius * spanFrac; const y = st.h - rowFrac * st.h; const r = st.avgR * (0.85 + 0.3 * st.rand()); st.grains.push({ x, y, r, rowFrac, state: "falling", fallStart: now, fallDur: 260 + st.rand() * 120, fallDist: -st.avgR * 1.6, // slides IN (fades up from below-alpha) rather than out }); // the "fall" here is used in reverse as an arrival tween — patched below }; const renucleate = (now: number) => { const w = st.w; const prevX = st.chimneyX; let nx = prevX; let guard = 0; while (Math.abs(nx - prevX) < w * 0.22 && guard < 12) { nx = w * (0.18 + st.rand() * 0.64); guard++; } st.chimneyX = nx; st.voidFrac = 0; st.phase = "ravel"; st.raveAcc = 0; }; // -- draw --------------------------------------------------------------- const draw = (now: number) => { const { w, h, dpr } = st; if (!w || !h) return; ctx.setTransform(dpr, 0, 0, dpr, 0, 0); ctx.clearRect(0, 0, w, h); const bandHalf = 1 / st.rows; for (const g of st.grains) { if (g.state === "gone") continue; let alpha = 0.55; let gy = g.y; if (g.state === "falling") { const t = Math.max(0, Math.min(1, (now - g.fallStart) / g.fallDur)); if (now < g.fallStart) continue; if (g.fallDist < 0) { // backfill arrival: fades/slides in rather than out alpha = 0.55 * t; gy = g.y - g.fallDist * (1 - t); } else { const ease = t * t; alpha = 0.55 * (1 - t); gy = g.y + g.fallDist * ease; } if (t >= 1) { if (g.fallDist < 0) { g.state = "alive"; gy = g.y; alpha = 0.55; } else { g.state = "gone"; continue; } } } else { const ahead = g.rowFrac - st.voidFrac; if (st.phase === "ravel" && ahead >= -bandHalf && ahead <= bandHalf && Math.abs(g.x - st.chimneyX) < radiusAt(g.rowFrac) + g.r * 3) { const glowT = 0.5 + 0.5 * Math.sin((now - st.mountedAt) / 180 + g.x * 0.05); ctx.globalAlpha = 0.14 + 0.14 * glowT; ctx.fillStyle = st.tokens.muted; ctx.beginPath(); ctx.arc(g.x, gy, g.r * 2.1, 0, Math.PI * 2); ctx.fill(); } } ctx.globalAlpha = alpha; ctx.fillStyle = st.tokens.foreground; ctx.beginPath(); ctx.arc(g.x, gy, g.r, 0, Math.PI * 2); ctx.fill(); } ctx.globalAlpha = 1; }; // -- main loop ------------------------------------------------------ const tick = (now: number) => { if (!st.visible) { st.raf = 0; return; } const dt = Math.min(0.064, st.last ? (now - st.last) / 1000 : 0); st.last = now; if (now - st.lastJitterAt >= RAVEL_JITTER_MS) { st.lastJitterAt = now; st.jitterMult = 1 + (st.rand() * 2 - 1) * RAVEL_JITTER; } const armTarget = st.armed ? 1 : 0; st.armEase += (armTarget - st.armEase) * Math.min(1, ARM_EASE_PER_S * dt); if (st.phase === "ravel") { const rate = RAVEL_RATE * st.jitterMult * (1 + st.armEase * (ARM_RATE_MULT - 1)); st.voidFrac = Math.min(1, st.voidFrac + rate * dt); st.raveAcc += dt * 1000; while (st.raveAcc >= RAVEL_TICK_MS) { st.raveAcc -= RAVEL_TICK_MS; raveTick(now); } if (st.voidFrac >= COLLAPSE_THRESHOLD) beginCollapse(now, false); } else if (st.phase === "collapsing") { if (now - st.collapseStart >= COLLAPSE_DUR_MS + 60) beginBackfill(now); } else if (st.phase === "backfilling") { st.backfillAcc += dt * 1000; while (st.backfillAcc >= BACKFILL_GRAIN_MS && st.backfillSpawned < st.backfillTarget) { st.backfillAcc -= BACKFILL_GRAIN_MS; st.backfillSpawned += 1; spawnBackfillGrain(now); } if (now - st.backfillStart >= BACKFILL_DUR_MS) { st.phase = "waiting"; st.waitStart = now; } } else if (st.phase === "waiting") { if (now - st.waitStart >= RENUCLEATE_DELAY_MS) renucleate(now); } draw(now); st.raf = requestAnimationFrame(tick); }; const wake = () => { if (st.raf || !st.visible || st.reduced) return; st.last = 0; st.raf = requestAnimationFrame(tick); }; // -- reduced motion: run the sim forward deterministically to exactly // the post-collapse, pre-backfill instant (crater fully open, walls // sharp) and render once — the single most structured frame. --------- const runReducedToFreeze = () => { const stepMs = 16; let now = st.mountedAt; let safety = 0; while (st.phase !== "collapsing" && safety < 4000) { now += stepMs; const dt = stepMs / 1000; st.voidFrac = Math.min(1, st.voidFrac + RAVEL_RATE * dt); st.raveAcc += stepMs; while (st.raveAcc >= RAVEL_TICK_MS) { st.raveAcc -= RAVEL_TICK_MS; raveTick(now); } if (st.voidFrac >= COLLAPSE_THRESHOLD) beginCollapse(now, false); safety++; } // land every triggered fall exactly at its finished state for (const g of st.grains) { if (g.state === "falling") g.state = "gone"; } draw(now + COLLAPSE_DUR_MS + 10); }; const startField = () => { const rect = root.getBoundingClientRect(); const w = rect.width; const h = rect.height; if (w < 2 || h < 2) return; st.dpr = Math.min(2, window.devicePixelRatio || 1); canvas.width = Math.max(1, Math.round(w * st.dpr)); canvas.height = Math.max(1, Math.round(h * st.dpr)); canvas.style.width = `${w}px`; canvas.style.height = `${h}px`; st.w = w; st.h = h; const minDim = Math.min(w, h); const rand = mulberry32(0x9e3779 ^ st.seedCounter); st.seedCounter += 1; const built = buildGrains(w, h, minDim, rand); st.grains = built.grains; st.rows = built.rows; st.avgR = built.avgR; st.chimneyBase = minDim * 0.17; st.chimneyX = w * (0.32 + rand() * 0.36); st.voidFrac = 0; st.phase = "ravel"; st.raveAcc = 0; st.lastJitterAt = 0; st.jitterMult = 1; cancelAnimationFrame(st.raf); st.raf = 0; st.last = 0; if (st.reduced) { runReducedToFreeze(); return; } draw(performance.now()); wake(); }; let resizeTimer = 0; const onResize = () => { window.clearTimeout(resizeTimer); resizeTimer = window.setTimeout(startField, 100); }; const ro = new ResizeObserver(onResize); ro.observe(root); const io = new IntersectionObserver(([entry]) => { st.visible = entry?.isIntersecting ?? true; if (st.visible) wake(); else if (st.raf) { cancelAnimationFrame(st.raf); st.raf = 0; } }); io.observe(root); const onVisChange = () => { if (document.hidden) { if (st.raf) { cancelAnimationFrame(st.raf); st.raf = 0; } } else { wake(); } }; document.addEventListener("visibilitychange", onVisChange); const mo = new MutationObserver(syncTokens); mo.observe(document.documentElement, { attributes: true, attributeFilter: ["class"] }); const mq = window.matchMedia("(prefers-reduced-motion: reduce)"); const onMq = () => { st.reduced = mq.matches; if (st.raf) { cancelAnimationFrame(st.raf); st.raf = 0; } startField(); }; st.reduced = mq.matches; mq.addEventListener("change", onMq); syncTokens(); startField(); // -- confirm arm/commit — click driven, keyboard-equivalent via Enter/ // Space on the button, Escape and blur both de-arm. -------------------- const deArm = () => { if (!st.armed) return; st.armed = false; setArmed(false); setAnnouncement(""); window.clearTimeout(st.armTimer); }; const handleActivate = () => { if (st.phase !== "ravel") return; if (!st.armed) { st.armed = true; setArmed(true); setAnnouncement("Armed. Confirm to collapse."); window.clearTimeout(st.armTimer); st.armTimer = window.setTimeout(deArm, armWindowRef.current); } else { window.clearTimeout(st.armTimer); st.armed = false; setArmed(false); beginCollapse(performance.now(), true); wake(); } }; const btn = root.querySelector("[data-sinkhole-confirm]"); const onClick = () => handleActivate(); const onKeyDown = (e: KeyboardEvent) => { if (e.key === "Escape" && st.armed) deArm(); }; const onBlur = () => deArm(); btn?.addEventListener("click", onClick); btn?.addEventListener("keydown", onKeyDown); btn?.addEventListener("blur", onBlur); return () => { cancelAnimationFrame(st.raf); st.raf = 0; window.clearTimeout(resizeTimer); window.clearTimeout(st.armTimer); ro.disconnect(); io.disconnect(); mo.disconnect(); document.removeEventListener("visibilitychange", onVisChange); mq.removeEventListener("change", onMq); btn?.removeEventListener("click", onClick); btn?.removeEventListener("keydown", onKeyDown); btn?.removeEventListener("blur", onBlur); }; // eslint-disable-next-line react-hooks/exhaustive-deps }, []); return (

); } const CSS = ` .ns-skr-btn{display:inline-flex;height:30px;align-items:center;justify-content:center;border-radius:6px;padding:0 12px;border:1px solid var(--border);background:var(--background);color:var(--ns-muted);font-family:var(--font-geist-mono,ui-monospace,monospace);font-size:11px;letter-spacing:0.02em;transition:background-color 150ms ease-out,color 150ms ease-out,border-color 150ms ease-out} .ns-skr-btn:hover{color:var(--foreground);border-color:var(--foreground)} .ns-skr-btn:focus-visible{outline:2px solid var(--ns-accent);outline-offset:2px} .ns-skr-btn[data-armed="true"]{color:var(--ns-accent);border-color:var(--ns-accent)} @media (prefers-reduced-motion: reduce){ .ns-skr-btn{transition:none} } `; export default SinkholeRavel; 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"}]]}],["$","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"}]]}]]}],["$","$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)"}]]}],["$","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)"}]]}]]}],["$","$L4f",null,{"orientation":"horizontal"}]]}]}]]}],null]}]}]}]]}],["$","$L50",null,{"files":[{"path":"registry/core/sinkhole-ravel/component.tsx","content":"$51","type":"registry:ui","target":"components/ui/sinkhole-ravel.tsx"}],"className":"h-[70svh] min-h-80"}]]}]