@epicbagel/saas-kit 1.17.0 → 1.19.0

package/README.md

@@ -15,6 +15,29 @@ 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).
 
+## Frosted scroll navigation
+
+`ScrollNavigator frosted` gives its floating controls a translucent themed
+background with 16px backdrop blur. `MessageScrollerNavigator` forwards the same
+option. The default appearance, list layout and navigation behavior are unchanged.
+The surface stays opaque when backdrop blur is unsupported, reduced transparency
+is requested, or forced colours are active. Import the kit's `globals.css` (or
+`tokens.css` and `utilities.css`) as usual.
+
+## 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-HSSSNAVX.cjs → chunk-23IETCLV.cjs}

@@ -1,7 +1,7 @@
 "use strict";Object.defineProperty(exports, "__esModule", {value: true}); function _nullishCoalesce(lhs, rhsFn) { if (lhs != null) { return lhs; } else { return rhsFn(); } } function _optionalChain(ops) { let lastAccessLHS = undefined; let value = ops[0]; let i = 1; while (i < ops.length) { const op = ops[i]; const fn = ops[i + 1]; i += 2; if ((op === 'optionalAccess' || op === 'optionalCall') && value == null) { return undefined; } if (op === 'access' || op === 'optionalAccess') { lastAccessLHS = value; value = fn(value); } else if (op === 'call' || op === 'optionalCall') { value = fn((...args) => value.call(lastAccessLHS, ...args)); lastAccessLHS = undefined; } } return value; }"use client";
 
 
-var _chunk6AMSRIQ4cjs = require('./chunk-6AMSRIQ4.cjs');
+var _chunkDMPSKGFMcjs = require('./chunk-DMPSKGFM.cjs');
 
 
 var _chunkJDEXZGIYcjs = require('./chunk-JDEXZGIY.cjs');
