@voila.dev/chart 4.0.0

package/dist/voronoi/voronoi.d.ts

@@ -0,0 +1,16 @@
+import type { ChartAccessor, ChartMark, ChartValue } from "../core/types.js";
+export interface VoronoiOptions<TDatum> {
+    readonly id?: string;
+    readonly x: ChartAccessor<TDatum, ChartValue>;
+    readonly y: ChartAccessor<TDatum, ChartValue>;
+    readonly stroke?: string;
+    /** Fill each cell, by its own colour, instead of drawing the borders only. */
+    readonly fill?: (datum: TDatum, index: number) => string;
+}
+/**
+ * Each point's cell: the area closer to it than to any other. Clipped to the
+ * plot. The borders alone read as a mesh over a scatter; filled, the cells
+ * become territories.
+ */
+export declare function voronoi<TDatum>(data: ReadonlyArray<TDatum>, options: VoronoiOptions<TDatum>): ChartMark;
+//# sourceMappingURL=voronoi.d.ts.map

package/dist/voronoi/voronoi.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"voronoi.d.ts","sourceRoot":"","sources":["../../src/voronoi/voronoi.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EACX,aAAa,EACb,SAAS,EACT,UAAU,EAEV,MAAM,iBAAiB,CAAC;AAEzB,MAAM,WAAW,cAAc,CAAC,MAAM;IACrC,QAAQ,CAAC,EAAE,CAAC,EAAE,MAAM,CAAC;IACrB,QAAQ,CAAC,CAAC,EAAE,aAAa,CAAC,MAAM,EAAE,UAAU,CAAC,CAAC;IAC9C,QAAQ,CAAC,CAAC,EAAE,aAAa,CAAC,MAAM,EAAE,UAAU,CAAC,CAAC;IAC9C,QAAQ,CAAC,MAAM,CAAC,EAAE,MAAM,CAAC;IACzB,8EAA8E;IAC9E,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,KAAK,MAAM,CAAC;CACzD;AAED;;;;GAIG;AACH,wBAAgB,OAAO,CAAC,MAAM,EAC7B,IAAI,EAAE,aAAa,CAAC,MAAM,CAAC,EAC3B,OAAO,EAAE,cAAc,CAAC,MAAM,CAAC,GAC7B,SAAS,CAwDX"}

package/dist/voronoi/voronoi.js

@@ -0,0 +1,62 @@
+import { Delaunay } from "d3-delaunay";
+import { isPlaceable, readChannel } from "../core/channel.js";
+import { markId, valueOn } from "../core/marks/shared.js";
+function voronoi(data, options) {
+  const xs = readChannel(data, options.x);
+  const ys = readChannel(data, options.y);
+  return {
+    id: options.id,
+    coordinate: "cartesian",
+    channels: {
+      x: { values: xs.filter(isPlaceable) },
+      y: { values: ys.filter(isPlaceable) }
+    },
+    render(context) {
+      const id = markId(options.id, "voronoi", context);
+      const { x: xScale, y: yScale } = context.scales;
+      if (xScale === void 0 || yScale === void 0) {
+        return { nodes: [] };
+      }
+      const { plot } = context;
+      const indices = [];
+      const pixels = [];
+      for (const [index, raw] of xs.entries()) {
+        const x = valueOn(xScale, raw);
+        const y = valueOn(yScale, ys[index]);
+        if (x !== void 0 && y !== void 0) {
+          indices.push(index);
+          pixels.push([xScale.center(x), yScale.center(y)]);
+        }
+      }
+      if (pixels.length === 0) {
+        return { nodes: [] };
+      }
+      const diagram = Delaunay.from(pixels).voronoi([
+        plot.x,
+        plot.y,
+        plot.x + plot.width,
+        plot.y + plot.height
+      ]);
+      const nodes = indices.map((dataIndex, cell) => ({
+        kind: "path",
+        key: `${id}:${dataIndex}`,
+        role: "mark",
+        d: diagram.renderCell(cell) ?? "",
+        paint: options.fill ? {
+          fill: options.fill(data[dataIndex], dataIndex),
+          stroke: context.theme.background,
+          strokeWidth: 1
+        } : {
+          fill: "none",
+          stroke: options.stroke ?? context.theme.grid,
+          strokeWidth: 1
+        }
+      }));
+      return { nodes };
+    }
+  };
+}
+export {
+  voronoi
+};
+//# sourceMappingURL=voronoi.js.map

