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:T618b,"use client"; import { useCallback, useEffect, useId, useRef, useState } from "react"; // --------------------------------------------------------------------------- // RapidWire — payment submission as an Edwardian cash railway. One governing // scalar, `s`, is a real arc-length position along a single static SVG // catenary path (two posts of unequal height, solved analytically with the // standard two-point cosh formula — not a bezier approximation). Every frame // reads the wire's actual geometry at `s` via getPointAtLength on a hidden // reference — the same real-DOM-query idiom transfer-list-siphon uses // for its bead — and derives three things from it: velocity (energy // conservation against the wire's height, so launching downhill off the till // post genuinely speeds the cup up and climbing the last stretch to the // cashier post genuinely slows it down — no keyframe tween, no fixed // duration), cup tilt (the wire's local tangent angle), and a purely // cosmetic few-px sag bump under the visible wire directly beneath the cup // while it's in transit (a second, separate carries the deflection; // the reference path stays static so the physics query is never polluted by // its own cosmetic effect). // // The outbound launch speed is solved, not guessed: given the real height // climb from till to cashier baked into the wire, v0 is picked so the cup's // kinetic energy is exactly spent by the time it reaches the far post — it // "just crests" rather than sailing past. The return leg is net downhill // (the cashier post sits higher), so a short braking zone right at the till // post — read as the wire's own cushioned catch, not a decorative ease — // keeps the landing gentle instead of letting real physics slam it in. // // State machine: idle -> outbound (launch) -> settling (parked at the // cashier post, rocking gently, while the real async onSubmit is in flight — // a minimum rock window keeps this beat legible even if the promise settles // instantly) -> returning (coasts back carrying the outcome) -> arrived // (receipt unfolds as real

rows, in document order, not canvas/SVG // text). The submit button is never given a `disabled` attribute — busyness // is a guard on the click handler, matching autosave-ratchet's status-guard // idiom, so it stays focusable and keyboard-reachable through the whole // trip. // // A11y: one role=status aria-live=polite region speaks exactly three coarse // events per cycle — "Payment sent.", the settle result ("Captured — $4.20 // change returning."), and "Receipt ready." — never per-frame position. The // same three (plus a couple more, since text has no throttling reason to // stay coarse) also render as a small always-visible caption, so nothing // here is carried by the graphic alone. The wire/cup SVG is aria-hidden. The // receipt is a real

