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

package/dist/chunk-W34KN7FD.js

@@ -0,0 +1,298 @@
+import {
+  nextSvgId,
+  renderChromeElement,
+  renderLegend,
+  stampAnimationVars
+} from "./chunk-5EOV5JQZ.js";
+
+// src/tilemap-renderer.ts
+var SVG_NS = "http://www.w3.org/2000/svg";
+var XLINK_NS = "http://www.w3.org/1999/xlink";
+var BRAND_URL = "https://tryopendata.ai";
+function createSVGElement(tag) {
+  return document.createElementNS(SVG_NS, tag);
+}
+function setAttrs(el, attrs) {
+  for (const [key, value] of Object.entries(attrs)) {
+    el.setAttribute(key, String(value));
+  }
+}
+function renderChrome(parent, layout) {
+  const g = createSVGElement("g");
+  g.setAttribute("class", "oc-chrome");
+  const { chrome, measureText } = layout;
+  const bottomOffset = layout.area.y + layout.area.height;
+  if (chrome.title) {
+    renderChromeElement(g, chrome.title, "oc-title", "title", measureText);
+  }
+  if (chrome.subtitle) {
+    renderChromeElement(g, chrome.subtitle, "oc-subtitle", "subtitle", measureText);
+  }
+  if (chrome.source) {
+    renderChromeElement(
+      g,
+      { ...chrome.source, y: bottomOffset + chrome.source.y },
+      "oc-source",
+      "source",
+      measureText
+    );
+  }
+  if (chrome.byline) {
+    renderChromeElement(
+      g,
+      { ...chrome.byline, y: bottomOffset + chrome.byline.y },
+      "oc-byline",
+      "byline",
+      measureText
+    );
+  }
+  if (chrome.footer) {
+    renderChromeElement(
+      g,
+      { ...chrome.footer, y: bottomOffset + chrome.footer.y },
+      "oc-footer",
+      "footer",
+      measureText
+    );
+  }
+  parent.appendChild(g);
+}
+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 = 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 text = createSVGElement("text");
+  setAttrs(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 = createSVGElement("tspan");
+  setAttrs(trySpan, { "font-weight": 500 });
+  trySpan.textContent = "try";
+  const openDataSpan = createSVGElement("tspan");
+  setAttrs(openDataSpan, { "font-weight": 600, "font-size": 16 });
+  openDataSpan.textContent = "OpenData";
+  const aiSpan = createSVGElement("tspan");
+  setAttrs(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 = createSVGElement("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 = createSVGElement("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 = createSVGElement("rect");
+    setAttrs(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 = createSVGElement("text");
+    setAttrs(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 = createSVGElement("text");
+      setAttrs(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 = createSVGElement("g");
+  g.setAttribute("class", "oc-tilemap-legend");
+  const defs = parent.querySelector("defs") || createSVGElement("defs");
+  const exists = parent.querySelector("defs");
+  if (!exists) {
+    parent.insertBefore(defs, parent.firstChild);
+  }
+  const gradientId = nextSvgId("oc-tilemap-legend-gradient");
+  const grad = createSVGElement("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 = 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 barHeight = gradientLegend.bounds.height;
+  const bar = createSVGElement("rect");
+  setAttrs(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 = createSVGElement("text");
+  setAttrs(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 = createSVGElement("text");
+  setAttrs(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 = createSVGElement("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)));
+    stampAnimationVars(svg, {
+      duration: animation.enter.duration,
+      stagger,
+      annotationDelay: animation.annotationDelay,
+      ease: animation.enter.ease
+    });
+  }
+  const defs = createSVGElement("defs");
+  svg.appendChild(defs);
+  renderChrome(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 {
+  renderTileMapSVG
+};
+//# sourceMappingURL=chunk-W34KN7FD.js.map

package/dist/chunk-W34KN7FD.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/tilemap-renderer.ts"],"sourcesContent":["/**\n * TileMap SVG renderer: converts a TileMapLayout into SVG DOM elements.\n *\n * Creates an <svg> with tile rectangles, state code labels, value labels,\n * gradient legend, and chrome. All styling via inline SVG attributes from\n * layout data. Animation is pure CSS, driven by data attributes.\n */\n\nimport type {\n  ResolvedAnimation,\n  TileMapLayout,\n  TileMapTileMark,\n} from '@opendata-ai/openchart-core';\nimport { stampAnimationVars } from './animation-vars';\nimport { renderChromeElement } from './renderers/chrome';\nimport { renderLegend } from './renderers/legend';\nimport { nextSvgId } from './svg-ids';\n\nconst SVG_NS = 'http://www.w3.org/2000/svg';\nconst XLINK_NS = 'http://www.w3.org/1999/xlink';\nconst BRAND_URL = 'https://tryopendata.ai';\n\n// ---------------------------------------------------------------------------\n// Helpers\n// ---------------------------------------------------------------------------\n\nfunction createSVGElement(tag: string): SVGElement {\n  return document.createElementNS(SVG_NS, tag);\n}\n\nfunction setAttrs(el: SVGElement, attrs: Record<string, string | number>): void {\n  for (const [key, value] of Object.entries(attrs)) {\n    el.setAttribute(key, String(value));\n  }\n}\n\n// ---------------------------------------------------------------------------\n// Chrome rendering (delegates to the shared helper for text wrapping)\n// ---------------------------------------------------------------------------\n\nfunction renderChrome(parent: SVGElement, layout: TileMapLayout): void {\n  const g = createSVGElement('g');\n  g.setAttribute('class', 'oc-chrome');\n\n  const { chrome, measureText } = layout;\n  const bottomOffset = layout.area.y + layout.area.height;\n\n  if (chrome.title) {\n    renderChromeElement(g, chrome.title, 'oc-title', 'title', measureText);\n  }\n  if (chrome.subtitle) {\n    renderChromeElement(g, chrome.subtitle, 'oc-subtitle', 'subtitle', measureText);\n  }\n  if (chrome.source) {\n    renderChromeElement(\n      g,\n      { ...chrome.source, y: bottomOffset + chrome.source.y },\n      'oc-source',\n      'source',\n      measureText,\n    );\n  }\n  if (chrome.byline) {\n    renderChromeElement(\n      g,\n      { ...chrome.byline, y: bottomOffset + chrome.byline.y },\n      'oc-byline',\n      'byline',\n      measureText,\n    );\n  }\n  if (chrome.footer) {\n    renderChromeElement(\n      g,\n      { ...chrome.footer, y: bottomOffset + chrome.footer.y },\n      'oc-footer',\n      'footer',\n      measureText,\n    );\n  }\n\n  parent.appendChild(g);\n}\n\n// ---------------------------------------------------------------------------\n// Watermark rendering\n// ---------------------------------------------------------------------------\n\nfunction renderWatermark(parent: SVGElement, layout: TileMapLayout): void {\n  if (layout.width < 480) return; // Don't render if too narrow\n\n  const { width, height } = layout;\n  const { theme } = layout;\n  const padding = theme.spacing.padding;\n  const rightEdge = width - padding;\n  const bottomEdge = height - padding;\n  const fill = theme.colors.axis;\n\n  const a = createSVGElement('a');\n  a.setAttribute('href', BRAND_URL);\n  a.setAttributeNS(XLINK_NS, 'xlink:href', BRAND_URL);\n  a.setAttribute('target', '_blank');\n  a.setAttribute('rel', 'noopener');\n  a.setAttribute('class', 'oc-chrome-ref');\n\n  const text = createSVGElement('text');\n  setAttrs(text, {\n    x: rightEdge,\n    y: bottomEdge,\n    'dominant-baseline': 'alphabetic',\n    'text-anchor': 'end',\n    'font-family': theme.fonts.family,\n    'font-size': 12,\n    'fill-opacity': 0.55,\n  });\n  (text as SVGElement & ElementCSSInlineStyle).style.setProperty('fill', fill);\n\n  const trySpan = createSVGElement('tspan');\n  setAttrs(trySpan, { 'font-weight': 500 });\n  trySpan.textContent = 'try';\n\n  const openDataSpan = createSVGElement('tspan');\n  setAttrs(openDataSpan, { 'font-weight': 600, 'font-size': 16 });\n  openDataSpan.textContent = 'OpenData';\n\n  const aiSpan = createSVGElement('tspan');\n  setAttrs(aiSpan, { 'font-weight': 500 });\n  aiSpan.textContent = '.ai';\n\n  text.appendChild(trySpan);\n  text.appendChild(openDataSpan);\n  text.appendChild(aiSpan);\n  a.appendChild(text);\n  parent.appendChild(a);\n}\n\n// ---------------------------------------------------------------------------\n// Tiles rendering\n// ---------------------------------------------------------------------------\n\nfunction renderTiles(\n  parent: SVGElement,\n  tiles: TileMapTileMark[],\n  animation?: ResolvedAnimation,\n): void {\n  const g = createSVGElement('g');\n  g.setAttribute('class', 'oc-tilemap-tiles');\n  g.setAttribute('role', 'list');\n\n  // Compute per-tile delays with jitter for organic feel.\n  // Base delay spreads tiles across ~800ms window, jitter adds +-40% variation\n  // so some tiles pop in clusters while others have longer gaps.\n  const tileDelays: number[] = [];\n  if (animation?.enter) {\n    const baseStagger = 800 / Math.max(tiles.length, 1);\n    let seed = 17;\n    for (let i = 0; i < tiles.length; i++) {\n      const idx = tiles[i].animationIndex ?? i;\n      seed = (seed * 1103515245 + 12345) & 0x7fffffff;\n      const jitter = ((seed % 1000) / 1000 - 0.5) * 0.8;\n      tileDelays.push(Math.max(0, Math.round(idx * baseStagger * (1 + jitter))));\n    }\n  }\n\n  for (let i = 0; i < tiles.length; i++) {\n    const tile = tiles[i];\n    const tileGroup = createSVGElement('g');\n    tileGroup.setAttribute('class', 'oc-tilemap-tile');\n    tileGroup.setAttribute('data-state', tile.stateCode);\n    tileGroup.setAttribute('role', 'listitem');\n    if (tile.aria?.label) {\n      tileGroup.setAttribute('aria-label', tile.aria.label);\n    }\n\n    if (animation?.enter) {\n      const idx = tile.animationIndex ?? i;\n      tileGroup.setAttribute('data-animation-index', String(idx));\n      (tileGroup as SVGElement & ElementCSSInlineStyle).style.setProperty(\n        '--oc-mark-index',\n        String(idx),\n      );\n      (tileGroup as SVGElement & ElementCSSInlineStyle).style.setProperty(\n        '--oc-tile-delay',\n        `${tileDelays[i]}ms`,\n      );\n    }\n\n    // Tile background rect\n    const rect = createSVGElement('rect');\n    setAttrs(rect, {\n      x: tile.x,\n      y: tile.y,\n      width: tile.size,\n      height: tile.size,\n      rx: tile.cornerRadius,\n      fill: tile.fill,\n      'fill-opacity': tile.fillOpacity ?? 1,\n      stroke: tile.stroke,\n      'stroke-width': tile.strokeWidth,\n    });\n    tileGroup.appendChild(rect);\n\n    // State code label\n    const codeLabel = createSVGElement('text');\n    setAttrs(codeLabel, {\n      x: tile.label.x,\n      y: tile.label.y,\n      'text-anchor': 'middle',\n      'dominant-baseline': 'central',\n      'font-family': tile.label.style.fontFamily,\n      'font-size': tile.label.style.fontSize,\n      'font-weight': tile.label.style.fontWeight,\n    });\n    (codeLabel as SVGElement & ElementCSSInlineStyle).style.setProperty(\n      'fill',\n      tile.label.style.fill,\n    );\n    codeLabel.textContent = tile.label.text;\n    tileGroup.appendChild(codeLabel);\n\n    // Value label (if visible)\n    if (tile.valueLabel.visible && tile.valueLabel.text) {\n      const valueLabel = createSVGElement('text');\n      setAttrs(valueLabel, {\n        x: tile.valueLabel.x,\n        y: tile.valueLabel.y,\n        'text-anchor': 'middle',\n        'dominant-baseline': 'central',\n        'font-family': tile.valueLabel.style.fontFamily,\n        'font-size': tile.valueLabel.style.fontSize,\n        'font-weight': tile.valueLabel.style.fontWeight,\n      });\n      (valueLabel as SVGElement & ElementCSSInlineStyle).style.setProperty(\n        'fill',\n        tile.valueLabel.style.fill,\n      );\n      valueLabel.textContent = tile.valueLabel.text;\n      tileGroup.appendChild(valueLabel);\n    }\n\n    g.appendChild(tileGroup);\n  }\n\n  parent.appendChild(g);\n}\n\n// ---------------------------------------------------------------------------\n// Gradient legend rendering\n// ---------------------------------------------------------------------------\n\nfunction renderGradientLegend(parent: SVGElement, layout: TileMapLayout): void {\n  if (!layout.gradientLegend) return;\n\n  const { gradientLegend } = layout;\n  const g = createSVGElement('g');\n  g.setAttribute('class', 'oc-tilemap-legend');\n\n  // Build linear gradient in defs\n  const defs = parent.querySelector('defs') || createSVGElement('defs');\n  const exists = parent.querySelector('defs');\n  if (!exists) {\n    parent.insertBefore(defs, parent.firstChild);\n  }\n\n  const gradientId = nextSvgId('oc-tilemap-legend-gradient');\n  const grad = createSVGElement('linearGradient');\n  grad.id = gradientId;\n  grad.setAttribute('x1', '0%');\n  grad.setAttribute('y1', '0%');\n  grad.setAttribute('x2', '100%');\n  grad.setAttribute('y2', '0%');\n\n  for (const stop of gradientLegend.colorStops) {\n    const s = createSVGElement('stop');\n    const attrs: Record<string, string | number> = {\n      offset: `${stop.offset * 100}%`,\n      'stop-color': stop.color,\n    };\n    if (stop.opacity !== undefined) {\n      attrs['stop-opacity'] = stop.opacity;\n    }\n    setAttrs(s, attrs);\n    grad.appendChild(s);\n  }\n\n  (defs as SVGElement).appendChild(grad);\n\n  // Gradient bar (pill-shaped)\n  const barHeight = gradientLegend.bounds.height;\n  const bar = createSVGElement('rect');\n  setAttrs(bar, {\n    x: gradientLegend.bounds.x,\n    y: gradientLegend.bounds.y,\n    width: gradientLegend.bounds.width,\n    height: barHeight,\n    rx: barHeight / 2,\n    fill: `url(#${gradientId})`,\n  });\n  g.appendChild(bar);\n\n  // Min label\n  const minText = createSVGElement('text');\n  setAttrs(minText, {\n    x: gradientLegend.bounds.x,\n    y: gradientLegend.bounds.y + gradientLegend.bounds.height + 14,\n    'text-anchor': 'start',\n    'font-family': gradientLegend.labelStyle.fontFamily,\n    'font-size': gradientLegend.labelStyle.fontSize,\n    'font-weight': gradientLegend.labelStyle.fontWeight,\n  });\n  (minText as SVGElement & ElementCSSInlineStyle).style.setProperty(\n    'fill',\n    gradientLegend.labelStyle.fill,\n  );\n  minText.textContent = gradientLegend.minLabel;\n  g.appendChild(minText);\n\n  // Max label\n  const maxText = createSVGElement('text');\n  setAttrs(maxText, {\n    x: gradientLegend.bounds.x + gradientLegend.bounds.width,\n    y: gradientLegend.bounds.y + gradientLegend.bounds.height + 14,\n    'text-anchor': 'end',\n    'font-family': gradientLegend.labelStyle.fontFamily,\n    'font-size': gradientLegend.labelStyle.fontSize,\n    'font-weight': gradientLegend.labelStyle.fontWeight,\n  });\n  (maxText as SVGElement & ElementCSSInlineStyle).style.setProperty(\n    'fill',\n    gradientLegend.labelStyle.fill,\n  );\n  maxText.textContent = gradientLegend.maxLabel;\n  g.appendChild(maxText);\n\n  parent.appendChild(g);\n}\n\n// ---------------------------------------------------------------------------\n// Public API\n// ---------------------------------------------------------------------------\n\n/**\n * Render a TileMapLayout to an SVG element.\n */\nexport function renderTileMapSVG(\n  layout: TileMapLayout,\n  opts?: { animate?: boolean },\n): SVGSVGElement {\n  const { width, height, tiles, a11y, watermark, animation } = layout;\n  const animate = opts?.animate && !!animation?.enter;\n\n  const svg = createSVGElement('svg') as SVGSVGElement;\n  svg.setAttribute('viewBox', `0 0 ${width} ${height}`);\n  svg.setAttribute('role', 'img');\n  if (a11y.altText) {\n    svg.setAttribute('aria-label', a11y.altText);\n  }\n\n  const classes = animate ? 'oc-tilemap oc-animate' : 'oc-tilemap';\n  svg.setAttribute('class', classes);\n\n  if (animate && animation?.enter) {\n    // Target ~1s total: stagger window ~800ms + per-tile pop ~200ms\n    const stagger = Math.max(5, Math.round(800 / Math.max(tiles.length, 1)));\n    stampAnimationVars(svg, {\n      duration: animation.enter.duration,\n      stagger,\n      annotationDelay: animation.annotationDelay,\n      ease: animation.enter.ease,\n    });\n  }\n\n  // Empty defs element (will be filled by gradient legend)\n  const defs = createSVGElement('defs');\n  svg.appendChild(defs);\n\n  // Render chrome\n  renderChrome(svg, layout);\n\n  // Render tiles\n  renderTiles(svg, tiles, animate ? animation : undefined);\n\n  // Render legend (gradient for quantitative, categorical for nominal)\n  if (layout.categoricalLegend) {\n    renderLegend(svg, layout.categoricalLegend);\n  } else {\n    renderGradientLegend(svg, layout);\n  }\n\n  // Render watermark\n  if (watermark) {\n    renderWatermark(svg, layout);\n  }\n\n  return svg;\n}\n"],"mappings":"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","names":[]}

package/dist/index.d.ts

@@ -1,82 +1,9 @@
 export { ChartLayout, ChartSpec, CompileOptions, TableLayout, TableSpec, VizSpec } from '@opendata-ai/openchart-engine';
-import { BarListSpec, BarListLayout, ThemeConfig, DarkMode, GraphSpec, ChartSpec, LayerSpec, ElementRef, ChartLayout, ChartEventHandlers, DataRow, RectMark, Mark, BarTableCell, CategoryTableCell, TableCell, FlagTableCell, HeatmapTableCell, ImageTableCell, SparklineTableCell, TextTableCell, SankeySpec, SankeyLayout, TableSpec, SortState, TableLayout, TileMapSpec, TileMapLayout, TooltipContent } from '@opendata-ai/openchart-core';
+import { BarListSpec, BarListLayout, ThemeConfig, DarkMode, GraphSpec, MapSpec, MapLayout, RectMark, Mark, BarTableCell, CategoryTableCell, TableCell, FlagTableCell, HeatmapTableCell, ImageTableCell, SparklineTableCell, TextTableCell, SankeySpec, SankeyLayout, ChartLayout, TableSpec, SortState, TableLayout, TileMapSpec, TileMapLayout, TooltipContent, ResolvedYouDrawIt } from '@opendata-ai/openchart-core';
+import { J as JPGExportOptions, S as SVGExportOptions, C as Camera } from './mount-CUKQLeqD.js';
+export { a as ChartInstance, E as ExportOptions, M as MountOptions, P as PNGExportOptions, U as UpdateOptions, c as createChart, e as exportCSV, b as exportJPG, d as exportPNG, f as exportSVG, g as exportSVGWithFonts } from './mount-CUKQLeqD.js';
 import { Placement } from '@floating-ui/dom';
 
-/**
- * Export utilities: serialize charts to SVG, PNG, JPG, or CSV.
- *
- * - SVG: serializes the rendered DOM element via XMLSerializer
- * - SVG with fonts: async version that embeds @font-face data URIs
- * - PNG: renders SVG to canvas, then extracts as Blob
- * - JPG: same as PNG but with JPEG compression and background fill
- * - CSV: converts a data array to comma-separated text
- */
-interface SVGExportOptions {
-    /** Embed fonts as base64 data URIs in the SVG. Defaults to true. */
-    embedFonts?: boolean;
-}
-interface PNGExportOptions extends SVGExportOptions {
-    /** DPI scaling factor. Defaults to 2 for retina-quality output. */
-    dpi?: number;
-}
-interface JPGExportOptions extends PNGExportOptions {
-    /** JPEG quality from 0 to 1. Defaults to 0.92. */
-    quality?: number;
-}
-/**
- * Serialize an SVG element to an XML string.
- *
- * @param svgElement - The rendered SVG element to serialize.
- * @returns The SVG markup as a string.
- */
-declare function exportSVG(svgElement: SVGElement): string;
-/**
- * Serialize an SVG element with embedded fonts to an XML string.
- *
- * Collects font-family declarations from the SVG's text elements,
- * finds matching @font-face rules in the page's stylesheets, fetches
- * the font files, and embeds them as base64 data URIs. The resulting
- * SVG is self-contained and renders correctly without external fonts.
- *
- * @param svgElement - The rendered SVG element to serialize.
- * @param options - Export options.
- * @returns A Promise resolving to the SVG markup as a string.
- */
-declare function exportSVGWithFonts(svgElement: SVGElement, options?: SVGExportOptions): Promise<string>;
-/**
- * Render an SVG element to a PNG Blob via a canvas.
- *
- * Embeds fonts by default so the exported image matches on-screen rendering.
- * Set `embedFonts: false` to skip font embedding for faster exports.
- *
- * @param svgElement - The rendered SVG element.
- * @param options - Optional DPI scaling and font embedding.
- * @returns A Promise resolving to the PNG Blob.
- */
-declare function exportPNG(svgElement: SVGElement, options?: PNGExportOptions): Promise<Blob>;
-/**
- * Render an SVG element to a JPEG Blob via a canvas.
- *
- * Same pipeline as exportPNG but outputs JPEG with configurable quality.
- * The canvas is filled with the chart's background color before drawing
- * to avoid transparent backgrounds rendering as black in JPEG format.
- *
- * @param svgElement - The rendered SVG element.
- * @param options - Optional DPI scaling, JPEG quality, and font embedding.
- * @returns A Promise resolving to the JPEG Blob.
- */
-declare function exportJPG(svgElement: SVGElement, options?: JPGExportOptions): Promise<Blob>;
-/**
- * Convert an array of data objects to a CSV string.
- *
- * Uses the keys from the first row as column headers.
- * Values are quoted if they contain commas, quotes, or newlines.
- *
- * @param data - Array of row objects.
- * @returns CSV-formatted string.
- */
-declare function exportCSV(data: Record<string, unknown>[]): string;
-
 /**
  * BarList mount API: the main entry point for vanilla JS barlist usage.
  *
@@ -171,65 +98,86 @@ interface GraphInstance {
 declare function createGraph(container: HTMLElement, spec: GraphSpec, options?: GraphMountOptions): GraphInstance;
 
 /**
- * Mount API: the main entry point for vanilla JS usage.
+ * Map camera utilities: zoom, pan, and focus for map visualizations.
+ *
+ * Reuses the existing camera-math infrastructure from the scrollytelling
+ * system. The camera transform is applied as an SVG `transform` attribute
+ * on the `[data-oc-map-camera]` group, never as a CSS transform.
+ */
+
+interface MapCameraOptions {
+    /** Transition duration in ms. 0 snaps instantly. Default 600. */
+    duration?: number;
+    /** Padding in map-local units around the target. Default 16. */
+    padding?: number;
+}
+
+/**
+ * Map mount API: the main entry point for vanilla JS map usage.
  *
- * createChart() takes a container, spec, and options, compiles the chart,
- * renders it as SVG, sets up responsive resizing, tooltip interaction
- * (mouse/touch/keyboard), keyboard navigation between data points,
- * and returns a ChartInstance with update/resize/export/destroy methods.
+ * createMap() takes a container, MapSpec, and options, compiles the
+ * map, renders it as SVG, sets up responsive resizing, tooltip interaction,
+ * and returns a MapInstance with update/resize/export/destroy.
  */
 
-interface MountOptions extends ChartEventHandlers {
+interface MapMountOptions {
     /** Theme overrides. */
     theme?: ThemeConfig;
     /** Dark mode setting: "auto" (system pref), "force", or "off". */
     darkMode?: DarkMode;
-    /** Callback when a data point is clicked. @deprecated Use onMarkClick instead. */
-    onDataPointClick?: (data: Record<string, unknown>) => void;
     /** Enable responsive resizing. Defaults to true. */
     responsive?: boolean;
     /** Show the tryOpenData.ai watermark. Defaults to true. */
     watermark?: boolean;
-    /** Initial selected element. */
-    selectedElement?: ElementRef;
-}
-interface UpdateOptions {
-    /** Override the selected element after update. When omitted, preserves current selection. */
-    selectedElement?: ElementRef;
-}
-interface ExportOptions extends JPGExportOptions {
+    /** Show tooltips on hover. Defaults to true. */
+    tooltip?: boolean;
+    /** Callback when a feature is clicked. */
+    onMarkClick?: (feature: {
+        id: string | number;
+        name?: string;
+        data: Record<string, unknown> | null;
+    }) => void;
+    /** Callback when a feature is hovered (null on mouse leave). */
+    onMarkHover?: (feature: {
+        id: string | number;
+        name?: string;
+        data: Record<string, unknown> | null;
+    } | null) => void;
 }
-interface ChartInstance {
+interface MapInstance {
     /** Re-compile and re-render with a new spec. */
-    update(spec: ChartSpec | LayerSpec | GraphSpec, options?: UpdateOptions): void;
+    update(spec: MapSpec): void;
     /** Re-compile at current container dimensions. */
     resize(): void;
-    /** Export the chart. */
-    export(format: 'svg'): string;
-    export(format: 'svg-with-fonts', options?: SVGExportOptions): Promise<string>;
-    export(format: 'png', options?: ExportOptions): Promise<Blob>;
-    export(format: 'jpg', options?: ExportOptions): Promise<Blob>;
-    export(format: 'csv'): string;
-    export(format: 'svg' | 'svg-with-fonts' | 'png' | 'jpg' | 'csv', options?: ExportOptions): string | Promise<Blob> | Promise<string>;
+    /** Export the map. */
+    export(format: 'svg' | 'svg-with-fonts' | 'png' | 'jpg', options?: JPGExportOptions | SVGExportOptions): string | Promise<Blob> | Promise<string>;
     /** Remove all DOM elements and disconnect observers. */
     destroy(): void;
-    /** The current compiled layout (for hooks / debugging). */
-    readonly layout: ChartLayout;
-    /** Get the currently selected element, or null if none. */
-    getSelectedElement(): ElementRef | null;
-    /** Programmatically select an element. Silent no-op if element not found. */
-    select(ref: ElementRef): void;
-    /** Deselect the current element. */
-    deselect(): void;
-    /** Whether inline text editing is active. */
-    readonly isEditing: boolean;
-    /** Set highlight values on the color encoding and re-render. Pass null to clear. */
-    setHighlight(values: string[] | null): void;
+    /** The current compiled layout. */
+    readonly layout: MapLayout;
+    /** Zoom to one or more features by ID. */
+    zoomTo(featureId: string | number | Array<string | number>, opts?: MapCameraOptions): void;
+    /** Pan to a feature keeping the current zoom level. */
+    panTo(featureId: string | number, opts?: MapCameraOptions): void;
+    /** Fit the camera to an arbitrary bounding box, or reset to full view if no target. */
+    fitBounds(target?: {
+        x: number;
+        y: number;
+        width: number;
+        height: number;
+        padding?: number;
+    }, opts?: MapCameraOptions): void;
+    /** Reset the camera to the full map view. */
+    resetView(opts?: MapCameraOptions): void;
+    /** Get a snapshot of the current camera state. */
+    getCamera(): Camera;
+    /** Set the camera to an exact state (no animation). */
+    setCamera(camera: Camera): void;
 }
 /**
- * Create a chart instance from a spec and mount it into a container.
+ * Create a map instance from a spec and mount it into a container.
  */
-declare function createChart<TData extends DataRow = DataRow>(container: HTMLElement, spec: ChartSpec<TData> | LayerSpec<TData> | GraphSpec, options?: MountOptions): ChartInstance;
+declare function createMap(container: HTMLElement, spec: MapSpec, options?: MapMountOptions): MapInstance;
 
 /**
  * Mark rendering: dispatches to per-mark-type sub-renderers (line, area, rect,
@@ -573,4 +521,50 @@ interface TooltipManager {
  */
 declare function createTooltipManager(container: HTMLElement): TooltipManager;
 
-export { type BarListInstance, type BarListMountOptions, type ChartInstance, type ExportOptions, type GraphInstance, type GraphMountOptions, type JPGExportOptions, type KeyboardNavOptions, type MountOptions, type PNGExportOptions, type SVGExportOptions, type SankeyInstance, type SankeyMountOptions, type TableInstance, type TableMountOptions, type TableState, type TextEditOverlayConfig, type TileMapInstance, type TileMapMountOptions, type TooltipManager, type UpdateOptions, attachKeyboardNav, createBarList, createChart, createGraph, createSankey, createSimulationWorker, createTable, createTextEditOverlay, createTileMap, createTooltipManager, exportCSV, exportJPG, exportPNG, exportSVG, exportSVGWithFonts, observeResize, rectPathWithCorners, registerMarkRenderer, renderBarCell, renderCategoryCell, renderCell, renderChartSVG, renderFlagCell, renderHeatmapCell, renderImageCell, renderSparklineCell, renderTable, renderTextCell };
+/**
+ * "You draw it" interaction layer: the DOM/SVG overlay for the `youDrawIt`
+ * spec option (NYT-style draw-then-reveal engagement format).
+ *
+ * SVG-space elements (hatched drawing region, reader's guess path, reveal
+ * clip rect, pointer-capture overlay) render inside the chart's own SVG so
+ * they clip and scale with it. The prompt text and skip-to-reveal button are
+ * a small HTML overlay positioned over the drawing region, following the
+ * series-search precedent (`series-search.ts`): a native `<button>` gets
+ * keyboard semantics for free instead of hand-rolling SVG focus handling.
+ *
+ * State (the reader's in-progress guess) lives in this module's closure,
+ * matching mount.ts's per-instance-closure convention (StrictMode double-
+ * mount safe): a fresh `createYouDrawIt()` call gets a fresh closure.
+ */
+
+interface YouDrawItOptions {
+    /** The chart container (`.oc-root`). Must be position: relative. */
+    container: HTMLElement;
+    /** Fired once the drawing is revealed, with the guess in data coordinates ordered by x. */
+    onReveal?: (guess: Array<{
+        x: string | number;
+        y: number;
+    }>) => void;
+}
+interface YouDrawItController {
+    /** Reposition, resync geometry, and (re)wire pointer capture against a freshly rendered layout + SVG. */
+    update(config: ResolvedYouDrawIt, svg: SVGSVGElement): void;
+    /** Hide (spec no longer wants youDrawIt on this render, e.g. mark type changed). */
+    hide(): void;
+    /** Reveal the real line and fire onReveal, without requiring reader interaction (skip-to-reveal). */
+    reveal(): void;
+    /** Clear the reader's guess and return to the drawing state. */
+    reset(): void;
+    /** Whether the drawing has been revealed. */
+    readonly isRevealed: boolean;
+    /** Remove all DOM elements. */
+    destroy(): void;
+}
+/**
+ * Create the you-draw-it control. Mounted once per chart instance and kept
+ * across re-renders so the in-progress drawing survives; `update()` re-syncs
+ * geometry and re-wires pointer capture after each render.
+ */
+declare function createYouDrawIt(options: YouDrawItOptions): YouDrawItController;
+
+export { type BarListInstance, type BarListMountOptions, Camera, type GraphInstance, type GraphMountOptions, JPGExportOptions, type KeyboardNavOptions, type MapCameraOptions, type MapInstance, type MapMountOptions, SVGExportOptions, type SankeyInstance, type SankeyMountOptions, type TableInstance, type TableMountOptions, type TableState, type TextEditOverlayConfig, type TileMapInstance, type TileMapMountOptions, type TooltipManager, type YouDrawItController, type YouDrawItOptions, attachKeyboardNav, createBarList, createGraph, createMap, createSankey, createSimulationWorker, createTable, createTextEditOverlay, createTileMap, createTooltipManager, createYouDrawIt, observeResize, rectPathWithCorners, registerMarkRenderer, renderBarCell, renderCategoryCell, renderCell, renderChartSVG, renderFlagCell, renderHeatmapCell, renderImageCell, renderSparklineCell, renderTable, renderTextCell };