package/dist/voronoi/voronoi.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../src/voronoi/voronoi.ts"],
+  "sourcesContent": ["import { Delaunay } from \"d3-delaunay\";\nimport { isPlaceable, readChannel } from \"#/core/channel.ts\";\nimport { markId, valueOn } from \"#/core/marks/shared.ts\";\nimport type {\n\tChartAccessor,\n\tChartMark,\n\tChartValue,\n\tSceneNode,\n} from \"#/core/types.ts\";\n\nexport interface VoronoiOptions<TDatum> {\n\treadonly id?: string;\n\treadonly x: ChartAccessor<TDatum, ChartValue>;\n\treadonly y: ChartAccessor<TDatum, ChartValue>;\n\treadonly stroke?: string;\n\t/** Fill each cell, by its own colour, instead of drawing the borders only. */\n\treadonly fill?: (datum: TDatum, index: number) => string;\n}\n\n/**\n * Each point's cell: the area closer to it than to any other. Clipped to the\n * plot. The borders alone read as a mesh over a scatter; filled, the cells\n * become territories.\n */\nexport function voronoi<TDatum>(\n\tdata: ReadonlyArray<TDatum>,\n\toptions: VoronoiOptions<TDatum>,\n): ChartMark {\n\tconst xs = readChannel(data, options.x);\n\tconst ys = readChannel(data, options.y);\n\treturn {\n\t\tid: options.id,\n\t\tcoordinate: \"cartesian\",\n\t\tchannels: {\n\t\t\tx: { values: xs.filter(isPlaceable) },\n\t\t\ty: { values: ys.filter(isPlaceable) },\n\t\t},\n\t\trender(context) {\n\t\t\tconst id = markId(options.id, \"voronoi\", context);\n\t\t\tconst { x: xScale, y: yScale } = context.scales;\n\t\t\tif (xScale === undefined || yScale === undefined) {\n\t\t\t\treturn { nodes: [] };\n\t\t\t}\n\t\t\tconst { plot } = context;\n\t\t\tconst indices: number[] = [];\n\t\t\tconst pixels: Array<[number, number]> = [];\n\t\t\tfor (const [index, raw] of xs.entries()) {\n\t\t\t\tconst x = valueOn(xScale, raw);\n\t\t\t\tconst y = valueOn(yScale, ys[index]);\n\t\t\t\tif (x !== undefined && y !== undefined) {\n\t\t\t\t\tindices.push(index);\n\t\t\t\t\tpixels.push([xScale.center(x), yScale.center(y)]);\n\t\t\t\t}\n\t\t\t}\n\t\t\tif (pixels.length === 0) {\n\t\t\t\treturn { nodes: [] };\n\t\t\t}\n\t\t\tconst diagram = Delaunay.from(pixels).voronoi([\n\t\t\t\tplot.x,\n\t\t\t\tplot.y,\n\t\t\t\tplot.x + plot.width,\n\t\t\t\tplot.y + plot.height,\n\t\t\t]);\n\t\t\tconst nodes: SceneNode[] = indices.map((dataIndex, cell) => ({\n\t\t\t\tkind: \"path\",\n\t\t\t\tkey: `${id}:${dataIndex}`,\n\t\t\t\trole: \"mark\",\n\t\t\t\td: diagram.renderCell(cell) ?? \"\",\n\t\t\t\tpaint: options.fill\n\t\t\t\t\t? {\n\t\t\t\t\t\t\tfill: options.fill(data[dataIndex], dataIndex),\n\t\t\t\t\t\t\tstroke: context.theme.background,\n\t\t\t\t\t\t\tstrokeWidth: 1,\n\t\t\t\t\t\t}\n\t\t\t\t\t: {\n\t\t\t\t\t\t\tfill: \"none\",\n\t\t\t\t\t\t\tstroke: options.stroke ?? context.theme.grid,\n\t\t\t\t\t\t\tstrokeWidth: 1,\n\t\t\t\t\t\t},\n\t\t\t}));\n\t\t\treturn { nodes };\n\t\t},\n\t};\n}\n"],
+  "mappings": "AAAA,SAAS,gBAAgB;AACzB,SAAS,aAAa,mBAAmB;AACzC,SAAS,QAAQ,eAAe;AAsBzB,SAAS,QACf,MACA,SACY;AACZ,QAAM,KAAK,YAAY,MAAM,QAAQ,CAAC;AACtC,QAAM,KAAK,YAAY,MAAM,QAAQ,CAAC;AACtC,SAAO;AAAA,IACN,IAAI,QAAQ;AAAA,IACZ,YAAY;AAAA,IACZ,UAAU;AAAA,MACT,GAAG,EAAE,QAAQ,GAAG,OAAO,WAAW,EAAE;AAAA,MACpC,GAAG,EAAE,QAAQ,GAAG,OAAO,WAAW,EAAE;AAAA,IACrC;AAAA,IACA,OAAO,SAAS;AACf,YAAM,KAAK,OAAO,QAAQ,IAAI,WAAW,OAAO;AAChD,YAAM,EAAE,GAAG,QAAQ,GAAG,OAAO,IAAI,QAAQ;AACzC,UAAI,WAAW,UAAa,WAAW,QAAW;AACjD,eAAO,EAAE,OAAO,CAAC,EAAE;AAAA,MACpB;AACA,YAAM,EAAE,KAAK,IAAI;AACjB,YAAM,UAAoB,CAAC;AAC3B,YAAM,SAAkC,CAAC;AACzC,iBAAW,CAAC,OAAO,GAAG,KAAK,GAAG,QAAQ,GAAG;AACxC,cAAM,IAAI,QAAQ,QAAQ,GAAG;AAC7B,cAAM,IAAI,QAAQ,QAAQ,GAAG,KAAK,CAAC;AACnC,YAAI,MAAM,UAAa,MAAM,QAAW;AACvC,kBAAQ,KAAK,KAAK;AAClB,iBAAO,KAAK,CAAC,OAAO,OAAO,CAAC,GAAG,OAAO,OAAO,CAAC,CAAC,CAAC;AAAA,QACjD;AAAA,MACD;AACA,UAAI,OAAO,WAAW,GAAG;AACxB,eAAO,EAAE,OAAO,CAAC,EAAE;AAAA,MACpB;AACA,YAAM,UAAU,SAAS,KAAK,MAAM,EAAE,QAAQ;AAAA,QAC7C,KAAK;AAAA,QACL,KAAK;AAAA,QACL,KAAK,IAAI,KAAK;AAAA,QACd,KAAK,IAAI,KAAK;AAAA,MACf,CAAC;AACD,YAAM,QAAqB,QAAQ,IAAI,CAAC,WAAW,UAAU;AAAA,QAC5D,MAAM;AAAA,QACN,KAAK,GAAG,EAAE,IAAI,SAAS;AAAA,QACvB,MAAM;AAAA,QACN,GAAG,QAAQ,WAAW,IAAI,KAAK;AAAA,QAC/B,OAAO,QAAQ,OACZ;AAAA,UACA,MAAM,QAAQ,KAAK,KAAK,SAAS,GAAG,SAAS;AAAA,UAC7C,QAAQ,QAAQ,MAAM;AAAA,UACtB,aAAa;AAAA,QACd,IACC;AAAA,UACA,MAAM;AAAA,UACN,QAAQ,QAAQ,UAAU,QAAQ,MAAM;AAAA,UACxC,aAAa;AAAA,QACd;AAAA,MACH,EAAE;AACF,aAAO,EAAE,MAAM;AAAA,IAChB;AAAA,EACD;AACD;",
+  "names": []
+}

