@voila.dev/chart 4.0.0

package/README.md

@@ -0,0 +1,85 @@
+# @voila.dev/chart
+
+Charts as data. A chart is a definition — a list of marks over data — and
+`<Chart>` draws it to SVG (default) or Canvas, with keyboard focus on every
+value, a live region that reads the focused value, a legend that toggles
+series, and the values as a hidden table.
+
+```tsx
+import { barY, defineChart, lineY, ruleY } from "@voila.dev/chart";
+import { Chart } from "@voila.dev/chart/react";
+
+const definition = useMemo(
+	() =>
+		defineChart({
+			marks: [
+				barY(months, { x: "month", y: "missions", label: "Missions" }),
+				ruleY([40], { label: "Objectif", strokeDasharray: "4 4" }),
+			],
+		}),
+	[months],
+);
+
+<Chart definition={definition} ariaLabel="Missions par mois" height={240} />;
+```
+
+For thousands of marks, paint on a canvas; nothing else changes:
+
+```tsx
+import { CanvasRenderer } from "@voila.dev/chart/canvas";
+
+<Chart definition={definition} ariaLabel="…" renderer={CanvasRenderer} />;
+```
+
+## Pipeline
+
+`compileChart(definition, { width, height })` is pure: marks declare
+channels, the channels resolve the scales (linear, log, time, band, point,
+ordinal and sequential colour), the axes are measured and laid out, and each
+mark returns scene nodes and focusable points. Both renderers draw that scene;
+hit-testing, keyboard focus, the tooltip and the data table read it.
+
+## Marks
+
+Cartesian: `lineY` `lineX` `areaY` `areaX` `barY` `barX` `dot` `cell` `ruleY` `ruleX` `text`
+
+Round and frame: `arc` `donut` `radialBar` `radar` `funnel`
+
+Statistical (no d3): `histogram` `rectY` `boxY` `violinY` `ridgeline`
+`dodgeY` `waffleY` `differenceY` `regressionY` `hexbin`
+
+Behind their own subpath, with the d3 module they need:
+`@voila.dev/chart/contour` (`density2d`, d3-contour),
+`@voila.dev/chart/voronoi` (`voronoi`, d3-delaunay),
+`@voila.dev/chart/hierarchy` (`treemap`, `sunburst`, `tree`, d3-hierarchy),
+`@voila.dev/chart/sankey` (`sankey`, d3-sankey),
+`@voila.dev/chart/force` (`forceGraph`, d3-force, seeded so it settles the same way every time),
+`@voila.dev/chart/geo` (`projection`, `geoShape`, `geoDot`, d3-geo; RFC 7946 rings are rewound for you).
+
+## Keyboard
+
+Tab reaches the chart. The arrows move along the values (a column of a
+multi-series chart is one stop, the other arrows move inside it), Home and
+End jump to the ends, Enter pins the tooltip and fires `onSelect`, Escape
+unpins then leaves.
+
+## Small multiples, zoom and brush
+
+`defineChart({ facet: facet({ values, marks: (value) => [...] }) })` draws the chart
+once per value on a grid, every cell on the same x, y and colour domains.
+The keyboard walks one cell at a time; the tooltip names the cell.
+
+`<Chart zoom />` zooms a continuous x: the wheel while the chart has focus
+(never while the page scrolls past it), + and −, Shift and the arrows to
+pan, a drag to pan when zoomed, 0 or the reset button to go back. The live
+region says what is on show.
+
+`<Chart brush={brushX({ onBrush })} />` (from `@voila.dev/chart/brush`) selects a range of x by dragging, or
+with two sliders from the keyboard (arrows, Page keys, Home, End, Escape).
+The sliders sit outside the graphic, where assistive tech can reach them.
+
+## Size budget
+
+`bun run check-bundle` builds each entry in `scripts/bundle-entries` and fails
+past its gzip budget, or when the core or the React layer retains a `d3-*`
+module.

package/dist/brush/brush-layer.d.ts

