@vielzeug/codex 26.10.3 → 26.10.5

package/data/llms-full.txt

@@ -1,6 +1,6 @@
 # Vielzeug: Full Documentation
 
-> Complete documentation for 41 packages. Version: 26.10.2
+> Complete documentation for 41 packages. Version: 26.10.4
 
 ---
 
@@ -16403,64 +16403,60 @@ The IndexedDB adapter is built on Vault. Use Vault directly for unrelated storag
 
 ## Why Prism?
 
-Charting libraries typically require a framework binding, bundle heavy dependencies, or force canvas rendering that can't be styled with CSS. Prism takes a different approach:
+Prism renders charts as SVG in a host element and keeps application state outside the chart. You can replace chart data explicitly, respond to container resizing, and style the output with CSS custom properties.
 
 ```ts
-// Before: Chart.js, imperative setup with a canvas you can't CSS-theme
-import Chart from 'chart.js/auto';
-const ctx = document.getElementById('myChart') as HTMLCanvasElement;
-new Chart(ctx, {
-  type: 'line',
-  data: { labels, datasets: [{ data: values }] },
-  // re-create or mutate the Chart.js instance when data changes
-});
-
-// After: Prism, responsive SVG with an explicit update boundary
 import { createLineChart } from '@vielzeug/prism';
 
-const chart = createLineChart(document.getElementById('chart')!, {
-  a11y: { ariaLabel: 'Users by day' },
-  series: [
-    {
-      data: [
-        { key: 1, value: 12 },
-        { key: 2, value: 40 },
-        { key: 3, value: 28 },
-      ],
-      name: 'Users',
-    },
-  ],
-  tooltip: true,
+const host = document.createElement('div');
+host.style.cssText = 'width:640px;height:320px';
+document.body.append(host);
+
+// Before: replace a hand-drawn SVG each time values change.
+function drawLine(values: number[]) {
+  const path = document.createElementNS('http://www.w3.org/2000/svg', 'path');
+  const svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
+  const low = Math.min(...values);
+  const span = Math.max(...values) - low || 1;
+  const points = values.map((value, index) => {
+    const x = (index / Math.max(1, values.length - 1)) * 640;
+    const y = 320 - ((value - low) / span) * 320;
+    return `${index === 0 ? 'M' : 'L'}${x},${y}`;
+  });
+  svg.setAttribute('viewBox', '0 0 640 320');
+  path.setAttribute('d', points.join(' '));
+  path.setAttribute('fill', 'none');
+  path.setAttribute('stroke', 'currentColor');
+  svg.append(path);
+  host.replaceChildren(svg);
+}
+drawLine([10, 25, 18]);
+drawLine([10, 25, 18, 32]);
+
+// After: keep the chart instance and replace its series data.
+const chart = createLineChart(host, {
+  a11y: { ariaLabel: 'Revenue by month' },
+  series: [{ data: [{ key: 1, value: 10 }, { key: 2, value: 25 }, { key: 3, value: 18 }], name: 'Revenue' }],
 });
-
-chart.update([
-  {
-    data: [
-      { key: 1, value: 12 },
-      { key: 2, value: 40 },
-      { key: 3, value: 28 },
-      { key: 4, value: 65 },
-    ],
-    name: 'Users',
-  },
-]);
+chart.update([{
+  data: [{ key: 1, value: 10 }, { key: 2, value: 25 }, { key: 3, value: 18 }, { key: 4, value: 32 }],
+  name: 'Revenue',
+}]);
+chart.dispose();
 ```
 
-| Feature            | Prism                                        | Chart.js                                 | Lightweight Charts                           | D3                                           |
-| ------------------ | -------------------------------------------- | ---------------------------------------- | -------------------------------------------- | -------------------------------------------- |
-| Bundle size        |   | ~60 kB                                   | ~45 kB                                       | ~30 kB (core)                                |
-| Zero dependencies  |  (Orbit) |  |  |  (modular) |
-| Renderer           | SVG                                          | Canvas                                   | Canvas                                       | SVG/Canvas                                   |
-| Data updates        | Explicit `update()`                            | Instance mutation                        | Series mutation                              | Manual                                       |
-| CSS themeable       |  |  | Limited                                      |  |
-| Framework-neutral   |  |  |  |  |
-| Accessible SVG     |  |  |      | Manual                                       |
-| Keyboard navigation |  |  |      | Manual                                       |
-| TypeScript-first   |  | Partial                                  |  | Types available                              |
+| Feature | Prism | Hand-written SVG |
+| --- | --- | --- |
+| Bundle size |  | No chart package |
+| Zero dependencies |  (uses Orbit) |  |
+| Data updates | `ChartHandle.update()` replaces chart data | You implement the update path |
+| Responsive sizing | `ResizeObserver` recalculates the chart layout | You implement the resize behavior |
+| Chart interactions | Built-in pointer and keyboard interactions on supported charts | You implement them |
+| SVG accessibility | Informative charts support an accessible name and keyboard focus | You implement the accessible behavior |
 
-**Use Prism when** you need lightweight, framework-neutral charts with explicit updates and SVG output that can be styled with CSS. It fits dashboards, admin panels, and data-heavy applications.
+**Use Prism when** you need chart factories, responsive SVG output, and an explicit data-update boundary without adopting a charting framework.
 
-**Consider alternatives when** you need 50+ chart types (ECharts), financial trading charts (Lightweight Charts), or low-level visualization grammar (D3).
+**Consider hand-written SVG when** you need a single specialized graphic and prefer to own its scales, resizing, labels, and interactions directly.
 
 ## Installation
 
@@ -16478,61 +16474,48 @@ yarn add @vielzeug/prism
 
 ## Quick Start
 
+Create and size a host element before creating the chart. Import `theme.css` once to load Prism's default styles and CSS custom properties.
+
 ```ts
 import { createLineChart } from '@vielzeug/prism';
-import '@vielzeug/prism/theme';
+import '@vielzeug/prism/theme.css';
 
-const chart = createLineChart(document.getElementById('chart')!, {
+const host = document.createElement('div');
+host.style.cssText = 'width:640px;height:320px';
+document.body.append(host);
+
+const chart = createLineChart(host, {
   a11y: { ariaLabel: 'Revenue by month' },
-  series: [
-    {
-      color: '#3b82f6',
-      data: [
-        { key: 1, value: 10 },
-        { key: 2, value: 25 },
-        { key: 3, value: 18 },
-        { key: 4, value: 32 },
-      ],
-      name: 'Revenue',
-    },
-  ],
-  xAxis: { position: 'bottom' },
-  yAxis: { position: 'left', grid: true },
+  series: [{
+    data: [{ key: 1, value: 10 }, { key: 2, value: 25 }, { key: 3, value: 18 }],
+    name: 'Revenue',
+  }],
   tooltip: true,
-  crosshair: true,
-  onHover: (event) => console.log(event?.datum),
 });
 
-// Update chart data explicitly
-chart.update([
-  {
-    color: '#3b82f6',
-    data: [{ key: 1, value: 10 }, { key: 2, value: 25 }, { key: 3, value: 18 }, { key: 4, value: 32 }, { key: 5, value: 28 }],
-    name: 'Revenue',
-  },
-]);
+chart.update([{
+  data: [{ key: 1, value: 10 }, { key: 2, value: 25 }, { key: 3, value: 18 }, { key: 4, value: 32 }],
+  name: 'Revenue',
+}]);
 
-// Cleanup when done
 chart.dispose();
 ```
 
 ## Features
 
-- **`createLineChart(container, config)`**: line chart with linear, monotone, or step interpolation
-- **`createBarChart(container, config)`**: bar chart with four layout variants: grouped, stacked, grouped-horizontal, stacked-horizontal
-- **`createAreaChart(container, config)`**: filled area with a gradient or solid fill
-- **`createPieChart(container, config)`**: pie, donut, or semi-circle donut chart; labels that do not fit their slice are hidden
-- **`createRadarChart(container, config)`**: radar chart for comparing values across 3+ axes, with per-axis ranges
-- **`createSparkline(container, config)`**: minimal inline line, area, bar, or stack chart
-- **`linearScale`, `timeScale`, `bandScale`**: standalone scales with nice tick generation
-- **`ChartHandle.update(data)`**: replace chart data synchronously without coupling to a state library
-- **`setTheme(theme)` / `resetTheme()`**: apply or clear custom colors, font, and grid tokens at runtime
-- **Series comparison**: hover or keyboard focus reports every series at the active key in the tooltip, `onHover`, and screen-reader announcements
-- **Keyboard navigation**: arrow keys, `Enter`, and `Escape` on every labelled chart except sparklines
-- **CSS custom properties**: full theme control via `--prism-*` tokens, with dark mode built in
-- **Responsive**: auto-resizes via `ResizeObserver`
-- **`ChartHandle.tap()`**: observe resize and dispose events outside the render path, with zero cost when untapped
-- **`Symbol.dispose`**: explicit resource management following the TC39 proposal
+- **`createLineChart()` / `createAreaChart()`**: plot continuous numeric or date-keyed series
+- **`createBarChart()`**: compare categories with grouped, stacked, or horizontal bars
+- **`createScatterChart()`**: plot independent numeric `(x, y)` points
+- **`createPieChart()`**: render pie, donut, or semi-circle slices
+- **`createRadarChart()`**: compare series across fixed, labelled axes
+- **`createSparkline()`**: render compact line, area, bar, or stacked values without axes
+- **`ChartHandle.update(data)`**: replace chart data without handing state ownership to Prism
+- **`ChartHandle.dispose()` / `Symbol.dispose`**: release the SVG, observer, overlays, and chart-owned animation
+- **`ChartHandle.tap()`**: observe resize and disposal events
+- **`setTheme()` / `resetTheme()`**: set supported palette, typography, axis, grid, and tooltip tokens globally or on one element
+- **CSS custom properties**: style the chart palette, marks, axes, labels, tooltip, legend, and motion
+- **Resize observation**: recalculate SVG layout when the host element changes size
+- **Accessible interaction**: labelled interactive charts expose keyboard navigation and polite value announcements; sparklines are pointer-only without value announcements
 
 ## Documentation
 
@@ -16543,37 +16526,44 @@ chart.dispose();
 
 ## See Also
 
-- [Refine](/refine/): accessible web components that pair well with Prism for dashboards
-- [Orbit](/orbit/): floating element positioning for chart tooltips and popovers
+- [Refine](/refine/): web components and theme tokens for building controls and layouts around chart hosts
+- [Orbit](/orbit/): floating-element positioning used internally by Prism's built-in tooltip
 
 ### API Reference
 
 ## API Overview
 
+All chart factories, scale utilities, theme helpers, and error classes are synchronous. Charts render into an HTML element and return a `ChartHandle`; they do not return a promise.
+
 | Symbol | Purpose | Execution mode | Common gotcha |
 | --- | --- | --- | --- |
-| `createLineChart()` | Render a line chart | Sync | Line keys must be numbers or dates |
-| `createAreaChart()` | Render an area chart | Sync | Line keys must be numbers or dates |
-| `createBarChart()` | Render grouped or stacked bars | Sync | Stacked negative values are clamped to zero |
-| `createPieChart()` | Render pie, donut, or semi-circle slices | Sync | `onHover` receives `null` when the pointer leaves |
-| `createRadarChart()` | Compare values across 3+ axes, such as hero stats | Sync | Events report a whole axis, not one series |
-| `createSparkline()` | Render an inline line, area, bar, or stack | Sync | Omitted `a11y` makes the chart decorative |
-| `linearScale()` | Create a numeric scale | Sync | `nice` defaults to `true` |
-| `timeScale()` | Create a date scale | Sync | Invalid dates produce an invalid domain |
-| `bandScale()` | Create a categorical scale | Sync | Unknown categories map to `0` and warn in development |
-| `setTheme()` | Set Prism CSS custom properties | Sync | Values apply to `document.documentElement` |
-| `resetTheme()` | Remove Prism theme overrides | Sync | Removes only properties managed by `setTheme()` |
-| `seriesColor()` | Resolve a series palette color | Sync | Palette indexes wrap after eight colors |
+| `createLineChart()` | Render one or more continuous line series | Sync | `key` values must be numbers or dates |
+| `createAreaChart()` | Render continuous series with filled areas | Sync | Fills use a gradient by default |
+| `createScatterChart()` | Plot independent `(x, y)` points | Sync | `key` is the x-value; the y-domain is fitted to data |
+| `createBarChart()` | Render categorical bars | Sync | Negative values in stacked variants are clamped to zero |
+| `createPieChart()` | Render pie, donut, or semi-circle slices | Sync | `variant` is fixed at creation; `update()` replaces slices |
+| `createRadarChart()` | Compare series across fixed axes | Sync | Requires at least three axes to draw |
+| `createSparkline()` | Render a compact line, area, bar, or stack | Sync | Has no axes, legend, or keyboard navigation |
+| `linearScale()` | Create a numeric scale | Sync | `nice` defaults to `true`; set `nice: false` to preserve the domain |
+| `timeScale()` | Create a date scale | Sync | `nice` defaults to `true` |
+| `bandScale()` | Create an ordered categorical scale | Sync | Unknown categories map to `0` and warn in development |
+| `setTheme()` | Set Prism CSS custom properties | Sync | Writes inline styles to `document.documentElement` by default |
+| `resetTheme()` | Remove theme overrides set by `setTheme()` | Sync | Only clears the selected target |
+| `seriesColor()` | Resolve a palette CSS value | Sync | Palette positions wrap after eight |
+| `PrismError` | Base class for Prism errors | Sync | Use `instanceof` to catch any Prism error |
+| `PrismRenderError` | Report an invalid chart container or failed chart operation | Sync | Also thrown by `update()` after disposal |
 
 ## Package Entry Point
 
 | Import | Purpose |
 | --- | --- |
-| `@vielzeug/prism` | Chart factories, scales, theme helpers, errors, and public types |
-| `@vielzeug/prism/theme` | Default CSS custom properties and dark-mode values |
+| `@vielzeug/prism` | Chart factories, scale and theme functions, error classes, and public types |
+| `@vielzeug/prism/theme.css` | Default chart styles, CSS custom properties, dark-mode values, and reduced-motion rules |
 
 ## Chart Factories
 