package/package.json

@@ -0,0 +1,74 @@
+{
+	"name": "@voila.dev/chart",
+	"version": "4.0.0",
+	"type": "module",
+	"description": "Charts as data: a definition of marks, channels and scales, drawn to SVG or Canvas, keyboard and screen-reader accessible. The core has no dependencies; the heavy layouts (geo, hierarchy, sankey…) sit behind their own subpaths.",
+	"license": "MIT",
+	"homepage": "https://ui.voila.dev",
+	"repository": {
+		"type": "git",
+		"url": "git+https://github.com/voila-voila-dev/ui.git",
+		"directory": "packages/chart"
+	},
+	"keywords": [
+		"react",
+		"charts",
+		"svg",
+		"canvas",
+		"accessibility",
+		"dataviz"
+	],
+	"publishConfig": {
+		"access": "public"
+	},
+	"files": [
+		"src",
+		"dist",
+		"!src/**/*.test.ts",
+		"!src/**/*.test.tsx"
+	],
+	"exports": {
+		".": "./dist/index.js",
+		"./react": "./dist/react/index.js",
+		"./canvas": "./dist/canvas/index.js",
+		"./contour": "./dist/contour/index.js",
+		"./voronoi": "./dist/voronoi/index.js",
+		"./hierarchy": "./dist/hierarchy/index.js",
+		"./sankey": "./dist/sankey/index.js",
+		"./force": "./dist/force/index.js",
+		"./geo": "./dist/geo/index.js",
+		"./brush": "./dist/brush/index.js"
+	},
+	"imports": {
+		"#/*": "./src/*"
+	},
+	"scripts": {
+		"check": "biome check",
+		"check-types": "tsc --noEmit",
+		"check-bundle": "bun scripts/check-bundle.mjs",
+		"format": "biome format",
+		"lint": "biome lint",
+		"test": "vitest run && bun scripts/check-bundle.mjs"
+	},
+	"peerDependencies": {
+		"react": "^19.0.0",
+		"react-dom": "^19.0.0"
+	},
+	"peerDependenciesMeta": {
+		"react": {
+			"optional": true
+		},
+		"react-dom": {
+			"optional": true
+		}
+	},
+	"sideEffects": false,
+	"dependencies": {
+		"d3-contour": "4.0.2",
+		"d3-delaunay": "6.0.4",
+		"d3-force": "3.0.0",
+		"d3-geo": "3.1.1",
+		"d3-hierarchy": "3.1.2",
+		"d3-sankey": "0.12.3"
+	}
+}

