@freegridjs/core 0.8.1 → 1.0.1

package/dist/index.js

@@ -32,7 +32,20 @@ var DRAG_COLUMN = {
   filter: false,
   chooser: false
 };
-var isSystemCol = (id) => id === SELECT_COL_ID || id === DRAG_COL_ID;
+var ROWNUM_COL_ID = "__fg_rownum__";
+var rowNumberColumn = (width = 52, header2 = "#") => ({
+  id: ROWNUM_COL_ID,
+  header: header2,
+  width,
+  minWidth: width,
+  maxWidth: width,
+  pinned: "left",
+  sortable: false,
+  resizable: false,
+  filter: false,
+  chooser: false
+});
+var isSystemCol = (id) => id === SELECT_COL_ID || id === DRAG_COL_ID || id === ROWNUM_COL_ID;
 var DEFAULT_WIDTH = 120;
 var DEFAULT_MIN_WIDTH = 40;
 var REGIONS = ["left", "center", "right"];
@@ -107,7 +120,8 @@ var ColumnModel = class {
         width: clampWidth(def, def.width ?? DEFAULT_WIDTH),
         flex: def.flex && def.flex > 0 ? def.flex : null,
         hide: def.hide ?? false,
-        pinned: def.pinned ?? parent?.pinned ?? null
+        pinned: def.pinned ?? parent?.pinned ?? null,
+        open: !!def.openByDefault
       };
       this.byId.set(id, node);
       if (isGroup) node.children = valid(def.children).map((c) => build(c, node, depth + 1));
@@ -228,7 +242,7 @@ var ColumnModel = class {
     return cells;
   }
   getState() {
-    return this.leafNodes().filter((n) => !isSystemCol(n.id)).map((n) => ({ colId: n.id, width: this.leafById.get(n.id)?.width ?? n.width, hide: n.hide, pinned: n.pinned }));
+    return this.leafNodes().filter((n) => !isSystemCol(n.id)).map((n) => ({ colId: n.id, width: this.leafById.get(n.id)?.width ?? n.width, hide: !!n.hide, pinned: n.pinned ?? null }));
   }
   applyState(state) {
     const rank = /* @__PURE__ */ new Map();
@@ -236,11 +250,14 @@ var ColumnModel = class {
       rank.set(s.colId, i);
       const node = this.byId.get(s.colId);
       if (!node || node.children || isSystemCol(s.colId)) return;
-      node.flex = null;
-      node.width = clampWidth(node.def, s.width);
-      node.hide = s.hide;
-      node.pinned = s.pinned;
+      if (typeof s.width === "number" && Number.isFinite(s.width)) {
+        node.flex = null;
+        node.width = clampWidth(node.def, s.width);
+      }
+      if (typeof s.hide === "boolean") node.hide = s.hide;
+      if ("pinned" in s) node.pinned = s.pinned === "left" || s.pinned === "right" ? s.pinned : null;
     });
+    rank.set(ROWNUM_COL_ID, -3);
     rank.set(DRAG_COL_ID, -2);
     rank.set(SELECT_COL_ID, -1);
     const nodeRank = (n) => n.children ? Math.min(Infinity, ...n.children.map(nodeRank)) : rank.get(n.id) ?? Infinity;
@@ -259,8 +276,33 @@ var ColumnModel = class {
     this.roots_.forEach(walk);
     return out;
   }
+  /** A group whose children use columnGroupShow, so its header gets an open/close toggle. */
+  isCollapsible(node) {
+    return !!node.children?.some((c) => c.def.columnGroupShow === "open" || c.def.columnGroupShow === "closed");
+  }
+  setGroupOpen(id, open) {
+    const node = this.byId.get(id);
+    if (!node?.children || node.open === open) return false;
+    node.open = open;
+    this.relayout();
+    return true;
+  }
+  /** Every collapsible group and whether it is open. */
+  groupOpenState() {
+    const out = {};
+    for (const n of this.byId.values()) if (this.isCollapsible(n)) out[n.id] = n.open;
+    return out;
+  }
+  /** columnGroupShow: hidden while its group (or any group above) is in the other state. */
+  shownByGroups(n) {
+    for (let c = n; c?.parent; c = c.parent) {
+      const show = c.def.columnGroupShow;
+      if (show === "open" && !c.parent.open || show === "closed" && c.parent.open) return false;
+    }
+    return true;
+  }
   relayout() {
-    const visible = this.leafNodes().filter((n) => !n.hide);
+    const visible = this.leafNodes().filter((n) => !n.hide && this.shownByGroups(n));
     const fixed = visible.reduce((s, n) => s + (n.flex ? 0 : n.width), 0);
     const totalFlex = visible.reduce((s, n) => s + (n.flex ?? 0), 0);
     const free = Math.max(0, this.containerWidth - fixed);
@@ -282,215 +324,6 @@ var ColumnModel = class {
   }
 };
 
