63: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"] 64: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"] 65: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"] 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"],"ScrollBar"] 67: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"] 68:T412c,"use client"; import { useEffect, useRef, useState } from "react"; // --------------------------------------------------------------------------- // CapstanSlip — a determinate-progress alternative whose mechanic lives in // the transport geometry itself. Side-on view of an analog tape deck: a // capstan shaft spins at a strictly constant 0.6 rev/s (it is motor-driven — // it never slips), a pinch roller nips the tape against it, and the tape's // own linear speed comes from that nip, not from the shaft. Real transports // spec wow-and-flutter under 0.05% WRMS; a glazed or eccentric roller pushes // that far higher, heard as a periodic "wow" in pitch. Every ~1.1s (jittered // ±0.2s) the nip compresses for ~40ms, the tape's speed drops to 40% of // baseline for ~90ms, then springs back through one small overshoot over // ~120ms — the roller "catching back up". Tape ticks scroll past the nip at // a constant spawn cadence, so a slip event visibly bunches the marks that // crossed the nip while it was slow, and that bunched patch keeps trailing // left after the nip has recovered. // // Slip depth (compression + speed dip, one shared curve) is a pure function // of elapsed ms since the active event started — reused verbatim by the live // rAF loop and by the reduced-motion path, which runs the same tick forward // synchronously with a seeded RNG until it lands 40ms into an event, then // stops and renders once. Marks are a fixed-size ref pool of // elements, recycled by index, positioned with imperative setAttribute calls // so the 60fps path never touches React state. // --------------------------------------------------------------------------- const BASE_SPEED = 28; // px/s baseline tape scroll speed, at card scale const SHAFT_REV_PER_S = 0.6; // capstan drive shaft — constant, never slips const MARK_SPACING = 22; // px between tape ticks at baseline speed const EVENT_BASE_INTERVAL = 1100; // ms between slip events const EVENT_JITTER = 200; // ± ms const EVENT_DURATION = 250; // ms — full dip-then-recover length const COMPRESS_END = 40; // ms — nip reaches peak compression const HOLD_END = 130; // ms — 90ms hold at 40% speed ends here const POOL = 90; // pooled mark elements const REDUCED_TARGET_EVENT = 3; // freeze 40ms into the 3rd simulated event 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 smoothstep(t: number): number { const c = Math.min(1, Math.max(0, t)); return c * c * (3 - 2 * c); } /** Normalised slip depth for ms elapsed since an event started. 1 = full * compression / 40% speed, 0 = at rest, briefly negative = the recovery * overshoot (nip springs slightly past neutral, tape briefly over-speeds). * Shared by the live loop and the reduced-motion simulate pass. */ function slipDepth(elapsed: number): number { if (elapsed < 0 || elapsed >= EVENT_DURATION) return 0; if (elapsed < COMPRESS_END) return smoothstep(elapsed / COMPRESS_END); if (elapsed < HOLD_END) return 1; const u = (elapsed - HOLD_END) / (EVENT_DURATION - HOLD_END); return Math.exp(-3.2 * u) * Math.cos(5.5 * u); } interface MarkState { x: number; active: boolean; } export interface CapstanSlipProps { /** shown above the transport as a small mono label */ label?: string; /** hover-triggered numeric callout of the real professional-deck spec */ showReadout?: boolean; /** extra classes merged onto the rendered root element */ className?: string; } export function CapstanSlip({ label = "TRANSPORT", showReadout = true, className = "", }: CapstanSlipProps) { const rootRef = useRef(null); const svgRef = useRef(null); const shaftGroupRef = useRef(null); const rollerGroupRef = useRef(null); const tapeGroupRef = useRef(null); const markRefs = useRef<(SVGLineElement | null)[]>([]); const [hovered, setHovered] = useState(false); useEffect(() => { const root = rootRef.current; const svg = svgRef.current; const shaftGroup = shaftGroupRef.current; const rollerGroup = rollerGroupRef.current; const tapeGroup = tapeGroupRef.current; if (!root || !svg || !shaftGroup || !rollerGroup || !tapeGroup) return; const reduced = window.matchMedia("(prefers-reduced-motion: reduce)").matches; let disposed = false; let visible = true; let raf = 0; let last = 0; let W = 0; let H = 0; let S = 1; // smaller dimension — every geometric constant derives from this let shaftR = 1; let rollerR = 1; let nipX = 0; let tapeY = 0; let tapeHalfH = 1; let restGap = 1; let compressMax = 2; let markMargin = 40; let shaftCx = 0; let shaftCy = 0; let rollerCx = 0; let rollerCy0 = 0; // roller's built (rest) center — fixed rotation pivot const marks: MarkState[] = Array.from({ length: POOL }, () => ({ x: 0, active: false })); let spawnAcc = 0; let shaftAngle = 0; let rollerAngle = 0; let nextEventAt = 0; // ms, on the loop's own running clock let eventStart = -Infinity; let clock = 0; // ms, running total since mount/resize const measure = () => { const rect = root.getBoundingClientRect(); W = rect.width; H = rect.height; S = Math.max(1, Math.min(W, H)); shaftR = Math.min(S * 0.13, W * 0.22); rollerR = shaftR * 0.72; tapeHalfH = Math.max(4, Math.min(S * 0.05, 14)); restGap = Math.max(2, S * 0.012); compressMax = Math.max(1.5, Math.min(S * 0.014, 5)); nipX = W * 0.6; tapeY = H * 0.52; markMargin = MARK_SPACING * 2; svg.setAttribute("viewBox", `0 0 ${W} ${H}`); }; const applyLine = (el: SVGLineElement | null, x: number) => { if (!el) return; el.setAttribute("x1", x.toFixed(1)); el.setAttribute("x2", x.toFixed(1)); el.setAttribute("y1", (tapeY - tapeHalfH * 0.8).toFixed(1)); el.setAttribute("y2", (tapeY + tapeHalfH * 0.8).toFixed(1)); el.setAttribute("opacity", x < -markMargin || x > W + markMargin ? "0" : "1"); }; const scheduleNextEvent = (fromMs: number, rand: () => number) => { eventStart = fromMs; nextEventAt = fromMs + EVENT_BASE_INTERVAL + (rand() * 2 - 1) * EVENT_JITTER; }; /** One simulation step of dtMs at running clock time nowMs. Advances * shaft/roller rotation, the mark pool, and the event schedule. Pure * mutation of closure state — no DOM writes here, render() does those. */ const advance = (dtMs: number, nowMs: number, rand: () => number) => { shaftAngle = (shaftAngle + (dtMs / 1000) * SHAFT_REV_PER_S * 360) % 360; const elapsed = nowMs - eventStart; const slip = slipDepth(elapsed); const vel = BASE_SPEED * (1 - 0.6 * slip); rollerAngle = (rollerAngle + (dtMs / 1000) * ((vel / (2 * Math.PI * rollerR)) * 360)) % 360; const dx = (vel * dtMs) / 1000; for (const m of marks) { if (!m.active) continue; m.x -= dx; if (m.x < -markMargin) m.active = false; } spawnAcc += dtMs; const spawnInterval = (MARK_SPACING / BASE_SPEED) * 1000; while (spawnAcc >= spawnInterval) { spawnAcc -= spawnInterval; const slot = marks.find((m) => !m.active); if (slot) { slot.active = true; slot.x = W + markMargin; } } if (nowMs >= nextEventAt) scheduleNextEvent(nowMs, rand); }; const rollerOffset = (nowMs: number) => { const slip = slipDepth(nowMs - eventStart); return compressMax * Math.max(-0.3, slip); }; const render = (nowMs: number) => { shaftGroup.setAttribute("transform", `rotate(${shaftAngle.toFixed(2)} ${shaftCx.toFixed(1)} ${shaftCy.toFixed(1)})`); // rotate about the roller's fixed rest pivot first, THEN translate by // the compression offset — translate is the leftmost transform, so it // is applied last, after the (already correctly pivoted) rotation. const dy = -rollerOffset(nowMs); rollerGroup.setAttribute("transform", `translate(0 ${dy.toFixed(2)}) rotate(${rollerAngle.toFixed(2)} ${rollerCx.toFixed(1)} ${rollerCy0.toFixed(1)})`); for (let i = 0; i < POOL; i++) { const m = marks[i]; if (m) applyLine(markRefs.current[i] ?? null, m.active ? m.x : -9999); } }; const buildStaticShapes = () => { while (shaftGroup.firstChild) shaftGroup.removeChild(shaftGroup.firstChild); while (rollerGroup.firstChild) rollerGroup.removeChild(rollerGroup.firstChild); while (tapeGroup.firstChild) tapeGroup.removeChild(tapeGroup.firstChild); // shaft body + spoke, roller body + spoke are positioned once here at // their rest coordinates; their groups only ever receive `transform` // afterward (rotation, and — for the roller — the compression offset). shaftCx = nipX; shaftCy = tapeY + tapeHalfH + shaftR - restGap; rollerCx = nipX; rollerCy0 = tapeY - tapeHalfH - rollerR + restGap; const ns = "http://www.w3.org/2000/svg"; const topEdge = document.createElementNS(ns, "line"); topEdge.setAttribute("x1", "0"); topEdge.setAttribute("x2", String(W)); topEdge.setAttribute("y1", String(tapeY - tapeHalfH)); topEdge.setAttribute("y2", String(tapeY - tapeHalfH)); topEdge.setAttribute("stroke", "var(--foreground)"); topEdge.setAttribute("stroke-width", "1"); topEdge.setAttribute("opacity", "0.35"); tapeGroup.appendChild(topEdge); const bottomEdge = topEdge.cloneNode() as SVGLineElement; bottomEdge.setAttribute("y1", String(tapeY + tapeHalfH)); bottomEdge.setAttribute("y2", String(tapeY + tapeHalfH)); tapeGroup.appendChild(bottomEdge); const rail = document.createElementNS(ns, "line"); rail.setAttribute("x1", "0"); rail.setAttribute("x2", String(W)); rail.setAttribute("y1", String(H - 1)); rail.setAttribute("y2", String(H - 1)); rail.setAttribute("stroke", "var(--border)"); rail.setAttribute("stroke-width", "1"); tapeGroup.appendChild(rail); const shaftCircle = document.createElementNS(ns, "circle"); shaftCircle.setAttribute("cx", String(shaftCx)); shaftCircle.setAttribute("cy", String(shaftCy)); shaftCircle.setAttribute("r", String(shaftR)); shaftCircle.setAttribute("fill", "var(--background)"); shaftCircle.setAttribute("stroke", "var(--foreground)"); shaftCircle.setAttribute("stroke-width", "1.6"); shaftGroup.appendChild(shaftCircle); const shaftSpoke = document.createElementNS(ns, "line"); shaftSpoke.setAttribute("x1", String(shaftCx)); shaftSpoke.setAttribute("y1", String(shaftCy)); shaftSpoke.setAttribute("x2", String(shaftCx)); shaftSpoke.setAttribute("y2", String(shaftCy - shaftR * 0.86)); shaftSpoke.setAttribute("stroke", "var(--foreground)"); shaftSpoke.setAttribute("stroke-width", "1.6"); shaftSpoke.setAttribute("stroke-linecap", "round"); shaftGroup.appendChild(shaftSpoke); const rollerCircle = document.createElementNS(ns, "circle"); rollerCircle.setAttribute("cx", String(rollerCx)); rollerCircle.setAttribute("cy", String(rollerCy0)); rollerCircle.setAttribute("r", String(rollerR)); rollerCircle.setAttribute("fill", "var(--background)"); rollerCircle.setAttribute("stroke", "var(--foreground)"); rollerCircle.setAttribute("stroke-width", "1.6"); rollerGroup.appendChild(rollerCircle); const rollerSpoke = document.createElementNS(ns, "line"); rollerSpoke.setAttribute("x1", String(rollerCx)); rollerSpoke.setAttribute("y1", String(rollerCy0)); rollerSpoke.setAttribute("x2", String(rollerCx)); rollerSpoke.setAttribute("y2", String(rollerCy0 + rollerR * 0.82)); rollerSpoke.setAttribute("stroke", "var(--foreground)"); rollerSpoke.setAttribute("stroke-width", "1.6"); rollerSpoke.setAttribute("stroke-linecap", "round"); rollerGroup.appendChild(rollerSpoke); }; const resetAndBuild = () => { measure(); buildStaticShapes(); }; const startLive = () => { resetAndBuild(); const rand = Math.random; for (const m of marks) m.active = false; spawnAcc = 0; shaftAngle = 0; rollerAngle = 0; clock = 0; scheduleNextEvent(EVENT_BASE_INTERVAL * 0.5, rand); // pre-roll a couple of seconds so the tape is never empty at t0 let t = 0; const preroll = 2600; while (t < preroll) { advance(16, t, rand); t += 16; } clock = t; last = 0; if (!raf) raf = requestAnimationFrame(loop); }; const loop = (now: number) => { raf = 0; if (!visible) return; if (last === 0) last = now; const dt = Math.min(80, now - last); last = now; const rand = Math.random; clock += dt; advance(dt, clock, rand); render(clock); raf = requestAnimationFrame(loop); }; const runReduced = () => { resetAndBuild(); const rand = mulberry32(0xc4b57a11); for (const m of marks) m.active = false; spawnAcc = 0; shaftAngle = 0; rollerAngle = 0; let t = 0; scheduleNextEvent(EVENT_BASE_INTERVAL * 0.5, rand); let eventCount = 0; let lastEventStart = eventStart; const dt = 8; const hardCap = 20000; while (t < hardCap) { advance(dt, t, rand); if (eventStart !== lastEventStart) { // an event just fired at the OLD eventStart before advance() // rolled it forward — count that completed one. eventCount += 1; lastEventStart = eventStart; } t += dt; if (eventCount >= REDUCED_TARGET_EVENT) break; } // eventStart now marks the most recent slip; land 40ms into it. const target = eventStart + COMPRESS_END; while (t < target) { advance(dt, t, rand); t += dt; } render(target); }; if (reduced) { runReduced(); } else { startLive(); } let resizeTimer = 0; const onResize = () => { window.clearTimeout(resizeTimer); resizeTimer = window.setTimeout(() => { if (disposed) return; cancelAnimationFrame(raf); raf = 0; if (reduced) runReduced(); else startLive(); }, 120); }; const ro = new ResizeObserver(onResize); ro.observe(root); const io = new IntersectionObserver((entries) => { visible = entries[0]?.isIntersecting ?? true; if (visible && !reduced && !raf) { last = 0; raf = requestAnimationFrame(loop); } }); io.observe(root); document.fonts?.ready?.then(() => { if (!disposed) onResize(); }); return () => { disposed = true; cancelAnimationFrame(raf); raf = 0; window.clearTimeout(resizeTimer); ro.disconnect(); io.disconnect(); }; // eslint-disable-next-line react-hooks/exhaustive-deps }, []); return (

setHovered(true)} onMouseLeave={() => setHovered(false)} >

{label}

{showReadout && (

0.05% WRMS ref

)}

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