@sybilion/uilib 1.3.83 → 1.3.84

package/dist/esm/components/ui/Chat/ChatPrompt/ChatPrompt.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)}}.ChatPrompt_root__5G5bq{align-items:stretch;display:flex;flex-direction:column;gap:var(--p-2);padding:var(--p-6);padding-top:var(--p-5);position:relative}.ChatPrompt_composer__H3c3N{align-items:flex-end;display:flex;flex-direction:row;gap:var(--p-3);position:relative;width:100%}.ChatPrompt_fileInput__xdgPn{display:none}.ChatPrompt_attachButton__gi-qF{align-self:flex-end;flex-shrink:0}.ChatPrompt_editorWrap__Q7gat{align-self:stretch;flex:1;min-width:0}.ChatPrompt_editorMount__Phh4D{background:transparent;border:none;border-radius:0!important;box-shadow:none!important;display:flex;flex:1;flex-direction:column;max-height:200px;min-height:40px;min-width:0;padding:0!important}.ChatPrompt_editorMount__Phh4D:focus-within{box-shadow:none!important}.ChatPrompt_editorMount__Phh4D .ProseMirror{border:none!important;box-shadow:none!important;flex:1;margin:0;max-height:200px!important;min-height:40px!important;outline:none!important;overflow-x:hidden!important;overflow-y:auto!important;padding:var(--p-2) 0 0!important;resize:none!important;white-space:pre-wrap;word-break:break-word}.ChatPrompt_editorMount__Phh4D .ProseMirror p.is-empty.is-editor-empty:before{color:var(--muted-foreground);content:attr(data-placeholder);float:left;height:0;pointer-events:none}.ChatPrompt_editorMount__Phh4D .ProseMirror .chat-prompt-command-chip,.ChatPrompt_editorMount__Phh4D .ProseMirror .slash-mention{align-items:center;background:var(--muted);border-radius:var(--radius-sm);display:inline-flex;font-size:.875em;line-height:1.4;padding:0 var(--p-1);-webkit-user-select:none;-moz-user-select:none;user-select:none;vertical-align:baseline;white-space:nowrap}.ChatPrompt_editorMount__Phh4D .ProseMirror .chat-prompt-command-chip{color:var(--foreground)}.ChatPrompt_submitColumn__0rY1R{align-items:center;display:flex;flex-direction:column;flex-shrink:0;justify-content:flex-end}.ChatPrompt_submitColumn__0rY1R>button:focus{box-shadow:0 0 0 2px var(--brand-color-500)!important}.ChatPrompt_submitColumn__0rY1R>button:first-child{border:none;position:relative;transition:all .2s}.ChatPrompt_submitColumn__0rY1R>button:first-child:focus{transform:scale(1.2)}.ChatPrompt_submitColumn__0rY1R>button:first-child:before{bottom:-100%;content:\"\";left:-100%;position:absolute;right:-100%;top:-100%}.ChatPrompt_attachments__KG-fG{display:flex;flex-wrap:wrap;gap:var(--p-2);margin-bottom:var(--p-2)}.ChatPrompt_attachmentItem__QJk7J{flex:1 1 300px;max-width:300px;min-width:0}";
+var css_248z = "@media (max-width:768px){:root{--page-x-padding:var(--p-6);--page-y-padding:var(--p-6)}}.ChatPrompt_root__5G5bq{align-items:stretch;display:flex;flex-direction:column;gap:var(--p-2);padding:var(--p-3);position:relative}.ChatPrompt_composer__H3c3N{align-items:flex-end;display:flex;flex-direction:row;gap:var(--p-3);position:relative;width:100%}.ChatPrompt_fileInput__xdgPn{display:none}.ChatPrompt_attachButton__gi-qF{align-self:flex-end;flex-shrink:0}.ChatPrompt_editorWrap__Q7gat{align-self:stretch;flex:1;min-width:0}.ChatPrompt_editorMount__Phh4D{background:transparent;border:none;border-radius:0!important;box-shadow:none!important;display:flex;flex:1;flex-direction:column;max-height:200px;min-height:40px;min-width:0;padding:0!important}.ChatPrompt_editorMount__Phh4D:focus-within{box-shadow:none!important}.ChatPrompt_editorMount__Phh4D .ProseMirror{border:none!important;box-shadow:none!important;flex:1;margin:0;max-height:200px!important;min-height:40px!important;outline:none!important;overflow-x:hidden!important;overflow-y:auto!important;padding:var(--p-2) 0 0!important;resize:none!important;white-space:pre-wrap;word-break:break-word}.ChatPrompt_editorMount__Phh4D .ProseMirror p.is-empty.is-editor-empty:before{color:var(--muted-foreground);content:attr(data-placeholder);float:left;height:0;pointer-events:none}.ChatPrompt_editorMount__Phh4D .ProseMirror .chat-prompt-command-chip,.ChatPrompt_editorMount__Phh4D .ProseMirror .slash-mention{align-items:center;background:var(--muted);border-radius:var(--radius-sm);display:inline-flex;font-size:.875em;line-height:1.4;padding:0 var(--p-1);-webkit-user-select:none;-moz-user-select:none;user-select:none;vertical-align:baseline;white-space:nowrap}.ChatPrompt_editorMount__Phh4D .ProseMirror .chat-prompt-command-chip{color:var(--foreground)}.ChatPrompt_submitColumn__0rY1R{align-items:center;display:flex;flex-direction:column;flex-shrink:0;justify-content:flex-end;margin-top:-4px}.ChatPrompt_submitColumn__0rY1R>button:focus{box-shadow:0 0 0 2px var(--brand-color-500)!important}.ChatPrompt_submitColumn__0rY1R>button:first-child{border:none;position:relative;transition:all .2s}.ChatPrompt_submitColumn__0rY1R>button:first-child:focus{transform:scale(1.2)}.ChatPrompt_submitColumn__0rY1R>button:first-child:before{bottom:-100%;content:\"\";left:-100%;position:absolute;right:-100%;top:-100%}.ChatPrompt_attachments__KG-fG{display:flex;flex-wrap:wrap;gap:var(--p-2);margin-bottom:var(--p-2)}.ChatPrompt_attachmentItem__QJk7J{flex:1 1 300px;max-width:300px;min-width:0}";
 var S = {"root":"ChatPrompt_root__5G5bq","composer":"ChatPrompt_composer__H3c3N","fileInput":"ChatPrompt_fileInput__xdgPn","attachButton":"ChatPrompt_attachButton__gi-qF","editorWrap":"ChatPrompt_editorWrap__Q7gat","editorMount":"ChatPrompt_editorMount__Phh4D","submitColumn":"ChatPrompt_submitColumn__0rY1R","attachments":"ChatPrompt_attachments__KG-fG","attachmentItem":"ChatPrompt_attachmentItem__QJk7J"};
 styleInject(css_248z);
 

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

@@ -0,0 +1,11 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { Button } from '../../Button/Button.js';
+import S from './AppBanner.styl.js';
+import { XIcon } from 'lucide-react';
+import cn from 'classnames';
+
+function AppBanner({ children, className, onDismiss }) {
+    return (jsxs("div", { className: cn(S.root, className), "data-slot": "app-banner", role: "status", children: [jsx("div", { className: S.message, children: children }), onDismiss && (jsx(Button, { variant: "ghost", icon: true, type: "button", onClick: onDismiss, className: S.dismiss, "aria-label": "Dismiss banner", children: jsx(XIcon, { size: 16, "aria-hidden": true }) }))] }));
+}
+
+export { AppBanner };

package/dist/esm/components/ui/Page/AppBanner/AppBanner.styl.js

@@ -0,0 +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)}}.AppBanner_root__tsEbC{align-items:center;background-color:var(--muted);box-sizing:border-box;color:var(--foreground);display:flex;flex-shrink:0;gap:var(--p-2);justify-content:center;min-height:44px;padding:var(--p-2) var(--p-4);width:100%}.AppBanner_root__tsEbC a{color:inherit;text-decoration:underline;white-space:nowrap}.AppBanner_root__tsEbC a:hover{opacity:.85}.AppBanner_message__dE5Ke{flex:1;font-size:var(--text-sm);line-height:1.25;text-align:center}.AppBanner_dismiss__-WCmr{color:inherit;flex-shrink:0;opacity:.7}.AppBanner_dismiss__-WCmr:hover{opacity:1}";
+var S = {"root":"AppBanner_root__tsEbC","message":"AppBanner_message__dE5Ke","dismiss":"AppBanner_dismiss__-WCmr"};
+styleInject(css_248z);
+
+export { S as default };

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

@@ -7,8 +7,8 @@ import S from './AppShell.styl.js';
 function AppShellMainContent({ className, bodyClassName, children, header, footer, }) {
     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, "data-slot": "app-shell", className: cn(S.root, className), ...props }));
+const AppShell = forwardRef(function AppShell({ className, children, ...props }, ref) {
+    return (jsx("div", { ref: ref, "data-slot": "app-shell", className: cn(S.root, className), ...props, children: children }));
 });
 
 export { AppShell, AppShellMainContent };

