@opendata-ai/openchart-vanilla 7.11.0 → 8.0.0-rc.2

package/dist/index.js

@@ -1,55 +1,35 @@
 import {
-  buildGradientDefs,
+  renderTileMapSVG
+} from "./chunk-W34KN7FD.js";
+import {
+  cancelAnimations,
+  createChart,
+  createMap,
+  createMeasureText,
+  createTextEditOverlay,
+  createTooltipManager,
+  createYouDrawIt,
+  exportCSV,
+  exportJPG,
+  exportPNG,
+  exportSVG,
+  exportSVGWithFonts,
+  observeResize,
+  resolveFontFamily,
+  scheduleFontReload,
+  setupAnimationCleanup,
+  setupTableAnimationCleanup
+} from "./chunk-ENXSUXC5.js";
+import {
   rectPathWithCorners,
   registerMarkRenderer,
   renderChartSVG,
-  renderSingleMark,
-  renderTileMapSVG,
-  resolveMarkFill
-} from "./chunk-EQ6DYFO7.js";
+  stampAnimationVars
+} from "./chunk-5EOV5JQZ.js";
 
 // src/barlist-mount.ts
 import { compileBarList } from "@opendata-ai/openchart-engine";
 
-// src/animation.ts
-function cancelAnimations(svg) {
-  if (svg) {
-    svg.classList.remove("oc-animate");
-  }
-}
-function setupAnimationCleanup(svg, onComplete) {
-  const style = svg.style;
-  const duration = parseFloat(style.getPropertyValue("--oc-animation-duration")) || 600;
-  const stagger = parseFloat(style.getPropertyValue("--oc-animation-stagger")) || 0;
-  const annotationDelay = parseFloat(style.getPropertyValue("--oc-annotation-delay")) || 200;
-  const animatedElements = svg.querySelectorAll("[data-animation-index]").length;
-  const totalStagger = stagger * Math.max(0, animatedElements - 1);
-  const totalTime = totalStagger + duration + annotationDelay + 500;
-  const timer2 = setTimeout(() => {
-    svg.classList.remove("oc-animate");
-    onComplete?.();
-  }, totalTime);
-  return () => {
-    clearTimeout(timer2);
-    cancelAnimations(svg);
-  };
-}
-function setupTableAnimationCleanup(wrapper) {
-  const style = wrapper.style;
-  const duration = parseFloat(style.getPropertyValue("--oc-animation-duration")) || 500;
-  const stagger = parseFloat(style.getPropertyValue("--oc-animation-stagger")) || 0;
-  const rows = wrapper.querySelectorAll("tbody tr").length;
-  const totalStagger = stagger * Math.max(0, rows - 1);
-  const totalTime = totalStagger + duration + 300;
-  const timer2 = setTimeout(() => {
-    wrapper.classList.remove("oc-animate");
-  }, totalTime);
-  return () => {
-    clearTimeout(timer2);
-    wrapper.classList.remove("oc-animate");
-  };
-}
-
 // src/barlist-renderer.ts
 import { textAscent } from "@opendata-ai/openchart-core";
 var SVG_NS = "http://www.w3.org/2000/svg";
