4d: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/3upr08c9vtj8w.js","/_next/static/immutable/chunks/2rwy6tq861e-y.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/2hlz_ivp-qrnh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2zoahorp76dll.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1d0aij627lbx2.js","/_next/static/immutable/chunks/1ud4fi_ghnsx-.js"],"RegistryDependencies"] 4e: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/3upr08c9vtj8w.js","/_next/static/immutable/chunks/2rwy6tq861e-y.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/2hlz_ivp-qrnh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2zoahorp76dll.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1d0aij627lbx2.js","/_next/static/immutable/chunks/1ud4fi_ghnsx-.js"],"ItemStyles"] 4f: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/3upr08c9vtj8w.js","/_next/static/immutable/chunks/2rwy6tq861e-y.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/2hlz_ivp-qrnh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2zoahorp76dll.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1d0aij627lbx2.js","/_next/static/immutable/chunks/1ud4fi_ghnsx-.js"],"ScrollArea"] 50: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/3upr08c9vtj8w.js","/_next/static/immutable/chunks/2rwy6tq861e-y.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/2hlz_ivp-qrnh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2zoahorp76dll.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1d0aij627lbx2.js","/_next/static/immutable/chunks/1ud4fi_ghnsx-.js"],"ScrollBar"] 51: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/3upr08c9vtj8w.js","/_next/static/immutable/chunks/2rwy6tq861e-y.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/2hlz_ivp-qrnh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2zoahorp76dll.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1d0aij627lbx2.js","/_next/static/immutable/chunks/1ud4fi_ghnsx-.js"],"FilesView"] 52:T4881,"use client"; import { useEffect, useRef } from "react"; // --------------------------------------------------------------------------- // StackStepCarousel — a full-bleed background modelling vacuum thin-film // deposition on a planetary carrier: mirror/lens blanks ride a rotating // carrier past a fixed evaporation/sputter source, each pass under the // source depositing one quarter-wave layer and stepping that blank's // reflectance up a notch. // // GEOMETRY: 8 substrate discs (N_DISCS) sit on station points evenly spaced // (45deg apart) around a single "sun ring" of radius 0.32*min(w,h), disc // radius 0.09*min(w,h). PLANET_PERIOD_S = 3.5s is each disc's own orbital // period around the center — the spec's "planet (substrate) spin" — this IS // what actually carries every station through the fixed 30deg source arc at // the top of the frame, so a single disc's own crossing cadence is exactly // once per 3.5s, matching the spec's legibility line literally rather than // by inference. CARRIER_PERIOD_S = 14s (the spec's "sun ring" period) gets // its own, separate, purely structural screen presence: a slow-rotating // armature of small index ticks around the guide ring, decoupled from the // discs' own fast motion — the classic epicyclic-gearing relationship (a // slower carrier arm, faster individual planet motion) rendered as two // visually distinct rotations rather than one number driving the other. // // CROSSING / LAYERS: each disc's total completed orbits by time t is // totalLaps_i(t) = floor(t/PLANET_PERIOD_S + stationAngle_i/2*PI) — a step // function that ticks up by exactly 1 once per disc's own 3.5s orbit, offset // per disc by its station angle, so with 8 evenly-spaced discs a new // crossing lands somewhere on the ring roughly every 3.5/8 ~= 0.44s even // though any single disc's own personal cadence stays exactly 3.5s. Layer // count is (seedOffset_i + totalLaps_i(t)) mod 13 — a 13-state cycle (0 = // fresh bare blank through 12 = full stack) so the crossing that WOULD push // a disc past 12 instead wraps it back to a fresh blank, i.e. the staggered // swap the spec calls for; seedOffset_i (a fixed, non-random per-disc // integer 0..12 from a seeded PRNG) staggers the 8 discs' initial phase in // the cycle, and because every disc's own cycle rate is identical that // stagger persists forever — the batch structurally cannot resync into a // single synchronized reload. // // REFLECTANCE: luminance is not a linear layer count, it is the real // quarter-wave-stack reflectance recursion — Y(N) = n_sub*(n_L/n_H)^N, // R(N) = ((1-Y)/(1+Y))^2 for a symmetric H/L quarter-wave stack (n_H=2.35 // TiO2-like, n_L=1.38 SiO2-like, n_sub=1.52 glass-like, n_0=1 air) — giving // R(0) ~4% (bare glass) climbing to R(12) ~99% (a realistic 12-layer HR // mirror) with the real diminishing-returns shape late in the stack. // Normalized to 0..1 across N=0..12, this fraction is a plain linear RGB mix // between --ns-muted (0) and --foreground (1): since --foreground is // defined, in every theme, as the maximum-contrast token against // --background, "fully stacked reads as the higher-contrast extreme" is // true by construction with no separate bias/contrast retune needed — the // weld-pool convention's intent (never literally inverted to a different // hue relationship) is satisfied structurally rather than by a tuned pair. // // SOURCE-CROSSING GLOW: the envelope is referenced to the disc's ARC-ENTRY // angle (-15deg), not the arc center, so it starts ramping as the disc // actually enters the 30deg window, peaks almost exactly as the disc passes // the arc's center (peak time = the real entry-to-center transit time, ~half // the arc's own transit duration), then keeps fading a while after physical // exit for legibility — arrives, brightens, departs, never a blink. The // fixed source arc is drawn from --ns-muted (not --border — a full-bleed // background's fixed reference the whole mechanic points at cannot be the // ~1.1:1 separator token) and brightens toward --foreground while any disc // is under it. // // POINTER: canvas-local pointermove finds the nearest disc within 1.3x its // radius and eases a hover ring toward full over ~150ms — a plain // --foreground outline whose alpha reflects that disc's OWN current // reflectance fraction (a legible "here's how far along this one is"), no // tint, no orbit/carrier rate change. // // The clock is real elapsed wall time from mount (t = (now-startMs)/1000) // with no loop reset at all: the process genuinely never finishes, matching // the batch-deposition source ("the chamber runs planetary rotation for the // whole cycle, not a one-shot flash"). Hidden tabs simply stop paint via the // IntersectionObserver; because position is derived from absolute elapsed // time, not accumulated per-frame deltas, the carrier is always exactly // where continuous real-time rotation would have put it on resume. // --------------------------------------------------------------------------- const N_DISCS = 8; const PLANET_PERIOD_S = 3.5; // each disc's own orbit — the crossing cadence const CARRIER_PERIOD_S = 14; // slow armature-tick rotation, decorative const SOURCE_ARC_RAD = (30 * Math.PI) / 180; // 30deg source arc at top of frame const ARC_HALF_FRAC = SOURCE_ARC_RAD / 2 / (Math.PI * 2); // entry offset as a fraction of one orbit const GLOW_PEAK_MS = ARC_HALF_FRAC * PLANET_PERIOD_S * 1000; // entry -> center transit time const GLOW_MS = 800; // arrives-brightens-departs envelope per crossing const LAYER_CAP = 12; // 0..12, 13-state reload cycle const HOVER_EASE_MS = 150; const N_ARMATURE_TICKS = 16; // quarter-wave stack indices — TiO2/SiO2-like alternating pair on glass const N_AIR = 1.0; const N_HIGH = 2.35; const N_LOW = 1.38; const N_SUB = 1.52; function stackY(n: number): number { return N_SUB * Math.pow(N_LOW / N_HIGH, n); } function stackR(n: number): number { const y = stackY(n); const rho = (N_AIR - y) / (N_AIR + y); return rho * rho; } const R0 = stackR(0); const R12 = stackR(LAYER_CAP); function reflectanceFrac(layer: number): number { const r = stackR(layer); return Math.max(0, Math.min(1, (r - R0) / (R12 - R0))); } 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; }; } interface Station { angle: number; // radians, 0 = top, increasing clockwise angleFrac: number; // angle / 2*PI, cached seedOffset: number; // 0..12, staggers the reload cycle } function buildStations(): Station[] { const rand = mulberry32(0x5ea70c1e); const stations: Station[] = []; for (let i = 0; i < N_DISCS; i++) { const angle = (i / N_DISCS) * Math.PI * 2; stations.push({ angle, angleFrac: i / N_DISCS, seedOffset: Math.floor(rand() * (LAYER_CAP + 1)), }); } return stations; } /** orbit phase referenced to the disc sitting exactly at the arc's center (top) */ function centerPhase(station: Station, tSec: number): number { return tSec / PLANET_PERIOD_S + station.angleFrac; } function layerAt(station: Station, tSec: number): number { const laps = Math.floor(centerPhase(station, tSec)); return (((station.seedOffset + laps) % (LAYER_CAP + 1)) + (LAYER_CAP + 1)) % (LAYER_CAP + 1); } /** seconds since this disc last entered the source arc's leading (-15deg) edge */ function glowAge(station: Station, tSec: number): number { const shifted = centerPhase(station, tSec) + ARC_HALF_FRAC; const frac = shifted - Math.floor(shifted); return frac * PLANET_PERIOD_S; } function glowAlpha(ageSec: number): number { const ageMs = ageSec * 1000; if (ageMs >= GLOW_MS) return 0; if (ageMs <= GLOW_PEAK_MS) return ageMs / GLOW_PEAK_MS; return 1 - (ageMs - GLOW_PEAK_MS) / (GLOW_MS - GLOW_PEAK_MS); } /** deterministically solves for a t where `station` sits at its glow peak with `laps` completed orbits */ function solveGlowPeakTime(station: Station, laps: number): number { const targetPhase = laps - ARC_HALF_FRAC + GLOW_PEAK_MS / 1000 / PLANET_PERIOD_S; return (targetPhase - station.angleFrac) * PLANET_PERIOD_S; } interface Tokens { fg: [number, number, number]; muted: [number, number, number]; border: string; } function parseHex(hex: string): [number, number, number] | null { const m = /^#?([0-9a-f]{6})$/i.exec(hex.trim()); if (!m || !m[1]) return null; const v = m[1]; return [parseInt(v.slice(0, 2), 16), parseInt(v.slice(2, 4), 16), parseInt(v.slice(4, 6), 16)]; } function readTokens(): Tokens | null { if (typeof document === "undefined") return null; const cs = getComputedStyle(document.documentElement); const fgHex = cs.getPropertyValue("--foreground").trim(); const mutedHex = cs.getPropertyValue("--ns-muted").trim(); const border = cs.getPropertyValue("--border").trim(); const fg = parseHex(fgHex); const muted = parseHex(mutedHex); if (!fg || !muted || !border) return null; // not loaded yet — no paint before this return { fg, muted, border }; } function mixRGB(a: [number, number, number], b: [number, number, number], t: number): string { const r = Math.round(a[0] + (b[0] - a[0]) * t); const g = Math.round(a[1] + (b[1] - a[1]) * t); const bl = Math.round(a[2] + (b[2] - a[2]) * t); return `rgb(${r}, ${g}, ${bl})`; } export interface StackStepCarouselProps { /** Global simulation speed multiplier. @default 1 */ speed?: number; /** Freezes the carrier on its current frame without unmounting. */ paused?: boolean; /** Rendered in the DOM over the field — this layer alone is aria-hidden. */ children?: React.ReactNode; className?: string; style?: React.CSSProperties; } export function StackStepCarousel({ speed = 1, paused = false, children, className = "", style, }: StackStepCarouselProps) { const wrapRef = useRef(null); const canvasRef = useRef(null); const speedRef = useRef(speed); speedRef.current = speed; const pausedRef = useRef(paused); pausedRef.current = paused; useEffect(() => { const wrap = wrapRef.current; const canvas = canvasRef.current; if (!wrap || !canvas) return; const ctx = canvas.getContext("2d"); if (!ctx) return; const reduced = window.matchMedia("(prefers-reduced-motion: reduce)").matches; const stations = buildStations(); let disposed = false; let tokens: Tokens | null = null; let dpr = 1; let W = 0; let H = 0; let minDim = 0; let cx = 0; let cy = 0; let sunRingRadius = 0; let discRadius = 0; let sized = false; let visible = true; let startMs = 0; let elapsedFrozenSec: number | null = null; // set once under reduced motion let hoverIndex = -1; let hoverAlpha = 0; let raf = 0; let tokenWaitRaf = 0; const fitCanvas = () => { canvas.width = Math.max(1, Math.round(W * dpr)); canvas.height = Math.max(1, Math.round(H * dpr)); ctx.setTransform(dpr, 0, 0, dpr, 0, 0); }; const stationPos = (angle: number): [number, number] => [ cx + sunRingRadius * Math.sin(angle), cy - sunRingRadius * Math.cos(angle), ]; const draw = (tSec: number) => { if (!tokens || !sized) return; ctx.clearRect(0, 0, W, H); // carrier guide ring — non-load-bearing separator, --border only ctx.save(); ctx.strokeStyle = tokens.border; ctx.globalAlpha = 0.5; ctx.lineWidth = 1; ctx.beginPath(); ctx.arc(cx, cy, sunRingRadius, 0, Math.PI * 2); ctx.stroke(); // carrier armature: a slow-rotating (14s) ring of index ticks — the // sun ring's own structural motion, fully decoupled from the discs' // 3.5s orbit const carrierAngle = (tSec / CARRIER_PERIOD_S) * Math.PI * 2; ctx.globalAlpha = 0.35; ctx.lineWidth = 1; ctx.beginPath(); for (let k = 0; k < N_ARMATURE_TICKS; k++) { const a = (k / N_ARMATURE_TICKS) * Math.PI * 2 + carrierAngle; const inner = sunRingRadius * 0.94; const outer = sunRingRadius * 1.06; ctx.moveTo(cx + inner * Math.sin(a), cy - inner * Math.cos(a)); ctx.lineTo(cx + outer * Math.sin(a), cy - outer * Math.cos(a)); } ctx.stroke(); ctx.restore(); // fixed source arc at the top of the frame — must stay legible in // light theme, so it is --ns-muted brightening toward --foreground, // never the near-invisible --border const maxGlow = stations.reduce((m, s) => Math.max(m, glowAlpha(glowAge(s, tSec))), 0); ctx.save(); ctx.strokeStyle = mixRGB(tokens.muted, tokens.fg, 0.35 + maxGlow * 0.65); ctx.globalAlpha = 0.75 + maxGlow * 0.25; ctx.lineWidth = 3; ctx.beginPath(); ctx.arc(cx, cy, sunRingRadius, -SOURCE_ARC_RAD / 2 - Math.PI / 2, SOURCE_ARC_RAD / 2 - Math.PI / 2); ctx.stroke(); ctx.restore(); for (let i = 0; i < stations.length; i++) { const st = stations[i]!; const [x, y] = stationPos(st.angle); const layer = layerAt(st, tSec); const frac = reflectanceFrac(layer); const fill = mixRGB(tokens.muted, tokens.fg, frac); const glow = glowAlpha(glowAge(st, tSec)); if (glow > 0) { ctx.save(); ctx.globalAlpha = glow * 0.5; ctx.fillStyle = mixRGB(tokens.muted, tokens.fg, 1); ctx.beginPath(); ctx.arc(x, y, discRadius * 1.45, 0, Math.PI * 2); ctx.fill(); ctx.restore(); } ctx.save(); ctx.fillStyle = fill; ctx.beginPath(); ctx.arc(x, y, discRadius, 0, Math.PI * 2); ctx.fill(); ctx.restore(); if (i === hoverIndex && hoverAlpha > 0.01) { ctx.save(); ctx.globalAlpha = hoverAlpha * (0.3 + frac * 0.4); ctx.strokeStyle = mixRGB(tokens.muted, tokens.fg, 1); ctx.lineWidth = 2; ctx.beginPath(); ctx.arc(x, y, discRadius * 1.2, 0, Math.PI * 2); ctx.stroke(); ctx.restore(); } } }; const resizeAll = () => { if (!tokens) return; const rect = wrap.getBoundingClientRect(); if (rect.width < 4 || rect.height < 4) { sized = false; return; } dpr = Math.min(window.devicePixelRatio || 1, 2); W = rect.width; H = rect.height; minDim = Math.min(W, H); cx = W / 2; cy = H / 2; sunRingRadius = minDim * 0.32; discRadius = minDim * 0.09; fitCanvas(); sized = true; if (elapsedFrozenSec != null) draw(elapsedFrozenSec); }; const loop = (nowRaf: number) => { if (disposed) return; if (!visible) { raf = 0; // IntersectionObserver re-arms this on re-entering view return; } raf = requestAnimationFrame(loop); if (pausedRef.current) return; // stay armed; resumes the instant paused clears if (!sized || !tokens) return; if (startMs === 0) startMs = nowRaf; const tSec = ((nowRaf - startMs) / 1000) * speedRef.current; hoverAlpha += ((hoverIndex >= 0 ? 1 : 0) - hoverAlpha) * Math.min(1, 16 / HOVER_EASE_MS); draw(tSec); }; let started = false; const kick = () => { if (started || disposed || !tokens || !sized) return; started = true; if (reduced) { // "carrier-crossing": station 3 pinned at its glow peak with 2 laps // already completed, the other 7 stations at their own staggered // positions and pre-crossing layer counts — deterministic, no rAF elapsedFrozenSec = solveGlowPeakTime(stations[3]!, 2); draw(elapsedFrozenSec); 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 onPointerMove = (e: PointerEvent) => { const rect = wrap.getBoundingClientRect(); const px = e.clientX - rect.left; const py = e.clientY - rect.top; let nearest = -1; let nearestD = Infinity; for (let i = 0; i < stations.length; i++) { const [x, y] = stationPos(stations[i]!.angle); const d = Math.hypot(px - x, py - y); if (d < discRadius * 1.3 && d < nearestD) { nearestD = d; nearest = i; } } hoverIndex = nearest; if (reduced && elapsedFrozenSec != null) draw(elapsedFrozenSec); }; const onPointerLeave = () => { hoverIndex = -1; if (reduced && elapsedFrozenSec != null) draw(elapsedFrozenSec); }; wrap.addEventListener("pointermove", onPointerMove); wrap.addEventListener("pointerleave", onPointerLeave); const ro = new ResizeObserver(() => { if (!tokens) return; resizeAll(); kick(); }); ro.observe(wrap); 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(); raf = requestAnimationFrame(loop); } }); io.observe(wrap); start(); return () => { disposed = true; cancelAnimationFrame(raf); cancelAnimationFrame(tokenWaitRaf); ro.disconnect(); mo.disconnect(); io.disconnect(); wrap.removeEventListener("pointermove", onPointerMove); wrap.removeEventListener("pointerleave", onPointerLeave); }; }, []); return (

); } 4c:["$","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,["$","$L4d",null,{"namespace":"@ns-ui","registryDependencies":[]}]]}],["$","$L4e",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":["$","$L4f",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"}]]}]]}],["$","$L50",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":["$","$L4f",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"}]]}]]}],["$","$L50",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":["$","$L4f",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)"}]]}]]}],["$","$L50",null,{"orientation":"horizontal"}]]}]}]]}],null]}]}]}]]}],["$","$L51",null,{"files":[{"path":"registry/loud/stack-step-carousel/component.tsx","content":"$52","type":"registry:ui","target":"components/ui/stack-step-carousel.tsx"}],"className":"h-[70svh] min-h-80"}]]}]