@epicbagel/saas-kit 1.18.0 → 1.20.0

package/README.md

@@ -15,6 +15,15 @@ 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
@@ -235,6 +244,19 @@ public in 1.1.0, and these were the decisions about its props then:
   [])`: the draft and staged files stay, and a failure is reported without
   touching them. Suggestions are disabled while `pending`; pass none once
   they no longer apply.
+- **Compact mobile suggestions (1.20.0).** Opt into `mobileCompactSuggestions`
+  to put the first reply in a shaded row inside the composer on phones
+  below 768px. Its button sends directly; the separate `+N more` button opens
+  a bottom sheet with every reply in full, wrapping onto as many lines as
+  needed. One reply needs no picker and no replies leave no row. Desktop
+  keeps the existing chips. The sheet uses `replySuggestionsLabel` as its
+  title; `replySuggestionsMoreLabel(count)` and `replySuggestionsCloseLabel`
+  replace the opener and close wording. These mobile picks preserve the
+  draft and files without focusing the textarea or opening the keyboard.
+  Pending sends, changed choices, a new latest message, or a move to desktop
+  dismiss the picker. Equivalent arrays from a refresh leave it open.
+  `ChatInput.header` provides the same inside-surface top slot for other
+  compositions; changing the header keeps its textarea mounted.
 - **Failed sends.** When `onSend` rejects, Chat puts the text back in the
   composer and calls `onSendError`; without one it reports the rejection
   through `reportError`, so a failure is never silent.

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-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-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-TP74SBRH.cjs → chunk-E2UVQXBO.cjs}

@@ -6,7 +6,7 @@
 
 
 
-var _chunkBTHYGHOHcjs = require('./chunk-BTHYGHOH.cjs');
+var _chunkAO56ET4Fcjs = require('./chunk-AO56ET4F.cjs');
 
 
 var _chunkT2ZFSPE4cjs = require('./chunk-T2ZFSPE4.cjs');
@@ -29,10 +29,10 @@ function PreviewDialog({
   downloadLabel,
   children
 }) {
-  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkBTHYGHOHcjs.ResponsiveDialog, { open, onOpenChange, children: /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _chunkBTHYGHOHcjs.ResponsiveDialogContent, { presentation: "preview", className: "h-[92dvh] outline-none", children: [
-    /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _chunkBTHYGHOHcjs.ResponsiveDialogHeader, { className: "shrink-0 border-b border-border", children: [
+  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkAO56ET4Fcjs.ResponsiveDialog, { open, onOpenChange, children: /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _chunkAO56ET4Fcjs.ResponsiveDialogContent, { presentation: "preview", className: "h-[92dvh] outline-none", children: [
+    /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _chunkAO56ET4Fcjs.ResponsiveDialogHeader, { className: "shrink-0 border-b border-border", children: [
       /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "flex min-w-0 items-center gap-2", children: [
-        /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkBTHYGHOHcjs.ResponsiveDialogTitle, { className: "min-w-0 flex-1 truncate text-left", children: title }),
+        /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkAO56ET4Fcjs.ResponsiveDialogTitle, { className: "min-w-0 flex-1 truncate text-left", children: title }),
         onDownload && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
           _chunkJDEXZGIYcjs.Button,
           {
@@ -46,7 +46,7 @@ function PreviewDialog({
             children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkT2ZFSPE4cjs.Icon, { icon: downloading ? _lucidereact.Loader2 : _lucidereact.Download, size: "sm", spin: downloading })
           }
         ),
-        /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkBTHYGHOHcjs.ResponsiveDialogClose, { asChild: true, children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+        /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkAO56ET4Fcjs.ResponsiveDialogClose, { asChild: true, children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
           _chunkJDEXZGIYcjs.Button,
           {
             type: "button",
@@ -58,7 +58,7 @@ function PreviewDialog({
           }
         ) })
       ] }),
-      /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _chunkBTHYGHOHcjs.ResponsiveDialogDescription, { className: "sr-only", children: [
+      /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _chunkAO56ET4Fcjs.ResponsiveDialogDescription, { className: "sr-only", children: [
         "Preview of ",
         title
       ] })

package/dist/{chunk-C3VZMTVB.js → chunk-FPOJ2NGG.js}

@@ -6,7 +6,7 @@ import {
   ResponsiveDialogDescription,
   ResponsiveDialogHeader,
   ResponsiveDialogTitle
-} from "./chunk-JTI4244T.js";
+} from "./chunk-CRZ4INEJ.js";
 import {
   Icon
 } from "./chunk-KN4RPX35.js";

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');
 
 
 
@@ -54,6 +54,14 @@ require('../chunk-ELPV44S6.cjs');
 
 
 
+
+
+var _chunk2BHI5ZWJcjs = require('../chunk-2BHI5ZWJ.cjs');
+
+
+
+
+
 var _chunkZAITUDYDcjs = require('../chunk-ZAITUDYD.cjs');
 require('../chunk-U2NES7VR.cjs');
 
@@ -120,6 +128,7 @@ var _react = require('react');
 
 
 
+
 var _lucidereact = require('lucide-react');
 var _jsxruntime = require('react/jsx-runtime');
 function offersActions(message) {
@@ -179,15 +188,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 +205,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 +218,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 +274,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 })
           ] })
@@ -396,6 +405,7 @@ function ChatInput({
   addFilesLabel = "Add files",
   appearance = "default",
   compactOnBlur = false,
+  header,
   helperText,
   privacyNote
 }) {
@@ -469,6 +479,16 @@ function ChatInput({
                 className
               ),
               children: [
+                header && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+                  _chunk7LDJAXRXcjs.InputGroupAddon,
+                  {
+                    align: "block-start",
+                    className: "w-full cursor-default border-b border-border bg-muted/50 p-0 [.border-b]:pb-0",
+                    onClick: () => {
+                    },
+                    children: header
+                  }
+                ),
                 liveVoiceActive && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunk7LDJAXRXcjs.InputGroupAddon, { align: "block-start", className: "w-full cursor-default border-b border-border p-0 [.border-b]:pb-0", children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkYMI3X2YLcjs.VoiceSessionControls, { ...voiceSession }) }),
                 attachments.length > 0 && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
                   ChatAttachmentList,
@@ -697,6 +717,123 @@ function ChatSuggestions({
     )
   ] });
 }
+function MobileReplySuggestions({
+  items,
+  onSelect,
+  label,
+  moreLabel,
+  closeLabel,
+  disabled
+}) {
+  const [open, setOpen] = _react.useState.call(void 0, false);
+  const triggerRef = _react.useRef.call(void 0, null);
+  const closeRef = _react.useRef.call(void 0, null);
+  _react.useEffect.call(void 0, () => {
+    if (disabled) setOpen(false);
+  }, [disabled]);
+  const select = (item) => {
+    if (disabled) return;
+    setOpen(false);
+    onSelect(item);
+  };
+  const primary = items[0];
+  if (primary === void 0) return null;
+  return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _chunk2BHI5ZWJcjs.Drawer, { open, onOpenChange: setOpen, shouldScaleBackground: false, repositionInputs: false, children: [
+    /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, 
+      "div",
+      {
+        "data-slot": "chat-replies",
+        "data-variant": "compact",
+        role: "group",
+        "aria-label": label,
+        className: "flex w-full min-w-0 items-center text-foreground",
+        children: [
+          /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, 
+            _chunkJDEXZGIYcjs.Button,
+            {
+              type: "button",
+              variant: "ghost",
+              size: "bare",
+              disabled,
+              className: "h-[44px] min-h-[44px] min-w-0 flex-1 justify-start gap-2 px-3 text-left focus-visible:-ring-offset-2",
+              onClick: () => select(primary),
+              children: [
+                /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _lucidereact.ArrowUpRight, { "aria-hidden": "true" }),
+                /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", { className: "min-w-0 truncate", children: primary })
+              ]
+            }
+          ),
+          items.length > 1 && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunk2BHI5ZWJcjs.DrawerTrigger, { asChild: true, children: /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, 
+            _chunkJDEXZGIYcjs.Button,
+            {
+              ref: triggerRef,
+              type: "button",
+              variant: "ghost",
+              size: "bare",
+              disabled,
+              className: "h-[44px] min-h-[44px] shrink-0 gap-1 px-3 text-muted-foreground focus-visible:-ring-offset-2",
+              children: [
+                moreLabel(items.length - 1),
+                /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _lucidereact.ChevronUp, { "aria-hidden": "true" })
+              ]
+            }
+          ) })
+        ]
+      }
+    ),
+    /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, 
+      _chunk2BHI5ZWJcjs.DrawerContent,
+      {
+        "aria-describedby": void 0,
+        className: "max-h-[min(85dvh,40rem)] overflow-hidden pb-[env(safe-area-inset-bottom)]",
+        onOpenAutoFocus: (event) => {
+          event.preventDefault();
+          _optionalChain([closeRef, 'access', _9 => _9.current, 'optionalAccess', _10 => _10.focus, 'call', _11 => _11({ preventScroll: true })]);
+        },
+        onCloseAutoFocus: (event) => {
+          event.preventDefault();
+          if (_optionalChain([triggerRef, 'access', _12 => _12.current, 'optionalAccess', _13 => _13.isConnected]) && !triggerRef.current.disabled) {
+            triggerRef.current.focus({ preventScroll: true });
+          }
+        },
+        children: [
+          /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _chunk2BHI5ZWJcjs.DrawerHeader, { align: "start", className: "flex shrink-0 items-center justify-between gap-3 border-b px-4 py-2", children: [
+            /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunk2BHI5ZWJcjs.DrawerTitle, { className: "min-w-0 break-words leading-snug", children: label }),
+            /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunk2BHI5ZWJcjs.DrawerClose, { asChild: true, children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+              _chunkJDEXZGIYcjs.Button,
+              {
+                ref: closeRef,
+                type: "button",
+                variant: "ghost",
+                size: "icon",
+                "aria-label": closeLabel,
+                className: "h-[44px] w-[44px] shrink-0",
+                children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _lucidereact.X, { "aria-hidden": "true" })
+              }
+            ) })
+          ] }),
+          /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "min-h-0 overflow-y-auto overscroll-contain", role: "group", "aria-label": label, children: items.map((item) => /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, 
+            _chunkJDEXZGIYcjs.Button,
+            {
+              type: "button",
+              variant: "ghost",
+              size: "bare",
+              disabled,
+              "data-slot": "chat-reply-option",
+              className: "min-h-[56px] w-full justify-between gap-4 rounded-none border-b px-4 py-4 text-left text-base font-normal whitespace-normal last:border-b-0 focus-visible:-ring-offset-2",
+              onClick: () => select(item),
+              children: [
+                /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", { className: "min-w-0 break-words", children: item }),
+                /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _lucidereact.ArrowUpRight, { "aria-hidden": "true" })
+              ]
+            },
+            item
+          )) })
+        ]
+      }
+    )
+  ] });
+}
 function ExamplePromptsLoading({ label, className }) {
   const list = Array.isArray(label) ? label : [label];
   const [idx, setIdx] = _react.useState.call(void 0, 0);
@@ -740,6 +877,9 @@ var Chat = _react.forwardRef.call(void 0, function Chat2({
   examplePromptsLoadingLabel = "Loading suggestions\u2026",
   replySuggestions = [],
   replySuggestionsLabel = "Suggested replies",
+  mobileCompactSuggestions = false,
+  replySuggestionsMoreLabel = (count) => `+${count} more`,
+  replySuggestionsCloseLabel = "Close suggested replies",
   compactEmptyState = false,
   defaultMode,
   placeholder = "Type your message\u2026",
@@ -809,12 +949,12 @@ var Chat = _react.forwardRef.call(void 0, function Chat2({
         }
         reportSendError(cause);
       }
-      window.setTimeout(() => _optionalChain([inputRef, 'access', _9 => _9.current, 'optionalAccess', _10 => _10.focus, 'call', _11 => _11()]), 0);
+      window.setTimeout(() => _optionalChain([inputRef, 'access', _14 => _14.current, 'optionalAccess', _15 => _15.focus, 'call', _16 => _16()]), 0);
     },
     [attachments, mode, onSend, pending, reportSendError]
   );
   const sendSuggestion = _react.useCallback.call(void 0, 
-    async (text) => {
+    async (text, focusInput = true) => {
       const trimmed = text.trim();
       if (!trimmed || pending) return;
       try {
@@ -822,14 +962,14 @@ var Chat = _react.forwardRef.call(void 0, function Chat2({
       } catch (cause) {
         reportSendError(cause);
       }
-      window.setTimeout(() => _optionalChain([inputRef, 'access', _12 => _12.current, 'optionalAccess', _13 => _13.focus, 'call', _14 => _14()]), 0);
+      if (focusInput) window.setTimeout(() => _optionalChain([inputRef, 'access', _17 => _17.current, 'optionalAccess', _18 => _18.focus, 'call', _19 => _19()]), 0);
     },
     [onSend, pending, reportSendError]
   );
   _react.useImperativeHandle.call(void 0, 
     ref,
     () => ({
-      focusInput: () => _optionalChain([inputRef, 'access', _15 => _15.current, 'optionalAccess', _16 => _16.focus, 'call', _17 => _17()]),
+      focusInput: () => _optionalChain([inputRef, 'access', _20 => _20.current, 'optionalAccess', _21 => _21.focus, 'call', _22 => _22()]),
       clearInput: () => setInput("")
     }),
     []
@@ -837,12 +977,13 @@ var Chat = _react.forwardRef.call(void 0, function Chat2({
   const dropFiles = _react.useCallback.call(void 0, 
     (files) => {
       if (!conversationStarted && mode === "voice") setUserMode("text");
-      return _optionalChain([onFilesSelected, 'optionalCall', _18 => _18(files)]);
+      return _optionalChain([onFilesSelected, 'optionalCall', _23 => _23(files)]);
     },
     [conversationStarted, mode, onFilesSelected]
   );
   const application = layout === "application";
   const workspace = layout === "workspace";
+  const compactSuggestions = mobileCompactSuggestions && isMobile;
   const showEmptyFileDropzone = emptyFileDropzone && Boolean(onFilesSelected) && attachments.length === 0;
   const liveVoiceActive = voiceSession && voiceSession.state !== "disconnected" && voiceSession.state !== "error";
   const showEmptyPending = !conversationStarted && pending && Boolean(emptyPendingContent) && !liveVoiceActive;
@@ -1019,7 +1160,7 @@ var Chat = _react.forwardRef.call(void 0, function Chat2({
               workspace && mobileCompactComposer && "max-md:pb-[max(0.75rem,env(safe-area-inset-bottom))] max-md:pt-3"
             ),
             children: [
-              /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+              !compactSuggestions && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
                 ChatSuggestions,
                 {
                   slot: "chat-replies",
@@ -1034,6 +1175,18 @@ var Chat = _react.forwardRef.call(void 0, function Chat2({
               /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
                 ChatInput,
                 {
+                  header: compactSuggestions && replySuggestions.length > 0 ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+                    MobileReplySuggestions,
+                    {
+                      items: replySuggestions,
+                      onSelect: (reply) => void sendSuggestion(reply, false),
+                      label: replySuggestionsLabel,
+                      moreLabel: replySuggestionsMoreLabel,
+                      closeLabel: replySuggestionsCloseLabel,
+                      disabled: pending
+                    },
+                    JSON.stringify([_optionalChain([messages, 'access', _24 => _24.at, 'call', _25 => _25(-1), 'optionalAccess', _26 => _26.id]), replySuggestions])
+                  ) : void 0,
                   value: input,
                   onChange: setInput,
                   onSend: (text) => void send(text),

package/dist/primitives/chat.d.cts

@@ -197,6 +197,8 @@ interface ChatInputProps {
      * this only for an active mobile conversation with `mobileCompactComposer`.
      */
     compactOnBlur?: boolean;
+    /** Content inside the composer surface, above its files and text field. */
+    header?: ReactNode;
     /** Quiet contextual copy between the composer controls. */
     helperText?: ReactNode;
     /** Privacy or visibility reassurance rendered below the composer. */
@@ -219,7 +221,7 @@ interface ChatInputProps {
  * `<Chat>` instead of composing `<ChatInput>` directly if you want
  * device-aware default modes.
  */
-declare function ChatInput({ value, onChange, onSend, pending, disabled, placeholder, size, uploadingLabel, voice, voiceSession, voiceTitle, voiceLang, submitLabel, autoFocus, className, inputRef, attachments, onFilesSelected, onRemoveAttachment, accept, multiple, addFilesLabel, appearance, compactOnBlur, helperText, privacyNote, }: ChatInputProps): react_jsx_runtime.JSX.Element;
+declare function ChatInput({ value, onChange, onSend, pending, disabled, placeholder, size, uploadingLabel, voice, voiceSession, voiceTitle, voiceLang, submitLabel, autoFocus, className, inputRef, attachments, onFilesSelected, onRemoveAttachment, accept, multiple, addFilesLabel, appearance, compactOnBlur, header, helperText, privacyNote, }: ChatInputProps): react_jsx_runtime.JSX.Element;
 interface ChatProps {
     /** Conversation messages. */
     messages: ChatMessage[];
@@ -329,6 +331,12 @@ interface ChatProps {
     replySuggestions?: ReadonlyArray<string>;
     /** The reply suggestions' accessible name. Defaults to "Suggested replies". */
     replySuggestionsLabel?: string;
+    /** Below 768px, show replies inside the composer as the first reply and a bottom-sheet picker. Desktop chips are unchanged. */
+    mobileCompactSuggestions?: boolean;
+    /** The mobile picker's opener, given the number of additional replies. Defaults to `+N more`. */
+    replySuggestionsMoreLabel?: (count: number) => string;
+    /** Accessible label for closing the mobile picker. Defaults to "Close suggested replies". */
+    replySuggestionsCloseLabel?: string;
     /** Visual treatment for both empty and active text composers. */
     composerAppearance?: ChatInputProps["appearance"];
     /**

package/dist/primitives/chat.d.ts

@@ -197,6 +197,8 @@ interface ChatInputProps {
      * this only for an active mobile conversation with `mobileCompactComposer`.
      */
     compactOnBlur?: boolean;
+    /** Content inside the composer surface, above its files and text field. */
+    header?: ReactNode;
     /** Quiet contextual copy between the composer controls. */
     helperText?: ReactNode;
     /** Privacy or visibility reassurance rendered below the composer. */
@@ -219,7 +221,7 @@ interface ChatInputProps {
  * `<Chat>` instead of composing `<ChatInput>` directly if you want
  * device-aware default modes.
  */
-declare function ChatInput({ value, onChange, onSend, pending, disabled, placeholder, size, uploadingLabel, voice, voiceSession, voiceTitle, voiceLang, submitLabel, autoFocus, className, inputRef, attachments, onFilesSelected, onRemoveAttachment, accept, multiple, addFilesLabel, appearance, compactOnBlur, helperText, privacyNote, }: ChatInputProps): react_jsx_runtime.JSX.Element;
+declare function ChatInput({ value, onChange, onSend, pending, disabled, placeholder, size, uploadingLabel, voice, voiceSession, voiceTitle, voiceLang, submitLabel, autoFocus, className, inputRef, attachments, onFilesSelected, onRemoveAttachment, accept, multiple, addFilesLabel, appearance, compactOnBlur, header, helperText, privacyNote, }: ChatInputProps): react_jsx_runtime.JSX.Element;
 interface ChatProps {
     /** Conversation messages. */
     messages: ChatMessage[];
@@ -329,6 +331,12 @@ interface ChatProps {
     replySuggestions?: ReadonlyArray<string>;
     /** The reply suggestions' accessible name. Defaults to "Suggested replies". */
     replySuggestionsLabel?: string;
+    /** Below 768px, show replies inside the composer as the first reply and a bottom-sheet picker. Desktop chips are unchanged. */
+    mobileCompactSuggestions?: boolean;
+    /** The mobile picker's opener, given the number of additional replies. Defaults to `+N more`. */
+    replySuggestionsMoreLabel?: (count: number) => string;
+    /** Accessible label for closing the mobile picker. Defaults to "Close suggested replies". */
+    replySuggestionsCloseLabel?: string;
     /** Visual treatment for both empty and active text composers. */
     composerAppearance?: ChatInputProps["appearance"];
     /**

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,
@@ -49,6 +49,14 @@ import {
   LazyMarkdown
 } from "../chunk-VY5U4VGV.js";
 import "../chunk-INNGGLMZ.js";
+import {
+  Drawer,
+  DrawerClose,
+  DrawerContent,
+  DrawerHeader,
+  DrawerTitle,
+  DrawerTrigger
+} from "../chunk-4HWCNRK4.js";
 import {
   DropdownMenu,
   DropdownMenuContent,
@@ -113,6 +121,7 @@ import {
   ArrowUp,
   ArrowUpRight,
   Check,
+  ChevronUp,
   Copy,
   Download,
   FileText,
@@ -396,6 +405,7 @@ function ChatInput({
   addFilesLabel = "Add files",
   appearance = "default",
   compactOnBlur = false,
+  header,
   helperText,
   privacyNote
 }) {
@@ -469,6 +479,16 @@ function ChatInput({
                 className
               ),
               children: [
+                header && /* @__PURE__ */ jsx(
+                  InputGroupAddon,
+                  {
+                    align: "block-start",
+                    className: "w-full cursor-default border-b border-border bg-muted/50 p-0 [.border-b]:pb-0",
+                    onClick: () => {
+                    },
+                    children: header
+                  }
+                ),
                 liveVoiceActive && /* @__PURE__ */ jsx(InputGroupAddon, { align: "block-start", className: "w-full cursor-default border-b border-border p-0 [.border-b]:pb-0", children: /* @__PURE__ */ jsx(VoiceSessionControls, { ...voiceSession }) }),
                 attachments.length > 0 && /* @__PURE__ */ jsx(
                   ChatAttachmentList,
@@ -697,6 +717,123 @@ function ChatSuggestions({
     )
   ] });
 }
+function MobileReplySuggestions({
+  items,
+  onSelect,
+  label,
+  moreLabel,
+  closeLabel,
+  disabled
+}) {
+  const [open, setOpen] = useState(false);
+  const triggerRef = useRef(null);
+  const closeRef = useRef(null);
+  useEffect(() => {
+    if (disabled) setOpen(false);
+  }, [disabled]);
+  const select = (item) => {
+    if (disabled) return;
+    setOpen(false);
+    onSelect(item);
+  };
+  const primary = items[0];
+  if (primary === void 0) return null;
+  return /* @__PURE__ */ jsxs(Drawer, { open, onOpenChange: setOpen, shouldScaleBackground: false, repositionInputs: false, children: [
+    /* @__PURE__ */ jsxs(
+      "div",
+      {
+        "data-slot": "chat-replies",
+        "data-variant": "compact",
+        role: "group",
+        "aria-label": label,
+        className: "flex w-full min-w-0 items-center text-foreground",
+        children: [
+          /* @__PURE__ */ jsxs(
+            Button,
+            {
+              type: "button",
+              variant: "ghost",
+              size: "bare",
+              disabled,
+              className: "h-[44px] min-h-[44px] min-w-0 flex-1 justify-start gap-2 px-3 text-left focus-visible:-ring-offset-2",
+              onClick: () => select(primary),
+              children: [
+                /* @__PURE__ */ jsx(ArrowUpRight, { "aria-hidden": "true" }),
+                /* @__PURE__ */ jsx("span", { className: "min-w-0 truncate", children: primary })
+              ]
+            }
+          ),
+          items.length > 1 && /* @__PURE__ */ jsx(DrawerTrigger, { asChild: true, children: /* @__PURE__ */ jsxs(
+            Button,
+            {
+              ref: triggerRef,
+              type: "button",
+              variant: "ghost",
+              size: "bare",
+              disabled,
+              className: "h-[44px] min-h-[44px] shrink-0 gap-1 px-3 text-muted-foreground focus-visible:-ring-offset-2",
+              children: [
+                moreLabel(items.length - 1),
+                /* @__PURE__ */ jsx(ChevronUp, { "aria-hidden": "true" })
+              ]
+            }
+          ) })
+        ]
+      }
+    ),
+    /* @__PURE__ */ jsxs(
+      DrawerContent,
+      {
+        "aria-describedby": void 0,
+        className: "max-h-[min(85dvh,40rem)] overflow-hidden pb-[env(safe-area-inset-bottom)]",
+        onOpenAutoFocus: (event) => {
+          event.preventDefault();
+          closeRef.current?.focus({ preventScroll: true });
+        },
+        onCloseAutoFocus: (event) => {
+          event.preventDefault();
+          if (triggerRef.current?.isConnected && !triggerRef.current.disabled) {
+            triggerRef.current.focus({ preventScroll: true });
+          }
+        },
+        children: [
+          /* @__PURE__ */ jsxs(DrawerHeader, { align: "start", className: "flex shrink-0 items-center justify-between gap-3 border-b px-4 py-2", children: [
+            /* @__PURE__ */ jsx(DrawerTitle, { className: "min-w-0 break-words leading-snug", children: label }),
+            /* @__PURE__ */ jsx(DrawerClose, { asChild: true, children: /* @__PURE__ */ jsx(
+              Button,
+              {
+                ref: closeRef,
+                type: "button",
+                variant: "ghost",
+                size: "icon",
+                "aria-label": closeLabel,
+                className: "h-[44px] w-[44px] shrink-0",
+                children: /* @__PURE__ */ jsx(X, { "aria-hidden": "true" })
+              }
+            ) })
+          ] }),
+          /* @__PURE__ */ jsx("div", { className: "min-h-0 overflow-y-auto overscroll-contain", role: "group", "aria-label": label, children: items.map((item) => /* @__PURE__ */ jsxs(
+            Button,
+            {
+              type: "button",
+              variant: "ghost",
+              size: "bare",
+              disabled,
+              "data-slot": "chat-reply-option",
+              className: "min-h-[56px] w-full justify-between gap-4 rounded-none border-b px-4 py-4 text-left text-base font-normal whitespace-normal last:border-b-0 focus-visible:-ring-offset-2",
+              onClick: () => select(item),
+              children: [
+                /* @__PURE__ */ jsx("span", { className: "min-w-0 break-words", children: item }),
+                /* @__PURE__ */ jsx(ArrowUpRight, { "aria-hidden": "true" })
+              ]
+            },
+            item
+          )) })
+        ]
+      }
+    )
+  ] });
+}
 function ExamplePromptsLoading({ label, className }) {
   const list = Array.isArray(label) ? label : [label];
   const [idx, setIdx] = useState(0);
@@ -740,6 +877,9 @@ var Chat = forwardRef(function Chat2({
   examplePromptsLoadingLabel = "Loading suggestions\u2026",
   replySuggestions = [],
   replySuggestionsLabel = "Suggested replies",
+  mobileCompactSuggestions = false,
+  replySuggestionsMoreLabel = (count) => `+${count} more`,
+  replySuggestionsCloseLabel = "Close suggested replies",
   compactEmptyState = false,
   defaultMode,
   placeholder = "Type your message\u2026",
@@ -814,7 +954,7 @@ var Chat = forwardRef(function Chat2({
     [attachments, mode, onSend, pending, reportSendError]
   );
   const sendSuggestion = useCallback(
-    async (text) => {
+    async (text, focusInput = true) => {
       const trimmed = text.trim();
       if (!trimmed || pending) return;
       try {
@@ -822,7 +962,7 @@ var Chat = forwardRef(function Chat2({
       } catch (cause) {
         reportSendError(cause);
       }
-      window.setTimeout(() => inputRef.current?.focus(), 0);
+      if (focusInput) window.setTimeout(() => inputRef.current?.focus(), 0);
     },
     [onSend, pending, reportSendError]
   );
@@ -843,6 +983,7 @@ var Chat = forwardRef(function Chat2({
   );
   const application = layout === "application";
   const workspace = layout === "workspace";
+  const compactSuggestions = mobileCompactSuggestions && isMobile;
   const showEmptyFileDropzone = emptyFileDropzone && Boolean(onFilesSelected) && attachments.length === 0;
   const liveVoiceActive = voiceSession && voiceSession.state !== "disconnected" && voiceSession.state !== "error";
   const showEmptyPending = !conversationStarted && pending && Boolean(emptyPendingContent) && !liveVoiceActive;
@@ -1019,7 +1160,7 @@ var Chat = forwardRef(function Chat2({
               workspace && mobileCompactComposer && "max-md:pb-[max(0.75rem,env(safe-area-inset-bottom))] max-md:pt-3"
             ),
             children: [
-              /* @__PURE__ */ jsx(
+              !compactSuggestions && /* @__PURE__ */ jsx(
                 ChatSuggestions,
                 {
                   slot: "chat-replies",
@@ -1034,6 +1175,18 @@ var Chat = forwardRef(function Chat2({
               /* @__PURE__ */ jsx(
                 ChatInput,
                 {
+                  header: compactSuggestions && replySuggestions.length > 0 ? /* @__PURE__ */ jsx(
+                    MobileReplySuggestions,
+                    {
+                      items: replySuggestions,
+                      onSelect: (reply) => void sendSuggestion(reply, false),
+                      label: replySuggestionsLabel,
+                      moreLabel: replySuggestionsMoreLabel,
+                      closeLabel: replySuggestionsCloseLabel,
+                      disabled: pending
+                    },
+                    JSON.stringify([messages.at(-1)?.id, replySuggestions])
+                  ) : void 0,
                   value: input,
                   onChange: setInput,
                   onSend: (text) => void send(text),

package/dist/primitives/document-preview.cjs

@@ -5,10 +5,10 @@
 
 
 
-var _chunkTP74SBRHcjs = require('../chunk-TP74SBRH.cjs');
-require('../chunk-BTHYGHOH.cjs');
-require('../chunk-2BHI5ZWJ.cjs');
+var _chunkE2UVQXBOcjs = require('../chunk-E2UVQXBO.cjs');
+require('../chunk-AO56ET4F.cjs');
 require('../chunk-WDXEJDMO.cjs');
+require('../chunk-2BHI5ZWJ.cjs');
 require('../chunk-T2ZFSPE4.cjs');
 require('../chunk-JDEXZGIY.cjs');
 require('../chunk-KWLSBTB2.cjs');
@@ -29,7 +29,7 @@ function DocumentPreview({
   fallback
 }) {
   return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-    _chunkTP74SBRHcjs.PreviewDialog,
+    _chunkE2UVQXBOcjs.PreviewDialog,
     {
       open,
       onOpenChange,
@@ -37,7 +37,7 @@ function DocumentPreview({
       onDownload,
       downloading,
       downloadLabel,
-      children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkTP74SBRHcjs.PreviewStage, { children: loading ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkTP74SBRHcjs.PreviewLoading, { label: "Loading preview\u2026" }) : error ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkTP74SBRHcjs.PreviewNotice, { icon: _lucidereact.FileWarning, alert: true, message: error, children: fallback }) : src ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+      children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkE2UVQXBOcjs.PreviewStage, { children: loading ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkE2UVQXBOcjs.PreviewLoading, { label: "Loading preview\u2026" }) : error ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkE2UVQXBOcjs.PreviewNotice, { icon: _lucidereact.FileWarning, alert: true, message: error, children: fallback }) : src ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
         "iframe",
         {
           src,

package/dist/primitives/document-preview.js

@@ -5,10 +5,10 @@ import {
   PreviewLoading,
   PreviewNotice,
   PreviewStage
-} from "../chunk-C3VZMTVB.js";
-import "../chunk-JTI4244T.js";
-import "../chunk-4HWCNRK4.js";
+} from "../chunk-FPOJ2NGG.js";
+import "../chunk-CRZ4INEJ.js";
 import "../chunk-3QT5VYZ3.js";
+import "../chunk-4HWCNRK4.js";
 import "../chunk-KN4RPX35.js";
 import "../chunk-W326GKML.js";
 import "../chunk-G6SRSWXB.js";

package/dist/primitives/file-preview-internals.cjs

@@ -5,10 +5,10 @@
 
 
 
-var _chunkTP74SBRHcjs = require('../chunk-TP74SBRH.cjs');
-require('../chunk-BTHYGHOH.cjs');
-require('../chunk-2BHI5ZWJ.cjs');
+var _chunkE2UVQXBOcjs = require('../chunk-E2UVQXBO.cjs');
+require('../chunk-AO56ET4F.cjs');
 require('../chunk-WDXEJDMO.cjs');
+require('../chunk-2BHI5ZWJ.cjs');
 require('../chunk-T2ZFSPE4.cjs');
 require('../chunk-JDEXZGIY.cjs');
 require('../chunk-KWLSBTB2.cjs');
@@ -17,4 +17,4 @@ require('../chunk-KWLSBTB2.cjs');
 
 
 
-exports.PreviewDialog = _chunkTP74SBRHcjs.PreviewDialog; exports.PreviewLoading = _chunkTP74SBRHcjs.PreviewLoading; exports.PreviewNotice = _chunkTP74SBRHcjs.PreviewNotice; exports.PreviewStage = _chunkTP74SBRHcjs.PreviewStage;
+exports.PreviewDialog = _chunkE2UVQXBOcjs.PreviewDialog; exports.PreviewLoading = _chunkE2UVQXBOcjs.PreviewLoading; exports.PreviewNotice = _chunkE2UVQXBOcjs.PreviewNotice; exports.PreviewStage = _chunkE2UVQXBOcjs.PreviewStage;

package/dist/primitives/file-preview-internals.js

@@ -5,10 +5,10 @@ import {
   PreviewLoading,
   PreviewNotice,
   PreviewStage
-} from "../chunk-C3VZMTVB.js";
-import "../chunk-JTI4244T.js";
-import "../chunk-4HWCNRK4.js";
+} from "../chunk-FPOJ2NGG.js";
+import "../chunk-CRZ4INEJ.js";
 import "../chunk-3QT5VYZ3.js";
+import "../chunk-4HWCNRK4.js";
 import "../chunk-KN4RPX35.js";
 import "../chunk-W326GKML.js";
 import "../chunk-G6SRSWXB.js";

package/dist/primitives/file-preview.cjs

@@ -8,14 +8,14 @@ var _chunk4UUTKR3Vcjs = require('../chunk-4UUTKR3V.cjs');
 
 
 
-var _chunkTP74SBRHcjs = require('../chunk-TP74SBRH.cjs');
-require('../chunk-BTHYGHOH.cjs');
-require('../chunk-2BHI5ZWJ.cjs');
+var _chunkE2UVQXBOcjs = require('../chunk-E2UVQXBO.cjs');
+require('../chunk-AO56ET4F.cjs');
 require('../chunk-WDXEJDMO.cjs');
 
 
 var _chunkKENBU3NVcjs = require('../chunk-KENBU3NV.cjs');
 require('../chunk-ELPV44S6.cjs');
+require('../chunk-2BHI5ZWJ.cjs');
 
 
 var _chunkBGCNGYPLcjs = require('../chunk-BGCNGYPL.cjs');
@@ -155,7 +155,7 @@ function FilePreview({
   truncatedLabel = "Showing the start of this file. Download it to see the rest."
 }) {
   return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-    _chunkTP74SBRHcjs.PreviewDialog,
+    _chunkE2UVQXBOcjs.PreviewDialog,
     {
       open,
       onOpenChange,
@@ -266,17 +266,17 @@ function FilePreviewBody({
   const reads = kind === "text" || kind === "markdown";
   const text = useFileText(ready && reads ? file : null, ready && reads ? src : null);
   const objectUrl = useObjectUrl(ready && !reads ? file : null, kind === "pdf" ? "application/pdf" : void 0);
-  const pending = /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkTP74SBRHcjs.PreviewStage, { children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkTP74SBRHcjs.PreviewLoading, { label: loadingLabel }) });
-  const failed = (message) => /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkTP74SBRHcjs.PreviewStage, { children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkTP74SBRHcjs.PreviewNotice, { icon: _lucidereact.FileWarning, alert: true, message, children: _nullishCoalesce(fallback, () => ( download)) }) });
+  const pending = /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkE2UVQXBOcjs.PreviewStage, { children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkE2UVQXBOcjs.PreviewLoading, { label: loadingLabel }) });
+  const failed = (message) => /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkE2UVQXBOcjs.PreviewStage, { children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkE2UVQXBOcjs.PreviewNotice, { icon: _lucidereact.FileWarning, alert: true, message, children: _nullishCoalesce(fallback, () => ( download)) }) });
   if (loading) return pending;
   if (error) return failed(error);
   if (kind === "none" || !file && !src) {
-    return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkTP74SBRHcjs.PreviewStage, { children: _nullishCoalesce(fallback, () => ( /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkTP74SBRHcjs.PreviewNotice, { icon: _lucidereact.FileQuestion, message: unavailableLabel, children: download }))) });
+    return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkE2UVQXBOcjs.PreviewStage, { children: _nullishCoalesce(fallback, () => ( /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkE2UVQXBOcjs.PreviewNotice, { icon: _lucidereact.FileQuestion, message: unavailableLabel, children: download }))) });
   }
   if (reads) {
     if (!text || text.status === "reading") return pending;
     if (text.status === "failed") return failed(failedLabel);
-    return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _chunkTP74SBRHcjs.PreviewStage, { layout: "scroll", label: `Preview of ${title}`, children: [
+    return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _chunkE2UVQXBOcjs.PreviewStage, { layout: "scroll", label: `Preview of ${title}`, children: [
       text.truncated && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunk373W6VADcjs.Text, { variant: "caption", marginBottom: "sm", children: truncatedLabel }),
       kind === "markdown" ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkKENBU3NVcjs.LazyMarkdown, { components: { a: NewTabLink, ...markdownComponents }, children: text.text }) : (
         // The theme's relaxed leading is a fixed 1.8rem, which spaces a
@@ -300,13 +300,13 @@ function ShownFile({
   const fail = () => setBroken(true);
   const label = `Preview of ${title}`;
   if (kind === "image") {
-    return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkTP74SBRHcjs.PreviewStage, { children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "flex h-full w-full items-center justify-center p-4", children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunk4UUTKR3Vcjs.Image, { src: url, alt: title, fit: "contain", radius: "sm", className: "max-h-full max-w-full", onError: fail }) }) });
+    return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkE2UVQXBOcjs.PreviewStage, { children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "flex h-full w-full items-center justify-center p-4", children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunk4UUTKR3Vcjs.Image, { src: url, alt: title, fit: "contain", radius: "sm", className: "max-h-full max-w-full", onError: fail }) }) });
   }
   if (kind === "audio") {
-    return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkTP74SBRHcjs.PreviewStage, { children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "w-full max-w-md p-6", children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "audio", { src: url, controls: true, preload: "metadata", "aria-label": label, className: "w-full", onError: fail }) }) });
+    return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkE2UVQXBOcjs.PreviewStage, { children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "w-full max-w-md p-6", children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "audio", { src: url, controls: true, preload: "metadata", "aria-label": label, className: "w-full", onError: fail }) }) });
   }
   if (kind === "video") {
-    return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkTP74SBRHcjs.PreviewStage, { children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "flex h-full w-full items-center justify-center p-4", children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+    return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkE2UVQXBOcjs.PreviewStage, { children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "flex h-full w-full items-center justify-center p-4", children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
       "video",
       {
         src: url,
@@ -319,7 +319,7 @@ function ShownFile({
       }
     ) }) });
   }
-  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkTP74SBRHcjs.PreviewStage, { children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "iframe", { src: url, title: label, referrerPolicy: "no-referrer", className: "h-full w-full border-0 bg-background" }) });
+  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkE2UVQXBOcjs.PreviewStage, { children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "iframe", { src: url, title: label, referrerPolicy: "no-referrer", className: "h-full w-full border-0 bg-background" }) });
 }
 
 

package/dist/primitives/file-preview.js

@@ -8,14 +8,14 @@ import {
   PreviewLoading,
   PreviewNotice,
   PreviewStage
-} from "../chunk-C3VZMTVB.js";
-import "../chunk-JTI4244T.js";
-import "../chunk-4HWCNRK4.js";
+} from "../chunk-FPOJ2NGG.js";
+import "../chunk-CRZ4INEJ.js";
 import "../chunk-3QT5VYZ3.js";
 import {
   LazyMarkdown
 } from "../chunk-VY5U4VGV.js";
 import "../chunk-INNGGLMZ.js";
+import "../chunk-4HWCNRK4.js";
 import {
   CodeBlock
 } from "../chunk-HTPPNW74.js";

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/responsive-dialog.cjs

@@ -9,9 +9,9 @@
 
 
 
-var _chunkBTHYGHOHcjs = require('../chunk-BTHYGHOH.cjs');
-require('../chunk-2BHI5ZWJ.cjs');
+var _chunkAO56ET4Fcjs = require('../chunk-AO56ET4F.cjs');
 require('../chunk-WDXEJDMO.cjs');
+require('../chunk-2BHI5ZWJ.cjs');
 require('../chunk-KWLSBTB2.cjs');
 
 
@@ -23,4 +23,4 @@ require('../chunk-KWLSBTB2.cjs');
 
 
 
-exports.ResponsiveDialog = _chunkBTHYGHOHcjs.ResponsiveDialog; exports.ResponsiveDialogBody = _chunkBTHYGHOHcjs.ResponsiveDialogBody; exports.ResponsiveDialogClose = _chunkBTHYGHOHcjs.ResponsiveDialogClose; exports.ResponsiveDialogContent = _chunkBTHYGHOHcjs.ResponsiveDialogContent; exports.ResponsiveDialogDescription = _chunkBTHYGHOHcjs.ResponsiveDialogDescription; exports.ResponsiveDialogFooter = _chunkBTHYGHOHcjs.ResponsiveDialogFooter; exports.ResponsiveDialogHeader = _chunkBTHYGHOHcjs.ResponsiveDialogHeader; exports.ResponsiveDialogTitle = _chunkBTHYGHOHcjs.ResponsiveDialogTitle; exports.ResponsiveDialogTrigger = _chunkBTHYGHOHcjs.ResponsiveDialogTrigger;
+exports.ResponsiveDialog = _chunkAO56ET4Fcjs.ResponsiveDialog; exports.ResponsiveDialogBody = _chunkAO56ET4Fcjs.ResponsiveDialogBody; exports.ResponsiveDialogClose = _chunkAO56ET4Fcjs.ResponsiveDialogClose; exports.ResponsiveDialogContent = _chunkAO56ET4Fcjs.ResponsiveDialogContent; exports.ResponsiveDialogDescription = _chunkAO56ET4Fcjs.ResponsiveDialogDescription; exports.ResponsiveDialogFooter = _chunkAO56ET4Fcjs.ResponsiveDialogFooter; exports.ResponsiveDialogHeader = _chunkAO56ET4Fcjs.ResponsiveDialogHeader; exports.ResponsiveDialogTitle = _chunkAO56ET4Fcjs.ResponsiveDialogTitle; exports.ResponsiveDialogTrigger = _chunkAO56ET4Fcjs.ResponsiveDialogTrigger;

package/dist/primitives/responsive-dialog.js

@@ -9,9 +9,9 @@ import {
   ResponsiveDialogHeader,
   ResponsiveDialogTitle,
   ResponsiveDialogTrigger
-} from "../chunk-JTI4244T.js";
-import "../chunk-4HWCNRK4.js";
+} from "../chunk-CRZ4INEJ.js";
 import "../chunk-3QT5VYZ3.js";
+import "../chunk-4HWCNRK4.js";
 import "../chunk-G6SRSWXB.js";
 export {
   ResponsiveDialog,

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.18.0",
+  "version": "1.20.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";

package/dist/{chunk-BTHYGHOH.cjs → chunk-AO56ET4F.cjs}

@@ -8,7 +8,7 @@
 
 
 
-var _chunk2BHI5ZWJcjs = require('./chunk-2BHI5ZWJ.cjs');
+var _chunkWDXEJDMOcjs = require('./chunk-WDXEJDMO.cjs');
 
 
 
@@ -18,7 +18,7 @@ var _chunk2BHI5ZWJcjs = require('./chunk-2BHI5ZWJ.cjs');
 
 
 
-var _chunkWDXEJDMOcjs = require('./chunk-WDXEJDMO.cjs');
+var _chunk2BHI5ZWJcjs = require('./chunk-2BHI5ZWJ.cjs');
 
 
 var _chunkKWLSBTB2cjs = require('./chunk-KWLSBTB2.cjs');

package/dist/{chunk-JTI4244T.js → chunk-CRZ4INEJ.js}

@@ -1,14 +1,4 @@
 "use client";
-import {
-  Drawer,
-  DrawerClose,
-  DrawerContent,
-  DrawerDescription,
-  DrawerFooter,
-  DrawerHeader,
-  DrawerTitle,
-  DrawerTrigger
-} from "./chunk-4HWCNRK4.js";
 import {
   Dialog,
   DialogClose,
@@ -19,6 +9,16 @@ import {
   DialogTitle,
   DialogTrigger
 } from "./chunk-3QT5VYZ3.js";
+import {
+  Drawer,
+  DrawerClose,
+  DrawerContent,
+  DrawerDescription,
+  DrawerFooter,
+  DrawerHeader,
+  DrawerTitle,
+  DrawerTrigger
+} from "./chunk-4HWCNRK4.js";
 import {
   cn
 } from "./chunk-G6SRSWXB.js";