package/dist/esm/components/ui/Sidebar/Sidebar.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)}}.Sidebar_sidebarWrapper__DGm4P{align-items:stretch;display:flex;flex-direction:row;--welcome-alert-height:44px;height:calc(100% - 44px);height:calc(100% - var(--welcome-alert-height));min-height:0;width:100%}.Sidebar_sidebarWrapper__DGm4P #page-sidebar-actions{min-height:100%}@media (max-width:768px){.Sidebar_sidebarWrapper__DGm4P{flex-direction:column;height:100dvh;max-height:100dvh}}.Sidebar_sidebarMainShell__pSWDC{display:flex;flex:1;flex-direction:column;min-height:0;min-width:0}.Sidebar_chatPanelMount__1Zctx{background:var(--background);border-left:1px solid var(--border);flex:0 0 0px;flex:0 0 var(--chat-panel-width,0px);min-height:0;min-width:0;overflow:hidden;width:0;width:var(--chat-panel-width,0)}@media (max-width:768px){.Sidebar_chatPanelMount__1Zctx{border-left:none;border-top:1px solid var(--border);flex:0 0 0px;flex:0 0 var(--chat-panel-height,0px);height:0;height:var(--chat-panel-height,0);transition:flex-basis .2s ease,height .2s ease;width:100%}}.Sidebar_sidebar__0vqNZ{height:0;position:fixed;--top-offset:-10px;--gap-top:calc(var(--header-height) + var(--top-offset));align-self:flex-start;color:var(--sidebar-foreground);display:none;flex-direction:column;top:var(--gap-top);width:var(--sidebar-width)}@media (min-width:768px){.Sidebar_sidebar__0vqNZ[data-state=expanded]{display:flex;height:calc(100% - var(--gap-top));min-height:0}}.Sidebar_sidebar__0vqNZ[data-collapsible=offcanvas]{overflow:hidden;padding:0;width:0}.Sidebar_sidebarTrigger__ipx2C{cursor:pointer;height:var(--p-5);width:var(--p-5)}.Sidebar_sidebarTrigger__ipx2C svg{height:20px;width:20px}.Sidebar_sidebarRail__uvSpl{position:absolute;inset-y:0;display:hidden;transition:all ease-out;width:1rem;z-index:20}.Sidebar_sidebarRail__uvSpl:hover:after{background-color:var(--sidebar-border)}.Sidebar_sidebarRail__uvSpl[data-side=left]{right:-1rem}.Sidebar_sidebarRail__uvSpl[data-side=right]{left:0}.Sidebar_sidebarRail__uvSpl:after{content:\"\";position:absolute;inset-y:0;left:50%;width:2px}@media (min-width:640px){.Sidebar_sidebarRail__uvSpl{display:flex}}.Sidebar_sidebarRail__uvSpl[data-side=left]{cursor:w-resize}.Sidebar_sidebarRail__uvSpl[data-side=left][data-state=collapsed],.Sidebar_sidebarRail__uvSpl[data-side=right]{cursor:e-resize}.Sidebar_sidebarRail__uvSpl[data-side=right][data-state=collapsed]{cursor:w-resize}.Sidebar_sidebarRail__uvSpl[data-collapsible=offcanvas]{transform:translateX(0)}.Sidebar_sidebarRail__uvSpl[data-collapsible=offcanvas]:hover{background-color:var(--sidebar)}.Sidebar_sidebarRail__uvSpl[data-collapsible=offcanvas]:after{left:100%}.Sidebar_sidebarRail__uvSpl[data-side=left][data-collapsible=offcanvas]{right:-.5rem}.Sidebar_sidebarRail__uvSpl[data-side=right][data-collapsible=offcanvas]{left:-.5rem}.Sidebar_sidebarResizeHandle__kuD6t{background-color:transparent;background-color:var(--page-color);border-radius:2.5px;height:calc(100vh + 200px);opacity:0;position:absolute;top:-200px;touch-action:none;transition:opacity .15s ease-out;-webkit-user-select:none;-moz-user-select:none;user-select:none;width:5px;z-index:30}.Sidebar_sidebarResizeHandle__kuD6t:before{content:\"\";cursor:col-resize;height:100%;position:absolute;right:0;width:30px}.Sidebar_sidebarResizeHandle__kuD6t[data-side=left]{right:2px}.Sidebar_sidebarResizeHandle__kuD6t[data-side=right]{left:0}.Sidebar_sidebarResizeHandle__kuD6t:hover{opacity:1}.Sidebar_sidebarResizeHandle__kuD6t:active{opacity:0}.Sidebar_fullHeightResizer__jZXnw .Sidebar_sidebarResizeHandle__kuD6t{height:calc(100vh - var(--gap-top)*-1);top:-80px}.Sidebar_sidebarInput__ujQLX{background-color:var(--background);box-shadow:none;height:2rem;width:100%}.Sidebar_sidebarFooter__V3O-l,.Sidebar_sidebarHeader__X33ii{display:flex;flex-direction:column;gap:0;padding:0}.Sidebar_sidebarSeparator__oUkYG{background-color:var(--sidebar-border);margin-left:0;margin-right:0;width:auto}.Sidebar_sidebarContent__Ywe1o{display:flex;flex:1;flex-direction:column;gap:var(--p-16);height:100vh;max-height:100%;min-height:0;overflow:auto;position:absolute;width:100%}@media (min-width:768px){.Sidebar_sidebarContent__Ywe1o{height:calc(100vh - var(--gap-top))}}.Sidebar_sidebarContent__Ywe1o[data-collapsible=icon]{overflow:hidden}.Sidebar_sidebarGroup__7Mhg2{display:flex;flex-direction:column;min-width:0;padding:40px 0 0;position:relative;width:100%}.Sidebar_sidebarGroupAction__OhVZq{align-items:center;aspect-ratio:1;border-radius:.375rem;color:var(--sidebar-foreground);display:flex;justify-content:center;outline:none;padding:0;position:absolute;right:.75rem;top:.875rem;transition:transform;width:1.25rem}.Sidebar_sidebarGroupAction__OhVZq:hover{background-color:var(--sidebar-accent);color:var(--sidebar-accent-foreground)}.Sidebar_sidebarGroupAction__OhVZq:focus-visible{box-shadow:0 0 0 2px var(--sidebar-ring)}.Sidebar_sidebarGroupAction__OhVZq>svg{flex-shrink:0;height:1rem;width:1rem}.Sidebar_sidebarGroupAction__OhVZq:after{content:\"\";inset:-.5rem;position:absolute}@media (min-width:768px){.Sidebar_sidebarGroupAction__OhVZq:after{display:none}}.Sidebar_sidebarGroupAction__OhVZq[data-collapsible=icon]{display:none}.Sidebar_sidebarMenu__hYXIo{display:flex;flex-direction:column;gap:var(--p-4);list-style:none;min-width:0;padding:0 var(--p-11) var(--p-10) var(--p-8);width:100%}@media (max-width:768px){.Sidebar_sidebarMenu__hYXIo{padding-right:var(--p-8)}}.Sidebar_sidebarMenuItem__CRhM8{cursor:pointer;position:relative}.Sidebar_sidebarMenuBadge__ttvCR{align-items:center;border-radius:.375rem;color:var(--sidebar-foreground);display:flex;font-size:.75rem;font-weight:500;height:1.25rem;justify-content:center;min-width:1.25rem;padding-left:.25rem;padding-right:.25rem;pointer-events:none;position:absolute;right:.25rem;-webkit-user-select:none;-moz-user-select:none;user-select:none}.Sidebar_sidebarMenuBadge__ttvCR[data-size=sm]{top:.25rem}.Sidebar_sidebarMenuBadge__ttvCR[data-size=md]{top:.375rem}.Sidebar_sidebarMenuBadge__ttvCR[data-size=lg]{top:.625rem}.Sidebar_sidebarMenuBadge__ttvCR[data-collapsible=icon]{display:none}.Sidebar_sidebarMenuSkeleton__u2KoI{align-items:center;border-radius:.375rem;display:flex;gap:.5rem;height:2rem;padding-left:.5rem;padding-right:.5rem}.Sidebar_sidebarMenuSkeletonIcon__-1tvv{border-radius:.375rem;height:1rem;width:1rem}.Sidebar_sidebarMenuSkeletonText__dWzWo{flex:1;height:1rem;max-width:var(--skeleton-width)}.Sidebar_sidebarMenuSub__gh8Rn{border-color:var(--sidebar-border);border-left:none;display:flex;flex-direction:column;gap:var(--p-2);list-style:none;margin-left:0;margin-right:0;min-width:0;padding:0;padding-top:var(--p-1);position:relative;transform:translateX(1px)}.Sidebar_sidebarMenuSub__gh8Rn:before{background:var(--sidebar-border);bottom:26px;content:\"\";left:var(--p-5);pointer-events:none;position:absolute;top:0;width:1px}.Sidebar_sidebarMenuSub__gh8Rn[data-collapsible=icon]{display:none}.Sidebar_sidebarMenuSubItem__fTHJa{margin-left:var(--p-6);position:relative}.Sidebar_sidebarMenuSubItem__fTHJa:before{border-bottom:1px solid var(--sidebar-border);border-bottom-left-radius:var(--p-2);border-left:1px solid var(--sidebar-border);bottom:0;content:\"\";height:var(--p-3);left:calc(var(--p-1)*-1);position:absolute;top:var(--p-2);width:var(--p-3)}.Sidebar_sidebarMenuSubItem__fTHJa a:hover{text-decoration:none}.Sidebar_sheetContentSidebar__cM2h2{color:var(--sidebar-foreground);padding:0;width:var(--sidebar-width)}.Sidebar_sheetContentSidebar__cM2h2>button{display:none}@media (max-width:768px){.Sidebar_sheetContentSidebar__cM2h2{z-index:100}}.Sidebar_sheetSidebarInner__U-SMQ{background-color:var(--sidebar);display:flex;flex-direction:column;height:100%;width:100%}.Sidebar_sidebarNone__crRsF{color:var(--sidebar-foreground);display:flex;flex-direction:column;height:100%;width:var(--sidebar-width)}.Sidebar_variant-floating__-qvkJ{padding:.5rem}.Sidebar_variant-floating__-qvkJ[data-collapsible=icon],.Sidebar_variant-inset__oTfrV[data-collapsible=icon]{width:calc(var(--sidebar-width-icon) + 1rem + 2px)}.Sidebar_variant-sidebar__fAe77[data-collapsible=icon]{width:var(--sidebar-width-icon)}.Sidebar_variant-sidebar__fAe77[data-side=left]{border-right:1px solid #e5e7eb}.Sidebar_variant-sidebar__fAe77[data-side=right]{border-left:1px solid #e5e7eb}.Sidebar_sidebarMenuButton__vIEh->span,.Sidebar_sidebarMenuSubButton__c9flh>span{min-width:0;text-transform:capitalize}.Sidebar_sidebarMenuButton__vIEh->span:first-child,.Sidebar_sidebarMenuSubButton__c9flh>span:first-child{flex-grow:1}.Sidebar_sidebarMenuButton__vIEh-{align-items:center;border-radius:var(--p-3);color:var(--sidebar-foreground);cursor:pointer;display:flex;font-size:.875rem;gap:var(--p-2);justify-content:flex-start;outline:none;overflow:hidden;padding:var(--p-6) var(--p-3);text-align:left;text-decoration:none;transition:all;width:100%}.Sidebar_sidebarMenuButton__vIEh-:visited{color:var(--sidebar-foreground)}.Sidebar_sidebarMenuButton__vIEh-:hover{text-decoration:none}.Sidebar_sidebarMenuSubItem__fTHJa:active .Sidebar_sidebarMenuButton__vIEh-,.Sidebar_sidebarMenuSubItem__fTHJa:hover .Sidebar_sidebarMenuButton__vIEh-,.Sidebar_sidebarMenuSubItem__fTHJa[data-state=open] .Sidebar_sidebarMenuButton__vIEh-{background-color:var(--sidebar-accent);color:var(--sidebar-accent-foreground)}.Sidebar_sidebarMenuButton__vIEh-:focus-visible{box-shadow:0 0 0 2px var(--sidebar-ring)}.Sidebar_sidebarMenuButton__vIEh-:disabled,.Sidebar_sidebarMenuButton__vIEh-[aria-disabled=true]{opacity:.5;pointer-events:none}.Sidebar_sidebarMenuButton__vIEh-[data-active=true]{background-color:var(--sidebar-accent);color:var(--sidebar-accent-foreground);font-weight:500}.Sidebar_sidebarMenuButton__vIEh-[data-collapsible=icon]{height:2rem!important;padding:.5rem!important;width:2rem!important}.Sidebar_sidebarMenuButton__vIEh->span{flex-grow:1;line-height:20px;overflow:hidden;white-space:nowrap}.Sidebar_sidebarMenuButton__vIEh->svg{flex-shrink:0;height:var(--p-5);width:var(--p-5)}.Sidebar_sidebarMenuButton__vIEh-.Sidebar_size-sm__7aIbu{font-size:.75rem;height:1.75rem}.Sidebar_sidebarMenuButton__vIEh-.Sidebar_size-md__rcjmO{font-size:.875rem;height:var(--p-12)}.Sidebar_sidebarMenuButton__vIEh-.Sidebar_size-lg__1k76S{font-size:.875rem;height:3rem}.Sidebar_sidebarMenuButton__vIEh-.Sidebar_size-lg__1k76S[data-collapsible=icon]{padding:0!important}.Sidebar_sidebarMenuButton__vIEh-.Sidebar_variant-outline__UmtAz{background-color:var(--background);box-shadow:0 0 0 1px var(--sidebar-border)}.Sidebar_sidebarMenuButton__vIEh-.Sidebar_variant-outline__UmtAz:hover{background-color:var(--sidebar-accent);box-shadow:0 0 0 1px var(--sidebar-accent);color:var(--sidebar-accent-foreground)}.Sidebar_sidebarMenuButtonCta__dQAhv{display:flex;justify-content:flex-start;text-align:left;width:100%}.Sidebar_sidebarMenuButtonCta__dQAhv>svg{flex-shrink:0;height:var(--p-5);width:var(--p-5)}.Sidebar_sidebarMenuAction__mFZa1{align-items:center;aspect-ratio:1;border-radius:.375rem;color:var(--sidebar-foreground);cursor:pointer;display:flex;justify-content:center;opacity:0;outline:none;padding:0;position:absolute;right:var(--p-2);top:var(--p-2);transition:transform;width:1.25rem}.Sidebar_sidebarMenuAction__mFZa1:before{background-image:linear-gradient(to left,var(--sidebar-accent) 70%,transparent 100%);content:\"\";height:100%;pointer-events:none;position:absolute;right:0;transition:opacity .2s ease-in-out;width:calc(100% + var(--p-4))}.Sidebar_sidebarMenuSubItem__fTHJa:hover .Sidebar_sidebarMenuAction__mFZa1{opacity:1}.Sidebar_sidebarMenuAction__mFZa1:focus-visible{box-shadow:0 0 0 2px var(--sidebar-ring)}.Sidebar_sidebarMenuAction__mFZa1>svg{flex-shrink:0;height:1rem;opacity:.5;pointer-events:none;transition:opacity .2s ease-in-out;width:1rem;z-index:1}.Sidebar_sidebarMenuAction__mFZa1:hover>svg{opacity:1}.Sidebar_sidebarMenuAction__mFZa1:after{content:\"\";inset:-.5rem;position:absolute}@media (min-width:768px){.Sidebar_sidebarMenuAction__mFZa1:after{display:none}}.Sidebar_sidebarMenuAction__mFZa1[data-size=sm]{top:.25rem}.Sidebar_sidebarMenuAction__mFZa1[data-size=md]{top:.375rem}.Sidebar_sidebarMenuAction__mFZa1[data-size=lg]{top:.625rem}.Sidebar_sidebarMenuAction__mFZa1[data-collapsible=icon]{display:none}.Sidebar_sidebarMenuAction__mFZa1.Sidebar_showOnHover__itXsA[data-active=true]{color:var(--sidebar-accent-foreground)}.Sidebar_sidebarMenuAction__mFZa1.Sidebar_showOnHover__itXsA[data-state=open]{opacity:1}@media (min-width:768px){.Sidebar_sidebarMenuAction__mFZa1.Sidebar_showOnHover__itXsA{opacity:0}.Sidebar_sidebarMenuAction__mFZa1.Sidebar_showOnHover__itXsA:focus-within,.Sidebar_sidebarMenuAction__mFZa1.Sidebar_showOnHover__itXsA:hover{opacity:1}}.Sidebar_sidebarMenuSubButton__c9flh{align-items:center;border-radius:var(--p-3);color:var(--sidebar-foreground);cursor:pointer;display:flex;gap:var(--p-1);height:var(--p-9);margin-left:var(--p-3);min-width:0;outline:none;overflow:hidden;padding:var(--p-1) var(--p-2);text-decoration:none;transform:translateX(-1px)}.Sidebar_sidebarMenuSubButton__c9flh:visited{color:var(--sidebar-foreground)}.Sidebar_sidebarMenuSubButton__c9flh:hover{text-decoration:none}.Sidebar_sidebarMenuSubItem__fTHJa:active .Sidebar_sidebarMenuSubButton__c9flh,.Sidebar_sidebarMenuSubItem__fTHJa:hover .Sidebar_sidebarMenuSubButton__c9flh{background-color:var(--sidebar-accent);color:var(--sidebar-accent-foreground)}.Sidebar_sidebarMenuSubButton__c9flh:focus-visible{box-shadow:0 0 0 2px var(--sidebar-ring)}.Sidebar_sidebarMenuSubButton__c9flh:disabled,.Sidebar_sidebarMenuSubButton__c9flh[aria-disabled=true]{opacity:.5;pointer-events:none}.Sidebar_sidebarMenuSubButton__c9flh[data-active=true]{background-color:var(--sidebar-accent);color:var(--sidebar-accent-foreground)}.Sidebar_sidebarMenuSubButton__c9flh[data-active=true]:visited{color:var(--sidebar-accent-foreground)}.Sidebar_sidebarMenuSubButton__c9flh[data-collapsible=icon]{display:none}.Sidebar_sidebarMenuSubButton__c9flh>span:first-child{overflow:hidden;white-space:nowrap}.Sidebar_sidebarMenuSubButton__c9flh>svg{color:var(--sidebar-accent-foreground);flex-shrink:0;height:1rem;width:1rem}.Sidebar_sidebarMenuSubButton__c9flh.Sidebar_size-sm__7aIbu{font-size:.75rem}.Sidebar_sidebarMenuSubButton__c9flh.Sidebar_size-md__rcjmO{font-size:.875rem}.Sidebar_sidebarMenuSubButton__c9flh.Sidebar_size-lg__1k76S{font-size:1rem}::view-transition-old(sidebar-container),::view-transition-old(sidebar-gap){animation-duration:.2s;animation-name:Sidebar_sidebarVtOld__hlKqn;animation-timing-function:ease-out;transform:translateZ(0)}::view-transition-new(sidebar-container),::view-transition-new(sidebar-gap){animation-duration:.2s;animation-name:Sidebar_sidebarVtNew__FFhYU;animation-timing-function:ease-out;transform:translateZ(0)}@keyframes Sidebar_sidebarVtOld__hlKqn{0%{opacity:1}to{opacity:0}}@keyframes Sidebar_sidebarVtNew__FFhYU{0%{opacity:0}to{opacity:1}}";
+var css_248z = "@media (max-width:768px){:root{--page-x-padding:var(--p-6);--page-y-padding:var(--p-6)}}.Sidebar_sidebarWrapper__DGm4P{align-items:stretch;display:flex;flex-direction:row;height:100%;min-height:0;width:100%}.Sidebar_sidebarWrapper__DGm4P #page-sidebar-actions{min-height:100%}@media (max-width:768px){.Sidebar_sidebarWrapper__DGm4P{flex-direction:column;height:100dvh;max-height:100dvh}}.Sidebar_sidebarMainShell__pSWDC{display:flex;flex:1;flex-direction:column;min-height:0;min-width:0}.Sidebar_chatPanelMount__1Zctx{background:var(--background);border-left:1px solid var(--border);flex:0 0 0px;flex:0 0 var(--chat-panel-width,0px);min-height:0;min-width:0;overflow:hidden;width:0;width:var(--chat-panel-width,0)}@media (max-width:768px){.Sidebar_chatPanelMount__1Zctx{border-left:none;border-top:1px solid var(--border);flex:0 0 0px;flex:0 0 var(--chat-panel-height,0px);height:0;height:var(--chat-panel-height,0);transition:flex-basis .2s ease,height .2s ease;width:100%}}.Sidebar_sidebar__0vqNZ{height:0;position:fixed;--top-offset:-10px;--gap-top:calc(var(--header-height) + var(--top-offset));align-self:flex-start;color:var(--sidebar-foreground);display:none;flex-direction:column;top:calc(var(--gap-top));top:calc(var(--gap-top) + var(--app-banner-height, 0px));width:var(--sidebar-width)}@media (min-width:768px){.Sidebar_sidebar__0vqNZ[data-state=expanded]{display:flex;height:calc(100vh - var(--gap-top));height:calc(100vh - var(--gap-top) - var(--app-banner-height, 0px));min-height:0}}.Sidebar_sidebar__0vqNZ[data-collapsible=offcanvas]{overflow:hidden;padding:0;width:0}.Sidebar_sidebarTrigger__ipx2C{cursor:pointer;height:var(--p-5);width:var(--p-5)}.Sidebar_sidebarTrigger__ipx2C svg{height:20px;width:20px}.Sidebar_sidebarRail__uvSpl{position:absolute;inset-y:0;display:hidden;transition:all ease-out;width:1rem;z-index:20}.Sidebar_sidebarRail__uvSpl:hover:after{background-color:var(--sidebar-border)}.Sidebar_sidebarRail__uvSpl[data-side=left]{right:-1rem}.Sidebar_sidebarRail__uvSpl[data-side=right]{left:0}.Sidebar_sidebarRail__uvSpl:after{content:\"\";position:absolute;inset-y:0;left:50%;width:2px}@media (min-width:640px){.Sidebar_sidebarRail__uvSpl{display:flex}}.Sidebar_sidebarRail__uvSpl[data-side=left]{cursor:w-resize}.Sidebar_sidebarRail__uvSpl[data-side=left][data-state=collapsed],.Sidebar_sidebarRail__uvSpl[data-side=right]{cursor:e-resize}.Sidebar_sidebarRail__uvSpl[data-side=right][data-state=collapsed]{cursor:w-resize}.Sidebar_sidebarRail__uvSpl[data-collapsible=offcanvas]{transform:translateX(0)}.Sidebar_sidebarRail__uvSpl[data-collapsible=offcanvas]:hover{background-color:var(--sidebar)}.Sidebar_sidebarRail__uvSpl[data-collapsible=offcanvas]:after{left:100%}.Sidebar_sidebarRail__uvSpl[data-side=left][data-collapsible=offcanvas]{right:-.5rem}.Sidebar_sidebarRail__uvSpl[data-side=right][data-collapsible=offcanvas]{left:-.5rem}.Sidebar_sidebarResizeHandle__kuD6t{background-color:transparent;background-color:var(--page-color);border-radius:2.5px;height:calc(100vh + 200px);height:calc(100vh + 200px - var(--app-banner-height, 0px));opacity:0;position:absolute;top:-200px;touch-action:none;transition:opacity .15s ease-out;-webkit-user-select:none;-moz-user-select:none;user-select:none;width:5px;z-index:30}.Sidebar_sidebarResizeHandle__kuD6t:before{content:\"\";cursor:col-resize;height:100%;position:absolute;right:0;width:30px}.Sidebar_sidebarResizeHandle__kuD6t[data-side=left]{right:2px}.Sidebar_sidebarResizeHandle__kuD6t[data-side=right]{left:0}.Sidebar_sidebarResizeHandle__kuD6t:hover{opacity:1}.Sidebar_sidebarResizeHandle__kuD6t:active{opacity:0}.Sidebar_fullHeightResizer__jZXnw .Sidebar_sidebarResizeHandle__kuD6t{height:calc(100vh - var(--gap-top)*-1);height:calc(100vh - var(--gap-top)*-1 - var(--app-banner-height, 0px));top:-80px}.Sidebar_sidebarInput__ujQLX{background-color:var(--background);box-shadow:none;height:2rem;width:100%}.Sidebar_sidebarFooter__V3O-l,.Sidebar_sidebarHeader__X33ii{display:flex;flex-direction:column;gap:0;padding:0}.Sidebar_sidebarSeparator__oUkYG{background-color:var(--sidebar-border);margin-left:0;margin-right:0;width:auto}.Sidebar_sidebarContent__Ywe1o{display:flex;flex:1;flex-direction:column;gap:var(--p-16);height:100vh;max-height:100%;min-height:0;overflow:auto;position:absolute;width:100%}@media (min-width:768px){.Sidebar_sidebarContent__Ywe1o{height:calc(100vh - var(--gap-top));height:calc(100vh - var(--gap-top) - var(--app-banner-height, 0px))}}.Sidebar_sidebarContent__Ywe1o[data-collapsible=icon]{overflow:hidden}.Sidebar_sidebarGroup__7Mhg2{display:flex;flex-direction:column;min-width:0;padding:40px 0 0;position:relative;width:100%}.Sidebar_sidebarGroupAction__OhVZq{align-items:center;aspect-ratio:1;border-radius:.375rem;color:var(--sidebar-foreground);display:flex;justify-content:center;outline:none;padding:0;position:absolute;right:.75rem;top:.875rem;transition:transform;width:1.25rem}.Sidebar_sidebarGroupAction__OhVZq:hover{background-color:var(--sidebar-accent);color:var(--sidebar-accent-foreground)}.Sidebar_sidebarGroupAction__OhVZq:focus-visible{box-shadow:0 0 0 2px var(--sidebar-ring)}.Sidebar_sidebarGroupAction__OhVZq>svg{flex-shrink:0;height:1rem;width:1rem}.Sidebar_sidebarGroupAction__OhVZq:after{content:\"\";inset:-.5rem;position:absolute}@media (min-width:768px){.Sidebar_sidebarGroupAction__OhVZq:after{display:none}}.Sidebar_sidebarGroupAction__OhVZq[data-collapsible=icon]{display:none}.Sidebar_sidebarMenu__hYXIo{display:flex;flex-direction:column;gap:var(--p-4);list-style:none;min-width:0;padding:0 var(--p-11) var(--p-10) var(--p-8);width:100%}@media (max-width:768px){.Sidebar_sidebarMenu__hYXIo{padding-right:var(--p-8)}}.Sidebar_sidebarMenuItem__CRhM8{cursor:pointer;position:relative}.Sidebar_sidebarMenuBadge__ttvCR{align-items:center;border-radius:.375rem;color:var(--sidebar-foreground);display:flex;font-size:.75rem;font-weight:500;height:1.25rem;justify-content:center;min-width:1.25rem;padding-left:.25rem;padding-right:.25rem;pointer-events:none;position:absolute;right:.25rem;-webkit-user-select:none;-moz-user-select:none;user-select:none}.Sidebar_sidebarMenuBadge__ttvCR[data-size=sm]{top:.25rem}.Sidebar_sidebarMenuBadge__ttvCR[data-size=md]{top:.375rem}.Sidebar_sidebarMenuBadge__ttvCR[data-size=lg]{top:.625rem}.Sidebar_sidebarMenuBadge__ttvCR[data-collapsible=icon]{display:none}.Sidebar_sidebarMenuSkeleton__u2KoI{align-items:center;border-radius:.375rem;display:flex;gap:.5rem;height:2rem;padding-left:.5rem;padding-right:.5rem}.Sidebar_sidebarMenuSkeletonIcon__-1tvv{border-radius:.375rem;height:1rem;width:1rem}.Sidebar_sidebarMenuSkeletonText__dWzWo{flex:1;height:1rem;max-width:var(--skeleton-width)}.Sidebar_sidebarMenuSub__gh8Rn{border-color:var(--sidebar-border);border-left:none;display:flex;flex-direction:column;gap:var(--p-2);list-style:none;margin-left:0;margin-right:0;min-width:0;padding:0;padding-top:var(--p-1);position:relative;transform:translateX(1px)}.Sidebar_sidebarMenuSub__gh8Rn:before{background:var(--sidebar-border);bottom:26px;content:\"\";left:var(--p-5);pointer-events:none;position:absolute;top:0;width:1px}.Sidebar_sidebarMenuSub__gh8Rn[data-collapsible=icon]{display:none}.Sidebar_sidebarMenuSubItem__fTHJa{margin-left:var(--p-6);position:relative}.Sidebar_sidebarMenuSubItem__fTHJa:before{border-bottom:1px solid var(--sidebar-border);border-bottom-left-radius:var(--p-2);border-left:1px solid var(--sidebar-border);bottom:0;content:\"\";height:var(--p-3);left:calc(var(--p-1)*-1);position:absolute;top:var(--p-2);width:var(--p-3)}.Sidebar_sidebarMenuSubItem__fTHJa a:hover{text-decoration:none}.Sidebar_sheetContentSidebar__cM2h2{color:var(--sidebar-foreground);padding:0;width:var(--sidebar-width)}.Sidebar_sheetContentSidebar__cM2h2>button{display:none}@media (max-width:768px){.Sidebar_sheetContentSidebar__cM2h2{z-index:100}}.Sidebar_sheetSidebarInner__U-SMQ{background-color:var(--sidebar);display:flex;flex-direction:column;height:100%;width:100%}.Sidebar_sidebarNone__crRsF{color:var(--sidebar-foreground);display:flex;flex-direction:column;height:100%;width:var(--sidebar-width)}.Sidebar_variant-floating__-qvkJ{padding:.5rem}.Sidebar_variant-floating__-qvkJ[data-collapsible=icon],.Sidebar_variant-inset__oTfrV[data-collapsible=icon]{width:calc(var(--sidebar-width-icon) + 1rem + 2px)}.Sidebar_variant-sidebar__fAe77[data-collapsible=icon]{width:var(--sidebar-width-icon)}.Sidebar_variant-sidebar__fAe77[data-side=left]{border-right:1px solid #e5e7eb}.Sidebar_variant-sidebar__fAe77[data-side=right]{border-left:1px solid #e5e7eb}.Sidebar_sidebarMenuButton__vIEh->span,.Sidebar_sidebarMenuSubButton__c9flh>span{min-width:0;text-transform:capitalize}.Sidebar_sidebarMenuButton__vIEh->span:first-child,.Sidebar_sidebarMenuSubButton__c9flh>span:first-child{flex-grow:1}.Sidebar_sidebarMenuButton__vIEh-{align-items:center;border-radius:var(--p-3);color:var(--sidebar-foreground);cursor:pointer;display:flex;font-size:.875rem;gap:var(--p-2);justify-content:flex-start;outline:none;overflow:hidden;padding:var(--p-6) var(--p-3);text-align:left;text-decoration:none;transition:all;width:100%}.Sidebar_sidebarMenuButton__vIEh-:visited{color:var(--sidebar-foreground)}.Sidebar_sidebarMenuButton__vIEh-:hover{text-decoration:none}.Sidebar_sidebarMenuSubItem__fTHJa:active .Sidebar_sidebarMenuButton__vIEh-,.Sidebar_sidebarMenuSubItem__fTHJa:hover .Sidebar_sidebarMenuButton__vIEh-,.Sidebar_sidebarMenuSubItem__fTHJa[data-state=open] .Sidebar_sidebarMenuButton__vIEh-{background-color:var(--sidebar-accent);color:var(--sidebar-accent-foreground)}.Sidebar_sidebarMenuButton__vIEh-:focus-visible{box-shadow:0 0 0 2px var(--sidebar-ring)}.Sidebar_sidebarMenuButton__vIEh-:disabled,.Sidebar_sidebarMenuButton__vIEh-[aria-disabled=true]{opacity:.5;pointer-events:none}.Sidebar_sidebarMenuButton__vIEh-[data-active=true]{background-color:var(--sidebar-accent);color:var(--sidebar-accent-foreground);font-weight:500}.Sidebar_sidebarMenuButton__vIEh-[data-collapsible=icon]{height:2rem!important;padding:.5rem!important;width:2rem!important}.Sidebar_sidebarMenuButton__vIEh->span{flex-grow:1;line-height:20px;overflow:hidden;white-space:nowrap}.Sidebar_sidebarMenuButton__vIEh->svg{flex-shrink:0;height:var(--p-5);width:var(--p-5)}.Sidebar_sidebarMenuButton__vIEh-.Sidebar_size-sm__7aIbu{font-size:.75rem;height:1.75rem}.Sidebar_sidebarMenuButton__vIEh-.Sidebar_size-md__rcjmO{font-size:.875rem;height:var(--p-12)}.Sidebar_sidebarMenuButton__vIEh-.Sidebar_size-lg__1k76S{font-size:.875rem;height:3rem}.Sidebar_sidebarMenuButton__vIEh-.Sidebar_size-lg__1k76S[data-collapsible=icon]{padding:0!important}.Sidebar_sidebarMenuButton__vIEh-.Sidebar_variant-outline__UmtAz{background-color:var(--background);box-shadow:0 0 0 1px var(--sidebar-border)}.Sidebar_sidebarMenuButton__vIEh-.Sidebar_variant-outline__UmtAz:hover{background-color:var(--sidebar-accent);box-shadow:0 0 0 1px var(--sidebar-accent);color:var(--sidebar-accent-foreground)}.Sidebar_sidebarMenuButtonCta__dQAhv{display:flex;justify-content:flex-start;text-align:left;width:100%}.Sidebar_sidebarMenuButtonCta__dQAhv>svg{flex-shrink:0;height:var(--p-5);width:var(--p-5)}.Sidebar_sidebarMenuAction__mFZa1{align-items:center;aspect-ratio:1;border-radius:.375rem;color:var(--sidebar-foreground);cursor:pointer;display:flex;justify-content:center;opacity:0;outline:none;padding:0;position:absolute;right:var(--p-2);top:var(--p-2);transition:transform;width:1.25rem}.Sidebar_sidebarMenuAction__mFZa1:before{background-image:linear-gradient(to left,var(--sidebar-accent) 70%,transparent 100%);content:\"\";height:100%;pointer-events:none;position:absolute;right:0;transition:opacity .2s ease-in-out;width:calc(100% + var(--p-4))}.Sidebar_sidebarMenuSubItem__fTHJa:hover .Sidebar_sidebarMenuAction__mFZa1{opacity:1}.Sidebar_sidebarMenuAction__mFZa1:focus-visible{box-shadow:0 0 0 2px var(--sidebar-ring)}.Sidebar_sidebarMenuAction__mFZa1>svg{flex-shrink:0;height:1rem;opacity:.5;pointer-events:none;transition:opacity .2s ease-in-out;width:1rem;z-index:1}.Sidebar_sidebarMenuAction__mFZa1:hover>svg{opacity:1}.Sidebar_sidebarMenuAction__mFZa1:after{content:\"\";inset:-.5rem;position:absolute}@media (min-width:768px){.Sidebar_sidebarMenuAction__mFZa1:after{display:none}}.Sidebar_sidebarMenuAction__mFZa1[data-size=sm]{top:.25rem}.Sidebar_sidebarMenuAction__mFZa1[data-size=md]{top:.375rem}.Sidebar_sidebarMenuAction__mFZa1[data-size=lg]{top:.625rem}.Sidebar_sidebarMenuAction__mFZa1[data-collapsible=icon]{display:none}.Sidebar_sidebarMenuAction__mFZa1.Sidebar_showOnHover__itXsA[data-active=true]{color:var(--sidebar-accent-foreground)}.Sidebar_sidebarMenuAction__mFZa1.Sidebar_showOnHover__itXsA[data-state=open]{opacity:1}@media (min-width:768px){.Sidebar_sidebarMenuAction__mFZa1.Sidebar_showOnHover__itXsA{opacity:0}.Sidebar_sidebarMenuAction__mFZa1.Sidebar_showOnHover__itXsA:focus-within,.Sidebar_sidebarMenuAction__mFZa1.Sidebar_showOnHover__itXsA:hover{opacity:1}}.Sidebar_sidebarMenuSubButton__c9flh{align-items:center;border-radius:var(--p-3);color:var(--sidebar-foreground);cursor:pointer;display:flex;gap:var(--p-1);height:var(--p-9);margin-left:var(--p-3);min-width:0;outline:none;overflow:hidden;padding:var(--p-1) var(--p-2);text-decoration:none;transform:translateX(-1px)}.Sidebar_sidebarMenuSubButton__c9flh:visited{color:var(--sidebar-foreground)}.Sidebar_sidebarMenuSubButton__c9flh:hover{text-decoration:none}.Sidebar_sidebarMenuSubItem__fTHJa:active .Sidebar_sidebarMenuSubButton__c9flh,.Sidebar_sidebarMenuSubItem__fTHJa:hover .Sidebar_sidebarMenuSubButton__c9flh{background-color:var(--sidebar-accent);color:var(--sidebar-accent-foreground)}.Sidebar_sidebarMenuSubButton__c9flh:focus-visible{box-shadow:0 0 0 2px var(--sidebar-ring)}.Sidebar_sidebarMenuSubButton__c9flh:disabled,.Sidebar_sidebarMenuSubButton__c9flh[aria-disabled=true]{opacity:.5;pointer-events:none}.Sidebar_sidebarMenuSubButton__c9flh[data-active=true]{background-color:var(--sidebar-accent);color:var(--sidebar-accent-foreground)}.Sidebar_sidebarMenuSubButton__c9flh[data-active=true]:visited{color:var(--sidebar-accent-foreground)}.Sidebar_sidebarMenuSubButton__c9flh[data-collapsible=icon]{display:none}.Sidebar_sidebarMenuSubButton__c9flh>span:first-child{overflow:hidden;white-space:nowrap}.Sidebar_sidebarMenuSubButton__c9flh>svg{color:var(--sidebar-accent-foreground);flex-shrink:0;height:1rem;width:1rem}.Sidebar_sidebarMenuSubButton__c9flh.Sidebar_size-sm__7aIbu{font-size:.75rem}.Sidebar_sidebarMenuSubButton__c9flh.Sidebar_size-md__rcjmO{font-size:.875rem}.Sidebar_sidebarMenuSubButton__c9flh.Sidebar_size-lg__1k76S{font-size:1rem}::view-transition-old(sidebar-container),::view-transition-old(sidebar-gap){animation-duration:.2s;animation-name:Sidebar_sidebarVtOld__hlKqn;animation-timing-function:ease-out;transform:translateZ(0)}::view-transition-new(sidebar-container),::view-transition-new(sidebar-gap){animation-duration:.2s;animation-name:Sidebar_sidebarVtNew__FFhYU;animation-timing-function:ease-out;transform:translateZ(0)}@keyframes Sidebar_sidebarVtOld__hlKqn{0%{opacity:1}to{opacity:0}}@keyframes Sidebar_sidebarVtNew__FFhYU{0%{opacity:0}to{opacity:1}}";
 var SidebarStem = {"sidebarWrapper":"Sidebar_sidebarWrapper__DGm4P","sidebarMainShell":"Sidebar_sidebarMainShell__pSWDC","chatPanelMount":"Sidebar_chatPanelMount__1Zctx","sidebar":"Sidebar_sidebar__0vqNZ","sidebarTrigger":"Sidebar_sidebarTrigger__ipx2C","sidebarRail":"Sidebar_sidebarRail__uvSpl","sidebarResizeHandle":"Sidebar_sidebarResizeHandle__kuD6t","fullHeightResizer":"Sidebar_fullHeightResizer__jZXnw","sidebarInput":"Sidebar_sidebarInput__ujQLX","sidebarHeader":"Sidebar_sidebarHeader__X33ii","sidebarFooter":"Sidebar_sidebarFooter__V3O-l","sidebarSeparator":"Sidebar_sidebarSeparator__oUkYG","sidebarContent":"Sidebar_sidebarContent__Ywe1o","sidebarGroup":"Sidebar_sidebarGroup__7Mhg2","sidebarGroupAction":"Sidebar_sidebarGroupAction__OhVZq","sidebarMenu":"Sidebar_sidebarMenu__hYXIo","sidebarMenuItem":"Sidebar_sidebarMenuItem__CRhM8","sidebarMenuBadge":"Sidebar_sidebarMenuBadge__ttvCR","sidebarMenuSkeleton":"Sidebar_sidebarMenuSkeleton__u2KoI","sidebarMenuSkeletonIcon":"Sidebar_sidebarMenuSkeletonIcon__-1tvv","sidebarMenuSkeletonText":"Sidebar_sidebarMenuSkeletonText__dWzWo","sidebarMenuSub":"Sidebar_sidebarMenuSub__gh8Rn","sidebarMenuSubItem":"Sidebar_sidebarMenuSubItem__fTHJa","sheetContentSidebar":"Sidebar_sheetContentSidebar__cM2h2","sheetSidebarInner":"Sidebar_sheetSidebarInner__U-SMQ","sidebarNone":"Sidebar_sidebarNone__crRsF","variant-floating":"Sidebar_variant-floating__-qvkJ","variant-inset":"Sidebar_variant-inset__oTfrV","variant-sidebar":"Sidebar_variant-sidebar__fAe77","sidebarMenuButton":"Sidebar_sidebarMenuButton__vIEh-","sidebarMenuSubButton":"Sidebar_sidebarMenuSubButton__c9flh","size-sm":"Sidebar_size-sm__7aIbu","size-md":"Sidebar_size-md__rcjmO","size-lg":"Sidebar_size-lg__1k76S","variant-outline":"Sidebar_variant-outline__UmtAz","sidebarMenuButtonCta":"Sidebar_sidebarMenuButtonCta__dQAhv","sidebarMenuAction":"Sidebar_sidebarMenuAction__mFZa1","showOnHover":"Sidebar_showOnHover__itXsA","sidebarVtOld":"Sidebar_sidebarVtOld__hlKqn","sidebarVtNew":"Sidebar_sidebarVtNew__FFhYU"};
 styleInject(css_248z);
 