package/src/brush/brush-layer.tsx

@@ -0,0 +1,174 @@
+import type * as React from "react";
+import type { ChartPositionScale, ChartValue } from "#/core/types.ts";
+import {
+	type ChartBrushLayerProps,
+	type ChartBrushRange,
+	ordered,
+} from "#/react/brush-contract.ts";
+
+function isDiscrete(scale: ChartPositionScale): boolean {
+	return scale.kind === "band" || scale.kind === "point";
+}
+
+function numeric(value: ChartValue): number {
+	return value instanceof Date ? value.getTime() : Number(value);
+}
+
+/** The pixel extent of a selection: whole bands on a band scale. */
+export function brushPixels(
+	scale: ChartPositionScale,
+	[from, to]: ChartBrushRange,
+): readonly [number, number] {
+	const left = Math.min(scale.map(from), scale.map(to));
+	const right = Math.max(scale.map(from), scale.map(to)) + scale.bandwidth;
+	return [left, right];
+}
+
+/** One keyboard step along the scale: a category, or a fiftieth of the domain. */
+export function stepValue(
+	scale: ChartPositionScale,
+	value: ChartValue,
+	direction: 1 | -1,
+	large: boolean,
+): ChartValue {
+	if (isDiscrete(scale)) {
+		const index = scale.domain.findIndex(
+			(candidate) =>
+				numeric(candidate) === numeric(value) || candidate === value,
+		);
+		const next = Math.min(
+			scale.domain.length - 1,
+			Math.max(0, index + direction * (large ? 5 : 1)),
+		);
+		return scale.domain[next];
+	}
+	const [low, high] = scale.domain.map(numeric);
+	const step = ((high - low) / 50) * (large ? 5 : 1);
+	const next = Math.min(high, Math.max(low, numeric(value) + direction * step));
+	return scale.kind === "time" ? new Date(next) : next;
+}
+
+const HANDLE_WIDTH = 8;
+
+/**
+ * The selection over the plot, and its two ends as sliders. The sliders sit
+ * outside the chart's graphic (whose children assistive tech does not see),
+ * so a keyboard or screen-reader user can set a range as well as a mouse
+ * can: arrows move an end, Page keys move it five steps, Home and End jump,
+ * Escape clears.
+ */
+export function BrushLayer({
+	scale,
+	plot,
+	range,
+	messages,
+	onChange,
+}: ChartBrushLayerProps) {
+	const ends = range ?? [
+		scale.domain[0],
+		scale.domain[scale.domain.length - 1],
+	];
+	const [left, right] = range
+		? brushPixels(scale, range)
+		: [plot.x, plot.x + plot.width];
+
+	function handleKey(which: 0 | 1) {
+		return (event: React.KeyboardEvent<HTMLDivElement>) => {
+			const current = ends[which];
+			let next: ChartValue | undefined;
+			if (event.key === "ArrowRight" || event.key === "ArrowUp")
+				next = stepValue(scale, current, 1, false);
+			if (event.key === "ArrowLeft" || event.key === "ArrowDown")
+				next = stepValue(scale, current, -1, false);
+			if (event.key === "PageUp") next = stepValue(scale, current, 1, true);
+			if (event.key === "PageDown") next = stepValue(scale, current, -1, true);
+			if (event.key === "Home") next = scale.domain[0];
+			if (event.key === "End") next = scale.domain[scale.domain.length - 1];
+			if (event.key === "Escape") {
+				event.preventDefault();
+				onChange(null);
+				return;
+			}
+			if (next === undefined) return;
+			event.preventDefault();
+			const updated: [ChartValue, ChartValue] = [ends[0], ends[1]];
+			updated[which] = next;
+			onChange(ordered(scale, updated));
+		};
+	}
+
+	const [low, high] = isDiscrete(scale)
+		? [0, scale.domain.length - 1]
+		: scale.domain.map(numeric);
+	const position = (value: ChartValue) =>
+		isDiscrete(scale)
+			? scale.domain.findIndex(
+					(candidate) =>
+						candidate === value || numeric(candidate) === numeric(value),
+				)
+			: numeric(value);
+
+	return (
+		<>
+			{range ? (
+				<div
+					aria-hidden="true"
+					data-slot="chart-brush-selection"
+					style={{
+						position: "absolute",
+						left,
+						top: plot.y,
+						width: Math.max(0, right - left),
+						height: plot.height,
+						background: "color-mix(in oklab, currentColor 10%, transparent)",
+						borderInline:
+							"1px solid color-mix(in oklab, currentColor 40%, transparent)",
+						pointerEvents: "none",
+					}}
+				/>
+			) : null}
+			{([0, 1] as const).map((which) => (
+				<div
+					key={which}
+					role="slider"
+					tabIndex={0}
+					aria-label={which === 0 ? messages.brushStart : messages.brushEnd}
+					aria-valuemin={low}
+					aria-valuemax={high}
+					aria-valuenow={position(ends[which])}
+					aria-valuetext={scale.format(ends[which])}
+					aria-orientation="horizontal"
+					data-slot="chart-brush-handle"
+					onKeyDown={handleKey(which)}
+					onPointerDown={(event) =>
+						event.currentTarget.setPointerCapture(event.pointerId)
+					}
+					onPointerMove={(event) => {
+						if (!event.currentTarget.hasPointerCapture(event.pointerId)) return;
+						const frame =
+							event.currentTarget.parentElement?.getBoundingClientRect();
+						if (frame === undefined) return;
+						const updated: [ChartValue, ChartValue] = [ends[0], ends[1]];
+						updated[which] = scale.invert(event.clientX - frame.left);
+						onChange(ordered(scale, updated));
+					}}
+					style={{
+						position: "absolute",
+						left: (which === 0 ? left : right) - HANDLE_WIDTH / 2,
+						top: plot.y + plot.height / 2 - 14,
+						width: HANDLE_WIDTH,
+						height: 28,
+						borderRadius: 4,
+						background: "var(--background, Canvas)",
+						border:
+							"1px solid color-mix(in oklab, currentColor 50%, transparent)",
+						cursor: "ew-resize",
+						userSelect: "none",
+						WebkitUserSelect: "none",
+						opacity: range ? 1 : 0.5,
+					}}
+				/>
+			))}
+		</>
+	);
+}

