@opendata-ai/openchart-vanilla 6.4.1 → 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();
@@ -3258,9 +3258,59 @@ function escapeHtml(str) {
 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,14 +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,
@@ -3867,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,
@@ -3898,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",
@@ -3913,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,
@@ -3927,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");
@@ -3952,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,
@@ -3970,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";
@@ -3991,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);
@@ -4091,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,
@@ -4114,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}`,
@@ -4130,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,
@@ -4140,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);
@@ -4171,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);
   }
@@ -4180,6 +4276,7 @@ function renderChartSVG(layout, container) {
   renderLegend(svg, layout.legend);
   renderChrome(svg, layout);
   renderBrand(svg, layout);
+  currentAnimation = void 0;
   container.appendChild(svg);
   return svg;
 }
@@ -4587,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];
@@ -4750,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");
@@ -4761,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;
@@ -4815,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");
@@ -4824,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) {
@@ -4838,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(",");
@@ -4853,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));
@@ -4947,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;
@@ -5002,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) {
@@ -5042,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 = [];
@@ -5072,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) {
@@ -5131,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;
@@ -5166,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");
     }
   }
@@ -5239,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";
@@ -5282,7 +5379,7 @@ function createScreenReaderTable(layout, container) {
   return table;
 }
 var EDITABLE_HOVER_CSS = `
-.viz-editable-hover {
+.oc-editable-hover {
   outline: 1.5px solid rgba(79, 70, 229, 0.35);
   outline-offset: 2px;
   border-radius: 2px;
@@ -5310,9 +5407,9 @@ function findElementByRef(svg, ref) {
     case "chrome":
       return svg.querySelector(`[data-chrome-key="${ref.key}"]`);
     case "series-label":
-      return svg.querySelector(`.viz-mark-label[data-series="${ref.series}"]`);
+      return svg.querySelector(`.oc-mark-label[data-series="${ref.series}"]`);
     case "legend":
-      return svg.querySelector(".viz-legend");
+      return svg.querySelector(".oc-legend");
     case "legend-entry":
       return svg.querySelector(`[data-legend-index="${ref.index}"]`);
   }
@@ -5329,7 +5426,7 @@ function buildElementRef(element, _specAnnotations) {
     const key = chromeEl.getAttribute("data-chrome-key");
     if (key) return elementRef.chrome(key);
   }
-  const seriesLabelEl = element.closest(".viz-mark-label[data-series]");
+  const seriesLabelEl = element.closest(".oc-mark-label[data-series]");
   if (seriesLabelEl) {
     const series = seriesLabelEl.getAttribute("data-series");
     if (series) return elementRef.seriesLabel(series);
@@ -5340,7 +5437,7 @@ function buildElementRef(element, _specAnnotations) {
     const series = legendEntryEl.getAttribute("data-legend-label") ?? "";
     return elementRef.legendEntry(series, index2);
   }
-  const legendEl = element.closest(".viz-legend");
+  const legendEl = element.closest(".oc-legend");
   if (legendEl) return elementRef.legend();
   return null;
 }
@@ -5427,7 +5524,7 @@ function renderSelectionOverlay(svg, ref, layout) {
   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", "viz-selection-overlay");
+  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));
@@ -5462,6 +5559,8 @@ function createChart(container, spec, options) {
   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;
@@ -5577,16 +5676,16 @@ function createChart(container, spec, options) {
     cleanups.push(() => svg.removeEventListener("click", handleClick));
     const handleMouseEnter = (e) => {
       const target = e.target.closest(
-        "[data-annotation-index], [data-chrome-key], .viz-mark-label[data-series], .viz-legend, [data-legend-index]"
+        "[data-annotation-index], [data-chrome-key], .oc-mark-label[data-series], .oc-legend, [data-legend-index]"
       );
       if (target) {
-        target.classList.add("viz-editable-hover");
+        target.classList.add("oc-editable-hover");
       }
     };
     const handleMouseLeave = (e) => {
-      const target = e.target.closest(".viz-editable-hover");
+      const target = e.target.closest(".oc-editable-hover");
       if (target) {
-        target.classList.remove("viz-editable-hover");
+        target.classList.remove("oc-editable-hover");
       }
     };
     svg.addEventListener("mouseenter", handleMouseEnter, true);
@@ -5686,6 +5785,11 @@ function createChart(container, spec, options) {
       pendingRender = true;
       return;
     }
+    if (cleanupAnimations) {
+      cleanupAnimations();
+      cleanupAnimations = null;
+    }
+    cancelAnimations(svgElement);
     if (cleanupTooltipEvents) {
       cleanupTooltipEvents();
       cleanupTooltipEvents = null;
@@ -5739,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,
@@ -5814,12 +5919,18 @@ function createChart(container, spec, options) {
       }
     }
     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, updateOpts) {
@@ -5832,6 +5943,7 @@ function createChart(container, spec, options) {
   }
   function resize() {
     if (destroyed) return;
+    if (cleanupAnimations) return;
     render();
   }
   function doExport(format, exportOptions) {
@@ -5858,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;
@@ -5921,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) {
@@ -6059,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;
@@ -6107,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;
@@ -6139,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);
@@ -6228,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 || "";
@@ -6243,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);
@@ -6308,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");
     }
   }
@@ -6327,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) {
@@ -6430,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();
@@ -6470,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);
     }
@@ -6493,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);
   }
@@ -6528,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";
@@ -6546,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;
@@ -6561,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;
@@ -6574,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 {
@@ -6586,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");
@@ -6604,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) {
@@ -6661,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";
@@ -6695,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";
@@ -6711,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;
@@ -6721,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;
 }
@@ -6755,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,
@@ -6814,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;
     }
@@ -6824,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;
@@ -6841,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) {
@@ -6890,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);
@@ -6966,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;
@@ -6974,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();
@@ -6989,6 +7137,7 @@ function createTable(container, spec, options) {
   }
   function resize() {
     if (destroyed) return;
+    if (cleanupAnimations) return;
     render();
   }
   function doExport(format) {
@@ -7025,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;
@@ -7045,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) {