@opendata-ai/openchart-vanilla 8.6.4 → 8.8.0

package/dist/{chunk-W3WPGHYV.js → chunk-QBTRAQAX.js}

@@ -4,7 +4,7 @@ import {
   exportPNG,
   exportSVG,
   exportSVGWithFonts
-} from "./chunk-6B5OBGIO.js";
+} from "./chunk-I73B3DJI.js";
 import {
   buildGradientDefs,
   buildPatternDefs,
@@ -17,12 +17,12 @@ import {
   resolveMarkFill,
   resolvePatternFill,
   stampAnimationVars
-} from "./chunk-MDK6AILK.js";
+} from "./chunk-SXTHPXG6.js";
 import {
   SVG_NS,
   createSVGElement,
   setAttrs
-} from "./chunk-5RX6ZQGZ.js";
+} from "./chunk-SDJHUELU.js";
 import {
   AnimationScheduler,
   SpatialIndex,
@@ -3122,21 +3122,40 @@ function applySecondaryOpacity(els, elapsed, enterDelay, enterDuration) {
   }
 }
 
+// src/dom-helpers.ts
+function applySrOnlyStyles(el) {
+  el.style.position = "absolute";
+  el.style.width = "1px";
+  el.style.height = "1px";
+  el.style.padding = "0";
+  el.style.margin = "-1px";
+  el.style.overflow = "clip";
+  el.style.clipPath = "inset(50%)";
+  el.style.whiteSpace = "nowrap";
+  el.style.borderWidth = "0";
+}
+
 // src/you-draw-it.ts
 var MIN_TOUCH_TARGET = 24;
+var TRAIL_RESOLUTION = 1e3;
+var START_SLOP_PX = 16;
 function buildLinearPath(points) {
   if (points.length === 0) return "";
   const sorted = [...points].sort((a, b) => a.x - b.x);
   return sorted.map((p, i) => `${i === 0 ? "M" : "L"}${p.x},${p.y}`).join(" ");
 }