+Each factory appends an SVG to `container`. A chart with no measurable container size uses a temporary `600 × 300` SVG size and emits a development warning; `ResizeObserver` applies later size changes. Unless `a11y` is informative, the SVG is hidden from the accessibility tree.
+
 ### `createLineChart()`
 
 ```ts
@@ -16583,28 +16573,32 @@ function createLineChart(
 ): ChartHandle;
 ```
 
-Renders a line chart and returns a handle that replaces the complete series array through `update()`.
+Renders line series and returns a handle whose `update()` argument replaces the complete series array. Axes render by default; the value axis has grid lines by default. Pass `false` to `xAxis` or `yAxis` to suppress that axis.
+
+Series use linear interpolation by default, omit point markers by default, and use a point radius of 3 when markers are enabled. `yAxis` defaults to `'left'`; crosshair, tooltip, and legend are disabled unless configured.
 
 | Parameter | Type | Description |
 | --- | --- | --- |
-| `container` | `HTMLElement` | Host that receives the SVG and optional overlays |
-| `config` | `LineChartConfig` | Initial series, axes, interaction, accessibility, and transition settings |
+| `container` | `HTMLElement` | Host that receives the chart SVG and optional overlays |
+| `config` | `LineChartConfig` | Series, axes, interaction, accessibility, and motion settings |
 
 **Returns:** `ChartHandle`.
 
 ```ts
 import { createLineChart } from '@vielzeug/prism';
 
-const chart = createLineChart(container, {
+const host = document.createElement('div');
+host.style.cssText = 'width:640px;height:320px';
+document.body.append(host);
+
+const chart = createLineChart(host, {
   a11y: { ariaLabel: 'Revenue by month' },
-  series: [{ data: [{ key: 1, value: 10 }], name: 'Revenue' }],
+  series: [{ data: [{ key: 1, value: 10 }, { key: 2, value: 15 }], name: 'Revenue' }],
 });
-
-chart.update([{ data: [{ key: 2, value: 20 }], name: 'Revenue' }]);
+chart.update([{ data: [{ key: 1, value: 10 }, { key: 2, value: 15 }, { key: 3, value: 18 }], name: 'Revenue' }]);
+chart.dispose();
 ```
 
----
-
 ### `createAreaChart()`
 
 ```ts
@@ -16614,24 +16608,67 @@ function createAreaChart(
 ): ChartHandle;
 ```
 
-Renders an area chart and returns a handle that replaces the complete series array through `update()`.
+Renders continuous area series with a gradient fill by default. `update()` replaces the complete series array.
+
+Area series use linear interpolation by default and show their top line unless `showLine: false` is set. Axes render by default, with grid lines on the value axis.
 
 | Parameter | Type | Description |
 | --- | --- | --- |
-| `container` | `HTMLElement` | Host that receives the SVG and optional overlays |
-| `config` | `AreaChartConfig` | Initial series, axes, interaction, accessibility, and transition settings |
+| `container` | `HTMLElement` | Host that receives the chart SVG and optional overlays |
+| `config` | `AreaChartConfig` | Series, axes, interaction, accessibility, and motion settings |
 
 **Returns:** `ChartHandle`.
 
 ```ts
 import { createAreaChart } from '@vielzeug/prism';
 
-const chart = createAreaChart(container, {
-  series: [{ data: [{ key: 1, value: 10 }], name: 'Revenue' }],
+const host = document.createElement('div');
+host.style.cssText = 'width:640px;height:320px';
+document.body.append(host);
+
+const chart = createAreaChart(host, {
+  a11y: { ariaLabel: 'Visitors over time' },
+  series: [{ data: [{ key: 1, value: 10 }, { key: 2, value: 18 }], name: 'Visitors' }],
 });
+chart.dispose();
 ```
 
----
+### `createScatterChart()`
+
+```ts
+function createScatterChart(
+  container: HTMLElement,
+  config: ScatterChartConfig,
+): ChartHandle;
+```
+
+Plots each datum independently: `key` is the numeric or date x-value and `value` is the y-value. Points are not joined. `update()` replaces the complete series array.
+
+Axes render by default, with grid lines on the value axis. The value scale is fitted to the observed data rather than forced to include zero. Tooltip, crosshair, and legend are disabled unless configured.
+
+| Parameter | Type | Description |
+| --- | --- | --- |
+| `container` | `HTMLElement` | Host that receives the chart SVG and optional overlays |
+| `config` | `ScatterChartConfig` | Independent points, axes, interaction, accessibility, and motion settings |
+
+**Returns:** `ChartHandle`.
+
+```ts
+import { createScatterChart } from '@vielzeug/prism';
+
+const host = document.createElement('div');
+host.style.cssText = 'width:640px;height:320px';
+document.body.append(host);
+
+const chart = createScatterChart(host, {
+  a11y: { ariaLabel: 'Height against weight' },
+  series: [{ data: [{ key: 160, value: 55 }, { key: 175, value: 70 }], name: 'Cohort A' }],
+  tooltip: true,
+});
+chart.dispose();
+```
+
+Scatter interaction reports one datum and series rather than a `values` array. Keyboard navigation visits points across series in x order.
 
 ### `createBarChart()`
 
@@ -16642,25 +16679,32 @@ function createBarChart(
 ): ChartHandle;
 ```
 
-Renders grouped, stacked, grouped-horizontal, or stacked-horizontal bars.
+Renders grouped, stacked, grouped-horizontal, or stacked-horizontal categories. `update()` replaces the complete series array; the variant is fixed at creation. Axes render by default, with grid lines on the value axis.
+
+The default variant is `grouped`; tooltip and legend are disabled unless configured.
 
 | Parameter | Type | Description |
 | --- | --- | --- |
-| `container` | `HTMLElement` | Host that receives the SVG and optional overlays |
-| `config` | `BarChartConfig` | Initial series, variant, axes, accessibility, and interaction settings |
+| `container` | `HTMLElement` | Host that receives the chart SVG and optional overlays |
+| `config` | `BarChartConfig` | Series, layout variant, axes, interaction, accessibility, and motion settings |
 
 **Returns:** `ChartHandle`.
 
 ```ts
 import { createBarChart } from '@vielzeug/prism';
 