-// src/rows/filters.ts
-function isBlank(v) {
-  return v == null || typeof v === "string" && v.trim() === "" || typeof v === "number" && Number.isNaN(v);
-}
-var pad = (n) => String(n).padStart(2, "0");
-function toDateKey(v) {
-  if (isBlank(v)) return null;
-  if (typeof v === "string" && /^\d{4}-\d{2}-\d{2}$/.test(v)) return v;
-  const d = v instanceof Date ? v : new Date(v);
-  if (Number.isNaN(d.getTime())) return null;
-  return `${d.getFullYear()}-${pad(d.getMonth() + 1)}-${pad(d.getDate())}`;
-}
-function setKey(v) {
-  if (isBlank(v)) return "";
-  if (v instanceof Date) return toDateKey(v) ?? "";
-  return String(v);
-}
-var all = () => true;
-function buildPredicate(model) {
-  switch (model.type) {
-    case "text": {
-      const q = (model.value ?? "").toLowerCase();
-      const s = (v) => isBlank(v) ? "" : String(v).toLowerCase();
-      switch (model.op) {
-        case "contains":
-          return (v) => s(v).includes(q);
-        case "equals":
-          return (v) => s(v) === q;
-        case "notEquals":
-          return (v) => s(v) !== q;
-        case "startsWith":
-          return (v) => s(v).startsWith(q);
-        case "endsWith":
-          return (v) => s(v).endsWith(q);
-        case "blank":
-          return isBlank;
-        case "notBlank":
-          return (v) => !isBlank(v);
-      }
-      return all;
-    }
-    case "number": {
-      const n = (v) => isBlank(v) ? NaN : Number(v);
-      if (model.op === "blank") return (v) => Number.isNaN(n(v));
-      if (model.op === "notBlank") return (v) => !Number.isNaN(n(v));
-      const a = model.value;
-      if (a == null || Number.isNaN(a)) return all;
-      switch (model.op) {
-        case "eq":
-          return (v) => n(v) === a;
-        case "ne":
-          return (v) => n(v) !== a;
-        case "lt":
-          return (v) => n(v) < a;
-        case "lte":
-          return (v) => n(v) <= a;
-        case "gt":
-          return (v) => n(v) > a;
-        case "gte":
-          return (v) => n(v) >= a;
-        case "between": {
-          const b = model.valueTo;
-          if (b == null || Number.isNaN(b)) return all;
-          const lo = Math.min(a, b), hi = Math.max(a, b);
-          return (v) => {
-            const x = n(v);
-            return x >= lo && x <= hi;
-          };
-        }
-      }
-      return all;
-    }
-    case "date": {
-      if (model.op === "blank") return (v) => toDateKey(v) === null;
-      if (model.op === "notBlank") return (v) => toDateKey(v) !== null;
-      const a = model.value;
-      if (!a) return all;
-      const k = (v) => toDateKey(v);
-      switch (model.op) {
-        case "equals":
-          return (v) => k(v) === a;
-        case "before":
-          return (v) => {
-            const x = k(v);
-            return x !== null && x < a;
-          };
-        case "after":
-          return (v) => {
-            const x = k(v);
-            return x !== null && x > a;
-          };
-        case "between": {
-          const b = model.valueTo;
-          if (!b) return all;
-          const lo = a < b ? a : b, hi = a < b ? b : a;
-          return (v) => {
-            const x = k(v);
-            return x !== null && x >= lo && x <= hi;
-          };
-        }
-      }
-      return all;
-    }
-    case "set": {
-      const allowed = new Set(model.values.map(setKey));
-      return (v) => allowed.has(setKey(v));
-    }
-  }
-  return all;
-}
-function quickTokens(q) {
-  const t = q.trim().toLowerCase();
-  return t ? t.split(/\s+/) : [];
-}
-function matchesQuick(tokens, text2) {
-  return tokens.every((t) => text2.includes(t));
-}
-
-// src/i18n/format.ts
-var cache = /* @__PURE__ */ new Map();
-function parseNumberPattern(p) {
-  if (p === "integer") return { maximumFractionDigits: 0 };
-  if (p === "percent") return { style: "percent" };
-  if (p.startsWith("currency:")) return { style: "currency", currency: p.slice(9) };
-  if (!/^[#0,]*(\.[#0]+)?%?$/.test(p) || !/[#0]/.test(p)) return null;
-  const pct = p.endsWith("%");
-  const body = pct ? p.slice(0, -1) : p;
-  const frac = body.includes(".") ? body.split(".")[1] : "";
-  return {
-    useGrouping: body.includes(","),
-    minimumFractionDigits: (frac.match(/0/g) ?? []).length,
-    maximumFractionDigits: frac.length,
-    ...pct ? { style: "percent" } : {}
-  };
-}
-var DATE_PRESETS = {
-  date: { year: "numeric", month: "2-digit", day: "2-digit" },
-  datetime: { year: "numeric", month: "2-digit", day: "2-digit", hour: "2-digit", minute: "2-digit" },
-  time: { hour: "2-digit", minute: "2-digit" },
-  short: { dateStyle: "short" },
-  medium: { dateStyle: "medium" },
-  long: { dateStyle: "long" }
-};
-function toDate(v) {
-  if (isBlank(v)) return null;
-  if (v instanceof Date) return Number.isNaN(v.getTime()) ? null : v;
-  if (typeof v === "string") {
-    const m = /^(\d{4})-(\d{2})-(\d{2})$/.exec(v);
-    if (m) return new Date(Number(m[1]), Number(m[2]) - 1, Number(m[3]));
-  }
-  if (typeof v !== "string" && typeof v !== "number") return null;
-  const d = new Date(v);
-  return Number.isNaN(d.getTime()) ? null : d;
-}
-function create(type, format, locale) {
-  switch (type) {
-    case "number": {
-      let opts = {};
-      if (typeof format === "string") {
-        const parsed = parseNumberPattern(format);
-        if (!parsed) warn(`unknown number format "${format}"`);
-        opts = parsed ?? {};
-      } else if (format) opts = format;
-      const nf = new Intl.NumberFormat(locale, opts);
-      return (v) => {
-        if (isBlank(v)) return "";
-        const n = typeof v === "number" ? v : Number(v);
-        return Number.isNaN(n) ? String(v) : nf.format(n);
-      };
-    }
-    case "date": {
-      if (locale.toLowerCase().startsWith("ko") && (format === void 0 || format === "date" || format === "datetime")) {
-        const pad3 = (n) => String(n).padStart(2, "0");
-        const withTime = format === "datetime";
-        return (v) => {
-          const d = toDate(v);
-          if (!d) return isBlank(v) ? "" : String(v);
-          const day = `${d.getFullYear()}-${pad3(d.getMonth() + 1)}-${pad3(d.getDate())}`;
-          return withTime ? `${day} ${pad3(d.getHours())}:${pad3(d.getMinutes())}` : day;
-        };
-      }
-      let opts = DATE_PRESETS.date;
-      if (typeof format === "string") {
-        if (!DATE_PRESETS[format]) warn(`unknown date format "${format}"`);
-        opts = DATE_PRESETS[format] ?? DATE_PRESETS.date;
-      } else if (format) opts = format;
-      const df = new Intl.DateTimeFormat(locale, opts);
-      return (v) => {
-        const d = toDate(v);
-        return d ? df.format(d) : isBlank(v) ? "" : String(v);
-      };
-    }
-    case "boolean":
-      return (v) => v === true ? "\u2713" : v === false ? "\u2717" : "";
-    default:
-      return (v) => isBlank(v) ? "" : v instanceof Date ? v.toISOString() : String(v);
-  }
-}
-function getFormatter(def, locale) {
-  const f = def.format;
-  const key = `${locale}|${def.type ?? "text"}|${typeof f === "string" ? f : JSON.stringify(f ?? null)}`;
-  let fmt = cache.get(key);
-  if (!fmt) {
-    fmt = create(def.type, f, locale);
-    cache.set(key, fmt);
-  }
-  return fmt;
-}
-
 // src/formula.ts
 var FormulaError = class extends Error {
   constructor(code) {
@@ -654,66 +487,509 @@ var Parser = class {
       if (!this.take(")")) throw new FormulaError("#ERROR!");
       return v;
     }
-    const name = t.v;
-    if (this.peek("(")) {
-      this.i++;
-      const args = [];
-      if (!this.take(")")) {
-        do
-          args.push(this.comparison());
-        while (this.take(","));
-        if (!this.take(")")) throw new FormulaError("#ERROR!");
-      }
-      const upper = name.toUpperCase();
-      if (upper === "IF") {
-        if (args.length < 2) throw new FormulaError("#ERROR!");
-        const cond = typeof args[0] === "boolean" ? args[0] : num(args[0]) !== 0;
-        return cond ? args[1] : args.length > 2 ? args[2] : false;
+    const name = t.v;
+    if (this.peek("(")) {
+      this.i++;
+      const args = [];
+      if (!this.take(")")) {
+        do
+          args.push(this.comparison());
+        while (this.take(","));
+        if (!this.take(")")) throw new FormulaError("#ERROR!");
+      }
+      const upper = name.toUpperCase();
+      if (upper === "IF") {
+        if (args.length < 2) throw new FormulaError("#ERROR!");
+        const cond = typeof args[0] === "boolean" ? args[0] : num(args[0]) !== 0;
+        return cond ? args[1] : args.length > 2 ? args[2] : false;
+      }
+      const fn = Object.hasOwn(FUNCS, upper) ? FUNCS[upper] : void 0;
+      if (!fn) throw new FormulaError("#NAME?");
+      return fn(args);
+    }
+    if (/^(true|false)$/i.test(name)) return name.toLowerCase() === "true";
+    return this.resolve(name);
+  }
+};
+var MAX_DEPTH = 32;
+function evaluateFormula(formula, row, seen2 = /* @__PURE__ */ new Set(), depth = 0, memo = /* @__PURE__ */ new Map()) {
+  try {
+    const resolve = (name) => {
+      if (!row || !Object.hasOwn(row, name)) throw new FormulaError("#REF!");
+      const v2 = row[name];
+      if (typeof v2 === "string" && v2.startsWith("=")) {
+        if (seen2.has(name) || depth >= MAX_DEPTH) throw new FormulaError("#CYCLE!");
+        let r;
+        if (memo.has(name)) r = memo.get(name);
+        else {
+          r = evaluateFormula(v2, row, /* @__PURE__ */ new Set([...seen2, name]), depth + 1, memo);
+          memo.set(name, r);
+        }
+        if (typeof r === "string" && /^#[A-Z/0]+[!?]$/.test(r)) throw new FormulaError(r);
+        return r;
+      }
+      return v2;
+    };
+    const v = new Parser(tokenize(formula.slice(1)), resolve).parse();
+    if (typeof v === "number" && !Number.isFinite(v)) return "#NUM!";
+    return v;
+  } catch (e) {
+    return e instanceof FormulaError ? e.code : "#ERROR!";
+  }
+}
+var isFormula = (v) => typeof v === "string" && v.length > 1 && v.startsWith("=");
+
+// src/rows/values.ts
+function getCellValue(def, row) {
+  if (def.valueGetter) {
+    try {
+      return def.valueGetter(row);
+    } catch {
+      warn(`valueGetter of column "${def.id ?? def.field}" threw; rendering an empty cell`);
+      return void 0;
+    }
+  }
+  if (def.field == null) return void 0;
+  const raw = row[def.field];
+  return def.formulas && isFormula(raw) ? evaluateFormula(raw, row, /* @__PURE__ */ new Set([def.field])) : raw;
+}
+
+// src/interactions/filterRow.ts
+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 toNumber = (s) => {
+  const n = Number(s.replace(/[,\s₩$€¥]/g, ""));
+  return s.trim() !== "" && Number.isFinite(n) ? n : null;
+};
+var toDateKey = (s) => {
+  const m = /^(\d{4})[-./]\s*(\d{1,2})[-./]\s*(\d{1,2})\.?$/.exec(s.trim());
+  if (!m) return null;
+  const y = Number(m[1]), mo = Number(m[2]), d = Number(m[3]);
+  if (mo < 1 || mo > 12 || d < 1 || d > new Date(Date.UTC(y, mo, 0)).getUTCDate()) return null;
+  return `${m[1]}-${m[2].padStart(2, "0")}-${m[3].padStart(2, "0")}`;
+};
+function parseFilterText(type, text2) {
+  const t = text2.trim();
+  if (!t) return null;
+  if (type === "text") return { type: "text", op: "contains", value: t };
+  const range = RANGE.exec(t);
+  if (type === "number") {
+    if (range) {
+      const a = toNumber(range[1]), b = toNumber(range[2]);
+      return a === null || b === null ? void 0 : { type: "number", op: "between", value: Math.min(a, b), valueTo: Math.max(a, b) };
+    }
+    const op2 = NUM_OPS.find(([p]) => t.startsWith(p));
+    const n = toNumber(op2 ? t.slice(op2[0].length) : t);
+    return n === null ? void 0 : { type: "number", op: op2 ? op2[1] : "eq", value: n };
+  }
+  if (range) {
+    const a = toDateKey(range[1]), b = toDateKey(range[2]);
+    return !a || !b ? void 0 : { type: "date", op: "between", value: a < b ? a : b, valueTo: a < b ? b : a };
+  }
+  const op = DATE_OPS.find(([p]) => t.startsWith(p));
+  const d = toDateKey(op ? t.slice(op[0].length) : t);
+  return d ? { type: "date", op: op ? op[1] : "equals", value: d } : void 0;
+}
+function filterText(model) {
+  if (!model) return "";
+  if (model.type === "text") return model.op === "contains" ? model.value ?? "" : "";
+  if (model.type === "number") {
+    if (model.op === "between") return `${model.value}~${model.valueTo}`;
+    const sym = NUM_OPS.find(([, op]) => op === model.op)?.[0];
+    return sym && model.value !== void 0 ? `${sym === "=" ? "" : sym}${model.value}` : "";
+  }
+  if (model.type === "date") {
+    if (model.op === "between") return `${model.value}~${model.valueTo}`;
+    const sym = DATE_OPS.find(([, op]) => op === model.op)?.[0];
+    return sym && model.value ? `${sym === "=" ? "" : sym}${model.value}` : "";
+  }
+  return "";
+}
+var FilterRow = class {
+  constructor(grid, panes) {
+    this.grid = grid;
+    this.layout = "";
+    this.timers = /* @__PURE__ */ new Map();
+    this.data = null;
+    this.synced = null;
+    this.rebuilt = false;
+    this.inners = {};
+    for (const r of REGIONS2) {
+      this.inners[r] = el("div", "fg-filter-row", { role: "row" });
+      panes[r].append(this.inners[r]);
+    }
+  }
+  get height() {
+    return Math.round(this.grid.renderer.opts.rowHeight * 0.95);
+  }
+  render() {
+    const { columns, store } = this.grid;
+    const h = this.height;
+    const cols = columns.displayed();
+    const key = `${h}|${store.state.locale.code}|${cols.map((c) => `${c.id}:${c.left}:${c.width}:${c.region}`).join(",")}`;
+    if (key !== this.layout) {
+      this.layout = key;
+      for (const r of REGIONS2) {
+        const inner = this.inners[r];
+        inner.style.width = `${columns.regionWidth(r)}px`;
+        inner.style.height = `${h}px`;
+        inner.replaceChildren(...columns.region(r).map((c) => this.cell(c, h)));
+      }
+      this.data = store.state.data;
+      this.rebuilt = true;
+    } else if (store.state.data !== this.data) {
+      this.data = store.state.data;
+      this.refreshLists();
+    }
+    this.sync();
+  }
+  /** Show filters set elsewhere (menu, API) in the boxes that are not being typed in. */
+  sync() {
+    const filters = this.grid.store.state.filters;
+    if (filters === this.synced && !this.rebuilt) return;
+    this.synced = filters;
+    this.rebuilt = false;
+    for (const r of REGIONS2) {
+      for (const box of this.inners[r].querySelectorAll("[data-col]")) {
+        const colId = box.dataset.col;
+        const model = filters[colId];
+        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;
+        } else box.value = filterText(model);
+        box.classList.remove("fg-filter-bad");
+      }
+    }
+  }
+  /** Refill the set lists from the current rows, keeping each list's choice. */
+  refreshLists() {
+    for (const r of REGIONS2) {
+      for (const select of this.inners[r].querySelectorAll("select[data-col]")) {
+        const def = this.grid.columns.getNode(select.dataset.col)?.def;
+        if (!def) continue;
+        const v = select.value;
+        this.fillOptions(select, def);
+        if (v && ![...select.options].some((o) => o.value === v)) {
+          const o = el("option", "", { value: v });
+          o.textContent = String(JSON.parse(v));
+          select.append(o);
+        }
+        select.value = v;
+      }
+    }
+  }
+  fillOptions(select, def) {
+    const all2 = el("option", "", { value: "" });
+    all2.textContent = this.grid.store.state.locale.selectAll;
+    const opts = this.distinct(def).map((v) => {
+      const o = el("option", "", { value: JSON.stringify(v) });
+      o.textContent = v === true ? "\u2713" : v === false ? "\u2717" : String(v);
+      return o;
+    });
+    select.replaceChildren(all2, ...opts);
+  }
+  cell(c, h) {
+    const cell = el("div", "fg-filter-cell");
+    cell.style.left = `${c.left}px`;
+    cell.style.width = `${c.width}px`;
+    cell.style.height = `${h}px`;
+    const type = isSystemCol(c.id) ? null : filterTypeOf(c.def);
+    if (!type) return cell;
+    const loc = this.grid.store.state.locale;
+    const label = `${loc.filter}: ${c.def.header ?? c.def.field ?? c.id}`;
+    if (type === "set") {
+      const select = el("select", "fg-filter-input", { "aria-label": label });
+      select.dataset.col = c.id;
+      this.fillOptions(select, c.def);
+      select.addEventListener("change", () => {
+        this.grid.setFilter(c.id, select.value ? { type: "set", values: [JSON.parse(select.value)] } : null);
+      });
+      cell.append(select);
+      return cell;
+    }
+    const input = el("input", "fg-filter-input", { type: "text", "aria-label": label, spellcheck: "false", autocomplete: "off" });
+    input.dataset.col = c.id;
+    if (type === "number") input.placeholder = ">0, 10~20";
+    if (type === "date") input.placeholder = ">2026-01-01";
+    const apply = () => {
+      const model = parseFilterText(type, input.value);
+      input.classList.toggle("fg-filter-bad", model === void 0);
+      if (model === void 0) return;
+      this.grid.setFilter(c.id, model);
+    };
+    input.addEventListener("input", () => {
+      clearTimeout(this.timers.get(c.id));
+      this.timers.set(c.id, window.setTimeout(apply, 200));
+    });
+    input.addEventListener("keydown", (e) => {
+      e.stopPropagation();
+      if (e.key === "Enter") {
+        clearTimeout(this.timers.get(c.id));
+        apply();
+      } else if (e.key === "Escape") {
+        input.value = "";
+        clearTimeout(this.timers.get(c.id));
+        apply();
+      }
+    });
+    cell.append(input);
+    return cell;
+  }
+  /** Values for a set box: distinct, sorted, at most 200. */
+  distinct(def) {
+    const seen2 = /* @__PURE__ */ new Map();
+    for (const row of this.grid.store.state.data) {
+      const v = getCellValue(def, row);
+      if (v === null || v === void 0 || v === "") continue;
+      const k = JSON.stringify(v);
+      if (!seen2.has(k)) seen2.set(k, v);
+      if (seen2.size >= 200) break;
+    }
+    return [...seen2.values()].sort((a, b) => String(a).localeCompare(String(b)));
+  }
+  setTransform(x) {
+    this.inners.center.style.transform = `translateX(${-x}px)`;
+  }
+  destroy() {
+    for (const t of this.timers.values()) clearTimeout(t);
+    for (const r of REGIONS2) this.inners[r].remove();
+  }
+};
+
+// src/rows/filters.ts
+function isBlank(v) {
+  return v == null || typeof v === "string" && v.trim() === "" || typeof v === "number" && Number.isNaN(v);
+}
+var pad = (n) => String(n).padStart(2, "0");
+function toDateKey2(v) {
+  if (isBlank(v)) return null;
+  if (typeof v === "string" && /^\d{4}-\d{2}-\d{2}$/.test(v)) return v;
+  const d = v instanceof Date ? v : new Date(v);
+  if (Number.isNaN(d.getTime())) return null;
+  return `${d.getFullYear()}-${pad(d.getMonth() + 1)}-${pad(d.getDate())}`;
+}
+function setKey(v) {
+  if (isBlank(v)) return "";
+  if (v instanceof Date) return toDateKey2(v) ?? "";
+  return String(v);
+}
+var all = () => true;
+function buildPredicate(model) {
+  switch (model.type) {
+    case "combined": {
+      const parts = (Array.isArray(model.conditions) ? model.conditions : []).map(buildPredicate);
+      if (!parts.length) return all;
+      return model.operator === "or" ? (v) => parts.some((p) => p(v)) : (v) => parts.every((p) => p(v));
+    }
+    case "text": {
+      const q = (model.value ?? "").toLowerCase();
+      const s = (v) => isBlank(v) ? "" : String(v).toLowerCase();
+      switch (model.op) {
+        case "contains":
+          return (v) => s(v).includes(q);
+        case "equals":
+          return (v) => s(v) === q;
+        case "notEquals":
+          return (v) => s(v) !== q;
+        case "startsWith":
+          return (v) => s(v).startsWith(q);
+        case "endsWith":
+          return (v) => s(v).endsWith(q);
+        case "blank":
+          return isBlank;
+        case "notBlank":
+          return (v) => !isBlank(v);
+      }
+      return all;
+    }
+    case "number": {
+      const n = (v) => isBlank(v) ? NaN : Number(v);
+      if (model.op === "blank") return (v) => Number.isNaN(n(v));
+      if (model.op === "notBlank") return (v) => !Number.isNaN(n(v));
+      const a = model.value;
+      if (a == null || Number.isNaN(a)) return all;
+      switch (model.op) {
+        case "eq":
+          return (v) => n(v) === a;
+        case "ne":
+          return (v) => n(v) !== a;
+        case "lt":
+          return (v) => n(v) < a;
+        case "lte":
+          return (v) => n(v) <= a;
+        case "gt":
+          return (v) => n(v) > a;
+        case "gte":
+          return (v) => n(v) >= a;
+        case "between": {
+          const b = model.valueTo;
+          if (b == null || Number.isNaN(b)) return all;
+          const lo = Math.min(a, b), hi = Math.max(a, b);
+          return (v) => {
+            const x = n(v);
+            return x >= lo && x <= hi;
+          };
+        }
+      }
+      return all;
+    }
+    case "date": {
+      if (model.op === "blank") return (v) => toDateKey2(v) === null;
+      if (model.op === "notBlank") return (v) => toDateKey2(v) !== null;
+      const a = model.value;
+      if (!a) return all;
+      const k = (v) => toDateKey2(v);
+      switch (model.op) {
+        case "equals":
+          return (v) => k(v) === a;
+        case "before":
+          return (v) => {
+            const x = k(v);
+            return x !== null && x < a;
+          };
+        case "after":
+          return (v) => {
+            const x = k(v);
+            return x !== null && x > a;
+          };
+        case "between": {
+          const b = model.valueTo;
+          if (!b) return all;
+          const lo = a < b ? a : b, hi = a < b ? b : a;
+          return (v) => {
+            const x = k(v);
+            return x !== null && x >= lo && x <= hi;
+          };
+        }
+      }
+      return all;
+    }
+    case "set": {
+      const allowed = new Set(model.values.map(setKey));
+      return (v) => allowed.has(setKey(v));
+    }
+  }
+  return all;
+}
+function quickTokens(q) {
+  const t = q.trim().toLowerCase();
+  return t ? t.split(/\s+/) : [];
+}
+function matchesQuick(tokens, text2) {
+  return tokens.every((t) => text2.includes(t));
+}
+function buildAdvanced(f, columnDef, valueOf) {
+  const parts = [];
+  for (const c of Array.isArray(f?.conditions) ? f.conditions : []) {
+    if (!c || typeof c !== "object") continue;
+    if ("conditions" in c) {
+      const sub = buildAdvanced(c, columnDef, valueOf);
+      if (sub) parts.push(sub);
+      continue;
+    }
+    const def = columnDef(c.colId);
+    if (!def || !c.model) continue;
+    const pred = buildPredicate(c.model);
+    parts.push((row) => pred(valueOf(def, row)));
+  }
+  if (!parts.length) return null;
+  return f.operator === "or" ? (row) => parts.some((p) => p(row)) : (row) => parts.every((p) => p(row));
+}
+
+// src/i18n/format.ts
+var cache = /* @__PURE__ */ new Map();
+function parseNumberPattern(p) {
+  if (p === "integer") return { maximumFractionDigits: 0 };
+  if (p === "percent") return { style: "percent" };
+  if (p.startsWith("currency:")) return { style: "currency", currency: p.slice(9) };
+  if (!/^[#0,]*(\.[#0]+)?%?$/.test(p) || !/[#0]/.test(p)) return null;
+  const pct = p.endsWith("%");
+  const body = pct ? p.slice(0, -1) : p;
+  const frac = body.includes(".") ? body.split(".")[1] : "";
+  return {
+    useGrouping: body.includes(","),
+    minimumFractionDigits: (frac.match(/0/g) ?? []).length,
+    maximumFractionDigits: frac.length,
+    ...pct ? { style: "percent" } : {}
+  };
+}
+var DATE_PRESETS = {
+  date: { year: "numeric", month: "2-digit", day: "2-digit" },
+  datetime: { year: "numeric", month: "2-digit", day: "2-digit", hour: "2-digit", minute: "2-digit" },
+  time: { hour: "2-digit", minute: "2-digit" },
+  short: { dateStyle: "short" },
+  medium: { dateStyle: "medium" },
+  long: { dateStyle: "long" }
+};
+function toDate(v) {
+  if (isBlank(v)) return null;
+  if (v instanceof Date) return Number.isNaN(v.getTime()) ? null : v;
+  if (typeof v === "string") {
+    const m = /^(\d{4})-(\d{2})-(\d{2})$/.exec(v);
+    if (m) return new Date(Number(m[1]), Number(m[2]) - 1, Number(m[3]));
+  }
+  if (typeof v !== "string" && typeof v !== "number") return null;
+  const d = new Date(v);
+  return Number.isNaN(d.getTime()) ? null : d;
+}
+function create(type, format, locale) {
+  switch (type) {
+    case "number": {
+      let opts = {};
+      if (typeof format === "string") {
+        const parsed = parseNumberPattern(format);
+        if (!parsed) warn(`unknown number format "${format}"`);
+        opts = parsed ?? {};
+      } else if (format) opts = format;
+      const nf = new Intl.NumberFormat(locale, opts);
+      return (v) => {
+        if (isBlank(v)) return "";
+        const n = typeof v === "number" ? v : Number(v);
+        return Number.isNaN(n) ? String(v) : nf.format(n);
+      };
+    }
+    case "date": {
+      if (locale.toLowerCase().startsWith("ko") && (format === void 0 || format === "date" || format === "datetime")) {
+        const pad3 = (n) => String(n).padStart(2, "0");
+        const withTime = format === "datetime";
+        return (v) => {
+          const d = toDate(v);
+          if (!d) return isBlank(v) ? "" : String(v);
+          const day = `${d.getFullYear()}-${pad3(d.getMonth() + 1)}-${pad3(d.getDate())}`;
+          return withTime ? `${day} ${pad3(d.getHours())}:${pad3(d.getMinutes())}` : day;
+        };
       }
-      const fn = Object.hasOwn(FUNCS, upper) ? FUNCS[upper] : void 0;
-      if (!fn) throw new FormulaError("#NAME?");
-      return fn(args);
+      let opts = DATE_PRESETS.date;
+      if (typeof format === "string") {
+        if (!DATE_PRESETS[format]) warn(`unknown date format "${format}"`);
+        opts = DATE_PRESETS[format] ?? DATE_PRESETS.date;
+      } else if (format) opts = format;
+      const df = new Intl.DateTimeFormat(locale, opts);
+      return (v) => {
+        const d = toDate(v);
+        return d ? df.format(d) : isBlank(v) ? "" : String(v);
+      };
     }
-    if (/^(true|false)$/i.test(name)) return name.toLowerCase() === "true";
-    return this.resolve(name);
-  }
-};
-var MAX_DEPTH = 32;
-function evaluateFormula(formula, row, seen2 = /* @__PURE__ */ new Set(), depth = 0) {
-  try {
-    const resolve = (name) => {
-      if (!row || !Object.hasOwn(row, name)) throw new FormulaError("#REF!");
-      const v2 = row[name];
-      if (typeof v2 === "string" && v2.startsWith("=")) {
-        if (seen2.has(name) || depth >= MAX_DEPTH) throw new FormulaError("#CYCLE!");
-        const r = evaluateFormula(v2, row, /* @__PURE__ */ new Set([...seen2, name]), depth + 1);
-        if (typeof r === "string" && /^#[A-Z/0]+[!?]$/.test(r)) throw new FormulaError(r);
-        return r;
-      }
-      return v2;
-    };
-    const v = new Parser(tokenize(formula.slice(1)), resolve).parse();
-    if (typeof v === "number" && !Number.isFinite(v)) return "#NUM!";
-    return v;
-  } catch (e) {
-    return e instanceof FormulaError ? e.code : "#ERROR!";
+    case "boolean":
+      return (v) => v === true ? "\u2713" : v === false ? "\u2717" : "";
+    default:
+      return (v) => isBlank(v) ? "" : v instanceof Date ? v.toISOString() : String(v);
   }
 }
-var isFormula = (v) => typeof v === "string" && v.length > 1 && v.startsWith("=");
-
-// src/rows/values.ts
-function getCellValue(def, row) {
-  if (def.valueGetter) {
-    try {
-      return def.valueGetter(row);
-    } catch {
-      warn(`valueGetter of column "${def.id ?? def.field}" threw; rendering an empty cell`);
-      return void 0;
-    }
+function getFormatter(def, locale) {
+  if (def.sparkline) return (v) => Array.isArray(v) ? v.join(", ") : v == null ? "" : String(v);
+  const f = def.format;
+  const key = `${locale}|${def.type ?? "text"}|${typeof f === "string" ? f : JSON.stringify(f ?? null)}`;
+  let fmt = cache.get(key);
+  if (!fmt) {
+    fmt = create(def.type, f, locale);
+    cache.set(key, fmt);
   }
-  if (def.field == null) return void 0;
-  const raw = row[def.field];
-  return def.formulas && isFormula(raw) ? evaluateFormula(raw, row, /* @__PURE__ */ new Set([def.field])) : raw;
+  return fmt;
 }
 
 // src/summary.ts
@@ -871,7 +1147,7 @@ function rowRangeByOffsets(offsets, scrollTop, height, count, overscan = 4) {
 }
 
 // src/render/renderer.ts
-var REGIONS2 = ["left", "center", "right"];
+var REGIONS3 = ["left", "center", "right"];
 var ROW_OVERSCAN = 6;
 var MAX_COLSPAN_REACH = 8;
 var COL_OVERSCAN = 2;
@@ -888,6 +1164,8 @@ var Renderer = class {
   constructor(host, grid, opts) {
     this.grid = grid;
     this.opts = opts;
+    /** Boxes under the header (filterRow option). */
+    this.filterRow = null;
     this.activeCellId = "";
     this.idBase = `fg${Math.random().toString(36).slice(2, 8)}`;
     this.painted = { left: /* @__PURE__ */ new Map(), center: /* @__PURE__ */ new Map(), right: /* @__PURE__ */ new Map() };
@@ -935,6 +1213,8 @@ var Renderer = class {
       e.preventDefault();
       this.scroller.scrollTop += e.deltaY;
     };
+    this.overlayKey = "";
+    this.heightFn = null;
     this.onCardClick = (e) => {
       const target = e.target;
       const card = target.closest(".fg-card");
@@ -964,10 +1244,10 @@ var Renderer = class {
     });
     this.headerPanes = panes("fg-header-pane");
     this.headerInners = panes("fg-header-inner");
-    for (const r of REGIONS2) this.headerInners[r].setAttribute("role", "row");
+    for (const r of REGIONS3) this.headerInners[r].setAttribute("role", "row");
     this.bodyPanes = panes("fg-body-pane");
     this.canvases = panes("fg-canvas");
-    for (const r of REGIONS2) {
+    for (const r of REGIONS3) {
       this.headerPanes[r].dataset.region = r;
       this.bodyPanes[r].dataset.region = r;
       this.headerPanes[r].append(this.headerInners[r]);
@@ -976,6 +1256,7 @@ var Renderer = class {
       this.bodyEl.append(this.bodyPanes[r]);
     }
     this.scroller = this.bodyPanes.center;
+    if (grid.options.filterRow) this.filterRow = new FilterRow(grid, this.headerPanes);
     this.overlay = el("div", "fg-overlay", { "aria-live": "polite" });
     this.main = el("div", "fg-main");
     this.gridEl.append(this.headerEl, this.bodyEl);
@@ -1008,7 +1289,7 @@ var Renderer = class {
   }
   applyTheme() {
     const rtl = this.grid.options.direction === "rtl";
-    this.root.className = `fg-root fg-theme-${this.grid.store.state.theme}${rtl ? " fg-rtl" : ""}${this.cardMode ? " fg-card-mode" : ""}`;
+    this.root.className = `fg-root fg-theme-${this.grid.store.state.theme}${rtl ? " fg-rtl" : ""}${this.cardMode ? " fg-card-mode" : ""}${this.grid.density !== "normal" ? ` fg-density-${this.grid.density}` : ""}`;
     this.root.setAttribute("dir", rtl ? "rtl" : "ltr");
   }
   /** Right-to-left layout: the main area is mirrored, so screen deltas along x flip sign. */
@@ -1037,7 +1318,7 @@ var Renderer = class {
     }
     const count = rowModel.getRowCount();
     const auto = !!this.grid.options.autoRowHeight && !rowModel.server;
-    const lay = rowModel.layout(rh, this.detailHeight(), auto ? this.rowHeights : void 0, this.heightsVersion);
+    const lay = rowModel.layout(rh, this.detailHeight(), auto ? this.rowHeights : void 0, this.heightsVersion, rowModel.server ? void 0 : this.heightOf);
     this.offsets = lay.uniform ? null : lay.offsets;
     this.firstDataId = columns.displayed().find((c) => !isSystemCol(c.id))?.id ?? "";
     this.groupLabelId = columns.region("center").find((c) => !isSystemCol(c.id))?.id ?? this.firstDataId;
@@ -1046,8 +1327,7 @@ var Renderer = class {
       this.renderStatusBar(rowModel.dataCount());
       this.renderPager();
       this.orderSections(null);
-      this.overlay.hidden = count > 0;
-      this.overlay.textContent = count === 0 && rowModel.loading() ? store.state.locale.loading : store.state.locale.noRows;
+      this.paintOverlay(count);
       return;
     }
     const summary = this.grid.summary();
@@ -1057,9 +1337,9 @@ var Renderer = class {
     this.topOffset = summary && !sumPinned && sumPos === "top" ? sumRows * rh : 0;
     const bottomExtra = summary && !sumPinned && sumPos === "bottom" ? sumRows * rh : 0;
     this.syncSummaryPane(summary && sumPinned ? sumPos : null, sumRows * rh);
-    const headerHeight = columns.depth * hh;
+    const headerHeight = columns.depth * hh + (this.filterRow?.height ?? 0);
     this.headerEl.style.height = `${headerHeight}px`;
-    for (const r of REGIONS2) {
+    for (const r of REGIONS3) {
       const w = columns.regionWidth(r);
       if (r !== "center") {
         this.headerPanes[r].style.width = this.bodyPanes[r].style.width = `${w}px`;
@@ -1068,17 +1348,22 @@ var Renderer = class {
       this.canvases[r].style.width = `${w}px`;
       this.canvases[r].style.height = `${this.rowsHeight(count) + this.topOffset + bottomExtra}px`;
     }
+    if (options.autoHeight && !this.useCards()) {
+      this.root.classList.add("fg-auto-height");
+      this.bodyEl.style.height = `${this.rowsHeight(count) + this.topOffset + bottomExtra + Math.max(0, this.scroller.offsetHeight - this.scroller.clientHeight)}px`;
+    }
     const hScrollbar = this.scroller.offsetHeight - this.scroller.clientHeight;
     this.bodyPanes.left.style.marginBottom = this.bodyPanes.right.style.marginBottom = `${hScrollbar}px`;
     const g = this.gridEl;
     g.setAttribute("role", options.treeData || this.grid.getGroupBy().length ? "treegrid" : "grid");
-    g.setAttribute("aria-rowcount", String(count + columns.depth));
+    g.setAttribute("aria-rowcount", String(count + columns.depth + (this.filterRow ? 1 : 0)));
     g.setAttribute("aria-colcount", String(columns.displayed().length));
     if (options.rowSelection === "multiple") g.setAttribute("aria-multiselectable", "true");
     if (this.headerDirty) {
       this.headerDirty = false;
       this.renderHeader();
     }
+    this.filterRow?.render();
     this.renderRows(count);
     this.updateActiveCell();
     if (auto) this.measureRows();
@@ -1088,12 +1373,12 @@ var Renderer = class {
     this.renderStatusBar(rowModel.dataCount());
     this.renderPager();
     this.orderSections(summary && sumPinned ? sumPos : null);
-    this.overlay.hidden = count > 0;
-    this.overlay.textContent = count === 0 && rowModel.loading() ? store.state.locale.loading : store.state.locale.noRows;
+    this.paintOverlay(count);
     this.overlay.style.top = `${headerHeight}px`;
     const { scrollTop, scrollLeft } = this.scroller;
     this.bodyPanes.left.scrollTop = this.bodyPanes.right.scrollTop = scrollTop;
     this.headerInners.center.style.transform = `translateX(${-scrollLeft}px)`;
+    this.filterRow?.setTransform(scrollLeft);
     if (this.summaryInners) this.summaryInners.center.style.transform = `translateX(${-scrollLeft}px)`;
     for (const s of [this.pinnedTop, this.pinnedBottom]) if (s) s.inners.center.style.transform = `translateX(${-scrollLeft}px)`;
     this.grid.fillHandle.update();
@@ -1120,6 +1405,37 @@ var Renderer = class {
       ref = b;
     }
   }
+  /** "No rows" / "Loading" over the body, or the noRowsOverlay / loadingOverlay given in the options. */
+  paintOverlay(count) {
+    const { grid } = this;
+    const { store, rowModel, options } = grid;
+    const kind = grid.forcedOverlay ?? (count > 0 ? null : rowModel.loading() ? "loading" : "noRows");
+    this.overlay.hidden = !kind;
+    if (!kind) {
+      this.overlayKey = "";
+      return;
+    }
+    const filtered = !rowModel.server && store.state.data.length > 0;
+    const custom = kind === "loading" ? options.loadingOverlay : options.noRowsOverlay;
+    const key = `${kind}|${filtered}|${store.state.locale.code}`;
+    if (key === this.overlayKey) return;
+    this.overlayKey = key;
+    this.overlay.classList.toggle("fg-overlay-custom", typeof custom === "function");
+    if (custom === void 0 || custom === null) {
+      this.overlay.textContent = kind === "loading" ? store.state.locale.loading : store.state.locale.noRows;
+    } else if (typeof custom === "string") {
+      this.overlay.textContent = custom;
+    } else {
+      try {
+        const out = custom({ filtered });
+        if (typeof out === "string") this.overlay.textContent = out;
+        else this.overlay.replaceChildren(out);
+      } catch {
+        warn(`${kind === "loading" ? "loadingOverlay" : "noRowsOverlay"} threw`);
+        this.overlay.textContent = kind === "loading" ? store.state.locale.loading : store.state.locale.noRows;
+      }
+    }
+  }
   /** Point aria-activedescendant at the focused cell so screen readers announce it. */
   updateActiveCell() {
     const prev = this.activeCellId ? this.root.getRootNode().getElementById?.(this.activeCellId) ?? null : null;
@@ -1145,7 +1461,7 @@ var Renderer = class {
     s.size(columns, rows.length * rh, this.scroller.offsetWidth - this.scroller.clientWidth);
     const center = columns.region("center");
     const cr = colRange(center.map((c) => c.left), center.map((c) => c.width), this.scroller.scrollLeft, this.scroller.clientWidth, COL_OVERSCAN);
-    for (const r of REGIONS2) {
+    for (const r of REGIONS3) {
       const cols = r === "center" ? center.slice(cr.first, cr.last + 1) : columns.region(r);
       s.inners[r].replaceChildren(...rows.map((data, k) => {
         const rowEl = el("div", "fg-row fg-row-pinned", { role: "row" });
@@ -1195,7 +1511,7 @@ var Renderer = class {
   renderHeader() {
     const { columns, store } = this.grid;
     const { sort, filters, locale } = store.state;
-    for (const r of REGIONS2) {
+    for (const r of REGIONS3) {
       const inner = this.headerInners[r];
       inner.style.width = `${columns.regionWidth(r)}px`;
       inner.style.height = `${columns.depth * this.opts.headerHeight}px`;
@@ -1211,6 +1527,10 @@ var Renderer = class {
     cell.style.width = `${c.width}px`;
     cell.style.height = `${c.rowSpan * hh}px`;
     if (isSystemCol(c.id)) {
+      if (c.id === ROWNUM_COL_ID) {
+        cell.classList.add("fg-header-rownum");
+        cell.textContent = c.label;
+      }
       if (c.id === SELECT_COL_ID) {
         cell.classList.add("fg-header-select");
         cell.append(this.selectAllBox(locale));
@@ -1230,6 +1550,23 @@ var Renderer = class {
         label.textContent = c.label;
       }
     }
+    let toggleEl = null;
+    if (c.isGroup && this.grid.columns.isCollapsible(c.node)) {
+      const open = c.node.open;
+      const t = el("button", open ? "fg-colgroup-toggle fg-expanded" : "fg-colgroup-toggle", {
+        type: "button",
+        tabindex: "-1",
+        "aria-expanded": String(open),
+        "aria-label": open ? locale.collapseAll : locale.expandAll
+      });
+      t.textContent = open ? "\u2212" : "+";
+      t.addEventListener("click", (e) => {
+        e.stopPropagation();
+        this.grid.setColumnGroupOpened(c.id, !open);
+      });
+      cell.classList.add("fg-header-collapsible");
+      toggleEl = t;
+    }
     if (hdef.headerClass) {
       try {
         const extra = typeof hdef.headerClass === "function" ? hdef.headerClass(hdef) : hdef.headerClass;
@@ -1239,6 +1576,7 @@ var Renderer = class {
       }
     }
     cell.append(label);
+    if (toggleEl) cell.append(toggleEl);
     if (c.isGroup || !c.column) return cell;
     const def = c.node.def;
     if (def.wrapHeaderText ?? this.grid.options.wrapHeaderText) cell.classList.add("fg-header-wrap");
@@ -1283,12 +1621,12 @@ var Renderer = class {
     const allBounds = this.grid.allRangeBounds();
     const spans = this.grid.mergeSpans();
     const top = Math.max(0, this.scroller.scrollTop - this.topOffset);
-    const range = this.offsets ? rowRangeByOffsets(this.offsets, top, this.scroller.clientHeight, count, ROW_OVERSCAN) : rowRange(top, this.scroller.clientHeight, this.opts.rowHeight, count, ROW_OVERSCAN);
+    const range = this.grid.options.autoHeight && !rowModel.server ? { first: 0, last: count - 1 } : this.offsets ? rowRangeByOffsets(this.offsets, top, this.scroller.clientHeight, count, ROW_OVERSCAN) : rowRange(top, this.scroller.clientHeight, this.opts.rowHeight, count, ROW_OVERSCAN);
     this.lastRange = range;
     const center = columns.region("center");
     const cr = colRange(center.map((c) => c.left), center.map((c) => c.width), this.scroller.scrollLeft, this.scroller.clientWidth, COL_OVERSCAN);
     if (center.some((c) => c.def.colSpan)) cr.first = Math.max(0, cr.first - MAX_COLSPAN_REACH);
-    for (const r of REGIONS2) {
+    for (const r of REGIONS3) {
       const cols = r === "center" ? center.slice(cr.first, cr.last + 1) : columns.region(r);
       const map = this.painted[r];
       for (const [i, row] of map) {
@@ -1307,7 +1645,7 @@ var Renderer = class {
         const inRange = hits.map((b) => `${b.c1}-${b.c2}`).join(",");
         const merge2 = this.mergeState(spans, cols, i, range.first);
         const pos = node.kind === "detail" ? `${this.scroller.scrollLeft}:${this.scroller.clientWidth}` : "";
-        const key = `${node.id}|${this.version}|${colKey}|${isSel ? 1 : 0}|${focusCol}|${inRange}|${merge2}|${pos}`;
+        const key = `${node.id}|${this.version}|${colKey}|${isSel ? 1 : 0}${node.kind === "group" ? `:${this.grid.selectionVersion}` : ""}|${focusCol}|${inRange}|${merge2}|${pos}`;
         let row = map.get(i);
         if (!row) {
           const rowEl = this.pool[r].pop() ?? el("div", "fg-row", { role: "row" });
@@ -1342,7 +1680,7 @@ var Renderer = class {
   }
   paintRow(rowEl, node, i, cols, selected, focusCol, bounds, spans = /* @__PURE__ */ new Map(), first = 0) {
     const rh = this.opts.rowHeight;
-    rowEl.className = `fg-row${i % 2 ? " fg-row-odd" : ""}${selected ? " fg-row-selected" : ""}${this.grid.tracker.created.has(node.data) ? " fg-row-created" : ""}`;
+    rowEl.className = `fg-row${i % 2 ? " fg-row-odd" : ""}${selected ? " fg-row-selected" : ""}${this.grid.tracker.created.has(node.data) ? " fg-row-created" : ""}${this.grid.editor.editingRow(node.id) ? " fg-row-editing" : ""}`;
     this.placeRow(rowEl, i);
     if (this.grid.options.rowSelection) rowEl.setAttribute("aria-selected", String(selected));
     if (node.level !== void 0) rowEl.setAttribute("aria-level", String(node.level + 1));
@@ -1396,6 +1734,12 @@ var Renderer = class {
     cell.dataset.col = col.id;
     cell.setAttribute("aria-colindex", String(col.index + 1));
     let cls = focused ? "fg-cell fg-cell-focused" : "fg-cell";
+    if (col.id === ROWNUM_COL_ID) {
+      cell.className = `${cls} fg-cell-rownum`;
+      const n = i >= 0 && !node.kind ? this.grid.rowNumber(i) : null;
+      cell.textContent = n === null ? "" : String(n);
+      return;
+    }
     if (col.id === DRAG_COL_ID) {
       cell.className = `${cls} fg-cell-drag`;
       const handle = el("span", this.grid.canMoveRows() ? "fg-drag-handle" : "fg-drag-handle fg-drag-disabled", { "aria-hidden": "true" });
@@ -1431,7 +1775,15 @@ var Renderer = class {
     if (def.wrapText) cls += " fg-cell-wrap";
     if (typeof def.editable === "function" && i >= 0 && !cellEditable(def, node.data, i)) cls += " fg-cell-readonly";
     if (i >= 0) cls += this.grid.finder.classFor(i, col.id);
+    if (this.grid.isFlashing(node.id, col.id)) cls += " fg-cell-flash";
     cell.className = cls;
+    if (def.sparkline && !def.renderer) {
+      const nums = Array.isArray(value) ? value.map(Number).filter(Number.isFinite) : [];
+      if (nums.length) cell.replaceChildren(sparkline(nums, def.sparkline === true ? {} : def.sparkline, col.width, this.opts.rowHeight));
+      else cell.replaceChildren();
+      cell.setAttribute("aria-label", Array.isArray(value) ? value.join(", ") : "");
+      return;
+    }
     if (!def.renderer) {
       cell.textContent = formatted;
       return;
@@ -1479,14 +1831,14 @@ var Renderer = class {
       this.summaryEl = el("div", "fg-summary", { role: "rowgroup" });
       this.summaryPanes = mk("fg-summary-pane");
       this.summaryInners = mk("fg-summary-inner");
-      for (const r of REGIONS2) {
+      for (const r of REGIONS3) {
         this.summaryPanes[r].append(this.summaryInners[r]);
         this.summaryEl.append(this.summaryPanes[r]);
       }
     }
     this.summaryEl.className = `fg-summary fg-summary-${position}`;
     this.summaryEl.style.height = `${height}px`;
-    for (const r of REGIONS2) {
+    for (const r of REGIONS3) {
       const w = this.grid.columns.regionWidth(r);
       if (r !== "center") {
         this.summaryPanes[r].style.width = `${w}px`;
@@ -1499,7 +1851,7 @@ var Renderer = class {
     this.summaryPanes.center.style.marginRight = `${vScrollbar}px`;
   }
   renderSummary(count, defs, values, pinned, position) {
-    for (const r of REGIONS2) {
+    for (const r of REGIONS3) {
       for (const old of this.canvasSummary[r]) old.remove();
       this.canvasSummary[r] = [];
     }
@@ -1509,7 +1861,7 @@ var Renderer = class {
     const center = columns.region("center");
     const cr = colRange(center.map((c) => c.left), center.map((c) => c.width), this.scroller.scrollLeft, this.scroller.clientWidth, COL_OVERSCAN);
     const dataCols = columns.displayed().filter((c) => !isSystemCol(c.id));
-    for (const r of REGIONS2) {
+    for (const r of REGIONS3) {
       const cols = r === "center" ? center.slice(cr.first, cr.last + 1) : columns.region(r);
       const rowsEls = defs.map((def, k) => {
         const labelCol = def.label != null ? dataCols.find((c) => !(c.id in (def.columns ?? {})))?.id ?? null : null;
@@ -1557,8 +1909,21 @@ var Renderer = class {
     cell.textContent = s.prefix && text2 ? `${s.prefix} ${text2}` : text2;
     return cell;
   }
+  /** getRowHeight, guarded: a throwing function means the default height. */
+  get heightOf() {
+    const fn = this.grid.options.getRowHeight;
+    if (!fn) return void 0;
+    return this.heightFn ?? (this.heightFn = (row) => {
+      try {
+        return fn(row) ?? void 0;
+      } catch {
+        return void 0;
+      }
+    });
+  }
   /** Forget measured row heights (data, widths or fonts changed); rows are measured again on screen. */
   invalidateHeights() {
+    if (this.heightOf) this.heightsVersion++;
     if (!this.rowHeights.size) return;
     this.rowHeights.clear();
     this.heightsVersion++;
@@ -1567,7 +1932,7 @@ var Renderer = class {
   measureRows() {
     const base = this.opts.rowHeight;
     const need = /* @__PURE__ */ new Map();
-    for (const r of REGIONS2) {
+    for (const r of REGIONS3) {
       for (const [i, row] of this.painted[r]) {
         const node = this.grid.rowModel.getRow(i);
         if (!node || node.kind) continue;
@@ -1613,7 +1978,7 @@ var Renderer = class {
     rowEl.style.transform = `translateY(${this.rowTop(i)}px)`;
     rowEl.style.height = `${this.rowH(i)}px`;
     rowEl.dataset.row = String(i);
-    rowEl.setAttribute("aria-rowindex", String(i + 1 + this.grid.columns.depth));
+    rowEl.setAttribute("aria-rowindex", String(i + 1 + this.grid.columns.depth + (this.filterRow ? 1 : 0)));
   }
   /** Tree indentation and chevron, detail toggle, group-leaf indentation in the first data column. */
   decorate(cell, node) {
@@ -1673,6 +2038,19 @@ var Renderer = class {
       cell.dataset.col = col.id;
       cell.setAttribute("aria-colindex", String(col.index + 1));
       const focused = focusCol === col.id ? " fg-cell-focused" : "";
+      if (col.id === SELECT_COL_ID) {
+        cell.className = `fg-cell fg-cell-select${focused}`;
+        if (grid.options.rowSelection !== "multiple") {
+          cell.replaceChildren();
+          return;
+        }
+        const state = grid.groupSelection(node);
+        const box = el("input", "fg-checkbox", { type: "checkbox", tabindex: "-1", "aria-label": loc.selectAllRows });
+        box.checked = state === "all";
+        box.indeterminate = state === "some";
+        cell.replaceChildren(box);
+        return;
+      }
       if (col.id === this.groupLabelId) {
         cell.className = `fg-cell fg-group-cell${focused}`;
         cell.style.setProperty("--fg-level", String(node.level ?? 0));
@@ -1687,7 +2065,8 @@ var Renderer = class {
         const label = el("span", "fg-group-label");
         const value2 = isBlank(g.value) ? loc.blanks : def2 ? getFormatter(def2, loc.code)(g.value) : String(g.value);
         const nf = new Intl.NumberFormat(loc.code);
-        label.textContent = `${def2?.header ?? def2?.field ?? g.colId}: ${value2} (${nf.format(g.rows.length)})`;
+        const count = g.count ?? (g.aggregates ? null : g.rows.length);
+        label.textContent = `${def2?.header ?? def2?.field ?? g.colId}: ${value2}${count == null ? "" : ` (${nf.format(count)})`}`;
         cell.replaceChildren(toggle, label);
         return;
       }
@@ -1936,6 +2315,7 @@ var Renderer = class {
     return Math.max(1, Math.floor(this.scroller.clientHeight / this.opts.rowHeight));
   }
   destroy() {
+    this.filterRow?.destroy();
     if (this.frame) cancelAnimationFrame(this.frame);
     this.scroller.removeEventListener("scroll", this.onScroll);
     this.root.remove();
@@ -1951,14 +2331,14 @@ var Section = class {
     this.el = el("div", cls, { role: "rowgroup" });
     this.panes = mk("fg-section-pane");
     this.inners = mk("fg-section-inner");
-    for (const r of REGIONS2) {
+    for (const r of REGIONS3) {
       this.panes[r].append(this.inners[r]);
       this.el.append(this.panes[r]);
     }
   }
   size(columns, height, vScrollbar) {
     this.el.style.height = `${height}px`;
-    for (const r of REGIONS2) {
+    for (const r of REGIONS3) {
       const w = columns.regionWidth(r);
       if (r !== "center") {
         this.panes[r].style.width = `${w}px`;
@@ -1970,6 +2350,44 @@ var Section = class {
     this.panes.center.style.marginRight = `${vScrollbar}px`;
   }
 };
+var SVG_NS = "http://www.w3.org/2000/svg";
+function sparkline(nums, opt, width, rowHeight) {
+  const w = Math.max(20, width - 16), h = Math.max(10, rowHeight - 14);
+  const svgEl = document.createElementNS(SVG_NS, "svg");
+  svgEl.setAttribute("class", "fg-sparkline");
+  svgEl.setAttribute("width", String(w));
+  svgEl.setAttribute("height", String(h));
+  svgEl.setAttribute("viewBox", `0 0 ${w} ${h}`);
+  svgEl.setAttribute("aria-hidden", "true");
+  const color = opt.color ?? "var(--fg-accent)";
+  const bars = opt.type === "bar";
+  let min = bars ? Math.min(0, ...nums) : Math.min(...nums);
+  let max = bars ? Math.max(0, ...nums) : Math.max(...nums);
+  if (min === max) {
+    min -= 1;
+    max += 1;
+  }
+  const span = max - min;
+  const y = (v) => h - 1 - (v - min) / span * (h - 2);
+  const mk = (tag, attrs) => {
+    const n = document.createElementNS(SVG_NS, tag);
+    for (const [k, v] of Object.entries(attrs)) n.setAttribute(k, String(v));
+    svgEl.append(n);
+    return n;
+  };
+  if (opt.type === "bar") {
+    const bw = w / nums.length;
+    nums.forEach((v, i) => mk("rect", { x: i * bw + 1, y: Math.min(y(v), y(0)), width: Math.max(1, bw - 2), height: Math.max(1, Math.abs(y(v) - y(0))), fill: v < 0 ? "#ef4444" : color }));
+    return svgEl;
+  }
+  const step = nums.length > 1 ? (w - 2) / (nums.length - 1) : 0;
+  const pts = nums.map((v, i) => `${1 + i * step},${y(v)}`).join(" ");
+  if (opt.type === "area") mk("polygon", { points: `1,${h} ${pts} ${1 + (nums.length - 1) * step},${h}`, fill: color, "fill-opacity": 0.2 });
+  mk("polyline", { points: pts, fill: "none", stroke: color, "stroke-width": 1.5, "stroke-linejoin": "round" });
+  const last = nums.length - 1;
+  mk("circle", { cx: 1 + last * step, cy: y(nums[last]), r: 2, fill: color });
+  return svgEl;
+}
 
 // src/interactions/groupPanel.ts
 var DRAG_THRESHOLD = 4;
@@ -2119,11 +2537,16 @@ var en = {
   hideColumn: "Hide column",
   close: "Close",
   copy: "Copy",
+  cut: "Cut",
   copyWithHeaders: "Copy with headers",
   paste: "Paste",
   pasteHint: "Clipboard access was blocked. Press Ctrl+V to paste.",
   required: "This field is required",
   invalidValue: "Invalid value",
+  and: "And",
+  or: "Or",
+  advancedFilter: "Advanced filter",
+  addCondition: "Add condition",
   duplicate: "This value is already used",
   undo: "Undo",
   redo: "Redo",
@@ -2171,6 +2594,9 @@ var en = {
   chartLine: "Line chart",
   chartArea: "Area chart",
   chartPie: "Pie chart",
+  chartDonut: "Donut chart",
+  chartCombo: "Bar and line chart",
+  chartScatter: "Scatter chart",
   freeBadge: "Free version",
   ops: {
     contains: "Contains",
@@ -2202,7 +2628,11 @@ function matchCode(tag) {
   const lower = tag.toLowerCase();
   for (const k of registry.keys()) if (k.toLowerCase() === lower) return k;
   const lang = lower.split("-")[0];
-  if (lang === "zh" && registry.has("zh-CN")) return "zh-CN";
+  if (lang === "zh") {
+    const traditional = /-(tw|hk|mo|hant)(-|$)/.test(lower);
+    if (traditional && registry.has("zh-TW")) return "zh-TW";
+    if (registry.has("zh-CN")) return "zh-CN";
+  }
   for (const k of registry.keys()) if (k.toLowerCase().split("-")[0] === lang) return k;
   return void 0;
 }
@@ -2344,6 +2774,9 @@ function attachBody(grid) {
     const before = grid.store.state.focus;
     const hit = renderer.cellAt(e.target);
     if (hit && grid.rowModel.getRow(hit.rowIndex)?.kind) {
+      if (hit.colId === SELECT_COL_ID && grid.rowModel.getRow(hit.rowIndex).kind === "group") {
+        grid.toggleGroupSelection(grid.rowModel.getRow(hit.rowIndex));
+      }
       renderer.gridEl.focus({ preventScroll: true });
       grid.setFocus(hit.rowIndex, hit.colId);
       grid.setRange(null);
@@ -2352,6 +2785,14 @@ function attachBody(grid) {
     const ev = toEvent(e);
     if (!ev) return;
     renderer.gridEl.focus({ preventScroll: true });
+    if (ev.colId === ROWNUM_COL_ID) {
+      const data = grid.columns.displayed().filter((c) => !isSystemCol(c.id));
+      if (data.length) {
+        grid.setFocus(ev.rowIndex, data[0].id);
+        grid.setRange({ start: { rowIndex: ev.rowIndex, colId: data[0].id }, end: { rowIndex: ev.rowIndex, colId: data[data.length - 1].id } });
+      }
+      return;
+    }
     const dragged = suppressClick;
     suppressClick = false;
     const prev = grid.store.state.focus;
@@ -2418,6 +2859,9 @@ function attachBody(grid) {
       case "copy":
         grid.copyToClipboard(false);
         return true;
+      case "cut":
+        grid.cutToClipboard();
+        return true;
       case "selectAll":
         grid.selectAllCells();
         return true;
@@ -2653,6 +3097,14 @@ function attachBody(grid) {
     e.clipboardData.setData("text/plain", text2);
     e.preventDefault();
   };
+  const onCut = (e) => {
+    if (fromField(e) || nested(e)) return;
+    const text2 = grid.selectionTSV(false);
+    if (!text2 || !e.clipboardData) return;
+    e.clipboardData.setData("text/plain", text2);
+    e.preventDefault();
+    grid.clearCells(true);
+  };
   const onPaste = (e) => {
     if (fromField(e) || nested(e)) return;
     const text2 = e.clipboardData?.getData("text/plain");
@@ -2666,6 +3118,7 @@ function attachBody(grid) {
   root.addEventListener("keydown", onKeyDown);
   root.addEventListener("copy", onCopy);
   root.addEventListener("paste", onPaste);
+  root.addEventListener("cut", onCut);
   return () => {
     body.removeEventListener("click", onClick);
     body.removeEventListener("dblclick", onDblClick);
@@ -2673,6 +3126,7 @@ function attachBody(grid) {
     root.removeEventListener("keydown", onKeyDown);
     root.removeEventListener("copy", onCopy);
     root.removeEventListener("paste", onPaste);
+    root.removeEventListener("cut", onCut);
   };
 }
 
@@ -3147,6 +3601,8 @@ var ContextMenu = class {
     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) }] : [],
       { label: loc.paste, shortcut: shortcut("V"), action: () => this.pasteFromClipboard() }
     ];
@@ -3186,6 +3642,7 @@ var ContextMenu = class {
       { label: loc.exportCsv, action: () => grid.api.exportCsv() },
       { label: loc.exportExcel, action: () => grid.api.exportXlsx() }
     );
+    if (grid.options.advancedFilter !== false && !grid.options.pivot) items.push("separator", { label: `${loc.advancedFilter}\u2026`, action: () => grid.filterBuilder.open() });
     return items;
   }
   pasteFromClipboard() {
@@ -3532,7 +3989,7 @@ function fillSeries(source, count) {
       const asDate = source[source.length - 1] instanceof Date;
       return Array.from({ length: count }, (_, i) => {
         const d = new Date(lastDate.getFullYear(), lastDate.getMonth(), lastDate.getDate() + step * (i + 1));
-        return asDate ? d : toDateKey(d);
+        return asDate ? d : toDateKey2(d);
       });
     }
     return repeat();
@@ -3616,13 +4073,14 @@ function parseDelimited(text2, sep) {
 }
 function copyValue(def, value, locale) {
   if (isBlank(value)) return "";
+  if (Array.isArray(value)) return value.join(", ");
   switch (def.type) {
     case "number": {
       const n = typeof value === "number" ? value : Number(value);
       return Number.isNaN(n) ? String(value) : String(n);
     }
     case "date":
-      return toDateKey(value) ?? String(value);
+      return toDateKey2(value) ?? String(value);
     case "boolean":
       return value === true ? "TRUE" : value === false ? "FALSE" : String(value);
     default:
@@ -3661,7 +4119,7 @@ function parseDate(text2, previous) {
   else if (m = /^(\d{1,2})\/(\d{1,2})\/(\d{4})$/.exec(s)) date = validDate(+m[3], +m[1], +m[2]);
   else if (/^\d{4}-\d{2}-\d{2}T/.test(s)) date = toDate(s);
   if (!date) return { ok: false };
-  return { ok: true, value: previous instanceof Date ? date : toDateKey(date) };
+  return { ok: true, value: previous instanceof Date ? date : toDateKey2(date) };
 }
 function parseValue(def, text2, previous) {
   switch (def.type) {
@@ -3698,6 +4156,50 @@ var CellEditor = class {
   constructor(grid) {
     this.grid = grid;
     this.cur = null;
+    /** editType 'row': the row being edited and its values before the first change. */
+    this.session = null;
+    grid.events.on("focusChange", ({ rowIndex }) => {
+      if (this.session && !this.cur && this.grid.rowModel.getRow(rowIndex)?.data !== this.session.row) this.endRow(true);
+    });
+  }
+  get rowMode() {
+    return this.grid.options.editType === "row";
+  }
+  /** Is this row id being edited as a whole row? */
+  editingRow(id) {
+    return this.session?.id === id;
+  }
+  beginRow(row, rowIndex) {
+    if (this.session?.row === row) return;
+    if (this.session) this.endRow(true);
+    this.session = { row, id: this.grid.rowModel.idOf(row), before: { ...row }, undoMark: this.grid.history.mark() };
+    this.grid.renderer.invalidate({ rows: true });
+    this.grid.events.emit("rowEditStart", { row, rowIndex });
+  }
+  /** Finish the row session: keep the values, or put the row back as it was. */
+  endRow(commit) {
+    const s = this.session;
+    if (!s) return;
+    if (this.cur) {
+      if (commit && !this.commit(null)) return;
+      if (!commit) this.close(false);
+    }
+    this.session = null;
+    const { grid } = this;
+    const rowIndex = grid.rowModel.indexOfId(s.id);
+    const cols = grid.columns.displayed().filter((c) => c.def.field && !isSystemCol(c.id));
+    if (!commit) {
+      const changes2 = [];
+      for (const c of cols) {
+        const f = c.def.field;
+        if (!Object.is(s.row[f], s.before[f])) grid.writeCell(changes2, s.row, f, c.id, rowIndex, s.before[f]);
+      }
+      grid.endCellTx(changes2);
+      grid.history.rollback(s.undoMark);
+    }
+    const changes = cols.filter((c) => !Object.is(s.row[c.def.field], s.before[c.def.field])).map((c) => ({ colId: c.id, oldValue: s.before[c.def.field], newValue: s.row[c.def.field] }));
+    grid.renderer.invalidate({ rows: true });
+    grid.events.emit("rowEditStop", { row: s.row, rowIndex, committed: commit, changes });
   }
   get active() {
     return this.cur && { rowIndex: this.cur.rowIndex, colId: this.cur.colId };
@@ -3710,7 +4212,7 @@ var CellEditor = class {
     return !node.kind && cellEditable(col.def, node.data, rowIndex);
   }
   start(rowIndex, colId, initialText) {
-    if (this.cur) this.commit(null);
+    if (this.cur && !this.commit(null)) return false;
     if (!this.canEdit(rowIndex, colId)) return false;
     const { grid } = this;
     if (grid.veto("beforeEdit", { row: grid.rowModel.getRow(rowIndex).data, rowIndex, colId })) return false;
@@ -3719,17 +4221,12 @@ var CellEditor = class {
     const def = col.def;
     const row = grid.rowModel.getRow(rowIndex).data;
     const value = row[def.field];
+    if (this.rowMode) this.beginRow(row, rowIndex);
     grid.setFocus(rowIndex, colId);
     renderer.ensureVisible(rowIndex, colId);
     renderer.render();
-    const cellEl = renderer.root.querySelector(`.fg-row[data-row="${rowIndex}"] .fg-cell[data-col="${CSS.escape(colId)}"]`);
-    const rootBox = renderer.root.getBoundingClientRect();
-    const box = cellEl?.getBoundingClientRect();
     const wrap = el("div", "fg-editor");
-    wrap.style.left = `${(box?.left ?? rootBox.left) - rootBox.left}px`;
-    wrap.style.top = `${(box?.top ?? rootBox.top) - rootBox.top}px`;
-    wrap.style.width = `${box?.width || col.width}px`;
-    wrap.style.height = `${box?.height || renderer.opts.rowHeight}px`;
+    this.place(wrap, rowIndex, colId);
     let control;
     let read;
     let dispose = () => {
@@ -3774,7 +4271,7 @@ var CellEditor = class {
         input.type = def.type === "date" && initialText === void 0 ? "date" : "text";
         if (def.type === "number") input.inputMode = "decimal";
       }
-      const start = def.type === "date" ? toDateKey(value) ?? "" : isBlank(value) ? "" : String(value);
+      const start = def.type === "date" ? toDateKey2(value) ?? "" : isBlank(value) ? "" : String(value);
       input.value = initialText ?? start;
       control = input;
       read = () => ({ text: input.value });
@@ -3827,6 +4324,36 @@ var CellEditor = class {
     grid.events.emit("editStart", { rowIndex, colId });
     return true;
   }
+  /** Put the editor over its cell; false when the cell is not rendered. */
+  place(wrap, rowIndex, colId) {
+    const { renderer } = this.grid;
+    const cellEl = renderer.root.querySelector(`.fg-row[data-row="${rowIndex}"] .fg-cell[data-col="${CSS.escape(colId)}"]`);
+    const rootBox = renderer.root.getBoundingClientRect();
+    const box = cellEl?.getBoundingClientRect();
+    wrap.style.left = `${(box?.left ?? rootBox.left) - rootBox.left}px`;
+    wrap.style.top = `${(box?.top ?? rootBox.top) - rootBox.top}px`;
+    wrap.style.width = `${box?.width || this.grid.columns.getColumn(colId)?.width}px`;
+    wrap.style.height = `${box?.height || renderer.opts.rowHeight}px`;
+    return !!cellEl;
+  }
+  /** Display index of a row object, or -1 when it is no longer shown. */
+  indexOf(row) {
+    const m = this.grid.rowModel;
+    const i = m.indexOfId(m.idOf(row));
+    return i >= 0 && m.getRow(i)?.data === row ? i : -1;
+  }
+  /** The rows changed underneath (transactions): follow the edited row, or cancel when it is gone. */
+  sync() {
+    const cur = this.cur;
+    if (!cur) return;
+    const i = this.indexOf(cur.row);
+    if (i < 0) return this.cancel();
+    if (i === cur.rowIndex) return;
+    cur.rowIndex = i;
+    this.grid.setFocus(i, cur.colId);
+    this.grid.renderer.render();
+    if (!this.place(cur.wrap, i, cur.colId)) this.commit(null);
+  }
   /** Validate and write the value. Returns false (editor stays open) when invalid. */
   commit(move) {
     const cur = this.cur;
@@ -3846,13 +4373,29 @@ var CellEditor = class {
     } else value = raw.value;
     const error = grid.cellError(cur.def, cur.row, value);
     if (error !== null) return this.fail(value, error);
+    const rowIndex = this.indexOf(cur.row);
+    if (rowIndex < 0) {
+      this.cancel();
+      return false;
+    }
+    cur.rowIndex = rowIndex;
     this.close(true);
-    grid.applyEdit(cur.rowIndex, cur.colId, value);
-    this.move(cur.rowIndex, cur.colId, move);
+    grid.applyEdit(rowIndex, cur.colId, value);
+    if (this.session && (move === "down" || move === "up")) {
+      this.endRow(true);
+    }
+    this.move(rowIndex, cur.colId, move);
     return true;
   }
   cancel() {
     this.close(false);
+    if (this.session) this.endRow(false);
+  }
+  /** Teardown: remove the editor without writing values or emitting events. */
+  destroy() {
+    this.cur?.dispose();
+    this.cur = null;
+    this.session = null;
   }
   fail(value, message) {
     const cur = this.cur;
@@ -3886,11 +4429,11 @@ var CellEditor = class {
     let i = cols.findIndex((c) => c.id === colId) + step;
     if (i >= cols.length) {
       i = 0;
-      r++;
+      if (!this.session) r++;
     }
     if (i < 0) {
       i = cols.length - 1;
-      r--;
+      if (!this.session) r--;
     }
     if (r < 0 || r >= count) return;
     this.start(r, cols[i].id);
@@ -3926,6 +4469,16 @@ var History = class {
     this.entries[this.index++].redo();
     return true;
   }
+  /** The current position, for rollback(). */
+  mark() {
+    return this.entries[this.index - 1] ?? null;
+  }
+  /** Forget every step pushed after `mark` (a cancelled edit session). */
+  rollback(mark) {
+    const i = mark ? this.entries.indexOf(mark) + 1 : 0;
+    this.entries.splice(i);
+    this.index = Math.min(this.index, i);
+  }
   clear() {
     this.entries = [];
     this.index = 0;
@@ -3954,6 +4507,14 @@ var ChangeTracker = class {
     const o = this.originals.get(row);
     return o ? fields.filter((f) => !same(o[f], row[f])) : [];
   }
+  /** Baseline `rows` (row → the values that were saved); `deleted` rows are no longer pending. */
+  commit(rows, deleted) {
+    for (const r of deleted) this.deleted.delete(r);
+    for (const [row, values] of rows) {
+      this.created.delete(row);
+      this.originals.set(row, { ...values });
+    }
+  }
   get size() {
     return this.originals.size + this.created.size + this.deleted.size;
   }
@@ -4214,12 +4775,34 @@ function zipStore(files) {
   return out;
 }
 var isZip = (data) => data.length > 4 && data[0] === 80 && data[1] === 75 && data[2] === 3 && data[3] === 4;
-async function inflateRaw(data) {
+var tooLarge = (max) => new Error(`Zip file is too large: it unpacks to more than ${max >= 1048576 ? `${Math.round(max / 1048576)} MB` : `${max} bytes`}`);
+async function inflateRaw(data, max) {
   if (typeof DecompressionStream === "undefined") throw new Error("This browser cannot read compressed xlsx files (no DecompressionStream)");
   const stream = new Response(data).body.pipeThrough(new DecompressionStream("deflate-raw"));
-  return new Uint8Array(await new Response(stream).arrayBuffer());
+  const reader = stream.getReader();
+  const chunks = [];
+  let size = 0;
+  for (; ; ) {
+    const { done, value } = await reader.read();
+    if (done) break;
+    size += value.length;
+    if (size > max) {
+      await reader.cancel().catch(() => void 0);
+      throw tooLarge(max);
+    }
+    chunks.push(value);
+  }
+  const out = new Uint8Array(size);
+  let at = 0;
+  for (const c of chunks) {
+    out.set(c, at);
+    at += c.length;
+  }
+  return out;
 }
-async function unzip(data) {
+async function unzip(data, limits = {}) {
+  const maxBytes = limits.maxBytes ?? 200 * 1048576;
+  const maxEntries = limits.maxEntries ?? 1e4;
   const view = new DataView(data.buffer, data.byteOffset, data.byteLength);
   let eocd = -1;
   for (let i = data.length - 22; i >= Math.max(0, data.length - 65557); i--) {
@@ -4230,9 +4813,11 @@ async function unzip(data) {
   }
   if (eocd < 0) throw new Error("Not a zip file");
   const count = view.getUint16(eocd + 10, true);
+  if (count > maxEntries) throw new Error(`Zip file has too many entries (${count}, at most ${maxEntries})`);
   let p = view.getUint32(eocd + 16, true);
   const decoder = new TextDecoder();
   const out = /* @__PURE__ */ new Map();
+  let total = 0;
   for (let i = 0; i < count; i++) {
     if (view.getUint32(p, true) !== 33639248) throw new Error("Broken zip directory");
     const method = view.getUint16(p + 10, true);
@@ -4243,9 +4828,13 @@ async function unzip(data) {
     const lName = view.getUint16(offset + 26, true), lExtra = view.getUint16(offset + 28, true);
     const start = offset + 30 + lName + lExtra;
     const raw = data.subarray(start, start + size);
-    if (method === 0) out.set(name, raw);
-    else if (method === 8) out.set(name, await inflateRaw(raw));
+    let bytes;
+    if (method === 0) bytes = raw;
+    else if (method === 8) bytes = await inflateRaw(raw, maxBytes - total);
     else throw new Error(`Unsupported zip compression ${method}`);
+    total += bytes.length;
+    if (total > maxBytes) throw tooLarge(maxBytes);
+    out.set(name, bytes);
     p += 46 + nameLen + extraLen + commentLen;
   }
   return out;
@@ -4366,7 +4955,8 @@ function writeXlsx(sheets) {
     const views = freeze ? `<sheetViews><sheetView workbookViewId="0"><pane ySplit="${freeze}" topLeftCell="A${freeze + 1}" activePane="bottomLeft" state="frozen"/></sheetView></sheetViews>` : '<sheetViews><sheetView workbookViewId="0"/></sheetViews>';
     const cols = sheet.widths?.length ? `<cols>${sheet.widths.map((w, i) => `<col min="${i + 1}" max="${i + 1}" width="${Math.max(4, Math.min(120, w)).toFixed(1)}" customWidth="1"/>`).join("")}</cols>` : "";
     const filter = sheet.autoFilter && width && freeze && sheet.rows.length >= freeze ? `<autoFilter ref="A${freeze}:${colName(width - 1)}${sheet.rows.length}"/>` : "";
-    const merges = sheet.merges?.length ? `<mergeCells count="${sheet.merges.length}">${sheet.merges.map((m) => `<mergeCell ref="${m}"/>`).join("")}</mergeCells>` : "";
+    const mergeRefs = (sheet.merges ?? []).filter((m) => typeof m === "string" && /^[A-Z]{1,3}\d{1,7}:[A-Z]{1,3}\d{1,7}$/.test(m));
+    const merges = mergeRefs.length ? `<mergeCells count="${mergeRefs.length}">${mergeRefs.map((m) => `<mergeCell ref="${m}"/>`).join("")}</mergeCells>` : "";
     return `${XML}<worksheet xmlns="${NS}" xmlns:r="${REL_NS}">${views}<sheetFormatPr defaultRowHeight="15"/>${cols}<sheetData>${rowsXml}</sheetData>${filter}${merges}</worksheet>`;
   });
   const styles = `${XML}<styleSheet xmlns="${NS}">` + (customFmts.length ? `<numFmts count="${customFmts.length}">${customFmts.map((f, i) => `<numFmt numFmtId="${164 + i}" formatCode="${esc(f)}"/>`).join("")}</numFmts>` : "") + `<fonts count="${fonts.length}">${fonts.join("")}</fonts><fills count="${fills.length}">${fills.join("")}</fills><borders count="1"><border><left/><right/><top/><bottom/><diagonal/></border></borders><cellStyleXfs count="1"><xf numFmtId="0" fontId="0" fillId="0" borderId="0"/></cellStyleXfs><cellXfs count="${xfs.length}">${xfs.join("")}</cellXfs><cellStyles count="1"><cellStyle name="Normal" xfId="0" builtinId="0"/></cellStyles></styleSheet>`;
@@ -4414,6 +5004,8 @@ function colIndex(ref) {
   }
   return n - 1;
 }
+var MAX_ROWS = 1048576;
+var MAX_COLS = 16384;
 async function readXlsx(input) {
   const data = input instanceof Uint8Array ? input : new Uint8Array(input);
   if (!isZip(data)) throw new Error("Not an xlsx file");
@@ -4441,11 +5033,13 @@ async function readXlsx(input) {
     if (doc) {
       for (const row of tags(doc, "row")) {
         const r = Number(row.getAttribute("r") ?? rows.length + 1) - 1;
+        if (!Number.isInteger(r) || r < 0 || r >= MAX_ROWS) continue;
         const out = [];
         let next = 0;
         for (const c of [...row.children].filter((x) => x.localName === "c")) {
           const ref = c.getAttribute("r");
           const ci = ref ? colIndex(ref) : next;
+          if (ci < 0 || ci >= MAX_COLS) continue;
           next = ci + 1;
           const t = c.getAttribute("t");
           const v = tags(c, "v")[0]?.textContent ?? null;
@@ -4490,6 +5084,81 @@ function exportRows(grid, mode) {
   return grid.rowModel.dataRows().map((n) => n.data);
 }
 var header = (def, id) => def.header ?? def.field ?? id;
+var ALIGNS = ["left", "center", "right"];
+var PLAIN_NUMBER = /^[+-]?(?:\d+\.?\d*|\.\d+)(?:e[+-]?\d+)?$/i;
+var escHtml = (s) => String(s ?? "").replace(/[&<>"]/g, (c) => ({ "&": "&amp;", "<": "&lt;", ">": "&gt;", '"': "&quot;" })[c]);
+function buildPrintHtml(grid, opts = {}) {
+  const cols = exportColumns(grid, opts.columns);
+  const code = grid.store.state.locale.code;
+  const fmts = cols.map((c) => getFormatter(c.def, code));
+  const chains = cols.map((c) => {
+    const chain = [];
+    for (let n = c.node; n; n = n.parent) chain.unshift(n);
+    return chain;
+  });
+  const depth = Math.max(1, ...chains.map((ch) => ch.length));
+  const head = [];
+  for (let level = 0; level < depth; level++) {
+    let tr = "";
+    for (let ci = 0; ci < cols.length; ci++) {
+      const chain = chains[ci];
+      const leaf = chain.length - 1;
+      if (level < leaf) {
+        const g = chain[level];
+        if (ci > 0 && chains[ci - 1][level] === g) continue;
+        let span = 1;
+        while (ci + span < cols.length && chains[ci + span][level] === g) span++;
+        tr += `<th colspan="${span}">${escHtml(header(g.def, g.id))}</th>`;
+      } else if (level === leaf) {
+        tr += `<th colspan="1" rowspan="${depth - level}">${escHtml(header(cols[ci].def, cols[ci].id))}</th>`;
+      }
+    }
+    head.push(`<tr>${tr}</tr>`);
+  }
+  const align = (def) => ALIGNS.includes(def.align) ? def.align : def.type === "number" ? "right" : def.type === "boolean" ? "center" : "left";
+  const body = exportRows(grid, opts.rows).map((r) => `<tr>${cols.map((c, i) => {
+    const v = getCellValue(c.def, r);
+    return `<td style="text-align:${align(c.def)}">${escHtml(isBlank(v) ? "" : fmts[i](v))}</td>`;
+  }).join("")}</tr>`).join("");
+  const title = escHtml(opts.title ?? document.title ?? "");
+  return `<!doctype html><html lang="${escHtml(code)}"><head><meta charset="utf-8"><title>${title}</title><style>
+@page { size: auto; margin: 12mm; }
+body { font: 11px/1.4 system-ui, 'Pretendard', 'Malgun Gothic', sans-serif; color: #111; margin: 0; }
+h1 { font-size: 15px; margin: 0 0 8px; }
+table { border-collapse: collapse; width: 100%; }
+th, td { border: 1px solid #999; padding: 3px 6px; }
+th { background: #eee; font-weight: 600; }
+thead { display: table-header-group; }
+tr { page-break-inside: avoid; }
+</style></head><body>${opts.title ? `<h1>${title}</h1>` : ""}<table><thead>${opts.headers === false ? "" : head.join("")}</thead><tbody>${body}</tbody></table></body></html>`;
+}
+function printHtml(html) {
+  if (typeof document === "undefined") return;
+  const frame = document.createElement("iframe");
+  frame.style.cssText = "position:fixed;right:0;bottom:0;width:0;height:0;border:0";
+  document.body.append(frame);
+  const doc = frame.contentDocument;
+  if (!doc || !frame.contentWindow) {
+    frame.remove();
+    warn("printing is not supported in this environment");
+    return;
+  }
+  doc.open();
+  doc.write(html);
+  doc.close();
+  const win = frame.contentWindow;
+  const done = () => setTimeout(() => frame.remove(), 1e3);
+  win.addEventListener("afterprint", done);
+  setTimeout(() => {
+    try {
+      win.focus();
+      win.print();
+    } catch {
+      warn("printing is not supported in this environment");
+    }
+    done();
+  }, 50);
+}
 function buildCsv(grid, opts = {}) {
   const cols = exportColumns(grid, opts.columns);
   const code = grid.store.state.locale.code;
@@ -4497,7 +5166,8 @@ function buildCsv(grid, opts = {}) {
   const matrix = exportRows(grid, opts.rows).map((r) => cols.map((c) => {
     const v = getCellValue(c.def, r);
     const t = c.def.type;
-    return { value: copyValue(c.def, v, code), text: !(t === "number" || t === "date" || t === "boolean") || typeof v === "string" };
+    const value = copyValue(c.def, v, code);
+    return { value, text: !(t === "number" || t === "date" || t === "boolean") || typeof v === "string" && !PLAIN_NUMBER.test(value) };
   }));
   if (opts.headers !== false) matrix.unshift(cols.map((c) => ({ value: header(c.def, c.id), text: true })));
   return toCsv(matrix, sep);
@@ -4569,6 +5239,9 @@ function classStyles(grid) {
   };
 }
 function buildXlsx(grid, opts = {}) {
+  return writeXlsx([buildXlsxSheet(grid, opts)]);
+}
+function buildXlsxSheet(grid, opts = {}) {
   const cols = exportColumns(grid, opts.columns);
   const code = grid.store.state.locale.code;
   const rows = [];
@@ -4674,14 +5347,14 @@ function buildXlsx(grid, opts = {}) {
     const s = computeSpans(data, c.def);
     for (let i = 0; i < data.length; i++) if (s.start[i] === i && s.end[i] > i) mergeRange(i, ci, s.end[i], ci);
   });
-  return writeXlsx([{
+  return {
     name: opts.sheetName ?? "Sheet1",
     rows,
     widths: cols.map((c) => Math.round(c.width / 7)),
     merges,
     freezeRows: headRows,
     autoFilter: headRows > 0
-  }]);
+  };
 }
 function download(filename, parts, type) {
   if (typeof URL === "undefined" || typeof URL.createObjectURL !== "function" || typeof document === "undefined") {
@@ -4703,7 +5376,7 @@ function asText(v) {
   if (v === null || v === void 0) return "";
   if (v instanceof Date) {
     const hasTime = v.getHours() || v.getMinutes() || v.getSeconds();
-    return hasTime ? v.toISOString() : toDateKey(v) ?? "";
+    return hasTime ? v.toISOString() : toDateKey2(v) ?? "";
   }
   return String(v);
 }
@@ -4811,7 +5484,8 @@ function renderChart(el2, spec) {
     top = 36;
   }
   const legend = svg("g", {}, "fg-chart-legend");
-  const names = spec.type === "pie" ? cats : series.map((s) => s.name);
+  const round2 = spec.type === "pie" || spec.type === "donut";
+  const names = round2 ? cats : spec.type === "scatter" ? series.slice(1).map((s) => s.name) : series.map((s) => s.name);
   let lx = 16;
   names.forEach((name, i) => {
     const item = svg("g", { transform: `translate(${lx},${H - 10})` }, "fg-chart-legend-item");
@@ -4823,7 +5497,13 @@ function renderChart(el2, spec) {
     lx += 24 + Math.min(140, name.length * 7);
   });
   const bottom = H - 52;
-  if (spec.type === "pie") {
+  if (spec.type === "scatter") {
+    drawScatter(root, spec, series, top, bottom, nf, short);
+    root.append(legend);
+    el2.replaceChildren(root);
+    return;
+  }
+  if (round2) {
     const values = (series[0]?.values ?? []).map((v) => v !== null && v > 0 ? v : 0);
     const total = values.reduce((a, b) => a + b, 0);
     const cx = W / 2, cy = (top + bottom) / 2, r = Math.max(10, (bottom - top) / 2 - 6);
@@ -4839,6 +5519,7 @@ function renderChart(el2, spec) {
       root.append(slice);
       angle = a2;
     });
+    if (spec.type === "donut") root.append(svg("circle", { cx, cy, r: r * 0.58, fill: "var(--fg-bg, #fff)" }, "fg-chart-donut-hole"));
     root.append(legend);
     el2.replaceChildren(root);
     return;
@@ -4879,11 +5560,25 @@ function renderChart(el2, spec) {
   cats.forEach((c, i) => {
     if (i % every) return;
     const label = svg("text", { x: left + band * (i + 0.5), y: bottom + 16, "text-anchor": "middle" });
-    label.textContent = c.length > 12 ? `${c.slice(0, 11)}\u2026` : c;
+    const fit = Math.max(3, Math.min(12, Math.floor(band * every / 10)));
+    label.textContent = c.length > fit ? `${c.slice(0, fit - 1)}\u2026` : c;
     axis.append(label);
   });
   root.append(axis);
   const plot = svg("g", {}, "fg-chart-plot");
+  const combo = spec.type === "combo";
+  if (combo) {
+    const inner = band * 0.6;
+    const s = series[0];
+    cats.forEach((c, ci) => {
+      const v = s?.values[ci];
+      if (v === null || v === void 0 || !Number.isFinite(v)) return;
+      const x = left + band * ci + (band - inner) / 2;
+      const rect = svg("rect", { x, y: Math.min(y(0), y(v)), width: Math.max(1, inner - 2), height: Math.max(0.5, Math.abs(y(v) - y(0))), fill: chartColor(0), rx: 2 }, "fg-chart-bar");
+      tip(rect, `${s.name} \xB7 ${c}: ${nf.format(v)}`);
+      plot.append(rect);
+    });
+  }
   if (spec.type === "bar" || stacked) {
     const inner = band * 0.72;
     const bw = stacked ? inner : inner / Math.max(1, series.length);
@@ -4907,6 +5602,7 @@ function renderChart(el2, spec) {
     });
   } else {
     series.forEach((s, si) => {
+      if (combo && si === 0) return;
       const pts = s.values.map((v, ci) => v === null || v === void 0 || !Number.isFinite(v) ? null : [left + band * (ci + 0.5), y(v), v]);
       let d = "";
       let pen = false;
@@ -4937,11 +5633,53 @@ function renderChart(el2, spec) {
   root.append(plot, legend);
   el2.replaceChildren(root);
 }
+function drawScatter(root, spec, series, top, bottom, nf, short) {
+  const xs = series[0]?.values ?? [];
+  const others = series.slice(1);
+  const finite = (v) => v !== null && v !== void 0 && Number.isFinite(v);
+  const allX = xs.filter(finite);
+  const allY = others.flatMap((s) => s.values.filter(finite));
+  if (!allX.length || !allY.length) return;
+  const xt = niceTicks(Math.min(...allX), Math.max(...allX));
+  const yt = niceTicks(Math.min(...allY), Math.max(...allY));
+  const left = 56, right = W - 16;
+  const x = (v) => left + (v - xt[0]) / (xt[xt.length - 1] - xt[0]) * (right - left);
+  const y = (v) => bottom - (v - yt[0]) / (yt[yt.length - 1] - yt[0]) * (bottom - top);
+  const axis = svg("g", {}, "fg-chart-axis");
+  for (const t of yt) {
+    axis.append(svg("line", { x1: left, x2: right, y1: y(t), y2: y(t) }, t === 0 ? "fg-chart-zero" : "fg-chart-grid"));
+    const label = svg("text", { x: left - 6, y: y(t) + 4, "text-anchor": "end" });
+    label.textContent = short.format(t);
+    axis.append(label);
+  }
+  xt.forEach((t, i) => {
+    const anchor = i === 0 ? "start" : i === xt.length - 1 ? "end" : "middle";
+    const label = svg("text", { x: x(t), y: bottom + 16, "text-anchor": anchor });
+    label.textContent = short.format(t);
+    axis.append(label);
+  });
+  const xName = svg("text", { x: right, y: bottom + 32, "text-anchor": "end" }, "fg-chart-axis-name");
+  xName.textContent = `${series[0]?.name ?? ""} \u2192`;
+  axis.append(xName);
+  root.append(axis);
+  const plot = svg("g", {}, "fg-chart-plot");
+  xs.forEach((xv, i) => {
+    if (!finite(xv)) return;
+    others.forEach((s, si) => {
+      const yv = s.values[i];
+      if (!finite(yv)) return;
+      const dot = svg("circle", { cx: x(xv), cy: y(yv), r: 4, fill: chartColor(si), "fill-opacity": 0.8 }, "fg-chart-point");
+      tip(dot, `${spec.categories[i] ?? ""}: ${series[0].name} ${nf.format(xv)}, ${s.name} ${nf.format(yv)}`);
+      plot.append(dot);
+    });
+  });
+  root.append(plot);
+}
 
 // src/interactions/charts.ts
 var MAX_SERIES = 12;
-var MAX_ROWS = 500;
-var TYPES = ["bar", "stackedBar", "line", "area", "pie"];
+var MAX_ROWS2 = 500;
+var TYPES = ["bar", "stackedBar", "line", "area", "combo", "pie", "donut", "scatter"];
 var GridCharts = class {
   constructor(grid) {
     this.grid = grid;
@@ -4958,7 +5696,7 @@ var GridCharts = class {
       if (a && b) {
         const box = normalizeRange({ start: { rowIndex: r.start.rowIndex, colIndex: a.index }, end: { rowIndex: r.end.rowIndex, colIndex: b.index } });
         const rows = [];
-        for (let i = box.r1; i <= box.r2 && rows.length < MAX_ROWS; i++) {
+        for (let i = box.r1; i <= box.r2 && rows.length < MAX_ROWS2; i++) {
           const n = grid.rowModel.getRow(i);
           if (n && !n.kind) rows.push(n.data);
         }
@@ -4966,7 +5704,7 @@ var GridCharts = class {
       }
     }
     const data = () => {
-      const rows = fixed ? fixed.rows : grid.rowModel.dataRows().slice(0, MAX_ROWS).map((n) => n.data);
+      const rows = fixed ? fixed.rows : grid.rowModel.dataRows().slice(0, MAX_ROWS2).map((n) => n.data);
       const cols = (fixed ? fixed.colIds.map((id) => grid.columns.getColumn(id)) : grid.columns.displayed().filter((c) => !isSystemCol(c.id))).filter((c) => !!c);
       const cat = cols[0] && cols[0].def.type !== "number" ? cols[0] : fixed ? null : cols.find((c) => c.def.type !== "number") ?? null;
       const isTotal = (c) => !!c.node.parent && c.node.parent.id === "pivotgroup|total";
@@ -4993,7 +5731,7 @@ var GridCharts = class {
     const body = el("div", "fg-chart-body");
     let panel = null;
     const draw = () => renderChart(body, { type, title: opts.title, locale: loc().code, ...data() });
-    const typeLabel = (t) => ({ bar: loc().chartBar, stackedBar: loc().chartStacked, line: loc().chartLine, area: loc().chartArea, pie: loc().chartPie })[t];
+    const typeLabel = (t) => ({ bar: loc().chartBar, stackedBar: loc().chartStacked, line: loc().chartLine, area: loc().chartArea, pie: loc().chartPie, donut: loc().chartDonut, combo: loc().chartCombo, scatter: loc().chartScatter })[t];
     const syncButtons = () => panel?.querySelectorAll(".fg-chart-type").forEach((b) => b.setAttribute("aria-pressed", String(b.dataset.type === type)));
     if (opts.container) opts.container.append(body);
     else {
@@ -5217,7 +5955,7 @@ function buildPivot(source, config, defOf, labels, locale) {
 }
 
 // src/version.ts
-var version = "0.8.1";
+var version = "1.0.1";
 
 // src/license.ts
 var PUBLIC_KEY = { kty: "EC", crv: "P-256", x: "sUTKkglZmk-HMKPNub8p7AeLBKesHCU8irIkw9rJlbE", y: "j0U_aKRDR7iApY9UpaD3hUemhBLZJwDv9-QiT_hUyw8" };
@@ -5243,6 +5981,12 @@ function domainMatches(host, domains) {
     return wildcard && h.endsWith(`.${dom}`);
   });
 }
+var isDay = (s) => {
+  const m = typeof s === "string" ? /^(\d{4})-(\d{2})-(\d{2})$/.exec(s) : null;
+  if (!m) return false;
+  const d = new Date(Date.UTC(Number(m[1]), Number(m[2]) - 1, Number(m[3])));
+  return d.getUTCMonth() === Number(m[2]) - 1 && d.getUTCDate() === Number(m[3]);
+};
 var today = (now) => `${now.getFullYear()}-${String(now.getMonth() + 1).padStart(2, "0")}-${String(now.getDate()).padStart(2, "0")}`;
 async function verifyLicense(key, host, opts = {}) {
   const parts = typeof key === "string" ? key.trim().split(".") : [];
@@ -5250,7 +5994,7 @@ async function verifyLicense(key, host, opts = {}) {
   let info;
   try {
     info = JSON.parse(new TextDecoder().decode(b64urlDecode(parts[1])));
-    if (!Array.isArray(info.domains) || typeof info.expires !== "string") return { ok: false, reason: "format" };
+    if (!Array.isArray(info.domains) || !isDay(info.expires)) return { ok: false, reason: "format" };
   } catch {
     return { ok: false, reason: "format" };
   }
@@ -5475,18 +6219,23 @@ var ColumnMenu = class {
     t.textContent = loc.filter;
     return t;
   }
-  conditionFilter(colId, type, loc, done) {
-    const raw = this.grid.store.state.filters[colId];
-    const cur = raw && raw.type === type ? raw : void 0;
-    const box = el("div", "fg-menu-section fg-filter");
+  /** One condition: operator, value and (for between) a second value. */
+  conditionRow(type, loc, cur, optional, apply) {
+    const row = el("div", "fg-filter-cond");
     const select = el("select", "fg-filter-op", { "aria-label": loc.filter });
+    if (optional) {
+      const none = el("option");
+      none.value = "";
+      none.textContent = "\u2014";
+      select.append(none);
+    }
     for (const op of OPS[type]) {
       const o = el("option");
       o.value = op;
       o.textContent = loc.ops[op];
       select.append(o);
     }
-    select.value = cur?.op ?? OPS[type][0];
+    select.value = cur?.op ?? (optional ? "" : OPS[type][0]);
     const inputType = type === "text" ? "text" : type;
     const v1 = el("input", "fg-input fg-filter-value", { type: inputType, placeholder: loc.value, "aria-label": loc.value });
     const v2 = el("input", "fg-input fg-filter-value-to", { type: inputType, placeholder: loc.valueTo, "aria-label": loc.valueTo });
@@ -5495,27 +6244,55 @@ var ColumnMenu = class {
       v2.value = "valueTo" in cur && cur.valueTo != null ? String(cur.valueTo) : "";
     }
     const sync = () => {
-      v1.hidden = NO_VALUE.includes(select.value);
+      v1.hidden = !select.value || NO_VALUE.includes(select.value);
       v2.hidden = select.value !== "between";
     };
     select.addEventListener("change", sync);
     sync();
+    for (const input of [v1, v2]) input.addEventListener("keydown", (e) => e.key === "Enter" && apply());
+    row.append(select, v1, v2);
+    const read = () => {
+      const op = select.value;
+      if (!op) return null;
+      const needsValue = !NO_VALUE.includes(op);
+      if (type === "number") {
+        const a = v1.value === "" ? void 0 : Number(v1.value);
+        const b = v2.value === "" ? void 0 : Number(v2.value);
+        return !needsValue || a !== void 0 ? { type, op, value: a, valueTo: b } : null;
+      }
+      if (type === "date") {
+        return !needsValue || v1.value ? { type, op, value: v1.value || void 0, valueTo: v2.value || void 0 } : null;
+      }
+      return !needsValue || v1.value ? { type, op, value: v1.value } : null;
+    };
+    return { row, read };
+  }
+  conditionFilter(colId, type, loc, done) {
+    const raw = this.grid.store.state.filters[colId];
+    const parts = raw?.type === "combined" ? raw.conditions : raw ? [raw] : [];
+    const first = parts[0]?.type === type ? parts[0] : void 0;
+    const second = parts[1]?.type === type ? parts[1] : void 0;
+    const box = el("div", "fg-menu-section fg-filter");
     const apply = () => {
-      const op = select.value;
-      const needsValue = !NO_VALUE.includes(op);
-      let model = null;
-      if (type === "number") {
-        const a = v1.value === "" ? void 0 : Number(v1.value);
-        const b = v2.value === "" ? void 0 : Number(v2.value);
-        if (!needsValue || a !== void 0) model = { type, op, value: a, valueTo: b };
-      } else if (type === "date") {
-        if (!needsValue || v1.value) model = { type, op, value: v1.value || void 0, valueTo: v2.value || void 0 };
-      } else if (!needsValue || v1.value) model = { type, op, value: v1.value };
+      const a = c1.read();
+      const b = c2.read();
+      const operator = join.querySelector("input:checked")?.value === "or" ? "or" : "and";
+      const model = a && b ? { type: "combined", operator, conditions: [a, b] } : a ?? b;
       this.grid.setFilter(colId, model);
       done();
     };
-    for (const input of [v1, v2]) input.addEventListener("keydown", (e) => e.key === "Enter" && apply());
-    box.append(this.title(loc), select, v1, v2, this.actions(colId, loc, apply, done));
+    const c1 = this.conditionRow(type, loc, first, false, apply);
+    const c2 = this.conditionRow(type, loc, second, true, apply);
+    const join = el("div", "fg-filter-join", { role: "radiogroup" });
+    const name = `fg-join-${colId}-${Math.random().toString(36).slice(2, 7)}`;
+    for (const op of ["and", "or"]) {
+      const label = el("label");
+      const r = el("input", "", { type: "radio", name, value: op });
+      r.checked = (raw?.type === "combined" ? raw.operator : "and") === op;
+      label.append(r, ` ${loc[op]}`);
+      join.append(label);
+    }
+    box.append(this.title(loc), c1.row, join, c2.row, this.actions(colId, loc, apply, done));
     return box;
   }
   setFilter(colId, loc, done) {
@@ -5619,7 +6396,7 @@ var RowModel = class {
     const d = input.display;
     const treeChanged = !!d?.getParentId !== !!this.last.display?.getParentId;
     const dataChanged = input.data !== this.last.data;
-    const filterChanged = dataChanged || treeChanged || input.filters !== this.last.filters || input.quickFilter !== this.last.quickFilter;
+    const filterChanged = dataChanged || treeChanged || input.filters !== this.last.filters || input.quickFilter !== this.last.quickFilter || input.advancedFilter !== this.last.advancedFilter;
     const sortChanged = filterChanged || input.sort !== this.last.sort || collator !== this.last.collator;
     const displayChanged = sortChanged || d?.version !== this.last.displayVersion || d?.groupBy !== this.last.display?.groupBy;
     if (dataChanged) {
@@ -5685,7 +6462,7 @@ var RowModel = class {
    * Prefix-sum offsets of the display rows: detail rows use `detailHeight`, rows with a
    * measured height (auto row height) use it, everything else `rowHeight`.
    */
-  layout(rowHeight, detailHeight, heights, heightsVersion = 0) {
+  layout(rowHeight, detailHeight, heights, heightsVersion = 0, heightOf) {
     const c = this.layoutCache;
     if (c && c.rows === this.display && c.rh === rowHeight && c.dh === detailHeight && c.hv === heightsVersion) return c;
     const n = this.display.length;
@@ -5696,7 +6473,11 @@ var RowModel = class {
       const node = this.display[i];
       let h = rowHeight;
       if (node.kind === "detail") h = detailHeight;
-      else if (measured && !node.kind) h = measured.get(node.id) ?? rowHeight;
+      else if (!node.kind) {
+        if (measured) h = measured.get(node.id) ?? rowHeight;
+        const fixed = heightOf?.(node.data);
+        if (typeof fixed === "number" && fixed > 0) h = measured ? Math.max(h, fixed) : fixed;
+      }
       if (h !== rowHeight) uniform = false;
       offsets[i + 1] = offsets[i] + h;
     }
@@ -5707,9 +6488,11 @@ var RowModel = class {
     const preds = Object.entries(input.filters).map(([colId, model]) => ({ def: this.deps.columnDef(colId), pred: buildPredicate(model) })).filter((p) => !!p.def);
     const tokens = quickTokens(input.quickFilter);
     const quickCols = tokens.length ? this.deps.quickColumns() : [];
-    if (!preds.length && !tokens.length) return this.nodes;
+    const advanced = input.advancedFilter ? buildAdvanced(input.advancedFilter, (id) => this.deps.columnDef(id), getCellValue) : null;
+    if (!preds.length && !tokens.length && !advanced) return this.nodes;
     const matches = this.nodes.filter((n) => {
       for (const p of preds) if (!p.pred(getCellValue(p.def, n.data))) return false;
+      if (advanced && !advanced(n.data)) return false;
       if (tokens.length) {
         const text2 = quickCols.map((d) => this.deps.format(d, getCellValue(d, n.data))).join("
").toLowerCase();
         if (!matchesQuick(tokens, text2)) return false;
@@ -5819,8 +6602,200 @@ var RowModel = class {
   }
 };
 
-// src/rows/serverRowModel.ts
+// src/rows/serverGroups.ts
+var LEVEL_ROWS = 1e4;
+var MAX_LEVEL_ROWS = 1e5;
+var MAX_IN_FLIGHT = 4;
 var RETRY_MS = 3e3;
+var ServerGroups = class {
+  constructor(datasource, getRowId, groupBy, query, onChange, onFailed) {
+    this.datasource = datasource;
+    this.getRowId = getRowId;
+    this.groupBy = groupBy;
+    this.query = query;
+    this.onChange = onChange;
+    this.onFailed = onFailed;
+    this.levels = /* @__PURE__ */ new Map();
+    this.gen = 0;
+    this.display = null;
+    this.ids = null;
+    this.queue = [];
+    this.inFlight = 0;
+    /** Earliest time a failed level in the display may be asked again (0: none). */
+    this.retryAt = 0;
+    this.version = 0;
+    this.builtFor = -1;
+  }
+  matches(groupBy, q) {
+    return groupBy.join("
") === this.groupBy.join("
") && q.sort === this.query.sort && q.filters === this.query.filters && q.quickFilter === this.query.quickFilter && q.advancedFilter === this.query.advancedFilter;
+  }
+  purge() {
+    this.gen++;
+    this.queue = [];
+    this.levels.clear();
+    this.touch();
+  }
+  /** Replaced by another grouping: answers still on their way are dropped, no more change calls. */
+  dispose() {
+    this.gen++;
+    this.queue = [];
+  }
+  touch() {
+    this.version++;
+    this.display = null;
+    this.ids = null;
+  }
+  load(path, keys, level) {
+    if (this.levels.has(path)) return;
+    this.levels.set(path, { state: "loading", nodes: [] });
+    this.fetch({ path, keys, level, start: 0, gen: this.gen });
+  }
+  fetch(job) {
+    this.queue.push(job);
+    this.pump();
+  }
+  pump() {
+    while (this.inFlight < MAX_IN_FLIGHT && this.queue.length) {
+      const job = this.queue.shift();
+      if (job.gen !== this.gen) continue;
+      this.inFlight++;
+      void this.request(job).finally(() => {
+        this.inFlight--;
+        this.pump();
+      });
+    }
+  }
+  request({ path, keys, level, start, gen }) {
+    const last = level >= this.groupBy.length;
+    const q = this.query;
+    const end = start + LEVEL_ROWS;
+    let result;
+    try {
+      result = Promise.resolve(this.datasource.getRows({
+        start,
+        end,
+        sort: [...q.sort],
+        filters: { ...q.filters },
+        quickFilter: q.quickFilter,
+        advancedFilter: q.advancedFilter,
+        groupBy: [...this.groupBy],
+        groupKeys: [...keys]
+      }));
+    } catch (e) {
+      result = Promise.reject(e);
+    }
+    return result.then((res) => {
+      if (gen !== this.gen) return;
+      const rows = Array.isArray(res?.rows) ? res.rows.filter((r) => r !== null && typeof r === "object") : [];
+      if (!Array.isArray(res?.rows)) warn("datasource.getRows must resolve to { rows: Row[] }");
+      const added = last ? rows.map((data, i) => ({ id: this.getRowId ? String(this.getRowId(data)) : autoId(data), data, sourceIndex: start + i, level })) : rows.map((data) => {
+        const colId = this.groupBy[level];
+        const value = data[colId];
+        const key = `${path ? `${path}|` : ""}${colId}:${setKey(value)}`;
+        const count = typeof data.count === "number" ? data.count : typeof data.childCount === "number" ? data.childCount : void 0;
+        return {
+          id: `group:${key}`,
+          data: {},
+          sourceIndex: -1,
+          kind: "group",
+          level,
+          group: { key, colId, value, rows: [], expanded: false, count, aggregates: data, keys: [...keys, value] }
+        };
+      });
+      const nodes = start ? [...this.levels.get(path)?.nodes ?? [], ...added] : added;
+      const total = typeof res?.total === "number" && res.total >= 0 ? res.total : null;
+      const more = rows.length > 0 && (total !== null ? nodes.length < total : rows.length >= end - start);
+      if (more && nodes.length < MAX_LEVEL_ROWS) {
+        this.levels.set(path, { state: "loading", nodes });
+        this.fetch({ path, keys, level, start: nodes.length, gen });
+      } else {
+        if (more) warn(`a server group level has more than ${MAX_LEVEL_ROWS} rows; only the first ${MAX_LEVEL_ROWS} are shown`);
+        this.levels.set(path, { state: "loaded", nodes });
+      }
+      this.touch();
+      this.onChange();
+    }, (error) => {
+      if (gen !== this.gen) return;
+      this.levels.set(path, { state: "failed", nodes: [], retryAt: Date.now() + RETRY_MS });
+      this.touch();
+      this.onFailed(start, end, error);
+    });
+  }
+  isOpen(d, key, level) {
+    const explicit = d.expanded.get(key);
+    if (explicit !== void 0) return explicit;
+    return d.defaultExpanded === -1 || level < d.defaultExpanded;
+  }
+  /** Display rows: open groups show their loaded children, or a loading row while they arrive. */
+  rows(d, displayVersion) {
+    const now = Date.now();
+    if (this.display && this.builtFor === displayVersion && !(this.retryAt && now >= this.retryAt)) return this.display;
+    const out = [];
+    let retryAt = 0;
+    const walk = (path, keys, level) => {
+      let lv = this.levels.get(path);
+      if (lv?.state === "failed" && now >= (lv.retryAt ?? 0)) {
+        this.levels.delete(path);
+        lv = void 0;
+      }
+      if (!lv) {
+        this.load(path, keys, level);
+        out.push({ id: `loading:${path}`, data: {}, sourceIndex: -1, kind: "loading", level });
+        return;
+      }
+      if (lv.state === "failed") {
+        const at = lv.retryAt ?? 0;
+        retryAt = retryAt ? Math.min(retryAt, at) : at;
+        return;
+      }
+      for (const n of lv.nodes) {
+        if (n.kind !== "group") {
+          out.push(n);
+          continue;
+        }
+        const g = n.group;
+        const open = this.isOpen(d, g.key, level);
+        const node = { ...n, group: { ...g, expanded: open } };
+        out.push(node);
+        if (open) walk(g.key, g.keys ?? [], level + 1);
+      }
+      if (lv.state === "loading") out.push({ id: `loading:${path}`, data: {}, sourceIndex: -1, kind: "loading", level });
+    };
+    walk("", [], 0);
+    this.retryAt = retryAt;
+    this.display = out;
+    this.builtFor = displayVersion;
+    this.ids = null;
+    return out;
+  }
+  dataRows() {
+    const out = [];
+    for (const lv of this.levels.values()) for (const n of lv.nodes) if (!n.kind) out.push(n);
+    return out;
+  }
+  /** Rows matching the filters, from the counts of the top level when the server sent them. */
+  dataCount() {
+    const top = this.levels.get("");
+    if (top?.state === "loaded" && top.nodes.every((n) => typeof n.group?.count === "number")) {
+      return top.nodes.reduce((s, n) => s + (n.group?.count ?? 0), 0);
+    }
+    return this.dataRows().length;
+  }
+  loading() {
+    for (const lv of this.levels.values()) if (lv.state === "loading") return true;
+    return false;
+  }
+  indexOf(id) {
+    if (!this.display) return -1;
+    if (!this.ids) {
+      this.ids = /* @__PURE__ */ new Map();
+      this.display.forEach((n, i) => this.ids.set(n.id, i));
+    }
+    return this.ids.get(id) ?? -1;
+  }
+};
+
+// src/rows/serverRowModel.ts
 var NO_OFFSETS = new Float64Array(0);
 var ServerRowModel = class {
   constructor(deps) {
@@ -5839,6 +6814,9 @@ var ServerRowModel = class {
     this.lastBlock = 0;
     this.version = 0;
     this.cache = null;
+    /** Server-side grouping, while groupBy has columns. */
+    this.groups = null;
+    this.displayIn = null;
   }
   get bs() {
     return this.page ? this.page.size : this.deps.blockSize;
@@ -5847,11 +6825,36 @@ var ServerRowModel = class {
     return this.page ? this.page.index * this.page.size : 0;
   }
   update(input) {
+    const groupBy = input.display?.groupBy ?? [];
+    if (groupBy.length && !input.display?.getParentId) {
+      const q2 = { sort: input.sort, filters: input.filters, quickFilter: input.quickFilter, advancedFilter: input.advancedFilter ?? null };
+      if (!this.groups || !this.groups.matches(groupBy, q2)) {
+        this.groups?.dispose();
+        this.groups = new ServerGroups(
+          this.deps.datasource,
+          this.deps.getRowId,
+          [...groupBy],
+          q2,
+          () => this.deps.onLoaded(0, 0, null),
+          (start, end, error) => this.deps.onFailed(start, end, error)
+        );
+        this.touch();
+      }
+      this.displayIn = input.display ?? null;
+      this.query = null;
+      return;
+    }
+    if (this.groups) {
+      this.groups.dispose();
+      this.groups = null;
+      this.query = null;
+      this.touch();
+    }
     const q = this.query;
-    const queryChanged = !q || q.sort !== input.sort || q.filters !== input.filters || q.quickFilter !== input.quickFilter;
+    const queryChanged = !q || q.sort !== input.sort || q.filters !== input.filters || q.quickFilter !== input.quickFilter || q.advancedFilter !== (input.advancedFilter ?? null);
     const p = input.page ?? null;
     const sizeChanged = (p?.size ?? 0) !== (this.page?.size ?? 0);
-    this.query = { sort: input.sort, filters: input.filters, quickFilter: input.quickFilter };
+    this.query = { sort: input.sort, filters: input.filters, quickFilter: input.quickFilter, advancedFilter: input.advancedFilter ?? null };
     this.page = p ? { ...p } : null;
     if (queryChanged || sizeChanged) this.purge();
     this.ensure(Math.floor(this.base / this.bs));
@@ -5860,6 +6863,10 @@ var ServerRowModel = class {
   }
   /** Forget every row and start over (sort/filter change or refreshRows). */
   purge() {
+    if (this.groups) {
+      this.groups.purge();
+      return;
+    }
     this.gen++;
     this.blocks.clear();
     this.total = null;
@@ -5879,13 +6886,16 @@ var ServerRowModel = class {
     return this.loadedEnd + (last && last.nodes.length < this.bs ? 0 : this.bs);
   }
   getRowCount() {
+    if (this.groups) return this.groupRows().length;
     const all2 = this.fullCount();
     return this.page ? Math.max(0, Math.min(this.page.size, all2 - this.base)) : all2;
   }
   dataCount() {
+    if (this.groups) return this.groups.dataCount();
     return this.fullCount();
   }
   loading() {
+    if (this.groups) return this.groups.loading();
     for (const b of this.blocks.values()) if (b.state === "loading") return true;
     return false;
   }
@@ -5897,7 +6907,11 @@ var ServerRowModel = class {
     const b = this.blocks.get(k);
     return b?.state === "loaded" ? b.nodes[abs - k * this.bs] ?? null : null;
   }
+  groupRows() {
+    return this.groups.rows(this.displayIn, this.displayIn.version * 1e6 + this.groups.version);
+  }
   getRow(index) {
+    if (this.groups) return this.groupRows()[index];
     const abs = this.base + index;
     const hit = this.peek(abs);
     if (hit) return hit;
@@ -5920,7 +6934,7 @@ var ServerRowModel = class {
     };
     let result;
     try {
-      result = Promise.resolve(this.deps.datasource.getRows({ start, end, sort: [...q.sort], filters: { ...q.filters }, quickFilter: q.quickFilter }));
+      result = Promise.resolve(this.deps.datasource.getRows({ start, end, sort: [...q.sort], filters: { ...q.filters }, quickFilter: q.quickFilter, advancedFilter: q.advancedFilter }));
     } catch (e) {
       result = Promise.reject(e);
     }
@@ -5967,6 +6981,7 @@ var ServerRowModel = class {
   }
   /** Every row of the window, with placeholders for those not loaded (does not request anything). */
   rows() {
+    if (this.groups) return this.groupRows();
     const c = this.built();
     if (!c.rows) {
       const n = this.getRowCount();
@@ -5976,15 +6991,21 @@ var ServerRowModel = class {
     return c.rows;
   }
   dataRows() {
+    if (this.groups) return this.groups.dataRows();
     return this.built().data;
   }
   allNodes() {
+    if (this.groups) return this.groups.dataRows();
     return this.built().data;
   }
   idOf(row) {
     return this.deps.getRowId ? String(this.deps.getRowId(row)) : autoId(row);
   }
   indexOfId(id) {
+    if (this.groups) {
+      this.groupRows();
+      return this.groups.indexOf(id);
+    }
     const abs = this.built().ids.get(id);
     if (abs === void 0) return -1;
     const i = abs - this.base;
@@ -6035,10 +7056,280 @@ var Store = class {
   }
 };
 
+// src/interactions/tooltip.ts
+var DELAY = 500;
+function attachTooltips(grid) {
+  const root = grid.renderer.root;
+  let timer = 0;
+  let tipEl = null;
+  let target = null;
+  const hide = () => {
+    clearTimeout(timer);
+    tipEl?.remove();
+    tipEl = null;
+    target = null;
+  };
+  const textFor = (cell) => {
+    const colId = cell.dataset.col;
+    if (!colId || isSystemCol(colId)) return null;
+    const node = grid.columns.getNode(colId);
+    if (!node) return null;
+    if (cell.classList.contains("fg-header-cell")) return node.def.headerTooltip ?? null;
+    const rowEl = cell.closest(".fg-row[data-row]");
+    if (!rowEl || !cell.closest(".fg-body")) return null;
+    const rowIndex = Number(rowEl.dataset.row);
+    const row = grid.rowModel.getRow(rowIndex);
+    if (!row || row.kind) return null;
+    const def = node.def;
+    const value = getCellValue(def, row.data);
+    const formatted = getFormatter(def, grid.store.state.locale.code)(value);
+    if (typeof def.tooltip === "function") {
+      try {
+        const t = def.tooltip({ value, formatted, row: row.data, rowIndex, column: def });
+        return t ? String(t) : null;
+      } catch {
+        warn(`tooltip of column "${colId}" threw`);
+        return null;
+      }
+    }
+    if (def.tooltip === true) return formatted || null;
+    if (grid.options.overflowTooltip !== false && def.tooltip !== false && cell.scrollWidth > cell.clientWidth + 1) return cell.textContent || null;
+    return null;
+  };
+  const show = (cell, text2) => {
+    tipEl?.remove();
+    tipEl = el("div", `fg-tooltip fg-theme-${grid.store.state.theme}`, { role: "tooltip" });
+    tipEl.textContent = text2;
+    grid.applyFontTo(tipEl);
+    popupParent(root).append(tipEl);
+    const box = cell.getBoundingClientRect();
+    const w = tipEl.offsetWidth, h = tipEl.offsetHeight;
+    const vw = window.innerWidth || 1024, vh = window.innerHeight || 768;
+    const top = box.bottom + 6 + h > vh ? box.top - h - 6 : box.bottom + 6;
+    tipEl.style.left = `${Math.max(4, Math.min(vw - w - 4, box.left))}px`;
+    tipEl.style.top = `${Math.max(4, top)}px`;
+  };
+  const onOver = (e) => {
+    const cell = e.target.closest?.(".fg-cell, .fg-header-cell");
+    if (!cell || cell === target || !root.contains(cell)) return;
+    hide();
+    target = cell;
+    timer = window.setTimeout(() => {
+      if (target !== cell || !cell.isConnected) return;
+      const text2 = textFor(cell);
+      if (text2) show(cell, text2);
+    }, DELAY);
+  };
+  const onOut = (e) => {
+    const to = e.relatedTarget;
+    if (target && to && target.contains(to)) return;
+    hide();
+  };
+  root.addEventListener("pointerover", onOver);
+  root.addEventListener("pointerout", onOut);
+  root.addEventListener("pointerdown", hide);
+  root.addEventListener("keydown", hide);
+  root.addEventListener("wheel", hide, { passive: true });
+  return () => {
+    hide();
+    root.removeEventListener("pointerover", onOver);
+    root.removeEventListener("pointerout", onOut);
+    root.removeEventListener("pointerdown", hide);
+    root.removeEventListener("keydown", hide);
+    root.removeEventListener("wheel", hide);
+  };
+}
+
+// src/interactions/filterBuilder.ts
+var NO_VALUE2 = ["blank", "notBlank"];
+var FilterBuilder = class {
+  constructor(grid) {
+    this.grid = grid;
+    this.popup = null;
+    this.off = [];
+  }
+  get isOpen() {
+    return !!this.popup;
+  }
+  /** Columns that can be filtered, with the condition type the builder uses for them. */
+  columns() {
+    return this.grid.columns.getState().map((s) => this.grid.columns.getNode(s.colId)).filter((n) => n && !n.children && !isSystemCol(n.id) && filterTypeOf(n.def)).map((n) => {
+      const ft = filterTypeOf(n.def);
+      const kind = ft === "number" ? "number" : ft === "date" ? "date" : "text";
+      return { id: n.id, label: n.def.header ?? n.def.field ?? n.id, kind };
+    });
+  }
+  open() {
+    this.close();
+    const { grid } = this;
+    const loc = grid.store.state.locale;
+    const cols = this.columns();
+    const popup = el("div", `fg-menu fg-filter-builder fg-theme-${grid.store.state.theme}`, { role: "dialog", "aria-label": loc.advancedFilter });
+    grid.applyFontTo(popup);
+    const head = el("div", "fg-chooser-head");
+    const title = el("span", "fg-menu-title");
+    title.textContent = loc.advancedFilter;
+    const x = el("button", "fg-chooser-close", { type: "button", "aria-label": loc.close });
+    x.textContent = "\xD7";
+    x.addEventListener("click", () => this.close());
+    head.append(title, x);
+    const cur = grid.store.state.advancedFilter;
+    const join = el("div", "fg-filter-join", { role: "radiogroup" });
+    const name = `fg-fb-join-${Math.random().toString(36).slice(2, 7)}`;
+    for (const op of ["and", "or"]) {
+      const label = el("label");
+      const r2 = el("input", "", { type: "radio", name, value: op });
+      r2.checked = (cur?.operator ?? "and") === op;
+      label.append(r2, ` ${loc[op]}`);
+      join.append(label);
+    }
+    const list = el("div", "fg-fb-list");
+    const rows = [];
+    const remove = (row) => {
+      rows.splice(rows.indexOf(row), 1);
+      row.el.remove();
+    };
+    const conditionRow = (start) => {
+      const rowEl = el("div", "fg-fb-row");
+      const colSel = el("select", "fg-filter-op fg-fb-col", { "aria-label": loc.columns });
+      for (const c of cols) {
+        const o = el("option");
+        o.value = c.id;
+        o.textContent = c.label;
+        colSel.append(o);
+      }
+      const opSel = el("select", "fg-filter-op fg-fb-op", { "aria-label": loc.filter });
+      const value = el("input", "fg-input fg-fb-value", { type: "text", placeholder: loc.value, "aria-label": loc.value });
+      const valueTo = el("input", "fg-input fg-fb-value-to", { type: "text", placeholder: loc.valueTo, "aria-label": loc.valueTo });
+      const del = el("button", "fg-chooser-close fg-fb-remove", { type: "button", "aria-label": loc.close });
+      del.textContent = "\xD7";
+      const kindOf = () => cols.find((c) => c.id === colSel.value)?.kind ?? "text";
+      const fillOps = (keep) => {
+        const kind = kindOf();
+        opSel.replaceChildren(...OPS[kind].map((op) => {
+          const o = el("option");
+          o.value = op;
+          o.textContent = loc.ops[op];
+          return o;
+        }));
+        if (keep && OPS[kind].includes(keep)) opSel.value = keep;
+        const type = kind === "text" ? "text" : kind;
+        value.type = valueTo.type = type;
+        sync();
+      };
+      const sync = () => {
+        value.hidden = NO_VALUE2.includes(opSel.value);
+        valueTo.hidden = opSel.value !== "between";
+      };
+      colSel.addEventListener("change", () => fillOps(opSel.value));
+      opSel.addEventListener("change", sync);
+      if (start && cols.some((c) => c.id === start.colId)) colSel.value = start.colId;
+      const m = start?.model;
+      fillOps(m?.op);
+      if (m?.value != null) value.value = String(m.value);
+      if (m?.valueTo != null) valueTo.value = String(m.valueTo);
+      rowEl.append(colSel, opSel, value, valueTo, del);
+      const state = {
+        el: rowEl,
+        read: () => {
+          const kind = kindOf();
+          const op = opSel.value;
+          const needs = !NO_VALUE2.includes(op);
+          let model = null;
+          if (kind === "number") {
+            const a = value.value === "" ? void 0 : Number(value.value);
+            const b = valueTo.value === "" ? void 0 : Number(valueTo.value);
+            if (!needs || a !== void 0 && !Number.isNaN(a)) model = op === "between" ? { type: "number", op, value: a, valueTo: b } : { type: "number", op, value: a };
+          } else if (kind === "date") {
+            if (!needs || value.value) model = op === "between" ? { type: "date", op, value: value.value, valueTo: valueTo.value } : { type: "date", op, value: value.value || void 0 };
+          } else if (!needs || value.value) model = { type: "text", op, value: value.value };
+          return model ? { colId: colSel.value, model } : null;
+        }
+      };
+      del.addEventListener("click", () => remove(state));
+      return state;
+    };
+    const keptRow = (kept, label) => {
+      const rowEl = el("div", "fg-fb-row fg-fb-group");
+      const text2 = el("span", "fg-fb-group-label");
+      text2.textContent = label;
+      const del = el("button", "fg-chooser-close fg-fb-remove", { type: "button", "aria-label": loc.close });
+      del.textContent = "\xD7";
+      rowEl.append(text2, del);
+      const state = { el: rowEl, read: () => kept };
+      del.addEventListener("click", () => remove(state));
+      return state;
+    };
+    const rowFor = (c) => {
+      if ("conditions" in c) return keptRow(c, `( ${c.conditions.length} \xD7 ${loc[c.operator]} )`);
+      const col = cols.find((x2) => x2.id === c.colId);
+      const m = c.model;
+      if (col && m && (m.type === "text" || m.type === "number" || m.type === "date")) return conditionRow(c);
+      const what = m?.type === "set" ? m.values.map(String).join(", ") : m?.type === "combined" ? `( ${m.conditions.length} \xD7 ${loc[m.operator]} )` : "";
+      return keptRow(c, `${col?.label ?? c.colId}: ${what}`);
+    };
+    const add = (row) => {
+      rows.push(row);
+      list.append(row.el);
+    };
+    for (const c of cur?.conditions ?? []) add(rowFor(c));
+    const addBtn = el("button", "fg-btn fg-fb-add", { type: "button" });
+    addBtn.textContent = `+ ${loc.addCondition}`;
+    addBtn.addEventListener("click", () => {
+      const row = conditionRow();
+      add(row);
+      row.el.querySelector(".fg-fb-value").focus();
+    });
+    const actions = el("div", "fg-menu-actions");
+    const reset = el("button", "fg-btn", { type: "button" });
+    reset.textContent = loc.reset;
+    reset.addEventListener("click", () => {
+      grid.setAdvancedFilter(null);
+      this.close();
+    });
+    const ok = el("button", "fg-btn fg-btn-primary", { type: "button" });
+    ok.textContent = loc.apply;
+    ok.addEventListener("click", () => {
+      const conditions = rows.map((r2) => r2.read()).filter((c) => !!c);
+      const operator = join.querySelector("input:checked")?.value === "or" ? "or" : "and";
+      grid.setAdvancedFilter(conditions.length ? { operator, conditions } : null);
+      this.close();
+    });
+    actions.append(reset, ok);
+    popup.append(head, join, list, addBtn, actions);
+    popupParent(grid.renderer.root).append(popup);
+    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`;
+    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();
+    };
+    document.addEventListener("pointerdown", onDown, true);
+    document.addEventListener("keydown", onKey, true);
+    this.off.push(
+      () => document.removeEventListener("pointerdown", onDown, true),
+      () => document.removeEventListener("keydown", onKey, true)
+    );
+  }
+  close() {
+    for (const f of this.off) f();
+    this.off = [];
+    this.popup?.remove();
+    this.popup = null;
+  }
+};
+
 // src/grid.ts
 var autoRowHeight = (size) => Math.round(size * 2.75);
 var autoHeaderHeight = (size) => Math.round(size * 3.1);
 var DEFAULT_FONT_SIZE = 13;
+var DENSITY = { compact: [0.8, 0.85], normal: [1, 1], comfortable: [1.25, 1.15] };
 var NO_GROUPS = [];
 var DEFAULT_PAGE_SIZE = 100;
 var NO_SPANS = /* @__PURE__ */ new Map();
@@ -6078,6 +7369,18 @@ var Grid = class {
     /** 0-based page and rows per page (pagination only). */
     this.page = 0;
     this.pageSize = DEFAULT_PAGE_SIZE;
+    // ── pagination and server rows ──────────────────────────────
+    /** Cells flashing after a transaction: `${rowId}\u0000${colId}` → time the flash ends. */
+    /** showOverlay: an overlay the app asked for, shown whatever the row count. */
+    this.forcedOverlay = null;
+    this.filterBuilder = new FilterBuilder(this);
+    this.flashing = /* @__PURE__ */ new Map();
+    this.flashTimer = 0;
+    this.txQueue = [];
+    this.txTimer = 0;
+    /** A transaction is replacing the data: keep the selected range. */
+    this.keepRange = false;
+    this.rowNumberCache = null;
     /** Tree rows whose children were loaded (or are loading) through treeData.loadChildren. */
     this.treeLoaded = /* @__PURE__ */ new Set();
     this.treeLoading = /* @__PURE__ */ new Set();
@@ -6089,6 +7392,9 @@ var Grid = class {
         return false;
       }
     };
+    this.density = "normal";
+    /** Bumped on every selection change (group row checkboxes depend on their rows). */
+    this.selectionVersion = 0;
     if (!Array.isArray(options.columns)) warn("options.columns must be an array");
     if (options.data != null && !Array.isArray(options.data)) warn("options.data must be an array");
     this.store = new Store({
@@ -6101,6 +7407,7 @@ var Grid = class {
       focus: null,
       range: null,
       extraRanges: [],
+      advancedFilter: null,
       locale: resolveLocale(options.locale),
       theme: options.theme ?? "light"
     });
@@ -6137,9 +7444,11 @@ var Grid = class {
     this.font = { size: explicit, family: options.fontFamily ?? null };
     const size = explicit ?? DEFAULT_FONT_SIZE;
     this.renderer = new Renderer(host, this, {
-      rowHeight: options.rowHeight ?? autoRowHeight(size),
-      headerHeight: options.headerHeight ?? autoHeaderHeight(size)
+      rowHeight: options.rowHeight ?? Math.round(autoRowHeight(size) * DENSITY[this.densityOf(options.density)][0]),
+      headerHeight: options.headerHeight ?? Math.round(autoHeaderHeight(size) * DENSITY[this.densityOf(options.density)][1])
     });
+    this.density = this.densityOf(options.density);
+    this.renderer.applyTheme();
     this.renderer.applyFont(this.font.size, this.font.family);
     this.menu = new ColumnMenu(this);
     this.chooser = new ColumnChooserDialog(this);
@@ -6161,10 +7470,12 @@ var Grid = class {
       () => this.menu.close(),
       () => this.chooser.close(),
       () => this.contextMenu.destroy(),
-      () => this.editor.cancel(),
+      () => this.editor.destroy(),
       () => this.fillHandle.destroy(),
       () => this.groupPanel?.destroy(),
-      () => this.charts.destroy()
+      () => this.charts.destroy(),
+      () => this.filterBuilder.close(),
+      attachTooltips(this)
     );
     if (typeof ResizeObserver !== "undefined") {
       const ro = new ResizeObserver(() => this.renderer.schedule());
@@ -6313,7 +7624,208 @@ var Grid = class {
     this.renderer.invalidate({ header: true, rows: true });
     this.refreshChoosers();
   }
-  // ── pagination and server rows ──────────────────────────────
+  isFlashing(rowId, colId) {
+    return this.flashing.size > 0 && this.flashing.has(`${rowId}\0${colId}`);
+  }
+  flash(keys) {
+    const until = Date.now() + 1e3;
+    for (const k of keys) this.flashing.set(k, until);
+    if (this.flashTimer) return;
+    const tick = () => {
+      const now = Date.now();
+      for (const [k, t] of this.flashing) if (t <= now) this.flashing.delete(k);
+      this.renderer.invalidate({ rows: true });
+      this.flashTimer = this.flashing.size && !this.destroyed ? window.setTimeout(tick, 250) : 0;
+    };
+    this.flashTimer = window.setTimeout(tick, 1e3);
+  }
+  applyTransaction(tx) {
+    if (!tx || typeof tx !== "object") return { added: [], updated: [], removed: [], notFound: [] };
+    return this.applyTransactions([tx]);
+  }
+  /** Apply transactions one after another, then render and emit once. */
+  applyTransactions(list) {
+    const result = { added: [], updated: [], removed: [], notFound: [] };
+    if (this.clientOnly("applyTransaction")) return result;
+    const colsByField = /* @__PURE__ */ new Map();
+    for (const st of this.columns.getState()) {
+      const f = this.columns.getNode(st.colId)?.def.field;
+      if (f) colsByField.set(f, [...colsByField.get(f) ?? [], st.colId]);
+    }
+    const flashKeys = [];
+    let next = this.store.state.data;
+    const present = new Set(next);
+    const byId = new Map(next.map((r) => [this.rowModel.idOf(r), r]));
+    for (const tx of list) {
+      if (tx && typeof tx === "object") next = this.txStep(tx, next, { present, byId }, result, flashKeys, colsByField);
+    }
+    if (!result.added.length && !result.updated.length && !result.removed.length) {
+      if (result.notFound.length) this.events.emit("transactionApplied", result);
+      return result;
+    }
+    this.editVersion++;
+    this.renderer.invalidateHeights();
+    this.keepRange = true;
+    try {
+      this.replaceData(next === this.store.state.data ? [...next] : next);
+    } finally {
+      this.keepRange = false;
+    }
+    this.editor.sync();
+    if (flashKeys.length && this.options.flashCells !== false) this.flash(flashKeys);
+    this.events.emit("transactionApplied", result);
+    return result;
+  }
+  /** One transaction against `data` (remove → update → add); returns the new array. */
+  txStep(tx, data, index, result, flashKeys, colsByField) {
+    const getId = this.options.getRowId;
+    const { present, byId } = index;
+    const keyOf = (r) => {
+      if (!r || typeof r !== "object") return null;
+      if (present.has(r)) return this.rowModel.idOf(r);
+      try {
+        return getId ? String(getId(r)) : null;
+      } catch {
+        return null;
+      }
+    };
+    const gone = /* @__PURE__ */ new Set();
+    for (const r of tx.remove ?? []) {
+      const k = keyOf(r);
+      const row = k === null ? void 0 : byId.get(k);
+      if (row && !gone.has(row)) {
+        gone.add(row);
+        present.delete(row);
+        byId.delete(k);
+        result.removed.push(row);
+        this.tracker.created.delete(row);
+        this.tracker.originals.delete(row);
+      } else if (!row) result.notFound.push(r);
+    }
+    for (const r of tx.update ?? []) {
+      const k = keyOf(r);
+      const row = k === null ? void 0 : byId.get(k);
+      if (!row || gone.has(row)) {
+        result.notFound.push(r);
+        continue;
+      }
+      const orig = this.tracker.originals.get(row);
+      for (const [field, value] of Object.entries(r)) {
+        if (orig) orig[field] = value;
+        if (Object.is(row[field], value)) continue;
+        row[field] = value;
+        for (const colId of colsByField.get(field) ?? []) flashKeys.push(`${k}\0${colId}`);
+      }
+      result.updated.push(row);
+    }
+    const added = cleanRows(Array.isArray(tx.add) ? tx.add : []);
+    result.added.push(...added);
+    for (const r of added) {
+      present.add(r);
+      byId.set(this.rowModel.idOf(r), r);
+    }
+    if (!gone.size && !added.length) return data;
+    const next = gone.size ? data.filter((r) => !gone.has(r)) : [...data];
+    const at = typeof tx.addIndex === "number" ? Math.max(0, Math.min(next.length, Math.floor(tx.addIndex))) : next.length;
+    next.splice(at, 0, ...added);
+    return next;
+  }
+  applyTransactionAsync(tx) {
+    if (!tx || typeof tx !== "object") return;
+    this.txQueue.push(tx);
+    if (this.txTimer) return;
+    this.txTimer = window.setTimeout(() => {
+      this.txTimer = 0;
+      const queue = this.txQueue;
+      this.txQueue = [];
+      if (this.destroyed || !queue.length) return;
+      this.applyTransactions(queue);
+    }, 50);
+  }
+  setAdvancedFilter(filter) {
+    const next = filter && typeof filter === "object" && Array.isArray(filter.conditions) && filter.conditions.length ? filter : null;
+    if (next === this.store.state.advancedFilter) return;
+    this.store.set({ advancedFilter: next });
+    this.events.emit("advancedFilterChange", { advancedFilter: next });
+  }
+  setColumnGroupOpened(groupId, open) {
+    if (!this.columns.setGroupOpen(groupId, !!open)) return;
+    this.layoutChanged();
+    this.events.emit("columnGroupOpened", { groupId, open: !!open });
+  }
+  getState() {
+    const s = this.store.state;
+    const groupBy = this.savedGroup?.groupBy ?? this.groupBy;
+    const expanded = this.savedGroup?.expanded ?? this.expanded;
+    const state = {
+      columns: this.columns.getState(),
+      columnGroups: this.columns.groupOpenState(),
+      advancedFilter: s.advancedFilter ? JSON.parse(JSON.stringify(s.advancedFilter)) : null,
+      sort: s.sort.map((x) => ({ ...x })),
+      filters: JSON.parse(JSON.stringify(s.filters)),
+      quickFilter: s.quickFilter,
+      groupBy: [...groupBy],
+      pivot: this.pivotCfg ? JSON.parse(JSON.stringify(this.pivotCfg)) : null,
+      expanded: Object.fromEntries(expanded),
+      selected: [...s.selected]
+    };
+    if (this.options.pagination) {
+      state.page = this.page;
+      state.pageSize = this.pageSize;
+    }
+    return state;
+  }
+  setState(state, options = {}) {
+    if (!state || typeof state !== "object") return;
+    const want = (k) => state[k] !== void 0 && (!options.parts || options.parts.includes(k));
+    const known = (id) => !!this.columns.getNode(id);
+    if (want("columns") && Array.isArray(state.columns)) {
+      this.columns.applyState(state.columns.filter((c) => c && known(c.colId)));
+      this.columnsChanged();
+    }
+    if (want("columnGroups") && state.columnGroups && typeof state.columnGroups === "object") {
+      for (const [id, open] of Object.entries(state.columnGroups)) if (typeof open === "boolean") this.setColumnGroupOpened(id, open);
+    }
+    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 } });
+    }
+    if (want("advancedFilter")) this.setAdvancedFilter(state.advancedFilter ?? null);
+    if (want("quickFilter") && typeof state.quickFilter === "string") this.store.set({ quickFilter: state.quickFilter });
+    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;
+      else {
+        this.expanded = expanded;
+        this.displayChanged();
+      }
+    }
+    if (want("pageSize") && typeof state.pageSize === "number") this.setPageSize(state.pageSize);
+    if (want("page") && typeof state.page === "number") this.setPage(state.page);
+    if (want("selected") && Array.isArray(state.selected)) {
+      const ids = new Set(this.rowModel.allNodes().map((n) => n.id));
+      this.setSelected(new Set(state.selected.map(String).filter((id) => ids.has(id))));
+    }
+  }
+  /** Number shown in the row-number column for display row `i` (data rows only; continues across pages). */
+  rowNumber(i) {
+    const rows = this.rowModel.rows();
+    if (this.rowNumberCache?.rows !== rows) {
+      const nums = new Int32Array(rows.length);
+      let n = 0;
+      rows.forEach((r, k) => {
+        nums[k] = r.kind ? 0 : ++n;
+      });
+      this.rowNumberCache = { rows, nums };
+    }
+    const v = this.rowNumberCache.nums[i];
+    if (!v) return null;
+    return v + (this.options.pagination && !this.rowModel.server ? this.page * this.pageSize : 0);
+  }
   getPage() {
     return this.options.pagination ? this.page : 0;
   }
@@ -6428,7 +7940,6 @@ var Grid = class {
   }
   validGroupBy(ids) {
     if (!Array.isArray(ids)) return [];
-    if (ids.length && this.clientOnly("grouping")) return [];
     return [...new Set(ids)].filter((id) => {
       const node = this.columns.getNode(id);
       if (!node || node.children || isSystemCol(id)) {
@@ -6515,6 +8026,7 @@ var Grid = class {
   groupAggregate(node, colId) {
     const def = this.columns.getNode(colId)?.def;
     if (!node.group || !def?.aggFunc) return void 0;
+    if (node.group.aggregates) return node.group.aggregates[colId] ?? (def.field ? node.group.aggregates[def.field] : void 0);
     if (this.aggCache.ver !== this.editVersion) this.aggCache = { ver: this.editVersion, map: /* @__PURE__ */ new WeakMap() };
     let m = this.aggCache.map.get(node.group);
     if (!m) this.aggCache.map.set(node.group, m = /* @__PURE__ */ new Map());
@@ -6688,13 +8200,30 @@ var Grid = class {
     const family = font.family === void 0 ? this.font.family : font.family || null;
     this.font = { size, family };
     const effective = size ?? DEFAULT_FONT_SIZE;
-    if (this.options.rowHeight == null) this.renderer.opts.rowHeight = autoRowHeight(effective);
-    if (this.options.headerHeight == null) this.renderer.opts.headerHeight = autoHeaderHeight(effective);
+    this.applyAutoHeights(effective);
     this.renderer.applyFont(size, family);
     this.renderer.invalidateHeights();
     this.menu.close();
     this.layoutChanged();
   }
+  densityOf(d) {
+    return d === "compact" || d === "comfortable" ? d : "normal";
+  }
+  /** Row and header heights from the font size and density, unless the options fix them. */
+  applyAutoHeights(fontSize) {
+    const [r, h] = DENSITY[this.density];
+    if (this.options.rowHeight == null) this.renderer.opts.rowHeight = Math.round(autoRowHeight(fontSize) * r);
+    if (this.options.headerHeight == null) this.renderer.opts.headerHeight = Math.round(autoHeaderHeight(fontSize) * h);
+  }
+  setDensity(d) {
+    const next = this.densityOf(d);
+    if (next === this.density) return;
+    this.density = next;
+    this.renderer.applyTheme();
+    this.applyAutoHeights(this.font.size ?? DEFAULT_FONT_SIZE);
+    this.renderer.invalidateHeights();
+    this.layoutChanged();
+  }
   /** 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`);
@@ -6797,7 +8326,7 @@ var Grid = class {
     if (all2.length > 1) {
       const sameCols = all2.every((x) => x.c1 === all2[0].c1 && x.c2 === all2[0].c2);
       const sameRows = all2.every((x) => x.r1 === all2[0].r1 && x.r2 === all2[0].r2);
-      if (sameCols || sameRows) {
+      if (this.rangesStack(all2)) {
         const parts = [...all2].sort((x, y) => sameCols ? x.r1 - y.r1 : x.c1 - y.c1);
         const blocks = parts.map((p) => this.rangeMatrix(p));
         const matrix2 = sameCols ? blocks.flat() : blocks[0].map((_, ri) => blocks.flatMap((bl) => bl[ri] ?? []));
@@ -6828,6 +8357,10 @@ var Grid = class {
     if (headers) matrix.unshift(cols.map((c) => c.def.header ?? c.def.field ?? c.id));
     return toTSV(matrix);
   }
+  /** Like Excel: ranges stack when they share columns or rows; otherwise only the active one is copied. */
+  rangesStack(all2) {
+    return all2.length > 1 && (all2.every((x) => x.c1 === all2[0].c1 && x.c2 === all2[0].c2) || all2.every((x) => x.r1 === all2[0].r1 && x.r2 === all2[0].r2));
+  }
   rangeHeaders(b) {
     return this.columns.displayed().slice(b.c1, b.c2 + 1).filter((c) => !isSystemCol(c.id)).map((c) => c.def.header ?? c.def.field ?? c.id);
   }
@@ -6843,19 +8376,22 @@ var Grid = class {
     return out;
   }
   copyCell(def, row, code) {
-    const value = getCellValue(def, row);
+    return this.copyAllowed(def, row) ? copyValue(def, getCellValue(def, row), code) : "";
+  }
+  copyAllowed(def, row) {
     const rule = def.copyable;
-    if (rule === false) return "";
-    if (typeof rule === "function") {
-      let ok = false;
-      try {
-        ok = rule({ value, row, column: def }) !== false;
-      } catch {
-        ok = false;
-      }
-      if (!ok) return "";
+    if (typeof rule !== "function") return rule !== false;
+    try {
+      return rule({ value: getCellValue(def, row), row, column: def }) !== false;
+    } catch {
+      return false;
     }
-    return copyValue(def, value, code);
+  }
+  /** Copy, then clear the editable cells of the selection. */
+  cutToClipboard() {
+    const text2 = this.copyToClipboard(false);
+    if (text2) this.clearCells(true);
+    return text2;
   }
   copyToClipboard(headers, rows = false) {
     const text2 = this.selectionTSV(headers, rows);
@@ -7113,10 +8649,14 @@ var Grid = class {
     this.writeCell(changes, node.data, def.field, colId, rowIndex, value);
     this.endCellTx(changes);
   }
-  /** Delete/Backspace: clear editable cells in the range, or the focused cell. */
-  clearCells() {
+  /** Delete/Backspace: clear editable cells in the range, or the focused cell. `cut` clears only what a copy takes. */
+  clearCells(cut = false) {
     const displayed = this.columns.displayed();
-    const all2 = this.allRangeBounds();
+    let all2 = this.allRangeBounds();
+    if (cut && !this.rangesStack(all2)) {
+      const active = this.rangeBounds();
+      all2 = active ? [active] : [];
+    }
     const f = this.store.state.focus;
     const fi = f ? this.columns.getColumn(f.colId)?.index : void 0;
     const boxes = all2.length ? all2 : f && fi !== void 0 ? [{ r1: f.rowIndex, r2: f.rowIndex, c1: fi, c2: fi }] : [];
@@ -7126,7 +8666,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)) this.writeCell(changes, node.data, def.field, displayed[c].id, r, null);
+        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);
       }
     }
     this.endCellTx(changes);
@@ -7228,8 +8768,9 @@ var Grid = class {
     const m = this.getModifiedRows();
     return m.created.length + m.updated.length + m.deleted.length > 0;
   }
-  commitChanges() {
-    this.tracker.reset();
+  commitChanges(saved) {
+    if (saved && saved.rows instanceof Map) this.tracker.commit(saved.rows, Array.isArray(saved.deleted) ? saved.deleted : []);
+    else this.tracker.reset();
     this.renderer.invalidate({ rows: true });
   }
   revertChanges() {
@@ -7346,6 +8887,7 @@ var Grid = class {
     this.events.emit("focusChange", { rowIndex, colId });
   }
   setSelected(selected, anchorId = this.store.state.anchorId) {
+    this.selectionVersion++;
     this.store.set({ selected, anchorId });
     this.events.emit("selectionChange", { selected: this.selectedRows() });
   }
@@ -7359,6 +8901,55 @@ var Grid = class {
       return false;
     }
   }
+  /** Selectable data row ids under a group row, or the descendants of a tree row. */
+  groupMemberIds(node) {
+    if (node.group) return node.group.rows.filter((r) => this.rowSelectable(r)).map((r) => this.rowModel.idOf(r));
+    const getParent = this.options.treeData?.getParentId;
+    if (!getParent) return [];
+    const kids = /* @__PURE__ */ new Map();
+    for (const r of this.store.state.data) {
+      let p = null;
+      try {
+        p = getParent(r);
+      } catch {
+        p = null;
+      }
+      if (p == null) continue;
+      const k = String(p);
+      const list = kids.get(k);
+      if (list) list.push(r);
+      else kids.set(k, [r]);
+    }
+    const out = [];
+    const seen2 = /* @__PURE__ */ new Set([node.id]);
+    const queue = [node.id];
+    while (queue.length) {
+      for (const r of kids.get(queue.shift()) ?? []) {
+        const id = this.rowModel.idOf(r);
+        if (seen2.has(id)) continue;
+        seen2.add(id);
+        queue.push(id);
+        if (this.rowSelectable(r)) out.push(id);
+      }
+    }
+    return out;
+  }
+  /** 'all', 'some' or 'none' of a group row's rows are selected. */
+  groupSelection(node) {
+    const ids = this.groupMemberIds(node);
+    const sel = this.store.state.selected;
+    const n = ids.filter((id) => sel.has(id)).length;
+    return n === 0 ? "none" : n === ids.length ? "all" : "some";
+  }
+  /** Group row checkbox: select every row of the group, or clear them when all were selected. */
+  toggleGroupSelection(node) {
+    if (this.options.rowSelection !== "multiple") return;
+    const ids = this.groupMemberIds(node);
+    const next = new Set(this.store.state.selected);
+    const all2 = ids.length > 0 && ids.every((id) => next.has(id));
+    for (const id of ids) all2 ? next.delete(id) : next.add(id);
+    this.setSelected(next);
+  }
   selectFromClick(index, toggle, range) {
     const mode = this.options.rowSelection;
     if (!mode || index < 0 || index >= this.rowModel.getRowCount()) return;
@@ -7381,6 +8972,10 @@ var Grid = class {
         if (n && (n.kind || !this.rowSelectable(n.data))) r.selected.delete(id);
       }
     }
+    if (mode === "multiple" && this.options.groupSelectsChildren && this.options.treeData && target.hasChildren) {
+      const on = r.selected.has(target.id);
+      for (const id of this.groupMemberIds(target)) on ? r.selected.add(id) : r.selected.delete(id);
+    }
     this.setSelected(r.selected, this.rowModel.getRow(r.anchorIndex)?.id ?? null);
   }
   /** Displayed index of the selection anchor, or null when it is not displayed (filtered out or removed). */
@@ -7412,6 +9007,11 @@ var Grid = class {
   }
   withSelect(defs) {
     const sys = [];
+    const rn = this.options.rowNumbers;
+    if (rn) {
+      const o = typeof rn === "object" ? rn : {};
+      sys.push(rowNumberColumn(typeof o.width === "number" && o.width > 0 ? o.width : void 0, typeof o.header === "string" ? o.header : void 0));
+    }
     if (this.options.rowDrag) sys.push(DRAG_COLUMN);
     if (this.options.rowSelection) sys.push(SELECT_COLUMN);
     return [...sys, ...defs];
@@ -7478,21 +9078,21 @@ var Grid = class {
       this.sideBar?.refresh();
       this.rowModel.invalidate();
     }
-    const resetPage = has("sort", "filters", "quickFilter") && this.page !== 0;
+    const resetPage = has("sort", "filters", "quickFilter", "advancedFilter") && this.page !== 0;
     if (resetPage) this.page = 0;
-    if (has("data", "sort", "filters", "quickFilter", "locale")) this.updateRows();
+    if (has("data", "sort", "filters", "quickFilter", "advancedFilter", "locale")) this.updateRows();
     if (resetPage) this.emitPage();
-    if (has("data", "sort", "filters", "quickFilter") && this.store.state.range) this.setRange(null);
-    if (has("data", "sort", "filters", "quickFilter", "locale")) this.finder.refresh();
-    if (has("data", "filters", "quickFilter", "locale") || has("selected") && this.summaryOpts?.scope === "selected") {
+    if (has("data", "sort", "filters", "quickFilter", "advancedFilter") && this.store.state.range && !this.keepRange) this.setRange(null);
+    if (has("data", "sort", "filters", "quickFilter", "advancedFilter", "locale")) this.finder.refresh();
+    if (has("data", "filters", "quickFilter", "advancedFilter", "locale") || has("selected") && this.summaryOpts?.scope === "selected") {
       this.refreshSummary();
     }
     if (has("locale")) this.groupPanel?.refresh();
     if (has("filters")) this.sideBar?.refresh();
     if (has("theme")) this.renderer.applyTheme();
     this.renderer.invalidate({
-      header: has("sort", "filters", "quickFilter", "locale", "selected", "data"),
-      rows: has("data", "sort", "filters", "quickFilter", "locale")
+      header: has("sort", "filters", "quickFilter", "advancedFilter", "locale", "selected", "data"),
+      rows: has("data", "sort", "filters", "quickFilter", "advancedFilter", "locale")
     });
   }
   createApi() {
@@ -7523,6 +9123,24 @@ var Grid = class {
       getDisplayedRowCount: guard(() => this.rowModel.getRowCount()),
       scrollToRow: guard((i) => this.renderer.scrollToRow(i)),
       validate: guard(() => this.validateAll()),
+      setDensity: guard((d) => this.setDensity(d)),
+      getDensity: guard(() => this.density),
+      showOverlay: guard((kind) => {
+        this.forcedOverlay = kind === "loading" || kind === "noRows" ? kind : null;
+        this.renderer.invalidate();
+      }),
+      getXlsxSheet: guard((o) => buildXlsxSheet(this, o)),
+      print: guard((o) => printHtml(buildPrintHtml(this, o))),
+      getPrintHtml: guard((o) => buildPrintHtml(this, o)),
+      setColumnGroupOpened: guard((id, open) => this.setColumnGroupOpened(id, open)),
+      setAdvancedFilter: guard((f) => this.setAdvancedFilter(f)),
+      getAdvancedFilter: guard(() => this.store.state.advancedFilter ? JSON.parse(JSON.stringify(this.store.state.advancedFilter)) : null),
+      openFilterBuilder: guard(() => this.filterBuilder.open()),
+      isColumnGroupOpened: guard((id) => !!this.columns.getNode(id)?.open),
+      applyTransaction: guard((tx) => this.applyTransaction(tx)),
+      applyTransactionAsync: guard((tx) => this.applyTransactionAsync(tx)),
+      getState: guard(() => this.getState()),
+      setState: guard((s, o) => this.setState(s, o)),
       getScrollPosition: guard(() => this.renderer.getScroll()),
       setScrollPosition: guard((p) => this.renderer.setScroll(p ?? {})),
       syncScroll: guard((other, axis = "both") => this.syncScroll(other, axis)),
@@ -7546,6 +9164,8 @@ var Grid = class {
       setRanges: guard((list) => this.setRanges(list)),
       copySelection: guard((o) => this.copyToClipboard(!!o?.headers, !!o?.rows)),
       pasteText: guard((text2) => this.pasteText(text2)),
+      cutSelection: guard(() => this.cutToClipboard()),
+      stopRowEdit: guard((cancel) => this.editor.endRow(!cancel)),
       startEdit: guard((rowIndex, colId) => this.editor.start(rowIndex, colId)),
       stopEdit: guard((cancel) => cancel ? this.editor.cancel() : void this.editor.commit(null)),
       addRows: guard((rows, index) => this.addRows(rows, index)),
@@ -7554,7 +9174,7 @@ var Grid = class {
       getModifiedRows: guard(() => this.getModifiedRows()),
       getChanges: guard(() => this.getChanges()),
       hasChanges: guard(() => this.hasChanges()),
-      commitChanges: guard(() => this.commitChanges()),
+      commitChanges: guard((saved) => this.commitChanges(saved)),
       revertChanges: guard(() => this.revertChanges()),
       undo: guard(() => this.undo()),
       redo: guard(() => this.redo()),
@@ -7597,6 +9217,8 @@ var Grid = class {
     if (this.destroyed) return;
     this.destroyed = true;
     liveGrids.delete(this.renderer.root);
+    clearTimeout(this.flashTimer);
+    clearTimeout(this.txTimer);
     for (const d of this.disposers) d();
     this.renderer.destroy();
     this.events.clear();
@@ -7605,14 +9227,113 @@ var Grid = class {
 function createGrid(host, options) {
   return new Grid(host, options).api;
 }
+
+// src/workbook.ts
+function buildWorkbook(sheets) {
+  const list = (Array.isArray(sheets) ? sheets : []).filter((s) => s && s.grid && typeof s.grid.getXlsxSheet === "function");
+  if (!list.length) {
+    warn("buildWorkbook: no grids given; the file has one empty sheet");
+    return writeXlsx([{ name: "Sheet1", rows: [] }]);
+  }
+  return writeXlsx(list.map((s, i) => s.grid.getXlsxSheet({ ...s.options, sheetName: s.sheetName ?? s.options?.sheetName ?? `Sheet${i + 1}` })));
+}
+function exportWorkbook(filename, sheets) {
+  download(filename || "export.xlsx", [buildWorkbook(sheets)], "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet");
+}
+
+// src/rest.ts
+var headersOf = (h) => typeof h === "function" ? h() : h ?? {};
+async function send(url, method, body, opts) {
+  let target = url;
+  const where = url.split(/[?#]/)[0];
+  const init = { method, credentials: opts.credentials ?? "same-origin", headers: { Accept: "application/json", ...headersOf(opts.headers) } };
+  if (method === "GET") {
+    const q = new URLSearchParams();
+    for (const [k, v] of Object.entries(body)) if (v !== void 0) q.set(k, typeof v === "string" ? v : JSON.stringify(v));
+    target += (url.includes("?") ? "&" : "?") + q.toString();
+  } else {
+    init.headers["Content-Type"] = "application/json";
+    init.body = JSON.stringify(body);
+  }
+  const res = await fetch(target, init);
+  if (!res.ok) throw new Error(`HTTP ${res.status} from ${where}`);
+  const text2 = await res.text();
+  if (!text2) return null;
+  try {
+    return JSON.parse(text2);
+  } catch {
+    throw new Error(`HTTP ${res.status} from ${where}: the response is not JSON`);
+  }
+}
+function readRows(json) {
+  if (Array.isArray(json)) return { rows: json };
+  const o = json ?? {};
+  const rows = [o.rows, o.list, o.content, o.data, o.items, o.resultList].find(Array.isArray);
+  const total = [o.total, o.totalCount, o.totalElements, o.totCnt, o.count].find((v) => typeof v === "number");
+  return { rows: (rows ?? []).filter((r) => r !== null && typeof r === "object"), total };
+}
+function restDatasource(url, options = {}) {
+  return {
+    async getRows(p) {
+      const size = Math.max(1, p.end - p.start);
+      const body = {
+        start: p.start,
+        end: p.end,
+        page: Math.floor(p.start / size),
+        size,
+        sort: p.sort,
+        filters: p.filters,
+        quickFilter: p.quickFilter,
+        // only when set (undefined is left out of the request)
+        advancedFilter: p.advancedFilter ?? void 0,
+        groupBy: p.groupBy,
+        groupKeys: p.groupKeys,
+        ...options.params?.() ?? {}
+      };
+      const json = await send(url, options.method ?? "POST", body, options);
+      return (options.transform ?? readRows)(json);
+    }
+  };
+}
+var saving = /* @__PURE__ */ new WeakMap();
+function saveChanges(grid, url, options = {}) {
+  const pending = saving.get(grid);
+  if (pending) return pending;
+  if (!grid.hasChanges()) return Promise.resolve(null);
+  const { created, updated, deleted } = grid.getModifiedRows();
+  const rows = new Map([...created, ...updated].map((r) => [r, { ...r }]));
+  const run = (async () => {
+    const json = await send(url, "POST", { created, updated, deleted, ...options.params?.() ?? {} }, options);
+    grid.commitChanges({ rows, deleted });
+    return json;
+  })().finally(() => saving.delete(grid));
+  saving.set(grid, run);
+  return run;
+}
+async function loadData(grid, url, options = {}) {
+  const { rows } = await restDatasource(url, options).getRows({ start: 0, end: options.maxRows ?? 1e4, sort: [], filters: {}, quickFilter: "" });
+  grid.setData(rows);
+  return rows;
+}
+function csrfHeaders(doc = document) {
+  const token = doc.querySelector('meta[name="_csrf"]')?.content;
+  const header2 = doc.querySelector('meta[name="_csrf_header"]')?.content || "X-CSRF-TOKEN";
+  return token ? { [header2]: token } : {};
+}
 export {
+  buildWorkbook,
   createGrid,
+  csrfHeaders,
   en_default as en,
+  exportWorkbook,
+  loadData,
   parseCsv,
   readXlsx,
   registerLocale,
   renderChart,
   resolveLocale,
+  restDatasource,
+  saveChanges,
   setLicenseKey,
   verifyLicense,
   version,