package/src/brush/index.ts

@@ -0,0 +1,14 @@
+import { BrushLayer } from "#/brush/brush-layer.tsx";
+import type { ChartBrush, ChartBrushRange } from "#/react/brush-contract.ts";
+
+export type { ChartBrush, ChartBrushRange } from "#/react/brush-contract.ts";
+
+/**
+ * Select a range of x by dragging, or with two sliders from the keyboard.
+ * Pass the result as `<Chart brush={…} />`.
+ */
+export function brushX(options: {
+	readonly onBrush: (range: ChartBrushRange | null) => void;
+}): ChartBrush {
+	return { onBrush: options.onBrush, Layer: BrushLayer };
+}

package/src/canvas/canvas-renderer.tsx

@@ -0,0 +1,56 @@
+import * as React from "react";
+import { paintScene } from "#/canvas/paint-scene.ts";
+import { createColorResolver, watchTheme } from "#/canvas/resolve-color.ts";
+import type { ChartRendererProps } from "#/react/renderer.ts";
+
+/**
+ * Paints the scene onto a canvas: the renderer for thousands of marks, where
+ * one DOM node per mark gets slow. Hit-testing, focus, the tooltip, the legend
+ * and the data table do not change, they read the same scene. On the server
+ * the canvas is empty and the data table carries the content until the first
+ * paint.
+ */
+export function CanvasRenderer({ scene }: ChartRendererProps) {
+	const canvasRef = React.useRef<HTMLCanvasElement>(null);
+	const [themeVersion, setThemeVersion] = React.useState(0);
+
+	React.useEffect(
+		() => watchTheme(() => setThemeVersion((version) => version + 1)),
+		[],
+	);
+
+	// biome-ignore lint/correctness/useExhaustiveDependencies: a theme change repaints with fresh colours
+	React.useLayoutEffect(() => {
+		const canvas = canvasRef.current;
+		const host = canvas?.parentElement;
+		const context = canvas?.getContext("2d");
+		if (!canvas || !host || !context) {
+			return;
+		}
+		const ratio = window.devicePixelRatio || 1;
+		canvas.width = Math.round(scene.width * ratio);
+		canvas.height = Math.round(scene.height * ratio);
+		context.setTransform(ratio, 0, 0, ratio, 0, 0);
+		const colors = createColorResolver(host);
+		paintScene(
+			context,
+			scene,
+			colors.resolve,
+			getComputedStyle(host).fontFamily || "sans-serif",
+		);
+		colors.dispose();
+	}, [scene, themeVersion]);
+
+	return (
+		<canvas
+			ref={canvasRef}
+			data-slot="chart-canvas"
+			style={{
+				position: "absolute",
+				inset: 0,
+				width: scene.width,
+				height: scene.height,
+			}}
+		/>
+	);
+}

