@sybilion/uilib 1.3.60 → 1.3.62

package/dist/esm/components/ui/Chat/ChatPresets/ChatPresets.js

@@ -13,7 +13,7 @@ function ChatPresets({ chatId, items, usedItemIds = [], layout = 'fixed', onSele
     const availableItems = items.filter(item => !usedItems.includes(item.id));
     if (availableItems.length === 0)
         return null;
-    return (jsx("div", { className: layout === 'inline' ? S.inlineRoot : S.root, children: jsx("div", { className: cn(S.inner, layout === 'inline' && S.innerInline), children: availableItems.map(preset => (jsx(Button, { type: "button", className: cn(S.item), onClick: () => {
+    return (jsx("div", { className: layout === 'inline' ? S.inlineRoot : S.root, children: jsx("div", { className: cn(S.inner, layout === 'inline' && S.innerInline), children: availableItems.map(preset => (jsx(Button, { type: "button", variant: "outline", size: "sm", className: cn(S.item), onClick: () => {
                     onSelect?.(preset);
                     onItemUsed?.(preset.id);
                     setLocalUsedItems(prev => [...prev, preset.id]);

package/dist/esm/components/ui/Chat/ChatPresets/ChatPresets.styl.js

@@ -1,6 +1,6 @@
 import styleInject from 'style-inject';
 
-var css_248z = ".ChatPresets_root__Cj42o{bottom:160px;width:100%}.ChatPresets_inlineRoot__WXVnu{margin-top:var(--p-6);position:relative;width:100%}.ChatPresets_inner__h14-q{background-color:var(--background);display:flex;flex-wrap:wrap;gap:8px;padding:var(--p-2) var(--p-6) var(--p-3)}.ChatPresets_innerInline__iPM2b{background-color:transparent}.ChatPresets_item__LfX5b{background:none;border:1px solid var(--border);border-radius:var(--p-4);color:var(--foreground);cursor:pointer;flex-shrink:0;font-size:var(--text-xs);line-height:1.4;max-width:300px;padding:var(--p-3);text-align:left;transition:all .2s ease;white-space:break-spaces}.ChatPresets_item__LfX5b:hover{background:var(--border)!important}.dark .ChatPresets_item__LfX5b{background-color:var(--muted)}";
+var css_248z = ".ChatPresets_root__Cj42o{bottom:160px;width:100%}.ChatPresets_inlineRoot__WXVnu{margin-top:var(--p-6);position:relative;width:100%}.ChatPresets_inner__h14-q{background-color:var(--background);display:flex;flex-wrap:wrap;gap:8px;padding:var(--p-2) var(--p-6) var(--p-3)}.ChatPresets_innerInline__iPM2b{background-color:transparent}.ChatPresets_item__LfX5b{flex-shrink:0;font-size:var(--text-xs);height:auto;line-height:1.4;max-width:300px;min-height:auto;min-width:0;overflow-wrap:anywhere;padding:var(--p-3);text-align:left;white-space:break-spaces!important}";
 var S = {"root":"ChatPresets_root__Cj42o","inlineRoot":"ChatPresets_inlineRoot__WXVnu","inner":"ChatPresets_inner__h14-q","innerInline":"ChatPresets_innerInline__iPM2b","item":"ChatPresets_item__LfX5b"};
 styleInject(css_248z);
 

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

@@ -0,0 +1,28 @@
+/** Pure guards for chat panel URL ↔ shell sync (unit-tested). */
+function shouldOpenChatFromUrl(chatOpen, layoutDismissed) {
+    return chatOpen && !layoutDismissed;
+}
+function shouldHealChatShellDesync(chatOpen, shellChatPanelOpen, layoutDismissed, isOpen) {
+    if (!chatOpen || shellChatPanelOpen) {
+        return false;
+    }
+    if (layoutDismissed && !isOpen) {
+        return false;
+    }
+    return true;
+}
+function shouldCloseStaleLocalChatOpen(shellChatPanelOpen, chatOpen, isOpen) {
+    return !shellChatPanelOpen && !chatOpen && isOpen;
+}
+function shouldDismissChatAfterShellClosed(params) {
+    const { shellChatPanelOpen, wasShellChatPanelOpen, chatOpen, isOpen, openedShellChat, } = params;
+    if (shellChatPanelOpen || !wasShellChatPanelOpen || !chatOpen) {
+        return false;
+    }
+    return isOpen || openedShellChat;
+}
+function isChatPanelVisible(isOpen, shellChatPanelOpen) {
+    return isOpen && shellChatPanelOpen;
+}
+
+export { isChatPanelVisible, shouldCloseStaleLocalChatOpen, shouldDismissChatAfterShellClosed, shouldHealChatShellDesync, shouldOpenChatFromUrl };

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

@@ -11,8 +11,9 @@ import { useIsMobile } from '../../../../hooks/useIsMobile.js';
 import { useQueryParams } from '../../../../hooks/useQueryParams.js';
 import logger from '../../../../lib/logger.js';
 import { mergePresetFreeformDefaults } from '../../../../utils/chatPresetMerge.js';
-import { useSidebar } from '../../Sidebar/Sidebar.js';
+import { useSidebar, DISMISS_CHAT_FOR_LAYOUT_EVENT } from '../../Sidebar/Sidebar.js';
 import { Chat } from '../Chat.js';
+import { shouldOpenChatFromUrl, shouldHealChatShellDesync, shouldCloseStaleLocalChatOpen, shouldDismissChatAfterShellClosed, isChatPanelVisible } from './chatPanelOpenSync.js';
 
 /** Fallback when `scopeId` prop omitted; apps should pass an explicit composite scope (e.g. `${userId}-dashboard`). */
 const NO_SCOPE_FALLBACK = '__uilib_chat_scope_unset__';
@@ -33,11 +34,16 @@ function useChatPanelChromeModel({ embedAsPage, presets, scopeId, onMessage, onS
     useSyncChatPanelBusy(isLoading);
     const { searchParams, addSearchParams, removeSearchParams, mutateSearchParams, } = useQueryParams();
     const chatOpen = searchParams.has(CHAT_QUERY_PARAM);
-    const [isOpen, setIsOpen] = useState(false);
+    const [isOpen, setIsOpen] = useState(() => !embedAsPage && chatOpen);
     /** `?prompt=` deep link text for one-shot composer pre-fill (see ChatPrompt). */
     const [promptLinkPrefill, setPromptLinkPrefill] = useState(null);
     /** Deduplicate Strict Mode double `useEffect` on the same mount. */
     const promptParamHandledInEffectRef = useRef(false);
+    const prevShellChatPanelOpenRef = useRef(shellChatPanelOpen);
+    /** This instance requested shell chat width (ignore other ChatSheet instances on the page). */
+    const openedShellChatRef = useRef(false);
+    /** Nav-forced chat close; blocks URL sync from reopening chat in the same tick. */
+    const layoutDismissedRef = useRef(false);
     const panelActive = embedAsPage || isOpen;
     // Ensure valid currentChatId when chat opens
     useEffect(() => {
@@ -124,13 +130,17 @@ function useChatPanelChromeModel({ embedAsPage, presets, scopeId, onMessage, onS
             return;
         }
         if (open) {
-            setIsOpen(true);
+            layoutDismissedRef.current = false;
+            openedShellChatRef.current = true;
             setChatPanelOpen(true);
+            setIsOpen(true);
             if (!searchParams.has(CHAT_QUERY_PARAM)) {
                 addSearchParams({ [CHAT_QUERY_PARAM]: CHAT_OPEN_VALUE });
             }
             return;
         }
+        openedShellChatRef.current = false;
+        removeSearchParams(CHAT_QUERY_PARAM);
         const applyClose = () => {
             setIsOpen(false);
             setChatPanelOpen(false);
@@ -143,7 +153,6 @@ function useChatPanelChromeModel({ embedAsPage, presets, scopeId, onMessage, onS
         else {
             applyClose();
         }
-        removeSearchParams(CHAT_QUERY_PARAM);
     };
     const isEmpty = isChatEmpty(chat) && !isLoading;
     const openNewChatWithPrefill = useCallback((prompt) => {
@@ -624,50 +633,93 @@ function useChatPanelChromeModel({ embedAsPage, presets, scopeId, onMessage, onS
             }
         })();
     }, [currentChatId, scriptByChatId, addMessage, onScriptComplete]);
+    const dismissChatForLayout = useCallback(() => {
+        if (embedAsPage) {
+            return;
+        }
+        layoutDismissedRef.current = true;
+        openedShellChatRef.current = false;
+        setIsOpen(false);
+        setChatPanelOpen(false);
+        removeSearchParams(CHAT_QUERY_PARAM);
+    }, [embedAsPage, removeSearchParams, setChatPanelOpen]);
+    useEvent({
+        event: DISMISS_CHAT_FOR_LAYOUT_EVENT,
+        callback: dismissChatForLayout,
+    });
+    /** `?chat=open` in URL — open local UI + shell (skip right after nav evicted chat). */
     useEffect(() => {
         if (embedAsPage) {
             return;
         }
         if (!chatOpen) {
-            setIsOpen(false);
-            setChatPanelOpen(false);
+            layoutDismissedRef.current = false;
             return;
         }
-        if (!shellChatPanelOpen && sidebarNavOpen) {
-            removeSearchParams(CHAT_QUERY_PARAM);
+        if (!shouldOpenChatFromUrl(chatOpen, layoutDismissedRef.current)) {
             return;
         }
         setIsOpen(true);
+        openedShellChatRef.current = true;
         setChatPanelOpen(true);
-    }, [
-        embedAsPage,
-        chatOpen,
-        setChatPanelOpen,
-        sidebarNavOpen,
-        shellChatPanelOpen,
-        removeSearchParams,
-    ]);
-    /** Shell closed chat for space (e.g. nav opened); keep UI and URL in sync. */
+    }, [embedAsPage, chatOpen, setChatPanelOpen]);
+    /** Heal desync: `?chat=open` but shell collapsed while this instance still wants panel open. */
     useEffect(() => {
-        if (embedAsPage || shellChatPanelOpen || !isOpen) {
+        if (embedAsPage) {
+            return;
+        }
+        if (!shouldHealChatShellDesync(chatOpen, shellChatPanelOpen, layoutDismissedRef.current, isOpen)) {
+            return;
+        }
+        layoutDismissedRef.current = false;
+        if (!isOpen) {
+            setIsOpen(true);
+        }
+        openedShellChatRef.current = true;
+        setChatPanelOpen(true);
+    }, [embedAsPage, chatOpen, isOpen, shellChatPanelOpen, setChatPanelOpen]);
+    /** Stale local open after shell closed without `?chat=` (e.g. another instance or aborted open). */
+    useEffect(() => {
+        if (embedAsPage) {
+            return;
+        }
+        if (!shouldCloseStaleLocalChatOpen(shellChatPanelOpen, chatOpen, 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. */
+    }, [embedAsPage, shellChatPanelOpen, chatOpen, isOpen]);
+    /** Shell chat closed while `?chat=` still set (fallback if layout event was missed). */
+    useEffect(() => {
+        if (embedAsPage) {
+            return;
+        }
+        const wasShellChatOpen = prevShellChatPanelOpenRef.current;
+        prevShellChatPanelOpenRef.current = shellChatPanelOpen;
+        if (!shouldDismissChatAfterShellClosed({
+            shellChatPanelOpen,
+            wasShellChatPanelOpen: wasShellChatOpen,
+            chatOpen,
+            isOpen,
+            openedShellChat: openedShellChatRef.current,
+        })) {
+            return;
+        }
+        dismissChatForLayout();
+    }, [embedAsPage, shellChatPanelOpen, chatOpen, dismissChatForLayout, isOpen]);
+    /** Route change: release shell slot only if this instance opened it (not Strict Mode remount). */
     useEffect(() => {
         return () => {
-            if (!embedAsPage) {
+            if (!embedAsPage && openedShellChatRef.current && !chatOpen) {
+                openedShellChatRef.current = false;
                 setChatPanelOpen(false);
             }
         };
-    }, [embedAsPage, setChatPanelOpen]);
+    }, [embedAsPage, chatOpen, setChatPanelOpen]);
     useEffect(() => {
         if (embedAsPage) {
             return;
         }
-        if (!isOpen || !sidebarNavOpen)
+        if (!shellChatPanelOpen || !sidebarNavOpen)
             return;
         const collapseNavIfNoSpace = () => {
             const shellW = getShellWidth();
@@ -686,7 +738,7 @@ function useChatPanelChromeModel({ embedAsPage, presets, scopeId, onMessage, onS
         return () => window.removeEventListener('resize', collapseNavIfNoSpace);
     }, [
         embedAsPage,
-        isOpen,
+        shellChatPanelOpen,
         sidebarNavOpen,
         setSidebarNavOpen,
         getShellWidth,
@@ -808,7 +860,13 @@ function useChatPanelChromeModel({ embedAsPage, presets, scopeId, onMessage, onS
         slashCommandItems,
         onSlashItemCommand,
     };
-    const toggleOpen = () => onOpenChange(!isOpen);
+    const toggleOpen = () => {
+        if (!isChatPanelVisible(isOpen, shellChatPanelOpen)) {
+            onOpenChange(true);
+            return;
+        }
+        onOpenChange(false);
+    };
     return {
         chromeProps,
         isOpen,

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

@@ -20,6 +20,8 @@ import SidebarStem from './Sidebar.styl.js';
 const SIDEBAR_WIDTH_MOBILE = '18rem';
 const SIDEBAR_WIDTH_ICON = '3rem';
 const SIDEBAR_KEYBOARD_SHORTCUT = 'b';
+/** Fired when nav open closes chat for layout; ChatSheet clears `?chat=` so URL sync does not reopen chat. */
+const DISMISS_CHAT_FOR_LAYOUT_EVENT = 'sybilion:dismiss-chat-for-layout';
 function isEditableKeyboardTarget(el) {
     if (!el)
         return false;
@@ -219,6 +221,9 @@ function SidebarProvider({ defaultOpen = getCookie('isSidebarOpen') ?? true, cla
             return;
         if (openingMain && chatPanelOpen) {
             _setChatPanelOpen(false);
+            if (typeof window !== 'undefined') {
+                window.dispatchEvent(new CustomEvent(DISMISS_CHAT_FOR_LAYOUT_EVENT));
+            }
         }
         else if (openingChat && isOpen) {
             setIsOpen(false);
@@ -482,4 +487,4 @@ function SidebarMenuSubButton({ asChild = false, size = 'md', isActive = false,
     return (jsxs(Tooltip, { children: [jsx(TooltipTrigger, { asChild: true, children: button }), jsx(TooltipContent, { side: "right", align: "center", hidden: !isOpen || isSidebarSheetLayout, ...tooltip })] }));
 }
 
-export { PanelResizeHandle, Sidebar, SidebarContent, SidebarFooter, SidebarGroup, SidebarGroupAction, SidebarMenu, SidebarMenuAction, SidebarMenuBadge, SidebarMenuButton, SidebarMenuItem, SidebarMenuSub, SidebarMenuSubButton, SidebarMenuSubItem, SidebarProvider, SidebarRail, SidebarResizeHandle, SidebarSeparator, SidebarTrigger, useSidebar };
+export { DISMISS_CHAT_FOR_LAYOUT_EVENT, PanelResizeHandle, Sidebar, SidebarContent, SidebarFooter, SidebarGroup, SidebarGroupAction, SidebarMenu, SidebarMenuAction, SidebarMenuBadge, SidebarMenuButton, SidebarMenuItem, SidebarMenuSub, SidebarMenuSubButton, SidebarMenuSubItem, SidebarProvider, SidebarRail, SidebarResizeHandle, SidebarSeparator, SidebarTrigger, useSidebar };

package/dist/esm/index.js

@@ -77,7 +77,7 @@ export { Renamer } from './components/ui/Renamer/Renamer.js';
 export { Select, SelectContent, SelectGroup, SelectItem, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, SelectTrigger, SelectValue } from './components/ui/Select/Select.js';
 export { Separator } from './components/ui/Separator/Separator.js';
 export { Sheet, SheetClose, SheetContent, SheetDescription, SheetFooter, SheetHeader, SheetTitle, SheetTrigger } from './components/ui/Sheet/Sheet.js';
-export { PanelResizeHandle, Sidebar, SidebarContent, SidebarFooter, SidebarGroup, SidebarGroupAction, SidebarMenu, SidebarMenuAction, SidebarMenuBadge, SidebarMenuButton, SidebarMenuItem, SidebarMenuSub, SidebarMenuSubButton, SidebarMenuSubItem, SidebarProvider, SidebarRail, SidebarResizeHandle, SidebarSeparator, SidebarTrigger, useSidebar } from './components/ui/Sidebar/Sidebar.js';
+export { DISMISS_CHAT_FOR_LAYOUT_EVENT, PanelResizeHandle, Sidebar, SidebarContent, SidebarFooter, SidebarGroup, SidebarGroupAction, SidebarMenu, SidebarMenuAction, SidebarMenuBadge, SidebarMenuButton, SidebarMenuItem, SidebarMenuSub, SidebarMenuSubButton, SidebarMenuSubItem, SidebarProvider, SidebarRail, SidebarResizeHandle, SidebarSeparator, SidebarTrigger, useSidebar } from './components/ui/Sidebar/Sidebar.js';
 export { Skeleton } from './components/ui/Skeleton/Skeleton.js';
 export { Slider } from './components/ui/Slider/Slider.js';
 export { SmartTextTruncate } from './components/ui/SmartTextTruncate/SmartTextTruncate.js';

package/dist/esm/types/src/components/ui/Chat/ChatSheet/chatPanelOpenSync.d.ts

@@ -0,0 +1,12 @@
+/** Pure guards for chat panel URL ↔ shell sync (unit-tested). */
+export declare function shouldOpenChatFromUrl(chatOpen: boolean, layoutDismissed: boolean): boolean;
+export declare function shouldHealChatShellDesync(chatOpen: boolean, shellChatPanelOpen: boolean, layoutDismissed: boolean, isOpen: boolean): boolean;
+export declare function shouldCloseStaleLocalChatOpen(shellChatPanelOpen: boolean, chatOpen: boolean, isOpen: boolean): boolean;
+export declare function shouldDismissChatAfterShellClosed(params: {
+    shellChatPanelOpen: boolean;
+    wasShellChatPanelOpen: boolean;
+    chatOpen: boolean;
+    isOpen: boolean;
+    openedShellChat: boolean;
+}): boolean;
+export declare function isChatPanelVisible(isOpen: boolean, shellChatPanelOpen: boolean): boolean;

package/dist/esm/types/src/components/ui/Chat/ChatSheet/chatPanelOpenSync.test.d.ts

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

package/dist/esm/types/src/components/ui/Sidebar/Sidebar.d.ts

@@ -4,6 +4,8 @@ import type { ButtonProps } from '#uilib/components/ui/Button/Button.types';
 import { Separator } from '#uilib/components/ui/Separator';
 import { TooltipContent } from '#uilib/components/ui/Tooltip';
 import { Scroll } from '@homecode/ui';
+/** Fired when nav open closes chat for layout; ChatSheet clears `?chat=` so URL sync does not reopen chat. */
+export declare const DISMISS_CHAT_FOR_LAYOUT_EVENT = "sybilion:dismiss-chat-for-layout";
 type SetPanelWidthOptions = {
     persist?: boolean;
 };

package/dist/esm/types/src/docs/chatPresets.sample.d.ts

@@ -0,0 +1,5 @@
+import type { ChatPreset } from '#uilib/components/ui/Chat/Chat.types';
+/** Sample dataset name — mirrors app dataset page chat presets. */
+export declare const DOCS_SAMPLE_DATASET_NAME = "HDPE Spot Price";
+export declare function getDocsDatasetPresets(datasetName?: string): ChatPreset[];
+export declare const DOCS_DATASET_PRESETS: ChatPreset[];

package/package.json

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

package/src/components/ui/Chat/ChatPresets/ChatPresets.styl

@@ -20,22 +20,13 @@
 
 .item
   flex-shrink 0
+  min-width 0
   max-width 300px
+  height auto
+  min-height auto
   padding var(--p-3)
-
-  background none
-  border 1px solid var(--border)
-  border-radius var(--p-4)
-  cursor pointer
-  transition all 0.2s ease
   text-align left
   font-size var(--text-xs)
   line-height 1.4
-  white-space break-spaces
-  color var(--foreground)
-
-  &:hover
-    background var(--border) !important
-
-  :global(.dark) &
-    background-color var(--muted)
+  white-space break-spaces !important
+  overflow-wrap anywhere

package/src/components/ui/Chat/ChatPresets/ChatPresets.tsx

@@ -43,6 +43,8 @@ export function ChatPresets({
           <Button
             key={preset.id}
             type="button"
+            variant="outline"
+            size="sm"
             className={cn(S.item)}
             onClick={() => {
               onSelect?.(preset);

package/src/components/ui/Chat/ChatSheet/chatPanelOpenSync.test.ts

@@ -0,0 +1,83 @@
+import {
+  isChatPanelVisible,
+  shouldCloseStaleLocalChatOpen,
+  shouldDismissChatAfterShellClosed,
+  shouldHealChatShellDesync,
+  shouldOpenChatFromUrl,
+} from './chatPanelOpenSync';
+
+describe('shouldOpenChatFromUrl', () => {
+  it('opens when ?chat= is set and layout has not dismissed chat', () => {
+    expect(shouldOpenChatFromUrl(true, false)).toBe(true);
+  });
+
+  it('blocks reopen in the same tick after nav layout dismiss', () => {
+    expect(shouldOpenChatFromUrl(true, true)).toBe(false);
+  });
+});
+
+describe('shouldHealChatShellDesync', () => {
+  it('heals when URL requests chat but shell slot is closed', () => {
+    expect(shouldHealChatShellDesync(true, false, false, false)).toBe(true);
+  });
+
+  it('skips heal after layout dismiss cleared local open', () => {
+    expect(shouldHealChatShellDesync(true, false, true, false)).toBe(false);
+  });
+});
+
+describe('shouldCloseStaleLocalChatOpen', () => {
+  it('closes local open when shell and URL are both closed', () => {
+    expect(shouldCloseStaleLocalChatOpen(false, false, true)).toBe(true);
+  });
+
+  it('keeps local open while ?chat= remains', () => {
+    expect(shouldCloseStaleLocalChatOpen(false, true, true)).toBe(false);
+  });
+});
+
+describe('shouldDismissChatAfterShellClosed', () => {
+  it('dismisses when shell closes with ?chat= and this instance opened chat', () => {
+    expect(
+      shouldDismissChatAfterShellClosed({
+        shellChatPanelOpen: false,
+        wasShellChatPanelOpen: true,
+        chatOpen: true,
+        isOpen: true,
+        openedShellChat: true,
+      }),
+    ).toBe(true);
+  });
+
+  it('ignores shell close when URL has no chat param', () => {
+    expect(
+      shouldDismissChatAfterShellClosed({
+        shellChatPanelOpen: false,
+        wasShellChatPanelOpen: true,
+        chatOpen: false,
+        isOpen: true,
+        openedShellChat: true,
+      }),
+    ).toBe(false);
+  });
+
+  it('ignores unrelated shell close without local or instance ownership', () => {
+    expect(
+      shouldDismissChatAfterShellClosed({
+        shellChatPanelOpen: false,
+        wasShellChatPanelOpen: true,
+        chatOpen: true,
+        isOpen: false,
+        openedShellChat: false,
+      }),
+    ).toBe(false);
+  });
+});
+
+describe('isChatPanelVisible', () => {
+  it('is visible only when local and shell are both open', () => {
+    expect(isChatPanelVisible(true, true)).toBe(true);
+    expect(isChatPanelVisible(true, false)).toBe(false);
+    expect(isChatPanelVisible(false, true)).toBe(false);
+  });
+});

package/src/components/ui/Chat/ChatSheet/chatPanelOpenSync.ts

@@ -0,0 +1,58 @@
+/** Pure guards for chat panel URL ↔ shell sync (unit-tested). */
+
+export function shouldOpenChatFromUrl(
+  chatOpen: boolean,
+  layoutDismissed: boolean,
+): boolean {
+  return chatOpen && !layoutDismissed;
+}
+
+export function shouldHealChatShellDesync(
+  chatOpen: boolean,
+  shellChatPanelOpen: boolean,
+  layoutDismissed: boolean,
+  isOpen: boolean,
+): boolean {
+  if (!chatOpen || shellChatPanelOpen) {
+    return false;
+  }
+  if (layoutDismissed && !isOpen) {
+    return false;
+  }
+  return true;
+}
+
+export function shouldCloseStaleLocalChatOpen(
+  shellChatPanelOpen: boolean,
+  chatOpen: boolean,
+  isOpen: boolean,
+): boolean {
+  return !shellChatPanelOpen && !chatOpen && isOpen;
+}
+
+export function shouldDismissChatAfterShellClosed(params: {
+  shellChatPanelOpen: boolean;
+  wasShellChatPanelOpen: boolean;
+  chatOpen: boolean;
+  isOpen: boolean;
+  openedShellChat: boolean;
+}): boolean {
+  const {
+    shellChatPanelOpen,
+    wasShellChatPanelOpen,
+    chatOpen,
+    isOpen,
+    openedShellChat,
+  } = params;
+  if (shellChatPanelOpen || !wasShellChatPanelOpen || !chatOpen) {
+    return false;
+  }
+  return isOpen || openedShellChat;
+}
+
+export function isChatPanelVisible(
+  isOpen: boolean,
+  shellChatPanelOpen: boolean,
+): boolean {
+  return isOpen && shellChatPanelOpen;
+}

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

@@ -43,12 +43,22 @@ import type {
 import { mergePresetFreeformDefaults } from '#uilib/utils/chatPresetMerge';
 import { ScrollRef } from '@homecode/ui';
 
-import { useSidebar } from '../../Sidebar/Sidebar';
+import {
+  DISMISS_CHAT_FOR_LAYOUT_EVENT,
+  useSidebar,
+} from '../../Sidebar/Sidebar';
 import { Chat } from '../Chat';
 import type { ChatChromeProps } from '../ChatChrome';
 import type { ChatAttachmentDropItem } from '../ChatChrome/ChatChrome.types';
 import type { ChatEmptyStateConfig } from '../ChatEmptyState/ChatEmptyState.types';
 import type { ChatEmptyStateProps } from '../ChatEmptyState/ChatEmptyState.types';
+import {
+  isChatPanelVisible,
+  shouldCloseStaleLocalChatOpen,
+  shouldDismissChatAfterShellClosed,
+  shouldHealChatShellDesync,
+  shouldOpenChatFromUrl,
+} from './chatPanelOpenSync';
 
 export type UseChatPanelChromeModelInput = {
   /** When true, skip sidebar chat slot, URL `?chat=`, and portal behavior (e.g. page main content). */
@@ -173,13 +183,18 @@ export function useChatPanelChromeModel({
     mutateSearchParams,
   } = useQueryParams();
   const chatOpen = searchParams.has(CHAT_QUERY_PARAM);
-  const [isOpen, setIsOpen] = useState(false);
+  const [isOpen, setIsOpen] = useState(() => !embedAsPage && chatOpen);
   /** `?prompt=` deep link text for one-shot composer pre-fill (see ChatPrompt). */
   const [promptLinkPrefill, setPromptLinkPrefill] = useState<string | null>(
     null,
   );
   /** Deduplicate Strict Mode double `useEffect` on the same mount. */
   const promptParamHandledInEffectRef = useRef(false);
+  const prevShellChatPanelOpenRef = useRef(shellChatPanelOpen);
+  /** This instance requested shell chat width (ignore other ChatSheet instances on the page). */
+  const openedShellChatRef = useRef(false);
+  /** Nav-forced chat close; blocks URL sync from reopening chat in the same tick. */
+  const layoutDismissedRef = useRef(false);
   const panelActive = embedAsPage || isOpen;
 
   // Ensure valid currentChatId when chat opens
@@ -288,14 +303,18 @@ export function useChatPanelChromeModel({
       return;
     }
     if (open) {
-      setIsOpen(true);
+      layoutDismissedRef.current = false;
+      openedShellChatRef.current = true;
       setChatPanelOpen(true);
+      setIsOpen(true);
       if (!searchParams.has(CHAT_QUERY_PARAM)) {
         addSearchParams({ [CHAT_QUERY_PARAM]: CHAT_OPEN_VALUE });
       }
       return;
     }
 
+    openedShellChatRef.current = false;
+    removeSearchParams(CHAT_QUERY_PARAM);
     const applyClose = () => {
       setIsOpen(false);
       setChatPanelOpen(false);
@@ -309,7 +328,6 @@ export function useChatPanelChromeModel({
     } else {
       applyClose();
     }
-    removeSearchParams(CHAT_QUERY_PARAM);
   };
 
   const isEmpty = isChatEmpty(chat) && !isLoading;
@@ -851,53 +869,109 @@ export function useChatPanelChromeModel({
     })();
   }, [currentChatId, scriptByChatId, addMessage, onScriptComplete]);
 
+  const dismissChatForLayout = useCallback(() => {
+    if (embedAsPage) {
+      return;
+    }
+    layoutDismissedRef.current = true;
+    openedShellChatRef.current = false;
+    setIsOpen(false);
+    setChatPanelOpen(false);
+    removeSearchParams(CHAT_QUERY_PARAM);
+  }, [embedAsPage, removeSearchParams, setChatPanelOpen]);
+
+  useEvent({
+    event: DISMISS_CHAT_FOR_LAYOUT_EVENT,
+    callback: dismissChatForLayout,
+  });
+
+  /** `?chat=open` in URL — open local UI + shell (skip right after nav evicted chat). */
   useEffect(() => {
     if (embedAsPage) {
       return;
     }
     if (!chatOpen) {
-      setIsOpen(false);
-      setChatPanelOpen(false);
+      layoutDismissedRef.current = false;
       return;
     }
-    if (!shellChatPanelOpen && sidebarNavOpen) {
-      removeSearchParams(CHAT_QUERY_PARAM);
+    if (!shouldOpenChatFromUrl(chatOpen, layoutDismissedRef.current)) {
       return;
     }
     setIsOpen(true);
+    openedShellChatRef.current = true;
     setChatPanelOpen(true);
-  }, [
-    embedAsPage,
-    chatOpen,
-    setChatPanelOpen,
-    sidebarNavOpen,
-    shellChatPanelOpen,
-    removeSearchParams,
-  ]);
+  }, [embedAsPage, chatOpen, setChatPanelOpen]);
 
-  /** Shell closed chat for space (e.g. nav opened); keep UI and URL in sync. */
+  /** Heal desync: `?chat=open` but shell collapsed while this instance still wants panel open. */
   useEffect(() => {
-    if (embedAsPage || shellChatPanelOpen || !isOpen) {
+    if (embedAsPage) {
+      return;
+    }
+    if (
+      !shouldHealChatShellDesync(
+        chatOpen,
+        shellChatPanelOpen,
+        layoutDismissedRef.current,
+        isOpen,
+      )
+    ) {
+      return;
+    }
+    layoutDismissedRef.current = false;
+    if (!isOpen) {
+      setIsOpen(true);
+    }
+    openedShellChatRef.current = true;
+    setChatPanelOpen(true);
+  }, [embedAsPage, chatOpen, isOpen, shellChatPanelOpen, setChatPanelOpen]);
+
+  /** Stale local open after shell closed without `?chat=` (e.g. another instance or aborted open). */
+  useEffect(() => {
+    if (embedAsPage) {
+      return;
+    }
+    if (!shouldCloseStaleLocalChatOpen(shellChatPanelOpen, chatOpen, isOpen)) {
       return;
     }
     setIsOpen(false);
-    removeSearchParams(CHAT_QUERY_PARAM);
-  }, [embedAsPage, shellChatPanelOpen, isOpen, removeSearchParams]);
+  }, [embedAsPage, shellChatPanelOpen, chatOpen, isOpen]);
 
-  /** When this instance unmounts (e.g. route hides ChatSheet), release shell layout — URL sync alone does not run. */
+  /** Shell chat closed while `?chat=` still set (fallback if layout event was missed). */
+  useEffect(() => {
+    if (embedAsPage) {
+      return;
+    }
+    const wasShellChatOpen = prevShellChatPanelOpenRef.current;
+    prevShellChatPanelOpenRef.current = shellChatPanelOpen;
+    if (
+      !shouldDismissChatAfterShellClosed({
+        shellChatPanelOpen,
+        wasShellChatPanelOpen: wasShellChatOpen,
+        chatOpen,
+        isOpen,
+        openedShellChat: openedShellChatRef.current,
+      })
+    ) {
+      return;
+    }
+    dismissChatForLayout();
+  }, [embedAsPage, shellChatPanelOpen, chatOpen, dismissChatForLayout, isOpen]);
+
+  /** Route change: release shell slot only if this instance opened it (not Strict Mode remount). */
   useEffect(() => {
     return () => {
-      if (!embedAsPage) {
+      if (!embedAsPage && openedShellChatRef.current && !chatOpen) {
+        openedShellChatRef.current = false;
         setChatPanelOpen(false);
       }
     };
-  }, [embedAsPage, setChatPanelOpen]);
+  }, [embedAsPage, chatOpen, setChatPanelOpen]);
 
   useEffect(() => {
     if (embedAsPage) {
       return;
     }
-    if (!isOpen || !sidebarNavOpen) return;
+    if (!shellChatPanelOpen || !sidebarNavOpen) return;
 
     const collapseNavIfNoSpace = () => {
       const shellW = getShellWidth();
@@ -919,7 +993,7 @@ export function useChatPanelChromeModel({
     return () => window.removeEventListener('resize', collapseNavIfNoSpace);
   }, [
     embedAsPage,
-    isOpen,
+    shellChatPanelOpen,
     sidebarNavOpen,
     setSidebarNavOpen,
     getShellWidth,
@@ -1096,7 +1170,13 @@ export function useChatPanelChromeModel({
     onSlashItemCommand,
   };
 
-  const toggleOpen = () => onOpenChange(!isOpen);
+  const toggleOpen = () => {
+    if (!isChatPanelVisible(isOpen, shellChatPanelOpen)) {
+      onOpenChange(true);
+      return;
+    }
+    onOpenChange(false);
+  };
 
   return {
     chromeProps,

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

@@ -52,6 +52,9 @@ const SIDEBAR_WIDTH_MOBILE = '18rem';
 const SIDEBAR_WIDTH_ICON = '3rem';
 const SIDEBAR_KEYBOARD_SHORTCUT = 'b';
 
+/** Fired when nav open closes chat for layout; ChatSheet clears `?chat=` so URL sync does not reopen chat. */
+export const DISMISS_CHAT_FOR_LAYOUT_EVENT = 'sybilion:dismiss-chat-for-layout';
+
 function isEditableKeyboardTarget(el: Element | null): boolean {
   if (!el) return false;
   if (el instanceof HTMLElement && el.isContentEditable) return true;
@@ -325,6 +328,9 @@ function SidebarProvider({
       if (shellFitsSidebarsLayout(shellW, layoutAfterOpen)) return;
       if (openingMain && chatPanelOpen) {
         _setChatPanelOpen(false);
+        if (typeof window !== 'undefined') {
+          window.dispatchEvent(new CustomEvent(DISMISS_CHAT_FOR_LAYOUT_EVENT));
+        }
       } else if (openingChat && isOpen) {
         setIsOpen(false);
         if (getCookiePreferences(userId)?.functional) {

package/src/docs/chatPresets.sample.ts

@@ -0,0 +1,25 @@
+import type { ChatPreset } from '#uilib/components/ui/Chat/Chat.types';
+
+/** Sample dataset name — mirrors app dataset page chat presets. */
+export const DOCS_SAMPLE_DATASET_NAME = 'HDPE Spot Price';
+
+export function getDocsDatasetPresets(
+  datasetName: string = DOCS_SAMPLE_DATASET_NAME,
+): ChatPreset[] {
+  return [
+    {
+      id: '1',
+      text: `What should my planning decisions be based on the "${datasetName}" forecasts?`,
+    },
+    {
+      id: '2',
+      text: `Explain the "${datasetName}" forecast.`,
+    },
+    {
+      id: '3',
+      text: `What is the "${datasetName}" forecast performance?`,
+    },
+  ];
+}
+
+export const DOCS_DATASET_PRESETS = getDocsDatasetPresets();

package/src/docs/pages/ChatSheetPage.tsx

@@ -2,11 +2,15 @@ import type { SlashCommandItem } from '#uilib/components/ui/Chat';
 import { PageContentSection } from '#uilib/components/ui/Page';
 import { MessageSquare } from 'lucide-react';
 
+import {
+  DOCS_DATASET_PRESETS,
+  DOCS_SAMPLE_DATASET_NAME,
+} from '../chatPresets.sample';
 import { AppPageHeader } from '../components/AppPageHeader/AppPageHeader';
 import { DOCS_CHAT_USER_KEY } from '../docsConstants';
 import { DocsHeaderActions } from '../docsHeaderActions';
 
-const DOCS_CHAT_SHEET_SCOPE_ID = `${DOCS_CHAT_USER_KEY}-docs-chat-sheet-portal`;
+const DOCS_CHAT_SHEET_SCOPE_ID = `${DOCS_CHAT_USER_KEY}-docs-dataset-chat`;
 
 const DOCS_SAMPLE_SLASH_ITEMS: SlashCommandItem[] = [
   {
@@ -22,24 +26,29 @@ export default function ChatSheetPage() {
       <AppPageHeader
         breadcrumbs={[{ label: 'Chat' }, { label: 'Chat sheet' }]}
         title="Chat sheet (portal)"
-        subheader="Same integration as design-demo: ChatSheet in page header actions, chat panel portaled into the shell sidebar slot. No inline ChatChrome on this page."
+        subheader={`Same integration as the app dataset page: ChatSheet in header actions with dataset-scoped presets for "${DOCS_SAMPLE_DATASET_NAME}". Panel portaled into the shell chat slot.`}
         actions={
           <DocsHeaderActions
             scopeId={DOCS_CHAT_SHEET_SCOPE_ID}
             slashCommandItems={DOCS_SAMPLE_SLASH_ITEMS}
-            triggerLabel={
-              <>
-                <MessageSquare size={20} />
-                &nbsp;AI Assistant
-              </>
-            }
+            presets={DOCS_DATASET_PRESETS}
+            triggerLabel={<MessageSquare size={20} />}
+            triggerAriaLabel="AI Assistant"
+            emptyState={{
+              title: 'Start a conversation',
+            }}
           />
         }
       />
       <PageContentSection>
         <p style={{ marginBottom: 16, fontSize: 14, lineHeight: 1.5 }}>
-          Open <strong>AI Assistant</strong> in the header. The composer runs
-          inside the portaled chat panel (not inline on this page).
+          Open <strong>AI Assistant</strong> in the header. Presets render below
+          the empty state (fixed layout) and inline after the assistant reply,
+          same as{' '}
+          <code style={{ fontSize: 13 }}>
+            presets=&#123;datasetPresets&#125;
+          </code>{' '}
+          on the app dataset page.
         </p>
         <h3 style={{ marginBottom: 8, fontSize: 14, fontWeight: 600 }}>
           Regression checklist
@@ -47,6 +56,10 @@ export default function ChatSheetPage() {
         <ul
           style={{ margin: 0, paddingLeft: 20, fontSize: 14, lineHeight: 1.6 }}
         >
+          <li>
+            Empty chat → three outline preset chips with dataset-scoped labels
+          </li>
+          <li>Preset click → sends preset text, chip hides for that session</li>
           <li>Plain Enter with text → submit and clear composer</li>
           <li>
             Plain Enter must not create empty lines with duplicated placeholders