@ai-matrx/records-ui 0.93.84 → 0.93.86

package/CHANGELOG.md

@@ -1,5 +1,15 @@
 # Changelog — @ai-matrx/records-ui
 
+## 0.93.86
+### Unreleased
+
+- **Share folds into the table's menu only when the row's own buttons do not fit** (merged-grid leftovers, 2026-09-30): fold 4 (0.93.85) also fired whenever the layout's slot held more than it could show, so a 736 px chat artifact lost Share from its row for nothing — the slot scrolls and keeps its pinned controls whole. Fold 4 now asks only about the fixed pieces (everything outside the slot, plus the slot at its least). Proof: `toolbarFit.test.tsx` ("a slot that holds more than fits is not a reason to move Share"), red on 0.93.85. Consumer action: none.
+
+## 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

package/dist/index.cjs

@@ -31580,6 +31580,7 @@ function ViewFilter({ tableId, view, onApply, className }) {
 // src/toolbarFit.ts
 var import_react188 = require("react");
 var FOLDED_GUESS = { look: 104, chooser: 96, tools: 120 };
+var SLOT_MIN = 36;
 function toolbarFold(input) {
   const { available, needsNow, gap, folded } = input;
   const pieces = [
@@ -31593,13 +31594,18 @@ function toolbarFold(input) {
     return piece.full ?? piece.now;
   };
   const withGap = (width) => width > 0 ? width + gap : 0;
-  const base = pieces.reduce((rest, p) => rest - withGap(p.piece.now), needsNow);
+  const shareNow = input.share ? withGap(input.share.now) : 0;
+  const base = pieces.reduce((rest, p) => rest - withGap(p.piece.now), needsNow - shareNow);
   const stages = input.tools ? [0, 1, 2, 3] : [0, 1, 2];
-  const needs = stages.map((fold) => pieces.reduce((sum, p) => sum + withGap(widthAt(p, fold)), base));
+  const shareOn = input.share ? withGap(input.share.full ?? input.share.now) : 0;
+  const needs = stages.map((fold) => pieces.reduce((sum, p) => sum + withGap(widthAt(p, fold)), base + shareOn));
   const fits = needs.findIndex((need) => need <= available + 0.5);
   if (fits >= 0) return stages[fits];
   const least = Math.min(...needs);
-  return stages[needs.findIndex((need) => need <= least + 0.5)];
+  const most = stages[needs.findIndex((need) => need <= least + 0.5)];
+  if (most < 3 || !input.tools || !input.share) return most;
+  const fixed = pieces.reduce((sum, p) => sum + withGap(p.stage === 3 ? SLOT_MIN : widthAt(p, 3)), base + shareOn);
+  return fixed > available + 0.5 ? 4 : 3;
 }
 function naturalWidth(el) {
   const html = el;
@@ -31635,9 +31641,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;
@@ -31647,7 +31654,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) {
@@ -31660,8 +31667,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);
@@ -32078,6 +32088,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;
@@ -32302,7 +32313,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",
@@ -32312,10 +32323,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" }),
@@ -32338,7 +32349,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,