@opendata-ai/openchart-vanilla 8.7.0 → 8.8.0

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

@@ -4269,7 +4269,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_NS5 = "http://www.w3.org/2000/svg";
   const cleanups = [];
   const annotationGroups = svg.querySelectorAll(".oc-annotation-text");
   for (const el of annotationGroups) {
@@ -4307,7 +4307,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_NS5, "circle");
       handleEl.setAttribute("class", "oc-connector-handle");
       handleEl.setAttribute("data-endpoint", ep.name);
       handleEl.setAttribute("cx", String(ep.cx));
@@ -4584,7 +4584,7 @@ function wireSeriesLabelDrag(svg, spec, onEdit, setDragging) {
 function wireAnchorDrag(svg, specAnnotations, layout, onEdit, setDragging) {
   if (!onEdit || !layout.xInvert || !layout.yInvert) return () => {
   };
-  const SVG_NS4 = "http://www.w3.org/2000/svg";
+  const SVG_NS5 = "http://www.w3.org/2000/svg";
   const cleanups = [];
   const annotationGroups = svg.querySelectorAll(".oc-annotation-text");
   for (const el of annotationGroups) {
@@ -4599,7 +4599,7 @@ function wireAnchorDrag(svg, specAnnotations, layout, onEdit, setDragging) {
     if (!resolved?.dot) continue;
     const anchorX = resolved.dot.x;
     const anchorY = resolved.dot.y;
-    const handleEl = document.createElementNS(SVG_NS4, "circle");
+    const handleEl = document.createElementNS(SVG_NS5, "circle");
     handleEl.setAttribute("class", "oc-anchor-handle");
     handleEl.setAttribute("cx", String(anchorX));
     handleEl.setAttribute("cy", String(anchorY));
@@ -7003,6 +7003,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;
@@ -7524,6 +7560,468 @@ 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 SVG_NS4 = "http://www.w3.org/2000/svg";
+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 ensureClip(svg, layout) {
+    if (svg.querySelector(`#${clipId}`)) return;
+    let defs = svg.querySelector("defs");
+    if (!defs) {
+      defs = document.createElementNS(SVG_NS4, "defs");
+      svg.insertBefore(defs, svg.firstChild);
+    }
+    const clip = document.createElementNS(SVG_NS4, "clipPath");
+    clip.setAttribute("id", clipId);
+    const rect = document.createElementNS(SVG_NS4, "rect");
+    rect.setAttribute("width", String(layout.area.width));
+    rect.setAttribute("height", String(layout.area.height));
+    clip.appendChild(rect);
+    defs.appendChild(clip);
+  }
+  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");
+    ensureClip(svg, layout);
+    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 +8050,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,6 +8073,7 @@ 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");
@@ -7774,6 +8274,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 +8294,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) {
@@ -7842,6 +8398,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) {
@@ -7893,6 +8450,7 @@ function createGeoMap(container, spec, options) {
       }
     }
     isFirstRender = false;
+    syncZoomController(oldSvgHadFocus);
   }
   function update(newSpec) {
     currentSpec = newSpec;
@@ -7905,7 +8463,9 @@ function createGeoMap(container, spec, options) {
     const prevPaint = canAnimate ? captureMapSnapshot(svgElement) : null;
     const prevFocusIds = currentFocusIds ? currentFocusIds.map(String).sort().join(",") : null;
     const prevFocusSig = focusSignature(currentLayout.focus);
+    const prevMapSize = currentLayout.mapSize;
     currentLayout = compile();
+    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 +8494,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,6 +8508,7 @@ function createGeoMap(container, spec, options) {
       if (svgElement) applyMapCamera(svgElement, currentCamera, currentLayout);
     }
     applyFocusDim(currentFocusIds);
+    zoomController?.onCamera();
   }
   function exportChart(format, options_) {
     if (!svgElement) return "";
@@ -7977,9 +8537,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 +8623,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);
     }
   };
 }
@@ -8108,4 +8665,4 @@ export {
   scrubCamera,
   createGeoMap
 };
-//# sourceMappingURL=chunk-5O624XON.js.map
+//# sourceMappingURL=chunk-QBTRAQAX.js.map