@opendata-ai/openchart-vanilla 6.25.4 → 6.27.0

package/dist/index.js

@@ -2805,7 +2805,7 @@ function createGraph(container, spec, options) {
     }
     chromeEl = document.createElement("div");
     chromeEl.className = "oc-graph-chrome";
-    renderChrome3();
+    renderChrome4();
     wrapper.appendChild(chromeEl);
     canvas = document.createElement("canvas");
     canvas.className = "oc-graph-canvas";
@@ -2825,7 +2825,7 @@ function createGraph(container, spec, options) {
     renderer = new GraphCanvasRenderer(canvas);
     renderer.resize(width, canvasHeight);
   }
-  function renderChrome3() {
+  function renderChrome4() {
     if (!chromeEl) return;
     let html = "";
     if (compilation.chrome.title) {
@@ -2843,7 +2843,7 @@ function createGraph(container, spec, options) {
   }
   function renderLegend3() {
     if (!legendEl) return;
-    const entries = compilation.legend.entries;
+    const entries = "entries" in compilation.legend ? compilation.legend.entries : [];
     if (entries.length === 0) {
       legendEl.style.display = "none";
       return;
@@ -3139,7 +3139,7 @@ function createGraph(container, spec, options) {
     compilation = compile();
     adjacencyMap = buildAdjacencyMap(compilation.edges);
     buildDataMaps();
-    renderChrome3();
+    renderChrome4();
     renderLegend3();
     initSimulation();
     initInteraction();
@@ -3174,7 +3174,7 @@ function createGraph(container, spec, options) {
       };
     });
     spatialIndex.rebuild(positionedNodes);
-    renderChrome3();
+    renderChrome4();
     renderLegend3();
     needsRender = true;
     scheduleRender();
@@ -3637,6 +3637,18 @@ import {
   getAxisTitleOffset,
   TICK_LABEL_OFFSET
 } from "@opendata-ai/openchart-core";
+function appendCompoundLabel(parent, primaryText, subtitle, fontWeight) {
+  const primarySpan = createSVGElement("tspan");
+  primarySpan.setAttribute("font-weight", String(fontWeight));
+  primarySpan.textContent = primaryText;
+  parent.appendChild(primarySpan);
+  const subtitleSpan = createSVGElement("tspan");
+  subtitleSpan.setAttribute("dx", "0.5em");
+  subtitleSpan.textContent = subtitle;
+  subtitleSpan.setAttribute("font-weight", "400");
+  subtitleSpan.setAttribute("fill-opacity", "0.6");
+  parent.appendChild(subtitleSpan);
+}
 function renderAxis(parent, axis, orientation, layout) {
   const g = createSVGElement("g");
   const isRight = orientation === "y" && axis.orient === "right";
@@ -3693,27 +3705,62 @@ function renderAxis(parent, axis, orientation, layout) {
         const availableWidth = area.x - TICK_LABEL_OFFSET;
         const fontSize = axis.tickLabelStyle.fontSize;
         const fontWeight = axis.tickLabelStyle.fontWeight;
-        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;
+        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 {
-              hi = mid - 1;
+              primaryText = ellipsis;
             }
+            appendCompoundLabel(label, primaryText, tick.subtitle, fontWeight);
+            const titleEl = createSVGElement("title");
+            titleEl.textContent = `${tick.label}  ${tick.subtitle}`;
+            label.appendChild(titleEl);
+          } else {
+            appendCompoundLabel(label, tick.label, tick.subtitle, fontWeight);
           }
-          label.textContent = lo > 0 ? tick.label.slice(0, lo).trimEnd() + ellipsis : ellipsis;
-          const titleEl = createSVGElement("title");
-          titleEl.textContent = tick.label;
-          label.appendChild(titleEl);
         } else {
-          label.textContent = tick.label;
+          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 = createSVGElement("title");
+            titleEl.textContent = tick.label;
+            label.appendChild(titleEl);
+          } else {
+            label.textContent = tick.label;
+          }
         }
       } else {
         label.textContent = tick.label;
@@ -3930,8 +3977,11 @@ function renderChrome(parent, layout) {
 
 // src/renderers/legend.ts
 import { estimateTextWidth as estimateTextWidth3 } from "@opendata-ai/openchart-core";
+function isCategorical(legend) {
+  return !legend.type || legend.type === "categorical";
+}
 function renderLegend(parent, legend) {
-  if (legend.entries.length === 0) return;
+  if (!isCategorical(legend) || legend.entries.length === 0) return;
   const g = createSVGElement("g");
   g.setAttribute("class", "oc-legend");
   g.setAttribute("role", "list");
@@ -4364,6 +4414,9 @@ function renderChartSVG(layout, container, opts) {
   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) {
@@ -4434,6 +4487,24 @@ function renderChartSVG(layout, container, opts) {
       overlay.setAttribute("class", "oc-voronoi-overlay");
       overlay.setAttribute("data-voronoi-overlay", "true");
       clippedGroup.appendChild(overlay);
+      if (opts?.crosshair) {
+        const crosshairLine = createSVGElement("line");
+        crosshairLine.setAttribute("data-crosshair", "true");
+        crosshairLine.setAttribute("class", "oc-crosshair");
+        setAttrs(crosshairLine, {
+          x1: 0,
+          y1: layout.area.y,
+          x2: 0,
+          y2: layout.area.y + layout.area.height,
+          stroke: layout.theme.colors.gridline,
+          "stroke-opacity": "0.5",
+          "stroke-dasharray": "4,3",
+          "stroke-width": "1",
+          "pointer-events": "none"
+        });
+        crosshairLine.style.display = "none";
+        clippedGroup.appendChild(crosshairLine);
+      }
     }
     svg.appendChild(clippedGroup);
     renderAnnotations(svg, layout);
@@ -4695,6 +4766,7 @@ function wireVoronoiTooltipEvents(svg, layout, tooltipManager) {
   const voronoiPoints = collectVoronoiPoints(layout);
   if (voronoiPoints.length === 0) return () => {
   };
+  const crosshair = svg.querySelector("[data-crosshair]");
   const cleanups = [];
   const handleMouseMove = (e) => {
     const mouseEvent = e;
@@ -4707,11 +4779,17 @@ function wireVoronoiTooltipEvents(svg, layout, tooltipManager) {
     const svgY = (mouseEvent.clientY - svgRect.top) * scaleY;
     const nearest = findNearestPoint(voronoiPoints, svgX, svgY);
     if (!nearest?.tooltip) return;
+    if (crosshair) {
+      crosshair.setAttribute("x1", String(nearest.x));
+      crosshair.setAttribute("x2", String(nearest.x));
+      crosshair.style.display = "";
+    }
     const containerX = mouseEvent.clientX - svgRect.left;
     const containerY = mouseEvent.clientY - svgRect.top;
     tooltipManager.show(nearest.tooltip, containerX, containerY);
   };
   const handleMouseLeave = () => {
+    if (crosshair) crosshair.style.display = "none";
     tooltipManager.hide();
   };
   const handleTouchStart = (e) => {
@@ -4727,6 +4805,11 @@ function wireVoronoiTooltipEvents(svg, layout, tooltipManager) {
       const svgY = (touch.clientY - svgRect.top) * scaleY;
       const nearest = findNearestPoint(voronoiPoints, svgX, svgY);
       if (!nearest?.tooltip) return;
+      if (crosshair) {
+        crosshair.setAttribute("x1", String(nearest.x));
+        crosshair.setAttribute("x2", String(nearest.x));
+        crosshair.style.display = "";
+      }
       const containerX = touch.clientX - svgRect.left;
       const containerY = touch.clientY - svgRect.top;
       tooltipManager.show(nearest.tooltip, containerX, containerY);
@@ -5058,7 +5141,7 @@ function wireAnnotationDrag(svg, specAnnotations, onAnnotationEdit, onEdit, setD
   };
 }
 function wireConnectorEndpointDrag(svg, specAnnotations, onEdit, setDragging) {
-  const SVG_NS4 = "http://www.w3.org/2000/svg";
+  const SVG_NS5 = "http://www.w3.org/2000/svg";
   const cleanups = [];
   const annotationGroups = svg.querySelectorAll(".oc-annotation-text");
   for (const el of annotationGroups) {
@@ -5097,7 +5180,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_NS4, "circle");
+      const handleEl = document.createElementNS(SVG_NS5, "circle");
       handleEl.setAttribute("class", "oc-connector-handle");
       handleEl.setAttribute("data-endpoint", ep.name);
       handleEl.setAttribute("cx", String(ep.cx));
@@ -5612,7 +5695,7 @@ function getEditableElements(spec, layout) {
   for (const series of seriesLabels) {
     refs.push(elementRef.seriesLabel(series));
   }
-  if (layout.legend.entries.length > 0) {
+  if ("entries" in layout.legend && layout.legend.entries.length > 0) {
     refs.push(elementRef.legend());
   }
   return refs;
@@ -5733,6 +5816,20 @@ function createChart(container, spec, options) {
   }
   function getContainerDimensions() {
     const rect = container.getBoundingClientRect();
+    const isSparkline = "display" in currentSpec && currentSpec.display === "sparkline";
+    if (isSparkline) {
+      let width = rect.width;
+      let height = rect.height;
+      if (!height && container.parentElement) {
+        const parentRect = container.parentElement.getBoundingClientRect();
+        height = parentRect.height;
+        if (!width) width = parentRect.width;
+      }
+      return {
+        width: Math.max(width || 200, 30),
+        height: Math.max(height || 40, 20)
+      };
+    }
     return {
       width: Math.max(rect.width || 600, 100),
       height: Math.max(rect.height || 400, 100)
@@ -5994,7 +6091,11 @@ function createChart(container, spec, options) {
     }
     currentLayout = compile();
     const shouldAnimate = isFirstRender && !!currentLayout.animation?.enabled;
-    svgElement = renderChartSVG(currentLayout, container, { animate: shouldAnimate });
+    const crosshair = !!currentLayout.crosshair;
+    svgElement = renderChartSVG(currentLayout, container, {
+      animate: shouldAnimate,
+      crosshair
+    });
     tooltipManager = createTooltipManager(container);
     cleanupTooltipEvents = wireTooltipEvents(
       svgElement,
@@ -6706,8 +6807,9 @@ function renderBrand2(parent, layout) {
   a2.appendChild(text);
   parent.appendChild(a2);
 }
-function renderLegend2(parent, legend) {
-  if (legend.entries.length === 0) return;
+function renderLegend2(parent, legendLayout) {
+  if (!("entries" in legendLayout) || legendLayout.entries.length === 0) return;
+  const legend = legendLayout;
   const g = createSVGElement2("g");
   g.setAttribute("class", "oc-legend");
   g.setAttribute("role", "list");
@@ -8125,6 +8227,535 @@ function createTable(container, spec, options) {
     destroy
   };
 }
+
+// src/tilemap-mount.ts
+import { compileTileMap } from "@opendata-ai/openchart-engine";
+
+// src/tilemap-renderer.ts
+var SVG_NS4 = "http://www.w3.org/2000/svg";
+var XLINK_NS3 = "http://www.w3.org/1999/xlink";
+var BRAND_URL4 = "https://tryopendata.ai";
+var EASE_VAR_MAP4 = {
+  smooth: "var(--oc-ease-smooth)",
+  snappy: "var(--oc-ease-snappy)"
+};
+var gradientIdCounter = 0;
+function createSVGElement3(tag) {
+  return document.createElementNS(SVG_NS4, tag);
+}
+function setAttrs3(el, attrs) {
+  for (const [key, value] of Object.entries(attrs)) {
+    el.setAttribute(key, String(value));
+  }
+}
+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 = createSVGElement3("text");
+    setAttrs3(text, { x: chrome.title.x, y: chrome.title.y });
+    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 = createSVGElement3("text");
+    setAttrs3(text, { x: chrome.subtitle.x, y: chrome.subtitle.y });
+    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 = createSVGElement3("text");
+    setAttrs3(text, { x: chrome.source.x, y: bottomOffset + chrome.source.y });
+    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 = createSVGElement3("text");
+    setAttrs3(text, { x: chrome.byline.x, y: bottomOffset + chrome.byline.y });
+    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 = createSVGElement3("text");
+    setAttrs3(text, { x: chrome.footer.x, y: bottomOffset + chrome.footer.y });
+    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 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 = createSVGElement3("text");
+  setAttrs3(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 = createSVGElement3("tspan");
+  setAttrs3(trySpan, { "font-weight": 500 });
+  trySpan.textContent = "try";
+  const openDataSpan = createSVGElement3("tspan");
+  setAttrs3(openDataSpan, { "font-weight": 600, "font-size": 16 });
+  openDataSpan.textContent = "OpenData";
+  const aiSpan = createSVGElement3("tspan");
+  setAttrs3(aiSpan, { "font-weight": 500 });
+  aiSpan.textContent = ".ai";
+  text.appendChild(trySpan);
+  text.appendChild(openDataSpan);
+  text.appendChild(aiSpan);
+  a2.appendChild(text);
+  parent.appendChild(a2);
+}
+function renderTiles(parent, tiles, animation) {
+  const g = createSVGElement3("g");
+  g.setAttribute("class", "oc-tilemap-tiles");
+  g.setAttribute("role", "list");
+  const tileDelays = [];
+  if (animation?.enabled) {
+    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 = createSVGElement3("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?.enabled) {
+      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 = createSVGElement3("rect");
+    setAttrs3(rect, {
+      x: tile.x,
+      y: tile.y,
+      width: tile.size,
+      height: tile.size,
+      rx: tile.cornerRadius,
+      fill: tile.fill,
+      stroke: tile.stroke,
+      "stroke-width": tile.strokeWidth
+    });
+    tileGroup.appendChild(rect);
+    const codeLabel = createSVGElement3("text");
+    setAttrs3(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 = createSVGElement3("text");
+      setAttrs3(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 = createSVGElement3("g");
+  g.setAttribute("class", "oc-tilemap-legend");
+  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 = 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 = createSVGElement3("stop");
+    setAttrs3(s, { offset: `${stop.offset * 100}%`, "stop-color": stop.color });
+    grad.appendChild(s);
+  }
+  defs.appendChild(grad);
+  const bar = createSVGElement3("rect");
+  setAttrs3(bar, {
+    x: gradientLegend.bounds.x,
+    y: gradientLegend.bounds.y,
+    width: gradientLegend.bounds.width,
+    height: gradientLegend.bounds.height,
+    rx: 3,
+    fill: `url(#${gradientId})`
+  });
+  g.appendChild(bar);
+  const minText = createSVGElement3("text");
+  setAttrs3(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 = createSVGElement3("text");
+  setAttrs3(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?.enabled;
+  const svg = createSVGElement3("svg");
+  svg.setAttribute("viewBox", `0 0 ${width} ${height}`);
+  svg.setAttribute("width", String(width));
+  svg.setAttribute("height", String(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) {
+    const stagger = Math.max(5, Math.round(800 / Math.max(tiles.length, 1)));
+    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;
+    svg.style.setProperty("--oc-animation-ease", easeVar);
+  }
+  const defs = createSVGElement3("defs");
+  svg.appendChild(defs);
+  renderChrome3(svg, layout);
+  renderTiles(svg, tiles, animate ? animation : void 0);
+  renderGradientLegend(svg, layout);
+  if (watermark) {
+    renderWatermark(svg, layout);
+  }
+  return svg;
+}
+
+// src/tilemap-mount.ts
+function resolveDarkMode5(mode) {
+  if (mode === "force") return true;
+  if (mode === "off" || mode === void 0) return false;
+  if (typeof window !== "undefined" && window.matchMedia) {
+    return window.matchMedia("(prefers-color-scheme: dark)").matches;
+  }
+  return false;
+}
+function createTileMap(container, spec, options) {
+  let currentSpec = spec;
+  let currentLayout;
+  let destroyed = false;
+  let svgElement = null;
+  let tooltipManager = null;
+  let cleanupTooltipEvents = null;
+  let disconnectResize = null;
+  let animationCleanup = null;
+  let pendingResize = false;
+  const measureText = createMeasureText();
+  function getContainerDimensions() {
+    const rect = container.getBoundingClientRect();
+    return {
+      width: Math.max(rect.width || 600, 100),
+      height: Math.max(rect.height || 400, 100)
+    };
+  }
+  function compile() {
+    const { width, height } = getContainerDimensions();
+    const darkMode = resolveDarkMode5(options?.darkMode);
+    const compileOpts = {
+      width,
+      height,
+      theme: options?.theme,
+      darkMode,
+      watermark: options?.watermark,
+      measureText
+    };
+    return compileTileMap(currentSpec, compileOpts);
+  }
+  function wireTooltipAndInteraction(svg, layout) {
+    const cleanups = [];
+    const tileElements = svg.querySelectorAll(".oc-tilemap-tile");
+    for (const el of tileElements) {
+      const stateCode = el.getAttribute("data-state");
+      if (!stateCode) continue;
+      const content = layout.tooltipDescriptors.get(stateCode);
+      const tile = layout.tiles.find((t) => t.stateCode === stateCode);
+      const handleMouseEnter = (e) => {
+        const mouseEvent = e;
+        if (content && tooltipManager && options?.tooltip !== false) {
+          const svgRect = svg.getBoundingClientRect();
+          const x3 = mouseEvent.clientX - svgRect.left;
+          const y3 = mouseEvent.clientY - svgRect.top;
+          tooltipManager.show(content, x3, y3);
+        }
+        if (tile) {
+          options?.onTileHover?.({
+            stateCode: tile.stateCode,
+            stateName: tile.data.stateName,
+            value: tile.value,
+            data: tile.data
+          });
+        }
+      };
+      const handleMouseMove = (e) => {
+        if (content && tooltipManager && options?.tooltip !== false) {
+          const mouseEvent = e;
+          const svgRect = svg.getBoundingClientRect();
+          const x3 = mouseEvent.clientX - svgRect.left;
+          const y3 = mouseEvent.clientY - svgRect.top;
+          tooltipManager.show(content, x3, y3);
+        }
+      };
+      const handleMouseLeave = () => {
+        tooltipManager?.hide();
+        options?.onTileHover?.(null);
+      };
+      const handleClick = () => {
+        if (tile) {
+          options?.onTileClick?.({
+            stateCode: tile.stateCode,
+            stateName: tile.data.stateName,
+            value: tile.value,
+            data: tile.data
+          });
+        }
+      };
+      el.addEventListener("mouseenter", handleMouseEnter);
+      el.addEventListener("mousemove", handleMouseMove);
+      el.addEventListener("mouseleave", handleMouseLeave);
+      el.addEventListener("click", handleClick);
+      cleanups.push(() => {
+        el.removeEventListener("mouseenter", handleMouseEnter);
+        el.removeEventListener("mousemove", handleMouseMove);
+        el.removeEventListener("mouseleave", handleMouseLeave);
+        el.removeEventListener("click", handleClick);
+      });
+    }
+    return () => {
+      for (const cleanup of cleanups) {
+        cleanup();
+      }
+    };
+  }
+  function render(animate = false) {
+    if (animationCleanup) {
+      animationCleanup();
+      animationCleanup = null;
+    }
+    if (svgElement) {
+      if (cleanupTooltipEvents) {
+        cleanupTooltipEvents();
+        cleanupTooltipEvents = null;
+      }
+      svgElement.remove();
+    }
+    const newSvg = renderTileMapSVG(currentLayout, { animate });
+    container.appendChild(newSvg);
+    svgElement = newSvg;
+    cleanupTooltipEvents = wireTooltipAndInteraction(newSvg, currentLayout);
+    if (options?.tooltip !== false) {
+      if (!tooltipManager) {
+        tooltipManager = createTooltipManager(container);
+      }
+    }
+    if (currentLayout.animation?.enabled) {
+      animationCleanup = setupAnimationCleanup(newSvg, () => {
+        if (pendingResize && !destroyed) {
+          pendingResize = false;
+          resize();
+        }
+      });
+    }
+  }
+  function update(newSpec) {
+    currentSpec = newSpec;
+    currentLayout = compile();
+    render();
+  }
+  function resize() {
+    if (destroyed) return;
+    if (animationCleanup) {
+      pendingResize = true;
+      return;
+    }
+    currentLayout = compile();
+    render();
+  }
+  function exportChart(format, options_) {
+    if (!svgElement) return "";
+    switch (format) {
+      case "svg":
+        return exportSVG(svgElement);
+      case "svg-with-fonts":
+        return exportSVGWithFonts(svgElement);
+      case "png":
+        return exportPNG(svgElement, options_);
+      case "jpg":
+        return exportJPG(svgElement, options_);
+      default:
+        return "";
+    }
+  }
+  function destroy() {
+    if (destroyed) return;
+    destroyed = true;
+    if (animationCleanup) {
+      cancelAnimations(svgElement);
+      animationCleanup();
+      animationCleanup = null;
+    }
+    if (cleanupTooltipEvents) {
+      cleanupTooltipEvents();
+      cleanupTooltipEvents = null;
+    }
+    if (svgElement) {
+      svgElement.remove();
+      svgElement = null;
+    }
+    if (tooltipManager) {
+      tooltipManager.destroy();
+      tooltipManager = null;
+    }
+    if (disconnectResize) {
+      disconnectResize();
+      disconnectResize = null;
+    }
+    container.classList.remove("oc-tilemap-root", "oc-dark");
+  }
+  container.classList.add("oc-tilemap-root");
+  if (resolveDarkMode5(options?.darkMode)) {
+    container.classList.add("oc-dark");
+  }
+  currentLayout = compile();
+  render(true);
+  if (options?.responsive !== false) {
+    disconnectResize = observeResize(container, () => {
+      resize();
+    });
+  }
+  return {
+    update,
+    resize,
+    export: exportChart,
+    destroy,
+    get layout() {
+      return currentLayout;
+    }
+  };
+}
 export {
   attachKeyboardNav,
   createChart,
@@ -8133,6 +8764,7 @@ export {
   createSimulationWorker,
   createTable,
   createTextEditOverlay,
+  createTileMap,
   createTooltipManager,
   exportCSV,
   exportJPG,