@ai-matrx/records-ui 0.93.83 → 0.93.85

package/CHANGELOG.md

@@ -1,5 +1,16 @@
 # Changelog — @ai-matrx/records-ui
 
+## 0.93.85
+### Unreleased
+
+- **The toolbar row's last buttons are never cut: Share folds into the table's menu** (merged-grid leftovers, 2026-09-30): in a table window at its smallest size the row needed 3 px more than it had even with everything folded, and the table menu's button was cut. `toolbarFit` gains fold 4 — the page's own Share moves into the table's menu (where a phone already has it) and comes back when the row has room. A host that draws the page's actions in its own header is unchanged. Proof: `toolbarFit.test.tsx`, red on 0.93.84 (2 of 3). Consumer action: none.
+
+## 0.93.84
+
+Automatic changed-only republish (docs/metadata drift since the last tag — see
+`git diff npm/records-ui/v0.93.83..npm/records-ui/v0.93.84 -- apps/shared/records-ui`).
+No source changes intended and no consumer action required.
+
 ## 0.93.83
 
 Automatic changed-only republish (docs/metadata drift since the last tag — see

package/dist/index.cjs

@@ -1600,111 +1600,114 @@ function RelationPicker({ field: field2, value, onChange, disabled, id, classNam
     if (q === "") return true;
     return `${titleOf(row.id)} ${apart.get(row.id) ?? ""}`.toLowerCase().includes(q);
   });
-  return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: (0, import_design_system4.cn)("flex flex-wrap items-center gap-1", className), children: [
-    picked.map((recordId) => /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
-      RecordChip,
-      {
-        title: titleOf(recordId),
-        ...disabled ? {} : { onRemove: () => toggle(recordId) }
-      },
-      recordId
-    )),
-    disabled ? null : (
-      // THE ONE "PICK OR ADD" BUILDER (PickOrAdd.tsx) — the choice editor draws the same one.
-      /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
-        PickOrAdd,
+  return (
+    // Never wider than where it is drawn (a grid cell beside a sticky column: B3-07) — chips truncate, the button wraps.
+    /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: (0, import_design_system4.cn)("flex min-w-0 max-w-full flex-wrap items-center gap-1", className), children: [
+      picked.map((recordId) => /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+        RecordChip,
         {
-          triggerId: id,
-          triggerLabel: `Pick for ${fieldName(field2)}`,
-          triggerText: picked.length === 0 ? "Pick" : "Change",
-          open,
-          onOpenChange: setOpen,
-          search,
-          onSearch: setSearch,
-          items: visible.map((row) => ({
-            id: row.id,
-            label: titleOf(row.id),
-            detail: apart.get(row.id) ?? null,
-            picked: picked.includes(row.id),
-            title: apart.has(row.id) ? `${titleOf(row.id)} \u2014 ${apart.get(row.id)}` : titleOf(row.id),
-            attrs: { "data-relation-candidate": row.id }
-          })),
-          onPick: toggle,
-          notice: /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(import_jsx_runtime5.Fragment, { children: [
-            refusal2 ? /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(RefusalLine, { error: refusal2, className: "p-2" }) : null,
-            !rows && !refusal2 ? /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("p", { className: "p-2 text-xs text-muted-foreground", children: "Reading\u2026" }) : null,
-            full ? /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("p", { className: "p-2 text-xs text-muted-foreground", children: [
-              fieldName(field2),
-              " can point at ",
-              field2.relation_max,
-              " at most. Remove one to add another."
-            ] }) : null
-          ] }),
-          empty: rows ? /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("p", { className: "p-2 text-xs text-muted-foreground", children: "Nothing in that table matches." }) : null,
-          add: allowCreate && !full && !targetRefusal && target && !creating ? {
-            label: search.trim() !== "" ? `Create \u201C${search.trim()}\u201D` : `New ${targetWord}`,
-            disabled: busy,
-            // TYPED SOMETHING THAT IS NOT THERE? That IS the name. The champions
-            // (Airtable, Notion) make the search text the new record's title in one
-            // press; an empty box asks for one.
-            onAdd: () => {
-              if (search.trim() !== "") void create(search);
-              else {
-                setNewTitle("");
-                setCreating(true);
+          title: titleOf(recordId),
+          ...disabled ? {} : { onRemove: () => toggle(recordId) }
+        },
+        recordId
+      )),
+      disabled ? null : (
+        // THE ONE "PICK OR ADD" BUILDER (PickOrAdd.tsx) — the choice editor draws the same one.
+        /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+          PickOrAdd,
+          {
+            triggerId: id,
+            triggerLabel: `Pick for ${fieldName(field2)}`,
+            triggerText: picked.length === 0 ? "Pick" : "Change",
+            open,
+            onOpenChange: setOpen,
+            search,
+            onSearch: setSearch,
+            items: visible.map((row) => ({
+              id: row.id,
+              label: titleOf(row.id),
+              detail: apart.get(row.id) ?? null,
+              picked: picked.includes(row.id),
+              title: apart.has(row.id) ? `${titleOf(row.id)} \u2014 ${apart.get(row.id)}` : titleOf(row.id),
+              attrs: { "data-relation-candidate": row.id }
+            })),
+            onPick: toggle,
+            notice: /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(import_jsx_runtime5.Fragment, { children: [
+              refusal2 ? /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(RefusalLine, { error: refusal2, className: "p-2" }) : null,
+              !rows && !refusal2 ? /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("p", { className: "p-2 text-xs text-muted-foreground", children: "Reading\u2026" }) : null,
+              full ? /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("p", { className: "p-2 text-xs text-muted-foreground", children: [
+                fieldName(field2),
+                " can point at ",
+                field2.relation_max,
+                " at most. Remove one to add another."
+              ] }) : null
+            ] }),
+            empty: rows ? /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("p", { className: "p-2 text-xs text-muted-foreground", children: "Nothing in that table matches." }) : null,
+            add: allowCreate && !full && !targetRefusal && target && !creating ? {
+              label: search.trim() !== "" ? `Create \u201C${search.trim()}\u201D` : `New ${targetWord}`,
+              disabled: busy,
+              // TYPED SOMETHING THAT IS NOT THERE? That IS the name. The champions
+              // (Airtable, Notion) make the search text the new record's title in one
+              // press; an empty box asks for one.
+              onAdd: () => {
+                if (search.trim() !== "") void create(search);
+                else {
+                  setNewTitle("");
+                  setCreating(true);
+                }
               }
-            }
-          } : null,
-          foot: !allowCreate || full ? void 0 : targetRefusal ? /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(RefusalLine, { error: targetRefusal, className: "p-2" }) : !target ? /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("p", { className: "p-2 text-xs text-muted-foreground", children: "Reading that table\u2026" }) : creating ? /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: "flex items-center gap-1 p-1", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
-              import_design_system4.BasicInput,
-              {
-                autoFocus: true,
-                value: newTitle,
-                onChange: (e) => setNewTitle(e.target.value),
-                onKeyDown: (e) => {
-                  if (e.key === "Enter") {
-                    e.preventDefault();
-                    void create(newTitle);
+            } : null,
+            foot: !allowCreate || full ? void 0 : targetRefusal ? /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(RefusalLine, { error: targetRefusal, className: "p-2" }) : !target ? /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("p", { className: "p-2 text-xs text-muted-foreground", children: "Reading that table\u2026" }) : creating ? /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: "flex items-center gap-1 p-1", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+                import_design_system4.BasicInput,
+                {
+                  autoFocus: true,
+                  value: newTitle,
+                  onChange: (e) => setNewTitle(e.target.value),
+                  onKeyDown: (e) => {
+                    if (e.key === "Enter") {
+                      e.preventDefault();
+                      void create(newTitle);
+                    }
+                  },
+                  placeholder: `New ${targetWord}`,
+                  className: "h-7 flex-1 text-xs",
+                  "aria-label": `Name the new ${targetWord}`
+                }
+              ),
+              /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+                import_design_system4.Button,
+                {
+                  type: "button",
+                  size: "sm",
+                  variant: "default",
+                  disabled: busy || newTitle.trim() === "",
+                  onClick: () => void create(newTitle),
+                  children: busy ? "Creating\u2026" : "Create"
+                }
+              )
+            ] }) : void 0,
+            footNote: allowCreate && !full && createRefusal ? (
+              // The typed title is still in the search box: the notice owns the
+              // two doors out (lane REFUSAL-SWEEP).
+              /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+                RefusalNotice,
+                {
+                  error: createRefusal,
+                  className: "mt-1 max-w-72",
+                  onKeepEditing: () => setCreateRefusal(null),
+                  onDiscard: () => {
+                    setCreateRefusal(null);
+                    setSearch("");
                   }
-                },
-                placeholder: `New ${targetWord}`,
-                className: "h-7 flex-1 text-xs",
-                "aria-label": `Name the new ${targetWord}`
-              }
-            ),
-            /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
-              import_design_system4.Button,
-              {
-                type: "button",
-                size: "sm",
-                variant: "default",
-                disabled: busy || newTitle.trim() === "",
-                onClick: () => void create(newTitle),
-                children: busy ? "Creating\u2026" : "Create"
-              }
-            )
-          ] }) : void 0,
-          footNote: allowCreate && !full && createRefusal ? (
-            // The typed title is still in the search box: the notice owns the
-            // two doors out (lane REFUSAL-SWEEP).
-            /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
-              RefusalNotice,
-              {
-                error: createRefusal,
-                className: "mt-1 max-w-72",
-                onKeepEditing: () => setCreateRefusal(null),
-                onDiscard: () => {
-                  setCreateRefusal(null);
-                  setSearch("");
                 }
-              }
-            )
-          ) : null
-        }
+              )
+            ) : null
+          }
+        )
       )
