@opendata-ai/openchart-vanilla 8.0.0-rc.24 → 8.0.0-rc.26

package/dist/{chunk-2YWRNRUK.js → chunk-ADWV256V.js}

@@ -526,7 +526,12 @@ function materializeRasterMarkSVG(layout) {
   const host = document.createElement("div");
   const svg = renderChartSVG(layout, host, { animate: false });
   const dataUrl = rasterizeMarks(layout);
-  if (!dataUrl) return svg;
+  if (!dataUrl) {
+    console.warn(
+      "[viz] Canvas raster export unavailable in this environment; exporting all points as vector SVG (larger file)."
+    );
+    return svg;
+  }
   for (const circle of svg.querySelectorAll("circle.oc-mark-point")) {
     circle.remove();
   }
@@ -566,6 +571,20 @@ function materializeCanvasModeSVG(layout, opts) {
   return materializeRasterMarkSVG(layout);
 }
 
+// src/motion/easing.ts
+function linear(t) {
+  return t;
+}
+function cubicOut(t) {
+  const f = 1 - t;
+  return 1 - f * f * f;
+}
+function cubicInOut(t) {
+  return t < 0.5 ? 4 * t * t * t : 1 - (-2 * t + 2) ** 3 / 2;
+}
+var clamp01 = (t) => Math.min(1, Math.max(0, t));
+var lerp = (a, b, t) => a + (b - a) * t;
+
 // src/text-edit-overlay.ts
 function getScale(svg) {
   const viewBox = svg.viewBox?.baseVal;
@@ -818,14 +837,121 @@ function createTextEditOverlayAtPosition(config) {
   return { destroy };
 }
 
-// src/transition.ts
+// src/transition/keys.ts
+function annotationKey(a) {
+  if (a.id) return `id:${a.id}`;
+  return `${a.type}:${a.label?.text ?? ""}`;
+}
+function keyAnnotations(annotations) {
+  const seen = /* @__PURE__ */ new Map();
+  return annotations.map((a) => {
+    const base = annotationKey(a);
+    const n = seen.get(base) ?? 0;
+    seen.set(base, n + 1);
+    return n === 0 ? base : `${base}#${n}`;
+  });
+}
+
+// src/transition/gate.ts
+var TRANSITIONABLE_MARKS = /* @__PURE__ */ new Set(["bar", "line", "area", "point"]);
+var DEFAULT_UPDATE_MAX_MARKS = 500;
+var CANVAS_DEFAULT_UPDATE_MAX_MARKS = 2e4;
+function canTransitionSpecShape(prevSpec, nextSpec) {
+  const prev = prevSpec;
+  const next = nextSpec;
+  if (!prev || !next || !("mark" in prev) || !("mark" in next)) return false;
+  const prevMark = typeof prev.mark === "string" ? prev.mark : prev.mark?.type;
+  const nextMark = typeof next.mark === "string" ? next.mark : next.mark?.type;
+  if (prevMark !== nextMark) return false;
+  if (!TRANSITIONABLE_MARKS.has(prevMark)) return false;
+  const prevEnc = prev.encoding;
+  const nextEnc = next.encoding;
+  if (!prevEnc || !nextEnc) return false;
+  return !(prevEnc.x?.field !== nextEnc.x?.field || prevEnc.x?.type !== nextEnc.x?.type || prevEnc.y?.field !== nextEnc.y?.field || prevEnc.y?.type !== nextEnc.y?.type || prevEnc.color?.field !== nextEnc.color?.field);
+}
+function canTransition(args) {
+  const { prevLayout, nextLayout, prevSpec, nextSpec, isFirstRender, entranceInFlight } = args;
+  if (!prevLayout || !prevSpec || isFirstRender) return false;
+  if (!nextLayout.animation?.update) return false;
+  if (!canTransitionSpecShape(prevSpec, nextSpec)) return false;
+  if (nextLayout.display === "sparkline") return false;
+  if (entranceInFlight) return false;
+  if (prevLayout.dimensions.width !== nextLayout.dimensions.width || prevLayout.dimensions.height !== nextLayout.dimensions.height) {
+    return false;
+  }
+  const cap = nextLayout.animation.update.maxMarks ?? (nextLayout.markRenderMode === "canvas" ? CANVAS_DEFAULT_UPDATE_MAX_MARKS : DEFAULT_UPDATE_MAX_MARKS);
+  if (Math.max(prevLayout.marks.length, nextLayout.marks.length) > cap) return false;
+  if (!hasVisibleChange(prevLayout, nextLayout)) return false;
+  if (typeof window !== "undefined" && typeof window.matchMedia === "function") {
+    try {
+      if (window.matchMedia("(prefers-reduced-motion: reduce)").matches) return false;
+    } catch {
+    }
+  }
+  return true;
+}
+function hasVisibleChange(prevLayout, nextLayout) {
+  return hasGeometryChanged(prevLayout, nextLayout) || hasColorChanged(prevLayout, nextLayout) || hasAnnotationChanged(prevLayout, nextLayout);
+}
+function hasColorChanged(prevLayout, nextLayout) {
+  const prevMarks = prevLayout.marks;
+  const nextMarks = nextLayout.marks;
+  if (prevMarks.length !== nextMarks.length) return true;
+  for (let i = 0; i < prevMarks.length; i++) {
+    const p = prevMarks[i];
+    const n = nextMarks[i];
+    if (p.fill !== n.fill || p.stroke !== n.stroke) return true;
+  }
+  return false;
+}
+function hasAnnotationChanged(prevLayout, nextLayout) {
+  const prev = prevLayout.annotations ?? [];
+  const next = nextLayout.annotations ?? [];
+  if (prev.length !== next.length) return true;
+  const prevKeys = keyAnnotations(prev);
+  const nextKeys = keyAnnotations(next);
+  for (let i = 0; i < prev.length; i++) {
+    if (prevKeys[i] !== nextKeys[i]) return true;
+    const p = prev[i];
+    const n = next[i];
+    if (p.label?.x !== n.label?.x || p.label?.y !== n.label?.y) return true;
+    if (p.opacity !== n.opacity) return true;
+  }
+  return false;
+}
+function hasGeometryChanged(prevLayout, nextLayout) {
+  const prevMarks = prevLayout.marks;
+  const nextMarks = nextLayout.marks;
+  if (prevMarks.length !== nextMarks.length) return true;
+  for (let i = 0; i < prevMarks.length; i++) {
+    const p = prevMarks[i];
+    const n = nextMarks[i];
+    if (p.type !== n.type || p.key !== n.key) return true;
+    if (p.type === "rect" && n.type === "rect") {
+      if (p.x !== n.x || p.y !== n.y || p.width !== n.width || p.height !== n.height) return true;
+    } else if (p.type === "line" && n.type === "line") {
+      if (p.path !== n.path || p.points.length !== n.points.length) return true;
+      for (let j = 0; j < p.points.length; j++) {
+        if (p.points[j].x !== n.points[j].x || p.points[j].y !== n.points[j].y) return true;
+      }
+    } else if (p.type === "area" && n.type === "area") {
+      if (p.path !== n.path) return true;
+    } else if (p.type === "point" && n.type === "point") {
+      if (p.cx !== n.cx || p.cy !== n.cy || p.r !== n.r) return true;
+    } else if (p.type === "rule" && n.type === "rule") {
+      if (p.x1 !== n.x1 || p.y1 !== n.y1 || p.x2 !== n.x2 || p.y2 !== n.y2) return true;
+    } else if (p.type === "tick" && n.type === "tick") {
+      if (p.x !== n.x || p.y !== n.y) return true;
+    } else if (p.type === "textMark" && n.type === "textMark") {
+      if (p.x !== n.x || p.y !== n.y) return true;
+    }
+  }
+  return false;
+}
+
+// src/transition/driver.ts
 import { isGradientDef } from "@opendata-ai/openchart-core";
-import {
-  buildAreaPath,
-  buildLinePath,
-  EXIT_DEFAULTS,
-  serializeKeyValue
-} from "@opendata-ai/openchart-engine";
+import { buildAreaPath as buildAreaPath2, buildLinePath as buildLinePath2, EXIT_DEFAULTS } from "@opendata-ai/openchart-engine";
 
 // ../../node_modules/.bun/d3-color@3.1.0/node_modules/d3-color/src/define.js
 function define_default(constructor, factory, prototype) {
@@ -1201,7 +1327,7 @@ function basisClosed_default(values) {
 var constant_default = (x) => () => x;
 
 // ../../node_modules/.bun/d3-interpolate@3.0.1/node_modules/d3-interpolate/src/color.js
-function linear(a, d) {
+function linear2(a, d) {
   return function(t) {
     return a + t * d;
   };
@@ -1218,7 +1344,7 @@ function gamma(y) {
 }
 function nogamma(a, b) {
   var d = b - a;
-  return d ? linear(a, d) : constant_default(isNaN(a) ? b : a);
+  return d ? linear2(a, d) : constant_default(isNaN(a) ? b : a);
 }
 
 // ../../node_modules/.bun/d3-interpolate@3.0.1/node_modules/d3-interpolate/src/rgb.js
@@ -1306,694 +1432,723 @@ var zoom_default = (function zoomRho(rho, rho2, rho4) {
   return zoom;
 })(Math.SQRT2, 2, 4);
 
-// src/transition.ts
-function annotationKey(a) {
-  if (a.id) return `id:${a.id}`;
-  return `${a.type}:${a.label?.text ?? ""}`;
-}
-function keyAnnotations(annotations) {
-  const seen = /* @__PURE__ */ new Map();
-  return annotations.map((a) => {
-    const base = annotationKey(a);
-    const n = seen.get(base) ?? 0;
-    seen.set(base, n + 1);
-    return n === 0 ? base : `${base}#${n}`;
-  });
-}
-function cubicOut(t) {
-  const f = 1 - t;
-  return 1 - f * f * f;
+// src/transition/canvas-tweens.ts
+import { serializeKeyValue as serializeKeyValue2 } from "@opendata-ai/openchart-engine";
+
+// src/transition/chrome-tweens.ts
+import { serializeKeyValue } from "@opendata-ai/openchart-engine";
+function markShapeElement(el, attr) {
+  if (el.tagName === "circle" || el.tagName === "rect" || el.tagName === "path") return el;
+  if (attr === "stroke") {
+    const areaTop = el.querySelector(".oc-area-top");
+    if (areaTop) return areaTop;
+  }
+  return el.querySelector("rect, path, circle, line") ?? el;
 }
-var TRANSITIONABLE_MARKS = /* @__PURE__ */ new Set(["bar", "line", "area", "point"]);
-var DEFAULT_UPDATE_MAX_MARKS = 500;
-var CANVAS_DEFAULT_UPDATE_MAX_MARKS = 2e4;
-function canTransitionSpecShape(prevSpec, nextSpec) {
-  const prev = prevSpec;
-  const next = nextSpec;
-  if (!prev || !next || !("mark" in prev) || !("mark" in next)) return false;
-  const prevMark = typeof prev.mark === "string" ? prev.mark : prev.mark?.type;
-  const nextMark = typeof next.mark === "string" ? next.mark : next.mark?.type;
-  if (prevMark !== nextMark) return false;
-  if (!TRANSITIONABLE_MARKS.has(prevMark)) return false;
-  const prevEnc = prev.encoding;
-  const nextEnc = next.encoding;
-  if (!prevEnc || !nextEnc) return false;
-  return !(prevEnc.x?.field !== nextEnc.x?.field || prevEnc.x?.type !== nextEnc.x?.type || prevEnc.y?.field !== nextEnc.y?.field || prevEnc.y?.type !== nextEnc.y?.type || prevEnc.color?.field !== nextEnc.color?.field);
+function isInterpolableColor(v) {
+  return typeof v === "string" && v !== "" && v !== "none" && !v.startsWith("url(");
 }
-function canTransition(args) {
-  const { prevLayout, nextLayout, prevSpec, nextSpec, isFirstRender, entranceInFlight } = args;
-  if (!prevLayout || !prevSpec || isFirstRender) return false;
-  if (!nextLayout.animation?.update) return false;
-  if (!canTransitionSpecShape(prevSpec, nextSpec)) return false;
-  if (nextLayout.display === "sparkline") return false;
-  if (entranceInFlight) return false;
-  if (prevLayout.dimensions.width !== nextLayout.dimensions.width || prevLayout.dimensions.height !== nextLayout.dimensions.height) {
-    return false;
+function buildColorTweens(prevLayout, nextLayout, dom, tweens) {
+  const prevByKey = /* @__PURE__ */ new Map();
+  for (const m of prevLayout.marks) {
+    if (m.key) prevByKey.set(m.key, m);
   }
-  const cap = nextLayout.animation.update.maxMarks ?? (nextLayout.markRenderMode === "canvas" ? CANVAS_DEFAULT_UPDATE_MAX_MARKS : DEFAULT_UPDATE_MAX_MARKS);
-  if (Math.max(prevLayout.marks.length, nextLayout.marks.length) > cap) return false;
-  if (!hasVisibleChange(prevLayout, nextLayout)) return false;
-  if (typeof window !== "undefined" && typeof window.matchMedia === "function") {
-    try {
-      if (window.matchMedia("(prefers-reduced-motion: reduce)").matches) return false;
-    } catch {
+  for (const next of nextLayout.marks) {
+    if (!next.key) continue;
+    const prev = prevByKey.get(next.key);
+    if (!prev) continue;
+    const group = dom.any(next.key);
+    if (!group) continue;
+    for (const attr of ["fill", "stroke"]) {
+      const from = prev[attr];
+      const to = next[attr];
+      if (from === to) continue;
+      if (!isInterpolableColor(from) || !isInterpolableColor(to)) continue;
+      tweens.push({
+        tweenType: "color",
+        kind: "update",
+        el: markShapeElement(group, attr),
+        attr,
+        from,
+        to
+      });
     }
   }
-  return true;
-}
-function hasVisibleChange(prevLayout, nextLayout) {
-  return hasGeometryChanged(prevLayout, nextLayout) || hasColorChanged(prevLayout, nextLayout) || hasAnnotationChanged(prevLayout, nextLayout);
-}
-function hasColorChanged(prevLayout, nextLayout) {
-  const prevMarks = prevLayout.marks;
-  const nextMarks = nextLayout.marks;
-  if (prevMarks.length !== nextMarks.length) return true;
-  for (let i = 0; i < prevMarks.length; i++) {
-    const p = prevMarks[i];
-    const n = nextMarks[i];
-    if (p.fill !== n.fill || p.stroke !== n.stroke) return true;
-  }
-  return false;
 }
-function hasAnnotationChanged(prevLayout, nextLayout) {
+function buildAnnotationTweens(svg, prevLayout, nextLayout, tweens) {
   const prev = prevLayout.annotations ?? [];
   const next = nextLayout.annotations ?? [];
-  if (prev.length !== next.length) return true;
-  const prevKeys = keyAnnotations(prev);
+  if (prev.length === 0 && next.length === 0) return;
+  const container = svg.querySelector(".oc-annotations");
+  if (!container) return;
+  const prevByKey = new Map(keyAnnotations(prev).map((k, i) => [k, prev[i]]));
   const nextKeys = keyAnnotations(next);
-  for (let i = 0; i < prev.length; i++) {
-    if (prevKeys[i] !== nextKeys[i]) return true;
-    const p = prev[i];
-    const n = next[i];
-    if (p.label?.x !== n.label?.x || p.label?.y !== n.label?.y) return true;
-    if (p.opacity !== n.opacity) return true;
-  }
-  return false;
-}
-function hasGeometryChanged(prevLayout, nextLayout) {
-  const prevMarks = prevLayout.marks;
-  const nextMarks = nextLayout.marks;
-  if (prevMarks.length !== nextMarks.length) return true;
-  for (let i = 0; i < prevMarks.length; i++) {
-    const p = prevMarks[i];
-    const n = nextMarks[i];
-    if (p.type !== n.type || p.key !== n.key) return true;
-    if (p.type === "rect" && n.type === "rect") {
-      if (p.x !== n.x || p.y !== n.y || p.width !== n.width || p.height !== n.height) return true;
-    } else if (p.type === "line" && n.type === "line") {
-      if (p.path !== n.path || p.points.length !== n.points.length) return true;
-      for (let j = 0; j < p.points.length; j++) {
-        if (p.points[j].x !== n.points[j].x || p.points[j].y !== n.points[j].y) return true;
-      }
-    } else if (p.type === "area" && n.type === "area") {
-      if (p.path !== n.path) return true;
-    } else if (p.type === "point" && n.type === "point") {
-      if (p.cx !== n.cx || p.cy !== n.cy || p.r !== n.r) return true;
-    } else if (p.type === "rule" && n.type === "rule") {
-      if (p.x1 !== n.x1 || p.y1 !== n.y1 || p.x2 !== n.x2 || p.y2 !== n.y2) return true;
-    } else if (p.type === "tick" && n.type === "tick") {
-      if (p.x !== n.x || p.y !== n.y) return true;
-    } else if (p.type === "textMark" && n.type === "textMark") {
-      if (p.x !== n.x || p.y !== n.y) return true;
+  const els = container.querySelectorAll(".oc-annotation");
+  for (let i = 0; i < next.length; i++) {
+    const el = els[i];
+    if (!el) continue;
+    const before = prevByKey.get(nextKeys[i]);
+    if (!before) {
+      tweens.push({
+        tweenType: "annotation",
+        kind: "enter",
+        el,
+        fromDx: 0,
+        fromDy: 0,
+        fromOpacity: 0,
+        toOpacity: 1
+      });
+      continue;
     }
+    const dx = (before.label?.x ?? 0) - (next[i].label?.x ?? 0);
+    const dy = (before.label?.y ?? 0) - (next[i].label?.y ?? 0);
+    if (dx === 0 && dy === 0) continue;
+    tweens.push({
+      tweenType: "annotation",
+      kind: "update",
+      el,
+      fromDx: dx,
+      fromDy: dy
+    });
   }
-  return false;
-}
-function geomFromMark(m) {
-  return { x: m.x, y: m.y, width: m.width, height: m.height };
 }
-function applyGeomToElement(el, geom, mark) {
-  const shapeEl = el.querySelector("rect, path");
-  if (!shapeEl) return;
-  const sides = mark.cornerRadiusSides;
-  const partialCorners = !!sides && (!sides.tl || !sides.tr || !sides.br || !sides.bl) && !!mark.cornerRadius;
-  if (partialCorners && shapeEl.tagName === "path") {
-    const tempMark = { ...mark, ...geom };
-    shapeEl.setAttribute("d", rectPathWithCorners(tempMark, sides));
-  } else {
-    shapeEl.setAttribute("x", String(geom.x));
-    shapeEl.setAttribute("y", String(geom.y));
-    shapeEl.setAttribute("width", String(geom.width));
-    shapeEl.setAttribute("height", String(geom.height));
-  }
+function buildAxisTweens(svg, prevLayout, nextLayout, tweens, ghosts) {
+  buildSingleAxisTweens(svg, prevLayout.axes.x, nextLayout.axes.x, "x", nextLayout, tweens, ghosts);
+  buildSingleAxisTweens(svg, prevLayout.axes.y, nextLayout.axes.y, "y", nextLayout, tweens, ghosts);
 }
-function lerpGeom(from, to, t) {
-  return {
-    x: from.x + (to.x - from.x) * t,
-    y: from.y + (to.y - from.y) * t,
-    width: from.width + (to.width - from.width) * t,
-    height: from.height + (to.height - from.height) * t
+function computeGridlineDeltas(prevAxis, nextAxis) {
+  const byValue = (axis) => {
+    const map = /* @__PURE__ */ new Map();
+    for (const tick of axis.ticks) {
+      const matching = axis.gridlines.find((g) => g.position === tick.position);
+      if (matching) map.set(serializeKeyValue(tick.value), matching.position);
+    }
+    return map;
   };
+  return { prevGridByValue: byValue(prevAxis), nextGridByValue: byValue(nextAxis) };
 }
-function lerpPoint(a, b, t) {
-  return { x: a.x + (b.x - a.x) * t, y: a.y + (b.y - a.y) * t };
-}
-function normalizePointArrays(prevPoints, nextPoints, prevKeys, nextKeys) {
-  const nextKeySet = new Set(nextKeys);
-  const survivors = prevKeys.filter((k) => nextKeySet.has(k));
-  if (survivors.length === 0) {
-    return [prevPoints, nextPoints];
+function buildSingleAxisTweens(svg, prevAxis, nextAxis, orientation, layout, tweens, ghosts) {
+  if (!prevAxis || !nextAxis) return;
+  const axisClass = `oc-axis-${orientation}`;
+  const axisGroup = svg.querySelector(`.${axisClass}`);
+  if (!axisGroup) return;
+  const isRotated = !!(nextAxis.tickAngle && Math.abs(nextAxis.tickAngle) > 10);
+  const prevTickMap = /* @__PURE__ */ new Map();
+  for (const tick of prevAxis.ticks) {
+    prevTickMap.set(serializeKeyValue(tick.value), tick.position);
   }
-  const prevByKey = /* @__PURE__ */ new Map();
-  for (let i = 0; i < prevKeys.length; i++) {
-    prevByKey.set(prevKeys[i], prevPoints[i]);
+  const nextTickMap = /* @__PURE__ */ new Map();
+  for (const tick of nextAxis.ticks) {
+    nextTickMap.set(serializeKeyValue(tick.value), tick.position);
   }
-  const nextByKey = /* @__PURE__ */ new Map();
-  for (let i = 0; i < nextKeys.length; i++) {
-    nextByKey.set(nextKeys[i], nextPoints[i]);
+  const posAttr = orientation === "x" ? "x" : "y";
+  const tickLabels = axisGroup.querySelectorAll(".oc-axis-tick[data-tick-key]");
+  const matchedNextKeys = /* @__PURE__ */ new Set();
+  for (const labelEl of tickLabels) {
+    const key = labelEl.getAttribute("data-tick-key");
+    if (!key) continue;
+    const nextPos = nextTickMap.get(key);
+    const prevPos = prevTickMap.get(key);
+    if (prevPos !== void 0 && nextPos !== void 0) {
+      matchedNextKeys.add(key);
+      tweens.push({
+        tweenType: "axisTick",
+        kind: "update",
+        el: labelEl,
+        posAttr,
+        fromPos: prevPos,
+        toPos: nextPos,
+        crossfade: isRotated
+      });
+    } else if (prevPos === void 0 && nextPos !== void 0) {
+      matchedNextKeys.add(key);
+      tweens.push({
+        tweenType: "axisTick",
+        kind: "enter",
+        el: labelEl,
+        posAttr,
+        fromPos: nextPos,
+        toPos: nextPos,
+        crossfade: false,
+        fromOpacity: 0,
+        toOpacity: 1
+      });
+    }
   }
-  const merged = mergeKeyOrder(prevKeys, nextKeys);
-  const mergedIndex = /* @__PURE__ */ new Map();
-  for (let i = 0; i < merged.length; i++) {
-    mergedIndex.set(merged[i], i);
+  for (const [key, prevPos] of prevTickMap) {
+    if (nextTickMap.has(key)) continue;
+    const prevTick = prevAxis.ticks.find((t) => serializeKeyValue(t.value) === key);
+    if (!prevTick) continue;
+    const ghost = document.createElementNS("http://www.w3.org/2000/svg", "text");
+    ghost.setAttribute("class", "oc-axis-tick oc-ghost");
+    ghost.setAttribute("aria-hidden", "true");
+    ghost.setAttribute("pointer-events", "none");
+    ghost.textContent = prevTick.label;
+    const area = layout.area;
+    if (orientation === "x") {
+      ghost.setAttribute("x", String(prevPos));
+      const xLabelPad = nextAxis.labelPadding ?? layout.theme.spacing.xAxisLabelPadding;
+      const fontSize = nextAxis.tickLabelStyle.fontSize;
+      ghost.setAttribute("y", String(area.y + area.height + xLabelPad + fontSize * 0.8));
+      ghost.setAttribute("text-anchor", "middle");
+    } else {
+      const TICK_LABEL_OFFSET = 8;
+      ghost.setAttribute("x", String(area.x - TICK_LABEL_OFFSET));
+      ghost.setAttribute("y", String(prevPos));
+      ghost.setAttribute("text-anchor", "end");
+      ghost.setAttribute("dominant-baseline", "central");
+    }
+    axisGroup.appendChild(ghost);
+    ghosts.push(ghost);
+    tweens.push({
+      tweenType: "axisTick",
+      kind: "exit",
+      el: ghost,
+      posAttr,
+      fromPos: prevPos,
+      toPos: prevPos,
+      crossfade: false,
+      ghost,
+      fromOpacity: 1,
+      toOpacity: 0
+    });
   }
-  const fromPts = [];
-  const toPts = [];
-  for (const key of merged) {
-    const inPrev = prevByKey.has(key);
-    const inNext = nextByKey.has(key);
-    if (inPrev && inNext) {
-      fromPts.push(prevByKey.get(key));
-      toPts.push(nextByKey.get(key));
-    } else if (inNext && !inPrev) {
-      const nextPt = nextByKey.get(key);
-      toPts.push(nextPt);
-      fromPts.push(findInsertionPosition(key, merged, mergedIndex, prevByKey, nextByKey, nextPt));
-    } else if (inPrev && !inNext) {
-      const prevPt = prevByKey.get(key);
-      fromPts.push(prevPt);
-      toPts.push(findRemovalPosition(key, merged, mergedIndex, prevByKey, nextByKey, prevPt));
+  const { prevGridByValue, nextGridByValue } = computeGridlineDeltas(prevAxis, nextAxis);
+  const gridlines = axisGroup.querySelectorAll(".oc-gridline[data-tick-key]");
+  for (const glEl of gridlines) {
+    const key = glEl.getAttribute("data-tick-key");
+    if (!key) continue;
+    const nextPos = nextGridByValue.get(key);
+    const prevPos = prevGridByValue.get(key);
+    if (prevPos !== void 0 && nextPos !== void 0) {
+      tweens.push({
+        tweenType: "gridline",
+        kind: "update",
+        el: glEl,
+        orientation,
+        fromPos: prevPos,
+        toPos: nextPos
+      });
+    } else if (prevPos === void 0 && nextPos !== void 0) {
+      tweens.push({
+        tweenType: "gridline",
+        kind: "enter",
+        el: glEl,
+        orientation,
+        fromPos: nextPos,
+        toPos: nextPos,
+        fromOpacity: 0,
+        toOpacity: 1
+      });
     }
   }
-  return [fromPts, toPts];
+  for (const [key, prevPos] of prevGridByValue) {
+    if (nextGridByValue.has(key)) continue;
+    const ghost = document.createElementNS("http://www.w3.org/2000/svg", "line");
+    ghost.setAttribute("class", "oc-gridline oc-ghost");
+    ghost.setAttribute("aria-hidden", "true");
+    ghost.setAttribute("pointer-events", "none");
+    if (orientation === "y") {
+      const area = layout.area;
+      ghost.setAttribute("x1", String(area.x));
+      ghost.setAttribute("y1", String(prevPos));
+      ghost.setAttribute("x2", String(area.x + area.width));
+      ghost.setAttribute("y2", String(prevPos));
+    } else {
+      const area = layout.area;
+      ghost.setAttribute("x1", String(prevPos));
+      ghost.setAttribute("y1", String(area.y));
+      ghost.setAttribute("x2", String(prevPos));
+      ghost.setAttribute("y2", String(area.y + area.height));
+    }
+    axisGroup.appendChild(ghost);
+    ghosts.push(ghost);
+    tweens.push({
+      tweenType: "gridline",
+      kind: "exit",
+      el: ghost,
+      orientation,
+      fromPos: prevPos,
+      toPos: prevPos,
+      ghost,
+      fromOpacity: 1,
+      toOpacity: 0
+    });
+  }
 }
-function mergeKeyOrder(prevKeys, nextKeys) {
-  const nextIndex = /* @__PURE__ */ new Map();
-  for (let i = 0; i < nextKeys.length; i++) {
-    if (!nextIndex.has(nextKeys[i])) nextIndex.set(nextKeys[i], i);
+
+// src/transition/canvas-tweens.ts
+function buildCanvasPointsTween(prevLayout, nextLayout, layer, tweens, fromSnapshot) {
+  const prevPoints = prevLayout.marks.filter((m) => m.type === "point");
+  const nextPoints = nextLayout.marks.filter((m) => m.type === "point");
+  const prevByKey = /* @__PURE__ */ new Map();
+  for (const m of prevPoints) {
+    if (m.key) prevByKey.set(m.key, m);
   }
-  const prevIndex = /* @__PURE__ */ new Map();
-  for (let i = 0; i < prevKeys.length; i++) {
-    if (!prevIndex.has(prevKeys[i])) prevIndex.set(prevKeys[i], i);
-  }
-  const result = [];
-  const added = /* @__PURE__ */ new Set();
-  let pi = 0;
-  let ni = 0;
-  while (pi < prevKeys.length && ni < nextKeys.length) {
-    const pk = prevKeys[pi];
-    const nk = nextKeys[ni];
-    if (added.has(pk)) {
-      pi++;
-      continue;
-    }
-    if (added.has(nk)) {
-      ni++;
-      continue;
-    }
-    if (pk === nk) {
-      result.push(pk);
-      added.add(pk);
-      pi++;
-      ni++;
-    } else {
-      const pkInNext = nextIndex.has(pk) && nextIndex.get(pk) >= ni ? nextIndex.get(pk) : -1;
-      const nkInPrev = prevIndex.has(nk) && prevIndex.get(nk) >= pi ? prevIndex.get(nk) : -1;
-      if (pkInNext === -1 && nkInPrev === -1) {
-        result.push(pk);
-        added.add(pk);
-        pi++;
-      } else if (pkInNext === -1) {
-        result.push(pk);
-        added.add(pk);
-        pi++;
-      } else if (nkInPrev === -1) {
-        result.push(nk);
-        added.add(nk);
-        ni++;
-      } else {
-        if (pkInNext <= nkInPrev) {
-          result.push(pk);
-          added.add(pk);
-          pi++;
-        } else {
-          result.push(nk);
-          added.add(nk);
-          ni++;
-        }
-      }
-    }
-  }
-  while (pi < prevKeys.length) {
-    if (!added.has(prevKeys[pi])) {
-      result.push(prevKeys[pi]);
-      added.add(prevKeys[pi]);
-    }
-    pi++;
+  const soa = layer.state.marks;
+  const survivors = [];
+  const enters = [];
+  for (let i = 0; i < soa.n; i++) {
+    const key = soa.keys[i];
+    if (key !== void 0 && prevByKey.has(key)) survivors.push(i);
+    else enters.push(i);
   }
-  while (ni < nextKeys.length) {
-    if (!added.has(nextKeys[ni])) {
-      result.push(nextKeys[ni]);
-      added.add(nextKeys[ni]);
-    }
-    ni++;
+  const exits = [];
+  const nextKeys = /* @__PURE__ */ new Set();
+  for (const m of nextPoints) {
+    if (m.key) nextKeys.add(m.key);
   }
-  return result;
-}
-function findInsertionPosition(key, merged, mergedIndex, prevByKey, nextByKey, nextPt) {
-  const idx = mergedIndex.get(key) ?? -1;
-  let beforeKey = null;
-  for (let i = idx - 1; i >= 0; i--) {
-    if (prevByKey.has(merged[i]) && nextByKey.has(merged[i])) {
-      beforeKey = merged[i];
-      break;
-    }
+  for (const [key, prev] of prevByKey) {
+    if (!nextKeys.has(key)) exits.push(prev);
   }
-  let afterKey = null;
-  for (let i = idx + 1; i < merged.length; i++) {
-    if (prevByKey.has(merged[i]) && nextByKey.has(merged[i])) {
-      afterKey = merged[i];
-      break;
+  const sn = survivors.length;
+  const soaIndex = new Uint32Array(sn);
+  const fromCx = new Float32Array(sn);
+  const fromCy = new Float32Array(sn);
+  const fromR = new Float32Array(sn);
+  const toCx = new Float32Array(sn);
+  const toCy = new Float32Array(sn);
+  const toR = new Float32Array(sn);
+  const soaKeys = new Array(sn);
+  for (let s = 0; s < sn; s++) {
+    const i = survivors[s];
+    const key = soa.keys[i];
+    const prev = prevByKey.get(key);
+    let px = prev.cx;
+    let py = prev.cy;
+    let pr = prev.r;
+    const snap = fromSnapshot?.get(key);
+    if (snap && snap.type === "point") {
+      px = snap.cx;
+      py = snap.cy;
+      if (snap.r !== void 0) pr = snap.r;
     }
+    soaIndex[s] = i;
+    soaKeys[s] = key;
+    fromCx[s] = px;
+    fromCy[s] = py;
+    fromR[s] = pr;
+    toCx[s] = soa.x[i];
+    toCy[s] = soa.y[i];
+    toR[s] = soa.r[i];
   }
-  if (beforeKey && afterKey) {
-    const beforeNext = nextByKey.get(beforeKey);
-    const afterNext = nextByKey.get(afterKey);
-    const beforePrev = prevByKey.get(beforeKey);
-    const afterPrev = prevByKey.get(afterKey);
-    const range = afterNext.x - beforeNext.x;
-    const t = range === 0 ? 0.5 : (nextPt.x - beforeNext.x) / range;
-    return lerpPoint(beforePrev, afterPrev, Math.max(0, Math.min(1, t)));
-  }
-  if (beforeKey) {
-    return { ...prevByKey.get(beforeKey) };
+  const enterSoaIndex = Uint32Array.from(enters);
+  if (enters.length > 0) {
+    const alpha = new Float32Array(soa.n).fill(1);
+    for (const i of enters) alpha[i] = 0;
+    layer.state.enterAlpha = alpha;
   }
-  if (afterKey) {
-    return { ...prevByKey.get(afterKey) };
+  const exitCx = new Float32Array(exits.length);
+  const exitCy = new Float32Array(exits.length);
+  const exitR = new Float32Array(exits.length);
+  const exitFill = new Array(exits.length);
+  for (let x = 0; x < exits.length; x++) {
+    const m = exits[x];
+    exitCx[x] = m.cx;
+    exitCy[x] = m.cy;
+    exitR[x] = m.r;
+    exitFill[x] = flattenFill(m.fill);
   }
-  return nextPt;
+  const exitState = exits.length > 0 ? { x: exitCx, y: exitCy, r: exitR, fill: exitFill, alpha: 1 } : null;
+  tweens.push({
+    tweenType: "canvasPoints",
+    kind: "update",
+    layer,
+    soaIndex,
+    fromCx,
+    fromCy,
+    fromR,
+    toCx,
+    toCy,
+    toR,
+    soaKeys,
+    enterSoaIndex,
+    exitState
+  });
 }
-function findRemovalPosition(key, merged, mergedIndex, prevByKey, nextByKey, prevPt) {
-  const idx = mergedIndex.get(key) ?? -1;
-  let beforeKey = null;
-  for (let i = idx - 1; i >= 0; i--) {
-    if (prevByKey.has(merged[i]) && nextByKey.has(merged[i])) {
-      beforeKey = merged[i];
-      break;
-    }
+function applyCanvasPointsState(tw, elapsed, update, exit, enterDelay, enterDuration) {
+  const soa = tw.layer.state.marks;
+  const easedUpdate = cubicOut(Math.min(elapsed / update.duration, 1));
+  for (let s = 0; s < tw.soaIndex.length; s++) {
+    const i = tw.soaIndex[s];
+    soa.x[i] = tw.fromCx[s] + (tw.toCx[s] - tw.fromCx[s]) * easedUpdate;
+    soa.y[i] = tw.fromCy[s] + (tw.toCy[s] - tw.fromCy[s]) * easedUpdate;
+    soa.r[i] = tw.fromR[s] + (tw.toR[s] - tw.fromR[s]) * easedUpdate;
   }
-  let afterKey = null;
-  for (let i = idx + 1; i < merged.length; i++) {
-    if (prevByKey.has(merged[i]) && nextByKey.has(merged[i])) {
-      afterKey = merged[i];
-      break;
+  const alpha = tw.layer.state.enterAlpha;
+  if (alpha && tw.enterSoaIndex.length > 0) {
+    const tEnter = elapsed < enterDelay ? 0 : Math.min((elapsed - enterDelay) / enterDuration, 1);
+    const easedEnter = cubicOut(tEnter);
+    for (let e = 0; e < tw.enterSoaIndex.length; e++) {
+      alpha[tw.enterSoaIndex[e]] = easedEnter;
     }
   }
-  if (beforeKey && afterKey) {
-    const beforePrev = prevByKey.get(beforeKey);
-    const afterPrev = prevByKey.get(afterKey);
-    const beforeNext = nextByKey.get(beforeKey);
-    const afterNext = nextByKey.get(afterKey);
-    const range = afterPrev.x - beforePrev.x;
-    const t = range === 0 ? 0.5 : (prevPt.x - beforePrev.x) / range;
-    return lerpPoint(beforeNext, afterNext, Math.max(0, Math.min(1, t)));
-  }
-  if (beforeKey) {
-    return { ...nextByKey.get(beforeKey) };
-  }
-  if (afterKey) {
-    return { ...nextByKey.get(afterKey) };
-  }
-  return prevPt;
-}
-function interpolatePoints(fromPts, toPts, t) {
-  const len = Math.min(fromPts.length, toPts.length);
-  const result = new Array(len);
-  for (let i = 0; i < len; i++) {
-    result[i] = lerpPoint(fromPts[i], toPts[i], t);
-  }
-  return result;
-}
-function applyLinePath(el, points, interpolate) {
-  const pathEl = el.querySelector("path");
-  if (!pathEl) return;
-  pathEl.setAttribute("d", buildLinePath(points, interpolate));
-}
-function applyAreaPaths(el, topPoints, bottomPoints, interpolate, hasStroke) {
-  const paths = el.querySelectorAll("path");
-  if (paths[0]) {
-    paths[0].setAttribute("d", buildAreaPath(topPoints, bottomPoints, interpolate));
-  }
-  if (hasStroke && paths[1]) {
-    paths[1].setAttribute("d", buildLinePath(topPoints, interpolate));
+  if (tw.exitState) {
+    const easedExit = cubicOut(Math.min(elapsed / exit.duration, 1));
+    tw.exitState.alpha = 1 - easedExit;
+    tw.layer.state.exiting = tw.exitState;
   }
 }
-function applyFinalLinePath(el, mark) {
-  const pathEl = el.querySelector("path");
-  if (!pathEl || !mark.path) return;
-  pathEl.setAttribute("d", mark.path);
+function canvasGridlineAxes(layout) {
+  return [
+    { axis: layout.axes.y, orient: "y" },
+    { axis: layout.axes.y2, orient: "y" },
+    { axis: layout.axes.x, orient: "x" }
+  ];
 }
-function applyFinalAreaPaths(el, mark) {
-  const paths = el.querySelectorAll("path");
-  if (paths[0]) {
-    paths[0].setAttribute("d", mark.path);
-  }
-  if (paths[1] && mark.topPath) {
-    paths[1].setAttribute("d", mark.topPath);
-  }
+function axisEmitsGridlines(axis, orient) {
+  if (!axis) return false;
+  return !(orient === "y" && axis.orient === "right");
 }
-function runTransition(args) {
-  const { svg, prevLayout, nextLayout, animation, onComplete, fromSnapshot, manual, canvas } = args;
-  const update = animation.update;
-  const exit = animation.exit ?? { ...EXIT_DEFAULTS };
-  const totalMs = Math.max(update.duration, exit.duration);
-  const enterDelay = 0.4 * update.duration;
-  const enterDuration = update.duration - enterDelay;
-  const marksContainer = svg.querySelector(".oc-marks");
-  if (!marksContainer) {
-    onComplete();
-    return {
-      cancel() {
-      },
-      get running() {
-        return false;
-      },
-      snapshot() {
-        return /* @__PURE__ */ new Map();
-      },
-      step() {
-        return false;
-      },
-      totalMs: 0
-    };
-  }
-  const tweens = [];
-  const ghosts = [];
-  const defs = svg.querySelector("defs");
-  let ghostGradientMap = /* @__PURE__ */ new Map();
-  if (defs) {
-    const nextKeySet = new Set(nextLayout.marks.filter((m) => m.key).map((m) => m.key));
-    const exitingMarks = prevLayout.marks.filter(
-      (m) => m.key && !nextKeySet.has(m.key) && "fill" in m
-    );
-    const gradientMarks = exitingMarks.filter(
-      (m) => "fill" in m && isGradientDef(m.fill)
-    );
-    if (gradientMarks.length > 0) {
-      ghostGradientMap = buildGradientDefs(gradientMarks, defs);
+function buildCanvasGridlinesTween(prevLayout, nextLayout, layer, tweens) {
+  const live = layer.state.gridlines;
+  const index = [];
+  const fromPos = [];
+  const toPos = [];
+  const fromAlpha = [];
+  const toAlpha = [];
+  const prevAxes = canvasGridlineAxes(prevLayout);
+  const nextAxes = canvasGridlineAxes(nextLayout);
+  let cursor = 0;
+  for (let a = 0; a < nextAxes.length; a++) {
+    const nextAxis = nextAxes[a].axis;
+    const orient = nextAxes[a].orient;
+    if (!axisEmitsGridlines(nextAxis, orient)) continue;
+    const prevAxis = prevAxes[a].axis;
+    const deltas = axisEmitsGridlines(prevAxis, orient) ? computeGridlineDeltas(prevAxis, nextAxis) : null;
+    const valueAtPosition = /* @__PURE__ */ new Map();
+    for (const tick of nextAxis.ticks) {
+      valueAtPosition.set(tick.position, serializeKeyValue2(tick.value));
+    }
+    for (const gridline of nextAxis.gridlines) {
+      const slot = cursor++;
+      if (slot >= live.length) break;
+      const key = valueAtPosition.get(gridline.position);
+      const prevPos = key !== void 0 ? deltas?.prevGridByValue.get(key) : void 0;
+      index.push(slot);
+      toPos.push(gridline.position);
+      toAlpha.push(live[slot].alpha);
+      if (prevPos !== void 0) {
+        fromPos.push(prevPos);
+        fromAlpha.push(live[slot].alpha);
+      } else {
+        fromPos.push(gridline.position);
+        fromAlpha.push(0);
+      }
     }
   }
-  const hasRects = prevLayout.marks.some((m) => m.type === "rect") || nextLayout.marks.some((m) => m.type === "rect");
-  const hasLines = prevLayout.marks.some((m) => m.type === "line") || nextLayout.marks.some((m) => m.type === "line");
-  const hasAreas = prevLayout.marks.some((m) => m.type === "area") || nextLayout.marks.some((m) => m.type === "area");
-  const hasPoints = prevLayout.marks.some((m) => m.type === "point") || nextLayout.marks.some((m) => m.type === "point");
-  const hasRules = prevLayout.marks.some((m) => m.type === "rule") || nextLayout.marks.some((m) => m.type === "rule");
-  const hasTicks = prevLayout.marks.some((m) => m.type === "tick") || nextLayout.marks.some((m) => m.type === "tick");
-  const hasTextMarks = prevLayout.marks.some((m) => m.type === "textMark") || nextLayout.marks.some((m) => m.type === "textMark");
-  if (hasRects) {
-    buildRectTweens(
-      prevLayout,
-      nextLayout,
-      marksContainer,
-      tweens,
-      ghosts,
-      ghostGradientMap,
-      fromSnapshot
-    );
+  if (index.length === 0) return;
+  tweens.push({
+    tweenType: "canvasGridlines",
+    kind: "update",
+    layer,
+    index: Uint32Array.from(index),
+    fromPos: Float32Array.from(fromPos),
+    toPos: Float32Array.from(toPos),
+    fromAlpha: Float32Array.from(fromAlpha),
+    toAlpha: Float32Array.from(toAlpha)
+  });
+}
+function applyCanvasGridlinesState(tw, elapsed, update, enterDelay, enterDuration) {
+  const live = tw.layer.state.gridlines;
+  const easedUpdate = cubicOut(Math.min(elapsed / update.duration, 1));
+  const tEnter = elapsed < enterDelay ? 0 : Math.min((elapsed - enterDelay) / enterDuration, 1);
+  const easedEnter = cubicOut(tEnter);
+  for (let i = 0; i < tw.index.length; i++) {
+    const g = live[tw.index[i]];
+    g.position = tw.fromPos[i] + (tw.toPos[i] - tw.fromPos[i]) * easedUpdate;
+    const from = tw.fromAlpha[i];
+    const to = tw.toAlpha[i];
+    g.alpha = from === to ? to : from + (to - from) * easedEnter;
   }
-  if (hasLines) {
-    buildLineTweens(prevLayout, nextLayout, marksContainer, tweens, ghosts, fromSnapshot);
+}
+function snapCanvasGridlinesToFinal(tw) {
+  const live = tw.layer.state.gridlines;
+  for (let i = 0; i < tw.index.length; i++) {
+    const g = live[tw.index[i]];
+    g.position = tw.toPos[i];
+    g.alpha = tw.toAlpha[i];
   }
-  if (hasAreas) {
-    buildAreaTweens(
-      prevLayout,
-      nextLayout,
-      marksContainer,
-      tweens,
-      ghosts,
-      ghostGradientMap,
-      fromSnapshot
-    );
+}
+function snapCanvasPointsToFinal(tw) {
+  const soa = tw.layer.state.marks;
+  for (let s = 0; s < tw.soaIndex.length; s++) {
+    const i = tw.soaIndex[s];
+    soa.x[i] = tw.toCx[s];
+    soa.y[i] = tw.toCy[s];
+    soa.r[i] = tw.toR[s];
   }
-  if (hasPoints) {
-    if (canvas) {
-      buildCanvasPointsTween(prevLayout, nextLayout, canvas, tweens, fromSnapshot);
-    } else {
-      buildPointTweens(
-        prevLayout,
-        nextLayout,
-        marksContainer,
-        tweens,
-        ghosts,
-        ghostGradientMap,
-        fromSnapshot
-      );
-    }
+  tw.layer.state.exiting = null;
+  tw.layer.state.enterAlpha = null;
+}
+
+// src/transition/interpolate.ts
+import { buildAreaPath, buildLinePath } from "@opendata-ai/openchart-engine";
+function geomFromMark(m) {
+  return { x: m.x, y: m.y, width: m.width, height: m.height };
+}
+function applyGeomToElement(el, geom, mark) {
+  const shapeEl = el.querySelector("rect, path");
+  if (!shapeEl) return;
+  const sides = mark.cornerRadiusSides;
+  const partialCorners = !!sides && (!sides.tl || !sides.tr || !sides.br || !sides.bl) && !!mark.cornerRadius;
+  if (partialCorners && shapeEl.tagName === "path") {
+    const tempMark = { ...mark, ...geom };
+    shapeEl.setAttribute("d", rectPathWithCorners(tempMark, sides));
+  } else {
+    shapeEl.setAttribute("x", String(geom.x));
+    shapeEl.setAttribute("y", String(geom.y));
+    shapeEl.setAttribute("width", String(geom.width));
+    shapeEl.setAttribute("height", String(geom.height));
   }
-  if (hasRules) {
-    buildRuleTweens(prevLayout, nextLayout, marksContainer, tweens, ghosts, fromSnapshot);
+}
+function lerpGeom(from, to, t) {
+  return {
+    x: from.x + (to.x - from.x) * t,
+    y: from.y + (to.y - from.y) * t,
+    width: from.width + (to.width - from.width) * t,
+    height: from.height + (to.height - from.height) * t
+  };
+}
+function lerpPoint(a, b, t) {
+  return { x: a.x + (b.x - a.x) * t, y: a.y + (b.y - a.y) * t };
+}
+function normalizePointArrays(prevPoints, nextPoints, prevKeys, nextKeys) {
+  const nextKeySet = new Set(nextKeys);
+  const survivors = prevKeys.filter((k) => nextKeySet.has(k));
+  if (survivors.length === 0) {
+    return [prevPoints, nextPoints];
   }
-  if (hasTicks) {
-    buildTickTweens(prevLayout, nextLayout, marksContainer, tweens, ghosts, fromSnapshot);
+  const prevByKey = /* @__PURE__ */ new Map();
+  for (let i = 0; i < prevKeys.length; i++) {
+    prevByKey.set(prevKeys[i], prevPoints[i]);
   }
-  if (hasTextMarks) {
-    buildTextMarkTweens(prevLayout, nextLayout, marksContainer, tweens, ghosts, fromSnapshot);
+  const nextByKey = /* @__PURE__ */ new Map();
+  for (let i = 0; i < nextKeys.length; i++) {
+    nextByKey.set(nextKeys[i], nextPoints[i]);
   }
-  buildAxisTweens(svg, prevLayout, nextLayout, tweens, ghosts);
-  if (canvas) {
-    buildCanvasGridlinesTween(prevLayout, nextLayout, canvas, tweens);
+  const merged = mergeKeyOrder(prevKeys, nextKeys);
+  const mergedIndex = /* @__PURE__ */ new Map();
+  for (let i = 0; i < merged.length; i++) {
+    mergedIndex.set(merged[i], i);
   }
-  buildColorTweens(prevLayout, nextLayout, marksContainer, tweens);
-  buildAnnotationTweens(svg, prevLayout, nextLayout, tweens);
-  const secondaryEls = collectSecondaryElements(svg);
-  const secondaryOriginalOpacity = secondaryEls.map((el) => el.style.opacity ?? "");
-  for (const tw of tweens) {
-    applyTweenState(tw, 0, update, exit, enterDelay, enterDuration);
+  const fromPts = [];
+  const toPts = [];
+  for (const key of merged) {
+    const inPrev = prevByKey.has(key);
+    const inNext = nextByKey.has(key);
+    if (inPrev && inNext) {
+      fromPts.push(prevByKey.get(key));
+      toPts.push(nextByKey.get(key));
+    } else if (inNext && !inPrev) {
+      const nextPt = nextByKey.get(key);
+      toPts.push(nextPt);
+      fromPts.push(findInsertionPosition(key, merged, mergedIndex, prevByKey, nextByKey, nextPt));
+    } else if (inPrev && !inNext) {
+      const prevPt = prevByKey.get(key);
+      fromPts.push(prevPt);
+      toPts.push(findRemovalPosition(key, merged, mergedIndex, prevByKey, nextByKey, prevPt));
+    }
   }
-  canvas?.repaint();
-  canvas?.setInteractionSuspended(true);
-  for (const el of secondaryEls) {
-    el.style.opacity = "0";
+  return [fromPts, toPts];
+}
+function mergeKeyOrder(prevKeys, nextKeys) {
+  const nextIndex = /* @__PURE__ */ new Map();
+  for (let i = 0; i < nextKeys.length; i++) {
+    if (!nextIndex.has(nextKeys[i])) nextIndex.set(nextKeys[i], i);
   }
-  let rafId = null;
-  let running = true;
-  let startTime = null;
-  let lastElapsed = 0;
-  const nextLineMarks = nextLayout.marks.filter((m) => m.type === "line");
-  const nextAreaMarks = nextLayout.marks.filter((m) => m.type === "area");
-  function tick(now) {
-    if (!running) return;
-    if (startTime === null) startTime = now;
-    const elapsed = now - startTime;
-    lastElapsed = elapsed;
-    const tGlobal = Math.min(elapsed / totalMs, 1);
-    for (const tw of tweens) {
-      applyTweenState(tw, elapsed, update, exit, enterDelay, enterDuration);
-    }
-    applySecondaryOpacity(secondaryEls, elapsed, enterDelay, enterDuration);
-    canvas?.repaint();
-    if (tGlobal >= 1) {
-      finish();
-    } else {
-      rafId = requestAnimationFrame(tick);
-    }
+  const prevIndex = /* @__PURE__ */ new Map();
+  for (let i = 0; i < prevKeys.length; i++) {
+    if (!prevIndex.has(prevKeys[i])) prevIndex.set(prevKeys[i], i);
   }
-  function settleCanvas() {
-    if (!canvas) return;
-    canvas.repaint();
-    canvas.rebuildIndex();
-    canvas.setInteractionSuspended(false);
-  }
-  function finish() {
-    if (!running) return;
-    running = false;
-    rafId = null;
-    snapToFinal();
-    removeGhosts();
-    settleCanvas();
-    for (let i = 0; i < secondaryEls.length; i++) {
-      secondaryEls[i].style.opacity = secondaryOriginalOpacity[i];
-    }
-    onComplete();
-  }
-  function snapToFinal() {
-    for (const tw of tweens) {
-      snapTweenToFinal(tw);
+  const result = [];
+  const added = /* @__PURE__ */ new Set();
+  let pi = 0;
+  let ni = 0;
+  while (pi < prevKeys.length && ni < nextKeys.length) {
+    const pk = prevKeys[pi];
+    const nk = nextKeys[ni];
+    if (added.has(pk)) {
+      pi++;
+      continue;
     }
-    for (const mark of nextLineMarks) {
-      if (!mark.key) continue;
-      const el = marksContainer.querySelector(`[data-key="${mark.key}"]`);
-      if (el) applyFinalLinePath(el, mark);
+    if (added.has(nk)) {
+      ni++;
+      continue;
     }
-    for (const mark of nextAreaMarks) {
-      if (!mark.key) continue;
-      const el = marksContainer.querySelector(`[data-key="${mark.key}"]`);
-      if (el) applyFinalAreaPaths(el, mark);
+    if (pk === nk) {
+      result.push(pk);
+      added.add(pk);
+      pi++;
+      ni++;
+    } else {
+      const pkInNext = nextIndex.has(pk) && nextIndex.get(pk) >= ni ? nextIndex.get(pk) : -1;
+      const nkInPrev = prevIndex.has(nk) && prevIndex.get(nk) >= pi ? prevIndex.get(nk) : -1;
+      if (pkInNext === -1 && nkInPrev === -1) {
+        result.push(pk);
+        added.add(pk);
+        pi++;
+      } else if (pkInNext === -1) {
+        result.push(pk);
+        added.add(pk);
+        pi++;
+      } else if (nkInPrev === -1) {
+        result.push(nk);
+        added.add(nk);
+        ni++;
+      } else {
+        if (pkInNext <= nkInPrev) {
+          result.push(pk);
+          added.add(pk);
+          pi++;
+        } else {
+          result.push(nk);
+          added.add(nk);
+          ni++;
+        }
+      }
     }
   }
-  function removeGhosts() {
-    for (const ghost of ghosts) {
-      ghost.parentNode?.removeChild(ghost);
+  while (pi < prevKeys.length) {
+    if (!added.has(prevKeys[pi])) {
+      result.push(prevKeys[pi]);
+      added.add(prevKeys[pi]);
     }
+    pi++;
   }
-  function captureSnapshot() {
-    const snap = /* @__PURE__ */ new Map();
-    const tUpdate = Math.min(lastElapsed / update.duration, 1);
-    const easedUpdate = cubicOut(tUpdate);
-    for (const tw of tweens) {
-      if (tw.kind !== "update") continue;
-      if (tw.tweenType === "canvasPoints") {
-        for (let s = 0; s < tw.soaIndex.length; s++) {
-          snap.set(tw.soaKeys[s], {
-            type: "point",
-            cx: tw.fromCx[s] + (tw.toCx[s] - tw.fromCx[s]) * easedUpdate,
-            cy: tw.fromCy[s] + (tw.toCy[s] - tw.fromCy[s]) * easedUpdate,
-            r: tw.fromR[s] + (tw.toR[s] - tw.fromR[s]) * easedUpdate
-          });
-        }
-        continue;
-      }
-      const key = getKeyForTween(tw);
-      if (!key) continue;
-      switch (tw.tweenType) {
-        case "rect": {
-          const g = lerpGeom(tw.from, tw.to, easedUpdate);
-          snap.set(key, { type: "rect", ...g });
-          break;
-        }
-        case "point": {
-          const cx = tw.fromCx + (tw.toCx - tw.fromCx) * easedUpdate;
-          const cy = tw.fromCy + (tw.toCy - tw.fromCy) * easedUpdate;
-          const entry = { type: "point", cx, cy };
-          if (tw.fromR !== void 0 && tw.toR !== void 0) {
-            entry.r = tw.fromR + (tw.toR - tw.fromR) * easedUpdate;
-          }
-          snap.set(key, entry);
-          break;
-        }
-        case "rule":
-        case "tick": {
-          snap.set(key, {
-            type: tw.tweenType,
-            x1: tw.fromX1 + (tw.toX1 - tw.fromX1) * easedUpdate,
-            y1: tw.fromY1 + (tw.toY1 - tw.fromY1) * easedUpdate,
-            x2: tw.fromX2 + (tw.toX2 - tw.fromX2) * easedUpdate,
-            y2: tw.fromY2 + (tw.toY2 - tw.fromY2) * easedUpdate
-          });
-          break;
-        }
-        case "textMark": {
-          snap.set(key, {
-            type: "textMark",
-            x: tw.fromX + (tw.toX - tw.fromX) * easedUpdate,
-            y: tw.fromY + (tw.toY - tw.fromY) * easedUpdate
-          });
-          break;
-        }
-        case "line": {
-          const pts = interpolatePoints(tw.fromPts, tw.toPts, easedUpdate);
-          const d = buildLinePath(pts, tw.interpolate);
-          snap.set(key, { type: "line", d });
-          break;
-        }
-        case "area": {
-          const top = interpolatePoints(tw.fromTop, tw.toTop, easedUpdate);
-          const bottom = interpolatePoints(tw.fromBottom, tw.toBottom, easedUpdate);
-          const d = buildAreaPath(top, bottom, tw.interpolate);
-          let topD;
-          if (tw.hasStroke) {
-            topD = buildLinePath(top, tw.interpolate);
-          }
-          snap.set(key, { type: "area", d, topD });
-          break;
-        }
-      }
+  while (ni < nextKeys.length) {
+    if (!added.has(nextKeys[ni])) {
+      result.push(nextKeys[ni]);
+      added.add(nextKeys[ni]);
     }
-    return snap;
-  }
-  if (!manual) {
-    rafId = requestAnimationFrame(tick);
+    ni++;
   }
-  return {
-    cancel() {
-      if (!running) return;
-      running = false;
-      if (rafId !== null) {
-        cancelAnimationFrame(rafId);
-        rafId = null;
-      }
-      snapToFinal();
-      removeGhosts();
-      settleCanvas();
-      for (let i = 0; i < secondaryEls.length; i++) {
-        secondaryEls[i].style.opacity = secondaryOriginalOpacity[i];
-      }
-    },
-    get running() {
-      return running;
-    },
-    snapshot() {
-      return captureSnapshot();
-    },
-    step(elapsedMs) {
-      lastElapsed = elapsedMs;
-      for (const tw of tweens) {
-        applyTweenState(tw, elapsedMs, update, exit, enterDelay, enterDuration);
-      }
-      applySecondaryOpacity(secondaryEls, elapsedMs, enterDelay, enterDuration);
-      if (elapsedMs >= totalMs) {
-        snapToFinal();
-        removeGhosts();
-        settleCanvas();
-        return false;
-      }
-      canvas?.repaint();
-      return true;
-    },
-    totalMs
-  };
-}
-function collectSecondaryElements(svg) {
-  const els = [];
-  const epLabels = svg.querySelector(".oc-endpoint-labels");
-  if (epLabels) els.push(epLabels);
-  const markLabels = svg.querySelector(".oc-mark-labels");
-  if (markLabels) els.push(markLabels);
-  return els;
+  return result;
 }
-function applySecondaryOpacity(els, elapsed, enterDelay, enterDuration) {
-  if (els.length === 0) return;
-  let t;
-  if (elapsed < enterDelay) {
-    t = 0;
-  } else {
-    t = Math.min((elapsed - enterDelay) / enterDuration, 1);
+function findInsertionPosition(key, merged, mergedIndex, prevByKey, nextByKey, nextPt) {
+  const idx = mergedIndex.get(key) ?? -1;
+  let beforeKey = null;
+  for (let i = idx - 1; i >= 0; i--) {
+    if (prevByKey.has(merged[i]) && nextByKey.has(merged[i])) {
+      beforeKey = merged[i];
+      break;
+    }
   }
-  const opacity = String(cubicOut(t));
-  for (const el of els) {
-    el.style.opacity = opacity;
+  let afterKey = null;
+  for (let i = idx + 1; i < merged.length; i++) {
+    if (prevByKey.has(merged[i]) && nextByKey.has(merged[i])) {
+      afterKey = merged[i];
+      break;
+    }
   }
-}
-function getKeyForTween(tw) {
-  if (tw.tweenType === "canvasPoints" || tw.tweenType === "canvasGridlines") return null;
-  if ("ghost" in tw && tw.ghost) return null;
-  return tw.el.getAttribute("data-key");
-}
-function resolveLineElement(el) {
-  return el.tagName === "line" ? el : el.querySelector("line") ?? el;
-}
-function applyTweenState(tw, elapsed, update, exit, enterDelay, enterDuration) {
-  if (tw.tweenType === "canvasPoints") {
-    applyCanvasPointsState(tw, elapsed, update, exit, enterDelay, enterDuration);
-    return;
+  if (beforeKey && afterKey) {
+    const beforeNext = nextByKey.get(beforeKey);
+    const afterNext = nextByKey.get(afterKey);
+    const beforePrev = prevByKey.get(beforeKey);
+    const afterPrev = prevByKey.get(afterKey);
+    const range = afterNext.x - beforeNext.x;
+    const t = range === 0 ? 0.5 : (nextPt.x - beforeNext.x) / range;
+    return lerpPoint(beforePrev, afterPrev, Math.max(0, Math.min(1, t)));
   }
-  if (tw.tweenType === "canvasGridlines") {
-    applyCanvasGridlinesState(tw, elapsed, update, enterDelay, enterDuration);
-    return;
+  if (beforeKey) {
+    return { ...prevByKey.get(beforeKey) };
   }
-  let tLocal;
-  if (tw.kind === "exit") {
-    tLocal = Math.min(elapsed / exit.duration, 1);
+  if (afterKey) {
+    return { ...prevByKey.get(afterKey) };
+  }
+  return nextPt;
+}
+function findRemovalPosition(key, merged, mergedIndex, prevByKey, nextByKey, prevPt) {
+  const idx = mergedIndex.get(key) ?? -1;
+  let beforeKey = null;
+  for (let i = idx - 1; i >= 0; i--) {
+    if (prevByKey.has(merged[i]) && nextByKey.has(merged[i])) {
+      beforeKey = merged[i];
+      break;
+    }
+  }
+  let afterKey = null;
+  for (let i = idx + 1; i < merged.length; i++) {
+    if (prevByKey.has(merged[i]) && nextByKey.has(merged[i])) {
+      afterKey = merged[i];
+      break;
+    }
+  }
+  if (beforeKey && afterKey) {
+    const beforePrev = prevByKey.get(beforeKey);
+    const afterPrev = prevByKey.get(afterKey);
+    const beforeNext = nextByKey.get(beforeKey);
+    const afterNext = nextByKey.get(afterKey);
+    const range = afterPrev.x - beforePrev.x;
+    const t = range === 0 ? 0.5 : (prevPt.x - beforePrev.x) / range;
+    return lerpPoint(beforeNext, afterNext, Math.max(0, Math.min(1, t)));
+  }
+  if (beforeKey) {
+    return { ...nextByKey.get(beforeKey) };
+  }
+  if (afterKey) {
+    return { ...nextByKey.get(afterKey) };
+  }
+  return prevPt;
+}
+function interpolatePoints(fromPts, toPts, t) {
+  const len = Math.min(fromPts.length, toPts.length);
+  const result = new Array(len);
+  for (let i = 0; i < len; i++) {
+    result[i] = lerpPoint(fromPts[i], toPts[i], t);
+  }
+  return result;
+}
+function applyLinePath(el, points, interpolate) {
+  const pathEl = el.querySelector("path");
+  if (!pathEl) return;
+  pathEl.setAttribute("d", buildLinePath(points, interpolate));
+}
+function applyAreaPaths(el, topPoints, bottomPoints, interpolate, hasStroke) {
+  const paths = el.querySelectorAll("path");
+  if (paths[0]) {
+    paths[0].setAttribute("d", buildAreaPath(topPoints, bottomPoints, interpolate));
+  }
+  if (hasStroke && paths[1]) {
+    paths[1].setAttribute("d", buildLinePath(topPoints, interpolate));
+  }
+}
+function applyFinalLinePath(el, mark) {
+  const pathEl = el.querySelector("path");
+  if (!pathEl || !mark.path) return;
+  pathEl.setAttribute("d", mark.path);
+}
+function applyFinalAreaPaths(el, mark) {
+  const paths = el.querySelectorAll("path");
+  if (paths[0]) {
+    paths[0].setAttribute("d", mark.path);
+  }
+  if (paths[1] && mark.topPath) {
+    paths[1].setAttribute("d", mark.topPath);
+  }
+}
+
+// src/transition/apply.ts
+function getKeyForTween(tw) {
+  if (tw.tweenType === "canvasPoints" || tw.tweenType === "canvasGridlines") return null;
+  if ("ghost" in tw && tw.ghost) return null;
+  return tw.el.getAttribute("data-key");
+}
+function resolveLineElement(el) {
+  return el.tagName === "line" ? el : el.querySelector("line") ?? el;
+}
+function applyTweenState(tw, elapsed, update, exit, enterDelay, enterDuration) {
+  if (tw.tweenType === "canvasPoints") {
+    applyCanvasPointsState(tw, elapsed, update, exit, enterDelay, enterDuration);
+    return;
+  }
+  if (tw.tweenType === "canvasGridlines") {
+    applyCanvasGridlinesState(tw, elapsed, update, enterDelay, enterDuration);
+    return;
+  }
+  let tLocal;
+  if (tw.kind === "exit") {
+    tLocal = Math.min(elapsed / exit.duration, 1);
   } else if (tw.kind === "enter") {
     if (elapsed < enterDelay) {
       tLocal = 0;
@@ -2160,12 +2315,41 @@ function snapTweenToFinal(tw) {
     tw.el.setAttribute("opacity", tw.suppressedOpacity);
   }
 }
+
+// src/transition/dom-index.ts
+function buildMarkDomIndex(marksContainer) {
+  const anyM = /* @__PURE__ */ new Map();
+  const pointM = /* @__PURE__ */ new Map();
+  const ruleM = /* @__PURE__ */ new Map();
+  const tickM = /* @__PURE__ */ new Map();
+  const textM = /* @__PURE__ */ new Map();
+  for (const node of marksContainer.querySelectorAll("[data-key]")) {
+    const el = node;
+    const key = el.getAttribute("data-key");
+    if (!key) continue;
+    if (!anyM.has(key)) anyM.set(key, el);
+    const cl = el.classList;
+    if (el.tagName === "circle" && cl.contains("oc-mark-point")) {
+      if (!pointM.has(key)) pointM.set(key, el);
+    } else if (cl.contains("oc-mark-rule")) {
+      if (!ruleM.has(key)) ruleM.set(key, el);
+    } else if (cl.contains("oc-mark-tick")) {
+      if (!tickM.has(key)) tickM.set(key, el);
+    } else if (cl.contains("oc-mark-text")) {
+      if (!textM.has(key)) textM.set(key, el);
+    }
+  }
+  const g = (m) => (key) => m.get(key) ?? null;
+  return { any: g(anyM), point: g(pointM), rule: g(ruleM), tick: g(tickM), text: g(textM) };
+}
+
+// src/transition/svg-tweens.ts
 function resolveGhostGradientFill(mark, ghostGradientMap) {
   if (!mark.fill || typeof mark.fill === "string" || ghostGradientMap.size === 0) return mark;
   const resolved = resolveMarkFill(mark.fill, ghostGradientMap);
   return { ...mark, fill: resolved };
 }
-function buildRectTweens(prevLayout, nextLayout, marksContainer, tweens, ghosts, ghostGradientMap, fromSnapshot) {
+function buildRectTweens(prevLayout, nextLayout, marksContainer, dom, tweens, ghosts, ghostGradientMap, fromSnapshot) {
   const prevRects = prevLayout.marks.filter((m) => m.type === "rect");
   const nextRects = nextLayout.marks.filter((m) => m.type === "rect");
   const prevByKey = /* @__PURE__ */ new Map();
@@ -2179,7 +2363,7 @@ function buildRectTweens(prevLayout, nextLayout, marksContainer, tweens, ghosts,
   for (const [key, next] of nextByKey) {
     const prev = prevByKey.get(key);
     if (!prev) continue;
-    const el = marksContainer.querySelector(`[data-key="${key}"]`);
+    const el = dom.any(key);
     if (!el) continue;
     let fromGeom = geomFromMark(prev);
     const snap = fromSnapshot?.get(key);
@@ -2197,7 +2381,7 @@ function buildRectTweens(prevLayout, nextLayout, marksContainer, tweens, ghosts,
   }
   for (const [key, next] of nextByKey) {
     if (prevByKey.has(key)) continue;
-    const el = marksContainer.querySelector(`[data-key="${key}"]`);
+    const el = dom.any(key);
     if (!el) continue;
     let fromGeom;
     if (next.orient === "horizontal") {
@@ -2244,7 +2428,7 @@ function buildRectTweens(prevLayout, nextLayout, marksContainer, tweens, ghosts,
     });
   }
 }
-function buildLineTweens(prevLayout, nextLayout, marksContainer, tweens, ghosts, fromSnapshot) {
+function buildLineTweens(prevLayout, nextLayout, marksContainer, dom, tweens, ghosts, fromSnapshot) {
   const prevLines = prevLayout.marks.filter((m) => m.type === "line");
   const nextLines = nextLayout.marks.filter((m) => m.type === "line");
   const prevByKey = /* @__PURE__ */ new Map();
@@ -2258,7 +2442,7 @@ function buildLineTweens(prevLayout, nextLayout, marksContainer, tweens, ghosts,
   for (const [key, next] of nextByKey) {
     const prev = prevByKey.get(key);
     if (!prev) continue;
-    const el = marksContainer.querySelector(`[data-key="${key}"]`);
+    const el = dom.any(key);
     if (!el) continue;
     const snap = fromSnapshot?.get(key);
     if (snap && snap.type === "line") {
@@ -2349,7 +2533,7 @@ function buildLineTweens(prevLayout, nextLayout, marksContainer, tweens, ghosts,
   }
   for (const [key, next] of nextByKey) {
     if (prevByKey.has(key)) continue;
-    const el = marksContainer.querySelector(`[data-key="${key}"]`);
+    const el = dom.any(key);
     if (!el) continue;
     tweens.push({
       tweenType: "line",
@@ -2387,7 +2571,7 @@ function buildLineTweens(prevLayout, nextLayout, marksContainer, tweens, ghosts,
     });
   }
 }
-function buildAreaTweens(prevLayout, nextLayout, marksContainer, tweens, ghosts, ghostGradientMap, fromSnapshot) {
+function buildAreaTweens(prevLayout, nextLayout, marksContainer, dom, tweens, ghosts, ghostGradientMap, fromSnapshot) {
   const prevAreas = prevLayout.marks.filter((m) => m.type === "area");
   const nextAreas = nextLayout.marks.filter((m) => m.type === "area");
   const prevByKey = /* @__PURE__ */ new Map();
@@ -2401,7 +2585,7 @@ function buildAreaTweens(prevLayout, nextLayout, marksContainer, tweens, ghosts,
   for (const [key, next] of nextByKey) {
     const prev = prevByKey.get(key);
     if (!prev) continue;
-    const el = marksContainer.querySelector(`[data-key="${key}"]`);
+    const el = dom.any(key);
     if (!el) continue;
     const snap = fromSnapshot?.get(key);
     if (snap && snap.type === "area") {
@@ -2523,7 +2707,7 @@ function buildAreaTweens(prevLayout, nextLayout, marksContainer, tweens, ghosts,
   }
   for (const [key, next] of nextByKey) {
     if (prevByKey.has(key)) continue;
-    const el = marksContainer.querySelector(`[data-key="${key}"]`);
+    const el = dom.any(key);
     if (!el) continue;
     tweens.push({
       tweenType: "area",
@@ -2570,7 +2754,7 @@ function buildAreaTweens(prevLayout, nextLayout, marksContainer, tweens, ghosts,
     });
   }
 }
-function buildPointTweens(prevLayout, nextLayout, marksContainer, tweens, ghosts, ghostGradientMap, fromSnapshot) {
+function buildPointTweens(prevLayout, nextLayout, marksContainer, dom, tweens, ghosts, ghostGradientMap, fromSnapshot) {
   const prevPoints = prevLayout.marks.filter((m) => m.type === "point");
   const nextPoints = nextLayout.marks.filter((m) => m.type === "point");
   const prevByKey = /* @__PURE__ */ new Map();
@@ -2584,9 +2768,7 @@ function buildPointTweens(prevLayout, nextLayout, marksContainer, tweens, ghosts
   for (const [key, next] of nextByKey) {
     const prev = prevByKey.get(key);
     if (!prev) continue;
-    const el = marksContainer.querySelector(
-      `circle.oc-mark-point[data-key="${key}"]`
-    );
+    const el = dom.point(key);
     if (!el) continue;
     const renderedOpacity = el.getAttribute("opacity");
     const isSuppressed = renderedOpacity === "0";
@@ -2617,9 +2799,7 @@ function buildPointTweens(prevLayout, nextLayout, marksContainer, tweens, ghosts
   }
   for (const [key, next] of nextByKey) {
     if (prevByKey.has(key)) continue;
-    const el = marksContainer.querySelector(
-      `circle.oc-mark-point[data-key="${key}"]`
-    );
+    const el = dom.point(key);
     if (!el) continue;
     const renderedOpacity = el.getAttribute("opacity");
     const targetOpacity = renderedOpacity != null ? Number(renderedOpacity) : 1;
@@ -2661,310 +2841,96 @@ function buildPointTweens(prevLayout, nextLayout, marksContainer, tweens, ghosts
     });
   }
 }
-function buildCanvasPointsTween(prevLayout, nextLayout, layer, tweens, fromSnapshot) {
-  const prevPoints = prevLayout.marks.filter((m) => m.type === "point");
-  const nextPoints = nextLayout.marks.filter((m) => m.type === "point");
+function buildRuleTweens(prevLayout, nextLayout, marksContainer, dom, tweens, ghosts, fromSnapshot) {
+  const prevRules = prevLayout.marks.filter((m) => m.type === "rule");
+  const nextRules = nextLayout.marks.filter((m) => m.type === "rule");
   const prevByKey = /* @__PURE__ */ new Map();
-  for (const m of prevPoints) {
+  for (const m of prevRules) {
     if (m.key) prevByKey.set(m.key, m);
   }
-  const soa = layer.state.marks;
-  const survivors = [];
-  const enters = [];
-  for (let i = 0; i < soa.n; i++) {
-    const key = soa.keys[i];
-    if (key !== void 0 && prevByKey.has(key)) survivors.push(i);
-    else enters.push(i);
-  }
-  const exits = [];
-  const nextKeys = /* @__PURE__ */ new Set();
-  for (const m of nextPoints) {
-    if (m.key) nextKeys.add(m.key);
-  }
-  for (const [key, prev] of prevByKey) {
-    if (!nextKeys.has(key)) exits.push(prev);
+  const nextByKey = /* @__PURE__ */ new Map();
+  for (const m of nextRules) {
+    if (m.key) nextByKey.set(m.key, m);
   }
-  const sn = survivors.length;
-  const soaIndex = new Uint32Array(sn);
-  const fromCx = new Float32Array(sn);
-  const fromCy = new Float32Array(sn);
-  const fromR = new Float32Array(sn);
-  const toCx = new Float32Array(sn);
-  const toCy = new Float32Array(sn);
-  const toR = new Float32Array(sn);
-  const soaKeys = new Array(sn);
-  for (let s = 0; s < sn; s++) {
-    const i = survivors[s];
-    const key = soa.keys[i];
+  for (const [key, next] of nextByKey) {
     const prev = prevByKey.get(key);
-    let px = prev.cx;
-    let py = prev.cy;
-    let pr = prev.r;
+    if (!prev) continue;
+    const el = dom.rule(key);
+    if (!el) continue;
+    let fromX1 = prev.x1;
+    let fromY1 = prev.y1;
+    let fromX2 = prev.x2;
+    let fromY2 = prev.y2;
     const snap = fromSnapshot?.get(key);
-    if (snap && snap.type === "point") {
-      px = snap.cx;
-      py = snap.cy;
-      if (snap.r !== void 0) pr = snap.r;
+    if (snap && snap.type === "rule") {
+      fromX1 = snap.x1;
+      fromY1 = snap.y1;
+      fromX2 = snap.x2;
+      fromY2 = snap.y2;
     }
-    soaIndex[s] = i;
-    soaKeys[s] = key;
-    fromCx[s] = px;
-    fromCy[s] = py;
-    fromR[s] = pr;
-    toCx[s] = soa.x[i];
-    toCy[s] = soa.y[i];
-    toR[s] = soa.r[i];
+    tweens.push({
+      tweenType: "rule",
+      kind: "update",
+      el,
+      fromX1,
+      fromY1,
+      fromX2,
+      fromY2,
+      toX1: next.x1,
+      toY1: next.y1,
+      toX2: next.x2,
+      toY2: next.y2
+    });
   }
-  const enterSoaIndex = Uint32Array.from(enters);
-  if (enters.length > 0) {
-    const alpha = new Float32Array(soa.n).fill(1);
-    for (const i of enters) alpha[i] = 0;
-    layer.state.enterAlpha = alpha;
+  for (const [key, next] of nextByKey) {
+    if (prevByKey.has(key)) continue;
+    const el = dom.rule(key);
+    if (!el) continue;
+    tweens.push({
+      tweenType: "rule",
+      kind: "enter",
+      el,
+      fromX1: next.x1,
+      fromY1: next.y1,
+      fromX2: next.x2,
+      fromY2: next.y2,
+      toX1: next.x1,
+      toY1: next.y1,
+      toX2: next.x2,
+      toY2: next.y2,
+      fromOpacity: 0,
+      toOpacity: 1
+    });
   }
-  const exitCx = new Float32Array(exits.length);
-  const exitCy = new Float32Array(exits.length);
-  const exitR = new Float32Array(exits.length);
-  const exitFill = new Array(exits.length);
-  for (let x = 0; x < exits.length; x++) {
-    const m = exits[x];
-    exitCx[x] = m.cx;
-    exitCy[x] = m.cy;
-    exitR[x] = m.r;
-    exitFill[x] = flattenFill(m.fill);
+  for (const [key, prev] of prevByKey) {
+    if (nextByKey.has(key)) continue;
+    const ghost = renderSingleMark(prev, 0);
+    if (!ghost) continue;
+    ghost.classList.add("oc-ghost");
+    ghost.setAttribute("aria-hidden", "true");
+    ghost.setAttribute("pointer-events", "none");
+    ghost.removeAttribute("data-key");
+    marksContainer.appendChild(ghost);
+    ghosts.push(ghost);
+    tweens.push({
+      tweenType: "rule",
+      kind: "exit",
+      el: ghost,
+      fromX1: prev.x1,
+      fromY1: prev.y1,
+      fromX2: prev.x2,
+      fromY2: prev.y2,
+      toX1: prev.x1,
+      toY1: prev.y1,
+      toX2: prev.x2,
+      toY2: prev.y2,
+      ghost,
+      fromOpacity: 1,
+      toOpacity: 0
+    });
   }
-  tweens.push({
-    tweenType: "canvasPoints",
-    kind: "update",
-    layer,
-    soaIndex,
-    fromCx,
-    fromCy,
-    fromR,
-    toCx,
-    toCy,
-    toR,
-    soaKeys,
-    enterSoaIndex,
-    exitCx,
-    exitCy,
-    exitR,
-    exitFill
-  });
 }
-function applyCanvasPointsState(tw, elapsed, update, exit, enterDelay, enterDuration) {
-  const soa = tw.layer.state.marks;
-  const easedUpdate = cubicOut(Math.min(elapsed / update.duration, 1));
-  for (let s = 0; s < tw.soaIndex.length; s++) {
-    const i = tw.soaIndex[s];
-    soa.x[i] = tw.fromCx[s] + (tw.toCx[s] - tw.fromCx[s]) * easedUpdate;
-    soa.y[i] = tw.fromCy[s] + (tw.toCy[s] - tw.fromCy[s]) * easedUpdate;
-    soa.r[i] = tw.fromR[s] + (tw.toR[s] - tw.fromR[s]) * easedUpdate;
-  }
-  const alpha = tw.layer.state.enterAlpha;
-  if (alpha && tw.enterSoaIndex.length > 0) {
-    const tEnter = elapsed < enterDelay ? 0 : Math.min((elapsed - enterDelay) / enterDuration, 1);
-    const easedEnter = cubicOut(tEnter);
-    for (let e = 0; e < tw.enterSoaIndex.length; e++) {
-      alpha[tw.enterSoaIndex[e]] = easedEnter;
-    }
-  }
-  if (tw.exitCx.length > 0) {
-    const easedExit = cubicOut(Math.min(elapsed / exit.duration, 1));
-    tw.layer.state.exiting = {
-      x: tw.exitCx,
-      y: tw.exitCy,
-      r: tw.exitR,
-      fill: tw.exitFill,
-      alpha: 1 - easedExit
-    };
-  }
-}
-function canvasGridlineAxes(layout) {
-  return [
-    { axis: layout.axes.y, orient: "y" },
-    { axis: layout.axes.y2, orient: "y" },
-    { axis: layout.axes.x, orient: "x" }
-  ];
-}
-function axisEmitsGridlines(axis, orient) {
-  if (!axis) return false;
-  return !(orient === "y" && axis.orient === "right");
-}
-function buildCanvasGridlinesTween(prevLayout, nextLayout, layer, tweens) {
-  const live = layer.state.gridlines;
-  const index = [];
-  const fromPos = [];
-  const toPos = [];
-  const fromAlpha = [];
-  const toAlpha = [];
-  const prevAxes = canvasGridlineAxes(prevLayout);
-  const nextAxes = canvasGridlineAxes(nextLayout);
-  let cursor = 0;
-  for (let a = 0; a < nextAxes.length; a++) {
-    const nextAxis = nextAxes[a].axis;
-    const orient = nextAxes[a].orient;
-    if (!axisEmitsGridlines(nextAxis, orient)) continue;
-    const prevAxis = prevAxes[a].axis;
-    const deltas = axisEmitsGridlines(prevAxis, orient) ? computeGridlineDeltas(prevAxis, nextAxis) : null;
-    const valueAtPosition = /* @__PURE__ */ new Map();
-    for (const tick of nextAxis.ticks) {
-      valueAtPosition.set(tick.position, serializeKeyValue(tick.value));
-    }
-    for (const gridline of nextAxis.gridlines) {
-      const slot = cursor++;
-      if (slot >= live.length) break;
-      const key = valueAtPosition.get(gridline.position);
-      const prevPos = key !== void 0 ? deltas?.prevGridByValue.get(key) : void 0;
-      index.push(slot);
-      toPos.push(gridline.position);
-      toAlpha.push(live[slot].alpha);
-      if (prevPos !== void 0) {
-        fromPos.push(prevPos);
-        fromAlpha.push(live[slot].alpha);
-      } else {
-        fromPos.push(gridline.position);
-        fromAlpha.push(0);
-      }
-    }
-  }
-  if (index.length === 0) return;
-  tweens.push({
-    tweenType: "canvasGridlines",
-    kind: "update",
-    layer,
-    index: Uint32Array.from(index),
-    fromPos: Float32Array.from(fromPos),
-    toPos: Float32Array.from(toPos),
-    fromAlpha: Float32Array.from(fromAlpha),
-    toAlpha: Float32Array.from(toAlpha)
-  });
-}
-function applyCanvasGridlinesState(tw, elapsed, update, enterDelay, enterDuration) {
-  const live = tw.layer.state.gridlines;
-  const easedUpdate = cubicOut(Math.min(elapsed / update.duration, 1));
-  const tEnter = elapsed < enterDelay ? 0 : Math.min((elapsed - enterDelay) / enterDuration, 1);
-  const easedEnter = cubicOut(tEnter);
-  for (let i = 0; i < tw.index.length; i++) {
-    const g = live[tw.index[i]];
-    g.position = tw.fromPos[i] + (tw.toPos[i] - tw.fromPos[i]) * easedUpdate;
-    const from = tw.fromAlpha[i];
-    const to = tw.toAlpha[i];
-    g.alpha = from === to ? to : from + (to - from) * easedEnter;
-  }
-}
-function snapCanvasGridlinesToFinal(tw) {
-  const live = tw.layer.state.gridlines;
-  for (let i = 0; i < tw.index.length; i++) {
-    const g = live[tw.index[i]];
-    g.position = tw.toPos[i];
-    g.alpha = tw.toAlpha[i];
-  }
-}
-function snapCanvasPointsToFinal(tw) {
-  const soa = tw.layer.state.marks;
-  for (let s = 0; s < tw.soaIndex.length; s++) {
-    const i = tw.soaIndex[s];
-    soa.x[i] = tw.toCx[s];
-    soa.y[i] = tw.toCy[s];
-    soa.r[i] = tw.toR[s];
-  }
-  tw.layer.state.exiting = null;
-  tw.layer.state.enterAlpha = null;
-}
-function buildRuleTweens(prevLayout, nextLayout, marksContainer, tweens, ghosts, fromSnapshot) {
-  const prevRules = prevLayout.marks.filter((m) => m.type === "rule");
-  const nextRules = nextLayout.marks.filter((m) => m.type === "rule");
-  const prevByKey = /* @__PURE__ */ new Map();
-  for (const m of prevRules) {
-    if (m.key) prevByKey.set(m.key, m);
-  }
-  const nextByKey = /* @__PURE__ */ new Map();
-  for (const m of nextRules) {
-    if (m.key) nextByKey.set(m.key, m);
-  }
-  for (const [key, next] of nextByKey) {
-    const prev = prevByKey.get(key);
-    if (!prev) continue;
-    const el = marksContainer.querySelector(
-      `.oc-mark-rule[data-key="${key}"]`
-    );
-    if (!el) continue;
-    let fromX1 = prev.x1;
-    let fromY1 = prev.y1;
-    let fromX2 = prev.x2;
-    let fromY2 = prev.y2;
-    const snap = fromSnapshot?.get(key);
-    if (snap && snap.type === "rule") {
-      fromX1 = snap.x1;
-      fromY1 = snap.y1;
-      fromX2 = snap.x2;
-      fromY2 = snap.y2;
-    }
-    tweens.push({
-      tweenType: "rule",
-      kind: "update",
-      el,
-      fromX1,
-      fromY1,
-      fromX2,
-      fromY2,
-      toX1: next.x1,
-      toY1: next.y1,
-      toX2: next.x2,
-      toY2: next.y2
-    });
-  }
-  for (const [key, next] of nextByKey) {
-    if (prevByKey.has(key)) continue;
-    const el = marksContainer.querySelector(
-      `.oc-mark-rule[data-key="${key}"]`
-    );
-    if (!el) continue;
-    tweens.push({
-      tweenType: "rule",
-      kind: "enter",
-      el,
-      fromX1: next.x1,
-      fromY1: next.y1,
-      fromX2: next.x2,
-      fromY2: next.y2,
-      toX1: next.x1,
-      toY1: next.y1,
-      toX2: next.x2,
-      toY2: next.y2,
-      fromOpacity: 0,
-      toOpacity: 1
-    });
-  }
-  for (const [key, prev] of prevByKey) {
-    if (nextByKey.has(key)) continue;
-    const ghost = renderSingleMark(prev, 0);
-    if (!ghost) continue;
-    ghost.classList.add("oc-ghost");
-    ghost.setAttribute("aria-hidden", "true");
-    ghost.setAttribute("pointer-events", "none");
-    ghost.removeAttribute("data-key");
-    marksContainer.appendChild(ghost);
-    ghosts.push(ghost);
-    tweens.push({
-      tweenType: "rule",
-      kind: "exit",
-      el: ghost,
-      fromX1: prev.x1,
-      fromY1: prev.y1,
-      fromX2: prev.x2,
-      fromY2: prev.y2,
-      toX1: prev.x1,
-      toY1: prev.y1,
-      toX2: prev.x2,
-      toY2: prev.y2,
-      ghost,
-      fromOpacity: 1,
-      toOpacity: 0
-    });
-  }
-}
-function buildTickTweens(prevLayout, nextLayout, marksContainer, tweens, ghosts, fromSnapshot) {
+function buildTickTweens(prevLayout, nextLayout, marksContainer, dom, tweens, ghosts, fromSnapshot) {
   const prevTicks = prevLayout.marks.filter((m) => m.type === "tick");
   const nextTicks = nextLayout.marks.filter((m) => m.type === "tick");
   const prevByKey = /* @__PURE__ */ new Map();
@@ -2985,9 +2951,7 @@ function buildTickTweens(prevLayout, nextLayout, marksContainer, tweens, ghosts,
   for (const [key, next] of nextByKey) {
     const prev = prevByKey.get(key);
     if (!prev) continue;
-    const el = marksContainer.querySelector(
-      `.oc-mark-tick[data-key="${key}"]`
-    );
+    const el = dom.tick(key);
     if (!el) continue;
     let pEnd = tickEndpoints(prev);
     const nEnd = tickEndpoints(next);
@@ -3011,9 +2975,7 @@ function buildTickTweens(prevLayout, nextLayout, marksContainer, tweens, ghosts,
   }
   for (const [key, next] of nextByKey) {
     if (prevByKey.has(key)) continue;
-    const el = marksContainer.querySelector(
-      `.oc-mark-tick[data-key="${key}"]`
-    );
+    const el = dom.tick(key);
     if (!el) continue;
     const nEnd = tickEndpoints(next);
     tweens.push({
@@ -3061,7 +3023,7 @@ function buildTickTweens(prevLayout, nextLayout, marksContainer, tweens, ghosts,
     });
   }
 }
-function buildTextMarkTweens(prevLayout, nextLayout, marksContainer, tweens, ghosts, fromSnapshot) {
+function buildTextMarkTweens(prevLayout, nextLayout, marksContainer, dom, tweens, ghosts, fromSnapshot) {
   const prevTexts = prevLayout.marks.filter((m) => m.type === "textMark");
   const nextTexts = nextLayout.marks.filter((m) => m.type === "textMark");
   const prevByKey = /* @__PURE__ */ new Map();
@@ -3075,9 +3037,7 @@ function buildTextMarkTweens(prevLayout, nextLayout, marksContainer, tweens, gho
   for (const [key, next] of nextByKey) {
     const prev = prevByKey.get(key);
     if (!prev) continue;
-    const el = marksContainer.querySelector(
-      `.oc-mark-text[data-key="${key}"]`
-    );
+    const el = dom.text(key);
     if (!el) continue;
     let fromX = prev.x;
     let fromY = prev.y;
@@ -3098,9 +3058,7 @@ function buildTextMarkTweens(prevLayout, nextLayout, marksContainer, tweens, gho
   }
   for (const [key, next] of nextByKey) {
     if (prevByKey.has(key)) continue;
-    const el = marksContainer.querySelector(
-      `.oc-mark-text[data-key="${key}"]`
-    );
+    const el = dom.text(key);
     if (!el) continue;
     tweens.push({
       tweenType: "textMark",
@@ -3138,243 +3096,322 @@ function buildTextMarkTweens(prevLayout, nextLayout, marksContainer, tweens, gho
     });
   }
 }
-function markShapeElement(el, attr) {
-  if (el.tagName === "circle" || el.tagName === "rect" || el.tagName === "path") return el;
-  if (attr === "stroke") {
-    const areaTop = el.querySelector(".oc-area-top");
-    if (areaTop) return areaTop;
-  }
-  return el.querySelector("rect, path, circle, line") ?? el;
-}
-function isInterpolableColor(v) {
-  return typeof v === "string" && v !== "" && v !== "none" && !v.startsWith("url(");
-}
-function buildColorTweens(prevLayout, nextLayout, marksContainer, tweens) {
-  const prevByKey = /* @__PURE__ */ new Map();
-  for (const m of prevLayout.marks) {
-    if (m.key) prevByKey.set(m.key, m);
+
+// src/transition/driver.ts
+function runTransition(args) {
+  const { svg, prevLayout, nextLayout, animation, onComplete, fromSnapshot, manual, canvas } = args;
+  const update = animation.update;
+  const exit = animation.exit ?? { ...EXIT_DEFAULTS };
+  const totalMs = Math.max(update.duration, exit.duration);
+  const enterDelay = 0.4 * update.duration;
+  const enterDuration = update.duration - enterDelay;
+  const marksContainer = svg.querySelector(".oc-marks");
+  if (!marksContainer) {
+    onComplete();
+    return {
+      cancel() {
+      },
+      get running() {
+        return false;
+      },
+      snapshot() {
+        return /* @__PURE__ */ new Map();
+      },
+      step() {
+        return false;
+      },
+      totalMs: 0
+    };
   }
-  for (const next of nextLayout.marks) {
-    if (!next.key) continue;
-    const prev = prevByKey.get(next.key);
-    if (!prev) continue;
-    const group = marksContainer.querySelector(`[data-key="${next.key}"]`);
-    if (!group) continue;
-    for (const attr of ["fill", "stroke"]) {
-      const from = prev[attr];
-      const to = next[attr];
-      if (from === to) continue;
-      if (!isInterpolableColor(from) || !isInterpolableColor(to)) continue;
-      tweens.push({
-        tweenType: "color",
-        kind: "update",
-        el: markShapeElement(group, attr),
-        attr,
-        from,
-        to
-      });
+  const dom = buildMarkDomIndex(marksContainer);
+  const tweens = [];
+  const ghosts = [];
+  const defs = svg.querySelector("defs");
+  let ghostGradientMap = /* @__PURE__ */ new Map();
+  if (defs) {
+    const nextKeySet = new Set(nextLayout.marks.filter((m) => m.key).map((m) => m.key));
+    const exitingMarks = prevLayout.marks.filter(
+      (m) => m.key && !nextKeySet.has(m.key) && "fill" in m
+    );
+    const gradientMarks = exitingMarks.filter(
+      (m) => "fill" in m && isGradientDef(m.fill)
+    );
+    if (gradientMarks.length > 0) {
+      ghostGradientMap = buildGradientDefs(gradientMarks, defs);
     }
   }
-}
-function buildAnnotationTweens(svg, prevLayout, nextLayout, tweens) {
-  const prev = prevLayout.annotations ?? [];
-  const next = nextLayout.annotations ?? [];
-  if (prev.length === 0 && next.length === 0) return;
-  const container = svg.querySelector(".oc-annotations");
-  if (!container) return;
-  const prevByKey = new Map(keyAnnotations(prev).map((k, i) => [k, prev[i]]));
-  const nextKeys = keyAnnotations(next);
-  const els = container.querySelectorAll(".oc-annotation");
-  for (let i = 0; i < next.length; i++) {
-    const el = els[i];
-    if (!el) continue;
-    const before = prevByKey.get(nextKeys[i]);
-    if (!before) {
-      tweens.push({
-        tweenType: "annotation",
-        kind: "enter",
-        el,
-        fromDx: 0,
-        fromDy: 0,
-        fromOpacity: 0,
-        toOpacity: 1
-      });
-      continue;
-    }
-    const dx = (before.label?.x ?? 0) - (next[i].label?.x ?? 0);
-    const dy = (before.label?.y ?? 0) - (next[i].label?.y ?? 0);
-    if (dx === 0 && dy === 0) continue;
-    tweens.push({
-      tweenType: "annotation",
-      kind: "update",
-      el,
-      fromDx: dx,
-      fromDy: dy
-    });
+  const hasRects = prevLayout.marks.some((m) => m.type === "rect") || nextLayout.marks.some((m) => m.type === "rect");
+  const hasLines = prevLayout.marks.some((m) => m.type === "line") || nextLayout.marks.some((m) => m.type === "line");
+  const hasAreas = prevLayout.marks.some((m) => m.type === "area") || nextLayout.marks.some((m) => m.type === "area");
+  const hasPoints = prevLayout.marks.some((m) => m.type === "point") || nextLayout.marks.some((m) => m.type === "point");
+  const hasRules = prevLayout.marks.some((m) => m.type === "rule") || nextLayout.marks.some((m) => m.type === "rule");
+  const hasTicks = prevLayout.marks.some((m) => m.type === "tick") || nextLayout.marks.some((m) => m.type === "tick");
+  const hasTextMarks = prevLayout.marks.some((m) => m.type === "textMark") || nextLayout.marks.some((m) => m.type === "textMark");
+  if (hasRects) {
+    buildRectTweens(
+      prevLayout,
+      nextLayout,
+      marksContainer,
+      dom,
+      tweens,
+      ghosts,
+      ghostGradientMap,
+      fromSnapshot
+    );
   }
-}
-function buildAxisTweens(svg, prevLayout, nextLayout, tweens, ghosts) {
-  buildSingleAxisTweens(svg, prevLayout.axes.x, nextLayout.axes.x, "x", nextLayout, tweens, ghosts);
-  buildSingleAxisTweens(svg, prevLayout.axes.y, nextLayout.axes.y, "y", nextLayout, tweens, ghosts);
-}
-function computeGridlineDeltas(prevAxis, nextAxis) {
-  const byValue = (axis) => {
-    const map = /* @__PURE__ */ new Map();
-    for (const tick of axis.ticks) {
-      const matching = axis.gridlines.find((g) => g.position === tick.position);
-      if (matching) map.set(serializeKeyValue(tick.value), matching.position);
-    }
-    return map;
-  };
-  return { prevGridByValue: byValue(prevAxis), nextGridByValue: byValue(nextAxis) };
-}
-function buildSingleAxisTweens(svg, prevAxis, nextAxis, orientation, layout, tweens, ghosts) {
-  if (!prevAxis || !nextAxis) return;
-  const axisClass = `oc-axis-${orientation}`;
-  const axisGroup = svg.querySelector(`.${axisClass}`);
-  if (!axisGroup) return;
-  const isRotated = !!(nextAxis.tickAngle && Math.abs(nextAxis.tickAngle) > 10);
-  const prevTickMap = /* @__PURE__ */ new Map();
-  for (const tick of prevAxis.ticks) {
-    prevTickMap.set(serializeKeyValue(tick.value), tick.position);
+  if (hasLines) {
+    buildLineTweens(prevLayout, nextLayout, marksContainer, dom, tweens, ghosts, fromSnapshot);
   }
-  const nextTickMap = /* @__PURE__ */ new Map();
-  for (const tick of nextAxis.ticks) {
-    nextTickMap.set(serializeKeyValue(tick.value), tick.position);
+  if (hasAreas) {
+    buildAreaTweens(
+      prevLayout,
+      nextLayout,
+      marksContainer,
+      dom,
+      tweens,
+      ghosts,
+      ghostGradientMap,
+      fromSnapshot
+    );
   }
-  const posAttr = orientation === "x" ? "x" : "y";
-  const tickLabels = axisGroup.querySelectorAll(".oc-axis-tick[data-tick-key]");
-  const matchedNextKeys = /* @__PURE__ */ new Set();
-  for (const labelEl of tickLabels) {
-    const key = labelEl.getAttribute("data-tick-key");
-    if (!key) continue;
-    const nextPos = nextTickMap.get(key);
-    const prevPos = prevTickMap.get(key);
-    if (prevPos !== void 0 && nextPos !== void 0) {
-      matchedNextKeys.add(key);
-      tweens.push({
-        tweenType: "axisTick",
-        kind: "update",
-        el: labelEl,
-        posAttr,
-        fromPos: prevPos,
-        toPos: nextPos,
-        crossfade: isRotated
-      });
-    } else if (prevPos === void 0 && nextPos !== void 0) {
-      matchedNextKeys.add(key);
-      tweens.push({
-        tweenType: "axisTick",
-        kind: "enter",
-        el: labelEl,
-        posAttr,
-        fromPos: nextPos,
-        toPos: nextPos,
-        crossfade: false,
-        fromOpacity: 0,
-        toOpacity: 1
-      });
+  if (hasPoints) {
+    if (canvas) {
+      buildCanvasPointsTween(prevLayout, nextLayout, canvas, tweens, fromSnapshot);
+    } else {
+      buildPointTweens(
+        prevLayout,
+        nextLayout,
+        marksContainer,
+        dom,
+        tweens,
+        ghosts,
+        ghostGradientMap,
+        fromSnapshot
+      );
     }
   }
-  for (const [key, prevPos] of prevTickMap) {
-    if (nextTickMap.has(key)) continue;
-    const prevTick = prevAxis.ticks.find((t) => serializeKeyValue(t.value) === key);
-    if (!prevTick) continue;
-    const ghost = document.createElementNS("http://www.w3.org/2000/svg", "text");
-    ghost.setAttribute("class", "oc-axis-tick oc-ghost");
-    ghost.setAttribute("aria-hidden", "true");
-    ghost.setAttribute("pointer-events", "none");
-    ghost.textContent = prevTick.label;
-    const area = layout.area;
-    if (orientation === "x") {
-      ghost.setAttribute("x", String(prevPos));
-      const xLabelPad = nextAxis.labelPadding ?? layout.theme.spacing.xAxisLabelPadding;
-      const fontSize = nextAxis.tickLabelStyle.fontSize;
-      ghost.setAttribute("y", String(area.y + area.height + xLabelPad + fontSize * 0.8));
-      ghost.setAttribute("text-anchor", "middle");
+  if (hasRules) {
+    buildRuleTweens(prevLayout, nextLayout, marksContainer, dom, tweens, ghosts, fromSnapshot);
+  }
+  if (hasTicks) {
+    buildTickTweens(prevLayout, nextLayout, marksContainer, dom, tweens, ghosts, fromSnapshot);
+  }
+  if (hasTextMarks) {
+    buildTextMarkTweens(prevLayout, nextLayout, marksContainer, dom, tweens, ghosts, fromSnapshot);
+  }
+  buildAxisTweens(svg, prevLayout, nextLayout, tweens, ghosts);
+  if (canvas) {
+    buildCanvasGridlinesTween(prevLayout, nextLayout, canvas, tweens);
+  }
+  buildColorTweens(prevLayout, nextLayout, dom, tweens);
+  buildAnnotationTweens(svg, prevLayout, nextLayout, tweens);
+  const secondaryEls = collectSecondaryElements(svg);
+  const secondaryOriginalOpacity = secondaryEls.map((el) => el.style.opacity ?? "");
+  for (const tw of tweens) {
+    applyTweenState(tw, 0, update, exit, enterDelay, enterDuration);
+  }
+  canvas?.repaint();
+  canvas?.setInteractionSuspended(true);
+  for (const el of secondaryEls) {
+    el.style.opacity = "0";
+  }
+  let rafId = null;
+  let running = true;
+  let startTime = null;
+  let lastElapsed = 0;
+  const nextLineMarks = nextLayout.marks.filter((m) => m.type === "line");
+  const nextAreaMarks = nextLayout.marks.filter((m) => m.type === "area");
+  function tick(now) {
+    if (!running) return;
+    if (startTime === null) startTime = now;
+    const elapsed = now - startTime;
+    lastElapsed = elapsed;
+    const tGlobal = Math.min(elapsed / totalMs, 1);
+    for (const tw of tweens) {
+      applyTweenState(tw, elapsed, update, exit, enterDelay, enterDuration);
+    }
+    applySecondaryOpacity(secondaryEls, elapsed, enterDelay, enterDuration);
+    canvas?.repaint();
+    if (tGlobal >= 1) {
+      finish();
     } else {
-      const TICK_LABEL_OFFSET = 8;
-      ghost.setAttribute("x", String(area.x - TICK_LABEL_OFFSET));
-      ghost.setAttribute("y", String(prevPos));
-      ghost.setAttribute("text-anchor", "end");
-      ghost.setAttribute("dominant-baseline", "central");
+      rafId = requestAnimationFrame(tick);
+    }
+  }
+  function settleCanvas() {
+    if (!canvas) return;
+    canvas.repaint();
+    canvas.rebuildIndex();
+    canvas.setInteractionSuspended(false);
+  }
+  function finish() {
+    if (!running) return;
+    running = false;
+    rafId = null;
+    snapToFinal();
+    removeGhosts();
+    settleCanvas();
+    for (let i = 0; i < secondaryEls.length; i++) {
+      secondaryEls[i].style.opacity = secondaryOriginalOpacity[i];
+    }
+    onComplete();
+  }
+  function snapToFinal() {
+    for (const tw of tweens) {
+      snapTweenToFinal(tw);
+    }
+    for (const mark of nextLineMarks) {
+      if (!mark.key) continue;
+      const el = dom.any(mark.key);
+      if (el) applyFinalLinePath(el, mark);
+    }
+    for (const mark of nextAreaMarks) {
+      if (!mark.key) continue;
+      const el = dom.any(mark.key);
+      if (el) applyFinalAreaPaths(el, mark);
     }
-    axisGroup.appendChild(ghost);
-    ghosts.push(ghost);
-    tweens.push({
-      tweenType: "axisTick",
-      kind: "exit",
-      el: ghost,
-      posAttr,
-      fromPos: prevPos,
-      toPos: prevPos,
-      crossfade: false,
-      ghost,
-      fromOpacity: 1,
-      toOpacity: 0
-    });
   }
-  const { prevGridByValue, nextGridByValue } = computeGridlineDeltas(prevAxis, nextAxis);
-  const gridlines = axisGroup.querySelectorAll(".oc-gridline[data-tick-key]");
-  for (const glEl of gridlines) {
-    const key = glEl.getAttribute("data-tick-key");
-    if (!key) continue;
-    const nextPos = nextGridByValue.get(key);
-    const prevPos = prevGridByValue.get(key);
-    if (prevPos !== void 0 && nextPos !== void 0) {
-      tweens.push({
-        tweenType: "gridline",
-        kind: "update",
-        el: glEl,
-        orientation,
-        fromPos: prevPos,
-        toPos: nextPos
-      });
-    } else if (prevPos === void 0 && nextPos !== void 0) {
-      tweens.push({
-        tweenType: "gridline",
-        kind: "enter",
-        el: glEl,
-        orientation,
-        fromPos: nextPos,
-        toPos: nextPos,
-        fromOpacity: 0,
-        toOpacity: 1
-      });
+  function removeGhosts() {
+    for (const ghost of ghosts) {
+      ghost.parentNode?.removeChild(ghost);
     }
   }
-  for (const [key, prevPos] of prevGridByValue) {
-    if (nextGridByValue.has(key)) continue;
-    const ghost = document.createElementNS("http://www.w3.org/2000/svg", "line");
-    ghost.setAttribute("class", "oc-gridline oc-ghost");
-    ghost.setAttribute("aria-hidden", "true");
-    ghost.setAttribute("pointer-events", "none");
-    if (orientation === "y") {
-      const area = layout.area;
-      ghost.setAttribute("x1", String(area.x));
-      ghost.setAttribute("y1", String(prevPos));
-      ghost.setAttribute("x2", String(area.x + area.width));
-      ghost.setAttribute("y2", String(prevPos));
-    } else {
-      const area = layout.area;
-      ghost.setAttribute("x1", String(prevPos));
-      ghost.setAttribute("y1", String(area.y));
-      ghost.setAttribute("x2", String(prevPos));
-      ghost.setAttribute("y2", String(area.y + area.height));
+  function captureSnapshot() {
+    const snap = /* @__PURE__ */ new Map();
+    const tUpdate = Math.min(lastElapsed / update.duration, 1);
+    const easedUpdate = cubicOut(tUpdate);
+    for (const tw of tweens) {
+      if (tw.kind !== "update") continue;
+      if (tw.tweenType === "canvasPoints") {
+        for (let s = 0; s < tw.soaIndex.length; s++) {
+          snap.set(tw.soaKeys[s], {
+            type: "point",
+            cx: tw.fromCx[s] + (tw.toCx[s] - tw.fromCx[s]) * easedUpdate,
+            cy: tw.fromCy[s] + (tw.toCy[s] - tw.fromCy[s]) * easedUpdate,
+            r: tw.fromR[s] + (tw.toR[s] - tw.fromR[s]) * easedUpdate
+          });
+        }
+        continue;
+      }
+      const key = getKeyForTween(tw);
+      if (!key) continue;
+      switch (tw.tweenType) {
+        case "rect": {
+          const g = lerpGeom(tw.from, tw.to, easedUpdate);
+          snap.set(key, { type: "rect", ...g });
+          break;
+        }
+        case "point": {
+          const cx = tw.fromCx + (tw.toCx - tw.fromCx) * easedUpdate;
+          const cy = tw.fromCy + (tw.toCy - tw.fromCy) * easedUpdate;
+          const entry = { type: "point", cx, cy };
+          if (tw.fromR !== void 0 && tw.toR !== void 0) {
+            entry.r = tw.fromR + (tw.toR - tw.fromR) * easedUpdate;
+          }
+          snap.set(key, entry);
+          break;
+        }
+        case "rule":
+        case "tick": {
+          snap.set(key, {
+            type: tw.tweenType,
+            x1: tw.fromX1 + (tw.toX1 - tw.fromX1) * easedUpdate,
+            y1: tw.fromY1 + (tw.toY1 - tw.fromY1) * easedUpdate,
+            x2: tw.fromX2 + (tw.toX2 - tw.fromX2) * easedUpdate,
+            y2: tw.fromY2 + (tw.toY2 - tw.fromY2) * easedUpdate
+          });
+          break;
+        }
+        case "textMark": {
+          snap.set(key, {
+            type: "textMark",
+            x: tw.fromX + (tw.toX - tw.fromX) * easedUpdate,
+            y: tw.fromY + (tw.toY - tw.fromY) * easedUpdate
+          });
+          break;
+        }
+        case "line": {
+          const pts = interpolatePoints(tw.fromPts, tw.toPts, easedUpdate);
+          const d = buildLinePath2(pts, tw.interpolate);
+          snap.set(key, { type: "line", d });
+          break;
+        }
+        case "area": {
+          const top = interpolatePoints(tw.fromTop, tw.toTop, easedUpdate);
+          const bottom = interpolatePoints(tw.fromBottom, tw.toBottom, easedUpdate);
+          const d = buildAreaPath2(top, bottom, tw.interpolate);
+          let topD;
+          if (tw.hasStroke) {
+            topD = buildLinePath2(top, tw.interpolate);
+          }
+          snap.set(key, { type: "area", d, topD });
+          break;
+        }
+      }
     }
-    axisGroup.appendChild(ghost);
-    ghosts.push(ghost);
-    tweens.push({
-      tweenType: "gridline",
-      kind: "exit",
-      el: ghost,
-      orientation,
-      fromPos: prevPos,
-      toPos: prevPos,
-      ghost,
-      fromOpacity: 1,
-      toOpacity: 0
-    });
+    return snap;
+  }
+  if (!manual) {
+    rafId = requestAnimationFrame(tick);
+  }
+  return {
+    cancel() {
+      if (!running) return;
+      running = false;
+      if (rafId !== null) {
+        cancelAnimationFrame(rafId);
+        rafId = null;
+      }
+      snapToFinal();
+      removeGhosts();
+      settleCanvas();
+      for (let i = 0; i < secondaryEls.length; i++) {
+        secondaryEls[i].style.opacity = secondaryOriginalOpacity[i];
+      }
+    },
+    get running() {
+      return running;
+    },
+    snapshot() {
+      return captureSnapshot();
+    },
+    step(elapsedMs) {
+      lastElapsed = elapsedMs;
+      for (const tw of tweens) {
+        applyTweenState(tw, elapsedMs, update, exit, enterDelay, enterDuration);
+      }
+      applySecondaryOpacity(secondaryEls, elapsedMs, enterDelay, enterDuration);
+      if (elapsedMs >= totalMs) {
+        snapToFinal();
+        removeGhosts();
+        settleCanvas();
+        return false;
+      }
+      canvas?.repaint();
+      return true;
+    },
+    totalMs
+  };
+}
+function collectSecondaryElements(svg) {
+  const els = [];
+  const epLabels = svg.querySelector(".oc-endpoint-labels");
+  if (epLabels) els.push(epLabels);
+  const markLabels = svg.querySelector(".oc-mark-labels");
+  if (markLabels) els.push(markLabels);
+  return els;
+}
+function applySecondaryOpacity(els, elapsed, enterDelay, enterDuration) {
+  if (els.length === 0) return;
+  let t;
+  if (elapsed < enterDelay) {
+    t = 0;
+  } else {
+    t = Math.min((elapsed - enterDelay) / enterDuration, 1);
+  }
+  const opacity = String(cubicOut(t));
+  for (const el of els) {
+    el.style.opacity = opacity;
   }
 }
 
@@ -5162,6 +5199,16 @@ function scheduleFontReload(fontFamily, isAlive, onReady) {
   return true;
 }
 
+// src/resolve-dark-mode.ts
+function resolveDarkMode(mode) {
+  if (mode === "force") return true;
+  if (mode === "off" || mode === void 0) return false;
+  if (typeof window !== "undefined" && window.matchMedia) {
+    return window.matchMedia("(prefers-color-scheme: dark)").matches;
+  }
+  return false;
+}
+
 // src/scatter-canvas/interactions.ts
 var HIT_TOLERANCE_MOUSE = 8;
 var HIT_TOLERANCE_TOUCH = 24;
@@ -5694,15 +5741,8 @@ var SpatialIndex = class {
 };
 
 // src/motion/tween.ts
-function cubicOut2(t) {
-  const f = 1 - t;
-  return 1 - f * f * f;
-}
-function cubicInOut(t) {
-  return t < 0.5 ? 4 * t * t * t : 1 - (-2 * t + 2) ** 3 / 2;
-}
 function resolveEase(ease) {
-  return ease === "snappy" ? cubicOut2 : cubicInOut;
+  return ease === "snappy" ? cubicOut : cubicInOut;
 }
 function prefersReducedMotion() {
   if (typeof window === "undefined" || typeof window.matchMedia !== "function") return false;
@@ -6218,14 +6258,6 @@ function stampThemeProperties(el, theme) {
 
 // src/mount.ts
 var FALLBACK_HEIGHT = 400;
-function resolveDarkMode(mode) {
-  if (mode === "force") return true;
-  if (mode === "off" || mode === void 0) return false;
-  if (typeof window !== "undefined" && window.matchMedia) {
-    return window.matchMedia("(prefers-color-scheme: dark)").matches;
-  }
-  return false;
-}
 var EDITABLE_HOVER_CSS = `
 .oc-editable-hover {
   outline: 1.5px solid ${cssTokenDefault2("--oc-editable-hover", "light")};
@@ -6316,6 +6348,7 @@ function createChart(container, spec, options) {
       height,
       theme: options?.theme,
       darkMode,
+      renderer: options?.renderer,
       watermark: options?.watermark,
       measureText
     };
@@ -6753,7 +6786,7 @@ function createChart(container, spec, options) {
       if (!warnedCanvasEditMode && (options?.editable || hasEditingCallbacks(options) || options?.onAnnotationEdit)) {
         warnedCanvasEditMode = true;
         console.warn(
-          "openchart: canvas mark mode does not support per-mark edit selection. Annotation, chrome, and legend editing still work. Set mark.render to 'svg' if you need to select individual points."
+          "openchart: canvas mark mode does not support per-mark edit selection. Annotation, chrome, and legend editing still work. Pass renderer: 'svg' to createChart() if you need to select individual points."
         );
       }
     }
@@ -7210,12 +7243,10 @@ function createChart(container, spec, options) {
 }
 
 // src/story/tween.ts
-var clamp01 = (t) => Math.min(1, Math.max(0, t));
-var lerp = (a, b, t) => a + (b - a) * t;
 var easingFns = {
-  linear: (t) => t,
-  easeOutCubic: (t) => 1 - (1 - t) ** 3,
-  easeInOutCubic: (t) => t < 0.5 ? 4 * t * t * t : 1 - (-2 * t + 2) ** 3 / 2,
+  linear,
+  easeOutCubic: cubicOut,
+  easeInOutCubic: cubicInOut,
   easeOutQuint: (t) => 1 - (1 - t) ** 5
 };
 var storyMotion = {
@@ -7327,7 +7358,7 @@ function scrubCamera(step, stepProgress, fitted, holdUntil, ease) {
 }
 
 // src/map-mount.ts
-import { compileMap } from "@opendata-ai/openchart-engine";
+import { compileGeoMap } from "@opendata-ai/openchart-engine";
 
 // src/map-camera.ts
 var FOCUS_DIM_OPACITY = 0.25;
@@ -7800,15 +7831,7 @@ function prefersReducedMotion2() {
     return false;
   }
 }
-function resolveDarkMode2(mode) {
-  if (mode === "force") return true;
-  if (mode === "off" || mode === void 0) return false;
-  if (typeof window !== "undefined" && window.matchMedia) {
-    return window.matchMedia("(prefers-color-scheme: dark)").matches;
-  }
-  return false;
-}
-function createMap(container, spec, options) {
+function createGeoMap(container, spec, options) {
   let currentSpec = spec;
   let currentLayout;
   let destroyed = false;
@@ -7845,7 +7868,7 @@ function createMap(container, spec, options) {
   }
   function compile() {
     const { width, height } = getContainerDimensions();
-    const darkMode = resolveDarkMode2(options?.darkMode);
+    const darkMode = resolveDarkMode(options?.darkMode);
     const compileOpts = {
       width,
       height,
@@ -7854,7 +7877,7 @@ function createMap(container, spec, options) {
       watermark: options?.watermark,
       measureText
     };
-    return compileMap(currentSpec, compileOpts);
+    return compileGeoMap(currentSpec, compileOpts);
   }
   function wireTooltipAndInteraction(svg, layout) {
     const cleanups = [];
@@ -8219,7 +8242,7 @@ function createMap(container, spec, options) {
     }
     container.classList.remove("oc-map-root", "oc-dark");
   }
-  if (resolveDarkMode2(options?.darkMode)) {
+  if (resolveDarkMode(options?.darkMode)) {
     container.classList.add("oc-dark");
   }
   currentLayout = compile();
@@ -8305,12 +8328,15 @@ export {
   resolveFontFamily,
   scheduleFontReload,
   observeResize,
+  resolveDarkMode,
   createTooltipManager,
   VECTOR_EXPORT_MAX_POINTS,
   materializeCanvasModeSVG,
   AnimationScheduler,
   quadtree,
   SpatialIndex,
+  clamp01,
+  lerp,
   resolveEase,
   prefersReducedMotion,
   createTween,
@@ -8321,8 +8347,6 @@ export {
   canTransitionSpecShape,
   createYouDrawIt,
   createChart,
-  clamp01,
-  lerp,
   easingFns,
   storyMotion,
   createTween2,
@@ -8334,6 +8358,6 @@ export {
   dampCamera,
   camerasClose,
   scrubCamera,
-  createMap
+  createGeoMap
 };
-//# sourceMappingURL=chunk-2YWRNRUK.js.map
+//# sourceMappingURL=chunk-ADWV256V.js.map