{ "$schema": "https://ui.shadcn.com/schema/registry-item.json", "name": "scatter-brush", "title": "Scatter brush", "description": "Scatter brush 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/scatter-brush.tsx", "content": "\"use client\";\n\nimport { useEffect, useMemo, useRef, useState, 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 placeTooltip,\n HoverTooltip,\n ChartAnnouncer,\n type TooltipHandle,\n type AnnouncerHandle,\n type TooltipContent,\n} from \"@/components/bjork-ui/charts/_kit/chrome\";\nimport { clamp, crisp, damp, niceDomain, niceTicks, withAlpha, formatNumber, formatFixed, formatSigned, gaussian } from \"@/components/bjork-ui/charts/_kit/scale\";\n\nexport interface ScatterPoint {\n id?: string;\n x: number;\n y: number;\n label?: string;\n}\n\nexport interface Brush {\n x0: number;\n x1: number;\n y0: number;\n y1: number;\n}\n\nexport interface ScatterBrushProps {\n points: ScatterPoint[];\n xLabel?: string;\n yLabel?: string;\n xDomain?: [number, number];\n yDomain?: [number, number];\n /** Brush in data units. Uncontrolled by default. `null` clears it. */\n brush?: Brush | null;\n defaultBrush?: Brush | null;\n onBrushChange?: (brush: Brush | null, selected: number[]) => void;\n marginals?: boolean;\n bins?: number;\n /**\n * Least-squares trend line (y on x) over the brushed selection, or every point when nothing is\n * brushed. Drawn only across the x range it was fitted on, and adds r² to the readout.\n */\n trend?: boolean;\n formatX?: (v: number) => string;\n formatY?: (v: number) => string;\n height?: number;\n ariaLabel?: string;\n tone?: BjorkTone;\n attract?: boolean;\n className?: string;\n}\n\nconst LEFT = 44;\nconst BOTTOM = 40;\nconst MARGIN_H = 42;\nconst MARGIN_GAP = 8;\nconst TOP_TEXT = 26;\nconst RADIUS = 2.4;\nconst ALPHA_TAU = 0.09;\nconst BAR_TAU = 0.1;\nconst ENTER_MS = 900;\nconst HANDLE = 8;\nconst X_LABELS = 10;\nconst Y_LABELS = 8;\nconst ATTRACT_IDLE_MS = 4000;\n\nconst clock = () => performance.now();\nconst defaultFormat = (v: number) => formatNumber(v, 1);\n// Correlation with a true minus and no plus sign.\nconst fmtR = (v: number) => (v < 0 ? `−${formatFixed(-v, 2)}` : formatFixed(v, 2));\n\ninterface Stats {\n n: number;\n mx: number;\n my: number;\n r: number;\n /** Least-squares fit y = a + b·x, and the x range it covers. */\n a: number;\n b: number;\n xMin: number;\n xMax: number;\n}\n\nfunction statsOf(points: ScatterPoint[], idx: number[] | null): Stats {\n const list = idx ?? points.map((_, i) => i);\n const n = list.length;\n if (!n) return { n: 0, mx: NaN, my: NaN, r: NaN, a: NaN, b: NaN, xMin: NaN, xMax: NaN };\n let sx = 0;\n let sy = 0;\n for (const i of list) {\n sx += points[i].x;\n sy += points[i].y;\n }\n const mx = sx / n;\n const my = sy / n;\n let cxy = 0;\n let cxx = 0;\n let cyy = 0;\n let xMin = Infinity;\n let xMax = -Infinity;\n for (const i of list) {\n const dx = points[i].x - mx;\n const dy = points[i].y - my;\n cxy += dx * dy;\n cxx += dx * dx;\n cyy += dy * dy;\n if (points[i].x < xMin) xMin = points[i].x;\n if (points[i].x > xMax) xMax = points[i].x;\n }\n const b = cxx ? cxy / cxx : NaN;\n return { n, mx, my, r: cxx && cyy ? cxy / Math.sqrt(cxx * cyy) : NaN, a: my - b * mx, b, xMin, xMax };\n}\n\nfunction inBrush(p: ScatterPoint, b: Brush | null): boolean {\n if (!b) return true;\n return p.x >= Math.min(b.x0, b.x1) && p.x <= Math.max(b.x0, b.x1) && p.y >= Math.min(b.y0, b.y1) && p.y <= Math.max(b.y0, b.y1);\n}\n\ntype DragMode = \"new\" | \"move\" | \"n\" | \"s\" | \"e\" | \"w\" | \"ne\" | \"nw\" | \"se\" | \"sw\";\n\ninterface Run {\n enter: number;\n alpha: Float32Array;\n order: Float32Array; // entrance delay 0..1, by distance from the centroid\n barsX: number[];\n barsY: number[];\n selX: number[];\n selY: number[];\n ready: boolean;\n plot: { l: number; r: number; t: number; b: number };\n hover: number | null;\n drag: null | { mode: DragMode; id: number; sx: number; sy: number; start: Brush | null };\n grid: Map;\n gridKey: string;\n xCache: string[];\n yCache: string[];\n lastInput: number;\n attractT: number;\n}\n\nexport function ScatterBrush({\n points,\n xLabel = \"x\",\n yLabel = \"y\",\n xDomain,\n yDomain,\n brush: brushProp,\n defaultBrush = null,\n onBrushChange,\n marginals = true,\n bins = 32,\n trend = false,\n formatX = defaultFormat,\n formatY = defaultFormat,\n height = 420,\n ariaLabel = \"Scatter plot\",\n tone: toneProp,\n attract = false,\n className,\n}: ScatterBrushProps) {\n const { pal, reduce, vars } = useChartTheme(toneProp);\n const announcer = useRef(null);\n const tipRef = useRef(null);\n const wrapperRef = useRef(null);\n const xPool = useRef<(HTMLSpanElement | null)[]>([]);\n const yPool = useRef<(HTMLSpanElement | null)[]>([]);\n const rectRef = useRef(null);\n const [brushState, setBrushState] = useState(defaultBrush);\n const brush = brushProp !== undefined ? brushProp : brushState;\n\n const dom = useMemo(() => {\n let x0 = Infinity;\n let x1 = -Infinity;\n let y0 = Infinity;\n let y1 = -Infinity;\n for (const p of points) {\n x0 = Math.min(x0, p.x);\n x1 = Math.max(x1, p.x);\n y0 = Math.min(y0, p.y);\n y1 = Math.max(y1, p.y);\n }\n if (!Number.isFinite(x0)) return { x: [0, 1] as [number, number], y: [0, 1] as [number, number] };\n return { x: xDomain ?? niceDomain(x0, x1, 6), y: yDomain ?? niceDomain(y0, y1, 6) };\n }, [points, xDomain, yDomain]);\n\n const selected = useMemo(() => (brush ? points.map((p, i) => (inBrush(p, brush) ? i : -1)).filter((i) => i >= 0) : null), [points, brush]);\n const stats = useMemo(() => statsOf(points, selected), [points, selected]);\n\n const cfg = useRef({ points, dom, brush, marginals, bins, reduce, pal, attract, trend, stats });\n useEffect(() => {\n cfg.current = { points, dom, brush, marginals, bins, reduce, pal, attract, trend, stats };\n });\n\n const st = useRef({\n enter: 0,\n alpha: new Float32Array(0),\n order: new Float32Array(0),\n barsX: [],\n barsY: [],\n selX: [],\n selY: [],\n ready: false,\n plot: { l: 0, r: 0, t: 0, b: 0 },\n hover: null,\n drag: null,\n grid: new Map(),\n gridKey: \"\",\n xCache: [],\n yCache: [],\n lastInput: 0,\n attractT: 0,\n });\n const brushSetter = useRef<(b: Brush | null, announce: boolean) => 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 P = c.points;\n const n = P.length;\n const mH = c.marginals ? MARGIN_H + MARGIN_GAP : 0;\n const plot = { l: LEFT, r: w - mH - 6, t: TOP_TEXT + mH, b: h - BOTTOM };\n s.plot = plot;\n const [x0, x1] = c.dom.x;\n const [y0, y1] = c.dom.y;\n const xOf = (v: number) => plot.l + ((v - x0) / (x1 - x0)) * (plot.r - plot.l);\n const yOf = (v: number) => plot.b - ((v - y0) / (y1 - y0)) * (plot.b - plot.t);\n\n if (s.alpha.length !== n) {\n s.alpha = new Float32Array(n).fill(1);\n // Entrance order: a ripple out from the centroid.\n let cx = 0;\n let cy = 0;\n for (const pt of P) {\n cx += pt.x;\n cy += pt.y;\n }\n cx /= Math.max(1, n);\n cy /= Math.max(1, n);\n const d = P.map((pt) => Math.hypot((pt.x - cx) / (x1 - x0), (pt.y - cy) / (y1 - y0)));\n const dMax = Math.max(1e-9, ...d);\n s.order = Float32Array.from(d.map((v) => v / dMax));\n s.enter = c.reduce ? 1 : 0;\n }\n const gkey = `${n}|${w}|${h}|${x0}|${x1}|${y0}|${y1}`;\n if (gkey !== s.gridKey) {\n s.gridKey = gkey;\n s.grid = new Map();\n for (let i = 0; i < n; i++) {\n const key = Math.floor(xOf(P[i].x) / 16) * 10007 + Math.floor(yOf(P[i].y) / 16);\n const list = s.grid.get(key);\n if (list) list.push(i);\n else s.grid.set(key, [i]);\n }\n }\n\n // Attract: a brush that sweeps across the cloud.\n if (c.attract && !c.reduce && (!s.lastInput || clock() - s.lastInput > ATTRACT_IDLE_MS)) {\n s.attractT += dt;\n const u = 0.5 - 0.5 * Math.cos(s.attractT * 0.5);\n const bw = (x1 - x0) * 0.28;\n const bh = (y1 - y0) * 0.4;\n const bx = x0 + (x1 - x0 - bw) * u;\n const by = y0 + (y1 - y0 - bh) * (0.5 + 0.35 * Math.sin(s.attractT * 0.35));\n c.brush = { x0: bx, x1: bx + bw, y0: by, y1: by + bh };\n }\n const B = c.brush;\n\n let moving = false;\n for (let i = 0; i < n; i++) {\n const target = !B || inBrush(P[i], B) ? 1 : 0;\n if (c.reduce || !s.ready) s.alpha[i] = target;\n else {\n s.alpha[i] = damp(s.alpha[i], target, ALPHA_TAU, dt);\n if (Math.abs(s.alpha[i] - target) > 0.01) moving = true;\n else s.alpha[i] = target;\n }\n }\n\n s.enter = c.reduce ? 1 : Math.min(1, s.enter + (dt * 1000) / ENTER_MS);\n\n // Grid and axes.\n const xt = niceTicks(x0, x1, Math.max(3, Math.floor((plot.r - plot.l) / 90)));\n const yt = niceTicks(y0, y1, Math.max(3, Math.floor((plot.b - plot.t) / 60)));\n ctx.strokeStyle = p.hair;\n ctx.lineWidth = 1;\n ctx.beginPath();\n for (const v of xt) {\n ctx.moveTo(crisp(xOf(v)), plot.t);\n ctx.lineTo(crisp(xOf(v)), plot.b);\n }\n for (const v of yt) {\n ctx.moveTo(plot.l, crisp(yOf(v)));\n ctx.lineTo(plot.r, crisp(yOf(v)));\n }\n ctx.stroke();\n writeLabels(xPool.current, s.xCache, xt.map((v) => ({ text: formatX(v), x: xOf(v), y: plot.b + 13, ax: -50 })));\n writeLabels(yPool.current, s.yCache, yt.map((v) => ({ text: formatY(v), x: plot.l - 8, y: yOf(v), ax: -100 })));\n\n // Marginal histograms: everything as a ghost, the selection in the accent.\n if (c.marginals) {\n const nb = c.bins;\n const cx = new Array(nb).fill(0);\n const cy = new Array(nb).fill(0);\n const sx = new Array(nb).fill(0);\n const sy = new Array(nb).fill(0);\n for (let i = 0; i < n; i++) {\n const bx = clamp(Math.floor(((P[i].x - x0) / (x1 - x0)) * nb), 0, nb - 1);\n const by = clamp(Math.floor(((P[i].y - y0) / (y1 - y0)) * nb), 0, nb - 1);\n cx[bx]++;\n cy[by]++;\n if (!B || inBrush(P[i], B)) {\n sx[bx]++;\n sy[by]++;\n }\n }\n const mx = Math.max(1, ...cx);\n const my = Math.max(1, ...cy);\n const step = (arr: number[], target: number[]) => {\n for (let k = 0; k < nb; k++) {\n if (arr[k] === undefined || c.reduce || !s.ready) arr[k] = target[k];\n else {\n arr[k] = damp(arr[k], target[k], BAR_TAU, dt);\n if (Math.abs(arr[k] - target[k]) > 0.02) moving = true;\n }\n }\n arr.length = nb;\n };\n step(s.barsX, cx);\n step(s.barsY, cy);\n step(s.selX, sx);\n step(s.selY, sy);\n const e = easeOut(s.enter);\n const bwx = (plot.r - plot.l) / nb;\n const bwy = (plot.b - plot.t) / nb;\n const topBase = plot.t - MARGIN_GAP;\n const rightBase = plot.r + MARGIN_GAP;\n for (let k = 0; k < nb; k++) {\n const x = plot.l + k * bwx + 1;\n const hAll = (s.barsX[k] / mx) * MARGIN_H * e;\n const hSel = (s.selX[k] / mx) * MARGIN_H * e;\n ctx.fillStyle = withAlpha(p.text, 0.12);\n ctx.fillRect(x, topBase - hAll, Math.max(1, bwx - 2), hAll);\n if (B) {\n ctx.fillStyle = withAlpha(p.accent, 0.66);\n ctx.fillRect(x, topBase - hSel, Math.max(1, bwx - 2), hSel);\n }\n const y = plot.b - (k + 1) * bwy + 1;\n const wAll = (s.barsY[k] / my) * MARGIN_H * e;\n const wSel = (s.selY[k] / my) * MARGIN_H * e;\n ctx.fillStyle = withAlpha(p.text, 0.12);\n ctx.fillRect(rightBase, y, wAll, Math.max(1, bwy - 2));\n if (B) {\n ctx.fillStyle = withAlpha(p.accent, 0.66);\n ctx.fillRect(rightBase, y, wSel, Math.max(1, bwy - 2));\n }\n }\n }\n s.ready = true;\n\n // Points: unselected first, selected on top.\n const e = s.enter;\n for (let pass = 0; pass < 2; pass++) {\n for (let i = 0; i < n; i++) {\n const a = s.alpha[i];\n if (pass === 0 ? a > 0.5 : a <= 0.5) continue;\n const k = e >= 1 ? 1 : clamp((e - s.order[i] * 0.55) / 0.45, 0, 1);\n if (k <= 0) continue;\n // No brush: all ink. With a brush: selected points in the accent, the rest fade back.\n if (!B) ctx.fillStyle = withAlpha(p.text, 0.38);\n else ctx.fillStyle = a > 0.5 ? withAlpha(p.accent, 0.3 + 0.55 * a) : withAlpha(p.text, 0.1 + 0.2 * a);\n ctx.globalAlpha = k;\n ctx.beginPath();\n ctx.arc(xOf(P[i].x), yOf(P[i].y), RADIUS * (0.6 + 0.4 * k), 0, Math.PI * 2);\n ctx.fill();\n }\n }\n ctx.globalAlpha = 1;\n\n // Brush.\n if (B) {\n const bx0 = xOf(Math.min(B.x0, B.x1));\n const bx1 = xOf(Math.max(B.x0, B.x1));\n const by0 = yOf(Math.max(B.y0, B.y1));\n const by1 = yOf(Math.min(B.y0, B.y1));\n ctx.fillStyle = withAlpha(p.accent, 0.06);\n ctx.fillRect(bx0, by0, bx1 - bx0, by1 - by0);\n ctx.strokeStyle = p.accentInk;\n ctx.lineWidth = 1;\n ctx.strokeRect(Math.round(bx0) + 0.5, Math.round(by0) + 0.5, Math.round(bx1 - bx0), Math.round(by1 - by0));\n ctx.fillStyle = p.accent;\n for (const [hx, hy] of [\n [bx0, by0],\n [bx1, by0],\n [bx0, by1],\n [bx1, by1],\n ]) {\n ctx.fillRect(Math.round(hx) - 3, Math.round(hy) - 3, 6, 6);\n }\n // Guides from the brush into the marginals.\n if (c.marginals) {\n ctx.strokeStyle = withAlpha(p.accentInk, 0.35);\n ctx.setLineDash([2, 3]);\n ctx.beginPath();\n ctx.moveTo(crisp(bx0), by0);\n ctx.lineTo(crisp(bx0), plot.t - MARGIN_GAP - MARGIN_H);\n ctx.moveTo(crisp(bx1), by0);\n ctx.lineTo(crisp(bx1), plot.t - MARGIN_GAP - MARGIN_H);\n ctx.moveTo(bx1, crisp(by0));\n ctx.lineTo(plot.r + MARGIN_GAP + MARGIN_H, crisp(by0));\n ctx.moveTo(bx1, crisp(by1));\n ctx.lineTo(plot.r + MARGIN_GAP + MARGIN_H, crisp(by1));\n ctx.stroke();\n ctx.setLineDash([]);\n }\n }\n\n // Trend line: the least-squares fit over the selection, only across the x range it covers.\n // During attract the brush moves without re-rendering, so the fit is skipped there.\n const F = c.stats;\n const attracting = c.attract && !c.reduce && (!s.lastInput || clock() - s.lastInput > ATTRACT_IDLE_MS);\n if (c.trend && !attracting && F.n >= 3 && Number.isFinite(F.b) && F.xMax > F.xMin && e >= 1) {\n ctx.save();\n ctx.beginPath();\n ctx.rect(plot.l, plot.t, plot.r - plot.l, plot.b - plot.t);\n ctx.clip();\n const ax = xOf(F.xMin);\n const ay = yOf(F.a + F.b * F.xMin);\n const bx = xOf(F.xMax);\n const by = yOf(F.a + F.b * F.xMax);\n ctx.lineCap = \"round\";\n ctx.beginPath();\n ctx.moveTo(ax, ay);\n ctx.lineTo(bx, by);\n ctx.strokeStyle = withAlpha(p.stage, 0.85);\n ctx.lineWidth = 4.5;\n ctx.stroke();\n ctx.strokeStyle = B ? p.accentInk : p.text;\n ctx.lineWidth = 1.75;\n ctx.stroke();\n ctx.restore();\n }\n\n // Hovered point.\n const tip = tipRef.current;\n if (s.hover !== null && P[s.hover]) {\n const hx = xOf(P[s.hover].x);\n const hy = yOf(P[s.hover].y);\n ctx.beginPath();\n ctx.arc(hx, hy, 5, 0, Math.PI * 2);\n ctx.lineWidth = 1.5;\n ctx.strokeStyle = p.text;\n ctx.stroke();\n if (tip?.el) {\n const pos = placeTooltip(hx, hy, tip.size.w, tip.size.h, w, h, 12);\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)) return true;\n return moving || s.enter < 1 || !!s.drag;\n });\n\n const fit = (st2: Stats) =>\n trend && Number.isFinite(st2.b) && Number.isFinite(st2.r)\n ? `, r squared ${formatFixed(st2.r * st2.r, 2)}, trend ${formatSigned(st2.b, (v) => formatNumber(v, 2))} ${yLabel} per ${xLabel}`\n : \"\";\n const describeStats = (st2: Stats) =>\n `${st2.n} of ${points.length} selected${st2.n ? `, mean ${xLabel} ${formatX(st2.mx)}, mean ${yLabel} ${formatY(st2.my)}${Number.isFinite(st2.r) ? `, correlation ${fmtR(st2.r)}` : \"\"}${fit(st2)}` : \"\"}`;\n\n const setBrush = (b: Brush | null, announce = false) => {\n if (brushProp === undefined) setBrushState(b);\n const sel = b ? points.map((p, i) => (inBrush(p, b) ? i : -1)).filter((i) => i >= 0) : [];\n onBrushChange?.(b, sel);\n cfg.current.brush = b;\n if (announce) announcer.current?.say(b ? describeStats(statsOf(points, sel)) : \"Selection cleared\");\n wake();\n };\n useEffect(() => {\n brushSetter.current = setBrush;\n });\n\n useEffect(() => {\n wake();\n }, [points, dom, brush, marginals, bins, pal, reduce, attract, trend, stats, wake]);\n\n const tooltipFor = (i: number): TooltipContent | null => {\n const pt = points[i];\n if (!pt) return null;\n return {\n key: `${i}|${pal.text}`,\n title: pt.label,\n rows: [\n { key: \"x\", label: xLabel, value: formatX(pt.x) },\n { key: \"y\", label: yLabel, value: formatY(pt.y) },\n ],\n };\n };\n\n const setHover = (i: number | null) => {\n const s = st.current;\n if (s.hover === i) return;\n s.hover = i;\n tipRef.current?.set(i === null ? null : tooltipFor(i));\n wake();\n };\n\n const local = (e: PointerEvent) => {\n const r = rectRef.current ?? wrapperRef.current?.getBoundingClientRect();\n return r ? { x: e.clientX - r.left, y: e.clientY - r.top } : null;\n };\n const toData = (px: number, py: number) => {\n const s = st.current;\n const [x0, x1] = dom.x;\n const [y0, y1] = dom.y;\n return {\n x: clamp(x0 + ((px - s.plot.l) / (s.plot.r - s.plot.l)) * (x1 - x0), x0, x1),\n y: clamp(y0 + ((s.plot.b - py) / (s.plot.b - s.plot.t)) * (y1 - y0), y0, y1),\n };\n };\n const toPx = (b: Brush) => {\n const s = st.current;\n const [x0, x1] = dom.x;\n const [y0, y1] = dom.y;\n const X = (v: number) => s.plot.l + ((v - x0) / (x1 - x0)) * (s.plot.r - s.plot.l);\n const Y = (v: number) => s.plot.b - ((v - y0) / (y1 - y0)) * (s.plot.b - s.plot.t);\n return { l: X(Math.min(b.x0, b.x1)), r: X(Math.max(b.x0, b.x1)), t: Y(Math.max(b.y0, b.y1)), b: Y(Math.min(b.y0, b.y1)) };\n };\n const modeAt = (px: number, py: number): DragMode | null => {\n if (!brush) return null;\n const r = toPx(brush);\n const nearL = Math.abs(px - r.l) < HANDLE;\n const nearR = Math.abs(px - r.r) < HANDLE;\n const nearT = Math.abs(py - r.t) < HANDLE;\n const nearB = Math.abs(py - r.b) < HANDLE;\n const inX = px > r.l - HANDLE && px < r.r + HANDLE;\n const inY = py > r.t - HANDLE && py < r.b + HANDLE;\n if (!inX || !inY) return null;\n if (nearT && nearL) return \"nw\";\n if (nearT && nearR) return \"ne\";\n if (nearB && nearL) return \"sw\";\n if (nearB && nearR) return \"se\";\n if (nearL) return \"w\";\n if (nearR) return \"e\";\n if (nearT) return \"n\";\n if (nearB) return \"s\";\n return \"move\";\n };\n const cursorFor: Record = { move: \"move\", n: \"ns-resize\", s: \"ns-resize\", e: \"ew-resize\", w: \"ew-resize\", ne: \"nesw-resize\", sw: \"nesw-resize\", nw: \"nwse-resize\", se: \"nwse-resize\" };\n\n const onPointerDown = (e: PointerEvent) => {\n st.current.lastInput = clock();\n if (wrapperRef.current) rectRef.current = wrapperRef.current.getBoundingClientRect();\n const pt = local(e);\n if (!pt) return;\n const s = st.current;\n if (pt.x < s.plot.l - HANDLE || pt.x > s.plot.r + HANDLE || pt.y < s.plot.t - HANDLE || pt.y > s.plot.b + HANDLE) return;\n const mode = modeAt(pt.x, pt.y) ?? \"new\";\n s.drag = { mode, id: e.pointerId, sx: pt.x, sy: pt.y, start: brush };\n e.currentTarget.setPointerCapture(e.pointerId);\n setHover(null);\n wake();\n };\n\n const onPointerMove = (e: PointerEvent) => {\n st.current.lastInput = clock();\n const pt = local(e);\n if (!pt) return;\n const s = st.current;\n const d = s.drag;\n if (d && d.id === e.pointerId) {\n const a = toData(d.sx, d.sy);\n const b = toData(pt.x, pt.y);\n if (d.mode === \"new\") {\n if (Math.abs(pt.x - d.sx) < 3 && Math.abs(pt.y - d.sy) < 3) return;\n setBrush({ x0: a.x, x1: b.x, y0: a.y, y1: b.y });\n return;\n }\n const sb = d.start;\n if (!sb) return;\n const dx = b.x - a.x;\n const dy = b.y - a.y;\n const nb = { x0: Math.min(sb.x0, sb.x1), x1: Math.max(sb.x0, sb.x1), y0: Math.min(sb.y0, sb.y1), y1: Math.max(sb.y0, sb.y1) };\n if (d.mode === \"move\") {\n const w = nb.x1 - nb.x0;\n const hh = nb.y1 - nb.y0;\n const x0 = clamp(nb.x0 + dx, dom.x[0], dom.x[1] - w);\n const y0 = clamp(nb.y0 + dy, dom.y[0], dom.y[1] - hh);\n setBrush({ x0, x1: x0 + w, y0, y1: y0 + hh });\n return;\n }\n if (d.mode.includes(\"w\")) nb.x0 = Math.min(nb.x1, nb.x0 + dx);\n if (d.mode.includes(\"e\")) nb.x1 = Math.max(nb.x0, nb.x1 + dx);\n if (d.mode.includes(\"s\")) nb.y0 = Math.min(nb.y1, nb.y0 + dy);\n if (d.mode.includes(\"n\")) nb.y1 = Math.max(nb.y0, nb.y1 + dy);\n setBrush(nb);\n return;\n }\n if (wrapperRef.current) wrapperRef.current.style.cursor = cursorFor[modeAt(pt.x, pt.y) ?? \"\"] ?? \"crosshair\";\n // Nearest point within 16px.\n const cx = Math.floor(pt.x / 16);\n const cy = Math.floor(pt.y / 16);\n const [x0, x1] = dom.x;\n const [y0, y1] = dom.y;\n let best = -1;\n let bd = 16 * 16;\n for (let gx = cx - 1; gx <= cx + 1; gx++)\n for (let gy = cy - 1; gy <= cy + 1; gy++) {\n const list = s.grid.get(gx * 10007 + gy);\n if (!list) continue;\n for (const i of list) {\n const px = s.plot.l + ((points[i].x - x0) / (x1 - x0)) * (s.plot.r - s.plot.l);\n const py = s.plot.b - ((points[i].y - y0) / (y1 - y0)) * (s.plot.b - s.plot.t);\n const dd = (px - pt.x) ** 2 + (py - pt.y) ** 2;\n if (dd < bd) {\n bd = dd;\n best = i;\n }\n }\n }\n setHover(best >= 0 ? best : null);\n };\n\n const endDrag = (e: PointerEvent) => {\n const s = st.current;\n if (s.drag && s.drag.id === e.pointerId) {\n // A click without a drag on empty space clears the brush.\n const moved = Math.abs((local(e)?.x ?? s.drag.sx) - s.drag.sx) > 3 || Math.abs((local(e)?.y ?? s.drag.sy) - s.drag.sy) > 3;\n if (s.drag.mode === \"new\" && !moved) setBrush(null, true);\n else announcer.current?.say(describeStats(statsOf(points, brush ? points.map((p, i) => (inBrush(p, brush) ? i : -1)).filter((i) => i >= 0) : null)));\n s.drag = null;\n wake();\n }\n };\n\n const onKeyDown = (e: KeyboardEvent) => {\n st.current.lastInput = clock();\n const [x0, x1] = dom.x;\n const [y0, y1] = dom.y;\n if (e.key === \"Escape\") {\n if (!brush) return;\n e.preventDefault();\n setBrush(null, true);\n return;\n }\n // Enter, or the first arrow press, drops a selection in the middle so the keys have something to move.\n if (!brush && (e.key === \"Enter\" || e.key.startsWith(\"Arrow\"))) {\n e.preventDefault();\n const w = (x1 - x0) * 0.3;\n const hh = (y1 - y0) * 0.3;\n const cx = (x0 + x1) / 2;\n const cy = (y0 + y1) / 2;\n setBrush({ x0: cx - w / 2, x1: cx + w / 2, y0: cy - hh / 2, y1: cy + hh / 2 }, true);\n return;\n }\n if (!brush || !e.key.startsWith(\"Arrow\")) return;\n e.preventDefault();\n const f = e.shiftKey ? 0.1 : 0.02;\n const dx = (e.key === \"ArrowLeft\" ? -1 : e.key === \"ArrowRight\" ? 1 : 0) * (x1 - x0) * f;\n const dy = (e.key === \"ArrowDown\" ? -1 : e.key === \"ArrowUp\" ? 1 : 0) * (y1 - y0) * f;\n const nb = { x0: Math.min(brush.x0, brush.x1), x1: Math.max(brush.x0, brush.x1), y0: Math.min(brush.y0, brush.y1), y1: Math.max(brush.y0, brush.y1) };\n if (e.altKey) {\n // Alt resizes from the top-right corner.\n nb.x1 = clamp(nb.x1 + dx, nb.x0 + (x1 - x0) * 0.02, x1);\n nb.y1 = clamp(nb.y1 + dy, nb.y0 + (y1 - y0) * 0.02, y1);\n } else {\n const w = nb.x1 - nb.x0;\n const hh = nb.y1 - nb.y0;\n nb.x0 = clamp(nb.x0 + dx, x0, x1 - w);\n nb.x1 = nb.x0 + w;\n nb.y0 = clamp(nb.y0 + dy, y0, y1 - hh);\n nb.y1 = nb.y0 + hh;\n }\n setBrush(nb, true);\n };\n\n const tableRows = useMemo(() => points.slice(0, 400).map((pt, i) => [pt.label ?? `#${i + 1}`, formatX(pt.x), formatY(pt.y)]), [points, formatX, formatY]);\n const tableCols = useMemo(() => [\"Point\", xLabel, yLabel], [xLabel, yLabel]);\n\n return (\n
\n {\n if (wrapperRef.current) rectRef.current = wrapperRef.current.getBoundingClientRect();\n }}\n onPointerDown={onPointerDown}\n onPointerMove={onPointerMove}\n onPointerUp={endDrag}\n onPointerCancel={endDrag}\n onPointerLeave={() => setHover(null)}\n onKeyDown={onKeyDown}\n className={cn(\"absolute inset-0 cursor-crosshair touch-none rounded-[10px]\", chartFocusRing)}\n >\n
\n \n
\n {/* Readout: count, means and correlation of the selection (or everything). */}\n
\n \n n {formatNumber(stats.n, 0)}\n / {formatNumber(points.length, 0)}\n \n \n x̄ {stats.n ? formatX(stats.mx) : \"–\"}\n \n \n ȳ {stats.n ? formatY(stats.my) : \"–\"}\n \n \n r {Number.isFinite(stats.r) ? fmtR(stats.r) : \"–\"}\n \n {trend && (\n \n r² {Number.isFinite(stats.r) ? formatFixed(stats.r * stats.r, 2) : \"–\"}\n \n )}\n
\n \n {xLabel} {\"→\"}\n \n \n {yLabel} {\"→\"}\n \n \n \n \n
\n \n \n \n );\n}\n\n// Seeded demo cloud: two overlapping clusters with different slopes.\nexport function createScatterCloud(seed: number, n = 1500): ScatterPoint[] {\n const rnd = mulberry32(seed);\n return Array.from({ length: n }, (_, i) => {\n const a = rnd() < 0.62;\n const x = a ? 3.2 + gaussian(rnd) * 1.1 : 6.6 + gaussian(rnd) * 0.9;\n const y = a ? 38 + (x - 3.2) * 7 + gaussian(rnd) * 7 : 74 - (x - 6.6) * 4 + gaussian(rnd) * 6;\n return { x: clamp(x, 0.2, 9.8), y: clamp(y, 4, 98), label: `Session ${i + 1}` };\n });\n}\n", "type": "registry:component", "target": "@components/bjork-ui/charts/scatter-brush.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/scatter-brush.json", "installCommand": "npx shadcn@latest add https://ui.isaiahbjork.com/scatter-brush.json" }, "type": "registry:component" }