@epicbagel/saas-kit 1.17.0 → 1.18.0

package/README.md

@@ -15,6 +15,20 @@ npm install @epicbagel/saas-kit
 Peer dependencies: `react` and `react-dom` (18 or 19), `lucide-react`
 (`>=0.400.0 <2`), `react-icons` (5) and `tailwindcss` (4.3 or later).
 
+## Page header actions
+
+`PageHeaderActions` expands its actions on desktop and collapses them into
+one menu on mobile. Use `presentation="menu"` to keep the same menu at every
+width, giving long page titles more room. Its action order, nested menus,
+disabled state, destructive treatment and callbacks stay the same.
+`mobileLabel` and `mobileAriaLabel` name the menu trigger in either layout.
+
+```tsx
+<PageHeader title="Senior Enterprise Account Executive · Example Company">
+  <PageHeaderActions presentation="menu" actions={actions} />
+</PageHeader>
+```
+
 ## Live voice in Chat
 
 Pass a controlled `voiceSession` to `Chat` or `ChatInput` to show start, mute,

package/dist/{chunk-6S6GD43V.js → chunk-2UYEMPOJ.js}

@@ -33,13 +33,14 @@ function MenuActions({ actions }) {
   return actions.map((action) => /* @__PURE__ */ jsxs(Fragment, { children: [
     action.separatorBefore && /* @__PURE__ */ jsx(DropdownMenuSeparator, {}),
     action.items?.length ? /* @__PURE__ */ jsxs(DropdownMenuSub, { children: [
-      /* @__PURE__ */ jsx(DropdownMenuSubTrigger, { disabled: action.disabled, children: /* @__PURE__ */ jsx(MenuActionContent, { action }) }),
+      /* @__PURE__ */ jsx(DropdownMenuSubTrigger, { disabled: action.disabled, title: action.title, children: /* @__PURE__ */ jsx(MenuActionContent, { action }) }),
       /* @__PURE__ */ jsx(DropdownMenuSubContent, { children: /* @__PURE__ */ jsx(MenuActions, { actions: action.items }) })
     ] }) : /* @__PURE__ */ jsx(
       DropdownMenuItem,
       {
         disabled: action.disabled,
         tone: action.tone,
+        title: action.title,
         onSelect: action.onSelect,
         className: action.description ? "items-start" : void 0,
         children: /* @__PURE__ */ jsx(MenuActionContent, { action })
@@ -49,6 +50,7 @@ function MenuActions({ actions }) {
 }
 function PageHeaderActions({
   actions,
+  presentation = "responsive",
   mobileLabel = "Actions",
   mobileAriaLabel,
   className
@@ -68,7 +70,7 @@ function PageHeaderActions({
     return rank[priorityFor(left.action)] - rank[priorityFor(right.action)] || left.index - right.index;
   }).map(({ action }) => action) : actions;
   return /* @__PURE__ */ jsxs("div", { className: cn("shrink-0", className), children: [
-    /* @__PURE__ */ jsx(
+    presentation === "responsive" && /* @__PURE__ */ jsx(
       "div",
       {
         className: "hidden items-center gap-2 sm:flex",
@@ -110,7 +112,7 @@ function PageHeaderActions({
         )
       }
     ),
-    /* @__PURE__ */ jsx("div", { className: "sm:hidden", "data-slot": "page-header-actions-mobile", children: /* @__PURE__ */ jsxs(DropdownMenu, { children: [
+    /* @__PURE__ */ jsx("div", { className: presentation === "responsive" ? "sm:hidden" : void 0, "data-slot": "page-header-actions-mobile", children: /* @__PURE__ */ jsxs(DropdownMenu, { children: [
       /* @__PURE__ */ jsx(DropdownMenuTrigger, { asChild: true, children: /* @__PURE__ */ jsxs(Button, { type: "button", size: "sm", variant: "outline", "aria-label": mobileAriaLabel, children: [
         mobileLabel,
         /* @__PURE__ */ jsx(ChevronDown, { "aria-hidden": "true" })

package/dist/{chunk-6YXKFVZU.cjs → chunk-AU5GUDOW.cjs}

@@ -33,13 +33,14 @@ function MenuActions({ actions }) {
   return actions.map((action) => /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _react.Fragment, { children: [
     action.separatorBefore && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkZAITUDYDcjs.DropdownMenuSeparator, {}),
     _optionalChain([action, 'access', _ => _.items, 'optionalAccess', _2 => _2.length]) ? /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _chunkZAITUDYDcjs.DropdownMenuSub, { children: [
-      /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkZAITUDYDcjs.DropdownMenuSubTrigger, { disabled: action.disabled, children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, MenuActionContent, { action }) }),
+      /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkZAITUDYDcjs.DropdownMenuSubTrigger, { disabled: action.disabled, title: action.title, children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, MenuActionContent, { action }) }),
       /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkZAITUDYDcjs.DropdownMenuSubContent, { children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, MenuActions, { actions: action.items }) })
     ] }) : /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
       _chunkZAITUDYDcjs.DropdownMenuItem,
       {
         disabled: action.disabled,
         tone: action.tone,
+        title: action.title,
         onSelect: action.onSelect,
         className: action.description ? "items-start" : void 0,
         children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, MenuActionContent, { action })
@@ -49,6 +50,7 @@ function MenuActions({ actions }) {
 }
 function PageHeaderActions({
   actions,
+  presentation = "responsive",
   mobileLabel = "Actions",
   mobileAriaLabel,
   className
@@ -68,7 +70,7 @@ function PageHeaderActions({
     return rank[priorityFor(left.action)] - rank[priorityFor(right.action)] || left.index - right.index;
   }).map(({ action }) => action) : actions;
   return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: _chunkKWLSBTB2cjs.cn.call(void 0, "shrink-0", className), children: [
-    /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+    presentation === "responsive" && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
       "div",
       {
         className: "hidden items-center gap-2 sm:flex",
@@ -110,7 +112,7 @@ function PageHeaderActions({
         )
       }
     ),
-    /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "sm:hidden", "data-slot": "page-header-actions-mobile", children: /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _chunkZAITUDYDcjs.DropdownMenu, { children: [
+    /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: presentation === "responsive" ? "sm:hidden" : void 0, "data-slot": "page-header-actions-mobile", children: /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _chunkZAITUDYDcjs.DropdownMenu, { children: [
       /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkZAITUDYDcjs.DropdownMenuTrigger, { asChild: true, children: /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _chunkJDEXZGIYcjs.Button, { type: "button", size: "sm", variant: "outline", "aria-label": mobileAriaLabel, children: [
         mobileLabel,
         /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _lucidereact.ChevronDown, { "aria-hidden": "true" })

package/dist/primitives/connection.cjs

@@ -4,7 +4,7 @@
 var _chunk2HTYXBDUcjs = require('../chunk-2HTYXBDU.cjs');
 
 
-var _chunk6YXKFVZUcjs = require('../chunk-6YXKFVZU.cjs');
+var _chunkAU5GUDOWcjs = require('../chunk-AU5GUDOW.cjs');
 
 
 
@@ -141,7 +141,7 @@ function Connection({
             ),
             children: [
               /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunk2HTYXBDUcjs.StatusBadge, { tone: s.tone, children: _nullishCoalesce(statusLabel, () => ( s.label)) }),
-              responsiveActions.length > 0 && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunk6YXKFVZUcjs.PageHeaderActions, { actions: responsiveActions, mobileLabel: "Actions" })
+              responsiveActions.length > 0 && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkAU5GUDOWcjs.PageHeaderActions, { actions: responsiveActions, mobileLabel: "Actions" })
             ]
           }
         ),

package/dist/primitives/connection.js

@@ -4,7 +4,7 @@ import {
 } from "../chunk-GMJWBGTJ.js";
 import {
   PageHeaderActions
-} from "../chunk-6S6GD43V.js";
+} from "../chunk-2UYEMPOJ.js";
 import {
   Dialog,
   DialogContent,

package/dist/primitives/page-header-actions.cjs

@@ -2,10 +2,10 @@
 "use client";
 
 
-var _chunk6YXKFVZUcjs = require('../chunk-6YXKFVZU.cjs');
+var _chunkAU5GUDOWcjs = require('../chunk-AU5GUDOW.cjs');
 require('../chunk-ZAITUDYD.cjs');
 require('../chunk-JDEXZGIY.cjs');
 require('../chunk-KWLSBTB2.cjs');
 
 
-exports.PageHeaderActions = _chunk6YXKFVZUcjs.PageHeaderActions;
+exports.PageHeaderActions = _chunkAU5GUDOWcjs.PageHeaderActions;

package/dist/primitives/page-header-actions.d.cts

@@ -10,7 +10,7 @@ interface PageHeaderAction {
     label: ReactNode;
     icon?: ReactNode;
     onSelect?: () => void;
-    /** Optional nested actions. Desktop renders a menu button; mobile nests it inside Actions. */
+    /** Optional nested actions. Expanded layout renders a menu button; collapsed layout nests it inside Actions. */
     items?: PageHeaderAction[];
     /** Optional supporting copy shown when the action appears in a menu. */
     description?: ReactNode;
@@ -23,7 +23,7 @@ interface PageHeaderAction {
      * the button variant.
      */
     priority?: "primary" | "secondary" | "tertiary";
-    /** Semantic treatment used in the collapsed mobile menu. */
+    /** Semantic treatment used in the collapsed menu. */
     tone?: "default" | "muted" | "destructive";
     /** Visually separates destructive or lower-priority actions in the menu. */
     separatorBefore?: boolean;
@@ -31,7 +31,9 @@ interface PageHeaderAction {
 }
 interface PageHeaderActionsProps {
     actions: PageHeaderAction[];
-    /** Visible label for the collapsed mobile trigger. */
+    /** Responsive by default; menu keeps the same collapsed Actions menu at every width. */
+    presentation?: "responsive" | "menu";
+    /** Visible menu-trigger label, also used on desktop when presentation is menu. */
     mobileLabel?: ReactNode;
     /** Accessible label when `mobileLabel` is not plain text. */
     mobileAriaLabel?: string;
@@ -42,8 +44,9 @@ interface PageHeaderActionsProps {
  *
  * Desktop keeps every action visible for fast scanning. Mobile collapses the
  * same action definitions into one menu so page titles retain useful space.
+ * Use `presentation="menu"` to keep that menu at every viewport width.
  * Status and other non-interactive metadata should remain beside the title.
  */
-declare function PageHeaderActions({ actions, mobileLabel, mobileAriaLabel, className, }: PageHeaderActionsProps): react_jsx_runtime.JSX.Element | null;
+declare function PageHeaderActions({ actions, presentation, mobileLabel, mobileAriaLabel, className, }: PageHeaderActionsProps): react_jsx_runtime.JSX.Element | null;
 
 export { type PageHeaderAction, PageHeaderActions, type PageHeaderActionsProps };

package/dist/primitives/page-header-actions.d.ts

@@ -10,7 +10,7 @@ interface PageHeaderAction {
     label: ReactNode;
     icon?: ReactNode;
     onSelect?: () => void;
-    /** Optional nested actions. Desktop renders a menu button; mobile nests it inside Actions. */
+    /** Optional nested actions. Expanded layout renders a menu button; collapsed layout nests it inside Actions. */
     items?: PageHeaderAction[];
     /** Optional supporting copy shown when the action appears in a menu. */
     description?: ReactNode;
@@ -23,7 +23,7 @@ interface PageHeaderAction {
      * the button variant.
      */
     priority?: "primary" | "secondary" | "tertiary";
-    /** Semantic treatment used in the collapsed mobile menu. */
+    /** Semantic treatment used in the collapsed menu. */
     tone?: "default" | "muted" | "destructive";
     /** Visually separates destructive or lower-priority actions in the menu. */
     separatorBefore?: boolean;
@@ -31,7 +31,9 @@ interface PageHeaderAction {
 }
 interface PageHeaderActionsProps {
     actions: PageHeaderAction[];
-    /** Visible label for the collapsed mobile trigger. */
+    /** Responsive by default; menu keeps the same collapsed Actions menu at every width. */
+    presentation?: "responsive" | "menu";
+    /** Visible menu-trigger label, also used on desktop when presentation is menu. */
     mobileLabel?: ReactNode;
     /** Accessible label when `mobileLabel` is not plain text. */
     mobileAriaLabel?: string;
@@ -42,8 +44,9 @@ interface PageHeaderActionsProps {
  *
  * Desktop keeps every action visible for fast scanning. Mobile collapses the
  * same action definitions into one menu so page titles retain useful space.
+ * Use `presentation="menu"` to keep that menu at every viewport width.
  * Status and other non-interactive metadata should remain beside the title.
  */
-declare function PageHeaderActions({ actions, mobileLabel, mobileAriaLabel, className, }: PageHeaderActionsProps): react_jsx_runtime.JSX.Element | null;
+declare function PageHeaderActions({ actions, presentation, mobileLabel, mobileAriaLabel, className, }: PageHeaderActionsProps): react_jsx_runtime.JSX.Element | null;
 
 export { type PageHeaderAction, PageHeaderActions, type PageHeaderActionsProps };

package/dist/primitives/page-header-actions.js

@@ -2,7 +2,7 @@
 "use client";
 import {
   PageHeaderActions
-} from "../chunk-6S6GD43V.js";
+} from "../chunk-2UYEMPOJ.js";
 import "../chunk-V4LE2HWP.js";
 import "../chunk-W326GKML.js";
 import "../chunk-G6SRSWXB.js";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@epicbagel/saas-kit",
-  "version": "1.17.0",
+  "version": "1.18.0",
   "description": "Accessible React primitives, layout components and design tokens for SaaS apps, built on Radix UI and Tailwind CSS v4.",
   "license": "MIT",
   "keywords": [