{ "$schema": "https://ui.shadcn.com/schema/registry-item.json", "name": "depth-chart", "title": "Depth chart", "description": "Depth chart is a production-ready charts component from BJORK UI, packaged for shadcn registries.", "dependencies": [ "clsx", "framer-motion", "next-themes", "tailwind-merge" ], "files": [ { "path": "components/bjork-ui/charts/depth-chart.tsx", "content": "\"use client\";\n\nimport { useDeferredValue, useEffect, useMemo, useRef, type KeyboardEvent, type PointerEvent } from \"react\";\nimport { cn } from \"@/lib/utils\";\nimport type { BjorkTone } from \"@/components/bjork-ui/_core/palette\";\nimport { mulberry32 } from \"@/components/bjork-ui/_core/random\";\nimport { useChartCanvas, easeOut, writeLabels } from \"@/components/bjork-ui/charts/_kit/canvas\";\nimport {\n useChartTheme,\n chartFocusRing,\n ChartTable,\n LabelPool,\n HoverTooltip,\n chartTagEdge,\n ChartAnnouncer,\n type TooltipHandle,\n type AnnouncerHandle,\n type TooltipContent,\n} from \"@/components/bjork-ui/charts/_kit/chrome\";\nimport { clamp, crisp, damp, niceTicks, withAlpha, formatCompact, formatFixed, formatNumber, formatSigned } from \"@/components/bjork-ui/charts/_kit/scale\";\n\nexport interface BookLevel {\n price: number;\n size: number;\n}\n\nexport interface DepthChartProps {\n bids: BookLevel[];\n asks: BookLevel[];\n /** Half-width of the view around mid, as a fraction of mid. Auto by default. */\n range?: number;\n formatPrice?: (p: number) => string;\n formatSize?: (s: number) => string;\n /** Posed probe: side and level index from the touch. */\n probe?: { side: \"bid\" | \"ask\"; level: number } | null;\n height?: number;\n ariaLabel?: string;\n tone?: BjorkTone;\n attract?: boolean;\n className?: string;\n}\n\nconst TOP = 34;\nconst BOTTOM = 26;\nconst PAD_LEFT = 46;\nconst PAD_RIGHT = 8;\nconst SAMPLE_PX = 1;\nconst DEPTH_TAU = 0.1;\nconst RANGE_TAU = 0.4;\nconst CONTRACT_PX = 2;\nconst ENTER_MS = 800;\nconst X_LABELS = 10;\nconst Y_LABELS = 6;\nconst ATTRACT_STEP_MS = 900;\nconst ATTRACT_IDLE_MS = 4000;\n\nconst clock = () => performance.now();\n// Fixed decimals so 101.30 and 101.28 line up in the tooltip and table.\nconst defaultFormatPrice = (p: number) => formatFixed(p, 2);\nconst defaultFormatSize = (s: number) => formatCompact(s, 1);\n\ninterface Book {\n bids: BookLevel[]; // best first (desc)\n asks: BookLevel[]; // best first (asc)\n cumB: number[];\n cumA: number[];\n mid: number;\n spread: number;\n}\n\nfunction prepareBook(bids: BookLevel[], asks: BookLevel[]): Book {\n const b = bids.filter((l) => l.size > 0).sort((x, y) => y.price - x.price);\n const a = asks.filter((l) => l.size > 0).sort((x, y) => x.price - y.price);\n const cumB: number[] = [];\n const cumA: number[] = [];\n b.reduce((s, l, i) => (cumB[i] = s + l.size), 0);\n a.reduce((s, l, i) => (cumA[i] = s + l.size), 0);\n const bb = b[0]?.price ?? 0;\n const ba = a[0]?.price ?? bb;\n return { bids: b, asks: a, cumB, cumA, mid: (bb + ba) / 2, spread: ba - bb };\n}\n\n// Walking the book to a level: total size, volume-weighted fill and impact from mid.\nfunction walk(book: Book, side: \"bid\" | \"ask\", level: number) {\n const levels = side === \"bid\" ? book.bids : book.asks;\n let size = 0;\n let notional = 0;\n for (let i = 0; i <= level && i < levels.length; i++) {\n size += levels[i].size;\n notional += levels[i].size * levels[i].price;\n }\n const vwap = size ? notional / size : book.mid;\n const last = levels[Math.min(level, levels.length - 1)]?.price ?? book.mid;\n return { size, vwap, price: last, impactBp: ((vwap - book.mid) / book.mid) * 1e4, slipBp: ((last - book.mid) / book.mid) * 1e4 };\n}\n\n// Cumulative depth rises away from mid, so the empty space next to a probe is on the mid side:\n// above-left of an ask point, above-right of a bid point. Fall back to the other side at the edge.\n// `top` is the header (legend and spread pill): if above would reach it, the card drops below the probe.\nfunction placeProbeTooltip(side: \"bid\" | \"ask\", x: number, y: number, tw: number, th: number, w: number, h: number, top: number, gap = 12) {\n let tx = side === \"ask\" ? x - gap - tw : x + gap;\n if (tx < 0) tx = x + gap;\n if (tx + tw > w) tx = x - gap - tw;\n tx = clamp(tx, 0, Math.max(0, w - tw));\n let ty = y - th - gap;\n if (ty < top) ty = y + gap;\n ty = clamp(ty, top, Math.max(top, h - th));\n return { x: Math.round(tx), y: Math.round(ty) };\n}\n\ninterface Run {\n tmpB: Float32Array;\n tmpA: Float32Array;\n bidDisp: Float32Array;\n askDisp: Float32Array;\n ready: boolean;\n yMax: number;\n enter: number;\n probe: { side: \"bid\" | \"ask\"; level: number } | null;\n source: \"pointer\" | \"keyboard\" | \"prop\" | \"attract\" | null;\n plot: { l: number; r: number; t: number; b: number };\n view: { lo: number; hi: number };\n xCache: string[];\n yCache: string[];\n lastInput: number;\n attractAt: number;\n}\n\nexport function DepthChart({\n bids,\n asks,\n range,\n formatPrice = defaultFormatPrice,\n formatSize = defaultFormatSize,\n probe,\n height = 320,\n ariaLabel = \"Order book depth\",\n tone: toneProp,\n attract = false,\n className,\n}: DepthChartProps) {\n const { pal, reduce, vars } = useChartTheme(toneProp);\n const announcer = useRef(null);\n const tipRef = useRef(null);\n const wrapperRef = useRef(null);\n const midRef = useRef(null);\n const legendRef = useRef(null);\n const xPool = useRef<(HTMLSpanElement | null)[]>([]);\n const yPool = useRef<(HTMLSpanElement | null)[]>([]);\n const rectRef = useRef(null);\n\n const book = useMemo(() => prepareBook(bids, asks), [bids, asks]);\n\n const cfg = useRef({ book, range, reduce, pal, formatPrice, formatSize, attract });\n useEffect(() => {\n cfg.current = { book, range, reduce, pal, formatPrice, formatSize, attract };\n });\n\n const st = useRef({\n tmpB: new Float32Array(0),\n tmpA: new Float32Array(0),\n bidDisp: new Float32Array(0),\n askDisp: new Float32Array(0),\n ready: false,\n yMax: 0,\n enter: 0,\n probe: probe ?? null,\n source: probe ? \"prop\" : null,\n plot: { l: 0, r: 0, t: 0, b: 0 },\n view: { lo: 0, hi: 1 },\n xCache: [],\n yCache: [],\n lastInput: 0,\n attractAt: 0,\n });\n const probeRef = useRef<(pr: Run[\"probe\"], source: Run[\"source\"]) => void>(() => {});\n\n const { rootRef, hostRef, canvasRef, wake } = useChartCanvas(({ ctx, w, h, dt }) => {\n const s = st.current;\n const c = cfg.current;\n const p = c.pal;\n const B = c.book;\n if (!B.bids.length || !B.asks.length) return false;\n const plot = { l: PAD_LEFT, r: w - PAD_RIGHT, t: TOP, b: h - BOTTOM };\n s.plot = plot;\n const pW = plot.r - plot.l;\n const half = c.range ?? Math.max(B.mid - B.bids[B.bids.length - 1].price, B.asks[B.asks.length - 1].price - B.mid) / B.mid;\n const lo = B.mid * (1 - half);\n const hi = B.mid * (1 + half);\n s.view = { lo, hi };\n const xOf = (price: number) => plot.l + ((price - lo) / (hi - lo)) * pW;\n\n // Depth sampled per pixel column, each column easing to the new book, so updates glide.\n const cols = Math.max(2, Math.floor(pW / SAMPLE_PX));\n if (s.bidDisp.length !== cols) {\n s.bidDisp = new Float32Array(cols);\n s.askDisp = new Float32Array(cols);\n s.ready = false;\n }\n let moving = false;\n let maxTarget = 0;\n const midX = xOf(B.mid);\n // One merge pass per side: columns walk outward from mid as the book does. O(columns + levels).\n const tB = s.tmpB.length === cols ? s.tmpB : (s.tmpB = new Float32Array(cols));\n const tA = s.tmpA.length === cols ? s.tmpA : (s.tmpA = new Float32Array(cols));\n tB.fill(0);\n tA.fill(0);\n const colPrice = (k: number) => lo + (k / (cols - 1)) * (hi - lo);\n let bi = -1;\n for (let k = cols - 1; k >= 0; k--) {\n const price = colPrice(k);\n if (price > B.mid) continue;\n while (bi + 1 < B.bids.length && B.bids[bi + 1].price >= price) bi++;\n tB[k] = bi >= 0 ? B.cumB[bi] : 0;\n }\n let ai = -1;\n for (let k = 0; k < cols; k++) {\n const price = colPrice(k);\n if (price <= B.mid) continue;\n while (ai + 1 < B.asks.length && B.asks[ai + 1].price <= price) ai++;\n tA[k] = ai >= 0 ? B.cumA[ai] : 0;\n }\n for (let k = 0; k < cols; k++) maxTarget = Math.max(maxTarget, tB[k], tA[k]);\n for (let k = 0; k < cols; k++) {\n if (!s.ready || c.reduce) {\n s.bidDisp[k] = tB[k];\n s.askDisp[k] = tA[k];\n } else {\n s.bidDisp[k] = damp(s.bidDisp[k], tB[k], DEPTH_TAU, dt);\n s.askDisp[k] = damp(s.askDisp[k], tA[k], DEPTH_TAU, dt);\n if (Math.abs(s.bidDisp[k] - tB[k]) + Math.abs(s.askDisp[k] - tA[k]) > maxTarget * 1e-4 + 1e-6) moving = true;\n }\n }\n // Y range: expands at once, contracts slowly and never clips (the live-line rule).\n const target = maxTarget * 1.1;\n if (!s.ready || c.reduce || target > s.yMax) s.yMax = target;\n else if (target < s.yMax) {\n const pxPer = (plot.b - plot.t) / s.yMax;\n const cap = CONTRACT_PX / pxPer;\n s.yMax -= Math.min(cap, (s.yMax - target) * (1 - Math.exp(-dt / RANGE_TAU)));\n if (s.yMax - target > target * 1e-4) moving = true;\n }\n s.ready = true;\n const yOf = (d: number) => plot.b - (d / Math.max(1e-9, s.yMax)) * (plot.b - plot.t);\n\n s.enter = c.reduce ? 1 : Math.min(1, s.enter + (dt * 1000) / ENTER_MS);\n const e = easeOut(s.enter);\n\n // Grid.\n const yt = niceTicks(0, s.yMax, 4);\n ctx.strokeStyle = p.hair;\n ctx.lineWidth = 1;\n ctx.beginPath();\n for (const v of yt) {\n if (v <= 0) continue;\n ctx.moveTo(plot.l, crisp(yOf(v)));\n ctx.lineTo(plot.r, crisp(yOf(v)));\n }\n ctx.stroke();\n writeLabels(yPool.current, s.yCache, yt.map((v) => ({ text: c.formatSize(v), x: plot.l - 8, y: yOf(v), ax: -100 })));\n const xt = niceTicks(lo, hi, Math.max(3, Math.floor(pW / 90)));\n writeLabels(xPool.current, s.xCache, xt.map((v) => ({ text: c.formatPrice(v), x: xOf(v), y: plot.b + 13, ax: -50 })));\n\n // Areas grow outward from mid during the entrance.\n const reachL = midX - (midX - plot.l) * e;\n const reachR = midX + (plot.r - midX) * e;\n const side = (disp: Float32Array, fill: string, line: string, fromMid: boolean) => {\n ctx.save();\n ctx.beginPath();\n ctx.rect(fromMid ? reachL : midX, 0, fromMid ? midX - reachL : reachR - midX, h);\n ctx.clip();\n ctx.beginPath();\n let started = false;\n for (let k = 0; k < cols; k++) {\n const x = plot.l + (k / (cols - 1)) * pW;\n const d = disp[k];\n if (d <= 0) continue;\n if (!started) {\n ctx.moveTo(x, plot.b);\n started = true;\n }\n ctx.lineTo(x, yOf(d));\n }\n if (!started) {\n ctx.restore();\n return;\n }\n ctx.save();\n ctx.lineTo(fromMid ? midX : plot.r, plot.b);\n ctx.closePath();\n ctx.fillStyle = fill;\n ctx.fill();\n ctx.restore();\n ctx.beginPath();\n started = false;\n for (let k = 0; k < cols; k++) {\n const x = plot.l + (k / (cols - 1)) * pW;\n const d = disp[k];\n if (d <= 0) continue;\n if (!started) {\n ctx.moveTo(x, yOf(d));\n started = true;\n } else ctx.lineTo(x, yOf(d));\n }\n ctx.lineWidth = 1.5;\n ctx.lineJoin = \"round\";\n ctx.strokeStyle = line;\n ctx.stroke();\n ctx.restore();\n };\n side(s.bidDisp, withAlpha(p.text, 0.1), withAlpha(p.text, 0.78), true);\n side(s.askDisp, withAlpha(p.accent, 0.14), p.accent, false);\n\n // Mid line and the spread pill.\n ctx.save();\n ctx.setLineDash([3, 3]);\n ctx.strokeStyle = p.textSoft;\n ctx.beginPath();\n ctx.moveTo(crisp(midX), plot.t - 4);\n ctx.lineTo(crisp(midX), plot.b);\n ctx.stroke();\n ctx.restore();\n const mid = midRef.current;\n if (mid) {\n const mw = Number(mid.dataset.w) || mid.offsetWidth;\n // Centred on mid, but never over the legend.\n const legendR = (legendRef.current?.offsetWidth ?? 0) + 12;\n mid.style.transform = `translate3d(${clamp(midX - mw / 2, Math.max(plot.l, legendR), plot.r - mw).toFixed(1)}px, ${(plot.t - 30).toFixed(1)}px, 0)`;\n }\n\n // Probe: the cost of walking the book to a level.\n const tip = tipRef.current;\n if (s.probe) {\n const levels = s.probe.side === \"bid\" ? B.bids : B.asks;\n const lvl = clamp(s.probe.level, 0, levels.length - 1);\n const r = walk(B, s.probe.side, lvl);\n const x = xOf(r.price);\n const y = yOf(r.size);\n ctx.strokeStyle = p.textSoft;\n ctx.lineWidth = 1;\n ctx.beginPath();\n ctx.moveTo(crisp(x), plot.t);\n ctx.lineTo(crisp(x), plot.b);\n ctx.moveTo(x, crisp(y));\n ctx.lineTo(midX, crisp(y));\n ctx.stroke();\n // The average fill sits between mid and the last level touched.\n const vx = xOf(r.vwap);\n ctx.fillStyle = s.probe.side === \"ask\" ? p.accentInk : p.text;\n ctx.beginPath();\n ctx.moveTo(vx, plot.b - 1);\n ctx.lineTo(vx - 4, plot.b + 5);\n ctx.lineTo(vx + 4, plot.b + 5);\n ctx.closePath();\n ctx.fill();\n ctx.beginPath();\n ctx.arc(x, y, 4, 0, Math.PI * 2);\n ctx.fillStyle = s.probe.side === \"ask\" ? p.accent : p.text;\n ctx.fill();\n ctx.lineWidth = 2;\n ctx.strokeStyle = p.stage;\n ctx.stroke();\n if (tip?.el) {\n const pos = placeProbeTooltip(s.probe.side, x, y, tip.size.w, tip.size.h, w, h, plot.t);\n tip.el.style.transform = `translate3d(${pos.x}px, ${pos.y}px, 0)`;\n }\n }\n\n if (c.attract && !c.reduce && (!s.lastInput || clock() - s.lastInput > ATTRACT_IDLE_MS)) {\n if (clock() - s.attractAt > ATTRACT_STEP_MS) {\n s.attractAt = clock();\n const sideNow = s.probe?.side ?? \"ask\";\n const levels = sideNow === \"bid\" ? B.bids : B.asks;\n const next = (s.probe?.level ?? -1) + 1;\n probeRef.current(next >= Math.min(levels.length, 12) ? { side: sideNow === \"bid\" ? \"ask\" : \"bid\", level: 0 } : { side: sideNow, level: next }, \"attract\");\n }\n return true;\n }\n return moving || s.enter < 1;\n });\n\n const tooltipFor = (pr: NonNullable): TooltipContent | null => {\n const levels = pr.side === \"bid\" ? book.bids : book.asks;\n if (!levels.length) return null;\n const lvl = clamp(pr.level, 0, levels.length - 1);\n const r = walk(book, pr.side, lvl);\n return {\n key: `${pr.side}${lvl}|${r.size}|${r.vwap}|${pal.text}`,\n title: `${pr.side === \"bid\" ? \"Sell into bids\" : \"Buy through asks\"} · ${lvl + 1} level${lvl ? \"s\" : \"\"}`,\n rows: [\n { key: \"s\", label: \"Size\", value: formatSize(r.size), color: pr.side === \"ask\" ? pal.accent : pal.text },\n { key: \"v\", label: \"Avg fill\", value: formatPrice(r.vwap) },\n { key: \"i\", label: \"Impact\", value: `${formatSigned(r.impactBp, (n) => formatNumber(n, 1))} bp`, strong: false },\n { key: \"l\", label: \"Last level\", value: formatPrice(r.price), strong: false },\n ],\n };\n };\n\n const setProbe = (pr: Run[\"probe\"], source: Run[\"source\"]) => {\n const s = st.current;\n const same = (!pr && !s.probe) || (pr && s.probe && pr.side === s.probe.side && pr.level === s.probe.level);\n s.probe = pr;\n s.source = pr ? source : null;\n tipRef.current?.set(pr ? tooltipFor(pr) : null);\n if (!same && pr && source === \"keyboard\") {\n const r = walk(book, pr.side, pr.level);\n announcer.current?.say(`${pr.side === \"bid\" ? \"Selling\" : \"Buying\"} ${formatSize(r.size)} fills at ${formatPrice(r.vwap)} on average, ${formatNumber(Math.abs(r.impactBp), 1)} basis points from mid`);\n }\n wake();\n };\n useEffect(() => {\n probeRef.current = setProbe;\n });\n\n // Live books: keep the probe's tooltip current as levels change.\n useEffect(() => {\n const s = st.current;\n if (s.probe) tipRef.current?.set(tooltipFor(s.probe));\n wake();\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, [book, range, pal, reduce, attract, wake]);\n\n useEffect(() => {\n if (probe === undefined) return;\n setProbe(probe, probe ? \"prop\" : null);\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, [probe?.side, probe?.level]);\n\n useEffect(() => {\n if (midRef.current) midRef.current.dataset.w = String(midRef.current.offsetWidth);\n });\n\n const onPointerMove = (e: PointerEvent) => {\n st.current.lastInput = clock();\n const rect = rectRef.current ?? wrapperRef.current?.getBoundingClientRect();\n if (!rect) return;\n const s = st.current;\n const x = e.clientX - rect.left;\n if (x < s.plot.l || x > s.plot.r) {\n setProbe(null, null);\n return;\n }\n const price = s.view.lo + ((x - s.plot.l) / (s.plot.r - s.plot.l)) * (s.view.hi - s.view.lo);\n const sideNow: \"bid\" | \"ask\" = price <= book.mid ? \"bid\" : \"ask\";\n const levels = sideNow === \"bid\" ? book.bids : book.asks;\n // The deepest level the pointer has reached on that side.\n let lvl = 0;\n for (let i = 0; i < levels.length; i++) {\n if (sideNow === \"bid\" ? levels[i].price >= price : levels[i].price <= price) lvl = i;\n else break;\n }\n setProbe({ side: sideNow, level: lvl }, \"pointer\");\n };\n\n const onKeyDown = (e: KeyboardEvent) => {\n const s = st.current;\n s.lastInput = clock();\n const cur = s.probe && s.source !== \"attract\" ? s.probe : null;\n if (e.key === \"ArrowLeft\" || e.key === \"ArrowRight\") {\n e.preventDefault();\n // Left walks away from mid on the bid side, right on the ask side.\n const dir = e.key === \"ArrowLeft\" ? \"bid\" : \"ask\";\n if (!cur) {\n setProbe({ side: dir, level: 0 }, \"keyboard\");\n return;\n }\n if (cur.side === dir) setProbe({ side: dir, level: Math.min(cur.level + (e.shiftKey ? 5 : 1), (dir === \"bid\" ? book.bids : book.asks).length - 1) }, \"keyboard\");\n else if (cur.level > 0) setProbe({ side: cur.side, level: Math.max(0, cur.level - (e.shiftKey ? 5 : 1)) }, \"keyboard\");\n else setProbe({ side: dir, level: 0 }, \"keyboard\");\n } else if (e.key === \"Home\" || e.key === \"End\") {\n e.preventDefault();\n // Home: the touch on the current side. End: the deepest level on it.\n const sideNow = cur?.side ?? \"ask\";\n const levels = sideNow === \"bid\" ? book.bids : book.asks;\n setProbe({ side: sideNow, level: e.key === \"Home\" ? 0 : Math.max(0, levels.length - 1) }, \"keyboard\");\n } else if (e.key === \"Escape\") setProbe(null, null);\n };\n\n // A live book changes often; the table twin follows at low priority so it never blocks a frame.\n const tableBook = useDeferredValue(book);\n const tableRows = useMemo(\n () => [\n ...tableBook.bids.map((l, i) => [\"Bid\", formatPrice(l.price), formatSize(l.size), formatSize(tableBook.cumB[i])]),\n ...tableBook.asks.map((l, i) => [\"Ask\", formatPrice(l.price), formatSize(l.size), formatSize(tableBook.cumA[i])]),\n ],\n [tableBook, formatPrice, formatSize],\n );\n const tableCols = useMemo(() => [\"Side\", \"Price\", \"Size\", \"Cumulative\"], []);\n const spreadBp = book.mid ? (book.spread / book.mid) * 1e4 : 0;\n\n return (\n
\n {\n if (wrapperRef.current) rectRef.current = wrapperRef.current.getBoundingClientRect();\n }}\n onPointerMove={onPointerMove}\n onPointerDown={(e) => {\n if (wrapperRef.current) rectRef.current = wrapperRef.current.getBoundingClientRect();\n if (e.pointerType === \"touch\") onPointerMove(e);\n }}\n onPointerLeave={(e) => {\n // A touch tap fires leave right after up; keep the probe until the next tap.\n if (e.pointerType !== \"touch\") setProbe(null, null);\n }}\n onKeyDown={onKeyDown}\n className={cn(\"absolute inset-0 cursor-crosshair touch-pan-y rounded-[10px]\", chartFocusRing)}\n >\n
\n \n
\n {/* Legend keys: line for each side. */}\n
\n \n \n Bids\n \n \n \n Asks\n \n
\n \n {formatPrice(book.mid)}\n \n spread {formatPrice(book.spread)} · {formatNumber(spreadBp, 1)} bp\n \n
\n \n \n \n \n \n \n \n );\n}\n\n// A seeded, slowly evolving order book for demos. next() returns the following snapshot.\nexport function createOrderBook(seed: number, opts?: { mid?: number; tick?: number; levels?: number }) {\n const rnd = mulberry32(seed);\n const tick = opts?.tick ?? 0.05;\n const levels = opts?.levels ?? 40;\n let mid = opts?.mid ?? 101.2;\n const sizeAt = (k: number) => Math.round((40 + rnd() * 160) * (1 + k * 0.08) * (rnd() < 0.07 ? 4 : 1));\n let bidSizes = Array.from({ length: levels }, (_, k) => sizeAt(k));\n let askSizes = Array.from({ length: levels }, (_, k) => sizeAt(k));\n const snapshot = () => {\n const bestBid = Math.floor(mid / tick) * tick;\n const bestAsk = bestBid + tick;\n return {\n bids: bidSizes.map((size, k) => ({ price: +(bestBid - k * tick).toFixed(4), size })),\n asks: askSizes.map((size, k) => ({ price: +(bestAsk + k * tick).toFixed(4), size })),\n };\n };\n return {\n snapshot,\n next() {\n mid += (rnd() - 0.5) * tick * 1.2;\n const jitter = (arr: number[]) => arr.map((sz, k) => Math.max(5, Math.round(sz * (0.86 + rnd() * 0.28) + (rnd() < 0.03 ? sizeAt(k) : 0))));\n bidSizes = jitter(bidSizes);\n askSizes = jitter(askSizes);\n return snapshot();\n },\n };\n}\n", "type": "registry:component", "target": "@components/bjork-ui/charts/depth-chart.tsx" }, { "path": "lib/utils.ts", "content": "import { clsx, type ClassValue } from \"clsx\"\nimport { twMerge } from \"tailwind-merge\"\n\nexport function cn(...inputs: ClassValue[]) {\n return twMerge(clsx(inputs))\n}\n", "type": "registry:lib", "target": "@lib/utils.ts" }, { "path": "components/bjork-ui/_core/palette.ts", "content": "export type BjorkTone = \"dark\" | \"light\";\n\n// Canvas, WebGL and SVG attribute colours. DOM code uses the CSS tokens with these as fallbacks.\nexport const BJORK_PALETTE = {\n dark: {\n bg: \"#050505\", stage: \"#111111\", surface: \"#121212\", raised: \"#161616\", active: \"#202020\",\n border: \"#232323\", borderStrong: \"#343434\",\n text: \"#ededed\", textMedium: \"rgba(237,237,237,0.72)\", textMuted: \"rgba(237,237,237,0.6)\",\n textSoft: \"rgba(237,237,237,0.5)\", textFaint: \"rgba(237,237,237,0.22)\", hair: \"rgba(237,237,237,0.12)\",\n accent: \"#ec5c13\", accentInk: \"#ec5c13\", accentFill: \"#b84a12\", accentSoft: \"rgba(236,92,19,0.12)\", accentMuted: \"rgba(236,92,19,0.24)\",\n accentFg: \"#fff2ea\", success: \"#4cc38a\", warning: \"#f2b544\", error: \"#ff5c4d\",\n },\n light: {\n bg: \"#f7f5ef\", stage: \"#f7f5ef\", surface: \"#fffcf6\", raised: \"#f5efe3\", active: \"#efe7d8\",\n border: \"#eee6db\", borderStrong: \"#e1d7c8\",\n text: \"#171717\", textMedium: \"rgba(23,23,23,0.78)\", textMuted: \"rgba(23,23,23,0.68)\",\n textSoft: \"rgba(23,23,23,0.62)\", textFaint: \"rgba(23,23,23,0.22)\", hair: \"rgba(23,23,23,0.10)\",\n accent: \"#ec7d43\", accentInk: \"#b4531f\", accentFill: \"#ec7d43\", accentSoft: \"rgba(236,125,67,0.10)\", accentMuted: \"rgba(236,125,67,0.20)\",\n accentFg: \"#3f2112\", success: \"#1f8a55\", warning: \"#a86b00\", error: \"#c8361f\",\n },\n} as const;\n", "type": "registry:component", "target": "@components/bjork-ui/_core/palette.ts" }, { "path": "components/bjork-ui/_core/random.ts", "content": "// Seeded randomness and noise. Deterministic for a given seed, so previews and tests repeat.\n\n// Small fast PRNG. Returns floats in [0, 1).\nexport function mulberry32(seed: number): () => number {\n let a = seed >>> 0;\n return () => {\n a = (a + 0x6d2b79f5) >>> 0;\n let t = a;\n t = Math.imul(t ^ (t >>> 15), t | 1);\n t ^= t + Math.imul(t ^ (t >>> 7), t | 61);\n return ((t ^ (t >>> 14)) >>> 0) / 4294967296;\n };\n}\n\n// FNV-1a 32-bit.\nexport function hashString(s: string): number {\n let h = 0x811c9dc5;\n for (let i = 0; i < s.length; i++) {\n h ^= s.charCodeAt(i);\n h = Math.imul(h, 0x01000193);\n }\n return h >>> 0;\n}\n\n// Integer lattice hash to [-1, 1].\nfunction latticeHash(seed: number, x: number, y = 0): number {\n let h = Math.imul(x | 0, 374761393) ^ Math.imul(y | 0, 668265263) ^ Math.imul(seed | 0, 2246822519);\n h = Math.imul(h ^ (h >>> 13), 1274126177);\n h ^= h >>> 16;\n return ((h >>> 0) / 4294967295) * 2 - 1;\n}\n\nfunction smooth(t: number): number {\n return t * t * (3 - 2 * t);\n}\n\nexport function valueNoise1D(seed: number): (x: number) => number {\n return (x: number) => {\n const i = Math.floor(x);\n const f = x - i;\n const a = latticeHash(seed, i);\n const b = latticeHash(seed, i + 1);\n return a + (b - a) * smooth(f);\n };\n}\n\nexport function fbm1D(seed: number, octaves = 3): (x: number) => number {\n const layers = Array.from({ length: octaves }, (_, o) => valueNoise1D(seed + o * 101));\n let norm = 0;\n for (let o = 0; o < octaves; o++) norm += 0.5 ** o;\n return (x: number) => {\n let sum = 0;\n let amp = 1;\n let freq = 1;\n for (let o = 0; o < octaves; o++) {\n sum += amp * layers[o](x * freq);\n amp *= 0.5;\n freq *= 2;\n }\n return sum / norm;\n };\n}\n\nexport function valueNoise2D(seed: number): (x: number, y: number) => number {\n return (x: number, y: number) => {\n const xi = Math.floor(x);\n const yi = Math.floor(y);\n const fx = smooth(x - xi);\n const fy = smooth(y - yi);\n const a = latticeHash(seed, xi, yi);\n const b = latticeHash(seed, xi + 1, yi);\n const c = latticeHash(seed, xi, yi + 1);\n const d = latticeHash(seed, xi + 1, yi + 1);\n const top = a + (b - a) * fx;\n const bottom = c + (d - c) * fx;\n return top + (bottom - top) * fy;\n };\n}\n", "type": "registry:component", "target": "@components/bjork-ui/_core/random.ts" }, { "path": "components/bjork-ui/charts/_kit/canvas.ts", "content": "\"use client\";\n\n// Canvas plumbing shared by the Charts collection. One hook gives a chart a measured host, a\n// DPR-capped canvas that follows it, and a draw loop that pauses offscreen and idles when settled.\n\nimport { useCallback, useEffect, useRef, type RefObject } from \"react\";\nimport { useVisibleLoop } from \"@/components/bjork-ui/_core/loop\";\nimport { sizeCanvas, useElementSize } from \"@/components/bjork-ui/_core/canvas\";\nimport { cubicBezier, ease } from \"@/components/bjork-ui/_core/motion\";\n\nexport interface ChartFrame {\n ctx: CanvasRenderingContext2D;\n w: number;\n h: number;\n dt: number;\n t: number;\n}\n\n/**\n * `draw` runs inside `useVisibleLoop`. Return true to keep animating, false to go idle until `wake()`.\n * The loop root is `rootRef` (gets `data-loop`). The canvas is sized to `hostRef`.\n */\nexport function useChartCanvas(draw: (f: ChartFrame) => boolean) {\n const rootRef = useRef(null);\n const hostRef = useRef(null);\n const canvasRef = useRef(null);\n const size = useElementSize(hostRef);\n const sizeRef = useRef({ w: 0, h: 0, dpr: 1 });\n const drawRef = useRef(draw);\n useEffect(() => {\n drawRef.current = draw;\n });\n\n const frame = useCallback((dt: number, t: number) => {\n const canvas = canvasRef.current;\n const { w, h, dpr } = sizeRef.current;\n if (!canvas || !w || !h) return true;\n const ctx = canvas.getContext(\"2d\");\n if (!ctx) return false;\n ctx.setTransform(dpr, 0, 0, dpr, 0, 0);\n ctx.clearRect(0, 0, w, h);\n return drawRef.current({ ctx, w, h, dt, t });\n }, []);\n\n const { wake } = useVisibleLoop(rootRef as RefObject, frame);\n\n useEffect(() => {\n const canvas = canvasRef.current;\n if (!canvas || !size.width || !size.height) return;\n sizeRef.current = { w: size.width, h: size.height, dpr: sizeCanvas(canvas, size.width, size.height) };\n wake();\n }, [size.width, size.height, wake]);\n\n return { rootRef, hostRef, canvasRef, size, wake };\n}\n\n// The house ease-out for entrances, usable in rAF code.\nexport const easeOut = cubicBezier(...(ease.out as unknown as [number, number, number, number]));\nexport const easeInOut = cubicBezier(...(ease.inOut as unknown as [number, number, number, number]));\n\n// A 45 degree hatch pattern in `color`, for counterfactual and loss regions.\nconst hatchCache = new Map();\nexport function hatchPattern(ctx: CanvasRenderingContext2D, color: string, gap = 5, width = 1): CanvasPattern | null {\n const key = `${color}|${gap}|${width}`;\n if (hatchCache.has(key)) return hatchCache.get(key)!;\n if (typeof document === \"undefined\") return null;\n const tile = document.createElement(\"canvas\");\n const s = gap * 2;\n tile.width = s * 2;\n tile.height = s * 2;\n const c = tile.getContext(\"2d\");\n if (!c) return null;\n c.scale(2, 2);\n c.strokeStyle = color;\n c.lineWidth = width;\n c.beginPath();\n for (let k = -s; k <= s * 2; k += gap) {\n c.moveTo(k, s);\n c.lineTo(k + s, 0);\n }\n c.stroke();\n const pattern = ctx.createPattern(tile, \"repeat\");\n pattern?.setTransform(new DOMMatrix().scale(0.5, 0.5));\n hatchCache.set(key, pattern);\n return pattern;\n}\n\n// Rounded rect path with independent top and bottom radii (bars: round data end, square baseline).\nexport function roundRectPath(\n ctx: CanvasRenderingContext2D,\n x: number,\n y: number,\n w: number,\n h: number,\n rTop: number,\n rBottom = 0,\n) {\n if (w <= 0 || h <= 0) return;\n const rt = Math.min(rTop, w / 2, h / 2);\n const rb = Math.min(rBottom, w / 2, h / 2);\n ctx.moveTo(x + rt, y);\n ctx.lineTo(x + w - rt, y);\n if (rt) ctx.arcTo(x + w, y, x + w, y + rt, rt);\n ctx.lineTo(x + w, y + h - rb);\n if (rb) ctx.arcTo(x + w, y + h, x + w - rb, y + h, rb);\n ctx.lineTo(x + rb, y + h);\n if (rb) ctx.arcTo(x, y + h, x, y + h - rb, rb);\n ctx.lineTo(x, y + rt);\n if (rt) ctx.arcTo(x, y, x + rt, y, rt);\n ctx.closePath();\n}\n\nexport interface PlacedLabel {\n text: string;\n x: number;\n y: number;\n /** translate percentages applied after the position, e.g. -50 to centre. */\n ax?: number;\n ay?: number;\n opacity?: number;\n}\n\n// Writes a pool of absolutely positioned label spans from the loop: text only when it changes,\n// position by transform only. Unused spans hide.\nexport function writeLabels(els: (HTMLElement | null)[], cache: string[], items: PlacedLabel[]) {\n for (let i = 0; i < els.length; i++) {\n const el = els[i];\n if (!el) continue;\n const it = items[i];\n if (!it) {\n if (el.style.opacity !== \"0\") el.style.opacity = \"0\";\n continue;\n }\n if (cache[i] !== it.text) {\n cache[i] = it.text;\n el.textContent = it.text;\n }\n el.style.opacity = String(it.opacity ?? 1);\n el.style.transform = `translate3d(${it.x.toFixed(2)}px, ${it.y.toFixed(2)}px, 0) translate(${it.ax ?? 0}%, ${it.ay ?? -50}%)`;\n }\n}\n", "type": "registry:component", "target": "@components/bjork-ui/charts/_kit/canvas.ts" }, { "path": "components/bjork-ui/_core/loop.ts", "content": "\"use client\";\n\nimport { useCallback, useEffect, useMemo, useRef, type RefObject } from \"react\";\n\nexport interface VisibleLoopOptions {\n enabled?: boolean;\n fpsCap?: number;\n rootMargin?: string;\n}\n\n/**\n * Runs `frame(dt, t)` on requestAnimationFrame while the element is near the viewport,\n * the tab is visible and `enabled` is not false. Return `false` from `frame` to go idle\n * until `wake()` is called. Writes `data-loop` on the element: running, idle or paused.\n */\nexport function useVisibleLoop(\n ref: RefObject,\n frame: (dt: number, t: number) => boolean | void,\n opts?: VisibleLoopOptions,\n): { wake: () => void } {\n const enabled = opts?.enabled !== false;\n const fpsCap = opts?.fpsCap ?? 0;\n const rootMargin = opts?.rootMargin ?? \"96px\";\n\n const frameRef = useRef(frame);\n useEffect(() => {\n frameRef.current = frame;\n }, [frame]);\n\n const wakeRef = useRef<() => void>(() => {});\n const wake = useCallback(() => wakeRef.current(), []);\n\n useEffect(() => {\n const el = ref.current;\n if (!el || typeof window === \"undefined\") return;\n\n let wants = true; // false once the frame callback returns false\n let inView = false;\n let raf = 0;\n let last = 0;\n let t = 0;\n const minFrame = fpsCap > 0 ? 1000 / fpsCap : 0;\n\n const canRun = () => enabled && inView && document.visibilityState === \"visible\";\n const stop = () => {\n if (raf) cancelAnimationFrame(raf);\n raf = 0;\n };\n\n const update = () => {\n if (!enabled) {\n stop();\n el.dataset.loop = \"paused\";\n return;\n }\n if (!wants) {\n stop();\n el.dataset.loop = \"idle\";\n return;\n }\n if (!canRun()) {\n stop();\n el.dataset.loop = \"paused\";\n return;\n }\n el.dataset.loop = \"running\";\n if (!raf) {\n last = performance.now();\n raf = requestAnimationFrame(tick);\n }\n };\n\n const tick = (now: number) => {\n raf = 0;\n if (!canRun() || !wants) {\n update();\n return;\n }\n const elapsed = now - last;\n if (minFrame && elapsed < minFrame - 0.5) {\n raf = requestAnimationFrame(tick);\n return;\n }\n last = now;\n const dt = Math.min(0.05, Math.max(0, elapsed / 1000));\n t += dt;\n const keep = frameRef.current(dt, t);\n if (keep === false) {\n wants = false;\n update();\n return;\n }\n raf = requestAnimationFrame(tick);\n };\n\n const observer = new IntersectionObserver(\n ([entry]) => {\n inView = entry.isIntersecting;\n update();\n },\n { rootMargin },\n );\n observer.observe(el);\n\n const onVisibility = () => update();\n document.addEventListener(\"visibilitychange\", onVisibility);\n\n wakeRef.current = () => {\n wants = true;\n update();\n };\n\n update();\n\n return () => {\n stop();\n observer.disconnect();\n document.removeEventListener(\"visibilitychange\", onVisibility);\n wakeRef.current = () => {};\n };\n }, [ref, enabled, fpsCap, rootMargin]);\n\n return useMemo(() => ({ wake }), [wake]);\n}\n\n// matchMedia based check. False on the server.\nexport function isCoarsePointer(): boolean {\n if (typeof window === \"undefined\" || typeof window.matchMedia !== \"function\") return false;\n return window.matchMedia(\"(pointer: coarse)\").matches;\n}\n", "type": "registry:component", "target": "@components/bjork-ui/_core/loop.ts" }, { "path": "components/bjork-ui/_core/canvas.ts", "content": "\"use client\";\n\nimport { useEffect, useState, type RefObject } from \"react\";\nimport { isCoarsePointer } from \"./loop\";\n\n// Caps DPR at 1.5 on coarse pointers and 2 otherwise.\nexport function defaultMaxDpr(): number {\n return isCoarsePointer() ? 1.5 : 2;\n}\n\n// Sets the backing size for a CSS box and returns the DPR used.\nexport function sizeCanvas(\n canvas: HTMLCanvasElement,\n cssW: number,\n cssH: number,\n maxDpr: number = defaultMaxDpr(),\n): number {\n const dpr = Math.min(typeof window !== \"undefined\" ? window.devicePixelRatio || 1 : 1, maxDpr);\n canvas.width = Math.max(1, Math.round(cssW * dpr));\n canvas.height = Math.max(1, Math.round(cssH * dpr));\n canvas.style.width = `${cssW}px`;\n canvas.style.height = `${cssH}px`;\n return dpr;\n}\n\n// Rounded size of an element, kept current with a ResizeObserver.\nexport function useElementSize(ref: RefObject): { width: number; height: number } {\n const [size, setSize] = useState({ width: 0, height: 0 });\n\n useEffect(() => {\n const el = ref.current;\n if (!el || typeof ResizeObserver === \"undefined\") return;\n const observer = new ResizeObserver((entries) => {\n const box = entries[0]?.contentRect;\n if (!box) return;\n const width = Math.round(box.width);\n const height = Math.round(box.height);\n setSize((prev) => (prev.width === width && prev.height === height ? prev : { width, height }));\n });\n observer.observe(el);\n return () => observer.disconnect();\n }, [ref]);\n\n return size;\n}\n", "type": "registry:component", "target": "@components/bjork-ui/_core/canvas.ts" }, { "path": "components/bjork-ui/_core/motion.ts", "content": "// Shared springs, easings and durations. Components import these instead of inventing values.\n\nexport const springs = {\n press: { type: \"spring\", stiffness: 500, damping: 30, mass: 0.6 },\n snappy: { type: \"spring\", stiffness: 400, damping: 25, mass: 1 },\n standard: { type: \"spring\", stiffness: 300, damping: 30, mass: 0.8 },\n soft: { type: \"spring\", stiffness: 200, damping: 25, mass: 1.2 },\n settle: { type: \"spring\", stiffness: 380, damping: 30, mass: 0.8 },\n blurIn: { type: \"spring\", stiffness: 400, damping: 28, mass: 0.6 },\n} as const;\n\nexport const ease = {\n out: [0.23, 1, 0.32, 1],\n inOut: [0.77, 0, 0.175, 1],\n drawer: [0.32, 0.72, 0, 1],\n} as const;\n\nexport const easeCss = {\n out: \"cubic-bezier(0.23,1,0.32,1)\",\n inOut: \"cubic-bezier(0.77,0,0.175,1)\",\n drawer: \"cubic-bezier(0.32,0.72,0,1)\",\n} as const;\n\nexport const durations = { press: 140, tooltip: 160, menu: 200, panel: 280 } as const; // ms\n\n// Cubic bezier easing for canvas and rAF code. Returns progress y for input x in [0, 1].\nexport function cubicBezier(x1: number, y1: number, x2: number, y2: number): (t: number) => number {\n const cx = 3 * x1;\n const bx = 3 * (x2 - x1) - cx;\n const ax = 1 - cx - bx;\n const cy = 3 * y1;\n const by = 3 * (y2 - y1) - cy;\n const ay = 1 - cy - by;\n const sampleX = (s: number) => ((ax * s + bx) * s + cx) * s;\n const sampleY = (s: number) => ((ay * s + by) * s + cy) * s;\n const sampleDX = (s: number) => (3 * ax * s + 2 * bx) * s + cx;\n\n const solveX = (x: number) => {\n let s = x;\n for (let i = 0; i < 8; i++) {\n const err = sampleX(s) - x;\n if (Math.abs(err) < 1e-6) return s;\n const d = sampleDX(s);\n if (Math.abs(d) < 1e-6) break;\n s -= err / d;\n }\n let lo = 0;\n let hi = 1;\n s = x;\n while (lo < hi) {\n const v = sampleX(s);\n if (Math.abs(v - x) < 1e-6) return s;\n if (x > v) lo = s;\n else hi = s;\n s = (lo + hi) / 2;\n if (hi - lo < 1e-7) break;\n }\n return s;\n };\n\n return (t: number) => {\n if (t <= 0) return 0;\n if (t >= 1) return 1;\n return sampleY(solveX(t));\n };\n}\n", "type": "registry:component", "target": "@components/bjork-ui/_core/motion.ts" }, { "path": "components/bjork-ui/charts/_kit/chrome.tsx", "content": "\"use client\";\n\n// Shared chart chrome for the Charts collection: theme vars, the hover tooltip, legend keys and the\n// screen-reader table twin every chart ships with.\n\nimport { forwardRef, memo, useEffect, useImperativeHandle, useLayoutEffect, useRef, useState, type CSSProperties, type ReactNode } from \"react\";\nimport { useReducedMotion } from \"framer-motion\";\nimport { cn } from \"@/lib/utils\";\nimport { BJORK_PALETTE, type BjorkTone } from \"@/components/bjork-ui/_core/palette\";\nimport { useBjorkTone } from \"@/components/bjork-ui/_core/tone\";\nimport { LiveRegion } from \"@/components/bjork-ui/_core/a11y\";\nimport { surfaceVars } from \"@/components/bjork-ui/_core/surface\";\n\nexport type ChartPalette = (typeof BJORK_PALETTE)[BjorkTone];\n\n// Tokens a chart root writes so DOM overlays follow `tone` even outside a themed page.\nexport function chartVars(pal: ChartPalette): CSSProperties {\n return {\n ...surfaceVars(pal === BJORK_PALETTE.light ? \"light\" : \"dark\"),\n \"--bjork-accent\": pal.accent,\n \"--bjork-accent-ink\": pal.accentInk,\n \"--bjork-accent-fill\": pal.accentFill,\n \"--bjork-accent-soft\": pal.accentSoft,\n \"--bjork-accent-foreground\": pal.accentFg,\n \"--bjork-text\": pal.text,\n \"--bjork-text-medium\": pal.textMedium,\n \"--bjork-text-muted\": pal.textMuted,\n \"--bjork-text-soft\": pal.textSoft,\n \"--bjork-text-faint\": pal.textFaint,\n \"--bjork-hair\": pal.hair,\n \"--bjork-border\": pal.border,\n \"--bjork-border-strong\": pal.borderStrong,\n \"--bjork-surface\": pal.surface,\n \"--bjork-surface-hover\": pal.raised,\n \"--bjork-ring-offset\": pal.bg,\n // The surface a chart sits on, for label halos and cut-outs. Override it on the root if needed.\n \"--bjork-chart-bg\": pal.stage,\n \"--bjork-success\": pal.success,\n \"--bjork-warning\": pal.warning,\n \"--bjork-error\": pal.error,\n } as CSSProperties;\n}\n\n// Tone, palette, reduced motion and root vars in one call.\nexport function useChartTheme(toneProp?: BjorkTone) {\n const tone = useBjorkTone(toneProp);\n const pal = BJORK_PALETTE[tone];\n const reduce = !!useReducedMotion();\n return { tone, pal, reduce, vars: chartVars(pal) };\n}\n\n// Focus ring shared by every focusable plot surface.\nexport const chartFocusRing =\n \"outline-none focus-visible:ring-2 focus-visible:ring-[color:var(--bjork-accent)] focus-visible:ring-offset-2 focus-visible:ring-offset-[color:var(--bjork-ring-offset)]\";\n\n// Mono label style: 10px Geist Mono, tabular, cap-trimmed.\nexport const chartMono = \"font-mono text-[10px] leading-none tabular-nums [text-box:trim-both_cap_alphabetic]\";\n\n// Floating chart surfaces follow the library canon (_core/surface.ts): a 1px border plus the inset light\n// shadow. Hover cards take the full surface shadow; small readout tags take the soft one. Colours come\n// from chartVars, so light and dark both follow the tone.\nexport const chartCardEdge = \"border border-[color:var(--bjork-border)] shadow-[var(--bjork-shadow-surface)]\";\nexport const chartTagEdge = \"border border-[color:var(--bjork-border)] shadow-[var(--bjork-shadow-soft)]\";\n\nexport interface TooltipRow {\n key?: string;\n label: ReactNode;\n value: ReactNode;\n color?: string;\n dashed?: boolean;\n strong?: boolean;\n}\n\n// The hover card. Values lead, labels follow, series keyed with a short line in the series colour.\n// Position it with `style.transform` from the caller; it never takes pointer events.\nexport const ChartTooltip = forwardRef<\n HTMLDivElement,\n { title?: ReactNode; rows: TooltipRow[]; visible: boolean; className?: string; style?: CSSProperties; tipKey?: string }\n>(function ChartTooltip({ title, rows, visible, className, style, tipKey }, ref) {\n return (\n \n {title !== undefined && (\n
\n {title}\n
\n )}\n
\n {rows.map((r, i) => (\n
\n {r.color && (\n \n )}\n \n {r.value}\n \n \n {r.label}\n \n
\n ))}\n
\n \n );\n});\n\n// Places a tooltip of size (tw, th) next to (x, y) inside a (w, h) box, flipping away from edges.\nexport function placeTooltip(\n x: number,\n y: number,\n tw: number,\n th: number,\n w: number,\n h: number,\n gap = 12,\n): { x: number; y: number } {\n let tx = x + gap;\n if (tx + tw > w) tx = x - gap - tw;\n if (tx < 0) tx = Math.max(0, Math.min(w - tw, x - tw / 2));\n let ty = y - th - gap;\n if (ty < 0) ty = Math.min(h - th, y + gap);\n return { x: Math.round(tx), y: Math.round(Math.max(0, ty)) };\n}\n\nexport interface LegendItem {\n id: string;\n label: string;\n color: string;\n shape?: \"line\" | \"dash\" | \"rect\" | \"dot\";\n muted?: boolean;\n}\n\n// A legend row. Keys mirror the mark: line for lines, rect for areas and bars.\nexport function ChartLegend({\n items,\n className,\n onHover,\n activeId,\n}: {\n items: LegendItem[];\n className?: string;\n onHover?: (id: string | null) => void;\n activeId?: string | null;\n}) {\n return (\n
\n {items.map((it) => {\n const dim = (activeId && activeId !== it.id) || it.muted;\n return (\n onHover(it.id) : undefined}\n onPointerLeave={onHover ? () => onHover(null) : undefined}\n className={cn(\n \"inline-flex items-center gap-1.5 font-bjork-alpha text-[11px] font-medium leading-3 transition-opacity duration-150 ease-out\",\n dim ? \"opacity-45\" : \"opacity-100\",\n \"text-[color:var(--bjork-text-medium)]\",\n )}\n >\n \n {it.label}\n \n );\n })}\n
\n );\n}\n\nexport function LegendKey({ color, shape = \"rect\" }: { color: string; shape?: LegendItem[\"shape\"] }) {\n if (shape === \"line\") return ;\n if (shape === \"dash\") return ;\n if (shape === \"dot\") return ;\n return ;\n}\n\n// The table twin. Every value the chart shows is reachable here without hovering.\n// Memoised: hover state re-renders the chart, never the table. Pass memoised rows.\nexport const ChartTable = memo(function ChartTable({\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((c) => (\n \n ))}\n \n \n \n {rows.map((r, i) => (\n \n {r.map((cell, j) =>\n j === 0 ? (\n \n ) : (\n \n ),\n )}\n \n ))}\n \n
{caption}
\n {c}\n
\n {cell}\n {cell}
\n );\n});\n\n// A pool of absolutely positioned spans the draw loop fills through `writeLabels`.\nexport function LabelPool({\n count,\n pool,\n className,\n}: {\n count: number;\n pool: { current: (HTMLSpanElement | null)[] };\n className?: string;\n}) {\n return (\n <>\n {Array.from({ length: count }).map((_, i) => (\n {\n pool.current[i] = el;\n }}\n aria-hidden=\"true\"\n className={cn(\n \"pointer-events-none absolute left-0 top-0 whitespace-nowrap opacity-0\",\n className ?? \"font-mono text-[10px] leading-none tabular-nums text-[color:var(--bjork-text-faint)] [text-box:trim-both_cap_alphabetic]\",\n )}\n />\n ))}\n \n );\n}\n\nexport interface TooltipContent {\n key: string;\n title?: ReactNode;\n rows: TooltipRow[];\n}\n\nexport interface TooltipHandle {\n /** Shows `content`, or hides with `null`. Same key is a no-op. */\n set: (content: TooltipContent | null) => void;\n readonly el: HTMLDivElement | null;\n /** Measured size of the current content. */\n readonly size: { w: number; h: number };\n}\n\n// A tooltip that owns its state, so hovering re-renders only the tooltip, never the chart.\n// The chart positions it from its draw loop through `handle.el.style.transform`.\nexport const HoverTooltip = forwardRef void; className?: string }>(function HoverTooltip(\n { onMeasure, className },\n ref,\n) {\n const [state, setState] = useState<{ content: TooltipContent | null; last: TooltipContent | null }>({ content: null, last: null });\n const elRef = useRef(null);\n const size = useRef({ w: 0, h: 0 });\n const onMeasureRef = useRef(onMeasure);\n useEffect(() => {\n onMeasureRef.current = onMeasure;\n });\n useImperativeHandle(\n ref,\n () => ({\n set: (content) =>\n setState((prev) => {\n if ((prev.content?.key ?? null) === (content?.key ?? null)) return prev;\n return { content, last: content ?? prev.last };\n }),\n get el() {\n return elRef.current;\n },\n get size() {\n return size.current;\n },\n }),\n [],\n );\n useLayoutEffect(() => {\n const el = elRef.current;\n if (!el) return;\n size.current = { w: el.offsetWidth, h: el.offsetHeight };\n onMeasureRef.current?.();\n }, [state.last]);\n const shown = state.content ?? state.last;\n return ;\n});\n\nexport interface AnnouncerHandle {\n say: (message: string) => void;\n}\n\n// Polite live region with a 250ms trailing throttle, isolated from the chart's renders.\nexport const ChartAnnouncer = forwardRef(function ChartAnnouncer({ ms = 250 }, ref) {\n const [message, setMessage] = useState(\"\");\n const at = useRef(0);\n const timer = useRef | null>(null);\n useEffect(\n () => () => {\n if (timer.current) clearTimeout(timer.current);\n },\n [],\n );\n useImperativeHandle(\n ref,\n () => ({\n say: (text: string) => {\n const now = performance.now();\n if (timer.current) clearTimeout(timer.current);\n if (now - at.current >= ms) {\n at.current = now;\n setMessage(text);\n } else {\n timer.current = setTimeout(() => {\n at.current = performance.now();\n setMessage(text);\n }, ms);\n }\n },\n }),\n [ms],\n );\n return ;\n});\n", "type": "registry:component", "target": "@components/bjork-ui/charts/_kit/chrome.tsx" }, { "path": "components/bjork-ui/_core/tone.ts", "content": "\"use client\";\n\nimport { useSyncExternalStore } from \"react\";\nimport { useTheme } from \"next-themes\";\nimport type { BjorkTone } from \"./palette\";\n\nconst subscribeNoop = () => () => {};\nconst getMounted = () => true;\nconst getServerMounted = () => false;\n\n/**\n * Resolves the tone for a component. An explicit `tone` always wins.\n * Otherwise it follows next-themes' resolved theme, but only after mount,\n * so the server render and first client render agree on dark.\n */\nexport function useBjorkTone(tone?: BjorkTone): BjorkTone {\n const { resolvedTheme } = useTheme();\n const mounted = useSyncExternalStore(subscribeNoop, getMounted, getServerMounted);\n if (tone) return tone;\n if (!mounted) return \"dark\";\n return resolvedTheme === \"light\" ? \"light\" : \"dark\";\n}\n", "type": "registry:component", "target": "@components/bjork-ui/_core/tone.ts" }, { "path": "components/bjork-ui/_core/a11y.tsx", "content": "import type { ReactNode } from \"react\";\n\n// Text for assistive tech only.\nexport function VisuallyHidden({ children }: { children: ReactNode }) {\n return {children};\n}\n\n// Announces `message` when it changes. Same text re-rendered does not re-announce.\nexport function LiveRegion({\n message,\n politeness = \"polite\",\n}: {\n message: string;\n politeness?: \"polite\" | \"assertive\";\n}) {\n return (\n \n {message}\n \n );\n}\n", "type": "registry:component", "target": "@components/bjork-ui/_core/a11y.tsx" }, { "path": "components/bjork-ui/_core/surface.ts", "content": "import type { CSSProperties } from \"react\";\nimport type { BjorkTone } from \"./palette\";\n\n// The library surface (CANON.md §1). Values mirror app/globals.css :root and .dark. Change both together.\nexport const BJORK_SURFACE = {\n light: {\n surface: \"#fffcf6\", surfaceMuted: \"rgba(250, 246, 237, 0.94)\", surfaceHover: \"#f5efe3\", surfaceActive: \"#efe7d8\",\n panel: \"#f8f2e7\", menu: \"rgba(255, 252, 246, 0.98)\", field: \"rgba(255, 252, 246, 0.96)\",\n fieldMuted: \"rgba(248, 242, 231, 0.82)\", fieldInset: \"rgba(239, 231, 216, 0.72)\",\n border: \"#eee6db\", borderMuted: \"#f5ede2\", borderStrong: \"#e1d7c8\",\n shadowSurface: \"inset 0 7px 14px rgba(88, 72, 49, 0.045), inset 0 0.5px 0.5px rgba(255, 255, 255, 0.92), inset 1px 0 0 rgba(88, 72, 49, 0.026), inset -1px 0 0 rgba(255, 255, 255, 0.68), 0 14px 22px -9px rgba(66, 52, 33, 0.11)\",\n shadowSoft: \"inset 0 1px 0 rgba(88, 72, 49, 0.045), inset 0 0.5px 0.5px rgba(255, 255, 255, 0.86)\",\n shadowPanel: \"inset 0 1px 0 rgba(88, 72, 49, 0.04), inset 1px 0 0 rgba(88, 72, 49, 0.024), inset -1px 0 0 rgba(255, 255, 255, 0.64), 0 18px 38px -30px rgba(66, 52, 33, 0.2)\",\n shadowMenu: \"inset 0 1px 0 rgba(88, 72, 49, 0.04), inset 0 12px 24px rgba(88, 72, 49, 0.022), inset 1px 0 0 rgba(88, 72, 49, 0.024), inset -1px 0 0 rgba(255, 255, 255, 0.62), 0 22px 44px -26px rgba(66, 52, 33, 0.22)\",\n shadowInset: \"inset 0 1px 10px rgba(88, 72, 49, 0.12), inset 0 0.5px 0.5px rgba(255, 255, 255, 0.72)\",\n },\n dark: {\n surface: \"#121212\", surfaceMuted: \"rgba(22, 22, 22, 0.92)\", surfaceHover: \"#161616\", surfaceActive: \"#202020\",\n panel: \"#0d0d0d\", menu: \"rgba(18, 18, 18, 0.98)\", field: \"rgba(18, 18, 18, 0.95)\",\n fieldMuted: \"rgba(18, 18, 18, 0.55)\", fieldInset: \"rgba(9, 9, 9, 0.75)\",\n border: \"#232323\", borderMuted: \"#1c1c1c\", borderStrong: \"#343434\",\n shadowSurface: \"inset 0 7px 14px rgba(255, 255, 255, 0.03), inset 0 0.5px 0.5px rgba(255, 255, 255, 0.06), 0 14px 20px -6px rgba(0, 0, 0, 0.45)\",\n shadowSoft: \"inset 0 1px 0 rgba(255, 255, 255, 0.045)\",\n shadowPanel: \"inset 0 1px 0 rgba(255, 255, 255, 0.035), 0 18px 36px -28px rgba(0, 0, 0, 0.9)\",\n shadowMenu: \"inset 0 1px 0 rgba(255, 255, 255, 0.055), inset 0 12px 24px rgba(255, 255, 255, 0.018), inset 0 -18px 26px rgba(0, 0, 0, 0.24), 0 22px 42px -22px rgba(0, 0, 0, 0.9)\",\n shadowInset: \"inset 0 1px 10px rgba(0, 0, 0, 0.45)\",\n },\n} as const;\n\n/** Writes the surface tokens for a pinned tone as --bjork-* custom properties. Spread first; kit-specific keys may override. */\nexport function surfaceVars(tone: BjorkTone): CSSProperties {\n const s = BJORK_SURFACE[tone];\n return {\n \"--bjork-surface\": s.surface, \"--bjork-surface-muted\": s.surfaceMuted, \"--bjork-surface-hover\": s.surfaceHover,\n \"--bjork-surface-active\": s.surfaceActive, \"--bjork-panel\": s.panel, \"--bjork-menu\": s.menu, \"--bjork-field\": s.field,\n \"--bjork-field-muted\": s.fieldMuted, \"--bjork-field-inset\": s.fieldInset, \"--bjork-border\": s.border,\n \"--bjork-border-muted\": s.borderMuted, \"--bjork-border-strong\": s.borderStrong,\n \"--bjork-shadow-surface\": s.shadowSurface, \"--bjork-shadow-soft\": s.shadowSoft, \"--bjork-shadow-panel\": s.shadowPanel,\n \"--bjork-shadow-menu\": s.shadowMenu, \"--bjork-shadow-inset\": s.shadowInset,\n } as CSSProperties;\n}\n", "type": "registry:component", "target": "@components/bjork-ui/_core/surface.ts" }, { "path": "components/bjork-ui/charts/_kit/scale.ts", "content": "// Shared chart math for the Charts collection: nice ticks, scales, damping, colour and number formatting.\n// Pure functions only. Every chart imports what it needs by path.\n\nexport function clamp(v: number, lo: number, hi: number): number {\n return v < lo ? lo : v > hi ? hi : v;\n}\n\nexport function lerp(a: number, b: number, t: number): number {\n return a + (b - a) * t;\n}\n\n// Maps v from [d0, d1] to [r0, r1]. Degenerate domains map to the range midpoint.\nexport function scaleLinear(d0: number, d1: number, r0: number, r1: number): (v: number) => number {\n const span = d1 - d0;\n if (!(Math.abs(span) > 1e-12)) return () => (r0 + r1) / 2;\n const k = (r1 - r0) / span;\n return (v: number) => r0 + (v - d0) * k;\n}\n\n// Frame-rate independent approach: moves `cur` toward `target` with time constant `tau` seconds.\nexport function damp(cur: number, target: number, tau: number, dt: number): number {\n if (tau <= 0) return target;\n return target + (cur - target) * Math.exp(-dt / tau);\n}\n\n// A \"nice\" step (1, 2, 2.5 or 5 x 10^k) that splits `span` into roughly `count` intervals.\nexport function niceStep(span: number, count = 5): number {\n if (!(span > 0) || !Number.isFinite(span)) return 1;\n const raw = span / Math.max(1, count);\n const mag = 10 ** Math.floor(Math.log10(raw));\n const r = raw / mag;\n const m = r <= 1 ? 1 : r <= 2 ? 2 : r <= 2.5 ? 2.5 : r <= 5 ? 5 : 10;\n return m * mag;\n}\n\n// Tick values at a nice step, inclusive of the domain ends when they land on the step.\nexport function niceTicks(lo: number, hi: number, count = 5): number[] {\n if (!(hi > lo)) return [lo];\n const step = niceStep(hi - lo, count);\n const first = Math.ceil(lo / step - 1e-9);\n const last = Math.floor(hi / step + 1e-9);\n const out: number[] = [];\n for (let n = first; n <= last; n++) out.push(Number((n * step).toFixed(12)));\n return out;\n}\n\n// Expands [lo, hi] outward to the nearest nice step, so the outer gridlines sit on round values.\nexport function niceDomain(lo: number, hi: number, count = 5): [number, number] {\n if (!(hi > lo)) {\n const pad = Math.max(Math.abs(hi) * 0.1, 1);\n return [lo - pad, hi + pad];\n }\n const step = niceStep(hi - lo, count);\n return [Math.floor(lo / step + 1e-9) * step, Math.ceil(hi / step - 1e-9) * step];\n}\n\n// Half-pixel snap for crisp 1px hairlines.\nexport function crisp(v: number): number {\n return Math.round(v) + 0.5;\n}\n\n// --- Colour -------------------------------------------------------------------------------------\n\nconst rgbCache = new Map();\n\n// Parses #rgb, #rrggbb and rgba()/rgb() strings. Returns [r, g, b, a].\nexport function parseColor(c: string): [number, number, number, number] {\n const hit = rgbCache.get(c);\n if (hit) return hit;\n let out: [number, number, number, number] = [0, 0, 0, 1];\n const s = c.trim();\n if (s.startsWith(\"#\")) {\n let h = s.slice(1);\n if (h.length === 3) h = h.split(\"\").map((ch) => ch + ch).join(\"\");\n const n = parseInt(h.slice(0, 6), 16);\n out = [(n >> 16) & 255, (n >> 8) & 255, n & 255, 1];\n } else {\n const m = s.match(/rgba?\\(([^)]+)\\)/);\n if (m) {\n const p = m[1].split(\",\").map((x) => parseFloat(x));\n out = [p[0] ?? 0, p[1] ?? 0, p[2] ?? 0, p[3] ?? 1];\n }\n }\n rgbCache.set(c, out);\n return out;\n}\n\n// The colour at alpha `a`, multiplied with any alpha the colour already has.\nexport function withAlpha(c: string, a: number): string {\n const [r, g, b, a0] = parseColor(c);\n return `rgba(${r},${g},${b},${+(a0 * a).toFixed(4)})`;\n}\n\n// Mixes two opaque colours in sRGB. t = 0 gives `a`.\nexport function mixColor(a: string, b: string, t: number): string {\n const ca = parseColor(a);\n const cb = parseColor(b);\n const r = Math.round(lerp(ca[0], cb[0], t));\n const g = Math.round(lerp(ca[1], cb[1], t));\n const bl = Math.round(lerp(ca[2], cb[2], t));\n return `rgb(${r},${g},${bl})`;\n}\n\n// --- Numbers ------------------------------------------------------------------------------------\n\nconst fmtCache = new Map();\nfunction nf(opts: Intl.NumberFormatOptions): Intl.NumberFormat {\n const key = JSON.stringify(opts);\n let f = fmtCache.get(key);\n if (!f) {\n f = new Intl.NumberFormat(\"en-US\", opts);\n fmtCache.set(key, f);\n }\n return f;\n}\n\nexport function formatNumber(v: number, digits = 1): string {\n if (!Number.isFinite(v)) return \"–\";\n return nf({ maximumFractionDigits: digits, minimumFractionDigits: 0 }).format(v);\n}\n\nexport function formatFixed(v: number, digits = 2): string {\n if (!Number.isFinite(v)) return \"–\";\n return nf({ maximumFractionDigits: digits, minimumFractionDigits: digits }).format(v);\n}\n\n// 1,284 / 12.9K / 4.2M. Uses a true minus sign.\nexport function formatCompact(v: number, digits = 1): string {\n if (!Number.isFinite(v)) return \"–\";\n const s = nf({ notation: \"compact\", maximumFractionDigits: digits }).format(Math.abs(v));\n return v < 0 ? `−${s}` : s;\n}\n\nexport function formatPercent(v: number, digits = 0): string {\n if (!Number.isFinite(v)) return \"–\";\n const s = nf({ maximumFractionDigits: digits, minimumFractionDigits: digits }).format(Math.abs(v * 100));\n return `${v < 0 ? \"−\" : \"\"}${s}%`;\n}\n\n// +1.2 / −0.8 / 0. Signed numbers use a true minus and an explicit plus.\nexport function formatSigned(v: number, format: (n: number) => string = (n) => formatNumber(n)): string {\n if (!Number.isFinite(v)) return \"–\";\n const body = format(Math.abs(v));\n // A value that rounds to zero carries no sign.\n if (Math.abs(v) < 1e-12 || !/[1-9]/.test(body)) return body;\n return `${v > 0 ? \"+\" : \"−\"}${body}`;\n}\n\n// Gaussian kernel density at x for a sorted sample, bandwidth h.\nexport function kde(sample: number[], x: number, h: number): number {\n const n = sample.length;\n if (!n || !(h > 0)) return 0;\n let s = 0;\n const inv = 1 / h;\n for (let i = 0; i < n; i++) {\n const u = (x - sample[i]) * inv;\n if (u > 4 || u < -4) continue;\n s += Math.exp(-0.5 * u * u);\n }\n return s / (n * h * Math.sqrt(2 * Math.PI));\n}\n\n// Silverman's rule of thumb bandwidth.\nexport function silverman(sample: number[]): number {\n const n = sample.length;\n if (n < 2) return 1;\n const mean = sample.reduce((a, b) => a + b, 0) / n;\n const sd = Math.sqrt(sample.reduce((a, b) => a + (b - mean) ** 2, 0) / (n - 1));\n const sorted = [...sample].sort((a, b) => a - b);\n const iqr = quantile(sorted, 0.75) - quantile(sorted, 0.25);\n const spread = Math.min(sd, iqr / 1.34) || sd || 1;\n return 0.9 * spread * n ** -0.2;\n}\n\n// Linear-interpolated quantile of a sorted array.\nexport function quantile(sorted: number[], q: number): number {\n const n = sorted.length;\n if (!n) return NaN;\n if (n === 1) return sorted[0];\n const pos = clamp(q, 0, 1) * (n - 1);\n const lo = Math.floor(pos);\n const hi = Math.min(n - 1, lo + 1);\n return sorted[lo] + (sorted[hi] - sorted[lo]) * (pos - lo);\n}\n\n// Standard normal sample from a uniform source (Box-Muller).\nexport function gaussian(rnd: () => number): number {\n const u = Math.max(rnd(), 1e-9);\n const v = rnd();\n return Math.sqrt(-2 * Math.log(u)) * Math.cos(2 * Math.PI * v);\n}\n\n// --- Time ---------------------------------------------------------------------------------------\n\nconst HOUR = 3600000;\nconst DAY = 86400000;\nconst timeFmt = {\n hour: new Intl.DateTimeFormat(\"en-US\", { hour: \"numeric\", timeZone: \"UTC\" }),\n day: new Intl.DateTimeFormat(\"en-US\", { month: \"short\", day: \"numeric\", timeZone: \"UTC\" }),\n month: new Intl.DateTimeFormat(\"en-US\", { month: \"short\", timeZone: \"UTC\" }),\n monthYear: new Intl.DateTimeFormat(\"en-US\", { month: \"short\", year: \"2-digit\", timeZone: \"UTC\" }),\n year: new Intl.DateTimeFormat(\"en-US\", { year: \"numeric\", timeZone: \"UTC\" }),\n};\n\nexport interface TimeTick {\n t: number;\n label: string;\n}\n\n// Calendar-aligned ticks (UTC) for [t0, t1] drawn across `px` pixels, at least `minPx` apart.\nexport function timeTicks(t0: number, t1: number, px: number, minPx = 64): TimeTick[] {\n const span = t1 - t0;\n if (!(span > 0) || !(px > 0)) return [];\n const maxTicks = Math.max(1, Math.floor(px / minPx));\n const perTick = span / maxTicks;\n const out: TimeTick[] = [];\n const hourSteps = [1, 2, 3, 6, 12];\n for (const k of hourSteps) {\n if (k * HOUR >= perTick) {\n const step = k * HOUR;\n for (let t = Math.ceil(t0 / step) * step; t <= t1; t += step) {\n const d = new Date(t);\n out.push({ t, label: d.getUTCHours() === 0 ? timeFmt.day.format(t) : timeFmt.hour.format(t) });\n }\n return out;\n }\n }\n const daySteps = [1, 2, 3, 7, 14];\n for (const k of daySteps) {\n if (k * DAY >= perTick) {\n const step = k * DAY;\n // Weekly steps land on Mondays.\n const offset = k === 7 || k === 14 ? 4 * DAY : 0;\n for (let t = Math.ceil((t0 - offset) / step) * step + offset; t <= t1; t += step) out.push({ t, label: timeFmt.day.format(t) });\n return out;\n }\n }\n const monthSteps = [1, 2, 3, 6, 12, 24, 60];\n for (const k of monthSteps) {\n if (k * 30.44 * DAY >= perTick) {\n const d0 = new Date(t0);\n let y = d0.getUTCFullYear();\n let m = d0.getUTCMonth();\n // First boundary at or after t0 that is a multiple of k months.\n m = Math.ceil(m / k) * k;\n for (;;) {\n y += Math.floor(m / 12);\n m %= 12;\n const t = Date.UTC(y, m, 1);\n if (t > t1) break;\n if (t >= t0) {\n const label = k >= 12 ? timeFmt.year.format(t) : m === 0 ? timeFmt.monthYear.format(t) : timeFmt.month.format(t);\n out.push({ t, label });\n }\n m += k;\n }\n return out;\n }\n }\n return out;\n}\n\nexport function formatDateUTC(t: number, style: \"day\" | \"full\" = \"day\"): string {\n if (style === \"full\") return new Date(t).toLocaleDateString(\"en-US\", { weekday: \"short\", month: \"short\", day: \"numeric\", year: \"numeric\", timeZone: \"UTC\" });\n return timeFmt.day.format(t);\n}\n", "type": "registry:component", "target": "@components/bjork-ui/charts/_kit/scale.ts" } ], "cssVars": { "light": { "bjork-bg": "#f7f3ea", "bjork-surface": "#fffcf6", "bjork-surface-muted": "rgba(250, 246, 237, 0.94)", "bjork-surface-hover": "#f5efe3", "bjork-surface-active": "#efe7d8", "bjork-panel": "#f8f2e7", "bjork-menu": "rgba(255, 252, 246, 0.98)", "bjork-field": "rgba(255, 252, 246, 0.96)", "bjork-field-muted": "rgba(248, 242, 231, 0.82)", "bjork-field-inset": "rgba(239, 231, 216, 0.72)", "bjork-error-bg": "#fff0e8", "bjork-text": "#171717", "bjork-text-strong": "rgba(23, 23, 23, 0.9)", "bjork-text-medium": "rgba(23, 23, 23, 0.78)", "bjork-text-muted": "rgba(23, 23, 23, 0.68)", "bjork-text-soft": "rgba(23, 23, 23, 0.62)", "bjork-text-faint": "rgba(23, 23, 23, 0.22)", "bjork-inverted-text": "#fff8f0", "bjork-border": "#eee6db", "bjork-border-muted": "#f5ede2", "bjork-border-strong": "#e1d7c8", "bjork-thumb": "#a49b8e", "bjork-track": "#ded6ca", "bjork-accent": "#ec7d43", "bjork-accent-hover": "#f0935f", "bjork-accent-soft": "rgba(236, 125, 67, 0.1)", "bjork-accent-muted": "rgba(236, 125, 67, 0.2)", "bjork-accent-badge": "rgba(236, 125, 67, 0.16)", "bjork-accent-badge-foreground": "#8d421d", "bjork-accent-foreground": "#3f2112", "bjork-accent-fill": "#ec7d43", "bjork-accent-fill-hover": "#f0935f", "bjork-shadow-surface": "inset 0 7px 14px rgba(88, 72, 49, 0.045), inset 0 0.5px 0.5px rgba(255, 255, 255, 0.92), inset 1px 0 0 rgba(88, 72, 49, 0.026), inset -1px 0 0 rgba(255, 255, 255, 0.68), 0 14px 22px -9px rgba(66, 52, 33, 0.11)", "bjork-shadow-soft": "inset 0 1px 0 rgba(88, 72, 49, 0.045), inset 0 0.5px 0.5px rgba(255, 255, 255, 0.86)", "bjork-shadow-panel": "inset 0 1px 0 rgba(88, 72, 49, 0.04), inset 1px 0 0 rgba(88, 72, 49, 0.024), inset -1px 0 0 rgba(255, 255, 255, 0.64), 0 18px 38px -30px rgba(66, 52, 33, 0.2)", "bjork-shadow-menu": "inset 0 1px 0 rgba(88, 72, 49, 0.04), inset 0 12px 24px rgba(88, 72, 49, 0.022), inset 1px 0 0 rgba(88, 72, 49, 0.024), inset -1px 0 0 rgba(255, 255, 255, 0.62), 0 22px 44px -26px rgba(66, 52, 33, 0.22)", "bjork-shadow-inset": "inset 0 1px 10px rgba(88, 72, 49, 0.12), inset 0 0.5px 0.5px rgba(255, 255, 255, 0.72)", "bjork-ring-offset": "#f7f3ea" }, "dark": { "bjork-bg": "#111111", "bjork-surface": "#121212", "bjork-surface-muted": "rgba(22, 22, 22, 0.92)", "bjork-surface-hover": "#161616", "bjork-surface-active": "#202020", "bjork-panel": "#0d0d0d", "bjork-menu": "rgba(18, 18, 18, 0.98)", "bjork-field": "rgba(18, 18, 18, 0.95)", "bjork-field-muted": "rgba(18, 18, 18, 0.55)", "bjork-field-inset": "rgba(9, 9, 9, 0.75)", "bjork-error-bg": "#130d0a", "bjork-text": "#ededed", "bjork-text-strong": "rgba(237, 237, 237, 0.9)", "bjork-text-medium": "rgba(237, 237, 237, 0.72)", "bjork-text-muted": "rgba(237, 237, 237, 0.6)", "bjork-text-soft": "rgba(237, 237, 237, 0.5)", "bjork-text-faint": "rgba(237, 237, 237, 0.22)", "bjork-inverted-text": "#080808", "bjork-border": "#232323", "bjork-border-muted": "#1c1c1c", "bjork-border-strong": "#343434", "bjork-thumb": "#626262", "bjork-track": "#090909", "bjork-accent": "#ec5c13", "bjork-accent-hover": "#f07832", "bjork-accent-soft": "rgba(236, 92, 19, 0.12)", "bjork-accent-muted": "rgba(236, 92, 19, 0.24)", "bjork-accent-badge": "#b84a12", "bjork-accent-badge-foreground": "#fff2ea", "bjork-accent-foreground": "#fff2ea", "bjork-accent-fill": "#b84a12", "bjork-accent-fill-hover": "#a84a14", "bjork-shadow-surface": "inset 0 7px 14px rgba(255, 255, 255, 0.03), inset 0 0.5px 0.5px rgba(255, 255, 255, 0.06), 0 14px 20px -6px rgba(0, 0, 0, 0.45)", "bjork-shadow-soft": "inset 0 1px 0 rgba(255, 255, 255, 0.045)", "bjork-shadow-panel": "inset 0 1px 0 rgba(255, 255, 255, 0.035), 0 18px 36px -28px rgba(0, 0, 0, 0.9)", "bjork-shadow-menu": "inset 0 1px 0 rgba(255, 255, 255, 0.055), inset 0 12px 24px rgba(255, 255, 255, 0.018), inset 0 -18px 26px rgba(0, 0, 0, 0.24), 0 22px 42px -22px rgba(0, 0, 0, 0.9)", "bjork-shadow-inset": "inset 0 1px 10px rgba(0, 0, 0, 0.45)", "bjork-ring-offset": "#080808" } }, "css": { ".bjork-range": { "box-shadow": "inset 0 1px 1px rgba(255, 255, 255, 0.04), 0 0 14px rgba(189, 69, 20, 0.06)" }, ".bjork-range::-webkit-slider-thumb": { "appearance": "none", "width": "16px", "height": "8px", "border": "0", "border-radius": "999px", "background": "var(--bjork-thumb)", "box-shadow": "inset 0 1px 0 rgba(255, 255, 255, 0.18), 0 0 0 1px rgba(0, 0, 0, 0.42)" }, ".bjork-range::-moz-range-thumb": { "width": "16px", "height": "8px", "border": "0", "border-radius": "999px", "background": "var(--bjork-thumb)", "box-shadow": "inset 0 1px 0 rgba(255, 255, 255, 0.18), 0 0 0 1px rgba(0, 0, 0, 0.42)" }, ".bjork-layered-button-accent, .bjork-layered-button-raised": { "position": "relative", "isolation": "isolate", "appearance": "none", "overflow": "hidden", "border": "0", "border-radius": "13px", "box-shadow": "inset 0 1px 0 #ffffff38, 0 4px 6px -1px #0000001a, 0 2px 4px -2px #0000001a", "transition": "filter 150ms ease-out, box-shadow 150ms ease-out" }, ".bjork-layered-button-accent::after, .bjork-layered-button-raised::after": { "position": "absolute", "inset": "0", "pointer-events": "none", "content": "\"\"", "border": "1.5px solid transparent", "border-radius": "inherit", "background": "linear-gradient(#ffffffb8, #0000003d 41% 75%, #ffffff47) border-box", "mix-blend-mode": "overlay", "-webkit-mask-image": "linear-gradient(#000, #000), linear-gradient(#000, #000)", "mask-image": "linear-gradient(#000, #000), linear-gradient(#000, #000)", "-webkit-mask-clip": "padding-box, border-box", "mask-clip": "padding-box, border-box", "-webkit-mask-origin": "padding-box, border-box", "mask-origin": "padding-box, border-box", "-webkit-mask-composite": "xor", "mask-composite": "exclude" }, ".bjork-layered-button-accent": { "color": "oklch(100% 0 0)", "text-shadow": "0 -1px #00000040", "background": "radial-gradient(ellipse at -20px top, rgba(255, 255, 255, 0.14), transparent), linear-gradient(180deg, #ec5c13 0%, #ec5c13 62%, color-mix(in oklab, #ec5c13 84%, black 16%) 100%)" }, ".bjork-layered-button-raised": { "color": "oklch(100% 0 0)", "text-shadow": "0 -1px #00000026", "background": "radial-gradient(ellipse at -20px top, #ffffff38, #fff0), linear-gradient(180deg, oklch(0.1881 0.006 265), oklch(0.5493 0.0081 265))" }, ".dark .bjork-layered-button-raised": { "color": "oklch(0.2574 0.0056 265)", "text-shadow": "0 -1px #00000026", "background": "radial-gradient(ellipse at -20px top, #ffffff38, #fff0), linear-gradient(180deg, color-mix(in oklab, oklch(0.9674 0.0013 265) 80%, oklch(0.2574 0.0056 265) 20%), color-mix(in oklab, oklch(0.669 0.0107 265) 80%, oklch(0.2574 0.0056 265) 20%))" }, "@media (hover: hover)": { ".bjork-layered-button-accent:hover": { "filter": "brightness(1.08) saturate(1.04)" }, ".bjork-layered-button-raised:hover": { "filter": "brightness(1.08) contrast(0.9)" } } }, "meta": { "collection": "Charts", "registryUrl": "https://ui.isaiahbjork.com/depth-chart.json", "installCommand": "npx shadcn@latest add https://ui.isaiahbjork.com/depth-chart.json" }, "type": "registry:component" }