@opendata-ai/openchart-vanilla 8.7.0 → 8.9.0

package/dist/{chunk-5O624XON.js → chunk-6TD7GWR4.js}

@@ -4,7 +4,7 @@ import {
   exportPNG,
   exportSVG,
   exportSVGWithFonts
-} from "./chunk-I73B3DJI.js";
+} from "./chunk-R5TZHNTG.js";
 import {
   buildGradientDefs,
   buildPatternDefs,
@@ -17,7 +17,7 @@ import {
   resolveMarkFill,
   resolvePatternFill,
   stampAnimationVars
-} from "./chunk-SXTHPXG6.js";
+} from "./chunk-TP3GCWCO.js";
 import {
   SVG_NS,
   createSVGElement,
@@ -453,6 +453,140 @@ function materializeCanvasModeSVG(layout, opts) {
   return materializeRasterMarkSVG(layout);
 }
 
+// src/transition/keys.ts
+function annotationKey(a) {
+  if (a.id) return `id:${a.id}`;
+  return `${a.type}:${a.label?.text ?? ""}`;
+}
+function keyAnnotations(annotations) {
+  const seen = /* @__PURE__ */ new Map();
+  return annotations.map((a) => {
+    const base = annotationKey(a);
+    const n = seen.get(base) ?? 0;
+    seen.set(base, n + 1);
+    return n === 0 ? base : `${base}#${n}`;
+  });
+}
+
+// src/transition/gate.ts
+var TRANSITIONABLE_MARKS = /* @__PURE__ */ new Set([
+  "bar",
+  "line",
+  "area",
+  "point",
+  "beeswarm",
+  "arc",
+  "histogram",
+  "density"
+]);
+var DEFAULT_UPDATE_MAX_MARKS = 500;
+var CANVAS_DEFAULT_UPDATE_MAX_MARKS = 2e4;
+function canTransitionSpecShape(prevSpec, nextSpec) {
+  const prev = prevSpec;
+  const next = nextSpec;
+  if (!prev || !next || !("mark" in prev) || !("mark" in next)) return false;
+  const prevMark = typeof prev.mark === "string" ? prev.mark : prev.mark?.type;
+  const nextMark = typeof next.mark === "string" ? next.mark : next.mark?.type;
+  if (prevMark !== nextMark) return false;
+  if (!TRANSITIONABLE_MARKS.has(prevMark)) return false;
+  const prevEnc = prev.encoding;
+  const nextEnc = next.encoding;
+  if (!prevEnc || !nextEnc) return false;
+  if (JSON.stringify(prev.transform) !== JSON.stringify(next.transform)) return false;
+  for (const channel of ["x", "y", "theta", "radius"]) {
+    for (const property of ["aggregate", "bin", "stack", "timeUnit"]) {
+      if (JSON.stringify(prevEnc[channel]?.[property]) !== JSON.stringify(nextEnc[channel]?.[property]))
+        return false;
+    }
+    const field = prevEnc[channel]?.field;
+    if (field) {
+      const a = prev.fields?.[field];
+      const b = next.fields?.[field];
+      if (["unit", "measure", "representation"].some((key) => a?.[key] !== b?.[key])) return false;
+    }
+  }
+  return !(prevEnc.x?.field !== nextEnc.x?.field || prevEnc.x?.type !== nextEnc.x?.type || prevEnc.x?.scale?.type !== nextEnc.x?.scale?.type || prevEnc.y?.field !== nextEnc.y?.field || prevEnc.y?.type !== nextEnc.y?.type || prevEnc.y?.scale?.type !== nextEnc.y?.scale?.type || prevEnc.theta?.field !== nextEnc.theta?.field || prevEnc.theta?.type !== nextEnc.theta?.type || prevEnc.color?.field !== nextEnc.color?.field || prevEnc.key?.field !== nextEnc.key?.field || prevEnc.facet?.field !== nextEnc.facet?.field || prevEnc.row?.field !== nextEnc.row?.field || prevEnc.column?.field !== nextEnc.column?.field);
+}
+function canTransition(args) {
+  const { prevLayout, nextLayout, prevSpec, nextSpec, isFirstRender, entranceInFlight } = args;
+  if (!prevLayout || !prevSpec || isFirstRender) return false;
+  if (!nextLayout.animation?.update) return false;
+  if (!canTransitionSpecShape(prevSpec, nextSpec)) return false;
+  if (entranceInFlight) return false;
+  const cap = nextLayout.animation.update.maxMarks ?? (nextLayout.markRenderMode === "canvas" ? CANVAS_DEFAULT_UPDATE_MAX_MARKS : DEFAULT_UPDATE_MAX_MARKS);
+  if (Math.max(prevLayout.marks.length, nextLayout.marks.length) > cap) return false;
+  if (!hasVisibleChange(prevLayout, nextLayout)) return false;
+  if (typeof window !== "undefined" && typeof window.matchMedia === "function") {
+    try {
+      if (window.matchMedia("(prefers-reduced-motion: reduce)").matches) return false;
+    } catch {
+    }
+  }
+  return true;
+}
+function hasVisibleChange(prevLayout, nextLayout) {
+  return hasGeometryChanged(prevLayout, nextLayout) || hasColorChanged(prevLayout, nextLayout) || hasAnnotationChanged(prevLayout, nextLayout);
+}
+function hasColorChanged(prevLayout, nextLayout) {
+  const prevMarks = prevLayout.marks;
+  const nextMarks = nextLayout.marks;
+  if (prevMarks.length !== nextMarks.length) return true;
+  for (let i = 0; i < prevMarks.length; i++) {
+    const p = prevMarks[i];
+    const n = nextMarks[i];
+    if (p.fill !== n.fill || p.stroke !== n.stroke) return true;
+  }
+  return false;
+}
+function hasAnnotationChanged(prevLayout, nextLayout) {
+  const prev = prevLayout.annotations ?? [];
+  const next = nextLayout.annotations ?? [];
+  if (prev.length !== next.length) return true;
+  const prevKeys = keyAnnotations(prev);
+  const nextKeys = keyAnnotations(next);
+  for (let i = 0; i < prev.length; i++) {
+    if (prevKeys[i] !== nextKeys[i]) return true;
+    const p = prev[i];
+    const n = next[i];
+    if (p.label?.x !== n.label?.x || p.label?.y !== n.label?.y) return true;
+    if (p.opacity !== n.opacity) return true;
+  }
+  return false;
+}
+function hasGeometryChanged(prevLayout, nextLayout) {
+  const prevMarks = prevLayout.marks;
+  const nextMarks = nextLayout.marks;
+  if (prevMarks.length !== nextMarks.length) return true;
+  for (let i = 0; i < prevMarks.length; i++) {
+    const p = prevMarks[i];
+    const n = nextMarks[i];
+    if (p.type !== n.type || p.key !== n.key) return true;
+    if (p.type === "rect" && n.type === "rect") {
+      if (p.x !== n.x || p.y !== n.y || p.width !== n.width || p.height !== n.height) return true;
+    } else if (p.type === "line" && n.type === "line") {
+      if (p.path !== n.path || p.points.length !== n.points.length) return true;
+      for (let j = 0; j < p.points.length; j++) {
+        if (p.points[j].x !== n.points[j].x || p.points[j].y !== n.points[j].y) return true;
+      }
+    } else if (p.type === "area" && n.type === "area") {
+      if (p.path !== n.path) return true;
+    } else if (p.type === "arc" && n.type === "arc") {
+      if (p.startAngle !== n.startAngle || p.endAngle !== n.endAngle || p.innerRadius !== n.innerRadius || p.outerRadius !== n.outerRadius || p.center.x !== n.center.x || p.center.y !== n.center.y) {
+        return true;
+      }
+    } else if (p.type === "point" && n.type === "point") {
+      if (p.cx !== n.cx || p.cy !== n.cy || p.r !== n.r) return true;
+    } else if (p.type === "rule" && n.type === "rule") {
+      if (p.x1 !== n.x1 || p.y1 !== n.y1 || p.x2 !== n.x2 || p.y2 !== n.y2) return true;
+    } else if (p.type === "tick" && n.type === "tick") {
+      if (p.x !== n.x || p.y !== n.y) return true;
+    } else if (p.type === "textMark" && n.type === "textMark") {
+      if (p.x !== n.x || p.y !== n.y) return true;
+    }
+  }
+  return false;
+}
+
 // src/text-edit-overlay.ts
 function getScale(svg) {
   const viewBox = svg.viewBox?.baseVal;
@@ -705,138 +839,91 @@ function createTextEditOverlayAtPosition(config) {
   return { destroy };
 }
 
-// src/transition/keys.ts
-function annotationKey(a) {
-  if (a.id) return `id:${a.id}`;
-  return `${a.type}:${a.label?.text ?? ""}`;
-}
-function keyAnnotations(annotations) {
-  const seen = /* @__PURE__ */ new Map();
-  return annotations.map((a) => {
-    const base = annotationKey(a);
-    const n = seen.get(base) ?? 0;
-    seen.set(base, n + 1);
-    return n === 0 ? base : `${base}#${n}`;
-  });
-}
-
-// src/transition/gate.ts
-var TRANSITIONABLE_MARKS = /* @__PURE__ */ new Set([
-  "bar",
-  "line",
-  "area",
-  "point",
-  "beeswarm",
-  "arc",
-  "histogram",
-  "density"
-]);
-var DEFAULT_UPDATE_MAX_MARKS = 500;
-var CANVAS_DEFAULT_UPDATE_MAX_MARKS = 2e4;
-function canTransitionSpecShape(prevSpec, nextSpec) {
-  const prev = prevSpec;
-  const next = nextSpec;
-  if (!prev || !next || !("mark" in prev) || !("mark" in next)) return false;
-  const prevMark = typeof prev.mark === "string" ? prev.mark : prev.mark?.type;
-  const nextMark = typeof next.mark === "string" ? next.mark : next.mark?.type;
-  if (prevMark !== nextMark) return false;
-  if (!TRANSITIONABLE_MARKS.has(prevMark)) return false;
-  const prevEnc = prev.encoding;
-  const nextEnc = next.encoding;
-  if (!prevEnc || !nextEnc) return false;
-  return !(prevEnc.x?.field !== nextEnc.x?.field || prevEnc.x?.type !== nextEnc.x?.type || prevEnc.y?.field !== nextEnc.y?.field || prevEnc.y?.type !== nextEnc.y?.type || prevEnc.theta?.field !== nextEnc.theta?.field || prevEnc.theta?.type !== nextEnc.theta?.type || prevEnc.color?.field !== nextEnc.color?.field || prevEnc.key?.field !== nextEnc.key?.field || prevEnc.facet?.field !== nextEnc.facet?.field || prevEnc.row?.field !== nextEnc.row?.field || prevEnc.column?.field !== nextEnc.column?.field);
-}
-function canTransition(args) {
-  const { prevLayout, nextLayout, prevSpec, nextSpec, isFirstRender, entranceInFlight } = args;
-  if (!prevLayout || !prevSpec || isFirstRender) return false;
-  if (!nextLayout.animation?.update) return false;
-  if (!canTransitionSpecShape(prevSpec, nextSpec)) return false;
-  if (entranceInFlight) return false;
-  if (prevLayout.dimensions.width !== nextLayout.dimensions.width || prevLayout.dimensions.height !== nextLayout.dimensions.height) {
-    return false;
-  }
-  const cap = nextLayout.animation.update.maxMarks ?? (nextLayout.markRenderMode === "canvas" ? CANVAS_DEFAULT_UPDATE_MAX_MARKS : DEFAULT_UPDATE_MAX_MARKS);
-  if (Math.max(prevLayout.marks.length, nextLayout.marks.length) > cap) return false;
-  if (!hasVisibleChange(prevLayout, nextLayout)) return false;
-  if (typeof window !== "undefined" && typeof window.matchMedia === "function") {
-    try {
-      if (window.matchMedia("(prefers-reduced-motion: reduce)").matches) return false;
-    } catch {
-    }
-  }
-  return true;
-}
-function hasVisibleChange(prevLayout, nextLayout) {
-  return hasGeometryChanged(prevLayout, nextLayout) || hasColorChanged(prevLayout, nextLayout) || hasAnnotationChanged(prevLayout, nextLayout);
-}
-function hasColorChanged(prevLayout, nextLayout) {
-  const prevMarks = prevLayout.marks;
-  const nextMarks = nextLayout.marks;
-  if (prevMarks.length !== nextMarks.length) return true;
-  for (let i = 0; i < prevMarks.length; i++) {
-    const p = prevMarks[i];
-    const n = nextMarks[i];
-    if (p.fill !== n.fill || p.stroke !== n.stroke) return true;
-  }
-  return false;
-}
-function hasAnnotationChanged(prevLayout, nextLayout) {
-  const prev = prevLayout.annotations ?? [];
-  const next = nextLayout.annotations ?? [];
-  if (prev.length !== next.length) return true;
-  const prevKeys = keyAnnotations(prev);
-  const nextKeys = keyAnnotations(next);
-  for (let i = 0; i < prev.length; i++) {
-    if (prevKeys[i] !== nextKeys[i]) return true;
-    const p = prev[i];
-    const n = next[i];
-    if (p.label?.x !== n.label?.x || p.label?.y !== n.label?.y) return true;
-    if (p.opacity !== n.opacity) return true;
-  }
-  return false;
-}
-function hasGeometryChanged(prevLayout, nextLayout) {
-  const prevMarks = prevLayout.marks;
-  const nextMarks = nextLayout.marks;
-  if (prevMarks.length !== nextMarks.length) return true;
-  for (let i = 0; i < prevMarks.length; i++) {
-    const p = prevMarks[i];
-    const n = nextMarks[i];
-    if (p.type !== n.type || p.key !== n.key) return true;
-    if (p.type === "rect" && n.type === "rect") {
-      if (p.x !== n.x || p.y !== n.y || p.width !== n.width || p.height !== n.height) return true;
-    } else if (p.type === "line" && n.type === "line") {
-      if (p.path !== n.path || p.points.length !== n.points.length) return true;
-      for (let j = 0; j < p.points.length; j++) {
-        if (p.points[j].x !== n.points[j].x || p.points[j].y !== n.points[j].y) return true;
+// src/transition/labels.ts
+function buildLabelMotion(svg, previous, next, snapshot) {
+  const attributes = [];
+  const add = (element, name, delta, key) => {
+    const raw = element.getAttribute(name);
+    if (raw === null) return;
+    const to = Number(raw);
+    if (!Number.isFinite(to)) return;
+    const captured = snapshot?.get(key);
+    attributes.push({
+      element,
+      name,
+      from: captured?.type === "attribute" ? captured.value : to + delta,
+      to,
+      key
+    });
+  };
+  for (const group of svg.querySelectorAll("[data-endpoint-key]")) {
+    const key = group.getAttribute("data-endpoint-key");
+    const leading = group.getAttribute("data-endpoint-side") === "leading";
+    const before = (leading ? previous.endpointLabels?.leading : previous.endpointLabels?.entries)?.find((entry) => entry.seriesKey === key);
+    const after = (leading ? next.endpointLabels?.leading : next.endpointLabels?.entries)?.find(
+      (entry) => entry.seriesKey === key
+    );
+    if (!before || !after) continue;
+    const beforeBounds = leading ? previous.endpointLabels?.leadingBounds : previous.endpointLabels?.bounds;
+    const afterBounds = leading ? next.endpointLabels?.leadingBounds : next.endpointLabels?.bounds;
+    const dx = (beforeBounds?.x ?? 0) - (afterBounds?.x ?? 0);
+    const dy = before.labelY - after.labelY;
+    Array.from(group.querySelectorAll("text, tspan, line, circle")).forEach((element, index) => {
+      const marker = element.classList.contains("oc-endpoint-marker");
+      const leader = element.classList.contains("oc-endpoint-leader");
+      const prefix = `endpoint:${key}:${leading}:${index}`;
+      for (const name of ["x", "x1", "x2", "cx"]) {
+        const offset = marker ? (before.marker?.x ?? 0) - (after.marker?.x ?? 0) : leader && name === "x2" ? previous.area.x + (leading ? 0 : previous.area.width) - next.area.x - (leading ? 0 : next.area.width) : dx;
+        add(element, name, offset, `${prefix}:${name}`);
       }
-    } else if (p.type === "area" && n.type === "area") {
-      if (p.path !== n.path) return true;
-    } else if (p.type === "arc" && n.type === "arc") {
-      if (p.startAngle !== n.startAngle || p.endAngle !== n.endAngle || p.innerRadius !== n.innerRadius || p.outerRadius !== n.outerRadius || p.center.x !== n.center.x || p.center.y !== n.center.y) {
-        return true;
+      for (const name of ["y", "y1", "y2", "cy"]) {
+        const offset = marker || leader && name === "y2" ? before.dataY - after.dataY : dy;
+        add(element, name, offset, `${prefix}:${name}`);
       }
-    } 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;
+  const beforeMarks = new Map(
+    previous.marks.filter((mark) => mark.key).map((mark) => [mark.key, mark])
+  );
+  const afterMarks = new Map(next.marks.filter((mark) => mark.key).map((mark) => [mark.key, mark]));
+  for (const label of svg.querySelectorAll("[data-label-key]")) {
+    const key = label.getAttribute("data-label-key");
+    const before = beforeMarks.get(key);
+    const after = afterMarks.get(key);
+    if (!before || !after || !("label" in before) || !("label" in after) || !before.label || !after.label)
+      continue;
+    const dx = before.type === "arc" && after.type === "arc" ? before.center.x - after.center.x : 0;
+    const dy = before.type === "arc" && after.type === "arc" ? before.center.y - after.center.y : 0;
+    add(label, "x", before.label.x - after.label.x - dx, `label:${key}:x`);
+    add(label, "y", before.label.y - after.label.y - dy, `label:${key}:y`);
+  }
+  let progress = 0;
+  return {
+    apply(value) {
+      progress = value;
+      for (const item of attributes)
+        item.element.setAttribute(item.name, String(item.from + (item.to - item.from) * value));
+    },
+    snapshot(target) {
+      for (const item of attributes)
+        target.set(item.key, {
+          type: "attribute",
+          value: item.from + (item.to - item.from) * progress
+        });
+    }
+  };
 }
 
 // src/transition/driver.ts
-import { isGradientDef } from "@opendata-ai/openchart-core";
+import { isGradientDef, sampleMotion as sampleMotion3 } from "@opendata-ai/openchart-core";
 import { buildAreaPath as buildAreaPath2, buildLinePath as buildLinePath2, EXIT_DEFAULTS } from "@opendata-ai/openchart-engine";
 
 // src/transition/apply.ts
+import { sampleMotion as sampleMotion2 } from "@opendata-ai/openchart-core";
 import { buildArcPath } from "@opendata-ai/openchart-engine";
 
 // src/transition/canvas-tweens.ts
+import { sampleMotion } from "@opendata-ai/openchart-core";
 import { serializeKeyValue as serializeKeyValue2 } from "@opendata-ai/openchart-engine";
 
 // src/transition/chrome-tweens.ts
@@ -1183,7 +1270,7 @@ function buildCanvasPointsTween(prevLayout, nextLayout, layer, tweens, fromSnaps
 }
 function applyCanvasPointsState(tw, elapsed, update, exit, enterDelay, enterDuration) {
   const soa = tw.layer.state.marks;
-  const easedUpdate = cubicOut(Math.min(elapsed / update.duration, 1));
+  const easedUpdate = sampleMotion(update, elapsed).position;
   for (let s = 0; s < tw.soaIndex.length; s++) {
     const i = tw.soaIndex[s];
     soa.x[i] = tw.fromCx[s] + (tw.toCx[s] - tw.fromCx[s]) * easedUpdate;
@@ -1199,7 +1286,7 @@ function applyCanvasPointsState(tw, elapsed, update, exit, enterDelay, enterDura
     }
   }
   if (tw.exitState) {
-    const easedExit = cubicOut(Math.min(elapsed / exit.duration, 1));
+    const easedExit = sampleMotion(exit, elapsed).position;
     tw.exitState.alpha = 1 - easedExit;
     tw.layer.state.exiting = tw.exitState;
   }
@@ -1266,7 +1353,7 @@ function buildCanvasGridlinesTween(prevLayout, nextLayout, layer, tweens) {
 }
 function applyCanvasGridlinesState(tw, elapsed, update, enterDelay, enterDuration) {
   const live = tw.layer.state.gridlines;
-  const easedUpdate = cubicOut(Math.min(elapsed / update.duration, 1));
+  const easedUpdate = sampleMotion(update, elapsed).position;
   const tEnter = elapsed < enterDelay ? 0 : Math.min((elapsed - enterDelay) / enterDuration, 1);
   const easedEnter = cubicOut(tEnter);
   for (let i = 0; i < tw.index.length; i++) {
@@ -1614,19 +1701,9 @@ function applyTweenState(tw, elapsed, update, exit, enterDelay, enterDuration) {
     applyCanvasGridlinesState(tw, elapsed, update, enterDelay, enterDuration);
     return;
   }
-  let tLocal;
-  if (tw.kind === "exit") {
-    tLocal = Math.min(elapsed / exit.duration, 1);
-  } else if (tw.kind === "enter") {
-    if (elapsed < enterDelay) {
-      tLocal = 0;
-    } else {
-      tLocal = Math.min((elapsed - enterDelay) / enterDuration, 1);
-    }
-  } else {
-    tLocal = Math.min(elapsed / update.duration, 1);
-  }
-  const eased = cubicOut(tLocal);
+  const phase = tw.kind === "exit" ? exit : tw.kind === "enter" ? { duration: enterDuration } : update;
+  const elapsedMs = tw.kind === "enter" ? Math.max(0, elapsed - enterDelay) : elapsed;
+  const eased = sampleMotion2(phase, elapsedMs).position;
   switch (tw.tweenType) {
     case "rect": {
       const geom = lerpGeom(tw.from, tw.to, eased);
@@ -1640,11 +1717,13 @@ function applyTweenState(tw, elapsed, update, exit, enterDelay, enterDuration) {
       break;
     }
     case "line": {
+      if (tw.kind !== "update") break;
       tw.ptsBuffer = interpolatePoints(tw.fromPts, tw.toPts, eased, tw.ptsBuffer);
       applyLinePath(tw.el, tw.ptsBuffer, tw.interpolate, tw.pathEl);
       break;
     }
     case "area": {
+      if (tw.kind !== "update") break;
       tw.topBuffer = interpolatePoints(tw.fromTop, tw.toTop, eased, tw.topBuffer);
       tw.bottomBuffer = interpolatePoints(tw.fromBottom, tw.toBottom, eased, tw.bottomBuffer);
       applyAreaPaths(
@@ -1750,9 +1829,11 @@ function snapTweenToFinal(tw) {
       }
       break;
     case "line":
+      if (tw.kind !== "update") break;
       applyLinePath(tw.el, tw.toPts, tw.interpolate, tw.pathEl);
       break;
     case "area":
+      if (tw.kind !== "update") break;
       applyAreaPaths(
         tw.el,
         tw.toTop,
@@ -1976,7 +2057,7 @@ function buildLineTweens(prevLayout, nextLayout, marksContainer, dom, tweens, gh
     const el = dom.any(key);
     if (!el) continue;
     const snap = fromSnapshot?.get(key);
-    if (snap && snap.type === "line") {
+    if (snap && snap.type === "line" && !snap.points) {
       const ghost = el.cloneNode(true);
       ghost.classList.add("oc-ghost");
       ghost.setAttribute("aria-hidden", "true");
@@ -2014,11 +2095,12 @@ function buildLineTweens(prevLayout, nextLayout, marksContainer, dom, tweens, gh
       });
       continue;
     }
-    const prevPKs = prev.pointKeys ?? prev.points.map((_, i) => `${i}`);
+    const prevPKs = snap?.type === "line" && snap.pointKeys ? snap.pointKeys : 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 hasGaps = (prev.path?.match(/M/g)?.length ?? 0) > 1 || (next.path?.match(/M/g)?.length ?? 0) > 1;
+    if (!hasSurvivors || hasGaps) {
       const ghost = renderSingleMark(prev, 0);
       if (ghost) {
         ghost.classList.add("oc-ghost");
@@ -2054,13 +2136,19 @@ function buildLineTweens(prevLayout, nextLayout, marksContainer, dom, tweens, gh
         pathEl: resolveLinePathEl(el)
       });
     } else {
-      const [fromPts, toPts] = normalizePointArrays(prev.points, next.points, prevPKs, nextPKs);
+      const [fromPts, toPts] = normalizePointArrays(
+        snap?.type === "line" && snap.points ? snap.points : prev.points,
+        next.points,
+        prevPKs,
+        nextPKs
+      );
       tweens.push({
         tweenType: "line",
         kind: "update",
         el,
         fromPts,
         toPts,
+        pointKeys: mergeKeyOrder(prevPKs, nextPKs),
         finalPoints: next.points,
         interpolate: next.interpolate,
         pathEl: resolveLinePathEl(el)
@@ -2179,7 +2267,8 @@ function buildAreaTweens(prevLayout, nextLayout, marksContainer, dom, tweens, gh
     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 hasGaps = (prev.path?.match(/M/g)?.length ?? 0) > 1 || (next.path?.match(/M/g)?.length ?? 0) > 1;
+    if (!hasSurvivors || hasGaps) {
       const ghost = renderSingleMark(prev, 0);
       if (ghost) {
         ghost.classList.add("oc-ghost");
@@ -2237,6 +2326,7 @@ function buildAreaTweens(prevLayout, nextLayout, marksContainer, dom, tweens, gh
       );
       tweens.push({
         tweenType: "area",
+        pointKeys: mergeKeyOrder(prevPKs, nextPKs),
         kind: "update",
         el,
         fromTop,
@@ -2865,16 +2955,13 @@ function runTransition(args) {
   }
   buildColorTweens(prevLayout, nextLayout, dom, tweens);
   buildAnnotationTweens(svg, prevLayout, nextLayout, tweens);
-  const secondaryEls = collectSecondaryElements(svg);
-  const secondaryOriginalOpacity = secondaryEls.map((el) => el.style.opacity ?? "");
+  const labelMotion = buildLabelMotion(svg, prevLayout, nextLayout, fromSnapshot);
+  labelMotion.apply(0);
   for (const tw of tweens) {
     applyTweenState(tw, 0, update, exit, enterDelay, enterDuration);
   }
   canvas?.repaint();
   canvas?.setInteractionSuspended(true);
-  for (const el of secondaryEls) {
-    el.style.opacity = "0";
-  }
   let rafId = null;
   let running = true;
   let pulsedDot = null;
@@ -2891,7 +2978,7 @@ function runTransition(args) {
     for (const tw of tweens) {
       applyTweenState(tw, elapsed, update, exit, enterDelay, enterDuration);
     }
-    applySecondaryOpacity(secondaryEls, elapsed, enterDelay, enterDuration);
+    labelMotion.apply(sampleMotion3(update, elapsed).position);
     canvas?.repaint();
     if (tGlobal >= 1) {
       finish();
@@ -2914,9 +3001,6 @@ function runTransition(args) {
     removeGhosts();
     settleCanvas();
     pulsedDot = pulseSparklineTerminator(svg, marksContainer);
-    for (let i = 0; i < secondaryEls.length; i++) {
-      secondaryEls[i].style.opacity = secondaryOriginalOpacity[i];
-    }
     onComplete();
   }
   function snapToFinal() {
@@ -2935,16 +3019,16 @@ function runTransition(args) {
     }
   }
   function removeGhosts() {
+    labelMotion.apply(1);
     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 easedUpdate = tw.kind === "enter" ? sampleMotion3({ duration: enterDuration }, Math.max(0, lastElapsed - enterDelay)).position : sampleMotion3(update, lastElapsed).position;
+      if (tw.kind === "exit") continue;
       if (tw.tweenType === "canvasPoints") {
         for (let s = 0; s < tw.soaIndex.length; s++) {
           snap.set(tw.soaKeys[s], {
@@ -2995,19 +3079,26 @@ function runTransition(args) {
         }
         case "line": {
           const pts = interpolatePoints(tw.fromPts, tw.toPts, easedUpdate);
-          const d = buildLinePath2(pts, tw.interpolate);
-          snap.set(key, { type: "line", d });
+          const d = tw.kind === "update" ? buildLinePath2(pts, tw.interpolate) : tw.pathEl?.getAttribute("d") ?? "";
+          snap.set(key, { type: "line", d, points: pts, pointKeys: tw.pointKeys });
           break;
         }
         case "area": {
           const top = interpolatePoints(tw.fromTop, tw.toTop, easedUpdate);
           const bottom = interpolatePoints(tw.fromBottom, tw.toBottom, easedUpdate);
-          const d = buildAreaPath2(top, bottom, tw.interpolate);
+          const d = tw.kind === "update" ? buildAreaPath2(top, bottom, tw.interpolate) : tw.fillPathEl?.getAttribute("d") ?? "";
           let topD;
           if (tw.hasStroke) {
-            topD = buildLinePath2(top, tw.interpolate);
+            topD = tw.kind === "update" ? buildLinePath2(top, tw.interpolate) : tw.topPathEl?.getAttribute("d") ?? "";
           }
-          snap.set(key, { type: "area", d, topD });
+          snap.set(key, {
+            type: "area",
+            d,
+            topD,
+            points: top,
+            bottomPoints: bottom,
+            pointKeys: tw.pointKeys
+          });
           break;
         }
         case "arc": {
@@ -3021,6 +3112,7 @@ function runTransition(args) {
         }
       }
     }
+    labelMotion.snapshot(snap);
     return snap;
   }
   if (!manual) {
@@ -3041,9 +3133,6 @@ function runTransition(args) {
       snapToFinal();
       removeGhosts();
       settleCanvas();
-      for (let i = 0; i < secondaryEls.length; i++) {
-        secondaryEls[i].style.opacity = secondaryOriginalOpacity[i];
-      }
     },
     get running() {
       return running;
@@ -3056,7 +3145,7 @@ function runTransition(args) {
       for (const tw of tweens) {
         applyTweenState(tw, elapsedMs, update, exit, enterDelay, enterDuration);
       }
-      applySecondaryOpacity(secondaryEls, elapsedMs, enterDelay, enterDuration);
+      labelMotion.apply(sampleMotion3(update, elapsedMs).position);
       if (elapsedMs >= totalMs) {
         snapToFinal();
         removeGhosts();
@@ -3100,27 +3189,6 @@ function pulseSparklineTerminator(svg, marksContainer) {
   );
   return dot;
 }
-function collectSecondaryElements(svg) {
-  const els = [];
-  const epLabels = svg.querySelector(".oc-endpoint-labels");
-  if (epLabels) els.push(epLabels);
-  const markLabels = svg.querySelector(".oc-mark-labels");
-  if (markLabels) els.push(markLabels);
-  return els;
-}
-function applySecondaryOpacity(els, elapsed, enterDelay, enterDuration) {
-  if (els.length === 0) return;
-  let t;
-  if (elapsed < enterDelay) {
-    t = 0;
-  } else {
-    t = Math.min((elapsed - enterDelay) / enterDuration, 1);
-  }
-  const opacity = String(cubicOut(t));
-  for (const el of els) {
-    el.style.opacity = opacity;
-  }
-}
 
 // src/dom-helpers.ts
 function applySrOnlyStyles(el) {
@@ -3170,10 +3238,12 @@ function createYouDrawIt(options) {
     return pattern;
   }
   function findTargetLinePath(svg, seriesKey) {
-    if (seriesKey) {
-      const escaped = typeof CSS !== "undefined" && typeof CSS.escape === "function" ? CSS.escape(seriesKey) : seriesKey.replace(/"/g, '\\"');
-      const byKey = svg.querySelector(`[data-mark-id="line-${escaped}"] path`);
-      if (byKey) return byKey;
+    if (seriesKey !== void 0) {
+      const group = [...svg.querySelectorAll(".oc-mark-line")].find(
+        (element) => element.getAttribute("data-series") === seriesKey
+      );
+      const path = group?.querySelector("path");
+      if (path) return path;
     }
     return svg.querySelector(".oc-mark-line path");
   }
@@ -3584,6 +3654,78 @@ function createYouDrawIt(options) {
   };
 }
 
+// src/transition/reconcile.ts
+function identity(element, index) {
+  for (const attr of ["data-key", "data-label-key", "data-endpoint-key", "data-tick-value"]) {
+    const value = element.getAttribute(attr);
+    if (value !== null)
+      return `${element.tagName}:${attr}:${value}:${element.getAttribute("data-endpoint-side") ?? ""}`;
+  }
+  return `${element.tagName}:${element.getAttribute("class") ?? ""}:${index}`;
+}
+function reconcileSVG(current, next) {
+  for (const attribute of Array.from(current.attributes)) {
+    if (!next.hasAttribute(attribute.name)) current.removeAttribute(attribute.name);
+  }
+  for (const attribute of Array.from(next.attributes)) {
+    if (current.getAttribute(attribute.name) !== attribute.value) {
+      current.setAttribute(attribute.name, attribute.value);
+    }
+  }
+  const candidates = new Map(
+    Array.from(current.children, (child, index) => [identity(child, index), child])
+  );
+  const survivors = /* @__PURE__ */ new Set();
+  let elementIndex = 0;
+  Array.from(next.childNodes).forEach((child, index) => {
+    const match = child.nodeType === 1 ? candidates.get(identity(child, elementIndex++)) : void 0;
+    const node = match ?? child;
+    if (match) reconcileSVG(match, child);
+    survivors.add(node);
+    const at = current.childNodes[index];
+    if (at !== node) current.insertBefore(node, at ?? null);
+  });
+  for (const child of Array.from(current.childNodes)) {
+    if (!survivors.has(child)) current.removeChild(child);
+  }
+}
+
+// src/transition/scene.ts
+function sampleLayout(layout, snapshot) {
+  if (!snapshot?.size) return layout;
+  const marks = layout.marks.map((mark) => {
+    const geometry = mark.key ? snapshot.get(mark.key) : void 0;
+    if (!geometry) return mark;
+    if ((mark.type === "line" && geometry.type === "line" || mark.type === "area" && geometry.type === "area") && geometry.points) {
+      const positions = new Map(
+        (geometry.pointKeys ?? mark.pointKeys ?? []).map((key, index) => [
+          key,
+          geometry.points[index]
+        ])
+      );
+      return {
+        ...mark,
+        ...mark.type === "line" ? { points: geometry.points } : {
+          topPoints: geometry.points,
+          bottomPoints: geometry.type === "area" ? geometry.bottomPoints ?? mark.bottomPoints : mark.bottomPoints
+        },
+        path: geometry.d,
+        dataPoints: mark.dataPoints?.map((point, index) => ({
+          ...point,
+          ...positions.get(mark.pointKeys?.[index] ?? "") ?? point
+        }))
+      };
+    }
+    if (mark.type === "arc" && geometry.type === "arc")
+      return { ...mark, ...geometry, center: { x: geometry.cx, y: geometry.cy } };
+    if (mark.type === "rect" && geometry.type === "rect") return { ...mark, ...geometry };
+    if (mark.type === "point" && geometry.type === "point")
+      return { ...mark, ...geometry, r: geometry.r ?? mark.r };
+    return mark;
+  });
+  return { ...layout, marks };
+}
+
 // src/mount.ts
 import { cssTokenDefault, isGraphSpec, isLayerSpec } from "@opendata-ai/openchart-core";
 import {
@@ -3619,7 +3761,7 @@ function setupAnimationCleanup(svg, onComplete, totalMs) {
     cancelAnimations(svg);
   };
 }
-function setupTableAnimationCleanup(wrapper) {
+function setupTableAnimationCleanup(wrapper, onComplete) {
   const style = wrapper.style;
   const duration = parseFloat(style.getPropertyValue("--oc-animation-duration")) || 500;
   const stagger = parseFloat(style.getPropertyValue("--oc-animation-stagger")) || 0;
@@ -3628,6 +3770,7 @@ function setupTableAnimationCleanup(wrapper) {
   const totalTime = totalStagger + duration + 300;
   const timer = setTimeout(() => {
     wrapper.classList.remove("oc-animate");
+    onComplete?.();
   }, totalTime);
   return () => {
     clearTimeout(timer);
@@ -3642,13 +3785,13 @@ function buildMarkDataMap(layout) {
     const mark = layout.marks[i];
     switch (mark.type) {
       case "line":
-        map.set(`line-${mark.seriesKey ?? i}`, {
+        map.set(`line-${i}`, {
           datum: mark.data[0] ?? {},
           series: mark.seriesKey
         });
         break;
       case "area":
-        map.set(`area-${mark.seriesKey ?? i}`, {
+        map.set(`area-${i}`, {
           datum: mark.data[0] ?? {},
           series: mark.seriesKey
         });
@@ -3754,7 +3897,9 @@ function collectSeriesGroups(layout) {
   for (let i = 0; i < layout.marks.length; i++) {
     const mark = layout.marks[i];
     if ((mark.type === "line" || mark.type === "area") && mark.dataPoints?.length) {
-      const key = mark.seriesKey ?? "__default__";
+      const scope = mark.key?.match(/^layer:\d+:/)?.[0] ?? "";
+      const seriesKey = mark.seriesKey ?? "__default__";
+      const key = `${scope}${seriesKey}`;
       const existingType = markTypeByKey.get(key);
       if (existingType === "line" && mark.type === "area") continue;
       const color = mark.type === "line" ? mark.stroke : getRepresentativeColor(mark.fill);
@@ -3762,7 +3907,7 @@ function collectSeriesGroups(layout) {
       for (const dp of mark.dataPoints) {
         pointsByX.set(snapKey(dp.x), { ...dp });
       }
-      byKey.set(key, { seriesKey: key, color, pointsByX });
+      byKey.set(key, { key, seriesKey, markId: `${mark.type}-${i}`, color, pointsByX });
       markTypeByKey.set(key, mark.type);
     }
   }
@@ -3796,6 +3941,9 @@ function buildSliceTooltip(hits, emphasisKey) {
   const title = hits[0].point.tooltip?.title;
   const fields = [];
   const isMulti = hits.length > 1;
+  const seriesCounts = /* @__PURE__ */ new Map();
+  for (const { group } of hits)
+    seriesCounts.set(group.seriesKey, (seriesCounts.get(group.seriesKey) ?? 0) + 1);
   let total;
   for (const { group, point } of hits) {
     const tip = point.tooltip;
@@ -3808,10 +3956,10 @@ function buildSliceTooltip(hits, emphasisKey) {
       ) ?? candidates[candidates.length - 1] ?? null;
       if (!yField) continue;
       fields.push({
-        label: group.seriesKey,
+        label: group.seriesKey === "__default__" ? yField.label : (seriesCounts.get(group.seriesKey) ?? 0) > 1 ? `${group.seriesKey} \xB7 ${yField.label}` : group.seriesKey,
         value: yField.value,
         color: group.color,
-        ...emphasisKey === group.seriesKey ? { emphasis: true } : {}
+        ...emphasisKey === group.key ? { emphasis: true } : {}
       });
     } else {
       for (const f of tip.fields) {
@@ -3884,8 +4032,10 @@ function wireVoronoiTooltipEvents(svg, layout, tooltipManager, emphasis) {
       crosshair.style.display = "";
     }
     currentEmphasis = emphasisKey;
-    if (emphasisKey) emphasis?.setSeries(emphasisKey);
-    else emphasis?.clear();
+    const emphasizedGroup = groups.find((group) => group.key === emphasisKey);
+    if (emphasizedGroup) {
+      emphasis?.setMark(svg.querySelector(`[data-mark-id="${emphasizedGroup.markId}"]`));
+    } else emphasis?.clear();
     const tooltip = buildSliceTooltip(hits, emphasisKey);
     if (!tooltip) return false;
     const containerAnchorX = snappedX * viewBoxToContainer;
@@ -3898,7 +4048,7 @@ function wireVoronoiTooltipEvents(svg, layout, tooltipManager, emphasis) {
   function keysAt(snappedX) {
     const keys = [];
     for (const group of groups) {
-      if (group.pointsByX.has(snappedX)) keys.push(group.seriesKey);
+      if (group.pointsByX.has(snappedX)) keys.push(group.key);
     }
     return keys;
   }
@@ -3914,7 +4064,7 @@ function wireVoronoiTooltipEvents(svg, layout, tooltipManager, emphasis) {
       const dy = Math.abs(point.y - svgY);
       if (dy < nearestDy) {
         nearestDy = dy;
-        nearestKey = group.seriesKey;
+        nearestKey = group.key;
       }
     }
     const emphasisKey = nearestDy <= EMPHASIS_PROXIMITY_PX ? nearestKey : null;
@@ -3959,13 +4109,12 @@ function wireVoronoiTooltipEvents(svg, layout, tooltipManager, emphasis) {
     if (te.touches.length === 0) return;
     const t = te.touches[0];
     const { svgX, svgY, viewBoxToContainer } = toSvgCoords(t.clientX, t.clientY);
-    if (te.cancelable) te.preventDefault();
     positionAt(svgX, svgY, viewBoxToContainer);
   };
   overlay.addEventListener("mousemove", handleMouseMove);
   overlay.addEventListener("mouseleave", hideOnPointerOut);
-  overlay.addEventListener("touchstart", handleTouch, { passive: false });
-  overlay.addEventListener("touchmove", handleTouch, { passive: false });
+  overlay.addEventListener("touchstart", handleTouch, { passive: true });
+  overlay.addEventListener("touchmove", handleTouch, { passive: true });
   overlay.addEventListener("touchend", hideOnPointerOut);
   return {
     cleanup() {
@@ -5412,6 +5561,7 @@ function wireCanvasInteractions({
 }
 
 // src/scatter-canvas/entrance.ts
+import { sampleMotion as sampleMotion4 } from "@opendata-ai/openchart-core";
 var MAX_TOTAL_STAGGER_MS = 300;
 var POINT_DURATION_FRACTION = 0.4;
 function clampStagger(delay, elementCount) {
@@ -5430,7 +5580,7 @@ function entranceAlphaAt(t, markIndex, enter, markCount, ease) {
   const local = (t - stagger * markIndex) / pointDuration;
   if (local <= 0) return 0;
   if (local >= 1) return 1;
-  return ease(local);
+  return enter.spring ? sampleMotion4(enter, local * enter.duration).position : ease(local);
 }
 function applyEntranceAt(state, t, enter, ease) {
   const alpha = state.enterAlpha;
@@ -5914,8 +6064,8 @@ function createChart(container, spec, options) {
   let isAutoHeight = null;
   let lastRenderedWidth = null;
   let lastRenderedSvgHeight = null;
+  let lastHostHeight = FALLBACK_HEIGHT;
   let transitionHandle = null;
-  let transitionSnapshot = null;
   let fontsReloadPending = false;
   let selectedElement = options?.selectedElement ?? null;
   let overlayElement = null;
@@ -5929,13 +6079,13 @@ function createChart(container, spec, options) {
   let youDrawIt = null;
   let ydiEditSuppressWarned = false;
   container.classList.add("oc-root");
-  function resolveEffectiveFont() {
-    return options?.theme?.fonts?.family ?? currentSpec.theme?.fonts?.family ?? resolveFontFamily(container);
+  function resolveEffectiveFont(candidate = currentSpec) {
+    return options?.theme?.fonts?.family ?? candidate.theme?.fonts?.family ?? resolveFontFamily(container);
   }
   let fontFamily = resolveEffectiveFont();
   let measureText = createMeasureText(fontFamily);
   let renderGen = 0;
-  function compileAt(width, height) {
+  function compileAt(width, height, candidate, measure, runtime) {
     const darkMode = resolveDarkMode(options?.darkMode);
     const compileOpts = {
       width,
@@ -5944,12 +6094,11 @@ function createChart(container, spec, options) {
       darkMode,
       renderer: options?.renderer,
       watermark: options?.watermark,
-      measureText
+      measureText: measure
     };
-    if (isLayerSpec(currentSpec)) {
-      return compileLayer(withRuntimeHidden(currentSpec), compileOpts);
-    }
-    return compileChart(withRuntimeHidden(currentSpec), compileOpts);
+    const effective = runtime ? withRuntimeHidden(candidate) : candidate;
+    if (isLayerSpec(effective)) return compileLayer(effective, compileOpts);
+    return compileChart(effective, compileOpts);
   }
   function verticalOverheads(layout, width) {
     let topLegendBlock = 0;
@@ -5968,19 +6117,19 @@ function createChart(container, spec, options) {
     }
     return layout.chrome.topHeight + layout.chrome.bottomHeight + topLegendBlock + (layout.metrics?.height ?? 0) + facetGrowth;
   }
-  function compile() {
-    const { width, height } = getContainerDimensions();
-    const growsWithChrome = isAutoHeight === true && !isLayerSpec(currentSpec) && !isGraphSpec(currentSpec) && currentSpec.display !== "sparkline";
+  function compile(candidate = currentSpec, measure = measureText, runtime = true) {
+    const { width, height } = getContainerDimensions(candidate);
+    const growsWithChrome = isAutoHeight === true && !isLayerSpec(candidate) && !isGraphSpec(candidate) && candidate.display !== "sparkline";
     if (!growsWithChrome) {
-      return compileAt(width, height);
+      return compileAt(width, height, candidate, measure, runtime);
     }
-    let layout = compileAt(width, height);
+    let layout = compileAt(width, height, candidate, measure, runtime);
     const overheads = verticalOverheads(layout, width);
     if (overheads > 0) {
-      layout = compileAt(width, height + overheads);
+      layout = compileAt(width, height + overheads, candidate, measure, runtime);
       const overheads2 = verticalOverheads(layout, width);
       if (overheads2 !== overheads) {
-        layout = compileAt(width, height + overheads2);
+        layout = compileAt(width, height + overheads2, candidate, measure, runtime);
       }
     }
     return layout;
@@ -6062,9 +6211,9 @@ function createChart(container, spec, options) {
     if (!("field" in colorEnc) || !colorEnc.field) return void 0;
     return colorEnc.field;
   }
-  function getContainerDimensions() {
+  function getContainerDimensions(candidate = currentSpec) {
     const rect = container.getBoundingClientRect();
-    const isSparkline = "display" in currentSpec && currentSpec.display === "sparkline";
+    const isSparkline = "display" in candidate && candidate.display === "sparkline";
     if (isSparkline) {
       let width = rect.width;
       let height = rect.height;
@@ -6081,12 +6230,14 @@ function createChart(container, spec, options) {
     if (isAutoHeight === null && (rect.width > 0 || rect.height > 0)) {
       isAutoHeight = rect.height === 0 && rect.width > 0;
     }
+    const ownHeight = lastRenderedSvgHeight !== null && Math.abs(rect.height - lastRenderedSvgHeight) < 0.5;
+    if (!ownHeight && rect.height > 0) lastHostHeight = rect.height;
     return {
       width: Math.max(rect.width || 600, 100),
       // Latched-auto mounts always compile against the fixed budget: after
       // the first render the container's measured height is just our own
       // SVG, so reading it back would re-pin whatever we rendered last.
-      height: isAutoHeight === true ? FALLBACK_HEIGHT : Math.max(rect.height || FALLBACK_HEIGHT, 100)
+      height: isAutoHeight === true ? FALLBACK_HEIGHT : Math.max(ownHeight ? lastHostHeight : rect.height || FALLBACK_HEIGHT, 100)
     };
   }
   function getSpecAnnotations() {
@@ -6314,11 +6465,13 @@ function createChart(container, spec, options) {
       svg.removeEventListener("keydown", handleKeyDown);
     };
   }
-  function render() {
+  function render(retainScene = false, prepared) {
+    const retainedSVG = retainScene ? svgElement : null;
     if (isDragging) {
       pendingRender = true;
       return;
     }
+    const nextLayout = prepared ?? compile();
     if (transitionHandle) {
       transitionHandle.cancel();
       transitionHandle = null;
@@ -6363,7 +6516,7 @@ function createChart(container, spec, options) {
       isTextEditingActive = false;
     }
     overlayElement = null;
-    if (svgElement?.parentNode) {
+    if (!retainedSVG && svgElement?.parentNode) {
       svgElement.parentNode.removeChild(svgElement);
     }
     if (tooltipManager) {
@@ -6373,7 +6526,7 @@ function createChart(container, spec, options) {
       srTableWrapper.parentNode.removeChild(srTableWrapper);
       srTableWrapper = null;
     }
-    currentLayout = compile();
+    currentLayout = nextLayout;
     lastRenderedWidth = currentLayout.dimensions.width;
     lastRenderedSvgHeight = currentLayout.dimensions.height;
     const shouldAnimate = isFirstRender && !!currentLayout.animation?.enter;
@@ -6381,6 +6534,7 @@ function createChart(container, spec, options) {
     const canvasMode = currentLayout.markRenderMode === "canvas";
     if (canvasMode) {
       canvasLayer = createScatterCanvasLayer(container, currentLayout);
+      if (retainedSVG) container.insertBefore(canvasLayer.canvas, retainedSVG);
       canvasLayer.repaint();
       if (!warnedCanvasEditMode && (options?.editable || hasEditingCallbacks(options) || options?.onAnnotationEdit)) {
         warnedCanvasEditMode = true;
@@ -6389,11 +6543,16 @@ function createChart(container, spec, options) {
         );
       }
     }
-    svgElement = renderChartSVG(currentLayout, container, {
+    const sceneHost = retainedSVG ? document.createElement("div") : container;
+    svgElement = renderChartSVG(currentLayout, sceneHost, {
       animate: shouldAnimate,
       crosshair,
       canvasMarks: canvasMode
     });
+    if (retainedSVG && svgElement) {
+      reconcileSVG(retainedSVG, svgElement);
+      svgElement = retainedSVG;
+    }
     tooltipManager = createTooltipManager(container);
     if (canvasMode && canvasLayer) {
       cleanupCanvasEvents = wireCanvasInteractions({
@@ -6589,30 +6748,32 @@ function createChart(container, spec, options) {
   function beginManualUpdate(newSpec) {
     return doUpdate(newSpec, void 0, true);
   }
-  function doUpdate(newSpec, updateOpts, manual) {
+  function doUpdate(newSpec, updateOpts, manual, layoutOnly = false) {
     if (destroyed) return null;
     const prevSpec = currentSpec;
     const prevLayout = currentLayout;
     const entranceWasRunning = cleanupAnimations != null;
-    if (transitionHandle?.running) {
-      transitionSnapshot = transitionHandle.snapshot();
-    }
+    const nextFont = resolveEffectiveFont(newSpec);
+    const nextMeasure = nextFont === fontFamily ? measureText : createMeasureText(nextFont);
+    const nextLayout = compile(newSpec, nextMeasure, layoutOnly);
+    const snapshot = transitionHandle?.running ? transitionHandle.snapshot() : void 0;
     currentSpec = newSpec;
-    const nextFont = resolveEffectiveFont();
-    if (nextFont !== fontFamily) {
-      fontFamily = nextFont;
-      measureText = createMeasureText(fontFamily);
-    }
-    runtimeHiddenSeries.clear();
-    runtimeShownSeries.clear();
-    searchBaseline = authoredHighlight(newSpec);
-    seriesSearch?.setSelected([]);
+    fontFamily = nextFont;
+    measureText = nextMeasure;
+    if (!layoutOnly) {
+      runtimeHiddenSeries.clear();
+      runtimeShownSeries.clear();
+    }
+    if (!layoutOnly) {
+      searchBaseline = authoredHighlight(newSpec);
+      seriesSearch?.setSelected([]);
+    }
     ydiEditSuppressWarned = false;
     editSuppressWarned = false;
     if (updateOpts && "selectedElement" in updateOpts) {
       selectedElement = updateOpts.selectedElement ?? null;
     }
-    render();
+    render(canTransitionSpecShape(prevSpec, newSpec), nextLayout);
     if (svgElement && canTransition({
       prevLayout,
       nextLayout: currentLayout,
@@ -6621,14 +6782,12 @@ function createChart(container, spec, options) {
       isFirstRender: false,
       entranceInFlight: entranceWasRunning
     })) {
-      const snapshot = transitionSnapshot;
-      transitionSnapshot = null;
       const handle = runTransition({
         svg: svgElement,
         prevLayout,
         nextLayout: currentLayout,
         animation: currentLayout.animation,
-        fromSnapshot: snapshot ?? void 0,
+        fromSnapshot: snapshot,
         manual,
         // render() above already rebuilt the layer for the NEXT layout, so this
         // is the destination-mode layer the tween writes into.
@@ -6637,10 +6796,9 @@ function createChart(container, spec, options) {
           transitionHandle = null;
         }
       });
-      if (!manual) transitionHandle = handle;
+      transitionHandle = handle;
       return handle;
     }
-    transitionSnapshot = null;
     return null;
   }
   function resize() {
@@ -6657,7 +6815,7 @@ function createChart(container, spec, options) {
       pendingResize = true;
       return;
     }
-    render();
+    doUpdate(currentSpec, void 0, false, true);
   }
   function handleSearchChange(selected) {
     const merged = [...searchBaseline];
@@ -6694,7 +6852,7 @@ function createChart(container, spec, options) {
     }
     const svg = canvasLayer && currentLayout.markRenderMode === "canvas" ? materializeCanvasModeSVG(currentLayout, {
       forceVector: format === "png" || format === "jpg" || format === "gif"
-    }) : svgElement;
+    }) : renderChartSVG(currentLayout, document.createElement("div"), { animate: false });
     const theme = "theme" in currentLayout ? currentLayout.theme : void 0;
     const withTheme = (o) => ({ theme, ...o ?? {} });
     switch (format) {
@@ -6728,7 +6886,6 @@ function createChart(container, spec, options) {
       transitionHandle.cancel();
       transitionHandle = null;
     }
-    transitionSnapshot = null;
     if (cleanupAnimations) {
       cleanupAnimations();
       cleanupAnimations = null;
@@ -6810,10 +6967,10 @@ function createChart(container, spec, options) {
   container.dataset.ocFontsState = pending ? "pending" : "ready";
   if (options?.responsive !== false) {
     disconnectResize = observeResize(container, (width, height) => {
+      const widthChanged = lastRenderedWidth === null || Math.abs(width - lastRenderedWidth) >= 0.5;
+      const selfInducedHeight = lastRenderedSvgHeight !== null && Math.abs(height - lastRenderedSvgHeight) < 0.5;
+      if (!widthChanged && selfInducedHeight) return;
       if (isAutoHeight === true) {
-        const widthChanged = width !== lastRenderedWidth;
-        const selfInducedHeight = height === lastRenderedSvgHeight;
-        if (!widthChanged && selfInducedHeight) return;
         if (!selfInducedHeight) {
           isAutoHeight = null;
         }
@@ -6827,6 +6984,10 @@ function createChart(container, spec, options) {
     update,
     beginManualUpdate,
     resize,
+    sampleLayout: () => sampleLayout(
+      currentLayout,
+      transitionHandle?.running ? transitionHandle.snapshot() : void 0
+    ),
     export: doExport,
     destroy,
     get layout() {
@@ -6976,6 +7137,84 @@ function scrubCamera(step, stepProgress, fitted, holdUntil, ease) {
 // src/map-mount.ts
 import { compileGeoMap } from "@opendata-ai/openchart-engine";
 
+// src/interactions/mark-navigation.ts
+function captureMarkFocus(svg) {
+  const active = document.activeElement;
+  if (!svg || !active || !svg.contains(active)) return null;
+  return active.getAttribute("data-navigation-key") ?? "";
+}
+function restoreMarkFocus(svg, key) {
+  if (key === null) return;
+  const matches = [...svg.querySelectorAll("[data-navigation-key]")].filter(
+    (element) => element.getAttribute("data-navigation-key") === key
+  );
+  const target = matches.length === 1 ? matches[0] : svg;
+  if (target === svg && !svg.hasAttribute("tabindex")) svg.setAttribute("tabindex", "-1");
+  target.focus({ preventScroll: true });
+}
+function wireMarkNavigation(svg, marks) {
+  const cleanups = [];
+  if (svg.getAttribute("role") === "img") svg.setAttribute("role", "group");
+  marks.forEach((mark, index) => {
+    const element = mark.element;
+    element.setAttribute("tabindex", index === 0 ? "0" : "-1");
+    element.setAttribute("data-navigation-key", mark.key);
+    const focus = () => {
+      for (const other of marks) other.element.setAttribute("tabindex", "-1");
+      element.setAttribute("tabindex", "0");
+      const bounds = element.getBoundingClientRect();
+      mark.enter(
+        new MouseEvent("focus", {
+          clientX: bounds.left + bounds.width / 2,
+          clientY: bounds.top + bounds.height / 2
+        })
+      );
+    };
+    const keydown = (event) => {
+      let next;
+      switch (event.key) {
+        case "ArrowRight":
+        case "ArrowDown":
+          next = Math.min(index + 1, marks.length - 1);
+          break;
+        case "ArrowLeft":
+        case "ArrowUp":
+          next = Math.max(index - 1, 0);
+          break;
+        case "Home":
+          next = 0;
+          break;
+        case "End":
+          next = marks.length - 1;
+          break;
+        case "Enter":
+        case " ":
+          mark.activate();
+          break;
+        case "Escape":
+          mark.leave();
+          break;
+        default:
+          return;
+      }
+      event.preventDefault();
+      event.stopPropagation();
+      if (next !== void 0) marks[next].element.focus({ preventScroll: true });
+    };
+    element.addEventListener("focus", focus);
+    element.addEventListener("blur", mark.leave);
+    element.addEventListener("keydown", keydown);
+    cleanups.push(() => {
+      element.removeEventListener("focus", focus);
+      element.removeEventListener("blur", mark.leave);
+      element.removeEventListener("keydown", keydown);
+    });
+  });
+  return () => {
+    for (const cleanup of cleanups) cleanup();
+  };
+}
+
 // src/map-camera.ts
 var FOCUS_DIM_OPACITY = 0.25;
 function focusTargetForFeatures(layout, ids, padding = 16) {
@@ -7003,6 +7242,42 @@ function cameraForTarget(layout, target) {
   const cam = fitTarget(target, vb);
   return { ...cam, k: Math.max(1, Math.min(40, cam.k)) };
 }
+var DEFAULT_MAX_ZOOM = 12;
+function resolveMapZoom(zoom) {
+  if (!zoom) return null;
+  const cfg = zoom === true ? {} : zoom;
+  const max = cfg.maxZoom;
+  return {
+    maxZoom: typeof max === "number" && Number.isFinite(max) ? Math.max(1, max) : DEFAULT_MAX_ZOOM,
+    controls: cfg.controls !== false
+  };
+}
+function clampMapCamera(camera, vb, maxZoom) {
+  const k = Math.min(Math.max(camera.k, 1), Math.max(1, maxZoom));
+  const halfW = vb.width / (2 * k);
+  const halfH = vb.height / (2 * k);
+  return {
+    cx: Math.min(Math.max(camera.cx, halfW), vb.width - halfW),
+    cy: Math.min(Math.max(camera.cy, halfH), vb.height - halfH),
+    k
+  };
+}
+function zoomCameraAt(camera, vb, k, pivotX, pivotY) {
+  const ox = pivotX - vb.width / 2;
+  const oy = pivotY - vb.height / 2;
+  const px = camera.cx + ox / camera.k;
+  const py = camera.cy + oy / camera.k;
+  return { cx: px - ox / k, cy: py - oy / k, k };
+}
+function panCamera(camera, dx, dy) {
+  return { cx: camera.cx - dx / camera.k, cy: camera.cy - dy / camera.k, k: camera.k };
+}
+function wheelZoomFactor(e) {
+  const perUnit = e.deltaMode === 1 ? 0.05 : e.deltaMode === 2 ? 1 : 2e-3;
+  let exp = -e.deltaY * perUnit;
+  if (e.ctrlKey && e.deltaMode === 0 && Math.abs(e.deltaY) < 50) exp *= 5;
+  return 2 ** Math.max(-1, Math.min(1, exp));
+}
 function applyMapCamera(svg, camera, layout) {
   const cameraGroup = svg.querySelector("[data-oc-map-camera]");
   if (!cameraGroup) return;
@@ -7037,6 +7312,21 @@ function applyMapCamera(svg, camera, layout) {
     }
   }
 }
+function ensureMapClip(svg, layout, clipId) {
+  if (svg.querySelector(`#${clipId}`)) return;
+  let defs = svg.querySelector("defs");
+  if (!defs) {
+    defs = document.createElementNS("http://www.w3.org/2000/svg", "defs");
+    svg.insertBefore(defs, svg.firstChild);
+  }
+  const clip = document.createElementNS("http://www.w3.org/2000/svg", "clipPath");
+  clip.setAttribute("id", clipId);
+  const rect = document.createElementNS("http://www.w3.org/2000/svg", "rect");
+  rect.setAttribute("width", String(layout.area.width));
+  rect.setAttribute("height", String(layout.area.height));
+  clip.appendChild(rect);
+  defs.appendChild(clip);
+}
 
 // src/map-renderer.ts
 var SVG_NS3 = "http://www.w3.org/2000/svg";
@@ -7282,6 +7572,14 @@ function renderMapSVG(layout, opts) {
   }
   const classes = animate ? "oc-map oc-animate" : "oc-map";
   svg.setAttribute("class", classes);
+  const background = createSVGElement2("rect");
+  setAttrs2(background, {
+    width,
+    height,
+    fill: layout.theme.colors.background,
+    "aria-hidden": "true"
+  });
+  svg.appendChild(background);
   const bulk = features.length > BULK_ANIMATION_THRESHOLD;
   let mapStaggerBudget = 0;
   if (animate && animation?.enter) {
@@ -7294,6 +7592,7 @@ function renderMapSVG(layout, opts) {
     const stagger = !bulk && n > 1 ? mapStaggerBudget / (n - 1) : 0;
     stampAnimationVars(svg, {
       duration: perFeature,
+      spring: animation.enter.spring,
       stagger,
       annotationDelay: animation.annotationDelay,
       ease: animation.enter.ease
@@ -7462,7 +7761,7 @@ function runMapFillTransition(svg, prev, opts) {
     const key = p.getAttribute("data-key");
     const to = p.getAttribute("fill");
     const from = key ? snapshot.fills.get(key) : void 0;
-    if (from && to && from !== to) {
+    if (from && to && from !== to && !from.startsWith("url(") && !to.startsWith("url(")) {
       tweens.push({ kind: "fill", el: p, to, interp: interpolateRgb2(from, to) });
       p.setAttribute("fill", from);
     }
@@ -7524,6 +7823,452 @@ function runMapFillTransition(svg, prev, opts) {
   };
 }
 
+// src/map-zoom.ts
+var ZOOM_STEP = 2;
+var KEY_PAN_FRACTION = 0.1;
+var DRAG_THRESHOLD = 3;
+var HINT_MS = 1500;
+var EPS = 1e-3;
+var clipIdCounter = 0;
+var ICONS = {
+  in: '<path d="M8 3v10M3 8h10"/>',
+  out: '<path d="M3 8h10"/>',
+  reset: '<path d="M3 8a5 5 0 1 0 1.6-3.7"/><path d="M3 2.5v2.8h2.8"/>'
+};
+function isMacLike() {
+  if (typeof navigator === "undefined") return false;
+  return /Mac|iPhone|iPad|iPod/.test(navigator.platform || navigator.userAgent || "");
+}
+function createMapZoomController(host) {
+  const { container } = host;
+  const clipId = `oc-map-zoom-clip-${++clipIdCounter}`;
+  let overlay = null;
+  let buttons = null;
+  let hint = null;
+  let hintTimer = null;
+  let drag = null;
+  let suppressClick = false;
+  let pinch = null;
+  let touchPan = null;
+  let gestureStartK = null;
+  function vb() {
+    return host.getLayout().mapSize;
+  }
+  function clamp(camera) {
+    const cfg = host.getConfig();
+    return clampMapCamera(camera, vb(), cfg?.maxZoom ?? 1);
+  }
+  function clampK(k) {
+    const cfg = host.getConfig();
+    return Math.min(Math.max(k, 1), cfg?.maxZoom ?? 1);
+  }
+  function svgRect() {
+    const svg = host.getSvg();
+    let rect = svg?.getBoundingClientRect();
+    if (!rect || !rect.width || !rect.height) rect = container.getBoundingClientRect();
+    if (!rect.width || !rect.height) return null;
+    return rect;
+  }
+  function toMapFrame(clientX, clientY) {
+    const rect = svgRect();
+    if (!rect) return null;
+    const layout = host.getLayout();
+    const x = (clientX - rect.left) * (layout.width / rect.width) - layout.area.x;
+    const y = (clientY - rect.top) * (layout.height / rect.height) - layout.area.y;
+    const inside = x >= 0 && y >= 0 && x <= layout.area.width && y <= layout.area.height;
+    return { x, y, inside };
+  }
+  function unitsPerPx() {
+    const rect = svgRect();
+    return rect ? host.getLayout().width / rect.width : 1;
+  }
+  function isZoomed() {
+    return host.getCamera().k > 1 + EPS;
+  }
+  function fromControls(e) {
+    const t = e.target;
+    return !!t?.closest?.(".oc-map-zoom");
+  }
+  function zoomAround(factor, x, y, animate) {
+    const cam = host.getCamera();
+    const next = clamp(zoomCameraAt(cam, vb(), clampK(cam.k * factor), x, y));
+    if (animate) host.animateCamera(next);
+    else host.setCamera(next);
+  }
+  function zoomAtCenter(factor) {
+    const { width, height } = vb();
+    zoomAround(factor, width / 2, height / 2, true);
+  }
+  function showHint() {
+    if (!hint) return;
+    hint.setAttribute("data-visible", "");
+    if (hintTimer) clearTimeout(hintTimer);
+    hintTimer = setTimeout(() => {
+      hint?.removeAttribute("data-visible");
+      hintTimer = null;
+    }, HINT_MS);
+  }
+  function onWheel(e) {
+    if (!host.getConfig() || fromControls(e)) return;
+    const p = toMapFrame(e.clientX, e.clientY);
+    if (!p?.inside) return;
+    if (!e.ctrlKey && !e.metaKey) {
+      if (Math.abs(e.deltaY) > Math.abs(e.deltaX)) showHint();
+      return;
+    }
+    e.preventDefault();
+    hint?.removeAttribute("data-visible");
+    zoomAround(wheelZoomFactor(e), p.x, p.y, false);
+  }
+  function onGestureStart(e) {
+    if (!host.getConfig()) return;
+    e.preventDefault();
+    gestureStartK = host.getCamera().k;
+  }
+  function onGestureChange(e) {
+    if (!host.getConfig() || gestureStartK === null) return;
+    e.preventDefault();
+    if (pinch) return;
+    const g = e;
+    const p = toMapFrame(g.clientX, g.clientY);
+    if (!p) return;
+    const cam = host.getCamera();
+    host.setCamera(clamp(zoomCameraAt(cam, vb(), clampK(gestureStartK * g.scale), p.x, p.y)));
+  }
+  function onGestureEnd(e) {
+    if (gestureStartK === null) return;
+    e.preventDefault();
+    gestureStartK = null;
+  }
+  function onPointerDown(e) {
+    if (e.pointerType === "touch" || e.button !== 0) return;
+    if (!host.getConfig() || fromControls(e) || !isZoomed()) return;
+    const p = toMapFrame(e.clientX, e.clientY);
+    if (!p?.inside) return;
+    drag = {
+      id: e.pointerId,
+      startX: e.clientX,
+      startY: e.clientY,
+      lastX: e.clientX,
+      lastY: e.clientY,
+      moved: false
+    };
+  }
+  function onMouseDown(e) {
+    if (e.button !== 0 || !host.getConfig() || fromControls(e)) return;
+    if (!isZoomed() && e.detail < 2) return;
+    const p = toMapFrame(e.clientX, e.clientY);
+    if (!p?.inside) return;
+    e.preventDefault();
+    host.getSvg()?.focus({ preventScroll: true });
+  }
+  function onPointerMove(e) {
+    if (!drag || e.pointerId !== drag.id) return;
+    if (!drag.moved) {
+      if (Math.hypot(e.clientX - drag.startX, e.clientY - drag.startY) < DRAG_THRESHOLD) return;
+      drag.moved = true;
+      const svg = host.getSvg();
+      try {
+        svg?.setPointerCapture(e.pointerId);
+      } catch {
+      }
+      svg?.classList.add("oc-map--panning");
+      host.hideTooltip();
+    }
+    e.preventDefault();
+    const s = unitsPerPx();
+    const dx = (e.clientX - drag.lastX) * s;
+    const dy = (e.clientY - drag.lastY) * s;
+    drag.lastX = e.clientX;
+    drag.lastY = e.clientY;
+    host.setCamera(clamp(panCamera(host.getCamera(), dx, dy)));
+  }
+  function endDrag(e) {
+    if (!drag || e.pointerId !== drag.id) return;
+    const svg = host.getSvg();
+    if (drag.moved) {
+      suppressClick = true;
+      setTimeout(() => {
+        suppressClick = false;
+      }, 0);
+    }
+    try {
+      if (svg?.hasPointerCapture?.(e.pointerId)) svg.releasePointerCapture(e.pointerId);
+    } catch {
+    }
+    svg?.classList.remove("oc-map--panning");
+    drag = null;
+  }
+  function onClickCapture(e) {
+    if (!suppressClick) return;
+    suppressClick = false;
+    e.stopPropagation();
+    e.preventDefault();
+  }
+  function onDblClick(e) {
+    if (!host.getConfig() || fromControls(e)) return;
+    const p = toMapFrame(e.clientX, e.clientY);
+    if (!p?.inside) return;
+    e.preventDefault();
+    zoomAround(e.shiftKey ? 1 / ZOOM_STEP : ZOOM_STEP, p.x, p.y, true);
+  }
+  function touchPoint(t) {
+    return toMapFrame(t.clientX, t.clientY);
+  }
+  function startPinch(e) {
+    const a = touchPoint(e.touches[0]);
+    const b = touchPoint(e.touches[1]);
+    if (!a || !b) return;
+    pinch = {
+      dist: Math.hypot(b.x - a.x, b.y - a.y) || 1,
+      x: (a.x + b.x) / 2,
+      y: (a.y + b.y) / 2
+    };
+    touchPan = null;
+  }
+  function startTouchPan(t) {
+    touchPan = isZoomed() ? { x: t.clientX, y: t.clientY, moved: false } : null;
+  }
+  function onTouchStart(e) {
+    if (!host.getConfig() || fromControls(e)) return;
+    if (e.touches.length >= 2) {
+      const a = touchPoint(e.touches[0]);
+      if (!a?.inside) return;
+      e.preventDefault();
+      host.hideTooltip();
+      startPinch(e);
+    } else if (e.touches.length === 1) {
+      const p = touchPoint(e.touches[0]);
+      if (!p?.inside) return;
+      startTouchPan(e.touches[0]);
+    }
+  }
+  function onTouchMove(e) {
+    if (!host.getConfig()) return;
+    if (pinch && e.touches.length >= 2) {
+      e.preventDefault();
+      const a = touchPoint(e.touches[0]);
+      const b = touchPoint(e.touches[1]);
+      if (!a || !b) return;
+      const dist = Math.hypot(b.x - a.x, b.y - a.y) || 1;
+      const x = (a.x + b.x) / 2;
+      const y = (a.y + b.y) / 2;
+      let cam = host.getCamera();
+      cam = zoomCameraAt(cam, vb(), clampK(cam.k * (dist / pinch.dist)), x, y);
+      cam = panCamera(cam, x - pinch.x, y - pinch.y);
+      host.setCamera(clamp(cam));
+      pinch = { dist, x, y };
+      return;
+    }
+    if (touchPan && e.touches.length === 1) {
+      const t = e.touches[0];
+      if (!touchPan.moved) {
+        if (Math.hypot(t.clientX - touchPan.x, t.clientY - touchPan.y) < DRAG_THRESHOLD) return;
+        touchPan.moved = true;
+        host.hideTooltip();
+      }
+      if (e.cancelable) e.preventDefault();
+      const s = unitsPerPx();
+      const dx = (t.clientX - touchPan.x) * s;
+      const dy = (t.clientY - touchPan.y) * s;
+      touchPan.x = t.clientX;
+      touchPan.y = t.clientY;
+      host.setCamera(clamp(panCamera(host.getCamera(), dx, dy)));
+    }
+  }
+  function onTouchEnd(e) {
+    if (e.touches.length >= 2) {
+      startPinch(e);
+      return;
+    }
+    pinch = null;
+    if (e.touches.length === 1) {
+      startTouchPan(e.touches[0]);
+      if (touchPan) touchPan.moved = true;
+    } else {
+      touchPan = null;
+    }
+  }
+  function onKeyDown(e) {
+    if (!host.getConfig() || e.target !== host.getSvg()) return;
+    if (e.ctrlKey || e.metaKey || e.altKey) return;
+    const { width, height } = vb();
+    switch (e.key) {
+      case "+":
+      case "=":
+        zoomAtCenter(ZOOM_STEP);
+        break;
+      case "-":
+      case "_":
+        zoomAtCenter(1 / ZOOM_STEP);
+        break;
+      case "0":
+        host.reset();
+        break;
+      case "ArrowLeft":
+      case "ArrowRight":
+      case "ArrowUp":
+      case "ArrowDown": {
+        if (!isZoomed()) return;
+        const dx = e.key === "ArrowLeft" ? width * KEY_PAN_FRACTION : e.key === "ArrowRight" ? -width * KEY_PAN_FRACTION : 0;
+        const dy = e.key === "ArrowUp" ? height * KEY_PAN_FRACTION : e.key === "ArrowDown" ? -height * KEY_PAN_FRACTION : 0;
+        host.setCamera(clamp(panCamera(host.getCamera(), dx, dy)));
+        break;
+      }
+      default:
+        return;
+    }
+    e.preventDefault();
+  }
+  function makeButton(kind, label) {
+    const btn = document.createElement("button");
+    btn.type = "button";
+    btn.className = "oc-map-zoom-btn";
+    btn.setAttribute("data-zoom", kind);
+    btn.setAttribute("aria-label", label);
+    btn.title = label;
+    btn.innerHTML = `<svg viewBox="0 0 16 16" width="16" height="16" aria-hidden="true" focusable="false" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">${ICONS[kind]}</svg>`;
+    btn.addEventListener("click", (e) => {
+      e.stopPropagation();
+      if (kind === "in") zoomAtCenter(ZOOM_STEP);
+      else if (kind === "out") zoomAtCenter(1 / ZOOM_STEP);
+      else host.reset();
+    });
+    return btn;
+  }
+  function ensureOverlay(showControls) {
+    if (!overlay) {
+      overlay = document.createElement("div");
+      overlay.className = "oc-map-zoom";
+      hint = document.createElement("div");
+      hint.className = "oc-map-zoom-hint";
+      hint.setAttribute("aria-hidden", "true");
+      hint.textContent = isMacLike() ? "Use \u2318 + scroll to zoom the map" : "Use Ctrl + scroll to zoom the map";
+      overlay.appendChild(hint);
+      if (getComputedStyle(container).position === "static") {
+        container.style.position = "relative";
+      }
+      container.appendChild(overlay);
+    }
+    if (showControls && !buttons) {
+      const group = document.createElement("div");
+      group.className = "oc-map-zoom-controls";
+      group.setAttribute("role", "group");
+      group.setAttribute("aria-label", "Map zoom");
+      buttons = {
+        in: makeButton("in", "Zoom in"),
+        out: makeButton("out", "Zoom out"),
+        reset: makeButton("reset", "Reset zoom")
+      };
+      group.append(buttons.in, buttons.out, buttons.reset);
+      overlay.appendChild(group);
+    } else if (!showControls && buttons) {
+      buttons.in.parentElement?.remove();
+      buttons = null;
+    }
+  }
+  function removeOverlay() {
+    if (hintTimer) clearTimeout(hintTimer);
+    hintTimer = null;
+    overlay?.remove();
+    overlay = null;
+    buttons = null;
+    hint = null;
+  }
+  function placeOverlay(layout) {
+    if (!overlay || !layout.width || !layout.height) return;
+    const { area, width, height } = layout;
+    overlay.style.left = `${area.x / width * 100}%`;
+    overlay.style.top = `${area.y / height * 100}%`;
+    overlay.style.width = `${area.width / width * 100}%`;
+    overlay.style.height = `${area.height / height * 100}%`;
+  }
+  function onRender(restoreFocus) {
+    const cfg = host.getConfig();
+    const svg = host.getSvg();
+    if (!cfg || !svg) {
+      removeOverlay();
+      return;
+    }
+    const layout = host.getLayout();
+    svg.setAttribute("tabindex", "0");
+    svg.setAttribute("aria-keyshortcuts", "+ - 0 ArrowUp ArrowDown ArrowLeft ArrowRight");
+    ensureMapClip(svg, layout, clipId);
+    ensureOverlay(cfg.controls);
+    placeOverlay(layout);
+    if (restoreFocus) svg.focus({ preventScroll: true });
+    onCamera();
+  }
+  function onCamera() {
+    const cfg = host.getConfig();
+    const svg = host.getSvg();
+    if (!cfg || !svg) return;
+    const cam = host.getCamera();
+    const zoomed = cam.k > 1 + EPS;
+    const { width, height } = vb();
+    const atFullView = !zoomed && Math.abs(cam.cx - width / 2) < EPS && Math.abs(cam.cy - height / 2) < EPS;
+    const group = svg.querySelector(".oc-map-group");
+    if (zoomed) group?.setAttribute("clip-path", `url(#${clipId})`);
+    else group?.removeAttribute("clip-path");
+    svg.style.touchAction = zoomed ? "none" : "pan-x pan-y";
+    if (zoomed) svg.setAttribute("data-oc-zoomed", "");
+    else svg.removeAttribute("data-oc-zoomed");
+    if (buttons) {
+      setDisabled(buttons.in, cam.k >= cfg.maxZoom - EPS, svg);
+      setDisabled(buttons.out, !zoomed, svg);
+      setDisabled(buttons.reset, atFullView, svg);
+    }
+  }
+  function setDisabled(btn, disabled, svg) {
+    if (btn.disabled === disabled) return;
+    const hadFocus = disabled && document.activeElement === btn;
+    btn.disabled = disabled;
+    if (hadFocus) svg.focus({ preventScroll: true });
+  }
+  const touchOpts = { passive: false };
+  container.addEventListener("wheel", onWheel, { passive: false });
+  container.addEventListener("pointerdown", onPointerDown);
+  container.addEventListener("mousedown", onMouseDown);
+  container.addEventListener("pointermove", onPointerMove);
+  container.addEventListener("pointerup", endDrag);
+  container.addEventListener("pointercancel", endDrag);
+  container.addEventListener("click", onClickCapture, true);
+  container.addEventListener("dblclick", onDblClick);
+  container.addEventListener("touchstart", onTouchStart, touchOpts);
+  container.addEventListener("touchmove", onTouchMove, touchOpts);
+  container.addEventListener("touchend", onTouchEnd);
+  container.addEventListener("touchcancel", onTouchEnd);
+  container.addEventListener("gesturestart", onGestureStart);
+  container.addEventListener("gesturechange", onGestureChange);
+  container.addEventListener("gestureend", onGestureEnd);
+  container.addEventListener("keydown", onKeyDown);
+  return {
+    onRender,
+    onCamera,
+    destroy() {
+      container.removeEventListener("wheel", onWheel);
+      container.removeEventListener("pointerdown", onPointerDown);
+      container.removeEventListener("mousedown", onMouseDown);
+      container.removeEventListener("pointermove", onPointerMove);
+      container.removeEventListener("pointerup", endDrag);
+      container.removeEventListener("pointercancel", endDrag);
+      container.removeEventListener("click", onClickCapture, true);
+      container.removeEventListener("dblclick", onDblClick);
+      container.removeEventListener("touchstart", onTouchStart);
+      container.removeEventListener("touchmove", onTouchMove);
+      container.removeEventListener("touchend", onTouchEnd);
+      container.removeEventListener("touchcancel", onTouchEnd);
+      container.removeEventListener("gesturestart", onGestureStart);
+      container.removeEventListener("gesturechange", onGestureChange);
+      container.removeEventListener("gestureend", onGestureEnd);
+      container.removeEventListener("keydown", onKeyDown);
+      const svg = host.getSvg();
+      svg?.removeAttribute("tabindex");
+      removeOverlay();
+    }
+  };
+}
+
 // src/map-mount.ts
 function focusSignature(focus) {
   if (!focus) return null;
@@ -7552,6 +8297,7 @@ function restoreFeatureOrder(el) {
     parent.appendChild(el);
   }
 }
+var USER_ZOOM_MS = 250;
 function prefersReducedMotion2() {
   if (typeof window === "undefined" || typeof window.matchMedia !== "function") return false;
   try {
@@ -7574,11 +8320,12 @@ function createGeoMap(container, spec, options) {
   let currentCamera = { cx: 0, cy: 0, k: 1 };
   let currentFocusIds = null;
   let cameraTween = null;
+  let zoomController = null;
   let isFirstRender = true;
   let fontsReloadPending = false;
   container.classList.add("oc-map-root");
-  function resolveEffectiveFont() {
-    return options?.theme?.fonts?.family ?? currentSpec.theme?.fonts?.family ?? resolveFontFamily(container);
+  function resolveEffectiveFont(candidate = currentSpec) {
+    return options?.theme?.fonts?.family ?? candidate.theme?.fonts?.family ?? resolveFontFamily(container);
   }
   let fontFamily = resolveEffectiveFont();
   let measureText = createMeasureText(fontFamily);
@@ -7595,7 +8342,7 @@ function createGeoMap(container, spec, options) {
     }
     return { width, height: Math.round(width * 0.625) };
   }
-  function compile() {
+  function compile(candidate = currentSpec, measure = measureText) {
     const { width, height } = getContainerDimensions();
     const darkMode = resolveDarkMode(options?.darkMode);
     const compileOpts = {
@@ -7604,12 +8351,14 @@ function createGeoMap(container, spec, options) {
       theme: options?.theme,
       darkMode,
       watermark: options?.watermark,
-      measureText
+      measureText: measure
     };
-    return compileGeoMap(currentSpec, compileOpts);
+    return compileGeoMap(candidate, compileOpts);
   }
   function wireTooltipAndInteraction(svg, layout) {
     const cleanups = [];
+    const navigation = [];
+    let activeLeave = null;
     const featuresById = /* @__PURE__ */ new Map();
     for (const f of layout.features) {
       const key = String(f.id);
@@ -7622,9 +8371,11 @@ function createGeoMap(container, spec, options) {
       const content = layout.tooltipDescriptors.get(featureId);
       const feature = featuresById.get(featureId);
       const handleMouseEnter = (e) => {
+        activeLeave?.();
+        activeLeave = handleMouseLeave;
         const mouseEvent = e;
         el.style.setProperty("cursor", "pointer");
-        raiseFeature(el, svg);
+        if (document.activeElement !== el) raiseFeature(el, svg);
         el.classList.add("oc-map-feature--hover");
         if (content && tooltipManager && options?.tooltip !== false) {
           const svgRect = svg.getBoundingClientRect();
@@ -7651,6 +8402,8 @@ function createGeoMap(container, spec, options) {
         }
       };
       const handleMouseLeave = () => {
+        if (activeLeave !== handleMouseLeave) return;
+        activeLeave = null;
         el.style.removeProperty("cursor");
         el.classList.remove("oc-map-feature--hover");
         restoreFeatureOrder(el);
@@ -7667,6 +8420,13 @@ function createGeoMap(container, spec, options) {
           });
         }
       };
+      navigation.push({
+        element: el,
+        key: `feature:${featureId}`,
+        enter: handleMouseEnter,
+        leave: handleMouseLeave,
+        activate: handleClick
+      });
       el.addEventListener("mouseenter", handleMouseEnter);
       el.addEventListener("mousemove", handleMouseMove);
       el.addEventListener("mouseleave", handleMouseLeave);
@@ -7702,6 +8462,8 @@ function createGeoMap(container, spec, options) {
       const content = layout.tooltipDescriptors.get(`point:${pointKey}`);
       const pointMark = pointMarksByKey.get(pointKey);
       const handlePointMouseEnter = (e) => {
+        activeLeave?.();
+        activeLeave = handlePointMouseLeave;
         const mouseEvent = e;
         el.style.setProperty("cursor", "pointer");
         el.style.setProperty("filter", "brightness(1.15)");
@@ -7729,6 +8491,8 @@ function createGeoMap(container, spec, options) {
         }
       };
       const handlePointMouseLeave = () => {
+        if (activeLeave !== handlePointMouseLeave) return;
+        activeLeave = null;
         el.style.removeProperty("cursor");
         el.style.removeProperty("filter");
         tooltipManager?.hide();
@@ -7743,6 +8507,13 @@ function createGeoMap(container, spec, options) {
           });
         }
       };
+      navigation.push({
+        element: el,
+        key: `point:${pointKey}`,
+        enter: handlePointMouseEnter,
+        leave: handlePointMouseLeave,
+        activate: handlePointClick
+      });
       el.addEventListener("mouseenter", handlePointMouseEnter);
       el.addEventListener("mousemove", handlePointMouseMove);
       el.addEventListener("mouseleave", handlePointMouseLeave);
@@ -7754,7 +8525,9 @@ function createGeoMap(container, spec, options) {
         el.removeEventListener("click", handlePointClick);
       });
     }
+    cleanups.push(wireMarkNavigation(svg, navigation));
     return () => {
+      activeLeave?.();
       for (const cleanup of cleanups) {
         cleanup();
       }
@@ -7774,6 +8547,18 @@ function createGeoMap(container, spec, options) {
     }
     return cameraForTarget(currentLayout, null);
   }
+  function commitCamera(cam) {
+    currentCamera = cam;
+    if (svgElement) applyMapCamera(svgElement, cam, currentLayout);
+    zoomController?.onCamera();
+    options?.onCameraChange?.({ ...cam });
+  }
+  function cancelCameraTween() {
+    if (cameraTween) {
+      cameraTween.cancel();
+      cameraTween = null;
+    }
+  }
   function animateCamera(target, duration) {
     if (cameraTween) cameraTween.cancel();
     cameraTween = createTween2({
@@ -7782,20 +8567,64 @@ function createGeoMap(container, spec, options) {
       duration,
       ease: easingFns.easeInOutCubic,
       onFrame(cam) {
-        currentCamera = cam;
-        if (svgElement) applyMapCamera(svgElement, cam, currentLayout);
+        commitCamera(cam);
       }
     });
     cameraTween.to(target);
   }
   function driveCamera(cam, duration) {
     if (duration === 0 || prefersReducedMotion2()) {
-      currentCamera = cam;
-      if (svgElement) applyMapCamera(svgElement, cam, currentLayout);
+      cancelCameraTween();
+      commitCamera(cam);
     } else {
       animateCamera(cam, duration);
     }
   }
+  function resetCamera(duration) {
+    currentFocusIds = null;
+    const cam = cameraForTarget(currentLayout, null);
+    driveCamera(cam, duration);
+    applyFocusDim(null);
+    updateA11yLive(null);
+  }
+  function rescaleFreeCamera(prev) {
+    const next = currentLayout.mapSize;
+    if (!prev.width || !prev.height || prev.width === next.width && prev.height === next.height) {
+      return;
+    }
+    const scaled = {
+      cx: currentCamera.cx * next.width / prev.width,
+      cy: currentCamera.cy * next.height / prev.height,
+      k: currentCamera.k
+    };
+    const zoom = resolveMapZoom(currentSpec.geo?.zoom);
+    currentCamera = zoom ? clampMapCamera(scaled, next, zoom.maxZoom) : scaled;
+  }
+  function syncZoomController(restoreFocus) {
+    const zoom = resolveMapZoom(currentSpec.geo?.zoom);
+    if (!zoom && !zoomController) return;
+    if (!zoomController) {
+      zoomController = createMapZoomController({
+        container,
+        getSvg: () => svgElement,
+        getLayout: () => currentLayout,
+        getConfig: () => resolveMapZoom(currentSpec.geo?.zoom),
+        getCamera: () => ({ ...currentCamera }),
+        setCamera(cam) {
+          cancelCameraTween();
+          currentFocusIds = null;
+          commitCamera(cam);
+        },
+        animateCamera(cam) {
+          currentFocusIds = null;
+          driveCamera(cam, USER_ZOOM_MS);
+        },
+        reset: () => resetCamera(USER_ZOOM_MS),
+        hideTooltip: () => tooltipManager?.hide()
+      });
+    }
+    zoomController.onRender(restoreFocus);
+  }
   function updateA11yLive(ids) {
     let liveEl = container.querySelector(".oc-map-live");
     if (!liveEl) {
@@ -7814,9 +8643,9 @@ function createGeoMap(container, spec, options) {
     });
     liveEl.textContent = `Zoomed to ${names.join(", ")}`;
   }
-  function applyFocusDim(ids) {
-    if (!svgElement) return;
-    const features = svgElement.querySelectorAll(".oc-map-feature");
+  function applyFocusDim(ids, target = svgElement) {
+    if (!target) return;
+    const features = target.querySelectorAll(".oc-map-feature");
     if (!ids || ids.length === 0) {
       for (const el of features) {
         el.style.removeProperty("opacity");
@@ -7833,6 +8662,8 @@ function createGeoMap(container, spec, options) {
     }
   }
   function render(animate = false) {
+    const focusedMark = captureMarkFocus(svgElement);
+    tooltipManager?.hide();
     if (animationCleanup) {
       animationCleanup();
       animationCleanup = null;
@@ -7842,6 +8673,7 @@ function createGeoMap(container, spec, options) {
       fillTransitionHandle = null;
     }
     const oldSvg = svgElement;
+    const oldSvgHadFocus = !!oldSvg && document.activeElement === oldSvg;
     const newSvg = renderMapSVG(currentLayout, { animate });
     if (oldSvg) {
       if (cleanupTooltipEvents) {
@@ -7862,6 +8694,7 @@ function createGeoMap(container, spec, options) {
     const isAnimating = animate && !!currentLayout.animation?.enter;
     if (isAnimating) {
       animationCleanup = setupAnimationCleanup(newSvg, () => {
+        animationCleanup = null;
         if (pendingResize && !destroyed) {
           pendingResize = false;
           resize();
@@ -7893,19 +8726,24 @@ function createGeoMap(container, spec, options) {
       }
     }
     isFirstRender = false;
+    syncZoomController(oldSvgHadFocus);
+    if (svgElement) restoreMarkFocus(svgElement, focusedMark);
   }
   function update(newSpec) {
+    if (destroyed) return;
+    const nextFont = resolveEffectiveFont(newSpec);
+    const nextMeasure = nextFont === fontFamily ? measureText : createMeasureText(nextFont);
+    const nextLayout = compile(newSpec, nextMeasure);
     currentSpec = newSpec;
-    const nextFont = resolveEffectiveFont();
-    if (nextFont !== fontFamily) {
-      fontFamily = nextFont;
-      measureText = createMeasureText(fontFamily);
-    }
+    fontFamily = nextFont;
+    measureText = nextMeasure;
     const canAnimate = !animationCleanup && !prefersReducedMotion2();
     const prevPaint = canAnimate ? captureMapSnapshot(svgElement) : null;
     const prevFocusIds = currentFocusIds ? currentFocusIds.map(String).sort().join(",") : null;
     const prevFocusSig = focusSignature(currentLayout.focus);
-    currentLayout = compile();
+    const prevMapSize = currentLayout.mapSize;
+    currentLayout = nextLayout;
+    if (!currentFocusIds) rescaleFreeCamera(prevMapSize);
     render();
     if (canAnimate && prevPaint && (prevPaint.fills.size > 0 || prevPaint.points.size > 0) && svgElement && currentLayout.animation?.update) {
       fillTransitionHandle = runMapFillTransition(svgElement, prevPaint, {
@@ -7934,11 +8772,10 @@ function createGeoMap(container, spec, options) {
       pendingResize = true;
       return;
     }
-    if (cameraTween) {
-      cameraTween.cancel();
-      cameraTween = null;
-    }
+    cancelCameraTween();
+    const prevMapSize = currentLayout.mapSize;
     currentLayout = compile();
+    if (!currentFocusIds) rescaleFreeCamera(prevMapSize);
     render();
     if (currentFocusIds && currentFocusIds.length > 0) {
       currentCamera = resolveCamera();
@@ -7949,18 +8786,29 @@ function createGeoMap(container, spec, options) {
       if (svgElement) applyMapCamera(svgElement, currentCamera, currentLayout);
     }
     applyFocusDim(currentFocusIds);
+    zoomController?.onCamera();
   }
   function exportChart(format, options_) {
     if (!svgElement) return "";
+    const terminalSvg = renderMapSVG(currentLayout, { animate: false });
+    applyMapCamera(terminalSvg, currentCamera, currentLayout);
+    const clip = svgElement.querySelector(".oc-map-group")?.getAttribute("clip-path");
+    if (clip) {
+      const clipId = clip.slice(5, -1);
+      ensureMapClip(terminalSvg, currentLayout, clipId);
+      terminalSvg.querySelector(".oc-map-group")?.setAttribute("clip-path", clip);
+    }
+    applyFocusDim(currentFocusIds, terminalSvg);
+    const resolvedOptions = { theme: currentLayout.theme, ...options_ };
     switch (format) {
       case "svg":
-        return exportSVG(svgElement);
+        return exportSVG(terminalSvg);
       case "svg-with-fonts":
-        return exportSVGWithFonts(svgElement);
+        return exportSVGWithFonts(terminalSvg, resolvedOptions);
       case "png":
-        return exportPNG(svgElement, options_);
+        return exportPNG(terminalSvg, resolvedOptions);
       case "jpg":
-        return exportJPG(svgElement, options_);
+        return exportJPG(terminalSvg, resolvedOptions);
       default:
         return "";
     }
@@ -7977,9 +8825,10 @@ function createGeoMap(container, spec, options) {
       fillTransitionHandle.cancel();
       fillTransitionHandle = null;
     }
-    if (cameraTween) {
-      cameraTween.cancel();
-      cameraTween = null;
+    cancelCameraTween();
+    if (zoomController) {
+      zoomController.destroy();
+      zoomController = null;
     }
     if (cleanupTooltipEvents) {
       cleanupTooltipEvents();
@@ -8062,19 +8911,15 @@ function createGeoMap(container, spec, options) {
       applyFocusDim(null);
     },
     resetView(opts) {
-      currentFocusIds = null;
-      const cam = cameraForTarget(currentLayout, null);
-      driveCamera(cam, opts?.duration ?? storyMotion.camera);
-      applyFocusDim(null);
-      updateA11yLive(null);
+      resetCamera(opts?.duration ?? storyMotion.camera);
     },
     getCamera() {
       return { ...currentCamera };
     },
     setCamera(camera) {
-      currentCamera = camera;
+      cancelCameraTween();
       currentFocusIds = null;
-      if (svgElement) applyMapCamera(svgElement, camera, currentLayout);
+      commitCamera(camera);
     }
   };
 }
@@ -8083,16 +8928,19 @@ export {
   cancelAnimations,
   setupAnimationCleanup,
   setupTableAnimationCleanup,
+  captureMarkFocus,
+  restoreMarkFocus,
+  wireMarkNavigation,
   createMeasureText,
   resolveFontFamily,
   scheduleFontReload,
   VECTOR_EXPORT_MAX_POINTS,
   materializeCanvasModeSVG,
-  applySrOnlyStyles,
-  createTextEditOverlay,
   DEFAULT_UPDATE_MAX_MARKS,
   CANVAS_DEFAULT_UPDATE_MAX_MARKS,
   canTransitionSpecShape,
+  applySrOnlyStyles,
+  createTextEditOverlay,
   createYouDrawIt,
   createChart,
   easingFns,
@@ -8108,4 +8956,4 @@ export {
   scrubCamera,
   createGeoMap
 };
-//# sourceMappingURL=chunk-5O624XON.js.map
+//# sourceMappingURL=chunk-6TD7GWR4.js.map