@sybilion/uilib 1.3.58 → 1.3.60

package/dist/esm/components/ui/Chat/ChatSheet/useChatPanelChromeModel.js

@@ -5,6 +5,7 @@ import { isGraphIntakeAssistantStepComplete, matchUserTextToQuickReply, isPreset
 import { buildChatSendMessagePayload, displayTextFromSendPayload } from '../buildChatSendMessagePayload.js';
 import { usedPresetIdsFromMessages } from '../chat-preset-utils.js';
 import { useChatsForScopeId, useChat, useChatOutboundPending, useSyncChatPanelBusy, isChatEmpty } from '../../../../contexts/chat-context.js';
+import { shellFitsSidebarsLayout } from '../../../../hooks/panelWidth.js';
 import useEvent from '../../../../hooks/useEvent.js';
 import { useIsMobile } from '../../../../hooks/useIsMobile.js';
 import { useQueryParams } from '../../../../hooks/useQueryParams.js';
@@ -17,15 +18,13 @@ import { Chat } from '../Chat.js';
 const NO_SCOPE_FALLBACK = '__uilib_chat_scope_unset__';
 const SCRIPT_STEP_DELAY_MS = 1200;
 const CHAT_NEW_SHORTCUT_KEY = 'o';
-/** When chat panel is open, collapse left nav below this width so both don't crowd the viewport. */
-const CHAT_NAV_COLLAPSE_BREAKPOINT_PX = 1400;
 const CHAT_QUERY_PARAM = 'chat';
 const CHAT_OPEN_VALUE = 'open';
 const PROMPT_QUERY_PARAM = 'prompt';
 function useChatPanelChromeModel({ embedAsPage, presets, scopeId, onMessage, onScriptComplete, renderMessageChart, emptyState, allowedAttachments, allowPdfAttachments, onAttachmentsDropped, slashCommandItems, onSlashItemCommand, transformSendPayload, }) {
     const effectiveScopeId = scopeId ?? NO_SCOPE_FALLBACK;
     const isMobile = useIsMobile();
-    const { chatPanelContainer, isOpen: sidebarNavOpen, setOpen: setSidebarNavOpen, chatWidthPx, setChatWidthPx, getShellWidth, setChatPanelOpen, } = useSidebar();
+    const { chatPanelContainer, isOpen: sidebarNavOpen, setOpen: setSidebarNavOpen, sidebarWidthPx, chatWidthPx, setChatWidthPx, getShellWidth, chatPanelOpen: shellChatPanelOpen, setChatPanelOpen, } = useSidebar();
     const [localUiBusy, setLocalUiBusy] = useState(false);
     const { chats, currentChatId, setCurrentChatId, newChat, sendMessage, addMessage, removeMessageById, } = useChatsForScopeId(effectiveScopeId);
     const chat = useChat(effectiveScopeId, currentChatId);
@@ -124,29 +123,27 @@ function useChatPanelChromeModel({ embedAsPage, presets, scopeId, onMessage, onS
         if (embedAsPage) {
             return;
         }
-        const run = () => {
-            setIsOpen(open);
-            setChatPanelOpen(open);
-        };
-        if (!isMobile &&
-            'startViewTransition' in document &&
-            document.startViewTransition) {
-            document.startViewTransition(run);
-        }
-        else {
-            run();
-        }
         if (open) {
-            // Avoid a second setSearchParams when `chat` is already set (e.g. Reports merges
-            // reportId + chat in one update). A redundant add can merge from a stale `prev`
-            // and drop other query keys.
+            setIsOpen(true);
+            setChatPanelOpen(true);
             if (!searchParams.has(CHAT_QUERY_PARAM)) {
                 addSearchParams({ [CHAT_QUERY_PARAM]: CHAT_OPEN_VALUE });
             }
+            return;
+        }
+        const applyClose = () => {
+            setIsOpen(false);
+            setChatPanelOpen(false);
+        };
+        if (!isMobile &&
+            'startViewTransition' in document &&
+            document.startViewTransition) {
+            document.startViewTransition(applyClose);
         }
         else {
-            removeSearchParams(CHAT_QUERY_PARAM);
+            applyClose();
         }
+        removeSearchParams(CHAT_QUERY_PARAM);
     };
     const isEmpty = isChatEmpty(chat) && !isLoading;
     const openNewChatWithPrefill = useCallback((prompt) => {
@@ -631,9 +628,33 @@ function useChatPanelChromeModel({ embedAsPage, presets, scopeId, onMessage, onS
         if (embedAsPage) {
             return;
         }
-        setIsOpen(chatOpen);
-        setChatPanelOpen(chatOpen);
-    }, [embedAsPage, chatOpen, setChatPanelOpen]);
+        if (!chatOpen) {
+            setIsOpen(false);
+            setChatPanelOpen(false);
+            return;
+        }
+        if (!shellChatPanelOpen && sidebarNavOpen) {
+            removeSearchParams(CHAT_QUERY_PARAM);
+            return;
+        }
+        setIsOpen(true);
+        setChatPanelOpen(true);
+    }, [
+        embedAsPage,
+        chatOpen,
+        setChatPanelOpen,
+        sidebarNavOpen,
+        shellChatPanelOpen,
+        removeSearchParams,
+    ]);
+    /** Shell closed chat for space (e.g. nav opened); keep UI and URL in sync. */
+    useEffect(() => {
+        if (embedAsPage || shellChatPanelOpen || !isOpen) {
+            return;
+        }
+        setIsOpen(false);
+        removeSearchParams(CHAT_QUERY_PARAM);
+    }, [embedAsPage, shellChatPanelOpen, isOpen, removeSearchParams]);
     /** When this instance unmounts (e.g. route hides ChatSheet), release shell layout — URL sync alone does not run. */
     useEffect(() => {
         return () => {
@@ -648,16 +669,30 @@ function useChatPanelChromeModel({ embedAsPage, presets, scopeId, onMessage, onS
         }
         if (!isOpen || !sidebarNavOpen)
             return;
-        const collapseNavIfNarrow = () => {
-            if (window.innerWidth < CHAT_NAV_COLLAPSE_BREAKPOINT_PX) {
+        const collapseNavIfNoSpace = () => {
+            const shellW = getShellWidth();
+            if (!shellFitsSidebarsLayout(shellW, {
+                mainSidebarOpen: true,
+                chatPanelOpen: true,
+                sidebarWidthPx,
+                chatWidthPx,
+            })) {
                 // Chat open uses `startViewTransition`; nested transition here aborts first → AbortError overlay.
                 setSidebarNavOpen(false, { viewTransition: false });
             }
         };
-        collapseNavIfNarrow();
-        window.addEventListener('resize', collapseNavIfNarrow);
-        return () => window.removeEventListener('resize', collapseNavIfNarrow);
-    }, [embedAsPage, isOpen, sidebarNavOpen, setSidebarNavOpen]);
+        collapseNavIfNoSpace();
+        window.addEventListener('resize', collapseNavIfNoSpace);
+        return () => window.removeEventListener('resize', collapseNavIfNoSpace);
+    }, [
+        embedAsPage,
+        isOpen,
+        sidebarNavOpen,
+        setSidebarNavOpen,
+        getShellWidth,
+        sidebarWidthPx,
+        chatWidthPx,
+    ]);
     const renderPresets = (layout = 'fixed') => {
         if (!presetsWithFreeform?.length)
             return null;

package/dist/esm/components/ui/Sidebar/Sidebar.js

@@ -5,7 +5,7 @@ import { Button } from '../Button/Button.js';
 import { Separator } from '../Separator/Separator.js';
 import { Sheet, SheetContent, SheetTitle } from '../Sheet/Sheet.js';
 import { TooltipProvider, Tooltip, TooltipTrigger, TooltipContent } from '../Tooltip/Tooltip.js';
-import { clampSidebarWidthPx, CHAT_WIDTH_STORAGE_KEY, SIDEBAR_WIDTH_DEFAULT_PX, SIDEBAR_WIDTH_MIN_PX, SIDEBAR_WIDTH_STORAGE_KEY_PX, SIDEBAR_WIDTH_STORAGE_KEY_PCT, CHAT_WIDTH_DEFAULT_PX, CHAT_WIDTH_MIN_PX, defaultChatWidthPx, clampChatWidthPx } from '../../../hooks/panelWidth.js';
+import { clampSidebarWidthPx, CHAT_WIDTH_STORAGE_KEY, shellFitsSidebarsLayout, SIDEBAR_WIDTH_DEFAULT_PX, SIDEBAR_WIDTH_MIN_PX, SIDEBAR_WIDTH_STORAGE_KEY_PX, SIDEBAR_WIDTH_STORAGE_KEY_PCT, CHAT_WIDTH_DEFAULT_PX, CHAT_WIDTH_MIN_PX, defaultChatWidthPx, clampChatWidthPx } from '../../../hooks/panelWidth.js';
 import useElemDrag from '../../../hooks/useDragElem.js';
 import useEvent from '../../../hooks/useEvent.js';
 import { useIsSidebarSheetLayout } from '../../../hooks/useIsSidebarSheetLayout.js';
@@ -80,7 +80,7 @@ function SidebarProvider({ defaultOpen = getCookie('isSidebarOpen') ?? true, cla
     }, []);
     const [sidebarWidthPx, _setSidebarWidthPx] = useState(() => readInitialSidebarWidthPx(sidebarLsKey));
     const [chatWidthPx, _setChatWidthPx] = useState(readInitialChatWidthPx);
-    const [chatPanelOpen, setChatPanelOpen] = useState(false);
+    const [chatPanelOpen, _setChatPanelOpen] = useState(false);
     const sidebarWidthRef = useRef(sidebarWidthPx);
     const chatWidthRef = useRef(chatWidthPx);
     sidebarWidthRef.current = sidebarWidthPx;
@@ -205,7 +205,46 @@ function SidebarProvider({ defaultOpen = getCookie('isSidebarOpen') ?? true, cla
         fitPanelWidthsToShell,
     ]);
     useShellWidthObserver(shellEl, handleShellResize);
+    const closeOppositeSidebarIfNoSpace = useCallback((openingMain, openingChat) => {
+        if (isSidebarSheetLayout)
+            return;
+        const shellW = getShellWidth();
+        const layoutAfterOpen = {
+            mainSidebarOpen: openingMain || isOpen,
+            chatPanelOpen: openingChat || chatPanelOpen,
+            sidebarWidthPx,
+            chatWidthPx,
+        };
+        if (shellFitsSidebarsLayout(shellW, layoutAfterOpen))
+            return;
+        if (openingMain && chatPanelOpen) {
+            _setChatPanelOpen(false);
+        }
+        else if (openingChat && isOpen) {
+            setIsOpen(false);
+            if (getCookiePreferences(userId)?.functional) {
+                setCookie('isSidebarOpen', 'false', 60 * 60 * 24 * 7);
+            }
+        }
+    }, [
+        isSidebarSheetLayout,
+        getShellWidth,
+        isOpen,
+        chatPanelOpen,
+        sidebarWidthPx,
+        chatWidthPx,
+        userId,
+    ]);
+    const setChatPanelOpen = useCallback((open) => {
+        if (open) {
+            closeOppositeSidebarIfNoSpace(false, true);
+        }
+        _setChatPanelOpen(open);
+    }, [closeOppositeSidebarIfNoSpace]);
     const setOpen = useCallback((value, options) => {
+        if (value) {
+            closeOppositeSidebarIfNoSpace(true, false);
+        }
         const useViewTransition = options?.viewTransition !== false &&
             !isSidebarSheetLayout &&
             'startViewTransition' in document &&
@@ -221,7 +260,7 @@ function SidebarProvider({ defaultOpen = getCookie('isSidebarOpen') ?? true, cla
         if (getCookiePreferences(userId)?.functional) {
             setCookie('isSidebarOpen', value.toString(), 60 * 60 * 24 * 7);
         }
-    }, [isSidebarSheetLayout, userId]);
+    }, [isSidebarSheetLayout, userId, closeOppositeSidebarIfNoSpace]);
     const toggleSidebar = useCallback(() => setOpen(!isOpen), [isOpen, setOpen]);
     useEffect(() => {
         const shell = wrapperRef.current;

package/dist/esm/hooks/panelWidth.js

@@ -46,5 +46,31 @@ function clampChatWidthPx(px, shellWidth, effectiveSidebarWidthPx) {
 function defaultChatWidthPx(shellWidth) {
     return clampChatWidthPx(CHAT_WIDTH_DEFAULT_PX, shellWidth, SIDEBAR_WIDTH_DEFAULT_PX);
 }
+/**
+ * Stored width can fall below panel min when the shell was narrow (clamp cap < min).
+ * For dual-panel fit checks, treat open panels as at least their min width.
+ */
+function effectiveOpenPanelWidthPx(px, minPx, bothPanelsOpen) {
+    if (bothPanelsOpen) {
+        return Math.max(px, minPx);
+    }
+    return px > 0 ? px : minPx;
+}
+/** Minimum shell width when nav and/or chat panels are open (main column at least `CENTRAL_AREA_MIN_PX`). */
+function requiredShellWidthForSidebars(widths) {
+    const bothPanelsOpen = widths.mainSidebarOpen && widths.chatPanelOpen;
+    const sidebarW = widths.mainSidebarOpen
+        ? effectiveOpenPanelWidthPx(widths.sidebarWidthPx, SIDEBAR_WIDTH_MIN_PX, bothPanelsOpen)
+        : 0;
+    const chatW = widths.chatPanelOpen
+        ? effectiveOpenPanelWidthPx(widths.chatWidthPx, CHAT_WIDTH_MIN_PX, bothPanelsOpen)
+        : 0;
+    return sidebarW + CENTRAL_AREA_MIN_PX + chatW;
+}
+function shellFitsSidebarsLayout(shellWidth, widths) {
+    if (shellWidth <= 0)
+        return true;
+    return shellWidth >= requiredShellWidthForSidebars(widths);
+}
 
-export { CENTRAL_AREA_MIN_PX, CHAT_WIDTH_ABS_MAX_PX, CHAT_WIDTH_DEFAULT_PX, CHAT_WIDTH_MIN_PX, CHAT_WIDTH_STORAGE_KEY, SHELL_MAX_FRACTION, SIDEBAR_SHEET_LAYOUT_MAX_WIDTH_PX, SIDEBAR_SHEET_SPLIT_MIN_VIEWPORT_PX, SIDEBAR_WIDTH_DEFAULT_PX, SIDEBAR_WIDTH_MIN_PX, SIDEBAR_WIDTH_STORAGE_KEY_PCT, SIDEBAR_WIDTH_STORAGE_KEY_PX, clampChatWidthPx, clampSidebarWidthPx, defaultChatWidthPx, maxChatWidthPx, maxSidebarWidthPx };
+export { CENTRAL_AREA_MIN_PX, CHAT_WIDTH_ABS_MAX_PX, CHAT_WIDTH_DEFAULT_PX, CHAT_WIDTH_MIN_PX, CHAT_WIDTH_STORAGE_KEY, SHELL_MAX_FRACTION, SIDEBAR_SHEET_LAYOUT_MAX_WIDTH_PX, SIDEBAR_SHEET_SPLIT_MIN_VIEWPORT_PX, SIDEBAR_WIDTH_DEFAULT_PX, SIDEBAR_WIDTH_MIN_PX, SIDEBAR_WIDTH_STORAGE_KEY_PCT, SIDEBAR_WIDTH_STORAGE_KEY_PX, clampChatWidthPx, clampSidebarWidthPx, defaultChatWidthPx, maxChatWidthPx, maxSidebarWidthPx, requiredShellWidthForSidebars, shellFitsSidebarsLayout };

package/dist/esm/types/src/hooks/panelWidth.d.ts

@@ -22,3 +22,12 @@ export declare function clampSidebarWidthPx(px: number, shellWidth: number, opts
 /** Width that reduces the main column when the nav sidebar is expanded; use 0 when collapsed. */
 export declare function clampChatWidthPx(px: number, shellWidth: number, effectiveSidebarWidthPx: number): number;
 export declare function defaultChatWidthPx(shellWidth: number): number;
+export type SidebarsLayoutWidths = {
+    mainSidebarOpen: boolean;
+    chatPanelOpen: boolean;
+    sidebarWidthPx: number;
+    chatWidthPx: number;
+};
+/** Minimum shell width when nav and/or chat panels are open (main column at least `CENTRAL_AREA_MIN_PX`). */
+export declare function requiredShellWidthForSidebars(widths: SidebarsLayoutWidths): number;
+export declare function shellFitsSidebarsLayout(shellWidth: number, widths: SidebarsLayoutWidths): boolean;

package/dist/esm/types/src/hooks/panelWidth.test.d.ts

@@ -0,0 +1 @@
+export {};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sybilion/uilib",
-  "version": "1.3.58",
+  "version": "1.3.60",
   "description": "Sybilion Design System — React UI components (Webpack + Stylus)",
   "publishConfig": {
     "access": "public",

package/src/components/ui/Chat/ChatSheet/useChatPanelChromeModel.tsx

@@ -31,6 +31,7 @@ import {
   useChatsForScopeId,
   useSyncChatPanelBusy,
 } from '#uilib/contexts/chat-context';
+import { shellFitsSidebarsLayout } from '#uilib/hooks/panelWidth';
 import useEvent from '#uilib/hooks/useEvent';
 import { useIsMobile } from '#uilib/hooks/useIsMobile';
 import { useQueryParams } from '#uilib/hooks/useQueryParams';
@@ -114,8 +115,6 @@ type PresetScriptState = {
 
 const SCRIPT_STEP_DELAY_MS = 1200;
 const CHAT_NEW_SHORTCUT_KEY = 'o';
-/** When chat panel is open, collapse left nav below this width so both don't crowd the viewport. */
-const CHAT_NAV_COLLAPSE_BREAKPOINT_PX = 1400;
 
 const CHAT_QUERY_PARAM = 'chat';
 const CHAT_OPEN_VALUE = 'open';
@@ -142,9 +141,11 @@ export function useChatPanelChromeModel({
     chatPanelContainer,
     isOpen: sidebarNavOpen,
     setOpen: setSidebarNavOpen,
+    sidebarWidthPx,
     chatWidthPx,
     setChatWidthPx,
     getShellWidth,
+    chatPanelOpen: shellChatPanelOpen,
     setChatPanelOpen,
   } = useSidebar();
   const [localUiBusy, setLocalUiBusy] = useState(false);
@@ -286,30 +287,29 @@ export function useChatPanelChromeModel({
     if (embedAsPage) {
       return;
     }
-    const run = () => {
-      setIsOpen(open);
-      setChatPanelOpen(open);
+    if (open) {
+      setIsOpen(true);
+      setChatPanelOpen(true);
+      if (!searchParams.has(CHAT_QUERY_PARAM)) {
+        addSearchParams({ [CHAT_QUERY_PARAM]: CHAT_OPEN_VALUE });
+      }
+      return;
+    }
+
+    const applyClose = () => {
+      setIsOpen(false);
+      setChatPanelOpen(false);
     };
     if (
       !isMobile &&
       'startViewTransition' in document &&
       document.startViewTransition
     ) {
-      document.startViewTransition(run);
+      document.startViewTransition(applyClose);
     } else {
-      run();
-    }
-
-    if (open) {
-      // Avoid a second setSearchParams when `chat` is already set (e.g. Reports merges
-      // reportId + chat in one update). A redundant add can merge from a stale `prev`
-      // and drop other query keys.
-      if (!searchParams.has(CHAT_QUERY_PARAM)) {
-        addSearchParams({ [CHAT_QUERY_PARAM]: CHAT_OPEN_VALUE });
-      }
-    } else {
-      removeSearchParams(CHAT_QUERY_PARAM);
+      applyClose();
     }
+    removeSearchParams(CHAT_QUERY_PARAM);
   };
 
   const isEmpty = isChatEmpty(chat) && !isLoading;
@@ -855,9 +855,34 @@ export function useChatPanelChromeModel({
     if (embedAsPage) {
       return;
     }
-    setIsOpen(chatOpen);
-    setChatPanelOpen(chatOpen);
-  }, [embedAsPage, chatOpen, setChatPanelOpen]);
+    if (!chatOpen) {
+      setIsOpen(false);
+      setChatPanelOpen(false);
+      return;
+    }
+    if (!shellChatPanelOpen && sidebarNavOpen) {
+      removeSearchParams(CHAT_QUERY_PARAM);
+      return;
+    }
+    setIsOpen(true);
+    setChatPanelOpen(true);
+  }, [
+    embedAsPage,
+    chatOpen,
+    setChatPanelOpen,
+    sidebarNavOpen,
+    shellChatPanelOpen,
+    removeSearchParams,
+  ]);
+
+  /** Shell closed chat for space (e.g. nav opened); keep UI and URL in sync. */
+  useEffect(() => {
+    if (embedAsPage || shellChatPanelOpen || !isOpen) {
+      return;
+    }
+    setIsOpen(false);
+    removeSearchParams(CHAT_QUERY_PARAM);
+  }, [embedAsPage, shellChatPanelOpen, isOpen, removeSearchParams]);
 
   /** When this instance unmounts (e.g. route hides ChatSheet), release shell layout — URL sync alone does not run. */
   useEffect(() => {
@@ -874,17 +899,33 @@ export function useChatPanelChromeModel({
     }
     if (!isOpen || !sidebarNavOpen) return;
 
-    const collapseNavIfNarrow = () => {
-      if (window.innerWidth < CHAT_NAV_COLLAPSE_BREAKPOINT_PX) {
+    const collapseNavIfNoSpace = () => {
+      const shellW = getShellWidth();
+      if (
+        !shellFitsSidebarsLayout(shellW, {
+          mainSidebarOpen: true,
+          chatPanelOpen: true,
+          sidebarWidthPx,
+          chatWidthPx,
+        })
+      ) {
         // Chat open uses `startViewTransition`; nested transition here aborts first → AbortError overlay.
         setSidebarNavOpen(false, { viewTransition: false });
       }
     };
 
-    collapseNavIfNarrow();
-    window.addEventListener('resize', collapseNavIfNarrow);
-    return () => window.removeEventListener('resize', collapseNavIfNarrow);
-  }, [embedAsPage, isOpen, sidebarNavOpen, setSidebarNavOpen]);
+    collapseNavIfNoSpace();
+    window.addEventListener('resize', collapseNavIfNoSpace);
+    return () => window.removeEventListener('resize', collapseNavIfNoSpace);
+  }, [
+    embedAsPage,
+    isOpen,
+    sidebarNavOpen,
+    setSidebarNavOpen,
+    getShellWidth,
+    sidebarWidthPx,
+    chatWidthPx,
+  ]);
 
   const renderPresets = (layout: ChatPresetsLayout = 'fixed') => {
     if (!presetsWithFreeform?.length) return null;

package/src/components/ui/Sidebar/Sidebar.tsx

@@ -34,6 +34,7 @@ import {
   clampChatWidthPx,
   clampSidebarWidthPx,
   defaultChatWidthPx,
+  shellFitsSidebarsLayout,
 } from '#uilib/hooks/panelWidth';
 import useElemDrag, { Delta } from '#uilib/hooks/useDragElem';
 import useEvent from '#uilib/hooks/useEvent';
@@ -171,7 +172,7 @@ function SidebarProvider({
     readInitialSidebarWidthPx(sidebarLsKey),
   );
   const [chatWidthPx, _setChatWidthPx] = useState(readInitialChatWidthPx);
-  const [chatPanelOpen, setChatPanelOpen] = useState(false);
+  const [chatPanelOpen, _setChatPanelOpen] = useState(false);
   const sidebarWidthRef = useRef(sidebarWidthPx);
   const chatWidthRef = useRef(chatWidthPx);
   sidebarWidthRef.current = sidebarWidthPx;
@@ -311,8 +312,53 @@ function SidebarProvider({
 
   useShellWidthObserver(shellEl, handleShellResize);
 
+  const closeOppositeSidebarIfNoSpace = useCallback(
+    (openingMain: boolean, openingChat: boolean) => {
+      if (isSidebarSheetLayout) return;
+      const shellW = getShellWidth();
+      const layoutAfterOpen = {
+        mainSidebarOpen: openingMain || isOpen,
+        chatPanelOpen: openingChat || chatPanelOpen,
+        sidebarWidthPx,
+        chatWidthPx,
+      };
+      if (shellFitsSidebarsLayout(shellW, layoutAfterOpen)) return;
+      if (openingMain && chatPanelOpen) {
+        _setChatPanelOpen(false);
+      } else if (openingChat && isOpen) {
+        setIsOpen(false);
+        if (getCookiePreferences(userId)?.functional) {
+          setCookie('isSidebarOpen', 'false', 60 * 60 * 24 * 7);
+        }
+      }
+    },
+    [
+      isSidebarSheetLayout,
+      getShellWidth,
+      isOpen,
+      chatPanelOpen,
+      sidebarWidthPx,
+      chatWidthPx,
+      userId,
+    ],
+  );
+
+  const setChatPanelOpen = useCallback(
+    (open: boolean) => {
+      if (open) {
+        closeOppositeSidebarIfNoSpace(false, true);
+      }
+      _setChatPanelOpen(open);
+    },
+    [closeOppositeSidebarIfNoSpace],
+  );
+
   const setOpen = useCallback(
     (value: boolean, options?: SetSidebarOpenOptions) => {
+      if (value) {
+        closeOppositeSidebarIfNoSpace(true, false);
+      }
+
       const useViewTransition =
         options?.viewTransition !== false &&
         !isSidebarSheetLayout &&
@@ -331,7 +377,7 @@ function SidebarProvider({
         setCookie('isSidebarOpen', value.toString(), 60 * 60 * 24 * 7);
       }
     },
-    [isSidebarSheetLayout, userId],
+    [isSidebarSheetLayout, userId, closeOppositeSidebarIfNoSpace],
   );
 
   const toggleSidebar = useCallback(() => setOpen(!isOpen), [isOpen, setOpen]);

package/src/hooks/panelWidth.test.ts

@@ -0,0 +1,108 @@
+import {
+  CENTRAL_AREA_MIN_PX,
+  CHAT_WIDTH_MIN_PX,
+  SIDEBAR_WIDTH_MIN_PX,
+  requiredShellWidthForSidebars,
+  shellFitsSidebarsLayout,
+} from './panelWidth';
+
+describe('requiredShellWidthForSidebars', () => {
+  it('sums only open panels plus central min', () => {
+    expect(
+      requiredShellWidthForSidebars({
+        mainSidebarOpen: true,
+        chatPanelOpen: true,
+        sidebarWidthPx: 320,
+        chatWidthPx: 600,
+      }),
+    ).toBe(320 + CENTRAL_AREA_MIN_PX + 600);
+
+    expect(
+      requiredShellWidthForSidebars({
+        mainSidebarOpen: false,
+        chatPanelOpen: true,
+        sidebarWidthPx: 320,
+        chatWidthPx: 600,
+      }),
+    ).toBe(CENTRAL_AREA_MIN_PX + 600);
+  });
+
+  it('falls back to panel mins when width is zero', () => {
+    expect(
+      requiredShellWidthForSidebars({
+        mainSidebarOpen: true,
+        chatPanelOpen: true,
+        sidebarWidthPx: 0,
+        chatWidthPx: 0,
+      }),
+    ).toBe(SIDEBAR_WIDTH_MIN_PX + CENTRAL_AREA_MIN_PX + CHAT_WIDTH_MIN_PX);
+  });
+
+  it('uses panel mins for sub-min stored widths when both panels are open', () => {
+    expect(
+      requiredShellWidthForSidebars({
+        mainSidebarOpen: true,
+        chatPanelOpen: true,
+        sidebarWidthPx: 300,
+        chatWidthPx: 37,
+      }),
+    ).toBe(300 + CENTRAL_AREA_MIN_PX + CHAT_WIDTH_MIN_PX);
+  });
+
+  it('keeps actual chat width when only chat is open', () => {
+    expect(
+      requiredShellWidthForSidebars({
+        mainSidebarOpen: false,
+        chatPanelOpen: true,
+        sidebarWidthPx: 300,
+        chatWidthPx: 337,
+      }),
+    ).toBe(CENTRAL_AREA_MIN_PX + 337);
+  });
+});
+
+describe('shellFitsSidebarsLayout', () => {
+  it('returns true when shell meets required width', () => {
+    expect(
+      shellFitsSidebarsLayout(1600, {
+        mainSidebarOpen: true,
+        chatPanelOpen: true,
+        sidebarWidthPx: 300,
+        chatWidthPx: 500,
+      }),
+    ).toBe(true);
+  });
+
+  it('returns false when shell is too narrow for both panels', () => {
+    expect(
+      shellFitsSidebarsLayout(1500, {
+        mainSidebarOpen: true,
+        chatPanelOpen: true,
+        sidebarWidthPx: 300,
+        chatWidthPx: 500,
+      }),
+    ).toBe(false);
+  });
+
+  it('returns false when sub-min chat width would falsely fit at shell edge', () => {
+    expect(
+      shellFitsSidebarsLayout(1137, {
+        mainSidebarOpen: true,
+        chatPanelOpen: true,
+        sidebarWidthPx: 300,
+        chatWidthPx: 37,
+      }),
+    ).toBe(false);
+  });
+
+  it('returns true for unknown shell width', () => {
+    expect(
+      shellFitsSidebarsLayout(0, {
+        mainSidebarOpen: true,
+        chatPanelOpen: true,
+        sidebarWidthPx: 300,
+        chatWidthPx: 500,
+      }),
+    ).toBe(true);
+  });
+});

package/src/hooks/panelWidth.ts

@@ -78,3 +78,56 @@ export function defaultChatWidthPx(shellWidth: number): number {
     SIDEBAR_WIDTH_DEFAULT_PX,
   );
 }
+
+export type SidebarsLayoutWidths = {
+  mainSidebarOpen: boolean;
+  chatPanelOpen: boolean;
+  sidebarWidthPx: number;
+  chatWidthPx: number;
+};
+
+/**
+ * Stored width can fall below panel min when the shell was narrow (clamp cap < min).
+ * For dual-panel fit checks, treat open panels as at least their min width.
+ */
+function effectiveOpenPanelWidthPx(
+  px: number,
+  minPx: number,
+  bothPanelsOpen: boolean,
+): number {
+  if (bothPanelsOpen) {
+    return Math.max(px, minPx);
+  }
+  return px > 0 ? px : minPx;
+}
+
+/** Minimum shell width when nav and/or chat panels are open (main column at least `CENTRAL_AREA_MIN_PX`). */
+export function requiredShellWidthForSidebars(
+  widths: SidebarsLayoutWidths,
+): number {
+  const bothPanelsOpen =
+    widths.mainSidebarOpen && widths.chatPanelOpen;
+  const sidebarW = widths.mainSidebarOpen
+    ? effectiveOpenPanelWidthPx(
+        widths.sidebarWidthPx,
+        SIDEBAR_WIDTH_MIN_PX,
+        bothPanelsOpen,
+      )
+    : 0;
+  const chatW = widths.chatPanelOpen
+    ? effectiveOpenPanelWidthPx(
+        widths.chatWidthPx,
+        CHAT_WIDTH_MIN_PX,
+        bothPanelsOpen,
+      )
+    : 0;
+  return sidebarW + CENTRAL_AREA_MIN_PX + chatW;
+}
+
+export function shellFitsSidebarsLayout(
+  shellWidth: number,
+  widths: SidebarsLayoutWidths,
+): boolean {
+  if (shellWidth <= 0) return true;
+  return shellWidth >= requiredShellWidthForSidebars(widths);
+}