@ai-matrx/records-ui 0.90.0 → 0.90.2

package/CHANGELOG.md

@@ -1,5 +1,32 @@
 # Changelog — @ai-matrx/records-ui
 
+## 0.90.2
+### Unreleased
+
+### Changed — a removal says it can be restored from Trash (lane STORE-RESTORE-DOORS, 2026-09-26)
+- Removing a column (`FieldEditor`, `TableSettings`) confirms with the shared `archiveConfirmSentence`
+  plus "Its values stay in every record and come back with it." — the store now brings a removed Field
+  back from Trash with its values (`custom.field_restore`); the old copy said the values lived only in history.
+- `DashboardCanvas`: removing a dashboard takes a second press with the same sentence (it was one press
+  labelled "Delete"); it comes back from Trash through `custom.dashboard_restore`.
+- `NotifyRuleEditor`: "Stop telling me" archives the subscription's Rule and now asks once, naming Trash
+  (`custom.rule_restore`).
+- Consumer action: none.
+
+## 0.90.1 (2026-09-26 — merged grid 6n/6o live-walk fixes; needs @ai-matrx/design-system 0.44.3)
+
+- **The header's "+" is a button of its own, not a button inside the column-reorder button**
+  (found live: a real click on "+" did nothing, and React reported a nested button). The column
+  declares `reorderable: false` (design-system 0.44.3), so its label is never a drag handle and it
+  never moves among the data columns.
+- **Phone (6o), found live at 375 px:** the Tools button was scrolled past search and a 144 px "No
+  groups" picker, off the right edge. Search and Tools now sit side by side at the START of the row
+  (the same search query), and an ungrouped view draws no group picker on a phone.
+- **A key is never spread into JSX** (found live on the merged grid): `TablePage` spread
+  `{ key: "share" }` into `<ShareControl>`; the key is passed directly now, and
+  `a-key-is-never-spread-into-jsx.test.tsx` is a census of this package's source (it names the old
+  line on 0.90.0).
+
 ## 0.90.0 (2026-09-26 — merged grid tranches 6n + 6o, choice colours by option, DOM budget; needs @ai-matrx/records 0.58.22)
 
 - **6n · a row is added where you are.** The merged grid draws an "Add row" line under the last

package/dist/index.cjs

