@freegridjs/core 1.0.0 → 1.1.0

package/dist/index.js

@@ -512,14 +512,19 @@ var Parser = class {
   }
 };
 var MAX_DEPTH = 32;
-function evaluateFormula(formula, row, seen2 = /* @__PURE__ */ new Set(), depth = 0) {
+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!");
-        const r = evaluateFormula(v2, row, /* @__PURE__ */ new Set([...seen2, name]), depth + 1);
+        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;
       }
@@ -560,7 +565,10 @@ var toNumber = (s) => {
 };
 var toDateKey = (s) => {
   const m = /^(\d{4})[-./]\s*(\d{1,2})[-./]\s*(\d{1,2})\.?$/.exec(s.trim());
-  return m ? `${m[1]}-${m[2].padStart(2, "0")}-${m[3].padStart(2, "0")}` : null;
+  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();
@@ -620,10 +628,6 @@ var FilterRow = class {
     const { columns, store } = this.grid;
     const h = this.height;
     const cols = columns.displayed();
-    if (store.state.data !== this.data) {
-      this.data = store.state.data;
-      this.layout = "";
-    }
     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;
@@ -633,7 +637,11 @@ var FilterRow = class {
         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();
   }
@@ -657,6 +665,33 @@ var FilterRow = class {
       }
     }
   }
