@sybilion/uilib 1.3.73 → 1.3.75

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

@@ -5,8 +5,8 @@ import { createPortal } from 'react-dom';
 import S from './AppHeader.styl.js';
 import { PAGE_HEADER_ID } from './appChromeAnchors.js';
 
-function AppHeaderHost({ className, anchorId = PAGE_HEADER_ID, }) {
-    return jsx("header", { className: cn(S.root, className), id: anchorId });
+function AppHeaderHost({ className, anchorId = PAGE_HEADER_ID, sticky, }) {
+    return (jsx("header", { className: cn(S.root, sticky && S.sticky, className), id: anchorId }));
 }
 function AppHeaderPortal({ children, pageHeaderId = PAGE_HEADER_ID, }) {
     const [container, setContainer] = useState(null);

package/dist/esm/components/ui/AppHeader/AppHeader.styl.js

@@ -1,7 +1,7 @@
 import styleInject from 'style-inject';
 
-var css_248z = "@media (max-width:768px){:root{--page-x-padding:var(--p-6);--page-y-padding:var(--p-6)}}.AppHeader_root__SdbDv{align-items:center;align-self:flex-end;background-color:var(--color-background);display:flex;max-width:calc(100vw - var(--sidebar-width) - var(--p-3));min-height:var(--header-height);padding-right:var(--p-2);width:100%}@media (max-width:768px){.AppHeader_root__SdbDv{max-width:100%;padding-left:200px}}@media (min-width:768px){[data-slot=sidebar-wrapper][data-state=collapsed] .AppHeader_root__SdbDv{max-width:100%;padding-left:200px}}.AppHeader_content__kyxem{align-items:center;display:flex;gap:2rem;justify-content:flex-end;padding:0 var(--p-9);width:100%}.AppHeader_logo__v31FX{align-items:center;color:var(--color-foreground);display:flex;font-size:1.5rem;font-weight:400;gap:.5rem;text-decoration:none;white-space:nowrap}.AppHeader_logo__v31FX svg{display:inline-flex;height:32px;transition:transform .1s ease-in-out;width:auto}.AppHeader_logo__v31FX:hover svg{transform:scale(1.05)}.AppHeader_nav__ahN1p{align-items:center;display:flex;flex:1;gap:1.5rem;justify-content:center}@media (max-width:units(768px,\"px\")){.AppHeader_nav__ahN1p{display:none}}.AppHeader_navLink__z43jY{color:var(--color-muted-foreground);font-size:.875rem;font-weight:400;text-decoration:none;transition:color .2s ease}.AppHeader_navLink__z43jY:hover{color:var(--color-foreground)}.AppHeader_actions__QuxEF{align-items:center;display:flex;gap:var(--p-4);margin-right:var(--p-2)}@media (max-width:units(768px,\"px\")){.AppHeader_actions__QuxEF{gap:var(--p-1)}}.AppHeader_pageHeaderActionsAnchor__qzQMs{align-items:center;display:flex;flex-shrink:0;gap:var(--p-4)}";
-var S = {"root":"AppHeader_root__SdbDv","content":"AppHeader_content__kyxem","logo":"AppHeader_logo__v31FX","nav":"AppHeader_nav__ahN1p","navLink":"AppHeader_navLink__z43jY","actions":"AppHeader_actions__QuxEF","pageHeaderActionsAnchor":"AppHeader_pageHeaderActionsAnchor__qzQMs"};
+var css_248z = "@media (max-width:768px){:root{--page-x-padding:var(--p-6);--page-y-padding:var(--p-6)}}.AppHeader_root__SdbDv{align-items:center;align-self:flex-end;background-color:var(--color-background);display:flex;max-width:calc(100vw - var(--sidebar-width) - var(--p-2));min-height:var(--header-height);padding-right:var(--p-2);position:relative;width:100%}@media (max-width:768px){.AppHeader_root__SdbDv{max-width:100%;padding-left:200px}}@media (min-width:768px){[data-slot=sidebar-wrapper][data-state=collapsed] .AppHeader_root__SdbDv{max-width:100%;padding-left:200px}}.AppHeader_sticky__qFWuq{backdrop-filter:blur(10px);background-color:color-mix(in srgb,var(--background) 80%,transparent);box-shadow:inset 0 40px 50px 20px var(--background);position:sticky;top:0;z-index:100}.AppHeader_content__kyxem{align-items:center;display:flex;gap:2rem;justify-content:flex-end;padding:0 var(--p-9);width:100%}.AppHeader_logo__v31FX{align-items:center;color:var(--color-foreground);display:flex;font-size:1.5rem;font-weight:400;gap:.5rem;text-decoration:none;white-space:nowrap}.AppHeader_logo__v31FX svg{display:inline-flex;height:32px;transition:transform .1s ease-in-out;width:auto}.AppHeader_logo__v31FX:hover svg{transform:scale(1.05)}.AppHeader_nav__ahN1p{align-items:center;display:flex;flex:1;gap:1.5rem;justify-content:center}@media (max-width:units(768px,\"px\")){.AppHeader_nav__ahN1p{display:none}}.AppHeader_navLink__z43jY{color:var(--color-muted-foreground);font-size:.875rem;font-weight:400;text-decoration:none;transition:color .2s ease}.AppHeader_navLink__z43jY:hover{color:var(--color-foreground)}.AppHeader_actions__QuxEF{align-items:center;display:flex;gap:var(--p-4);margin-right:var(--p-2)}@media (max-width:units(768px,\"px\")){.AppHeader_actions__QuxEF{gap:var(--p-1)}}.AppHeader_pageHeaderActionsAnchor__qzQMs{align-items:center;display:flex;flex-shrink:0;gap:var(--p-4)}";
+var S = {"root":"AppHeader_root__SdbDv","sticky":"AppHeader_sticky__qFWuq","content":"AppHeader_content__kyxem","logo":"AppHeader_logo__v31FX","nav":"AppHeader_nav__ahN1p","navLink":"AppHeader_navLink__z43jY","actions":"AppHeader_actions__QuxEF","pageHeaderActionsAnchor":"AppHeader_pageHeaderActionsAnchor__qzQMs"};
 styleInject(css_248z);
 
 export { S as default };

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

@@ -14,7 +14,7 @@ import { filterToTextAttachments, isAttachmentsDropzoneEnabled, buildAcceptAttr
 import { extractChatAttachmentItems } from '../chatAttachmentExtract.js';
 import S from './ChatChrome.styl.js';
 
-function ChatChrome({ showResizeHandle, resizeHandle, onClose, isEmpty, renderPresets, messages, onQuickReply, suppressedQuickReplyKeys, isLoading, scriptContinueLabel, onScriptContinue, renderMessageChart, showSyntheticBranchButtons, unusedBranchKeys, showInlinePresets, isLastMessageFromUser, scrollRef, effectiveScopeId, onPromptSubmit, onChatDeleted, onNewChat, promptPrefill, footerClassName, emptyState, allowedAttachments, allowPdfAttachments = false, onAttachmentsDropped, slashCommandItems, onSlashItemCommand, promptPlaceholder, }) {
+function ChatChrome({ showResizeHandle, resizeHandle, onClose, isEmpty, renderPresets, messages, onQuickReply, suppressedQuickReplyKeys, isLoading, loadingLabel, scriptContinueLabel, onScriptContinue, renderMessageChart, showSyntheticBranchButtons, unusedBranchKeys, showInlinePresets, isLastMessageFromUser, scrollRef, effectiveScopeId, onPromptSubmit, onChatDeleted, onNewChat, promptPrefill, footerClassName, emptyState, allowedAttachments, allowPdfAttachments = false, onAttachmentsDropped, slashCommandItems, onSlashItemCommand, promptPlaceholder, }) {
     const filteredAllowedAttachments = useMemo(() => filterToTextAttachments(allowedAttachments), [allowedAttachments]);
     const attachmentsDropzoneEnabled = isAttachmentsDropzoneEnabled(allowedAttachments, allowPdfAttachments);
     const attachmentAccept = useMemo(() => buildAcceptAttr(filteredAllowedAttachments, allowPdfAttachments), [filteredAllowedAttachments, allowPdfAttachments]);
@@ -77,7 +77,7 @@ function ChatChrome({ showResizeHandle, resizeHandle, onClose, isEmpty, renderPr
                                                 const label = displayLabelForBranchKeyFromMessages(key, messages) ??
                                                     humanizeBranchKey(key);
                                                 return (jsx("span", { className: S.branchBtnWrap, children: jsxs(Button, { type: "button", variant: "outline", size: "sm", disabled: isLoading, onClick: () => onQuickReply(key, label), children: [jsx(PaperPlaneRightIcon, {}), label] }) }, key));
-                                            }) })) : null, showInlinePresets && renderPresets('inline'), isLoading && isLastMessageFromUser && (jsx(TextShimmer, { duration: 1, spread: 5, className: S.loader, children: "Thinking..." }))] }) })), jsxs("div", { className: cn(S.footer, footerClassName), children: [isEmpty ? (jsx("div", { className: S.notice, children: "Forecast Assistant can make mistakes." })) : null, jsx(Chat.Prompt, { onSubmit: handlePromptSubmitWithAttachments, disabled: promptDisabled, attachments: pendingAttachments, onRemoveAttachment: handleRemoveAttachment, prefillMessage: promptPrefill ?? undefined, placeholder: promptPlaceholder, slashCommandItems: slashCommandItems, onSlashItemCommand: onSlashItemCommand, attachmentAccept: attachmentsDropzoneEnabled ? attachmentAccept : undefined, onAttachmentFiles: attachmentsDropzoneEnabled ? handleAttachmentFiles : undefined })] })] })] })] }));
+                                            }) })) : null, showInlinePresets && renderPresets('inline'), isLoading && (isLastMessageFromUser || loadingLabel) && (jsx(TextShimmer, { duration: 1, spread: 5, className: S.loader, children: loadingLabel ?? 'Thinking...' }))] }) })), jsxs("div", { className: cn(S.footer, footerClassName), children: [isEmpty ? (jsx("div", { className: S.notice, children: "Forecast Assistant can make mistakes." })) : null, jsx(Chat.Prompt, { onSubmit: handlePromptSubmitWithAttachments, disabled: promptDisabled, attachments: pendingAttachments, onRemoveAttachment: handleRemoveAttachment, prefillMessage: promptPrefill ?? undefined, placeholder: promptPlaceholder, slashCommandItems: slashCommandItems, onSlashItemCommand: onSlashItemCommand, attachmentAccept: attachmentsDropzoneEnabled ? attachmentAccept : undefined, onAttachmentFiles: attachmentsDropzoneEnabled ? handleAttachmentFiles : undefined })] })] })] })] }));
 }
 
 export { ChatChrome };

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