@@ -0,0 +1,16 @@
+import type * as React from "react";
+import type { ChartPositionScale, ChartValue } from "../core/types.js";
+import { type ChartBrushLayerProps, type ChartBrushRange } from "../react/brush-contract.js";
+/** The pixel extent of a selection: whole bands on a band scale. */
+export declare function brushPixels(scale: ChartPositionScale, [from, to]: ChartBrushRange): readonly [number, number];
+/** One keyboard step along the scale: a category, or a fiftieth of the domain. */
+export declare function stepValue(scale: ChartPositionScale, value: ChartValue, direction: 1 | -1, large: boolean): ChartValue;
+/**
+ * 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 declare function BrushLayer({ scale, plot, range, messages, onChange, }: ChartBrushLayerProps): React.JSX.Element;
+//# sourceMappingURL=brush-layer.d.ts.map

package/dist/brush/brush-layer.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"brush-layer.d.ts","sourceRoot":"","sources":["../../src/brush/brush-layer.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,KAAK,MAAM,OAAO,CAAC;AACpC,OAAO,KAAK,EAAE,kBAAkB,EAAE,UAAU,EAAE,MAAM,iBAAiB,CAAC;AACtE,OAAO,EACN,KAAK,oBAAoB,EACzB,KAAK,eAAe,EAEpB,MAAM,2BAA2B,CAAC;AAUnC,oEAAoE;AACpE,wBAAgB,WAAW,CAC1B,KAAK,EAAE,kBAAkB,EACzB,CAAC,IAAI,EAAE,EAAE,CAAC,EAAE,eAAe,GACzB,SAAS,CAAC,MAAM,EAAE,MAAM,CAAC,CAI3B;AAED,kFAAkF;AAClF,wBAAgB,SAAS,CACxB,KAAK,EAAE,kBAAkB,EACzB,KAAK,EAAE,UAAU,EACjB,SAAS,EAAE,CAAC,GAAG,CAAC,CAAC,EACjB,KAAK,EAAE,OAAO,GACZ,UAAU,CAgBZ;AAID;;;;;;GAMG;AACH,wBAAgB,UAAU,CAAC,EAC1B,KAAK,EACL,IAAI,EACJ,KAAK,EACL,QAAQ,EACR,QAAQ,GACR,EAAE,oBAAoB,qBA4GtB"}

package/dist/brush/brush-layer.js

@@ -0,0 +1,137 @@
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import {
+  ordered
+} from "../react/brush-contract.js";
+function isDiscrete(scale) {
+  return scale.kind === "band" || scale.kind === "point";
+}
+function numeric(value) {
+  return value instanceof Date ? value.getTime() : Number(value);
+}
+function brushPixels(scale, [from, to]) {
+  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];
+}
+function stepValue(scale, value, direction, large) {
+  if (isDiscrete(scale)) {
+    const index = scale.domain.findIndex(
+      (candidate) => numeric(candidate) === numeric(value) || candidate === value
+    );
+    const next2 = Math.min(
+      scale.domain.length - 1,
+      Math.max(0, index + direction * (large ? 5 : 1))
+    );
+    return scale.domain[next2];
+  }
+  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;
+function BrushLayer({
+  scale,
+  plot,
+  range,
+  messages,
+  onChange
+}) {
+  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) {
+    return (event) => {
+      const current = ends[which];
+      let next;
+      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 === void 0) return;
+      event.preventDefault();
+      const updated = [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) => isDiscrete(scale) ? scale.domain.findIndex(
+    (candidate) => candidate === value || numeric(candidate) === numeric(value)
+  ) : numeric(value);
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    range ? /* @__PURE__ */ jsx(
+      "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].map((which) => /* @__PURE__ */ jsx(
+      "div",
+      {
+        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 === void 0) return;
+          const updated = [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
+        }
+      },
+      which
+    ))
+  ] });
+}
+export {
+  BrushLayer,
+  brushPixels,
+  stepValue
+};
+//# sourceMappingURL=brush-layer.js.map

