@ai-matrx/detail 0.1.68 → 0.1.70

package/CHANGELOG.md

@@ -1,5 +1,12 @@
 # Changelog — @ai-matrx/detail
 
+## 0.1.69
+### A shell with its own menu gets the actions as data
+
+- `DetailShellSlots.menuActions: DetailMenuAction[]` (open as window / docked / page, copy record id — the overflow menu's entries as `{ id, label, onSelect }`) and `DetailShellSlots.navActions` (previous / next only). `DetailActions` takes `optional="none"`; `useDetailMenuActions(core)` is exported.
+- Why: a record open as a canvas tab drew "More record actions" (…) beside the pane's own menu (⋮). A shell whose chrome has a menu offers `menuActions` there and renders `navActions`.
+- Consumer action: a custom shell keeps working (`actions` is unchanged); one with its own menu may switch to `navActions` + `menuActions`.
+
 ## 0.1.68
 ### Custom fields on every record view (lane 7 STANDARD-TABLES W5)
 

package/dist/{host-BPTuBbgB.d.cts → host-DrnEXBfp.d.cts}

@@ -272,6 +272,12 @@ interface DetailHistoryEntry {
 }
 
 /** Props every shell receives; the package fills the slots, the host owns the chrome. */
+/** One of the record's optional controls as data (a shell's menu draws it). */
+interface DetailMenuAction {
+    readonly id: string;
+    readonly label: string;
+    readonly onSelect: () => void;
+}
 interface DetailShellSlots {
     /** Accessible plain-text title (window chrome, drawer title, document title). */
     title: string;
@@ -279,6 +285,13 @@ interface DetailShellSlots {
     titleNode: ReactNode;
     /** Presentation switcher · previous / next · copy id. Compact. */
     actions: ReactNode;
+    /**
+     * Previous / next only — for a shell whose chrome has its OWN menu: it puts
+     * `menuActions` there instead of a second overflow button ("…" beside "⋮").
+     */
+    navActions: ReactNode;
+    /** The optional controls (open as window / docked / page, copy id) as data, for a shell's own menu. */
+    menuActions: readonly DetailMenuAction[];
     children: ReactNode;
     onClose: () => void;
 }
@@ -538,4 +551,4 @@ declare function requireResolveType(host: DetailHostPorts): NonNullable<DetailHo
 /** A presentation's shell, or an error naming which entry forgot to bind it. */
 declare function requireShell<K extends keyof DetailShells>(shells: DetailShells, which: K): NonNullable<DetailShells[K]>;
 
-export { type DetailRef as D, type DetailInstanceData as a, type DetailPresentation as b, type DetailRecordType as c, type DetailStatus as d, type DetailRow as e, type DetailField as f, type DetailSourceHealth as g, type DetailFrameContext as h, type DetailListContext as i, type DetailLoadState as j, type DetailOpenRequest as k, type DetailDockedShellProps as l, type DetailEffectivePresentation as m, type DetailHostPorts as n, DetailHostProvider as o, type DetailPageShellProps as p, type DetailPresentationSetting as q, type DetailShellSlots as r, type DetailShells as s, type DetailWindowShellProps as t, requireResolveType as u, requireShell as v, useDetailHost as w };
+export { type DetailRef as D, type DetailInstanceData as a, type DetailPresentation as b, type DetailRecordType as c, type DetailStatus as d, type DetailRow as e, type DetailField as f, type DetailSourceHealth as g, type DetailFrameContext as h, type DetailListContext as i, type DetailLoadState as j, type DetailOpenRequest as k, type DetailMenuAction as l, type DetailDockedShellProps as m, type DetailEffectivePresentation as n, type DetailHostPorts as o, DetailHostProvider as p, type DetailPageShellProps as q, type DetailPresentationSetting as r, type DetailShellSlots as s, type DetailShells as t, type DetailWindowShellProps as u, requireResolveType as v, requireShell as w, useDetailHost as x };

package/dist/{host-BPTuBbgB.d.ts → host-DrnEXBfp.d.ts}

@@ -272,6 +272,12 @@ interface DetailHistoryEntry {
 }
 
 /** Props every shell receives; the package fills the slots, the host owns the chrome. */
+/** One of the record's optional controls as data (a shell's menu draws it). */
+interface DetailMenuAction {
+    readonly id: string;
+    readonly label: string;
+    readonly onSelect: () => void;
+}
 interface DetailShellSlots {
     /** Accessible plain-text title (window chrome, drawer title, document title). */
     title: string;
@@ -279,6 +285,13 @@ interface DetailShellSlots {
     titleNode: ReactNode;
     /** Presentation switcher · previous / next · copy id. Compact. */
     actions: ReactNode;
+    /**
+     * Previous / next only — for a shell whose chrome has its OWN menu: it puts
+     * `menuActions` there instead of a second overflow button ("…" beside "⋮").
+     */
+    navActions: ReactNode;
+    /** The optional controls (open as window / docked / page, copy id) as data, for a shell's own menu. */
+    menuActions: readonly DetailMenuAction[];
     children: ReactNode;
     onClose: () => void;
 }
@@ -538,4 +551,4 @@ declare function requireResolveType(host: DetailHostPorts): NonNullable<DetailHo
 /** A presentation's shell, or an error naming which entry forgot to bind it. */
 declare function requireShell<K extends keyof DetailShells>(shells: DetailShells, which: K): NonNullable<DetailShells[K]>;
 
-export { type DetailRef as D, type DetailInstanceData as a, type DetailPresentation as b, type DetailRecordType as c, type DetailStatus as d, type DetailRow as e, type DetailField as f, type DetailSourceHealth as g, type DetailFrameContext as h, type DetailListContext as i, type DetailLoadState as j, type DetailOpenRequest as k, type DetailDockedShellProps as l, type DetailEffectivePresentation as m, type DetailHostPorts as n, DetailHostProvider as o, type DetailPageShellProps as p, type DetailPresentationSetting as q, type DetailShellSlots as r, type DetailShells as s, type DetailWindowShellProps as t, requireResolveType as u, requireShell as v, useDetailHost as w };
+export { type DetailRef as D, type DetailInstanceData as a, type DetailPresentation as b, type DetailRecordType as c, type DetailStatus as d, type DetailRow as e, type DetailField as f, type DetailSourceHealth as g, type DetailFrameContext as h, type DetailListContext as i, type DetailLoadState as j, type DetailOpenRequest as k, type DetailMenuAction as l, type DetailDockedShellProps as m, type DetailEffectivePresentation as n, type DetailHostPorts as o, DetailHostProvider as p, type DetailPageShellProps as q, type DetailPresentationSetting as r, type DetailShellSlots as s, type DetailShells as t, type DetailWindowShellProps as u, requireResolveType as v, requireShell as w, useDetailHost as x };

package/dist/react.cjs

@@ -40,6 +40,7 @@ __export(react_exports, {
   useDetailHealth: () => useDetailHealth,
   useDetailHost: () => useDetailHost,
   useDetailKeyboard: () => useDetailKeyboard,
+  useDetailMenuActions: () => useDetailMenuActions,
   useDetailRecord: () => useDetailRecord,
   useOpenDetail: () => useOpenDetail
 });
@@ -759,7 +760,27 @@ function DetailRecordMeta({ core }) {
     }
   );
 }
-function DetailActions({ core }) {
+function useDetailMenuActions(core) {
+  const host = useDetailHost();
+  return [
+    ...PRESENTATIONS.filter((p) => p.value !== core.presentation).map(({ value, label }) => ({
+      id: `detail-open-${value}`,
+      label,
+      onSelect: () => core.switchTo(value)
+    })),
+    {
+      id: "detail-copy-id",
+      label: "Copy record id",
+      onSelect: () => {
+        void host.copyText(core.ref.id).then((ok) => {
+          if (ok) host.notify.success("Record id copied");
+          else host.notify.error("Could not copy the record id to the clipboard.");
+        });
+      }
+    }
+  ];
+}
+function DetailActions({ core, optional = "inline" }) {
   const host = useDetailHost();
   const [copied, setCopied] = (0, import_react7.useState)(false);
   const [menuOpen, setMenuOpen] = (0, import_react7.useState)(false);
@@ -824,98 +845,100 @@ function DetailActions({ core }) {
       ),
       /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { className: "mx-1 h-4 w-px bg-border", "aria-hidden": true })
     ] }) : null,
