@pixerate/editor 0.165.0 → 0.166.0

package/dist/agent/index.cjs

@@ -2,7 +2,7 @@
 
 
 
-var _chunkTVQW26AVcjs = require('../chunk-TVQW26AV.cjs');
+var _chunkMZFZSVUJcjs = require('../chunk-MZFZSVUJ.cjs');
 
 
 var _chunkGLQQ2VILcjs = require('../chunk-GLQQ2VIL.cjs');
@@ -121,16 +121,16 @@ var _chunkN2FGYZ4Qcjs = require('../chunk-N2FGYZ4Q.cjs');
 
 
 
-var _chunk64VWWR5Ucjs = require('../chunk-64VWWR5U.cjs');
+var _chunk6FYIFGBWcjs = require('../chunk-6FYIFGBW.cjs');
 
 
-var _chunkIMRXC7OAcjs = require('../chunk-IMRXC7OA.cjs');
+var _chunkV5L2G22Rcjs = require('../chunk-V5L2G22R.cjs');
 require('../chunk-TTCJPX4U.cjs');
-require('../chunk-QO2T6KA5.cjs');
+require('../chunk-UUUTEVX6.cjs');
 
 
 
-var _chunkUVXTOZ2Bcjs = require('../chunk-UVXTOZ2B.cjs');
+var _chunkBPX4Z3N3cjs = require('../chunk-BPX4Z3N3.cjs');
 require('../chunk-VU6WQSMB.cjs');
 
 