package/dist/brush/brush-layer.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../src/brush/brush-layer.tsx"],
+  "sourcesContent": ["import type * as React from \"react\";\nimport type { ChartPositionScale, ChartValue } from \"#/core/types.ts\";\nimport {\n\ttype ChartBrushLayerProps,\n\ttype ChartBrushRange,\n\tordered,\n} from \"#/react/brush-contract.ts\";\n\nfunction isDiscrete(scale: ChartPositionScale): boolean {\n\treturn scale.kind === \"band\" || scale.kind === \"point\";\n}\n\nfunction numeric(value: ChartValue): number {\n\treturn value instanceof Date ? value.getTime() : Number(value);\n}\n\n/** The pixel extent of a selection: whole bands on a band scale. */\nexport function brushPixels(\n\tscale: ChartPositionScale,\n\t[from, to]: ChartBrushRange,\n): readonly [number, number] {\n\tconst left = Math.min(scale.map(from), scale.map(to));\n\tconst right = Math.max(scale.map(from), scale.map(to)) + scale.bandwidth;\n\treturn [left, right];\n}\n\n/** One keyboard step along the scale: a category, or a fiftieth of the domain. */\nexport function stepValue(\n\tscale: ChartPositionScale,\n\tvalue: ChartValue,\n\tdirection: 1 | -1,\n\tlarge: boolean,\n): ChartValue {\n\tif (isDiscrete(scale)) {\n\t\tconst index = scale.domain.findIndex(\n\t\t\t(candidate) =>\n\t\t\t\tnumeric(candidate) === numeric(value) || candidate === value,\n\t\t);\n\t\tconst next = Math.min(\n\t\t\tscale.domain.length - 1,\n\t\t\tMath.max(0, index + direction * (large ? 5 : 1)),\n\t\t);\n\t\treturn scale.domain[next];\n\t}\n\tconst [low, high] = scale.domain.map(numeric);\n\tconst step = ((high - low) / 50) * (large ? 5 : 1);\n\tconst next = Math.min(high, Math.max(low, numeric(value) + direction * step));\n\treturn scale.kind === \"time\" ? new Date(next) : next;\n}\n\nconst HANDLE_WIDTH = 8;\n\n/**\n * The selection over the plot, and its two ends as sliders. The sliders sit\n * outside the chart's graphic (whose children assistive tech does not see),\n * so a keyboard or screen-reader user can set a range as well as a mouse\n * can: arrows move an end, Page keys move it five steps, Home and End jump,\n * Escape clears.\n */\nexport function BrushLayer({\n\tscale,\n\tplot,\n\trange,\n\tmessages,\n\tonChange,\n}: ChartBrushLayerProps) {\n\tconst ends = range ?? [\n\t\tscale.domain[0],\n\t\tscale.domain[scale.domain.length - 1],\n\t];\n\tconst [left, right] = range\n\t\t? brushPixels(scale, range)\n\t\t: [plot.x, plot.x + plot.width];\n\n\tfunction handleKey(which: 0 | 1) {\n\t\treturn (event: React.KeyboardEvent<HTMLDivElement>) => {\n\t\t\tconst current = ends[which];\n\t\t\tlet next: ChartValue | undefined;\n\t\t\tif (event.key === \"ArrowRight\" || event.key === \"ArrowUp\")\n\t\t\t\tnext = stepValue(scale, current, 1, false);\n\t\t\tif (event.key === \"ArrowLeft\" || event.key === \"ArrowDown\")\n\t\t\t\tnext = stepValue(scale, current, -1, false);\n\t\t\tif (event.key === \"PageUp\") next = stepValue(scale, current, 1, true);\n\t\t\tif (event.key === \"PageDown\") next = stepValue(scale, current, -1, true);\n\t\t\tif (event.key === \"Home\") next = scale.domain[0];\n\t\t\tif (event.key === \"End\") next = scale.domain[scale.domain.length - 1];\n\t\t\tif (event.key === \"Escape\") {\n\t\t\t\tevent.preventDefault();\n\t\t\t\tonChange(null);\n\t\t\t\treturn;\n\t\t\t}\n\t\t\tif (next === undefined) return;\n\t\t\tevent.preventDefault();\n\t\t\tconst updated: [ChartValue, ChartValue] = [ends[0], ends[1]];\n\t\t\tupdated[which] = next;\n\t\t\tonChange(ordered(scale, updated));\n\t\t};\n\t}\n\n\tconst [low, high] = isDiscrete(scale)\n\t\t? [0, scale.domain.length - 1]\n\t\t: scale.domain.map(numeric);\n\tconst position = (value: ChartValue) =>\n\t\tisDiscrete(scale)\n\t\t\t? scale.domain.findIndex(\n\t\t\t\t\t(candidate) =>\n\t\t\t\t\t\tcandidate === value || numeric(candidate) === numeric(value),\n\t\t\t\t)\n\t\t\t: numeric(value);\n\n\treturn (\n\t\t<>\n\t\t\t{range ? (\n\t\t\t\t<div\n\t\t\t\t\taria-hidden=\"true\"\n\t\t\t\t\tdata-slot=\"chart-brush-selection\"\n\t\t\t\t\tstyle={{\n\t\t\t\t\t\tposition: \"absolute\",\n\t\t\t\t\t\tleft,\n\t\t\t\t\t\ttop: plot.y,\n\t\t\t\t\t\twidth: Math.max(0, right - left),\n\t\t\t\t\t\theight: plot.height,\n\t\t\t\t\t\tbackground: \"color-mix(in oklab, currentColor 10%, transparent)\",\n\t\t\t\t\t\tborderInline:\n\t\t\t\t\t\t\t\"1px solid color-mix(in oklab, currentColor 40%, transparent)\",\n\t\t\t\t\t\tpointerEvents: \"none\",\n\t\t\t\t\t}}\n\t\t\t\t/>\n\t\t\t) : null}\n\t\t\t{([0, 1] as const).map((which) => (\n\t\t\t\t<div\n\t\t\t\t\tkey={which}\n\t\t\t\t\trole=\"slider\"\n\t\t\t\t\ttabIndex={0}\n\t\t\t\t\taria-label={which === 0 ? messages.brushStart : messages.brushEnd}\n\t\t\t\t\taria-valuemin={low}\n\t\t\t\t\taria-valuemax={high}\n\t\t\t\t\taria-valuenow={position(ends[which])}\n\t\t\t\t\taria-valuetext={scale.format(ends[which])}\n\t\t\t\t\taria-orientation=\"horizontal\"\n\t\t\t\t\tdata-slot=\"chart-brush-handle\"\n\t\t\t\t\tonKeyDown={handleKey(which)}\n\t\t\t\t\tonPointerDown={(event) =>\n\t\t\t\t\t\tevent.currentTarget.setPointerCapture(event.pointerId)\n\t\t\t\t\t}\n\t\t\t\t\tonPointerMove={(event) => {\n\t\t\t\t\t\tif (!event.currentTarget.hasPointerCapture(event.pointerId)) return;\n\t\t\t\t\t\tconst frame =\n\t\t\t\t\t\t\tevent.currentTarget.parentElement?.getBoundingClientRect();\n\t\t\t\t\t\tif (frame === undefined) return;\n\t\t\t\t\t\tconst updated: [ChartValue, ChartValue] = [ends[0], ends[1]];\n\t\t\t\t\t\tupdated[which] = scale.invert(event.clientX - frame.left);\n\t\t\t\t\t\tonChange(ordered(scale, updated));\n\t\t\t\t\t}}\n\t\t\t\t\tstyle={{\n\t\t\t\t\t\tposition: \"absolute\",\n\t\t\t\t\t\tleft: (which === 0 ? left : right) - HANDLE_WIDTH / 2,\n\t\t\t\t\t\ttop: plot.y + plot.height / 2 - 14,\n\t\t\t\t\t\twidth: HANDLE_WIDTH,\n\t\t\t\t\t\theight: 28,\n\t\t\t\t\t\tborderRadius: 4,\n\t\t\t\t\t\tbackground: \"var(--background, Canvas)\",\n\t\t\t\t\t\tborder:\n\t\t\t\t\t\t\t\"1px solid color-mix(in oklab, currentColor 50%, transparent)\",\n\t\t\t\t\t\tcursor: \"ew-resize\",\n\t\t\t\t\t\tuserSelect: \"none\",\n\t\t\t\t\t\tWebkitUserSelect: \"none\",\n\t\t\t\t\t\topacity: range ? 1 : 0.5,\n\t\t\t\t\t}}\n\t\t\t\t/>\n\t\t\t))}\n\t\t</>\n\t);\n}\n"],
+  "mappings": "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",
+  "names": ["next"]
+}