-    /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
-      "span",
-      {
-        className: "flex items-center gap-0.5 @max-[26rem]/window-header:hidden",
-        "data-detail-actions-collapsible": true,
-        children: [
-          others.map(({ value, label, Icon }) => /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
-            "button",
-            {
-              type: "button",
-              className: ICON_BUTTON,
-              onClick: () => core.switchTo(value),
-              "aria-label": label,
-              title: label,
-              children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(Icon, { className: "h-4 w-4" })
-            },
-            value
-          )),
-          /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
-            "button",
-            {
-              type: "button",
-              onClick: () => void copyId(),
-              className: ICON_BUTTON,
-              "aria-label": "Copy record id",
-              title: "Copy record id",
-              "data-detail-copy-id": true,
-              children: copied ? /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(CheckIcon, { className: "h-3.5 w-3.5 text-primary" }) : /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(CopyIcon, { className: "h-3.5 w-3.5" })
-            }
-          )
-        ]
-      }
-    ),
-    /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("span", { className: "relative hidden @max-[26rem]/window-header:inline-flex", ref: menuRef, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
-        "button",
-        {
-          type: "button",
-          className: (0, import_design_system.cn)(ICON_BUTTON, "hidden @max-[26rem]/window-header:inline-flex"),
-          onClick: () => setMenuOpen((wasOpen) => !wasOpen),
-          "aria-label": "More record actions",
-          title: "More record actions",
-          "aria-haspopup": "menu",
-          "aria-expanded": menuOpen,
-          "data-detail-actions-overflow": true,
-          children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(MoreHorizontalIcon, { className: "h-4 w-4" })
-        }
-      ),
-      menuOpen ? /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
-        "div",
+    optional === "none" ? null : /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(import_jsx_runtime3.Fragment, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
+        "span",
         {
-          role: "menu",
-          "aria-label": "Record actions",
-          className: "absolute right-0 top-full z-50 mt-1 min-w-44 rounded-md border border-border bg-card p-1 shadow-md",
-          "data-detail-actions-menu": true,
+          className: "flex items-center gap-0.5 @max-[26rem]/window-header:hidden",
+          "data-detail-actions-collapsible": true,
           children: [
-            others.map(({ value, label, Icon }) => /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
+            others.map(({ value, label, Icon }) => /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
               "button",
               {
                 type: "button",
-                role: "menuitem",
-                className: MENU_ITEM,
-                onClick: () => {
-                  setMenuOpen(false);
-                  core.switchTo(value);
-                },
-                children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(Icon, { className: "h-3.5 w-3.5 shrink-0" }),
-                  label
-                ]
+                className: ICON_BUTTON,
+                onClick: () => core.switchTo(value),
+                "aria-label": label,
+                title: label,
+                children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(Icon, { className: "h-4 w-4" })
               },
               value
             )),
-            /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
+            /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
               "button",
               {
                 type: "button",
-                role: "menuitem",
-                className: MENU_ITEM,
-                onClick: () => {
-                  setMenuOpen(false);
-                  void copyId();
-                },
-                children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(CopyIcon, { className: "h-3.5 w-3.5 shrink-0" }),
-                  "Copy record id"
-                ]
+                onClick: () => void copyId(),
+                className: ICON_BUTTON,
+                "aria-label": "Copy record id",
+                title: "Copy record id",
+                "data-detail-copy-id": true,
+                children: copied ? /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(CheckIcon, { className: "h-3.5 w-3.5 text-primary" }) : /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(CopyIcon, { className: "h-3.5 w-3.5" })
               }
             )
           ]
         }