package/dist/esm/components/widgets/DriversComparisonChart/DriversComparisonChart.js

@@ -4,10 +4,13 @@ import { useState, useCallback, useMemo, useRef, useEffect } from 'react';
 import { ChartEmptyState } from '../../ui/Chart/components/ChartEmptyState/ChartEmptyState.js';
 import { ChartAreaInteractive } from '../../ui/ChartAreaInteractive/ChartAreaInteractive.js';
 import { getForecastColor } from '../../ui/ChartAreaInteractive/ChartLines.js';
+import '@radix-ui/react-slot';
+import '../../ui/Button/Button.styl.js';
+import '../../ui/Page/AppBanner/AppBanner.styl.js';
+import { InfoIcon } from 'lucide-react';
 import '../../ui/Page/AppShell/AppShell.js';
 import 'react-router-dom';
 import '../../ui/Sidebar/Sidebar.js';
-import { InfoIcon } from 'lucide-react';
 import '../../ui/Page/Breadcrumbs/Breadcrumbs.styl.js';
 import '../../ui/Page/pageContext.js';
 import { Tooltip, TooltipTrigger, TooltipContent } from '../../ui/Tooltip/Tooltip.js';

package/dist/esm/components/widgets/PerformanceChart/PerformanceTable.js

@@ -2,11 +2,12 @@ import { jsx, jsxs } from 'react/jsx-runtime';
 import React__default, { useMemo, useRef } from 'react';
 import { Button } from '../../ui/Button/Button.js';
 import { FORECAST_LINE_COLORS } from '../../ui/ChartAreaInteractive/ChartLines.js';
