@opendata-ai/openchart-vanilla 8.8.0 → 8.9.1

package/dist/index.js

@@ -3,21 +3,22 @@ import {
   paletteFromCanvas,
   readCanvasSRGB,
   resolveRepeat
-} from "./chunk-DFKLAB67.js";
+} from "./chunk-MGFXAROR.js";
 import {
   renderTileMapSVG
-} from "./chunk-EZQDCLZN.js";
+} from "./chunk-Q7YEEF2X.js";
 import {
   GRAPH_3D_NOT_REGISTERED_ERROR,
   createGraph,
   registerGraphRenderer
-} from "./chunk-5IMVUHVC.js";
+} from "./chunk-GX6BWMJD.js";
 import {
   CANVAS_DEFAULT_UPDATE_MAX_MARKS,
   DEFAULT_UPDATE_MAX_MARKS,
   VECTOR_EXPORT_MAX_POINTS,
   applySrOnlyStyles,
   cancelAnimations,
+  captureMarkFocus,
   createChart,
   createGeoMap,
   createMeasureText,
@@ -25,10 +26,12 @@ import {
   createYouDrawIt,
   materializeCanvasModeSVG,
   resolveFontFamily,
+  restoreMarkFocus,
   scheduleFontReload,
   setupAnimationCleanup,
-  setupTableAnimationCleanup
-} from "./chunk-QBTRAQAX.js";
+  setupTableAnimationCleanup,
+  wireMarkNavigation
+} from "./chunk-CCRFYGHU.js";
 import {
   embedFonts,
   ensureSVGDimensions,
@@ -40,30 +43,31 @@ import {
   getSVGBackgroundColor,
   getSVGDimensions,
   rasterizeSVGToCanvas
-} from "./chunk-I73B3DJI.js";
+} from "./chunk-R5TZHNTG.js";
 import {
   rectPathWithCorners,
   registerMarkRenderer,
   renderChartSVG,
+  renderChromeElement,
   stampAnimationVars
-} from "./chunk-SXTHPXG6.js";
+} from "./chunk-APMUBW72.js";
 import {
+  applyTextStyle,
   injectThemeStyleBlock
 } from "./chunk-SDJHUELU.js";
 import {
   createTooltipManager,
   observeResize,
   resolveDarkMode
-} from "./chunk-2OJZBMXM.js";
+} from "./chunk-REH5UQCL.js";
 import {
   resolvedSurface
-} from "./chunk-NG7CVCI2.js";
+} from "./chunk-UC4IHEUO.js";
 
 // src/barlist-mount.ts
 import { compileBarList } from "@opendata-ai/openchart-engine";
 
 // src/barlist-renderer.ts
-import { textAscent } from "@opendata-ai/openchart-core";
 var SVG_NS = "http://www.w3.org/2000/svg";
 var XLINK_NS = "http://www.w3.org/1999/xlink";
 var BRAND_URL = "https://tryopendata.ai";
@@ -84,18 +88,13 @@ function renderChrome(parent, layout) {
     const el = chrome[key];
     if (!el) continue;
     const isBottom = key === "source" || key === "byline" || key === "footer";
-    const text = createSVGElement("text");
-    setAttrs(text, {
-      x: el.x,
-      y: (isBottom ? bottomOffset + el.y : el.y) + textAscent(el.style.fontSize)
-    });
-    text.setAttribute("class", `oc-${key}`);
-    text.setAttribute("font-family", el.style.fontFamily);
-    text.setAttribute("font-size", String(el.style.fontSize));
-    text.setAttribute("font-weight", String(el.style.fontWeight));
-    text.style.setProperty("fill", el.style.fill);
-    text.textContent = el.text;
-    g.appendChild(text);
+    renderChromeElement(
+      g,
+      isBottom ? { ...el, y: bottomOffset + el.y } : el,
+      `oc-${key}`,
+      key,
+      layout.measureText
+    );
   }
   parent.appendChild(g);
 }