package/dist/brush/index.d.ts

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

package/dist/brush/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/brush/index.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,UAAU,EAAE,eAAe,EAAE,MAAM,2BAA2B,CAAC;AAE7E,YAAY,EAAE,UAAU,EAAE,eAAe,EAAE,MAAM,2BAA2B,CAAC;AAE7E;;;GAGG;AACH,wBAAgB,MAAM,CAAC,OAAO,EAAE;IAC/B,QAAQ,CAAC,OAAO,EAAE,CAAC,KAAK,EAAE,eAAe,GAAG,IAAI,KAAK,IAAI,CAAC;CAC1D,GAAG,UAAU,CAEb"}

package/dist/brush/index.js

@@ -0,0 +1,8 @@
+import { BrushLayer } from "./brush-layer.js";
+function brushX(options) {
+  return { onBrush: options.onBrush, Layer: BrushLayer };
+}
+export {
+  brushX
+};
+//# sourceMappingURL=index.js.map

package/dist/brush/index.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../src/brush/index.ts"],
+  "sourcesContent": ["import { BrushLayer } from \"#/brush/brush-layer.tsx\";\nimport type { ChartBrush, ChartBrushRange } from \"#/react/brush-contract.ts\";\n\nexport type { ChartBrush, ChartBrushRange } from \"#/react/brush-contract.ts\";\n\n/**\n * Select a range of x by dragging, or with two sliders from the keyboard.\n * Pass the result as `<Chart brush={\u2026} />`.\n */\nexport function brushX(options: {\n\treadonly onBrush: (range: ChartBrushRange | null) => void;\n}): ChartBrush {\n\treturn { onBrush: options.onBrush, Layer: BrushLayer };\n}\n"],
+  "mappings": "AAAA,SAAS,kBAAkB;AASpB,SAAS,OAAO,SAER;AACd,SAAO,EAAE,SAAS,QAAQ,SAAS,OAAO,WAAW;AACtD;",
+  "names": []
+}

package/dist/canvas/canvas-renderer.d.ts

@@ -0,0 +1,11 @@
+import * as React from "react";
+import type { ChartRendererProps } from "../react/renderer.js";
+/**
+ * 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 declare function CanvasRenderer({ scene }: ChartRendererProps): React.JSX.Element;
+//# sourceMappingURL=canvas-renderer.d.ts.map

package/dist/canvas/canvas-renderer.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"canvas-renderer.d.ts","sourceRoot":"","sources":["../../src/canvas/canvas-renderer.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAG/B,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,qBAAqB,CAAC;AAE9D;;;;;;GAMG;AACH,wBAAgB,cAAc,CAAC,EAAE,KAAK,EAAE,EAAE,kBAAkB,qBA2C3D"}

package/dist/canvas/canvas-renderer.js

@@ -0,0 +1,49 @@
+import { jsx } from "react/jsx-runtime";
+import * as React from "react";
+import { paintScene } from "./paint-scene.js";
+import { createColorResolver, watchTheme } from "./resolve-color.js";
+function CanvasRenderer({ scene }) {
+  const canvasRef = React.useRef(null);
+  const [themeVersion, setThemeVersion] = React.useState(0);
+  React.useEffect(
+    () => watchTheme(() => setThemeVersion((version) => version + 1)),
+    []
+  );
+  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 /* @__PURE__ */ jsx(
+    "canvas",
+    {
+      ref: canvasRef,
+      "data-slot": "chart-canvas",
+      style: {
+        position: "absolute",
+        inset: 0,
+        width: scene.width,
+        height: scene.height
+      }
+    }
+  );
+}
+export {
+  CanvasRenderer
+};
+//# sourceMappingURL=canvas-renderer.js.map

