@opendata-ai/openchart-vanilla 6.19.3 → 6.21.0

package/dist/index.js

@@ -3314,11 +3314,18 @@ function setupTableAnimationCleanup(wrapper) {
 }
 
 // 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";
 
 // src/gradient-utils.ts
 import { isGradientDef } from "@opendata-ai/openchart-core";
+
+// src/svg-ids.ts
+var counter = 0;
+function nextSvgId(prefix) {
+  return `${prefix}-${counter++}`;
+}
+
+// src/gradient-utils.ts
 var SVG_NS = "http://www.w3.org/2000/svg";
 function gradientKey(def) {
   return sortedStringify(def);
@@ -3375,7 +3382,6 @@ function appendStop(parent, stop) {
   }
   parent.appendChild(stopEl);
 }
-var globalGradientCounter = 0;
 function buildGradientDefs(marks, defs) {
   const map = /* @__PURE__ */ new Map();
   for (const mark of marks) {
@@ -3383,7 +3389,7 @@ function buildGradientDefs(marks, defs) {
     if (fill && isGradientDef(fill)) {
       const key = gradientKey(fill);
       if (!map.has(key)) {
-        const id = `oc-grad-${globalGradientCounter++}`;
+        const id = nextSvgId("oc-grad");
         const el = createGradientElement(fill, id);
         defs.appendChild(el);
         map.set(key, id);
@@ -3399,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);
 }
@@ -3455,191 +3434,244 @@ function applyTextStyle(el, style) {
     el.setAttribute("font-variant", style.fontVariant);
   }
 }
-function wrapText(text, fontSize, fontWeight, maxWidth, measureText) {
-  if (maxWidth <= 0) return [text];
-  const segments = text.split("\n");
-  if (segments.length > 1) {
-    return segments.flatMap(
-      (segment) => segment.length === 0 ? [""] : wrapText(segment, fontSize, fontWeight, maxWidth, measureText)
-    );
-  }
-  if (measureText) {
-    const textWidth = measureText(text, fontSize, fontWeight).width;
-    if (textWidth <= maxWidth) return [text];
-    const words2 = text.split(" ");
-    const lines2 = [];
-    let current2 = "";
-    for (const word of words2) {
-      const candidate = current2 ? `${current2} ${word}` : word;
-      const candidateWidth = measureText(candidate, fontSize, fontWeight).width;
-      if (candidateWidth > maxWidth && current2) {
-        lines2.push(current2);
-        current2 = word;
-      } else {
-        current2 = candidate;
-      }
-    }
-    if (current2) lines2.push(current2);
-    return lines2;
-  }
-  const AVG_CHAR_WIDTH = 0.57;
-  const WEIGHT_FACTORS = {
-    100: 0.9,
-    200: 0.92,
-    300: 0.95,
-    400: 1,
-    500: 1.02,
-    600: 1.05,
-    700: 1.08,
-    800: 1.1,
-    900: 1.12
-  };
-  const weightFactor = WEIGHT_FACTORS[fontWeight] ?? 1;
-  const charWidth = fontSize * AVG_CHAR_WIDTH * weightFactor;
-  const maxChars = Math.floor(maxWidth / charWidth);
-  if (text.length <= maxChars) return [text];
-  const words = text.split(" ");
-  const lines = [];
-  let current = "";
-  for (const word of words) {
-    const candidate = current ? `${current} ${word}` : word;
-    if (candidate.length > maxChars && current) {
-      lines.push(current);
-      current = word;
-    } else {
-      current = candidate;
+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;
   }
-  if (current) lines.push(current);
-  return lines;
+  return xAxis.label ? 48 : 26;
 }
-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);
+
+// 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 renderChrome(parent, layout) {
+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);
-  }
-  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
-    );
+  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.footer) {
-    renderChromeElement(
-      g,
-      { ...chrome.footer, y: bottomOffset + chrome.footer.y },
-      "oc-footer",
-      "footer",
-      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);
   }