@@ -233,7 +232,11 @@ function renderBarListSVG(layout, opts) {
   const classes = animate ? "oc-barlist oc-animate" : "oc-barlist";
   svg.setAttribute("class", classes);
   if (animate && animation?.enter) {
-    stampAnimationVars(svg, { duration: animation.enter.duration, stagger: 40 });
+    stampAnimationVars(svg, {
+      duration: animation.enter.duration,
+      spring: animation.enter.spring,
+      stagger: 40
+    });
   }
   renderChrome(svg, layout);
   renderRows(svg, rows, animate ? animation : void 0);
@@ -256,8 +259,8 @@ function createBarList(container, spec, options) {
   let pendingResize = false;
   let fontsReloadPending = false;
   container.classList.add("oc-barlist-root");
-  function resolveEffectiveFont() {
-    return options?.theme?.fonts?.family ?? currentSpec.theme?.fonts?.family ?? resolveFontFamily(container);
+  function resolveEffectiveFont(candidate = currentSpec) {
+    return options?.theme?.fonts?.family ?? candidate.theme?.fonts?.family ?? resolveFontFamily(container);
   }
   let fontFamily = resolveEffectiveFont();
   let measureText = createMeasureText(fontFamily);
@@ -269,7 +272,7 @@ function createBarList(container, spec, options) {
       height: Math.max(rect.height || 400, 100)
     };
   }
-  function compile() {
+  function compile(candidate = currentSpec, measure = measureText) {
     const { width, height } = getContainerDimensions();
     const darkMode = resolveDarkMode(options?.darkMode);
     const compileOpts = {
@@ -278,9 +281,9 @@ function createBarList(container, spec, options) {
       theme: options?.theme,
       darkMode,
       watermark: options?.watermark,
-      measureText
+      measureText: measure
     };
-    const layout = compileBarList(currentSpec, compileOpts);
+    const layout = compileBarList(candidate, compileOpts);
     if (layout.rows.length > 0) {
       const lastRow = layout.rows[layout.rows.length - 1];
       const contentBottom = lastRow.y + lastRow.height + layout.chrome.bottomHeight + layout.theme.spacing.padding;
@@ -293,6 +296,8 @@ function createBarList(container, spec, options) {
   }
   function wireTooltipAndInteraction(svg, layout) {
     const cleanups = [];
+    const navigation = [];
+    let activeLeave = null;
     const rowElements = svg.querySelectorAll(".oc-barlist-row");
     for (const el of rowElements) {
       const indexStr = el.getAttribute("data-row-index");
@@ -300,6 +305,8 @@ function createBarList(container, spec, options) {
       const content = layout.tooltipDescriptors.get(indexStr);
       const row = layout.rows[Number(indexStr)];
       const handleMouseEnter = (e) => {
+        activeLeave?.();
+        activeLeave = handleMouseLeave;
         const mouseEvent = e;
         if (content && tooltipManager && options?.tooltip !== false) {
           const svgRect = svg.getBoundingClientRect();
@@ -325,6 +332,8 @@ function createBarList(container, spec, options) {
         }
       };
       const handleMouseLeave = () => {
+        if (activeLeave !== handleMouseLeave) return;
+        activeLeave = null;
         tooltipManager?.hide();
         options?.onRowHover?.(null);
       };
@@ -337,6 +346,13 @@ function createBarList(container, spec, options) {
           });
         }
       };
+      navigation.push({
+        element: el,
+        key: row?.label.text ?? indexStr,
+        enter: handleMouseEnter,
+        leave: handleMouseLeave,
+        activate: handleClick
+      });
       el.addEventListener("mouseenter", handleMouseEnter);
       el.addEventListener("mousemove", handleMouseMove);
       el.addEventListener("mouseleave", handleMouseLeave);
@@ -348,11 +364,15 @@ function createBarList(container, spec, options) {
         el.removeEventListener("click", handleClick);
       });
     }
+    cleanups.push(wireMarkNavigation(svg, navigation));
     return () => {
+      activeLeave?.();
       for (const cleanup of cleanups) cleanup();
     };
   }
   function render(animate = false) {
+    const focusedMark = captureMarkFocus(svgElement);
+    tooltipManager?.hide();
     if (animationCleanup) {
       animationCleanup();
       animationCleanup = null;
@@ -373,7 +393,7 @@ function createBarList(container, spec, options) {
         tooltipManager = createTooltipManager(container);
       }
     }
-    if (currentLayout.animation?.enter) {
+    if (animate && currentLayout.animation?.enter) {
       animationCleanup = setupAnimationCleanup(newSvg, () => {
         animationCleanup = null;
         if (pendingResize && !destroyed) {
@@ -388,15 +408,17 @@ function createBarList(container, spec, options) {
       fontsReloadPending = false;
       container.dataset.ocFontsState = "ready";
     }
+    if (svgElement) restoreMarkFocus(svgElement, focusedMark);
   }
   function update(newSpec) {
+    if (destroyed) return;
+    const nextFont = resolveEffectiveFont(newSpec);
+    const nextMeasure = nextFont === fontFamily ? measureText : createMeasureText(nextFont);
+    const nextLayout = compile(newSpec, nextMeasure);
     currentSpec = newSpec;
-    const nextFont = resolveEffectiveFont();
-    if (nextFont !== fontFamily) {
-      fontFamily = nextFont;
-      measureText = createMeasureText(fontFamily);
-    }
-    currentLayout = compile();
+    fontFamily = nextFont;
+    measureText = nextMeasure;
+    currentLayout = nextLayout;
     render();
   }
   function resize() {
@@ -410,15 +432,17 @@ function createBarList(container, spec, options) {
   }
   function exportChart(format, options_) {
     if (!svgElement) return "";
+    const terminalSvg = renderBarListSVG(currentLayout, { animate: false });
+    const resolvedOptions = { theme: currentLayout.theme, ...options_ };
     switch (format) {
       case "svg":
-        return exportSVG(svgElement);
+        return exportSVG(terminalSvg);
       case "svg-with-fonts":
-        return exportSVGWithFonts(svgElement);
+        return exportSVGWithFonts(terminalSvg, resolvedOptions);
       case "png":
-        return exportPNG(svgElement, options_);
+        return exportPNG(terminalSvg, resolvedOptions);
       case "jpg":
-        return exportJPG(svgElement, options_);
+        return exportJPG(terminalSvg, resolvedOptions);
       default:
         return "";
     }
@@ -611,6 +635,285 @@ function createSimulationWorker() {
   return new Worker(new URL("./simulation-worker.js", import.meta.url), { type: "module" });
 }
 
+// src/reader.ts
+import {
+  observationKey,
+  reconcileReaderSelection,
+  resolveObservationIdentities
+} from "@opendata-ai/openchart-engine";
+var LAYER_UNSUPPORTED = "Reader inspection is unavailable for layered charts: observations cannot be bound to a single dataset.";
+var seriesField = (spec) => spec.encoding.color && "field" in spec.encoding.color ? spec.encoding.color.field : void 0;
+function createReader(container, instance, initial, onChange) {
+  let spec = "layer" in initial ? null : initial;
+  let state = {
+    preview: null,
+    pinned: [],
+    announcement: spec ? "" : LAYER_UNSUPPORTED
+  };
+  let keyboardIndex = -1;
+  let settleFrame = null;
+  let visibilityOverride;
+  let identities = spec ? resolveObservationIdentities(spec.data, spec.encoding.key?.field, seriesField(spec)) : [];
+  const emit = () => onChange({ ...state, pinned: [...state.pinned] });
+  const visibleData = (layout = instance.sampleLayout()) => {
+    const rows = layout.marks.flatMap((mark) => {
+      if ("opacity" in mark && mark.opacity === 0) return [];
+      if (mark.type === "line" || mark.type === "area")
+        return (mark.dataPoints ?? []).map((point, index) => ({
+          datum: point.datum,
+          key: mark.pointKeys?.[index]
+        }));
+      if ("data" in mark) return [{ datum: mark.data, key: mark.key }];
+      return [];
+    });
+    return [...new Map(rows.map((row) => [row.datum, row])).values()];
+  };
+  const compiledVisibleKeys = (observations) => {
+    const keys = /* @__PURE__ */ new Set();
+    if (!spec || !observations.length) return keys;
+    const rows = visibleData(instance.layout);
+    const references = new Set(rows.map(({ datum }) => datum));
+    const signatures = new Set(rows.map(({ datum }) => JSON.stringify(datum)));
+    const keyField = spec.encoding.key?.field;
+    const visibleSourceKeys = new Set(
+      keyField ? rows.map(({ datum }) => observationKey(datum[keyField])) : []
+    );
+    for (const observation of observations) {
+      if (observation.kind === "aggregate") {
+        if (signatures.has(JSON.stringify(observation.datum))) keys.add(observation.observation);
+        continue;
+      }
+      const index = identities.findIndex((id) => id.observation === observation.observation);
+      if (index < 0) continue;
+      const row = spec.data[index];
+      const signature = JSON.stringify(row);
+      const visible = observation.persistent ? visibleSourceKeys.has(observation.observation) : references.has(row) || signatures.has(signature) && spec.data.filter((source) => JSON.stringify(source) === signature).length === 1;
+      if (visible) keys.add(observation.observation);
+    }
+    return keys;
+  };
+  const resolve = (datum) => {
+    if (!spec) return null;
+    const keyField = spec.encoding.key?.field;
+    let index = spec.data.indexOf(datum);
+    if (index >= 0 && spec.data.lastIndexOf(datum) !== index) return null;
+    if (index < 0 && keyField)
+      index = spec.data.findIndex(
+        (_row, i) => identities[i].persistent && identities[i].observation === observationKey(datum[keyField])
+      );
+    if (index < 0) {
+      const matches = spec.data.flatMap(
+        (row, i) => JSON.stringify(row) === JSON.stringify(datum) ? [i] : []
+      );
+      if (matches.length > 1) return null;
+      if (matches.length === 1) index = matches[0];
+    }
+    if (index >= 0) return { ...identities[index], datum: spec.data[index], state: "visible" };
+    const group = visibleData(instance.layout).find(
+      (row) => row.datum === datum || JSON.stringify(row.datum) === JSON.stringify(datum)
+    );
+    return group ? {
+      observation: `aggregate:${JSON.stringify([spec.mark, spec.encoding, spec.transform])}:${group.key ?? JSON.stringify(datum)}`,
+      persistent: false,
+      datum: group.datum,
+      kind: "aggregate",
+      state: "visible"
+    } : null;
+  };
+  const pin = (datum) => {
+    const observation = resolve(datum);
+    if (!observation) return;
+    observation.state = (visibilityOverride ?? compiledVisibleKeys([observation])).has(
+      observation.observation
+    ) ? "visible" : "filtered";
+    state = {
+      ...state,
+      preview: observation,
+      announcement: "Observation pinned.",
+      pinned: [
+        ...state.pinned.filter((item) => item.observation !== observation.observation),
+        observation
+      ].slice(-2)
+    };
+    emit();
+  };
+  const clear = () => {
+    state = {
+      preview: null,
+      pinned: [],
+      announcement: spec ? "Selection dismissed." : LAYER_UNSUPPORTED
+    };
+    emit();
+  };
+  function hit(event) {
+    if (!spec) return null;
+    const svg = container.querySelector("svg");
+    if (!svg) return null;
+    const bounds = svg.getBoundingClientRect();
+    if (!bounds.width || !bounds.height) return null;
+    const layout = instance.sampleLayout();
+    const x = (event.clientX - bounds.left) * layout.dimensions.width / bounds.width;
+    const y = (event.clientY - bounds.top) * layout.dimensions.height / bounds.height;
+    if (x < layout.area.x || x > layout.area.x + layout.area.width || y < layout.area.y || y > layout.area.y + layout.area.height)
+      return null;
+    let nearest = null;
+    let distance = 32;
+    const consider = (datum, dx, dy) => {
+      const d = Math.hypot(dx, dy);
+      if (d <= distance) {
+        distance = d;
+        nearest = datum;
+      }
+    };
+    for (const mark of layout.marks) {
+      if ("opacity" in mark && mark.opacity === 0) continue;
+      if (mark.type === "point") consider(mark.data, x - mark.cx, y - mark.cy);
+      else if (mark.type === "rect")
+        consider(
+          mark.data,
+          Math.max(mark.x - x, 0, x - mark.x - mark.width),
+          Math.max(mark.y - y, 0, y - mark.y - mark.height)
+        );
+      else if (mark.type === "arc") {
+        const dx = x - mark.center.x;
+        const dy = y - mark.center.y;
+        const radius = Math.hypot(dx, dy);
+        const angle = (Math.atan2(dy, dx) + Math.PI / 2 + Math.PI * 2) % (Math.PI * 2);
+        const start = (mark.startAngle + Math.PI * 2) % (Math.PI * 2);
+        const sweep = mark.endAngle - mark.startAngle;
+        if (radius >= mark.innerRadius && radius <= mark.outerRadius && (angle - start + Math.PI * 2) % (Math.PI * 2) <= sweep)
+          consider(mark.data, 0, 0);
+      } else if (mark.type === "line" || mark.type === "area") {
+        for (const point of mark.dataPoints ?? []) consider(point.datum, x - point.x, y - point.y);
+      }
+    }
+    return nearest;
+  }
+  const preview = (event) => {
+    if (event.pointerType === "touch") return;
+    const datum = hit(event);
+    state = { ...state, preview: datum ? resolve(datum) : null };
+    emit();
+  };
+  const click = (event) => {
+    const datum = hit(event);
+    if (datum) pin(datum);
+  };
+  const leave = () => {
+    state = { ...state, preview: null };
+    emit();
+  };
+  const keydown = (event) => {
+    if (!spec) return;
+    if (event.target.closest(
+      "input, textarea, select, button, [contenteditable=true]"
+    ))
+      return;
+    if (event.key === "Escape") {
+      clear();
+      return;
+    }
+    if (event.key === "Enter" && state.preview) {
+      event.preventDefault();
+      pin(state.preview.datum);
+      return;
+    }
+    const rows = visibleData();
+    if (!["ArrowLeft", "ArrowRight", "ArrowUp", "ArrowDown"].includes(event.key) || !rows.length)
+      return;
+    event.preventDefault();
+    event.stopPropagation();
+    const backwards = event.key === "ArrowLeft" || event.key === "ArrowUp";
+    keyboardIndex = keyboardIndex < 0 ? backwards ? rows.length - 1 : 0 : (keyboardIndex + (backwards ? -1 : 1) + rows.length) % rows.length;
+    state = { ...state, preview: resolve(rows[keyboardIndex].datum) };
+    emit();
+  };
+  container.addEventListener("pointermove", preview);
+  container.addEventListener("pointerleave", leave);
+  container.addEventListener("click", click);
+  container.addEventListener("keydown", keydown, true);
+  if (!spec) emit();
+  return {
+    get selection() {
+      return state;
+    },
+    pin,
+    clear,
+    update(next, visibleKeys) {
+      if (settleFrame !== null) {
+        cancelAnimationFrame(settleFrame);
+        settleFrame = null;
+      }
+      visibilityOverride = visibleKeys;
+      if ("layer" in next) {
+        spec = null;
+        identities = [];
+        keyboardIndex = -1;
+        state = { preview: null, pinned: [], announcement: LAYER_UNSUPPORTED };
+        emit();
+        return;
+      }
+      const meaningChanged = !spec || JSON.stringify([next.mark, next.encoding, next.transform]) !== JSON.stringify([spec.mark, spec.encoding, spec.transform]);
+      if (meaningChanged && (state.pinned.some((item) => item.kind === "aggregate") || state.preview?.kind === "aggregate")) {
+        state = {
+          ...state,
+          preview: null,
+          pinned: state.pinned.filter((item) => item.kind !== "aggregate"),
+          announcement: "Aggregate selection cleared because its grouping or transformation changed."
+        };
+      }
+      const replaced = !spec || next.data !== spec.data || next.encoding.key?.field !== spec.encoding.key?.field;
+      const resuming = !spec;
+      spec = next;
+      identities = resolveObservationIdentities(
+        spec.data,
+        spec.encoding.key?.field,
+        seriesField(spec)
+      );
+      const effectiveVisibility = visibleKeys ?? compiledVisibleKeys(state.pinned);
+      if (replaced)
+        state = reconcileReaderSelection(
+          state,
+          spec.data,
+          spec.encoding.key?.field,
+          seriesField(spec),
+          effectiveVisibility
+        );
+      else
+        state = {
+          ...state,
+          preview: null,
+          pinned: state.pinned.map((item) => ({
+            ...item,
+            ...item.kind !== "aggregate" ? identities.find((id) => id.observation === item.observation) : {},
+            state: effectiveVisibility.has(item.observation) ? "visible" : "filtered"
+          }))
+        };
+      if (resuming) state = { ...state, announcement: "" };
+      if (replaced || meaningChanged) keyboardIndex = -1;
+      emit();
+      const settle = () => {
+        settleFrame = null;
+        if (!state.pinned.some((item) => item.previous)) return;
+        if (instance.sampleLayout() !== instance.layout) {
+          settleFrame = requestAnimationFrame(settle);
+          return;
+        }
+        state = { ...state, pinned: state.pinned.map(({ previous: _previous, ...item }) => item) };
+        emit();
+      };
+      settleFrame = requestAnimationFrame(settle);
+    },
+    destroy() {
+      if (settleFrame !== null) cancelAnimationFrame(settleFrame);
+      container.removeEventListener("pointermove", preview);
+      container.removeEventListener("pointerleave", leave);
+      container.removeEventListener("click", click);
+      container.removeEventListener("keydown", keydown, true);
+    }
+  };
+}
+
 // src/renderers/table-cells.ts
 function applyCellStyle(td, cell) {
   if (cell.style.backgroundColor) {
@@ -972,7 +1275,6 @@ import {
   BRAND_FONT_SIZE,
   BRAND_MIN_WIDTH,
   estimateTextWidth,
-  textAscent as textAscent2,
   wrapText
 } from "@opendata-ai/openchart-core";
 import { clampStaggerDelay } from "@opendata-ai/openchart-engine";
@@ -987,55 +1289,12 @@ function setAttrs2(el, attrs) {
     el.setAttribute(key, String(value));
   }
 }
-function applyTextStyle(el, style) {
-  setAttrs2(el, {
-    "font-family": style.fontFamily,
-    "font-size": style.fontSize,
-    "font-weight": style.fontWeight
-  });
-  el.style.setProperty("fill", style.fill);
-  if (style.textAnchor) {
-    el.setAttribute("text-anchor", style.textAnchor);
-  }
-  if (style.dominantBaseline) {
-    el.setAttribute("dominant-baseline", style.dominantBaseline);
-  }
-  if (style.fontVariant) {
-    el.setAttribute("font-variant", style.fontVariant);
-  }
-}
 function stampAnimationAttrs(el, mark, fallbackIndex, animation) {
   if (!animation?.enter) return;
   const idx = mark.animationIndex ?? fallbackIndex;
   el.setAttribute("data-animation-index", String(idx));
   el.style.setProperty("--oc-mark-index", String(idx));
 }
-function renderChromeElement(parent, element, className, chromeKey, measureText) {
-  const text = createSVGElement2("text");
-  setAttrs2(text, { x: element.x, y: element.y + textAscent2(element.style.fontSize) });
-  applyTextStyle(text, element.style);
-  text.setAttribute("class", className);
-  text.setAttribute("data-chrome-key", chromeKey);
-  const lines = wrapText(
-    element.text,
-    element.style.fontSize,
-    element.style.fontWeight,
-    element.maxWidth,
-    measureText
-  );
-  if (lines.length === 1) {
-    text.textContent = element.text;
-  } else {
-    const lineHeight = element.style.fontSize * (element.style.lineHeight ?? 1.3);
-    for (let i = 0; i < lines.length; i++) {
-      const tspan = createSVGElement2("tspan");
-      setAttrs2(tspan, { x: element.x, dy: i === 0 ? 0 : lineHeight });
-      tspan.textContent = lines[i];
-      text.appendChild(tspan);
-    }
-  }
-  parent.appendChild(text);
-}
 function renderChrome2(parent, layout) {
   const g = createSVGElement2("g");
   g.setAttribute("class", "oc-chrome");
@@ -1361,6 +1620,7 @@ function renderSankeySVG(layout, animation) {
     const stagger = clampStaggerDelay(enterPhase.staggerDelay, totalMarks);
     stampAnimationVars(svg, {
       duration: enterPhase.duration,
+      spring: enterPhase.spring,
       stagger,
       annotationDelay: animation.annotationDelay,
       ease: enterPhase.ease
@@ -1408,8 +1668,8 @@ function createSankey(container, spec, options) {
   let pendingResize = false;
   let fontsReloadPending = false;
   container.classList.add("oc-sankey-root");
-  function resolveEffectiveFont() {
-    return options?.theme?.fonts?.family ?? currentSpec.theme?.fonts?.family ?? resolveFontFamily(container);
+  function resolveEffectiveFont(candidate = currentSpec) {
+    return options?.theme?.fonts?.family ?? candidate.theme?.fonts?.family ?? resolveFontFamily(container);
   }
   let fontFamily = resolveEffectiveFont();
   let measureText = createMeasureText(fontFamily);
@@ -1421,7 +1681,7 @@ function createSankey(container, spec, options) {
       height: Math.max(rect.height || 400, 100)
     };
   }
-  function compile() {
+  function compile(candidate = currentSpec, measure = measureText) {
     const { width, height } = getContainerDimensions();
     const darkMode = resolveDarkMode(options?.darkMode);
     const compileOpts = {
@@ -1430,12 +1690,14 @@ function createSankey(container, spec, options) {
       theme: options?.theme,
       darkMode,
       watermark: options?.watermark,
-      measureText
+      measureText: measure
     };
-    return compileSankey(currentSpec, compileOpts);
+    return compileSankey(candidate, compileOpts);
   }
   function wireTooltipAndInteraction(svg, layout) {
     const cleanups = [];
+    const navigation = [];
+    let activeLeave = null;
     const nodesById = /* @__PURE__ */ new Map();
     for (const n of layout.nodes) {
       if (!nodesById.has(n.nodeId)) nodesById.set(n.nodeId, n);
@@ -1448,6 +1710,8 @@ function createSankey(container, spec, options) {
       const nodeId = el.getAttribute("data-node-id");
       const nodeData = nodeId ? nodesById.get(nodeId)?.data ?? {} : {};
       const handleMouseEnter = (e) => {
+        activeLeave?.();
+        activeLeave = handleMouseLeave;
         const mouseEvent = e;
         if (content && tooltipManager) {
           const svgRect = svg.getBoundingClientRect();
@@ -1468,6 +1732,8 @@ function createSankey(container, spec, options) {
         }
       };
       const handleMouseLeave = () => {
+        if (activeLeave !== handleMouseLeave) return;
+        activeLeave = null;
         tooltipManager?.hide();
         options?.onNodeHover?.(null);
         resetLinkOpacity(svg, layout);
@@ -1475,6 +1741,13 @@ function createSankey(container, spec, options) {
       const handleClick = () => {
         options?.onNodeClick?.(nodeData);
       };
+      navigation.push({
+        element: el,
+        key: nodeId ? `node:${nodeId}` : markId,
+        enter: handleMouseEnter,
+        leave: handleMouseLeave,
+        activate: handleClick
+      });
       el.addEventListener("mouseenter", handleMouseEnter);
       el.addEventListener("mousemove", handleMouseMove);
       el.addEventListener("mouseleave", handleMouseLeave);
@@ -1487,14 +1760,16 @@ function createSankey(container, spec, options) {
       });
     }
     const linkElements = svg.querySelectorAll(".oc-sankey-link");
-    for (const el of linkElements) {
+    for (const [index, el] of linkElements.entries()) {
       const markId = el.getAttribute("data-mark-id");
       if (!markId) continue;
       const content = layout.tooltipDescriptors.get(markId);
       const sourceId = el.getAttribute("data-source");
       const targetId = el.getAttribute("data-target");
-      const linkData = findLinkData(layout, sourceId, targetId);
+      const linkData = layout.links[index]?.data ?? {};
       const handleMouseEnter = (e) => {
+        activeLeave?.();
+        activeLeave = handleMouseLeave;
         const mouseEvent = e;
         if (content && tooltipManager) {
           const svgRect = svg.getBoundingClientRect();
@@ -1521,6 +1796,8 @@ function createSankey(container, spec, options) {
         }
       };
       const handleMouseLeave = () => {
+        if (activeLeave !== handleMouseLeave) return;
+        activeLeave = null;
         tooltipManager?.hide();
         options?.onLinkHover?.(null);
         resetLinkOpacity(svg, layout);
@@ -1528,6 +1805,13 @@ function createSankey(container, spec, options) {
       const handleClick = () => {
         options?.onLinkClick?.(linkData);
       };
+      navigation.push({
+        element: el,
+        key: JSON.stringify(["link", sourceId, targetId]),
+        enter: handleMouseEnter,
+        leave: handleMouseLeave,
+        activate: handleClick
+      });
       el.addEventListener("mouseenter", handleMouseEnter);
       el.addEventListener("mousemove", handleMouseMove);
       el.addEventListener("mouseleave", handleMouseLeave);
@@ -1539,17 +1823,14 @@ function createSankey(container, spec, options) {
         el.removeEventListener("click", handleClick);
       });
     }
+    cleanups.push(wireMarkNavigation(svg, navigation));
     return () => {
+      activeLeave?.();
       for (const cleanup of cleanups) {
         cleanup();
       }
     };
   }
-  function findLinkData(layout, sourceId, targetId) {
-    if (!sourceId || !targetId) return {};
-    const link = layout.links.find((l) => l.sourceId === sourceId && l.targetId === targetId);
-    return link?.data ?? {};
-  }
   function tracePath(layout, seeds) {
     const out = /* @__PURE__ */ new Map();
     const inn = /* @__PURE__ */ new Map();
@@ -1601,20 +1882,21 @@ function createSankey(container, spec, options) {
   }
   function resetLinkOpacity(svg, layout) {
     const linkElements = svg.querySelectorAll(".oc-sankey-link");
-    for (const el of linkElements) {
+    for (const [index, el] of linkElements.entries()) {
       const path = el.querySelector("path");
       if (!path) continue;
-      const source = el.getAttribute("data-source");
-      const target = el.getAttribute("data-target");
-      const link = layout.links.find((l) => l.sourceId === source && l.targetId === target);
+      const link = layout.links[index];
       path.setAttribute("fill-opacity", String(link?.fillOpacity ?? 0.5));
     }
     for (const el of svg.querySelectorAll(".oc-sankey-node, .oc-sankey-label")) {
       el.style.opacity = "1";
     }
   }
-  function render() {
+  function render(prepared) {
     if (destroyed) return;
+    const nextLayout = prepared ?? compile();
+    const focusedMark = captureMarkFocus(svgElement);
+    tooltipManager?.hide();
     if (animationCleanup) {
       animationCleanup();
       animationCleanup = null;
@@ -1629,7 +1911,7 @@ function createSankey(container, spec, options) {
     if (svgElement?.parentNode) {
       svgElement.parentNode.removeChild(svgElement);
     }
-    currentLayout = compile();
+    currentLayout = nextLayout;
     const shouldAnimate = isFirstRender && !!currentLayout.animation?.enter;
     isFirstRender = false;
     const animation = shouldAnimate ? currentLayout.animation : void 0;
@@ -1645,8 +1927,8 @@ function createSankey(container, spec, options) {
       if (!tooltipManager) {
         tooltipManager = createTooltipManager(container);
       }
-      cleanupTooltipEvents = wireTooltipAndInteraction(svgElement, currentLayout);
     }
+    cleanupTooltipEvents = wireTooltipAndInteraction(svgElement, currentLayout);
     if (shouldAnimate && svgElement) {
       animationCleanup = setupAnimationCleanup(svgElement, () => {
         animationCleanup = null;
@@ -1662,17 +1944,17 @@ function createSankey(container, spec, options) {
       fontsReloadPending = false;
       container.dataset.ocFontsState = "ready";
     }
+    if (svgElement) restoreMarkFocus(svgElement, focusedMark);
   }
   function update(newSpec) {
     if (destroyed) return;
+    const nextFont = resolveEffectiveFont(newSpec);
+    const nextMeasure = nextFont === fontFamily ? measureText : createMeasureText(nextFont);
+    const nextLayout = compile(newSpec, nextMeasure);
     currentSpec = newSpec;
-    const nextFont = resolveEffectiveFont();
-    if (nextFont !== fontFamily) {
-      fontFamily = nextFont;
-      measureText = createMeasureText(fontFamily);
-    }
-    isFirstRender = true;
-    render();
+    fontFamily = nextFont;
+    measureText = nextMeasure;
+    render(nextLayout);
   }
   function resize() {
     if (destroyed) return;
@@ -1686,15 +1968,17 @@ function createSankey(container, spec, options) {
     if (!svgElement) {
       throw new Error("Sankey is not rendered yet");
     }
+    const terminalSvg = renderSankeySVG(currentLayout);
+    const resolvedOptions = { theme: currentLayout.theme, ...exportOptions };
     switch (format) {
       case "svg":
-        return exportSVG(svgElement);
+        return exportSVG(terminalSvg);
       case "svg-with-fonts":
-        return exportSVGWithFonts(svgElement, exportOptions);
+        return exportSVGWithFonts(terminalSvg, resolvedOptions);
       case "png":
-        return exportPNG(svgElement, exportOptions);
+        return exportPNG(terminalSvg, resolvedOptions);
       case "jpg":
-        return exportJPG(svgElement, exportOptions);
+        return exportJPG(terminalSvg, resolvedOptions);
       default:
         throw new Error(`Unsupported export format: ${format}`);
     }
@@ -1744,8 +2028,8 @@ function createSankey(container, spec, options) {
     }
     if (options?.tooltip !== false && svgElement) {
       tooltipManager = createTooltipManager(container);
-      cleanupTooltipEvents = wireTooltipAndInteraction(svgElement, currentLayout);
     }
+    cleanupTooltipEvents = wireTooltipAndInteraction(svgElement, currentLayout);
     if (shouldAnimate && svgElement) {
       animationCleanup = setupAnimationCleanup(svgElement, () => {
         animationCleanup = null;
@@ -1787,9 +2071,11 @@ function createSankey(container, spec, options) {
 }
 
 // src/table-keyboard.ts
+var navigationId = 0;
 function attachKeyboardNav(options) {
   const { wrapper, onSort, onClearSearch, onAnnounce } = options;
   let focusedCell = { row: -1, col: 0 };
+  const idPrefix = `oc-table-${++navigationId}`;
   const table = wrapper.querySelector("table");
   if (!table) return () => {
   };
@@ -1806,10 +2092,10 @@ function attachKeyboardNav(options) {
     if (!thead) return [];
     const headerRow = thead.querySelector("tr");
     if (!headerRow) return [];
-    return Array.from(headerRow.querySelectorAll("th"));
+    return Array.from(headerRow.querySelectorAll("th")).filter((cell) => !cell.hidden);
   }
   function getCellsInRow(tr) {
-    return Array.from(tr.querySelectorAll("td"));
+    return Array.from(tr.querySelectorAll("td")).filter((cell) => !cell.hidden);
   }
   function getColCount() {
     const rows = getRows();
@@ -1836,7 +2122,7 @@ function attachKeyboardNav(options) {
     const cells = getCellsInRow(tr);
     const cell = cells[col];
     if (!cell) return;
-    const cellId = `oc-cell-${row}-${col}`;
+    const cellId = `${idPrefix}-cell-${row}-${col}`;
     cell.id = cellId;
     cell.classList.add("oc-table-cell-focus");
     cell.setAttribute("data-row", String(row));
@@ -1848,17 +2134,33 @@ function attachKeyboardNav(options) {
   }
   function handleTbodyFocus() {
     if (focusedCell.row < 0) {
-      setFocusedCell(0, 0);
+      const row = getRows().findIndex(
+        (item) => item.getAttribute("data-row-id") === options.initialCell?.rowId
+      );
+      const col = getHeaderCells().findIndex(
+        (item) => item.getAttribute("data-column") === options.initialCell?.columnKey
+      );
+      setFocusedCell(Math.max(0, row), Math.max(0, col));
     } else {
       setFocusedCell(focusedCell.row, focusedCell.col);
     }
   }
   function handleTbodyKeydown(e) {
+    if (e.target !== tbody) return;
     const rows = getRows();
     if (rows.length === 0) return;
     const colCount = getColCount();
     const { row, col } = focusedCell;
     switch (e.key) {
+      case "Enter":
+      case " ": {
+        const rowId = rows[Math.max(row, 0)]?.getAttribute("data-row-id");
+        if (rowId && options.onRowActivate) {
+          e.preventDefault();
+          options.onRowActivate(rowId);
+        }
+        break;
+      }
       case "ArrowDown":
         e.preventDefault();
         if (row < rows.length - 1) {
@@ -1944,7 +2246,7 @@ function attachKeyboardNav(options) {
     if (e.key === "Escape") {
       e.preventDefault();
       onClearSearch();
-      if (tbody) {
+      if (tbody?.isConnected) {
         tbody.focus();
         onAnnounce("Search cleared");
       }
@@ -1973,6 +2275,46 @@ function attachKeyboardNav(options) {
   };
 }
 
+// src/table-responsive.ts
+function applyPriorityTable(wrapper, layout, enabled) {
+  wrapper.classList.toggle("oc-table--priority", enabled);
+  for (const old of wrapper.querySelectorAll(".oc-table-details")) old.remove();
+  const secondary = layout.columns.flatMap((column, index) => column.priority > 1 ? [index] : []);
+  const hidden = new Set(secondary);
+  for (const row of wrapper.querySelectorAll("thead tr, tbody tr, tfoot tr")) {
+    const cells = Array.from(row.children);
+    cells.forEach((cell2, index) => {
+      cell2.hidden = enabled && hidden.has(index);
+    });
+    if (!enabled || !secondary.length) continue;
+    const cell = document.createElement(row.parentElement?.tagName === "THEAD" ? "th" : "td");
+    cell.className = "oc-table-details";
+    if (cell.tagName === "TH") {
+      cell.textContent = "Details";
+      cell.setAttribute("scope", "col");
+    } else if (row.parentElement?.tagName === "TBODY") {
+      const details = document.createElement("details");
+      const summary = document.createElement("summary");
+      summary.textContent = "More";
+      summary.setAttribute("aria-label", `More details for ${cells[0]?.textContent ?? "row"}`);
+      details.appendChild(summary);
+      const list = document.createElement("dl");
+      for (const index of secondary) {
+        const term = document.createElement("dt");
+        term.textContent = layout.columns[index].label;
+        const description = document.createElement("dd");
+        for (const child of Array.from(cells[index]?.childNodes ?? []))
+          description.appendChild(child.cloneNode(true));
+        list.append(term, description);
+      }
+      details.appendChild(list);
+      details.addEventListener("click", (event) => event.stopPropagation());
+      cell.appendChild(details);
+    }
+    row.appendChild(cell);
+  }
+}
+
 // src/table-mount.ts
 import { BREAKPOINT_COMPACT_MAX } from "@opendata-ai/openchart-core";
 import { compileTable } from "@opendata-ai/openchart-engine";
@@ -2064,6 +2406,7 @@ function renderTbody(rows, columns) {
       if (!cell) continue;
       const td = renderCell(cell);
       td.setAttribute("role", "gridcell");
+      td.setAttribute("data-column", columns[c].key);
       td.style.textAlign = columns[c].align;
       td.setAttribute("data-label", columns[c].label);
       td.setAttribute("data-priority", String(columns[c].priority));
@@ -2083,6 +2426,7 @@ function renderTfoot(totalRow, columns) {
     const cell = totalRow.cells[c];
     const td = cell ? renderCell(cell) : document.createElement("td");
     td.setAttribute("role", "gridcell");
+    td.setAttribute("data-column", columns[c].key);
     td.style.textAlign = columns[c].align;
     td.setAttribute("data-label", columns[c].label);
     td.setAttribute("data-priority", String(columns[c].priority));
@@ -2271,6 +2615,7 @@ function renderTable(layout, container, opts) {
     const stagger = clampStaggerDelay2(enterPhase.staggerDelay, rowCount);
     stampAnimationVars(wrapper, {
       duration: enterPhase.duration,
+      spring: enterPhase.spring,
       stagger,
       ease: enterPhase.ease
     });
@@ -2305,6 +2650,7 @@ function createTable(container, spec, options) {
   let disconnectResize = null;
   let cleanupKeyboard = null;
   let cleanupAnimations = null;
+  let pendingResize = false;
   let isFirstRender = true;
   let destroyed = false;
   let sortTouched = false;
@@ -2346,7 +2692,7 @@ function createTable(container, spec, options) {
       options?.onStateChange?.({ ...internalState });
     }
   }
-  function compile() {
+  function compile(candidate = currentSpec) {
     const state = getState();
     const darkMode = resolveDarkMode(options?.darkMode);
     const { width } = getContainerDimensions();
@@ -2364,7 +2710,7 @@ function createTable(container, spec, options) {
       search: state.search || void 0,
       page: state.page
     };
-    return compileTable(currentSpec, compileOpts);
+    return compileTable(candidate, compileOpts);
   }
   function sameSort(a, b) {
     if (a === null || b === null) return a === b;
@@ -2390,7 +2736,17 @@ function createTable(container, spec, options) {
   function applyBreakpointClass() {
     if (!wrapperElement) return;
     const { width } = getContainerDimensions();
-    wrapperElement.classList.toggle("oc-table--cards", width < BREAKPOINT_COMPACT_MAX);
+    const compact = width < BREAKPOINT_COMPACT_MAX;
+    wrapperElement.classList.toggle(
+      "oc-table--cards",
+      compact && (currentSpec.mobileLayout ?? "cards") === "cards"
+    );
+    if (currentLayout)
+      applyPriorityTable(
+        wrapperElement,
+        currentLayout,
+        compact && currentSpec.mobileLayout === "priority"
+      );
     if (currentSpec.density !== void 0 || currentSpec.compact === true) return;
     const columns = currentLayout?.columns.length ?? 0;
     const condensed = columns * MIN_READABLE_COLUMN_WIDTH > width || width < AUTO_CONDENSE_MAX_WIDTH;
@@ -2398,69 +2754,100 @@ function createTable(container, spec, options) {
     wrapperElement.classList.toggle("oc-table--compact", condensed);
     wrapperElement.classList.toggle("oc-table--regular", !condensed);
   }
-  function render() {
+  function render(candidate = currentSpec) {
     if (destroyed) return;
-    try {
-      if (cleanupAnimations) {
-        cleanupAnimations();
+    const nextLayout = compile(candidate);
+    const active = document.activeElement;
+    const bodyFocused = active === wrapperElement?.querySelector("tbody");
+    const focusedCell = wrapperElement?.querySelector(".oc-table-cell-focus");
+    const initialCell = bodyFocused && focusedCell ? {
+      rowId: focusedCell.closest("tr")?.getAttribute("data-row-id") ?? "",
+      columnKey: focusedCell.getAttribute("data-column") ?? ""
+    } : void 0;
+    const headerKey = wrapperElement?.contains(active) ? active?.closest("th")?.getAttribute("data-column") : null;
+    const pageAction = wrapperElement?.contains(active) ? active?.getAttribute("data-page-action") : null;
+    currentSpec = candidate;
+    if (cleanupAnimations) {
+      cleanupAnimations();
+      cleanupAnimations = null;
+    }
+    if (cleanupKeyboard) {
+      cleanupKeyboard();
+      cleanupKeyboard = null;
+    }
+    if (wrapperElement?.parentNode) {
+      wrapperElement.parentNode.removeChild(wrapperElement);
+      wrapperElement = null;
+    }
+    currentLayout = nextLayout;
+    const shouldAnimate = isFirstRender && !!currentLayout.animation?.enter;
+    wrapperElement = renderTable(currentLayout, container, { animate: shouldAnimate });
+    if (shouldAnimate && wrapperElement) {
+      cleanupAnimations = setupTableAnimationCleanup(wrapperElement, () => {
         cleanupAnimations = null;
-      }
-      if (cleanupKeyboard) {
-        cleanupKeyboard();
-        cleanupKeyboard = null;
-      }
-      if (wrapperElement?.parentNode) {
-        wrapperElement.parentNode.removeChild(wrapperElement);
-        wrapperElement = null;
-      }
-      currentLayout = compile();
-      const shouldAnimate = isFirstRender && !!currentLayout.animation?.enter;
-      wrapperElement = renderTable(currentLayout, container, { animate: shouldAnimate });
-      if (shouldAnimate && wrapperElement) {
-        cleanupAnimations = setupTableAnimationCleanup(wrapperElement);
-      }
-      if (isFirstRender) {
-        isFirstRender = false;
-      }
-      const isDark = resolveDarkMode(options?.darkMode);
-      if (isDark) {
-        container.classList.add("oc-dark");
-      } else {
-        container.classList.remove("oc-dark");
-      }
-      applyBreakpointClass();
-      if (options?.onRowClick) {
-        wrapperElement.classList.add("oc-table--clickable");
-      }
-      wireEvents();
-      if (wrapperElement) {
-        cleanupKeyboard = attachKeyboardNav({
-          wrapper: wrapperElement,
-          onSort: (columnKey) => {
-            const state = getState();
-            const newSort = cycleSort(state.sort, columnKey);
-            updateState({ sort: newSort, page: 0 });
-            if (newSort) {
-              const dir = newSort.direction === "asc" ? "ascending" : "descending";
-              announce(`Sorted by ${columnKey} ${dir}`);
-            } else {
-              announce("Sort cleared");
-            }
-            if (!isControlled) {
-              rerender();
-            }
-          },
-          onClearSearch: () => {
-            updateState({ search: "", page: 0 });
-            if (!isControlled) {
-              rerender();
-            }
-          },
-          onAnnounce: announce
-        });
-      }
-    } catch (err) {
-      console.error("[viz] Table render failed:", err);
+        if (pendingResize && !destroyed) {
+          pendingResize = false;
+          resize();
+        }
+      });
+    }
+    if (isFirstRender) {
+      isFirstRender = false;
+    }
+    const isDark = resolveDarkMode(options?.darkMode);
+    if (isDark) {
+      container.classList.add("oc-dark");
+    } else {
+      container.classList.remove("oc-dark");
+    }
+    applyBreakpointClass();
+    if (options?.onRowClick) {
+      wrapperElement.classList.add("oc-table--clickable");
+    }
+    wireEvents();
+    if (wrapperElement) {
+      cleanupKeyboard = attachKeyboardNav({
+        wrapper: wrapperElement,
+        initialCell,
+        onRowActivate: options?.onRowClick ? (rowId) => {
+          const row = currentLayout.rows.find((item) => item.id === rowId);
+          if (row) options.onRowClick?.(row.data);
+        } : void 0,
+        onSort: (columnKey) => {
+          const state = getState();
+          const newSort = cycleSort(state.sort, columnKey);
+          updateState({ sort: newSort, page: 0 });
+          if (newSort) {
+            const dir = newSort.direction === "asc" ? "ascending" : "descending";
+            announce(`Sorted by ${columnKey} ${dir}`);
+          } else {
+            announce("Sort cleared");
+          }
+          if (!isControlled) {
+            rerender();
+          }
+        },
+        onClearSearch: () => {
+          if (searchDebounceTimer !== null) clearTimeout(searchDebounceTimer);
+          searchDebounceTimer = null;
+          updateState({ search: "", page: 0 });
+          if (!isControlled) {
+            rerender();
+          }
+          wrapperElement?.querySelector("tbody")?.focus();
+          announce("Search cleared");
+        },
+        onAnnounce: announce
+      });
+    }
+    if (bodyFocused) wrapperElement?.querySelector("tbody")?.focus();
+    else if (headerKey) {
+      [...wrapperElement?.querySelectorAll("th[data-column]") ?? []].find((element) => element.dataset.column === headerKey)?.focus();
+    } else if (pageAction) {
+      const buttons = [
+        ...wrapperElement?.querySelectorAll("[data-page-action]") ?? []
+      ];
+      (buttons.find((button) => button.dataset.pageAction === pageAction && !button.disabled) ?? buttons.find((button) => !button.disabled) ?? wrapperElement?.querySelector("tbody"))?.focus();
     }
   }
   function wireEvents() {
@@ -2543,20 +2930,22 @@ function createTable(container, spec, options) {
       options?.onRowClick?.(row.data);
     }
   }
-  function rerender() {
+  function rerender(candidate = currentSpec) {
     if (destroyed) return;
     const searchInput = wrapperElement?.querySelector(
       ".oc-table-search input"
     );
     const hadFocus = searchInput && document.activeElement === searchInput;
+    const pendingQuery = searchDebounceTimer !== null ? searchInput?.value : void 0;
     const selectionStart = searchInput?.selectionStart ?? 0;
     const selectionEnd = searchInput?.selectionEnd ?? 0;
-    render();
+    render(candidate);
     if (hadFocus) {
       const newInput = wrapperElement?.querySelector(
         ".oc-table-search input"
       );
       if (newInput) {
+        if (pendingQuery !== void 0) newInput.value = pendingQuery;
         newInput.focus();
         newInput.setSelectionRange(selectionStart, selectionEnd);
       }
@@ -2564,13 +2953,15 @@ function createTable(container, spec, options) {
   }
   function update(newSpec) {
     if (destroyed) return;
-    currentSpec = newSpec;
-    render();
+    rerender(newSpec);
   }
   function resize() {
     if (destroyed) return;
-    if (cleanupAnimations) return;
-    render();
+    if (cleanupAnimations) {
+      pendingResize = true;
+      return;
+    }
+    rerender();
   }
   function doExport(format) {
     if (format !== "csv") {
@@ -2579,15 +2970,18 @@ function createTable(container, spec, options) {
     const state = getState();
     const darkMode = resolveDarkMode(options?.darkMode);
     const { width } = getContainerDimensions();
-    const fullLayout = compileTable(currentSpec, {
-      width,
-      height: 600,
-      theme: options?.theme,
-      darkMode,
-      sort: resolveEffectiveSort(state),
-      search: state.search || void 0
-      // No page/pageSize: get all rows
-    });
+    const fullLayout = compileTable(
+      { ...currentSpec, pagination: false },
+      {
+        width,
+        height: 600,
+        theme: options?.theme,
+        darkMode,
+        sort: resolveEffectiveSort(state),
+        search: state.search || void 0
+        // No page/pageSize: get all rows
+      }
+    );
     const headers = fullLayout.columns.map((c) => c.label);
     const csvRows = [headers.map(csvEscape).join(",")];
     for (const row of fullLayout.rows) {
@@ -2598,6 +2992,10 @@ function createTable(container, spec, options) {
   }
   function setState(partial) {
     if (destroyed) return;
+    if (partial.search !== void 0 && partial.search !== getState().search && searchDebounceTimer !== null) {
+      clearTimeout(searchDebounceTimer);
+      searchDebounceTimer = null;
+    }
     if (partial.sort !== void 0 && !sameSort(partial.sort, getState().sort)) {
       sortTouched = true;
     }
@@ -2610,7 +3008,7 @@ function createTable(container, spec, options) {
       if (partial.search !== void 0) internalState.search = partial.search;
       if (partial.page !== void 0) internalState.page = partial.page;
     }
-    render();
+    rerender();
   }
   function destroy() {
     if (destroyed) return;
@@ -2687,8 +3085,8 @@ function createTileMap(container, spec, options) {
   let isAutoHeight = null;
   let fontsReloadPending = false;
   container.classList.add("oc-tilemap-root");
-  function resolveEffectiveFont() {
-    return options?.theme?.fonts?.family ?? currentSpec.theme?.fonts?.family ?? resolveFontFamily(container);
+  function resolveEffectiveFont(candidate = currentSpec) {
+    return options?.theme?.fonts?.family ?? candidate.theme?.fonts?.family ?? resolveFontFamily(container);
   }
   let fontFamily = resolveEffectiveFont();
   let measureText = createMeasureText(fontFamily);
@@ -2709,7 +3107,7 @@ function createTileMap(container, spec, options) {
     const height = targetTile * TILEMAP_GRID_ROWS + TILEMAP_TILE_GAP * (TILEMAP_GRID_ROWS - 1) + TILEMAP_CHROME_RESERVE;
     return { width, height };
   }
-  function compile() {
+  function compile(candidate = currentSpec, measure = measureText) {
     const { width, height } = getContainerDimensions();
     const darkMode = resolveDarkMode(options?.darkMode);
     const compileOpts = {
@@ -2718,12 +3116,14 @@ function createTileMap(container, spec, options) {
       theme: options?.theme,
       darkMode,
       watermark: options?.watermark,
-      measureText
+      measureText: measure
     };
-    return compileTileMap(currentSpec, compileOpts);
+    return compileTileMap(candidate, compileOpts);
   }
   function wireTooltipAndInteraction(svg, layout) {
     const cleanups = [];
+    const navigation = [];
+    let activeLeave = null;
     const tilesByStateCode = /* @__PURE__ */ new Map();
     for (const t of layout.tiles) {
       if (!tilesByStateCode.has(t.stateCode)) tilesByStateCode.set(t.stateCode, t);
@@ -2736,6 +3136,8 @@ function createTileMap(container, spec, options) {
       const content = layout.tooltipDescriptors.get(stateCode);
       const tile = tilesByStateCode.get(stateCode);
       const handleMouseEnter = (e) => {
+        activeLeave?.();
+        activeLeave = handleMouseLeave;
         const mouseEvent = e;
         tilesGroup?.classList.add("oc-hover-active");
         el.classList.add("oc-tilemap-tile--hover");
@@ -2764,6 +3166,8 @@ function createTileMap(container, spec, options) {
         }
       };
       const handleMouseLeave = () => {
+        if (activeLeave !== handleMouseLeave) return;
+        activeLeave = null;
         tilesGroup?.classList.remove("oc-hover-active");
         el.classList.remove("oc-tilemap-tile--hover");
         tooltipManager?.hide();
@@ -2779,6 +3183,13 @@ function createTileMap(container, spec, options) {
           });
         }
       };
+      navigation.push({
+        element: el,
+        key: stateCode,
+        enter: handleMouseEnter,
+        leave: handleMouseLeave,
+        activate: handleClick
+      });
       el.addEventListener("mouseenter", handleMouseEnter);
       el.addEventListener("mousemove", handleMouseMove);
       el.addEventListener("mouseleave", handleMouseLeave);
@@ -2790,13 +3201,17 @@ function createTileMap(container, spec, options) {
         el.removeEventListener("click", handleClick);
       });
     }
+    cleanups.push(wireMarkNavigation(svg, navigation));
     return () => {
+      activeLeave?.();
       for (const cleanup of cleanups) {
         cleanup();
       }
     };
   }
   function render(animate = false) {
+    const focusedMark = captureMarkFocus(svgElement);
+    tooltipManager?.hide();
     if (animationCleanup) {
       animationCleanup();
       animationCleanup = null;
@@ -2819,6 +3234,7 @@ function createTileMap(container, spec, options) {
     }
     if (animate && currentLayout.animation?.enter) {
       animationCleanup = setupAnimationCleanup(newSvg, () => {
+        animationCleanup = null;
         if (pendingResize && !destroyed) {
           pendingResize = false;
           resize();
@@ -2831,15 +3247,17 @@ function createTileMap(container, spec, options) {
       fontsReloadPending = false;
       container.dataset.ocFontsState = "ready";
     }
+    if (svgElement) restoreMarkFocus(svgElement, focusedMark);
   }
   function update(newSpec) {
+    if (destroyed) return;
+    const nextFont = resolveEffectiveFont(newSpec);
+    const nextMeasure = nextFont === fontFamily ? measureText : createMeasureText(nextFont);
+    const nextLayout = compile(newSpec, nextMeasure);
     currentSpec = newSpec;
-    const nextFont = resolveEffectiveFont();
-    if (nextFont !== fontFamily) {
-      fontFamily = nextFont;
-      measureText = createMeasureText(fontFamily);
-    }
-    currentLayout = compile();
+    fontFamily = nextFont;
+    measureText = nextMeasure;
+    currentLayout = nextLayout;
     render();
   }
   function resize() {
@@ -2853,15 +3271,17 @@ function createTileMap(container, spec, options) {
   }
   function exportChart(format, options_) {
     if (!svgElement) return "";
+    const terminalSvg = renderTileMapSVG(currentLayout, { animate: false });
+    const resolvedOptions = { theme: currentLayout.theme, ...options_ };
     switch (format) {
       case "svg":
-        return exportSVG(svgElement);
+        return exportSVG(terminalSvg);
       case "svg-with-fonts":
-        return exportSVGWithFonts(svgElement);
+        return exportSVGWithFonts(terminalSvg, resolvedOptions);
       case "png":
-        return exportPNG(svgElement, options_);
+        return exportPNG(terminalSvg, resolvedOptions);
       case "jpg":
-        return exportJPG(svgElement, options_);
+        return exportJPG(terminalSvg, resolvedOptions);
       default:
         return "";
     }
@@ -2931,6 +3351,7 @@ export {
   createChart,
   createGeoMap,
   createGraph,
+  createReader,
   createSankey,
   createSimulationWorker,
   createTable,