; /** extra classes merged onto the rendered root element */ className?: string; } type Status = "idle" | "outbound" | "settling" | "returning" | "arrived"; // --- wire geometry (fixed layout constants, not props) ---------------------- const VIEW_W = 400; const VIEW_H = 200; const GROUND_Y = 186; const TILL_X = 40; const TILL_Y = 140; const CASHIER_X = 360; const CASHIER_Y = 76; const CATENARY_A = 300; const SAMPLE_COUNT = 90; const GRAVITY = 0.0012; // px/ms^2, arbitrary units — tuned against this wire's own span const V_ARRIVE_OUT = 0.1; // px/ms — the "just crests" target arrival speed outbound const BRAKE_PX_OUT = 28; const BRAKE_FLOOR_OUT = 0.55; const RETURN_V0 = 0.12; const RETURN_FLOOR_V = 0.05; const BRAKE_PX_RETURN = 60; const BRAKE_FLOOR_RETURN = 0.3; const ROCK_AMP_DEG = 5; const ROCK_FREQ_HZ = 1.4; const MIN_ROCK_MS = 280; const DEFAULT_RESOLVE_MS = 560; const DEFLECT_AMP = 3.5; const DEFLECT_SIGMA = 42; interface CatenaryShape { a: number; xm: number; c: number; } // Standard two-point catenary solve, done in an up-positive coordinate space // (Y = -svgY) so a*cosh(...) sags the way gravity actually sags a cable, then // flipped back to SVG's down-positive y on read. function solveCatenary(x0: number, svgY0: number, x1: number, svgY1: number, a: number): CatenaryShape { const Y0 = -svgY0; const Y1 = -svgY1; const dx = x1 - x0; const dY = Y1 - Y0; const k = dx / (2 * a); const rhs = dY / (2 * a * Math.sinh(k)); const p = Math.asinh(rhs); const xm = (x0 + x1) / 2 - a * p; const c = Y0 - a * Math.cosh((x0 - xm) / a); return { a, xm, c }; } function catenarySvgY(x: number, shape: CatenaryShape): number { return -(shape.a * Math.cosh((x - shape.xm) / shape.a) + shape.c); } interface SamplePoint { x: number; y: number; } function buildSamplePoints(shape: CatenaryShape): SamplePoint[] { const points: SamplePoint[] = []; for (let i = 0; i <= SAMPLE_COUNT; i++) { const t = i / SAMPLE_COUNT; const x = TILL_X + (CASHIER_X - TILL_X) * t; points.push({ x, y: catenarySvgY(x, shape) }); } return points; } function buildPathD(points: SamplePoint[]): string { return points.map((p, i) => `${i === 0 ? "M" : "L"}${p.x.toFixed(2)},${p.y.toFixed(2)}`).join(" "); } const CATENARY_SHAPE = solveCatenary(TILL_X, TILL_Y, CASHIER_X, CASHIER_Y, CATENARY_A); const SAMPLE_POINTS = buildSamplePoints(CATENARY_SHAPE); const BASE_WIRE_D = buildPathD(SAMPLE_POINTS); // A localized gaussian bump added under the cup's current x, on top of the // static geometry — cosmetic only, never fed back into the physics query. function buildDeflectedD(cupX: number): string { const points = SAMPLE_POINTS.map((p) => { const dx = p.x - cupX; const bump = DEFLECT_AMP * Math.exp(-(dx * dx) / (2 * DEFLECT_SIGMA * DEFLECT_SIGMA)); return { x: p.x, y: p.y + bump }; }); return buildPathD(points); } function brakeMultiplier(distToTarget: number, brakePx: number, floorMult: number): number { if (distToTarget >= brakePx) return 1; const t = Math.max(0, distToTarget / brakePx); const eased = t * t * (3 - 2 * t); return floorMult + (1 - floorMult) * eased; } function velocityAt(hCur: number, hStart: number, v0: number, g: number, floorV: number): number { const v2 = v0 * v0 - 2 * g * (hCur - hStart); return Math.sqrt(Math.max(floorV * floorV, v2)); } interface PhysicsSample { x: number; y: number; h: number; tiltDeg: number; } function samplePhysics(path: SVGPathElement, s: number, total: number): PhysicsSample { const clamped = Math.max(0, Math.min(total, s)); const eps = 6; const lo = Math.max(0, clamped - eps); const hi = Math.min(total, clamped + eps); const p = path.getPointAtLength(clamped); const a = path.getPointAtLength(lo); const b = path.getPointAtLength(hi); const dx = b.x - a.x; const dy = b.y - a.y; const tiltDeg = Math.abs(dx) < 0.001 && Math.abs(dy) < 0.001 ? 0 : Math.max(-30, Math.min(30, (Math.atan2(dy, dx) * 180) / Math.PI)); return { x: p.x, y: p.y, h: -p.y, tiltDeg }; } interface PhysicsConsts { total: number; hStart: number; hEnd: number; outV0: number; } function formatUSD(n: number): string { return `$${n.toFixed(2)}`; } function buildScenario(amount: number, idx: number): RapidWireResult { const n = ((idx % 4) + 4) % 4; if (n === 0) { return { status: "captured", lines: [{ label: "Captured", amount }] }; } if (n === 1) { const tendered = amount % 5 === 0 ? amount + 5 : Math.ceil(amount / 5) * 5; const change = Math.round((tendered - amount) * 100) / 100; return { status: "captured", lines: [ { label: "Captured", amount }, { label: "Change", amount: -change }, ], returningNoun: "change", }; } if (n === 2) { const captured = Math.round(amount * 0.6 * 100) / 100; const refund = Math.round((amount - captured) * 100) / 100; return { status: "captured", lines: [ { label: "Captured — partial authorization", amount: captured }, { label: "Refunded — remaining balance", amount: -refund }, ], returningNoun: "refund", note: "Partial authorization", }; } return { status: "declined", lines: [{ label: "Declined — hold released", amount: -amount }], returningNoun: "refund", note: "Card declined", }; } function buildSettleMessage(result: RapidWireResult): string { const back = result.lines.filter((l) => l.amount < 0).reduce((sum, l) => sum + Math.abs(l.amount), 0); const verb = result.status === "captured" ? "Captured" : "Declined"; if (back <= 0) return `${verb} — receipt returning.`; const noun = result.returningNoun ?? "refund"; return `${verb} — ${formatUSD(back)} ${noun} returning.`; } function useReducedMotion(): boolean { const [reduced, setReduced] = useState(false); useEffect(() => { const mq = window.matchMedia("(prefers-reduced-motion: reduce)"); setReduced(mq.matches); const onChange = () => setReduced(mq.matches); mq.addEventListener("change", onChange); return () => mq.removeEventListener("change", onChange); }, []); return reduced; } function ReturnGlyph() { return ( ); } export function RapidWire({ amount = 24, label = "Amount due", onSubmit, className = "" }: RapidWireProps) { const autoId = useId(); const liveId = `rw-live-${autoId.replace(/:/g, "")}`; const physicsPathRef = useRef(null); const wirePathRef = useRef(null); const cupRef = useRef(null); const cupInnerRef = useRef(null); const physicsRef = useRef(null); const sRef = useRef(0); const rafRef = useRef(null); const rockRafRef = useRef(null); const busyRef = useRef(false); const mountedRef = useRef(true); const scenarioIndexRef = useRef(0); const parityRef = useRef(false); const pulseTimeoutRef = useRef | undefined>(undefined); const reducedMotion = useReducedMotion(); const [status, setStatus] = useState("idle"); const [caption, setCaption] = useState("Ready to send."); const [announceText, setAnnounceText] = useState(""); const [lines, setLines] = useState([]); const [note, setNote] = useState(undefined); const announce = useCallback((message: string) => { parityRef.current = !parityRef.current; setAnnounceText(message + (parityRef.current ? "" : "")); }, []); const writeCupPose = useCallback((s: number, extraDeg = 0) => { const path = physicsPathRef.current; const cup = cupRef.current; const consts = physicsRef.current; if (!path || !cup || !consts) return; const sample = samplePhysics(path, s, consts.total); cup.setAttribute( "transform", `translate(${sample.x.toFixed(2)} ${sample.y.toFixed(2)}) rotate(${(sample.tiltDeg + extraDeg).toFixed(2)})` ); }, []); const writeWireDeflection = useCallback((cupX: number | null) => { const wire = wirePathRef.current; if (!wire) return; wire.setAttribute("d", cupX == null ? BASE_WIRE_D : buildDeflectedD(cupX)); }, []); // Static geometry, measured once: total arc length and the real height of // each post, read straight off the rendered reference path rather than // re-derived from the math that built it. useEffect(() => { const path = physicsPathRef.current; if (!path) return; const total = path.getTotalLength(); const p0 = path.getPointAtLength(0); const p1 = path.getPointAtLength(total); const hStart = -p0.y; const hEnd = -p1.y; const climb = hEnd - hStart; const outV0 = Math.sqrt(V_ARRIVE_OUT * V_ARRIVE_OUT + 2 * GRAVITY * climb); physicsRef.current = { total, hStart, hEnd, outV0 }; writeCupPose(0); }, [writeCupPose]); useEffect( () => () => { mountedRef.current = false; if (rafRef.current != null) cancelAnimationFrame(rafRef.current); if (rockRafRef.current != null) cancelAnimationFrame(rockRafRef.current); clearTimeout(pulseTimeoutRef.current); }, [] ); const animateLeg = useCallback( (direction: 1 | -1): Promise => new Promise((resolve) => { const consts = physicsRef.current; const path = physicsPathRef.current; if (!consts || !path) { resolve(); return; } const total = consts.total; const hStart = direction === 1 ? consts.hStart : consts.hEnd; const v0 = direction === 1 ? consts.outV0 : RETURN_V0; const floorV = direction === 1 ? V_ARRIVE_OUT * 0.4 : RETURN_FLOOR_V; const brakePx = direction === 1 ? BRAKE_PX_OUT : BRAKE_PX_RETURN; const brakeFloor = direction === 1 ? BRAKE_FLOOR_OUT : BRAKE_FLOOR_RETURN; let last = -1; const step = (now: number) => { if (last < 0) last = now; const dt = Math.min(48, now - last); last = now; let s = sRef.current; const sample = samplePhysics(path, s, total); const v = velocityAt(sample.h, hStart, v0, GRAVITY, floorV); const dist = direction === 1 ? total - s : s; const mult = brakeMultiplier(dist, brakePx, brakeFloor); s += direction * v * mult * dt; s = Math.max(0, Math.min(total, s)); sRef.current = s; writeCupPose(s); writeWireDeflection(sample.x); const done = direction === 1 ? s >= total - 0.05 : s <= 0.05; if (done) { sRef.current = direction === 1 ? total : 0; writeCupPose(sRef.current); writeWireDeflection(null); rafRef.current = null; resolve(); return; } rafRef.current = requestAnimationFrame(step); }; rafRef.current = requestAnimationFrame(step); }), [writeCupPose, writeWireDeflection] ); const startRocking = useCallback(() => { const consts = physicsRef.current; if (!consts) return; const start = performance.now(); const step = (now: number) => { const t = (now - start) / 1000; const wobble = ROCK_AMP_DEG * Math.sin(t * ROCK_FREQ_HZ * Math.PI * 2); writeCupPose(consts.total, wobble); rockRafRef.current = requestAnimationFrame(step); }; rockRafRef.current = requestAnimationFrame(step); }, [writeCupPose]); const stopRocking = useCallback(() => { if (rockRafRef.current != null) { cancelAnimationFrame(rockRafRef.current); rockRafRef.current = null; } }, []); const defaultSubmit = useCallback((amt: number): Promise => { const idx = scenarioIndexRef.current; scenarioIndexRef.current += 1; const result = buildScenario(amt, idx); return new Promise((resolve) => { window.setTimeout(() => resolve(result), DEFAULT_RESOLVE_MS); }); }, []); const runCycle = useCallback(async () => { setLines([]); setNote(undefined); setStatus("outbound"); setCaption("Cup away — heading to the cashier."); announce("Payment sent."); const submitFn = onSubmit ?? defaultSubmit; const resultPromise = submitFn(amount).catch( (): RapidWireResult => ({ status: "declined", lines: [{ label: "Payment failed — hold released", amount: -amount }], note: "Connection error", }) ); if (reducedMotion) { const result = await resultPromise; if (!mountedRef.current) return; // No intermediate frame is ever painted under reduced motion (no rAF // loop runs at all), so outbound/settling/returning are skipped as // states, not just as animations — announce + caption go straight to // the settle result, then straight to arrived. const msg = buildSettleMessage(result); announce(msg); setCaption(msg); setStatus("arrived"); setLines(result.lines); setNote(result.note); setCaption("Receipt ready."); announce("Receipt ready."); busyRef.current = false; return; } if (cupInnerRef.current) { cupInnerRef.current.classList.add("ns-rw-cup-launch"); clearTimeout(pulseTimeoutRef.current); pulseTimeoutRef.current = setTimeout(() => { cupInnerRef.current?.classList.remove("ns-rw-cup-launch"); }, 200); } await animateLeg(1); if (!mountedRef.current) return; setStatus("settling"); setCaption("Cashier is settling the payment."); startRocking(); const minWait = new Promise((resolve) => window.setTimeout(resolve, MIN_ROCK_MS)); const [result] = await Promise.all([resultPromise, minWait]); stopRocking(); if (!mountedRef.current) return; const msg = buildSettleMessage(result); announce(msg); setCaption(msg); setStatus("returning"); await animateLeg(-1); if (!mountedRef.current) return; setStatus("arrived"); setLines(result.lines); setNote(result.note); setCaption("Receipt ready."); announce("Receipt ready."); busyRef.current = false; }, [amount, onSubmit, defaultSubmit, reducedMotion, animateLeg, startRocking, stopRocking, announce]); const handleSubmit = useCallback(() => { if (busyRef.current) return; busyRef.current = true; void runCycle(); }, [runCycle]); const busy = status === "outbound" || status === "settling" || status === "returning"; // data-busy backs meta.json's gate: the verifier's press pass already // clicks the submit button once before the gate phase runs, so the gate's // own click on the same button is a same-tick no-op against the busy // guard above. Gating on the terminal receipt would race the ~2.6s round // trip against the gate's fixed ~1.7s post-click window and lose. Gating // on "cup is in flight" instead is both the thing that actually needs // checking (did the launch really happen) and comfortably still true at // check time, since it holds for the whole trip, not just its last beat. return (

