@epicbagel/saas-kit 1.5.0 → 1.6.0

package/dist/primitives/button.d.cts

@@ -4,12 +4,12 @@ import * as class_variance_authority_types from 'class-variance-authority/types'
 import { VariantProps } from 'class-variance-authority';
 
 declare const buttonVariants: (props?: ({
-    variant?: "link" | "default" | "secondary" | "destructive" | "outline" | "outline-muted" | "ghost" | "quiet" | "ghost-destructive" | "link-muted" | "inverted" | "status-error" | "status-warning" | "status-muted" | null | undefined;
-    size?: "filter" | "status" | "toolbar" | "sm" | "lg" | "default" | "micro" | "compact" | "hero" | "icon" | "icon-lg" | "icon-sm" | "icon-md" | "icon-xs" | "icon-compact" | "icon-micro" | "bare" | "voice-sm" | "voice" | "suggestion" | "tone" | null | undefined;
+    variant?: "link" | "default" | "ghost" | "secondary" | "destructive" | "outline" | "outline-muted" | "quiet" | "ghost-destructive" | "link-muted" | "inverted" | "status-error" | "status-warning" | "status-muted" | null | undefined;
+    size?: "filter" | "status" | "toolbar" | "sm" | "lg" | "default" | "micro" | "tone" | "compact" | "hero" | "icon" | "icon-lg" | "icon-sm" | "icon-md" | "icon-xs" | "icon-compact" | "icon-micro" | "bare" | "voice-sm" | "voice" | "suggestion" | null | undefined;
     width?: "auto" | "full" | "responsive" | null | undefined;
     align?: "center" | "start" | null | undefined;
     shrink?: boolean | null | undefined;
-    shape?: "circle" | "default" | null | undefined;
+    shape?: "circle" | "default" | "pill" | null | undefined;
     ring?: "none" | "surface" | null | undefined;
     grow?: boolean | null | undefined;
     minWidth?: "auto" | "zero" | null | undefined;

package/dist/primitives/button.d.ts

@@ -4,12 +4,12 @@ import * as class_variance_authority_types from 'class-variance-authority/types'
 import { VariantProps } from 'class-variance-authority';
 
 declare const buttonVariants: (props?: ({
-    variant?: "link" | "default" | "secondary" | "destructive" | "outline" | "outline-muted" | "ghost" | "quiet" | "ghost-destructive" | "link-muted" | "inverted" | "status-error" | "status-warning" | "status-muted" | null | undefined;
-    size?: "filter" | "status" | "toolbar" | "sm" | "lg" | "default" | "micro" | "compact" | "hero" | "icon" | "icon-lg" | "icon-sm" | "icon-md" | "icon-xs" | "icon-compact" | "icon-micro" | "bare" | "voice-sm" | "voice" | "suggestion" | "tone" | null | undefined;
+    variant?: "link" | "default" | "ghost" | "secondary" | "destructive" | "outline" | "outline-muted" | "quiet" | "ghost-destructive" | "link-muted" | "inverted" | "status-error" | "status-warning" | "status-muted" | null | undefined;
+    size?: "filter" | "status" | "toolbar" | "sm" | "lg" | "default" | "micro" | "tone" | "compact" | "hero" | "icon" | "icon-lg" | "icon-sm" | "icon-md" | "icon-xs" | "icon-compact" | "icon-micro" | "bare" | "voice-sm" | "voice" | "suggestion" | null | undefined;
     width?: "auto" | "full" | "responsive" | null | undefined;
     align?: "center" | "start" | null | undefined;
     shrink?: boolean | null | undefined;
-    shape?: "circle" | "default" | null | undefined;
+    shape?: "circle" | "default" | "pill" | null | undefined;
     ring?: "none" | "surface" | null | undefined;
     grow?: boolean | null | undefined;
     minWidth?: "auto" | "zero" | null | undefined;

package/dist/primitives/button.js

@@ -2,7 +2,7 @@
 import {
   Button,
   buttonVariants
-} from "../chunk-HQRWRRZJ.js";
+} from "../chunk-W326GKML.js";
 import "../chunk-G6SRSWXB.js";
 export {
   Button,

package/dist/primitives/calendar.cjs

@@ -2,10 +2,10 @@
 
 
 
-var _chunkR5L4CM6Vcjs = require('../chunk-R5L4CM6V.cjs');
-require('../chunk-L4DH72UF.cjs');
+var _chunkVOTCYG3Fcjs = require('../chunk-VOTCYG3F.cjs');
+require('../chunk-JDEXZGIY.cjs');
 require('../chunk-KWLSBTB2.cjs');
 
 
 
-exports.Calendar = _chunkR5L4CM6Vcjs.Calendar; exports.CalendarDayButton = _chunkR5L4CM6Vcjs.CalendarDayButton;
+exports.Calendar = _chunkVOTCYG3Fcjs.Calendar; exports.CalendarDayButton = _chunkVOTCYG3Fcjs.CalendarDayButton;

package/dist/primitives/calendar.js

@@ -2,8 +2,8 @@
 import {
   Calendar,
   CalendarDayButton
-} from "../chunk-RRRD5EUI.js";
-import "../chunk-HQRWRRZJ.js";
+} from "../chunk-H2CCBRVG.js";
+import "../chunk-W326GKML.js";
 import "../chunk-G6SRSWXB.js";
 export {
   Calendar,

package/dist/primitives/chat.cjs

@@ -7,11 +7,11 @@
 var _chunk2BTDBZYNcjs = require('../chunk-2BTDBZYN.cjs');
 
 
-var _chunkEOUO3OROcjs = require('../chunk-EOUO3ORO.cjs');
+var _chunkLKPM6DQPcjs = require('../chunk-LKPM6DQP.cjs');
 
 
 
-var _chunkSUB4BAYEcjs = require('../chunk-SUB4BAYE.cjs');
+var _chunkM4V7OJNFcjs = require('../chunk-M4V7OJNF.cjs');
 
 
 
@@ -19,13 +19,13 @@ var _chunkSUB4BAYEcjs = require('../chunk-SUB4BAYE.cjs');
 
 
 
-var _chunkXABXUP6Lcjs = require('../chunk-XABXUP6L.cjs');
+var _chunk5VMKDVB6cjs = require('../chunk-5VMKDVB6.cjs');
 
 
 
 
 
-var _chunkLAN3K2JIcjs = require('../chunk-LAN3K2JI.cjs');
+var _chunkNWDPH2Z7cjs = require('../chunk-NWDPH2Z7.cjs');
 
 
 
@@ -34,12 +34,12 @@ var _chunkB765DSRGcjs = require('../chunk-B765DSRG.cjs');
 
 
 
-var _chunkRIWLAMMEcjs = require('../chunk-RIWLAMME.cjs');
+var _chunk7LDJAXRXcjs = require('../chunk-7LDJAXRX.cjs');
 require('../chunk-2HV2KKOE.cjs');
 
 
 
-var _chunkKADJ56AHcjs = require('../chunk-KADJ56AH.cjs');
+var _chunkZ3JJSNR5cjs = require('../chunk-Z3JJSNR5.cjs');
 
 
 var _chunkKENBU3NVcjs = require('../chunk-KENBU3NV.cjs');
@@ -66,7 +66,7 @@ require('../chunk-W5HPHEE7.cjs');
 
 
 
-var _chunk32Q4XOTUcjs = require('../chunk-32Q4XOTU.cjs');
+var _chunkFYRQFEU4cjs = require('../chunk-FYRQFEU4.cjs');
 require('../chunk-U2NES7VR.cjs');
 
 
@@ -74,7 +74,7 @@ var _chunk2KFZQJH5cjs = require('../chunk-2KFZQJH5.cjs');
 require('../chunk-PQUSJEXL.cjs');
 
 
-var _chunkL4DH72UFcjs = require('../chunk-L4DH72UF.cjs');
+var _chunkJDEXZGIYcjs = require('../chunk-JDEXZGIY.cjs');
 
 
 var _chunk4LXN6GLZcjs = require('../chunk-4LXN6GLZ.cjs');
@@ -149,7 +149,7 @@ function ChatRunningLine({
   align = "start",
   workspace
 }) {
-  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkLAN3K2JIcjs.Message, { align, children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkLAN3K2JIcjs.MessageContent, { children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunk2BTDBZYNcjs.Trace, { className: workspace ? void 0 : "px-3.5 py-2", children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunk2BTDBZYNcjs.TraceLine, { status: "running", children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunk2BTDBZYNcjs.TraceTitle, { children: label }) }) }) }) });
+  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkNWDPH2Z7cjs.Message, { align, children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkNWDPH2Z7cjs.MessageContent, { children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunk2BTDBZYNcjs.Trace, { className: workspace ? void 0 : "px-3.5 py-2", children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunk2BTDBZYNcjs.TraceLine, { status: "running", children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunk2BTDBZYNcjs.TraceTitle, { children: label }) }) }) }) });
 }
 var ChatThread = _react.forwardRef.call(void 0, 
   function ChatThread2({
@@ -170,15 +170,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, _chunkXABXUP6Lcjs.MessageScrollerProvider, { autoScroll: true, children: /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, 
-      _chunkXABXUP6Lcjs.MessageScroller,
+    return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunk5VMKDVB6cjs.MessageScrollerProvider, { autoScroll: true, children: /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, 
+      _chunk5VMKDVB6cjs.MessageScroller,
       {
         ref,
         style: { maxHeight },
         className: _chunkKWLSBTB2cjs.cn.call(void 0, "min-h-0", className),
         children: [
-          /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkXABXUP6Lcjs.MessageScrollerViewport, { children: /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, 
-            _chunkXABXUP6Lcjs.MessageScrollerContent,
+          /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunk5VMKDVB6cjs.MessageScrollerViewport, { children: /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, 
+            _chunk5VMKDVB6cjs.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"
@@ -187,7 +187,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, _chunkXABXUP6Lcjs.MessageScrollerItem, { children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+                    return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunk5VMKDVB6cjs.MessageScrollerItem, { children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
                       ChatRunningLine,
                       {
                         label: m.text || pendingLabel,
@@ -200,14 +200,14 @@ 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, 
-                    _chunkXABXUP6Lcjs.MessageScrollerItem,
+                    _chunk5VMKDVB6cjs.MessageScrollerItem,
                     {
                       messageId: m.id,
                       scrollAnchor: m.id === anchorId,
                       className: _chunkKWLSBTB2cjs.cn.call(void 0, "flex flex-col", workspace ? "gap-5" : "gap-3"),
                       children: [
                         marker ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, TimelineMarker, { label: marker }) : null,
-                        /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkLAN3K2JIcjs.Message, { align: isUser ? "end" : "start", children: /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _chunkLAN3K2JIcjs.MessageContent, { children: [
+                        /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkNWDPH2Z7cjs.Message, { align: isUser ? "end" : "start", children: /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _chunkNWDPH2Z7cjs.MessageContent, { children: [
                           (m.content || m.text) && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
                             _chunkV4YWTRLDcjs.Bubble,
                             {
@@ -241,7 +241,7 @@ var ChatThread = _react.forwardRef.call(void 0,
                             // button's inset, so the first icon lines up with
                             // the text above it.
                             /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-                              _chunkLAN3K2JIcjs.MessageActions,
+                              _chunkNWDPH2Z7cjs.MessageActions,
                               {
                                 className: _chunkKWLSBTB2cjs.cn.call(void 0, 
                                   workspace && (isUser ? "-me-2 pointer-coarse:-me-3.5" : "-ms-2 pointer-coarse:-ms-3.5")
@@ -256,15 +256,15 @@ var ChatThread = _react.forwardRef.call(void 0,
                     m.id
                   );
                 }),
-                pending && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkXABXUP6Lcjs.MessageScrollerItem, { children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, ChatRunningLine, { label: pendingLabel, workspace }) }),
+                pending && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunk5VMKDVB6cjs.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, _chunkXABXUP6Lcjs.MessageScrollerItem, { className: "[content-visibility:visible]", children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkLAN3K2JIcjs.Message, { align: "start", children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkLAN3K2JIcjs.MessageContent, { children: footer }) }) })
+                /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunk5VMKDVB6cjs.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, _chunkXABXUP6Lcjs.MessageScrollerButton, { variant: "outline", className: "rounded-full shadow-sm", children: [
+          /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _chunk5VMKDVB6cjs.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 })
           ] })
@@ -284,7 +284,7 @@ function ChatCopyAction({
   const text = message.text;
   if (!text) return null;
   return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-    _chunkLAN3K2JIcjs.MessageAction,
+    _chunkNWDPH2Z7cjs.MessageAction,
     {
       tooltip: copied ? copiedLabel : label,
       "data-copied": copied || void 0,
@@ -320,18 +320,18 @@ function ChatAttachmentList({
   className
 }) {
   const { verb, icon: ActionIcon } = ATTACHMENT_ACTIONS[openAction];
-  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunk32Q4XOTUcjs.AttachmentGroup, { className: _chunkKWLSBTB2cjs.cn.call(void 0, "gap-2 px-3 pt-3", className), children: attachments.map((attachment) => {
+  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkFYRQFEU4cjs.AttachmentGroup, { className: _chunkKWLSBTB2cjs.cn.call(void 0, "gap-2 px-3 pt-3", className), children: attachments.map((attachment) => {
     const state = _nullishCoalesce(attachment.state, () => ( "done"));
     const opens = Boolean(onOpen) && state === "done";
     return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, 
-      _chunk32Q4XOTUcjs.Attachment,
+      _chunkFYRQFEU4cjs.Attachment,
       {
         state,
         size: "sm",
         className: "min-w-[12rem] rounded-xl p-2",
         children: [
           opens && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-            _chunk32Q4XOTUcjs.AttachmentTrigger,
+            _chunkFYRQFEU4cjs.AttachmentTrigger,
             {
               "aria-label": `${verb} ${attachment.name}`,
               title: `${verb} ${attachment.name}`,
@@ -339,13 +339,13 @@ function ChatAttachmentList({
               className: "rounded-xl focus-visible:ring-2 focus-visible:ring-ring/50"
             }
           ),
-          /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunk32Q4XOTUcjs.AttachmentMedia, { variant: "icon", className: "h-9 w-9 rounded-lg bg-muted", children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _lucidereact.FileText, { className: "h-4 w-4" }) }),
-          /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _chunk32Q4XOTUcjs.AttachmentContent, { className: "px-2", children: [
-            /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunk32Q4XOTUcjs.AttachmentTitle, { className: "text-xs font-medium", children: attachment.name }),
-            /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunk32Q4XOTUcjs.AttachmentDescription, { className: "text-[11px]", children: state === "uploading" ? uploadingLabel : opens ? `${formatFileSize(attachment.size)} \xB7 ${verb}` : formatFileSize(attachment.size) })
+          /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkFYRQFEU4cjs.AttachmentMedia, { variant: "icon", className: "h-9 w-9 rounded-lg bg-muted", children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _lucidereact.FileText, { className: "h-4 w-4" }) }),
+          /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _chunkFYRQFEU4cjs.AttachmentContent, { className: "px-2", children: [
+            /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkFYRQFEU4cjs.AttachmentTitle, { className: "text-xs font-medium", children: attachment.name }),
+            /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkFYRQFEU4cjs.AttachmentDescription, { className: "text-[11px]", children: state === "uploading" ? uploadingLabel : opens ? `${formatFileSize(attachment.size)} \xB7 ${verb}` : formatFileSize(attachment.size) })
           ] }),
-          onRemove ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunk32Q4XOTUcjs.AttachmentActions, { children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-            _chunk32Q4XOTUcjs.AttachmentAction,
+          onRemove ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkFYRQFEU4cjs.AttachmentActions, { children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+            _chunkFYRQFEU4cjs.AttachmentAction,
             {
               type: "button",
               "aria-label": `Remove ${attachment.name}`,
@@ -354,7 +354,7 @@ function ChatAttachmentList({
             }
           ) }) : opens ? (
             // The trigger covers the whole file; the icon only says what it does.
-            /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunk32Q4XOTUcjs.AttachmentActions, { "aria-hidden": true, className: "pointer-events-none pr-1 text-muted-foreground", children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, ActionIcon, { className: "h-4 w-4" }) })
+            /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkFYRQFEU4cjs.AttachmentActions, { "aria-hidden": true, className: "pointer-events-none pr-1 text-muted-foreground", children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, ActionIcon, { className: "h-4 w-4" }) })
           ) : null
         ]
       },
@@ -385,12 +385,15 @@ function ChatInput({
   multiple = true,
   addFilesLabel = "Add files",
   appearance = "default",
+  compactOnBlur = false,
   helperText,
   privacyNote
 }) {
   const internalRef = _react.useRef.call(void 0, null);
   const ref = _nullishCoalesce(inputRef, () => ( internalRef));
   const fileInputRef = _react.useRef.call(void 0, null);
+  const [editing, setEditing] = _react.useState.call(void 0, false);
+  const focusVersion = _react.useRef.call(void 0, 0);
   const isDisabled = pending || disabled;
   const attachmentsReady = attachments.length > 0 && attachments.every((item) => item.state !== "uploading");
   const canSubmit = !isDisabled && (Boolean(value.trim()) || attachmentsReady);
@@ -401,13 +404,27 @@ function ChatInput({
   };
   const spacious = appearance === "spacious";
   const composerSize = COMPOSER_SIZES[size];
+  const compact = compactOnBlur && !editing && value.length === 0 && attachments.length === 0;
   return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { "data-slot": "chat-input-container", className: "w-full", children: [
     /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, 
       "form",
       {
         "data-slot": "chat-input",
         "data-appearance": appearance,
+        "data-compact": compact || void 0,
         className: "w-full",
+        onFocusCapture: (event) => {
+          focusVersion.current += 1;
+          if (event.nativeEvent.target === ref.current) setEditing(true);
+        },
+        onBlurCapture: (event) => {
+          if (event.currentTarget.contains(event.relatedTarget)) return;
+          const form = event.currentTarget;
+          const blurredAt = ++focusVersion.current;
+          queueMicrotask(() => {
+            if (form.isConnected && focusVersion.current === blurredAt) setEditing(false);
+          });
+        },
         onSubmit: (event) => {
           if (event.target !== event.currentTarget) return;
           event.preventDefault();
@@ -430,7 +447,7 @@ function ChatInput({
             }
           ),
           /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, 
-            _chunkRIWLAMMEcjs.InputGroup,
+            _chunk7LDJAXRXcjs.InputGroup,
             {
               className: _chunkKWLSBTB2cjs.cn.call(void 0, 
                 // Opaque in both modes: the input group's own dark:bg-input/30
@@ -450,7 +467,7 @@ function ChatInput({
                   }
                 ),
                 /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-                  _chunkRIWLAMMEcjs.InputGroupTextarea,
+                  _chunk7LDJAXRXcjs.InputGroupTextarea,
                   {
                     ref,
                     value,
@@ -462,39 +479,42 @@ function ChatInput({
                       submit();
                     },
                     placeholder,
-                    rows: composerSize.rows,
+                    rows: compact ? 1 : composerSize.rows,
+                    wrap: compact ? "off" : void 0,
                     disabled: isDisabled,
                     autoFocus,
                     className: _chunkKWLSBTB2cjs.cn.call(void 0, 
-                      composerSize.minHeight,
+                      compact ? "h-[44px] min-h-[44px] max-h-[44px] min-w-0 field-sizing-fixed overflow-hidden whitespace-nowrap text-ellipsis" : composerSize.minHeight,
                       // Grows with the text, then scrolls rather than pushing the thread away.
-                      "max-h-48 leading-relaxed disabled:opacity-70 placeholder:text-sm",
-                      spacious ? "px-6 pb-2 pt-6" : "px-4 py-3.5"
+                      "leading-relaxed disabled:opacity-70 placeholder:text-sm",
+                      !compact && "max-h-48",
+                      compact ? "px-4 py-2" : spacious ? "px-6 pb-2 pt-6" : "px-4 py-3.5"
                     )
                   }
                 ),
                 /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, 
-                  _chunkRIWLAMMEcjs.InputGroupAddon,
+                  _chunk7LDJAXRXcjs.InputGroupAddon,
                   {
-                    align: "block-end",
+                    align: compact ? "inline-end" : "block-end",
                     "data-slot": "chat-input-actions",
                     onClick: (event) => {
                       if (!event.currentTarget.contains(event.target)) return;
                       if (!event.target.closest("button")) _optionalChain([ref, 'access', _3 => _3.current, 'optionalAccess', _4 => _4.focus, 'call', _5 => _5()]);
                     },
                     className: _chunkKWLSBTB2cjs.cn.call(void 0, 
-                      "gap-2",
-                      spacious ? "px-5 pb-5 pt-1" : "border-t border-border px-3 py-2.5"
+                      compact ? "shrink-0 gap-0 p-1" : "gap-2",
+                      !compact && (spacious ? "px-5 pb-5 pt-1" : "border-t border-border px-3 py-2.5")
                     ),
                     children: [
                       onFilesSelected && /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _chunkZAITUDYDcjs.DropdownMenu, { children: [
                         /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkZAITUDYDcjs.DropdownMenuTrigger, { asChild: true, children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-                          _chunkL4DH72UFcjs.Button,
+                          _chunkJDEXZGIYcjs.Button,
                           {
                             type: "button",
-                            size: spacious ? "icon-lg" : "icon",
+                            size: spacious && !compact ? "icon-lg" : "icon",
                             variant: "ghost",
                             "aria-label": "Add to conversation",
+                            className: compactOnBlur ? "min-h-[44px] min-w-[44px] shrink-0" : void 0,
                             children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _lucidereact.Plus, { className: _chunkKWLSBTB2cjs.cn.call(void 0, spacious && "h-5 w-5") })
                           }
                         ) }),
@@ -504,44 +524,48 @@ function ChatInput({
                         ] }) })
                       ] }),
                       voice && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-                        _chunkEOUO3OROcjs.VoiceDictationButton,
+                        _chunkLKPM6DQPcjs.VoiceDictationButton,
                         {
                           size: "icon",
                           title: voiceTitle,
                           lang: voiceLang,
                           onCommit: (text) => onSend(text),
-                          className: spacious ? "h-12 w-12 border-transparent bg-transparent shadow-none hover:bg-muted" : void 0
+                          className: _chunkKWLSBTB2cjs.cn.call(void 0, 
+                            spacious && "border-transparent bg-transparent shadow-none hover:bg-muted",
+                            spacious && !compact && "h-12 w-12",
+                            compactOnBlur && "min-h-[44px] min-w-[44px] shrink-0"
+                          )
                         }
                       ),
                       helperText ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
                         "span",
                         {
                           "data-slot": "chat-input-helper",
-                          className: "min-w-0 flex-1 truncate px-1 text-center text-xs font-normal text-muted-foreground sm:px-2 sm:text-sm",
+                          className: _chunkKWLSBTB2cjs.cn.call(void 0, "min-w-0 flex-1 truncate px-1 text-center text-xs font-normal text-muted-foreground sm:px-2 sm:text-sm", compact && "hidden"),
                           children: helperText
                         }
-                      ) : /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "flex-1" }),
+                      ) : /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: compact ? "hidden" : "flex-1" }),
                       submitLabel ? /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, 
-                        _chunkL4DH72UFcjs.Button,
+                        _chunkJDEXZGIYcjs.Button,
                         {
                           type: "submit",
                           disabled: !canSubmit,
                           "data-chat-action": "submit",
-                          className: spacious ? "rounded-xl" : void 0,
+                          className: _chunkKWLSBTB2cjs.cn.call(void 0, spacious && "rounded-xl", compactOnBlur && "min-h-[44px] min-w-[44px] shrink-0"),
                           children: [
                             submitLabel,
                             /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _lucidereact.ArrowRight, { className: "ml-2 h-4 w-4" })
                           ]
                         }
                       ) : /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-                        _chunkL4DH72UFcjs.Button,
+                        _chunkJDEXZGIYcjs.Button,
                         {
                           type: "submit",
-                          size: spacious ? "icon-lg" : "icon",
+                          size: spacious && !compact ? "icon-lg" : "icon",
                           disabled: !canSubmit,
                           "aria-label": "Send",
                           "data-chat-action": "submit",
-                          className: spacious ? "rounded-xl" : void 0,
+                          className: _chunkKWLSBTB2cjs.cn.call(void 0, spacious && "rounded-xl", compactOnBlur && "min-h-[44px] min-w-[44px] shrink-0"),
                           children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _lucidereact.ArrowUp, { className: _chunkKWLSBTB2cjs.cn.call(void 0, spacious && "h-5 w-5") })
                         }
                       )
@@ -577,7 +601,7 @@ function VoiceHero({
 }) {
   return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "flex flex-col items-center gap-5 py-6", children: [
     /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-      _chunkEOUO3OROcjs.VoiceDictationButton,
+      _chunkLKPM6DQPcjs.VoiceDictationButton,
       {
         size: "lg",
         title: voiceTitle,
@@ -617,8 +641,8 @@ function ExamplePrompts({
   const cards = variant === "cards";
   return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { "data-slot": "chat-examples", "data-variant": variant, className: _chunkKWLSBTB2cjs.cn.call(void 0, cards ? "mt-4" : "mt-3", className), children: [
     /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "p", { id: labelId, "data-slot": "chat-examples-label", className: "mb-2 text-left text-xs text-muted-foreground", children: label }),
-    /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkSUB4BAYEcjs.Suggestions, { role: "group", "aria-labelledby": labelId, layout: EXAMPLE_PROMPT_LAYOUTS[variant], children: prompts.map((prompt) => /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-      _chunkSUB4BAYEcjs.Suggestion,
+    /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkM4V7OJNFcjs.Suggestions, { role: "group", "aria-labelledby": labelId, layout: EXAMPLE_PROMPT_LAYOUTS[variant], children: prompts.map((prompt) => /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+      _chunkM4V7OJNFcjs.Suggestion,
       {
         suggestion: prompt,
         onClick: onSelect,
@@ -681,6 +705,7 @@ var Chat = _react.forwardRef.call(void 0, function Chat2({
   addFilesLabel,
   uploadingLabel,
   composerAppearance = "default",
+  mobileCompactComposer = false,
   composerHelperText,
   composerPrivacyNote,
   emptyFileDropzone = false,
@@ -754,7 +779,7 @@ var Chat = _react.forwardRef.call(void 0, function Chat2({
   const showEmptyFileDropzone = emptyFileDropzone && Boolean(onFilesSelected) && attachments.length === 0;
   const showEmptyPending = !conversationStarted && pending && Boolean(emptyPendingContent);
   return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-    _chunkKADJ56AHcjs.FileDropArea,
+    _chunkZ3JJSNR5cjs.FileDropArea,
     {
       "data-slot": "chat",
       "data-layout": layout,
@@ -822,7 +847,7 @@ var Chat = _react.forwardRef.call(void 0, function Chat2({
                 ),
                 children: [
                   showEmptyFileDropzone && onFilesSelected && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-                    _chunkKADJ56AHcjs.FileDropzone,
+                    _chunkZ3JJSNR5cjs.FileDropzone,
                     {
                       multiple: true,
                       onFiles: onFilesSelected,
@@ -917,7 +942,8 @@ var Chat = _react.forwardRef.call(void 0, function Chat2({
             className: _chunkKWLSBTB2cjs.cn.call(void 0, 
               "pt-3",
               application && "px-4 py-3 md:bg-transparent md:px-0 md:pb-0 md:backdrop-blur-none md:supports-backdrop-filter:bg-transparent",
-              workspace && "border-0 bg-gradient-to-t from-background via-background to-transparent px-4 pb-[max(1.25rem,env(safe-area-inset-bottom))] pt-8 backdrop-blur-none supports-[backdrop-filter]:bg-gradient-to-t"
+              workspace && "border-0 bg-gradient-to-t from-background via-background to-transparent px-4 pb-[max(1.25rem,env(safe-area-inset-bottom))] pt-8 backdrop-blur-none supports-[backdrop-filter]:bg-gradient-to-t",
+              workspace && mobileCompactComposer && "max-md:pb-[max(0.75rem,env(safe-area-inset-bottom))] max-md:pt-3"
             ),
             children: [
               /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
@@ -940,6 +966,7 @@ var Chat = _react.forwardRef.call(void 0, function Chat2({
                   addFilesLabel,
                   uploadingLabel,
                   appearance: composerAppearance,
+                  compactOnBlur: mobileCompactComposer && isMobile,
                   helperText: composerHelperText,
                   privacyNote: composerPrivacyNote,
                   className: workspace ? "mx-auto max-w-3xl rounded-3xl shadow-sm" : void 0

package/dist/primitives/chat.d.cts

@@ -183,6 +183,12 @@ interface ChatInputProps {
     addFilesLabel?: string;
     /** Visual density for the complete composer surface. */
     appearance?: "default" | "spacious";
+    /**
+     * Fold an empty, unfocused composer into one row. Focusing its textarea
+     * expands it; drafts and staged files always keep it expanded. Chat enables
+     * this only for an active mobile conversation with `mobileCompactComposer`.
+     */
+    compactOnBlur?: boolean;
     /** Quiet contextual copy between the composer controls. */
     helperText?: ReactNode;
     /** Privacy or visibility reassurance rendered below the composer. */
@@ -204,7 +210,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, voiceTitle, voiceLang, submitLabel, autoFocus, className, inputRef, attachments, onFilesSelected, onRemoveAttachment, accept, multiple, addFilesLabel, appearance, helperText, privacyNote, }: ChatInputProps): react_jsx_runtime.JSX.Element;
+declare function ChatInput({ value, onChange, onSend, pending, disabled, placeholder, size, uploadingLabel, voice, voiceTitle, voiceLang, submitLabel, autoFocus, className, inputRef, attachments, onFilesSelected, onRemoveAttachment, accept, multiple, addFilesLabel, appearance, compactOnBlur, helperText, privacyNote, }: ChatInputProps): react_jsx_runtime.JSX.Element;
 interface ChatProps {
     /** Conversation messages. */
     messages: ChatMessage[];
@@ -299,6 +305,12 @@ interface ChatProps {
     uploadingLabel?: string;
     /** Visual treatment for both empty and active text composers. */
     composerAppearance?: ChatInputProps["appearance"];
+    /**
+     * On phones (below 768px), fold an active conversation's empty composer
+     * into one row until its textarea is focused. Drafts and files stay
+     * expanded. Desktop and the new-conversation composer are unchanged.
+     */
+    mobileCompactComposer?: boolean;
     /** Quiet contextual copy inside the composer action row. */
     composerHelperText?: ReactNode;
     /** Privacy or visibility reassurance below the composer. */

package/dist/primitives/chat.d.ts

@@ -183,6 +183,12 @@ interface ChatInputProps {
     addFilesLabel?: string;
     /** Visual density for the complete composer surface. */
     appearance?: "default" | "spacious";
+    /**
+     * Fold an empty, unfocused composer into one row. Focusing its textarea
+     * expands it; drafts and staged files always keep it expanded. Chat enables
+     * this only for an active mobile conversation with `mobileCompactComposer`.
+     */
+    compactOnBlur?: boolean;
     /** Quiet contextual copy between the composer controls. */
     helperText?: ReactNode;
     /** Privacy or visibility reassurance rendered below the composer. */
@@ -204,7 +210,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, voiceTitle, voiceLang, submitLabel, autoFocus, className, inputRef, attachments, onFilesSelected, onRemoveAttachment, accept, multiple, addFilesLabel, appearance, helperText, privacyNote, }: ChatInputProps): react_jsx_runtime.JSX.Element;
+declare function ChatInput({ value, onChange, onSend, pending, disabled, placeholder, size, uploadingLabel, voice, voiceTitle, voiceLang, submitLabel, autoFocus, className, inputRef, attachments, onFilesSelected, onRemoveAttachment, accept, multiple, addFilesLabel, appearance, compactOnBlur, helperText, privacyNote, }: ChatInputProps): react_jsx_runtime.JSX.Element;
 interface ChatProps {
     /** Conversation messages. */
     messages: ChatMessage[];
@@ -299,6 +305,12 @@ interface ChatProps {
     uploadingLabel?: string;
     /** Visual treatment for both empty and active text composers. */
     composerAppearance?: ChatInputProps["appearance"];
+    /**
+     * On phones (below 768px), fold an active conversation's empty composer
+     * into one row until its textarea is focused. Drafts and files stay
+     * expanded. Desktop and the new-conversation composer are unchanged.
+     */
+    mobileCompactComposer?: boolean;
     /** Quiet contextual copy inside the composer action row. */
     composerHelperText?: ReactNode;
     /** Privacy or visibility reassurance below the composer. */