{ "$schema": "https://ui.shadcn.com/schema/registry-item.json", "name": "chart-states", "title": "Chart States", "description": "Loading skeletons, empty states and error states for every chart — one wrapper, six skeleton shapes, and a frame height that never shifts between them.", "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/cohort-chart.tsx", "content": "'use client';\n\nimport * as React from 'react';\nimport { cn } from '@/lib/utils';\nimport {\n type ChartStatus,\n ChartDataTable,\n ChartState,\n Stat,\n Keyframes,\n formatCount,\n formatPct,\n intensityColor,\n mulberry32,\n onFillClass,\n seriesVarsClassName,\n useElementWidth,\n usePrefersReducedMotion,\n} from './chart-engine';\n\nexport type Cohort = {\n label: string;\n size: number;\n retention: number[];\n};\n\nconst MONTHS = [\n 'Sep 2025', 'Oct 2025', 'Nov 2025', 'Dec 2025', 'Jan 2026', 'Feb 2026',\n 'Mar 2026', 'Apr 2026', 'May 2026', 'Jun 2026', 'Jul 2026', 'Aug 2026',\n];\n\nfunction generateCohorts(seed: number, periods = 12): Cohort[] {\n const rand = mulberry32(seed);\n return MONTHS.map((label, index) => {\n const observed = periods - index;\n const size = Math.round(420 + rand() * 900 + index * 70);\n const retention: number[] = [100];\n const quality = 1 + index * 0.012;\n let value = 100;\n for (let p = 1; p < observed; p += 1) {\n const decay = p === 1 ? 0.52 + rand() * 0.12 : 0.9 + rand() * 0.07;\n value = Math.max(2, value * Math.min(0.995, decay * quality));\n retention.push(Math.round(value * 10) / 10);\n }\n return { label, size, retention };\n });\n}\n\nexport const COHORTS = generateCohorts(90_210);\n\nexport interface CohortChartProps {\n className?: string;\n data?: Cohort[];\n period?: string;\n label?: string;\n hue?: string;\n status?: ChartStatus;\n onRetry?: () => void;\n}\n\nexport function CohortChart({\n className,\n data = COHORTS,\n period = 'Month',\n label = 'Signup cohort retention',\n hue = 'var(--spectrum-series-1)',\n status = 'ready',\n onRetry,\n}: CohortChartProps) {\n const reduce = usePrefersReducedMotion();\n const [wrapRef, width] = useElementWidth();\n const [hovered, setHovered] = React.useState<{ row: number; col: number } | null>(null);\n\n const periods = React.useMemo(\n () => Math.max(1, ...data.map((c) => c.retention.length)),\n [data],\n );\n\n const averages = React.useMemo(() => {\n const out: (number | null)[] = [];\n for (let p = 0; p < periods; p += 1) {\n const seen = data.map((c) => c.retention[p]).filter((v): v is number => v != null);\n out.push(seen.length ? seen.reduce((a, b) => a + b, 0) / seen.length : null);\n }\n return out;\n }, [data, periods]);\n\n const LABEL_W = 92;\n const SIZE_W = 54;\n const HEAD_H = 26;\n const ROW_H = 30;\n const GAP = 2;\n\n const available = Math.max(160, width - LABEL_W - SIZE_W);\n const colW = Math.max(34, Math.floor(available / periods));\n const w = LABEL_W + SIZE_W + periods * colW;\n const h = HEAD_H + (data.length + 1) * ROW_H + 8;\n\n const ready = width > 0;\n const totalUsers = data.reduce((sum, c) => sum + c.size, 0);\n\n const cellX = (col: number) => LABEL_W + SIZE_W + col * colW;\n\n return (\n \n \n\n
\n
\n

\n {label}\n

\n

\n \n {data.length} cohorts · {formatCount(totalUsers)} users\n \n

\n
\n

\n \n {period} 1 avg{' '}\n \n {averages[1] == null ? '—' : formatPct(averages[1])}\n \n \n

\n
\n\n \n
\n {!ready ? null : (\n setHovered(null)}\n >\n \n Cohort\n Users\n {Array.from({ length: periods }, (_, col) => (\n \n {col}\n \n ))}\n \n\n {data.map((cohort, row) => {\n const y = HEAD_H + row * ROW_H;\n const rowActive = hovered?.row === row;\n return (\n \n \n {cohort.label}\n \n \n {formatCount(cohort.size)}\n \n\n {cohort.retention.map((value, col) => {\n const intensity = value / 100;\n const active = hovered?.row === row && hovered?.col === col;\n const inCross = hovered != null && (hovered.row === row || hovered.col === col);\n return (\n setHovered({ row, col })}\n style={{\n animation: reduce\n ? undefined\n : `spectrum-mc-fade 300ms ease-out ${Math.min(col * 22 + row * 12, 520)}ms both`,\n }}\n >\n \n \n {colW >= 40 ? value.toFixed(0) : ''}\n \n \n );\n })}\n \n );\n })}\n\n \n \n \n Average\n \n {averages.map((value, col) =>\n value == null ? null : (\n \n {colW >= 40 ? value.toFixed(0) : ''}\n \n ),\n )}\n \n \n )}\n
\n \n\n `${period} ${i}`)]}\n rows={data.map((c) => [\n c.label,\n c.size,\n ...Array.from({ length: periods }, (_, i) =>\n c.retention[i] == null ? '—' : formatPct(c.retention[i]),\n ),\n ])}\n />\n \n {hovered && data[hovered.row]?.retention[hovered.col] != null\n ? `${data[hovered.row].label} · ${period} ${hovered.col} · ${formatPct(\n data[hovered.row].retention[hovered.col],\n )} of ${formatCount(data[hovered.row].size)} retained`\n : ' '}\n

