@vielzeug/codex 26.10.20 → 26.10.22

package/data/llms-full.txt

@@ -1,6 +1,6 @@
 # Vielzeug: Full Documentation
 
-> Complete documentation for 43 packages. Version: 26.10.19
+> Complete documentation for 43 packages. Version: 26.10.21
 
 ---
 
@@ -19222,6 +19222,7 @@ chart.dispose();
 - **`createScatterChart()`**: plot independent numeric `(x, y)` points
 - **`createPieChart()`**: render pie, donut, or semi-circle slices
 - **`createRadarChart()`**: compare series across fixed, labelled axes
+- **`createHeatmapChart()`**: render a row/column matrix of colored cells with a continuous or binned ramp
 - **`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
@@ -19257,6 +19258,7 @@ All chart factories, scale utilities, theme helpers, and error classes are synch
 | `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 |
+| `createHeatmapChart()` | Render a row/column matrix of colored cells | Sync | Cells whose `row`/`column` match no label are skipped; unknown labels warn in development |
 | `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` |
@@ -19489,6 +19491,47 @@ chart.dispose();
 
 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.
 
+### `createHeatmapChart()`
+
+```ts
+function createHeatmapChart(
+  container: HTMLElement,
+  config: HeatmapChartConfig,
+): ChartHandle;
+```
+
+Renders one colored cell per row/column pair: rows down the left, columns across the top. The color ramp is continuous by default; `bins` turns it into discrete steps and shows a swatch legend. Cells show their formatted value when they are large enough, choosing dark or light text against the fill. `rowSummary` adds a right-hand column of pre-formatted per-row texts (e.g. a win rate the cells alone cannot show). `update()` replaces cells and may replace `rows`, `columns`, `domain`, and `rowSummary`; other configuration is fixed at creation.
+
+| Parameter | Type | Description |
+| --- | --- | --- |
+| `container` | `HTMLElement` | Host that receives the chart SVG and optional overlays |
+| `config` | `HeatmapChartConfig` | Rows, columns, cells, ramp, bins, appearance, and interaction settings |
+
+**Returns:** `ChartHandle`.
+
+```ts
+import { createHeatmapChart } from '@vielzeug/prism';
+
+const host = document.createElement('div');
+host.style.cssText = 'width:400px;height:320px';
+document.body.append(host);
+
+const chart = createHeatmapChart(host, {
+  a11y: { ariaLabel: 'Win rate by hero and region' },
+  cells: [
+    { column: 'Forest', row: 'Aria', value: 90 },
+    { column: 'Swamp', row: 'Aria', value: 40 },
+    { column: 'Forest', row: 'Brom', value: 20 },
+    { column: 'Swamp', row: 'Brom', value: 75 },
+  ],
+  columns: ['Forest', 'Swamp'],
+  rows: ['Aria', 'Brom'],
+});
+chart.dispose();
+```
+
+Heatmap defaults are a light-to-deep blue ramp over the data's `[min, max]` domain, a 2 px cell gap, in-cell values, and no legend. Column headers rotate -45° when they do not fit their column. Keyboard: arrows move the active cell, Enter/Space fires `onCellClick`, Escape deactivates; the tooltip (or `.prism-live` without one) describes the active cell.
+
 ### `createSparkline()`
 
 ```ts
@@ -19676,7 +19719,7 @@ seriesColor(1, '#2563eb'); // '#2563eb'
 
 `[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.
+All chart handles expose the same lifecycle members; interactive cartesian, pie, radar, and heatmap 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 |
 | --- | --- |
@@ -19820,7 +19863,7 @@ export interface SeriesValue {
 | 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 |
+| Pie, radar, heatmap, sparkline | Ignored | Ignored |
 
 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.
 
@@ -19977,6 +20020,10 @@ export type BarVariant = 'grouped' | 'grouped-horizontal' | 'stacked' | 'stacked
 
 export interface BarChartConfig extends BaseChartConfig {
   series: BarSeriesConfig[];
+  /** Paints each bar's value at its end; stacked variants label the stack total. */
+  showValues?: boolean;
+  /** Formats the value labels. Defaults to `String`. */
+  valueFormat?: (value: number) => string;
   variant?: BarVariant;
 }
 
@@ -20047,6 +20094,47 @@ export interface RadarChartConfig extends Omit {
   startAngle?: number;
 }
 
+export interface HeatmapCell {
+  column: string;
+  row: string;
+  value: number | null;
+}
+
+export interface HeatmapEvent {
+  cell: HeatmapCell | undefined;
+  column: string;
+  originalEvent: Event;
+  row: string;
+}
+
+export interface HeatmapData {
+  cells: HeatmapCell[];
+  columns?: string[];
+  domain?: [number, number];
+  rows?: string[];
+  rowSummary?: HeatmapChartConfig['rowSummary'];
+}
+
+export interface HeatmapChartConfig
+  extends Omit {
+  binLabel?: (from: number | null, to: number | null) => string;
+  bins?: number[];
+  cells: HeatmapCell[];
+  colorRange?: string[];
+  columns: string[];
+  domain?: [number, number];
+  emptyColor?: string;
+  emptyLabel?: string;
+  gap?: number;
+  legend?: boolean;
+  onCellClick?: (event: HeatmapEvent) => void;
+  onCellHover?: (event: HeatmapEvent | null) => void;
+  rows: string[];
+  rowSummary?: { header?: string; values: (string | null)[] };
+  showValues?: boolean;
+  valueFormat?: (value: number) => string;
+}
+
 export type SparklineVariant = 'area' | 'bar' | 'line' | 'stack';
 
 export interface StackSegment {
@@ -20150,7 +20238,7 @@ chart.update(series);
 chart.dispose();
 ```
 
-`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()`.
+`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; a `HeatmapData` object for heatmap 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
 
@@ -20279,6 +20367,8 @@ Choose `grouped`, `stacked`, `grouped-horizontal`, or `stacked-horizontal` in `v
 
 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.
 
+Set `showValues: true` to paint each bar's value at its end so the chart reads without hover; `valueFormat` shapes the label text. Stacked variants label the stack total at the top of the stack, and labels that would overflow the plot flip inside the bar with a contrasting fill. The labels are decorative (`aria-hidden`) — the accessible read stays with the chart's data table.
+
 ## Area Charts
 
 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.
@@ -20422,6 +20512,37 @@ chart.dispose();
 
 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.
 
+## Heatmaps
+
+Define `rows`, `columns`, and `cells`; each cell names its `row` and `column` labels. A cell with `value: null` (or no matching cell at all) renders in `emptyColor` without in-cell text. `rowSummary` adds a right-hand column of pre-formatted per-row texts (aligned with `rows`, with an optional header) — useful for a per-row rate the cells cannot show. `update()` replaces cells and may replace `rows`, `columns`, `domain`, and `rowSummary`.
+
+```ts
+import { createHeatmapChart } from '@vielzeug/prism';
+
+const container = document.createElement('div');
+container.style.cssText = 'width:400px;height:320px';
+document.body.append(container);
+
+const chart = createHeatmapChart(container, {
+  a11y: { ariaLabel: 'Win rate by hero and region' },
+  bins: [50, 75],
+  cells: [
+    { column: 'Forest', row: 'Aria', value: 90 },
+    { column: 'Swamp', row: 'Aria', value: 40 },
+    { column: 'Forest', row: 'Brom', value: 20 },
+    { column: 'Swamp', row: 'Brom', value: 75 },
+  ],
+  columns: ['Forest', 'Swamp'],
+  rows: ['Aria', 'Brom'],
+  tooltip: true,
+  valueFormat: (value) => `${value}%`,
+});
+
+chart.dispose();
+```
+
+Without `bins` the ramp is continuous over the data's `[min, max]` domain (or an explicit `domain`); with `bins` each value maps to a discrete step and a swatch legend appears. `colorRange` sets the ramp low → high, `valueFormat` shapes in-cell values, tooltip values, and bin labels, and `showValues: false` hides the in-cell text.
+
 ## Sparklines
 
 Sparklines omit axes, margins, and legends. Choose `line`, `area`, or `bar` for numeric arrays, and `stack` for an array of `StackSegment` objects.
@@ -20478,7 +20599,7 @@ chart.dispose();
 
 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.
 
-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.
+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, pie, radar, and heatmap 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.
 
 ## Animation
 
@@ -20578,6 +20699,7 @@ The stylesheet defines defaults for the following token groups. Pie-label color
 | 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` |
+| Heatmap | `--prism-heatmap-label-color`, `--prism-heatmap-label-size`, `--prism-heatmap-value-size`, `--prism-heatmap-highlight-color` |
 | 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` |
 
@@ -20642,6 +20764,7 @@ Use Refine components for dashboard controls and keep Prism in a sized host elem
 - [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)
+- [Show a win-rate matrix with a heatmap](./examples/heatmap-chart.md)
 - [Update chart data](./examples/update-data.md)
 - [Sync a details panel with hover](./examples/hover-details.md)
 - [Render a custom tooltip](./examples/custom-tooltip.md)
@@ -21668,23 +21791,25 @@ Component registration happens through side-effect imports such as `@vielzeug/re
 
 ### Components
 
-**Content:** `ore-avatar`, `ore-avatar-group`, `ore-breadcrumb`, `ore-card`, `ore-carousel`, `ore-carousel-slide`, `ore-chat-message`, `ore-icon`, `ore-keyboard-key`, `ore-keyboard-shortcut`, `ore-list`, `ore-list-item`, `ore-marquee`, `ore-pagination`, `ore-qr-code`, `ore-separator`, `ore-speed-reading`, `ore-stats`, `ore-step`, `ore-stepper`, `ore-table`, `ore-text`
+Each entry below is a component with its own documentation page and registration subpath. Sub-element tags (`ore-accordion-item`, `ore-tab-item`, `ore-avatar-group`, and the rest) are documented on their parent's page and registered with it.
 
-**Disclosure:** `ore-accordion`, `ore-accordion-item`, `ore-tabs`, `ore-tab-item`, `ore-tab-panel`
+**Content:** `ore-accordion`, `ore-avatar`, `ore-card`, `ore-carousel`, `ore-chat-message`, `ore-chat-panel`, `ore-code-window`, `ore-copy-command`, `ore-icon`, `ore-keyboard-key`, `ore-list`, `ore-marquee`, `ore-qr-code`, `ore-rank-list`, `ore-speech-player`, `ore-speed-reading`, `ore-stats`, `ore-table`, `ore-text`
 
 **Feedback:** `ore-alert`, `ore-async`, `ore-badge`, `ore-chip`, `ore-cookie-banner`, `ore-password-strength`, `ore-progress`, `ore-skeleton`, `ore-toast`, `ore-typing-indicator`
 
-**Inputs:** `ore-button`, `ore-button-group`, `ore-calendar`, `ore-checkbox`, `ore-checkbox-group`, `ore-column`, `ore-combobox`, `ore-counter`, `ore-datagrid`, `ore-date-picker`, `ore-file-input`, `ore-input`, `ore-message-composer`, `ore-number-input`, `ore-otp-input`, `ore-qr-scanner`, `ore-query-bar`, `ore-radio`, `ore-radio-group`, `ore-rating`, `ore-select`, `ore-slider`, `ore-switch`, `ore-textarea`, `ore-time-picker`
+**Inputs:** `ore-button`, `ore-calendar`, `ore-checkbox`, `ore-combobox`, `ore-counter`, `ore-datagrid`, `ore-date-picker`, `ore-file-input`, `ore-input`, `ore-message-composer`, `ore-number-input`, `ore-otp-input`, `ore-qr-scanner`, `ore-query-bar`, `ore-radio`, `ore-rating`, `ore-select`, `ore-slider`, `ore-switch`, `ore-textarea`, `ore-time-picker`
+
+**Layout:** `ore-box`, `ore-grid`, `ore-navbar`, `ore-separator`, `ore-sidebar`
 
-**Layout:** `ore-box`, `ore-grid`, `ore-grid-item`, `ore-navbar`, `ore-sidebar`
+**Navigation:** `ore-breadcrumb`, `ore-navigation-menu`, `ore-pagination`, `ore-stepper`, `ore-tabs`
 
-**Overlay:** `ore-command-palette`, `ore-command-palette-item`, `ore-dialog`, `ore-drawer`, `ore-menu`, `ore-popover`, `ore-spotlight`, `ore-tooltip`, `ore-tour`
+**Overlay:** `ore-command-palette`, `ore-dialog`, `ore-drawer`, `ore-menu`, `ore-popover`, `ore-spotlight`, `ore-tooltip`, `ore-tour`
 
 ## Component portfolio
 
 Refine keeps one public package and classifies components by composition level rather than stability. All listed components remain supported and tested.
 
-- **Foundations**: buttons, inputs, selection controls, disclosure, dialogs, menus, tooltips, layout primitives, and feedback indicators. Start here when building an application-specific interface.
+- **Foundations**: buttons, inputs, selection controls, accordions, dialogs, menus, tooltips, layout primitives, and feedback indicators. Start here when building an application-specific interface.
 - **Composed patterns**: data grids, command palettes, navigation menus, steppers, calendars, date/time pickers, file inputs, and message composers. These package recurring accessibility and interaction behavior that is costly to rebuild correctly.
 - **Presentation patterns**: cards, chat messages, code windows, stats, marquees, avatars, badges, and skeletons. Use these when their product vocabulary matches the application; prefer foundations when it does not.
 
@@ -21694,9 +21819,10 @@ Classification guides discovery and bundle selection. It is not a reason to remo
 
 - **Accessible**: keyboard navigation, ARIA wiring, and focus management across interactive components
 - **Themeable**: global tokens plus component-level CSS custom properties
+- **Motion-safe**: every animation routes through duration tokens and honors Motion Mode (`setMotionMode`) with a reduced-motion floor
 - **Framework agnostic**: works anywhere HTML can be rendered
 - **Tree-shakeable**: import only the component entry points you register
-- **Comprehensive surface**: inputs, content, disclosure, feedback, layout, and overlay primitives
+- **Comprehensive surface**: inputs, content, navigation, feedback, layout, and overlay primitives
 - **Native form integration**: form-associated controls submit values, validate supported required constraints, and reset with their form
 - **Typed framework declarations**: DOM, React, and Vue tags derive from the component property contracts
 
@@ -21710,6 +21836,7 @@ Classification guides discovery and bundle selection. It is not a reason to remo
 
 - [Usage Guide](./usage.md)
 - [API Reference](./api.md)
+- [Animation & Motion](./animation.md)
 - [Migration Guide](./migration.md)
 
 ## See Also
@@ -21734,13 +21861,15 @@ Classification guides discovery and bundle selection. It is not a reason to remo
 | `@vielzeug/refine/frameworks/vue` | Register typed Vue global components | Types only | Does not install a Vue plugin |
 | `@vielzeug/refine/theme` | `createThemeController()`: light/dark/system document theme | Sync | Does not persist the preference or set an accent color |
 | `eventFieldValue()` / `eventFieldChecked()` | Read a form control's value/checked from `event.currentTarget` | Sync | Exported from the package root; guards non-field targets |
+| `animateReflow()` | Token-driven FLIP reflow for keyed lists | Async (next frame) | Exported from the package root; elements need stable keys or it correctly does nothing |
+| `setMotionMode()` / `getMotionMode()` | Read/write the `data-motion` attribute on `` | Sync | Exported from the package root; an unknown mode throws `RangeError` |
 | `RefineError` | Base class for package-defined public errors | Sync | Component configuration warnings do not throw this error |
 
 ## Package Entry Point
 
 | Import | Purpose |
 | --- | --- |
-| `@vielzeug/refine` | Export `registerIcons`, icon definition types, `RefineError`, and the field readers without registering components |
+| `@vielzeug/refine` | Export `registerIcons`, icon definition types, `RefineError`, `animateReflow`, the motion-mode functions, and the field readers without registering components |
 | `@vielzeug/refine/` | Register one component and export its tag constant, props, events, and related types |
 | `@vielzeug/refine/theme` | `createThemeController()` and its theme types |
 | `@vielzeug/refine/tokens.css` | Required global design contract |
@@ -21809,12 +21938,14 @@ import type { OreButtonProps } from '@vielzeug/refine/button';
 
 | Area | Components |
 | --- | --- |
-| Content | `avatar`, `avatar-group`, `breadcrumb`, `card`, `carousel`, `chat-message`, `code-window`, `copy-command`, `icon`, `keyboard-key`, `list`, `list-item`, `marquee`, `pagination`, `separator`, `speech-player`, `speed-reading`, `stats`, `step`, `stepper`, `table`, `text` |
-| Disclosure | `accordion`, `accordion-item`, `tabs`, `tab-item`, `tab-panel` |
+| Content | `accordion`, `avatar`, `card`, `carousel`, `chat-message`, `chat-panel`, `code-window`, `copy-command`, `icon`, `keyboard-key`, `list`, `marquee`, `qr-code`, `rank-list`, `speech-player`, `speed-reading`, `stats`, `table`, `text` |
 | Feedback | `alert`, `async`, `badge`, `chip`, `cookie-banner`, `password-strength`, `progress`, `skeleton`, `toast`, `typing-indicator` |
-| Inputs | `button`, `button-group`, `calendar`, `checkbox`, `checkbox-group`, `combobox`, `counter`, `datagrid`, `date-picker`, `file-input`, `input`, `message-composer`, `number-input`, `otp-input`, `query-bar`, `radio`, `radio-group`, `rating`, `select`, `slider`, `switch`, `textarea`, `time-picker` |
-| Layout | `box`, `grid`, `grid-item`, `navbar`, `sidebar` |
-| Overlays | `command-palette`, `dialog`, `drawer`, `menu`, `navigation-menu`, `popover`, `tooltip` |
+| Inputs | `button`, `calendar`, `checkbox`, `combobox`, `counter`, `datagrid`, `date-picker`, `file-input`, `input`, `message-composer`, `number-input`, `otp-input`, `qr-scanner`, `query-bar`, `radio`, `rating`, `select`, `slider`, `switch`, `textarea`, `time-picker` |
+| Layout | `box`, `grid`, `navbar`, `separator`, `sidebar` |
+| Navigation | `breadcrumb`, `navigation-menu`, `pagination`, `stepper`, `tabs` |
+| Overlay | `command-palette`, `dialog`, `drawer`, `menu`, `popover`, `spotlight`, `tooltip`, `tour` |
+
+Each row lists the entry points that own a documentation page. Sub-element entries (`accordion-item`, `tab-item`, `avatar-group`, `list-item`, `step`, and the rest) are documented on their parent's page and share its category.
 
 Each component page lists its attributes, JavaScript properties, events, slots, parts, and CSS custom properties.
 
@@ -21872,12 +22003,54 @@ input.addEventListener('input', (event) => {
 
 Guarded readers for the standard `input`/`change` event pattern above: they read `value`/`checked` from `event.currentTarget` only when the target actually carries it, so a handler wired to the wrong element yields `undefined`/`false` instead of a crash or a lie. Exported from the package root, which registers no components.
 
+---
+
+### `animateReflow(host, signal, options)`
+
+```ts
+import { animateReflow } from '@vielzeug/refine';
+
+const reflow = animateReflow(list, abortController.signal, {
+  elements: () => [...list.querySelectorAll('li')],
+  getKey: (item) => item.dataset.id,
+});
+reflow.run(() => renderItems(nextItems));
+```
+
+Token-driven FLIP reflow for keyed lists: captures the current layout, runs `mutate`, then animates the tracked elements into their new positions on the next frame. The same helper the DataGrid, command palette, and toast stack use.
+
+| Parameter | Type | Description |
+| --- | --- | --- |
+| `host` | `HTMLElement` | Element whose computed style carries the timing tokens |
+| `signal` | `AbortSignal` | Aborting cancels in-flight animations |
+| `options.elements` | `() => HTMLElement[]` | Tracked elements, read live on both sides of the mutation |
+| `options.getKey` | `(el) => string \| undefined` | Stable identity per element; all-or-nothing |
+| `options.durationToken` | `string?` | Duration token, default `'--duration-200'` |
+| `options.easingToken` | `string?` | Easing token, default `'--ease-move'` |
+| `options.stagger` | `number?` | Per-element delay in ms, default `0` |
+
+**Returns** a `Reflow` handle with one method: `run(mutate)` (sync; the animation is fire-and-forget). Timing is read from the tokens at animation time, so Motion Mode reduction skips the reflow instead of playing it instantly. Every path that cannot animate (no elements, missing keys, zeroed tokens, aborted signal, no Web Animations API) still runs `mutate` exactly once and never throws. See [Animation & Motion → List Reflow](./animation#list-reflow-animatereflow) for behavior details.
+
+---
+
+### `setMotionMode(mode)` / `getMotionMode()`
+
+```ts
+import { getMotionMode, setMotionMode } from '@vielzeug/refine';
+
+setMotionMode('reduced'); // returns the applied mode
+```
+
+Read/write the `data-motion` attribute on `` (`'full' | 'reduced' | 'system'`; `'system'` removes the attribute). An unknown mode throws `RangeError`. The attribute drives the token layer: see [Animation & Motion → Motion Mode](./animation#motion-mode).
+
 ## Types
 
 Component props follow the `OreProps` naming pattern. Event maps follow `OreEvents`. Import both from the component subpath that owns them.
 
 `RefineElementMap`, `RefineReactIntrinsicElements`, and `RefineVueGlobalComponents` are exported from their respective `frameworks/*` type entry points.
 
+The package root also exports `Reflow` (the `run()` handle), `ReflowOptions` (its options object), and `MotionMode` (`'full' | 'reduced' | 'system'`).
+
 ## Errors
 
 ### `RefineError`
@@ -22119,6 +22292,10 @@ const loadingEffect = effect(() => {
 loadingEffect.dispose();
 ```
 
+### Necromancer
+
+Use Necromancer directly when you need animation handles, groups, or explicit keyframes. Refine's [`animateReflow`](./animation#list-reflow-animatereflow) is the token-driven wrapper over its FLIP primitive and is enough for keyed lists that reflow.
+
 ## Best Practices
 
 - **Import** `tokens.css` once before rendering components.

package/data/llms.txt

@@ -1,6 +1,6 @@
 # Vielzeug
 
-> 43 focused TypeScript packages. Version: 26.10.19
+> 43 focused TypeScript packages. Version: 26.10.21
 
 Install any package independently: `pnpm add @vielzeug/<name>`
 
@@ -31,7 +31,7 @@ Install any package independently: `pnpm add @vielzeug/<name>`
 - [@vielzeug/orbit](/orbit/): Floating positioning with lifecycle-owned geometry and middleware.
 - [@vielzeug/ore](/ore/): Functional custom-element authoring with typed props, reactive templates, lifecycle helpers, and testing utilities.
 - [@vielzeug/postmaster](/postmaster/): Typed durable job outbox with leased processing, retries, and dead-letter recovery for browser applications.
-- [@vielzeug/prism](/prism/): Responsive SVG charts with explicit updates: line, bar, area, scatter, pie, radar, sparkline
+- [@vielzeug/prism](/prism/): Responsive SVG charts with explicit updates: line, bar, area, scatter, pie, radar, heatmap, sparkline
 - [@vielzeug/pulse](/pulse/): Explicitly connected, typed WebSocket sessions with scoped channels, ref-counted rooms with reactive presence, reconnect restoration, and heartbeat.
 - [@vielzeug/refine](/refine/): Accessible, themeable web components built with Ore for framework and vanilla DOM apps.
 - [@vielzeug/ripple](/ripple/): Framework-agnostic signals, effects, async resources, scopes, and structural bridges.

package/data/manifest.json

@@ -4,5 +4,5 @@
   "refine": "refine.json",
   "schemaVersion": 1,
   "search": "search.json",
-  "version": "26.10.19"
+  "version": "26.10.21"
 }