@opendata-ai/openchart-vanilla 7.6.0 → 7.7.0

package/dist/chunk-PSMDJEXK.js

@@ -0,0 +1,1680 @@
+// src/svg-ids.ts
+var counter = 0;
+function nextSvgId(prefix) {
+  return `${prefix}-${counter++}`;
+}
+function resetSvgIdCounter() {
+  counter = 0;
+}
+
+// src/renderers/svg-dom.ts
+var SVG_NS = "http://www.w3.org/2000/svg";
+var XLINK_NS = "http://www.w3.org/1999/xlink";
+function createSVGElement(tag) {
+  return document.createElementNS(SVG_NS, tag);
+}
+function setAttrs(el, attrs) {
+  for (const [key, value] of Object.entries(attrs)) {
+    el.setAttribute(key, String(value));
+  }
+}
+function applyTextStyle(el, style) {
+  const inline = el.style;
+  inline.setProperty("fill", style.fill);
+  inline.setProperty("font-size", `${style.fontSize}px`);
+  inline.setProperty("font-weight", String(style.fontWeight));
+  inline.setProperty("font-family", style.fontFamily);
+  if (style.textAnchor) {
+    el.setAttribute("text-anchor", style.textAnchor);
+  }
+  if (style.dominantBaseline) {
+    el.setAttribute("dominant-baseline", style.dominantBaseline);
+  }
+  if (style.fontVariant) {
+    el.setAttribute("font-variant", style.fontVariant);
+  }
+}
+
+// src/gradient-utils.ts
+import { isGradientDef } from "@opendata-ai/openchart-core";
+var SVG_NS2 = "http://www.w3.org/2000/svg";
+function gradientKey(def) {
+  return sortedStringify(def);
+}
+function sortedStringify(value) {
+  if (value === null || value === void 0) return String(value);
+  if (Array.isArray(value)) return `[${value.map(sortedStringify).join(",")}]`;
+  if (typeof value === "object") {
+    const sorted = Object.keys(value).sort().map((k) => `${JSON.stringify(k)}:${sortedStringify(value[k])}`);
+    return `{${sorted.join(",")}}`;
+  }
+  return JSON.stringify(value);
+}
+function createGradientElement(def, id) {
+  if (def.gradient === "linear") {
+    return createLinearGradient(def, id);
+  }
+  return createRadialGradient(def, id);
+}
+function createLinearGradient(def, id) {
+  const el = document.createElementNS(SVG_NS2, "linearGradient");
+  el.setAttribute("id", id);
+  el.setAttribute("gradientUnits", "objectBoundingBox");
+  el.setAttribute("x1", String(def.x1 ?? 0));
+  el.setAttribute("y1", String(def.y1 ?? 0));
+  el.setAttribute("x2", String(def.x2 ?? 0));
+  el.setAttribute("y2", String(def.y2 ?? 1));
+  for (const stop of def.stops) {
+    appendStop(el, stop);
+  }
+  return el;
+}
+function createRadialGradient(def, id) {
+  const el = document.createElementNS(SVG_NS2, "radialGradient");
+  el.setAttribute("id", id);
+  el.setAttribute("gradientUnits", "objectBoundingBox");
+  el.setAttribute("cx", String(def.x2 ?? 0.5));
+  el.setAttribute("cy", String(def.y2 ?? 0.5));
+  el.setAttribute("r", String(def.r2 ?? 0.5));
+  el.setAttribute("fx", String(def.x1 ?? 0.5));
+  el.setAttribute("fy", String(def.y1 ?? 0.5));
+  el.setAttribute("fr", String(def.r1 ?? 0));
+  for (const stop of def.stops) {
+    appendStop(el, stop);
+  }
+  return el;
+}
+function appendStop(parent, stop) {
+  const stopEl = document.createElementNS(SVG_NS2, "stop");
+  stopEl.setAttribute("offset", String(stop.offset));
+  stopEl.setAttribute("stop-color", stop.color);
+  if (stop.opacity !== void 0) {
+    stopEl.setAttribute("stop-opacity", String(stop.opacity));
+  }
+  parent.appendChild(stopEl);
+}
+function buildGradientDefs(marks, defs) {
+  const map = /* @__PURE__ */ new Map();
+  for (const mark of marks) {
+    const fill = mark.fill;
+    if (fill && isGradientDef(fill)) {
+      const key = gradientKey(fill);
+      if (!map.has(key)) {
+        const id = nextSvgId("oc-grad");
+        const el = createGradientElement(fill, id);
+        defs.appendChild(el);
+        map.set(key, id);
+      }
+    }
+  }
+  return map;
+}
+function resolveMarkFill(fill, gradientMap) {
+  if (typeof fill === "string") return fill;
+  const key = gradientKey(fill);
+  const id = gradientMap.get(key);
+  return id ? `url(#${id})` : "#000000";
+}
+
+// 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, index) {
+  const g = createSVGElement("g");
+  g.setAttribute("data-mark-id", `line-${mark.seriesKey ?? index}`);
+  g.setAttribute("class", "oc-mark oc-mark-line");
+  stampAnimationAttrs(g, mark, index);
+  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, index) {
+  const g = createSVGElement("g");
+  g.setAttribute("data-mark-id", `area-${mark.seriesKey ?? index}`);
+  g.setAttribute("class", "oc-mark oc-mark-area");
+  stampAnimationAttrs(g, mark, index);
+  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 _rectPathWithCorners(mark, sides) {
+  const { x, y, width: w, height: h } = mark;
+  const r = Math.max(0, Math.min(mark.cornerRadius ?? 0, w / 2, h / 2));
+  const tl = sides.tl ? r : 0;
+  const tr = sides.tr ? r : 0;
+  const br = sides.br ? r : 0;
+  const bl = sides.bl ? r : 0;
+  return [
+    `M${x + tl},${y}`,
+    `H${x + w - tr}`,
+    tr ? `A${tr},${tr} 0 0 1 ${x + w},${y + tr}` : "",
+    `V${y + h - br}`,
+    br ? `A${br},${br} 0 0 1 ${x + w - br},${y + h}` : "",
+    `H${x + bl}`,
+    bl ? `A${bl},${bl} 0 0 1 ${x},${y + h - bl}` : "",
+    `V${y + tl}`,
+    tl ? `A${tl},${tl} 0 0 1 ${x + tl},${y}` : "",
+    "Z"
+  ].filter(Boolean).join(" ");
+}
+function renderRectMark(mark, index) {
+  const g = createSVGElement("g");
+  g.setAttribute("data-mark-id", `rect-${index}`);
+  g.setAttribute("class", "oc-mark oc-mark-rect");
+  stampAnimationAttrs(g, mark, index);
+  if (currentAnimation?.enabled && mark.orient === "horizontal") {
+    g.setAttribute("data-orient", "horizontal");
+  }
+  const sides = mark.cornerRadiusSides;
+  const partialCorners = !!sides && (!sides.tl || !sides.tr || !sides.br || !sides.bl) && !!mark.cornerRadius;
+  const shapeEl = partialCorners ? createSVGElement("path") : createSVGElement("rect");
+  if (partialCorners) {
+    shapeEl.setAttribute("d", _rectPathWithCorners(mark, sides));
+  } else {
+    setAttrs(shapeEl, {
+      x: mark.x,
+      y: mark.y,
+      width: mark.width,
+      height: mark.height
+    });
+    if (mark.cornerRadius) {
+      setAttrs(shapeEl, { rx: mark.cornerRadius, ry: mark.cornerRadius });
+    }
+  }
+  shapeEl.setAttribute("fill", String(resolveMarkFill(mark.fill, currentGradientMap)));
+  if (mark.stroke) {
+    shapeEl.setAttribute("stroke", mark.stroke);
+  }
+  if (mark.strokeWidth) {
+    shapeEl.setAttribute("stroke-width", String(mark.strokeWidth));
+  }
+  g.appendChild(shapeEl);
+  return g;
+}
+function renderArcMark(mark, index) {
+  const g = createSVGElement("g");
+  g.setAttribute("data-mark-id", `arc-${index}`);
+  g.setAttribute("class", "oc-mark oc-mark-arc");
+  g.setAttribute("transform", `translate(${mark.center.x},${mark.center.y})`);
+  stampAnimationAttrs(g, mark, index);
+  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, index) {
+  const circle = createSVGElement("circle");
+  circle.setAttribute("data-mark-id", `point-${index}`);
+  circle.setAttribute("class", "oc-mark oc-mark-point");
+  stampAnimationAttrs(circle, mark, index);
+  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, index) {
+  const text = createSVGElement("text");
+  text.setAttribute("data-mark-id", `textMark-${index}`);
+  text.setAttribute("class", "oc-mark oc-mark-text");
+  stampAnimationAttrs(text, mark, index);
+  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, index) {
+  const line = createSVGElement("line");
+  line.setAttribute("data-mark-id", `rule-${index}`);
+  line.setAttribute("class", "oc-mark oc-mark-rule");
+  stampAnimationAttrs(line, mark, index);
+  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, index) {
+  const line = createSVGElement("line");
+  line.setAttribute("data-mark-id", `tick-${index}`);
+  line.setAttribute("class", "oc-mark oc-mark-tick");
+  stampAnimationAttrs(line, mark, index);
+  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?.decorative) {
+      el.setAttribute("aria-hidden", "true");
+    } else 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);
+  let labelsGroup;
+  for (let i = 0; i < layout.marks.length; i++) {
+    const mark = layout.marks[i];
+    if (mark.type !== "rect") continue;
+    const rect = mark;
+    if (!rect.label?.visible) continue;
+    if (!labelsGroup) {
+      labelsGroup = createSVGElement("g");
+      labelsGroup.setAttribute("class", "oc-mark-labels");
+    }
+    const label = createSVGElement("text");
+    label.setAttribute("class", "oc-mark-label");
+    setAttrs(label, { x: rect.label.x, y: rect.label.y });
+    applyTextStyle(label, rect.label.style);
+    label.textContent = rect.label.text;
+    if (currentAnimation?.enabled) {
+      const idx = rect.animationIndex ?? i;
+      label.setAttribute("data-animation-index", String(idx));
+      label.style.setProperty(
+        "--oc-mark-index",
+        String(idx)
+      );
+    }
+    labelsGroup.appendChild(label);
+  }
+  return labelsGroup;
+}
+
+// src/svg-renderer.ts
+import { clampStaggerDelay } from "@opendata-ai/openchart-engine";
+
+// 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, index, bgColor) {
+  const g = createSVGElement("g");
+  g.setAttribute("class", `oc-annotation oc-annotation-${annotation.type}`);
+  g.setAttribute("data-annotation-index", String(index));
+  if (annotation.id) {
+    g.setAttribute("data-annotation-id", annotation.id);
+  }
+  if (annotation.rect) {
+    const rect = createSVGElement("rect");
+    rect.setAttribute("class", "oc-annotation-range");
+    rect.setAttribute("pointer-events", "none");
+    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.footnoteIndex != null && annotation.label) {
+    const cx = annotation.label.connector?.endpoint?.x ?? annotation.label.connector?.to.x ?? annotation.label.x;
+    const cy = annotation.label.connector?.endpoint?.y ?? annotation.label.connector?.to.y ?? annotation.label.y;
+    const r = 8;
+    const circle = createSVGElement("circle");
+    circle.setAttribute("class", "oc-annotation-footnote-marker");
+    setAttrs(circle, {
+      cx,
+      cy,
+      r,
+      fill: bgColor ?? "#ffffff",
+      stroke: annotation.label.style.fill ?? "#666",
+      "stroke-width": 1.5
+    });
+    g.appendChild(circle);
+    const num = createSVGElement("text");
+    num.setAttribute("class", "oc-annotation-footnote-number");
+    setAttrs(num, {
+      x: cx,
+      y: cy,
+      "dominant-baseline": "central",
+      "text-anchor": "middle"
+    });
+    applyTextStyle(num, {
+      ...annotation.label.style,
+      fontSize: 9,
+      fontWeight: 600
+    });
+    num.textContent = String(annotation.footnoteIndex);
+    g.appendChild(num);
+    parent.appendChild(g);
+    return;
+  }
+  if (annotation.label?.visible) {
+    if (annotation.label.connector) {
+      const c = annotation.label.connector;
+      if (c.style === "curve") {
+        renderCurvedArrow(g, c.from, c.to, c.stroke);
+      } else if (c.style === "drop-line") {
+        const connector = createSVGElement("line");
+        connector.setAttribute("class", "oc-annotation-connector oc-annotation-drop-line");
+        setAttrs(connector, {
+          x1: c.from.x,
+          y1: c.from.y,
+          x2: c.to.x,
+          y2: c.to.y,
+          stroke: c.stroke,
+          "stroke-width": 1,
+          "stroke-opacity": 0.6,
+          "shape-rendering": "crispEdges"
+        });
+        g.appendChild(connector);
+      } else {
+        const connector = createSVGElement("line");
+        connector.setAttribute("class", "oc-annotation-connector");
+        setAttrs(connector, {
+          x1: c.from.x,
+          y1: c.from.y,
+          x2: c.to.x,
+          y2: c.to.y,
+          stroke: c.stroke,
+          "stroke-width": 1,
+          "stroke-opacity": 0.5
+        });
+        g.appendChild(connector);
+      }
+      if (c.endpoint && c.style !== "curve") {
+        const ring = createSVGElement("circle");
+        ring.setAttribute("class", "oc-annotation-endpoint-ring");
+        setAttrs(ring, {
+          cx: c.endpoint.x,
+          cy: c.endpoint.y,
+          r: 5,
+          fill: bgColor ?? "#ffffff",
+          stroke: c.stroke,
+          "stroke-width": 1.5
+        });
+        g.appendChild(ring);
+        const dot = createSVGElement("circle");
+        dot.setAttribute("class", "oc-annotation-endpoint-dot");
+        setAttrs(dot, {
+          cx: c.endpoint.x,
+          cy: c.endpoint.y,
+          r: 2,
+          fill: c.stroke
+        });
+        g.appendChild(dot);
+      }
+    }
+    if (annotation.dot) {
+      const dot = createSVGElement("circle");
+      dot.setAttribute("class", "oc-annotation-dot");
+      setAttrs(dot, {
+        cx: annotation.dot.x,
+        cy: annotation.dot.y,
+        r: annotation.dot.radius,
+        fill: annotation.dot.fill,
+        stroke: annotation.dot.stroke,
+        "stroke-width": annotation.dot.strokeWidth
+      });
+      g.appendChild(dot);
+    }
+    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) {
+      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 pad = 3;
+      let bgX;
+      let bgY;
+      let bgW;
+      let bgH;
+      if (annotation.label.bounds) {
+        const b = annotation.label.bounds;
+        bgX = b.x - pad;
+        bgY = b.y - pad;
+        bgW = b.width + pad * 2;
+        bgH = b.height + pad * 2;
+      } else {
+        const charWidth = fontSize * 0.55;
+        const maxLineWidth = Math.max(...lines.map((l) => l.length)) * charWidth;
+        const totalHeight = lines.length * lineHeight;
+        bgX = isMultiLine ? annotation.label.x - maxLineWidth / 2 - pad : annotation.label.x - pad;
+        bgY = annotation.label.y - fontSize + (lineHeight - fontSize) / 2 - pad;
+        bgW = maxLineWidth + pad * 2;
+        bgH = totalHeight + pad * 2;
+      }
+      const bgRect = createSVGElement("rect");
+      bgRect.setAttribute("class", "oc-annotation-bg");
+      setAttrs(bgRect, {
+        x: bgX,
+        y: bgY,
+        width: bgW,
+        height: bgH,
+        fill: annotation.label.background,
+        rx: 2
+      });
+      g.appendChild(bgRect);
+    } else if (bgColor && annotation.label.halo !== false) {
+      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 (annotation.subtitle) {
+      const sub = createSVGElement("text");
+      sub.setAttribute("class", "oc-annotation-subtitle");
+      setAttrs(sub, { x: annotation.subtitle.x, y: annotation.subtitle.y });
+      applyTextStyle(sub, annotation.subtitle.style);
+      sub.textContent = annotation.subtitle.text;
+      g.appendChild(sub);
+    }
+  }
+  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 {
+  axisTitleOffset,
+  estimateTextWidth,
+  getAxisTitleOffset,
+  TICK_LABEL_OFFSET,
+  textAscent
+} from "@opendata-ai/openchart-core";
+function appendCompoundLabel(parent, primaryText, subtitle, fontWeight) {
+  const primarySpan = createSVGElement("tspan");
+  primarySpan.setAttribute("font-weight", String(fontWeight));
+  primarySpan.textContent = primaryText;
+  parent.appendChild(primarySpan);
+  const subtitleSpan = createSVGElement("tspan");
+  subtitleSpan.setAttribute("dx", "0.5em");
+  subtitleSpan.textContent = subtitle;
+  subtitleSpan.setAttribute("font-weight", "400");
+  subtitleSpan.setAttribute("fill-opacity", "0.6");
+  parent.appendChild(subtitleSpan);
+}
+function renderAxis(parent, axis, orientation, layout) {
+  const g = createSVGElement("g");
+  const isRight = orientation === "y" && axis.orient === "right";
+  const isInlineY = orientation === "y" && axis.tickPosition === "inline" && !isRight;
+  g.setAttribute(
+    "class",
+    `oc-axis oc-axis-${isRight ? "y2" : orientation}${isInlineY ? " oc-axis-inline" : ""}`
+  );
+  const { area } = layout;
+  if (orientation === "x" && axis.domainLine !== false) {
+    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 xLabelPad = axis.labelPadding ?? layout.theme.spacing.xAxisLabelPadding;
+        const labelY = area.y + area.height + xLabelPad;
+        setAttrs(label, {
+          x: labelX,
+          y: labelY,
+          "text-anchor": axis.tickAngle < 0 ? "end" : "start",
+          "dominant-baseline": "central",
+          transform: `rotate(${axis.tickAngle}, ${labelX}, ${labelY})`
+        });
+      } else {
+        const xLabelPad = axis.labelPadding ?? layout.theme.spacing.xAxisLabelPadding;
+        setAttrs(label, {
+          x: tick.position,
+          y: area.y + area.height + xLabelPad + textAscent(axis.tickLabelStyle.fontSize),
+          "text-anchor": "middle"
+        });
+      }
+      applyTextStyle(label, axis.tickLabelStyle);
+      label.textContent = tick.label;
+      g.appendChild(label);
+    } else if (isInlineY) {
+      const label = createSVGElement("text");
+      label.setAttribute("class", "oc-axis-tick oc-axis-tick-inline");
+      setAttrs(label, {
+        x: area.x,
+        y: tick.position - 6,
+        "text-anchor": "start"
+      });
+      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: isRight ? area.x + area.width + TICK_LABEL_OFFSET : area.x - TICK_LABEL_OFFSET,
+        y: tick.position,
+        "text-anchor": isRight ? "start" : "end",
+        "dominant-baseline": "central"
+      });
+      applyTextStyle(label, axis.tickLabelStyle);
+      if (!isRight) {
+        const availableWidth = area.x - TICK_LABEL_OFFSET;
+        const fontSize = axis.tickLabelStyle.fontSize;
+        const fontWeight = axis.tickLabelStyle.fontWeight;
+        if (tick.subtitle) {
+          const gapWidth = fontSize * 0.5;
+          const subtitleWidth = estimateTextWidth(tick.subtitle, fontSize, fontWeight);
+          const primaryWidth = estimateTextWidth(tick.label, fontSize, fontWeight);
+          const totalWidth = primaryWidth + gapWidth + subtitleWidth;
+          if (totalWidth > availableWidth && availableWidth > 20) {
+            const ellipsis = "\u2026";
+            const ellipsisWidth = estimateTextWidth(ellipsis, fontSize, fontWeight);
+            const budgetForPrimary = availableWidth - gapWidth - subtitleWidth - ellipsisWidth;
+            let primaryText = tick.label;
+            if (budgetForPrimary > 0) {
+              let lo = 0;
+              let hi = tick.label.length;
+              while (lo < hi) {
+                const mid = lo + hi + 1 >>> 1;
+                const candidate = tick.label.slice(0, mid);
+                if (estimateTextWidth(candidate, fontSize, fontWeight) <= budgetForPrimary) {
+                  lo = mid;
+                } else {
+                  hi = mid - 1;
+                }
+              }
+              primaryText = lo > 0 ? tick.label.slice(0, lo).trimEnd() + ellipsis : ellipsis;
+            } else {
+              primaryText = ellipsis;
+            }
+            appendCompoundLabel(label, primaryText, tick.subtitle, fontWeight);
+            const titleEl = createSVGElement("title");
+            titleEl.textContent = `${tick.label}  ${tick.subtitle}`;
+            label.appendChild(titleEl);
+          } else {
+            appendCompoundLabel(label, tick.label, tick.subtitle, fontWeight);
+          }
+        } else {
+          const fullWidth = estimateTextWidth(tick.label, fontSize, fontWeight);
+          if (fullWidth > availableWidth && availableWidth > 20) {
+            const ellipsis = "\u2026";
+            const ellipsisWidth = estimateTextWidth(ellipsis, fontSize, fontWeight);
+            let lo = 0;
+            let hi = tick.label.length;
+            while (lo < hi) {
+              const mid = lo + hi + 1 >>> 1;
+              const candidate = tick.label.slice(0, mid);
+              if (estimateTextWidth(candidate, fontSize, fontWeight) + ellipsisWidth <= availableWidth) {
+                lo = mid;
+              } else {
+                hi = mid - 1;
+              }
+            }
+            label.textContent = lo > 0 ? tick.label.slice(0, lo).trimEnd() + ellipsis : ellipsis;
+            const titleEl = createSVGElement("title");
+            titleEl.textContent = tick.label;
+            label.appendChild(titleEl);
+          } else {
+            label.textContent = tick.label;
+          }
+        }
+      } else {
+        label.textContent = tick.label;
+      }
+      g.appendChild(label);
+    }
+  }
+  if (!isRight) {
+    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,
+          y2: gridline.position,
+          stroke: layout.theme.colors.gridline,
+          "stroke-width": 1,
+          "stroke-opacity": 0.6
+        });
+      } else {
+        setAttrs(gl, {
+          x1: gridline.position,
+          y1: area.y,
+          x2: gridline.position,
+          y2: area.y + area.height,
+          stroke: layout.theme.colors.gridline,
+          "stroke-width": 1,
+          "stroke-opacity": 0.6
+        });
+      }
+      g.appendChild(gl);
+    }
+  }
+  if (axis.label && axis.labelStyle) {
+    const axisLabel = createSVGElement("text");
+    axisLabel.setAttribute("class", "oc-axis-title");
+    applyTextStyle(axisLabel, axis.labelStyle);
+    axisLabel.textContent = axis.label;
+    const tp = axis.titlePosition;
+    if (tp) {
+      const attrs = {
+        x: tp.x,
+        y: tp.y,
+        "text-anchor": "middle"
+      };
+      if (tp.angle) {
+        attrs.transform = `rotate(${tp.angle}, ${tp.x}, ${tp.y})`;
+      }
+      setAttrs(axisLabel, attrs);
+    } else if (orientation === "x") {
+      let titleY = area.y + area.height + 35;
+      if (axis.tickAngle && Math.abs(axis.tickAngle) > 10) {
+        const angleRad = Math.abs(axis.tickAngle) * (Math.PI / 180);
+        let maxLabelWidth = 40;
+        for (const tick of axis.ticks) {
+          const w = estimateTextWidth(
+            tick.label,
+            axis.tickLabelStyle.fontSize,
+            axis.tickLabelStyle.fontWeight
+          );
+          if (w > maxLabelWidth) maxLabelWidth = w;
+        }
+        const rotatedHeight = Math.min(maxLabelWidth * Math.sin(angleRad) + 6, 120);
+        titleY = area.y + area.height + rotatedHeight + 14;
+      }
+      setAttrs(axisLabel, {
+        x: area.x + area.width / 2,
+        y: titleY,
+        "text-anchor": "middle"
+      });
+    } else if (isRight) {
+      const titleOffset = getAxisTitleOffset(layout.dimensions.width);
+      const titleX = area.x + area.width + titleOffset;
+      setAttrs(axisLabel, {
+        x: titleX,
+        y: area.y + area.height / 2,
+        "text-anchor": "middle",
+        transform: `rotate(90, ${titleX}, ${area.y + area.height / 2})`
+      });
+    } else {
+      const maxTickLabelWidth = axis.ticks.reduce((max, t) => {
+        const w = estimateTextWidth(
+          t.label,
+          axis.tickLabelStyle.fontSize,
+          axis.tickLabelStyle.fontWeight ?? 400
+        );
+        return Math.max(max, w);
+      }, 0);
+      const titleOffset = axisTitleOffset(
+        maxTickLabelWidth,
+        axis.labelStyle.fontSize,
+        layout.dimensions.width
+      );
+      setAttrs(axisLabel, {
+        x: area.x - titleOffset,
+        y: area.y + area.height / 2,
+        "text-anchor": "middle",
+        transform: `rotate(-90, ${area.x - titleOffset}, ${area.y + area.height / 2})`
+      });
+    }
+    g.appendChild(axisLabel);
+  }
+  parent.appendChild(g);
+}
+function renderAxes(parent, layout) {
+  if (layout.axes.x) {
+    renderAxis(parent, layout.axes.x, "x", layout);
+  }
+  if (layout.axes.y) {
+    renderAxis(parent, layout.axes.y, "y", layout);
+  }
+  if (layout.axes.y2) {
+    renderAxis(parent, layout.axes.y2, "y", layout);
+  }
+}
+
+// src/renderers/brand.ts
+import { BRAND_FONT_SIZE, BRAND_MIN_WIDTH, textAscent as textAscent2 } from "@opendata-ai/openchart-core";
+var BRAND_URL = "https://tryopendata.ai";
+function renderBrand(parent, layout) {
+  if (layout.dimensions.width < BRAND_MIN_WIDTH) 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 bottomOffset = chrome.bottomAnchorY ?? layout.area.y + layout.area.height;
+  const firstBottom = chrome.source ?? chrome.byline ?? chrome.footer;
+  const { legend } = layout;
+  const bottomLegendOffset = legend.position === "bottom" && legend.bounds.height > 0 ? legend.bounds.height + 8 : 0;
+  const chromeY = firstBottom ? bottomOffset + firstBottom.y : bottomOffset + layout.theme.spacing.chartToFooter + bottomLegendOffset;
+  const a = createSVGElement("a");
+  a.setAttribute("href", BRAND_URL);
+  a.setAttributeNS(XLINK_NS, "xlink:href", BRAND_URL);
+  a.setAttribute("target", "_blank");
+  a.setAttribute("rel", "noopener");
+  a.setAttribute("class", "oc-chrome-ref");
+  const BRAND_LARGE = 16;
+  const text = createSVGElement("text");
+  setAttrs(text, {
+    x: rightEdge,
+    y: chromeY + textAscent2(BRAND_LARGE),
+    "font-family": layout.theme.fonts.family,
+    "font-size": BRAND_FONT_SIZE,
+    "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);
+  a.appendChild(text);
+  parent.appendChild(a);
+}
+
+// src/renderers/chrome.ts
+import { estimateTextWidth as estimateTextWidth2, textAscent as textAscent3, wrapText } from "@opendata-ai/openchart-core";
+function renderChromeElement(parent, element, className, chromeKey, measureText, uppercase = false) {
+  const text = createSVGElement("text");
+  setAttrs(text, { x: element.x, y: element.y + textAscent3(element.style.fontSize) });
+  applyTextStyle(text, element.style);
+  text.setAttribute("class", className);
+  text.setAttribute("data-chrome-key", chromeKey);
+  const renderedText = uppercase ? element.text.toUpperCase() : element.text;
+  const lines = wrapText(
+    renderedText,
+    element.style.fontSize,
+    element.style.fontWeight,
+    element.maxWidth,
+    measureText
+  );
+  if (lines.length === 1) {
+    text.textContent = renderedText;
+  } 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.eyebrow) {
+    const eyebrow = chrome.eyebrow;
+    const dotR = 3;
+    const dotGap = 8;
+    const dotX = eyebrow.x + dotR;
+    const dotY = eyebrow.y + eyebrow.style.fontSize * 0.42;
+    const dot = createSVGElement("circle");
+    dot.setAttribute("class", "oc-eyebrow-dot");
+    setAttrs(dot, { cx: dotX, cy: dotY, r: dotR });
+    dot.setAttribute("fill", eyebrow.style.fill ?? "currentColor");
+    g.appendChild(dot);
+    const shifted = {
+      ...eyebrow,
+      x: eyebrow.x + dotR * 2 + dotGap
+    };
+    renderChromeElement(g, shifted, "oc-eyebrow", "eyebrow", measureText, true);
+  }
+  if (chrome.title) {
+    renderChromeElement(g, chrome.title, "oc-title", "title", measureText);
+  }
+  if (chrome.subtitle) {
+    renderChromeElement(g, chrome.subtitle, "oc-subtitle", "subtitle", measureText);
+  }
+  const bottomOffset = layout.chrome.bottomAnchorY ?? layout.area.y + layout.area.height;
+  let footnoteBandHeight = 0;
+  if (chrome.footnotes && chrome.footnotes.length > 0) {
+    const fontSize = layout.theme.fonts.sizes.small;
+    const pad = layout.theme.spacing.padding;
+    const lineHeight = fontSize * 1.3;
+    const style = {
+      fontFamily: layout.theme.fonts.family,
+      fontSize,
+      fontWeight: layout.theme.fonts.weights.normal,
+      fill: layout.theme.chrome.source.color,
+      lineHeight: 1.3,
+      textAnchor: "start"
+    };
+    for (let i = 0; i < chrome.footnotes.length; i++) {
+      const f = chrome.footnotes[i];
+      const y = bottomOffset + layout.theme.spacing.chartToFooter + textAscent3(fontSize) + i * lineHeight;
+      const el = createSVGElement("text");
+      el.setAttribute("class", "oc-footnotes");
+      setAttrs(el, { x: pad, y });
+      applyTextStyle(el, style);
+      el.textContent = `${f.index}. ${f.text}`;
+      g.appendChild(el);
+    }
+    footnoteBandHeight = chrome.footnotes.length * lineHeight + 4;
+  }
+  if (chrome.source) {
+    renderChromeElement(
+      g,
+      { ...chrome.source, y: bottomOffset + chrome.source.y + footnoteBandHeight },
+      "oc-source",
+      "source",
+      measureText
+    );
+  }
+  if (chrome.byline) {
+    renderChromeElement(
+      g,
+      { ...chrome.byline, y: bottomOffset + chrome.byline.y + footnoteBandHeight },
+      "oc-byline",
+      "byline",
+      measureText
+    );
+  }
+  if (chrome.footer) {
+    renderChromeElement(
+      g,
+      { ...chrome.footer, y: bottomOffset + chrome.footer.y + footnoteBandHeight },
+      "oc-footer",
+      "footer",
+      measureText
+    );
+  }
+  if (chrome.brand) {
+    const brandY = bottomOffset + chrome.brand.y + footnoteBandHeight;
+    renderChromeElement(g, { ...chrome.brand, y: brandY }, "oc-brand", "brand", measureText);
+    const textWidth = estimateTextWidth2(
+      chrome.brand.text,
+      chrome.brand.style.fontSize,
+      chrome.brand.style.fontWeight
+    );
+    const dotX = chrome.brand.x - textWidth - 12;
+    const dotY = brandY + chrome.brand.style.fontSize / 2;
+    const dot = createSVGElement("circle");
+    dot.setAttribute("class", "oc-brand-dot");
+    setAttrs(dot, { cx: dotX, cy: dotY, r: 3 });
+    g.appendChild(dot);
+  }
+  parent.appendChild(g);
+}
+
+// src/renderers/endpoint-labels.ts
+var LEADER_STROKE_WIDTH = 1;
+var LEADER_OPACITY = 0.45;
+function renderColumn(root, entries, bounds, ep, leaderAnchorX, side) {
+  const labelFontSize = ep.labelStyle.fontSize ?? 11;
+  const labelLineHeight = labelFontSize * (ep.labelStyle.lineHeight ?? 1.25);
+  const valueFontSize = ep.valueStyle.fontSize ?? 11;
+  const chipX = bounds.x;
+  const chipWidth = ep.swatchSize;
+  const textX = chipX + chipWidth + ep.gap;
+  for (let i = 0; i < entries.length; i++) {
+    const entry = entries[i];
+    const entryG = createSVGElement("g");
+    entryG.setAttribute("class", "oc-endpoint-label-entry");
+    entryG.setAttribute("role", "listitem");
+    entryG.setAttribute("data-endpoint-index", String(i));
+    entryG.setAttribute("data-endpoint-key", entry.seriesKey);
+    entryG.setAttribute("data-endpoint-side", side);
+    entryG.setAttribute("aria-label", `${entry.seriesKey}: ${entry.value}`);
+    if (entry.showLeader) {
+      const leader = createSVGElement("line");
+      leader.setAttribute("class", "oc-endpoint-leader");
+      setAttrs(leader, {
+        x1: chipX,
+        y1: entry.labelY + labelFontSize / 2,
+        x2: leaderAnchorX,
+        y2: entry.dataY,
+        stroke: entry.color,
+        "stroke-width": LEADER_STROKE_WIDTH,
+        "stroke-opacity": LEADER_OPACITY
+      });
+      entryG.appendChild(leader);
+    }
+    const rowY = entry.labelY + labelFontSize / 2;
+    const line = createSVGElement("line");
+    line.setAttribute("class", "oc-endpoint-swatch-line");
+    setAttrs(line, {
+      x1: chipX,
+      y1: rowY,
+      x2: chipX + chipWidth,
+      y2: rowY,
+      stroke: entry.color,
+      "stroke-width": 2,
+      "stroke-linecap": "round"
+    });
+    entryG.appendChild(line);
+    const label = createSVGElement("text");
+    label.setAttribute("class", "oc-endpoint-label");
+    setAttrs(label, { x: textX, y: entry.labelY + labelFontSize });
+    applyTextStyle(label, ep.labelStyle);
+    label.style.setProperty("fill", entry.color);
+    if (entry.labelLines.length <= 1) {
+      label.textContent = entry.labelLines[0] ?? entry.seriesKey;
+    } else {
+      for (let li = 0; li < entry.labelLines.length; li++) {
+        const tspan = createSVGElement("tspan");
+        setAttrs(tspan, { x: textX, dy: li === 0 ? 0 : labelLineHeight });
+        tspan.textContent = entry.labelLines[li];
+        label.appendChild(tspan);
+      }
+    }
+    entryG.appendChild(label);
+    const lineCount = Math.max(entry.labelLines.length, 1);
+    const valueY = entry.labelY + labelFontSize + (lineCount - 1) * labelLineHeight + ep.valueGap + valueFontSize;
+    const value = createSVGElement("text");
+    value.setAttribute("class", "oc-endpoint-value");
+    setAttrs(value, { x: textX, y: valueY });
+    applyTextStyle(value, ep.valueStyle);
+    value.textContent = entry.value;
+    entryG.appendChild(value);
+    if (entry.marker) {
+      const marker = createSVGElement("circle");
+      marker.setAttribute("class", "oc-endpoint-marker");
+      setAttrs(marker, {
+        cx: entry.marker.x,
+        cy: entry.marker.y,
+        r: entry.marker.radius,
+        fill: entry.marker.fill,
+        stroke: entry.marker.stroke,
+        "stroke-width": entry.marker.strokeWidth
+      });
+      entryG.appendChild(marker);
+    }
+    root.appendChild(entryG);
+  }
+}
+function renderEndpointLabels(parent, layout) {
+  const ep = layout.endpointLabels;
+  if (!ep || ep.entries.length === 0) return;
+  const chartArea = layout.area;
+  const root = createSVGElement("g");
+  root.setAttribute("class", "oc-endpoint-labels");
+  root.setAttribute("role", "list");
+  root.setAttribute("aria-label", "Endpoint labels");
+  const chartRightX = chartArea.x + chartArea.width;
+  renderColumn(root, ep.entries, ep.bounds, ep, chartRightX, "trailing");
+  if (ep.leading && ep.leading.length > 0 && ep.leadingBounds) {
+    const chartLeftX = chartArea.x;
+    renderColumn(root, ep.leading, ep.leadingBounds, ep, chartLeftX, "leading");
+  }
+  parent.appendChild(root);
+}
+
+// src/renderers/legend.ts
+import { estimateTextWidth as estimateTextWidth3 } from "@opendata-ai/openchart-core";
+function isCategorical(legend) {
+  return !legend.type || legend.type === "categorical";
+}
+function renderLegend(parent, legend) {
+  if (!isCategorical(legend) || 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";
+  const positions = "entryPositions" in legend ? legend.entryPositions : void 0;
+  let offsetX = legend.bounds.x;
+  let offsetY = legend.bounds.y;
+  for (let i = 0; i < legend.entries.length; i++) {
+    const entry = legend.entries[i];
+    const pos = positions?.[i];
+    if (pos) {
+      offsetX = pos.x;
+      offsetY = pos.y;
+    } else 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");
+      }
+    }
+    const midX = offsetX + legend.swatchSize / 2;
+    const midY = offsetY + legend.swatchSize / 2;
+    if (entry.shape === "circle") {
+      const circle = createSVGElement("circle");
+      setAttrs(circle, {
+        cx: midX,
+        cy: midY,
+        r: legend.swatchSize / 2,
+        fill: entry.color
+      });
+      entryG.appendChild(circle);
+    } else if (entry.shape === "line") {
+      const lineWidth = legend.swatchSize;
+      const line = createSVGElement("line");
+      line.setAttribute("class", "oc-legend-swatch-line");
+      setAttrs(line, {
+        x1: offsetX,
+        y1: midY,
+        x2: offsetX + lineWidth,
+        y2: midY,
+        stroke: entry.color,
+        "stroke-width": 2,
+        "stroke-linecap": "round"
+      });
+      entryG.appendChild(line);
+    } else {
+      const rectSize = Math.round(legend.swatchSize * 0.6);
+      const rect = createSVGElement("rect");
+      rect.setAttribute("class", "oc-legend-swatch-rect");
+      setAttrs(rect, {
+        x: offsetX + (legend.swatchSize - rectSize) / 2,
+        y: midY - rectSize / 2,
+        width: rectSize,
+        height: rectSize,
+        rx: 2,
+        ry: 2,
+        fill: entry.color
+      });
+      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 (!pos) {
+      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 += "rowHeight" in legend && legend.rowHeight ? legend.rowHeight : legend.swatchSize + legend.entryGap;
+      }
+    }
+  }
+  parent.appendChild(g);
+}
+
+// src/renderers/metrics.ts
+var DELTA_SIZE_RATIO = 12 / 22;
+function renderMetrics(parent, layout) {
+  const bar = layout.metrics;
+  if (!bar || bar.cells.length === 0) return;
+  const labelSize = layout.theme.fonts.sizes.metricLabel;
+  const valueSize = layout.theme.fonts.sizes.metricValue;
+  const deltaSize = Math.round(valueSize * DELTA_SIZE_RATIO);
+  const g = createSVGElement("g");
+  g.setAttribute("class", "oc-metrics");
+  for (const cell of bar.cells) {
+    const label = createSVGElement("text");
+    label.setAttribute("class", "oc-metric-label");
+    setAttrs(label, { x: cell.x, y: cell.labelY, "font-size": labelSize });
+    label.textContent = cell.metric.label.toUpperCase();
+    g.appendChild(label);
+    const value = createSVGElement("text");
+    value.setAttribute("class", "oc-metric-value");
+    setAttrs(value, { x: cell.x, y: cell.valueY, "font-size": valueSize });
+    value.textContent = cell.metric.value;
+    if (cell.metric.delta) {
+      const delta = createSVGElement("tspan");
+      const tone = cell.metric.deltaTone ?? "up";
+      delta.setAttribute("class", tone === "down" ? "oc-metric-delta-down" : "oc-metric-delta-up");
+      delta.setAttribute("dx", "8");
+      delta.setAttribute("font-size", String(deltaSize));
+      delta.textContent = cell.metric.delta;
+      value.appendChild(delta);
+    }
+    if (cell.metric.secondary) {
+      const secondary = createSVGElement("tspan");
+      secondary.setAttribute("class", "oc-metric-secondary");
+      secondary.setAttribute("dx", "6");
+      secondary.setAttribute("font-size", String(deltaSize));
+      secondary.textContent = cell.metric.secondary;
+      value.appendChild(secondary);
+    }
+    g.appendChild(value);
+  }
+  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;
+  const svg = createSVGElement("svg");
+  setAttrs(svg, {
+    viewBox: `0 0 ${width} ${height}`,
+    xmlns: SVG_NS,
+    // The SVG spec default is overflow:"hidden", which clips anything a hair
+    // outside the viewBox. We now position all text on the alphabetic/central
+    // baseline (dominant-baseline:hanging was dropped because WebKit computed
+    // it from different metrics), but WebKit/iOS still reports getBBox extents
+    // with a few pixels of slack around tspans, so text touching an edge can
+    // still get clipped. overflow:visible avoids that. Chart marks are already
+    // constrained by a clipPath, so nothing bleeds out.
+    overflow: "visible",
+    // Hint browsers to enable sub-pixel font hinting and kerning for chart text.
+    "text-rendering": "optimizeLegibility"
+  });
+  svg.style.height = `${height}px`;
+  svg.setAttribute("role", layout.a11y.role);
+  svg.setAttribute("aria-label", layout.a11y.altText);
+  if (layout.display === "sparkline") {
+    svg.setAttribute("data-display", "sparkline");
+  }
+  const classes = opts?.animate ? "oc-chart oc-animate" : "oc-chart";
+  svg.setAttribute("class", classes);
+  if (animation?.enabled) {
+    const markCount = layout.marks.length;
+    const stagger = clampStaggerDelay(animation.staggerDelay, markCount);
+    svg.style.setProperty("--oc-animation-duration", `${animation.duration}ms`);
+    svg.style.setProperty("--oc-animation-stagger", `${stagger}ms`);
+    svg.style.setProperty("--oc-annotation-delay", `${animation.annotationDelay}ms`);
+    const easeVar = EASE_VAR_MAP[animation.ease] || EASE_VAR_MAP.smooth;
+    svg.style.setProperty("--oc-animation-ease", easeVar);
+    let maxSegments = 0;
+    for (const m of layout.marks) {
+      if (m.type === "rect") {
+        const pos = m.stackPos;
+        if (pos !== void 0 && pos + 1 > maxSegments) {
+          maxSegments = pos + 1;
+        }
+      }
+    }
+    if (maxSegments > 0) {
+      const segDuration = Math.round(animation.duration / maxSegments);
+      svg.style.setProperty("--oc-stack-segment-duration", `${segDuration}ms`);
+    }
+  }
+  if (layout.display !== "sparkline") {
+    const bg = createSVGElement("rect");
+    setAttrs(bg, {
+      x: 0,
+      y: 0,
+      width,
+      height,
+      fill: layout.theme.colors.background
+    });
+    svg.appendChild(bg);
+  }
+  const clipId = nextSvgId("oc-clip");
+  const defs = createSVGElement("defs");
+  const clipPath = createSVGElement("clipPath");
+  clipPath.setAttribute("id", clipId);
+  const maxPointR = layout.marks.reduce(
+    (max, m) => m.type === "point" && m.r ? Math.max(max, m.r) : max,
+    0
+  );
+  const clipPad = Math.max(maxPointR, 2);
+  const clipRect = createSVGElement("rect");
+  setAttrs(clipRect, {
+    x: 0,
+    y: layout.area.y - clipPad,
+    width,
+    height: layout.area.height + clipPad * 2
+  });
+  clipPath.appendChild(clipRect);
+  defs.appendChild(clipPath);
+  const gradientMap = buildGradientDefs(layout.marks, defs);
+  svg.appendChild(defs);
+  setMarkRenderState({ animation, gradientMap });
+  try {
+    if (layout.facet) {
+      renderFacetedPanels(svg, layout, layout.facet.panels, defs);
+    } else {
+      renderAxes(svg, layout);
+      const clippedGroup = createSVGElement("g");
+      clippedGroup.setAttribute("clip-path", `url(#${clipId})`);
+      const markLabelsOverlay = renderMarks(clippedGroup, layout);
+      const hasLineOrAreaWithDataPoints = layout.marks.some(
+        (m) => (m.type === "line" || m.type === "area") && m.dataPoints && m.dataPoints.length > 0
+      );
+      if (hasLineOrAreaWithDataPoints) {
+        const pointEls = clippedGroup.querySelectorAll("circle.oc-mark-point");
+        for (const el of pointEls) {
+          el.setAttribute("pointer-events", "none");
+        }
+        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);
+        if (opts?.crosshair) {
+          const crosshairLine = createSVGElement("line");
+          crosshairLine.setAttribute("data-crosshair", "true");
+          crosshairLine.setAttribute("class", "oc-crosshair");
+          setAttrs(crosshairLine, {
+            x1: 0,
+            y1: layout.area.y,
+            x2: 0,
+            y2: layout.area.y + layout.area.height,
+            stroke: layout.theme.colors.axis,
+            "stroke-opacity": "0.4",
+            "stroke-dasharray": "3,3",
+            "stroke-width": "1",
+            "pointer-events": "none"
+          });
+          crosshairLine.style.display = "none";
+          clippedGroup.appendChild(crosshairLine);
+        }
+        const dotsGroup = createSVGElement("g");
+        dotsGroup.setAttribute("data-snap-dots", "true");
+        dotsGroup.setAttribute("class", "oc-snap-dots");
+        dotsGroup.setAttribute("pointer-events", "none");
+        clippedGroup.appendChild(dotsGroup);
+      }
+      svg.appendChild(clippedGroup);
+      if (markLabelsOverlay) {
+        svg.appendChild(markLabelsOverlay);
+      }
+      renderAnnotations(svg, layout);
+      renderEndpointLabels(svg, layout);
+      const epEntries = layout.endpointLabels?.entries ?? [];
+      if (epEntries.length > 0) {
+        const pointEls = clippedGroup.querySelectorAll("circle.oc-mark-point");
+        for (const entry of epEntries) {
+          if (!entry.marker) continue;
+          const mx = entry.marker.dataX;
+          const my = entry.marker.y;
+          for (const el of pointEls) {
+            const cx = Number(el.getAttribute("cx"));
+            const cy = Number(el.getAttribute("cy"));
+            if (Math.abs(cx - mx) < 0.5 && Math.abs(cy - my) < 0.5) {
+              el.setAttribute("opacity", "0");
+            }
+          }
+        }
+      }
+    }
+    renderLegend(svg, layout.legend);
+    renderChrome(svg, layout);
+    renderMetrics(svg, layout);
+    if (layout.watermark && !layout.chrome.brand) {
+      renderBrand(svg, layout);
+    }
+  } finally {
+    resetMarkRenderState();
+  }
+  container.appendChild(svg);
+  return svg;
+}
+function renderFacetedPanels(svg, layout, panels, defs) {
+  for (const panel of panels) {
+    const g = createSVGElement("g");
+    g.setAttribute("class", "oc-facet-panel");
+    g.setAttribute("data-facet", panel.key);
+    const bg = createSVGElement("rect");
+    setAttrs(bg, {
+      x: panel.area.x,
+      y: panel.header.y - panel.header.fontSize * 0.6,
+      width: panel.area.width,
+      height: panel.area.height + panel.header.fontSize + 4,
+      rx: 3,
+      fill: layout.theme.isDark ? "rgba(255,255,255,0.03)" : "rgba(0,0,0,0.02)"
+    });
+    g.appendChild(bg);
+    const headerText = createSVGElement("text");
+    setAttrs(headerText, {
+      x: panel.header.x,
+      y: panel.header.y,
+      "text-anchor": "middle",
+      "font-family": layout.theme.fonts.family,
+      "font-size": panel.header.fontSize,
+      "font-weight": panel.header.fontWeight,
+      fill: layout.theme.colors.text
+    });
+    headerText.textContent = panel.header.text;
+    g.appendChild(headerText);
+    const panelLayout = {
+      ...layout,
+      area: panel.area,
+      axes: panel.axes,
+      marks: panel.marks,
+      annotations: panel.annotations
+    };
+    renderAxes(g, panelLayout);
+    const panelClipId = nextSvgId("oc-facet-clip");
+    const clipPath = createSVGElement("clipPath");
+    clipPath.setAttribute("id", panelClipId);
+    const clipRect = createSVGElement("rect");
+    setAttrs(clipRect, {
+      x: panel.area.x,
+      y: panel.area.y,
+      width: panel.area.width,
+      height: panel.area.height
+    });
+    clipPath.appendChild(clipRect);
+    defs.appendChild(clipPath);
+    const clippedGroup = createSVGElement("g");
+    clippedGroup.setAttribute("clip-path", `url(#${panelClipId})`);
+    const panelLabelsOverlay = renderMarks(clippedGroup, panelLayout);
+    g.appendChild(clippedGroup);
+    if (panelLabelsOverlay) {
+      g.appendChild(panelLabelsOverlay);
+    }
+    renderAnnotations(g, panelLayout);
+    svg.appendChild(g);
+  }
+}
+
+export {
+  resetSvgIdCounter,
+  SVG_NS,
+  renderLegend,
+  registerMarkRenderer,
+  renderChartSVG
+};
+//# sourceMappingURL=chunk-PSMDJEXK.js.map