-      ) : null
+      ),
+      /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("span", { className: "relative hidden @max-[26rem]/window-header:inline-flex", ref: menuRef, children: [
+        /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+          "button",
+          {
+            type: "button",
+            className: (0, import_design_system.cn)(ICON_BUTTON, "hidden @max-[26rem]/window-header:inline-flex"),
+            onClick: () => setMenuOpen((wasOpen) => !wasOpen),
+            "aria-label": "More record actions",
+            title: "More record actions",
+            "aria-haspopup": "menu",
+            "aria-expanded": menuOpen,
+            "data-detail-actions-overflow": true,
+            children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(MoreHorizontalIcon, { className: "h-4 w-4" })
+          }
+        ),
+        menuOpen ? /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
+          "div",
+          {
+            role: "menu",
+            "aria-label": "Record actions",
+            className: "absolute right-0 top-full z-50 mt-1 min-w-44 rounded-md border border-border bg-card p-1 shadow-md",
+            "data-detail-actions-menu": true,
+            children: [
+              others.map(({ value, label, Icon }) => /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
+                "button",
+                {
+                  type: "button",
+                  role: "menuitem",
+                  className: MENU_ITEM,
+                  onClick: () => {
+                    setMenuOpen(false);
+                    core.switchTo(value);
+                  },
+                  children: [
+                    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(Icon, { className: "h-3.5 w-3.5 shrink-0" }),
+                    label
+                  ]
+                },
+                value
+              )),
+              /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
+                "button",
+                {
+                  type: "button",
+                  role: "menuitem",
+                  className: MENU_ITEM,
+                  onClick: () => {
+                    setMenuOpen(false);
+                    void copyId();
+                  },
+                  children: [
+                    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(CopyIcon, { className: "h-3.5 w-3.5 shrink-0" }),
+                    "Copy record id"
+                  ]
+                }
+              )
+            ]
+          }
+        ) : null
+      ] })
     ] })
   ] });
 }