@@ -231,8 +211,7 @@ function renderBarListSVG(layout, opts) {
   const classes = animate ? "oc-barlist oc-animate" : "oc-barlist";
   svg.setAttribute("class", classes);
   if (animate && animation?.enter) {
-    svg.style.setProperty("--oc-animation-duration", `${animation.enter.duration}ms`);
-    svg.style.setProperty("--oc-animation-stagger", "40ms");
+    stampAnimationVars(svg, { duration: animation.enter.duration, stagger: 40 });
   }
   renderChrome(svg, layout);
   renderRows(svg, rows, animate ? animation : void 0);
@@ -242,435 +221,6 @@ function renderBarListSVG(layout, opts) {
   return svg;
 }
 
-// src/export.ts
-function getSVGDimensions(svg) {
-  const w = parseFloat(svg.getAttribute("width") || "");
-  const h = parseFloat(svg.getAttribute("height") || "");
-  if (w && h) return { width: w, height: h };
-  const vb = svg.getAttribute("viewBox");
-  if (vb) {
-    const parts = vb.split(/[\s,]+/).map(Number);
-    if (parts.length >= 4 && parts[2] && parts[3]) {
-      return { width: parts[2], height: parts[3] };
-    }
-  }
-  return { width: 600, height: 400 };
-}
-function ensureSVGDimensions(svgString, width, height) {
-  if (/^<svg[^>]*\swidth\s*=/.test(svgString)) return svgString;
-  return svgString.replace(/^(<svg)/, `$1 width="${width}" height="${height}"`);
-}
-function collectUsedFonts(svgElement) {
-  const fonts = /* @__PURE__ */ new Map();
-  const textElements = svgElement.querySelectorAll("text");
-  for (const el of textElements) {
-    const family = el.getAttribute("font-family");
-    const weight = el.getAttribute("font-weight") || "400";
-    if (family) {
-      const primary = family.split(",")[0].trim().replace(/["']/g, "");
-      if (!fonts.has(primary)) fonts.set(primary, /* @__PURE__ */ new Set());
-      fonts.get(primary).add(String(weight));
-    }
-  }
-  return fonts;
-}
-function findFontFaceRules(usedFonts) {
-  const results = [];
-  try {
-    for (const sheet of document.styleSheets) {
-      let rules;
-      try {
-        rules = sheet.cssRules;
-      } catch {
-        continue;
-      }
-      for (const rule of rules) {
-        if (!(rule instanceof CSSFontFaceRule)) continue;
-        const familyRaw = rule.style.getPropertyValue("font-family").replace(/["']/g, "").trim();
-        const weight = rule.style.getPropertyValue("font-weight") || "400";
-        const style = rule.style.getPropertyValue("font-style") || "normal";
-        const src = rule.style.getPropertyValue("src");
-        const weights = usedFonts.get(familyRaw);
-        if (!weights) continue;
-        const weightMatch = weights.has(weight) || weight.includes(" ");
-        if (!weightMatch) continue;
-        const woff2Match = src.match(/url\(["']?([^"')]+\.woff2[^"')]*?)["']?\)/);
-        if (woff2Match) {
-          results.push({
-            family: familyRaw,
-            weight,
-            style,
-            url: woff2Match[1],
-            format: "woff2"
-          });
-        }
-      }
-    }
-  } catch {
-  }
-  return results;
-}
-async function fetchFontsAsBase64(fontRules) {
-  const results = [];
-  const fetches = fontRules.map(async (rule) => {
-    try {
-      const response = await fetch(rule.url);
-      if (!response.ok) return;
-      const buffer = await response.arrayBuffer();
-      const base64 = arrayBufferToBase64(buffer);
-      results.push({
-        family: rule.family,
-        weight: rule.weight,
-        style: rule.style,
-        base64,
-        format: rule.format
-      });
-    } catch {
-    }
-  });
-  await Promise.all(fetches);
-  return results;
-}
-function arrayBufferToBase64(buffer) {
-  let binary = "";
-  const bytes = new Uint8Array(buffer);
-  for (let i = 0; i < bytes.byteLength; i++) {
-    binary += String.fromCharCode(bytes[i]);
-  }
-  return btoa(binary);
-}
-function injectFontsIntoSVG(svgElement, fonts) {
-  if (fonts.length === 0) return;
-  const cssRules = fonts.map(
-    (f) => `@font-face { font-family: '${f.family}'; font-weight: ${f.weight}; font-style: ${f.style}; src: url(data:font/${f.format};base64,${f.base64}) format('${f.format}'); }`
-  ).join("\n");
-  const ns = "http://www.w3.org/2000/svg";
-  let defs = svgElement.querySelector("defs");
-  if (!defs) {
-    defs = document.createElementNS(ns, "defs");
-    svgElement.insertBefore(defs, svgElement.firstChild);
-  }
-  const styleEl = document.createElementNS(ns, "style");
-  styleEl.textContent = cssRules;
-  defs.insertBefore(styleEl, defs.firstChild);
-}
-async function embedFonts(svgElement) {
-  const usedFonts = collectUsedFonts(svgElement);
-  if (usedFonts.size === 0) return;
-  const fontRules = findFontFaceRules(usedFonts);
-  if (fontRules.length === 0) return;
-  const fontData = await fetchFontsAsBase64(fontRules);
-  injectFontsIntoSVG(svgElement, fontData);
-}
-function getSVGBackgroundColor(svgElement) {
-  const firstRect = svgElement.querySelector("rect");
-  return firstRect?.getAttribute("fill") || "#ffffff";
-}
-function exportSVG(svgElement) {
-  const serializer = new XMLSerializer();
-  return serializer.serializeToString(svgElement);
-}
-async function exportSVGWithFonts(svgElement, options) {
-  const shouldEmbed = options?.embedFonts ?? true;
-  if (shouldEmbed) {
-    await embedFonts(svgElement);
-  }
-  return exportSVG(svgElement);
-}
-async function exportPNG(svgElement, options) {
-  const dpi = options?.dpi ?? 2;
-  const shouldEmbed = options?.embedFonts ?? true;
-  if (shouldEmbed) {
-    await embedFonts(svgElement);
-  }
-  const { width, height } = getSVGDimensions(svgElement);
-  const svgString = ensureSVGDimensions(exportSVG(svgElement), width, height);
-  const canvas = document.createElement("canvas");
-  canvas.width = width * dpi;
-  canvas.height = height * dpi;
-  const ctx = canvas.getContext("2d");
-  if (!ctx) {
-    throw new Error("Canvas 2D context not available");
-  }
-  ctx.scale(dpi, dpi);
-  const img = new Image();
-  const blob = new Blob([svgString], { type: "image/svg+xml;charset=utf-8" });
-  const url = URL.createObjectURL(blob);
-  return new Promise((resolve, reject) => {
-    img.onload = () => {
-      ctx.drawImage(img, 0, 0, width, height);
-      URL.revokeObjectURL(url);
-      canvas.toBlob((result) => {
-        if (result) {
-          resolve(result);
-        } else {
-          reject(new Error("Canvas toBlob returned null"));
-        }
-      }, "image/png");
-    };
-    img.onerror = () => {
-      URL.revokeObjectURL(url);
-      reject(new Error("Failed to load SVG as image"));
-    };
-    img.src = url;
-  });
-}
-async function exportJPG(svgElement, options) {
-  const dpi = options?.dpi ?? 2;
-  const quality = options?.quality ?? 0.92;
-  const shouldEmbed = options?.embedFonts ?? true;
-  if (shouldEmbed) {
-    await embedFonts(svgElement);
-  }
-  const { width, height } = getSVGDimensions(svgElement);
-  const svgString = ensureSVGDimensions(exportSVG(svgElement), width, height);
-  const canvas = document.createElement("canvas");
-  canvas.width = width * dpi;
-  canvas.height = height * dpi;
-  const ctx = canvas.getContext("2d");
-  if (!ctx) {
-    throw new Error("Canvas 2D context not available");
-  }
-  ctx.fillStyle = getSVGBackgroundColor(svgElement);
-  ctx.fillRect(0, 0, canvas.width, canvas.height);
-  ctx.scale(dpi, dpi);
-  const img = new Image();
-  const blob = new Blob([svgString], { type: "image/svg+xml;charset=utf-8" });
-  const url = URL.createObjectURL(blob);
-  return new Promise((resolve, reject) => {
-    img.onload = () => {
-      ctx.drawImage(img, 0, 0, width, height);
-      URL.revokeObjectURL(url);
-      canvas.toBlob(
-        (result) => {
-          if (result) {
-            resolve(result);
-          } else {
-            reject(new Error("Canvas toBlob returned null"));
-          }
-        },
-        "image/jpeg",
-        quality
-      );
-    };
-    img.onerror = () => {
-      URL.revokeObjectURL(url);
-      reject(new Error("Failed to load SVG as image"));
-    };
-    img.src = url;
-  });
-}
-function exportCSV(data) {
-  if (data.length === 0) return "";
-  const headers = Object.keys(data[0]);
-  const rows = [headers.map(csvEscape).join(",")];
-  for (const row of data) {
-    const values = headers.map((h) => csvEscape(String(row[h] ?? "")));
-    rows.push(values.join(","));
-  }
-  return rows.join("\n");
-}
-function csvEscape(value) {
-  if (value.includes(",") || value.includes('"') || value.includes("\n") || value.includes("\r")) {
-    return `"${value.replace(/"/g, '""')}"`;
-  }
-  return value;
-}
-
-// src/measure-text.ts
-import { estimateTextWidth } from "@opendata-ai/openchart-core";
-var DEFAULT_FONT_FAMILY = "Inter, sans-serif";
-function createMeasureText(fontFamily = DEFAULT_FONT_FAMILY) {
-  let canvas = null;
-  let ctx = null;
-  return (text, fontSize, fontWeight) => {
-    if (!canvas) {
-      canvas = document.createElement("canvas");
-      ctx = canvas.getContext("2d");
-    }
-    if (!ctx) {
-      return {
-        width: estimateTextWidth(text, fontSize, fontWeight ?? 400),
-        height: fontSize * 1.2
-      };
-    }
-    const weight = fontWeight ?? 400;
-    ctx.font = `${weight} ${fontSize}px ${fontFamily}`;
-    const metrics = ctx.measureText(text);
-    return {
-      width: metrics.width,
-      height: fontSize * 1.2
-    };
-  };
-}
-function resolveFontFamily(container) {
-  if (typeof window === "undefined" || typeof getComputedStyle !== "function") {
-    return DEFAULT_FONT_FAMILY;
-  }
-  try {
-    const style = getComputedStyle(container);
-    const custom = style.getPropertyValue("--oc-font-family").trim();
-    if (custom) return custom;
-    const computed = style.fontFamily?.trim();
-    if (computed) return computed;
-  } catch {
-  }
-  return DEFAULT_FONT_FAMILY;
-}
-function primaryFontName(fontFamily) {
-  const first = fontFamily.split(",")[0]?.trim() ?? "";
-  return first.replace(/^["']|["']$/g, "").trim();
-}
-function fontsPending(fontFamily) {
-  if (typeof document === "undefined") return false;
-  const fonts = document.fonts;
-  if (!fonts || typeof fonts.check !== "function") return false;
-  const name = primaryFontName(fontFamily);
-  if (!name) return false;
-  const generics = /* @__PURE__ */ new Set([
-    "sans-serif",
-    "serif",
-    "monospace",
-    "system-ui",
-    "cursive",
-    "fantasy",
-    "ui-sans-serif",
-    "ui-serif",
-    "ui-monospace"
-  ]);
-  if (generics.has(name.toLowerCase())) return false;
-  try {
-    return !fonts.check(`12px "${name}"`);
-  } catch {
-    return false;
-  }
-}
-function scheduleFontReload(fontFamily, isAlive, onReady) {
-  if (!fontsPending(fontFamily)) return false;
-  const fonts = document.fonts;
-  if (!fonts?.ready) return false;
-  fonts.ready.then(() => {
-    if (isAlive()) onReady();
-  });
-  return true;
-}
-
-// src/resize-observer.ts
-var DEBOUNCE_MS = 16;
-function observeResize(container, callback) {
-  let timeoutId = null;
-  const observer = new ResizeObserver((entries) => {
-    if (timeoutId !== null) {
-      clearTimeout(timeoutId);
-    }
-    timeoutId = setTimeout(() => {
-      for (const entry of entries) {
-        const { width, height } = entry.contentRect;
-        callback(width, height);
-      }
-      timeoutId = null;
-    }, DEBOUNCE_MS);
-  });
-  observer.observe(container);
-  return () => {
-    if (timeoutId !== null) {
-      clearTimeout(timeoutId);
-    }
-    observer.disconnect();
-  };
-}
-
-// src/tooltip.ts
-import { computePosition, flip, offset, shift } from "@floating-ui/dom";
-var TOOLTIP_OFFSET = 12;
-function createTooltipManager(container) {
-  const tooltip = document.createElement("div");
-  tooltip.className = "oc-tooltip";
-  tooltip.setAttribute("role", "tooltip");
-  container.style.position = container.style.position || "relative";
-  container.appendChild(tooltip);
-  let lastContentKey = "";
-  let currentPositionId = 0;
-  const handleDocumentTouch = (e) => {
-    if (!container.contains(e.target)) {
-      hide();
-    }
-  };
-  document.addEventListener("touchstart", handleDocumentTouch);
-  function show(content, x3, y3, opts) {
-    const contentKey = `${content.title}|${content.fields.length}|${content.fields[0]?.value}|${content.fields[content.fields.length - 1]?.value}`;
-    if (contentKey !== lastContentKey) {
-      lastContentKey = contentKey;
-      let html = "";
-      const colorRowCount = content.fields.filter((f) => f.color).length;
-      const perRowSwatches = colorRowCount > 1;
-      if (content.title) {
-        const titleColor = perRowSwatches ? void 0 : content.fields.find((f) => f.color)?.color;
-        html += '<div class="oc-tooltip-header">';
-        if (titleColor) {
-          html += `<span class="oc-tooltip-dot" style="background:${esc(titleColor)}"></span>`;
-        }
-        html += `<span class="oc-tooltip-title">${esc(content.title)}</span>`;
-        html += "</div>";
-      }
-      if (content.fields.length > 0) {
-        html += '<div class="oc-tooltip-body">';
-        for (const field of content.fields) {
-          html += '<div class="oc-tooltip-row">';
-          html += '<span class="oc-tooltip-label">';
-          if (perRowSwatches && field.color) {
-            html += `<span class="oc-tooltip-row-swatch" style="background:${esc(field.color)}"></span>`;
-          }
-          html += `${esc(field.label)}</span>`;
-          html += `<span class="oc-tooltip-value">${esc(field.value)}</span>`;
-          html += "</div>";
-        }
-        html += "</div>";
-      }
-      tooltip.innerHTML = html;
-    }
-    tooltip.style.display = "block";
-    const positionId = ++currentPositionId;
-    const virtualRef = {
-      getBoundingClientRect() {
-        const rect = container.getBoundingClientRect();
-        return {
-          x: rect.left + x3,
-          y: rect.top + y3,
-          width: 0,
-          height: 0,
-          top: rect.top + y3,
-          left: rect.left + x3,
-          right: rect.left + x3,
-          bottom: rect.top + y3
-        };
-      }
-    };
-    computePosition(virtualRef, tooltip, {
-      placement: opts?.placement ?? "bottom-start",
-      middleware: [offset(TOOLTIP_OFFSET), flip(), shift({ padding: 8 })]
-    }).then(({ x: fx, y: fy }) => {
-      if (positionId !== currentPositionId) return;
-      tooltip.style.left = `${fx}px`;
-      tooltip.style.top = `${fy}px`;
-    });
-  }
-  function hide() {
-    tooltip.style.display = "none";
-    lastContentKey = "";
-  }
-  function destroy() {
-    document.removeEventListener("touchstart", handleDocumentTouch);
-    if (tooltip.parentNode) {
-      tooltip.parentNode.removeChild(tooltip);
-    }
-  }
-  return { show, hide, destroy };
-}
-function esc(str) {
-  return str.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(/"/g, "&quot;").replace(/'/g, "&#x27;");
-}
-
 // src/barlist-mount.ts
 function resolveDarkMode(mode) {
   if (mode === "force") return true;
@@ -889,7 +439,7 @@ function createBarList(container, spec, options) {
   }
   currentLayout = compile();
   render(true);
-  const fontsPending2 = scheduleFontReload(
+  const fontsPending = scheduleFontReload(
     fontFamily,
     () => !destroyed,
     () => {
@@ -897,7 +447,7 @@ function createBarList(container, spec, options) {
       resize();
     }
   );
-  container.dataset.ocFontsState = fontsPending2 ? "pending" : "ready";
+  container.dataset.ocFontsState = fontsPending ? "pending" : "ready";
   if (options?.responsive !== false) {
     disconnectResize = observeResize(container, () => resize());
   }
@@ -3839,3887 +3389,110 @@ function escapeHtml(str) {
   return str.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(/"/g, "&quot;");
 }
 
-// src/mount.ts
-import { isGraphSpec, isLayerSpec } from "@opendata-ai/openchart-core";
-import { compileChart, compileLayer, legendGap } from "@opendata-ai/openchart-engine";
-
-// src/interactions/chart-events.ts
-function buildMarkDataMap(layout) {
-  const map = /* @__PURE__ */ new Map();
-  for (let i = 0; i < layout.marks.length; i++) {
-    const mark = layout.marks[i];
-    switch (mark.type) {
-      case "line":
-        map.set(`line-${mark.seriesKey ?? i}`, {
-          datum: mark.data[0] ?? {},
-          series: mark.seriesKey
-        });
-        break;
-      case "area":
-        map.set(`area-${mark.seriesKey ?? i}`, {
-          datum: mark.data[0] ?? {},
-          series: mark.seriesKey
-        });
-        break;
-      case "rect":
-        map.set(`rect-${i}`, { datum: mark.data });
-        break;
-      case "arc":
-        map.set(`arc-${i}`, { datum: mark.data });
-        break;
-      case "point":
-        map.set(`point-${i}`, { datum: mark.data });
-        break;
-    }
+// src/renderers/table-cells.ts
+function applyCellStyle(td, cell) {
+  if (cell.style.backgroundColor) {
+    td.style.background = cell.style.backgroundColor;
   }
-  return map;
-}
-function wireChartEvents(svg, layout, specAnnotations, handlers) {
-  const cleanups = [];
-  const markDataMap = buildMarkDataMap(layout);
-  if (handlers.onMarkClick || handlers.onMarkHover || handlers.onMarkLeave) {
-    const markElements = svg.querySelectorAll("[data-mark-id]");
-    for (const el of markElements) {
-      const markId = el.getAttribute("data-mark-id");
-      if (!markId) continue;
-      const markInfo = markDataMap.get(markId);
-      if (!markInfo) continue;
-      const series = markInfo.series ?? el.getAttribute("data-series") ?? void 0;
-      if (handlers.onMarkClick) {
-        const handleClick = (e) => {
-          const mouseEvent = e;
-          const svgRect = svg.getBoundingClientRect();
-          handlers.onMarkClick({
-            datum: markInfo.datum,
-            series,
-            position: {
-              x: mouseEvent.clientX - svgRect.left,
-              y: mouseEvent.clientY - svgRect.top
-            },
-            event: mouseEvent
-          });
-        };
-        el.addEventListener("click", handleClick);
-        cleanups.push(() => el.removeEventListener("click", handleClick));
-      }
-      if (handlers.onMarkHover) {
-        const handleEnter = (e) => {
-          const mouseEvent = e;
-          const svgRect = svg.getBoundingClientRect();
-          handlers.onMarkHover({
-            datum: markInfo.datum,
-            series,
-            position: {
-              x: mouseEvent.clientX - svgRect.left,
-              y: mouseEvent.clientY - svgRect.top
-            },
-            event: mouseEvent
-          });
-        };
-        el.addEventListener("mouseenter", handleEnter);
-        cleanups.push(() => el.removeEventListener("mouseenter", handleEnter));
-      }
-      if (handlers.onMarkLeave) {
-        const handleLeave = () => {
-          handlers.onMarkLeave();
-        };
-        el.addEventListener("mouseleave", handleLeave);
-        cleanups.push(() => el.removeEventListener("mouseleave", handleLeave));
-      }
-    }
+  if (cell.style.color) {
+    td.style.color = cell.style.color;
   }
-  if (handlers.onAnnotationClick) {
-    const annotationElements = svg.querySelectorAll(".oc-annotation");
-    for (let i = 0; i < annotationElements.length; i++) {
-      const el = annotationElements[i];
-      const specAnnotation = specAnnotations[i];
-      if (!specAnnotation) continue;
-      const handleClick = (e) => {
-        const mouseEvent = e;
-        handlers.onAnnotationClick(specAnnotation, mouseEvent);
-      };
-      el.addEventListener("click", handleClick);
-      cleanups.push(() => el.removeEventListener("click", handleClick));
-    }
+  if (cell.style.fontWeight) {
+    td.style.fontWeight = String(cell.style.fontWeight);
+  }
+  if (cell.style.fontVariant) {
+    td.style.fontVariant = cell.style.fontVariant;
+  }
+  if (cell.aria) {
+    td.setAttribute("aria-label", cell.aria);
   }
-  return () => {
-    for (const cleanup of cleanups) {
-      cleanup();
-    }
-  };
 }
-
-// src/interactions/crosshair.ts
-import { getRepresentativeColor } from "@opendata-ai/openchart-core";
-function snapKey(x3) {
-  return Math.round(x3);
+function countryToEmoji(code) {
+  return [...code.toUpperCase()].map((c2) => String.fromCodePoint(c2.charCodeAt(0) + 127397)).join("");
 }
-function collectSeriesGroups(layout) {
-  const byKey = /* @__PURE__ */ new Map();
-  const markTypeByKey = /* @__PURE__ */ new Map();
-  for (let i = 0; i < layout.marks.length; i++) {
-    const mark = layout.marks[i];
-    if ((mark.type === "line" || mark.type === "area") && mark.dataPoints?.length) {
-      const key = mark.seriesKey ?? "__default__";
-      const existingType = markTypeByKey.get(key);
-      if (existingType === "line" && mark.type === "area") continue;
-      const color = mark.type === "line" ? mark.stroke : getRepresentativeColor(mark.fill);
-      const pointsByX = /* @__PURE__ */ new Map();
-      for (const dp of mark.dataPoints) {
-        pointsByX.set(snapKey(dp.x), { ...dp });
-      }
-      byKey.set(key, { seriesKey: key, color, pointsByX });
-      markTypeByKey.set(key, mark.type);
-    }
-  }
-  return Array.from(byKey.values());
+var COUNTRY_NAMES = {
+  US: "United States",
+  CN: "China",
+  IN: "India",
+  ID: "Indonesia",
+  BR: "Brazil",
+  PK: "Pakistan",
+  NG: "Nigeria",
+  BD: "Bangladesh",
+  RU: "Russia",
+  MX: "Mexico",
+  JP: "Japan",
+  DE: "Germany",
+  GB: "United Kingdom",
+  FR: "France",
+  IT: "Italy",
+  CA: "Canada",
+  AU: "Australia",
+  KR: "South Korea",
+  ES: "Spain",
+  AR: "Argentina",
+  CO: "Colombia",
+  ZA: "South Africa",
+  TR: "Turkey",
+  SA: "Saudi Arabia",
+  UA: "Ukraine",
+  PL: "Poland",
+  NL: "Netherlands",
+  SE: "Sweden",
+  NO: "Norway",
+  DK: "Denmark",
+  FI: "Finland",
+  CH: "Switzerland",
+  AT: "Austria",
+  BE: "Belgium",
+  PT: "Portugal",
+  IE: "Ireland",
+  NZ: "New Zealand",
+  SG: "Singapore",
+  IL: "Israel",
+  AE: "United Arab Emirates",
+  EG: "Egypt",
+  TH: "Thailand",
+  VN: "Vietnam",
+  PH: "Philippines",
+  MY: "Malaysia",
+  CL: "Chile",
+  PE: "Peru",
+  CZ: "Czech Republic",
+  GR: "Greece",
+  HU: "Hungary",
+  RO: "Romania",
+  ET: "Ethiopia"
+};
+function getCountryName(code) {
+  return COUNTRY_NAMES[code.toUpperCase()] || code.toUpperCase();
 }
-function collectSnapXs(groups) {
-  const seen = /* @__PURE__ */ new Set();
-  for (const g of groups) {
-    for (const k of g.pointsByX.keys()) seen.add(k);
+function describeSparklineTrend(data) {
+  if (data.type === "line" && data.points.length >= 2) {
+    const first = data.points[0].y;
+    const last = data.points[data.points.length - 1].y;
+    const count = data.points.length;
+    if (last > first) return `Sparkline with ${count} points, trending upward`;
+    if (last < first) return `Sparkline with ${count} points, trending downward`;
+    return `Sparkline with ${count} points, roughly flat`;
   }
-  return Array.from(seen).sort((a2, b) => a2 - b);
+  if ((data.type === "bar" || data.type === "column") && data.bars.length > 0) {
+    return `${data.type === "column" ? "Column" : "Bar"} sparkline with ${data.bars.length} values`;
+  }
+  return "Sparkline";
 }
-function findNearestX(sortedXs, x3) {
-  if (sortedXs.length === 0) return null;
-  let lo = 0;
-  let hi = sortedXs.length - 1;
-  while (lo < hi) {
-    const mid = lo + hi >> 1;
-    if (sortedXs[mid] < x3) lo = mid + 1;
-    else hi = mid;
-  }
-  const candidate = sortedXs[lo];
-  if (lo > 0) {
-    const prev = sortedXs[lo - 1];
-    if (Math.abs(prev - x3) < Math.abs(candidate - x3)) return prev;
-  }
-  return candidate;
+function renderTextCell(cell) {
+  const td = document.createElement("td");
+  td.textContent = cell.formattedValue;
+  applyCellStyle(td, cell);
+  return td;
 }
-function buildSliceTooltip(hits) {
-  if (hits.length === 0) return null;
-  const title = hits[0].point.tooltip?.title;
-  const fields = [];
-  const isMulti = hits.length > 1;
-  for (const { group, point } of hits) {
-    const tip = point.tooltip;
-    if (!tip) continue;
-    if (isMulti) {
-      const yField = tip.fields.find((f) => !f.color && f.label !== title) ?? tip.fields[tip.fields.length - 1] ?? null;
-      if (!yField) continue;
-      fields.push({
-        label: group.seriesKey,
-        value: yField.value,
-        color: group.color
-      });
-    } else {
-      for (const f of tip.fields) {
-        fields.push({ ...f, color: f.color ?? group.color });
-      }
-    }
-  }
-  if (fields.length === 0) return null;
-  return { title, fields };
-}
-function wireVoronoiTooltipEvents(svg, layout, tooltipManager) {
-  const overlay = svg.querySelector("[data-voronoi-overlay]");
-  if (!overlay) return () => {
-  };
-  const groups = collectSeriesGroups(layout);
-  if (groups.length === 0) return () => {
-  };
-  const snapXs = collectSnapXs(groups);
-  if (snapXs.length === 0) return () => {
-  };
-  const crosshair = svg.querySelector("[data-crosshair]");
-  const dotsLayer = svg.querySelector("[data-snap-dots]");
-  const dots = [];
-  if (dotsLayer) {
-    while (dotsLayer.firstChild) dotsLayer.removeChild(dotsLayer.firstChild);
-    for (const group of groups) {
-      const circle = document.createElementNS("http://www.w3.org/2000/svg", "circle");
-      circle.setAttribute("r", "4");
-      circle.setAttribute("fill", layout.theme.colors.background);
-      circle.setAttribute("stroke", group.color);
-      circle.setAttribute("stroke-width", "2");
-      circle.setAttribute("pointer-events", "none");
-      circle.style.display = "none";
-      dotsLayer.appendChild(circle);
-      dots.push(circle);
-    }
-  }
-  const positionAt = (svgX, _svgY, viewBoxToContainer) => {
-    const snappedX = findNearestX(snapXs, svgX);
-    if (snappedX === null) return false;
-    const hits = [];
-    let anchorY = 0;
-    let anchorCount = 0;
-    for (let i = 0; i < groups.length; i++) {
-      const group = groups[i];
-      const point = group.pointsByX.get(snappedX);
-      const dot = dots[i];
-      if (point) {
-        hits.push({ group, point });
-        anchorY += point.y;
-        anchorCount += 1;
-        if (dot) {
-          dot.setAttribute("cx", String(point.x));
-          dot.setAttribute("cy", String(point.y));
-          dot.style.display = "";
-        }
-      } else if (dot) {
-        dot.style.display = "none";
-      }
-    }
-    if (crosshair) {
-      crosshair.setAttribute("x1", String(snappedX));
-      crosshair.setAttribute("x2", String(snappedX));
-      crosshair.style.display = "";
-    }
-    const tooltip = buildSliceTooltip(hits);
-    if (!tooltip) return false;
-    const containerAnchorX = snappedX * viewBoxToContainer;
-    const containerAnchorY = anchorCount > 0 ? anchorY / anchorCount * viewBoxToContainer : 0;
-    tooltipManager.show(tooltip, containerAnchorX, containerAnchorY, {
-      placement: "right"
-    });
-    return true;
-  };
-  const toSvgCoords = (clientX, clientY) => {
-    const svgEl = svg;
-    const svgRect = svgEl.getBoundingClientRect();
-    const viewBox = svgEl.viewBox?.baseVal;
-    const scaleX = viewBox?.width && svgRect.width ? viewBox.width / svgRect.width : 1;
-    const scaleY = viewBox?.height && svgRect.height ? viewBox.height / svgRect.height : 1;
-    const svgX = (clientX - svgRect.left) * scaleX;
-    const svgY = (clientY - svgRect.top) * scaleY;
-    const viewBoxToContainer = scaleX > 0 ? 1 / scaleX : 1;
-    return { svgX, svgY, viewBoxToContainer };
-  };
-  const handleMouseMove = (e) => {
-    const me = e;
-    const { svgX, svgY, viewBoxToContainer } = toSvgCoords(me.clientX, me.clientY);
-    positionAt(svgX, svgY, viewBoxToContainer);
-  };
-  const hideAll = () => {
-    if (crosshair) crosshair.style.display = "none";
-    for (const dot of dots) dot.style.display = "none";
-    tooltipManager.hide();
-  };
-  const handleTouch = (e) => {
-    const te = e;
-    if (te.touches.length === 0) return;
-    const t = te.touches[0];
-    const { svgX, svgY, viewBoxToContainer } = toSvgCoords(t.clientX, t.clientY);
-    if (te.cancelable) te.preventDefault();
-    positionAt(svgX, svgY, viewBoxToContainer);
-  };
-  overlay.addEventListener("mousemove", handleMouseMove);
-  overlay.addEventListener("mouseleave", hideAll);
-  overlay.addEventListener("touchstart", handleTouch, { passive: false });
-  overlay.addEventListener("touchmove", handleTouch, { passive: false });
-  overlay.addEventListener("touchend", hideAll);
-  return () => {
-    overlay.removeEventListener("mousemove", handleMouseMove);
-    overlay.removeEventListener("mouseleave", hideAll);
-    overlay.removeEventListener("touchstart", handleTouch);
-    overlay.removeEventListener("touchmove", handleTouch);
-    overlay.removeEventListener("touchend", hideAll);
-  };
-}
-
-// 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
-    };
-  }
-  function startDrag(startX, startY) {
-    setDragging(true);
-    const { scaleX, scaleY } = getScale2();
-    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);
-    };
-    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 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 }
-        );
-      }
-      element.style.cursor = "grab";
-      svg.style.userSelect = "";
-      cleanupDocListeners();
-      setDragging(false);
-    };
-    const onMouseMove = (moveEvent) => {
-      handleMove(moveEvent.clientX, moveEvent.clientY);
-    };
-    const onMouseUp = (upEvent) => {
-      handleEnd(upEvent.clientX, upEvent.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 onTouchEnd = (endEvent) => {
-      const touch = endEvent.changedTouches[0];
-      if (touch) {
-        handleEnd(touch.clientX, touch.clientY);
-      } else {
-        handleEnd(startX, startY);
-      }
-    };
-    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);
-  };
-  const handleTouchStart = (e) => {
-    const touchEvent = e;
-    if (touchEvent.touches.length === 1) {
-      touchEvent.preventDefault();
-      startDrag(touchEvent.touches[0].clientX, touchEvent.touches[0].clientY);
-    }
-  };
-  element.addEventListener("mousedown", handleMouseDown);
-  element.addEventListener("touchstart", handleTouchStart, { passive: false });
-  cleanups.push(() => {
-    element.removeEventListener("mousedown", handleMouseDown);
-    element.removeEventListener("touchstart", handleTouchStart);
-  });
-  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 = "";
-  };
-}
-
-// src/interactions/editing-drags.ts
-function wireAnnotationDrag(svg, specAnnotations, onAnnotationEdit, onEdit, setDragging) {
-  const annotationElements = svg.querySelectorAll(".oc-annotation-text");
-  const cleanups = [];
-  for (const el of annotationElements) {
-    const indexStr = el.getAttribute("data-annotation-index");
-    if (indexStr === null) continue;
-    const index2 = Number(indexStr);
-    const specAnnotation = specAnnotations[index2];
-    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("polygon.oc-annotation-connector");
-    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);
-          onEdit?.({ type: "annotation", annotation: textAnnotation, offset: newOffset });
-        }
-      },
-      setDragging
-    });
-    cleanups.push(cleanup);
-  }
-  return () => {
-    for (const cleanup of cleanups) {
-      cleanup();
-    }
-  };
-}
-function wireConnectorEndpointDrag(svg, specAnnotations, onEdit, setDragging) {
-  const SVG_NS3 = "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 index2 = Number(indexStr);
-    const specAnnotation = specAnnotations[index2];
-    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("polygon.oc-annotation-connector");
-      const points = arrowhead?.getAttribute("points") ?? "";
-      const firstPoint = points.split(" ")[0] ?? "0,0";
-      const [px, py] = firstPoint.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_NS3, "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;
-            onEdit({
-              type: "annotation-connector",
-              annotation: textAnnotation,
-              endpoint: ep.name,
-              offset: { dx: origEndDx + dx, dy: origEndDy + dy }
-            });
-          }
-        },
-        setDragging
-      });
-      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);
-    cleanups.push(() => {
-      annotationG.removeEventListener("mouseenter", showHandles);
-      annotationG.removeEventListener("mouseleave", hideHandles);
-      for (const h of createdHandles) {
-        h.remove();
-      }
-    });
-  }
-  return () => {
-    for (const cleanup of cleanups) {
-      cleanup();
-    }
-  };
-}
-function wireAnnotationLabelDrag(svg, specAnnotations, onEdit, setDragging) {
-  const cleanups = [];
-  const selectors = [
-    ".oc-annotation-range .oc-annotation-label",
-    ".oc-annotation-refline .oc-annotation-label"
-  ];
-  for (const selector of selectors) {
-    const labels = svg.querySelectorAll(selector);
-    for (const label of labels) {
-      const annotationG = label.closest(".oc-annotation");
-      if (!annotationG) continue;
-      const indexStr = annotationG.getAttribute("data-annotation-index");
-      if (indexStr === null) continue;
-      const index2 = Number(indexStr);
-      const specAnnotation = specAnnotations[index2];
-      if (!specAnnotation) continue;
-      const labelEl = label;
-      labelEl.style.cursor = "grab";
-      const isRange = specAnnotation.type === "range";
-      const existingLabelOffset = isRange ? specAnnotation.labelOffset : specAnnotation.labelOffset;
-      const origLabelDx = existingLabelOffset?.dx ?? 0;
-      const origLabelDy = existingLabelOffset?.dy ?? 0;
-      const cleanup = createDragHandler({
-        element: labelEl,
-        svg,
-        onMove: (dx, dy) => {
-          labelEl.style.transform = `translate(${dx}px, ${dy}px)`;
-        },
-        onEnd: (dx, dy, moved) => {
-          labelEl.style.transform = "";
-          if (moved) {
-            if (isRange) {
-              onEdit({
-                type: "range-label",
-                annotation: specAnnotation,
-                labelOffset: { dx: origLabelDx + dx, dy: origLabelDy + dy }
-              });
-            } else {
-              onEdit({
-                type: "refline-label",
-                annotation: specAnnotation,
-                labelOffset: { dx: origLabelDx + dx, dy: origLabelDy + dy }
-              });
-            }
-          }
-        },
-        setDragging
-      });
-      cleanups.push(cleanup);
-    }
-  }
-  return () => {
-    for (const cleanup of cleanups) {
-      cleanup();
-    }
-  };
-}
-function wireChromeDrag(svg, spec, onEdit, setDragging) {
-  const chromeTexts = svg.querySelectorAll(".oc-chrome text[data-chrome-key]");
-  const cleanups = [];
-  const chromeConfig = "chrome" in spec ? spec.chrome : void 0;
-  for (const el of chromeTexts) {
-    const textEl = el;
-    const key = textEl.getAttribute("data-chrome-key");
-    if (!key) continue;
-    const chromeEntry = chromeConfig?.[key];
-    const existingOffset = typeof chromeEntry === "object" && chromeEntry !== null ? chromeEntry.offset : void 0;
-    const origChromeDx = existingOffset?.dx ?? 0;
-    const origChromeDy = existingOffset?.dy ?? 0;
-    textEl.style.cursor = "grab";
-    const cleanup = createDragHandler({
-      element: textEl,
-      svg,
-      onMove: (dx, dy) => {
-        textEl.style.transform = `translate(${dx}px, ${dy}px)`;
-      },
-      onEnd: (dx, dy, moved) => {
-        textEl.style.transform = "";
-        if (moved) {
-          onEdit({
-            type: "chrome",
-            key,
-            text: textEl.textContent ?? "",
-            offset: { dx: origChromeDx + dx, dy: origChromeDy + dy }
-          });
-        }
-      },
-      setDragging
-    });
-    cleanups.push(cleanup);
-  }
-  return () => {
-    for (const cleanup of cleanups) {
-      cleanup();
-    }
-  };
-}
-function wireLegendDrag(svg, spec, onEdit, setDragging) {
-  const legendG = svg.querySelector(".oc-legend");
-  if (!legendG) return () => {
-  };
-  const cleanups = [];
-  const legendConfig = "legend" in spec ? spec.legend : void 0;
-  const origLegendDx = legendConfig?.offset?.dx ?? 0;
-  const origLegendDy = legendConfig?.offset?.dy ?? 0;
-  legendG.style.cursor = "grab";
-  const cleanup = createDragHandler({
-    element: legendG,
-    svg,
-    onMove: (dx, dy) => {
-      legendG.style.transform = `translate(${dx}px, ${dy}px)`;
-    },
-    onEnd: (dx, dy, moved) => {
-      legendG.style.transform = "";
-      if (moved) {
-        onEdit({ type: "legend", offset: { dx: origLegendDx + dx, dy: origLegendDy + dy } });
-      }
-    },
-    setDragging
-  });
-  cleanups.push(cleanup);
-  return () => {
-    for (const cleanup2 of cleanups) {
-      cleanup2();
-    }
-  };
-}
-function wireSeriesLabelDrag(svg, spec, onEdit, setDragging) {
-  const labels = svg.querySelectorAll(".oc-mark-label");
-  const cleanups = [];
-  const rawLabels = "labels" in spec ? spec.labels : void 0;
-  const labelsConfig = typeof rawLabels === "object" ? rawLabels : void 0;
-  for (const label of labels) {
-    const labelEl = label;
-    const series = labelEl.getAttribute("data-series") ?? labelEl.closest("[data-series]")?.getAttribute("data-series");
-    if (!series) continue;
-    const existingSeriesOffset = labelsConfig?.offsets?.[series];
-    const origSeriesDx = existingSeriesOffset?.dx ?? 0;
-    const origSeriesDy = existingSeriesOffset?.dy ?? 0;
-    labelEl.style.cursor = "grab";
-    const cleanup = createDragHandler({
-      element: labelEl,
-      svg,
-      onMove: (dx, dy) => {
-        labelEl.style.transform = `translate(${dx}px, ${dy}px)`;
-      },
-      onEnd: (dx, dy, moved) => {
-        labelEl.style.transform = "";
-        if (moved) {
-          onEdit({
-            type: "series-label",
-            series,
-            offset: { dx: origSeriesDx + dx, dy: origSeriesDy + dy }
-          });
-        }
-      },
-      setDragging
-    });
-    cleanups.push(cleanup);
-  }
-  return () => {
-    for (const cleanup of cleanups) {
-      cleanup();
-    }
-  };
-}
-
-// src/interactions/keyboard-nav.ts
-function wireKeyboardNav(svg, container, tooltipDescriptors, tooltipManager, layout) {
-  container.setAttribute("tabindex", "0");
-  container.setAttribute("aria-roledescription", "chart");
-  container.setAttribute("aria-label", layout.a11y.altText);
-  const markElements = [];
-  const allMarkEls = svg.querySelectorAll("[data-mark-id]");
-  for (const el of allMarkEls) {
-    const markId = el.getAttribute("data-mark-id");
-    if (markId && tooltipDescriptors.has(markId)) {
-      markElements.push(el);
-    }
-  }
-  let focusIndex = -1;
-  function highlightMark(index2) {
-    if (focusIndex >= 0 && focusIndex < markElements.length) {
-      markElements[focusIndex].classList.remove("oc-mark-focused");
-      markElements[focusIndex].removeAttribute("aria-selected");
-    }
-    focusIndex = index2;
-    if (focusIndex >= 0 && focusIndex < markElements.length) {
-      const el = markElements[focusIndex];
-      el.classList.add("oc-mark-focused");
-      el.setAttribute("aria-selected", "true");
-    }
-  }
-  function showTooltipForFocused() {
-    if (focusIndex < 0 || focusIndex >= markElements.length) return;
-    const el = markElements[focusIndex];
-    const markId = el.getAttribute("data-mark-id");
-    if (!markId) return;
-    const content = tooltipDescriptors.get(markId);
-    if (!content) return;
-    const bbox = el.getBoundingClientRect();
-    const containerRect = container.getBoundingClientRect();
-    const x3 = bbox.left + bbox.width / 2 - containerRect.left;
-    const y3 = bbox.top - containerRect.top;
-    tooltipManager.show(content, x3, y3);
-  }
-  const handleKeyDown = (e) => {
-    if (markElements.length === 0) return;
-    switch (e.key) {
-      case "ArrowRight":
-      case "ArrowDown": {
-        e.preventDefault();
-        const next = focusIndex < markElements.length - 1 ? focusIndex + 1 : 0;
-        highlightMark(next);
-        showTooltipForFocused();
-        break;
-      }
-      case "ArrowLeft":
-      case "ArrowUp": {
-        e.preventDefault();
-        const prev = focusIndex > 0 ? focusIndex - 1 : markElements.length - 1;
-        highlightMark(prev);
-        showTooltipForFocused();
-        break;
-      }
-      case "Enter":
-      case " ": {
-        e.preventDefault();
-        if (focusIndex >= 0) {
-          showTooltipForFocused();
-        } else if (markElements.length > 0) {
-          highlightMark(0);
-          showTooltipForFocused();
-        }
-        break;
-      }
-      case "Escape": {
-        e.preventDefault();
-        tooltipManager.hide();
-        highlightMark(-1);
-        break;
-      }
-    }
-  };
-  container.addEventListener("keydown", handleKeyDown);
-  return () => {
-    container.removeEventListener("keydown", handleKeyDown);
-    container.removeAttribute("tabindex");
-    container.removeAttribute("aria-roledescription");
-    container.removeAttribute("aria-label");
-  };
-}
-
-// src/interactions/legend-interaction.ts
-function wireLegendInteraction(svg, _layout, toggleSeries, onLegendToggle, onEdit) {
-  const legendEntries = svg.querySelectorAll("[data-legend-index]");
-  const cleanups = [];
-  for (const entry of legendEntries) {
-    if (entry.getAttribute("data-legend-overflow") === "true") continue;
-    const handleClick = () => {
-      const label = entry.getAttribute("data-legend-label");
-      if (!label) return;
-      const nowHidden = toggleSeries(label);
-      onLegendToggle?.(label, !nowHidden);
-      onEdit?.({ type: "legend-toggle", series: label, hidden: nowHidden });
-    };
-    entry.addEventListener("click", handleClick);
-    cleanups.push(() => entry.removeEventListener("click", handleClick));
-  }
-  return () => {
-    for (const cleanup of cleanups) {
-      cleanup();
-    }
-  };
-}
-
-// src/interactions/selection.ts
-import { elementRef } 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}"]`);
-    case "legend":
-      return svg.querySelector(".oc-legend");
-    case "legend-entry":
-      return svg.querySelector(`[data-legend-index="${ref.index}"]`);
-  }
-}
-function buildElementRef(element, _specAnnotations) {
-  const annotationEl = element.closest("[data-annotation-index]");
-  if (annotationEl) {
-    const index2 = Number(annotationEl.getAttribute("data-annotation-index"));
-    const id = annotationEl.getAttribute("data-annotation-id") ?? void 0;
-    return elementRef.annotation(index2, id);
-  }
-  const chromeEl = element.closest("[data-chrome-key]");
-  if (chromeEl) {
-    const key = chromeEl.getAttribute("data-chrome-key");
-    if (key) return elementRef.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);
-  }
-  const legendEntryEl = element.closest("[data-legend-index]");
-  if (legendEntryEl) {
-    const index2 = Number(legendEntryEl.getAttribute("data-legend-index"));
-    const series = legendEntryEl.getAttribute("data-legend-label") ?? "";
-    return elementRef.legendEntry(series, index2);
-  }
-  const legendEl = element.closest(".oc-legend");
-  if (legendEl) return elementRef.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 = "annotations" in spec && Array.isArray(spec.annotations) ? spec.annotations : [];
-  for (let i = 0; i < annotations.length; i++) {
-    refs.push(elementRef.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(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;
-    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(a2, b) {
-  if (a2 === null || b === null) return a2 === b;
-  if (a2.type !== b.type) return false;
-  switch (a2.type) {
-    case "annotation": {
-      const bAnno = b;
-      if (a2.id && bAnno.id) return a2.id === bAnno.id;
-      return a2.index === bAnno.index;
-    }
-    case "chrome":
-      return a2.key === b.key;
-    case "series-label":
-      return a2.series === b.series;
-    case "legend":
-      return true;
-    case "legend-entry": {
-      const bEntry = b;
-      return a2.index === bEntry.index && a2.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 table = document.createElement("table");
-  table.className = "oc-sr-only";
-  table.style.position = "absolute";
-  table.style.width = "1px";
-  table.style.height = "1px";
-  table.style.padding = "0";
-  table.style.margin = "-1px";
-  table.style.overflow = "hidden";
-  table.style.clipPath = "inset(50%)";
-  table.style.whiteSpace = "nowrap";
-  table.style.borderWidth = "0";
-  table.setAttribute("role", "table");
-  table.setAttribute("aria-label", `Data table: ${layout.a11y.altText}`);
-  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);
-  }
-  container.appendChild(table);
-  return table;
-}
-
-// src/interactions/tooltip-events.ts
-function wireTooltipEvents(svg, tooltipDescriptors, tooltipManager) {
-  const markElements = svg.querySelectorAll("[data-mark-id]");
-  const cleanups = [];
-  for (const el of markElements) {
-    const markId = el.getAttribute("data-mark-id");
-    if (!markId) continue;
-    const content = tooltipDescriptors.get(markId);
-    if (!content) continue;
-    const handleMouseEnter = (e) => {
-      const mouseEvent = e;
-      const svgRect = svg.getBoundingClientRect();
-      const x3 = mouseEvent.clientX - svgRect.left;
-      const y3 = mouseEvent.clientY - svgRect.top;
-      tooltipManager.show(content, x3, y3);
-    };
-    const handleMouseMove = (e) => {
-      const mouseEvent = e;
-      const svgRect = svg.getBoundingClientRect();
-      const x3 = mouseEvent.clientX - svgRect.left;
-      const y3 = mouseEvent.clientY - svgRect.top;
-      tooltipManager.show(content, x3, y3);
-    };
-    const handleMouseLeave = () => {
-      tooltipManager.hide();
-    };
-    const handleTouchStart = (e) => {
-      const touchEvent = e;
-      if (touchEvent.touches.length > 0) {
-        const touch = touchEvent.touches[0];
-        const svgRect = svg.getBoundingClientRect();
-        const x3 = touch.clientX - svgRect.left;
-        const y3 = touch.clientY - svgRect.top;
-        tooltipManager.show(content, x3, y3);
-      }
-    };
-    el.addEventListener("mouseenter", handleMouseEnter);
-    el.addEventListener("mousemove", handleMouseMove);
-    el.addEventListener("mouseleave", handleMouseLeave);
-    el.addEventListener("touchstart", handleTouchStart);
-    cleanups.push(() => {
-      el.removeEventListener("mouseenter", handleMouseEnter);
-      el.removeEventListener("mousemove", handleMouseMove);
-      el.removeEventListener("mouseleave", handleMouseLeave);
-      el.removeEventListener("touchstart", handleTouchStart);
-    });
-  }
-  return () => {
-    for (const cleanup of cleanups) {
-      cleanup();
-    }
-  };
-}
-
-// src/text-edit-overlay.ts
-function getScale(svg) {
-  const viewBox = svg.viewBox?.baseVal;
-  const svgRect = svg.getBoundingClientRect();
-  return {
-    scaleX: viewBox?.width && svgRect.width ? svgRect.width / viewBox.width : 1,
-    scaleY: viewBox?.height && svgRect.height ? svgRect.height / viewBox.height : 1
-  };
-}
-function getTextStyles(targetElement, scale) {
-  const computed = window.getComputedStyle(targetElement);
-  const svgFontSize = parseFloat(
-    targetElement.getAttribute("font-size") ?? computed.fontSize ?? "14"
-  );
-  const pixelFontSize = svgFontSize * scale.scaleY;
-  const fontFamily = targetElement.getAttribute("font-family") ?? computed.fontFamily ?? "inherit";
-  const fontWeight = targetElement.getAttribute("font-weight") ?? computed.fontWeight ?? "400";
-  const fill = targetElement.style.getPropertyValue("fill") || targetElement.getAttribute("fill") || computed.color || "#000";
-  const textAnchor = targetElement.getAttribute("text-anchor") ?? "start";
-  let textAlign = "left";
-  if (textAnchor === "middle") textAlign = "center";
-  else if (textAnchor === "end") textAlign = "right";
-  return {
-    fontFamily,
-    fontSize: `${pixelFontSize}px`,
-    fontWeight,
-    color: fill,
-    textAlign,
-    lineHeight: "1.3"
-  };
-}
-function computePosition2(targetElement, svg, container) {
-  const bbox = targetElement.getBBox();
-  const scale = getScale(svg);
-  const svgRect = svg.getBoundingClientRect();
-  const containerRect = container.getBoundingClientRect();
-  const padding = 4;
-  const left = bbox.x * scale.scaleX + (svgRect.left - containerRect.left) - padding;
-  const top = bbox.y * scale.scaleY + (svgRect.top - containerRect.top) - padding;
-  const width = bbox.width * scale.scaleX + padding * 2;
-  const height = bbox.height * scale.scaleY + padding * 2;
-  return {
-    top: Math.max(0, top),
-    left: Math.max(0, left),
-    width: Math.max(width, 60),
-    height: Math.max(height, 24)
-  };
-}
-function createTextEditOverlay(config) {
-  const { container, svg, targetElement, currentText, onCommit, onCancel } = config;
-  let destroyed = false;
-  const originalOpacity = targetElement.getAttribute("opacity");
-  targetElement.setAttribute("opacity", "0");
-  const scale = getScale(svg);
-  const styles = getTextStyles(targetElement, scale);
-  const position = computePosition2(targetElement, svg, container);
-  const textarea = document.createElement("textarea");
-  textarea.value = currentText;
-  const containerPosition = window.getComputedStyle(container).position;
-  const containerWasStatic = containerPosition === "static";
-  if (containerWasStatic) {
-    container.style.position = "relative";
-  }
-  Object.assign(textarea.style, {
-    position: "absolute",
-    top: `${position.top}px`,
-    left: `${position.left}px`,
-    width: `${position.width}px`,
-    minHeight: `${position.height}px`,
-    fontFamily: styles.fontFamily,
-    fontSize: styles.fontSize,
-    fontWeight: styles.fontWeight,
-    color: styles.color,
-    textAlign: styles.textAlign,
-    lineHeight: styles.lineHeight,
-    padding: "2px 4px",
-    margin: "0",
-    border: "1px solid rgba(79, 70, 229, 0.4)",
-    borderRadius: "3px",
-    background: "rgba(255, 255, 255, 0.95)",
-    outline: "none",
-    resize: "none",
-    overflow: "hidden",
-    boxSizing: "border-box",
-    zIndex: "10000",
-    // Remove default textarea appearance
-    WebkitAppearance: "none",
-    appearance: "none"
-  });
-  container.appendChild(textarea);
-  textarea.focus();
-  textarea.select();
-  function destroy() {
-    if (destroyed) return;
-    destroyed = true;
-    if (originalOpacity !== null) {
-      targetElement.setAttribute("opacity", originalOpacity);
-    } else {
-      targetElement.removeAttribute("opacity");
-    }
-    textarea.removeEventListener("keydown", handleKeyDown);
-    document.removeEventListener("mousedown", handleClickOutside);
-    resizeObserver.disconnect();
-    if (containerWasStatic) {
-      container.style.position = "";
-    }
-    if (textarea.parentNode) {
-      textarea.parentNode.removeChild(textarea);
-    }
-  }
-  function commit() {
-    if (destroyed) return;
-    const newText = textarea.value;
-    destroy();
-    onCommit(newText);
-  }
-  function cancel() {
-    if (destroyed) return;
-    destroy();
-    onCancel();
-  }
-  const handleKeyDown = (e) => {
-    if (e.key === "Enter" && !e.shiftKey) {
-      e.preventDefault();
-      commit();
-    } else if (e.key === "Escape") {
-      e.preventDefault();
-      cancel();
-    }
-  };
-  textarea.addEventListener("keydown", handleKeyDown);
-  const handleClickOutside = (e) => {
-    if (!textarea.contains(e.target)) {
-      commit();
-    }
-  };
-  requestAnimationFrame(() => {
-    if (!destroyed) {
-      document.addEventListener("mousedown", handleClickOutside);
-    }
-  });
-  const resizeObserver = new ResizeObserver(() => {
-    if (destroyed) return;
-    const newPosition = computePosition2(targetElement, svg, container);
-    textarea.style.top = `${newPosition.top}px`;
-    textarea.style.left = `${newPosition.left}px`;
-    textarea.style.width = `${newPosition.width}px`;
-    textarea.style.minHeight = `${newPosition.height}px`;
-  });
-  resizeObserver.observe(container);
-  return { destroy };
-}
-
-// src/theme-tokens.ts
-import { adaptForLightLineStroke } from "@opendata-ai/openchart-core";
-function stampThemeProperties(el, theme) {
-  const accent = theme.colors.categorical[0] ?? "#06b6d4";
-  const bg = theme.colors.background === "transparent" ? theme.isDark ? "#09090b" : "#ffffff" : theme.colors.background;
-  const props = [
-    ["--oc-font-family", theme.fonts.family],
-    ["--oc-font-mono", theme.fonts.mono],
-    ["--oc-title-size", `${theme.chrome.title.fontSize}px`],
-    ["--oc-title-weight", `${theme.chrome.title.fontWeight}`],
-    ["--oc-subtitle-size", `${theme.chrome.subtitle.fontSize}px`],
-    ["--oc-subtitle-weight", `${theme.chrome.subtitle.fontWeight}`],
-    ["--oc-source-size", `${theme.chrome.source.fontSize}px`],
-    ["--oc-source-weight", `${theme.chrome.source.fontWeight}`],
-    ["--oc-body-size", `${theme.fonts.sizes.body}px`],
-    ["--oc-eyebrow-size", `${theme.chrome.eyebrow.fontSize}px`],
-    ["--oc-eyebrow-weight", `${theme.chrome.eyebrow.fontWeight}`],
-    ["--oc-bg", bg],
-    ["--oc-text", theme.colors.text],
-    ["--oc-text-muted", theme.colors.axis],
-    ["--oc-gridline", theme.colors.gridline],
-    ["--oc-axis", theme.colors.axis],
-    ["--oc-border-radius", `${theme.borderRadius}px`],
-    ["--oc-accent", accent],
-    ["--oc-accent-strong", adaptForLightLineStroke(accent)],
-    ["--oc-positive", theme.colors.positive],
-    ["--oc-negative", theme.colors.negative],
-    ["--oc-space-2", `${theme.spacing.chromeGap * 2}px`],
-    ["--oc-space-4", `${theme.spacing.padding}px`]
-  ];
-  for (const [name, value] of props) {
-    el.style.setProperty(name, value);
-  }
-}
-
-// src/transition.ts
-import { isGradientDef } from "@opendata-ai/openchart-core";
-import {
-  buildAreaPath,
-  buildLinePath,
-  EXIT_DEFAULTS,
-  serializeKeyValue
-} from "@opendata-ai/openchart-engine";
-function cubicOut(t) {
-  const f = 1 - t;
-  return 1 - f * f * f;
-}
-var TRANSITIONABLE_MARKS = /* @__PURE__ */ new Set(["bar", "line", "area", "point"]);
-function canTransition(args) {
-  const { prevLayout, nextLayout, prevSpec, nextSpec, isFirstRender, entranceInFlight } = args;
-  if (!prevLayout || !prevSpec || isFirstRender) return false;
-  if (!nextLayout.animation?.update) return false;
-  const prev = prevSpec;
-  const next = nextSpec;
-  if (!("mark" in prev) || !("mark" in next)) return false;
-  const prevMark = typeof prev.mark === "string" ? prev.mark : prev.mark?.type;
-  const nextMark = typeof next.mark === "string" ? next.mark : next.mark?.type;
-  if (prevMark !== nextMark) return false;
-  if (!TRANSITIONABLE_MARKS.has(prevMark)) return false;
-  const prevEnc = prev.encoding;
-  const nextEnc = next.encoding;
-  if (!prevEnc || !nextEnc) return false;
-  if (prevEnc.x?.field !== nextEnc.x?.field || prevEnc.x?.type !== nextEnc.x?.type || prevEnc.y?.field !== nextEnc.y?.field || prevEnc.y?.type !== nextEnc.y?.type || prevEnc.color?.field !== nextEnc.color?.field) {
-    return false;
-  }
-  if (nextLayout.display === "sparkline") return false;
-  if (entranceInFlight) return false;
-  if (prevLayout.dimensions.width !== nextLayout.dimensions.width || prevLayout.dimensions.height !== nextLayout.dimensions.height) {
-    return false;
-  }
-  if (nextLayout.marks.length > 500) return false;
-  if (!hasGeometryChanged(prevLayout, nextLayout)) return false;
-  if (typeof window !== "undefined" && typeof window.matchMedia === "function") {
-    try {
-      if (window.matchMedia("(prefers-reduced-motion: reduce)").matches) return false;
-    } catch {
-    }
-  }
-  return true;
-}
-function hasGeometryChanged(prevLayout, nextLayout) {
-  const prevMarks = prevLayout.marks;
-  const nextMarks = nextLayout.marks;
-  if (prevMarks.length !== nextMarks.length) return true;
-  for (let i = 0; i < prevMarks.length; i++) {
-    const p = prevMarks[i];
-    const n = nextMarks[i];
-    if (p.type !== n.type || p.key !== n.key) return true;
-    if (p.type === "rect" && n.type === "rect") {
-      if (p.x !== n.x || p.y !== n.y || p.width !== n.width || p.height !== n.height) return true;
-    } else if (p.type === "line" && n.type === "line") {
-      if (p.path !== n.path || p.points.length !== n.points.length) return true;
-      for (let j = 0; j < p.points.length; j++) {
-        if (p.points[j].x !== n.points[j].x || p.points[j].y !== n.points[j].y) return true;
-      }
-    } else if (p.type === "area" && n.type === "area") {
-      if (p.path !== n.path) return true;
-    } else if (p.type === "point" && n.type === "point") {
-      if (p.cx !== n.cx || p.cy !== n.cy || p.r !== n.r) return true;
-    } else if (p.type === "rule" && n.type === "rule") {
-      if (p.x1 !== n.x1 || p.y1 !== n.y1 || p.x2 !== n.x2 || p.y2 !== n.y2) return true;
-    } else if (p.type === "tick" && n.type === "tick") {
-      if (p.x !== n.x || p.y !== n.y) return true;
-    } else if (p.type === "textMark" && n.type === "textMark") {
-      if (p.x !== n.x || p.y !== n.y) return true;
-    }
-  }
-  return false;
-}
-function geomFromMark(m2) {
-  return { x: m2.x, y: m2.y, width: m2.width, height: m2.height };
-}
-function applyGeomToElement(el, geom, mark) {
-  const shapeEl = el.querySelector("rect, path");
-  if (!shapeEl) return;
-  const sides = mark.cornerRadiusSides;
-  const partialCorners = !!sides && (!sides.tl || !sides.tr || !sides.br || !sides.bl) && !!mark.cornerRadius;
-  if (partialCorners && shapeEl.tagName === "path") {
-    const tempMark = { ...mark, ...geom };
-    shapeEl.setAttribute("d", rectPathWithCorners(tempMark, sides));
-  } else {
-    shapeEl.setAttribute("x", String(geom.x));
-    shapeEl.setAttribute("y", String(geom.y));
-    shapeEl.setAttribute("width", String(geom.width));
-    shapeEl.setAttribute("height", String(geom.height));
-  }
-}
-function lerpGeom(from, to, t) {
-  return {
-    x: from.x + (to.x - from.x) * t,
-    y: from.y + (to.y - from.y) * t,
-    width: from.width + (to.width - from.width) * t,
-    height: from.height + (to.height - from.height) * t
-  };
-}
-function lerpPoint(a2, b, t) {
-  return { x: a2.x + (b.x - a2.x) * t, y: a2.y + (b.y - a2.y) * t };
-}
-function normalizePointArrays(prevPoints, nextPoints, prevKeys, nextKeys) {
-  const nextKeySet = new Set(nextKeys);
-  const survivors = prevKeys.filter((k) => nextKeySet.has(k));
-  if (survivors.length === 0) {
-    return [prevPoints, nextPoints];
-  }
-  const prevByKey = /* @__PURE__ */ new Map();
-  for (let i = 0; i < prevKeys.length; i++) {
-    prevByKey.set(prevKeys[i], prevPoints[i]);
-  }
-  const nextByKey = /* @__PURE__ */ new Map();
-  for (let i = 0; i < nextKeys.length; i++) {
-    nextByKey.set(nextKeys[i], nextPoints[i]);
-  }
-  const merged = mergeKeyOrder(prevKeys, nextKeys);
-  const mergedIndex = /* @__PURE__ */ new Map();
-  for (let i = 0; i < merged.length; i++) {
-    mergedIndex.set(merged[i], i);
-  }
-  const fromPts = [];
-  const toPts = [];
-  for (const key of merged) {
-    const inPrev = prevByKey.has(key);
-    const inNext = nextByKey.has(key);
-    if (inPrev && inNext) {
-      fromPts.push(prevByKey.get(key));
-      toPts.push(nextByKey.get(key));
-    } else if (inNext && !inPrev) {
-      const nextPt = nextByKey.get(key);
-      toPts.push(nextPt);
-      fromPts.push(findInsertionPosition(key, merged, mergedIndex, prevByKey, nextByKey, nextPt));
-    } else if (inPrev && !inNext) {
-      const prevPt = prevByKey.get(key);
-      fromPts.push(prevPt);
-      toPts.push(findRemovalPosition(key, merged, mergedIndex, prevByKey, nextByKey, prevPt));
-    }
-  }
-  return [fromPts, toPts];
-}
-function mergeKeyOrder(prevKeys, nextKeys) {
-  const nextIndex = /* @__PURE__ */ new Map();
-  for (let i = 0; i < nextKeys.length; i++) {
-    if (!nextIndex.has(nextKeys[i])) nextIndex.set(nextKeys[i], i);
-  }
-  const prevIndex = /* @__PURE__ */ new Map();
-  for (let i = 0; i < prevKeys.length; i++) {
-    if (!prevIndex.has(prevKeys[i])) prevIndex.set(prevKeys[i], i);
-  }
-  const result = [];
-  const added = /* @__PURE__ */ new Set();
-  let pi = 0;
-  let ni = 0;
-  while (pi < prevKeys.length && ni < nextKeys.length) {
-    const pk = prevKeys[pi];
-    const nk = nextKeys[ni];
-    if (added.has(pk)) {
-      pi++;
-      continue;
-    }
-    if (added.has(nk)) {
-      ni++;
-      continue;
-    }
-    if (pk === nk) {
-      result.push(pk);
-      added.add(pk);
-      pi++;
-      ni++;
-    } else {
-      const pkInNext = nextIndex.has(pk) && nextIndex.get(pk) >= ni ? nextIndex.get(pk) : -1;
-      const nkInPrev = prevIndex.has(nk) && prevIndex.get(nk) >= pi ? prevIndex.get(nk) : -1;
-      if (pkInNext === -1 && nkInPrev === -1) {
-        result.push(pk);
-        added.add(pk);
-        pi++;
-      } else if (pkInNext === -1) {
-        result.push(pk);
-        added.add(pk);
-        pi++;
-      } else if (nkInPrev === -1) {
-        result.push(nk);
-        added.add(nk);
-        ni++;
-      } else {
-        if (pkInNext <= nkInPrev) {
-          result.push(pk);
-          added.add(pk);
-          pi++;
-        } else {
-          result.push(nk);
-          added.add(nk);
-          ni++;
-        }
-      }
-    }
-  }
-  while (pi < prevKeys.length) {
-    if (!added.has(prevKeys[pi])) {
-      result.push(prevKeys[pi]);
-      added.add(prevKeys[pi]);
-    }
-    pi++;
-  }
-  while (ni < nextKeys.length) {
-    if (!added.has(nextKeys[ni])) {
-      result.push(nextKeys[ni]);
-      added.add(nextKeys[ni]);
-    }
-    ni++;
-  }
-  return result;
-}
-function findInsertionPosition(key, merged, mergedIndex, prevByKey, nextByKey, nextPt) {
-  const idx = mergedIndex.get(key) ?? -1;
-  let beforeKey = null;
-  for (let i = idx - 1; i >= 0; i--) {
-    if (prevByKey.has(merged[i]) && nextByKey.has(merged[i])) {
-      beforeKey = merged[i];
-      break;
-    }
-  }
-  let afterKey = null;
-  for (let i = idx + 1; i < merged.length; i++) {
-    if (prevByKey.has(merged[i]) && nextByKey.has(merged[i])) {
-      afterKey = merged[i];
-      break;
-    }
-  }
-  if (beforeKey && afterKey) {
-    const beforeNext = nextByKey.get(beforeKey);
-    const afterNext = nextByKey.get(afterKey);
-    const beforePrev = prevByKey.get(beforeKey);
-    const afterPrev = prevByKey.get(afterKey);
-    const range = afterNext.x - beforeNext.x;
-    const t = range === 0 ? 0.5 : (nextPt.x - beforeNext.x) / range;
-    return lerpPoint(beforePrev, afterPrev, Math.max(0, Math.min(1, t)));
-  }
-  if (beforeKey) {
-    return { ...prevByKey.get(beforeKey) };
-  }
-  if (afterKey) {
-    return { ...prevByKey.get(afterKey) };
-  }
-  return nextPt;
-}
-function findRemovalPosition(key, merged, mergedIndex, prevByKey, nextByKey, prevPt) {
-  const idx = mergedIndex.get(key) ?? -1;
-  let beforeKey = null;
-  for (let i = idx - 1; i >= 0; i--) {
-    if (prevByKey.has(merged[i]) && nextByKey.has(merged[i])) {
-      beforeKey = merged[i];
-      break;
-    }
-  }
-  let afterKey = null;
-  for (let i = idx + 1; i < merged.length; i++) {
-    if (prevByKey.has(merged[i]) && nextByKey.has(merged[i])) {
-      afterKey = merged[i];
-      break;
-    }
-  }
-  if (beforeKey && afterKey) {
-    const beforePrev = prevByKey.get(beforeKey);
-    const afterPrev = prevByKey.get(afterKey);
-    const beforeNext = nextByKey.get(beforeKey);
-    const afterNext = nextByKey.get(afterKey);
-    const range = afterPrev.x - beforePrev.x;
-    const t = range === 0 ? 0.5 : (prevPt.x - beforePrev.x) / range;
-    return lerpPoint(beforeNext, afterNext, Math.max(0, Math.min(1, t)));
-  }
-  if (beforeKey) {
-    return { ...nextByKey.get(beforeKey) };
-  }
-  if (afterKey) {
-    return { ...nextByKey.get(afterKey) };
-  }
-  return prevPt;
-}
-function interpolatePoints(fromPts, toPts, t) {
-  const len = Math.min(fromPts.length, toPts.length);
-  const result = new Array(len);
-  for (let i = 0; i < len; i++) {
-    result[i] = lerpPoint(fromPts[i], toPts[i], t);
-  }
-  return result;
-}
-function applyLinePath(el, points, interpolate) {
-  const pathEl = el.querySelector("path");
-  if (!pathEl) return;
-  pathEl.setAttribute("d", buildLinePath(points, interpolate));
-}
-function applyAreaPaths(el, topPoints, bottomPoints, interpolate, hasStroke) {
-  const paths = el.querySelectorAll("path");
-  if (paths[0]) {
-    paths[0].setAttribute("d", buildAreaPath(topPoints, bottomPoints, interpolate));
-  }
-  if (hasStroke && paths[1]) {
-    paths[1].setAttribute("d", buildLinePath(topPoints, interpolate));
-  }
-}
-function applyFinalLinePath(el, mark) {
-  const pathEl = el.querySelector("path");
-  if (!pathEl || !mark.path) return;
-  pathEl.setAttribute("d", mark.path);
-}
-function applyFinalAreaPaths(el, mark) {
-  const paths = el.querySelectorAll("path");
-  if (paths[0]) {
-    paths[0].setAttribute("d", mark.path);
-  }
-  if (paths[1] && mark.topPath) {
-    paths[1].setAttribute("d", mark.topPath);
-  }
-}
-function runTransition(args) {
-  const { svg, prevLayout, nextLayout, animation, onComplete, fromSnapshot } = args;
-  const update = animation.update;
-  const exit = animation.exit ?? { ...EXIT_DEFAULTS };
-  const totalMs = Math.max(update.duration, exit.duration);
-  const enterDelay = 0.4 * update.duration;
-  const enterDuration = update.duration - enterDelay;
-  const marksContainer = svg.querySelector(".oc-marks");
-  if (!marksContainer) {
-    onComplete();
-    return {
-      cancel() {
-      },
-      get running() {
-        return false;
-      },
-      snapshot() {
-        return /* @__PURE__ */ new Map();
-      }
-    };
-  }
-  const tweens = [];
-  const ghosts = [];
-  const defs = svg.querySelector("defs");
-  let ghostGradientMap = /* @__PURE__ */ new Map();
-  if (defs) {
-    const nextKeySet = new Set(nextLayout.marks.filter((m2) => m2.key).map((m2) => m2.key));
-    const exitingMarks = prevLayout.marks.filter(
-      (m2) => m2.key && !nextKeySet.has(m2.key) && "fill" in m2
-    );
-    const gradientMarks = exitingMarks.filter(
-      (m2) => "fill" in m2 && isGradientDef(m2.fill)
-    );
-    if (gradientMarks.length > 0) {
-      ghostGradientMap = buildGradientDefs(gradientMarks, defs);
-    }
-  }
-  const hasRects = prevLayout.marks.some((m2) => m2.type === "rect") || nextLayout.marks.some((m2) => m2.type === "rect");
-  const hasLines = prevLayout.marks.some((m2) => m2.type === "line") || nextLayout.marks.some((m2) => m2.type === "line");
-  const hasAreas = prevLayout.marks.some((m2) => m2.type === "area") || nextLayout.marks.some((m2) => m2.type === "area");
-  const hasPoints = prevLayout.marks.some((m2) => m2.type === "point") || nextLayout.marks.some((m2) => m2.type === "point");
-  const hasRules = prevLayout.marks.some((m2) => m2.type === "rule") || nextLayout.marks.some((m2) => m2.type === "rule");
-  const hasTicks = prevLayout.marks.some((m2) => m2.type === "tick") || nextLayout.marks.some((m2) => m2.type === "tick");
-  const hasTextMarks = prevLayout.marks.some((m2) => m2.type === "textMark") || nextLayout.marks.some((m2) => m2.type === "textMark");
-  if (hasRects) {
-    buildRectTweens(
-      prevLayout,
-      nextLayout,
-      marksContainer,
-      tweens,
-      ghosts,
-      ghostGradientMap,
-      fromSnapshot
-    );
-  }
-  if (hasLines) {
-    buildLineTweens(prevLayout, nextLayout, marksContainer, tweens, ghosts, fromSnapshot);
-  }
-  if (hasAreas) {
-    buildAreaTweens(
-      prevLayout,
-      nextLayout,
-      marksContainer,
-      tweens,
-      ghosts,
-      ghostGradientMap,
-      fromSnapshot
-    );
-  }
-  if (hasPoints) {
-    buildPointTweens(
-      prevLayout,
-      nextLayout,
-      marksContainer,
-      tweens,
-      ghosts,
-      ghostGradientMap,
-      fromSnapshot
-    );
-  }
-  if (hasRules) {
-    buildRuleTweens(prevLayout, nextLayout, marksContainer, tweens, ghosts, fromSnapshot);
-  }
-  if (hasTicks) {
-    buildTickTweens(prevLayout, nextLayout, marksContainer, tweens, ghosts, fromSnapshot);
-  }
-  if (hasTextMarks) {
-    buildTextMarkTweens(prevLayout, nextLayout, marksContainer, tweens, ghosts, fromSnapshot);
-  }
-  buildAxisTweens(svg, prevLayout, nextLayout, tweens, ghosts);
-  const secondaryEls = collectSecondaryElements(svg);
-  const secondaryOriginalOpacity = secondaryEls.map((el) => el.style.opacity ?? "");
-  for (const tw of tweens) {
-    applyTweenState(tw, 0, update, exit, enterDelay, enterDuration);
-  }
-  for (const el of secondaryEls) {
-    el.style.opacity = "0";
-  }
-  let rafId = null;
-  let running = true;
-  let startTime = null;
-  let lastElapsed = 0;
-  const nextLineMarks = nextLayout.marks.filter((m2) => m2.type === "line");
-  const nextAreaMarks = nextLayout.marks.filter((m2) => m2.type === "area");
-  function tick(now2) {
-    if (!running) return;
-    if (startTime === null) startTime = now2;
-    const elapsed = now2 - startTime;
-    lastElapsed = elapsed;
-    const tGlobal = Math.min(elapsed / totalMs, 1);
-    for (const tw of tweens) {
-      applyTweenState(tw, elapsed, update, exit, enterDelay, enterDuration);
-    }
-    applySecondaryOpacity(secondaryEls, elapsed, enterDelay, enterDuration);
-    if (tGlobal >= 1) {
-      finish();
-    } else {
-      rafId = requestAnimationFrame(tick);
-    }
-  }
-  function finish() {
-    if (!running) return;
-    running = false;
-    rafId = null;
-    snapToFinal();
-    removeGhosts();
-    for (let i = 0; i < secondaryEls.length; i++) {
-      secondaryEls[i].style.opacity = secondaryOriginalOpacity[i];
-    }
-    onComplete();
-  }
-  function snapToFinal() {
-    for (const tw of tweens) {
-      snapTweenToFinal(tw);
-    }
-    for (const mark of nextLineMarks) {
-      if (!mark.key) continue;
-      const el = marksContainer.querySelector(`[data-key="${mark.key}"]`);
-      if (el) applyFinalLinePath(el, mark);
-    }
-    for (const mark of nextAreaMarks) {
-      if (!mark.key) continue;
-      const el = marksContainer.querySelector(`[data-key="${mark.key}"]`);
-      if (el) applyFinalAreaPaths(el, mark);
-    }
-  }
-  function removeGhosts() {
-    for (const ghost of ghosts) {
-      ghost.parentNode?.removeChild(ghost);
-    }
-  }
-  function captureSnapshot() {
-    const snap = /* @__PURE__ */ new Map();
-    const tUpdate = Math.min(lastElapsed / update.duration, 1);
-    const easedUpdate = cubicOut(tUpdate);
-    for (const tw of tweens) {
-      if (tw.kind !== "update") continue;
-      const key = getKeyForTween(tw);
-      if (!key) continue;
-      switch (tw.tweenType) {
-        case "rect": {
-          const g = lerpGeom(tw.from, tw.to, easedUpdate);
-          snap.set(key, { type: "rect", ...g });
-          break;
-        }
-        case "point": {
-          const cx = tw.fromCx + (tw.toCx - tw.fromCx) * easedUpdate;
-          const cy = tw.fromCy + (tw.toCy - tw.fromCy) * easedUpdate;
-          const entry = { type: "point", cx, cy };
-          if (tw.fromR !== void 0 && tw.toR !== void 0) {
-            entry.r = tw.fromR + (tw.toR - tw.fromR) * easedUpdate;
-          }
-          snap.set(key, entry);
-          break;
-        }
-        case "rule":
-        case "tick": {
-          snap.set(key, {
-            type: tw.tweenType,
-            x1: tw.fromX1 + (tw.toX1 - tw.fromX1) * easedUpdate,
-            y1: tw.fromY1 + (tw.toY1 - tw.fromY1) * easedUpdate,
-            x2: tw.fromX2 + (tw.toX2 - tw.fromX2) * easedUpdate,
-            y2: tw.fromY2 + (tw.toY2 - tw.fromY2) * easedUpdate
-          });
-          break;
-        }
-        case "textMark": {
-          snap.set(key, {
-            type: "textMark",
-            x: tw.fromX + (tw.toX - tw.fromX) * easedUpdate,
-            y: tw.fromY + (tw.toY - tw.fromY) * easedUpdate
-          });
-          break;
-        }
-        case "line": {
-          const pts = interpolatePoints(tw.fromPts, tw.toPts, easedUpdate);
-          const d = buildLinePath(pts, tw.interpolate);
-          snap.set(key, { type: "line", d });
-          break;
-        }
-        case "area": {
-          const top = interpolatePoints(tw.fromTop, tw.toTop, easedUpdate);
-          const bottom = interpolatePoints(tw.fromBottom, tw.toBottom, easedUpdate);
-          const d = buildAreaPath(top, bottom, tw.interpolate);
-          let topD;
-          if (tw.hasStroke) {
-            topD = buildLinePath(top, tw.interpolate);
-          }
-          snap.set(key, { type: "area", d, topD });
-          break;
-        }
-      }
-    }
-    return snap;
-  }
-  rafId = requestAnimationFrame(tick);
-  return {
-    cancel() {
-      if (!running) return;
-      running = false;
-      if (rafId !== null) {
-        cancelAnimationFrame(rafId);
-        rafId = null;
-      }
-      snapToFinal();
-      removeGhosts();
-      for (let i = 0; i < secondaryEls.length; i++) {
-        secondaryEls[i].style.opacity = secondaryOriginalOpacity[i];
-      }
-    },
-    get running() {
-      return running;
-    },
-    snapshot() {
-      return captureSnapshot();
-    }
-  };
-}
-function collectSecondaryElements(svg) {
-  const els = [];
-  for (const el of svg.querySelectorAll(".oc-annotation")) {
-    els.push(el);
-  }
-  const epLabels = svg.querySelector(".oc-endpoint-labels");
-  if (epLabels) els.push(epLabels);
-  const markLabels = svg.querySelector(".oc-mark-labels");
-  if (markLabels) els.push(markLabels);
-  return els;
-}
-function applySecondaryOpacity(els, elapsed, enterDelay, enterDuration) {
-  if (els.length === 0) return;
-  let t;
-  if (elapsed < enterDelay) {
-    t = 0;
-  } else {
-    t = Math.min((elapsed - enterDelay) / enterDuration, 1);
-  }
-  const opacity = String(cubicOut(t));
-  for (const el of els) {
-    el.style.opacity = opacity;
-  }
-}
-function getKeyForTween(tw) {
-  if ("ghost" in tw && tw.ghost) return null;
-  return tw.el.getAttribute("data-key");
-}
-function resolveLineElement(el) {
-  return el.tagName === "line" ? el : el.querySelector("line") ?? el;
-}
-function applyTweenState(tw, elapsed, update, exit, enterDelay, enterDuration) {
-  let tLocal;
-  if (tw.kind === "exit") {
-    tLocal = Math.min(elapsed / exit.duration, 1);
-  } else if (tw.kind === "enter") {
-    if (elapsed < enterDelay) {
-      tLocal = 0;
-    } else {
-      tLocal = Math.min((elapsed - enterDelay) / enterDuration, 1);
-    }
-  } else {
-    tLocal = Math.min(elapsed / update.duration, 1);
-  }
-  const eased = cubicOut(tLocal);
-  switch (tw.tweenType) {
-    case "rect": {
-      const geom = lerpGeom(tw.from, tw.to, eased);
-      applyGeomToElement(tw.el, geom, tw.mark);
-      break;
-    }
-    case "line": {
-      const pts = interpolatePoints(tw.fromPts, tw.toPts, eased);
-      applyLinePath(tw.el, pts, tw.interpolate);
-      break;
-    }
-    case "area": {
-      const top = interpolatePoints(tw.fromTop, tw.toTop, eased);
-      const bottom = interpolatePoints(tw.fromBottom, tw.toBottom, eased);
-      applyAreaPaths(tw.el, top, bottom, tw.interpolate, tw.hasStroke);
-      break;
-    }
-    case "point": {
-      const cx = tw.fromCx + (tw.toCx - tw.fromCx) * eased;
-      const cy = tw.fromCy + (tw.toCy - tw.fromCy) * eased;
-      tw.el.setAttribute("cx", String(cx));
-      tw.el.setAttribute("cy", String(cy));
-      if (tw.fromR !== void 0 && tw.toR !== void 0) {
-        const r = tw.fromR + (tw.toR - tw.fromR) * eased;
-        tw.el.setAttribute("r", String(r));
-      }
-      break;
-    }
-    case "rule":
-    case "tick": {
-      const lineEl = resolveLineElement(tw.el);
-      lineEl.setAttribute("x1", String(tw.fromX1 + (tw.toX1 - tw.fromX1) * eased));
-      lineEl.setAttribute("y1", String(tw.fromY1 + (tw.toY1 - tw.fromY1) * eased));
-      lineEl.setAttribute("x2", String(tw.fromX2 + (tw.toX2 - tw.fromX2) * eased));
-      lineEl.setAttribute("y2", String(tw.fromY2 + (tw.toY2 - tw.fromY2) * eased));
-      break;
-    }
-    case "textMark": {
-      const x3 = tw.fromX + (tw.toX - tw.fromX) * eased;
-      const y3 = tw.fromY + (tw.toY - tw.fromY) * eased;
-      tw.el.setAttribute("x", String(x3));
-      tw.el.setAttribute("y", String(y3));
-      break;
-    }
-    case "axisTick": {
-      if (tw.crossfade) {
-        break;
-      }
-      const pos = tw.fromPos + (tw.toPos - tw.fromPos) * eased;
-      if (tw.posAttr === "x") {
-        tw.el.setAttribute("x", String(pos));
-      } else {
-        tw.el.setAttribute("y", String(pos));
-      }
-      break;
-    }
-    case "gridline": {
-      const pos = tw.fromPos + (tw.toPos - tw.fromPos) * eased;
-      if (tw.orientation === "y") {
-        tw.el.setAttribute("y1", String(pos));
-        tw.el.setAttribute("y2", String(pos));
-      } else {
-        tw.el.setAttribute("x1", String(pos));
-        tw.el.setAttribute("x2", String(pos));
-      }
-      break;
-    }
-  }
-  if (tw.fromOpacity !== void 0 && tw.toOpacity !== void 0) {
-    const opacity = tw.fromOpacity + (tw.toOpacity - tw.fromOpacity) * eased;
-    tw.el.style.opacity = String(opacity);
-  }
-}
-function snapTweenToFinal(tw) {
-  switch (tw.tweenType) {
-    case "rect":
-      applyGeomToElement(tw.el, tw.to, tw.mark);
-      break;
-    case "line":
-      applyLinePath(tw.el, tw.toPts, tw.interpolate);
-      break;
-    case "area":
-      applyAreaPaths(tw.el, tw.toTop, tw.toBottom, tw.interpolate, tw.hasStroke);
-      break;
-    case "point":
-      tw.el.setAttribute("cx", String(tw.toCx));
-      tw.el.setAttribute("cy", String(tw.toCy));
-      if (tw.toR !== void 0) {
-        tw.el.setAttribute("r", String(tw.toR));
-      }
-      break;
-    case "rule":
-    case "tick": {
-      const lineEl = resolveLineElement(tw.el);
-      lineEl.setAttribute("x1", String(tw.toX1));
-      lineEl.setAttribute("y1", String(tw.toY1));
-      lineEl.setAttribute("x2", String(tw.toX2));
-      lineEl.setAttribute("y2", String(tw.toY2));
-      break;
-    }
-    case "textMark":
-      tw.el.setAttribute("x", String(tw.toX));
-      tw.el.setAttribute("y", String(tw.toY));
-      break;
-    case "axisTick":
-      if (!tw.crossfade) {
-        if (tw.posAttr === "x") {
-          tw.el.setAttribute("x", String(tw.toPos));
-        } else {
-          tw.el.setAttribute("y", String(tw.toPos));
-        }
-      }
-      break;
-    case "gridline":
-      if (tw.orientation === "y") {
-        tw.el.setAttribute("y1", String(tw.toPos));
-        tw.el.setAttribute("y2", String(tw.toPos));
-      } else {
-        tw.el.setAttribute("x1", String(tw.toPos));
-        tw.el.setAttribute("x2", String(tw.toPos));
-      }
-      break;
-  }
-  if (tw.toOpacity !== void 0) {
-    tw.el.style.opacity = String(tw.toOpacity);
-  }
-  if (tw.tweenType === "point" && tw.suppressedOpacity !== void 0) {
-    tw.el.setAttribute("opacity", tw.suppressedOpacity);
-  }
-}
-function resolveGhostGradientFill(mark, ghostGradientMap) {
-  if (!mark.fill || typeof mark.fill === "string" || ghostGradientMap.size === 0) return mark;
-  const resolved = resolveMarkFill(mark.fill, ghostGradientMap);
-  return { ...mark, fill: resolved };
-}
-function buildRectTweens(prevLayout, nextLayout, marksContainer, tweens, ghosts, ghostGradientMap, fromSnapshot) {
-  const prevRects = prevLayout.marks.filter((m2) => m2.type === "rect");
-  const nextRects = nextLayout.marks.filter((m2) => m2.type === "rect");
-  const prevByKey = /* @__PURE__ */ new Map();
-  for (const m2 of prevRects) {
-    if (m2.key) prevByKey.set(m2.key, m2);
-  }
-  const nextByKey = /* @__PURE__ */ new Map();
-  for (const m2 of nextRects) {
-    if (m2.key) nextByKey.set(m2.key, m2);
-  }
-  for (const [key, next] of nextByKey) {
-    const prev = prevByKey.get(key);
-    if (!prev) continue;
-    const el = marksContainer.querySelector(`[data-key="${key}"]`);
-    if (!el) continue;
-    let fromGeom = geomFromMark(prev);
-    const snap = fromSnapshot?.get(key);
-    if (snap && snap.type === "rect") {
-      fromGeom = { x: snap.x, y: snap.y, width: snap.width, height: snap.height };
-    }
-    tweens.push({
-      tweenType: "rect",
-      kind: "update",
-      el,
-      from: fromGeom,
-      to: geomFromMark(next),
-      mark: next
-    });
-  }
-  for (const [key, next] of nextByKey) {
-    if (prevByKey.has(key)) continue;
-    const el = marksContainer.querySelector(`[data-key="${key}"]`);
-    if (!el) continue;
-    let fromGeom;
-    if (next.orient === "horizontal") {
-      fromGeom = { x: next.x, y: next.y, width: 0, height: next.height };
-    } else {
-      fromGeom = { x: next.x, y: next.y + next.height, width: next.width, height: 0 };
-    }
-    tweens.push({
-      tweenType: "rect",
-      kind: "enter",
-      el,
-      from: fromGeom,
-      to: geomFromMark(next),
-      mark: next
-    });
-  }
-  for (const [key, prev] of prevByKey) {
-    if (nextByKey.has(key)) continue;
-    const ghostMark = resolveGhostGradientFill(prev, ghostGradientMap);
-    const ghost = renderSingleMark(ghostMark, 0);
-    if (!ghost) continue;
-    ghost.classList.add("oc-ghost");
-    ghost.setAttribute("aria-hidden", "true");
-    ghost.setAttribute("pointer-events", "none");
-    ghost.removeAttribute("data-key");
-    marksContainer.appendChild(ghost);
-    ghosts.push(ghost);
-    let toGeom;
-    if (prev.orient === "horizontal") {
-      toGeom = { x: prev.x, y: prev.y, width: 0, height: prev.height };
-    } else {
-      toGeom = { x: prev.x, y: prev.y + prev.height, width: prev.width, height: 0 };
-    }
-    tweens.push({
-      tweenType: "rect",
-      kind: "exit",
-      el: ghost,
-      from: geomFromMark(prev),
-      to: toGeom,
-      mark: prev,
-      ghost,
-      fromOpacity: 1,
-      toOpacity: 0
-    });
-  }
-}
-function buildLineTweens(prevLayout, nextLayout, marksContainer, tweens, ghosts, fromSnapshot) {
-  const prevLines = prevLayout.marks.filter((m2) => m2.type === "line");
-  const nextLines = nextLayout.marks.filter((m2) => m2.type === "line");
-  const prevByKey = /* @__PURE__ */ new Map();
-  for (const m2 of prevLines) {
-    if (m2.key) prevByKey.set(m2.key, m2);
-  }
-  const nextByKey = /* @__PURE__ */ new Map();
-  for (const m2 of nextLines) {
-    if (m2.key) nextByKey.set(m2.key, m2);
-  }
-  for (const [key, next] of nextByKey) {
-    const prev = prevByKey.get(key);
-    if (!prev) continue;
-    const el = marksContainer.querySelector(`[data-key="${key}"]`);
-    if (!el) continue;
-    const snap = fromSnapshot?.get(key);
-    if (snap && snap.type === "line") {
-      const ghost = el.cloneNode(true);
-      ghost.classList.add("oc-ghost");
-      ghost.setAttribute("aria-hidden", "true");
-      ghost.setAttribute("pointer-events", "none");
-      ghost.removeAttribute("data-key");
-      const ghostPath = ghost.querySelector("path");
-      if (ghostPath) ghostPath.setAttribute("d", snap.d);
-      marksContainer.appendChild(ghost);
-      ghosts.push(ghost);
-      tweens.push({
-        tweenType: "line",
-        kind: "exit",
-        el: ghost,
-        fromPts: next.points,
-        // placeholder, not used for path
-        toPts: next.points,
-        finalPoints: next.points,
-        interpolate: next.interpolate,
-        ghost,
-        fromOpacity: 1,
-        toOpacity: 0
-      });
-      tweens.push({
-        tweenType: "line",
-        kind: "enter",
-        el,
-        fromPts: next.points,
-        toPts: next.points,
-        finalPoints: next.points,
-        interpolate: next.interpolate,
-        fromOpacity: 0,
-        toOpacity: 1
-      });
-      continue;
-    }
-    const prevPKs = prev.pointKeys ?? prev.points.map((_, i) => `${i}`);
-    const nextPKs = next.pointKeys ?? next.points.map((_, i) => `${i}`);
-    const prevKeySet = new Set(prevPKs);
-    const hasSurvivors = nextPKs.some((k) => prevKeySet.has(k));
-    if (!hasSurvivors) {
-      const ghost = renderSingleMark(prev, 0);
-      if (ghost) {
-        ghost.classList.add("oc-ghost");
-        ghost.setAttribute("aria-hidden", "true");
-        ghost.setAttribute("pointer-events", "none");
-        ghost.removeAttribute("data-key");
-        marksContainer.appendChild(ghost);
-        ghosts.push(ghost);
-        tweens.push({
-          tweenType: "line",
-          kind: "exit",
-          el: ghost,
-          fromPts: prev.points,
-          toPts: prev.points,
-          finalPoints: prev.points,
-          interpolate: prev.interpolate,
-          ghost,
-          fromOpacity: 1,
-          toOpacity: 0
-        });
-      }
-      tweens.push({
-        tweenType: "line",
-        kind: "enter",
-        el,
-        fromPts: next.points,
-        toPts: next.points,
-        finalPoints: next.points,
-        interpolate: next.interpolate,
-        fromOpacity: 0,
-        toOpacity: 1
-      });
-    } else {
-      const [fromPts, toPts] = normalizePointArrays(prev.points, next.points, prevPKs, nextPKs);
-      tweens.push({
-        tweenType: "line",
-        kind: "update",
-        el,
-        fromPts,
-        toPts,
-        finalPoints: next.points,
-        interpolate: next.interpolate
-      });
-    }
-  }
-  for (const [key, next] of nextByKey) {
-    if (prevByKey.has(key)) continue;
-    const el = marksContainer.querySelector(`[data-key="${key}"]`);
-    if (!el) continue;
-    tweens.push({
-      tweenType: "line",
-      kind: "enter",
-      el,
-      fromPts: next.points,
-      toPts: next.points,
-      finalPoints: next.points,
-      interpolate: next.interpolate,
-      fromOpacity: 0,
-      toOpacity: 1
-    });
-  }
-  for (const [key, prev] of prevByKey) {
-    if (nextByKey.has(key)) continue;
-    const ghost = renderSingleMark(prev, 0);
-    if (!ghost) continue;
-    ghost.classList.add("oc-ghost");
-    ghost.setAttribute("aria-hidden", "true");
-    ghost.setAttribute("pointer-events", "none");
-    ghost.removeAttribute("data-key");
-    marksContainer.appendChild(ghost);
-    ghosts.push(ghost);
-    tweens.push({
-      tweenType: "line",
-      kind: "exit",
-      el: ghost,
-      fromPts: prev.points,
-      toPts: prev.points,
-      finalPoints: prev.points,
-      interpolate: prev.interpolate,
-      ghost,
-      fromOpacity: 1,
-      toOpacity: 0
-    });
-  }
-}
-function buildAreaTweens(prevLayout, nextLayout, marksContainer, tweens, ghosts, ghostGradientMap, fromSnapshot) {
-  const prevAreas = prevLayout.marks.filter((m2) => m2.type === "area");
-  const nextAreas = nextLayout.marks.filter((m2) => m2.type === "area");
-  const prevByKey = /* @__PURE__ */ new Map();
-  for (const m2 of prevAreas) {
-    if (m2.key) prevByKey.set(m2.key, m2);
-  }
-  const nextByKey = /* @__PURE__ */ new Map();
-  for (const m2 of nextAreas) {
-    if (m2.key) nextByKey.set(m2.key, m2);
-  }
-  for (const [key, next] of nextByKey) {
-    const prev = prevByKey.get(key);
-    if (!prev) continue;
-    const el = marksContainer.querySelector(`[data-key="${key}"]`);
-    if (!el) continue;
-    const snap = fromSnapshot?.get(key);
-    if (snap && snap.type === "area") {
-      const ghost = el.cloneNode(true);
-      ghost.classList.add("oc-ghost");
-      ghost.setAttribute("aria-hidden", "true");
-      ghost.setAttribute("pointer-events", "none");
-      ghost.removeAttribute("data-key");
-      const ghostPaths = ghost.querySelectorAll("path");
-      if (ghostPaths[0]) ghostPaths[0].setAttribute("d", snap.d);
-      if (ghostPaths[1] && snap.topD) ghostPaths[1].setAttribute("d", snap.topD);
-      marksContainer.appendChild(ghost);
-      ghosts.push(ghost);
-      tweens.push({
-        tweenType: "area",
-        kind: "exit",
-        el: ghost,
-        fromTop: next.topPoints,
-        toTop: next.topPoints,
-        fromBottom: next.bottomPoints,
-        toBottom: next.bottomPoints,
-        finalTopPoints: next.topPoints,
-        finalBottomPoints: next.bottomPoints,
-        interpolate: next.interpolate,
-        hasStroke: !!next.stroke && !!next.topPath,
-        ghost,
-        fromOpacity: 1,
-        toOpacity: 0
-      });
-      tweens.push({
-        tweenType: "area",
-        kind: "enter",
-        el,
-        fromTop: next.topPoints,
-        toTop: next.topPoints,
-        fromBottom: next.bottomPoints,
-        toBottom: next.bottomPoints,
-        finalTopPoints: next.topPoints,
-        finalBottomPoints: next.bottomPoints,
-        interpolate: next.interpolate,
-        hasStroke: !!next.stroke && !!next.topPath,
-        fromOpacity: 0,
-        toOpacity: 1
-      });
-      continue;
-    }
-    const prevPKs = prev.pointKeys ?? prev.topPoints.map((_, i) => `${i}`);
-    const nextPKs = next.pointKeys ?? next.topPoints.map((_, i) => `${i}`);
-    const prevKeySet = new Set(prevPKs);
-    const hasSurvivors = nextPKs.some((k) => prevKeySet.has(k));
-    if (!hasSurvivors) {
-      const ghost = renderSingleMark(prev, 0);
-      if (ghost) {
-        ghost.classList.add("oc-ghost");
-        ghost.setAttribute("aria-hidden", "true");
-        ghost.setAttribute("pointer-events", "none");
-        ghost.removeAttribute("data-key");
-        marksContainer.appendChild(ghost);
-        ghosts.push(ghost);
-        tweens.push({
-          tweenType: "area",
-          kind: "exit",
-          el: ghost,
-          fromTop: prev.topPoints,
-          toTop: prev.topPoints,
-          fromBottom: prev.bottomPoints,
-          toBottom: prev.bottomPoints,
-          finalTopPoints: prev.topPoints,
-          finalBottomPoints: prev.bottomPoints,
-          interpolate: prev.interpolate,
-          hasStroke: !!prev.stroke && !!prev.topPath,
-          ghost,
-          fromOpacity: 1,
-          toOpacity: 0
-        });
-      }
-      tweens.push({
-        tweenType: "area",
-        kind: "enter",
-        el,
-        fromTop: next.topPoints,
-        toTop: next.topPoints,
-        fromBottom: next.bottomPoints,
-        toBottom: next.bottomPoints,
-        finalTopPoints: next.topPoints,
-        finalBottomPoints: next.bottomPoints,
-        interpolate: next.interpolate,
-        hasStroke: !!next.stroke && !!next.topPath,
-        fromOpacity: 0,
-        toOpacity: 1
-      });
-    } else {
-      const [fromTop, toTop] = normalizePointArrays(
-        prev.topPoints,
-        next.topPoints,
-        prevPKs,
-        nextPKs
-      );
-      const [fromBottom, toBottom] = normalizePointArrays(
-        prev.bottomPoints,
-        next.bottomPoints,
-        prevPKs,
-        nextPKs
-      );
-      tweens.push({
-        tweenType: "area",
-        kind: "update",
-        el,
-        fromTop,
-        toTop,
-        fromBottom,
-        toBottom,
-        finalTopPoints: next.topPoints,
-        finalBottomPoints: next.bottomPoints,
-        interpolate: next.interpolate,
-        hasStroke: !!next.stroke && !!next.topPath
-      });
-    }
-  }
-  for (const [key, next] of nextByKey) {
-    if (prevByKey.has(key)) continue;
-    const el = marksContainer.querySelector(`[data-key="${key}"]`);
-    if (!el) continue;
-    tweens.push({
-      tweenType: "area",
-      kind: "enter",
-      el,
-      fromTop: next.topPoints,
-      toTop: next.topPoints,
-      fromBottom: next.bottomPoints,
-      toBottom: next.bottomPoints,
-      finalTopPoints: next.topPoints,
-      finalBottomPoints: next.bottomPoints,
-      interpolate: next.interpolate,
-      hasStroke: !!next.stroke && !!next.topPath,
-      fromOpacity: 0,
-      toOpacity: 1
-    });
-  }
-  for (const [key, prev] of prevByKey) {
-    if (nextByKey.has(key)) continue;
-    const ghostMark = resolveGhostGradientFill(prev, ghostGradientMap);
-    const ghost = renderSingleMark(ghostMark, 0);
-    if (!ghost) continue;
-    ghost.classList.add("oc-ghost");
-    ghost.setAttribute("aria-hidden", "true");
-    ghost.setAttribute("pointer-events", "none");
-    ghost.removeAttribute("data-key");
-    marksContainer.appendChild(ghost);
-    ghosts.push(ghost);
-    tweens.push({
-      tweenType: "area",
-      kind: "exit",
-      el: ghost,
-      fromTop: prev.topPoints,
-      toTop: prev.topPoints,
-      fromBottom: prev.bottomPoints,
-      toBottom: prev.bottomPoints,
-      finalTopPoints: prev.topPoints,
-      finalBottomPoints: prev.bottomPoints,
-      interpolate: prev.interpolate,
-      hasStroke: !!prev.stroke && !!prev.topPath,
-      ghost,
-      fromOpacity: 1,
-      toOpacity: 0
-    });
-  }
-}
-function buildPointTweens(prevLayout, nextLayout, marksContainer, tweens, ghosts, ghostGradientMap, fromSnapshot) {
-  const prevPoints = prevLayout.marks.filter((m2) => m2.type === "point");
-  const nextPoints = nextLayout.marks.filter((m2) => m2.type === "point");
-  const prevByKey = /* @__PURE__ */ new Map();
-  for (const m2 of prevPoints) {
-    if (m2.key) prevByKey.set(m2.key, m2);
-  }
-  const nextByKey = /* @__PURE__ */ new Map();
-  for (const m2 of nextPoints) {
-    if (m2.key) nextByKey.set(m2.key, m2);
-  }
-  for (const [key, next] of nextByKey) {
-    const prev = prevByKey.get(key);
-    if (!prev) continue;
-    const el = marksContainer.querySelector(
-      `circle.oc-mark-point[data-key="${key}"]`
-    );
-    if (!el) continue;
-    const renderedOpacity = el.getAttribute("opacity");
-    const isSuppressed = renderedOpacity === "0";
-    let fromCx = prev.cx;
-    let fromCy = prev.cy;
-    let fromR = prev.r !== next.r ? prev.r : void 0;
-    const snap = fromSnapshot?.get(key);
-    if (snap && snap.type === "point") {
-      fromCx = snap.cx;
-      fromCy = snap.cy;
-      if (snap.r !== void 0 && snap.r !== next.r) {
-        fromR = snap.r;
-      }
-    }
-    tweens.push({
-      tweenType: "point",
-      kind: "update",
-      el,
-      fromCx,
-      fromCy,
-      toCx: next.cx,
-      toCy: next.cy,
-      fromR,
-      toR: fromR !== void 0 ? next.r : void 0,
-      // Do NOT tween opacity for updated points - preserve renderer state
-      suppressedOpacity: isSuppressed ? "0" : void 0
-    });
-  }
-  for (const [key, next] of nextByKey) {
-    if (prevByKey.has(key)) continue;
-    const el = marksContainer.querySelector(
-      `circle.oc-mark-point[data-key="${key}"]`
-    );
-    if (!el) continue;
-    const renderedOpacity = el.getAttribute("opacity");
-    const targetOpacity = renderedOpacity != null ? Number(renderedOpacity) : 1;
-    tweens.push({
-      tweenType: "point",
-      kind: "enter",
-      el,
-      fromCx: next.cx,
-      fromCy: next.cy,
-      toCx: next.cx,
-      toCy: next.cy,
-      fromOpacity: 0,
-      toOpacity: targetOpacity,
-      suppressedOpacity: renderedOpacity === "0" ? "0" : void 0
-    });
-  }
-  for (const [key, prev] of prevByKey) {
-    if (nextByKey.has(key)) continue;
-    const ghostMark = resolveGhostGradientFill(prev, ghostGradientMap);
-    const ghost = renderSingleMark(ghostMark, 0);
-    if (!ghost) continue;
-    ghost.classList.add("oc-ghost");
-    ghost.setAttribute("aria-hidden", "true");
-    ghost.setAttribute("pointer-events", "none");
-    ghost.removeAttribute("data-key");
-    marksContainer.appendChild(ghost);
-    ghosts.push(ghost);
-    tweens.push({
-      tweenType: "point",
-      kind: "exit",
-      el: ghost,
-      fromCx: prev.cx,
-      fromCy: prev.cy,
-      toCx: prev.cx,
-      toCy: prev.cy,
-      ghost,
-      fromOpacity: 1,
-      toOpacity: 0
-    });
-  }
-}
-function buildRuleTweens(prevLayout, nextLayout, marksContainer, tweens, ghosts, fromSnapshot) {
-  const prevRules = prevLayout.marks.filter((m2) => m2.type === "rule");
-  const nextRules = nextLayout.marks.filter((m2) => m2.type === "rule");
-  const prevByKey = /* @__PURE__ */ new Map();
-  for (const m2 of prevRules) {
-    if (m2.key) prevByKey.set(m2.key, m2);
-  }
-  const nextByKey = /* @__PURE__ */ new Map();
-  for (const m2 of nextRules) {
-    if (m2.key) nextByKey.set(m2.key, m2);
-  }
-  for (const [key, next] of nextByKey) {
-    const prev = prevByKey.get(key);
-    if (!prev) continue;
-    const el = marksContainer.querySelector(
-      `.oc-mark-rule[data-key="${key}"]`
-    );
-    if (!el) continue;
-    let fromX1 = prev.x1;
-    let fromY1 = prev.y1;
-    let fromX2 = prev.x2;
-    let fromY2 = prev.y2;
-    const snap = fromSnapshot?.get(key);
-    if (snap && snap.type === "rule") {
-      fromX1 = snap.x1;
-      fromY1 = snap.y1;
-      fromX2 = snap.x2;
-      fromY2 = snap.y2;
-    }
-    tweens.push({
-      tweenType: "rule",
-      kind: "update",
-      el,
-      fromX1,
-      fromY1,
-      fromX2,
-      fromY2,
-      toX1: next.x1,
-      toY1: next.y1,
-      toX2: next.x2,
-      toY2: next.y2
-    });
-  }
-  for (const [key, next] of nextByKey) {
-    if (prevByKey.has(key)) continue;
-    const el = marksContainer.querySelector(
-      `.oc-mark-rule[data-key="${key}"]`
-    );
-    if (!el) continue;
-    tweens.push({
-      tweenType: "rule",
-      kind: "enter",
-      el,
-      fromX1: next.x1,
-      fromY1: next.y1,
-      fromX2: next.x2,
-      fromY2: next.y2,
-      toX1: next.x1,
-      toY1: next.y1,
-      toX2: next.x2,
-      toY2: next.y2,
-      fromOpacity: 0,
-      toOpacity: 1
-    });
-  }
-  for (const [key, prev] of prevByKey) {
-    if (nextByKey.has(key)) continue;
-    const ghost = renderSingleMark(prev, 0);
-    if (!ghost) continue;
-    ghost.classList.add("oc-ghost");
-    ghost.setAttribute("aria-hidden", "true");
-    ghost.setAttribute("pointer-events", "none");
-    ghost.removeAttribute("data-key");
-    marksContainer.appendChild(ghost);
-    ghosts.push(ghost);
-    tweens.push({
-      tweenType: "rule",
-      kind: "exit",
-      el: ghost,
-      fromX1: prev.x1,
-      fromY1: prev.y1,
-      fromX2: prev.x2,
-      fromY2: prev.y2,
-      toX1: prev.x1,
-      toY1: prev.y1,
-      toX2: prev.x2,
-      toY2: prev.y2,
-      ghost,
-      fromOpacity: 1,
-      toOpacity: 0
-    });
-  }
-}
-function buildTickTweens(prevLayout, nextLayout, marksContainer, tweens, ghosts, fromSnapshot) {
-  const prevTicks = prevLayout.marks.filter((m2) => m2.type === "tick");
-  const nextTicks = nextLayout.marks.filter((m2) => m2.type === "tick");
-  const prevByKey = /* @__PURE__ */ new Map();
-  for (const m2 of prevTicks) {
-    if (m2.key) prevByKey.set(m2.key, m2);
-  }
-  const nextByKey = /* @__PURE__ */ new Map();
-  for (const m2 of nextTicks) {
-    if (m2.key) nextByKey.set(m2.key, m2);
-  }
-  function tickEndpoints(t) {
-    const half = t.length / 2;
-    if (t.orient === "vertical") {
-      return { x1: t.x, y1: t.y - half, x2: t.x, y2: t.y + half };
-    }
-    return { x1: t.x - half, y1: t.y, x2: t.x + half, y2: t.y };
-  }
-  for (const [key, next] of nextByKey) {
-    const prev = prevByKey.get(key);
-    if (!prev) continue;
-    const el = marksContainer.querySelector(
-      `.oc-mark-tick[data-key="${key}"]`
-    );
-    if (!el) continue;
-    let pEnd = tickEndpoints(prev);
-    const nEnd = tickEndpoints(next);
-    const snap = fromSnapshot?.get(key);
-    if (snap && snap.type === "tick") {
-      pEnd = { x1: snap.x1, y1: snap.y1, x2: snap.x2, y2: snap.y2 };
-    }
-    tweens.push({
-      tweenType: "tick",
-      kind: "update",
-      el,
-      fromX1: pEnd.x1,
-      fromY1: pEnd.y1,
-      fromX2: pEnd.x2,
-      fromY2: pEnd.y2,
-      toX1: nEnd.x1,
-      toY1: nEnd.y1,
-      toX2: nEnd.x2,
-      toY2: nEnd.y2
-    });
-  }
-  for (const [key, next] of nextByKey) {
-    if (prevByKey.has(key)) continue;
-    const el = marksContainer.querySelector(
-      `.oc-mark-tick[data-key="${key}"]`
-    );
-    if (!el) continue;
-    const nEnd = tickEndpoints(next);
-    tweens.push({
-      tweenType: "tick",
-      kind: "enter",
-      el,
-      fromX1: nEnd.x1,
-      fromY1: nEnd.y1,
-      fromX2: nEnd.x2,
-      fromY2: nEnd.y2,
-      toX1: nEnd.x1,
-      toY1: nEnd.y1,
-      toX2: nEnd.x2,
-      toY2: nEnd.y2,
-      fromOpacity: 0,
-      toOpacity: 1
-    });
-  }
-  for (const [key, prev] of prevByKey) {
-    if (nextByKey.has(key)) continue;
-    const ghost = renderSingleMark(prev, 0);
-    if (!ghost) continue;
-    ghost.classList.add("oc-ghost");
-    ghost.setAttribute("aria-hidden", "true");
-    ghost.setAttribute("pointer-events", "none");
-    ghost.removeAttribute("data-key");
-    marksContainer.appendChild(ghost);
-    ghosts.push(ghost);
-    const pEnd = tickEndpoints(prev);
-    tweens.push({
-      tweenType: "tick",
-      kind: "exit",
-      el: ghost,
-      fromX1: pEnd.x1,
-      fromY1: pEnd.y1,
-      fromX2: pEnd.x2,
-      fromY2: pEnd.y2,
-      toX1: pEnd.x1,
-      toY1: pEnd.y1,
-      toX2: pEnd.x2,
-      toY2: pEnd.y2,
-      ghost,
-      fromOpacity: 1,
-      toOpacity: 0
-    });
-  }
-}
-function buildTextMarkTweens(prevLayout, nextLayout, marksContainer, tweens, ghosts, fromSnapshot) {
-  const prevTexts = prevLayout.marks.filter((m2) => m2.type === "textMark");
-  const nextTexts = nextLayout.marks.filter((m2) => m2.type === "textMark");
-  const prevByKey = /* @__PURE__ */ new Map();
-  for (const m2 of prevTexts) {
-    if (m2.key) prevByKey.set(m2.key, m2);
-  }
-  const nextByKey = /* @__PURE__ */ new Map();
-  for (const m2 of nextTexts) {
-    if (m2.key) nextByKey.set(m2.key, m2);
-  }
-  for (const [key, next] of nextByKey) {
-    const prev = prevByKey.get(key);
-    if (!prev) continue;
-    const el = marksContainer.querySelector(
-      `.oc-mark-text[data-key="${key}"]`
-    );
-    if (!el) continue;
-    let fromX = prev.x;
-    let fromY = prev.y;
-    const snap = fromSnapshot?.get(key);
-    if (snap && snap.type === "textMark") {
-      fromX = snap.x;
-      fromY = snap.y;
-    }
-    tweens.push({
-      tweenType: "textMark",
-      kind: "update",
-      el,
-      fromX,
-      fromY,
-      toX: next.x,
-      toY: next.y
-    });
-  }
-  for (const [key, next] of nextByKey) {
-    if (prevByKey.has(key)) continue;
-    const el = marksContainer.querySelector(
-      `.oc-mark-text[data-key="${key}"]`
-    );
-    if (!el) continue;
-    tweens.push({
-      tweenType: "textMark",
-      kind: "enter",
-      el,
-      fromX: next.x,
-      fromY: next.y,
-      toX: next.x,
-      toY: next.y,
-      fromOpacity: 0,
-      toOpacity: 1
-    });
-  }
-  for (const [key, prev] of prevByKey) {
-    if (nextByKey.has(key)) continue;
-    const ghost = renderSingleMark(prev, 0);
-    if (!ghost) continue;
-    ghost.classList.add("oc-ghost");
-    ghost.setAttribute("aria-hidden", "true");
-    ghost.setAttribute("pointer-events", "none");
-    ghost.removeAttribute("data-key");
-    marksContainer.appendChild(ghost);
-    ghosts.push(ghost);
-    tweens.push({
-      tweenType: "textMark",
-      kind: "exit",
-      el: ghost,
-      fromX: prev.x,
-      fromY: prev.y,
-      toX: prev.x,
-      toY: prev.y,
-      ghost,
-      fromOpacity: 1,
-      toOpacity: 0
-    });
-  }
-}
-function buildAxisTweens(svg, prevLayout, nextLayout, tweens, ghosts) {
-  buildSingleAxisTweens(svg, prevLayout.axes.x, nextLayout.axes.x, "x", nextLayout, tweens, ghosts);
-  buildSingleAxisTweens(svg, prevLayout.axes.y, nextLayout.axes.y, "y", nextLayout, tweens, ghosts);
-}
-function buildSingleAxisTweens(svg, prevAxis, nextAxis, orientation, layout, tweens, ghosts) {
-  if (!prevAxis || !nextAxis) return;
-  const axisClass = `oc-axis-${orientation}`;
-  const axisGroup = svg.querySelector(`.${axisClass}`);
-  if (!axisGroup) return;
-  const isRotated = !!(nextAxis.tickAngle && Math.abs(nextAxis.tickAngle) > 10);
-  const prevTickMap = /* @__PURE__ */ new Map();
-  for (const tick of prevAxis.ticks) {
-    prevTickMap.set(serializeKeyValue(tick.value), tick.position);
-  }
-  const nextTickMap = /* @__PURE__ */ new Map();
-  for (const tick of nextAxis.ticks) {
-    nextTickMap.set(serializeKeyValue(tick.value), tick.position);
-  }
-  const posAttr = orientation === "x" ? "x" : "y";
-  const tickLabels = axisGroup.querySelectorAll(".oc-axis-tick[data-tick-key]");
-  const matchedNextKeys = /* @__PURE__ */ new Set();
-  for (const labelEl of tickLabels) {
-    const key = labelEl.getAttribute("data-tick-key");
-    if (!key) continue;
-    const nextPos = nextTickMap.get(key);
-    const prevPos = prevTickMap.get(key);
-    if (prevPos !== void 0 && nextPos !== void 0) {
-      matchedNextKeys.add(key);
-      tweens.push({
-        tweenType: "axisTick",
-        kind: "update",
-        el: labelEl,
-        posAttr,
-        fromPos: prevPos,
-        toPos: nextPos,
-        crossfade: isRotated
-      });
-    } else if (prevPos === void 0 && nextPos !== void 0) {
-      matchedNextKeys.add(key);
-      tweens.push({
-        tweenType: "axisTick",
-        kind: "enter",
-        el: labelEl,
-        posAttr,
-        fromPos: nextPos,
-        toPos: nextPos,
-        crossfade: false,
-        fromOpacity: 0,
-        toOpacity: 1
-      });
-    }
-  }
-  for (const [key, prevPos] of prevTickMap) {
-    if (nextTickMap.has(key)) continue;
-    const prevTick = prevAxis.ticks.find((t) => serializeKeyValue(t.value) === key);
-    if (!prevTick) continue;
-    const ghost = document.createElementNS("http://www.w3.org/2000/svg", "text");
-    ghost.setAttribute("class", "oc-axis-tick oc-ghost");
-    ghost.setAttribute("aria-hidden", "true");
-    ghost.setAttribute("pointer-events", "none");
-    ghost.textContent = prevTick.label;
-    const area = layout.area;
-    if (orientation === "x") {
-      ghost.setAttribute("x", String(prevPos));
-      const xLabelPad = nextAxis.labelPadding ?? layout.theme.spacing.xAxisLabelPadding;
-      const fontSize = nextAxis.tickLabelStyle.fontSize;
-      ghost.setAttribute("y", String(area.y + area.height + xLabelPad + fontSize * 0.8));
-      ghost.setAttribute("text-anchor", "middle");
-    } else {
-      const TICK_LABEL_OFFSET = 8;
-      ghost.setAttribute("x", String(area.x - TICK_LABEL_OFFSET));
-      ghost.setAttribute("y", String(prevPos));
-      ghost.setAttribute("text-anchor", "end");
-      ghost.setAttribute("dominant-baseline", "central");
-    }
-    axisGroup.appendChild(ghost);
-    ghosts.push(ghost);
-    tweens.push({
-      tweenType: "axisTick",
-      kind: "exit",
-      el: ghost,
-      posAttr,
-      fromPos: prevPos,
-      toPos: prevPos,
-      crossfade: false,
-      ghost,
-      fromOpacity: 1,
-      toOpacity: 0
-    });
-  }
-  const prevGridMap = /* @__PURE__ */ new Map();
-  for (const gridline of prevAxis.gridlines) {
-    prevGridMap.set(String(gridline.position), gridline.position);
-  }
-  const prevGridByValue = /* @__PURE__ */ new Map();
-  for (const tick of prevAxis.ticks) {
-    const key = serializeKeyValue(tick.value);
-    const matchingGridline = prevAxis.gridlines.find((g) => g.position === tick.position);
-    if (matchingGridline) {
-      prevGridByValue.set(key, matchingGridline.position);
-    }
-  }
-  const nextGridByValue = /* @__PURE__ */ new Map();
-  for (const tick of nextAxis.ticks) {
-    const key = serializeKeyValue(tick.value);
-    const matchingGridline = nextAxis.gridlines.find((g) => g.position === tick.position);
-    if (matchingGridline) {
-      nextGridByValue.set(key, matchingGridline.position);
-    }
-  }
-  const gridlines = axisGroup.querySelectorAll(".oc-gridline[data-tick-key]");
-  const matchedGridKeys = /* @__PURE__ */ new Set();
-  for (const glEl of gridlines) {
-    const key = glEl.getAttribute("data-tick-key");
-    if (!key) continue;
-    const nextPos = nextGridByValue.get(key);
-    const prevPos = prevGridByValue.get(key);
-    if (prevPos !== void 0 && nextPos !== void 0) {
-      matchedGridKeys.add(key);
-      tweens.push({
-        tweenType: "gridline",
-        kind: "update",
-        el: glEl,
-        orientation,
-        fromPos: prevPos,
-        toPos: nextPos
-      });
-    } else if (prevPos === void 0 && nextPos !== void 0) {
-      matchedGridKeys.add(key);
-      tweens.push({
-        tweenType: "gridline",
-        kind: "enter",
-        el: glEl,
-        orientation,
-        fromPos: nextPos,
-        toPos: nextPos,
-        fromOpacity: 0,
-        toOpacity: 1
-      });
-    }
-  }
-  for (const [key, prevPos] of prevGridByValue) {
-    if (nextGridByValue.has(key)) continue;
-    const ghost = document.createElementNS("http://www.w3.org/2000/svg", "line");
-    ghost.setAttribute("class", "oc-gridline oc-ghost");
-    ghost.setAttribute("aria-hidden", "true");
-    ghost.setAttribute("pointer-events", "none");
-    if (orientation === "y") {
-      const area = layout.area;
-      ghost.setAttribute("x1", String(area.x));
-      ghost.setAttribute("y1", String(prevPos));
-      ghost.setAttribute("x2", String(area.x + area.width));
-      ghost.setAttribute("y2", String(prevPos));
-    } else {
-      const area = layout.area;
-      ghost.setAttribute("x1", String(prevPos));
-      ghost.setAttribute("y1", String(area.y));
-      ghost.setAttribute("x2", String(prevPos));
-      ghost.setAttribute("y2", String(area.y + area.height));
-    }
-    axisGroup.appendChild(ghost);
-    ghosts.push(ghost);
-    tweens.push({
-      tweenType: "gridline",
-      kind: "exit",
-      el: ghost,
-      orientation,
-      fromPos: prevPos,
-      toPos: prevPos,
-      ghost,
-      fromOpacity: 1,
-      toOpacity: 0
-    });
-  }
-}
-
-// src/mount.ts
-var FALLBACK_HEIGHT = 400;
-function resolveDarkMode3(mode) {
-  if (mode === "force") return true;
-  if (mode === "off" || mode === void 0) return false;
-  if (typeof window !== "undefined" && window.matchMedia) {
-    return window.matchMedia("(prefers-color-scheme: dark)").matches;
-  }
-  return false;
-}
-var EDITABLE_HOVER_CSS = `
-.oc-editable-hover {
-  outline: 1.5px solid rgba(79, 70, 229, 0.35);
-  outline-offset: 2px;
-  border-radius: 2px;
-}
-`;
-function makeEditable(svg) {
-  svg.setAttribute("tabindex", "0");
-  svg.style.outline = "none";
-  const style = document.createElementNS("http://www.w3.org/2000/svg", "style");
-  style.textContent = EDITABLE_HOVER_CSS;
-  svg.insertBefore(style, svg.firstChild);
-}
-function hasEditingCallbacks(opts) {
-  return !!(opts?.onEdit || opts?.onSelect || opts?.onDeselect || opts?.onTextEdit);
-}
-function createChart(container, spec, options) {
-  let currentSpec = spec;
-  let currentLayout;
-  let svgElement = null;
-  let tooltipManager = null;
-  let disconnectResize = null;
-  let cleanupTooltipEvents = null;
-  let cleanupVoronoiEvents = null;
-  let cleanupKeyboardNav = null;
-  let cleanupLegend = null;
-  let cleanupChartEvents = null;
-  let cleanupAnnotationDrag = null;
-  let cleanupEditDrags = null;
-  let cleanupSelection = null;
-  let cleanupKeyboardEdit = null;
-  let srTable = null;
-  let destroyed = false;
-  let isDragging = false;
-  let pendingRender = false;
-  let isFirstRender = true;
-  let cleanupAnimations = null;
-  let pendingResize = false;
-  let isAutoHeight = null;
-  let lastRenderedWidth = null;
-  let lastRenderedSvgHeight = null;
-  let transitionHandle = null;
-  let transitionSnapshot = null;
-  let fontsReloadPending = false;
-  let selectedElement = options?.selectedElement ?? null;
-  let overlayElement = null;
-  let isTextEditingActive = false;
-  const runtimeHiddenSeries = /* @__PURE__ */ new Set();
-  const runtimeShownSeries = /* @__PURE__ */ new Set();
-  let textEditCleanup = null;
-  container.classList.add("oc-root");
-  function resolveEffectiveFont() {
-    return options?.theme?.fonts?.family ?? currentSpec.theme?.fonts?.family ?? resolveFontFamily(container);
-  }
-  let fontFamily = resolveEffectiveFont();
-  let measureText = createMeasureText(fontFamily);
-  let renderGen = 0;
-  function compileAt(width, height) {
-    const darkMode = resolveDarkMode3(options?.darkMode);
-    const compileOpts = {
-      width,
-      height,
-      theme: options?.theme,
-      darkMode,
-      watermark: options?.watermark,
-      measureText
-    };
-    if (isLayerSpec(currentSpec)) {
-      return compileLayer(withRuntimeHidden(currentSpec), compileOpts);
-    }
-    return compileChart(withRuntimeHidden(currentSpec), compileOpts);
-  }
-  function verticalOverheads(layout, width) {
-    const topLegendBlock = layout.legend.position === "top" && "entries" in layout.legend && layout.legend.entries.length > 0 ? layout.legend.bounds.height + legendGap(width) : 0;
-    return layout.chrome.topHeight + layout.chrome.bottomHeight + topLegendBlock + (layout.metrics?.height ?? 0);
-  }
-  function compile() {
-    const { width, height } = getContainerDimensions();
-    const growsWithChrome = isAutoHeight === true && !isLayerSpec(currentSpec) && !isGraphSpec(currentSpec) && currentSpec.display !== "sparkline";
-    if (!growsWithChrome) {
-      return compileAt(width, height);
-    }
-    let layout = compileAt(width, height);
-    const overheads = verticalOverheads(layout, width);
-    if (overheads > 0) {
-      layout = compileAt(width, height + overheads);
-      const overheads2 = verticalOverheads(layout, width);
-      if (overheads2 !== overheads) {
-        layout = compileAt(width, height + overheads2);
-      }
-    }
-    return layout;
-  }
-  function withRuntimeHidden(spec2) {
-    if (runtimeHiddenSeries.size === 0 && runtimeShownSeries.size === 0) return spec2;
-    const userHidden = spec2.hiddenSeries ?? [];
-    const finalHidden = new Set(userHidden);
-    for (const s of runtimeHiddenSeries) finalHidden.add(s);
-    for (const s of runtimeShownSeries) finalHidden.delete(s);
-    const out = { ...spec2, hiddenSeries: Array.from(finalHidden) };
-    if (finalHidden.size > 0 && spec2.annotations) {
-      const filtered = spec2.annotations.filter((a2) => a2.type !== "text");
-      out.annotations = filtered.length > 0 ? filtered : void 0;
-    }
-    return out;
-  }
-  function countSeries(spec2) {
-    if (isLayerSpec(spec2)) return Infinity;
-    const enc = spec2.encoding;
-    const colorEnc = enc?.color;
-    if (!colorEnc || "condition" in colorEnc || colorEnc.type === "quantitative") return Infinity;
-    if (!("field" in colorEnc) || !colorEnc.field) return Infinity;
-    const field = colorEnc.field;
-    const seen = /* @__PURE__ */ new Set();
-    for (const row of spec2.data ?? []) {
-      seen.add(String(row[field]));
-    }
-    return seen.size;
-  }
-  function isSeriesHidden(series) {
-    if (runtimeShownSeries.has(series)) return false;
-    if (runtimeHiddenSeries.has(series)) return true;
-    const userHidden = currentSpec.hiddenSeries ?? [];
-    return userHidden.includes(series);
-  }
-  function toggleSeriesVisibility(series) {
-    const wasHidden = isSeriesHidden(series);
-    if (!wasHidden) {
-      const total = countSeries(currentSpec);
-      if (Number.isFinite(total)) {
-        const userHidden = new Set(currentSpec.hiddenSeries ?? []);
-        let visibleAfter = 0;
-        const seriesField = getColorField(currentSpec);
-        if (seriesField) {
-          const allSeries = /* @__PURE__ */ new Set();
-          for (const row of currentSpec.data ?? []) {
-            allSeries.add(String(row[seriesField]));
-          }
-          for (const s of allSeries) {
-            if (s === series) continue;
-            if (runtimeShownSeries.has(s)) {
-              visibleAfter++;
-              continue;
-            }
-            if (runtimeHiddenSeries.has(s)) continue;
-            if (!userHidden.has(s)) visibleAfter++;
-          }
-        }
-        if (visibleAfter === 0) return false;
-      }
-    }
-    if (wasHidden) {
-      runtimeHiddenSeries.delete(series);
-      const userHidden = currentSpec.hiddenSeries ?? [];
-      if (userHidden.includes(series)) runtimeShownSeries.add(series);
-    } else {
-      runtimeShownSeries.delete(series);
-      runtimeHiddenSeries.add(series);
-    }
-    render();
-    return !wasHidden;
-  }
-  function getColorField(spec2) {
-    if (isLayerSpec(spec2)) return void 0;
-    const colorEnc = spec2.encoding?.color;
-    if (!colorEnc || "condition" in colorEnc) return void 0;
-    if (!("field" in colorEnc) || !colorEnc.field) return void 0;
-    return colorEnc.field;
-  }
-  function getContainerDimensions() {
-    const rect = container.getBoundingClientRect();
-    const isSparkline = "display" in currentSpec && currentSpec.display === "sparkline";
-    if (isSparkline) {
-      let width = rect.width;
-      let height = rect.height;
-      if (!height && container.parentElement) {
-        const parentRect = container.parentElement.getBoundingClientRect();
-        height = parentRect.height;
-        if (!width) width = parentRect.width;
-      }
-      return {
-        width: Math.max(width || 200, 30),
-        height: Math.max(height || 40, 20)
-      };
-    }
-    if (isAutoHeight === null && (rect.width > 0 || rect.height > 0)) {
-      isAutoHeight = rect.height === 0 && rect.width > 0;
-    }
-    return {
-      width: Math.max(rect.width || 600, 100),
-      // Latched-auto mounts always compile against the fixed budget: after
-      // the first render the container's measured height is just our own
-      // SVG, so reading it back would re-pin whatever we rendered last.
-      height: isAutoHeight === true ? FALLBACK_HEIGHT : Math.max(rect.height || FALLBACK_HEIGHT, 100)
-    };
-  }
-  function getSpecAnnotations() {
-    return "annotations" in currentSpec && Array.isArray(currentSpec.annotations) ? currentSpec.annotations : [];
-  }
-  function selectElement(ref) {
-    if (!svgElement) return;
-    const target = findElementByRef(svgElement, ref);
-    if (!target) return;
-    if (selectedElement && !refsEqual(selectedElement, ref)) {
-      deselectElement();
-    }
-    selectedElement = ref;
-    overlayElement = renderSelectionOverlay(svgElement, ref, currentLayout);
-    options?.onSelect?.(ref);
-    svgElement.focus();
-  }
-  function deselectElement() {
-    if (!selectedElement) return;
-    if (isTextEditingActive && textEditCleanup) {
-      textEditCleanup();
-      textEditCleanup = null;
-      isTextEditingActive = false;
-    }
-    const prev = selectedElement;
-    selectedElement = null;
-    if (overlayElement?.parentNode) {
-      overlayElement.parentNode.removeChild(overlayElement);
-    }
-    overlayElement = null;
-    options?.onDeselect?.(prev);
-  }
-  function enterTextEditing() {
-    if (!svgElement || !selectedElement || isTextEditingActive) return;
-    const specAnnotations = getSpecAnnotations();
-    if (!isTextEditable(selectedElement, specAnnotations)) return;
-    const currentText = getElementText(selectedElement, currentSpec);
-    if (currentText === null) return;
-    const target = findElementByRef(svgElement, selectedElement);
-    if (!target) return;
-    const textEl = target.tagName === "text" ? target : target.querySelector("text");
-    if (!textEl) return;
-    isTextEditingActive = true;
-    const editRef = selectedElement;
-    const overlay = createTextEditOverlay({
-      container,
-      svg: svgElement,
-      targetElement: textEl,
-      currentText,
-      onCommit: (newText) => {
-        isTextEditingActive = false;
-        textEditCleanup = null;
-        if (newText !== currentText) {
-          options?.onTextEdit?.(editRef, currentText, newText);
-          options?.onEdit?.({
-            type: "text-edit",
-            element: editRef,
-            oldText: currentText,
-            newText
-          });
-        }
-      },
-      onCancel: () => {
-        isTextEditingActive = false;
-        textEditCleanup = null;
-      }
-    });
-    textEditCleanup = overlay.destroy;
-  }
-  function wireSelectionEvents() {
-    if (!svgElement) return () => {
-    };
-    const svg = svgElement;
-    const cleanups = [];
-    const handleClick = (e) => {
-      const mouseEvent = e;
-      const target = mouseEvent.target;
-      if (isTextEditingActive) return;
-      const specAnnotations = getSpecAnnotations();
-      const ref = buildElementRef(target, specAnnotations);
-      if (ref) {
-        selectElement(ref);
-      } else {
-        deselectElement();
-      }
-    };
-    svg.addEventListener("click", handleClick);
-    cleanups.push(() => svg.removeEventListener("click", handleClick));
-    const handleMouseEnter = (e) => {
-      const target = e.target.closest(
-        "[data-annotation-index], [data-chrome-key], .oc-mark-label[data-series], .oc-legend, [data-legend-index]"
-      );
-      if (target) {
-        target.classList.add("oc-editable-hover");
-      }
-    };
-    const handleMouseLeave = (e) => {
-      const target = e.target.closest(".oc-editable-hover");
-      if (target) {
-        target.classList.remove("oc-editable-hover");
-      }
-    };
-    svg.addEventListener("mouseenter", handleMouseEnter, true);
-    svg.addEventListener("mouseleave", handleMouseLeave, true);
-    cleanups.push(() => {
-      svg.removeEventListener("mouseenter", handleMouseEnter, true);
-      svg.removeEventListener("mouseleave", handleMouseLeave, true);
-    });
-    const handleDblClick = (e) => {
-      const mouseEvent = e;
-      const target = mouseEvent.target;
-      const specAnnotations = getSpecAnnotations();
-      const ref = buildElementRef(target, specAnnotations);
-      if (ref && isTextEditable(ref, specAnnotations)) {
-        if (!refsEqual(selectedElement, ref)) {
-          selectElement(ref);
-        }
-        enterTextEditing();
-      }
-    };
-    svg.addEventListener("dblclick", handleDblClick);
-    cleanups.push(() => svg.removeEventListener("dblclick", handleDblClick));
-    return () => {
-      for (const cleanup of cleanups) {
-        cleanup();
-      }
-    };
-  }
-  function wireKeyboardEditEvents() {
-    if (!svgElement) return () => {
-    };
-    const svg = svgElement;
-    const handleKeyDown = (e) => {
-      const specAnnotations = getSpecAnnotations();
-      switch (e.key) {
-        case "Delete":
-        case "Backspace": {
-          if (selectedElement && !isTextEditingActive) {
-            e.preventDefault();
-            options?.onEdit?.({ type: "delete", element: selectedElement });
-          }
-          break;
-        }
-        case "Escape": {
-          e.preventDefault();
-          if (isTextEditingActive && textEditCleanup) {
-            textEditCleanup();
-            textEditCleanup = null;
-            isTextEditingActive = false;
-          } else if (selectedElement) {
-            deselectElement();
-          }
-          break;
-        }
-        case "ArrowDown":
-        case "ArrowRight": {
-          if (!isTextEditingActive && selectedElement) {
-            e.preventDefault();
-            const editables = getEditableElements(currentSpec, currentLayout);
-            if (editables.length === 0) break;
-            const currentIndex = editables.findIndex((r) => refsEqual(r, selectedElement));
-            const nextIndex = currentIndex >= editables.length - 1 ? 0 : currentIndex + 1;
-            selectElement(editables[nextIndex]);
-          }
-          break;
-        }
-        case "ArrowUp":
-        case "ArrowLeft": {
-          if (!isTextEditingActive && selectedElement) {
-            e.preventDefault();
-            const editables = getEditableElements(currentSpec, currentLayout);
-            if (editables.length === 0) break;
-            const currentIndex = editables.findIndex((r) => refsEqual(r, selectedElement));
-            const nextIndex = currentIndex <= 0 ? editables.length - 1 : currentIndex - 1;
-            selectElement(editables[nextIndex]);
-          }
-          break;
-        }
-        case "Enter": {
-          if (selectedElement && !isTextEditingActive) {
-            if (isTextEditable(selectedElement, specAnnotations)) {
-              e.preventDefault();
-              enterTextEditing();
-            }
-          }
-          break;
-        }
-      }
-    };
-    svg.addEventListener("keydown", handleKeyDown);
-    return () => {
-      svg.removeEventListener("keydown", handleKeyDown);
-    };
-  }
-  function render() {
-    if (isDragging) {
-      pendingRender = true;
-      return;
-    }
-    if (transitionHandle) {
-      transitionHandle.cancel();
-      transitionHandle = null;
-    }
-    if (cleanupAnimations) {
-      cleanupAnimations();
-      cleanupAnimations = null;
-    }
-    cancelAnimations(svgElement);
-    cleanupTooltipEvents?.();
-    cleanupTooltipEvents = null;
-    cleanupVoronoiEvents?.();
-    cleanupVoronoiEvents = null;
-    cleanupKeyboardNav?.();
-    cleanupKeyboardNav = null;
-    cleanupLegend?.();
-    cleanupLegend = null;
-    cleanupChartEvents?.();
-    cleanupChartEvents = null;
-    cleanupAnnotationDrag?.();
-    cleanupAnnotationDrag = null;
-    cleanupEditDrags?.();
-    cleanupEditDrags = null;
-    cleanupSelection?.();
-    cleanupSelection = null;
-    cleanupKeyboardEdit?.();
-    cleanupKeyboardEdit = null;
-    if (textEditCleanup) {
-      textEditCleanup();
-      textEditCleanup = null;
-      isTextEditingActive = false;
-    }
-    overlayElement = null;
-    if (svgElement?.parentNode) {
-      svgElement.parentNode.removeChild(svgElement);
-    }
-    if (tooltipManager) {
-      tooltipManager.destroy();
-    }
-    if (srTable?.parentNode) {
-      srTable.parentNode.removeChild(srTable);
-      srTable = null;
-    }
-    currentLayout = compile();
-    lastRenderedWidth = currentLayout.dimensions.width;
-    lastRenderedSvgHeight = currentLayout.dimensions.height;
-    const shouldAnimate = isFirstRender && !!currentLayout.animation?.enter;
-    const crosshair = !!currentLayout.crosshair;
-    svgElement = renderChartSVG(currentLayout, container, {
-      animate: shouldAnimate,
-      crosshair
-    });
-    tooltipManager = createTooltipManager(container);
-    cleanupTooltipEvents = wireTooltipEvents(
-      svgElement,
-      currentLayout.tooltipDescriptors,
-      tooltipManager
-    );
-    cleanupVoronoiEvents = wireVoronoiTooltipEvents(svgElement, currentLayout, tooltipManager);
-    cleanupKeyboardNav = wireKeyboardNav(
-      svgElement,
-      container,
-      currentLayout.tooltipDescriptors,
-      tooltipManager,
-      currentLayout
-    );
-    cleanupLegend = wireLegendInteraction(
-      svgElement,
-      currentLayout,
-      toggleSeriesVisibility,
-      options?.onLegendToggle,
-      options?.onEdit
-    );
-    if (options?.onMarkClick || options?.onMarkHover || options?.onMarkLeave || options?.onAnnotationClick) {
-      const specAnnotations = "annotations" in currentSpec && Array.isArray(currentSpec.annotations) ? currentSpec.annotations : [];
-      cleanupChartEvents = wireChartEvents(svgElement, currentLayout, specAnnotations, options);
-    }
-    const setDragging = (dragging) => {
-      isDragging = dragging;
-      if (!dragging && pendingRender) {
-        pendingRender = false;
-        render();
-      }
-    };
-    const dragAnnotations = "annotations" in currentSpec && Array.isArray(currentSpec.annotations) ? currentSpec.annotations : [];
-    if (options?.onAnnotationEdit || options?.onEdit) {
-      cleanupAnnotationDrag = wireAnnotationDrag(
-        svgElement,
-        dragAnnotations,
-        options?.onAnnotationEdit,
-        options?.onEdit,
-        setDragging
-      );
-    }
-    if (options?.onEdit) {
-      const editCleanups = [];
-      editCleanups.push(
-        wireConnectorEndpointDrag(svgElement, dragAnnotations, options.onEdit, setDragging)
-      );
-      editCleanups.push(
-        wireAnnotationLabelDrag(svgElement, dragAnnotations, options.onEdit, setDragging)
-      );
-      const editSpec = currentSpec;
-      editCleanups.push(wireChromeDrag(svgElement, editSpec, options.onEdit, setDragging));
-      editCleanups.push(wireLegendDrag(svgElement, editSpec, options.onEdit, setDragging));
-      editCleanups.push(wireSeriesLabelDrag(svgElement, editSpec, options.onEdit, setDragging));
-      cleanupEditDrags = () => {
-        for (const cleanup of editCleanups) {
-          cleanup();
-        }
-      };
-    }
-    if (hasEditingCallbacks(options)) {
-      makeEditable(svgElement);
-      cleanupSelection = wireSelectionEvents();
-      cleanupKeyboardEdit = wireKeyboardEditEvents();
-      if (selectedElement) {
-        const target = findElementByRef(svgElement, selectedElement);
-        if (target) {
-          overlayElement = renderSelectionOverlay(svgElement, selectedElement, currentLayout);
-        } else {
-          selectedElement = null;
-          overlayElement = null;
-        }
-      }
-    }
-    srTable = createScreenReaderTable(currentLayout, container);
-    container.classList.add("oc-root");
-    const isDark = resolveDarkMode3(options?.darkMode);
-    if (isDark) {
-      container.classList.add("oc-dark");
-    } else {
-      container.classList.remove("oc-dark");
-    }
-    stampThemeProperties(container, currentLayout.theme);
-    if (shouldAnimate && svgElement) {
-      cleanupAnimations = setupAnimationCleanup(svgElement, () => {
-        cleanupAnimations = null;
-        if (pendingResize) {
-          pendingResize = false;
-          resize();
-        }
-      });
-    }
-    renderGen += 1;
-    container.dataset.ocRenderGen = String(renderGen);
-    if (fontsReloadPending) {
-      fontsReloadPending = false;
-      container.dataset.ocFontsState = "ready";
-    }
-    if (isFirstRender) {
-      isFirstRender = false;
-    }
-  }
-  function update(newSpec, updateOpts) {
-    if (destroyed) return;
-    const prevSpec = currentSpec;
-    const prevLayout = currentLayout;
-    const entranceWasRunning = cleanupAnimations != null;
-    if (transitionHandle?.running) {
-      transitionSnapshot = transitionHandle.snapshot();
-    }
-    currentSpec = newSpec;
-    const nextFont = resolveEffectiveFont();
-    if (nextFont !== fontFamily) {
-      fontFamily = nextFont;
-      measureText = createMeasureText(fontFamily);
-    }
-    runtimeHiddenSeries.clear();
-    runtimeShownSeries.clear();
-    if (updateOpts && "selectedElement" in updateOpts) {
-      selectedElement = updateOpts.selectedElement ?? null;
-    }
-    render();
-    if (svgElement && canTransition({
-      prevLayout,
-      nextLayout: currentLayout,
-      prevSpec,
-      nextSpec: newSpec,
-      isFirstRender: false,
-      entranceInFlight: entranceWasRunning
-    })) {
-      const snapshot = transitionSnapshot;
-      transitionSnapshot = null;
-      transitionHandle = runTransition({
-        svg: svgElement,
-        prevLayout,
-        nextLayout: currentLayout,
-        animation: currentLayout.animation,
-        fromSnapshot: snapshot ?? void 0,
-        onComplete: () => {
-          transitionHandle = null;
-        }
-      });
-    } else {
-      transitionSnapshot = null;
-    }
-  }
-  function resize() {
-    if (destroyed) return;
-    if (cleanupAnimations) {
-      pendingResize = true;
-      return;
-    }
-    render();
-  }
-  function setHighlight(values) {
-    if (destroyed) return;
-    if (isLayerSpec(currentSpec) || isGraphSpec(currentSpec))
-      return;
-    const spec2 = currentSpec;
-    const colorEnc = spec2.encoding?.color;
-    if (!colorEnc || typeof colorEnc !== "object" || !("field" in colorEnc)) return;
-    const current = colorEnc.highlight;
-    if (!values?.length && !current) return;
-    const updatedColor = { ...colorEnc };
-    if (values && values.length > 0) {
-      updatedColor.highlight = values;
-    } else {
-      delete updatedColor.highlight;
-    }
-    currentSpec = {
-      ...spec2,
-      encoding: { ...spec2.encoding, color: updatedColor }
-    };
-    render();
-  }
-  function doExport(format, exportOptions) {
-    if (!svgElement) {
-      throw new Error("Chart is not rendered yet");
-    }
-    switch (format) {
-      case "svg":
-        return exportSVG(svgElement);
-      case "svg-with-fonts":
-        return exportSVGWithFonts(svgElement, exportOptions);
-      case "png":
-        return exportPNG(svgElement, exportOptions);
-      case "jpg":
-        return exportJPG(svgElement, exportOptions);
-      case "csv":
-        return exportCSV(
-          "data" in currentSpec && Array.isArray(currentSpec.data) ? currentSpec.data : []
-        );
-      default:
-        throw new Error(`Unsupported export format: ${format}`);
-    }
-  }
-  function destroy() {
-    if (destroyed) return;
-    destroyed = true;
-    if (transitionHandle) {
-      transitionHandle.cancel();
-      transitionHandle = null;
-    }
-    transitionSnapshot = null;
-    if (cleanupAnimations) {
-      cleanupAnimations();
-      cleanupAnimations = null;
-      pendingResize = false;
-    }
-    cancelAnimations(svgElement);
-    cleanupTooltipEvents?.();
-    cleanupTooltipEvents = null;
-    cleanupVoronoiEvents?.();
-    cleanupVoronoiEvents = null;
-    cleanupKeyboardNav?.();
-    cleanupKeyboardNav = null;
-    cleanupLegend?.();
-    cleanupLegend = null;
-    cleanupChartEvents?.();
-    cleanupChartEvents = null;
-    cleanupAnnotationDrag?.();
-    cleanupAnnotationDrag = null;
-    cleanupEditDrags?.();
-    cleanupEditDrags = null;
-    cleanupSelection?.();
-    cleanupSelection = null;
-    cleanupKeyboardEdit?.();
-    cleanupKeyboardEdit = null;
-    if (textEditCleanup) {
-      textEditCleanup();
-      textEditCleanup = null;
-      isTextEditingActive = false;
-    }
-    selectedElement = null;
-    overlayElement = null;
-    if (disconnectResize) {
-      disconnectResize();
-      disconnectResize = null;
-    }
-    if (tooltipManager) {
-      tooltipManager.destroy();
-      tooltipManager = null;
-    }
-    if (svgElement?.parentNode) {
-      svgElement.parentNode.removeChild(svgElement);
-      svgElement = null;
-    }
-    if (srTable?.parentNode) {
-      srTable.parentNode.removeChild(srTable);
-      srTable = null;
-    }
-    container.classList.remove("oc-dark");
-    container.classList.remove("oc-root");
-  }
-  render();
-  const pending = scheduleFontReload(
-    fontFamily,
-    () => !destroyed,
-    () => {
-      fontsReloadPending = true;
-      resize();
-    }
-  );
-  container.dataset.ocFontsState = pending ? "pending" : "ready";
-  if (options?.responsive !== false) {
-    disconnectResize = observeResize(container, (width, height) => {
-      if (isAutoHeight === true) {
-        const widthChanged = width !== lastRenderedWidth;
-        const selfInducedHeight = height === lastRenderedSvgHeight;
-        if (!widthChanged && selfInducedHeight) return;
-        if (!selfInducedHeight) {
-          isAutoHeight = null;
-        }
-        resize();
-        return;
-      }
-      resize();
-    });
-  }
-  return {
-    update,
-    resize,
-    export: doExport,
-    destroy,
-    get layout() {
-      return currentLayout;
-    },
-    getSelectedElement() {
-      return selectedElement;
-    },
-    select(ref) {
-      if (destroyed) return;
-      selectElement(ref);
-    },
-    deselect() {
-      if (destroyed) return;
-      deselectElement();
-    },
-    get isEditing() {
-      return isTextEditingActive;
-    },
-    setHighlight
-  };
-}
-
-// src/renderers/table-cells.ts
-function applyCellStyle(td, cell) {
-  if (cell.style.backgroundColor) {
-    td.style.background = cell.style.backgroundColor;
-  }
-  if (cell.style.color) {
-    td.style.color = cell.style.color;
-  }
-  if (cell.style.fontWeight) {
-    td.style.fontWeight = String(cell.style.fontWeight);
-  }
-  if (cell.style.fontVariant) {
-    td.style.fontVariant = cell.style.fontVariant;
-  }
-  if (cell.aria) {
-    td.setAttribute("aria-label", cell.aria);
-  }
-}
-function countryToEmoji(code) {
-  return [...code.toUpperCase()].map((c2) => String.fromCodePoint(c2.charCodeAt(0) + 127397)).join("");
-}
-var COUNTRY_NAMES = {
-  US: "United States",
-  CN: "China",
-  IN: "India",
-  ID: "Indonesia",
-  BR: "Brazil",
-  PK: "Pakistan",
-  NG: "Nigeria",
-  BD: "Bangladesh",
-  RU: "Russia",
-  MX: "Mexico",
-  JP: "Japan",
-  DE: "Germany",
-  GB: "United Kingdom",
-  FR: "France",
-  IT: "Italy",
-  CA: "Canada",
-  AU: "Australia",
-  KR: "South Korea",
-  ES: "Spain",
-  AR: "Argentina",
-  CO: "Colombia",
-  ZA: "South Africa",
-  TR: "Turkey",
-  SA: "Saudi Arabia",
-  UA: "Ukraine",
-  PL: "Poland",
-  NL: "Netherlands",
-  SE: "Sweden",
-  NO: "Norway",
-  DK: "Denmark",
-  FI: "Finland",
-  CH: "Switzerland",
-  AT: "Austria",
-  BE: "Belgium",
-  PT: "Portugal",
-  IE: "Ireland",
-  NZ: "New Zealand",
-  SG: "Singapore",
-  IL: "Israel",
-  AE: "United Arab Emirates",
-  EG: "Egypt",
-  TH: "Thailand",
-  VN: "Vietnam",
-  PH: "Philippines",
-  MY: "Malaysia",
-  CL: "Chile",
-  PE: "Peru",
-  CZ: "Czech Republic",
-  GR: "Greece",
-  HU: "Hungary",
-  RO: "Romania",
-  ET: "Ethiopia"
-};
-function getCountryName(code) {
-  return COUNTRY_NAMES[code.toUpperCase()] || code.toUpperCase();
-}
-function describeSparklineTrend(data) {
-  if (data.type === "line" && data.points.length >= 2) {
-    const first = data.points[0].y;
-    const last = data.points[data.points.length - 1].y;
-    const count = data.points.length;
-    if (last > first) return `Sparkline with ${count} points, trending upward`;
-    if (last < first) return `Sparkline with ${count} points, trending downward`;
-    return `Sparkline with ${count} points, roughly flat`;
-  }
-  if ((data.type === "bar" || data.type === "column") && data.bars.length > 0) {
-    return `${data.type === "column" ? "Column" : "Bar"} sparkline with ${data.bars.length} values`;
-  }
-  return "Sparkline";
-}
-function renderTextCell(cell) {
-  const td = document.createElement("td");
-  td.textContent = cell.formattedValue;
-  applyCellStyle(td, cell);
-  return td;
-}
-function renderHeatmapCell(cell) {
-  const td = document.createElement("td");
-  td.className = "oc-table-heatmap";
-  td.textContent = cell.formattedValue;
-  applyCellStyle(td, cell);
-  return td;
+function renderHeatmapCell(cell) {
+  const td = document.createElement("td");
+  td.className = "oc-table-heatmap";
+  td.textContent = cell.formattedValue;
+  applyCellStyle(td, cell);
+  return td;
 }
 function renderCategoryCell(cell) {
   const td = document.createElement("td");
@@ -7943,7 +3716,7 @@ import { compileSankey } from "@opendata-ai/openchart-engine";
 import {
   BRAND_FONT_SIZE as BRAND_FONT_SIZE2,
   BRAND_MIN_WIDTH as BRAND_MIN_WIDTH2,
-  estimateTextWidth as estimateTextWidth2,
+  estimateTextWidth,
   textAscent as textAscent2,
   wrapText
 } from "@opendata-ai/openchart-core";
@@ -7951,10 +3724,6 @@ import { clampStaggerDelay } from "@opendata-ai/openchart-engine";
 var SVG_NS2 = "http://www.w3.org/2000/svg";
 var XLINK_NS2 = "http://www.w3.org/1999/xlink";
 var BRAND_URL2 = "https://tryopendata.ai";
-var EASE_VAR_MAP = {
-  smooth: "var(--oc-ease-smooth)",
-  snappy: "var(--oc-ease-snappy)"
-};
 function createSVGElement2(tag) {
   return document.createElementNS(SVG_NS2, tag);
 }
@@ -8108,7 +3877,7 @@ function renderLegend(parent, legendLayout) {
   for (let i = 0; i < legend.entries.length; i++) {
     const entry = legend.entries[i];
     if (isHorizontal && i > 0) {
-      const labelWidth = estimateTextWidth2(
+      const labelWidth = estimateTextWidth(
         entry.label,
         legend.labelStyle.fontSize,
         legend.labelStyle.fontWeight
@@ -8159,7 +3928,7 @@ function renderLegend(parent, legendLayout) {
     entryG.appendChild(label);
     g.appendChild(entryG);
     if (isHorizontal) {
-      const labelWidth = estimateTextWidth2(
+      const labelWidth = estimateTextWidth(
         entry.label,
         legend.labelStyle.fontSize,
         legend.labelStyle.fontWeight
@@ -8320,11 +4089,12 @@ function renderSankeySVG(layout, animation) {
   if (enterPhase) {
     const totalMarks = layout.nodes.length + layout.links.length;
     const stagger = clampStaggerDelay(enterPhase.staggerDelay, totalMarks);
-    svg.style.setProperty("--oc-animation-duration", `${enterPhase.duration}ms`);
-    svg.style.setProperty("--oc-animation-stagger", `${stagger}ms`);
-    svg.style.setProperty("--oc-annotation-delay", `${animation.annotationDelay}ms`);
-    const easeVar = EASE_VAR_MAP[enterPhase.ease] || EASE_VAR_MAP.smooth;
-    svg.style.setProperty("--oc-animation-ease", easeVar);
+    stampAnimationVars(svg, {
+      duration: enterPhase.duration,
+      stagger,
+      annotationDelay: animation.annotationDelay,
+      ease: enterPhase.ease
+    });
   }
   const bg = createSVGElement2("rect");
   bg.setAttribute("class", "oc-background");
@@ -8352,7 +4122,7 @@ function renderSankeySVG(layout, animation) {
 }
 
 // src/sankey-mount.ts
-function resolveDarkMode4(mode) {
+function resolveDarkMode3(mode) {
   if (mode === "force") return true;
   if (mode === "off" || mode === void 0) return false;
   if (typeof window !== "undefined" && window.matchMedia) {
@@ -8391,7 +4161,7 @@ function createSankey(container, spec, options) {
   }
   function compile() {
     const { width, height } = getContainerDimensions();
-    const darkMode = resolveDarkMode4(options?.darkMode);
+    const darkMode = resolveDarkMode3(options?.darkMode);
     const compileOpts = {
       width,
       height,
@@ -8566,7 +4336,7 @@ function createSankey(container, spec, options) {
     const animation = shouldAnimate ? currentLayout.animation : void 0;
     svgElement = renderSankeySVG(currentLayout, animation);
     container.appendChild(svgElement);
-    const isDark = resolveDarkMode4(options?.darkMode);
+    const isDark = resolveDarkMode3(options?.darkMode);
     if (isDark) {
       container.classList.add("oc-dark");
     } else {
@@ -8667,7 +4437,7 @@ function createSankey(container, spec, options) {
     const animation = shouldAnimate ? currentLayout.animation : void 0;
     svgElement = renderSankeySVG(currentLayout, animation);
     container.appendChild(svgElement);
-    const isDark = resolveDarkMode4(options?.darkMode);
+    const isDark = resolveDarkMode3(options?.darkMode);
     if (isDark) {
       container.classList.add("oc-dark");
     } else {
@@ -8692,7 +4462,7 @@ function createSankey(container, spec, options) {
     console.error("[viz] Sankey mount failed:", err);
     throw err;
   }
-  const fontsPending2 = scheduleFontReload(
+  const fontsPending = scheduleFontReload(
     fontFamily,
     () => !destroyed,
     () => {
@@ -8700,7 +4470,7 @@ function createSankey(container, spec, options) {
       resize();
     }
   );
-  container.dataset.ocFontsState = fontsPending2 ? "pending" : "ready";
+  container.dataset.ocFontsState = fontsPending ? "pending" : "ready";
   if (options?.responsive !== false) {
     disconnectResize = observeResize(container, () => {
       resize();
@@ -8911,10 +4681,21 @@ import { compileTable } from "@opendata-ai/openchart-engine";
 // src/table-renderer.ts
 import { BRAND_FONT_SIZE as BRAND_FONT_SIZE3 } from "@opendata-ai/openchart-core";
 import { clampStaggerDelay as clampStaggerDelay2 } from "@opendata-ai/openchart-engine";
-var EASE_VAR_MAP2 = {
-  smooth: "var(--oc-ease-smooth)",
-  snappy: "var(--oc-ease-snappy)"
-};
+
+// 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 = "hidden";
+  el.style.clipPath = "inset(50%)";
+  el.style.whiteSpace = "nowrap";
+  el.style.borderWidth = "0";
+}
+
+// src/table-renderer.ts
 var BRAND_URL3 = "https://tryopendata.ai";
 function renderChromeBlock(layout, position) {
   const chrome = layout.chrome;
@@ -9116,15 +4897,7 @@ function renderTable(layout, container, opts) {
     }
     const caption = document.createElement("caption");
     caption.className = "oc-sr-only";
-    caption.style.position = "absolute";
-    caption.style.width = "1px";
-    caption.style.height = "1px";
-    caption.style.padding = "0";
-    caption.style.margin = "-1px";
-    caption.style.overflow = "hidden";
-    caption.style.clipPath = "inset(50%)";
-    caption.style.whiteSpace = "nowrap";
-    caption.style.borderWidth = "0";
+    applySrOnlyStyles(caption);
     caption.textContent = layout.a11y.summary;
     table.appendChild(caption);
     table.appendChild(renderThead(layout.columns, layout.sort));
@@ -9144,15 +4917,7 @@ function renderTable(layout, container, opts) {
   }
   const liveRegion = document.createElement("div");
   liveRegion.className = "oc-table-live-region oc-sr-only";
-  liveRegion.style.position = "absolute";
-  liveRegion.style.width = "1px";
-  liveRegion.style.height = "1px";
-  liveRegion.style.padding = "0";
-  liveRegion.style.margin = "-1px";
-  liveRegion.style.overflow = "hidden";
-  liveRegion.style.clipPath = "inset(50%)";
-  liveRegion.style.whiteSpace = "nowrap";
-  liveRegion.style.borderWidth = "0";
+  applySrOnlyStyles(liveRegion);
   liveRegion.setAttribute("aria-live", "polite");
   liveRegion.setAttribute("aria-atomic", "true");
   liveRegion.setAttribute("role", "status");
@@ -9177,10 +4942,11 @@ function renderTable(layout, container, opts) {
     const enterPhase = layout.animation.enter;
     const rowCount = layout.rows.length;
     const stagger = clampStaggerDelay2(enterPhase.staggerDelay, rowCount);
-    const s = wrapper.style;
-    s.setProperty("--oc-animation-duration", `${enterPhase.duration}ms`);
-    s.setProperty("--oc-animation-stagger", `${stagger}ms`);
-    s.setProperty("--oc-animation-ease", EASE_VAR_MAP2[enterPhase.ease] || EASE_VAR_MAP2.smooth);
+    stampAnimationVars(wrapper, {
+      duration: enterPhase.duration,
+      stagger,
+      ease: enterPhase.ease
+    });
     wrapper.classList.add("oc-animate");
   }
   container.appendChild(wrapper);
@@ -9188,7 +4954,7 @@ function renderTable(layout, container, opts) {
 }
 
 // src/table-mount.ts
-function resolveDarkMode5(mode) {
+function resolveDarkMode4(mode) {
   if (mode === "force") return true;
   if (mode === "off" || mode === void 0) return false;
   if (typeof window !== "undefined" && window.matchMedia) {
@@ -9196,7 +4962,7 @@ function resolveDarkMode5(mode) {
   }
   return false;
 }
-function csvEscape2(value) {
+function csvEscape(value) {
   if (value.includes(",") || value.includes('"') || value.includes("\n") || value.includes("\r")) {
     return `"${value.replace(/"/g, '""')}"`;
   }
@@ -9256,7 +5022,7 @@ function createTable(container, spec, options) {
   }
   function compile() {
     const state = getState();
-    const darkMode = resolveDarkMode5(options?.darkMode);
+    const darkMode = resolveDarkMode4(options?.darkMode);
     const { width } = getContainerDimensions();
     const compileOpts = {
       width,
@@ -9318,7 +5084,7 @@ function createTable(container, spec, options) {
       if (isFirstRender) {
         isFirstRender = false;
       }
-      const isDark = resolveDarkMode5(options?.darkMode);
+      const isDark = resolveDarkMode4(options?.darkMode);
       if (isDark) {
         container.classList.add("oc-dark");
       } else {
@@ -9473,7 +5239,7 @@ function createTable(container, spec, options) {
       throw new Error(`Unsupported export format: ${format}`);
     }
     const state = getState();
-    const darkMode = resolveDarkMode5(options?.darkMode);
+    const darkMode = resolveDarkMode4(options?.darkMode);
     const { width } = getContainerDimensions();
     const fullLayout = compileTable(currentSpec, {
       width,
@@ -9485,18 +5251,24 @@ function createTable(container, spec, options) {
       // No page/pageSize: get all rows
     });
     const headers = fullLayout.columns.map((c2) => c2.label);
-    const csvRows = [headers.map(csvEscape2).join(",")];
+    const csvRows = [headers.map(csvEscape).join(",")];
     for (const row of fullLayout.rows) {
-      const values = row.cells.map((cell) => csvEscape2(cell.formattedValue));
+      const values = row.cells.map((cell) => csvEscape(cell.formattedValue));
       csvRows.push(values.join(","));
     }
     return csvRows.join("\n");
   }
   function setState(partial) {
     if (destroyed) return;
-    if (partial.sort !== void 0) internalState.sort = partial.sort;
-    if (partial.search !== void 0) internalState.search = partial.search;
-    if (partial.page !== void 0) internalState.page = partial.page;
+    if (isControlled && options?.externalState) {
+      if (partial.sort !== void 0) options.externalState.sort = partial.sort;
+      if (partial.search !== void 0) options.externalState.search = partial.search;
+      if (partial.page !== void 0) options.externalState.page = partial.page;
+    } else {
+      if (partial.sort !== void 0) internalState.sort = partial.sort;
+      if (partial.search !== void 0) internalState.search = partial.search;
+      if (partial.page !== void 0) internalState.page = partial.page;
+    }
     render();
   }
   function destroy() {
@@ -9561,7 +5333,7 @@ function pickTargetTileSize(width) {
   if (width < BREAKPOINT_COMPACT_MAX) return 34;
   return 40;
 }
-function resolveDarkMode6(mode) {
+function resolveDarkMode5(mode) {
   if (mode === "force") return true;
   if (mode === "off" || mode === void 0) return false;
   if (typeof window !== "undefined" && window.matchMedia) {
@@ -9579,6 +5351,7 @@ function createTileMap(container, spec, options) {
   let disconnectResize = null;
   let animationCleanup = null;
   let pendingResize = false;
+  let isAutoHeight = null;
   let fontsReloadPending = false;
   container.classList.add("oc-tilemap-root");
   function resolveEffectiveFont() {
@@ -9590,6 +5363,12 @@ function createTileMap(container, spec, options) {
   function getContainerDimensions() {
     const rect = container.getBoundingClientRect();
     const width = Math.max(rect.width || 600, 100);
+    if (isAutoHeight === null && (rect.width > 0 || rect.height > 0)) {
+      isAutoHeight = rect.height === 0 && rect.width > 0;
+    }
+    if (isAutoHeight === false && rect.height > 0) {
+      return { width, height: Math.max(rect.height, 100) };
+    }
     if (width >= BREAKPOINT_MEDIUM_MAX) {
       return { width, height: width };
     }
@@ -9599,7 +5378,7 @@ function createTileMap(container, spec, options) {
   }
   function compile() {
     const { width, height } = getContainerDimensions();
-    const darkMode = resolveDarkMode6(options?.darkMode);
+    const darkMode = resolveDarkMode5(options?.darkMode);
     const compileOpts = {
       width,
       height,
@@ -9771,12 +5550,12 @@ function createTileMap(container, spec, options) {
     }
     container.classList.remove("oc-tilemap-root", "oc-dark");
   }
-  if (resolveDarkMode6(options?.darkMode)) {
+  if (resolveDarkMode5(options?.darkMode)) {
     container.classList.add("oc-dark");
   }
   currentLayout = compile();
   render(true);
-  const fontsPending2 = scheduleFontReload(
+  const fontsPending = scheduleFontReload(
     fontFamily,
     () => !destroyed,
     () => {
@@ -9784,7 +5563,7 @@ function createTileMap(container, spec, options) {
       resize();
     }
   );
-  container.dataset.ocFontsState = fontsPending2 ? "pending" : "ready";
+  container.dataset.ocFontsState = fontsPending ? "pending" : "ready";
   if (options?.responsive !== false) {
     disconnectResize = observeResize(container, () => {
       resize();
@@ -9805,12 +5584,14 @@ export {
   createBarList,
   createChart,
   createGraph,
+  createMap,
   createSankey,
   createSimulationWorker,
   createTable,
   createTextEditOverlay,
   createTileMap,
   createTooltipManager,
+  createYouDrawIt,
   exportCSV,
   exportJPG,
   exportPNG,