{ "$schema": "https://ui.shadcn.com/schema/registry-item.json", "name": "funnel-chart", "title": "Funnel chart", "description": "Funnel 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/funnel-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, hatchPattern } from \"@/components/bjork-ui/charts/_kit/canvas\";\nimport {\n useChartTheme,\n chartFocusRing,\n ChartTable,\n placeTooltip,\n HoverTooltip,\n ChartAnnouncer,\n type TooltipHandle,\n type AnnouncerHandle,\n type TooltipContent,\n type TooltipRow,\n} from \"@/components/bjork-ui/charts/_kit/chrome\";\nimport { clamp, crisp, damp, withAlpha, formatNumber, formatPercent, formatSigned } from \"@/components/bjork-ui/charts/_kit/scale\";\n\nexport interface FunnelStep {\n id: string;\n label: string;\n /** People (or sessions, accounts) who reached this step. Negative and non-finite values count as 0. */\n value: number;\n}\n\nexport interface FunnelChartProps {\n /** Ordered steps, first (widest) at the top. Bars share one zero baseline; length is the count. */\n steps: FunnelStep[];\n /** Counts for a comparison period keyed by step id. Each step gets a ghost marker and a change in pp. */\n previous?: Record | null;\n /** Name of the comparison period, used in the legend, tooltip and table. */\n previousLabel?: string;\n /** Header over the count column and the first tooltip row. */\n valueLabel?: string;\n /** Formats counts. Defaults to grouped integers (12,480). */\n formatValue?: (v: number) => string;\n /** Formats conversion rates given as a fraction (0.464). Defaults to one decimal percent. */\n formatRate?: (r: number) => string;\n /** Marks the step with the lowest step conversion in the accent with a short annotation. */\n highlightWorst?: boolean;\n /** The annotation beside the worst step's conversion. */\n worstLabel?: string;\n /** Posed focus (step id), e.g. for previews. `null` clears it. */\n activeId?: string | null;\n /** Fixed height. Bars and gutters scale (within limits) to fill it. Defaults to the natural height. */\n height?: number;\n ariaLabel?: string;\n tone?: BjorkTone;\n className?: string;\n}\n\n// Layout, in px. Wide: label gutter | bars | count | overall. Narrow: label line above each bar.\nconst NARROW = 480;\nconst HEADER_H = 30;\nconst PAD_B = 6;\nconst W_BAR = 26;\nconst W_GUT = 26;\nconst N_LABEL = 18;\nconst N_BAR = 16;\nconst N_GUT = 22;\n// Inner side padding, so labels and numbers never sit on the focus ring.\nconst PAD_X = 8;\nconst COL_GAP = 16;\nconst PLOT_GAP = 18;\nconst SEG_GAP = 2;\nconst R_END = 4;\n\nconst STEP_MS = 480;\nconst STAGGER_MS = 110;\nconst LOSS_MS = 320;\nconst VAL_TAU = 0.14;\n\nconst defaultFormatValue = (v: number) => formatNumber(v, 0);\nconst defaultFormatRate = (r: number) => formatPercent(r, 1);\nconst formatPP = (d: number) => `${formatSigned(d * 100, (n) => formatNumber(n, 1))} pp`;\n\ninterface Row {\n id: string;\n label: string;\n value: number;\n /** Fraction of the previous step that reached this one. null for the first step or an empty previous step. */\n conv: number | null;\n /** Fraction of the first step. */\n overall: number | null;\n lost: number;\n prev: number | null;\n prevConv: number | null;\n prevOverall: number | null;\n}\n\nconst count = (v: number | undefined) => (typeof v === \"number\" && Number.isFinite(v) ? Math.max(0, v) : 0);\n\nfunction buildRows(steps: FunnelStep[], previous: FunnelChartProps[\"previous\"]): Row[] {\n const out: Row[] = [];\n const first = steps.length ? count(steps[0].value) : 0;\n const prevOf = (id: string) => (previous && id in previous ? count(previous[id]) : null);\n const firstPrev = steps.length ? prevOf(steps[0].id) : null;\n for (let i = 0; i < steps.length; i++) {\n const s = steps[i];\n const v = count(s.value);\n const before = i > 0 ? out[i - 1].value : null;\n const prev = prevOf(s.id);\n const prevBefore = i > 0 ? out[i - 1].prev : null;\n out.push({\n id: s.id,\n label: s.label,\n value: v,\n conv: before !== null && before > 0 ? v / before : null,\n overall: first > 0 ? v / first : null,\n lost: before !== null ? Math.max(0, before - v) : 0,\n prev,\n prevConv: prev !== null && prevBefore !== null && prevBefore > 0 ? prev / prevBefore : null,\n prevOverall: prev !== null && firstPrev ? prev / firstPrev : null,\n });\n }\n return out;\n}\n\n// The step with the largest relative drop (lowest step conversion), if anything was lost at all.\nfunction worstStep(rows: Row[]): number {\n let at = -1;\n let lo = 1;\n for (let i = 1; i < rows.length; i++) {\n const c = rows[i].conv;\n if (c !== null && c < lo) {\n lo = c;\n at = i;\n }\n }\n return at;\n}\n\n// Horizontal bar: square baseline on the left, rounded data end on the right.\nfunction hBarPath(ctx: CanvasRenderingContext2D, x: number, y: number, w: number, h: number, r: number) {\n if (w <= 0 || h <= 0) return;\n const rr = Math.min(r, w, h / 2);\n ctx.moveTo(x, y);\n ctx.lineTo(x + w - rr, y);\n if (rr) ctx.arcTo(x + w, y, x + w, y + rr, rr);\n ctx.lineTo(x + w, y + h - rr);\n if (rr) ctx.arcTo(x + w, y + h, x + w - rr, y + h, rr);\n ctx.lineTo(x, y + h);\n ctx.closePath();\n}\n\ninterface Layout {\n narrow: boolean;\n plotL: number;\n plotR: number;\n labelW: number;\n labelH: number;\n barH: number;\n gutH: number;\n countR: number;\n n: number;\n}\n\ninterface Run {\n enter: number;\n dv: number[];\n dp: number[];\n dmax: number;\n ready: boolean;\n hover: number | null;\n source: \"pointer\" | \"keyboard\" | \"prop\" | null;\n lay: Layout;\n}\n\nconst rowTop = (L: Layout, i: number) => HEADER_H + i * (L.labelH + L.barH + L.gutH);\nconst barTop = (L: Layout, i: number) => rowTop(L, i) + L.labelH;\nconst barBottom = (L: Layout, i: number) => barTop(L, i) + L.barH;\n\nexport function FunnelChart({\n steps,\n previous = null,\n previousLabel = \"Previous period\",\n valueLabel = \"Count\",\n formatValue = defaultFormatValue,\n formatRate = defaultFormatRate,\n highlightWorst = true,\n worstLabel = \"Biggest drop\",\n activeId,\n height: heightProp,\n ariaLabel = \"Conversion funnel\",\n tone: toneProp,\n className,\n}: FunnelChartProps) {\n const { pal, reduce, vars } = useChartTheme(toneProp);\n const announcer = useRef(null);\n const tipRef = useRef(null);\n const wrapperRef = useRef(null);\n const nameRefs = useRef<(HTMLSpanElement | null)[]>([]);\n const countRefs = useRef<(HTMLSpanElement | null)[]>([]);\n const pctRefs = useRef<(HTMLSpanElement | null)[]>([]);\n const gutRefs = useRef<(HTMLSpanElement | null)[]>([]);\n const hCountRef = useRef(null);\n const hPctRef = useRef(null);\n const rectRef = useRef(null);\n // Measured text widths, so gutters are budgeted from the real labels rather than guessed.\n const meas = useRef({ label: 0, count: 0, pct: 0, hCount: 0, hPct: 0, gut: [] as number[] });\n\n const rows = useMemo(() => buildRows(steps, previous), [steps, previous]);\n const hasPrev = rows.some((r) => r.prev !== null);\n const worst = highlightWorst ? worstStep(rows) : -1;\n const n = rows.length;\n\n const cfg = useRef({ rows, worst, reduce, pal });\n useEffect(() => {\n cfg.current = { rows, worst, reduce, pal };\n });\n\n const st = useRef({\n enter: 0,\n dv: [],\n dp: [],\n dmax: 1,\n ready: false,\n hover: null,\n source: null,\n lay: { narrow: false, plotL: 0, plotR: 0, labelW: 0, labelH: 0, barH: W_BAR, gutH: W_GUT, countR: 0, n: 0 },\n });\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 R = c.rows;\n const N = R.length;\n const m = meas.current;\n\n // --- Layout -----------------------------------------------------------------------------\n const narrow = w < NARROW;\n const countW = Math.max(m.count, narrow ? 0 : m.hCount);\n const pctW = Math.max(m.pct, narrow ? 0 : m.hPct);\n const labelH = narrow ? N_LABEL : 0;\n const bar0 = narrow ? N_BAR : W_BAR;\n const gut0 = narrow ? N_GUT : W_GUT;\n // Bars and gutters stretch (0.7x to 1.5x) to fill a fixed height; label lines never do.\n const flex = N * bar0 + Math.max(0, N - 1) * gut0;\n const k = flex > 0 ? clamp((h - HEADER_H - PAD_B - N * labelH) / flex, 0.7, 1.5) : 1;\n const L: Layout = { narrow, plotL: PAD_X, plotR: w - PAD_X, labelW: 0, labelH, barH: bar0 * k, gutH: gut0 * k, countR: 0, n: N };\n if (narrow) {\n L.countR = w - PAD_X - pctW - 10;\n L.labelW = Math.max(40, L.countR - countW - 12 - PAD_X);\n } else {\n L.labelW = Math.min(Math.max(m.label, 40), clamp(w * 0.26, 90, 200));\n L.plotL = PAD_X + L.labelW + 14;\n L.plotR = Math.max(L.plotL + 60, w - PAD_X - pctW - COL_GAP - countW - PLOT_GAP);\n L.countR = L.plotR + PLOT_GAP + countW;\n }\n s.lay = L;\n\n // --- Values (damped) and domain ------------------------------------------------------------\n let moving = false;\n let max = 0;\n for (let i = 0; i < N; i++) {\n const tv = R[i].value;\n const tp = R[i].prev ?? 0;\n max = Math.max(max, tv, tp);\n if (!s.ready || c.reduce) {\n s.dv[i] = tv;\n s.dp[i] = tp;\n continue;\n }\n // Steps added after mount grow in from zero.\n if (s.dv[i] === undefined) s.dv[i] = 0;\n if (s.dp[i] === undefined) s.dp[i] = tp;\n s.dv[i] = damp(s.dv[i], tv, VAL_TAU, dt);\n s.dp[i] = damp(s.dp[i], tp, VAL_TAU, dt);\n const tol = 1e-4 * Math.max(1, s.dmax);\n if (Math.abs(s.dv[i] - tv) + Math.abs(s.dp[i] - tp) > tol) moving = true;\n }\n s.dv.length = N;\n s.dp.length = N;\n if (!(max > 0)) max = 1;\n if (!s.ready || c.reduce) s.dmax = max;\n else {\n s.dmax = damp(s.dmax, max, VAL_TAU, dt);\n if (Math.abs(s.dmax - max) > 1e-4 * max) moving = true;\n }\n s.ready = true;\n const span = Math.max(1, L.plotR - L.plotL);\n const xOf = (v: number) => L.plotL + (v / s.dmax) * span;\n\n // --- Entrance: each bar grows in turn, then its loss runs out to the previous bar's end ------\n const total = Math.max(0, N - 1) * STAGGER_MS + STEP_MS + LOSS_MS;\n s.enter = c.reduce ? 1 : Math.min(1, s.enter + (dt * 1000) / total);\n const ms = s.enter * total;\n const growOf = (i: number) => (s.enter >= 1 ? 1 : easeOut(clamp((ms - i * STAGGER_MS) / STEP_MS, 0, 1)));\n const lossOf = (i: number) => (s.enter >= 1 ? 1 : easeOut(clamp((ms - i * STAGGER_MS - STEP_MS * 0.6) / LOSS_MS, 0, 1)));\n\n // Focused step band, including the gutter above it (the drop into it).\n if (s.hover !== null && s.hover < N) {\n const i = s.hover;\n const y0 = i > 0 ? barBottom(L, i - 1) + 3 : rowTop(L, 0) - 4;\n const y1 = barBottom(L, i) + 4;\n ctx.fillStyle = withAlpha(p.text, 0.045);\n ctx.beginPath();\n ctx.roundRect(0, y0, w, y1 - y0, 6);\n ctx.fill();\n }\n\n const barFill = withAlpha(p.text, 0.5);\n const barFillHot = withAlpha(p.text, 0.72);\n const lossHatch = hatchPattern(ctx, withAlpha(p.text, 0.34), 4, 1);\n const worstHatch = hatchPattern(ctx, withAlpha(p.accent, 0.85), 4, 1);\n\n for (let i = 0; i < N; i++) {\n const g = growOf(i);\n const hov = s.hover === i;\n const dim = s.hover !== null && !hov ? 0.5 : 1;\n const isWorst = i === c.worst;\n const yT = barTop(L, i);\n const bh = L.barH;\n const v = s.dv[i] * g;\n const xEnd = xOf(v);\n\n ctx.globalAlpha = dim;\n if (v > 0) {\n ctx.beginPath();\n hBarPath(ctx, L.plotL, yT, Math.max(1, xEnd - L.plotL), bh, R_END);\n ctx.fillStyle = hov ? barFillHot : barFill;\n ctx.fill();\n }\n\n // The lost share: a hatched continuation of the previous bar, 2px clear of this one.\n if (i > 0) {\n const lg = lossOf(i);\n const before = s.dv[i - 1];\n const lx0 = xEnd + (v > 0 ? SEG_GAP : 0);\n const lx1 = xOf(s.dv[i] + Math.max(0, before - s.dv[i]) * lg);\n if (lg > 0 && lx1 - lx0 > 1) {\n ctx.beginPath();\n hBarPath(ctx, lx0 + 0.5, yT + 0.5, lx1 - lx0 - 1, bh - 1, R_END);\n ctx.fillStyle = isWorst ? withAlpha(p.accent, hov ? 0.16 : 0.1) : withAlpha(p.text, 0.035);\n ctx.fill();\n const hp = isWorst ? worstHatch : lossHatch;\n if (hp) {\n ctx.fillStyle = hp;\n ctx.fill();\n }\n ctx.lineWidth = 1;\n ctx.strokeStyle = isWorst ? withAlpha(p.accent, hov ? 1 : 0.85) : withAlpha(p.text, hov ? 0.42 : 0.26);\n ctx.stroke();\n }\n }\n\n // Comparison period: a ghost tick at the previous count, haloed so it reads on or off the bar.\n if (R[i].prev !== null && g > 0) {\n const px = Math.round(xOf(s.dp[i] * g)) + 0.5;\n ctx.globalAlpha = dim * Math.min(1, g * 1.5);\n ctx.lineCap = \"round\";\n ctx.strokeStyle = p.stage;\n ctx.lineWidth = 4;\n ctx.beginPath();\n ctx.moveTo(px, yT - 3);\n ctx.lineTo(px, yT + bh + 3);\n ctx.stroke();\n ctx.strokeStyle = withAlpha(p.text, 0.88);\n ctx.lineWidth = 1.5;\n ctx.stroke();\n ctx.lineCap = \"butt\";\n }\n ctx.globalAlpha = 1;\n\n // DOM labels.\n const nm = nameRefs.current[i];\n if (nm) {\n nm.style.opacity = String(Math.min(1, g * 2) * dim);\n nm.style.maxWidth = `${L.labelW.toFixed(0)}px`;\n if (narrow) {\n nm.style.textAlign = \"left\";\n nm.style.transform = `translate3d(${PAD_X}px, ${(rowTop(L, i) + labelH / 2 - 1).toFixed(1)}px, 0) translate(0, -50%)`;\n } else {\n nm.style.textAlign = \"right\";\n nm.style.transform = `translate3d(${(PAD_X + L.labelW).toFixed(1)}px, ${(yT + bh / 2).toFixed(1)}px, 0) translate(-100%, -50%)`;\n }\n }\n const yVal = narrow ? rowTop(L, i) + labelH / 2 - 1 : yT + bh / 2;\n const vo = String(clamp((g - 0.4) / 0.6, 0, 1) * dim);\n const cn_ = countRefs.current[i];\n if (cn_) {\n cn_.style.opacity = vo;\n cn_.style.transform = `translate3d(${L.countR.toFixed(1)}px, ${yVal.toFixed(1)}px, 0) translate(-100%, -50%)`;\n }\n const pc = pctRefs.current[i];\n if (pc) {\n pc.style.opacity = vo;\n pc.style.transform = `translate3d(${(w - PAD_X).toFixed(1)}px, ${yVal.toFixed(1)}px, 0) translate(-100%, -50%)`;\n }\n const gu = gutRefs.current[i];\n if (gu && i > 0) {\n const gy = (barBottom(L, i - 1) + rowTop(L, i)) / 2;\n gu.style.opacity = String(lossOf(i) * (s.hover !== null && !hov ? 0.5 : 1));\n gu.style.maxWidth = `${(w - PAD_X - (narrow ? L.plotL : L.plotL + 8)).toFixed(0)}px`;\n gu.style.transform = `translate3d(${(narrow ? L.plotL : L.plotL + 8).toFixed(1)}px, ${gy.toFixed(1)}px, 0) translate(0, -50%)`;\n }\n }\n\n // The shared zero baseline.\n if (N && !narrow) {\n ctx.strokeStyle = p.textFaint;\n ctx.lineWidth = 1;\n ctx.beginPath();\n ctx.moveTo(crisp(L.plotL) - 1, barTop(L, 0) - 4);\n ctx.lineTo(crisp(L.plotL) - 1, barBottom(L, N - 1) + 4);\n ctx.stroke();\n }\n\n // Column headers (wide only; narrow rows carry their numbers on the label line).\n const hc = hCountRef.current;\n if (hc) {\n hc.style.opacity = narrow || !N ? \"0\" : \"1\";\n hc.style.transform = `translate3d(${L.countR.toFixed(1)}px, 0, 0) translate(-100%, 0)`;\n }\n const hp = hPctRef.current;\n if (hp) hp.style.opacity = narrow || !N ? \"0\" : \"1\";\n\n // Tooltip: beside the focused step, in the clear space right of whatever rows it overlaps.\n const tip = tipRef.current;\n if (tip?.el && s.hover !== null && s.hover < N) {\n const i = s.hover;\n const { w: tw, h: th } = tip.size;\n const limit = narrow ? w - PAD_X : L.plotR;\n const extentIn = (y0: number, y1: number) => {\n let e = L.plotL;\n for (let j = 0; j < N; j++) {\n const top = rowTop(L, j);\n if (top <= y1 && barBottom(L, j) >= y0) {\n const reach = Math.max(s.dv[j], j > 0 ? s.dv[j - 1] : 0, R[j].prev !== null ? s.dp[j] : 0);\n e = Math.max(e, xOf(reach));\n if (narrow) e = w; // the label line spans the row\n }\n if (j > 0) {\n const gy0 = barBottom(L, j - 1);\n if (gy0 <= y1 && top >= y0) e = Math.max(e, (narrow ? L.plotL : L.plotL + 8) + (m.gut[j] ?? 0));\n }\n }\n return e;\n };\n const downY = clamp(barTop(L, i) - 4, 0, Math.max(0, h - th));\n const upY = clamp(barBottom(L, i) + 4 - th, 0, Math.max(0, h - th));\n // Then fully below or above the step, so its own bar and loss stay uncovered.\n const belowY = clamp(barBottom(L, i) + 6, 0, Math.max(0, h - th));\n const aboveY = clamp(barTop(L, i) - 6 - th, 0, Math.max(0, h - th));\n let pos: { x: number; y: number } | null = null;\n for (const y of [downY, upY, belowY, aboveY]) {\n const x = extentIn(y, y + th) + 12;\n if (x + tw <= limit) {\n pos = { x: Math.round(x), y: Math.round(y) };\n break;\n }\n }\n if (!pos) pos = placeTooltip(xOf(s.dv[i]), barTop(L, i), tw, th, w, h, 10);\n tip.el.style.transform = `translate3d(${pos.x}px, ${pos.y}px, 0)`;\n }\n\n return moving || s.enter < 1;\n });\n\n // Measure the text the layout budgets for. Runs before paint and again once web fonts settle.\n useLayoutEffect(() => {\n const measure = () => {\n const max = (els: (HTMLElement | null)[], f: (el: HTMLElement) => number) => els.slice(0, n).reduce((a, el) => (el ? Math.max(a, f(el)) : a), 0);\n meas.current = {\n label: Math.ceil(max(nameRefs.current, (el) => el.scrollWidth)),\n count: Math.ceil(max(countRefs.current, (el) => el.offsetWidth)),\n pct: Math.ceil(max(pctRefs.current, (el) => el.offsetWidth)),\n hCount: hCountRef.current?.offsetWidth ?? 0,\n hPct: hPctRef.current?.offsetWidth ?? 0,\n gut: gutRefs.current.slice(0, n).map((el) => (el ? el.scrollWidth : 0)),\n };\n wake();\n };\n measure();\n let live = true;\n document.fonts?.ready.then(() => {\n if (live) measure();\n });\n return () => {\n live = false;\n };\n }, [rows, n, formatValue, formatRate, valueLabel, worst, wake]);\n\n const tooltipFor = (i: number): TooltipContent | null => {\n const r = rows[i];\n if (!r) return null;\n const out: TooltipRow[] = [{ key: \"v\", label: valueLabel, value: formatValue(r.value) }];\n if (i > 0) {\n out.push({ key: \"c\", label: \"Of previous step\", value: r.conv !== null ? formatRate(r.conv) : \"–\" });\n out.push({ key: \"o\", label: \"Of first step\", value: r.overall !== null ? formatRate(r.overall) : \"–\" });\n out.push({ key: \"l\", label: \"Lost\", value: r.lost > 0 ? `−${formatValue(r.lost)}` : formatValue(0), strong: false });\n }\n if (r.prev !== null) {\n out.push({ key: \"p\", label: previousLabel, value: formatValue(r.prev), strong: false });\n if (r.conv !== null && r.prevConv !== null) out.push({ key: \"dc\", label: \"Step change\", value: formatPP(r.conv - r.prevConv), strong: false });\n if (i > 0 && r.overall !== null && r.prevOverall !== null) out.push({ key: \"do\", label: \"Overall change\", value: formatPP(r.overall - r.prevOverall), strong: false });\n }\n return {\n key: `${r.id}|${r.value}|${r.prev}|${i === worst}|${pal.text}`,\n title: i === worst ? `${r.label} · ${worstLabel}` : r.label,\n rows: out,\n };\n };\n\n const describe = (i: number) => {\n const r = rows[i];\n let msg = `Step ${i + 1} of ${n}, ${r.label}: ${formatValue(r.value)}`;\n if (i > 0) msg += `, ${r.conv !== null ? formatRate(r.conv) : \"no\"} of the previous step, ${r.overall !== null ? formatRate(r.overall) : \"none\"} overall, ${formatValue(r.lost)} lost`;\n if (i === worst) msg += `. ${worstLabel}`;\n if (r.prev !== null) {\n msg += `. ${previousLabel} ${formatValue(r.prev)}`;\n if (r.conv !== null && r.prevConv !== null) msg += `, step conversion ${formatPP(r.conv - r.prevConv)}`;\n }\n return msg;\n };\n\n const setHover = (i: number | null, source: Run[\"source\"]) => {\n const s = st.current;\n if (s.hover === i && s.source === source) return;\n s.hover = i;\n s.source = i === null ? null : source;\n tipRef.current?.set(i === null ? null : tooltipFor(i));\n if (i !== null && source === \"keyboard\") announcer.current?.say(describe(i));\n wake();\n };\n\n useEffect(() => {\n // Data or theme changed under a focused step: refresh its tooltip (the key carries the values).\n const s = st.current;\n if (s.hover !== null) {\n if (s.hover >= rows.length) setHover(null, null);\n else tipRef.current?.set(tooltipFor(s.hover));\n }\n wake();\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, [rows, worst, pal, reduce, wake]);\n\n useEffect(() => {\n if (activeId === undefined) return;\n const i = rows.findIndex((r) => r.id === activeId);\n setHover(i >= 0 ? i : null, i >= 0 ? \"prop\" : null);\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, [activeId, rows]);\n\n const onPointerMove = (e: PointerEvent) => {\n const rect = rectRef.current ?? wrapperRef.current?.getBoundingClientRect();\n if (!rect || !n) return;\n const L = st.current.lay;\n const y = e.clientY - rect.top;\n // Each step owns its bar, its label line and the gutter above it (the drop into it).\n if (y < rowTop(L, 0) - 4 || y > barBottom(L, n - 1) + 6) {\n setHover(null, null);\n return;\n }\n let i = 0;\n for (let j = 1; j < n; j++) if (y >= barBottom(L, j - 1) + 2) i = j;\n setHover(i, \"pointer\");\n };\n\n const onKeyDown = (e: KeyboardEvent) => {\n if (!n) return;\n const s = st.current;\n if (e.key === \"ArrowDown\" || e.key === \"ArrowUp\" || e.key === \"ArrowRight\" || e.key === \"ArrowLeft\") {\n e.preventDefault();\n // Right walks down the funnel like Down, so either axis steps the flow.\n const down = e.key === \"ArrowDown\" || e.key === \"ArrowRight\";\n const next = s.hover === null ? (down ? 0 : n - 1) : clamp(s.hover + (down ? 1 : -1), 0, n - 1);\n setHover(next, \"keyboard\");\n } else if (e.key === \"Home\" || e.key === \"End\") {\n e.preventDefault();\n setHover(e.key === \"Home\" ? 0 : n - 1, \"keyboard\");\n } else if (e.key === \"Escape\" && s.hover !== null) {\n e.preventDefault();\n setHover(null, null);\n }\n };\n\n const tableCols = useMemo(\n () => [\"Step\", valueLabel, \"Of previous step\", \"Of first step\", \"Lost\", ...(hasPrev ? [previousLabel, \"Step conversion change\", \"Overall change\"] : [])],\n [valueLabel, hasPrev, previousLabel],\n );\n const tableRows = useMemo(\n () =>\n rows.map((r, i) => [\n i === worst ? `${r.label} (${worstLabel.toLowerCase()})` : r.label,\n formatValue(r.value),\n r.conv !== null ? formatRate(r.conv) : \"–\",\n r.overall !== null ? formatRate(r.overall) : \"–\",\n i > 0 ? formatValue(r.lost) : \"–\",\n ...(hasPrev\n ? [\n r.prev !== null ? formatValue(r.prev) : \"–\",\n r.conv !== null && r.prevConv !== null ? formatPP(r.conv - r.prevConv) : \"–\",\n i > 0 && r.overall !== null && r.prevOverall !== null ? formatPP(r.overall - r.prevOverall) : \"–\",\n ]\n : []),\n ]),\n [rows, worst, worstLabel, formatValue, formatRate, hasPrev],\n );\n\n // Natural height from the row count; the narrow layout adds a label line per step. Both are\n // emitted and a container query picks one, so the server paint is already the right height.\n const naturalWide = n ? HEADER_H + n * W_BAR + (n - 1) * W_GUT + PAD_B : HEADER_H + 64;\n const naturalNarrow = n ? HEADER_H + n * (N_LABEL + N_BAR) + (n - 1) * N_GUT + PAD_B : HEADER_H + 64;\n\n const last = rows[n - 1];\n const summary = n\n ? `${ariaLabel}: ${n} steps from ${rows[0].label} (${formatValue(rows[0].value)}) to ${last.label} (${formatValue(last.value)}), ${last.overall !== null ? formatRate(last.overall) : \"none\"} overall.${worst >= 0 ? ` ${worstLabel}: ${rows[worst].label}, ${formatRate(rows[worst].conv ?? 0)} of the previous step.` : \"\"}`\n : `${ariaLabel}: no steps`;\n\n const hatchKey = `repeating-linear-gradient(-45deg, var(--bjork-text-muted) 0 1px, transparent 1px 3.5px)`;\n\n return (\n
\n \n {\n if (wrapperRef.current) rectRef.current = wrapperRef.current.getBoundingClientRect();\n }}\n onPointerMove={onPointerMove}\n onPointerDown={(e) => {\n if (wrapperRef.current) rectRef.current = wrapperRef.current.getBoundingClientRect();\n if (e.pointerType === \"touch\") onPointerMove(e);\n }}\n onPointerLeave={(e) => {\n // A touch tap fires leave right after up; keep the tapped mark until the next tap.\n if (e.pointerType !== \"touch\") setHover(null, null);\n }}\n onBlur={() => setHover(null, null)}\n onKeyDown={onKeyDown}\n className={cn(\"absolute inset-0 touch-pan-y rounded-[10px]\", chartFocusRing)}\n >\n
\n \n
\n\n {/* Legend: keys mirror the marks. */}\n \n \n \n Reached\n \n \n \n Lost\n \n {hasPrev && (\n \n \n {previousLabel}\n \n )}\n
\n \n {valueLabel}\n \n \n Overall\n \n\n {rows.map((r, i) => (\n {\n nameRefs.current[i] = el;\n }}\n aria-hidden=\"true\"\n className=\"pointer-events-none absolute left-0 top-0 truncate font-bjork-alpha text-[12px] font-medium leading-[14px] text-[color:var(--bjork-text-medium)] opacity-0\"\n >\n {r.label}\n \n ))}\n {rows.map((r, i) => (\n {\n countRefs.current[i] = el;\n }}\n aria-hidden=\"true\"\n className=\"pointer-events-none absolute left-0 top-0 whitespace-nowrap text-right font-mono text-[12px] leading-none tabular-nums text-[color:var(--bjork-text)] opacity-0 [text-box:trim-both_cap_alphabetic]\"\n >\n {formatValue(r.value)}\n \n ))}\n {rows.map((r, i) => (\n {\n pctRefs.current[i] = el;\n }}\n aria-hidden=\"true\"\n className=\"pointer-events-none absolute left-0 top-0 whitespace-nowrap text-right font-mono text-[11px] leading-none tabular-nums text-[color:var(--bjork-text-muted)] opacity-0 [text-box:trim-both_cap_alphabetic]\"\n >\n {r.overall !== null ? formatRate(r.overall) : \"–\"}\n \n ))}\n {rows.map((r, i) =>\n i === 0 ? null : (\n {\n gutRefs.current[i] = el;\n }}\n aria-hidden=\"true\"\n className=\"pointer-events-none absolute left-0 top-0 flex items-center gap-2 overflow-hidden whitespace-nowrap font-mono text-[10px] leading-none tabular-nums opacity-0 [text-box:trim-both_cap_alphabetic]\"\n >\n \n ↓ {r.conv !== null ? formatRate(r.conv) : \"–\"}\n \n {r.conv !== null && r.prevConv !== null && {formatPP(r.conv - r.prevConv)}}\n {i === worst && (\n {worstLabel}\n )}\n \n ),\n )}\n {!n && (\n No steps\n )}\n \n \n \n \n \n \n );\n}\n", "type": "registry:component", "target": "@components/bjork-ui/charts/funnel-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" } ], "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/funnel-chart.json", "installCommand": "npx shadcn@latest add https://ui.isaiahbjork.com/funnel-chart.json" }, "type": "registry:component" }