@voila.dev/chart 5.0.113 → 5.0.114

package/dist/core/motion/motion-store.d.ts

@@ -0,0 +1,19 @@
+import { type ChartTiming } from "./timing.js";
+import type { ChartScene } from "../types.js";
+/**
+ * Every moving number of a chart, as springs keyed by node and channel. A
+ * new scene retargets them: each channel starts from where it is painted, at
+ * the speed it has, so an update landing mid-flight bends the motion instead
+ * of kinking it. Pure and clocked from outside (milliseconds), so the SVG and
+ * Canvas renderers move identically and tests step it by hand. Hit-testing
+ * and focus never read it: they read the scene it moves towards.
+ */
+export interface MotionStore {
+    retarget(scene: ChartScene, now: number): void;
+    /** Jumps to `scene`: a resize, or reduced motion. */
+    snap(scene: ChartScene): void;
+    frame(now: number): ChartScene;
+    settled(now: number): boolean;
+}
+export declare function createMotionStore(initial: ChartScene, timing: ChartTiming): MotionStore;
+//# sourceMappingURL=motion-store.d.ts.map

package/dist/core/motion/motion-store.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"motion-store.d.ts","sourceRoot":"","sources":["../../../src/core/motion/motion-store.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,KAAK,WAAW,EAAgB,MAAM,yBAAyB,CAAC;AAEzE,OAAO,KAAK,EAAE,UAAU,EAAa,MAAM,iBAAiB,CAAC;AAE7D;;;;;;;GAOG;AACH,MAAM,WAAW,WAAW;IAC3B,QAAQ,CAAC,KAAK,EAAE,UAAU,EAAE,GAAG,EAAE,MAAM,GAAG,IAAI,CAAC;IAC/C,qDAAqD;IACrD,IAAI,CAAC,KAAK,EAAE,UAAU,GAAG,IAAI,CAAC;IAC9B,KAAK,CAAC,GAAG,EAAE,MAAM,GAAG,UAAU,CAAC;IAC/B,OAAO,CAAC,GAAG,EAAE,MAAM,GAAG,OAAO,CAAC;CAC9B;AAiDD,wBAAgB,iBAAiB,CAChC,OAAO,EAAE,UAAU,EACnB,MAAM,EAAE,WAAW,GACjB,WAAW,CA0Jb"}

package/dist/core/motion/motion-store.js

@@ -0,0 +1,174 @@
+import { spring, tween } from "@voila.dev/motion";
+import { staggerDelay } from "./timing.js";
+import { tweenPath } from "./tween.js";
+const CHANNELS = {
+  rect: ["x", "y", "width", "height"],
+  circle: ["cx", "cy", "r"],
+  line: ["x1", "y1", "x2", "y2"],
+  text: ["x", "y"],
+  path: [],
+  group: []
+};
+const OPACITY = "opacity";
+function flatten(nodes, into = /* @__PURE__ */ new Map()) {
+  for (const node of nodes) {
+    into.set(node.key, node);
+    if (node.kind === "group") flatten(node.children, into);
+  }
+  return into;
+}
+function channelKey(node, channel) {
+  return `${node}\0${channel}`;
+}
+function elapsed(motion, now) {
+  return Math.max(0, (now - motion.start) / 1e3);
+}
+function done(motion, now) {
+  return elapsed(motion, now) >= motion.generator.duration;
+}
+function createMotionStore(initial, timing) {
+  let target = initial;
+  const numbers = /* @__PURE__ */ new Map();
+  const paths = /* @__PURE__ */ new Map();
+  function generator(from, to, velocity) {
+    return timing.type === "spring" ? spring({
+      from,
+      to,
+      velocity,
+      duration: timing.duration,
+      bounce: timing.bounce
+    }) : tween({
+      keyframes: [from, to],
+      duration: timing.duration,
+      ease: timing.easing
+    });
+  }
+  function pathNow(key, fallback, now) {
+    const motion = paths.get(key);
+    if (!motion) return fallback;
+    return tweenPath(
+      motion.from,
+      motion.to,
+      motion.generator.at(elapsed(motion, now)).value
+    );
+  }
+  function moveNode(node, before, start, now) {
+    for (const channel of CHANNELS[node.kind]) {
+      const key = channelKey(node.key, channel);
+      const running = numbers.get(key);
+      const state = running?.generator.at(elapsed(running, now));
+      const from = state?.value ?? before?.[channel];
+      const to = node[channel];
+      numbers.delete(key);
+      if (from === void 0 || from === to && !state?.velocity) continue;
+      numbers.set(key, {
+        generator: generator(from, to, state?.velocity ?? 0),
+        start
+      });
+    }
+    if (node.kind === "path") {
+      const from = pathNow(
+        node.key,
+        before?.kind === "path" ? before.d : void 0,
+        now
+      );
+      paths.delete(node.key);
+      if (from !== void 0 && from !== node.d) {
+        paths.set(node.key, {
+          generator: generator(0, 1, 0),
+          start,
+          from,
+          to: node.d
+        });
+      }
+    }
+    const fading = channelKey(node.key, OPACITY);
+    const fade = numbers.get(fading);
+    if (before === void 0 || fade) {
+      const from = fade ? fade.generator.at(elapsed(fade, now)).value : 0;
+      numbers.set(fading, { generator: generator(from, 1, 0), start });
+    }
+  }
+  function paint(node, now) {
+    if (node.kind === "group") {
+      return {
+        ...node,
+        children: node.children.map((child) => paint(child, now))
+      };
+    }
+    const moved = {};
+    for (const channel of [...CHANNELS[node.kind], OPACITY]) {
+      const motion = numbers.get(channelKey(node.key, channel));
+      if (!motion) continue;
+      moved[channel] = motion.generator.at(elapsed(motion, now)).value;
+    }
+    const d = node.kind === "path" ? pathNow(node.key, node.d, now) : void 0;
+    const { [OPACITY]: opacity, ...geometry } = moved;
+    const next = {
+      ...node,
+      ...geometry,
+      ...d === void 0 ? {} : { d }
+    };
+    if (opacity === void 0) return next;
+    const shown = Math.min(1, Math.max(0, opacity));
+    const painted = next;
+    return {
+      ...painted,
+      paint: {
+        ...painted.paint,
+        opacity: (painted.paint.opacity ?? 1) * shown
+      }
+    };
+  }
+  return {
+    retarget(scene, now) {
+      const before = flatten(target.nodes);
+      const after = flatten(scene.nodes);
+      const marks = [...after.values()].filter((node) => node.role === "mark");
+      const order = new Map(marks.map((node, index) => [node.key, index]));
+      for (const key of before.keys()) {
+        if (after.has(key)) continue;
+        paths.delete(key);
+        for (const channel of [
+          ...CHANNELS[before.get(key)?.kind ?? "group"] ?? [],
+          OPACITY
+        ]) {
+          numbers.delete(channelKey(key, channel));
+        }
+      }
+      for (const node of after.values()) {
+        const delay = staggerDelay(
+          timing,
+          order.get(node.key) ?? 0,
+          marks.length
+        );
+        moveNode(node, before.get(node.key), now + delay * 1e3, now);
+      }
+      target = scene;
+    },
+    snap(scene) {
+      numbers.clear();
+      paths.clear();
+      target = scene;
+    },
+    frame(now) {
+      for (const [key, motion] of numbers) {
+        if (done(motion, now)) numbers.delete(key);
+      }
+      for (const [key, motion] of paths) {
+        if (done(motion, now)) paths.delete(key);
+      }
+      if (numbers.size === 0 && paths.size === 0) return target;
+      return { ...target, nodes: target.nodes.map((node) => paint(node, now)) };
+    },
+    settled(now) {
+      return [...numbers.values(), ...paths.values()].every(
+        (motion) => done(motion, now)
+      );
+    }
+  };
+}
+export {
+  createMotionStore
+};
+//# sourceMappingURL=motion-store.js.map

package/dist/core/motion/motion-store.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../src/core/motion/motion-store.ts"],
+  "sourcesContent": ["import { type Generator, spring, tween } from \"@voila.dev/motion\";\nimport { type ChartTiming, staggerDelay } from \"#/core/motion/timing.ts\";\nimport { tweenPath } from \"#/core/motion/tween.ts\";\nimport type { ChartScene, SceneNode } from \"#/core/types.ts\";\n\n/**\n * Every moving number of a chart, as springs keyed by node and channel. A\n * new scene retargets them: each channel starts from where it is painted, at\n * the speed it has, so an update landing mid-flight bends the motion instead\n * of kinking it. Pure and clocked from outside (milliseconds), so the SVG and\n * Canvas renderers move identically and tests step it by hand. Hit-testing\n * and focus never read it: they read the scene it moves towards.\n */\nexport interface MotionStore {\n\tretarget(scene: ChartScene, now: number): void;\n\t/** Jumps to `scene`: a resize, or reduced motion. */\n\tsnap(scene: ChartScene): void;\n\tframe(now: number): ChartScene;\n\tsettled(now: number): boolean;\n}\n\ninterface Motion {\n\treadonly generator: Generator;\n\t/** Milliseconds, the delay included. */\n\treadonly start: number;\n}\n\ninterface PathMotion extends Motion {\n\treadonly from: string;\n\treadonly to: string;\n}\n\ntype Numeric = Record<string, number>;\n\nconst CHANNELS: Record<SceneNode[\"kind\"], readonly string[]> = {\n\trect: [\"x\", \"y\", \"width\", \"height\"],\n\tcircle: [\"cx\", \"cy\", \"r\"],\n\tline: [\"x1\", \"y1\", \"x2\", \"y2\"],\n\ttext: [\"x\", \"y\"],\n\tpath: [],\n\tgroup: [],\n};\n\nconst OPACITY = \"opacity\";\n\nfunction flatten(\n\tnodes: readonly SceneNode[],\n\tinto = new Map<string, SceneNode>(),\n) {\n\tfor (const node of nodes) {\n\t\tinto.set(node.key, node);\n\t\tif (node.kind === \"group\") flatten(node.children, into);\n\t}\n\treturn into;\n}\n\nfunction channelKey(node: string, channel: string): string {\n\treturn `${node}\\u0000${channel}`;\n}\n\nfunction elapsed(motion: Motion, now: number): number {\n\treturn Math.max(0, (now - motion.start) / 1000);\n}\n\nfunction done(motion: Motion, now: number): boolean {\n\treturn elapsed(motion, now) >= motion.generator.duration;\n}\n\nexport function createMotionStore(\n\tinitial: ChartScene,\n\ttiming: ChartTiming,\n): MotionStore {\n\tlet target = initial;\n\tconst numbers = new Map<string, Motion>();\n\tconst paths = new Map<string, PathMotion>();\n\n\tfunction generator(from: number, to: number, velocity: number): Generator {\n\t\treturn timing.type === \"spring\"\n\t\t\t? spring({\n\t\t\t\t\tfrom,\n\t\t\t\t\tto,\n\t\t\t\t\tvelocity,\n\t\t\t\t\tduration: timing.duration,\n\t\t\t\t\tbounce: timing.bounce,\n\t\t\t\t})\n\t\t\t: tween({\n\t\t\t\t\tkeyframes: [from, to],\n\t\t\t\t\tduration: timing.duration,\n\t\t\t\t\tease: timing.easing,\n\t\t\t\t});\n\t}\n\n\tfunction pathNow(key: string, fallback: string | undefined, now: number) {\n\t\tconst motion = paths.get(key);\n\t\tif (!motion) return fallback;\n\t\treturn tweenPath(\n\t\t\tmotion.from,\n\t\t\tmotion.to,\n\t\t\tmotion.generator.at(elapsed(motion, now)).value,\n\t\t);\n\t}\n\n\tfunction moveNode(\n\t\tnode: SceneNode,\n\t\tbefore: SceneNode | undefined,\n\t\tstart: number,\n\t\tnow: number,\n\t) {\n\t\tfor (const channel of CHANNELS[node.kind]) {\n\t\t\tconst key = channelKey(node.key, channel);\n\t\t\tconst running = numbers.get(key);\n\t\t\tconst state = running?.generator.at(elapsed(running, now));\n\t\t\tconst from =\n\t\t\t\tstate?.value ?? (before as unknown as Numeric | undefined)?.[channel];\n\t\t\tconst to = (node as unknown as Numeric)[channel] as number;\n\t\t\tnumbers.delete(key);\n\t\t\tif (from === undefined || (from === to && !state?.velocity)) continue;\n\t\t\tnumbers.set(key, {\n\t\t\t\tgenerator: generator(from, to, state?.velocity ?? 0),\n\t\t\t\tstart,\n\t\t\t});\n\t\t}\n\t\tif (node.kind === \"path\") {\n\t\t\tconst from = pathNow(\n\t\t\t\tnode.key,\n\t\t\t\tbefore?.kind === \"path\" ? before.d : undefined,\n\t\t\t\tnow,\n\t\t\t);\n\t\t\tpaths.delete(node.key);\n\t\t\tif (from !== undefined && from !== node.d) {\n\t\t\t\tpaths.set(node.key, {\n\t\t\t\t\tgenerator: generator(0, 1, 0),\n\t\t\t\t\tstart,\n\t\t\t\t\tfrom,\n\t\t\t\t\tto: node.d,\n\t\t\t\t});\n\t\t\t}\n\t\t}\n\t\tconst fading = channelKey(node.key, OPACITY);\n\t\tconst fade = numbers.get(fading);\n\t\tif (before === undefined || fade) {\n\t\t\tconst from = fade ? fade.generator.at(elapsed(fade, now)).value : 0;\n\t\t\tnumbers.set(fading, { generator: generator(from, 1, 0), start });\n\t\t}\n\t}\n\n\tfunction paint(node: SceneNode, now: number): SceneNode {\n\t\tif (node.kind === \"group\") {\n\t\t\treturn {\n\t\t\t\t...node,\n\t\t\t\tchildren: node.children.map((child) => paint(child, now)),\n\t\t\t};\n\t\t}\n\t\tconst moved: Numeric = {};\n\t\tfor (const channel of [...CHANNELS[node.kind], OPACITY]) {\n\t\t\tconst motion = numbers.get(channelKey(node.key, channel));\n\t\t\tif (!motion) continue;\n\t\t\tmoved[channel] = motion.generator.at(elapsed(motion, now)).value;\n\t\t}\n\t\tconst d = node.kind === \"path\" ? pathNow(node.key, node.d, now) : undefined;\n\t\tconst { [OPACITY]: opacity, ...geometry } = moved;\n\t\tconst next = {\n\t\t\t...node,\n\t\t\t...geometry,\n\t\t\t...(d === undefined ? {} : { d }),\n\t\t} as SceneNode;\n\t\tif (opacity === undefined) return next;\n\t\tconst shown = Math.min(1, Math.max(0, opacity));\n\t\tconst painted = next as Exclude<SceneNode, { kind: \"group\" }>;\n\t\treturn {\n\t\t\t...painted,\n\t\t\tpaint: {\n\t\t\t\t...painted.paint,\n\t\t\t\topacity: (painted.paint.opacity ?? 1) * shown,\n\t\t\t},\n\t\t} as SceneNode;\n\t}\n\n\treturn {\n\t\tretarget(scene, now) {\n\t\t\tconst before = flatten(target.nodes);\n\t\t\tconst after = flatten(scene.nodes);\n\t\t\tconst marks = [...after.values()].filter((node) => node.role === \"mark\");\n\t\t\tconst order = new Map(marks.map((node, index) => [node.key, index]));\n\t\t\tfor (const key of before.keys()) {\n\t\t\t\tif (after.has(key)) continue;\n\t\t\t\tpaths.delete(key);\n\t\t\t\tfor (const channel of [\n\t\t\t\t\t...(CHANNELS[before.get(key)?.kind ?? \"group\"] ?? []),\n\t\t\t\t\tOPACITY,\n\t\t\t\t]) {\n\t\t\t\t\tnumbers.delete(channelKey(key, channel));\n\t\t\t\t}\n\t\t\t}\n\t\t\tfor (const node of after.values()) {\n\t\t\t\tconst delay = staggerDelay(\n\t\t\t\t\ttiming,\n\t\t\t\t\torder.get(node.key) ?? 0,\n\t\t\t\t\tmarks.length,\n\t\t\t\t);\n\t\t\t\tmoveNode(node, before.get(node.key), now + delay * 1000, now);\n\t\t\t}\n\t\t\ttarget = scene;\n\t\t},\n\t\tsnap(scene) {\n\t\t\tnumbers.clear();\n\t\t\tpaths.clear();\n\t\t\ttarget = scene;\n\t\t},\n\t\tframe(now) {\n\t\t\tfor (const [key, motion] of numbers) {\n\t\t\t\tif (done(motion, now)) numbers.delete(key);\n\t\t\t}\n\t\t\tfor (const [key, motion] of paths) {\n\t\t\t\tif (done(motion, now)) paths.delete(key);\n\t\t\t}\n\t\t\tif (numbers.size === 0 && paths.size === 0) return target;\n\t\t\treturn { ...target, nodes: target.nodes.map((node) => paint(node, now)) };\n\t\t},\n\t\tsettled(now) {\n\t\t\treturn [...numbers.values(), ...paths.values()].every((motion) =>\n\t\t\t\tdone(motion, now),\n\t\t\t);\n\t\t},\n\t};\n}\n"],
+  "mappings": "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",
+  "names": []
+}

package/dist/core/motion/timing.d.ts

@@ -0,0 +1,30 @@
+import type { EasingName } from "@voila.dev/motion";
+/** How a data update moves: what `<Chart animate>` accepts beyond `true`, `false` and a duration. */
+export type ChartAnimation = {
+    readonly type?: "spring";
+    /** Perceived duration, in milliseconds. */
+    readonly duration?: number;
+    /** 0 never overshoots (the default: a bar past its value shows a number the data doesn't have); up to 0.5. */
+    readonly bounce?: number;
+    /** Milliseconds between marks in focus order, capped at 300 ms in all. */
+    readonly stagger?: number;
+} | {
+    readonly type: "tween";
+    readonly duration?: number;
+    readonly easing?: EasingName;
+    readonly stagger?: number;
+};
+export interface ChartTiming {
+    readonly type: "spring" | "tween";
+    /** Seconds, as the motion package counts them. */
+    readonly duration: number;
+    readonly bounce: number;
+    readonly easing: EasingName;
+    /** Seconds between neighbours. */
+    readonly stagger: number;
+}
+/** The timing an `animate` prop means, or `null` to snap. */
+export declare function chartTiming(animate: boolean | number | ChartAnimation): ChartTiming | null;
+/** The delay of the `index`-th of `count` marks: the gap shrinks so the last one never waits more than 300 ms. */
+export declare function staggerDelay(timing: ChartTiming, index: number, count: number): number;
+//# sourceMappingURL=timing.d.ts.map

package/dist/core/motion/timing.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"timing.d.ts","sourceRoot":"","sources":["../../../src/core/motion/timing.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,mBAAmB,CAAC;AAEpD,qGAAqG;AACrG,MAAM,MAAM,cAAc,GACvB;IACA,QAAQ,CAAC,IAAI,CAAC,EAAE,QAAQ,CAAC;IACzB,2CAA2C;IAC3C,QAAQ,CAAC,QAAQ,CAAC,EAAE,MAAM,CAAC;IAC3B,8GAA8G;IAC9G,QAAQ,CAAC,MAAM,CAAC,EAAE,MAAM,CAAC;IACzB,0EAA0E;IAC1E,QAAQ,CAAC,OAAO,CAAC,EAAE,MAAM,CAAC;CACzB,GACD;IACA,QAAQ,CAAC,IAAI,EAAE,OAAO,CAAC;IACvB,QAAQ,CAAC,QAAQ,CAAC,EAAE,MAAM,CAAC;IAC3B,QAAQ,CAAC,MAAM,CAAC,EAAE,UAAU,CAAC;IAC7B,QAAQ,CAAC,OAAO,CAAC,EAAE,MAAM,CAAC;CACzB,CAAC;AAEL,MAAM,WAAW,WAAW;IAC3B,QAAQ,CAAC,IAAI,EAAE,QAAQ,GAAG,OAAO,CAAC;IAClC,kDAAkD;IAClD,QAAQ,CAAC,QAAQ,EAAE,MAAM,CAAC;IAC1B,QAAQ,CAAC,MAAM,EAAE,MAAM,CAAC;IACxB,QAAQ,CAAC,MAAM,EAAE,UAAU,CAAC;IAC5B,kCAAkC;IAClC,QAAQ,CAAC,OAAO,EAAE,MAAM,CAAC;CACzB;AAKD,6DAA6D;AAC7D,wBAAgB,WAAW,CAC1B,OAAO,EAAE,OAAO,GAAG,MAAM,GAAG,cAAc,GACxC,WAAW,GAAG,IAAI,CAgBpB;AAED,kHAAkH;AAClH,wBAAgB,YAAY,CAC3B,MAAM,EAAE,WAAW,EACnB,KAAK,EAAE,MAAM,EACb,KAAK,EAAE,MAAM,GACX,MAAM,CAGR"}