-    )
-  ] });
+    ] })
+  );
 }
 
 // src/gridAttachments.tsx
@@ -5591,9 +5594,10 @@ function OpenCell({
     {
       ref: host,
       "data-matrx-cell-control": "",
+      "data-matrx-cell-fill": "",
       "data-matrx-cell-editor": "",
       tabIndex: -1,
-      className: "relative z-[25] flex w-full min-w-[10rem] flex-col gap-1 outline-none",
+      className: "relative z-[25] flex w-full min-w-0 max-w-full flex-col gap-1 outline-none",
       onDoubleClick: (event) => event.stopPropagation(),
       onKeyDown: (event) => {
         if (event.target?.closest?.("[data-refusal-notice], [data-records-choice-ask]")) return;
@@ -31575,13 +31579,14 @@ function ViewFilter({ tableId, view, onApply, className }) {
 
 // src/toolbarFit.ts
 var import_react188 = require("react");
-var FOLDED_GUESS = { look: 104, chooser: 96, tools: 120 };
+var FOLDED_GUESS = { look: 104, chooser: 96, tools: 120, share: 0 };
 function toolbarFold(input) {
   const { available, needsNow, gap, folded } = input;
   const pieces = [
     { piece: input.look, stage: 1, guess: FOLDED_GUESS.look },
     { piece: input.chooser, stage: 2, guess: FOLDED_GUESS.chooser },
-    ...input.tools ? [{ piece: input.tools, stage: 3, guess: FOLDED_GUESS.tools }] : []
+    ...input.tools ? [{ piece: input.tools, stage: 3, guess: FOLDED_GUESS.tools }] : [],
+    ...input.tools && input.share ? [{ piece: input.share, stage: 4, guess: FOLDED_GUESS.share }] : []
   ];
   const widthAt = ({ piece, stage, guess }, fold) => {
     if (piece.now === 0 && piece.full === null) return 0;
@@ -31590,7 +31595,7 @@ function toolbarFold(input) {
   };
   const withGap = (width) => width > 0 ? width + gap : 0;
   const base = pieces.reduce((rest, p) => rest - withGap(p.piece.now), needsNow);
-  const stages = input.tools ? [0, 1, 2, 3] : [0, 1, 2];
+  const stages = input.tools ? input.share ? [0, 1, 2, 3, 4] : [0, 1, 2, 3] : [0, 1, 2];
   const needs = stages.map((fold) => pieces.reduce((sum, p) => sum + withGap(widthAt(p, fold)), base));
   const fits = needs.findIndex((need) => need <= available + 0.5);
   if (fits >= 0) return stages[fits];
@@ -31631,9 +31636,10 @@ function useToolbarFit(row) {
     const widths = {
       look: { full: null, folded: null },
       chooser: { full: null, folded: null },
-      tools: { full: null, folded: null }
+      tools: { full: null, folded: null },
+      share: { full: null, folded: null }
     };
-    const stageOf = { look: 1, chooser: 2, tools: 3 };
+    const stageOf = { look: 1, chooser: 2, tools: 3, share: 4 };
     let current = 0;
     let pending = 0;
     let stopped = false;
@@ -31643,7 +31649,7 @@ function useToolbarFit(row) {
       const available = row.clientWidth;
       if (available <= 0) return;
       const read = (name) => {
-        const el = name === "tools" ? row.querySelector(":scope > [data-toolbar-fit-slot]") : row.querySelector(`:scope > [data-toolbar-fit="${name}"]`);
+        const el = name === "tools" ? row.querySelector(":scope > [data-toolbar-fit-slot]") : name === "share" ? row.querySelector('[data-toolbar-fit="share"]') : row.querySelector(`:scope > [data-toolbar-fit="${name}"]`);
         const now = !el ? 0 : name === "tools" ? slotNeeds(el) : naturalWidth(el);
         const w = widths[name];
         if (el && now > 0) {
@@ -31656,8 +31662,11 @@ function useToolbarFit(row) {
       const look = read("look");
       const chooser = read("chooser");
       const tools = read("tools");
+      const shareEl = row.querySelector('[data-toolbar-fit="share"]');
+      const shareRead = shareEl ? read("share") : null;
+      const share = shareRead && (shareRead.now > 0 || shareRead.full !== null) ? shareRead : void 0;
       const { needs, gap } = rowNeeds(row);
-      const next = toolbarFold({ available, needsNow: needs, gap, folded: current, look, chooser, tools });
+      const next = toolbarFold({ available, needsNow: needs, gap, folded: current, look, chooser, tools, share });
       if (next !== current) {
         current = next;
         setFold(next);
@@ -32074,6 +32083,7 @@ function TablePage({
   const chooserInline = !designated && !phone && toolbarFold2 < 2;
   const chooserCompact = !designated && !phone && toolbarFold2 >= 2;
   const controlsInSheet = phone && !designated;
+  const shareInMenu = phone || toolbarFold2 >= 4;
   (0, import_react189.useEffect)(() => {
     if (face.kind !== "designated") return;
     if (hostFromLink || opened.layout || layoutChosen) return;
@@ -32298,7 +32308,7 @@ function TablePage({
     rights.share && canShare ? /* @__PURE__ */ (0, import_jsx_runtime105.jsx)(import_design_system96.Button, { size: "sm", variant: "ghost", className: "h-8", onClick: () => setShareAsked((n) => n + 1), "data-table-sheet-share": "", children: "Share\u2026" }) : null
   ] }) : void 0;
   const pageActions = /* @__PURE__ */ (0, import_jsx_runtime105.jsxs)(import_jsx_runtime105.Fragment, { children: [
-    organizationId ? /* @__PURE__ */ (0, import_jsx_runtime105.jsx)(
+    organizationId ? /* @__PURE__ */ (0, import_jsx_runtime105.jsx)("span", { className: shareInMenu ? "hidden" : "flex shrink-0 items-center", "data-toolbar-fit": "share", children: /* @__PURE__ */ (0, import_jsx_runtime105.jsx)(
       ShareControl,
       {
         kind: "table",
@@ -32308,10 +32318,10 @@ function TablePage({
         may: rights.share,
         whyNot: rights.read ? rights.why("share") : void 0,
         initiallyOpen: shareFromLink || shareAsked > 0,
-        ...phone ? { className: "hidden" } : {}
+        ...shareInMenu ? { className: "hidden" } : {}
       },
-      phone ? `share-${shareAsked}` : "share"
-    ) : null,
+      shareInMenu ? `share-${shareAsked}` : "share"
+    ) }, "share") : null,
     /* @__PURE__ */ (0, import_jsx_runtime105.jsxs)(import_design_system96.DropdownMenu, { children: [
       /* @__PURE__ */ (0, import_jsx_runtime105.jsx)(import_design_system96.DropdownMenuTrigger, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime105.jsx)(import_design_system96.Button, { size: "sm", variant: "ghost", "aria-label": "Table menu", title: "Table menu", "data-table-menu": "", children: /* @__PURE__ */ (0, import_jsx_runtime105.jsxs)("svg", { viewBox: "0 0 24 24", className: "h-4 w-4", fill: "currentColor", "aria-hidden": "true", children: [
         /* @__PURE__ */ (0, import_jsx_runtime105.jsx)("circle", { cx: "5", cy: "12", r: "1.75" }),
@@ -32334,7 +32344,7 @@ function TablePage({
           },
           entry.key
         )),
-        phone && rights.share && canShare ? /* @__PURE__ */ (0, import_jsx_runtime105.jsxs)(import_jsx_runtime105.Fragment, { children: [
+        shareInMenu && rights.share && canShare ? /* @__PURE__ */ (0, import_jsx_runtime105.jsxs)(import_jsx_runtime105.Fragment, { children: [
           /* @__PURE__ */ (0, import_jsx_runtime105.jsx)(import_design_system96.DropdownMenuSeparator, {}),
           /* @__PURE__ */ (0, import_jsx_runtime105.jsx)(import_design_system96.DropdownMenuItem, { onSelect: () => setShareAsked((n) => n + 1), "data-table-menu-share": "", children: "Share\u2026" })
         ] }) : null,