@freegridjs/core 1.9.5 → 1.10.0

package/dist/index.js

@@ -432,9 +432,10 @@ var ColumnModel = class {
   setContainerWidth(width) {
     if (width === this.containerWidth) return false;
     this.containerWidth = width;
-    const before = this.displayed().map((c) => c.width).join();
+    const sig = () => this.displayed().map((c) => `${c.width}${c.region}`).join();
+    const before = sig();
     this.relayout();
-    return before !== this.displayed().map((c) => c.width).join();
+    return before !== sig();
   }
   roots() {
     return this.roots_;
@@ -608,7 +609,19 @@ var ColumnModel = class {
         return excess > 0 ? d > 0 : excess < 0 ? d < 0 : false;
       });
       if (!clamped.length) {
-        for (const n of pending) flexWidth.set(n, clampWidth(n.def, share(n)));
+        let rest = free;
+        for (const n of pending) {
+          const w = clampWidth(n.def, share(n));
+          flexWidth.set(n, w);
+          rest -= w;
+        }
+        for (const n of pending) {
+          if (rest < 1) break;
+          const w = flexWidth.get(n);
+          if (clampWidth(n.def, w + 1) !== w + 1) continue;
+          flexWidth.set(n, w + 1);
+          rest--;
+        }
         break;
       }
       let used = 0;
@@ -624,13 +637,16 @@ var ColumnModel = class {
     const next = { left: [], center: [], right: [] };
     this.leafById = /* @__PURE__ */ new Map();
     let index = 0;
+    const pinnedWidth = visible.reduce((s, n) => s + (n.pinned ? widthOf(n) : 0), 0);
+    const unpin = this.containerWidth > 0 && pinnedWidth > this.containerWidth * 0.75;
+    const x = { left: 0, center: 0, right: 0 };
     for (const r of REGIONS) {
-      let x = 0;
+      const to = unpin ? "center" : r;
       for (const n of visible) {
         if ((n.pinned ?? "center") !== r) continue;
-        const col = { id: n.id, def: n.def, node: n, width: widthOf(n), region: r, left: x, index: index++ };
-        x += col.width;
-        next[r].push(col);
+        const col = { id: n.id, def: n.def, node: n, width: widthOf(n), region: to, left: x[to], index: index++ };
+        x[to] += col.width;
+        next[to].push(col);
         this.leafById.set(n.id, col);
       }
     }
@@ -1361,6 +1377,7 @@ var REGIONS2 = ["left", "center", "right"];
 var NUM_OPS = [[">=", "gte"], ["<=", "lte"], ["<>", "ne"], ["!=", "ne"], [">", "gt"], ["<", "lt"], ["=", "eq"]];
 var DATE_OPS = [[">", "after"], ["<", "before"], ["=", "equals"]];
 var RANGE = /^(.+?)\s*(?:~|\.\.)\s*(.+)$/;
+var MULTI = "~many";
 var toNumber = (s) => {
   const n = Number(s.replace(/[,\s₩$€¥]/g, ""));
   return s.trim() !== "" && Number.isFinite(n) ? n : null;
@@ -1460,8 +1477,21 @@ var FilterRow = class {
         box.closest(".fg-filter-cell").classList.toggle("fg-filter-active", !!model);
         if (box === box.ownerDocument.activeElement || box.getRootNode().activeElement === box) continue;
         if (box instanceof HTMLSelectElement) {
-          const v = model?.type === "set" && model.values.length === 1 ? JSON.stringify(model.values[0]) : "";
-          if ([...box.options].some((o) => o.value === v)) box.value = v;
+          const many = model?.type === "set" && model.values.length > 1 ? model.values.length : 0;
+          let multi = box.querySelector(`option[value="${MULTI}"]`);
+          if (many) {
+            if (!multi) {
+              multi = el("option", "", { value: MULTI });
+              multi.disabled = true;
+              box.options[0].after(multi);
+            }
+            multi.textContent = this.grid.store.state.locale.setSelected.replace("{n}", String(many));
+            box.value = MULTI;
+          } else {
+            multi?.remove();
+            const v = model?.type === "set" && model.values.length === 1 ? JSON.stringify(model.values[0]) : "";
+            if ([...box.options].some((o) => o.value === v)) box.value = v;
+          }
         } else box.value = filterText(model);
         box.classList.remove("fg-filter-bad");
       }
@@ -1475,6 +1505,10 @@ var FilterRow = class {
         if (!def) continue;
         const v = select.value;
         this.fillOptions(select, def);
+        if (v === MULTI) {
+          this.rebuilt = true;
+          continue;
+        }
         if (v && ![...select.options].some((o) => o.value === v)) {
           const o = el("option", "", { value: v });
           o.textContent = String(JSON.parse(v));
@@ -1495,7 +1529,7 @@ var FilterRow = class {
     select.replaceChildren(all2, ...opts);
   }
   cell(c, h) {
-    const cell = el("div", "fg-filter-cell");
+    const cell = el("div", "fg-filter-cell", { role: "gridcell" });
     cell.style.left = `${c.left}px`;
     cell.style.width = `${c.width}px`;
     cell.style.height = `${h}px`;
@@ -2055,6 +2089,7 @@ var Renderer = class {
     };
     this.overlayKey = "";
     this.heightFn = null;
+    this.freeBadge = null;
     this.onCardClick = (e) => {
       const target = e.target;
       const card = target.closest(".fg-card");
@@ -2262,6 +2297,7 @@ var Renderer = class {
       if (ref.nextElementSibling !== b) ref.after(b);
       ref = b;
     }
+    this.placeFreeBadge();
   }
   /** "No rows" / "Loading" over the body, or the noRowsOverlay / loadingOverlay given in the options. */
   paintOverlay(count) {
@@ -2352,7 +2388,7 @@ var Renderer = class {
     const { grid } = this;
     const state = grid.store.state;
     const total = grid.rowModel.server ? count : grid.viewRows().length;
-    const key = `${this.version}.${grid.valuesVersion}|${count}|${total}|${state.selected.size}|${JSON.stringify(state.range)}|${state.locale.code}`;
+    const key = `${this.version}.${grid.valuesVersion}|${count}|${total}|${state.selected.size}|${JSON.stringify(state.range)}|${JSON.stringify(state.extraRanges)}|${state.locale.code}`;
     if (this.statusEl && key === this.statusKey) return;
     this.statusKey = key;
     this.statusEl ?? (this.statusEl = el("div", "fg-statusbar", { role: "status", "aria-live": "polite" }));
@@ -3224,12 +3260,21 @@ var Renderer = class {
   /** Small "free version" mark in the bottom-right corner (unlicensed company domains flagged on freegrid.app). */
   showFreeBadge() {
     if (this.root.querySelector(".fg-free-badge")) return;
-    const a = el("a", "fg-free-badge", { href: "https://freegrid.app/pricing/", target: "_blank", rel: "noopener" });
+    const a = el("div", "fg-free-badge", { "aria-hidden": "true" });
     a.innerHTML = '<svg viewBox="0 0 32 32" width="14" height="14" aria-hidden="true"><rect width="32" height="32" rx="7" fill="#0E1726"/><path d="M7 11.5h18M7 16.5h18M7 21.5h18M13 7v18" stroke="#fff" stroke-width="2" stroke-linecap="round"/><rect x="14" y="12.5" width="11" height="3" rx="1" fill="#F2A900"/></svg>';
     const text2 = el("span");
     text2.textContent = `FreeGrid \xB7 ${this.grid.store.state.locale.freeBadge}`;
     a.append(text2);
     this.root.append(a);
+    this.freeBadge = a;
+    this.placeFreeBadge();
+  }
+  /** The free badge sits above the status bar and pager, not on them. */
+  placeFreeBadge() {
+    if (!this.freeBadge) return;
+    const below = (this.statusEl?.isConnected ? this.statusEl.offsetHeight : 0) + (this.pagerEl?.isConnected ? this.pagerEl.offsetHeight : 0);
+    const bottom = below ? `${below + 22}px` : "";
+    if (this.freeBadge.style.bottom !== bottom) this.freeBadge.style.bottom = bottom;
   }
   /** Card view applies when enabled and the grid is narrower than the breakpoint. */
   useCards() {
@@ -3549,6 +3594,8 @@ var en = {
   apply: "Apply",
   reset: "Reset",
   selectAll: "(Select all)",
+  setSelected: "({n} selected)",
+  noAggregate: "No aggregate",
   search: "Search\u2026",
   blanks: "(Blanks)",
   value: "Value",
@@ -3779,7 +3826,8 @@ var DEFAULT_KEYMAP = {
   "Ctrl+Z": "undo",
   "Ctrl+Y": "redo",
   "Ctrl+Shift+Z": "redo",
-  "Ctrl+F": "find"
+  "Ctrl+F": "find",
+  "Alt+ArrowDown": "columnMenu"
 };
 function comboOf(e) {
   const parts = [];
@@ -3928,6 +3976,8 @@ function attachBody(grid) {
       case "paste":
         navigator.clipboard?.readText?.().then((t) => grid.pasteText(t), () => void 0);
         return true;
+      case "columnMenu":
+        return grid.menu.openAtFocus();
     }
     if (!f) return false;
     if (!grid.editor.canEdit(f.rowIndex, f.colId)) return false;
@@ -4156,14 +4206,14 @@ function attachBody(grid) {
   const nested = (e) => e.target?.closest?.(".fg-root") !== root;
   const onCopy = (e) => {
     if (fromField(e) || nested(e)) return;
-    const text2 = grid.selectionTSV(false);
+    const text2 = grid.copyText(false);
     if (!text2 || !e.clipboardData) return;
     e.clipboardData.setData("text/plain", text2);
     e.preventDefault();
   };
   const onCut = (e) => {
     if (fromField(e) || nested(e)) return;
-    const text2 = grid.selectionTSV(false);
+    const text2 = grid.copyText(false);
     if (!text2 || !e.clipboardData) return;
     e.clipboardData.setData("text/plain", text2);
     e.preventDefault();
@@ -4530,7 +4580,9 @@ var ColumnChooserDialog = class {
       if (!eventInside(e, popup)) this.close();
     };
     const onKey = (e) => {
-      if (e.key === "Escape") this.close();
+      if (e.key !== "Escape") return;
+      this.close();
+      this.grid.renderer.gridEl.focus();
     };
     document.addEventListener("pointerdown", onDown, true);
     document.addEventListener("keydown", onKey, true);
@@ -4669,12 +4721,13 @@ var ContextMenu = class {
     const node = grid.columns.getNode(colId);
     const def = node?.def;
     const dataCol = !!def && !isSystemCol(colId);
+    const checked = grid.store.state.selected.size ? grid.shownSelectedRows() : [];
     const items = [
       { label: loc.copy, shortcut: shortcut("C"), action: () => grid.copyToClipboard(false) },
       { label: loc.copyWithHeaders, action: () => grid.copyToClipboard(true) },
       // after the copy items, so defaultItems indexes from earlier versions still point at the same entries
       { label: loc.cut, shortcut: shortcut("X"), action: () => grid.cutToClipboard() },
-      ...grid.store.state.selected.size ? [{ label: loc.copyRows, action: () => grid.copyToClipboard(false, true) }] : [],
+      ...checked.length ? [{ label: loc.copyRows, action: () => grid.copyToClipboard(false, true) }] : [],
       { label: loc.paste, shortcut: shortcut("V"), action: () => this.pasteFromClipboard() }
     ];
     if (grid.history.canUndo() || grid.history.canRedo()) {
@@ -4684,8 +4737,8 @@ var ContextMenu = class {
         { label: loc.redo, shortcut: shortcut("Y"), action: () => grid.redo(), disabled: !grid.history.canRedo() }
       );
     }
-    if (grid.options.rowSelection && grid.store.state.selected.size) {
-      items.push({ label: loc.deleteRows, action: () => grid.api.removeSelectedRows() });
+    if (grid.options.rowSelection && checked.length) {
+      items.push({ label: loc.deleteRows, action: () => grid.removeRows(checked) });
     }
     if (dataCol) {
       items.push("separator", { label: loc.autosizeThis, action: () => grid.autoSize([colId]) });
@@ -4780,7 +4833,9 @@ var ContextMenu = class {
     popupParent(this.grid.renderer.root).append(popup);
     const w = popup.offsetWidth || 220, h = popup.offsetHeight || 300;
     popup.style.left = `${Math.max(4, Math.min(x, window.innerWidth - w - 4))}px`;
-    popup.style.top = `${Math.max(4, Math.min(y, window.innerHeight - h - 4))}px`;
+    const top = Math.max(4, Math.min(y, window.innerHeight - h - 4));
+    popup.style.top = `${top}px`;
+    popup.style.maxHeight = `${Math.max(120, window.innerHeight - top - 8)}px`;
     this.popup = popup;
     const onDown = (e) => {
       if (!eventInside(e, popup)) this.close();
@@ -5070,10 +5125,28 @@ var Finder = class {
         else this.next();
       }
     });
-    this.grid.renderer.root.append(bar);
+    const { root, headerEl, main } = this.grid.renderer;
+    root.append(bar);
+    const box = root.getBoundingClientRect(), head = headerEl.getBoundingClientRect(), area = main.getBoundingClientRect();
+    if (head.height) bar.style.top = `${Math.round(head.bottom - box.top) + 6}px`;
+    if (area.width) bar.style.right = `${Math.max(0, Math.round(box.right - area.right)) + 18}px`;
     this.bar = bar;
     input.focus();
   }
+  /** setLocale: the open bar's placeholder, button labels and "no matches" in the new language. */
+  relabel() {
+    if (!this.bar) return;
+    const loc = this.grid.store.state.locale;
+    const input = this.bar.querySelector("input");
+    input.placeholder = loc.findPlaceholder;
+    input.setAttribute("aria-label", loc.findPlaceholder);
+    const labels = [loc.findPrevious, loc.findNext, loc.close];
+    this.bar.querySelectorAll(".fg-findbar-btn").forEach((b, i) => {
+      b.setAttribute("aria-label", labels[i]);
+      b.title = labels[i];
+    });
+    this.updateCount();
+  }
   closeBar() {
     this.bar?.remove();
     this.bar = null;
@@ -5326,7 +5399,7 @@ var CellEditor = class {
     const col = this.grid.columns.getColumn(colId);
     if (!col?.def.field || rowIndex < 0 || rowIndex >= this.grid.rowModel.getRowCount()) return false;
     const node = this.grid.rowModel.getRow(rowIndex);
-    return !node.kind && cellEditable(col.def, node.data, rowIndex);
+    return !node.kind && this.grid.cellEditable(col.def, node.data, rowIndex);
   }
   start(rowIndex, colId, initialText) {
     if (this.cur && !this.commit(null)) return false;
@@ -5552,6 +5625,7 @@ var CellEditor = class {
       i = cols.length - 1;
       if (!this.session) r--;
     }
+    while (r !== rowIndex && r >= 0 && r < count && grid.rowModel.getRow(r)?.kind) r += step;
     if (r < 0 || r >= count) return;
     this.start(r, cols[i].id);
   }
@@ -6661,9 +6735,9 @@ function exportColumns(grid, ids) {
   return grid.columns.displayed().filter((c) => !isSystemCol(c.id)).map((c) => ({ id: c.id, def: c.def, node: c.node, width: c.width }));
 }
 function exportRows(grid, mode) {
-  if (mode === "selected") return grid.selectedRows();
+  if (mode === "selected") return grid.shownSelectedRows();
   if (mode === "all") return grid.rowModel.server ? grid.rowModel.dataRows().map((n) => n.data) : grid.viewRows();
-  return grid.rowModel.dataRows().map((n) => n.data);
+  return grid.orderedDataRows().map((n) => n.data);
 }
 var header = (def, id) => def.header ?? def.field ?? id;
 var ALIGNS = ["left", "center", "right"];
@@ -7754,6 +7828,35 @@ function buildPivot(source, config, defOf, labels, locale) {
   });
   return { columns: [...rowColumns, ...valueColumns], rows, groupBy: cfg.rows.slice(0, -1) };
 }
+var ROLLUP = /* @__PURE__ */ new WeakMap();
+function rollupSource(row) {
+  return ROLLUP.get(row);
+}
+function buildRollup(source, defs) {
+  const keys = defs.filter((d) => !d.aggFunc);
+  const values = defs.filter((d) => d.aggFunc && d.field && !d.valueGetter);
+  const buckets = /* @__PURE__ */ new Map();
+  for (const r of source) {
+    const k = keys.map((d) => setKey(getCellValue(d, r))).join("
");
+    let list = buckets.get(k);
+    if (!list) buckets.set(k, list = []);
+    list.push(r);
+  }
+  const rows = [];
+  for (const src of buckets.values()) {
+    const row = { ...src[0] };
+    for (const d of values) {
+      try {
+        row[d.field] = aggregate(d.aggFunc, src.map((r) => getCellValue(d, r)), src);
+      } catch {
+        row[d.field] = null;
+      }
+    }
+    ROLLUP.set(row, src);
+    rows.push(row);
+  }
+  return rows;
+}
 
 // src/features.ts
 var PAID_FEATURES = {
@@ -7779,7 +7882,7 @@ var PAID_FEATURES = {
 };
 
 // src/version.ts
-var version = "1.9.5";
+var version = "1.10.0";
 
 // src/license.ts
 var PUBLIC_KEY = { kty: "EC", crv: "P-256", x: "sUTKkglZmk-HMKPNub8p7AeLBKesHCU8irIkw9rJlbE", y: "j0U_aKRDR7iApY9UpaD3hUemhBLZJwDv9-QiT_hUyw8" };
@@ -8078,6 +8181,12 @@ var ColumnMenu = class {
       if (grouped.length) g.push([loc.expandAll, () => this.grid.expandAll(true)], [loc.collapseAll, () => this.grid.expandAll(false)]);
       popup.append(this.section(g));
     }
+    if (this.grid.getRollup()) {
+      const cur = def.aggFunc ?? null;
+      const mark = (on, label) => `${on ? "\u2713 " : ""}${label}`;
+      const aggs = ["sum", "avg", "min", "max", "count"].map((a) => [mark(cur === a, loc[a]), () => this.grid.setColumnAggFunc(colId, a)]);
+      popup.append(this.section([[mark(!cur, loc.noAggregate), () => this.grid.setColumnAggFunc(colId, null)], ...aggs]));
+    }
     const items = [
       [loc.autosizeThis, () => this.grid.autoSize([colId])],
       [loc.autosizeAll, () => this.grid.autoSize()]
@@ -8105,14 +8214,30 @@ var ColumnMenu = class {
       this.close();
       this.grid.renderer.gridEl.focus();
     };
+    const onScroll = () => this.close();
+    const scroller = this.grid.renderer.scroller;
     document.addEventListener("pointerdown", onDown, true);
     document.addEventListener("keydown", onKey, true);
+    scroller.addEventListener("scroll", onScroll, { passive: true });
     this.off.push(
       () => document.removeEventListener("pointerdown", onDown, true),
-      () => document.removeEventListener("keydown", onKey, true)
+      () => document.removeEventListener("keydown", onKey, true),
+      () => scroller.removeEventListener("scroll", onScroll)
     );
     popup.querySelector(".fg-filter-value:not([hidden]), .fg-set-search, .fg-menu-item")?.focus();
   }
+  /** Keyboard (Alt+ArrowDown): the menu of the focused cell's column (else the first column), under its header. */
+  openAtFocus() {
+    const { grid } = this;
+    const f = grid.store.state.focus;
+    const colId = f && !isSystemCol(f.colId) ? f.colId : grid.columns.displayed().find((c) => !isSystemCol(c.id))?.id;
+    if (!colId) return false;
+    const root = grid.renderer.root;
+    const id = CSS.escape(colId);
+    const anchor = root.querySelector(`.fg-header-cell:not(.fg-header-group)[data-col="${id}"]`) ?? (f ? root.querySelector(`.fg-row[data-row="${f.rowIndex}"] .fg-cell[data-col="${id}"]`) : null) ?? grid.renderer.gridEl;
+    this.open(colId, anchor);
+    return true;
+  }
   /** The filter UI of a column (used by the menu and the filters panel); `done` runs after apply/reset. */
   filterSection(colId, done) {
     const node = this.grid.columns.getNode(colId);
@@ -8137,6 +8262,8 @@ var ColumnMenu = class {
       b.addEventListener("click", () => {
         run2();
         this.close();
+        const a = activeElement(this.grid.renderer.root);
+        if (!a || a === document.body || !a.isConnected) this.grid.renderer.gridEl.focus({ preventScroll: true });
       });
       s.append(b);
     }
@@ -8333,6 +8460,7 @@ var RowModel = class {
     this.sorted = [];
     this.display = [];
     this.indexById = null;
+    this.orderedCache = null;
     this.layoutCache = null;
     /** Searchable text of each row, kept between quick filter keystrokes. */
     this.quickCache = null;
@@ -8391,6 +8519,13 @@ var RowModel = class {
   fullCount() {
     return this.full.length;
   }
+  dataRowsBefore(index) {
+    const end = Math.min(index, this.full.length);
+    if (this.full === this.sorted) return end;
+    let n = 0;
+    for (let k = 0; k < end; k++) if (!this.full[k].kind) n++;
+    return n;
+  }
   dataCount() {
     return this.sorted.length;
   }
@@ -8411,6 +8546,19 @@ var RowModel = class {
   dataRows() {
     return this.sorted;
   }
+  /** Filtered data rows in display order, as if every group and tree row were expanded. */
+  orderedDataRows() {
+    const c = this.orderedCache;
+    if (c && c.full === this.full) return c.rows;
+    const d = this.last.display;
+    let rows = this.sorted;
+    if (d && (d.getParentId || d.groupBy.length)) {
+      const open = { ...d, expanded: /* @__PURE__ */ new Map(), defaultExpanded: -1, detailOpen: /* @__PURE__ */ new Set(), lazyChildren: void 0 };
+      rows = this.buildDisplay(open, this.last.sort ?? [], this.last.collator ?? this.deps.collator()).filter((n) => !n.kind);
+    }
+    this.orderedCache = { full: this.full, rows };
+    return rows;
+  }
   allNodes() {
     return this.nodes;
   }
@@ -8813,6 +8961,7 @@ var ServerRowModel = class {
     /** Server-side grouping, while groupBy has columns. */
     this.groups = null;
     this.displayIn = null;
+    this.quiet = false;
   }
   get bs() {
     return this.page ? this.page.size : this.deps.blockSize;
@@ -8911,9 +9060,19 @@ var ServerRowModel = class {
     const abs = this.base + index;
     const hit = this.peek(abs);
     if (hit) return hit;
-    if (index >= 0 && index < this.getRowCount()) this.ensure(Math.floor(abs / this.bs));
+    if (!this.quiet && index >= 0 && index < this.getRowCount()) this.ensure(Math.floor(abs / this.bs));
     return this.placeholder(abs);
   }
+  /** Run `fn` with getRow answering from loaded blocks only (rows not loaded stay placeholders, nothing is requested). */
+  withoutLoading(fn) {
+    const was = this.quiet;
+    this.quiet = true;
+    try {
+      return fn();
+    } finally {
+      this.quiet = was;
+    }
+  }
   ensure(k) {
     const cur = this.blocks.get(k);
     if (cur && (cur.state !== "failed" || Date.now() < (cur.retryAt ?? 0))) return;
@@ -9335,17 +9494,23 @@ var FilterBuilder = class {
     actions.append(reset, ok);
     popup.append(head, join, list, addBtn, actions);
     popupParent(grid.renderer.root).append(popup);
+    if (!rows.length) addBtn.click();
     const r = grid.renderer.root.getBoundingClientRect();
     const w = popup.offsetWidth || 460;
     popup.style.left = `${Math.max(4, Math.min(r.left + 24, (window.innerWidth || 1024) - w - 4))}px`;
-    popup.style.top = `${Math.max(4, r.top + 24)}px`;
+    const header2 = grid.renderer.headerEl.getBoundingClientRect();
+    const vh = window.innerHeight || 768;
+    const top = Math.max(4, Math.min((header2.height ? header2.bottom : r.top) + 8, vh - (popup.offsetHeight || 0) - 4));
+    popup.style.top = `${top}px`;
+    popup.style.maxHeight = `${Math.max(160, vh - top - 8)}px`;
     this.popup = popup;
-    if (!rows.length) addBtn.click();
     const onDown = (e) => {
       if (!eventInside(e, popup)) this.close();
     };
     const onKey = (e) => {
-      if (e.key === "Escape") this.close();
+      if (e.key !== "Escape") return;
+      this.close();
+      grid.renderer.gridEl.focus();
     };
     document.addEventListener("pointerdown", onDown, true);
     document.addEventListener("keydown", onKey, true);
@@ -9483,8 +9648,8 @@ var FormatDialog = class {
     CF_PRESETS.forEach((p, k) => {
       const b = el("button", "fg-cf-swatch", { type: "button", "aria-label": cf.styles[p.key], title: cf.styles[p.key], "aria-pressed": String(k === preset) });
       b.textContent = p.key === "bold" ? "B" : "Aa";
-      if (p.style.background) b.style.background = p.style.background;
-      if (p.style.color) b.style.color = p.style.color;
+      b.style.background = p.style.background ?? "#ffffff";
+      b.style.color = p.style.color ?? "#1f2430";
       b.addEventListener("click", () => {
         preset = k;
         for (const s of swatches.children) s.setAttribute("aria-pressed", String(s === b));
@@ -9583,7 +9748,9 @@ var FormatDialog = class {
       if (!eventInside(e, popup)) this.close();
     };
     const onKey = (e) => {
-      if (e.key === "Escape") this.close();
+      if (e.key !== "Escape") return;
+      this.close();
+      grid.renderer.gridEl.focus();
     };
     document.addEventListener("pointerdown", onDown, true);
     document.addEventListener("keydown", onKey, true);
@@ -10027,6 +10194,10 @@ var Grid = class {
     this.sourceDefs = [];
     this.pivotCfg = null;
     this.pivotData = null;
+    /** rollup option / setRollup: rows merged by the shown columns without an aggFunc. */
+    this.rollupOn = false;
+    /** The merged rows while rollup applies (not while pivoting), else null. */
+    this.rollupData = null;
     /** Grouping state from before pivot mode, restored when it ends. */
     this.savedGroup = null;
     /** 0-based page and rows per page (pagination only). */
@@ -10093,6 +10264,8 @@ var Grid = class {
       }
     };
     this.density = "normal";
+    /** Set by the cellPadding option or setCellPadding; null: the theme / density value. */
+    this.cellPadding = null;
     // ── merge, aggregates, fill, pinned rows ────────────────────
     /** `sortWithinMerges` is on. */
     this.sortWithin = false;
@@ -10173,6 +10346,7 @@ var Grid = class {
     this.renderer.applyTheme();
     if (options.flashDuration) this.renderer.root.style.setProperty("--fg-flash-duration", `${this.flashMs()}ms`);
     this.renderer.applyFont(this.font.size, this.font.family);
+    if (options.cellPadding != null) this.applyCellPadding(options.cellPadding);
     this.menu = new ColumnMenu(this);
     this.chooser = new ColumnChooserDialog(this);
     this.contextMenu = new ContextMenu(this);
@@ -10208,6 +10382,7 @@ var Grid = class {
       this.disposers.push(() => ro.disconnect());
     }
     if (options.pivot) this.setPivot(options.pivot);
+    if (options.rollup) this.setRollup(true);
     void needsFreeBadge(options.licenseKey).then((show) => {
       if (show && !this.destroyed) this.renderer.showFreeBadge();
     });
@@ -10286,6 +10461,7 @@ var Grid = class {
   }
   /** Column definitions or visibility changed; filters/quick filter may depend on them. */
   columnsChanged() {
+    this.rebuildRollup();
     this.rowModel.invalidate();
     this.updateRows();
     this.refreshSummary();
@@ -10308,7 +10484,7 @@ var Grid = class {
   }
   updateRows() {
     const paged = !!this.options.pagination;
-    const data = this.pivotData ?? this.store.state.data;
+    const data = this.viewRows();
     this.rowModel.update({ ...this.store.state, data, display: this.display(), page: paged ? { index: this.page, size: this.pageSize } : null });
     if (paged && this.page >= this.getPageCount()) {
       this.page = this.getPageCount() - 1;
@@ -10316,9 +10492,63 @@ var Grid = class {
     }
   }
   // ── pivot ───────────────────────────────────────────────────
-  /** Rows behind the view: the pivot table while pivoting, else the source data. */
+  /** Rows behind the view: the pivot table while pivoting, the merged rows with rollup, else the source data. */
   viewRows() {
-    return this.pivotData ?? this.store.state.data;
+    return this.pivotData ?? this.rollupData ?? this.store.state.data;
+  }
+  // ── rollup ──────────────────────────────────────────────────
+  getRollup() {
+    return this.rollupOn;
+  }
+  setRollup(on) {
+    on = !!on;
+    if (on && !this.allow("pivot")) return;
+    if (on && this.clientOnly("rollup")) return;
+    if (on && this.options.treeData) {
+      warn("rollup is not available with treeData");
+      return;
+    }
+    if (on === this.rollupOn) return;
+    this.editor.cancel();
+    this.rollupOn = on;
+    this.store.set({ range: null, focus: null });
+    this.columnsChanged();
+  }
+  /** Merge the source rows again (rollup on, not pivoting); the view is updated by the caller. */
+  rebuildRollup() {
+    this.rollupData = this.rollupOn && !this.pivotCfg ? buildRollup(this.store.state.data, this.dataColumns().map((c) => c.def)) : null;
+  }
+  /** The source rows behind `rows`: merged rollup rows stand for the rows they merge (for group and summary values). */
+  sourceRowsOf(rows) {
+    return this.rollupData ? rows.flatMap((r) => rollupSource(r) ?? [r]) : rows;
+  }
+  /** Whether a cell can be changed: never on merged rollup rows. */
+  cellEditable(def, row, rowIndex) {
+    return !this.rollupData && cellEditable(def, row, rowIndex);
+  }
+  /** Set or clear a column's aggFunc (null: no aggregate, so with rollup it becomes a column the rows merge by). */
+  setColumnAggFunc(colId, aggFunc) {
+    if (aggFunc !== null && typeof aggFunc !== "function" && !["sum", "avg", "min", "max", "count"].includes(aggFunc)) {
+      warn(`setColumnAggFunc: unknown aggFunc "${String(aggFunc)}"`);
+      return;
+    }
+    let found = false;
+    const map = (defs2) => defs2.map((d) => {
+      if (!d || typeof d !== "object") return d;
+      if (Array.isArray(d.children)) return { ...d, children: map(d.children) };
+      if ((d.id ?? d.field) !== colId) return d;
+      found = true;
+      const next = { ...d };
+      if (aggFunc) next.aggFunc = aggFunc;
+      else delete next.aggFunc;
+      return next;
+    });
+    const defs = map(this.sourceDefs);
+    if (!found) {
+      warn(`setColumnAggFunc: no column "${colId}"`);
+      return;
+    }
+    this.setColumns(defs);
   }
   /** Leaf columns of the user's definitions (not the pivot columns). */
   sourceLeaves() {
@@ -10376,6 +10606,7 @@ var Grid = class {
   afterPivotSwitch() {
     this.page = 0;
     this.store.set({ sort: [], filters: {}, range: null, focus: null });
+    this.rebuildRollup();
     this.rowModel.invalidate();
     this.updateRows();
     this.displayVersion++;
@@ -10484,12 +10715,31 @@ var Grid = class {
       } finally {
         this.keepRange = false;
       }
+      this.clampRanges();
     }
     this.editor.sync();
     if (flashKeys.size && this.options.flashCells !== false) this.flash(flashKeys);
     this.events.emit("transactionApplied", result);
     return result;
   }
+  /** Kept ranges and focus after the row count shrank: cut to the last row, dropped when wholly past it. */
+  clampRanges() {
+    const count = this.rowModel.getRowCount();
+    const { range, extraRanges, focus } = this.store.state;
+    const clamp = (r) => {
+      if (!r || r.start.rowIndex < count && r.end.rowIndex < count) return r;
+      if (Math.min(r.start.rowIndex, r.end.rowIndex) >= count) return null;
+      return { start: { ...r.start, rowIndex: Math.min(r.start.rowIndex, count - 1) }, end: { ...r.end, rowIndex: Math.min(r.end.rowIndex, count - 1) } };
+    };
+    const extras = extraRanges.map(clamp).filter((r) => !!r);
+    if (extras.length !== extraRanges.length || extras.some((r, i) => r !== extraRanges[i])) this.store.set({ extraRanges: extras });
+    if (focus && focus.rowIndex >= count) this.store.set({ focus: count ? { ...focus, rowIndex: count - 1 } : null });
+    const next = clamp(range);
+    if (next !== range) {
+      this.store.set({ range: next });
+      this.events.emit("rangeChange", { range: next && { start: { ...next.start }, end: { ...next.end } } });
+    }
+  }
   /** One transaction against `data` (remove → update → add); returns the new array. */
   /** Whether rows changed in `fields` could filter, sort, group or move differently. */
   viewReads(fields) {
@@ -10644,14 +10894,24 @@ var Grid = class {
     }
     if (want("groupBy") && Array.isArray(state.groupBy)) this.setGroupBy(state.groupBy.filter(known));
     if (want("pivot")) this.setPivot(state.pivot ?? null);
-    if (want("sort") && Array.isArray(state.sort)) this.setSort(state.sort.filter((x) => x && known(x.colId)));
-    if (want("filters") && state.filters && typeof state.filters === "object") {
-      const filters = Object.fromEntries(Object.entries(state.filters).filter(([id]) => known(id)));
-      this.store.set({ filters });
-      this.events.emit("filterChange", { filters: { ...filters } });
+    const query = {};
+    if (want("sort") && Array.isArray(state.sort)) {
+      const sort = this.checkSort(state.sort.filter((x) => x && known(x.colId)));
+      if (sort) query.sort = sort;
     }
-    if (want("advancedFilter")) this.setAdvancedFilter(state.advancedFilter ?? null);
-    if (want("quickFilter") && typeof state.quickFilter === "string") this.store.set({ quickFilter: state.quickFilter });
+    if (want("filters") && state.filters && typeof state.filters === "object") {
+      query.filters = Object.fromEntries(Object.entries(state.filters).filter(([id]) => known(id)));
+    }
+    if (want("advancedFilter")) {
+      const f = state.advancedFilter;
+      const next = f && typeof f === "object" && Array.isArray(f.conditions) && f.conditions.length ? f : null;
+      if (next !== this.store.state.advancedFilter && (!next || this.allow("advancedFilter"))) query.advancedFilter = next;
+    }
+    if (want("quickFilter") && typeof state.quickFilter === "string") query.quickFilter = state.quickFilter;
+    this.store.set(query);
+    if (query.sort) this.events.emit("sortChange", { sort: [...query.sort] });
+    if (query.filters) this.events.emit("filterChange", { filters: { ...query.filters } });
+    if ("advancedFilter" in query) this.events.emit("advancedFilterChange", { advancedFilter: query.advancedFilter ?? null });
     if (want("expanded") && state.expanded && typeof state.expanded === "object") {
       const expanded = new Map(Object.entries(state.expanded).filter(([, v]) => typeof v === "boolean"));
       if (this.savedGroup) this.savedGroup.expanded = expanded;
@@ -10677,11 +10937,13 @@ var Grid = class {
       rows.forEach((r, k) => {
         nums[k] = r.kind ? 0 : ++n;
       });
-      this.rowNumberCache = { rows, nums };
+      const first = this.page * this.pageSize;
+      const offset = this.options.pagination && !this.rowModel.server ? this.rowModel.dataRowsBefore?.(first) ?? first : 0;
+      this.rowNumberCache = { rows, nums, offset };
     }
     const v = this.rowNumberCache.nums[i];
     if (!v) return null;
-    return v + (this.options.pagination && !this.rowModel.server ? this.page * this.pageSize : 0);
+    return v + this.rowNumberCache.offset;
   }
   getPage() {
     return this.options.pagination ? this.page : 0;
@@ -10733,6 +10995,7 @@ var Grid = class {
   /** Server rows: drop the cache and load again. */
   refreshRows() {
     if (this.rowModel instanceof ServerRowModel) {
+      this.saveEditBeforeReload();
       this.rowModel.purge();
       this.renderer.invalidate({ rows: true });
     }
@@ -10742,6 +11005,12 @@ var Grid = class {
     this.renderer.invalidate({ header: true, rows: true });
     this.events.emit("rowsLoaded", total === null ? { start, end } : { start, end, total });
   }
+  /** Server rows are about to be dropped: save an open editor to its row first, else it is left over another row. */
+  saveEditBeforeReload() {
+    if (!this.rowModel.server) return;
+    this.editor.endRow(true);
+    if (this.editor.active && !this.editor.commit(null)) this.editor.cancel();
+  }
   serverFailed(start, end, error) {
     if (this.destroyed) return;
     warn(`datasource.getRows failed for rows ${start}\u2013${end}`);
@@ -10890,7 +11159,7 @@ var Grid = class {
     let m = this.aggCache.map.get(node.group);
     if (!m) this.aggCache.map.set(node.group, m = /* @__PURE__ */ new Map());
     if (!m.has(colId)) {
-      const rows = node.group.rows;
+      const rows = this.sourceRowsOf(node.group.rows);
       try {
         m.set(colId, aggregate(def.aggFunc, rows.map((r) => getCellValue(def, r)), rows));
       } catch {
@@ -11083,10 +11352,33 @@ var Grid = class {
     this.renderer.invalidateHeights();
     this.layoutChanged();
   }
+  /** Store and apply the padding; false when the value is not valid. */
+  applyCellPadding(px) {
+    if (px != null && !(typeof px === "number" && Number.isFinite(px) && px >= 0)) {
+      warn("cellPadding must be a number of px, 0 or more");
+      return false;
+    }
+    this.cellPadding = px;
+    if (px == null) this.renderer.root.style.removeProperty("--fg-cell-px");
+    else this.renderer.root.style.setProperty("--fg-cell-px", `${px}px`);
+    return true;
+  }
+  setCellPadding(px) {
+    if (px === this.cellPadding || !this.applyCellPadding(px)) return;
+    this.menu.close();
+    this.layoutChanged();
+  }
+  /** The padding in use: the set value, else the theme / density CSS variable. */
+  getCellPadding() {
+    if (this.cellPadding != null) return this.cellPadding;
+    const v = parseFloat(getComputedStyle(this.renderer.root).getPropertyValue("--fg-cell-px"));
+    return Number.isFinite(v) ? v : 12;
+  }
   /** Copy the grid font variables onto an element rendered outside the root (popups, drag ghost). */
   applyFontTo(target) {
     if (this.font.size) target.style.setProperty("--fg-font-size", `${this.font.size}px`);
     if (this.font.family) target.style.setProperty("--fg-font", this.font.family);
+    if (this.cellPadding != null) target.style.setProperty("--fg-cell-px", `${this.cellPadding}px`);
   }
   /** Current summary configuration and values, or null when there are no summary rows. */
   summary() {
@@ -11115,7 +11407,7 @@ var Grid = class {
     }
     const scope = opts.scope ?? "filtered";
     const rows = scope === "all" ? this.rowModel.allNodes().map((n) => n.data) : scope === "selected" ? this.selectedRows() : this.rowModel.dataRows().map((n) => n.data);
-    this.summaryValues = computeSummary(opts.rows, rows, (id) => this.columns.getNode(id)?.def);
+    this.summaryValues = computeSummary(opts.rows, this.sourceRowsOf(rows), (id) => this.columns.getNode(id)?.def);
   }
   // ── cell ranges ─────────────────────────────────────────────
   dataColumns() {
@@ -11208,12 +11500,11 @@ var Grid = class {
       out = [];
       for (let i = b.r1; i <= b.r2; i++) {
         const node = this.rowModel.getRow(i);
-        if (!node.kind) out.push(node.data);
+        if (node && !node.kind) out.push(node.data);
       }
       cols = displayed.slice(b.c1, b.c2 + 1).filter((c) => !isSystemCol(c.id));
     } else if (checkedRows) {
-      const sel = this.store.state.selected;
-      out = this.rowModel.dataRows().filter((n) => sel.has(n.id)).map((n) => n.data);
+      out = this.shownSelectedRows();
       cols = this.dataColumns();
     } else {
       const f = this.store.state.focus;
@@ -11268,8 +11559,17 @@ var Grid = class {
     if (text2) this.clearCells(true);
     return text2;
   }
+  /** Text a copy puts on the clipboard. Server rows: only the loaded rows, with a warning about the rest. */
+  copyText(headers, rows = false) {
+    const m = this.rowModel;
+    if (!(m instanceof ServerRowModel)) return this.selectionTSV(headers, rows);
+    const text2 = m.withoutLoading(() => this.selectionTSV(headers, rows));
+    const missing = rows ? 0 : m.withoutLoading(() => this.unloadedInRanges());
+    if (missing) warn(`copy: ${missing} row${missing > 1 ? "s" : ""} of the range ${missing > 1 ? "are" : "is"} not loaded and ${missing > 1 ? "were" : "was"} not copied`);
+    return text2;
+  }
   copyToClipboard(headers, rows = false) {
-    const text2 = this.selectionTSV(headers, rows);
+    const text2 = this.copyText(headers, rows);
     if (text2 && typeof navigator !== "undefined" && navigator.clipboard?.writeText) {
       try {
         navigator.clipboard.writeText(text2)?.catch?.(() => void 0);
@@ -11278,6 +11578,14 @@ var Grid = class {
     }
     return text2;
   }
+  /** Server rows: how many rows the ranges cover that are not loaded (placeholders). */
+  unloadedInRanges() {
+    const seen2 = /* @__PURE__ */ new Set();
+    for (const b of this.allRangeBounds()) for (let i = b.r1; i <= b.r2; i++) {
+      if (this.rowModel.getRow(i)?.kind === "loading") seen2.add(i);
+    }
+    return seen2.size;
+  }
   pasteText(text2) {
     const matrix = parseTSV(text2);
     const result = { changed: 0, skipped: 0 };
@@ -11300,19 +11608,21 @@ var Grid = class {
     const single = matrix.length === 1 && matrix[0].length === 1;
     const rows = single && b ? b.r2 - b.r1 + 1 : matrix.length;
     const width = single && b ? b.c2 - b.c1 + 1 : Math.max(...matrix.map((r) => r.length));
-    for (let dr = 0; dr < rows; dr++) {
-      const ri = r0 + dr;
-      if (ri >= count) break;
+    for (let ri = r0, dr = 0; ri < count && dr < rows; ri++) {
       const node = this.rowModel.getRow(ri);
-      if (node.kind) continue;
+      if (node.kind) {
+        if (single && b) dr++;
+        continue;
+      }
+      const line2 = dr++;
       for (let dc = 0; dc < width; dc++) {
         const col = displayed[c0 + dc];
         if (!col) break;
         if (isSystemCol(col.id)) continue;
-        const raw = single && b ? matrix[0][0] : matrix[dr]?.[dc];
+        const raw = single && b ? matrix[0][0] : matrix[line2]?.[dc];
         if (raw === void 0) continue;
         const def = col.def;
-        if (!def.field || !cellEditable(def, node.data, ri)) {
+        if (!def.field || !this.cellEditable(def, node.data, ri)) {
           result.skipped++;
           continue;
         }
@@ -11380,7 +11690,7 @@ var Grid = class {
       const id = this.rowModel.idOf(row);
       const rowIndex = this.rowModel.indexOfId(id);
       for (const c of cols) {
-        if (!cellEditable(c.def, row, rowIndex < 0 ? i : rowIndex)) continue;
+        if (!this.cellEditable(c.def, row, rowIndex < 0 ? i : rowIndex)) continue;
         const message = this.cellError(c.def, row, row[c.def.field]);
         if (message !== null) out.push({ row, rowIndex, colId: c.id, message });
       }
@@ -11645,26 +11955,36 @@ var Grid = class {
       const col = displayed[c];
       const node = this.rowModel.getRow(r);
       const def = col?.def;
-      if (!node || node.kind || !def?.field || isSystemCol(col.id) || !cellEditable(def, node.data, r)) return;
+      if (!node || node.kind || !def?.field || isSystemCol(col.id) || !this.cellEditable(def, node.data, r)) return;
       if (this.cellError(def, node.data, value2) !== null) return;
       this.writeCell(changes, node.data, def.field, col.id, r, value2);
     };
     const value = (r, c) => getCellValue(displayed[c].def, this.rowModel.getRow(r).data);
+    const dataRow = (r) => {
+      const node = this.rowModel.getRow(r);
+      return !!node && !node.kind;
+    };
+    const keep = (from, to, ok) => {
+      const out = [];
+      for (let i = from; i <= to; i++) if (ok(i)) out.push(i);
+      return out;
+    };
+    const dataCol = (c) => !!displayed[c] && !isSystemCol(displayed[c].id);
     if (t.r1 < src.r1 || t.r2 > src.r2) {
+      const down = keep(src.r2 + 1, t.r2, dataRow), up = keep(t.r1, src.r1 - 1, dataRow).reverse();
+      const rows = keep(src.r1, src.r2, dataRow);
       for (let c = src.c1; c <= src.c2; c++) {
-        const down = [], up = [];
-        for (let r = src.r1; r <= src.r2; r++) down.push(value(r, c));
-        for (let r = src.r2; r >= src.r1; r--) up.push(value(r, c));
-        fillSeries(down, t.r2 - src.r2).forEach((v, k) => write(src.r2 + 1 + k, c, v));
-        fillSeries(up, src.r1 - t.r1).forEach((v, k) => write(src.r1 - 1 - k, c, v));
+        const seed = rows.map((r) => value(r, c));
+        fillSeries(seed, down.length).forEach((v, k) => write(down[k], c, v));
+        fillSeries([...seed].reverse(), up.length).forEach((v, k) => write(up[k], c, v));
       }
     } else if (t.c1 < src.c1 || t.c2 > src.c2) {
-      for (let r = src.r1; r <= src.r2; r++) {
-        const right = [], left = [];
-        for (let c = src.c1; c <= src.c2; c++) right.push(value(r, c));
-        for (let c = src.c2; c >= src.c1; c--) left.push(value(r, c));
-        fillSeries(right, t.c2 - src.c2).forEach((v, k) => write(r, src.c2 + 1 + k, v));
-        fillSeries(left, src.c1 - t.c1).forEach((v, k) => write(r, src.c1 - 1 - k, v));
+      const right = keep(src.c2 + 1, t.c2, dataCol), left = keep(t.c1, src.c1 - 1, dataCol).reverse();
+      const cols = keep(src.c1, src.c2, dataCol);
+      for (const r of keep(src.r1, src.r2, dataRow)) {
+        const seed = cols.map((c) => value(r, c));
+        fillSeries(seed, right.length).forEach((v, k) => write(r, right[k], v));
+        fillSeries([...seed].reverse(), left.length).forEach((v, k) => write(r, left[k], v));
       }
     } else return;
     this.endCellTx(changes);
@@ -11733,7 +12053,7 @@ var Grid = class {
       const node = this.rowModel.getRow(r);
       for (let c = box.c1; c <= box.c2; c++) {
         const def = displayed[c]?.def;
-        if (node && !node.kind && def?.field && cellEditable(def, node.data, r) && (!cut || this.copyAllowed(def, node.data))) this.writeCell(changes, node.data, def.field, displayed[c].id, r, null);
+        if (node && !node.kind && def?.field && this.cellEditable(def, node.data, r) && (!cut || this.copyAllowed(def, node.data))) this.writeCell(changes, node.data, def.field, displayed[c].id, r, null);
       }
     }
     this.endCellTx(changes);
@@ -11887,8 +12207,9 @@ var Grid = class {
     const cols = (ids ? ids.map((id) => this.columns.getColumn(id)) : this.columns.displayed()).filter((c) => !!c && isResizable(c.def));
     const { first, last } = this.renderer.renderedRange();
     const code = this.store.state.locale.code;
-    const HEADER_EXTRA = 24 + 22 + 6 + 14;
-    const CELL_EXTRA = 24;
+    const pad4 = this.getCellPadding() * 2;
+    const HEADER_EXTRA = pad4 + 22 + 6 + 14;
+    const CELL_EXTRA = pad4;
     for (const col of cols) {
       let w = this.renderer.measureText(col.def.header ?? col.def.field ?? "", true) + HEADER_EXTRA;
       const fmt = getFormatter(col.def, code);
@@ -11906,6 +12227,13 @@ var Grid = class {
     this.columnsChanged();
   }
   setSort(sort) {
+    const valid = this.checkSort(sort);
+    if (!valid) return;
+    this.store.set({ sort: valid });
+    this.events.emit("sortChange", { sort: [...valid] });
+  }
+  /** The known, well-formed sort items, or null when a beforeSort handler refused them. */
+  checkSort(sort) {
     const valid = sort.filter((s) => {
       const node = this.columns.getNode(s.colId);
       if (!node || node.children) {
@@ -11914,9 +12242,7 @@ var Grid = class {
       }
       return s.dir === "asc" || s.dir === "desc";
     });
-    if (this.veto("beforeSort", { sort: valid.map((s) => ({ ...s })) })) return;
-    this.store.set({ sort: valid });
-    this.events.emit("sortChange", { sort: [...valid] });
+    return this.veto("beforeSort", { sort: valid.map((s) => ({ ...s })) }) ? null : valid;
   }
   toggleSort(colId, additive) {
     const cur = this.store.state.sort;
@@ -12086,6 +12412,15 @@ var Grid = class {
     const sel = this.store.state.selected;
     return sel.size ? this.rowModel.allNodes().filter((n) => sel.has(n.id)).map((n) => n.data) : [];
   }
+  /** Filtered data rows in display order (group buckets, parents before children), collapsed ones included. */
+  orderedDataRows() {
+    return this.rowModel.orderedDataRows?.() ?? this.rowModel.dataRows();
+  }
+  /** Checked rows that pass the filters, in display order: what copy, export and delete of the checked rows act on. */
+  shownSelectedRows() {
+    const sel = this.store.state.selected;
+    return sel.size ? this.orderedDataRows().filter((n) => sel.has(n.id)).map((n) => n.data) : [];
+  }
   withSelect(defs) {
     const sys = [];
     const rn = this.options.rowNumbers;
@@ -12157,12 +12492,26 @@ var Grid = class {
     });
     this.columnsChanged();
   }
+  /** Close every popup of this grid (menus and dialogs); focus that was in one goes back to the grid. */
+  closePopups() {
+    const r = this.renderer.root.getRootNode();
+    const inPopup = !!(r.activeElement ?? document.activeElement)?.closest(".fg-menu");
+    this.menu.close();
+    this.chooser.close();
+    this.contextMenu.close();
+    this.filterBuilder.close();
+    this.formatDialog.close();
+    this.assistantPanel.close();
+    if (inPopup) this.renderer.gridEl.focus({ preventScroll: true });
+  }
   onChange(keys) {
     const has = (...k) => k.some((x) => keys.includes(x));
+    if (has("sort", "filters", "quickFilter", "advancedFilter")) this.saveEditBeforeReload();
     if (this.pivotCfg && has("data", "locale")) this.rebuildPivot(false);
+    if (this.rollupOn && has("data")) this.rebuildRollup();
+    if (has("locale", "theme")) this.closePopups();
     if (has("locale")) {
-      this.menu.close();
-      this.chooser.close();
+      this.finder.relabel();
       this.sideBar?.refresh();
       this.rowModel.invalidate();
     }
@@ -12267,6 +12616,11 @@ var Grid = class {
       setTheme: guard((t) => this.store.set({ theme: t })),
       setLocale: guard((l) => this.store.set({ locale: resolveLocale(l) })),
       setFont: guard((f) => this.setFont(f)),
+      setCellPadding: guard((px) => this.setCellPadding(px)),
+      getCellPadding: guard(() => this.getCellPadding()),
+      setRollup: guard((on) => this.setRollup(on)),
+      getRollup: guard(() => this.getRollup()),
+      setColumnAggFunc: guard((id, agg) => this.setColumnAggFunc(id, agg)),
       setColumnVisible: guard((id, v) => this.setColumnsVisible([id], v)),
       autoSizeColumns: guard((ids) => this.autoSize(ids)),
       resetColumnState: guard(() => this.resetColumns()),