@opendata-ai/openchart-vanilla 6.20.0 → 6.22.0

package/dist/index.js

@@ -3314,12 +3314,6 @@ function setupTableAnimationCleanup(wrapper) {
 }
 
 // src/svg-renderer.ts
-import {
-  BRAND_FONT_SIZE as BRAND_FONT_SIZE2,
-  BRAND_MIN_WIDTH as BRAND_MIN_WIDTH2,
-  estimateTextWidth,
-  wrapText
-} from "@opendata-ai/openchart-core";
 import { clampStaggerDelay } from "@opendata-ai/openchart-engine";
 
 // src/gradient-utils.ts
@@ -3411,37 +3405,10 @@ function resolveMarkFill(fill, gradientMap) {
   return id ? `url(#${id})` : "#000000";
 }
 
-// src/svg-renderer.ts
+// src/renderers/svg-dom.ts
+import { estimateTextWidth } from "@opendata-ai/openchart-core";
 var SVG_NS2 = "http://www.w3.org/2000/svg";
-var currentAnimation;
-var currentGradientMap = /* @__PURE__ */ new Map();
-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;
-  if (xAxis.tickAngle && Math.abs(xAxis.tickAngle) > 10) {
-    const fontSize = xAxis.tickLabelStyle.fontSize;
-    const fontWeight = xAxis.tickLabelStyle.fontWeight;
-    const angleRad = Math.abs(xAxis.tickAngle) * (Math.PI / 180);
-    let maxLabelWidth = 40;
-    for (const tick of xAxis.ticks) {
-      const w = estimateTextWidth(tick.label, fontSize, fontWeight);
-      if (w > maxLabelWidth) maxLabelWidth = w;
-    }
-    const rotatedHeight = Math.min(maxLabelWidth * Math.sin(angleRad) + 6, 120);
-    return xAxis.label ? rotatedHeight + 20 : rotatedHeight;
-  }
-  return xAxis.label ? 48 : 26;
-}
+var XLINK_NS = "http://www.w3.org/1999/xlink";
 function createSVGElement(tag) {
   return document.createElementNS(SVG_NS2, tag);
 }
@@ -3467,73 +3434,184 @@ function applyTextStyle(el, style) {
     el.setAttribute("font-variant", style.fontVariant);
   }
 }