-import '../../ui/Page/AppShell/AppShell.js';
+import '../../ui/Page/AppBanner/AppBanner.styl.js';
+import { InfoIcon, Pencil, TableIcon } from 'lucide-react';
 import 'classnames';
+import '../../ui/Page/AppShell/AppShell.js';
 import 'react-router-dom';
 import '../../ui/Sidebar/Sidebar.js';
-import { InfoIcon, Pencil, TableIcon } from 'lucide-react';
 import '../../ui/Page/Breadcrumbs/Breadcrumbs.styl.js';
 import '../../ui/Page/pageContext.js';
 import { Tooltip, TooltipTrigger, TooltipContent } from '../../ui/Tooltip/Tooltip.js';

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

@@ -11,8 +11,8 @@ import '@phosphor-icons/react';
 import 'lucide-react';
 import S from './SybilionAppHeader.styl.js';
 
-function SybilionAppHeader({ pageHeaderId, actionsAnchorId = PAGE_HEADER_ACTIONS_ID, actionsAnchorClassName, actionsStart, actionsEnd, pathname, onNavigate, authenticated, defaultApps, appsStorageKey, logo, logoAreaClassName, welcomeBannerOffset, ...navUserHeaderProps }) {
-    return (jsxs(AppHeaderPortal, { pageHeaderId: pageHeaderId, children: [jsx("div", { className: cn(S.logoArea, welcomeBannerOffset && S.logoAreaWithBanner, logoAreaClassName), children: jsx(Link, { to: "/", className: S.logoLink, children: logo ?? jsx(Logo, { size: "md", "aria-hidden": true }) }) }), jsx(WorkspaceAppSwitcher, { pathname: pathname, onNavigate: onNavigate, authenticated: authenticated, defaultApps: defaultApps, appsStorageKey: appsStorageKey }), jsx(Gap, {}), jsxs("div", { className: cn(S.actionsAnchor, actionsAnchorClassName), children: [jsx("div", { id: actionsAnchorId, className: S.pageActionsPortal }), actionsStart, jsx(NavUserHeader, { ...navUserHeaderProps }), actionsEnd] })] }));
+function SybilionAppHeader({ pageHeaderId, actionsAnchorId = PAGE_HEADER_ACTIONS_ID, actionsAnchorClassName, actionsStart, actionsEnd, pathname, onNavigate, authenticated, defaultApps, appsStorageKey, logo, logoAreaClassName, ...navUserHeaderProps }) {
+    return (jsxs(AppHeaderPortal, { pageHeaderId: pageHeaderId, children: [jsx("div", { className: cn(S.logoArea, logoAreaClassName), children: jsx(Link, { to: "/", className: S.logoLink, children: logo ?? jsx(Logo, { size: "md", "aria-hidden": true }) }) }), jsx(WorkspaceAppSwitcher, { pathname: pathname, onNavigate: onNavigate, authenticated: authenticated, defaultApps: defaultApps, appsStorageKey: appsStorageKey }), jsx(Gap, {}), jsxs("div", { className: cn(S.actionsAnchor, actionsAnchorClassName), children: [jsx("div", { id: actionsAnchorId, className: S.pageActionsPortal }), actionsStart, jsx(NavUserHeader, { ...navUserHeaderProps }), actionsEnd] })] }));
 }
 
 export { SybilionAppHeader };

package/dist/esm/components/widgets/SybilionAppHeader/SybilionAppHeader.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)}}.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"};
+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_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","logoLink":"SybilionAppHeader_logoLink__bH-KX"};
 styleInject(css_248z);
 
 export { S as default };