package/dist/canvas/canvas-renderer.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../src/canvas/canvas-renderer.tsx"],
+  "sourcesContent": ["import * as React from \"react\";\nimport { paintScene } from \"#/canvas/paint-scene.ts\";\nimport { createColorResolver, watchTheme } from \"#/canvas/resolve-color.ts\";\nimport type { ChartRendererProps } from \"#/react/renderer.ts\";\n\n/**\n * Paints the scene onto a canvas: the renderer for thousands of marks, where\n * one DOM node per mark gets slow. Hit-testing, focus, the tooltip, the legend\n * and the data table do not change, they read the same scene. On the server\n * the canvas is empty and the data table carries the content until the first\n * paint.\n */\nexport function CanvasRenderer({ scene }: ChartRendererProps) {\n\tconst canvasRef = React.useRef<HTMLCanvasElement>(null);\n\tconst [themeVersion, setThemeVersion] = React.useState(0);\n\n\tReact.useEffect(\n\t\t() => watchTheme(() => setThemeVersion((version) => version + 1)),\n\t\t[],\n\t);\n\n\t// biome-ignore lint/correctness/useExhaustiveDependencies: a theme change repaints with fresh colours\n\tReact.useLayoutEffect(() => {\n\t\tconst canvas = canvasRef.current;\n\t\tconst host = canvas?.parentElement;\n\t\tconst context = canvas?.getContext(\"2d\");\n\t\tif (!canvas || !host || !context) {\n\t\t\treturn;\n\t\t}\n\t\tconst ratio = window.devicePixelRatio || 1;\n\t\tcanvas.width = Math.round(scene.width * ratio);\n\t\tcanvas.height = Math.round(scene.height * ratio);\n\t\tcontext.setTransform(ratio, 0, 0, ratio, 0, 0);\n\t\tconst colors = createColorResolver(host);\n\t\tpaintScene(\n\t\t\tcontext,\n\t\t\tscene,\n\t\t\tcolors.resolve,\n\t\t\tgetComputedStyle(host).fontFamily || \"sans-serif\",\n\t\t);\n\t\tcolors.dispose();\n\t}, [scene, themeVersion]);\n\n\treturn (\n\t\t<canvas\n\t\t\tref={canvasRef}\n\t\t\tdata-slot=\"chart-canvas\"\n\t\t\tstyle={{\n\t\t\t\tposition: \"absolute\",\n\t\t\t\tinset: 0,\n\t\t\t\twidth: scene.width,\n\t\t\t\theight: scene.height,\n\t\t\t}}\n\t\t/>\n\t);\n}\n"],
+  "mappings": "AA4CE;AA5CF,YAAY,WAAW;AACvB,SAAS,kBAAkB;AAC3B,SAAS,qBAAqB,kBAAkB;AAUzC,SAAS,eAAe,EAAE,MAAM,GAAuB;AAC7D,QAAM,YAAY,MAAM,OAA0B,IAAI;AACtD,QAAM,CAAC,cAAc,eAAe,IAAI,MAAM,SAAS,CAAC;AAExD,QAAM;AAAA,IACL,MAAM,WAAW,MAAM,gBAAgB,CAAC,YAAY,UAAU,CAAC,CAAC;AAAA,IAChE,CAAC;AAAA,EACF;AAGA,QAAM,gBAAgB,MAAM;AAC3B,UAAM,SAAS,UAAU;AACzB,UAAM,OAAO,QAAQ;AACrB,UAAM,UAAU,QAAQ,WAAW,IAAI;AACvC,QAAI,CAAC,UAAU,CAAC,QAAQ,CAAC,SAAS;AACjC;AAAA,IACD;AACA,UAAM,QAAQ,OAAO,oBAAoB;AACzC,WAAO,QAAQ,KAAK,MAAM,MAAM,QAAQ,KAAK;AAC7C,WAAO,SAAS,KAAK,MAAM,MAAM,SAAS,KAAK;AAC/C,YAAQ,aAAa,OAAO,GAAG,GAAG,OAAO,GAAG,CAAC;AAC7C,UAAM,SAAS,oBAAoB,IAAI;AACvC;AAAA,MACC;AAAA,MACA;AAAA,MACA,OAAO;AAAA,MACP,iBAAiB,IAAI,EAAE,cAAc;AAAA,IACtC;AACA,WAAO,QAAQ;AAAA,EAChB,GAAG,CAAC,OAAO,YAAY,CAAC;AAExB,SACC;AAAA,IAAC;AAAA;AAAA,MACA,KAAK;AAAA,MACL,aAAU;AAAA,MACV,OAAO;AAAA,QACN,UAAU;AAAA,QACV,OAAO;AAAA,QACP,OAAO,MAAM;AAAA,QACb,QAAQ,MAAM;AAAA,MACf;AAAA;AAAA,EACD;AAEF;",
+  "names": []
+}

package/dist/canvas/index.d.ts

@@ -0,0 +1,2 @@
+export { CanvasRenderer } from "./canvas-renderer.js";
+//# sourceMappingURL=index.d.ts.map

package/dist/canvas/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/canvas/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,cAAc,EAAE,MAAM,8BAA8B,CAAC"}

package/dist/canvas/index.js

@@ -0,0 +1,5 @@
+import { CanvasRenderer } from "./canvas-renderer.js";
+export {
+  CanvasRenderer
+};
+//# sourceMappingURL=index.js.map

package/dist/canvas/index.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../src/canvas/index.ts"],
+  "sourcesContent": ["export { CanvasRenderer } from \"#/canvas/canvas-renderer.tsx\";\n"],
+  "mappings": "AAAA,SAAS,sBAAsB;",
+  "names": []
+}

package/dist/canvas/paint-scene.d.ts

@@ -0,0 +1,4 @@
+import type { ChartScene } from "../core/types.js";
+/** Paints the whole scene. The canvas is already scaled to device pixels. */
+export declare function paintScene(context: CanvasRenderingContext2D, scene: ChartScene, resolve: (color: string) => string, fontFamily: string): void;
+//# sourceMappingURL=paint-scene.d.ts.map

package/dist/canvas/paint-scene.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"paint-scene.d.ts","sourceRoot":"","sources":["../../src/canvas/paint-scene.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAc,UAAU,EAAa,MAAM,iBAAiB,CAAC;AA0IzE,6EAA6E;AAC7E,wBAAgB,UAAU,CACzB,OAAO,EAAE,wBAAwB,EACjC,KAAK,EAAE,UAAU,EACjB,OAAO,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,MAAM,EAClC,UAAU,EAAE,MAAM,QAOlB"}

package/dist/canvas/paint-scene.js

