@opendata-ai/openchart-vanilla 8.3.1 → 8.4.0

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

@@ -4,7 +4,7 @@ import {
   exportPNG,
   exportSVG,
   exportSVGWithFonts
-} from "./chunk-T32UHMZA.js";
+} from "./chunk-UOB422LY.js";
 import {
   buildGradientDefs,
   nextSvgId,
@@ -15,12 +15,12 @@ import {
   renderSingleMark,
   resolveMarkFill,
   stampAnimationVars
-} from "./chunk-W76C53MC.js";
+} from "./chunk-YGYMB7KB.js";
 import {
   SVG_NS,
   createSVGElement,
   setAttrs
-} from "./chunk-RM5XS6NR.js";
+} from "./chunk-HGRNXLDF.js";
 
 // src/resize-observer.ts
 var DEBOUNCE_MS = 16;
@@ -89,11 +89,12 @@ function createTooltipManager(container) {
       return;
     }
     const content = input;
-    const contentKey = `${content.title}|${content.fields.length}|${content.fields[0]?.value}|${content.fields[content.fields.length - 1]?.value}`;
+    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).length;
+      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;
@@ -107,7 +108,10 @@ function createTooltipManager(container) {
       if (content.fields.length > 0) {
         html += '<div class="oc-tooltip-body">';
         for (const field of content.fields) {
-          html += '<div class="oc-tooltip-row">';
+          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>`;
@@ -2847,6 +2851,7 @@ function buildTextMarkTweens(prevLayout, nextLayout, marksContainer, dom, tweens
 }
 
 // src/transition/driver.ts
+var TRANSITIONING_CLASS = "oc-transitioning";
 function runTransition(args) {
   const { svg, prevLayout, nextLayout, animation, onComplete, fromSnapshot, manual, canvas } = args;
   const update = animation.update;
@@ -2872,6 +2877,7 @@ function runTransition(args) {
       totalMs: 0
     };
   }
+  svg.classList.add(TRANSITIONING_CLASS);
   const dom = buildMarkDomIndex(marksContainer);
   const tweens = [];
   const ghosts = [];
@@ -2979,6 +2985,7 @@ function runTransition(args) {
   }
   let rafId = null;
   let running = true;
+  let pulsedDot = null;
   let startTime = null;
   let lastElapsed = 0;
   const nextLineMarks = nextLayout.marks.filter((m) => m.type === "line");
@@ -3010,9 +3017,11 @@ function runTransition(args) {
     if (!running) return;
     running = false;
     rafId = null;
+    svg.classList.remove(TRANSITIONING_CLASS);
     snapToFinal();
     removeGhosts();
     settleCanvas();
+    pulsedDot = pulseSparklineTerminator(svg, marksContainer);
     for (let i = 0; i < secondaryEls.length; i++) {
       secondaryEls[i].style.opacity = secondaryOriginalOpacity[i];
     }
@@ -3127,8 +3136,12 @@ function runTransition(args) {
   }
   return {
     cancel() {
+      clearPulseTimer(pulsedDot);
+      pulsedDot?.classList.remove(PULSE_CLASS);
+      pulsedDot = null;
       if (!running) return;
       running = false;
+      svg.classList.remove(TRANSITIONING_CLASS);
       if (rafId !== null) {
         cancelAnimationFrame(rafId);
         rafId = null;
@@ -3164,6 +3177,37 @@ function runTransition(args) {
     totalMs
   };
 }
+var PULSE_CLASS = "oc-pulse";
+var PULSE_DURATION_MS = 600;
+var pulseTimers = /* @__PURE__ */ new WeakMap();
+function clearPulseTimer(dot) {
+  if (!dot) return;
+  const pending = pulseTimers.get(dot);
+  if (pending !== void 0) {
+    clearTimeout(pending);
+    pulseTimers.delete(dot);
+  }
+}
+function pulseSparklineTerminator(svg, marksContainer) {
+  if (!marksContainer || svg.getAttribute("data-display") !== "sparkline") return null;
+  const dots = marksContainer.querySelectorAll("circle.oc-mark-point");
+  const dot = dots[dots.length - 1];
+  if (!dot) return null;
+  const r = dot.getAttribute("r");
+  if (r) dot.style.setProperty("--oc-pulse-r", `${r}px`);
+  clearPulseTimer(dot);
+  dot.classList.remove(PULSE_CLASS);
+  void dot.getBoundingClientRect?.();
+  dot.classList.add(PULSE_CLASS);
+  pulseTimers.set(
+    dot,
+    setTimeout(() => {
+      pulseTimers.delete(dot);
+      dot.classList.remove(PULSE_CLASS);
+    }, PULSE_DURATION_MS)
+  );
+  return dot;
+}
 function collectSecondaryElements(svg) {
   const els = [];
   const epLabels = svg.querySelector(".oc-endpoint-labels");
@@ -3536,9 +3580,9 @@ function cancelAnimations(svg) {
 }
 function computeAnimationDuration(svg) {
   const style = svg.style;
-  const duration = parseFloat(style.getPropertyValue("--oc-animation-duration")) || 600;
+  const duration = parseFloat(style.getPropertyValue("--oc-animation-duration")) || 450;
   const stagger = parseFloat(style.getPropertyValue("--oc-animation-stagger")) || 0;
-  const annotationDelay = parseFloat(style.getPropertyValue("--oc-annotation-delay")) || 200;
+  const annotationDelay = parseFloat(style.getPropertyValue("--oc-annotation-delay")) || 150;
   const animatedElements = svg.querySelectorAll("[data-animation-index]").length;
   const totalStagger = stagger * Math.max(0, animatedElements - 1);
   return totalStagger + duration + annotationDelay + 500;
@@ -3678,6 +3722,8 @@ function wireChartEvents(svg, layout, specAnnotations, handlers) {
 
 // src/interactions/crosshair.ts
 import { getRepresentativeColor } from "@opendata-ai/openchart-core";
+var EMPHASIS_PROXIMITY_PX = 18;
+var SNAP_DOT_RADIUS = 4.5;
 function snapKey(x) {
   return Math.round(x);
 }
@@ -3724,43 +3770,46 @@ function findNearestX(sortedXs, x) {
   }
   return candidate;
 }
-function buildSliceTooltip(hits) {
+function buildSliceTooltip(hits, emphasisKey) {
   if (hits.length === 0) return null;
   const title = hits[0].point.tooltip?.title;
   const fields = [];
   const isMulti = hits.length > 1;
+  let total;
   for (const { group, point } of hits) {
     const tip = point.tooltip;
     if (!tip) continue;
+    if (!total) total = tip.fields.find((f) => f.role === "total");
     if (isMulti) {
-      const yField = tip.fields.find(
+      const candidates = tip.fields.filter((f) => f.role !== "total");
+      const yField = candidates.find(
         (f) => !f.color && f.label !== title && f.value !== title && f.value !== group.seriesKey
-      ) ?? tip.fields[tip.fields.length - 1] ?? null;
+      ) ?? candidates[candidates.length - 1] ?? null;
       if (!yField) continue;
       fields.push({
         label: group.seriesKey,
         value: yField.value,
-        color: group.color
+        color: group.color,
+        ...emphasisKey === group.seriesKey ? { emphasis: true } : {}
       });
     } else {
       for (const f of tip.fields) {
+        if (f.role === "total") continue;
         fields.push({ ...f, color: f.color ?? group.color });
       }
     }
   }
   if (fields.length === 0) return null;
+  if (total && isMulti) fields.push(total);
   return { title, fields };
 }
-function wireVoronoiTooltipEvents(svg, layout, tooltipManager) {
+function wireVoronoiTooltipEvents(svg, layout, tooltipManager, emphasis) {
   const overlay = svg.querySelector("[data-voronoi-overlay]");
-  if (!overlay) return () => {
-  };
+  if (!overlay) return null;
   const groups = collectSeriesGroups(layout);
-  if (groups.length === 0) return () => {
-  };
+  if (groups.length === 0) return null;
   const snapXs = collectSnapXs(groups);
-  if (snapXs.length === 0) return () => {
-  };
+  if (snapXs.length === 0) return null;
   const crosshair = svg.querySelector("[data-crosshair]");
   const dotsLayer = svg.querySelector("[data-snap-dots]");
   const dots = [];
@@ -3768,7 +3817,7 @@ function wireVoronoiTooltipEvents(svg, layout, tooltipManager) {
     while (dotsLayer.firstChild) dotsLayer.removeChild(dotsLayer.firstChild);
     for (const group of groups) {
       const circle = document.createElementNS("http://www.w3.org/2000/svg", "circle");
-      circle.setAttribute("r", "4");
+      circle.setAttribute("r", String(SNAP_DOT_RADIUS));
       circle.setAttribute("fill", layout.theme.colors.background);
       circle.setAttribute("stroke", group.color);
       circle.setAttribute("stroke-width", "2");
@@ -3778,9 +3827,16 @@ function wireVoronoiTooltipEvents(svg, layout, tooltipManager) {
       dots.push(circle);
     }
   }
-  const positionAt = (svgX, _svgY, viewBoxToContainer) => {
-    const snappedX = findNearestX(snapXs, svgX);
-    if (snappedX === null) return false;
+  let currentIndex = -1;
+  let currentEmphasis = null;
+  function containerScale() {
+    const svgEl = svg;
+    const rect = svgEl.getBoundingClientRect();
+    const viewBox = svgEl.viewBox?.baseVal;
+    const scaleX = viewBox?.width && rect.width ? viewBox.width / rect.width : 1;
+    return scaleX > 0 ? 1 / scaleX : 1;
+  }
+  function showAt(snappedX, emphasisKey, viewBoxToContainer) {
     const hits = [];
     let anchorY = 0;
     let anchorCount = 0;
@@ -3806,7 +3862,10 @@ function wireVoronoiTooltipEvents(svg, layout, tooltipManager) {
       crosshair.setAttribute("x2", String(snappedX));
       crosshair.style.display = "";
     }
-    const tooltip = buildSliceTooltip(hits);
+    currentEmphasis = emphasisKey;
+    if (emphasisKey) emphasis?.setSeries(emphasisKey);
+    else emphasis?.clear();
+    const tooltip = buildSliceTooltip(hits, emphasisKey);
     if (!tooltip) return false;
     const containerAnchorX = snappedX * viewBoxToContainer;
     const containerAnchorY = anchorCount > 0 ? anchorY / anchorCount * viewBoxToContainer : 0;
@@ -3814,6 +3873,31 @@ function wireVoronoiTooltipEvents(svg, layout, tooltipManager) {
       placement: "right"
     });
     return true;
+  }
+  function keysAt(snappedX) {
+    const keys = [];
+    for (const group of groups) {
+      if (group.pointsByX.has(snappedX)) keys.push(group.seriesKey);
+    }
+    return keys;
+  }
+  const positionAt = (svgX, svgY, viewBoxToContainer) => {
+    const snappedX = findNearestX(snapXs, svgX);
+    if (snappedX === null) return false;
+    currentIndex = snapXs.indexOf(snappedX);
+    let nearestKey = null;
+    let nearestDy = Number.POSITIVE_INFINITY;
+    for (const group of groups) {
+      const point = group.pointsByX.get(snappedX);
+      if (!point) continue;
+      const dy = Math.abs(point.y - svgY);
+      if (dy < nearestDy) {
+        nearestDy = dy;
+        nearestKey = group.seriesKey;
+      }
+    }
+    const emphasisKey = nearestDy <= EMPHASIS_PROXIMITY_PX ? nearestKey : null;
+    return showAt(snappedX, emphasisKey, viewBoxToContainer);
   };
   const toSvgCoords = (clientX, clientY) => {
     const svgEl = svg;
@@ -3831,11 +3915,24 @@ function wireVoronoiTooltipEvents(svg, layout, tooltipManager) {
     const { svgX, svgY, viewBoxToContainer } = toSvgCoords(me.clientX, me.clientY);
     positionAt(svgX, svgY, viewBoxToContainer);
   };
-  const hideAll = () => {
+  const hideAll = (resetIndex = false) => {
     if (crosshair) crosshair.style.display = "none";
     for (const dot of dots) dot.style.display = "none";
     tooltipManager.hide();
+    currentEmphasis = null;
+    if (resetIndex) currentIndex = -1;
+    emphasis?.clear();
   };
+  const hideOnPointerOut = () => hideAll();
+  function stepTo(index) {
+    if (snapXs.length === 0) return;
+    const wrapped = (index % snapXs.length + snapXs.length) % snapXs.length;
+    currentIndex = wrapped;
+    const snappedX = snapXs[wrapped];
+    const keys = keysAt(snappedX);
+    const keep = currentEmphasis && keys.includes(currentEmphasis) ? currentEmphasis : null;
+    showAt(snappedX, keep, containerScale());
+  }
   const handleTouch = (e) => {
     const te = e;
     if (te.touches.length === 0) return;
@@ -3845,16 +3942,43 @@ function wireVoronoiTooltipEvents(svg, layout, tooltipManager) {
     positionAt(svgX, svgY, viewBoxToContainer);
   };
   overlay.addEventListener("mousemove", handleMouseMove);
-  overlay.addEventListener("mouseleave", hideAll);
+  overlay.addEventListener("mouseleave", hideOnPointerOut);
   overlay.addEventListener("touchstart", handleTouch, { passive: false });
   overlay.addEventListener("touchmove", handleTouch, { passive: false });
-  overlay.addEventListener("touchend", hideAll);
-  return () => {
-    overlay.removeEventListener("mousemove", handleMouseMove);
-    overlay.removeEventListener("mouseleave", hideAll);
-    overlay.removeEventListener("touchstart", handleTouch);
-    overlay.removeEventListener("touchmove", handleTouch);
-    overlay.removeEventListener("touchend", hideAll);
+  overlay.addEventListener("touchend", hideOnPointerOut);
+  return {
+    cleanup() {
+      overlay.removeEventListener("mousemove", handleMouseMove);
+      overlay.removeEventListener("mouseleave", hideOnPointerOut);
+      overlay.removeEventListener("touchstart", handleTouch);
+      overlay.removeEventListener("touchmove", handleTouch);
+      overlay.removeEventListener("touchend", hideOnPointerOut);
+    },
+    get snapCount() {
+      return snapXs.length;
+    },
+    get currentIndex() {
+      return currentIndex;
+    },
+    stepTo,
+    cycleSeries(delta) {
+      if (currentIndex < 0) {
+        stepTo(0);
+        return;
+      }
+      const snappedX = snapXs[currentIndex];
+      const keys = keysAt(snappedX);
+      if (keys.length === 0) return;
+      const at = currentEmphasis ? keys.indexOf(currentEmphasis) : -1;
+      const next = ((at + delta) % keys.length + keys.length) % keys.length;
+      showAt(snappedX, keys[next], containerScale());
+    },
+    showCurrent() {
+      stepTo(currentIndex < 0 ? 0 : currentIndex);
+    },
+    hide(resetIndex) {
+      hideAll(resetIndex === true);
+    }
   };
 }
 
@@ -4519,11 +4643,175 @@ function wireAnchorDrag(svg, specAnnotations, layout, onEdit, setDragging) {
   };
 }
 
+// src/interactions/hover-emphasis.ts
+var MARKS_ACTIVE_CLASS = "oc-hover-active";
+var MARK_HOVER_CLASS = "oc-mark--hover";
+var MARK_DIM_CLASS = "oc-mark--dim";
+var LEGEND_HOVER_CLASS = "oc-legend-entry--hover";
+var LEGEND_DIM_CLASS = "oc-legend-entry--dim";
+var NOOP = {
+  setSeries() {
+  },
+  setMark() {
+  },
+  clear() {
+  },
+  destroy() {
+  },
+  multiSeries: false
+};
+function countMarkSeries(layout) {
+  const seen = /* @__PURE__ */ new Set();
+  for (const mark of layout.marks) {
+    const key = "seriesKey" in mark ? mark.seriesKey : void 0;
+    if (key) seen.add(key);
+  }
+  return seen.size;
+}
+function createHoverEmphasis(svg, layout) {
+  if (layout.markRenderMode === "canvas") return NOOP;
+  const marksGroup = svg.querySelector(".oc-marks");
+  if (!marksGroup) return NOOP;
+  const multiSeries = countMarkSeries(layout) > 1;
+  let markEls = null;
+  let legendEls = null;
+  function marks() {
+    if (!markEls) markEls = Array.from(marksGroup.querySelectorAll(".oc-mark"));
+    return markEls;
+  }
+  function legendEntries() {
+    if (!legendEls) legendEls = Array.from(svg.querySelectorAll("[data-legend-label]"));
+    return legendEls;
+  }
+  function clear() {
+    marksGroup.classList.remove(MARKS_ACTIVE_CLASS);
+    for (const el of marks()) {
+      el.classList.remove(MARK_HOVER_CLASS, MARK_DIM_CLASS);
+    }
+    for (const el of legendEntries()) {
+      el.classList.remove(LEGEND_HOVER_CLASS, LEGEND_DIM_CLASS);
+    }
+  }
+  function applyLegend(seriesKey) {
+    for (const el of legendEntries()) {
+      if (el.getAttribute("data-legend-active") === "false") continue;
+      const match = el.getAttribute("data-legend-label") === seriesKey;
+      el.classList.toggle(LEGEND_HOVER_CLASS, match);
+      el.classList.toggle(LEGEND_DIM_CLASS, !match);
+    }
+  }
+  function setSeries(seriesKey) {
+    if (seriesKey === null) {
+      clear();
+      return;
+    }
+    marksGroup.classList.add(MARKS_ACTIVE_CLASS);
+    for (const el of marks()) {
+      const match = el.getAttribute("data-series") === seriesKey;
+      el.classList.toggle(MARK_HOVER_CLASS, match);
+      el.classList.toggle(MARK_DIM_CLASS, !match);
+    }
+    applyLegend(seriesKey);
+  }
+  function setMark(el) {
+    if (!el) {
+      clear();
+      return;
+    }
+    const series = el.getAttribute("data-series");
+    if (multiSeries && series) {
+      setSeries(series);
+      return;
+    }
+    marksGroup.classList.add(MARKS_ACTIVE_CLASS);
+    for (const mark of marks()) {
+      mark.classList.toggle(MARK_HOVER_CLASS, mark === el);
+      mark.classList.remove(MARK_DIM_CLASS);
+    }
+  }
+  return {
+    setSeries,
+    setMark,
+    clear,
+    destroy() {
+      clear();
+      markEls = null;
+      legendEls = null;
+    },
+    multiSeries
+  };
+}
+function wireEndpointLabelHover(svg, emphasis) {
+  const entries = svg.querySelectorAll("[data-endpoint-key]");
+  const cleanups = [];
+  for (const entry of entries) {
+    const key = entry.getAttribute("data-endpoint-key");
+    if (!key) continue;
+    const handleEnter = () => emphasis.setSeries(key);
+    const handleLeave = () => emphasis.clear();
+    entry.addEventListener("mouseenter", handleEnter);
+    entry.addEventListener("mouseleave", handleLeave);
+    cleanups.push(() => {
+      entry.removeEventListener("mouseenter", handleEnter);
+      entry.removeEventListener("mouseleave", handleLeave);
+    });
+  }
+  return () => {
+    for (const cleanup of cleanups) cleanup();
+  };
+}
+
 // src/interactions/keyboard-nav.ts
-function wireKeyboardNav(svg, container, tooltipDescriptors, tooltipManager, layout) {
+function wireKeyboardNav(svg, container, tooltipDescriptors, tooltipManager, layout, crosshair) {
   container.setAttribute("tabindex", "0");
   container.setAttribute("aria-roledescription", "chart");
   container.setAttribute("aria-label", layout.a11y.altText);
+  if (tooltipDescriptors.size === 0 && crosshair) {
+    const handleCrosshairKeys = (e) => {
+      const step = crosshair.currentIndex;
+      switch (e.key) {
+        case "ArrowRight":
+          e.preventDefault();
+          crosshair.stepTo(step + 1);
+          break;
+        case "ArrowLeft":
+          e.preventDefault();
+          crosshair.stepTo(step <= 0 ? crosshair.snapCount - 1 : step - 1);
+          break;
+        case "ArrowDown":
+          e.preventDefault();
+          if (step < 0) crosshair.stepTo(0);
+          crosshair.cycleSeries(1);
+          break;
+        case "ArrowUp":
+          e.preventDefault();
+          if (step < 0) crosshair.stepTo(0);
+          crosshair.cycleSeries(-1);
+          break;
+        case "Enter":
+        case " ":
+          e.preventDefault();
+          crosshair.showCurrent();
+          break;
+        case "Escape":
+          e.preventDefault();
+          crosshair.hide(true);
+          break;
+      }
+    };
+    const handleCrosshairBlur = () => {
+      crosshair.hide(true);
+    };
+    container.addEventListener("keydown", handleCrosshairKeys);
+    container.addEventListener("blur", handleCrosshairBlur);
+    return () => {
+      container.removeEventListener("keydown", handleCrosshairKeys);
+      container.removeEventListener("blur", handleCrosshairBlur);
+      container.removeAttribute("tabindex");
+      container.removeAttribute("aria-roledescription");
+      container.removeAttribute("aria-label");
+    };
+  }
   const markElements = [];
   const allMarkEls = svg.querySelectorAll("[data-mark-id]");
   for (const el of allMarkEls) {
@@ -4596,9 +4884,15 @@ function wireKeyboardNav(svg, container, tooltipDescriptors, tooltipManager, lay
       }
     }
   };
+  const handleBlur = () => {
+    tooltipManager.hide();
+    highlightMark(-1);
+  };
   container.addEventListener("keydown", handleKeyDown);
+  container.addEventListener("blur", handleBlur);
   return () => {
     container.removeEventListener("keydown", handleKeyDown);
+    container.removeEventListener("blur", handleBlur);
     container.removeAttribute("tabindex");
     container.removeAttribute("aria-roledescription");
     container.removeAttribute("aria-label");
@@ -4606,22 +4900,47 @@ function wireKeyboardNav(svg, container, tooltipDescriptors, tooltipManager, lay
 }
 
 // src/interactions/legend-interaction.ts
-function wireLegendInteraction(svg, _layout, toggleSeries, onLegendToggle, onEdit) {
+function wireLegendInteraction(svg, _layout, toggleSeries, onLegendToggle, onEdit, emphasis) {
   const legendEntries = svg.querySelectorAll(
     ".oc-legend:not(.oc-legend--size) [data-legend-index]"
   );
   const cleanups = [];
   for (const entry of legendEntries) {
     if (entry.getAttribute("data-legend-overflow") === "true") continue;
-    const handleClick = () => {
+    const toggle = () => {
       const label = entry.getAttribute("data-legend-label");
       if (!label) return;
       const nowHidden = toggleSeries(label);
       onLegendToggle?.(label, !nowHidden);
       onEdit?.({ type: "legend-toggle", series: label, hidden: nowHidden });
     };
+    const handleClick = () => toggle();
+    const handleKeyDown = (e) => {
+      const ke = e;
+      if (ke.key !== "Enter" && ke.key !== " ") return;
+      ke.preventDefault();
+      toggle();
+    };
+    const handleEnter = () => {
+      const label = entry.getAttribute("data-legend-label");
+      if (!label || entry.getAttribute("data-legend-active") === "false") return;
+      emphasis?.setSeries(label);
+    };
+    const handleLeave = () => emphasis?.clear();
     entry.addEventListener("click", handleClick);
-    cleanups.push(() => entry.removeEventListener("click", handleClick));
+    entry.addEventListener("keydown", handleKeyDown);
+    entry.addEventListener("mouseenter", handleEnter);
+    entry.addEventListener("mouseleave", handleLeave);
+    entry.addEventListener("focus", handleEnter);
+    entry.addEventListener("blur", handleLeave);
+    cleanups.push(() => {
+      entry.removeEventListener("click", handleClick);
+      entry.removeEventListener("keydown", handleKeyDown);
+      entry.removeEventListener("mouseenter", handleEnter);
+      entry.removeEventListener("mouseleave", handleLeave);
+      entry.removeEventListener("focus", handleEnter);
+      entry.removeEventListener("blur", handleLeave);
+    });
   }
   return () => {
     for (const cleanup of cleanups) {
@@ -4850,7 +5169,7 @@ function createScreenReaderTable(layout, container) {
 }
 
 // src/interactions/tooltip-events.ts
-function wireTooltipEvents(svg, tooltipDescriptors, tooltipManager) {
+function wireTooltipEvents(svg, tooltipDescriptors, tooltipManager, emphasis) {
   const markElements = svg.querySelectorAll("[data-mark-id]");
   const cleanups = [];
   for (const el of markElements) {
@@ -4864,6 +5183,7 @@ function wireTooltipEvents(svg, tooltipDescriptors, tooltipManager) {
       const x = mouseEvent.clientX - svgRect.left;
       const y = mouseEvent.clientY - svgRect.top;
       tooltipManager.show(content, x, y);
+      emphasis?.setMark(el);
     };
     const handleMouseMove = (e) => {
       const mouseEvent = e;
@@ -4874,6 +5194,7 @@ function wireTooltipEvents(svg, tooltipDescriptors, tooltipManager) {
     };
     const handleMouseLeave = () => {
       tooltipManager.hide();
+      emphasis?.clear();
     };
     const handleTouchStart = (e) => {
       const touchEvent = e;
@@ -4883,17 +5204,23 @@ function wireTooltipEvents(svg, tooltipDescriptors, tooltipManager) {
         const x = touch.clientX - svgRect.left;
         const y = touch.clientY - svgRect.top;
         tooltipManager.show(content, x, y);
+        emphasis?.setMark(el);
       }
     };
+    const handleTouchEnd = () => {
+      emphasis?.clear();
+    };
     el.addEventListener("mouseenter", handleMouseEnter);
     el.addEventListener("mousemove", handleMouseMove);
     el.addEventListener("mouseleave", handleMouseLeave);
     el.addEventListener("touchstart", handleTouchStart);
+    el.addEventListener("touchend", handleTouchEnd);
     cleanups.push(() => {
       el.removeEventListener("mouseenter", handleMouseEnter);
       el.removeEventListener("mousemove", handleMouseMove);
       el.removeEventListener("mouseleave", handleMouseLeave);
       el.removeEventListener("touchstart", handleTouchStart);
+      el.removeEventListener("touchend", handleTouchEnd);
     });
   }
   return () => {
@@ -5274,7 +5601,7 @@ function createTween(opts) {
 }
 
 // src/scatter-canvas/entrance.ts
-var MAX_TOTAL_STAGGER_MS = 2e3;
+var MAX_TOTAL_STAGGER_MS = 300;
 var POINT_DURATION_FRACTION = 0.4;
 function clampStagger(delay, elementCount) {
   if (elementCount <= 1) return 0;
@@ -5711,9 +6038,13 @@ 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 = theme.colors.background === "transparent" ? theme.isDark ? cssTokenDefault("--oc-bg", "dark") : cssTokenDefault("--oc-bg", "light") : theme.colors.background;
+  const bg = resolvedSurface(theme);
+  const n = theme.colors.neutral;
   const props = [
     ["--oc-font-family", theme.fonts.family],
     ["--oc-font-mono", theme.fonts.mono],
@@ -5729,8 +6060,22 @@ function stampThemeProperties(el, theme) {
     ["--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", theme.colors.axis],
+    // --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)],
@@ -5787,6 +6132,9 @@ function createChart(container, spec, options) {
   let disconnectResize = null;
   let cleanupTooltipEvents = null;
   let cleanupVoronoiEvents = null;
+  let cleanupEndpointHover = null;
+  let hoverEmphasis = null;
+  let crosshairController = null;
   let canvasLayer = null;
   let cleanupCanvasEvents = null;
   let canvasEntrance = null;
@@ -6228,6 +6576,11 @@ function createChart(container, spec, options) {
     cleanupTooltipEvents = null;
     cleanupVoronoiEvents?.();
     cleanupVoronoiEvents = null;
+    crosshairController = null;
+    cleanupEndpointHover?.();
+    cleanupEndpointHover = null;
+    hoverEmphasis?.destroy();
+    hoverEmphasis = null;
     cleanupCanvasEvents?.();
     cleanupCanvasEvents = null;
     canvasLayer?.destroy();
@@ -6293,19 +6646,30 @@ function createChart(container, spec, options) {
         options
       });
     }
+    hoverEmphasis = createHoverEmphasis(svgElement, currentLayout);
     cleanupTooltipEvents = wireTooltipEvents(
       svgElement,
       currentLayout.tooltipDescriptors,
-      tooltipManager
+      tooltipManager,
+      hoverEmphasis
     );
-    cleanupVoronoiEvents = wireVoronoiTooltipEvents(svgElement, currentLayout, tooltipManager);
+    const crosshairCtl = wireVoronoiTooltipEvents(
+      svgElement,
+      currentLayout,
+      tooltipManager,
+      hoverEmphasis
+    );
+    crosshairController = crosshairCtl;
+    cleanupVoronoiEvents = crosshairCtl ? () => crosshairCtl.cleanup() : null;
+    cleanupEndpointHover = wireEndpointLabelHover(svgElement, hoverEmphasis);
     if (!currentLayout.a11y.hidden) {
       cleanupKeyboardNav = wireKeyboardNav(
         svgElement,
         container,
         currentLayout.tooltipDescriptors,
         tooltipManager,
-        currentLayout
+        currentLayout,
+        crosshairController
       );
     }
     const editSuppressed = wantsSeriesSearch(currentSpec);
@@ -6320,7 +6684,8 @@ function createChart(container, spec, options) {
       currentLayout,
       toggleSeriesVisibility,
       options?.onLegendToggle,
-      editSuppressed ? void 0 : options?.onEdit
+      editSuppressed ? void 0 : options?.onEdit,
+      hoverEmphasis
     );
     if (options?.onMarkClick || options?.onMarkHover || options?.onMarkLeave || options?.onAnnotationClick) {
       const specAnnotations = "annotations" in currentSpec && Array.isArray(currentSpec.annotations) ? currentSpec.annotations : [];
@@ -6616,6 +6981,11 @@ function createChart(container, spec, options) {
     cleanupTooltipEvents = null;
     cleanupVoronoiEvents?.();
     cleanupVoronoiEvents = null;
+    crosshairController = null;
+    cleanupEndpointHover?.();
+    cleanupEndpointHover = null;
+    hoverEmphasis?.destroy();
+    hoverEmphasis = null;
     cleanupCanvasEvents?.();
     cleanupCanvasEvents = null;
     canvasEntrance?.cancel();
@@ -6915,6 +7285,24 @@ var SVG_NS3 = "http://www.w3.org/2000/svg";
 var XLINK_NS = "http://www.w3.org/1999/xlink";
 var BRAND_URL = "https://tryopendata.ai";
 var BULK_ANIMATION_THRESHOLD = 200;
+var LEGEND_BACKDROP_ALPHA = 0.9;
+function legendBackdrop(theme) {
+  const surface = resolvedSurface(theme).trim();
+  const hex = /^#([0-9a-f]{3}|[0-9a-f]{6})$/i.exec(surface);
+  if (hex) {
+    const h = hex[1];
+    const full = h.length === 3 ? h.replace(/./g, (c) => c + c) : h;
+    const r = Number.parseInt(full.slice(0, 2), 16);
+    const g = Number.parseInt(full.slice(2, 4), 16);
+    const b = Number.parseInt(full.slice(4, 6), 16);
+    return `rgba(${r},${g},${b},${LEGEND_BACKDROP_ALPHA})`;
+  }
+  const rgb = /^rgba?\(\s*([\d.]+)\s*,\s*([\d.]+)\s*,\s*([\d.]+)/i.exec(surface);
+  if (rgb) {
+    return `rgba(${rgb[1]},${rgb[2]},${rgb[3]},${LEGEND_BACKDROP_ALPHA})`;
+  }
+  return surface;
+}
 function createSVGElement2(tag) {
   return document.createElementNS(SVG_NS3, tag);
 }
@@ -7001,7 +7389,7 @@ function renderBorders(parent, borders) {
       d: borders.interiorPath,
       fill: "none",
       stroke: borders.interiorStroke,
-      "stroke-width": 0.5,
+      "stroke-width": borders.interiorWidth,
       "stroke-linejoin": "round"
     });
     interior.setAttribute("class", "oc-map-border-interior");
@@ -7014,7 +7402,7 @@ function renderBorders(parent, borders) {
       d: borders.outlinePath,
       fill: "none",
       stroke: borders.outlineStroke,
-      "stroke-width": 1,
+      "stroke-width": borders.outlineWidth,
       "stroke-linejoin": "round"
     });
     outline.setAttribute("class", "oc-map-border-outline");
@@ -7060,6 +7448,9 @@ function renderFeatures(parent, features, animation, staggerBudget = 0, focusIds
     });
     path.setAttribute("data-feature-id", String(feature.id));
     path.setAttribute("data-key", String(feature.id));
+    if (feature.binIndex !== void 0) {
+      path.setAttribute("data-bin-index", String(feature.binIndex));
+    }
     if (feature.name) {
       path.setAttribute("data-feature-name", feature.name);
     }
@@ -7179,7 +7570,6 @@ function renderMapSVG(layout, opts) {
   }
   const ptLegend = layout.pointCategoricalLegend ?? layout.pointContinuousLegend;
   if (ptLegend) {
-    const isDark = layout.theme.isDark;
     const padX = 10;
     const padY = 8;
     const swatchSize = "swatchSize" in ptLegend ? ptLegend.swatchSize : 10;
@@ -7209,11 +7599,26 @@ function renderMapSVG(layout, opts) {
       width: contentWidth + padX * 2,
       height: bgHeight,
       rx: 4,
-      fill: isDark ? "rgba(24,24,27,0.9)" : "rgba(255,255,255,0.9)"
+      fill: legendBackdrop(layout.theme)
     });
     svg.appendChild(bg);
     renderLegend(svg, ptLegend);
   }
+  if (layout.pointSizeLegend) {
+    const sizeLegend = layout.pointSizeLegend;
+    const pad = 10;
+    const bg = createSVGElement2("rect");
+    setAttrs2(bg, {
+      x: sizeLegend.bounds.x - pad,
+      y: sizeLegend.bounds.y - pad,
+      width: sizeLegend.bounds.width + pad * 2,
+      height: sizeLegend.bounds.height + pad * 2,
+      rx: 6,
+      fill: legendBackdrop(layout.theme)
+    });
+    svg.appendChild(bg);
+    renderLegend(svg, sizeLegend);
+  }
   if (watermark) {
     renderWatermark(svg, layout);
   }
@@ -7347,6 +7752,27 @@ function focusSignature(focus) {
   const ids = focus.ids.map(String).sort().join(",");
   return `${ids}|${Math.round(t.x)},${Math.round(t.y)},${Math.round(t.width)},${Math.round(t.height)},${t.padding}`;
 }
+var featureOrigin = /* @__PURE__ */ new WeakMap();
+function raiseFeature(el, svg) {
+  if (svg.classList.contains("oc-animate")) return;
+  const parent = el.parentNode;
+  if (!parent || el === parent.lastChild) return;
+  if (!featureOrigin.has(el)) {
+    featureOrigin.set(el, el.nextSibling);
+  }
+  parent.appendChild(el);
+}
+function restoreFeatureOrder(el) {
+  const parent = el.parentNode;
+  if (!parent || !featureOrigin.has(el)) return;
+  const next = featureOrigin.get(el) ?? null;
+  featureOrigin.delete(el);
+  if (next && next.parentNode === parent) {
+    parent.insertBefore(el, next);
+  } else if (!next) {
+    parent.appendChild(el);
+  }
+}
 function prefersReducedMotion2() {
   if (typeof window === "undefined" || typeof window.matchMedia !== "function") return false;
   try {
@@ -7419,7 +7845,8 @@ function createGeoMap(container, spec, options) {
       const handleMouseEnter = (e) => {
         const mouseEvent = e;
         el.style.setProperty("cursor", "pointer");
-        el.style.setProperty("filter", "brightness(1.1)");
+        raiseFeature(el, svg);
+        el.classList.add("oc-map-feature--hover");
         if (content && tooltipManager && options?.tooltip !== false) {
           const svgRect = svg.getBoundingClientRect();
           const x = mouseEvent.clientX - svgRect.left;
@@ -7446,7 +7873,8 @@ function createGeoMap(container, spec, options) {
       };
       const handleMouseLeave = () => {
         el.style.removeProperty("cursor");
-        el.style.removeProperty("filter");
+        el.classList.remove("oc-map-feature--hover");
+        restoreFeatureOrder(el);
         tooltipManager?.hide();
         options?.onMarkHover?.(null);
       };
@@ -7471,6 +7899,22 @@ function createGeoMap(container, spec, options) {
         el.removeEventListener("click", handleClick);
       });
     }
+    const featuresGroup = svg.querySelector(".oc-map-features");
+    if (featuresGroup) {
+      for (const bin of svg.querySelectorAll(".oc-legend-bin[data-bin-index]")) {
+        const index = bin.getAttribute("data-bin-index");
+        if (index === null) continue;
+        const enter = () => featuresGroup.setAttribute("data-hover", index);
+        const leave = () => featuresGroup.removeAttribute("data-hover");
+        bin.addEventListener("mouseenter", enter);
+        bin.addEventListener("mouseleave", leave);
+        cleanups.push(() => {
+          bin.removeEventListener("mouseenter", enter);
+          bin.removeEventListener("mouseleave", leave);
+          featuresGroup.removeAttribute("data-hover");
+        });
+      }
+    }
     const pointMarksByKey = new Map(layout.pointMarks.map((p) => [p.key, p]));
     const pointElements = svg.querySelectorAll(".oc-map-point");
     for (const el of pointElements) {
@@ -7877,6 +8321,7 @@ export {
   prefersReducedMotion,
   createTween,
   createTextEditOverlay,
+  resolvedSurface,
   DEFAULT_UPDATE_MAX_MARKS,
   CANVAS_DEFAULT_UPDATE_MAX_MARKS,
   canTransitionSpecShape,
@@ -7895,4 +8340,4 @@ export {
   scrubCamera,
   createGeoMap
 };
-//# sourceMappingURL=chunk-GRA2NIRZ.js.map
+//# sourceMappingURL=chunk-45XZOWYC.js.map