@bicharts/chart-host 0.6.113 → 0.6.116

package/README.md

@@ -113,6 +113,68 @@ of the affordance, they are re-applied on every render (so a manual `classList`
 the next data change), and getting row indices right across a filtered payload is the hazard
 above.
 
+### A panel whose query takes the page filter
+
+A chart whose DAX query is filtered by a page filter (`filterQuery(dax, treatAs(filter, "Table[Column]"))` from
+`@bicharts/chart-host/dax`) gets rows that are already narrowed, so it can't see the filter. `scopedBy` tells it,
+and its titles say so ("North America · United States only"):
+
+```tsx
+<BicChart id="kpis" code={kpiCode} d3={d3} data={kpiRows} scopedBy={country} />
+```
+
+`treatAs` maps the key columns it's given, in the filter's order, so a query can take only part of a compound key.
+`treatAs(cell, "Accounts[Region]")` on a Region × Stage pick filters by the region alone, and a stage-label pick
+(any region) doesn't filter that query at all. Name the key columns the query takes, so the scope line names only
+those:
+
+```tsx
+<BicChart id="cases" code={casesCode} d3={d3} data={caseRows} scopedBy={{ filter: cell, takes: ["Region"] }} />
+```
+
+A cell pick then reads "Europe", not "Europe → 3-Propose", and a pick whose taken parts are all "any" adds
+nothing to the line, since that query keeps every row. A bare filter, `{ filter }` or a `takes` that names every
+key column says the whole key. `label` sets what the line calls the filter. Outside React, `filterScopeOf` from
+`@bicharts/chart-host/page` takes the same list and returns `options.filterScope`.
+
+### A query that feeds no chart
+
+A form's choice list, a lookup or a count beside a chart reads its query's rows by column name. A DAX result names
+its columns `Table[Column]` and its measures `[Measure]`; `queryRows` from `@bicharts/chart-host/dax` returns each row
+keyed by the bare name. Never parse the headers by hand: a pattern written through a shell and a script can lose its
+backslashes on the way to disk and leave every value blank while the app's tests pass.
+
+```tsx
+const owners = queryRows(useSemanticModelQuery({ connection, query: OWNERS_DAX }).data);
+owners.map(r => r["Sales owner"]);   // Owners[Sales owner]
+```
+
+Two columns with one bare name (`Accounts[Name]` and `Owners[Name]`) keep their whole headers. `columnName(header)`
+gives one header's bare name.
+
+### Several panels that pick the same key
+
+A map, a table and a scatter that each pick a country are ONE pick. Give their filters one `group`, and keep each
+panel's query taking every member but its own:
+
+```tsx
+const fromMap   = useBicFilter("Country", { label: "Country (map)",   group: "country" });
+const fromTable = useBicFilter("Country", { label: "Country (table)", group: "country" });
+const mapQuery   = filterQuery(MAP_DAX,   treatAs(fromTable, "Geo[Country]"));
+const tableQuery = filterQuery(TABLE_DAX, treatAs(fromMap,   "Geo[Country]"));
+// <MapChart selects={fromMap} scopedBy={[fromTable]} />  <TableChart selects={fromTable} scopedBy={[fromMap]} />
+```
+
+A pick in one member clears the others, so the most recent pick is the page's one pick, and only the member holding
+it is active: one chip, one scope line. Every member's chart shows the pick, so clicking the picked mark again in
+whichever panel shows it clears it, and the panel the reader picked in keeps all its marks. A list beside them (the
+open items for the picked countries) reads the members' keys, which are that one pick. Without `group` the filters
+are separate picks, ANDed: a country picked on the map and then in the table is held twice, and clicking it again on
+the map leaves the page filtered by the table's. Outside React, `scope.filter(column, { group })` does the same.
+A saved view or a link (`useBicUrlState`) names each member on its own (`Country`, `Country-2`, `Country-3`, in the
+order the page makes them), so a lasso saved on the scatter comes back on the scatter; give a member `key` for a name
+that doesn't depend on that order.
+
 ## Vanilla
 
 ```js
@@ -287,8 +349,34 @@ the host's own write cannot be told apart from it.
 createChartHost(el, { code, data, options: { dimOpacity: 0.15 } });
 ```
 
