makersclaw 0.1.0 → 0.3.0

package/registry/blocks/spreadsheet/spreadsheet.jsx

@@ -0,0 +1,1732 @@
+"use client";
+
+// The Spreadsheet: a table you edit like Sheets or Airtable. Rows and
+// columns come in as props; every edit goes out through an async callback
+// that answers { ok }, applied at once and rolled back if it says no.
+//
+// Virtualised both ways (@tanstack/react-virtual): only the cells in the
+// window are in the DOM, so 10,000 rows scroll like 10. Rows have one fixed
+// height, which keeps every position arithmetic — no measuring.
+//
+// Layout: one scroll box. Inside it, a content box the size of the whole
+// table; the header row is sticky to its top; each row is absolutely
+// placed at its offset. In a row (and in the header) the row-number
+// gutter and the frozen columns are in flow and sticky to the left; the
+// other cells are absolutely placed at their column's offset, so the
+// virtualiser may hand back any set of them.
+import { useCallback, useEffect, useId, useImperativeHandle, useLayoutEffect, useMemo, useRef, useState } from "react";
+import { defaultRangeExtractor, useVirtualizer } from "@tanstack/react-virtual";
+import {
+  Badge,
+  Button,
+  ContextMenu,
+  Icon,
+  IconButton,
+  InputGroup,
+  Menu,
+  Popover,
+  Skeleton,
+  cx,
+  toast,
+} from "../../ui";
+import { CellValue, editorFor } from "./cells";
+import { AddFieldPanel, FieldsPanel, FilterPanel, ShortcutsPanel, SortPanel, TYPE_ORDER, sortWords, uid } from "./chrome";
+import {
+  applyChanges,
+  clamp,
+  clearChanges,
+  fillChanges,
+  inRange,
+  invertChanges,
+  moveBy,
+  normalizeView,
+  orderedColumns,
+  parseTSV,
+  pasteChanges,
+  processRows,
+  rangeOf,
+  rangeText,
+  realChanges,
+  summarize,
+  toTSV,
+  visibleColumns,
+} from "./grid";
+import { convertValue, isBlank, parseCell, typeOf } from "./types";
+
+const SIZES = {
+  desk: { row: 36, head: 40, gutter: 64 },
+  touch: { row: 44, head: 44, gutter: 52 },
+};
+const ADD_COL = 48; // the "+" at the end of the header
+const MIN_W = 64;
+const MAX_W = 800;
+const FROZEN_NARROW = 148; // a frozen column's widest on a phone
+
+const plural = (n, noun) => `${n.toLocaleString()} ${n === 1 ? noun : `${noun}s`}`;
+
+async function call(fn, ...args) {
+  if (!fn) return { ok: true };
+  try {
+    const r = await fn(...args);
+    return r ?? { ok: true };
+  } catch (e) {
+    return { ok: false, error: e?.message };
+  }
+}
+
+const isMac = () => typeof navigator !== "undefined" && /Mac|iP(hone|ad)/.test(navigator.platform || navigator.userAgent);
+
+export function Spreadsheet({
+  rows = [],
+  columns = [],
+  onChange,
+  onAddRows,
+  onDeleteRows,
+  onColumnsChange,
+  view: viewProp,
+  defaultView,
+  onViewChange,
+  people,
+  types,
+  validate,
+  readOnly = false,
+  lockFields = false,
+  onExpandRow,
+  onSelectionChange,
+  createRow,
+  loading = false,
+  label = "Table",
+  noun = "row",
+  height = 560,
+  toolbar = true,
+  toolbarStart,
+  toolbarEnd,
+  empty,
+  locale,
+  currency,
+  today,
+  className,
+  ref,
+}) {
+  const gid = useId().replace(/[^\w-]/g, "");
+  const custom = types;
+
+  // ── data: the props, with optimistic edits laid on ───────────────────
+  const [local, setLocal] = useState(rows);
+  const [seenRows, setSeenRows] = useState(rows);
+  if (rows !== seenRows) {
+    setSeenRows(rows);
+    setLocal(rows);
+  }
+  const [localCols, setLocalCols] = useState(columns);
+  const [seenCols, setSeenCols] = useState(columns);
+  if (columns !== seenCols) {
+    setSeenCols(columns);
+    setLocalCols(columns);
+  }
+  const localRef = useRef(local);
+  localRef.current = local;
+  const colsRef = useRef(localCols);
+  colsRef.current = localCols;
+
+  // ── the view ─────────────────────────────────────────────────────────
+  const [ownView, setOwnView] = useState(() => normalizeView(defaultView));
+  const view = useMemo(() => normalizeView(viewProp ?? ownView), [viewProp, ownView]);
+  const viewRef = useRef(view);
+  viewRef.current = view;
+  const setView = useCallback(
+    (patch) => {
+      const next = { ...viewRef.current, ...(typeof patch === "function" ? patch(viewRef.current) : patch) };
+      viewRef.current = next;
+      if (viewProp === undefined) setOwnView(next);
+      onViewChange?.(next);
+    },
+    [viewProp, onViewChange],
+  );
+  const [search, setSearch] = useState("");
+
+  // ── the box: phone or desk ───────────────────────────────────────────
+  const rootRef = useRef(null);
+  const scroller = useRef(null);
+  const [boxW, setBoxW] = useState(null);
+  const [coarse, setCoarse] = useState(false);
+  useLayoutEffect(() => {
+    const el = rootRef.current;
+    if (!el) return;
+    setBoxW(el.clientWidth);
+    const ro = new ResizeObserver(() => setBoxW(el.clientWidth));
+    ro.observe(el);
+    const mq = window.matchMedia?.("(pointer: coarse)");
+    const onMq = () => setCoarse(Boolean(mq?.matches));
+    onMq();
+    mq?.addEventListener?.("change", onMq);
+    return () => {
+      ro.disconnect();
+      mq?.removeEventListener?.("change", onMq);
+    };
+  }, []);
+  const narrow = boxW != null && boxW < 640;
+  const size = narrow || coarse ? SIZES.touch : SIZES.desk;
+  const rowH = size.row;
+  const headH = size.head;
+  const gutterW = size.gutter;
+
+  const ctx = useMemo(() => ({ people: people ?? [], locale, currency }), [people, locale, currency]);
+  const canEditCols = Boolean(onColumnsChange) && !readOnly && !lockFields;
+  const canAdd = Boolean(onAddRows) && !readOnly;
+
+  // ── columns in view ──────────────────────────────────────────────────
+  const [resizing, setResizing] = useState(null); // { key, width } while a handle is dragged
+  const cols = useMemo(() => {
+    const list = visibleColumns(localCols, view, custom, narrow);
+    return list.map((c, i) => {
+      let w = resizing?.key === c.key ? resizing.width : c.width;
+      if (narrow && i < view.frozen) w = Math.min(w, FROZEN_NARROW);
+      return w === c.width ? c : { ...c, width: w };
+    });
+  }, [localCols, view, custom, narrow, resizing]);
+  const frozenN = Math.min(view.frozen, cols.length);
+  const colLeft = useMemo(() => {
+    const out = [];
+    let x = gutterW;
+    for (const c of cols) {
+      out.push(x);
+      x += c.width;
+    }
+    out.push(x);
+    return out;
+  }, [cols, gutterW]);
+  const frozenW = colLeft[frozenN] - gutterW;
+  const totalW = colLeft[cols.length] + (canEditCols ? ADD_COL : 0);
+  const colIndex = useMemo(() => new Map(cols.map((c, i) => [c.key, i])), [cols]);
+  const typeAt = (c) => typeOf(cols[c], custom);
+
+  // ── rows in view: filtered and sorted, then HELD ──────────────────────
+  // An edit does not re-sort or re-filter: the row stays under the cursor
+  // (as in Airtable) until the view changes or "Sort again" is pressed.
+  // Rows added here go where they were added; rows that arrive from the
+  // outside re-run the view.
+  const [resortTick, setResortTick] = useState(0);
+  const order = useRef({ key: null, ids: [], dirty: false });
+  const addedHere = useRef(new Set());
+  const hints = useRef(new Map()); // new row id → { after, before }
+  const viewRows = useMemo(() => {
+    const byId = new Map(local.map((r) => [r.id, r]));
+    const key = [view.sort, view.filters, view.hidden, search, localCols, custom, ctx, resortTick];
+    const prev = order.current;
+    let ids = null;
+    if (prev.key && key.every((k, i) => k === prev.key[i])) {
+      const known = new Set(prev.ids);
+      const fresh = [];
+      for (const r of local) if (!known.has(r.id)) fresh.push(r.id);
+      if (fresh.every((id) => addedHere.current.has(id)) && prev.all?.size !== undefined) {
+        ids = prev.ids.filter((id) => byId.has(id));
+        for (const id of fresh) {
+          const h = hints.current.get(id);
+          const at = h ? ids.indexOf(h.ref) : -1;
+          if (at < 0) ids.push(id);
+          else ids.splice(h.before ? at : at + 1, 0, id);
+        }
+      }
+    }
+    if (!ids) {
+      ids = processRows(local, localCols, view, { search, ctx, custom }).map((r) => r.id);
+      order.current = { key, ids, dirty: false, all: new Set(ids) };
+    } else order.current = { ...prev, key, ids };
+    return ids.map((id) => byId.get(id));
+  }, [local, localCols, view, search, custom, ctx, resortTick]);
+  const rowIndex = useMemo(() => new Map(viewRows.map((r, i) => [r.id, i])), [viewRows]);
+  const rowById = useMemo(() => new Map(local.map((r) => [r.id, r])), [local]);
+  const filtered = view.filters.some((f) => !isBlank(f.value) || typeOf(localCols.find((c) => c.key === f.key), custom).allFilters.find((o) => o.id === f.op)?.arg === "none") || search.trim() !== "";
+
+  // ── problems (validate + required) ────────────────────────────────────
+  const problems = useMemo(() => {
+    const out = new Map();
+    const needs = localCols.filter((c) => c.required);
+    if (!validate && !needs.length) return out;
+    const check = validate ? localCols : needs;
+    for (const r of local) {
+      for (const c of check) {
+        let msg = null;
+        if (c.required && typeOf(c, custom).empty(r[c.key])) msg = `${c.name} is required`;
+        else if (validate) msg = validate(r, c) || null;
+        if (msg) out.set(`${r.id}\u0000${c.key}`, msg);
+      }
+    }
+    return out;
+  }, [local, localCols, validate, custom]);
+
+  // ── selection ────────────────────────────────────────────────────────
+  // By row id and column key, so it follows a row through a sort.
+  const [sel, setSel] = useState(null); // { a: {id, key}, f: {id, key}, rows?: true }
+  const [editing, setEditing] = useState(null); // { id, key, initial }
+  const editingRef = useRef(editing);
+  editingRef.current = editing;
+  const A = sel && rowIndex.has(sel.a.id) && colIndex.has(sel.a.key) ? { r: rowIndex.get(sel.a.id), c: colIndex.get(sel.a.key) } : null;
+  const F = A && sel.f && rowIndex.has(sel.f.id) && colIndex.has(sel.f.key) ? { r: rowIndex.get(sel.f.id), c: colIndex.get(sel.f.key) } : A;
+  const range = A ? rangeOf(A, F) : null;
+  const single = range && range.r0 === range.r1 && range.c0 === range.c1;
+  const rowsMode = Boolean(sel?.rows && range);
+  const stateRef = useRef({});
+  stateRef.current = { A, F, range, viewRows, cols, rowsMode };
+
+  const at = (r, c) => ({ id: viewRows[r]?.id, key: cols[c]?.key });
+  const select = useCallback(
+    (a, f = a, opts = {}) => {
+      const { viewRows: vr, cols: cs } = stateRef.current;
+      if (!vr.length || !cs.length) return setSel(null);
+      const ca = { r: clamp(a.r, 0, vr.length - 1), c: clamp(a.c, 0, cs.length - 1) };
+      const cf = { r: clamp(f.r, 0, vr.length - 1), c: clamp(f.c, 0, cs.length - 1) };
+      setSel({ a: { id: vr[ca.r].id, key: cs[ca.c].key }, f: { id: vr[cf.r].id, key: cs[cf.c].key }, rows: opts.rows || undefined });
+    },
+    [],
+  );
+
+  const focusGrid = useCallback(() => scroller.current?.focus({ preventScroll: true }), []);
+
+  // Keep a cell in the window: under the sticky header, right of the
+  // frozen columns.
+  const ensureVisible = useCallback(
+    (r, c) => {
+      const el = scroller.current;
+      if (!el) return;
+      if (r != null && r >= 0) {
+        const top = headH + r * rowH;
+        if (top < el.scrollTop + headH) el.scrollTop = top - headH;
+        else if (top + rowH > el.scrollTop + el.clientHeight) el.scrollTop = top + rowH - el.clientHeight;
+      }
+      if (c != null && c >= frozenN && c < cols.length) {
+        const left = colLeft[c];
+        const right = colLeft[c + 1];
+        const fixed = gutterW + frozenW;
+        if (left < el.scrollLeft + fixed) el.scrollLeft = left - fixed;
+        else if (right > el.scrollLeft + el.clientWidth) el.scrollLeft = right - el.clientWidth;
+      }
+    },
+    [headH, rowH, frozenN, cols.length, colLeft, gutterW, frozenW],
+  );
+
+  // A row added here is selected and shown once it renders.
+  const pendingFocus = useRef(null);
+  useEffect(() => {
+    const p = pendingFocus.current;
+    if (!p || !rowIndex.has(p.id)) return;
+    pendingFocus.current = null;
+    const r = rowIndex.get(p.id);
+    select({ r, c: 0 });
+    ensureVisible(r, 0);
+    if (p.edit && cols[0]) setEditing({ id: p.id, key: cols[0].key, initial: null });
+    else focusGrid();
+  }, [rowIndex, select, ensureVisible, focusGrid, cols]);
+
+  useEffect(() => {
+    if (!onSelectionChange) return;
+    if (!range) return onSelectionChange(null);
+    onSelectionChange({
+      active: { rowId: viewRows[A.r]?.id, key: cols[A.c]?.key },
+      rowIds: viewRows.slice(range.r0, range.r1 + 1).map((r) => r.id),
+      keys: cols.slice(range.c0, range.c1 + 1).map((c) => c.key),
+    });
+    // The ids, not the objects: a value edit is not a selection change.
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [sel, viewRows.length, cols.length]);
+
+  // ── history ──────────────────────────────────────────────────────────
+  const undoStack = useRef([]);
+  const redoStack = useRef([]);
+  const [, setHist] = useState(0);
+  const bump = () => setHist((n) => n + 1);
+
+  // ── saving ───────────────────────────────────────────────────────────
+  const updateColumns = useCallback(
+    async (next, reason) => {
+      const prev = colsRef.current;
+      colsRef.current = next;
+      setLocalCols(next);
+      const res = await call(onColumnsChange, next, { reason });
+      if (!res.ok) {
+        colsRef.current = prev;
+        setLocalCols(prev);
+        toast.error("Couldn’t change the fields", { description: res.error ?? "Nothing was changed. Try again." });
+      }
+      return res;
+    },
+    [onColumnsChange],
+  );
+
+  const commitChanges = useCallback(
+    async (input, { creates, history = true } = {}) => {
+      const changes = realChanges(input);
+      if (creates?.size) {
+        const next = colsRef.current.map((c) => (creates.has(c.key) ? { ...c, options: [...(c.options ?? []), ...creates.get(c.key)] } : c));
+        updateColumns(next, "options");
+      }
+      if (!changes.length) return { ok: true };
+      setLocal((rs) => applyChanges(rs, changes));
+      const v = viewRef.current;
+      const watched = new Set([...v.sort.map((s) => s.key), ...v.filters.map((f) => f.key)]);
+      if (changes.some((ch) => watched.has(ch.key))) order.current.dirty = true;
+      const step = { kind: "cells", changes };
+      if (history) {
+        undoStack.current.push(step);
+        if (undoStack.current.length > 100) undoStack.current.shift();
+        redoStack.current = [];
+        bump();
+      }
+      const res = await call(onChange, changes);
+      if (!res.ok) {
+        setLocal((rs) => applyChanges(rs, changes, "prev"));
+        undoStack.current = undoStack.current.filter((s) => s !== step);
+        bump();
+        toast.error(changes.length === 1 ? "Couldn’t save that change" : `Couldn’t save ${changes.length} changes`, {
+          description: res.error ?? "It was put back as it was. Try again.",
+        });
+      }
+      return res;
+    },
+    [onChange, updateColumns],
+  );
+
+  const newRow = useCallback(
+    (values = {}) => {
+      const base = createRow ? createRow() : {};
+      return { ...base, id: base.id ?? uid("row"), ...values };
+    },
+    [createRow],
+  );
+
+  const addRows = useCallback(
+    async (list, { index, hint, edit = false, history = true, restore = false } = {}) => {
+      if (!list.length) return { ok: true };
+      for (const r of list) addedHere.current.add(r.id);
+      if (hint) list.forEach((r, i) => hints.current.set(r.id, i === 0 ? hint : { ref: list[i - 1].id }));
+      setLocal((rs) => (index == null ? [...rs, ...list] : [...rs.slice(0, index), ...list, ...rs.slice(index)]));
+      pendingFocus.current = restore ? null : { id: list[0].id, edit };
+      const step = { kind: "add", rows: list, index };
+      if (history) {
+        undoStack.current.push(step);
+        redoStack.current = [];
+        bump();
+      }
+      const res = await call(onAddRows, list, { index, restore });
+      if (!res.ok) {
+        const gone = new Set(list.map((r) => r.id));
+        setLocal((rs) => rs.filter((r) => !gone.has(r.id)));
+        undoStack.current = undoStack.current.filter((s) => s !== step);
+        bump();
+        toast.error(list.length === 1 ? `Couldn’t add the ${noun}` : `Couldn’t add ${plural(list.length, noun)}`, { description: res.error ?? "Try again." });
+      } else if (Array.isArray(res.rows)) {
+        // The server named them: swap the ids we made up for its own.
+        const swap = new Map(list.map((r, i) => [r.id, res.rows[i]]).filter(([, x]) => x));
+        if (swap.size) {
+          for (const x of swap.values()) addedHere.current.add(x.id);
+          setLocal((rs) => rs.map((r) => (swap.has(r.id) ? { ...r, ...swap.get(r.id) } : r)));
+          order.current = { ...order.current, ids: order.current.ids.map((id) => (swap.has(id) ? swap.get(id).id ?? id : id)) };
+          setSel((s) => (s && swap.has(s.a.id) ? { ...s, a: { ...s.a, id: swap.get(s.a.id).id ?? s.a.id }, f: { ...s.f, id: swap.get(s.f.id)?.id ?? s.f.id } } : s));
+        }
+      }
+      return res;
+    },
+    [onAddRows, noun],
+  );
+
+  const deleteRows = useCallback(
+    async (ids, { history = true, quiet = false } = {}) => {
+      const gone = new Set(ids);
+      const removed = [];
+      localRef.current.forEach((r, i) => {
+        if (gone.has(r.id)) removed.push({ row: r, index: i });
+      });
+      if (!removed.length) return { ok: true };
+      setLocal((rs) => rs.filter((r) => !gone.has(r.id)));
+      setSel(null);
+      const step = { kind: "delete", removed };
+      if (history) {
+        undoStack.current.push(step);
+        redoStack.current = [];
+        bump();
+      }
+      const res = await call(onDeleteRows, ids);
+      if (!res.ok) {
+        setLocal((rs) => restoreRows(rs, removed));
+        undoStack.current = undoStack.current.filter((s) => s !== step);
+        bump();
+        toast.error(`Couldn’t delete ${removed.length === 1 ? `the ${noun}` : plural(removed.length, noun)}`, { description: res.error ?? "Nothing was deleted. Try again." });
+      } else if (!quiet) {
+        toast(removed.length === 1 ? `Deleted 1 ${noun}` : `Deleted ${plural(removed.length, noun)}`, {
+          action: { label: "Undo", onClick: () => undoRef.current?.() },
+        });
+      }
+      return res;
+    },
+    [onDeleteRows, noun],
+  );
+
+  async function undo() {
+    const step = undoStack.current.pop();
+    if (!step) return;
+    bump();
+    if (step.kind === "cells") await commitChanges(invertChanges(step.changes), { history: false });
+    else if (step.kind === "add") await deleteRows(step.rows.map((r) => r.id), { history: false, quiet: true });
+    else if (step.kind === "delete") {
+      for (const { row } of step.removed) addedHere.current.add(row.id);
+      setLocal((rs) => restoreRows(rs, step.removed));
+      await call(onAddRows, step.removed.map((x) => x.row), { restore: true, index: step.removed[0].index });
+    }
+    redoStack.current.push(step);
+    bump();
+    focusGrid();
+  }
+  async function redo() {
+    const step = redoStack.current.pop();
+    if (!step) return;
+    bump();
+    if (step.kind === "cells") await commitChanges(step.changes, { history: false });
+    else if (step.kind === "add") await addRows(step.rows, { index: step.index, history: false, restore: true });
+    else if (step.kind === "delete") await deleteRows(step.removed.map((x) => x.row.id), { history: false, quiet: true });
+    undoStack.current.push(step);
+    bump();
+    focusGrid();
+  }
+  const undoRef = useRef(undo);
+  undoRef.current = undo;
+
+  // ── editing ──────────────────────────────────────────────────────────
+  const editable = (c) => !readOnly && cols[c] && !cols[c].readOnly && !cols[c].computed;
+
+  function startEdit(r, c, initial = null) {
+    if (!editable(c) || !viewRows[r]) return;
+    const t = typeAt(c);
+    const row = viewRows[r];
+    if (t.editor === "toggle") return commitChanges([{ rowId: row.id, key: cols[c].key, value: !row[cols[c].key], prev: row[cols[c].key] }]);
+    if (!editorFor(t)) return;
+    select({ r, c });
+    ensureVisible(r, c);
+    setEditing({ id: row.id, key: cols[c].key, initial });
+  }
+
+  function moveActive(move) {
+    const s = stateRef.current;
+    if (!s.A) return;
+    const d = { down: [1, 0], up: [-1, 0], right: [0, 1], left: [0, -1] }[move];
+    if (!d) return;
+    const next = { r: clamp(s.A.r + d[0], 0, s.viewRows.length - 1), c: clamp(s.A.c + d[1], 0, s.cols.length - 1) };
+    select(next);
+    ensureVisible(next.r, next.c);
+  }
+
+  function commitEdit(value, move, extra) {
+    const ed = editingRef.current;
+    if (!ed) return;
+    const row = rowById.get(ed.id);
+    const creates = extra?.create?.length ? new Map([[ed.key, extra.create]]) : null;
+    setEditing(null);
+    focusGrid();
+    commitChanges([{ rowId: ed.id, key: ed.key, value, prev: row?.[ed.key] }], { creates });
+    if (move) moveActive(move);
+  }
+  function cancelEdit() {
+    setEditing(null);
+    focusGrid();
+  }
+
+  // ── clipboard ────────────────────────────────────────────────────────
+  function copyText() {
+    if (!range) return "";
+    return toTSV(rangeText(range, viewRows, cols, ctx, custom));
+  }
+
+  function pasteText(text) {
+    const matrix = parseTSV(text);
+    if (!matrix.length || readOnly) return;
+    // An empty table: the paste becomes its rows.
+    const target = range ?? { r0: viewRows.length, r1: viewRows.length, c0: 0, c1: 0 };
+    const { changes, errors, creates, extra } = pasteChanges(matrix, target, viewRows, cols, ctx, custom);
+    commitChanges(changes, { creates });
+    if (extra.length && canAdd) {
+      const made = extra.map((line) => {
+        const values = {};
+        line.forEach((text, j) => {
+          const col = cols[target.c0 + j];
+          if (!col || col.readOnly) return;
+          const res = parseCell(text, col, ctx, custom);
+          if (!("error" in res) && !res.create) values[col.key] = res.value;
+        });
+        return newRow(values);
+      });
+      addRows(made);
+    }
+    const h = matrix.length === 1 && matrix[0].length === 1 ? target.r1 - target.r0 : matrix.length - 1;
+    const w = matrix.length === 1 && matrix[0].length === 1 ? target.c1 - target.c0 : Math.max(...matrix.map((l) => l.length)) - 1;
+    if (range) select({ r: target.r0, c: target.c0 }, { r: Math.min(target.r0 + h, viewRows.length - 1), c: Math.min(target.c0 + w, cols.length - 1) });
+    if (errors.length) {
+      toast.warning(errors.length === 1 ? "1 cell was skipped" : `${errors.length} cells were skipped`, {
+        description: `${errors[0].error}${errors.length > 1 ? ", and more" : ""}. The rest were pasted.`,
+      });
+    }
+  }
+
+  // ── keys ─────────────────────────────────────────────────────────────
+  function onKeyDown(e) {
+    if (editingRef.current) return;
+    if (e.target !== scroller.current) return; // a header menu, an input
+    const mod = e.metaKey || e.ctrlKey;
+    const k = e.key;
+    if (!viewRows.length || !cols.length) return;
+    const s = A ?? null;
+
+    if (mod && (k === "z" || k === "Z")) {
+      e.preventDefault();
+      return e.shiftKey ? redo() : undo();
+    }
+    if (mod && (k === "y" || k === "Y")) {
+      e.preventDefault();
+      return redo();
+    }
+    if (mod && (k === "a" || k === "A")) {
+      e.preventDefault();
+      return select({ r: 0, c: 0 }, { r: viewRows.length - 1, c: cols.length - 1 });
+    }
+    if (!s) {
+      if (k.startsWith("Arrow") || k === "Tab" || k === "Enter") {
+        e.preventDefault();
+        select({ r: 0, c: 0 });
+        ensureVisible(0, 0);
+      }
+      return;
+    }
+    const page = Math.max(1, Math.floor(((scroller.current?.clientHeight ?? 400) - headH) / rowH) - 1);
+    const moved = moveBy(k, e.shiftKey ? F : s, { rows: viewRows.length, cols: cols.length, page, jump: mod });
+    if (moved) {
+      e.preventDefault();
+      if (e.shiftKey) select(s, moved, { rows: rowsMode && moved.c === F.c ? true : undefined });
+      else select(moved);
+      ensureVisible(moved.r, moved.c);
+      return;
+    }
+    if (k === "Tab") {
+      e.preventDefault();
+      let { r, c } = s;
+      if (e.shiftKey) {
+        if (c > 0) c--;
+        else if (r > 0) [r, c] = [r - 1, cols.length - 1];
+      } else if (c < cols.length - 1) c++;
+      else if (r < viewRows.length - 1) [r, c] = [r + 1, 0];
+      select({ r, c });
+      ensureVisible(r, c);
+      return;
+    }
+    if (k === "Escape") {
+      if (!single) {
+        e.preventDefault();
+        select(s);
+      }
+      return;
+    }
+    if (k === "Enter" || k === "F2") {
+      e.preventDefault();
+      if (k === "Enter" && mod && onExpandRow) return onExpandRow(viewRows[s.r]);
+      return startEdit(s.r, s.c);
+    }
+    if (k === "Delete" || k === "Backspace") {
+      e.preventDefault();
+      if (readOnly) return;
+      return commitChanges(clearChanges(range, viewRows, cols, ctx, custom));
+    }
+    if (k === " " && e.shiftKey) {
+      e.preventDefault();
+      return select({ r: range.r0, c: 0 }, { r: range.r1, c: cols.length - 1 }, { rows: true });
+    }
+    if (k === " " && mod) {
+      e.preventDefault();
+      return select({ r: 0, c: range.c0 }, { r: viewRows.length - 1, c: range.c1 });
+    }
+    if (mod && (k === "d" || k === "D")) {
+      e.preventDefault();
+      if (readOnly) return;
+      // Several rows: the first row fills the rest. One row: the row above
+      // fills it, as Sheets does.
+      if (range.r1 > range.r0) return commitChanges(fillChanges({ ...range, r1: range.r0 }, range.r1, viewRows, cols));
+      if (range.r0 > 0) return commitChanges(fillChanges({ ...range, r0: range.r0 - 1, r1: range.r0 - 1 }, range.r0, viewRows, cols));
+      return;
+    }
+    if (k === " ") {
+      e.preventDefault();
+      const t = typeAt(s.c);
+      if (t.editor === "toggle" && !readOnly) {
+        const first = viewRows[range.r0]?.[cols[s.c].key];
+        const changes = [];
+        for (let r = range.r0; r <= range.r1; r++)
+          for (let c = range.c0; c <= range.c1; c++) {
+            if (typeAt(c).editor !== "toggle" || !editable(c)) continue;
+            changes.push({ rowId: viewRows[r].id, key: cols[c].key, value: !first, prev: viewRows[r][cols[c].key] });
+          }
+        return commitChanges(changes);
+      }
+      if (onExpandRow) return onExpandRow(viewRows[s.r]);
+      return startEdit(s.r, s.c, " ");
+    }
+    // A printable key starts an edit with that key as the text.
+    if (k.length === 1 && !mod && !e.altKey) {
+      const t = typeAt(s.c);
+      if (t.editor === "rating" && /[0-9]/.test(k) && editable(s.c)) {
+        e.preventDefault();
+        const res = parseCell(k, cols[s.c], ctx, custom);
+        if (!("error" in res)) commitChanges([{ rowId: viewRows[s.r].id, key: cols[s.c].key, value: res.value, prev: viewRows[s.r][cols[s.c].key] }]);
+        return;
+      }
+      if (editorFor(t) && editable(s.c)) {
+        e.preventDefault();
+        startEdit(s.r, s.c, k);
+      }
+    }
+  }
+
+  // ── pointer ──────────────────────────────────────────────────────────
+  const drag = useRef(null); // { mode: "select" | "fill", ... }
+  const lastPointer = useRef("mouse");
+  const [fillTo, setFillToState] = useState(null);
+  const fillRef = useRef(null);
+  const setFillTo = (v) => {
+    fillRef.current = v;
+    setFillToState(v);
+  };
+
+  function cellFrom(target) {
+    const el = target.closest?.("[data-cell]");
+    if (!el || !scroller.current?.contains(el)) return null;
+    return { r: Number(el.dataset.r), c: Number(el.dataset.c) };
+  }
+
+  function rowAtY(clientY) {
+    const el = scroller.current;
+    const rect = el.getBoundingClientRect();
+    return clamp(Math.floor((clientY - rect.top + el.scrollTop - headH) / rowH), 0, viewRows.length - 1);
+  }
+
+  function autoScroll(e) {
+    const el = scroller.current;
+    if (!el) return;
+    const rect = el.getBoundingClientRect();
+    if (e.clientY > rect.bottom - 28) el.scrollTop += 18;
+    else if (e.clientY < rect.top + headH + 12) el.scrollTop -= 18;
+    if (e.clientX > rect.right - 28) el.scrollLeft += 18;
+    else if (e.clientX < rect.left + gutterW + frozenW + 12 && el.scrollLeft > 0) el.scrollLeft -= 18;
+  }
+
+  useEffect(() => {
+    function move(e) {
+      const d = drag.current;
+      if (!d) return;
+      autoScroll(e);
+      if (d.mode === "fill") setFillTo(rowAtY(e.clientY));
+      else if (d.mode === "select") {
+        const hit = cellFrom(document.elementFromPoint(e.clientX, e.clientY) ?? document.body);
+        if (hit && (hit.r !== d.last?.r || hit.c !== d.last?.c)) {
+          d.last = hit;
+          select(d.anchor, hit);
+        }
+      } else if (d.mode === "rows") {
+        const r = rowAtY(e.clientY);
+        select({ r: d.anchor, c: 0 }, { r, c: stateRef.current.cols.length - 1 }, { rows: true });
+      }
+    }
+    function up() {
+      const d = drag.current;
+      drag.current = null;
+      if (d?.mode === "fill") {
+        const to = fillRef.current;
+        setFillTo(null);
+        const { range: g, viewRows: vr, cols: cs } = stateRef.current;
+        if (g && to != null && (to > g.r1 || to < g.r0)) {
+          commitChanges(fillChanges(g, to, vr, cs));
+          select({ r: Math.min(g.r0, to), c: g.c0 }, { r: Math.max(g.r1, to), c: g.c1 });
+        }
+      }
+    }
+    window.addEventListener("pointermove", move);
+    window.addEventListener("pointerup", up);
+    window.addEventListener("pointercancel", up);
+    return () => {
+      window.removeEventListener("pointermove", move);
+      window.removeEventListener("pointerup", up);
+      window.removeEventListener("pointercancel", up);
+    };
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [select, commitChanges, headH, rowH, viewRows.length, gutterW, frozenW]);
+
+  function onPointerDown(e) {
+    lastPointer.current = e.pointerType || "mouse";
+    const t = e.target;
+    if (t.closest?.("[data-fill]")) {
+      e.preventDefault();
+      e.stopPropagation();
+      drag.current = { mode: "fill" };
+      setFillTo(range?.r1 ?? null);
+      return;
+    }
+    const gutter = t.closest?.("[data-gutter]");
+    if (gutter && !t.closest("[data-expand]")) {
+      const r = Number(gutter.dataset.r);
+      if (e.button !== 0 && inRange(range ?? { r0: -1, r1: -1, c0: 0, c1: 0 }, r, 0)) return;
+      e.preventDefault();
+      focusGrid();
+      const anchor = e.shiftKey && range ? range.r0 : r;
+      select({ r: anchor, c: 0 }, { r, c: cols.length - 1 }, { rows: true });
+      if (e.button === 0 && e.pointerType === "mouse") drag.current = { mode: "rows", anchor };
+      return;
+    }
+    const hit = cellFrom(t);
+    if (!hit) return;
+    const ed = editingRef.current;
+    if (ed && ed.id === viewRows[hit.r]?.id && ed.key === cols[hit.c]?.key) return;
+    const secondary = e.button === 2 || (e.button === 0 && e.ctrlKey && isMac());
+    if (secondary) {
+      if (!range || !inRange(range, hit.r, hit.c)) select(hit);
+      return;
+    }
+    if (e.button !== 0) return;
+    if (t.closest?.("[data-toggle]") && editable(hit.c)) {
+      e.preventDefault();
+      focusGrid();
+      select(hit);
+      const row = viewRows[hit.r];
+      const key = cols[hit.c].key;
+      commitChanges([{ rowId: row.id, key, value: !row[key], prev: row[key] }]);
+      return;
+    }
+    if (t.closest?.("input, button, a, [role=radio], label")) return; // a rating star, a link
+    if (e.pointerType !== "mouse") return; // touch: a tap is handled on click, a drag scrolls
+    e.preventDefault();
+    focusGrid();
+    if (e.shiftKey && A) select(A, hit);
+    else select(hit);
+    drag.current = { mode: "select", anchor: e.shiftKey && A ? A : hit, last: hit };
+  }
+
+  const isEditingAt = (hit) => {
+    const ed = editingRef.current;
+    return Boolean(ed && ed.id === viewRows[hit.r]?.id && ed.key === cols[hit.c]?.key);
+  };
+
+  function onClick(e) {
+    if (lastPointer.current === "mouse") return;
+    const hit = cellFrom(e.target);
+    if (!hit || isEditingAt(hit) || e.target.closest?.("input, button, a, [role=radio], label, [data-toggle]")) return;
+    focusGrid();
+    if (A && single && A.r === hit.r && A.c === hit.c) startEdit(hit.r, hit.c);
+    else select(hit);
+  }
+
+  function onDoubleClick(e) {
+    const hit = cellFrom(e.target);
+    if (!hit || isEditingAt(hit) || e.target.closest?.("[data-toggle], a, [role=radio]")) return;
+    startEdit(hit.r, hit.c);
+  }
+
+  // ── column header actions ────────────────────────────────────────────
+  const [renaming, setRenaming] = useState(null);
+  const [colDrag, setColDrag] = useState(null); // { from, to }
+  const [filterOpen, setFilterOpen] = useState(false);
+  const [addOpen, setAddOpen] = useState(false);
+
+  function reorder(fromKey, toIndex) {
+    const all = orderedColumns(colsRef.current, viewRef.current).map((c) => c.key);
+    const shown = cols.map((c) => c.key);
+    const targetKey = shown[toIndex] ?? null; // insert before this one (null: at the end)
+    const without = all.filter((k) => k !== fromKey);
+    const at = targetKey ? without.indexOf(targetKey) : without.length;
+    without.splice(at < 0 ? without.length : at, 0, fromKey);
+    setView({ order: without });
+  }
+
+  function onHeadPointerDown(e, c) {
+    if (e.button !== 0 || e.pointerType !== "mouse" || e.target.closest("button, input, [data-resize]")) return;
+    e.preventDefault();
+    const x0 = e.clientX;
+    let moved = false;
+    const el = scroller.current;
+    const target = (clientX) => {
+      const rect = el.getBoundingClientRect();
+      const x = clientX - rect.left + el.scrollLeft;
+      let i = 0;
+      while (i < cols.length && colLeft[i] + cols[i].width / 2 < x) i++;
+      return i;
+    };
+    const move = (ev) => {
+      if (!moved && Math.abs(ev.clientX - x0) < 5) return;
+      moved = true;
+      autoScroll(ev);
+      setColDrag({ from: c, to: target(ev.clientX) });
+    };
+    const up = (ev) => {
+      window.removeEventListener("pointermove", move);
+      window.removeEventListener("pointerup", up);
+      window.removeEventListener("pointercancel", up);
+      if (ev.type === "pointercancel") return setColDrag(null);
+      if (moved) {
+        const to = target(ev.clientX);
+        setColDrag(null);
+        if (to !== c && to !== c + 1) reorder(cols[c].key, to);
+      } else {
+        focusGrid();
+        if (!viewRows.length) return;
+        if (ev.shiftKey && A) select({ r: 0, c: A.c }, { r: viewRows.length - 1, c });
+        else select({ r: 0, c }, { r: viewRows.length - 1, c });
+      }
+    };
+    window.addEventListener("pointermove", move);
+    window.addEventListener("pointerup", up);
+    window.addEventListener("pointercancel", up);
+  }
+
+  function onResizeDown(e, col) {
+    e.preventDefault();
+    e.stopPropagation();
+    const x0 = e.clientX;
+    const w0 = col.width;
+    let last = w0;
+    e.currentTarget.setPointerCapture?.(e.pointerId);
+    const move = (ev) => {
+      last = clamp(Math.round(w0 + ev.clientX - x0), MIN_W, MAX_W);
+      setResizing({ key: col.key, width: last });
+    };
+    const up = () => {
+      window.removeEventListener("pointermove", move);
+      window.removeEventListener("pointerup", up);
+      window.removeEventListener("pointercancel", up);
+      setResizing(null);
+      if (last !== w0) setView((v) => ({ widths: { ...v.widths, [col.key]: last } }));
+    };
+    window.addEventListener("pointermove", move);
+    window.addEventListener("pointerup", up);
+    window.addEventListener("pointercancel", up);
+  }
+
+  async function changeType(col, typeName) {
+    if (col.type === typeName) return;
+    const before = colsRef.current;
+    let next = { ...col, type: typeName };
+    const t = typeOf(next, custom);
+    const changes = [];
+    const creates = [];
+    for (const r of localRef.current) {
+      const v = r[col.key];
+      if (typeOf(col, custom).empty(v) && t.name !== "checkbox") continue;
+      if (t.editor === "select") {
+        const res = parseCell(typeOf(col, custom).toText(v, col, ctx), { ...next, options: [...(next.options ?? []), ...creates] }, ctx, custom);
+        if ("error" in res) continue;
+        if (res.create) creates.push(...res.create);
+        changes.push({ rowId: r.id, key: col.key, value: res.value, prev: v });
+      } else changes.push({ rowId: r.id, key: col.key, value: convertValue(v, col, next, ctx, custom), prev: v });
+    }
+    if (creates.length) next = { ...next, options: [...(next.options ?? []), ...creates] };
+    const res = await updateColumns(
+      before.map((c) => (c.key === col.key ? next : c)),
+      "type",
+    );
+    if (!res.ok) return;
+    await commitChanges(changes, { history: false });
+    toast(`${col.name} is now ${t.label.toLowerCase()}`, {
+      action: {
+        label: "Undo",
+        onClick: () => {
+          updateColumns(before, "type");
+          commitChanges(invertChanges(realChanges(changes)), { history: false });
+        },
+      },
+    });
+  }
+
+  function insertColumn(c, side) {
+    const names = new Set(colsRef.current.map((x) => x.name));
+    let n = colsRef.current.length + 1;
+    while (names.has(`Field ${n}`)) n++;
+    const col = { key: uid("field"), name: `Field ${n}`, type: "text" };
+    addColumn(col, side === "left" ? c : c + 1);
+    setRenaming(col.key);
+  }
+
+  function addColumn(col, visibleIndex = cols.length) {
+    const all = colsRef.current;
+    updateColumns([...all, col], "add");
+    const order = orderedColumns(all, viewRef.current).map((x) => x.key);
+    const beforeKey = cols[visibleIndex]?.key;
+    const i = beforeKey ? order.indexOf(beforeKey) : order.length;
+    order.splice(i < 0 ? order.length : i, 0, col.key);
+    setView({ order });
+  }
+
+  function deleteColumn(col) {
+    const before = colsRef.current;
+    updateColumns(
+      before.filter((c) => c.key !== col.key),
+      "delete",
+    );
+    toast(`Deleted ${col.name}`, { action: { label: "Undo", onClick: () => updateColumns(before, "restore") } });
+  }
+
+  function headerItems(col, c) {
+    const t = typeOf(col, custom);
+    const words = sortWords(t);
+    const sorted = view.sort.find((s) => s.key === col.key);
+    return [
+      { label: `Sort ${words.asc}`, icon: "arrow-up", onSelect: () => setView({ sort: [{ key: col.key, dir: "asc" }] }) },
+      { label: `Sort ${words.desc}`, icon: "arrow-down", onSelect: () => setView({ sort: [{ key: col.key, dir: "desc" }] }) },
+      sorted && { label: "Remove sort", icon: "x", onSelect: () => setView((v) => ({ sort: v.sort.filter((s) => s.key !== col.key) })) },
+      {
+        label: "Filter by this field",
+        icon: "filter",
+        onSelect: () => {
+          setView((v) => ({ filters: [...v.filters, { id: uid("f"), key: col.key, op: t.allFilters[0].id, value: "" }] }));
+          setFilterOpen(true);
+        },
+      },
+      { type: "separator" },
+      canEditCols && { label: "Rename", icon: "pencil", onSelect: () => setRenaming(col.key) },
+      canEditCols &&
+        !col.computed && {
+          label: "Field type",
+          icon: t.icon,
+          items: [
+            {
+              type: "radio",
+              value: col.type ?? "text",
+              onValueChange: (v) => changeType(col, v),
+              options: [...TYPE_ORDER, ...Object.keys(custom ?? {}).filter((k) => !TYPE_ORDER.includes(k))].map((k) => ({ value: k, label: typeOf({ type: k }, custom).label })),
+            },
+          ],
+        },
+      canEditCols && { label: "Insert left", icon: "arrow-left", onSelect: () => insertColumn(c, "left") },
+      canEditCols && { label: "Insert right", icon: "arrow-right", onSelect: () => insertColumn(c, "right") },
+      canEditCols && { type: "separator" },
+      c < frozenN
+        ? { label: c === 0 && frozenN === 1 ? "Unfreeze" : "Freeze up to here", icon: "pin", onSelect: () => setView({ frozen: c === 0 && frozenN === 1 ? 0 : c + 1 }) }
+        : { label: "Freeze up to here", icon: "pin", onSelect: () => setView({ frozen: c + 1 }) },
+      cols.length > 1 && { label: "Hide", icon: "eye-off", onSelect: () => setView((v) => ({ hidden: [...v.hidden, col.key] })) },
+      canEditCols && cols.length > 1 && { label: "Delete field", icon: "trash", tone: "danger", onSelect: () => deleteColumn(col) },
+    ];
+  }
+
+  // ── the context menu (right-click, long press, Shift+F10) ─────────────
+  const menuItems = (() => {
+    if (!range || !viewRows.length) return [];
+    const ids = viewRows.slice(range.r0, range.r1 + 1).map((r) => r.id);
+    const n = ids.length;
+    const row = viewRows[range.r0];
+    const rowAt = local.findIndex((x) => x.id === row?.id);
+    return [
+      {
+        label: "Copy",
+        icon: "copy",
+        shortcut: "⌘C",
+        onSelect: () => navigator.clipboard?.writeText(copyText()).then(() => toast.success("Copied"), () => toast.error("Couldn’t reach the clipboard — use ⌘C")),
+      },
+      !readOnly && { label: "Clear", icon: "eraser", shortcut: "⌫", onSelect: () => commitChanges(clearChanges(range, viewRows, cols, ctx, custom)) },
+      !readOnly && range.r1 > range.r0 && { label: "Fill down", icon: "arrow-down", shortcut: "⌘D", onSelect: () => commitChanges(fillChanges({ ...range, r1: range.r0 }, range.r1, viewRows, cols)) },
+      onExpandRow && n === 1 && { label: `Open ${noun}`, icon: "maximize", shortcut: "Space", onSelect: () => onExpandRow(row) },
+      canAdd && { type: "separator" },
+      canAdd && { label: `Insert ${noun} above`, icon: "arrow-up", onSelect: () => addRows([newRow()], { index: rowAt, hint: { ref: row.id, before: true } }) },
+      canAdd && { label: `Insert ${noun} below`, icon: "arrow-down", onSelect: () => addRows([newRow()], { index: rowAt + 1, hint: { ref: row.id } }) },
+      onDeleteRows && !readOnly && { type: "separator" },
+      onDeleteRows && !readOnly && { label: n === 1 ? `Delete ${noun}` : `Delete ${plural(n, noun)}`, icon: "trash", tone: "danger", onSelect: () => deleteRows(ids) },
+    ];
+  })();
+
+  // ── virtualisers ─────────────────────────────────────────────────────
+  const activeRow = useRef(-1);
+  activeRow.current = A ? A.r : -1;
+  const activeCol = useRef(-1);
+  activeCol.current = A ? A.c - frozenN : -1;
+  const keepRow = useCallback((range) => {
+    const out = defaultRangeExtractor(range);
+    const a = activeRow.current;
+    if (a >= 0 && a < range.count && !out.includes(a)) {
+      out.push(a);
+      out.sort((x, y) => x - y);
+    }
+    return out;
+  }, []);
+  const keepCol = useCallback((range) => {
+    const out = defaultRangeExtractor(range);
+    const a = activeCol.current;
+    if (a >= 0 && a < range.count && !out.includes(a)) {
+      out.push(a);
+      out.sort((x, y) => x - y);
+    }
+    return out;
+  }, []);
+
+  const shownRows = loading ? 0 : viewRows.length;
+  const rowV = useVirtualizer({
+    count: shownRows,
+    getScrollElement: () => scroller.current,
+    estimateSize: () => rowH,
+    overscan: 10,
+    scrollMargin: headH,
+    initialRect: { width: 1200, height: typeof height === "number" ? height : 560 },
+    rangeExtractor: keepRow,
+    getItemKey: (i) => viewRows[i]?.id ?? i,
+  });
+  const scrollCols = cols.slice(frozenN);
+  const colV = useVirtualizer({
+    horizontal: true,
+    count: scrollCols.length,
+    getScrollElement: () => scroller.current,
+    estimateSize: (i) => scrollCols[i]?.width ?? 160,
+    overscan: 2,
+    scrollMargin: gutterW + frozenW,
+    initialRect: { width: 1200, height: typeof height === "number" ? height : 560 },
+    rangeExtractor: keepCol,
+    getItemKey: (i) => scrollCols[i]?.key ?? i,
+  });
+  const widthsSig = `${gutterW}|${frozenW}|${scrollCols.map((c) => c.width).join(",")}`;
+  useLayoutEffect(() => {
+    colV.measure();
+  }, [widthsSig, colV]);
+  useLayoutEffect(() => {
+    rowV.measure();
+  }, [rowH, headH, rowV]);
+
+  const vRows = rowV.getVirtualItems();
+  const vCols = colV.getVirtualItems();
+  const bodyH = shownRows * rowH;
+  const addLine = canAdd && !loading;
+  const contentH = headH + (loading ? 8 * rowH : bodyH) + (addLine ? rowH : 0);
+
+  // The imperative handle: for a parent that drives the grid (base-view).
+  useImperativeHandle(
+    ref,
+    () => ({
+      focus: focusGrid,
+      select: ({ rowId, key, toRowId, toKey } = {}) => {
+        const r = rowIndex.get(rowId);
+        const c = key == null ? 0 : colIndex.get(key);
+        if (r == null || c == null) return false;
+        const r2 = toRowId != null ? rowIndex.get(toRowId) ?? r : r;
+        const c2 = toKey != null ? colIndex.get(toKey) ?? c : c;
+        select({ r, c }, { r: r2, c: c2 });
+        ensureVisible(r, c);
+        return true;
+      },
+      getSelection: () =>
+        range
+          ? {
+              active: { rowId: viewRows[A.r]?.id, key: cols[A.c]?.key },
+              rowIds: viewRows.slice(range.r0, range.r1 + 1).map((r) => r.id),
+              keys: cols.slice(range.c0, range.c1 + 1).map((c) => c.key),
+            }
+          : null,
+      clearSelection: () => setSel(null),
+      scrollToRow: (rowId) => {
+        const r = rowIndex.get(rowId);
+        if (r == null) return false;
+        ensureVisible(r, null);
+        return true;
+      },
+      edit: (rowId, key) => {
+        const r = rowIndex.get(rowId);
+        const c = colIndex.get(key);
+        if (r == null || c == null) return false;
+        startEdit(r, c);
+        return true;
+      },
+      addRow: (values) => addRows([newRow(values)], { edit: true }),
+      deleteRows: (ids) => deleteRows(ids),
+      undo,
+      redo,
+      copy: copyText,
+      paste: pasteText,
+      visibleRows: () => viewRows,
+      visibleColumns: () => cols,
+      resort: () => setResortTick((n) => n + 1),
+    }),
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [rowIndex, colIndex, range, viewRows, cols, A],
+  );
+
+  // ── drawing ──────────────────────────────────────────────────────────
+  const fillRange = fillTo != null && range && (fillTo > range.r1 || fillTo < range.r0) ? { r0: Math.min(fillTo, range.r0), r1: Math.max(fillTo, range.r1), c0: range.c0, c1: range.c1 } : null;
+  const activeId = A ? `${gid}-c-${A.r}-${A.c}` : undefined;
+
+  function cellShadow(r, c) {
+    if (!range || !inRange(range, r, c)) return undefined;
+    const P = "var(--color-primary)";
+    if (A && A.r === r && A.c === c) return `inset 0 0 0 2px ${P}`;
+    const s = [];
+    if (r === range.r0) s.push(`inset 0 1px 0 0 ${P}`);
+    if (r === range.r1) s.push(`inset 0 -1px 0 0 ${P}`);
+    if (c === range.c0) s.push(`inset 1px 0 0 0 ${P}`);
+    if (c === range.c1) s.push(`inset -1px 0 0 0 ${P}`);
+    return s.join(", ") || undefined;
+  }
+
+  function renderCell(row, r, col, c, sticky) {
+    const t = typeOf(col, custom);
+    const isActive = A && A.r === r && A.c === c;
+    const inSel = range && inRange(range, r, c);
+    const isEditing = editing && editing.id === row.id && editing.key === col.key;
+    const problem = problems.get(`${row.id}\u0000${col.key}`);
+    const Editor = isEditing ? editorFor(t) : null;
+    const corner = range && !editing && !readOnly && r === range.r1 && c === range.c1 && lastPointer.current === "mouse";
+    const filling = fillRange && inRange(fillRange, r, c) && !inRange(range, r, c);
+    return (
+      <div
+        key={col.key}
+        id={`${gid}-c-${r}-${c}`}
+        role="gridcell"
+        aria-colindex={c + 2}
+        aria-selected={inSel ? true : undefined}
+        aria-readonly={!editable(c) || undefined}
+        aria-invalid={problem ? true : undefined}
+        title={problem || undefined}
+        data-cell=""
+        data-r={r}
+        data-c={c}
+        className={cx(
+          "flex h-full shrink-0 items-center border-b border-r border-border bg-background px-2.5 text-sm text-foreground",
+          sticky ? "sticky z-10" : "absolute top-0",
+          sticky && c === frozenN - 1 && "border-r-input",
+          isActive && !sticky && "z-[2]",
+          isEditing && "z-20",
+          t.align === "end" && "justify-end",
+        )}
+        style={{ width: col.width, left: sticky ? colLeft[c] : colLeft[c] }}
+      >
+        <span
+          aria-hidden="true"
+          className={cx(
+            "pointer-events-none absolute inset-0",
+            inSel ? (single ? "" : "bg-primary/8") : filling ? "bg-primary/5" : "group-hover/row:bg-muted/60",
+            rowsMode && inSel && "bg-primary/8",
+          )}
+          style={{ boxShadow: cellShadow(r, c) }}
+        />
+        <span className={cx("relative flex h-full min-w-0 flex-1 items-center", t.align === "end" && "justify-end")}>
+          {Editor ? (
+            <Editor
+              value={row[col.key]}
+              column={col}
+              type={t}
+              ctx={ctx}
+              initial={editing.initial}
+              today={today}
+              canCreate={!readOnly}
+              onCommit={commitEdit}
+              onCancel={cancelEdit}
+            />
+          ) : (
+            <CellValue
+              value={row[col.key]}
+              column={col}
+              type={t}
+              ctx={ctx}
+              active={isActive}
+              readOnly={!editable(c)}
+              onSet={(v) => {
+                commitChanges([{ rowId: row.id, key: col.key, value: v, prev: row[col.key] }]);
+                focusGrid();
+              }}
+            />
+          )}
+        </span>
+        {problem ? <span aria-hidden="true" className="pointer-events-none absolute right-0 top-0 size-0 border-l-[7px] border-t-[7px] border-l-transparent border-t-destructive" /> : null}
+        {corner ? (
+          <span
+            data-fill=""
+            aria-hidden="true"
+            title="Drag to fill"
+            className="absolute -bottom-[4px] -right-[4px] z-30 size-[9px] cursor-crosshair rounded-[2px] border-2 border-background bg-primary"
+          />
+        ) : null}
+      </div>
+    );
+  }
+
+  function renderRow(vr) {
+    const r = vr.index;
+    const row = viewRows[r];
+    if (!row) return null;
+    const rowSelected = rowsMode && range && r >= range.r0 && r <= range.r1;
+    const rowActive = A && A.r === r;
+    return (
+      <div
+        key={row.id}
+        role="row"
+        aria-rowindex={r + 2}
+        aria-selected={rowSelected || undefined}
+        className="group/row absolute left-0 top-0 flex"
+        style={{ height: rowH, width: totalW, transform: `translateY(${vr.start}px)` }}
+      >
+        <div
+          role="rowheader"
+          data-gutter=""
+          data-r={r}
+          className={cx(
+            "sticky left-0 z-10 flex h-full shrink-0 cursor-default items-center justify-between border-b border-r border-border bg-background pl-2.5 pr-1 text-xs tabular-nums",
+            rowSelected ? "text-primary" : rowActive ? "text-foreground" : "text-muted-foreground",
+          )}
+          style={{ width: gutterW }}
+        >
+          <span aria-hidden="true" className={cx("pointer-events-none absolute inset-0", rowSelected ? "bg-primary/8" : "group-hover/row:bg-muted/60")} />
+          <span className="relative">{r + 1}</span>
+          {onExpandRow && !narrow ? (
+            // raw: a 24px open-row glyph inside the 64px gutter, shown on the row's hover; IconButton's smallest square is 36px.
+            <button
+              type="button"
+              data-expand=""
+              tabIndex={-1}
+              aria-label={`Open ${noun} ${r + 1}`}
+              title={`Open ${noun}`}
+              onClick={() => onExpandRow(row)}
+              className="relative grid size-6 place-items-center rounded-sm text-muted-foreground opacity-0 transition-opacity duration-150 hover:bg-accent hover:text-foreground group-hover/row:opacity-100 focus-visible:opacity-100"
+            >
+              <Icon name="maximize" size={13} />
+            </button>
+          ) : null}
+        </div>
+        {cols.slice(0, frozenN).map((col, c) => renderCell(row, r, col, c, true))}
+        {vCols.map((vc) => renderCell(row, r, scrollCols[vc.index], vc.index + frozenN, false))}
+      </div>
+    );
+  }
+
+  function renderHeadCell(col, c, sticky) {
+    const t = typeOf(col, custom);
+    const sortAt = view.sort.findIndex((s) => s.key === col.key);
+    const sortDir = sortAt >= 0 ? view.sort[sortAt].dir : null;
+    const isFiltered = view.filters.some((f) => f.key === col.key);
+    const colSelected = range && range.r0 === 0 && range.r1 === viewRows.length - 1 && c >= range.c0 && c <= range.c1 && viewRows.length > 1;
+    const dragging = colDrag && colDrag.from === c;
+    return (
+      <div
+        key={col.key}
+        role="columnheader"
+        aria-colindex={c + 2}
+        aria-sort={sortDir === "asc" ? "ascending" : sortDir === "desc" ? "descending" : undefined}
+        className={cx(
+          "group/h flex h-full shrink-0 items-center gap-1 border-b border-r border-border bg-muted pl-2.5 pr-1 text-xs font-medium text-foreground select-none",
+          sticky ? "sticky z-10" : "absolute top-0",
+          sticky && c === frozenN - 1 && "border-r-input",
+          dragging && "opacity-50",
+        )}
+        style={{ width: col.width, left: colLeft[c] }}
+      >
+        {colSelected ? <span aria-hidden="true" className="pointer-events-none absolute inset-0 bg-primary/10" /> : null}
+        <span className="relative flex min-w-0 flex-1 cursor-default items-center gap-1.5 self-stretch" onPointerDown={(e) => onHeadPointerDown(e, c)}>
+          <Icon name={t.icon} size={14} className="shrink-0 text-muted-foreground" />
+          {renaming === col.key ? (
+            <RenameInput
+              name={col.name}
+              onDone={(name) => {
+                setRenaming(null);
+                focusGrid();
+                if (name && name !== col.name) updateColumns(colsRef.current.map((x) => (x.key === col.key ? { ...x, name } : x)), "rename");
+              }}
+            />
+          ) : (
+            <span className="truncate">{col.name}</span>
+          )}
+          {col.readOnly || col.computed ? <Icon name="lock" size={12} className="shrink-0 text-muted-foreground" label="Read only" /> : null}
+          {col.required ? (
+            <span aria-label="Required" className="text-destructive">
+              *
+            </span>
+          ) : null}
+        </span>
+        {sortDir ? (
+          <span className="relative flex shrink-0 items-center text-primary" title={`Sorted ${sortWords(t)[sortDir]}`}>
+            <Icon name={sortDir === "asc" ? "arrow-up" : "arrow-down"} size={13} />
+            {view.sort.length > 1 ? <span className="text-2xs tabular-nums">{sortAt + 1}</span> : null}
+          </span>
+        ) : null}
+        {isFiltered ? <span aria-label="Filtered" title="Filtered" className="relative size-1.5 shrink-0 rounded-full bg-primary" /> : null}
+        <span className={cx("relative shrink-0", !narrow && !coarse && "opacity-0 transition-opacity duration-150 group-hover/h:opacity-100 focus-within:opacity-100 has-[[aria-expanded=true]]:opacity-100")}>
+          <Menu items={headerItems(col, c)} label={`${col.name}, field menu`} trigger={<Icon name="chevron-down" size={14} />} align="start" />
+        </span>
+        <span
+          data-resize=""
+          role="separator"
+          aria-orientation="vertical"
+          aria-label={`Resize ${col.name}`}
+          aria-valuenow={col.width}
+          aria-valuemin={MIN_W}
+          aria-valuemax={MAX_W}
+          tabIndex={0}
+          onPointerDown={(e) => onResizeDown(e, col)}
+          onDoubleClick={() =>
+            setView((v) => {
+              const widths = { ...v.widths };
+              delete widths[col.key];
+              return { widths };
+            })
+          }
+          onKeyDown={(e) => {
+            if (e.key !== "ArrowLeft" && e.key !== "ArrowRight") return;
+            e.preventDefault();
+            const w = clamp(col.width + (e.key === "ArrowRight" ? 16 : -16), MIN_W, MAX_W);
+            setView((v) => ({ widths: { ...v.widths, [col.key]: w } }));
+          }}
+          className="absolute -right-1 top-0 z-20 h-full w-2 cursor-col-resize touch-none outline-none after:absolute after:inset-y-2 after:left-[3px] after:w-0.5 after:rounded-full after:bg-primary after:opacity-0 after:transition-opacity hover:after:opacity-100 focus-visible:after:opacity-100"
+        />
+      </div>
+    );
+  }
+
+  const header = (
+    <div role="row" aria-rowindex={1} className="sticky top-0 z-30 flex" style={{ height: headH, width: totalW }}>
+      <div className="sticky left-0 z-10 flex h-full shrink-0 items-center border-b border-r border-border bg-muted pl-2.5 text-xs text-muted-foreground" style={{ width: gutterW }}>
+        <span className="sr-only">Row</span>
+        <span aria-hidden="true">#</span>
+      </div>
+      {cols.slice(0, frozenN).map((col, c) => renderHeadCell(col, c, true))}
+      {vCols.map((vc) => renderHeadCell(scrollCols[vc.index], vc.index + frozenN, false))}
+      {canEditCols ? (
+        <div className="absolute top-0 flex h-full items-center justify-center border-b border-border bg-muted" style={{ left: colLeft[cols.length], width: ADD_COL }}>
+          <Popover open={addOpen} onOpenChange={setAddOpen} trigger={<Icon name="plus" size={16} />} variant="quiet" size="sm" width="auto" align="end" label="Add a field">
+            <AddFieldPanel
+              names={localCols.map((x) => x.name)}
+              custom={custom}
+              onAdd={(f) => {
+                const col = { key: uid("field"), ...f };
+                addColumn(col);
+                setAddOpen(false);
+                // Show the new field: it is the last one.
+                requestAnimationFrame(() => {
+                  if (scroller.current) scroller.current.scrollLeft = scroller.current.scrollWidth;
+                });
+              }}
+            />
+          </Popover>
+        </div>
+      ) : null}
+      {colDrag ? (
+        <span aria-hidden="true" className="pointer-events-none absolute top-0 z-40 w-0.5 bg-primary" style={{ left: colLeft[colDrag.to] - 1, height: contentH }} />
+      ) : null}
+    </div>
+  );
+
+  // ── the body when there is nothing to show ───────────────────────────
+  let emptyBody = null;
+  if (!loading && viewRows.length === 0) {
+    const blank = local.length === 0;
+    emptyBody =
+      blank && empty ? (
+        empty
+      ) : (
+        <div className="grid max-w-sm justify-items-center gap-2 text-center">
+          <span className="grid size-10 place-items-center rounded-full bg-muted text-muted-foreground">
+            <Icon name={blank ? "grid" : "filter"} size={18} />
+          </span>
+          <p className="text-sm font-medium">{blank ? (cols.length ? `No ${noun}s yet` : "No fields yet") : `No ${noun}s match`}</p>
+          <p className="text-sm text-muted-foreground">
+            {blank
+              ? cols.length
+                ? canAdd
+                  ? `Add a ${noun}, or click here and paste rows copied from a spreadsheet.`
+                  : `When there are ${noun}s, they show here.`
+                : "Add a field to start the table."
+              : "Try another search, or clear the filters to see everything."}
+          </p>
+          <div className="mt-2">
+            {blank ? (
+              canAdd && cols.length ? (
+                <Button variant="primary" icon="plus" onClick={() => addRows([newRow()], { edit: true })}>
+                  Add a {noun}
+                </Button>
+              ) : null
+            ) : (
+              <Button
+                onClick={() => {
+                  setSearch("");
+                  setView({ filters: [] });
+                }}
+              >
+                Clear filters
+              </Button>
+            )}
+          </div>
+        </div>
+      );
+  }
+
+  // ── status line ──────────────────────────────────────────────────────
+  const summary = range && !single ? summarize(range, viewRows, cols) : null;
+  const activeProblem = A ? problems.get(`${viewRows[A.r]?.id}\u0000${cols[A.c]?.key}`) : null;
+  function nextProblem() {
+    for (let r = 0; r < viewRows.length; r++) {
+      for (let c = 0; c < cols.length; c++) {
+        if (problems.has(`${viewRows[r].id}\u0000${cols[c].key}`) && (!A || r > A.r || (r === A.r && c > A.c))) {
+          select({ r, c });
+          ensureVisible(r, c);
+          focusGrid();
+          return;
+        }
+      }
+    }
+    // wrap to the first
+    for (let r = 0; r < viewRows.length; r++)
+      for (let c = 0; c < cols.length; c++)
+        if (problems.has(`${viewRows[r].id}\u0000${cols[c].key}`)) {
+          select({ r, c });
+          ensureVisible(r, c);
+          focusGrid();
+          return;
+        }
+  }
+  const fmtSum = (n) => (summary?.numCol ? typeOf(summary.numCol, custom).format(n, summary.numCol, ctx) : n.toLocaleString(locale, { maximumFractionDigits: 2 }));
+
+  const btnSize = "md";
+  const hiddenCount = view.hidden.filter((k) => localCols.some((c) => c.key === k)).length;
+  const filterCount = view.filters.length;
+
+  return (
+    <div ref={rootRef} className={cx("grid min-w-0 gap-3", className)}>
+      {toolbar ? (
+        <div className="flex flex-wrap items-center gap-2">
+          {toolbarStart}
+          <div className="min-w-0 flex-1 max-sm:basis-full sm:max-w-72">
+            <InputGroup
+              icon="search"
+              placeholder={`Search ${noun}s`}
+              aria-label={`Search ${noun}s`}
+              value={search}
+              onChange={(e) => setSearch(e.target.value)}
+              action={search ? { label: "Clear search", icon: "x", onClick: () => setSearch("") } : undefined}
+            />
+          </div>
+          <Popover
+            open={filterOpen}
+            onOpenChange={setFilterOpen}
+            variant={filterCount ? "secondary" : "quiet"}
+            size={btnSize}
+            width="auto"
+            align="start"
+            label="Filter"
+            trigger={
+              <>
+                <Icon name="filter" />
+                Filter
+                {filterCount ? (
+                  <Badge variant="soft" tone="primary" className="tabular-nums">
+                    {filterCount}
+                  </Badge>
+                ) : null}
+              </>
+            }
+          >
+            <FilterPanel columns={orderedColumns(localCols, view)} filters={view.filters} ctx={ctx} custom={custom} onChange={(filters) => setView({ filters })} />
+          </Popover>
+          <Popover
+            variant={view.sort.length ? "secondary" : "quiet"}
+            size={btnSize}
+            width="auto"
+            align="start"
+            label="Sort"
+            trigger={
+              <>
+                <Icon name="chevrons-up-down" />
+                Sort
+                {view.sort.length ? (
+                  <Badge variant="soft" tone="primary" className="tabular-nums">
+                    {view.sort.length}
+                  </Badge>
+                ) : null}
+              </>
+            }
+          >
+            <SortPanel columns={orderedColumns(localCols, view)} sort={view.sort} custom={custom} onChange={(sort) => setView({ sort })} />
+          </Popover>
+          <Popover
+            variant={hiddenCount ? "secondary" : "quiet"}
+            size={btnSize}
+            width="auto"
+            align="start"
+            label="Fields"
+            trigger={
+              <>
+                <Icon name={hiddenCount ? "eye-off" : "eye"} />
+                {hiddenCount ? `${hiddenCount} hidden` : "Fields"}
+              </>
+            }
+          >
+            <FieldsPanel columns={orderedColumns(localCols, view)} hidden={view.hidden} custom={custom} onChange={(hidden) => setView({ hidden })} />
+          </Popover>
+          <div className="ml-auto flex items-center gap-1">
+            {!readOnly ? (
+              <>
+                <IconButton icon="undo" label="Undo" disabled={!undoStack.current.length} onClick={undo} className="max-sm:hidden" />
+                <IconButton icon="redo" label="Redo" disabled={!redoStack.current.length} onClick={redo} className="max-sm:hidden" />
+              </>
+            ) : null}
+            {toolbarEnd}
+            {canAdd ? (
+              narrow ? (
+                <IconButton icon="plus" variant="primary" label={`Add a ${noun}`} onClick={() => addRows([newRow()], { edit: true })} />
+              ) : (
+                <Button variant="primary" icon="plus" onClick={() => addRows([newRow()], { edit: true })}>
+                  Add {noun}
+                </Button>
+              )
+            ) : null}
+          </div>
+        </div>
+      ) : null}
+
+      <div className="relative min-w-0 overflow-hidden rounded-lg border border-border bg-background" style={{ height }}>
+        <ContextMenu items={menuItems} label="Cell actions" className="h-full">
+          <div
+            ref={scroller}
+            role="grid"
+            aria-label={label}
+            aria-rowcount={viewRows.length + 1}
+            aria-colcount={cols.length + 1}
+            aria-multiselectable="true"
+            aria-activedescendant={activeId}
+            aria-busy={loading || undefined}
+            tabIndex={0}
+            className={cx("h-full overflow-auto overscroll-contain outline-none", !A && "focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-ring")}
+            onKeyDown={onKeyDown}
+            onPointerDown={onPointerDown}
+            onClick={onClick}
+            onDoubleClick={onDoubleClick}
+            onCopy={(e) => {
+              if (editingRef.current || e.target !== scroller.current || !range) return;
+              e.preventDefault();
+              e.clipboardData.setData("text/plain", copyText());
+            }}
+            onCut={(e) => {
+              if (editingRef.current || e.target !== scroller.current || !range) return;
+              e.preventDefault();
+              e.clipboardData.setData("text/plain", copyText());
+              if (!readOnly) commitChanges(clearChanges(range, viewRows, cols, ctx, custom));
+            }}
+            onPaste={(e) => {
+              if (editingRef.current || e.target !== scroller.current) return;
+              e.preventDefault();
+              pasteText(e.clipboardData.getData("text/plain"));
+            }}
+          >
+            <div className="relative select-none" style={{ width: totalW, height: emptyBody ? undefined : contentH, minHeight: "100%" }}>
+              {header}
+              {loading
+                ? Array.from({ length: 8 }, (_, i) => (
+                    <div key={i} className="absolute left-0 flex" style={{ top: headH + i * rowH, height: rowH, width: totalW }}>
+                      <div className="sticky left-0 z-10 shrink-0 border-b border-r border-border bg-background" style={{ width: gutterW }} />
+                      {cols.map((col) => (
+                        <div key={col.key} className="flex h-full shrink-0 items-center border-b border-r border-border px-2.5" style={{ width: col.width }}>
+                          <Skeleton className={cx("h-3", i % 3 === 0 ? "w-3/5" : i % 3 === 1 ? "w-4/5" : "w-2/5")} />
+                        </div>
+                      ))}
+                    </div>
+                  ))
+                : vRows.map(renderRow)}
+              {addLine && !emptyBody ? (
+                <div className="absolute left-0 flex" style={{ top: headH + bodyH, height: rowH, width: totalW }}>
+                  {/* raw: a strip the height of a row that lines up with the grid's gutter and frozen columns; a kit Button has its own height and radius. */}
+                  <button
+                    type="button"
+                    tabIndex={-1}
+                    onClick={() => addRows([newRow()], { edit: true })}
+                    className="sticky left-0 z-10 flex h-full shrink-0 items-center gap-2 border-b border-r border-border bg-background pl-2.5 text-sm text-muted-foreground transition-colors duration-150 hover:bg-muted hover:text-foreground"
+                    style={{ width: gutterW + frozenW }}
+                  >
+                    <Icon name="plus" size={14} />
+                    Add {noun}
+                  </button>
+                </div>
+              ) : null}
+              {emptyBody ? (
+                <div className="sticky left-0 grid place-items-center px-4 py-10" style={{ width: boxW ? boxW - 2 : "100%" }}>
+                  {emptyBody}
+                </div>
+              ) : null}
+            </div>
+          </div>
+        </ContextMenu>
+      </div>
+
+      <div className="flex min-h-6 flex-wrap items-center justify-between gap-x-4 gap-y-1 px-1 text-xs text-muted-foreground" aria-live="polite">
+        <div className="flex items-center gap-3">
+          <span className="tabular-nums">
+            {loading ? "Loading…" : filtered ? `${viewRows.length.toLocaleString()} of ${plural(local.length, noun)}` : plural(local.length, noun)}
+          </span>
+          {order.current.dirty && (view.sort.length || view.filters.length) ? (
+            <Button variant="link" size="inherit" onClick={() => setResortTick((n) => n + 1)}>
+              {view.sort.length ? "Sort again" : "Filter again"}
+            </Button>
+          ) : null}
+          {problems.size ? (
+            <Button variant="link" size="inherit" tone="muted" onClick={nextProblem}>
+              <span aria-hidden="true" className="mr-1.5 inline-block size-1.5 rounded-full bg-destructive align-middle" />
+              {problems.size === 1 ? "1 problem" : `${problems.size.toLocaleString()} problems`}
+            </Button>
+          ) : null}
+        </div>
+        <div className="flex items-center gap-3">
+          {activeProblem ? <span className="text-destructive">{activeProblem}</span> : null}
+          {rowsMode ? (
+            <>
+              <span className="tabular-nums">{plural(range.r1 - range.r0 + 1, noun)} selected</span>
+              {onDeleteRows && !readOnly ? (
+                <Button variant="link" size="inherit" tone="muted" onClick={() => deleteRows(viewRows.slice(range.r0, range.r1 + 1).map((r) => r.id))}>
+                  Delete
+                </Button>
+              ) : null}
+            </>
+          ) : summary ? (
+            <span className="tabular-nums">
+              {summary.nums > 1 ? `Sum ${fmtSum(summary.sum)} · Average ${fmtSum(summary.avg)} · ` : ""}
+              {summary.filled.toLocaleString()} of {summary.count.toLocaleString()} filled
+            </span>
+          ) : null}
+          {!narrow && !coarse ? (
+            <Popover trigger={<Icon name="keyboard" size={16} />} variant="quiet" size="sm" width="auto" align="end" side="top" label="Keyboard shortcuts">
+              <ShortcutsPanel />
+            </Popover>
+          ) : null}
+        </div>
+      </div>
+    </div>
+  );
+}
+
+function restoreRows(rs, removed) {
+  const out = rs.slice();
+  for (const { row, index } of [...removed].sort((a, b) => a.index - b.index)) {
+    if (out.some((r) => r.id === row.id)) continue;
+    out.splice(Math.min(index, out.length), 0, row);
+  }
+  return out;
+}
+
+function RenameInput({ name, onDone }) {
+  const [text, setText] = useState(name);
+  const input = useRef(null);
+  const done = useRef(false);
+  useLayoutEffect(() => {
+    input.current?.focus();
+    input.current?.select();
+  }, []);
+  const finish = (v) => {
+    if (done.current) return;
+    done.current = true;
+    onDone(v);
+  };
+  return (
+    // raw: a header-sized rename box inside a 40px column header; the kit's Input is a 44px field.
+    <input
+      ref={input}
+      value={text}
+      aria-label="Field name"
+      onChange={(e) => setText(e.target.value)}
+      onKeyDown={(e) => {
+        e.stopPropagation();
+        if (e.key === "Enter") finish(text.trim());
+        else if (e.key === "Escape") finish(null);
+      }}
+      onBlur={() => finish(text.trim())}
+      className="h-7 min-w-0 flex-1 rounded-sm border border-input bg-background px-1.5 text-xs font-medium text-foreground outline-none focus-visible:ring-2 focus-visible:ring-ring"
+    />
+  );
+}