package/src/canvas/index.ts

@@ -0,0 +1 @@
+export { CanvasRenderer } from "#/canvas/canvas-renderer.tsx";

package/src/canvas/paint-scene.ts

@@ -0,0 +1,152 @@
+import { roundedBarPath } from "#/core/paths.ts";
+import type { ChartPaint, ChartScene, SceneNode } from "#/core/types.ts";
+
+const CANVAS_BASELINE = {
+	top: "top",
+	middle: "middle",
+	bottom: "bottom",
+	alphabetic: "alphabetic",
+} as const satisfies Record<string, CanvasTextBaseline>;
+
+const CANVAS_ALIGN = {
+	start: "left",
+	middle: "center",
+	end: "right",
+} as const satisfies Record<string, CanvasTextAlign>;
+
+function dashes(dasharray: string | undefined): number[] {
+	if (!dasharray) {
+		return [];
+	}
+	return dasharray
+		.split(/[\s,]+/)
+		.map(Number)
+		.filter((value) => Number.isFinite(value));
+}
+
+interface PaintEnvironment {
+	readonly context: CanvasRenderingContext2D;
+	readonly resolve: (color: string) => string;
+	readonly fontFamily: string;
+}
+
+function fillAndStroke(
+	environment: PaintEnvironment,
+	paint: ChartPaint,
+	draw: (mode: "fill" | "stroke") => void,
+) {
+	const { context, resolve } = environment;
+	const opacity = paint.opacity ?? 1;
+	if (paint.fill && paint.fill !== "none") {
+		context.globalAlpha = opacity * (paint.fillOpacity ?? 1);
+		context.fillStyle = resolve(paint.fill);
+		draw("fill");
+	}
+	if (paint.stroke && paint.stroke !== "none") {
+		context.globalAlpha = opacity * (paint.strokeOpacity ?? 1);
+		context.strokeStyle = resolve(paint.stroke);
+		context.lineWidth = paint.strokeWidth ?? 1;
+		context.lineCap = paint.strokeLinecap ?? "butt";
+		context.lineJoin = paint.strokeLinejoin ?? "miter";
+		context.setLineDash(dashes(paint.strokeDasharray));
+		draw("stroke");
+		context.setLineDash([]);
+	}
+	context.globalAlpha = 1;
+}
+
+function paintNode(environment: PaintEnvironment, node: SceneNode) {
+	const { context } = environment;
+	switch (node.kind) {
+		case "group":
+			context.save();
+			if (node.translate) {
+				context.translate(node.translate.x, node.translate.y);
+			}
+			if (node.clip) {
+				context.beginPath();
+				context.rect(
+					node.clip.x,
+					node.clip.y,
+					node.clip.width,
+					node.clip.height,
+				);
+				context.clip();
+			}
+			for (const child of node.children) {
+				paintNode(environment, child);
+			}
+			context.restore();
+			return;
+		case "rect": {
+			const path = node.corners
+				? new Path2D(roundedBarPath({ ...node, radius: node.corners }))
+				: undefined;
+			fillAndStroke(environment, node.paint, (mode) => {
+				if (path) {
+					context[mode](path);
+				} else if (mode === "fill") {
+					context.fillRect(node.x, node.y, node.width, node.height);
+				} else {
+					context.strokeRect(node.x, node.y, node.width, node.height);
+				}
+			});
+			return;
+		}
+		case "path": {
+			if (node.d === "") {
+				return;
+			}
+			const path = new Path2D(node.d);
+			fillAndStroke(environment, node.paint, (mode) => context[mode](path));
+			return;
+		}
+		case "circle": {
+			const path = new Path2D();
+			path.arc(node.cx, node.cy, node.r, 0, Math.PI * 2);
+			fillAndStroke(environment, node.paint, (mode) => context[mode](path));
+			return;
+		}
+		case "line": {
+			const path = new Path2D();
+			path.moveTo(node.x1, node.y1);
+			path.lineTo(node.x2, node.y2);
+			fillAndStroke(environment, { ...node.paint, fill: undefined }, () =>
+				context.stroke(path),
+			);
+			return;
+		}
+		case "text": {
+			const { paint } = node;
+			context.save();
+			context.translate(node.x, node.y);
+			if (node.rotate) {
+				context.rotate((node.rotate * Math.PI) / 180);
+			}
+			context.font = `${paint.fontWeight ?? 400} ${paint.fontSize ?? 12}px ${environment.fontFamily}`;
+			context.textAlign = CANVAS_ALIGN[paint.textAnchor ?? "start"];
+			context.textBaseline = CANVAS_BASELINE[paint.baseline ?? "alphabetic"];
+			fillAndStroke(environment, paint, (mode) =>
+				mode === "fill"
+					? context.fillText(node.text, 0, 0)
+					: context.strokeText(node.text, 0, 0),
+			);
+			context.restore();
+			return;
+		}
+	}
+}
+
+/** Paints the whole scene. The canvas is already scaled to device pixels. */
+export function paintScene(
+	context: CanvasRenderingContext2D,
+	scene: ChartScene,
+	resolve: (color: string) => string,
+	fontFamily: string,
+) {
+	context.clearRect(0, 0, scene.width, scene.height);
+	const environment = { context, resolve, fontFamily };
+	for (const node of scene.nodes) {
+		paintNode(environment, node);
+	}
+}