package/dist/core/motion/timing.js

@@ -0,0 +1,25 @@
+const DEFAULT_DURATION = 300;
+const MAX_STAGGER_TOTAL = 0.3;
+function chartTiming(animate) {
+  if (animate === false || animate === 0) return null;
+  const options = typeof animate === "object" ? animate : { duration: animate === true ? DEFAULT_DURATION : animate };
+  return {
+    type: options.type ?? "spring",
+    duration: (options.duration ?? DEFAULT_DURATION) / 1e3,
+    bounce: Math.min(
+      Math.max("bounce" in options ? options.bounce ?? 0 : 0, 0),
+      0.5
+    ),
+    easing: ("easing" in options ? options.easing : void 0) ?? "easeOut",
+    stagger: (options.stagger ?? 0) / 1e3
+  };
+}
+function staggerDelay(timing, index, count) {
+  if (timing.stagger === 0 || count < 2) return 0;
+  return index * Math.min(timing.stagger, MAX_STAGGER_TOTAL / (count - 1));
+}
+export {
+  chartTiming,
+  staggerDelay
+};
+//# sourceMappingURL=timing.js.map

package/dist/core/motion/timing.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../src/core/motion/timing.ts"],
+  "sourcesContent": ["import type { EasingName } from \"@voila.dev/motion\";\n\n/** How a data update moves: what `<Chart animate>` accepts beyond `true`, `false` and a duration. */\nexport type ChartAnimation =\n\t| {\n\t\t\treadonly type?: \"spring\";\n\t\t\t/** Perceived duration, in milliseconds. */\n\t\t\treadonly duration?: number;\n\t\t\t/** 0 never overshoots (the default: a bar past its value shows a number the data doesn't have); up to 0.5. */\n\t\t\treadonly bounce?: number;\n\t\t\t/** Milliseconds between marks in focus order, capped at 300 ms in all. */\n\t\t\treadonly stagger?: number;\n\t  }\n\t| {\n\t\t\treadonly type: \"tween\";\n\t\t\treadonly duration?: number;\n\t\t\treadonly easing?: EasingName;\n\t\t\treadonly stagger?: number;\n\t  };\n\nexport interface ChartTiming {\n\treadonly type: \"spring\" | \"tween\";\n\t/** Seconds, as the motion package counts them. */\n\treadonly duration: number;\n\treadonly bounce: number;\n\treadonly easing: EasingName;\n\t/** Seconds between neighbours. */\n\treadonly stagger: number;\n}\n\nconst DEFAULT_DURATION = 300;\nconst MAX_STAGGER_TOTAL = 0.3;\n\n/** The timing an `animate` prop means, or `null` to snap. */\nexport function chartTiming(\n\tanimate: boolean | number | ChartAnimation,\n): ChartTiming | null {\n\tif (animate === false || animate === 0) return null;\n\tconst options: ChartAnimation =\n\t\ttypeof animate === \"object\"\n\t\t\t? animate\n\t\t\t: { duration: animate === true ? DEFAULT_DURATION : animate };\n\treturn {\n\t\ttype: options.type ?? \"spring\",\n\t\tduration: (options.duration ?? DEFAULT_DURATION) / 1000,\n\t\tbounce: Math.min(\n\t\t\tMath.max(\"bounce\" in options ? (options.bounce ?? 0) : 0, 0),\n\t\t\t0.5,\n\t\t),\n\t\teasing: (\"easing\" in options ? options.easing : undefined) ?? \"easeOut\",\n\t\tstagger: (options.stagger ?? 0) / 1000,\n\t};\n}\n\n/** The delay of the `index`-th of `count` marks: the gap shrinks so the last one never waits more than 300 ms. */\nexport function staggerDelay(\n\ttiming: ChartTiming,\n\tindex: number,\n\tcount: number,\n): number {\n\tif (timing.stagger === 0 || count < 2) return 0;\n\treturn index * Math.min(timing.stagger, MAX_STAGGER_TOTAL / (count - 1));\n}\n"],
+  "mappings": "AA8BA,MAAM,mBAAmB;AACzB,MAAM,oBAAoB;AAGnB,SAAS,YACf,SACqB;AACrB,MAAI,YAAY,SAAS,YAAY,EAAG,QAAO;AAC/C,QAAM,UACL,OAAO,YAAY,WAChB,UACA,EAAE,UAAU,YAAY,OAAO,mBAAmB,QAAQ;AAC9D,SAAO;AAAA,IACN,MAAM,QAAQ,QAAQ;AAAA,IACtB,WAAW,QAAQ,YAAY,oBAAoB;AAAA,IACnD,QAAQ,KAAK;AAAA,MACZ,KAAK,IAAI,YAAY,UAAW,QAAQ,UAAU,IAAK,GAAG,CAAC;AAAA,MAC3D;AAAA,IACD;AAAA,IACA,SAAS,YAAY,UAAU,QAAQ,SAAS,WAAc;AAAA,IAC9D,UAAU,QAAQ,WAAW,KAAK;AAAA,EACnC;AACD;AAGO,SAAS,aACf,QACA,OACA,OACS;AACT,MAAI,OAAO,YAAY,KAAK,QAAQ,EAAG,QAAO;AAC9C,SAAO,QAAQ,KAAK,IAAI,OAAO,SAAS,qBAAqB,QAAQ,EAAE;AACxE;",
+  "names": []
+}

package/dist/core/motion/tween.d.ts

@@ -1,4 +1,6 @@
 import type { ChartScene } from "../types.js";
+/** Two paths can tween when only their numbers differ. */
+export declare function tweenPath(from: string, to: string, t: number): string;
 /** `to`, `t` of the way from `from` (0 is `from`, 1 is `to`). */
 export declare function tweenScene(from: ChartScene, to: ChartScene, t: number): ChartScene;
 /** Fast out, slow in: the motion settles rather than stops. */

package/dist/core/motion/tween.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"tween.d.ts","sourceRoot":"","sources":["../../../src/core/motion/tween.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAc,UAAU,EAAa,MAAM,iBAAiB,CAAC;AA+GzE,iEAAiE;AACjE,wBAAgB,UAAU,CACzB,IAAI,EAAE,UAAU,EAChB,EAAE,EAAE,UAAU,EACd,CAAC,EAAE,MAAM,GACP,UAAU,CASZ;AAED,+DAA+D;AAC/D,wBAAgB,YAAY,CAAC,CAAC,EAAE,MAAM,GAAG,MAAM,CAE9C"}
+{"version":3,"file":"tween.d.ts","sourceRoot":"","sources":["../../../src/core/motion/tween.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAc,UAAU,EAAa,MAAM,iBAAiB,CAAC;AAoBzE,0DAA0D;AAC1D,wBAAgB,SAAS,CAAC,IAAI,EAAE,MAAM,EAAE,EAAE,EAAE,MAAM,EAAE,CAAC,EAAE,MAAM,GAAG,MAAM,CAiBrE;AAyED,iEAAiE;AACjE,wBAAgB,UAAU,CACzB,IAAI,EAAE,UAAU,EAChB,EAAE,EAAE,UAAU,EACd,CAAC,EAAE,MAAM,GACP,UAAU,CASZ;AAED,+DAA+D;AAC/D,wBAAgB,YAAY,CAAC,CAAC,EAAE,MAAM,GAAG,MAAM,CAE9C"}

package/dist/core/motion/tween.js

@@ -93,6 +93,7 @@ function easeOutCubic(t) {
 }
 export {
   easeOutCubic,
+  tweenPath,
   tweenScene
 };
 //# sourceMappingURL=tween.js.map

package/dist/core/motion/tween.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/core/motion/tween.ts"],
-  "sourcesContent": ["import type { ChartPaint, ChartScene, SceneNode } from \"#/core/types.ts\";\n\n/**\n * A scene part of the way from one scene to the next, keyed by node: what an\n * animated update draws on each frame. It lives in the core so the SVG and\n * Canvas renderers animate identically, and never feeds hit-testing or\n * focus: those always read the scene being animated towards.\n *\n * A node present on both sides moves; a new one fades in; one that left is\n * gone at once (fading out a bar the data no longer has would show a value\n * that is not true any more). A path tweens point by point when both shapes\n * share their commands, and swaps at the end when they do not.\n */\n\nconst NUMBER = /-?\\d*\\.?\\d+(?:e[-+]?\\d+)?/gi;\n\nfunction mix(from: number, to: number, t: number): number {\n\treturn from + (to - from) * t;\n}\n\n/** Two paths can tween when only their numbers differ. */\nfunction tweenPath(from: string, to: string, t: number): string {\n\tconst fromNumbers = from.match(NUMBER);\n\tconst toNumbers = to.match(NUMBER);\n\tif (\n\t\tfromNumbers === null ||\n\t\ttoNumbers === null ||\n\t\tfromNumbers.length !== toNumbers.length ||\n\t\tfrom.replace(NUMBER, \"#\") !== to.replace(NUMBER, \"#\")\n\t) {\n\t\treturn t < 1 ? from : to;\n\t}\n\tlet index = 0;\n\treturn to.replace(NUMBER, () => {\n\t\tconst value = mix(Number(fromNumbers[index]), Number(toNumbers[index]), t);\n\t\tindex += 1;\n\t\treturn String(Math.round(value * 100) / 100);\n\t});\n}\n\nfunction fadeIn<TPaint extends ChartPaint>(paint: TPaint, t: number): TPaint {\n\treturn { ...paint, opacity: (paint.opacity ?? 1) * t };\n}\n\nfunction tweenNode(\n\tfrom: SceneNode | undefined,\n\tto: SceneNode,\n\tt: number,\n): SceneNode {\n\tif (from === undefined || from.kind !== to.kind) {\n\t\treturn to.kind === \"group\"\n\t\t\t? {\n\t\t\t\t\t...to,\n\t\t\t\t\tchildren: to.children.map((child) => tweenNode(undefined, child, t)),\n\t\t\t\t}\n\t\t\t: { ...to, paint: fadeIn(to.paint, t) };\n\t}\n\tswitch (to.kind) {\n\t\tcase \"group\": {\n\t\t\tconst before = new Map(\n\t\t\t\t(from as typeof to).children.map((child) => [child.key, child]),\n\t\t\t);\n\t\t\treturn {\n\t\t\t\t...to,\n\t\t\t\tchildren: to.children.map((child) =>\n\t\t\t\t\ttweenNode(before.get(child.key), child, t),\n\t\t\t\t),\n\t\t\t};\n\t\t}\n\t\tcase \"rect\": {\n\t\t\tconst previous = from as typeof to;\n\t\t\treturn {\n\t\t\t\t...to,\n\t\t\t\tx: mix(previous.x, to.x, t),\n\t\t\t\ty: mix(previous.y, to.y, t),\n\t\t\t\twidth: mix(previous.width, to.width, t),\n\t\t\t\theight: mix(previous.height, to.height, t),\n\t\t\t};\n\t\t}\n\t\tcase \"circle\": {\n\t\t\tconst previous = from as typeof to;\n\t\t\treturn {\n\t\t\t\t...to,\n\t\t\t\tcx: mix(previous.cx, to.cx, t),\n\t\t\t\tcy: mix(previous.cy, to.cy, t),\n\t\t\t\tr: mix(previous.r, to.r, t),\n\t\t\t};\n\t\t}\n\t\tcase \"line\": {\n\t\t\tconst previous = from as typeof to;\n\t\t\treturn {\n\t\t\t\t...to,\n\t\t\t\tx1: mix(previous.x1, to.x1, t),\n\t\t\t\ty1: mix(previous.y1, to.y1, t),\n\t\t\t\tx2: mix(previous.x2, to.x2, t),\n\t\t\t\ty2: mix(previous.y2, to.y2, t),\n\t\t\t};\n\t\t}\n\t\tcase \"text\": {\n\t\t\tconst previous = from as typeof to;\n\t\t\treturn {\n\t\t\t\t...to,\n\t\t\t\tx: mix(previous.x, to.x, t),\n\t\t\t\ty: mix(previous.y, to.y, t),\n\t\t\t};\n\t\t}\n\t\tcase \"path\":\n\t\t\treturn { ...to, d: tweenPath((from as typeof to).d, to.d, t) };\n\t}\n}\n\n/** `to`, `t` of the way from `from` (0 is `from`, 1 is `to`). */\nexport function tweenScene(\n\tfrom: ChartScene,\n\tto: ChartScene,\n\tt: number,\n): ChartScene {\n\tif (t >= 1) {\n\t\treturn to;\n\t}\n\tconst before = new Map(from.nodes.map((node) => [node.key, node]));\n\treturn {\n\t\t...to,\n\t\tnodes: to.nodes.map((node) => tweenNode(before.get(node.key), node, t)),\n\t};\n}\n\n/** Fast out, slow in: the motion settles rather than stops. */\nexport function easeOutCubic(t: number): number {\n\treturn 1 - (1 - t) ** 3;\n}\n"],
-  "mappings": "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",
+  "sourcesContent": ["import type { ChartPaint, ChartScene, SceneNode } from \"#/core/types.ts\";\n\n/**\n * A scene part of the way from one scene to the next, keyed by node: what an\n * animated update draws on each frame. It lives in the core so the SVG and\n * Canvas renderers animate identically, and never feeds hit-testing or\n * focus: those always read the scene being animated towards.\n *\n * A node present on both sides moves; a new one fades in; one that left is\n * gone at once (fading out a bar the data no longer has would show a value\n * that is not true any more). A path tweens point by point when both shapes\n * share their commands, and swaps at the end when they do not.\n */\n\nconst NUMBER = /-?\\d*\\.?\\d+(?:e[-+]?\\d+)?/gi;\n\nfunction mix(from: number, to: number, t: number): number {\n\treturn from + (to - from) * t;\n}\n\n/** Two paths can tween when only their numbers differ. */\nexport function tweenPath(from: string, to: string, t: number): string {\n\tconst fromNumbers = from.match(NUMBER);\n\tconst toNumbers = to.match(NUMBER);\n\tif (\n\t\tfromNumbers === null ||\n\t\ttoNumbers === null ||\n\t\tfromNumbers.length !== toNumbers.length ||\n\t\tfrom.replace(NUMBER, \"#\") !== to.replace(NUMBER, \"#\")\n\t) {\n\t\treturn t < 1 ? from : to;\n\t}\n\tlet index = 0;\n\treturn to.replace(NUMBER, () => {\n\t\tconst value = mix(Number(fromNumbers[index]), Number(toNumbers[index]), t);\n\t\tindex += 1;\n\t\treturn String(Math.round(value * 100) / 100);\n\t});\n}\n\nfunction fadeIn<TPaint extends ChartPaint>(paint: TPaint, t: number): TPaint {\n\treturn { ...paint, opacity: (paint.opacity ?? 1) * t };\n}\n\nfunction tweenNode(\n\tfrom: SceneNode | undefined,\n\tto: SceneNode,\n\tt: number,\n): SceneNode {\n\tif (from === undefined || from.kind !== to.kind) {\n\t\treturn to.kind === \"group\"\n\t\t\t? {\n\t\t\t\t\t...to,\n\t\t\t\t\tchildren: to.children.map((child) => tweenNode(undefined, child, t)),\n\t\t\t\t}\n\t\t\t: { ...to, paint: fadeIn(to.paint, t) };\n\t}\n\tswitch (to.kind) {\n\t\tcase \"group\": {\n\t\t\tconst before = new Map(\n\t\t\t\t(from as typeof to).children.map((child) => [child.key, child]),\n\t\t\t);\n\t\t\treturn {\n\t\t\t\t...to,\n\t\t\t\tchildren: to.children.map((child) =>\n\t\t\t\t\ttweenNode(before.get(child.key), child, t),\n\t\t\t\t),\n\t\t\t};\n\t\t}\n\t\tcase \"rect\": {\n\t\t\tconst previous = from as typeof to;\n\t\t\treturn {\n\t\t\t\t...to,\n\t\t\t\tx: mix(previous.x, to.x, t),\n\t\t\t\ty: mix(previous.y, to.y, t),\n\t\t\t\twidth: mix(previous.width, to.width, t),\n\t\t\t\theight: mix(previous.height, to.height, t),\n\t\t\t};\n\t\t}\n\t\tcase \"circle\": {\n\t\t\tconst previous = from as typeof to;\n\t\t\treturn {\n\t\t\t\t...to,\n\t\t\t\tcx: mix(previous.cx, to.cx, t),\n\t\t\t\tcy: mix(previous.cy, to.cy, t),\n\t\t\t\tr: mix(previous.r, to.r, t),\n\t\t\t};\n\t\t}\n\t\tcase \"line\": {\n\t\t\tconst previous = from as typeof to;\n\t\t\treturn {\n\t\t\t\t...to,\n\t\t\t\tx1: mix(previous.x1, to.x1, t),\n\t\t\t\ty1: mix(previous.y1, to.y1, t),\n\t\t\t\tx2: mix(previous.x2, to.x2, t),\n\t\t\t\ty2: mix(previous.y2, to.y2, t),\n\t\t\t};\n\t\t}\n\t\tcase \"text\": {\n\t\t\tconst previous = from as typeof to;\n\t\t\treturn {\n\t\t\t\t...to,\n\t\t\t\tx: mix(previous.x, to.x, t),\n\t\t\t\ty: mix(previous.y, to.y, t),\n\t\t\t};\n\t\t}\n\t\tcase \"path\":\n\t\t\treturn { ...to, d: tweenPath((from as typeof to).d, to.d, t) };\n\t}\n}\n\n/** `to`, `t` of the way from `from` (0 is `from`, 1 is `to`). */\nexport function tweenScene(\n\tfrom: ChartScene,\n\tto: ChartScene,\n\tt: number,\n): ChartScene {\n\tif (t >= 1) {\n\t\treturn to;\n\t}\n\tconst before = new Map(from.nodes.map((node) => [node.key, node]));\n\treturn {\n\t\t...to,\n\t\tnodes: to.nodes.map((node) => tweenNode(before.get(node.key), node, t)),\n\t};\n}\n\n/** Fast out, slow in: the motion settles rather than stops. */\nexport function easeOutCubic(t: number): number {\n\treturn 1 - (1 - t) ** 3;\n}\n"],
+  "mappings": "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",
   "names": []
 }

package/dist/index.d.ts

@@ -22,6 +22,8 @@ export { boxSummary, kernelDensity, linearFit, quantile, } from "./core/marks/st
 export { type WaffleOptions, waffleY } from "./core/marks/stats/waffle.js";
 export { type TextOptions, text } from "./core/marks/text.js";
 export { type TickOptions, tickX, tickY } from "./core/marks/tick.js";
+export { createMotionStore, type MotionStore, } from "./core/motion/motion-store.js";
+export { type ChartAnimation, type ChartTiming, chartTiming, } from "./core/motion/timing.js";
 export { easeOutCubic, tweenScene } from "./core/motion/tween.js";
 export { type ChartFocusStop, findNearest, focusStops, } from "./core/nearest.js";
 export { estimateTextWidth } from "./core/text.js";

