@freegridjs/core 0.7.1 → 0.8.0

package/dist/index.js

@@ -50,6 +50,15 @@ function filterTypeOf(def) {
       return "text";
   }
 }
+function cellEditable(def, row, rowIndex) {
+  const e = def.editable;
+  if (typeof e !== "function") return !!e;
+  try {
+    return !!e({ value: def.valueGetter ? def.valueGetter(row) : def.field ? row[def.field] : void 0, row, rowIndex, column: def });
+  } catch {
+    return false;
+  }
+}
 var isSortable = (def) => def.id !== SELECT_COL_ID && def.sortable !== false;
 var isResizable = (def) => def.id !== SELECT_COL_ID && def.resizable !== false;
 function clampWidth(def, w) {
@@ -387,8 +396,8 @@ function quickTokens(q) {
   const t = q.trim().toLowerCase();
   return t ? t.split(/\s+/) : [];
 }
-function matchesQuick(tokens, text) {
-  return tokens.every((t) => text.includes(t));
+function matchesQuick(tokens, text2) {
+  return tokens.every((t) => text2.includes(t));
 }
 
 // src/i18n/format.ts
@@ -445,13 +454,13 @@ function create(type, format, locale) {
     }
     case "date": {
       if (locale.toLowerCase().startsWith("ko") && (format === void 0 || format === "date" || format === "datetime")) {
-        const pad2 = (n) => String(n).padStart(2, "0");
+        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()}-${pad2(d.getMonth() + 1)}-${pad2(d.getDate())}`;
-          return withTime ? `${day} ${pad2(d.getHours())}:${pad2(d.getMinutes())}` : day;
+          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;
@@ -482,6 +491,216 @@ function getFormatter(def, locale) {
   return fmt;
 }
 
+// src/formula.ts
+var FormulaError = class extends Error {
+  constructor(code) {
+    super(code);
+    this.code = code;
+  }
+};
+function tokenize(src) {
+  const out = [];
+  let i = 0;
+  while (i < src.length) {
+    const c = src[i];
+    if (/\s/.test(c)) {
+      i++;
+    } else if (/[0-9.]/.test(c)) {
+      const m = /^(?:\d+\.?\d*|\.\d+)(?:e[+-]?\d+)?/i.exec(src.slice(i));
+      if (!m) throw new FormulaError("#ERROR!");
+      out.push({ t: "num", v: Number(m[0]) });
+      i += m[0].length;
+    } else if (c === '"') {
+      let s = "";
+      i++;
+      for (; ; ) {
+        if (i >= src.length) throw new FormulaError("#ERROR!");
+        if (src[i] === '"') {
+          if (src[i + 1] === '"') {
+            s += '"';
+            i += 2;
+            continue;
+          }
+          i++;
+          break;
+        }
+        s += src[i++];
+      }
+      out.push({ t: "str", v: s });
+    } else if (c === "[") {
+      const end = src.indexOf("]", i);
+      if (end < 0) throw new FormulaError("#ERROR!");
+      out.push({ t: "id", v: src.slice(i + 1, end) });
+      i = end + 1;
+    } else if (/[A-Za-z_À-￿]/.test(c)) {
+      const m = /^[A-Za-z_À-￿][\wÀ-￿]*/.exec(src.slice(i));
+      out.push({ t: "id", v: m[0] });
+      i += m[0].length;
+    } else {
+      const two = src.slice(i, i + 2);
+      if (two === "<>" || two === "<=" || two === ">=") {
+        out.push({ t: "op", v: two });
+        i += 2;
+      } else if ("+-*/%^&=<>(),".includes(c)) {
+        out.push({ t: "op", v: c });
+        i++;
+      } else throw new FormulaError("#ERROR!");
+    }
+  }
+  return out;
+}
+var isBlankValue = (v) => v === null || v === void 0 || v === "";
+function num(v) {
+  if (typeof v === "number") return v;
+  if (typeof v === "boolean") return v ? 1 : 0;
+  if (isBlankValue(v)) return 0;
+  if (typeof v === "string" && v.trim() !== "" && Number.isFinite(Number(v))) return Number(v);
+  throw new FormulaError("#VALUE!");
+}
+var text = (v) => isBlankValue(v) ? "" : typeof v === "boolean" ? v ? "TRUE" : "FALSE" : String(v);
+function round(x, digits) {
+  const d = Math.trunc(digits);
+  const r = Number(`${Math.round(Number(`${Math.abs(x)}e${d}`))}e${-d}`);
+  return x < 0 ? -r : r;
+}
+var FUNCS = {
+  ROUND: (a) => round(num(a[0]), a.length > 1 ? num(a[1]) : 0),
+  ABS: (a) => Math.abs(num(a[0])),
+  MIN: (a) => a.length ? Math.min(...a.map(num)) : 0,
+  MAX: (a) => a.length ? Math.max(...a.map(num)) : 0,
+  SUM: (a) => a.reduce((s, v) => s + num(v), 0),
+  AVG: (a) => {
+    if (!a.length) throw new FormulaError("#DIV/0!");
+    return a.reduce((s, v) => s + num(v), 0) / a.length;
+  }
+};
+function compare(a, b) {
+  const bothNum = (typeof a === "number" || isBlankValue(a)) && (typeof b === "number" || isBlankValue(b));
+  if (bothNum) return num(a) - num(b);
+  return text(a).localeCompare(text(b), void 0, { sensitivity: "accent" });
+}
+var Parser = class {
+  constructor(tokens, resolve) {
+    this.tokens = tokens;
+    this.resolve = resolve;
+    this.i = 0;
+  }
+  parse() {
+    const v = this.comparison();
+    if (this.i < this.tokens.length) throw new FormulaError("#ERROR!");
+    return v;
+  }
+  peek(v) {
+    const t = this.tokens[this.i];
+    return !!t && t.t === "op" && (v === void 0 || t.v === v);
+  }
+  take(v) {
+    if (!this.peek(v)) return false;
+    this.i++;
+    return true;
+  }
+  comparison() {
+    const a = this.concat();
+    for (const op of ["=", "<>", "<=", ">=", "<", ">"]) {
+      if (this.take(op)) {
+        const c = compare(a, this.concat());
+        return op === "=" ? c === 0 : op === "<>" ? c !== 0 : op === "<" ? c < 0 : op === ">" ? c > 0 : op === "<=" ? c <= 0 : c >= 0;
+      }
+    }
+    return a;
+  }
+  concat() {
+    let v = this.additive();
+    while (this.take("&")) v = text(v) + text(this.additive());
+    return v;
+  }
+  additive() {
+    let v = this.multiplicative();
+    for (; ; ) {
+      if (this.take("+")) v = num(v) + num(this.multiplicative());
+      else if (this.take("-")) v = num(v) - num(this.multiplicative());
+      else return v;
+    }
+  }
+  multiplicative() {
+    let v = this.unary();
+    for (; ; ) {
+      if (this.take("*")) v = num(v) * num(this.unary());
+      else if (this.take("/") || this.take("%")) {
+        const op = this.tokens[this.i - 1].v;
+        const d = num(this.unary());
+        if (d === 0) throw new FormulaError("#DIV/0!");
+        v = op === "/" ? num(v) / d : num(v) % d;
+      } else return v;
+    }
+  }
+  unary() {
+    if (this.take("-")) return -num(this.unary());
+    if (this.take("+")) return num(this.unary());
+    return this.power();
+  }
+  power() {
+    const base = this.primary();
+    if (this.take("^")) return num(base) ** num(this.unary());
+    return base;
+  }
+  primary() {
+    const t = this.tokens[this.i++];
+    if (!t) throw new FormulaError("#ERROR!");
+    if (t.t === "num" || t.t === "str") return t.v;
+    if (t.t === "op") {
+      if (t.v !== "(") throw new FormulaError("#ERROR!");
+      const v = this.comparison();
+      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 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) {
+  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!";
+  }
+}
+var isFormula = (v) => typeof v === "string" && v.length > 1 && v.startsWith("=");
+
 // src/rows/values.ts
 function getCellValue(def, row) {
   if (def.valueGetter) {
@@ -492,7 +711,9 @@ function getCellValue(def, row) {
       return void 0;
     }
   }
-  return def.field != null ? row[def.field] : 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/summary.ts
@@ -553,6 +774,57 @@ function computeSummary(defs, rows, columnDef) {
   });
 }
 
+// src/merge.ts
+function spanOf(fn, def, row, rowIndex, max) {
+  if (!fn) return 1;
+  let n = 1;
+  try {
+    n = Math.floor(Number(fn({ value: getCellValue(def, row), row, rowIndex })));
+  } catch {
+    n = 1;
+  }
+  return Number.isFinite(n) ? Math.max(1, Math.min(max, n)) : 1;
+}
+function computeSpans(rows, def) {
+  const n = rows.length;
+  const start = new Int32Array(n);
+  const end = new Int32Array(n);
+  if (def.rowSpan) {
+    for (let i = 0; i < n; ) {
+      const len = spanOf(def.rowSpan, def, rows[i], i, n - i);
+      for (let k = i; k < i + len; k++) {
+        start[k] = i;
+        end[k] = i + len - 1;
+      }
+      i += len;
+    }
+    return { start, end };
+  }
+  const same2 = typeof def.merge === "function" ? (a, b) => {
+    try {
+      return !!def.merge(getCellValue(def, rows[a]), getCellValue(def, rows[b]), rows[a], rows[b]);
+    } catch {
+      return false;
+    }
+  } : (() => {
+    const keys = rows.map((r) => {
+      const v = getCellValue(def, r);
+      return isBlank(v) ? null : setKey(v);
+    });
+    return (a, b) => keys[a] !== null && keys[a] === keys[b];
+  })();
+  let s = 0;
+  for (let i = 1; i <= n; i++) {
+    if (i < n && same2(i - 1, i)) continue;
+    for (let k = s; k < i; k++) {
+      start[k] = s;
+      end[k] = i - 1;
+    }
+    s = i;
+  }
+  return { start, end };
+}
+
 // src/viewport.ts
 function rowRange(scrollTop, height, rowHeight, count, overscan = 4) {
   if (count <= 0 || rowHeight <= 0) return { first: 0, last: -1 };
@@ -601,6 +873,7 @@ function rowRangeByOffsets(offsets, scrollTop, height, count, overscan = 4) {
 // src/render/renderer.ts
 var REGIONS2 = ["left", "center", "right"];
 var ROW_OVERSCAN = 6;
+var MAX_COLSPAN_REACH = 8;
 var COL_OVERSCAN = 2;
 var MENU_ICON = '<svg viewBox="0 0 16 16" width="14" height="14" aria-hidden="true"><path d="M3 4h10M3 8h10M3 12h10" stroke="currentColor" stroke-width="1.6" stroke-linecap="round"/></svg>';
 var CHEVRON = '<svg viewBox="0 0 16 16" width="12" height="12" aria-hidden="true"><path d="M6 3.5 10.5 8 6 12.5" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"/></svg>';
@@ -615,6 +888,8 @@ var Renderer = class {
   constructor(host, grid, opts) {
     this.grid = grid;
     this.opts = opts;
+    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() };
     this.pool = { left: [], center: [], right: [] };
     this.frame = 0;
@@ -634,6 +909,9 @@ var Renderer = class {
     this.statusEl = null;
     this.statusKey = "";
     this.pagerEl = null;
+    /** Card view (narrow screens): scroller and canvas of absolutely placed cards. */
+    this.cards = null;
+    this.cardMode = false;
     this.pagerKey = "";
     /** Prefix-sum row tops when rows differ in height (detail rows); null when every row is rowHeight. */
     this.offsets = null;
@@ -641,19 +919,42 @@ var Renderer = class {
     this.details = /* @__PURE__ */ new Map();
     /** First non-system displayed column: holds group labels, tree chevrons and detail toggles. */
     this.firstDataId = "";
+    /** Measured heights per row id (autoRowHeight); cleared when content or widths change. */
+    this.rowHeights = /* @__PURE__ */ new Map();
+    this.heightsVersion = 0;
     /** Column holding group labels: the first scrolling data column, so long labels have room. */
     this.groupLabelId = "";
     this.onScroll = () => {
       if (this.frame) cancelAnimationFrame(this.frame);
       this.frame = 0;
       this.render();
+      this.grid.events.emit("scroll", this.getScroll());
     };
     this.onSideWheel = (e) => {
       if (!e.deltaY) return;
       e.preventDefault();
       this.scroller.scrollTop += e.deltaY;
     };
-    this.root = el("div", "", { role: "grid", tabindex: "0" });
+    this.onCardClick = (e) => {
+      const target = e.target;
+      const card = target.closest(".fg-card");
+      if (!card) return;
+      const i = Number(card.dataset.row);
+      const node = this.grid.rowModel.getRow(i);
+      if (!node || node.kind) return;
+      if (target.closest(".fg-card-check")) {
+        this.grid.selectFromClick(i, true, false);
+        this.invalidate({ rows: true });
+        return;
+      }
+      const colId = target.closest(".fg-card-value")?.dataset.col;
+      const col = colId ? this.grid.columns.getColumn(colId) : void 0;
+      if (!col) return;
+      this.grid.events.emit("cellClick", { row: node.data, rowIndex: i, colId: col.id, value: getCellValue(col.def, node.data), event: e });
+    };
+    this.root = el("div", "", { tabindex: "-1" });
+    this.root.addEventListener("focus", () => this.gridEl.focus({ preventScroll: true }));
+    this.gridEl = el("div", "fg-grid", { role: "grid", tabindex: "0" });
     this.headerEl = el("div", "fg-header", { role: "rowgroup" });
     this.bodyEl = el("div", "fg-body", { role: "rowgroup" });
     const panes = (cls) => ({
@@ -663,6 +964,7 @@ 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");
     this.bodyPanes = panes("fg-body-pane");
     this.canvases = panes("fg-canvas");
     for (const r of REGIONS2) {
@@ -674,9 +976,10 @@ var Renderer = class {
       this.bodyEl.append(this.bodyPanes[r]);
     }
     this.scroller = this.bodyPanes.center;
-    this.overlay = el("div", "fg-overlay", { role: "status" });
+    this.overlay = el("div", "fg-overlay", { "aria-live": "polite" });
     this.main = el("div", "fg-main");
-    this.main.append(this.headerEl, this.bodyEl, this.overlay);
+    this.gridEl.append(this.headerEl, this.bodyEl);
+    this.main.append(this.gridEl, this.overlay);
     this.root.append(this.main);
     host.append(this.root);
     this.applyTheme();
@@ -684,6 +987,19 @@ var Renderer = class {
     this.bodyPanes.left.addEventListener("wheel", this.onSideWheel, { passive: false });
     this.bodyPanes.right.addEventListener("wheel", this.onSideWheel, { passive: false });
   }
+  /** The element that scrolls the rows: the card list when cards are shown. */
+  get activeScroller() {
+    return this.cards?.scroller ?? this.scroller;
+  }
+  getScroll() {
+    const s = this.activeScroller;
+    return { top: s.scrollTop, left: s.scrollLeft };
+  }
+  setScroll(p) {
+    const s = this.activeScroller;
+    if (typeof p?.top === "number" && Number.isFinite(p.top)) s.scrollTop = Math.max(0, p.top);
+    if (typeof p?.left === "number" && Number.isFinite(p.left)) s.scrollLeft = Math.max(0, p.left);
+  }
   applyFont(size, family) {
     if (size) this.root.style.setProperty("--fg-font-size", `${size}px`);
     else this.root.style.removeProperty("--fg-font-size");
@@ -691,7 +1007,13 @@ var Renderer = class {
     else this.root.style.removeProperty("--fg-font");
   }
   applyTheme() {
-    this.root.className = `fg-root fg-theme-${this.grid.store.state.theme}`;
+    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.setAttribute("dir", rtl ? "rtl" : "ltr");
+  }
+  /** Right-to-left layout: the main area is mirrored, so screen deltas along x flip sign. */
+  get rtl() {
+    return this.grid.options.direction === "rtl";
   }
   invalidate(what = {}) {
     if (what.header) this.headerDirty = true;
@@ -714,10 +1036,20 @@ var Renderer = class {
       this.version++;
     }
     const count = rowModel.getRowCount();
-    const lay = rowModel.layout(rh, this.detailHeight());
+    const auto = !!this.grid.options.autoRowHeight && !rowModel.server;
+    const lay = rowModel.layout(rh, this.detailHeight(), auto ? this.rowHeights : void 0, this.heightsVersion);
     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;
+    if (this.useCards()) {
+      this.renderCards(count);
+      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;
+      return;
+    }
     const summary = this.grid.summary();
     const sumRows = summary ? summary.opts.rows.length : 0;
     const sumPos = summary?.opts.position ?? "bottom";
@@ -738,14 +1070,18 @@ var Renderer = class {
     }
     const hScrollbar = this.scroller.offsetHeight - this.scroller.clientHeight;
     this.bodyPanes.left.style.marginBottom = this.bodyPanes.right.style.marginBottom = `${hScrollbar}px`;
-    this.root.setAttribute("aria-rowcount", String(count + columns.depth));
-    this.root.setAttribute("aria-colcount", String(columns.displayed().length));
-    if (options.rowSelection === "multiple") this.root.setAttribute("aria-multiselectable", "true");
+    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-colcount", String(columns.displayed().length));
+    if (options.rowSelection === "multiple") g.setAttribute("aria-multiselectable", "true");
     if (this.headerDirty) {
       this.headerDirty = false;
       this.renderHeader();
     }
     this.renderRows(count);
+    this.updateActiveCell();
+    if (auto) this.measureRows();
     this.renderSummary(count, summary && summary.opts.rows, summary?.values ?? [], sumPinned, sumPos);
     this.pinnedTop = this.renderPinned(this.pinnedTop, "top", this.grid.pinnedRows.top);
     this.pinnedBottom = this.renderPinned(this.pinnedBottom, "bottom", this.grid.pinnedRows.bottom);
@@ -765,11 +1101,12 @@ var Renderer = class {
   /** Place optional sections around the body without ever moving the body (which would reset its scroll). */
   orderSections(summaryPos) {
     const tops = [summaryPos === "top" ? this.summaryEl : null, this.pinnedTop?.el ?? null].filter((x) => !!x);
-    const bottoms = [this.pinnedBottom?.el ?? null, summaryPos === "bottom" ? this.summaryEl : null, this.statusEl, this.pagerEl].filter((x) => !!x);
-    for (const t of tops) if (t.nextElementSibling !== this.bodyEl && !tops.includes(t.nextElementSibling)) this.main.insertBefore(t, this.bodyEl);
+    const bottoms = [this.pinnedBottom?.el ?? null, summaryPos === "bottom" ? this.summaryEl : null].filter((x) => !!x);
+    const after = [this.statusEl, this.pagerEl].filter((x) => !!x);
+    for (const t of tops) if (t.nextElementSibling !== this.bodyEl && !tops.includes(t.nextElementSibling)) this.gridEl.insertBefore(t, this.bodyEl);
     let ref = this.bodyEl;
     for (let i = tops.length - 1; i >= 0; i--) {
-      if (ref.previousElementSibling !== tops[i]) this.main.insertBefore(tops[i], ref);
+      if (ref.previousElementSibling !== tops[i]) this.gridEl.insertBefore(tops[i], ref);
       ref = tops[i];
     }
     ref = this.bodyEl;
@@ -777,6 +1114,25 @@ var Renderer = class {
       if (ref.nextElementSibling !== b) ref.after(b);
       ref = b;
     }
+    ref = this.gridEl;
+    for (const b of after) {
+      if (ref.nextElementSibling !== b) ref.after(b);
+      ref = b;
+    }
+  }
+  /** 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;
+    const cell = this.gridEl.querySelector(".fg-body .fg-cell-focused, .fg-body .fg-row-group .fg-cell-focused");
+    if (prev && prev !== cell) prev.removeAttribute("id");
+    if (!cell) {
+      this.gridEl.removeAttribute("aria-activedescendant");
+      this.activeCellId = "";
+      return;
+    }
+    if (!cell.id) cell.id = `${this.idBase}-cell`;
+    this.activeCellId = cell.id;
+    this.gridEl.setAttribute("aria-activedescendant", cell.id);
   }
   renderPinned(section, position, rows) {
     if (!rows.length) {
@@ -862,7 +1218,26 @@ var Renderer = class {
       return cell;
     }
     const label = el("span", "fg-header-label");
+    const hdef = c.node.def;
     label.textContent = c.label;
+    if (hdef.headerRenderer) {
+      try {
+        const out = hdef.headerRenderer({ header: c.label, column: hdef });
+        if (typeof out === "string") label.innerHTML = out;
+        else label.replaceChildren(out);
+      } catch {
+        warn(`headerRenderer of column "${c.id}" threw; showing the plain header`);
+        label.textContent = c.label;
+      }
+    }
+    if (hdef.headerClass) {
+      try {
+        const extra = typeof hdef.headerClass === "function" ? hdef.headerClass(hdef) : hdef.headerClass;
+        if (extra) cell.classList.add(...extra.split(/\s+/).filter(Boolean));
+      } catch {
+        warn(`headerClass of column "${c.id}" threw`);
+      }
+    }
     cell.append(label);
     if (c.isGroup || !c.column) return cell;
     const def = c.node.def;
@@ -892,26 +1267,27 @@ var Renderer = class {
     return cell;
   }
   selectAllBox(locale) {
-    const rows = this.grid.rowModel.dataRows();
+    const rows = this.grid.selectableRows();
     const sel = this.grid.store.state.selected;
     let n = 0;
     for (const r of rows) if (sel.has(r.id)) n++;
     const box = el("input", "fg-checkbox fg-select-all", { type: "checkbox", tabindex: "-1", "aria-label": locale.selectAllRows });
     box.checked = rows.length > 0 && n === rows.length;
     box.indeterminate = n > 0 && n < rows.length;
-    box.hidden = this.grid.options.rowSelection !== "multiple";
+    box.hidden = this.grid.options.rowSelection !== "multiple" || this.grid.options.headerCheckbox === false;
     return box;
   }
   renderRows(count) {
     const { columns, rowModel, store } = this.grid;
     const { selected, focus } = store.state;
-    const bounds = this.grid.rangeBounds();
+    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);
     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) {
       const cols = r === "center" ? center.slice(cr.first, cr.last + 1) : columns.region(r);
       const map = this.painted[r];
@@ -927,7 +1303,8 @@ var Renderer = class {
         const node = rowModel.getRow(i);
         const isSel = selected.has(node.id);
         const focusCol = focus && focus.rowIndex === i ? focus.colId : "";
-        const inRange = bounds && i >= bounds.r1 && i <= bounds.r2 ? `${bounds.c1}-${bounds.c2}` : "";
+        const hits = allBounds.filter((b) => i >= b.r1 && i <= b.r2);
+        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}`;
@@ -947,7 +1324,7 @@ var Renderer = class {
         if (node.kind === "group") this.paintGroupRow(row.el, node, i, cols, focusCol);
         else if (node.kind === "detail") this.paintDetailRow(row.el, node, i, r);
         else if (node.kind === "loading") this.paintLoadingRow(row.el, i, cols);
-        else this.paintRow(row.el, node, i, cols, isSel, focusCol, inRange ? bounds : null, spans, range.first);
+        else this.paintRow(row.el, node, i, cols, isSel, focusCol, hits, spans, range.first);
       }
     }
   }
@@ -975,22 +1352,40 @@ var Renderer = class {
     while (rowEl.childElementCount > cols.length) rowEl.lastElementChild.remove();
     while (rowEl.childElementCount < cols.length) rowEl.append(el("div", "fg-cell", { role: "gridcell" }));
     let drawsMerge = false;
+    const area = cols.length ? this.grid.columns.region(cols[0].region) : [];
+    const spanning = area.some((c) => c.def.colSpan);
+    let coveredUntil = -1;
+    const posOf = spanning ? new Map(area.map((c, p) => [c.id, p])) : null;
     cols.forEach((col, k) => {
       const cellEl = rowEl.children[k];
       this.paintCell(cellEl, node, i, col, selected, focusCol === col.id);
+      if (posOf) {
+        const p = posOf.get(col.id);
+        if (p <= coveredUntil) cellEl.classList.add("fg-cell-span-hidden");
+        else if (col.def.colSpan && !isSystemCol(col.id)) {
+          const n = spanOf(col.def.colSpan, col.def, node.data, i, area.length - p);
+          if (n > 1) {
+            coveredUntil = p + n - 1;
+            let w = 0;
+            for (let q = p; q <= coveredUntil; q++) w += area[q].width;
+            cellEl.style.width = `${w}px`;
+            cellEl.classList.add("fg-cell-colspan");
+          }
+        }
+      }
       if (col.id === this.firstDataId) this.decorate(cellEl, node);
       cellEl.style.top = cellEl.style.height = cellEl.style.bottom = "";
       const s = spans.get(col.id);
       if (s && s.start[i] !== s.end[i]) {
         if (i === Math.max(s.start[i], first)) {
           cellEl.classList.add("fg-cell-merged");
-          cellEl.style.top = `${-(i - s.start[i]) * rh}px`;
-          cellEl.style.height = `${(s.end[i] - s.start[i] + 1) * rh}px`;
+          cellEl.style.top = `${-(this.rowTop(i) - this.rowTop(s.start[i]))}px`;
+          cellEl.style.height = `${this.rowTop(s.end[i]) + this.rowH(s.end[i]) - this.rowTop(s.start[i])}px`;
           cellEl.style.bottom = "auto";
           drawsMerge = true;
         } else cellEl.classList.add("fg-cell-merge-hidden");
       }
-      if (bounds && col.index >= bounds.c1 && col.index <= bounds.c2 && !isSystemCol(col.id)) cellEl.classList.add("fg-cell-range");
+      if (!isSystemCol(col.id) && bounds.some((b) => col.index >= b.c1 && col.index <= b.c2)) cellEl.classList.add("fg-cell-range");
     });
     rowEl.style.zIndex = drawsMerge ? "1" : "";
   }
@@ -1012,6 +1407,10 @@ var Renderer = class {
       cell.className = `${cls} fg-cell-select`;
       const box = el("input", "fg-checkbox", { type: "checkbox", tabindex: "-1", "aria-label": locale.selectRow });
       box.checked = selected;
+      if (i >= 0 && !node.kind && !this.grid.rowSelectable(node.data)) {
+        box.disabled = true;
+        cell.classList.add("fg-cell-select-locked");
+      }
       cell.replaceChildren(box);
       return;
     }
@@ -1029,6 +1428,8 @@ var Renderer = class {
       }
     }
     if (this.grid.tracker.isDirty(node.data, def.field)) cls += " fg-cell-dirty";