@@ -0,0 +1,130 @@
+import { roundedBarPath } from "../core/paths.js";
+const CANVAS_BASELINE = {
+  top: "top",
+  middle: "middle",
+  bottom: "bottom",
+  alphabetic: "alphabetic"
+};
+const CANVAS_ALIGN = {
+  start: "left",
+  middle: "center",
+  end: "right"
+};
+function dashes(dasharray) {
+  if (!dasharray) {
+    return [];
+  }
+  return dasharray.split(/[\s,]+/).map(Number).filter((value) => Number.isFinite(value));
+}
+function fillAndStroke(environment, paint, draw) {
+  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, node) {
+  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 })) : void 0;
+      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: void 0 },
+        () => 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;
+    }
+  }
+}
+function paintScene(context, scene, resolve, fontFamily) {
+  context.clearRect(0, 0, scene.width, scene.height);
+  const environment = { context, resolve, fontFamily };
+  for (const node of scene.nodes) {
+    paintNode(environment, node);
+  }
+}
+export {
+  paintScene
+};
+//# sourceMappingURL=paint-scene.js.map

package/dist/canvas/paint-scene.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../src/canvas/paint-scene.ts"],
+  "sourcesContent": ["import { roundedBarPath } from \"#/core/paths.ts\";\nimport type { ChartPaint, ChartScene, SceneNode } from \"#/core/types.ts\";\n\nconst CANVAS_BASELINE = {\n\ttop: \"top\",\n\tmiddle: \"middle\",\n\tbottom: \"bottom\",\n\talphabetic: \"alphabetic\",\n} as const satisfies Record<string, CanvasTextBaseline>;\n\nconst CANVAS_ALIGN = {\n\tstart: \"left\",\n\tmiddle: \"center\",\n\tend: \"right\",\n} as const satisfies Record<string, CanvasTextAlign>;\n\nfunction dashes(dasharray: string | undefined): number[] {\n\tif (!dasharray) {\n\t\treturn [];\n\t}\n\treturn dasharray\n\t\t.split(/[\\s,]+/)\n\t\t.map(Number)\n\t\t.filter((value) => Number.isFinite(value));\n}\n\ninterface PaintEnvironment {\n\treadonly context: CanvasRenderingContext2D;\n\treadonly resolve: (color: string) => string;\n\treadonly fontFamily: string;\n}\n\nfunction fillAndStroke(\n\tenvironment: PaintEnvironment,\n\tpaint: ChartPaint,\n\tdraw: (mode: \"fill\" | \"stroke\") => void,\n) {\n\tconst { context, resolve } = environment;\n\tconst opacity = paint.opacity ?? 1;\n\tif (paint.fill && paint.fill !== \"none\") {\n\t\tcontext.globalAlpha = opacity * (paint.fillOpacity ?? 1);\n\t\tcontext.fillStyle = resolve(paint.fill);\n\t\tdraw(\"fill\");\n\t}\n\tif (paint.stroke && paint.stroke !== \"none\") {\n\t\tcontext.globalAlpha = opacity * (paint.strokeOpacity ?? 1);\n\t\tcontext.strokeStyle = resolve(paint.stroke);\n\t\tcontext.lineWidth = paint.strokeWidth ?? 1;\n\t\tcontext.lineCap = paint.strokeLinecap ?? \"butt\";\n\t\tcontext.lineJoin = paint.strokeLinejoin ?? \"miter\";\n\t\tcontext.setLineDash(dashes(paint.strokeDasharray));\n\t\tdraw(\"stroke\");\n\t\tcontext.setLineDash([]);\n\t}\n\tcontext.globalAlpha = 1;\n}\n\nfunction paintNode(environment: PaintEnvironment, node: SceneNode) {\n\tconst { context } = environment;\n\tswitch (node.kind) {\n\t\tcase \"group\":\n\t\t\tcontext.save();\n\t\t\tif (node.translate) {\n\t\t\t\tcontext.translate(node.translate.x, node.translate.y);\n\t\t\t}\n\t\t\tif (node.clip) {\n\t\t\t\tcontext.beginPath();\n\t\t\t\tcontext.rect(\n\t\t\t\t\tnode.clip.x,\n\t\t\t\t\tnode.clip.y,\n\t\t\t\t\tnode.clip.width,\n\t\t\t\t\tnode.clip.height,\n\t\t\t\t);\n\t\t\t\tcontext.clip();\n\t\t\t}\n\t\t\tfor (const child of node.children) {\n\t\t\t\tpaintNode(environment, child);\n\t\t\t}\n\t\t\tcontext.restore();\n\t\t\treturn;\n\t\tcase \"rect\": {\n\t\t\tconst path = node.corners\n\t\t\t\t? new Path2D(roundedBarPath({ ...node, radius: node.corners }))\n\t\t\t\t: undefined;\n\t\t\tfillAndStroke(environment, node.paint, (mode) => {\n\t\t\t\tif (path) {\n\t\t\t\t\tcontext[mode](path);\n\t\t\t\t} else if (mode === \"fill\") {\n\t\t\t\t\tcontext.fillRect(node.x, node.y, node.width, node.height);\n\t\t\t\t} else {\n\t\t\t\t\tcontext.strokeRect(node.x, node.y, node.width, node.height);\n\t\t\t\t}\n\t\t\t});\n\t\t\treturn;\n\t\t}\n\t\tcase \"path\": {\n\t\t\tif (node.d === \"\") {\n\t\t\t\treturn;\n\t\t\t}\n\t\t\tconst path = new Path2D(node.d);\n\t\t\tfillAndStroke(environment, node.paint, (mode) => context[mode](path));\n\t\t\treturn;\n\t\t}\n\t\tcase \"circle\": {\n\t\t\tconst path = new Path2D();\n\t\t\tpath.arc(node.cx, node.cy, node.r, 0, Math.PI * 2);\n\t\t\tfillAndStroke(environment, node.paint, (mode) => context[mode](path));\n\t\t\treturn;\n\t\t}\n\t\tcase \"line\": {\n\t\t\tconst path = new Path2D();\n\t\t\tpath.moveTo(node.x1, node.y1);\n\t\t\tpath.lineTo(node.x2, node.y2);\n\t\t\tfillAndStroke(environment, { ...node.paint, fill: undefined }, () =>\n\t\t\t\tcontext.stroke(path),\n\t\t\t);\n\t\t\treturn;\n\t\t}\n\t\tcase \"text\": {\n\t\t\tconst { paint } = node;\n\t\t\tcontext.save();\n\t\t\tcontext.translate(node.x, node.y);\n\t\t\tif (node.rotate) {\n\t\t\t\tcontext.rotate((node.rotate * Math.PI) / 180);\n\t\t\t}\n\t\t\tcontext.font = `${paint.fontWeight ?? 400} ${paint.fontSize ?? 12}px ${environment.fontFamily}`;\n\t\t\tcontext.textAlign = CANVAS_ALIGN[paint.textAnchor ?? \"start\"];\n\t\t\tcontext.textBaseline = CANVAS_BASELINE[paint.baseline ?? \"alphabetic\"];\n\t\t\tfillAndStroke(environment, paint, (mode) =>\n\t\t\t\tmode === \"fill\"\n\t\t\t\t\t? context.fillText(node.text, 0, 0)\n\t\t\t\t\t: context.strokeText(node.text, 0, 0),\n\t\t\t);\n\t\t\tcontext.restore();\n\t\t\treturn;\n\t\t}\n\t}\n}\n\n/** Paints the whole scene. The canvas is already scaled to device pixels. */\nexport function paintScene(\n\tcontext: CanvasRenderingContext2D,\n\tscene: ChartScene,\n\tresolve: (color: string) => string,\n\tfontFamily: string,\n) {\n\tcontext.clearRect(0, 0, scene.width, scene.height);\n\tconst environment = { context, resolve, fontFamily };\n\tfor (const node of scene.nodes) {\n\t\tpaintNode(environment, node);\n\t}\n}\n"],
+  "mappings": "AAAA,SAAS,sBAAsB;AAG/B,MAAM,kBAAkB;AAAA,EACvB,KAAK;AAAA,EACL,QAAQ;AAAA,EACR,QAAQ;AAAA,EACR,YAAY;AACb;AAEA,MAAM,eAAe;AAAA,EACpB,OAAO;AAAA,EACP,QAAQ;AAAA,EACR,KAAK;AACN;AAEA,SAAS,OAAO,WAAyC;AACxD,MAAI,CAAC,WAAW;AACf,WAAO,CAAC;AAAA,EACT;AACA,SAAO,UACL,MAAM,QAAQ,EACd,IAAI,MAAM,EACV,OAAO,CAAC,UAAU,OAAO,SAAS,KAAK,CAAC;AAC3C;AAQA,SAAS,cACR,aACA,OACA,MACC;AACD,QAAM,EAAE,SAAS,QAAQ,IAAI;AAC7B,QAAM,UAAU,MAAM,WAAW;AACjC,MAAI,MAAM,QAAQ,MAAM,SAAS,QAAQ;AACxC,YAAQ,cAAc,WAAW,MAAM,eAAe;AACtD,YAAQ,YAAY,QAAQ,MAAM,IAAI;AACtC,SAAK,MAAM;AAAA,EACZ;AACA,MAAI,MAAM,UAAU,MAAM,WAAW,QAAQ;AAC5C,YAAQ,cAAc,WAAW,MAAM,iBAAiB;AACxD,YAAQ,cAAc,QAAQ,MAAM,MAAM;AAC1C,YAAQ,YAAY,MAAM,eAAe;AACzC,YAAQ,UAAU,MAAM,iBAAiB;AACzC,YAAQ,WAAW,MAAM,kBAAkB;AAC3C,YAAQ,YAAY,OAAO,MAAM,eAAe,CAAC;AACjD,SAAK,QAAQ;AACb,YAAQ,YAAY,CAAC,CAAC;AAAA,EACvB;AACA,UAAQ,cAAc;AACvB;AAEA,SAAS,UAAU,aAA+B,MAAiB;AAClE,QAAM,EAAE,QAAQ,IAAI;AACpB,UAAQ,KAAK,MAAM;AAAA,IAClB,KAAK;AACJ,cAAQ,KAAK;AACb,UAAI,KAAK,WAAW;AACnB,gBAAQ,UAAU,KAAK,UAAU,GAAG,KAAK,UAAU,CAAC;AAAA,MACrD;AACA,UAAI,KAAK,MAAM;AACd,gBAAQ,UAAU;AAClB,gBAAQ;AAAA,UACP,KAAK,KAAK;AAAA,UACV,KAAK,KAAK;AAAA,UACV,KAAK,KAAK;AAAA,UACV,KAAK,KAAK;AAAA,QACX;AACA,gBAAQ,KAAK;AAAA,MACd;AACA,iBAAW,SAAS,KAAK,UAAU;AAClC,kBAAU,aAAa,KAAK;AAAA,MAC7B;AACA,cAAQ,QAAQ;AAChB;AAAA,IACD,KAAK,QAAQ;AACZ,YAAM,OAAO,KAAK,UACf,IAAI,OAAO,eAAe,EAAE,GAAG,MAAM,QAAQ,KAAK,QAAQ,CAAC,CAAC,IAC5D;AACH,oBAAc,aAAa,KAAK,OAAO,CAAC,SAAS;AAChD,YAAI,MAAM;AACT,kBAAQ,IAAI,EAAE,IAAI;AAAA,QACnB,WAAW,SAAS,QAAQ;AAC3B,kBAAQ,SAAS,KAAK,GAAG,KAAK,GAAG,KAAK,OAAO,KAAK,MAAM;AAAA,QACzD,OAAO;AACN,kBAAQ,WAAW,KAAK,GAAG,KAAK,GAAG,KAAK,OAAO,KAAK,MAAM;AAAA,QAC3D;AAAA,MACD,CAAC;AACD;AAAA,IACD;AAAA,IACA,KAAK,QAAQ;AACZ,UAAI,KAAK,MAAM,IAAI;AAClB;AAAA,MACD;AACA,YAAM,OAAO,IAAI,OAAO,KAAK,CAAC;AAC9B,oBAAc,aAAa,KAAK,OAAO,CAAC,SAAS,QAAQ,IAAI,EAAE,IAAI,CAAC;AACpE;AAAA,IACD;AAAA,IACA,KAAK,UAAU;AACd,YAAM,OAAO,IAAI,OAAO;AACxB,WAAK,IAAI,KAAK,IAAI,KAAK,IAAI,KAAK,GAAG,GAAG,KAAK,KAAK,CAAC;AACjD,oBAAc,aAAa,KAAK,OAAO,CAAC,SAAS,QAAQ,IAAI,EAAE,IAAI,CAAC;AACpE;AAAA,IACD;AAAA,IACA,KAAK,QAAQ;AACZ,YAAM,OAAO,IAAI,OAAO;AACxB,WAAK,OAAO,KAAK,IAAI,KAAK,EAAE;AAC5B,WAAK,OAAO,KAAK,IAAI,KAAK,EAAE;AAC5B;AAAA,QAAc;AAAA,QAAa,EAAE,GAAG,KAAK,OAAO,MAAM,OAAU;AAAA,QAAG,MAC9D,QAAQ,OAAO,IAAI;AAAA,MACpB;AACA;AAAA,IACD;AAAA,IACA,KAAK,QAAQ;AACZ,YAAM,EAAE,MAAM,IAAI;AAClB,cAAQ,KAAK;AACb,cAAQ,UAAU,KAAK,GAAG,KAAK,CAAC;AAChC,UAAI,KAAK,QAAQ;AAChB,gBAAQ,OAAQ,KAAK,SAAS,KAAK,KAAM,GAAG;AAAA,MAC7C;AACA,cAAQ,OAAO,GAAG,MAAM,cAAc,GAAG,IAAI,MAAM,YAAY,EAAE,MAAM,YAAY,UAAU;AAC7F,cAAQ,YAAY,aAAa,MAAM,cAAc,OAAO;AAC5D,cAAQ,eAAe,gBAAgB,MAAM,YAAY,YAAY;AACrE;AAAA,QAAc;AAAA,QAAa;AAAA,QAAO,CAAC,SAClC,SAAS,SACN,QAAQ,SAAS,KAAK,MAAM,GAAG,CAAC,IAChC,QAAQ,WAAW,KAAK,MAAM,GAAG,CAAC;AAAA,MACtC;AACA,cAAQ,QAAQ;AAChB;AAAA,IACD;AAAA,EACD;AACD;AAGO,SAAS,WACf,SACA,OACA,SACA,YACC;AACD,UAAQ,UAAU,GAAG,GAAG,MAAM,OAAO,MAAM,MAAM;AACjD,QAAM,cAAc,EAAE,SAAS,SAAS,WAAW;AACnD,aAAW,QAAQ,MAAM,OAAO;AAC/B,cAAU,aAAa,IAAI;AAAA,EAC5B;AACD;",
+  "names": []
+}