-**A glyph on each selected mark.** `options.selectionGlyph` (`"dot"` or `"check"`; absent or
-`"none"` draws nothing, the default) puts a small glyph on every selected mark, in a layer the host
+**The selection marker: an outline or a glyph on each selected mark.** The dim alone fails where a
+selected mark's colour sits close to the canvas: a diverging ramp's centre is a neutral just off the
+canvas, and the dim pulls every other mark toward it too, so a selected region near the centre reads
+the same as the dimmed ones. Two options choose what marks the selection beyond the dim:
+
+- `options.selectionGlyph`, the *selection marker* on every chart that isn't a region map (the key
+  keeps its first name): `"auto"` (the default), `"none"`, `"dot"`, `"check"` or `"outline"`.
+  `"auto"` is an outline on a chart that declares a neutral-centre ramp (the shared value ramp's
+  diverging legend, `.llm-value-ramp[data-kind="diverging"]`) and nothing on any other chart, which
+  draws exactly as it did before.
+- `options.mapSelectionGlyph`, the marker on a *region map* (a chart whose rows carry the host's
+  `__geoIso__` join column: a choropleth, a cartogram, a province map): `"outline"` (the default),
+  `"none"`, `"dot"` or `"check"`. A point map places its rows by coordinates and has no join column,
+  so it takes `selectionGlyph`.
+
+An outline (`.lch-sel-outline`, in the same host layer as the glyphs) is each selected AREA mark's own
+shape (a filled path, rect or polygon) stroked 2px in the chart's text colour (`themeFg`, else the
+colour the container's text inherits) over a halo of its canvas (`themeBg`). It's drawn over the chart,
+so a border shared with a neighbour isn't painted over, and the marks themselves are neither restyled
+nor moved: the keyboard's order, a chart's transitions and what a click hits are unchanged. The chart's own
+controls (every element it declares `lch-control`, such as a map's zoom pad) are holes in the outline (`controlBoxesIn`, a mask): a
+region that runs under the pad is outlined up to it, never across the buttons. A line or a
+point keeps its geometry and gets no outline. `resolveOptions` gives the whole choice as
+`selectionMarker` and `mapSelectionMarker`; `selectionMarkerFor` and the traits behind it
+(`isRegionMapData`, `hasNeutralCentreRamp`) and the painter (`collectOutlineMarks`,
+`paintSelectionOutlines`) are exported for a host that draws its own layer.
+
+A glyph (`"dot"` or `"check"`) is a small mark on every selected mark, in a layer the host
 owns inside the container (`.bic-selection-glyphs`, each glyph `.lch-sel-glyph`, never hit-tested).
 It is painted after every selection change and, on a redraw, after the layout pass and the fit, so
 nothing measures it as part of the chart. Only a mark the reader can see gets one: a mark hidden by
@@ -311,13 +399,14 @@ every point. The generate answer says so (`suppressSelectionGlyph`, read by shap
 `parseGenerateResponse`); pass it as `options.suppressSelectionGlyph`, or leave it in the payload's
 `meta` (`data.meta.suppressSelectionGlyph`) and the host promotes it, the way it promotes
 `geoPoint`. Keep it with the chart's code, so a redraw from a cache honors it too.
-`onSelectionGlyphs` reports what each paint did (`{ mode, drawn, total, suppressed }`), and is
-called only when a glyph mode is set:
+The same fact keeps an outline off such a chart. `onSelectionGlyphs` reports what each paint did
+(`{ mode, drawn, total, suppressed }`, `mode` one of `"dot"`, `"check"` or `"outline"`), and is called
+only when the chart's marker is one of those:
 
 ```js
 createChartHost(el, {
   code, data,
-  options: { selectionGlyph: "dot", suppressSelectionGlyph: answer.suppressSelectionGlyph },
+  options: { selectionGlyph: "dot", mapSelectionGlyph: "outline", suppressSelectionGlyph: answer.suppressSelectionGlyph },
   onSelectionGlyphs: r => console.debug("glyphs", r),
 });
 ```

package/dist/adapters.mjs

@@ -3,7 +3,7 @@ import {
   censusHitBands,
   ensureCrossfilterHitTargets,
   hitBandFlag
-} from "./chunk-AEO5SFEQ.mjs";
+} from "./chunk-EFKGSDFF.mjs";
 import {
   clickWasDrag,
   collectD3GlyphCenters,
@@ -12,13 +12,13 @@ import {
   markKeyOf,
   rowIdxsFromMark,
   selectionRuleOf
-} from "./chunk-KGVNZR23.mjs";
+} from "./chunk-RLOIA7QK.mjs";
 import {
   AXIS_FILTER_CLASS,
   LEGEND_MARK_CLASS,
   MARK_CLASS,
   ROW_IDX_ATTR
-} from "./chunk-KY4FI2HA.mjs";
+} from "./chunk-QG5TENI3.mjs";
 import "./chunk-GHODWOAL.mjs";
 
 // src/adapters/types.ts

