@ai-matrx/records-ui 0.93.3 → 0.93.4

package/dist/index.cjs

@@ -7978,6 +7978,10 @@ function useMergedGridControls(args) {
     (columnKey) => enabled && fieldOf2(columnKey) ? headerMenuItems(columnKey, ctx) : void 0,
     [enabled, ctx, fieldOf2]
   );
+  const columnsControl = (0, import_react40.useMemo)(
+    () => enabled ? { order, hidden, onChange: keepColumns } : void 0,
+    [enabled, order, hidden, keepColumns]
+  );
   const close = () => setDialog(null);
   const dialogs = !enabled ? null : /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)(import_jsx_runtime28.Fragment, { children: [
     colours.dialogs,
@@ -8109,7 +8113,7 @@ function useMergedGridControls(args) {
     headerMenuFor,
     filterFor,
     contextMenu,
-    columns: enabled ? { order, hidden, onChange: keepColumns } : void 0,
+    columns: columnsControl,
     dialogs,
     addColumn: () => setDialog({ kind: "insert", anchor: null, side: "right" }),
     sheetTools: enabled ? /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)(import_jsx_runtime28.Fragment, { children: [
@@ -9639,7 +9643,43 @@ function useGridUndo(args) {
     [push, undo, redo, held, busy, notice, dismiss]
   );
 }
-function UndoRedoButtons({ undo }) {
+function useUndoSource(undo) {
+  const box = (0, import_react52.useRef)({
+    undo,
+    face: { back: undo.depth.back, forward: undo.depth.forward, busy: undo.busy },
+    listeners: /* @__PURE__ */ new Set()
+  });
+  box.current.undo = undo;
+  const source = (0, import_react52.useMemo)(
+    () => ({
+      face: () => box.current.face,
+      subscribe: (listener) => {
+        box.current.listeners.add(listener);
+        return () => {
+          box.current.listeners.delete(listener);
+        };
+      },
+      undo: () => void box.current.undo.undo(),
+      redo: () => void box.current.undo.redo()
+    }),
+    []
+  );
+  const { back, forward } = undo.depth;
+  const busy = undo.busy;
+  (0, import_react52.useLayoutEffect)(() => {
+    const held = box.current.face;
+    if (held.back === back && held.forward === forward && held.busy === busy) return;
+    box.current.face = { back, forward, busy };
+    for (const listener of box.current.listeners) listener();
+  }, [back, forward, busy]);
+  return source;
+}
+function UndoRedoLive({ source }) {
+  const face = (0, import_react52.useSyncExternalStore)(source.subscribe, source.face, source.face);
+  return /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(UndoRedoPair, { face, onUndo: source.undo, onRedo: source.redo });
+}
+function UndoRedoPair({ face, onUndo, onRedo }) {
+  const undo = { depth: { back: face.back, forward: face.forward }, busy: face.busy };
   if (undo.depth.back === 0 && undo.depth.forward === 0) return null;
   return /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)(import_jsx_runtime37.Fragment, { children: [
     /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)(
@@ -9651,7 +9691,7 @@ function UndoRedoButtons({ undo }) {
         title: undo.depth.back > 0 ? `Undo (Cmd-Z) \xB7 ${undo.depth.back} ${undo.depth.back === 1 ? "step" : "steps"} back` : "Nothing to undo",
         "aria-label": `Undo, ${undo.depth.back} ${undo.depth.back === 1 ? "step" : "steps"}`,
         disabled: undo.busy || undo.depth.back === 0,
-        onClick: () => void undo.undo(),
+        onClick: onUndo,
         children: [
           "Undo ",
           /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("span", { className: "ml-1 tabular-nums text-muted-foreground", "data-records-undo-count": "", children: undo.depth.back })
@@ -9667,7 +9707,7 @@ function UndoRedoButtons({ undo }) {
         title: undo.depth.forward > 0 ? `Redo (Shift-Cmd-Z) \xB7 ${undo.depth.forward} ${undo.depth.forward === 1 ? "step" : "steps"} forward` : "Nothing to redo",
         "aria-label": `Redo, ${undo.depth.forward} ${undo.depth.forward === 1 ? "step" : "steps"}`,
         disabled: undo.busy || undo.depth.forward === 0,
-        onClick: () => void undo.redo(),
+        onClick: onRedo,
         children: [
           "Redo ",
           /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("span", { className: "ml-1 tabular-nums text-muted-foreground", "data-records-redo-count": "", children: undo.depth.forward })
@@ -11013,6 +11053,7 @@ function Grid({
   );
   const rowVersion = (0, import_react60.useCallback)((row) => editingNow.current.rowSignature(row.id), []);
   const undo = useGridUndo({ tableId, reload: records.reload, forget: editing.forget });
+  const undoSource = useUndoSource(undo);
   pushWritten.current = (write) => {
     const field2 = (fields.data ?? []).find((f) => f.key === write.key);
     const name = changedRecordName(table.data, rows.find((r) => r.id === write.rowId)?.document ?? {}, write.key, write.after);
@@ -11564,9 +11605,14 @@ function Grid({
   );
   const footerNow = (0, import_react60.useRef)({
     summaryCell: () => null,
-    addLine: () => null
+    addLine: () => null,
+    choose: () => void 0,
+    add: () => void 0
   });
   footerNow.current = {
+    // The footer is memoised on what it shows (`footerRows` below), so its buttons act through here.
+    choose: chooseSummary,
+    add: () => void addRowHere(),
     summaryCell: (columnId) => {
       const field2 = ordered.find((f) => f.key === columnId);
       if (!field2) return null;
@@ -11579,11 +11625,11 @@ function Grid({
           value: summaries.values[columnId],
           rowCount: summaries.rowCount,
           summaries,
-          onChoose: (op2) => chooseSummary(columnId, op2)
+          onChoose: (op2) => footerNow.current.choose(columnId, op2)
         }
       );
     },
-    addLine: () => /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(AddRowLine, { onAdd: () => void addRowHere(), busy: added.busy })
+    addLine: () => /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(AddRowLine, { onAdd: () => footerNow.current.add(), busy: added.busy })
   };
   const addColumnNow = (0, import_react60.useRef)(controls.addColumn);
   addColumnNow.current = controls.addColumn;
@@ -11698,13 +11744,24 @@ function Grid({
     // eslint-disable-next-line react-hooks/exhaustive-deps -- `hasTalk`/`hasAgent` stand for the host ports the JSX reads; handlers run through `rowActionsNow`.
     [canWrite, mayWriteRow, tableActions.runnable, tableActions.agent, runner.busy, hasTalk, hasAgent, editable, rights.write]
   );
-  const columns = (0, import_react60.useMemo)(
+  const headerHeld = (0, import_react60.useRef)(/* @__PURE__ */ new Map());
+  const menuLatest = (0, import_react60.useRef)(/* @__PURE__ */ new Map());
+  const addColumnDef = (0, import_react60.useMemo)(() => addColumnColumn(() => addColumnNow.current()), []);
+  const drawnColumns = (0, import_react60.useMemo)(
     () => {
-      const drawn = withHeaderMenus(bodyColumns, controls.headerMenuFor, controls.filterFor);
-      return merged && rights.structure && editable ? [...drawn, addColumnColumn(() => addColumnNow.current())] : drawn;
+      const filterFor = controls.filterFor;
+      const drawn = withHeaderMenus(
+        bodyColumns,
+        (key) => holdHeaderMenu(headerHeld.current, menuLatest.current, key, controls.headerMenuFor(key)),
+        (key) => holdByContent(headerHeld.current, `filter:${key}`, filterFor(key))
+      );
+      return merged && rights.structure && editable ? [...drawn, addColumnDef] : drawn;
     },
-    [bodyColumns, controls.headerMenuFor, controls.filterFor, merged, rights.structure, editable]
+    [bodyColumns, controls.headerMenuFor, controls.filterFor, merged, rights.structure, editable, addColumnDef]
   );
+  const columnsHeld = (0, import_react60.useRef)(null);
+  const columns = columnsHeld.current !== null && sameColumns(columnsHeld.current, drawnColumns) ? columnsHeld.current : drawnColumns;
+  columnsHeld.current = columns;
   const [localColumns, setLocalColumns] = (0, import_react60.useState)(
     null
   );
@@ -11777,6 +11834,274 @@ function Grid({
       } : {}
     };
   }, [presentation, onPresentationChange, writeLook, merged, phone]);
+  const queryTotal = records.data?.total ?? rows.length;
+  const tableQuery = (0, import_react60.useMemo)(
+    () => merged ? {
+      // THE STORE ANSWERS THE QUERY (tranche 6k): `data` is already the page.
+      mode: "controlled",
+      state: query,
+      totalItems: queryTotal,
+      onStateChange: setQuery,
+      sourceProcessing: { search: "source", columnFilters: "source", sort: "source" }
+    } : { mode: "controlled-local", state: query, onStateChange: setQuery },
+    [merged, query, queryTotal]
+  );
+  const showAddLine = mayAddRow && rows.length > 0;
+  const showSummaryLine = rows.length > 0 && (!merged || Object.keys(chosenSummaries).length > 0);
+  const footerFace = JSON.stringify([
+    showAddLine ? added.busy : null,
+    showSummaryLine ? [chosenSummaries, summaries.values, summaries.rowCount, summaries.loading] : null
+  ]);
+  const footerRows = (0, import_react60.useMemo)(
+    () => [...showAddLine ? [ADD_ROW] : [], ...showSummaryLine ? [SUMMARY_ROW] : []],
+    // `footerFace`, `ordered` and the summaries' operations are what the footer's cells draw.
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [showAddLine, showSummaryLine, footerFace, ordered, summaries.operations, summaries.askOperations]
+  );
+  const coverageTotal = typeof records.data?.total === "number" ? records.data.total : null;
+  const tableCoverage = (0, import_react60.useMemo)(
+    () => ({
+      answeredBy: merged ? "source" : "client",
+      ...merged && coverageTotal !== null ? { matched: coverageTotal } : {},
+      noun: "record",
+      ...coverageTotal !== null ? { total: coverageTotal } : {}
+    }),
+    [merged, coverageTotal]
+  );
+  const sheetNow = (0, import_react60.useRef)({ merged, writeRange, editing, fields: fields.data ?? [], mayWriteRow, notify: host.notify });
+  sheetNow.current = { merged, writeRange, editing, fields: fields.data ?? [], mayWriteRow, notify: host.notify };
+  const hasNotify = Boolean(host.notify);
+  const readOnlyReason = !editable || !rights.known || rights.write ? "Editing is off here, so this table can be copied but not changed." : rights.why("write");
+  const spreadsheetConfig = (0, import_react60.useMemo)(
+    () => canWrite && editable ? {
+      enabled: true,
+      writableColumnIds: pasteableKeys,
+      onPatch: (patches, intent) => {
+        const now = sheetNow.current;
+        if (now.merged) {
+          void now.writeRange(patches, intent);
+          return;
+        }
+        for (const patch of patches) {
+          now.editing.setCell(patch.rowId, patch.columnId, patch.value);
+        }
+      },
+      ...merged ? { undoDepth: 0, onSelectionChange: followSelection, controllerRef: sheetController } : {},
+      columnRefusal: (columnId) => {
+        const field2 = sheetNow.current.fields.find((f) => f.key === columnId);
+        if (!field2) return `This table has no column called ${columnId}.`;
+        return `${fieldName(field2)} cannot take a pasted value \u2014 ${fieldTypeLabel(field2)} is worked out or chosen, not typed.`;
+      },
+      validateCell: ({ columnId, value }) => {
+        const field2 = sheetNow.current.fields.find((f) => f.key === columnId);
+        if (!field2) return `This table has no column called ${columnId}.`;
+        const judged = valueFromPastedText(field2, value === null ? "" : String(value));
+        return "refusal" in judged ? judged.refusal : void 0;
+      },
+      onPastePlan: receivePastePlan,
+      /*
+       * TYPE-TO-EDIT (design-system 0.43 `onEditRequest`): the cell a person is on
+       * opens ITS OWN editor — the Field's — holding what they typed (a letter, an
+       * IME composition, an Option/AltGr character, dictation). A worked-out column
+       * or a row this person may not write answers false, so nothing is swallowed.
+       */
+      onEditRequest: (address, seed) => {
+        const now = sheetNow.current;
+        const field2 = now.fields.find((f) => f.key === address.columnId);
+        if (!field2 || !fieldIsEditable(field2) || !now.mayWriteRow(address.rowId)) return false;
+        if (seed !== null && seed !== "" && typingOpens(field2) === "none") return false;
+        now.editing.begin({ rowId: address.rowId, key: field2.key }, seed);
+        return true;
+      },
+      ...hasNotify ? { notify: (message) => sheetNow.current.notify?.success(message) } : {}
+    } : {
+      /*
+       * RANGE SELECTION AND COPY FOR A READER (merge step 3, 0.42 `readOnly`). A person
+       * who may not change this table may still drag out a range, select all and press
+       * Cmd-C for a real Excel/Sheets block — the UX walk graded range selection BROKEN
+       * on a table whose writes were refused. Every write gesture (cut, paste, clear,
+       * fill, undo) says why it cannot, in the store's own words.
+       */
+      enabled: true,
+      readOnly: true,
+      ...merged ? { onSelectionChange: followSelection, controllerRef: sheetController } : {},
+      readOnlyReason
+    },
+    [canWrite, editable, pasteableKeys, merged, followSelection, receivePastePlan, hasNotify, readOnlyReason]
+  );
+  const toolbarFields = fields.data;
+  const hasSeveralRows = rows.length > 1;
+  const editingBusy = editing.busy;
+  const addRecord = editing.addRecord;
+  const phoneSheetTools = merged && phone ? controls.sheetTools : null;
+  const tableToolbar = (0, import_react60.useMemo)(
+    () => ({
+      search: true,
+      searchPlaceholder: "Search records",
+      /*
+       * A PHONE (tranche 6o): search and the one Tools button sit side by side at the START of
+       * the row, so Tools is never scrolled out of reach; the search is the same query.
+       */
+      ...merged && phone ? {
+        customSearch: /* @__PURE__ */ (0, import_jsx_runtime42.jsx)("div", { className: "flex min-w-0 flex-1 items-center gap-1.5", "data-records-grid-phone-search": "", children: /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
+          "input",
+          {
+            type: "search",
+            value: query.search,
+            placeholder: "Search",
+            "aria-label": "Search records",
+            onChange: (event) => {
+              const search = event.target.value;
+              setQuery((held) => ({ ...held, search, page: 1 }));
+            },
+            className: "h-8 w-full min-w-0 rounded-md border border-input bg-background px-2 text-foreground placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring",
+            style: { fontSize: "16px" }
+          }
+        ) })
+      } : {},
+      /* ONE ROW (lane TABLE-PAGE-CHROME): on a table page the grid's search, columns and
+         sort are drawn INTO the page's toolbar row, never a second bar under it. */
+      ...toolbarSlot !== void 0 ? { portalInto: toolbarSlot, singleRow: true } : {},
+      // SCR-2 / SCR-4: PRESENT for an admin, ABSENT for everyone else.
+      // There is no third state: this package ships no disabled variant of
+      // these controls, so a member cannot be shown a dead one by mistake.
+      /*
+       * WHERE THE GRID'S CONTROLS GO (lane C, review 2026-09-26 D6). Inline when the row has
+       * room; behind the row's "…" once the page row is folded that far (Undo / Redo and New
+       * record stay beside it — the primary action is never folded); on a phone EVERY control
+       * — the table's own (clear, copy/export, group, columns), these, the search, the sort and
+       * the page's filter, layout and share — in ONE "Tools" sheet. Never dropped.
+       */
+      actions: /* @__PURE__ */ (0, import_jsx_runtime42.jsxs)(import_jsx_runtime42.Fragment, { children: [
+        manual ? /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
+          SortStateControl,
+          {
+            ...handOrderSortState({
+              sortName: columnSort ? columnLabel(toolbarFields ?? [], columnSort.id) : null,
+              direction: columnSort?.direction ?? null,
+              onBack: () => setQuery((held) => ({ ...held, sort: null, page: 1 })),
+              ...viewOrder?.onUseSort && columnSort ? {
+                onUseSort: () => {
+                  const sort = columnSort;
+                  const chosen = { field: sort.id, direction: sort.direction };
+                  setHeldOrder({ order: "sorted", sorts: [chosen] });
+                  viewOrder.onUseSort?.(chosen);
+                  host.notify?.success(
+                    `Sorted by ${columnLabel(toolbarFields ?? [], sort.id)} ${sortArrow(sort.direction)}. ${MANUAL_SORT.replacedToast}`
+                  );
+                }
+              } : {}
+            })
+          }
+        ) : null,
+        viewId && viewOrder?.onPlaced && hasSeveralRows ? /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(import_design_system35.Button, { size: "sm", variant: "ghost", onClick: () => setReordering(true), "data-records-reorder-open": "", children: "Reorder" }) : null,
+        !merged && Boolean(editable) && rights.write ? /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(import_design_system35.Button, { size: "sm", disabled: editingBusy, onClick: () => void addRecord(), children: editingBusy ? "Adding\u2026" : "New record" }) : null,
+        rights.structure && onAddField ? /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(AddFieldButton, { onClick: onAddField }) : null,
+        /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
+          GridLayoutMenu,
+          {
+            look,
+            firstColumn: sortedKeys[0] ? {
+              key: sortedKeys[0],
+              name: (() => {
+                const first = (toolbarFields ?? []).find((f) => f.key === sortedKeys[0]);
+                return first ? fieldName(first) : humanize(sortedKeys[0]);
+              })()
+            } : null,
+            onChange: changeLayout,
+            kept: Boolean(onPresentationChange)
+          }
+        )
+      ] }),
+      ...merged ? {
+        overflow: {
+          mode: phone ? "sheet" : toolbarFold2 >= 3 ? "menu" : "inline",
+          pinned: /* @__PURE__ */ (0, import_jsx_runtime42.jsxs)(import_jsx_runtime42.Fragment, { children: [
+            /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(UndoRedoLive, { source: undoSource }),
+            Boolean(editable) && rights.write ? /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(import_design_system35.Button, { size: "sm", className: "shrink-0", disabled: added.busy, onClick: () => addRowRef.current(), children: added.busy ? "Adding\u2026" : "New record" }) : null
+          ] }),
+          ...phone ? {
+            sheetTop: /* @__PURE__ */ (0, import_jsx_runtime42.jsxs)("div", { className: "flex flex-col gap-1.5 pb-1", "data-records-grid-sheet-top": "", "data-matrx-table-tools-keep-open": "", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
+                "input",
+                {
+                  type: "search",
+                  value: query.search,
+                  placeholder: "Search",
+                  "aria-label": "Search records",
+                  onChange: (event) => {
+                    const search = event.target.value;
+                    setQuery((held) => ({ ...held, search, page: 1 }));
+                  },
+                  className: "h-10 w-full min-w-0 rounded-md border border-input bg-background px-2 text-foreground placeholder:text-muted-foreground",
+                  style: { fontSize: "16px" }
+                }
+              ),
+              /* @__PURE__ */ (0, import_jsx_runtime42.jsxs)("label", { className: "flex items-center gap-2 text-xs text-muted-foreground", "data-records-grid-sheet-sort": "", children: [
+                /* @__PURE__ */ (0, import_jsx_runtime42.jsx)("span", { className: "shrink-0", children: "Sort by" }),
+                /* @__PURE__ */ (0, import_jsx_runtime42.jsxs)(
+                  "select",
+                  {
+                    "aria-label": "Sort by",
+                    value: query.sort ? `${query.sort.id}:${query.sort.direction}` : "",
+                    onChange: (event) => {
+                      const [id, direction] = event.target.value.split(":");
+                      setQuery((held) => ({
+                        ...held,
+                        page: 1,
+                        sort: id ? { id, direction: direction === "desc" ? "desc" : "asc" } : null
+                      }));
+                    },
+                    className: "h-10 min-w-0 flex-1 rounded-md border border-input bg-background px-2 text-foreground",
+                    style: { fontSize: "16px" },
+                    children: [
+                      /* @__PURE__ */ (0, import_jsx_runtime42.jsx)("option", { value: "", children: "No sort" }),
+                      ordered.flatMap((field2) => [
+                        /* @__PURE__ */ (0, import_jsx_runtime42.jsx)("option", { value: `${field2.key}:asc`, children: `${fieldName(field2)} \u2191` }, `${field2.key}:asc`),
+                        /* @__PURE__ */ (0, import_jsx_runtime42.jsx)("option", { value: `${field2.key}:desc`, children: `${fieldName(field2)} \u2193` }, `${field2.key}:desc`)
+                      ])
+                    ]
+                  }
+                )
+              ] }),
+              phoneSheetTools
+            ] }),
+            ...sheetExtras ? { sheetExtras } : {}
+          } : {}
+        }
+      } : {}
+    }),
+    [
+      merged,
+      phone,
+      query.search,
+      query.sort,
+      toolbarSlot,
+      manual,
+      columnSort,
+      toolbarFields,
+      viewOrder,
+      host,
+      viewId,
+      hasSeveralRows,
+      editable,
+      rights.write,
+      rights.structure,
+      editingBusy,
+      addRecord,
+      onAddField,
+      look,
+      sortedKeys,
+      changeLayout,
+      onPresentationChange,
+      toolbarFold2,
+      undoSource,
+      added.busy,
+      ordered,
+      phoneSheetTools,
+      sheetExtras
+    ]
+  );
   const labelOfField = (0, import_react60.useCallback)(
     (key) => {
       const held = (fields.data ?? []).find((f) => f.key === key);
@@ -11945,25 +12270,12 @@ function Grid({
                   viewTabs: false,
                   stickyHeader: true,
                   pageSize,
-                  query: merged ? {
-                    // THE STORE ANSWERS THE QUERY (tranche 6k): `data` is already the page.
-                    mode: "controlled",
-                    state: query,
-                    totalItems: records.data?.total ?? rows.length,
-                    onStateChange: setQuery,
-                    sourceProcessing: { search: "source", columnFilters: "source", sort: "source" }
-                  } : { mode: "controlled-local", state: query, onStateChange: setQuery },
+                  query: tableQuery,
                   tableClassName: (0, import_design_system35.cn)(
                     !look.wrap && "[&_tbody_td]:max-w-[28rem] [&_tbody_td]:overflow-hidden [&_tbody_td]:text-ellipsis [&_tbody_td]:whitespace-nowrap! [&_tbody_td_*]:whitespace-nowrap!",
                     look.fit === "scroll" && "sm:[&>table]:w-max! sm:[&>table]:max-w-none! sm:[&>table]:min-w-full!"
                   ),
-                  ...(() => {
-                    const footerRows = [
-                      ...mayAddRow && rows.length > 0 ? [ADD_ROW] : [],
-                      ...rows.length > 0 && (!merged || Object.keys(chosenSummaries).length > 0) ? [SUMMARY_ROW] : []
-                    ];
-                    return footerRows.length > 0 ? { footerRows } : {};
-                  })(),
+                  footerRows,
                   ...copyConfig ? { copy: copyConfig } : {},
                   ...offerSelection ? {
                     selection: {
@@ -11997,75 +12309,15 @@ function Grid({
                       ] })
                     }
                   } : {},
-                  detail: { enabled: false },
-                  window: { enabled: false },
+                  detail: DETAIL_OFF,
+                  window: WINDOW_OFF,
                   ...controls.contextMenu ? { contextMenu: controls.contextMenu } : {},
-                  ...canWrite && editable ? {
-                    spreadsheet: {
-                      enabled: true,
-                      writableColumnIds: pasteableKeys,
-                      onPatch: (patches, intent) => {
-                        if (merged) {
-                          void writeRange(patches, intent);
-                          return;
-                        }
-                        for (const patch of patches) {
-                          editing.setCell(patch.rowId, patch.columnId, patch.value);
-                        }
-                      },
-                      ...merged ? { undoDepth: 0, onSelectionChange: followSelection, controllerRef: sheetController } : {},
-                      columnRefusal: (columnId) => {
-                        const field2 = (fields.data ?? []).find((f) => f.key === columnId);
-                        if (!field2) return `This table has no column called ${columnId}.`;
-                        return `${fieldName(field2)} cannot take a pasted value \u2014 ${fieldTypeLabel(field2)} is worked out or chosen, not typed.`;
-                      },
-                      validateCell: ({ columnId, value }) => {
-                        const field2 = (fields.data ?? []).find((f) => f.key === columnId);
-                        if (!field2) return `This table has no column called ${columnId}.`;
-                        const judged = valueFromPastedText(field2, value === null ? "" : String(value));
-                        return "refusal" in judged ? judged.refusal : void 0;
-                      },
-                      onPastePlan: receivePastePlan,
-                      /*
-                       * TYPE-TO-EDIT (design-system 0.43 `onEditRequest`): the cell a person is on
-                       * opens ITS OWN editor — the Field's — holding what they typed (a letter, an
-                       * IME composition, an Option/AltGr character, dictation). A worked-out column
-                       * or a row this person may not write answers false, so nothing is swallowed.
-                       */
-                      onEditRequest: (address, seed) => {
-                        const field2 = (fields.data ?? []).find((f) => f.key === address.columnId);
-                        if (!field2 || !fieldIsEditable(field2) || !mayWriteRow(address.rowId)) return false;
-                        if (seed !== null && seed !== "" && typingOpens(field2) === "none") return false;
-                        editing.begin({ rowId: address.rowId, key: field2.key }, seed);
-                        return true;
-                      },
-                      ...host.notify ? { notify: (message) => host.notify?.success(message) } : {}
-                    }
-                  } : {
-                    /*
-                     * RANGE SELECTION AND COPY FOR A READER (merge step 3, 0.42 `readOnly`). A person
-                     * who may not change this table may still drag out a range, select all and press
-                     * Cmd-C for a real Excel/Sheets block — the UX walk graded range selection BROKEN
-                     * on a table whose writes were refused. Every write gesture (cut, paste, clear,
-                     * fill, undo) says why it cannot, in the store's own words.
-                     */
-                    spreadsheet: {
-                      enabled: true,
-                      readOnly: true,
-                      ...merged ? { onSelectionChange: followSelection, controllerRef: sheetController } : {},
-                      readOnlyReason: !editable || !rights.known || rights.write ? "Editing is off here, so this table can be copied but not changed." : rights.why("write")
-                    }
-                  },
+                  spreadsheet: spreadsheetConfig,
                   ...groupingConfig ? { grouping: groupingConfig } : {},
                   columnState,
                   ...look.rowHeight ? { rowHeight: look.rowHeight } : {},
-                  virtualize: fills ? { threshold: 40 } : true,
-                  coverage: {
-                    answeredBy: merged ? "source" : "client",
-                    ...merged && typeof records.data?.total === "number" ? { matched: records.data.total } : {},
-                    noun: "record",
-                    ...typeof records.data?.total === "number" ? { total: records.data.total } : {}
-                  },
+                  virtualize: fills ? VIRTUALIZE_FILLED : true,
+                  coverage: tableCoverage,
                   ...tableStyleProp ? { tableStyle: tableStyleProp } : {},
                   ...onOpenRecord ? { onRowOpen: (row) => onOpenRecord(row.id) } : {},
                   ...offersRowActions ? { rowActions } : {},
@@ -12077,142 +12329,7 @@ function Grid({
                     ...mayAddRow ? { addFirst: /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(AddFirstRowButton, { onAdd: () => void addRowHere(), busy: added.busy }) } : {},
                     emptyDescription: rights.write ? "Add the first one and it appears here." : rights.known ? `Nothing has been written to this table. ${rights.why("write")}` : "Nothing has been written to this table."
                   }),
-                  toolbar: {
-                    search: true,
-                    searchPlaceholder: "Search records",
-                    /*
-                     * A PHONE (tranche 6o): search and the one Tools button sit side by side at the START of
-                     * the row, so Tools is never scrolled out of reach; the search is the same query.
-                     */
-                    ...merged && phone ? {
-                      customSearch: /* @__PURE__ */ (0, import_jsx_runtime42.jsx)("div", { className: "flex min-w-0 flex-1 items-center gap-1.5", "data-records-grid-phone-search": "", children: /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
-                        "input",
-                        {
-                          type: "search",
-                          value: query.search,
-                          placeholder: "Search",
-                          "aria-label": "Search records",
-                          onChange: (event) => {
-                            const search = event.target.value;
-                            setQuery((held) => ({ ...held, search, page: 1 }));
-                          },
-                          className: "h-8 w-full min-w-0 rounded-md border border-input bg-background px-2 text-foreground placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring",
-                          style: { fontSize: "16px" }
-                        }
-                      ) })
-                    } : {},
-                    /* ONE ROW (lane TABLE-PAGE-CHROME): on a table page the grid's search, columns and
-                       sort are drawn INTO the page's toolbar row, never a second bar under it. */
-                    ...toolbarSlot !== void 0 ? { portalInto: toolbarSlot, singleRow: true } : {},
-                    // SCR-2 / SCR-4: PRESENT for an admin, ABSENT for everyone else.
-                    // There is no third state: this package ships no disabled variant of
-                    // these controls, so a member cannot be shown a dead one by mistake.
-                    /*
-                     * WHERE THE GRID'S CONTROLS GO (lane C, review 2026-09-26 D6). Inline when the row has
-                     * room; behind the row's "…" once the page row is folded that far (Undo / Redo and New
-                     * record stay beside it — the primary action is never folded); on a phone EVERY control
-                     * — the table's own (clear, copy/export, group, columns), these, the search, the sort and
-                     * the page's filter, layout and share — in ONE "Tools" sheet. Never dropped.
-                     */
-                    actions: /* @__PURE__ */ (0, import_jsx_runtime42.jsxs)(import_jsx_runtime42.Fragment, { children: [
-                      manual ? /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
-                        SortStateControl,
-                        {
-                          ...handOrderSortState({
-                            sortName: columnSort ? columnLabel(fields.data ?? [], columnSort.id) : null,
-                            direction: columnSort?.direction ?? null,
-                            onBack: () => setQuery((held) => ({ ...held, sort: null, page: 1 })),
-                            ...viewOrder?.onUseSort && columnSort ? {
-                              onUseSort: () => {
-                                const sort = columnSort;
-                                const chosen = { field: sort.id, direction: sort.direction };
-                                setHeldOrder({ order: "sorted", sorts: [chosen] });
-                                viewOrder.onUseSort?.(chosen);
-                                host.notify?.success(
-                                  `Sorted by ${columnLabel(fields.data ?? [], sort.id)} ${sortArrow(sort.direction)}. ${MANUAL_SORT.replacedToast}`
-                                );
-                              }
-                            } : {}
-                          })
-                        }
-                      ) : null,
-                      viewId && viewOrder?.onPlaced && rows.length > 1 ? /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(import_design_system35.Button, { size: "sm", variant: "ghost", onClick: () => setReordering(true), "data-records-reorder-open": "", children: "Reorder" }) : null,
-                      !merged && Boolean(editable) && rights.write ? /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(import_design_system35.Button, { size: "sm", disabled: editing.busy, onClick: () => void editing.addRecord(), children: editing.busy ? "Adding\u2026" : "New record" }) : null,
-                      rights.structure && onAddField ? /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(AddFieldButton, { onClick: onAddField }) : null,
-                      /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
-                        GridLayoutMenu,
-                        {
-                          look,
-                          firstColumn: sortedKeys[0] ? {
-                            key: sortedKeys[0],
-                            name: (() => {
-                              const first = (fields.data ?? []).find((f) => f.key === sortedKeys[0]);
-                              return first ? fieldName(first) : humanize(sortedKeys[0]);
-                            })()
-                          } : null,
-                          onChange: changeLayout,
-                          kept: Boolean(onPresentationChange)
-                        }
-                      )
-                    ] }),
-                    ...merged ? {
-                      overflow: {
-                        mode: phone ? "sheet" : toolbarFold2 >= 3 ? "menu" : "inline",
-                        pinned: /* @__PURE__ */ (0, import_jsx_runtime42.jsxs)(import_jsx_runtime42.Fragment, { children: [
-                          /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(UndoRedoButtons, { undo }),
-                          Boolean(editable) && rights.write ? /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(import_design_system35.Button, { size: "sm", className: "shrink-0", disabled: added.busy, onClick: () => void addRowHere(), children: added.busy ? "Adding\u2026" : "New record" }) : null
-                        ] }),
-                        ...phone ? {
-                          sheetTop: /* @__PURE__ */ (0, import_jsx_runtime42.jsxs)("div", { className: "flex flex-col gap-1.5 pb-1", "data-records-grid-sheet-top": "", "data-matrx-table-tools-keep-open": "", children: [
-                            /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
-                              "input",
-                              {
-                                type: "search",
-                                value: query.search,
-                                placeholder: "Search",
-                                "aria-label": "Search records",
-                                onChange: (event) => {
-                                  const search = event.target.value;
-                                  setQuery((held) => ({ ...held, search, page: 1 }));
-                                },
-                                className: "h-10 w-full min-w-0 rounded-md border border-input bg-background px-2 text-foreground placeholder:text-muted-foreground",
-                                style: { fontSize: "16px" }
-                              }
-                            ),
-                            /* @__PURE__ */ (0, import_jsx_runtime42.jsxs)("label", { className: "flex items-center gap-2 text-xs text-muted-foreground", "data-records-grid-sheet-sort": "", children: [
-                              /* @__PURE__ */ (0, import_jsx_runtime42.jsx)("span", { className: "shrink-0", children: "Sort by" }),
-                              /* @__PURE__ */ (0, import_jsx_runtime42.jsxs)(
-                                "select",
-                                {
-                                  "aria-label": "Sort by",
-                                  value: query.sort ? `${query.sort.id}:${query.sort.direction}` : "",
-                                  onChange: (event) => {
-                                    const [id, direction] = event.target.value.split(":");
-                                    setQuery((held) => ({
-                                      ...held,
-                                      page: 1,
-                                      sort: id ? { id, direction: direction === "desc" ? "desc" : "asc" } : null
-                                    }));
-                                  },
-                                  className: "h-10 min-w-0 flex-1 rounded-md border border-input bg-background px-2 text-foreground",
-                                  style: { fontSize: "16px" },
-                                  children: [
-                                    /* @__PURE__ */ (0, import_jsx_runtime42.jsx)("option", { value: "", children: "No sort" }),
-                                    ordered.flatMap((field2) => [
-                                      /* @__PURE__ */ (0, import_jsx_runtime42.jsx)("option", { value: `${field2.key}:asc`, children: `${fieldName(field2)} \u2191` }, `${field2.key}:asc`),
-                                      /* @__PURE__ */ (0, import_jsx_runtime42.jsx)("option", { value: `${field2.key}:desc`, children: `${fieldName(field2)} \u2193` }, `${field2.key}:desc`)
-                                    ])
-                                  ]
-                                }
-                              )
-                            ] }),
-                            controls.sheetTools
-                          ] }),
-                          ...sheetExtras ? { sheetExtras } : {}
-                        } : {}
-                      }
-                    } : {}
-                  }
+                  toolbar: tableToolbar
                 },
                 `records-grid-${tableId}:${openingKey}`
               )
@@ -12314,6 +12431,58 @@ function Grid({
     }
   ) });
 }
+var DETAIL_OFF = { enabled: false };
+var WINDOW_OFF = { enabled: false };
+var VIRTUALIZE_FILLED = { threshold: 40 };
+function menuFace(items) {
+  return JSON.stringify(items, (_key, value) => typeof value === "function" ? "\u0192" : value);
+}
+function menuThroughLatest(items, at, latest) {
+  return items.map((item) => {
+    const path = `${at}/${item.id}`;
+    return {
+      ...item,
+      ...item.onSelect ? { onSelect: () => latest.get(path)?.() } : {},
+      ...item.submenu ? { submenu: menuThroughLatest(item.submenu, path, latest) } : {}
+    };
+  });
+}
+function bindLatest(items, at, latest) {
+  for (const item of items) {
+    const path = `${at}/${item.id}`;
+    if (item.onSelect) latest.set(path, item.onSelect);
+    if (item.submenu) bindLatest(item.submenu, path, latest);
+  }
+}
+function holdHeaderMenu(held, latest, key, items) {
+  if (!items) return items;
+  const at = `menu:${key}`;
+  bindLatest(items, at, latest);
+  const sig = menuFace(items);
+  const was = held.get(at);
+  if (was && was.sig === sig) return was.value;
+  const value = menuThroughLatest(items, at, latest);
+  held.set(at, { sig, value });
+  return value;
+}
+function holdByContent(held, at, value) {
+  if (value === void 0) return value;
+  const sig = JSON.stringify(value);
+  const was = held.get(at);
+  if (was && was.sig === sig) return was.value;
+  held.set(at, { sig, value });
+  return value;
+}
+function sameColumns(a, b) {
+  if (a === b) return true;
+  if (a.length !== b.length) return false;
+  return a.every((column, i) => {
+    const other = b[i];
+    if (column === other) return true;
+    const keys = Object.keys(column);
+    return keys.length === Object.keys(other).length && keys.every((key) => Object.is(column[key], other[key]));
+  });
+}
 function withHeaderMenus(columns, menuFor, filterFor) {
   return columns.map((column) => {
     const items = menuFor(String(column.id));