@opendata-ai/openchart-vanilla 8.4.0 → 8.5.0

package/dist/{chunk-45XZOWYC.js → chunk-5KV3ZBBL.js}

@@ -4,9 +4,10 @@ import {
   exportPNG,
   exportSVG,
   exportSVGWithFonts
-} from "./chunk-UOB422LY.js";
+} from "./chunk-6B5OBGIO.js";
 import {
   buildGradientDefs,
+  buildPatternDefs,
   nextSvgId,
   rectPathWithCorners,
   renderChartSVG,
@@ -14,161 +15,33 @@ import {
   renderLegend,
   renderSingleMark,
   resolveMarkFill,
+  resolvePatternFill,
   stampAnimationVars
-} from "./chunk-YGYMB7KB.js";
+} from "./chunk-XGII4ZRT.js";
 import {
   SVG_NS,
   createSVGElement,
   setAttrs
-} from "./chunk-HGRNXLDF.js";
-
-// src/resize-observer.ts
-var DEBOUNCE_MS = 16;
-function observeResize(container, callback) {
-  let timeoutId = null;
-  let lastDelivered = null;
-  const observer = new ResizeObserver((entries) => {
-    if (timeoutId !== null) {
-      clearTimeout(timeoutId);
-    }
-    timeoutId = setTimeout(() => {
-      for (const entry of entries) {
-        const { width, height } = entry.contentRect;
-        if (lastDelivered && lastDelivered.width === width && lastDelivered.height === height) {
-          continue;
-        }
-        lastDelivered = { width, height };
-        callback(width, height);
-      }
-      timeoutId = null;
-    }, DEBOUNCE_MS);
-  });
-  observer.observe(container);
-  return () => {
-    if (timeoutId !== null) {
-      clearTimeout(timeoutId);
-    }
-    observer.disconnect();
-  };
-}
-
-// src/tooltip.ts
-import { computePosition, flip, offset, shift } from "@floating-ui/dom";
-var TOOLTIP_OFFSET = 12;
-function createTooltipManager(container) {
-  const tooltip = document.createElement("div");
-  tooltip.className = "oc-tooltip";
-  tooltip.setAttribute("role", "tooltip");
-  container.style.position = container.style.position || "relative";
-  container.appendChild(tooltip);
-  let lastContentKey = "";
-  let currentPositionId = 0;
-  const handleDocumentTouch = (e) => {
-    if (!container.contains(e.target)) {
-      hide();
-    }
-  };
-  document.addEventListener("touchstart", handleDocumentTouch);
-  const handleDocumentKeydown = (e) => {
-    if (e.key === "Escape" && tooltip.style.display === "block") {
-      hide();
-    }
-  };
-  document.addEventListener("keydown", handleDocumentKeydown);
-  function show(input, x, y, opts) {
-    if ("element" in input) {
-      lastContentKey = "";
-      tooltip.replaceChildren(input.element);
-      position(x, y, opts);
-      return;
-    }
-    if ("text" in input) {
-      lastContentKey = "";
-      tooltip.textContent = input.text;
-      position(x, y, opts);
-      return;
-    }
-    const content = input;
-    const emphasisIndex = content.fields.findIndex((f) => f.emphasis);
-    const contentKey = `${content.title}|${content.fields.length}|${content.fields[0]?.value}|${content.fields[content.fields.length - 1]?.value}|${emphasisIndex}`;
-    if (contentKey !== lastContentKey) {
-      lastContentKey = contentKey;
-      let html = "";
-      const colorRowCount = content.fields.filter((f) => f.color && f.role !== "total").length;
-      const perRowSwatches = colorRowCount > 1;
-      if (content.title) {
-        const titleColor = perRowSwatches ? void 0 : content.fields.find((f) => f.color)?.color;
-        html += '<div class="oc-tooltip-header">';
-        if (titleColor) {
-          html += `<span class="oc-tooltip-dot" style="background:${esc(titleColor)}"></span>`;
-        }
-        html += `<span class="oc-tooltip-title">${esc(content.title)}</span>`;
-        html += "</div>";
-      }
-      if (content.fields.length > 0) {
-        html += '<div class="oc-tooltip-body">';
-        for (const field of content.fields) {
-          let rowClass = "oc-tooltip-row";
-          if (field.emphasis) rowClass += " oc-tooltip-row--emphasis";
-          if (field.role === "total") rowClass += " oc-tooltip-row--total";
-          html += `<div class="${rowClass}">`;
-          html += '<span class="oc-tooltip-label">';
-          if (perRowSwatches && field.color) {
-            html += `<span class="oc-tooltip-row-swatch" style="background:${esc(field.color)}"></span>`;
-          }
-          html += `${esc(field.label)}</span>`;
-          html += `<span class="oc-tooltip-value">${esc(field.value)}</span>`;
-          html += "</div>";
-        }
-        html += "</div>";
-      }
-      tooltip.innerHTML = html;
-    }
-    position(x, y, opts);
-  }
-  function position(x, y, opts) {
-    tooltip.style.display = "block";
-    const positionId = ++currentPositionId;
-    const virtualRef = {
-      getBoundingClientRect() {
-        const rect = container.getBoundingClientRect();
-        return {
-          x: rect.left + x,
-          y: rect.top + y,
-          width: 0,
-          height: 0,
-          top: rect.top + y,
-          left: rect.left + x,
-          right: rect.left + x,
-          bottom: rect.top + y
-        };
-      }
-    };
-    computePosition(virtualRef, tooltip, {
-      placement: opts?.placement ?? "bottom-start",
-      middleware: [offset(TOOLTIP_OFFSET), flip(), shift({ padding: 8 })]
-    }).then(({ x: fx, y: fy }) => {
-      if (positionId !== currentPositionId) return;
-      tooltip.style.left = `${fx}px`;
-      tooltip.style.top = `${fy}px`;
-    });
-  }
-  function hide() {
-    tooltip.style.display = "none";
-    lastContentKey = "";
-  }
-  function destroy() {
-    document.removeEventListener("touchstart", handleDocumentTouch);
-    document.removeEventListener("keydown", handleDocumentKeydown);
-    if (tooltip.parentNode) {
-      tooltip.parentNode.removeChild(tooltip);
-    }
-  }
-  return { show, hide, destroy };
-}
-function esc(str) {
-  return str.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(/"/g, "&quot;").replace(/'/g, "&#x27;");
-}
+} from "./chunk-5RX6ZQGZ.js";
+import {
+  AnimationScheduler,
+  SpatialIndex,
+  clamp01,
+  createTooltipManager,
+  createTween,
+  cubicInOut,
+  cubicOut,
+  lerp,
+  linear,
+  observeResize,
+  prefersReducedMotion,
+  resolveDarkMode,
+  resolveEase
+} from "./chunk-2OJZBMXM.js";
+import {
+  resolvedSurface,
+  stampThemeProperties
+} from "./chunk-NG7CVCI2.js";
 
 // src/scatter-canvas/renderer.ts
 var TWO_PI = Math.PI * 2;
