@opendata-ai/openchart-vanilla 8.9.0 → 8.9.1

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

@@ -16,8 +16,9 @@ import {
   renderSingleMark,
   resolveMarkFill,
   resolvePatternFill,
-  stampAnimationVars
-} from "./chunk-TP3GCWCO.js";
+  stampAnimationVars,
+  updateAnnotationGeometry
+} from "./chunk-APMUBW72.js";
 import {
   SVG_NS,
   createSVGElement,
@@ -37,11 +38,12 @@ import {
   prefersReducedMotion,
   resolveDarkMode,
   resolveEase
-} from "./chunk-2OJZBMXM.js";
+} from "./chunk-REH5UQCL.js";
 import {
   resolvedSurface,
-  stampThemeProperties
-} from "./chunk-NG7CVCI2.js";
+  stampThemeProperties,
+  warnDeprecated
+} from "./chunk-UC4IHEUO.js";
 
 // src/scatter-canvas/renderer.ts
 var TWO_PI = Math.PI * 2;
@@ -548,8 +550,7 @@ function hasAnnotationChanged(prevLayout, nextLayout) {
     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;
+    if (JSON.stringify(p) !== JSON.stringify(n)) return true;
   }
   return false;
 }
@@ -920,7 +921,7 @@ import { buildAreaPath as buildAreaPath2, buildLinePath as buildLinePath2, EXIT_
 
 // src/transition/apply.ts
 import { sampleMotion as sampleMotion2 } from "@opendata-ai/openchart-core";
-import { buildArcPath } from "@opendata-ai/openchart-engine";
+import { buildArcPath, interpolateAnnotationGeometry } from "@opendata-ai/openchart-engine";
 
 // src/transition/canvas-tweens.ts
 import { sampleMotion } from "@opendata-ai/openchart-core";
@@ -986,22 +987,19 @@ function buildAnnotationTweens(svg, prevLayout, nextLayout, tweens) {
         tweenType: "annotation",
         kind: "enter",
         el,
-        fromDx: 0,
-        fromDy: 0,
         fromOpacity: 0,
         toOpacity: 1
       });
       continue;
     }
-    const dx = (before.label?.x ?? 0) - (next[i].label?.x ?? 0);
-    const dy = (before.label?.y ?? 0) - (next[i].label?.y ?? 0);
-    if (dx === 0 && dy === 0) continue;
+    if (JSON.stringify(before) === JSON.stringify(next[i])) continue;
     tweens.push({
       tweenType: "annotation",
       kind: "update",
       el,
-      fromDx: dx,
-      fromDy: dy
+      before,
+      after: next[i],
+      background: nextLayout.theme.colors.neutral.surface
     });
   }
 }
@@ -1796,11 +1794,12 @@ function applyTweenState(tw, elapsed, update, exit, enterDelay, enterDuration) {
       break;
     }
     case "annotation": {
-      const dx = tw.fromDx * (1 - eased);
-      const dy = tw.fromDy * (1 - eased);
-      if (dx !== 0 || dy !== 0) {
-        tw.el.setAttribute("transform", `translate(${dx} ${dy})`);
-      }
+      if (tw.before && tw.after)
+        updateAnnotationGeometry(
+          tw.el,
+          interpolateAnnotationGeometry(tw.before, tw.after, eased),
+          tw.background
+        );
       break;
     }
   }
@@ -1892,6 +1891,7 @@ function snapTweenToFinal(tw) {
       tw.el.setAttribute(tw.attr, tw.to);
       break;
     case "annotation":
+      if (tw.after) updateAnnotationGeometry(tw.el, tw.after, tw.background);
       tw.el.removeAttribute("transform");
       break;
   }
@@ -3654,6 +3654,394 @@ function createYouDrawIt(options) {
   };
 }
 
