@opendata-ai/openchart-vanilla 7.7.0 → 7.9.0

package/dist/index.js

@@ -1,8 +1,12 @@
 import {
+  buildGradientDefs,
+  rectPathWithCorners,
   registerMarkRenderer,
   renderChartSVG,
-  renderLegend
-} from "./chunk-PSMDJEXK.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;
@@ -3370,7 +3374,7 @@ function createGraph(container, spec, options) {
     }
     chromeEl = document.createElement("div");
     chromeEl.className = "oc-graph-chrome";
-    renderChrome4();
+    renderChrome3();
     wrapper.appendChild(chromeEl);
     canvas = document.createElement("canvas");
     canvas.className = "oc-graph-canvas";
@@ -3382,7 +3386,7 @@ function createGraph(container, spec, options) {
     if (options?.legend !== false) {
       legendEl = document.createElement("div");
       legendEl.className = "oc-graph-legend";
-      renderLegend3();
+      renderLegend2();
       wrapper.appendChild(legendEl);
     }
     container.appendChild(wrapper);
@@ -3390,7 +3394,7 @@ function createGraph(container, spec, options) {
     renderer = new GraphCanvasRenderer(canvas);
     renderer.resize(width, canvasHeight);
   }
-  function renderChrome4() {
+  function renderChrome3() {
     if (!chromeEl) return;
     let html = "";
     if (compilation.chrome.title) {
@@ -3406,7 +3410,7 @@ function createGraph(container, spec, options) {
       chromeEl.style.display = "";
     }
   }
-  function renderLegend3() {
+  function renderLegend2() {
     if (!legendEl) return;
     const entries = "entries" in compilation.legend ? compilation.legend.entries : [];
     if (entries.length === 0) {
@@ -3704,8 +3708,8 @@ function createGraph(container, spec, options) {
     compilation = compile();
     adjacencyMap = buildAdjacencyMap(compilation.edges);
     buildDataMaps();
-    renderChrome4();
-    renderLegend3();
+    renderChrome3();
+    renderLegend2();
     initSimulation();
     initInteraction();
     hoveredNodeId = null;
@@ -3739,8 +3743,8 @@ function createGraph(container, spec, options) {
       };
     });
     spatialIndex.rebuild(positionedNodes);
-    renderChrome4();
-    renderLegend3();
+    renderChrome3();
+    renderLegend2();
     needsRender = true;
     scheduleRender();
   }
@@ -4335,7 +4339,7 @@ function wireAnnotationDrag(svg, specAnnotations, onAnnotationEdit, onEdit, setD
   };
 }
 function wireConnectorEndpointDrag(svg, specAnnotations, onEdit, setDragging) {
-  const SVG_NS4 = "http://www.w3.org/2000/svg";
+  const SVG_NS3 = "http://www.w3.org/2000/svg";
   const cleanups = [];
   const annotationGroups = svg.querySelectorAll(".oc-annotation-text");
   for (const el of annotationGroups) {
@@ -4374,7 +4378,7 @@ function wireConnectorEndpointDrag(svg, specAnnotations, onEdit, setDragging) {
     const createdHandles = [];
     for (const ep of endpoints) {
       if (!Number.isFinite(ep.cx) || !Number.isFinite(ep.cy)) continue;
-      const handleEl = document.createElementNS(SVG_NS4, "circle");
+      const handleEl = document.createElementNS(SVG_NS3, "circle");
       handleEl.setAttribute("class", "oc-connector-handle");
       handleEl.setAttribute("data-endpoint", ep.name);
       handleEl.setAttribute("cx", String(ep.cx));
@@ -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));
@@ -6335,7 +8053,7 @@ function renderBrand(parent, layout) {
   a2.appendChild(text);
   parent.appendChild(a2);
 }
-function renderLegend2(parent, legendLayout) {
+function renderLegend(parent, legendLayout) {
   if (!("entries" in legendLayout) || legendLayout.entries.length === 0) return;
   const legend = legendLayout;
   const g = createSVGElement2("g");
@@ -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");
@@ -6582,7 +8301,7 @@ function renderSankeySVG(layout, animation) {
   renderLinks(svg, layout.links, nodePositions, animation);
   renderNodes(svg, layout.nodes, animation);
   renderLabels(svg, layout.nodes, layout.measureText);
-  renderLegend2(svg, layout.legend);
+  renderLegend(svg, layout.legend);
   renderChrome2(svg, layout);
   if (layout.watermark) {
     renderBrand(svg, layout);
@@ -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);
@@ -7792,349 +9511,6 @@ function createTable(container, spec, options) {
 
 // src/tilemap-mount.ts
 import { compileTileMap } from "@opendata-ai/openchart-engine";
-
-// src/tilemap-renderer.ts
-import { textAscent as textAscent3 } from "@opendata-ai/openchart-core";
-var SVG_NS3 = "http://www.w3.org/2000/svg";
-var XLINK_NS3 = "http://www.w3.org/1999/xlink";
-var BRAND_URL4 = "https://tryopendata.ai";
-var EASE_VAR_MAP3 = {
-  smooth: "var(--oc-ease-smooth)",
-  snappy: "var(--oc-ease-snappy)"
-};
-var gradientIdCounter = 0;
-function createSVGElement3(tag) {
-  return document.createElementNS(SVG_NS3, tag);
-}
-function setAttrs3(el, attrs) {
-  for (const [key, value] of Object.entries(attrs)) {
-    el.setAttribute(key, String(value));
-  }
-}
-function renderChrome3(parent, layout) {
-  const g = createSVGElement3("g");
-  g.setAttribute("class", "oc-chrome");
-  const { chrome } = layout;
-  const bottomOffset = layout.area.y + layout.area.height;
-  if (chrome.title) {
-    const text = createSVGElement3("text");
-    setAttrs3(text, {
-      x: chrome.title.x,
-      y: chrome.title.y + textAscent3(chrome.title.style.fontSize)
-    });
-    text.setAttribute("class", "oc-title");
-    text.setAttribute("font-family", chrome.title.style.fontFamily);
-    text.setAttribute("font-size", String(chrome.title.style.fontSize));
-    text.setAttribute("font-weight", String(chrome.title.style.fontWeight));
-    text.style.setProperty("fill", chrome.title.style.fill);
-    text.textContent = chrome.title.text;
-    g.appendChild(text);
-  }
-  if (chrome.subtitle) {
-    const text = createSVGElement3("text");
-    setAttrs3(text, {
-      x: chrome.subtitle.x,
-      y: chrome.subtitle.y + textAscent3(chrome.subtitle.style.fontSize)
-    });
-    text.setAttribute("class", "oc-subtitle");
-    text.setAttribute("font-family", chrome.subtitle.style.fontFamily);
-    text.setAttribute("font-size", String(chrome.subtitle.style.fontSize));
-    text.setAttribute("font-weight", String(chrome.subtitle.style.fontWeight));
-    text.style.setProperty(
-      "fill",
-      chrome.subtitle.style.fill
-    );
-    text.textContent = chrome.subtitle.text;
-    g.appendChild(text);
-  }
-  if (chrome.source) {
-    const text = createSVGElement3("text");
-    setAttrs3(text, {
-      x: chrome.source.x,
-      y: bottomOffset + chrome.source.y + textAscent3(chrome.source.style.fontSize)
-    });
-    text.setAttribute("class", "oc-source");
-    text.setAttribute("font-family", chrome.source.style.fontFamily);
-    text.setAttribute("font-size", String(chrome.source.style.fontSize));
-    text.setAttribute("font-weight", String(chrome.source.style.fontWeight));
-    text.style.setProperty(
-      "fill",
-      chrome.source.style.fill
-    );
-    text.textContent = chrome.source.text;
-    g.appendChild(text);
-  }
-  if (chrome.byline) {
-    const text = createSVGElement3("text");
-    setAttrs3(text, {
-      x: chrome.byline.x,
-      y: bottomOffset + chrome.byline.y + textAscent3(chrome.byline.style.fontSize)
-    });
-    text.setAttribute("class", "oc-byline");
-    text.setAttribute("font-family", chrome.byline.style.fontFamily);
-    text.setAttribute("font-size", String(chrome.byline.style.fontSize));
-    text.setAttribute("font-weight", String(chrome.byline.style.fontWeight));
-    text.style.setProperty(
-      "fill",
-      chrome.byline.style.fill
-    );
-    text.textContent = chrome.byline.text;
-    g.appendChild(text);
-  }
-  if (chrome.footer) {
-    const text = createSVGElement3("text");
-    setAttrs3(text, {
-      x: chrome.footer.x,
-      y: bottomOffset + chrome.footer.y + textAscent3(chrome.footer.style.fontSize)
-    });
-    text.setAttribute("class", "oc-footer");
-    text.setAttribute("font-family", chrome.footer.style.fontFamily);
-    text.setAttribute("font-size", String(chrome.footer.style.fontSize));
-    text.setAttribute("font-weight", String(chrome.footer.style.fontWeight));
-    text.style.setProperty(
-      "fill",
-      chrome.footer.style.fill
-    );
-    text.textContent = chrome.footer.text;
-    g.appendChild(text);
-  }
-  parent.appendChild(g);
-}
-function renderWatermark2(parent, layout) {
-  if (layout.width < 480) return;
-  const { width, height } = layout;
-  const { theme } = layout;
-  const padding = theme.spacing.padding;
-  const rightEdge = width - padding;
-  const bottomEdge = height - padding;
-  const fill = theme.colors.axis;
-  const a2 = createSVGElement3("a");
-  a2.setAttribute("href", BRAND_URL4);
-  a2.setAttributeNS(XLINK_NS3, "xlink:href", BRAND_URL4);
-  a2.setAttribute("target", "_blank");
-  a2.setAttribute("rel", "noopener");
-  a2.setAttribute("class", "oc-chrome-ref");
-  const text = createSVGElement3("text");
-  setAttrs3(text, {
-    x: rightEdge,
-    y: bottomEdge,
-    "dominant-baseline": "alphabetic",
-    "text-anchor": "end",
-    "font-family": theme.fonts.family,
-    "font-size": 12,
-    "fill-opacity": 0.55
-  });
-  text.style.setProperty("fill", fill);
-  const trySpan = createSVGElement3("tspan");
-  setAttrs3(trySpan, { "font-weight": 500 });
-  trySpan.textContent = "try";
-  const openDataSpan = createSVGElement3("tspan");
-  setAttrs3(openDataSpan, { "font-weight": 600, "font-size": 16 });
-  openDataSpan.textContent = "OpenData";
-  const aiSpan = createSVGElement3("tspan");
-  setAttrs3(aiSpan, { "font-weight": 500 });
-  aiSpan.textContent = ".ai";
-  text.appendChild(trySpan);
-  text.appendChild(openDataSpan);
-  text.appendChild(aiSpan);
-  a2.appendChild(text);
-  parent.appendChild(a2);
-}
-function renderTiles(parent, tiles, animation) {
-  const g = createSVGElement3("g");
-  g.setAttribute("class", "oc-tilemap-tiles");
-  g.setAttribute("role", "list");
-  const tileDelays = [];
-  if (animation?.enabled) {
-    const baseStagger = 800 / Math.max(tiles.length, 1);
-    let seed = 17;
-    for (let i = 0; i < tiles.length; i++) {
-      const idx = tiles[i].animationIndex ?? i;
-      seed = seed * 1103515245 + 12345 & 2147483647;
-      const jitter = (seed % 1e3 / 1e3 - 0.5) * 0.8;
-      tileDelays.push(Math.max(0, Math.round(idx * baseStagger * (1 + jitter))));
-    }
-  }
-  for (let i = 0; i < tiles.length; i++) {
-    const tile = tiles[i];
-    const tileGroup = createSVGElement3("g");
-    tileGroup.setAttribute("class", "oc-tilemap-tile");
-    tileGroup.setAttribute("data-state", tile.stateCode);
-    tileGroup.setAttribute("role", "listitem");
-    if (tile.aria?.label) {
-      tileGroup.setAttribute("aria-label", tile.aria.label);
-    }
-    if (animation?.enabled) {
-      const idx = tile.animationIndex ?? i;
-      tileGroup.setAttribute("data-animation-index", String(idx));
-      tileGroup.style.setProperty(
-        "--oc-mark-index",
-        String(idx)
-      );
-      tileGroup.style.setProperty(
-        "--oc-tile-delay",
-        `${tileDelays[i]}ms`
-      );
-    }
-    const rect = createSVGElement3("rect");
-    setAttrs3(rect, {
-      x: tile.x,
-      y: tile.y,
-      width: tile.size,
-      height: tile.size,
-      rx: tile.cornerRadius,
-      fill: tile.fill,
-      "fill-opacity": tile.fillOpacity ?? 1,
-      stroke: tile.stroke,
-      "stroke-width": tile.strokeWidth
-    });
-    tileGroup.appendChild(rect);
-    const codeLabel = createSVGElement3("text");
-    setAttrs3(codeLabel, {
-      x: tile.label.x,
-      y: tile.label.y,
-      "text-anchor": "middle",
-      "dominant-baseline": "central",
-      "font-family": tile.label.style.fontFamily,
-      "font-size": tile.label.style.fontSize,
-      "font-weight": tile.label.style.fontWeight
-    });
-    codeLabel.style.setProperty(
-      "fill",
-      tile.label.style.fill
-    );
-    codeLabel.textContent = tile.label.text;
-    tileGroup.appendChild(codeLabel);
-    if (tile.valueLabel.visible && tile.valueLabel.text) {
-      const valueLabel = createSVGElement3("text");
-      setAttrs3(valueLabel, {
-        x: tile.valueLabel.x,
-        y: tile.valueLabel.y,
-        "text-anchor": "middle",
-        "dominant-baseline": "central",
-        "font-family": tile.valueLabel.style.fontFamily,
-        "font-size": tile.valueLabel.style.fontSize,
-        "font-weight": tile.valueLabel.style.fontWeight
-      });
-      valueLabel.style.setProperty(
-        "fill",
-        tile.valueLabel.style.fill
-      );
-      valueLabel.textContent = tile.valueLabel.text;
-      tileGroup.appendChild(valueLabel);
-    }
-    g.appendChild(tileGroup);
-  }
-  parent.appendChild(g);
-}
-function renderGradientLegend(parent, layout) {
-  if (!layout.gradientLegend) return;
-  const { gradientLegend } = layout;
-  const g = createSVGElement3("g");
-  g.setAttribute("class", "oc-tilemap-legend");
-  const defs = parent.querySelector("defs") || createSVGElement3("defs");
-  const exists = parent.querySelector("defs");
-  if (!exists) {
-    parent.insertBefore(defs, parent.firstChild);
-  }
-  const gradientId = `oc-tilemap-legend-gradient-${gradientIdCounter++}`;
-  const grad = createSVGElement3("linearGradient");
-  grad.id = gradientId;
-  grad.setAttribute("x1", "0%");
-  grad.setAttribute("y1", "0%");
-  grad.setAttribute("x2", "100%");
-  grad.setAttribute("y2", "0%");
-  for (const stop of gradientLegend.colorStops) {
-    const s = createSVGElement3("stop");
-    const attrs = {
-      offset: `${stop.offset * 100}%`,
-      "stop-color": stop.color
-    };
-    if (stop.opacity !== void 0) {
-      attrs["stop-opacity"] = stop.opacity;
-    }
-    setAttrs3(s, attrs);
-    grad.appendChild(s);
-  }
-  defs.appendChild(grad);
-  const barHeight = gradientLegend.bounds.height;
-  const bar = createSVGElement3("rect");
-  setAttrs3(bar, {
-    x: gradientLegend.bounds.x,
-    y: gradientLegend.bounds.y,
-    width: gradientLegend.bounds.width,
-    height: barHeight,
-    rx: barHeight / 2,
-    fill: `url(#${gradientId})`
-  });
-  g.appendChild(bar);
-  const minText = createSVGElement3("text");
-  setAttrs3(minText, {
-    x: gradientLegend.bounds.x,
-    y: gradientLegend.bounds.y + gradientLegend.bounds.height + 14,
-    "text-anchor": "start",
-    "font-family": gradientLegend.labelStyle.fontFamily,
-    "font-size": gradientLegend.labelStyle.fontSize,
-    "font-weight": gradientLegend.labelStyle.fontWeight
-  });
-  minText.style.setProperty(
-    "fill",
-    gradientLegend.labelStyle.fill
-  );
-  minText.textContent = gradientLegend.minLabel;
-  g.appendChild(minText);
-  const maxText = createSVGElement3("text");
-  setAttrs3(maxText, {
-    x: gradientLegend.bounds.x + gradientLegend.bounds.width,
-    y: gradientLegend.bounds.y + gradientLegend.bounds.height + 14,
-    "text-anchor": "end",
-    "font-family": gradientLegend.labelStyle.fontFamily,
-    "font-size": gradientLegend.labelStyle.fontSize,
-    "font-weight": gradientLegend.labelStyle.fontWeight
-  });
-  maxText.style.setProperty(
-    "fill",
-    gradientLegend.labelStyle.fill
-  );
-  maxText.textContent = gradientLegend.maxLabel;
-  g.appendChild(maxText);
-  parent.appendChild(g);
-}
-function renderTileMapSVG(layout, opts) {
-  const { width, height, tiles, a11y, watermark, animation } = layout;
-  const animate = opts?.animate && animation?.enabled;
-  const svg = createSVGElement3("svg");
-  svg.setAttribute("viewBox", `0 0 ${width} ${height}`);
-  svg.setAttribute("role", "img");
-  if (a11y.altText) {
-    svg.setAttribute("aria-label", a11y.altText);
-  }
-  const classes = animate ? "oc-tilemap oc-animate" : "oc-tilemap";
-  svg.setAttribute("class", classes);
-  if (animate && animation) {
-    const stagger = Math.max(5, Math.round(800 / Math.max(tiles.length, 1)));
-    svg.style.setProperty("--oc-animation-duration", `${animation.duration}ms`);
-    svg.style.setProperty("--oc-animation-stagger", `${stagger}ms`);
-    svg.style.setProperty("--oc-annotation-delay", `${animation.annotationDelay}ms`);
-    const easeVar = EASE_VAR_MAP3[animation.ease] || EASE_VAR_MAP3.smooth;
-    svg.style.setProperty("--oc-animation-ease", easeVar);
-  }
-  const defs = createSVGElement3("defs");
-  svg.appendChild(defs);
-  renderChrome3(svg, layout);
-  renderTiles(svg, tiles, animate ? animation : void 0);
-  if (layout.categoricalLegend) {
-    renderLegend(svg, layout.categoricalLegend);
-  } else {
-    renderGradientLegend(svg, layout);
-  }
-  if (watermark) {
-    renderWatermark2(svg, layout);
-  }
-  return svg;
-}
-
-// src/tilemap-mount.ts
 function resolveDarkMode6(mode) {
   if (mode === "force") return true;
   if (mode === "off" || mode === void 0) return false;
@@ -8265,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;
@@ -8386,6 +9762,7 @@ export {
   exportSVG,
   exportSVGWithFonts,
   observeResize,
+  rectPathWithCorners,
   registerMarkRenderer,
   renderBarCell,
   renderCategoryCell,