package/dist/esm/index.js

@@ -63,6 +63,7 @@ export { Logo } from './components/ui/Logo/Logo.js';
 export { MobileAdaptiveSelector } from './components/ui/MobileAdaptiveSelector/MobileAdaptiveSelector.js';
 export { NavUserHeader } from './components/ui/NavUserHeader/NavUserHeader.js';
 export { NumberControl } from './components/ui/NumberControl/NumberControl.js';
+export { AppBanner } from './components/ui/Page/AppBanner/AppBanner.js';
 export { AppShell, AppShellMainContent } from './components/ui/Page/AppShell/AppShell.js';
 export { PageHeader } from './components/ui/Page/PageHeader/PageHeader.js';
 export { PageEmptyCanvas } from './components/ui/Page/PageEmptyCanvas/PageEmptyCanvas.js';

package/dist/esm/types/src/components/ui/Page/AppBanner/AppBanner.d.ts

@@ -0,0 +1,7 @@
+import type { ReactNode } from 'react';
+export interface AppBannerProps {
+    children?: ReactNode;
+    className?: string;
+    onDismiss?: () => void;
+}
+export declare function AppBanner({ children, className, onDismiss }: AppBannerProps): import("react/jsx-runtime").JSX.Element;

package/dist/esm/types/src/components/ui/Page/index.d.ts