+// src/interactions/annotation-nudges.ts
+import { annotationSource as annotationSource3 } from "@opendata-ai/openchart-core";
+import {
+  createAnnotationEditContext,
+  inverseLabelPlacement,
+  previewAnnotationMove
+} from "@opendata-ai/openchart-engine";
+
+// src/interactions/selection.ts
+import { elementRef } from "@opendata-ai/openchart-core";
+
+// src/interactions/edit-transactions.ts
+import { annotationSource } from "@opendata-ai/openchart-core";
+import { annotationSource as annotationSource2 } from "@opendata-ai/openchart-core";
+var object = (value) => value !== null && typeof value === "object" && !Array.isArray(value) ? value : void 0;
+function editToTransaction(spec, edit, revision) {
+  const root = object(spec) ?? {};
+  const source = annotationSource2(spec);
+  const ops = [];
+  const set = (path, value, expect) => ops.push({ op: "set", path, value, ...expect ? { expect } : {} });
+  if (edit.type === "legend-toggle") return null;
+  if (edit.type === "add") {
+    ops.push({ op: "add", path: `${source.path}/-`, value: edit.annotation });
+  } else if ("element" in edit && edit.element.type === "annotation") {
+    const expectedPath = `${source.path}/${edit.element.index}`;
+    if (edit.element.path !== void 0 && edit.element.path !== expectedPath && !edit.element.path.startsWith(`${expectedPath}/`))
+      return null;
+    const annotation = source.annotations[edit.element.index];
+    if (!annotation || edit.element.id !== void 0 && annotation.id !== edit.element.id)
+      return null;
+    const authored = "annotation" in edit ? edit.annotation : annotation;
+    const expected = {
+      type: authored.type,
+      text: authored.type === "text" ? authored.text : authored.label ?? "",
+      ...authored.id !== void 0 ? { id: authored.id } : {}
+    };
+    if (authored.type !== "text") expected.text = void 0;
+    const path = `${source.path}/${edit.element.index}`;
+    switch (edit.type) {
+      case "annotation":
+        if (edit.anchor !== void 0) set(`${path}/anchor`, edit.anchor, expected);
+        set(`${path}/offset`, edit.offset, expected);
+        if (edit.responsive !== void 0) set(`${path}/responsive`, edit.responsive, expected);
+        break;
+      case "annotation-connector":
+        set(
+          `${path}/connectorOffset`,
+          {
+            ...authored.type === "text" ? authored.connectorOffset : {},
+            [edit.endpoint]: edit.offset
+          },
+          expected
+        );
+        break;
+      case "range-label":
+      case "refline-label":
+        set(`${path}/labelOffset`, edit.labelOffset, expected);
+        break;
+      case "annotation-anchor":
+        set(`${path}/x`, edit.x, expected);
+        set(`${path}/y`, edit.y, expected);
+        break;
+      case "text-edit":
+        set(`${path}/${annotation.type === "text" ? "text" : "label"}`, edit.newText, expected);
+        break;
+      case "delete":
+        ops.push({ op: "remove", path, expect: expected });
+        break;
+    }
+  } else if (edit.type === "chrome" || "element" in edit && edit.element.type === "chrome") {
+    const key = edit.type === "chrome" ? edit.key : edit.element.type === "chrome" ? edit.element.key : "title";
+    const chrome = object(root.chrome);
+    const sugar = !Object.hasOwn(chrome ?? {}, key) && Object.hasOwn(root, key);
+    const path = sugar ? `/${key}` : `/chrome/${key}`;
+    const old = sugar ? root[key] : chrome?.[key];
+    if (edit.type === "delete") {
+      ops.push({ op: "remove", path });
+    } else {
+      const text = edit.type === "text-edit" ? edit.newText : edit.type === "chrome" ? edit.text : "";
+      const value = edit.type === "text-edit" && sugar && typeof old === "string" ? text : {
+        ...object(old) ?? {},
+        text,
+        ...edit.type === "chrome" ? { offset: edit.offset } : {}
+      };
+      ops.push({ op: chrome || sugar ? "set" : "add", path, value });
+    }
+  } else if (edit.type === "legend") {
+    ops.push({
+      op: "add",
+      path: "/legend",
+      value: { ...object(root.legend) ?? {}, offset: edit.offset }
+    });
+  } else if (edit.type === "delete" && edit.element.type === "legend") {
+    ops.push({
+      op: "add",
+      path: "/legend",
+      value: { ...object(root.legend) ?? {}, show: false }
+    });
+  } else if (edit.type === "series-label") {
+    const key = edit.series.replace(/~/g, "~0").replace(/\//g, "~1");
+    ops.push({ op: "add", path: `/labels/offsets/${key}`, value: edit.offset });
+  }
+  return ops.length ? { ...revision !== void 0 ? { revision } : {}, ops } : null;
+}
+
+// src/interactions/selection.ts
+function findElementByRef(svg, ref) {
+  switch (ref.type) {
+    case "annotation": {
+      const matches = [...svg.querySelectorAll("[data-annotation-index]")].filter(
+        (el) => Number(el.getAttribute("data-annotation-index")) === ref.index && (ref.id === void 0 || el.getAttribute("data-annotation-id") === ref.id) && (ref.path === void 0 || ref.path === (el.getAttribute("data-annotation-path") ?? `/annotations/${ref.index}`) || ref.path.startsWith(
+          `${el.getAttribute("data-annotation-path") ?? `/annotations/${ref.index}`}/`
+        )) && (ref.facetInstance === void 0 || el.getAttribute("data-facet-instance") === ref.facetInstance)
+      );
+      return matches[0] ?? null;
+    }
+    case "chrome":
+      return svg.querySelector(`[data-chrome-key="${ref.key}"]`);
+    case "series-label":
+      return svg.querySelector(`.oc-mark-label[data-series="${ref.series}"]`);
+    // The editable legend is the color legend. Excluding the size legend
+    // explicitly rather than relying on it rendering second: `querySelector`
+    // takes the first match, so a bare `.oc-legend` would silently retarget
+    // (and drag) the wrong legend if render order ever changed.
+    case "legend":
+      return svg.querySelector(".oc-legend:not(.oc-legend--size)");
+    case "legend-entry":
+      return svg.querySelector(
+        `.oc-legend:not(.oc-legend--size) [data-legend-index="${ref.index}"]`
+      );
+  }
+}
+function encodePointerToken(token) {
+  return token.replace(/~/g, "~0").replace(/\//g, "~1");
+}
+function buildElementRef(element, _specAnnotations) {
+  const annotationEl = element.closest("[data-annotation-index]");
+  if (annotationEl) {
+    const index = Number(annotationEl.getAttribute("data-annotation-index"));
+    const id = annotationEl.getAttribute("data-annotation-id") ?? void 0;
+    return {
+      ...elementRef.annotation(
+        index,
+        id,
+        annotationEl.getAttribute("data-annotation-path") ?? `/annotations/${index}`
+      ),
+      ...annotationEl.hasAttribute("data-facet-instance") ? { facetInstance: annotationEl.getAttribute("data-facet-instance") } : {}
+    };
+  }
+  const chromeEl = element.closest("[data-chrome-key]");
+  if (chromeEl) {
+    const key = chromeEl.getAttribute("data-chrome-key");
+    if (key) return elementRef.chrome(key, `/chrome/${key}`);
+  }
+  const seriesLabelEl = element.closest(".oc-mark-label[data-series]");
+  if (seriesLabelEl) {
+    const series = seriesLabelEl.getAttribute("data-series");
+    if (series)
+      return elementRef.seriesLabel(series, `/labels/offsets/${encodePointerToken(series)}`);
+  }
+  const legendEntryEl = element.closest("[data-legend-index]");
+  if (legendEntryEl) {
+    const index = Number(legendEntryEl.getAttribute("data-legend-index"));
+    const series = legendEntryEl.getAttribute("data-legend-label") ?? "";
+    return elementRef.legendEntry(series, index);
+  }
+  const legendEl = element.closest(".oc-legend");
+  if (legendEl && !legendEl.classList.contains("oc-legend--size"))
+    return elementRef.legend("/legend");
+  return null;
+}
+function getEditableElements(spec, layout) {
+  const refs = [];
+  const chromeKeys = ["title", "subtitle", "source", "byline", "footer"];
+  for (const key of chromeKeys) {
+    if (layout.chrome[key]) {
+      refs.push(elementRef.chrome(key));
+    }
+  }
+  const { annotations, path } = annotationSource(spec);
+  for (let i = 0; i < annotations.length; i++) {
+    const panels = layout.facet?.panels;
+    if (panels) {
+      for (const panel of panels) {
+        if (panel.annotations.some((a) => a.specIndex === i))
+          refs.push({
+            ...elementRef.annotation(i, annotations[i].id, `${path}/${i}`),
+            facetInstance: panel.key
+          });
+      }
+    } else if (layout.annotations.some((a, j) => (a.specIndex ?? j) === i))
+      refs.push(elementRef.annotation(i, annotations[i].id, `${path}/${i}`));
+  }
+  const seriesLabels = [];
+  for (const mark of layout.marks) {
+    if (mark.type === "line" && mark.label?.visible && mark.seriesKey) {
+      seriesLabels.push(mark.seriesKey);
+    }
+  }
+  seriesLabels.sort();
+  for (const series of seriesLabels) {
+    refs.push(elementRef.seriesLabel(series));
+  }
+  if ("entries" in layout.legend && layout.legend.entries.length > 0) {
+    refs.push(elementRef.legend());
+  }
+  return refs;
+}
+function isTextEditable(ref, specAnnotations) {
+  if (ref.type === "chrome") return true;
+  if (ref.type === "annotation") {
+    const annotation = specAnnotations[ref.index];
+    return annotation?.type === "text";
+  }
+  return false;
+}
+function getElementText(ref, spec) {
+  if (ref.type === "chrome") {
+    const chromeConfig = "chrome" in spec ? spec.chrome : void 0;
+    const entry = chromeConfig?.[ref.key] ?? spec[ref.key];
+    if (typeof entry === "string") return entry;
+    if (typeof entry === "object" && entry !== null && "text" in entry) {
+      return entry.text;
+    }
+    return null;
+  }
+  if (ref.type === "annotation") {
+    const { annotations } = annotationSource(spec);
+    const annotation = annotations[ref.index];
+    if (annotation?.type === "text") return annotation.text ?? null;
+    if (annotation?.label) return annotation.label;
+    return null;
+  }
+  return null;
+}
+function refsEqual(a, b) {
+  if (a === null || b === null) return a === b;
+  if (a.type !== b.type) return false;
+  switch (a.type) {
+    case "annotation": {
+      const bAnno = b;
+      if (a.facetInstance !== bAnno.facetInstance) return false;
+      if (a.id && bAnno.id) return a.id === bAnno.id && a.index === bAnno.index;
+      return a.index === bAnno.index;
+    }
+    case "chrome":
+      return a.key === b.key;
+    case "series-label":
+      return a.series === b.series;
+    case "legend":
+      return true;
+    case "legend-entry": {
+      const bEntry = b;
+      return a.index === bEntry.index && a.series === bEntry.series;
+    }
+  }
+}
+function renderSelectionOverlay(svg, ref, layout) {
+  const target = findElementByRef(svg, ref);
+  if (!target) return null;
+  const bbox = target.getBBox();
+  const padding = 4;
+  const accentColor = layout.theme.colors.categorical?.[0] ?? "#4f46e5";
+  const g = document.createElementNS("http://www.w3.org/2000/svg", "g");
+  g.setAttribute("class", "oc-selection-overlay");
+  const rect = document.createElementNS("http://www.w3.org/2000/svg", "rect");
+  rect.setAttribute("x", String(bbox.x - padding));
+  rect.setAttribute("y", String(bbox.y - padding));
+  rect.setAttribute("width", String(bbox.width + padding * 2));
+  rect.setAttribute("height", String(bbox.height + padding * 2));
+  rect.setAttribute("rx", "3");
+  rect.setAttribute("fill", "transparent");
+  rect.setAttribute("stroke", accentColor);
+  rect.setAttribute("stroke-width", "1.5");
+  rect.setAttribute("pointer-events", "none");
+  g.appendChild(rect);
+  svg.appendChild(g);
+  return g;
+}
+function createScreenReaderTable(layout, container) {
+  const data = layout.a11y.dataTableFallback;
+  if (!data || data.length === 0) return null;
+  const wrapper = document.createElement("div");
+  wrapper.className = "oc-sr-only";
+  applySrOnlyStyles(wrapper);
+  const table = document.createElement("table");
+  table.setAttribute("role", "table");
+  table.setAttribute("aria-label", `Data table: ${layout.a11y.altText}`);
+  const totalRows = layout.a11y.totalRows;
+  if (totalRows != null) {
+    const caption = document.createElement("caption");
+    caption.textContent = `Showing first ${(data.length - 1).toLocaleString()} of ${totalRows.toLocaleString()} rows; full data via CSV export`;
+    table.appendChild(caption);
+  }
+  if (data.length > 0) {
+    const thead = document.createElement("thead");
+    const headerRow = document.createElement("tr");
+    const headers = data[0];
+    for (const header of headers) {
+      const th = document.createElement("th");
+      th.textContent = String(header ?? "");
+      th.setAttribute("scope", "col");
+      headerRow.appendChild(th);
+    }
+    thead.appendChild(headerRow);
+    table.appendChild(thead);
+  }
+  if (data.length > 1) {
+    const tbody = document.createElement("tbody");
+    for (let i = 1; i < data.length; i++) {
+      const tr = document.createElement("tr");
+      const cells = data[i];
+      for (const cell of cells) {
+        const td = document.createElement("td");
+        td.textContent = String(cell ?? "");
+        tr.appendChild(td);
+      }
+      tbody.appendChild(tr);
+    }
+    table.appendChild(tbody);
+  }
+  wrapper.appendChild(table);
+  container.appendChild(wrapper);
+  return wrapper;
+}
+
+// src/interactions/annotation-nudges.ts
+function createAnnotationNudges(read, emit) {
+  let pending;
+  let timer;
+  const flush = () => {
+    if (timer !== void 0) clearTimeout(timer);
+    timer = void 0;
+    const batch = pending;
+    pending = void 0;
+    if (!batch) return;
+    const preview = previewAnnotationMove(batch.ctx, batch.ref, batch);
+    const placement = inverseLabelPlacement(batch.ctx, batch.ref, preview.bounds);
+    const { svg, layout } = read();
+    const target = svg && findElementByRef(svg, batch.ref);
+    if (target)
+      updateAnnotationGeometry(target, batch.original, layout.theme.colors.neutral.surface);
+    emit({
+      type: "annotation",
+      element: batch.ref,
+      annotation: batch.authored,
+      offset: placement.offset,
+      anchor: placement.anchor,
+      responsive: false
+    });
+  };
+  const keydown = (event) => {
+    if (!event.altKey || !["ArrowLeft", "ArrowRight", "ArrowUp", "ArrowDown"].includes(event.key))
+      return false;
+    const { layout, spec, svg, selected } = read();
+    if (!svg || selected?.type !== "annotation") return false;
+    const authored = annotationSource3(spec).annotations[selected.index];
+    if (authored?.type !== "text") return false;
+    if (!pending) {
+      const ctx = createAnnotationEditContext(layout, spec);
+      try {
+        previewAnnotationMove(ctx, selected, { dx: 0, dy: 0 });
+      } catch {
+        return false;
+      }
+      const annotations = selected.facetInstance !== void 0 ? layout.facet?.panels.find((panel) => panel.key === selected.facetInstance)?.annotations : layout.annotations;
+      const original = annotations?.find((annotation) => annotation.specIndex === selected.index);
+      if (!original) return false;
+      pending = { ctx, ref: selected, authored, original, dx: 0, dy: 0 };
+    }
+    event.preventDefault();
+    const step = event.shiftKey ? 10 : 1;
+    pending.dx += event.key === "ArrowLeft" ? -step : event.key === "ArrowRight" ? step : 0;
+    pending.dy += event.key === "ArrowUp" ? -step : event.key === "ArrowDown" ? step : 0;
+    const target = findElementByRef(svg, pending.ref);
+    if (target)
+      updateAnnotationGeometry(
+        target,
+        previewAnnotationMove(pending.ctx, pending.ref, pending),
+        layout.theme.colors.neutral.surface
+      );
+    if (timer !== void 0) clearTimeout(timer);
+    timer = setTimeout(flush, 120);
+    return true;
+  };
+  return { keydown, flush };
+}
+
 // src/transition/reconcile.ts
 function identity(element, index) {
   for (const attr of ["data-key", "data-label-key", "data-endpoint-key", "data-tick-value"]) {
@@ -3727,7 +4115,12 @@ function sampleLayout(layout, snapshot) {
 }
 
 // src/mount.ts
-import { cssTokenDefault, isGraphSpec, isLayerSpec } from "@opendata-ai/openchart-core";
+import {
+  applyEditTransaction,
+  cssTokenDefault,
+  isGraphSpec,
+  isLayerSpec
+} from "@opendata-ai/openchart-core";
 import {
   compileChart,
   compileLayer,
@@ -3864,14 +4257,22 @@ function wireChartEvents(svg, layout, specAnnotations, handlers) {
     }
   }
   if (handlers.onAnnotationClick) {
-    const annotationElements = svg.querySelectorAll(".oc-annotation");
+    const annotationElements = svg.querySelectorAll(".oc-annotation, [data-note-spec-index]");
     for (let i = 0; i < annotationElements.length; i++) {
       const el = annotationElements[i];
-      const specAnnotation = specAnnotations[i];
+      const noteIndex = el.getAttribute("data-note-spec-index");
+      const ref = noteIndex !== null ? {
+        type: "annotation",
+        index: Number(noteIndex),
+        id: el.getAttribute("data-note-id") ?? void 0,
+        path: el.getAttribute("data-note-path") ?? `/annotations/${noteIndex}`
+      } : buildElementRef(el, specAnnotations);
+      if (!ref || ref.type !== "annotation") continue;
+      const specAnnotation = specAnnotations[ref.index];
       if (!specAnnotation) continue;
       const handleClick = (e) => {
         const mouseEvent = e;
-        handlers.onAnnotationClick(specAnnotation, mouseEvent);
+        handlers.onAnnotationClick(specAnnotation, mouseEvent, ref);
       };
       el.addEventListener("click", handleClick);
       cleanups.push(() => el.removeEventListener("click", handleClick));
@@ -4155,152 +4556,123 @@ function wireVoronoiTooltipEvents(svg, layout, tooltipManager, emphasis) {
 // src/interactions/drag-handler.ts
 function createDragHandler(config) {
   const { element, svg, onMove, onEnd, setDragging, threshold = 3 } = config;
-  const cleanups = [];
-  let activeDocMouseMove = null;
-  let activeDocMouseUp = null;
-  let activeDocTouchMove = null;
-  let activeDocTouchEnd = null;
-  let activeDocTouchCancel = null;
-  function getScale2() {
-    const viewBox = svg.viewBox?.baseVal;
-    const svgRect = svg.getBoundingClientRect();
-    return {
-      scaleX: viewBox?.width && svgRect.width ? viewBox.width / svgRect.width : 1,
-      scaleY: viewBox?.height && svgRect.height ? viewBox.height / svgRect.height : 1
-    };
-  }
+  let cancelActive;
   function startDrag(startX, startY) {
+    cancelActive?.();
+    config.onStart?.();
     setDragging(true);
-    const { scaleX, scaleY } = getScale2();
+    const viewBox = svg.viewBox?.baseVal;
+    const rect = svg.getBoundingClientRect();
+    const scaleX = viewBox?.width && rect.width ? viewBox.width / rect.width : 1;
+    const scaleY = viewBox?.height && rect.height ? viewBox.height / rect.height : 1;
     element.style.cursor = "grabbing";
     svg.style.userSelect = "none";
-    const handleMove = (clientX, clientY) => {
-      const dx = (clientX - startX) * scaleX;
-      const dy = (clientY - startY) * scaleY;
-      onMove(dx, dy);
+    let frame;
+    let dx = 0;
+    let dy = 0;
+    let active = true;
+    const preview = () => {
+      frame = void 0;
+      if (active) onMove(dx, dy);
     };
-    const cleanupDocListeners = () => {
-      if (activeDocMouseMove) {
-        document.removeEventListener("mousemove", activeDocMouseMove);
-        activeDocMouseMove = null;
-      }
-      if (activeDocMouseUp) {
-        document.removeEventListener("mouseup", activeDocMouseUp);
-        activeDocMouseUp = null;
-      }
-      if (activeDocTouchMove) {
-        document.removeEventListener("touchmove", activeDocTouchMove);
-        activeDocTouchMove = null;
-      }
-      if (activeDocTouchEnd) {
-        document.removeEventListener("touchend", activeDocTouchEnd);
-        activeDocTouchEnd = null;
-      }
-      if (activeDocTouchCancel) {
-        document.removeEventListener("touchcancel", activeDocTouchCancel);
-        activeDocTouchCancel = null;
-      }
+    const move = (x, y) => {
+      dx = (x - startX) * scaleX;
+      dy = (y - startY) * scaleY;
+      if (!config.animationFrame) preview();
+      else if (frame === void 0) frame = requestAnimationFrame(preview);
     };
-    const handleEnd = (clientX, clientY) => {
-      const dx = (clientX - startX) * scaleX;
-      const dy = (clientY - startY) * scaleY;
-      const moved = Math.abs(dx) > threshold || Math.abs(dy) > threshold;
-      onEnd(dx, dy, moved);
-      if (moved) {
-        element.addEventListener(
-          "click",
-          (clickE) => {
-            clickE.stopPropagation();
-          },
-          { capture: true, once: true }
-        );
-      }
+    const detach = () => {
+      active = false;
+      if (frame !== void 0) cancelAnimationFrame(frame);
+      frame = void 0;
+      document.removeEventListener("mousemove", mouseMove);
+      document.removeEventListener("mouseup", mouseUp);
+      document.removeEventListener("touchmove", touchMove);
+      document.removeEventListener("touchend", touchEnd);
+      document.removeEventListener("touchcancel", cancel);
+      document.removeEventListener("pointercancel", cancel);
+      document.removeEventListener("keydown", keyDown, true);
+      svg.removeEventListener("oc-cancel-drag", cancel);
       element.style.cursor = "grab";
       svg.style.userSelect = "";
-      cleanupDocListeners();
+      cancelActive = void 0;
+    };
+    const cancel = () => {
+      if (!active) return;
+      detach();
+      config.onCancel?.();
       setDragging(false);
     };
-    const onMouseMove = (moveEvent) => {
-      handleMove(moveEvent.clientX, moveEvent.clientY);
+    const end = (x, y) => {
+      if (!active) return;
+      dx = (x - startX) * scaleX;
+      dy = (y - startY) * scaleY;
+      const moved = Math.abs(dx) > threshold || Math.abs(dy) > threshold;
+      detach();
+      onEnd(dx, dy, moved);
+      if (moved)
+        element.addEventListener("click", (event) => event.stopPropagation(), {
+          capture: true,
+          once: true
+        });
+      setDragging(false);
     };
-    const onMouseUp = (upEvent) => {
-      handleEnd(upEvent.clientX, upEvent.clientY);
+    const mouseMove = (event) => move(event.clientX, event.clientY);
+    const mouseUp = (event) => end(event.clientX, event.clientY);
+    const touchMove = (event) => {
+      if (!event.touches.length) return;
+      event.preventDefault();
+      move(event.touches[0].clientX, event.touches[0].clientY);
     };
-    document.addEventListener("mousemove", onMouseMove);
-    document.addEventListener("mouseup", onMouseUp);
-    activeDocMouseMove = onMouseMove;
-    activeDocMouseUp = onMouseUp;
-    const onTouchMove = (moveEvent) => {
-      if (moveEvent.touches.length > 0) {
-        moveEvent.preventDefault();
-        handleMove(moveEvent.touches[0].clientX, moveEvent.touches[0].clientY);
-      }
+    const touchEnd = (event) => {
+      const touch = event.changedTouches[0];
+      end(touch?.clientX ?? startX, touch?.clientY ?? startY);
     };
-    const onTouchEnd = (endEvent) => {
-      const touch = endEvent.changedTouches[0];
-      if (touch) {
-        handleEnd(touch.clientX, touch.clientY);
-      } else {
-        handleEnd(startX, startY);
+    const keyDown = (event) => {
+      if (event.key === "Escape") {
+        event.preventDefault();
+        cancel();
       }
     };
-    document.addEventListener("touchmove", onTouchMove, { passive: false });
-    document.addEventListener("touchend", onTouchEnd);
-    document.addEventListener("touchcancel", onTouchEnd);
-    activeDocTouchMove = onTouchMove;
-    activeDocTouchEnd = onTouchEnd;
-    activeDocTouchCancel = onTouchEnd;
-  }
-  const handleMouseDown = (e) => {
-    const mouseEvent = e;
-    mouseEvent.preventDefault();
-    startDrag(mouseEvent.clientX, mouseEvent.clientY);
+    document.addEventListener("mousemove", mouseMove);
+    document.addEventListener("mouseup", mouseUp);
+    document.addEventListener("touchmove", touchMove, { passive: false });
+    document.addEventListener("touchend", touchEnd);
+    document.addEventListener("touchcancel", cancel);
+    document.addEventListener("pointercancel", cancel);
+    document.addEventListener("keydown", keyDown, true);
+    svg.addEventListener("oc-cancel-drag", cancel);
+    cancelActive = cancel;
+  }
+  const mouseDown = (event) => {
+    if (event.button !== 0) return;
+    event.preventDefault();
+    startDrag(event.clientX, event.clientY);
   };
-  const handleTouchStart = (e) => {
-    const touchEvent = e;
-    if (touchEvent.touches.length === 1) {
-      touchEvent.preventDefault();
-      startDrag(touchEvent.touches[0].clientX, touchEvent.touches[0].clientY);
-    }
+  const touchStart = (event) => {
+    if (event.touches.length !== 1) return;
+    event.preventDefault();
+    startDrag(event.touches[0].clientX, event.touches[0].clientY);
   };
-  element.addEventListener("mousedown", handleMouseDown);
-  element.addEventListener("touchstart", handleTouchStart, { passive: false });
-  cleanups.push(() => {
-    element.removeEventListener("mousedown", handleMouseDown);
-    element.removeEventListener("touchstart", handleTouchStart);
-  });
+  element.addEventListener("mousedown", mouseDown);
+  element.addEventListener("touchstart", touchStart, { passive: false });
   return () => {
-    for (const cleanup of cleanups) {
-      cleanup();
-    }
-    if (activeDocMouseMove) {
-      document.removeEventListener("mousemove", activeDocMouseMove);
-      activeDocMouseMove = null;
-    }
-    if (activeDocMouseUp) {
-      document.removeEventListener("mouseup", activeDocMouseUp);
-      activeDocMouseUp = null;
-    }
-    if (activeDocTouchMove) {
-      document.removeEventListener("touchmove", activeDocTouchMove);
-      activeDocTouchMove = null;
-    }
-    if (activeDocTouchEnd) {
-      document.removeEventListener("touchend", activeDocTouchEnd);
-      activeDocTouchEnd = null;
-    }
-    if (activeDocTouchCancel) {
-      document.removeEventListener("touchcancel", activeDocTouchCancel);
-      activeDocTouchCancel = null;
-    }
-    svg.style.userSelect = "";
+    element.removeEventListener("mousedown", mouseDown);
+    element.removeEventListener("touchstart", touchStart);
+    cancelActive?.();
   };
 }
 
 // src/interactions/editing-drags.ts
 import {
-  elementRef
+  elementRef as elementRef2
 } from "@opendata-ai/openchart-core";
+import {
+  createAnnotationEditContext as createAnnotationEditContext2,
+  inverseLabelPlacement as inverseLabelPlacement2,
+  previewAnnotationMove as previewAnnotationMove2,
+  previewConnectorOffset
+} from "@opendata-ai/openchart-engine";
 
 // src/interactions/invert.ts
 function invertScale(invert, pixel) {
@@ -4345,212 +4717,153 @@ function invertScale(invert, pixel) {
 }
 
 // src/interactions/editing-drags.ts
-function wireAnnotationDrag(svg, specAnnotations, onAnnotationEdit, onEdit, setDragging) {
-  const annotationElements = svg.querySelectorAll(".oc-annotation-text");
+function wireAnnotationDrag(svg, specAnnotations, onAnnotationEdit, onEdit, setDragging, layout, spec) {
   const cleanups = [];
-  for (const el of annotationElements) {
-    const indexStr = el.getAttribute("data-annotation-index");
-    if (indexStr === null) continue;
-    const index = Number(indexStr);
-    const specAnnotation = specAnnotations[index];
-    if (!specAnnotation || specAnnotation.type !== "text") continue;
-    const textAnnotation = specAnnotation;
-    const annotationG = el;
-    annotationG.style.cursor = "grab";
-    const connectorLine = annotationG.querySelector("line.oc-annotation-connector");
-    const origX2 = connectorLine ? Number(connectorLine.getAttribute("x2")) : 0;
-    const origY2 = connectorLine ? Number(connectorLine.getAttribute("y2")) : 0;
-    const curvedPath = annotationG.querySelector("path.oc-annotation-connector");
-    const arrowhead = annotationG.querySelector("polyline.oc-annotation-arrowhead");
-    const hasCurvedConnector = curvedPath !== null;
-    const origDx = textAnnotation.offset?.dx ?? 0;
-    const origDy = textAnnotation.offset?.dy ?? 0;
-    const cleanup = createDragHandler({
-      element: annotationG,
-      svg,
-      onMove: (dx, dy) => {
-        annotationG.setAttribute("transform", `translate(${dx}, ${dy})`);
-        if (connectorLine && !hasCurvedConnector) {
-          connectorLine.setAttribute("x2", String(origX2 - dx));
-          connectorLine.setAttribute("y2", String(origY2 - dy));
-        }
-        if (hasCurvedConnector) {
-          if (curvedPath) curvedPath.setAttribute("display", "none");
-          if (arrowhead) arrowhead.setAttribute("display", "none");
-        }
-      },
-      onEnd: (dx, dy, moved) => {
-        annotationG.removeAttribute("transform");
-        if (connectorLine && !hasCurvedConnector) {
-          connectorLine.setAttribute("x2", String(origX2));
-          connectorLine.setAttribute("y2", String(origY2));
-        }
-        if (hasCurvedConnector) {
-          if (curvedPath) curvedPath.removeAttribute("display");
-          if (arrowhead) arrowhead.removeAttribute("display");
-        }
-        if (moved) {
-          const newOffset = {
-            dx: origDx + dx,
-            dy: origDy + dy
-          };
-          onAnnotationEdit?.(textAnnotation, newOffset);
+  const ctx = createAnnotationEditContext2(layout, spec);
+  for (const group of svg.querySelectorAll(".oc-annotation-text")) {
+    const ref = buildElementRef(group, specAnnotations);
+    if (ref?.type !== "annotation") continue;
+    const authored = specAnnotations[ref.index];
+    if (authored?.type !== "text") continue;
+    let initial;
+    try {
+      initial = previewAnnotationMove2(ctx, ref, { dx: 0, dy: 0 });
+    } catch {
+      continue;
+    }
+    if (!initial.label?.visible || initial.footnoteIndex !== void 0) continue;
+    const original = initial;
+    const restore = () => updateAnnotationGeometry(group, original, layout.theme.colors.neutral.surface);
+    group.style.cursor = "grab";
+    cleanups.push(
+      createDragHandler({
+        element: group,
+        svg,
+        setDragging,
+        animationFrame: true,
+        onMove: (dx, dy) => updateAnnotationGeometry(
+          group,
+          previewAnnotationMove2(ctx, ref, { dx, dy }),
+          layout.theme.colors.neutral.surface
+        ),
+        onCancel: restore,
+        onEnd: (dx, dy, moved) => {
+          restore();
+          if (!moved) return;
+          const preview = previewAnnotationMove2(ctx, ref, { dx, dy });
+          const placement = inverseLabelPlacement2(ctx, ref, preview.bounds);
+          onAnnotationEdit?.(authored, {
+            dx: Math.round(
+              ((authored.offset?.dx ?? 0) + preview.label.x - original.label.x) * 1e10
+            ) / 1e10,
+            dy: Math.round(
+              ((authored.offset?.dy ?? 0) + preview.label.y - original.label.y) * 1e10
+            ) / 1e10
+          });
           onEdit?.({
             type: "annotation",
-            element: elementRef.annotation(
-              index,
-              textAnnotation.id,
-              `/annotations/${index}/offset`
-            ),
-            annotation: textAnnotation,
-            offset: newOffset
+            element: { ...ref, path: `${ref.path}/offset` },
+            annotation: authored,
+            offset: placement.offset,
+            anchor: placement.anchor,
+            responsive: false
           });
         }
-      },
-      setDragging
-    });
-    cleanups.push(cleanup);
-  }
-  return () => {
-    for (const cleanup of cleanups) {
-      cleanup();
-    }
-  };
-}
-function wireConnectorEndpointDrag(svg, specAnnotations, onEdit, setDragging) {
-  const SVG_NS4 = "http://www.w3.org/2000/svg";
-  const cleanups = [];
-  const annotationGroups = svg.querySelectorAll(".oc-annotation-text");
-  for (const el of annotationGroups) {
-    const annotationG = el;
-    const indexStr = annotationG.getAttribute("data-annotation-index");
-    if (indexStr === null) continue;
-    const index = Number(indexStr);
-    const specAnnotation = specAnnotations[index];
-    if (!specAnnotation || specAnnotation.type !== "text") continue;
-    const textAnnotation = specAnnotation;
-    const connectorLine = annotationG.querySelector("line.oc-annotation-connector");
-    const curvedPath = annotationG.querySelector("path.oc-annotation-connector");
-    if (!connectorLine && !curvedPath) continue;
-    let fromX, fromY, toX, toY;
-    if (connectorLine) {
-      fromX = Number(connectorLine.getAttribute("x1")) || 0;
-      fromY = Number(connectorLine.getAttribute("y1")) || 0;
-      toX = Number(connectorLine.getAttribute("x2")) || 0;
-      toY = Number(connectorLine.getAttribute("y2")) || 0;
-    } else {
-      const pathD = curvedPath.getAttribute("d") ?? "";
-      const mMatch = pathD.match(/M\s*([\d.e+-]+)\s+([\d.e+-]+)/);
-      fromX = mMatch ? Number(mMatch[1]) : 0;
-      fromY = mMatch ? Number(mMatch[2]) : 0;
-      const arrowhead = annotationG.querySelector("polyline.oc-annotation-arrowhead");
-      const points = arrowhead?.getAttribute("points")?.split(" ") ?? [];
-      const [px, py] = (points[1] ?? "0,0").split(",");
-      toX = Number(px) || 0;
-      toY = Number(py) || 0;
-    }
-    const endpoints = [
-      { name: "from", cx: fromX, cy: fromY },
-      { name: "to", cx: toX, cy: toY }
-    ];
-    const createdHandles = [];
-    for (const ep of endpoints) {
-      if (!Number.isFinite(ep.cx) || !Number.isFinite(ep.cy)) continue;
-      const handleEl = document.createElementNS(SVG_NS4, "circle");
-      handleEl.setAttribute("class", "oc-connector-handle");
-      handleEl.setAttribute("data-endpoint", ep.name);
-      handleEl.setAttribute("cx", String(ep.cx));
-      handleEl.setAttribute("cy", String(ep.cy));
-      handleEl.setAttribute("r", "4");
-      handleEl.setAttribute("opacity", "0");
-      handleEl.setAttribute("fill", "currentColor");
-      handleEl.setAttribute("stroke", "currentColor");
-      annotationG.appendChild(handleEl);
-      createdHandles.push(handleEl);
-      const origCx = ep.cx;
-      const origCy = ep.cy;
-      const stopProp = (e) => {
-        e.stopPropagation();
-      };
-      handleEl.addEventListener("mousedown", stopProp);
-      handleEl.addEventListener("touchstart", stopProp);
-      cleanups.push(() => {
-        handleEl.removeEventListener("mousedown", stopProp);
-        handleEl.removeEventListener("touchstart", stopProp);
-      });
-      const cleanup = createDragHandler({
-        element: handleEl,
-        svg,
-        onMove: (dx, dy) => {
-          handleEl.setAttribute("cx", String(origCx + dx));
-          handleEl.setAttribute("cy", String(origCy + dy));
-          if (connectorLine) {
-            if (ep.name === "from") {
-              connectorLine.setAttribute("x1", String(origCx + dx));
-              connectorLine.setAttribute("y1", String(origCy + dy));
-            } else {
-              connectorLine.setAttribute("x2", String(origCx + dx));
-              connectorLine.setAttribute("y2", String(origCy + dy));
-            }
-          }
-        },
-        onEnd: (dx, dy, moved) => {
-          handleEl.setAttribute("cx", String(origCx));
-          handleEl.setAttribute("cy", String(origCy));
-          if (connectorLine) {
-            if (ep.name === "from") {
-              connectorLine.setAttribute("x1", String(origCx));
-              connectorLine.setAttribute("y1", String(origCy));
-            } else {
-              connectorLine.setAttribute("x2", String(origCx));
-              connectorLine.setAttribute("y2", String(origCy));
-            }
-          }
-          if (moved) {
-            const existingOffset = textAnnotation.connectorOffset?.[ep.name];
-            const origEndDx = existingOffset?.dx ?? 0;
-            const origEndDy = existingOffset?.dy ?? 0;
+      })
+    );
+  }
+  return () => {
+    for (const cleanup of cleanups) cleanup();
+  };
+}
+function wireConnectorEndpointDrag(svg, specAnnotations, onEdit, setDragging, layout, spec) {
+  const cleanups = [];
+  const ctx = createAnnotationEditContext2(layout, spec);
+  for (const group of svg.querySelectorAll(".oc-annotation-text")) {
+    const ref = buildElementRef(group, specAnnotations);
+    if (ref?.type !== "annotation") continue;
+    const authored = specAnnotations[ref.index];
+    if (authored?.type !== "text") continue;
+    let original;
+    try {
+      original = previewAnnotationMove2(ctx, ref, { dx: 0, dy: 0 });
+    } catch {
+      continue;
+    }
+    const connector = original.label?.connector;
+    if (!connector || original.footnoteIndex !== void 0) continue;
+    const handles = [];
+    for (const end of ["from", "to"]) {
+      const point = connector[end];
+      const handle = document.createElementNS("http://www.w3.org/2000/svg", "circle");
+      handle.setAttribute("class", "oc-connector-handle");
+      handle.setAttribute("data-endpoint", end);
+      handle.setAttribute("cx", String(point.x));
+      handle.setAttribute("cy", String(point.y));
+      handle.setAttribute("r", "4");
+      handle.setAttribute("opacity", "0");
+      handle.setAttribute("fill", "currentColor");
+      handle.setAttribute("stroke", "currentColor");
+      handle.style.cursor = "grab";
+      group.appendChild(handle);
+      handles.push(handle);
+      const stop = (event) => event.stopPropagation();
+      handle.addEventListener("mousedown", stop);
+      handle.addEventListener("touchstart", stop);
+      const restore = () => {
+        updateAnnotationGeometry(group, original, layout.theme.colors.neutral.surface);
+        handle.setAttribute("cx", String(point.x));
+        handle.setAttribute("cy", String(point.y));
+      };
+      cleanups.push(
+        createDragHandler({
+          element: handle,
+          svg,
+          setDragging,
+          animationFrame: true,
+          onMove: (dx, dy) => {
+            const preview = previewConnectorOffset(ctx, ref, end, { dx, dy });
+            updateAnnotationGeometry(group, preview, layout.theme.colors.neutral.surface);
+            const position = preview.label?.connector?.[end] ?? point;
+            handle.setAttribute("cx", String(position.x));
+            handle.setAttribute("cy", String(position.y));
+          },
+          onCancel: restore,
+          onEnd: (dx, dy, moved) => {
+            restore();
+            if (!moved) return;
+            const previous = authored.connectorOffset?.[end];
             onEdit({
               type: "annotation-connector",
-              element: elementRef.annotation(
-                index,
-                textAnnotation.id,
-                `/annotations/${index}/connectorOffset/${ep.name}`
-              ),
-              annotation: textAnnotation,
-              endpoint: ep.name,
-              offset: { dx: origEndDx + dx, dy: origEndDy + dy }
+              element: { ...ref, path: `${ref.path}/connectorOffset/${end}` },
+              annotation: authored,
+              endpoint: end,
+              offset: { dx: (previous?.dx ?? 0) + dx, dy: (previous?.dy ?? 0) + dy }
             });
           }
-        },
-        setDragging
+        })
+      );
+      cleanups.push(() => {
+        handle.removeEventListener("mousedown", stop);
+        handle.removeEventListener("touchstart", stop);
+        handle.remove();
       });
-      cleanups.push(cleanup);
     }
-    const showHandles = () => {
-      for (const h of createdHandles) {
-        h.setAttribute("opacity", "0.6");
-      }
-    };
-    const hideHandles = () => {
-      for (const h of createdHandles) {
-        h.setAttribute("opacity", "0");
-      }
-    };
-    annotationG.addEventListener("mouseenter", showHandles);
-    annotationG.addEventListener("mouseleave", hideHandles);
+    const show = () => handles.forEach((handle) => {
+      handle.setAttribute("opacity", "0.6");
+    });
+    const hide = () => handles.forEach((handle) => {
+      handle.setAttribute("opacity", "0");
+    });
+    group.addEventListener("mouseenter", show);
+    group.addEventListener("mouseleave", hide);
     cleanups.push(() => {
-      annotationG.removeEventListener("mouseenter", showHandles);
-      annotationG.removeEventListener("mouseleave", hideHandles);
-      for (const h of createdHandles) {
-        h.remove();
-      }
+      group.removeEventListener("mouseenter", show);
+      group.removeEventListener("mouseleave", hide);
     });
   }
   return () => {
-    for (const cleanup of cleanups) {
-      cleanup();
-    }
+    for (const cleanup of cleanups) cleanup();
   };
 }
 function wireAnnotationLabelDrag(svg, specAnnotations, onEdit, setDragging) {
@@ -4581,16 +4894,19 @@ function wireAnnotationLabelDrag(svg, specAnnotations, onEdit, setDragging) {
         onMove: (dx, dy) => {
           labelEl.style.transform = `translate(${dx}px, ${dy}px)`;
         },
+        onCancel: () => {
+          labelEl.style.transform = "";
+        },
         onEnd: (dx, dy, moved) => {
           labelEl.style.transform = "";
           if (moved) {
             if (isRange) {
               onEdit({
                 type: "range-label",
-                element: elementRef.annotation(
+                element: elementRef2.annotation(
                   index,
                   specAnnotation.id,
-                  `/annotations/${index}/labelOffset`
+                  `${annotationG.getAttribute("data-annotation-path") ?? `/annotations/${index}`}/labelOffset`
                 ),
                 annotation: specAnnotation,
                 labelOffset: { dx: origLabelDx + dx, dy: origLabelDy + dy }
@@ -4598,10 +4914,10 @@ function wireAnnotationLabelDrag(svg, specAnnotations, onEdit, setDragging) {
             } else {
               onEdit({
                 type: "refline-label",
-                element: elementRef.annotation(
+                element: elementRef2.annotation(
                   index,
                   specAnnotation.id,
-                  `/annotations/${index}/labelOffset`
+                  `${annotationG.getAttribute("data-annotation-path") ?? `/annotations/${index}`}/labelOffset`
                 ),
                 annotation: specAnnotation,
                 labelOffset: { dx: origLabelDx + dx, dy: origLabelDy + dy }
@@ -4639,6 +4955,9 @@ function wireChromeDrag(svg, spec, onEdit, setDragging) {
       onMove: (dx, dy) => {
         textEl.style.transform = `translate(${dx}px, ${dy}px)`;
       },
+      onCancel: () => {
+        textEl.style.transform = "";
+      },
       onEnd: (dx, dy, moved) => {
         textEl.style.transform = "";
         if (moved) {
@@ -4676,6 +4995,9 @@ function wireLegendDrag(svg, spec, onEdit, setDragging) {
     onMove: (dx, dy) => {
       legendG.style.transform = `translate(${dx}px, ${dy}px)`;
     },
+    onCancel: () => {
+      legendG.style.transform = "";
+    },
     onEnd: (dx, dy, moved) => {
       legendG.style.transform = "";
       if (moved) {
@@ -4710,6 +5032,9 @@ function wireSeriesLabelDrag(svg, spec, onEdit, setDragging) {
       onMove: (dx, dy) => {
         labelEl.style.transform = `translate(${dx}px, ${dy}px)`;
       },
+      onCancel: () => {
+        labelEl.style.transform = "";
+      },
       onEnd: (dx, dy, moved) => {
         labelEl.style.transform = "";
         if (moved) {
@@ -4774,6 +5099,10 @@ function wireAnchorDrag(svg, specAnnotations, layout, onEdit, setDragging) {
         handleEl.setAttribute("cx", String(anchorX + dx));
         handleEl.setAttribute("cy", String(anchorY + dy));
       },
+      onCancel: () => {
+        handleEl.setAttribute("cx", String(anchorX));
+        handleEl.setAttribute("cy", String(anchorY));
+      },
       onEnd: (dx, dy, moved) => {
         handleEl.setAttribute("cx", String(anchorX));
         handleEl.setAttribute("cy", String(anchorY));
@@ -4782,7 +5111,11 @@ function wireAnchorDrag(svg, specAnnotations, layout, onEdit, setDragging) {
           const newY = invertScale(layout.yInvert, anchorY + dy);
           onEdit({
             type: "annotation-anchor",
-            element: elementRef.annotation(index, textAnnotation.id, `/annotations/${index}`),
+            element: elementRef2.annotation(
+              index,
+              textAnnotation.id,
+              annotationG.getAttribute("data-annotation-path") ?? `/annotations/${index}`
+            ),
             annotation: textAnnotation,
             x: newX,
             y: newY
@@ -5119,210 +5452,6 @@ function wireLegendInteraction(svg, _layout, toggleSeries, onLegendToggle, onEdi
   };
 }
 
-// src/interactions/selection.ts
-import { elementRef as elementRef2 } from "@opendata-ai/openchart-core";
-function findElementByRef(svg, ref) {
-  switch (ref.type) {
-    case "annotation": {
-      if (ref.id) {
-        const byId = svg.querySelector(`[data-annotation-id="${ref.id}"]`);
-        if (byId) return byId;
-      }
-      return svg.querySelector(`[data-annotation-index="${ref.index}"]`);
-    }
-    case "chrome":
-      return svg.querySelector(`[data-chrome-key="${ref.key}"]`);
-    case "series-label":
-      return svg.querySelector(`.oc-mark-label[data-series="${ref.series}"]`);
-    // The editable legend is the color legend. Excluding the size legend
-    // explicitly rather than relying on it rendering second: `querySelector`
-    // takes the first match, so a bare `.oc-legend` would silently retarget
-    // (and drag) the wrong legend if render order ever changed.
-    case "legend":
-      return svg.querySelector(".oc-legend:not(.oc-legend--size)");
-    case "legend-entry":
-      return svg.querySelector(
-        `.oc-legend:not(.oc-legend--size) [data-legend-index="${ref.index}"]`
-      );
-  }
-}
-function encodePointerToken(token) {
-  return token.replace(/~/g, "~0").replace(/\//g, "~1");
-}
-function buildElementRef(element, _specAnnotations) {
-  const annotationEl = element.closest("[data-annotation-index]");
-  if (annotationEl) {
-    const index = Number(annotationEl.getAttribute("data-annotation-index"));
-    const id = annotationEl.getAttribute("data-annotation-id") ?? void 0;
-    return elementRef2.annotation(index, id, `/annotations/${index}`);
-  }
-  const chromeEl = element.closest("[data-chrome-key]");
-  if (chromeEl) {
-    const key = chromeEl.getAttribute("data-chrome-key");
-    if (key) return elementRef2.chrome(key, `/chrome/${key}`);
-  }
-  const seriesLabelEl = element.closest(".oc-mark-label[data-series]");
-  if (seriesLabelEl) {
-    const series = seriesLabelEl.getAttribute("data-series");
-    if (series)
-      return elementRef2.seriesLabel(series, `/labels/offsets/${encodePointerToken(series)}`);
-  }
-  const legendEntryEl = element.closest("[data-legend-index]");
-  if (legendEntryEl) {
-    const index = Number(legendEntryEl.getAttribute("data-legend-index"));
-    const series = legendEntryEl.getAttribute("data-legend-label") ?? "";
-    return elementRef2.legendEntry(series, index);
-  }
-  const legendEl = element.closest(".oc-legend");
-  if (legendEl && !legendEl.classList.contains("oc-legend--size"))
-    return elementRef2.legend("/legend");
-  return null;
-}
-function getEditableElements(spec, layout) {
-  const refs = [];
-  const chromeKeys = ["title", "subtitle", "source", "byline", "footer"];
-  for (const key of chromeKeys) {
-    if (layout.chrome[key]) {
-      refs.push(elementRef2.chrome(key));
-    }
-  }
-  const annotations = "annotations" in spec && Array.isArray(spec.annotations) ? spec.annotations : [];
-  for (let i = 0; i < annotations.length; i++) {
-    refs.push(elementRef2.annotation(i, annotations[i].id));
-  }
-  const seriesLabels = [];
-  for (const mark of layout.marks) {
-    if (mark.type === "line" && mark.label?.visible && mark.seriesKey) {
-      seriesLabels.push(mark.seriesKey);
-    }
-  }
-  seriesLabels.sort();
-  for (const series of seriesLabels) {
-    refs.push(elementRef2.seriesLabel(series));
-  }
-  if ("entries" in layout.legend && layout.legend.entries.length > 0) {
-    refs.push(elementRef2.legend());
-  }
-  return refs;
-}
-function isTextEditable(ref, specAnnotations) {
-  if (ref.type === "chrome") return true;
-  if (ref.type === "annotation") {
-    const annotation = specAnnotations[ref.index];
-    return annotation?.type === "text";
-  }
-  return false;
-}
-function getElementText(ref, spec) {
-  if (ref.type === "chrome") {
-    const chromeConfig = "chrome" in spec ? spec.chrome : void 0;
-    if (!chromeConfig) return null;
-    const entry = chromeConfig[ref.key];
-    if (typeof entry === "string") return entry;
-    if (typeof entry === "object" && entry !== null && "text" in entry) {
-      return entry.text;
-    }
-    return null;
-  }
-  if (ref.type === "annotation") {
-    const annotations = "annotations" in spec && Array.isArray(spec.annotations) ? spec.annotations : [];
-    const annotation = annotations[ref.index];
-    if (annotation?.type === "text") return annotation.text ?? null;
-    if (annotation?.label) return annotation.label;
-    return null;
-  }
-  return null;
-}
-function refsEqual(a, b) {
-  if (a === null || b === null) return a === b;
-  if (a.type !== b.type) return false;
-  switch (a.type) {
-    case "annotation": {
-      const bAnno = b;
-      if (a.id && bAnno.id) return a.id === bAnno.id;
-      return a.index === bAnno.index;
-    }
-    case "chrome":
-      return a.key === b.key;
-    case "series-label":
-      return a.series === b.series;
-    case "legend":
-      return true;
-    case "legend-entry": {
-      const bEntry = b;
-      return a.index === bEntry.index && a.series === bEntry.series;
-    }
-  }
-}
-function renderSelectionOverlay(svg, ref, layout) {
-  const target = findElementByRef(svg, ref);
-  if (!target) return null;
-  const bbox = target.getBBox();
-  const padding = 4;
-  const accentColor = layout.theme.colors.categorical?.[0] ?? "#4f46e5";
-  const g = document.createElementNS("http://www.w3.org/2000/svg", "g");
-  g.setAttribute("class", "oc-selection-overlay");
-  const rect = document.createElementNS("http://www.w3.org/2000/svg", "rect");
-  rect.setAttribute("x", String(bbox.x - padding));
-  rect.setAttribute("y", String(bbox.y - padding));
-  rect.setAttribute("width", String(bbox.width + padding * 2));
-  rect.setAttribute("height", String(bbox.height + padding * 2));
-  rect.setAttribute("rx", "3");
-  rect.setAttribute("fill", "transparent");
-  rect.setAttribute("stroke", accentColor);
-  rect.setAttribute("stroke-width", "1.5");
-  rect.setAttribute("pointer-events", "none");
-  g.appendChild(rect);
-  svg.appendChild(g);
-  return g;
-}
-function createScreenReaderTable(layout, container) {
-  const data = layout.a11y.dataTableFallback;
-  if (!data || data.length === 0) return null;
-  const wrapper = document.createElement("div");
-  wrapper.className = "oc-sr-only";
-  applySrOnlyStyles(wrapper);
-  const table = document.createElement("table");
-  table.setAttribute("role", "table");
-  table.setAttribute("aria-label", `Data table: ${layout.a11y.altText}`);
-  const totalRows = layout.a11y.totalRows;
-  if (totalRows != null) {
-    const caption = document.createElement("caption");
-    caption.textContent = `Showing first ${(data.length - 1).toLocaleString()} of ${totalRows.toLocaleString()} rows; full data via CSV export`;
-    table.appendChild(caption);
-  }
-  if (data.length > 0) {
-    const thead = document.createElement("thead");
-    const headerRow = document.createElement("tr");
-    const headers = data[0];
-    for (const header of headers) {
-      const th = document.createElement("th");
-      th.textContent = String(header ?? "");
-      th.setAttribute("scope", "col");
-      headerRow.appendChild(th);
-    }
-    thead.appendChild(headerRow);
-    table.appendChild(thead);
-  }
-  if (data.length > 1) {
-    const tbody = document.createElement("tbody");
-    for (let i = 1; i < data.length; i++) {
-      const tr = document.createElement("tr");
-      const cells = data[i];
-      for (const cell of cells) {
-        const td = document.createElement("td");
-        td.textContent = String(cell ?? "");
-        tr.appendChild(td);
-      }
-      tbody.appendChild(tr);
-    }
-    table.appendChild(tbody);
-  }
-  wrapper.appendChild(table);
-  container.appendChild(wrapper);
-  return wrapper;
-}
-
 // src/interactions/tooltip-events.ts
 function wireTooltipEvents(svg, tooltipDescriptors, tooltipManager, emphasis) {
   const markElements = svg.querySelectorAll("[data-mark-id]");
@@ -6014,7 +6143,7 @@ function makeEditable(svg) {
   svg.insertBefore(style, svg.firstChild);
 }
 function hasEditingCallbacks(opts) {
-  return !!(opts?.onEdit || opts?.onSelect || opts?.onDeselect || opts?.onTextEdit);
+  return !!(opts?.onEditTransaction || opts?.onEdit || opts?.onSelect || opts?.onDeselect || opts?.onTextEdit);
 }
 function authoredHighlight(spec) {
   if (isLayerSpec(spec) || isGraphSpec(spec)) return [];
@@ -6058,6 +6187,7 @@ function createChart(container, spec, options) {
   let destroyed = false;
   let isDragging = false;
   let pendingRender = false;
+  let gestureWidth = 0;
   let isFirstRender = true;
   let cleanupAnimations = null;
   let pendingResize = false;
@@ -6115,7 +6245,10 @@ function createChart(container, spec, options) {
         facetGrowth = needed - budgetForPanels;
       }
     }
-    return layout.chrome.topHeight + layout.chrome.bottomHeight + topLegendBlock + (layout.metrics?.height ?? 0) + facetGrowth;
+    return Math.max(
+      0,
+      layout.chrome.topHeight + layout.chrome.bottomHeight + topLegendBlock + (layout.metrics?.height ?? 0) + facetGrowth + (layout.chrome.grownHeight !== void 0 ? layout.chrome.noteBandHeight ?? 0 : 0) - (layout.chrome.grownHeight ?? 0)
+    );
   }
   function compile(candidate = currentSpec, measure = measureText, runtime = true) {
     const { width, height } = getContainerDimensions(candidate);
@@ -6240,10 +6373,40 @@ function createChart(container, spec, options) {
       height: isAutoHeight === true ? FALLBACK_HEIGHT : Math.max(ownHeight ? lastHostHeight : rect.height || FALLBACK_HEIGHT, 100)
     };
   }
+  if (options?.onDataPointClick)
+    warnDeprecated("onDataPointClick is deprecated and has no effect; use onMarkClick.");
+  if (options?.onAnnotationEdit)
+    warnDeprecated("onAnnotationEdit is deprecated; use onEditTransaction.");
+  if (options?.onTextEdit) warnDeprecated("onTextEdit is deprecated; use onEditTransaction.");
+  if (options?.responsive !== void 0)
+    warnDeprecated("The mount responsive option is deprecated; use autoResize.");
+  let editRevision = options?.revision;
+  const annotationNudges = createAnnotationNudges(
+    () => ({
+      layout: currentLayout,
+      spec: currentSpec,
+      svg: svgElement,
+      selected: selectedElement
+    }),
+    emitEdit
+  );
+  function emitEdit(edit) {
+    const tx = editToTransaction(currentSpec, edit, editRevision);
+    if (!tx && edit.type !== "legend-toggle") return;
+    if (tx && !applyEditTransaction(currentSpec, tx).ok) return;
+    if ("element" in edit && edit.element.type === "annotation") {
+      const base = `${annotationSource(currentSpec).path}/${edit.element.index}`;
+      const suffix = edit.element.path?.replace(/^.*\/annotations\/\d+/, "") ?? "";
+      edit = { ...edit, element: { ...edit.element, path: base + suffix } };
+    }
+    if (tx) options?.onEditTransaction?.(tx);
+    options?.onEdit?.(edit);
+  }
   function getSpecAnnotations() {
-    return "annotations" in currentSpec && Array.isArray(currentSpec.annotations) ? currentSpec.annotations : [];
+    return annotationSource(currentSpec).annotations;
   }
   function selectElement(ref) {
+    annotationNudges.flush();
     if (!svgElement) return;
     const target = findElementByRef(svgElement, ref);
     if (!target) return;
@@ -6256,6 +6419,7 @@ function createChart(container, spec, options) {
     svgElement.focus();
   }
   function deselectElement() {
+    annotationNudges.flush();
     if (!selectedElement) return;
     if (isTextEditingActive && textEditCleanup) {
       textEditCleanup();
@@ -6292,7 +6456,7 @@ function createChart(container, spec, options) {
         textEditCleanup = null;
         if (newText !== currentText) {
           options?.onTextEdit?.(editRef, currentText, newText);
-          options?.onEdit?.({
+          emitEdit({
             type: "text-edit",
             element: editRef,
             oldText: currentText,
@@ -6358,7 +6522,7 @@ function createChart(container, spec, options) {
         enterTextEditing();
         return;
       }
-      if (!ref && options?.onEdit && currentLayout?.xInvert && currentLayout?.yInvert) {
+      if (!ref && (options?.onEdit || options?.onEditTransaction) && currentLayout?.xInvert && currentLayout?.yInvert) {
         const svgEl = svg;
         const viewBox = svgEl.viewBox?.baseVal;
         const svgRect = svgEl.getBoundingClientRect();
@@ -6381,7 +6545,7 @@ function createChart(container, spec, options) {
             isTextEditingActive = false;
             textEditCleanup = null;
             const annotation = { type: "text", x: dataX, y: dataY, text };
-            options.onEdit({ type: "add", annotation });
+            emitEdit({ type: "add", annotation });
           },
           onCancel: () => {
             isTextEditingActive = false;
@@ -6405,12 +6569,15 @@ function createChart(container, spec, options) {
     const svg = svgElement;
     const handleKeyDown = (e) => {
       const specAnnotations = getSpecAnnotations();
+      if (!isTextEditingActive && annotationNudges.keydown(e)) return;
+      if (e.key === "Escape" || e.key === "Delete" || e.key === "Backspace")
+        annotationNudges.flush();
       switch (e.key) {
         case "Delete":
         case "Backspace": {
           if (selectedElement && !isTextEditingActive) {
             e.preventDefault();
-            options?.onEdit?.({ type: "delete", element: selectedElement });
+            emitEdit({ type: "delete", element: selectedElement });
           }
           break;
         }
@@ -6461,8 +6628,49 @@ function createChart(container, spec, options) {
       }
     };
     svg.addEventListener("keydown", handleKeyDown);
+    const flushNudges = () => annotationNudges.flush();
+    svg.addEventListener("keyup", flushNudges);
+    const startGesture = (event) => {
+      const target = event.target;
+      const ref = buildElementRef(target, getSpecAnnotations());
+      const previousLayout = currentLayout;
+      const role = target.closest(".oc-connector-handle, .oc-anchor-handle, .oc-annotation-label");
+      const roleClass = role?.getAttribute("class");
+      const endpoint = role?.getAttribute("data-endpoint");
+      annotationNudges.flush();
+      if (destroyed || !ref || !svgElement || currentLayout === previousLayout) return;
+      const group = findElementByRef(svgElement, ref);
+      if (!group) return;
+      const replacement = roleClass ? [...group.querySelectorAll("*")].find(
+        (el) => el.getAttribute("class") === roleClass && el.getAttribute("data-endpoint") === endpoint
+      ) ?? group : group;
+      event.stopImmediatePropagation();
+      event.preventDefault();
+      const init = { bubbles: true, cancelable: true };
+      replacement.dispatchEvent(
+        event.type === "mousedown" ? new MouseEvent("mousedown", {
+          ...init,
+          clientX: event.clientX,
+          clientY: event.clientY,
+          button: event.button
+        }) : new TouchEvent("touchstart", {
+          ...init,
+          touches: [...event.touches],
+          changedTouches: [...event.changedTouches]
+        })
+      );
+    };
+    svg.addEventListener("mousedown", startGesture, true);
+    svg.addEventListener("touchstart", startGesture, true);
+    document.addEventListener("pointercancel", flushNudges, true);
+    document.addEventListener("touchcancel", flushNudges, true);
     return () => {
       svg.removeEventListener("keydown", handleKeyDown);
+      svg.removeEventListener("keyup", flushNudges);
+      svg.removeEventListener("mousedown", startGesture, true);
+      svg.removeEventListener("touchstart", startGesture, true);
+      document.removeEventListener("pointercancel", flushNudges, true);
+      document.removeEventListener("touchcancel", flushNudges, true);
     };
   }
   function render(retainScene = false, prepared) {
@@ -6596,41 +6804,63 @@ function createChart(container, spec, options) {
         "[openchart] seriesSearch and edit mode are mutually exclusive; edit interactions are disabled while seriesSearch is enabled."
       );
     }
+    const authoredAnnotations = annotationSource(currentSpec);
+    for (const el of svgElement.querySelectorAll("[data-annotation-index]")) {
+      el.setAttribute(
+        "data-annotation-path",
+        `${authoredAnnotations.path}/${el.getAttribute("data-annotation-index")}`
+      );
+    }
+    for (const el of svgElement.querySelectorAll("[data-note-spec-index]")) {
+      el.setAttribute(
+        "data-note-path",
+        `${authoredAnnotations.path}/${el.getAttribute("data-note-spec-index")}`
+      );
+    }
     cleanupLegend = wireLegendInteraction(
       svgElement,
       currentLayout,
       toggleSeriesVisibility,
       options?.onLegendToggle,
-      editSuppressed ? void 0 : options?.onEdit,
+      editSuppressed ? void 0 : emitEdit,
       hoverEmphasis
     );
     if (options?.onMarkClick || options?.onMarkHover || options?.onMarkLeave || options?.onAnnotationClick) {
-      const specAnnotations = "annotations" in currentSpec && Array.isArray(currentSpec.annotations) ? currentSpec.annotations : [];
+      const specAnnotations = getSpecAnnotations();
       cleanupChartEvents = wireChartEvents(svgElement, currentLayout, specAnnotations, options);
     }
     const setDragging = (dragging) => {
+      if (dragging) gestureWidth = getContainerDimensions().width;
       isDragging = dragging;
       if (!dragging && pendingRender) {
         pendingRender = false;
         render();
       }
     };
-    const dragAnnotations = "annotations" in currentSpec && Array.isArray(currentSpec.annotations) ? currentSpec.annotations : [];
-    if (!editSuppressed && (options?.editable ?? Boolean(options?.onAnnotationEdit || options?.onEdit))) {
+    const dragAnnotations = getSpecAnnotations();
+    if (!editSuppressed && (options?.editable ?? Boolean(options?.onAnnotationEdit || options?.onEdit || options?.onEditTransaction))) {
       cleanupAnnotationDrag = wireAnnotationDrag(
         svgElement,
         dragAnnotations,
         options?.onAnnotationEdit,
-        options?.onEdit,
-        setDragging
+        emitEdit,
+        setDragging,
+        currentLayout,
+        currentSpec
       );
     }
-    if (!editSuppressed && (options?.editable ?? Boolean(options?.onEdit))) {
+    if (!editSuppressed && (options?.editable ?? Boolean(options?.onEdit || options?.onEditTransaction))) {
       const editCleanups = [];
-      const onEditFn = options?.onEdit ?? (() => {
-      });
+      const onEditFn = emitEdit;
       editCleanups.push(
-        wireConnectorEndpointDrag(svgElement, dragAnnotations, onEditFn, setDragging)
+        wireConnectorEndpointDrag(
+          svgElement,
+          dragAnnotations,
+          onEditFn,
+          setDragging,
+          currentLayout,
+          currentSpec
+        )
       );
       editCleanups.push(
         wireAnnotationLabelDrag(svgElement, dragAnnotations, onEditFn, setDragging)
@@ -6750,6 +6980,17 @@ function createChart(container, spec, options) {
   }
   function doUpdate(newSpec, updateOpts, manual, layoutOnly = false) {
     if (destroyed) return null;
+    annotationNudges.flush();
+    if (destroyed) return null;
+    if (layoutOnly) newSpec = currentSpec;
+    if (isDragging) {
+      if (layoutOnly && getContainerDimensions().width === gestureWidth) {
+        pendingRender = true;
+        return null;
+      }
+      pendingRender = false;
+      svgElement?.dispatchEvent(new Event("oc-cancel-drag"));
+    }
     const prevSpec = currentSpec;
     const prevLayout = currentLayout;
     const entranceWasRunning = cleanupAnimations != null;
@@ -6757,6 +6998,7 @@ function createChart(container, spec, options) {
     const nextMeasure = nextFont === fontFamily ? measureText : createMeasureText(nextFont);
     const nextLayout = compile(newSpec, nextMeasure, layoutOnly);
     const snapshot = transitionHandle?.running ? transitionHandle.snapshot() : void 0;
+    if (updateOpts && Object.hasOwn(updateOpts, "revision")) editRevision = updateOpts.revision;
     currentSpec = newSpec;
     fontFamily = nextFont;
     measureText = nextMeasure;
@@ -6880,6 +7122,7 @@ function createChart(container, spec, options) {
     }
   }
   function destroy() {
+    annotationNudges.flush();
     if (destroyed) return;
     destroyed = true;
     if (transitionHandle) {
@@ -6965,7 +7208,7 @@ function createChart(container, spec, options) {
     }
   );
   container.dataset.ocFontsState = pending ? "pending" : "ready";
-  if (options?.responsive !== false) {
+  if ((options?.autoResize ?? 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;
@@ -7748,13 +7991,7 @@ function snapTween(tw) {
     tw.el.setAttribute(tw.attr, String(tw.to));
   }
 }
-function runMapFillTransition(svg, prev, opts) {
-  const snapshot = prev instanceof Map ? {
-    fills: prev,
-    points: new Map(
-      Array.from(prev).filter(([k]) => k.startsWith("pt:")).map(([k, fill]) => [k.slice(3), { fill }])
-    )
-  } : prev;
+function runMapFillTransition(svg, snapshot, opts) {
   const tweens = [];
   const features = svg.querySelectorAll(".oc-map-feature[data-key]");
   for (const p of features) {
@@ -8351,7 +8588,12 @@ function createGeoMap(container, spec, options) {
       theme: options?.theme,
       darkMode,
       watermark: options?.watermark,
-      measureText: measure
+      measureText: measure,
+      // An unconstrained host must grow around wrapped titles and sources.
+      // Treating the aspect-ratio budget as the entire SVG can leave only a
+      // few pixels for geography on phones. Explicit heights remain a hard
+      // budget, as they are in dashboards and scrollytelling panels.
+      chromeLayout: isAutoHeight === true ? "grow" : "subtract"
     };
     return compileGeoMap(candidate, compileOpts);
   }
@@ -8936,10 +9178,10 @@ export {
   scheduleFontReload,
   VECTOR_EXPORT_MAX_POINTS,
   materializeCanvasModeSVG,
+  applySrOnlyStyles,
   DEFAULT_UPDATE_MAX_MARKS,
   CANVAS_DEFAULT_UPDATE_MAX_MARKS,
   canTransitionSpecShape,
-  applySrOnlyStyles,
   createTextEditOverlay,
   createYouDrawIt,
   createChart,
@@ -8956,4 +9198,4 @@ export {
   scrubCamera,
   createGeoMap
 };
-//# sourceMappingURL=chunk-6TD7GWR4.js.map
+//# sourceMappingURL=chunk-CCRFYGHU.js.map