package/dist/card.mjs

@@ -1,8 +1,8 @@
 /*! @bicharts/chart-host — Apache-2.0. Bundled reference data: GeoNames (https://www.geonames.org/) CC BY 4.0; Natural Earth and US Census/TIGER (public domain). Full text: NOTICE in this package. */
 import {
   computeSelectionCard
-} from "./chunk-OLCUKXKL.mjs";
-import "./chunk-FIG5DIW7.mjs";
+} from "./chunk-JMLSNV5Q.mjs";
+import "./chunk-K2TH7D5V.mjs";
 import "./chunk-GHODWOAL.mjs";
 
 // src/selectionCardChrome.ts

package/dist/category-colours.mjs

@@ -0,0 +1,275 @@
+/*! @bicharts/chart-host — Apache-2.0. Bundled reference data: GeoNames (https://www.geonames.org/) CC BY 4.0; Natural Earth and US Census/TIGER (public domain). Full text: NOTICE in this package. */
+import {
+  MIN_RAMP_FILLS,
+  RAMP_SLACK_MAX,
+  deltaE2000,
+  hexToLab,
+  rgbToLab
+} from "./chunk-JTZTTJJK.mjs";
+import {
+  CATEGORY_DELTA_E_FLOOR,
+  DIM_OPACITY_DEFAULT,
+  LEGEND_MARK_CLASS,
+  MARK_CLASS,
+  ROW_IDX_ATTR
+} from "./chunk-QG5TENI3.mjs";
+import "./chunk-GHODWOAL.mjs";
+
+// src/categoryColours.ts
+var MAX_CATEGORY_SLOTS = 24;
+var RAMP_DECLINE_MIN_SLOTS = 6;
+var ELEMENT_CAP = 5e3;
+var MAX_LISTED_PAIRS = 10;
+function emptyCensus(declined, dimOpacity, slots = 0, source = "") {
+  return {
+    source,
+    declined,
+    slots,
+    closestPair: [],
+    closestDeltaE: null,
+    closestDeltaEPainted: null,
+    closestDeltaEDimmed: null,
+    dimOpacity,
+    rampLike: false,
+    legendMatchesMarks: null,
+    floor: CATEGORY_DELTA_E_FLOOR,
+    belowFloor: null,
+    pairsBelowFloorCount: 0,
+    pairsBelowFloor: [],
+    closestPairPainted: [],
+    closestDeltaEDeutan: null,
+    closestDeltaEProtan: null
+  };
+}
+function styleOf(el, doc) {
+  try {
+    const view = doc?.defaultView;
+    return view?.getComputedStyle ? view.getComputedStyle(el) : null;
+  } catch {
+    return null;
+  }
+}
+function parsePaint(raw) {
+  if (raw === null || raw === void 0) return null;
+  const s = String(raw).trim().toLowerCase();
+  if (!s || s === "none" || s === "transparent" || s.startsWith("url(")) return null;
+  const hex = /^#([0-9a-f]{3}|[0-9a-f]{6})$/.exec(s);
+  if (hex) {
+    const h = hex[1].length === 3 ? hex[1].replace(/./g, (c) => c + c) : hex[1];
+    return { rgb: [parseInt(h.slice(0, 2), 16), parseInt(h.slice(2, 4), 16), parseInt(h.slice(4, 6), 16)], alpha: 1 };
+  }
+  const m = /^rgba?\(\s*([\d.]+)[\s,]+([\d.]+)[\s,]+([\d.]+)\s*(?:[,/]\s*([\d.]+%?)\s*)?\)$/.exec(s);
+  if (!m) return null;
+  let alpha = 1;
+  if (m[4] !== void 0) alpha = m[4].endsWith("%") ? parseFloat(m[4]) / 100 : parseFloat(m[4]);
+  if (!(alpha > 0)) return null;
+  return { rgb: [Math.round(+m[1]), Math.round(+m[2]), Math.round(+m[3])], alpha: Math.min(1, alpha) };
+}
+function numberOr1(v) {
+  if (v === null || v === void 0 || String(v).trim() === "") return 1;
+  const n = parseFloat(String(v));
+  return Number.isFinite(n) ? Math.max(0, Math.min(1, n)) : 1;
+}
+function ownOpacity(el, container) {
+  let a = 1;
+  for (let n = el; n && n !== container; n = n.parentNode) {
+    if (typeof n.getAttribute !== "function") break;
+    a *= numberOr1(n.getAttribute("opacity"));
+    a *= numberOr1(n.style?.opacity);
+  }
+  return a;
+}
+function paintOf(el, doc) {
+  const cs = styleOf(el, doc);
+  const fill = parsePaint(firstSet(el.getAttribute?.("fill"), el.style?.fill, cs?.fill));
+  if (fill) return { rgb: fill.rgb, alpha: fill.alpha * numberOr1(firstSet(el.getAttribute?.("fill-opacity"), el.style?.fillOpacity)) };
+  const stroke = parsePaint(firstSet(el.getAttribute?.("stroke"), el.style?.stroke, cs?.stroke));
+  if (stroke) return { rgb: stroke.rgb, alpha: stroke.alpha * numberOr1(firstSet(el.getAttribute?.("stroke-opacity"), el.style?.strokeOpacity)) };
+  return null;
+}
+function firstSet(...vals) {
+  for (const v of vals) if (v !== null && v !== void 0 && String(v).trim() !== "") return String(v);
+  return null;
+}
+function paintWithin(el, doc, container) {
+  let p = paintOf(el, doc);
+  let at = el;
+  if (!p && typeof el.querySelectorAll === "function") {
+    for (const child of Array.from(el.querySelectorAll("*"))) {
+      p = paintOf(child, doc);
+      if (p) {
+        at = child;
+        break;
+      }
+    }
+  }
+  return p ? { rgb: p.rgb, alpha: p.alpha * ownOpacity(at, container) } : null;
+}
+var hexOf = (rgb) => "#" + rgb.map((v) => Math.max(0, Math.min(255, v)).toString(16).padStart(2, "0")).join("");
+function blend(rgb, alpha, bg) {
+  const a = Math.max(0, Math.min(1, alpha));
+  return [rgb[0] * a + bg[0] * (1 - a), rgb[1] * a + bg[1] * (1 - a), rgb[2] * a + bg[2] * (1 - a)].map(Math.round);
+}
+function slotsOf(paints) {
+  const byColour = /* @__PURE__ */ new Map();
+  for (const p of paints) {
+    const k = p.rgb.join(",");
+    const slot = byColour.get(k) ?? { rgb: p.rgb, alphas: /* @__PURE__ */ new Map() };
+    const a = Math.round(p.alpha * 100) / 100;
+    slot.alphas.set(a, (slot.alphas.get(a) ?? 0) + 1);
+    byColour.set(k, slot);
+  }
+  return [...byColour.values()].map((s) => ({
+    rgb: s.rgb,
+    alpha: [...s.alphas].sort((x, y) => y[1] - x[1] || y[0] - x[0])[0][0]
+  }));
+}
+var MACHADO_DEUTAN = [[0.367322, 0.860646, -0.227968], [0.280085, 0.672501, 0.047413], [-0.01182, 0.04294, 0.968881]];
+var MACHADO_PROTAN = [[0.152286, 1.052583, -0.204868], [0.114503, 0.786281, 0.099216], [-3882e-6, -0.048116, 1.051998]];
+var toLinear = (c) => {
+  const v = c / 255;
+  return v <= 0.04045 ? v / 12.92 : Math.pow((v + 0.055) / 1.055, 2.4);
+};
+var toSrgb = (v) => {
+  const x = Math.max(0, Math.min(1, v));
+  return 255 * (x <= 31308e-7 ? 12.92 * x : 1.055 * Math.pow(x, 1 / 2.4) - 0.055);
+};
+function simulatedLab(rgb, m) {
+  const lin = rgb.map(toLinear);
+  const out = m.map((row) => toSrgb(row[0] * lin[0] + row[1] * lin[1] + row[2] * lin[2]));
+  return rgbToLab(out[0], out[1], out[2]);
+}
+function pairsUnder(labs, floor) {
+  const out = [];
+  for (let i = 0; i < labs.length; i++) {
+    for (let j = i + 1; j < labs.length; j++) {
+      const d = deltaE2000(labs[i], labs[j]);
+      if (d < floor) out.push({ i, j, d });
+    }
+  }
+  return out.sort((x, y) => x.d - y.d);
+}
+function closest(labs) {
+  let best = { i: 0, j: 1, d: Infinity };
+  for (let i = 0; i < labs.length; i++) {
+    for (let j = i + 1; j < labs.length; j++) {
+      const d = deltaE2000(labs[i], labs[j]);
+      if (d < best.d) best = { i, j, d };
+    }
+  }
+  return best;
+}
+function isRampShaped(labs) {
+  if (labs.length < MIN_RAMP_FILLS) return false;
+  let span = 0, lo = 0, hi = 1;
+  for (let i = 0; i < labs.length; i++) {
+    for (let j = i + 1; j < labs.length; j++) {
+      const v = deltaE2000(labs[i], labs[j]);
+      if (v > span) {
+        span = v;
+        lo = i;
+        hi = j;
+      }
+    }
+  }
+  if (span <= 0) return false;
+  let slack = 0, interior = 0;
+  for (let i = 0; i < labs.length; i++) {
+    if (i === lo || i === hi) continue;
+    slack += (deltaE2000(labs[lo], labs[i]) + deltaE2000(labs[i], labs[hi])) / span - 1;
+    interior++;
+  }
+  return interior >= 2 && slack / interior <= RAMP_SLACK_MAX;
+}
+var LIGHTNESS_STEP_MIN = 1.5;
+function lightnessFollowsPath(labs) {
+  let span = -1, lo = 0;
+  for (let i = 0; i < labs.length; i++) {
+    for (let j = i + 1; j < labs.length; j++) {
+      const v = deltaE2000(labs[i], labs[j]);
+      if (v > span) {
+        span = v;
+        lo = i;
+      }
+    }
+  }
+  const order = labs.map((l) => ({ L: l.L, d: deltaE2000(labs[lo], l) })).sort((a, b) => a.d - b.d);
+  let turns = 0, dir = 0;
+  for (let k = 1; k < order.length; k++) {
+    const step = order[k].L - order[k - 1].L;
+    if (Math.abs(step) < LIGHTNESS_STEP_MIN) continue;
+    const sign = Math.sign(step);
+    if (dir !== 0 && sign !== dir) turns++;
+    dir = sign;
+  }
+  return turns <= 1;
+}
+var round1 = (n) => Math.round(n * 10) / 10;
+function censusCategoryColours(container, doc, options = {}) {
+  const dimOpacity = typeof options.dimOpacity === "number" && options.dimOpacity >= 0 && options.dimOpacity <= 1 ? options.dimOpacity : DIM_OPACITY_DEFAULT;
+  if (!container || typeof container.querySelectorAll !== "function") return emptyCensus("none", dimOpacity);
+  try {
+    const ownerDoc = doc ?? container.ownerDocument;
+    const legendEls = Array.from(container.querySelectorAll(`.${LEGEND_MARK_CLASS}`));
+    const markEls = Array.from(container.querySelectorAll(`.${MARK_CLASS}, [${ROW_IDX_ATTR}]`)).filter((el) => !el.classList?.contains(LEGEND_MARK_CLASS));
+    if (legendEls.length + markEls.length > ELEMENT_CAP) return emptyCensus("too-many", dimOpacity);
+    const paintsOf = (els) => els.map((el) => paintWithin(el, ownerDoc, container)).filter((p) => p !== null);
+    const legendSlots = slotsOf(paintsOf(legendEls));
+    const markSlots = slotsOf(paintsOf(markEls));
+    const useLegend = legendSlots.length >= 2;
+    const slots = useLegend ? legendSlots : markSlots;
+    const source = useLegend ? "legend" : markSlots.length ? "marks" : "";
+    if (slots.length < 2) return emptyCensus("none", dimOpacity, slots.length, source);
+    if (slots.length > MAX_CATEGORY_SLOTS) return emptyCensus("too-many", dimOpacity, slots.length, source);
+    const labs = slots.map((s) => hexToLab(hexOf(s.rgb))).filter((l) => l !== null);
+    if (labs.length !== slots.length) return emptyCensus("none", dimOpacity, slots.length, source);
+    const rampLike = isRampShaped(labs);
+    if (rampLike && slots.length >= RAMP_DECLINE_MIN_SLOTS && lightnessFollowsPath(labs)) return { ...emptyCensus("ramp", dimOpacity, slots.length, source), rampLike };
+    const bgPaint = parsePaint(options.pageBg);
+    const bg = bgPaint ? blend(bgPaint.rgb, bgPaint.alpha, [255, 255, 255]) : [255, 255, 255];
+    const labsAt = (alphaOf) => slots.map((s) => hexToLab(hexOf(blend(s.rgb, alphaOf(s), bg))));
+    const full = closest(labs);
+    const paintedLabs = labsAt((s) => s.alpha);
+    const painted = closest(paintedLabs);
+    const dimmed = closest(labsAt((s) => s.alpha * dimOpacity));
+    const under = pairsUnder(paintedLabs, CATEGORY_DELTA_E_FLOOR);
+    const paintedRgb = slots.map((s) => blend(s.rgb, s.alpha, bg));
+    const deutan = closest(paintedRgb.map((c) => simulatedLab(c, MACHADO_DEUTAN)));
+    const protan = closest(paintedRgb.map((c) => simulatedLab(c, MACHADO_PROTAN)));
+    let legendMatchesMarks = null;
+    if (useLegend && markSlots.length > 0) {
+      const markColours = new Set(markSlots.map((s) => s.rgb.join(",")));
+      legendMatchesMarks = legendSlots.every((s) => markColours.has(s.rgb.join(",")));
+    }
+    return {
+      source,
+      declined: "",
+      slots: slots.length,
+      closestPair: [hexOf(slots[full.i].rgb), hexOf(slots[full.j].rgb)],
+      closestDeltaE: round1(full.d),
+      closestDeltaEPainted: round1(painted.d),
+      closestDeltaEDimmed: round1(dimmed.d),
+      dimOpacity,
+      rampLike,
+      legendMatchesMarks,
+      floor: CATEGORY_DELTA_E_FLOOR,
+      belowFloor: painted.d < CATEGORY_DELTA_E_FLOOR,
+      pairsBelowFloorCount: under.length,
+      pairsBelowFloor: under.slice(0, MAX_LISTED_PAIRS).map((p) => ({
+        colours: [hexOf(slots[p.i].rgb), hexOf(slots[p.j].rgb)],
+        deltaE: round1(p.d)
+      })),
+      closestPairPainted: [hexOf(slots[painted.i].rgb), hexOf(slots[painted.j].rgb)],
+      closestDeltaEDeutan: round1(deutan.d),
+      closestDeltaEProtan: round1(protan.d)
+    };
+  } catch {
+    return emptyCensus("none", dimOpacity);
+  }
+}
+export {
+  MAX_CATEGORY_SLOTS,
+  MAX_LISTED_PAIRS,
+  RAMP_DECLINE_MIN_SLOTS,
+  censusCategoryColours
+};