@@ -1,3 +1,4 @@
+export { AppBanner, type AppBannerProps } from './AppBanner/AppBanner';
 export { AppShell, AppShellMainContent, type AppShellMainContentProps, type AppShellProps, } from './AppShell/AppShell';
 export { PageHeader } from './PageHeader/PageHeader';
 export { PageEmptyCanvas } from './PageEmptyCanvas/PageEmptyCanvas';

package/dist/esm/types/src/components/widgets/SybilionAppHeader/SybilionAppHeader.d.ts

@@ -12,7 +12,5 @@ export type SybilionAppHeaderProps = WorkspaceAppSwitcherProps & NavUserHeaderPr
     /** Branded markup; omit for default lucide tile + «Sybilion». */
     logo?: ReactNode;
     logoAreaClassName?: string;
-    /** Applies vertical offset when a welcome banner consumes top space (CSS `--welcome-banner-height` on shell). */
-    welcomeBannerOffset?: boolean;
 };
-export declare function SybilionAppHeader({ pageHeaderId, actionsAnchorId, actionsAnchorClassName, actionsStart, actionsEnd, pathname, onNavigate, authenticated, defaultApps, appsStorageKey, logo, logoAreaClassName, welcomeBannerOffset, ...navUserHeaderProps }: SybilionAppHeaderProps): import("react/jsx-runtime").JSX.Element;
+export declare function SybilionAppHeader({ pageHeaderId, actionsAnchorId, actionsAnchorClassName, actionsStart, actionsEnd, pathname, onNavigate, authenticated, defaultApps, appsStorageKey, logo, logoAreaClassName, ...navUserHeaderProps }: SybilionAppHeaderProps): import("react/jsx-runtime").JSX.Element;