package/dist/canvas/resolve-color.d.ts

@@ -0,0 +1,18 @@
+/**
+ * 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 declare function createColorResolver(host: HTMLElement): ColorResolver;
+/**
+ * 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 declare function watchTheme(onChange: () => void): () => void;
+//# sourceMappingURL=resolve-color.d.ts.map

package/dist/canvas/resolve-color.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"resolve-color.d.ts","sourceRoot":"","sources":["../../src/canvas/resolve-color.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AACH,MAAM,WAAW,aAAa;IAC7B,QAAQ,CAAC,OAAO,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,MAAM,CAAC;IAC5C,QAAQ,CAAC,OAAO,EAAE,MAAM,IAAI,CAAC;CAC7B;AAED,wBAAgB,mBAAmB,CAAC,IAAI,EAAE,WAAW,GAAG,aAAa,CAuBpE;AAED;;;;GAIG;AACH,wBAAgB,UAAU,CAAC,QAAQ,EAAE,MAAM,IAAI,GAAG,MAAM,IAAI,CAuB3D"}

package/dist/canvas/resolve-color.js

@@ -0,0 +1,52 @@
+function createColorResolver(host) {
+  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 = /* @__PURE__ */ new Map();
+  return {
+    resolve(color) {
+      const cached = cache.get(color);
+      if (cached !== void 0) {
+        return cached;
+      }
+      probe.style.color = "";
+      probe.style.color = color;
+      const resolved = getComputedStyle(probe).color || color;
+      cache.set(color, resolved);
+      return resolved;
+    },
+    dispose() {
+      probe.remove();
+    }
+  };
+}
+function watchTheme(onChange) {
+  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);
+    }
+  };
+}
+export {
+  createColorResolver,
+  watchTheme
+};
+//# sourceMappingURL=resolve-color.js.map