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:T5099,"use client"; import { useEffect, useLayoutEffect, useMemo, useRef, useState } from "react"; // --------------------------------------------------------------------------- // SeepLattice — a feature-flag rollout picker where "blast radius" is // computed as literal site percolation, not a smooth percentage. Every user // segment is a cell in a fixed grid lattice; adjacency is DECLARED as an // explicit edge list (each cell's up/down/left/right neighbours — the // lattice standing in for shared-infra/shared-tenancy proximity), never // inferred from distance to the slider value. One scalar `p` (the rollout // percentage) governs everything: a fixed seeded permutation orders every // cell once at mount, and the wet set is always exactly the first // round(p/100 * n) cells of that order — so p directly prefixes the wet // set, dragging back down un-wets in EXACT reverse, and nothing is ever // re-rolled mid-drag. On every value change, union-find runs over the // declared adjacency graph (never a radial or rectangular zone guess) to // find the largest connected wet cluster; that cluster's outer boundary is // traced into ONE SVG perimeter path (marching-squares-style edge walk, not // per-cell borders), and its size is the headline figure. The containment // threshold line is measured once at mount by binary search over THIS // lattice's actual spanning behaviour (top-row-to-bottom-row connectivity), // not the textbook 0.5927 — a finite lattice with this adjacency has its // own threshold. Newly-wet cells fill with a capillary stagger: a mini BFS // over just the cells added this step, seeded from wherever they touch // already-wet cells, delays each cell's fill transition by its BFS depth — // water visibly floods outward from existing wet regions, not a uniform // flash. Everything is a pure function of p and the lattice; the only // interactive control is the rollout slider itself. // --------------------------------------------------------------------------- const CELL_GAP = 0.16; // inset per cell, in viewBox cell-units const FRONT_SPEED_MS = 16; // ms per BFS-depth step of capillary stagger const MAX_STAGGER_MS = 260; // cap so a huge jump doesn't queue forever const FILL_DURATION_MS = 200; function clamp(v: number, lo: number, hi: number) { return Math.min(hi, Math.max(lo, v)); } // -- seeded PRNG + permutation ---------------------------------------------- function mulberry32(seed: number) { let s = seed >>> 0; return function rand() { s = (s + 0x6d2b79f5) | 0; let t = Math.imul(s ^ (s >>> 15), 1 | s); t = (t + Math.imul(t ^ (t >>> 7), 61 | t)) ^ t; return ((t ^ (t >>> 14)) >>> 0) / 4294967296; }; } function seededOrder(n: number, seed: number): number[] { const order = Array.from({ length: n }, (_, i) => i); const rand = mulberry32(seed); for (let i = n - 1; i > 0; i--) { const j = Math.floor(rand() * (i + 1)); const tmp = order[i]; order[i] = order[j]; order[j] = tmp; } return order; } // -- declared adjacency (4-neighbour grid, explicit edge list) -------------- function buildNeighbors(rows: number, cols: number): number[][] { const n = rows * cols; const neighbors: number[][] = new Array(n); for (let r = 0; r < rows; r++) { for (let c = 0; c < cols; c++) { const idx = r * cols + c; const list: number[] = []; if (r > 0) list.push(idx - cols); if (r < rows - 1) list.push(idx + cols); if (c > 0) list.push(idx - 1); if (c < cols - 1) list.push(idx + 1); neighbors[idx] = list; } } return neighbors; } // -- spanning test (top row <-> bottom row) over the wet prefix ------------- function isSpanning( k: number, order: number[], neighbors: number[][], rows: number, cols: number, n: number ): boolean { const TOP = n; const BOTTOM = n + 1; const parent = new Int32Array(n + 2); for (let i = 0; i < n + 2; i++) parent[i] = i; const find = (x: number): number => { while (parent[x] !== x) { parent[x] = parent[parent[x]]; x = parent[x]; } return x; }; const union = (a: number, b: number) => { const ra = find(a); const rb = find(b); if (ra !== rb) parent[ra] = rb; }; const wet = new Uint8Array(n); for (let i = 0; i < k; i++) wet[order[i]] = 1; for (let c = 0; c < n; c++) { if (!wet[c]) continue; const row = Math.floor(c / cols); if (row === 0) union(c, TOP); if (row === rows - 1) union(c, BOTTOM); for (const nb of neighbors[c]) if (wet[nb]) union(c, nb); } return find(TOP) === find(BOTTOM); } interface Lattice { n: number; rows: number; cols: number; neighbors: number[][]; order: number[]; thresholdK: number; thresholdPct: number; } // Built once per (rows, cols, seed): declares adjacency, fixes the wetting // permutation, and measures this exact lattice's own percolation threshold // by binary search (spanning is monotonic in k since wet cells only ever // accumulate along a fixed prefix). function buildLattice(rows: number, cols: number, seed: number): Lattice { const n = rows * cols; const neighbors = buildNeighbors(rows, cols); const order = seededOrder(n, seed); let lo = 0; let hi = n; while (lo + 1 < hi) { const mid = (lo + hi) >> 1; if (isSpanning(mid, order, neighbors, rows, cols, n)) hi = mid; else lo = mid; } return { n, rows, cols, neighbors, order, thresholdK: hi, thresholdPct: (hi / n) * 100 }; } // -- union-find over the wet prefix, every frame ----------------------------- interface WetResult { wetMask: Uint8Array; clusterMask: Uint8Array; largestSize: number; } function computeWet(k: number, lattice: Lattice): WetResult { const { n, order, neighbors } = lattice; const wet = new Uint8Array(n); for (let i = 0; i < k; i++) wet[order[i]] = 1; const parent = new Int32Array(n); const size = new Int32Array(n).fill(1); for (let i = 0; i < n; i++) parent[i] = i; const find = (x: number): number => { while (parent[x] !== x) { parent[x] = parent[parent[x]]; x = parent[x]; } return x; }; const union = (a: number, b: number) => { let ra = find(a); let rb = find(b); if (ra === rb) return; if (size[ra] < size[rb]) { const t = ra; ra = rb; rb = t; } parent[rb] = ra; size[ra] += size[rb]; }; for (let c = 0; c < n; c++) { if (!wet[c]) continue; for (const nb of neighbors[c]) if (wet[nb]) union(c, nb); } let bestRoot = -1; let bestSize = 0; for (let c = 0; c < n; c++) { if (!wet[c]) continue; const r = find(c); if (size[r] > bestSize) { bestSize = size[r]; bestRoot = r; } } const clusterMask = new Uint8Array(n); if (bestRoot >= 0) { for (let c = 0; c < n; c++) if (wet[c] && find(c) === bestRoot) clusterMask[c] = 1; } return { wetMask: wet, clusterMask, largestSize: bestSize }; } // -- trace the largest cluster's outer boundary into one (or more, if it // has a hole) SVG path loop, by walking declared grid edges — not by // drawing per-cell borders. Any deterministic pick at a rare diagonal-touch // vertex still decomposes the edge set into valid closed loops. ----------- function tracePerimeter(mask: Uint8Array, rows: number, cols: number): string { const at = (r: number, c: number): boolean => r >= 0 && r < rows && c >= 0 && c < cols ? mask[r * cols + c] === 1 : false; const out = new Map(); const push = (fx: number, fy: number, tx: number, ty: number) => { const key = `${fx},${fy}`; const arr = out.get(key); if (arr) arr.push({ x: tx, y: ty }); else out.set(key, [{ x: tx, y: ty }]); }; for (let r = 0; r < rows; r++) { for (let c = 0; c < cols; c++) { if (!at(r, c)) continue; if (!at(r - 1, c)) push(c + 1, r, c, r); // north edge, right -> left if (!at(r, c + 1)) push(c + 1, r + 1, c + 1, r); // east edge, bottom -> top if (!at(r + 1, c)) push(c, r + 1, c + 1, r + 1); // south edge, left -> right if (!at(r, c - 1)) push(c, r, c, r + 1); // west edge, top -> bottom } } const loops: { x: number; y: number }[][] = []; for (const [startKey, arr] of out) { while (arr.length) { const [sx, sy] = startKey.split(",").map(Number); let cx = sx; let cy = sy; const loop: { x: number; y: number }[] = [{ x: cx, y: cy }]; let guard = 0; while (guard++ < 100000) { const outs = out.get(`${cx},${cy}`); if (!outs || outs.length === 0) break; const next = outs.pop() as { x: number; y: number }; cx = next.x; cy = next.y; if (cx === sx && cy === sy) break; loop.push({ x: cx, y: cy }); } if (loop.length >= 3) loops.push(loop); } } if (!loops.length) return ""; return loops.map((loop) => `M ${loop.map((p) => `${p.x} ${p.y}`).join(" L ")} Z`).join(" "); } // ----------------------------------------------------------------------------- export interface SeepLatticeProps { /** lattice height, in cells (kept small so union-find stays cheap per frame) */ rows?: number; /** lattice width, in cells */ cols?: number; /** fixed seed for the wetting permutation and adjacency — same seed, same lattice */ seed?: number; /** controlled rollout percentage, 0-100 */ rollout?: number; /** uncontrolled initial rollout percentage */ defaultRollout?: number; /** called with the new rollout percentage on every change */ onRolloutChange?: (v: number) => void; /** noun used in the readouts, e.g. "traffic" (default) or "requests" */ segmentLabel?: string; /** extra classes merged onto the root element */ className?: string; } export function SeepLattice({ rows = 16, cols = 24, seed = 20260817, rollout, defaultRollout = 35, onRolloutChange, segmentLabel = "traffic", className = "", }: SeepLatticeProps) { const isControlled = rollout !== undefined; const [rolloutInternal, setRolloutInternal] = useState(() => clamp(defaultRollout, 0, 100)); const value = isControlled ? (rollout as number) : rolloutInternal; const valueRef = useRef(value); valueRef.current = value; const safeRows = Math.max(2, Math.floor(rows)); const safeCols = Math.max(2, Math.floor(cols)); const lattice = useMemo(() => buildLattice(safeRows, safeCols, seed), [safeRows, safeCols, seed]); const [reduced, setReduced] = useState(false); useEffect(() => { const mq = window.matchMedia("(prefers-reduced-motion: reduce)"); const update = () => setReduced(mq.matches); update(); mq.addEventListener("change", update); return () => mq.removeEventListener("change", update); }, []); const k = clamp(Math.round((value / 100) * lattice.n), 0, lattice.n); const { wetMask, clusterMask, largestSize } = useMemo(() => computeWet(k, lattice), [k, lattice]); const perimeterD = useMemo( () => tracePerimeter(clusterMask, lattice.rows, lattice.cols), [clusterMask, lattice] ); const clusterPct = lattice.n > 0 ? Math.round((largestSize / lattice.n) * 100) : 0; const roundedRollout = Math.round(value); const thresholdRoundedPct = Math.round(lattice.thresholdPct); const aboveThreshold = k >= lattice.thresholdK; // -- capillary stagger: a mini BFS over just this step's newly-wet cells, // seeded from wherever they touch already-wet cells, sets each affected // cell's transition-delay directly (skipped outright under reduced motion // — cells then just snap, no stagger, no entrance). Runs in a layout // effect so the delay lands before the browser paints the fill change // committed in the same render. -------------------------------------- const cellElsRef = useRef<(SVGRectElement | null)[]>([]); const prevKRef = useRef(0); const prevWetRef = useRef(null); useLayoutEffect(() => { const { n, order, neighbors } = lattice; if (!prevWetRef.current || prevWetRef.current.length !== n) { prevWetRef.current = new Uint8Array(n); prevKRef.current = 0; } const prevWet = prevWetRef.current; const prevK = prevKRef.current; // Un-wetting (dragging p down) is always instant with no stagger — clear // any delay left over from a prior flood before deciding whether this // step needs a new one, or a cell that flooded in staggered would dry // out staggered by a delay computed for a different pass. for (let i = 0; i < n; i++) { const el = cellElsRef.current[i]; if (el && el.style.transitionDelay) el.style.transitionDelay = ""; } if (!reduced && k > prevK) { const newlySet = new Set(); for (let i = prevK; i < k; i++) newlySet.add(order[i]); const depth = new Map(); const queue: number[] = []; for (const cell of newlySet) { for (const nb of neighbors[cell]) { if (prevWet[nb]) { depth.set(cell, 0); queue.push(cell); break; } } } if (queue.length === 0) { for (const cell of newlySet) { depth.set(cell, 0); queue.push(cell); } } let qi = 0; while (qi < queue.length) { const cur = queue[qi++]; const d = depth.get(cur) as number; for (const nb of neighbors[cur]) { if (newlySet.has(nb) && !depth.has(nb)) { depth.set(nb, d + 1); queue.push(nb); } } } for (const [cell, d] of depth) { const el = cellElsRef.current[cell]; if (el) el.style.transitionDelay = `${Math.min(d * FRONT_SPEED_MS, MAX_STAGGER_MS)}ms`; } } const curWet = new Uint8Array(n); for (let i = 0; i < k; i++) curWet[order[i]] = 1; prevWetRef.current = curWet; prevKRef.current = k; }, [lattice, k, reduced]); // -- one polite announcement per threshold crossing, in each direction -- const liveRegionRef = useRef(null); const mountedRef = useRef(false); const prevAboveRef = useRef(aboveThreshold); useEffect(() => { if (!mountedRef.current) { mountedRef.current = true; prevAboveRef.current = aboveThreshold; return; } if (aboveThreshold !== prevAboveRef.current) { prevAboveRef.current = aboveThreshold; if (liveRegionRef.current) { liveRegionRef.current.textContent = aboveThreshold ? `Crossed containment threshold — largest connected exposure now spans the lattice.` : `Back below containment threshold.`; } } }, [aboveThreshold]); const commit = (v: number) => { const q = clamp(v, 0, 100); if (Math.abs(q - valueRef.current) < 1e-9) return; if (!isControlled) setRolloutInternal(q); onRolloutChange?.(q); }; const trackRef = useRef(null); const draggingRef = useRef(false); const [active, setActive] = useState(false); const posToValue = (clientX: number): number => { const track = trackRef.current; if (!track) return valueRef.current; const rect = track.getBoundingClientRect(); if (rect.width <= 0) return valueRef.current; return clamp(((clientX - rect.left) / rect.width) * 100, 0, 100); }; const onTrackPointerDown = (e: React.PointerEvent) => { e.preventDefault(); e.currentTarget.setPointerCapture(e.pointerId); draggingRef.current = true; setActive(true); commit(posToValue(e.clientX)); }; const onTrackPointerMove = (e: React.PointerEvent) => { if (!draggingRef.current) return; commit(posToValue(e.clientX)); }; const endDrag = () => { draggingRef.current = false; setActive(false); }; const onKeyDown = (e: React.KeyboardEvent) => { const v = valueRef.current; const cellStep = Math.max(100 / lattice.n, 0.5); let next: number | null = null; switch (e.key) { case "ArrowRight": case "ArrowUp": next = v + cellStep; break; case "ArrowLeft": case "ArrowDown": next = v - cellStep; break; case "PageUp": next = v + 10; break; case "PageDown": next = v - 10; break; case "Home": next = 0; break; case "End": next = 100; break; default: return; } e.preventDefault(); commit(clamp(next, 0, 100)); }; const valueText = `rollout ${roundedRollout}% — largest connected exposure ${clusterPct}% of ${segmentLabel}, ${ aboveThreshold ? "above" : "below" } containment threshold`; return (

Rollout {roundedRollout}%

setActive(true)} onBlur={() => setActive(false)} onPointerDown={onTrackPointerDown} onPointerMove={onTrackPointerMove} onPointerUp={endDrag} onPointerCancel={endDrag} className="group relative mt-1.5 h-5 w-full cursor-pointer touch-none outline-none focus-visible:ring-2 focus-visible:ring-ns-accent focus-visible:ring-offset-2 focus-visible:ring-offset-background" >

threshold {thresholdRoundedPct}% {" · "}largest connected exposure{" "} {clusterPct}% of {segmentLabel} {" — "} {aboveThreshold ? "above" : "below"} containment threshold

); } 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"}]]}],["$","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"}]]}]]}],["$","$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)"}]]}],["$","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)"}]]}]]}],["$","$L66",null,{"orientation":"horizontal"}]]}]}]]}],null]}]}]}]]}],["$","$L67",null,{"files":[{"path":"registry/core/seep-lattice/component.tsx","content":"$68","type":"registry:ui","target":"components/ui/seep-lattice.tsx"}],"className":"h-[70svh] min-h-80"}]]}]