+  /** 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`;
@@ -669,14 +704,7 @@ var FilterRow = class {
     if (type === "set") {
       const select = el("select", "fg-filter-input", { "aria-label": label });
       select.dataset.col = c.id;
-      const all2 = el("option", "", { value: "" });
-      all2.textContent = loc.selectAll;
-      select.append(all2);
-      for (const v of this.distinct(c.def)) {
-        const o = el("option", "", { value: JSON.stringify(v) });
-        o.textContent = v === true ? "\u2713" : v === false ? "\u2717" : String(v);
-        select.append(o);
-      }
+      this.fillOptions(select, c.def);
       select.addEventListener("change", () => {
         this.grid.setFilter(c.id, select.value ? { type: "set", values: [JSON.parse(select.value)] } : null);
       });
@@ -2554,6 +2582,7 @@ var en = {
   clearFilters: "Clear all filters",
   exportCsv: "Export CSV",
   exportExcel: "Export Excel",
+  print: "Print\u2026",
   pivot: "Pivot",
   pivotMode: "Pivot mode",
   pivotRows: "Row groups",
@@ -3075,7 +3104,7 @@ function attachBody(grid) {
     if (!text2 || !e.clipboardData) return;
     e.clipboardData.setData("text/plain", text2);
     e.preventDefault();
-    grid.clearCells();
+    grid.clearCells(true);
   };
   const onPaste = (e) => {
     if (fromField(e) || nested(e)) return;
@@ -3615,6 +3644,7 @@ var ContextMenu = class {
       { 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() });
+    items.push("separator", { label: loc.print, action: () => grid.api.print() });
     return items;
   }
   pasteFromClipboard() {
@@ -4144,7 +4174,7 @@ var CellEditor = class {
   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 } };
+    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 });
   }
@@ -4153,8 +4183,8 @@ var CellEditor = class {
     const s = this.session;
     if (!s) return;
     if (this.cur) {
-      if (commit) this.commit(null);
-      else this.close(false);
+      if (commit && !this.commit(null)) return;
+      if (!commit) this.close(false);
     }
     this.session = null;
     const { grid } = this;
@@ -4167,6 +4197,7 @@ var CellEditor = class {
         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 });
@@ -4183,7 +4214,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;
@@ -4196,14 +4227,8 @@ var CellEditor = class {
     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 = () => {
@@ -4301,6 +4326,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;
@@ -4320,18 +4375,30 @@ 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);
+    grid.applyEdit(rowIndex, cur.colId, value);
     if (this.session && (move === "down" || move === "up")) {
       this.endRow(true);
     }
-    this.move(cur.rowIndex, cur.colId, move);
+    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;
     cur.wrap.classList.add("fg-editor-invalid");
@@ -4404,6 +4471,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;
@@ -4432,6 +4509,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;
   }
@@ -4594,6 +4679,58 @@ function attachHeader(grid) {
   };
 }
 
+// src/rows/sort.ts
+function compareNonBlank(a, b, collator) {
+  if (typeof a === "number" && typeof b === "number") return a - b;
+  if (a instanceof Date && b instanceof Date) return a.getTime() - b.getTime();
+  if (typeof a === "boolean" && typeof b === "boolean") return Number(a) - Number(b);
+  return collator.compare(String(a), String(b));
+}
+function normalize(def, v) {
+  if (isBlank(v)) return null;
+  if (def.type === "number") {
+    const n = typeof v === "number" ? v : Number(v);
+    return Number.isNaN(n) ? null : n;
+  }
+  if (def.type === "date") return toDate(v)?.getTime() ?? null;
+  return v;
+}
+function compareValues(a, b, collator) {
+  const ba = isBlank(a), bb = isBlank(b);
+  if (ba || bb) return ba === bb ? 0 : ba ? 1 : -1;
+  return compareNonBlank(a, b, collator);
+}
+function sortNodes(nodes, sort, resolve, collator) {
+  const keys = sort.map((s) => ({ def: resolve(s.colId), mul: s.dir === "desc" ? -1 : 1 })).filter((k) => !!k.def);
+  if (!keys.length) return nodes;
+  const values = keys.map((k) => nodes.map((n) => {
+    const v = getCellValue(k.def, n.data);
+    return k.def.comparator ? v : normalize(k.def, v);
+  }));
+  const order = nodes.map((_, i) => i);
+  order.sort((i, j) => {
+    for (let k = 0; k < keys.length; k++) {
+      const { def, mul } = keys[k];
+      const a = values[k][i], b = values[k][j];
+      let c;
+      if (def.comparator) {
+        try {
+          c = (Number(def.comparator(a, b, nodes[i].data, nodes[j].data)) || 0) * mul;
+        } catch {
+          warn(`comparator of column "${def.id ?? def.field}" threw; treating values as equal`);
+          c = 0;
+        }
+      } else {
+        const ba = isBlank(a), bb = isBlank(b);
+        c = ba || bb ? ba === bb ? 0 : ba ? 1 : -1 : compareNonBlank(a, b, collator) * mul;
+      }
+      if (c) return c;
+    }
+    return i - j;
+  });
+  return order.map((i) => nodes[i]);
+}
+
 // src/export/csv.ts
 var FORMULA = /^[=+\-@\t\r]/;
 function toCsv(rows, sep = ",") {
@@ -4692,12 +4829,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--) {
@@ -4708,9 +4867,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);
@@ -4721,9 +4882,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;
@@ -4844,7 +5009,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>`;
@@ -4892,6 +5058,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");
@@ -4919,11 +5087,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;
@@ -4968,11 +5138,71 @@ 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]);
+var PAPERS = ["A4", "A3", "A5", "B4", "B5", "letter", "legal"];
+var PORTRAIT_WIDTH = 760;
+var cssStr = (s) => `"${s.replace(/[\\"<\n\r]/g, (c) => c === "\n" ? "\\A " : c === "\r" ? "" : `\\${c.charCodeAt(0).toString(16)} `)}"`;
+var hexOf = (argb) => argb ? `#${argb.slice(2)}` : "";
+function printLines(grid, rows, groupBy) {
+  const out = [];
+  let n = 0;
+  const sort = grid.store.state.sort;
+  const collator = grid.collator();
+  const walk = (list, level) => {
+    if (level >= groupBy.length) {
+      for (const row of list) out.push({ kind: "row", row, n: ++n });
+      return;
+    }
+    const colId = groupBy[level];
+    const def = grid.columns.getNode(colId)?.def;
+    if (!def) return walk(list, level + 1);
+    const buckets = /* @__PURE__ */ new Map();
+    for (const r of list) {
+      const v = getCellValue(def, r);
+      const k = isBlank(v) ? "" : setKey(v);
+      let b = buckets.get(k);
+      if (!b) buckets.set(k, b = { value: v, rows: [] });
+      b.rows.push(r);
+    }
+    const dir = sort.find((x) => x.colId === colId)?.dir === "desc" ? -1 : 1;
+    for (const b of [...buckets.values()].sort((a, c) => compareValues(a.value, c.value, collator) * dir)) {
+      out.push({ kind: "group", colId, value: b.value, rows: b.rows, level });
+      walk(b.rows, level + 1);
+    }
+  };
+  walk(rows, 0);
+  return out;
+}
+var PRINT_CSS = `
+* { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
+body { font: 10.5px/1.45 system-ui, 'Pretendard', 'Malgun Gothic', 'Apple SD Gothic Neo', sans-serif; color: #111827; margin: 0; }
+header { display: flex; justify-content: space-between; align-items: flex-end; gap: 16px; margin: 0 0 10px; padding-bottom: 8px; border-bottom: 2px solid #111827; }
+h1 { font-size: 17px; margin: 0; letter-spacing: -.01em; }
+.sub { margin: 3px 0 0; color: #4b5563; font-size: 11px; }
+.printed { margin: 0; color: #6b7280; font-size: 9.5px; white-space: nowrap; }
+table { border-collapse: collapse; width: 100%; }
+table.fit { table-layout: fixed; }
+th, td { padding: 4px 7px; border-bottom: 1px solid #e5e7eb; vertical-align: top; overflow-wrap: anywhere; font-variant-numeric: tabular-nums; }
+th { background: #f3f4f6; color: #374151; font-weight: 600; text-align: left; vertical-align: bottom; border-bottom: 1.5px solid #9ca3af; border-left: 1px solid #e5e7eb; }
+th.span { text-align: center; }
+th:first-child { border-left: 0; }
+thead { display: table-header-group; }
+tr { break-inside: avoid; page-break-inside: avoid; }
+.num { text-align: right; color: #9ca3af; }
+tr.group td { background: #eef2f7; font-weight: 600; border-top: 1px solid #cbd5e1; break-after: avoid; page-break-after: avoid; }
+tr.group.level-0 td { background: #e2e8f0; }
+tr.total td { font-weight: 700; background: #f3f4f6; border-top: 1.5px solid #111827; border-bottom: 0; }
+`;
 function buildPrintHtml(grid, opts = {}) {
   const cols = exportColumns(grid, opts.columns);
-  const code = grid.store.state.locale.code;
+  const loc = grid.store.state.locale;
+  const code = loc.code;
   const fmts = cols.map((c) => getFormatter(c.def, code));
+  const nf = new Intl.NumberFormat(code);
+  const numbered = opts.rowNumbers ?? !!grid.options.rowNumbers;
+  const align = (def) => ALIGNS.includes(def.align) ? def.align : def.type === "number" ? "right" : def.type === "boolean" ? "center" : "left";
   const chains = cols.map((c) => {
     const chain = [];
     for (let n = c.node; n; n = n.parent) chain.unshift(n);
@@ -4981,7 +5211,7 @@ function buildPrintHtml(grid, opts = {}) {
   const depth = Math.max(1, ...chains.map((ch) => ch.length));
   const head = [];
   for (let level = 0; level < depth; level++) {
-    let tr = "";
+    let tr = level === 0 && numbered ? `<th class="num" rowspan="${depth}">#</th>` : "";
     for (let ci = 0; ci < cols.length; ci++) {
       const chain = chains[ci];
       const leaf = chain.length - 1;
@@ -4990,29 +5220,108 @@ function buildPrintHtml(grid, opts = {}) {
         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>`;
+        tr += `<th colspan="${span}"${span > 1 ? ' class="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>`;
+        const a = align(cols[ci].def);
+        tr += `<th colspan="1" rowspan="${depth - level}"${a === "left" ? "" : ` style="text-align:${a}"`}>${escHtml(header(cols[ci].def, cols[ci].id))}</th>`;
       }
     }
     head.push(`<tr>${tr}</tr>`);
   }
-  const align = (def) => 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 aggText = (c, i, v, agg) => {
+    if (v == null || v === "") return "";
+    if (agg === "count") return nf.format(v);
+    const type = c.def.type ?? (typeof v === "number" ? "number" : v instanceof Date ? "date" : void 0);
+    return type === c.def.type ? fmts[i](v) : getFormatter({ ...c.def, type }, code)(v);
+  };
+  const labelled = (cls, label, values, indent = 0) => {
+    let lead = 0;
+    while (lead < cols.length - 1 && !values[lead]) lead++;
+    lead = Math.max(1, lead);
+    let tr = numbered ? '<td class="num"></td>' : "";
+    tr += `<td colspan="${lead}"${indent ? ` style="padding-left:${7 + indent * 14}px"` : ""}>${escHtml(label)}</td>`;
+    for (let i = lead; i < cols.length; i++) tr += `<td style="text-align:${align(cols[i].def)}">${escHtml(values[i] ?? "")}</td>`;
+    return `<tr class="${cls}">${tr}</tr>`;
+  };
+  const rows = exportRows(grid, opts.rows);
+  const groupBy = opts.groups !== false && !grid.rowModel.server && !grid.options.treeData ? grid.getGroupBy() : [];
+  const probe = opts.styles !== false && cols.some((c) => c.def.cellClass) ? classStyles(grid) : null;
+  let body = "";
+  try {
+    for (const line of printLines(grid, rows, groupBy)) {
+      if (line.kind === "group") {
+        const def = grid.columns.getNode(line.colId)?.def;
+        const value = isBlank(line.value) ? loc.blanks : def ? getFormatter(def, code)(line.value) : String(line.value);
+        const label = `${def ? header(def, line.colId) : line.colId}: ${value} (${nf.format(line.rows.length)})`;
+        const values = cols.map((c, i) => {
+          if (!c.def.aggFunc || groupBy.includes(c.id)) return void 0;
+          try {
+            return aggText(c, i, aggregate(c.def.aggFunc, line.rows.map((r2) => getCellValue(c.def, r2)), line.rows), c.def.aggFunc) || void 0;
+          } catch {
+            return void 0;
+          }
+        });
+        body += labelled(`group level-${Math.min(line.level, 5)}`, label, values, line.level);
+        continue;
+      }
+      const r = line.row;
+      let tr = numbered ? `<td class="num">${line.n}</td>` : "";
+      cols.forEach((c, i) => {
+        const v = getCellValue(c.def, r);
+        const text2 = isBlank(v) ? "" : fmts[i](v);
+        let style = `text-align:${align(c.def)}`;
+        if (probe && c.def.cellClass) {
+          let cls;
+          try {
+            cls = typeof c.def.cellClass === "function" ? c.def.cellClass({ value: v, formatted: text2, row: r, rowIndex: line.n - 1, column: c.def }) : c.def.cellClass;
+          } catch {
+            cls = void 0;
+          }
+          if (cls) {
+            const st = probe.of(cls);
+            if (st.color) style += `;color:${hexOf(st.color)}`;
+            if (st.fill) style += `;background:${hexOf(st.fill)}`;
+            if (st.bold) style += ";font-weight:600";
+          }
+        }
+        tr += `<td style="${style}">${escHtml(text2)}</td>`;
+      });
+      body += `<tr>${tr}</tr>`;
+    }
+  } finally {
+    probe?.dispose();
+  }
+  let foot = "";
+  const summary = opts.summary !== false ? grid.summary() : null;
+  if (summary) {
+    summary.opts.rows.forEach((def, ri) => {
+      const values = cols.map((c, i) => {
+        const spec = def.columns?.[c.id];
+        return spec === void 0 ? void 0 : aggText(c, i, summary.values[ri]?.[c.id], cellSpec(spec).agg) || void 0;
+      });
+      foot += labelled("total", def.label ?? "", values);
+    });
+  }
+  const widths = cols.map((c) => Math.max(1, c.width));
+  const sum = widths.reduce((a, b) => a + b, 0);
+  const paper = PAPERS.includes(opts.paper) ? opts.paper : "A4";
+  const orientation = opts.orientation === "portrait" || opts.orientation === "landscape" ? opts.orientation : sum + (numbered ? 40 : 0) > PORTRAIT_WIDTH ? "landscape" : "portrait";
+  const fit = opts.fitToWidth !== false;
+  const colgroup = fit ? `<colgroup>${numbered ? '<col style="width:40px">' : ""}${widths.map((w) => `<col style="width:${Math.round(w / sum * 1e3) / 10}%">`).join("")}</colgroup>` : "";
   const title = escHtml(opts.title ?? document.title ?? "");
+  const printed = opts.printedAt !== false ? new Intl.DateTimeFormat(code, { dateStyle: "medium", timeStyle: "short" }).format(/* @__PURE__ */ new Date()) : "";
+  const heading = opts.title || opts.subtitle ? `<div>${opts.title ? `<h1>${title}</h1>` : ""}${opts.subtitle ? `<p class="sub">${escHtml(opts.subtitle)}</p>` : ""}</div>` : "<div></div>";
+  const top = opts.title || opts.subtitle || printed ? `<header>${heading}${printed ? `<p class="printed">${escHtml(printed)}</p>` : ""}</header>` : "";
+  const small = "font: 8.5px system-ui, sans-serif; color: #6b7280;";
+  const page = [
+    `size: ${paper} ${orientation}; margin: 12mm 12mm 14mm;`,
+    opts.footer ? `@bottom-left { content: ${cssStr(opts.footer)}; ${small} }` : "",
+    opts.pageNumbers !== false ? `@bottom-right { content: counter(page) " / " counter(pages); ${small} }` : ""
+  ].join(" ");
+  const stripes = opts.striped !== false ? "tbody tr:not(.group):nth-child(even) td { background: #f9fafb; }" : "";
   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>`;
+@page { ${page} }${PRINT_CSS}${stripes}
+</style></head><body>${top}<table${fit ? ' class="fit"' : ""}>${colgroup}<thead>${opts.headers === false ? "" : head.join("")}</thead><tbody>${body}</tbody>${foot ? `<tfoot>${foot}</tfoot>` : ""}</table></body></html>`;
 }
 function printHtml(html) {
   if (typeof document === "undefined") return;
@@ -5048,7 +5357,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);
@@ -5559,7 +5869,7 @@ function drawScatter(root, spec, series, top, bottom, nf, short) {
 
 // src/interactions/charts.ts
 var MAX_SERIES = 12;
-var MAX_ROWS = 500;
+var MAX_ROWS2 = 500;
 var TYPES = ["bar", "stackedBar", "line", "area", "combo", "pie", "donut", "scatter"];
 var GridCharts = class {
   constructor(grid) {
@@ -5577,7 +5887,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);
         }
@@ -5585,7 +5895,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";
@@ -5659,58 +5969,6 @@ var GridCharts = class {
   }
 };
 
-// src/rows/sort.ts
-function compareNonBlank(a, b, collator) {
-  if (typeof a === "number" && typeof b === "number") return a - b;
-  if (a instanceof Date && b instanceof Date) return a.getTime() - b.getTime();
-  if (typeof a === "boolean" && typeof b === "boolean") return Number(a) - Number(b);
-  return collator.compare(String(a), String(b));
-}
-function normalize(def, v) {
-  if (isBlank(v)) return null;
-  if (def.type === "number") {
-    const n = typeof v === "number" ? v : Number(v);
-    return Number.isNaN(n) ? null : n;
-  }
-  if (def.type === "date") return toDate(v)?.getTime() ?? null;
-  return v;
-}
-function compareValues(a, b, collator) {
-  const ba = isBlank(a), bb = isBlank(b);
-  if (ba || bb) return ba === bb ? 0 : ba ? 1 : -1;
-  return compareNonBlank(a, b, collator);
-}
-function sortNodes(nodes, sort, resolve, collator) {
-  const keys = sort.map((s) => ({ def: resolve(s.colId), mul: s.dir === "desc" ? -1 : 1 })).filter((k) => !!k.def);
-  if (!keys.length) return nodes;
-  const values = keys.map((k) => nodes.map((n) => {
-    const v = getCellValue(k.def, n.data);
-    return k.def.comparator ? v : normalize(k.def, v);
-  }));
-  const order = nodes.map((_, i) => i);
-  order.sort((i, j) => {
-    for (let k = 0; k < keys.length; k++) {
-      const { def, mul } = keys[k];
-      const a = values[k][i], b = values[k][j];
-      let c;
-      if (def.comparator) {
-        try {
-          c = (Number(def.comparator(a, b, nodes[i].data, nodes[j].data)) || 0) * mul;
-        } catch {
-          warn(`comparator of column "${def.id ?? def.field}" threw; treating values as equal`);
-          c = 0;
-        }
-      } else {
-        const ba = isBlank(a), bb = isBlank(b);
-        c = ba || bb ? ba === bb ? 0 : ba ? 1 : -1 : compareNonBlank(a, b, collator) * mul;
-      }
-      if (c) return c;
-    }
-    return i - j;
-  });
-  return order.map((i) => nodes[i]);
-}
-
 // src/pivot.ts
 var SOURCE = /* @__PURE__ */ new WeakMap();
 var aggName = (a) => typeof a === "function" ? "custom" : a;
@@ -5836,7 +6094,7 @@ function buildPivot(source, config, defOf, labels, locale) {
 }
 
 // src/version.ts
-var version = "1.0.0";
+var version = "1.1.0";
 
 // src/license.ts
 var PUBLIC_KEY = { kty: "EC", crv: "P-256", x: "sUTKkglZmk-HMKPNub8p7AeLBKesHCU8irIkw9rJlbE", y: "j0U_aKRDR7iApY9UpaD3hUemhBLZJwDv9-QiT_hUyw8" };
@@ -5862,6 +6120,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(".") : [];
@@ -5869,7 +6133,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" };
   }
@@ -6479,17 +6743,25 @@ var RowModel = class {
 
 // 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) {
+  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;
   }
@@ -6498,9 +6770,15 @@ var ServerGroups = class {
   }
   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;
@@ -6508,15 +6786,33 @@ var ServerGroups = class {
   }
   load(path, keys, level) {
     if (this.levels.has(path)) return;
-    const gen = this.gen;
     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: 0,
-        end: LEVEL_ROWS,
+        start,
+        end,
         sort: [...q.sort],
         filters: { ...q.filters },
         quickFilter: q.quickFilter,
@@ -6527,11 +6823,11 @@ var ServerGroups = class {
     } catch (e) {
       result = Promise.reject(e);
     }
-    result.then((res) => {
+    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 nodes = last ? rows.map((data, i) => ({ id: this.getRowId ? String(this.getRowId(data)) : autoId(data), data, sourceIndex: i, level })) : rows.map((data) => {
+      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)}`;
@@ -6545,14 +6841,23 @@ var ServerGroups = class {
           group: { key, colId, value, rows: [], expanded: false, count, aggregates: data, keys: [...keys, value] }
         };
       });
-      this.levels.set(path, { state: "loaded", nodes });
+      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: [] });
+      this.levels.set(path, { state: "failed", nodes: [], retryAt: Date.now() + RETRY_MS });
       this.touch();
-      this.onChange();
+      this.onFailed(start, end, error);
     });
   }
   isOpen(d, key, level) {
@@ -6562,17 +6867,24 @@ var ServerGroups = class {
   }
   /** Display rows: open groups show their loaded children, or a loading row while they arrive. */
   rows(d, displayVersion) {
-    if (this.display && this.builtFor === displayVersion) return this.display;
+    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) => {
-      const lv = this.levels.get(path);
+      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 !== "loaded") {
-        if (lv.state === "loading") out.push({ id: `loading:${path}`, data: {}, sourceIndex: -1, kind: "loading", level });
+      if (lv.state === "failed") {
+        const at = lv.retryAt ?? 0;
+        retryAt = retryAt ? Math.min(retryAt, at) : at;
         return;
       }
       for (const n of lv.nodes) {
@@ -6586,8 +6898,10 @@ var ServerGroups = class {
         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;
@@ -6621,7 +6935,6 @@ var ServerGroups = class {
 };
 
 // src/rows/serverRowModel.ts
-var RETRY_MS = 3e3;
 var NO_OFFSETS = new Float64Array(0);
 var ServerRowModel = class {
   constructor(deps) {
@@ -6655,7 +6968,15 @@ var ServerRowModel = class {
     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 = new ServerGroups(this.deps.datasource, this.deps.getRowId, [...groupBy], q2, () => this.deps.onLoaded(0, 0, null));
+        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;
@@ -6663,6 +6984,7 @@ var ServerRowModel = class {
       return;
     }
     if (this.groups) {
+      this.groups.dispose();
       this.groups = null;
       this.query = null;
       this.touch();
@@ -7066,22 +7388,30 @@ var FilterBuilder = class {
       del.addEventListener("click", () => remove(state));
       return state;
     };
-    const groupRow = (g) => {
+    const keptRow = (kept, label) => {
       const rowEl = el("div", "fg-fb-row fg-fb-group");
       const text2 = el("span", "fg-fb-group-label");
-      text2.textContent = `( ${g.conditions.length} \xD7 ${loc[g.operator]} )`;
+      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: () => g };
+      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("conditions" in c ? groupRow(c) : conditionRow(c));
+    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", () => {
@@ -7279,7 +7609,7 @@ 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(),
@@ -7449,35 +7779,68 @@ var Grid = class {
     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") || !tx || typeof tx !== "object") return result;
-    const data = this.store.state.data;
+    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 (data.includes(r)) return this.rowModel.idOf(r);
+      if (present.has(r)) return this.rowModel.idOf(r);
       try {
         return getId ? String(getId(r)) : null;
       } catch {
         return null;
       }
     };
-    const byId = new Map(data.map((r) => [this.rowModel.idOf(r), r]));
     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);
     }
-    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 = [];
     for (const r of tx.update ?? []) {
       const k = keyOf(r);
       const row = k === null ? void 0 : byId.get(k);
@@ -7485,7 +7848,9 @@ var Grid = class {
         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}`);
@@ -7494,24 +7859,15 @@ var Grid = class {
     }
     const added = cleanRows(Array.isArray(tx.add) ? tx.add : []);
     result.added.push(...added);
-    if (!result.added.length && !result.updated.length && !result.removed.length) {
-      if (result.notFound.length) this.events.emit("transactionApplied", result);
-      return result;
+    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);
-    this.editVersion++;
-    this.renderer.invalidateHeights();
-    this.keepRange = true;
-    try {
-      this.replaceData(next);
-    } finally {
-      this.keepRange = false;
-    }
-    if (flashKeys.length && this.options.flashCells !== false) this.flash(flashKeys);
-    this.events.emit("transactionApplied", result);
-    return result;
+    return next;
   }
   applyTransactionAsync(tx) {
     if (!tx || typeof tx !== "object") return;
@@ -7522,12 +7878,7 @@ var Grid = class {
       const queue = this.txQueue;
       this.txQueue = [];
       if (this.destroyed || !queue.length) return;
-      this.applyTransaction({
-        add: queue.flatMap((t) => t.add ?? []),
-        addIndex: queue.find((t) => typeof t.addIndex === "number")?.addIndex,
-        update: queue.flatMap((t) => t.update ?? []),
-        remove: queue.flatMap((t) => t.remove ?? [])
-      });
+      this.applyTransactions(queue);
     }, 50);
   }
   setAdvancedFilter(filter) {
@@ -7543,6 +7894,8 @@ var Grid = class {
   }
   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(),
@@ -7550,9 +7903,9 @@ var Grid = class {
       sort: s.sort.map((x) => ({ ...x })),
       filters: JSON.parse(JSON.stringify(s.filters)),
       quickFilter: s.quickFilter,
-      groupBy: [...this.groupBy],
+      groupBy: [...groupBy],
       pivot: this.pivotCfg ? JSON.parse(JSON.stringify(this.pivotCfg)) : null,
-      expanded: Object.fromEntries(this.expanded),
+      expanded: Object.fromEntries(expanded),
       selected: [...s.selected]
     };
     if (this.options.pagination) {
@@ -7583,8 +7936,12 @@ var Grid = class {
     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") {
-      this.expanded = new Map(Object.entries(state.expanded).filter(([, v]) => typeof v === "boolean"));
-      this.displayChanged();
+      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);
@@ -8108,7 +8465,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] ?? []));
@@ -8139,6 +8496,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);
   }