package/src/canvas/resolve-color.ts

@@ -0,0 +1,65 @@
+/**
+ * Canvas takes colours as computed values only: no `var()`, and `currentColor`
+ * means black. A hidden probe inside the chart resolves each CSS colour
+ * against the page, theme and inherited colour included; the answers are
+ * cached until the theme can have changed.
+ */
+export interface ColorResolver {
+	readonly resolve: (color: string) => string;
+	readonly dispose: () => void;
+}
+
+export function createColorResolver(host: HTMLElement): ColorResolver {
+	const probe = document.createElement("span");
+	probe.setAttribute("aria-hidden", "true");
+	probe.style.cssText =
+		"position:absolute;width:0;height:0;overflow:hidden;visibility:hidden";
+	host.append(probe);
+	const cache = new Map<string, string>();
+	return {
+		resolve(color) {
+			const cached = cache.get(color);
+			if (cached !== undefined) {
+				return cached;
+			}
+			probe.style.color = "";
+			probe.style.color = color;
+			const resolved = getComputedStyle(probe).color || color;
+			cache.set(color, resolved);
+			return resolved;
+		},
+		dispose() {
+			probe.remove();
+		},
+	};
+}
+
+/**
+ * Calls `onChange` whenever the colours a chart resolved may be stale: a
+ * class, style or theme attribute change on the root, a colour-scheme or
+ * forced-colours switch.
+ */
+export function watchTheme(onChange: () => void): () => void {
+	const observer = new MutationObserver(onChange);
+	for (const node of [document.documentElement, document.body]) {
+		if (node) {
+			observer.observe(node, {
+				attributes: true,
+				attributeFilter: ["class", "style", "data-theme"],
+			});
+		}
+	}
+	const queries = [
+		"(prefers-color-scheme: dark)",
+		"(forced-colors: active)",
+	].map((query) => window.matchMedia(query));
+	for (const query of queries) {
+		query.addEventListener("change", onChange);
+	}
+	return () => {
+		observer.disconnect();
+		for (const query of queries) {
+			query.removeEventListener("change", onChange);
+		}
+	};
+}