@epicbagel/saas-kit 1.28.0 → 1.30.0

package/dist/primitives/chat.cjs

@@ -924,7 +924,7 @@ function MobileReplySuggestions({
       _chunk2BHI5ZWJcjs.DrawerContent,
       {
         "aria-describedby": void 0,
-        className: "max-h-[min(85dvh,40rem)] overflow-hidden pb-[env(safe-area-inset-bottom)]",
+        className: "max-h-[min(85dvh,40rem)] overflow-hidden pb-[env(safe-area-inset-bottom)] md:mx-auto md:w-full md:max-w-xl",
         onOpenAutoFocus: (event) => {
           event.preventDefault();
           _optionalChain([closeRef, 'access', _11 => _11.current, 'optionalAccess', _12 => _12.focus, 'call', _13 => _13({ preventScroll: true })]);
@@ -999,6 +999,19 @@ function ExamplePromptsLoading({ label, className }) {
 function ChatError({ children, className }) {
   return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "p", { "data-slot": "chat-error", role: "alert", className: _chunkKWLSBTB2cjs.cn.call(void 0, "mt-2 text-xs text-destructive", className), children });
 }
+var SHORT_VIEWPORT_HEIGHT = 900;
+function useIsShortViewport() {
+  const [short, setShort] = _react.useState.call(void 0, false);
+  _react.useEffect.call(void 0, () => {
+    if (typeof window === "undefined") return;
+    const mql = window.matchMedia(`(max-height: ${SHORT_VIEWPORT_HEIGHT - 1}px)`);
+    const onChange = () => setShort(window.innerHeight < SHORT_VIEWPORT_HEIGHT);
+    mql.addEventListener("change", onChange);
+    onChange();
+    return () => mql.removeEventListener("change", onChange);
+  }, []);
+  return short;
+}
 var Chat = _react.forwardRef.call(void 0, function Chat2({
   messages,
   onSend,
@@ -1127,7 +1140,9 @@ var Chat = _react.forwardRef.call(void 0, function Chat2({
   );
   const application = layout === "application";
   const workspace = layout === "workspace";
-  const compactSuggestions = mobileCompactSuggestions && isMobile;
+  const shortViewport = useIsShortViewport();
+  const compactSuggestions = mobileCompactSuggestions && (isMobile || shortViewport);
+  const compactComposer = mobileCompactComposer && (isMobile || shortViewport);
   const showEmptyFileDropzone = emptyFileDropzone && Boolean(onFilesSelected) && attachments.length === 0;
   const liveVoiceActive = voiceSession && voiceSession.state !== "disconnected" && voiceSession.state !== "error";
   const showEmptyPending = !conversationStarted && pending && Boolean(emptyPendingContent) && !liveVoiceActive;
@@ -1313,7 +1328,9 @@ var Chat = _react.forwardRef.call(void 0, function Chat2({
               "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 && mobileCompactComposer && "max-md:pb-[max(0.75rem,env(safe-area-inset-bottom))] max-md:pt-3"
+              workspace && mobileCompactComposer && "max-md:pb-[max(0.75rem,env(safe-area-inset-bottom))] max-md:pt-3",
+              // A short window's dock is as tight as a phone's.
+              workspace && compactComposer && "pb-[max(0.75rem,env(safe-area-inset-bottom))] pt-3"
             ),
             children: [
               !compactSuggestions && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
@@ -1361,7 +1378,7 @@ var Chat = _react.forwardRef.call(void 0, function Chat2({
                   addFilesLabel,
                   uploadingLabel,
                   appearance: composerAppearance,
-                  compactOnBlur: mobileCompactComposer && isMobile,
+                  compactOnBlur: compactComposer,
                   helperText: composerHelperText,
                   privacyNote: composerPrivacyNote,
                   className: workspace ? "mx-auto max-w-3xl rounded-3xl shadow-sm" : void 0

package/dist/primitives/chat.d.cts

@@ -232,7 +232,8 @@ interface ChatInputProps {
     /**
      * Fold an empty, unfocused composer into a short text row and control bar. Focusing its textarea
      * expands it; drafts and staged files always keep it expanded. Chat enables
-     * this only for an active mobile conversation with `mobileCompactComposer`.
+     * this only for an active conversation on a phone or a short window, with
+     * `mobileCompactComposer`.
      */
     compactOnBlur?: boolean;
     /** Content inside the composer surface, above its files and text field. */
@@ -402,7 +403,10 @@ 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. */
+    /**
+     * Below 768px wide, or 900px tall, show replies inside the composer as the
+     * first reply and a bottom-sheet picker. Taller desktop windows keep chips.
+     */
     mobileCompactSuggestions?: boolean;
     /** The mobile picker's opener, given the number of additional replies. Defaults to `+N more`. */
     replySuggestionsMoreLabel?: (count: number) => string;
@@ -411,9 +415,10 @@ interface ChatProps {
     /** Visual treatment for both empty and active text composers. */
     composerAppearance?: ChatInputProps["appearance"];
     /**
-     * On phones (below 768px), fold an active conversation's empty composer
-     * into a short text row above its controls until the textarea is focused. Drafts and files stay
-     * expanded. Desktop and the new-conversation composer are unchanged.
+     * On phones (below 768px wide) and short windows (below 900px tall), fold an
+     * active conversation's empty composer into a short text row above its
+     * controls until the textarea is focused. Drafts and files stay expanded.
+     * Taller desktop windows and the new-conversation composer are unchanged.
      */
     mobileCompactComposer?: boolean;
     /** Quiet contextual copy inside the composer action row. */

package/dist/primitives/chat.d.ts

@@ -232,7 +232,8 @@ interface ChatInputProps {
     /**
      * Fold an empty, unfocused composer into a short text row and control bar. Focusing its textarea
      * expands it; drafts and staged files always keep it expanded. Chat enables
-     * this only for an active mobile conversation with `mobileCompactComposer`.
+     * this only for an active conversation on a phone or a short window, with
+     * `mobileCompactComposer`.
      */
     compactOnBlur?: boolean;
     /** Content inside the composer surface, above its files and text field. */
@@ -402,7 +403,10 @@ 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. */
+    /**
+     * Below 768px wide, or 900px tall, show replies inside the composer as the
+     * first reply and a bottom-sheet picker. Taller desktop windows keep chips.
+     */
     mobileCompactSuggestions?: boolean;
     /** The mobile picker's opener, given the number of additional replies. Defaults to `+N more`. */
     replySuggestionsMoreLabel?: (count: number) => string;
@@ -411,9 +415,10 @@ interface ChatProps {
     /** Visual treatment for both empty and active text composers. */
     composerAppearance?: ChatInputProps["appearance"];
     /**
-     * On phones (below 768px), fold an active conversation's empty composer
-     * into a short text row above its controls until the textarea is focused. Drafts and files stay
-     * expanded. Desktop and the new-conversation composer are unchanged.
+     * On phones (below 768px wide) and short windows (below 900px tall), fold an
+     * active conversation's empty composer into a short text row above its
+     * controls until the textarea is focused. Drafts and files stay expanded.
+     * Taller desktop windows and the new-conversation composer are unchanged.
      */
     mobileCompactComposer?: boolean;
     /** Quiet contextual copy inside the composer action row. */

package/dist/primitives/chat.js

@@ -924,7 +924,7 @@ function MobileReplySuggestions({
       DrawerContent,
       {
         "aria-describedby": void 0,
-        className: "max-h-[min(85dvh,40rem)] overflow-hidden pb-[env(safe-area-inset-bottom)]",
+        className: "max-h-[min(85dvh,40rem)] overflow-hidden pb-[env(safe-area-inset-bottom)] md:mx-auto md:w-full md:max-w-xl",
         onOpenAutoFocus: (event) => {
           event.preventDefault();
           closeRef.current?.focus({ preventScroll: true });
@@ -999,6 +999,19 @@ function ExamplePromptsLoading({ label, className }) {
 function ChatError({ children, className }) {
   return /* @__PURE__ */ jsx("p", { "data-slot": "chat-error", role: "alert", className: cn("mt-2 text-xs text-destructive", className), children });
 }
+var SHORT_VIEWPORT_HEIGHT = 900;
+function useIsShortViewport() {
+  const [short, setShort] = useState(false);
+  useEffect(() => {
+    if (typeof window === "undefined") return;
+    const mql = window.matchMedia(`(max-height: ${SHORT_VIEWPORT_HEIGHT - 1}px)`);
+    const onChange = () => setShort(window.innerHeight < SHORT_VIEWPORT_HEIGHT);
+    mql.addEventListener("change", onChange);
+    onChange();
+    return () => mql.removeEventListener("change", onChange);
+  }, []);
+  return short;
+}
 var Chat = forwardRef(function Chat2({
   messages,
   onSend,
@@ -1127,7 +1140,9 @@ var Chat = forwardRef(function Chat2({
   );
   const application = layout === "application";
   const workspace = layout === "workspace";
-  const compactSuggestions = mobileCompactSuggestions && isMobile;
+  const shortViewport = useIsShortViewport();
+  const compactSuggestions = mobileCompactSuggestions && (isMobile || shortViewport);
+  const compactComposer = mobileCompactComposer && (isMobile || shortViewport);
   const showEmptyFileDropzone = emptyFileDropzone && Boolean(onFilesSelected) && attachments.length === 0;
   const liveVoiceActive = voiceSession && voiceSession.state !== "disconnected" && voiceSession.state !== "error";
   const showEmptyPending = !conversationStarted && pending && Boolean(emptyPendingContent) && !liveVoiceActive;
@@ -1313,7 +1328,9 @@ var Chat = forwardRef(function Chat2({
               "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 && mobileCompactComposer && "max-md:pb-[max(0.75rem,env(safe-area-inset-bottom))] max-md:pt-3"
+              workspace && mobileCompactComposer && "max-md:pb-[max(0.75rem,env(safe-area-inset-bottom))] max-md:pt-3",
+              // A short window's dock is as tight as a phone's.
+              workspace && compactComposer && "pb-[max(0.75rem,env(safe-area-inset-bottom))] pt-3"
             ),
             children: [
               !compactSuggestions && /* @__PURE__ */ jsx(
@@ -1361,7 +1378,7 @@ var Chat = forwardRef(function Chat2({
                   addFilesLabel,
                   uploadingLabel,
                   appearance: composerAppearance,
-                  compactOnBlur: mobileCompactComposer && isMobile,
+                  compactOnBlur: compactComposer,
                   helperText: composerHelperText,
                   privacyNote: composerPrivacyNote,
                   className: workspace ? "mx-auto max-w-3xl rounded-3xl shadow-sm" : void 0

package/package.json

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