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:T5174,"use client"; import { useEffect, useRef } from "react"; import type { CSSProperties } from "react"; // --------------------------------------------------------------------------- // SleeperRenewalRelay — an ambient "processing/refreshing" row indicator // sourced from mechanised sleeper-renewal trains (railway maintenance-of-way // engineering): a crawling gang crane lifts one old sleeper clear, swings a // new one into the gap, and clips the rail down before advancing to the next // tie, never stopping the line for more than a single swap. // // The stack is a fixed 8-row visible window, each row a "sleeper" whose // vertical size (rowSize) is the container's SMALLER measured dimension // divided by 8, so the whole panel reads at card scale regardless of the // host's aspect ratio. A crane carriage rides a gantry line down the left // edge; a full lift -> swap -> drop -> clip cycle takes 1.3s per row (450ms // departure arc, 350ms arrival arc, 500ms settled dwell — the last 150ms of // which slides the carriage on to the next row so it is already positioned // when that row's own lift begins). Eight rows at 1.3s/row is a 10.4s lap; // on reaching row 7 the carriage travels straight back to row 0 and the lap // repeats, unbounded, exactly the "wraps to the top and continues" reading. // // Old-vs-new is NOT a binary flag. Every row carries a continuous "wear" // value derived straight from elapsed time since its most recent completed // drop: 0 the instant a fresh sleeper lands, ramping back toward 1 (fully // worn) over the ~10.4s until the crane is due back — so a viewer sees a // visible gradient across the stack (freshest just behind the crane, most // worn just ahead of it) rather than a hard on/off flip, and the row the // crane is CURRENTLY lifting reads its wear from the exact same continuous // formula, so the departing sleeper's colour is already wherever it had // smoothly drifted to — no colour ever jumps at a phase boundary. Fill is a // single `color-mix(in srgb, var(--ns-muted) X%, var(--foreground) (100-X)%)` // string per row, recomputed every frame; no canvas, no JS colour math, so // a theme flip repaints for free through the underlying custom properties. // --------------------------------------------------------------------------- export interface SleeperRenewalRelayProps { /** row / card heading above the panel */ title?: string; /** mono description under the heading */ description?: string; /** freeze the loop at the next settled dwell point (never mid-arc) once true */ paused?: boolean; /** extra classes merged onto the rendered root element */ className?: string; /** inline styles merged onto the root element */ style?: CSSProperties; } const ROWS = 8; const CYCLE_MS = 1300; // one full lift -> swap -> drop -> clip cycle per row const RISE_MS = 250; // straight vertical lift, still directly above the gap const SWING_MS = 200; // sideways kick out to the side wagon const LIFT_MS = RISE_MS + SWING_MS; // 450 — the visible departure arc const ENTER_MS = 200; // new sleeper swings in from the gantry side, elevated const SETTLE_MS = 150; // lowers into the gap with a small clip-down bounce const DROP_MS = ENTER_MS + SETTLE_MS; // 350 — the visible arrival arc const DROP_START = LIFT_MS; // 450 const DWELL_START = LIFT_MS + DROP_MS; // 800 const DWELL_MS = CYCLE_MS - DWELL_START; // 500 const TRAVEL_MS = 150; // tail of the dwell — carriage slides on to next row const LAP_MS = ROWS * CYCLE_MS; // 10400 const WEAR_SPAN_CYCLES = ROWS; // wear ramps 0..1 over one lap since renewal // reduced-motion freeze: mid rise sub-phase of row 3's departure — old // sleeper lifted straight up, still directly above its own gap, not yet // kicked sideways or dropped; rows 0-2 already show a fresher wear value, // rows 4-7 have never been reached (fully worn) — old-out / new-in-pending // / clip-pending all visible at once. const STATIC_ROW = 3; const STATIC_LOCAL_T = 200; const STATIC_ELAPSED = STATIC_ROW * CYCLE_MS + STATIC_LOCAL_T; // mount offset so the very first live frame already shows a wear gradient // and a mid-swing crane, distinct from the reduced-motion freeze above — // row 5, 20ms into its 200ms swing sub-phase, rows 0-4 carrying distinct // wear values. const INITIAL_OFFSET_MS = 5 * CYCLE_MS + RISE_MS + 20; const REF_ROW = 32; // reference row size used to scale stroke widths function clamp01(v: number): number { return v < 0 ? 0 : v > 1 ? 1 : v; } function lerp(a: number, b: number, t: number): number { return a + (b - a) * t; } function easeOutCubic(t: number): number { const x = clamp01(t); return 1 - Math.pow(1 - x, 3); } function easeInOutCubic(t: number): number { const x = clamp01(t); return x < 0.5 ? 4 * x * x * x : 1 - Math.pow(-2 * x + 2, 3) / 2; } function wearColor(wear: number): string { const muted = clamp01(wear) * 100; const fresh = 100 - muted; return `color-mix(in srgb, var(--ns-muted) ${muted.toFixed(1)}%, var(--foreground) ${fresh.toFixed(1)}%)`; } /** Continuous 0 (just renewed) .. 1 (fully worn, due again) wear value for * a row at a given elapsed time, derived from the most recent completed * drop (localT >= DWELL_START) that row ever had — or 1, fixed, if the * crane has never reached it yet (only possible during the very first * lap). No stored per-row state: fully reconstructible from elapsed time * alone, which is what keeps every frame — including a paused resume — * exactly continuous. */ function rowWear(row: number, elapsedMs: number): number { const dropOffset = row * CYCLE_MS + DWELL_START; const num = elapsedMs - dropOffset; if (num < 0) return 1; const lapsSinceFirstDrop = Math.floor(num / LAP_MS); const completionTime = dropOffset + lapsSinceFirstDrop * LAP_MS; const sinceMs = elapsedMs - completionTime; const cyclesSince = sinceMs / CYCLE_MS; return clamp01(cyclesSince / WEAR_SPAN_CYCLES); } interface Geometry { w: number; h: number; rowSize: number; scale: number; stackTop: number; gantryX: number; railX1: number; railX2: number; sleeperX1: number; sleeperX2: number; sleeperH: number; } function measureGeometry(w: number, h: number): Geometry { const rowSize = Math.max(1, Math.min(w, h) / ROWS); const scale = rowSize / REF_ROW; const stackHeight = rowSize * ROWS; const stackTop = (h - stackHeight) / 2; return { w, h, rowSize, scale, stackTop, gantryX: w * 0.08, railX1: w * 0.3, railX2: w * 0.7, sleeperX1: w * 0.14, sleeperX2: w * 0.86, sleeperH: rowSize * 0.46, }; } function rowCenterY(g: Geometry, row: number): number { return g.stackTop + row * g.rowSize + g.rowSize / 2; } export function SleeperRenewalRelay({ title = "Backfilling search index", description = "One row swaps at a time — old cleared, new clipped in, never stopping the line.", paused = false, className = "", style, }: SleeperRenewalRelayProps) { const panelRef = useRef(null); const svgRef = useRef(null); const gantryRef = useRef(null); const railRefs = useRef<(SVGLineElement | null)[]>([]); const sleeperRefs = useRef<(SVGRectElement | null)[]>([]); const tickRefs = useRef<(SVGPathElement | null)[]>([]); const gapRef = useRef(null); const movingRef = useRef(null); const carriageRef = useRef(null); const armRef = useRef(null); const hookRef = useRef(null); const pausedRef = useRef(paused); useEffect(() => { pausedRef.current = paused; }, [paused]); useEffect(() => { const panel = panelRef.current; const svg = svgRef.current; if (!panel || !svg) return; const mq = window.matchMedia("(prefers-reduced-motion: reduce)"); let reduced = mq.matches; let visible = true; let raf = 0; let startTime = performance.now() - INITIAL_OFFSET_MS; let frozen = false; let frozenElapsed = 0; let geom = measureGeometry(panel.clientWidth || 1, panel.clientHeight || 1); const setAttrs = (el: Element | null, attrs: Record) => { if (!el) return; for (const k in attrs) el.setAttribute(k, attrs[k]!); }; const layout = () => { const rect = panel.getBoundingClientRect(); geom = measureGeometry(Math.max(1, rect.width), Math.max(1, rect.height)); const { w, h, gantryX, railX1, railX2, stackTop, rowSize, scale } = geom; svg.setAttribute("viewBox", `0 0 ${w} ${h}`); svg.setAttribute("width", String(w)); svg.setAttribute("height", String(h)); const stackBottom = stackTop + rowSize * ROWS; setAttrs(gantryRef.current, { x1: String(gantryX), x2: String(gantryX), y1: String(stackTop), y2: String(stackBottom), "stroke-width": String(Math.max(0.75, 1 * scale)), }); const rails = railRefs.current; [railX1, railX2].forEach((x, i) => { setAttrs(rails[i] ?? null, { x1: String(x), x2: String(x), y1: String(stackTop), y2: String(stackBottom), "stroke-width": String(Math.max(1, 1.25 * scale)), }); }); for (let r = 0; r < ROWS; r++) { const cy = rowCenterY(geom, r); setAttrs(sleeperRefs.current[r] ?? null, { x: String(geom.sleeperX1), y: String(cy - geom.sleeperH / 2), width: String(geom.sleeperX2 - geom.sleeperX1), height: String(geom.sleeperH), rx: String(Math.max(1, 2 * scale)), }); setAttrs(tickRefs.current[r] ?? null, { d: tickPath(geom, cy, scale), "stroke-width": String(Math.max(0.75, 1.1 * scale)), }); } setAttrs(gapRef.current, { width: String(geom.sleeperX2 - geom.sleeperX1), height: String(geom.sleeperH), rx: String(Math.max(1, 2 * scale)), "stroke-width": String(Math.max(0.75, 1 * scale)), }); setAttrs(movingRef.current, { width: String(geom.sleeperX2 - geom.sleeperX1), height: String(geom.sleeperH), rx: String(Math.max(1, 2 * scale)), }); setAttrs(carriageRef.current, { width: String(Math.max(4, 8 * scale)), height: String(Math.max(4, 8 * scale)), rx: String(Math.max(0.5, 1.5 * scale)), }); setAttrs(hookRef.current, { r: String(Math.max(1, 2.4 * scale)) }); setAttrs(armRef.current, { "stroke-width": String(Math.max(0.75, 1.5 * scale)) }); setAttrs(carriageRef.current, { "stroke-width": String(Math.max(0.75, 1.5 * scale)) }); }; function tickPath(g: Geometry, cy: number, scale: number): string { const len = Math.max(3, 5 * scale); const a = `M ${g.railX1} ${cy - len / 2} L ${g.railX1} ${cy + len / 2}`; const b = `M ${g.railX2} ${cy - len / 2} L ${g.railX2} ${cy + len / 2}`; return `${a} ${b}`; } const render = (elapsedMs: number) => { const g = geom; const cycleIndex = Math.floor(elapsedMs / CYCLE_MS); const currentRow = ((cycleIndex % ROWS) + ROWS) % ROWS; const localT = elapsedMs - cycleIndex * CYCLE_MS; // -- carriage vertical position: rides on the active row until the // final TRAVEL_MS of dwell, then eases on to the next row so it is // already in place when that row's own lift begins. let carriageRow = currentRow; let carriageFrac = 0; if (localT >= DWELL_START + DWELL_MS - TRAVEL_MS) { carriageFrac = easeInOutCubic((localT - (DWELL_START + DWELL_MS - TRAVEL_MS)) / TRAVEL_MS); } const nextRow = (currentRow + 1) % ROWS; const carriageY = lerp(rowCenterY(g, carriageRow), rowCenterY(g, nextRow), carriageFrac); // -- static rows: continuous wear-derived fill + tick opacity -- for (let r = 0; r < ROWS; r++) { const isActiveMoving = r === currentRow && localT < DWELL_START; const wear = rowWear(r, elapsedMs); const rect = sleeperRefs.current[r]; if (rect) { rect.setAttribute("fill", wearColor(wear)); rect.setAttribute("opacity", isActiveMoving ? "0" : "1"); rect.removeAttribute("transform"); } const tick = tickRefs.current[r]; if (tick) { const op = clamp01((0.85 - wear) / 0.85) * 0.6; tick.setAttribute("opacity", String(op)); } } // -- moving sleeper + gap outline + crane arm, only meaningful while // the active row is mid lift/drop -- const restCx = (g.sleeperX1 + g.sleeperX2) / 2; const restCy = rowCenterY(g, currentRow); const sideReach = g.w * 0.22; let dx = 0; let dy = 0; let rot = 0; let opacity = 0; let gapOpacity = 0; let fill = wearColor(1); let hookX = restCx; let hookY = restCy; let armLen = 1; if (localT < LIFT_MS) { opacity = 1; fill = wearColor(rowWear(currentRow, elapsedMs)); if (localT < RISE_MS) { const u = easeOutCubic(localT / RISE_MS); dy = -g.rowSize * 0.9 * u; gapOpacity = 0.35 * clamp01((localT - RISE_MS * 0.3) / (RISE_MS * 0.7)); } else { const v = easeInOutCubic((localT - RISE_MS) / SWING_MS); dy = -g.rowSize * 0.9 + g.rowSize * 0.3 * v; dx = sideReach * v; rot = 12 * v; opacity = 1 - 0.85 * v; gapOpacity = 0.35; } hookX = restCx + dx; hookY = restCy + dy; } else if (localT < DWELL_START) { const local2 = localT - DROP_START; opacity = 1; if (local2 < ENTER_MS) { const p = easeOutCubic(local2 / ENTER_MS); dx = -sideReach * (1 - p); dy = -g.rowSize * 0.5 * (1 - p); rot = -8 * (1 - p); opacity = clamp01(local2 / (ENTER_MS * 0.25)); const wearAtDropStart = rowWear(currentRow, startOfCycle(cycleIndex) + DROP_START); fill = wearColor(lerp(wearAtDropStart, 0, p)); gapOpacity = 0.35 * (1 - p); } else { const q = easeOutCubic((local2 - ENTER_MS) / SETTLE_MS); dy = g.rowSize * 0.1 * Math.sin(Math.PI * q); rot = 3 * Math.sin(Math.PI * q) * (1 - q); fill = wearColor(0); gapOpacity = 0; } hookX = restCx + dx; hookY = restCy + dy; } else { // dwell: settled sleeper is the ordinary static row again; the arm // rests directly on it until the travel window pulls it away. opacity = 0; gapOpacity = 0; const dwellLocal = localT - DWELL_START; if (dwellLocal >= DWELL_MS - TRAVEL_MS) { const t = easeInOutCubic((dwellLocal - (DWELL_MS - TRAVEL_MS)) / TRAVEL_MS); hookX = lerp(restCx, g.gantryX, t); hookY = lerp(restCy - g.rowSize * 0.5, carriageY, t); armLen = 1 - t; } else { hookX = restCx; hookY = restCy - g.rowSize * 0.5; } } if (movingRef.current) { movingRef.current.setAttribute("fill", fill); movingRef.current.setAttribute("opacity", String(opacity)); movingRef.current.setAttribute( "transform", `translate(${dx.toFixed(2)} ${dy.toFixed(2)}) rotate(${rot.toFixed(2)} ${restCx.toFixed(2)} ${restCy.toFixed(2)})` ); movingRef.current.setAttribute("x", String(g.sleeperX1)); movingRef.current.setAttribute("y", String(restCy - g.sleeperH / 2)); } if (gapRef.current) { gapRef.current.setAttribute("opacity", String(gapOpacity)); gapRef.current.setAttribute("x", String(g.sleeperX1)); gapRef.current.setAttribute("y", String(restCy - g.sleeperH / 2)); } setAttrs(carriageRef.current, { x: String(g.gantryX - Math.max(4, 8 * g.scale) / 2), y: String(carriageY - Math.max(4, 8 * g.scale) / 2), }); const armOpacity = Math.max(0, Math.min(1, armLen)); setAttrs(armRef.current, { x1: String(g.gantryX), y1: String(carriageY), x2: String(hookX.toFixed(2)), y2: String(hookY.toFixed(2)), opacity: String(armOpacity), }); setAttrs(hookRef.current, { cx: String(hookX.toFixed(2)), cy: String(hookY.toFixed(2)), opacity: String(armOpacity), }); }; function startOfCycle(cycleIndex: number): number { return cycleIndex * CYCLE_MS; } const loop = (now: number) => { raf = 0; if (!visible) return; if (frozen && !pausedRef.current) { frozen = false; startTime = now - frozenElapsed; } if (!frozen) { const rawElapsed = now - startTime; const cycleIndex = Math.floor(rawElapsed / CYCLE_MS); const localT = rawElapsed - cycleIndex * CYCLE_MS; if (pausedRef.current && localT >= DWELL_START) { frozen = true; frozenElapsed = rawElapsed; } } const elapsed = frozen ? frozenElapsed : now - startTime; render(elapsed); raf = requestAnimationFrame(loop); }; const wake = () => { if (raf === 0 && !reduced && visible) raf = requestAnimationFrame(loop); }; layout(); if (reduced) { render(STATIC_ELAPSED); } else { wake(); } const ro = new ResizeObserver(() => { layout(); render(reduced ? STATIC_ELAPSED : frozen ? frozenElapsed : performance.now() - startTime); }); ro.observe(panel); const io = new IntersectionObserver((entries) => { visible = entries[0]?.isIntersecting ?? true; if (visible) wake(); else if (raf) { cancelAnimationFrame(raf); raf = 0; } }); io.observe(panel); const onReducedChange = () => { reduced = mq.matches; if (reduced) { cancelAnimationFrame(raf); raf = 0; render(STATIC_ELAPSED); } else { startTime = performance.now(); frozen = false; wake(); } }; mq.addEventListener("change", onReducedChange); const onVisibility = () => { if (document.visibilityState === "visible") wake(); else if (raf) { cancelAnimationFrame(raf); raf = 0; } }; document.addEventListener("visibilitychange", onVisibility); return () => { cancelAnimationFrame(raf); raf = 0; ro.disconnect(); io.disconnect(); mq.removeEventListener("change", onReducedChange); document.removeEventListener("visibilitychange", onVisibility); }; }, []); return (

{title}

{description}

); } SleeperRenewalRelay.displayName = "SleeperRenewalRelay"; export default SleeperRenewalRelay; 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/sleeper-renewal-relay/component.tsx","content":"$69","type":"registry:ui","target":"components/ui/sleeper-renewal-relay.tsx"}],"className":"h-[70svh] min-h-80"}]]}]