harebear-ui 0.4.0 → 0.6.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/status.d.ts

@@ -12,7 +12,9 @@ export interface StatusBadgeProps extends React.ComponentProps<typeof Badge> {
   tone?: StatusTone;
   /** Pulse the dot. */
   pulse?: boolean;
+  /** Below 640px show only the dot; the label stays for screen readers. For crowded mobile headers. */
+  compact?: boolean;
 }
 /** Pill with a status dot and label, e.g. Paid / Pending / Refunded. `size="lg"` lines up with sm buttons. */
-declare function StatusBadge({ tone, pulse, variant, children, className, ...props }: StatusBadgeProps): React.JSX.Element;
+declare function StatusBadge({ tone, pulse, compact, variant, children, className, ...props }: StatusBadgeProps): React.JSX.Element;
 export { StatusBadge, StatusDot };

package/dist/components/admin/status.js

@@ -20,7 +20,7 @@ function StatusDot({ tone = "neutral", pulse, className, ...props }) {
 	});
 }
 /** Pill with a status dot and label, e.g. Paid / Pending / Refunded. `size="lg"` lines up with sm buttons. */
-function StatusBadge({ tone = "neutral", pulse, variant = "secondary", children, className, ...props }) {
+function StatusBadge({ tone = "neutral", pulse, compact, variant = "secondary", children, className, ...props }) {
 	return /* @__PURE__ */ jsxs(Badge, {
 		"data-slot": "status-badge",
 		variant,
@@ -29,7 +29,10 @@ function StatusBadge({ tone = "neutral", pulse, variant = "secondary", children,
 		children: [/* @__PURE__ */ jsx(StatusDot, {
 			tone,
 			pulse
-		}), children]
+		}), compact ? /* @__PURE__ */ jsx("span", {
+			className: "sr-only sm:not-sr-only",
+			children
+		}) : children]
 	});
 }
 export { StatusBadge, StatusDot };

package/dist/components/ai/approval.d.ts

@@ -14,12 +14,14 @@ export interface ApprovalCardProps extends Omit<React.ComponentProps<"section">,
   actions?: React.ReactNode;
   /** Small print under the actions. */
   footer?: React.ReactNode;
+  /** Why the agent wants this, shown first in the body after a bold "Why:". */
+  reason?: React.ReactNode;
 }
 /**
  * Highlighted card for anything the agent is waiting on the user for: a tool approval, a question, a choice.
  * Body text goes in children (e.g. the agent's reason).
  */
-declare function ApprovalCard({ title, description, icon, code, codeLabel, actions, footer, className, children, ...props }: ApprovalCardProps): React.JSX.Element;
+declare function ApprovalCard({ title, description, icon, code, codeLabel, actions, footer, reason, className, children, ...props }: ApprovalCardProps): React.JSX.Element;
 export interface ApprovalResultProps extends React.ComponentProps<"div"> {
   decision: "approved" | "denied";
   /** Trailing time, e.g. "10:42". */

package/dist/components/ai/approval.js

@@ -9,7 +9,7 @@ import { CheckIcon, ShieldAlertIcon, XIcon } from "lucide-react";
 * Highlighted card for anything the agent is waiting on the user for: a tool approval, a question, a choice.
 * Body text goes in children (e.g. the agent's reason).
 */
-function ApprovalCard({ title, description, icon = /* @__PURE__ */ jsx(ShieldAlertIcon, {}), code, codeLabel, actions, footer, className, children, ...props }) {
+function ApprovalCard({ title, description, icon = /* @__PURE__ */ jsx(ShieldAlertIcon, {}), code, codeLabel, actions, footer, reason, className, children, ...props }) {
 	const id = React.useId();
 	return /* @__PURE__ */ jsxs("section", {
 		"data-slot": "approval-card",
@@ -34,9 +34,12 @@ function ApprovalCard({ title, description, icon = /* @__PURE__ */ jsx(ShieldAle
 					})]
 				})]
 			}),
-			children && /* @__PURE__ */ jsx("div", {
+			(reason || children) && /* @__PURE__ */ jsxs("div", {
 				className: "text-[14.5px] leading-relaxed whitespace-pre-wrap wrap-anywhere [&_strong]:font-semibold",
-				children
+				children: [reason && /* @__PURE__ */ jsxs("p", { children: [/* @__PURE__ */ jsx("strong", { children: "Why: " }), reason] }), reason && children ? /* @__PURE__ */ jsx("div", {
+					className: "mt-2",
+					children
+				}) : children]
 			}),
 			code !== void 0 && /* @__PURE__ */ jsxs(CodeBlock, { children: [/* @__PURE__ */ jsxs(CodeBlockHeader, { children: [/* @__PURE__ */ jsx(CodeBlockTitle, { children: codeLabel ?? "command" }), /* @__PURE__ */ jsx(CodeBlockActions, { children: /* @__PURE__ */ jsx(CodeBlockCopyButton, { value: code }) })] }), /* @__PURE__ */ jsx(CodeBlockContent, {
 				wrap: true,

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. */
@@ -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 has-data-[slot=user-menu-trigger]: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/components/ai/chat.d.ts

@@ -10,8 +10,11 @@ export interface ChatThreadProps extends React.ComponentProps<"div"> {
 declare function ChatThread({ autoScroll, className, contentClassName, children, ...props }: ChatThreadProps): React.JSX.Element;
 export interface ChatMessageProps extends React.ComponentProps<"div"> {
   role: "user" | "assistant";
-  /** Assistant avatar. Defaults to a sparkle in a tinted circle. */
-  avatar?: React.ReactNode;
+  /**
+   * Assistant avatar. Defaults to a sparkle in a tinted circle. `false` renders no avatar and lets the content use
+   * the full width, for agent threads where one turn is many blocks (text, tool groups, approvals).
+   */
+  avatar?: React.ReactNode | false;
   /** Rendered under assistant content, usually <MessageActions />. */
   actions?: React.ReactNode;
   /** User bubble color: "muted" (gray, default) or "soft" (tinted with the accent). */

package/dist/components/ai/chat.js

@@ -58,7 +58,7 @@ function ChatMessage({ role, avatar, actions, variant = "muted", className, chil
 		"data-role": "assistant",
 		className: cn("flex items-start gap-4", className),
 		...props,
-		children: [avatar ?? /* @__PURE__ */ jsx(AssistantAvatar, {}), /* @__PURE__ */ jsxs("div", {
+		children: [avatar === false ? null : avatar ?? /* @__PURE__ */ jsx(AssistantAvatar, {}), /* @__PURE__ */ jsxs("div", {
 			className: "flex min-w-0 flex-1 flex-col gap-3.5",
 			children: [children, actions]
 		})]

package/dist/components/ai/code-block.d.ts

@@ -17,7 +17,11 @@ export interface CodeSnippetProps extends Omit<React.ComponentProps<typeof CodeB
  */
 declare function CodeSnippet({ code, language, highlight, lineNumbers, hideCopy, className, ...props }: CodeSnippetProps): React.JSX.Element;
 /** Inline monospace span for commands and identifiers. */
-declare function InlineCode({ className, ...props }: React.ComponentProps<"code">): React.JSX.Element;
+export interface InlineCodeProps extends React.ComponentProps<"code"> {
+  /** Cut string children longer than this many characters with an ellipsis; the full text becomes the tooltip. */
+  truncate?: number;
+}
+declare function InlineCode({ truncate, className, children, title, ...props }: InlineCodeProps): React.JSX.Element;
 /**
  * Typography for long-form and model output. Styles plain HTML children
  * (p, ul, ol, li, strong, a, code, pre, h1-h4, blockquote, table), so it works