@@ -23,7 +23,7 @@ function MessageScrollerProvider(props) {
 }
 function MessageScrollerNavigator(props) {
   const { scrollToMessage } = _messagescroller.useMessageScroller.call(void 0, );
-  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunk6AMSRIQ4cjs.ScrollNavigator, { ...props, onNavigate: (id, target, options) => {
+  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkDMPSKGFMcjs.ScrollNavigator, { ...props, onNavigate: (id, target, options) => {
     if (_optionalChain([props, 'access', _ => _.onNavigate, 'optionalCall', _2 => _2(id, target, options)]) === true) return true;
     const message = target.closest("[data-message-id]");
     const messageId = _optionalChain([message, 'optionalAccess', _3 => _3.dataset, 'access', _4 => _4.messageId]);

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-V3XA7SDK.js → chunk-36LNA4WM.js}

@@ -58,6 +58,7 @@ var ScrollNavigator = forwardRef(function ScrollNavigator2({
   scrollRoot,
   onNavigate,
   className,
+  frosted = false,
   ...props
 }, forwardedRef) {
   const rootRef = useRef(null);
@@ -195,7 +196,8 @@ var ScrollNavigator = forwardRef(function ScrollNavigator2({
               "aria-label": label,
               "data-slot": "scroll-navigator-controls",
               "data-orientation": row ? "horizontal" : "vertical",
-              className: cn("fixed z-20 flex rounded-full border border-border/60 bg-background/95 p-1 shadow-sm backdrop-blur-sm", row ? "items-center gap-1" : "flex-col items-center gap-1"),
+              "data-frosted-surface": frosted ? "background" : void 0,
+              className: cn("fixed z-20 flex rounded-full border border-border/60 p-1 shadow-sm", !frosted && "bg-background/95 backdrop-blur-sm", row ? "items-center gap-1" : "flex-col items-center gap-1"),
               style: { top: placement.top, left: placement.left, width: placement.width, maxHeight: placement.maxHeight },
               onBlur: (event) => {
                 if (!event.currentTarget.contains(event.relatedTarget)) setFocusId(null);
@@ -249,7 +251,7 @@ var ScrollNavigator = forwardRef(function ScrollNavigator2({
                     ))
                   }
                 ),
-                /* @__PURE__ */ jsxs("span", { "aria-hidden": "true", className: cn("shrink-0 text-center text-[10px] tabular-nums text-muted-foreground", row ? "px-2" : "pb-1"), children: [
+                /* @__PURE__ */ jsxs("span", { "aria-hidden": "true", className: cn("shrink-0 text-center text-[10px] tabular-nums", frosted ? "text-foreground" : "text-muted-foreground", row ? "px-2" : "pb-1"), children: [
                   placement.active + 1,
                   " / ",
                   items.length

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/{chunk-6AMSRIQ4.cjs → chunk-DMPSKGFM.cjs}

@@ -58,6 +58,7 @@ var ScrollNavigator = _react.forwardRef.call(void 0, function ScrollNavigator2({
   scrollRoot,
   onNavigate,
   className,
+  frosted = false,
   ...props
 }, forwardedRef) {
   const rootRef = _react.useRef.call(void 0, null);
@@ -195,7 +196,8 @@ var ScrollNavigator = _react.forwardRef.call(void 0, function ScrollNavigator2({
               "aria-label": label,
               "data-slot": "scroll-navigator-controls",
               "data-orientation": row ? "horizontal" : "vertical",
-              className: _chunkKWLSBTB2cjs.cn.call(void 0, "fixed z-20 flex rounded-full border border-border/60 bg-background/95 p-1 shadow-sm backdrop-blur-sm", row ? "items-center gap-1" : "flex-col items-center gap-1"),
+              "data-frosted-surface": frosted ? "background" : void 0,
+              className: _chunkKWLSBTB2cjs.cn.call(void 0, "fixed z-20 flex rounded-full border border-border/60 p-1 shadow-sm", !frosted && "bg-background/95 backdrop-blur-sm", row ? "items-center gap-1" : "flex-col items-center gap-1"),
               style: { top: placement.top, left: placement.left, width: placement.width, maxHeight: placement.maxHeight },
               onBlur: (event) => {
                 if (!event.currentTarget.contains(event.relatedTarget)) setFocusId(null);
@@ -249,7 +251,7 @@ var ScrollNavigator = _react.forwardRef.call(void 0, function ScrollNavigator2({
                     ))
                   }
                 ),
-                /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "span", { "aria-hidden": "true", className: _chunkKWLSBTB2cjs.cn.call(void 0, "shrink-0 text-center text-[10px] tabular-nums text-muted-foreground", row ? "px-2" : "pb-1"), children: [
+                /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "span", { "aria-hidden": "true", className: _chunkKWLSBTB2cjs.cn.call(void 0, "shrink-0 text-center text-[10px] tabular-nums", frosted ? "text-foreground" : "text-muted-foreground", row ? "px-2" : "pb-1"), children: [
                   placement.active + 1,
                   " / ",
                   items.length

package/dist/{chunk-EXXJXOUO.js → chunk-OUZSIA5G.js}

@@ -1,7 +1,7 @@
 "use client";
 import {
   ScrollNavigator
-} from "./chunk-V3XA7SDK.js";
+} from "./chunk-36LNA4WM.js";
 import {
   Button
 } from "./chunk-W326GKML.js";

package/dist/primitives/chat.cjs

@@ -26,8 +26,8 @@ var _chunkB765DSRGcjs = require('../chunk-B765DSRG.cjs');
 
 
 
-var _chunkHSSSNAVXcjs = require('../chunk-HSSSNAVX.cjs');
-require('../chunk-6AMSRIQ4.cjs');
+var _chunk23IETCLVcjs = require('../chunk-23IETCLV.cjs');
+require('../chunk-DMPSKGFM.cjs');
 
 
 
@@ -179,15 +179,15 @@ var ChatThread = _react.forwardRef.call(void 0,
     const markers = timelineMarkers(messages, /* @__PURE__ */ new Date());
     const anchorId = useArrivingUserTurnId(messages);
     const workspace = appearance === "workspace";
-    return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkHSSSNAVXcjs.MessageScrollerProvider, { autoScroll: true, children: /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, 
-      _chunkHSSSNAVXcjs.MessageScroller,
+    return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunk23IETCLVcjs.MessageScrollerProvider, { autoScroll: true, children: /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, 
+      _chunk23IETCLVcjs.MessageScroller,
       {
         ref,
         style: { maxHeight },
         className: _chunkKWLSBTB2cjs.cn.call(void 0, "min-h-0", className),
         children: [
-          /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkHSSSNAVXcjs.MessageScrollerViewport, { children: /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, 
-            _chunkHSSSNAVXcjs.MessageScrollerContent,
+          /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunk23IETCLVcjs.MessageScrollerViewport, { children: /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, 
+            _chunk23IETCLVcjs.MessageScrollerContent,
             {
               className: _chunkKWLSBTB2cjs.cn.call(void 0, 
                 workspace ? "mx-auto w-full max-w-3xl gap-10 px-4 py-6 md:px-6 md:py-8" : "gap-2.5 px-px py-px"
@@ -196,7 +196,7 @@ var ChatThread = _react.forwardRef.call(void 0,
                 messages.map((m, index) => {
                   const isUser = m.role === "user";
                   if (m.status === "running") {
-                    return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkHSSSNAVXcjs.MessageScrollerItem, { children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+                    return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunk23IETCLVcjs.MessageScrollerItem, { children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
                       ChatRunningLine,
                       {
                         label: m.text || pendingLabel,
@@ -209,7 +209,7 @@ var ChatThread = _react.forwardRef.call(void 0,
                   const marker = markers[index];
                   const actions = messageActions && offersActions(m) ? messageActions(m) : null;
                   return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, 
-                    _chunkHSSSNAVXcjs.MessageScrollerItem,
+                    _chunk23IETCLVcjs.MessageScrollerItem,
                     {
                       messageId: m.id,
                       scrollAnchor: m.id === anchorId,
@@ -265,15 +265,15 @@ var ChatThread = _react.forwardRef.call(void 0,
                     m.id
                   );
                 }),
-                pending && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkHSSSNAVXcjs.MessageScrollerItem, { children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, ChatRunningLine, { label: pendingLabel, workspace }) }),
+                pending && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunk23IETCLVcjs.MessageScrollerItem, { children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, ChatRunningLine, { label: pendingLabel, workspace }) }),
                 footer && // Always painted: content-visibility:auto would contain the
                 // footer's paint and layout, clipping a ring or shadow at its
                 // edge and re-parenting anything fixed inside it.
-                /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkHSSSNAVXcjs.MessageScrollerItem, { className: "[content-visibility:visible]", children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkNWDPH2Z7cjs.Message, { align: "start", children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkNWDPH2Z7cjs.MessageContent, { children: footer }) }) })
+                /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunk23IETCLVcjs.MessageScrollerItem, { className: "[content-visibility:visible]", children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkNWDPH2Z7cjs.Message, { align: "start", children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkNWDPH2Z7cjs.MessageContent, { children: footer }) }) })
               ]
             }
           ) }),
-          /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _chunkHSSSNAVXcjs.MessageScrollerButton, { variant: "outline", className: "rounded-full shadow-sm", children: [
+          /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _chunk23IETCLVcjs.MessageScrollerButton, { variant: "outline", className: "rounded-full shadow-sm", children: [
             /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _lucidereact.ArrowDown, { className: "h-4 w-4" }),
             /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", { className: "sr-only", children: scrollButtonLabel })
           ] })

package/dist/primitives/chat.js

@@ -26,8 +26,8 @@ import {
   MessageScrollerItem,
   MessageScrollerProvider,
   MessageScrollerViewport
-} from "../chunk-EXXJXOUO.js";
-import "../chunk-V3XA7SDK.js";
+} from "../chunk-OUZSIA5G.js";
+import "../chunk-36LNA4WM.js";
 import {
   Message,
   MessageAction,

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/message-scroller.cjs

@@ -11,8 +11,8 @@
 
 
 
-var _chunkHSSSNAVXcjs = require('../chunk-HSSSNAVX.cjs');
-require('../chunk-6AMSRIQ4.cjs');
+var _chunk23IETCLVcjs = require('../chunk-23IETCLV.cjs');
+require('../chunk-DMPSKGFM.cjs');
 require('../chunk-Z2H4LJVG.cjs');
 require('../chunk-WABCLRBR.cjs');
 require('../chunk-JDEXZGIY.cjs');
@@ -28,4 +28,4 @@ require('../chunk-KWLSBTB2.cjs');
 
 
 
-exports.MessageScroller = _chunkHSSSNAVXcjs.MessageScroller; exports.MessageScrollerButton = _chunkHSSSNAVXcjs.MessageScrollerButton; exports.MessageScrollerContent = _chunkHSSSNAVXcjs.MessageScrollerContent; exports.MessageScrollerItem = _chunkHSSSNAVXcjs.MessageScrollerItem; exports.MessageScrollerNavigator = _chunkHSSSNAVXcjs.MessageScrollerNavigator; exports.MessageScrollerProvider = _chunkHSSSNAVXcjs.MessageScrollerProvider; exports.MessageScrollerViewport = _chunkHSSSNAVXcjs.MessageScrollerViewport; exports.useMessageScroller = _chunkHSSSNAVXcjs.useMessageScroller; exports.useMessageScrollerScrollable = _chunkHSSSNAVXcjs.useMessageScrollerScrollable; exports.useMessageScrollerVisibility = _chunkHSSSNAVXcjs.useMessageScrollerVisibility;
+exports.MessageScroller = _chunk23IETCLVcjs.MessageScroller; exports.MessageScrollerButton = _chunk23IETCLVcjs.MessageScrollerButton; exports.MessageScrollerContent = _chunk23IETCLVcjs.MessageScrollerContent; exports.MessageScrollerItem = _chunk23IETCLVcjs.MessageScrollerItem; exports.MessageScrollerNavigator = _chunk23IETCLVcjs.MessageScrollerNavigator; exports.MessageScrollerProvider = _chunk23IETCLVcjs.MessageScrollerProvider; exports.MessageScrollerViewport = _chunk23IETCLVcjs.MessageScrollerViewport; exports.useMessageScroller = _chunk23IETCLVcjs.useMessageScroller; exports.useMessageScrollerScrollable = _chunk23IETCLVcjs.useMessageScrollerScrollable; exports.useMessageScrollerVisibility = _chunk23IETCLVcjs.useMessageScrollerVisibility;

package/dist/primitives/message-scroller.js

@@ -11,8 +11,8 @@ import {
   useMessageScroller,
   useMessageScrollerScrollable,
   useMessageScrollerVisibility
-} from "../chunk-EXXJXOUO.js";
-import "../chunk-V3XA7SDK.js";
+} from "../chunk-OUZSIA5G.js";
+import "../chunk-36LNA4WM.js";
 import "../chunk-GA5SX7FE.js";
 import "../chunk-3OWGL4Q2.js";
 import "../chunk-W326GKML.js";

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/dist/primitives/scroll-navigator.cjs

@@ -2,10 +2,10 @@
 "use client";
 
 
-var _chunk6AMSRIQ4cjs = require('../chunk-6AMSRIQ4.cjs');
+var _chunkDMPSKGFMcjs = require('../chunk-DMPSKGFM.cjs');
 require('../chunk-Z2H4LJVG.cjs');
 require('../chunk-WABCLRBR.cjs');
 require('../chunk-KWLSBTB2.cjs');
 
 
-exports.ScrollNavigator = _chunk6AMSRIQ4cjs.ScrollNavigator;
+exports.ScrollNavigator = _chunkDMPSKGFMcjs.ScrollNavigator;

package/dist/primitives/scroll-navigator.d.cts

@@ -18,6 +18,8 @@ interface ScrollNavigatorScrollOptions {
 interface ScrollNavigatorProps extends Omit<HTMLAttributes<HTMLDivElement>, "children"> {
     items: readonly ScrollNavigatorItem[];
     label?: string;
+    /** Translucent, blurred floating controls with a solid fallback. Cards are unchanged. */
+    frosted?: boolean;
     /** Card columns above the small breakpoint; always one column on mobile. */
     columns?: 1 | 2 | 3 | 4;
     /** Space below a sticky header inside the scroll viewport, in pixels. */

package/dist/primitives/scroll-navigator.d.ts

@@ -18,6 +18,8 @@ interface ScrollNavigatorScrollOptions {
 interface ScrollNavigatorProps extends Omit<HTMLAttributes<HTMLDivElement>, "children"> {
     items: readonly ScrollNavigatorItem[];
     label?: string;
+    /** Translucent, blurred floating controls with a solid fallback. Cards are unchanged. */
+    frosted?: boolean;
     /** Card columns above the small breakpoint; always one column on mobile. */
     columns?: 1 | 2 | 3 | 4;
     /** Space below a sticky header inside the scroll viewport, in pixels. */

package/dist/primitives/scroll-navigator.js

@@ -2,7 +2,7 @@
 "use client";
 import {
   ScrollNavigator
-} from "../chunk-V3XA7SDK.js";
+} from "../chunk-36LNA4WM.js";
 import "../chunk-GA5SX7FE.js";
 import "../chunk-3OWGL4Q2.js";
 import "../chunk-G6SRSWXB.js";

package/package.json

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

package/src/styles/components/frosted-surface.css

@@ -0,0 +1,38 @@
+/* Opt-in chrome surfaces. Complete semantic colours keep every palette and
+ * mode working; unsupported blur, reduced transparency and forced colours
+ * retain an opaque, readable surface. No sizing or positioning lives here. */
+@layer components {
+  [data-frosted-surface="background"] { --color-frosted-surface: var(--color-background); }
+  [data-frosted-surface="card"] { --color-frosted-surface: var(--color-card); }
+  [data-frosted-surface="muted"] { --color-frosted-surface: var(--color-muted); }
+
+  [data-frosted-surface] {
+    background-color: var(--color-frosted-surface);
+  }
+
+  @supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
+    [data-frosted-surface] {
+      background-color: color-mix(in oklab, var(--color-frosted-surface) 70%, transparent);
+      -webkit-backdrop-filter: blur(16px);
+      backdrop-filter: blur(16px);
+    }
+  }
+
+  @media (prefers-reduced-transparency: reduce) {
+    [data-frosted-surface] {
+      background-color: var(--color-frosted-surface);
+      -webkit-backdrop-filter: none;
+      backdrop-filter: none;
+    }
+  }
+
+  @media (forced-colors: active) {
+    [data-frosted-surface] {
+      background-color: Canvas;
+      color: CanvasText;
+      border-color: CanvasText;
+      -webkit-backdrop-filter: none;
+      backdrop-filter: none;
+    }
+  }
+}

package/src/styles/components.css

@@ -4,3 +4,4 @@
 @import "./components/marker.css";
 @import "./components/message.css";
 @import "./components/message-scroller.css";
+@import "./components/frosted-surface.css";