@opendata-ai/openchart-vanilla 7.11.0 → 8.0.0-rc.2

package/dist/{chunk-EQ6DYFO7.js → chunk-5EOV5JQZ.js}

@@ -1,12 +1,3 @@
-// src/svg-ids.ts
-var counter = 0;
-function nextSvgId(prefix) {
-  return `${prefix}-${counter++}`;
-}
-function resetSvgIdCounter() {
-  counter = 0;
-}
-
 // src/renderers/svg-dom.ts
 var SVG_NS = "http://www.w3.org/2000/svg";
 var XLINK_NS = "http://www.w3.org/1999/xlink";
@@ -35,6 +26,15 @@ function applyTextStyle(el, style) {
   }
 }
 
+// src/svg-ids.ts
+var counter = 0;
+function nextSvgId(prefix) {
+  return `${prefix}-${counter++}`;
+}
+function resetSvgIdCounter() {
+  counter = 0;
+}
+
 // src/gradient-utils.ts
 import { isGradientDef } from "@opendata-ai/openchart-core";
 var SVG_NS2 = "http://www.w3.org/2000/svg";
@@ -116,16 +116,79 @@ function resolveMarkFill(fill, gradientMap) {
   return id ? `url(#${id})` : "#000000";
 }
 
+// src/pattern-utils.ts
+var SVG_NS3 = "http://www.w3.org/2000/svg";
+var TILE = 6;
+var LINE_OPACITY = 0.55;
+function patternKey(p) {
+  return `${p.type}|${p.base}|${p.line}`;
+}
+function createPatternElement(p, id) {
+  const el = document.createElementNS(SVG_NS3, "pattern");
+  el.setAttribute("id", id);
+  el.setAttribute("patternUnits", "userSpaceOnUse");
+  el.setAttribute("width", String(TILE));
+  el.setAttribute("height", String(TILE));
+  const bg = document.createElementNS(SVG_NS3, "rect");
+  bg.setAttribute("width", String(TILE));
+  bg.setAttribute("height", String(TILE));
+  bg.setAttribute("fill", p.base);
+  el.appendChild(bg);
+  if (p.type === "dot") {
+    const dot = document.createElementNS(SVG_NS3, "circle");
+    dot.setAttribute("cx", String(TILE / 2));
+    dot.setAttribute("cy", String(TILE / 2));
+    dot.setAttribute("r", "1.2");
+    dot.setAttribute("fill", p.line);
+    dot.setAttribute("fill-opacity", String(LINE_OPACITY));
+    el.appendChild(dot);
+    return el;
+  }
+  const d = p.type === "diagonal" ? `M0,${TILE} l${TILE},-${TILE} M-1.5,1.5 l3,-3 M${TILE - 1.5},${TILE + 1.5} l3,-3` : p.type === "crosshatch" ? `M0,0 l${TILE},${TILE} M${TILE},0 l-${TILE},${TILE}` : `M${TILE / 2},0 V${TILE}`;
+  const path = document.createElementNS(SVG_NS3, "path");
+  path.setAttribute("d", d);
+  path.setAttribute("stroke", p.line);
+  path.setAttribute("stroke-width", "1");
+  path.setAttribute("stroke-opacity", String(LINE_OPACITY));
+  el.appendChild(path);
+  return el;
+}
+function buildPatternDefs(marks, defs) {
+  const map = /* @__PURE__ */ new Map();
+  for (const mark of marks) {
+    const pattern = mark.pattern;
+    if (!pattern) continue;
+    const key = patternKey(pattern);
+    if (!map.has(key)) {
+      const id = nextSvgId("oc-pattern");
+      defs.appendChild(createPatternElement(pattern, id));
+      map.set(key, id);
+    }
+  }
+  return map;
+}
+function resolvePatternFill(pattern, patternMap) {
+  const id = patternMap.get(patternKey(pattern));
+  return id ? `url(#${id})` : pattern.base;
+}
+
 // src/renderers/marks.ts
 var currentAnimation;
 var currentGradientMap = /* @__PURE__ */ new Map();
