@opendata-ai/openchart-vanilla 7.8.0 → 7.9.0

package/dist/index.js

@@ -1,8 +1,12 @@
 import {
+  buildGradientDefs,
+  rectPathWithCorners,
   registerMarkRenderer,
   renderChartSVG,
-  renderTileMapSVG
-} from "./chunk-KYRQV6KR.js";
+  renderSingleMark,
+  renderTileMapSVG,
+  resolveMarkFill
+} from "./chunk-QRE4FQQM.js";
 
 // src/barlist-mount.ts
 import { compileBarList } from "@opendata-ai/openchart-engine";
@@ -134,7 +138,7 @@ function renderRows(parent, rows, animation) {
     if (row.aria?.label) {
       rowGroup.setAttribute("aria-label", row.aria.label);
     }
-    if (animation?.enabled) {
+    if (animation?.enter) {
       rowGroup.setAttribute("data-animation-index", String(row.animationIndex));
       const style = rowGroup.style;
       style.setProperty("--oc-mark-index", String(row.animationIndex));
@@ -216,7 +220,7 @@ function renderRows(parent, rows, animation) {
 }
 function renderBarListSVG(layout, opts) {
   const { width, height, rows, a11y, watermark, animation } = layout;
-  const animate = opts?.animate && animation?.enabled;
+  const animate = opts?.animate && !!animation?.enter;
   const svg = createSVGElement("svg");
   svg.setAttribute("viewBox", `0 0 ${width} ${height}`);
   svg.setAttribute("role", "list");
@@ -226,8 +230,8 @@ function renderBarListSVG(layout, opts) {
   }
   const classes = animate ? "oc-barlist oc-animate" : "oc-barlist";
   svg.setAttribute("class", classes);
-  if (animate && animation) {
-    svg.style.setProperty("--oc-animation-duration", `${animation.duration}ms`);
+  if (animate && animation?.enter) {
+    svg.style.setProperty("--oc-animation-duration", `${animation.enter.duration}ms`);
     svg.style.setProperty("--oc-animation-stagger", "40ms");
   }
   renderChrome(svg, layout);
@@ -805,7 +809,7 @@ function createBarList(container, spec, options) {
         tooltipManager = createTooltipManager(container);
       }
     }
-    if (currentLayout.animation?.enabled) {
+    if (currentLayout.animation?.enter) {
       animationCleanup = setupAnimationCleanup(newSvg, () => {
         if (pendingResize && !destroyed) {
           pendingResize = false;
@@ -5177,6 +5181,1680 @@ function stampThemeProperties(el, theme) {
   }
 }
 
+// src/transition.ts
+import { isGradientDef } from "@opendata-ai/openchart-core";
+import {
+  buildAreaPath,
+  buildLinePath,
+  EXIT_DEFAULTS,
+  serializeKeyValue
+} from "@opendata-ai/openchart-engine";
+function cubicOut(t) {
+  const f = 1 - t;
+  return 1 - f * f * f;
+}
+var TRANSITIONABLE_MARKS = /* @__PURE__ */ new Set(["bar", "line", "area", "point"]);
+function canTransition(args) {
+  const { prevLayout, nextLayout, prevSpec, nextSpec, isFirstRender, entranceInFlight } = args;
+  if (!prevLayout || !prevSpec || isFirstRender) return false;
+  if (!nextLayout.animation?.update) return false;
+  const prev = prevSpec;
+  const next = nextSpec;
+  if (!("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;
+  if (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) {
+    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;
+  }
+  if (nextLayout.marks.length > 500) return false;
+  if (!hasGeometryChanged(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 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;
+}
+function geomFromMark(m2) {
+  return { x: m2.x, y: m2.y, width: m2.width, height: m2.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 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(a2, b, t) {
+  return { x: a2.x + (b.x - a2.x) * t, y: a2.y + (b.y - a2.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];
+  }
+  const prevByKey = /* @__PURE__ */ new Map();
+  for (let i = 0; i < prevKeys.length; i++) {
+    prevByKey.set(prevKeys[i], prevPoints[i]);
+  }
+  const nextByKey = /* @__PURE__ */ new Map();
+  for (let i = 0; i < nextKeys.length; i++) {
+    nextByKey.set(nextKeys[i], nextPoints[i]);
+  }
+  const merged = mergeKeyOrder(prevKeys, nextKeys);
+  const mergedIndex = /* @__PURE__ */ new Map();
+  for (let i = 0; i < merged.length; i++) {
+    mergedIndex.set(merged[i], i);
+  }
+  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));
+    }
+  }
+  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);
+  }
+  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++;
+  }
+  while (ni < nextKeys.length) {
+    if (!added.has(nextKeys[ni])) {
+      result.push(nextKeys[ni]);
+      added.add(nextKeys[ni]);
+    }
+    ni++;
+  }
+  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;
+    }
+  }
+  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 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) };
+  }
+  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);
+  }
+}
+function runTransition(args) {
+  const { svg, prevLayout, nextLayout, animation, onComplete, fromSnapshot } = 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();
+      }
+    };
+  }
+  const tweens = [];
+  const ghosts = [];
+  const defs = svg.querySelector("defs");
+  let ghostGradientMap = /* @__PURE__ */ new Map();
+  if (defs) {
+    const nextKeySet = new Set(nextLayout.marks.filter((m2) => m2.key).map((m2) => m2.key));
+    const exitingMarks = prevLayout.marks.filter(
+      (m2) => m2.key && !nextKeySet.has(m2.key) && "fill" in m2
+    );
+    const gradientMarks = exitingMarks.filter(
+      (m2) => "fill" in m2 && isGradientDef(m2.fill)
+    );
+    if (gradientMarks.length > 0) {
+      ghostGradientMap = buildGradientDefs(gradientMarks, defs);
+    }
+  }
+  const hasRects = prevLayout.marks.some((m2) => m2.type === "rect") || nextLayout.marks.some((m2) => m2.type === "rect");
+  const hasLines = prevLayout.marks.some((m2) => m2.type === "line") || nextLayout.marks.some((m2) => m2.type === "line");
+  const hasAreas = prevLayout.marks.some((m2) => m2.type === "area") || nextLayout.marks.some((m2) => m2.type === "area");
+  const hasPoints = prevLayout.marks.some((m2) => m2.type === "point") || nextLayout.marks.some((m2) => m2.type === "point");
+  const hasRules = prevLayout.marks.some((m2) => m2.type === "rule") || nextLayout.marks.some((m2) => m2.type === "rule");
+  const hasTicks = prevLayout.marks.some((m2) => m2.type === "tick") || nextLayout.marks.some((m2) => m2.type === "tick");
+  const hasTextMarks = prevLayout.marks.some((m2) => m2.type === "textMark") || nextLayout.marks.some((m2) => m2.type === "textMark");
+  if (hasRects) {
+    buildRectTweens(
+      prevLayout,
+      nextLayout,
+      marksContainer,
+      tweens,
+      ghosts,
+      ghostGradientMap,
+      fromSnapshot
+    );
+  }
+  if (hasLines) {
+    buildLineTweens(prevLayout, nextLayout, marksContainer, tweens, ghosts, fromSnapshot);
+  }
+  if (hasAreas) {
+    buildAreaTweens(
+      prevLayout,
+      nextLayout,
+      marksContainer,
+      tweens,
+      ghosts,
+      ghostGradientMap,
+      fromSnapshot
+    );
+  }
+  if (hasPoints) {
+    buildPointTweens(
+      prevLayout,
+      nextLayout,
+      marksContainer,
+      tweens,
+      ghosts,
+      ghostGradientMap,
+      fromSnapshot
+    );
+  }
+  if (hasRules) {
+    buildRuleTweens(prevLayout, nextLayout, marksContainer, tweens, ghosts, fromSnapshot);
+  }
+  if (hasTicks) {
+    buildTickTweens(prevLayout, nextLayout, marksContainer, tweens, ghosts, fromSnapshot);
+  }
+  if (hasTextMarks) {
+    buildTextMarkTweens(prevLayout, nextLayout, marksContainer, tweens, ghosts, fromSnapshot);
+  }
+  buildAxisTweens(svg, prevLayout, nextLayout, tweens, ghosts);
+  const secondaryEls = collectSecondaryElements(svg);
+  const secondaryOriginalOpacity = secondaryEls.map((el) => el.style.opacity ?? "");
+  for (const tw of tweens) {
+    applyTweenState(tw, 0, update, exit, enterDelay, enterDuration);
+  }
+  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((m2) => m2.type === "line");
+  const nextAreaMarks = nextLayout.marks.filter((m2) => m2.type === "area");
+  function tick(now2) {
+    if (!running) return;
+    if (startTime === null) startTime = now2;
+    const elapsed = now2 - 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);
+    if (tGlobal >= 1) {
+      finish();
+    } else {
+      rafId = requestAnimationFrame(tick);
+    }
+  }
+  function finish() {
+    if (!running) return;
+    running = false;
+    rafId = null;
+    snapToFinal();
+    removeGhosts();
+    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 = marksContainer.querySelector(`[data-key="${mark.key}"]`);
+      if (el) applyFinalLinePath(el, mark);
+    }
+    for (const mark of nextAreaMarks) {
+      if (!mark.key) continue;
+      const el = marksContainer.querySelector(`[data-key="${mark.key}"]`);
+      if (el) applyFinalAreaPaths(el, mark);
+    }
+  }
+  function removeGhosts() {
+    for (const ghost of ghosts) {
+      ghost.parentNode?.removeChild(ghost);
+    }
+  }
+  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;
+      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;
+        }
+      }
+    }
+    return snap;
+  }
+  rafId = requestAnimationFrame(tick);
+  return {
+    cancel() {
+      if (!running) return;
+      running = false;
+      if (rafId !== null) {
+        cancelAnimationFrame(rafId);
+        rafId = null;
+      }
+      snapToFinal();
+      removeGhosts();
+      for (let i = 0; i < secondaryEls.length; i++) {
+        secondaryEls[i].style.opacity = secondaryOriginalOpacity[i];
+      }
+    },
+    get running() {
+      return running;
+    },
+    snapshot() {
+      return captureSnapshot();
+    }
+  };
+}
+function collectSecondaryElements(svg) {
+  const els = [];
+  for (const el of svg.querySelectorAll(".oc-annotation")) {
+    els.push(el);
+  }
+  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;
+  }
+}
+function getKeyForTween(tw) {
+  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) {
+  let tLocal;
+  if (tw.kind === "exit") {
+    tLocal = Math.min(elapsed / exit.duration, 1);
+  } else if (tw.kind === "enter") {
+    if (elapsed < enterDelay) {
+      tLocal = 0;
+    } else {
+      tLocal = Math.min((elapsed - enterDelay) / enterDuration, 1);
+    }
+  } else {
+    tLocal = Math.min(elapsed / update.duration, 1);
+  }
+  const eased = cubicOut(tLocal);
+  switch (tw.tweenType) {
+    case "rect": {
+      const geom = lerpGeom(tw.from, tw.to, eased);
+      applyGeomToElement(tw.el, geom, tw.mark);
+      break;
+    }
+    case "line": {
+      const pts = interpolatePoints(tw.fromPts, tw.toPts, eased);
+      applyLinePath(tw.el, pts, tw.interpolate);
+      break;
+    }
+    case "area": {
+      const top = interpolatePoints(tw.fromTop, tw.toTop, eased);
+      const bottom = interpolatePoints(tw.fromBottom, tw.toBottom, eased);
+      applyAreaPaths(tw.el, top, bottom, tw.interpolate, tw.hasStroke);
+      break;
+    }
+    case "point": {
+      const cx = tw.fromCx + (tw.toCx - tw.fromCx) * eased;
+      const cy = tw.fromCy + (tw.toCy - tw.fromCy) * eased;
+      tw.el.setAttribute("cx", String(cx));
+      tw.el.setAttribute("cy", String(cy));
+      if (tw.fromR !== void 0 && tw.toR !== void 0) {
+        const r = tw.fromR + (tw.toR - tw.fromR) * eased;
+        tw.el.setAttribute("r", String(r));
+      }
+      break;
+    }
+    case "rule":
+    case "tick": {
+      const lineEl = resolveLineElement(tw.el);
+      lineEl.setAttribute("x1", String(tw.fromX1 + (tw.toX1 - tw.fromX1) * eased));
+      lineEl.setAttribute("y1", String(tw.fromY1 + (tw.toY1 - tw.fromY1) * eased));
+      lineEl.setAttribute("x2", String(tw.fromX2 + (tw.toX2 - tw.fromX2) * eased));
+      lineEl.setAttribute("y2", String(tw.fromY2 + (tw.toY2 - tw.fromY2) * eased));
+      break;
+    }
+    case "textMark": {
+      const x3 = tw.fromX + (tw.toX - tw.fromX) * eased;
+      const y3 = tw.fromY + (tw.toY - tw.fromY) * eased;
+      tw.el.setAttribute("x", String(x3));
+      tw.el.setAttribute("y", String(y3));
+      break;
+    }
+    case "axisTick": {
+      if (tw.crossfade) {
+        break;
+      }
+      const pos = tw.fromPos + (tw.toPos - tw.fromPos) * eased;
+      if (tw.posAttr === "x") {
+        tw.el.setAttribute("x", String(pos));
+      } else {
+        tw.el.setAttribute("y", String(pos));
+      }
+      break;
+    }
+    case "gridline": {
+      const pos = tw.fromPos + (tw.toPos - tw.fromPos) * eased;
+      if (tw.orientation === "y") {
+        tw.el.setAttribute("y1", String(pos));
+        tw.el.setAttribute("y2", String(pos));
+      } else {
+        tw.el.setAttribute("x1", String(pos));
+        tw.el.setAttribute("x2", String(pos));
+      }
+      break;
+    }
+  }
+  if (tw.fromOpacity !== void 0 && tw.toOpacity !== void 0) {
+    const opacity = tw.fromOpacity + (tw.toOpacity - tw.fromOpacity) * eased;
+    tw.el.style.opacity = String(opacity);
+  }
+}
+function snapTweenToFinal(tw) {
+  switch (tw.tweenType) {
+    case "rect":
+      applyGeomToElement(tw.el, tw.to, tw.mark);
+      break;
+    case "line":
+      applyLinePath(tw.el, tw.toPts, tw.interpolate);
+      break;
+    case "area":
+      applyAreaPaths(tw.el, tw.toTop, tw.toBottom, tw.interpolate, tw.hasStroke);
+      break;
+    case "point":
+      tw.el.setAttribute("cx", String(tw.toCx));
+      tw.el.setAttribute("cy", String(tw.toCy));
+      if (tw.toR !== void 0) {
+        tw.el.setAttribute("r", String(tw.toR));
+      }
+      break;
+    case "rule":
+    case "tick": {
+      const lineEl = resolveLineElement(tw.el);
+      lineEl.setAttribute("x1", String(tw.toX1));
+      lineEl.setAttribute("y1", String(tw.toY1));
+      lineEl.setAttribute("x2", String(tw.toX2));
+      lineEl.setAttribute("y2", String(tw.toY2));
+      break;
+    }
+    case "textMark":
+      tw.el.setAttribute("x", String(tw.toX));
+      tw.el.setAttribute("y", String(tw.toY));
+      break;
+    case "axisTick":
+      if (!tw.crossfade) {
+        if (tw.posAttr === "x") {
+          tw.el.setAttribute("x", String(tw.toPos));
+        } else {
+          tw.el.setAttribute("y", String(tw.toPos));
+        }
+      }
+      break;
+    case "gridline":
+      if (tw.orientation === "y") {
+        tw.el.setAttribute("y1", String(tw.toPos));
+        tw.el.setAttribute("y2", String(tw.toPos));
+      } else {
+        tw.el.setAttribute("x1", String(tw.toPos));
+        tw.el.setAttribute("x2", String(tw.toPos));
+      }
+      break;
+  }
+  if (tw.toOpacity !== void 0) {
+    tw.el.style.opacity = String(tw.toOpacity);
+  }
+  if (tw.tweenType === "point" && tw.suppressedOpacity !== void 0) {
+    tw.el.setAttribute("opacity", tw.suppressedOpacity);
+  }
+}
+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) {
+  const prevRects = prevLayout.marks.filter((m2) => m2.type === "rect");
+  const nextRects = nextLayout.marks.filter((m2) => m2.type === "rect");
+  const prevByKey = /* @__PURE__ */ new Map();
+  for (const m2 of prevRects) {
+    if (m2.key) prevByKey.set(m2.key, m2);
+  }
+  const nextByKey = /* @__PURE__ */ new Map();
+  for (const m2 of nextRects) {
+    if (m2.key) nextByKey.set(m2.key, m2);
+  }
+  for (const [key, next] of nextByKey) {
+    const prev = prevByKey.get(key);
+    if (!prev) continue;
+    const el = marksContainer.querySelector(`[data-key="${key}"]`);
+    if (!el) continue;
+    let fromGeom = geomFromMark(prev);
+    const snap = fromSnapshot?.get(key);
+    if (snap && snap.type === "rect") {
+      fromGeom = { x: snap.x, y: snap.y, width: snap.width, height: snap.height };
+    }
+    tweens.push({
+      tweenType: "rect",
+      kind: "update",
+      el,
+      from: fromGeom,
+      to: geomFromMark(next),
+      mark: next
+    });
+  }
+  for (const [key, next] of nextByKey) {
+    if (prevByKey.has(key)) continue;
+    const el = marksContainer.querySelector(`[data-key="${key}"]`);
+    if (!el) continue;
+    let fromGeom;
+    if (next.orient === "horizontal") {
+      fromGeom = { x: next.x, y: next.y, width: 0, height: next.height };
+    } else {
+      fromGeom = { x: next.x, y: next.y + next.height, width: next.width, height: 0 };
+    }
+    tweens.push({
+      tweenType: "rect",
+      kind: "enter",
+      el,
+      from: fromGeom,
+      to: geomFromMark(next),
+      mark: next
+    });
+  }
+  for (const [key, prev] of prevByKey) {
+    if (nextByKey.has(key)) continue;
+    const ghostMark = resolveGhostGradientFill(prev, ghostGradientMap);
+    const ghost = renderSingleMark(ghostMark, 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);
+    let toGeom;
+    if (prev.orient === "horizontal") {
+      toGeom = { x: prev.x, y: prev.y, width: 0, height: prev.height };
+    } else {
+      toGeom = { x: prev.x, y: prev.y + prev.height, width: prev.width, height: 0 };
+    }
+    tweens.push({
+      tweenType: "rect",
+      kind: "exit",
+      el: ghost,
+      from: geomFromMark(prev),
+      to: toGeom,
+      mark: prev,
+      ghost,
+      fromOpacity: 1,
+      toOpacity: 0
+    });
+  }
+}
+function buildLineTweens(prevLayout, nextLayout, marksContainer, tweens, ghosts, fromSnapshot) {
+  const prevLines = prevLayout.marks.filter((m2) => m2.type === "line");
+  const nextLines = nextLayout.marks.filter((m2) => m2.type === "line");
+  const prevByKey = /* @__PURE__ */ new Map();
+  for (const m2 of prevLines) {
+    if (m2.key) prevByKey.set(m2.key, m2);
+  }
+  const nextByKey = /* @__PURE__ */ new Map();
+  for (const m2 of nextLines) {
+    if (m2.key) nextByKey.set(m2.key, m2);
+  }
+  for (const [key, next] of nextByKey) {
+    const prev = prevByKey.get(key);
+    if (!prev) continue;
+    const el = marksContainer.querySelector(`[data-key="${key}"]`);
+    if (!el) continue;
+    const snap = fromSnapshot?.get(key);
+    if (snap && snap.type === "line") {
+      const ghost = el.cloneNode(true);
+      ghost.classList.add("oc-ghost");
+      ghost.setAttribute("aria-hidden", "true");
+      ghost.setAttribute("pointer-events", "none");
+      ghost.removeAttribute("data-key");
+      const ghostPath = ghost.querySelector("path");
+      if (ghostPath) ghostPath.setAttribute("d", snap.d);
+      marksContainer.appendChild(ghost);
+      ghosts.push(ghost);
+      tweens.push({
+        tweenType: "line",
+        kind: "exit",
+        el: ghost,
+        fromPts: next.points,
+        // placeholder, not used for path
+        toPts: next.points,
+        finalPoints: next.points,
+        interpolate: next.interpolate,
+        ghost,
+        fromOpacity: 1,
+        toOpacity: 0
+      });
+      tweens.push({
+        tweenType: "line",
+        kind: "enter",
+        el,
+        fromPts: next.points,
+        toPts: next.points,
+        finalPoints: next.points,
+        interpolate: next.interpolate,
+        fromOpacity: 0,
+        toOpacity: 1
+      });
+      continue;
+    }
+    const prevPKs = prev.pointKeys ?? prev.points.map((_, i) => `${i}`);
+    const nextPKs = next.pointKeys ?? next.points.map((_, i) => `${i}`);
+    const prevKeySet = new Set(prevPKs);
+    const hasSurvivors = nextPKs.some((k) => prevKeySet.has(k));
+    if (!hasSurvivors) {
+      const ghost = renderSingleMark(prev, 0);
+      if (ghost) {
+        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: "line",
+          kind: "exit",
+          el: ghost,
+          fromPts: prev.points,
+          toPts: prev.points,
+          finalPoints: prev.points,
+          interpolate: prev.interpolate,
+          ghost,
+          fromOpacity: 1,
+          toOpacity: 0
+        });
+      }
+      tweens.push({
+        tweenType: "line",
+        kind: "enter",
+        el,
+        fromPts: next.points,
+        toPts: next.points,
+        finalPoints: next.points,
+        interpolate: next.interpolate,
+        fromOpacity: 0,
+        toOpacity: 1
+      });
+    } else {
+      const [fromPts, toPts] = normalizePointArrays(prev.points, next.points, prevPKs, nextPKs);
+      tweens.push({
+        tweenType: "line",
+        kind: "update",
+        el,
+        fromPts,
+        toPts,
+        finalPoints: next.points,
+        interpolate: next.interpolate
+      });
+    }
+  }
+  for (const [key, next] of nextByKey) {
+    if (prevByKey.has(key)) continue;
+    const el = marksContainer.querySelector(`[data-key="${key}"]`);
+    if (!el) continue;
+    tweens.push({
+      tweenType: "line",
+      kind: "enter",
+      el,
+      fromPts: next.points,
+      toPts: next.points,
+      finalPoints: next.points,
+      interpolate: next.interpolate,
+      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: "line",
+      kind: "exit",
+      el: ghost,
+      fromPts: prev.points,
+      toPts: prev.points,
+      finalPoints: prev.points,
+      interpolate: prev.interpolate,
+      ghost,
+      fromOpacity: 1,
+      toOpacity: 0
+    });
+  }
+}
+function buildAreaTweens(prevLayout, nextLayout, marksContainer, tweens, ghosts, ghostGradientMap, fromSnapshot) {
+  const prevAreas = prevLayout.marks.filter((m2) => m2.type === "area");
+  const nextAreas = nextLayout.marks.filter((m2) => m2.type === "area");
+  const prevByKey = /* @__PURE__ */ new Map();
+  for (const m2 of prevAreas) {
+    if (m2.key) prevByKey.set(m2.key, m2);
+  }
+  const nextByKey = /* @__PURE__ */ new Map();
+  for (const m2 of nextAreas) {
+    if (m2.key) nextByKey.set(m2.key, m2);
+  }
+  for (const [key, next] of nextByKey) {
+    const prev = prevByKey.get(key);
+    if (!prev) continue;
+    const el = marksContainer.querySelector(`[data-key="${key}"]`);
+    if (!el) continue;
+    const snap = fromSnapshot?.get(key);
+    if (snap && snap.type === "area") {
+      const ghost = el.cloneNode(true);
+      ghost.classList.add("oc-ghost");
+      ghost.setAttribute("aria-hidden", "true");
+      ghost.setAttribute("pointer-events", "none");
+      ghost.removeAttribute("data-key");
+      const ghostPaths = ghost.querySelectorAll("path");
+      if (ghostPaths[0]) ghostPaths[0].setAttribute("d", snap.d);
+      if (ghostPaths[1] && snap.topD) ghostPaths[1].setAttribute("d", snap.topD);
+      marksContainer.appendChild(ghost);
+      ghosts.push(ghost);
+      tweens.push({
+        tweenType: "area",
+        kind: "exit",
+        el: ghost,
+        fromTop: next.topPoints,
+        toTop: next.topPoints,
+        fromBottom: next.bottomPoints,
+        toBottom: next.bottomPoints,
+        finalTopPoints: next.topPoints,
+        finalBottomPoints: next.bottomPoints,
+        interpolate: next.interpolate,
+        hasStroke: !!next.stroke && !!next.topPath,
+        ghost,
+        fromOpacity: 1,
+        toOpacity: 0
+      });
+      tweens.push({
+        tweenType: "area",
+        kind: "enter",
+        el,
+        fromTop: next.topPoints,
+        toTop: next.topPoints,
+        fromBottom: next.bottomPoints,
+        toBottom: next.bottomPoints,
+        finalTopPoints: next.topPoints,
+        finalBottomPoints: next.bottomPoints,
+        interpolate: next.interpolate,
+        hasStroke: !!next.stroke && !!next.topPath,
+        fromOpacity: 0,
+        toOpacity: 1
+      });
+      continue;
+    }
+    const prevPKs = prev.pointKeys ?? prev.topPoints.map((_, i) => `${i}`);
+    const nextPKs = next.pointKeys ?? next.topPoints.map((_, i) => `${i}`);
+    const prevKeySet = new Set(prevPKs);
+    const hasSurvivors = nextPKs.some((k) => prevKeySet.has(k));
+    if (!hasSurvivors) {
+      const ghost = renderSingleMark(prev, 0);
+      if (ghost) {
+        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: "area",
+          kind: "exit",
+          el: ghost,
+          fromTop: prev.topPoints,
+          toTop: prev.topPoints,
+          fromBottom: prev.bottomPoints,
+          toBottom: prev.bottomPoints,
+          finalTopPoints: prev.topPoints,
+          finalBottomPoints: prev.bottomPoints,
+          interpolate: prev.interpolate,
+          hasStroke: !!prev.stroke && !!prev.topPath,
+          ghost,
+          fromOpacity: 1,
+          toOpacity: 0
+        });
+      }
+      tweens.push({
+        tweenType: "area",
+        kind: "enter",
+        el,
+        fromTop: next.topPoints,
+        toTop: next.topPoints,
+        fromBottom: next.bottomPoints,
+        toBottom: next.bottomPoints,
+        finalTopPoints: next.topPoints,
+        finalBottomPoints: next.bottomPoints,
+        interpolate: next.interpolate,
+        hasStroke: !!next.stroke && !!next.topPath,
+        fromOpacity: 0,
+        toOpacity: 1
+      });
+    } else {
+      const [fromTop, toTop] = normalizePointArrays(
+        prev.topPoints,
+        next.topPoints,
+        prevPKs,
+        nextPKs
+      );
+      const [fromBottom, toBottom] = normalizePointArrays(
+        prev.bottomPoints,
+        next.bottomPoints,
+        prevPKs,
+        nextPKs
+      );
+      tweens.push({
+        tweenType: "area",
+        kind: "update",
+        el,
+        fromTop,
+        toTop,
+        fromBottom,
+        toBottom,
+        finalTopPoints: next.topPoints,
+        finalBottomPoints: next.bottomPoints,
+        interpolate: next.interpolate,
+        hasStroke: !!next.stroke && !!next.topPath
+      });
+    }
+  }
+  for (const [key, next] of nextByKey) {
+    if (prevByKey.has(key)) continue;
+    const el = marksContainer.querySelector(`[data-key="${key}"]`);
+    if (!el) continue;
+    tweens.push({
+      tweenType: "area",
+      kind: "enter",
+      el,
+      fromTop: next.topPoints,
+      toTop: next.topPoints,
+      fromBottom: next.bottomPoints,
+      toBottom: next.bottomPoints,
+      finalTopPoints: next.topPoints,
+      finalBottomPoints: next.bottomPoints,
+      interpolate: next.interpolate,
+      hasStroke: !!next.stroke && !!next.topPath,
+      fromOpacity: 0,
+      toOpacity: 1
+    });
+  }
+  for (const [key, prev] of prevByKey) {
+    if (nextByKey.has(key)) continue;
+    const ghostMark = resolveGhostGradientFill(prev, ghostGradientMap);
+    const ghost = renderSingleMark(ghostMark, 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: "area",
+      kind: "exit",
+      el: ghost,
+      fromTop: prev.topPoints,
+      toTop: prev.topPoints,
+      fromBottom: prev.bottomPoints,
+      toBottom: prev.bottomPoints,
+      finalTopPoints: prev.topPoints,
+      finalBottomPoints: prev.bottomPoints,
+      interpolate: prev.interpolate,
+      hasStroke: !!prev.stroke && !!prev.topPath,
+      ghost,
+      fromOpacity: 1,
+      toOpacity: 0
+    });
+  }
+}
+function buildPointTweens(prevLayout, nextLayout, marksContainer, tweens, ghosts, ghostGradientMap, fromSnapshot) {
+  const prevPoints = prevLayout.marks.filter((m2) => m2.type === "point");
+  const nextPoints = nextLayout.marks.filter((m2) => m2.type === "point");
+  const prevByKey = /* @__PURE__ */ new Map();
+  for (const m2 of prevPoints) {
+    if (m2.key) prevByKey.set(m2.key, m2);
+  }
+  const nextByKey = /* @__PURE__ */ new Map();
+  for (const m2 of nextPoints) {
+    if (m2.key) nextByKey.set(m2.key, m2);
+  }
+  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}"]`
+    );
+    if (!el) continue;
+    const renderedOpacity = el.getAttribute("opacity");
+    const isSuppressed = renderedOpacity === "0";
+    let fromCx = prev.cx;
+    let fromCy = prev.cy;
+    let fromR = prev.r !== next.r ? prev.r : void 0;
+    const snap = fromSnapshot?.get(key);
+    if (snap && snap.type === "point") {
+      fromCx = snap.cx;
+      fromCy = snap.cy;
+      if (snap.r !== void 0 && snap.r !== next.r) {
+        fromR = snap.r;
+      }
+    }
+    tweens.push({
+      tweenType: "point",
+      kind: "update",
+      el,
+      fromCx,
+      fromCy,
+      toCx: next.cx,
+      toCy: next.cy,
+      fromR,
+      toR: fromR !== void 0 ? next.r : void 0,
+      // Do NOT tween opacity for updated points - preserve renderer state
+      suppressedOpacity: isSuppressed ? "0" : void 0
+    });
+  }
+  for (const [key, next] of nextByKey) {
+    if (prevByKey.has(key)) continue;
+    const el = marksContainer.querySelector(
+      `circle.oc-mark-point[data-key="${key}"]`
+    );
+    if (!el) continue;
+    const renderedOpacity = el.getAttribute("opacity");
+    const targetOpacity = renderedOpacity != null ? Number(renderedOpacity) : 1;
+    tweens.push({
+      tweenType: "point",
+      kind: "enter",
+      el,
+      fromCx: next.cx,
+      fromCy: next.cy,
+      toCx: next.cx,
+      toCy: next.cy,
+      fromOpacity: 0,
+      toOpacity: targetOpacity,
+      suppressedOpacity: renderedOpacity === "0" ? "0" : void 0
+    });
+  }
+  for (const [key, prev] of prevByKey) {
+    if (nextByKey.has(key)) continue;
+    const ghostMark = resolveGhostGradientFill(prev, ghostGradientMap);
+    const ghost = renderSingleMark(ghostMark, 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: "point",
+      kind: "exit",
+      el: ghost,
+      fromCx: prev.cx,
+      fromCy: prev.cy,
+      toCx: prev.cx,
+      toCy: prev.cy,
+      ghost,
+      fromOpacity: 1,
+      toOpacity: 0
+    });
+  }
+}
+function buildRuleTweens(prevLayout, nextLayout, marksContainer, tweens, ghosts, fromSnapshot) {
+  const prevRules = prevLayout.marks.filter((m2) => m2.type === "rule");
+  const nextRules = nextLayout.marks.filter((m2) => m2.type === "rule");
+  const prevByKey = /* @__PURE__ */ new Map();
+  for (const m2 of prevRules) {
+    if (m2.key) prevByKey.set(m2.key, m2);
+  }
+  const nextByKey = /* @__PURE__ */ new Map();
+  for (const m2 of nextRules) {
+    if (m2.key) nextByKey.set(m2.key, m2);
+  }
+  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) {
+  const prevTicks = prevLayout.marks.filter((m2) => m2.type === "tick");
+  const nextTicks = nextLayout.marks.filter((m2) => m2.type === "tick");
+  const prevByKey = /* @__PURE__ */ new Map();
+  for (const m2 of prevTicks) {
+    if (m2.key) prevByKey.set(m2.key, m2);
+  }
+  const nextByKey = /* @__PURE__ */ new Map();
+  for (const m2 of nextTicks) {
+    if (m2.key) nextByKey.set(m2.key, m2);
+  }
+  function tickEndpoints(t) {
+    const half = t.length / 2;
+    if (t.orient === "vertical") {
+      return { x1: t.x, y1: t.y - half, x2: t.x, y2: t.y + half };
+    }
+    return { x1: t.x - half, y1: t.y, x2: t.x + half, y2: t.y };
+  }
+  for (const [key, next] of nextByKey) {
+    const prev = prevByKey.get(key);
+    if (!prev) continue;
+    const el = marksContainer.querySelector(
+      `.oc-mark-tick[data-key="${key}"]`
+    );
+    if (!el) continue;
+    let pEnd = tickEndpoints(prev);
+    const nEnd = tickEndpoints(next);
+    const snap = fromSnapshot?.get(key);
+    if (snap && snap.type === "tick") {
+      pEnd = { x1: snap.x1, y1: snap.y1, x2: snap.x2, y2: snap.y2 };
+    }
+    tweens.push({
+      tweenType: "tick",
+      kind: "update",
+      el,
+      fromX1: pEnd.x1,
+      fromY1: pEnd.y1,
+      fromX2: pEnd.x2,
+      fromY2: pEnd.y2,
+      toX1: nEnd.x1,
+      toY1: nEnd.y1,
+      toX2: nEnd.x2,
+      toY2: nEnd.y2
+    });
+  }
+  for (const [key, next] of nextByKey) {
+    if (prevByKey.has(key)) continue;
+    const el = marksContainer.querySelector(
+      `.oc-mark-tick[data-key="${key}"]`
+    );
+    if (!el) continue;
+    const nEnd = tickEndpoints(next);
+    tweens.push({
+      tweenType: "tick",
+      kind: "enter",
+      el,
+      fromX1: nEnd.x1,
+      fromY1: nEnd.y1,
+      fromX2: nEnd.x2,
+      fromY2: nEnd.y2,
+      toX1: nEnd.x1,
+      toY1: nEnd.y1,
+      toX2: nEnd.x2,
+      toY2: nEnd.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);
+    const pEnd = tickEndpoints(prev);
+    tweens.push({
+      tweenType: "tick",
+      kind: "exit",
+      el: ghost,
+      fromX1: pEnd.x1,
+      fromY1: pEnd.y1,
+      fromX2: pEnd.x2,
+      fromY2: pEnd.y2,
+      toX1: pEnd.x1,
+      toY1: pEnd.y1,
+      toX2: pEnd.x2,
+      toY2: pEnd.y2,
+      ghost,
+      fromOpacity: 1,
+      toOpacity: 0
+    });
+  }
+}
+function buildTextMarkTweens(prevLayout, nextLayout, marksContainer, tweens, ghosts, fromSnapshot) {
+  const prevTexts = prevLayout.marks.filter((m2) => m2.type === "textMark");
+  const nextTexts = nextLayout.marks.filter((m2) => m2.type === "textMark");
+  const prevByKey = /* @__PURE__ */ new Map();
+  for (const m2 of prevTexts) {
+    if (m2.key) prevByKey.set(m2.key, m2);
+  }
+  const nextByKey = /* @__PURE__ */ new Map();
+  for (const m2 of nextTexts) {
+    if (m2.key) nextByKey.set(m2.key, m2);
+  }
+  for (const [key, next] of nextByKey) {
+    const prev = prevByKey.get(key);
+    if (!prev) continue;
+    const el = marksContainer.querySelector(
+      `.oc-mark-text[data-key="${key}"]`
+    );
+    if (!el) continue;
+    let fromX = prev.x;
+    let fromY = prev.y;
+    const snap = fromSnapshot?.get(key);
+    if (snap && snap.type === "textMark") {
+      fromX = snap.x;
+      fromY = snap.y;
+    }
+    tweens.push({
+      tweenType: "textMark",
+      kind: "update",
+      el,
+      fromX,
+      fromY,
+      toX: next.x,
+      toY: next.y
+    });
+  }
+  for (const [key, next] of nextByKey) {
+    if (prevByKey.has(key)) continue;
+    const el = marksContainer.querySelector(
+      `.oc-mark-text[data-key="${key}"]`
+    );
+    if (!el) continue;
+    tweens.push({
+      tweenType: "textMark",
+      kind: "enter",
+      el,
+      fromX: next.x,
+      fromY: next.y,
+      toX: next.x,
+      toY: next.y,
+      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: "textMark",
+      kind: "exit",
+      el: ghost,
+      fromX: prev.x,
+      fromY: prev.y,
+      toX: prev.x,
+      toY: prev.y,
+      ghost,
+      fromOpacity: 1,
+      toOpacity: 0
+    });
+  }
+}
+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 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 nextTickMap = /* @__PURE__ */ new Map();
+  for (const tick of nextAxis.ticks) {
+    nextTickMap.set(serializeKeyValue(tick.value), tick.position);
+  }
+  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
+      });
+    }
+  }
+  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 prevGridMap = /* @__PURE__ */ new Map();
+  for (const gridline of prevAxis.gridlines) {
+    prevGridMap.set(String(gridline.position), gridline.position);
+  }
+  const prevGridByValue = /* @__PURE__ */ new Map();
+  for (const tick of prevAxis.ticks) {
+    const key = serializeKeyValue(tick.value);
+    const matchingGridline = prevAxis.gridlines.find((g) => g.position === tick.position);
+    if (matchingGridline) {
+      prevGridByValue.set(key, matchingGridline.position);
+    }
+  }
+  const nextGridByValue = /* @__PURE__ */ new Map();
+  for (const tick of nextAxis.ticks) {
+    const key = serializeKeyValue(tick.value);
+    const matchingGridline = nextAxis.gridlines.find((g) => g.position === tick.position);
+    if (matchingGridline) {
+      nextGridByValue.set(key, matchingGridline.position);
+    }
+  }
+  const gridlines = axisGroup.querySelectorAll(".oc-gridline[data-tick-key]");
+  const matchedGridKeys = /* @__PURE__ */ new Set();
+  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) {
+      matchedGridKeys.add(key);
+      tweens.push({
+        tweenType: "gridline",
+        kind: "update",
+        el: glEl,
+        orientation,
+        fromPos: prevPos,
+        toPos: nextPos
+      });
+    } else if (prevPos === void 0 && nextPos !== void 0) {
+      matchedGridKeys.add(key);
+      tweens.push({
+        tweenType: "gridline",
+        kind: "enter",
+        el: glEl,
+        orientation,
+        fromPos: nextPos,
+        toPos: nextPos,
+        fromOpacity: 0,
+        toOpacity: 1
+      });
+    }
+  }
+  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
+    });
+  }
+}
+
 // src/mount.ts
 function resolveDarkMode3(mode) {
   if (mode === "force") return true;
@@ -5225,6 +6903,8 @@ function createChart(container, spec, options) {
   let isFirstRender = true;
   let cleanupAnimations = null;
   let pendingResize = false;
+  let transitionHandle = null;
+  let transitionSnapshot = null;
   let fontsReloadPending = false;
   let selectedElement = options?.selectedElement ?? null;
   let overlayElement = null;
@@ -5549,6 +7229,10 @@ function createChart(container, spec, options) {
       pendingRender = true;
       return;
     }
+    if (transitionHandle) {
+      transitionHandle.cancel();
+      transitionHandle = null;
+    }
     if (cleanupAnimations) {
       cleanupAnimations();
       cleanupAnimations = null;
@@ -5589,7 +7273,7 @@ function createChart(container, spec, options) {
       srTable = null;
     }
     currentLayout = compile();
-    const shouldAnimate = isFirstRender && !!currentLayout.animation?.enabled;
+    const shouldAnimate = isFirstRender && !!currentLayout.animation?.enter;
     const crosshair = !!currentLayout.crosshair;
     svgElement = renderChartSVG(currentLayout, container, {
       animate: shouldAnimate,
@@ -5699,6 +7383,12 @@ function createChart(container, spec, options) {
   }
   function update(newSpec, updateOpts) {
     if (destroyed) return;
+    const prevSpec = currentSpec;
+    const prevLayout = currentLayout;
+    const entranceWasRunning = cleanupAnimations != null;
+    if (transitionHandle?.running) {
+      transitionSnapshot = transitionHandle.snapshot();
+    }
     currentSpec = newSpec;
     const nextFont = resolveEffectiveFont();
     if (nextFont !== fontFamily) {
@@ -5711,6 +7401,29 @@ function createChart(container, spec, options) {
       selectedElement = updateOpts.selectedElement ?? null;
     }
     render();
+    if (svgElement && canTransition({
+      prevLayout,
+      nextLayout: currentLayout,
+      prevSpec,
+      nextSpec: newSpec,
+      isFirstRender: false,
+      entranceInFlight: entranceWasRunning
+    })) {
+      const snapshot = transitionSnapshot;
+      transitionSnapshot = null;
+      transitionHandle = runTransition({
+        svg: svgElement,
+        prevLayout,
+        nextLayout: currentLayout,
+        animation: currentLayout.animation,
+        fromSnapshot: snapshot ?? void 0,
+        onComplete: () => {
+          transitionHandle = null;
+        }
+      });
+    } else {
+      transitionSnapshot = null;
+    }
   }
   function resize() {
     if (destroyed) return;
@@ -5765,6 +7478,11 @@ function createChart(container, spec, options) {
   function destroy() {
     if (destroyed) return;
     destroyed = true;
+    if (transitionHandle) {
+      transitionHandle.cancel();
+      transitionHandle = null;
+    }
+    transitionSnapshot = null;
     if (cleanupAnimations) {
       cleanupAnimations();
       cleanupAnimations = null;
@@ -6221,7 +7939,7 @@ function applyTextStyle(el, style) {
   }
 }
 function stampAnimationAttrs(el, mark, fallbackIndex, animation) {
-  if (!animation?.enabled) return;
+  if (!animation?.enter) return;
   const idx = mark.animationIndex ?? fallbackIndex;
   el.setAttribute("data-animation-index", String(idx));
   el.style.setProperty("--oc-mark-index", String(idx));
@@ -6553,16 +8271,17 @@ function renderSankeySVG(layout, animation) {
   svg.style.height = `${height}px`;
   svg.setAttribute("role", layout.a11y.role);
   svg.setAttribute("aria-label", layout.a11y.altText);
-  const animate = animation?.enabled;
+  const enterPhase = animation?.enter;
+  const animate = !!enterPhase;
   const classes = animate ? "oc-chart oc-sankey oc-animate" : "oc-chart oc-sankey";
   svg.setAttribute("class", classes);
-  if (animation?.enabled) {
+  if (enterPhase) {
     const totalMarks = layout.nodes.length + layout.links.length;
-    const stagger = clampStaggerDelay(animation.staggerDelay, totalMarks);
-    svg.style.setProperty("--oc-animation-duration", `${animation.duration}ms`);
+    const stagger = clampStaggerDelay(enterPhase.staggerDelay, totalMarks);
+    svg.style.setProperty("--oc-animation-duration", `${enterPhase.duration}ms`);
     svg.style.setProperty("--oc-animation-stagger", `${stagger}ms`);
     svg.style.setProperty("--oc-annotation-delay", `${animation.annotationDelay}ms`);
-    const easeVar = EASE_VAR_MAP[animation.ease] || EASE_VAR_MAP.smooth;
+    const easeVar = EASE_VAR_MAP[enterPhase.ease] || EASE_VAR_MAP.smooth;
     svg.style.setProperty("--oc-animation-ease", easeVar);
   }
   const bg = createSVGElement2("rect");
@@ -6800,7 +8519,7 @@ function createSankey(container, spec, options) {
       svgElement.parentNode.removeChild(svgElement);
     }
     currentLayout = compile();
-    const shouldAnimate = isFirstRender && currentLayout.animation?.enabled;
+    const shouldAnimate = isFirstRender && !!currentLayout.animation?.enter;
     isFirstRender = false;
     const animation = shouldAnimate ? currentLayout.animation : void 0;
     svgElement = renderSankeySVG(currentLayout, animation);
@@ -6901,7 +8620,7 @@ function createSankey(container, spec, options) {
   }
   try {
     currentLayout = compile();
-    const shouldAnimate = currentLayout.animation?.enabled;
+    const shouldAnimate = !!currentLayout.animation?.enter;
     isFirstRender = false;
     const animation = shouldAnimate ? currentLayout.animation : void 0;
     svgElement = renderSankeySVG(currentLayout, animation);
@@ -7412,14 +9131,14 @@ function renderTable(layout, container, opts) {
   if (footerRow.childElementCount > 0) {
     wrapper.appendChild(footerRow);
   }
-  if (opts?.animate && layout.animation?.enabled) {
-    const anim = layout.animation;
+  if (opts?.animate && layout.animation?.enter) {
+    const enterPhase = layout.animation.enter;
     const rowCount = layout.rows.length;
-    const stagger = clampStaggerDelay2(anim.staggerDelay, rowCount);
+    const stagger = clampStaggerDelay2(enterPhase.staggerDelay, rowCount);
     const s = wrapper.style;
-    s.setProperty("--oc-animation-duration", `${anim.duration}ms`);
+    s.setProperty("--oc-animation-duration", `${enterPhase.duration}ms`);
     s.setProperty("--oc-animation-stagger", `${stagger}ms`);
-    s.setProperty("--oc-animation-ease", EASE_VAR_MAP2[anim.ease] || EASE_VAR_MAP2.smooth);
+    s.setProperty("--oc-animation-ease", EASE_VAR_MAP2[enterPhase.ease] || EASE_VAR_MAP2.smooth);
     wrapper.classList.add("oc-animate");
   }
   container.appendChild(wrapper);
@@ -7549,7 +9268,7 @@ function createTable(container, spec, options) {
         wrapperElement = null;
       }
       currentLayout = compile();
-      const shouldAnimate = isFirstRender && !!currentLayout.animation?.enabled;
+      const shouldAnimate = isFirstRender && !!currentLayout.animation?.enter;
       wrapperElement = renderTable(currentLayout, container, { animate: shouldAnimate });
       if (shouldAnimate && wrapperElement) {
         cleanupAnimations = setupTableAnimationCleanup(wrapperElement);
@@ -7922,7 +9641,7 @@ function createTileMap(container, spec, options) {
         tooltipManager = createTooltipManager(container);
       }
     }
-    if (animate && currentLayout.animation?.enabled) {
+    if (animate && currentLayout.animation?.enter) {
       animationCleanup = setupAnimationCleanup(newSvg, () => {
         if (pendingResize && !destroyed) {
           pendingResize = false;
@@ -8043,6 +9762,7 @@ export {
   exportSVG,
   exportSVGWithFonts,
   observeResize,
+  rectPathWithCorners,
   registerMarkRenderer,
   renderBarCell,
   renderCategoryCell,