+    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);
     cell.className = cls;
     if (!def.renderer) {
@@ -1145,17 +1546,55 @@ var Renderer = class {
     const value = values[col.id];
     const s = cellSpec(spec);
     const code = this.grid.store.state.locale.code;
-    let text;
-    if (value == null || value === "") text = "";
-    else if (typeof value === "string") text = value;
-    else if (s.agg === "count") text = new Intl.NumberFormat(code).format(value);
+    let text2;
+    if (value == null || value === "") text2 = "";
+    else if (typeof value === "string") text2 = value;
+    else if (s.agg === "count") text2 = new Intl.NumberFormat(code).format(value);
     else {
       const type = cd.type ?? (typeof value === "number" ? "number" : value instanceof Date ? "date" : void 0);
-      text = getFormatter({ ...cd, type, format: s.format ?? cd.format }, code)(value);
+      text2 = getFormatter({ ...cd, type, format: s.format ?? cd.format }, code)(value);
     }
-    cell.textContent = s.prefix && text ? `${s.prefix} ${text}` : text;
+    cell.textContent = s.prefix && text2 ? `${s.prefix} ${text2}` : text2;
     return cell;
   }
+  /** Forget measured row heights (data, widths or fonts changed); rows are measured again on screen. */
+  invalidateHeights() {
+    if (!this.rowHeights.size) return;
+    this.rowHeights.clear();
+    this.heightsVersion++;
+  }
+  /** Measure wrapped cells of the painted rows; when a height changes, lay out again next frame. */
+  measureRows() {
+    const base = this.opts.rowHeight;
+    const need = /* @__PURE__ */ new Map();
+    for (const r of REGIONS2) {
+      for (const [i, row] of this.painted[r]) {
+        const node = this.grid.rowModel.getRow(i);
+        if (!node || node.kind) continue;
+        let h = need.get(i) ?? base;
+        for (const cell of row.el.querySelectorAll(".fg-cell-wrap")) {
+          if (cell.classList.contains("fg-cell-merged") || cell.classList.contains("fg-cell-merge-hidden")) continue;
+          h = Math.max(h, Math.ceil(cell.scrollHeight));
+        }
+        need.set(i, h);
+      }
+    }
+    let changed = false;
+    for (const [i, h] of need) {
+      const id = this.grid.rowModel.getRow(i).id;
+      const cur = this.rowHeights.get(id) ?? base;
+      if (Math.abs(cur - h) > 1) {
+        if (h === base) this.rowHeights.delete(id);
+        else this.rowHeights.set(id, h);
+        changed = true;
+      }
+    }
+    if (changed) {
+      this.heightsVersion++;
+      this.version++;
+      this.schedule();
+    }
+  }
   detailHeight() {
     const h = this.grid.options.detailHeight;
     return typeof h === "number" && h > 0 ? h : 240;
@@ -1189,12 +1628,13 @@ var Renderer = class {
     const lead = [];
     if (tree) {
       if (node.hasChildren) {
-        const b = el("button", node.expanded ? "fg-tree-toggle fg-expanded" : "fg-tree-toggle", {
+        const b = el("button", node.expanded ? "fg-tree-toggle fg-expanded" : node.loading ? "fg-tree-toggle fg-tree-loading" : "fg-tree-toggle", {
           type: "button",
           tabindex: "-1",
           "aria-label": node.expanded ? loc.collapseAll : loc.expandAll,
           "aria-expanded": String(!!node.expanded)
         });
+        if (node.loading) b.setAttribute("aria-busy", "true");
         b.innerHTML = CHEVRON;
         lead.push(b);
       } else lead.push(el("span", "fg-tree-spacer", { "aria-hidden": "true" }));
@@ -1356,10 +1796,10 @@ var Renderer = class {
       label.append(sel);
       parts.push(label);
     }
-    const btn = (action, text, label, disabled) => {
+    const btn = (action, text2, label, disabled) => {
       const b = el("button", "fg-pager-btn", { type: "button", "aria-label": label, title: label });
       b.dataset.action = action;
-      b.textContent = text;
+      b.textContent = text2;
       b.disabled = disabled;
       return b;
     };
@@ -1379,11 +1819,98 @@ var Renderer = class {
     if (this.root.querySelector(".fg-free-badge")) return;
     const a = el("a", "fg-free-badge", { href: "https://freegrid.app/pricing/", target: "_blank", rel: "noopener" });
     a.innerHTML = '<svg viewBox="0 0 32 32" width="14" height="14" aria-hidden="true"><rect width="32" height="32" rx="7" fill="#0E1726"/><path d="M7 11.5h18M7 16.5h18M7 21.5h18M13 7v18" stroke="#fff" stroke-width="2" stroke-linecap="round"/><rect x="14" y="12.5" width="11" height="3" rx="1" fill="#F2A900"/></svg>';
-    const text = el("span");
-    text.textContent = `FreeGrid \xB7 ${this.grid.store.state.locale.freeBadge}`;
-    a.append(text);
+    const text2 = el("span");
+    text2.textContent = `FreeGrid \xB7 ${this.grid.store.state.locale.freeBadge}`;
+    a.append(text2);
     this.root.append(a);
   }
+  /** Card view applies when enabled and the grid is narrower than the breakpoint. */
+  useCards() {
+    const opt = this.grid.options.cardView;
+    const bp = opt === true ? 640 : typeof opt === "number" ? opt : -1;
+    const on = bp > 0 && this.main.clientWidth < bp;
+    if (on !== this.cardMode) {
+      this.cardMode = on;
+      this.root.classList.toggle("fg-card-mode", on);
+      if (!on && this.cards) {
+        this.cards.scroller.remove();
+        this.cards = null;
+      }
+      this.version++;
+    }
+    return on;
+  }
+  /** Rows as cards: a check box (with row selection) and one "header: value" line per data column. */
+  renderCards(count) {
+    const { grid } = this;
+    if (!this.cards) {
+      const scroller2 = el("div", "fg-cards", { role: "list" });
+      const canvas2 = el("div", "fg-cards-canvas");
+      scroller2.append(canvas2);
+      this.main.insertBefore(scroller2, this.overlay);
+      scroller2.addEventListener("scroll", () => {
+        this.schedule();
+        this.grid.events.emit("scroll", this.getScroll());
+      }, { passive: true });
+      scroller2.addEventListener("click", this.onCardClick);
+      this.cards = { scroller: scroller2, canvas: canvas2 };
+    }
+    const { scroller, canvas } = this.cards;
+    const cols = grid.columns.displayed().filter((c) => !isSystemCol(c.id));
+    const line = Math.round(this.opts.rowHeight * 0.75);
+    const select = !!grid.options.rowSelection;
+    const cardH = 20 + cols.length * line + (select ? line : 0);
+    const gap = 10;
+    canvas.style.height = `${count * (cardH + gap)}px`;
+    const first = Math.max(0, Math.floor(scroller.scrollTop / (cardH + gap)) - 2);
+    const last = Math.min(count - 1, Math.ceil((scroller.scrollTop + (scroller.clientHeight || 800)) / (cardH + gap)) + 2);
+    const { selected, locale } = grid.store.state;
+    const out = [];
+    for (let i = first; i <= last; i++) {
+      const node = grid.rowModel.getRow(i);
+      if (!node) continue;
+      const card = el("div", node.kind ? "fg-card fg-card-other" : selected.has(node.id) ? "fg-card fg-card-selected" : "fg-card", { role: "listitem" });
+      card.dataset.row = String(i);
+      card.style.transform = `translateY(${i * (cardH + gap)}px)`;
+      card.style.height = `${cardH}px`;
+      card.style.setProperty("--fg-card-line", `${line}px`);
+      if (node.kind === "group" && node.group) {
+        const def = grid.columns.getNode(node.group.colId)?.def;
+        card.textContent = `${def?.header ?? node.group.colId}: ${String(node.group.value ?? locale.blanks)} (${node.group.rows.length})`;
+      } else if (!node.kind) {
+        if (select) {
+          const head = el("label", "fg-card-head");
+          const box = el("input", "fg-card-check fg-checkbox", { type: "checkbox", "aria-label": locale.selectRow });
+          box.checked = selected.has(node.id);
+          box.disabled = !grid.rowSelectable(node.data);
+          head.append(box, document.createTextNode(`#${i + 1}`));
+          card.append(head);
+        }
+        for (const col of cols) {
+          const lineEl = el("div", "fg-card-line");
+          const label = el("span", "fg-card-label");
+          label.textContent = col.def.header ?? col.def.field ?? col.id;
+          const value = el("span", "fg-card-value");
+          value.dataset.col = col.id;
+          const v = getCellValue(col.def, node.data);
+          const formatted = getFormatter(col.def, locale.code)(v);
+          if (col.def.renderer) {
+            try {
+              const r = col.def.renderer({ value: v, formatted, row: node.data, rowIndex: i, column: col.def });
+              if (typeof r === "string") value.innerHTML = r;
+              else value.replaceChildren(r);
+            } catch {
+              value.textContent = formatted;
+            }
+          } else value.textContent = formatted;
+          lineEl.append(label, value);
+          card.append(lineEl);
+        }
+      }
+      out.push(card);
+    }
+    canvas.replaceChildren(...out);
+  }
   /** Forget cached detail panels (one master, or all). */
   dropDetail(id) {
     if (id === void 0) this.details.clear();
@@ -1393,14 +1920,14 @@ var Renderer = class {
     return this.lastRange;
   }
   /** Text width in px using the grid font; falls back to 0.6em per char without canvas. */
-  measureText(text, bold) {
+  measureText(text2, bold) {
     const cs = getComputedStyle(this.main);
     const size = parseFloat(getComputedStyle(this.root).getPropertyValue("--fg-font-size")) || 13;
     if (this.measureCtx === void 0) this.measureCtx = document.createElement("canvas").getContext("2d");
     const ctx = this.measureCtx;
-    if (!ctx) return text.length * size * 0.6;
+    if (!ctx) return text2.length * size * 0.6;
     ctx.font = `${bold ? 600 : 400} ${size}px ${cs.fontFamily || "sans-serif"}`;
-    return ctx.measureText(text).width;
+    return ctx.measureText(text2).width;
   }
   scrollToRow(index) {
     this.scroller.scrollTop = this.rowTop(Math.max(0, Math.min(index, this.grid.rowModel.getRowCount())));
@@ -1486,7 +2013,7 @@ var GroupPanel = class {
       window.addEventListener("pointerup", up);
     };
     this.el = el("div", "fg-group-panel", { role: "toolbar" });
-    grid.renderer.main.insertBefore(this.el, grid.renderer.headerEl);
+    grid.renderer.main.insertBefore(this.el, grid.renderer.gridEl);
     this.el.addEventListener("click", this.onClick);
     this.el.addEventListener("pointerdown", this.onPointerDown);
     this.refresh();
@@ -1597,6 +2124,7 @@ var en = {
   pasteHint: "Clipboard access was blocked. Press Ctrl+V to paste.",
   required: "This field is required",
   invalidValue: "Invalid value",
+  duplicate: "This value is already used",
   undo: "Undo",
   redo: "Redo",
   deleteRows: "Delete selected rows",
@@ -1702,6 +2230,25 @@ function resolveLocale(input, navLangs = navigatorLanguages()) {
   return en_default;
 }
 
+// src/dom.ts
+function popupParent(root) {
+  const r = root.getRootNode();
+  return typeof ShadowRoot !== "undefined" && r instanceof ShadowRoot ? r : document.body;
+}
+function elementAt(root, x, y) {
+  const r = root.getRootNode();
+  return (typeof r.elementFromPoint === "function" ? r.elementFromPoint(x, y) : null) ?? document.elementFromPoint(x, y);
+}
+function activeElement(root) {
+  const r = root.getRootNode();
+  return r.activeElement ?? document.activeElement;
+}
+function eventInside(e, ...els) {
+  const path = typeof e.composedPath === "function" ? e.composedPath() : [];
+  if (path.length) return els.some((el2) => !!el2 && path.includes(el2));
+  return els.some((el2) => !!el2 && el2.contains(e.target));
+}
+
 // src/keyboard.ts
 var NAV_KEYS = /* @__PURE__ */ new Set(["ArrowUp", "ArrowDown", "ArrowLeft", "ArrowRight", "Tab", "Home", "End", "PageUp", "PageDown"]);
 function nextFocus(key, mods, p, s) {
@@ -1734,6 +2281,10 @@ function nextFocus(key, mods, p, s) {
   }
 }
 
+// src/registry.ts
+var liveGrids = /* @__PURE__ */ new Map();
+var gridOfRoot = (root) => root ? liveGrids.get(root) : void 0;
+
 // src/interactions/body.ts
 var DEFAULT_KEYMAP = {
   Enter: "edit",
@@ -1755,10 +2306,17 @@ function comboOf(e) {
   return parts.join("+");
 }
 var DRAG_THRESHOLD2 = 3;
+function mirrored(grid, e) {
+  if (!grid.renderer.rtl) return e.key;
+  return e.key === "ArrowLeft" ? "ArrowRight" : e.key === "ArrowRight" ? "ArrowLeft" : e.key;
+}
 function attachBody(grid) {
   const { renderer } = grid;
   const body = renderer.bodyEl;
   const root = renderer.root;
+  const keyOf = (e) => mirrored(grid, e);
+  let lastPointer = "mouse";
+  let pressTimer = 0;
   let suppressClick = false;
   const toEvent = (e) => {
     const hit = renderer.cellAt(e.target);
@@ -1773,7 +2331,7 @@ function attachBody(grid) {
     const btn = e.target.closest?.(".fg-group-toggle, .fg-tree-toggle, .fg-detail-toggle");
     const hit = btn && renderer.cellAt(e.target);
     if (!hit) return false;
-    root.focus({ preventScroll: true });
+    renderer.gridEl.focus({ preventScroll: true });
     grid.setFocus(hit.rowIndex, hit.colId);
     grid.setRange(null);
     const node = grid.rowModel.getRow(hit.rowIndex);
@@ -1783,23 +2341,28 @@ function attachBody(grid) {
   };
   const onClick = (e) => {
     if (onToggle(e)) return;
+    const before = grid.store.state.focus;
     const hit = renderer.cellAt(e.target);
     if (hit && grid.rowModel.getRow(hit.rowIndex)?.kind) {
-      root.focus({ preventScroll: true });
+      renderer.gridEl.focus({ preventScroll: true });
       grid.setFocus(hit.rowIndex, hit.colId);
       grid.setRange(null);
       return;
     }
     const ev = toEvent(e);
     if (!ev) return;
-    root.focus({ preventScroll: true });
+    renderer.gridEl.focus({ preventScroll: true });
     const dragged = suppressClick;
     suppressClick = false;
     const prev = grid.store.state.focus;
     const onBox = ev.colId === SELECT_COL_ID;
     if (dragged) {
     } else if (e.shiftKey && prev && !onBox && !isSystemCol(prev.colId) && grid.options.rangeSelection !== false) {
-      grid.setRange({ start: prev, end: { rowIndex: ev.rowIndex, colId: ev.colId } });
+      grid.setRange({ start: prev, end: { rowIndex: ev.rowIndex, colId: ev.colId } }, true);
+    } else if ((e.ctrlKey || e.metaKey) && !onBox && !isSystemCol(ev.colId) && grid.options.rangeSelection !== false) {
+      const at = { rowIndex: ev.rowIndex, colId: ev.colId };
+      grid.addRange({ start: at, end: at });
+      grid.setFocus(ev.rowIndex, ev.colId);
     } else {
       grid.setFocus(ev.rowIndex, ev.colId);
       grid.setRange(null);
@@ -1808,6 +2371,11 @@ function attachBody(grid) {
       grid.selectFromClick(ev.rowIndex, onBox || e.ctrlKey || e.metaKey, e.shiftKey);
     }
     grid.events.emit("cellClick", ev);
+    if (lastPointer === "touch" && !dragged && before && before.rowIndex === ev.rowIndex && before.colId === ev.colId && grid.editor.canEdit(ev.rowIndex, ev.colId)) {
+      const def = grid.columns.getColumn(ev.colId).def;
+      if (def.type === "boolean") grid.applyEdit(ev.rowIndex, ev.colId, ev.value !== true);
+      else grid.editor.start(ev.rowIndex, ev.colId);
+    }
   };
   const onDblClick = (e) => {
     if (e.target.closest?.("button")) return;
@@ -1885,8 +2453,8 @@ function attachBody(grid) {
     const open = !!(node.group?.expanded ?? node.expanded);
     const key = grid.expandKey(node);
     if (group && (e.key === "Enter" || e.key === " ")) grid.setGroupExpanded(key, !open);
-    else if (e.key === "ArrowRight" && !open) grid.setGroupExpanded(key, true);
-    else if (e.key === "ArrowLeft" && open) grid.setGroupExpanded(key, false);
+    else if (keyOf(e) === "ArrowRight" && !open) grid.setGroupExpanded(key, true);
+    else if (keyOf(e) === "ArrowLeft" && open) grid.setGroupExpanded(key, false);
     else return false;
     return true;
   };
@@ -1898,16 +2466,42 @@ function attachBody(grid) {
     if (!node || node.kind || !grid.canMoveRows()) return true;
     const row = node.data;
     const marker = el("div", "fg-row-drop-marker");
-    let target = null;
+    let drop = null;
     root.classList.add("fg-row-dragging");
     const move = (ev) => {
-      const under = document.elementFromPoint(ev.clientX, ev.clientY)?.closest(".fg-row[data-row]");
-      if (!under || under.closest(".fg-root") !== root) return;
-      const box = under.getBoundingClientRect();
-      const after = ev.clientY > box.top + box.height / 2;
-      target = { index: Number(under.dataset.row), after };
-      if (!marker.isConnected) root.append(marker);
-      marker.style.top = `${(after ? box.bottom : box.top) - root.getBoundingClientRect().top - 1}px`;
+      const point = elementAt(root, ev.clientX, ev.clientY);
+      const intoRoot = point?.closest(".fg-root");
+      const into = intoRoot === root ? grid : gridOfRoot(intoRoot);
+      const group = grid.dragOptions.group;
+      drop = null;
+      marker.remove();
+      if (!into || !intoRoot || into !== grid && (!group || into.dragOptions.group !== group || !into.options.rowDrag)) return;
+      const under = point.closest(".fg-row[data-row]");
+      const box = under?.getBoundingClientRect();
+      let target = null;
+      let position = "after";
+      let line;
+      if (under && box) {
+        const over = into.rowModel.getRow(Number(under.dataset.row));
+        if (!over || over.kind === "group") return;
+        target = over.detailOf?.data ?? over.data;
+        const y = (ev.clientY - box.top) / box.height;
+        if (over.kind === "detail") position = "after";
+        else if (into.options.treeData) position = y < 0.25 ? "before" : y > 0.75 ? "after" : "inside";
+        else position = y < 0.5 ? "before" : "after";
+        line = position === "before" ? box.top : box.bottom;
+      } else {
+        if (!point.closest(".fg-body")) return;
+        const rows = intoRoot.querySelectorAll(".fg-body-pane-center .fg-row[data-row]");
+        line = rows.length ? Math.max(...[...rows].map((r) => r.getBoundingClientRect().bottom)) : intoRoot.querySelector(".fg-body").getBoundingClientRect().top;
+      }
+      if (!into.canDropRow(row, target, position, grid)) return;
+      drop = { into, target, position };
+      const top = intoRoot.getBoundingClientRect().top;
+      marker.classList.toggle("fg-row-drop-inside", position === "inside");
+      marker.style.top = `${position === "inside" ? box.top - top : line - top - 1}px`;
+      marker.style.height = position === "inside" ? `${box.height}px` : "";
+      intoRoot.append(marker);
     };
     const up = () => {
       window.removeEventListener("pointermove", move);
@@ -1915,39 +2509,66 @@ function attachBody(grid) {
       window.removeEventListener("pointercancel", up);
       root.classList.remove("fg-row-dragging");
       marker.remove();
-      if (!target) return;
-      const over = grid.rowModel.getRow(target.index);
-      const overRow = over?.detailOf?.data ?? over?.data;
-      const data = grid.store.state.data;
-      const from = data.indexOf(row);
-      let to = data.indexOf(overRow) + (target.after || over?.kind === "detail" ? 1 : 0);
-      if (from < 0 || to < 0) return;
-      if (to > from) to--;
-      grid.moveRow(row, to);
+      if (drop) drop.into.dropRow(row, drop.target, drop.position, grid);
     };
     window.addEventListener("pointermove", move);
     window.addEventListener("pointerup", up);
     window.addEventListener("pointercancel", up);
     return true;
   };
+  const onTouchDown = (e) => {
+    const hit = renderer.cellAt(e.target);
+    if (!hit) return;
+    const x0 = e.clientX, y0 = e.clientY;
+    const cancel = () => {
+      clearTimeout(pressTimer);
+      window.removeEventListener("pointermove", move);
+      window.removeEventListener("pointerup", cancel);
+      window.removeEventListener("pointercancel", cancel);
+    };
+    const move = (ev) => {
+      if (Math.hypot(ev.clientX - x0, ev.clientY - y0) > 8) cancel();
+    };
+    clearTimeout(pressTimer);
+    pressTimer = window.setTimeout(() => {
+      cancel();
+      if (grid.options.contextMenu === false) return;
+      suppressClick = true;
+      if (!isSystemCol(hit.colId)) {
+        grid.setFocus(hit.rowIndex, hit.colId);
+        if (!grid.rangeContains(hit.rowIndex, hit.colId)) grid.setRange({ start: hit, end: hit });
+      }
+      grid.contextMenu.open(x0, y0, hit.rowIndex, hit.colId);
+    }, 550);
+    window.addEventListener("pointermove", move);
+    window.addEventListener("pointerup", cancel);
+    window.addEventListener("pointercancel", cancel);
+  };
   const onPointerDown = (e) => {
+    lastPointer = e.pointerType || "mouse";
+    if (lastPointer === "touch") {
+      onTouchDown(e);
+      return;
+    }
     if (e.button === 0 && onHandleDown(e)) return;
     if (grid.options.rangeSelection === false) return;
     if (e.button !== 0 || e.shiftKey || e.target.closest("input, a, button")) return;
     const start = renderer.cellAt(e.target);
     if (!start || isSystemCol(start.colId)) return;
     const x0 = e.clientX, y0 = e.clientY;
+    const adding = e.ctrlKey || e.metaKey;
     let dragging = false;
     const move = (ev) => {
       if (!dragging && Math.hypot(ev.clientX - x0, ev.clientY - y0) < DRAG_THRESHOLD2) return;
-      const hit = renderer.cellAt(document.elementFromPoint(ev.clientX, ev.clientY));
+      const hit = renderer.cellAt(elementAt(root, ev.clientX, ev.clientY));
       if (!hit || isSystemCol(hit.colId)) return;
       if (!dragging) {
         dragging = true;
         root.classList.add("fg-range-dragging");
+        if (adding) grid.addRange({ start, end: start });
         grid.setFocus(start.rowIndex, start.colId);
       }
-      grid.setRange({ start, end: hit });
+      grid.setRange({ start, end: hit }, adding);
     };
     const up = () => {
       window.removeEventListener("pointermove", move);
@@ -1959,7 +2580,7 @@ function attachBody(grid) {
     window.addEventListener("pointerup", up);
   };
   const onKeyDown = (e) => {
-    if (e.target !== root) return;
+    if (e.target !== root && e.target !== renderer.gridEl) return;
     const cols = grid.columns.displayed();
     const count = grid.rowModel.getRowCount();
     if (!cols.length || !count) return;
@@ -2001,7 +2622,7 @@ function attachBody(grid) {
       const range = grid.store.state.range;
       const end = range?.end ?? anchor;
       const pos = { rowIndex: Math.min(end.rowIndex, count - 1), colIndex: Math.max(0, cols.findIndex((c) => c.id === end.colId)) };
-      const next2 = nextFocus(e.key, { ctrl, shift: false }, pos, size);
+      const next2 = nextFocus(keyOf(e), { ctrl, shift: false }, pos, size);
       if (!next2) return;
       e.preventDefault();
       const colId2 = cols[Math.max(firstData, next2.colIndex)].id;
@@ -2014,7 +2635,7 @@ function attachBody(grid) {
     if (!f) next = NAV_KEYS.has(e.key) && e.key !== "Tab" ? { rowIndex: 0, colIndex: 0 } : null;
     else {
       const colIndex2 = Math.max(0, cols.findIndex((c) => c.id === f.colId));
-      next = nextFocus(e.key, { ctrl, shift: e.shiftKey }, { rowIndex: Math.min(f.rowIndex, count - 1), colIndex: colIndex2 }, size);
+      next = nextFocus(keyOf(e), { ctrl, shift: e.shiftKey }, { rowIndex: Math.min(f.rowIndex, count - 1), colIndex: colIndex2 }, size);
     }
     if (!next) return;
     e.preventDefault();
@@ -2027,17 +2648,17 @@ function attachBody(grid) {
   const nested = (e) => e.target?.closest?.(".fg-root") !== root;
   const onCopy = (e) => {
     if (fromField(e) || nested(e)) return;
-    const text = grid.selectionTSV(false);
-    if (!text || !e.clipboardData) return;
-    e.clipboardData.setData("text/plain", text);
+    const text2 = grid.selectionTSV(false);
+    if (!text2 || !e.clipboardData) return;
+    e.clipboardData.setData("text/plain", text2);
     e.preventDefault();
   };
   const onPaste = (e) => {
     if (fromField(e) || nested(e)) return;
-    const text = e.clipboardData?.getData("text/plain");
-    if (!text) return;
+    const text2 = e.clipboardData?.getData("text/plain");
+    if (!text2) return;
     e.preventDefault();
-    grid.pasteText(text);
+    grid.pasteText(text2);
   };
   body.addEventListener("click", onClick);
   body.addEventListener("dblclick", onDblClick);
@@ -2299,9 +2920,9 @@ var ColumnChooserPanel = class {
     box.checked = leaves.length > 0 && shown === leaves.length;
     box.indeterminate = shown > 0 && shown < leaves.length;
     box.disabled = leaves.every((l) => l.def.lockVisible);
-    const text = el("span", "fg-chooser-label");
-    text.textContent = labelOf(n);
-    row.append(box, text);
+    const text2 = el("span", "fg-chooser-label");
+    text2.textContent = labelOf(n);
+    row.append(box, text2);
     if (!n.children && n.pinned) {
       const pin = el("span", "fg-chooser-pin");
       pin.textContent = n.pinned === "left" ? "\u21E4" : "\u21E5";
@@ -2379,14 +3000,14 @@ var ColumnChooserDialog = class {
     head.append(title, close);
     this.panel = new ColumnChooserPanel(this.grid);
     popup.append(head, this.panel.el);
-    document.body.append(popup);
+    popupParent(this.grid.renderer.root).append(popup);
     const r = this.grid.renderer.root.getBoundingClientRect();
     const w = popup.offsetWidth || 280;
     popup.style.left = `${Math.max(4, Math.min(r.right - w - 8, window.innerWidth - w - 4))}px`;
     popup.style.top = `${Math.max(4, r.top + 8)}px`;
     this.popup = popup;
     const onDown = (e) => {
-      if (!popup.contains(e.target)) this.close();
+      if (!eventInside(e, popup)) this.close();
     };
     const onKey = (e) => {
       if (e.key === "Escape") this.close();
@@ -2501,7 +3122,7 @@ var ContextMenu = class {
     const hit = grid.renderer.cellAt(target);
     if (!hit) return;
     e.preventDefault();
-    grid.renderer.root.focus({ preventScroll: true });
+    grid.renderer.gridEl.focus({ preventScroll: true });
     if (!isSystemCol(hit.colId) && !grid.rangeContains(hit.rowIndex, hit.colId)) {
       grid.setFocus(hit.rowIndex, hit.colId);
       grid.setRange({ start: hit, end: hit });
@@ -2571,7 +3192,7 @@ var ContextMenu = class {
     const clip = typeof navigator !== "undefined" ? navigator.clipboard : void 0;
     const fail = () => this.grid.toast(this.grid.store.state.locale.pasteHint.replace("Ctrl+V", shortcut("V")));
     if (!clip?.readText) return fail();
-    clip.readText().then((text) => this.grid.pasteText(text), fail);
+    clip.readText().then((text2) => this.grid.pasteText(text2), fail);
   }
   open(x, y, rowIndex, colId) {
     this.close();
@@ -2624,23 +3245,23 @@ var ContextMenu = class {
       prevSep = false;
     }
     if (popup.lastElementChild?.classList.contains("fg-cm-sep")) popup.lastElementChild.remove();
-    document.body.append(popup);
+    popupParent(this.grid.renderer.root).append(popup);
     const w = popup.offsetWidth || 220, h = popup.offsetHeight || 300;
     popup.style.left = `${Math.max(4, Math.min(x, window.innerWidth - w - 4))}px`;
     popup.style.top = `${Math.max(4, Math.min(y, window.innerHeight - h - 4))}px`;
     this.popup = popup;
     const onDown = (e) => {
-      if (!popup.contains(e.target)) this.close();
+      if (!eventInside(e, popup)) this.close();
     };
     const onKey = (e) => {
       if (e.key === "Escape") {
         this.close();
-        grid.renderer.root.focus();
+        grid.renderer.gridEl.focus();
         return;
       }
       if (e.key !== "ArrowDown" && e.key !== "ArrowUp") return;
       const buttons = [...popup.querySelectorAll("button:not(:disabled)")];
-      const i = buttons.indexOf(document.activeElement);
+      const i = buttons.indexOf(activeElement(popup));
       const next = buttons[(i + (e.key === "ArrowDown" ? 1 : buttons.length - 1) + buttons.length) % buttons.length];
       next?.focus();
       e.preventDefault();
@@ -2678,7 +3299,7 @@ var FillHandle = class {
       let target = null;
       const rootEl = grid.renderer.root;
       const move = (ev) => {
-        const hit = grid.renderer.cellAt(document.elementFromPoint(ev.clientX, ev.clientY));
+        const hit = grid.renderer.cellAt(elementAt(grid.renderer.root, ev.clientX, ev.clientY));
         const col = hit && grid.columns.getColumn(hit.colId);
         if (!hit || !col || isSystemCol(col.id)) return;
         const dr = hit.rowIndex > src.r2 ? hit.rowIndex - src.r2 : hit.rowIndex < src.r1 ? hit.rowIndex - src.r1 : 0;
@@ -2735,7 +3356,7 @@ var FillHandle = class {
     }
     const root = this.grid.renderer.root.getBoundingClientRect();
     const r = cell.getBoundingClientRect();
-    this.handle.style.left = `${r.right - root.left - 4}px`;
+    this.handle.style.left = `${(this.grid.renderer.rtl ? r.left : r.right) - root.left - 4}px`;
     this.handle.style.top = `${r.bottom - root.top - 4}px`;
     if (!this.handle.isConnected) this.grid.renderer.root.append(this.handle);
   }
@@ -2784,8 +3405,8 @@ var Finder = class {
     if (i === void 0) return "";
     return i === this.index ? " fg-cell-match fg-cell-match-current" : " fg-cell-match";
   }
-  find(text) {
-    this.query = text.trim().toLowerCase();
+  find(text2) {
+    this.query = text2.trim().toLowerCase();
     this.matches = [];
     this.lookup.clear();
     this.index = -1;
@@ -2798,8 +3419,8 @@ var Finder = class {
       outer: for (let r = 0; r < rows.length; r++) {
         if (rows[r].kind) continue;
         for (let c = 0; c < cols.length; c++) {
-          const text2 = fmts[c](getCellValue(cols[c].def, rows[r].data)).toLowerCase();
-          if (!text2.includes(this.query)) continue;
+          const text3 = fmts[c](getCellValue(cols[c].def, rows[r].data)).toLowerCase();
+          if (!text3.includes(this.query)) continue;
           this.lookup.set(`${r}|${cols[c].id}`, this.matches.length);
           this.matches.push({ rowIndex: r, colId: cols[c].id });
           if (this.matches.length >= MAX_MATCHES) break outer;
@@ -2851,9 +3472,9 @@ var Finder = class {
     const bar = el("div", "fg-findbar", { role: "search" });
     const input = el("input", "fg-input", { type: "search", placeholder: loc.findPlaceholder, "aria-label": loc.findPlaceholder });
     this.countEl = el("span", "fg-findbar-count", { "aria-live": "polite" });
-    const btn = (label, text, run) => {
+    const btn = (label, text2, run) => {
       const b = el("button", "fg-findbar-btn", { type: "button", "aria-label": label, title: label });
-      b.textContent = text;
+      b.textContent = text2;
       b.addEventListener("click", run);
       return b;
     };
@@ -2885,40 +3506,10 @@ var Finder = class {
     this.bar = null;
     this.countEl = null;
     this.clear();
-    this.grid.renderer.root.focus({ preventScroll: true });
+    this.grid.renderer.gridEl.focus({ preventScroll: true });
   }
 };
 
-// src/merge.ts
-function computeSpans(rows, def) {
-  const n = rows.length;
-  const start = new Int32Array(n);
-  const end = new Int32Array(n);
-  const same2 = typeof def.merge === "function" ? (a, b) => {
-    try {
-      return !!def.merge(getCellValue(def, rows[a]), getCellValue(def, rows[b]), rows[a], rows[b]);
-    } catch {
-      return false;
-    }
-  } : (() => {
-    const keys = rows.map((r) => {
-      const v = getCellValue(def, r);
-      return isBlank(v) ? null : setKey(v);
-    });
-    return (a, b) => keys[a] !== null && keys[a] === keys[b];
-  })();
-  let s = 0;
-  for (let i = 1; i <= n; i++) {
-    if (i < n && same2(i - 1, i)) continue;
-    for (let k = s; k < i; k++) {
-      start[k] = s;
-      end[k] = i - 1;
-    }
-    s = i;
-  }
-  return { start, end };
-}
-
 // src/fill.ts
 var DAY = 864e5;
 function fillSeries(source, count) {
@@ -2963,22 +3554,22 @@ function toTSV(rows) {
   const cell = (s) => /[\t\n\r"]/.test(s) ? `"${s.replace(/"/g, '""')}"` : s;
   return rows.map((r) => r.map(cell).join("	")).join("\r\n");
 }
-function parseTSV(text) {
-  return parseDelimited(text, "	");
+function parseTSV(text2) {
+  return parseDelimited(text2, "	");
 }
-function parseDelimited(text, sep) {
-  if (!text) return [];
+function parseDelimited(text2, sep) {
+  if (!text2) return [];
   const rows = [];
   let row = [];
   let cell = "";
   let i = 0;
   let quoted = false;
   let atCellStart = true;
-  while (i < text.length) {
-    const ch = text[i];
+  while (i < text2.length) {
+    const ch = text2[i];
     if (quoted) {
       if (ch === '"') {
-        if (text[i + 1] === '"') {
+        if (text2[i + 1] === '"') {
           cell += '"';
           i += 2;
           continue;
@@ -3010,7 +3601,7 @@ function parseDelimited(text, sep) {
       row = [];
       cell = "";
       atCellStart = true;
-      i += ch === "\r" && text[i + 1] === "\n" ? 2 : 1;
+      i += ch === "\r" && text2[i + 1] === "\n" ? 2 : 1;
       continue;
     }
     cell += ch;
@@ -3040,8 +3631,8 @@ function copyValue(def, value, locale) {
 }
 var TRUE_WORDS = /* @__PURE__ */ new Set(["true", "1", "y", "yes", "\uC608", "o", "on"]);
 var FALSE_WORDS = /* @__PURE__ */ new Set(["false", "0", "n", "no", "\uC544\uB2C8\uC624", "x", "off"]);
-function parseNumber(text) {
-  let s = text.trim();
+function parseNumber(text2) {
+  let s = text2.trim();
   if (!s) return { ok: true, value: null };
   let negative = false;
   if (/^\(.*\)$/.test(s)) {
@@ -3061,8 +3652,8 @@ function validDate(y, m, d) {
   const date = new Date(y, m - 1, d);
   return date.getFullYear() === y && date.getMonth() === m - 1 && date.getDate() === d ? date : null;
 }
-function parseDate(text, previous) {
-  const s = text.trim();
+function parseDate(text2, previous) {
+  const s = text2.trim();
   if (!s) return { ok: true, value: null };
   let date = null;
   let m = /^(\d{4})\s*[-./년]\s*(\d{1,2})\s*[-./월]\s*(\d{1,2})\s*[.일]?$/.exec(s);
@@ -3072,26 +3663,37 @@ function parseDate(text, previous) {
   if (!date) return { ok: false };
   return { ok: true, value: previous instanceof Date ? date : toDateKey(date) };
 }
-function parseValue(def, text, previous) {
+function parseValue(def, text2, previous) {
   switch (def.type) {
     case "number":
-      return parseNumber(text);
+      return parseNumber(text2);
     case "date":
-      return parseDate(text, previous);
+      return parseDate(text2, previous);
     case "boolean": {
-      const t = text.trim().toLowerCase();
+      const t = text2.trim().toLowerCase();
       if (!t) return { ok: true, value: null };
       if (TRUE_WORDS.has(t)) return { ok: true, value: true };
       if (FALSE_WORDS.has(t)) return { ok: true, value: false };
       return { ok: false };
     }
     default:
-      return { ok: true, value: text };
+      return { ok: true, value: text2 };
   }
 }
 
 // src/editing/editor.ts
-var normalizeOptions = (opts) => opts.map((o) => o !== null && typeof o === "object" && "value" in o ? o : { value: o, label: String(o) });
+var normalizeOptions = (opts) => opts.map((o) => o !== null && typeof o === "object" && "value" in o ? o : { value: o, label: String(o), disabled: false });
+var pad2 = (n) => String(n).padStart(2, "0");
+function localDateTime(v) {
+  const d = v instanceof Date ? v : typeof v === "string" && v ? new Date(v) : null;
+  if (!d || Number.isNaN(d.getTime())) return "";
+  return `${d.getFullYear()}-${pad2(d.getMonth() + 1)}-${pad2(d.getDate())}T${pad2(d.getHours())}:${pad2(d.getMinutes())}`;
+}
+function timeOf(v) {
+  if (v instanceof Date) return `${pad2(v.getHours())}:${pad2(v.getMinutes())}`;
+  const m = typeof v === "string" ? /(\d{1,2}):(\d{2})/.exec(v) : null;
+  return m ? `${pad2(Number(m[1]))}:${m[2]}` : "";
+}
 var CellEditor = class {
   constructor(grid) {
     this.grid = grid;
@@ -3103,12 +3705,15 @@ var CellEditor = class {
   canEdit(rowIndex, colId) {
     if (isSystemCol(colId)) return false;
     const col = this.grid.columns.getColumn(colId);
-    return !!col?.def.editable && !!col.def.field && rowIndex >= 0 && rowIndex < this.grid.rowModel.getRowCount() && !this.grid.rowModel.getRow(rowIndex).kind;
+    if (!col?.def.field || rowIndex < 0 || rowIndex >= this.grid.rowModel.getRowCount()) return false;
+    const node = this.grid.rowModel.getRow(rowIndex);
+    return !node.kind && cellEditable(col.def, node.data, rowIndex);
   }
   start(rowIndex, colId, initialText) {
     if (this.cur) this.commit(null);
     if (!this.canEdit(rowIndex, colId)) return false;
     const { grid } = this;
+    if (grid.veto("beforeEdit", { row: grid.rowModel.getRow(rowIndex).data, rowIndex, colId })) return false;
     const { renderer } = grid;
     const col = grid.columns.getColumn(colId);
     const def = col.def;
@@ -3144,12 +3749,24 @@ var CellEditor = class {
         const opt = el("option");
         opt.value = String(i);
         opt.textContent = o.label ?? String(o.value);
+        opt.disabled = !!o.disabled;
         select.append(opt);
       });
       select.selectedIndex = Math.max(0, options.findIndex((o) => Object.is(o.value, value)));
       control = select;
       read = () => ({ value: options[select.selectedIndex]?.value ?? null });
       wrap.append(select);
+    } else if (spec?.type === "time" || spec?.type === "datetime" || !spec && def.type === "date" && def.format === "datetime") {
+      const isTime = spec?.type === "time";
+      const input = el("input", "fg-editor-control", { type: isTime ? "time" : "datetime-local" });
+      input.value = isTime ? timeOf(value) : localDateTime(value);
+      control = input;
+      read = () => {
+        if (!input.value) return { value: null };
+        if (isTime) return { value: input.value };
+        return { value: value instanceof Date ? new Date(input.value) : input.value };
+      };
+      wrap.append(input);
     } else {
       const textarea = spec?.type === "textarea";
       const input = textarea ? el("textarea", "fg-editor-control") : el("input", "fg-editor-control");
@@ -3220,21 +3837,15 @@ var CellEditor = class {
     const old = cur.row[field];
     const raw = cur.read();
     let value;
-    if ("text" in raw) {
+    if ("text" in raw && cur.def.formulas && isFormula(raw.text.trim())) {
+      value = raw.text.trim();
+    } else if ("text" in raw) {
       const parsed = parseValue(cur.def, raw.text, old);
       if (!parsed.ok) return this.fail(raw.text, loc.invalidValue);
       value = parsed.value;
     } else value = raw.value;
-    if (cur.def.required && isBlank(value)) return this.fail(value, loc.required);
-    if (cur.def.validate) {
-      let res;
-      try {
-        res = cur.def.validate(value, cur.row);
-      } catch {
-        res = loc.invalidValue;
-      }
-      if (res !== true) return this.fail(value, typeof res === "string" && res ? res : loc.invalidValue);
-    }
+    const error = grid.cellError(cur.def, cur.row, value);
+    if (error !== null) return this.fail(value, error);
     this.close(true);
     grid.applyEdit(cur.rowIndex, cur.colId, value);
     this.move(cur.rowIndex, cur.colId, move);
@@ -3255,7 +3866,7 @@ var CellEditor = class {
     if (!cur) return;
     this.cur = null;
     cur.dispose();
-    this.grid.renderer.root.focus({ preventScroll: true });
+    this.grid.renderer.gridEl.focus({ preventScroll: true });
     this.grid.events.emit("editStop", { rowIndex: cur.rowIndex, colId: cur.colId, committed });
   }
   move(rowIndex, colId, move) {
@@ -3388,7 +3999,7 @@ function startResize(grid, e, colId) {
   grid.renderer.root.classList.add("fg-resizing");
   track(
     (ev) => {
-      grid.columns.setWidth(colId, startW + ev.clientX - startX);
+      grid.columns.setWidth(colId, startW + (ev.clientX - startX) * (grid.renderer.rtl ? -1 : 1));
       grid.layoutChanged();
     },
     () => {
@@ -3408,7 +4019,7 @@ function beginDrag(grid, colId, cell, pane) {
   const ghost = el("div", `fg-drag-ghost fg-theme-${grid.store.state.theme}`);
   ghost.textContent = cell.querySelector(".fg-header-label")?.textContent ?? "";
   grid.applyFontTo(ghost);
-  document.body.append(ghost);
+  popupParent(grid.renderer.root).append(ghost);
   const marker = el("div", "fg-drop-marker");
   marker.style.height = `${grid.renderer.headerEl.offsetHeight}px`;
   grid.renderer.root.append(marker);
@@ -3423,11 +4034,13 @@ function updateDrag(grid, colId, d, x, y) {
   let t = 0;
   for (const s of d.sibs) {
     const r = s.el.getBoundingClientRect();
-    if (x > r.left + r.width / 2) t++;
+    if (grid.renderer.rtl ? x < r.left + r.width / 2 : x > r.left + r.width / 2) t++;
   }
   d.target = t;
   const rootLeft = grid.renderer.root.getBoundingClientRect().left;
-  const edge = t < d.sibs.length ? d.sibs[t].el.getBoundingClientRect().left : d.sibs.length ? d.sibs[d.sibs.length - 1].el.getBoundingClientRect().right : d.cell.getBoundingClientRect().left;
+  const start = (el2) => grid.renderer.rtl ? el2.getBoundingClientRect().right : el2.getBoundingClientRect().left;
+  const end = (el2) => grid.renderer.rtl ? el2.getBoundingClientRect().left : el2.getBoundingClientRect().right;
+  const edge = t < d.sibs.length ? start(d.sibs[t].el) : d.sibs.length ? end(d.sibs[d.sibs.length - 1].el) : start(d.cell);
   d.marker.style.left = `${edge - rootLeft - 1}px`;
 }
 function finishDrag(grid, colId, d) {
@@ -3478,6 +4091,7 @@ function attachHeader(grid) {
     const cell = target.closest(".fg-header-cell");
     const colId = cell?.dataset.col;
     if (!cell || !colId || isSystemCol(colId) || target.closest(".fg-menu-btn")) return;
+    if (target.closest("button, a, input, select, textarea, [data-fg-no-sort]") && target.closest(".fg-header-label")) return;
     e.preventDefault();
     if (target.closest(".fg-resize")) startResize(grid, e, colId);
     else startPress(grid, e, colId, cell);
@@ -3513,16 +4127,16 @@ function toCsv(rows, sep = ",") {
   };
   return rows.map((r) => r.map(cell).join(sep)).join("\r\n");
 }
-function detectSeparator(text) {
-  const line = text.slice(0, text.search(/\r?\n|$/));
+function detectSeparator(text2) {
+  const line = text2.slice(0, text2.search(/\r?\n|$/));
   const count = (ch) => line.split(ch).length - 1;
   const tabs = count("	"), semis = count(";"), commas = count(",");
   if (tabs && tabs >= commas && tabs >= semis) return "	";
   if (semis > commas) return ";";
   return ",";
 }
-function parseCsv(text, sep = detectSeparator(text)) {
-  return parseDelimited(text.replace(/^\uFEFF/, ""), sep);
+function parseCsv(text2, sep = detectSeparator(text2)) {
+  return parseDelimited(text2.replace(/^\uFEFF/, ""), sep);
 }
 
 // src/export/zip.ts
@@ -3671,9 +4285,42 @@ function writeXlsx(sheets) {
   const fmtIds = /* @__PURE__ */ new Map([["General", 0]]);
   const customFmts = [];
   const xfs = ['<xf numFmtId="0" fontId="0" fillId="0" borderId="0" xfId="0"/>'];
-  const xfIndex = /* @__PURE__ */ new Map([["General|0", 0]]);
-  const styleOf = (fmt, bold) => {
-    const key = `${fmt}|${bold ? 1 : 0}`;
+  const xfIndex = /* @__PURE__ */ new Map([["General||||", 0]]);
+  const fonts = ['<font><sz val="11"/><name val="Calibri"/></font>', '<font><b/><sz val="11"/><name val="Calibri"/></font>'];
+  const fontIndex = /* @__PURE__ */ new Map([["0|", 0], ["1|", 1]]);
+  const fills = [
+    '<fill><patternFill patternType="none"/></fill>',
+    '<fill><patternFill patternType="gray125"/></fill>',
+    '<fill><patternFill patternType="solid"><fgColor rgb="FFF2F4F7"/><bgColor indexed="64"/></patternFill></fill>'
+  ];
+  const fillIndex = /* @__PURE__ */ new Map([["FFF2F4F7", 2]]);
+  const argb = (c) => c && /^[0-9a-f]{8}$/i.test(c) ? c.toUpperCase() : c && /^[0-9a-f]{6}$/i.test(c) ? `FF${c.toUpperCase()}` : "";
+  const fontOf = (bold, color) => {
+    const key = `${bold ? 1 : 0}|${color}`;
+    let i = fontIndex.get(key);
+    if (i === void 0) {
+      i = fonts.length;
+      fonts.push(`<font>${bold ? "<b/>" : ""}<sz val="11"/>${color ? `<color rgb="${color}"/>` : ""}<name val="Calibri"/></font>`);
+      fontIndex.set(key, i);
+    }
+    return i;
+  };
+  const fillOf = (color) => {
+    if (!color) return 0;
+    let i = fillIndex.get(color);
+    if (i === void 0) {
+      i = fills.length;
+      fills.push(`<fill><patternFill patternType="solid"><fgColor rgb="${color}"/><bgColor indexed="64"/></patternFill></fill>`);
+      fillIndex.set(color, i);
+    }
+    return i;
+  };
+  const styleOf = (fmt, st) => {
+    const color = argb(st.color);
+    const fill = st.header ? "FFF2F4F7" : argb(st.fill);
+    const bold = !!(st.bold || st.header);
+    const align = st.align === "left" || st.align === "center" || st.align === "right" ? st.align : "";
+    const key = `${fmt}|${bold ? 1 : ""}|${color}|${fill}|${align}`;
     let i = xfIndex.get(key);
     if (i !== void 0) return i;
     let id = fmtIds.get(fmt);
@@ -3682,8 +4329,11 @@ function writeXlsx(sheets) {
       customFmts.push(fmt);
       fmtIds.set(fmt, id);
     }
+    const fontId = fontOf(bold, color);
+    const fillId = fillOf(fill);
+    const attrs = `numFmtId="${id}" fontId="${fontId}" fillId="${fillId}" borderId="0" xfId="0"` + (id ? ' applyNumberFormat="1"' : "") + (fontId ? ' applyFont="1"' : "") + (fillId ? ' applyFill="1"' : "") + (align ? ' applyAlignment="1"' : "");
     i = xfs.length;
-    xfs.push(`<xf numFmtId="${id}" fontId="${bold ? 1 : 0}" fillId="${bold ? 2 : 0}" borderId="0" xfId="0"${id ? ' applyNumberFormat="1"' : ""}${bold ? ' applyFont="1" applyFill="1"' : ""}/>`);
+    xfs.push(align ? `<xf ${attrs}><alignment horizontal="${align}"/></xf>` : `<xf ${attrs}/>`);
     xfIndex.set(key, i);
     return i;
   };
@@ -3702,7 +4352,7 @@ function writeXlsx(sheets) {
             v = toSerial(v);
           }
         }
-        const s = styleOf(fmt, !!o.bold);
+        const s = styleOf(fmt, o);
         const sa = s ? ` s="${s}"` : "";
         if (v === null || v === void 0 || v === "") return sa ? `<c r="${ref}"${sa}/>` : "";
         if (typeof v === "number") return Number.isFinite(v) ? `<c r="${ref}"${sa}><v>${v}</v></c>` : "";
@@ -3719,7 +4369,7 @@ function writeXlsx(sheets) {
     const merges = sheet.merges?.length ? `<mergeCells count="${sheet.merges.length}">${sheet.merges.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="2"><font><sz val="11"/><name val="Calibri"/></font><font><b/><sz val="11"/><name val="Calibri"/></font></fonts><fills count="3"><fill><patternFill patternType="none"/></fill><fill><patternFill patternType="gray125"/></fill><fill><patternFill patternType="solid"><fgColor rgb="FFF2F4F7"/><bgColor indexed="64"/></patternFill></fill></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>`;
+  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>`;
   const files = [
     {
       name: "[Content_Types].xml",
@@ -3873,6 +4523,51 @@ function excelFormat(def) {
   if (o.style === "percent") return `0${decimals}%`;
   return `${o.useGrouping === false ? "0" : "#,##0"}${decimals}`;
 }
+function toArgb(css) {
+  const hex = /^#([0-9a-f]{3}|[0-9a-f]{6})$/i.exec(css.trim());
+  if (hex) {
+    const h = hex[1].length === 3 ? [...hex[1]].map((c) => c + c).join("") : hex[1];
+    return `FF${h.toUpperCase()}`;
+  }
+  const m = /^rgba?\(\s*(\d+)[\s,]+(\d+)[\s,]+(\d+)(?:[\s,/]+([\d.]+%?))?\s*\)$/i.exec(css.trim());
+  if (!m) return "";
+  const alpha = m[4] === void 0 ? 1 : m[4].endsWith("%") ? parseFloat(m[4]) / 100 : parseFloat(m[4]);
+  if (!(alpha > 0)) return "";
+  return `FF${[m[1], m[2], m[3]].map((n) => Math.min(255, Number(n)).toString(16).padStart(2, "0")).join("").toUpperCase()}`;
+}
+function classStyles(grid) {
+  const root = grid.renderer.root;
+  if (typeof getComputedStyle !== "function" || !root.isConnected) return { of: () => ({}), dispose: () => void 0 };
+  const row = document.createElement("div");
+  row.className = "fg-row";
+  row.style.cssText = "position:absolute;left:-9999px;top:0;visibility:hidden;pointer-events:none";
+  const cell = document.createElement("div");
+  row.append(cell);
+  root.append(row);
+  const read = (cls) => {
+    cell.className = cls ? `fg-cell ${cls}` : "fg-cell";
+    const cs = getComputedStyle(cell);
+    const w = cs.fontWeight;
+    return { color: cs.color, fill: cs.backgroundColor, bold: w === "bold" || Number(w) >= 600 };
+  };
+  const base = read("");
+  const cache2 = /* @__PURE__ */ new Map();
+  return {
+    of(classes) {
+      let s = cache2.get(classes);
+      if (!s) {
+        const r = read(classes);
+        s = {};
+        if (r.color !== base.color && toArgb(r.color)) s.color = toArgb(r.color);
+        if (r.fill !== base.fill && toArgb(r.fill)) s.fill = toArgb(r.fill);
+        if (r.bold && !base.bold) s.bold = true;
+        cache2.set(classes, s);
+      }
+      return s;
+    },
+    dispose: () => row.remove()
+  };
+}
 function buildXlsx(grid, opts = {}) {
   const cols = exportColumns(grid, opts.columns);
   const code = grid.store.state.locale.code;
@@ -3899,43 +4594,86 @@ function buildXlsx(grid, opts = {}) {
         if (level < leafLevel) {
           const g = chain[level];
           const prev = ci > 0 ? chains[ci - 1][level] : null;
-          row.push({ v: prev === g ? null : header(g.def, g.id), bold: true });
+          row.push({ v: prev === g ? null : header(g.def, g.id), header: true });
           if (prev !== g) {
             let end = ci;
             while (end + 1 < cols.length && chains[end + 1][level] === g) end++;
             if (end > ci) merges.push(`${name(ci)}${level + 1}:${name(end)}${level + 1}`);
           }
         } else if (level === leafLevel) {
-          row.push({ v: header(cols[ci].def, cols[ci].id), bold: true });
+          row.push({ v: header(cols[ci].def, cols[ci].id), header: true });
           if (headRows - 1 > level) merges.push(`${name(ci)}${level + 1}:${name(ci)}${headRows}`);
-        } else row.push({ v: null, bold: true });
+        } else row.push({ v: null, header: true });
       }
       rows.push(row);
     }
   }
   const fmts = cols.map((c) => excelFormat(c.def));
   const formatters = cols.map((c) => getFormatter(c.def, code));
-  for (const r of exportRows(grid, opts.rows)) {
-    rows.push(cols.map((c, i) => {
-      const v = getCellValue(c.def, r);
-      if (isBlank(v)) return null;
-      const fmt = fmts[i] ?? void 0;
-      switch (c.def.type) {
-        case "number": {
-          const n = typeof v === "number" ? v : Number(v);
-          return Number.isFinite(n) ? { v: n, fmt } : String(v);
-        }
-        case "date": {
-          const d = toDate(v);
-          return d ? { v: d, fmt } : String(v);
-        }
-        case "boolean":
-          return typeof v === "boolean" ? v : String(v);
-        default:
-          return formatters[i](v);
+  const data = exportRows(grid, opts.rows);
+  const styled = opts.styles !== false;
+  const probe = styled && cols.some((c) => c.def.cellClass) ? classStyles(grid) : null;
+  const valueOf = (c, i, v) => {
+    if (isBlank(v)) return null;
+    const fmt = fmts[i] ?? void 0;
+    switch (c.def.type) {
+      case "number": {
+        const n = typeof v === "number" ? v : Number(v);
+        return Number.isFinite(n) ? { v: n, fmt } : String(v);
       }
-    }));
+      case "date": {
+        const d = toDate(v);
+        return d ? { v: d, fmt } : String(v);
+      }
+      case "boolean":
+        return typeof v === "boolean" ? v : String(v);
+      default:
+        return formatters[i](v);
+    }
+  };
+  try {
+    data.forEach((r, ri) => {
+      rows.push(cols.map((c, i) => {
+        const v = getCellValue(c.def, r);
+        const cell = valueOf(c, i, v);
+        if (!styled) return cell;
+        let style = c.def.align ? { align: c.def.align } : {};
+        if (probe && c.def.cellClass) {
+          let cls;
+          try {
+            cls = typeof c.def.cellClass === "function" ? c.def.cellClass({ value: v, formatted: formatters[i](v), row: r, rowIndex: ri, column: c.def }) : c.def.cellClass;
+          } catch {
+            cls = void 0;
+          }
+          if (cls) style = { ...style, ...probe.of(cls) };
+        }
+        if (!Object.keys(style).length) return cell;
+        return cell !== null && typeof cell === "object" && !(cell instanceof Date) ? { ...cell, ...style } : { v: cell, ...style };
+      }));
+    });
+  } finally {
+    probe?.dispose();
   }
+  const taken = /* @__PURE__ */ new Set();
+  const letter = (i) => {
+    let out = "";
+    for (let n = i + 1; n > 0; n = Math.floor((n - 1) / 26)) out = String.fromCharCode(65 + (n - 1) % 26) + out;
+    return out;
+  };
+  const mergeRange = (r1, c1, r2, c2) => {
+    for (let r = r1; r <= r2; r++) for (let c = c1; c <= c2; c++) if (taken.has(`${r},${c}`)) return;
+    for (let r = r1; r <= r2; r++) for (let c = c1; c <= c2; c++) taken.add(`${r},${c}`);
+    merges.push(`${letter(c1)}${headRows + r1 + 1}:${letter(c2)}${headRows + r2 + 1}`);
+  };
+  data.forEach((row, i) => cols.forEach((c, ci) => {
+    const n = c.def.colSpan ? spanOf(c.def.colSpan, c.def, row, i, cols.length - ci) : 1;
+    if (n > 1) mergeRange(i, ci, i, ci + n - 1);
+  }));
+  cols.forEach((c, ci) => {
+    if (!c.def.merge && !c.def.rowSpan) return;
+    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([{
     name: opts.sheetName ?? "Sheet1",
     rows,
@@ -3978,8 +4716,8 @@ async function importInto(grid, file, opts = {}) {
     if (!s) throw new Error(`Sheet ${String(opts.sheet)} not found`);
     matrix = s.rows;
   } else {
-    const text = new TextDecoder().decode(bytes);
-    matrix = parseCsv(text, detectSeparator(text));
+    const text2 = new TextDecoder().decode(bytes);
+    matrix = parseCsv(text2, detectSeparator(text2));
   }
   if (!matrix.length) return { rows: [], skipped: 0 };
   const leaves = [];
@@ -4041,9 +4779,9 @@ function svg(tag, attrs = {}, cls = "") {
   for (const [k, v] of Object.entries(attrs)) node.setAttribute(k, String(v));
   return node;
 }
-function tip(node, text) {
+function tip(node, text2) {
   const t = svg("title");
-  t.textContent = text;
+  t.textContent = text2;
   node.append(t);
 }
 function niceTicks(min, max, count = 5) {
@@ -4479,7 +5217,7 @@ function buildPivot(source, config, defOf, labels, locale) {
 }
 
 // src/version.ts
-var version = "0.7.1";
+var version = "0.8.0";
 
 // src/license.ts
 var PUBLIC_KEY = { kty: "EC", crv: "P-256", x: "sUTKkglZmk-HMKPNub8p7AeLBKesHCU8irIkw9rJlbE", y: "j0U_aKRDR7iApY9UpaD3hUemhBLZJwDv9-QiT_hUyw8" };
@@ -4660,7 +5398,7 @@ var ColumnMenu = class {
     popup.append(this.section(items));
     const filter = this.filterSection(colId, () => this.close());
     if (filter) popup.append(filter);
-    document.body.append(popup);
+    popupParent(this.grid.renderer.root).append(popup);
     const r = anchor.getBoundingClientRect();
     const w = popup.offsetWidth || 248;
     popup.style.left = `${Math.max(4, Math.min(r.right - w, window.innerWidth - w - 4))}px`;
@@ -4670,13 +5408,12 @@ var ColumnMenu = class {
     this.popup = popup;
     this.colId = colId;
     const onDown = (e) => {
-      const t = e.target;
-      if (!popup.contains(t) && !anchor.contains(t)) this.close();
+      if (!eventInside(e, popup, anchor)) this.close();
     };
     const onKey = (e) => {
       if (e.key !== "Escape") return;
       this.close();
-      this.grid.renderer.root.focus();
+      this.grid.renderer.gridEl.focus();
     };
     document.addEventListener("pointerdown", onDown, true);
     document.addEventListener("keydown", onKey, true);
@@ -4940,19 +5677,26 @@ var RowModel = class {
     if (!this.indexById) this.indexById = new Map(this.display.map((n, i) => [n.id, i]));
     return this.indexById.get(id) ?? -1;
   }
-  /** Prefix-sum offsets of the display rows (detail rows use `detailHeight`). */
-  layout(rowHeight, detailHeight) {
+  /**
+   * 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) {
     const c = this.layoutCache;
-    if (c && c.rows === this.display && c.rh === rowHeight && c.dh === detailHeight) return c;
+    if (c && c.rows === this.display && c.rh === rowHeight && c.dh === detailHeight && c.hv === heightsVersion) return c;
     const n = this.display.length;
     const offsets = new Float64Array(n + 1);
     let uniform = true;
+    const measured = heights && heights.size ? heights : null;
     for (let i = 0; i < n; i++) {
-      const detail = this.display[i].kind === "detail";
-      if (detail) uniform = false;
-      offsets[i + 1] = offsets[i] + (detail ? detailHeight : rowHeight);
-    }
-    this.layoutCache = { rows: this.display, rh: rowHeight, dh: detailHeight, offsets, uniform };
+      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;
+      if (h !== rowHeight) uniform = false;
+      offsets[i + 1] = offsets[i] + h;
+    }
+    this.layoutCache = { rows: this.display, rh: rowHeight, dh: detailHeight, hv: heightsVersion, offsets, uniform };
     return this.layoutCache;
   }
   filter(input) {
@@ -4963,8 +5707,8 @@ var RowModel = class {
     const matches = this.nodes.filter((n) => {
       for (const p of preds) if (!p.pred(getCellValue(p.def, n.data))) return false;
       if (tokens.length) {
-        const text = quickCols.map((d) => this.deps.format(d, getCellValue(d, n.data))).join("
").toLowerCase();
-        if (!matchesQuick(tokens, text)) return false;
+        const text2 = quickCols.map((d) => this.deps.format(d, getCellValue(d, n.data))).join("
").toLowerCase();
+        if (!matchesQuick(tokens, text2)) return false;
       }
       return true;
     });
@@ -5059,8 +5803,10 @@ var RowModel = class {
       for (const n of nodes) {
         if (seen2.has(n.id)) continue;
         const kids = children.get(n.id) ?? [];
+        const lazy = !kids.length && !!d.lazyChildren?.(n.id, n.data);
         const expanded = kids.length > 0 && this.isOpen(d, n.id, level);
-        const node = { ...n, level, hasChildren: kids.length > 0, expanded };
+        const node = { ...n, level, hasChildren: kids.length > 0 || lazy, expanded };
+        if (lazy && d.loading?.has(n.id)) node.loading = true;
         this.withDetails(d, [node], out);
         if (expanded) visit(kids, level + 1, /* @__PURE__ */ new Set([...seen2, n.id]));
       }
@@ -5328,6 +6074,17 @@ var Grid = class {
     /** 0-based page and rows per page (pagination only). */
     this.page = 0;
     this.pageSize = DEFAULT_PAGE_SIZE;
+    /** Tree rows whose children were loaded (or are loading) through treeData.loadChildren. */
+    this.treeLoaded = /* @__PURE__ */ new Set();
+    this.treeLoading = /* @__PURE__ */ new Set();
+    this.lazyChildren = (id, row) => {
+      if (this.treeLoaded.has(id)) return false;
+      try {
+        return !!this.options.treeData?.hasChildren?.(row);
+      } catch {
+        return false;
+      }
+    };
     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({
@@ -5339,6 +6096,7 @@ var Grid = class {
       anchorId: null,
       focus: null,
       range: null,
+      extraRanges: [],
       locale: resolveLocale(options.locale),
       theme: options.theme ?? "light"
     });
@@ -5415,6 +6173,7 @@ var Grid = class {
     });
     this.renderer.render();
     this.api = this.createApi();
+    liveGrids.set(this.renderer.root, this);
   }
   collator() {
     const code = this.store.state.locale.code;
@@ -5425,6 +6184,7 @@ var Grid = class {
   }
   /** Column widths/order/pinning changed; rows are unaffected. */
   layoutChanged() {
+    this.renderer.invalidateHeights();
     this.renderer.invalidate({ header: true, rows: true });
     this.refreshChoosers();
   }
@@ -5445,6 +6205,8 @@ var Grid = class {
       defaultExpanded: this.defaultExpanded,
       detailOpen: this.options.detailRenderer ? this.detailOpen : /* @__PURE__ */ new Set(),
       isMaster: this.options.isRowMaster,
+      lazyChildren: this.options.treeData?.hasChildren ? this.lazyChildren : void 0,
+      loading: this.treeLoading,
       version: this.displayVersion
     };
   }
@@ -5562,6 +6324,7 @@ var Grid = class {
     if (!this.options.pagination || !Number.isFinite(page)) return;
     const next = Math.max(0, Math.min(this.getPageCount() - 1, Math.floor(page)));
     if (next === this.page) return;
+    if (this.veto("beforePageChange", { page: next, pageSize: this.pageSize })) return;
     this.page = next;
     this.pageMoved();
   }
@@ -5573,6 +6336,7 @@ var Grid = class {
     }
     if (size === this.pageSize) return;
     const first = this.page * this.pageSize;
+    if (this.veto("beforePageChange", { page: Math.floor(first / size), pageSize: size })) return;
     this.pageSize = size;
     this.page = Math.floor(first / size);
     this.pageMoved();
@@ -5612,6 +6376,35 @@ var Grid = class {
     this.renderer.invalidate({ rows: true });
     this.events.emit("rowsLoadFailed", { start, end, error });
   }
+  /**
+   * Scroll `other` along with this grid and back. The follower's echo of a position we set is not
+   * sent back, so a shorter grid that stops at its end does not pull the longer one back.
+   */
+  syncScroll(other, axis) {
+    if (!other || typeof other.setScrollPosition !== "function" || other === this.api) return () => void 0;
+    const written = /* @__PURE__ */ new Map();
+    const key = (p) => `${p.top},${p.left}`;
+    const link = (from, to) => from.on("scroll", (p) => {
+      if (written.get(from) === key(p)) {
+        written.delete(from);
+        return;
+      }
+      to.setScrollPosition(axis === "vertical" ? { top: p.top } : axis === "horizontal" ? { left: p.left } : p);
+      written.set(to, key(to.getScrollPosition()));
+    });
+    const offs = [link(this.api, other), link(other, this.api)];
+    return () => {
+      for (const off of offs) off();
+    };
+  }
+  /** Emit a before-event; true when a listener called cancel(). */
+  veto(type, payload) {
+    let cancelled = false;
+    this.events.emit(type, { ...payload, cancel: () => {
+      cancelled = true;
+    } });
+    return cancelled;
+  }
   /** Client-only operations log once and do nothing with a datasource. */
   clientOnly(what) {
     if (!this.rowModel.server) return false;
@@ -5661,10 +6454,45 @@ var Grid = class {
   expandKey(node) {
     return node.group ? node.group.key : node.id;
   }
+  /** First expand of a lazy tree row: fetch its children, then show them expanded. */
+  loadChildren(node) {
+    const tree = this.options.treeData;
+    const id = node.id;
+    if (this.treeLoading.has(id)) return;
+    if (typeof tree.loadChildren !== "function") {
+      warn("treeData.hasChildren needs treeData.loadChildren");
+      return;
+    }
+    this.treeLoading.add(id);
+    this.displayChanged();
+    const done = () => {
+      this.treeLoading.delete(id);
+      return !this.destroyed && this.store.state.data.includes(node.data);
+    };
+    Promise.resolve().then(() => tree.loadChildren(node.data)).then((rows) => {
+      if (!done()) return;
+      const kids = cleanRows(Array.isArray(rows) ? rows : []);
+      this.treeLoaded.add(id);
+      this.expanded.set(id, true);
+      if (kids.length) this.replaceData([...this.store.state.data, ...kids]);
+      this.displayChanged();
+      this.events.emit("childrenLoaded", { row: node.data, rows: kids });
+      this.events.emit("groupToggle", { key: id, expanded: true });
+    }, (error) => {
+      if (!done()) return;
+      warn(`treeData.loadChildren failed for row "${id}"`);
+      this.displayChanged();
+      this.events.emit("childrenLoadFailed", { row: node.data, error });
+    });
+  }
   setGroupExpanded(key, open) {
     const node = this.rowModel.rows().find((n) => this.isExpandable(n) && this.expandKey(n) === key);
     const cur = node ? !!(node.group?.expanded ?? node.expanded) : this.expanded.get(key);
     if (cur === open) return;
+    if (open && node && !node.group && this.options.treeData && this.lazyChildren(node.id, node.data)) {
+      this.loadChildren(node);
+      return;
+    }
     this.expanded.set(key, open);
     this.displayChanged();
     this.events.emit("groupToggle", { key, expanded: open });
@@ -5723,7 +6551,113 @@ var Grid = class {
   /** Row order can only follow the source data when nothing reorders or hides rows. */
   canMoveRows() {
     const s = this.store.state;
-    return !this.rowModel.server && !s.sort.length && !Object.keys(s.filters).length && !s.quickFilter.trim() && !this.groupBy.length && !this.options.treeData;
+    const tree = this.options.treeData;
+    return !this.rowModel.server && !s.sort.length && !Object.keys(s.filters).length && !s.quickFilter.trim() && !this.groupBy.length && (!tree || typeof tree.setParentId === "function");
+  }
+  get dragOptions() {
+    const o = this.options.rowDrag;
+    return o && typeof o === "object" ? o : {};
+  }
+  parentOf(row) {
+    let p = null;
+    try {
+      p = this.options.treeData.getParentId(row);
+    } catch {
+      p = null;
+    }
+    return p == null ? null : String(p);
+  }
+  rawParent(row) {
+    try {
+      return this.options.treeData.getParentId(row) ?? null;
+    } catch {
+      return null;
+    }
+  }
+  /** The id of `row` as the data stores parent ids: a number when other rows hold numeric parent ids. */
+  idValue(row) {
+    const id = this.rowModel.idOf(row);
+    for (const r of this.store.state.data) {
+      const p = this.rawParent(r);
+      if (p !== null && String(p) === id) return p;
+    }
+    const numeric = this.store.state.data.some((r) => typeof this.rawParent(r) === "number");
+    return numeric && id.trim() !== "" && Number.isFinite(Number(id)) ? Number(id) : id;
+  }
+  /** Can `row` land here? Trees refuse the row's own subtree; then the user's canDrop rule decides. */
+  canDropRow(row, target, position, from = this) {
+    if (!this.canMoveRows() || target === row) return false;
+    if (from === this && this.options.treeData && target) {
+      const own = this.rowModel.idOf(row);
+      const seen2 = /* @__PURE__ */ new Set();
+      for (let id = this.rowModel.idOf(target); id !== null && !seen2.has(id); ) {
+        if (id === own) return false;
+        seen2.add(id);
+        const node = this.rowModel.allNodes().find((n) => n.id === id);
+        id = node ? this.parentOf(node.data) : null;
+      }
+    }
+    const rule = this.dragOptions.canDrop;
+    if (!rule) return true;
+    try {
+      return rule({ row, target, position, fromOtherGrid: from !== this }) !== false;
+    } catch {
+      warn("rowDrag.canDrop threw; the drop was refused");
+      return false;
+    }
+  }
+  /**
+   * Move `row` before, after or inside `target` (null = to the end). In tree data the row takes the
+   * target's parent, or the target itself for 'inside'. `from` is the grid the row is dragged out of.
+   */
+  dropRow(row, target, position = "after", from = this) {
+    if (this.clientOnly("dropRow") || !row || typeof row !== "object") return false;
+    const tree = this.options.treeData;
+    if (!tree && position === "inside") position = "after";
+    const data = this.store.state.data;
+    const external = from !== this;
+    const fromIndex = external ? -1 : data.indexOf(row);
+    if (!external && fromIndex < 0) return false;
+    if (target && !data.includes(target)) return false;
+    if (external && (!from.canMoveRows() || data.includes(row))) return false;
+    if (!this.canDropRow(row, target, position, from)) return false;
+    const oldRaw = tree ? this.rawParent(row) : null;
+    const parentRow = !tree || !target ? null : position === "inside" ? target : this.store.state.data.find((r) => this.rowModel.idOf(r) === this.parentOf(target)) ?? null;
+    const newRaw = parentRow ? this.idValue(parentRow) : null;
+    const next = data.filter((r) => r !== row);
+    const at = !target || position === "inside" ? next.length : next.indexOf(target) + (position === "after" ? 1 : 0);
+    next.splice(at, 0, row);
+    const moved = next.some((r, i) => r !== data[i]);
+    if (!external && !moved && String(oldRaw ?? "") === String(newRaw ?? "")) return false;
+    const setParent = (raw, parent) => {
+      try {
+        tree.setParentId(row, raw, parent);
+      } catch {
+        warn("treeData.setParentId threw");
+      }
+    };
+    const oldParentRow = tree ? this.store.state.data.find((r) => this.rowModel.idOf(r) === this.parentOf(row)) ?? null : null;
+    if (external) {
+      from.removeRows([row]);
+      if (tree) setParent(newRaw, parentRow);
+      this.addRows([row], at);
+    } else {
+      if (tree) setParent(newRaw, parentRow);
+      this.replaceData(next);
+      this.history.push({
+        undo: () => {
+          if (tree) setParent(oldRaw, oldParentRow);
+          this.replaceData(data);
+        },
+        redo: () => {
+          if (tree) setParent(newRaw, parentRow);
+          this.replaceData(next);
+        }
+      });
+      this.events.emit("rowDragEnd", { row, fromIndex, toIndex: at });
+    }
+    this.events.emit("rowDrop", { row, target, position, fromOtherGrid: external, fromGrid: external ? from.api : null });
+    return true;
   }
   moveRow(row, toIndex, record = true) {
     if (this.clientOnly("moveRow")) return false;
@@ -5753,6 +6687,7 @@ var Grid = class {
     if (this.options.rowHeight == null) this.renderer.opts.rowHeight = autoRowHeight(effective);
     if (this.options.headerHeight == null) this.renderer.opts.headerHeight = autoHeaderHeight(effective);
     this.renderer.applyFont(size, family);
+    this.renderer.invalidateHeights();
     this.menu.close();
     this.layoutChanged();
   }
@@ -5788,30 +6723,55 @@ var Grid = class {
   dataColumns() {
     return this.columns.displayed().filter((c) => !isSystemCol(c.id));
   }
-  setRange(range) {
-    let next = null;
-    if (range && this.options.rangeSelection !== false) {
-      const count = this.rowModel.getRowCount();
-      const ok = (p) => !isSystemCol(p.colId) && !!this.columns.getColumn(p.colId) && p.rowIndex >= 0 && p.rowIndex < count;
-      if (ok(range.start) && ok(range.end)) next = { start: { ...range.start }, end: { ...range.end } };
-    }
+  validRange(range) {
+    if (!range || this.options.rangeSelection === false) return null;
+    const count = this.rowModel.getRowCount();
+    const ok = (p) => !!p && !isSystemCol(p.colId) && !!this.columns.getColumn(p.colId) && p.rowIndex >= 0 && p.rowIndex < count;
+    return ok(range.start) && ok(range.end) ? { start: { ...range.start }, end: { ...range.end } } : null;
+  }
+  /** Set the active range. Earlier Ctrl ranges are dropped unless `keepOthers`. */
+  setRange(range, keepOthers = false) {
+    const next = this.validRange(range);
+    const extras = keepOthers || !this.store.state.extraRanges.length ? this.store.state.extraRanges : [];
     const cur = this.store.state.range;
-    if (JSON.stringify(cur) === JSON.stringify(next)) return;
-    this.store.set({ range: next });
+    if (JSON.stringify(cur) === JSON.stringify(next) && extras === this.store.state.extraRanges) return;
+    this.store.set({ range: next, extraRanges: extras });
     this.events.emit("rangeChange", { range: next && { start: { ...next.start }, end: { ...next.end } } });
   }
-  /** Range in displayed column indexes, or null. */
-  rangeBounds() {
-    const r = this.store.state.range;
+  /** Ctrl+click / Ctrl+drag: keep what is selected (the focused cell when there is no range) and start a new range. */
+  addRange(range) {
+    const { range: active, focus } = this.store.state;
+    const keep = this.validRange(active ?? (focus ? { start: focus, end: focus } : null));
+    if (keep) this.store.set({ extraRanges: [...this.store.state.extraRanges, keep] });
+    this.setRange(range, true);
+  }
+  getRanges() {
+    const all2 = [...this.store.state.extraRanges];
+    if (this.store.state.range) all2.push(this.store.state.range);
+    return all2.map((r) => ({ start: { ...r.start }, end: { ...r.end } }));
+  }
+  setRanges(ranges) {
+    const list = (Array.isArray(ranges) ? ranges : []).map((r) => this.validRange(r)).filter((r) => !!r);
+    this.store.set({ extraRanges: list.slice(0, -1) });
+    this.setRange(list[list.length - 1] ?? null, true);
+  }
+  boundsOf(r) {
     if (!r) return null;
     const a = this.columns.getColumn(r.start.colId), b = this.columns.getColumn(r.end.colId);
     if (!a || !b) return null;
     return normalizeRange({ start: { rowIndex: r.start.rowIndex, colIndex: a.index }, end: { rowIndex: r.end.rowIndex, colIndex: b.index } });
   }
+  /** Active range in displayed column indexes, or null. */
+  rangeBounds() {
+    return this.boundsOf(this.store.state.range);
+  }
+  /** Every range (Ctrl ranges first, the active one last). */
+  allRangeBounds() {
+    return [...this.store.state.extraRanges, this.store.state.range].map((r) => this.boundsOf(r)).filter((b) => !!b);
+  }
   rangeContains(rowIndex, colId) {
-    const b = this.rangeBounds();
     const col = this.columns.getColumn(colId);
-    return !!b && !!col && rangeContains(b, rowIndex, col.index);
+    return !!col && this.allRangeBounds().some((b) => rangeContains(b, rowIndex, col.index));
   }
   selectAllCells() {
     const cols = this.dataColumns();
@@ -5829,6 +6789,18 @@ var Grid = class {
     const checkedRows = rows;
     let out;
     let cols;
+    const all2 = rows ? [] : this.allRangeBounds();
+    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) {
+        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] ?? []));
+        if (headers) matrix2.unshift((sameCols ? parts.slice(0, 1) : parts).flatMap((p) => this.rangeHeaders(p)));
+        return toTSV(matrix2);
+      }
+    }
     if (b) {
       out = [];
       for (let i = b.r1; i <= b.r2; i++) {
@@ -5848,22 +6820,51 @@ var Grid = class {
       out = [node.data];
       cols = [col];
     }
-    const matrix = out.map((r) => cols.map((c) => copyValue(c.def, getCellValue(c.def, r), code)));
+    const matrix = out.map((r) => cols.map((c) => this.copyCell(c.def, r, code)));
     if (headers) matrix.unshift(cols.map((c) => c.def.header ?? c.def.field ?? c.id));
     return toTSV(matrix);
   }
+  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);
+  }
+  /** Copy text of one range. */
+  rangeMatrix(b) {
+    const cols = this.columns.displayed().slice(b.c1, b.c2 + 1).filter((c) => !isSystemCol(c.id));
+    const code = this.store.state.locale.code;
+    const out = [];
+    for (let i = b.r1; i <= b.r2; i++) {
+      const node = this.rowModel.getRow(i);
+      if (node && !node.kind) out.push(cols.map((c) => this.copyCell(c.def, node.data, code)));
+    }
+    return out;
+  }
+  copyCell(def, row, code) {
+    const value = getCellValue(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 "";
+    }
+    return copyValue(def, value, code);
+  }
   copyToClipboard(headers, rows = false) {
-    const text = this.selectionTSV(headers, rows);
-    if (text && typeof navigator !== "undefined" && navigator.clipboard?.writeText) {
+    const text2 = this.selectionTSV(headers, rows);
+    if (text2 && typeof navigator !== "undefined" && navigator.clipboard?.writeText) {
       try {
-        navigator.clipboard.writeText(text)?.catch?.(() => void 0);
+        navigator.clipboard.writeText(text2)?.catch?.(() => void 0);
       } catch {
       }
     }
-    return text;
+    return text2;
   }
-  pasteText(text) {
-    const matrix = parseTSV(text);
+  pasteText(text2) {
+    const matrix = parseTSV(text2);
     const result = { changed: 0, skipped: 0 };
     if (!matrix.length) return result;
     const displayed = this.columns.displayed();
@@ -5895,7 +6896,7 @@ var Grid = class {
         const raw = single && b ? matrix[0][0] : matrix[dr]?.[dc];
         if (raw === void 0) continue;
         const def = col.def;
-        if (!def.editable || !def.field) {
+        if (!def.field || !cellEditable(def, node.data, ri)) {
           result.skipped++;
           continue;
         }
@@ -5918,34 +6919,67 @@ var Grid = class {
     const spec = def.editor;
     if (spec && typeof spec === "object" && spec.type === "select") {
       const opts = (typeof spec.options === "function" ? spec.options(row) : spec.options) ?? [];
-      const text = raw.trim().toLowerCase();
-      const hit = opts.map((o) => o !== null && typeof o === "object" && "value" in o ? o : { value: o, label: String(o) }).find((o) => String(o.value).toLowerCase() === text || (o.label ?? "").toLowerCase() === text);
-      if (!hit) return { ok: false };
+      const text2 = raw.trim().toLowerCase();
+      const hit = opts.map((o) => o !== null && typeof o === "object" && "value" in o ? o : { value: o, label: String(o), disabled: false }).find((o) => String(o.value).toLowerCase() === text2 || (o.label ?? "").toLowerCase() === text2);
+      if (!hit || hit.disabled) return { ok: false };
       value = hit.value;
+    } else if (def.formulas && isFormula(raw.trim())) {
+      value = raw.trim();
     } else {
       const parsed = parseValue(def, raw, oldValue);
       if (!parsed.ok) return parsed;
       value = parsed.value;
     }
-    if (def.required && isBlank(value)) return { ok: false };
+    if (this.cellError(def, row, value) !== null) return { ok: false };
+    return { ok: true, value };
+  }
+  /** Why `value` cannot go into this cell (required, unique, validate), or null when it can. */
+  cellError(def, row, value) {
+    const loc = this.store.state.locale;
+    if (def.required && isBlank(value)) return loc.required;
+    if (def.unique && def.field && !isBlank(value)) {
+      const key = value instanceof Date ? value.getTime() : String(value);
+      const field = def.field;
+      if (this.store.state.data.some((r) => {
+        if (r === row) return false;
+        const v = r[field];
+        return !isBlank(v) && (v instanceof Date ? v.getTime() : String(v)) === key;
+      })) return loc.duplicate;
+    }
     if (def.validate) {
+      let res;
       try {
-        if (def.validate(value, row) !== true) return { ok: false };
+        res = def.validate(value, row);
       } catch {
-        return { ok: false };
+        res = loc.invalidValue;
       }
+      if (res !== true) return typeof res === "string" && res ? res : loc.invalidValue;
     }
-    return { ok: true, value };
+    return null;
+  }
+  validateAll() {
+    const out = [];
+    const cols = this.columns.getState().map((st) => ({ id: st.colId, def: this.columns.getNode(st.colId).def })).filter((c) => c.def.field && c.def.editable && (c.def.required || c.def.unique || c.def.validate));
+    this.store.state.data.forEach((row, i) => {
+      const id = this.rowModel.idOf(row);
+      const rowIndex = this.rowModel.indexOfId(id);
+      for (const c of cols) {
+        if (!cellEditable(c.def, row, rowIndex < 0 ? i : rowIndex)) continue;
+        const message = this.cellError(c.def, row, row[c.def.field]);
+        if (message !== null) out.push({ row, rowIndex, colId: c.id, message });
+      }
+    });
+    return out;
   }
   // ── merge, aggregates, fill, pinned rows ────────────────────
   /** Merge blocks for every `merge` column over the displayed rows (memoized). */
   mergeSpans() {
-    if (this.rowModel.server || !this.columns.displayed().some((c) => c.def.merge)) return NO_SPANS;
+    if (this.rowModel.server || !this.columns.displayed().some((c) => c.def.merge || c.def.rowSpan)) return NO_SPANS;
     const rows = this.rowModel.rows();
     const ver = this.editVersion * 1e6 + this.columns.displayed().length;
     if (this.spanCache && this.spanCache.rows === rows && this.spanCache.ver === ver) return this.spanCache.spans;
     const spans = /* @__PURE__ */ new Map();
-    const merged = this.columns.displayed().filter((c) => c.def.merge);
+    const merged = this.columns.displayed().filter((c) => c.def.merge || c.def.rowSpan);
     if (merged.length && !rows.some((n) => n.kind)) {
       const data = rows.map((n) => n.data);
       for (const c of merged) spans.set(c.id, computeSpans(data, c.def));
@@ -5955,15 +6989,22 @@ var Grid = class {
   }
   /** Count / sum / min / max over the selected range (numbers only for the math). */
   rangeAggregates() {
-    const b = this.rangeBounds();
-    if (!b) return null;
-    const cols = this.columns.displayed().slice(b.c1, b.c2 + 1).filter((c) => !isSystemCol(c.id));
+    const all2 = this.allRangeBounds();
+    if (!all2.length) return null;
+    const displayed = this.columns.displayed();
     const out = { cells: 0, count: 0, numbers: 0, sum: 0, min: Infinity, max: -Infinity };
-    for (let r = b.r1; r <= b.r2; r++) {
+    const seen2 = all2.length > 1 ? /* @__PURE__ */ new Set() : null;
+    for (const b of all2) for (let r = b.r1; r <= b.r2; r++) {
       const node = this.rowModel.getRow(r);
       if (!node || node.kind) continue;
       const row = node.data;
-      for (const c of cols) {
+      for (const c of displayed.slice(b.c1, b.c2 + 1)) {
+        if (isSystemCol(c.id)) continue;
+        if (seen2) {
+          const k = `${r},${c.index}`;
+          if (seen2.has(k)) continue;
+          seen2.add(k);
+        }
         out.cells++;
         const v = getCellValue(c.def, row);
         if (isBlank(v)) continue;
@@ -5998,13 +7039,8 @@ var Grid = class {
       const col = displayed[c];
       const node = this.rowModel.getRow(r);
       const def = col?.def;
-      if (!node || node.kind || !def?.editable || !def.field || isSystemCol(col.id)) return;
-      if (def.required && isBlank(value2)) return;
-      try {
-        if (def.validate && def.validate(value2, node.data) !== true) return;
-      } catch {
-        return;
-      }
+      if (!node || node.kind || !def?.field || isSystemCol(col.id) || !cellEditable(def, node.data, r)) return;
+      if (this.cellError(def, node.data, value2) !== null) return;
       this.writeCell(changes, node.data, def.field, col.id, r, value2);
     };
     const value = (r, c) => getCellValue(displayed[c].def, this.rowModel.getRow(r).data);
@@ -6038,6 +7074,7 @@ var Grid = class {
   writeCell(changes, row, field, colId, rowIndex, value) {
     const oldValue = row[field];
     if (Object.is(oldValue, value)) return false;
+    if (this.veto("beforeCellChange", { row, rowIndex, colId, oldValue, newValue: value })) return false;
     this.tracker.beforeChange(row);
     row[field] = value;
     changes.push({ row, field, colId, oldValue, newValue: value });
@@ -6059,6 +7096,7 @@ var Grid = class {
     this.afterDataEdit();
   }
   afterDataEdit() {
+    this.renderer.invalidateHeights();
     this.editVersion++;
     this.refreshSummary();
     this.renderer.invalidate({ rows: true });
@@ -6074,17 +7112,17 @@ var Grid = class {
   /** Delete/Backspace: clear editable cells in the range, or the focused cell. */
   clearCells() {
     const displayed = this.columns.displayed();
-    const b = this.rangeBounds();
+    const all2 = this.allRangeBounds();
     const f = this.store.state.focus;
     const fi = f ? this.columns.getColumn(f.colId)?.index : void 0;
-    const box = b ?? (f && fi !== void 0 ? { r1: f.rowIndex, r2: f.rowIndex, c1: fi, c2: fi } : null);
-    if (!box) return;
+    const boxes = all2.length ? all2 : f && fi !== void 0 ? [{ r1: f.rowIndex, r2: f.rowIndex, c1: fi, c2: fi }] : [];
+    if (!boxes.length) return;
     const changes = [];
-    for (let r = box.r1; r <= box.r2; r++) {
+    for (const box of boxes) for (let r = box.r1; r <= box.r2; r++) {
       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?.editable && def.field) this.writeCell(changes, node.data, def.field, displayed[c].id, r, null);
+        if (node && !node.kind && def?.field && cellEditable(def, node.data, r)) this.writeCell(changes, node.data, def.field, displayed[c].id, r, null);
       }
     }
     this.endCellTx(changes);
@@ -6264,6 +7302,7 @@ var Grid = class {
       }
       return s.dir === "asc" || s.dir === "desc";
     });
+    if (this.veto("beforeSort", { sort: valid.map((s) => ({ ...s })) })) return;
     this.store.set({ sort: valid });
     this.events.emit("sortChange", { sort: [...valid] });
   }
@@ -6285,6 +7324,7 @@ var Grid = class {
       warn(`setFilter: unknown column "${colId}"`);
       return;
     }
+    if (this.veto("beforeFilter", { colId, model })) return;
     const filters = { ...this.store.state.filters };
     if (model) filters[colId] = model;
     else delete filters[colId];
@@ -6305,9 +7345,21 @@ var Grid = class {
     this.store.set({ selected, anchorId });
     this.events.emit("selectionChange", { selected: this.selectedRows() });
   }
+  /** Data rows that may be checked (isRowSelectable). */
+  rowSelectable(row) {
+    const f = this.options.isRowSelectable;
+    if (!f) return true;
+    try {
+      return !!f(row);
+    } catch {
+      return false;
+    }
+  }
   selectFromClick(index, toggle, range) {
     const mode = this.options.rowSelection;
-    if (!mode || index < 0 || index >= this.rowModel.getRowCount() || this.rowModel.getRow(index).kind) return;
+    if (!mode || index < 0 || index >= this.rowModel.getRowCount()) return;
+    const target = this.rowModel.getRow(index);
+    if (target.kind || !this.rowSelectable(target.data)) return;
     const r = nextSelection({
       selected: this.store.state.selected,
       anchorIndex: this.anchorIndex(),
@@ -6317,11 +7369,12 @@ var Grid = class {
       toggle,
       range
     });
-    if (this.rowModel.rows() !== this.rowModel.dataRows()) {
+    if (this.rowModel.rows() !== this.rowModel.dataRows() || this.options.isRowSelectable) {
       for (const id of r.selected) {
         if (this.store.state.selected.has(id)) continue;
         const i = this.rowModel.indexOfId(id);
-        if (i >= 0 && this.rowModel.getRow(i).kind) r.selected.delete(id);
+        const n = i >= 0 ? this.rowModel.getRow(i) : null;
+        if (n && (n.kind || !this.rowSelectable(n.data))) r.selected.delete(id);
       }
     }
     this.setSelected(r.selected, this.rowModel.getRow(r.anchorIndex)?.id ?? null);
@@ -6333,8 +7386,13 @@ var Grid = class {
     const i = this.rowModel.indexOfId(id);
     return i < 0 ? null : i;
   }
-  toggleSelectAll() {
+  /** Rows select-all acts on: displayed data rows that are selectable. */
+  selectableRows() {
     const rows = this.rowModel.dataRows();
+    return this.options.isRowSelectable ? rows.filter((n) => this.rowSelectable(n.data)) : rows;
+  }
+  toggleSelectAll() {
+    const rows = this.selectableRows();
     const sel = this.store.state.selected;
     const all2 = rows.length > 0 && rows.every((n) => sel.has(n.id));
     const next = new Set(sel);
@@ -6354,7 +7412,7 @@ var Grid = class {
     if (this.options.rowSelection) sys.push(SELECT_COLUMN);
     return [...sys, ...defs];
   }
-  setData(rows) {
+  setData(rows, options) {
     if (this.clientOnly("setData")) return;
     if (!Array.isArray(rows)) {
       warn("setData: rows must be an array");
@@ -6364,8 +7422,11 @@ var Grid = class {
     this.tracker.reset();
     this.history.clear();
     this.detailOpen.clear();
+    this.treeLoaded.clear();
+    this.treeLoading.clear();
     this.renderer.dropDetail();
     this.store.set({ data: cleanRows(rows) });
+    if (options?.scrollToTop) this.renderer.setScroll({ top: 0, left: 0 });
     const sel = this.store.state.selected;
     if (sel.size) {
       if (this.options.getRowId) {
@@ -6439,7 +7500,7 @@ var Grid = class {
       return fn(...a);
     });
     return {
-      setData: guard((rows) => this.setData(rows)),
+      setData: guard((rows, o) => this.setData(rows, o)),
       getData: guard(() => this.store.state.data),
       setColumns: guard((defs) => this.setColumns(defs)),
       getColumnState: guard(() => this.columns.getState()),
@@ -6453,10 +7514,14 @@ var Grid = class {
       getFilterModel: guard(() => ({ ...this.store.state.filters })),
       setQuickFilter: guard((t) => this.store.set({ quickFilter: t ?? "" })),
       getSelectedRows: guard(() => this.selectedRows()),
-      selectAll: guard(() => this.setSelected(/* @__PURE__ */ new Set([...this.store.state.selected, ...this.rowModel.dataRows().map((n) => n.id)]))),
+      selectAll: guard(() => this.setSelected(/* @__PURE__ */ new Set([...this.store.state.selected, ...this.selectableRows().map((n) => n.id)]))),
       deselectAll: guard(() => this.setSelected(/* @__PURE__ */ new Set(), null)),
       getDisplayedRowCount: guard(() => this.rowModel.getRowCount()),
       scrollToRow: guard((i) => this.renderer.scrollToRow(i)),
+      validate: guard(() => this.validateAll()),
+      getScrollPosition: guard(() => this.renderer.getScroll()),
+      setScrollPosition: guard((p) => this.renderer.setScroll(p ?? {})),
+      syncScroll: guard((other, axis = "both") => this.syncScroll(other, axis)),
       setTheme: guard((t) => this.store.set({ theme: t })),
       setLocale: guard((l) => this.store.set({ locale: resolveLocale(l) })),
       setFont: guard((f) => this.setFont(f)),
@@ -6473,8 +7538,10 @@ var Grid = class {
         return r && { start: { ...r.start }, end: { ...r.end } };
       }),
       setRange: guard((r) => this.setRange(r)),
+      getRanges: guard(() => this.getRanges()),
+      setRanges: guard((list) => this.setRanges(list)),
       copySelection: guard((o) => this.copyToClipboard(!!o?.headers, !!o?.rows)),
-      pasteText: guard((text) => this.pasteText(text)),
+      pasteText: guard((text2) => this.pasteText(text2)),
       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)),
@@ -6491,7 +7558,7 @@ var Grid = class {
       canRedo: guard(() => this.history.canRedo()),
       fillRange: guard((t) => this.fillRange(t)),
       setPinnedRows: guard((r) => this.setPinnedRows(r)),
-      find: guard((text) => this.finder.find(text)),
+      find: guard((text2) => this.finder.find(text2)),
       findNext: guard(() => this.finder.next()),
       findPrevious: guard(() => this.finder.previous()),
       clearFind: guard(() => this.finder.clear()),
@@ -6503,6 +7570,7 @@ var Grid = class {
       setDetailExpanded: guard((row, open) => this.setDetailExpanded(row, open)),
       isDetailExpanded: guard((row) => this.isDetailExpanded(row)),
       moveRow: guard((row, toIndex) => this.moveRow(row, toIndex)),
+      dropRow: guard((row, target, position) => this.dropRow(row, target, position)),
       setPage: guard((p) => this.setPage(p)),
       getPage: guard(() => this.getPage()),
       getPageCount: guard(() => this.getPageCount()),
@@ -6524,6 +7592,7 @@ var Grid = class {
   destroy() {
     if (this.destroyed) return;
     this.destroyed = true;
+    liveGrids.delete(this.renderer.root);
     for (const d of this.disposers) d();
     this.renderer.destroy();
     this.events.clear();