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:T42b5,"use client"; import { useEffect, useRef } from "react"; // --------------------------------------------------------------------------- // BarographDrumWeek — an ambient "running continuously, unattended" status // widget modelled on the aneroid barograph: a clockwork drum turns once per // week under a pen arm, wrapped in chart paper that already carries the day // and hour ruling PRINTED IN ADVANCE — the pen only ever adds ink, it never // draws the grid. This build compresses the real 7-day/604,800s drum period // into a 45s loop (documented ratio ~1 app-second : 3.7 real hours). // // Two canvases stand in for the two physical layers: a grid canvas holds the // pre-ruled paper (7 day dividers, full height; 23 hour ticks per day, drawn // as SHORT marks at the top/bottom edges only so 168 ticks read as a faint // structural ruling rather than a solid mesh) and is only ever redrawn on // resize/token change, never per-frame. An ink canvas accumulates the trace // by drawing ONE new line segment per frame from the previous point to the // current one — it is never cleared mid-cycle, matching the "permanent // trace" identity of the recording-instrument family, and every point is // also kept in a small history array so a resize (which invalidates a // canvas's raster) can losslessly replot the whole trace at the new pixel // size instead of losing it. // // The trace itself is two incommensurate sine terms — a slow "weather // front" swing (randomized 8-14s period per cycle, amplitude +/-30% of // chart height) plus a faster secondary term for texture — with a bounded // per-frame random-walk micro-jitter (+/-0.3px) layered on top for capsule- // response noise. The pen arm is a real DOM element (never canvas) pivoting // from its own tip, positioned by trigonometry from the SAME xFrac/yFrac // value that was just pushed into the ink history, so the two can never // desync. At the 45s mark the ink layer (canvas + pen) crossfades to // transparent over 500ms, the point history clears, a fresh randomized // front is drawn, and the cycle resumes at the empty day-0 state — a fade, // never a hard cut. // --------------------------------------------------------------------------- const DAYS = 7; const HOURS_PER_DAY = 24; const LOOP_MS = 45_000; // compressed 7-day drum period const CROSSFADE_MS = 500; // loop-end fade back to day 0 const TICK_LEN_FRAC = 0.09; // hour-tick length as a fraction of chart height const AMPLITUDE_FRAC = 0.3; // weather-front swing, +/-30% of chart height const FRONT_PERIOD_MIN = 8; // seconds — randomized primary front period const FRONT_PERIOD_MAX = 14; const JITTER_STEP = 0.6; // px — per-frame random-walk increment const JITTER_MAX = 0.3; // px — capsule micro-jitter clamp const STATIC_DAY = 4; // reduced-motion freeze: day 4 of 7 (~57% across) interface Front { t1: number; p1: number; t2: number; p2: number; } interface Point { /** 0..1 across the full 7-day chart width */ x: number; /** 0..1 down the chart height */ y: number; } function mulberry32(seed: number) { let a = seed >>> 0; return () => { a = (a + 0x6d2b79f5) >>> 0; let t = a; t = Math.imul(t ^ (t >>> 15), t | 1); t ^= t + Math.imul(t ^ (t >>> 7), t | 61); return ((t ^ (t >>> 14)) >>> 0) / 4294967296; }; } function makeFront(rand: () => number): Front { const t1 = FRONT_PERIOD_MIN + rand() * (FRONT_PERIOD_MAX - FRONT_PERIOD_MIN); const p1 = rand() * Math.PI * 2; const t2 = t1 * (0.32 + rand() * 0.14); // unrelated secondary period, for texture const p2 = rand() * Math.PI * 2; return { t1, p1, t2, p2 }; } function frontValue(tSec: number, f: Front): number { const v = 0.66 * Math.sin((2 * Math.PI * tSec) / f.t1 + f.p1) + 0.34 * Math.sin((2 * Math.PI * tSec) / f.t2 + f.p2); return Math.max(-1, Math.min(1, v)); } interface Tokens { fg: string; border: string; muted: string; } function readTokens(): Tokens | null { if (typeof document === "undefined") return null; const cs = getComputedStyle(document.documentElement); const fg = cs.getPropertyValue("--foreground").trim(); const border = cs.getPropertyValue("--border").trim(); const muted = cs.getPropertyValue("--ns-muted").trim(); if (!fg || !border || !muted) return null; // not loaded yet — no paint before this return { fg, border, muted }; } export interface BarographDrumWeekProps { /** small mono label above the chart, e.g. the metric this trace tracks */ label?: string; /** extra classes merged onto the rendered root element */ className?: string; } export function BarographDrumWeek({ label = "STATION UPTIME — 7 DAY TRACE", className = "", }: BarographDrumWeekProps) { const rootRef = useRef(null); const chartWrapRef = useRef(null); const gridCanvasRef = useRef(null); const inkWrapRef = useRef(null); const inkCanvasRef = useRef(null); const penRef = useRef(null); useEffect(() => { const chartWrap = chartWrapRef.current; const gridCanvas = gridCanvasRef.current; const inkWrap = inkWrapRef.current; const inkCanvas = inkCanvasRef.current; const pen = penRef.current; if (!chartWrap || !gridCanvas || !inkWrap || !inkCanvas || !pen) return; const gctx = gridCanvas.getContext("2d"); const ictx = inkCanvas.getContext("2d"); if (!gctx || !ictx) return; const reduced = window.matchMedia("(prefers-reduced-motion: reduce)").matches; let disposed = false; let tokens: Tokens | null = null; let dpr = 1; let chartW = 0; let chartH = 0; let sized = false; let visible = true; const points: Point[] = []; let cycleStart = 0; let phase: "run" | "fade" = "run"; let fadeStart = 0; let front = makeFront(Math.random); let jitterPx = 0; let raf = 0; let tokenWaitRaf = 0; const fitCanvas = (canvas: HTMLCanvasElement) => { canvas.width = Math.max(1, Math.round(chartW * dpr)); canvas.height = Math.max(1, Math.round(chartH * dpr)); const ctx = canvas.getContext("2d"); ctx?.setTransform(dpr, 0, 0, dpr, 0, 0); }; const drawGrid = () => { if (!tokens || !sized) return; gctx.clearRect(0, 0, chartW, chartH); // day dividers: only 7 lines, so a low-alpha --ns-muted stroke still // reads as a sparse ruling rather than a fill — --border alone is // near-invisible against the light-theme background (~1.1:1) and // these 7 lines are what carries the spec's 6.4s legibility beat, so // they get just enough weight to stay countable at a glance. gctx.strokeStyle = tokens.muted; gctx.globalAlpha = 0.32; gctx.lineWidth = 1; gctx.beginPath(); for (let d = 0; d <= DAYS; d++) { const x = Math.round((d / DAYS) * chartW) + 0.5; gctx.moveTo(x, 0); gctx.lineTo(x, chartH); } gctx.stroke(); gctx.globalAlpha = 1; // hour ticks: plain --border at its designed near-invisible role, // and short marks at the top/bottom edges only, never a full-height // line — this is what keeps 7x24 = 168 ticks a faint ruling instead // of a visible mesh. gctx.strokeStyle = tokens.border; const tickLen = chartH * TICK_LEN_FRAC; gctx.beginPath(); for (let d = 0; d < DAYS; d++) { for (let h = 1; h < HOURS_PER_DAY; h++) { const x = Math.round(((d + h / HOURS_PER_DAY) / DAYS) * chartW) + 0.5; gctx.moveTo(x, 0); gctx.lineTo(x, tickLen); gctx.moveTo(x, chartH - tickLen); gctx.lineTo(x, chartH); } } gctx.stroke(); }; const redrawInk = () => { if (!tokens || !sized) return; ictx.clearRect(0, 0, chartW, chartH); if (points.length === 0) return; ictx.strokeStyle = tokens.fg; ictx.lineWidth = Math.max(1, Math.min(chartW, chartH) * 0.006); ictx.lineJoin = "round"; ictx.lineCap = "round"; if (points.length === 1) { const p = points[0]!; ictx.beginPath(); ictx.arc(p.x * chartW, p.y * chartH, ictx.lineWidth / 2, 0, Math.PI * 2); ictx.fillStyle = tokens.fg; ictx.fill(); return; } ictx.beginPath(); points.forEach((p, i) => { const x = p.x * chartW; const y = p.y * chartH; if (i === 0) ictx.moveTo(x, y); else ictx.lineTo(x, y); }); ictx.stroke(); }; // -- pen arm: a real DOM element, pivoting from its own tip, positioned // from the exact same (xFrac, yFrac) that was just pushed into the ink // history — the single source of truth shared with the canvas draw, so // the two can never drift apart. --------------------------------------- const positionPen = (xFrac: number, yFrac: number, angleRad: number) => { const x = xFrac * chartW; const y = yFrac * chartH; const armLen = Math.max(10, Math.min(chartW, chartH) * 0.16); pen.style.width = `${armLen}px`; pen.style.transform = `translate(${(x - armLen).toFixed(2)}px, ${(y - 1).toFixed(2)}px) rotate(${angleRad.toFixed(3)}rad)`; }; const angleBetween = (a: Point, b: Point): number => { const dx = (b.x - a.x) * chartW; const dy = (b.y - a.y) * chartH; if (Math.abs(dx) < 0.0001 && Math.abs(dy) < 0.0001) return 0; return Math.max(-0.6, Math.min(0.6, Math.atan2(dy, dx || 0.0001))); }; const drawFrameSegment = (prev: Point | undefined, next: Point) => { if (!tokens || !sized) return; ictx.strokeStyle = tokens.fg; ictx.lineWidth = Math.max(1, Math.min(chartW, chartH) * 0.006); ictx.lineCap = "round"; if (prev) { ictx.beginPath(); ictx.moveTo(prev.x * chartW, prev.y * chartH); ictx.lineTo(next.x * chartW, next.y * chartH); ictx.stroke(); } else { ictx.beginPath(); ictx.arc(next.x * chartW, next.y * chartH, ictx.lineWidth / 2, 0, Math.PI * 2); ictx.fillStyle = tokens.fg; ictx.fill(); } }; const stepFrame = (elapsedMs: number) => { const xFrac = Math.min(1, elapsedMs / LOOP_MS); const tSec = elapsedMs / 1000; const val = frontValue(tSec, front); jitterPx += (Math.random() - 0.5) * JITTER_STEP; jitterPx = Math.max(-JITTER_MAX, Math.min(JITTER_MAX, jitterPx)); const jitterFrac = chartH > 0 ? jitterPx / chartH : 0; const yFrac = Math.min(1, Math.max(0, 0.5 - AMPLITUDE_FRAC * val + jitterFrac)); const prev = points[points.length - 1]; const next: Point = { x: xFrac, y: yFrac }; points.push(next); drawFrameSegment(prev, next); positionPen(xFrac, yFrac, prev ? angleBetween(prev, next) : 0); }; const resizeAll = () => { if (!tokens) return; const rect = chartWrap.getBoundingClientRect(); if (rect.width < 4 || rect.height < 4) { sized = false; return; } dpr = Math.min(window.devicePixelRatio || 1, 2); chartW = rect.width; chartH = rect.height; fitCanvas(gridCanvas); fitCanvas(inkCanvas); sized = true; drawGrid(); redrawInk(); const last = points[points.length - 1]; if (last) { const prev = points[points.length - 2] ?? last; positionPen(last.x, last.y, angleBetween(prev, last)); } else { positionPen(0, 0.5, 0); } }; const buildStaticFrame = () => { // fully deterministic — reduced motion must render the same frozen // day-4 frame every time, never a random draw. const rand = mulberry32(0xba206); const staticFront = makeFront(rand); const xFracEnd = STATIC_DAY / DAYS; const samples = 220; for (let i = 0; i <= samples; i++) { const xFrac = (i / samples) * xFracEnd; const tSec = xFrac * (LOOP_MS / 1000); const val = frontValue(tSec, staticFront); const yFrac = Math.min(1, Math.max(0, 0.5 - AMPLITUDE_FRAC * val)); points.push({ x: xFrac, y: yFrac }); } }; const loop = (now: number) => { if (disposed) return; if (!visible) { raf = 0; // IntersectionObserver re-arms this on re-entering view return; } raf = requestAnimationFrame(loop); if (!sized || !tokens) return; if (cycleStart === 0) cycleStart = now; if (phase === "run") { const elapsed = now - cycleStart; if (elapsed >= LOOP_MS) { phase = "fade"; fadeStart = now; inkWrap.style.transition = `opacity ${CROSSFADE_MS}ms ease`; inkWrap.style.opacity = "0"; } else { stepFrame(elapsed); } } else { if (now - fadeStart >= CROSSFADE_MS) { points.length = 0; ictx.clearRect(0, 0, chartW, chartH); front = makeFront(Math.random); jitterPx = 0; cycleStart = now; phase = "run"; inkWrap.style.transition = "none"; inkWrap.style.opacity = "1"; void inkWrap.offsetHeight; // flush before the next transition arms positionPen(0, 0.5, 0); } } }; // -- kickoff, retried from every path that can newly satisfy its // preconditions (mount, ResizeObserver, MutationObserver) rather than // attempted once at mount and abandoned — a container that is 0px wide // on first layout (lazy-mounted preview frame, display:none ancestor, // collapsed panel) must still start the moment it gets real size. ----- let started = false; const kick = () => { if (started || disposed || !tokens || !sized) return; started = true; if (reduced) { buildStaticFrame(); drawGrid(); redrawInk(); const last = points[points.length - 1]; const prev = points[points.length - 2] ?? last; if (last && prev) positionPen(last.x, last.y, angleBetween(prev, last)); return; // no rAF loop, no timers, no observers driving motion } raf = requestAnimationFrame(loop); }; const start = () => { if (disposed) return; tokens = readTokens(); if (!tokens) { tokenWaitRaf = requestAnimationFrame(start); return; } resizeAll(); kick(); }; const ro = new ResizeObserver(() => { if (!tokens) return; resizeAll(); kick(); }); ro.observe(chartWrap); const mo = new MutationObserver(() => { tokens = readTokens(); if (tokens) { resizeAll(); kick(); } }); mo.observe(document.documentElement, { attributes: true, attributeFilter: ["class"] }); const io = new IntersectionObserver((entries) => { const wasVisible = visible; visible = entries[0]?.isIntersecting ?? true; if (visible && !wasVisible && !reduced && tokens && !raf) { tokens = readTokens() ?? tokens; // pick up any theme flip that happened while hidden resizeAll(); // restart the cycle rather than resuming mid-flight — an arbitrarily // long time off-screen must not fade out a nearly-empty chart on // the very next frame back. points.length = 0; ictx.clearRect(0, 0, chartW, chartH); front = makeFront(Math.random); jitterPx = 0; cycleStart = 0; phase = "run"; inkWrap.style.transition = "none"; inkWrap.style.opacity = "1"; positionPen(0, 0.5, 0); raf = requestAnimationFrame(loop); } }); io.observe(chartWrap); start(); return () => { disposed = true; cancelAnimationFrame(raf); cancelAnimationFrame(tokenWaitRaf); ro.disconnect(); mo.disconnect(); io.disconnect(); }; }, []); return (

{label}

7-DAY

); } 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"}]]}],["$","div","surface",{"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":["--","surface",":"]}]}],["$","div",null,{"className":"hover:bg-muted/50 py-2 px-1 rounded-md w-full","children":"#fafafa"}]]}]]}],["$","$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"}]]}],["$","div","surface",{"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":["--","surface",":"]}]}],["$","div",null,{"className":"hover:bg-muted/50 py-2 px-1 rounded-md w-full","children":"#171717"}]]}]]}],["$","$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)"}]]}],["$","div","color-surface",{"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-surface",":"]}]}],["$","div",null,{"className":"hover:bg-muted/50 py-2 px-1 rounded-md w-full","children":"var(--surface)"}]]}]]}],["$","$L67",null,{"orientation":"horizontal"}]]}]}]]}],null]}]}]}]]}],["$","$L68",null,{"files":[{"path":"registry/core/barograph-drum-week/component.tsx","content":"$69","type":"registry:ui","target":"components/ui/barograph-drum-week.tsx"}],"className":"h-[70svh] min-h-80"}]]}]