package/dist/{chunk-7XT5OJ6M.mjs → chunk-63IUMWY2.mjs}

@@ -1,8 +1,9 @@
 /*! @bicharts/chart-host — Apache-2.0. Bundled reference data: GeoNames (https://www.geonames.org/) CC BY 4.0; Natural Earth and US Census/TIGER (public domain). Full text: NOTICE in this package. */
 import {
   CONTAINER_SLOT_SCROLL,
-  SNAPSHOT_SVG_ATTR
-} from "./chunk-KY4FI2HA.mjs";
+  SNAPSHOT_SVG_ATTR,
+  TABLE_SCROLLER_CLASS
+} from "./chunk-QG5TENI3.mjs";
 
 // src/fit.ts
 var SCROLL_SLACK_PX = 8;
@@ -273,10 +274,45 @@ function rememberScroll(container, key) {
     if (slot[CONTAINER_SLOT_SCROLL]) return;
     if (container.querySelector(".llm-mm-scroll")) return;
     const x = container.scrollLeft, y = container.scrollTop;
-    if (x > 0 || y > 0) slot[CONTAINER_SLOT_SCROLL] = { key, x, y };
+    const inner = innerScrollsOf(container);
+    if (x > 0 || y > 0 || inner) slot[CONTAINER_SLOT_SCROLL] = inner ? { key, x, y, inner } : { key, x, y };
   } catch {
   }
 }