package/dist/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,cAAc,EAAE,YAAY,EAAE,MAAM,mBAAmB,CAAC;AACtE,OAAO,EACN,KAAK,gBAAgB,EACrB,KAAK,iBAAiB,EACtB,KAAK,iBAAiB,EACtB,KAAK,eAAe,EACpB,KAAK,UAAU,EACf,KAAK,iBAAiB,EACtB,KAAK,yBAAyB,EAC9B,KAAK,SAAS,EACd,WAAW,GACX,MAAM,wBAAwB,CAAC;AAChC,OAAO,EAAE,KAAK,EAAE,MAAM,iBAAiB,CAAC;AACxC,OAAO,EAAE,UAAU,EAAE,YAAY,EAAE,WAAW,EAAE,MAAM,kBAAkB,CAAC;AACzE,OAAO,EAAE,KAAK,WAAW,EAAE,KAAK,EAAE,KAAK,EAAE,MAAM,sBAAsB,CAAC;AACtE,OAAO,EAAE,KAAK,UAAU,EAAE,IAAI,EAAE,IAAI,EAAE,MAAM,qBAAqB,CAAC;AAClE,OAAO,EAAE,KAAK,WAAW,EAAE,IAAI,EAAE,MAAM,sBAAsB,CAAC;AAC9D,OAAO,EAAE,KAAK,UAAU,EAAE,GAAG,EAAE,MAAM,qBAAqB,CAAC;AAC3D,OAAO,EAAE,KAAK,aAAa,EAAE,MAAM,EAAE,MAAM,wBAAwB,CAAC;AACpE,OAAO,EAAE,KAAK,WAAW,EAAE,KAAK,EAAE,KAAK,EAAE,MAAM,sBAAsB,CAAC;AACtE,OAAO,EACN,KAAK,UAAU,EACf,GAAG,EACH,KAAK,EACL,KAAK,YAAY,EACjB,KAAK,gBAAgB,EACrB,KAAK,EACL,SAAS,GACT,MAAM,uBAAuB,CAAC;AAC/B,OAAO,EAAE,KAAK,WAAW,EAAE,KAAK,EAAE,MAAM,sBAAsB,CAAC;AAC/D,OAAO,EAAE,KAAK,WAAW,EAAE,KAAK,EAAE,KAAK,EAAE,MAAM,sBAAsB,CAAC;AACtE,YAAY,EAAE,gBAAgB,EAAE,MAAM,wBAAwB,CAAC;AAC/D,OAAO,EACN,KAAK,iBAAiB,EACtB,WAAW,GACX,MAAM,kCAAkC,CAAC;AAC1C,OAAO,EACN,KAAK,UAAU,EACf,IAAI,EACJ,KAAK,gBAAgB,EACrB,SAAS,EACT,OAAO,GACP,MAAM,oCAAoC,CAAC;AAC5C,OAAO,EAAE,KAAK,YAAY,EAAE,MAAM,EAAE,MAAM,6BAA6B,CAAC;AACxE,OAAO,EAAE,KAAK,aAAa,EAAE,MAAM,EAAE,MAAM,8BAA8B,CAAC;AAC1E,OAAO,EACN,KAAK,gBAAgB,EACrB,SAAS,GACT,MAAM,iCAAiC,CAAC;AACzC,OAAO,EACN,KAAK,iBAAiB,EACtB,WAAW,GACX,MAAM,kCAAkC,CAAC;AAC1C,OAAO,EACN,UAAU,EACV,aAAa,EACb,SAAS,EACT,QAAQ,GACR,MAAM,kCAAkC,CAAC;AAC1C,OAAO,EAAE,KAAK,aAAa,EAAE,OAAO,EAAE,MAAM,8BAA8B,CAAC;AAC3E,OAAO,EAAE,KAAK,WAAW,EAAE,IAAI,EAAE,MAAM,sBAAsB,CAAC;AAC9D,OAAO,EAAE,KAAK,WAAW,EAAE,KAAK,EAAE,KAAK,EAAE,MAAM,sBAAsB,CAAC;AACtE,OAAO,EAAE,YAAY,EAAE,UAAU,EAAE,MAAM,wBAAwB,CAAC;AAClE,OAAO,EACN,KAAK,cAAc,EACnB,WAAW,EACX,UAAU,GACV,MAAM,mBAAmB,CAAC;AAC3B,OAAO,EAAE,iBAAiB,EAAE,MAAM,gBAAgB,CAAC;AACnD,OAAO,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAC;AAChD,mBAAmB,iBAAiB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"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"}

package/dist/index.js