@@ -580,20 +453,6 @@ function materializeCanvasModeSVG(layout, opts) {
   return materializeRasterMarkSVG(layout);
 }
 
-// src/motion/easing.ts
-function linear(t) {
-  return t;
-}
-function cubicOut(t) {
-  const f = 1 - t;
-  return 1 - f * f * f;
-}
-function cubicInOut(t) {
-  return t < 0.5 ? 4 * t * t * t : 1 - (-2 * t + 2) ** 3 / 2;
-}
-var clamp01 = (t) => Math.min(1, Math.max(0, t));
-var lerp = (a, b, t) => a + (b - a) * t;
-
 // src/text-edit-overlay.ts
 function getScale(svg) {
   const viewBox = svg.viewBox?.baseVal;
@@ -625,7 +484,7 @@ function getTextStyles(targetElement, scale) {
     lineHeight: "1.3"
   };
 }
-function computePosition2(targetElement, svg, container) {
+function computePosition(targetElement, svg, container) {
   const bbox = targetElement.getBBox();
   const scale = getScale(svg);
   const svgRect = svg.getBoundingClientRect();
@@ -649,7 +508,7 @@ function createTextEditOverlay(config) {
   targetElement.setAttribute("opacity", "0");
   const scale = getScale(svg);
   const styles = getTextStyles(targetElement, scale);
-  const position = computePosition2(targetElement, svg, container);
+  const position = computePosition(targetElement, svg, container);
   const textarea = document.createElement("textarea");
   textarea.value = currentText;
   const containerPosition = window.getComputedStyle(container).position;
@@ -738,7 +597,7 @@ function createTextEditOverlay(config) {
   });
   const resizeObserver = new ResizeObserver(() => {
     if (destroyed) return;
-    const newPosition = computePosition2(targetElement, svg, container);
+    const newPosition = computePosition(targetElement, svg, container);
     textarea.style.top = `${newPosition.top}px`;
     textarea.style.left = `${newPosition.left}px`;
     textarea.style.width = `${newPosition.width}px`;
@@ -3564,7 +3423,7 @@ function createYouDrawIt(options) {
 }
 
 // src/mount.ts
-import { cssTokenDefault as cssTokenDefault2, isGraphSpec, isLayerSpec } from "@opendata-ai/openchart-core";
+import { cssTokenDefault, isGraphSpec, isLayerSpec } from "@opendata-ai/openchart-core";
 import {
   compileChart,
   compileLayer,
@@ -5308,16 +5167,6 @@ function scheduleFontReload(fontFamily, isAlive, onReady) {
   return true;
 }
 
-// src/resolve-dark-mode.ts
-function resolveDarkMode(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;
-}
-
 // src/scatter-canvas/interactions.ts
 var HIT_TOLERANCE_MOUSE = 8;
 var HIT_TOLERANCE_TOUCH = 24;
@@ -5415,191 +5264,6 @@ function wireCanvasInteractions({
   };
 }
 
-// src/motion/scheduler.ts
-var AnimationScheduler = class {
-  animations = /* @__PURE__ */ new Set();
-  requestFrame;
-  /**
-   * @param requestFrame Called on the idle→active transition to arm the first
-   *   frame (typically the mount's `scheduleRender`).
-   */
-  constructor(requestFrame) {
-    this.requestFrame = requestFrame;
-  }
-  /** Add an animation. Arms the first frame if the scheduler was idle. */
-  add(a) {
-    const wasIdle = this.animations.size === 0;
-    this.animations.add(a);
-    if (wasIdle) this.requestFrame();
-  }
-  /** Remove an animation without finishing or cancelling it. Safe mid-tick. */
-  remove(a) {
-    this.animations.delete(a);
-  }
-  /**
-   * Advance all animations to `now`. Completed animations are removed. Returns
-   * true if any animation ran this frame (so the caller marks the frame dirty).
-   *
-   * Iterates a snapshot so an `onDone` that mutates the set (via update/destroy)
-   * can't corrupt the loop.
-   */
-  tick(now) {
-    if (this.animations.size === 0) return false;
-    const snapshot = [...this.animations];
-    let ran = false;
-    for (const a of snapshot) {
-      if (!this.animations.has(a)) continue;
-      ran = true;
-      const running = a.tick(now);
-      if (!running) this.animations.delete(a);
-    }
-    return ran;
-  }
-  /** True while any animation is active (drives rAF re-arming). */
-  get active() {
-    return this.animations.size > 0;
-  }
-  /** Cancel every animation (no final state, no onDone). Used on teardown. */
-  cancelAll() {
-    const snapshot = [...this.animations];
-    this.animations.clear();
-    for (const a of snapshot) a.cancel();
-  }
-  /** Finish every animation (snap to final, fire onDone). Used before update(). */
-  finishAll() {
-    const snapshot = [...this.animations];
-    this.animations.clear();
-    for (const a of snapshot) a.finish();
-  }
-};
-
-// src/spatial-index.ts
-import { quadtree } from "d3-quadtree";
-var SpatialIndex = class {
-  tree = null;
-  nodes = [];
-  maxRadius = 0;
-  generation = 0;
-  /** Rebuild the quadtree from the current set of positioned nodes. */
-  rebuild(nodes) {
-    this.nodes = nodes;
-    this.maxRadius = 0;
-    for (const n of nodes) {
-      if (n.radius > this.maxRadius) this.maxRadius = n.radius;
-    }
-    this.tree = quadtree().x((d) => d.x).y((d) => d.y).addAll(nodes);
-    this.generation++;
-  }
-  /** Current generation counter. Increments on each rebuild. */
-  getGeneration() {
-    return this.generation;
-  }
-  /**
-   * Find the nearest node to (x, y) within maxDistance.
-   * Accounts for node radius: a hit occurs if the point is inside
-   * the node circle (distance to center < node.radius), or if the
-   * edge-to-edge distance is within maxDistance.
-   */
-  findNearest(x, y, maxDistance = Infinity) {
-    if (!this.tree || this.nodes.length === 0) return null;
-    const searchRadius = maxDistance + this.maxRadius;
-    let best = null;
-    let bestEffectiveDist = maxDistance + this.maxRadius + 1;
-    this.tree.visit((node, x0, y0, x1, y1) => {
-      const closestX = Math.max(x0, Math.min(x, x1));
-      const closestY = Math.max(y0, Math.min(y, y1));
-      const quadDist = Math.hypot(closestX - x, closestY - y);
-      if (quadDist > searchRadius) return true;
-      if (!node.length) {
-        let current = node;
-        do {
-          const d = current.data;
-          if (d) {
-            const dist = Math.hypot(d.x - x, d.y - y);
-            const effectiveDist = Math.max(0, dist - d.radius);
-            if (effectiveDist <= maxDistance && effectiveDist < bestEffectiveDist) {
-              bestEffectiveDist = effectiveDist;
-              best = d;
-            }
-          }
-        } while (current = current.next);
-      }
-      return false;
-    });
-    return best;
-  }
-  /** Find all nodes whose centers fall within the given rectangle. */
-  findInRect(x1, y1, x2, y2) {
-    if (!this.tree) return [];
-    const minX = Math.min(x1, x2);
-    const minY = Math.min(y1, y2);
-    const maxX = Math.max(x1, x2);
-    const maxY = Math.max(y1, y2);
-    const results = [];
-    this.tree.visit((node, qx0, qy0, qx1, qy1) => {
-      if (qx0 > maxX || qx1 < minX || qy0 > maxY || qy1 < minY) {
-        return true;
-      }
-      if (!node.length) {
-        let current = node;
-        do {
-          const d = current.data;
-          if (d && d.x >= minX && d.x <= maxX && d.y >= minY && d.y <= maxY) {
-            results.push(d);
-          }
-        } while (current = current.next);
-      }
-      return false;
-    });
-    return results;
-  }
-};
-
-// src/motion/tween.ts
-function resolveEase(ease) {
-  return ease === "snappy" ? cubicOut : cubicInOut;
-}
-function prefersReducedMotion() {
-  if (typeof window === "undefined" || typeof window.matchMedia !== "function") return false;
-  try {
-    return window.matchMedia("(prefers-reduced-motion: reduce)").matches;
-  } catch {
-    return false;
-  }
-}
-function createTween(opts) {
-  const { duration, ease, apply, onDone } = opts;
-  let startTime = null;
-  let finished = false;
-  function settleAt(t) {
-    apply(ease(t));
-  }
-  return {
-    tick(now) {
-      if (finished) return false;
-      if (startTime === null) startTime = now;
-      const elapsed = now - startTime;
-      const raw = duration <= 0 ? 1 : Math.min(1, elapsed / duration);
-      settleAt(raw);
-      if (raw >= 1) {
-        finished = true;
-        onDone?.();
-        return false;
-      }
-      return true;
-    },
-    finish() {
-      if (finished) return;
-      finished = true;
-      settleAt(1);
-      onDone?.();
-    },
-    cancel() {
-      finished = true;
-    }
-  };
-}
-
 // src/scatter-canvas/entrance.ts
 var MAX_TOTAL_STAGGER_MS = 300;
 var POINT_DURATION_FRACTION = 0.4;
@@ -6036,64 +5700,11 @@ function createSeriesSearch(options) {
   };
 }
 
-// src/theme-tokens.ts
-import { adaptForLightLineStroke, cssTokenDefault } from "@opendata-ai/openchart-core";
-function resolvedSurface(theme) {
-  return theme.colors.neutral.surface;
-}
-function stampThemeProperties(el, theme) {
-  const accent = theme.colors.categorical[0] ?? cssTokenDefault("--oc-accent", "light");
-  const bg = resolvedSurface(theme);
-  const n = theme.colors.neutral;
-  const props = [
-    ["--oc-font-family", theme.fonts.family],
-    ["--oc-font-mono", theme.fonts.mono],
-    ["--oc-title-size", `${theme.chrome.title.fontSize}px`],
-    ["--oc-title-weight", `${theme.chrome.title.fontWeight}`],
-    ["--oc-subtitle-size", `${theme.chrome.subtitle.fontSize}px`],
-    ["--oc-subtitle-weight", `${theme.chrome.subtitle.fontWeight}`],
-    ["--oc-source-size", `${theme.chrome.source.fontSize}px`],
-    ["--oc-source-weight", `${theme.chrome.source.fontWeight}`],
-    ["--oc-body-size", `${theme.fonts.sizes.body}px`],
-    ["--oc-eyebrow-size", `${theme.chrome.eyebrow.fontSize}px`],
-    ["--oc-eyebrow-weight", `${theme.chrome.eyebrow.fontWeight}`],
-    ["--oc-bg", bg],
-    ["--oc-text", theme.colors.text],
-    ["--oc-text-muted", theme.colors.axis],
-    // Secondary grays are derived from the theme's own text/background pair
-    // (ResolvedTheme.colors.neutral), so a warm or cool theme gets warm or
-    // cool grays instead of zinc. One direction only: theme -> CSS.
-    ["--oc-text-secondary", n.secondary],
-    ["--oc-text-faint", n.faint],
-    ["--oc-border", n.border],
-    ["--oc-gray-100", n[100]],
-    ["--oc-gray-200", n[200]],
-    ["--oc-gray-300", n[300]],
-    ["--oc-gray-400", n[400]],
-    ["--oc-gray-600", n[600]],
-    ["--oc-gray-800", n[800]],
-    ["--oc-gridline", theme.colors.gridline],
-    // --oc-axis is the hairline the axis line is drawn with, not the ink its
-    // tick labels take (that is --oc-text-muted, above).
-    ["--oc-axis", theme.colors.hairline],
-    ["--oc-border-radius", `${theme.borderRadius}px`],
-    ["--oc-accent", accent],
-    ["--oc-accent-strong", adaptForLightLineStroke(accent)],
-    ["--oc-positive", theme.colors.positive],
-    ["--oc-negative", theme.colors.negative],
-    ["--oc-space-2", `${theme.spacing.chromeGap * 2}px`],
-    ["--oc-space-4", `${theme.spacing.padding}px`]
-  ];
-  for (const [name, value] of props) {
-    el.style.setProperty(name, value);
-  }
-}
-
 // src/mount.ts
 var FALLBACK_HEIGHT = 400;
 var EDITABLE_HOVER_CSS = `
 .oc-editable-hover {
-  outline: 1.5px solid ${cssTokenDefault2("--oc-editable-hover", "light")};
+  outline: 1.5px solid ${cssTokenDefault("--oc-editable-hover", "light")};
   outline-offset: 2px;
   border-radius: 2px;
 }
@@ -7411,7 +7022,7 @@ function renderBorders(parent, borders) {
   }
   parent.appendChild(g);
 }
-function renderFeatures(parent, features, animation, staggerBudget = 0, focusIds) {
+function renderFeatures(parent, features, animation, staggerBudget = 0, focusIds, patternMap) {
   const g = createSVGElement2("g");
   g.setAttribute("class", "oc-map-features");
   g.setAttribute("role", "list");
@@ -7440,13 +7051,17 @@ function renderFeatures(parent, features, animation, staggerBudget = 0, focusIds
     const path = createSVGElement2("path");
     path.setAttribute("class", "oc-map-feature");
     path.setAttribute("role", "listitem");
+    const fill = feature.pattern && patternMap ? resolvePatternFill(feature.pattern, patternMap) : feature.fill;
     setAttrs2(path, {
       d: feature.path,
-      fill: feature.fill,
+      fill,
       stroke: feature.stroke,
       "stroke-width": feature.strokeWidth
     });
     path.setAttribute("data-feature-id", String(feature.id));
+    if (feature.noData) {
+      path.setAttribute("data-nodata", "true");
+    }
     path.setAttribute("data-key", String(feature.id));
     if (feature.binIndex !== void 0) {
       path.setAttribute("data-bin-index", String(feature.binIndex));
@@ -7466,7 +7081,7 @@ function renderFeatures(parent, features, animation, staggerBudget = 0, focusIds
       const idx = feature.animationIndex ?? i;
       path.setAttribute("data-animation-index", String(idx));
       s.setProperty("--oc-mark-index", String(idx));
-      s.setProperty("--oc-feature-fill", feature.fill);
+      s.setProperty("--oc-feature-fill", fill);
       if (dimmed) {
         s.setProperty("--oc-feature-target-opacity", String(FOCUS_DIM_OPACITY));
       }
@@ -7539,6 +7154,8 @@ function renderMapSVG(layout, opts) {
   }
   const defs = createSVGElement2("defs");
   svg.appendChild(defs);
+  const noDataSwatch = layout.continuousLegend?.noData ?? layout.categoricalLegend?.noData;
+  const patternMap = buildPatternDefs(noDataSwatch ? [...features, noDataSwatch] : features, defs);
   const mapGroup = createSVGElement2("g");
   mapGroup.setAttribute("class", "oc-map-group");
   mapGroup.setAttribute("transform", `translate(${layout.area.x},${layout.area.y})`);
@@ -7551,7 +7168,8 @@ function renderMapSVG(layout, opts) {
     features,
     animate ? animation : void 0,
     mapStaggerBudget,
-    focusIdSet
+    focusIdSet,
+    patternMap
   );
   renderBorders(cameraGroup, borders);
   if (animate && animation?.enter && layout.pointMarks.length > 1) {
@@ -7564,9 +7182,23 @@ function renderMapSVG(layout, opts) {
   svg.appendChild(mapGroup);
   renderChrome(svg, layout);
   if (layout.continuousLegend) {
-    renderLegend(svg, layout.continuousLegend);
+    const contNoData = layout.continuousLegend.noData;
+    renderLegend(
+      svg,
+      contNoData?.pattern ? {
+        ...layout.continuousLegend,
+        noData: { ...contNoData, fill: resolvePatternFill(contNoData.pattern, patternMap) }
+      } : layout.continuousLegend
+    );
   } else if (layout.categoricalLegend) {
-    renderLegend(svg, layout.categoricalLegend);
+    const catNoData = layout.categoricalLegend.noData;
+    renderLegend(
+      svg,
+      catNoData?.pattern ? {
+        ...layout.categoricalLegend,
+        noData: { ...catNoData, fill: resolvePatternFill(catNoData.pattern, patternMap) }
+      } : layout.categoricalLegend
+    );
   }
   const ptLegend = layout.pointCategoricalLegend ?? layout.pointContinuousLegend;
   if (ptLegend) {
@@ -8307,21 +7939,10 @@ export {
   createMeasureText,
   resolveFontFamily,
   scheduleFontReload,
-  observeResize,
-  resolveDarkMode,
-  createTooltipManager,
   VECTOR_EXPORT_MAX_POINTS,
   materializeCanvasModeSVG,
   applySrOnlyStyles,
-  AnimationScheduler,
-  SpatialIndex,
-  clamp01,
-  lerp,
-  resolveEase,
-  prefersReducedMotion,
-  createTween,
   createTextEditOverlay,
-  resolvedSurface,
   DEFAULT_UPDATE_MAX_MARKS,
   CANVAS_DEFAULT_UPDATE_MAX_MARKS,
   canTransitionSpecShape,
@@ -8329,7 +7950,7 @@ export {
   createChart,
   easingFns,
   storyMotion,
-  createTween2,
+  createTween2 as createTween,
   FULL_VIEW,
   fitTarget,
   interpolateCamera,
@@ -8340,4 +7961,4 @@ export {
   scrubCamera,
   createGeoMap
 };
-//# sourceMappingURL=chunk-45XZOWYC.js.map
+//# sourceMappingURL=chunk-5KV3ZBBL.js.map