@gntik-ai/charts 0.0.0-stage → 0.10.0

package/dist/index.js

@@ -0,0 +1,2431 @@
+'use client';
+import { createContext, useCallback, useContext, useId, useMemo, useReducer, useRef, useState, useSyncExternalStore } from "react";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { Area, AreaChart as AreaChart$1, Bar, BarChart as BarChart$1, CartesianGrid, ComposedChart, Funnel, FunnelChart as FunnelChart$1, Line, LineChart as LineChart$1, Pie, PieChart, PolarAngleAxis, PolarGrid, PolarRadiusAxis, Radar, RadarChart as RadarChart$1, ReferenceLine, ResponsiveContainer, Sankey, Tooltip, XAxis, YAxis } from "recharts";
+import { currentTheme, observeTheme, tokenColor } from "@gntik-ai/tokens/runtime";
+//#region src/i18n.tsx
+const en = {
+	loading: "Loading chart",
+	empty: "No data for this period",
+	error: "The chart could not be loaded.",
+	retry: "Retry",
+	zoomRange: "Zoom range",
+	rangeStart: "Range start",
+	rangeEnd: "Range end",
+	resetZoom: "Reset zoom",
+	markers: "Chart markers",
+	threshold: "Threshold:",
+	markerAt: "Marker at {x}:",
+	stages: "Stages",
+	stage: "Stage",
+	conversion: "Conversion",
+	dropOff: "Drop-off",
+	dropOffPrefix: "drop-off ",
+	from: "From",
+	to: "To",
+	value: "Value",
+	barChart: "Bar chart",
+	lineChart: "Line chart",
+	areaChart: "Area chart",
+	comboChart: "Combo chart",
+	donutChart: "Donut chart",
+	pieChart: "Pie chart",
+	funnelChart: "Funnel chart",
+	sankeyChart: "Sankey chart",
+	heatmap: "Heatmap",
+	colourGrid: "colour grid, use the arrow keys to read cells",
+	radarChart: "Radar chart",
+	barList: "Bar list",
+	bars: "Bars"
+};
+const es = {
+	loading: "Cargando gráfico",
+	empty: "Sin datos para este periodo",
+	error: "No se pudo cargar el gráfico.",
+	retry: "Reintentar",
+	zoomRange: "Rango de zoom",
+	rangeStart: "Inicio del rango",
+	rangeEnd: "Fin del rango",
+	resetZoom: "Restablecer zoom",
+	markers: "Marcadores del gráfico",
+	threshold: "Umbral:",
+	markerAt: "Marcador en {x}:",
+	stages: "Etapas",
+	stage: "Etapa",
+	conversion: "Conversión",
+	dropOff: "Abandono",
+	dropOffPrefix: "abandono ",
+	from: "Origen",
+	to: "Destino",
+	value: "Valor",
+	barChart: "Gráfico de barras",
+	lineChart: "Gráfico de líneas",
+	areaChart: "Gráfico de áreas",
+	comboChart: "Gráfico combinado",
+	donutChart: "Gráfico de anillo",
+	pieChart: "Gráfico circular",
+	funnelChart: "Gráfico de embudo",
+	sankeyChart: "Diagrama de Sankey",
+	heatmap: "Mapa de calor",
+	colourGrid: "cuadrícula de colores, usa las flechas para leer las celdas",
+	radarChart: "Gráfico de radar",
+	barList: "Lista de barras",
+	bars: "Barras"
+};
+const chartLabelSets = {
+	en,
+	es
+};
+const ChartLabelsContext = createContext(en);
+/** Strings-only locale provider for standalone charts, independent of @gntik-ai/ui. */
+function ChartLocaleProvider({ locale = "en", labels, children }) {
+	const value = useMemo(() => {
+		const language = locale.split(/[-_]/)[0]?.toLowerCase() ?? "";
+		return {
+			...Object.hasOwn(chartLabelSets, language) ? chartLabelSets[language] : en,
+			...labels
+		};
+	}, [locale, labels]);
+	return /* @__PURE__ */ jsx(ChartLabelsContext.Provider, {
+		value,
+		children
+	});
+}
+/** Active chart labels, or English outside a ChartLocaleProvider. */
+function useChartLabels() {
+	return useContext(ChartLabelsContext);
+}
+//#endregion
+//#region src/format.ts
+const nf = (opts) => new Intl.NumberFormat("en-US", opts);
+/** Ready-made value formatters (en-US). */
+const chartFmt = {
+	usd: (n) => "$" + nf({ maximumFractionDigits: 0 }).format(n),
+	usd2: (n) => "$" + nf({
+		minimumFractionDigits: 2,
+		maximumFractionDigits: 2
+	}).format(n),
+	usdCompact: (n) => "$" + nf({
+		notation: "compact",
+		maximumFractionDigits: 1
+	}).format(n),
+	num: (n) => nf().format(n),
+	compact: (n) => nf({
+		notation: "compact",
+		maximumFractionDigits: 1
+	}).format(n),
+	ms: (n) => nf().format(n) + " ms",
+	pct: (n) => `${n}%`,
+	/** Ratio (0–1) → percent with up to one decimal: `0.125` → `12.5%`. */
+	percent: (n) => nf({
+		style: "percent",
+		maximumFractionDigits: 1
+	}).format(n),
+	/** Signed ratio for deltas: `0.042` → `+4.2%`, `-0.1` → `−10%`. */
+	percentDelta: (n) => nf({
+		style: "percent",
+		maximumFractionDigits: 1,
+		signDisplay: "exceptZero"
+	}).format(n).replace("-", "−"),
+	/** Milliseconds → the two largest units: `850` → `850 ms`, `2400` → `2.4 s`, `3_723_000` → `1h 2m`. */
+	duration: (n) => formatDuration(n),
+	/** Seconds → like `duration`: `90` → `1m 30s`. */
+	durationS: (n) => formatDuration(n * 1e3),
+	/** Bytes → decimal SI units: `1536` → `1.5 kB`, `2_000_000_000` → `2 GB`. */
+	bytes: (n) => formatBytes(n)
+};
+function formatDuration(ms) {
+	if (!Number.isFinite(ms)) return "—";
+	const sign = ms < 0 ? "−" : "";
+	const a = Math.abs(ms);
+	if (a < 1e3) return `${sign}${nf({ maximumFractionDigits: a < 10 ? 2 : 0 }).format(a)} ms`;
+	if (a < 6e4) return `${sign}${nf({ maximumFractionDigits: 1 }).format(a / 1e3)} s`;
+	const parts = [
+		[864e5, "d"],
+		[36e5, "h"],
+		[6e4, "m"],
+		[1e3, "s"]
+	];
+	const total = Math.round(a / 1e3) * 1e3;
+	const first = parts.findIndex(([size]) => total >= size);
+	const out = [];
+	let rest = total;
+	for (const [size, unit] of parts.slice(first, first + 2)) {
+		const q = Math.floor(rest / size);
+		rest -= q * size;
+		if (q > 0) out.push(`${q}${unit}`);
+	}
+	return sign + out.join(" ");
+}
+const BYTE_UNITS = [
+	"B",
+	"kB",
+	"MB",
+	"GB",
+	"TB",
+	"PB"
+];
+function formatBytes(bytes) {
+	if (!Number.isFinite(bytes)) return "—";
+	const sign = bytes < 0 ? "−" : "";
+	let v = Math.abs(bytes);
+	let u = 0;
+	while (v >= 1e3 && u < BYTE_UNITS.length - 1) {
+		v /= 1e3;
+		u += 1;
+	}
+	if (Number(nf({
+		maximumFractionDigits: u === 0 ? 0 : 1,
+		useGrouping: false
+	}).format(v)) >= 1e3 && u < BYTE_UNITS.length - 1) {
+		v /= 1e3;
+		u += 1;
+	}
+	return `${sign}${nf({ maximumFractionDigits: u === 0 ? 0 : 1 }).format(v)} ${BYTE_UNITS[u]}`;
+}
+const identity = (n) => String(n);
+/** Applies a formatter to whatever Recharts hands over (number, string or range). */
+function formatAny(value, fmt) {
+	if (typeof value === "number") return fmt(value);
+	if (Array.isArray(value)) return value.map((v) => formatAny(v, fmt)).join(" – ");
+	return value == null ? "" : String(value);
+}
+function cx(...parts) {
+	return parts.filter(Boolean).join(" ");
+}
+//#endregion
+//#region src/ChartLegend.tsx
+const legendFocus = "rounded-sm focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-focus-ring";
+/** Interactive legend: each entry is a toggle button that shows/hides its series. */
+function ChartLegend({ items, hidden, onToggle, className }) {
+	return /* @__PURE__ */ jsx("div", {
+		className: cx("flex flex-wrap items-center gap-x-4 gap-y-1.5", className),
+		children: items.map((it) => {
+			const off = hidden.has(it.key);
+			return /* @__PURE__ */ jsxs("button", {
+				type: "button",
+				"aria-pressed": !off,
+				onClick: () => onToggle(it.key),
+				className: cx("group flex items-center gap-1.5 transition-opacity", off && "opacity-40", legendFocus),
+				children: [/* @__PURE__ */ jsx("span", {
+					"aria-hidden": true,
+					className: cx("h-2.5 w-2.5 shrink-0 rounded-[3px]", off && "grayscale"),
+					style: { background: it.color }
+				}), /* @__PURE__ */ jsx("span", {
+					className: cx("text-[12.5px] text-muted-foreground transition-colors", off ? "line-through" : "group-hover:text-foreground"),
+					children: it.label
+				})]
+			}, it.key);
+		})
+	});
+}
+/** Legend state: the set of hidden series keys plus a toggle. */
+function useHiddenSeries() {
+	const [hidden, setHidden] = useState(() => /* @__PURE__ */ new Set());
+	return [hidden, useCallback((key) => {
+		setHidden((s) => {
+			const next = new Set(s);
+			if (next.has(key)) next.delete(key);
+			else next.add(key);
+			return next;
+		});
+	}, [])];
+}
+//#endregion
+//#region src/ChartTooltip.tsx
+function swatchOf(entry) {
+	if (entry.color) return entry.color;
+	if (entry.fill) return entry.fill;
+	const inner = entry.payload;
+	if (inner && typeof inner === "object" && "fill" in inner) {
+		const fill = inner.fill;
+		return typeof fill === "string" ? fill : void 0;
+	}
+}
+/** Brand tooltip card: label header + one row per series, values in mono. */
+function ChartTooltip({ active, payload, label, valueFormatter = identity, seriesFormatter, labelFormatter }) {
+	if (!active || !payload || payload.length === 0) return null;
+	const rows = payload.filter((p) => p.value != null);
+	return /* @__PURE__ */ jsxs("div", {
+		className: "min-w-[150px] rounded-md border border-border bg-popover px-3 py-2.5 font-sans shadow-md",
+		children: [label != null && label !== "" && /* @__PURE__ */ jsx("div", {
+			className: "mb-2 border-b border-border pb-2 text-[11px] font-medium text-muted-foreground",
+			children: labelFormatter ? labelFormatter(label) : label
+		}), /* @__PURE__ */ jsx("div", {
+			className: "flex flex-col gap-1.5",
+			children: rows.map((p, i) => {
+				const name = p.name == null ? "" : String(p.name);
+				return /* @__PURE__ */ jsxs("div", {
+					className: "flex items-center justify-between gap-5",
+					children: [/* @__PURE__ */ jsxs("span", {
+						className: "flex min-w-0 items-center gap-2",
+						children: [/* @__PURE__ */ jsx("span", {
+							"aria-hidden": true,
+							className: "h-2.5 w-2.5 shrink-0 rounded-[3px]",
+							style: { background: swatchOf(p) }
+						}), /* @__PURE__ */ jsx("span", {
+							className: "truncate text-[12px] text-muted-foreground",
+							children: name
+						})]
+					}), /* @__PURE__ */ jsx("span", {
+						className: "font-mono text-[12px] font-semibold tabular-nums text-foreground",
+						children: seriesFormatter ? seriesFormatter(p.value, name) : formatAny(p.value, valueFormatter)
+					})]
+				}, `${name}-${i}`);
+			})
+		})]
+	});
+}
+/** Adapts Recharts 3 `<Tooltip content>` to the brand tooltip: `content={tooltipContent({ valueFormatter })}`. */
+function tooltipContent(options) {
+	return function BrandTooltipContent(p) {
+		return /* @__PURE__ */ jsx(ChartTooltip, {
+			active: p.active,
+			payload: p.payload,
+			label: p.label,
+			...options
+		});
+	};
+}
+//#endregion
+//#region src/states.tsx
+const stateBox = "flex w-full flex-col items-center justify-center gap-2 rounded-md border border-dashed border-border px-4 text-center";
+/** Placeholder for a chart without data. */
+function ChartEmpty({ height = 240, children, className }) {
+	const { empty } = useChartLabels();
+	return /* @__PURE__ */ jsxs("div", {
+		"data-chart-state": "empty",
+		className: cx(stateBox, className),
+		style: { height },
+		children: [/* @__PURE__ */ jsxs("svg", {
+			"aria-hidden": true,
+			viewBox: "0 0 24 24",
+			className: "h-5 w-5 fill-none stroke-muted-foreground",
+			strokeWidth: 1.75,
+			children: [/* @__PURE__ */ jsx("path", { d: "M3 3v18h18" }), /* @__PURE__ */ jsx("path", {
+				d: "M7 15h2M12 11h2M17 7h2",
+				strokeLinecap: "round"
+			})]
+		}), /* @__PURE__ */ jsx("p", {
+			className: "text-[13px] text-muted-foreground",
+			children: children === void 0 ? empty : children
+		})]
+	});
+}
+const SKELETON_BARS = [
+	42,
+	64,
+	50,
+	78,
+	58,
+	88,
+	70,
+	54
+];
+/** Skeleton plot (bars over a baseline); the pulse stops under prefers-reduced-motion. */
+function ChartLoading({ height = 240, label: labelProp, className }) {
+	const { loading } = useChartLabels();
+	const label = labelProp ?? loading;
+	return /* @__PURE__ */ jsxs("div", {
+		role: "status",
+		"aria-label": label,
+		"data-chart-state": "loading",
+		className: cx("flex w-full items-end gap-2 border-b border-border px-2", className),
+		style: { height },
+		children: [SKELETON_BARS.map((h, i) => /* @__PURE__ */ jsx("div", {
+			"aria-hidden": true,
+			className: "flex-1 animate-pulse rounded-t-sm bg-muted motion-reduce:animate-none",
+			style: { height: `${h}%` }
+		}, i)), /* @__PURE__ */ jsxs("span", {
+			className: "sr-only",
+			children: [label, "…"]
+		})]
+	});
+}
+/** Error placeholder with an optional retry action. */
+function ChartError({ height = 240, children, onRetry, className }) {
+	const { error, retry } = useChartLabels();
+	return /* @__PURE__ */ jsxs("div", {
+		role: "alert",
+		"data-chart-state": "error",
+		className: cx(stateBox, "border-destructive/40", className),
+		style: { height },
+		children: [/* @__PURE__ */ jsx("p", {
+			className: "text-[13px] text-destructive-text",
+			children: children === void 0 ? error : children
+		}), onRetry && /* @__PURE__ */ jsx("button", {
+			type: "button",
+			onClick: onRetry,
+			className: "h-8 rounded-md border border-border bg-card px-3 text-[12.5px] font-medium text-foreground transition-colors hover:bg-secondary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-focus-ring motion-reduce:transition-none",
+			children: retry
+		})]
+	});
+}
+/** Resolves the effective state: `ready` with no rows is `empty`. */
+function resolveState(state, rows) {
+	const s = state ?? "ready";
+	return s === "ready" && rows === 0 ? "empty" : s;
+}
+/** The placeholder for a non-ready state, or `null` when the chart should render. */
+function chartStateView(state, { height, emptyMessage, errorMessage, onRetry }) {
+	if (state === "loading") return /* @__PURE__ */ jsx(ChartLoading, { height });
+	if (state === "empty") return /* @__PURE__ */ jsx(ChartEmpty, {
+		height,
+		children: emptyMessage
+	});
+	if (state === "error") return /* @__PURE__ */ jsx(ChartError, {
+		height,
+		onRetry,
+		children: errorMessage
+	});
+	return null;
+}
+/** Plain data table: a screen-reader fallback for a chart (visually hidden by default). */
+function ChartDataTable({ caption, columns, rows, visible = false }) {
+	return /* @__PURE__ */ jsxs("table", {
+		"data-chart-table": "",
+		className: cx(visible ? "mt-3 w-full text-[12px]" : "sr-only"),
+		children: [
+			/* @__PURE__ */ jsx("caption", {
+				className: visible ? "mb-1 text-left text-muted-foreground" : void 0,
+				children: caption
+			}),
+			/* @__PURE__ */ jsx("thead", { children: /* @__PURE__ */ jsx("tr", { children: columns.map((c, i) => /* @__PURE__ */ jsx("th", {
+				scope: "col",
+				className: visible ? "text-left font-medium text-muted-foreground" : void 0,
+				children: c
+			}, i)) }) }),
+			/* @__PURE__ */ jsx("tbody", { children: rows.map((r, i) => /* @__PURE__ */ jsx("tr", { children: r.map((cell, j) => j === 0 ? /* @__PURE__ */ jsx("th", {
+				scope: "row",
+				className: visible ? "text-left font-normal text-foreground" : void 0,
+				children: cell
+			}, j) : /* @__PURE__ */ jsx("td", {
+				className: visible ? "font-mono tabular-nums text-foreground" : void 0,
+				children: cell
+			}, j)) }, i)) })
+		]
+	});
+}
+//#endregion
+//#region src/shared.tsx
+/** Reads a field from a datum without widening the public generic. */
+function field(d, key) {
+	return d[key];
+}
+function numField(d, key) {
+	const v = field(d, key);
+	return typeof v === "number" ? v : 0;
+}
+function accessibleName(kind, explicit, title, series) {
+	return explicit ?? title ?? (series.length ? `${kind}: ${series.join(", ")}` : kind);
+}
+/** Shared axis styling: no tick lines, no axis line, muted labels. */
+function axisProps(t) {
+	return {
+		stroke: t.axis,
+		tickLine: false,
+		axisLine: false,
+		tick: {
+			fill: t.text,
+			fontSize: 11
+		}
+	};
+}
+const CHART_MARGIN = {
+	top: 6,
+	right: 10,
+	left: 0,
+	bottom: 0
+};
+/** Figure wrapper: accessible name, optional legend above, responsive plot area, state placeholders. */
+function ChartFrame({ label, height, legend, className, state = "ready", table, footer, figureProps, emptyMessage, errorMessage, onRetry, children }) {
+	const placeholder = chartStateView(state, {
+		height,
+		emptyMessage,
+		errorMessage,
+		onRetry
+	});
+	return /* @__PURE__ */ jsx("div", {
+		...figureProps,
+		role: "figure",
+		"aria-label": label,
+		"aria-busy": state === "loading" || void 0,
+		className: cx("w-full font-sans", className),
+		children: placeholder ?? /* @__PURE__ */ jsxs(Fragment, { children: [
+			legend,
+			/* @__PURE__ */ jsx("div", {
+				className: "w-full",
+				style: { height },
+				children: /* @__PURE__ */ jsx(ResponsiveContainer, {
+					width: "100%",
+					height: "100%",
+					children
+				})
+			}),
+			footer,
+			table
+		] })
+	});
+}
+/** Data table fallback for an index × categories dataset. */
+function cartesianTable(caption, data, index, categories, format) {
+	return /* @__PURE__ */ jsx(ChartDataTable, {
+		caption,
+		columns: [index, ...categories],
+		rows: data.map((d) => [String(field(d, index)), ...categories.map((c) => format(field(d, c), c))])
+	});
+}
+//#endregion
+//#region src/ChartBrush.tsx
+/** Clamps a range to `[0, length - 1]`, ordered, at least `minSpan` points wide when possible. */
+function clampRange(range, length, minSpan = 1) {
+	const last = Math.max(0, length - 1);
+	if (!range) return [0, last];
+	let start = Math.round(Math.min(range[0], range[1]));
+	let end = Math.round(Math.max(range[0], range[1]));
+	start = Math.min(Math.max(0, start), last);
+	end = Math.min(Math.max(0, end), last);
+	const span = Math.min(minSpan, last);
+	if (end - start < span) {
+		if (start + span <= last) end = start + span;
+		else start = Math.max(0, end - span);
+	}
+	return [start, end];
+}
+/** Controlled/uncontrolled brush range; `null` inner state means "everything". */
+function useChartRange({ length, range, defaultRange, onRangeChange }) {
+	const [inner, setInner] = useState(defaultRange ?? null);
+	const current = clampRange(range ?? inner, length);
+	const set = (next) => {
+		const clamped = clampRange(next, length);
+		setInner(clamped);
+		onRangeChange?.(clamped);
+	};
+	return [current, set];
+}
+const thumbClass = cx("absolute top-1/2 z-10 h-7 w-3 -translate-x-1/2 -translate-y-1/2 cursor-ew-resize touch-none rounded-sm border border-primary bg-card shadow-sm", "after:absolute after:inset-y-2 after:left-1/2 after:w-px after:-translate-x-1/2 after:bg-primary", "focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-focus-ring");
+function previewPath(values) {
+	if (values.length < 2) return "";
+	const min = Math.min(...values);
+	const span = Math.max(...values) - min || 1;
+	return values.map((val, i) => `${i === 0 ? "M" : "L"}${(i / (values.length - 1) * 100).toFixed(2)},${(36 - (val - min) / span * 32).toFixed(2)}`).join(" ");
+}
+/**
+* Range brush under a time-series chart: two keyboard-accessible handles (`role="slider"`,
+* Arrow keys ±1, PageUp/PageDown ±10%, Home/End) and a draggable window to pan.
+*/
+function ChartBrush({ length, range, onRangeChange, labelOf, preview, label: labelProp, className }) {
+	const labels = useChartLabels();
+	const label = labelProp ?? labels.zoomRange;
+	const track = useRef(null);
+	const drag = useRef(null);
+	const last = Math.max(1, length - 1);
+	const [start, end] = range;
+	const pct = (i) => `${i / last * 100}%`;
+	const full = start === 0 && end === length - 1;
+	const step = Math.max(1, Math.round(length / 10));
+	const indexAt = (clientX) => {
+		const rect = track.current?.getBoundingClientRect();
+		if (!rect || rect.width === 0) return 0;
+		return Math.round((clientX - rect.left) / rect.width * last);
+	};
+	const begin = (e) => {
+		const part = e.currentTarget.dataset.brushHandle ?? "window";
+		const kind = part === "start" || part === "end" ? part : "window";
+		e.preventDefault();
+		e.stopPropagation();
+		e.currentTarget.setPointerCapture?.(e.pointerId);
+		drag.current = {
+			kind,
+			originIndex: indexAt(e.clientX),
+			originRange: range
+		};
+	};
+	const move = (e) => {
+		const d = drag.current;
+		if (!d) return;
+		const i = indexAt(e.clientX);
+		const [s0, e0] = d.originRange;
+		if (d.kind === "start") onRangeChange([Math.min(i, e0 - 1), e0]);
+		else if (d.kind === "end") onRangeChange([s0, Math.max(i, s0 + 1)]);
+		else {
+			const delta = Math.min(Math.max(i - d.originIndex, -s0), length - 1 - e0);
+			onRangeChange([s0 + delta, e0 + delta]);
+		}
+	};
+	const stop = () => {
+		drag.current = null;
+	};
+	const onKey = (which) => (e) => {
+		const value = which === "start" ? start : end;
+		const min = which === "start" ? 0 : start + 1;
+		const max = which === "start" ? end - 1 : length - 1;
+		let next = null;
+		if (e.key === "ArrowLeft" || e.key === "ArrowDown") next = value - 1;
+		else if (e.key === "ArrowRight" || e.key === "ArrowUp") next = value + 1;
+		else if (e.key === "PageDown") next = value - step;
+		else if (e.key === "PageUp") next = value + step;
+		else if (e.key === "Home") next = min;
+		else if (e.key === "End") next = max;
+		if (next == null) return;
+		e.preventDefault();
+		const clamped = Math.min(Math.max(next, min), max);
+		onRangeChange(which === "start" ? [clamped, end] : [start, clamped]);
+	};
+	const path = preview ? previewPath(preview) : "";
+	const thumb = (which) => {
+		const value = which === "start" ? start : end;
+		return /* @__PURE__ */ jsx("div", {
+			role: "slider",
+			tabIndex: 0,
+			"aria-label": which === "start" ? labels.rangeStart : labels.rangeEnd,
+			"aria-orientation": "horizontal",
+			"aria-valuemin": which === "start" ? 0 : start + 1,
+			"aria-valuemax": which === "start" ? end - 1 : length - 1,
+			"aria-valuenow": value,
+			"aria-valuetext": labelOf(value),
+			"data-brush-handle": which,
+			className: thumbClass,
+			style: { left: pct(value) },
+			onKeyDown: onKey(which),
+			onPointerDown: begin,
+			onPointerMove: move,
+			onPointerUp: stop,
+			onPointerCancel: stop
+		});
+	};
+	if (length < 2) return null;
+	return /* @__PURE__ */ jsxs("div", {
+		role: "group",
+		"aria-label": label,
+		"data-chart-brush": "",
+		className: cx("mt-3 px-1", className),
+		children: [/* @__PURE__ */ jsxs("div", {
+			ref: track,
+			className: "relative mx-1.5 h-10 rounded-md border border-border bg-secondary/30",
+			children: [
+				path && /* @__PURE__ */ jsx("svg", {
+					"aria-hidden": true,
+					viewBox: "0 0 100 40",
+					preserveAspectRatio: "none",
+					className: "absolute inset-0 h-full w-full",
+					children: /* @__PURE__ */ jsx("path", {
+						d: path,
+						fill: "none",
+						stroke: "hsl(var(--muted-foreground))",
+						strokeOpacity: .6,
+						strokeWidth: 1,
+						vectorEffect: "non-scaling-stroke"
+					})
+				}),
+				/* @__PURE__ */ jsx("div", {
+					"aria-hidden": true,
+					"data-brush-window": "",
+					className: "absolute inset-y-0 cursor-grab touch-none border-y border-primary/60 bg-primary/14 active:cursor-grabbing",
+					style: {
+						left: pct(start),
+						width: `${(end - start) / last * 100}%`
+					},
+					onPointerDown: begin,
+					onPointerMove: move,
+					onPointerUp: stop,
+					onPointerCancel: stop
+				}),
+				thumb("start"),
+				thumb("end")
+			]
+		}), /* @__PURE__ */ jsxs("div", {
+			className: "mt-1.5 flex items-center justify-between gap-2 text-[11.5px] text-muted-foreground",
+			children: [/* @__PURE__ */ jsxs("span", {
+				className: "font-mono tabular-nums",
+				children: [
+					labelOf(start),
+					" – ",
+					labelOf(end)
+				]
+			}), !full && /* @__PURE__ */ jsx("button", {
+				type: "button",
+				onClick: () => onRangeChange([0, length - 1]),
+				className: cx("px-1 font-medium text-foreground underline-offset-2 hover:underline", "rounded-sm focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-focus-ring"),
+				children: labels.resetZoom
+			})]
+		})]
+	});
+}
+//#endregion
+//#region src/live.ts
+const REDUCED_QUERY = "(prefers-reduced-motion: reduce)";
+function subscribeReduced(onChange) {
+	if (typeof window === "undefined" || !window.matchMedia) return () => {};
+	const mq = window.matchMedia(REDUCED_QUERY);
+	mq.addEventListener?.("change", onChange);
+	return () => mq.removeEventListener?.("change", onChange);
+}
+const getReduced = () => typeof window !== "undefined" && window.matchMedia ? window.matchMedia(REDUCED_QUERY).matches : false;
+/** `true` when the user asks for reduced motion (false on the server). */
+function usePrefersReducedMotion() {
+	return useSyncExternalStore(subscribeReduced, getReduced, () => false);
+}
+function reducer(state, action) {
+	const paused = state.hover || state.focus || state.manual;
+	switch (action.type) {
+		case "append": {
+			if (action.points.length === 0) return state;
+			const live = [...state.live, ...action.points].slice(-action.size);
+			return {
+				...state,
+				live,
+				pending: paused ? Math.min(action.size, state.pending + action.points.length) : 0
+			};
+		}
+		case "reset": {
+			const live = action.points.slice(-action.size);
+			return {
+				...state,
+				live,
+				frozen: paused ? live : null,
+				pending: 0
+			};
+		}
+		case "flag": {
+			if (state[action.flag] === action.on) return state;
+			const next = {
+				...state,
+				[action.flag]: action.on
+			};
+			const nowPaused = next.hover || next.focus || next.manual;
+			if (nowPaused && !paused) return {
+				...next,
+				frozen: state.live,
+				pending: 0
+			};
+			if (!nowPaused && paused) return {
+				...next,
+				frozen: null,
+				pending: 0
+			};
+			return next;
+		}
+	}
+}
+/**
+* State for a live-updating chart: a sliding window of points, with updates frozen while the
+* user hovers or focuses the chart (so a tooltip or a value does not move under them) and a
+* manual pause. Render with `animate={!reducedMotion}` for smooth transitions only when the
+* user has not asked for reduced motion.
+*/
+function useLiveSeries({ initial = [], windowSize = 60, pauseOnInteraction = true } = {}) {
+	const size = Math.max(1, Math.floor(windowSize));
+	const [state, dispatch] = useReducer(reducer, initial, (init) => ({
+		live: init.slice(-size),
+		frozen: null,
+		pending: 0,
+		hover: false,
+		focus: false,
+		manual: false
+	}));
+	const reducedMotion = usePrefersReducedMotion();
+	const append = useCallback((points) => dispatch({
+		type: "append",
+		points: Array.isArray(points) ? points : [points],
+		size
+	}), [size]);
+	const reset = useCallback((points = []) => dispatch({
+		type: "reset",
+		points,
+		size
+	}), [size]);
+	const pause = useCallback(() => dispatch({
+		type: "flag",
+		flag: "manual",
+		on: true
+	}), []);
+	const resume = useCallback(() => dispatch({
+		type: "flag",
+		flag: "manual",
+		on: false
+	}), []);
+	const pauseProps = useMemo(() => ({
+		onPointerEnter: () => pauseOnInteraction && dispatch({
+			type: "flag",
+			flag: "hover",
+			on: true
+		}),
+		onPointerLeave: () => dispatch({
+			type: "flag",
+			flag: "hover",
+			on: false
+		}),
+		onFocus: () => pauseOnInteraction && dispatch({
+			type: "flag",
+			flag: "focus",
+			on: true
+		}),
+		onBlur: (e) => {
+			if (e.currentTarget.contains(e.relatedTarget)) return;
+			dispatch({
+				type: "flag",
+				flag: "focus",
+				on: false
+			});
+		}
+	}), [pauseOnInteraction]);
+	const paused = state.hover || state.focus || state.manual;
+	return {
+		data: paused && state.frozen ? state.frozen : state.live,
+		append,
+		reset,
+		paused,
+		manuallyPaused: state.manual,
+		pause,
+		resume,
+		togglePaused: state.manual ? resume : pause,
+		pending: state.pending,
+		reducedMotion,
+		pauseProps
+	};
+}
+//#endregion
+//#region src/overlays.tsx
+/** Stroke token and contrast-safe text token of each tone. */
+const TONE_TOKENS = {
+	neutral: {
+		stroke: "--muted-foreground",
+		text: "--muted-foreground"
+	},
+	primary: {
+		stroke: "--primary",
+		text: "--primary-text"
+	},
+	success: {
+		stroke: "--success",
+		text: "--success-text"
+	},
+	warning: {
+		stroke: "--warning",
+		text: "--warning-text"
+	},
+	destructive: {
+		stroke: "--destructive",
+		text: "--destructive-text"
+	},
+	info: {
+		stroke: "--info",
+		text: "--foreground"
+	}
+};
+const v = (token) => `hsl(var(${token}))`;
+/** A stable key for an annotation (x + label). */
+const annotationKey = (a) => `${String(a.x)}::${a.label}`;
+function boxOf(props, key = "viewBox") {
+	const vb = props?.[key];
+	if (!vb || typeof vb.x !== "number" || typeof vb.y !== "number") return null;
+	return {
+		x: vb.x,
+		y: vb.y,
+		width: vb.width ?? 0,
+		height: vb.height ?? 0
+	};
+}
+function plotRightOf(props) {
+	const parent = boxOf(props, "parentViewBox");
+	return parent ? parent.x + parent.width : void 0;
+}
+function ThresholdLabel(props) {
+	const { label, tone, vertical } = props;
+	const box = boxOf(props);
+	if (!box) return null;
+	const fill = v(TONE_TOKENS[tone].text);
+	if (vertical) return /* @__PURE__ */ jsx("text", {
+		x: box.x + 4,
+		y: box.y + 12,
+		fill,
+		fontSize: 11,
+		fontWeight: 500,
+		"data-chart-threshold-label": "",
+		children: label
+	});
+	return /* @__PURE__ */ jsx("text", {
+		x: box.x + box.width - 4,
+		y: box.y - 5,
+		textAnchor: "end",
+		fill,
+		fontSize: 11,
+		fontWeight: 500,
+		"data-chart-threshold-label": "",
+		children: label
+	});
+}
+function AnnotationMarker({ box, annotation, active, onActive, plotRight }) {
+	const tone = annotation.tone ?? "neutral";
+	const key = annotationKey(annotation);
+	const tip = annotation.description ? `${annotation.label}: ${annotation.description}` : annotation.label;
+	const tipWidth = Math.min(240, Math.max(90, tip.length * 6.2 + 16));
+	const tipX = plotRight != null && box.x + tipWidth + 12 > plotRight ? box.x - tipWidth - 8 : box.x + 8;
+	return /* @__PURE__ */ jsxs("g", {
+		"aria-hidden": true,
+		"data-chart-annotation": key,
+		"data-active": active || void 0,
+		onPointerEnter: () => onActive(key),
+		onPointerLeave: () => onActive(null),
+		style: { cursor: "default" },
+		children: [
+			/* @__PURE__ */ jsx("title", { children: tip }),
+			/* @__PURE__ */ jsx("path", {
+				d: `M${box.x},${box.y} l7,4 l-7,4 z`,
+				fill: v(TONE_TOKENS[tone].stroke)
+			}),
+			/* @__PURE__ */ jsx("text", {
+				x: box.x + 10,
+				y: box.y + 8,
+				fill: v(TONE_TOKENS[tone].text),
+				fontSize: 11,
+				fontWeight: active ? 600 : 500,
+				children: annotation.label
+			}),
+			/* @__PURE__ */ jsx("rect", {
+				x: box.x - 6,
+				y: box.y,
+				width: 12,
+				height: Math.max(box.height, 1),
+				fill: "transparent"
+			}),
+			active && /* @__PURE__ */ jsxs("g", {
+				"data-chart-annotation-tooltip": "",
+				children: [/* @__PURE__ */ jsx("rect", {
+					x: tipX,
+					y: box.y + 14,
+					width: tipWidth,
+					height: 24,
+					rx: 6,
+					fill: v("--popover"),
+					stroke: v("--border")
+				}), /* @__PURE__ */ jsx("text", {
+					x: tipX + 8,
+					y: box.y + 30,
+					fill: v("--popover-foreground"),
+					fontSize: 11.5,
+					children: tip
+				})]
+			})
+		]
+	});
+}
+/** Recharts clones a label element with the line's `viewBox` (and the plot's `parentViewBox`). */
+function AnnotationLabel(props) {
+	const box = boxOf(props);
+	if (!box) return null;
+	return /* @__PURE__ */ jsx(AnnotationMarker, {
+		box,
+		plotRight: plotRightOf(props),
+		annotation: props.annotation,
+		active: props.active,
+		onActive: props.onActive
+	});
+}
+/**
+* Recharts `<ReferenceLine>` elements for thresholds and annotations. Returned as an array so
+* they are direct children of the chart.
+*/
+function referenceElements({ thresholds = [], annotations = [], vertical = false, categories, activeAnnotation, onActiveAnnotation, yAxisIdOf }) {
+	const out = [];
+	thresholds.forEach((th, i) => {
+		const tone = th.tone ?? "neutral";
+		const pos = vertical ? { x: th.value } : { y: th.value };
+		out.push(/* @__PURE__ */ jsx(ReferenceLine, {
+			...pos,
+			...yAxisIdOf ? { yAxisId: yAxisIdOf(th.axis ?? "left") } : {},
+			stroke: v(TONE_TOKENS[tone].stroke),
+			strokeWidth: 1.5,
+			strokeDasharray: "6 4",
+			ifOverflow: "extendDomain",
+			label: /* @__PURE__ */ jsx(ThresholdLabel, {
+				label: th.label,
+				tone,
+				vertical
+			})
+		}, `threshold-${i}`));
+	});
+	annotations.forEach((a) => {
+		if (!categories.has(String(a.x))) return;
+		const key = annotationKey(a);
+		const active = activeAnnotation === key;
+		const pos = vertical ? { y: a.x } : { x: a.x };
+		out.push(/* @__PURE__ */ jsx(ReferenceLine, {
+			...pos,
+			...yAxisIdOf ? { yAxisId: yAxisIdOf("left") } : {},
+			stroke: v(TONE_TOKENS[a.tone ?? "neutral"].stroke),
+			strokeWidth: active ? 2 : 1.5,
+			strokeDasharray: "2 3",
+			label: /* @__PURE__ */ jsx(AnnotationLabel, {
+				annotation: a,
+				active,
+				onActive: onActiveAnnotation
+			})
+		}, `annotation-${key}`));
+	});
+	return out;
+}
+/**
+* Text list of the thresholds and annotations under a chart: the keyboard and screen-reader
+* route to the same information as the in-plot markers. Focusing or hovering an annotation
+* highlights its marker and opens its tooltip in the plot.
+*/
+function ChartMarkers({ thresholds = [], annotations = [], valueFormatter, active = null, onActiveChange, className }) {
+	const labels = useChartLabels();
+	const id = useId();
+	if (thresholds.length === 0 && annotations.length === 0) return null;
+	const fmt = (n) => valueFormatter ? valueFormatter(n) : String(n);
+	return /* @__PURE__ */ jsxs("ul", {
+		"aria-label": labels.markers,
+		className: cx("mt-2 flex flex-wrap items-center gap-x-4 gap-y-1.5 px-1 text-[12px] text-muted-foreground", className),
+		children: [thresholds.map((th, i) => /* @__PURE__ */ jsxs("li", {
+			className: "flex items-center gap-1.5",
+			"data-chart-marker": "threshold",
+			children: [/* @__PURE__ */ jsx("svg", {
+				"aria-hidden": true,
+				width: "18",
+				height: "4",
+				className: "shrink-0",
+				children: /* @__PURE__ */ jsx("line", {
+					x1: "0",
+					y1: "2",
+					x2: "18",
+					y2: "2",
+					stroke: v(TONE_TOKENS[th.tone ?? "neutral"].stroke),
+					strokeWidth: 1.5,
+					strokeDasharray: "6 4"
+				})
+			}), /* @__PURE__ */ jsxs("span", { children: [
+				/* @__PURE__ */ jsx("span", {
+					className: "sr-only",
+					children: labels.threshold
+				}),
+				" ",
+				th.label,
+				" ",
+				/* @__PURE__ */ jsxs("span", {
+					className: "font-mono tabular-nums",
+					children: [
+						"(",
+						fmt(th.value),
+						")"
+					]
+				})
+			] })]
+		}, `t-${i}`)), annotations.map((a) => {
+			const key = annotationKey(a);
+			const descId = `${id}-${key}`;
+			return /* @__PURE__ */ jsxs("li", {
+				"data-chart-marker": "annotation",
+				children: [/* @__PURE__ */ jsxs("button", {
+					type: "button",
+					"aria-describedby": a.description ? descId : void 0,
+					onFocus: () => onActiveChange?.(key),
+					onBlur: () => onActiveChange?.(null),
+					onPointerEnter: () => onActiveChange?.(key),
+					onPointerLeave: () => onActiveChange?.(null),
+					onKeyDown: (e) => {
+						if (e.key === "Escape") onActiveChange?.(null);
+					},
+					className: cx("flex items-center gap-1.5 hover:text-foreground", active === key && "text-foreground", legendFocus),
+					children: [/* @__PURE__ */ jsx("svg", {
+						"aria-hidden": true,
+						width: "10",
+						height: "10",
+						viewBox: "0 0 10 10",
+						className: "shrink-0",
+						children: /* @__PURE__ */ jsx("path", {
+							d: "M1,1 l8,4 l-8,4 z",
+							fill: v(TONE_TOKENS[a.tone ?? "neutral"].stroke)
+						})
+					}), /* @__PURE__ */ jsxs("span", { children: [
+						/* @__PURE__ */ jsx("span", {
+							className: "sr-only",
+							children: labels.markerAt.replace("{x}", String(a.x))
+						}),
+						" ",
+						a.label
+					] })]
+				}), a.description && /* @__PURE__ */ jsx("span", {
+					id: descId,
+					className: "sr-only",
+					children: a.description
+				})]
+			}, key);
+		})]
+	});
+}
+/** State of the highlighted annotation (shared by the plot markers and the marker list). */
+function useActiveAnnotation() {
+	return useState(null);
+}
+//#endregion
+//#region src/cartesian-extras.tsx
+function useCartesianExtras(data, index, { thresholds = [], annotations = [], brush = false, range, defaultRange, onRangeChange, animate = false }, { valueFormatter, previewKey, vertical = false, yAxisIdOf } = {}) {
+	const [current, setRange] = useChartRange({
+		length: data.length,
+		range,
+		defaultRange,
+		onRangeChange
+	});
+	const [active, setActive] = useActiveAnnotation();
+	const reduced = usePrefersReducedMotion();
+	const view = brush ? data.slice(current[0], current[1] + 1) : data;
+	const categories = new Set(view.map((d) => String(field(d, index))));
+	const shown = annotations.filter((a) => categories.has(String(a.x)));
+	const references = referenceElements({
+		thresholds,
+		annotations: shown,
+		vertical,
+		categories,
+		activeAnnotation: active,
+		onActiveAnnotation: setActive,
+		yAxisIdOf
+	});
+	const labelOf = (i) => {
+		const d = data[i];
+		return d ? String(field(d, index)) : "";
+	};
+	return {
+		view,
+		references,
+		footer: /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(ChartMarkers, {
+			thresholds,
+			annotations: shown,
+			valueFormatter,
+			active: active && shown.some((a) => annotationKey(a) === active) ? active : null,
+			onActiveChange: setActive
+		}), brush && /* @__PURE__ */ jsx(ChartBrush, {
+			length: data.length,
+			range: current,
+			onRangeChange: setRange,
+			labelOf,
+			preview: previewKey ? data.map((d) => numField(d, previewKey)) : void 0
+		})] }),
+		animation: {
+			isAnimationActive: animate && !reduced,
+			animationDuration: 300
+		}
+	};
+}
+//#endregion
+//#region src/theme.ts
+/** Series colour name → brand token. Green primary is the hero; the rest are categorical accents. */
+const SERIES_TOKENS = {
+	primary: "--primary",
+	emerald: "--brand-accent",
+	violet: "--category-violet",
+	cyan: "--category-cyan",
+	amber: "--category-amber",
+	rose: "--category-rose",
+	info: "--info"
+};
+/**
+* Default series order: primary first, then the categorical accents ordered so every adjacent
+* pair differs in luminance by ≥ 1.5:1 in all three themes (see `palette.ts`).
+*/
+const CHART_COLORS = [
+	"primary",
+	"violet",
+	"cyan",
+	"rose",
+	"amber"
+];
+/** `hsl(var(--token))`: resolved by the browser (SVG fill/stroke and inline styles), so it is SSR-safe and follows theme switches. */
+const cssVarColor = (token, alpha) => alpha == null ? `hsl(var(${token}))` : `hsl(var(${token}) / ${alpha})`;
+function buildTheme(theme, c) {
+	return {
+		theme,
+		grid: c("--border"),
+		axis: c("--muted-foreground", .5),
+		text: c("--muted-foreground"),
+		cursor: c("--muted-foreground", .32),
+		barCursor: c("--secondary", .55),
+		surface: c("--card"),
+		color: (name, alpha) => c(SERIES_TOKENS[name] ?? SERIES_TOKENS.primary, alpha)
+	};
+}
+const varThemes = /* @__PURE__ */ new Map();
+let resolvedSnapshot = null;
+function varTheme(theme) {
+	let t = varThemes.get(theme);
+	if (!t) {
+		t = buildTheme(theme, cssVarColor);
+		varThemes.set(theme, t);
+	}
+	return t;
+}
+function subscribe(onChange) {
+	return observeTheme(() => {
+		resolvedSnapshot = null;
+		onChange();
+	});
+}
+const SERVER_THEME = varTheme("dark");
+const getServerSnapshot = () => SERVER_THEME;
+const getVarSnapshot = () => varTheme(currentTheme());
+function getResolvedSnapshot() {
+	const theme = currentTheme();
+	if (!resolvedSnapshot || resolvedSnapshot.theme !== theme) resolvedSnapshot = buildTheme(theme, (token, alpha) => tokenColor(token, alpha));
+	return resolvedSnapshot;
+}
+/**
+* Brand colours for Recharts. By default every colour is a `hsl(var(--token))` string: SVG
+* fill/stroke attributes and inline styles resolve it, so server and client render the same
+* markup and a theme switch re-skins the chart without re-rendering. `theme` follows the
+* <html> class after mount. With `{ resolved: true }` colours are read from the live CSS
+* variables once mounted (the server and hydration render use the `var()` strings).
+*/
+function useChartTheme({ resolved = false } = {}) {
+	return useSyncExternalStore(subscribe, resolved ? getResolvedSnapshot : getVarSnapshot, getServerSnapshot);
+}
+/** Colour for the i-th series, cycling through `colors`. */
+function seriesColor(t, colors, i) {
+	const name = colors.length ? colors[i % colors.length] : void 0;
+	return t.color(name ?? "primary");
+}
+//#endregion
+//#region src/AreaChart.tsx
+/** Area chart: flat fills (no gradient), no entry animation, interactive legend. */
+function AreaChart({ data, index, categories, colors = CHART_COLORS, valueFormatter = identity, stacked = false, showLegend = true, showGrid = true, showYAxis = true, curve = "monotone", height = 288, title, description, className, "aria-label": ariaLabel, state, emptyMessage, errorMessage, onRetry, dataTable = false, thresholds, annotations, brush, range, defaultRange, onRangeChange, animate }) {
+	const t = useChartTheme();
+	const [hidden, toggle] = useHiddenSeries();
+	const x = useCartesianExtras(data, index, {
+		thresholds,
+		annotations,
+		brush,
+		range,
+		defaultRange,
+		onRangeChange,
+		animate
+	}, {
+		valueFormatter,
+		previewKey: categories[0]
+	});
+	const col = (i) => seriesColor(t, colors, i);
+	const legend = categories.map((c, i) => ({
+		key: c,
+		label: c,
+		color: col(i)
+	}));
+	const name = accessibleName(useChartLabels().areaChart, ariaLabel, title, categories);
+	return /* @__PURE__ */ jsx(ChartFrame, {
+		label: name,
+		state: resolveState(state, data.length),
+		emptyMessage,
+		errorMessage,
+		onRetry,
+		table: dataTable && cartesianTable(name, x.view, index, categories, (v) => formatAny(v, valueFormatter)),
+		height,
+		className,
+		footer: x.footer,
+		legend: showLegend && /* @__PURE__ */ jsx(ChartLegend, {
+			className: "mb-3 px-1",
+			items: legend,
+			hidden,
+			onToggle: toggle
+		}),
+		children: /* @__PURE__ */ jsxs(AreaChart$1, {
+			data: x.view,
+			margin: CHART_MARGIN,
+			accessibilityLayer: true,
+			title,
+			desc: description,
+			children: [
+				showGrid && /* @__PURE__ */ jsx(CartesianGrid, {
+					strokeDasharray: "3 3",
+					stroke: t.grid,
+					vertical: false
+				}),
+				/* @__PURE__ */ jsx(XAxis, {
+					dataKey: index,
+					...axisProps(t),
+					dy: 8,
+					minTickGap: 20
+				}),
+				showYAxis && /* @__PURE__ */ jsx(YAxis, {
+					...axisProps(t),
+					width: 50,
+					tickFormatter: valueFormatter
+				}),
+				x.references,
+				/* @__PURE__ */ jsx(Tooltip, {
+					isAnimationActive: false,
+					cursor: {
+						stroke: t.cursor,
+						strokeWidth: 1
+					},
+					content: tooltipContent({ valueFormatter })
+				}),
+				categories.map((c, i) => /* @__PURE__ */ jsx(Area, {
+					type: curve,
+					dataKey: c,
+					name: c,
+					hide: hidden.has(c),
+					stackId: stacked ? "1" : void 0,
+					stroke: col(i),
+					strokeWidth: 2,
+					fill: col(i),
+					fillOpacity: stacked ? .82 : .14,
+					dot: false,
+					activeDot: {
+						r: 3.5,
+						strokeWidth: 0
+					},
+					...x.animation
+				}, c))
+			]
+		})
+	});
+}
+//#endregion
+//#region src/BarChart.tsx
+/** Bar chart: vertical, horizontal or stacked; flat fills, no animation. */
+function BarChart({ data, index, categories, colors = CHART_COLORS, valueFormatter = identity, stacked = false, layout = "horizontal", showLegend = true, showGrid = true, showYAxis = true, height = 288, title, description, className, "aria-label": ariaLabel, state, emptyMessage, errorMessage, onRetry, dataTable = false, thresholds, annotations, brush, range, defaultRange, onRangeChange, animate }) {
+	const t = useChartTheme();
+	const [hidden, toggle] = useHiddenSeries();
+	const col = (i) => seriesColor(t, colors, i);
+	const legend = categories.map((c, i) => ({
+		key: c,
+		label: c,
+		color: col(i)
+	}));
+	const vertical = layout === "vertical";
+	const x = useCartesianExtras(data, index, {
+		thresholds,
+		annotations,
+		brush,
+		range,
+		defaultRange,
+		onRangeChange,
+		animate
+	}, {
+		valueFormatter,
+		previewKey: categories[0],
+		vertical
+	});
+	const radius = stacked ? 0 : vertical ? [
+		0,
+		3,
+		3,
+		0
+	] : [
+		3,
+		3,
+		0,
+		0
+	];
+	const name = accessibleName(useChartLabels().barChart, ariaLabel, title, categories);
+	return /* @__PURE__ */ jsx(ChartFrame, {
+		label: name,
+		state: resolveState(state, data.length),
+		emptyMessage,
+		errorMessage,
+		onRetry,
+		table: dataTable && cartesianTable(name, x.view, index, categories, (v) => formatAny(v, valueFormatter)),
+		height,
+		className,
+		footer: x.footer,
+		legend: showLegend && categories.length > 1 && /* @__PURE__ */ jsx(ChartLegend, {
+			className: "mb-3 px-1",
+			items: legend,
+			hidden,
+			onToggle: toggle
+		}),
+		children: /* @__PURE__ */ jsxs(BarChart$1, {
+			data: x.view,
+			layout,
+			margin: CHART_MARGIN,
+			barCategoryGap: vertical ? "22%" : "28%",
+			accessibilityLayer: true,
+			title,
+			desc: description,
+			children: [
+				showGrid && /* @__PURE__ */ jsx(CartesianGrid, {
+					strokeDasharray: "3 3",
+					stroke: t.grid,
+					vertical,
+					horizontal: !vertical
+				}),
+				vertical ? /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(XAxis, {
+					type: "number",
+					...axisProps(t),
+					tickFormatter: valueFormatter
+				}), /* @__PURE__ */ jsx(YAxis, {
+					type: "category",
+					dataKey: index,
+					...axisProps(t),
+					width: 92
+				})] }) : /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(XAxis, {
+					dataKey: index,
+					...axisProps(t),
+					dy: 8,
+					minTickGap: 16
+				}), showYAxis && /* @__PURE__ */ jsx(YAxis, {
+					...axisProps(t),
+					width: 50,
+					tickFormatter: valueFormatter
+				})] }),
+				x.references,
+				/* @__PURE__ */ jsx(Tooltip, {
+					isAnimationActive: false,
+					cursor: { fill: t.barCursor },
+					content: tooltipContent({ valueFormatter })
+				}),
+				categories.map((c, i) => /* @__PURE__ */ jsx(Bar, {
+					dataKey: c,
+					name: c,
+					hide: hidden.has(c),
+					stackId: stacked ? "1" : void 0,
+					fill: col(i),
+					radius,
+					maxBarSize: vertical ? 22 : 46,
+					...x.animation
+				}, c))
+			]
+		})
+	});
+}
+//#endregion
+//#region src/LineChart.tsx
+const asTick = (v) => typeof v === "number" ? v : String(v);
+/** Line chart: 2px strokes, no dots until hover, no animation. */
+function LineChart({ data, index, categories, colors = CHART_COLORS, valueFormatter = identity, showLegend = true, showGrid = true, showYAxis = true, startEndOnly = false, curve = "monotone", height = 288, title, description, className, "aria-label": ariaLabel, state, emptyMessage, errorMessage, onRetry, dataTable = false, thresholds, annotations, brush, range, defaultRange, onRangeChange, animate }) {
+	const t = useChartTheme();
+	const [hidden, toggle] = useHiddenSeries();
+	const x = useCartesianExtras(data, index, {
+		thresholds,
+		annotations,
+		brush,
+		range,
+		defaultRange,
+		onRangeChange,
+		animate
+	}, {
+		valueFormatter,
+		previewKey: categories[0]
+	});
+	const col = (i) => seriesColor(t, colors, i);
+	const legend = categories.map((c, i) => ({
+		key: c,
+		label: c,
+		color: col(i)
+	}));
+	const first = x.view[0];
+	const last = x.view[x.view.length - 1];
+	const xTicks = startEndOnly && first && last ? [asTick(field(first, index)), asTick(field(last, index))] : void 0;
+	const name = accessibleName(useChartLabels().lineChart, ariaLabel, title, categories);
+	return /* @__PURE__ */ jsx(ChartFrame, {
+		label: name,
+		state: resolveState(state, data.length),
+		emptyMessage,
+		errorMessage,
+		onRetry,
+		table: dataTable && cartesianTable(name, x.view, index, categories, (v) => formatAny(v, valueFormatter)),
+		height,
+		className,
+		footer: x.footer,
+		legend: showLegend && /* @__PURE__ */ jsx(ChartLegend, {
+			className: "mb-3 px-1",
+			items: legend,
+			hidden,
+			onToggle: toggle
+		}),
+		children: /* @__PURE__ */ jsxs(LineChart$1, {
+			data: x.view,
+			margin: CHART_MARGIN,
+			accessibilityLayer: true,
+			title,
+			desc: description,
+			children: [
+				showGrid && /* @__PURE__ */ jsx(CartesianGrid, {
+					strokeDasharray: "3 3",
+					stroke: t.grid,
+					vertical: false
+				}),
+				/* @__PURE__ */ jsx(XAxis, {
+					dataKey: index,
+					...axisProps(t),
+					dy: 8,
+					minTickGap: startEndOnly ? 0 : 20,
+					ticks: xTicks,
+					interval: startEndOnly ? "preserveStartEnd" : void 0
+				}),
+				showYAxis && /* @__PURE__ */ jsx(YAxis, {
+					...axisProps(t),
+					width: 50,
+					tickFormatter: valueFormatter
+				}),
+				x.references,
+				/* @__PURE__ */ jsx(Tooltip, {
+					isAnimationActive: false,
+					cursor: {
+						stroke: t.cursor,
+						strokeWidth: 1
+					},
+					content: tooltipContent({ valueFormatter })
+				}),
+				categories.map((c, i) => /* @__PURE__ */ jsx(Line, {
+					type: curve,
+					dataKey: c,
+					name: c,
+					hide: hidden.has(c),
+					stroke: col(i),
+					strokeWidth: 2,
+					dot: false,
+					activeDot: {
+						r: 3.5,
+						strokeWidth: 0
+					},
+					...x.animation
+				}, c))
+			]
+		})
+	});
+}
+//#endregion
+//#region src/ComboChart.tsx
+/** Combo chart: bars on the left axis, a line on the right axis. */
+function ComboChart({ data, index, barSeries, lineSeries, barColor = "primary", lineColor = "amber", barFormatter = identity, lineFormatter = identity, showLegend = true, showGrid = true, height = 300, title, description, className, "aria-label": ariaLabel, state, emptyMessage, errorMessage, onRetry, dataTable = false, thresholds, annotations, brush, range, defaultRange, onRangeChange, animate }) {
+	const t = useChartTheme();
+	const [hidden, toggle] = useHiddenSeries();
+	const x = useCartesianExtras(data, index, {
+		thresholds,
+		annotations,
+		brush,
+		range,
+		defaultRange,
+		onRangeChange,
+		animate
+	}, {
+		valueFormatter: barFormatter,
+		previewKey: barSeries,
+		yAxisIdOf: (axis) => axis
+	});
+	const bc = t.color(barColor);
+	const lc = t.color(lineColor);
+	const legend = [{
+		key: barSeries,
+		label: barSeries,
+		color: bc
+	}, {
+		key: lineSeries,
+		label: lineSeries,
+		color: lc
+	}];
+	const fmtSeries = (v, name) => formatAny(v, name === lineSeries ? lineFormatter : barFormatter);
+	const name = accessibleName(useChartLabels().comboChart, ariaLabel, title, [barSeries, lineSeries]);
+	return /* @__PURE__ */ jsx(ChartFrame, {
+		label: name,
+		state: resolveState(state, data.length),
+		emptyMessage,
+		errorMessage,
+		onRetry,
+		table: dataTable && cartesianTable(name, x.view, index, [barSeries, lineSeries], fmtSeries),
+		height,
+		className,
+		footer: x.footer,
+		legend: showLegend && /* @__PURE__ */ jsx(ChartLegend, {
+			className: "mb-3 px-1",
+			items: legend,
+			hidden,
+			onToggle: toggle
+		}),
+		children: /* @__PURE__ */ jsxs(ComposedChart, {
+			data: x.view,
+			margin: {
+				top: 6,
+				right: 6,
+				left: 0,
+				bottom: 0
+			},
+			barCategoryGap: "30%",
+			accessibilityLayer: true,
+			title,
+			desc: description,
+			children: [
+				showGrid && /* @__PURE__ */ jsx(CartesianGrid, {
+					strokeDasharray: "3 3",
+					stroke: t.grid,
+					vertical: false
+				}),
+				/* @__PURE__ */ jsx(XAxis, {
+					dataKey: index,
+					...axisProps(t),
+					dy: 8,
+					minTickGap: 16
+				}),
+				/* @__PURE__ */ jsx(YAxis, {
+					yAxisId: "left",
+					...axisProps(t),
+					width: 48,
+					tickFormatter: barFormatter
+				}),
+				/* @__PURE__ */ jsx(YAxis, {
+					yAxisId: "right",
+					orientation: "right",
+					...axisProps(t),
+					width: 48,
+					tickFormatter: lineFormatter
+				}),
+				x.references,
+				/* @__PURE__ */ jsx(Tooltip, {
+					isAnimationActive: false,
+					cursor: { fill: t.barCursor },
+					content: tooltipContent({ seriesFormatter: fmtSeries })
+				}),
+				/* @__PURE__ */ jsx(Bar, {
+					yAxisId: "left",
+					dataKey: barSeries,
+					name: barSeries,
+					hide: hidden.has(barSeries),
+					fill: bc,
+					radius: [
+						3,
+						3,
+						0,
+						0
+					],
+					maxBarSize: 42,
+					...x.animation
+				}),
+				/* @__PURE__ */ jsx(Line, {
+					yAxisId: "right",
+					type: "monotone",
+					dataKey: lineSeries,
+					name: lineSeries,
+					hide: hidden.has(lineSeries),
+					stroke: lc,
+					strokeWidth: 2,
+					dot: false,
+					activeDot: {
+						r: 3.5,
+						strokeWidth: 0
+					},
+					...x.animation
+				})
+			]
+		})
+	});
+}
+//#endregion
+//#region src/DonutChart.tsx
+/** Donut / pie with a clickable value legend; hidden slices drop out of the total. */
+function DonutChart({ data, index, category, colors = CHART_COLORS, valueFormatter = identity, variant = "donut", showLegend = true, centerLabel, height = 264, title, description, className, "aria-label": ariaLabel, state, emptyMessage, errorMessage, onRetry, dataTable = false }) {
+	const t = useChartTheme();
+	const [hidden, toggle] = useHiddenSeries();
+	const slices = data.map((d, i) => ({
+		name: String(field(d, index)),
+		value: numField(d, category),
+		fill: seriesColor(t, colors, i)
+	}));
+	const shown = slices.filter((s) => !hidden.has(s.name));
+	const total = shown.reduce((sum, s) => sum + s.value, 0);
+	const isDonut = variant === "donut";
+	const labels = useChartLabels();
+	const name = accessibleName(isDonut ? labels.donutChart : labels.pieChart, ariaLabel, title, slices.map((s) => s.name));
+	const effective = resolveState(state, slices.length);
+	const placeholder = chartStateView(effective, {
+		height,
+		emptyMessage,
+		errorMessage,
+		onRetry
+	});
+	if (placeholder) return /* @__PURE__ */ jsx("div", {
+		role: "figure",
+		"aria-label": name,
+		"aria-busy": effective === "loading" || void 0,
+		className: cx("w-full font-sans", className),
+		children: placeholder
+	});
+	return /* @__PURE__ */ jsxs("div", {
+		role: "figure",
+		"aria-label": name,
+		className: cx("flex flex-col items-center gap-6 font-sans sm:flex-row", className),
+		children: [
+			/* @__PURE__ */ jsxs("div", {
+				className: "relative shrink-0",
+				style: {
+					width: height,
+					height
+				},
+				children: [/* @__PURE__ */ jsx(ResponsiveContainer, {
+					width: "100%",
+					height: "100%",
+					children: /* @__PURE__ */ jsxs(PieChart, {
+						accessibilityLayer: true,
+						title,
+						desc: description,
+						children: [/* @__PURE__ */ jsx(Pie, {
+							data: shown,
+							dataKey: "value",
+							nameKey: "name",
+							cx: "50%",
+							cy: "50%",
+							innerRadius: isDonut ? "64%" : 0,
+							outerRadius: "94%",
+							paddingAngle: shown.length > 1 ? 1.5 : 0,
+							stroke: t.surface,
+							strokeWidth: 2,
+							isAnimationActive: false
+						}), /* @__PURE__ */ jsx(Tooltip, {
+							isAnimationActive: false,
+							content: tooltipContent({ valueFormatter })
+						})]
+					})
+				}), isDonut && centerLabel && /* @__PURE__ */ jsxs("div", {
+					className: "pointer-events-none absolute inset-0 flex flex-col items-center justify-center",
+					children: [/* @__PURE__ */ jsx("div", {
+						className: "font-mono text-[20px] font-semibold tabular-nums text-foreground",
+						children: valueFormatter(total)
+					}), /* @__PURE__ */ jsx("div", {
+						className: "mt-0.5 text-[11px] text-muted-foreground",
+						children: centerLabel
+					})]
+				})]
+			}),
+			showLegend && /* @__PURE__ */ jsx("div", {
+				className: "flex w-full min-w-0 flex-1 flex-col gap-2",
+				children: slices.map((s) => {
+					const off = hidden.has(s.name);
+					return /* @__PURE__ */ jsxs("button", {
+						type: "button",
+						"aria-pressed": !off,
+						onClick: () => toggle(s.name),
+						className: cx("group flex items-center justify-between gap-3", off && "opacity-40", "rounded-sm focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-focus-ring"),
+						children: [/* @__PURE__ */ jsxs("span", {
+							className: "flex min-w-0 items-center gap-2",
+							children: [/* @__PURE__ */ jsx("span", {
+								"aria-hidden": true,
+								className: cx("h-2.5 w-2.5 shrink-0 rounded-[3px]", off && "grayscale"),
+								style: { background: s.fill }
+							}), /* @__PURE__ */ jsx("span", {
+								className: cx("truncate text-[12.5px] text-muted-foreground", off ? "line-through" : "transition-colors group-hover:text-foreground"),
+								children: s.name
+							})]
+						}), /* @__PURE__ */ jsx("span", {
+							className: "shrink-0 font-mono text-[12px] font-medium tabular-nums text-foreground",
+							children: valueFormatter(s.value)
+						})]
+					}, s.name);
+				})
+			}),
+			dataTable && /* @__PURE__ */ jsx(ChartDataTable, {
+				caption: name,
+				columns: [index, category],
+				rows: slices.map((sl) => [sl.name, valueFormatter(sl.value)])
+			})
+		]
+	});
+}
+//#endregion
+//#region src/BarList.tsx
+const BAR_LIST_BG = {
+	primary: "bg-primary/20",
+	violet: "bg-category-violet/20",
+	cyan: "bg-category-cyan/20",
+	amber: "bg-category-amber/20",
+	rose: "bg-category-rose/20"
+};
+/** Axis-less ranked list: label inside a token-tinted bar, value on the right. */
+function BarList({ data, index, category, valueFormatter = identity, color = "primary", sortOrder = "desc", className, "aria-label": ariaLabelProp, state, emptyMessage, errorMessage, onRetry }) {
+	const labels = useChartLabels();
+	const ariaLabel = ariaLabelProp ?? labels.barList;
+	const effective = resolveState(state, data.length);
+	const placeholder = chartStateView(effective, {
+		height: 160,
+		emptyMessage,
+		errorMessage,
+		onRetry
+	});
+	if (placeholder) return /* @__PURE__ */ jsx("div", {
+		role: "figure",
+		"aria-label": ariaLabel,
+		"aria-busy": effective === "loading" || void 0,
+		className: cx("font-sans", className),
+		children: placeholder
+	});
+	const rows = data.slice();
+	if (sortOrder === "desc") rows.sort((a, b) => numField(b, category) - numField(a, category));
+	else if (sortOrder === "asc") rows.sort((a, b) => numField(a, category) - numField(b, category));
+	const max = Math.max(...rows.map((d) => numField(d, category)), 1);
+	return /* @__PURE__ */ jsx("ul", {
+		"aria-label": ariaLabel,
+		className: cx("flex flex-col gap-2 font-sans", className),
+		children: rows.map((r, i) => {
+			const value = numField(r, category);
+			const pct = Math.max(value / max * 100, 1.5);
+			return /* @__PURE__ */ jsxs("li", {
+				className: "flex items-center gap-3",
+				children: [/* @__PURE__ */ jsxs("div", {
+					className: "relative h-9 min-w-0 flex-1",
+					children: [/* @__PURE__ */ jsx("div", {
+						"aria-hidden": true,
+						className: cx("absolute inset-y-0 left-0 rounded-md", BAR_LIST_BG[color]),
+						style: { width: `${pct}%` }
+					}), /* @__PURE__ */ jsx("div", {
+						className: "relative z-10 flex h-full items-center px-2.5",
+						children: /* @__PURE__ */ jsx("span", {
+							className: "truncate text-[13px] text-foreground",
+							children: String(field(r, index))
+						})
+					})]
+				}), /* @__PURE__ */ jsx("span", {
+					className: "w-16 shrink-0 text-right font-mono text-[13px] tabular-nums text-foreground",
+					children: valueFormatter(value)
+				})]
+			}, i);
+		})
+	});
+}
+//#endregion
+//#region src/palette.ts
+/**
+* Data-viz palette built ONLY from the frozen brand tokens.
+*
+* Categorical: `SAFE_CHART_COLORS` orders the five accents so that every adjacent pair differs
+* in relative luminance by at least 1.5:1 in dark, light and high_contrast (asserted by
+* `palette.test.ts` against `@gntik-ai/tokens/brand.css`). It is the default `CHART_COLORS`
+* order of every chart; this name is kept as an alias.
+*
+* Colour-blind safety: hue alone is never the only channel. Charts pair colour with position,
+* labels or the legend text; use at most five categorical series, prefer a sequential ramp
+* (one hue, varying lightness) for ordered data, and a diverging ramp (destructive ↔ muted ↔
+* primary, i.e. red ↔ green, which deutan/protan viewers confuse) only together with value
+* labels, a signed legend or the `dataTable` fallback — lightness still separates the ends.
+*/
+const SAFE_CHART_COLORS = CHART_COLORS;
+const round = (n) => Math.round(n * 1e3) / 1e3;
+const pct = (n) => `${Math.round(n * 1e3) / 10}%`;
+const solid = (token) => `hsl(var(${token}))`;
+/** Mixes `token` into `base` at `weight` (0–1); `weight` 1 is the plain token. */
+function mix(token, base, weight, mode) {
+	if (weight >= 1) return solid(token);
+	if (mode === "alpha") return `hsl(var(${token}) / ${round(weight)})`;
+	return `color-mix(in oklab, ${solid(token)} ${pct(weight)}, ${solid(base)})`;
+}
+function clamp01(n) {
+	return Math.min(1, Math.max(0, n));
+}
+/**
+* `n` colours from faint to the full token, for ordered magnitudes (heatmaps, choropleths,
+* funnel stages). Every value is a CSS colour string usable as SVG fill/stroke or inline style.
+*/
+function sequentialRamp(n, options = {}) {
+	const { color = "primary", surface = "--card", mode = "mix", min = .14 } = options;
+	const token = SERIES_TOKENS[color];
+	const count = Math.max(0, Math.floor(n));
+	const lo = clamp01(min);
+	return Array.from({ length: count }, (_, i) => {
+		const t = count === 1 ? 1 : lo + (1 - lo) * i / (count - 1);
+		return mix(token, surface, t, mode);
+	});
+}
+/**
+* `n` colours from `negative` (index 0) through the neutral `mid` to `positive` (last index),
+* for signed values around a meaningful centre (deltas, budgets, sentiment). With an odd `n`
+* the middle step is the plain neutral token.
+*/
+function divergingRamp(n, options = {}) {
+	const { negative = "--destructive", positive = "--primary", mid = "--muted", mode = "mix", min = .18 } = options;
+	const count = Math.max(0, Math.floor(n));
+	const lo = clamp01(min);
+	const dMin = count % 2 ? 2 / (count - 1) : 1 / (count - 1);
+	return Array.from({ length: count }, (_, i) => {
+		if (count === 1) return solid(mid);
+		const d = i / (count - 1) * 2 - 1;
+		const a = Math.abs(d);
+		if (a < 1e-9) return solid(mid);
+		const strength = a >= 1 - 1e-9 ? 1 : lo + (1 - lo) * (a - dMin) / (1 - dMin);
+		return mix(d < 0 ? negative : positive, mid, strength, mode);
+	});
+}
+/**
+* Index of the ramp step for `value`. `domain` is `[min, max]` (sequential) or
+* `[min, mid, max]` (diverging: `mid` maps to the centre of the ramp).
+*/
+function rampIndex(value, domain, steps) {
+	if (steps <= 1 || !Number.isFinite(value)) return 0;
+	let t;
+	if (domain.length === 3) {
+		const [lo, mid, hi] = domain;
+		t = value <= mid ? .5 * (mid === lo ? 1 : (value - lo) / (mid - lo)) : .5 + .5 * (hi === mid ? 1 : (value - mid) / (hi - mid));
+	} else {
+		const [lo, hi] = domain;
+		t = hi === lo ? 1 : (value - lo) / (hi - lo);
+	}
+	return Math.min(steps - 1, Math.floor(clamp01(t) * steps));
+}
+/** Colour of `value` on `ramp` (see `rampIndex`). */
+function rampColor(value, domain, ramp) {
+	return ramp[rampIndex(value, domain, ramp.length)] ?? ramp[0] ?? solid("--muted");
+}
+//#endregion
+//#region src/FunnelChart.tsx
+/** Stage maths: conversion against the first stage and drop-off against the previous one. */
+function funnelStages(values, fills = []) {
+	const first = values[0]?.value ?? 0;
+	return values.map((s, i) => {
+		const prev = i === 0 ? s.value : values[i - 1]?.value ?? 0;
+		return {
+			name: s.name,
+			value: s.value,
+			conversion: first > 0 ? s.value / first : 0,
+			dropOff: i === 0 || prev <= 0 ? 0 : Math.max(0, (prev - s.value) / prev),
+			fill: fills[i] ?? fills[fills.length - 1] ?? "hsl(var(--primary))"
+		};
+	});
+}
+/** Staged conversion funnel: trapezoids in a one-hue ramp plus a stage list with drop-off. */
+function FunnelChart({ data, index, category, color = "primary", valueFormatter = identity, showStages = true, height = 260, title, description, className, "aria-label": ariaLabel, state, emptyMessage, errorMessage, onRetry, dataTable = false }) {
+	const t = useChartTheme();
+	const ramp = sequentialRamp(Math.max(data.length, 1), {
+		color,
+		min: .35
+	}).reverse();
+	const stages = funnelStages(data.map((d) => ({
+		name: String(field(d, index)),
+		value: numField(d, category)
+	})), ramp);
+	const labels = useChartLabels();
+	const name = accessibleName(labels.funnelChart, ariaLabel, title, stages.map((s) => s.name));
+	const effective = resolveState(state, data.length);
+	const placeholder = chartStateView(effective, {
+		height,
+		emptyMessage,
+		errorMessage,
+		onRetry
+	});
+	const byName = new Map(stages.map((s) => [s.name, s]));
+	const fmtStage = (v, stage) => {
+		const s = byName.get(stage);
+		const base = typeof v === "number" ? valueFormatter(v) : String(v ?? "");
+		return s ? `${base} · ${chartFmt.percent(s.conversion)}` : base;
+	};
+	return /* @__PURE__ */ jsx("div", {
+		role: "figure",
+		"aria-label": name,
+		"aria-busy": effective === "loading" || void 0,
+		className: cx("w-full font-sans", className),
+		children: placeholder ?? /* @__PURE__ */ jsxs("div", {
+			className: "flex flex-col gap-5 sm:flex-row sm:items-center",
+			children: [
+				/* @__PURE__ */ jsx("div", {
+					className: "min-w-0 flex-1",
+					style: { height },
+					children: /* @__PURE__ */ jsx(ResponsiveContainer, {
+						width: "100%",
+						height: "100%",
+						children: /* @__PURE__ */ jsxs(FunnelChart$1, {
+							margin: {
+								top: 4,
+								right: 4,
+								bottom: 4,
+								left: 4
+							},
+							accessibilityLayer: true,
+							title,
+							desc: description,
+							children: [/* @__PURE__ */ jsx(Funnel, {
+								data: stages,
+								dataKey: "value",
+								nameKey: "name",
+								stroke: t.surface,
+								strokeWidth: 2,
+								lastShapeType: "rectangle",
+								isAnimationActive: false
+							}), /* @__PURE__ */ jsx(Tooltip, {
+								isAnimationActive: false,
+								content: tooltipContent({ seriesFormatter: fmtStage })
+							})]
+						})
+					})
+				}),
+				showStages && /* @__PURE__ */ jsx("ol", {
+					"aria-label": labels.stages,
+					className: "flex w-full flex-col gap-2 sm:w-64",
+					children: stages.map((s, i) => /* @__PURE__ */ jsxs("li", {
+						className: "flex items-center justify-between gap-3 border-b border-border pb-2 last:border-b-0",
+						children: [/* @__PURE__ */ jsxs("span", {
+							className: "flex min-w-0 items-center gap-2",
+							children: [/* @__PURE__ */ jsx("span", {
+								"aria-hidden": true,
+								className: "h-2.5 w-2.5 shrink-0 rounded-[3px]",
+								style: { background: s.fill }
+							}), /* @__PURE__ */ jsx("span", {
+								className: "truncate text-[12.5px] text-foreground",
+								children: s.name
+							})]
+						}), /* @__PURE__ */ jsxs("span", {
+							className: "flex shrink-0 items-baseline gap-2 font-mono text-[12px] tabular-nums",
+							children: [
+								/* @__PURE__ */ jsx("span", {
+									className: "font-medium text-foreground",
+									children: valueFormatter(s.value)
+								}),
+								/* @__PURE__ */ jsx("span", {
+									className: "text-muted-foreground",
+									children: chartFmt.percent(s.conversion)
+								}),
+								i > 0 && /* @__PURE__ */ jsxs("span", {
+									className: "text-destructive-text",
+									children: [
+										/* @__PURE__ */ jsx("span", {
+											className: "sr-only",
+											children: labels.dropOffPrefix
+										}),
+										"−",
+										chartFmt.percent(s.dropOff)
+									]
+								})
+							]
+						})]
+					}, s.name))
+				}),
+				dataTable && /* @__PURE__ */ jsx(ChartDataTable, {
+					caption: name,
+					columns: [
+						labels.stage,
+						category,
+						labels.conversion,
+						labels.dropOff
+					],
+					rows: stages.map((s) => [
+						s.name,
+						valueFormatter(s.value),
+						chartFmt.percent(s.conversion),
+						chartFmt.percent(s.dropOff)
+					])
+				})
+			]
+		})
+	});
+}
+//#endregion
+//#region src/SankeyChart.tsx
+/** Turns name-or-index links into the index links Recharts expects; drops unknown endpoints and non-positive values. */
+function resolveSankeyLinks(nodes, links) {
+	const byName = new Map(nodes.map((n, i) => [n.name, i]));
+	const idx = (ref) => typeof ref === "number" ? ref >= 0 && ref < nodes.length ? ref : void 0 : byName.get(ref);
+	const out = [];
+	for (const l of links) {
+		const source = idx(l.source);
+		const target = idx(l.target);
+		if (source === void 0 || target === void 0 || source === target || !(l.value > 0)) continue;
+		out.push({
+			source,
+			target,
+			value: l.value
+		});
+	}
+	return out;
+}
+/** Flow diagram: nodes as token-coloured bars, links tinted with their source colour. */
+function SankeyChart({ nodes, links, colors = SAFE_CHART_COLORS, valueFormatter = identity, height = 320, nodeWidth = 10, nodePadding = 18, title, description, className, "aria-label": ariaLabel, state, emptyMessage, errorMessage, onRetry, dataTable = false }) {
+	const t = useChartTheme();
+	const resolved = resolveSankeyLinks(nodes, links);
+	const fills = nodes.map((n, i) => n.color ? t.color(n.color) : seriesColor(t, colors, i));
+	const sources = new Set(resolved.map((l) => l.source));
+	const labels = useChartLabels();
+	const name = accessibleName(labels.sankeyChart, ariaLabel, title, nodes.map((n) => n.name));
+	const data = {
+		nodes: nodes.map((n, i) => ({
+			name: n.name,
+			fill: fills[i]
+		})),
+		links: resolved
+	};
+	const renderNode = ({ x, y, width, height: h, index }) => {
+		const sink = !sources.has(index);
+		return /* @__PURE__ */ jsxs("g", { children: [/* @__PURE__ */ jsx("rect", {
+			x,
+			y,
+			width,
+			height: Math.max(h, 1),
+			rx: 2,
+			fill: fills[index]
+		}), /* @__PURE__ */ jsx("text", {
+			x: sink ? x - 6 : x + width + 6,
+			y: y + h / 2,
+			dy: "0.35em",
+			textAnchor: sink ? "end" : "start",
+			fontSize: 11,
+			fill: t.text,
+			children: nodes[index]?.name
+		})] });
+	};
+	const renderLink = (p) => {
+		const source = resolved[p.index]?.source ?? 0;
+		return /* @__PURE__ */ jsx("path", {
+			d: `M${p.sourceX},${p.sourceY} C${p.sourceControlX},${p.sourceY} ${p.targetControlX},${p.targetY} ${p.targetX},${p.targetY}`,
+			fill: "none",
+			stroke: fills[source] ?? t.color("primary"),
+			strokeOpacity: .28,
+			strokeWidth: Math.max(p.linkWidth, 1)
+		});
+	};
+	return /* @__PURE__ */ jsx(ChartFrame, {
+		label: name,
+		state: resolveState(state, resolved.length),
+		emptyMessage,
+		errorMessage,
+		onRetry,
+		height,
+		className,
+		table: dataTable && /* @__PURE__ */ jsx(ChartDataTable, {
+			caption: name,
+			columns: [
+				labels.from,
+				labels.to,
+				labels.value
+			],
+			rows: resolved.map((l) => [
+				nodes[l.source]?.name ?? "",
+				nodes[l.target]?.name ?? "",
+				valueFormatter(l.value)
+			])
+		}),
+		children: /* @__PURE__ */ jsx(Sankey, {
+			data,
+			nameKey: "name",
+			nodeWidth,
+			nodePadding,
+			margin: {
+				top: 6,
+				right: 96,
+				bottom: 6,
+				left: 6
+			},
+			node: renderNode,
+			link: renderLink,
+			accessibilityLayer: true,
+			title,
+			desc: description,
+			children: /* @__PURE__ */ jsx(Tooltip, {
+				isAnimationActive: false,
+				content: tooltipContent({ valueFormatter })
+			})
+		})
+	});
+}
+//#endregion
+//#region src/RadarChart.tsx
+/** Multi-axis scores: one translucent polygon per category over a polygonal grid. */
+function RadarChart({ data, index, categories, colors = SAFE_CHART_COLORS, valueFormatter = identity, max, showLegend = true, showGrid = true, showRadiusAxis = false, height = 300, title, description, className, "aria-label": ariaLabel, state, emptyMessage, errorMessage, onRetry, dataTable = false }) {
+	const t = useChartTheme();
+	const [hidden, toggle] = useHiddenSeries();
+	const col = (i) => seriesColor(t, colors, i);
+	const legend = categories.map((c, i) => ({
+		key: c,
+		label: c,
+		color: col(i)
+	}));
+	const name = accessibleName(useChartLabels().radarChart, ariaLabel, title, categories);
+	return /* @__PURE__ */ jsx(ChartFrame, {
+		label: name,
+		state: resolveState(state, data.length),
+		emptyMessage,
+		errorMessage,
+		onRetry,
+		table: dataTable && cartesianTable(name, data, index, categories, (v) => formatAny(v, valueFormatter)),
+		height,
+		className,
+		legend: showLegend && /* @__PURE__ */ jsx(ChartLegend, {
+			className: "mb-3 px-1",
+			items: legend,
+			hidden,
+			onToggle: toggle
+		}),
+		children: /* @__PURE__ */ jsxs(RadarChart$1, {
+			data,
+			outerRadius: "76%",
+			accessibilityLayer: true,
+			title,
+			desc: description,
+			children: [
+				showGrid && /* @__PURE__ */ jsx(PolarGrid, { stroke: t.grid }),
+				/* @__PURE__ */ jsx(PolarAngleAxis, {
+					dataKey: index,
+					tick: {
+						fill: t.text,
+						fontSize: 11
+					}
+				}),
+				/* @__PURE__ */ jsx(PolarRadiusAxis, {
+					domain: [0, max ?? "auto"],
+					angle: 90,
+					axisLine: false,
+					tick: showRadiusAxis ? {
+						fill: t.text,
+						fontSize: 10
+					} : false,
+					tickFormatter: valueFormatter
+				}),
+				/* @__PURE__ */ jsx(Tooltip, {
+					isAnimationActive: false,
+					content: tooltipContent({ valueFormatter })
+				}),
+				categories.map((c, i) => /* @__PURE__ */ jsx(Radar, {
+					dataKey: c,
+					name: c,
+					hide: hidden.has(c),
+					stroke: col(i),
+					strokeWidth: 2,
+					fill: col(i),
+					fillOpacity: .14,
+					dot: {
+						r: 2.5,
+						strokeWidth: 0,
+						fill: col(i)
+					},
+					isAnimationActive: false
+				}, c))
+			]
+		})
+	});
+}
+//#endregion
+//#region src/Heatmap.tsx
+function extent(values) {
+	if (!values.length) return [0, 1];
+	return [Math.min(...values), Math.max(...values)];
+}
+/** Column-label row height + inter-row gap, used to fit rows into a fixed `height`. */
+const LABEL_ROW = 20;
+const GAP = 3;
+/** Cell height that fits `rows` rows in `height` px (clamped to 16–48), or undefined without a height. */
+function cellHeightFor(height, rows) {
+	if (height === void 0) return void 0;
+	const n = Math.max(rows, 1);
+	return Math.min(48, Math.max(16, Math.floor((height - LABEL_ROW - GAP * n) / n)));
+}
+const cellFocus = "focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-focus-ring";
+/**
+* Cohort / time grid coloured with a sequential or diverging token ramp. The colour grid is
+* a single keyboard stop (arrow keys move the active cell, Home/End jump within the row) with a
+* live readout; screen readers get the full data table (`dataTable`, on by default).
+*/
+function Heatmap({ data, index, categories, scale = "sequential", domain, steps, color = "primary", valueFormatter = identity, showValues = false, showScale = true, cellHeight: cellHeightProp = 28, height, rowHeader, title, className, "aria-label": ariaLabel, state, emptyMessage, errorMessage, onRetry, dataTable = true }) {
+	const id = useId();
+	const cellHeight = cellHeightFor(height, data.length) ?? cellHeightProp;
+	const [active, setActive] = useState(null);
+	const labels = useChartLabels();
+	const name = accessibleName(labels.heatmap, ariaLabel, title, []);
+	const diverging = scale === "diverging";
+	const count = steps ?? (diverging ? 7 : 6);
+	const ramp = diverging ? divergingRamp(count) : sequentialRamp(count, { color });
+	const value = (r, c) => {
+		const row = data[r];
+		const key = categories[c];
+		if (!row || key === void 0) return null;
+		const v = field(row, key);
+		return typeof v === "number" && Number.isFinite(v) ? v : null;
+	};
+	const all = data.flatMap((_, r) => categories.map((__, c) => value(r, c))).filter((v) => v !== null);
+	const [lo, hi] = extent(all);
+	const dom = domain ?? (diverging ? [
+		Math.min(lo, 0),
+		0,
+		Math.max(hi, 0)
+	] : [lo, hi]);
+	const effective = resolveState(state, all.length);
+	const placeholder = chartStateView(effective, {
+		height: height ?? Math.max(data.length, 4) * (cellHeight + 3),
+		emptyMessage,
+		errorMessage,
+		onRetry
+	});
+	const cellStyle = (v) => ({ fill: ramp[rampIndex(v, dom, count)] ?? ramp[0] });
+	const rowLabel = (r) => {
+		const row = data[r];
+		return row ? String(field(row, index)) : "";
+	};
+	const describe = ([r, c]) => {
+		const v = value(r, c);
+		return `${rowLabel(r)} · ${categories[c] ?? ""}: ${v === null ? "no data" : valueFormatter(v)}`;
+	};
+	const onKeyDown = (e) => {
+		const [r, c] = active ?? [0, 0];
+		const lastR = data.length - 1;
+		const lastC = categories.length - 1;
+		const to = {
+			ArrowRight: [r, Math.min(lastC, c + 1)],
+			ArrowLeft: [r, Math.max(0, c - 1)],
+			ArrowDown: [Math.min(lastR, r + 1), c],
+			ArrowUp: [Math.max(0, r - 1), c],
+			Home: [r, 0],
+			End: [r, lastC]
+		}[e.key];
+		if (to) {
+			e.preventDefault();
+			setActive(active ? to : [0, 0]);
+		} else if (e.key === "Escape") setActive(null);
+	};
+	if (placeholder) return /* @__PURE__ */ jsx("div", {
+		role: "figure",
+		"aria-label": name,
+		"aria-busy": effective === "loading" || void 0,
+		className: cx("w-full font-sans", className),
+		children: placeholder
+	});
+	const columns = `minmax(4.5rem, max-content) repeat(${categories.length}, minmax(1.75rem, 1fr))`;
+	return /* @__PURE__ */ jsxs("div", {
+		role: "figure",
+		"aria-label": name,
+		className: cx("w-full font-sans", className),
+		children: [
+			/* @__PURE__ */ jsx("div", {
+				role: "group",
+				tabIndex: 0,
+				"aria-label": `${name}: ${labels.colourGrid}`,
+				onKeyDown,
+				onFocus: () => setActive((a) => a ?? [0, 0]),
+				onBlur: () => setActive(null),
+				onMouseLeave: () => setActive(null),
+				className: cx("overflow-x-auto rounded-md", cellFocus),
+				children: /* @__PURE__ */ jsxs("div", {
+					"aria-hidden": true,
+					className: "grid gap-[3px]",
+					style: { gridTemplateColumns: columns },
+					children: [
+						/* @__PURE__ */ jsx("div", {}),
+						categories.map((c) => /* @__PURE__ */ jsx("div", {
+							className: "truncate pb-1 text-center text-[11px] text-muted-foreground",
+							children: c
+						}, c)),
+						data.map((_, r) => [/* @__PURE__ */ jsx("div", {
+							className: "flex items-center truncate pr-2 text-[11.5px] text-muted-foreground",
+							style: { height: cellHeight },
+							children: rowLabel(r)
+						}, `h${r}`), ...categories.map((c, ci) => {
+							const v = value(r, ci);
+							const s = v === null ? null : cellStyle(v);
+							const on = active?.[0] === r && active[1] === ci;
+							return /* @__PURE__ */ jsx("div", {
+								"data-cell": `${r}-${ci}`,
+								"data-fill": s?.fill,
+								onMouseEnter: () => setActive([r, ci]),
+								className: cx("flex items-center justify-center rounded-[3px] font-mono text-[10.5px] tabular-nums", !s && "border border-dashed border-border", on && "outline-2 outline-offset-1 outline-foreground"),
+								style: {
+									height: cellHeight,
+									background: s?.fill
+								},
+								children: showValues && v !== null ? /* @__PURE__ */ jsx("span", {
+									className: "rounded-[2px] bg-card px-1 leading-4 text-foreground",
+									children: valueFormatter(v)
+								}) : null
+							}, `${r}-${c}`);
+						})])
+					]
+				})
+			}),
+			/* @__PURE__ */ jsxs("div", {
+				className: "mt-2 flex flex-wrap items-center justify-between gap-3",
+				children: [/* @__PURE__ */ jsx("p", {
+					id: `${id}-readout`,
+					"data-heatmap-readout": "",
+					"aria-live": "polite",
+					className: "min-h-[1.25rem] text-[12px] text-muted-foreground",
+					children: active ? describe(active) : ""
+				}), showScale && /* @__PURE__ */ jsxs("div", {
+					"aria-hidden": true,
+					className: "flex items-center gap-1.5 text-[11px] text-muted-foreground",
+					children: [
+						/* @__PURE__ */ jsx("span", {
+							className: "font-mono tabular-nums",
+							children: valueFormatter(dom[0])
+						}),
+						/* @__PURE__ */ jsx("span", {
+							className: "flex",
+							children: ramp.map((f, i) => /* @__PURE__ */ jsx("span", {
+								className: "h-2.5 w-4 first:rounded-l-sm last:rounded-r-sm",
+								style: { background: f }
+							}, i))
+						}),
+						/* @__PURE__ */ jsx("span", {
+							className: "font-mono tabular-nums",
+							children: valueFormatter(dom[dom.length - 1] ?? dom[0])
+						})
+					]
+				})]
+			}),
+			dataTable && /* @__PURE__ */ jsx(ChartDataTable, {
+				caption: name,
+				columns: [rowHeader ?? index, ...categories],
+				rows: data.map((_, r) => [rowLabel(r), ...categories.map((__, c) => {
+					const v = value(r, c);
+					return v === null ? "—" : valueFormatter(v);
+				})])
+			})
+		]
+	});
+}
+//#endregion
+//#region src/MiniBar.tsx
+const TONE_TOKEN = {
+	primary: "--primary",
+	success: "--success",
+	warning: "--warning",
+	destructive: "--destructive",
+	info: "--info",
+	neutral: "--muted-foreground"
+};
+const fmtDefault = (v) => new Intl.NumberFormat("en-US", { maximumFractionDigits: 2 }).format(v);
+/** "Deployments: 12 bars, latest 9, low 2, high 14, total 84". */
+function describeBars(data, label = "Bars", format = fmtDefault) {
+	const last = data[data.length - 1];
+	if (last === void 0) return `${label}: no data`;
+	const total = data.reduce((s, v) => s + v, 0);
+	return `${label}: ${data.length} bars, latest ${format(last)}, low ${format(Math.min(...data))}, high ${format(Math.max(...data))}, total ${format(total)}`;
+}
+function highlightIndex(data, h) {
+	if (typeof h === "number") return h;
+	if (h === "last") return data.length - 1;
+	if (h === "max") return data.indexOf(Math.max(...data));
+	if (h === "min") return data.indexOf(Math.min(...data));
+	return -1;
+}
+/**
+* Sparkline-sized bar chart (pure SVG, no axes): drop-in next to `Sparkline variant="bar"`,
+* with a highlighted bar, per-bar hover titles and a generated `role="img"` summary.
+*/
+function MiniBar({ data, labels, tone = "primary", highlight = "last", width = 120, height = 32, label, formatValue = fmtDefault, className, ...props }) {
+	const chartLabels = useChartLabels();
+	const name = props["aria-label"] ?? describeBars(data, label ?? chartLabels.bars, formatValue);
+	const token = TONE_TOKEN[tone];
+	const n = data.length;
+	const lo = n ? Math.min(0, ...data) : 0;
+	const span = (n ? Math.max(0, ...data) : 0) - lo || 1;
+	const zero = height - (0 - lo) / span * height;
+	const slot = n ? width / n : width;
+	const gap = Math.min(2, slot * .25);
+	const hl = highlightIndex(data, highlight);
+	return /* @__PURE__ */ jsx("svg", {
+		role: "img",
+		viewBox: `0 0 ${width} ${height}`,
+		width,
+		height,
+		className: cx("inline-block shrink-0 overflow-visible align-middle", className),
+		...props,
+		"aria-label": name,
+		children: data.map((v, i) => {
+			const h = Math.max(1, Math.abs(v) / span * height);
+			const y = v >= 0 ? zero - h : zero;
+			return /* @__PURE__ */ jsx("rect", {
+				"data-highlight": i === hl || void 0,
+				x: i * slot + gap / 2,
+				y,
+				width: Math.max(1, slot - gap),
+				height: h,
+				rx: 1,
+				fill: i === hl || hl < 0 ? `hsl(var(${token}))` : `hsl(var(${token}) / 0.4)`,
+				children: /* @__PURE__ */ jsx("title", { children: `${labels?.[i] ?? `#${i + 1}`}: ${formatValue(v)}` })
+			}, i);
+		})
+	});
+}
+//#endregion
+export { AreaChart, BarChart, BarList, CHART_COLORS, ChartBrush, ChartDataTable, ChartEmpty, ChartError, ChartLegend, ChartLoading, ChartLocaleProvider, ChartMarkers, ChartTooltip, ComboChart, DonutChart, FunnelChart, Heatmap, LineChart, MiniBar, RadarChart, SAFE_CHART_COLORS, SERIES_TOKENS, SankeyChart, TONE_TOKENS, cellHeightFor, chartFmt, chartLabelSets, clampRange, describeBars, divergingRamp, en, es, funnelStages, rampColor, rampIndex, resolveSankeyLinks, sequentialRamp, tooltipContent, useChartLabels, useChartRange, useChartTheme, useHiddenSeries, useLiveSeries, usePrefersReducedMotion };
+
+//# sourceMappingURL=index.js.map