@@ -633,14 +633,14 @@ var SIZE_WIDTH = {
 };
 var SIZE_HEIGHT = { type: "number", minimum: 50, maximum: 4096, description: "Height in pixels (default 320)." };
 var SPEC_PROPERTIES = {
-  ..._chunkTVQW26AVcjs.CHART_UPDATE_PROPERTIES,
+  ..._chunkMZFZSVUJcjs.CHART_UPDATE_PROPERTIES,
   categories: { type: "array", items: { type: "string" }, description: "Category labels in order (x axis labels, or pie slices)." },
   series: {
     type: "array",
     description: "The series, each with one value per category (padded with gaps).",
     items: {
       type: "object",
-      properties: { id: { type: "string", description: "Stable id (default: from the name)." }, ..._chunkTVQW26AVcjs.SERIES_PROPS },
+      properties: { id: { type: "string", description: "Stable id (default: from the name)." }, ..._chunkMZFZSVUJcjs.SERIES_PROPS },
       required: ["name", "values"],
       additionalProperties: false
     }
@@ -651,7 +651,7 @@ function cleanSeries(series) {
   return series.map((s) => s && typeof s === "object" ? Object.fromEntries(Object.entries(s).filter(([, v]) => v !== null)) : s);
 }
 function checkedSpec(input) {
-  const { spec, issues } = _chunkUVXTOZ2Bcjs.normalizeChartSpec.call(void 0, { ...input, ...input.series !== void 0 ? { series: cleanSeries(input.series) } : {} });
+  const { spec, issues } = _chunkBPX4Z3N3cjs.normalizeChartSpec.call(void 0, { ...input, ...input.series !== void 0 ? { series: cleanSeries(input.series) } : {} });
   if (issues.length) throw new Error(`The chart was not changed: ${issues.map((i) => i.message).join(" ")}`);
   return spec;
 }
@@ -666,14 +666,14 @@ function describe(chart, includeSpec) {
     series: spec.series.map((s) => ({ id: s.id, name: s.name })),
     width: _nullishCoalesce(node.attrs.width, () => ( null)),
     height: node.attrs.height,
-    description: _chunkIMRXC7OAcjs.describeChart.call(void 0, spec),
+    description: _chunkV5L2G22Rcjs.describeChart.call(void 0, spec),
     ...includeSpec ? { spec } : {}
   };
 }
 function sparklines(doc) {
   const found = [];
   doc.descendants((node, pos) => {
-    if (node.type.name === "sparkline") found.push({ pos, kind: node.attrs.kind, values: node.attrs.values, label: _chunk64VWWR5Ucjs.sparklineLabel.call(void 0, node) });
+    if (node.type.name === "sparkline") found.push({ pos, kind: node.attrs.kind, values: node.attrs.values, label: _chunk6FYIFGBWcjs.sparklineLabel.call(void 0, node) });
   });
   return found;
 }
@@ -684,7 +684,7 @@ function checkPosition(editor, at) {
 function createDocumentChartTools(editor) {
   const chartType = () => editor().schema.nodes.chart;
   const findChart = (args) => {
-    const charts = _chunk64VWWR5Ucjs.getDocumentCharts.call(void 0, editor().state.doc);
+    const charts = _chunk6FYIFGBWcjs.getDocumentCharts.call(void 0, editor().state.doc);
     const list = charts.map((c) => `"${c.id}" at ${c.pos}`).join(", ") || "none; add one with insert_chart";
     if (args.chartId !== void 0) {
       const chart = charts.find((c) => c.id === args.chartId);
@@ -711,7 +711,7 @@ function createDocumentChartTools(editor) {
     annotations: { title: "List charts in the document", ...READ },
     handler: ({ includeSpec = false }) => {
       const doc = editor().state.doc;
-      return { charts: _chunk64VWWR5Ucjs.getDocumentCharts.call(void 0, doc).map((c) => describe(c, includeSpec)), sparklines: editor().schema.nodes.sparkline ? sparklines(doc) : [] };
+      return { charts: _chunk6FYIFGBWcjs.getDocumentCharts.call(void 0, doc).map((c) => describe(c, includeSpec)), sparklines: editor().schema.nodes.sparkline ? sparklines(doc) : [] };
     }
   };
   const insertChart = {
@@ -738,7 +738,7 @@ function createDocumentChartTools(editor) {
       const node = { type: "chart", attrs: { id, spec, width, ...height !== void 0 ? { height } : {} } };
       const chain = ed.chain().command(({ tr }) => (_history.closeHistory.call(void 0, tr), true));
       const ok = (at !== void 0 ? chain.insertContentAt(at, node) : chain.insertContent(node)).run();
-      const chart = _chunk64VWWR5Ucjs.getDocumentCharts.call(void 0, ed.state.doc).find((c) => c.id === id);
+      const chart = _chunk6FYIFGBWcjs.getDocumentCharts.call(void 0, ed.state.doc).find((c) => c.id === id);
       if (!ok || !chart) throw new Error(`A chart cannot go at ${_nullishCoalesce(at, () => ( ed.state.selection.from))}; pass a position between blocks or inside a paragraph.`);
       return { id: chart.id, pos: chart.pos, spec: chart.spec, width: chart.node.attrs.width, height: chart.node.attrs.height };
     }
@@ -785,8 +785,8 @@ function createDocumentChartTools(editor) {
     inputSchema: {
       type: "object",
       properties: {
-        values: { type: "array", items: _chunkTVQW26AVcjs.VALUE, minItems: 1, maxItems: _chunk64VWWR5Ucjs.MAX_SPARKLINE_VALUES, description: "Values in order (null for a gap)." },
-        kind: { type: "string", enum: [..._chunk64VWWR5Ucjs.SPARKLINE_KINDS], description: "line (default), column, or win-loss (sign only)." },
+        values: { type: "array", items: _chunkMZFZSVUJcjs.VALUE, minItems: 1, maxItems: _chunk6FYIFGBWcjs.MAX_SPARKLINE_VALUES, description: "Values in order (null for a gap)." },
+        kind: { type: "string", enum: [..._chunk6FYIFGBWcjs.SPARKLINE_KINDS], description: "line (default), column, or win-loss (sign only)." },
         at: { type: "integer", minimum: 0, description: "Document position inside a paragraph (default: the selection)." },
         width: { type: "number", minimum: 4, maximum: 1e3, description: "Width in pixels (default 80)." },
         height: { type: "number", minimum: 4, maximum: 200, description: "Height in pixels (default 18)." },
@@ -800,12 +800,12 @@ function createDocumentChartTools(editor) {
     handler: ({ values, kind = "line", at, width = 80, height = 18, color = null, label = null }) => {
       const ed = editor();
       checkPosition(ed, at);
-      const parsed = values.map((v) => _chunkUVXTOZ2Bcjs.parseChartValue.call(void 0, v));
+      const parsed = values.map((v) => _chunkBPX4Z3N3cjs.parseChartValue.call(void 0, v));
       const bad = parsed.findIndex((v) => v === void 0);
       if (bad >= 0) throw new Error(`values[${bad}] ("${String(values[bad])}") is not a number; pass numbers, numeric text or null. Nothing was inserted.`);
       const pos = _nullishCoalesce(at, () => ( ed.state.selection.from));
       if (!ed.state.doc.resolve(pos).parent.inlineContent) throw new Error(`Position ${pos} is between blocks; a sparkline goes inside a paragraph (use a position from get_text {blocks: true}).`);
-      const stored = _chunk64VWWR5Ucjs.normalizeSparklineValues.call(void 0, parsed);
+      const stored = _chunk6FYIFGBWcjs.normalizeSparklineValues.call(void 0, parsed);
       ed.chain().command(({ tr }) => (_history.closeHistory.call(void 0, tr), true)).insertContentAt(pos, { type: "sparkline", attrs: { values: stored, kind, width, height, color, label } }).run();
       return { pos, kind, values: stored };
     }
@@ -1143,8 +1143,8 @@ function createTextPresence(editor, providerId, option) {
   const config = option === false ? null : option === true || option === void 0 ? {} : option;
   const caret = {
     id: _nullishCoalesce(_optionalChain([config, 'optionalAccess', _43 => _43.id]), () => ( providerId)),
-    name: _nullishCoalesce(_optionalChain([config, 'optionalAccess', _44 => _44.name]), () => ( _chunk64VWWR5Ucjs.DEFAULT_AGENT_CARET_NAME)),
-    color: _nullishCoalesce(_optionalChain([config, 'optionalAccess', _45 => _45.color]), () => ( _chunk64VWWR5Ucjs.DEFAULT_AGENT_CARET_COLOR))
+    name: _nullishCoalesce(_optionalChain([config, 'optionalAccess', _44 => _44.name]), () => ( _chunk6FYIFGBWcjs.DEFAULT_AGENT_CARET_NAME)),
+    color: _nullishCoalesce(_optionalChain([config, 'optionalAccess', _45 => _45.color]), () => ( _chunk6FYIFGBWcjs.DEFAULT_AGENT_CARET_COLOR))
   };
   const typing = !_optionalChain([config, 'optionalAccess', _46 => _46.typing]) ? null : config.typing === true ? {} : config.typing;
   const idleMs = _nullishCoalesce(_optionalChain([config, 'optionalAccess', _47 => _47.idleMs]), () => ( 12e3));
@@ -1157,19 +1157,19 @@ function createTextPresence(editor, providerId, option) {
   };
   const touch = () => {
     clearTimeout(idleTimer);
-    if (idleMs > 0) idleTimer = setTimeout(() => live() && _chunk64VWWR5Ucjs.clearAgentCaret.call(void 0, live(), caret.id), idleMs);
+    if (idleMs > 0) idleTimer = setTimeout(() => live() && _chunk6FYIFGBWcjs.clearAgentCaret.call(void 0, live(), caret.id), idleMs);
   };
   const tint = (ed, ranges) => {
     clearTimeout(tintTimer);
-    _chunk64VWWR5Ucjs.markAgentChanges.call(void 0, ed, caret.id, ranges);
-    if (changedMs > 0 && ranges.length) tintTimer = setTimeout(() => live() && _chunk64VWWR5Ucjs.markAgentChanges.call(void 0, live(), caret.id, []), changedMs);
+    _chunk6FYIFGBWcjs.markAgentChanges.call(void 0, ed, caret.id, ranges);
+    if (changedMs > 0 && ranges.length) tintTimer = setTimeout(() => live() && _chunk6FYIFGBWcjs.markAgentChanges.call(void 0, live(), caret.id, []), changedMs);
   };
   return {
     /** Puts the caret at `head`, selecting from `anchor`. */
     show(anchor, head = anchor) {
       const ed = live();
       if (!ed) return;
-      _chunk64VWWR5Ucjs.setAgentCaret.call(void 0, ed, { ...caret, from: anchor, to: head });
+      _chunk6FYIFGBWcjs.setAgentCaret.call(void 0, ed, { ...caret, from: anchor, to: head });
       touch();
     },
     /** Shows the caret after ranges just changed by a tool, tinting them. */
@@ -1177,7 +1177,7 @@ function createTextPresence(editor, providerId, option) {
       const ed = live();
       if (!ed || !ranges.length) return;
       const last = ranges[ranges.length - 1];
-      _chunk64VWWR5Ucjs.setAgentCaret.call(void 0, ed, { ...caret, from: last.to });
+      _chunk6FYIFGBWcjs.setAgentCaret.call(void 0, ed, { ...caret, from: last.to });
       tint(ed, ranges);
       touch();
     },
@@ -1185,12 +1185,12 @@ function createTextPresence(editor, providerId, option) {
     async write(ed, from, to, text, signal) {
       if (live() && typing) {
         clearTimeout(tintTimer);
-        const range2 = await _chunk64VWWR5Ucjs.typeAgentText.call(void 0, ed, { ...typing, from, to, text, caret, signal });
-        if (changedMs > 0) tintTimer = setTimeout(() => live() && _chunk64VWWR5Ucjs.markAgentChanges.call(void 0, live(), caret.id, []), changedMs);
+        const range2 = await _chunk6FYIFGBWcjs.typeAgentText.call(void 0, ed, { ...typing, from, to, text, caret, signal });
+        if (changedMs > 0) tintTimer = setTimeout(() => live() && _chunk6FYIFGBWcjs.markAgentChanges.call(void 0, live(), caret.id, []), changedMs);
         touch();
         return range2;
       }
-      const tr = _history.closeHistory.call(void 0, _chunk64VWWR5Ucjs.replaceWithTextTransaction.call(void 0, ed.state, from, to, text));
+      const tr = _history.closeHistory.call(void 0, _chunk6FYIFGBWcjs.replaceWithTextTransaction.call(void 0, ed.state, from, to, text));
       const end = tr.mapping.map(to, 1);
       const range = { from: Math.min(tr.mapping.map(from, -1), end), to: end };
       ed.view.dispatch(tr.scrollIntoView());
@@ -1219,7 +1219,7 @@ function findMatches(editor, query, args, replacement) {
     wholeWord: !!args.wholeWord,
     ...args.regex ? { regex: true } : { literal: true }
   };
-  const result = _chunk64VWWR5Ucjs.searchDocument.call(void 0, editor.state.doc, query, options, replacement !== void 0 ? { replacement } : {});
+  const result = _chunk6FYIFGBWcjs.searchDocument.call(void 0, editor.state.doc, query, options, replacement !== void 0 ? { replacement } : {});
   if (result.error) throw new Error(`Invalid search pattern: ${result.error.message}`);
   return { matches: result.matches, truncated: result.truncated };
 }
@@ -1381,7 +1381,7 @@ function createRichTextToolProvider(target, options) {
         replacement: String(replace).replace(/\r\n?|\n/g, "\r")
       }));
       const tr = _history.closeHistory.call(void 0, ed.state.tr);
-      const ends = _chunk64VWWR5Ucjs.applyReplacements.call(void 0, tr, chosen);
+      const ends = _chunk6FYIFGBWcjs.applyReplacements.call(void 0, tr, chosen);
       ed.view.dispatch(tr.scrollIntoView());
       const ranges = chosen.map((m, i) => ({ from: tr.mapping.map(m.from, -1), to: ends[i] }));
       presence.changed(ranges.filter((r) => r.from < r.to));
@@ -1482,7 +1482,7 @@ function createRichTextToolProvider(target, options) {
     inputSchema: {
       type: "object",
       properties: {
-        operation: { type: "string", enum: _chunk64VWWR5Ucjs.TABLE_ACTIONS.map((a) => a.action), description: "Table operation." },
+        operation: { type: "string", enum: _chunk6FYIFGBWcjs.TABLE_ACTIONS.map((a) => a.action), description: "Table operation." },
         at: { type: "integer", minimum: 0, description: "Document position to place the cursor first (e.g. inside a cell)." },
         rows: { type: "integer", minimum: 1, maximum: 100, description: "insertTable: rows (default 3)." },
         cols: { type: "integer", minimum: 1, maximum: 50, description: "insertTable: columns (default 3)." },
@@ -1512,10 +1512,10 @@ function createRichTextToolProvider(target, options) {
         ed.view.dispatch(ed.state.tr.setSelection(_state.TextSelection.near(ed.state.doc.resolve(at))));
       }
       const action = operation;
-      const state = _chunk64VWWR5Ucjs.getTableActionState.call(void 0, ed, action, params);
+      const state = _chunk6FYIFGBWcjs.getTableActionState.call(void 0, ed, action, params);
       if (state !== true) throw new Error(state);
-      _chunk64VWWR5Ucjs.runTableAction.call(void 0, ed, action, params);
-      const table = _chunk64VWWR5Ucjs.getTableState.call(void 0, ed);
+      _chunk6FYIFGBWcjs.runTableAction.call(void 0, ed, action, params);
+      const table = _chunk6FYIFGBWcjs.getTableState.call(void 0, ed);
       return {
         operation,
         table: table.inTable ? { rows: table.rows, columns: table.columns, row: table.row, column: table.column } : null,
@@ -1534,7 +1534,7 @@ function createRichTextToolProvider(target, options) {
       if (!ed || ed.isDestroyed) return [];
       if (!ed.isEditable) return [getText, findText, ...charts.read()];
       const tools = [getText, findText, insertText, replaceText, replaceRange, replaceSelection, setSelection, ...formatting.tools(ed)];
-      return [...tools, ..._chunk64VWWR5Ucjs.isTableEnabled.call(void 0, ed) ? [editTable] : [], ...charts.read(), ...charts.write().map(withCaret)];
+      return [...tools, ..._chunk6FYIFGBWcjs.isTableEnabled.call(void 0, ed) ? [editTable] : [], ...charts.read(), ...charts.write().map(withCaret)];
     },
     subscribe: (notify) => {
       const ed = editor();

package/dist/agent/index.js

@@ -2,7 +2,7 @@ import {
   CHART_UPDATE_PROPERTIES,
   SERIES_PROPS,
   VALUE
-} from "../chunk-FEU2XVQH.js";
+} from "../chunk-5UNQDC3Q.js";
 import {
   hasVariantCommands
 } from "../chunk-3TNA7JKI.js";
@@ -121,16 +121,16 @@ import {
   setAgentCaret,
   sparklineLabel,
   typeAgentText
-} from "../chunk-X5W645RI.js";
+} from "../chunk-DFCAR7AW.js";
 import {
   describeChart
-} from "../chunk-FRBRLKNQ.js";
+} from "../chunk-YUFTVNLX.js";
 import "../chunk-KGRZMHZB.js";
-import "../chunk-V5GSY3NC.js";
+import "../chunk-ITANXMZD.js";
 import {
   normalizeChartSpec,
   parseChartValue
-} from "../chunk-2ZRN43IN.js";
+} from "../chunk-FR432ROA.js";
 import "../chunk-O6OGNDND.js";
 import {
   getEditorMarkdown,

package/dist/canvas/index.cjs

@@ -113,10 +113,10 @@ var _chunkPY4GWSE2cjs = require('../chunk-PY4GWSE2.cjs');
 var _chunkN2FGYZ4Qcjs = require('../chunk-N2FGYZ4Q.cjs');
 
 
-var _chunkQO2T6KA5cjs = require('../chunk-QO2T6KA5.cjs');
+var _chunkUUUTEVX6cjs = require('../chunk-UUUTEVX6.cjs');
 
 
-var _chunkUVXTOZ2Bcjs = require('../chunk-UVXTOZ2B.cjs');
+var _chunkBPX4Z3N3cjs = require('../chunk-BPX4Z3N3.cjs');
 require('../chunk-VU6WQSMB.cjs');
 require('../chunk-55AKPTLM.cjs');
 
@@ -8926,7 +8926,7 @@ function xyChartSpec(graph, palette) {
     );
   }
   const bars = graph.nodes.some((n3) => n3.shape === "bar");
-  return _chunkUVXTOZ2Bcjs.createChartSpec.call(void 0, {
+  return _chunkBPX4Z3N3cjs.createChartSpec.call(void 0, {
     type: bars ? "bar" : "line",
     title: _nullishCoalesce(graph.title, () => ( "")),
     categories,
@@ -8940,7 +8940,7 @@ function xyChartSpec(graph, palette) {
 }
 function radarChartSpec(graph, palette) {
   const data = _nullishCoalesce(graph.data, () => ( {}));
-  return _chunkUVXTOZ2Bcjs.createChartSpec.call(void 0, {
+  return _chunkBPX4Z3N3cjs.createChartSpec.call(void 0, {
     type: "radar",
     title: _nullishCoalesce(graph.title, () => ( "")),
     categories: Array.isArray(data.axes) ? data.axes.map(String) : [],
@@ -8988,12 +8988,12 @@ function translatePath(d, dx, dy) {
 }
 var xyChartScene = ({ graph, theme }) => {
   const box = _chunk3FSUJIXNcjs.XY_CHART_BOX;
-  const scene = _chunkQO2T6KA5cjs.layoutChart.call(void 0, xyChartSpec(graph, theme.palette), { width: box.width, height: box.height, theme: chartTheme(theme) });
+  const scene = _chunkUUUTEVX6cjs.layoutChart.call(void 0, xyChartSpec(graph, theme.palette), { width: box.width, height: box.height, theme: chartTheme(theme) });
   return toDiagramMarks(scene.marks, box.x, box.y);
 };
 var radarScene = ({ graph, theme }) => {
   const box = _chunk3FSUJIXNcjs.RADAR_CHART_BOX;
-  const scene = _chunkQO2T6KA5cjs.layoutChart.call(void 0, radarChartSpec(graph, theme.palette), { width: box.width, height: box.height, theme: chartTheme(theme) });
+  const scene = _chunkUUUTEVX6cjs.layoutChart.call(void 0, radarChartSpec(graph, theme.palette), { width: box.width, height: box.height, theme: chartTheme(theme) });
   return toDiagramMarks(scene.marks, box.x, box.y);
 };
 

package/dist/canvas/index.js

@@ -113,10 +113,10 @@ import {
 } from "../chunk-5ED73EC6.js";
 import {
   layoutChart
-} from "../chunk-V5GSY3NC.js";
+} from "../chunk-ITANXMZD.js";
 import {
   createChartSpec
-} from "../chunk-2ZRN43IN.js";
+} from "../chunk-FR432ROA.js";
 import "../chunk-O6OGNDND.js";
 import "../chunk-II2WIF5Z.js";
 import {

package/dist/chart/controller.d.cts

@@ -10,6 +10,13 @@ export interface ChartControllerOptions {
     history?: HistoryManager;
     /** Called after the spec changes (edit, undo, redo, load). */
     onChange?: (spec: Readonly<ChartSpec>) => void;
+    /** Time and frames for playing a bar race (default: `performance.now` / `requestAnimationFrame`, else timers). */
+    raceTicker?: ChartRaceTicker;
+}
+/** Drives bar race playback: the current time in ms, and a way to run `step` on the next frame (returns a cancel). */
+export interface ChartRaceTicker {
+    now(): number;
+    next(step: () => void): () => void;
 }
 /** A snapshot of the controller. The same object is returned until something changes. */
 export interface ChartState {
@@ -27,6 +34,10 @@ export interface ChartState {
     canRedo: boolean;
     undoLabel: string;
     redoLabel: string;
+    /** Bar race: the moment shown, a fractional category index (null: the last time point). View state, not undone. */
+    raceFrame: number | null;
+    /** Bar race: playback is running. */
+    racePlaying: boolean;
     /** Bumped on every change. */
     revision: number;
 }
@@ -109,6 +120,9 @@ export declare class ChartController {
     private revision;
     private applying;
     private readonly onChange?;
+    private readonly raceTicker;
+    private raceFrame;
+    private raceStop;
     private readonly listeners;
     private unsubscribeHistory?;
     private state;
@@ -374,6 +388,21 @@ export declare class ChartController {
      * undo step). Series colours, types and other per-series settings are dropped.
      */
     transpose(): ChartActionResult;
+    /**
+     * Shows a bar race at a moment: a category index, fractional between time points (`null`:
+     * the last one). View state like the selection, so not an undo step. Stops playback.
+     */
+    setRaceFrame(frame: number | null): ChartActionResult;
+    /**
+     * Plays the bar race from the moment shown (from the start when it is at the end), moving
+     * one time point every `msPerStep` (default 1000) until the last. Not an undo step.
+     */
+    playRace(options?: {
+        msPerStep?: number;
+    }): ChartActionResult;
+    /** Pauses bar race playback where it is. */
+    pauseRace(): void;
+    private stopRace;
     /** Selects a chart element (view state; not an undo step). */
     select(selection: ChartSelection | null): void;
     /**

package/dist/chart/controller.d.ts

@@ -10,6 +10,13 @@ export interface ChartControllerOptions {
     history?: HistoryManager;
     /** Called after the spec changes (edit, undo, redo, load). */
     onChange?: (spec: Readonly<ChartSpec>) => void;
+    /** Time and frames for playing a bar race (default: `performance.now` / `requestAnimationFrame`, else timers). */
+    raceTicker?: ChartRaceTicker;
+}
+/** Drives bar race playback: the current time in ms, and a way to run `step` on the next frame (returns a cancel). */
+export interface ChartRaceTicker {
+    now(): number;
+    next(step: () => void): () => void;
 }
 /** A snapshot of the controller. The same object is returned until something changes. */
 export interface ChartState {
@@ -27,6 +34,10 @@ export interface ChartState {
     canRedo: boolean;
     undoLabel: string;
     redoLabel: string;
+    /** Bar race: the moment shown, a fractional category index (null: the last time point). View state, not undone. */
+    raceFrame: number | null;
+    /** Bar race: playback is running. */
+    racePlaying: boolean;
     /** Bumped on every change. */
     revision: number;
 }
@@ -109,6 +120,9 @@ export declare class ChartController {
     private revision;
     private applying;
     private readonly onChange?;
+    private readonly raceTicker;
+    private raceFrame;
+    private raceStop;
     private readonly listeners;
     private unsubscribeHistory?;
     private state;
@@ -374,6 +388,21 @@ export declare class ChartController {
      * undo step). Series colours, types and other per-series settings are dropped.
      */
     transpose(): ChartActionResult;
+    /**
+     * Shows a bar race at a moment: a category index, fractional between time points (`null`:
+     * the last one). View state like the selection, so not an undo step. Stops playback.
+     */
+    setRaceFrame(frame: number | null): ChartActionResult;
+    /**
+     * Plays the bar race from the moment shown (from the start when it is at the end), moving
+     * one time point every `msPerStep` (default 1000) until the last. Not an undo step.
+     */
+    playRace(options?: {
+        msPerStep?: number;
+    }): ChartActionResult;
+    /** Pauses bar race playback where it is. */
+    pauseRace(): void;
+    private stopRace;
     /** Selects a chart element (view state; not an undo step). */
     select(selection: ChartSelection | null): void;
     /**