@elizaos/ui 2.0.0-alpha.344 → 2.0.0-alpha.345

package/packages/ui/src/components/composites/chat/chat-composer.js

@@ -1,12 +1,51 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { ArrowUp, Mic, Paperclip, Plus, Send, Square, Volume2, VolumeX, } from "lucide-react";
-import { useEffect, useRef, useState, } from "react";
+import { useEffect, useLayoutEffect, useRef, useState, } from "react";
 import { Button } from "../../ui/button";
 import { Textarea } from "../../ui/textarea";
 import { CreateTaskPopover } from "./create-task-popover";
+const INLINE_TEXTAREA_MIN_HEIGHT_PX = 32;
+const INLINE_TEXTAREA_MAX_HEIGHT_PX = 128;
+const INLINE_STACKED_INLINE_PADDING_PX = 12;
+const inlineTextareaClass = "block h-8 max-h-[128px] min-h-0 w-full min-w-0 resize-none overflow-y-hidden appearance-none rounded-none border-0 bg-transparent px-2 py-[6px] text-sm leading-5 text-txt shadow-none outline-none ring-0 placeholder:text-muted/60 focus:!border-0 focus:!outline-none focus:!ring-0 focus-visible:!border-0 focus-visible:!outline-none focus-visible:!ring-0 focus-visible:!ring-offset-0 focus-visible:!shadow-none";
+const inlineMeasureTextareaClass = `${inlineTextareaClass} pointer-events-none fixed left-0 top-0 z-[-1] opacity-0`;
+const chatComposerFocusResetClass = "[&_button:focus]:!outline-none [&_button:focus-visible]:!outline-none [&_button:focus-visible]:!ring-0 [&_button:focus-visible]:!ring-offset-0 [&_button:focus-visible]:!shadow-none [&_textarea:focus]:!outline-none [&_textarea:focus-visible]:!outline-none [&_textarea:focus-visible]:!ring-0 [&_textarea:focus-visible]:!ring-offset-0 [&_textarea:focus-visible]:!shadow-none";
+function getTextareaVerticalPadding(textarea) {
+    const styles = window.getComputedStyle(textarea);
+    const paddingTop = Number.parseFloat(styles.paddingTop);
+    const paddingBottom = Number.parseFloat(styles.paddingBottom);
+    const verticalPadding = paddingTop + paddingBottom;
+    if (Number.isFinite(paddingTop) &&
+        Number.isFinite(paddingBottom) &&
+        verticalPadding > 0) {
+        return verticalPadding;
+    }
+    return 12;
+}
+function getTextareaLineHeight(textarea) {
+    const lineHeight = Number.parseFloat(window.getComputedStyle(textarea).lineHeight);
+    return Number.isFinite(lineHeight) && lineHeight > 0 ? lineHeight : 20;
+}
+function measureInlineTextarea(textarea, value, width) {
+    textarea.value = value.endsWith("\n") ? `${value} ` : value || " ";
+    textarea.style.width = `${Math.max(1, width)}px`;
+    textarea.style.height = "auto";
+    textarea.style.overflowY = "hidden";
+    const scrollHeight = textarea.scrollHeight;
+    const contentHeight = Math.max(0, scrollHeight - getTextareaVerticalPadding(textarea));
+    const lineHeight = getTextareaLineHeight(textarea);
+    return {
+        scrollHeight,
+        wraps: contentHeight > lineHeight * 1.25,
+    };
+}
 export function ChatComposer({ variant, layout = "default", textareaRef, chatInput, chatPendingImagesCount, isComposerLocked, isAgentStarting, chatSending, voice, agentVoiceEnabled, showAgentVoiceToggle = true, t, onAttachImage, onChatInputChange, onKeyDown, onSend, onStop, onStopSpeaking, onToggleAgentVoice, codingAgentsAvailable = false, onCreateTask, hideAttachButton = false, placeholder, textareaAriaLabel, }) {
     const [isNarrow, setIsNarrow] = useState(() => typeof window !== "undefined" && window.innerWidth < 310);
     const [isInlineMultiline, setIsInlineMultiline] = useState(false);
+    const [inlineMeasureVersion, setInlineMeasureVersion] = useState(0);
+    const inlineRootRef = useRef(null);
+    const inlineMeasureRef = useRef(null);
+    const lastInlineSingleLineWidthRef = useRef(null);
     useEffect(() => {
         if (typeof window === "undefined" || !window.matchMedia)
             return;
@@ -53,9 +92,6 @@ export function ChatComposer({ variant, layout = "default", textareaRef, chatInp
                     ? t("chat.listening")
                     : inputPlaceholder
             : inputPlaceholder;
-    const inlineTextareaClass = isInlineMultiline
-        ? "block h-8 max-h-[128px] min-h-0 w-full min-w-0 resize-none overflow-y-hidden appearance-none rounded-none border-0 bg-transparent px-2 py-[6px] text-sm leading-5 text-txt shadow-none outline-none ring-0 placeholder:text-muted/60 focus:border-0 focus:outline-none focus:ring-0 focus-visible:border-0 focus-visible:outline-none focus-visible:ring-0 focus-visible:ring-offset-0 focus-visible:shadow-none"
-        : "block h-8 max-h-[128px] min-h-0 w-full min-w-0 resize-none overflow-y-hidden appearance-none rounded-none border-0 bg-transparent px-1 py-[5px] text-sm leading-5 text-txt shadow-none outline-none ring-0 placeholder:text-muted/60 focus:border-0 focus:outline-none focus:ring-0 focus-visible:border-0 focus-visible:outline-none focus-visible:ring-0 focus-visible:ring-offset-0 focus-visible:shadow-none";
     useEffect(() => {
         return () => {
             if (holdTimerRef.current) {
@@ -64,24 +100,70 @@ export function ChatComposer({ variant, layout = "default", textareaRef, chatInp
             }
         };
     }, []);
-    // biome-ignore lint/correctness/useExhaustiveDependencies: chatInput changes must rerun inline textarea autosizing.
     useEffect(() => {
+        if (!isInline)
+            return;
+        const root = inlineRootRef.current;
+        if (!root || typeof ResizeObserver === "undefined")
+            return;
+        let frame = 0;
+        const observer = new ResizeObserver(() => {
+            if (frame)
+                cancelAnimationFrame(frame);
+            frame = requestAnimationFrame(() => {
+                setInlineMeasureVersion((version) => version + 1);
+            });
+        });
+        observer.observe(root);
+        return () => {
+            if (frame)
+                cancelAnimationFrame(frame);
+            observer.disconnect();
+        };
+    }, [isInline]);
+    // biome-ignore lint/correctness/useExhaustiveDependencies: inlineMeasureVersion is a ResizeObserver tick that reruns measurement after width changes.
+    useLayoutEffect(() => {
         if (!isInline) {
             setIsInlineMultiline(false);
+            lastInlineSingleLineWidthRef.current = null;
             return;
         }
         const textarea = textareaRef.current;
-        if (!textarea)
+        const measureTextarea = inlineMeasureRef.current;
+        const root = inlineRootRef.current;
+        if (!textarea || !measureTextarea || !root)
             return;
-        const minHeight = 32;
-        const maxHeight = 128;
-        textarea.style.height = "auto";
-        const nextHeight = Math.min(Math.max(textarea.scrollHeight, minHeight), maxHeight);
+        const measuredSingleLineWidth = textarea.clientWidth > 0 ? textarea.clientWidth : null;
+        const currentSingleLineWidth = isInlineMultiline
+            ? lastInlineSingleLineWidthRef.current
+            : measuredSingleLineWidth;
+        if (!isInlineMultiline && measuredSingleLineWidth) {
+            lastInlineSingleLineWidthRef.current = measuredSingleLineWidth;
+        }
+        const decisionWidth = currentSingleLineWidth ??
+            Math.max(1, root.clientWidth - INLINE_STACKED_INLINE_PADDING_PX);
+        const stackedWidth = Math.max(1, root.clientWidth - INLINE_STACKED_INLINE_PADDING_PX);
+        const decision = measureInlineTextarea(measureTextarea, chatInput, decisionWidth);
+        const nextIsInlineMultiline = chatInput.includes("\n") || decision.wraps;
+        const heightMeasurement = nextIsInlineMultiline
+            ? measureInlineTextarea(measureTextarea, chatInput, stackedWidth)
+            : decision;
+        const nextHeight = nextIsInlineMultiline
+            ? Math.min(Math.max(heightMeasurement.scrollHeight, INLINE_TEXTAREA_MIN_HEIGHT_PX), INLINE_TEXTAREA_MAX_HEIGHT_PX)
+            : INLINE_TEXTAREA_MIN_HEIGHT_PX;
         textarea.style.height = `${nextHeight}px`;
         textarea.style.overflowY =
-            textarea.scrollHeight > maxHeight ? "auto" : "hidden";
-        setIsInlineMultiline(nextHeight > minHeight);
-    }, [chatInput, isInline, textareaRef]);
+            heightMeasurement.scrollHeight > INLINE_TEXTAREA_MAX_HEIGHT_PX
+                ? "auto"
+                : "hidden";
+        setIsInlineMultiline(nextIsInlineMultiline);
+    }, [
+        chatInput,
+        inlineMeasureVersion,
+        isInline,
+        isInlineMultiline,
+        textareaRef,
+    ]);
     const startPushToTalk = () => {
         if (isComposerLocked || voice.isListening)
             return;
@@ -161,13 +243,13 @@ export function ChatComposer({ variant, layout = "default", textareaRef, chatInp
         const inlineStopButton = (_jsx(Button, { variant: "surfaceDestructive", "data-testid": "chat-composer-action", className: "h-8 w-8 shrink-0 rounded-full bg-danger/15 p-0 text-danger shadow-none transition-colors hover:bg-danger/25 focus-visible:ring-0 focus-visible:ring-offset-0", onClick: onStop, size: "icon", title: actionButtonLabel, "aria-label": actionButtonLabel, children: _jsx(Square, { className: "h-3.5 w-3.5 fill-current" }) }));
         const inlineStopSpeakingButton = (_jsx(Button, { variant: "surfaceDestructive", "data-testid": "chat-composer-action", className: "h-8 w-8 shrink-0 rounded-full bg-danger/15 p-0 text-danger shadow-none transition-colors hover:bg-danger/25 focus-visible:ring-0 focus-visible:ring-offset-0", onClick: onStopSpeaking, size: "icon", title: actionButtonLabel, "aria-label": actionButtonLabel, children: _jsx(Square, { className: "h-3.5 w-3.5 fill-current" }) }));
         const inlineTrailingActions = shouldShowStopButton ? (inlineStopButton) : !isGameModal && voice.isSpeaking && !hasDraft ? (inlineStopSpeakingButton) : isInlineMultiline ? (_jsxs(_Fragment, { children: [inlineMicButton, inlineSendButton] })) : hasDraft ? (inlineSendButton) : (inlineMicButton);
-        return (_jsx("div", { "data-inline-layout": isInlineMultiline ? "stacked" : "single-line", className: isInlineMultiline
-                ? "flex min-h-[64px] flex-col gap-1 rounded-[22px] border border-border/35 bg-card/45 px-1.5 py-1.5"
-                : "flex min-h-[40px] items-center gap-1 rounded-full border border-border/35 bg-card/45 px-1 py-1", children: isInlineMultiline ? (_jsxs(_Fragment, { children: [inlineTextarea, _jsxs("div", { className: "flex min-w-0 items-center gap-1", children: [inlineAttachButton, renderCreateTaskButton(), _jsx("div", { className: "min-w-0 flex-1" }), inlineTrailingActions] })] })) : (_jsxs(_Fragment, { children: [inlineAttachButton, renderCreateTaskButton(), inlineTextarea, inlineTrailingActions] })) }));
+        return (_jsxs("div", { ref: inlineRootRef, "data-chat-composer": "true", "data-inline-layout": isInlineMultiline ? "stacked" : "single-line", className: isInlineMultiline
+                ? `flex min-h-[64px] flex-col gap-1 rounded-[22px] border border-border/35 bg-card/45 px-1.5 py-1.5 ${chatComposerFocusResetClass}`
+                : `flex min-h-[40px] items-center gap-1 rounded-full border border-border/35 bg-card/45 px-1 py-1 ${chatComposerFocusResetClass}`, children: [_jsx("textarea", { ref: inlineMeasureRef, "aria-hidden": "true", className: inlineMeasureTextareaClass, "data-chat-composer-measure": "true", readOnly: true, rows: 1, tabIndex: -1, value: chatInput }), isInlineMultiline ? (_jsxs(_Fragment, { children: [inlineTextarea, _jsxs("div", { className: "flex min-w-0 items-center gap-1", children: [inlineAttachButton, renderCreateTaskButton(), _jsx("div", { className: "min-w-0 flex-1" }), inlineTrailingActions] })] })) : (_jsxs(_Fragment, { children: [inlineAttachButton, renderCreateTaskButton(), inlineTextarea, inlineTrailingActions] }))] }));
     }
-    return (_jsxs("div", { className: isGameModal
-            ? "relative flex w-full items-end gap-2 transition-all max-[380px]:gap-1.5"
-            : "flex items-center gap-1.5 sm:gap-2", children: [!isGameModal && !hideAttachButton ? (_jsx(Button, { variant: "ghost", size: "icon", className: isInline
+    return (_jsxs("div", { "data-chat-composer": "true", className: isGameModal
+            ? `relative flex w-full items-end gap-2 transition-all max-[380px]:gap-1.5 ${chatComposerFocusResetClass}`
+            : `flex items-center gap-1.5 sm:gap-2 ${chatComposerFocusResetClass}`, children: [!isGameModal && !hideAttachButton ? (_jsx(Button, { variant: "ghost", size: "icon", className: isInline
                     ? `h-8 w-8 shrink-0 rounded-full bg-bg/60 p-0 text-muted shadow-none transition-colors hover:bg-bg/60 hover:text-txt focus-visible:ring-0 focus-visible:ring-offset-0 ${chatPendingImagesCount > 0
                         ? "text-accent hover:text-accent"
                         : ""}`

package/packages/ui/src/layouts/page-layout/page-layout-mobile-drawer.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"page-layout-mobile-drawer.d.ts","sourceRoot":"","sources":["../../../../../../src/layouts/page-layout/page-layout-mobile-drawer.tsx"],"names":[],"mappings":"AAWA,OAAO,KAAK,EAAE,2BAA2B,EAAE,MAAM,qBAAqB,CAAC;AAEvE,wBAAgB,sBAAsB,CAAC,EACrC,SAAS,EACT,kBAAkB,EAClB,iBAAiB,EACjB,6BAA6B,EAC7B,yBAAyB,EACzB,OAAO,GACR,EAAE,2BAA2B,kDAsD7B"}
+{"version":3,"file":"page-layout-mobile-drawer.d.ts","sourceRoot":"","sources":["../../../../../../src/layouts/page-layout/page-layout-mobile-drawer.tsx"],"names":[],"mappings":"AAMA,OAAO,KAAK,EAAE,2BAA2B,EAAE,MAAM,qBAAqB,CAAC;AAEvE,wBAAgB,sBAAsB,CAAC,EACrC,SAAS,EACT,kBAAkB,EAClB,iBAAiB,EACjB,6BAA6B,EAC7B,yBAAyB,EACzB,OAAO,GACR,EAAE,2BAA2B,kDAsE7B"}

package/packages/ui/src/layouts/page-layout/page-layout-mobile-drawer.js

@@ -2,11 +2,11 @@ import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-run
 import { PanelLeftOpen } from "lucide-react";
 import * as React from "react";
 import { Button } from "../../components/ui/button";
-import { DrawerSheet, DrawerSheetContent, DrawerSheetHeader, DrawerSheetTitle, } from "../../components/ui/drawer-sheet";
 import { cn } from "../../lib/utils";
+import { useWorkspaceMobileSidebarControls } from "../workspace-layout/workspace-mobile-sidebar-controls";
 export function PageLayoutMobileDrawer({ isDesktop, mobileSidebarLabel, mobileSidebarOpen, mobileSidebarTriggerClassName, onMobileSidebarOpenChange, sidebar, }) {
-    if (isDesktop)
-        return null;
+    const controls = useWorkspaceMobileSidebarControls();
+    const sidebarId = React.useId();
     const mobileSidebarElement = React.cloneElement(sidebar, {
         className: cn("!mt-0 !h-full !w-full !min-w-0", sidebar.props.className),
         collapsible: false,
@@ -14,5 +14,24 @@ export function PageLayoutMobileDrawer({ isDesktop, mobileSidebarLabel, mobileSi
         onMobileClose: () => onMobileSidebarOpenChange(false),
     });
     const drawerLabel = sidebar.props.mobileTitle ?? mobileSidebarLabel ?? "Browse";
-    return (_jsxs(_Fragment, { children: [!mobileSidebarOpen ? (_jsx("div", { className: "pointer-events-none fixed left-2 z-40 md:hidden", style: { top: "var(--safe-area-top, 0px)" }, children: _jsx("div", { className: "pointer-events-auto", children: _jsxs(Button, { type: "button", variant: "outline", size: "sm", className: cn("h-[2.375rem] max-w-[min(11rem,calc(100vw-5.5rem))] rounded-full border-border/40 bg-card/92 px-3 text-sm font-semibold text-txt shadow-sm backdrop-blur-md", mobileSidebarTriggerClassName), onClick: () => onMobileSidebarOpenChange(true), children: [_jsx(PanelLeftOpen, { className: "h-4 w-4 shrink-0" }), _jsx("span", { className: "truncate", children: drawerLabel })] }) }) })) : null, _jsx(DrawerSheet, { open: mobileSidebarOpen, onOpenChange: onMobileSidebarOpenChange, children: _jsxs(DrawerSheetContent, { "aria-describedby": undefined, className: "h-[min(calc(100dvh-1rem-var(--safe-area-top,0px)-var(--safe-area-bottom,0px)),46rem)] p-0", showCloseButton: false, children: [_jsx(DrawerSheetHeader, { className: "sr-only", children: _jsx(DrawerSheetTitle, { children: drawerLabel }) }), mobileSidebarElement] }) })] }));
+    React.useEffect(() => {
+        if (!controls || isDesktop)
+            return undefined;
+        return controls.register({
+            id: sidebarId,
+            label: drawerLabel,
+            open: mobileSidebarOpen,
+            setOpen: onMobileSidebarOpenChange,
+        });
+    }, [
+        controls,
+        drawerLabel,
+        isDesktop,
+        mobileSidebarOpen,
+        onMobileSidebarOpenChange,
+        sidebarId,
+    ]);
+    if (isDesktop)
+        return null;
+    return (_jsxs(_Fragment, { children: [!mobileSidebarOpen && !controls ? (_jsx("div", { className: "pointer-events-none fixed left-2 z-40 md:hidden", style: { top: "calc(var(--safe-area-top, 0px) + 2.75rem)" }, children: _jsx("div", { className: "pointer-events-auto", children: _jsxs(Button, { type: "button", variant: "outline", size: "sm", className: cn("h-[2.375rem] max-w-[min(11rem,calc(100vw-5.5rem))] rounded-full border-border/40 bg-card/92 px-3 text-sm font-semibold text-txt shadow-sm backdrop-blur-md", mobileSidebarTriggerClassName), "data-testid": "page-layout-mobile-sidebar-trigger", onClick: () => onMobileSidebarOpenChange(true), children: [_jsx(PanelLeftOpen, { className: "h-4 w-4 shrink-0" }), _jsx("span", { className: "truncate", children: drawerLabel })] }) }) })) : null, mobileSidebarOpen ? (_jsx("section", { className: "flex min-h-0 w-full flex-1 overflow-hidden", "data-testid": "page-layout-mobile-sidebar-drawer", "aria-label": typeof drawerLabel === "string" ? drawerLabel : undefined, children: mobileSidebarElement })) : null] }));
 }

package/packages/ui/src/layouts/workspace-layout/index.d.ts

@@ -1,3 +1,4 @@
 export * from "./workspace-layout";
 export * from "./workspace-layout-types";
+export * from "./workspace-mobile-sidebar-controls";
 //# sourceMappingURL=index.d.ts.map

package/packages/ui/src/layouts/workspace-layout/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../../src/layouts/workspace-layout/index.ts"],"names":[],"mappings":"AAAA,cAAc,oBAAoB,CAAC;AACnC,cAAc,0BAA0B,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../../src/layouts/workspace-layout/index.ts"],"names":[],"mappings":"AAAA,cAAc,oBAAoB,CAAC;AACnC,cAAc,0BAA0B,CAAC;AACzC,cAAc,qCAAqC,CAAC"}

package/packages/ui/src/layouts/workspace-layout/index.js

@@ -1,2 +1,3 @@
 export * from "./workspace-layout";
 export * from "./workspace-layout-types";
+export * from "./workspace-mobile-sidebar-controls";

package/packages/ui/src/layouts/workspace-layout/workspace-layout.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"workspace-layout.d.ts","sourceRoot":"","sources":["../../../../../../src/layouts/workspace-layout/workspace-layout.tsx"],"names":[],"mappings":"AAKA,OAAO,KAAK,EAAE,oBAAoB,EAAE,MAAM,0BAA0B,CAAC;AAiDrE,wBAAgB,eAAe,CAAC,EAC9B,QAAQ,EACR,SAAS,EACT,gBAAgB,EAChB,aAAa,EACb,sBAAsB,EACtB,qBAAqB,EACrB,cAAqB,EACrB,UAAU,EACV,MAAM,EACN,eAAe,EACf,eAA2B,EAC3B,kBAAkB,EAClB,6BAA6B,EAC7B,OAAO,EACP,kBAAyB,EACzB,GAAG,KAAK,EACT,EAAE,oBAAoB,2CA8FtB"}
+{"version":3,"file":"workspace-layout.d.ts","sourceRoot":"","sources":["../../../../../../src/layouts/workspace-layout/workspace-layout.tsx"],"names":[],"mappings":"AAKA,OAAO,KAAK,EAAE,oBAAoB,EAAE,MAAM,0BAA0B,CAAC;AAiDrE,wBAAgB,eAAe,CAAC,EAC9B,QAAQ,EACR,SAAS,EACT,gBAAgB,EAChB,aAAa,EACb,sBAAsB,EACtB,qBAAqB,EACrB,cAAqB,EACrB,UAAU,EACV,MAAM,EACN,eAAe,EACf,eAA2B,EAC3B,kBAAkB,EAClB,6BAA6B,EAC7B,OAAO,EACP,kBAAyB,EACzB,GAAG,KAAK,EACT,EAAE,oBAAoB,2CAwGtB"}

package/packages/ui/src/layouts/workspace-layout/workspace-layout.js

@@ -41,6 +41,7 @@ function useWorkspaceLayoutDesktopMode() {
 export function WorkspaceLayout({ children, className, contentClassName, contentHeader, contentHeaderClassName, contentInnerClassName, contentPadding = true, contentRef, footer, footerClassName, headerPlacement = "outside", mobileSidebarLabel, mobileSidebarTriggerClassName, sidebar, sidebarCollapsible = true, ...props }) {
     const isDesktop = useWorkspaceLayoutDesktopMode();
     const [mobileSidebarOpen, setMobileSidebarOpen] = React.useState(false);
+    const showMobileSidebarPane = Boolean(sidebar && !isDesktop && mobileSidebarOpen);
     React.useEffect(() => {
         if (isDesktop) {
             setMobileSidebarOpen(false);
@@ -54,6 +55,11 @@ export function WorkspaceLayout({ children, className, contentClassName, content
         })
         : null;
     const headerElement = contentHeader ? (_jsx(PageLayoutHeader, { className: contentHeaderClassName, children: contentHeader })) : null;
-    return (_jsxs("div", { className: cn("flex w-full min-h-0 min-w-0 flex-1 flex-col overflow-hidden", className), ...props, children: [contentHeader && headerPlacement === "outside" ? (_jsx("div", { className: cn("shrink-0", contentPadding && "px-4 pt-2 sm:px-6 sm:pt-3 lg:px-7 lg:pt-4"), children: headerElement })) : null, _jsxs("div", { className: cn("flex w-full min-h-0 min-w-0 flex-1 flex-col", sidebar && "md:flex-row"), children: [desktopSidebarElement ? (_jsx("div", { className: cn("hidden min-h-0 w-full shrink-0 items-stretch px-0 pb-0 md:flex md:w-auto", contentPadding && "pt-2 sm:pt-3 lg:pt-4"), children: desktopSidebarElement })) : null, _jsxs("main", { ref: (node) => assignRef(contentRef, node), className: cn("chat-native-scrollbar relative flex min-w-0 flex-1 flex-col overflow-y-auto bg-transparent", contentPadding &&
-                            "px-4 pb-4 pt-2 sm:px-6 sm:pb-6 sm:pt-3 lg:px-7 lg:pb-7 lg:pt-4", contentClassName), children: [sidebar ? (_jsx(PageLayoutMobileDrawer, { isDesktop: isDesktop, mobileSidebarLabel: mobileSidebarLabel, mobileSidebarOpen: mobileSidebarOpen, mobileSidebarTriggerClassName: mobileSidebarTriggerClassName, onMobileSidebarOpenChange: setMobileSidebarOpen, sidebar: sidebar })) : null, contentHeader && headerPlacement === "inside" ? headerElement : null, _jsx("div", { className: cn("flex w-full min-h-0 flex-1 flex-col", contentInnerClassName), children: children })] })] })] }));
+    return (_jsxs("div", { className: cn("flex w-full min-h-0 min-w-0 flex-1 flex-col overflow-hidden", className), ...props, children: [contentHeader && headerPlacement === "outside" ? (_jsx("div", { className: cn("shrink-0", contentPadding && "px-4 pt-2 sm:px-6 sm:pt-3 lg:px-7 lg:pt-4"), children: headerElement })) : null, _jsxs("div", { className: cn("flex w-full min-h-0 min-w-0 flex-1 flex-col", sidebar && "md:flex-row"), children: [desktopSidebarElement ? (_jsx("div", { className: cn("hidden min-h-0 w-full shrink-0 items-stretch px-0 pb-0 md:flex md:w-auto", contentPadding && "pt-2 sm:pt-3 lg:pt-4"), children: desktopSidebarElement })) : null, _jsxs("main", { ref: (node) => assignRef(contentRef, node), className: cn("chat-native-scrollbar relative flex min-w-0 flex-1 flex-col bg-transparent", showMobileSidebarPane ? "overflow-hidden" : "overflow-y-auto", contentPadding &&
+                            !showMobileSidebarPane &&
+                            "px-4 pb-4 pt-2 sm:px-6 sm:pb-6 sm:pt-3 lg:px-7 lg:pb-7 lg:pt-4", !showMobileSidebarPane && contentClassName), children: [sidebar ? (_jsx(PageLayoutMobileDrawer, { isDesktop: isDesktop, mobileSidebarLabel: mobileSidebarLabel, mobileSidebarOpen: mobileSidebarOpen, mobileSidebarTriggerClassName: mobileSidebarTriggerClassName, onMobileSidebarOpenChange: setMobileSidebarOpen, sidebar: sidebar })) : null, contentHeader &&
+                                headerPlacement === "inside" &&
+                                !showMobileSidebarPane
+                                ? headerElement
+                                : null, _jsx("div", { className: cn("flex w-full min-h-0 flex-1 flex-col", contentInnerClassName, showMobileSidebarPane && "hidden"), children: children })] })] })] }));
 }

package/packages/ui/src/layouts/workspace-layout/workspace-mobile-sidebar-controls.d.ts

@@ -0,0 +1,13 @@
+import * as React from "react";
+export interface WorkspaceMobileSidebarControl {
+    id: string;
+    label?: React.ReactNode;
+    open: boolean;
+    setOpen: (open: boolean) => void;
+}
+export interface WorkspaceMobileSidebarControls {
+    register: (control: WorkspaceMobileSidebarControl) => () => void;
+}
+export declare const WorkspaceMobileSidebarControlsContext: React.Context<WorkspaceMobileSidebarControls | null>;
+export declare function useWorkspaceMobileSidebarControls(): WorkspaceMobileSidebarControls | null;
+//# sourceMappingURL=workspace-mobile-sidebar-controls.d.ts.map

package/packages/ui/src/layouts/workspace-layout/workspace-mobile-sidebar-controls.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"workspace-mobile-sidebar-controls.d.ts","sourceRoot":"","sources":["../../../../../../src/layouts/workspace-layout/workspace-mobile-sidebar-controls.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,MAAM,WAAW,6BAA6B;IAC5C,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACxB,IAAI,EAAE,OAAO,CAAC;IACd,OAAO,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAC;CAClC;AAED,MAAM,WAAW,8BAA8B;IAC7C,QAAQ,EAAE,CAAC,OAAO,EAAE,6BAA6B,KAAK,MAAM,IAAI,CAAC;CAClE;AAED,eAAO,MAAM,qCAAqC,sDACgB,CAAC;AAEnE,wBAAgB,iCAAiC,IAAI,8BAA8B,GAAG,IAAI,CAEzF"}

package/packages/ui/src/layouts/workspace-layout/workspace-mobile-sidebar-controls.js

@@ -0,0 +1,5 @@
+import * as React from "react";
+export const WorkspaceMobileSidebarControlsContext = React.createContext(null);
+export function useWorkspaceMobileSidebarControls() {
+    return React.useContext(WorkspaceMobileSidebarControlsContext);
+}