{ "$schema": "https://ui.shadcn.com/schema/registry-item.json", "name": "donut-chart", "title": "Donut chart", "description": "Donut 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/donut-chart.tsx", "content": "\"use client\";\n\nimport { useEffect, useLayoutEffect, useMemo, useRef, type CSSProperties, type KeyboardEvent, type PointerEvent } from \"react\";\nimport { cn } from \"@/lib/utils\";\nimport type { BjorkTone } from \"@/components/bjork-ui/_core/palette\";\nimport { useChartCanvas, easeOut } from \"@/components/bjork-ui/charts/_kit/canvas\";\nimport { useChartTheme, chartFocusRing, ChartTable, LegendKey, ChartAnnouncer, type AnnouncerHandle } from \"@/components/bjork-ui/charts/_kit/chrome\";\nimport { clamp, damp, formatCompact, formatPercent, formatSigned } from \"@/components/bjork-ui/charts/_kit/scale\";\nimport { CHART_OTHER, MAX_SERIES, foldSeries, seriesColor } from \"@/components/bjork-ui/charts/_kit/series\";\n\nexport interface DonutSlice {\n /** Stable id. Animation, hover and the posed `activeId` follow it. */\n id: string;\n label: string;\n /** Non-negative. Negative and non-finite values count as zero (a part-to-whole has no negative parts). */\n value: number;\n /** The same part last period. When any slice has one, the legend adds a signed change column. */\n previous?: number;\n}\n\nexport interface DonutChartProps {\n data: DonutSlice[];\n /**\n * Clockwise order from 12 o'clock. \"value\" (default) puts the largest first; \"data\" keeps the\n * caller's order. A folded \"Other\" is always last.\n */\n sort?: \"value\" | \"data\";\n /**\n * Most slices drawn, 2 to 6 (default 6). Past that the smallest parts fold into one neutral\n * \"Other\" slice; the table twin still lists each folded part.\n *\n * Colour: when sorted by value, the largest kept slice takes the first series colour (the ember\n * accent) and the rest follow by size. When sorted by data, kept slices take the series order by\n * their position in `data`. \"Other\" always takes the neutral `CHART_OTHER`.\n */\n maxSlices?: number;\n otherLabel?: string;\n /** Header of the legend's label column, e.g. \"Plan\" or \"Source\". */\n legendTitle?: string;\n /** Header of the change column when `previous` values exist. */\n previousLabel?: string;\n /** Caption in the ring centre when nothing is active. */\n centerLabel?: string;\n /** \"auto\" (default) sits the legend beside the ring and stacks it underneath when narrow. */\n legend?: \"auto\" | \"bottom\" | \"none\";\n formatValue?: (v: number) => string;\n /** Formats a share in 0..1. */\n formatShare?: (v: number) => string;\n /** Posed or controlled active slice id. `null` clears; `undefined` leaves hover uncontrolled. */\n activeId?: string | null;\n onActiveChange?: (id: string | null) => void;\n /** Ring diameter in px. The ring scales down with the container. */\n height?: number;\n /** Inner radius as a fraction of the outer, 0.4 to 0.85. */\n innerRadius?: number;\n ariaLabel?: string;\n tone?: BjorkTone;\n className?: string;\n}\n\ninterface Slice {\n id: string;\n label: string;\n value: number;\n share: number;\n previous: number | null;\n color: string;\n other: boolean;\n /** Folded parts, for Other. */\n members: { label: string; value: number; previous: number | null }[];\n}\n\nconst PUSH = 6;\nconst GAP = 2;\nconst ENTER_MS = 900;\nconst ANGLE_TAU = 0.16;\nconst HOVER_TAU = 0.08;\nconst DIM = 0.36;\nconst TAU = Math.PI * 2;\nconst TOP = -Math.PI / 2;\n\nconst defaultFormatValue = (v: number) => formatCompact(v, 1);\nconst defaultFormatShare = (v: number) => formatPercent(v, 1);\nconst clean = (v: number | undefined) => (v !== undefined && Number.isFinite(v) && v > 0 ? v : 0);\n\nfunction buildSlices(data: DonutSlice[], sort: \"value\" | \"data\", max: number, otherLabel: string, tone: BjorkTone): { slices: Slice[]; total: number; prevTotal: number | null } {\n const rows = data.map((d, i) => ({ d, i, v: clean(d.value), p: d.previous === undefined || !Number.isFinite(d.previous) ? null : clean(d.previous) }));\n const total = rows.reduce((a, r) => a + r.v, 0);\n const hasPrev = rows.length > 0 && rows.every((r) => r.p !== null);\n const prevTotal = hasPrev ? rows.reduce((a, r) => a + (r.p ?? 0), 0) : null;\n // Rank by size (stable on data order) to decide what folds.\n const ranked = [...rows].sort((a, b) => b.v - a.v || a.i - b.i);\n type Row = (typeof rows)[number] & { folded?: typeof rows };\n const kept: Row[] = foldSeries(ranked, max, (rest) => ({\n d: { id: \"__other\", label: otherLabel, value: 0 },\n i: Number.MAX_SAFE_INTEGER,\n v: rest.reduce((a, r) => a + r.v, 0),\n p: rest.every((r) => r.p !== null) ? rest.reduce((a, r) => a + (r.p ?? 0), 0) : null,\n folded: rest,\n }));\n // Colour follows the sort: by size when sorted by value (kept is already ranked, so the largest\n // takes the accent), otherwise by position in the caller's data among the kept slices.\n const namedKept = kept.filter((r) => !r.folded);\n const colourOrder = sort === \"value\" ? namedKept : [...namedKept].sort((a, b) => a.i - b.i);\n const colourOf = new Map(colourOrder.map((r, k) => [r.d.id, seriesColor(tone, k)]));\n const ordered = sort === \"value\" ? kept : [...kept].sort((a, b) => a.i - b.i);\n const slices = ordered.map((r) => ({\n id: r.d.id,\n label: r.d.label,\n value: r.v,\n share: total > 0 ? r.v / total : 0,\n previous: r.p,\n color: r.folded ? CHART_OTHER[tone] : (colourOf.get(r.d.id) ?? CHART_OTHER[tone]),\n other: !!r.folded,\n members: r.folded ? r.folded.map((m) => ({ label: m.d.label, value: m.v, previous: m.p })) : [],\n }));\n return { slices, total, prevTotal };\n}\n\nfunction changeText(v: number, prev: number | null, fmt: (v: number) => string): string {\n if (prev === null) return \"\";\n if (prev === 0) return v > 0 ? \"New\" : \"–\";\n return formatSigned((v - prev) / prev, fmt);\n}\nconst pctChange = (v: number) => formatPercent(v, 1);\n\n// An annular sector whose gaps stay `gap` px wide at every radius: each edge runs parallel to its\n// radial, offset by half the gap. Thin slices close to a point instead of crossing over.\nfunction sectorPath(ctx: CanvasRenderingContext2D, cx: number, cy: number, r0: number, r1: number, a0: number, a1: number, gap: number): boolean {\n const span = a1 - a0;\n if (span <= 0) return false;\n const h = gap / 2;\n const ao = Math.asin(Math.min(1, h / r1));\n if (span <= 2 * ao + 1e-4) return false;\n ctx.moveTo(cx + r1 * Math.cos(a0 + ao), cy + r1 * Math.sin(a0 + ao));\n ctx.arc(cx, cy, r1, a0 + ao, a1 - ao);\n const ai = r0 > h ? Math.asin(h / r0) : Math.PI / 2;\n if (span > 2 * ai) {\n ctx.lineTo(cx + r0 * Math.cos(a1 - ai), cy + r0 * Math.sin(a1 - ai));\n ctx.arc(cx, cy, r0, a1 - ai, a0 + ai, true);\n } else {\n const d = h / Math.sin(span / 2);\n if (d >= r1) return false;\n const m = (a0 + a1) / 2;\n ctx.lineTo(cx + d * Math.cos(m), cy + d * Math.sin(m));\n }\n ctx.closePath();\n return true;\n}\n\ninterface Disp {\n id: string;\n color: string;\n f0: number;\n f1: number;\n t0: number;\n t1: number;\n push: number;\n alpha: number;\n seen: number;\n}\n\ninterface Run {\n disp: Map;\n gen: number;\n enter: number;\n ready: boolean;\n hoverId: string | null;\n geom: { cx: number; cy: number; r0: number; r1: number };\n}\n\nexport function DonutChart({\n data,\n sort = \"value\",\n maxSlices = MAX_SERIES,\n otherLabel = \"Other\",\n legendTitle = \"Segment\",\n previousLabel = \"vs prev\",\n centerLabel = \"Total\",\n legend = \"auto\",\n formatValue = defaultFormatValue,\n formatShare = defaultFormatShare,\n activeId,\n onActiveChange,\n height = 240,\n innerRadius = 0.62,\n ariaLabel = \"Donut chart\",\n tone: toneProp,\n className,\n}: DonutChartProps) {\n const { tone, pal, reduce, vars } = useChartTheme(toneProp);\n const announcer = useRef(null);\n const ringRef = useRef(null);\n const rowRefs = useRef<(HTMLDivElement | null)[]>([]);\n const cLabel = useRef(null);\n const cValue = useRef(null);\n const cSub = useRef(null);\n const rectRef = useRef(null);\n\n const max = clamp(Math.round(maxSlices), 2, MAX_SERIES);\n const inner = clamp(innerRadius, 0.4, 0.85);\n const { slices, total, prevTotal } = useMemo(() => buildSlices(data, sort, max, otherLabel, tone), [data, sort, max, otherLabel, tone]);\n const hasPrev = prevTotal !== null;\n\n const cfg = useRef({ slices, total, reduce, pal, inner });\n useEffect(() => {\n cfg.current = { slices, total, reduce, pal, inner };\n });\n\n const st = useRef({ disp: new Map(), gen: 0, enter: 0, ready: false, hoverId: null, geom: { cx: 0, cy: 0, r0: 0, r1: 0 } });\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 cx = w / 2;\n const cy = h / 2;\n const r1 = Math.max(4, Math.min(w, h) / 2 - PUSH - 2);\n const r0 = r1 * c.inner;\n s.geom = { cx, cy, r0, r1 };\n\n if (c.reduce) s.enter = 1;\n else if (s.enter < 1) s.enter = Math.min(1, s.enter + (dt * 1000) / ENTER_MS);\n const sweep = s.enter >= 1 ? 1 : easeOut(s.enter);\n let moving = s.enter < 1;\n\n // Targets: running fractions of the turn, clockwise from 12 o'clock.\n const gen = ++s.gen;\n let acc = 0;\n const tot = c.total;\n for (let i = 0; i < c.slices.length; i++) {\n const sl = c.slices[i];\n const t0 = tot > 0 ? acc / tot : 0;\n acc += sl.value;\n const t1 = tot > 0 ? acc / tot : 0;\n let d = s.disp.get(sl.id);\n if (!d) {\n // First frame takes the layout as is (the sweep reveals it); later arrivals grow from their start.\n d = { id: sl.id, color: sl.color, f0: t0, f1: s.ready ? t0 : t1, t0, t1, push: 0, alpha: 1, seen: gen };\n s.disp.set(sl.id, d);\n }\n d.t0 = t0;\n d.t1 = t1;\n d.color = sl.color;\n d.seen = gen;\n }\n s.ready = true;\n\n const hov = s.hoverId;\n for (const d of s.disp.values()) {\n if (d.seen !== gen) {\n // Departed: collapse in place, then drop.\n if (d.t0 !== d.t1) d.t0 = d.t1 = (d.t0 + d.t1) / 2;\n }\n const pushT = hov === d.id && !c.reduce ? 1 : 0;\n const alphaT = hov === null || hov === d.id ? 1 : DIM;\n if (c.reduce) {\n d.f0 = d.t0;\n d.f1 = d.t1;\n d.push = pushT;\n d.alpha = alphaT;\n } else {\n d.f0 = damp(d.f0, d.t0, ANGLE_TAU, dt);\n d.f1 = damp(d.f1, d.t1, ANGLE_TAU, dt);\n d.push = damp(d.push, pushT, HOVER_TAU, dt);\n d.alpha = damp(d.alpha, alphaT, HOVER_TAU, dt);\n if (Math.abs(d.f0 - d.t0) + Math.abs(d.f1 - d.t1) > 2e-4 || Math.abs(d.push - pushT) + Math.abs(d.alpha - alphaT) > 4e-3) moving = true;\n else {\n d.f0 = d.t0;\n d.f1 = d.t1;\n d.push = pushT;\n d.alpha = alphaT;\n }\n }\n if (d.seen !== gen && d.f1 - d.f0 < 1e-4) s.disp.delete(d.id);\n }\n\n if (!(tot > 0)) {\n // Empty: a faint track so the chart still reads as a ring.\n ctx.fillStyle = p.hair;\n ctx.beginPath();\n ctx.arc(cx, cy, r1, 0, TAU);\n ctx.arc(cx, cy, r0, TAU, 0, true);\n ctx.fill();\n }\n\n const limit = sweep;\n let visible = 0;\n for (const d of s.disp.values()) if (d.f1 - d.f0 > 1e-4) visible++;\n for (const d of s.disp.values()) {\n const f0 = d.f0;\n const f1 = Math.min(d.f1, limit);\n if (f1 - f0 <= 1e-5) continue;\n const m = TOP + ((f0 + f1) / 2) * TAU;\n const off = d.push * PUSH;\n const ox = cx + Math.cos(m) * off;\n const oy = cy + Math.sin(m) * off;\n ctx.globalAlpha = d.alpha;\n ctx.fillStyle = d.color;\n ctx.beginPath();\n if (visible === 1 && f1 - f0 > 0.9999) {\n ctx.arc(ox, oy, r1, 0, TAU);\n ctx.arc(ox, oy, r0, TAU, 0, true);\n ctx.fill();\n } else if (sectorPath(ctx, ox, oy, r0, r1, TOP + f0 * TAU, TOP + f1 * TAU, GAP)) ctx.fill();\n // Reduced motion has no push-out, so the active slice gets an outer rule instead.\n if (c.reduce && hov === d.id) {\n ctx.globalAlpha = 1;\n ctx.strokeStyle = p.text;\n ctx.lineWidth = 2;\n ctx.beginPath();\n const a0 = TOP + f0 * TAU + GAP / (r1 + 4);\n const a1 = TOP + f1 * TAU - GAP / (r1 + 4);\n if (a1 > a0) {\n ctx.arc(cx, cy, r1 + 4, a0, a1);\n ctx.stroke();\n }\n }\n }\n ctx.globalAlpha = 1;\n return moving;\n });\n\n const writeCentre = (id: string | null) => {\n const L = cLabel.current;\n const V = cValue.current;\n const S = cSub.current;\n if (!L || !V || !S) return;\n const sl = id === null ? undefined : slices.find((x) => x.id === id);\n if (!sl) {\n L.textContent = centerLabel;\n V.textContent = formatValue(total);\n const chg = hasPrev ? changeText(total, prevTotal, pctChange) : \"\";\n S.textContent = chg ? `${chg} ${previousLabel}` : \"\";\n return;\n }\n L.textContent = sl.other ? `${sl.label} (${sl.members.length})` : sl.label;\n V.textContent = formatValue(sl.value);\n const chg = changeText(sl.value, sl.previous, pctChange);\n S.textContent = `${formatShare(sl.share)}${chg ? ` · ${chg}` : \"\"}`;\n };\n\n const writeRows = (id: string | null) => {\n slices.forEach((sl, i) => {\n const el = rowRefs.current[i];\n if (el) el.dataset.state = id === null ? \"\" : sl.id === id ? \"active\" : \"dim\";\n });\n };\n\n const announce = (sl: Slice, i: number) => {\n const chg = changeText(sl.value, sl.previous, pctChange);\n const name = sl.other ? `${sl.label}, ${sl.members.length} parts` : sl.label;\n announcer.current?.say(`${name}: ${formatValue(sl.value)}, ${formatShare(sl.share)} of total${chg ? `, ${chg} ${previousLabel}` : \"\"}. ${i + 1} of ${slices.length}.`);\n };\n\n const setHover = (id: string | null, source: \"pointer\" | \"keyboard\" | \"prop\" | null) => {\n const s = st.current;\n if (s.hoverId === id) return;\n s.hoverId = id;\n writeCentre(id);\n writeRows(id);\n if (id !== null && source === \"keyboard\") {\n const i = slices.findIndex((x) => x.id === id);\n if (i >= 0) announce(slices[i], i);\n }\n if (source !== \"prop\") onActiveChange?.(id);\n wake();\n };\n\n // Content and highlight follow data changes; an active slice that left the data clears.\n useLayoutEffect(() => {\n const s = st.current;\n if (s.hoverId !== null && !slices.some((x) => x.id === s.hoverId)) s.hoverId = null;\n writeCentre(s.hoverId);\n writeRows(s.hoverId);\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, [slices, total, formatValue, formatShare, centerLabel, previousLabel]);\n\n useEffect(() => {\n wake();\n }, [slices, pal, reduce, inner, wake]);\n\n useEffect(() => {\n if (activeId === undefined) return;\n setHover(activeId !== null && slices.some((x) => x.id === activeId) ? activeId : null, \"prop\");\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, [activeId, slices]);\n\n const hitTest = (clientX: number, clientY: number): string | null => {\n const rect = rectRef.current ?? ringRef.current?.getBoundingClientRect();\n if (!rect) return null;\n const { cx, cy, r0, r1 } = st.current.geom;\n const dx = clientX - rect.left - cx;\n const dy = clientY - rect.top - cy;\n const rho = Math.hypot(dx, dy);\n // Generous ring: a little inside the hole and past the pushed-out edge.\n if (rho < r0 - 8 || rho > r1 + PUSH + 8) return null;\n let f = (Math.atan2(dy, dx) - TOP) / TAU;\n f -= Math.floor(f);\n for (const d of st.current.disp.values()) if (f >= d.t0 && f < d.t1 && slices.some((x) => x.id === d.id)) return d.id;\n return null;\n };\n\n const onPointerMove = (e: PointerEvent) => setHover(hitTest(e.clientX, e.clientY), \"pointer\");\n\n const onKeyDown = (e: KeyboardEvent) => {\n // Zero slices draw no arc, so the keyboard steps over them.\n const steps = slices.filter((x) => x.value > 0);\n const n = steps.length;\n if (!n) return;\n const cur = steps.findIndex((x) => x.id === st.current.hoverId);\n let next: number | null = null;\n if (e.key === \"ArrowRight\" || e.key === \"ArrowDown\") next = cur < 0 ? 0 : (cur + 1) % n;\n else if (e.key === \"ArrowLeft\" || e.key === \"ArrowUp\") next = cur < 0 ? n - 1 : (cur - 1 + n) % n;\n else if (e.key === \"Home\") next = 0;\n else if (e.key === \"End\") next = n - 1;\n else if (e.key === \"Escape\") {\n if (st.current.hoverId !== null) {\n e.preventDefault();\n setHover(null, null);\n }\n return;\n }\n if (next === null) return;\n e.preventDefault();\n setHover(steps[next].id, \"keyboard\");\n };\n\n const tableCols = useMemo(() => [legendTitle, \"Value\", \"Share\", ...(hasPrev ? [\"Previous\", `Change ${previousLabel}`] : [])], [legendTitle, hasPrev, previousLabel]);\n const tableRows = useMemo(() => {\n const out: (string | number)[][] = [];\n const row = (label: string, v: number, share: number, prev: number | null) => [\n label,\n formatValue(v),\n formatShare(share),\n ...(hasPrev ? [prev === null ? \"–\" : formatValue(prev), changeText(v, prev, pctChange) || \"–\"] : []),\n ];\n for (const sl of slices) {\n out.push(row(sl.other ? `${sl.label} (${sl.members.length} parts)` : sl.label, sl.value, sl.share, sl.previous));\n for (const m of sl.members) out.push(row(`${m.label} (in ${sl.label})`, m.value, total > 0 ? m.value / total : 0, m.previous));\n }\n out.push(row(\"Total\", total, total > 0 ? 1 : 0, prevTotal));\n return out;\n }, [slices, total, prevTotal, hasPrev, formatValue, formatShare]);\n\n const largest = slices.reduce((a, b) => (!a || b.value > a.value ? b : a), null);\n const summary =\n total > 0 && largest\n ? `${ariaLabel}: total ${formatValue(total)} across ${slices.length} ${slices.length === 1 ? \"part\" : \"parts\"}; largest ${largest.label} at ${formatShare(largest.share)}.`\n : `${ariaLabel}: no data.`;\n\n const showLegend = legend !== \"none\";\n const side = legend === \"auto\";\n const showCentre = inner >= 0.5;\n\n return (\n \n
\n {\n if (ringRef.current) rectRef.current = ringRef.current.getBoundingClientRect();\n }}\n onPointerMove={onPointerMove}\n onPointerDown={(e) => {\n if (ringRef.current) rectRef.current = ringRef.current.getBoundingClientRect();\n if (e.pointerType === \"touch\") onPointerMove(e);\n }}\n onPointerLeave={(e) => {\n rectRef.current = null;\n // Touch fires leave on lift; a tap keeps its slice until the next tap or blur.\n if (e.pointerType !== \"touch\") setHover(null, null);\n }}\n onBlur={() => setHover(null, null)}\n onKeyDown={onKeyDown}\n className={cn(\n \"@container relative aspect-square shrink-0 touch-pan-y rounded-full\",\n \"w-[min(var(--donut-d),78cqw)]\",\n side && \"@[600px]:w-[min(var(--donut-d),46cqw)]\",\n chartFocusRing,\n )}\n >\n
\n \n
\n {showCentre && (\n
\n
\n \n \n \n
\n
\n )}\n
\n\n {showLegend && (\n \n
\n \n {legendTitle}\n Value\n Share\n {hasPrev && {previousLabel}}\n
\n {slices.map((sl, i) => (\n {\n rowRefs.current[i] = el;\n }}\n onPointerEnter={(e) => {\n if (e.pointerType !== \"touch\") setHover(sl.id, \"pointer\");\n }}\n onPointerLeave={(e) => {\n if (e.pointerType !== \"touch\") setHover(null, null);\n }}\n onPointerDown={(e) => {\n if (e.pointerType === \"touch\") setHover(st.current.hoverId === sl.id ? null : sl.id, \"pointer\");\n }}\n className=\"col-span-full grid grid-cols-subgrid items-center rounded-[6px] px-2 py-[7px] transition-[opacity,background-color] duration-150 ease-out data-[state=active]:bg-[color:var(--bjork-surface-hover)] data-[state=dim]:opacity-45\"\n >\n \n \n {sl.label}\n {sl.other && +{sl.members.length}}\n \n {formatValue(sl.value)}\n {formatShare(sl.share)}\n {hasPrev && {changeText(sl.value, sl.previous, pctChange) || \"–\"}}\n \n ))}\n
\n \n Total\n {formatValue(total)}\n {formatShare(total > 0 ? 1 : 0)}\n {hasPrev && {changeText(total, prevTotal, pctChange) || \"–\"}}\n
\n \n )}\n \n \n \n \n );\n}\n", "type": "registry:component", "target": "@components/bjork-ui/charts/donut-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/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" }, { "path": "components/bjork-ui/charts/_kit/series.ts", "content": "// Series colour for the Charts collection: a fixed categorical order for identity and a one-hue\n// ramp for magnitude. Pure data and functions; every chart imports what it needs by path.\n//\n// The categorical order is warm-anchored: the ember accent first, then warm ink-neutral steps,\n// then one cool counterpoint (steel), then deeper or lighter steps of the accent family. Every\n// light slot clears 3:1 on the paper stage. Hues are assigned in this order and never cycled:\n// past six series, fold the rest into \"Other\" (see `foldSeries`).\n\nimport type { BjorkTone } from \"@/components/bjork-ui/_core/palette\";\nimport { clamp, lerp, parseColor } from \"@/components/bjork-ui/charts/_kit/scale\";\n\nexport const CHART_SERIES: Record = {\n // ember warm ink warm grey steel deep rust light ember\n dark: [\"#ec5c13\", \"#d9d3c7\", \"#8f877a\", \"#5b8fb9\", \"#b84a12\", \"#f0a272\"],\n light: [\"#c94f10\", \"#3a352d\", \"#8a8174\", \"#3f6f96\", \"#8f3a0e\", \"#d67a45\"],\n};\n\n// The neutral an \"Other\" bucket takes, so it never impersonates a series.\nexport const CHART_OTHER: Record = { dark: \"#5c5c5c\", light: \"#a8a39a\" };\n\nexport const MAX_SERIES = 6;\n\n// Slot colour by the series' stable index (its position in the caller's data, never its rank).\nexport function seriesColor(tone: BjorkTone, index: number): string {\n const set = CHART_SERIES[tone];\n return index >= 0 && index < set.length ? set[index] : CHART_OTHER[tone];\n}\n\n// Keeps the first `max - 1` items and sums the rest into one \"Other\" item when there are more\n// than `max`. `merge` builds the Other item from the folded ones.\nexport function foldSeries(items: T[], max: number, merge: (rest: T[]) => T): T[] {\n if (items.length <= max) return items;\n return [...items.slice(0, max - 1), merge(items.slice(max - 1))];\n}\n\n// One-hue magnitude ramp in the accent family. t = 0 recedes toward the stage, t = 1 is the\n// strongest step. Dark mode brightens with magnitude, light mode darkens, so \"more\" always reads\n// as more contrast against the surface.\nconst RAMP: Record = {\n dark: [\"#1d1611\", \"#3a2112\", \"#6a3013\", \"#a84514\", \"#ec5c13\", \"#ff9a5c\"],\n light: [\"#f1e8dc\", \"#f3cfb2\", \"#eda57a\", \"#e07a43\", \"#b4531f\", \"#7a3412\"],\n};\n\nexport function rampColor(tone: BjorkTone, t: number): string {\n const stops = RAMP[tone];\n const x = clamp(Number.isFinite(t) ? t : 0, 0, 1) * (stops.length - 1);\n const i = Math.min(stops.length - 2, Math.floor(x));\n const a = parseColor(stops[i]);\n const b = parseColor(stops[i + 1]);\n const f = x - i;\n return `rgb(${Math.round(lerp(a[0], b[0], f))},${Math.round(lerp(a[1], b[1], f))},${Math.round(lerp(a[2], b[2], f))})`;\n}\n\n// WCAG relative luminance of an sRGB colour.\nfunction relLum(color: string): number {\n const [r, g, b] = parseColor(color).map((c) => {\n const v = c / 255;\n return v <= 0.04045 ? v / 12.92 : ((v + 0.055) / 1.055) ** 2.4;\n });\n return 0.2126 * r + 0.7152 * g + 0.0722 * b;\n}\n\n// Light or dark ink for text on a filled mark, whichever has more WCAG contrast. The inks are\n// near-white (L ≈ 0.94) and near-black (L ≈ 0.009). Saturated orange gets dark ink; white text\n// only lands on the deeper rust steps, the same rule as --bjork-accent-fill.\nexport function inkOn(color: string): \"light\" | \"dark\" {\n const L = relLum(color);\n return (0.94 + 0.05) / (L + 0.05) >= (L + 0.05) / (0.009 + 0.05) ? \"light\" : \"dark\";\n}\n\n// Whether text on a ramp cell at `t` should use the light or dark ink.\nexport function rampInk(tone: BjorkTone, t: number): \"light\" | \"dark\" {\n return inkOn(rampColor(tone, t));\n}\n", "type": "registry:component", "target": "@components/bjork-ui/charts/_kit/series.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/donut-chart.json", "installCommand": "npx shadcn@latest add https://ui.isaiahbjork.com/donut-chart.json" }, "type": "registry:component" }