@opendata-ai/openchart-vanilla 6.3.0 → 6.5.0

package/dist/index.js

@@ -2561,7 +2561,7 @@ import { computePosition, flip, offset, shift } from "@floating-ui/dom";
 var TOOLTIP_OFFSET = 12;
 function createTooltipManager(container) {
   const tooltip = document.createElement("div");
-  tooltip.className = "viz-tooltip";
+  tooltip.className = "oc-tooltip";
   tooltip.setAttribute("role", "tooltip");
   container.style.position = container.style.position || "relative";
   container.appendChild(tooltip);
@@ -2580,19 +2580,19 @@ function createTooltipManager(container) {
       let html = "";
       if (content.title) {
         const titleColor = content.fields.find((f) => f.color)?.color;
-        html += '<div class="viz-tooltip-header">';
+        html += '<div class="oc-tooltip-header">';
         if (titleColor) {
-          html += `<span class="viz-tooltip-dot" style="background:${esc(titleColor)}"></span>`;
+          html += `<span class="oc-tooltip-dot" style="background:${esc(titleColor)}"></span>`;
         }
-        html += `<span class="viz-tooltip-title">${esc(content.title)}</span>`;
+        html += `<span class="oc-tooltip-title">${esc(content.title)}</span>`;
         html += "</div>";
       }
       if (content.fields.length > 0) {
-        html += '<div class="viz-tooltip-body">';
+        html += '<div class="oc-tooltip-body">';
         for (const field of content.fields) {
-          html += '<div class="viz-tooltip-row">';
-          html += `<span class="viz-tooltip-label">${esc(field.label)}</span>`;
-          html += `<span class="viz-tooltip-value">${esc(field.value)}</span>`;
+          html += '<div class="oc-tooltip-row">';
+          html += `<span class="oc-tooltip-label">${esc(field.label)}</span>`;
+          html += `<span class="oc-tooltip-value">${esc(field.value)}</span>`;
           html += "</div>";
         }
         html += "</div>";
@@ -2771,27 +2771,27 @@ function createGraph(container, spec, options) {
     const { width, height } = getContainerDimensions();
     const isDark = resolveDarkMode(options?.darkMode);
     wrapper = document.createElement("div");
-    wrapper.className = isDark ? "viz-graph-wrapper viz-dark" : "viz-graph-wrapper";
+    wrapper.className = isDark ? "oc-graph-wrapper oc-dark" : "oc-graph-wrapper";
     if (isDark) {
-      container.classList.add("viz-dark");
+      container.classList.add("oc-dark");
     } else {
-      container.classList.remove("viz-dark");
+      container.classList.remove("oc-dark");
     }
     const resolvedTheme = compilation.theme;
     if (resolvedTheme) {
       const s = wrapper.style;
-      s.setProperty("--viz-bg", resolvedTheme.colors.background);
-      s.setProperty("--viz-text", resolvedTheme.colors.text);
-      s.setProperty("--viz-text-secondary", resolvedTheme.colors.axis ?? resolvedTheme.colors.text);
-      s.setProperty("--viz-font-family", resolvedTheme.fonts.family);
+      s.setProperty("--oc-bg", resolvedTheme.colors.background);
+      s.setProperty("--oc-text", resolvedTheme.colors.text);
+      s.setProperty("--oc-text-secondary", resolvedTheme.colors.axis ?? resolvedTheme.colors.text);
+      s.setProperty("--oc-font-family", resolvedTheme.fonts.family);
       s.fontFamily = resolvedTheme.fonts.family;
     }
     chromeEl = document.createElement("div");
-    chromeEl.className = "viz-graph-chrome";
+    chromeEl.className = "oc-graph-chrome";
     renderChrome2();
     wrapper.appendChild(chromeEl);
     canvas = document.createElement("canvas");
-    canvas.className = "viz-graph-canvas";
+    canvas.className = "oc-graph-canvas";
     canvas.setAttribute("role", "img");
     if (compilation.a11y?.altText) {
       canvas.setAttribute("aria-label", compilation.a11y.altText);
@@ -2799,7 +2799,7 @@ function createGraph(container, spec, options) {
     wrapper.appendChild(canvas);
     if (options?.legend !== false) {
       legendEl = document.createElement("div");
-      legendEl.className = "viz-graph-legend";
+      legendEl.className = "oc-graph-legend";
       renderLegend2();
       wrapper.appendChild(legendEl);
     }
@@ -2813,10 +2813,10 @@ function createGraph(container, spec, options) {
     if (!chromeEl) return;
     let html = "";
     if (compilation.chrome.title) {
-      html += `<h2 class="viz-title">${escapeHtml(compilation.chrome.title.text)}</h2>`;
+      html += `<h2 class="oc-title">${escapeHtml(compilation.chrome.title.text)}</h2>`;
     }
     if (compilation.chrome.subtitle) {
-      html += `<p class="viz-subtitle">${escapeHtml(compilation.chrome.subtitle.text)}</p>`;
+      html += `<p class="oc-subtitle">${escapeHtml(compilation.chrome.subtitle.text)}</p>`;
     }
     chromeEl.innerHTML = html;
     if (!html) {
@@ -2835,8 +2835,8 @@ function createGraph(container, spec, options) {
     legendEl.style.display = "";
     let html = "";
     for (const entry of entries) {
-      html += '<div class="viz-graph-legend-item">';
-      html += `<span class="viz-graph-legend-swatch" style="background:${escapeHtml(entry.color)}"></span>`;
+      html += '<div class="oc-graph-legend-item">';
+      html += `<span class="oc-graph-legend-swatch" style="background:${escapeHtml(entry.color)}"></span>`;
       html += `<span>${escapeHtml(entry.label)}</span>`;
       html += "</div>";
     }
@@ -3017,14 +3017,14 @@ function createGraph(container, spec, options) {
         const x3 = node?.x ?? 0;
         const y3 = node?.y ?? 0;
         simulation?.pinNode(nodeId, x3, y3);
-        canvas?.classList.add("viz-graph-canvas--dragging");
+        canvas?.classList.add("oc-graph-canvas--dragging");
       },
       onNodeDrag(nodeId, x3, y3) {
         simulation?.dragNode(nodeId, x3, y3);
       },
       onNodeDragEnd(nodeId) {
         simulation?.unpinNode(nodeId);
-        canvas?.classList.remove("viz-graph-canvas--dragging");
+        canvas?.classList.remove("oc-graph-canvas--dragging");
       },
       onDoubleClick(nodeId) {
         options?.onNodeDoubleClick?.(nodeDataById(nodeId));
@@ -3199,7 +3199,7 @@ function createGraph(container, spec, options) {
     chromeEl = null;
     legendEl = null;
     renderer = null;
-    container.classList.remove("viz-dark");
+    container.classList.remove("oc-dark");
   }
   try {
     compilation = compile();
@@ -3255,12 +3255,62 @@ function escapeHtml(str) {
 }
 
 // src/mount.ts
-import { isLayerSpec } from "@opendata-ai/openchart-core";
+import { elementRef, isLayerSpec } from "@opendata-ai/openchart-core";
 import { compileChart, compileLayer } from "@opendata-ai/openchart-engine";
 
+// src/animation.ts
+function cancelAnimations(svg) {
+  if (svg) {
+    svg.classList.remove("oc-animate");
+  }
+}
+function setupAnimationCleanup(svg) {
+  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");
+  }, 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/svg-renderer.ts
 import { BRAND_FONT_SIZE as BRAND_FONT_SIZE2, BRAND_MIN_WIDTH as BRAND_MIN_WIDTH2, estimateTextWidth } from "@opendata-ai/openchart-core";
+import { clampStaggerDelay } from "@opendata-ai/openchart-engine";
 var SVG_NS = "http://www.w3.org/2000/svg";
+var currentAnimation;
+function stampAnimationAttrs(el, mark, fallbackIndex) {
+  if (!currentAnimation?.enabled) return;
+  const idx = mark.animationIndex ?? fallbackIndex;
+  el.setAttribute("data-animation-index", String(idx));
+  el.style.setProperty("--oc-mark-index", String(idx));
+}
+var EASE_VAR_MAP = {
+  smooth: "var(--oc-ease-smooth)",
+  snappy: "var(--oc-ease-snappy)"
+};
 function computeXAxisExtent(layout) {
   const xAxis = layout.axes.x;
   if (!xAxis) return 0;
@@ -3363,13 +3413,13 @@ function renderChromeElement(parent, element, className, chromeKey) {
 }
 function renderChrome(parent, layout) {
   const g = createSVGElement("g");
-  g.setAttribute("class", "viz-chrome");
+  g.setAttribute("class", "oc-chrome");
   const { chrome } = layout;
   if (chrome.title) {
-    renderChromeElement(g, chrome.title, "viz-title", "title");
+    renderChromeElement(g, chrome.title, "oc-title", "title");
   }
   if (chrome.subtitle) {
-    renderChromeElement(g, chrome.subtitle, "viz-subtitle", "subtitle");
+    renderChromeElement(g, chrome.subtitle, "oc-subtitle", "subtitle");
   }
   const xAxisExtent = computeXAxisExtent(layout);
   const bottomOffset = layout.area.y + layout.area.height + xAxisExtent;
@@ -3377,7 +3427,7 @@ function renderChrome(parent, layout) {
     renderChromeElement(
       g,
       { ...chrome.source, y: bottomOffset + chrome.source.y },
-      "viz-source",
+      "oc-source",
       "source"
     );
   }
@@ -3385,7 +3435,7 @@ function renderChrome(parent, layout) {
     renderChromeElement(
       g,
       { ...chrome.byline, y: bottomOffset + chrome.byline.y },
-      "viz-byline",
+      "oc-byline",
       "byline"
     );
   }
@@ -3393,7 +3443,7 @@ function renderChrome(parent, layout) {
     renderChromeElement(
       g,
       { ...chrome.footer, y: bottomOffset + chrome.footer.y },
-      "viz-footer",
+      "oc-footer",
       "footer"
     );
   }
@@ -3401,11 +3451,11 @@ function renderChrome(parent, layout) {
 }
 function renderAxis(parent, axis, orientation, layout) {
   const g = createSVGElement("g");
-  g.setAttribute("class", `viz-axis viz-axis-${orientation}`);
+  g.setAttribute("class", `oc-axis oc-axis-${orientation}`);
   const { area } = layout;
   if (orientation === "x") {
     const line = createSVGElement("line");
-    line.setAttribute("class", "viz-axis-line");
+    line.setAttribute("class", "oc-axis-line");
     setAttrs(line, {
       x1: axis.start.x,
       y1: axis.start.y,
@@ -3419,7 +3469,7 @@ function renderAxis(parent, axis, orientation, layout) {
   for (const tick of axis.ticks) {
     if (orientation === "x") {
       const label = createSVGElement("text");
-      label.setAttribute("class", "viz-axis-tick");
+      label.setAttribute("class", "oc-axis-tick");
       if (axis.tickAngle && Math.abs(axis.tickAngle) > 10) {
         const labelX = tick.position;
         const labelY = area.y + area.height + 6;
@@ -3442,7 +3492,7 @@ function renderAxis(parent, axis, orientation, layout) {
       g.appendChild(label);
     } else {
       const label = createSVGElement("text");
-      label.setAttribute("class", "viz-axis-tick");
+      label.setAttribute("class", "oc-axis-tick");
       setAttrs(label, {
         x: area.x - 6,
         y: tick.position,
@@ -3456,7 +3506,7 @@ function renderAxis(parent, axis, orientation, layout) {
   }
   for (const gridline of axis.gridlines) {
     const gl = createSVGElement("line");
-    gl.setAttribute("class", "viz-gridline");
+    gl.setAttribute("class", "oc-gridline");
     if (orientation === "y") {
       setAttrs(gl, {
         x1: area.x,
@@ -3482,7 +3532,7 @@ function renderAxis(parent, axis, orientation, layout) {
   }
   if (axis.label && axis.labelStyle) {
     const axisLabel = createSVGElement("text");
-    axisLabel.setAttribute("class", "viz-axis-title");
+    axisLabel.setAttribute("class", "oc-axis-title");
     applyTextStyle(axisLabel, axis.labelStyle);
     axisLabel.textContent = axis.label;
     if (orientation === "x") {
@@ -3533,7 +3583,8 @@ function registerMarkRenderer(type, renderer) {
 function renderLineMark(mark, index2) {
   const g = createSVGElement("g");
   g.setAttribute("data-mark-id", `line-${mark.seriesKey ?? index2}`);
-  g.setAttribute("class", "viz-mark viz-mark-line");
+  g.setAttribute("class", "oc-mark oc-mark-line");
+  stampAnimationAttrs(g, mark, index2);
   if (mark.points.length > 1) {
     const path = createSVGElement("path");
     const d = mark.path ?? mark.points.map((p, i) => `${i === 0 ? "M" : "L"}${p.x},${p.y}`).join(" ");
@@ -3553,7 +3604,7 @@ function renderLineMark(mark, index2) {
   }
   if (mark.label?.visible) {
     const label = createSVGElement("text");
-    label.setAttribute("class", "viz-mark-label");
+    label.setAttribute("class", "oc-mark-label");
     if (mark.seriesKey) {
       label.setAttribute("data-series", mark.seriesKey);
     }
@@ -3563,7 +3614,7 @@ function renderLineMark(mark, index2) {
     g.appendChild(label);
     if (mark.label.connector) {
       const connector = createSVGElement("line");
-      connector.setAttribute("class", "viz-mark-connector");
+      connector.setAttribute("class", "oc-mark-connector");
       setAttrs(connector, {
         x1: mark.label.connector.from.x,
         y1: mark.label.connector.from.y,
@@ -3581,7 +3632,8 @@ function renderLineMark(mark, index2) {
 function renderAreaMark(mark, index2) {
   const g = createSVGElement("g");
   g.setAttribute("data-mark-id", `area-${mark.seriesKey ?? index2}`);
-  g.setAttribute("class", "viz-mark viz-mark-area");
+  g.setAttribute("class", "oc-mark oc-mark-area");
+  stampAnimationAttrs(g, mark, index2);
   if (mark.path) {
     const fill = createSVGElement("path");
     setAttrs(fill, {
@@ -3593,6 +3645,7 @@ function renderAreaMark(mark, index2) {
     g.appendChild(fill);
     if (mark.stroke && mark.topPath) {
       const strokePath = createSVGElement("path");
+      strokePath.setAttribute("class", "oc-area-top");
       setAttrs(strokePath, {
         d: mark.topPath,
         fill: "none",
@@ -3607,7 +3660,11 @@ function renderAreaMark(mark, index2) {
 function renderRectMark(mark, index2) {
   const g = createSVGElement("g");
   g.setAttribute("data-mark-id", `rect-${index2}`);
-  g.setAttribute("class", "viz-mark viz-mark-rect");
+  g.setAttribute("class", "oc-mark oc-mark-rect");
+  stampAnimationAttrs(g, mark, index2);
+  if (currentAnimation?.enabled && mark.orient === "horizontal") {
+    g.setAttribute("data-orient", "horizontal");
+  }
   const rect = createSVGElement("rect");
   setAttrs(rect, {
     x: mark.x,
@@ -3628,7 +3685,7 @@ function renderRectMark(mark, index2) {
   g.appendChild(rect);
   if (mark.label?.visible) {
     const label = createSVGElement("text");
-    label.setAttribute("class", "viz-mark-label");
+    label.setAttribute("class", "oc-mark-label");
     setAttrs(label, { x: mark.label.x, y: mark.label.y });
     applyTextStyle(label, mark.label.style);
     label.textContent = mark.label.text;
@@ -3639,8 +3696,9 @@ function renderRectMark(mark, index2) {
 function renderArcMark(mark, index2) {
   const g = createSVGElement("g");
   g.setAttribute("data-mark-id", `arc-${index2}`);
-  g.setAttribute("class", "viz-mark viz-mark-arc");
+  g.setAttribute("class", "oc-mark oc-mark-arc");
   g.setAttribute("transform", `translate(${mark.center.x},${mark.center.y})`);
+  stampAnimationAttrs(g, mark, index2);
   const path = createSVGElement("path");
   setAttrs(path, {
     d: mark.path,
@@ -3651,7 +3709,7 @@ function renderArcMark(mark, index2) {
   g.appendChild(path);
   if (mark.label?.visible) {
     const label = createSVGElement("text");
-    label.setAttribute("class", "viz-mark-label");
+    label.setAttribute("class", "oc-mark-label");
     setAttrs(label, {
       x: mark.label.x - mark.center.x,
       y: mark.label.y - mark.center.y
@@ -3665,7 +3723,8 @@ function renderArcMark(mark, index2) {
 function renderPointMark(mark, index2) {
   const circle = createSVGElement("circle");
   circle.setAttribute("data-mark-id", `point-${index2}`);
-  circle.setAttribute("class", "viz-mark viz-mark-point");
+  circle.setAttribute("class", "oc-mark oc-mark-point");
+  stampAnimationAttrs(circle, mark, index2);
   setAttrs(circle, {
     cx: mark.cx,
     cy: mark.cy,
@@ -3682,7 +3741,8 @@ function renderPointMark(mark, index2) {
 function renderTextMark(mark, index2) {
   const text = createSVGElement("text");
   text.setAttribute("data-mark-id", `textMark-${index2}`);
-  text.setAttribute("class", "viz-mark viz-mark-text");
+  text.setAttribute("class", "oc-mark oc-mark-text");
+  stampAnimationAttrs(text, mark, index2);
   setAttrs(text, {
     x: mark.x,
     y: mark.y,
@@ -3705,7 +3765,8 @@ function renderTextMark(mark, index2) {
 function renderRuleMark(mark, index2) {
   const line = createSVGElement("line");
   line.setAttribute("data-mark-id", `rule-${index2}`);
-  line.setAttribute("class", "viz-mark viz-mark-rule");
+  line.setAttribute("class", "oc-mark oc-mark-rule");
+  stampAnimationAttrs(line, mark, index2);
   setAttrs(line, {
     x1: mark.x1,
     y1: mark.y1,
@@ -3725,7 +3786,8 @@ function renderRuleMark(mark, index2) {
 function renderTickMark(mark, index2) {
   const line = createSVGElement("line");
   line.setAttribute("data-mark-id", `tick-${index2}`);
-  line.setAttribute("class", "viz-mark viz-mark-tick");
+  line.setAttribute("class", "oc-mark oc-mark-tick");
+  stampAnimationAttrs(line, mark, index2);
   const half = mark.length / 2;
   if (mark.orient === "vertical") {
     setAttrs(line, {
@@ -3774,28 +3836,37 @@ function getMarkSeries(mark) {
 }
 function renderMarks(parent, layout) {
   const g = createSVGElement("g");
-  g.setAttribute("class", "viz-marks");
+  g.setAttribute("class", "oc-marks");
   for (let i = 0; i < layout.marks.length; i++) {
     const mark = layout.marks[i];
     const renderer = markRenderers[mark.type];
-    if (renderer) {
-      const el = renderer(mark, i);
-      if (mark.aria?.label) {
-        el.setAttribute("aria-label", mark.aria.label);
-      }
-      const series = getMarkSeries(mark);
-      if (series) {
-        el.setAttribute("data-series", series);
+    if (!renderer) continue;
+    const el = renderer(mark, i);
+    if (mark.aria?.label) {
+      el.setAttribute("aria-label", mark.aria.label);
+    }
+    const series = getMarkSeries(mark);
+    if (series) {
+      el.setAttribute("data-series", series);
+    }
+    if (currentAnimation?.enabled && mark.type === "rect") {
+      const rect = mark;
+      if (rect.stackGroup && rect.stackPos !== void 0) {
+        el.setAttribute("data-stack-pos", String(rect.stackPos));
+        el.style.setProperty(
+          "--oc-stack-pos",
+          String(rect.stackPos)
+        );
       }
-      g.appendChild(el);
     }
+    g.appendChild(el);
   }
   parent.appendChild(g);
 }
 function renderAnnotations(parent, layout) {
   if (layout.annotations.length === 0) return;
   const g = createSVGElement("g");
-  g.setAttribute("class", "viz-annotations");
+  g.setAttribute("class", "oc-annotations");
   for (let i = 0; i < layout.annotations.length; i++) {
     renderAnnotation(g, layout.annotations[i], i);
   }
@@ -3821,7 +3892,7 @@ function renderCurvedArrow(parent, from, to, stroke) {
   const baseX = to.x - ux * arrowLen;
   const baseY = tipY - uy * arrowLen;
   const path = createSVGElement("path");
-  path.setAttribute("class", "viz-annotation-connector");
+  path.setAttribute("class", "oc-annotation-connector");
   setAttrs(path, {
     d: `M ${from.x} ${from.y} C ${cp1x} ${cp1y}, ${cp2x} ${cp2y}, ${baseX} ${baseY}`,
     fill: "none",
@@ -3832,7 +3903,7 @@ function renderCurvedArrow(parent, from, to, stroke) {
   const px = -uy;
   const py = ux;
   const arrow = createSVGElement("polygon");
-  arrow.setAttribute("class", "viz-annotation-connector");
+  arrow.setAttribute("class", "oc-annotation-connector");
   setAttrs(arrow, {
     points: [
       `${to.x},${tipY}`,
@@ -3845,11 +3916,14 @@ function renderCurvedArrow(parent, from, to, stroke) {
 }
 function renderAnnotation(parent, annotation, index2) {
   const g = createSVGElement("g");
-  g.setAttribute("class", `viz-annotation viz-annotation-${annotation.type}`);
+  g.setAttribute("class", `oc-annotation oc-annotation-${annotation.type}`);
   g.setAttribute("data-annotation-index", String(index2));
+  if (annotation.id) {
+    g.setAttribute("data-annotation-id", annotation.id);
+  }
   if (annotation.rect) {
     const rect = createSVGElement("rect");
-    rect.setAttribute("class", "viz-annotation-range");
+    rect.setAttribute("class", "oc-annotation-range");
     setAttrs(rect, {
       x: annotation.rect.x,
       y: annotation.rect.y,
@@ -3864,7 +3938,7 @@ function renderAnnotation(parent, annotation, index2) {
   }
   if (annotation.line) {
     const line = createSVGElement("line");
-    line.setAttribute("class", "viz-annotation-line");
+    line.setAttribute("class", "oc-annotation-line");
     setAttrs(line, {
       x1: annotation.line.start.x,
       y1: annotation.line.start.y,
@@ -3895,7 +3969,7 @@ function renderAnnotation(parent, annotation, index2) {
         const tipY = pointsDown ? midY + caretSize / 2 : midY - caretSize / 2;
         const baseY = pointsDown ? tipY - caretSize : tipY + caretSize;
         const path = createSVGElement("path");
-        path.setAttribute("class", "viz-annotation-connector");
+        path.setAttribute("class", "oc-annotation-connector");
         setAttrs(path, {
           d: `M${tipX - caretSize},${baseY} L${tipX},${tipY} L${tipX + caretSize},${baseY}`,
           fill: "none",
@@ -3910,7 +3984,7 @@ function renderAnnotation(parent, annotation, index2) {
         renderCurvedArrow(g, c2.from, c2.to, c2.stroke);
       } else {
         const connector = createSVGElement("line");
-        connector.setAttribute("class", "viz-annotation-connector");
+        connector.setAttribute("class", "oc-annotation-connector");
         setAttrs(connector, {
           x1: c2.from.x,
           y1: c2.from.y,
@@ -3924,7 +3998,7 @@ function renderAnnotation(parent, annotation, index2) {
       }
     }
     const text = createSVGElement("text");
-    text.setAttribute("class", "viz-annotation-label");
+    text.setAttribute("class", "oc-annotation-label");
     setAttrs(text, { x: annotation.label.x, y: annotation.label.y });
     applyTextStyle(text, annotation.label.style);
     const lines = annotation.label.text.split("\n");
@@ -3949,7 +4023,7 @@ function renderAnnotation(parent, annotation, index2) {
       const pad = 3;
       const bgX = isMultiLine ? annotation.label.x - maxLineWidth / 2 - pad : annotation.label.x - pad;
       const bgRect = createSVGElement("rect");
-      bgRect.setAttribute("class", "viz-annotation-bg");
+      bgRect.setAttribute("class", "oc-annotation-bg");
       setAttrs(bgRect, {
         x: bgX,
         y: annotation.label.y - fontSize + (lineHeight - fontSize) / 2 - pad,
@@ -3967,7 +4041,7 @@ function renderAnnotation(parent, annotation, index2) {
 function renderLegend(parent, legend) {
   if (legend.entries.length === 0) return;
   const g = createSVGElement("g");
-  g.setAttribute("class", "viz-legend");
+  g.setAttribute("class", "oc-legend");
   g.setAttribute("role", "list");
   g.setAttribute("aria-label", "Chart legend");
   const isHorizontal = legend.position === "top" || legend.position === "bottom";
@@ -3988,7 +4062,7 @@ function renderLegend(parent, legend) {
       }
     }
     const entryG = createSVGElement("g");
-    entryG.setAttribute("class", "viz-legend-entry");
+    entryG.setAttribute("class", "oc-legend-entry");
     entryG.setAttribute("role", "listitem");
     entryG.setAttribute("data-legend-index", String(i));
     entryG.setAttribute("data-legend-label", entry.label);
@@ -4088,7 +4162,7 @@ function renderBrand(parent, layout) {
   a2.setAttributeNS(XLINK_NS, "xlink:href", BRAND_URL);
   a2.setAttribute("target", "_blank");
   a2.setAttribute("rel", "noopener");
-  a2.setAttribute("class", "viz-chrome-ref");
+  a2.setAttribute("class", "oc-chrome-ref");
   const text = createSVGElement("text");
   setAttrs(text, {
     x: rightEdge,
@@ -4111,8 +4185,10 @@ function renderBrand(parent, layout) {
   a2.appendChild(text);
   parent.appendChild(a2);
 }
-function renderChartSVG(layout, container) {
+function renderChartSVG(layout, container, opts) {
   const { width, height } = layout.dimensions;
+  const animation = layout.animation;
+  currentAnimation = animation;
   const svg = createSVGElement("svg");
   setAttrs(svg, {
     viewBox: `0 0 ${width} ${height}`,
@@ -4127,7 +4203,30 @@ function renderChartSVG(layout, container) {
   svg.style.height = `${height}px`;
   svg.setAttribute("role", layout.a11y.role);
   svg.setAttribute("aria-label", layout.a11y.altText);
-  svg.setAttribute("class", "viz-chart");
+  const classes = opts?.animate ? "oc-chart oc-animate" : "oc-chart";
+  svg.setAttribute("class", classes);
+  if (animation?.enabled) {
+    const markCount = layout.marks.length;
+    const stagger = clampStaggerDelay(animation.staggerDelay, markCount);
+    svg.style.setProperty("--oc-animation-duration", `${animation.duration}ms`);
+    svg.style.setProperty("--oc-animation-stagger", `${stagger}ms`);
+    svg.style.setProperty("--oc-annotation-delay", `${animation.annotationDelay}ms`);
+    const easeVar = EASE_VAR_MAP[animation.ease] || EASE_VAR_MAP.smooth;
+    svg.style.setProperty("--oc-animation-ease", easeVar);
+    let maxSegments = 0;
+    for (const m2 of layout.marks) {
+      if (m2.type === "rect") {
+        const pos = m2.stackPos;
+        if (pos !== void 0 && pos + 1 > maxSegments) {
+          maxSegments = pos + 1;
+        }
+      }
+    }
+    if (maxSegments > 0) {
+      const segDuration = Math.round(animation.duration / maxSegments);
+      svg.style.setProperty("--oc-stack-segment-duration", `${segDuration}ms`);
+    }
+  }
   const bg = createSVGElement("rect");
   setAttrs(bg, {
     x: 0,
@@ -4137,7 +4236,7 @@ function renderChartSVG(layout, container) {
     fill: layout.theme.colors.background
   });
   svg.appendChild(bg);
-  const clipId = `viz-clip-${Math.random().toString(36).slice(2, 8)}`;
+  const clipId = `oc-clip-${Math.random().toString(36).slice(2, 8)}`;
   const defs = createSVGElement("defs");
   const clipPath = createSVGElement("clipPath");
   clipPath.setAttribute("id", clipId);
@@ -4168,7 +4267,7 @@ function renderChartSVG(layout, container) {
       height: layout.area.height,
       fill: "transparent"
     });
-    overlay.setAttribute("class", "viz-voronoi-overlay");
+    overlay.setAttribute("class", "oc-voronoi-overlay");
     overlay.setAttribute("data-voronoi-overlay", "true");
     clippedGroup.appendChild(overlay);
   }
@@ -4177,10 +4276,164 @@ function renderChartSVG(layout, container) {
   renderLegend(svg, layout.legend);
   renderChrome(svg, layout);
   renderBrand(svg, layout);
+  currentAnimation = void 0;
   container.appendChild(svg);
   return svg;
 }
 
+// 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/mount.ts
 function resolveDarkMode2(mode) {
   if (mode === "force") return true;
@@ -4431,7 +4684,7 @@ function wireChartEvents(svg, layout, specAnnotations, handlers) {
     }
   }
   if (handlers.onAnnotationClick) {
-    const annotationElements = svg.querySelectorAll(".viz-annotation");
+    const annotationElements = svg.querySelectorAll(".oc-annotation");
     for (let i = 0; i < annotationElements.length; i++) {
       const el = annotationElements[i];
       const specAnnotation = specAnnotations[i];
@@ -4458,7 +4711,7 @@ function createDragHandler(config) {
   let activeDocTouchMove = null;
   let activeDocTouchEnd = null;
   let activeDocTouchCancel = null;
-  function getScale() {
+  function getScale2() {
     const viewBox = svg.viewBox?.baseVal;
     const svgRect = svg.getBoundingClientRect();
     return {
@@ -4468,7 +4721,7 @@ function createDragHandler(config) {
   }
   function startDrag(startX, startY) {
     setDragging(true);
-    const { scaleX, scaleY } = getScale();
+    const { scaleX, scaleY } = getScale2();
     element.style.cursor = "grabbing";
     svg.style.userSelect = "none";
     const handleMove = (clientX, clientY) => {
@@ -4594,7 +4847,7 @@ function createDragHandler(config) {
   };
 }
 function wireAnnotationDrag(svg, specAnnotations, onAnnotationEdit, onEdit, setDragging) {
-  const annotationElements = svg.querySelectorAll(".viz-annotation-text");
+  const annotationElements = svg.querySelectorAll(".oc-annotation-text");
   const cleanups = [];
   for (const el of annotationElements) {
     const indexStr = el.getAttribute("data-annotation-index");
@@ -4605,11 +4858,11 @@ function wireAnnotationDrag(svg, specAnnotations, onAnnotationEdit, onEdit, setD
     const textAnnotation = specAnnotation;
     const annotationG = el;
     annotationG.style.cursor = "grab";
-    const connectorLine = annotationG.querySelector("line.viz-annotation-connector");
+    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.viz-annotation-connector");
-    const arrowhead = annotationG.querySelector("polygon.viz-annotation-connector");
+    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;
@@ -4659,7 +4912,7 @@ function wireAnnotationDrag(svg, specAnnotations, onAnnotationEdit, onEdit, setD
 function wireConnectorEndpointDrag(svg, specAnnotations, onEdit, setDragging) {
   const SVG_NS2 = "http://www.w3.org/2000/svg";
   const cleanups = [];
-  const annotationGroups = svg.querySelectorAll(".viz-annotation-text");
+  const annotationGroups = svg.querySelectorAll(".oc-annotation-text");
   for (const el of annotationGroups) {
     const annotationG = el;
     const indexStr = annotationG.getAttribute("data-annotation-index");
@@ -4668,8 +4921,8 @@ function wireConnectorEndpointDrag(svg, specAnnotations, onEdit, setDragging) {
     const specAnnotation = specAnnotations[index2];
     if (!specAnnotation || specAnnotation.type !== "text") continue;
     const textAnnotation = specAnnotation;
-    const connectorLine = annotationG.querySelector("line.viz-annotation-connector");
-    const curvedPath = annotationG.querySelector("path.viz-annotation-connector");
+    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) {
@@ -4682,7 +4935,7 @@ function wireConnectorEndpointDrag(svg, specAnnotations, onEdit, setDragging) {
       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.viz-annotation-connector");
+      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(",");
@@ -4697,7 +4950,7 @@ function wireConnectorEndpointDrag(svg, specAnnotations, onEdit, setDragging) {
     for (const ep of endpoints) {
       if (!Number.isFinite(ep.cx) || !Number.isFinite(ep.cy)) continue;
       const handleEl = document.createElementNS(SVG_NS2, "circle");
-      handleEl.setAttribute("class", "viz-connector-handle");
+      handleEl.setAttribute("class", "oc-connector-handle");
       handleEl.setAttribute("data-endpoint", ep.name);
       handleEl.setAttribute("cx", String(ep.cx));
       handleEl.setAttribute("cy", String(ep.cy));
@@ -4791,13 +5044,13 @@ function wireConnectorEndpointDrag(svg, specAnnotations, onEdit, setDragging) {
 function wireAnnotationLabelDrag(svg, specAnnotations, onEdit, setDragging) {
   const cleanups = [];
   const selectors = [
-    ".viz-annotation-range .viz-annotation-label",
-    ".viz-annotation-refline .viz-annotation-label"
+    ".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(".viz-annotation");
+      const annotationG = label.closest(".oc-annotation");
       if (!annotationG) continue;
       const indexStr = annotationG.getAttribute("data-annotation-index");
       if (indexStr === null) continue;
@@ -4846,7 +5099,7 @@ function wireAnnotationLabelDrag(svg, specAnnotations, onEdit, setDragging) {
   };
 }
 function wireChromeDrag(svg, spec, onEdit, setDragging) {
-  const chromeTexts = svg.querySelectorAll(".viz-chrome text[data-chrome-key]");
+  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) {
@@ -4886,7 +5139,7 @@ function wireChromeDrag(svg, spec, onEdit, setDragging) {
   };
 }
 function wireLegendDrag(svg, spec, onEdit, setDragging) {
-  const legendG = svg.querySelector(".viz-legend");
+  const legendG = svg.querySelector(".oc-legend");
   if (!legendG) return () => {
   };
   const cleanups = [];
@@ -4916,7 +5169,7 @@ function wireLegendDrag(svg, spec, onEdit, setDragging) {
   };
 }
 function wireSeriesLabelDrag(svg, spec, onEdit, setDragging) {
-  const labels = svg.querySelectorAll(".viz-mark-label");
+  const labels = svg.querySelectorAll(".oc-mark-label");
   const cleanups = [];
   const labelsConfig = "labels" in spec ? spec.labels : void 0;
   for (const label of labels) {
@@ -4975,7 +5228,7 @@ function wireLegendInteraction(svg, _layout, onLegendToggle, onEdit) {
         onLegendToggle?.(label, false);
         onEdit?.({ type: "legend-toggle", series: label, hidden: true });
       }
-      const marks = svg.querySelectorAll(".viz-mark");
+      const marks = svg.querySelectorAll(".oc-mark");
       for (const mark of marks) {
         const seriesName = mark.getAttribute("data-series");
         if (!seriesName) continue;
@@ -5010,13 +5263,13 @@ function wireKeyboardNav(svg, container, tooltipDescriptors, tooltipManager, lay
   let focusIndex = -1;
   function highlightMark(index2) {
     if (focusIndex >= 0 && focusIndex < markElements.length) {
-      markElements[focusIndex].classList.remove("viz-mark-focused");
+      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("viz-mark-focused");
+      el.classList.add("oc-mark-focused");
       el.setAttribute("aria-selected", "true");
     }
   }
@@ -5083,7 +5336,7 @@ function createScreenReaderTable(layout, container) {
   const data = layout.a11y.dataTableFallback;
   if (!data || data.length === 0) return null;
   const table = document.createElement("table");
-  table.className = "viz-sr-only";
+  table.className = "oc-sr-only";
   table.style.position = "absolute";
   table.style.width = "1px";
   table.style.height = "1px";
@@ -5125,6 +5378,167 @@ function createScreenReaderTable(layout, container) {
   container.appendChild(table);
   return table;
 }
+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 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 (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 createChart(container, spec, options) {
   let currentSpec = spec;
   let currentLayout;
@@ -5138,11 +5552,19 @@ function createChart(container, spec, options) {
   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 resizeTimer = null;
+  let isFirstRender = true;
+  let cleanupAnimations = null;
+  let selectedElement = options?.selectedElement ?? null;
+  let overlayElement = null;
+  let isTextEditingActive = false;
+  let textEditCleanup = null;
   const measureText = createMeasureText();
   function compile() {
     const { width, height } = getContainerDimensions();
@@ -5166,11 +5588,208 @@ function createChart(container, spec, options) {
       height: Math.max(rect.height || 400, 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 (cleanupAnimations) {
+      cleanupAnimations();
+      cleanupAnimations = null;
+    }
+    cancelAnimations(svgElement);
     if (cleanupTooltipEvents) {
       cleanupTooltipEvents();
       cleanupTooltipEvents = null;
@@ -5199,6 +5818,20 @@ function createChart(container, spec, options) {
       cleanupEditDrags();
       cleanupEditDrags = null;
     }
+    if (cleanupSelection) {
+      cleanupSelection();
+      cleanupSelection = null;
+    }
+    if (cleanupKeyboardEdit) {
+      cleanupKeyboardEdit();
+      cleanupKeyboardEdit = null;
+    }
+    if (textEditCleanup) {
+      textEditCleanup();
+      textEditCleanup = null;
+      isTextEditingActive = false;
+    }
+    overlayElement = null;
     if (svgElement?.parentNode) {
       svgElement.parentNode.removeChild(svgElement);
     }
@@ -5210,7 +5843,8 @@ function createChart(container, spec, options) {
       srTable = null;
     }
     currentLayout = compile();
-    svgElement = renderChartSVG(currentLayout, container);
+    const shouldAnimate = isFirstRender && !!currentLayout.animation?.enabled;
+    svgElement = renderChartSVG(currentLayout, container, { animate: shouldAnimate });
     tooltipManager = createTooltipManager(container);
     cleanupTooltipEvents = wireTooltipEvents(
       svgElement,
@@ -5270,22 +5904,46 @@ function createChart(container, spec, options) {
         }
       };
     }
+    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("viz-root");
+    container.classList.add("oc-root");
     const isDark = resolveDarkMode2(options?.darkMode);
     if (isDark) {
-      container.classList.add("viz-dark");
+      container.classList.add("oc-dark");
     } else {
-      container.classList.remove("viz-dark");
+      container.classList.remove("oc-dark");
+    }
+    if (shouldAnimate && svgElement) {
+      cleanupAnimations = setupAnimationCleanup(svgElement);
+    }
+    if (isFirstRender) {
+      isFirstRender = false;
     }
   }
-  function update(newSpec) {
+  function update(newSpec, updateOpts) {
     if (destroyed) return;
     currentSpec = newSpec;
+    if (updateOpts && "selectedElement" in updateOpts) {
+      selectedElement = updateOpts.selectedElement ?? null;
+    }
     render();
   }
   function resize() {
     if (destroyed) return;
+    if (cleanupAnimations) return;
     render();
   }
   function doExport(format, exportOptions) {
@@ -5312,6 +5970,11 @@ function createChart(container, spec, options) {
   function destroy() {
     if (destroyed) return;
     destroyed = true;
+    if (cleanupAnimations) {
+      cleanupAnimations();
+      cleanupAnimations = null;
+    }
+    cancelAnimations(svgElement);
     if (resizeTimer !== null) {
       clearTimeout(resizeTimer);
       resizeTimer = null;
@@ -5344,6 +6007,21 @@ function createChart(container, spec, options) {
       cleanupEditDrags();
       cleanupEditDrags = null;
     }
+    if (cleanupSelection) {
+      cleanupSelection();
+      cleanupSelection = null;
+    }
+    if (cleanupKeyboardEdit) {
+      cleanupKeyboardEdit();
+      cleanupKeyboardEdit = null;
+    }
+    if (textEditCleanup) {
+      textEditCleanup();
+      textEditCleanup = null;
+      isTextEditingActive = false;
+    }
+    selectedElement = null;
+    overlayElement = null;
     if (disconnectResize) {
       disconnectResize();
       disconnectResize = null;
@@ -5360,8 +6038,8 @@ function createChart(container, spec, options) {
       srTable.parentNode.removeChild(srTable);
       srTable = null;
     }
-    container.classList.remove("viz-dark");
-    container.classList.remove("viz-root");
+    container.classList.remove("oc-dark");
+    container.classList.remove("oc-root");
   }
   render();
   if (options?.responsive !== false) {
@@ -5380,6 +6058,20 @@ function createChart(container, spec, options) {
     destroy,
     get layout() {
       return currentLayout;
+    },
+    getSelectedElement() {
+      return selectedElement;
+    },
+    select(ref) {
+      if (destroyed) return;
+      selectElement(ref);
+    },
+    deselect() {
+      if (destroyed) return;
+      deselectElement();
+    },
+    get isEditing() {
+      return isTextEditingActive;
     }
   };
 }
@@ -5484,28 +6176,30 @@ function renderTextCell(cell) {
 }
 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");
+  td.className = "oc-table-category";
   td.textContent = cell.formattedValue;
   applyCellStyle(td, cell);
   return td;
 }
 function renderBarCell(cell) {
   const td = document.createElement("td");
-  td.className = "viz-table-bar";
+  td.className = "oc-table-bar";
   applyCellStyle(td, cell);
   const fill = document.createElement("div");
-  fill.className = "viz-table-bar-fill";
+  fill.className = "oc-table-bar-fill";
   fill.style.width = `${Math.round(cell.barWidth * 100)}%`;
   fill.style.left = `${Math.round(cell.barOffset * 100)}%`;
   fill.style.background = cell.barColor;
   td.appendChild(fill);
   const valueSpan = document.createElement("span");
-  valueSpan.className = "viz-table-bar-value";
+  valueSpan.className = "oc-table-bar-value";
   valueSpan.textContent = cell.formattedValue;
   td.appendChild(valueSpan);
   return td;
@@ -5532,7 +6226,7 @@ function renderSparklineCell(cell) {
     td.setAttribute("aria-label", trendDescription);
   }
   const wrapper = document.createElement("span");
-  wrapper.className = "viz-table-sparkline";
+  wrapper.className = "oc-table-sparkline";
   const svgNS = "http://www.w3.org/2000/svg";
   if (sparklineData.type === "line") {
     const svgH = 28;
@@ -5564,19 +6258,19 @@ function renderSparklineCell(cell) {
     const lastY = yPositions[yPositions.length - 1];
     const dotSize = 5;
     const startDot = document.createElement("span");
-    startDot.className = "viz-table-sparkline-dot";
+    startDot.className = "oc-table-sparkline-dot";
     startDot.style.left = "0";
     startDot.style.top = `${firstY - dotSize / 2}px`;
     startDot.style.background = sparklineData.color;
     wrapper.appendChild(startDot);
     const endDot = document.createElement("span");
-    endDot.className = "viz-table-sparkline-dot";
+    endDot.className = "oc-table-sparkline-dot";
     endDot.style.right = "0";
     endDot.style.top = `${lastY - dotSize / 2}px`;
     endDot.style.background = sparklineData.color;
     wrapper.appendChild(endDot);
     const labelsRow = document.createElement("span");
-    labelsRow.className = "viz-table-sparkline-labels";
+    labelsRow.className = "oc-table-sparkline-labels";
     labelsRow.style.color = sparklineData.color;
     const startLabel = document.createElement("span");
     startLabel.textContent = formatSparklineValue(sparklineData.startValue);
@@ -5653,7 +6347,7 @@ function renderImageCell(cell) {
   const td = document.createElement("td");
   applyCellStyle(td, cell);
   const wrapper = document.createElement("span");
-  wrapper.className = `viz-table-image${cell.rounded ? " viz-table-image-rounded" : ""}`;
+  wrapper.className = `oc-table-image${cell.rounded ? " oc-table-image-rounded" : ""}`;
   const img = document.createElement("img");
   img.src = cell.src;
   img.alt = cell.formattedValue || "";
@@ -5668,7 +6362,7 @@ function renderFlagCell(cell) {
   const td = document.createElement("td");
   applyCellStyle(td, cell);
   const span = document.createElement("span");
-  span.className = "viz-table-flag";
+  span.className = "oc-table-flag";
   span.setAttribute("role", "img");
   if (cell.countryCode && cell.countryCode.length === 2) {
     const countryName = getCountryName(cell.countryCode);
@@ -5733,9 +6427,9 @@ function attachKeyboardNav(options) {
     return getCellsInRow(rows[0]).length;
   }
   function clearFocusHighlight() {
-    const prev = wrapper.querySelector(".viz-table-cell-focus");
+    const prev = wrapper.querySelector(".oc-table-cell-focus");
     if (prev) {
-      prev.classList.remove("viz-table-cell-focus");
+      prev.classList.remove("oc-table-cell-focus");
       prev.removeAttribute("id");
     }
   }
@@ -5752,9 +6446,9 @@ function attachKeyboardNav(options) {
     const cells = getCellsInRow(tr);
     const cell = cells[col];
     if (!cell) return;
-    const cellId = `viz-cell-${row}-${col}`;
+    const cellId = `oc-cell-${row}-${col}`;
     cell.id = cellId;
-    cell.classList.add("viz-table-cell-focus");
+    cell.classList.add("oc-table-cell-focus");
     cell.setAttribute("data-row", String(row));
     cell.setAttribute("data-col", String(col));
     if (tbody) {
@@ -5855,7 +6549,7 @@ function attachKeyboardNav(options) {
       }
     }
   }
-  const searchInput = wrapper.querySelector(".viz-table-search input");
+  const searchInput = wrapper.querySelector(".oc-table-search input");
   function handleSearchKeydown(e) {
     if (e.key === "Escape") {
       e.preventDefault();
@@ -5895,22 +6589,27 @@ 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)"
+};
 var BRAND_URL2 = "https://tryopendata.ai";
 function renderChromeBlock(layout, position) {
   const chrome = layout.chrome;
   if (position === "header") {
     if (!chrome.title && !chrome.subtitle) return null;
     const div2 = document.createElement("div");
-    div2.className = "viz-chrome";
+    div2.className = "oc-chrome";
     if (chrome.title) {
       const h = document.createElement("div");
-      h.className = "viz-table-title";
+      h.className = "oc-table-title";
       h.textContent = chrome.title.text;
       div2.appendChild(h);
     }
     if (chrome.subtitle) {
       const sub = document.createElement("div");
-      sub.className = "viz-table-subtitle";
+      sub.className = "oc-table-subtitle";
       sub.textContent = chrome.subtitle.text;
       div2.appendChild(sub);
     }
@@ -5918,16 +6617,16 @@ function renderChromeBlock(layout, position) {
   }
   if (!chrome.source && !chrome.footer) return null;
   const div = document.createElement("div");
-  div.className = "viz-chrome viz-chrome-footer";
+  div.className = "oc-chrome oc-chrome-footer";
   if (chrome.source) {
     const src = document.createElement("div");
-    src.className = "viz-table-source";
+    src.className = "oc-table-source";
     src.textContent = chrome.source.text;
     div.appendChild(src);
   }
   if (chrome.footer) {
     const foot = document.createElement("div");
-    foot.className = "viz-table-footer-text";
+    foot.className = "oc-table-footer-text";
     foot.textContent = chrome.footer.text;
     div.appendChild(foot);
   }
@@ -5953,7 +6652,7 @@ function renderThead(columns, sort) {
     th.appendChild(labelSpan);
     if (col.sortable) {
       const btn = document.createElement("button");
-      btn.className = "viz-table-sort-btn";
+      btn.className = "oc-table-sort-btn";
       btn.setAttribute("aria-label", `Sort by ${col.label}`);
       btn.setAttribute("data-sort-column", col.key);
       btn.type = "button";
@@ -5971,6 +6670,7 @@ function renderTbody(rows, columns) {
     const tr = document.createElement("tr");
     tr.setAttribute("role", "row");
     tr.setAttribute("data-row-id", row.id);
+    tr.style.setProperty("--oc-row-index", String(r));
     for (let c2 = 0; c2 < columns.length; c2++) {
       const cell = row.cells[c2];
       if (!cell) continue;
@@ -5986,7 +6686,7 @@ function renderTbody(rows, columns) {
 function renderSearchBar(layout) {
   if (!layout.search.enabled) return null;
   const div = document.createElement("div");
-  div.className = "viz-table-search";
+  div.className = "oc-table-search";
   const input = document.createElement("input");
   input.type = "search";
   input.placeholder = layout.search.placeholder;
@@ -5999,9 +6699,9 @@ function renderPagination(layout) {
   if (!layout.pagination) return null;
   const { page, pageSize, totalRows, totalPages } = layout.pagination;
   const div = document.createElement("div");
-  div.className = "viz-table-pagination";
+  div.className = "oc-table-pagination";
   const info = document.createElement("span");
-  info.className = "viz-table-pagination-info";
+  info.className = "oc-table-pagination-info";
   if (totalRows === 0) {
     info.textContent = "No results";
   } else {
@@ -6011,7 +6711,7 @@ function renderPagination(layout) {
   }
   div.appendChild(info);
   const btnGroup = document.createElement("span");
-  btnGroup.className = "viz-table-pagination-btns";
+  btnGroup.className = "oc-table-pagination-btns";
   const prevBtn = document.createElement("button");
   prevBtn.setAttribute("aria-label", "Previous page");
   prevBtn.setAttribute("data-page-action", "prev");
@@ -6029,49 +6729,49 @@ function renderPagination(layout) {
 }
 function renderEmptyState(message) {
   const div = document.createElement("div");
-  div.className = "viz-table-empty";
+  div.className = "oc-table-empty";
   div.setAttribute("aria-live", "polite");
   div.textContent = message;
   return div;
 }
-function renderTable(layout, container) {
+function renderTable(layout, container, opts) {
   const wrapper = document.createElement("div");
-  wrapper.className = "viz-table-wrapper";
+  wrapper.className = "oc-table-wrapper";
   const { theme, chrome } = layout;
   if (theme) {
     const s = wrapper.style;
-    s.setProperty("--viz-bg", theme.colors.background);
-    s.setProperty("--viz-text", theme.colors.text);
-    s.setProperty("--viz-text-secondary", theme.colors.axis ?? theme.colors.text);
-    s.setProperty("--viz-text-muted", theme.colors.axis ?? theme.colors.text);
-    s.setProperty("--viz-gridline", theme.colors.gridline);
-    s.setProperty("--viz-border", theme.colors.gridline);
-    s.setProperty("--viz-font-family", theme.fonts.family);
+    s.setProperty("--oc-bg", theme.colors.background);
+    s.setProperty("--oc-text", theme.colors.text);
+    s.setProperty("--oc-text-secondary", theme.colors.axis ?? theme.colors.text);
+    s.setProperty("--oc-text-muted", theme.colors.axis ?? theme.colors.text);
+    s.setProperty("--oc-gridline", theme.colors.gridline);
+    s.setProperty("--oc-border", theme.colors.gridline);
+    s.setProperty("--oc-font-family", theme.fonts.family);
     s.fontFamily = theme.fonts.family;
   }
   {
     const s = wrapper.style;
     if (chrome.title) {
-      s.setProperty("--viz-title-computed-size", `${chrome.title.style.fontSize}px`);
-      s.setProperty("--viz-title-computed-weight", String(chrome.title.style.fontWeight));
-      s.setProperty("--viz-title-computed-color", chrome.title.style.fill);
+      s.setProperty("--oc-title-computed-size", `${chrome.title.style.fontSize}px`);
+      s.setProperty("--oc-title-computed-weight", String(chrome.title.style.fontWeight));
+      s.setProperty("--oc-title-computed-color", chrome.title.style.fill);
     }
     if (chrome.subtitle) {
-      s.setProperty("--viz-subtitle-computed-size", `${chrome.subtitle.style.fontSize}px`);
-      s.setProperty("--viz-subtitle-computed-weight", String(chrome.subtitle.style.fontWeight));
-      s.setProperty("--viz-subtitle-computed-color", chrome.subtitle.style.fill);
+      s.setProperty("--oc-subtitle-computed-size", `${chrome.subtitle.style.fontSize}px`);
+      s.setProperty("--oc-subtitle-computed-weight", String(chrome.subtitle.style.fontWeight));
+      s.setProperty("--oc-subtitle-computed-color", chrome.subtitle.style.fill);
     }
     if (chrome.source) {
-      s.setProperty("--viz-source-computed-size", `${chrome.source.style.fontSize}px`);
-      s.setProperty("--viz-source-computed-color", chrome.source.style.fill);
+      s.setProperty("--oc-source-computed-size", `${chrome.source.style.fontSize}px`);
+      s.setProperty("--oc-source-computed-color", chrome.source.style.fill);
     }
     if (chrome.footer) {
-      s.setProperty("--viz-footer-computed-size", `${chrome.footer.style.fontSize}px`);
-      s.setProperty("--viz-footer-computed-color", chrome.footer.style.fill);
+      s.setProperty("--oc-footer-computed-size", `${chrome.footer.style.fontSize}px`);
+      s.setProperty("--oc-footer-computed-color", chrome.footer.style.fill);
     }
   }
   if (layout.compact) {
-    wrapper.classList.add("viz-table--compact");
+    wrapper.classList.add("oc-table--compact");
   }
   const headerChrome = renderChromeBlock(layout, "header");
   if (headerChrome) {
@@ -6086,15 +6786,15 @@ function renderTable(layout, container) {
     wrapper.appendChild(renderEmptyState(message));
   } else {
     const scroll = document.createElement("div");
-    scroll.className = "viz-table-scroll";
+    scroll.className = "oc-table-scroll";
     const table = document.createElement("table");
     table.setAttribute("role", "grid");
     table.setAttribute("aria-label", layout.a11y.caption);
     if (layout.stickyFirstColumn) {
-      table.classList.add("viz-table--sticky");
+      table.classList.add("oc-table--sticky");
     }
     const caption = document.createElement("caption");
-    caption.className = "viz-sr-only";
+    caption.className = "oc-sr-only";
     caption.style.position = "absolute";
     caption.style.width = "1px";
     caption.style.height = "1px";
@@ -6120,7 +6820,7 @@ function renderTable(layout, container) {
     wrapper.appendChild(footerChrome);
   }
   const liveRegion = document.createElement("div");
-  liveRegion.className = "viz-table-live-region viz-sr-only";
+  liveRegion.className = "oc-table-live-region oc-sr-only";
   liveRegion.style.position = "absolute";
   liveRegion.style.width = "1px";
   liveRegion.style.height = "1px";
@@ -6136,7 +6836,7 @@ function renderTable(layout, container) {
   wrapper.appendChild(liveRegion);
   const brandColor = theme ? theme.colors.axis : "#999999";
   const brand = document.createElement("div");
-  brand.className = "viz-table-ref";
+  brand.className = "oc-table-ref";
   brand.style.cssText = "text-align: right; padding: 4px 8px;";
   const brandLink = document.createElement("a");
   brandLink.href = BRAND_URL2;
@@ -6146,6 +6846,16 @@ function renderTable(layout, container) {
   brandLink.textContent = "OpenData";
   brand.appendChild(brandLink);
   wrapper.appendChild(brand);
+  if (opts?.animate && layout.animation?.enabled) {
+    const anim = layout.animation;
+    const rowCount = layout.rows.length;
+    const stagger = clampStaggerDelay2(anim.staggerDelay, rowCount);
+    const s = wrapper.style;
+    s.setProperty("--oc-animation-duration", `${anim.duration}ms`);
+    s.setProperty("--oc-animation-stagger", `${stagger}ms`);
+    s.setProperty("--oc-animation-ease", EASE_VAR_MAP2[anim.ease] || EASE_VAR_MAP2.smooth);
+    wrapper.classList.add("oc-animate");
+  }
   container.appendChild(wrapper);
   return wrapper;
 }
@@ -6180,6 +6890,8 @@ function createTable(container, spec, options) {
   let wrapperElement = null;
   let disconnectResize = null;
   let cleanupKeyboard = null;
+  let cleanupAnimations = null;
+  let isFirstRender = true;
   let destroyed = false;
   const internalState = {
     sort: null,
@@ -6239,7 +6951,7 @@ function createTable(container, spec, options) {
   }
   function announce(message) {
     if (!wrapperElement) return;
-    const liveRegion = wrapperElement.querySelector(".viz-table-live-region");
+    const liveRegion = wrapperElement.querySelector(".oc-table-live-region");
     if (liveRegion) {
       liveRegion.textContent = message;
     }
@@ -6249,14 +6961,18 @@ function createTable(container, spec, options) {
     const { width } = getContainerDimensions();
     const bp = getBreakpoint(width);
     if (bp === "compact" || bp === "medium") {
-      wrapperElement.classList.add("viz-table--compact");
+      wrapperElement.classList.add("oc-table--compact");
     } else if (!currentLayout?.compact) {
-      wrapperElement.classList.remove("viz-table--compact");
+      wrapperElement.classList.remove("oc-table--compact");
     }
   }
   function render() {
     if (destroyed) return;
     try {
+      if (cleanupAnimations) {
+        cleanupAnimations();
+        cleanupAnimations = null;
+      }
       if (cleanupKeyboard) {
         cleanupKeyboard();
         cleanupKeyboard = null;
@@ -6266,16 +6982,23 @@ function createTable(container, spec, options) {
         wrapperElement = null;
       }
       currentLayout = compile();
-      wrapperElement = renderTable(currentLayout, container);
+      const shouldAnimate = isFirstRender && !!currentLayout.animation?.enabled;
+      wrapperElement = renderTable(currentLayout, container, { animate: shouldAnimate });
+      if (shouldAnimate && wrapperElement) {
+        cleanupAnimations = setupTableAnimationCleanup(wrapperElement);
+      }
+      if (isFirstRender) {
+        isFirstRender = false;
+      }
       const isDark = resolveDarkMode3(options?.darkMode);
       if (isDark) {
-        container.classList.add("viz-dark");
+        container.classList.add("oc-dark");
       } else {
-        container.classList.remove("viz-dark");
+        container.classList.remove("oc-dark");
       }
       applyBreakpointClass();
       if (options?.onRowClick) {
-        wrapperElement.classList.add("viz-table--clickable");
+        wrapperElement.classList.add("oc-table--clickable");
       }
       wireEvents();
       if (wrapperElement) {
@@ -6315,7 +7038,7 @@ function createTable(container, spec, options) {
       btn.addEventListener("click", handleSortClick);
     }
     const searchInput = wrapperElement.querySelector(
-      ".viz-table-search input"
+      ".oc-table-search input"
     );
     if (searchInput) {
       searchInput.addEventListener("input", handleSearchInput);
@@ -6391,7 +7114,7 @@ function createTable(container, spec, options) {
   function rerender() {
     if (destroyed) return;
     const searchInput = wrapperElement?.querySelector(
-      ".viz-table-search input"
+      ".oc-table-search input"
     );
     const hadFocus = searchInput && document.activeElement === searchInput;
     const selectionStart = searchInput?.selectionStart ?? 0;
@@ -6399,7 +7122,7 @@ function createTable(container, spec, options) {
     render();
     if (hadFocus) {
       const newInput = wrapperElement?.querySelector(
-        ".viz-table-search input"
+        ".oc-table-search input"
       );
       if (newInput) {
         newInput.focus();
@@ -6414,6 +7137,7 @@ function createTable(container, spec, options) {
   }
   function resize() {
     if (destroyed) return;
+    if (cleanupAnimations) return;
     render();
   }
   function doExport(format) {
@@ -6450,6 +7174,10 @@ function createTable(container, spec, options) {
   function destroy() {
     if (destroyed) return;
     destroyed = true;
+    if (cleanupAnimations) {
+      cleanupAnimations();
+      cleanupAnimations = null;
+    }
     if (cleanupKeyboard) {
       cleanupKeyboard();
       cleanupKeyboard = null;
@@ -6470,7 +7198,7 @@ function createTable(container, spec, options) {
       wrapperElement.parentNode.removeChild(wrapperElement);
       wrapperElement = null;
     }
-    container.classList.remove("viz-dark");
+    container.classList.remove("oc-dark");
   }
   render();
   if (options?.responsive !== false) {
@@ -6500,6 +7228,7 @@ export {
   createGraph,
   createSimulationWorker,
   createTable,
+  createTextEditOverlay,
   createTooltipManager,
   exportCSV,
   exportJPG,