@@ -43,6 +43,12 @@ import {
 import { waffleY } from "./core/marks/stats/waffle.js";
 import { text } from "./core/marks/text.js";
 import { tickX, tickY } from "./core/marks/tick.js";
+import {
+  createMotionStore
+} from "./core/motion/motion-store.js";
+import {
+  chartTiming
+} from "./core/motion/timing.js";
 import { easeOutCubic, tweenScene } from "./core/motion/tween.js";
 import {
   findNearest,
@@ -60,7 +66,9 @@ export {
   boxSummary,
   boxY,
   cell,
+  chartTiming,
   compileChart,
+  createMotionStore,
   defineChart,
   differenceY,
   dodgeY,

package/dist/index.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../src/index.ts"],
-  "sourcesContent": ["export { type CompileOptions, compileChart } from \"#/core/compile.ts\";\nexport {\n\ttype ChartAxisOptions,\n\ttype ChartBuildContext,\n\ttype ChartColorOptions,\n\ttype ChartDefinition,\n\ttype ChartFacet,\n\ttype ChartFacetOptions,\n\ttype ChartPositionScaleOptions,\n\ttype ChartSpec,\n\tdefineChart,\n} from \"#/core/define-chart.ts\";\nexport { facet } from \"#/core/facet.ts\";\nexport { formatDate, formatNumber, formatValue } from \"#/core/format.ts\";\nexport { type AreaOptions, areaX, areaY } from \"#/core/marks/area.ts\";\nexport { type BarOptions, barX, barY } from \"#/core/marks/bar.ts\";\nexport { type CellOptions, cell } from \"#/core/marks/cell.ts\";\nexport { type DotOptions, dot } from \"#/core/marks/dot.ts\";\nexport { type FunnelOptions, funnel } from \"#/core/marks/funnel.ts\";\nexport { type LineOptions, lineX, lineY } from \"#/core/marks/line.ts\";\nexport {\n\ttype ArcOptions,\n\tarc,\n\tdonut,\n\ttype RadarOptions,\n\ttype RadialBarOptions,\n\tradar,\n\tradialBar,\n} from \"#/core/marks/polar.ts\";\nexport { type RectOptions, rectY } from \"#/core/marks/rect.ts\";\nexport { type RuleOptions, ruleX, ruleY } from \"#/core/marks/rule.ts\";\nexport type { ChartMarkOptions } from \"#/core/marks/shared.ts\";\nexport {\n\ttype DifferenceOptions,\n\tdifferenceY,\n} from \"#/core/marks/stats/difference.ts\";\nexport {\n\ttype BoxOptions,\n\tboxY,\n\ttype RidgelineOptions,\n\tridgeline,\n\tviolinY,\n} from \"#/core/marks/stats/distribution.ts\";\nexport { type DodgeOptions, dodgeY } from \"#/core/marks/stats/dodge.ts\";\nexport { type HexbinOptions, hexbin } from \"#/core/marks/stats/hexbin.ts\";\nexport {\n\ttype HistogramOptions,\n\thistogram,\n} from \"#/core/marks/stats/histogram.ts\";\nexport {\n\ttype RegressionOptions,\n\tregressionY,\n} from \"#/core/marks/stats/regression.ts\";\nexport {\n\tboxSummary,\n\tkernelDensity,\n\tlinearFit,\n\tquantile,\n} from \"#/core/marks/stats/statistics.ts\";\nexport { type WaffleOptions, waffleY } from \"#/core/marks/stats/waffle.ts\";\nexport { type TextOptions, text } from \"#/core/marks/text.ts\";\nexport { type TickOptions, tickX, tickY } from \"#/core/marks/tick.ts\";\nexport { easeOutCubic, tweenScene } from \"#/core/motion/tween.ts\";\nexport {\n\ttype ChartFocusStop,\n\tfindNearest,\n\tfocusStops,\n} from \"#/core/nearest.ts\";\nexport { estimateTextWidth } from \"#/core/text.ts\";\nexport { DEFAULT_THEME } from \"#/core/theme.ts\";\nexport type * from \"#/core/types.ts\";\n"],
-  "mappings": "AAAA,SAA8B,oBAAoB;AAClD;AAAA,EASC;AAAA,OACM;AACP,SAAS,aAAa;AACtB,SAAS,YAAY,cAAc,mBAAmB;AACtD,SAA2B,OAAO,aAAa;AAC/C,SAA0B,MAAM,YAAY;AAC5C,SAA2B,YAAY;AACvC,SAA0B,WAAW;AACrC,SAA6B,cAAc;AAC3C,SAA2B,OAAO,aAAa;AAC/C;AAAA,EAEC;AAAA,EACA;AAAA,EAGA;AAAA,EACA;AAAA,OACM;AACP,SAA2B,aAAa;AACxC,SAA2B,OAAO,aAAa;AAE/C;AAAA,EAEC;AAAA,OACM;AACP;AAAA,EAEC;AAAA,EAEA;AAAA,EACA;AAAA,OACM;AACP,SAA4B,cAAc;AAC1C,SAA6B,cAAc;AAC3C;AAAA,EAEC;AAAA,OACM;AACP;AAAA,EAEC;AAAA,OACM;AACP;AAAA,EACC;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACM;AACP,SAA6B,eAAe;AAC5C,SAA2B,YAAY;AACvC,SAA2B,OAAO,aAAa;AAC/C,SAAS,cAAc,kBAAkB;AACzC;AAAA,EAEC;AAAA,EACA;AAAA,OACM;AACP,SAAS,yBAAyB;AAClC,SAAS,qBAAqB;",
+  "sourcesContent": ["export { type CompileOptions, compileChart } from \"#/core/compile.ts\";\nexport {\n\ttype ChartAxisOptions,\n\ttype ChartBuildContext,\n\ttype ChartColorOptions,\n\ttype ChartDefinition,\n\ttype ChartFacet,\n\ttype ChartFacetOptions,\n\ttype ChartPositionScaleOptions,\n\ttype ChartSpec,\n\tdefineChart,\n} from \"#/core/define-chart.ts\";\nexport { facet } from \"#/core/facet.ts\";\nexport { formatDate, formatNumber, formatValue } from \"#/core/format.ts\";\nexport { type AreaOptions, areaX, areaY } from \"#/core/marks/area.ts\";\nexport { type BarOptions, barX, barY } from \"#/core/marks/bar.ts\";\nexport { type CellOptions, cell } from \"#/core/marks/cell.ts\";\nexport { type DotOptions, dot } from \"#/core/marks/dot.ts\";\nexport { type FunnelOptions, funnel } from \"#/core/marks/funnel.ts\";\nexport { type LineOptions, lineX, lineY } from \"#/core/marks/line.ts\";\nexport {\n\ttype ArcOptions,\n\tarc,\n\tdonut,\n\ttype RadarOptions,\n\ttype RadialBarOptions,\n\tradar,\n\tradialBar,\n} from \"#/core/marks/polar.ts\";\nexport { type RectOptions, rectY } from \"#/core/marks/rect.ts\";\nexport { type RuleOptions, ruleX, ruleY } from \"#/core/marks/rule.ts\";\nexport type { ChartMarkOptions } from \"#/core/marks/shared.ts\";\nexport {\n\ttype DifferenceOptions,\n\tdifferenceY,\n} from \"#/core/marks/stats/difference.ts\";\nexport {\n\ttype BoxOptions,\n\tboxY,\n\ttype RidgelineOptions,\n\tridgeline,\n\tviolinY,\n} from \"#/core/marks/stats/distribution.ts\";\nexport { type DodgeOptions, dodgeY } from \"#/core/marks/stats/dodge.ts\";\nexport { type HexbinOptions, hexbin } from \"#/core/marks/stats/hexbin.ts\";\nexport {\n\ttype HistogramOptions,\n\thistogram,\n} from \"#/core/marks/stats/histogram.ts\";\nexport {\n\ttype RegressionOptions,\n\tregressionY,\n} from \"#/core/marks/stats/regression.ts\";\nexport {\n\tboxSummary,\n\tkernelDensity,\n\tlinearFit,\n\tquantile,\n} from \"#/core/marks/stats/statistics.ts\";\nexport { type WaffleOptions, waffleY } from \"#/core/marks/stats/waffle.ts\";\nexport { type TextOptions, text } from \"#/core/marks/text.ts\";\nexport { type TickOptions, tickX, tickY } from \"#/core/marks/tick.ts\";\nexport {\n\tcreateMotionStore,\n\ttype MotionStore,\n} from \"#/core/motion/motion-store.ts\";\nexport {\n\ttype ChartAnimation,\n\ttype ChartTiming,\n\tchartTiming,\n} from \"#/core/motion/timing.ts\";\nexport { easeOutCubic, tweenScene } from \"#/core/motion/tween.ts\";\nexport {\n\ttype ChartFocusStop,\n\tfindNearest,\n\tfocusStops,\n} from \"#/core/nearest.ts\";\nexport { estimateTextWidth } from \"#/core/text.ts\";\nexport { DEFAULT_THEME } from \"#/core/theme.ts\";\nexport type * from \"#/core/types.ts\";\n"],
+  "mappings": "AAAA,SAA8B,oBAAoB;AAClD;AAAA,EASC;AAAA,OACM;AACP,SAAS,aAAa;AACtB,SAAS,YAAY,cAAc,mBAAmB;AACtD,SAA2B,OAAO,aAAa;AAC/C,SAA0B,MAAM,YAAY;AAC5C,SAA2B,YAAY;AACvC,SAA0B,WAAW;AACrC,SAA6B,cAAc;AAC3C,SAA2B,OAAO,aAAa;AAC/C;AAAA,EAEC;AAAA,EACA;AAAA,EAGA;AAAA,EACA;AAAA,OACM;AACP,SAA2B,aAAa;AACxC,SAA2B,OAAO,aAAa;AAE/C;AAAA,EAEC;AAAA,OACM;AACP;AAAA,EAEC;AAAA,EAEA;AAAA,EACA;AAAA,OACM;AACP,SAA4B,cAAc;AAC1C,SAA6B,cAAc;AAC3C;AAAA,EAEC;AAAA,OACM;AACP;AAAA,EAEC;AAAA,OACM;AACP;AAAA,EACC;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACM;AACP,SAA6B,eAAe;AAC5C,SAA2B,YAAY;AACvC,SAA2B,OAAO,aAAa;AAC/C;AAAA,EACC;AAAA,OAEM;AACP;AAAA,EAGC;AAAA,OACM;AACP,SAAS,cAAc,kBAAkB;AACzC;AAAA,EAEC;AAAA,EACA;AAAA,OACM;AACP,SAAS,yBAAyB;AAClC,SAAS,qBAAqB;",
   "names": []
 }

package/dist/react/chart.d.ts

@@ -1,5 +1,6 @@
 import * as React from "react";
 import type { ChartDefinition } from "../core/define-chart.js";
+import { type ChartAnimation } from "../core/motion/timing.js";
 import type { ChartPoint } from "../core/types.js";
 import { type ChartBrush } from "./brush-contract.js";
 import { type ChartTooltipRenderProps } from "./chart-tooltip.js";
@@ -23,8 +24,12 @@ interface Props extends Omit<React.ComponentProps<"div">, "children" | "onSelect
     readonly legend?: boolean;
     /** The visually hidden table of the values. On by default; turn it off only when the page shows the same table. */
     readonly dataTable?: boolean;
-    /** Tween a data update, in milliseconds; `false` snaps. Reduced motion always snaps. */
-    readonly animate?: boolean | number;
+    /**
+     * How a data update moves: `true` (a spring with no bounce), a perceived
+     * duration in milliseconds, or `{ duration, bounce, stagger }` and
+     * `{ type: "tween", easing }`. `false` snaps; reduced motion always does.
+     */
+    readonly animate?: boolean | number | ChartAnimation;
     /**
      * Zoom a continuous x: the wheel while the chart has focus, + and −,
      * Shift and the arrows to pan, a drag to pan when zoomed, 0 to reset.

package/dist/react/chart.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"chart.d.ts","sourceRoot":"","sources":["../../src/react/chart.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,wBAAwB,CAAC;AAG9D,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,iBAAiB,CAAC;AAClD,OAAO,EACN,KAAK,UAAU,EAGf,MAAM,2BAA2B,CAAC;AAGnC,OAAO,EAGN,KAAK,uBAAuB,EAC5B,MAAM,2BAA2B,CAAC;AAGnC,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,qBAAqB,CAAC;AA6BzD,UAAU,KACT,SAAQ,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,EAAE,UAAU,GAAG,UAAU,GAAG,OAAO,CAAC;IAC5E,QAAQ,CAAC,UAAU,EAAE,eAAe,CAAC;IACrC,sFAAsF;IACtF,QAAQ,CAAC,SAAS,EAAE,MAAM,CAAC;IAC3B,4DAA4D;IAC5D,QAAQ,CAAC,eAAe,CAAC,EAAE,MAAM,CAAC;IAClC,iDAAiD;IACjD,QAAQ,CAAC,MAAM,CAAC,EAAE,MAAM,CAAC;IACzB,sEAAsE;IACtE,QAAQ,CAAC,WAAW,CAAC,EAAE,MAAM,CAAC;IAC9B,kGAAkG;IAClG,QAAQ,CAAC,YAAY,CAAC,EAAE,MAAM,CAAC;IAC/B,QAAQ,CAAC,QAAQ,CAAC,EAAE,aAAa,CAAC;IAClC,sEAAsE;IACtE,QAAQ,CAAC,OAAO,CAAC,EACd,OAAO,GACP,CAAC,CAAC,KAAK,EAAE,uBAAuB,KAAK,KAAK,CAAC,SAAS,CAAC,CAAC;IACzD,2DAA2D;IAC3D,QAAQ,CAAC,MAAM,CAAC,EAAE,OAAO,CAAC;IAC1B,mHAAmH;IACnH,QAAQ,CAAC,SAAS,CAAC,EAAE,OAAO,CAAC;IAC7B,wFAAwF;IACxF,QAAQ,CAAC,OAAO,CAAC,EAAE,OAAO,GAAG,MAAM,CAAC;IACpC;;;OAGG;IACH,QAAQ,CAAC,IAAI,CAAC,EAAE,OAAO,CAAC;IACxB,iHAAiH;IACjH,QAAQ,CAAC,KAAK,CAAC,EAAE,UAAU,CAAC;IAC5B,QAAQ,CAAC,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,UAAU,GAAG,IAAI,KAAK,IAAI,CAAC;IAC5D,QAAQ,CAAC,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,UAAU,GAAG,IAAI,KAAK,IAAI,CAAC;CACvD;AAOD;;;;GAIG;AACH,wBAAgB,KAAK,CAAC,EACrB,UAAU,EACV,SAAS,EACT,eAAe,EACf,MAAuB,EACvB,WAAW,EACX,YAAoC,EACpC,QAAQ,EAAE,QAAsB,EAChC,OAAc,EACd,MAAM,EACN,SAAgB,EAChB,OAAc,EACd,IAAY,EACZ,KAAK,EAAE,aAAa,EACpB,aAAa,EACb,QAAQ,EACR,KAAK,EACL,GAAG,KAAK,EACR,EAAE,KAAK,qBAwXP"}
+{"version":3,"file":"chart.d.ts","sourceRoot":"","sources":["../../src/react/chart.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,wBAAwB,CAAC;AAC9D,OAAO,EAAE,KAAK,cAAc,EAAe,MAAM,yBAAyB,CAAC;AAG3E,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,iBAAiB,CAAC;AAClD,OAAO,EACN,KAAK,UAAU,EAGf,MAAM,2BAA2B,CAAC;AAGnC,OAAO,EAGN,KAAK,uBAAuB,EAC5B,MAAM,2BAA2B,CAAC;AAGnC,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,qBAAqB,CAAC;AA4BzD,UAAU,KACT,SAAQ,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,EAAE,UAAU,GAAG,UAAU,GAAG,OAAO,CAAC;IAC5E,QAAQ,CAAC,UAAU,EAAE,eAAe,CAAC;IACrC,sFAAsF;IACtF,QAAQ,CAAC,SAAS,EAAE,MAAM,CAAC;IAC3B,4DAA4D;IAC5D,QAAQ,CAAC,eAAe,CAAC,EAAE,MAAM,CAAC;IAClC,iDAAiD;IACjD,QAAQ,CAAC,MAAM,CAAC,EAAE,MAAM,CAAC;IACzB,sEAAsE;IACtE,QAAQ,CAAC,WAAW,CAAC,EAAE,MAAM,CAAC;IAC9B,kGAAkG;IAClG,QAAQ,CAAC,YAAY,CAAC,EAAE,MAAM,CAAC;IAC/B,QAAQ,CAAC,QAAQ,CAAC,EAAE,aAAa,CAAC;IAClC,sEAAsE;IACtE,QAAQ,CAAC,OAAO,CAAC,EACd,OAAO,GACP,CAAC,CAAC,KAAK,EAAE,uBAAuB,KAAK,KAAK,CAAC,SAAS,CAAC,CAAC;IACzD,2DAA2D;IAC3D,QAAQ,CAAC,MAAM,CAAC,EAAE,OAAO,CAAC;IAC1B,mHAAmH;IACnH,QAAQ,CAAC,SAAS,CAAC,EAAE,OAAO,CAAC;IAC7B;;;;OAIG;IACH,QAAQ,CAAC,OAAO,CAAC,EAAE,OAAO,GAAG,MAAM,GAAG,cAAc,CAAC;IACrD;;;OAGG;IACH,QAAQ,CAAC,IAAI,CAAC,EAAE,OAAO,CAAC;IACxB,iHAAiH;IACjH,QAAQ,CAAC,KAAK,CAAC,EAAE,UAAU,CAAC;IAC5B,QAAQ,CAAC,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,UAAU,GAAG,IAAI,KAAK,IAAI,CAAC;IAC5D,QAAQ,CAAC,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,UAAU,GAAG,IAAI,KAAK,IAAI,CAAC;CACvD;AAOD;;;;GAIG;AACH,wBAAgB,KAAK,CAAC,EACrB,UAAU,EACV,SAAS,EACT,eAAe,EACf,MAAuB,EACvB,WAAW,EACX,YAAoC,EACpC,QAAQ,EAAE,QAAsB,EAChC,OAAc,EACd,MAAM,EACN,SAAgB,EAChB,OAAc,EACd,IAAY,EACZ,KAAK,EAAE,aAAa,EACpB,aAAa,EACb,QAAQ,EACR,KAAK,EACL,GAAG,KAAK,EACR,EAAE,KAAK,qBA0XP"}

package/dist/react/chart.js

@@ -1,6 +1,7 @@
 import { jsx, jsxs } from "react/jsx-runtime";
 import * as React from "react";
 import { compileChart } from "../core/compile.js";
+import { chartTiming } from "../core/motion/timing.js";
 import { findNearest, focusStops } from "../core/nearest.js";
 import { toNumber } from "../core/scales/continuous.js";
 import {
@@ -23,7 +24,6 @@ import { useChartZoom } from "./use-chart-zoom.js";
 import { useTextMeasurer } from "./use-text-measurer.js";
 const DEFAULT_HEIGHT = 300;
 const DEFAULT_INITIAL_WIDTH = 640;
-const DEFAULT_DURATION = 300;
 const CHART_CSS = `
 [data-slot="chart-surface"]:focus-visible{outline:2px solid var(--ring,Highlight);outline-offset:2px;border-radius:4px}
 @media (forced-colors:active){
@@ -106,11 +106,12 @@ function Chart({
     () => [definition, hidden],
     [definition, hidden]
   );
-  const shown = useAnimatedScene(
-    scene,
-    animationTrigger,
-    animate === false ? 0 : animate === true ? DEFAULT_DURATION : animate
+  const animateKey = JSON.stringify(animate);
+  const timing = React.useMemo(
+    () => chartTiming(JSON.parse(animateKey)),
+    [animateKey]
   );
+  const shown = useAnimatedScene(scene, animationTrigger, timing);
   const messages = messagesFor(scene.locale);
   const { active, handlers } = useChartFocus({
     stops,

package/dist/react/chart.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/react/chart.tsx"],
-  "sourcesContent": ["import * as React from \"react\";\nimport { compileChart } from \"#/core/compile.ts\";\nimport type { ChartDefinition } from \"#/core/define-chart.ts\";\nimport { findNearest, focusStops } from \"#/core/nearest.ts\";\nimport { toNumber } from \"#/core/scales/continuous.ts\";\nimport type { ChartPoint } from \"#/core/types.ts\";\nimport {\n\ttype ChartBrush,\n\ttype ChartBrushRange,\n\tordered,\n} from \"#/react/brush-contract.ts\";\nimport { ChartDataTable } from \"#/react/chart-data-table.tsx\";\nimport { ChartColorRamp, ChartLegend } from \"#/react/chart-legend.tsx\";\nimport {\n\tChartTooltip,\n\tChartTooltipContent,\n\ttype ChartTooltipRenderProps,\n} from \"#/react/chart-tooltip.tsx\";\nimport { FocusOverlay } from \"#/react/focus-overlay.tsx\";\nimport { messagesFor } from \"#/react/messages.ts\";\nimport type { ChartRenderer } from \"#/react/renderer.ts\";\nimport { SR_ONLY } from \"#/react/sr-only.ts\";\nimport { SvgRenderer } from \"#/react/svg-renderer.tsx\";\nimport { useAnimatedScene } from \"#/react/use-animated-scene.ts\";\nimport { useChartFocus } from \"#/react/use-chart-focus.ts\";\nimport { useChartWidth } from \"#/react/use-chart-width.ts\";\nimport { useChartZoom } from \"#/react/use-chart-zoom.ts\";\nimport { useTextMeasurer } from \"#/react/use-text-measurer.ts\";\n\nconst DEFAULT_HEIGHT = 300;\nconst DEFAULT_INITIAL_WIDTH = 640;\nconst DEFAULT_DURATION = 300;\n\n/** Focus ring, forced colours and reduced motion: what inline styles cannot say. */\nconst CHART_CSS = `\n[data-slot=\"chart-surface\"]:focus-visible{outline:2px solid var(--ring,Highlight);outline-offset:2px;border-radius:4px}\n@media (forced-colors:active){\n[data-slot=\"chart-svg\"] [data-role=\"axis\"],[data-slot=\"chart-svg\"] [data-role=\"axis-title\"]{fill:CanvasText}\n[data-slot=\"chart-svg\"] [data-role=\"grid\"]{stroke:GrayText}\n[data-slot=\"chart-focus-ring\"]{stroke:Highlight}\n[data-slot=\"chart-tooltip\"]{border-color:CanvasText}\n}\n@media (prefers-reduced-motion:no-preference){\n[data-slot=\"chart-tooltip\"]{transition:transform 80ms ease-out}\n}\n`;\n\n// `title` would put a native tooltip on the whole chart; the props carry the\n// accessible name as `ariaLabel` instead.\ninterface Props\n\textends Omit<React.ComponentProps<\"div\">, \"children\" | \"onSelect\" | \"title\"> {\n\treadonly definition: ChartDefinition;\n\t/** What the chart shows, in a sentence: the screen reader's name for it. Required. */\n\treadonly ariaLabel: string;\n\t/** The takeaway, when the label alone does not carry it. */\n\treadonly ariaDescription?: string;\n\t/** Pixels. Ignored when `aspectRatio` is set. */\n\treadonly height?: number;\n\t/** Height as a share of the width: `0.5` is twice as wide as tall. */\n\treadonly aspectRatio?: number;\n\t/** Width used on the server and for the first client render, before the container is measured. */\n\treadonly initialWidth?: number;\n\treadonly renderer?: ChartRenderer;\n\t/** `false` turns the tooltip off; a function replaces its content. */\n\treadonly tooltip?:\n\t\t| boolean\n\t\t| ((props: ChartTooltipRenderProps) => React.ReactNode);\n\t/** Shown by default when there is more than one series. */\n\treadonly legend?: boolean;\n\t/** The visually hidden table of the values. On by default; turn it off only when the page shows the same table. */\n\treadonly dataTable?: boolean;\n\t/** Tween a data update, in milliseconds; `false` snaps. Reduced motion always snaps. */\n\treadonly animate?: boolean | number;\n\t/**\n\t * Zoom a continuous x: the wheel while the chart has focus, + and \u2212,\n\t * Shift and the arrows to pan, a drag to pan when zoomed, 0 to reset.\n\t */\n\treadonly zoom?: boolean;\n\t/** Select a range of x by dragging or from the keyboard: `brushX({ onBrush })` from `@voila.dev/chart/brush`. */\n\treadonly brush?: ChartBrush;\n\treadonly onFocusChange?: (point: ChartPoint | null) => void;\n\treadonly onSelect?: (point: ChartPoint | null) => void;\n}\n\n/** A pointer that moved less than this between down and up clicked rather than dragged. */\nconst DRAG_THRESHOLD = 3;\nconst ZOOM_STEP = 0.8;\nconst PAN_SHARE = 0.1;\n\n/**\n * Draws a definition. Everything a reader needs beyond the picture comes with\n * it: keyboard focus on every value, a live region that reads the focused\n * value, a legend that toggles series, and the values as a hidden table.\n */\nexport function Chart({\n\tdefinition,\n\tariaLabel,\n\tariaDescription,\n\theight = DEFAULT_HEIGHT,\n\taspectRatio,\n\tinitialWidth = DEFAULT_INITIAL_WIDTH,\n\trenderer: Renderer = SvgRenderer,\n\ttooltip = true,\n\tlegend,\n\tdataTable = true,\n\tanimate = true,\n\tzoom = false,\n\tbrush: brushBehavior,\n\tonFocusChange,\n\tonSelect,\n\tstyle,\n\t...props\n}: Props) {\n\tconst chartId = React.useId().replaceAll(\":\", \"\");\n\tconst { ref, width, node } = useChartWidth(initialWidth);\n\tconst measureText = useTextMeasurer(node);\n\tconst [hidden, setHidden] = React.useState<ReadonlySet<string>>(\n\t\t() => new Set(),\n\t);\n\tconst chartHeight =\n\t\taspectRatio === undefined ? height : Math.round(width * aspectRatio);\n\n\tconst baseScene = React.useMemo(\n\t\t() =>\n\t\t\tcompileChart(definition, {\n\t\t\t\twidth,\n\t\t\t\theight: chartHeight,\n\t\t\t\tmeasureText,\n\t\t\t\thiddenSeries: hidden,\n\t\t\t}),\n\t\t[definition, width, chartHeight, measureText, hidden],\n\t);\n\tconst baseX = baseScene.scales.x;\n\tconst fullX = React.useMemo<readonly [number, number] | undefined>(\n\t\t() =>\n\t\t\tbaseX && baseX.kind !== \"band\" && baseX.kind !== \"point\"\n\t\t\t\t? [toNumber(baseX.domain[0]), toNumber(baseX.domain[1])]\n\t\t\t\t: undefined,\n\t\t[baseX],\n\t);\n\tconst viewport = useChartZoom(zoom ? fullX : undefined, definition);\n\tconst scene = React.useMemo(\n\t\t() =>\n\t\t\tviewport.domain === null\n\t\t\t\t? baseScene\n\t\t\t\t: compileChart(definition, {\n\t\t\t\t\t\twidth,\n\t\t\t\t\t\theight: chartHeight,\n\t\t\t\t\t\tmeasureText,\n\t\t\t\t\t\thiddenSeries: hidden,\n\t\t\t\t\t\txDomain: viewport.domain,\n\t\t\t\t\t}),\n\t\t[\n\t\t\tbaseScene,\n\t\t\tviewport.domain,\n\t\t\tdefinition,\n\t\t\twidth,\n\t\t\tchartHeight,\n\t\t\tmeasureText,\n\t\t\thidden,\n\t\t],\n\t);\n\tconst [brush, setBrush] = React.useState<ChartBrushRange | null>(null);\n\tconst [zoomAnnouncement, setZoomAnnouncement] = React.useState(\"\");\n\tconst drag = React.useRef<{\n\t\treadonly startX: number;\n\t\treadonly domain: readonly [number, number] | null;\n\t\tmoved: boolean;\n\t} | null>(null);\n\tconst stops = React.useMemo(() => focusStops(scene), [scene]);\n\tconst animationTrigger = React.useMemo(\n\t\t() => [definition, hidden],\n\t\t[definition, hidden],\n\t);\n\tconst shown = useAnimatedScene(\n\t\tscene,\n\t\tanimationTrigger,\n\t\tanimate === false ? 0 : animate === true ? DEFAULT_DURATION : animate,\n\t);\n\tconst messages = messagesFor(scene.locale);\n\tconst { active, handlers } = useChartFocus({\n\t\tstops,\n\t\torder: scene.focusOrder,\n\t\thitTest: (x, y) => findNearest(scene, stops, x, y),\n\t\tonFocusChange,\n\t\tonSelect,\n\t});\n\n\tconst xScale = scene.scales.x;\n\tconst xContinuous =\n\t\txScale !== undefined && xScale.kind !== \"band\" && xScale.kind !== \"point\";\n\n\tfunction updateBrush(range: ChartBrushRange | null) {\n\t\tsetBrush(range);\n\t\tbrushBehavior?.onBrush(range);\n\t}\n\n\tfunction localX(event: React.PointerEvent<HTMLElement>): number {\n\t\treturn event.clientX - event.currentTarget.getBoundingClientRect().left;\n\t}\n\n\tfunction onPointerDown(event: React.PointerEvent<HTMLDivElement>) {\n\t\tif (!brushBehavior && !(zoom && viewport.domain !== null)) {\n\t\t\treturn;\n\t\t}\n\t\tevent.currentTarget.setPointerCapture(event.pointerId);\n\t\t// A drag selects a range, not a value: the hover tooltip gives way.\n\t\thandlers.onPointerLeave();\n\t\tdrag.current = {\n\t\t\tstartX: localX(event),\n\t\t\tdomain: viewport.domain,\n\t\t\tmoved: false,\n\t\t};\n\t}\n\n\tfunction onPointerMove(event: React.PointerEvent<HTMLDivElement>) {\n\t\tconst current = drag.current;\n\t\tif (current === null || xScale === undefined) {\n\t\t\thandlers.onPointerMove(event);\n\t\t\treturn;\n\t\t}\n\t\tconst x = localX(event);\n\t\tif (Math.abs(x - current.startX) > DRAG_THRESHOLD) {\n\t\t\tcurrent.moved = true;\n\t\t}\n\t\tif (!current.moved) return;\n\t\tif (brushBehavior) {\n\t\t\tupdateBrush(\n\t\t\t\tordered(xScale, [xScale.invert(current.startX), xScale.invert(x)]),\n\t\t\t);\n\t\t} else if (current.domain !== null) {\n\t\t\tconst [from, to] = current.domain;\n\t\t\tconst perPixel = (to - from) / Math.max(1, scene.plot.width);\n\t\t\tviewport.pan(\n\t\t\t\t(current.startX - x) * perPixel -\n\t\t\t\t\t((viewport.domain?.[0] ?? from) - from),\n\t\t\t);\n\t\t}\n\t}\n\n\tfunction onPointerUp(event: React.PointerEvent<HTMLDivElement>) {\n\t\tif (\n\t\t\tdrag.current !== null &&\n\t\t\tevent.currentTarget.hasPointerCapture(event.pointerId)\n\t\t) {\n\t\t\tevent.currentTarget.releasePointerCapture(event.pointerId);\n\t\t}\n\t}\n\n\tfunction onClick(event: React.MouseEvent<HTMLDivElement>) {\n\t\tconst dragged = drag.current?.moved === true;\n\t\tdrag.current = null;\n\t\tif (!dragged) {\n\t\t\thandlers.onClick(event);\n\t\t}\n\t}\n\n\tfunction announceViewport(next: readonly [number, number] | null) {\n\t\tif (xScale === undefined) return;\n\t\tconst [from, to] = next ?? fullX ?? [0, 0];\n\t\tconst asValue = (value: number) =>\n\t\t\txScale.kind === \"time\" ? new Date(value) : value;\n\t\tsetZoomAnnouncement(\n\t\t\tmessages.showing(\n\t\t\t\txScale.format(asValue(from)),\n\t\t\t\txScale.format(asValue(to)),\n\t\t\t),\n\t\t);\n\t}\n\n\tfunction onKeyDown(event: React.KeyboardEvent<HTMLDivElement>) {\n\t\tif (zoom && xContinuous && fullX !== undefined) {\n\t\t\tconst focused = active?.point.xValue;\n\t\t\tconst [from, to] = viewport.domain ?? fullX;\n\t\t\tconst center =\n\t\t\t\tfocused === undefined ? (from + to) / 2 : toNumber(focused);\n\t\t\tif (event.key === \"+\" || event.key === \"=\") {\n\t\t\t\tevent.preventDefault();\n\t\t\t\tviewport.zoomAround(center, ZOOM_STEP);\n\t\t\t\treturn;\n\t\t\t}\n\t\t\tif (event.key === \"-\" || event.key === \"_\") {\n\t\t\t\tevent.preventDefault();\n\t\t\t\tviewport.zoomAround(center, 1 / ZOOM_STEP);\n\t\t\t\treturn;\n\t\t\t}\n\t\t\tif (event.key === \"0\") {\n\t\t\t\tevent.preventDefault();\n\t\t\t\tviewport.reset();\n\t\t\t\treturn;\n\t\t\t}\n\t\t\tif (\n\t\t\t\tevent.shiftKey &&\n\t\t\t\t(event.key === \"ArrowLeft\" || event.key === \"ArrowRight\")\n\t\t\t) {\n\t\t\t\tevent.preventDefault();\n\t\t\t\tviewport.pan(\n\t\t\t\t\t(event.key === \"ArrowRight\" ? 1 : -1) * viewport.span() * PAN_SHARE,\n\t\t\t\t);\n\t\t\t\treturn;\n\t\t\t}\n\t\t}\n\t\thandlers.onKeyDown(event);\n\t}\n\n\t// Moving the focus says the new value; the last zoom's message gives way.\n\tconst activeKey = active?.point.key;\n\t// biome-ignore lint/correctness/useExhaustiveDependencies: clears on a change of focused point only\n\tReact.useEffect(() => {\n\t\tsetZoomAnnouncement(\"\");\n\t}, [activeKey]);\n\n\tconst viewportKey = viewport.domain?.join(\":\") ?? \"full\";\n\tconst previousViewport = React.useRef(viewportKey);\n\t// biome-ignore lint/correctness/useExhaustiveDependencies: announce a change of viewport, once\n\tReact.useEffect(() => {\n\t\tif (previousViewport.current !== viewportKey) {\n\t\t\tpreviousViewport.current = viewportKey;\n\t\t\tannounceViewport(viewport.domain);\n\t\t}\n\t}, [viewportKey]);\n\n\t// The wheel zooms only while the chart has focus: scrolling past a chart\n\t// must keep scrolling the page.\n\tconst zoomRef = React.useRef({\n\t\tviewport,\n\t\txScale,\n\t\tenabled: zoom && xContinuous,\n\t});\n\tzoomRef.current = { viewport, xScale, enabled: zoom && xContinuous };\n\tReact.useEffect(() => {\n\t\tif (node === null) return;\n\t\tfunction onWheel(event: WheelEvent) {\n\t\t\tconst { viewport: current, xScale: scale, enabled } = zoomRef.current;\n\t\t\tif (\n\t\t\t\t!enabled ||\n\t\t\t\tscale === undefined ||\n\t\t\t\tdocument.activeElement !== node ||\n\t\t\t\tnode === null\n\t\t\t)\n\t\t\t\treturn;\n\t\t\tevent.preventDefault();\n\t\t\tconst x = event.clientX - node.getBoundingClientRect().left;\n\t\t\tcurrent.zoomAround(\n\t\t\t\ttoNumber(scale.invert(x)),\n\t\t\t\tevent.deltaY > 0 ? 1 / ZOOM_STEP : ZOOM_STEP,\n\t\t\t);\n\t\t}\n\t\tnode.addEventListener(\"wheel\", onWheel, { passive: false });\n\t\treturn () => node.removeEventListener(\"wheel\", onWheel);\n\t}, [node]);\n\n\tconst announcement =\n\t\tactive?.source === \"keyboard\"\n\t\t\t? `${active.point.title} : ${(active.stop.points.length > 1\n\t\t\t\t\t? active.stop.points\n\t\t\t\t\t: [active.point]\n\t\t\t\t)\n\t\t\t\t\t.map((point) => `${point.seriesLabel ?? scene.yLabel} ${point.value}`)\n\t\t\t\t\t.join(\", \")}`\n\t\t\t: \"\";\n\tconst showLegend = legend ?? scene.legend.length > 1;\n\tconst descriptionId = `${chartId}-description`;\n\tconst renderTooltip =\n\t\ttypeof tooltip === \"function\" ? tooltip : ChartTooltipContent;\n\n\tfunction toggle(key: string) {\n\t\tsetHidden((current) => {\n\t\t\tconst next = new Set(current);\n\t\t\tif (!next.delete(key)) {\n\t\t\t\tnext.add(key);\n\t\t\t}\n\t\t\treturn next;\n\t\t});\n\t}\n\n\treturn (\n\t\t<div\n\t\t\tdata-slot=\"chart\"\n\t\t\tstyle={{ display: \"grid\", gap: 8, ...style }}\n\t\t\t{...props}\n\t\t>\n\t\t\t<style href=\"voila-chart\" precedence=\"default\">\n\t\t\t\t{CHART_CSS}\n\t\t\t</style>\n\t\t\t<div\n\t\t\t\tdata-slot=\"chart-frame\"\n\t\t\t\tstyle={{ position: \"relative\", height: chartHeight }}\n\t\t\t>\n\t\t\t\t<div\n\t\t\t\t\tref={ref}\n\t\t\t\t\trole=\"img\"\n\t\t\t\t\taria-roledescription={messages.roleDescription}\n\t\t\t\t\taria-label={ariaLabel}\n\t\t\t\t\taria-describedby={descriptionId}\n\t\t\t\t\t// The chart is one focus stop; the arrow keys move inside it, the way\n\t\t\t\t\t// a reader walks the values. role=\"img\" keeps it a single named\n\t\t\t\t\t// graphic, the live region speaks the focused value.\n\t\t\t\t\t// biome-ignore lint/a11y/noNoninteractiveTabindex: keyboard exploration of the values\n\t\t\t\t\ttabIndex={0}\n\t\t\t\t\tdata-slot=\"chart-surface\"\n\t\t\t\t\tstyle={{\n\t\t\t\t\t\tposition: \"absolute\",\n\t\t\t\t\t\tinset: 0,\n\t\t\t\t\t\ttouchAction: brushBehavior || zoom ? \"none\" : \"pan-y\",\n\t\t\t\t\t\t// Dragging across the plot brushes or pans; without this it\n\t\t\t\t\t\t// also selected the tick labels and the tooltip as text.\n\t\t\t\t\t\t...(brushBehavior || zoom\n\t\t\t\t\t\t\t? { userSelect: \"none\", WebkitUserSelect: \"none\" }\n\t\t\t\t\t\t\t: {}),\n\t\t\t\t\t}}\n\t\t\t\t\t{...handlers}\n\t\t\t\t\tonKeyDown={onKeyDown}\n\t\t\t\t\tonPointerDown={onPointerDown}\n\t\t\t\t\tonPointerMove={onPointerMove}\n\t\t\t\t\tonPointerUp={onPointerUp}\n\t\t\t\t\tonClick={onClick}\n\t\t\t\t>\n\t\t\t\t\t<Renderer scene={shown} chartId={chartId} />\n\t\t\t\t\t<FocusOverlay scene={scene} active={active} theme={scene.theme} />\n\t\t\t\t\t{tooltip !== false && active !== null ? (\n\t\t\t\t\t\t<ChartTooltip\n\t\t\t\t\t\t\tactive={active}\n\t\t\t\t\t\t\tscene={scene}\n\t\t\t\t\t\t\trender={renderTooltip}\n\t\t\t\t\t\t/>\n\t\t\t\t\t) : null}\n\t\t\t\t</div>\n\t\t\t\t{brushBehavior && xScale ? (\n\t\t\t\t\t<brushBehavior.Layer\n\t\t\t\t\t\tscale={xScale}\n\t\t\t\t\t\tplot={scene.plot}\n\t\t\t\t\t\trange={brush}\n\t\t\t\t\t\tmessages={messages}\n\t\t\t\t\t\tonChange={updateBrush}\n\t\t\t\t\t/>\n\t\t\t\t) : null}\n\t\t\t</div>\n\t\t\t<div id={descriptionId} style={SR_ONLY}>\n\t\t\t\t{ariaDescription ? `${ariaDescription} ` : \"\"}\n\t\t\t\t{messages.keyboardHint}\n\t\t\t\t{zoom && xContinuous ? messages.zoomHint : \"\"}\n\t\t\t</div>\n\t\t\t<div aria-live=\"polite\" aria-atomic=\"true\" style={SR_ONLY}>\n\t\t\t\t{zoomAnnouncement || announcement}\n\t\t\t</div>\n\t\t\t{viewport.domain !== null ? (\n\t\t\t\t<button\n\t\t\t\t\ttype=\"button\"\n\t\t\t\t\tdata-slot=\"chart-reset-zoom\"\n\t\t\t\t\tonClick={() => viewport.reset()}\n\t\t\t\t\tstyle={{\n\t\t\t\t\t\tjustifySelf: \"end\",\n\t\t\t\t\t\tborder:\n\t\t\t\t\t\t\t\"1px solid var(--border, color-mix(in oklab, currentColor 20%, transparent))\",\n\t\t\t\t\t\tborderRadius: 6,\n\t\t\t\t\t\tbackground: \"transparent\",\n\t\t\t\t\t\tcolor: \"inherit\",\n\t\t\t\t\t\tfont: \"inherit\",\n\t\t\t\t\t\tfontSize: 12,\n\t\t\t\t\t\tpadding: \"2px 8px\",\n\t\t\t\t\t\tcursor: \"pointer\",\n\t\t\t\t\t}}\n\t\t\t\t>\n\t\t\t\t\t{messages.resetZoom}\n\t\t\t\t</button>\n\t\t\t) : null}\n\t\t\t{showLegend && scene.legend.length > 0 ? (\n\t\t\t\t<ChartLegend\n\t\t\t\t\titems={scene.legend}\n\t\t\t\t\thidden={hidden}\n\t\t\t\t\tlabel={messages.legend}\n\t\t\t\t\tonToggle={toggle}\n\t\t\t\t/>\n\t\t\t) : null}\n\t\t\t{scene.colorRamp && legend !== false ? (\n\t\t\t\t<ChartColorRamp ramp={scene.colorRamp} label={messages.legend} />\n\t\t\t) : null}\n\t\t\t{dataTable ? (\n\t\t\t\t<ChartDataTable\n\t\t\t\t\tscene={scene}\n\t\t\t\t\tstops={stops}\n\t\t\t\t\tcaption={messages.dataTable(ariaLabel)}\n\t\t\t\t\tseriesHeading={messages.series}\n\t\t\t\t/>\n\t\t\t) : null}\n\t\t</div>\n\t);\n}\n"],
-  "mappings": "AA8XG,cAOC,YAPD;AA9XH,YAAY,WAAW;AACvB,SAAS,oBAAoB;AAE7B,SAAS,aAAa,kBAAkB;AACxC,SAAS,gBAAgB;AAEzB;AAAA,EAGC;AAAA,OACM;AACP,SAAS,sBAAsB;AAC/B,SAAS,gBAAgB,mBAAmB;AAC5C;AAAA,EACC;AAAA,EACA;AAAA,OAEM;AACP,SAAS,oBAAoB;AAC7B,SAAS,mBAAmB;AAE5B,SAAS,eAAe;AACxB,SAAS,mBAAmB;AAC5B,SAAS,wBAAwB;AACjC,SAAS,qBAAqB;AAC9B,SAAS,qBAAqB;AAC9B,SAAS,oBAAoB;AAC7B,SAAS,uBAAuB;AAEhC,MAAM,iBAAiB;AACvB,MAAM,wBAAwB;AAC9B,MAAM,mBAAmB;AAGzB,MAAM,YAAY;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAmDlB,MAAM,iBAAiB;AACvB,MAAM,YAAY;AAClB,MAAM,YAAY;AAOX,SAAS,MAAM;AAAA,EACrB;AAAA,EACA;AAAA,EACA;AAAA,EACA,SAAS;AAAA,EACT;AAAA,EACA,eAAe;AAAA,EACf,UAAU,WAAW;AAAA,EACrB,UAAU;AAAA,EACV;AAAA,EACA,YAAY;AAAA,EACZ,UAAU;AAAA,EACV,OAAO;AAAA,EACP,OAAO;AAAA,EACP;AAAA,EACA;AAAA,EACA;AAAA,EACA,GAAG;AACJ,GAAU;AACT,QAAM,UAAU,MAAM,MAAM,EAAE,WAAW,KAAK,EAAE;AAChD,QAAM,EAAE,KAAK,OAAO,KAAK,IAAI,cAAc,YAAY;AACvD,QAAM,cAAc,gBAAgB,IAAI;AACxC,QAAM,CAAC,QAAQ,SAAS,IAAI,MAAM;AAAA,IACjC,MAAM,oBAAI,IAAI;AAAA,EACf;AACA,QAAM,cACL,gBAAgB,SAAY,SAAS,KAAK,MAAM,QAAQ,WAAW;AAEpE,QAAM,YAAY,MAAM;AAAA,IACvB,MACC,aAAa,YAAY;AAAA,MACxB;AAAA,MACA,QAAQ;AAAA,MACR;AAAA,MACA,cAAc;AAAA,IACf,CAAC;AAAA,IACF,CAAC,YAAY,OAAO,aAAa,aAAa,MAAM;AAAA,EACrD;AACA,QAAM,QAAQ,UAAU,OAAO;AAC/B,QAAM,QAAQ,MAAM;AAAA,IACnB,MACC,SAAS,MAAM,SAAS,UAAU,MAAM,SAAS,UAC9C,CAAC,SAAS,MAAM,OAAO,CAAC,CAAC,GAAG,SAAS,MAAM,OAAO,CAAC,CAAC,CAAC,IACrD;AAAA,IACJ,CAAC,KAAK;AAAA,EACP;AACA,QAAM,WAAW,aAAa,OAAO,QAAQ,QAAW,UAAU;AAClE,QAAM,QAAQ,MAAM;AAAA,IACnB,MACC,SAAS,WAAW,OACjB,YACA,aAAa,YAAY;AAAA,MACzB;AAAA,MACA,QAAQ;AAAA,MACR;AAAA,MACA,cAAc;AAAA,MACd,SAAS,SAAS;AAAA,IACnB,CAAC;AAAA,IACJ;AAAA,MACC;AAAA,MACA,SAAS;AAAA,MACT;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IACD;AAAA,EACD;AACA,QAAM,CAAC,OAAO,QAAQ,IAAI,MAAM,SAAiC,IAAI;AACrE,QAAM,CAAC,kBAAkB,mBAAmB,IAAI,MAAM,SAAS,EAAE;AACjE,QAAM,OAAO,MAAM,OAIT,IAAI;AACd,QAAM,QAAQ,MAAM,QAAQ,MAAM,WAAW,KAAK,GAAG,CAAC,KAAK,CAAC;AAC5D,QAAM,mBAAmB,MAAM;AAAA,IAC9B,MAAM,CAAC,YAAY,MAAM;AAAA,IACzB,CAAC,YAAY,MAAM;AAAA,EACpB;AACA,QAAM,QAAQ;AAAA,IACb;AAAA,IACA;AAAA,IACA,YAAY,QAAQ,IAAI,YAAY,OAAO,mBAAmB;AAAA,EAC/D;AACA,QAAM,WAAW,YAAY,MAAM,MAAM;AACzC,QAAM,EAAE,QAAQ,SAAS,IAAI,cAAc;AAAA,IAC1C;AAAA,IACA,OAAO,MAAM;AAAA,IACb,SAAS,CAAC,GAAG,MAAM,YAAY,OAAO,OAAO,GAAG,CAAC;AAAA,IACjD;AAAA,IACA;AAAA,EACD,CAAC;AAED,QAAM,SAAS,MAAM,OAAO;AAC5B,QAAM,cACL,WAAW,UAAa,OAAO,SAAS,UAAU,OAAO,SAAS;AAEnE,WAAS,YAAY,OAA+B;AACnD,aAAS,KAAK;AACd,mBAAe,QAAQ,KAAK;AAAA,EAC7B;AAEA,WAAS,OAAO,OAAgD;AAC/D,WAAO,MAAM,UAAU,MAAM,cAAc,sBAAsB,EAAE;AAAA,EACpE;AAEA,WAAS,cAAc,OAA2C;AACjE,QAAI,CAAC,iBAAiB,EAAE,QAAQ,SAAS,WAAW,OAAO;AAC1D;AAAA,IACD;AACA,UAAM,cAAc,kBAAkB,MAAM,SAAS;AAErD,aAAS,eAAe;AACxB,SAAK,UAAU;AAAA,MACd,QAAQ,OAAO,KAAK;AAAA,MACpB,QAAQ,SAAS;AAAA,MACjB,OAAO;AAAA,IACR;AAAA,EACD;AAEA,WAAS,cAAc,OAA2C;AACjE,UAAM,UAAU,KAAK;AACrB,QAAI,YAAY,QAAQ,WAAW,QAAW;AAC7C,eAAS,cAAc,KAAK;AAC5B;AAAA,IACD;AACA,UAAM,IAAI,OAAO,KAAK;AACtB,QAAI,KAAK,IAAI,IAAI,QAAQ,MAAM,IAAI,gBAAgB;AAClD,cAAQ,QAAQ;AAAA,IACjB;AACA,QAAI,CAAC,QAAQ,MAAO;AACpB,QAAI,eAAe;AAClB;AAAA,QACC,QAAQ,QAAQ,CAAC,OAAO,OAAO,QAAQ,MAAM,GAAG,OAAO,OAAO,CAAC,CAAC,CAAC;AAAA,MAClE;AAAA,IACD,WAAW,QAAQ,WAAW,MAAM;AACnC,YAAM,CAAC,MAAM,EAAE,IAAI,QAAQ;AAC3B,YAAM,YAAY,KAAK,QAAQ,KAAK,IAAI,GAAG,MAAM,KAAK,KAAK;AAC3D,eAAS;AAAA,SACP,QAAQ,SAAS,KAAK,aACpB,SAAS,SAAS,CAAC,KAAK,QAAQ;AAAA,MACpC;AAAA,IACD;AAAA,EACD;AAEA,WAAS,YAAY,OAA2C;AAC/D,QACC,KAAK,YAAY,QACjB,MAAM,cAAc,kBAAkB,MAAM,SAAS,GACpD;AACD,YAAM,cAAc,sBAAsB,MAAM,SAAS;AAAA,IAC1D;AAAA,EACD;AAEA,WAAS,QAAQ,OAAyC;AACzD,UAAM,UAAU,KAAK,SAAS,UAAU;AACxC,SAAK,UAAU;AACf,QAAI,CAAC,SAAS;AACb,eAAS,QAAQ,KAAK;AAAA,IACvB;AAAA,EACD;AAEA,WAAS,iBAAiB,MAAwC;AACjE,QAAI,WAAW,OAAW;AAC1B,UAAM,CAAC,MAAM,EAAE,IAAI,QAAQ,SAAS,CAAC,GAAG,CAAC;AACzC,UAAM,UAAU,CAAC,UAChB,OAAO,SAAS,SAAS,IAAI,KAAK,KAAK,IAAI;AAC5C;AAAA,MACC,SAAS;AAAA,QACR,OAAO,OAAO,QAAQ,IAAI,CAAC;AAAA,QAC3B,OAAO,OAAO,QAAQ,EAAE,CAAC;AAAA,MAC1B;AAAA,IACD;AAAA,EACD;AAEA,WAAS,UAAU,OAA4C;AAC9D,QAAI,QAAQ,eAAe,UAAU,QAAW;AAC/C,YAAM,UAAU,QAAQ,MAAM;AAC9B,YAAM,CAAC,MAAM,EAAE,IAAI,SAAS,UAAU;AACtC,YAAM,SACL,YAAY,UAAa,OAAO,MAAM,IAAI,SAAS,OAAO;AAC3D,UAAI,MAAM,QAAQ,OAAO,MAAM,QAAQ,KAAK;AAC3C,cAAM,eAAe;AACrB,iBAAS,WAAW,QAAQ,SAAS;AACrC;AAAA,MACD;AACA,UAAI,MAAM,QAAQ,OAAO,MAAM,QAAQ,KAAK;AAC3C,cAAM,eAAe;AACrB,iBAAS,WAAW,QAAQ,IAAI,SAAS;AACzC;AAAA,MACD;AACA,UAAI,MAAM,QAAQ,KAAK;AACtB,cAAM,eAAe;AACrB,iBAAS,MAAM;AACf;AAAA,MACD;AACA,UACC,MAAM,aACL,MAAM,QAAQ,eAAe,MAAM,QAAQ,eAC3C;AACD,cAAM,eAAe;AACrB,iBAAS;AAAA,WACP,MAAM,QAAQ,eAAe,IAAI,MAAM,SAAS,KAAK,IAAI;AAAA,QAC3D;AACA;AAAA,MACD;AAAA,IACD;AACA,aAAS,UAAU,KAAK;AAAA,EACzB;AAGA,QAAM,YAAY,QAAQ,MAAM;AAEhC,QAAM,UAAU,MAAM;AACrB,wBAAoB,EAAE;AAAA,EACvB,GAAG,CAAC,SAAS,CAAC;AAEd,QAAM,cAAc,SAAS,QAAQ,KAAK,GAAG,KAAK;AAClD,QAAM,mBAAmB,MAAM,OAAO,WAAW;AAEjD,QAAM,UAAU,MAAM;AACrB,QAAI,iBAAiB,YAAY,aAAa;AAC7C,uBAAiB,UAAU;AAC3B,uBAAiB,SAAS,MAAM;AAAA,IACjC;AAAA,EACD,GAAG,CAAC,WAAW,CAAC;AAIhB,QAAM,UAAU,MAAM,OAAO;AAAA,IAC5B;AAAA,IACA;AAAA,IACA,SAAS,QAAQ;AAAA,EAClB,CAAC;AACD,UAAQ,UAAU,EAAE,UAAU,QAAQ,SAAS,QAAQ,YAAY;AACnE,QAAM,UAAU,MAAM;AACrB,QAAI,SAAS,KAAM;AACnB,aAAS,QAAQ,OAAmB;AACnC,YAAM,EAAE,UAAU,SAAS,QAAQ,OAAO,QAAQ,IAAI,QAAQ;AAC9D,UACC,CAAC,WACD,UAAU,UACV,SAAS,kBAAkB,QAC3B,SAAS;AAET;AACD,YAAM,eAAe;AACrB,YAAM,IAAI,MAAM,UAAU,KAAK,sBAAsB,EAAE;AACvD,cAAQ;AAAA,QACP,SAAS,MAAM,OAAO,CAAC,CAAC;AAAA,QACxB,MAAM,SAAS,IAAI,IAAI,YAAY;AAAA,MACpC;AAAA,IACD;AACA,SAAK,iBAAiB,SAAS,SAAS,EAAE,SAAS,MAAM,CAAC;AAC1D,WAAO,MAAM,KAAK,oBAAoB,SAAS,OAAO;AAAA,EACvD,GAAG,CAAC,IAAI,CAAC;AAET,QAAM,eACL,QAAQ,WAAW,aAChB,GAAG,OAAO,MAAM,KAAK,OAAO,OAAO,KAAK,OAAO,SAAS,IACtD,OAAO,KAAK,SACZ,CAAC,OAAO,KAAK,GAEd,IAAI,CAAC,UAAU,GAAG,MAAM,eAAe,MAAM,MAAM,IAAI,MAAM,KAAK,EAAE,EACpE,KAAK,IAAI,CAAC,KACX;AACJ,QAAM,aAAa,UAAU,MAAM,OAAO,SAAS;AACnD,QAAM,gBAAgB,GAAG,OAAO;AAChC,QAAM,gBACL,OAAO,YAAY,aAAa,UAAU;AAE3C,WAAS,OAAO,KAAa;AAC5B,cAAU,CAAC,YAAY;AACtB,YAAM,OAAO,IAAI,IAAI,OAAO;AAC5B,UAAI,CAAC,KAAK,OAAO,GAAG,GAAG;AACtB,aAAK,IAAI,GAAG;AAAA,MACb;AACA,aAAO;AAAA,IACR,CAAC;AAAA,EACF;AAEA,SACC;AAAA,IAAC;AAAA;AAAA,MACA,aAAU;AAAA,MACV,OAAO,EAAE,SAAS,QAAQ,KAAK,GAAG,GAAG,MAAM;AAAA,MAC1C,GAAG;AAAA,MAEJ;AAAA,4BAAC,WAAM,MAAK,eAAc,YAAW,WACnC,qBACF;AAAA,QACA;AAAA,UAAC;AAAA;AAAA,YACA,aAAU;AAAA,YACV,OAAO,EAAE,UAAU,YAAY,QAAQ,YAAY;AAAA,YAEnD;AAAA;AAAA,gBAAC;AAAA;AAAA,kBACA;AAAA,kBACA,MAAK;AAAA,kBACL,wBAAsB,SAAS;AAAA,kBAC/B,cAAY;AAAA,kBACZ,oBAAkB;AAAA,kBAKlB,UAAU;AAAA,kBACV,aAAU;AAAA,kBACV,OAAO;AAAA,oBACN,UAAU;AAAA,oBACV,OAAO;AAAA,oBACP,aAAa,iBAAiB,OAAO,SAAS;AAAA;AAAA;AAAA,oBAG9C,GAAI,iBAAiB,OAClB,EAAE,YAAY,QAAQ,kBAAkB,OAAO,IAC/C,CAAC;AAAA,kBACL;AAAA,kBACC,GAAG;AAAA,kBACJ;AAAA,kBACA;AAAA,kBACA;AAAA,kBACA;AAAA,kBACA;AAAA,kBAEA;AAAA,wCAAC,YAAS,OAAO,OAAO,SAAkB;AAAA,oBAC1C,oBAAC,gBAAa,OAAc,QAAgB,OAAO,MAAM,OAAO;AAAA,oBAC/D,YAAY,SAAS,WAAW,OAChC;AAAA,sBAAC;AAAA;AAAA,wBACA;AAAA,wBACA;AAAA,wBACA,QAAQ;AAAA;AAAA,oBACT,IACG;AAAA;AAAA;AAAA,cACL;AAAA,cACC,iBAAiB,SACjB;AAAA,gBAAC,cAAc;AAAA,gBAAd;AAAA,kBACA,OAAO;AAAA,kBACP,MAAM,MAAM;AAAA,kBACZ,OAAO;AAAA,kBACP;AAAA,kBACA,UAAU;AAAA;AAAA,cACX,IACG;AAAA;AAAA;AAAA,QACL;AAAA,QACA,qBAAC,SAAI,IAAI,eAAe,OAAO,SAC7B;AAAA,4BAAkB,GAAG,eAAe,MAAM;AAAA,UAC1C,SAAS;AAAA,UACT,QAAQ,cAAc,SAAS,WAAW;AAAA,WAC5C;AAAA,QACA,oBAAC,SAAI,aAAU,UAAS,eAAY,QAAO,OAAO,SAChD,8BAAoB,cACtB;AAAA,QACC,SAAS,WAAW,OACpB;AAAA,UAAC;AAAA;AAAA,YACA,MAAK;AAAA,YACL,aAAU;AAAA,YACV,SAAS,MAAM,SAAS,MAAM;AAAA,YAC9B,OAAO;AAAA,cACN,aAAa;AAAA,cACb,QACC;AAAA,cACD,cAAc;AAAA,cACd,YAAY;AAAA,cACZ,OAAO;AAAA,cACP,MAAM;AAAA,cACN,UAAU;AAAA,cACV,SAAS;AAAA,cACT,QAAQ;AAAA,YACT;AAAA,YAEC,mBAAS;AAAA;AAAA,QACX,IACG;AAAA,QACH,cAAc,MAAM,OAAO,SAAS,IACpC;AAAA,UAAC;AAAA;AAAA,YACA,OAAO,MAAM;AAAA,YACb;AAAA,YACA,OAAO,SAAS;AAAA,YAChB,UAAU;AAAA;AAAA,QACX,IACG;AAAA,QACH,MAAM,aAAa,WAAW,QAC9B,oBAAC,kBAAe,MAAM,MAAM,WAAW,OAAO,SAAS,QAAQ,IAC5D;AAAA,QACH,YACA;AAAA,UAAC;AAAA;AAAA,YACA;AAAA,YACA;AAAA,YACA,SAAS,SAAS,UAAU,SAAS;AAAA,YACrC,eAAe,SAAS;AAAA;AAAA,QACzB,IACG;AAAA;AAAA;AAAA,EACL;AAEF;",
+  "sourcesContent": ["import * as React from \"react\";\nimport { compileChart } from \"#/core/compile.ts\";\nimport type { ChartDefinition } from \"#/core/define-chart.ts\";\nimport { type ChartAnimation, chartTiming } from \"#/core/motion/timing.ts\";\nimport { findNearest, focusStops } from \"#/core/nearest.ts\";\nimport { toNumber } from \"#/core/scales/continuous.ts\";\nimport type { ChartPoint } from \"#/core/types.ts\";\nimport {\n\ttype ChartBrush,\n\ttype ChartBrushRange,\n\tordered,\n} from \"#/react/brush-contract.ts\";\nimport { ChartDataTable } from \"#/react/chart-data-table.tsx\";\nimport { ChartColorRamp, ChartLegend } from \"#/react/chart-legend.tsx\";\nimport {\n\tChartTooltip,\n\tChartTooltipContent,\n\ttype ChartTooltipRenderProps,\n} from \"#/react/chart-tooltip.tsx\";\nimport { FocusOverlay } from \"#/react/focus-overlay.tsx\";\nimport { messagesFor } from \"#/react/messages.ts\";\nimport type { ChartRenderer } from \"#/react/renderer.ts\";\nimport { SR_ONLY } from \"#/react/sr-only.ts\";\nimport { SvgRenderer } from \"#/react/svg-renderer.tsx\";\nimport { useAnimatedScene } from \"#/react/use-animated-scene.ts\";\nimport { useChartFocus } from \"#/react/use-chart-focus.ts\";\nimport { useChartWidth } from \"#/react/use-chart-width.ts\";\nimport { useChartZoom } from \"#/react/use-chart-zoom.ts\";\nimport { useTextMeasurer } from \"#/react/use-text-measurer.ts\";\n\nconst DEFAULT_HEIGHT = 300;\nconst DEFAULT_INITIAL_WIDTH = 640;\n\n/** Focus ring, forced colours and reduced motion: what inline styles cannot say. */\nconst CHART_CSS = `\n[data-slot=\"chart-surface\"]:focus-visible{outline:2px solid var(--ring,Highlight);outline-offset:2px;border-radius:4px}\n@media (forced-colors:active){\n[data-slot=\"chart-svg\"] [data-role=\"axis\"],[data-slot=\"chart-svg\"] [data-role=\"axis-title\"]{fill:CanvasText}\n[data-slot=\"chart-svg\"] [data-role=\"grid\"]{stroke:GrayText}\n[data-slot=\"chart-focus-ring\"]{stroke:Highlight}\n[data-slot=\"chart-tooltip\"]{border-color:CanvasText}\n}\n@media (prefers-reduced-motion:no-preference){\n[data-slot=\"chart-tooltip\"]{transition:transform 80ms ease-out}\n}\n`;\n\n// `title` would put a native tooltip on the whole chart; the props carry the\n// accessible name as `ariaLabel` instead.\ninterface Props\n\textends Omit<React.ComponentProps<\"div\">, \"children\" | \"onSelect\" | \"title\"> {\n\treadonly definition: ChartDefinition;\n\t/** What the chart shows, in a sentence: the screen reader's name for it. Required. */\n\treadonly ariaLabel: string;\n\t/** The takeaway, when the label alone does not carry it. */\n\treadonly ariaDescription?: string;\n\t/** Pixels. Ignored when `aspectRatio` is set. */\n\treadonly height?: number;\n\t/** Height as a share of the width: `0.5` is twice as wide as tall. */\n\treadonly aspectRatio?: number;\n\t/** Width used on the server and for the first client render, before the container is measured. */\n\treadonly initialWidth?: number;\n\treadonly renderer?: ChartRenderer;\n\t/** `false` turns the tooltip off; a function replaces its content. */\n\treadonly tooltip?:\n\t\t| boolean\n\t\t| ((props: ChartTooltipRenderProps) => React.ReactNode);\n\t/** Shown by default when there is more than one series. */\n\treadonly legend?: boolean;\n\t/** The visually hidden table of the values. On by default; turn it off only when the page shows the same table. */\n\treadonly dataTable?: boolean;\n\t/**\n\t * How a data update moves: `true` (a spring with no bounce), a perceived\n\t * duration in milliseconds, or `{ duration, bounce, stagger }` and\n\t * `{ type: \"tween\", easing }`. `false` snaps; reduced motion always does.\n\t */\n\treadonly animate?: boolean | number | ChartAnimation;\n\t/**\n\t * Zoom a continuous x: the wheel while the chart has focus, + and \u2212,\n\t * Shift and the arrows to pan, a drag to pan when zoomed, 0 to reset.\n\t */\n\treadonly zoom?: boolean;\n\t/** Select a range of x by dragging or from the keyboard: `brushX({ onBrush })` from `@voila.dev/chart/brush`. */\n\treadonly brush?: ChartBrush;\n\treadonly onFocusChange?: (point: ChartPoint | null) => void;\n\treadonly onSelect?: (point: ChartPoint | null) => void;\n}\n\n/** A pointer that moved less than this between down and up clicked rather than dragged. */\nconst DRAG_THRESHOLD = 3;\nconst ZOOM_STEP = 0.8;\nconst PAN_SHARE = 0.1;\n\n/**\n * Draws a definition. Everything a reader needs beyond the picture comes with\n * it: keyboard focus on every value, a live region that reads the focused\n * value, a legend that toggles series, and the values as a hidden table.\n */\nexport function Chart({\n\tdefinition,\n\tariaLabel,\n\tariaDescription,\n\theight = DEFAULT_HEIGHT,\n\taspectRatio,\n\tinitialWidth = DEFAULT_INITIAL_WIDTH,\n\trenderer: Renderer = SvgRenderer,\n\ttooltip = true,\n\tlegend,\n\tdataTable = true,\n\tanimate = true,\n\tzoom = false,\n\tbrush: brushBehavior,\n\tonFocusChange,\n\tonSelect,\n\tstyle,\n\t...props\n}: Props) {\n\tconst chartId = React.useId().replaceAll(\":\", \"\");\n\tconst { ref, width, node } = useChartWidth(initialWidth);\n\tconst measureText = useTextMeasurer(node);\n\tconst [hidden, setHidden] = React.useState<ReadonlySet<string>>(\n\t\t() => new Set(),\n\t);\n\tconst chartHeight =\n\t\taspectRatio === undefined ? height : Math.round(width * aspectRatio);\n\n\tconst baseScene = React.useMemo(\n\t\t() =>\n\t\t\tcompileChart(definition, {\n\t\t\t\twidth,\n\t\t\t\theight: chartHeight,\n\t\t\t\tmeasureText,\n\t\t\t\thiddenSeries: hidden,\n\t\t\t}),\n\t\t[definition, width, chartHeight, measureText, hidden],\n\t);\n\tconst baseX = baseScene.scales.x;\n\tconst fullX = React.useMemo<readonly [number, number] | undefined>(\n\t\t() =>\n\t\t\tbaseX && baseX.kind !== \"band\" && baseX.kind !== \"point\"\n\t\t\t\t? [toNumber(baseX.domain[0]), toNumber(baseX.domain[1])]\n\t\t\t\t: undefined,\n\t\t[baseX],\n\t);\n\tconst viewport = useChartZoom(zoom ? fullX : undefined, definition);\n\tconst scene = React.useMemo(\n\t\t() =>\n\t\t\tviewport.domain === null\n\t\t\t\t? baseScene\n\t\t\t\t: compileChart(definition, {\n\t\t\t\t\t\twidth,\n\t\t\t\t\t\theight: chartHeight,\n\t\t\t\t\t\tmeasureText,\n\t\t\t\t\t\thiddenSeries: hidden,\n\t\t\t\t\t\txDomain: viewport.domain,\n\t\t\t\t\t}),\n\t\t[\n\t\t\tbaseScene,\n\t\t\tviewport.domain,\n\t\t\tdefinition,\n\t\t\twidth,\n\t\t\tchartHeight,\n\t\t\tmeasureText,\n\t\t\thidden,\n\t\t],\n\t);\n\tconst [brush, setBrush] = React.useState<ChartBrushRange | null>(null);\n\tconst [zoomAnnouncement, setZoomAnnouncement] = React.useState(\"\");\n\tconst drag = React.useRef<{\n\t\treadonly startX: number;\n\t\treadonly domain: readonly [number, number] | null;\n\t\tmoved: boolean;\n\t} | null>(null);\n\tconst stops = React.useMemo(() => focusStops(scene), [scene]);\n\tconst animationTrigger = React.useMemo(\n\t\t() => [definition, hidden],\n\t\t[definition, hidden],\n\t);\n\t// An inline `animate={{ \u2026 }}` object is read by value, not identity.\n\tconst animateKey = JSON.stringify(animate);\n\tconst timing = React.useMemo(\n\t\t() => chartTiming(JSON.parse(animateKey)),\n\t\t[animateKey],\n\t);\n\tconst shown = useAnimatedScene(scene, animationTrigger, timing);\n\tconst messages = messagesFor(scene.locale);\n\tconst { active, handlers } = useChartFocus({\n\t\tstops,\n\t\torder: scene.focusOrder,\n\t\thitTest: (x, y) => findNearest(scene, stops, x, y),\n\t\tonFocusChange,\n\t\tonSelect,\n\t});\n\n\tconst xScale = scene.scales.x;\n\tconst xContinuous =\n\t\txScale !== undefined && xScale.kind !== \"band\" && xScale.kind !== \"point\";\n\n\tfunction updateBrush(range: ChartBrushRange | null) {\n\t\tsetBrush(range);\n\t\tbrushBehavior?.onBrush(range);\n\t}\n\n\tfunction localX(event: React.PointerEvent<HTMLElement>): number {\n\t\treturn event.clientX - event.currentTarget.getBoundingClientRect().left;\n\t}\n\n\tfunction onPointerDown(event: React.PointerEvent<HTMLDivElement>) {\n\t\tif (!brushBehavior && !(zoom && viewport.domain !== null)) {\n\t\t\treturn;\n\t\t}\n\t\tevent.currentTarget.setPointerCapture(event.pointerId);\n\t\t// A drag selects a range, not a value: the hover tooltip gives way.\n\t\thandlers.onPointerLeave();\n\t\tdrag.current = {\n\t\t\tstartX: localX(event),\n\t\t\tdomain: viewport.domain,\n\t\t\tmoved: false,\n\t\t};\n\t}\n\n\tfunction onPointerMove(event: React.PointerEvent<HTMLDivElement>) {\n\t\tconst current = drag.current;\n\t\tif (current === null || xScale === undefined) {\n\t\t\thandlers.onPointerMove(event);\n\t\t\treturn;\n\t\t}\n\t\tconst x = localX(event);\n\t\tif (Math.abs(x - current.startX) > DRAG_THRESHOLD) {\n\t\t\tcurrent.moved = true;\n\t\t}\n\t\tif (!current.moved) return;\n\t\tif (brushBehavior) {\n\t\t\tupdateBrush(\n\t\t\t\tordered(xScale, [xScale.invert(current.startX), xScale.invert(x)]),\n\t\t\t);\n\t\t} else if (current.domain !== null) {\n\t\t\tconst [from, to] = current.domain;\n\t\t\tconst perPixel = (to - from) / Math.max(1, scene.plot.width);\n\t\t\tviewport.pan(\n\t\t\t\t(current.startX - x) * perPixel -\n\t\t\t\t\t((viewport.domain?.[0] ?? from) - from),\n\t\t\t);\n\t\t}\n\t}\n\n\tfunction onPointerUp(event: React.PointerEvent<HTMLDivElement>) {\n\t\tif (\n\t\t\tdrag.current !== null &&\n\t\t\tevent.currentTarget.hasPointerCapture(event.pointerId)\n\t\t) {\n\t\t\tevent.currentTarget.releasePointerCapture(event.pointerId);\n\t\t}\n\t}\n\n\tfunction onClick(event: React.MouseEvent<HTMLDivElement>) {\n\t\tconst dragged = drag.current?.moved === true;\n\t\tdrag.current = null;\n\t\tif (!dragged) {\n\t\t\thandlers.onClick(event);\n\t\t}\n\t}\n\n\tfunction announceViewport(next: readonly [number, number] | null) {\n\t\tif (xScale === undefined) return;\n\t\tconst [from, to] = next ?? fullX ?? [0, 0];\n\t\tconst asValue = (value: number) =>\n\t\t\txScale.kind === \"time\" ? new Date(value) : value;\n\t\tsetZoomAnnouncement(\n\t\t\tmessages.showing(\n\t\t\t\txScale.format(asValue(from)),\n\t\t\t\txScale.format(asValue(to)),\n\t\t\t),\n\t\t);\n\t}\n\n\tfunction onKeyDown(event: React.KeyboardEvent<HTMLDivElement>) {\n\t\tif (zoom && xContinuous && fullX !== undefined) {\n\t\t\tconst focused = active?.point.xValue;\n\t\t\tconst [from, to] = viewport.domain ?? fullX;\n\t\t\tconst center =\n\t\t\t\tfocused === undefined ? (from + to) / 2 : toNumber(focused);\n\t\t\tif (event.key === \"+\" || event.key === \"=\") {\n\t\t\t\tevent.preventDefault();\n\t\t\t\tviewport.zoomAround(center, ZOOM_STEP);\n\t\t\t\treturn;\n\t\t\t}\n\t\t\tif (event.key === \"-\" || event.key === \"_\") {\n\t\t\t\tevent.preventDefault();\n\t\t\t\tviewport.zoomAround(center, 1 / ZOOM_STEP);\n\t\t\t\treturn;\n\t\t\t}\n\t\t\tif (event.key === \"0\") {\n\t\t\t\tevent.preventDefault();\n\t\t\t\tviewport.reset();\n\t\t\t\treturn;\n\t\t\t}\n\t\t\tif (\n\t\t\t\tevent.shiftKey &&\n\t\t\t\t(event.key === \"ArrowLeft\" || event.key === \"ArrowRight\")\n\t\t\t) {\n\t\t\t\tevent.preventDefault();\n\t\t\t\tviewport.pan(\n\t\t\t\t\t(event.key === \"ArrowRight\" ? 1 : -1) * viewport.span() * PAN_SHARE,\n\t\t\t\t);\n\t\t\t\treturn;\n\t\t\t}\n\t\t}\n\t\thandlers.onKeyDown(event);\n\t}\n\n\t// Moving the focus says the new value; the last zoom's message gives way.\n\tconst activeKey = active?.point.key;\n\t// biome-ignore lint/correctness/useExhaustiveDependencies: clears on a change of focused point only\n\tReact.useEffect(() => {\n\t\tsetZoomAnnouncement(\"\");\n\t}, [activeKey]);\n\n\tconst viewportKey = viewport.domain?.join(\":\") ?? \"full\";\n\tconst previousViewport = React.useRef(viewportKey);\n\t// biome-ignore lint/correctness/useExhaustiveDependencies: announce a change of viewport, once\n\tReact.useEffect(() => {\n\t\tif (previousViewport.current !== viewportKey) {\n\t\t\tpreviousViewport.current = viewportKey;\n\t\t\tannounceViewport(viewport.domain);\n\t\t}\n\t}, [viewportKey]);\n\n\t// The wheel zooms only while the chart has focus: scrolling past a chart\n\t// must keep scrolling the page.\n\tconst zoomRef = React.useRef({\n\t\tviewport,\n\t\txScale,\n\t\tenabled: zoom && xContinuous,\n\t});\n\tzoomRef.current = { viewport, xScale, enabled: zoom && xContinuous };\n\tReact.useEffect(() => {\n\t\tif (node === null) return;\n\t\tfunction onWheel(event: WheelEvent) {\n\t\t\tconst { viewport: current, xScale: scale, enabled } = zoomRef.current;\n\t\t\tif (\n\t\t\t\t!enabled ||\n\t\t\t\tscale === undefined ||\n\t\t\t\tdocument.activeElement !== node ||\n\t\t\t\tnode === null\n\t\t\t)\n\t\t\t\treturn;\n\t\t\tevent.preventDefault();\n\t\t\tconst x = event.clientX - node.getBoundingClientRect().left;\n\t\t\tcurrent.zoomAround(\n\t\t\t\ttoNumber(scale.invert(x)),\n\t\t\t\tevent.deltaY > 0 ? 1 / ZOOM_STEP : ZOOM_STEP,\n\t\t\t);\n\t\t}\n\t\tnode.addEventListener(\"wheel\", onWheel, { passive: false });\n\t\treturn () => node.removeEventListener(\"wheel\", onWheel);\n\t}, [node]);\n\n\tconst announcement =\n\t\tactive?.source === \"keyboard\"\n\t\t\t? `${active.point.title} : ${(active.stop.points.length > 1\n\t\t\t\t\t? active.stop.points\n\t\t\t\t\t: [active.point]\n\t\t\t\t)\n\t\t\t\t\t.map((point) => `${point.seriesLabel ?? scene.yLabel} ${point.value}`)\n\t\t\t\t\t.join(\", \")}`\n\t\t\t: \"\";\n\tconst showLegend = legend ?? scene.legend.length > 1;\n\tconst descriptionId = `${chartId}-description`;\n\tconst renderTooltip =\n\t\ttypeof tooltip === \"function\" ? tooltip : ChartTooltipContent;\n\n\tfunction toggle(key: string) {\n\t\tsetHidden((current) => {\n\t\t\tconst next = new Set(current);\n\t\t\tif (!next.delete(key)) {\n\t\t\t\tnext.add(key);\n\t\t\t}\n\t\t\treturn next;\n\t\t});\n\t}\n\n\treturn (\n\t\t<div\n\t\t\tdata-slot=\"chart\"\n\t\t\tstyle={{ display: \"grid\", gap: 8, ...style }}\n\t\t\t{...props}\n\t\t>\n\t\t\t<style href=\"voila-chart\" precedence=\"default\">\n\t\t\t\t{CHART_CSS}\n\t\t\t</style>\n\t\t\t<div\n\t\t\t\tdata-slot=\"chart-frame\"\n\t\t\t\tstyle={{ position: \"relative\", height: chartHeight }}\n\t\t\t>\n\t\t\t\t<div\n\t\t\t\t\tref={ref}\n\t\t\t\t\trole=\"img\"\n\t\t\t\t\taria-roledescription={messages.roleDescription}\n\t\t\t\t\taria-label={ariaLabel}\n\t\t\t\t\taria-describedby={descriptionId}\n\t\t\t\t\t// The chart is one focus stop; the arrow keys move inside it, the way\n\t\t\t\t\t// a reader walks the values. role=\"img\" keeps it a single named\n\t\t\t\t\t// graphic, the live region speaks the focused value.\n\t\t\t\t\t// biome-ignore lint/a11y/noNoninteractiveTabindex: keyboard exploration of the values\n\t\t\t\t\ttabIndex={0}\n\t\t\t\t\tdata-slot=\"chart-surface\"\n\t\t\t\t\tstyle={{\n\t\t\t\t\t\tposition: \"absolute\",\n\t\t\t\t\t\tinset: 0,\n\t\t\t\t\t\ttouchAction: brushBehavior || zoom ? \"none\" : \"pan-y\",\n\t\t\t\t\t\t// Dragging across the plot brushes or pans; without this it\n\t\t\t\t\t\t// also selected the tick labels and the tooltip as text.\n\t\t\t\t\t\t...(brushBehavior || zoom\n\t\t\t\t\t\t\t? { userSelect: \"none\", WebkitUserSelect: \"none\" }\n\t\t\t\t\t\t\t: {}),\n\t\t\t\t\t}}\n\t\t\t\t\t{...handlers}\n\t\t\t\t\tonKeyDown={onKeyDown}\n\t\t\t\t\tonPointerDown={onPointerDown}\n\t\t\t\t\tonPointerMove={onPointerMove}\n\t\t\t\t\tonPointerUp={onPointerUp}\n\t\t\t\t\tonClick={onClick}\n\t\t\t\t>\n\t\t\t\t\t<Renderer scene={shown} chartId={chartId} />\n\t\t\t\t\t<FocusOverlay scene={scene} active={active} theme={scene.theme} />\n\t\t\t\t\t{tooltip !== false && active !== null ? (\n\t\t\t\t\t\t<ChartTooltip\n\t\t\t\t\t\t\tactive={active}\n\t\t\t\t\t\t\tscene={scene}\n\t\t\t\t\t\t\trender={renderTooltip}\n\t\t\t\t\t\t/>\n\t\t\t\t\t) : null}\n\t\t\t\t</div>\n\t\t\t\t{brushBehavior && xScale ? (\n\t\t\t\t\t<brushBehavior.Layer\n\t\t\t\t\t\tscale={xScale}\n\t\t\t\t\t\tplot={scene.plot}\n\t\t\t\t\t\trange={brush}\n\t\t\t\t\t\tmessages={messages}\n\t\t\t\t\t\tonChange={updateBrush}\n\t\t\t\t\t/>\n\t\t\t\t) : null}\n\t\t\t</div>\n\t\t\t<div id={descriptionId} style={SR_ONLY}>\n\t\t\t\t{ariaDescription ? `${ariaDescription} ` : \"\"}\n\t\t\t\t{messages.keyboardHint}\n\t\t\t\t{zoom && xContinuous ? messages.zoomHint : \"\"}\n\t\t\t</div>\n\t\t\t<div aria-live=\"polite\" aria-atomic=\"true\" style={SR_ONLY}>\n\t\t\t\t{zoomAnnouncement || announcement}\n\t\t\t</div>\n\t\t\t{viewport.domain !== null ? (\n\t\t\t\t<button\n\t\t\t\t\ttype=\"button\"\n\t\t\t\t\tdata-slot=\"chart-reset-zoom\"\n\t\t\t\t\tonClick={() => viewport.reset()}\n\t\t\t\t\tstyle={{\n\t\t\t\t\t\tjustifySelf: \"end\",\n\t\t\t\t\t\tborder:\n\t\t\t\t\t\t\t\"1px solid var(--border, color-mix(in oklab, currentColor 20%, transparent))\",\n\t\t\t\t\t\tborderRadius: 6,\n\t\t\t\t\t\tbackground: \"transparent\",\n\t\t\t\t\t\tcolor: \"inherit\",\n\t\t\t\t\t\tfont: \"inherit\",\n\t\t\t\t\t\tfontSize: 12,\n\t\t\t\t\t\tpadding: \"2px 8px\",\n\t\t\t\t\t\tcursor: \"pointer\",\n\t\t\t\t\t}}\n\t\t\t\t>\n\t\t\t\t\t{messages.resetZoom}\n\t\t\t\t</button>\n\t\t\t) : null}\n\t\t\t{showLegend && scene.legend.length > 0 ? (\n\t\t\t\t<ChartLegend\n\t\t\t\t\titems={scene.legend}\n\t\t\t\t\thidden={hidden}\n\t\t\t\t\tlabel={messages.legend}\n\t\t\t\t\tonToggle={toggle}\n\t\t\t\t/>\n\t\t\t) : null}\n\t\t\t{scene.colorRamp && legend !== false ? (\n\t\t\t\t<ChartColorRamp ramp={scene.colorRamp} label={messages.legend} />\n\t\t\t) : null}\n\t\t\t{dataTable ? (\n\t\t\t\t<ChartDataTable\n\t\t\t\t\tscene={scene}\n\t\t\t\t\tstops={stops}\n\t\t\t\t\tcaption={messages.dataTable(ariaLabel)}\n\t\t\t\t\tseriesHeading={messages.series}\n\t\t\t\t/>\n\t\t\t) : null}\n\t\t</div>\n\t);\n}\n"],
+  "mappings": "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",
   "names": []
 }

package/dist/react/use-animated-scene.d.ts

@@ -1,10 +1,11 @@
+import type { ChartTiming } from "../core/motion/timing.js";
 import type { ChartScene } from "../core/types.js";
 /**
  * The scene to draw this frame. A data change (`trigger` changed: a new
- * definition, a series toggled) tweens from what is on screen to the new
- * scene; a resize snaps, since watching bars slide while a window is dragged
- * helps no one. Reduced motion always snaps. An update that lands mid-tween
- * starts from the frame already painted, so nothing jumps.
+ * definition, a series toggled) moves from what is on screen to the new
+ * scene on springs; one landing mid-flight keeps every node's speed. A
+ * resize snaps, since watching bars slide while a window is dragged helps no
+ * one. Reduced motion always snaps.
  */
-export declare function useAnimatedScene(scene: ChartScene, trigger: unknown, duration: number): ChartScene;
+export declare function useAnimatedScene(scene: ChartScene, trigger: unknown, timing: ChartTiming | null): ChartScene;
 //# sourceMappingURL=use-animated-scene.d.ts.map

package/dist/react/use-animated-scene.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"use-animated-scene.d.ts","sourceRoot":"","sources":["../../src/react/use-animated-scene.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,iBAAiB,CAAC;AASlD;;;;;;GAMG;AACH,wBAAgB,gBAAgB,CAC/B,KAAK,EAAE,UAAU,EACjB,OAAO,EAAE,OAAO,EAChB,QAAQ,EAAE,MAAM,GACd,UAAU,CAkCZ"}
+{"version":3,"file":"use-animated-scene.d.ts","sourceRoot":"","sources":["../../src/react/use-animated-scene.ts"],"names":[],"mappings":"AAMA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,yBAAyB,CAAC;AAC3D,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,iBAAiB,CAAC;AAElD;;;;;;GAMG;AACH,wBAAgB,gBAAgB,CAC/B,KAAK,EAAE,UAAU,EACjB,OAAO,EAAE,OAAO,EAChB,MAAM,EAAE,WAAW,GAAG,IAAI,GACxB,UAAU,CAoCZ"}

package/dist/react/use-animated-scene.js

@@ -1,38 +1,38 @@
+import { cancelFrame, frame, shouldReduceMotion } from "@voila.dev/motion";
 import * as React from "react";
-import { easeOutCubic, tweenScene } from "../core/motion/tween.js";
-function prefersReducedMotion() {
-  return typeof window !== "undefined" && window.matchMedia?.("(prefers-reduced-motion: reduce)").matches === true;
-}
-function useAnimatedScene(scene, trigger, duration) {
+import {
+  createMotionStore
+} from "../core/motion/motion-store.js";
+function useAnimatedScene(scene, trigger, timing) {
   const [shown, setShown] = React.useState(scene);
-  const shownRef = React.useRef(scene);
   const triggerRef = React.useRef(trigger);
+  const storeRef = React.useRef(null);
   React.useLayoutEffect(() => {
     const changed = triggerRef.current !== trigger;
     triggerRef.current = trigger;
-    if (!changed || duration <= 0 || prefersReducedMotion()) {
-      shownRef.current = scene;
+    if (timing && storeRef.current?.timing !== timing) {
+      storeRef.current = { store: createMotionStore(scene, timing), timing };
+    }
+    const store = storeRef.current?.store;
+    if (!changed || !timing || !store || shouldReduceMotion()) {
+      store?.snap(scene);
       setShown(scene);
       return;
     }
-    const from = shownRef.current;
-    const first = tweenScene(from, scene, 0);
-    shownRef.current = first;
-    setShown(first);
-    const start = performance.now();
-    let frame = 0;
-    function step(now) {
-      const t = Math.min(1, (now - start) / duration);
-      const next = tweenScene(from, scene, easeOutCubic(t));
-      shownRef.current = next;
-      setShown(next);
-      if (t < 1) {
-        frame = requestAnimationFrame(step);
+    store.retarget(scene, performance.now());
+    function tick() {
+      const now = performance.now();
+      if (store?.settled(now)) {
+        cancelFrame(tick);
+        setShown(scene);
+        return;
       }
+      setShown(store?.frame(now) ?? scene);
     }
-    frame = requestAnimationFrame(step);
-    return () => cancelAnimationFrame(frame);
-  }, [scene, trigger, duration]);
+    tick();
+    frame.update(tick, true);
+    return () => cancelFrame(tick);
+  }, [scene, trigger, timing]);
   return shown;
 }
 export {

package/dist/react/use-animated-scene.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/react/use-animated-scene.ts"],
-  "sourcesContent": ["import * as React from \"react\";\nimport { easeOutCubic, tweenScene } from \"#/core/motion/tween.ts\";\nimport type { ChartScene } from \"#/core/types.ts\";\n\nfunction prefersReducedMotion(): boolean {\n\treturn (\n\t\ttypeof window !== \"undefined\" &&\n\t\twindow.matchMedia?.(\"(prefers-reduced-motion: reduce)\").matches === true\n\t);\n}\n\n/**\n * The scene to draw this frame. A data change (`trigger` changed: a new\n * definition, a series toggled) tweens from what is on screen to the new\n * scene; a resize snaps, since watching bars slide while a window is dragged\n * helps no one. Reduced motion always snaps. An update that lands mid-tween\n * starts from the frame already painted, so nothing jumps.\n */\nexport function useAnimatedScene(\n\tscene: ChartScene,\n\ttrigger: unknown,\n\tduration: number,\n): ChartScene {\n\tconst [shown, setShown] = React.useState(scene);\n\tconst shownRef = React.useRef(scene);\n\tconst triggerRef = React.useRef(trigger);\n\n\tReact.useLayoutEffect(() => {\n\t\tconst changed = triggerRef.current !== trigger;\n\t\ttriggerRef.current = trigger;\n\t\tif (!changed || duration <= 0 || prefersReducedMotion()) {\n\t\t\tshownRef.current = scene;\n\t\t\tsetShown(scene);\n\t\t\treturn;\n\t\t}\n\t\tconst from = shownRef.current;\n\t\t// Frame zero now, before paint: nodes that left are gone at once.\n\t\tconst first = tweenScene(from, scene, 0);\n\t\tshownRef.current = first;\n\t\tsetShown(first);\n\t\tconst start = performance.now();\n\t\tlet frame = 0;\n\t\tfunction step(now: number) {\n\t\t\tconst t = Math.min(1, (now - start) / duration);\n\t\t\tconst next = tweenScene(from, scene, easeOutCubic(t));\n\t\t\tshownRef.current = next;\n\t\t\tsetShown(next);\n\t\t\tif (t < 1) {\n\t\t\t\tframe = requestAnimationFrame(step);\n\t\t\t}\n\t\t}\n\t\tframe = requestAnimationFrame(step);\n\t\treturn () => cancelAnimationFrame(frame);\n\t}, [scene, trigger, duration]);\n\n\treturn shown;\n}\n"],
-  "mappings": "AAAA,YAAY,WAAW;AACvB,SAAS,cAAc,kBAAkB;AAGzC,SAAS,uBAAgC;AACxC,SACC,OAAO,WAAW,eAClB,OAAO,aAAa,kCAAkC,EAAE,YAAY;AAEtE;AASO,SAAS,iBACf,OACA,SACA,UACa;AACb,QAAM,CAAC,OAAO,QAAQ,IAAI,MAAM,SAAS,KAAK;AAC9C,QAAM,WAAW,MAAM,OAAO,KAAK;AACnC,QAAM,aAAa,MAAM,OAAO,OAAO;AAEvC,QAAM,gBAAgB,MAAM;AAC3B,UAAM,UAAU,WAAW,YAAY;AACvC,eAAW,UAAU;AACrB,QAAI,CAAC,WAAW,YAAY,KAAK,qBAAqB,GAAG;AACxD,eAAS,UAAU;AACnB,eAAS,KAAK;AACd;AAAA,IACD;AACA,UAAM,OAAO,SAAS;AAEtB,UAAM,QAAQ,WAAW,MAAM,OAAO,CAAC;AACvC,aAAS,UAAU;AACnB,aAAS,KAAK;AACd,UAAM,QAAQ,YAAY,IAAI;AAC9B,QAAI,QAAQ;AACZ,aAAS,KAAK,KAAa;AAC1B,YAAM,IAAI,KAAK,IAAI,IAAI,MAAM,SAAS,QAAQ;AAC9C,YAAM,OAAO,WAAW,MAAM,OAAO,aAAa,CAAC,CAAC;AACpD,eAAS,UAAU;AACnB,eAAS,IAAI;AACb,UAAI,IAAI,GAAG;AACV,gBAAQ,sBAAsB,IAAI;AAAA,MACnC;AAAA,IACD;AACA,YAAQ,sBAAsB,IAAI;AAClC,WAAO,MAAM,qBAAqB,KAAK;AAAA,EACxC,GAAG,CAAC,OAAO,SAAS,QAAQ,CAAC;AAE7B,SAAO;AACR;",
+  "sourcesContent": ["import { cancelFrame, frame, shouldReduceMotion } from \"@voila.dev/motion\";\nimport * as React from \"react\";\nimport {\n\tcreateMotionStore,\n\ttype MotionStore,\n} from \"#/core/motion/motion-store.ts\";\nimport type { ChartTiming } from \"#/core/motion/timing.ts\";\nimport type { ChartScene } from \"#/core/types.ts\";\n\n/**\n * The scene to draw this frame. A data change (`trigger` changed: a new\n * definition, a series toggled) moves from what is on screen to the new\n * scene on springs; one landing mid-flight keeps every node's speed. A\n * resize snaps, since watching bars slide while a window is dragged helps no\n * one. Reduced motion always snaps.\n */\nexport function useAnimatedScene(\n\tscene: ChartScene,\n\ttrigger: unknown,\n\ttiming: ChartTiming | null,\n): ChartScene {\n\tconst [shown, setShown] = React.useState(scene);\n\tconst triggerRef = React.useRef(trigger);\n\tconst storeRef = React.useRef<{\n\t\tstore: MotionStore;\n\t\ttiming: ChartTiming;\n\t} | null>(null);\n\n\tReact.useLayoutEffect(() => {\n\t\tconst changed = triggerRef.current !== trigger;\n\t\ttriggerRef.current = trigger;\n\t\tif (timing && storeRef.current?.timing !== timing) {\n\t\t\tstoreRef.current = { store: createMotionStore(scene, timing), timing };\n\t\t}\n\t\tconst store = storeRef.current?.store;\n\t\tif (!changed || !timing || !store || shouldReduceMotion()) {\n\t\t\tstore?.snap(scene);\n\t\t\tsetShown(scene);\n\t\t\treturn;\n\t\t}\n\t\tstore.retarget(scene, performance.now());\n\t\tfunction tick() {\n\t\t\tconst now = performance.now();\n\t\t\tif (store?.settled(now)) {\n\t\t\t\tcancelFrame(tick);\n\t\t\t\tsetShown(scene);\n\t\t\t\treturn;\n\t\t\t}\n\t\t\tsetShown(store?.frame(now) ?? scene);\n\t\t}\n\t\ttick();\n\t\tframe.update(tick, true);\n\t\treturn () => cancelFrame(tick);\n\t}, [scene, trigger, timing]);\n\n\treturn shown;\n}\n"],
+  "mappings": "AAAA,SAAS,aAAa,OAAO,0BAA0B;AACvD,YAAY,WAAW;AACvB;AAAA,EACC;AAAA,OAEM;AAWA,SAAS,iBACf,OACA,SACA,QACa;AACb,QAAM,CAAC,OAAO,QAAQ,IAAI,MAAM,SAAS,KAAK;AAC9C,QAAM,aAAa,MAAM,OAAO,OAAO;AACvC,QAAM,WAAW,MAAM,OAGb,IAAI;AAEd,QAAM,gBAAgB,MAAM;AAC3B,UAAM,UAAU,WAAW,YAAY;AACvC,eAAW,UAAU;AACrB,QAAI,UAAU,SAAS,SAAS,WAAW,QAAQ;AAClD,eAAS,UAAU,EAAE,OAAO,kBAAkB,OAAO,MAAM,GAAG,OAAO;AAAA,IACtE;AACA,UAAM,QAAQ,SAAS,SAAS;AAChC,QAAI,CAAC,WAAW,CAAC,UAAU,CAAC,SAAS,mBAAmB,GAAG;AAC1D,aAAO,KAAK,KAAK;AACjB,eAAS,KAAK;AACd;AAAA,IACD;AACA,UAAM,SAAS,OAAO,YAAY,IAAI,CAAC;AACvC,aAAS,OAAO;AACf,YAAM,MAAM,YAAY,IAAI;AAC5B,UAAI,OAAO,QAAQ,GAAG,GAAG;AACxB,oBAAY,IAAI;AAChB,iBAAS,KAAK;AACd;AAAA,MACD;AACA,eAAS,OAAO,MAAM,GAAG,KAAK,KAAK;AAAA,IACpC;AACA,SAAK;AACL,UAAM,OAAO,MAAM,IAAI;AACvB,WAAO,MAAM,YAAY,IAAI;AAAA,EAC9B,GAAG,CAAC,OAAO,SAAS,MAAM,CAAC;AAE3B,SAAO;AACR;",
   "names": []
 }

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@voila.dev/chart",
-	"version": "5.0.113",
+	"version": "5.0.114",
 	"type": "module",
 	"description": "Charts as data: a definition of marks, channels and scales, drawn to SVG or Canvas, keyboard and screen-reader accessible. The core has no dependencies; the heavy layouts (geo, hierarchy, sankey…) sit behind their own subpaths.",
 	"license": "MIT",
@@ -64,6 +64,7 @@
 	},
 	"sideEffects": false,
 	"dependencies": {
+		"@voila.dev/motion": "5.0.114",
 		"d3-contour": "4.0.2",
 		"d3-delaunay": "6.0.4",
 		"d3-force": "3.0.0",

package/src/core/motion/motion-store.ts

@@ -0,0 +1,226 @@
+import { type Generator, spring, tween } from "@voila.dev/motion";
+import { type ChartTiming, staggerDelay } from "#/core/motion/timing.ts";
+import { tweenPath } from "#/core/motion/tween.ts";
+import type { ChartScene, SceneNode } from "#/core/types.ts";
+
+/**
+ * Every moving number of a chart, as springs keyed by node and channel. A
+ * new scene retargets them: each channel starts from where it is painted, at
+ * the speed it has, so an update landing mid-flight bends the motion instead
+ * of kinking it. Pure and clocked from outside (milliseconds), so the SVG and
+ * Canvas renderers move identically and tests step it by hand. Hit-testing
+ * and focus never read it: they read the scene it moves towards.
+ */
+export interface MotionStore {
+	retarget(scene: ChartScene, now: number): void;
+	/** Jumps to `scene`: a resize, or reduced motion. */
+	snap(scene: ChartScene): void;
+	frame(now: number): ChartScene;
+	settled(now: number): boolean;
+}
+
+interface Motion {
+	readonly generator: Generator;
+	/** Milliseconds, the delay included. */
+	readonly start: number;
+}
+
+interface PathMotion extends Motion {
+	readonly from: string;
+	readonly to: string;
+}
+
+type Numeric = Record<string, number>;
+
+const CHANNELS: Record<SceneNode["kind"], readonly string[]> = {
+	rect: ["x", "y", "width", "height"],
+	circle: ["cx", "cy", "r"],
+	line: ["x1", "y1", "x2", "y2"],
+	text: ["x", "y"],
+	path: [],
+	group: [],
+};
+
+const OPACITY = "opacity";
+
+function flatten(
+	nodes: readonly SceneNode[],
+	into = new Map<string, SceneNode>(),
+) {
+	for (const node of nodes) {
+		into.set(node.key, node);
+		if (node.kind === "group") flatten(node.children, into);
+	}
+	return into;
+}
+
+function channelKey(node: string, channel: string): string {
+	return `${node}\u0000${channel}`;
+}
+
+function elapsed(motion: Motion, now: number): number {
+	return Math.max(0, (now - motion.start) / 1000);
+}
+
+function done(motion: Motion, now: number): boolean {
+	return elapsed(motion, now) >= motion.generator.duration;
+}
+
+export function createMotionStore(
+	initial: ChartScene,
+	timing: ChartTiming,
+): MotionStore {
+	let target = initial;
+	const numbers = new Map<string, Motion>();
+	const paths = new Map<string, PathMotion>();
+
+	function generator(from: number, to: number, velocity: number): Generator {
+		return timing.type === "spring"
+			? spring({
+					from,
+					to,
+					velocity,
+					duration: timing.duration,
+					bounce: timing.bounce,
+				})
+			: tween({
+					keyframes: [from, to],
+					duration: timing.duration,
+					ease: timing.easing,
+				});
+	}
+
+	function pathNow(key: string, fallback: string | undefined, now: number) {
+		const motion = paths.get(key);
+		if (!motion) return fallback;
+		return tweenPath(
+			motion.from,
+			motion.to,
+			motion.generator.at(elapsed(motion, now)).value,
+		);
+	}
+
+	function moveNode(
+		node: SceneNode,
+		before: SceneNode | undefined,
+		start: number,
+		now: number,
+	) {
+		for (const channel of CHANNELS[node.kind]) {
+			const key = channelKey(node.key, channel);
+			const running = numbers.get(key);
+			const state = running?.generator.at(elapsed(running, now));
+			const from =
+				state?.value ?? (before as unknown as Numeric | undefined)?.[channel];
+			const to = (node as unknown as Numeric)[channel] as number;
+			numbers.delete(key);
+			if (from === undefined || (from === to && !state?.velocity)) continue;
+			numbers.set(key, {
+				generator: generator(from, to, state?.velocity ?? 0),
+				start,
+			});
+		}
+		if (node.kind === "path") {
+			const from = pathNow(
+				node.key,
+				before?.kind === "path" ? before.d : undefined,
+				now,
+			);
+			paths.delete(node.key);
+			if (from !== undefined && from !== node.d) {
+				paths.set(node.key, {
+					generator: generator(0, 1, 0),
+					start,
+					from,
+					to: node.d,
+				});
+			}
+		}
+		const fading = channelKey(node.key, OPACITY);
+		const fade = numbers.get(fading);
+		if (before === undefined || fade) {
+			const from = fade ? fade.generator.at(elapsed(fade, now)).value : 0;
+			numbers.set(fading, { generator: generator(from, 1, 0), start });
+		}
+	}
+
+	function paint(node: SceneNode, now: number): SceneNode {
+		if (node.kind === "group") {
+			return {
+				...node,
+				children: node.children.map((child) => paint(child, now)),
+			};
+		}
+		const moved: Numeric = {};
+		for (const channel of [...CHANNELS[node.kind], OPACITY]) {
+			const motion = numbers.get(channelKey(node.key, channel));
+			if (!motion) continue;
+			moved[channel] = motion.generator.at(elapsed(motion, now)).value;
+		}
+		const d = node.kind === "path" ? pathNow(node.key, node.d, now) : undefined;
+		const { [OPACITY]: opacity, ...geometry } = moved;
+		const next = {
+			...node,
+			...geometry,
+			...(d === undefined ? {} : { d }),
+		} as SceneNode;
+		if (opacity === undefined) return next;
+		const shown = Math.min(1, Math.max(0, opacity));
+		const painted = next as Exclude<SceneNode, { kind: "group" }>;
+		return {
+			...painted,
+			paint: {
+				...painted.paint,
+				opacity: (painted.paint.opacity ?? 1) * shown,
+			},
+		} as SceneNode;
+	}
+
+	return {
+		retarget(scene, now) {
+			const before = flatten(target.nodes);
+			const after = flatten(scene.nodes);
+			const marks = [...after.values()].filter((node) => node.role === "mark");
+			const order = new Map(marks.map((node, index) => [node.key, index]));
+			for (const key of before.keys()) {
+				if (after.has(key)) continue;
+				paths.delete(key);
+				for (const channel of [
+					...(CHANNELS[before.get(key)?.kind ?? "group"] ?? []),
+					OPACITY,
+				]) {
+					numbers.delete(channelKey(key, channel));
+				}
+			}
+			for (const node of after.values()) {
+				const delay = staggerDelay(
+					timing,
+					order.get(node.key) ?? 0,
+					marks.length,
+				);
+				moveNode(node, before.get(node.key), now + delay * 1000, now);
+			}
+			target = scene;
+		},
+		snap(scene) {
+			numbers.clear();
+			paths.clear();
+			target = scene;
+		},
+		frame(now) {
+			for (const [key, motion] of numbers) {
+				if (done(motion, now)) numbers.delete(key);
+			}
+			for (const [key, motion] of paths) {
+				if (done(motion, now)) paths.delete(key);
+			}
+			if (numbers.size === 0 && paths.size === 0) return target;
+			return { ...target, nodes: target.nodes.map((node) => paint(node, now)) };
+		},
+		settled(now) {
+			return [...numbers.values(), ...paths.values()].every((motion) =>
+				done(motion, now),
+			);
+		},
+	};
+}

package/src/core/motion/timing.ts

@@ -0,0 +1,63 @@
+import type { EasingName } from "@voila.dev/motion";
+
+/** How a data update moves: what `<Chart animate>` accepts beyond `true`, `false` and a duration. */
+export type ChartAnimation =
+	| {
+			readonly type?: "spring";
+			/** Perceived duration, in milliseconds. */
+			readonly duration?: number;
+			/** 0 never overshoots (the default: a bar past its value shows a number the data doesn't have); up to 0.5. */
+			readonly bounce?: number;
+			/** Milliseconds between marks in focus order, capped at 300 ms in all. */
+			readonly stagger?: number;
+	  }
+	| {
+			readonly type: "tween";
+			readonly duration?: number;
+			readonly easing?: EasingName;
+			readonly stagger?: number;
+	  };
+
+export interface ChartTiming {
+	readonly type: "spring" | "tween";
+	/** Seconds, as the motion package counts them. */
+	readonly duration: number;
+	readonly bounce: number;
+	readonly easing: EasingName;
+	/** Seconds between neighbours. */
+	readonly stagger: number;
+}
+
+const DEFAULT_DURATION = 300;
+const MAX_STAGGER_TOTAL = 0.3;
+
+/** The timing an `animate` prop means, or `null` to snap. */
+export function chartTiming(
+	animate: boolean | number | ChartAnimation,
+): ChartTiming | null {
+	if (animate === false || animate === 0) return null;
+	const options: ChartAnimation =
+		typeof animate === "object"
+			? animate
+			: { duration: animate === true ? DEFAULT_DURATION : animate };
+	return {
+		type: options.type ?? "spring",
+		duration: (options.duration ?? DEFAULT_DURATION) / 1000,
+		bounce: Math.min(
+			Math.max("bounce" in options ? (options.bounce ?? 0) : 0, 0),
+			0.5,
+		),
+		easing: ("easing" in options ? options.easing : undefined) ?? "easeOut",
+		stagger: (options.stagger ?? 0) / 1000,
+	};
+}
+
+/** The delay of the `index`-th of `count` marks: the gap shrinks so the last one never waits more than 300 ms. */
+export function staggerDelay(
+	timing: ChartTiming,
+	index: number,
+	count: number,
+): number {
+	if (timing.stagger === 0 || count < 2) return 0;
+	return index * Math.min(timing.stagger, MAX_STAGGER_TOTAL / (count - 1));
+}

package/src/core/motion/tween.ts

@@ -19,7 +19,7 @@ function mix(from: number, to: number, t: number): number {
 }
 
 /** Two paths can tween when only their numbers differ. */
-function tweenPath(from: string, to: string, t: number): string {
+export function tweenPath(from: string, to: string, t: number): string {
 	const fromNumbers = from.match(NUMBER);
 	const toNumbers = to.match(NUMBER);
 	if (

package/src/index.ts

@@ -60,6 +60,15 @@ export {
 export { type WaffleOptions, waffleY } from "#/core/marks/stats/waffle.ts";
 export { type TextOptions, text } from "#/core/marks/text.ts";
 export { type TickOptions, tickX, tickY } from "#/core/marks/tick.ts";
+export {
+	createMotionStore,
+	type MotionStore,
+} from "#/core/motion/motion-store.ts";
+export {
+	type ChartAnimation,
+	type ChartTiming,
+	chartTiming,
+} from "#/core/motion/timing.ts";
 export { easeOutCubic, tweenScene } from "#/core/motion/tween.ts";
 export {
 	type ChartFocusStop,

package/src/react/chart.tsx

@@ -1,6 +1,7 @@
 import * as React from "react";
 import { compileChart } from "#/core/compile.ts";
 import type { ChartDefinition } from "#/core/define-chart.ts";
+import { type ChartAnimation, chartTiming } from "#/core/motion/timing.ts";
 import { findNearest, focusStops } from "#/core/nearest.ts";
 import { toNumber } from "#/core/scales/continuous.ts";
 import type { ChartPoint } from "#/core/types.ts";
@@ -29,7 +30,6 @@ import { useTextMeasurer } from "#/react/use-text-measurer.ts";
 
 const DEFAULT_HEIGHT = 300;
 const DEFAULT_INITIAL_WIDTH = 640;
-const DEFAULT_DURATION = 300;
 
 /** Focus ring, forced colours and reduced motion: what inline styles cannot say. */
 const CHART_CSS = `
@@ -69,8 +69,12 @@ interface Props
 	readonly legend?: boolean;
 	/** The visually hidden table of the values. On by default; turn it off only when the page shows the same table. */
 	readonly dataTable?: boolean;
-	/** Tween a data update, in milliseconds; `false` snaps. Reduced motion always snaps. */
-	readonly animate?: boolean | number;
+	/**
+	 * How a data update moves: `true` (a spring with no bounce), a perceived
+	 * duration in milliseconds, or `{ duration, bounce, stagger }` and
+	 * `{ type: "tween", easing }`. `false` snaps; reduced motion always does.
+	 */
+	readonly animate?: boolean | number | ChartAnimation;
 	/**
 	 * Zoom a continuous x: the wheel while the chart has focus, + and −,
 	 * Shift and the arrows to pan, a drag to pan when zoomed, 0 to reset.
@@ -172,11 +176,13 @@ export function Chart({
 		() => [definition, hidden],
 		[definition, hidden],
 	);
-	const shown = useAnimatedScene(
-		scene,
-		animationTrigger,
-		animate === false ? 0 : animate === true ? DEFAULT_DURATION : animate,
+	// An inline `animate={{ … }}` object is read by value, not identity.
+	const animateKey = JSON.stringify(animate);
+	const timing = React.useMemo(
+		() => chartTiming(JSON.parse(animateKey)),
+		[animateKey],
 	);
+	const shown = useAnimatedScene(scene, animationTrigger, timing);
 	const messages = messagesFor(scene.locale);
 	const { active, handlers } = useChartFocus({
 		stops,

package/src/react/use-animated-scene.ts

@@ -1,57 +1,57 @@
+import { cancelFrame, frame, shouldReduceMotion } from "@voila.dev/motion";
 import * as React from "react";
-import { easeOutCubic, tweenScene } from "#/core/motion/tween.ts";
+import {
+	createMotionStore,
+	type MotionStore,
+} from "#/core/motion/motion-store.ts";
+import type { ChartTiming } from "#/core/motion/timing.ts";
 import type { ChartScene } from "#/core/types.ts";
 
-function prefersReducedMotion(): boolean {
-	return (
-		typeof window !== "undefined" &&
-		window.matchMedia?.("(prefers-reduced-motion: reduce)").matches === true
-	);
-}
-
 /**
  * The scene to draw this frame. A data change (`trigger` changed: a new
- * definition, a series toggled) tweens from what is on screen to the new
- * scene; a resize snaps, since watching bars slide while a window is dragged
- * helps no one. Reduced motion always snaps. An update that lands mid-tween
- * starts from the frame already painted, so nothing jumps.
+ * definition, a series toggled) moves from what is on screen to the new
+ * scene on springs; one landing mid-flight keeps every node's speed. A
+ * resize snaps, since watching bars slide while a window is dragged helps no
+ * one. Reduced motion always snaps.
  */
 export function useAnimatedScene(
 	scene: ChartScene,
 	trigger: unknown,
-	duration: number,
+	timing: ChartTiming | null,
 ): ChartScene {
 	const [shown, setShown] = React.useState(scene);
-	const shownRef = React.useRef(scene);
 	const triggerRef = React.useRef(trigger);
+	const storeRef = React.useRef<{
+		store: MotionStore;
+		timing: ChartTiming;
+	} | null>(null);
 
 	React.useLayoutEffect(() => {
 		const changed = triggerRef.current !== trigger;
 		triggerRef.current = trigger;
-		if (!changed || duration <= 0 || prefersReducedMotion()) {
-			shownRef.current = scene;
+		if (timing && storeRef.current?.timing !== timing) {
+			storeRef.current = { store: createMotionStore(scene, timing), timing };
+		}
+		const store = storeRef.current?.store;
+		if (!changed || !timing || !store || shouldReduceMotion()) {
+			store?.snap(scene);
 			setShown(scene);
 			return;
 		}
-		const from = shownRef.current;
-		// Frame zero now, before paint: nodes that left are gone at once.
-		const first = tweenScene(from, scene, 0);
-		shownRef.current = first;
-		setShown(first);
-		const start = performance.now();
-		let frame = 0;
-		function step(now: number) {
-			const t = Math.min(1, (now - start) / duration);
-			const next = tweenScene(from, scene, easeOutCubic(t));
-			shownRef.current = next;
-			setShown(next);
-			if (t < 1) {
-				frame = requestAnimationFrame(step);
+		store.retarget(scene, performance.now());
+		function tick() {
+			const now = performance.now();
+			if (store?.settled(now)) {
+				cancelFrame(tick);
+				setShown(scene);
+				return;
 			}
+			setShown(store?.frame(now) ?? scene);
 		}
-		frame = requestAnimationFrame(step);
-		return () => cancelAnimationFrame(frame);
-	}, [scene, trigger, duration]);
+		tick();
+		frame.update(tick, true);
+		return () => cancelFrame(tick);
+	}, [scene, trigger, timing]);
 
 	return shown;
 }