\n
\n );\n}\n\nexport function DefaultCohortChart(props: CohortChartProps) {\n return ;\n}\n\nexport function WeeklyCohortChart(props: CohortChartProps) {\n return (\n \n );\n}\n", "type": "registry:component", "target": "components/spectrumui/charts/cohort-chart.tsx" }, { "path": "app/registry/charts/chart-states.tsx", "content": "'use client';\n\nimport * as React from 'react';\nimport { cn } from '@/lib/utils';\nimport {\n ChartEmpty,\n ChartError,\n ChartSkeleton,\n type ChartStatus,\n ChartState,\n type SkeletonVariant,\n seriesVarsClassName,\n} from './chart-engine';\nimport { CohortChart } from './cohort-chart';\n\nconst frame =\n 'rounded-xl border border-black/8 bg-white/60 p-4 dark:border-white/10 dark:bg-white/[0.02]';\n\nfunction Panel({\n title,\n hint,\n children,\n className,\n}: {\n title: string;\n hint?: string;\n children: React.ReactNode;\n className?: string;\n}) {\n return (\n
\n
\n

\n {title}\n

\n {hint ? (\n

{hint}

\n ) : null}\n
\n {children}\n
\n );\n}\n\nconst VARIANTS: { variant: SkeletonVariant; label: string; use: string }[] = [\n { variant: 'bars', label: 'bars', use: 'bar, candle, volume, histogram' },\n { variant: 'line', label: 'line', use: 'line, area, price, depth' },\n { variant: 'grid', label: 'grid', use: 'calendar, cohort, heatmap' },\n { variant: 'rows', label: 'rows', use: 'order book, cohort, tables' },\n { variant: 'arc', label: 'arc', use: 'radial, progress' },\n { variant: 'cards', label: 'cards', use: 'stat cards, KPI tiles' },\n];\n\nexport function ChartSkeletonGallery({ className }: { className?: string }) {\n return (\n
\n {VARIANTS.map(({ variant, label, use }) => (\n \n \n \n ))}\n
\n );\n}\n\nexport function ChartEmptyAndError({ className }: { className?: string }) {\n const [reloading, setReloading] = React.useState(false);\n\n React.useEffect(() => {\n if (!reloading) return;\n const id = window.setTimeout(() => setReloading(false), 1600);\n return () => window.clearTimeout(id);\n }, [reloading]);\n\n return (\n
\n \n \n \n \n {reloading ? (\n \n ) : (\n setReloading(true)}\n />\n )}\n \n
\n );\n}\n\nconst CYCLE: ChartStatus[] = ['loading', 'ready', 'empty', 'error'];\n\nexport function ChartStatusSwitcher({ className }: { className?: string }) {\n const [status, setStatus] = React.useState('loading');\n\n return (\n
\n \n {CYCLE.map((option) => {\n const active = option === status;\n return (\n setStatus(option)}\n className={cn(\n 'rounded-full px-3 py-1 font-mono text-[11px] leading-none transition-colors',\n 'focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-black/20 dark:focus-visible:ring-white/25',\n active\n ? 'bg-white text-neutral-950 shadow-sm dark:bg-white/12 dark:text-white'\n : 'text-neutral-500 hover:text-neutral-800 dark:text-neutral-400 dark:hover:text-neutral-200',\n )}\n >\n {option}\n \n );\n })}\n
\n\n setStatus('loading')} />\n \n );\n}\n\nexport function ChartStateUsage({ className }: { className?: string }) {\n const [status, setStatus] = React.useState('empty');\n\n return (\n
\n \n setStatus('ready')}\n className=\"rounded-full bg-neutral-900 px-3 py-1.5 text-[12px] font-medium text-white transition-opacity hover:opacity-90 dark:bg-white dark:text-neutral-950\"\n >\n Load sample data\n \n ),\n }}\n onRetry={() => setStatus('ready')}\n >\n
\n

\n your chart renders here\n

\n setStatus('empty')}\n className=\"font-mono text-[11px] text-neutral-400 underline underline-offset-2 hover:text-neutral-700 dark:hover:text-neutral-200\"\n >\n reset to empty\n \n
\n \n \n
\n );\n}\n\nexport function DefaultChartStates(props: { className?: string }) {\n return ;\n}\n", "type": "registry:component", "target": "components/spectrumui/charts/chart-states.tsx" } ], "type": "registry:component" }