-const chart = createBarChart(container, {
-  series: [{ data: [{ key: 'Open', value: 12 }], name: 'Tasks' }],
-  variant: 'grouped',
+const host = document.createElement('div');
+host.style.cssText = 'width:640px;height:320px';
+document.body.append(host);
+
+const chart = createBarChart(host, {
+  a11y: { ariaLabel: 'Tasks by status' },
+  series: [{ data: [{ key: 'Open', value: 12 }, { key: 'Done', value: 8 }], name: 'Tasks' }],
 });
+chart.dispose();
 ```
 
----
+For stacked variants, negative values are treated as zero and produce a development warning.
 
 ### `createPieChart()`
 
@@ -16671,26 +16715,30 @@ function createPieChart(
 ): ChartHandle;
 ```
 
-Renders pie, donut, or semi-circle slices.
+Renders pie, donut, or semi-circle slices. The default variant is `pie`; `update()` replaces the slice array. The default inner radius is zero for pies and 55% of the outer radius for donut and semi variants. Pie slices default to no padding or rounded corners; donut and semi slices default to 8px padding and corner radius.
 
 | Parameter | Type | Description |
 | --- | --- | --- |
-| `container` | `HTMLElement` | Host that receives the SVG and optional overlays |
-| `config` | `PieChartConfig` | Initial slices, variant, geometry, accessibility, and interaction settings |
+| `container` | `HTMLElement` | Host that receives the chart SVG and optional overlays |
+| `config` | `PieChartConfig` | Slices, shape, geometry, legend, tooltip, and interaction settings |
 
 **Returns:** `ChartHandle`.
 
 ```ts
 import { createPieChart } from '@vielzeug/prism';
 
-const chart = createPieChart(container, {
-  data: [{ label: 'Complete', value: 72 }, { label: 'Remaining', value: 28 }],
+const host = document.createElement('div');
+host.style.cssText = 'width:320px;height:240px';
+document.body.append(host);
+
+const chart = createPieChart(host, {
+  a11y: { ariaLabel: 'Orders by channel' },
+  data: [{ label: 'Direct', value: 72 }, { label: 'Referral', value: 28 }],
   variant: 'donut',
 });
+chart.dispose();
 ```
 
----
-
 ### `createRadarChart()`
 
 ```ts
@@ -16700,47 +16748,32 @@ function createRadarChart(
 ): ChartHandle;
 ```
 
-Renders one closed shape per series across three or more axes. `update()` replaces the series; the axes are fixed at creation.
+Renders one shape per series across the configured axes. `update()` replaces series data but not axes or other configuration. Fewer than three axes warn in development and draw no chart. Tooltip and legend are disabled unless configured.
 
 | Parameter | Type | Description |
 | --- | --- | --- |
-| `container` | `HTMLElement` | Host that receives the SVG and optional overlays |
-| `config` | `RadarChartConfig` | Axes, series, scale, grid, appearance, accessibility, and interaction settings |
-
-| Field | Type | Default | Description |
-| --- | --- | --- | --- |
-| `axes` | `RadarAxisConfig[]` | N/A | Ordered axes, drawn clockwise; needs at least 3 |
-| `series` | `RadarSeriesConfig[]` | N/A | Values keyed by `axis.key` |
-| `domain` | `[number, number]` | `[0, nice max]` | Shared value range; `axis.min`/`axis.max` override it per axis |
-| `grid` | `boolean \| RadarGridConfig` | `true` | Rings, bands, and level labels; `false` hides the grid |
-| `fill` | `'gradient' \| 'none' \| 'solid'` | `'solid'` | Shape fill; `gradient` deepens toward the rim |
-| `curve` | `'linear' \| 'rounded'` | `'linear'` | Straight edges or a smooth closed curve |
-| `showPoints` | `boolean` | `true` | Vertex dots; a missing value shows a hollow dot at the centre |
-| `showValues` | `boolean` | `false` | Print each value beside its vertex |
-| `startAngle` | `number` | `0` | Degrees clockwise from 12 o'clock for the first axis |
-| `onHover` | `(event: RadarEvent \| null) => void` | N/A | Nearest axis under the pointer or keyboard focus |
-| `onClick` | `(event: RadarEvent) => void` | N/A | Axis clicked, or activated with Enter/Space |
+| `container` | `HTMLElement` | Host that receives the chart SVG and optional overlays |
+| `config` | `RadarChartConfig` | Fixed axes, series, scale, grid, appearance, and interaction settings |
 
 **Returns:** `ChartHandle`.
 
 ```ts
 import { createRadarChart } from '@vielzeug/prism';
 
-const chart = createRadarChart(container, {
+const host = document.createElement('div');
+host.style.cssText = 'width:400px;height:320px';
+document.body.append(host);
+
+const chart = createRadarChart(host, {
   a11y: { ariaLabel: 'Hero stats' },
-  axes: [
-    { key: 'str', label: 'Strength' },
-    { key: 'agi', label: 'Agility' },
-    { key: 'end', label: 'Endurance' },
-  ],
+  axes: [{ key: 'str', label: 'Strength' }, { key: 'agi', label: 'Agility' }, { key: 'end', label: 'Endurance' }],
   domain: [0, 10],
   series: [{ data: [{ key: 'str', value: 8 }, { key: 'agi', value: 6 }, { key: 'end', value: 9 }], name: 'Adam' }],
 });
+chart.dispose();
 ```
 
-Hovering or arrowing onto an axis highlights its spoke and reports every series' value on it. Without a tooltip, the chart announces the values through its own `role="status"` region. A value for an unknown axis, duplicate axis keys, or fewer than 3 axes warns in development.
-
----
+Radar defaults are a solid fill, linear curves, visible points, a four-level polygon grid with bands, no grid labels, and a first-axis angle of zero degrees. Grid labels render only when all axes share a domain.
 
 ### `createSparkline()`
 
@@ -16751,22 +16784,29 @@ function createSparkline(
 ): ChartHandle;
 ```
 
-Renders a compact chart without axes, margin, or legend.
+Renders compact data without axes, chart margins, or a legend. `update()` replaces the number or stack-segment array. The default variant is `line`; only line and area variants draw the endpoint marker by default.
 
 | Parameter | Type | Description |
 | --- | --- | --- |
-| `container` | `HTMLElement` | Host that receives the SVG |
-| `config` | `SparklineConfig` | Initial values, variant, appearance, accessibility, and callbacks |
+| `container` | `HTMLElement` | Host that receives the chart SVG |
+| `config` | `SparklineConfig` | Values, variant, appearance, accessibility, and pointer callbacks |
 
 **Returns:** `ChartHandle`.
 
 ```ts
 import { createSparkline } from '@vielzeug/prism';
 
-const chart = createSparkline(container, { data: [2, 5, 3, 8], variant: 'area' });
+const host = document.createElement('div');
+host.style.cssText = 'width:240px;height:48px';
+document.body.append(host);
+
+const chart = createSparkline(host, { data: [2, 5, 3, 8], variant: 'area' });
 chart.update([2, 5, 3, 8, 13]);
+chart.dispose();
 ```
 
+`StackSegment[]` is for `variant: 'stack'`. Pointer callbacks are available for numeric line, area, and bar sparklines; sparklines do not support keyboard navigation.
+
 ## Scale Factories
 
 ### `linearScale()`
@@ -16775,14 +16815,16 @@ chart.update([2, 5, 3, 8, 13]);
 function linearScale(config: LinearScaleConfig): Scale;
 ```
 
-| Field | Type | Default | Description |
+Maps a numeric domain to a numeric range. `nice` defaults to `true`; `clamp` defaults to `false` and applies to `map()`, not `invert()`.
+
+| Parameter | Type | Default | Description |
 | --- | --- | --- | --- |
-| `domain` | `[number, number]` | N/A | Input extent |
-| `range` | `[number, number]` | N/A | Output extent |
-| `clamp` | `boolean` | `false` | Clamp mapped and inverted values |
-| `nice` | `boolean` | `true` | Expand the domain to rounded boundaries |
+| `config.domain` | `[number, number]` | Required | Input extent |
+| `config.range` | `[number, number]` | Required | Output extent |
+| `config.clamp` | `boolean` | `false` | Clamp mapped values to the range |
+| `config.nice` | `boolean` | `true` | Expand the domain to rounded boundaries |
 
-**Returns:** `Scale`.
+**Returns:** `Scale`, with `map`, `invert`, `ticks`, `domain`, and `range`.
 
 ```ts
 import { linearScale } from '@vielzeug/prism';
@@ -16791,21 +16833,21 @@ const scale = linearScale({ domain: [0, 100], range: [0, 500] });
 scale.map(50); // 250
 ```
 
----
-
 ### `timeScale()`
 
 ```ts
 function timeScale(config: TimeScaleConfig): Scale;
 ```
 
-| Field | Type | Default | Description |
+Maps date values to a numeric range. `nice` defaults to `true` and rounds the domain to a time interval.
+
+| Parameter | Type | Default | Description |
 | --- | --- | --- | --- |
-| `domain` | `[Date, Date]` | N/A | Input date extent |
-| `range` | `[number, number]` | N/A | Output extent |
-| `nice` | `boolean` | `true` | Expand the domain to rounded interval boundaries |
+| `config.domain` | `[Date, Date]` | Required | Input date extent |
+| `config.range` | `[number, number]` | Required | Output extent |
+| `config.nice` | `boolean` | `true` | Expand the domain to time-interval boundaries |
 
-**Returns:** `Scale`.
+**Returns:** `Scale`, with `map`, `invert`, `ticks`, `domain`, and `range`.
 
 ```ts
 import { timeScale } from '@vielzeug/prism';
@@ -16814,48 +16856,81 @@ const scale = timeScale({
   domain: [new Date('2026-01-01'), new Date('2026-12-31')],
   range: [0, 500],
 });
+scale.map(new Date('2026-07-02'));
 ```
 
----
-
 ### `bandScale()`
 
 ```ts
 function bandScale(config: BandScaleConfig): BandScale;
 ```
 
-| Field | Type | Default | Description |
+Maps ordered string categories to the start of each band. `padding` defaults to `0.1`; `paddingOuter` defaults to the same value. Mapping an unknown category returns `0` and warns in development.
+
+| Parameter | Type | Default | Description |
 | --- | --- | --- | --- |
-| `domain` | `string[]` | N/A | Ordered categories |
-| `range` | `[number, number]` | N/A | Output extent |
-| `padding` | `number` | `0.1` | Inner gap ratio |
-| `paddingOuter` | `number` | `padding` | Outer gap ratio |
+| `config.domain` | `string[]` | Required | Ordered categories |
+| `config.range` | `[number, number]` | Required | Output extent |
+| `config.padding` | `number` | `0.1` | Inner gap as a ratio of bandwidth |
+| `config.paddingOuter` | `number` | `padding` | Outer gap as a ratio of bandwidth |
 
-**Returns:** `BandScale`.
+**Returns:** `BandScale`, with `map`, `ticks`, `bandwidth`, `gap`, `domain`, and `range`.
 
 ```ts
 import { bandScale } from '@vielzeug/prism';
 
 const scale = bandScale({ domain: ['A', 'B'], range: [0, 200] });
+scale.bandwidth();
 ```
 
 ## Theme Utilities
 
+`theme.css` supplies the base CSS values and styles. `setTheme()` writes inline custom properties, which take precedence over stylesheet declarations. For other visual controls, set CSS custom properties directly.
+
 ### `setTheme()`
 
 ```ts
-function setTheme(theme: PrismTheme): void;
+function setTheme(theme: PrismTheme, options?: ThemeScope): void;
 ```
 
-Sets Prism color, font, and grid custom properties on `document.documentElement`.
+Sets the provided theme values on `options.scope`, or on `document.documentElement` when omitted. Omitted scalar keys remain unchanged. Providing `colors` replaces all eight palette slots, removing unused slots.
+
+| Parameter | Type | Description |
+| --- | --- | --- |
+| `theme` | `PrismTheme` | Palette and supported axis, grid, text, font, and tooltip properties |
+| `options.scope` | `HTMLElement` | Element that scopes the inline custom properties |
+
+**Returns:** `void`.
+
+```ts
+import { setTheme } from '@vielzeug/prism';
+
+const host = document.createElement('div');
+document.body.append(host);
+setTheme({ colors: ['#2563eb', '#16a34a'], textColor: '#111827' }, { scope: host });
+```
 
 ### `resetTheme()`
 
 ```ts
-function resetTheme(): void;
+function resetTheme(options?: ThemeScope): void;
 ```
 
-Removes every custom property managed by `setTheme()`.
+Removes every custom property managed by `setTheme()` from the given scope or the document root. It does not remove CSS rules or change any other custom properties.
+
+| Parameter | Type | Description |
+| --- | --- | --- |
+| `options` | `ThemeScope` | Optional target; defaults to `document.documentElement` |
+
+**Returns:** `void`.
+
+```ts
+import { resetTheme, setTheme } from '@vielzeug/prism';
+
+const scope = document.createElement('div');
+setTheme({ textColor: '#111827' }, { scope });
+resetTheme({ scope });
+```
 
 ### `seriesColor()`
 
@@ -16863,1307 +16938,972 @@ Removes every custom property managed by `setTheme()`.
 function seriesColor(index: number, override?: string): string;
 ```
 
-Returns `override` when provided; otherwise returns `var(--prism-color-N)` with an eight-color wrap.
+Returns `override` when it is provided; otherwise returns a `var(--prism-color-N)` reference. The palette has eight positions and the index wraps around after the eighth.
+
+| Parameter | Type | Description |
+| --- | --- | --- |
+| `index` | `number` | Zero-based palette position |
+| `override` | `string` | Optional color returned instead of a CSS variable |
+
+**Returns:** `string`.
+
+```ts
+import { seriesColor } from '@vielzeug/prism';
+
+seriesColor(0); // 'var(--prism-color-1)'
+seriesColor(1, '#2563eb'); // '#2563eb'
+```
+
+## Chart Handle
+
+`ChartHandle` is returned by every chart factory. `update()` synchronously rebuilds the chart from its new data; enabled motion may animate the resulting SVG. `dispose()` is idempotent, removes the chart SVG, observers, tooltip and legend, cancels chart-owned animation, aborts `disposalSignal`, and emits one `dispose` tap event. `update()` after disposal throws `PrismRenderError`.
+
+`tap()` observes `resize` and `dispose` events outside the render path. It returns an unsubscribe function; an optional abort signal removes the subscription. Observer-handler exceptions are swallowed so they cannot affect chart behavior. A tap added after disposal returns a no-op unsubscribe function.
+
+`[Symbol.dispose]()` delegates to `dispose()`, allowing explicit resource management where supported.
+
+All chart handles expose the same lifecycle members; interactive cartesian and pie/radar charts use a `.prism-live` status region when no tooltip is enabled. A tooltip is itself a polite status region. Sparklines have neither a tooltip nor a live value announcer.
+
+| Method or property | Contract |
+| --- | --- |
+| `el` | The chart's root `SVGSVGElement` |
+| `update(data)` | Replace chart data and render; throws `PrismRenderError` after disposal |
+| `dispose()` | Idempotently release chart-owned DOM, observation, and motion |
+| `disposed` | Whether the handle has been disposed |
+| `disposalSignal` | `AbortSignal` aborted during disposal |
+| `tap(handler, options?)` | Observe resize/dispose events; returns an unsubscribe function |
+| `[Symbol.dispose]()` | Calls `dispose()` |
+
+`PrismEvent` reports a changed SVG content size as `{ type: 'resize', width, height }`; the `dispose` event is emitted once before teardown completes.
 
 ## Types
 
-### Core types
+The following are all types and interfaces exported from `@vielzeug/prism`. Definitions mirror the package entry-point contracts.
+
+### Animation Types
 
 ```ts
-interface ChartHandle {
-  readonly disposalSignal: AbortSignal;
-  readonly disposed: boolean;
-  readonly el: SVGSVGElement;
-  tap(handler: (event: PrismEvent) => void, options?: { readonly signal?: AbortSignal }): () => void;
-  update(data: TData): void;
-  dispose(): void;
-  [Symbol.dispose](): void;
+export type EasingFn = (t: number) => number;
+export type EasingName = 'back-out' | 'ease-in' | 'ease-in-out' | 'ease-out' | 'expo-out' | 'linear';
+
+export interface TransitionConfig {
+  /** Milliseconds per animated lane. Defaults to 300 (420 for a line entrance, 400 for radar). */
+  duration?: number;
+  easing?: EasingName | ((t: number) => number);
+  /** `system` skips animation when reduced motion is preferred. */
+  preference?: 'always' | 'never' | 'system';
+  /** Per-bar delay on bar charts or per-series delay on radar charts. */
+  stagger?: number;
 }
 
-type PrismEvent =
-  | { readonly height: number; readonly type: 'resize'; readonly width: number }
-  | { readonly type: 'dispose' };
+export type TransitionOption = TransitionConfig | boolean;
+```
 
-interface ChartMargin {
-  top: number;
-  right: number;
+### Theme Types
+
+```ts
+export interface PrismTheme {
+  axisColor?: string;
+  colors?: string[];
+  fontFamily?: string;
+  gridColor?: string;
+  gridOpacity?: number;
+  textColor?: string;
+  textColorSecondary?: string;
+  tooltipBg?: string;
+  tooltipBorder?: string;
+  tooltipColor?: string;
+}
+
+export interface ThemeScope {
+  readonly scope?: HTMLElement;
+}
+```
+
+`PrismTheme.colors` writes up to eight palette slots. The scalar fields map as follows:
+
+| Field | CSS custom property |
+| --- | --- |
+| `axisColor` | `--prism-axis-color` |
+| `fontFamily` | `--prism-font-family` |
+| `gridColor` | `--prism-grid-color` |
+| `gridOpacity` | `--prism-grid-opacity` |
+| `textColor` | `--prism-text-color` |
+| `textColorSecondary` | `--prism-text-color-secondary` |
+| `tooltipBg` | `--prism-tooltip-bg` |
+| `tooltipBorder` | `--prism-tooltip-border` |
+| `tooltipColor` | `--prism-tooltip-color` |
+
+### Core and Data Types
+
+```ts
+export interface ChartMargin {
   bottom: number;
   left: number;
+  right: number;
+  top: number;
 }
 
-interface ChartDimensions {
-  width: number;
+export interface ChartDimensions {
   height: number;
   margin: ChartMargin;
+  width: number;
 }
 
-type ChartA11y =
-  | { readonly decorative: true }
-  | { readonly ariaLabel: string; readonly decorative?: false };
-```
-
-`update()` renders synchronously and throws `PrismRenderError` after disposal. Omitting `a11y` makes the SVG decorative with `aria-hidden="true"`.
-
-`tap()` observes runtime behavior outside the render path: it receives `resize` and `dispose` events (see `PrismEvent`). It returns an unsubscribe function; pass `options.signal` to detach automatically. Handler errors are swallowed, and tapping a disposed handle returns a no-op unsubscribe.
+export type PrismEvent =
+  | { readonly height: number; readonly type: 'resize'; readonly width: number }
+  | { readonly type: 'dispose' };
 
----
+export interface ChartHandle {
+  readonly disposalSignal: AbortSignal;
+  dispose(): void;
+  readonly disposed: boolean;
+  readonly el: SVGSVGElement;
+  tap(handler: (event: PrismEvent) => void, options?: { readonly signal?: AbortSignal }): () => void;
+  update(data: TData): void;
+  [Symbol.dispose](): void;
+}
 
-### Data types
+export type ChartA11y =
+  | { readonly decorative: true }
+  | { readonly ariaLabel: string; readonly decorative?: false };
 
-```ts
-interface Datum {
+export interface Datum {
+  dash?: string;
   key: TKey;
-  value: number;
   meta?: Record;
-  dash?: string; // stroke-dasharray for this datum's marks, e.g. '5 5'
-  opacity?: number; // opacity multiplier 0-1 for this datum's marks, e.g. 0.4
+  opacity?: number;
+  value: number;
 }
 
-type ContinuousDatum = Datum;
+export type ContinuousDatum = Datum;
 
-interface Series {
-  name: string;
-  data: TDatum[];
+export interface Series {
   color?: string;
-  id?: string; // stable data-series-id on the series group; defaults to series-
+  data: TDatum[];
+  id?: string;
+  name: string;
 }
 
-interface ChartEvent {
+export interface ChartEvent {
   datum: Datum;
-  series: Series;
   originalEvent: Event;
-  values?: SeriesValue[]; // every series at the same key (line, area, bar)
+  series: Series;
+  values?: SeriesValue[];
 }
 
-interface SeriesValue {
+export interface SeriesValue {
   datum: Datum | undefined;
   series: Series;
 }
 ```
 
-Line and area series use `ContinuousDatum`; bar series accept the complete `Datum` key range. On line, area, and bar charts, `datum`/`series` name the series nearest the pointer, and `values` lists every series at that key (a missing value is `undefined`). `originalEvent` is a `MouseEvent`, or a `KeyboardEvent` for keyboard navigation.
-
-#### Per-datum presentation
-
-`dash` and `opacity` style an individual datum's marks without splitting the series — the usual case is a forecast tail where points past "today" are faded or dashed. They are styling-only: interaction, tooltip, and accessibility behavior never change. Support is per chart type:
+`Datum.dash` and `Datum.opacity` affect rendered marks only on the chart types that support them. On bars, `dash` adds a 1px series-color stroke so the dash is visible against the fill. `Series.id` becomes a `data-series-id` attribute on a series group; characters outside `[A-Za-z0-9_-]` are replaced with `-`. When omitted, the id is based on the series index.
 
 | Chart | `dash` | `opacity` |
 | --- | --- | --- |
-| Bar | `stroke-dasharray` on the datum's `rect`, plus a 1px series-color stroke so the dash is visible on the fill. | Element `opacity` on the datum's `rect`. |
-| Line | The segment from this datum to the next (Chart.js-style segments). The last datum's `dash` has no segment and is ignored. | That same segment, plus this datum's own point marker. |
-| Area | The top line's segment from this datum to the next (last datum ignored). The fill keeps the series-level treatment. | Same segment on the top line. |
-| Sparkline, pie, radar | Ignored. | Ignored. |
+| Bar | Strokes that datum's bar | Applies to that bar |
+| Line | Applies to the segment from this datum to the next | Applies to that segment and its point marker |
+| Area | Applies to the top-line segment from this datum to the next | Applies to that segment |
+| Scatter | Ignored | Applies to that point |
+| Pie, radar, sparkline | Ignored | Ignored |
 
-Consecutive datums that share one `dash`/`opacity` render as a single path run. Absent fields keep the series/theme default, and a series with no presentation fields renders byte-identically to a chart that never used them. See [Forecast / emphasis styling](./usage.md#forecast--emphasis-styling).
+For line and area charts, the last datum has no following segment, so its `dash` value is ignored. The chart factories group adjacent segments with the same presentation values into path runs.
 
-#### Stable series identity
+For line, area, and bar charts, `ChartEvent.values` lists each series at the active key in series order. Its `datum` is `undefined` when that series has no matching key. `originalEvent` is a pointer event or a keyboard event for keyboard activation. Scatter events identify only the nearest independent point and omit `values`.
 
-`Series.id` is rendered as `data-series-id` on the chart's series group (`.prism-line-series`, `.prism-bar-series`, `.prism-area-series`, `.prism-radar-series`) so tooltips, tests, and external CSS can address a series without positional assumptions. Characters outside `[A-Za-z0-9_-]` are replaced with `-`. It defaults to `series-`, which only stays stable while the series order does — set `id` to survive reordering.
-
----
-
-### Chart configurations
+### Scale Types
 
 ```ts
-interface BaseChartConfig {
-  a11y?: ChartA11y;
-  legend?: boolean | LegendConfig;
-  margin?: Partial;
-  onClick?: (event: ChartEvent) => void;
-  onHover?: (event: ChartEvent | null) => void;
-  tooltip?: boolean | TooltipConfig;
-  transition?: TransitionConfig;
-  xAxis?: XAxisConfig;
-  yAxis?: YAxisConfig;
+export interface Scale {
+  readonly domain: readonly [T, T];
+  invert(pixel: number): T;
+  map(value: T): number;
+  readonly range: readonly [number, number];
+  ticks(count?: number): T[];
 }
 
-interface LineChartConfig extends BaseChartConfig {
-  crosshair?: boolean | CrosshairConfig;
-  rightYAxis?: Omit;
-  series: LineSeriesConfig[];
+export interface BandScale {
+  bandwidth(): number;
+  readonly domain: readonly string[];
+  gap(): number;
+  map(value: string): number;
+  readonly range: readonly [number, number];
+  ticks(count?: number): string[];
 }
 
-interface AreaChartConfig extends BaseChartConfig {
-  crosshair?: boolean | CrosshairConfig;
-  series: AreaSeriesConfig[];
+export interface LinearScaleConfig {
+  clamp?: boolean;
+  domain: [number, number];
+  nice?: boolean;
+  range: [number, number];
 }
 
-interface BarChartConfig extends BaseChartConfig {
-  series: BarSeriesConfig[];
-  variant?: BarVariant;
+export interface TimeScaleConfig {
+  domain: [Date, Date];
+  nice?: boolean;
+  range: [number, number];
 }
 
-interface PieChartConfig
-  extends Omit {
-  data: PieSliceConfig[];
-  variant?: PieVariant;
-  innerRadius?: number;
-  cornerRadius?: number;
-  padPixels?: number;
-  onClick?: (event: PieEvent) => void;
-  onHover?: (event: PieEvent | null) => void;
+export interface BandScaleConfig {
+  domain: string[];
+  padding?: number;
+  paddingOuter?: number;
+  range: [number, number];
 }
+```
 
-interface RadarChartConfig
-  extends Omit {
-  axes: RadarAxisConfig[];
-  series: RadarSeriesConfig[];
-  curve?: 'linear' | 'rounded';
-  domain?: [number, number];
-  fill?: 'gradient' | 'none' | 'solid';
-  grid?: boolean | RadarGridConfig;
-  showPoints?: boolean;
-  showValues?: boolean;
-  startAngle?: number;
-  onClick?: (event: RadarEvent) => void;
-  onHover?: (event: RadarEvent | null) => void;
-}
-
-interface SparklineConfig {
-  data: number[] | StackSegment[];
-  variant?: SparklineVariant;
-  a11y?: ChartA11y;
-  color?: string;
-  cornerRadius?: number;
-  curve?: 'linear' | 'monotone' | 'step';
-  fillOpacity?: number; // overrides --prism-spark-fill-opacity (area variant)
-  onClick?: (event: SparklineEvent) => void;
-  onHover?: (event: SparklineEvent | null) => void;
-  padPixels?: number;
-  showEndPoint?: boolean; // default true: dot on the latest value (line, area)
-  strokeWidth?: number;
-  transition?: TransitionConfig;
-}
-```
-
----
-
-### Series and slice configurations
+### Axis and Interaction Types
 
 ```ts
-interface LineSeriesConfig extends Series {
-  yAxis?: 'left' | 'right'; // defaults to 'left'
-  curve?: 'linear' | 'monotone' | 'step';
-  pointRadius?: number;
-  showPoints?: boolean;
-  strokeWidth?: number; // overrides --prism-line-width
-}
-
-interface AreaSeriesConfig extends Series {
-  curve?: 'linear' | 'monotone' | 'step';
-  fill?: 'gradient' | 'solid'; // default 'gradient', fading toward the baseline
-  fillOpacity?: number; // overrides --prism-area-opacity
-  showLine?: boolean;
-}
-
-interface BarSeriesConfig extends Series {
-  borderRadius?: number; // overrides --prism-bar-radius; stacked bars stay square
-}
-
-interface PieSliceConfig {
-  value: number;
-  color?: string;
-  label?: string;
-}
-
-interface PieEvent {
-  index: number;
-  originalEvent: Event;
-  slice: PieSliceConfig;
-}
-
-interface RadarAxisConfig {
-  key: string;
-  label: string;
-  min?: number;
-  max?: number;
-  format?: (value: number) => string;
-}
-
-type RadarSeriesConfig = Series>;
-
-interface RadarGridConfig {
-  bands?: boolean; // default true
-  labels?: boolean; // default false; drawn only when every axis shares one domain
-  levels?: number; // default 4
-  shape?: 'circle' | 'polygon'; // default 'polygon'
-}
-
-interface RadarEvent {
-  axis: RadarAxisConfig;
-  index: number;
-  values: RadarAxisValue[];
-  originalEvent: Event;
-}
+export type HorizontalAxisPosition = 'bottom' | 'top';
+export type VerticalAxisPosition = 'left' | 'right';
+export type AxisPosition = HorizontalAxisPosition | VerticalAxisPosition;
 
-interface RadarAxisValue {
-  datum: Datum | undefined;
-  series: RadarSeriesConfig;
-}
-
-interface StackSegment {
-  value: number;
+export interface GridConfig {
   color?: string;
-  label?: string;
-}
-
-interface SparklineEvent {
-  index: number;
-  originalEvent: Event;
-  value: number;
+  dash?: string;
 }
-```
 
-A custom radar `tooltip.render` receives `datum.meta` with `axis`, `values`, and the default `text`.
-
----
-
-### Axis, interaction, and transition configurations
-
-```ts
-type HorizontalAxisPosition = 'bottom' | 'top';
-type VerticalAxisPosition = 'left' | 'right';
-type AxisPosition = HorizontalAxisPosition | VerticalAxisPosition;
-
-interface AxisConfig {
-  grid?: boolean | GridConfig;
+export interface AxisConfig {
+  grid?: GridConfig | boolean;
   label?: string;
   position?: TPosition;
   tickCount?: number;
   tickFormat?: (value: Date | number | string) => string;
 }
 
-type XAxisConfig = AxisConfig;
-type YAxisConfig = AxisConfig;
-
-interface GridConfig {
-  color?: string;
-  dash?: string;
-}
+export type XAxisConfig = AxisConfig;
+export type YAxisConfig = AxisConfig;
 
-interface TooltipConfig {
+export interface TooltipConfig {
   offset?: number;
   render?: (datum: Datum, series: Series) => Node | string;
 }
 
-interface CrosshairConfig {
+export interface CrosshairConfig {
   horizontal?: boolean;
   snap?: boolean;
   vertical?: boolean;
 }
 
-interface LegendConfig {
-  position?: LegendPosition;
-}
-
-type LegendPosition = 'bottom' | 'left' | 'right' | 'top';
+export type LegendPosition = 'bottom' | 'left' | 'right' | 'top';
 
-interface TransitionConfig {
-  duration?: number;
-  easing?: EasingFn | 'ease-in' | 'ease-in-out' | 'ease-out' | 'linear';
-  preference?: 'always' | 'never' | 'system';
-  stagger?: number;
+export interface LegendConfig {
+  position?: LegendPosition;
 }
-
-type EasingFn = (t: number) => number;
 ```
 
-Tooltip strings are assigned through `textContent`. Return a `Node` for structured content.
+The crosshair defaults to a vertical line that snaps to the nearest datum; the horizontal line is hidden by default. With `snap: false`, only the guide follows the pointer—tooltip and callback data still refer to the nearest datum.
 
----
+Tooltip strings are assigned as text, not parsed as HTML. For a radar chart, `tooltip.render` receives a datum whose `meta` contains the active axis, all series values, and the default announcement text.
 
-### Scale types
+### Chart Configuration Types
 
 ```ts
-interface Scale {
-  readonly domain: readonly [T, T];
-  readonly range: readonly [number, number];
-  map(value: T): number;
-  invert(pixel: number): T;
-  ticks(count?: number): T[];
+export interface BaseChartConfig {
+  a11y?: ChartA11y;
+  legend?: LegendConfig | boolean;
+  margin?: Partial;
+  onClick?: (event: ChartEvent) => void;
+  onHover?: (event: ChartEvent | null) => void;
+  tooltip?: TooltipConfig | boolean;
+  transition?: TransitionOption;
+  xAxis?: XAxisConfig | false;
+  yAxis?: YAxisConfig | false;
 }
 
-interface BandScale {
-  readonly domain: readonly string[];
-  readonly range: readonly [number, number];
-  map(value: string): number;
-  ticks(count?: number): string[];
-  bandwidth(): number;
-  gap(): number;
+export interface LineSeriesConfig extends Series {
+  curve?: 'linear' | 'monotone' | 'step';
+  pointRadius?: number;
+  showPoints?: boolean;
+  strokeWidth?: number;
+  yAxis?: 'left' | 'right';
 }
 
-interface LinearScaleConfig {
-  domain: [number, number];
-  range: [number, number];
-  clamp?: boolean;
-  nice?: boolean;
+export interface LineChartConfig extends BaseChartConfig {
+  crosshair?: CrosshairConfig | boolean;
+  rightYAxis?: Omit;
+  series: LineSeriesConfig[];
 }
 
-interface TimeScaleConfig {
-  domain: [Date, Date];
-  range: [number, number];
-  nice?: boolean;
+export interface AreaSeriesConfig extends Series {
+  curve?: 'linear' | 'monotone' | 'step';
+  fill?: 'gradient' | 'solid';
+  fillOpacity?: number;
+  showLine?: boolean;
 }
 
-interface BandScaleConfig {
-  domain: string[];
-  range: [number, number];
-  padding?: number;
-  paddingOuter?: number;
+export interface AreaChartConfig extends BaseChartConfig {
+  crosshair?: CrosshairConfig | boolean;
+  series: AreaSeriesConfig[];
 }
-```
 
----
-
-### Remaining unions and theme type
-
-```ts
-type BarVariant = 'grouped' | 'grouped-horizontal' | 'stacked' | 'stacked-horizontal';
-type PieVariant = 'donut' | 'pie' | 'semi';
-type SparklineVariant = 'area' | 'bar' | 'line' | 'stack';
-
-interface PrismTheme {
-  colors?: string[];
-  fontFamily?: string;
-  gridColor?: string;
-  gridOpacity?: number;
+export interface ScatterSeriesConfig extends Series {
+  pointRadius?: number;
 }
-```
-
-## Errors
-
-### `PrismError`
-
-Base class for every Prism-originated error. It supports standard `ErrorOptions` cause chaining.
-
-### `PrismRenderError`
-
-Extends `PrismError`. Thrown for invalid containers, failed initial renders, and attempts to update disposed charts.
-
-### Usage Guide
-
-## Basic Usage
-
-Every chart needs a container element with defined dimensions and the theme CSS:
-
-```ts
-import { createLineChart } from '@vielzeug/prism';
-import '@vielzeug/prism/theme';
-
-const container = document.querySelector('#chart')!;
-const chart = createLineChart(container, {
-  series: [
-    {
-      name: 'Revenue',
-      data: [
-        { key: 1, value: 10 },
-        { key: 2, value: 16 },
-      ],
-    },
-  ],
-});
-
-chart.dispose();
-```
-
-```html
-
-```
-
-Prism observes the container size via `ResizeObserver` and re-renders automatically on resize. If the container has zero dimensions at mount time, a `warn` is emitted in development: ensure the container has layout before calling the chart factory.
-
-## Updating Data
-
-Chart factories render synchronously and return a typed handle. Call `update()` with the same data shape used by the factory when application state changes.
-
-```ts
-import { createLineChart } from '@vielzeug/prism';
-
-const chart = createLineChart(container, {
-  series: [{ data: [{ key: 1, value: 10 }], name: 'Live' }],
-});
-
-chart.update([
-  {
-    data: [
-      { key: 1, value: 10 },
-      { key: 2, value: 20 },
-    ],
-    name: 'Live',
-  },
-]);
-```
-
-`update()` is state-library neutral. Call it from a framework effect, store subscription, event handler, or request callback. It throws after the chart is disposed instead of silently retaining detached state.
-
-## Line Charts
-
-```ts
-import { createLineChart } from '@vielzeug/prism';
-
-const chart = createLineChart(container, {
-  series: [
-    {
-      name: 'Revenue',
-      data: [
-        { key: 1, value: 100 },
-        { key: 2, value: 150 },
-        { key: 3, value: 130 },
-      ],
-      color: '#3b82f6',
-      curve: 'monotone', // 'linear' | 'monotone' | 'step'
-      strokeWidth: 2,
-      showPoints: true,
-      pointRadius: 4,
-    },
-  ],
-  xAxis: { position: 'bottom' },
-  yAxis: { position: 'left', grid: true },
-  tooltip: true,
-  crosshair: true,
-});
-```
 
-### Multiple Series
-
-```ts
-const chart = createLineChart(container, {
-  series: [
-    { name: 'Revenue', data: revenueData, color: '#3b82f6' },
-    { name: 'Expenses', data: expenseData, color: '#ef4444' },
-  ],
-  xAxis: { position: 'bottom' },
-  yAxis: { position: 'left', grid: true },
-});
-```
-
-### Independent Value Axes
-
-Assign a line series to `yAxis: 'right'` when its values need a different range. Both axes share the same X scale, while tooltips retain the original values.
-
-```ts
-const chart = createLineChart(container, {
-  series: [
-    { name: 'Health', data: [{ key: 0, value: 30 }, { key: 1, value: 20 }] },
-    { name: 'Damage', yAxis: 'right', data: [{ key: 0, value: 0 }, { key: 1, value: 300 }] },
-  ],
-  yAxis: { label: 'Health' },
-  rightYAxis: { label: 'Damage' },
-  tooltip: true,
-});
-```
-
-The primary axis is on the left when right-axis series are present. Grid configuration belongs to the primary axis. Dual-axis curve crossings do not imply equal numeric values. Preserve each marker's axis assignment when calling `update()`.
-
-### Time-based X Axis
-
-When data points use `Date` objects for `key`, Prism automatically applies a time scale. The domain spans exactly the first to the last date, so the series fills the plot width:
-
-```ts
-const chart = createLineChart(container, {
-  series: [
-    {
-      name: 'Signups',
-      data: [
-        { key: new Date('2024-01-01'), value: 50 },
-        { key: new Date('2024-02-01'), value: 80 },
-        { key: new Date('2024-03-01'), value: 120 },
-      ],
-    },
-  ],
-  xAxis: { position: 'bottom', tickFormat: (d) => (d as Date).toLocaleDateString() },
-  yAxis: { position: 'left' },
-});
-```
-
-## Bar Charts
-
-```ts
-import { createBarChart } from '@vielzeug/prism';
-
-const chart = createBarChart(container, {
-  series: [
-    {
-      name: 'Sales',
-      data: [
-        { key: 'Q1', value: 200 },
-        { key: 'Q2', value: 350 },
-        { key: 'Q3', value: 280 },
-        { key: 'Q4', value: 400 },
-      ],
-      borderRadius: 4,
-    },
-  ],
-  xAxis: { position: 'bottom' },
-  yAxis: { position: 'left', grid: true },
-  tooltip: true,
-});
-```
-
-### Variants
-
-Select the bar layout with `variant`:
-
-| Value                  | Layout                     |
-| ---------------------- | -------------------------- |
-| `'grouped'`            | Vertical grouped (default) |
-| `'stacked'`            | Vertical stacked           |
-| `'grouped-horizontal'` | Horizontal grouped         |
-| `'stacked-horizontal'` | Horizontal stacked         |
-
-```ts
-const chart = createBarChart(container, {
-  variant: 'stacked',
-  series: [
-    { name: 'Mobile', data: mobileData, color: '#3b82f6', borderRadius: 0 },
-    { name: 'Desktop', data: desktopData, color: '#10b981', borderRadius: 0 },
-  ],
-  xAxis: { position: 'bottom' },
-  yAxis: { position: 'left', grid: true },
-  tooltip: true,
-  legend: true,
-});
-```
-
-For horizontal layouts, categories appear on the Y axis and values on the X axis:
-
-```ts
-const chart = createBarChart(container, {
-  variant: 'grouped-horizontal',
-  series: [{ name: 'Revenue', data, color: '#3b82f6' }],
-  xAxis: { position: 'bottom', grid: true },
-  yAxis: { position: 'left' },
-});
-```
-
-### Grouped Bars
-
-Multiple series with `variant: 'grouped'` (default) render side-by-side:
-
-```ts
-const chart = createBarChart(container, {
-  series: [
-    { name: '2023', data: lastYearData, color: '#94a3b8' },
-    { name: '2024', data: thisYearData, color: '#3b82f6' },
-  ],
-});
-```
-
-## Area Charts
-
-Area fills use a vertical gradient that fades toward the baseline. Set `fill: 'solid'` for a flat fill:
-
-```ts
-import { createAreaChart } from '@vielzeug/prism';
-
-const chart = createAreaChart(container, {
-  series: [
-    {
-      name: 'Users',
-      data: userData,
-      curve: 'monotone',
-      fill: 'gradient', // 'gradient' (default) | 'solid'
-      showLine: true,
-    },
-  ],
-  xAxis: { position: 'bottom' },
-  yAxis: { position: 'left', grid: true },
-  crosshair: true,
-});
-```
-
-`fillOpacity` overrides the theme opacity for one series.
-
-## Forecast / emphasis styling
-
-A single series often mixes points that should look different — actuals plus a
-forecast tail, or a run that crossed a budget. Rather than split the series,
-carry `dash` and `opacity` on the individual datums. They are styling-only:
-tooltips, hover, keyboard, and screen-reader behavior never change.
-
-For a forecast tail, map a parallel `types` array onto the datums:
-
-```ts
-import { createLineChart } from '@vielzeug/prism';
-
-const types = ['REAL', 'REAL', 'FORECAST', 'FORECAST'];
-
-const chart = createLineChart(container, {
-  series: [
-    {
-      name: 'Cost',
-      data: values.map((value, i) => ({
-        key: months[i],
-        value,
-        ...(types[i] === 'FORECAST' ? { dash: '5 5', opacity: 0.4 } : {}),
-      })),
-    },
-  ],
-});
-```
-
-On a line chart, a datum's `dash` styles the segment from that point to the
-next, so the forecast run renders dashed while the actuals stay solid; its
-`opacity` fades that segment and the point marker. The last datum's `dash` has
-no segment to paint and is ignored. On a bar chart, both fields apply to that
-datum's own bar — a `dash` adds a 1px series-color stroke so the dash reads on
-the filled rect. On an area chart they style the top line only; the fill keeps
-its series-level treatment.
-
-The same mapping fades bars:
+export interface ScatterChartConfig extends BaseChartConfig {
+  crosshair?: CrosshairConfig | boolean;
+  series: ScatterSeriesConfig[];
+}
 
-```ts
-import { createBarChart } from '@vielzeug/prism';
+export interface BarSeriesConfig extends Series {
+  borderRadius?: number;
+}
 
-const chart = createBarChart(container, {
-  series: [
-    {
-      name: 'Cost',
-      data: values.map((value, i) => ({
-        key: months[i],
-        value,
-        ...(types[i] === 'FORECAST' ? { dash: '5 5', opacity: 0.4 } : {}),
-      })),
-    },
-  ],
-});
-```
+export type BarVariant = 'grouped' | 'grouped-horizontal' | 'stacked' | 'stacked-horizontal';
 
-Because the fields live on the data, a normal `update(newSeries)` re-applies
-them; removing the fields on the next update clears the styling. A series with
-no `dash`/`opacity` anywhere renders exactly as it did before these fields
-existed.
+export interface BarChartConfig extends BaseChartConfig {
+  series: BarSeriesConfig[];
+  variant?: BarVariant;
+}
 
-## Pie, Donut, and Semi-circle Charts
+export type PieVariant = 'donut' | 'pie' | 'semi';
 
-All three variants use `createPieChart` with the `variant` field:
+export interface PieSliceConfig {
+  color?: string;
+  label?: string;
+  value: number;
+}
 
-```ts
-import { createPieChart } from '@vielzeug/prism';
+export interface PieEvent {
+  index: number;
+  originalEvent: Event;
+  slice: PieSliceConfig;
+}
 
-const chart = createPieChart(container, {
-  data: [
-    { label: 'Direct', value: 42, color: '#3b82f6' },
-    { label: 'Organic', value: 28, color: '#10b981' },
-    { label: 'Referral', value: 18, color: '#f59e0b' },
-    { label: 'Social', value: 12, color: '#8b5cf6' },
-  ],
-  variant: 'donut', // 'pie' | 'donut' | 'semi'
-  tooltip: true,
-  transition: { duration: 400, easing: 'ease-out' },
-});
-```
+export interface PieChartConfig extends Omit {
+  cornerRadius?: number;
+  data: PieSliceConfig[];
+  innerRadius?: number;
+  onClick?: (event: PieEvent) => void;
+  onHover?: (event: PieEvent | null) => void;
+  padPixels?: number;
+  variant?: PieVariant;
+}
 
-### Variants
+export interface RadarAxisConfig {
+  format?: (value: number) => string;
+  key: string;
+  label: string;
+  max?: number;
+  min?: number;
+}
 
-| Value     | Shape                                                   |
-| --------- | ------------------------------------------------------- |
-| `'pie'`   | Full circle, no hole                                    |
-| `'donut'` | Full circle with inner hole (~55% of outer by default)  |
-| `'semi'`  | Top-half semicircle with inner hole: useful for gauges |
+export type RadarSeriesConfig = Series>;
 
-### Inner Radius
+export interface RadarGridConfig {
+  bands?: boolean;
+  labels?: boolean;
+  levels?: number;
+  shape?: 'circle' | 'polygon';
+}
 
-`innerRadius` overrides the automatic calculation:
+export interface RadarAxisValue {
+  datum: Datum | undefined;
+  series: RadarSeriesConfig;
+}
 
-```ts
-createPieChart(container, {
-  data,
-  variant: 'donut',
-  innerRadius: 60, // explicit pixels
-});
-```
+export interface RadarEvent {
+  axis: RadarAxisConfig;
+  index: number;
+  originalEvent: Event;
+  values: RadarAxisValue[];
+}
 
-### Slice Labels
+export interface RadarChartConfig extends Omit {
+  axes: RadarAxisConfig[];
+  curve?: 'linear' | 'rounded';
+  domain?: [number, number];
+  fill?: 'gradient' | 'none' | 'solid';
+  grid?: RadarGridConfig | boolean;
+  onClick?: (event: RadarEvent) => void;
+  onHover?: (event: RadarEvent | null) => void;
+  series: RadarSeriesConfig[];
+  showPoints?: boolean;
+  showValues?: boolean;
+  startAngle?: number;
+}
 
-Set `label` on each `PieSliceConfig` to render text at the arc centroid. A label that does not fit inside its slice is not drawn; the value stays available through the tooltip, legend, and keyboard announcements:
+export type SparklineVariant = 'area' | 'bar' | 'line' | 'stack';
 
-```ts
-{ value: 42, label: 'Direct' }
-```
+export interface StackSegment {
+  color?: string;
+  label?: string;
+  value: number;
+}
 
-Style labels via CSS:
+export interface SparklineEvent {
+  index: number;
+  originalEvent: Event;
+  value: number;
+}
 
-```css
-:root {
-  --prism-pie-label-color: #fff;
-  --prism-pie-label-size: 11px;
+export interface SparklineConfig {
+  a11y?: ChartA11y;
+  color?: string;
+  cornerRadius?: number;
+  curve?: 'linear' | 'monotone' | 'step';
+  data: number[] | StackSegment[];
+  fillOpacity?: number;
+  onClick?: (event: SparklineEvent) => void;
+  onHover?: (event: SparklineEvent | null) => void;
+  padPixels?: number;
+  showEndPoint?: boolean;
+  strokeWidth?: number;
+  transition?: TransitionOption;
+  variant?: SparklineVariant;
 }
 ```
 
-### Updating Data
+## Errors
+
+### `PrismError`
 
 ```ts
-const chart = createPieChart(container, {
-  data: [
-    { label: 'A', value: 40 },
-    { label: 'B', value: 60 },
-  ],
-  variant: 'donut',
-});
-
-chart.update([
-  { label: 'A', value: 55 },
-  { label: 'B', value: 45 },
-]);
+class PrismError extends Error {
+  constructor(message: string, opts?: ErrorOptions);
+}
 ```
 
-### Event Hooks
+Base class for Prism-originated errors. Its `name` is set to the concrete error class name, and it supports the standard `ErrorOptions` including `cause`.
+
+### `PrismRenderError`
 
 ```ts
-createPieChart(container, {
-  data,
-  onHover: (event) => {
-    // event is PieEvent | null (null on mouseleave)
-    if (event) console.log(event.index, event.slice.label, event.slice.value);
-  },
-  onClick: (event) => {
-    console.log('clicked', event.index, event.slice.label);
-  },
-});
+class PrismRenderError extends PrismError {}
 ```
 
-`PieEvent` provides `index`, the hovered/clicked `slice` (`PieSliceConfig`), and the `originalEvent` (`MouseEvent` or `KeyboardEvent`).
+Thrown when a chart cannot be rendered because its container is not a DOM element, when initial rendering fails (the original error is available as `cause`), or when `update()` is called after disposal. Empty or malformed chart data may instead produce a development warning or an empty rendering, depending on the chart.
 
-## Radar Charts
+### Usage Guide
+
+## Basic Usage
 
-`createRadarChart` compares several values on one shape, such as a hero's stats. Each series supplies values keyed by `axis.key`:
+Create a host element with non-zero dimensions, then pass it to a chart factory. This example creates the host in JavaScript so the snippet can run as written.
 
 ```ts
-import { createRadarChart } from '@vielzeug/prism';
+import { createLineChart } from '@vielzeug/prism';
+import '@vielzeug/prism/theme.css';
 
-const axes = [
-  { key: 'str', label: 'Strength' },
-  { key: 'agi', label: 'Agility' },
-  { key: 'int', label: 'Intellect' },
-  { key: 'end', label: 'Endurance' },
-  { key: 'spd', label: 'Speed', max: 5 },
-];
+const container = document.createElement('div');
+container.style.cssText = 'width:640px;height:320px';
+document.body.append(container);
 
-const chart = createRadarChart(container, {
-  a11y: { ariaLabel: 'Hero stats' },
-  axes,
-  domain: [0, 10],
-  fill: 'gradient',
-  showValues: true,
+const chart = createLineChart(container, {
+  a11y: { ariaLabel: 'Revenue by month' },
   series: [
     {
-      name: 'Adam',
+      name: 'Revenue',
       data: [
-        { key: 'str', value: 8 },
-        { key: 'agi', value: 6 },
-        { key: 'int', value: 4 },
-        { key: 'end', value: 9 },
-        { key: 'spd', value: 3 },
+        { key: 1, value: 10 },
+        { key: 2, value: 16 },
       ],
     },
   ],
+  tooltip: true,
 });
+
+chart.dispose();
 ```
 
-### Scales
+Each factory appends an SVG to its container and returns a `ChartHandle`. Prism observes the container with `ResizeObserver`; if it has zero dimensions on creation, Prism uses a temporary `600 × 300` size and warns in development. Give the host its layout before creating the chart.
 
-Every axis shares `domain` (or a nice range around the data when omitted). Give an axis its own `min`/`max` when its stat uses a different range: above, Speed runs 0 to 5 while the rest run 0 to 10, so each still fills the chart.
+## Updating Data
 
-### Appearance
+Keep application state outside Prism and pass the next complete data value to `update()`. The update method replaces chart data synchronously; the default transition may animate the resulting SVG.
 
-| Option | Values | Use it for |
-| --- | --- | --- |
-| `fill` | `'solid'`, `'gradient'`, `'none'` | `gradient` for a single hero; `solid` or `none` when overlaying several |
-| `curve` | `'linear'`, `'rounded'` | Rounded reads softer; linear keeps exact vertices |
-| `grid.shape` | `'polygon'`, `'circle'` | Polygon matches the axes; circle suits many axes |
-| `grid.levels` / `grid.bands` | number / boolean | Ring count and alternate shading |
-| `grid.labels` | boolean | Level values; drawn only when every axis shares one domain |
-| `showValues` | boolean | Value beside each vertex, formatted by `axis.format` |
+```ts
+import { createLineChart } from '@vielzeug/prism';
 
-### Comparing Series
+const container = document.createElement('div');
+container.style.cssText = 'width:640px;height:320px';
+document.body.append(container);
 
-Pass several series with `legend: true`. Hovering one shape dims the others, and hovering an axis reports every series' value on it:
+let series = [{ data: [{ key: 1, value: 10 }], name: 'Live' }];
+const chart = createLineChart(container, { series });
 
-```ts
-createRadarChart(container, {
-  axes,
-  legend: true,
-  series: [adam, eve],
-  tooltip: true, // "Agility: Adam 6, Eve 9"
-  onHover: (event) => event && console.log(event.axis.label, event.values),
-});
+series = [{ data: [{ key: 1, value: 10 }, { key: 2, value: 20 }], name: 'Live' }];
+chart.update(series);
+chart.dispose();
 ```
 
-## Sparklines
+`update()` accepts the type shown by that factory's handle: a complete series array for line, area, scatter, bar, and radar charts; a slice array for pie charts; and a number or stack-segment array for sparklines. Chart options such as axes, variant, callbacks, and accessibility are set at creation. For example, radar axes and a pie chart's variant do not change through `update()`.
+
+## Line Charts
 
-Sparklines are minimal inline charts with no axes, no legend, and no margin: designed to live inline with text or inside table cells.
+Line and area series use number or `Date` keys. All series in one chart must use the same key kind. Use `curve` to choose interpolation, and enable markers with `showPoints`.
 
 ```ts
-import { createSparkline } from '@vielzeug/prism';
+import { createLineChart } from '@vielzeug/prism';
+
+const container = document.createElement('div');
+container.style.cssText = 'width:640px;height:320px';
+document.body.append(container);
 
-const spark = createSparkline(container, {
-  data: [12, 18, 14, 22, 19, 28],
-  variant: 'line', // 'line' | 'area' | 'bar' | 'stack' (default: 'line')
-  color: '#3b82f6',
-  curve: 'monotone',
-  strokeWidth: 1.5,
+const chart = createLineChart(container, {
+  a11y: { ariaLabel: 'Revenue and expenses' },
+  series: [
+    {
+      curve: 'monotone',
+      data: [{ key: 1, value: 100 }, { key: 2, value: 150 }, { key: 3, value: 130 }],
+      name: 'Revenue',
+      showPoints: true,
+    },
+    {
+      color: '#c2410c',
+      data: [{ key: 1, value: 70 }, { key: 2, value: 95 }, { key: 3, value: 110 }],
+      name: 'Expenses',
+    },
+  ],
+  tooltip: true,
+  xAxis: { label: 'Month' },
+  yAxis: { grid: true, label: 'Dollars' },
 });
 
-spark.dispose();
+chart.dispose();
 ```
 
-### Variants
+### Independent Value Axes
 
-- **`line`**: simple polyline path (default)
-- **`area`**: gradient-filled area + line overlay
-- **`bar`**: vertical bar for each data point
-- **`stack`**: horizontal proportional segments; use `StackSegment[]` for `data` with per-segment colors
+Assign a line series to the right axis when it uses a different value range. Both axes share the x-scale; `rightYAxis` configures the second axis and cannot configure its position or grid.
 
-Line and area sparklines mark the latest value with a dot. Set `showEndPoint: false` to hide it.
+```ts
+import { createLineChart } from '@vielzeug/prism';
 
-### Updating Data
+const container = document.createElement('div');
+container.style.cssText = 'width:640px;height:320px';
+document.body.append(container);
 
-```ts
-const spark = createSparkline(container, {
-  data: [12, 18, 14, 22],
-  variant: 'area',
+const chart = createLineChart(container, {
+  a11y: { ariaLabel: 'Health and damage by level' },
+  rightYAxis: { label: 'Damage' },
+  series: [
+    { data: [{ key: 1, value: 30 }, { key: 2, value: 20 }], name: 'Health' },
+    { data: [{ key: 1, value: 100 }, { key: 2, value: 300 }], name: 'Damage', yAxis: 'right' },
+  ],
+  yAxis: { grid: true, label: 'Health' },
 });
 
-spark.update([12, 18, 14, 22, 30]);
+chart.dispose();
 ```
 
-### Event Hooks
+When any series uses the right axis, the primary value axis is placed on the left. Grid lines belong to the primary `yAxis`. The independent numeric scales mean that curve crossings do not imply equal values.
 
-Sparklines use simplified hooks: `SparklineEvent` rather than full `ChartEvent`. With a hook set, a marker follows the hovered value:
+### Time-Based X Axis
+
+Use `Date` values for every key when plotting time. Line and area charts use a time scale whose domain fits the data instead of rounding outward to tick boundaries.
 
 ```ts
-const spark = createSparkline(container, {
-  data: [10, 20, 30],
-  onHover: (event) => {
-    // event is SparklineEvent | null (null on mouseleave)
-    if (event) console.log(`Hovering point ${event.index}: ${event.value}`);
-  },
-  onClick: (event) => {
-    console.log(`Clicked point ${event.index}: ${event.value}`);
-  },
+import { createLineChart } from '@vielzeug/prism';
+
+const container = document.createElement('div');
+container.style.cssText = 'width:640px;height:320px';
+document.body.append(container);
+
+const formatter = new Intl.DateTimeFormat(undefined, { month: 'short', day: 'numeric' });
+const chart = createLineChart(container, {
+  a11y: { ariaLabel: 'Signups over time' },
+  series: [{
+    data: [
+      { key: new Date('2026-09-01'), value: 50 },
+      { key: new Date('2026-09-08'), value: 80 },
+      { key: new Date('2026-09-15'), value: 120 },
+    ],
+    name: 'Signups',
+  }],
+  xAxis: { tickFormat: (value) => value instanceof Date ? formatter.format(value) : String(value) },
 });
+
+chart.dispose();
 ```
 
-`SparklineEvent` provides `index`, the hovered/clicked `value`, and the `originalEvent`.
+`tickFormat` formats axis labels only. Tooltip content and accessibility announcements use the underlying keys and values.
 
-> **Note:** Sparklines have no keyboard navigation. Label one with `a11y.ariaLabel` only when the trend carries meaning, and state the key value in surrounding text.
+## Bar Charts
 
-## Axes and Grid
+Bar chart keys are string categories. The default `grouped` variant puts series side by side; the horizontal variants put categories on the y-axis and values on the x-axis.
 
 ```ts
-{
-  xAxis: {
-    position: 'bottom',          // 'top' | 'bottom'
-    tickCount: 5,
-    tickFormat: (v) => `$${v}`,
-    label: 'Month',
-    grid: true,                  // or { color: '#ddd', dash: '4 2' }
-  },
-  yAxis: {
-    position: 'left',            // 'left' | 'right'
-    grid: { color: '#f0f0f0' },
-    label: 'Revenue ($)',
-  },
-}
-```
-
-Category axes show every label when the labels fit and thin them out only when they would overlap. Set `tickCount` to choose the density yourself.
+import { createBarChart } from '@vielzeug/prism';
 
-## Tooltips
+const container = document.createElement('div');
+container.style.cssText = 'width:640px;height:320px';
+document.body.append(container);
 
-Enable with `tooltip: true`. On line, area, bar, and radar charts the default tooltip compares every series at the active key: a title, then a colour swatch, name, and value per series. Provide a custom `render` function to replace it. Strings are rendered as text. Return a DOM node for structured content:
+const chart = createBarChart(container, {
+  a11y: { ariaLabel: 'Sales by quarter' },
+  series: [{
+    data: [{ key: 'Q1', value: 200 }, { key: 'Q2', value: 350 }, { key: 'Q3', value: 280 }],
+    name: 'Sales',
+  }],
+  tooltip: true,
+});
 
-```ts
-{
-  tooltip: {
-    offset: 12,
-    render: (datum, series) => {
-      const content = document.createElement('strong');
-      content.textContent = `${series.name}: ${datum.value.toLocaleString()}`;
-      return content;
-    },
-  },
-}
+chart.dispose();
 ```
 
-Prism never injects tooltip strings as HTML, so custom rendering does not require a sanitizer.
+Choose `grouped`, `stacked`, `grouped-horizontal`, or `stacked-horizontal` in `variant`. Negative values in a stacked chart are clamped to zero and produce a development warning. Bars in stacked variants remain square; `borderRadius` applies to grouped bars.
 
-The tooltip element is scoped inside the chart container (not `document.body`) and is removed automatically on `dispose()`.
+Axes render by default, with grid lines on the value axis. For horizontal variants, `xAxis` is the value axis and `yAxis` is the category axis. Configure `grid` on the value axis.
 
-## Crosshair
+## Area Charts
 
-A vertical guide that snaps to the nearest data point:
+Area series use a gradient fill by default. Set `fill: 'solid'` for a flat fill, or set `fillOpacity` to override the theme opacity for that series.
 
 ```ts
-{
+import { createAreaChart } from '@vielzeug/prism';
+
+const container = document.createElement('div');
+container.style.cssText = 'width:640px;height:320px';
+document.body.append(container);
+
+const chart = createAreaChart(container, {
+  a11y: { ariaLabel: 'Visitors over time' },
   crosshair: true,
-  // or configure:
-  crosshair: { vertical: true, horizontal: true, snap: true },
-}
+  series: [{
+    curve: 'monotone',
+    data: [{ key: 1, value: 12 }, { key: 2, value: 18 }, { key: 3, value: 15 }],
+    fill: 'solid',
+    fillOpacity: 0.2,
+    name: 'Visitors',
+    showLine: true,
+  }],
+});
+
+chart.dispose();
 ```
 
-## Legend
+## Scatter Charts
 
-Enable with `legend: true` (defaults to `bottom`) or configure position:
+Scatter charts treat every datum as an independent point: `key` is the numeric x-value and `value` is the y-value. The scales fit the observed values rather than forcing the y-domain to include zero. Set `pointRadius` on a series to change its marker size.
 
 ```ts
-{
-  legend: true,
-  // or:
-  legend: { position: 'top' },  // 'top' | 'bottom' | 'left' | 'right'
-}
-```
+import { createScatterChart } from '@vielzeug/prism';
 
-The legend renders as a `div` placed outside the SVG. Each item shows a color swatch and the series `name`. Customize via CSS:
+const container = document.createElement('div');
+container.style.cssText = 'width:640px;height:320px';
+document.body.append(container);
 
-```css
-:root {
-  --prism-legend-gap: 1rem;
-  --prism-legend-dot-size: 0.5rem;
-  --prism-legend-font-size: 0.75rem;
-}
+const chart = createScatterChart(container, {
+  a11y: { ariaLabel: 'Height against weight' },
+  series: [{
+    data: [{ key: 160, value: 55 }, { key: 175, value: 70 }, { key: 190, value: 88 }],
+    name: 'Cohort A',
+    pointRadius: 5,
+  }],
+  tooltip: true,
+});
+
+chart.dispose();
 ```
 
-## Event Hooks
+Scatter callbacks identify one nearest point and do not provide cross-series `values`, because points do not share a category key.
+
+## Forecast and Emphasis Styling
 
-All charts expose `onClick` and `onHover` callbacks on the config:
+Add `dash` or `opacity` to individual `Datum` objects when one part of a series needs distinct styling. These fields do not change interaction, tooltip, or accessibility behavior.
 
 ```ts
+import { createLineChart } from '@vielzeug/prism';
+
+const container = document.createElement('div');
+container.style.cssText = 'width:640px;height:320px';
+document.body.append(container);
+
+const values = [10, 13, 15, 18];
 const chart = createLineChart(container, {
-  series: [{ name: 'Revenue', data }],
-  onHover: (event) => {
-    // event is ChartEvent | null (null on mouseleave)
-    if (event) console.log(event.datum, event.series);
-  },
-  onClick: (event) => {
-    console.log('clicked', event.datum);
-  },
+  series: [{
+    data: values.map((value, index) => ({
+      key: index + 1,
+      value,
+      ...(index >= 2 ? { dash: '5 5', opacity: 0.4 } : {}),
+    })),
+    name: 'Forecast',
+    showPoints: true,
+  }],
 });
-```
 
-`ChartEvent` provides:
-
-- `datum`: the datum of the series nearest the pointer
-- `series`: the corresponding `Series` config
-- `values`: every series at the same key (line, area, and bar charts)
-- `originalEvent`: the raw `MouseEvent` or, for keyboard navigation, `KeyboardEvent`
+chart.dispose();
+```
 
-> **Pie, radar, and sparkline events differ**: pie hooks receive a `PieEvent` (`index`, `slice`, `originalEvent`), sparkline hooks a `SparklineEvent` (`index`, `value`, `originalEvent`), and radar hooks a `RadarEvent` describing an axis. See [`PieChartConfig`](./api.md#chart-configurations) and [`createRadarChart()`](./api.md#createradarchart).
+For line and area charts, each datum's `dash` styles the segment from that datum to the next; the final datum has no outgoing segment. Line opacity also fades the datum's marker. Area styling affects the top line, not the fill. Bar opacity and dashes apply to the individual bar; scatter opacity applies to its point and scatter dashes are ignored. Pie, radar, and sparkline ignore these two fields.
 
-## Animations
+## Pie, Donut, and Semi Charts
 
-Pass a `transition` config to animate enter and update transitions:
+Use `createPieChart()` for all three shapes. `variant` is fixed when the chart is created; `update()` replaces the slice data.
 
 ```ts
-{
-  transition: {
-    duration: 400,
-    easing: 'ease-out',
-    stagger: 30,  // ms delay between bars (bar charts) or series (radar charts)
-  },
-}
-```
-
-All chart types use `requestAnimationFrame`-based interpolation and skip animation when the user prefers reduced motion (`preference: 'system'`, the default). Bar and radar charts apply `stagger` on entry; line, area, and pie charts ignore it.
+import { createPieChart } from '@vielzeug/prism';
 
-## Theming
+const container = document.createElement('div');
+container.style.cssText = 'width:320px;height:240px';
+document.body.append(container);
 
-Import the default theme:
+const chart = createPieChart(container, {
+  a11y: { ariaLabel: 'Orders by channel' },
+  data: [
+    { label: 'Direct', value: 42 },
+    { label: 'Organic', value: 28 },
+    { label: 'Referral', value: 18 },
+    { label: 'Social', value: 12 },
+  ],
+  legend: true,
+  tooltip: true,
+  variant: 'donut',
+});
 
-```ts
-import '@vielzeug/prism/theme';
+chart.dispose();
 ```
 
-### Programmatic Theme with `setTheme`
+The `pie` default has no inner radius. `donut` and `semi` default to an inner radius of 55% of the outer radius. `innerRadius` overrides that size in pixels. Slice labels are omitted when they do not fit; keep a tooltip or legend when small slices need identifying.
+
+## Radar Charts
 
-Call `setTheme` once at app startup to apply custom tokens programmatically:
+Define at least three axes when creating a radar chart. Series data uses string keys that match `RadarAxisConfig.key`; `update()` replaces series but keeps axes and other configuration fixed.
 
 ```ts
-import { setTheme } from '@vielzeug/prism';
+import { createRadarChart } from '@vielzeug/prism';
+
+const container = document.createElement('div');
+container.style.cssText = 'width:400px;height:320px';
+document.body.append(container);
 
-setTheme({
-  colors: ['#6366f1', '#22d3ee', '#f59e0b', '#10b981'], // replaces --prism-color-1 through -4
-  fontFamily: 'Inter, system-ui, sans-serif', // sets --prism-font-family
-  gridColor: '#e2e8f0', // sets --prism-grid-color
-  gridOpacity: 0.6, // sets --prism-grid-opacity
+const axes = [
+  { key: 'strength', label: 'Strength' },
+  { key: 'agility', label: 'Agility' },
+  { key: 'endurance', label: 'Endurance' },
+];
+const chart = createRadarChart(container, {
+  a11y: { ariaLabel: 'Hero stats' },
+  axes,
+  domain: [0, 10],
+  series: [{
+    data: [{ key: 'strength', value: 8 }, { key: 'agility', value: 6 }, { key: 'endurance', value: 9 }],
+    name: 'Adam',
+  }],
+  tooltip: true,
 });
+
+chart.dispose();
 ```
 
-`setTheme` writes to `document.documentElement` style, so it takes precedence over CSS file defaults. Call `resetTheme()` to clear every custom property `setTheme` can set and restore the default theme: useful for a theme-switcher's "reset" action or test teardown:
+The default shared domain starts at zero and uses a nice maximum; set `domain` to compare series on a fixed range. Per-axis `min` and `max` override the chart domain for that axis. Grid rings, bands, curves, fills, vertex dots, and values are configurable; see `RadarChartConfig` and `RadarGridConfig` in the API reference.
+
+## Sparklines
+
+Sparklines omit axes, margins, and legends. Choose `line`, `area`, or `bar` for numeric arrays, and `stack` for an array of `StackSegment` objects.
 
 ```ts
-import { resetTheme } from '@vielzeug/prism';
+import { createSparkline } from '@vielzeug/prism';
 
-resetTheme();
-```
+const container = document.createElement('div');
+container.style.cssText = 'width:240px;height:48px';
+document.body.append(container);
 
-### Custom Theme (CSS)
+const chart = createSparkline(container, {
+  a11y: { ariaLabel: 'Weekly orders' },
+  data: [10, 14, 12, 18, 22],
+  variant: 'area',
+});
 
-```css
-:root {
-  --prism-color-1: #6366f1;
-  --prism-color-2: #22c55e;
-  --prism-axis-color: #71717a;
-  --prism-grid-color: #f4f4f5;
-  --prism-text-color: #18181b;
-  --prism-tooltip-bg: #27272a;
-  --prism-font-family: 'Inter', system-ui, sans-serif;
-}
+chart.update([10, 14, 12, 18, 22, 25]);
+chart.dispose();
 ```
 
-### Scoped Themes
+For a stacked sparkline, each segment can set `value`, `color`, and `label`. Sparklines do not offer keyboard navigation, a tooltip, or a live value announcer. Add a visible value or summary when the trend conveys important information.
 
-Apply tokens to a specific container:
+## Interaction
 
-```css
-.dark-dashboard {
-  --prism-axis-color: #64748b;
-  --prism-grid-color: #334155;
-  --prism-text-color: #e2e8f0;
-}
-```
+Set `tooltip: true` to show Prism's default tooltip, or pass a `TooltipConfig` to format its content. A `render` callback receives the active `Datum` and `Series`. Returned strings are inserted as text; return a DOM `Node` for structured content.
 
-### Available Tokens
+```ts
+import { createLineChart } from '@vielzeug/prism';
 
-| Token                     | Default                    | Description            |
-| ------------------------- | -------------------------- | ---------------------- |
-| `--prism-color-{1-8}`     | Colorblind-safe palette    | Series color palette   |
-| `--prism-bg`              | `transparent`              | Chart background       |
-| `--prism-axis-color`      | `hsl(215deg 16% 47%)`      | Axis lines and ticks   |
-| `--prism-grid-color`      | `hsl(220deg 10% 75%)`      | Grid lines             |
-| `--prism-text-color`      | `hsl(215deg 25% 27%)`      | Axis labels and text   |
-| `--prism-font-family`     | `system-ui`                | Chart font             |
-| `--prism-font-size`       | `0.75rem`                  | Label font size        |
-| `--prism-tooltip-bg`      | `hsl(222deg 47% 11%)`      | Tooltip background     |
-| `--prism-tooltip-color`   | `hsl(210deg 40% 98%)`      | Tooltip text           |
-| `--prism-tooltip-radius`  | `0.375rem`                 | Tooltip border radius  |
-| `--prism-crosshair-color` | `hsl(215deg 16% 47%)`      | Crosshair line         |
-| `--prism-crosshair-dash`  | `4 2`                      | Crosshair dash pattern |
-
-The palette follows Wong (2011) so adjacent series stay distinguishable under common color-vision deficiencies. Dark mode applies automatically through `prefers-color-scheme` or an `html.dark` class.
-
-Radar charts add their own tokens, each defaulting to a shared one:
-
-| Token | Default | Description |
-| --- | --- | --- |
-| `--prism-radar-grid-color` | `--prism-grid-color` | Rings |
-| `--prism-radar-grid-opacity` | `0.7` | Ring and spoke opacity |
-| `--prism-radar-band-fill` | `--prism-grid-color` | Alternate ring shading |
-| `--prism-radar-band-opacity` | `0.14` | Shading opacity |
-| `--prism-radar-spoke-color` | `--prism-radar-grid-color` | Spokes |
-| `--prism-radar-fill-opacity` | `--prism-area-opacity` | Solid shape fill |
-| `--prism-radar-stroke-width` | `--prism-line-width` | Shape outline |
-| `--prism-radar-point-radius` | `--prism-point-radius` | Vertex dots |
-| `--prism-radar-point-radius-active` | `--prism-point-radius-hover` | Dots on the active axis |
-| `--prism-radar-label-color` / `-size` | Secondary text tokens | Axis labels |
-| `--prism-radar-value-color` / `-size` | Text tokens | Vertex values |
-| `--prism-radar-dim-opacity` | `--prism-dim-opacity` | Other shapes while one is hovered |
-
-Shared interaction and chart tokens:
-
-| Token | Default | Description |
-| --- | --- | --- |
-| `--prism-dim-opacity` | `0.35` | Series or slices outside the active one |
-| `--prism-active-point-radius` | `--prism-point-radius-hover` | Points marked at the active key |
-| `--prism-point-ring` | `Canvas` | Ring separating active and end points from the line |
-| `--prism-focus-color` | `--prism-color-1` | Focus outline of a keyboard-focused chart |
-| `--prism-bar-radius` | `4px` | Bar corner radius (stacked bars stay square) |
-| `--prism-bar-band-fill` / `-opacity` | Grid colour / `0.18` | Shaded active category |
-| `--prism-bar-dim-opacity` | `0.55` | Bars outside the active category |
-| `--prism-area-gradient-start` / `-end` | `0.45` / `0.02` | Gradient fill opacity at the line and the baseline |
-| `--prism-spark-gradient-start` / `-end` | `0.35` / `0` | Sparkline gradient fill |
+const container = document.createElement('div');
+container.style.cssText = 'width:640px;height:320px';
+document.body.append(container);
+
+const chart = createLineChart(container, {
+  series: [{ data: [{ key: 1, value: 4200 }, { key: 2, value: 5100 }], name: 'Revenue' }],
+  tooltip: {
+    render: (datum, series) => `${series.name}: ${new Intl.NumberFormat().format(datum.value)}`,
+  },
+});
 
-Explicit config such as `strokeWidth`, `fillOpacity`, or `borderRadius` always wins over these tokens.
+chart.dispose();
+```
 
-## Scales (Standalone)
+`onHover` receives an event while a point, category, slice, or radar axis is active, then `null` when the interaction clears. `onClick` receives the selected event. For line, area, and bar charts, `ChartEvent.values` contains each series' datum at that shared key; a missing datum is `undefined`. Scatter, pie, radar, and sparkline use their chart-specific event types.
 
-Scales can be used independently for custom visualizations:
+`crosshair` is available on line, area, and scatter charts. By default it shows a vertical guide and snaps the line to the nearest datum. Set `horizontal: true` to add a horizontal guide or `vertical: false` to hide the vertical one. Set `snap: false` to make the guide follow the pointer; tooltip and callback data still come from the nearest datum.
 
-```ts
-import { linearScale, timeScale, bandScale } from '@vielzeug/prism';
+### Keyboard and Announcements
 
-const y = linearScale({ domain: [0, 100], range: [300, 0] });
-y.map(50); // → 150
-y.invert(150); // → 50
-y.ticks(5); // → [0, 20, 40, 60, 80, 100]
+Set `a11y: { ariaLabel }` on an informative chart. Prism gives the SVG `role="img"`, an accessible name, and keyboard focus. Arrow keys move among chart data; `Home` and `End` move to the first and last item where supported; `Enter` or `Space` activates an item when an `onClick` callback is configured; `Escape` clears the active selection. Sparklines do not support keyboard navigation.
 
-const x = bandScale({ domain: ['A', 'B', 'C'], range: [0, 300] });
-x.map('B'); // → pixel left edge of band B
-x.bandwidth(); // → width of each band
-```
+When `a11y` is omitted, or set to `{ decorative: true }`, the SVG is marked `aria-hidden="true"` and does not enter the keyboard tab order. Only mark charts decorative when their information is available elsewhere. Interactive cartesian and pie/radar charts use the tooltip as a polite live region when enabled; otherwise they announce active values in `.prism-live`. Sparklines have no live value announcements, so provide an equivalent visible value or summary.
 
-## Lifecycle and Cleanup
+## Animation
 
-Every chart returns a `ChartHandle`. Always call `dispose()` when removing a chart:
+Chart motion is enabled by default, with a 300 ms duration per animated lane (radar uses 400 ms). Pass `transition: false` to render updates synchronously, or pass `true` to state the default explicitly.
 
 ```ts
-const chart = createLineChart(container, config);
+import { createBarChart } from '@vielzeug/prism';
 
-// When done:
-chart.dispose();
+const container = document.createElement('div');
+container.style.cssText = 'width:640px;height:320px';
+document.body.append(container);
 
-// Or with TC39 explicit resource management:
-{
-  using chart = createLineChart(container, config);
-  // auto-disposed at block end
-}
-```
+const chart = createBarChart(container, {
+  series: [{ data: [{ key: 'A', value: 4 }, { key: 'B', value: 7 }], name: 'Count' }],
+  transition: { duration: 500, easing: 'ease-out', preference: 'system' },
+});
 
-Calling `dispose()`:
+chart.dispose();
+```
 
-- Cancels in-flight transitions
-- Disconnects the `ResizeObserver`
-- Removes the SVG element, tooltip, and legend from the DOM
-- Restores container styles changed for tooltip positioning
-- Is idempotent: safe to call multiple times
+Columns grow together from their baseline by default over 300 ms. Lines trace their final curve over 420 ms, uncovering point markers along the way without fading or shifting the series. Line data updates retain the default 300 ms geometry transition; an explicit `duration` overrides both timings.
 
-Call `update()` only while the handle is active. Updating a disposed chart throws `PrismRenderError`.
+`preference: 'system'` (the default) disables JavaScript motion when the user prefers reduced motion. Use `'always'` to ignore that preference or `'never'` to disable motion. `stagger` sets an optional delay between bars or radar series; bar charts cap the effective delay so long category axes do not add unbounded time. Named easing values are `ease-in`, `ease-in-out`, `ease-out`, `back-out`, `expo-out`, and `linear`; you can also provide an easing function.
 
-## Responsive Behavior
+## Responsive Layout and Lifecycle
 
-Charts resize automatically when the container dimensions change. Prism uses `ResizeObserver` internally: no manual `resize()` call is needed.
+Size the host with CSS. Prism observes its content box and updates the SVG dimensions and chart layout when it changes. Bar and line resize redraws apply immediately rather than animating between layout sizes; entrance animations and explicit data-update transitions remain enabled. The legend is rendered as container chrome outside the SVG and included in resize calculations.
 
-## Runtime Observation
+Call `dispose()` when the view no longer owns the chart. Disposal is idempotent: it removes the SVG, tooltip, legend, and resize observation, stops in-flight chart motion, and aborts `disposalSignal`. `chart[Symbol.dispose]()` calls the same cleanup method.
 
-Every handle exposes `tap()` to observe runtime behavior — resize and dispose — outside the render path. It reuses the chart's own `ResizeObserver`, so observing costs nothing extra, and handler errors are swallowed: observation never affects chart behavior.
+Use `tap()` when external code needs resize or dispose notifications rather than observing the chart DOM itself:
 
 ```ts
 import { createLineChart } from '@vielzeug/prism';
 
+const container = document.createElement('div');
+container.style.cssText = 'width:640px;height:320px';
+document.body.append(container);
+
 const chart = createLineChart(container, {
   series: [{ data: [{ key: 1, value: 10 }], name: 'Revenue' }],
 });
-const controller = new AbortController();
-const unsubscribe = chart.tap(
-  (event) => {
-    if (event.type === 'resize') console.log('resized', event.width, event.height);
-    if (event.type === 'dispose') console.log('disposed');
-  },
-  { signal: controller.signal },
-);
+const stopObserving = chart.tap((event) => {
+  if (event.type === 'resize') console.log(event.width, event.height);
+  if (event.type === 'dispose') console.log('chart disposed');
+});
+
+stopObserving();
+chart.dispose();
 ```
 
-`tap()` returns an unsubscribe function; pass `options.signal` to detach automatically instead. The `resize` event carries the new `width`/`height` and fires after the chart re-laid-out; `dispose` fires once, before teardown completes. Tapping a disposed handle returns a no-op unsubscribe. This is separate from prism's internal validation warnings, which run automatically in development and are never part of the public API.
+`tap()` returns an unsubscribe function and accepts `{ signal }` for automatic unsubscription. A listener exception is swallowed by the observer so it cannot interrupt chart rendering.
 
-## Accessibility
+## Theming
 
-Label informative charts with `a11y: { ariaLabel }`. A labelled chart renders with `role="img"`, is focusable, and supports keyboard navigation. Charts without `a11y` are decorative and render with `aria-hidden="true"`.
+Import the stylesheet once to load Prism's structural styles, default tokens, dark-mode rules, and reduced-motion CSS. You can override any CSS custom property on an ancestor of the chart.
 
-```ts
-createLineChart(container, {
-  a11y: { ariaLabel: 'Revenue by month' },
-  series: [...],
-});
+```css
+.dashboard-chart {
+  --prism-color-1: #2563eb;
+  --prism-color-2: #16a34a;
+  --prism-grid-color: #94a3b8;
+  --prism-line-width: 3;
+  --prism-text-color: #172033;
+  --prism-tooltip-bg: #111827;
+}
 ```
 
-Mark a chart decorative explicitly when surrounding text already states its meaning:
+`setTheme()` provides a typed subset of theme properties. A scoped call writes inline values on the provided element; omit `scope` to write them to `document.documentElement`. Inline values override stylesheet tokens until reset.
 
 ```ts
-createSparkline(container, {
-  a11y: { decorative: true },
-  data: [...],
-});
+import { resetTheme, setTheme } from '@vielzeug/prism';
+
+const container = document.createElement('div');
+container.style.cssText = 'width:640px;height:320px';
+document.body.append(container);
+
+setTheme({ colors: ['#2563eb', '#16a34a'], fontFamily: 'Inter, sans-serif' }, { scope: container });
+// Call resetTheme({ scope: container }) when this scoped theme is no longer needed.
+resetTheme({ scope: container });
 ```
 
-### Keyboard and announcements
+### Available Tokens
+
+The stylesheet defines defaults for the following token groups. Pie-label color and size are read with fallback values by the renderer but are not declared in the base token block. Set a token on the chart container or an ancestor to scope an override.
 
-Every labelled chart except sparklines shares one keyboard model:
+| Group | CSS custom properties |
+| --- | --- |
+| Palette and surfaces | `--prism-color-1` through `--prism-color-8`, `--prism-bg`, `--prism-border-radius` |
+| Axes and grid | `--prism-axis-color`, `--prism-axis-width`, `--prism-grid-color`, `--prism-grid-width`, `--prism-grid-dash`, `--prism-grid-opacity` |
+| Text | `--prism-font-family`, `--prism-font-size`, `--prism-font-size-label`, `--prism-font-size-title`, `--prism-font-weight`, `--prism-font-weight-title`, `--prism-text-color`, `--prism-text-color-secondary` |
+| Tooltip | `--prism-tooltip-bg`, `--prism-tooltip-color`, `--prism-tooltip-border`, `--prism-tooltip-radius`, `--prism-tooltip-padding`, `--prism-tooltip-shadow`, `--prism-tooltip-font-size` |
+| Crosshair | `--prism-crosshair-color`, `--prism-crosshair-width`, `--prism-crosshair-dash`, `--prism-crosshair-opacity` |
+| Points | `--prism-point-radius`, `--prism-point-radius-hover`, `--prism-point-stroke-width`, `--prism-point-stroke` |
+| Bars | `--prism-bar-radius`, `--prism-bar-hover-opacity`, `--prism-bar-gap`, `--prism-bar-band-fill`, `--prism-bar-band-opacity`, `--prism-bar-dim-opacity` |
+| Areas and lines | `--prism-area-opacity`, `--prism-area-stroke-width`, `--prism-area-gradient-start`, `--prism-area-gradient-end`, `--prism-line-width`, `--prism-line-width-hover` |
+| Interaction | `--prism-dim-opacity`, `--prism-active-point-radius`, `--prism-point-ring`, `--prism-focus-color` |
+| Sparklines | `--prism-spark-fill-opacity`, `--prism-spark-gradient-start`, `--prism-spark-gradient-end` |
+| Radar | `--prism-radar-grid-color`, `--prism-radar-grid-opacity`, `--prism-radar-band-fill`, `--prism-radar-band-opacity`, `--prism-radar-spoke-color`, `--prism-radar-fill-opacity`, `--prism-radar-stroke-width`, `--prism-radar-point-radius`, `--prism-radar-point-radius-active`, `--prism-radar-label-color`, `--prism-radar-label-size`, `--prism-radar-value-color`, `--prism-radar-value-size`, `--prism-radar-dim-opacity` |
+| Motion | `--prism-duration-fast`, `--prism-duration`, `--prism-duration-slow`, `--prism-ease`, `--prism-ease-spring`, `--prism-transition`, `--prism-transition-fast` |
+| Legend and pie labels | `--prism-legend-gap`, `--prism-legend-dot-size`, `--prism-legend-font-size`, `--prism-pie-label-color`, `--prism-pie-label-size` |
 
-| Chart | Arrow keys move between | `Home` / `End` | Announced |
-| --- | --- | --- | --- |
-| Line, area | x positions | First / last position | `1: Adam 3, Eve 6` |
-| Bar | categories | First / last category | `Str: Adam 8, Eve 5` |
-| Pie | slices | First / last slice | `Wins: 15 (75%)` |
-| Radar | axes (wrapping) | Not supported | `Agility: Adam 6, Eve 9` |
+The default palette and structural colors adapt to `prefers-color-scheme: dark`, `html.dark`, or `[data-prism-theme='dark']` on an ancestor. Scoped inline values set with `setTheme()` take precedence in either mode. The stylesheet also provides `prefers-reduced-motion` overrides for CSS transitions.
 
-The first arrow press focuses the first item. `Enter` or `Space` fires `onClick` for the focused item, and `Escape` clears it. The tooltip speaks the text when one is enabled; otherwise the chart's own `role="status"` region (`.prism-live`) does, so each value is announced once.
+## Errors and Diagnostics
 
-### Hover feedback
+Prism throws `PrismRenderError` when the container is not a DOM element, when initial rendering fails, or when `update()` is called on a disposed chart. A wrapped initial-render error exposes its cause. Use `PrismError` to catch all Prism-originated errors.
 
-The active key is shown the same way on every chart. Line and area charts mark each series' point and dim the series farther from the pointer. Bar charts shade the category band and dim the other categories. Pie charts dim the other slices. Radar charts highlight the active spoke and its points, and dim the other shapes while one is hovered.
+Empty or malformed data is not always an exception. Depending on the chart, Prism may draw nothing or emit a development-only `console.warn`; examples include an unknown `bandScale` category, negative values in stacked bars, and radar axes with fewer than three entries or duplicate keys. Correct the input rather than relying on a warning for validation.
 
 ## Framework Integration
 
-Prism has no framework adapter. Connect the same three operations to your framework's lifecycle: create after mount, update when state changes, and dispose before unmount.
+Prism has no React, Vue, or Svelte adapter. In any framework, give Prism a host element after it is mounted, call `update()` when data changes, and call `dispose()` before the host is removed. This plain DOM pattern shows the ownership boundary without depending on a framework-specific lifecycle API:
 
 ```ts
-import { createLineChart, type ChartHandle, type ContinuousDatum, type LineSeriesConfig } from '@vielzeug/prism';
-
-let chart: ChartHandle | undefined;
+import { createLineChart, type LineSeriesConfig } from '@vielzeug/prism';
 
-export function mountChart(container: HTMLElement, data: ContinuousDatum[]): void {
-  chart = createLineChart(container, { series: [{ data, name: 'Series' }] });
-}
-
-export function updateChart(data: ContinuousDatum[]): void {
-  chart?.update([{ data, name: 'Series' }]);
-}
+function mountChart(host: HTMLElement, series: LineSeriesConfig[]) {
+  const chart = createLineChart(host, { a11y: { ariaLabel: 'Revenue' }, series });
 
-export function unmountChart(): void {
-  chart?.dispose();
-  chart = undefined;
+  return {
+    update(next: LineSeriesConfig[]) {
+      chart.update(next);
+    },
+    dispose() {
+      chart.dispose();
+    },
+  };
 }
-```
-
-## Working with Other Vielzeug Libraries
-
-### With Ripple
 
-Keep state ownership in Ripple and connect it to Prism through an explicit subscription.
-
-```ts
-import { createLineChart } from '@vielzeug/prism';
-import { signal } from '@vielzeug/ripple';
-
-const data = signal([{ key: 1, value: 10 }]);
-const toSeries = () => [{ data: data.value, name: 'Series' }];
-const chart = createLineChart(container, { series: toSeries() });
-const unsubscribe = data.subscribe(() => chart.update(toSeries()));
-
-// Cleanup both owners together.
-unsubscribe();
-chart.dispose();
+const host = document.createElement('div');
+host.style.cssText = 'width:640px;height:320px';
+document.body.append(host);
+const view = mountChart(host, [{ data: [{ key: 1, value: 10 }], name: 'Revenue' }]);
+view.update([{ data: [{ key: 1, value: 10 }, { key: 2, value: 15 }], name: 'Revenue' }]);
+view.dispose();
 ```
 
-### With Sourcerer
-
-Bind chart data to a Sourcerer remote source so charts update whenever the list refreshes.
+The application owns its state and host; Prism owns only the SVG, observer, and optional overlay elements it creates.
 
-```ts
-import { createBarChart } from '@vielzeug/prism';
-import { createPageSource } from '@vielzeug/sourcerer';
+## Working with Other Vielzeug Libraries
 
-const source = createPageSource({
-  load: async ({ page, pageSize, signal }) => {
-    const result = await api.stats.list({ page, pageSize }, { signal });
-    return { items: result.data, totalItems: result.total };
-  },
-});
-const toSeries = (state) => [
-  {
-    data: state.items.map((item) => ({ key: item.label, value: item.count })),
-    name: 'Series',
-  },
-];
-const chart = createBarChart(container, { series: toSeries(source.state) });
-const unsubscribe = source.subscribe((state) => chart.update(toSeries(state)));
-void source.reload().catch(() => undefined);
-```
+Use Refine components for dashboard controls and keep Prism in a sized host element. Map Refine theme tokens to Prism CSS custom properties or call `setTheme()` with a scoped element; Prism does not require a Refine adapter. Prism uses Orbit internally to place tooltips, so chart users do not need to create Orbit floating elements for the built-in tooltip.
 
 ## Best Practices
 
-- Ensure the container element has explicit dimensions before calling a chart factory: `ResizeObserver` needs a non-zero layout size to trigger the first render.
-- Call `chart.dispose()` in your framework's unmount/cleanup phase to cancel transitions, disconnect resize observation, and remove DOM nodes.
-- Call `chart.update(data)` from your application state boundary; Prism does not require or own a state library.
-- Set `a11y: { ariaLabel: '…' }` on every chart that conveys meaningful data: unlabelled charts are hidden from assistive technology and receive no keyboard navigation.
-- Observe lifecycle with `chart.tap(handler)` rather than polling `chart.disposed` or wrapping the container: it costs nothing when untapped and detaches via `signal`.
-- For SSR, skip chart creation server-side: Prism depends on DOM APIs and `ResizeObserver`. Render charts only after hydration in a `onMounted`/`useEffect` callback.
+- Give the host a non-zero size before creating a chart.
+- Set `a11y.ariaLabel` when a chart communicates information.
+- Use `Date` or number keys consistently across each line or area chart.
+- Pass the complete new data value to `update()`.
+- Keep chart options fixed after creation; recreate the chart to change them.
+- Dispose the handle when its host leaves the owning view.
+- Use `transition: false` for deterministic synchronous rendering.
+- Prefer CSS custom properties for reusable theme overrides.
 
 ### Examples
 
 - [Create a line chart](./examples/line-chart.md)
 - [Plot a time series](./examples/time-series.md)
+- [Plot a scatter chart](./examples/scatter-chart.md)
 - [Compare categories with a bar chart](./examples/bar-chart.md)
 - [Render compact charts](./examples/compact-charts.md)
 - [Compare hero stats with a radar chart](./examples/radar-chart.md)