+function round2(n) {
+  return Math.round(n * 100) / 100;
+}
 function createYouDrawIt(options) {
   const { container, onReveal } = options;
   let destroyed = false;
   let revealed = false;
   let config = null;
   let svgEl = null;
-  const guessByX = /* @__PURE__ */ new Map();
+  const trail = /* @__PURE__ */ new Map();
   let cleanupPointerEvents = null;
+  let activePointer = null;
   function buildHatchPattern(id, color) {
     const pattern = document.createElementNS(SVG_NS, "pattern");
     pattern.setAttribute("id", id);
@@ -3219,11 +3238,12 @@ function createYouDrawIt(options) {
     guessPath.setAttribute("pointer-events", "none");
     group.appendChild(guessPath);
     if (!revealed) {
+      const overlayX = Math.max(area.x, fromX - START_SLOP_PX);
       const overlay = createSVGElement("rect");
       setAttrs(overlay, {
-        x: fromX,
+        x: overlayX,
         y: area.y,
-        width: regionWidth,
+        width: regionWidth + (fromX - overlayX),
         height: area.height,
         fill: "transparent"
       });
@@ -3240,97 +3260,146 @@ function createYouDrawIt(options) {
     }
     svg.appendChild(group);
   }
+  function regionWidthOf(cfg) {
+    return Math.max(0, cfg.area.x + cfg.area.width - cfg.fromX);
+  }
+  function pxToIndex(cfg, px) {
+    const w = regionWidthOf(cfg);
+    if (w === 0) return 0;
+    return (px - cfg.fromX) / w * TRAIL_RESOLUTION;
+  }
+  function indexToPx(cfg, index) {
+    return cfg.fromX + index / TRAIL_RESOLUTION * regionWidthOf(cfg);
+  }
   function redrawGuessPath() {
-    if (!svgEl) return;
+    if (!svgEl || !config) return;
     const path = svgEl.querySelector("[data-ydi-guess-path]");
     if (!path) return;
-    const points = Array.from(guessByX.entries()).map(([x, y]) => ({ x, y }));
-    path.setAttribute("d", buildLinearPath(points));
-  }
-  function snapToNearestSample(px) {
-    if (!config || config.samples.length === 0) return null;
-    let nearestPx = config.samples[0].px;
-    let best = Math.abs(nearestPx - px);
-    for (const s of config.samples) {
-      const d = Math.abs(s.px - px);
-      if (d < best) {
-        best = d;
-        nearestPx = s.px;
-      }
-    }
-    return nearestPx;
+    const cfg = config;
+    const keys = Array.from(trail.keys()).sort((a, b) => a - b);
+    const d = keys.map((i, n) => {
+      const cmd = n === 0 || i - keys[n - 1] > 1 ? "M" : "L";
+      return `${cmd}${round2(indexToPx(cfg, i))},${round2(dataToPixelY(trail.get(i)))}`;
+    }).join(" ");
+    path.setAttribute("d", d);
+    syncResetButton();
+  }
+  function clampX(px) {
+    if (!config) return px;
+    return Math.min(config.area.x + config.area.width, Math.max(config.fromX, px));
   }
   function clampY(py) {
     if (!config) return py;
     return Math.min(config.area.y + config.area.height, Math.max(config.area.y, py));
   }
+  function paintSegment(x0, y0, x1, y1) {
+    if (!config) return;
+    const i0 = pxToIndex(config, x0);
+    const i1 = pxToIndex(config, x1);
+    const lo = Math.max(0, Math.ceil(Math.min(i0, i1)));
+    const hi = Math.min(TRAIL_RESOLUTION, Math.floor(Math.max(i0, i1)));
+    const span = i1 - i0;
+    for (let i = lo; i <= hi; i++) {
+      const t = span === 0 ? 1 : (i - i0) / span;
+      trail.set(i, pixelYToData(y0 + t * (y1 - y0)));
+    }
+    const end = Math.min(TRAIL_RESOLUTION, Math.max(0, Math.round(i1)));
+    trail.set(end, pixelYToData(y1));
+  }
   function wirePointerEvents(svg) {
     const overlay = svg.querySelector("[data-ydi-overlay]");
     if (!overlay) return () => {
     };
-    let dragging = false;
-    const toSvgCoords = (clientX, clientY) => {
+    let last = null;
+    if (activePointer !== null) {
+      try {
+        overlay.setPointerCapture?.(activePointer);
+      } catch {
+        activePointer = null;
+      }
+    }
+    const toSvgPoint = (clientX, clientY) => {
       const svgRect = svg.getBoundingClientRect();
       const viewBox = svg.viewBox?.baseVal;
       const scaleX = viewBox?.width && svgRect.width ? viewBox.width / svgRect.width : 1;
       const scaleY = viewBox?.height && svgRect.height ? viewBox.height / svgRect.height : 1;
       return {
-        svgX: (clientX - svgRect.left) * scaleX,
-        svgY: (clientY - svgRect.top) * scaleY
+        x: clampX((clientX - svgRect.left) * scaleX),
+        y: clampY((clientY - svgRect.top) * scaleY)
       };
     };
-    const paintAt = (clientX, clientY) => {
-      const { svgX, svgY } = toSvgCoords(clientX, clientY);
-      const snapped = snapToNearestSample(svgX);
-      if (snapped === null) return;
-      guessByX.set(snapped, clampY(svgY));
-      redrawGuessPath();
+    const nearAnchor = (p) => {
+      if (!config?.anchor) return false;
+      if (p.x - config.fromX <= START_SLOP_PX) return true;
+      return config.samples.length > 0 && p.x <= config.samples[0].px;
     };
-    const handleMouseDown = (e) => {
-      const me = e;
-      dragging = true;
-      paintAt(me.clientX, me.clientY);
+    const endStroke = () => {
+      activePointer = null;
+      last = null;
     };
-    const handleMouseMove = (e) => {
-      if (!dragging) return;
-      const me = e;
-      paintAt(me.clientX, me.clientY);
+    const handleDown = (e) => {
+      const pe = e;
+      if (pe.button !== 0) return;
+      if (activePointer !== null && activePointer !== pe.pointerId && overlay.hasPointerCapture?.(activePointer)) {
+        return;
+      }
+      if (pe.cancelable) pe.preventDefault();
+      activePointer = pe.pointerId;
+      overlay.setPointerCapture?.(pe.pointerId);
+      live.textContent = "";
+      const p = toSvgPoint(pe.clientX, pe.clientY);
+      const anchor = config?.anchor;
+      if (trail.size === 0 && anchor && nearAnchor(p)) {
+        trail.set(0, pixelYToData(anchor.y));
+        if (p.x > anchor.x) {
+          paintSegment(anchor.x, anchor.y, p.x, p.y);
+          last = p;
+        } else {
+          last = { x: anchor.x, y: anchor.y };
+        }
+      } else {
+        paintSegment(p.x, p.y, p.x, p.y);
+        last = p;
+      }
+      redrawGuessPath();
     };
-    const handleMouseUp = () => {
-      dragging = false;
+    const handleMove = (e) => {
+      const pe = e;
+      if (activePointer !== pe.pointerId) return;
+      if (pe.buttons === 0) {
+        endStroke();
+        return;
+      }
+      if (pe.cancelable) pe.preventDefault();
+      const coalesced = pe.getCoalescedEvents?.() ?? [];
+      const events = coalesced.length > 0 ? coalesced : [pe];
+      for (const ev of events) {
+        const p = toSvgPoint(ev.clientX, ev.clientY);
+        const from = last ?? p;
+        paintSegment(from.x, from.y, p.x, p.y);
+        last = p;
+      }
+      redrawGuessPath();
     };
-    const handleTouchStart = (e) => {
-      const te = e;
-      if (te.touches.length === 0) return;
-      if (te.cancelable) te.preventDefault();
-      dragging = true;
-      paintAt(te.touches[0].clientX, te.touches[0].clientY);
+    const handleUp = (e) => {
+      const pe = e;
+      if (activePointer !== pe.pointerId) return;
+      endStroke();
     };
-    const handleTouchMove = (e) => {
-      if (!dragging) return;
-      const te = e;
-      if (te.touches.length === 0) return;
-      if (te.cancelable) te.preventDefault();
-      paintAt(te.touches[0].clientX, te.touches[0].clientY);
+    const handleLostCapture = () => {
+      endStroke();
     };
-    const handleTouchEnd = () => {
-      dragging = false;
-    };
-    overlay.addEventListener("mousedown", handleMouseDown);
-    document.addEventListener("mousemove", handleMouseMove);
-    document.addEventListener("mouseup", handleMouseUp);
-    overlay.addEventListener("touchstart", handleTouchStart, { passive: false });
-    overlay.addEventListener("touchmove", handleTouchMove, { passive: false });
-    overlay.addEventListener("touchend", handleTouchEnd);
-    overlay.addEventListener("touchcancel", handleTouchEnd);
+    overlay.addEventListener("pointerdown", handleDown);
+    overlay.addEventListener("pointermove", handleMove);
+    overlay.addEventListener("pointerup", handleUp);
+    overlay.addEventListener("pointercancel", handleUp);
+    overlay.addEventListener("lostpointercapture", handleLostCapture);
     return () => {
-      overlay.removeEventListener("mousedown", handleMouseDown);
-      document.removeEventListener("mousemove", handleMouseMove);
-      document.removeEventListener("mouseup", handleMouseUp);
-      overlay.removeEventListener("touchstart", handleTouchStart);
-      overlay.removeEventListener("touchmove", handleTouchMove);
-      overlay.removeEventListener("touchend", handleTouchEnd);
-      overlay.removeEventListener("touchcancel", handleTouchEnd);
+      overlay.removeEventListener("pointerdown", handleDown);
+      overlay.removeEventListener("pointermove", handleMove);
+      overlay.removeEventListener("pointerup", handleUp);
+      overlay.removeEventListener("pointercancel", handleUp);
+      overlay.removeEventListener("lostpointercapture", handleLostCapture);
     };
   }
   const root = document.createElement("div");
@@ -3339,10 +3408,21 @@ function createYouDrawIt(options) {
   root.style.position = "absolute";
   const prompt = document.createElement("div");
   prompt.className = "oc-ydi-prompt";
+  const resetButton = document.createElement("button");
+  resetButton.type = "button";
+  resetButton.className = "oc-ydi-reset-button";
+  resetButton.hidden = true;
   const revealButton = document.createElement("button");
   revealButton.type = "button";
   revealButton.className = "oc-ydi-reveal-button";
-  root.append(prompt, revealButton);
+  const actions = document.createElement("div");
+  actions.className = "oc-ydi-actions";
+  actions.append(resetButton, revealButton);
+  const live = document.createElement("span");
+  live.className = "oc-sr-only";
+  applySrOnlyStyles(live);
+  live.setAttribute("aria-live", "polite");
+  root.append(prompt, actions, live);
   container.style.position = container.style.position || "relative";
   container.appendChild(root);
   function reduceMotion() {
@@ -3360,14 +3440,48 @@ function createYouDrawIt(options) {
     const t = (py - inv.topPixel) / span;
     return inv.topData + t * (inv.bottomData - inv.topData);
   }
+  function dataToPixelY(value) {
+    if (!config) return value;
+    const inv = config.yInvert;
+    if (!inv) {
+      const area = config.area;
+      return area.y + (1 - value) * area.height;
+    }
+    const dataSpan = inv.bottomData - inv.topData;
+    if (dataSpan === 0) return inv.topPixel;
+    const t = (value - inv.topData) / dataSpan;
+    return inv.topPixel + t * (inv.bottomPixel - inv.topPixel);
+  }
   function getGuessData() {
-    if (!config) return [];
-    const valueByPx = new Map(config.samples.map((s) => [s.px, s.xValue]));
-    return Array.from(guessByX.entries()).sort((a, b) => a[0] - b[0]).map(([px, py]) => ({ x: valueByPx.get(px) ?? px, y: pixelYToData(py) }));
+    if (!config || trail.size === 0) return [];
+    const cfg = config;
+    const keys = Array.from(trail.keys()).sort((a, b) => a - b);
+    const first = keys[0];
+    const lastKey = keys[keys.length - 1];
+    const out = [];
+    for (const sample of cfg.samples) {
+      const i = pxToIndex(cfg, sample.px);
+      if (i < first - 0.5 || i > lastKey + 0.5) continue;
+      let hiPos = keys.findIndex((k) => k >= i);
+      if (hiPos === -1) hiPos = keys.length - 1;
+      const loPos = hiPos > 0 && keys[hiPos] > i ? hiPos - 1 : hiPos;
+      const k0 = keys[loPos];
+      const k1 = keys[hiPos];
+      if (k1 - k0 > 1) continue;
+      const v0 = trail.get(k0);
+      const v1 = trail.get(k1);
+      const t = k1 === k0 ? 0 : (i - k0) / (k1 - k0);
+      out.push({ x: sample.xValue, y: v0 + t * (v1 - v0) });
+    }
+    return out;
+  }
+  function syncResetButton() {
+    resetButton.hidden = revealed || trail.size === 0;
   }
   function doReveal() {
     if (destroyed || revealed || !svgEl || !config) return;
     revealed = true;
+    activePointer = null;
     const clipRect = svgEl.querySelector("[data-ydi-clip-rect]");
     if (clipRect) {
       if (reduceMotion()) {
@@ -3386,9 +3500,30 @@ function createYouDrawIt(options) {
     root.classList.add("oc-ydi-revealed");
     prompt.textContent = "";
     revealButton.disabled = true;
+    syncResetButton();
     onReveal?.(getGuessData());
   }
+  function doReset() {
+    if (destroyed) return;
+    revealed = false;
+    activePointer = null;
+    trail.clear();
+    revealButton.disabled = false;
+    root.classList.remove("oc-ydi-revealed");
+    syncResetButton();
+    if (config && svgEl) {
+      render(config, svgEl);
+      prompt.textContent = config.prompt;
+      cleanupPointerEvents?.();
+      cleanupPointerEvents = wirePointerEvents(svgEl);
+    }
+  }
   revealButton.addEventListener("click", doReveal);
+  resetButton.addEventListener("click", () => {
+    doReset();
+    revealButton.focus();
+    live.textContent = "Drawing cleared";
+  });
   return {
     update(cfg, svg) {
       if (destroyed) return;
@@ -3403,6 +3538,9 @@ function createYouDrawIt(options) {
       revealButton.setAttribute("aria-label", cfg.revealLabel);
       revealButton.style.minHeight = `${MIN_TOUCH_TARGET}px`;
       revealButton.disabled = revealed;
+      resetButton.textContent = cfg.resetLabel;
+      resetButton.style.minHeight = `${MIN_TOUCH_TARGET}px`;
+      syncResetButton();
       if (revealed) root.classList.add("oc-ydi-revealed");
       else root.classList.remove("oc-ydi-revealed");
       const viewBox = svg.viewBox?.baseVal;
@@ -3421,6 +3559,7 @@ function createYouDrawIt(options) {
       }
     },
     hide() {
+      activePointer = null;
       root.style.display = "none";
       svgEl?.querySelector("[data-you-draw-it]")?.remove();
       cleanupPointerEvents?.();
@@ -3430,17 +3569,7 @@ function createYouDrawIt(options) {
       doReveal();
     },
     reset() {
-      if (destroyed) return;
-      revealed = false;
-      guessByX.clear();
-      revealButton.disabled = false;
-      root.classList.remove("oc-ydi-revealed");
-      if (config && svgEl) {
-        render(config, svgEl);
-        prompt.textContent = config.prompt;
-        cleanupPointerEvents?.();
-        cleanupPointerEvents = wirePointerEvents(svgEl);
-      }
+      doReset();
     },
     get isRevealed() {
       return revealed;
@@ -4140,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) {
@@ -4178,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));
@@ -4455,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) {
@@ -4470,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));
@@ -4843,21 +4972,6 @@ function wireLegendInteraction(svg, _layout, toggleSeries, onLegendToggle, onEdi
 
 // src/interactions/selection.ts
 import { elementRef as elementRef2 } from "@opendata-ai/openchart-core";
-
-// src/dom-helpers.ts
-function applySrOnlyStyles(el) {
-  el.style.position = "absolute";
-  el.style.width = "1px";
-  el.style.height = "1px";
-  el.style.padding = "0";
-  el.style.margin = "-1px";
-  el.style.overflow = "clip";
-  el.style.clipPath = "inset(50%)";
-  el.style.whiteSpace = "nowrap";
-  el.style.borderWidth = "0";
-}
-
-// src/interactions/selection.ts
 function findElementByRef(svg, ref) {
   switch (ref.type) {
     case "annotation": {
@@ -6889,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;
@@ -7410,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;
@@ -7438,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 {
@@ -7460,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");
@@ -7660,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({
@@ -7668,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) {
@@ -7728,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) {
@@ -7779,6 +8450,7 @@ function createGeoMap(container, spec, options) {
       }
     }
     isFirstRender = false;
+    syncZoomController(oldSvgHadFocus);
   }
   function update(newSpec) {
     currentSpec = newSpec;
@@ -7791,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, {
@@ -7820,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();
@@ -7835,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 "";
@@ -7863,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();
@@ -7948,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);
     }
   };
 }
@@ -7994,4 +8665,4 @@ export {
   scrubCamera,
   createGeoMap
 };
-//# sourceMappingURL=chunk-W3WPGHYV.js.map
+//# sourceMappingURL=chunk-QBTRAQAX.js.map