package/package.json

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

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

@@ -8,8 +8,7 @@ INPUT_MAX_HEIGHT = 200px
   flex-direction column
   gap var(--p-2)
   align-items stretch
-  padding var(--p-6)
-  padding-top var(--p-5)
+  padding var(--p-3)
 
 .composer
   position relative
@@ -100,6 +99,7 @@ INPUT_MAX_HEIGHT = 200px
   flex-shrink 0
   align-items center
   justify-content flex-end
+  margin-top -4px
 
   & > button:focus
     box-shadow 0 0 0 2px var(--brand-color-500) !important

package/src/components/ui/Page/AppBanner/AppBanner.styl

@@ -0,0 +1,39 @@
+@import 'lib/theme.styl'
+
+APP_BANNER_HEIGHT = 44px
+
+.root
+  display flex
+  align-items center
+  justify-content center
+  gap var(--p-2)
+  width 100%
+  box-sizing border-box
+  min-height APP_BANNER_HEIGHT
+  padding var(--p-2) var(--p-4)
+  flex-shrink 0
+
+  background-color var(--muted)
+  color var(--foreground)
+
+  a
+    color inherit
+    text-decoration underline
+    white-space nowrap
+
+    &:hover
+      opacity 0.85
+
+.message
+  flex 1
+  text-align center
+  font-size var(--text-sm)
+  line-height 1.25
+
+.dismiss
+  flex-shrink 0
+  color inherit
+  opacity 0.7
+
+  &:hover
+    opacity 1

package/src/components/ui/Page/AppBanner/AppBanner.styl.d.ts

@@ -0,0 +1,9 @@
+// This file is automatically generated.
+// Please do not change this file!
+interface CssExports {
+  'dismiss': string;
+  'message': string;
+  'root': string;
+}
+export const cssExports: CssExports;
+export default cssExports;

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

@@ -0,0 +1,31 @@
+import { Button } from '#uilib/components/ui/Button';
+import type { ReactNode } from 'react';
+import S from './AppBanner.styl';
+import { XIcon } from 'lucide-react';
+import cn from 'classnames';
+
+export interface AppBannerProps {
+  children?: ReactNode;
+  className?: string;
+  onDismiss?: () => void;
+}
+
+export function AppBanner({ children, className, onDismiss }: AppBannerProps) {
+  return (
+    <div className={cn(S.root, className)} data-slot="app-banner" role="status">
+      <div className={S.message}>{children}</div>
+      {onDismiss && (
+        <Button
+          variant="ghost"
+          icon
+          type="button"
+          onClick={onDismiss}
+          className={S.dismiss}
+          aria-label="Dismiss banner"
+        >
+          <XIcon size={16} aria-hidden />
+        </Button>
+      )}
+    </div>
+  );
+}

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

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

package/src/components/ui/Page/index.ts

