69: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/3j06ow7w40nxu.js","/_next/static/immutable/chunks/31nn7jwsjvqii.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"] 74: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/3j06ow7w40nxu.js","/_next/static/immutable/chunks/31nn7jwsjvqii.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"] 53:"#ffffff" 54:["$","div","card-foreground",{"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":["--","card-foreground",":"]}]}],["$","div",null,{"className":"hover:bg-muted/50 py-2 px-1 rounded-md w-full","children":"#0b0e15"}]]}] 55:["$","div","muted-foreground",{"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":["--","muted-foreground",":"]}]}],["$","div",null,{"className":"hover:bg-muted/50 py-2 px-1 rounded-md w-full","children":"#5a636b"}]]}] 56:["$","div","border",{"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":["--","border",":"]}]}],["$","div",null,{"className":"hover:bg-muted/50 py-2 px-1 rounded-md w-full","children":["$","div",null,{"className":"flex items-center gap-2","children":[["$","div",null,{"className":"size-4 flex-shrink-0","style":{"backgroundColor":"rgba(0,0,0,0.08)"}}],["$","p",null,{"children":"rgba(0,0,0,0.08)"}]]}]}]]}] 57:["$","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":"#f8fafc"}]]}] 58:["$","div","surface-soft",{"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-soft",":"]}]}],["$","div",null,{"className":"hover:bg-muted/50 py-2 px-1 rounded-md w-full","children":"#fcfdfe"}]]}] 59:["$","div","panel",{"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":["--","panel",":"]}]}],["$","div",null,{"className":"hover:bg-muted/50 py-2 px-1 rounded-md w-full","children":"#ffffff"}]]}] 5a:["$","div","card-raised",{"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":["--","card-raised",":"]}]}],["$","div",null,{"className":"hover:bg-muted/50 py-2 px-1 rounded-md w-full","children":"#ffffff"}]]}] 5b:["$","div","card-shadow",{"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":["--","card-shadow",":"]}]}],["$","div",null,{"className":"hover:bg-muted/50 py-2 px-1 rounded-md w-full","children":["$","div",null,{"className":"flex items-center gap-2","children":[["$","div",null,{"className":"size-4 flex-shrink-0","style":{"backgroundColor":"rgba(0, 0, 0, 0.22)"}}],["$","p",null,{"children":"rgba(0, 0, 0, 0.22)"}]]}]}]]}] 5c:["$","div","chart-1",{"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":["--","chart-1",":"]}]}],["$","div",null,{"className":"hover:bg-muted/50 py-2 px-1 rounded-md w-full","children":"#2b7fd6"}]]}] 5d:["$","div","chart-2",{"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":["--","chart-2",":"]}]}],["$","div",null,{"className":"hover:bg-muted/50 py-2 px-1 rounded-md w-full","children":"#2f9e70"}]]}] 5e:["$","div","chart-3",{"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":["--","chart-3",":"]}]}],["$","div",null,{"className":"hover:bg-muted/50 py-2 px-1 rounded-md w-full","children":"#a85f3b"}]]}] 5f:["$","div","chart-4",{"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":["--","chart-4",":"]}]}],["$","div",null,{"className":"hover:bg-muted/50 py-2 px-1 rounded-md w-full","children":"#9a9d00"}]]}] 60:["$","div","chart-5",{"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":["--","chart-5",":"]}]}],["$","div",null,{"className":"hover:bg-muted/50 py-2 px-1 rounded-md w-full","children":"#9c5ba6"}]]}] 61:["$","div","chart-up",{"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":["--","chart-up",":"]}]}],["$","div",null,{"className":"hover:bg-muted/50 py-2 px-1 rounded-md w-full","children":"#1a9e6a"}]]}] 62:["$","div","chart-down",{"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":["--","chart-down",":"]}]}],["$","div",null,{"className":"hover:bg-muted/50 py-2 px-1 rounded-md w-full","children":"#d0433f"}]]}] 63:["$","div","chart-amber",{"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":["--","chart-amber",":"]}]}],["$","div",null,{"className":"hover:bg-muted/50 py-2 px-1 rounded-md w-full","children":"#b8862f"}]]}] 64:["$","$L69",null,{"orientation":"horizontal"}] 65:["$","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":["$","$L52",null,{"type":"always","className":"h-80 px-2","children":[["$","div",null,{"className":"gap-2 pb-8 flex flex-col pt-4","children":[["$","div","background",{"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":["--","background",":"]}]}],["$","div",null,{"className":"hover:bg-muted/50 py-2 px-1 rounded-md w-full","children":"#000000"}]]}],["$","div","foreground",{"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":["--","foreground",":"]}]}],["$","div",null,{"className":"hover:bg-muted/50 py-2 px-1 rounded-md w-full","children":"#ffffff"}]]}],["$","div","card",{"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":["--","card",":"]}]}],["$","div",null,{"className":"hover:bg-muted/50 py-2 px-1 rounded-md w-full","children":"#080b12"}]]}],["$","div","card-foreground",{"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":["--","card-foreground",":"]}]}],["$","div",null,{"className":"hover:bg-muted/50 py-2 px-1 rounded-md w-full","children":"#ffffff"}]]}],["$","div","muted-foreground",{"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":["--","muted-foreground",":"]}]}],["$","div",null,{"className":"hover:bg-muted/50 py-2 px-1 rounded-md w-full","children":"#868f97"}]]}],["$","div","border",{"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":["--","border",":"]}]}],["$","div",null,{"className":"hover:bg-muted/50 py-2 px-1 rounded-md w-full","children":["$","div",null,{"className":"flex items-center gap-2","children":[["$","div",null,{"className":"size-4 flex-shrink-0","style":{"backgroundColor":"rgba(255,255,255,0.05)"}}],["$","p",null,{"children":"rgba(255,255,255,0.05)"}]]}]}]]}],["$","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":"#0a0e16"}]]}],["$","div","surface-soft",{"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-soft",":"]}]}],["$","div",null,{"className":"hover:bg-muted/50 py-2 px-1 rounded-md w-full","children":"#070a12"}]]}],["$","div","panel",{"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":["--","panel",":"]}]}],["$","div",null,{"className":"hover:bg-muted/50 py-2 px-1 rounded-md w-full","children":"#0e121b"}]]}],["$","div","card-raised",{"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":["--","card-raised",":"]}]}],["$","div",null,{"className":"hover:bg-muted/50 py-2 px-1 rounded-md w-full","children":"#10141e"}]]}],["$","div","card-shadow",{"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":["--","card-shadow",":"]}]}],"$L6a"]}],"$L6b","$L6c","$L6d","$L6e","$L6f","$L70","$L71","$L72"]}],"$L73"]}]}]]}] 66:null 67:null 75:T3594,"use client" import { useId, useMemo, useRef, useState, type KeyboardEvent } from "react" import { motion, useInView, useReducedMotion } from "motion/react" import { cn } from "@/lib/utils" import { SEGMENT_OFF, SURFACE, THUMB, TRACK } from "@/components/ui/control-classes" import { LiveFigure } from "@/components/ui/live-figure" /* Simple Chart, the compact boxed member of the Price card family (with Market Snapshot). 2026-10-02 audit: redesigned. It was a near copy of Market Snapshot (the same pull to refresh, ring, header, line and pills) that never printed what it showed, so as a variant it swapped nothing but the period set. It now answers the same question with a different look at the same 340px width: · a box: the surface step (7% foreground into the background), radius 24 with a 10px padding, so 24 = 14 (the switcher's half height) + 10; the text sits 16px in · the three tier header: the name at /45 with the symbol at /90 beside it, the window switcher (1H 4H 1D) on the label row's right in the control material (TRACK, THUMB, SEGMENT_OFF), the price at 26px with its cents at /35, the move in its hue and the window at /45 · under it a low 64px area sparkline that runs to the box's edges: a 1.8px line over a gradient fill at 0.16 · scrubbing reads into the header in place; the readout swaps (4px, 2px blur) only when a scrub starts or ends or the window changes, never on each step. Arrow keys scrub the line when it has focus, Escape lets go · no pull to refresh and no ring: Market Snapshot keeps that gesture, and the duplicated code is gone. The aria-label says price, not balance Props are unchanged. Formulas: · a window's open = last ÷ (1 + change × the window's share of the day ÷ 100) · the walk is de-trended so it opens at that open and closes on `last` exactly · move = the pointed value (or last) − the open; percent = move ÷ open × 100 Motion: the line wipes in from the left once, 850ms, when the box first comes into view; a window switch morphs the line point for point in 380ms (every walk is 60 samples). Reduced motion draws every state at once. */ const UP = "var(--chart-up)" const DOWN = "var(--chart-down)" const EASE = [0.16, 1, 0.3, 1] as const const EASE_CSS = "cubic-bezier(0.16, 1, 0.3, 1)" function mulberry32(seed: number) { return () => { seed |= 0 seed = (seed + 0x6d2b79f5) | 0 let t = Math.imul(seed ^ (seed >>> 15), 1 | seed) t = (t + Math.imul(t ^ (t >>> 7), 61 | t)) ^ t return ((t ^ (t >>> 14)) >>> 0) / 4294967296 } } const N = 60 /** the plot is drawn in a 100 × 40 box stretched to the block; the stroke stays 1.8px */ const VB_W = 100 const VB_H = 40 /** where the line ends, so the end dot sits inside the box */ /* the line runs to the box's right edge (his call, 2026-10-02: "no padding on the right, it seems like there is just a gap there"); the end dot steps in instead of the line stopping short */ const END_X = 100 /** the band's height in layout pixels */ const BAND = 64 const WINDOWS = [ { key: "1H", label: "past hour", minutes: 60, share: 0.2 }, { key: "4H", label: "past 4 hours", minutes: 240, share: 0.45 }, { key: "1D", label: "today", minutes: 1440, share: 1 }, ] as const type WindowKey = (typeof WINDOWS)[number]["key"] /** a fixed "now" so every render agrees; scrub times count back from it */ const NOW_MIN = 17 * 60 + 24 /** Catmull-Rom through the samples, written as cubic Béziers, so the line reads as one smooth stroke */ function smoothPath(pts: { x: number; y: number }[]) { if (pts.length < 2) return "" let d = `M${pts[0].x.toFixed(2)} ${pts[0].y.toFixed(2)}` for (let i = 0; i < pts.length - 1; i++) { const p0 = pts[i - 1] ?? pts[i] const p1 = pts[i] const p2 = pts[i + 1] const p3 = pts[i + 2] ?? p2 d += ` C${(p1.x + (p2.x - p0.x) / 6).toFixed(2)} ${(p1.y + (p2.y - p0.y) / 6).toFixed(2)} ${(p2.x - (p3.x - p1.x) / 6).toFixed(2)} ${(p2.y - (p3.y - p1.y) / 6).toFixed(2)} ${p2.x.toFixed(2)} ${p2.y.toFixed(2)}` } return d } const money = (n: number) => n.toLocaleString("en-US", { minimumFractionDigits: 2, maximumFractionDigits: 2 }) const clock = (m: number) => { const t = ((Math.round(m) % 1440) + 1440) % 1440 return `${String(Math.floor(t / 60)).padStart(2, "0")}:${String(t % 60).padStart(2, "0")}` } /** * The compact asset price in a box: one number over a low area sparkline. Scrubbing the * line moves a dot along it, and the number, the move and the time read that point; * leaving settles them back to the latest. The window switch (1H, 4H, 1D) sits in the * label row. */ export function SimpleChart({ name = "Ethereum", symbol = "ETH", last = 3050, change = 1.4, className, }: { name?: string symbol?: string /** the live price; the line ends here */ last?: number /** the day's move in percent; a window's line opens at last ÷ (1 + its share of the move) */ change?: number className?: string }) { const reduced = useReducedMotion() ?? false const uid = useId() const [win, setWin] = useState("1D") const [hover, setHover] = useState(null) const plotRef = useRef(null) const seen = useInView(plotRef, { once: true, amount: 0.3 }) const shown = seen || reduced const winIndex = WINDOWS.findIndex((o) => o.key === win) const w = WINDOWS[winIndex] const series = useMemo(() => { const rand = mulberry32(41 + winIndex * 13) const open = last / (1 + (change * w.share) / 100) const steps: number[] = [] let v = 0 for (let i = 0; i < N; i++) { steps.push(v) v += (rand() - 0.5) * last * 0.006 } // two passes of a 7-sample mean: the walk keeps its shape but loses the tick-level jitter const soft = [0, 1].reduce((arr) => arr.map((_, i) => { const lo = Math.max(0, i - 3) const hi = Math.min(arr.length - 1, i + 3) let sum = 0 for (let k = lo; k <= hi; k++) sum += arr[k] return sum / (hi - lo + 1) }), steps) // de-trended after smoothing, so the line still opens at `open` and closes on `last` exactly const drift = soft[N - 1] - soft[0] const vals = soft.map((s, i) => open + (s - soft[0] - (drift * i) / (N - 1)) + ((last - open) * i) / (N - 1)) const lo = Math.min(...vals) const hi = Math.max(...vals) /* the line keeps to the band's upper part so the fill under it has room to fade, and runs edge to edge; the end dot is held 4px inside the box below, so it is never clipped */ const pts = vals.map((val, i) => ({ x: (i / (N - 1)) * END_X, y: 4 + (1 - (val - lo) / (hi - lo || 1)) * (VB_H - 14), val })) const d = smoothPath(pts) return { open, pts, d, area: `${d} L${END_X} ${VB_H} L0 ${VB_H} Z` } }, [last, change, w.share, winIndex]) const at = hover ?? N - 1 const point = series.pts[at] const move = point.val - series.open const pct = (move / (series.open || 1)) * 100 const lineHue = last >= series.open ? UP : DOWN const when = hover == null ? w.label : clock(NOW_MIN - (1 - hover / (N - 1)) * w.minutes) const [whole, cents] = money(point.val).split(".") const scrubTo = (clientX: number) => { const r = plotRef.current?.getBoundingClientRect() if (!r) return setHover(Math.max(0, Math.min(N - 1, Math.round(((clientX - r.left) / ((r.width * END_X) / VB_W)) * (N - 1))))) } const onKey = (e: KeyboardEvent) => { if (e.key === "ArrowLeft" || e.key === "ArrowRight") { e.preventDefault() const step = e.shiftKey ? 10 : 1 setHover((h) => Math.max(0, Math.min(N - 1, (h ?? N - 1) + (e.key === "ArrowLeft" ? -step : step)))) } else if (e.key === "Escape") setHover(null) } return (

= 0 ? "up" : "down"} ${Math.abs(pct).toFixed(1)} percent over the ${w.label}`} className={cn("w-[340px] max-w-full overflow-hidden rounded-[24px] p-[10px] tabular-nums", SURFACE, className)} > {/* the label row: the name and its symbol, the window switch on the right */}

{name} {symbol}

{WINDOWS.map((o) => { const on = o.key === win return ( ) })}

{/* the readout: it swaps only when a scrub starts or ends or the window changes */}

${whole} .{cents}

= 0 ? UP : DOWN }}> {move >= 0 ? "+" : "−"}${money(Math.abs(move))} · {move >= 0 ? "+" : "−"} {Math.abs(pct).toFixed(1)}% {when}

{/* the sparkline runs to the box's edges; arrow keys scrub it when it has focus */}

setHover(null)} onPointerMove={(e) => scrubTo(e.clientX)} onPointerDown={(e) => scrubTo(e.clientX)} onPointerLeave={() => setHover(null)} className="relative -mx-[10px] -mb-[10px] mt-4 block cursor-crosshair touch-pan-y outline-none focus-visible:bg-foreground/[0.03]" style={{ color: lineHue, height: BAND, transition: reduced ? undefined : "color 200ms" }} > {/* the guide and the dot are HTML over the stretched SVG, so they keep their shape */}

) } 76:T11ea,/* Control classes: the library's control material for components that ship on their own (2026-10-02, the audit's pattern 11). src/components/library/controls.ts is the site's copy; components used to paste its look in as a flat 8% fill "so the file ships alone", and those copies never turned white on a raised light surface. These read the same tokens WITH a fallback, so they follow the site's raised-surface rule here and still draw correctly in a buyer's app that has no such tokens. Shipped beside every component that imports it (scripts/build-registry.mjs bundles ui helpers automatically). Whole class strings, never assembled from pieces: Tailwind reads this file as text. */ /** what is ON in a switcher. Light (his call, 2026-10-02, after the inline slider): a WHITE * pill with a hairline and a soft shadow on the grey track. Dark: the 8% thumb */ export const THUMB = "bg-white shadow-[0_0_0_1px_var(--light-outline,rgba(0,0,0,0.09)),0_1px_3px_rgba(0,0,0,0.08)] dark:bg-[var(--control-fill,color-mix(in_oklab,var(--foreground)_8%,transparent))] dark:shadow-[var(--control-shadow,inset_0_1px_0_0_color-mix(in_srgb,var(--foreground)_6%,transparent))]" /** what a switcher's options sit in; its 2px padding is the gap the thumb keeps. Light: a * light grey track with no outline, the white pill sits in it. Dark: a hairline, no fill */ export const TRACK = "rounded-full border border-transparent bg-[color-mix(in_srgb,var(--foreground)_5%,var(--background))] p-0.5 dark:border-foreground/[0.04] dark:bg-transparent" /** an option that is off: the label alone answers the pointer */ export const SEGMENT_OFF = "text-foreground/60 hover:text-foreground/90" /** a secondary button: the thumb standing alone; size it with h-7 / h-9 and px */ export const BUTTON = "inline-flex items-center justify-center gap-1.5 rounded-full bg-[var(--control-fill,color-mix(in_oklab,var(--foreground)_8%,transparent))] shadow-[var(--control-shadow,inset_0_1px_0_0_color-mix(in_srgb,var(--foreground)_6%,transparent))] text-foreground/90 outline-none transition-[color,background-color,scale] duration-150 hover:bg-[var(--control-fill-hover,color-mix(in_oklab,var(--foreground)_12%,transparent))] focus-visible:bg-[var(--control-fill-hover,color-mix(in_oklab,var(--foreground)_12%,transparent))] active:scale-[0.97] disabled:pointer-events-none disabled:opacity-40 motion-reduce:active:scale-100" /** an icon-only control: no fill at rest, a faint one under the pointer */ export const ICON_BUTTON = "inline-flex items-center justify-center rounded-full text-foreground/60 outline-none transition-[color,background-color] duration-150 hover:bg-foreground/[0.06] hover:text-foreground/90 focus-visible:bg-foreground/[0.06]" /** a field: the track with just enough fill to read as somewhere to type */ export const FIELD = "rounded-full border border-foreground/[0.04] bg-[var(--field-fill,color-mix(in_oklab,var(--foreground)_5%,transparent))] text-foreground/90 outline-none transition-[background-color,border-color] duration-150 placeholder:text-foreground/45 focus:border-foreground/[0.12]" /** the one loud button of a form: 48px, full width, the foreground filled (the dashboards' * Modal primary). A ticket, a swap, a confirm: one of these and nothing louder */ export const BUTTON_PRIMARY = "inline-flex h-12 w-full items-center justify-center gap-2 rounded-full bg-foreground/[0.92] text-[14px] font-medium text-background outline-none transition-[background-color,scale,opacity] duration-150 hover:bg-foreground focus-visible:bg-foreground active:scale-[0.98] disabled:pointer-events-none disabled:opacity-40 motion-reduce:active:scale-100" /** a component's own card, field or block (spec 14.8). Dark: a #121212 fill on black. Light * (his call, 2026-10-02: "on light the card background is too dark, it can just be white, a * quiet outline and a small shadow"): white, a 1px hairline (Kraken's #e7e6e9, or 9% ink in an app without the token) and a * barely there shadow, * drawn as box shadows so the outline takes no layout */ export const SURFACE = "bg-background shadow-[0_0_0_1px_var(--light-outline,color-mix(in_srgb,var(--foreground)_9%,transparent)),0_1px_2px_rgba(0,0,0,0.04)] dark:bg-[color-mix(in_srgb,var(--foreground)_7%,var(--background))] dark:shadow-none" /** a block sitting ON a surface: a faint 4% grey inside a white card in light, #1f1f1f in dark */ export const RAISED = "bg-[color-mix(in_srgb,var(--foreground)_4%,var(--background))] dark:bg-[color-mix(in_srgb,var(--foreground)_12%,var(--background))]" 77:T4b2,"use client" import { type ReactNode } from "react" import { motion, useReducedMotion } from "motion/react" import { cn } from "@/lib/utils" /* Live figure: a figure fed by a live stream (2026-10-02, out of Tape Flow, where a price that re-entered on every print read as a flicker). The value changes in place on each tick; the figure swaps (4px, 2px blur, 150ms) only when `intent` changes: the pointer takes a point, lets it go, or a toggle flips. Pass the pointed point's id, or null for the live value. */ const EASE = [0.16, 1, 0.3, 1] as const export function LiveFigure({ intent, className, children, }: { /** what the figure is showing: a pointed point's id, or null while it follows the stream */ intent: string | number | null className?: string children: ReactNode }) { const reduced = useReducedMotion() return ( {children} ) } 68:["$","$L74",null,{"files":[{"path":"components/ui/simple-chart.tsx","content":"$75","type":"registry:ui","target":"components/ui/simple-chart.tsx"},{"path":"components/ui/control-classes.ts","content":"$76","type":"registry:ui","target":"components/ui/control-classes.ts"},{"path":"components/ui/live-figure.tsx","content":"$77","type":"registry:ui","target":"components/ui/live-figure.tsx"}],"className":"h-[70svh] min-h-80"}]