+var INNER_SCROLLER_CAP = 16;
+var offset = (n) => typeof n === "number" && isFinite(n) && n > 0 ? n : 0;
+function innerScrollsOf(container) {
+  const els = container.querySelectorAll("." + TABLE_SCROLLER_CLASS);
+  if (!els.length) return null;
+  const out = [];
+  let any = false;
+  for (let i = 0; i < els.length && i < INNER_SCROLLER_CAP; i++) {
+    const el = els[i];
+    const x = offset(el.scrollLeft), y = offset(el.scrollTop);
+    if (x > 0 || y > 0) any = true;
+    out.push({ x, y });
+  }
+  return any ? out : null;
+}
+function restoreInnerScroll(container, memory, key) {
+  if (!container || !memory || !memory.inner || !memory.inner.length) return null;
+  if (key === void 0 || key === null || memory.key !== key) return null;
+  try {
+    const els = container.querySelectorAll("." + TABLE_SCROLLER_CLASS);
+    if (!els.length) return null;
+    const out = [];
+    for (let i = 0; i < els.length && i < memory.inner.length; i++) {
+      const el = els[i], want = memory.inner[i];
+      const x = offset(want && want.x), y = offset(want && want.y);
+      if (x > 0 && el.scrollLeft !== x) el.scrollLeft = x;
+      if (y > 0 && el.scrollTop !== y) el.scrollTop = y;
+      out.push({ x: offset(el.scrollLeft), y: offset(el.scrollTop) });
+    }
+    return out;
+  } catch {
+    return null;
+  }
+}
 function takeScroll(container) {
   if (!container) return null;
   try {
@@ -625,6 +661,7 @@ export {
   fitReadingFor,
   unpinScrolledAxis,
   rememberScroll,
+  restoreInnerScroll,
   takeScroll,
   pinScrolledAxis,
   fitRenderedChart

package/dist/{chunk-AEO5SFEQ.mjs → chunk-EFKGSDFF.mjs}

@@ -4,7 +4,7 @@ import {
   LEGEND_MARK_CLASS,
   MARK_CLASS,
   ROW_IDX_ATTR
-} from "./chunk-KY4FI2HA.mjs";
+} from "./chunk-QG5TENI3.mjs";
 
 // src/hitTargets.ts
 var SVG_NS = "http://www.w3.org/2000/svg";