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:T4e70,"use client"; import { useEffect, useRef } from "react"; // --------------------------------------------------------------------------- // LcdResponseSmear — an ambient panel-diagnostics status card whose canvas // strip simulates LCD pixel response time compensation (RTC / overdrive): a // liquid-crystal cell doesn't switch luminance instantly between grey // levels, and rise/fall are asymmetric (rise faster, fall slower on typical // TN/IPS spec sheets). Panel drivers overdrive the transition — push past // the target voltage, then relax back — producing a brief bright overshoot // on a rising transition. Falling transitions are usually driven less // aggressively, so instead of overshooting past the target they UNDERSHOOT // it: the cell lags behind the ideal step and arrives at its dark target // later and more gradually. That rise-overshoots / fall-undershoots // asymmetry is the "inverse ghost" visible trailing fast light-on-dark UI in // reviews of LCD panels with aggressive overdrive — this card renders it as // a single sweeping fill boundary crossing a row of cells: cells left of the // boundary are lit, cells right are unlit, and the boundary ping-pongs // across the strip. Every cell it newly lights up plays the rise-overshoot // curve; every cell it newly darkens (boundary retreating past it) plays // the fall-undershoot curve — both computed relative to each cell's own // local start/end luminance, never an absolute white/black, so the effect // self-corrects across light/dark themes for free. // // NOT motion blur: kelvin-wake, and this project's other trailing-wake // components, render a continuous gradient smear. This is a discrete // per-cell luminance curve with two distinct named keyframes (a peak or dip, // then a settle) — an instant state change at the moment the boundary // crosses a cell, not a spatial blur convolved across the frame. NOT // cursor-subpixel-fringe either — that's a spatial subpixel-geometry // artifact; this is a purely temporal per-pixel response curve. // // REAL NUMBERS (see riseCurve / fallCurve below): // rise: overshoots to 1.18x the local luminance delta, settles to 1.0x // (spec: t+4ms peak, t+9ms settle, tau_rise ~= 6ms). // fall: undershoots — reaches only 0.90x of the local delta before it has // fully arrived (spec: t+6ms), then eases the rest of the way, settling // to 1.0x (spec: t+15ms, tau_fall ~= 11ms). Falling literally takes // longer and lags rather than punching through the target, which is the // asymmetry real GtG spec sheets report (fall consistently slower than // rise). DEVIATION FROM SPEC, DELIBERATE: those millisecond values are // real, but at 220px/s a genuine 9ms/15ms transition only spans ~2-3px — // thinner than one CELL_PX floor, i.e. invisible. The keyframe TIMES // below are the spec's real numbers x20 (RISE_PEAK/SETTLE_MS, // FALL_DIP/SETTLE_MS) so the halo spans several cells and reads as the // asymmetric spike it's supposed to be; every RATIO that carries the // mechanic's identity (4:9, 6:15, the 6:11 tau ratio, 1.18x, 0.90x) is // exactly preserved. The footer readout still states the true panel // numbers (6ms / 11ms) — only the on-screen playback speed is dilated, // the same way a macro lens dilates space rather than lying about it. // sweep velocity v(t) = 220 * (1 + 0.15*sin(2*PI*t / 9.1)) px/s, boundary // position ping-pongs off the strip's own edges; the slow, non-round // 9.1s modulation keeps the bounce from reading as a metronomic loop. // // Geometry: CELL_PX = max(6, containerMinDim / 56), a single row of cells // spanning the strip's own width, containerMinDim taken from the CARD's own // bounding rect (not the thin strip's) so the pattern scales with the card // as a whole rather than reading as one fixed pixel size regardless of how // large the card is laid out. // // House idiom duplicated on purpose (no shared helpers, per project // convention): tokens (--background / --foreground only — this is value, // never hue) read via getComputedStyle(document.documentElement) inside a // pre-paint effect and re-read on a MutationObserver watching // documentElement's class; one rAF loop paused on document visibilitychange // and an IntersectionObserver on the strip; DPR-capped(2) backing store // with a ResizeObserver-driven resize and a zero-size guard. // // prefers-reduced-motion: no rAF loop. A single frame is composed by // deterministically replaying the same boundary-integration + per-cell // crossing logic from t=0 up to STATIC_TIME = 0.85s (so the boundary lands // somewhere real, not an arbitrary fixed spot), then the render pass pins // whichever cell was crossed most recently to the exact peak/dip instant of // its curve (rise: t+4ms, fall: t+6ms) instead of whatever age it actually // has — guaranteeing the frozen frame always shows the climactic overshoot // halo rather than risking landing on an already-settled, plain static // edge for some container sizes. // --------------------------------------------------------------------------- const CELL_MIN_PX = 6; const CELL_DIVISOR = 56; const SWEEP_BASE_V = 220; // px/s const SWEEP_MOD_AMP = 0.15; const SWEEP_MOD_PERIOD = 9.1; // s, deliberately non-round // x20 time-dilation of the spec's real 4/9/6/15ms keyframes — see the // header comment. Ratios (4:9, 6:15, 1.18x, 0.90x) are exact; only the // playback speed is stretched so the halo is wide enough to see. const TIME_DILATION = 20; const RISE_PEAK = 1.18; const RISE_PEAK_MS = 4 * TIME_DILATION; const RISE_SETTLE_MS = 9 * TIME_DILATION; const FALL_DIP = 0.9; const FALL_DIP_MS = 6 * TIME_DILATION; const FALL_SETTLE_MS = 15 * TIME_DILATION; // Interior grey levels rather than pure 0/1: at LIT=1 the 18% rise // overshoot extrapolates past the foreground token and clamps, losing most // of its visible amplitude. Sitting the settled levels inside the range // leaves headroom on both sides for the over/undershoot to actually show. const LIT = 0.86; const UNLIT = 0.06; const STATIC_TIME_S = 0.85; function clamp(v: number, lo: number, hi: number): number { return v < lo ? lo : v > hi ? hi : v; } function smoothstep(a: number, b: number, x: number): number { const t = clamp((x - a) / (b - a), 0, 1); return t * t * (3 - 2 * t); } // Fraction of the local luminance delta reached at `ms` since a cell was // newly lit. Overshoots to RISE_PEAK before easing back down to 1.0. function riseCurve(ms: number): number { if (ms <= 0) return 0; if (ms < RISE_PEAK_MS) return smoothstep(0, RISE_PEAK_MS, ms) * RISE_PEAK; if (ms < RISE_SETTLE_MS) { const t = smoothstep(RISE_PEAK_MS, RISE_SETTLE_MS, ms); return RISE_PEAK + (1 - RISE_PEAK) * t; } return 1; } // Fraction of the local luminance delta reached at `ms` since a cell was // newly darkened. Undershoots (lags short of the target) at FALL_DIP before // easing the rest of the way in — no overshoot past 1, a slower catch-up. function fallCurve(ms: number): number { if (ms <= 0) return 0; if (ms < FALL_DIP_MS) return smoothstep(0, FALL_DIP_MS, ms) * FALL_DIP; if (ms < FALL_SETTLE_MS) { const t = smoothstep(FALL_DIP_MS, FALL_SETTLE_MS, ms); return FALL_DIP + (1 - FALL_DIP) * t; } return 1; } function settleMsFor(kind: 1 | -1): number { return kind === 1 ? RISE_SETTLE_MS : FALL_SETTLE_MS; } function peakMsFor(kind: 1 | -1): number { return kind === 1 ? RISE_PEAK_MS : FALL_DIP_MS; } type Vec3 = [number, number, number]; // Same parse+mix idiom used elsewhere in this registry (e.g. // table-heat-shimmer) — duplicated per house convention rather than shared. function parseColor(raw: string): Vec3 | null { const s = raw.trim(); if (s.startsWith("#")) { const hex = s.slice(1); if (hex.length === 3) { const r = parseInt(hex[0]! + hex[0], 16); const g = parseInt(hex[1]! + hex[1], 16); const b = parseInt(hex[2]! + hex[2], 16); return Number.isNaN(r + g + b) ? null : [r, g, b]; } if (hex.length >= 6) { const r = parseInt(hex.slice(0, 2), 16); const g = parseInt(hex.slice(2, 4), 16); const b = parseInt(hex.slice(4, 6), 16); return Number.isNaN(r + g + b) ? null : [r, g, b]; } return null; } const m = s.match(/rgba?\(\s*([\d.]+)[,\s]+([\d.]+)[,\s]+([\d.]+)/); return m ? [Number(m[1]), Number(m[2]), Number(m[3])] : null; } // Lerp (and, for overshoot/undershoot fractions outside [0,1], deliberately // EXTRAPOLATE) between two colours, clamped per-channel so an 18% overshoot // never wraps past a byte. function mixExtrapolate(a: Vec3, b: Vec3, t: number): Vec3 { return [ clamp(Math.round(a[0] + (b[0] - a[0]) * t), 0, 255), clamp(Math.round(a[1] + (b[1] - a[1]) * t), 0, 255), clamp(Math.round(a[2] + (b[2] - a[2]) * t), 0, 255), ]; } interface CellSim { cellCount: number; kind: Int8Array; // 0 none, 1 rise, -1 fall transStart: Float64Array; // ms, timeline-local // Settled target level for a cell with kind === 0 (0 = unlit, 1 = lit). // Read directly rather than re-derived from the boundary's current // position — deriving it from position instead caused every cell to // flicker dark-then-lit right as its transition settled, because // crossing detection keys off cell EDGES (floor(idx)) while position // comparison keys off cell CENTERS, and those two didn't agree at settle // time. `level` is authoritative and updated only at crossing. level: Int8Array; } function makeSim(cellCount: number, seedPos: number, cellPx: number): CellSim { const level = new Int8Array(cellCount); for (let i = 0; i < cellCount; i++) { level[i] = (i + 0.5) * cellPx < seedPos ? 1 : 0; } return { cellCount, kind: new Int8Array(cellCount), transStart: new Float64Array(cellCount).fill(-Infinity), level, }; } /** One boundary-integration step: advances pos/sign by dtSec at simTimeS, * and marks every cell the boundary newly crossed as rise (lighting up, * boundary advancing) or fall (darkening, boundary retreating), timestamped * at `nowMs` on whatever timeline the caller is running (real or replayed). */ function stepSim( sim: CellSim, cellPx: number, trackW: number, state: { pos: number; sign: 1 | -1; simTimeS: number }, dtSec: number, nowMs: number ): void { if (trackW <= 0 || dtSec <= 0) return; const prevIdxF = state.pos / cellPx; state.simTimeS += dtSec; const speed = SWEEP_BASE_V * (1 + SWEEP_MOD_AMP * Math.sin((2 * Math.PI * state.simTimeS) / SWEEP_MOD_PERIOD)); let pos = state.pos + speed * state.sign * dtSec; let sign = state.sign; if (pos > trackW) { pos = 2 * trackW - pos; sign = -1; } else if (pos < 0) { pos = -pos; sign = 1; } state.pos = clamp(pos, 0, trackW); state.sign = sign; const newIdxF = state.pos / cellPx; const cellCount = sim.cellCount; if (newIdxF > prevIdxF) { const lo = Math.max(0, Math.floor(prevIdxF)); const hi = Math.min(cellCount - 1, Math.floor(newIdxF)); for (let i = lo + (prevIdxF > lo ? 1 : 0); i <= hi; i++) { sim.kind[i] = 1; sim.transStart[i] = nowMs; sim.level[i] = 1; } } else if (newIdxF < prevIdxF) { const lo = Math.max(0, Math.floor(newIdxF)); const hi = Math.min(cellCount - 1, Math.floor(prevIdxF)); for (let i = hi; i >= lo + 1; i--) { sim.kind[i] = -1; sim.transStart[i] = nowMs; sim.level[i] = 0; } } } function renderSim( ctx: CanvasRenderingContext2D, sim: CellSim, cellPx: number, trackW: number, h: number, nowMs: number, bg: Vec3, fg: Vec3 ): void { ctx.clearRect(0, 0, trackW, h); const gap = Math.max(1, cellPx * 0.08); for (let i = 0; i < sim.cellCount; i++) { const kind = sim.kind[i] as 0 | 1 | -1; let lum: number; if (kind !== 0) { let elapsed = nowMs - sim.transStart[i]!; const settle = settleMsFor(kind); if (elapsed >= settle) { sim.kind[i] = 0; lum = kind === 1 ? LIT : UNLIT; } else { if (elapsed < 0) elapsed = 0; const frac = kind === 1 ? riseCurve(elapsed) : fallCurve(elapsed); const from = kind === 1 ? UNLIT : LIT; const to = kind === 1 ? LIT : UNLIT; lum = from + (to - from) * frac; } } else { lum = sim.level[i] ? LIT : UNLIT; } const [r, g, b] = mixExtrapolate(bg, fg, lum); ctx.fillStyle = `rgb(${r}, ${g}, ${b})`; ctx.fillRect(i * cellPx, 0, Math.max(1, cellPx - gap), h); } } export interface LcdResponseSmearProps { /** small mono eyebrow above the title */ eyebrow?: string; /** card title */ title?: string; /** supporting description under the title */ description?: string; /** extra classes merged onto the rendered root element */ className?: string; } export function LcdResponseSmear({ eyebrow = "PANEL DIAGNOSTICS", title = "Response compensation", description = "Overdrive pushes each cell past its target voltage to hit its advertised switching time — the trace below is a simulated row of LCD cells lighting and darkening as a boundary sweeps across them, each rise overshooting its target before settling, each fall lagging behind before it catches up.", className = "", }: LcdResponseSmearProps) { const rootRef = useRef(null); const stripRef = useRef(null); const canvasRef = useRef(null); useEffect(() => { const root = rootRef.current; const strip = stripRef.current; const canvas = canvasRef.current; if (!root || !strip || !canvas) return; const ctx = canvas.getContext("2d"); if (!ctx) return; // No colour literal fallbacks, per project rule — null until the first // real token read succeeds, and every draw path below guards on it so // nothing can paint before that first read. let bg: Vec3 | null = null; let fg: Vec3 | null = null; const readTokens = () => { const cs = getComputedStyle(document.documentElement); bg = parseColor(cs.getPropertyValue("--background")) ?? bg; fg = parseColor(cs.getPropertyValue("--foreground")) ?? fg; }; readTokens(); const reduced = window.matchMedia("(prefers-reduced-motion: reduce)").matches; let disposed = false; let raf = 0; let running = false; let visible = true; let cellPx = CELL_MIN_PX; let trackW = 0; let trackH = 0; let sim = makeSim(0, 0, CELL_MIN_PX); const state = { pos: 0, sign: 1 as 1 | -1, simTimeS: 0 }; let lastTs = 0; const draw = (nowMs: number) => { if (!bg || !fg) return; // no paint before the first token read renderSim(ctx, sim, cellPx, trackW, trackH, nowMs, bg, fg); }; const drawStatic = () => { if (trackW <= 0 || cellPx <= 0 || !bg || !fg) return; // Seed the replay at the same t0 boundary position the live loop // starts from, so the static frame and the live t0 frame agree. const seedPos = 0.38 * trackW; const localSim = makeSim(sim.cellCount, seedPos, cellPx); const localState = { pos: seedPos, sign: 1 as 1 | -1, simTimeS: 0 }; const dt = 1 / 240; let nowMs = 0; const targetMs = STATIC_TIME_S * 1000; while (nowMs < targetMs) { const step = Math.min(dt, (targetMs - nowMs) / 1000); stepSim(localSim, cellPx, trackW, localState, step, nowMs + step * 1000); nowMs += step * 1000; } // Find the most recently triggered transition and pin its render age // to its curve's named peak/dip instant, guaranteeing the frozen // frame shows the climactic halo rather than an already-settled edge. let pinIdx = -1; let pinStart = -Infinity; for (let i = 0; i < localSim.cellCount; i++) { if (localSim.kind[i] !== 0 && localSim.transStart[i]! > pinStart) { pinStart = localSim.transStart[i]!; pinIdx = i; } } if (pinIdx >= 0) { const kind = localSim.kind[pinIdx] as 1 | -1; localSim.transStart[pinIdx] = targetMs - peakMsFor(kind); } renderSim(ctx, localSim, cellPx, trackW, trackH, targetMs, bg, fg); }; const loop = (ts: number) => { if (disposed) return; const dtMs = lastTs === 0 ? 16 : Math.min(100, ts - lastTs); lastTs = ts; stepSim(sim, cellPx, trackW, state, dtMs / 1000, ts); draw(ts); raf = requestAnimationFrame(loop); }; const wake = () => { if (running || reduced) return; running = true; lastTs = 0; raf = requestAnimationFrame(loop); }; const sleep = () => { cancelAnimationFrame(raf); raf = 0; running = false; }; const resize = () => { const cardRect = root.getBoundingClientRect(); const containerMinDim = Math.max(1, Math.min(cardRect.width, cardRect.height)); cellPx = Math.max(CELL_MIN_PX, containerMinDim / CELL_DIVISOR); const rect = strip.getBoundingClientRect(); if (rect.width < 4 || rect.height < 4) return; // zero-size guard trackW = rect.width; trackH = rect.height; const dpr = Math.min(window.devicePixelRatio || 1, 2); canvas.width = Math.round(trackW * dpr); canvas.height = Math.round(trackH * dpr); canvas.style.width = `${trackW}px`; canvas.style.height = `${trackH}px`; ctx.setTransform(dpr, 0, 0, dpr, 0, 0); const cellCount = Math.max(4, Math.floor(trackW / cellPx)); // t0 must be mid-sweep, not blank — seed the boundary partway across // the strip rather than at 0 (spec: "t0: edge mid-sweep"). const seedPos = 0.38 * trackW; sim = makeSim(cellCount, seedPos, cellPx); state.pos = seedPos; state.sign = 1; state.simTimeS = 0; lastTs = 0; if (reduced) drawStatic(); }; const ro = new ResizeObserver(resize); ro.observe(root); ro.observe(strip); const io = new IntersectionObserver( (entries) => { visible = entries[entries.length - 1]?.isIntersecting ?? true; if (!reduced) { if (visible) wake(); else sleep(); } }, { threshold: 0 } ); io.observe(strip); const themeObserver = new MutationObserver(() => { readTokens(); if (reduced) drawStatic(); }); themeObserver.observe(document.documentElement, { attributes: true, attributeFilter: ["class"], }); const onVis = () => { if (reduced) return; if (document.hidden) sleep(); else if (visible) wake(); }; document.addEventListener("visibilitychange", onVis); resize(); if (!reduced) wake(); else drawStatic(); return () => { disposed = true; ro.disconnect(); io.disconnect(); themeObserver.disconnect(); document.removeEventListener("visibilitychange", onVis); sleep(); }; }, []); return (

{eyebrow}

{title}

RTC

{description}

RISE τ 6ms FALL τ 11ms OVERDRIVE COMPENSATED

); } 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/lcd-response-smear/component.tsx","content":"$69","type":"registry:ui","target":"components/ui/lcd-response-smear.tsx"}],"className":"h-[70svh] min-h-80"}]]}]