harebear-ui 0.3.0 → 0.5.0

package/dist/components/admin/app-shell.d.ts

@@ -1,3 +1,4 @@
+import { SidebarLayoutProps } from "./sidebar-layout.js";
 import * as React from "react";
 export interface AppNavItem {
   label: string;
@@ -29,22 +30,28 @@ declare function AppBrand({ name, subtitle, icon, action, className, ...props }:
 export interface AppShellProps {
   /** Sidebar header content, usually <AppBrand />. */
   brand?: React.ReactNode;
+  /** Under the brand, e.g. a primary "New" button. */
+  sidebarActions?: React.ReactNode;
   nav?: AppNavSection[];
-  /** Extra sidebar content under the nav (e.g. a usage card). */
+  /** Extra sidebar content under the nav (e.g. a usage card). Hidden in the icon rail. */
   sidebarExtra?: React.ReactNode;
-  /** Sidebar bottom content, usually <UserChip />. */
+  /** Sidebar bottom content, usually <UserMenu />. */
   sidebarFooter?: React.ReactNode;
   /** Top bar content inside the main area (search, actions). */
   header?: React.ReactNode;
   /** Component used for nav links. Default "a". Pass Next.js Link or React Router Link. */
   linkComponent?: React.ElementType;
+  /** How the sidebar collapses on desktop. Default "icon": a collapse button shrinks it to an icon rail. */
+  collapsible?: SidebarLayoutProps["collapsible"];
+  /** Remember the sidebar's expanded or collapsed state in localStorage under this key. */
+  storageKey?: string;
   defaultOpen?: boolean;
   className?: string;
   children?: React.ReactNode;
 }
 /**
- * Full admin layout: collapsible sidebar (sheet on mobile) + main column.
- * Built on the Sidebar primitives; drop to those for anything custom.
+ * Full admin layout on SidebarLayout: nav sidebar that collapses to an icon rail (a sheet on mobile) + main column.
+ * Nav items show their label as a tooltip in the rail. Drop to SidebarLayout or the Sidebar primitives for anything custom.
  */
-declare function AppShell({ brand, nav, sidebarExtra, sidebarFooter, header, linkComponent: Link, defaultOpen, className, children }: AppShellProps): React.JSX.Element;
+declare function AppShell({ brand, sidebarActions, nav, sidebarExtra, sidebarFooter, header, linkComponent: Link, collapsible, storageKey, defaultOpen, className, children }: AppShellProps): React.JSX.Element;
 export { AppBrand, AppShell };

package/dist/components/admin/app-shell.js

@@ -1,6 +1,7 @@
 "use client";
+import { SidebarLayout } from "./sidebar-layout.js";
 import { Badge } from "../ui/badge.js";
-import { Sidebar, SidebarContent, SidebarFooter, SidebarGroup, SidebarGroupLabel, SidebarHeader, SidebarInset, SidebarMenu, SidebarMenuButton, SidebarMenuItem, SidebarProvider, SidebarTrigger } from "../ui/sidebar.js";
+import { SidebarGroup, SidebarGroupLabel, SidebarMenu, SidebarMenuButton, SidebarMenuItem, SidebarTrigger } from "../ui/sidebar.js";
 import { cn } from "../../lib/utils.js";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 // src/components/admin/app-shell.tsx
@@ -36,75 +37,70 @@ function AppBrand({ name, subtitle, icon, action, className, ...props }) {
 	});
 }
 /**
-* Full admin layout: collapsible sidebar (sheet on mobile) + main column.
-* Built on the Sidebar primitives; drop to those for anything custom.
+* Full admin layout on SidebarLayout: nav sidebar that collapses to an icon rail (a sheet on mobile) + main column.
+* Nav items show their label as a tooltip in the rail. Drop to SidebarLayout or the Sidebar primitives for anything custom.
 */
