@opendata-ai/openchart-vanilla 7.6.0 → 7.7.0

package/dist/index.js

@@ -1,3 +1,9 @@
+import {
+  registerMarkRenderer,
+  renderChartSVG,
+  renderLegend
+} from "./chunk-PSMDJEXK.js";
+
 // src/barlist-mount.ts
 import { compileBarList } from "@opendata-ai/openchart-engine";
 
@@ -3364,7 +3370,7 @@ function createGraph(container, spec, options) {
     }
     chromeEl = document.createElement("div");
     chromeEl.className = "oc-graph-chrome";
-    renderChrome5();
+    renderChrome4();
     wrapper.appendChild(chromeEl);
     canvas = document.createElement("canvas");
     canvas.className = "oc-graph-canvas";
@@ -3384,7 +3390,7 @@ function createGraph(container, spec, options) {
     renderer = new GraphCanvasRenderer(canvas);
     renderer.resize(width, canvasHeight);
   }
-  function renderChrome5() {
+  function renderChrome4() {
     if (!chromeEl) return;
     let html = "";
     if (compilation.chrome.title) {
@@ -3698,7 +3704,7 @@ function createGraph(container, spec, options) {
     compilation = compile();
     adjacencyMap = buildAdjacencyMap(compilation.edges);
     buildDataMaps();
-    renderChrome5();
+    renderChrome4();
     renderLegend3();
     initSimulation();
     initInteraction();
@@ -3733,7 +3739,7 @@ function createGraph(container, spec, options) {
       };
     });
     spatialIndex.rebuild(positionedNodes);
-    renderChrome5();
+    renderChrome4();
     renderLegend3();
     needsRender = true;
     scheduleRender();
@@ -3830,7 +3836,7 @@ function escapeHtml(str) {
 }
 
 // src/mount.ts
-import { isLayerSpec } from "@opendata-ai/openchart-core";
+import { isGraphSpec, isLayerSpec } from "@opendata-ai/openchart-core";
 import { compileChart, compileLayer } from "@opendata-ai/openchart-engine";
 
 // src/interactions/chart-events.ts
@@ -4329,7 +4335,7 @@ function wireAnnotationDrag(svg, specAnnotations, onAnnotationEdit, onEdit, setD
   };
 }
 function wireConnectorEndpointDrag(svg, specAnnotations, onEdit, setDragging) {
-  const SVG_NS6 = "http://www.w3.org/2000/svg";
+  const SVG_NS4 = "http://www.w3.org/2000/svg";
   const cleanups = [];
   const annotationGroups = svg.querySelectorAll(".oc-annotation-text");
   for (const el of annotationGroups) {
@@ -4368,7 +4374,7 @@ function wireConnectorEndpointDrag(svg, specAnnotations, onEdit, setDragging) {
     const createdHandles = [];
     for (const ep of endpoints) {
       if (!Number.isFinite(ep.cx) || !Number.isFinite(ep.cy)) continue;
-      const handleEl = document.createElementNS(SVG_NS6, "circle");
+      const handleEl = document.createElementNS(SVG_NS4, "circle");
       handleEl.setAttribute("class", "oc-connector-handle");
       handleEl.setAttribute("data-endpoint", ep.name);
       handleEl.setAttribute("cx", String(ep.cx));
@@ -4983,1702 +4989,194 @@ function wireTooltipEvents(svg, tooltipDescriptors, tooltipManager) {
   };
 }
 
-// src/svg-renderer.ts
-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_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/text-edit-overlay.ts
+function getScale(svg) {
+  const viewBox = svg.viewBox?.baseVal;
+  const svgRect = svg.getBoundingClientRect();
+  return {
+    scaleX: viewBox?.width && svgRect.width ? svgRect.width / viewBox.width : 1,
+    scaleY: viewBox?.height && svgRect.height ? svgRect.height / viewBox.height : 1
+  };
 }
-
-// src/renderers/svg-dom.ts
-var SVG_NS3 = "http://www.w3.org/2000/svg";
-var XLINK_NS2 = "http://www.w3.org/1999/xlink";
-function createSVGElement2(tag) {
-  return document.createElementNS(SVG_NS3, tag);
+function getTextStyles(targetElement, scale) {
+  const computed = window.getComputedStyle(targetElement);
+  const svgFontSize = parseFloat(
+    targetElement.getAttribute("font-size") ?? computed.fontSize ?? "14"
+  );
+  const pixelFontSize = svgFontSize * scale.scaleY;
+  const fontFamily = targetElement.getAttribute("font-family") ?? computed.fontFamily ?? "inherit";
+  const fontWeight = targetElement.getAttribute("font-weight") ?? computed.fontWeight ?? "400";
+  const fill = targetElement.style.getPropertyValue("fill") || targetElement.getAttribute("fill") || computed.color || "#000";
+  const textAnchor = targetElement.getAttribute("text-anchor") ?? "start";
+  let textAlign = "left";
+  if (textAnchor === "middle") textAlign = "center";
+  else if (textAnchor === "end") textAlign = "right";
+  return {
+    fontFamily,
+    fontSize: `${pixelFontSize}px`,
+    fontWeight,
+    color: fill,
+    textAlign,
+    lineHeight: "1.3"
+  };
 }
-function setAttrs2(el, attrs) {
-  for (const [key, value] of Object.entries(attrs)) {
-    el.setAttribute(key, String(value));
-  }
+function computePosition2(targetElement, svg, container) {
+  const bbox = targetElement.getBBox();
+  const scale = getScale(svg);
+  const svgRect = svg.getBoundingClientRect();
+  const containerRect = container.getBoundingClientRect();
+  const padding = 4;
+  const left = bbox.x * scale.scaleX + (svgRect.left - containerRect.left) - padding;
+  const top = bbox.y * scale.scaleY + (svgRect.top - containerRect.top) - padding;
+  const width = bbox.width * scale.scaleX + padding * 2;
+  const height = bbox.height * scale.scaleY + padding * 2;
+  return {
+    top: Math.max(0, top),
+    left: Math.max(0, left),
+    width: Math.max(width, 60),
+    height: Math.max(height, 24)
+  };
 }
-function 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);
+function createTextEditOverlay(config) {
+  const { container, svg, targetElement, currentText, onCommit, onCancel } = config;
+  let destroyed = false;
+  const originalOpacity = targetElement.getAttribute("opacity");
+  targetElement.setAttribute("opacity", "0");
+  const scale = getScale(svg);
+  const styles = getTextStyles(targetElement, scale);
+  const position = computePosition2(targetElement, svg, container);
+  const textarea = document.createElement("textarea");
+  textarea.value = currentText;
+  const containerPosition = window.getComputedStyle(container).position;
+  const containerWasStatic = containerPosition === "static";
+  if (containerWasStatic) {
+    container.style.position = "relative";
   }
-}
-
-// 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 = createSVGElement2("path");
-  path.setAttribute("class", "oc-annotation-connector");
-  setAttrs2(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 = createSVGElement2("polygon");
-  arrow.setAttribute("class", "oc-annotation-connector");
-  setAttrs2(arrow, {
-    points: [
-      `${to.x},${tipY}`,
-      `${baseX + px * arrowWidth},${baseY + py * arrowWidth}`,
-      `${baseX - px * arrowWidth},${baseY - py * arrowWidth}`
-    ].join(" "),
-    fill: stroke
+  Object.assign(textarea.style, {
+    position: "absolute",
+    top: `${position.top}px`,
+    left: `${position.left}px`,
+    width: `${position.width}px`,
+    minHeight: `${position.height}px`,
+    fontFamily: styles.fontFamily,
+    fontSize: styles.fontSize,
+    fontWeight: styles.fontWeight,
+    color: styles.color,
+    textAlign: styles.textAlign,
+    lineHeight: styles.lineHeight,
+    padding: "2px 4px",
+    margin: "0",
+    border: "1px solid rgba(79, 70, 229, 0.4)",
+    borderRadius: "3px",
+    background: "rgba(255, 255, 255, 0.95)",
+    outline: "none",
+    resize: "none",
+    overflow: "hidden",
+    boxSizing: "border-box",
+    zIndex: "10000",
+    // Remove default textarea appearance
+    WebkitAppearance: "none",
+    appearance: "none"
   });
-  parent.appendChild(arrow);
-}
-function renderAnnotation(parent, annotation, index2, bgColor) {
-  const g = createSVGElement2("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 = createSVGElement2("rect");
-    rect.setAttribute("class", "oc-annotation-range");
-    rect.setAttribute("pointer-events", "none");
-    setAttrs2(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 = createSVGElement2("line");
-    line.setAttribute("class", "oc-annotation-line");
-    setAttrs2(line, {
-      x1: annotation.line.start.x,
-      y1: annotation.line.start.y,
-      x2: annotation.line.end.x,
-      y2: annotation.line.end.y,
-      "stroke-width": annotation.strokeWidth ?? 1
-    });
-    if (annotation.stroke) line.setAttribute("stroke", annotation.stroke);
-    if (annotation.strokeDasharray) {
-      line.setAttribute("stroke-dasharray", annotation.strokeDasharray);
-    }
-    g.appendChild(line);
-  }
-  if (annotation.label?.visible) {
-    if (annotation.label.connector) {
-      const c2 = annotation.label.connector;
-      if (c2.style === "curve") {
-        renderCurvedArrow(g, c2.from, c2.to, c2.stroke);
-      } else if (c2.style === "drop-line") {
-        const connector = createSVGElement2("line");
-        connector.setAttribute("class", "oc-annotation-connector oc-annotation-drop-line");
-        setAttrs2(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.6,
-          "shape-rendering": "crispEdges"
-        });
-        g.appendChild(connector);
-      } else {
-        const connector = createSVGElement2("line");
-        connector.setAttribute("class", "oc-annotation-connector");
-        setAttrs2(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);
-      }
-      if (c2.endpoint && c2.style !== "curve") {
-        const ring = createSVGElement2("circle");
-        ring.setAttribute("class", "oc-annotation-endpoint-ring");
-        setAttrs2(ring, {
-          cx: c2.endpoint.x,
-          cy: c2.endpoint.y,
-          r: 5,
-          fill: bgColor ?? "#ffffff",
-          stroke: c2.stroke,
-          "stroke-width": 1.5
-        });
-        g.appendChild(ring);
-        const dot = createSVGElement2("circle");
-        dot.setAttribute("class", "oc-annotation-endpoint-dot");
-        setAttrs2(dot, {
-          cx: c2.endpoint.x,
-          cy: c2.endpoint.y,
-          r: 2,
-          fill: c2.stroke
-        });
-        g.appendChild(dot);
-      }
-    }
-    if (annotation.dot) {
-      const dot = createSVGElement2("circle");
-      dot.setAttribute("class", "oc-annotation-dot");
-      setAttrs2(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 = createSVGElement2("text");
-    text.setAttribute("class", "oc-annotation-label");
-    setAttrs2(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 = createSVGElement2("tspan");
-        setAttrs2(tspan, { x: annotation.label.x, dy: i === 0 ? 0 : lineHeight });
-        tspan.textContent = lines[i];
-        text.appendChild(tspan);
-      }
+  container.appendChild(textarea);
+  textarea.focus();
+  textarea.select();
+  function destroy() {
+    if (destroyed) return;
+    destroyed = true;
+    if (originalOpacity !== null) {
+      targetElement.setAttribute("opacity", originalOpacity);
     } 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 = createSVGElement2("rect");
-      bgRect.setAttribute("class", "oc-annotation-bg");
-      setAttrs2(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";
+      targetElement.removeAttribute("opacity");
     }
-    g.appendChild(text);
-    if (annotation.subtitle) {
-      const sub = createSVGElement2("text");
-      sub.setAttribute("class", "oc-annotation-subtitle");
-      setAttrs2(sub, { x: annotation.subtitle.x, y: annotation.subtitle.y });
-      applyTextStyle(sub, annotation.subtitle.style);
-      sub.textContent = annotation.subtitle.text;
-      g.appendChild(sub);
+    textarea.removeEventListener("keydown", handleKeyDown);
+    document.removeEventListener("mousedown", handleClickOutside);
+    resizeObserver.disconnect();
+    if (containerWasStatic) {
+      container.style.position = "";
+    }
+    if (textarea.parentNode) {
+      textarea.parentNode.removeChild(textarea);
     }
   }
-  parent.appendChild(g);
-}
-function renderAnnotations(parent, layout) {
-  if (layout.annotations.length === 0) return;
-  const g = createSVGElement2("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);
+  function commit() {
+    if (destroyed) return;
+    const newText = textarea.value;
+    destroy();
+    onCommit(newText);
   }
-  parent.appendChild(g);
-}
-
-// src/renderers/axes.ts
-import {
-  axisTitleOffset,
-  estimateTextWidth as estimateTextWidth2,
-  getAxisTitleOffset,
-  TICK_LABEL_OFFSET,
-  textAscent as textAscent2
-} from "@opendata-ai/openchart-core";
-function appendCompoundLabel(parent, primaryText, subtitle, fontWeight) {
-  const primarySpan = createSVGElement2("tspan");
-  primarySpan.setAttribute("font-weight", String(fontWeight));
-  primarySpan.textContent = primaryText;
-  parent.appendChild(primarySpan);
-  const subtitleSpan = createSVGElement2("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 = createSVGElement2("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 = createSVGElement2("line");
-    line.setAttribute("class", "oc-axis-line");
-    setAttrs2(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 = createSVGElement2("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;
-        setAttrs2(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;
-        setAttrs2(label, {
-          x: tick.position,
-          y: area.y + area.height + xLabelPad + textAscent2(axis.tickLabelStyle.fontSize),
-          "text-anchor": "middle"
-        });
-      }
-      applyTextStyle(label, axis.tickLabelStyle);
-      label.textContent = tick.label;
-      g.appendChild(label);
-    } else if (isInlineY) {
-      const label = createSVGElement2("text");
-      label.setAttribute("class", "oc-axis-tick oc-axis-tick-inline");
-      setAttrs2(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 = createSVGElement2("text");
-      label.setAttribute("class", "oc-axis-tick");
-      setAttrs2(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 = estimateTextWidth2(tick.subtitle, fontSize, fontWeight);
-          const primaryWidth = estimateTextWidth2(tick.label, fontSize, fontWeight);
-          const totalWidth = primaryWidth + gapWidth + subtitleWidth;
-          if (totalWidth > availableWidth && availableWidth > 20) {
-            const ellipsis = "\u2026";
-            const ellipsisWidth = estimateTextWidth2(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 (estimateTextWidth2(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 = createSVGElement2("title");
-            titleEl.textContent = `${tick.label}  ${tick.subtitle}`;
-            label.appendChild(titleEl);
-          } else {
-            appendCompoundLabel(label, tick.label, tick.subtitle, fontWeight);
-          }
-        } else {
-          const fullWidth = estimateTextWidth2(tick.label, fontSize, fontWeight);
-          if (fullWidth > availableWidth && availableWidth > 20) {
-            const ellipsis = "\u2026";
-            const ellipsisWidth = estimateTextWidth2(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 (estimateTextWidth2(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 = createSVGElement2("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 = createSVGElement2("line");
-      gl.setAttribute("class", "oc-gridline");
-      if (orientation === "y") {
-        setAttrs2(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 {
-        setAttrs2(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);
-    }
+  function cancel() {
+    if (destroyed) return;
+    destroy();
+    onCancel();
   }
-  if (axis.label && axis.labelStyle) {
-    const axisLabel = createSVGElement2("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})`;
-      }
-      setAttrs2(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 = estimateTextWidth2(
-            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;
-      }
-      setAttrs2(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;
-      setAttrs2(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 = estimateTextWidth2(
-          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
-      );
-      setAttrs2(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})`
-      });
+  const handleKeyDown = (e) => {
+    if (e.key === "Enter" && !e.shiftKey) {
+      e.preventDefault();
+      commit();
+    } else if (e.key === "Escape") {
+      e.preventDefault();
+      cancel();
     }
-    g.appendChild(axisLabel);
-  }
-  parent.appendChild(g);
+  };
+  textarea.addEventListener("keydown", handleKeyDown);
+  const handleClickOutside = (e) => {
+    if (!textarea.contains(e.target)) {
+      commit();
+    }
+  };
+  requestAnimationFrame(() => {
+    if (!destroyed) {
+      document.addEventListener("mousedown", handleClickOutside);
+    }
+  });
+  const resizeObserver = new ResizeObserver(() => {
+    if (destroyed) return;
+    const newPosition = computePosition2(targetElement, svg, container);
+    textarea.style.top = `${newPosition.top}px`;
+    textarea.style.left = `${newPosition.left}px`;
+    textarea.style.width = `${newPosition.width}px`;
+    textarea.style.minHeight = `${newPosition.height}px`;
+  });
+  resizeObserver.observe(container);
+  return { destroy };
 }
-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/theme-tokens.ts
+import { adaptForLightLineStroke } from "@opendata-ai/openchart-core";
+function stampThemeProperties(el, theme) {
+  const accent = theme.colors.categorical[0] ?? "#06b6d4";
+  const bg = theme.colors.background === "transparent" ? theme.isDark ? "#09090b" : "#ffffff" : theme.colors.background;
+  const props = [
+    ["--oc-font-family", theme.fonts.family],
+    ["--oc-font-mono", theme.fonts.mono],
+    ["--oc-title-size", `${theme.chrome.title.fontSize}px`],
+    ["--oc-title-weight", `${theme.chrome.title.fontWeight}`],
+    ["--oc-subtitle-size", `${theme.chrome.subtitle.fontSize}px`],
+    ["--oc-subtitle-weight", `${theme.chrome.subtitle.fontWeight}`],
+    ["--oc-source-size", `${theme.chrome.source.fontSize}px`],
+    ["--oc-source-weight", `${theme.chrome.source.fontWeight}`],
+    ["--oc-body-size", `${theme.fonts.sizes.body}px`],
+    ["--oc-eyebrow-size", `${theme.chrome.eyebrow.fontSize}px`],
+    ["--oc-eyebrow-weight", `${theme.chrome.eyebrow.fontWeight}`],
+    ["--oc-bg", bg],
+    ["--oc-text", theme.colors.text],
+    ["--oc-text-muted", theme.colors.axis],
+    ["--oc-gridline", theme.colors.gridline],
+    ["--oc-axis", theme.colors.axis],
+    ["--oc-border-radius", `${theme.borderRadius}px`],
+    ["--oc-accent", accent],
+    ["--oc-accent-strong", adaptForLightLineStroke(accent)],
+    ["--oc-positive", theme.colors.positive],
+    ["--oc-negative", theme.colors.negative],
+    ["--oc-space-2", `${theme.spacing.chromeGap * 2}px`],
+    ["--oc-space-4", `${theme.spacing.padding}px`]
+  ];
+  for (const [name, value] of props) {
+    el.style.setProperty(name, value);
   }
 }
 
-// src/renderers/brand.ts
-import { BRAND_FONT_SIZE as BRAND_FONT_SIZE2, BRAND_MIN_WIDTH as BRAND_MIN_WIDTH2, textAscent as textAscent3 } from "@opendata-ai/openchart-core";
-var BRAND_URL2 = "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 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 a2 = createSVGElement2("a");
-  a2.setAttribute("href", BRAND_URL2);
-  a2.setAttributeNS(XLINK_NS2, "xlink:href", BRAND_URL2);
-  a2.setAttribute("target", "_blank");
-  a2.setAttribute("rel", "noopener");
-  a2.setAttribute("class", "oc-chrome-ref");
-  const BRAND_LARGE = 16;
-  const text = createSVGElement2("text");
-  setAttrs2(text, {
-    x: rightEdge,
-    y: chromeY + textAscent3(BRAND_LARGE),
-    "font-family": layout.theme.fonts.family,
-    "font-size": BRAND_FONT_SIZE2,
-    "text-anchor": "end",
-    "fill-opacity": 0.55
-  });
-  text.style.setProperty("fill", fill);
-  const trySpan = createSVGElement2("tspan");
-  trySpan.setAttribute("font-weight", "500");
-  trySpan.textContent = "try";
-  text.appendChild(trySpan);
-  const openDataSpan = createSVGElement2("tspan");
-  openDataSpan.setAttribute("font-weight", "600");
-  openDataSpan.setAttribute("font-size", String(BRAND_LARGE));
-  openDataSpan.textContent = "OpenData";
-  text.appendChild(openDataSpan);
-  const aiSpan = createSVGElement2("tspan");
-  aiSpan.setAttribute("font-weight", "500");
-  aiSpan.textContent = ".ai";
-  text.appendChild(aiSpan);
-  a2.appendChild(text);
-  parent.appendChild(a2);
-}
-
-// src/renderers/chrome.ts
-import { estimateTextWidth as estimateTextWidth3, textAscent as textAscent4, wrapText } from "@opendata-ai/openchart-core";
-function renderChromeElement(parent, element, className, chromeKey, measureText, uppercase = false) {
-  const text = createSVGElement2("text");
-  setAttrs2(text, { x: element.x, y: element.y + textAscent4(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 = createSVGElement2("tspan");
-      setAttrs2(tspan, { x: element.x, dy: i === 0 ? 0 : lineHeight });
-      tspan.textContent = lines[i];
-      text.appendChild(tspan);
-    }
-  }
-  parent.appendChild(text);
-}
-function renderChrome2(parent, layout) {
-  const g = createSVGElement2("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 = createSVGElement2("circle");
-    dot.setAttribute("class", "oc-eyebrow-dot");
-    setAttrs2(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;
-  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
-    );
-  }
-  if (chrome.brand) {
-    const brandY = bottomOffset + chrome.brand.y;
-    renderChromeElement(g, { ...chrome.brand, y: brandY }, "oc-brand", "brand", measureText);
-    const textWidth = estimateTextWidth3(
-      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 = createSVGElement2("circle");
-    dot.setAttribute("class", "oc-brand-dot");
-    setAttrs2(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 renderEndpointLabels(parent, layout) {
-  const ep = layout.endpointLabels;
-  if (!ep || ep.entries.length === 0) return;
-  const chartArea = layout.area;
-  const chartRightX = chartArea.x + chartArea.width;
-  const root = createSVGElement2("g");
-  root.setAttribute("class", "oc-endpoint-labels");
-  root.setAttribute("role", "list");
-  root.setAttribute("aria-label", "Endpoint labels");
-  const labelFontSize = ep.labelStyle.fontSize ?? 11;
-  const labelLineHeight = labelFontSize * (ep.labelStyle.lineHeight ?? 1.25);
-  const valueFontSize = ep.valueStyle.fontSize ?? 11;
-  const chipX = ep.bounds.x;
-  const chipWidth = ep.swatchSize;
-  const textX = chipX + chipWidth + ep.gap;
-  for (let i = 0; i < ep.entries.length; i++) {
-    const entry = ep.entries[i];
-    const entryG = createSVGElement2("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("aria-label", `${entry.seriesKey}: ${entry.value}`);
-    if (entry.showLeader) {
-      const leader = createSVGElement2("line");
-      leader.setAttribute("class", "oc-endpoint-leader");
-      setAttrs2(leader, {
-        x1: chipX,
-        y1: entry.labelY + labelFontSize / 2,
-        x2: chartRightX,
-        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 = createSVGElement2("line");
-    line.setAttribute("class", "oc-endpoint-swatch-line");
-    setAttrs2(line, {
-      x1: chipX,
-      y1: rowY,
-      x2: chipX + chipWidth,
-      y2: rowY,
-      stroke: entry.color,
-      "stroke-width": 2,
-      "stroke-linecap": "round"
-    });
-    entryG.appendChild(line);
-    const label = createSVGElement2("text");
-    label.setAttribute("class", "oc-endpoint-label");
-    setAttrs2(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 = createSVGElement2("tspan");
-        setAttrs2(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 = createSVGElement2("text");
-    value.setAttribute("class", "oc-endpoint-value");
-    setAttrs2(value, { x: textX, y: valueY });
-    applyTextStyle(value, ep.valueStyle);
-    value.textContent = entry.value;
-    entryG.appendChild(value);
-    if (entry.marker) {
-      const marker = createSVGElement2("circle");
-      marker.setAttribute("class", "oc-endpoint-marker");
-      setAttrs2(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);
-  }
-  parent.appendChild(root);
-}
-
-// src/renderers/legend.ts
-import { estimateTextWidth as estimateTextWidth4 } 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 = createSVGElement2("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 = estimateTextWidth4(
-        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 = createSVGElement2("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 = createSVGElement2("circle");
-      setAttrs2(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 = createSVGElement2("line");
-      line.setAttribute("class", "oc-legend-swatch-line");
-      setAttrs2(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 = createSVGElement2("rect");
-      rect.setAttribute("class", "oc-legend-swatch-rect");
-      setAttrs2(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 = createSVGElement2("text");
-    setAttrs2(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 = estimateTextWidth4(
-          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/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 = createSVGElement2("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 = createSVGElement2("path");
-    const d = mark.path ?? mark.points.map((p, i) => `${i === 0 ? "M" : "L"}${p.x},${p.y}`).join(" ");
-    setAttrs2(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 = createSVGElement2("text");
-    label.setAttribute("class", "oc-mark-label");
-    if (mark.seriesKey) {
-      label.setAttribute("data-series", mark.seriesKey);
-    }
-    setAttrs2(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 = createSVGElement2("line");
-      connector.setAttribute("class", "oc-mark-connector");
-      setAttrs2(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 = createSVGElement2("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 = createSVGElement2("path");
-    setAttrs2(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 = createSVGElement2("path");
-      strokePath.setAttribute("class", "oc-area-top");
-      setAttrs2(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: x3, y: y3, 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${x3 + tl},${y3}`,
-    `H${x3 + w - tr}`,
-    tr ? `A${tr},${tr} 0 0 1 ${x3 + w},${y3 + tr}` : "",
-    `V${y3 + h - br}`,
-    br ? `A${br},${br} 0 0 1 ${x3 + w - br},${y3 + h}` : "",
-    `H${x3 + bl}`,
-    bl ? `A${bl},${bl} 0 0 1 ${x3},${y3 + h - bl}` : "",
-    `V${y3 + tl}`,
-    tl ? `A${tl},${tl} 0 0 1 ${x3 + tl},${y3}` : "",
-    "Z"
-  ].filter(Boolean).join(" ");
-}
-function renderRectMark(mark, index2) {
-  const g = createSVGElement2("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 sides = mark.cornerRadiusSides;
-  const partialCorners = !!sides && (!sides.tl || !sides.tr || !sides.br || !sides.bl) && !!mark.cornerRadius;
-  const shapeEl = partialCorners ? createSVGElement2("path") : createSVGElement2("rect");
-  if (partialCorners) {
-    shapeEl.setAttribute("d", _rectPathWithCorners(mark, sides));
-  } else {
-    setAttrs2(shapeEl, {
-      x: mark.x,
-      y: mark.y,
-      width: mark.width,
-      height: mark.height
-    });
-    if (mark.cornerRadius) {
-      setAttrs2(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, index2) {
-  const g = createSVGElement2("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 = createSVGElement2("path");
-  setAttrs2(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 = createSVGElement2("text");
-    label.setAttribute("class", "oc-mark-label");
-    setAttrs2(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 = createSVGElement2("circle");
-  circle.setAttribute("data-mark-id", `point-${index2}`);
-  circle.setAttribute("class", "oc-mark oc-mark-point");
-  stampAnimationAttrs(circle, mark, index2);
-  setAttrs2(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 = createSVGElement2("text");
-  text.setAttribute("data-mark-id", `textMark-${index2}`);
-  text.setAttribute("class", "oc-mark oc-mark-text");
-  stampAnimationAttrs(text, mark, index2);
-  setAttrs2(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 = createSVGElement2("line");
-  line.setAttribute("data-mark-id", `rule-${index2}`);
-  line.setAttribute("class", "oc-mark oc-mark-rule");
-  stampAnimationAttrs(line, mark, index2);
-  setAttrs2(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 = createSVGElement2("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") {
-    setAttrs2(line, {
-      x1: mark.x,
-      y1: mark.y - half,
-      x2: mark.x,
-      y2: mark.y + half,
-      stroke: mark.stroke,
-      "stroke-width": mark.strokeWidth
-    });
-  } else {
-    setAttrs2(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 = createSVGElement2("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 = createSVGElement2("g");
-      labelsGroup.setAttribute("class", "oc-mark-labels");
-    }
-    const label = createSVGElement2("text");
-    label.setAttribute("class", "oc-mark-label");
-    setAttrs2(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/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 = createSVGElement2("g");
-  g.setAttribute("class", "oc-metrics");
-  for (const cell of bar.cells) {
-    const label = createSVGElement2("text");
-    label.setAttribute("class", "oc-metric-label");
-    setAttrs2(label, { x: cell.x, y: cell.labelY, "font-size": labelSize });
-    label.textContent = cell.metric.label.toUpperCase();
-    g.appendChild(label);
-    const value = createSVGElement2("text");
-    value.setAttribute("class", "oc-metric-value");
-    setAttrs2(value, { x: cell.x, y: cell.valueY, "font-size": valueSize });
-    value.textContent = cell.metric.value;
-    if (cell.metric.delta) {
-      const delta = createSVGElement2("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 = createSVGElement2("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 = createSVGElement2("svg");
-  setAttrs2(svg, {
-    viewBox: `0 0 ${width} ${height}`,
-    xmlns: SVG_NS3,
-    // 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 m2 of layout.marks) {
-      if (m2.type === "rect") {
-        const pos = m2.stackPos;
-        if (pos !== void 0 && pos + 1 > maxSegments) {
-          maxSegments = pos + 1;
-        }
-      }
-    }
-    if (maxSegments > 0) {
-      const segDuration = Math.round(animation.duration / maxSegments);
-      svg.style.setProperty("--oc-stack-segment-duration", `${segDuration}ms`);
-    }
-  }
-  if (layout.display !== "sparkline") {
-    const bg = createSVGElement2("rect");
-    setAttrs2(bg, {
-      x: 0,
-      y: 0,
-      width,
-      height,
-      fill: layout.theme.colors.background
-    });
-    svg.appendChild(bg);
-  }
-  const clipId = nextSvgId("oc-clip");
-  const defs = createSVGElement2("defs");
-  const clipPath = createSVGElement2("clipPath");
-  clipPath.setAttribute("id", clipId);
-  const maxPointR = layout.marks.reduce(
-    (max, m2) => m2.type === "point" && m2.r ? Math.max(max, m2.r) : max,
-    0
-  );
-  const clipPad = Math.max(maxPointR, 2);
-  const clipRect = createSVGElement2("rect");
-  setAttrs2(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 {
-    renderAxes(svg, layout);
-    const clippedGroup = createSVGElement2("g");
-    clippedGroup.setAttribute("clip-path", `url(#${clipId})`);
-    const markLabelsOverlay = renderMarks(clippedGroup, layout);
-    const hasLineOrAreaWithDataPoints = layout.marks.some(
-      (m2) => (m2.type === "line" || m2.type === "area") && m2.dataPoints && m2.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 = createSVGElement2("rect");
-      setAttrs2(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 = createSVGElement2("line");
-        crosshairLine.setAttribute("data-crosshair", "true");
-        crosshairLine.setAttribute("class", "oc-crosshair");
-        setAttrs2(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 = createSVGElement2("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);
-    renderChrome2(svg, layout);
-    renderMetrics(svg, layout);
-    if (layout.watermark && !layout.chrome.brand) {
-      renderBrand(svg, layout);
-    }
-  } finally {
-    resetMarkRenderState();
-  }
-  container.appendChild(svg);
-  return svg;
-}
-
-// src/text-edit-overlay.ts
-function getScale(svg) {
-  const viewBox = svg.viewBox?.baseVal;
-  const svgRect = svg.getBoundingClientRect();
-  return {
-    scaleX: viewBox?.width && svgRect.width ? svgRect.width / viewBox.width : 1,
-    scaleY: viewBox?.height && svgRect.height ? svgRect.height / viewBox.height : 1
-  };
-}
-function getTextStyles(targetElement, scale) {
-  const computed = window.getComputedStyle(targetElement);
-  const svgFontSize = parseFloat(
-    targetElement.getAttribute("font-size") ?? computed.fontSize ?? "14"
-  );
-  const pixelFontSize = svgFontSize * scale.scaleY;
-  const fontFamily = targetElement.getAttribute("font-family") ?? computed.fontFamily ?? "inherit";
-  const fontWeight = targetElement.getAttribute("font-weight") ?? computed.fontWeight ?? "400";
-  const fill = targetElement.style.getPropertyValue("fill") || targetElement.getAttribute("fill") || computed.color || "#000";
-  const textAnchor = targetElement.getAttribute("text-anchor") ?? "start";
-  let textAlign = "left";
-  if (textAnchor === "middle") textAlign = "center";
-  else if (textAnchor === "end") textAlign = "right";
-  return {
-    fontFamily,
-    fontSize: `${pixelFontSize}px`,
-    fontWeight,
-    color: fill,
-    textAlign,
-    lineHeight: "1.3"
-  };
-}
-function computePosition2(targetElement, svg, container) {
-  const bbox = targetElement.getBBox();
-  const scale = getScale(svg);
-  const svgRect = svg.getBoundingClientRect();
-  const containerRect = container.getBoundingClientRect();
-  const padding = 4;
-  const left = bbox.x * scale.scaleX + (svgRect.left - containerRect.left) - padding;
-  const top = bbox.y * scale.scaleY + (svgRect.top - containerRect.top) - padding;
-  const width = bbox.width * scale.scaleX + padding * 2;
-  const height = bbox.height * scale.scaleY + padding * 2;
-  return {
-    top: Math.max(0, top),
-    left: Math.max(0, left),
-    width: Math.max(width, 60),
-    height: Math.max(height, 24)
-  };
-}
-function createTextEditOverlay(config) {
-  const { container, svg, targetElement, currentText, onCommit, onCancel } = config;
-  let destroyed = false;
-  const originalOpacity = targetElement.getAttribute("opacity");
-  targetElement.setAttribute("opacity", "0");
-  const scale = getScale(svg);
-  const styles = getTextStyles(targetElement, scale);
-  const position = computePosition2(targetElement, svg, container);
-  const textarea = document.createElement("textarea");
-  textarea.value = currentText;
-  const containerPosition = window.getComputedStyle(container).position;
-  const containerWasStatic = containerPosition === "static";
-  if (containerWasStatic) {
-    container.style.position = "relative";
-  }
-  Object.assign(textarea.style, {
-    position: "absolute",
-    top: `${position.top}px`,
-    left: `${position.left}px`,
-    width: `${position.width}px`,
-    minHeight: `${position.height}px`,
-    fontFamily: styles.fontFamily,
-    fontSize: styles.fontSize,
-    fontWeight: styles.fontWeight,
-    color: styles.color,
-    textAlign: styles.textAlign,
-    lineHeight: styles.lineHeight,
-    padding: "2px 4px",
-    margin: "0",
-    border: "1px solid rgba(79, 70, 229, 0.4)",
-    borderRadius: "3px",
-    background: "rgba(255, 255, 255, 0.95)",
-    outline: "none",
-    resize: "none",
-    overflow: "hidden",
-    boxSizing: "border-box",
-    zIndex: "10000",
-    // Remove default textarea appearance
-    WebkitAppearance: "none",
-    appearance: "none"
-  });
-  container.appendChild(textarea);
-  textarea.focus();
-  textarea.select();
-  function destroy() {
-    if (destroyed) return;
-    destroyed = true;
-    if (originalOpacity !== null) {
-      targetElement.setAttribute("opacity", originalOpacity);
-    } else {
-      targetElement.removeAttribute("opacity");
-    }
-    textarea.removeEventListener("keydown", handleKeyDown);
-    document.removeEventListener("mousedown", handleClickOutside);
-    resizeObserver.disconnect();
-    if (containerWasStatic) {
-      container.style.position = "";
-    }
-    if (textarea.parentNode) {
-      textarea.parentNode.removeChild(textarea);
-    }
-  }
-  function commit() {
-    if (destroyed) return;
-    const newText = textarea.value;
-    destroy();
-    onCommit(newText);
-  }
-  function cancel() {
-    if (destroyed) return;
-    destroy();
-    onCancel();
-  }
-  const handleKeyDown = (e) => {
-    if (e.key === "Enter" && !e.shiftKey) {
-      e.preventDefault();
-      commit();
-    } else if (e.key === "Escape") {
-      e.preventDefault();
-      cancel();
-    }
-  };
-  textarea.addEventListener("keydown", handleKeyDown);
-  const handleClickOutside = (e) => {
-    if (!textarea.contains(e.target)) {
-      commit();
-    }
-  };
-  requestAnimationFrame(() => {
-    if (!destroyed) {
-      document.addEventListener("mousedown", handleClickOutside);
-    }
-  });
-  const resizeObserver = new ResizeObserver(() => {
-    if (destroyed) return;
-    const newPosition = computePosition2(targetElement, svg, container);
-    textarea.style.top = `${newPosition.top}px`;
-    textarea.style.left = `${newPosition.left}px`;
-    textarea.style.width = `${newPosition.width}px`;
-    textarea.style.minHeight = `${newPosition.height}px`;
-  });
-  resizeObserver.observe(container);
-  return { destroy };
-}
-
 // src/mount.ts
 function resolveDarkMode3(mode) {
   if (mode === "force") return true;
@@ -7179,6 +5677,7 @@ function createChart(container, spec, options) {
     } else {
       container.classList.remove("oc-dark");
     }
+    stampThemeProperties(container, currentLayout.theme);
     if (shouldAnimate && svgElement) {
       cleanupAnimations = setupAnimationCleanup(svgElement, () => {
         cleanupAnimations = null;
@@ -7221,6 +5720,27 @@ function createChart(container, spec, options) {
     }
     render();
   }
+  function setHighlight(values) {
+    if (destroyed) return;
+    if (isLayerSpec(currentSpec) || isGraphSpec(currentSpec))
+      return;
+    const spec2 = currentSpec;
+    const colorEnc = spec2.encoding?.color;
+    if (!colorEnc || typeof colorEnc !== "object" || !("field" in colorEnc)) return;
+    const current = colorEnc.highlight;
+    if (!values?.length && !current) return;
+    const updatedColor = { ...colorEnc };
+    if (values && values.length > 0) {
+      updatedColor.highlight = values;
+    } else {
+      delete updatedColor.highlight;
+    }
+    currentSpec = {
+      ...spec2,
+      encoding: { ...spec2.encoding, color: updatedColor }
+    };
+    render();
+  }
   function doExport(format, exportOptions) {
     if (!svgElement) {
       throw new Error("Chart is not rendered yet");
@@ -7331,7 +5851,8 @@ function createChart(container, spec, options) {
     },
     get isEditing() {
       return isTextEditingActive;
-    }
+    },
+    setHighlight
   };
 }
 
@@ -7660,30 +6181,30 @@ 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 estimateTextWidth5,
-  textAscent as textAscent5,
-  wrapText as wrapText2
+  BRAND_FONT_SIZE as BRAND_FONT_SIZE2,
+  BRAND_MIN_WIDTH as BRAND_MIN_WIDTH2,
+  estimateTextWidth as estimateTextWidth2,
+  textAscent as textAscent2,
+  wrapText
 } from "@opendata-ai/openchart-core";
-import { clampStaggerDelay as clampStaggerDelay2 } from "@opendata-ai/openchart-engine";
-var SVG_NS4 = "http://www.w3.org/2000/svg";
-var XLINK_NS3 = "http://www.w3.org/1999/xlink";
-var BRAND_URL3 = "https://tryopendata.ai";
-var EASE_VAR_MAP2 = {
+import { clampStaggerDelay } from "@opendata-ai/openchart-engine";
+var SVG_NS2 = "http://www.w3.org/2000/svg";
+var XLINK_NS2 = "http://www.w3.org/1999/xlink";
+var BRAND_URL2 = "https://tryopendata.ai";
+var EASE_VAR_MAP = {
   smooth: "var(--oc-ease-smooth)",
   snappy: "var(--oc-ease-snappy)"
 };
-function createSVGElement3(tag) {
-  return document.createElementNS(SVG_NS4, tag);
+function createSVGElement2(tag) {
+  return document.createElementNS(SVG_NS2, tag);
 }
-function setAttrs3(el, attrs) {
+function setAttrs2(el, attrs) {
   for (const [key, value] of Object.entries(attrs)) {
     el.setAttribute(key, String(value));
   }
 }
-function applyTextStyle2(el, style) {
-  setAttrs3(el, {
+function applyTextStyle(el, style) {
+  setAttrs2(el, {
     "font-family": style.fontFamily,
     "font-size": style.fontSize,
     "font-weight": style.fontWeight
@@ -7699,19 +6220,19 @@ function applyTextStyle2(el, style) {
     el.setAttribute("font-variant", style.fontVariant);
   }
 }
-function stampAnimationAttrs2(el, mark, fallbackIndex, animation) {
+function stampAnimationAttrs(el, mark, fallbackIndex, animation) {
   if (!animation?.enabled) return;
   const idx = mark.animationIndex ?? fallbackIndex;
   el.setAttribute("data-animation-index", String(idx));
   el.style.setProperty("--oc-mark-index", String(idx));
 }
-function renderChromeElement2(parent, element, className, chromeKey, measureText) {
-  const text = createSVGElement3("text");
-  setAttrs3(text, { x: element.x, y: element.y + textAscent5(element.style.fontSize) });
-  applyTextStyle2(text, element.style);
+function renderChromeElement(parent, element, className, chromeKey, measureText) {
+  const text = createSVGElement2("text");
+  setAttrs2(text, { x: element.x, y: element.y + textAscent2(element.style.fontSize) });
+  applyTextStyle(text, element.style);
   text.setAttribute("class", className);
   text.setAttribute("data-chrome-key", chromeKey);
-  const lines = wrapText2(
+  const lines = wrapText(
     element.text,
     element.style.fontSize,
     element.style.fontWeight,
@@ -7723,27 +6244,27 @@ function renderChromeElement2(parent, element, className, chromeKey, measureText
   } else {
     const lineHeight = element.style.fontSize * (element.style.lineHeight ?? 1.3);
     for (let i = 0; i < lines.length; i++) {
-      const tspan = createSVGElement3("tspan");
-      setAttrs3(tspan, { x: element.x, dy: i === 0 ? 0 : lineHeight });
+      const tspan = createSVGElement2("tspan");
+      setAttrs2(tspan, { x: element.x, dy: i === 0 ? 0 : lineHeight });
       tspan.textContent = lines[i];
       text.appendChild(tspan);
     }
   }
   parent.appendChild(text);
 }
-function renderChrome3(parent, layout) {
-  const g = createSVGElement3("g");
+function renderChrome2(parent, layout) {
+  const g = createSVGElement2("g");
   g.setAttribute("class", "oc-chrome");
   const { chrome, measureText } = layout;
   if (chrome.title) {
-    renderChromeElement2(g, chrome.title, "oc-title", "title", measureText);
+    renderChromeElement(g, chrome.title, "oc-title", "title", measureText);
   }
   if (chrome.subtitle) {
-    renderChromeElement2(g, chrome.subtitle, "oc-subtitle", "subtitle", measureText);
+    renderChromeElement(g, chrome.subtitle, "oc-subtitle", "subtitle", measureText);
   }
   const bottomOffset = layout.area.y + layout.area.height;
   if (chrome.source) {
-    renderChromeElement2(
+    renderChromeElement(
       g,
       { ...chrome.source, y: bottomOffset + chrome.source.y },
       "oc-source",
@@ -7752,7 +6273,7 @@ function renderChrome3(parent, layout) {
     );
   }
   if (chrome.byline) {
-    renderChromeElement2(
+    renderChromeElement(
       g,
       { ...chrome.byline, y: bottomOffset + chrome.byline.y },
       "oc-byline",
@@ -7761,7 +6282,7 @@ function renderChrome3(parent, layout) {
     );
   }
   if (chrome.footer) {
-    renderChromeElement2(
+    renderChromeElement(
       g,
       { ...chrome.footer, y: bottomOffset + chrome.footer.y },
       "oc-footer",
@@ -7771,8 +6292,8 @@ function renderChrome3(parent, layout) {
   }
   parent.appendChild(g);
 }
-function renderBrand2(parent, layout) {
-  if (layout.dimensions.width < BRAND_MIN_WIDTH3) return;
+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;
@@ -7781,32 +6302,32 @@ function renderBrand2(parent, layout) {
   const { chrome } = layout;
   const firstBottom = chrome.source ?? chrome.byline ?? chrome.footer;
   const chromeY = firstBottom ? bottomOffset + firstBottom.y : bottomOffset + layout.theme.spacing.chartToFooter;
-  const a2 = createSVGElement3("a");
-  a2.setAttribute("href", BRAND_URL3);
-  a2.setAttributeNS(XLINK_NS3, "xlink:href", BRAND_URL3);
+  const a2 = createSVGElement2("a");
+  a2.setAttribute("href", BRAND_URL2);
+  a2.setAttributeNS(XLINK_NS2, "xlink:href", BRAND_URL2);
   a2.setAttribute("target", "_blank");
   a2.setAttribute("rel", "noopener");
   a2.setAttribute("class", "oc-chrome-ref");
   const BRAND_LARGE = 16;
-  const text = createSVGElement3("text");
-  setAttrs3(text, {
+  const text = createSVGElement2("text");
+  setAttrs2(text, {
     x: rightEdge,
     y: chromeY + BRAND_LARGE,
     "dominant-baseline": "alphabetic",
     "text-anchor": "end",
     "font-family": layout.theme.fonts.family,
-    "font-size": BRAND_FONT_SIZE3,
+    "font-size": BRAND_FONT_SIZE2,
     "fill-opacity": 0.55
   });
   text.style.setProperty("fill", fill);
-  const trySpan = createSVGElement3("tspan");
-  setAttrs3(trySpan, { "font-weight": 500 });
+  const trySpan = createSVGElement2("tspan");
+  setAttrs2(trySpan, { "font-weight": 500 });
   trySpan.textContent = "try";
-  const openDataSpan = createSVGElement3("tspan");
-  setAttrs3(openDataSpan, { "font-weight": 600, "font-size": BRAND_LARGE });
+  const openDataSpan = createSVGElement2("tspan");
+  setAttrs2(openDataSpan, { "font-weight": 600, "font-size": BRAND_LARGE });
   openDataSpan.textContent = "OpenData";
-  const aiSpan = createSVGElement3("tspan");
-  setAttrs3(aiSpan, { "font-weight": 500 });
+  const aiSpan = createSVGElement2("tspan");
+  setAttrs2(aiSpan, { "font-weight": 500 });
   aiSpan.textContent = ".ai";
   text.appendChild(trySpan);
   text.appendChild(openDataSpan);
@@ -7817,7 +6338,7 @@ function renderBrand2(parent, layout) {
 function renderLegend2(parent, legendLayout) {
   if (!("entries" in legendLayout) || legendLayout.entries.length === 0) return;
   const legend = legendLayout;
-  const g = createSVGElement3("g");
+  const g = createSVGElement2("g");
   g.setAttribute("class", "oc-legend");
   g.setAttribute("role", "list");
   g.setAttribute("aria-label", "Chart legend");
@@ -7827,7 +6348,7 @@ function renderLegend2(parent, legendLayout) {
   for (let i = 0; i < legend.entries.length; i++) {
     const entry = legend.entries[i];
     if (isHorizontal && i > 0) {
-      const labelWidth = estimateTextWidth5(
+      const labelWidth = estimateTextWidth2(
         entry.label,
         legend.labelStyle.fontSize,
         legend.labelStyle.fontWeight
@@ -7838,7 +6359,7 @@ function renderLegend2(parent, legendLayout) {
         offsetY += legend.swatchSize + 6;
       }
     }
-    const entryG = createSVGElement3("g");
+    const entryG = createSVGElement2("g");
     entryG.setAttribute("class", "oc-legend-entry");
     entryG.setAttribute("role", "listitem");
     entryG.setAttribute("data-legend-index", String(i));
@@ -7857,8 +6378,8 @@ function renderLegend2(parent, legendLayout) {
         entryG.setAttribute("opacity", "0.3");
       }
     }
-    const rect = createSVGElement3("rect");
-    setAttrs3(rect, {
+    const rect = createSVGElement2("rect");
+    setAttrs2(rect, {
       x: offsetX,
       y: offsetY,
       width: legend.swatchSize,
@@ -7867,18 +6388,18 @@ function renderLegend2(parent, legendLayout) {
       rx: 2
     });
     entryG.appendChild(rect);
-    const label = createSVGElement3("text");
-    setAttrs3(label, {
+    const label = createSVGElement2("text");
+    setAttrs2(label, {
       x: offsetX + legend.swatchSize + legend.swatchGap,
       y: offsetY + legend.swatchSize / 2,
       "dominant-baseline": "central"
     });
-    applyTextStyle2(label, legend.labelStyle);
+    applyTextStyle(label, legend.labelStyle);
     label.textContent = entry.label;
     entryG.appendChild(label);
     g.appendChild(entryG);
     if (isHorizontal) {
-      const labelWidth = estimateTextWidth5(
+      const labelWidth = estimateTextWidth2(
         entry.label,
         legend.labelStyle.fontSize,
         legend.labelStyle.fontWeight
@@ -7906,7 +6427,7 @@ function renderGradientDefs(defs, links, nodePositions) {
     const link = links[i];
     if (link.sourceColor === link.targetColor) continue;
     const gradId = `oc-sg-${sanitizeId(link.sourceId)}-${sanitizeId(link.targetId)}-${i}`;
-    const gradient = createSVGElement3("linearGradient");
+    const gradient = createSVGElement2("linearGradient");
     gradient.setAttribute("id", gradId);
     gradient.setAttribute("gradientUnits", "userSpaceOnUse");
     const sourcePos = nodePositions.get(link.sourceId);
@@ -7915,21 +6436,21 @@ function renderGradientDefs(defs, links, nodePositions) {
     const x22 = targetPos ? targetPos.x : 0;
     gradient.setAttribute("x1", String(x1));
     gradient.setAttribute("x2", String(x22));
-    const stop0 = createSVGElement3("stop");
-    setAttrs3(stop0, { offset: "0%", "stop-color": link.sourceColor });
+    const stop0 = createSVGElement2("stop");
+    setAttrs2(stop0, { offset: "0%", "stop-color": link.sourceColor });
     gradient.appendChild(stop0);
-    const stop1 = createSVGElement3("stop");
-    setAttrs3(stop1, { offset: "100%", "stop-color": link.targetColor });
+    const stop1 = createSVGElement2("stop");
+    setAttrs2(stop1, { offset: "100%", "stop-color": link.targetColor });
     gradient.appendChild(stop1);
     defs.appendChild(gradient);
   }
 }
 function renderLinks(parent, links, _nodePositions, animation) {
-  const g = createSVGElement3("g");
+  const g = createSVGElement2("g");
   g.setAttribute("class", "oc-sankey-links");
   for (let i = 0; i < links.length; i++) {
     const link = links[i];
-    const linkG = createSVGElement3("g");
+    const linkG = createSVGElement2("g");
     linkG.setAttribute("class", "oc-sankey-link");
     linkG.setAttribute("data-mark-id", `link-${link.sourceId}-${link.targetId}-${i}`);
     linkG.setAttribute("data-source", link.sourceId);
@@ -7937,8 +6458,8 @@ function renderLinks(parent, links, _nodePositions, animation) {
     if (link.aria?.label) {
       linkG.setAttribute("aria-label", link.aria.label);
     }
-    stampAnimationAttrs2(linkG, link, i, animation);
-    const path = createSVGElement3("path");
+    stampAnimationAttrs(linkG, link, i, animation);
+    const path = createSVGElement2("path");
     path.setAttribute("d", link.path);
     path.setAttribute("stroke", "none");
     path.setAttribute("fill-opacity", String(link.fillOpacity));
@@ -7954,20 +6475,20 @@ function renderLinks(parent, links, _nodePositions, animation) {
   parent.appendChild(g);
 }
 function renderNodes(parent, nodes, animation) {
-  const g = createSVGElement3("g");
+  const g = createSVGElement2("g");
   g.setAttribute("class", "oc-sankey-nodes");
   for (let i = 0; i < nodes.length; i++) {
     const node = nodes[i];
-    const nodeG = createSVGElement3("g");
+    const nodeG = createSVGElement2("g");
     nodeG.setAttribute("class", "oc-sankey-node");
     nodeG.setAttribute("data-mark-id", `node-${node.nodeId}`);
     nodeG.setAttribute("data-node-id", node.nodeId);
     if (node.aria?.label) {
       nodeG.setAttribute("aria-label", node.aria.label);
     }
-    stampAnimationAttrs2(nodeG, node, i, animation);
-    const rect = createSVGElement3("rect");
-    setAttrs3(rect, {
+    stampAnimationAttrs(nodeG, node, i, animation);
+    const rect = createSVGElement2("rect");
+    setAttrs2(rect, {
       x: node.x,
       y: node.y,
       width: node.width,
@@ -7988,24 +6509,24 @@ function renderNodes(parent, nodes, animation) {
   parent.appendChild(g);
 }
 function renderLabels(parent, nodes, measureText) {
-  const g = createSVGElement3("g");
+  const g = createSVGElement2("g");
   g.setAttribute("class", "oc-sankey-labels");
   for (const node of nodes) {
     const { label } = node;
     if (!label.visible) continue;
-    const text = createSVGElement3("text");
-    setAttrs3(text, { x: label.x, y: label.y });
-    applyTextStyle2(text, label.style);
+    const text = createSVGElement2("text");
+    setAttrs2(text, { x: label.x, y: label.y });
+    applyTextStyle(text, label.style);
     if (label.maxWidth !== void 0 && label.maxWidth > 0) {
       const fontSize = label.style.fontSize ?? 12;
       const fontWeight = label.style.fontWeight ?? 400;
-      const lines = wrapText2(label.text, fontSize, fontWeight, label.maxWidth, measureText);
+      const lines = wrapText(label.text, fontSize, fontWeight, label.maxWidth, measureText);
       if (lines.length > 1) {
         const lineHeight = fontSize * (label.style.lineHeight ?? 1.3);
         const totalHeight = (lines.length - 1) * lineHeight;
         const startY = label.y - totalHeight / 2;
         for (let i = 0; i < lines.length; i++) {
-          const tspan = createSVGElement3("tspan");
+          const tspan = createSVGElement2("tspan");
           tspan.setAttribute("x", String(label.x));
           tspan.setAttribute("y", String(startY + i * lineHeight));
           tspan.textContent = lines[i];
@@ -8023,10 +6544,10 @@ function renderLabels(parent, nodes, measureText) {
 }
 function renderSankeySVG(layout, animation) {
   const { width, height } = layout.dimensions;
-  const svg = createSVGElement3("svg");
-  setAttrs3(svg, {
+  const svg = createSVGElement2("svg");
+  setAttrs2(svg, {
     viewBox: `0 0 ${width} ${height}`,
-    xmlns: SVG_NS4,
+    xmlns: SVG_NS2,
     overflow: "visible"
   });
   svg.style.height = `${height}px`;
@@ -8037,16 +6558,16 @@ function renderSankeySVG(layout, animation) {
   svg.setAttribute("class", classes);
   if (animation?.enabled) {
     const totalMarks = layout.nodes.length + layout.links.length;
-    const stagger = clampStaggerDelay2(animation.staggerDelay, totalMarks);
+    const stagger = clampStaggerDelay(animation.staggerDelay, totalMarks);
     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_MAP2[animation.ease] || EASE_VAR_MAP2.smooth;
+    const easeVar = EASE_VAR_MAP[animation.ease] || EASE_VAR_MAP.smooth;
     svg.style.setProperty("--oc-animation-ease", easeVar);
   }
-  const bg = createSVGElement3("rect");
+  const bg = createSVGElement2("rect");
   bg.setAttribute("class", "oc-background");
-  setAttrs3(bg, {
+  setAttrs2(bg, {
     x: 0,
     y: 0,
     width,
@@ -8055,16 +6576,16 @@ function renderSankeySVG(layout, animation) {
   });
   svg.appendChild(bg);
   const nodePositions = buildNodePositionMap(layout.nodes);
-  const defs = createSVGElement3("defs");
+  const defs = createSVGElement2("defs");
   renderGradientDefs(defs, layout.links, nodePositions);
   svg.appendChild(defs);
   renderLinks(svg, layout.links, nodePositions, animation);
   renderNodes(svg, layout.nodes, animation);
   renderLabels(svg, layout.nodes, layout.measureText);
   renderLegend2(svg, layout.legend);
-  renderChrome3(svg, layout);
+  renderChrome2(svg, layout);
   if (layout.watermark) {
-    renderBrand2(svg, layout);
+    renderBrand(svg, layout);
   }
   return svg;
 }
@@ -8627,13 +7148,13 @@ import { getBreakpoint } from "@opendata-ai/openchart-core";
 import { compileTable } from "@opendata-ai/openchart-engine";
 
 // src/table-renderer.ts
-import { BRAND_FONT_SIZE as BRAND_FONT_SIZE4 } from "@opendata-ai/openchart-core";
-import { clampStaggerDelay as clampStaggerDelay3 } from "@opendata-ai/openchart-engine";
-var EASE_VAR_MAP3 = {
+import { BRAND_FONT_SIZE as BRAND_FONT_SIZE3 } from "@opendata-ai/openchart-core";
+import { clampStaggerDelay as clampStaggerDelay2 } from "@opendata-ai/openchart-engine";
+var EASE_VAR_MAP2 = {
   smooth: "var(--oc-ease-smooth)",
   snappy: "var(--oc-ease-snappy)"
 };
-var BRAND_URL4 = "https://tryopendata.ai";
+var BRAND_URL3 = "https://tryopendata.ai";
 function renderChromeBlock(layout, position) {
   const chrome = layout.chrome;
   if (position === "header") {
@@ -8880,10 +7401,10 @@ function renderTable(layout, container, opts) {
     const brand = document.createElement("div");
     brand.className = "oc-table-ref";
     const brandLink = document.createElement("a");
-    brandLink.href = BRAND_URL4;
+    brandLink.href = BRAND_URL3;
     brandLink.target = "_blank";
     brandLink.rel = "noopener";
-    brandLink.style.cssText = `font-size: ${BRAND_FONT_SIZE4}px; font-weight: 600; color: ${brandColor}; opacity: 0.55; text-decoration: none; font-family: ${theme ? theme.fonts.family : "sans-serif"};`;
+    brandLink.style.cssText = `font-size: ${BRAND_FONT_SIZE3}px; font-weight: 600; color: ${brandColor}; opacity: 0.55; text-decoration: none; font-family: ${theme ? theme.fonts.family : "sans-serif"};`;
     brandLink.textContent = "tryOpenData.ai";
     brand.appendChild(brandLink);
     footerRow.appendChild(brand);
@@ -8894,11 +7415,11 @@ function renderTable(layout, container, opts) {
   if (opts?.animate && layout.animation?.enabled) {
     const anim = layout.animation;
     const rowCount = layout.rows.length;
-    const stagger = clampStaggerDelay3(anim.staggerDelay, rowCount);
+    const stagger = clampStaggerDelay2(anim.staggerDelay, rowCount);
     const s = wrapper.style;
     s.setProperty("--oc-animation-duration", `${anim.duration}ms`);
     s.setProperty("--oc-animation-stagger", `${stagger}ms`);
-    s.setProperty("--oc-animation-ease", EASE_VAR_MAP3[anim.ease] || EASE_VAR_MAP3.smooth);
+    s.setProperty("--oc-animation-ease", EASE_VAR_MAP2[anim.ease] || EASE_VAR_MAP2.smooth);
     wrapper.classList.add("oc-animate");
   }
   container.appendChild(wrapper);
@@ -9273,33 +7794,33 @@ function createTable(container, spec, options) {
 import { compileTileMap } from "@opendata-ai/openchart-engine";
 
 // src/tilemap-renderer.ts
-import { textAscent as textAscent6 } from "@opendata-ai/openchart-core";
-var SVG_NS5 = "http://www.w3.org/2000/svg";
-var XLINK_NS4 = "http://www.w3.org/1999/xlink";
-var BRAND_URL5 = "https://tryopendata.ai";
-var EASE_VAR_MAP4 = {
+import { textAscent as textAscent3 } from "@opendata-ai/openchart-core";
+var SVG_NS3 = "http://www.w3.org/2000/svg";
+var XLINK_NS3 = "http://www.w3.org/1999/xlink";
+var BRAND_URL4 = "https://tryopendata.ai";
+var EASE_VAR_MAP3 = {
   smooth: "var(--oc-ease-smooth)",
   snappy: "var(--oc-ease-snappy)"
 };
 var gradientIdCounter = 0;
-function createSVGElement4(tag) {
-  return document.createElementNS(SVG_NS5, tag);
+function createSVGElement3(tag) {
+  return document.createElementNS(SVG_NS3, tag);
 }
-function setAttrs4(el, attrs) {
+function setAttrs3(el, attrs) {
   for (const [key, value] of Object.entries(attrs)) {
     el.setAttribute(key, String(value));
   }
 }
-function renderChrome4(parent, layout) {
-  const g = createSVGElement4("g");
+function renderChrome3(parent, layout) {
+  const g = createSVGElement3("g");
   g.setAttribute("class", "oc-chrome");
   const { chrome } = layout;
   const bottomOffset = layout.area.y + layout.area.height;
   if (chrome.title) {
-    const text = createSVGElement4("text");
-    setAttrs4(text, {
+    const text = createSVGElement3("text");
+    setAttrs3(text, {
       x: chrome.title.x,
-      y: chrome.title.y + textAscent6(chrome.title.style.fontSize)
+      y: chrome.title.y + textAscent3(chrome.title.style.fontSize)
     });
     text.setAttribute("class", "oc-title");
     text.setAttribute("font-family", chrome.title.style.fontFamily);
@@ -9310,10 +7831,10 @@ function renderChrome4(parent, layout) {
     g.appendChild(text);
   }
   if (chrome.subtitle) {
-    const text = createSVGElement4("text");
-    setAttrs4(text, {
+    const text = createSVGElement3("text");
+    setAttrs3(text, {
       x: chrome.subtitle.x,
-      y: chrome.subtitle.y + textAscent6(chrome.subtitle.style.fontSize)
+      y: chrome.subtitle.y + textAscent3(chrome.subtitle.style.fontSize)
     });
     text.setAttribute("class", "oc-subtitle");
     text.setAttribute("font-family", chrome.subtitle.style.fontFamily);
@@ -9327,10 +7848,10 @@ function renderChrome4(parent, layout) {
     g.appendChild(text);
   }
   if (chrome.source) {
-    const text = createSVGElement4("text");
-    setAttrs4(text, {
+    const text = createSVGElement3("text");
+    setAttrs3(text, {
       x: chrome.source.x,
-      y: bottomOffset + chrome.source.y + textAscent6(chrome.source.style.fontSize)
+      y: bottomOffset + chrome.source.y + textAscent3(chrome.source.style.fontSize)
     });
     text.setAttribute("class", "oc-source");
     text.setAttribute("font-family", chrome.source.style.fontFamily);
@@ -9344,10 +7865,10 @@ function renderChrome4(parent, layout) {
     g.appendChild(text);
   }
   if (chrome.byline) {
-    const text = createSVGElement4("text");
-    setAttrs4(text, {
+    const text = createSVGElement3("text");
+    setAttrs3(text, {
       x: chrome.byline.x,
-      y: bottomOffset + chrome.byline.y + textAscent6(chrome.byline.style.fontSize)
+      y: bottomOffset + chrome.byline.y + textAscent3(chrome.byline.style.fontSize)
     });
     text.setAttribute("class", "oc-byline");
     text.setAttribute("font-family", chrome.byline.style.fontFamily);
@@ -9361,10 +7882,10 @@ function renderChrome4(parent, layout) {
     g.appendChild(text);
   }
   if (chrome.footer) {
-    const text = createSVGElement4("text");
-    setAttrs4(text, {
+    const text = createSVGElement3("text");
+    setAttrs3(text, {
       x: chrome.footer.x,
-      y: bottomOffset + chrome.footer.y + textAscent6(chrome.footer.style.fontSize)
+      y: bottomOffset + chrome.footer.y + textAscent3(chrome.footer.style.fontSize)
     });
     text.setAttribute("class", "oc-footer");
     text.setAttribute("font-family", chrome.footer.style.fontFamily);
@@ -9387,14 +7908,14 @@ function renderWatermark2(parent, layout) {
   const rightEdge = width - padding;
   const bottomEdge = height - padding;
   const fill = theme.colors.axis;
-  const a2 = createSVGElement4("a");
-  a2.setAttribute("href", BRAND_URL5);
-  a2.setAttributeNS(XLINK_NS4, "xlink:href", BRAND_URL5);
+  const a2 = createSVGElement3("a");
+  a2.setAttribute("href", BRAND_URL4);
+  a2.setAttributeNS(XLINK_NS3, "xlink:href", BRAND_URL4);
   a2.setAttribute("target", "_blank");
   a2.setAttribute("rel", "noopener");
   a2.setAttribute("class", "oc-chrome-ref");
-  const text = createSVGElement4("text");
-  setAttrs4(text, {
+  const text = createSVGElement3("text");
+  setAttrs3(text, {
     x: rightEdge,
     y: bottomEdge,
     "dominant-baseline": "alphabetic",
@@ -9404,14 +7925,14 @@ function renderWatermark2(parent, layout) {
     "fill-opacity": 0.55
   });
   text.style.setProperty("fill", fill);
-  const trySpan = createSVGElement4("tspan");
-  setAttrs4(trySpan, { "font-weight": 500 });
+  const trySpan = createSVGElement3("tspan");
+  setAttrs3(trySpan, { "font-weight": 500 });
   trySpan.textContent = "try";
-  const openDataSpan = createSVGElement4("tspan");
-  setAttrs4(openDataSpan, { "font-weight": 600, "font-size": 16 });
+  const openDataSpan = createSVGElement3("tspan");
+  setAttrs3(openDataSpan, { "font-weight": 600, "font-size": 16 });
   openDataSpan.textContent = "OpenData";
-  const aiSpan = createSVGElement4("tspan");
-  setAttrs4(aiSpan, { "font-weight": 500 });
+  const aiSpan = createSVGElement3("tspan");
+  setAttrs3(aiSpan, { "font-weight": 500 });
   aiSpan.textContent = ".ai";
   text.appendChild(trySpan);
   text.appendChild(openDataSpan);
@@ -9420,7 +7941,7 @@ function renderWatermark2(parent, layout) {
   parent.appendChild(a2);
 }
 function renderTiles(parent, tiles, animation) {
-  const g = createSVGElement4("g");
+  const g = createSVGElement3("g");
   g.setAttribute("class", "oc-tilemap-tiles");
   g.setAttribute("role", "list");
   const tileDelays = [];
@@ -9436,7 +7957,7 @@ function renderTiles(parent, tiles, animation) {
   }
   for (let i = 0; i < tiles.length; i++) {
     const tile = tiles[i];
-    const tileGroup = createSVGElement4("g");
+    const tileGroup = createSVGElement3("g");
     tileGroup.setAttribute("class", "oc-tilemap-tile");
     tileGroup.setAttribute("data-state", tile.stateCode);
     tileGroup.setAttribute("role", "listitem");
@@ -9455,8 +7976,8 @@ function renderTiles(parent, tiles, animation) {
         `${tileDelays[i]}ms`
       );
     }
-    const rect = createSVGElement4("rect");
-    setAttrs4(rect, {
+    const rect = createSVGElement3("rect");
+    setAttrs3(rect, {
       x: tile.x,
       y: tile.y,
       width: tile.size,
@@ -9468,8 +7989,8 @@ function renderTiles(parent, tiles, animation) {
       "stroke-width": tile.strokeWidth
     });
     tileGroup.appendChild(rect);
-    const codeLabel = createSVGElement4("text");
-    setAttrs4(codeLabel, {
+    const codeLabel = createSVGElement3("text");
+    setAttrs3(codeLabel, {
       x: tile.label.x,
       y: tile.label.y,
       "text-anchor": "middle",
@@ -9485,8 +8006,8 @@ function renderTiles(parent, tiles, animation) {
     codeLabel.textContent = tile.label.text;
     tileGroup.appendChild(codeLabel);
     if (tile.valueLabel.visible && tile.valueLabel.text) {
-      const valueLabel = createSVGElement4("text");
-      setAttrs4(valueLabel, {
+      const valueLabel = createSVGElement3("text");
+      setAttrs3(valueLabel, {
         x: tile.valueLabel.x,
         y: tile.valueLabel.y,
         "text-anchor": "middle",
@@ -9509,22 +8030,22 @@ function renderTiles(parent, tiles, animation) {
 function renderGradientLegend(parent, layout) {
   if (!layout.gradientLegend) return;
   const { gradientLegend } = layout;
-  const g = createSVGElement4("g");
+  const g = createSVGElement3("g");
   g.setAttribute("class", "oc-tilemap-legend");
-  const defs = parent.querySelector("defs") || createSVGElement4("defs");
+  const defs = parent.querySelector("defs") || createSVGElement3("defs");
   const exists = parent.querySelector("defs");
   if (!exists) {
     parent.insertBefore(defs, parent.firstChild);
   }
   const gradientId = `oc-tilemap-legend-gradient-${gradientIdCounter++}`;
-  const grad = createSVGElement4("linearGradient");
+  const grad = createSVGElement3("linearGradient");
   grad.id = gradientId;
   grad.setAttribute("x1", "0%");
   grad.setAttribute("y1", "0%");
   grad.setAttribute("x2", "100%");
   grad.setAttribute("y2", "0%");
   for (const stop of gradientLegend.colorStops) {
-    const s = createSVGElement4("stop");
+    const s = createSVGElement3("stop");
     const attrs = {
       offset: `${stop.offset * 100}%`,
       "stop-color": stop.color
@@ -9532,13 +8053,13 @@ function renderGradientLegend(parent, layout) {
     if (stop.opacity !== void 0) {
       attrs["stop-opacity"] = stop.opacity;
     }
-    setAttrs4(s, attrs);
+    setAttrs3(s, attrs);
     grad.appendChild(s);
   }
   defs.appendChild(grad);
   const barHeight = gradientLegend.bounds.height;
-  const bar = createSVGElement4("rect");
-  setAttrs4(bar, {
+  const bar = createSVGElement3("rect");
+  setAttrs3(bar, {
     x: gradientLegend.bounds.x,
     y: gradientLegend.bounds.y,
     width: gradientLegend.bounds.width,
@@ -9547,8 +8068,8 @@ function renderGradientLegend(parent, layout) {
     fill: `url(#${gradientId})`
   });
   g.appendChild(bar);
-  const minText = createSVGElement4("text");
-  setAttrs4(minText, {
+  const minText = createSVGElement3("text");
+  setAttrs3(minText, {
     x: gradientLegend.bounds.x,
     y: gradientLegend.bounds.y + gradientLegend.bounds.height + 14,
     "text-anchor": "start",
@@ -9562,8 +8083,8 @@ function renderGradientLegend(parent, layout) {
   );
   minText.textContent = gradientLegend.minLabel;
   g.appendChild(minText);
-  const maxText = createSVGElement4("text");
-  setAttrs4(maxText, {
+  const maxText = createSVGElement3("text");
+  setAttrs3(maxText, {
     x: gradientLegend.bounds.x + gradientLegend.bounds.width,
     y: gradientLegend.bounds.y + gradientLegend.bounds.height + 14,
     "text-anchor": "end",
@@ -9582,7 +8103,7 @@ function renderGradientLegend(parent, layout) {
 function renderTileMapSVG(layout, opts) {
   const { width, height, tiles, a11y, watermark, animation } = layout;
   const animate = opts?.animate && animation?.enabled;
-  const svg = createSVGElement4("svg");
+  const svg = createSVGElement3("svg");
   svg.setAttribute("viewBox", `0 0 ${width} ${height}`);
   svg.setAttribute("role", "img");
   if (a11y.altText) {
@@ -9595,14 +8116,18 @@ function renderTileMapSVG(layout, opts) {
     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_MAP4[animation.ease] || EASE_VAR_MAP4.smooth;
+    const easeVar = EASE_VAR_MAP3[animation.ease] || EASE_VAR_MAP3.smooth;
     svg.style.setProperty("--oc-animation-ease", easeVar);
   }
-  const defs = createSVGElement4("defs");
+  const defs = createSVGElement3("defs");
   svg.appendChild(defs);
-  renderChrome4(svg, layout);
+  renderChrome3(svg, layout);
   renderTiles(svg, tiles, animate ? animation : void 0);
-  renderGradientLegend(svg, layout);
+  if (layout.categoricalLegend) {
+    renderLegend(svg, layout.categoricalLegend);
+  } else {
+    renderGradientLegend(svg, layout);
+  }
   if (watermark) {
     renderWatermark2(svg, layout);
   }