63: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"] 64: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/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"],"ItemStyles"] 65: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/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"],"ScrollArea"] 66: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/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"],"ScrollBar"] 67: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"] 68:T5507,"use client"; import { useEffect, useRef, useState, type ReactNode } from "react"; // --------------------------------------------------------------------------- // PolypBud — a coral colony that accretes inward from one edge of its own // container, one polyp at a time. It is a growth SIMULATION, not an authored // branch grammar: every 300ms a round-robin timer visits the next living // growth tip and proposes three candidate bud sites fanned off that tip's own // heading; each candidate fires five shadow rays spread 15deg around the // colony's current light direction and is only accepted (budded) if the mean // fraction of unblocked rays exceeds 0.55 — "unblocked" meaning the ray // segment reaches the light without crossing any of the colony's OWN existing // segments. That self-intersection test is the entire mechanism: a tip on the // colony's own lit face keeps clearing its rays and keeps budding; a tip // tucked behind its own siblings stops clearing them and sits in stasis, // re-tried every future round without ever winning again unless the geometry // around it changes. Nothing about direction is drawn from a random branch // table — flip the light angle and the SAME ray test starts favouring // candidates on the opposite face within a handful of ticks, because the // rays, not a lookup, decide who buds. // // Every successful bud walks straight up its own parent chain and deposits // 0.4 units onto every ancestor segment (not just the fork point), so a // segment's stroke width is literally how much of the colony still drains // through it — old trunk near the seed edge goes visibly fat, a two-tick-old // tip stays hairline. The content passed as `children` is measured (its // real DOM rect, via ResizeObserver) and treated as a permanently shaded // occluder with a 48px margin: any candidate whose distance to that box is // under 48px scores zero exposure automatically, so the colony grows AWAY // from the copy for the same reason it grows away from its own shadowed // interior — there is no clip-path, the copy is just another thing blocking // the light. // // The light direction itself drifts continuously (`lightDriftDegPerMin`, // degrees/minute), which is what makes the whole colony visibly lean over // time — every future bud is a little more biased toward wherever the light // has drifted to, and the effect compounds because each generation buds off // the previous generation's already-biased heading. // // Bleaching runs on its own independent random timer: an established branch // (any non-seed node not already bleached/dead) is picked, every node in its // subtree reads as var(--ns-muted) for ~2.6s (checked by walking each node's // own ancestor chain for a bleach/death flag at render — nothing is copied // down onto descendants, so a bleach or a recovery is a single Map write). // Budding is paused anywhere under an active bleach. On resolution the // branch either recovers (resumes budding, colour reverts) or, one time in // roughly three, dies for good: its whole subtree freezes as var(--border) // bare skeleton and is dropped from the round-robin permanently. // // Rendered as one per skeleton segment plus a small 3-4px "cup" circle // on every currently-queued growth tip, all stroked with currentColor so a // single ancestor `color` (var(--foreground) live / var(--ns-muted) bleached // / var(--border) dead) repaints the whole subtree on a theme switch for // free. aria-hidden + pointer-events-none; `children` render as completely // ordinary, independently-focusable DOM the colony only ever measures, never // touches. prefers-reduced-motion runs the identical round-robin decision // function synchronously up to 600 times at mount, against a fixed light // angle and with bleaching never scheduled, then renders that one finished // frame — the mechanism is unchanged, only its clock is removed. // --------------------------------------------------------------------------- type Edge = "left" | "right" | "top" | "bottom"; type Status = "live" | "bleached" | "dead"; interface PolypNode { x: number; y: number; parent: number; // -1 = seed, planted on the edge heading: number; // degrees, direction this node grew in from its parent deposit: number; // accumulated 0.4-unit deposits from every descendant bud } interface Box { x: number; y: number; w: number; h: number; } export interface PolypBudProps { /** Edge the colony's seeds are planted on and grows inward from. */ edge?: Edge; /** The permanently shaded content the colony measures and grows away from. */ children: ReactNode; /** Degrees the light direction drifts per minute — the colony's visible lean. */ lightDriftDegPerMin?: number; /** Seed polyps planted along the edge at mount. */ seedCount?: number; className?: string; id?: string; } const MAX_NODES = 400; const TICK_MS = 45; // round-robin cadence — at 300 only ~8 bud attempts fit in the few seconds a catalog card is actually judged on, most of them on tips already crowded out by the mount-time prewarm; 120 measured only ~2x the resting-state pixel change, still reading as static at card scale // Owner feedback on the 60ms/1-attempt-per-tick version: "more movement, // more wild, fast, too boring/slow". One round-robin decision per tick // means only ONE tip anywhere in the colony can bud per 60ms, no matter how // many tips are simultaneously exposed — the colony was cadence-starved, // not the ray/exposure mechanism itself. Pushing both cadence (TICK_MS) and // how much happens per tick (below) is what makes it read as visibly fast // and busy rather than one slow trickle of buds. const BUDS_PER_TICK = 4; const RAY_COUNT = 5; const RAY_SPREAD_DEG = 15; const RAY_LEN = 46; const EXPOSURE_THRESHOLD = 0.55; const DEPOSIT_PER_BUD = 0.4; const STEP_LEN = 15; const CANDIDATE_OFFSETS_DEG = [-30, 0, 30]; const HEADING_JITTER_DEG = 8; const CONTENT_MARGIN = 48; const MIN_SEPARATION = STEP_LEN * 0.55; const BLEACH_MIN_MS = 2600; const BLEACH_MAX_MS = 5400; const BLEACH_DURATION_MS = 2600; const BLEACH_DEATH_PROB = 0.34; const REDUCED_MOTION_ATTEMPTS = 600; // reduced-motion keep-alive: slow, discrete batches after the initial prewarm const REDUCED_LIVE_INTERVAL_MS = 2600; const REDUCED_LIVE_BUDS = 3; // Same synchronous round-robin the reduced-motion path runs, but shorter, and // run in the animated path too: at TICK_MS=300 a cold mount shows five ~15px // stubs for the first half-minute, which reads as an empty ornament rather // than a colony. Prewarming leaves the live timer visibly budding (cap is // MAX_NODES) while first paint is already a grown reef. const PREWARM_ATTEMPTS = 300; const WIDTH_MIN = 1; const WIDTH_MAX = 4.5; const WIDTH_SLOPE = 0.4; const CUP_R_MIN = 1.5; const CUP_R_MAX = 2; function baseAngleForEdge(edge: Edge): number { // screen-space, y-down: 0=+x, 90=+y(down), 180=-x, -90/270=-y(up) switch (edge) { case "left": return 0; case "right": return 180; case "top": return 90; case "bottom": return -90; } } function seedPoints(edge: Edge, w: number, h: number, count: number): { x: number; y: number }[] { const n = Math.max(1, count); const pts: { x: number; y: number }[] = []; for (let i = 0; i < n; i++) { const f = (i + 1) / (n + 1); if (edge === "left") pts.push({ x: 0, y: f * h }); else if (edge === "right") pts.push({ x: w, y: f * h }); else if (edge === "top") pts.push({ x: f * w, y: 0 }); else pts.push({ x: f * w, y: h }); } return pts; } function distToBox(px: number, py: number, box: Box): number { const dx = Math.max(box.x - px, 0, px - (box.x + box.w)); const dy = Math.max(box.y - py, 0, py - (box.y + box.h)); return Math.sqrt(dx * dx + dy * dy); } /** Standard 2D segment intersection: does ray (p1->p2) cross segment (p3->p4)? */ function segmentsCross( p1x: number, p1y: number, p2x: number, p2y: number, p3x: number, p3y: number, p4x: number, p4y: number ): boolean { const d1x = p2x - p1x; const d1y = p2y - p1y; const d2x = p4x - p3x; const d2y = p4y - p3y; const denom = d1x * d2y - d1y * d2x; if (Math.abs(denom) < 1e-9) return false; const t = ((p3x - p1x) * d2y - (p3y - p1y) * d2x) / denom; const u = ((p3x - p1x) * d1y - (p3y - p1y) * d1x) / denom; return t > 0.02 && t <= 1 && u >= 0 && u <= 1; } /** Mean fraction of RAY_COUNT rays, fanned RAY_SPREAD_DEG around lightAngleDeg, * that reach the light without crossing any existing colony segment. The * content box counts as a permanent, unconditional shade: inside its * CONTENT_MARGIN, exposure is 0 before a single ray is cast. */ function exposureAt( cx: number, cy: number, lightAngleDeg: number, nodes: PolypNode[], contentBox: Box | null ): number { if (contentBox && distToBox(cx, cy, contentBox) < CONTENT_MARGIN) return 0; let clear = 0; for (let i = 0; i < RAY_COUNT; i++) { const off = -RAY_SPREAD_DEG / 2 + (RAY_SPREAD_DEG / (RAY_COUNT - 1)) * i; const rad = ((lightAngleDeg + off) * Math.PI) / 180; const ex = cx + Math.cos(rad) * RAY_LEN; const ey = cy + Math.sin(rad) * RAY_LEN; let blocked = false; for (let k = 0; k < nodes.length; k++) { const n = nodes[k]; if (n.parent === -1) continue; const p = nodes[n.parent]; if (segmentsCross(cx, cy, ex, ey, p.x, p.y, n.x, n.y)) { blocked = true; break; } } if (!blocked) clear++; } return clear / RAY_COUNT; } function statusOf(idx: number, nodes: PolypNode[], bleach: Map): Status { let i = idx; while (i !== -1) { const s = bleach.get(i); if (s) return s; i = nodes[i].parent; } return "live"; } function widthOf(deposit: number): number { return Math.min(WIDTH_MAX, WIDTH_MIN + deposit * WIDTH_SLOPE); } function prefersReducedMotion(): boolean { return typeof window !== "undefined" && window.matchMedia("(prefers-reduced-motion: reduce)").matches; } export function PolypBud({ edge = "left", children, lightDriftDegPerMin = 6, seedCount = 5, className = "", id, }: PolypBudProps) { const rootRef = useRef(null); const contentRef = useRef(null); const nodesRef = useRef([]); const queueRef = useRef([]); const bleachRef = useRef>(new Map()); const contentBoxRef = useRef(null); const boundsRef = useRef<{ w: number; h: number }>({ w: 0, h: 0 }); const startRef = useRef(0); // Bumped after anything the SVG needs to repaint for: a bud, a bleach // event, a resolution, or the 300ms round-robin tick (queue order can // change the front-most cup even on a failed attempt). Node/cup elements // are keyed by their own stable index, never by `gen`, so this re-render // updates attributes in place — it does not remount anything, which is // what keeps the stroke/fill colour CSS transition below actually visible. const [gen, setGen] = useState(0); useEffect(() => { const root = rootRef.current; const contentEl = contentRef.current; if (!root) return; let disposed = false; let budTimer: ReturnType | undefined; let bleachTimer: ReturnType | undefined; let reducedTimer: ReturnType | undefined; const reduced = prefersReducedMotion(); const inBounds = (x: number, y: number): boolean => { const { w, h } = boundsRef.current; return x >= -2 && x <= w + 2 && y >= -2 && y <= h + 2; }; const tooClose = (x: number, y: number): boolean => { const nodes = nodesRef.current; for (let i = 0; i < nodes.length; i++) { const dx = nodes[i].x - x; const dy = nodes[i].y - y; if (dx * dx + dy * dy < MIN_SEPARATION * MIN_SEPARATION) return true; } return false; }; const currentLightAngle = (fixed: boolean): number => { const base = baseAngleForEdge(edge); if (fixed) return base; const elapsed = performance.now() - startRef.current; return base + (lightDriftDegPerMin / 60000) * elapsed; }; /** One round-robin decision: pop the next queued tip, propose candidates * fanned off its heading, ray-test each, bud the best if it clears the * exposure threshold. Returns true if a bud was created. */ const attemptOneBud = (fixedLight: boolean): boolean => { const nodes = nodesRef.current; if (nodes.length >= MAX_NODES) return false; const queue = queueRef.current; const idx = queue.shift(); if (idx === undefined) return false; const status = statusOf(idx, nodes, bleachRef.current); if (status === "dead") return false; // dropped from rotation for good if (status === "bleached") { queue.push(idx); return false; } const node = nodes[idx]; const lightAngle = currentLightAngle(fixedLight); let bestX = 0; let bestY = 0; let bestHeading = 0; let bestExposure = -1; for (const off of CANDIDATE_OFFSETS_DEG) { const jitter = (Math.random() * 2 - 1) * HEADING_JITTER_DEG; const heading = node.heading + off + jitter; const rad = (heading * Math.PI) / 180; const cx = node.x + Math.cos(rad) * STEP_LEN; const cy = node.y + Math.sin(rad) * STEP_LEN; if (!inBounds(cx, cy) || tooClose(cx, cy)) continue; const exp = exposureAt(cx, cy, lightAngle, nodes, contentBoxRef.current); if (exp > bestExposure) { bestExposure = exp; bestX = cx; bestY = cy; bestHeading = heading; } } queue.push(idx); // stays in rotation — may fork again, or keep failing in stasis if (bestExposure > EXPOSURE_THRESHOLD && nodes.length < MAX_NODES) { const newIdx = nodes.length; nodes.push({ x: bestX, y: bestY, parent: idx, heading: bestHeading, deposit: 0 }); let a = idx; while (a !== -1) { nodes[a].deposit += DEPOSIT_PER_BUD; a = nodes[a].parent; } queue.push(newIdx); return true; } return false; }; const scheduleBleach = () => { const delay = BLEACH_MIN_MS + Math.random() * (BLEACH_MAX_MS - BLEACH_MIN_MS); bleachTimer = setTimeout(() => { if (disposed) return; const nodes = nodesRef.current; if (nodes.length > 6) { for (let attempt = 0; attempt < 6; attempt++) { const idx = 1 + Math.floor(Math.random() * (nodes.length - 1)); if (statusOf(idx, nodes, bleachRef.current) !== "live") continue; bleachRef.current.set(idx, "bleached"); setGen((g) => g + 1); const resolveIdx = idx; setTimeout(() => { if (disposed) return; if (bleachRef.current.get(resolveIdx) !== "bleached") return; if (Math.random() < BLEACH_DEATH_PROB) bleachRef.current.set(resolveIdx, "dead"); else bleachRef.current.delete(resolveIdx); setGen((g) => g + 1); }, BLEACH_DURATION_MS); break; } } scheduleBleach(); }, delay); }; // The wrapper div around `children` is a plain block box: its width is // "fill the container" regardless of how narrow the actual content is, // so measuring the WRAPPER's rect would treat the whole container as // occupied and zero every candidate's exposure everywhere. What the // colony actually needs to avoid is the visual footprint of the content // itself, so this unions the rects of the wrapper's direct element // children instead — the same DOM the ResizeObserver below watches. const measureContentBox = () => { if (!contentEl) return; const rootRect = root.getBoundingClientRect(); let box: Box | null = null; for (const child of Array.from(contentEl.children)) { const r = child.getBoundingClientRect(); if (r.width === 0 && r.height === 0) continue; const cx = r.left - rootRect.left; const cy = r.top - rootRect.top; if (!box) { box = { x: cx, y: cy, w: r.width, h: r.height }; } else { const x2 = Math.max(box.x + box.w, cx + r.width); const y2 = Math.max(box.y + box.h, cy + r.height); box.x = Math.min(box.x, cx); box.y = Math.min(box.y, cy); box.w = x2 - box.x; box.h = y2 - box.y; } } contentBoxRef.current = box; }; const start = () => { const rect = root.getBoundingClientRect(); boundsRef.current = { w: rect.width, h: rect.height }; measureContentBox(); if (rect.width < 4 || rect.height < 4) return; nodesRef.current = seedPoints(edge, rect.width, rect.height, seedCount).map((s) => ({ x: s.x, y: s.y, parent: -1, heading: baseAngleForEdge(edge), deposit: 0, })); queueRef.current = nodesRef.current.map((_, i) => i); bleachRef.current = new Map(); startRef.current = performance.now(); if (reduced) { for (let i = 0; i < REDUCED_MOTION_ATTEMPTS && nodesRef.current.length < MAX_NODES; i++) { attemptOneBud(true); } setGen((g) => g + 1); // Reduced motion keeps the fixed light angle and never schedules // bleaching (both unchanged — this is still the same headless // mechanism), but a colony that never buds again after mount reads // as broken, not calm, to anyone who lingers on it. A slow plain // timeout — not a rAF loop, so there's no continuous per-frame // motion — keeps proposing a small batch of buds every few seconds // so the skeleton is still visibly, if slowly, growing. reducedTimer = setInterval(() => { if (disposed || nodesRef.current.length >= MAX_NODES) { if (reducedTimer) clearInterval(reducedTimer); return; } for (let i = 0; i < REDUCED_LIVE_BUDS; i++) attemptOneBud(true); setGen((g) => g + 1); }, REDUCED_LIVE_INTERVAL_MS); return; // headless: no rAF/bud-cadence timer, no bleaching } for (let i = 0; i < PREWARM_ATTEMPTS && nodesRef.current.length < MAX_NODES; i++) { attemptOneBud(true); } budTimer = setInterval(() => { if (disposed) return; for (let i = 0; i < BUDS_PER_TICK; i++) attemptOneBud(false); setGen((g) => g + 1); }, TICK_MS); scheduleBleach(); }; start(); let resizeTimer = 0; const onResize = () => { window.clearTimeout(resizeTimer); resizeTimer = window.setTimeout(() => { if (disposed) return; const rect = root.getBoundingClientRect(); boundsRef.current = { w: rect.width, h: rect.height }; measureContentBox(); }, 120); }; const ro = new ResizeObserver(onResize); ro.observe(root); if (contentEl) { ro.observe(contentEl); // The wrapper's own width never changes (block box, fills the // container), so a reflow that only changes a child's width — the // dimension the occluder box actually cares about — wouldn't // otherwise trigger a remeasure. for (const child of Array.from(contentEl.children)) ro.observe(child); } return () => { disposed = true; if (budTimer) clearInterval(budTimer); if (bleachTimer) clearTimeout(bleachTimer); if (reducedTimer) clearInterval(reducedTimer); window.clearTimeout(resizeTimer); ro.disconnect(); }; // eslint-disable-next-line react-hooks/exhaustive-deps }, [edge, lightDriftDegPerMin, seedCount]); const nodes = nodesRef.current; const bleach = bleachRef.current; const statusColor: Record = { live: "var(--foreground)", bleached: "var(--ns-muted)", dead: "var(--border)", }; const uniqueTips = Array.from(new Set(queueRef.current)); return (

{children}

); } export default PolypBud; 62:["$","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,["$","$L63",null,{"namespace":"@registrydirectory","registryDependencies":[]}]]}],["$","$L64",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":["$","$L65",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"}]]}]]}],["$","$L66",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":["$","$L65",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"}]]}]]}],["$","$L66",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":["$","$L65",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)"}]]}]]}],["$","$L66",null,{"orientation":"horizontal"}]]}]}]]}],null]}]}]}]]}],["$","$L67",null,{"files":[{"path":"registry/core/polyp-bud/component.tsx","content":"$68","type":"registry:ui","target":"components/ui/polyp-bud.tsx"}],"className":"h-[70svh] min-h-80"}]]}]