@@ -269,6 +269,8 @@ __export(src_exports, {
   formFromSummary: () => formFromSummary,
   formPresentation: () => formPresentation,
   formatForField: () => formatForField,
+  gridContextKey: () => gridContextKey,
+  gridContextSnapshot: () => gridContextSnapshot,
   groupInbox: () => groupInbox,
   groupLabel: () => groupLabel,
   handOrderLine: () => handOrderLine,
@@ -5349,9 +5351,8 @@ function FieldEditor({ tableId, field: field2, onSaved, onCancel, onRemoved, cla
       onCancel ? /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(import_design_system17.Button, { size: "sm", variant: "ghost", onClick: onCancel, children: "Cancel" }) : null,
       field2 ? /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("div", { className: "ml-auto flex items-center gap-2", children: askingToRemove ? /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(import_jsx_runtime21.Fragment, { children: [
         /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)("span", { className: "text-destructive", children: [
-          "Removing ",
-          fieldName(field2),
-          " takes it off every record of this table. The values stay in the record's history and nothing else is deleted."
+          archiveConfirmSentence(`the field \u201C${fieldName(field2)}\u201D`),
+          " Its values stay in every record and come back with it."
         ] }),
         /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(import_design_system17.Button, { size: "sm", variant: "destructive", disabled: mutation.saving, onClick: () => void remove(), children: "Remove it" }),
         /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(import_design_system17.Button, { size: "sm", variant: "ghost", onClick: () => setAskingToRemove(false), children: "Keep it" })
@@ -7316,6 +7317,8 @@ function addColumnColumn(onAdd) {
     sortable: false,
     filter: false,
     hideable: false,
+    // A control, never a drag handle: no button inside the reorder button, and it stays last.
+    reorderable: false,
     resizable: false,
     compact: true,
     width: 40
@@ -10653,6 +10656,7 @@ function Grid({
     const view = presentation.grouping;
     const field2 = view?.field ?? null;
     if (field2 === null && !onPresentationChange) return null;
+    if (field2 === null && merged && phone) return null;
     const aggregates = view && Object.keys(view.aggregates ?? {}).length > 0 ? view.aggregates : field2 ? { [field2]: { kind: "count" } } : void 0;
     return {
       columnId: field2,
@@ -10683,7 +10687,7 @@ function Grid({
         }
       } : {}
     };
-  }, [presentation, onPresentationChange, writeLook]);
+  }, [presentation, onPresentationChange, writeLook, merged, phone]);
   const labelOfField = (0, import_react57.useCallback)(
     (key) => {
       const held = (fields.data ?? []).find((f) => f.key === key);
@@ -11065,6 +11069,41 @@ function Grid({
                   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_runtime39.jsxs)("div", { className: "flex min-w-0 flex-1 items-center gap-1.5", "data-records-grid-phone-search": "", children: [
+                        /* @__PURE__ */ (0, import_jsx_runtime39.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" }
+                          }
+                        ),
+                        /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
+                          import_design_system32.Button,
+                          {
+                            size: "sm",
+                            variant: "outline",
+                            className: "h-8 shrink-0",
+                            "data-records-grid-tools": "",
+                            "aria-haspopup": "dialog",
+                            onClick: () => setToolsOpen(true),
+                            children: "Tools"
+                          }
+                        )
+                      ] })
+                    } : {},
                     /* 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 } : {},
@@ -11115,32 +11154,18 @@ function Grid({
                         )
                       ] });
                       if (!merged || !phone) return all;
-                      return /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)(import_jsx_runtime39.Fragment, { children: [
-                        /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
-                          import_design_system32.Button,
-                          {
-                            size: "sm",
-                            variant: "outline",
-                            className: "h-8 shrink-0",
-                            "data-records-grid-tools": "",
-                            "aria-haspopup": "dialog",
-                            onClick: () => setToolsOpen(true),
-                            children: "Tools"
-                          }
-                        ),
-                        /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(import_design_system32.BottomSheet, { open: toolsOpen, onOpenChange: setToolsOpen, title: "Table tools", surface: "solid", children: /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
-                          "div",
-                          {
-                            "data-records-grid-tools-sheet": "",
-                            className: "flex flex-col items-stretch gap-1 px-3 pb-6 [&>button]:justify-start [&_button]:min-h-10",
-                            onClickCapture: (event) => {
-                              const target = event.target.closest("button");
-                              if (target && !target.hasAttribute("aria-haspopup")) setToolsOpen(false);
-                            },
-                            children: all
-                          }
-                        ) })
-                      ] });
+                      return /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(import_jsx_runtime39.Fragment, { children: /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(import_design_system32.BottomSheet, { open: toolsOpen, onOpenChange: setToolsOpen, title: "Table tools", surface: "solid", children: /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
+                        "div",
+                        {
+                          "data-records-grid-tools-sheet": "",
+                          className: "flex flex-col items-stretch gap-1 px-3 pb-6 [&>button]:justify-start [&_button]:min-h-10",
+                          onClickCapture: (event) => {
+                            const target = event.target.closest("button");
+                            if (target && !target.hasAttribute("aria-haspopup")) setToolsOpen(false);
+                          },
+                          children: all
+                        }
+                      ) }) });
                     })()
                   }
                 },
@@ -13723,9 +13748,8 @@ function TableSettings({
     shape.error ? /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(RefusalNotice, { error: shape.error }) : null,
     askingToRemove ? /* @__PURE__ */ (0, import_jsx_runtime48.jsxs)("div", { className: "flex flex-wrap items-center gap-2 rounded border border-destructive/40 px-2 py-1.5", children: [
       /* @__PURE__ */ (0, import_jsx_runtime48.jsxs)("span", { className: "text-destructive", children: [
-        "Removing ",
-        fieldName(askingToRemove),
-        " takes it off every record of this table. The values stay in each record's history and nothing else is deleted."
+        archiveConfirmSentence(`the field \u201C${fieldName(askingToRemove)}\u201D`),
+        " Its values stay in every record and come back with it."
       ] }),
       /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(
         import_design_system41.Button,
@@ -21413,6 +21437,7 @@ function NotifyRuleEditor({ tableId, seed, chosenRuleId, onChoose, className })
   const [views, setViews] = (0, import_react126.useState)(null);
   const [error, setError] = (0, import_react126.useState)(null);
   const [busy, setBusy] = (0, import_react126.useState)(false);
+  const [stopping, setStopping] = (0, import_react126.useState)(null);
   const load = (0, import_react126.useCallback)(async () => {
     const [held, offered] = await Promise.all([
       // THE PERSON'S OWN DOOR, not the notifier's. It answers what is addressed
@@ -21509,6 +21534,7 @@ function NotifyRuleEditor({ tableId, seed, chosenRuleId, onChoose, className })
     await load();
   }
   async function unsubscribe(ruleId) {
+    setStopping(null);
     setBusy(true);
     const deleted = await client.recordDelete({ record_id: ruleId });
     setBusy(false);
@@ -21570,14 +21596,18 @@ function NotifyRuleEditor({ tableId, seed, chosenRuleId, onChoose, className })
           children: "Use for this form"
         }
       ) : null,
-      rights.write && !(onChoose && held.rule_id === chosenRuleId) ? /* @__PURE__ */ (0, import_jsx_runtime73.jsx)(
+      rights.write && !(onChoose && held.rule_id === chosenRuleId) && stopping === held.rule_id ? /* @__PURE__ */ (0, import_jsx_runtime73.jsxs)("span", { className: (0, import_design_system65.cn)("flex flex-wrap items-center gap-2", onChoose ? void 0 : "ml-auto"), children: [
+        /* @__PURE__ */ (0, import_jsx_runtime73.jsx)("span", { className: "text-xs text-destructive", children: archiveConfirmSentence("this subscription") }),
+        /* @__PURE__ */ (0, import_jsx_runtime73.jsx)(import_design_system65.Button, { size: "sm", variant: "destructive", disabled: busy, onClick: () => void unsubscribe(held.rule_id), children: "Stop telling me" }),
+        /* @__PURE__ */ (0, import_jsx_runtime73.jsx)(import_design_system65.Button, { size: "sm", variant: "ghost", onClick: () => setStopping(null), children: "Keep it" })
+      ] }) : rights.write && !(onChoose && held.rule_id === chosenRuleId) ? /* @__PURE__ */ (0, import_jsx_runtime73.jsx)(
         import_design_system65.Button,
         {
           size: "sm",
           variant: "ghost",
           className: onChoose ? void 0 : "ml-auto",
           disabled: busy,
-          onClick: () => void unsubscribe(held.rule_id),
+          onClick: () => setStopping(held.rule_id),
           children: "Stop telling me"
         }
       ) : null
@@ -23313,6 +23343,7 @@ function DashboardCanvas({ tableId, activeDashboardId, filter, className }) {
   const [boards, setBoards] = (0, import_react139.useState)(null);
   const [error, setError] = (0, import_react139.useState)(null);
   const [activeId, setActiveId] = (0, import_react139.useState)(activeDashboardId ?? null);
+  const [askingToRemove, setAskingToRemove] = (0, import_react139.useState)(null);
   const [run, setRun] = (0, import_react139.useState)(null);
   const [running, setRunning] = (0, import_react139.useState)(false);
   const [question, setQuestion] = (0, import_react139.useState)("");
@@ -23423,6 +23454,7 @@ function DashboardCanvas({ tableId, activeDashboardId, filter, className }) {
     else setError(again.error);
   }, [client, activeId, filter, grain]);
   async function remove(target) {
+    setAskingToRemove(null);
     const gone = await client.dashboardDelete({ dashboard_id: target.id });
     if (!gone.ok) {
       setError(gone.error);
@@ -23511,7 +23543,11 @@ function DashboardCanvas({ tableId, activeDashboardId, filter, className }) {
             children: scheduling ? "Done" : "Send on a schedule"
           }
         ),
-        rights.admin ? /* @__PURE__ */ (0, import_jsx_runtime80.jsx)(import_design_system72.Button, { size: "sm", variant: "ghost", onClick: () => void remove(board), children: "Delete" }) : null
+        rights.admin && askingToRemove === board.id ? /* @__PURE__ */ (0, import_jsx_runtime80.jsxs)(import_jsx_runtime80.Fragment, { children: [
+          /* @__PURE__ */ (0, import_jsx_runtime80.jsx)("span", { className: "text-xs text-destructive", children: archiveConfirmSentence(`the dashboard \u201C${board.name}\u201D`) }),
+          /* @__PURE__ */ (0, import_jsx_runtime80.jsx)(import_design_system72.Button, { size: "sm", variant: "destructive", onClick: () => void remove(board), children: "Remove it" }),
+          /* @__PURE__ */ (0, import_jsx_runtime80.jsx)(import_design_system72.Button, { size: "sm", variant: "ghost", onClick: () => setAskingToRemove(null), children: "Keep it" })
+        ] }) : rights.admin ? /* @__PURE__ */ (0, import_jsx_runtime80.jsx)(import_design_system72.Button, { size: "sm", variant: "ghost", onClick: () => setAskingToRemove(board.id), children: "Remove" }) : null
       ] }) : null
     ] }),
     board && scheduling ? (
@@ -26929,8 +26965,9 @@ function TablePage({
         name: table.data?.name,
         may: rights.share,
         initiallyOpen: shareFromLink || shareAsked > 0,
-        ...phone ? { key: `share-${shareAsked}`, className: "hidden" } : { key: "share" }
-      }
+        ...phone ? { className: "hidden" } : {}
+      },
+      phone ? `share-${shareAsked}` : "share"
     ),
     /* @__PURE__ */ (0, import_jsx_runtime94.jsxs)(import_design_system85.DropdownMenu, { children: [
       /* @__PURE__ */ (0, import_jsx_runtime94.jsx)(import_design_system85.DropdownMenuTrigger, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime94.jsx)(import_design_system85.Button, { size: "sm", variant: "ghost", "aria-label": "Table menu", title: "Table menu", "data-table-menu": "", children: /* @__PURE__ */ (0, import_jsx_runtime94.jsxs)("svg", { viewBox: "0 0 24 24", className: "h-4 w-4", fill: "currentColor", "aria-hidden": "true", children: [