64: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"] 65: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"] 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"],"ScrollArea"] 67: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"] 68: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"] 69:T346e,"use client"; import { useEffect, useRef } from "react"; // --------------------------------------------------------------------------- // CathodeStackGlow — a Nixie-tube stat readout. Ten wire-mesh cathode digits // sit physically stacked behind a common anode mesh; only the struck cathode // ionizes and glows, but the nine unstruck digits stay faintly visible as // ghost outlines through the mesh. A periodic, per-cell "conditioning sweep" // silently strikes all ten digits in turn at low duty cycle so rarely-used // cathodes don't foul. Single canvas, direct rAF loop, zero deps. // --------------------------------------------------------------------------- function hash(seed: number) { const x = Math.sin(seed) * 43758.5453123; return x - Math.floor(x); } function lerp(a: number, b: number, t: number) { return a + (b - a) * t; } function clamp(n: number, lo: number, hi: number) { return Math.max(lo, Math.min(hi, n)); } const DIGIT_GLYPHS = "0123456789"; // real numbers, per spec const GHOST_MIN_DARK = 0.03; const GHOST_MAX_DARK = 0.07; const GHOST_MIN_LIGHT = 0.06; const GHOST_MAX_LIGHT = 0.09; const GHOST_CLAMP_MIN = 0.02; const GHOST_CLAMP_MAX = 0.09; const GHOST_DRIFT_AMPLITUDE = 0.02; // slow oscillation envelope, ±0.5%/min-ish const SWEEP_MIN_MS = 15_000; const SWEEP_MAX_MS = 30_000; const SWEEP_PER_DIGIT_MS = 80; const SWEEP_RISE_MS = 20; const SWEEP_HOLD_MS = 40; const SWEEP_TOTAL_MS = SWEEP_PER_DIGIT_MS * 10; // ~800ms const FLICKER_MIN_HZ = 3; const FLICKER_MAX_HZ = 6; const FLICKER_MIN = 0.92; const FLICKER_MAX = 1.0; const STRIKE_FLASH_MIN_MS = 20; const STRIKE_FLASH_MS_RANGE = 10; // 20-30ms type Cell = { char: string; isDigit: boolean; digit: number; // -1 for non-digit static characters nextSweepAt: number; sweepStart: number | null; flickerCurrent: number; flickerTarget: number; nextFlickerAt: number; strikeFlashUntil: number; }; function randRange(now: number, cellIndex: number, salt: number, lo: number, hi: number) { return lo + hash(now * 0.0001 + cellIndex * 13.7 + salt) * (hi - lo); } function ghostOpacity(cellIndex: number, digit: number, now: number, light: boolean) { const seed = cellIndex * 97.13 + digit * 13.37; const base = light ? lerp(GHOST_MIN_LIGHT, GHOST_MAX_LIGHT, hash(seed)) : lerp(GHOST_MIN_DARK, GHOST_MAX_DARK, hash(seed)); const periodMs = 60_000 + hash(seed + 1) * 180_000; // 1-4 minute drift cycle const phase = hash(seed + 2) * Math.PI * 2; const value = base + GHOST_DRIFT_AMPLITUDE * Math.sin((2 * Math.PI * now) / periodMs + phase); return clamp(value, GHOST_CLAMP_MIN, GHOST_CLAMP_MAX); } function glyphOffset(cellIndex: number, digit: number) { // deterministic fan, sold as physical stacking depth — 0 to ~1.6px const fanAngle = -0.7 + hash(cellIndex * 5.3) * 0.6; const mag = 0.16 + hash(cellIndex * 2.1 + digit * 0.7) * 0.06; return { dx: Math.cos(fanAngle) * digit * mag, dy: Math.sin(fanAngle) * digit * mag, }; } function parseLuminance(color: string): number { const m = color.match(/[\d.]+/g); if (!m || m.length < 3) return 0; const [r, g, b] = m.map(Number); return (0.2126 * r + 0.7152 * g + 0.0722 * b) / 255; } export function CathodeStackGlow({ value = "482", className = "", }: { /** the readout string; non-digit characters (currency signs, separators, decimals) render statically */ value?: string | number; className?: string; }) { const rootRef = useRef(null); const canvasRef = useRef(null); const valueRef = useRef(String(value)); const updateValueRef = useRef<((next: string) => void) | null>(null); const mountedValue = useRef(String(value)); valueRef.current = String(value); useEffect(() => { const root = rootRef.current; const canvas = canvasRef.current; if (!root || !canvas) return; const ctx = canvas.getContext("2d"); if (!ctx) return; const reduced = window.matchMedia("(prefers-reduced-motion: reduce)").matches; // ---- tokens, read fresh, never a literal ---- let fg = ""; let bg = ""; let muted = ""; let isLight = true; const readTokens = () => { const cs = getComputedStyle(document.documentElement); fg = cs.getPropertyValue("--foreground").trim() || fg; bg = cs.getPropertyValue("--background").trim() || bg; muted = cs.getPropertyValue("--ns-muted").trim() || muted; isLight = parseLuminance(bg) > 0.5; }; readTokens(); // no paint before the first token read let cells: Cell[] = []; const buildCells = (str: string, now: number) => { cells = Array.from(str).map((char, i) => { const isDigit = char >= "0" && char <= "9"; return { char, isDigit, digit: isDigit ? Number(char) : -1, nextSweepAt: now + randRange(now, i, 1, SWEEP_MIN_MS, SWEEP_MAX_MS), sweepStart: null, flickerCurrent: 1, flickerTarget: 1, nextFlickerAt: now, strikeFlashUntil: 0, }; }); }; buildCells(valueRef.current, performance.now()); // live prop updates: switch the struck cathode instantly (no crossfade) // and re-strike with a fast 20-30ms flash-up, matching real Nixie switching updateValueRef.current = (next: string) => { const now = performance.now(); if (next.length !== cells.length) { buildCells(next, now); layout(); return; } for (let i = 0; i < next.length; i++) { const char = next[i]; const cell = cells[i]; if (char === cell.char) continue; cell.char = char; cell.isDigit = char >= "0" && char <= "9"; cell.digit = cell.isDigit ? Number(char) : -1; cell.sweepStart = null; cell.strikeFlashUntil = now + STRIKE_FLASH_MIN_MS + hash(now + i) * STRIKE_FLASH_MS_RANGE; } }; let cw = 0; let ch = 0; let cellAdvance = 0; let fontSize = 0; let haloBase = 0; let raf = 0; let last = 0; let visible = true; const layout = () => { const rect = root.getBoundingClientRect(); const w = Math.max(1, Math.round(rect.width)); const h = Math.max(1, Math.round(rect.height)); cw = w; ch = h; const dpr = Math.min(window.devicePixelRatio || 1, 2); canvas.width = w * dpr; canvas.height = h * dpr; canvas.style.width = `${w}px`; canvas.style.height = `${h}px`; ctx.setTransform(dpr, 0, 0, dpr, 0, 0); const count = Math.max(1, cells.length); const baseUnit = Math.min(w / count, h); fontSize = baseUnit * 0.72; ctx.font = `600 ${fontSize}px ui-monospace, "SF Mono", "Cascadia Mono", monospace`; cellAdvance = ctx.measureText("0").width * 1.35; haloBase = baseUnit * 0.08; }; const drawCell = (cell: Cell, index: number, x: number, now: number) => { const cy = ch / 2; ctx.textAlign = "center"; ctx.textBaseline = "middle"; ctx.font = `600 ${fontSize}px ui-monospace, "SF Mono", "Cascadia Mono", monospace`; if (!cell.isDigit) { ctx.globalAlpha = 1; ctx.shadowBlur = 0; ctx.fillStyle = fg; ctx.fillText(cell.char, x, cy); return; } // determine what's currently struck: real digit, or a conditioning // sweep stepping through 0-9 at this cell independently of value let displayDigit = cell.digit; let envelope = 1; let sweeping = false; if (cell.sweepStart != null) { const elapsed = now - cell.sweepStart; if (elapsed >= SWEEP_TOTAL_MS) { cell.sweepStart = null; cell.nextSweepAt = now + randRange(now, index, 3, SWEEP_MIN_MS, SWEEP_MAX_MS); cell.strikeFlashUntil = now + STRIKE_FLASH_MIN_MS + hash(now + index) * STRIKE_FLASH_MS_RANGE; } else { sweeping = true; const step = Math.min(9, Math.floor(elapsed / SWEEP_PER_DIGIT_MS)); const local = elapsed - step * SWEEP_PER_DIGIT_MS; displayDigit = step; if (local < SWEEP_RISE_MS) envelope = local / SWEEP_RISE_MS; else if (local < SWEEP_RISE_MS + SWEEP_HOLD_MS) envelope = 1; else envelope = 1 - (local - SWEEP_RISE_MS - SWEEP_HOLD_MS) / SWEEP_HOLD_MS; envelope = clamp(envelope, 0, 1); } } // ghost stack: all ten cathode positions except whichever is struck now ctx.shadowBlur = 0; ctx.lineWidth = Math.max(1, fontSize * 0.02); ctx.strokeStyle = muted; for (let d = 0; d < 10; d++) { if (d === displayDigit) continue; const { dx, dy } = glyphOffset(index, d); ctx.globalAlpha = ghostOpacity(index, d, now, isLight); ctx.strokeText(DIGIT_GLYPHS[d], x + dx, cy + dy); } // struck digit: full luminance + soft pulsing halo let brightness: number; if (sweeping) { brightness = envelope; // sweep peak matches idle peak (1.0), not a dimmer flash } else if (now < cell.strikeFlashUntil) { brightness = 1; } else { brightness = cell.flickerCurrent; } const { dx, dy } = glyphOffset(index, displayDigit); const haloPulse = haloBase * (1 + 0.1 * Math.sin((cell.flickerCurrent - 0.96) * 25)); ctx.shadowColor = fg; ctx.shadowBlur = haloPulse * brightness; ctx.globalAlpha = brightness; ctx.fillStyle = fg; ctx.fillText(DIGIT_GLYPHS[displayDigit], x + dx, cy + dy); ctx.shadowBlur = 0; }; const tick = (now: number, dt: number) => { for (let i = 0; i < cells.length; i++) { const cell = cells[i]; if (!cell.isDigit) continue; if (cell.sweepStart == null && now >= cell.nextSweepAt) { cell.sweepStart = now; } if (now >= cell.nextFlickerAt) { cell.flickerTarget = lerp(FLICKER_MIN, FLICKER_MAX, hash(now * 0.001 + i * 4.4)); const hz = randRange(now, i, 2, FLICKER_MIN_HZ, FLICKER_MAX_HZ); cell.nextFlickerAt = now + 1000 / hz; } cell.flickerCurrent += (cell.flickerTarget - cell.flickerCurrent) * Math.min(1, dt * 10); } }; const paint = (now: number) => { ctx.clearRect(0, 0, cw, ch); const count = Math.max(1, cells.length); const totalWidth = count * cellAdvance; let x = cw / 2 - totalWidth / 2 + cellAdvance / 2; for (let i = 0; i < cells.length; i++) { drawCell(cells[i], i, x, now); x += cellAdvance; } ctx.globalAlpha = 1; }; const loop = (now: number) => { const dt = Math.min(Math.max((now - (last || now)) / 1000, 0), 0.05); last = now; tick(now, dt); paint(now); raf = requestAnimationFrame(loop); }; const paintReduced = () => { // steady lit digits, full ghost stack at its median opacity — the one // frame that communicates the whole mechanic without an in-between state const now = performance.now(); for (const cell of cells) { cell.sweepStart = null; cell.flickerCurrent = 1; } paint(now); }; let ro: ResizeObserver | undefined; let io: IntersectionObserver | undefined; let mo: MutationObserver | undefined; let colorScheme: MediaQueryList | undefined; const onThemeChange = () => readTokens(); document.fonts.ready.then(() => { if (!root.isConnected) return; readTokens(); layout(); if (reduced) { paintReduced(); return; } last = performance.now(); raf = requestAnimationFrame(loop); ro = new ResizeObserver(() => { layout(); }); ro.observe(root); io = new IntersectionObserver( (entries) => { const entry = entries[0]; if (!entry) return; if (entry.isIntersecting && !visible) { visible = true; readTokens(); // no paint before a fresh token read on resume layout(); last = performance.now(); raf = requestAnimationFrame(loop); } else if (!entry.isIntersecting && visible) { visible = false; cancelAnimationFrame(raf); raf = 0; } }, { threshold: 0 } ); io.observe(root); mo = new MutationObserver(onThemeChange); mo.observe(document.documentElement, { attributes: true, attributeFilter: ["class", "data-theme"], }); colorScheme = window.matchMedia("(prefers-color-scheme: dark)"); colorScheme.addEventListener("change", onThemeChange); }); return () => { cancelAnimationFrame(raf); ro?.disconnect(); io?.disconnect(); mo?.disconnect(); colorScheme?.removeEventListener("change", onThemeChange); }; // eslint-disable-next-line react-hooks/exhaustive-deps }, []); // live value updates after mount: re-strike changed cathodes, no crossfade useEffect(() => { const str = String(value); if (str === mountedValue.current) return; mountedValue.current = str; updateValueRef.current?.(str); }, [value]); return (

); } 63:["$","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,["$","$L64",null,{"namespace":"@registrydirectory","registryDependencies":[]}]]}],["$","$L65",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":["$","$L66",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"}]]}]]}],["$","$L67",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":["$","$L66",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"}]]}]]}],["$","$L67",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":["$","$L66",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)"}]]}]]}],["$","$L67",null,{"orientation":"horizontal"}]]}]}]]}],null]}]}]}]]}],["$","$L68",null,{"files":[{"path":"registry/core/cathode-stack-glow/component.tsx","content":"$69","type":"registry:ui","target":"components/ui/cathode-stack-glow.tsx"}],"className":"h-[70svh] min-h-80"}]]}]