-function renderChromeElement(parent, element, className, chromeKey, measureText) {
-  const text = createSVGElement("text");
-  setAttrs(text, { x: element.x, y: element.y });
-  applyTextStyle(text, element.style);
-  text.setAttribute("class", className);
-  text.setAttribute("data-chrome-key", chromeKey);
-  const lines = wrapText(
-    element.text,
-    element.style.fontSize,
-    element.style.fontWeight,
-    element.maxWidth,
-    measureText
-  );
-  if (lines.length === 1) {
-    text.textContent = element.text;
-  } else {
-    const lineHeight = element.style.fontSize * (element.style.lineHeight ?? 1.3);
-    for (let i = 0; i < lines.length; i++) {
-      const tspan = createSVGElement("tspan");
-      setAttrs(tspan, { x: element.x, dy: i === 0 ? 0 : lineHeight });
-      tspan.textContent = lines[i];
-      text.appendChild(tspan);
+function computeXAxisExtent(layout) {
+  const xAxis = layout.axes.x;
+  if (!xAxis) return 0;
+  if (xAxis.tickAngle && Math.abs(xAxis.tickAngle) > 10) {
+    const fontSize = xAxis.tickLabelStyle.fontSize;
+    const fontWeight = xAxis.tickLabelStyle.fontWeight;
+    const angleRad = Math.abs(xAxis.tickAngle) * (Math.PI / 180);
+    let maxLabelWidth = 40;
+    for (const tick of xAxis.ticks) {
+      const w = estimateTextWidth(tick.label, fontSize, fontWeight);
+      if (w > maxLabelWidth) maxLabelWidth = w;
     }
+    const rotatedHeight = Math.min(maxLabelWidth * Math.sin(angleRad) + 6, 120);
+    return xAxis.label ? rotatedHeight + 20 : rotatedHeight;
   }
-  parent.appendChild(text);
+  return xAxis.label ? 48 : 26;
 }
-function renderChrome(parent, layout) {
+
+// src/renderers/annotations.ts
+function renderCurvedArrow(parent, from, to, stroke) {
+  const pad = 6;
+  const tipY = to.y - pad;
+  const dy = tipY - from.y;
+  const dist = Math.sqrt((to.x - from.x) ** 2 + dy ** 2) || 1;
+  const arrowLen = 8;
+  const arrowWidth = 4;
+  const bulge = Math.max(dist * 0.4, 35);
+  const cp1x = from.x + bulge;
+  const cp1y = from.y + dy * 0.35;
+  const cp2x = to.x;
+  const cp2y = tipY - Math.abs(dy) * 0.25;
+  const tx = to.x - cp2x;
+  const ty = tipY - cp2y;
+  const tLen = Math.sqrt(tx * tx + ty * ty) || 1;
+  const ux = tx / tLen;
+  const uy = ty / tLen;
+  const baseX = to.x - ux * arrowLen;
+  const baseY = tipY - uy * arrowLen;
+  const path = createSVGElement("path");
+  path.setAttribute("class", "oc-annotation-connector");
+  setAttrs(path, {
+    d: `M ${from.x} ${from.y} C ${cp1x} ${cp1y}, ${cp2x} ${cp2y}, ${baseX} ${baseY}`,
+    fill: "none",
+    stroke,
+    "stroke-width": 1.5
+  });
+  parent.appendChild(path);
+  const px = -uy;
+  const py = ux;
+  const arrow = createSVGElement("polygon");
+  arrow.setAttribute("class", "oc-annotation-connector");
+  setAttrs(arrow, {
+    points: [
+      `${to.x},${tipY}`,
+      `${baseX + px * arrowWidth},${baseY + py * arrowWidth}`,
+      `${baseX - px * arrowWidth},${baseY - py * arrowWidth}`
+    ].join(" "),
+    fill: stroke
+  });
+  parent.appendChild(arrow);
+}
+function renderAnnotation(parent, annotation, index2, bgColor) {
   const g = createSVGElement("g");
-  g.setAttribute("class", "oc-chrome");
-  const { chrome, measureText } = layout;
-  if (chrome.title) {
-    renderChromeElement(g, chrome.title, "oc-title", "title", measureText);
+  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 (chrome.subtitle) {
-    renderChromeElement(g, chrome.subtitle, "oc-subtitle", "subtitle", measureText);
+  if (annotation.rect) {
+    const rect = createSVGElement("rect");
+    rect.setAttribute("class", "oc-annotation-range");
+    setAttrs(rect, {
+      x: annotation.rect.x,
+      y: annotation.rect.y,
+      width: annotation.rect.width,
+      height: annotation.rect.height
+    });
+    if (annotation.fill) rect.setAttribute("fill", annotation.fill);
+    if (annotation.opacity !== void 0) {
+      rect.setAttribute("fill-opacity", String(annotation.opacity));
+    }
+    g.appendChild(rect);
   }
-  const xAxisExtent = computeXAxisExtent(layout);
-  const bottomOffset = layout.area.y + layout.area.height + xAxisExtent;
-  if (chrome.source) {
-    renderChromeElement(
-      g,
-      { ...chrome.source, y: bottomOffset + chrome.source.y },
-      "oc-source",
-      "source",
-      measureText
-    );
+  if (annotation.line) {
+    const line = createSVGElement("line");
+    line.setAttribute("class", "oc-annotation-line");
+    setAttrs(line, {
+      x1: annotation.line.start.x,
+      y1: annotation.line.start.y,
+      x2: annotation.line.end.x,
+      y2: annotation.line.end.y,
+      "stroke-width": annotation.strokeWidth ?? 1
+    });
+    if (annotation.stroke) line.setAttribute("stroke", annotation.stroke);
+    if (annotation.strokeDasharray) {
+      line.setAttribute("stroke-dasharray", annotation.strokeDasharray);
+    }
+    g.appendChild(line);
   }
-  if (chrome.byline) {
-    renderChromeElement(
-      g,
-      { ...chrome.byline, y: bottomOffset + chrome.byline.y },
-      "oc-byline",
-      "byline",
-      measureText
-    );
+  if (annotation.label?.visible) {
+    if (annotation.label.connector) {
+      const c2 = annotation.label.connector;
+      if (c2.style === "curve") {
+        renderCurvedArrow(g, c2.from, c2.to, c2.stroke);
+      } else {
+        const connector = createSVGElement("line");
+        connector.setAttribute("class", "oc-annotation-connector");
+        setAttrs(connector, {
+          x1: c2.from.x,
+          y1: c2.from.y,
+          x2: c2.to.x,
+          y2: c2.to.y,
+          stroke: c2.stroke,
+          "stroke-width": 1,
+          "stroke-opacity": 0.5
+        });
+        g.appendChild(connector);
+      }
+    }
+    const text = createSVGElement("text");
+    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");
+    const fontSize = annotation.label.style.fontSize ?? 12;
+    const lineHeight = fontSize * (annotation.label.style.lineHeight ?? 1.3);
+    const isMultiLine = lines.length > 1;
+    if (isMultiLine) {
+      text.setAttribute("text-anchor", "middle");
+      for (let i = 0; i < lines.length; i++) {
+        const tspan = createSVGElement("tspan");
+        setAttrs(tspan, { x: annotation.label.x, dy: i === 0 ? 0 : lineHeight });
+        tspan.textContent = lines[i];
+        text.appendChild(tspan);
+      }
+    } else {
+      text.textContent = annotation.label.text;
+    }
+    if (annotation.label.background) {
+      const charWidth = fontSize * 0.55;
+      const maxLineWidth = Math.max(...lines.map((l) => l.length)) * charWidth;
+      const totalHeight = lines.length * lineHeight;
+      const pad = 3;
+      const bgX = isMultiLine ? annotation.label.x - maxLineWidth / 2 - pad : annotation.label.x - pad;
+      const bgRect = createSVGElement("rect");
+      bgRect.setAttribute("class", "oc-annotation-bg");
+      setAttrs(bgRect, {
+        x: bgX,
+        y: annotation.label.y - fontSize + (lineHeight - fontSize) / 2 - pad,
+        width: maxLineWidth + pad * 2,
+        height: totalHeight + pad * 2,
+        fill: annotation.label.background,
+        rx: 2
+      });
+      g.appendChild(bgRect);
+    } else if (bgColor) {
+      text.style.paintOrder = "stroke";
+      text.style.stroke = bgColor;
+      text.style.strokeWidth = `${Math.round(fontSize * 0.3)}px`;
+      text.style.strokeLinejoin = "round";
+    }
+    g.appendChild(text);
   }
-  if (chrome.footer) {
-    renderChromeElement(
-      g,
-      { ...chrome.footer, y: bottomOffset + chrome.footer.y },
-      "oc-footer",
-      "footer",
-      measureText
-    );
+  parent.appendChild(g);
+}
+function renderAnnotations(parent, layout) {
+  if (layout.annotations.length === 0) return;
+  const g = createSVGElement("g");
+  g.setAttribute("class", "oc-annotations");
+  const bgColor = layout.theme.colors.background;
+  for (let i = 0; i < layout.annotations.length; i++) {
+    renderAnnotation(g, layout.annotations[i], i, bgColor);
   }
   parent.appendChild(g);
 }
+
+// src/renderers/axes.ts
+import { estimateTextWidth as estimateTextWidth2 } from "@opendata-ai/openchart-core";
 function renderAxis(parent, axis, orientation, layout) {
   const g = createSVGElement("g");
   g.setAttribute("class", `oc-axis oc-axis-${orientation}`);
@@ -3626,7 +3704,7 @@ function renderAxis(parent, axis, orientation, layout) {
         const angleRad = Math.abs(axis.tickAngle) * (Math.PI / 180);
         let maxLabelWidth = 40;
         for (const tick of axis.ticks) {
-          const w = estimateTextWidth(
+          const w = estimateTextWidth2(
             tick.label,
             axis.tickLabelStyle.fontSize,
             axis.tickLabelStyle.fontWeight
@@ -3661,9 +3739,255 @@ function renderAxes(parent, layout) {
     renderAxis(parent, layout.axes.y, "y", layout);
   }
 }
-var markRenderers = {};
-function registerMarkRenderer(type, renderer) {
-  markRenderers[type] = renderer;
+
+// src/renderers/brand.ts
+import { BRAND_FONT_SIZE as BRAND_FONT_SIZE2, BRAND_MIN_WIDTH as BRAND_MIN_WIDTH2 } from "@opendata-ai/openchart-core";
+var BRAND_URL = "https://tryopendata.ai";
+function renderBrand(parent, layout) {
+  if (layout.dimensions.width < BRAND_MIN_WIDTH2) return;
+  const { width } = layout.dimensions;
+  const padding = layout.theme.spacing.padding;
+  const rightEdge = width - padding;
+  const fill = layout.theme.colors.axis;
+  const { chrome } = layout;
+  const xAxisExtent = computeXAxisExtent(layout);
+  const bottomOffset = layout.area.y + layout.area.height + xAxisExtent;
+  const firstBottom = chrome.source ?? chrome.byline ?? chrome.footer;
+  const chromeY = firstBottom ? bottomOffset + firstBottom.y : bottomOffset + layout.theme.spacing.chartToFooter;
+  const a2 = createSVGElement("a");
+  a2.setAttribute("href", BRAND_URL);
+  a2.setAttributeNS(XLINK_NS, "xlink:href", BRAND_URL);
+  a2.setAttribute("target", "_blank");
+  a2.setAttribute("rel", "noopener");
+  a2.setAttribute("class", "oc-chrome-ref");
+  const BRAND_LARGE = 16;
+  const text = createSVGElement("text");
+  setAttrs(text, {
+    x: rightEdge,
+    y: chromeY + BRAND_LARGE,
+    "dominant-baseline": "alphabetic",
+    "font-family": layout.theme.fonts.family,
+    "font-size": BRAND_FONT_SIZE2,
+    "text-anchor": "end",
+    "fill-opacity": 0.55
+  });
+  text.style.setProperty("fill", fill);
+  const trySpan = createSVGElement("tspan");
+  trySpan.setAttribute("font-weight", "500");
+  trySpan.textContent = "try";
+  text.appendChild(trySpan);
+  const openDataSpan = createSVGElement("tspan");
+  openDataSpan.setAttribute("font-weight", "600");
+  openDataSpan.setAttribute("font-size", String(BRAND_LARGE));
+  openDataSpan.textContent = "OpenData";
+  text.appendChild(openDataSpan);
+  const aiSpan = createSVGElement("tspan");
+  aiSpan.setAttribute("font-weight", "500");
+  aiSpan.textContent = ".ai";
+  text.appendChild(aiSpan);
+  a2.appendChild(text);
+  parent.appendChild(a2);
+}
+
+// src/renderers/chrome.ts
+import { wrapText } from "@opendata-ai/openchart-core";
+function renderChromeElement(parent, element, className, chromeKey, measureText) {
+  const text = createSVGElement("text");
+  setAttrs(text, { x: element.x, y: element.y });
+  applyTextStyle(text, element.style);
+  text.setAttribute("class", className);
+  text.setAttribute("data-chrome-key", chromeKey);
+  const lines = wrapText(
+    element.text,
+    element.style.fontSize,
+    element.style.fontWeight,
+    element.maxWidth,
+    measureText
+  );
+  if (lines.length === 1) {
+    text.textContent = element.text;
+  } else {
+    const lineHeight = element.style.fontSize * (element.style.lineHeight ?? 1.3);
+    for (let i = 0; i < lines.length; i++) {
+      const tspan = createSVGElement("tspan");
+      setAttrs(tspan, { x: element.x, dy: i === 0 ? 0 : lineHeight });
+      tspan.textContent = lines[i];
+      text.appendChild(tspan);
+    }
+  }
+  parent.appendChild(text);
+}
+function renderChrome(parent, layout) {
+  const g = createSVGElement("g");
+  g.setAttribute("class", "oc-chrome");
+  const { chrome, measureText } = layout;
+  if (chrome.title) {
+    renderChromeElement(g, chrome.title, "oc-title", "title", measureText);
+  }
+  if (chrome.subtitle) {
+    renderChromeElement(g, chrome.subtitle, "oc-subtitle", "subtitle", measureText);
+  }
+  const xAxisExtent = computeXAxisExtent(layout);
+  const bottomOffset = layout.area.y + layout.area.height + xAxisExtent;
+  if (chrome.source) {
+    renderChromeElement(
+      g,
+      { ...chrome.source, y: bottomOffset + chrome.source.y },
+      "oc-source",
+      "source",
+      measureText
+    );
+  }
+  if (chrome.byline) {
+    renderChromeElement(
+      g,
+      { ...chrome.byline, y: bottomOffset + chrome.byline.y },
+      "oc-byline",
+      "byline",
+      measureText
+    );
+  }
+  if (chrome.footer) {
+    renderChromeElement(
+      g,
+      { ...chrome.footer, y: bottomOffset + chrome.footer.y },
+      "oc-footer",
+      "footer",
+      measureText
+    );
+  }
+  parent.appendChild(g);
+}
+
+// src/renderers/legend.ts
+import { estimateTextWidth as estimateTextWidth3 } from "@opendata-ai/openchart-core";
+function renderLegend(parent, legend) {
+  if (legend.entries.length === 0) return;
+  const g = createSVGElement("g");
+  g.setAttribute("class", "oc-legend");
+  g.setAttribute("role", "list");
+  g.setAttribute("aria-label", "Chart legend");
+  const isHorizontal = legend.position === "top" || legend.position === "bottom";
+  let offsetX = legend.bounds.x;
+  let offsetY = legend.bounds.y;
+  for (let i = 0; i < legend.entries.length; i++) {
+    const entry = legend.entries[i];
+    if (isHorizontal && i > 0) {
+      const labelWidth = estimateTextWidth3(
+        entry.label,
+        legend.labelStyle.fontSize,
+        legend.labelStyle.fontWeight
+      );
+      const entryWidth = legend.swatchSize + legend.swatchGap + labelWidth + legend.entryGap;
+      if (offsetX + entryWidth > legend.bounds.x + legend.bounds.width) {
+        offsetX = legend.bounds.x;
+        offsetY += legend.swatchSize + 6;
+      }
+    }
+    const entryG = createSVGElement("g");
+    entryG.setAttribute("class", "oc-legend-entry");
+    entryG.setAttribute("role", "listitem");
+    entryG.setAttribute("data-legend-index", String(i));
+    entryG.setAttribute("data-legend-label", entry.label);
+    if (entry.overflow) {
+      entryG.setAttribute("data-legend-overflow", "true");
+      entryG.setAttribute("aria-label", entry.label);
+      entryG.setAttribute("opacity", "0.5");
+    } else {
+      entryG.setAttribute(
+        "aria-label",
+        `${entry.label}: ${entry.active !== false ? "visible" : "hidden"}`
+      );
+      entryG.setAttribute("style", "cursor: pointer");
+      if (entry.active === false) {
+        entryG.setAttribute("opacity", "0.3");
+      }
+    }
+    if (entry.shape === "circle") {
+      const circle = createSVGElement("circle");
+      setAttrs(circle, {
+        cx: offsetX + legend.swatchSize / 2,
+        cy: offsetY + legend.swatchSize / 2,
+        r: legend.swatchSize / 2,
+        fill: entry.color
+      });
+      entryG.appendChild(circle);
+    } else if (entry.shape === "line") {
+      const line = createSVGElement("line");
+      setAttrs(line, {
+        x1: offsetX,
+        y1: offsetY + legend.swatchSize / 2,
+        x2: offsetX + legend.swatchSize,
+        y2: offsetY + legend.swatchSize / 2,
+        stroke: entry.color,
+        "stroke-width": 2
+      });
+      entryG.appendChild(line);
+      const dot = createSVGElement("circle");
+      setAttrs(dot, {
+        cx: offsetX + legend.swatchSize / 2,
+        cy: offsetY + legend.swatchSize / 2,
+        r: 2.5,
+        fill: entry.color
+      });
+      entryG.appendChild(dot);
+    } else {
+      const rect = createSVGElement("rect");
+      setAttrs(rect, {
+        x: offsetX,
+        y: offsetY,
+        width: legend.swatchSize,
+        height: legend.swatchSize,
+        fill: entry.color,
+        rx: 2
+      });
+      entryG.appendChild(rect);
+    }
+    const label = createSVGElement("text");
+    setAttrs(label, {
+      x: offsetX + legend.swatchSize + legend.swatchGap,
+      y: offsetY + legend.swatchSize / 2,
+      "dominant-baseline": "central"
+    });
+    applyTextStyle(label, legend.labelStyle);
+    label.textContent = entry.label;
+    entryG.appendChild(label);
+    g.appendChild(entryG);
+    if (isHorizontal) {
+      const labelWidth = estimateTextWidth3(
+        entry.label,
+        legend.labelStyle.fontSize,
+        legend.labelStyle.fontWeight
+      );
+      const entryWidth = legend.swatchSize + legend.swatchGap + labelWidth + legend.entryGap;
+      offsetX += entryWidth;
+    } else {
+      offsetY += legend.swatchSize + legend.entryGap;
+    }
+  }
+  parent.appendChild(g);
+}
+
+// src/renderers/marks.ts
+var currentAnimation;
+var currentGradientMap = /* @__PURE__ */ new Map();
+function setMarkRenderState(state) {
+  currentAnimation = state.animation;
+  currentGradientMap = state.gradientMap;
+}
+function resetMarkRenderState() {
+  currentAnimation = void 0;
+  currentGradientMap = /* @__PURE__ */ new Map();
+}
+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 markRenderers = {};
+function registerMarkRenderer(type, renderer) {
+  markRenderers[type] = renderer;
 }
 function renderLineMark(mark, index2) {
   const g = createSVGElement("g");
@@ -3948,319 +4272,15 @@ function renderMarks(parent, layout) {
   }
   parent.appendChild(g);
 }
-function renderAnnotations(parent, layout) {
-  if (layout.annotations.length === 0) return;
-  const g = createSVGElement("g");
-  g.setAttribute("class", "oc-annotations");
-  const bgColor = layout.theme.colors.background;
-  for (let i = 0; i < layout.annotations.length; i++) {
-    renderAnnotation(g, layout.annotations[i], i, bgColor);
-  }
-  parent.appendChild(g);
-}
-function renderCurvedArrow(parent, from, to, stroke) {
-  const pad = 6;
-  const tipY = to.y - pad;
-  const dy = tipY - from.y;
-  const dist = Math.sqrt((to.x - from.x) ** 2 + dy ** 2) || 1;
-  const arrowLen = 8;
-  const arrowWidth = 4;
-  const bulge = Math.max(dist * 0.4, 35);
-  const cp1x = from.x + bulge;
-  const cp1y = from.y + dy * 0.35;
-  const cp2x = to.x;
-  const cp2y = tipY - Math.abs(dy) * 0.25;
-  const tx = to.x - cp2x;
-  const ty = tipY - cp2y;
-  const tLen = Math.sqrt(tx * tx + ty * ty) || 1;
-  const ux = tx / tLen;
-  const uy = ty / tLen;
-  const baseX = to.x - ux * arrowLen;
-  const baseY = tipY - uy * arrowLen;
-  const path = createSVGElement("path");
-  path.setAttribute("class", "oc-annotation-connector");
-  setAttrs(path, {
-    d: `M ${from.x} ${from.y} C ${cp1x} ${cp1y}, ${cp2x} ${cp2y}, ${baseX} ${baseY}`,
-    fill: "none",
-    stroke,
-    "stroke-width": 1.5
-  });
-  parent.appendChild(path);
-  const px = -uy;
-  const py = ux;
-  const arrow = createSVGElement("polygon");
-  arrow.setAttribute("class", "oc-annotation-connector");
-  setAttrs(arrow, {
-    points: [
-      `${to.x},${tipY}`,
-      `${baseX + px * arrowWidth},${baseY + py * arrowWidth}`,
-      `${baseX - px * arrowWidth},${baseY - py * arrowWidth}`
-    ].join(" "),
-    fill: stroke
-  });
-  parent.appendChild(arrow);
-}
-function renderAnnotation(parent, annotation, index2, bgColor) {
-  const g = createSVGElement("g");
-  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", "oc-annotation-range");
-    setAttrs(rect, {
-      x: annotation.rect.x,
-      y: annotation.rect.y,
-      width: annotation.rect.width,
-      height: annotation.rect.height
-    });
-    if (annotation.fill) rect.setAttribute("fill", annotation.fill);
-    if (annotation.opacity !== void 0) {
-      rect.setAttribute("fill-opacity", String(annotation.opacity));
-    }
-    g.appendChild(rect);
-  }
-  if (annotation.line) {
-    const line = createSVGElement("line");
-    line.setAttribute("class", "oc-annotation-line");
-    setAttrs(line, {
-      x1: annotation.line.start.x,
-      y1: annotation.line.start.y,
-      x2: annotation.line.end.x,
-      y2: annotation.line.end.y,
-      "stroke-width": annotation.strokeWidth ?? 1
-    });
-    if (annotation.stroke) line.setAttribute("stroke", annotation.stroke);
-    if (annotation.strokeDasharray) {
-      line.setAttribute("stroke-dasharray", annotation.strokeDasharray);
-    }
-    g.appendChild(line);
-  }
-  if (annotation.label?.visible) {
-    if (annotation.label.connector) {
-      const c2 = annotation.label.connector;
-      if (c2.style === "curve") {
-        renderCurvedArrow(g, c2.from, c2.to, c2.stroke);
-      } else {
-        const connector = createSVGElement("line");
-        connector.setAttribute("class", "oc-annotation-connector");
-        setAttrs(connector, {
-          x1: c2.from.x,
-          y1: c2.from.y,
-          x2: c2.to.x,
-          y2: c2.to.y,
-          stroke: c2.stroke,
-          "stroke-width": 1,
-          "stroke-opacity": 0.5
-        });
-        g.appendChild(connector);
-      }
-    }
-    const text = createSVGElement("text");
-    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");
-    const fontSize = annotation.label.style.fontSize ?? 12;
-    const lineHeight = fontSize * (annotation.label.style.lineHeight ?? 1.3);
-    const isMultiLine = lines.length > 1;
-    if (isMultiLine) {
-      text.setAttribute("text-anchor", "middle");
-      for (let i = 0; i < lines.length; i++) {
-        const tspan = createSVGElement("tspan");
-        setAttrs(tspan, { x: annotation.label.x, dy: i === 0 ? 0 : lineHeight });
-        tspan.textContent = lines[i];
-        text.appendChild(tspan);
-      }
-    } else {
-      text.textContent = annotation.label.text;
-    }
-    if (annotation.label.background) {
-      const charWidth = fontSize * 0.55;
-      const maxLineWidth = Math.max(...lines.map((l) => l.length)) * charWidth;
-      const totalHeight = lines.length * lineHeight;
-      const pad = 3;
-      const bgX = isMultiLine ? annotation.label.x - maxLineWidth / 2 - pad : annotation.label.x - pad;
-      const bgRect = createSVGElement("rect");
-      bgRect.setAttribute("class", "oc-annotation-bg");
-      setAttrs(bgRect, {
-        x: bgX,
-        y: annotation.label.y - fontSize + (lineHeight - fontSize) / 2 - pad,
-        width: maxLineWidth + pad * 2,
-        height: totalHeight + pad * 2,
-        fill: annotation.label.background,
-        rx: 2
-      });
-      g.appendChild(bgRect);
-    } else if (bgColor) {
-      text.style.paintOrder = "stroke";
-      text.style.stroke = bgColor;
-      text.style.strokeWidth = `${Math.round(fontSize * 0.3)}px`;
-      text.style.strokeLinejoin = "round";
-    }
-    g.appendChild(text);
-  }
-  parent.appendChild(g);
-}
-function renderLegend(parent, legend) {
-  if (legend.entries.length === 0) return;
-  const g = createSVGElement("g");
-  g.setAttribute("class", "oc-legend");
-  g.setAttribute("role", "list");
-  g.setAttribute("aria-label", "Chart legend");
-  const isHorizontal = legend.position === "top" || legend.position === "bottom";
-  let offsetX = legend.bounds.x;
-  let offsetY = legend.bounds.y;
-  for (let i = 0; i < legend.entries.length; i++) {
-    const entry = legend.entries[i];
-    if (isHorizontal && i > 0) {
-      const labelWidth = estimateTextWidth(
-        entry.label,
-        legend.labelStyle.fontSize,
-        legend.labelStyle.fontWeight
-      );
-      const entryWidth = legend.swatchSize + legend.swatchGap + labelWidth + legend.entryGap;
-      if (offsetX + entryWidth > legend.bounds.x + legend.bounds.width) {
-        offsetX = legend.bounds.x;
-        offsetY += legend.swatchSize + 6;
-      }
-    }
-    const entryG = createSVGElement("g");
-    entryG.setAttribute("class", "oc-legend-entry");
-    entryG.setAttribute("role", "listitem");
-    entryG.setAttribute("data-legend-index", String(i));
-    entryG.setAttribute("data-legend-label", entry.label);
-    if (entry.overflow) {
-      entryG.setAttribute("data-legend-overflow", "true");
-      entryG.setAttribute("aria-label", entry.label);
-      entryG.setAttribute("opacity", "0.5");
-    } else {
-      entryG.setAttribute(
-        "aria-label",
-        `${entry.label}: ${entry.active !== false ? "visible" : "hidden"}`
-      );
-      entryG.setAttribute("style", "cursor: pointer");
-      if (entry.active === false) {
-        entryG.setAttribute("opacity", "0.3");
-      }
-    }
-    if (entry.shape === "circle") {
-      const circle = createSVGElement("circle");
-      setAttrs(circle, {
-        cx: offsetX + legend.swatchSize / 2,
-        cy: offsetY + legend.swatchSize / 2,
-        r: legend.swatchSize / 2,
-        fill: entry.color
-      });
-      entryG.appendChild(circle);
-    } else if (entry.shape === "line") {
-      const line = createSVGElement("line");
-      setAttrs(line, {
-        x1: offsetX,
-        y1: offsetY + legend.swatchSize / 2,
-        x2: offsetX + legend.swatchSize,
-        y2: offsetY + legend.swatchSize / 2,
-        stroke: entry.color,
-        "stroke-width": 2
-      });
-      entryG.appendChild(line);
-      const dot = createSVGElement("circle");
-      setAttrs(dot, {
-        cx: offsetX + legend.swatchSize / 2,
-        cy: offsetY + legend.swatchSize / 2,
-        r: 2.5,
-        fill: entry.color
-      });
-      entryG.appendChild(dot);
-    } else {
-      const rect = createSVGElement("rect");
-      setAttrs(rect, {
-        x: offsetX,
-        y: offsetY,
-        width: legend.swatchSize,
-        height: legend.swatchSize,
-        fill: entry.color,
-        rx: 2
-      });
-      entryG.appendChild(rect);
-    }
-    const label = createSVGElement("text");
-    setAttrs(label, {
-      x: offsetX + legend.swatchSize + legend.swatchGap,
-      y: offsetY + legend.swatchSize / 2,
-      "dominant-baseline": "central"
-    });
-    applyTextStyle(label, legend.labelStyle);
-    label.textContent = entry.label;
-    entryG.appendChild(label);
-    g.appendChild(entryG);
-    if (isHorizontal) {
-      const labelWidth = estimateTextWidth(
-        entry.label,
-        legend.labelStyle.fontSize,
-        legend.labelStyle.fontWeight
-      );
-      const entryWidth = legend.swatchSize + legend.swatchGap + labelWidth + legend.entryGap;
-      offsetX += entryWidth;
-    } else {
-      offsetY += legend.swatchSize + legend.entryGap;
-    }
-  }
-  parent.appendChild(g);
-}
-var BRAND_URL = "https://tryopendata.ai";
-var XLINK_NS = "http://www.w3.org/1999/xlink";
-function renderBrand(parent, layout) {
-  if (layout.dimensions.width < BRAND_MIN_WIDTH2) return;
-  const { width } = layout.dimensions;
-  const padding = layout.theme.spacing.padding;
-  const rightEdge = width - padding;
-  const fill = layout.theme.colors.axis;
-  const { chrome } = layout;
-  const xAxisExtent = computeXAxisExtent(layout);
-  const bottomOffset = layout.area.y + layout.area.height + xAxisExtent;
-  const firstBottom = chrome.source ?? chrome.byline ?? chrome.footer;
-  const chromeY = firstBottom ? bottomOffset + firstBottom.y : bottomOffset + layout.theme.spacing.chartToFooter;
-  const a2 = createSVGElement("a");
-  a2.setAttribute("href", BRAND_URL);
-  a2.setAttributeNS(XLINK_NS, "xlink:href", BRAND_URL);
-  a2.setAttribute("target", "_blank");
-  a2.setAttribute("rel", "noopener");
-  a2.setAttribute("class", "oc-chrome-ref");
-  const BRAND_LARGE = 16;
-  const text = createSVGElement("text");
-  setAttrs(text, {
-    x: rightEdge,
-    y: chromeY + BRAND_LARGE,
-    "dominant-baseline": "alphabetic",
-    "font-family": layout.theme.fonts.family,
-    "font-size": BRAND_FONT_SIZE2,
-    "text-anchor": "end",
-    "fill-opacity": 0.55
-  });
-  text.style.setProperty("fill", fill);
-  const trySpan = createSVGElement("tspan");
-  trySpan.setAttribute("font-weight", "500");
-  trySpan.textContent = "try";
-  text.appendChild(trySpan);
-  const openDataSpan = createSVGElement("tspan");
-  openDataSpan.setAttribute("font-weight", "600");
-  openDataSpan.setAttribute("font-size", String(BRAND_LARGE));
-  openDataSpan.textContent = "OpenData";
-  text.appendChild(openDataSpan);
-  const aiSpan = createSVGElement("tspan");
-  aiSpan.setAttribute("font-weight", "500");
-  aiSpan.textContent = ".ai";
-  text.appendChild(aiSpan);
-  a2.appendChild(text);
-  parent.appendChild(a2);
-}
+
+// src/svg-renderer.ts
+var EASE_VAR_MAP = {
+  smooth: "var(--oc-ease-smooth)",
+  snappy: "var(--oc-ease-snappy)"
+};
 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}`,
@@ -4321,38 +4341,41 @@ function renderChartSVG(layout, container, opts) {
   });
   clipPath.appendChild(clipRect);
   defs.appendChild(clipPath);
-  currentGradientMap = buildGradientDefs(layout.marks, defs);
+  const gradientMap = buildGradientDefs(layout.marks, defs);
   svg.appendChild(defs);
-  renderAxes(svg, layout);
-  const clippedGroup = createSVGElement("g");
-  clippedGroup.setAttribute("clip-path", `url(#${clipId})`);
-  renderMarks(clippedGroup, layout);
-  const hasLineOrAreaWithDataPoints = layout.marks.some(
-    (m2) => (m2.type === "line" || m2.type === "area") && m2.dataPoints && m2.dataPoints.length > 0
-  );
-  const hasPointMarks = layout.marks.some((m2) => m2.type === "point");
-  if (hasLineOrAreaWithDataPoints && !hasPointMarks) {
-    const overlay = createSVGElement("rect");
-    setAttrs(overlay, {
-      x: layout.area.x,
-      y: layout.area.y,
-      width: layout.area.width,
-      height: layout.area.height,
-      fill: "transparent"
-    });
-    overlay.setAttribute("class", "oc-voronoi-overlay");
-    overlay.setAttribute("data-voronoi-overlay", "true");
-    clippedGroup.appendChild(overlay);
-  }
-  svg.appendChild(clippedGroup);
-  renderAnnotations(svg, layout);
-  renderLegend(svg, layout.legend);
-  renderChrome(svg, layout);
-  if (layout.watermark) {
-    renderBrand(svg, layout);
+  setMarkRenderState({ animation, gradientMap });
+  try {
+    renderAxes(svg, layout);
+    const clippedGroup = createSVGElement("g");
+    clippedGroup.setAttribute("clip-path", `url(#${clipId})`);
+    renderMarks(clippedGroup, layout);
+    const hasLineOrAreaWithDataPoints = layout.marks.some(
+      (m2) => (m2.type === "line" || m2.type === "area") && m2.dataPoints && m2.dataPoints.length > 0
+    );
+    const hasPointMarks = layout.marks.some((m2) => m2.type === "point");
+    if (hasLineOrAreaWithDataPoints && !hasPointMarks) {
+      const overlay = createSVGElement("rect");
+      setAttrs(overlay, {
+        x: layout.area.x,
+        y: layout.area.y,
+        width: layout.area.width,
+        height: layout.area.height,
+        fill: "transparent"
+      });
+      overlay.setAttribute("class", "oc-voronoi-overlay");
+      overlay.setAttribute("data-voronoi-overlay", "true");
+      clippedGroup.appendChild(overlay);
+    }
+    svg.appendChild(clippedGroup);
+    renderAnnotations(svg, layout);
+    renderLegend(svg, layout.legend);
+    renderChrome(svg, layout);
+    if (layout.watermark) {
+      renderBrand(svg, layout);
+    }
+  } finally {
+    resetMarkRenderState();
   }
-  currentAnimation = void 0;
-  currentGradientMap = /* @__PURE__ */ new Map();
   container.appendChild(svg);
   return svg;
 }
@@ -6482,7 +6505,7 @@ import { compileSankey } from "@opendata-ai/openchart-engine";
 import {
   BRAND_FONT_SIZE as BRAND_FONT_SIZE3,
   BRAND_MIN_WIDTH as BRAND_MIN_WIDTH3,
-  estimateTextWidth as estimateTextWidth2,
+  estimateTextWidth as estimateTextWidth4,
   wrapText as wrapText2
 } from "@opendata-ai/openchart-core";
 import { clampStaggerDelay as clampStaggerDelay2 } from "@opendata-ai/openchart-engine";
@@ -6641,7 +6664,7 @@ function renderLegend2(parent, legend) {
   for (let i = 0; i < legend.entries.length; i++) {
     const entry = legend.entries[i];
     if (isHorizontal && i > 0) {
-      const labelWidth = estimateTextWidth2(
+      const labelWidth = estimateTextWidth4(
         entry.label,
         legend.labelStyle.fontSize,
         legend.labelStyle.fontWeight
@@ -6692,7 +6715,7 @@ function renderLegend2(parent, legend) {
     entryG.appendChild(label);
     g.appendChild(entryG);
     if (isHorizontal) {
-      const labelWidth = estimateTextWidth2(
+      const labelWidth = estimateTextWidth4(
         entry.label,
         legend.labelStyle.fontSize,
         legend.labelStyle.fontWeight