@@ -1553,6 +1576,7 @@ function KeyboardRoot({ core, children }) {
 function DetailWindowPresentation({ data, onClose }) {
   const host = useDetailHost();
   const core = useDetailCore(data, "window", { onClose });
+  const menuActions = useDetailMenuActions(core);
   const Shell = requireShell(host.shells, "Window");
   return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
     Shell,
@@ -1563,6 +1587,8 @@ function DetailWindowPresentation({ data, onClose }) {
       title: core.title,
       titleNode: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(KeyboardSlot, { core, children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(DetailTitle, { core }) }),
       actions: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(KeyboardActionsSlot, { core, children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(DetailActions, { core }) }),
+      navActions: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(KeyboardActionsSlot, { core, children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(DetailActions, { core, optional: "none" }) }),
+      menuActions,
       onClose: core.close,
       children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(KeyboardRoot, { core, children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(DetailBody, { core }) })
     }
@@ -1571,6 +1597,7 @@ function DetailWindowPresentation({ data, onClose }) {
 function DetailDockedPresentation({ data, onClose }) {
   const host = useDetailHost();
   const core = useDetailCore(data, "docked", { onClose });
+  const menuActions = useDetailMenuActions(core);
   const Shell = requireShell(host.shells, "Docked");
   return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
     Shell,
@@ -1580,6 +1607,8 @@ function DetailDockedPresentation({ data, onClose }) {
       title: core.title,
       titleNode: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(KeyboardSlot, { core, children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(DetailTitle, { core }) }),
       actions: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(KeyboardActionsSlot, { core, children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(DetailActions, { core }) }),
+      navActions: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(KeyboardActionsSlot, { core, children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(DetailActions, { core, optional: "none" }) }),
+      menuActions,
       onClose: core.close,
       children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(KeyboardRoot, { core, children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(DetailBody, { core }) })
     }
@@ -1588,6 +1617,7 @@ function DetailDockedPresentation({ data, onClose }) {
 function DetailPagePresentation({ data }) {
   const host = useDetailHost();
   const core = useDetailCore(data, "page", {});
+  const menuActions = useDetailMenuActions(core);
   const Shell = requireShell(host.shells, "Page");
   return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
     Shell,
@@ -1596,6 +1626,8 @@ function DetailPagePresentation({ data }) {
       title: core.title,
       titleNode: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(KeyboardSlot, { core, children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(DetailTitle, { core }) }),
       actions: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(KeyboardActionsSlot, { core, children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(DetailActions, { core }) }),
+      navActions: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(KeyboardActionsSlot, { core, children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(DetailActions, { core, optional: "none" }) }),
+      menuActions,
       onClose: core.close,
       onBack: core.leave,
       children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(KeyboardRoot, { core, children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(DetailBody, { core }) })