@@ -2,7 +2,7 @@ import { jsx } from 'react/jsx-runtime';
 import { useState, useRef, useEffect, useMemo, useCallback } from 'react';
 import { MessageRole } from '../Chat.types.js';
 import { isGraphIntakeAssistantStepComplete, matchUserTextToQuickReply, isPresetScriptGraph, branchesFromPresetScriptGraph, parseScriptLine, textHasQuickReplyMarkers, branchKeysUsedFromChatHistory, branchKeysUsedByUserMessages, extractQuickReplyLabelKeyPairsFromText, entryBranchKeyBeforeLastAssistant } from '../ChatMessage/presetScript.js';
-import { displayTextFromSendPayload, buildChatSendMessagePayload } from '../buildChatSendMessagePayload.js';
+import { displayTextFromSendPayload, buildChatSendMessagePayload, loadingLabelFromSendPayload } 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';
@@ -27,6 +27,7 @@ function useChatPanelChromeModel({ embedAsPage, presets, scopeId, onMessage, onS
     const isMobile = useIsMobile();
     const { chatPanelContainer, isOpen: sidebarNavOpen, setOpen: setSidebarNavOpen, sidebarWidthPx, chatWidthPx, setChatWidthPx, getShellWidth, chatPanelOpen: shellChatPanelOpen, setChatPanelOpen, } = useSidebar();
     const [localUiBusy, setLocalUiBusy] = useState(false);
+    const [outboundLoadingLabel, setOutboundLoadingLabel] = useState();
     const { chats, currentChatId, setCurrentChatId, newChat, sendMessage, addMessage, removeMessageById, } = useChatsForScopeId(effectiveScopeId);
     const chat = useChat(effectiveScopeId, currentChatId);
     const isOutboundPending = useChatOutboundPending(effectiveScopeId, currentChatId);
@@ -464,8 +465,14 @@ function useChatPanelChromeModel({ embedAsPage, presets, scopeId, onMessage, onS
             if (transformSendPayload) {
                 payload = await transformSendPayload(message, stagedAttachments, payload);
             }
-            const assistantResponse = await sendMessage(payload);
-            onMessage?.(displayTextFromSendPayload(payload), assistantResponse);
+            setOutboundLoadingLabel(loadingLabelFromSendPayload(payload));
+            try {
+                const assistantResponse = await sendMessage(payload);
+                onMessage?.(displayTextFromSendPayload(payload), assistantResponse);
+            }
+            finally {
+                setOutboundLoadingLabel(undefined);
+            }
         }
         catch (error) {
             logger.error('Error sending chat message:', error);
@@ -895,6 +902,7 @@ function useChatPanelChromeModel({ embedAsPage, presets, scopeId, onMessage, onS
         onQuickReply,
         suppressedQuickReplyKeys,
         isLoading,
+        loadingLabel: outboundLoadingLabel,
         scriptContinueLabel,
         onScriptContinue,
         renderMessageChart,

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

@@ -66,5 +66,9 @@ function buildChatSendMessagePayload(displayText, attachments) {
 function displayTextFromSendPayload(message) {
     return typeof message === 'string' ? message : message.displayText;
 }
+/** Optional loading shimmer label from a structured send payload. */
+function loadingLabelFromSendPayload(message) {
+    return typeof message === 'string' ? undefined : message.loadingLabel;
+}
 
-export { buildChatSendMessagePayload, displayTextFromSendPayload, normalizeUserTextFileAttachments };
+export { buildChatSendMessagePayload, displayTextFromSendPayload, loadingLabelFromSendPayload, normalizeUserTextFileAttachments };

package/dist/esm/components/ui/Page/AppShell/AppShell.js

@@ -8,7 +8,7 @@ function AppShellMainContent({ className, bodyClassName, children, header, foote
     return (jsxs("div", { className: cn(S.mainColumn, className), children: [header, jsx("div", { className: cn(S.mainBody, bodyClassName), children: children }), footer] }));
 }
 const AppShell = forwardRef(function AppShell({ className, ...props }, ref) {
-    return jsx("div", { ref: ref, className: cn(S.root, className), ...props });
+    return (jsx("div", { ref: ref, "data-slot": "app-shell", className: cn(S.root, className), ...props }));
 });
 
 export { AppShell, AppShellMainContent };

package/dist/esm/components/widgets/SybilionAppHeader/SybilionAppHeader.styl.js

@@ -1,6 +1,6 @@
 import styleInject from 'style-inject';
 
-var css_248z = "@media (max-width:768px){:root{--page-x-padding:var(--p-6);--page-y-padding:var(--p-6)}}.SybilionAppHeader_actionsAnchor__ress2,.SybilionAppHeader_pageActionsPortal__9C5ww{align-items:center;display:flex;flex-shrink:0;gap:var(--p-4)}.SybilionAppHeader_pageActionsPortal__9C5ww:empty{display:none}.SybilionAppHeader_logoArea__3HAhG{align-items:center;display:flex;gap:var(--p-2);left:40px;position:absolute;top:22px;z-index:10}@media (max-width:768px){.SybilionAppHeader_logoArea__3HAhG{left:32px}}@media (min-width:768px){[data-slot=sidebar-wrapper][data-state=expanded] .SybilionAppHeader_logoArea__3HAhG{position:fixed}}.SybilionAppHeader_logoAreaWithBanner__7Iy78{top:22px;top:calc(22px + var(--welcome-banner-height, 0px))}@media (min-width:768px){[data-slot=sidebar-wrapper][data-state=collapsed] .SybilionAppHeader_logoAreaWithBanner__7Iy78{top:22px}}.SybilionAppHeader_logoLink__bH-KX{align-items:center;color:var(--color-foreground);display:flex;font-size:1.5rem;font-weight:400;gap:.5rem;text-decoration:none;white-space:nowrap;width:-moz-fit-content;width:fit-content}.SybilionAppHeader_logoLink__bH-KX svg{display:inline-flex;flex-shrink:0;height:32px;transition:transform .1s ease-in-out;width:auto}.SybilionAppHeader_logoLink__bH-KX:hover svg{transform:scale(1.05)}";
+var css_248z = "@media (max-width:768px){:root{--page-x-padding:var(--p-6);--page-y-padding:var(--p-6)}}.SybilionAppHeader_actionsAnchor__ress2,.SybilionAppHeader_pageActionsPortal__9C5ww{align-items:center;display:flex;flex-shrink:0;gap:var(--p-4)}.SybilionAppHeader_pageActionsPortal__9C5ww:empty{display:none}.SybilionAppHeader_logoArea__3HAhG{align-items:center;display:flex;gap:var(--p-2);left:40px;position:absolute;top:22px;z-index:10}@media (max-width:768px){.SybilionAppHeader_logoArea__3HAhG{left:32px}}@media (min-width:768px){[data-slot=sidebar-wrapper][data-state=expanded]:not([data-slot=app-shell] [data-slot=sidebar-wrapper]) [data-slot=app-shell]:not([data-slot=app-shell] [data-slot=app-shell]) .SybilionAppHeader_logoArea__3HAhG:not([data-slot=app-shell] [data-slot=app-shell] *){left:calc(var(--sidebar-width)*-1 + 52px);position:absolute}[data-slot=app-shell] [data-slot=sidebar-wrapper][data-state=expanded] [data-slot=app-shell] .SybilionAppHeader_logoArea__3HAhG{left:calc(var(--sidebar-width)*-1 + 44px);position:absolute}[data-slot=app-shell] [data-slot=sidebar-wrapper][data-state=collapsed] [data-slot=app-shell] .SybilionAppHeader_logoArea__3HAhG{left:var(--p-8);position:absolute}}.SybilionAppHeader_logoAreaWithBanner__7Iy78{top:22px;top:calc(22px + var(--welcome-banner-height, 0px))}@media (min-width:768px){[data-slot=sidebar-wrapper][data-state=collapsed]:not([data-slot=app-shell] [data-slot=sidebar-wrapper]) [data-slot=app-shell]:not([data-slot=app-shell] [data-slot=app-shell]) .SybilionAppHeader_logoAreaWithBanner__7Iy78{top:22px}}.SybilionAppHeader_logoLink__bH-KX{align-items:center;color:var(--color-foreground);display:flex;font-size:1.5rem;font-weight:400;gap:.5rem;text-decoration:none;white-space:nowrap;width:-moz-fit-content;width:fit-content}.SybilionAppHeader_logoLink__bH-KX svg{display:inline-flex;flex-shrink:0;height:32px;transition:transform .1s ease-in-out;width:auto}.SybilionAppHeader_logoLink__bH-KX:hover svg{transform:scale(1.05)}";
 var S = {"actionsAnchor":"SybilionAppHeader_actionsAnchor__ress2","pageActionsPortal":"SybilionAppHeader_pageActionsPortal__9C5ww","logoArea":"SybilionAppHeader_logoArea__3HAhG","logoAreaWithBanner":"SybilionAppHeader_logoAreaWithBanner__7Iy78","logoLink":"SybilionAppHeader_logoLink__bH-KX"};
 styleInject(css_248z);
 

package/dist/esm/contexts/chat-context.js

@@ -312,7 +312,7 @@ function ChatProvider({ children, userSwitchKey, sendChatMessage: sendChatMessag
         if (typeof message === 'string') {
             addMessage(scopeId, targetChatId, MessageRole.USER, message);
         }
-        else {
+        else if (!message.omitUserMessage) {
             addMessage(scopeId, targetChatId, MessageRole.USER, message.displayText, {
                 userTextFileAttachments: normalizeUserTextFileAttachments(message),
             });

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

@@ -3,8 +3,14 @@ export type AppHeaderProps = {
     className?: string;
     /** Override default anchor id when multiple headers exist (e.g. docs demos). */
     anchorId?: string;
+    /**
+     * Pins the host to the top of its scroll container (`position: sticky; top: 0`).
+     * Use with `PageScroll` or any ancestor that scrolls; portaled header content
+     * from `AppHeaderPortal` / `SybilionAppHeader` stays inside this element.
+     */
+    sticky?: boolean;
 };
-export declare function AppHeaderHost({ className, anchorId, }: AppHeaderProps): import("react/jsx-runtime").JSX.Element;
+export declare function AppHeaderHost({ className, anchorId, sticky, }: AppHeaderProps): import("react/jsx-runtime").JSX.Element;
 export type AppHeaderPortalProps = {
     children: ReactNode;
     pageHeaderId?: string;

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

@@ -17,6 +17,10 @@ export type ChatSendMessagePayload = {
     apiMessage: string;
     displayText: string;
     userTextFileAttachments?: UserTextFileAttachment[];
+    /** When true, skip adding a USER bubble before the API call (e.g. slash-command actions). */
+    omitUserMessage?: boolean;
+    /** Shimmer label while waiting on the API; defaults to "Thinking...". */
+    loadingLabel?: string;
 };
 export interface Message {
     id: string;

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

@@ -1,2 +1,2 @@
 import type { ChatChromeProps } from './ChatChrome.types';
-export declare function ChatChrome({ showResizeHandle, resizeHandle, onClose, isEmpty, renderPresets, messages, onQuickReply, suppressedQuickReplyKeys, isLoading, scriptContinueLabel, onScriptContinue, renderMessageChart, showSyntheticBranchButtons, unusedBranchKeys, showInlinePresets, isLastMessageFromUser, scrollRef, effectiveScopeId, onPromptSubmit, onChatDeleted, onNewChat, promptPrefill, footerClassName, emptyState, allowedAttachments, allowPdfAttachments, onAttachmentsDropped, slashCommandItems, onSlashItemCommand, promptPlaceholder, }: ChatChromeProps): import("react/jsx-runtime").JSX.Element;
+export declare function ChatChrome({ showResizeHandle, resizeHandle, onClose, isEmpty, renderPresets, messages, onQuickReply, suppressedQuickReplyKeys, isLoading, loadingLabel, scriptContinueLabel, onScriptContinue, renderMessageChart, showSyntheticBranchButtons, unusedBranchKeys, showInlinePresets, isLastMessageFromUser, scrollRef, effectiveScopeId, onPromptSubmit, onChatDeleted, onNewChat, promptPrefill, footerClassName, emptyState, allowedAttachments, allowPdfAttachments, onAttachmentsDropped, slashCommandItems, onSlashItemCommand, promptPlaceholder, }: ChatChromeProps): import("react/jsx-runtime").JSX.Element;

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

@@ -23,6 +23,8 @@ export interface ChatChromeProps {
     onQuickReply: (branchKey: string, displayLabel: string) => void;
     suppressedQuickReplyKeys: ReadonlySet<string>;
     isLoading: boolean;
+    /** Overrides default "Thinking..." shimmer while waiting on the API. */
+    loadingLabel?: string;
     scriptContinueLabel: string | undefined;
     onScriptContinue: (() => void) | undefined;
     renderMessageChart?: () => React.ReactNode;

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

@@ -8,3 +8,5 @@ export declare function normalizeUserTextFileAttachments(payload: ChatSendMessag
 export declare function buildChatSendMessagePayload(displayText: string, attachments: readonly ChatAttachmentDropItem[]): string | ChatSendMessagePayload;
 /** Display text from a string or structured send payload. */
 export declare function displayTextFromSendPayload(message: string | ChatSendMessagePayload): string;
+/** Optional loading shimmer label from a structured send payload. */
+export declare function loadingLabelFromSendPayload(message: string | ChatSendMessagePayload): string | undefined;

package/package.json

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

package/src/components/ui/AppHeader/AppHeader.styl

@@ -1,11 +1,12 @@
 @import '../../../lib/theme.styl'
 
 .root
+  position relative
   display flex
   align-items center
   align-self flex-end
   width 100%
-  max-width calc(100vw - var(--sidebar-width) - var(--p-3))
+  max-width calc(100vw - var(--sidebar-width) - var(--p-2))
   min-height var(--header-height)
   padding-right var(--p-2)
 
@@ -20,6 +21,14 @@
       padding-left 200px
       max-width 100%
 
+.sticky
+  z-index 100
+  position sticky
+  top 0
+  background-color unquote('color-mix(in srgb, var(--background) 80%, transparent)')
+  backdrop-filter blur(10px)
+  box-shadow inset 0 40px 50px 20px var(--background)
+
 .content
   display flex
   align-items center

package/src/components/ui/AppHeader/AppHeader.styl.d.ts

@@ -8,6 +8,7 @@ interface CssExports {
   'navLink': string;
   'pageHeaderActionsAnchor': string;
   'root': string;
+  'sticky': string;
 }
 export const cssExports: CssExports;
 export default cssExports;

package/src/components/ui/AppHeader/AppHeader.tsx

@@ -9,13 +9,25 @@ export type AppHeaderProps = {
   className?: string;
   /** Override default anchor id when multiple headers exist (e.g. docs demos). */
   anchorId?: string;
+  /**
+   * Pins the host to the top of its scroll container (`position: sticky; top: 0`).
+   * Use with `PageScroll` or any ancestor that scrolls; portaled header content
+   * from `AppHeaderPortal` / `SybilionAppHeader` stays inside this element.
+   */
+  sticky?: boolean;
 };
 
 export function AppHeaderHost({
   className,
   anchorId = PAGE_HEADER_ID,
+  sticky,
 }: AppHeaderProps) {
-  return <header className={cn(S.root, className)} id={anchorId} />;
+  return (
+    <header
+      className={cn(S.root, sticky && S.sticky, className)}
+      id={anchorId}
+    />
+  );
 }
 
 export type AppHeaderPortalProps = {

package/src/components/ui/Chat/Chat.types.ts

@@ -25,6 +25,10 @@ export type ChatSendMessagePayload = {
   apiMessage: string;
   displayText: string;
   userTextFileAttachments?: UserTextFileAttachment[];
+  /** When true, skip adding a USER bubble before the API call (e.g. slash-command actions). */
+  omitUserMessage?: boolean;
+  /** Shimmer label while waiting on the API; defaults to "Thinking...". */
+  loadingLabel?: string;
 };
 
 export interface Message {

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

@@ -34,6 +34,7 @@ export function ChatChrome({
   onQuickReply,
   suppressedQuickReplyKeys,
   isLoading,
+  loadingLabel,
   scriptContinueLabel,
   onScriptContinue,
   renderMessageChart,
@@ -248,9 +249,9 @@ export function ChatChrome({
 
                 {showInlinePresets && renderPresets('inline')}
 
-                {isLoading && isLastMessageFromUser && (
+                {isLoading && (isLastMessageFromUser || loadingLabel) && (
                   <TextShimmer duration={1} spread={5} className={S.loader}>
-                    Thinking...
+                    {loadingLabel ?? 'Thinking...'}
                   </TextShimmer>
                 )}
               </Scroll>

package/src/components/ui/Chat/ChatChrome/ChatChrome.types.ts

@@ -33,6 +33,8 @@ export interface ChatChromeProps {
   onQuickReply: (branchKey: string, displayLabel: string) => void;
   suppressedQuickReplyKeys: ReadonlySet<string>;
   isLoading: boolean;
+  /** Overrides default "Thinking..." shimmer while waiting on the API. */
+  loadingLabel?: string;
   scriptContinueLabel: string | undefined;
   onScriptContinue: (() => void) | undefined;
   renderMessageChart?: () => React.ReactNode;

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

@@ -22,6 +22,7 @@ import type { ChatPresetsLayout } from '#uilib/components/ui/Chat/ChatPresets';
 import {
   buildChatSendMessagePayload,
   displayTextFromSendPayload,
+  loadingLabelFromSendPayload,
 } from '#uilib/components/ui/Chat/buildChatSendMessagePayload';
 import { usedPresetIdsFromMessages } from '#uilib/components/ui/Chat/chat-preset-utils';
 import {
@@ -166,6 +167,9 @@ export function useChatPanelChromeModel({
     setChatPanelOpen,
   } = useSidebar();
   const [localUiBusy, setLocalUiBusy] = useState(false);
+  const [outboundLoadingLabel, setOutboundLoadingLabel] = useState<
+    string | undefined
+  >();
   const {
     chats,
     currentChatId,
@@ -708,8 +712,13 @@ export function useChatPanelChromeModel({
             payload,
           );
         }
-        const assistantResponse = await sendMessage(payload);
-        onMessage?.(displayTextFromSendPayload(payload), assistantResponse);
+        setOutboundLoadingLabel(loadingLabelFromSendPayload(payload));
+        try {
+          const assistantResponse = await sendMessage(payload);
+          onMessage?.(displayTextFromSendPayload(payload), assistantResponse);
+        } finally {
+          setOutboundLoadingLabel(undefined);
+        }
       } catch (error) {
         logger.error('Error sending chat message:', error);
       }
@@ -1222,6 +1231,7 @@ export function useChatPanelChromeModel({
     onQuickReply,
     suppressedQuickReplyKeys,
     isLoading,
+    loadingLabel: outboundLoadingLabel,
     scriptContinueLabel,
     onScriptContinue,
     renderMessageChart,

package/src/components/ui/Chat/buildChatSendMessagePayload.ts

@@ -80,3 +80,10 @@ export function displayTextFromSendPayload(
 ): string {
   return typeof message === 'string' ? message : message.displayText;
 }
+
+/** Optional loading shimmer label from a structured send payload. */
+export function loadingLabelFromSendPayload(
+  message: string | ChatSendMessagePayload,
+): string | undefined {
+  return typeof message === 'string' ? undefined : message.loadingLabel;
+}

package/src/components/ui/Page/AppShell/AppShell.tsx

@@ -33,6 +33,13 @@ export function AppShellMainContent({
 
 export const AppShell = forwardRef<HTMLDivElement, AppShellProps>(
   function AppShell({ className, ...props }, ref) {
-    return <div ref={ref} className={cn(S.root, className)} {...props} />;
+    return (
+      <div
+        ref={ref}
+        data-slot="app-shell"
+        className={cn(S.root, className)}
+        {...props}
+      />
+    );
   },
 );

package/src/components/widgets/SybilionAppHeader/SybilionAppHeader.styl

@@ -27,15 +27,27 @@
 
   @media (max-width MOBILE)
     left 32px
+
+  // Top-level shell: offset logo into sidebar column (same math as nested embed, but absolute — not fixed).
   @media (min-width MOBILE)
-    :global([data-slot='sidebar-wrapper'][data-state='expanded']) &
-      position fixed
+    :global([data-slot='sidebar-wrapper'][data-state='expanded']:not([data-slot='app-shell'] [data-slot='sidebar-wrapper']) [data-slot='app-shell']:not([data-slot='app-shell'] [data-slot='app-shell'])) &:global(:not([data-slot='app-shell'] [data-slot='app-shell'] *))
+      position absolute
+      left calc(-1 * var(--sidebar-width) + 52px)
+
+    // Nested shell (e.g. docs embed): absolute within header; offset into sidebar when expanded.
+    :global([data-slot='app-shell'] [data-slot='sidebar-wrapper'][data-state='expanded'] [data-slot='app-shell']) &
+      position absolute
+      left calc(-1 * var(--sidebar-width) + 44px)
+
+    :global([data-slot='app-shell'] [data-slot='sidebar-wrapper'][data-state='collapsed'] [data-slot='app-shell']) &
+      position absolute
+      left var(--p-8)
 
 .logoAreaWithBanner
   top calc(22px + var(--welcome-banner-height, 0px))
 
   @media (min-width MOBILE)
-    :global([data-slot='sidebar-wrapper'][data-state='collapsed']) &
+    :global([data-slot='sidebar-wrapper'][data-state='collapsed']:not([data-slot='app-shell'] [data-slot='sidebar-wrapper']) [data-slot='app-shell']:not([data-slot='app-shell'] [data-slot='app-shell'])) &
       top 22px
 
 .logoLink

package/src/contexts/chat-context.tsx

@@ -494,7 +494,7 @@ export function ChatProvider({
 
       if (typeof message === 'string') {
         addMessage(scopeId, targetChatId, MessageRole.USER, message);
-      } else {
+      } else if (!message.omitUserMessage) {
         addMessage(
           scopeId,
           targetChatId,

package/src/docs/DocsShell.tsx

@@ -20,7 +20,7 @@ export function DocsShell() {
         <DocsSidebar />
 
         <AppShellMainContent
-          header={<AppHeaderHost />}
+          header={<AppHeaderHost sticky />}
           footer={
             <PageFooter versionLink="/releases" versionLabel="1.0.0-docs" />
           }
@@ -30,10 +30,22 @@ export function DocsShell() {
             onNavigate={href => {
               void navigate(href);
             }}
-            authenticated={false}
+            authenticated
             isAuthenticated={false}
             onLogout={() => undefined}
             signInSlot={<ThemeToggle />}
+            defaultApps={[
+              {
+                id: 'docs-home',
+                displayName: 'Home',
+                subtitle: 'Home',
+                iconKey: 'grid-four',
+                accent: '#0d9488',
+                accentMuted: 'rgba(13, 148, 136, 0.12)',
+                href: '/',
+                matchPathPrefixes: ['/'],
+              },
+            ]}
           />
           <Outlet />
         </AppShellMainContent>

package/src/docs/pages/StandaloneAppLayoutPage/StandaloneAppLayoutPage.styl

@@ -14,6 +14,9 @@
   display flex
   flex-direction column
 
+// .preview > :global([data-slot='sidebar-wrapper'][data-state='expanded']) .previewLogoArea
+//   margin-left calc(-1 * var(--sidebar-width)) !important
+
 .previewScrollRoot
   flex 1
   min-height 0

package/src/docs/pages/StandaloneAppLayoutPage/StandaloneAppLayoutPage.tsx

@@ -113,7 +113,7 @@ function DemoMainBody({ panel }: { panel: PreviewPanel }) {
         </PageContentSection>
         <PageContentSection title="Scroll test">
           <div className={S.scrollTestBlock}>
-            Placeholder region with <code>min-height: 100vh</code> — scroll the
+            Placeholder region with <code>min-height: 160vh</code> — scroll the
             main column to verify PageScroll / AppShell behavior.
           </div>
         </PageContentSection>
@@ -130,55 +130,60 @@ function StandaloneLayoutPreview() {
   >();
 
   return (
-    <div className={S.preview}>
-      <PageScroll rootClassName={S.previewScrollRoot}>
-        <AppShell>
-          <DemoAppSidebar
-            panel={panel}
-            onSelectPanel={setPanel}
-            selectedDatasetId={selectedDatasetId}
-            onSelectDatasetId={setSelectedDatasetId}
-          />
+    <div className={S.preview} data-standalone-layout-preview>
+      <SidebarProvider
+        sidebarWidthStorageKey="uilib.docs.standaloneLayout.sidebarWidthPx"
+        persistSidebarWidthWithoutConsent
+      >
+        <PageScroll rootClassName={S.previewScrollRoot}>
+          <AppShell>
+            <DemoAppSidebar
+              panel={panel}
+              onSelectPanel={setPanel}
+              selectedDatasetId={selectedDatasetId}
+              onSelectDatasetId={setSelectedDatasetId}
+            />
 
-          <AppShellMainContent
-            header={<AppHeaderHost anchorId={TEST_HEADER_ID} />}
-            footer={
-              <PageFooter
-                versionLink="#standalone-layout-preview"
-                versionLabel="0.0.0-preview"
-              />
-            }
-          >
-            <SybilionAppHeader
-              pageHeaderId={TEST_HEADER_ID}
-              pathname={previewPath}
-              onNavigate={setPreviewPath}
-              authenticated
-              appsStorageKey={DOCS_WORKSPACE_APPS_LS_KEY}
-              defaultApps={DOCS_PREVIEW_APPS}
-              user={{
-                name: 'Example User',
-                email: 'user@example.com',
-                avatar: '',
-              }}
-              onLogout={() => undefined}
-              menuItems={
-                <>
-                  <DropdownMenuItem>
-                    <UserCircleIcon />
-                    Account (preview)
-                  </DropdownMenuItem>
-                  <DropdownMenuItem>
-                    <GearSixIcon />
-                    Settings (preview)
-                  </DropdownMenuItem>
-                </>
+            <AppShellMainContent
+              header={<AppHeaderHost sticky anchorId={TEST_HEADER_ID} />}
+              footer={
+                <PageFooter
+                  versionLink="#standalone-layout-preview"
+                  versionLabel="0.0.0-preview"
+                />
               }
-            />
-            <DemoMainBody panel={panel} />
-          </AppShellMainContent>
-        </AppShell>
-      </PageScroll>
+            >
+              <SybilionAppHeader
+                pageHeaderId={TEST_HEADER_ID}
+                pathname={previewPath}
+                onNavigate={setPreviewPath}
+                authenticated
+                appsStorageKey={DOCS_WORKSPACE_APPS_LS_KEY}
+                defaultApps={DOCS_PREVIEW_APPS}
+                user={{
+                  name: 'Example User',
+                  email: 'user@example.com',
+                  avatar: '',
+                }}
+                onLogout={() => undefined}
+                menuItems={
+                  <>
+                    <DropdownMenuItem>
+                      <UserCircleIcon />
+                      Account (preview)
+                    </DropdownMenuItem>
+                    <DropdownMenuItem>
+                      <GearSixIcon />
+                      Settings (preview)
+                    </DropdownMenuItem>
+                  </>
+                }
+              />
+              <DemoMainBody panel={panel} />
+            </AppShellMainContent>
+          </AppShell>
+        </PageScroll>
+      </SidebarProvider>
     </div>
   );
 }
@@ -199,12 +204,7 @@ export default function StandaloneAppLayoutPage() {
         actions={<DocsHeaderActions />}
       />
       <PageContentSection title="Embedded mini-app (layout preview)">
-        <SidebarProvider
-          sidebarWidthStorageKey="uilib.docs.standaloneLayout.sidebarWidthPx"
-          persistSidebarWidthWithoutConsent
-        >
-          <StandaloneLayoutPreview />
-        </SidebarProvider>
+        <StandaloneLayoutPreview />
       </PageContentSection>
     </>
   );

package/src/docs/registry.ts

@@ -43,12 +43,6 @@ export const DOC_REGISTRY: DocEntry[] = [
     section: 'Data display',
     load: () => import('./pages/AnalysisLineIconPage'),
   },
-  // {
-  //   slug: 'app-header',
-  //   title: 'AppHeader',
-  //   section: 'Layout',
-  //   load: () => import('./pages/AppHeaderPage'),
-  // },
   {
     slug: 'avatar',
     title: 'Avatar',