+var currentPatternMap = /* @__PURE__ */ new Map();
 function setMarkRenderState(state) {
   currentAnimation = state.animation;
   currentGradientMap = state.gradientMap;
+  currentPatternMap = state.patternMap ?? /* @__PURE__ */ new Map();
 }
 function resetMarkRenderState() {
   currentAnimation = void 0;
   currentGradientMap = /* @__PURE__ */ new Map();
+  currentPatternMap = /* @__PURE__ */ new Map();
+}
+function resolveFillOrPattern(fill, pattern) {
+  if (pattern) return resolvePatternFill(pattern, currentPatternMap);
+  return resolveMarkFill(fill, currentGradientMap);
 }
 function stampAnimationAttrs(el, mark, fallbackIndex) {
   if (mark.key) {
@@ -198,7 +261,7 @@ function renderAreaMark(mark, index) {
     const fill = createSVGElement("path");
     setAttrs(fill, {
       d: mark.path,
-      fill: resolveMarkFill(mark.fill, currentGradientMap),
+      fill: resolveFillOrPattern(mark.fill, mark.pattern),
       "fill-opacity": mark.fillOpacity,
       stroke: "none"
     });
@@ -261,7 +324,7 @@ function renderRectMark(mark, index) {
       setAttrs(shapeEl, { rx: mark.cornerRadius, ry: mark.cornerRadius });
     }
   }
-  shapeEl.setAttribute("fill", String(resolveMarkFill(mark.fill, currentGradientMap)));
+  shapeEl.setAttribute("fill", resolveFillOrPattern(mark.fill, mark.pattern));
   if (mark.stroke) {
     shapeEl.setAttribute("stroke", mark.stroke);
   }
@@ -280,7 +343,7 @@ function renderArcMark(mark, index) {
   const path = createSVGElement("path");
   setAttrs(path, {
     d: mark.path,
-    fill: resolveMarkFill(mark.fill, currentGradientMap),
+    fill: resolveFillOrPattern(mark.fill, mark.pattern),
     stroke: mark.stroke,
     "stroke-width": mark.strokeWidth
   });
@@ -327,6 +390,9 @@ function renderTextMark(mark, index) {
     "font-size": mark.fontSize,
     "text-anchor": mark.textAnchor
   });
+  if (mark.dominantBaseline) {
+    text.setAttribute("dominant-baseline", mark.dominantBaseline);
+  }
   text.style.setProperty("fill", mark.fill);
   if (mark.fontWeight) {
     text.setAttribute("font-weight", String(mark.fontWeight));
@@ -478,53 +544,99 @@ function renderMarks(parent, layout) {
 // src/svg-renderer.ts
 import { clampStaggerDelay } from "@opendata-ai/openchart-engine";
 
+// src/animation-vars.ts
+var EASE_VAR_MAP = {
+  smooth: "var(--oc-ease-smooth)",
+  snappy: "var(--oc-ease-snappy)"
+};
+function stampAnimationVars(el, v) {
+  el.style.setProperty("--oc-animation-duration", `${v.duration}ms`);
+  el.style.setProperty("--oc-animation-stagger", `${v.stagger}ms`);
+  if (v.annotationDelay !== void 0) {
+    el.style.setProperty("--oc-annotation-delay", `${v.annotationDelay}ms`);
+  }
+  if (v.ease !== void 0) {
+    el.style.setProperty("--oc-animation-ease", EASE_VAR_MAP[v.ease] || EASE_VAR_MAP.smooth);
+  }
+  if (v.stackSegmentDuration !== void 0) {
+    el.style.setProperty("--oc-stack-segment-duration", `${v.stackSegmentDuration}ms`);
+  }
+}
+
 // 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;
+import {
+  ARROWHEAD_LENGTH,
+  BOLD_SPAN_FONT_WEIGHT,
+  computeArrowheadPoints,
+  DEFAULT_ANNOTATION_FONT_SIZE,
+  DEFAULT_LINE_HEIGHT,
+  parseAnnotationSpans
+} from "@opendata-ai/openchart-engine";
+var CONNECTOR_STROKE_WIDTH = 1.25;
+function renderArrowhead(parent, tipX, tipY, tangentX, tangentY, stroke) {
+  const head = computeArrowheadPoints(tipX, tipY, tangentX, tangentY);
+  const arrow = createSVGElement("polyline");
+  arrow.setAttribute("class", "oc-annotation-connector oc-annotation-arrowhead");
+  setAttrs(arrow, {
+    points: [
+      `${head.baseLeft.x},${head.baseLeft.y}`,
+      `${head.tip.x},${head.tip.y}`,
+      `${head.baseRight.x},${head.baseRight.y}`
+    ].join(" "),
+    fill: "none",
+    stroke,
+    "stroke-width": CONNECTOR_STROKE_WIDTH,
+    "stroke-linecap": "round",
+    "stroke-linejoin": "round"
+  });
+  parent.appendChild(arrow);
+}
+function renderCurvedConnector(parent, from, to, stroke, showArrow, exit) {
+  const dx = to.x - from.x;
+  const dy = to.y - from.y;
+  const vertical = exit ? exit === "vertical" : Math.abs(dy) >= Math.abs(dx);
+  const cpx = from.x + dx * (vertical ? 0.2 : 0.6);
+  const cpy = from.y + dy * (vertical ? 0.6 : 0.2);
+  const tx = to.x - cpx;
+  const ty = to.y - cpy;
   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 endX = showArrow ? to.x - tx / tLen * ARROWHEAD_LENGTH : to.x;
+  const endY = showArrow ? to.y - ty / tLen * ARROWHEAD_LENGTH : to.y;
   const path = createSVGElement("path");
   path.setAttribute("class", "oc-annotation-connector");
   setAttrs(path, {
-    d: `M ${from.x} ${from.y} C ${cp1x} ${cp1y}, ${cp2x} ${cp2y}, ${baseX} ${baseY}`,
+    d: `M ${from.x} ${from.y} Q ${cpx} ${cpy} ${endX} ${endY}`,
     fill: "none",
     stroke,
-    "stroke-width": 1.5
+    "stroke-width": CONNECTOR_STROKE_WIDTH,
+    "stroke-linecap": "round"
   });
   parent.appendChild(path);
-  const px = -uy;
-  const py = ux;
-  const arrow = createSVGElement("polygon");
-  arrow.setAttribute("class", "oc-annotation-connector");
-  setAttrs(arrow, {
-    points: [
-      `${to.x},${tipY}`,
-      `${baseX + px * arrowWidth},${baseY + py * arrowWidth}`,
-      `${baseX - px * arrowWidth},${baseY - py * arrowWidth}`
-    ].join(" "),
-    fill: stroke
-  });
-  parent.appendChild(arrow);
+  if (showArrow) {
+    renderArrowhead(parent, to.x, to.y, tx, ty, stroke);
+  }
+}
+function fillRichText(text, content, x, lineHeight) {
+  const lines = content.split("\n");
+  for (let i = 0; i < lines.length; i++) {
+    const spans = parseAnnotationSpans(lines[i]);
+    for (let s = 0; s < spans.length; s++) {
+      const tspan = createSVGElement("tspan");
+      if (s === 0) {
+        setAttrs(tspan, { x, dy: i === 0 ? 0 : lineHeight });
+      }
+      if (spans[s].bold) {
+        tspan.setAttribute("font-weight", String(BOLD_SPAN_FONT_WEIGHT));
+      }
+      tspan.textContent = spans[s].text;
+      text.appendChild(tspan);
+    }
+  }
 }
 function renderAnnotation(parent, annotation, index, bgColor) {
   const g = createSVGElement("g");
   g.setAttribute("class", `oc-annotation oc-annotation-${annotation.type}`);
-  g.setAttribute("data-annotation-index", String(index));
+  g.setAttribute("data-annotation-index", String(annotation.specIndex ?? index));
   if (annotation.id) {
     g.setAttribute("data-annotation-id", annotation.id);
   }
@@ -561,8 +673,8 @@ function renderAnnotation(parent, annotation, index, bgColor) {
     g.appendChild(line);
   }
   if (annotation.footnoteIndex != null && annotation.label) {
-    const cx = annotation.label.connector?.endpoint?.x ?? annotation.label.connector?.to.x ?? annotation.label.x;
-    const cy = annotation.label.connector?.endpoint?.y ?? annotation.label.connector?.to.y ?? annotation.label.y;
+    const cx = annotation.label.connector?.endpoint?.x ?? annotation.label.connector?.to.x ?? annotation.dot?.x ?? annotation.label.x;
+    const cy = annotation.label.connector?.endpoint?.y ?? annotation.label.connector?.to.y ?? annotation.dot?.y ?? annotation.label.y;
     const r = 8;
     const circle = createSVGElement("circle");
     circle.setAttribute("class", "oc-annotation-footnote-marker");
@@ -597,7 +709,7 @@ function renderAnnotation(parent, annotation, index, bgColor) {
     if (annotation.label.connector) {
       const c = annotation.label.connector;
       if (c.style === "curve") {
-        renderCurvedArrow(g, c.from, c.to, c.stroke);
+        renderCurvedConnector(g, c.from, c.to, c.stroke, c.arrow, c.exit);
       } else if (c.style === "drop-line") {
         const connector = createSVGElement("line");
         connector.setAttribute("class", "oc-annotation-connector oc-annotation-drop-line");
@@ -608,10 +720,31 @@ function renderAnnotation(parent, annotation, index, bgColor) {
           y2: c.to.y,
           stroke: c.stroke,
           "stroke-width": 1,
-          "stroke-opacity": 0.6,
+          "stroke-opacity": 0.7,
           "shape-rendering": "crispEdges"
         });
         g.appendChild(connector);
+      } else if (c.arrow) {
+        const dx = c.to.x - c.from.x;
+        const dy = c.to.y - c.from.y;
+        const dist = Math.sqrt(dx * dx + dy * dy) || 1;
+        const ux = dx / dist;
+        const uy = dy / dist;
+        const lineEndX = c.to.x - ux * ARROWHEAD_LENGTH;
+        const lineEndY = c.to.y - uy * ARROWHEAD_LENGTH;
+        const connector = createSVGElement("line");
+        connector.setAttribute("class", "oc-annotation-connector");
+        setAttrs(connector, {
+          x1: c.from.x,
+          y1: c.from.y,
+          x2: lineEndX,
+          y2: lineEndY,
+          stroke: c.stroke,
+          "stroke-width": CONNECTOR_STROKE_WIDTH,
+          "stroke-linecap": "round"
+        });
+        g.appendChild(connector);
+        renderArrowhead(g, c.to.x, c.to.y, dx, dy, c.stroke);
       } else {
         const connector = createSVGElement("line");
         connector.setAttribute("class", "oc-annotation-connector");
@@ -621,33 +754,11 @@ function renderAnnotation(parent, annotation, index, bgColor) {
           x2: c.to.x,
           y2: c.to.y,
           stroke: c.stroke,
-          "stroke-width": 1,
-          "stroke-opacity": 0.5
+          "stroke-width": CONNECTOR_STROKE_WIDTH,
+          "stroke-linecap": "round"
         });
         g.appendChild(connector);
       }
-      if (c.endpoint && c.style !== "curve") {
-        const ring = createSVGElement("circle");
-        ring.setAttribute("class", "oc-annotation-endpoint-ring");
-        setAttrs(ring, {
-          cx: c.endpoint.x,
-          cy: c.endpoint.y,
-          r: 5,
-          fill: bgColor ?? "#ffffff",
-          stroke: c.stroke,
-          "stroke-width": 1.5
-        });
-        g.appendChild(ring);
-        const dot = createSVGElement("circle");
-        dot.setAttribute("class", "oc-annotation-endpoint-dot");
-        setAttrs(dot, {
-          cx: c.endpoint.x,
-          cy: c.endpoint.y,
-          r: 2,
-          fill: c.stroke
-        });
-        g.appendChild(dot);
-      }
     }
     if (annotation.dot) {
       const dot = createSVGElement("circle");
@@ -666,41 +777,16 @@ function renderAnnotation(parent, annotation, index, bgColor) {
     text.setAttribute("class", "oc-annotation-label");
     setAttrs(text, { x: annotation.label.x, y: annotation.label.y });
     applyTextStyle(text, annotation.label.style);
-    const lines = annotation.label.text.split("\n");
-    const fontSize = annotation.label.style.fontSize ?? 12;
-    const lineHeight = fontSize * (annotation.label.style.lineHeight ?? 1.3);
-    const isMultiLine = lines.length > 1;
-    if (isMultiLine) {
-      for (let i = 0; i < lines.length; i++) {
-        const tspan = createSVGElement("tspan");
-        setAttrs(tspan, { x: annotation.label.x, dy: i === 0 ? 0 : lineHeight });
-        tspan.textContent = lines[i];
-        text.appendChild(tspan);
-      }
-    } else {
-      text.textContent = annotation.label.text;
-    }
-    if (annotation.label.background) {
+    const fontSize = annotation.label.style.fontSize ?? DEFAULT_ANNOTATION_FONT_SIZE;
+    const lineHeight = fontSize * (annotation.label.style.lineHeight ?? DEFAULT_LINE_HEIGHT);
+    fillRichText(text, annotation.label.text, annotation.label.x, lineHeight);
+    if (annotation.label.background && annotation.label.bounds) {
       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 b = annotation.label.bounds;
+      const bgX = b.x - pad;
+      const bgY = b.y - pad;
+      const bgW = b.width + pad * 2;
+      const bgH = b.height + pad * 2;
       const bgRect = createSVGElement("rect");
       bgRect.setAttribute("class", "oc-annotation-bg");
       setAttrs(bgRect, {
@@ -724,7 +810,9 @@ function renderAnnotation(parent, annotation, index, bgColor) {
       sub.setAttribute("class", "oc-annotation-subtitle");
       setAttrs(sub, { x: annotation.subtitle.x, y: annotation.subtitle.y });
       applyTextStyle(sub, annotation.subtitle.style);
-      sub.textContent = annotation.subtitle.text;
+      const subFontSize = annotation.subtitle.style.fontSize ?? DEFAULT_ANNOTATION_FONT_SIZE;
+      const subLineHeight = subFontSize * (annotation.subtitle.style.lineHeight ?? DEFAULT_LINE_HEIGHT);
+      fillRichText(sub, annotation.subtitle.text, annotation.subtitle.x, subLineHeight);
       g.appendChild(sub);
     }
   }
@@ -811,6 +899,11 @@ function renderAxis(parent, axis, orientation, layout) {
       }
       applyTextStyle(label, axis.tickLabelStyle);
       label.textContent = tick.label;
+      if (tick.fullLabel) {
+        const title = createSVGElement("title");
+        title.textContent = tick.fullLabel;
+        label.appendChild(title);
+      }
       g.appendChild(label);
     } else if (isInlineY) {
       const label = createSVGElement("text");
@@ -955,16 +1048,14 @@ function renderAxis(parent, axis, orientation, layout) {
       }
       setAttrs(axisLabel, attrs);
     } else if (orientation === "x") {
-      let titleY = area.y + area.height + 35;
+      const tickFontSize = axis.tickLabelStyle.fontSize;
+      const tickBand = Math.max(26, 4 + tickFontSize + Math.max(11, Math.ceil(tickFontSize * 0.7)));
+      let titleY = area.y + area.height + tickBand + 9;
       if (axis.tickAngle && Math.abs(axis.tickAngle) > 10) {
         const angleRad = Math.abs(axis.tickAngle) * (Math.PI / 180);
         let maxLabelWidth = 40;
         for (const tick of axis.ticks) {
-          const w = estimateTextWidth(
-            tick.label,
-            axis.tickLabelStyle.fontSize,
-            axis.tickLabelStyle.fontWeight
-          );
+          const w = estimateTextWidth(tick.label, tickFontSize, axis.tickLabelStyle.fontWeight);
           if (w > maxLabelWidth) maxLabelWidth = w;
         }
         const rotatedHeight = Math.min(maxLabelWidth * Math.sin(angleRad) + 6, 120);
@@ -1023,59 +1114,22 @@ function renderAxes(parent, layout) {
 }
 
 // src/renderers/brand.ts
-import { BRAND_FONT_SIZE, BRAND_MIN_WIDTH, textAscent as textAscent2 } from "@opendata-ai/openchart-core";
-var BRAND_URL = "https://tryopendata.ai";
-function renderBrand(parent, layout) {
-  if (layout.dimensions.width < BRAND_MIN_WIDTH) return;
-  const { width } = layout.dimensions;
-  const padding = layout.theme.spacing.padding;
-  const rightEdge = width - padding;
-  const fill = layout.theme.colors.axis;
-  const { chrome } = layout;
-  const bottomOffset = chrome.bottomAnchorY ?? layout.area.y + layout.area.height;
-  const firstBottom = chrome.source ?? chrome.byline ?? chrome.footer;
-  const { legend } = layout;
-  const bottomLegendOffset = legend.position === "bottom" && legend.bounds.height > 0 ? legend.bounds.height + 8 : 0;
-  const chromeY = firstBottom ? bottomOffset + firstBottom.y : bottomOffset + layout.theme.spacing.chartToFooter + bottomLegendOffset;
-  const a = createSVGElement("a");
-  a.setAttribute("href", BRAND_URL);
-  a.setAttributeNS(XLINK_NS, "xlink:href", BRAND_URL);
-  a.setAttribute("target", "_blank");
-  a.setAttribute("rel", "noopener");
-  a.setAttribute("class", "oc-chrome-ref");
-  const BRAND_LARGE = 16;
-  const text = createSVGElement("text");
-  setAttrs(text, {
-    x: rightEdge,
-    y: chromeY + textAscent2(BRAND_LARGE),
-    "font-family": layout.theme.fonts.family,
-    "font-size": BRAND_FONT_SIZE,
-    "text-anchor": "end",
-    "fill-opacity": 0.55
-  });
-  text.style.setProperty("fill", fill);
-  const trySpan = createSVGElement("tspan");
-  trySpan.setAttribute("font-weight", "500");
-  trySpan.textContent = "try";
-  text.appendChild(trySpan);
-  const openDataSpan = createSVGElement("tspan");
-  openDataSpan.setAttribute("font-weight", "600");
-  openDataSpan.setAttribute("font-size", String(BRAND_LARGE));
-  openDataSpan.textContent = "OpenData";
-  text.appendChild(openDataSpan);
-  const aiSpan = createSVGElement("tspan");
-  aiSpan.setAttribute("font-weight", "500");
-  aiSpan.textContent = ".ai";
-  text.appendChild(aiSpan);
-  a.appendChild(text);
-  parent.appendChild(a);
-}
+import { BRAND_FONT_SIZE, BRAND_MIN_WIDTH, textAscent as textAscent3 } from "@opendata-ai/openchart-core";
 
 // src/renderers/chrome.ts
-import { estimateTextWidth as estimateTextWidth2, textAscent as textAscent3, wrapText } from "@opendata-ai/openchart-core";
+import {
+  estimateTextWidth as estimateTextWidth2,
+  FOOTNOTE_LINE_HEIGHT,
+  footnoteBandHeight as footnoteBandHeightFor,
+  textAscent as textAscent2,
+  wrapText
+} from "@opendata-ai/openchart-core";
+function footnoteBandHeight(layout) {
+  return footnoteBandHeightFor(layout.chrome.footnotes?.length ?? 0, layout.theme);
+}
 function renderChromeElement(parent, element, className, chromeKey, measureText, uppercase = false) {
   const text = createSVGElement("text");
-  setAttrs(text, { x: element.x, y: element.y + textAscent3(element.style.fontSize) });
+  setAttrs(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);
@@ -1128,22 +1182,22 @@ function renderChrome(parent, layout) {
     renderChromeElement(g, chrome.subtitle, "oc-subtitle", "subtitle", measureText);
   }
   const bottomOffset = layout.chrome.bottomAnchorY ?? layout.area.y + layout.area.height;
-  let footnoteBandHeight = 0;
+  const bandHeight = footnoteBandHeight(layout);
   if (chrome.footnotes && chrome.footnotes.length > 0) {
     const fontSize = layout.theme.fonts.sizes.small;
     const pad = layout.theme.spacing.padding;
-    const lineHeight = fontSize * 1.3;
+    const lineHeight = fontSize * FOOTNOTE_LINE_HEIGHT;
     const style = {
       fontFamily: layout.theme.fonts.family,
       fontSize,
       fontWeight: layout.theme.fonts.weights.normal,
       fill: layout.theme.chrome.source.color,
-      lineHeight: 1.3,
+      lineHeight: FOOTNOTE_LINE_HEIGHT,
       textAnchor: "start"
     };
     for (let i = 0; i < chrome.footnotes.length; i++) {
       const f = chrome.footnotes[i];
-      const y = bottomOffset + layout.theme.spacing.chartToFooter + textAscent3(fontSize) + i * lineHeight;
+      const y = bottomOffset + layout.theme.spacing.chartToFooter + textAscent2(fontSize) + i * lineHeight;
       const el = createSVGElement("text");
       el.setAttribute("class", "oc-footnotes");
       setAttrs(el, { x: pad, y });
@@ -1151,12 +1205,11 @@ function renderChrome(parent, layout) {
       el.textContent = `${f.index}. ${f.text}`;
       g.appendChild(el);
     }
-    footnoteBandHeight = chrome.footnotes.length * lineHeight + 4;
   }
   if (chrome.source) {
     renderChromeElement(
       g,
-      { ...chrome.source, y: bottomOffset + chrome.source.y + footnoteBandHeight },
+      { ...chrome.source, y: bottomOffset + chrome.source.y + bandHeight },
       "oc-source",
       "source",
       measureText
@@ -1165,7 +1218,7 @@ function renderChrome(parent, layout) {
   if (chrome.byline) {
     renderChromeElement(
       g,
-      { ...chrome.byline, y: bottomOffset + chrome.byline.y + footnoteBandHeight },
+      { ...chrome.byline, y: bottomOffset + chrome.byline.y + bandHeight },
       "oc-byline",
       "byline",
       measureText
@@ -1174,14 +1227,14 @@ function renderChrome(parent, layout) {
   if (chrome.footer) {
     renderChromeElement(
       g,
-      { ...chrome.footer, y: bottomOffset + chrome.footer.y + footnoteBandHeight },
+      { ...chrome.footer, y: bottomOffset + chrome.footer.y + bandHeight },
       "oc-footer",
       "footer",
       measureText
     );
   }
   if (chrome.brand) {
-    const brandY = bottomOffset + chrome.brand.y + footnoteBandHeight;
+    const brandY = bottomOffset + chrome.brand.y + bandHeight;
     renderChromeElement(g, { ...chrome.brand, y: brandY }, "oc-brand", "brand", measureText);
     const textWidth = estimateTextWidth2(
       chrome.brand.text,
@@ -1198,6 +1251,55 @@ function renderChrome(parent, layout) {
   parent.appendChild(g);
 }
 
+// src/renderers/brand.ts
+var BRAND_URL = "https://tryopendata.ai";
+function renderBrand(parent, layout) {
+  if (layout.dimensions.width < BRAND_MIN_WIDTH) return;
+  const { width } = layout.dimensions;
+  const padding = layout.theme.spacing.padding;
+  const rightEdge = width - padding;
+  const fill = layout.theme.colors.axis;
+  const { chrome } = layout;
+  const bottomOffset = chrome.bottomAnchorY ?? layout.area.y + layout.area.height;
+  const firstBottom = chrome.source ?? chrome.byline ?? chrome.footer;
+  const { legend } = layout;
+  const bottomLegendOffset = legend.position === "bottom" && legend.bounds.height > 0 ? legend.bounds.height + 8 : 0;
+  const bandHeight = footnoteBandHeight(layout);
+  const chromeY = firstBottom ? bottomOffset + firstBottom.y + bandHeight : bottomOffset + layout.theme.spacing.chartToFooter + bottomLegendOffset + bandHeight;
+  const a = createSVGElement("a");
+  a.setAttribute("href", BRAND_URL);
+  a.setAttributeNS(XLINK_NS, "xlink:href", BRAND_URL);
+  a.setAttribute("target", "_blank");
+  a.setAttribute("rel", "noopener");
+  a.setAttribute("class", "oc-chrome-ref");
+  const BRAND_LARGE = 16;
+  const text = createSVGElement("text");
+  setAttrs(text, {
+    x: rightEdge,
+    y: chromeY + textAscent3(BRAND_LARGE),
+    "font-family": layout.theme.fonts.family,
+    "font-size": BRAND_FONT_SIZE,
+    "text-anchor": "end",
+    "fill-opacity": 0.55
+  });
+  text.style.setProperty("fill", fill);
+  const trySpan = createSVGElement("tspan");
+  trySpan.setAttribute("font-weight", "500");
+  trySpan.textContent = "try";
+  text.appendChild(trySpan);
+  const openDataSpan = createSVGElement("tspan");
+  openDataSpan.setAttribute("font-weight", "600");
+  openDataSpan.setAttribute("font-size", String(BRAND_LARGE));
+  openDataSpan.textContent = "OpenData";
+  text.appendChild(openDataSpan);
+  const aiSpan = createSVGElement("tspan");
+  aiSpan.setAttribute("font-weight", "500");
+  aiSpan.textContent = ".ai";
+  text.appendChild(aiSpan);
+  a.appendChild(text);
+  parent.appendChild(a);
+}
+
 // src/renderers/endpoint-labels.ts
 var LEADER_STROKE_WIDTH = 1;
 var LEADER_OPACITY = 0.45;
@@ -1306,7 +1408,125 @@ import { estimateTextWidth as estimateTextWidth3 } from "@opendata-ai/openchart-
 function isCategorical(legend) {
   return !legend.type || legend.type === "categorical";
 }
+function renderContinuousLegend(parent, legend) {
+  if (legend.bounds.width <= 0 || legend.bounds.height <= 0) return;
+  const g = createSVGElement("g");
+  g.setAttribute("class", "oc-legend oc-legend--continuous");
+  g.setAttribute("role", "img");
+  const first = legend.ticks[0];
+  const last = legend.ticks[legend.ticks.length - 1];
+  if (first && last) {
+    g.setAttribute("aria-label", `Color scale from ${first.label} to ${last.label}`);
+  } else {
+    g.setAttribute("aria-label", "Color scale");
+  }
+  if (legend.mode === "gradient") {
+    let defs = parent.querySelector("defs");
+    if (!defs) {
+      defs = createSVGElement("defs");
+      parent.insertBefore(defs, parent.firstChild);
+    }
+    const gradientId = nextSvgId("oc-legend-gradient");
+    const grad = createSVGElement("linearGradient");
+    grad.setAttribute("id", gradientId);
+    setAttrs(grad, { x1: "0%", y1: "0%", x2: "100%", y2: "0%" });
+    for (const stop of legend.colorStops) {
+      const s = createSVGElement("stop");
+      const attrs = {
+        offset: `${stop.offset * 100}%`,
+        "stop-color": stop.color
+      };
+      if (stop.opacity !== void 0) attrs["stop-opacity"] = stop.opacity;
+      setAttrs(s, attrs);
+      grad.appendChild(s);
+    }
+    defs.appendChild(grad);
+    const bar = createSVGElement("rect");
+    bar.setAttribute("class", "oc-legend-gradient-bar");
+    setAttrs(bar, {
+      x: legend.bar.x,
+      y: legend.bar.y,
+      width: legend.bar.width,
+      height: legend.bar.height,
+      rx: 2,
+      ry: 2,
+      fill: `url(#${gradientId})`
+    });
+    g.appendChild(bar);
+  } else {
+    for (const bin of legend.bins) {
+      const rect = createSVGElement("rect");
+      rect.setAttribute("class", "oc-legend-bin");
+      setAttrs(rect, {
+        x: bin.x,
+        y: legend.bar.y,
+        width: bin.width,
+        height: legend.bar.height,
+        fill: bin.color
+      });
+      g.appendChild(rect);
+    }
+  }
+  for (const tick of legend.ticks) {
+    const label = createSVGElement("text");
+    setAttrs(label, { x: tick.x, y: legend.labelY, "text-anchor": tick.anchor });
+    applyTextStyle(label, legend.labelStyle);
+    label.textContent = tick.label;
+    g.appendChild(label);
+  }
+  parent.appendChild(g);
+}
+function renderSizeLegend(parent, legend) {
+  if (legend.circles.length === 0) return;
+  const g = createSVGElement("g");
+  g.setAttribute("class", "oc-legend oc-legend--size");
+  g.setAttribute("aria-hidden", "true");
+  const ox = legend.bounds.x;
+  const oy = legend.bounds.y;
+  const labelX = ox + legend.circles[0].cx + legend.circles[0].radius + 8;
+  const leaderX = ox + legend.circles[0].cx + legend.circles[0].radius + 4;
+  for (const circle of legend.circles) {
+    const c = createSVGElement("circle");
+    setAttrs(c, {
+      cx: ox + circle.cx,
+      cy: oy + circle.cy,
+      r: circle.radius,
+      fill: "none",
+      stroke: legend.stroke,
+      "stroke-width": 1
+    });
+    g.appendChild(c);
+    const line = createSVGElement("line");
+    setAttrs(line, {
+      x1: ox + circle.cx,
+      y1: oy + circle.cy - circle.radius,
+      x2: leaderX,
+      y2: oy + circle.cy - circle.radius,
+      stroke: legend.stroke,
+      "stroke-width": 1,
+      "stroke-dasharray": "2 2"
+    });
+    g.appendChild(line);
+    const label = createSVGElement("text");
+    setAttrs(label, {
+      x: labelX,
+      y: oy + circle.labelY
+    });
+    applyTextStyle(label, legend.labelStyle);
+    label.textContent = circle.label;
+    g.appendChild(label);
+  }
+  parent.appendChild(g);
+}
 function renderLegend(parent, legend) {
+  if (legend.type === "continuous") {
+    renderContinuousLegend(parent, legend);
+    return;
+  }
+  if (legend.type === "size") {
+    renderSizeLegend(parent, legend);
+    return;
+  }
   if (!isCategorical(legend) || legend.entries.length === 0) return;
   const g = createSVGElement("g");
   g.setAttribute("class", "oc-legend");
@@ -1463,10 +1683,6 @@ function renderMetrics(parent, layout) {
 }
 
 // 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;
@@ -1486,8 +1702,12 @@ function renderChartSVG(layout, container, opts) {
     "text-rendering": "optimizeLegibility"
   });
   svg.style.height = `${height}px`;
-  svg.setAttribute("role", layout.a11y.role);
-  svg.setAttribute("aria-label", layout.a11y.altText);
+  if (layout.a11y.hidden) {
+    svg.setAttribute("aria-hidden", "true");
+  } else {
+    svg.setAttribute("role", layout.a11y.role);
+    svg.setAttribute("aria-label", layout.a11y.altText);
+  }
   if (layout.display === "sparkline") {
     svg.setAttribute("data-display", "sparkline");
   }
@@ -1497,11 +1717,6 @@ function renderChartSVG(layout, container, opts) {
   if (enterPhase) {
     const markCount = layout.marks.length;
     const stagger = clampStaggerDelay(enterPhase.staggerDelay, markCount);
-    svg.style.setProperty("--oc-animation-duration", `${enterPhase.duration}ms`);
-    svg.style.setProperty("--oc-animation-stagger", `${stagger}ms`);
-    svg.style.setProperty("--oc-annotation-delay", `${animation.annotationDelay}ms`);
-    const easeVar = EASE_VAR_MAP[enterPhase.ease] || EASE_VAR_MAP.smooth;
-    svg.style.setProperty("--oc-animation-ease", easeVar);
     let maxSegments = 0;
     for (const m of layout.marks) {
       if (m.type === "rect") {
@@ -1511,10 +1726,14 @@ function renderChartSVG(layout, container, opts) {
         }
       }
     }
-    if (maxSegments > 0) {
-      const segDuration = Math.round(enterPhase.duration / maxSegments);
-      svg.style.setProperty("--oc-stack-segment-duration", `${segDuration}ms`);
-    }
+    const stackSegmentDuration = maxSegments > 0 ? Math.round(enterPhase.duration / maxSegments) : void 0;
+    stampAnimationVars(svg, {
+      duration: enterPhase.duration,
+      stagger,
+      annotationDelay: animation.annotationDelay,
+      ease: enterPhase.ease,
+      stackSegmentDuration
+    });
   }
   if (layout.display !== "sparkline") {
     const bg = createSVGElement("rect");
@@ -1546,15 +1765,22 @@ function renderChartSVG(layout, container, opts) {
   clipPath.appendChild(clipRect);
   defs.appendChild(clipPath);
   const gradientMap = buildGradientDefs(layout.marks, defs);
+  const patternMap = buildPatternDefs(
+    layout.marks,
+    defs
+  );
   svg.appendChild(defs);
-  setMarkRenderState({ animation, gradientMap });
+  setMarkRenderState({ animation, gradientMap, patternMap });
   try {
     if (layout.facet) {
       renderFacetedPanels(svg, layout, layout.facet.panels, defs);
     } else {
       renderAxes(svg, layout);
+      const clipGroup = createSVGElement("g");
+      clipGroup.setAttribute("clip-path", `url(#${clipId})`);
       const clippedGroup = createSVGElement("g");
-      clippedGroup.setAttribute("clip-path", `url(#${clipId})`);
+      clippedGroup.setAttribute("data-oc-marks-group", "true");
+      clipGroup.appendChild(clippedGroup);
       const markLabelsOverlay = renderMarks(clippedGroup, layout);
       const hasLineOrAreaWithDataPoints = layout.marks.some(
         (m) => (m.type === "line" || m.type === "area") && m.dataPoints && m.dataPoints.length > 0
@@ -1599,7 +1825,7 @@ function renderChartSVG(layout, container, opts) {
         dotsGroup.setAttribute("pointer-events", "none");
         clippedGroup.appendChild(dotsGroup);
       }
-      svg.appendChild(clippedGroup);
+      svg.appendChild(clipGroup);
       if (markLabelsOverlay) {
         svg.appendChild(markLabelsOverlay);
       }
@@ -1622,7 +1848,9 @@ function renderChartSVG(layout, container, opts) {
         }
       }
     }
-    renderLegend(svg, layout.legend);
+    for (const legend of layout.legends ?? [layout.legend]) {
+      renderLegend(svg, legend);
+    }
     renderChrome(svg, layout);
     renderMetrics(svg, layout);
     if (layout.watermark && !layout.chrome.brand) {
@@ -1642,9 +1870,9 @@ function renderFacetedPanels(svg, layout, panels, defs) {
     const bg = createSVGElement("rect");
     setAttrs(bg, {
       x: panel.area.x,
-      y: panel.header.y - panel.header.fontSize * 0.6,
+      y: panel.area.y,
       width: panel.area.width,
-      height: panel.area.height + panel.header.fontSize + 4,
+      height: panel.area.height,
       rx: 3,
       fill: layout.theme.isDark ? "rgba(255,255,255,0.03)" : "rgba(0,0,0,0.02)"
     });
@@ -1693,355 +1921,20 @@ function renderFacetedPanels(svg, layout, panels, defs) {
   }
 }
 
-// src/tilemap-renderer.ts
-import { textAscent as textAscent4 } from "@opendata-ai/openchart-core";
-var SVG_NS3 = "http://www.w3.org/2000/svg";
-var XLINK_NS2 = "http://www.w3.org/1999/xlink";
-var BRAND_URL2 = "https://tryopendata.ai";
-var EASE_VAR_MAP2 = {
-  smooth: "var(--oc-ease-smooth)",
-  snappy: "var(--oc-ease-snappy)"
-};
-function createSVGElement2(tag) {
-  return document.createElementNS(SVG_NS3, tag);
-}
-function setAttrs2(el, attrs) {
-  for (const [key, value] of Object.entries(attrs)) {
-    el.setAttribute(key, String(value));
-  }
-}
-function renderChrome2(parent, layout) {
-  const g = createSVGElement2("g");
-  g.setAttribute("class", "oc-chrome");
-  const { chrome } = layout;
-  const bottomOffset = layout.area.y + layout.area.height;
-  if (chrome.title) {
-    const text = createSVGElement2("text");
-    setAttrs2(text, {
-      x: chrome.title.x,
-      y: chrome.title.y + textAscent4(chrome.title.style.fontSize)
-    });
-    text.setAttribute("class", "oc-title");
-    text.setAttribute("font-family", chrome.title.style.fontFamily);
-    text.setAttribute("font-size", String(chrome.title.style.fontSize));
-    text.setAttribute("font-weight", String(chrome.title.style.fontWeight));
-    text.style.setProperty("fill", chrome.title.style.fill);
-    text.textContent = chrome.title.text;
-    g.appendChild(text);
-  }
-  if (chrome.subtitle) {
-    const text = createSVGElement2("text");
-    setAttrs2(text, {
-      x: chrome.subtitle.x,
-      y: chrome.subtitle.y + textAscent4(chrome.subtitle.style.fontSize)
-    });
-    text.setAttribute("class", "oc-subtitle");
-    text.setAttribute("font-family", chrome.subtitle.style.fontFamily);
-    text.setAttribute("font-size", String(chrome.subtitle.style.fontSize));
-    text.setAttribute("font-weight", String(chrome.subtitle.style.fontWeight));
-    text.style.setProperty(
-      "fill",
-      chrome.subtitle.style.fill
-    );
-    text.textContent = chrome.subtitle.text;
-    g.appendChild(text);
-  }
-  if (chrome.source) {
-    const text = createSVGElement2("text");
-    setAttrs2(text, {
-      x: chrome.source.x,
-      y: bottomOffset + chrome.source.y + textAscent4(chrome.source.style.fontSize)
-    });
-    text.setAttribute("class", "oc-source");
-    text.setAttribute("font-family", chrome.source.style.fontFamily);
-    text.setAttribute("font-size", String(chrome.source.style.fontSize));
-    text.setAttribute("font-weight", String(chrome.source.style.fontWeight));
-    text.style.setProperty(
-      "fill",
-      chrome.source.style.fill
-    );
-    text.textContent = chrome.source.text;
-    g.appendChild(text);
-  }
-  if (chrome.byline) {
-    const text = createSVGElement2("text");
-    setAttrs2(text, {
-      x: chrome.byline.x,
-      y: bottomOffset + chrome.byline.y + textAscent4(chrome.byline.style.fontSize)
-    });
-    text.setAttribute("class", "oc-byline");
-    text.setAttribute("font-family", chrome.byline.style.fontFamily);
-    text.setAttribute("font-size", String(chrome.byline.style.fontSize));
-    text.setAttribute("font-weight", String(chrome.byline.style.fontWeight));
-    text.style.setProperty(
-      "fill",
-      chrome.byline.style.fill
-    );
-    text.textContent = chrome.byline.text;
-    g.appendChild(text);
-  }
-  if (chrome.footer) {
-    const text = createSVGElement2("text");
-    setAttrs2(text, {
-      x: chrome.footer.x,
-      y: bottomOffset + chrome.footer.y + textAscent4(chrome.footer.style.fontSize)
-    });
-    text.setAttribute("class", "oc-footer");
-    text.setAttribute("font-family", chrome.footer.style.fontFamily);
-    text.setAttribute("font-size", String(chrome.footer.style.fontSize));
-    text.setAttribute("font-weight", String(chrome.footer.style.fontWeight));
-    text.style.setProperty(
-      "fill",
-      chrome.footer.style.fill
-    );
-    text.textContent = chrome.footer.text;
-    g.appendChild(text);
-  }
-  parent.appendChild(g);
-}
-function renderWatermark(parent, layout) {
-  if (layout.width < 480) return;
-  const { width, height } = layout;
-  const { theme } = layout;
-  const padding = theme.spacing.padding;
-  const rightEdge = width - padding;
-  const bottomEdge = height - padding;
-  const fill = theme.colors.axis;
-  const a = createSVGElement2("a");
-  a.setAttribute("href", BRAND_URL2);
-  a.setAttributeNS(XLINK_NS2, "xlink:href", BRAND_URL2);
-  a.setAttribute("target", "_blank");
-  a.setAttribute("rel", "noopener");
-  a.setAttribute("class", "oc-chrome-ref");
-  const text = createSVGElement2("text");
-  setAttrs2(text, {
-    x: rightEdge,
-    y: bottomEdge,
-    "dominant-baseline": "alphabetic",
-    "text-anchor": "end",
-    "font-family": theme.fonts.family,
-    "font-size": 12,
-    "fill-opacity": 0.55
-  });
-  text.style.setProperty("fill", fill);
-  const trySpan = createSVGElement2("tspan");
-  setAttrs2(trySpan, { "font-weight": 500 });
-  trySpan.textContent = "try";
-  const openDataSpan = createSVGElement2("tspan");
-  setAttrs2(openDataSpan, { "font-weight": 600, "font-size": 16 });
-  openDataSpan.textContent = "OpenData";
-  const aiSpan = createSVGElement2("tspan");
-  setAttrs2(aiSpan, { "font-weight": 500 });
-  aiSpan.textContent = ".ai";
-  text.appendChild(trySpan);
-  text.appendChild(openDataSpan);
-  text.appendChild(aiSpan);
-  a.appendChild(text);
-  parent.appendChild(a);
-}
-function renderTiles(parent, tiles, animation) {
-  const g = createSVGElement2("g");
-  g.setAttribute("class", "oc-tilemap-tiles");
-  g.setAttribute("role", "list");
-  const tileDelays = [];
-  if (animation?.enter) {
-    const baseStagger = 800 / Math.max(tiles.length, 1);
-    let seed = 17;
-    for (let i = 0; i < tiles.length; i++) {
-      const idx = tiles[i].animationIndex ?? i;
-      seed = seed * 1103515245 + 12345 & 2147483647;
-      const jitter = (seed % 1e3 / 1e3 - 0.5) * 0.8;
-      tileDelays.push(Math.max(0, Math.round(idx * baseStagger * (1 + jitter))));
-    }
-  }
-  for (let i = 0; i < tiles.length; i++) {
-    const tile = tiles[i];
-    const tileGroup = createSVGElement2("g");
-    tileGroup.setAttribute("class", "oc-tilemap-tile");
-    tileGroup.setAttribute("data-state", tile.stateCode);
-    tileGroup.setAttribute("role", "listitem");
-    if (tile.aria?.label) {
-      tileGroup.setAttribute("aria-label", tile.aria.label);
-    }
-    if (animation?.enter) {
-      const idx = tile.animationIndex ?? i;
-      tileGroup.setAttribute("data-animation-index", String(idx));
-      tileGroup.style.setProperty(
-        "--oc-mark-index",
-        String(idx)
-      );
-      tileGroup.style.setProperty(
-        "--oc-tile-delay",
-        `${tileDelays[i]}ms`
-      );
-    }
-    const rect = createSVGElement2("rect");
-    setAttrs2(rect, {
-      x: tile.x,
-      y: tile.y,
-      width: tile.size,
-      height: tile.size,
-      rx: tile.cornerRadius,
-      fill: tile.fill,
-      "fill-opacity": tile.fillOpacity ?? 1,
-      stroke: tile.stroke,
-      "stroke-width": tile.strokeWidth
-    });
-    tileGroup.appendChild(rect);
-    const codeLabel = createSVGElement2("text");
-    setAttrs2(codeLabel, {
-      x: tile.label.x,
-      y: tile.label.y,
-      "text-anchor": "middle",
-      "dominant-baseline": "central",
-      "font-family": tile.label.style.fontFamily,
-      "font-size": tile.label.style.fontSize,
-      "font-weight": tile.label.style.fontWeight
-    });
-    codeLabel.style.setProperty(
-      "fill",
-      tile.label.style.fill
-    );
-    codeLabel.textContent = tile.label.text;
-    tileGroup.appendChild(codeLabel);
-    if (tile.valueLabel.visible && tile.valueLabel.text) {
-      const valueLabel = createSVGElement2("text");
-      setAttrs2(valueLabel, {
-        x: tile.valueLabel.x,
-        y: tile.valueLabel.y,
-        "text-anchor": "middle",
-        "dominant-baseline": "central",
-        "font-family": tile.valueLabel.style.fontFamily,
-        "font-size": tile.valueLabel.style.fontSize,
-        "font-weight": tile.valueLabel.style.fontWeight
-      });
-      valueLabel.style.setProperty(
-        "fill",
-        tile.valueLabel.style.fill
-      );
-      valueLabel.textContent = tile.valueLabel.text;
-      tileGroup.appendChild(valueLabel);
-    }
-    g.appendChild(tileGroup);
-  }
-  parent.appendChild(g);
-}
-function renderGradientLegend(parent, layout) {
-  if (!layout.gradientLegend) return;
-  const { gradientLegend } = layout;
-  const g = createSVGElement2("g");
-  g.setAttribute("class", "oc-tilemap-legend");
-  const defs = parent.querySelector("defs") || createSVGElement2("defs");
-  const exists = parent.querySelector("defs");
-  if (!exists) {
-    parent.insertBefore(defs, parent.firstChild);
-  }
-  const gradientId = nextSvgId("oc-tilemap-legend-gradient");
-  const grad = createSVGElement2("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 = createSVGElement2("stop");
-    const attrs = {
-      offset: `${stop.offset * 100}%`,
-      "stop-color": stop.color
-    };
-    if (stop.opacity !== void 0) {
-      attrs["stop-opacity"] = stop.opacity;
-    }
-    setAttrs2(s, attrs);
-    grad.appendChild(s);
-  }
-  defs.appendChild(grad);
-  const barHeight = gradientLegend.bounds.height;
-  const bar = createSVGElement2("rect");
-  setAttrs2(bar, {
-    x: gradientLegend.bounds.x,
-    y: gradientLegend.bounds.y,
-    width: gradientLegend.bounds.width,
-    height: barHeight,
-    rx: barHeight / 2,
-    fill: `url(#${gradientId})`
-  });
-  g.appendChild(bar);
-  const minText = createSVGElement2("text");
-  setAttrs2(minText, {
-    x: gradientLegend.bounds.x,
-    y: gradientLegend.bounds.y + gradientLegend.bounds.height + 14,
-    "text-anchor": "start",
-    "font-family": gradientLegend.labelStyle.fontFamily,
-    "font-size": gradientLegend.labelStyle.fontSize,
-    "font-weight": gradientLegend.labelStyle.fontWeight
-  });
-  minText.style.setProperty(
-    "fill",
-    gradientLegend.labelStyle.fill
-  );
-  minText.textContent = gradientLegend.minLabel;
-  g.appendChild(minText);
-  const maxText = createSVGElement2("text");
-  setAttrs2(maxText, {
-    x: gradientLegend.bounds.x + gradientLegend.bounds.width,
-    y: gradientLegend.bounds.y + gradientLegend.bounds.height + 14,
-    "text-anchor": "end",
-    "font-family": gradientLegend.labelStyle.fontFamily,
-    "font-size": gradientLegend.labelStyle.fontSize,
-    "font-weight": gradientLegend.labelStyle.fontWeight
-  });
-  maxText.style.setProperty(
-    "fill",
-    gradientLegend.labelStyle.fill
-  );
-  maxText.textContent = gradientLegend.maxLabel;
-  g.appendChild(maxText);
-  parent.appendChild(g);
-}
-function renderTileMapSVG(layout, opts) {
-  const { width, height, tiles, a11y, watermark, animation } = layout;
-  const animate = opts?.animate && !!animation?.enter;
-  const svg = createSVGElement2("svg");
-  svg.setAttribute("viewBox", `0 0 ${width} ${height}`);
-  svg.setAttribute("role", "img");
-  if (a11y.altText) {
-    svg.setAttribute("aria-label", a11y.altText);
-  }
-  const classes = animate ? "oc-tilemap oc-animate" : "oc-tilemap";
-  svg.setAttribute("class", classes);
-  if (animate && animation?.enter) {
-    const stagger = Math.max(5, Math.round(800 / Math.max(tiles.length, 1)));
-    svg.style.setProperty("--oc-animation-duration", `${animation.enter.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.enter.ease] || EASE_VAR_MAP2.smooth;
-    svg.style.setProperty("--oc-animation-ease", easeVar);
-  }
-  const defs = createSVGElement2("defs");
-  svg.appendChild(defs);
-  renderChrome2(svg, layout);
-  renderTiles(svg, tiles, animate ? animation : void 0);
-  if (layout.categoricalLegend) {
-    renderLegend(svg, layout.categoricalLegend);
-  } else {
-    renderGradientLegend(svg, layout);
-  }
-  if (watermark) {
-    renderWatermark(svg, layout);
-  }
-  return svg;
-}
-
 export {
+  stampAnimationVars,
+  SVG_NS,
+  createSVGElement,
+  setAttrs,
+  renderChromeElement,
+  nextSvgId,
   resetSvgIdCounter,
+  renderLegend,
   buildGradientDefs,
   resolveMarkFill,
-  SVG_NS,
   registerMarkRenderer,
   rectPathWithCorners,
   renderSingleMark,
-  renderChartSVG,
-  renderTileMapSVG
+  renderChartSVG
 };
-//# sourceMappingURL=chunk-EQ6DYFO7.js.map
+//# sourceMappingURL=chunk-5EOV5JQZ.js.map