@@ -8154,24 +8515,21 @@ 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();
+    if (text2) this.clearCells(true);
     return text2;
   }
   copyToClipboard(headers, rows = false) {
@@ -8430,10 +8788,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 }] : [];
@@ -8443,7 +8805,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);
@@ -8545,8 +8907,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() {
@@ -8950,7 +9313,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()),
@@ -9021,26 +9384,32 @@ function exportWorkbook(filename, sheets) {
 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)) q.set(k, typeof v === "string" ? v : JSON.stringify(v));
+    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 ${url}`);
+  if (!res.ok) throw new Error(`HTTP ${res.status} from ${where}`);
   const text2 = await res.text();
-  return text2 ? JSON.parse(text2) : null;
+  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 ?? [], total };
+  return { rows: (rows ?? []).filter((r) => r !== null && typeof r === "object"), total };
 }
 function restDatasource(url, options = {}) {
   return {
@@ -9054,6 +9423,10 @@ function restDatasource(url, options = {}) {
         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);
@@ -9061,12 +9434,20 @@ function restDatasource(url, options = {}) {
     }
   };
 }
-async function saveChanges(grid, url, options = {}) {
-  if (!grid.hasChanges()) return null;
+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 json = await send(url, "POST", { created, updated, deleted, ...options.params?.() ?? {} }, options);
-  grid.commitChanges();
-  return json;
+  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: "" });