@bendyline/squisq-grid-react 2.11.0

package/dist/index.js

@@ -0,0 +1,1778 @@
+// src/store/columns.ts
+import { isNumericCellText } from "@bendyline/squisq/table";
+function inferKind(cells, col) {
+  let sawNumber = false;
+  let sawBoolean = false;
+  let sawValue = false;
+  for (const row of cells) {
+    const cell = row[col];
+    if (cell === null || cell === void 0 || cell === "") continue;
+    sawValue = true;
+    if (typeof cell === "number") {
+      sawNumber = true;
+      continue;
+    }
+    if (typeof cell === "boolean") {
+      sawBoolean = true;
+      continue;
+    }
+    const text = String(cell);
+    if (isNumericCellText(text)) {
+      sawNumber = true;
+      continue;
+    }
+    if (/^(?:true|false)$/i.test(text.trim())) {
+      sawBoolean = true;
+      continue;
+    }
+    return "string";
+  }
+  if (!sawValue) return "string";
+  if (sawNumber && !sawBoolean) return "number";
+  if (sawBoolean && !sawNumber) return "boolean";
+  return "string";
+}
+function isBlank(cell) {
+  return cell === null || cell === void 0 || typeof cell === "string" && cell.trim() === "";
+}
+function buildColumnarTable(table) {
+  const rowCount = table.cells.length;
+  const columns = table.headers.map((name, col) => {
+    const kind = table.hints?.[col]?.kind ?? inferKind(table.cells, col);
+    if (kind === "number") {
+      const data = new Float64Array(rowCount);
+      const valid = new Uint8Array(rowCount);
+      for (let row = 0; row < rowCount; row++) {
+        const cell = table.cells[row]?.[col];
+        if (isBlank(cell)) continue;
+        const value = typeof cell === "number" ? cell : Number(String(cell).trim());
+        if (!Number.isFinite(value)) continue;
+        data[row] = value;
+        valid[row] = 1;
+      }
+      return { kind, name, data, valid };
+    }
+    if (kind === "boolean") {
+      const data = new Uint8Array(rowCount);
+      const valid = new Uint8Array(rowCount);
+      for (let row = 0; row < rowCount; row++) {
+        const cell = table.cells[row]?.[col];
+        if (isBlank(cell)) continue;
+        const truthy = typeof cell === "boolean" ? cell : /^true$/i.test(String(cell).trim());
+        data[row] = truthy ? 1 : 0;
+        valid[row] = 1;
+      }
+      return { kind, name, data, valid };
+    }
+    const codes = new Int32Array(rowCount);
+    const dict = [];
+    const codeByValue = /* @__PURE__ */ new Map();
+    for (let row = 0; row < rowCount; row++) {
+      const cell = table.cells[row]?.[col];
+      if (isBlank(cell)) {
+        codes[row] = -1;
+        continue;
+      }
+      const text = typeof cell === "string" ? cell : String(cell);
+      let code = codeByValue.get(text);
+      if (code === void 0) {
+        code = dict.length;
+        dict.push(text);
+        codeByValue.set(text, code);
+      }
+      codes[row] = code;
+    }
+    return { kind, name, codes, dict };
+  });
+  return { columns, rowCount };
+}
+function columnCellValue(column, row) {
+  if (column.kind === "number") {
+    return column.valid[row] ? column.data[row] : null;
+  }
+  if (column.kind === "boolean") {
+    return column.valid[row] ? column.data[row] === 1 : null;
+  }
+  const code = column.codes[row];
+  return code < 0 ? null : column.dict[code];
+}
+
+// src/store/kernel.ts
+function tableKernel(scope) {
+  let columns = [];
+  let rowCount = 0;
+  let perm = [];
+  let activeSort = [];
+  let activeFilter = [];
+  const collator = new Intl.Collator(void 0, { numeric: true });
+  function isNumericText(value) {
+    const trimmed = value.trim();
+    if (trimmed === "") return false;
+    if (/^0\d/.test(trimmed)) return false;
+    return Number.isFinite(Number(trimmed));
+  }
+  function ensureRank(column) {
+    if (!column.rank || column.rank.length !== (column.dict?.length ?? 0)) {
+      const dict = column.dict ?? [];
+      const order = dict.map((_, index) => index);
+      order.sort((a, b) => collator.compare(dict[a], dict[b]));
+      const rank = new Int32Array(dict.length);
+      for (let position = 0; position < order.length; position++) {
+        rank[order[position]] = position;
+      }
+      column.rank = rank;
+    }
+    return column.rank;
+  }
+  function ensureLower(column) {
+    if (!column.lower || column.lower.length !== (column.dict?.length ?? 0)) {
+      column.lower = (column.dict ?? []).map((value) => value.toLowerCase());
+    }
+    return column.lower;
+  }
+  function isBlank2(column, row) {
+    if (column.kind === "number" || column.kind === "boolean") {
+      return !column.valid || column.valid[row] === 0;
+    }
+    return column.data[row] < 0;
+  }
+  function cellText(column, row) {
+    if (isBlank2(column, row)) return "";
+    if (column.kind === "number") return String(column.data[row]);
+    if (column.kind === "boolean") return column.data[row] === 1 ? "true" : "false";
+    return column.dict[column.data[row]];
+  }
+  function cellValue(column, row) {
+    if (isBlank2(column, row)) return null;
+    if (column.kind === "number") return column.data[row];
+    if (column.kind === "boolean") return column.data[row] === 1;
+    return column.dict[column.data[row]];
+  }
+  function matches(row, clause) {
+    const column = columns[clause.col];
+    if (!column) return true;
+    const valueTrim = clause.value.trim();
+    const blank = isBlank2(column, row);
+    const fold = (text) => clause.caseSensitive ? text : text.toLowerCase();
+    const textFor = () => {
+      if (!clause.caseSensitive && (column.kind === "string" || column.kind === "date") && !blank) {
+        return ensureLower(column)[column.data[row]].trim();
+      }
+      return fold(cellText(column, row).trim());
+    };
+    switch (clause.op) {
+      case "=": {
+        if (valueTrim === "") return blank;
+        if (blank) return false;
+        if (column.kind === "number" && isNumericText(valueTrim)) {
+          return column.data[row] === Number(valueTrim);
+        }
+        return textFor() === fold(valueTrim);
+      }
+      case "!=":
+        return !matches(row, { ...clause, op: "=" });
+      case "~":
+        if (blank) return false;
+        return textFor().includes(fold(valueTrim));
+      case "!~":
+        return !matches(row, { ...clause, op: "~" });
+      case "^~":
+        if (blank) return false;
+        return textFor().startsWith(fold(valueTrim));
+      case "$~":
+        if (blank) return false;
+        return textFor().endsWith(fold(valueTrim));
+      default: {
+        if (blank) return false;
+        let comparison;
+        if (column.kind === "number" && isNumericText(valueTrim)) {
+          comparison = column.data[row] - Number(valueTrim);
+        } else {
+          comparison = collator.compare(cellText(column, row).trim(), valueTrim);
+        }
+        if (clause.op === ">") return comparison > 0;
+        if (clause.op === "<") return comparison < 0;
+        if (clause.op === ">=") return comparison >= 0;
+        return comparison <= 0;
+      }
+    }
+  }
+  function recomputeView() {
+    const ids = [];
+    for (let row = 0; row < rowCount; row++) {
+      let pass = true;
+      for (const clause of activeFilter) {
+        if (!matches(row, clause)) {
+          pass = false;
+          break;
+        }
+      }
+      if (pass) ids.push(row);
+    }
+    if (activeSort.length > 0) {
+      for (const term of activeSort) {
+        const column = columns[term.col];
+        if (column && (column.kind === "string" || column.kind === "date")) ensureRank(column);
+      }
+      ids.sort((a, b) => {
+        for (const term of activeSort) {
+          const column = columns[term.col];
+          if (!column) continue;
+          const aBlank = isBlank2(column, a);
+          const bBlank = isBlank2(column, b);
+          if (aBlank || bBlank) {
+            if (aBlank && bBlank) continue;
+            return aBlank ? 1 : -1;
+          }
+          let comparison;
+          if (column.kind === "number") {
+            comparison = column.data[a] - column.data[b];
+          } else if (column.kind === "boolean") {
+            comparison = column.data[a] - column.data[b];
+          } else {
+            const rank = column.rank;
+            comparison = rank[column.data[a]] - rank[column.data[b]];
+          }
+          if (comparison !== 0) return term.dir === "desc" ? -comparison : comparison;
+        }
+        return a - b;
+      });
+    }
+    perm = ids;
+  }
+  function applyEdit(edit) {
+    const column = columns[edit.col];
+    if (!column || edit.rowId < 0 || edit.rowId >= rowCount) return;
+    if (column.kind === "number") {
+      const blank = edit.value === null || edit.value === "";
+      column.valid[edit.rowId] = blank ? 0 : 1;
+      column.data[edit.rowId] = blank ? 0 : Number(edit.value);
+      return;
+    }
+    if (column.kind === "boolean") {
+      const blank = edit.value === null || edit.value === "";
+      column.valid[edit.rowId] = blank ? 0 : 1;
+      column.data[edit.rowId] = edit.value === true ? 1 : 0;
+      return;
+    }
+    if (edit.value === null || edit.value === "") {
+      column.data[edit.rowId] = -1;
+      return;
+    }
+    const text = String(edit.value);
+    if (!column.codeByValue) {
+      column.codeByValue = /* @__PURE__ */ new Map();
+      (column.dict ?? []).forEach((value, code2) => column.codeByValue.set(value, code2));
+    }
+    let code = column.codeByValue.get(text);
+    if (code === void 0) {
+      code = column.dict.length;
+      column.dict.push(text);
+      column.codeByValue.set(text, code);
+      column.rank = void 0;
+      column.lower = void 0;
+    }
+    column.data[edit.rowId] = code;
+  }
+  scope.onmessage = (event) => {
+    const message = event.data;
+    try {
+      if (message.type === "init") {
+        columns = message.columns.map((payload) => ({ ...payload }));
+        rowCount = message.rowCount;
+        activeSort = [];
+        activeFilter = [];
+        recomputeView();
+        scope.postMessage({ type: "ready", seq: message.seq });
+        return;
+      }
+      if (message.type === "setView") {
+        activeSort = message.sort;
+        activeFilter = message.filter;
+        recomputeView();
+        scope.postMessage({
+          type: "viewResult",
+          seq: message.seq,
+          viewRowCount: perm.length
+        });
+        return;
+      }
+      if (message.type === "rows") {
+        const start = Math.max(0, message.start);
+        const end = Math.min(perm.length, start + message.count);
+        const rowIds = [];
+        const cells = [];
+        for (let index = start; index < end; index++) {
+          const rowId = perm[index];
+          rowIds.push(rowId);
+          cells.push(columns.map((column) => cellValue(column, rowId)));
+        }
+        scope.postMessage({ type: "rowsResult", seq: message.seq, start, rowIds, cells });
+        return;
+      }
+      if (message.type === "applyEdits") {
+        const touched = /* @__PURE__ */ new Set();
+        for (const edit of message.edits) {
+          applyEdit(edit);
+          touched.add(edit.col);
+        }
+        const staleView = activeSort.some((term) => touched.has(term.col)) || activeFilter.some((clause) => touched.has(clause.col));
+        scope.postMessage({ type: "editResult", seq: message.seq, staleView });
+        return;
+      }
+      if (message.type === "distinct") {
+        const column = columns[message.col];
+        const limit = Math.max(1, message.limit);
+        let hasBlank = false;
+        let values = [];
+        let totalDistinct = 0;
+        if (column && (column.kind === "string" || column.kind === "date")) {
+          const dict = column.dict ?? [];
+          const used = new Uint8Array(dict.length);
+          const codes = column.data;
+          for (let row = 0; row < rowCount; row++) {
+            const code = codes[row];
+            if (code < 0) hasBlank = true;
+            else used[code] = 1;
+          }
+          const rank = ensureRank(column);
+          const present = [];
+          for (let code = 0; code < used.length; code++) {
+            if (used[code] === 1) present.push(code);
+          }
+          present.sort((a, b) => rank[a] - rank[b]);
+          totalDistinct = present.length;
+          values = present.slice(0, limit).map((code) => dict[code]);
+        } else if (column && column.kind === "number") {
+          const data = column.data;
+          const seen = /* @__PURE__ */ new Set();
+          for (let row = 0; row < rowCount; row++) {
+            if (!column.valid || column.valid[row] === 0) hasBlank = true;
+            else seen.add(data[row]);
+          }
+          const sorted = [...seen].sort((a, b) => a - b);
+          totalDistinct = sorted.length;
+          values = sorted.slice(0, limit).map((value) => String(value));
+        } else if (column) {
+          let sawTrue = false;
+          let sawFalse = false;
+          const data = column.data;
+          for (let row = 0; row < rowCount; row++) {
+            if (!column.valid || column.valid[row] === 0) hasBlank = true;
+            else if (data[row] === 1) sawTrue = true;
+            else sawFalse = true;
+          }
+          if (sawFalse) values.push("false");
+          if (sawTrue) values.push("true");
+          totalDistinct = values.length;
+          values = values.slice(0, limit);
+        }
+        scope.postMessage({
+          type: "distinctResult",
+          seq: message.seq,
+          values,
+          totalDistinct,
+          hasBlank
+        });
+        return;
+      }
+      if (message.type === "dispose") {
+        columns = [];
+        perm = [];
+        rowCount = 0;
+      }
+    } catch (err) {
+      const seq = "seq" in message ? message.seq : -1;
+      scope.postMessage({
+        type: "error",
+        seq,
+        message: err instanceof Error ? err.message : String(err)
+      });
+    }
+  };
+}
+function buildKernelSource() {
+  return `(${tableKernel.toString()})(self);`;
+}
+
+// src/store/client.ts
+import { parseTableViewState, serializeTableViewState } from "@bendyline/squisq/table";
+var LocalKernelHost = class {
+  constructor() {
+    this.onResponse = () => {
+    };
+    const scope = {
+      onmessage: null,
+      postMessage: (message) => this.onResponse(message)
+    };
+    tableKernel(scope);
+    this.scope = scope;
+  }
+  post(message) {
+    this.scope.onmessage?.({ data: message });
+  }
+  terminate() {
+    this.scope.onmessage = null;
+  }
+};
+var BlobWorkerHost = class {
+  constructor() {
+    this.onResponse = () => {
+    };
+    const url = URL.createObjectURL(new Blob([buildKernelSource()], { type: "text/javascript" }));
+    try {
+      this.worker = new Worker(url);
+    } finally {
+      URL.revokeObjectURL(url);
+    }
+    this.worker.onmessage = (event) => {
+      this.onResponse(event.data);
+    };
+  }
+  post(message, transfer) {
+    this.worker.postMessage(message, transfer ?? []);
+  }
+  terminate() {
+    this.worker.terminate();
+  }
+};
+function toPayload(column) {
+  if (column.kind === "number" || column.kind === "boolean") {
+    return {
+      payload: { name: column.name, kind: column.kind, data: column.data, valid: column.valid },
+      transfer: [column.data.buffer, column.valid.buffer]
+    };
+  }
+  return {
+    payload: { name: column.name, kind: column.kind, data: column.codes, dict: column.dict },
+    transfer: [column.codes.buffer]
+  };
+}
+var TableStoreClient = class {
+  constructor(table, options = {}) {
+    this.seq = 0;
+    this.pending = /* @__PURE__ */ new Map();
+    const columnar = buildColumnarTable(table);
+    this.schema = {
+      columns: columnar.columns.map((column) => ({ name: column.name, kind: column.kind })),
+      rowCount: columnar.rowCount
+    };
+    this.viewRowCount = columnar.rowCount;
+    this.host = options.forceLocal || typeof Worker === "undefined" ? new LocalKernelHost() : new BlobWorkerHost();
+    this.host.onResponse = (message) => {
+      const resolve = this.pending.get(message.seq);
+      if (resolve) {
+        this.pending.delete(message.seq);
+        resolve(message);
+      }
+    };
+    const payloads = columnar.columns.map(toPayload);
+    this.ready = this.request(
+      (seq) => ({
+        type: "init",
+        seq,
+        columns: payloads.map((entry) => entry.payload),
+        rowCount: columnar.rowCount
+      }),
+      payloads.flatMap((entry) => entry.transfer)
+    ).then(() => void 0);
+  }
+  request(build, transfer) {
+    const seq = ++this.seq;
+    return new Promise((resolve, reject) => {
+      this.pending.set(seq, (message) => {
+        if (message.type === "error") reject(new Error(message.message));
+        else resolve(message);
+      });
+      this.host.post(build(seq), transfer);
+    });
+  }
+  async describe() {
+    await this.ready;
+    return this.schema;
+  }
+  async setView(view) {
+    await this.ready;
+    const raw = serializeTableViewState(view);
+    const headers = this.schema.columns.map((column) => column.name);
+    const { view: resolved, issues } = parseTableViewState(raw.sort, raw.filter, headers);
+    const columnIndex = new Map(headers.map((name, index) => [name, index]));
+    const response = await this.request((seq) => ({
+      type: "setView",
+      seq,
+      sort: resolved.sort.map((term) => ({
+        col: columnIndex.get(term.column),
+        dir: term.dir
+      })),
+      filter: resolved.filter.map((clause) => ({
+        col: columnIndex.get(clause.column),
+        op: clause.op,
+        value: clause.value,
+        ...clause.caseSensitive ? { caseSensitive: true } : {}
+      }))
+    }));
+    if (response.type !== "viewResult") throw new Error("unexpected kernel response");
+    this.viewRowCount = response.viewRowCount;
+    return { viewRowCount: response.viewRowCount, issues };
+  }
+  async rows(start, count) {
+    await this.ready;
+    const response = await this.request((seq) => ({ type: "rows", seq, start, count }));
+    if (response.type !== "rowsResult") throw new Error("unexpected kernel response");
+    return { start: response.start, rowIds: response.rowIds, cells: response.cells };
+  }
+  async applyEdits(edits) {
+    await this.ready;
+    const response = await this.request((seq) => ({
+      type: "applyEdits",
+      seq,
+      edits: edits.map((edit) => ({ rowId: edit.rowId, col: edit.col, value: edit.value }))
+    }));
+    if (response.type !== "editResult") throw new Error("unexpected kernel response");
+    return { staleView: response.staleView };
+  }
+  async distinct(col, limit) {
+    await this.ready;
+    const response = await this.request((seq) => ({ type: "distinct", seq, col, limit }));
+    if (response.type !== "distinctResult") throw new Error("unexpected kernel response");
+    return {
+      values: response.values,
+      totalDistinct: response.totalDistinct,
+      hasBlank: response.hasBlank
+    };
+  }
+  /** Row count under the current view (post-filter). */
+  get currentViewRowCount() {
+    return this.viewRowCount;
+  }
+  dispose() {
+    this.host.post({ type: "dispose" });
+    this.host.terminate();
+    this.pending.clear();
+  }
+};
+
+// src/store/journal.ts
+var EditJournal = class {
+  constructor() {
+    /** Latest value per cell, keyed `rowId:col`. */
+    this.latest = /* @__PURE__ */ new Map();
+    this.undoStack = [];
+    this.redoStack = [];
+  }
+  get dirtyCount() {
+    return this.latest.size;
+  }
+  get canUndo() {
+    return this.undoStack.length > 0;
+  }
+  get canRedo() {
+    return this.redoStack.length > 0;
+  }
+  isDirty(rowId, col) {
+    return this.latest.has(`${rowId}:${col}`);
+  }
+  /** Record one committed batch of edits. Clears the redo stack. */
+  commit(entries) {
+    if (entries.length === 0) return;
+    this.undoStack.push(entries);
+    this.redoStack.length = 0;
+    for (const entry of entries) this.applyLatest(entry);
+  }
+  /** Pop the latest batch; returns the INVERSE edits to apply to the store. */
+  undo() {
+    const batch = this.undoStack.pop();
+    if (!batch) return [];
+    this.redoStack.push(batch);
+    const inverse = batch.map((entry) => ({
+      rowId: entry.rowId,
+      col: entry.col,
+      value: entry.prev
+    }));
+    this.rebuildLatest();
+    return inverse;
+  }
+  /** Re-apply the most recently undone batch. */
+  redo() {
+    const batch = this.redoStack.pop();
+    if (!batch) return [];
+    this.undoStack.push(batch);
+    this.rebuildLatest();
+    return batch.map((entry) => ({ rowId: entry.rowId, col: entry.col, value: entry.next }));
+  }
+  /** Net outstanding edits (what a Save must persist). */
+  entries() {
+    return [...this.latest.values()];
+  }
+  clear() {
+    this.latest.clear();
+    this.undoStack.length = 0;
+    this.redoStack.length = 0;
+  }
+  applyLatest(entry) {
+    const key = `${entry.rowId}:${entry.col}`;
+    const existing = this.latest.get(key);
+    const merged = existing ? { ...entry, prev: existing.prev } : { ...entry };
+    if (merged.prev === merged.next) this.latest.delete(key);
+    else this.latest.set(key, merged);
+  }
+  rebuildLatest() {
+    this.latest.clear();
+    for (const batch of this.undoStack) {
+      for (const entry of batch) this.applyLatest(entry);
+    }
+  }
+};
+var journalCache = /* @__PURE__ */ new Map();
+function journalFor(path, revision) {
+  const key = `${revision} ${path}`;
+  let journal = journalCache.get(key);
+  if (!journal) {
+    for (const existing of journalCache.keys()) {
+      if (existing.endsWith(` ${path}`) && existing !== key) journalCache.delete(existing);
+    }
+    journal = new EditJournal();
+    journalCache.set(key, journal);
+  }
+  return journal;
+}
+function discardJournal(path) {
+  for (const existing of [...journalCache.keys()]) {
+    if (existing.endsWith(` ${path}`)) journalCache.delete(existing);
+  }
+}
+
+// src/DataGrid.tsx
+import {
+  useCallback,
+  useEffect,
+  useLayoutEffect,
+  useMemo,
+  useRef,
+  useState
+} from "react";
+import { useVirtualizer } from "@tanstack/react-virtual";
+import { serializeTableViewState as serializeTableViewState2 } from "@bendyline/squisq/table";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+var ROW_HEIGHT = 28;
+var PAGE_SIZE = 200;
+var OVERSCAN = 12;
+var DEFAULT_HEIGHT = 420;
+var COPY_CELL_CAP = 5e4;
+var DEFAULT_COL_WIDTH = 140;
+function cellDisplay(value) {
+  if (value === null || value === void 0) return "";
+  if (typeof value === "boolean") return value ? "true" : "false";
+  return String(value);
+}
+function coerceInput(text, kind) {
+  const trimmed = text.trim();
+  if (trimmed === "") return null;
+  if (kind === "number") {
+    const value = Number(trimmed);
+    if (!Number.isFinite(value)) return { error: "not a number" };
+    return value;
+  }
+  if (kind === "boolean") {
+    if (/^(?:true|1)$/i.test(trimmed)) return true;
+    if (/^(?:false|0)$/i.test(trimmed)) return false;
+    return { error: "true or false" };
+  }
+  return text;
+}
+var TEXT_OP_CHOICES = [
+  { op: "~", glyph: "~", label: "Contains" },
+  { op: "!~", glyph: "!~", label: "Doesn't contain" },
+  { op: "=", glyph: "=", label: "Equals" },
+  { op: "!=", glyph: "\u2260", label: "Not equal" },
+  { op: "^~", glyph: "^", label: "Starts with" },
+  { op: "$~", glyph: "$", label: "Ends with" }
+];
+var COMPARE_OP_CHOICES = [
+  { op: "=", glyph: "=", label: "Equals" },
+  { op: "!=", glyph: "\u2260", label: "Not equal" },
+  { op: "<", glyph: "<", label: "Less than" },
+  { op: ">", glyph: ">", label: "Greater than" },
+  { op: "<=", glyph: "\u2264", label: "At most" },
+  { op: ">=", glyph: "\u2265", label: "At least" }
+];
+var UNARY_OP_CHOICES = [
+  { op: "=", glyph: "\u2205", label: "Is empty", unary: true },
+  { op: "!=", glyph: "\u2260\u2205", label: "Is not empty", unary: true }
+];
+function opChoicesFor(kind) {
+  if (kind === "number" || kind === "boolean") {
+    return [...COMPARE_OP_CHOICES, ...UNARY_OP_CHOICES];
+  }
+  return [
+    ...TEXT_OP_CHOICES,
+    ...COMPARE_OP_CHOICES.filter((choice) => choice.op !== "=" && choice.op !== "!="),
+    ...UNARY_OP_CHOICES
+  ];
+}
+function defaultOpFor(kind) {
+  return kind === "number" || kind === "boolean" ? "=" : "~";
+}
+function choiceMatches(choice, state) {
+  return choice.op === state.op && choice.unary === true === (state.unary === true);
+}
+function glyphFor(kind, state) {
+  return opChoicesFor(kind).find((choice) => choiceMatches(choice, state))?.glyph ?? TEXT_OP_CHOICES.find((choice) => choice.op === state.op)?.glyph ?? state.op;
+}
+var VALUE_MENU_LIMIT = 100;
+var CASE_CAPABLE_OPS = ["=", "!=", "~", "!~", "^~", "$~"];
+function normalizedRange(selection) {
+  return {
+    r0: Math.min(selection.anchor.row, selection.focus.row),
+    r1: Math.max(selection.anchor.row, selection.focus.row),
+    c0: Math.min(selection.anchor.col, selection.focus.col),
+    c1: Math.max(selection.anchor.col, selection.focus.col)
+  };
+}
+function DataGrid({
+  provider,
+  journal,
+  view,
+  onViewChange,
+  viewPersisted = true,
+  onSave,
+  saving = false,
+  height = DEFAULT_HEIGHT,
+  readOnlyReason,
+  isCellLocked,
+  lockedReason,
+  formulaSupport,
+  onCellEdited,
+  extraDirtyCount = 0,
+  onDiscardExtra,
+  className
+}) {
+  const [schema, setSchema] = useState(null);
+  const [viewRowCount, setViewRowCount] = useState(0);
+  const [issueNote, setIssueNote] = useState(null);
+  const [staleView, setStaleView] = useState(false);
+  const [selection, setSelection] = useState(null);
+  const [editing, setEditing] = useState(
+    null
+  );
+  const [colWidths, setColWidths] = useState({});
+  const [filterOps, setFilterOps] = useState({});
+  const [opMenuCol, setOpMenuCol] = useState(null);
+  const [opMenuPos, setOpMenuPos] = useState({ left: 0, top: 0 });
+  const [valueMenuPos, setValueMenuPos] = useState({ left: 0, top: 0 });
+  const [valueMenuCol, setValueMenuCol] = useState(null);
+  const [valueMenuData, setValueMenuData] = useState(null);
+  const [dirtyTick, setDirtyTick] = useState(0);
+  const [announce, setAnnounce] = useState("");
+  const [fetchTick, setFetchTick] = useState(0);
+  const bodyRef = useRef(null);
+  const rootRef = useRef(null);
+  const opMenuRef = useRef(null);
+  const valueMenuRef = useRef(null);
+  const focusRef = useRef(null);
+  const wasEditingRef = useRef(false);
+  useEffect(() => {
+    if (wasEditingRef.current && !editing) focusRef.current?.focus();
+    wasEditingRef.current = editing !== null;
+  }, [editing]);
+  const cache = useRef({ version: 0, pages: /* @__PURE__ */ new Map() });
+  const inFlight = useRef(/* @__PURE__ */ new Set());
+  const selectionCells = useRef(/* @__PURE__ */ new Map());
+  const viewRef = useRef(view);
+  viewRef.current = view;
+  const editable = Boolean(journal && provider.applyEdits && !readOnlyReason);
+  const dirtyCount = journal?.dirtyCount ?? 0;
+  void dirtyTick;
+  void fetchTick;
+  useEffect(() => {
+    let cancelled = false;
+    provider.describe().then(
+      (described) => {
+        if (!cancelled) setSchema(described);
+      },
+      () => void 0
+    );
+    return () => {
+      cancelled = true;
+    };
+  }, [provider]);
+  const applyView = useCallback(
+    async (next) => {
+      const result = await provider.setView(next);
+      cache.current = { version: cache.current.version + 1, pages: /* @__PURE__ */ new Map() };
+      inFlight.current.clear();
+      setViewRowCount(result.viewRowCount);
+      setStaleView(false);
+      setIssueNote(
+        result.issues.length > 0 ? result.issues.map((i) => i.message).join("; ") : null
+      );
+      setFetchTick((t) => t + 1);
+    },
+    [provider]
+  );
+  useEffect(() => {
+    void applyView(view);
+  }, [applyView, JSON.stringify(serializeTableViewState2(view))]);
+  const virtualizer = useVirtualizer({
+    count: viewRowCount,
+    getScrollElement: () => bodyRef.current,
+    estimateSize: () => ROW_HEIGHT,
+    overscan: OVERSCAN,
+    // Correct first paint before the scroll element is measured — and the
+    // only measurement available in layout-less environments (jsdom).
+    initialRect: { width: 800, height }
+  });
+  const virtualItems = virtualizer.getVirtualItems();
+  useEffect(() => {
+    if (viewRowCount === 0) return;
+    const version = cache.current.version;
+    const first = virtualItems[0]?.index ?? 0;
+    const last = virtualItems[virtualItems.length - 1]?.index ?? 0;
+    const firstPage = Math.floor(first / PAGE_SIZE);
+    const lastPage = Math.floor(last / PAGE_SIZE);
+    for (let page = firstPage; page <= lastPage; page++) {
+      if (cache.current.pages.has(page) || inFlight.current.has(page)) continue;
+      inFlight.current.add(page);
+      provider.rows(page * PAGE_SIZE, PAGE_SIZE).then(
+        (result) => {
+          inFlight.current.delete(page);
+          if (cache.current.version !== version) return;
+          cache.current.pages.set(page, {
+            rowIds: Array.from(result.rowIds),
+            cells: result.cells
+          });
+          setFetchTick((t) => t + 1);
+        },
+        () => inFlight.current.delete(page)
+      );
+    }
+  }, [provider, virtualItems, viewRowCount, fetchTick]);
+  const cellAt = useCallback((row) => {
+    const page = cache.current.pages.get(Math.floor(row / PAGE_SIZE));
+    if (!page) return null;
+    const offset = row % PAGE_SIZE;
+    const rowId = page.rowIds[offset];
+    const cells = page.cells[offset];
+    if (rowId === void 0 || !cells) return null;
+    return { rowId, cells };
+  }, []);
+  useEffect(() => {
+    if (!selection || !schema) return;
+    const { r0, r1 } = normalizedRange(selection);
+    if ((r1 - r0 + 1) * schema.columns.length > COPY_CELL_CAP) return;
+    let cancelled = false;
+    void (async () => {
+      const rows = /* @__PURE__ */ new Map();
+      for (let start = r0; start <= r1; start += PAGE_SIZE) {
+        const page = await provider.rows(start, Math.min(PAGE_SIZE, r1 - start + 1));
+        if (cancelled) return;
+        page.cells.forEach((cells, index) => rows.set(page.start + index, cells));
+      }
+      selectionCells.current = rows;
+    })();
+    return () => {
+      cancelled = true;
+    };
+  }, [provider, schema, selection]);
+  const handleCopy = useCallback(
+    (event) => {
+      if (!selection || !schema || editing) return;
+      const target = event.target;
+      if (target instanceof HTMLInputElement || target instanceof HTMLTextAreaElement) return;
+      event.preventDefault();
+      const { r0, r1, c0, c1 } = normalizedRange(selection);
+      const capRows = Math.floor(COPY_CELL_CAP / Math.max(1, c1 - c0 + 1));
+      const lastRow = Math.min(r1, r0 + capRows - 1);
+      const lines = [];
+      const htmlRows = [];
+      for (let row = r0; row <= lastRow; row++) {
+        const cells = selectionCells.current.get(row) ?? cellAt(row)?.cells;
+        const values = [];
+        for (let col = c0; col <= c1; col++) values.push(cellDisplay(cells?.[col] ?? null));
+        lines.push(values.join("	"));
+        htmlRows.push(`<tr>${values.map((v) => `<td>${escapeHtml(v)}</td>`).join("")}</tr>`);
+      }
+      event.clipboardData.setData("text/plain", lines.join("\n"));
+      event.clipboardData.setData("text/html", `<table>${htmlRows.join("")}</table>`);
+      if (lastRow < r1) {
+        setAnnounce(`Copy truncated to ${lastRow - r0 + 1} rows (${COPY_CELL_CAP} cell cap).`);
+      } else {
+        setAnnounce(`Copied ${lastRow - r0 + 1}\xD7${c1 - c0 + 1} cells.`);
+      }
+    },
+    [cellAt, editing, schema, selection]
+  );
+  const beginEdit = useCallback(
+    (pos, seed) => {
+      if (!editable || !schema) return;
+      const current = cellAt(pos.row);
+      if (current && isCellLocked?.(current.rowId, pos.col)) {
+        setAnnounce(lockedReason ?? "This cell is locked");
+        return;
+      }
+      const formula = current ? formulaSupport?.getFormula(current.rowId, pos.col) : void 0;
+      setEditing({
+        ...pos,
+        draft: seed ?? (formula !== void 0 ? `=${formula}` : cellDisplay(current?.cells[pos.col] ?? null))
+      });
+    },
+    [cellAt, editable, schema, isCellLocked, lockedReason, formulaSupport]
+  );
+  const applyCacheUpdates = useCallback((edits) => {
+    if (edits.length === 0) return;
+    const byRowId = /* @__PURE__ */ new Map();
+    for (const edit of edits) {
+      const list = byRowId.get(edit.rowId) ?? [];
+      list.push(edit);
+      byRowId.set(edit.rowId, list);
+    }
+    for (const page of cache.current.pages.values()) {
+      for (let offset = 0; offset < page.rowIds.length; offset++) {
+        const rowEdits = byRowId.get(page.rowIds[offset]);
+        if (!rowEdits) continue;
+        for (const edit of rowEdits) {
+          page.cells[offset][edit.col] = edit.value;
+        }
+      }
+    }
+    setFetchTick((t) => t + 1);
+  }, []);
+  const commitEdit = useCallback(async () => {
+    if (!editing || !schema || !journal || !provider.applyEdits) return true;
+    if (formulaSupport && editing.draft.trim().startsWith("=")) {
+      const located2 = cellAt(editing.row);
+      if (!located2) {
+        setEditing(null);
+        return true;
+      }
+      const result2 = await formulaSupport.commitFormula(
+        located2.rowId,
+        editing.col,
+        editing.draft.trim().slice(1)
+      );
+      if (!result2.ok) {
+        setEditing({ ...editing, error: result2.error ?? "formula rejected" });
+        return false;
+      }
+      setEditing(null);
+      if (result2.updates && result2.updates.length > 0) {
+        const applied = await provider.applyEdits(result2.updates);
+        if (applied.staleView) setStaleView(true);
+        applyCacheUpdates(result2.updates);
+      }
+      setDirtyTick((t) => t + 1);
+      return true;
+    }
+    const kind = schema.columns[editing.col]?.kind ?? "string";
+    const coerced = coerceInput(editing.draft, kind);
+    if (typeof coerced === "object" && coerced !== null && "error" in coerced) {
+      setEditing({ ...editing, error: coerced.error });
+      return false;
+    }
+    const located = cellAt(editing.row);
+    if (!located) {
+      setEditing(null);
+      return true;
+    }
+    const prev = located.cells[editing.col] ?? null;
+    const next = coerced;
+    setEditing(null);
+    if (prev === next) return true;
+    journal.commit([{ rowId: located.rowId, col: editing.col, prev, next }]);
+    located.cells[editing.col] = next;
+    const result = await provider.applyEdits([
+      { rowId: located.rowId, col: editing.col, value: next }
+    ]);
+    if (result.staleView) setStaleView(true);
+    const dependents = await onCellEdited?.({
+      rowId: located.rowId,
+      col: editing.col,
+      value: next
+    });
+    if (dependents && dependents.length > 0) {
+      const applied = await provider.applyEdits(dependents);
+      if (applied.staleView) setStaleView(true);
+      applyCacheUpdates(dependents);
+    }
+    setDirtyTick((t) => t + 1);
+    return true;
+  }, [applyCacheUpdates, cellAt, editing, formulaSupport, journal, onCellEdited, provider, schema]);
+  const handlePaste = useCallback(
+    (event) => {
+      if (!selection || !schema || !journal || !provider.applyEdits || editing) return;
+      const target = event.target;
+      if (target instanceof HTMLInputElement || target instanceof HTMLTextAreaElement) return;
+      const text = event.clipboardData.getData("text/plain");
+      if (!text) return;
+      event.preventDefault();
+      const lines = text.replace(/\r\n?/g, "\n").split("\n");
+      if (lines.length > 1 && lines[lines.length - 1] === "") lines.pop();
+      const block = lines.map((line) => line.split("	"));
+      const { r0, c0 } = normalizedRange(selection);
+      const entries = [];
+      let skipped = 0;
+      for (let dr = 0; dr < block.length; dr++) {
+        const row = r0 + dr;
+        if (row >= viewRowCount) {
+          skipped += block[dr].length;
+          continue;
+        }
+        const located = cellAt(row);
+        if (!located) {
+          skipped += block[dr].length;
+          continue;
+        }
+        for (let dc = 0; dc < block[dr].length; dc++) {
+          const col = c0 + dc;
+          const kind = schema.columns[col]?.kind;
+          if (kind === void 0 || isCellLocked?.(located.rowId, col)) {
+            skipped++;
+            continue;
+          }
+          const coerced = coerceInput(block[dr][dc], kind);
+          if (typeof coerced === "object" && coerced !== null && "error" in coerced) {
+            skipped++;
+            continue;
+          }
+          const prev = located.cells[col] ?? null;
+          const next = coerced;
+          if (prev === next) continue;
+          entries.push({ rowId: located.rowId, col, prev, next });
+          located.cells[col] = next;
+        }
+      }
+      if (entries.length === 0) {
+        if (skipped > 0) setAnnounce(`Nothing pasted (${skipped} cells skipped).`);
+        return;
+      }
+      journal.commit(entries);
+      void (async () => {
+        const edits = entries.map(({ rowId, col, next }) => ({ rowId, col, value: next }));
+        const result = await provider.applyEdits(edits);
+        if (result.staleView) setStaleView(true);
+        const dependents = [];
+        for (const edit of edits) {
+          const extra = await onCellEdited?.(edit);
+          if (extra) dependents.push(...extra);
+        }
+        if (dependents.length > 0) {
+          const applied = await provider.applyEdits(dependents);
+          if (applied.staleView) setStaleView(true);
+          applyCacheUpdates(dependents);
+        }
+        setDirtyTick((t) => t + 1);
+        setFetchTick((t) => t + 1);
+        setAnnounce(
+          `Pasted ${entries.length} cell${entries.length === 1 ? "" : "s"}` + (skipped > 0 ? ` (${skipped} skipped)` : "") + "."
+        );
+      })();
+    },
+    [
+      applyCacheUpdates,
+      cellAt,
+      editing,
+      isCellLocked,
+      journal,
+      onCellEdited,
+      provider,
+      schema,
+      selection,
+      viewRowCount
+    ]
+  );
+  const runJournal = useCallback(
+    async (direction) => {
+      if (!journal || !provider.applyEdits) return;
+      const edits = direction === "undo" ? journal.undo() : journal.redo();
+      if (edits.length === 0) return;
+      const result = await provider.applyEdits(edits);
+      if (result.staleView) setStaleView(true);
+      cache.current.pages.clear();
+      setDirtyTick((t) => t + 1);
+      setFetchTick((t) => t + 1);
+    },
+    [journal, provider]
+  );
+  const cycleSort = useCallback(
+    (columnName, additive) => {
+      const current = viewRef.current;
+      const existing = current.sort.find((term) => term.column === columnName);
+      let nextTerms = additive ? [...current.sort] : [];
+      if (!existing) {
+        nextTerms = additive ? [...nextTerms, { column: columnName, dir: "asc" }] : [{ column: columnName, dir: "asc" }];
+      } else if (existing.dir === "asc") {
+        nextTerms = (additive ? current.sort : [existing]).map(
+          (term) => term.column === columnName ? { ...term, dir: "desc" } : term
+        );
+      } else {
+        nextTerms = (additive ? current.sort : []).filter((term) => term.column !== columnName);
+      }
+      onViewChange?.({ ...current, sort: nextTerms });
+    },
+    [onViewChange]
+  );
+  const setColumnFilter = useCallback(
+    (columnName, text, op, caseSensitive, unary = false) => {
+      const current = viewRef.current;
+      const others = current.filter.filter((clause) => clause.column !== columnName);
+      onViewChange?.({
+        ...current,
+        filter: unary ? [...others, { column: columnName, op, value: "" }] : text.trim() === "" ? others : [
+          ...others,
+          {
+            column: columnName,
+            op,
+            value: text,
+            ...caseSensitive && CASE_CAPABLE_OPS.includes(op) ? { caseSensitive: true } : {}
+          }
+        ]
+      });
+    },
+    [onViewChange]
+  );
+  const opStateFor = useCallback(
+    (col, columnName) => {
+      const local = filterOps[col];
+      if (local) return local;
+      const clause = viewRef.current.filter.find((entry) => entry.column === columnName);
+      if (clause) {
+        return {
+          op: clause.op,
+          caseSensitive: clause.caseSensitive === true,
+          ...clause.value === "" && (clause.op === "=" || clause.op === "!=") ? { unary: true } : {}
+        };
+      }
+      return { op: defaultOpFor(schema?.columns[col]?.kind ?? "string"), caseSensitive: false };
+    },
+    [filterOps, schema]
+  );
+  const chooseFilterOp = useCallback(
+    (col, columnName, next) => {
+      setFilterOps((prev) => ({ ...prev, [col]: next }));
+      setOpMenuCol(null);
+      const clause = viewRef.current.filter.find((entry) => entry.column === columnName);
+      if (next.unary) {
+        setColumnFilter(columnName, "", next.op, false, true);
+      } else if (clause && clause.value.trim() !== "") {
+        setColumnFilter(columnName, clause.value, next.op, next.caseSensitive);
+      } else if (clause) {
+        setColumnFilter(columnName, "", next.op, next.caseSensitive);
+      }
+    },
+    [setColumnFilter]
+  );
+  const clearColumnFilter = useCallback(
+    (col, columnName) => {
+      const prior = opStateFor(col, columnName);
+      setFilterOps((prev) => ({
+        ...prev,
+        [col]: prior.unary ? { op: defaultOpFor(schema?.columns[col]?.kind ?? "string"), caseSensitive: false } : { op: prior.op, caseSensitive: prior.caseSensitive }
+      }));
+      setOpMenuCol(null);
+      setColumnFilter(columnName, "", prior.op, prior.caseSensitive);
+    },
+    [opStateFor, schema, setColumnFilter]
+  );
+  const menuAnchorPos = useCallback((anchor) => {
+    const rootRect = rootRef.current?.getBoundingClientRect();
+    const rect = anchor.getBoundingClientRect();
+    if (!rootRect) return { left: 0, top: 0 };
+    return { left: rect.left - rootRect.left, top: rect.bottom - rootRect.top + 2 };
+  }, []);
+  const toggleOpMenu = useCallback(
+    (col, anchor) => {
+      setValueMenuCol(null);
+      setOpMenuPos(menuAnchorPos(anchor));
+      setOpMenuCol((open) => open === col ? null : col);
+    },
+    [menuAnchorPos]
+  );
+  const openValueMenu = useCallback(
+    (col, anchor) => {
+      setOpMenuCol(null);
+      if (valueMenuCol === col) {
+        setValueMenuCol(null);
+        return;
+      }
+      setValueMenuPos(menuAnchorPos(anchor));
+      setValueMenuCol(col);
+      void provider.distinct?.(col, VALUE_MENU_LIMIT).then((result) => {
+        setValueMenuData({ col, result });
+      });
+    },
+    [menuAnchorPos, provider, valueMenuCol]
+  );
+  useLayoutEffect(() => {
+    const root = rootRef.current;
+    if (!root) return;
+    for (const menu of [opMenuRef.current, valueMenuRef.current]) {
+      if (!menu) continue;
+      const maxLeft = root.clientWidth - menu.offsetWidth - 4;
+      const maxTop = root.clientHeight - menu.offsetHeight - 4;
+      menu.style.left = `${Math.max(4, Math.min(parseFloat(menu.style.left) || 0, maxLeft))}px`;
+      menu.style.top = `${Math.max(4, Math.min(parseFloat(menu.style.top) || 0, maxTop))}px`;
+    }
+  }, [opMenuCol, valueMenuCol, valueMenuData]);
+  const chooseFilterValue = useCallback(
+    (col, columnName, value) => {
+      setFilterOps((prev) => ({ ...prev, [col]: { op: "=", caseSensitive: false } }));
+      setValueMenuCol(null);
+      setColumnFilter(columnName, value, "=", false);
+    },
+    [setColumnFilter]
+  );
+  const moveFocus = useCallback(
+    (rowDelta, colDelta, extend, absolute) => {
+      if (!schema) return;
+      setSelection((prev) => {
+        const from = prev?.focus ?? { row: 0, col: 0 };
+        const next = {
+          row: Math.max(0, Math.min(viewRowCount - 1, absolute?.row ?? from.row + rowDelta)),
+          col: Math.max(
+            0,
+            Math.min(schema.columns.length - 1, absolute?.col ?? from.col + colDelta)
+          )
+        };
+        virtualizer.scrollToIndex(next.row);
+        return extend && prev ? { anchor: prev.anchor, focus: next } : { anchor: next, focus: next };
+      });
+    },
+    [schema, viewRowCount, virtualizer]
+  );
+  const handleKeyDown = useCallback(
+    (event) => {
+      if (!schema) return;
+      const target = event.target;
+      const inTextEntry = target instanceof HTMLInputElement || target instanceof HTMLTextAreaElement || target !== null && target.isContentEditable;
+      if (inTextEntry && !editing) return;
+      const meta = event.metaKey || event.ctrlKey;
+      if (editing) {
+        if (event.key === "Escape") {
+          setEditing(null);
+          event.preventDefault();
+        } else if (event.key === "Enter") {
+          void commitEdit().then((ok) => ok && moveFocus(1, 0, false));
+          event.preventDefault();
+        } else if (event.key === "Tab") {
+          void commitEdit().then((ok) => ok && moveFocus(0, event.shiftKey ? -1 : 1, false));
+          event.preventDefault();
+        }
+        return;
+      }
+      const pageRows = Math.max(1, Math.floor(height / ROW_HEIGHT) - 1);
+      switch (event.key) {
+        case "ArrowDown":
+          moveFocus(
+            meta ? Number.POSITIVE_INFINITY : 1,
+            0,
+            event.shiftKey,
+            meta ? { row: viewRowCount - 1 } : void 0
+          );
+          break;
+        case "ArrowUp":
+          moveFocus(meta ? 0 : -1, 0, event.shiftKey, meta ? { row: 0 } : void 0);
+          break;
+        case "ArrowRight":
+          moveFocus(
+            0,
+            meta ? 0 : 1,
+            event.shiftKey,
+            meta ? { col: schema.columns.length - 1 } : void 0
+          );
+          break;
+        case "ArrowLeft":
+          moveFocus(0, meta ? 0 : -1, event.shiftKey, meta ? { col: 0 } : void 0);
+          break;
+        case "PageDown":
+          moveFocus(pageRows, 0, event.shiftKey);
+          break;
+        case "PageUp":
+          moveFocus(-pageRows, 0, event.shiftKey);
+          break;
+        case "Home":
+          moveFocus(0, 0, event.shiftKey, meta ? { row: 0, col: 0 } : { col: 0 });
+          break;
+        case "End":
+          moveFocus(
+            0,
+            0,
+            event.shiftKey,
+            meta ? { row: viewRowCount - 1, col: schema.columns.length - 1 } : { col: schema.columns.length - 1 }
+          );
+          break;
+        case "Enter":
+        case "F2":
+          if (selection) beginEdit(selection.focus);
+          break;
+        case "a":
+        case "A":
+          if (meta) {
+            setSelection({
+              anchor: { row: 0, col: 0 },
+              focus: { row: viewRowCount - 1, col: schema.columns.length - 1 }
+            });
+            break;
+          }
+          if (selection && !meta) beginEdit(selection.focus, event.key);
+          else return;
+          break;
+        case "z":
+        case "Z":
+          if (meta) {
+            void runJournal(event.shiftKey ? "redo" : "undo");
+            break;
+          }
+          if (selection) beginEdit(selection.focus, event.key);
+          else return;
+          break;
+        default:
+          if (selection && event.key.length === 1 && !meta && !event.altKey) {
+            beginEdit(selection.focus, event.key);
+            break;
+          }
+          return;
+      }
+      event.preventDefault();
+    },
+    [
+      beginEdit,
+      commitEdit,
+      editing,
+      height,
+      moveFocus,
+      runJournal,
+      schema,
+      selection,
+      viewRowCount
+    ]
+  );
+  const startResize = useCallback((col, startX, startWidth) => {
+    const onMove = (event) => {
+      setColWidths((widths) => ({
+        ...widths,
+        [col]: Math.max(60, startWidth + (event.clientX - startX))
+      }));
+    };
+    const onUp = () => {
+      window.removeEventListener("pointermove", onMove);
+      window.removeEventListener("pointerup", onUp);
+    };
+    window.addEventListener("pointermove", onMove);
+    window.addEventListener("pointerup", onUp);
+  }, []);
+  const gridTemplate = useMemo(() => {
+    const count = schema?.columns.length ?? 0;
+    return Array.from(
+      { length: count },
+      (_, col) => `${colWidths[col] ?? DEFAULT_COL_WIDTH}px`
+    ).join(" ");
+  }, [colWidths, schema]);
+  const range = selection ? normalizedRange(selection) : null;
+  const filterValueFor = (name) => view.filter.find((clause) => clause.column === name)?.value ?? "";
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      ref: rootRef,
+      className: `squisq-grid${className ? ` ${className}` : ""}`,
+      role: "grid",
+      "aria-rowcount": viewRowCount + 1,
+      "aria-colcount": schema?.columns.length ?? 0,
+      "aria-multiselectable": "true",
+      onKeyDown: handleKeyDown,
+      onCopy: handleCopy,
+      onPaste: handlePaste,
+      onMouseDownCapture: (event) => {
+        const target = event.target;
+        if (opMenuCol !== null && !target?.closest(".squisq-grid-opmenu, .squisq-grid-opbutton")) {
+          setOpMenuCol(null);
+        }
+        if (valueMenuCol !== null && !target?.closest(".squisq-grid-valuemenu, .squisq-grid-valuebutton")) {
+          setValueMenuCol(null);
+        }
+      },
+      onKeyDownCapture: (event) => {
+        if (event.key !== "Escape") return;
+        if (opMenuCol !== null) setOpMenuCol(null);
+        if (valueMenuCol !== null) setValueMenuCol(null);
+      },
+      children: [
+        /* @__PURE__ */ jsxs(
+          "div",
+          {
+            className: "squisq-grid-scroller",
+            ref: bodyRef,
+            style: { height },
+            onScroll: () => {
+              if (opMenuCol !== null) setOpMenuCol(null);
+              if (valueMenuCol !== null) setValueMenuCol(null);
+            },
+            children: [
+              /* @__PURE__ */ jsx(
+                "div",
+                {
+                  className: "squisq-grid-header",
+                  role: "row",
+                  style: { gridTemplateColumns: gridTemplate },
+                  children: schema?.columns.map((column, col) => {
+                    const term = view.sort.find((entry) => entry.column === column.name);
+                    const ariaSort = term ? term.dir === "asc" ? "ascending" : "descending" : "none";
+                    return /* @__PURE__ */ jsxs(
+                      "div",
+                      {
+                        role: "columnheader",
+                        "aria-sort": ariaSort,
+                        className: "squisq-grid-headercell",
+                        children: [
+                          /* @__PURE__ */ jsxs(
+                            "button",
+                            {
+                              type: "button",
+                              className: "squisq-grid-sortbutton",
+                              onClick: (event) => cycleSort(column.name, event.shiftKey),
+                              title: `Sort by ${column.name}`,
+                              children: [
+                                /* @__PURE__ */ jsx("span", { className: "squisq-grid-colname", children: column.name }),
+                                term && /* @__PURE__ */ jsx("span", { className: "squisq-grid-sortmark", "aria-hidden": "true", children: term.dir === "asc" ? "\u25B2" : "\u25BC" })
+                              ]
+                            }
+                          ),
+                          /* @__PURE__ */ jsx("div", { className: "squisq-grid-filterrow", children: (() => {
+                            const opState = opStateFor(col, column.name);
+                            return /* @__PURE__ */ jsxs(Fragment, { children: [
+                              /* @__PURE__ */ jsxs(
+                                "button",
+                                {
+                                  type: "button",
+                                  className: `squisq-grid-opbutton${opState.caseSensitive ? " squisq-grid-opbutton--cs" : ""}`,
+                                  "aria-label": `Filter operator for ${column.name}`,
+                                  "aria-expanded": opMenuCol === col,
+                                  title: `${opChoicesFor(column.kind).find((c) => choiceMatches(c, opState))?.label ?? opState.op}${opState.caseSensitive ? " (case-sensitive)" : ""}`,
+                                  onClick: (event) => toggleOpMenu(col, event.currentTarget),
+                                  children: [
+                                    /* @__PURE__ */ jsx("span", { className: "squisq-grid-opglyph", children: glyphFor(column.kind, opState) }),
+                                    /* @__PURE__ */ jsx("span", { className: "squisq-grid-opcaret", "aria-hidden": "true", children: "\u25BE" })
+                                  ]
+                                }
+                              ),
+                              /* @__PURE__ */ jsx(
+                                "input",
+                                {
+                                  className: "squisq-grid-filterinput",
+                                  "aria-label": `Filter ${column.name}`,
+                                  placeholder: opState.unary ? opState.op === "=" ? "(empty)" : "(not empty)" : "filter",
+                                  disabled: opState.unary === true,
+                                  value: filterValueFor(column.name),
+                                  onChange: (event) => setColumnFilter(
+                                    column.name,
+                                    event.target.value,
+                                    opState.op,
+                                    opState.caseSensitive
+                                  )
+                                }
+                              ),
+                              provider.distinct && /* @__PURE__ */ jsx(
+                                "button",
+                                {
+                                  type: "button",
+                                  className: "squisq-grid-valuebutton",
+                                  "aria-label": `Filter ${column.name} by value`,
+                                  "aria-expanded": valueMenuCol === col,
+                                  title: "Filter by value",
+                                  onClick: (event) => openValueMenu(col, event.currentTarget),
+                                  children: "\u25BE"
+                                }
+                              )
+                            ] });
+                          })() }),
+                          /* @__PURE__ */ jsx(
+                            "div",
+                            {
+                              className: "squisq-grid-resizer",
+                              onPointerDown: (event) => {
+                                event.preventDefault();
+                                startResize(col, event.clientX, colWidths[col] ?? DEFAULT_COL_WIDTH);
+                              }
+                            }
+                          )
+                        ]
+                      },
+                      col
+                    );
+                  })
+                }
+              ),
+              /* @__PURE__ */ jsx("div", { className: "squisq-grid-body", style: { height: virtualizer.getTotalSize() }, children: virtualItems.map((item) => {
+                const located = cellAt(item.index);
+                return /* @__PURE__ */ jsx(
+                  "div",
+                  {
+                    role: "row",
+                    "aria-rowindex": item.index + 2,
+                    className: "squisq-grid-row",
+                    style: {
+                      transform: `translateY(${item.start}px)`,
+                      gridTemplateColumns: gridTemplate,
+                      height: ROW_HEIGHT
+                    },
+                    children: schema?.columns.map((column, col) => {
+                      const inRange = range && item.index >= range.r0 && item.index <= range.r1 && col >= range.c0 && col <= range.c1;
+                      const isFocus = selection && selection.focus.row === item.index && selection.focus.col === col;
+                      const isEditing = editing && editing.row === item.index && editing.col === col;
+                      const dirty = located && journal ? journal.isDirty(located.rowId, col) : false;
+                      const locked = editable && located ? isCellLocked?.(located.rowId, col) ?? false : false;
+                      const formula = located && formulaSupport ? formulaSupport.getFormula(located.rowId, col) : void 0;
+                      const classes = [
+                        "squisq-grid-cell",
+                        column.kind === "number" ? "squisq-grid-cell--num" : "",
+                        inRange ? "squisq-grid-cell--selected" : "",
+                        isFocus ? "squisq-grid-cell--focus" : "",
+                        dirty ? "squisq-grid-cell--dirty" : "",
+                        locked ? "squisq-grid-cell--locked" : "",
+                        formula !== void 0 ? "squisq-grid-cell--formula" : ""
+                      ].filter(Boolean).join(" ");
+                      return /* @__PURE__ */ jsx(
+                        "div",
+                        {
+                          role: "gridcell",
+                          "aria-colindex": col + 1,
+                          "aria-selected": inRange ? "true" : void 0,
+                          ...dirty ? { "aria-description": "edited, unsaved" } : {},
+                          ...locked && lockedReason ? { title: lockedReason } : formula !== void 0 ? { title: `=${formula}` } : {},
+                          ...locked ? { "aria-readonly": "true" } : {},
+                          className: classes,
+                          tabIndex: isFocus ? 0 : -1,
+                          ref: isFocus ? focusRef : void 0,
+                          onMouseDown: (event) => {
+                            const pos = { row: item.index, col };
+                            setSelection(
+                              (prev) => event.shiftKey && prev ? { anchor: prev.anchor, focus: pos } : { anchor: pos, focus: pos }
+                            );
+                          },
+                          onDoubleClick: () => beginEdit({ row: item.index, col }),
+                          children: isEditing ? /* @__PURE__ */ jsx(
+                            "input",
+                            {
+                              className: `squisq-grid-editor${editing.error ? " squisq-grid-editor--error" : ""}`,
+                              autoFocus: true,
+                              value: editing.draft,
+                              title: editing.error,
+                              onChange: (event) => setEditing({ ...editing, draft: event.target.value, error: void 0 }),
+                              onBlur: () => void commitEdit()
+                            }
+                          ) : cellDisplay(located?.cells[col] ?? null)
+                        },
+                        col
+                      );
+                    })
+                  },
+                  item.key
+                );
+              }) })
+            ]
+          }
+        ),
+        opMenuCol !== null && schema?.columns[opMenuCol] && (() => {
+          const col = opMenuCol;
+          const column = schema.columns[col];
+          const opState = opStateFor(col, column.name);
+          const caseCapable = column.kind !== "number" && column.kind !== "boolean";
+          const filterActive = view.filter.some((clause) => clause.column === column.name);
+          return /* @__PURE__ */ jsxs(
+            "div",
+            {
+              ref: opMenuRef,
+              className: "squisq-grid-opmenu",
+              role: "menu",
+              style: { left: opMenuPos.left, top: opMenuPos.top },
+              children: [
+                filterActive && /* @__PURE__ */ jsx(
+                  "button",
+                  {
+                    type: "button",
+                    role: "menuitem",
+                    className: "squisq-grid-opoption squisq-grid-opclear",
+                    onClick: () => clearColumnFilter(col, column.name),
+                    children: "(Clear filter)"
+                  }
+                ),
+                opChoicesFor(column.kind).map((choice) => /* @__PURE__ */ jsxs(
+                  "button",
+                  {
+                    type: "button",
+                    role: "menuitemradio",
+                    "aria-checked": choiceMatches(choice, opState),
+                    className: `squisq-grid-opoption${choiceMatches(choice, opState) ? " squisq-grid-opoption--active" : ""}`,
+                    onClick: () => chooseFilterOp(col, column.name, {
+                      op: choice.op,
+                      caseSensitive: opState.caseSensitive,
+                      ...choice.unary ? { unary: true } : {}
+                    }),
+                    children: [
+                      /* @__PURE__ */ jsx("span", { className: "squisq-grid-opglyph", children: choice.glyph }),
+                      choice.label
+                    ]
+                  },
+                  `${choice.op}${choice.unary ? "0" : ""}`
+                )),
+                caseCapable && /* @__PURE__ */ jsxs("label", { className: "squisq-grid-opcase", children: [
+                  /* @__PURE__ */ jsx(
+                    "input",
+                    {
+                      type: "checkbox",
+                      checked: opState.caseSensitive,
+                      onChange: (event) => chooseFilterOp(col, column.name, {
+                        op: opState.op,
+                        caseSensitive: event.target.checked,
+                        ...opState.unary ? { unary: true } : {}
+                      })
+                    }
+                  ),
+                  "Case sensitive"
+                ] })
+              ]
+            }
+          );
+        })(),
+        valueMenuCol !== null && schema?.columns[valueMenuCol] && (() => {
+          const col = valueMenuCol;
+          const column = schema.columns[col];
+          const opState = opStateFor(col, column.name);
+          const filterActive = view.filter.some((clause) => clause.column === column.name);
+          return /* @__PURE__ */ jsx(
+            "div",
+            {
+              ref: valueMenuRef,
+              className: "squisq-grid-valuemenu",
+              role: "menu",
+              style: { left: valueMenuPos.left, top: valueMenuPos.top },
+              children: valueMenuData?.col === col ? /* @__PURE__ */ jsxs(Fragment, { children: [
+                filterActive && /* @__PURE__ */ jsx(
+                  "button",
+                  {
+                    type: "button",
+                    role: "menuitem",
+                    className: "squisq-grid-opoption squisq-grid-opclear",
+                    onClick: () => {
+                      setValueMenuCol(null);
+                      clearColumnFilter(col, column.name);
+                    },
+                    children: "(All)"
+                  }
+                ),
+                valueMenuData.result.hasBlank && /* @__PURE__ */ jsx(
+                  "button",
+                  {
+                    type: "button",
+                    role: "menuitemradio",
+                    "aria-checked": filterActive && opState.unary === true,
+                    className: `squisq-grid-opoption${filterActive && opState.unary === true ? " squisq-grid-opoption--active" : ""}`,
+                    onClick: () => {
+                      setValueMenuCol(null);
+                      chooseFilterOp(col, column.name, {
+                        op: "=",
+                        caseSensitive: false,
+                        unary: true
+                      });
+                    },
+                    children: "(Blanks)"
+                  }
+                ),
+                valueMenuData.result.values.map((value) => {
+                  const active = filterActive && !opState.unary && opState.op === "=" && filterValueFor(column.name) === value;
+                  return /* @__PURE__ */ jsx(
+                    "button",
+                    {
+                      type: "button",
+                      role: "menuitemradio",
+                      "aria-checked": active,
+                      className: `squisq-grid-opoption squisq-grid-valueoption${active ? " squisq-grid-opoption--active" : ""}`,
+                      title: value,
+                      onClick: () => chooseFilterValue(col, column.name, value),
+                      children: value
+                    },
+                    value
+                  );
+                }),
+                valueMenuData.result.totalDistinct > valueMenuData.result.values.length && /* @__PURE__ */ jsxs("div", { className: "squisq-grid-valuemenu-note", children: [
+                  "showing ",
+                  valueMenuData.result.values.length,
+                  " of",
+                  " ",
+                  valueMenuData.result.totalDistinct.toLocaleString(),
+                  " values"
+                ] })
+              ] }) : /* @__PURE__ */ jsx("div", { className: "squisq-grid-valuemenu-note", children: "loading\u2026" })
+            }
+          );
+        })(),
+        /* @__PURE__ */ jsxs("div", { className: "squisq-grid-footer", children: [
+          /* @__PURE__ */ jsxs("span", { className: "squisq-grid-status", "aria-live": "polite", children: [
+            announce || `${viewRowCount.toLocaleString()} row${viewRowCount === 1 ? "" : "s"}${schema && viewRowCount !== schema.rowCount ? ` (of ${schema.rowCount.toLocaleString()})` : ""}${schema ? `, ${schema.columns.length} column${schema.columns.length === 1 ? "" : "s"}` : ""}`,
+            issueNote ? ` \xB7 ${issueNote}` : "",
+            !viewPersisted && (view.sort.length > 0 || view.filter.length > 0) ? " \xB7 view not saved to document" : ""
+          ] }),
+          staleView && /* @__PURE__ */ jsx(
+            "button",
+            {
+              type: "button",
+              className: "squisq-grid-refresh",
+              onClick: () => void applyView(viewRef.current),
+              children: "order may be outdated \u2014 refresh"
+            }
+          ),
+          readOnlyReason && /* @__PURE__ */ jsx("span", { className: "squisq-grid-readonly", children: readOnlyReason }),
+          editable && dirtyCount + extraDirtyCount > 0 && /* @__PURE__ */ jsxs("span", { className: "squisq-grid-dirtybar", children: [
+            (dirtyCount + extraDirtyCount).toLocaleString(),
+            " unsaved edit",
+            dirtyCount + extraDirtyCount === 1 ? "" : "s",
+            /* @__PURE__ */ jsx(
+              "button",
+              {
+                type: "button",
+                className: "squisq-grid-save",
+                disabled: saving,
+                onClick: () => void onSave?.(),
+                children: saving ? "Saving\u2026" : "Save"
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              "button",
+              {
+                type: "button",
+                className: "squisq-grid-discard",
+                disabled: saving,
+                onClick: () => {
+                  void (async () => {
+                    while (journal?.canUndo) await runJournal("undo");
+                    if (onDiscardExtra) {
+                      await onDiscardExtra();
+                      cache.current.pages.clear();
+                      setFetchTick((t) => t + 1);
+                      setDirtyTick((t) => t + 1);
+                    }
+                  })();
+                },
+                children: "Discard"
+              }
+            )
+          ] })
+        ] })
+      ]
+    }
+  );
+}
+function escapeHtml(text) {
+  return text.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;");
+}
+export {
+  DataGrid,
+  EditJournal,
+  LocalKernelHost,
+  TableStoreClient,
+  buildColumnarTable,
+  buildKernelSource,
+  columnCellValue,
+  discardJournal,
+  journalFor,
+  tableKernel
+};