{ "$schema": "https://ui.shadcn.com/schema/registry-item.json", "name": "order-book", "title": "Order Book", "description": "A trading ladder with cumulative depth bars, a spread row, and flashing updates in live mode.", "files": [ { "path": "app/registry/charts/chart-engine.tsx", "content": "'use client';\n\nimport * as React from 'react';\nimport { cn } from '@/lib/utils';\n\nexport const marketVarsClassName =\n '[--spectrum-chart-up:#059669] [--spectrum-chart-down:#e11d48] [--spectrum-chart-surface:#fff] dark:[--spectrum-chart-up:#34d399] dark:[--spectrum-chart-down:#fb7185] dark:[--spectrum-chart-surface:#0a0a0a]';\n\nexport const UP = 'var(--spectrum-chart-up)';\nexport const DOWN = 'var(--spectrum-chart-down)';\nexport const SURFACE = 'var(--spectrum-chart-surface)';\nexport const EASE = 'cubic-bezier(0.22, 1, 0.36, 1)';\n\nexport type Candle = {\n t: number;\n open: number;\n high: number;\n low: number;\n close: number;\n volume: number;\n};\n\nexport type MarketRange = {\n label: string;\n bars: number | null;\n};\n\nexport const MARKET_RANGES: MarketRange[] = [\n { label: '1W', bars: 7 },\n { label: '1M', bars: 30 },\n { label: '3M', bars: 90 },\n { label: '6M', bars: 180 },\n { label: '1Y', bars: 365 },\n { label: 'ALL', bars: null },\n];\n\nexport function mulberry32(seed: number) {\n let a = seed;\n return () => {\n a |= 0;\n a = (a + 0x6d2b79f5) | 0;\n let t = Math.imul(a ^ (a >>> 15), 1 | a);\n t = (t + Math.imul(t ^ (t >>> 7), 61 | t)) ^ t;\n return ((t ^ (t >>> 14)) >>> 0) / 4294967296;\n };\n}\n\nexport const DAY_MS = 86_400_000;\n\nexport function generateCandles({\n seed,\n count,\n start,\n drift,\n vol,\n startedAt,\n}: {\n seed: number;\n count: number;\n start: number;\n drift: number;\n vol: number;\n startedAt: number;\n}): Candle[] {\n const rand = mulberry32(seed);\n const out: Candle[] = [];\n let price = start;\n let volatility = vol;\n\n for (let i = 0; i < count; i += 1) {\n volatility += (vol - volatility) * 0.05 + (rand() - 0.5) * vol * 0.35;\n volatility = Math.max(vol * 0.35, Math.min(vol * 2.6, volatility));\n\n const open = price;\n const shock = (rand() - 0.5) * 2 * volatility + drift;\n const close = Math.max(0.01, open * (1 + shock));\n const wick = Math.abs(shock) * 0.9 + volatility * 0.55;\n const high = Math.max(open, close) * (1 + rand() * wick);\n const low = Math.min(open, close) * (1 - rand() * wick);\n const range = Math.abs(close - open) / Math.max(open, 1e-6);\n const volume = Math.round((0.55 + rand() * 0.7 + range * 26) * 1_000_000);\n\n out.push({\n t: startedAt + i * DAY_MS,\n open: round2(open),\n high: round2(high),\n low: round2(low),\n close: round2(close),\n volume,\n });\n price = close;\n }\n return out;\n}\n\nexport function round2(v: number) {\n return Math.round(v * 100) / 100;\n}\n\nconst SERIES_END = Date.UTC(2026, 7, 21);\nconst SERIES_LEN = 420;\nconst SERIES_START = SERIES_END - (SERIES_LEN - 1) * DAY_MS;\n\nexport const SOL_MARKET = generateCandles({\n seed: 20_260_823,\n count: SERIES_LEN,\n start: 96.4,\n drift: 0.0021,\n vol: 0.031,\n startedAt: SERIES_START,\n});\n\nexport const AAPL_MARKET = generateCandles({\n seed: 7_431_902,\n count: SERIES_LEN,\n start: 189.2,\n drift: 0.0009,\n vol: 0.013,\n startedAt: SERIES_START,\n});\n\nexport const BTC_MARKET = generateCandles({\n seed: 41_556_073,\n count: SERIES_LEN,\n start: 61_400,\n drift: 0.0016,\n vol: 0.022,\n startedAt: SERIES_START,\n});\n\nexport function formatMoney(value: number, compact = false) {\n const digits = compact ? 2 : value >= 1000 ? 2 : value >= 1 ? 2 : 4;\n return new Intl.NumberFormat('en-US', {\n style: 'currency',\n currency: 'USD',\n notation: compact ? 'compact' : 'standard',\n minimumFractionDigits: compact ? 0 : digits,\n maximumFractionDigits: digits,\n }).format(value);\n}\n\nexport function formatSignedPct(value: number) {\n return `${value > 0 ? '+' : value < 0 ? '−' : ''}${Math.abs(value).toFixed(2)}%`;\n}\n\nexport const DATE_SHORT = new Intl.DateTimeFormat('en-US', {\n month: 'short',\n day: 'numeric',\n timeZone: 'UTC',\n});\nexport const DATE_FULL = new Intl.DateTimeFormat('en-US', {\n month: 'short',\n day: 'numeric',\n year: 'numeric',\n timeZone: 'UTC',\n});\n\nexport function formatAxisPrice(value: number) {\n if (Math.abs(value) >= 10_000) return formatMoney(value, true);\n return formatMoney(value, false);\n}\n\nexport function niceTicks(lo: number, hi: number, target = 5): number[] {\n if (!Number.isFinite(lo) || !Number.isFinite(hi) || hi <= lo) return [lo];\n const raw = (hi - lo) / target;\n const mag = Math.pow(10, Math.floor(Math.log10(raw)));\n const norm = raw / mag;\n const step = (norm >= 7.5 ? 10 : norm >= 3.5 ? 5 : norm >= 2.25 ? 2.5 : norm >= 1.5 ? 2 : 1) * mag;\n const first = Math.ceil(lo / step) * step;\n const out: number[] = [];\n for (let v = first; v <= hi + step * 0.001; v += step) {\n out.push(Math.round(v / step) * step);\n }\n return out;\n}\n\nexport function monotonePath(points: { x: number; y: number }[]): string {\n const n = points.length;\n if (n === 0) return '';\n if (n === 1) return `M${points[0].x},${points[0].y}`;\n\n const dx: number[] = [];\n const slope: number[] = [];\n for (let i = 0; i < n - 1; i += 1) {\n dx[i] = points[i + 1].x - points[i].x;\n slope[i] = dx[i] === 0 ? 0 : (points[i + 1].y - points[i].y) / dx[i];\n }\n\n const tangent = new Array(n);\n tangent[0] = slope[0];\n tangent[n - 1] = slope[n - 2];\n for (let i = 1; i < n - 1; i += 1) {\n if (slope[i - 1] * slope[i] <= 0) {\n tangent[i] = 0;\n } else {\n const w1 = 2 * dx[i] + dx[i - 1];\n const w2 = dx[i] + 2 * dx[i - 1];\n tangent[i] = (w1 + w2) / (w1 / slope[i - 1] + w2 / slope[i]);\n }\n }\n\n let d = `M${points[0].x},${points[0].y}`;\n for (let i = 0; i < n - 1; i += 1) {\n const c1x = points[i].x + dx[i] / 3;\n const c1y = points[i].y + (tangent[i] * dx[i]) / 3;\n const c2x = points[i + 1].x - dx[i] / 3;\n const c2y = points[i + 1].y - (tangent[i + 1] * dx[i]) / 3;\n d += `C${c1x.toFixed(2)},${c1y.toFixed(2)} ${c2x.toFixed(2)},${c2y.toFixed(2)} ${points[i + 1].x.toFixed(2)},${points[i + 1].y.toFixed(2)}`;\n }\n return d;\n}\n\nexport const MORPH_SAMPLES = 132;\n\nexport function resample(values: number[], n = MORPH_SAMPLES): number[] {\n if (values.length === 0) return new Array(n).fill(0);\n if (values.length === 1) return new Array(n).fill(values[0]);\n const out = new Array(n);\n for (let i = 0; i < n; i += 1) {\n const p = (i / (n - 1)) * (values.length - 1);\n const lo = Math.floor(p);\n const hi = Math.min(values.length - 1, lo + 1);\n out[i] = values[lo] + (values[hi] - values[lo]) * (p - lo);\n }\n return out;\n}\n\nexport function usePrefersReducedMotion() {\n const [reduce, setReduce] = React.useState(false);\n React.useEffect(() => {\n const mq = window.matchMedia('(prefers-reduced-motion: reduce)');\n const sync = () => setReduce(mq.matches);\n sync();\n mq.addEventListener('change', sync);\n return () => mq.removeEventListener('change', sync);\n }, []);\n return reduce;\n}\n\nexport function useElementWidth() {\n const ref = React.useRef(null);\n const [width, setWidth] = React.useState(0);\n React.useEffect(() => {\n const node = ref.current;\n if (!node) return;\n const ro = new ResizeObserver(([entry]) => {\n setWidth(entry.contentRect.width);\n });\n ro.observe(node);\n setWidth(node.getBoundingClientRect().width);\n return () => ro.disconnect();\n }, []);\n return [ref, width] as const;\n}\n\nexport const easeOutCubic = (t: number) => 1 - Math.pow(1 - t, 3);\n\nexport function useTween(target: number[], { duration = 520, enabled = true } = {}) {\n const [value, setValue] = React.useState(target);\n const currentRef = React.useRef(target);\n const fromRef = React.useRef(target);\n const toRef = React.useRef(target);\n const startRef = React.useRef(0);\n const rafRef = React.useRef(0);\n\n React.useEffect(() => {\n if (!enabled) return;\n const to = toRef.current;\n const changed = to.length !== target.length || target.some((v, i) => v !== to[i]);\n if (!changed) return;\n\n toRef.current = target;\n\n if (currentRef.current.length !== target.length) {\n currentRef.current = target;\n fromRef.current = target;\n cancelAnimationFrame(rafRef.current);\n rafRef.current = requestAnimationFrame(() => setValue(target));\n return;\n }\n\n fromRef.current = currentRef.current;\n startRef.current = performance.now();\n cancelAnimationFrame(rafRef.current);\n\n const tick = (now: number) => {\n const p = Math.min(1, (now - startRef.current) / duration);\n const e = easeOutCubic(p);\n const from = fromRef.current;\n const dest = toRef.current;\n const next = dest.map((v, i) => from[i] + (v - from[i]) * e);\n currentRef.current = next;\n setValue(next);\n if (p < 1) rafRef.current = requestAnimationFrame(tick);\n };\n rafRef.current = requestAnimationFrame(tick);\n });\n\n React.useEffect(() => () => cancelAnimationFrame(rafRef.current), []);\n\n if (!enabled || value.length !== target.length) return target;\n return value;\n}\n\nexport function useTweenNumber(target: number, options?: { duration?: number; enabled?: boolean }) {\n const vec = React.useMemo(() => [target], [target]);\n return useTween(vec, options)[0];\n}\n\nexport const KEYFRAMES = `\n@keyframes spectrum-mc-rise {\n from { transform: scaleY(0); opacity: 0; }\n to { transform: scaleY(1); opacity: 1; }\n}\n@keyframes spectrum-mc-draw {\n from { stroke-dashoffset: 1; }\n to { stroke-dashoffset: 0; }\n}\n@keyframes spectrum-mc-fade {\n from { opacity: 0; }\n to { opacity: 1; }\n}\n@keyframes spectrum-sk-pulse {\n from { opacity: 1; }\n to { opacity: 0.4; }\n}\n@keyframes spectrum-mc-enter {\n from { opacity: 0; transform: translateY(6px); }\n to { opacity: 1; transform: translateY(0); }\n}\n@keyframes spectrum-mc-grow {\n from { transform: scaleX(0); }\n to { transform: scaleX(1); }\n}\n@keyframes spectrum-mc-flash {\n from { opacity: 0.2; }\n to { opacity: 0; }\n}\n@keyframes spectrum-mc-ping {\n 0% { r: 4; opacity: 0.55; }\n 70% { r: 13; opacity: 0; }\n 100% { r: 13; opacity: 0; }\n}\n`;\n\nexport function Keyframes() {\n return ;\n}\n\nconst DIGITS = ['0', '1', '2', '3', '4', '5', '6', '7', '8', '9'];\n\nfunction Digit({ char, animate }: { char: string; animate: boolean }) {\n const digit = char >= '0' && char <= '9' ? Number(char) : null;\n if (digit == null) {\n return (\n \n {char}\n \n );\n }\n return (\n \n \n {DIGITS.map((d) => (\n \n {d}\n \n ))}\n \n \n );\n}\n\nexport function RollingNumber({\n value,\n format,\n className,\n animate = true,\n}: {\n value: number;\n format: (value: number) => string;\n className?: string;\n animate?: boolean;\n}) {\n const text = format(value);\n return (\n \n {text}\n {text.split('').map((char, index) => (\n = '0' && char <= '9' ? 'digit' : char}`} char={char} animate={animate} />\n ))}\n \n );\n}\n\nexport function RangeSelector({\n ranges,\n value,\n onChange,\n reduce,\n}: {\n ranges: MarketRange[];\n value: string;\n onChange: (label: string) => void;\n reduce: boolean;\n}) {\n const index = Math.max(0, ranges.findIndex((r) => r.label === value));\n const width = 100 / ranges.length;\n\n return (\n \n \n {ranges.map((range) => {\n const active = range.label === value;\n return (\n onChange(range.label)}\n className={cn(\n 'relative z-10 rounded-full px-2.5 py-1 font-mono text-[11px] leading-none tracking-wide transition-colors duration-200',\n 'focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-black/20 dark:focus-visible:ring-white/25',\n active\n ? 'text-neutral-950 dark:text-white'\n : 'text-neutral-500 hover:text-neutral-800 dark:text-neutral-400 dark:hover:text-neutral-200',\n )}\n style={{ flex: `0 0 ${width}%` }}\n >\n {range.label}\n \n );\n })}\n \n );\n}\n\nexport type BookLevel = {\n price: number;\n size: number;\n total: number;\n};\n\nexport type OrderBook = {\n mid: number;\n spread: number;\n bids: BookLevel[];\n asks: BookLevel[];\n};\n\nexport function generateOrderBook({\n mid,\n seed,\n levels = 14,\n tick,\n depth = 900,\n}: {\n mid: number;\n seed: number;\n levels?: number;\n tick?: number;\n depth?: number;\n}): OrderBook {\n const rand = mulberry32(seed);\n const step = tick ?? Math.max(0.01, round2(mid * 0.0006));\n\n const side = (direction: 1 | -1): BookLevel[] => {\n const out: BookLevel[] = [];\n let total = 0;\n for (let i = 0; i < levels; i += 1) {\n const distance = (i + 1) / levels;\n const base = depth * (0.18 + distance * 0.9);\n const whale = rand() > 0.87 ? 2.4 : 1;\n const size = Math.round(base * (0.55 + rand() * 0.9) * whale);\n total += size;\n out.push({\n price: round2(mid + direction * step * (i + 1)),\n size,\n total,\n });\n }\n return out;\n };\n\n const asks = side(1);\n const bids = side(-1);\n return { mid, spread: round2(asks[0].price - bids[0].price), bids, asks };\n}\n\nexport type TreemapInput = { label: string; weight: number; change: number; name?: string };\nexport type TreemapTile = TreemapInput & { x: number; y: number; w: number; h: number };\n\nexport function squarify(\n items: TreemapInput[],\n width: number,\n height: number,\n): TreemapTile[] {\n const sorted = [...items].filter((i) => i.weight > 0).sort((a, b) => b.weight - a.weight);\n const totalWeight = sorted.reduce((sum, i) => sum + i.weight, 0);\n if (!sorted.length || totalWeight <= 0 || width <= 0 || height <= 0) return [];\n\n const scale = (width * height) / totalWeight;\n const out: TreemapTile[] = [];\n let x = 0;\n let y = 0;\n let w = width;\n let h = height;\n let row: TreemapInput[] = [];\n let index = 0;\n\n const worst = (candidate: TreemapInput[], side: number) => {\n if (!candidate.length || side <= 0) return Infinity;\n const areas = candidate.map((i) => i.weight * scale);\n const sum = areas.reduce((a, b) => a + b, 0);\n const max = Math.max(...areas);\n const min = Math.min(...areas);\n const side2 = side * side;\n const sum2 = sum * sum;\n return Math.max((side2 * max) / sum2, sum2 / (side2 * min));\n };\n\n const layoutRow = (candidate: TreemapInput[], side: number, horizontal: boolean) => {\n const sum = candidate.reduce((total, i) => total + i.weight * scale, 0);\n const thickness = sum / side;\n let offset = 0;\n for (const item of candidate) {\n const length = (item.weight * scale) / thickness;\n out.push(\n horizontal\n ? { ...item, x: x + offset, y, w: length, h: thickness }\n : { ...item, x, y: y + offset, w: thickness, h: length },\n );\n offset += length;\n }\n if (horizontal) {\n y += thickness;\n h -= thickness;\n } else {\n x += thickness;\n w -= thickness;\n }\n };\n\n while (index < sorted.length) {\n const horizontal = w >= h;\n const side = horizontal ? w : h;\n const next = sorted[index];\n\n if (!row.length || worst([...row, next], side) <= worst(row, side)) {\n row.push(next);\n index += 1;\n } else {\n layoutRow(row, side, horizontal);\n row = [];\n }\n }\n if (row.length) layoutRow(row, w >= h ? w : h, w >= h);\n\n return out;\n}\n\nexport function changeColor(change: number, cap = 4) {\n const t = Math.max(-1, Math.min(1, change / cap));\n if (Math.abs(t) < 0.04) return 'var(--spectrum-heat-flat)';\n const weight = 0.22 + Math.abs(t) * 0.78;\n const base = t > 0 ? UP : DOWN;\n return `color-mix(in srgb, ${base} ${(weight * 100).toFixed(0)}%, var(--spectrum-heat-flat))`;\n}\n\nexport const seriesVarsClassName =\n '[--spectrum-series-1:#2563eb] [--spectrum-series-2:#f59e0b] [--spectrum-series-3:#0d9488] [--spectrum-series-4:#7c3aed] [--spectrum-series-5:#db2777] [--spectrum-series-6:#64748b] [--spectrum-track:#ececef] [--spectrum-chart-surface:#fff] [--spectrum-chart-up:#059669] [--spectrum-chart-down:#e11d48] dark:[--spectrum-series-1:#60a5fa] dark:[--spectrum-series-2:#fbbf24] dark:[--spectrum-series-3:#2dd4bf] dark:[--spectrum-series-4:#a78bfa] dark:[--spectrum-series-5:#f472b6] dark:[--spectrum-series-6:#94a3b8] dark:[--spectrum-track:#26262b] dark:[--spectrum-chart-surface:#0a0a0a] dark:[--spectrum-chart-up:#34d399] dark:[--spectrum-chart-down:#fb7185]';\n\nexport const SERIES_COLORS = [\n 'var(--spectrum-series-1)',\n 'var(--spectrum-series-2)',\n 'var(--spectrum-series-3)',\n 'var(--spectrum-series-4)',\n 'var(--spectrum-series-5)',\n 'var(--spectrum-series-6)',\n] as const;\n\nexport const TRACK = 'var(--spectrum-track)';\n\nexport const textHalo = {\n paintOrder: 'stroke',\n stroke: SURFACE,\n strokeWidth: 3.5,\n strokeLinejoin: 'round',\n} as const satisfies React.CSSProperties;\n\nexport function intensityColor(t: number, hue = 'var(--spectrum-series-1)') {\n const clamped = Math.max(0, Math.min(1, t));\n if (clamped <= 0.001) return TRACK;\n const weight = 14 + clamped * 86;\n return `color-mix(in srgb, ${hue} ${weight.toFixed(0)}%, ${TRACK})`;\n}\n\nexport function formatCount(value: number, digits = 1) {\n if (Math.abs(value) < 1000) return String(Math.round(value));\n return new Intl.NumberFormat('en-US', {\n notation: 'compact',\n maximumFractionDigits: digits,\n }).format(value);\n}\n\nexport function formatPct(value: number, digits = 1) {\n return `${value.toFixed(digits)}%`;\n}\n\nexport function onFillClass(intensity: number) {\n return intensity > 0.55\n ? 'fill-white dark:fill-neutral-950'\n : 'fill-neutral-900 dark:fill-white';\n}\n\nexport type ChartStatus = 'ready' | 'loading' | 'empty' | 'error';\n\nexport type SkeletonVariant = 'bars' | 'line' | 'grid' | 'rows' | 'arc' | 'cards';\n\nconst SKELETON_BARS = [46, 72, 55, 83, 41, 68, 92, 57, 76, 49, 88, 63];\nconst SKELETON_ROWS = [92, 74, 86, 61, 79, 55];\n\nfunction SkeletonShapes({\n variant,\n height,\n mode,\n reduce,\n}: {\n variant: SkeletonVariant;\n height: number;\n mode: 'pulse' | 'ghost';\n reduce: boolean;\n}) {\n const animate = mode === 'pulse' && !reduce;\n const breathe = (index: number): React.CSSProperties | undefined =>\n animate\n ? { animation: `spectrum-sk-pulse 1.5s ease-in-out ${index * 120}ms infinite alternate` }\n : undefined;\n const block = 'rounded-md bg-black/[0.06] dark:bg-white/[0.08]';\n\n if (variant === 'bars') {\n return (\n
\n {SKELETON_BARS.map((h, i) => (\n
\n ))}\n
\n );\n }\n\n if (variant === 'line') {\n return (\n
\n {[0, 1, 2, 3].map((i) => (\n
\n ))}\n \n \n \n
\n );\n }\n\n if (variant === 'grid') {\n return (\n
\n {Array.from({ length: 72 }, (_, i) => (\n \n ))}\n
\n );\n }\n\n if (variant === 'rows') {\n return (\n
\n {SKELETON_ROWS.map((w, i) => (\n
\n ))}\n
\n );\n }\n\n if (variant === 'cards') {\n return (\n
\n {[0, 1, 2, 3].map((i) => (\n \n
\n
\n
\n
\n ))}\n
\n );\n }\n\n return (\n
\n \n
\n );\n}\n\nexport function ChartSkeleton({\n variant = 'bars',\n height = 300,\n className,\n}: {\n variant?: SkeletonVariant;\n height?: number;\n className?: string;\n}) {\n const reduce = usePrefersReducedMotion();\n return (\n \n \n \n
\n );\n}\n\nfunction StateShell({\n height,\n variant,\n icon,\n iconClassName,\n title,\n description,\n action,\n}: {\n height: number;\n variant: SkeletonVariant;\n icon: React.ReactNode;\n iconClassName?: string;\n title: string;\n description?: string;\n action?: React.ReactNode;\n}) {\n const reduce = usePrefersReducedMotion();\n return (\n \n \n \n \n
\n \n \n {icon}\n \n

{title}

\n {description ? (\n

\n {description}\n

\n ) : null}\n {action ?
{action}
: null}\n
\n
\n );\n}\n\nconst actionClass =\n 'inline-flex items-center gap-1.5 rounded-full border border-black/10 bg-white px-3 py-1.5 text-[12px] font-medium text-neutral-900 shadow-xs transition-colors hover:bg-black/[0.03] focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-black/20 dark:border-white/12 dark:bg-white/[0.06] dark:text-white dark:hover:bg-white/[0.1] dark:focus-visible:ring-white/25';\n\nexport function ChartEmpty({\n height = 300,\n variant = 'line',\n title = 'No data yet',\n description = 'Once events start arriving this chart will fill in automatically.',\n action,\n}: {\n height?: number;\n variant?: SkeletonVariant;\n title?: string;\n description?: string;\n action?: React.ReactNode;\n}) {\n return (\n \n \n \n }\n />\n );\n}\n\nexport function ChartError({\n height = 300,\n variant = 'line',\n title = 'Could not load this chart',\n description = 'The request failed. Check the connection and try again.',\n onRetry,\n retryLabel = 'Retry',\n}: {\n height?: number;\n variant?: SkeletonVariant;\n title?: string;\n description?: string;\n onRetry?: () => void;\n retryLabel?: string;\n}) {\n return (\n \n \n \n \n {retryLabel}\n \n ) : null\n }\n icon={\n \n \n \n }\n />\n );\n}\n\nexport function ChartState({\n status = 'ready',\n height = 300,\n variant = 'bars',\n empty,\n error,\n onRetry,\n children,\n}: {\n status?: ChartStatus;\n height?: number;\n variant?: SkeletonVariant;\n empty?: { title?: string; description?: string; action?: React.ReactNode };\n error?: { title?: string; description?: string; retryLabel?: string };\n onRetry?: () => void;\n children: React.ReactNode;\n}) {\n if (status === 'loading') {\n return (\n
\n \n Loading chart data\n
\n );\n }\n if (status === 'empty') return ;\n if (status === 'error') {\n return ;\n }\n return <>{children};\n}\n\nexport function useHoverIndexKeys({\n count,\n setIndex,\n clear,\n}: {\n count: number;\n setIndex: React.Dispatch>;\n clear?: () => void;\n}) {\n return React.useCallback(\n (event: React.KeyboardEvent) => {\n const { key } = event;\n if (key === 'Escape') {\n event.preventDefault();\n if (clear) clear();\n else setIndex(null);\n return;\n }\n if (key === 'Home' || key === 'End') {\n event.preventDefault();\n setIndex(key === 'Home' ? 0 : count - 1);\n return;\n }\n if (key !== 'ArrowLeft' && key !== 'ArrowRight') return;\n event.preventDefault();\n const step = key === 'ArrowRight' ? 1 : -1;\n setIndex((current) => {\n const next = (current ?? count - 1) + step;\n return Math.max(0, Math.min(count - 1, next));\n });\n },\n [count, setIndex, clear],\n );\n}\n\nexport function ChartDataTable({\n caption,\n columns,\n rows,\n}: {\n caption: string;\n columns: string[];\n rows: (string | number)[][];\n}) {\n return (\n \n \n \n \n {columns.map((column) => (\n \n ))}\n \n \n \n {rows.map((row, index) => (\n \n {row.map((cell, cellIndex) =>\n cellIndex === 0 ? (\n \n ) : (\n \n ),\n )}\n \n ))}\n \n
{caption}
\n {column}\n
\n {cell}\n {cell}
\n );\n}\n\nexport function Stat({ ready, children }: { ready: boolean; children: React.ReactNode }) {\n if (ready) return <>{children};\n return (\n \n —\n \n );\n}\n", "type": "registry:component", "target": "components/spectrumui/charts/chart-engine.tsx" }, { "path": "app/registry/charts/order-book.tsx", "content": "'use client';\n\nimport * as React from 'react';\nimport { cn } from '@/lib/utils';\nimport {\n type ChartStatus,\n ChartState,\n type BookLevel,\n DOWN,\n EASE,\n Keyframes,\n type OrderBook,\n UP,\n formatMoney,\n generateOrderBook,\n marketVarsClassName,\n mulberry32,\n usePrefersReducedMotion,\n} from './chart-engine';\n\nexport const SOL_LADDER = generateOrderBook({ mid: 245.85, seed: 90_210, levels: 9, depth: 820 });\nexport const ETH_LADDER = generateOrderBook({\n mid: 3_842.6,\n seed: 55_318,\n levels: 9,\n tick: 0.4,\n depth: 140,\n});\n\nfunction formatSpread(spread: number, mid: number) {\n const digits = mid >= 100 ? 2 : mid >= 1 ? 3 : 5;\n return new Intl.NumberFormat('en-US', {\n style: 'currency',\n currency: 'USD',\n minimumFractionDigits: digits,\n maximumFractionDigits: digits,\n }).format(spread);\n}\n\nfunction compactSize(value: number) {\n return new Intl.NumberFormat('en-US', {\n notation: 'compact',\n maximumFractionDigits: value >= 100 ? 1 : 2,\n }).format(value);\n}\n\ntype Row = BookLevel & { side: 'bid' | 'ask'; index: number };\n\nfunction BookRow({\n row,\n maxTotal,\n highlighted,\n flashed,\n flashKey,\n reduce,\n onEnter,\n}: {\n row: Row;\n maxTotal: number;\n highlighted: boolean;\n flashed: boolean;\n flashKey: number;\n reduce: boolean;\n onEnter: () => void;\n}) {\n const color = row.side === 'bid' ? UP : DOWN;\n const depth = Math.max(0.02, row.total / maxTotal);\n\n return (\n \n \n {flashed && !reduce ? (\n \n ) : null}\n \n {formatMoney(row.price)}\n \n \n {compactSize(row.size)}\n \n \n {compactSize(row.total)}\n \n \n );\n}\n\nexport interface OrderBookProps {\n className?: string;\n book?: OrderBook;\n symbol?: string;\n live?: boolean;\n status?: ChartStatus;\n onRetry?: () => void;\n}\n\nexport function OrderBookLadder({\n className,\n book = SOL_LADDER,\n symbol = 'SOL',\n live = false,\n status = 'ready',\n onRetry,\n}: OrderBookProps) {\n const reduce = usePrefersReducedMotion();\n const [hovered, setHovered] = React.useState<{ side: 'bid' | 'ask'; index: number } | null>(null);\n const [nonce, setNonce] = React.useState(0);\n\n const current = React.useMemo(() => {\n if (!live || nonce === 0) return book;\n const rand = mulberry32(0xb00c + nonce);\n const jitter = (levels: BookLevel[]) => {\n let total = 0;\n return levels.map((level) => {\n const size = Math.max(1, Math.round(level.size * (0.82 + rand() * 0.4)));\n total += size;\n return { ...level, size, total };\n });\n };\n return { ...book, bids: jitter(book.bids), asks: jitter(book.asks) };\n }, [book, live, nonce]);\n\n React.useEffect(() => {\n if (!live) return;\n const id = window.setInterval(() => setNonce((n) => n + 1), 1400);\n return () => window.clearInterval(id);\n }, [live]);\n\n const flashed = React.useMemo(() => {\n const next = new Set();\n if (!live || nonce === 0) return next;\n const rand = mulberry32(0xf1a5 + nonce);\n for (const side of ['bid', 'ask'] as const) {\n const levels = side === 'bid' ? current.bids : current.asks;\n for (let i = 0; i < levels.length; i += 1) {\n if (rand() > 0.62) next.add(`${side}-${i}`);\n }\n }\n return next;\n }, [live, nonce, current]);\n\n const maxTotal = Math.max(\n current.bids[current.bids.length - 1]?.total ?? 1,\n current.asks[current.asks.length - 1]?.total ?? 1,\n 1,\n );\n\n const bestBid = current.bids[0]?.price ?? current.mid;\n const bestAsk = current.asks[0]?.price ?? current.mid;\n const spread = bestAsk - bestBid;\n\n const askRows: Row[] = current.asks\n .map((level, index) => ({ ...level, side: 'ask' as const, index }))\n .reverse();\n const bidRows: Row[] = current.bids.map((level, index) => ({\n ...level,\n side: 'bid' as const,\n index,\n }));\n\n const isHighlighted = (row: Row) =>\n hovered != null && hovered.side === row.side && row.index <= hovered.index;\n\n return (\n setHovered(null)}\n >\n \n\n
\n \n {symbol} Order book\n \n {live ? (\n \n \n Live\n \n ) : null}\n
\n\n \n
\n Price\n Size\n Total\n
\n\n
    \n {askRows.map((row) => (\n setHovered({ side: 'ask', index: row.index })}\n />\n ))}\n
\n\n
\n \n {formatMoney(current.mid)}\n \n \n spread {formatSpread(spread, current.mid)} · {((spread / current.mid) * 100).toFixed(3)}%\n \n
\n\n
    \n {bidRows.map((row) => (\n setHovered({ side: 'bid', index: row.index })}\n />\n ))}\n
\n \n
\n );\n}\n\nexport function DefaultOrderBook(props: OrderBookProps) {\n return ;\n}\n\nexport function LiveOrderBook(props: OrderBookProps) {\n return ;\n}\n\nexport function EthereumOrderBook(props: OrderBookProps) {\n return ;\n}\n", "type": "registry:component", "target": "components/spectrumui/charts/order-book.tsx" } ], "type": "registry:component" }