{label}

{formatUSD(amount)}

{caption}

{announceText}

{lines.length > 0 && (

{note ?

{note}

: null}

{line.amount < 0 ? : null} {line.label} {line.amount < 0 ? `− ${formatUSD(Math.abs(line.amount))}` : formatUSD(line.amount)}

)}

); } const CSS = ` .ns-rw-cup-inner{transform-box:fill-box;transform-origin:center;} .ns-rw-cup-inner.ns-rw-cup-launch{animation:ns-rw-launch-pulse 200ms cubic-bezier(0.34,1.56,0.64,1);} @keyframes ns-rw-launch-pulse{0%{transform:scale(0.82);}55%{transform:scale(1.08);}100%{transform:scale(1);}} @keyframes ns-rw-row-enter{from{opacity:0;transform:translateY(4px);}to{opacity:1;transform:translateY(0);}} .ns-rw-row-enter{animation:ns-rw-row-enter 260ms cubic-bezier(0.19,1,0.22,1) both;} @media (prefers-reduced-motion: reduce){ .ns-rw-cup-inner.ns-rw-cup-launch{animation:none !important;} .ns-rw-row-enter{animation:none !important;} } `; 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","ns-accent",{"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-accent",":"]}]}],["$","div",null,{"className":"hover:bg-muted/50 py-2 px-1 rounded-md w-full","children":"#006bff"}]]}]]}],["$","$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"}]]}]]}],["$","$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-ns-accent",{"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-accent",":"]}]}],["$","div",null,{"className":"hover:bg-muted/50 py-2 px-1 rounded-md w-full","children":"var(--ns-accent)"}]]}]]}],["$","$L66",null,{"orientation":"horizontal"}]]}]}]]}],null]}]}]}]]}],["$","$L67",null,{"files":[{"path":"registry/loud/rapid-wire/component.tsx","content":"$68","type":"registry:ui","target":"components/ui/rapid-wire.tsx"}],"className":"h-[70svh] min-h-80"}]]}]