@@ -1,3 +1,4 @@
+export { AppBanner, type AppBannerProps } from './AppBanner/AppBanner';
 export {
   AppShell,
   AppShellMainContent,

package/src/components/ui/Sidebar/Sidebar.styl

@@ -5,8 +5,7 @@
   display flex
   flex-direction row
   align-items stretch
-  --welcome-alert-height: 44px;
-  height calc(100% - var(--welcome-alert-height))
+  height 100%
   width 100%
   min-height 0
 
@@ -51,7 +50,7 @@
   height 0
   --top-offset: -10px
   --gap-top: calc(var(--header-height) + var(--top-offset))
-  top var(--gap-top)
+  top calc(var(--gap-top) + var(--app-banner-height, 0px))
   align-self flex-start
   display none
   flex-direction column
@@ -64,7 +63,7 @@
   @media (min-width MOBILE)
     &[data-state="expanded"]
       display flex
-      height calc(100% - var(--gap-top))
+      height calc(100vh - var(--gap-top) - var(--app-banner-height, 0px))
       min-height 0
 
   &[data-collapsible="offcanvas"]
@@ -129,7 +128,7 @@
   position absolute
   top -200px
   // bottom 40px
-  height calc(100vh + 200px)
+  height calc(100vh + 200px - var(--app-banner-height, 0px))
   z-index 30
   width 5px
   border-radius 2.5px
@@ -159,7 +158,7 @@
 
   .fullHeightResizer &
     top -80px
-    height calc(100vh - var(--gap-top) * -1)
+    height calc(100vh - var(--gap-top) * -1 - var(--app-banner-height, 0px))
 
 // Sidebar input
 .sidebarInput
@@ -204,7 +203,7 @@
   max-height 100%
 
   @media (min-width MOBILE)
-    height calc(100vh - var(--gap-top))
+    height calc(100vh - var(--gap-top) - var(--app-banner-height, 0px))
 
   &[data-collapsible="icon"]
     overflow hidden

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

@@ -43,13 +43,6 @@
       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']: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
   display flex
   align-items center

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

@@ -3,7 +3,6 @@
 interface CssExports {
   'actionsAnchor': string;
   'logoArea': string;
-  'logoAreaWithBanner': string;
   'logoLink': string;
   'pageActionsPortal': string;
 }

package/src/components/widgets/SybilionAppHeader/SybilionAppHeader.tsx

@@ -27,8 +27,6 @@ export type SybilionAppHeaderProps = WorkspaceAppSwitcherProps &
     /** Branded markup; omit for default lucide tile + «Sybilion». */
     logo?: ReactNode;
     logoAreaClassName?: string;
-    /** Applies vertical offset when a welcome banner consumes top space (CSS `--welcome-banner-height` on shell). */
-    welcomeBannerOffset?: boolean;
   };
 
 export function SybilionAppHeader({
@@ -44,18 +42,11 @@ export function SybilionAppHeader({
   appsStorageKey,
   logo,
   logoAreaClassName,
-  welcomeBannerOffset,
   ...navUserHeaderProps
 }: SybilionAppHeaderProps) {
   return (
     <AppHeaderPortal pageHeaderId={pageHeaderId}>
-      <div
-        className={cn(
-          S.logoArea,
-          welcomeBannerOffset && S.logoAreaWithBanner,
-          logoAreaClassName,
-        )}
-      >
+      <div className={cn(S.logoArea, logoAreaClassName)}>
         <Link to="/" className={S.logoLink}>
           {logo ?? <Logo size="md" aria-hidden />}
         </Link>

package/src/docs/App/App.tsx

@@ -1,16 +1,38 @@
-import { Navigate, Route, Routes } from 'react-router-dom';
+import cn from 'classnames';
+import { useState } from 'react';
+import {
+  Link,
+  Navigate,
+  Outlet,
+  Route,
+  Routes,
+  useLocation,
+  useNavigate,
+} from 'react-router-dom';
 
+import { AppHeaderHost } from '#uilib/components/ui/AppHeader';
+import { Button } from '#uilib/components/ui/Button';
+import {
+  AppBanner,
+  AppShell,
+  AppShellMainContent,
+} from '#uilib/components/ui/Page';
+import { PageFooter } from '#uilib/components/ui/Page/PageFooter/PageFooter';
+import { PageScroll } from '#uilib/components/ui/Page/PageScroll/PageScroll';
 import { SidebarProvider } from '#uilib/components/ui/Sidebar/Sidebar';
+import { SybilionAppHeader } from '#uilib/components/widgets/SybilionAppHeader';
 import { ChatProvider } from '#uilib/contexts/chat-context';
+import { DocsSidebar } from '#uilib/docs/components/DocsSidebar/DocsSidebar';
 import type { ChatResponse } from '#uilib/types/chat-api.types';
 
 import { DocPage } from '../DocPage';
-import { DocsShell } from '../DocsShell';
+import S from '../DocsShell.styl';
 import {
   DOCS_CHAT_USER_KEY,
   DOCS_SIDEBAR_WIDTH_LS_KEY,
 } from '../docsConstants';
 import { DOC_DEFAULT_SLUG } from '../registry';
+import { ThemeToggle } from './ThemeToggle';
 
 async function mockDocsSendChatMessage(
   message: string,
@@ -25,6 +47,73 @@ async function mockDocsSendChatMessage(
   };
 }
 
+function DocsLayout() {
+  const location = useLocation();
+  const navigate = useNavigate();
+  const [bannerVisible, setBannerVisible] = useState(false);
+
+  return (
+    <div className={cn(S.viewport, bannerVisible && S.viewportWithBanner)}>
+      {bannerVisible ? (
+        <div className={S.welcomeBannerOuter}>
+          <AppBanner onDismiss={() => setBannerVisible(false)}>
+            Welcome, %userNname% 🎉 Your account is active! Make the most of
+            Sybilion, <Link to="/docs/button">explore features →</Link>
+          </AppBanner>
+        </div>
+      ) : null}
+      <div className={S.pageScrollSlot}>
+        <PageScroll className={S.root}>
+          <AppShell>
+            <DocsSidebar />
+
+            <AppShellMainContent
+              header={<AppHeaderHost sticky />}
+              footer={
+                <PageFooter versionLink="/releases" versionLabel="1.0.0-docs" />
+              }
+            >
+              <SybilionAppHeader
+                pathname={location.pathname}
+                onNavigate={href => {
+                  void navigate(href);
+                }}
+                authenticated
+                isAuthenticated={false}
+                onLogout={() => undefined}
+                signInSlot={<ThemeToggle />}
+                actionsEnd={
+                  <Button
+                    type="button"
+                    variant="outline"
+                    size="sm"
+                    onClick={() => setBannerVisible(current => !current)}
+                  >
+                    {bannerVisible ? 'Hide banner' : 'Show banner'}
+                  </Button>
+                }
+                defaultApps={[
+                  {
+                    id: 'docs-home',
+                    displayName: 'Home',
+                    subtitle: 'Home',
+                    iconKey: 'grid-four',
+                    accent: '#0d9488',
+                    accentMuted: 'rgba(13, 148, 136, 0.12)',
+                    href: '/',
+                    matchPathPrefixes: ['/'],
+                  },
+                ]}
+              />
+              <Outlet />
+            </AppShellMainContent>
+          </AppShell>
+        </PageScroll>
+      </div>
+    </div>
+  );
+}
+
 export default function App() {
   return (
     <SidebarProvider
@@ -40,7 +129,7 @@ export default function App() {
             path="/"
             element={<Navigate to={`/docs/${DOC_DEFAULT_SLUG}`} replace />}
           />
-          <Route path="/docs" element={<DocsShell />}>
+          <Route path="/docs" element={<DocsLayout />}>
             <Route index element={<Navigate to={DOC_DEFAULT_SLUG} replace />} />
             <Route path=":slug" element={<DocPage />} />
           </Route>

package/src/docs/DocsShell.styl

@@ -1,5 +1,31 @@
 @import '../lib/theme.styl'
 
+.viewport
+  position relative
+  display flex
+  flex-direction column
+  height 100vh
+  width 100%
+  overflow hidden
+
+.viewportWithBanner
+  --app-banner-height: 44px
+  --welcome-banner-height: 44px
+
+.welcomeBannerOuter
+  flex-shrink 0
+  width 100%
+  z-index 20
+
+.pageScrollSlot
+  flex 1
+  min-height 0
+  width 100%
+
+  > *
+    height 100%
+    min-height 0
+
 .root
   display flex
   flex-direction column

package/src/docs/DocsShell.styl.d.ts

@@ -5,7 +5,11 @@ interface CssExports {
   'loading': string;
   'mainContent': string;
   'mainHeaderBar': string;
+  'pageScrollSlot': string;
   'root': string;
+  'viewport': string;
+  'viewportWithBanner': string;
+  'welcomeBannerOuter': string;
 }
 export const cssExports: CssExports;
 export default cssExports;

package/dist/esm/types/src/docs/DocsShell.d.ts

@@ -1 +0,0 @@
-export declare function DocsShell(): import("react/jsx-runtime").JSX.Element;

package/src/docs/DocsShell.tsx

@@ -1,55 +0,0 @@
-import { Outlet, useLocation, useNavigate } from 'react-router-dom';
-
-import { AppHeaderHost } from '#uilib/components/ui/AppHeader';
-import { AppShell, AppShellMainContent } from '#uilib/components/ui/Page';
-import { PageFooter } from '#uilib/components/ui/Page/PageFooter/PageFooter';
-import { PageScroll } from '#uilib/components/ui/Page/PageScroll/PageScroll';
-import { SybilionAppHeader } from '#uilib/components/widgets/SybilionAppHeader';
-import { ThemeToggle } from '#uilib/docs/App/ThemeToggle';
-import { DocsSidebar } from '#uilib/docs/components/DocsSidebar/DocsSidebar';
-
-import S from './DocsShell.styl';
-
-export function DocsShell() {
-  const location = useLocation();
-  const navigate = useNavigate();
-
-  return (
-    <PageScroll className={S.root}>
-      <AppShell>
-        <DocsSidebar />
-
-        <AppShellMainContent
-          header={<AppHeaderHost sticky />}
-          footer={
-            <PageFooter versionLink="/releases" versionLabel="1.0.0-docs" />
-          }
-        >
-          <SybilionAppHeader
-            pathname={location.pathname}
-            onNavigate={href => {
-              void navigate(href);
-            }}
-            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>
-      </AppShell>
-    </PageScroll>
-  );
-}