-function AppShell({ brand, nav = [], sidebarExtra, sidebarFooter, header, linkComponent: Link = "a", defaultOpen = true, className, children }) {
-	return /* @__PURE__ */ jsxs(SidebarProvider, {
+function AppShell({ brand, sidebarActions, nav = [], sidebarExtra, sidebarFooter, header, linkComponent: Link = "a", collapsible, storageKey, defaultOpen = true, className, children }) {
+	return /* @__PURE__ */ jsxs(SidebarLayout, {
+		brand,
+		sidebarActions,
+		sidebarFooter,
+		collapsible,
+		storageKey,
 		defaultOpen,
-		style: { "--sidebar-width": "15.75rem" },
-		children: [/* @__PURE__ */ jsxs(Sidebar, { children: [
-			brand && /* @__PURE__ */ jsx(SidebarHeader, {
-				className: "px-4 pt-6 pb-2",
-				children: brand
-			}),
-			/* @__PURE__ */ jsxs(SidebarContent, {
-				className: "gap-5 px-2",
-				children: [nav.map((section, i) => /* @__PURE__ */ jsxs(SidebarGroup, { children: [section.label && /* @__PURE__ */ jsx(SidebarGroupLabel, {
-					className: "text-xs font-medium",
-					children: section.label
-				}), /* @__PURE__ */ jsx(SidebarMenu, {
-					className: "gap-1",
-					children: section.items.map((item) => /* @__PURE__ */ jsx(SidebarMenuItem, { children: /* @__PURE__ */ jsx(SidebarMenuButton, {
-						asChild: !!item.href,
-						isActive: item.active,
-						onClick: item.onSelect,
-						children: item.href ? /* @__PURE__ */ jsxs(Link, {
-							href: item.href,
-							children: [
-								item.icon,
-								/* @__PURE__ */ jsx("span", {
-									className: "flex-1",
-									children: item.label
-								}),
-								item.badge !== void 0 && /* @__PURE__ */ jsx(NavBadge, { children: item.badge })
-							]
-						}) : /* @__PURE__ */ jsxs(Fragment, { children: [
+		width: "15.75rem",
+		className,
+		sidebar: /* @__PURE__ */ jsxs("div", {
+			className: "flex flex-1 flex-col gap-5",
+			children: [nav.map((section, i) => /* @__PURE__ */ jsxs(SidebarGroup, { children: [section.label && /* @__PURE__ */ jsx(SidebarGroupLabel, {
+				className: "text-xs font-medium",
+				children: section.label
+			}), /* @__PURE__ */ jsx(SidebarMenu, {
+				className: "gap-1 group-data-[collapsible=icon]:items-center",
+				children: section.items.map((item) => /* @__PURE__ */ jsx(SidebarMenuItem, { children: /* @__PURE__ */ jsx(SidebarMenuButton, {
+					asChild: !!item.href,
+					isActive: item.active,
+					onClick: item.onSelect,
+					tooltip: item.label,
+					children: item.href ? /* @__PURE__ */ jsxs(Link, {
+						href: item.href,
+						children: [
 							item.icon,
 							/* @__PURE__ */ jsx("span", {
 								className: "flex-1",
 								children: item.label
 							}),
 							item.badge !== void 0 && /* @__PURE__ */ jsx(NavBadge, { children: item.badge })
-						] })
-					}) }, item.label))
-				})] }, section.label ?? i)), sidebarExtra && /* @__PURE__ */ jsx("div", {
-					className: "mt-auto px-2",
-					children: sidebarExtra
-				})]
-			}),
-			sidebarFooter && /* @__PURE__ */ jsx(SidebarFooter, {
-				className: "px-4 pb-6",
-				children: sidebarFooter
-			})
-		] }), /* @__PURE__ */ jsxs(SidebarInset, {
-			className: cn("min-w-0", className),
-			children: [header !== void 0 && /* @__PURE__ */ jsxs("header", {
-				"data-slot": "app-header",
-				className: "flex flex-wrap items-center gap-3 px-4 pt-5 md:px-8",
-				children: [/* @__PURE__ */ jsx(SidebarTrigger, { className: "md:hidden" }), header]
-			}), /* @__PURE__ */ jsx("div", {
-				"data-slot": "app-content",
-				className: "flex min-w-0 flex-col gap-7 px-4 pt-7 pb-12 md:px-8",
-				children
+						]
+					}) : /* @__PURE__ */ jsxs(Fragment, { children: [
+						item.icon,
+						/* @__PURE__ */ jsx("span", {
+							className: "flex-1",
+							children: item.label
+						}),
+						item.badge !== void 0 && /* @__PURE__ */ jsx(NavBadge, { children: item.badge })
+					] })
+				}) }, item.label))
+			})] }, section.label ?? i)), sidebarExtra && /* @__PURE__ */ jsx("div", {
+				className: "mt-auto px-2 group-data-[collapsible=icon]:hidden",
+				children: sidebarExtra
 			})]
+		}),
+		children: [header !== void 0 && /* @__PURE__ */ jsxs("header", {
+			"data-slot": "app-header",
+			className: "flex flex-wrap items-center gap-3 px-4 pt-5 md:px-8",
+			children: [/* @__PURE__ */ jsx(SidebarTrigger, { className: "md:hidden" }), header]
+		}), /* @__PURE__ */ jsx("div", {
+			"data-slot": "app-content",
+			className: "flex min-w-0 flex-col gap-7 px-4 pt-7 pb-12 md:px-8",
+			children
 		})]
 	});
 }
 function NavBadge({ children }) {
 	return /* @__PURE__ */ jsx(Badge, {
 		variant: "soft",
-		className: "h-5 px-2",
+		className: "h-5 px-2 group-data-[collapsible=icon]:hidden",
 		children
 	});
 }

package/dist/components/admin/sidebar-layout.d.ts

@@ -0,0 +1,41 @@
+import * as React from "react";
+export interface SidebarLayoutProps {
+  /** Sidebar top, usually <AppBrand />. Collapses to its logo tile in the icon rail. */
+  brand?: React.ReactNode;
+  /** Under the brand, e.g. <NewConversationButton /> or a search box. Should cope with the icon rail. */
+  sidebarActions?: React.ReactNode;
+  /** Scrolling sidebar body: nav menus, <ConversationList />… */
+  sidebar?: React.ReactNode;
+  /** Sidebar bottom, usually <UserMenu />. */
+  sidebarFooter?: React.ReactNode;
+  /**
+   * - "icon" (default): a collapse button shrinks the sidebar to an icon rail on desktop.
+   * - "offcanvas": the sidebar can be hidden entirely (toggle it with a SidebarTrigger).
+   * - "none": always expanded on desktop.
+   * On mobile the sidebar is always a sheet opened with a SidebarTrigger.
+   */
+  collapsible?: "icon" | "offcanvas" | "none";
+  /** Remember the expanded or collapsed state in localStorage under this key. */
+  storageKey?: string;
+  /** Expanded at first (when nothing is stored). Default true. */
+  defaultOpen?: boolean;
+  /** Expanded sidebar width. Default "16rem". The icon rail is 4.25rem. */
+  width?: string;
+  /** Classes for the main column (a SidebarInset). */
+  className?: string;
+  /** The main column. */
+  children?: React.ReactNode;
+}
+/**
+ * The base app layout: a sidebar (brand, actions, body, footer) that collapses to an icon rail on desktop and is a
+ * sheet on mobile, next to the main column. AppShell and ChatShell are built on it; use it directly for other layouts.
+ */
+declare function SidebarLayout({ brand, sidebarActions, sidebar, sidebarFooter, collapsible, storageKey, defaultOpen, width, className, children }: SidebarLayoutProps): React.JSX.Element;
+/**
+ * Collapse / expand control for a desktop sidebar with an icon rail, with a tooltip. Renders nothing on mobile,
+ * where the sidebar is a sheet. SidebarLayout includes one; use it in custom Sidebar layouts.
+ */
+declare function SidebarCollapseButton({ className }: {
+  className?: string;
+}): React.JSX.Element | null;
+export { SidebarCollapseButton, SidebarLayout };

package/dist/components/admin/sidebar-layout.js

@@ -0,0 +1,104 @@
+"use client";
+import { Button } from "../ui/button.js";
+import { Sidebar, SidebarContent, SidebarFooter, SidebarHeader, SidebarInset, SidebarProvider, useSidebar } from "../ui/sidebar.js";
+import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "../ui/tooltip.js";
+import { cn } from "../../lib/utils.js";
+import * as React from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { PanelLeftCloseIcon, PanelLeftOpenIcon } from "lucide-react";
+// src/components/admin/sidebar-layout.tsx
+function readStored(key) {
+	try {
+		const v = window.localStorage.getItem(key);
+		return v === null ? null : v !== "collapsed";
+	} catch {
+		return null;
+	}
+}
+const useIsomorphicLayoutEffect = typeof window === "undefined" ? React.useEffect : React.useLayoutEffect;
+/**
+* The base app layout: a sidebar (brand, actions, body, footer) that collapses to an icon rail on desktop and is a
+* sheet on mobile, next to the main column. AppShell and ChatShell are built on it; use it directly for other layouts.
+*/
+function SidebarLayout({ brand, sidebarActions, sidebar, sidebarFooter, collapsible = "icon", storageKey, defaultOpen = true, width = "16rem", className, children }) {
+	const [open, setOpen] = React.useState(defaultOpen);
+	useIsomorphicLayoutEffect(() => {
+		if (!storageKey) return;
+		const stored = readStored(storageKey);
+		if (stored !== null) setOpen(stored);
+	}, [storageKey]);
+	const onOpenChange = (next) => {
+		setOpen(next);
+		if (!storageKey) return;
+		try {
+			window.localStorage.setItem(storageKey, next ? "open" : "collapsed");
+		} catch {}
+	};
+	return /* @__PURE__ */ jsx(TooltipProvider, { children: /* @__PURE__ */ jsxs(SidebarProvider, {
+		open: collapsible === "none" ? true : open,
+		onOpenChange,
+		style: {
+			"--sidebar-width": width,
+			"--sidebar-width-icon": "4.25rem"
+		},
+		children: [/* @__PURE__ */ jsxs(Sidebar, {
+			collapsible: collapsible === "none" ? "offcanvas" : collapsible,
+			"data-slot": "sidebar-layout-sidebar",
+			children: [
+				/* @__PURE__ */ jsxs(SidebarHeader, {
+					className: "gap-5 px-3.5 pt-[max(1.25rem,env(safe-area-inset-top))] group-data-[collapsible=icon]:items-center group-data-[collapsible=icon]:gap-3 group-data-[collapsible=icon]:px-0",
+					children: [/* @__PURE__ */ jsxs("div", {
+						className: "flex min-w-0 items-center gap-2 group-data-[collapsible=icon]:flex-col group-data-[collapsible=icon]:gap-3",
+						children: [brand && /* @__PURE__ */ jsx("div", {
+							className: "min-w-0 flex-1 pl-2 group-data-[collapsible=icon]:pl-0",
+							children: brand
+						}), collapsible === "icon" && /* @__PURE__ */ jsx(SidebarCollapseButton, {})]
+					}), sidebarActions && /* @__PURE__ */ jsx("div", {
+						className: "flex flex-col gap-2.5 group-data-[collapsible=icon]:items-center",
+						children: sidebarActions
+					})]
+				}),
+				/* @__PURE__ */ jsx(SidebarContent, {
+					className: "px-3.5 pt-2 group-data-[collapsible=icon]:px-0",
+					children: sidebar
+				}),
+				sidebarFooter && /* @__PURE__ */ jsx(SidebarFooter, {
+					className: "px-3.5 pb-[max(1.25rem,env(safe-area-inset-bottom))] group-data-[collapsible=icon]:px-0",
+					children: /* @__PURE__ */ jsx("div", {
+						className: "px-2 group-data-[collapsible=icon]:px-0 has-data-[slot=user-menu-trigger]:px-0",
+						children: sidebarFooter
+					})
+				})
+			]
+		}), /* @__PURE__ */ jsx(SidebarInset, {
+			"data-slot": "sidebar-layout",
+			className: cn("min-w-0", className),
+			children
+		})]
+	}) });
+}
+/**
+* Collapse / expand control for a desktop sidebar with an icon rail, with a tooltip. Renders nothing on mobile,
+* where the sidebar is a sheet. SidebarLayout includes one; use it in custom Sidebar layouts.
+*/
+function SidebarCollapseButton({ className }) {
+	const { state, isMobile, toggleSidebar } = useSidebar();
+	if (isMobile) return null;
+	const label = state === "collapsed" ? "Expand sidebar" : "Collapse sidebar";
+	return /* @__PURE__ */ jsxs(Tooltip, { children: [/* @__PURE__ */ jsx(TooltipTrigger, {
+		asChild: true,
+		children: /* @__PURE__ */ jsx(Button, {
+			"data-slot": "sidebar-collapse-button",
+			variant: "ghost",
+			size: state === "collapsed" ? "icon" : "icon-sm",
+			"aria-label": label,
+			onClick: toggleSidebar,
+			className,
+			children: state === "collapsed" ? /* @__PURE__ */ jsx(PanelLeftOpenIcon, {}) : /* @__PURE__ */ jsx(PanelLeftCloseIcon, {})
+		})
+	}), /* @__PURE__ */ jsx(TooltipContent, {
+		side: "right",
+		children: label
+	})] });
+}
+export { SidebarCollapseButton, SidebarLayout };

package/dist/components/admin/user-menu.d.ts

@@ -0,0 +1,22 @@
+import * as React from "react";
+export interface UserMenuProps {
+  name: string;
+  /** Second line, e.g. the email or "Signed in". */
+  subtitle?: React.ReactNode;
+  avatarUrl?: string;
+  /** Extra items between the header and the theme choice, e.g. a Settings DropdownMenuItem. */
+  children?: React.ReactNode;
+  /** Show the Light / Dark / System choice. Default true. Needs ThemeProvider. */
+  themeSwitch?: boolean;
+  /** Adds a Sign out item at the bottom. */
+  onSignOut?: () => void;
+  /** Default "Sign out". */
+  signOutLabel?: React.ReactNode;
+  className?: string;
+}
+/**
+ * The signed-in user as a menu button, for a sidebar footer or top bar: theme choice, app items such as
+ * Settings, and sign out. In a sidebar icon rail the trigger is just the avatar and the menu opens to the side.
+ */
+declare function UserMenu({ name, subtitle, avatarUrl, children, themeSwitch, onSignOut, signOutLabel, className }: UserMenuProps): React.JSX.Element;
+export { UserMenu };

package/dist/components/admin/user-menu.js

@@ -0,0 +1,82 @@
+"use client";
+import { UserChip } from "./user-chip.js";
+import { useTheme } from "../theme/theme-provider.js";
+import { DropdownMenu, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuTrigger } from "../ui/dropdown-menu.js";
+import { useSidebarOptional } from "../ui/sidebar.js";
+import { cn } from "../../lib/utils.js";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { ChevronsUpDownIcon, LogOutIcon, MonitorIcon, MoonIcon, SunIcon } from "lucide-react";
+// src/components/admin/user-menu.tsx
+const themes = [
+	{
+		mode: "light",
+		label: "Light",
+		icon: /* @__PURE__ */ jsx(SunIcon, {})
+	},
+	{
+		mode: "dark",
+		label: "Dark",
+		icon: /* @__PURE__ */ jsx(MoonIcon, {})
+	},
+	{
+		mode: "system",
+		label: "System",
+		icon: /* @__PURE__ */ jsx(MonitorIcon, {})
+	}
+];
+/**
+* The signed-in user as a menu button, for a sidebar footer or top bar: theme choice, app items such as
+* Settings, and sign out. In a sidebar icon rail the trigger is just the avatar and the menu opens to the side.
+*/
+function UserMenu({ name, subtitle, avatarUrl, children, themeSwitch = true, onSignOut, signOutLabel = "Sign out", className }) {
+	const { mode, setMode } = useTheme();
+	const sidebar = useSidebarOptional();
+	const rail = sidebar?.state === "collapsed" && !sidebar.isMobile;
+	return /* @__PURE__ */ jsxs(DropdownMenu, { children: [/* @__PURE__ */ jsxs(DropdownMenuTrigger, {
+		"data-slot": "user-menu-trigger",
+		"aria-label": `Account menu for ${name}`,
+		className: cn("flex w-full min-w-0 items-center gap-2 rounded-lg px-2 py-1.5 text-left transition-colors outline-none hover:bg-muted focus-visible:ring-2 focus-visible:ring-ring/40 data-[state=open]:bg-muted group-data-[collapsible=icon]:mx-auto group-data-[collapsible=icon]:size-10 group-data-[collapsible=icon]:justify-center group-data-[collapsible=icon]:rounded-full group-data-[collapsible=icon]:p-0", className),
+		children: [/* @__PURE__ */ jsx(UserChip, {
+			name,
+			subtitle,
+			avatarUrl,
+			className: "flex-1"
+		}), /* @__PURE__ */ jsx(ChevronsUpDownIcon, { className: "size-4 shrink-0 text-muted-foreground group-data-[collapsible=icon]:hidden" })]
+	}), /* @__PURE__ */ jsxs(DropdownMenuContent, {
+		"data-slot": "user-menu",
+		side: rail ? "right" : "top",
+		align: rail ? "end" : "start",
+		className: "w-(--radix-dropdown-menu-trigger-width) min-w-60",
+		children: [
+			/* @__PURE__ */ jsxs(DropdownMenuLabel, {
+				className: "flex min-w-0 flex-col font-normal",
+				children: [/* @__PURE__ */ jsx("span", {
+					className: "truncate font-medium text-foreground",
+					children: name
+				}), subtitle && /* @__PURE__ */ jsx("span", {
+					className: "truncate text-xs text-muted-foreground",
+					children: subtitle
+				})]
+			}),
+			children && /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(DropdownMenuSeparator, {}), /* @__PURE__ */ jsx(DropdownMenuGroup, { children })] }),
+			themeSwitch && /* @__PURE__ */ jsxs(Fragment, { children: [
+				/* @__PURE__ */ jsx(DropdownMenuSeparator, {}),
+				/* @__PURE__ */ jsx(DropdownMenuLabel, { children: "Theme" }),
+				/* @__PURE__ */ jsx(DropdownMenuRadioGroup, {
+					value: mode,
+					onValueChange: (v) => setMode(v),
+					children: themes.map((t) => /* @__PURE__ */ jsxs(DropdownMenuRadioItem, {
+						value: t.mode,
+						onSelect: (e) => e.preventDefault(),
+						children: [t.icon, t.label]
+					}, t.mode))
+				})
+			] }),
+			onSignOut && /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(DropdownMenuSeparator, {}), /* @__PURE__ */ jsxs(DropdownMenuItem, {
+				onSelect: onSignOut,
+				children: [/* @__PURE__ */ jsx(LogOutIcon, {}), signOutLabel]
+			})] })
+		]
+	})] });
+}
+export { UserMenu };

package/dist/components/ai/chat-shell.d.ts

@@ -1,3 +1,4 @@
+import { SidebarLayoutProps } from "../admin/sidebar-layout.js";
 import * as React from "react";
 export interface ChatShellProps {
   /** Sidebar top, usually <AppBrand />. Collapses to its logo tile in the icon rail. */
@@ -6,7 +7,7 @@ export interface ChatShellProps {
   sidebarActions?: React.ReactNode;
   /** Scrolling sidebar body, usually <ConversationList />. Hidden in the icon rail. */
   sidebar?: React.ReactNode;
-  /** Sidebar bottom, usually <UserChip /> with a ThemeToggle as its action. */
+  /** Sidebar bottom, usually <UserMenu /> (or a <UserChip /> with a ThemeToggle as its action). */
   sidebarFooter?: React.ReactNode;
   /** Right-hand panel, e.g. Cards with details about the open conversation. Inline at 1280px and up, a sheet below. */
   details?: React.ReactNode;
@@ -14,6 +15,8 @@ export interface ChatShellProps {
   detailsTitle?: string;
   /** Show the details panel at first on wide screens. Default true. */
   defaultDetailsOpen?: boolean;
+  /** How the sidebar collapses on desktop. Default "icon" (an icon rail). See SidebarLayout. */
+  collapsible?: SidebarLayoutProps["collapsible"];
   /** Remember the sidebar's expanded or collapsed state in localStorage under this key. */
   storageKey?: string;
   /** Sidebar expanded at first (when nothing is stored). Default true. */
@@ -23,10 +26,10 @@ export interface ChatShellProps {
   children: React.ReactNode;
 }
 /**
- * Full-height chat app layout: a sidebar that collapses to an icon rail (a sheet on mobile), the main chat
- * column, and an optional details panel. Put a ChatPanel inside.
+ * Full-height chat app layout: SidebarLayout (sidebar with an icon rail, a sheet on mobile) around the chat
+ * column, plus an optional details panel. Put a ChatPanel inside.
  */
-declare function ChatShell({ brand, sidebarActions, sidebar, sidebarFooter, details, detailsTitle, defaultDetailsOpen, storageKey, defaultOpen, className, children }: ChatShellProps): React.JSX.Element;
+declare function ChatShell({ brand, sidebarActions, sidebar, sidebarFooter, details, detailsTitle, defaultDetailsOpen, collapsible, storageKey, defaultOpen, className, children }: ChatShellProps): React.JSX.Element;
 export interface ChatPanelProps extends Omit<React.ComponentProps<"section">, "title"> {
   /** Conversation title. */
   title?: React.ReactNode;

package/dist/components/ai/chat-shell.js

@@ -1,45 +1,23 @@
 "use client";
+import { SidebarLayout } from "../admin/sidebar-layout.js";
 import { ChatThread } from "./chat.js";
 import { Alert, AlertDescription } from "../ui/alert.js";
 import { Button } from "../ui/button.js";
 import { Sheet, SheetContent, SheetHeader, SheetTitle } from "../ui/sheet.js";
-import { Sidebar, SidebarContent, SidebarFooter, SidebarHeader, SidebarInset, SidebarProvider, SidebarTrigger, useSidebar, useSidebarOptional } from "../ui/sidebar.js";
-import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "../ui/tooltip.js";
+import { SidebarTrigger, useSidebarOptional } from "../ui/sidebar.js";
 import { useMediaQuery } from "../../hooks/use-media-query.js";
 import { cn } from "../../lib/utils.js";
 import * as React from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
-import { PanelLeftCloseIcon, PanelLeftOpenIcon, PanelRightIcon, TriangleAlertIcon } from "lucide-react";
+import { PanelRightIcon, TriangleAlertIcon } from "lucide-react";
 // src/components/ai/chat-shell.tsx
 const WIDE = "(min-width: 1280px)";
 const ChatShellContext = React.createContext(null);
-function readStored(key) {
-	try {
-		const v = window.localStorage.getItem(key);
-		return v === null ? null : v !== "collapsed";
-	} catch {
-		return null;
-	}
-}
-const useIsomorphicLayoutEffect = typeof window === "undefined" ? React.useEffect : React.useLayoutEffect;
 /**
-* Full-height chat app layout: a sidebar that collapses to an icon rail (a sheet on mobile), the main chat
-* column, and an optional details panel. Put a ChatPanel inside.
+* Full-height chat app layout: SidebarLayout (sidebar with an icon rail, a sheet on mobile) around the chat
+* column, plus an optional details panel. Put a ChatPanel inside.
 */
-function ChatShell({ brand, sidebarActions, sidebar, sidebarFooter, details, detailsTitle = "Details", defaultDetailsOpen = true, storageKey, defaultOpen = true, className, children }) {
-	const [open, setOpen] = React.useState(defaultOpen);
-	useIsomorphicLayoutEffect(() => {
-		if (!storageKey) return;
-		const stored = readStored(storageKey);
-		if (stored !== null) setOpen(stored);
-	}, [storageKey]);
-	const onOpenChange = (next) => {
-		setOpen(next);
-		if (!storageKey) return;
-		try {
-			window.localStorage.setItem(storageKey, next ? "open" : "collapsed");
-		} catch {}
-	};
+function ChatShell({ brand, sidebarActions, sidebar, sidebarFooter, details, detailsTitle = "Details", defaultDetailsOpen = true, collapsible, storageKey, defaultOpen = true, className, children }) {
 	const wide = useMediaQuery(WIDE);
 	const [inline, setInline] = React.useState(defaultDetailsOpen);
 	const [sheet, setSheet] = React.useState(false);
@@ -55,90 +33,43 @@ function ChatShell({ brand, sidebarActions, sidebar, sidebarFooter, details, det
 		inline,
 		sheet
 	]);
-	return /* @__PURE__ */ jsx(TooltipProvider, { children: /* @__PURE__ */ jsx(SidebarProvider, {
-		open,
-		onOpenChange,
-		style: {
-			"--sidebar-width": "17rem",
-			"--sidebar-width-icon": "4.25rem"
-		},
+	return /* @__PURE__ */ jsx(SidebarLayout, {
+		brand,
+		sidebarActions,
+		sidebar,
+		sidebarFooter,
+		collapsible,
+		storageKey,
+		defaultOpen,
+		width: "17rem",
+		className: cn("h-dvh overflow-hidden", className),
 		children: /* @__PURE__ */ jsxs(ChatShellContext.Provider, {
 			value: ctx,
-			children: [/* @__PURE__ */ jsxs(Sidebar, {
-				collapsible: "icon",
-				children: [
-					/* @__PURE__ */ jsxs(SidebarHeader, {
-						className: "gap-5 px-3.5 pt-[max(1.25rem,env(safe-area-inset-top))] group-data-[collapsible=icon]:items-center group-data-[collapsible=icon]:gap-3 group-data-[collapsible=icon]:px-0",
-						children: [/* @__PURE__ */ jsxs("div", {
-							className: "flex min-w-0 items-center gap-2 group-data-[collapsible=icon]:flex-col group-data-[collapsible=icon]:gap-3",
-							children: [brand && /* @__PURE__ */ jsx("div", {
-								className: "min-w-0 flex-1 pl-2 group-data-[collapsible=icon]:pl-0",
-								children: brand
-							}), /* @__PURE__ */ jsx(SidebarCollapseButton, {})]
-						}), sidebarActions && /* @__PURE__ */ jsx("div", {
-							className: "flex flex-col gap-2.5 group-data-[collapsible=icon]:items-center",
-							children: sidebarActions
-						})]
-					}),
-					/* @__PURE__ */ jsx(SidebarContent, {
-						className: "px-3.5 pt-2",
-						children: sidebar
-					}),
-					sidebarFooter && /* @__PURE__ */ jsx(SidebarFooter, {
-						className: "px-3.5 pb-[max(1.25rem,env(safe-area-inset-bottom))] group-data-[collapsible=icon]:px-0",
-						children: /* @__PURE__ */ jsx("div", {
-							className: "px-2 group-data-[collapsible=icon]:px-0",
-							children: sidebarFooter
-						})
-					})
-				]
-			}), /* @__PURE__ */ jsxs(SidebarInset, {
+			children: [/* @__PURE__ */ jsxs("div", {
 				"data-slot": "chat-shell",
-				className: cn("h-dvh min-w-0 overflow-hidden", className),
-				children: [/* @__PURE__ */ jsxs("div", {
-					className: "flex h-full min-h-0 gap-3 p-2 sm:p-3 md:pl-0",
-					children: [children, hasDetails && wide && inline && /* @__PURE__ */ jsx("aside", {
-						"data-slot": "chat-shell-details",
-						"aria-label": detailsTitle,
-						className: "flex w-75 shrink-0 flex-col gap-3 overflow-y-auto",
+				className: "flex h-full min-h-0 gap-3 p-2 sm:p-3 md:pl-0",
+				children: [children, hasDetails && wide && inline && /* @__PURE__ */ jsx("aside", {
+					"data-slot": "chat-shell-details",
+					"aria-label": detailsTitle,
+					className: "flex w-75 shrink-0 flex-col gap-3 overflow-y-auto",
+					children: details
+				})]
+			}), hasDetails && !wide && /* @__PURE__ */ jsx(Sheet, {
+				open: sheet,
+				onOpenChange: setSheet,
+				children: /* @__PURE__ */ jsxs(SheetContent, {
+					className: "overflow-y-auto bg-background p-4",
+					children: [/* @__PURE__ */ jsx(SheetHeader, {
+						className: "p-0",
+						children: /* @__PURE__ */ jsx(SheetTitle, { children: detailsTitle })
+					}), /* @__PURE__ */ jsx("div", {
+						className: "flex flex-col gap-3",
 						children: details
 					})]
-				}), hasDetails && !wide && /* @__PURE__ */ jsx(Sheet, {
-					open: sheet,
-					onOpenChange: setSheet,
-					children: /* @__PURE__ */ jsxs(SheetContent, {
-						className: "overflow-y-auto bg-background p-4",
-						children: [/* @__PURE__ */ jsx(SheetHeader, {
-							className: "p-0",
-							children: /* @__PURE__ */ jsx(SheetTitle, { children: detailsTitle })
-						}), /* @__PURE__ */ jsx("div", {
-							className: "flex flex-col gap-3",
-							children: details
-						})]
-					})
-				})]
+				})
 			})]
 		})
-	}) });
-}
-/** Collapse / expand control for the desktop sidebar, with a tooltip. Hidden on mobile, where the sidebar is a sheet. */
-function SidebarCollapseButton() {
-	const { state, isMobile, toggleSidebar } = useSidebar();
-	if (isMobile) return null;
-	const label = state === "collapsed" ? "Expand sidebar" : "Collapse sidebar";
-	return /* @__PURE__ */ jsxs(Tooltip, { children: [/* @__PURE__ */ jsx(TooltipTrigger, {
-		asChild: true,
-		children: /* @__PURE__ */ jsx(Button, {
-			variant: "ghost",
-			size: state === "collapsed" ? "icon" : "icon-sm",
-			"aria-label": label,
-			onClick: toggleSidebar,
-			children: state === "collapsed" ? /* @__PURE__ */ jsx(PanelLeftOpenIcon, {}) : /* @__PURE__ */ jsx(PanelLeftCloseIcon, {})
-		})
-	}), /* @__PURE__ */ jsx(TooltipContent, {
-		side: "right",
-		children: label
-	})] });
+	});
 }
 /**
 * The chat column as a card: header, optional notice, scrolling thread, composer. Inside ChatShell it adds the

package/dist/index.d.ts

@@ -72,11 +72,13 @@ import { KeyValueGrid, KeyValueItem } from "./components/admin/key-value-grid.js
 import { LinkTile, LinkTileProps } from "./components/admin/link-tile.js";
 import { PageHeader, PageHeaderProps } from "./components/admin/page-header.js";
 import { SearchInput, SearchInputProps } from "./components/admin/search-input.js";
+import { SidebarCollapseButton, SidebarLayout, SidebarLayoutProps } from "./components/admin/sidebar-layout.js";
 import { StatCard, StatCardProps } from "./components/admin/stat-card.js";
 import { StatusBadge, StatusBadgeProps, StatusDot, StatusDotProps, StatusTone } from "./components/admin/status.js";
 import { Timeline, TimelineItem } from "./components/admin/timeline.js";
 import { UsageMeter, UsageMeterProps } from "./components/admin/usage-meter.js";
 import { UserChip, UserChipProps, initials } from "./components/admin/user-chip.js";
+import { UserMenu, UserMenuProps } from "./components/admin/user-menu.js";
 import { BarList, BarListItem } from "./components/data/bar-list.js";
 import { DataTable, DataTableColumnDef, DataTableFeatures, DataTableProps, createDataTableColumnHelper, dataTableFeatures } from "./components/data/data-table.js";
 import { Sparkline, SparklineProps, smoothPath } from "./components/data/sparkline.js";
@@ -97,4 +99,4 @@ import { useMediaQuery } from "./hooks/use-media-query.js";
 import { useIsMobile } from "./hooks/use-mobile.js";
 import { highlightCode, loadHighlighter } from "./lib/highlighter.js";
 import { cn } from "./lib/utils.js";
-export { Accordion, AccordionContent, AccordionItem, AccordionTrigger, ActivityFeed, type ActivityItem, Alert, AlertAction, AlertDescription, AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogMedia, AlertDialogOverlay, AlertDialogPortal, AlertDialogTitle, AlertDialogTrigger, AlertTitle, AppBrand, type AppBrandProps, type AppNavItem, type AppNavSection, AppShell, type AppShellProps, AppleIcon, ApprovalCard, type ApprovalCardProps, ApprovalResult, type ApprovalResultProps, AspectRatio, AssistantAvatar, Attachment, AttachmentAction, AttachmentActions, AttachmentContent, AttachmentDescription, AttachmentGroup, AttachmentMedia, AttachmentTitle, AttachmentTrigger, AuthLayout, type AuthLayoutProps, type AuthProvider, Avatar, AvatarBadge, AvatarFallback, AvatarGroup, AvatarGroupCount, AvatarImage, Badge, BarList, type BarListItem, Breadcrumb, BreadcrumbEllipsis, BreadcrumbItem, BreadcrumbLink, BreadcrumbList, BreadcrumbPage, BreadcrumbSeparator, Bubble, BubbleContent, BubbleGroup, BubbleReactions, Button, ButtonGroup, ButtonGroupSeparator, ButtonGroupText, Calendar, CalendarDayButton, Callout, Card, CardAction, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, Carousel, type CarouselApi, CarouselContent, CarouselItem, CarouselNext, CarouselPrevious, type ChartConfig, ChartContainer, ChartLegend, ChartLegendContent, ChartStyle, ChartTooltip, ChartTooltipContent, ChatMessage, type ChatMessageProps, ChatPanel, type ChatPanelProps, ChatShell, type ChatShellProps, ChatThread, type ChatThreadProps, Checkbox, CodeBlock, CodeBlockActions, CodeBlockContent, CodeBlockCopyButton, CodeBlockFooter, CodeBlockHeader, CodeBlockLine, CodeBlockTitle, CodeSnippet, type CodeSnippetProps, Collapsible, CollapsibleContent, CollapsibleTrigger, Combobox, ComboboxChip, ComboboxChips, ComboboxChipsInput, ComboboxCollection, ComboboxContent, ComboboxEmpty, ComboboxGroup, ComboboxInput, ComboboxItem, ComboboxLabel, ComboboxList, ComboboxSeparator, ComboboxTrigger, ComboboxValue, Command, CommandDialog, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList, CommandSeparator, CommandShortcut, ConfirmDialog, type ConfirmDialogProps, ContextMenu, ContextMenuCheckboxItem, ContextMenuContent, ContextMenuGroup, ContextMenuItem, ContextMenuLabel, ContextMenuPortal, ContextMenuRadioGroup, ContextMenuRadioItem, ContextMenuSeparator, ContextMenuShortcut, ContextMenuSub, ContextMenuSubContent, ContextMenuSubTrigger, ContextMenuTrigger, type Conversation, type ConversationGroup, ConversationList, type ConversationListProps, CopyField, type CopyFieldProps, DataTable, type DataTableColumnDef, type DataTableFeatures, type DataTableProps, Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger, DirectionProvider, Drawer, DrawerClose, DrawerContent, DrawerDescription, DrawerFooter, DrawerHeader, DrawerOverlay, DrawerPortal, DrawerTitle, DrawerTrigger, DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuPortal, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger, Empty, EmptyContent, EmptyDescription, EmptyHeader, EmptyMedia, EmptyTitle, Field, FieldContent, FieldDescription, FieldError, FieldGroup, FieldLabel, FieldLegend, FieldSeparator, FieldSet, FieldTitle, GitHubIcon, GoogleIcon, HoverCard, HoverCardContent, HoverCardTrigger, InlineCode, Input, InputGroup, InputGroupAddon, InputGroupButton, InputGroupInput, InputGroupText, InputGroupTextarea, InputOTP, InputOTPGroup, InputOTPSeparator, InputOTPSlot, Item, ItemActions, ItemContent, ItemDescription, ItemFooter, ItemGroup, ItemHeader, ItemMedia, ItemSeparator, ItemTitle, Kbd, KbdGroup, KeyValueGrid, type KeyValueItem, Label, LinkTile, type LinkTileProps, LoginForm, type LoginFormProps, type LoginValues, Marker, MarkerContent, MarkerIcon, Menubar, MenubarCheckboxItem, MenubarContent, MenubarGroup, MenubarItem, MenubarLabel, MenubarMenu, MenubarPortal, MenubarRadioGroup, MenubarRadioItem, MenubarSeparator, MenubarShortcut, MenubarSub, MenubarSubContent, MenubarSubTrigger, MenubarTrigger, Message, MessageActions, type MessageActionsProps, MessageAvatar, MessageContent, MessageFooter, MessageGroup, MessageHeader, MessageScroller, MessageScrollerButton, MessageScrollerContent, MessageScrollerItem, MessageScrollerProvider, MessageScrollerViewport, type ModelOption, ModelPicker, type ModelPickerProps, NativeSelect, NativeSelectOptGroup, NativeSelectOption, NavigationMenu, NavigationMenuContent, NavigationMenuIndicator, NavigationMenuItem, NavigationMenuLink, NavigationMenuList, NavigationMenuTrigger, NavigationMenuViewport, NewConversationButton, type NewConversationButtonProps, PageHeader, type PageHeaderProps, Pagination, PaginationContent, PaginationEllipsis, PaginationItem, PaginationLink, PaginationNext, PaginationPrevious, Popover, PopoverAnchor, PopoverContent, PopoverDescription, PopoverHeader, PopoverTitle, PopoverTrigger, Progress, PromptInput, PromptInputChip, type PromptInputChipProps, type PromptInputProps, PromptInputSelect, type PromptInputSelectOption, type PromptInputSelectProps, Prose, Questionnaire, QuestionnaireActions, QuestionnaireChoice, QuestionnaireChoiceDescription, QuestionnaireChoices, QuestionnaireDescription, QuestionnaireError, QuestionnaireInput, QuestionnaireItem, QuestionnaireNext, QuestionnairePrevious, QuestionnaireProgress, QuestionnaireSkip, QuestionnaireSubmit, QuestionnaireTitle, RadioGroup, RadioGroupItem, ResizableHandle, ResizablePanel, ResizablePanelGroup, type ResolvedThemeMode, ScrollArea, ScrollBar, SearchInput, type SearchInputProps, Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, SelectTrigger, SelectValue, Separator, Sheet, SheetClose, SheetContent, SheetDescription, SheetFooter, SheetHeader, SheetTitle, SheetTrigger, Sidebar, SidebarContent, SidebarFooter, SidebarGroup, SidebarGroupAction, SidebarGroupContent, SidebarGroupLabel, SidebarHeader, SidebarInput, SidebarInset, SidebarMenu, SidebarMenuAction, SidebarMenuBadge, SidebarMenuButton, SidebarMenuItem, SidebarMenuSkeleton, SidebarMenuSub, SidebarMenuSubButton, SidebarMenuSubItem, SidebarProvider, SidebarRail, SidebarSeparator, SidebarTrigger, SignupForm, type SignupFormProps, type SignupValues, Skeleton, Slider, Sparkline, type SparklineProps, Spinner, StatCard, type StatCardProps, StatusBadge, type StatusBadgeProps, type StatusBarDatum, StatusBars, type StatusBarsProps, StatusDot, type StatusDotProps, type StatusTone, Switch, Table, TableBody, TableCaption, TableCell, TableFooter, TableHead, TableHeader, TableRow, Tabs, TabsContent, TabsList, TabsTrigger, Textarea, type ThemeContextValue, type ThemeMode, ThemeProvider, type ThemeProviderProps, ThemeScript, ThemeToggle, Timeline, type TimelineItem, Toaster, Toggle, ToggleGroup, ToggleGroupItem, ToolCall, type ToolCallProps, ToolGroup, type ToolGroupProps, type ToolStatus, ToolStatusIcon, ToolStep, type ToolStepProps, Tooltip, TooltipContent, TooltipProvider, TooltipTrigger, Trace, TraceCollapsible, TraceCollapsibleContent, TraceCollapsibleTrigger, TraceDescription, TraceIcon, TraceLine, TraceTitle, TrendChart, type TrendChartProps, TrendLegend, type TrendSeries, TypingIndicator, type TypingIndicatorProps, UsageMeter, type UsageMeterProps, UserChip, type UserChipProps, badgeVariants, buttonGroupVariants, buttonVariants, cn, createDataTableColumnHelper, dataTableFeatures, groupByDate, highlightCode, initials, loadHighlighter, markerVariants, navigationMenuTriggerStyle, smoothPath, tabsListVariants, toggleVariants, useCarousel, useComboboxAnchor, useCopyToClipboard, useDirection, useHighlightedCode, useIsMobile, useMediaQuery, useMessageScroller, useMessageScrollerScrollable, useMessageScrollerVisibility, useSidebar, useSidebarOptional, useTheme };
+export { Accordion, AccordionContent, AccordionItem, AccordionTrigger, ActivityFeed, type ActivityItem, Alert, AlertAction, AlertDescription, AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogMedia, AlertDialogOverlay, AlertDialogPortal, AlertDialogTitle, AlertDialogTrigger, AlertTitle, AppBrand, type AppBrandProps, type AppNavItem, type AppNavSection, AppShell, type AppShellProps, AppleIcon, ApprovalCard, type ApprovalCardProps, ApprovalResult, type ApprovalResultProps, AspectRatio, AssistantAvatar, Attachment, AttachmentAction, AttachmentActions, AttachmentContent, AttachmentDescription, AttachmentGroup, AttachmentMedia, AttachmentTitle, AttachmentTrigger, AuthLayout, type AuthLayoutProps, type AuthProvider, Avatar, AvatarBadge, AvatarFallback, AvatarGroup, AvatarGroupCount, AvatarImage, Badge, BarList, type BarListItem, Breadcrumb, BreadcrumbEllipsis, BreadcrumbItem, BreadcrumbLink, BreadcrumbList, BreadcrumbPage, BreadcrumbSeparator, Bubble, BubbleContent, BubbleGroup, BubbleReactions, Button, ButtonGroup, ButtonGroupSeparator, ButtonGroupText, Calendar, CalendarDayButton, Callout, Card, CardAction, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, Carousel, type CarouselApi, CarouselContent, CarouselItem, CarouselNext, CarouselPrevious, type ChartConfig, ChartContainer, ChartLegend, ChartLegendContent, ChartStyle, ChartTooltip, ChartTooltipContent, ChatMessage, type ChatMessageProps, ChatPanel, type ChatPanelProps, ChatShell, type ChatShellProps, ChatThread, type ChatThreadProps, Checkbox, CodeBlock, CodeBlockActions, CodeBlockContent, CodeBlockCopyButton, CodeBlockFooter, CodeBlockHeader, CodeBlockLine, CodeBlockTitle, CodeSnippet, type CodeSnippetProps, Collapsible, CollapsibleContent, CollapsibleTrigger, Combobox, ComboboxChip, ComboboxChips, ComboboxChipsInput, ComboboxCollection, ComboboxContent, ComboboxEmpty, ComboboxGroup, ComboboxInput, ComboboxItem, ComboboxLabel, ComboboxList, ComboboxSeparator, ComboboxTrigger, ComboboxValue, Command, CommandDialog, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList, CommandSeparator, CommandShortcut, ConfirmDialog, type ConfirmDialogProps, ContextMenu, ContextMenuCheckboxItem, ContextMenuContent, ContextMenuGroup, ContextMenuItem, ContextMenuLabel, ContextMenuPortal, ContextMenuRadioGroup, ContextMenuRadioItem, ContextMenuSeparator, ContextMenuShortcut, ContextMenuSub, ContextMenuSubContent, ContextMenuSubTrigger, ContextMenuTrigger, type Conversation, type ConversationGroup, ConversationList, type ConversationListProps, CopyField, type CopyFieldProps, DataTable, type DataTableColumnDef, type DataTableFeatures, type DataTableProps, Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger, DirectionProvider, Drawer, DrawerClose, DrawerContent, DrawerDescription, DrawerFooter, DrawerHeader, DrawerOverlay, DrawerPortal, DrawerTitle, DrawerTrigger, DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuPortal, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger, Empty, EmptyContent, EmptyDescription, EmptyHeader, EmptyMedia, EmptyTitle, Field, FieldContent, FieldDescription, FieldError, FieldGroup, FieldLabel, FieldLegend, FieldSeparator, FieldSet, FieldTitle, GitHubIcon, GoogleIcon, HoverCard, HoverCardContent, HoverCardTrigger, InlineCode, Input, InputGroup, InputGroupAddon, InputGroupButton, InputGroupInput, InputGroupText, InputGroupTextarea, InputOTP, InputOTPGroup, InputOTPSeparator, InputOTPSlot, Item, ItemActions, ItemContent, ItemDescription, ItemFooter, ItemGroup, ItemHeader, ItemMedia, ItemSeparator, ItemTitle, Kbd, KbdGroup, KeyValueGrid, type KeyValueItem, Label, LinkTile, type LinkTileProps, LoginForm, type LoginFormProps, type LoginValues, Marker, MarkerContent, MarkerIcon, Menubar, MenubarCheckboxItem, MenubarContent, MenubarGroup, MenubarItem, MenubarLabel, MenubarMenu, MenubarPortal, MenubarRadioGroup, MenubarRadioItem, MenubarSeparator, MenubarShortcut, MenubarSub, MenubarSubContent, MenubarSubTrigger, MenubarTrigger, Message, MessageActions, type MessageActionsProps, MessageAvatar, MessageContent, MessageFooter, MessageGroup, MessageHeader, MessageScroller, MessageScrollerButton, MessageScrollerContent, MessageScrollerItem, MessageScrollerProvider, MessageScrollerViewport, type ModelOption, ModelPicker, type ModelPickerProps, NativeSelect, NativeSelectOptGroup, NativeSelectOption, NavigationMenu, NavigationMenuContent, NavigationMenuIndicator, NavigationMenuItem, NavigationMenuLink, NavigationMenuList, NavigationMenuTrigger, NavigationMenuViewport, NewConversationButton, type NewConversationButtonProps, PageHeader, type PageHeaderProps, Pagination, PaginationContent, PaginationEllipsis, PaginationItem, PaginationLink, PaginationNext, PaginationPrevious, Popover, PopoverAnchor, PopoverContent, PopoverDescription, PopoverHeader, PopoverTitle, PopoverTrigger, Progress, PromptInput, PromptInputChip, type PromptInputChipProps, type PromptInputProps, PromptInputSelect, type PromptInputSelectOption, type PromptInputSelectProps, Prose, Questionnaire, QuestionnaireActions, QuestionnaireChoice, QuestionnaireChoiceDescription, QuestionnaireChoices, QuestionnaireDescription, QuestionnaireError, QuestionnaireInput, QuestionnaireItem, QuestionnaireNext, QuestionnairePrevious, QuestionnaireProgress, QuestionnaireSkip, QuestionnaireSubmit, QuestionnaireTitle, RadioGroup, RadioGroupItem, ResizableHandle, ResizablePanel, ResizablePanelGroup, type ResolvedThemeMode, ScrollArea, ScrollBar, SearchInput, type SearchInputProps, Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, SelectTrigger, SelectValue, Separator, Sheet, SheetClose, SheetContent, SheetDescription, SheetFooter, SheetHeader, SheetTitle, SheetTrigger, Sidebar, SidebarCollapseButton, SidebarContent, SidebarFooter, SidebarGroup, SidebarGroupAction, SidebarGroupContent, SidebarGroupLabel, SidebarHeader, SidebarInput, SidebarInset, SidebarLayout, type SidebarLayoutProps, SidebarMenu, SidebarMenuAction, SidebarMenuBadge, SidebarMenuButton, SidebarMenuItem, SidebarMenuSkeleton, SidebarMenuSub, SidebarMenuSubButton, SidebarMenuSubItem, SidebarProvider, SidebarRail, SidebarSeparator, SidebarTrigger, SignupForm, type SignupFormProps, type SignupValues, Skeleton, Slider, Sparkline, type SparklineProps, Spinner, StatCard, type StatCardProps, StatusBadge, type StatusBadgeProps, type StatusBarDatum, StatusBars, type StatusBarsProps, StatusDot, type StatusDotProps, type StatusTone, Switch, Table, TableBody, TableCaption, TableCell, TableFooter, TableHead, TableHeader, TableRow, Tabs, TabsContent, TabsList, TabsTrigger, Textarea, type ThemeContextValue, type ThemeMode, ThemeProvider, type ThemeProviderProps, ThemeScript, ThemeToggle, Timeline, type TimelineItem, Toaster, Toggle, ToggleGroup, ToggleGroupItem, ToolCall, type ToolCallProps, ToolGroup, type ToolGroupProps, type ToolStatus, ToolStatusIcon, ToolStep, type ToolStepProps, Tooltip, TooltipContent, TooltipProvider, TooltipTrigger, Trace, TraceCollapsible, TraceCollapsibleContent, TraceCollapsibleTrigger, TraceDescription, TraceIcon, TraceLine, TraceTitle, TrendChart, type TrendChartProps, TrendLegend, type TrendSeries, TypingIndicator, type TypingIndicatorProps, UsageMeter, type UsageMeterProps, UserChip, type UserChipProps, UserMenu, type UserMenuProps, badgeVariants, buttonGroupVariants, buttonVariants, cn, createDataTableColumnHelper, dataTableFeatures, groupByDate, highlightCode, initials, loadHighlighter, markerVariants, navigationMenuTriggerStyle, smoothPath, tabsListVariants, toggleVariants, useCarousel, useComboboxAnchor, useCopyToClipboard, useDirection, useHighlightedCode, useIsMobile, useMediaQuery, useMessageScroller, useMessageScrollerScrollable, useMessageScrollerVisibility, useSidebar, useSidebarOptional, useTheme };

package/dist/index.js

@@ -72,11 +72,13 @@ import { KeyValueGrid } from "./components/admin/key-value-grid.js";
 import { LinkTile } from "./components/admin/link-tile.js";
 import { PageHeader } from "./components/admin/page-header.js";
 import { SearchInput } from "./components/admin/search-input.js";
+import { SidebarCollapseButton, SidebarLayout } from "./components/admin/sidebar-layout.js";
 import { StatCard } from "./components/admin/stat-card.js";
 import { StatusBadge, StatusDot } from "./components/admin/status.js";
 import { Timeline } from "./components/admin/timeline.js";
 import { UsageMeter } from "./components/admin/usage-meter.js";
 import { UserChip, initials } from "./components/admin/user-chip.js";
+import { UserMenu } from "./components/admin/user-menu.js";
 import { BarList } from "./components/data/bar-list.js";
 import { DataTable, createDataTableColumnHelper, dataTableFeatures } from "./components/data/data-table.js";
 import { Sparkline, smoothPath } from "./components/data/sparkline.js";
@@ -97,4 +99,4 @@ import { useMediaQuery } from "./hooks/use-media-query.js";
 import { useIsMobile } from "./hooks/use-mobile.js";
 import { highlightCode, loadHighlighter } from "./lib/highlighter.js";
 import { cn } from "./lib/utils.js";
-export { Accordion, AccordionContent, AccordionItem, AccordionTrigger, ActivityFeed, Alert, AlertAction, AlertDescription, AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogMedia, AlertDialogOverlay, AlertDialogPortal, AlertDialogTitle, AlertDialogTrigger, AlertTitle, AppBrand, AppShell, AppleIcon, ApprovalCard, ApprovalResult, AspectRatio, AssistantAvatar, Attachment, AttachmentAction, AttachmentActions, AttachmentContent, AttachmentDescription, AttachmentGroup, AttachmentMedia, AttachmentTitle, AttachmentTrigger, AuthLayout, Avatar, AvatarBadge, AvatarFallback, AvatarGroup, AvatarGroupCount, AvatarImage, Badge, BarList, Breadcrumb, BreadcrumbEllipsis, BreadcrumbItem, BreadcrumbLink, BreadcrumbList, BreadcrumbPage, BreadcrumbSeparator, Bubble, BubbleContent, BubbleGroup, BubbleReactions, Button, ButtonGroup, ButtonGroupSeparator, ButtonGroupText, Calendar, CalendarDayButton, Callout, Card, CardAction, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, Carousel, CarouselContent, CarouselItem, CarouselNext, CarouselPrevious, ChartContainer, ChartLegend, ChartLegendContent, ChartStyle, ChartTooltip, ChartTooltipContent, ChatMessage, ChatPanel, ChatShell, ChatThread, Checkbox, CodeBlock, CodeBlockActions, CodeBlockContent, CodeBlockCopyButton, CodeBlockFooter, CodeBlockHeader, CodeBlockLine, CodeBlockTitle, CodeSnippet, Collapsible, CollapsibleContent, CollapsibleTrigger, Combobox, ComboboxChip, ComboboxChips, ComboboxChipsInput, ComboboxCollection, ComboboxContent, ComboboxEmpty, ComboboxGroup, ComboboxInput, ComboboxItem, ComboboxLabel, ComboboxList, ComboboxSeparator, ComboboxTrigger, ComboboxValue, Command, CommandDialog, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList, CommandSeparator, CommandShortcut, ConfirmDialog, ContextMenu, ContextMenuCheckboxItem, ContextMenuContent, ContextMenuGroup, ContextMenuItem, ContextMenuLabel, ContextMenuPortal, ContextMenuRadioGroup, ContextMenuRadioItem, ContextMenuSeparator, ContextMenuShortcut, ContextMenuSub, ContextMenuSubContent, ContextMenuSubTrigger, ContextMenuTrigger, ConversationList, CopyField, DataTable, Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger, DirectionProvider, Drawer, DrawerClose, DrawerContent, DrawerDescription, DrawerFooter, DrawerHeader, DrawerOverlay, DrawerPortal, DrawerTitle, DrawerTrigger, DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuPortal, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger, Empty, EmptyContent, EmptyDescription, EmptyHeader, EmptyMedia, EmptyTitle, Field, FieldContent, FieldDescription, FieldError, FieldGroup, FieldLabel, FieldLegend, FieldSeparator, FieldSet, FieldTitle, GitHubIcon, GoogleIcon, HoverCard, HoverCardContent, HoverCardTrigger, InlineCode, Input, InputGroup, InputGroupAddon, InputGroupButton, InputGroupInput, InputGroupText, InputGroupTextarea, InputOTP, InputOTPGroup, InputOTPSeparator, InputOTPSlot, Item, ItemActions, ItemContent, ItemDescription, ItemFooter, ItemGroup, ItemHeader, ItemMedia, ItemSeparator, ItemTitle, Kbd, KbdGroup, KeyValueGrid, Label, LinkTile, LoginForm, Marker, MarkerContent, MarkerIcon, Menubar, MenubarCheckboxItem, MenubarContent, MenubarGroup, MenubarItem, MenubarLabel, MenubarMenu, MenubarPortal, MenubarRadioGroup, MenubarRadioItem, MenubarSeparator, MenubarShortcut, MenubarSub, MenubarSubContent, MenubarSubTrigger, MenubarTrigger, Message, MessageActions, MessageAvatar, MessageContent, MessageFooter, MessageGroup, MessageHeader, MessageScroller, MessageScrollerButton, MessageScrollerContent, MessageScrollerItem, MessageScrollerProvider, MessageScrollerViewport, ModelPicker, NativeSelect, NativeSelectOptGroup, NativeSelectOption, NavigationMenu, NavigationMenuContent, NavigationMenuIndicator, NavigationMenuItem, NavigationMenuLink, NavigationMenuList, NavigationMenuTrigger, NavigationMenuViewport, NewConversationButton, PageHeader, Pagination, PaginationContent, PaginationEllipsis, PaginationItem, PaginationLink, PaginationNext, PaginationPrevious, Popover, PopoverAnchor, PopoverContent, PopoverDescription, PopoverHeader, PopoverTitle, PopoverTrigger, Progress, PromptInput, PromptInputChip, PromptInputSelect, Prose, Questionnaire, QuestionnaireActions, QuestionnaireChoice, QuestionnaireChoiceDescription, QuestionnaireChoices, QuestionnaireDescription, QuestionnaireError, QuestionnaireInput, QuestionnaireItem, QuestionnaireNext, QuestionnairePrevious, QuestionnaireProgress, QuestionnaireSkip, QuestionnaireSubmit, QuestionnaireTitle, RadioGroup, RadioGroupItem, ResizableHandle, ResizablePanel, ResizablePanelGroup, ScrollArea, ScrollBar, SearchInput, Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, SelectTrigger, SelectValue, Separator, Sheet, SheetClose, SheetContent, SheetDescription, SheetFooter, SheetHeader, SheetTitle, SheetTrigger, Sidebar, SidebarContent, SidebarFooter, SidebarGroup, SidebarGroupAction, SidebarGroupContent, SidebarGroupLabel, SidebarHeader, SidebarInput, SidebarInset, SidebarMenu, SidebarMenuAction, SidebarMenuBadge, SidebarMenuButton, SidebarMenuItem, SidebarMenuSkeleton, SidebarMenuSub, SidebarMenuSubButton, SidebarMenuSubItem, SidebarProvider, SidebarRail, SidebarSeparator, SidebarTrigger, SignupForm, Skeleton, Slider, Sparkline, Spinner, StatCard, StatusBadge, StatusBars, StatusDot, Switch, Table, TableBody, TableCaption, TableCell, TableFooter, TableHead, TableHeader, TableRow, Tabs, TabsContent, TabsList, TabsTrigger, Textarea, ThemeProvider, ThemeScript, ThemeToggle, Timeline, Toaster, Toggle, ToggleGroup, ToggleGroupItem, ToolCall, ToolGroup, ToolStatusIcon, ToolStep, Tooltip, TooltipContent, TooltipProvider, TooltipTrigger, Trace, TraceCollapsible, TraceCollapsibleContent, TraceCollapsibleTrigger, TraceDescription, TraceIcon, TraceLine, TraceTitle, TrendChart, TrendLegend, TypingIndicator, UsageMeter, UserChip, badgeVariants, buttonGroupVariants, buttonVariants, cn, createDataTableColumnHelper, dataTableFeatures, groupByDate, highlightCode, initials, loadHighlighter, markerVariants, navigationMenuTriggerStyle, smoothPath, tabsListVariants, toggleVariants, useCarousel, useComboboxAnchor, useCopyToClipboard, useDirection, useHighlightedCode, useIsMobile, useMediaQuery, useMessageScroller, useMessageScrollerScrollable, useMessageScrollerVisibility, useSidebar, useSidebarOptional, useTheme };
+export { Accordion, AccordionContent, AccordionItem, AccordionTrigger, ActivityFeed, Alert, AlertAction, AlertDescription, AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogMedia, AlertDialogOverlay, AlertDialogPortal, AlertDialogTitle, AlertDialogTrigger, AlertTitle, AppBrand, AppShell, AppleIcon, ApprovalCard, ApprovalResult, AspectRatio, AssistantAvatar, Attachment, AttachmentAction, AttachmentActions, AttachmentContent, AttachmentDescription, AttachmentGroup, AttachmentMedia, AttachmentTitle, AttachmentTrigger, AuthLayout, Avatar, AvatarBadge, AvatarFallback, AvatarGroup, AvatarGroupCount, AvatarImage, Badge, BarList, Breadcrumb, BreadcrumbEllipsis, BreadcrumbItem, BreadcrumbLink, BreadcrumbList, BreadcrumbPage, BreadcrumbSeparator, Bubble, BubbleContent, BubbleGroup, BubbleReactions, Button, ButtonGroup, ButtonGroupSeparator, ButtonGroupText, Calendar, CalendarDayButton, Callout, Card, CardAction, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, Carousel, CarouselContent, CarouselItem, CarouselNext, CarouselPrevious, ChartContainer, ChartLegend, ChartLegendContent, ChartStyle, ChartTooltip, ChartTooltipContent, ChatMessage, ChatPanel, ChatShell, ChatThread, Checkbox, CodeBlock, CodeBlockActions, CodeBlockContent, CodeBlockCopyButton, CodeBlockFooter, CodeBlockHeader, CodeBlockLine, CodeBlockTitle, CodeSnippet, Collapsible, CollapsibleContent, CollapsibleTrigger, Combobox, ComboboxChip, ComboboxChips, ComboboxChipsInput, ComboboxCollection, ComboboxContent, ComboboxEmpty, ComboboxGroup, ComboboxInput, ComboboxItem, ComboboxLabel, ComboboxList, ComboboxSeparator, ComboboxTrigger, ComboboxValue, Command, CommandDialog, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList, CommandSeparator, CommandShortcut, ConfirmDialog, ContextMenu, ContextMenuCheckboxItem, ContextMenuContent, ContextMenuGroup, ContextMenuItem, ContextMenuLabel, ContextMenuPortal, ContextMenuRadioGroup, ContextMenuRadioItem, ContextMenuSeparator, ContextMenuShortcut, ContextMenuSub, ContextMenuSubContent, ContextMenuSubTrigger, ContextMenuTrigger, ConversationList, CopyField, DataTable, Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger, DirectionProvider, Drawer, DrawerClose, DrawerContent, DrawerDescription, DrawerFooter, DrawerHeader, DrawerOverlay, DrawerPortal, DrawerTitle, DrawerTrigger, DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuPortal, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger, Empty, EmptyContent, EmptyDescription, EmptyHeader, EmptyMedia, EmptyTitle, Field, FieldContent, FieldDescription, FieldError, FieldGroup, FieldLabel, FieldLegend, FieldSeparator, FieldSet, FieldTitle, GitHubIcon, GoogleIcon, HoverCard, HoverCardContent, HoverCardTrigger, InlineCode, Input, InputGroup, InputGroupAddon, InputGroupButton, InputGroupInput, InputGroupText, InputGroupTextarea, InputOTP, InputOTPGroup, InputOTPSeparator, InputOTPSlot, Item, ItemActions, ItemContent, ItemDescription, ItemFooter, ItemGroup, ItemHeader, ItemMedia, ItemSeparator, ItemTitle, Kbd, KbdGroup, KeyValueGrid, Label, LinkTile, LoginForm, Marker, MarkerContent, MarkerIcon, Menubar, MenubarCheckboxItem, MenubarContent, MenubarGroup, MenubarItem, MenubarLabel, MenubarMenu, MenubarPortal, MenubarRadioGroup, MenubarRadioItem, MenubarSeparator, MenubarShortcut, MenubarSub, MenubarSubContent, MenubarSubTrigger, MenubarTrigger, Message, MessageActions, MessageAvatar, MessageContent, MessageFooter, MessageGroup, MessageHeader, MessageScroller, MessageScrollerButton, MessageScrollerContent, MessageScrollerItem, MessageScrollerProvider, MessageScrollerViewport, ModelPicker, NativeSelect, NativeSelectOptGroup, NativeSelectOption, NavigationMenu, NavigationMenuContent, NavigationMenuIndicator, NavigationMenuItem, NavigationMenuLink, NavigationMenuList, NavigationMenuTrigger, NavigationMenuViewport, NewConversationButton, PageHeader, Pagination, PaginationContent, PaginationEllipsis, PaginationItem, PaginationLink, PaginationNext, PaginationPrevious, Popover, PopoverAnchor, PopoverContent, PopoverDescription, PopoverHeader, PopoverTitle, PopoverTrigger, Progress, PromptInput, PromptInputChip, PromptInputSelect, Prose, Questionnaire, QuestionnaireActions, QuestionnaireChoice, QuestionnaireChoiceDescription, QuestionnaireChoices, QuestionnaireDescription, QuestionnaireError, QuestionnaireInput, QuestionnaireItem, QuestionnaireNext, QuestionnairePrevious, QuestionnaireProgress, QuestionnaireSkip, QuestionnaireSubmit, QuestionnaireTitle, RadioGroup, RadioGroupItem, ResizableHandle, ResizablePanel, ResizablePanelGroup, ScrollArea, ScrollBar, SearchInput, Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, SelectTrigger, SelectValue, Separator, Sheet, SheetClose, SheetContent, SheetDescription, SheetFooter, SheetHeader, SheetTitle, SheetTrigger, Sidebar, SidebarCollapseButton, SidebarContent, SidebarFooter, SidebarGroup, SidebarGroupAction, SidebarGroupContent, SidebarGroupLabel, SidebarHeader, SidebarInput, SidebarInset, SidebarLayout, SidebarMenu, SidebarMenuAction, SidebarMenuBadge, SidebarMenuButton, SidebarMenuItem, SidebarMenuSkeleton, SidebarMenuSub, SidebarMenuSubButton, SidebarMenuSubItem, SidebarProvider, SidebarRail, SidebarSeparator, SidebarTrigger, SignupForm, Skeleton, Slider, Sparkline, Spinner, StatCard, StatusBadge, StatusBars, StatusDot, Switch, Table, TableBody, TableCaption, TableCell, TableFooter, TableHead, TableHeader, TableRow, Tabs, TabsContent, TabsList, TabsTrigger, Textarea, ThemeProvider, ThemeScript, ThemeToggle, Timeline, Toaster, Toggle, ToggleGroup, ToggleGroupItem, ToolCall, ToolGroup, ToolStatusIcon, ToolStep, Tooltip, TooltipContent, TooltipProvider, TooltipTrigger, Trace, TraceCollapsible, TraceCollapsibleContent, TraceCollapsibleTrigger, TraceDescription, TraceIcon, TraceLine, TraceTitle, TrendChart, TrendLegend, TypingIndicator, UsageMeter, UserChip, UserMenu, badgeVariants, buttonGroupVariants, buttonVariants, cn, createDataTableColumnHelper, dataTableFeatures, groupByDate, highlightCode, initials, loadHighlighter, markerVariants, navigationMenuTriggerStyle, smoothPath, tabsListVariants, toggleVariants, useCarousel, useComboboxAnchor, useCopyToClipboard, useDirection, useHighlightedCode, useIsMobile, useMediaQuery, useMessageScroller, useMessageScrollerScrollable, useMessageScrollerVisibility, useSidebar, useSidebarOptional, useTheme };

package/docs/COMPONENTS.md

@@ -105,11 +105,29 @@ Every component in the shadcn registry is included. (shadcn's `form` item is an
 
 ## Admin and layout
 
+### `SidebarLayout`, `SidebarCollapseButton`
+
+The base layout every shell is built on: a sidebar (brand, actions, scrolling body, footer) next to the main column. On desktop a collapse button shrinks the sidebar to an icon rail (logo tile, icon actions, avatar); on mobile it is a sheet opened with a `SidebarTrigger`. Harebear parts adapt to the rail by themselves (`AppBrand`, `UserChip`, `UserMenu`, `NewConversationButton`, `SearchInput`, `ConversationList`, nav `SidebarMenuButton`s with `tooltip`).
+
+Props: `brand?`, `sidebarActions?`, `sidebar?` (body), `sidebarFooter?`, `collapsible?` (`"icon"` default, `"offcanvas"` hides it entirely, `"none"` always expanded on desktop), `storageKey?` (remember collapsed state in localStorage, applied after hydration so SSR matches), `defaultOpen?`, `width?` (default `"16rem"`; the rail is `4.25rem`), `className?` (main column), `children` (main column).
+`SidebarCollapseButton`: the collapse/expand button with a tooltip, for custom `Sidebar` layouts. Renders nothing on mobile.
+
+```tsx
+;<SidebarLayout
+  storageKey="app-sidebar"
+  brand={<AppBrand name="Console" icon={<SparklesIcon />} />}
+  sidebar={<MyNav />}
+  sidebarFooter={<UserMenu name={user.name} onSignOut={signOut} />}
+>
+  <MyPage />
+</SidebarLayout>
+```
+
 ### `AppShell`
 
-Full app layout: collapsible sidebar (a sheet on mobile) plus a main column with a top bar.
+Admin layout on `SidebarLayout`: nav sidebar that collapses to an icon rail (nav items show their label as a tooltip there; badges and `sidebarExtra` hide) plus a main column with a top bar.
 
-Props: `brand` (node, usually `AppBrand`), `nav: AppNavSection[]`, `sidebarExtra` (node under the nav), `sidebarFooter` (node, usually `UserChip`), `header` (top bar content), `linkComponent` (e.g. Next.js `Link`; default `"a"`), `defaultOpen`, `children` (page content, laid out in a column with 28px gaps).
+Props: `brand` (node, usually `AppBrand`), `sidebarActions?`, `nav: AppNavSection[]`, `sidebarExtra` (node under the nav), `sidebarFooter` (node, usually `UserMenu`), `header` (top bar content), `linkComponent` (e.g. Next.js `Link`; default `"a"`), `collapsible?` (default `"icon"`), `storageKey?`, `defaultOpen`, `children` (page content, laid out in a column with 28px gaps).
 
 `AppNavSection = { label?: string; items: AppNavItem[] }`
 `AppNavItem = { label: string; icon?: ReactNode; href?: string; onSelect?: () => void; active?: boolean; badge?: ReactNode }`
@@ -195,6 +213,19 @@ Label-over-value pairs as a `<dl>`. Props: `items: { label; value }[]`, `columns
 
 Avatar + name + subtitle. Props: `name`, `subtitle?`, `avatarUrl?`, `action?`, `size?`. In a sidebar icon rail only the avatar shows. Also exports `initials(name)`.
 
+### `UserMenu`
+
+The signed-in user as a menu button (sidebar footer or top bar). The menu has a header, your items (`children`, e.g. a Settings `DropdownMenuItem`), a Light / Dark / System theme choice, and Sign out. In a sidebar icon rail the trigger is just the avatar and the menu opens to the side. Props: `name`, `subtitle?`, `avatarUrl?`, `children?`, `themeSwitch?` (default true, needs `ThemeProvider`), `onSignOut?`, `signOutLabel?`.
+
+```tsx
+;<UserMenu name={email} subtitle="Signed in" onSignOut={signOut}>
+  <DropdownMenuItem onSelect={() => setSettingsOpen(true)}>
+    <SettingsIcon />
+    Settings
+  </DropdownMenuItem>
+</UserMenu>
+```
+
 ### `ConfirmDialog`
 
 Controlled "are you sure" dialog. Props: `open`, `onOpenChange`, `title`, `description?`, `confirmLabel?`, `cancelLabel?`, `destructive?` (red confirm), `onConfirm`.
@@ -257,11 +288,11 @@ Mini bar history (pings, uptime). Props: `data: (number | { value; tone?; label?
 
 ## AI and chat
 
-A chat screen is `ChatShell` (sidebar with `AppBrand`, `NewConversationButton`, `ConversationList`, `UserChip`; optional details panel) around a `ChatPanel` (header, thread, `PromptInput`). Agent apps add `ToolGroup`/`ToolStep` for tool calls and `ApprovalCard`/`ApprovalResult` for permission prompts. See `playground/screens/chat.tsx` and `playground/screens/agent.tsx`.
+A chat screen is `ChatShell` (sidebar with `AppBrand`, `NewConversationButton`, `ConversationList`, `UserMenu`; optional details panel) around a `ChatPanel` (header, thread, `PromptInput`). Agent apps add `ToolGroup`/`ToolStep` for tool calls and `ApprovalCard`/`ApprovalResult` for permission prompts. See `playground/screens/chat.tsx` and `playground/screens/agent.tsx`.
 
 ### `ChatShell`
 
-Full-height chat layout. The sidebar collapses to an icon rail on desktop (logo, actions, expand button, avatar) and is a sheet on mobile. Props: `brand?`, `sidebarActions?` (stays in the rail), `sidebar?` (hidden in the rail), `sidebarFooter?`, `details?` (right panel: inline at 1280px and up, a sheet below; `ChatPanel` gets a toggle button), `detailsTitle?` (default "Details"), `defaultDetailsOpen?`, `storageKey?` (remember collapsed state in localStorage), `defaultOpen?`, `children` (a `ChatPanel`). Includes a `TooltipProvider`.
+Full-height chat layout on `SidebarLayout`, so the sidebar collapses to an icon rail on desktop (logo, actions, expand button, avatar) and is a sheet on mobile. Props: `brand?`, `sidebarActions?` (stays in the rail), `sidebar?` (hidden in the rail), `sidebarFooter?`, `collapsible?`, `details?` (right panel: inline at 1280px and up, a sheet below; `ChatPanel` gets a toggle button), `detailsTitle?` (default "Details"), `defaultDetailsOpen?`, `storageKey?` (remember collapsed state in localStorage), `defaultOpen?`, `children` (a `ChatPanel`). Includes a `TooltipProvider`.
 
 ```tsx
 ;<ChatShell
@@ -269,7 +300,7 @@ Full-height chat layout. The sidebar collapses to an icon rail on desktop (logo,
   brand={<AppBrand name="netadmin" subtitle="Home network agent" icon={<TerminalIcon />} />}
   sidebarActions={<NewConversationButton onClick={newChat} />}
   sidebar={<ConversationList groups={groupByDate(chats, (c) => c.updated, toRow)} activeId={id} onSelect={open} />}
-  sidebarFooter={<UserChip name={email} subtitle="Signed in" action={<ThemeToggle />} />}
+  sidebarFooter={<UserMenu name={email} subtitle="Signed in" onSignOut={signOut} />}
   details={<Card size="sm">…</Card>}
   detailsTitle="Conversation details"
 >

package/llms.txt

@@ -27,7 +27,7 @@
 ## Component index
 
 Theme: ThemeProvider, useTheme, ThemeToggle, ThemeScript
-Layout/admin: AppShell, AppBrand, PageHeader, StatCard, SearchInput, StatusDot, StatusBadge, UsageMeter, ActivityFeed, Timeline, KeyValueGrid, UserChip, Callout, LinkTile, ConfirmDialog, CopyField
+Layout/admin: SidebarLayout, SidebarCollapseButton, AppShell, AppBrand, PageHeader, StatCard, SearchInput, StatusDot, StatusBadge, UsageMeter, ActivityFeed, Timeline, KeyValueGrid, UserChip, UserMenu, Callout, LinkTile, ConfirmDialog, CopyField
 Data: DataTable, createDataTableColumnHelper, TrendChart, TrendLegend, BarList, Sparkline, StatusBars
 AI/chat composites: ChatShell, ChatPanel, ChatThread, ChatMessage, AssistantAvatar, MessageActions, PromptInput, PromptInputChip, PromptInputSelect, ModelPicker, ConversationList, NewConversationButton, groupByDate, ToolCall, ToolGroup, ToolStep, ToolStatusIcon, ApprovalCard, ApprovalResult, TypingIndicator, CodeSnippet, InlineCode, Prose
 AI/chat primitives (shadcn): Message, Bubble, MessageScroller, Attachment, Trace, Marker, Questionnaire, CodeBlock

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "harebear-ui",
-  "version": "0.3.0",
+  "version": "0.5.0",
   "description": "Opinionated, pre-themed shadcn/ui component library for React 19 + Tailwind CSS v4. Admin, data, and AI chat building blocks, ready for agents.",
   "license": "MIT",
   "author": "Harrison Milbradt",

package/skills/harebear-ui/SKILL.md

@@ -22,9 +22,9 @@ This project uses `harebear-ui` for all UI. Its theme, tokens, and components ar
 - Status uses a tone prop: `success | warning | danger | info | neutral` (StatusBadge, StatusDot, Timeline, StatusBars, LinkTile).
 - Icons are lucide-react elements passed as nodes: `icon={<UsersIcon />}`. Icon-only buttons need `aria-label`.
 - Compose `className` with `cn()` from harebear-ui.
-- Lay out pages as columns of `Card`s with `gap-5`, page sections with `gap-7`. Use `PageHeader` for page titles and `AppShell` for sidebar apps.
+- Lay out pages as columns of `Card`s with `gap-5`, page sections with `gap-7`. Use `PageHeader` for page titles and `AppShell` for sidebar apps. Every shell (`AppShell`, `ChatShell`) is built on `SidebarLayout`, which gives the collapsible icon rail; use it directly for other sidebar layouts instead of the raw Sidebar primitives.
 - DataTable columns: define with `createDataTableColumnHelper<Row>()` at module scope, pass `getRowId`.
-- Chat apps: `ChatShell` (sidebar: `AppBrand`, `NewConversationButton`, `ConversationList` + `groupByDate`, `UserChip`; optional `details` panel) around a `ChatPanel` (title, actions, `notice`, `composer`). Don't hand-build the sidebar, rail or panel.
+- Chat apps: `ChatShell` (sidebar: `AppBrand`, `NewConversationButton`, `ConversationList` + `groupByDate`, `UserMenu`; optional `details` panel) around a `ChatPanel` (title, actions, `notice`, `composer`). Don't hand-build the sidebar, rail or panel.
 - Chat content: `ChatMessage role="user" | "assistant"`; render model output inside `Prose`; composer is `PromptInput` (+ `PromptInputChip`, `PromptInputSelect`); code is `CodeSnippet`; agent tool calls are `ToolGroup`/`ToolStep` (or the lighter `Trace`); permission prompts are `ApprovalCard`/`ApprovalResult`; working state is `TypingIndicator label`; clarifying questions are `Questionnaire`.
 - Notices: `Alert variant="warning" | "success" | "info" | "destructive"`. Confirmations: `ConfirmDialog`. Copyable IDs: `CopyField`. Live status: `StatusDot`/`StatusBadge` with `pulse`.
 - If you need a className to fix spacing, color, wrapping or borders on a harebear component, that is a library gap: report it instead of overriding.