-  parent.appendChild(g);
-}
-function renderAxis(parent, axis, orientation, layout) {
-  const g = createSVGElement("g");
-  g.setAttribute("class", `oc-axis oc-axis-${orientation}`);
-  const { area } = layout;
-  if (orientation === "x") {
+  if (annotation.line) {
     const line = createSVGElement("line");
-    line.setAttribute("class", "oc-axis-line");
+    line.setAttribute("class", "oc-annotation-line");
     setAttrs(line, {
-      x1: axis.start.x,
-      y1: axis.start.y,
-      x2: axis.end.x,
-      y2: axis.end.y,
-      stroke: layout.theme.colors.axis,
-      "stroke-width": 1
+      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);
   }
-  for (const tick of axis.ticks) {
-    if (orientation === "x") {
-      const label = createSVGElement("text");
-      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;
-        setAttrs(label, {
-          x: labelX,
-          y: labelY,
-          "text-anchor": axis.tickAngle < 0 ? "end" : "start",
-          "dominant-baseline": "central",
-          transform: `rotate(${axis.tickAngle}, ${labelX}, ${labelY})`
-        });
+  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 {
-        setAttrs(label, {
-          x: tick.position,
-          y: area.y + area.height + 14,
-          "text-anchor": "middle"
+        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);
       }
-      applyTextStyle(label, axis.tickLabelStyle);
-      label.textContent = tick.label;
-      g.appendChild(label);
-    } else {
-      const label = createSVGElement("text");
-      label.setAttribute("class", "oc-axis-tick");
-      setAttrs(label, {
-        x: area.x - 6,
-        y: tick.position,
-        "text-anchor": "end",
-        "dominant-baseline": "central"
-      });
-      applyTextStyle(label, axis.tickLabelStyle);
-      label.textContent = tick.label;
-      g.appendChild(label);
     }
-  }
-  for (const gridline of axis.gridlines) {
-    const gl = createSVGElement("line");
-    gl.setAttribute("class", "oc-gridline");
-    if (orientation === "y") {
-      setAttrs(gl, {
+    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 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}`);
+  const { area } = layout;
+  if (orientation === "x") {
+    const line = createSVGElement("line");
+    line.setAttribute("class", "oc-axis-line");
+    setAttrs(line, {
+      x1: axis.start.x,
+      y1: axis.start.y,
+      x2: axis.end.x,
+      y2: axis.end.y,
+      stroke: layout.theme.colors.axis,
+      "stroke-width": 1
+    });
+    g.appendChild(line);
+  }
+  for (const tick of axis.ticks) {
+    if (orientation === "x") {
+      const label = createSVGElement("text");
+      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;
+        setAttrs(label, {
+          x: labelX,
+          y: labelY,
+          "text-anchor": axis.tickAngle < 0 ? "end" : "start",
+          "dominant-baseline": "central",
+          transform: `rotate(${axis.tickAngle}, ${labelX}, ${labelY})`
+        });
+      } else {
+        setAttrs(label, {
+          x: tick.position,
+          y: area.y + area.height + 14,
+          "text-anchor": "middle"
+        });
+      }
+      applyTextStyle(label, axis.tickLabelStyle);
+      label.textContent = tick.label;
+      g.appendChild(label);
+    } else {
+      const label = createSVGElement("text");
+      label.setAttribute("class", "oc-axis-tick");
+      setAttrs(label, {
+        x: area.x - 6,
+        y: tick.position,
+        "text-anchor": "end",
+        "dominant-baseline": "central"
+      });
+      applyTextStyle(label, axis.tickLabelStyle);
+      label.textContent = tick.label;
+      g.appendChild(label);
+    }
+  }
+  for (const gridline of axis.gridlines) {
+    const gl = createSVGElement("line");
+    gl.setAttribute("class", "oc-gridline");
+    if (orientation === "y") {
+      setAttrs(gl, {
         x1: area.x,
         y1: gridline.position,
         x2: area.x + area.width,
@@ -3672,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
@@ -3707,449 +3739,128 @@ function renderAxes(parent, layout) {
     renderAxis(parent, layout.axes.y, "y", layout);
   }
 }
-var markRenderers = {};
-function registerMarkRenderer(type, renderer) {
-  markRenderers[type] = renderer;
-}
-function renderLineMark(mark, index2) {
-  const g = createSVGElement("g");
-  g.setAttribute("data-mark-id", `line-${mark.seriesKey ?? index2}`);
-  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(" ");
-    setAttrs(path, {
-      d,
-      fill: "none",
-      stroke: mark.stroke,
-      "stroke-width": mark.strokeWidth
-    });
-    if (mark.strokeDasharray) {
-      path.setAttribute("stroke-dasharray", mark.strokeDasharray);
-    }
-    if (mark.opacity != null) {
-      path.setAttribute("opacity", String(mark.opacity));
-    }
-    g.appendChild(path);
-  }
-  if (mark.label?.visible) {
-    const label = createSVGElement("text");
-    label.setAttribute("class", "oc-mark-label");
-    if (mark.seriesKey) {
-      label.setAttribute("data-series", mark.seriesKey);
-    }
-    setAttrs(label, { x: mark.label.x, y: mark.label.y });
-    applyTextStyle(label, mark.label.style);
-    label.textContent = mark.label.text;
-    g.appendChild(label);
-    if (mark.label.connector) {
-      const connector = createSVGElement("line");
-      connector.setAttribute("class", "oc-mark-connector");
-      setAttrs(connector, {
-        x1: mark.label.connector.from.x,
-        y1: mark.label.connector.from.y,
-        x2: mark.label.connector.to.x,
-        y2: mark.label.connector.to.y,
-        stroke: mark.label.connector.stroke,
-        "stroke-width": 1,
-        "stroke-opacity": 0.5
-      });
-      g.appendChild(connector);
-    }
-  }
-  return g;
-}
-function renderAreaMark(mark, index2) {
-  const g = createSVGElement("g");
-  g.setAttribute("data-mark-id", `area-${mark.seriesKey ?? index2}`);
-  g.setAttribute("class", "oc-mark oc-mark-area");
-  stampAnimationAttrs(g, mark, index2);
-  if (mark.path) {
-    const fill = createSVGElement("path");
-    setAttrs(fill, {
-      d: mark.path,
-      fill: resolveMarkFill(mark.fill, currentGradientMap),
-      "fill-opacity": mark.fillOpacity,
-      stroke: "none"
-    });
-    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",
-        stroke: mark.stroke,
-        "stroke-width": mark.strokeWidth ?? 1
-      });
-      g.appendChild(strokePath);
-    }
-  }
-  return g;
-}
-function renderRectMark(mark, index2) {
-  const g = createSVGElement("g");
-  g.setAttribute("data-mark-id", `rect-${index2}`);
-  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,
-    y: mark.y,
-    width: mark.width,
-    height: mark.height,
-    fill: resolveMarkFill(mark.fill, currentGradientMap)
+
+// 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
   });
-  if (mark.stroke) {
-    rect.setAttribute("stroke", mark.stroke);
-  }
-  if (mark.strokeWidth) {
-    rect.setAttribute("stroke-width", String(mark.strokeWidth));
-  }
-  if (mark.cornerRadius) {
-    setAttrs(rect, { rx: mark.cornerRadius, ry: mark.cornerRadius });
-  }
-  g.appendChild(rect);
-  if (mark.label?.visible) {
-    const label = createSVGElement("text");
-    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;
-    g.appendChild(label);
-  }
-  return g;
-}
-function renderArcMark(mark, index2) {
-  const g = createSVGElement("g");
-  g.setAttribute("data-mark-id", `arc-${index2}`);
-  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,
-    fill: resolveMarkFill(mark.fill, currentGradientMap),
-    stroke: mark.stroke,
-    "stroke-width": mark.strokeWidth
-  });
-  g.appendChild(path);
-  if (mark.label?.visible) {
-    const label = createSVGElement("text");
-    label.setAttribute("class", "oc-mark-label");
-    setAttrs(label, {
-      x: mark.label.x - mark.center.x,
-      y: mark.label.y - mark.center.y
-    });
-    applyTextStyle(label, mark.label.style);
-    label.textContent = mark.label.text;
-    g.appendChild(label);
-  }
-  return g;
-}
-function renderPointMark(mark, index2) {
-  const circle = createSVGElement("circle");
-  circle.setAttribute("data-mark-id", `point-${index2}`);
-  circle.setAttribute("class", "oc-mark oc-mark-point");
-  stampAnimationAttrs(circle, mark, index2);
-  setAttrs(circle, {
-    cx: mark.cx,
-    cy: mark.cy,
-    r: mark.r,
-    fill: resolveMarkFill(mark.fill, currentGradientMap),
-    stroke: mark.stroke,
-    "stroke-width": mark.strokeWidth
-  });
-  if (mark.fillOpacity !== void 0) {
-    circle.setAttribute("fill-opacity", String(mark.fillOpacity));
-  }
-  return circle;
+  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);
 }
-function renderTextMark(mark, index2) {
+
+// src/renderers/chrome.ts
+import { wrapText } from "@opendata-ai/openchart-core";
+function renderChromeElement(parent, element, className, chromeKey, measureText) {
   const text = createSVGElement("text");
-  text.setAttribute("data-mark-id", `textMark-${index2}`);
-  text.setAttribute("class", "oc-mark oc-mark-text");
-  stampAnimationAttrs(text, mark, index2);
-  setAttrs(text, {
-    x: mark.x,
-    y: mark.y,
-    "font-size": mark.fontSize,
-    "text-anchor": mark.textAnchor
-  });
-  text.style.setProperty("fill", mark.fill);
-  if (mark.fontWeight) {
-    text.setAttribute("font-weight", String(mark.fontWeight));
-  }
-  if (mark.fontFamily) {
-    text.setAttribute("font-family", mark.fontFamily);
-  }
-  if (mark.angle) {
-    text.setAttribute("transform", `rotate(${mark.angle}, ${mark.x}, ${mark.y})`);
-  }
-  text.textContent = mark.text;
-  return text;
-}
-function renderRuleMark(mark, index2) {
-  const line = createSVGElement("line");
-  line.setAttribute("data-mark-id", `rule-${index2}`);
-  line.setAttribute("class", "oc-mark oc-mark-rule");
-  stampAnimationAttrs(line, mark, index2);
-  setAttrs(line, {
-    x1: mark.x1,
-    y1: mark.y1,
-    x2: mark.x2,
-    y2: mark.y2,
-    stroke: mark.stroke,
-    "stroke-width": mark.strokeWidth
-  });
-  if (mark.strokeDasharray) {
-    line.setAttribute("stroke-dasharray", mark.strokeDasharray);
-  }
-  if (mark.opacity != null) {
-    line.setAttribute("opacity", String(mark.opacity));
-  }
-  return line;
-}
-function renderTickMark(mark, index2) {
-  const line = createSVGElement("line");
-  line.setAttribute("data-mark-id", `tick-${index2}`);
-  line.setAttribute("class", "oc-mark oc-mark-tick");
-  stampAnimationAttrs(line, mark, index2);
-  const half = mark.length / 2;
-  if (mark.orient === "vertical") {
-    setAttrs(line, {
-      x1: mark.x,
-      y1: mark.y - half,
-      x2: mark.x,
-      y2: mark.y + half,
-      stroke: mark.stroke,
-      "stroke-width": mark.strokeWidth
-    });
+  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 {
-    setAttrs(line, {
-      x1: mark.x - half,
-      y1: mark.y,
-      x2: mark.x + half,
-      y2: mark.y,
-      stroke: mark.stroke,
-      "stroke-width": mark.strokeWidth
-    });
-  }
-  if (mark.opacity != null) {
-    line.setAttribute("opacity", String(mark.opacity));
-  }
-  return line;
-}
-registerMarkRenderer("line", renderLineMark);
-registerMarkRenderer("area", renderAreaMark);
-registerMarkRenderer("rect", renderRectMark);
-registerMarkRenderer("arc", renderArcMark);
-registerMarkRenderer("point", renderPointMark);
-registerMarkRenderer("textMark", renderTextMark);
-registerMarkRenderer("rule", renderRuleMark);
-registerMarkRenderer("tick", renderTickMark);
-function getMarkSeries(mark) {
-  if (mark.type === "line" || mark.type === "area") {
-    return mark.seriesKey;
-  }
-  if (mark.type === "arc") {
-    return mark.aria.label.split(":")[0]?.trim();
-  }
-  if (mark.aria?.label) {
-    const beforeColon = mark.aria.label.split(":")[0]?.trim();
-    if (beforeColon) return beforeColon;
-  }
-  return void 0;
-}
-function renderMarks(parent, layout) {
-  const g = createSVGElement("g");
-  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) 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);
-  }
-  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);
+    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);
     }
-    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(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");
@@ -4162,7 +3873,7 @@ function renderLegend(parent, legend) {
   for (let i = 0; i < legend.entries.length; i++) {
     const entry = legend.entries[i];
     if (isHorizontal && i > 0) {
-      const labelWidth = estimateTextWidth(
+      const labelWidth = estimateTextWidth3(
         entry.label,
         legend.labelStyle.fontSize,
         legend.labelStyle.fontWeight
@@ -4234,79 +3945,342 @@ function renderLegend(parent, legend) {
     }
     const label = createSVGElement("text");
     setAttrs(label, {
-      x: offsetX + legend.swatchSize + legend.swatchGap,
-      y: offsetY + legend.swatchSize / 2,
-      "dominant-baseline": "central"
+      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");
+  g.setAttribute("data-mark-id", `line-${mark.seriesKey ?? index2}`);
+  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(" ");
+    setAttrs(path, {
+      d,
+      fill: "none",
+      stroke: mark.stroke,
+      "stroke-width": mark.strokeWidth
+    });
+    if (mark.strokeDasharray) {
+      path.setAttribute("stroke-dasharray", mark.strokeDasharray);
+    }
+    if (mark.opacity != null) {
+      path.setAttribute("opacity", String(mark.opacity));
+    }
+    g.appendChild(path);
+  }
+  if (mark.label?.visible) {
+    const label = createSVGElement("text");
+    label.setAttribute("class", "oc-mark-label");
+    if (mark.seriesKey) {
+      label.setAttribute("data-series", mark.seriesKey);
+    }
+    setAttrs(label, { x: mark.label.x, y: mark.label.y });
+    applyTextStyle(label, mark.label.style);
+    label.textContent = mark.label.text;
+    g.appendChild(label);
+    if (mark.label.connector) {
+      const connector = createSVGElement("line");
+      connector.setAttribute("class", "oc-mark-connector");
+      setAttrs(connector, {
+        x1: mark.label.connector.from.x,
+        y1: mark.label.connector.from.y,
+        x2: mark.label.connector.to.x,
+        y2: mark.label.connector.to.y,
+        stroke: mark.label.connector.stroke,
+        "stroke-width": 1,
+        "stroke-opacity": 0.5
+      });
+      g.appendChild(connector);
+    }
+  }
+  return g;
+}
+function renderAreaMark(mark, index2) {
+  const g = createSVGElement("g");
+  g.setAttribute("data-mark-id", `area-${mark.seriesKey ?? index2}`);
+  g.setAttribute("class", "oc-mark oc-mark-area");
+  stampAnimationAttrs(g, mark, index2);
+  if (mark.path) {
+    const fill = createSVGElement("path");
+    setAttrs(fill, {
+      d: mark.path,
+      fill: resolveMarkFill(mark.fill, currentGradientMap),
+      "fill-opacity": mark.fillOpacity,
+      stroke: "none"
+    });
+    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",
+        stroke: mark.stroke,
+        "stroke-width": mark.strokeWidth ?? 1
+      });
+      g.appendChild(strokePath);
+    }
+  }
+  return g;
+}
+function renderRectMark(mark, index2) {
+  const g = createSVGElement("g");
+  g.setAttribute("data-mark-id", `rect-${index2}`);
+  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,
+    y: mark.y,
+    width: mark.width,
+    height: mark.height,
+    fill: resolveMarkFill(mark.fill, currentGradientMap)
+  });
+  if (mark.stroke) {
+    rect.setAttribute("stroke", mark.stroke);
+  }
+  if (mark.strokeWidth) {
+    rect.setAttribute("stroke-width", String(mark.strokeWidth));
+  }
+  if (mark.cornerRadius) {
+    setAttrs(rect, { rx: mark.cornerRadius, ry: mark.cornerRadius });
+  }
+  g.appendChild(rect);
+  if (mark.label?.visible) {
+    const label = createSVGElement("text");
+    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;
+    g.appendChild(label);
+  }
+  return g;
+}
+function renderArcMark(mark, index2) {
+  const g = createSVGElement("g");
+  g.setAttribute("data-mark-id", `arc-${index2}`);
+  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,
+    fill: resolveMarkFill(mark.fill, currentGradientMap),
+    stroke: mark.stroke,
+    "stroke-width": mark.strokeWidth
+  });
+  g.appendChild(path);
+  if (mark.label?.visible) {
+    const label = createSVGElement("text");
+    label.setAttribute("class", "oc-mark-label");
+    setAttrs(label, {
+      x: mark.label.x - mark.center.x,
+      y: mark.label.y - mark.center.y
     });
-    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;
-    }
+    applyTextStyle(label, mark.label.style);
+    label.textContent = mark.label.text;
+    g.appendChild(label);
   }
-  parent.appendChild(g);
+  return 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;
+function renderPointMark(mark, index2) {
+  const circle = createSVGElement("circle");
+  circle.setAttribute("data-mark-id", `point-${index2}`);
+  circle.setAttribute("class", "oc-mark oc-mark-point");
+  stampAnimationAttrs(circle, mark, index2);
+  setAttrs(circle, {
+    cx: mark.cx,
+    cy: mark.cy,
+    r: mark.r,
+    fill: resolveMarkFill(mark.fill, currentGradientMap),
+    stroke: mark.stroke,
+    "stroke-width": mark.strokeWidth
+  });
+  if (mark.fillOpacity !== void 0) {
+    circle.setAttribute("fill-opacity", String(mark.fillOpacity));
+  }
+  return circle;
+}
+function renderTextMark(mark, index2) {
   const text = createSVGElement("text");
+  text.setAttribute("data-mark-id", `textMark-${index2}`);
+  text.setAttribute("class", "oc-mark oc-mark-text");
+  stampAnimationAttrs(text, mark, index2);
   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
+    x: mark.x,
+    y: mark.y,
+    "font-size": mark.fontSize,
+    "text-anchor": mark.textAnchor
   });
-  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);
+  text.style.setProperty("fill", mark.fill);
+  if (mark.fontWeight) {
+    text.setAttribute("font-weight", String(mark.fontWeight));
+  }
+  if (mark.fontFamily) {
+    text.setAttribute("font-family", mark.fontFamily);
+  }
+  if (mark.angle) {
+    text.setAttribute("transform", `rotate(${mark.angle}, ${mark.x}, ${mark.y})`);
+  }
+  text.textContent = mark.text;
+  return text;
+}
+function renderRuleMark(mark, index2) {
+  const line = createSVGElement("line");
+  line.setAttribute("data-mark-id", `rule-${index2}`);
+  line.setAttribute("class", "oc-mark oc-mark-rule");
+  stampAnimationAttrs(line, mark, index2);
+  setAttrs(line, {
+    x1: mark.x1,
+    y1: mark.y1,
+    x2: mark.x2,
+    y2: mark.y2,
+    stroke: mark.stroke,
+    "stroke-width": mark.strokeWidth
+  });
+  if (mark.strokeDasharray) {
+    line.setAttribute("stroke-dasharray", mark.strokeDasharray);
+  }
+  if (mark.opacity != null) {
+    line.setAttribute("opacity", String(mark.opacity));
+  }
+  return line;
+}
+function renderTickMark(mark, index2) {
+  const line = createSVGElement("line");
+  line.setAttribute("data-mark-id", `tick-${index2}`);
+  line.setAttribute("class", "oc-mark oc-mark-tick");
+  stampAnimationAttrs(line, mark, index2);
+  const half = mark.length / 2;
+  if (mark.orient === "vertical") {
+    setAttrs(line, {
+      x1: mark.x,
+      y1: mark.y - half,
+      x2: mark.x,
+      y2: mark.y + half,
+      stroke: mark.stroke,
+      "stroke-width": mark.strokeWidth
+    });
+  } else {
+    setAttrs(line, {
+      x1: mark.x - half,
+      y1: mark.y,
+      x2: mark.x + half,
+      y2: mark.y,
+      stroke: mark.stroke,
+      "stroke-width": mark.strokeWidth
+    });
+  }
+  if (mark.opacity != null) {
+    line.setAttribute("opacity", String(mark.opacity));
+  }
+  return line;
+}
+registerMarkRenderer("line", renderLineMark);
+registerMarkRenderer("area", renderAreaMark);
+registerMarkRenderer("rect", renderRectMark);
+registerMarkRenderer("arc", renderArcMark);
+registerMarkRenderer("point", renderPointMark);
+registerMarkRenderer("textMark", renderTextMark);
+registerMarkRenderer("rule", renderRuleMark);
+registerMarkRenderer("tick", renderTickMark);
+function getMarkSeries(mark) {
+  if (mark.type === "line" || mark.type === "area") {
+    return mark.seriesKey;
+  }
+  if (mark.type === "arc") {
+    return mark.aria.label.split(":")[0]?.trim();
+  }
+  if (mark.aria?.label) {
+    const beforeColon = mark.aria.label.split(":")[0]?.trim();
+    if (beforeColon) return beforeColon;
+  }
+  return void 0;
+}
+function renderMarks(parent, layout) {
+  const g = createSVGElement("g");
+  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) 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);
+  }
+  parent.appendChild(g);
 }
+
+// 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}`,
@@ -4354,7 +4328,7 @@ function renderChartSVG(layout, container, opts) {
     fill: layout.theme.colors.background
   });
   svg.appendChild(bg);
-  const clipId = `oc-clip-${Math.random().toString(36).slice(2, 8)}`;
+  const clipId = nextSvgId("oc-clip");
   const defs = createSVGElement("defs");
   const clipPath = createSVGElement("clipPath");
   clipPath.setAttribute("id", clipId);
@@ -4367,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;
 }
@@ -5680,7 +5657,6 @@ function createChart(container, spec, options) {
   let destroyed = false;
   let isDragging = false;
   let pendingRender = false;
-  let resizeTimer = null;
   let isFirstRender = true;
   let cleanupAnimations = null;
   let pendingResize = false;
@@ -6109,10 +6085,6 @@ function createChart(container, spec, options) {
       pendingResize = false;
     }
     cancelAnimations(svgElement);
-    if (resizeTimer !== null) {
-      clearTimeout(resizeTimer);
-      resizeTimer = null;
-    }
     if (cleanupTooltipEvents) {
       cleanupTooltipEvents();
       cleanupTooltipEvents = null;
@@ -6178,11 +6150,7 @@ function createChart(container, spec, options) {
   render();
   if (options?.responsive !== false) {
     disconnectResize = observeResize(container, () => {
-      if (resizeTimer !== null) clearTimeout(resizeTimer);
-      resizeTimer = setTimeout(() => {
-        resizeTimer = null;
-        resize();
-      }, 100);
+      resize();
     });
   }
   return {
@@ -6534,7 +6502,12 @@ function renderCell(cell) {
 import { compileSankey } from "@opendata-ai/openchart-engine";
 
 // src/sankey-renderer.ts
-import { BRAND_FONT_SIZE as BRAND_FONT_SIZE3, BRAND_MIN_WIDTH as BRAND_MIN_WIDTH3, estimateTextWidth as estimateTextWidth2 } from "@opendata-ai/openchart-core";
+import {
+  BRAND_FONT_SIZE as BRAND_FONT_SIZE3,
+  BRAND_MIN_WIDTH as BRAND_MIN_WIDTH3,
+  estimateTextWidth as estimateTextWidth4,
+  wrapText as wrapText2
+} from "@opendata-ai/openchart-core";
 import { clampStaggerDelay as clampStaggerDelay2 } from "@opendata-ai/openchart-engine";
 var SVG_NS3 = "http://www.w3.org/2000/svg";
 var XLINK_NS2 = "http://www.w3.org/1999/xlink";
@@ -6574,39 +6547,6 @@ function stampAnimationAttrs2(el, mark, fallbackIndex, animation) {
   el.setAttribute("data-animation-index", String(idx));
   el.style.setProperty("--oc-mark-index", String(idx));
 }
-function wrapText2(text, fontSize, fontWeight, maxWidth) {
-  if (maxWidth <= 0) return [text];
-  const AVG_CHAR_WIDTH = 0.57;
-  const WEIGHT_FACTORS = {
-    100: 0.9,
-    200: 0.92,
-    300: 0.95,
-    400: 1,
-    500: 1.02,
-    600: 1.05,
-    700: 1.08,
-    800: 1.1,
-    900: 1.12
-  };
-  const weightFactor = WEIGHT_FACTORS[fontWeight] ?? 1;
-  const charWidth = fontSize * AVG_CHAR_WIDTH * weightFactor;
-  const maxChars = Math.floor(maxWidth / charWidth);
-  if (text.length <= maxChars) return [text];
-  const words = text.split(" ");
-  const lines = [];
-  let current = "";
-  for (const word of words) {
-    const candidate = current ? `${current} ${word}` : word;
-    if (candidate.length > maxChars && current) {
-      lines.push(current);
-      current = word;
-    } else {
-      current = candidate;
-    }
-  }
-  if (current) lines.push(current);
-  return lines;
-}
 function renderChromeElement2(parent, element, className, chromeKey) {
   const text = createSVGElement2("text");
   setAttrs2(text, { x: element.x, y: element.y });
@@ -6724,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
@@ -6775,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