harebear-ui 0.2.2 → 0.3.0

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

@@ -21,7 +21,10 @@ export interface AppBrandProps extends React.ComponentProps<"div"> {
   /** Optional trailing control, e.g. a workspace switcher button. */
   action?: React.ReactNode;
 }
-/** Logo tile + product name. Used in the sidebar header or a top bar. */
+/**
+ * Logo tile + product name. Used in the sidebar header or a top bar.
+ * In a sidebar collapsed to its icon rail, only the tile shows.
+ */
 declare function AppBrand({ name, subtitle, icon, action, className, ...props }: AppBrandProps): React.JSX.Element;
 export interface AppShellProps {
   /** Sidebar header content, usually <AppBrand />. */

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

@@ -4,11 +4,14 @@ import { Sidebar, SidebarContent, SidebarFooter, SidebarGroup, SidebarGroupLabel
 import { cn } from "../../lib/utils.js";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 // src/components/admin/app-shell.tsx
-/** Logo tile + product name. Used in the sidebar header or a top bar. */
+/**
+* Logo tile + product name. Used in the sidebar header or a top bar.
+* In a sidebar collapsed to its icon rail, only the tile shows.
+*/
 function AppBrand({ name, subtitle, icon, action, className, ...props }) {
 	return /* @__PURE__ */ jsxs("div", {
 		"data-slot": "app-brand",
-		className: cn("flex items-center gap-3", className),
+		className: cn("flex items-center gap-3 group-data-[collapsible=icon]:justify-center", className),
 		...props,
 		children: [
 			icon && /* @__PURE__ */ jsx("div", {
@@ -16,7 +19,7 @@ function AppBrand({ name, subtitle, icon, action, className, ...props }) {
 				children: icon
 			}),
 			/* @__PURE__ */ jsxs("div", {
-				className: "min-w-0 flex-1",
+				className: "min-w-0 flex-1 group-data-[collapsible=icon]:hidden",
 				children: [/* @__PURE__ */ jsx("div", {
 					className: "truncate text-[15px] font-semibold",
 					children: name
@@ -25,7 +28,10 @@ function AppBrand({ name, subtitle, icon, action, className, ...props }) {
 					children: subtitle
 				})]
 			}),
-			action
+			action && /* @__PURE__ */ jsx("div", {
+				className: "contents group-data-[collapsible=icon]:hidden",
+				children: action
+			})
 		]
 	});
 }
@@ -37,54 +43,51 @@ function AppShell({ brand, nav = [], sidebarExtra, sidebarFooter, header, linkCo
 	return /* @__PURE__ */ jsxs(SidebarProvider, {
 		defaultOpen,
 		style: { "--sidebar-width": "15.75rem" },
-		children: [/* @__PURE__ */ jsxs(Sidebar, {
-			className: "border-r-0",
-			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: [
+		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 })
-							] })
-						}) }, 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, {
+							]
+						}) : /* @__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",
+					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",

package/dist/components/admin/confirm-dialog.d.ts

@@ -0,0 +1,17 @@
+import * as React from "react";
+export interface ConfirmDialogProps {
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+  title: React.ReactNode;
+  description?: React.ReactNode;
+  /** Default "Confirm". */
+  confirmLabel?: React.ReactNode;
+  /** Default "Cancel". */
+  cancelLabel?: React.ReactNode;
+  /** Red confirm button, for deletes and other destructive actions. */
+  destructive?: boolean;
+  onConfirm: () => void;
+}
+/** Controlled "Are you sure?" dialog: title, explanation, cancel and confirm. Closes after either choice. */
+declare function ConfirmDialog({ open, onOpenChange, title, description, confirmLabel, cancelLabel, destructive, onConfirm }: ConfirmDialogProps): React.JSX.Element;
+export { ConfirmDialog };

package/dist/components/admin/confirm-dialog.js

@@ -0,0 +1,20 @@
+"use client";
+import { AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogTitle } from "../ui/alert-dialog.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+// src/components/admin/confirm-dialog.tsx
+/** Controlled "Are you sure?" dialog: title, explanation, cancel and confirm. Closes after either choice. */
+function ConfirmDialog({ open, onOpenChange, title, description, confirmLabel = "Confirm", cancelLabel = "Cancel", destructive, onConfirm }) {
+	return /* @__PURE__ */ jsx(AlertDialog, {
+		open,
+		onOpenChange,
+		children: /* @__PURE__ */ jsxs(AlertDialogContent, {
+			"data-slot": "confirm-dialog",
+			children: [/* @__PURE__ */ jsxs(AlertDialogHeader, { children: [/* @__PURE__ */ jsx(AlertDialogTitle, { children: title }), description && /* @__PURE__ */ jsx(AlertDialogDescription, { children: description })] }), /* @__PURE__ */ jsxs(AlertDialogFooter, { children: [/* @__PURE__ */ jsx(AlertDialogCancel, { children: cancelLabel }), /* @__PURE__ */ jsx(AlertDialogAction, {
+				variant: destructive ? "destructive" : "default",
+				onClick: onConfirm,
+				children: confirmLabel
+			})] })]
+		})
+	});
+}
+export { ConfirmDialog };

package/dist/components/admin/copy-field.d.ts

@@ -0,0 +1,17 @@
+import { InputGroup } from "../ui/input-group.js";
+import * as React from "react";
+export interface CopyFieldProps extends Omit<React.ComponentProps<typeof InputGroup>, "children"> {
+  /** The text copied. */
+  value: string;
+  /** What the field shows, if not the full value (e.g. a file name for a path). The full value is the tooltip. */
+  display?: string;
+  /** Leading label inside the field, e.g. "File" or "ID". */
+  label?: React.ReactNode;
+  /** Accessible name for the field. Default "Value". */
+  "aria-label"?: string;
+  /** Monospace text. Default true. */
+  mono?: boolean;
+}
+/** Read-only value with a copy button: IDs, paths, tokens' public parts, URLs. */
+declare function CopyField({ value, display, label, mono, "aria-label": name, className, ...props }: CopyFieldProps): React.JSX.Element;
+export { CopyField };

package/dist/components/admin/copy-field.js

@@ -0,0 +1,37 @@
+"use client";
+import { InputGroup, InputGroupAddon, InputGroupButton, InputGroupInput, InputGroupText } from "../ui/input-group.js";
+import { useCopyToClipboard } from "../../hooks/use-copy-to-clipboard.js";
+import { cn } from "../../lib/utils.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { CheckIcon, CopyIcon } from "lucide-react";
+// src/components/admin/copy-field.tsx
+/** Read-only value with a copy button: IDs, paths, tokens' public parts, URLs. */
+function CopyField({ value, display, label, mono = true, "aria-label": name = "Value", className, ...props }) {
+	const { copied, copy } = useCopyToClipboard();
+	return /* @__PURE__ */ jsxs(InputGroup, {
+		"data-slot": "copy-field",
+		className,
+		...props,
+		children: [
+			label && /* @__PURE__ */ jsx(InputGroupAddon, { children: /* @__PURE__ */ jsx(InputGroupText, { children: label }) }),
+			/* @__PURE__ */ jsx(InputGroupInput, {
+				readOnly: true,
+				value: display ?? value,
+				title: value,
+				"aria-label": name,
+				className: cn(mono && "font-mono"),
+				onFocus: (e) => e.currentTarget.select()
+			}),
+			/* @__PURE__ */ jsx(InputGroupAddon, {
+				align: "inline-end",
+				children: /* @__PURE__ */ jsx(InputGroupButton, {
+					size: "icon-xs",
+					"aria-label": `Copy ${name.toLowerCase()}`,
+					onClick: () => copy(value),
+					children: copied ? /* @__PURE__ */ jsx(CheckIcon, {}) : /* @__PURE__ */ jsx(CopyIcon, {})
+				})
+			})
+		]
+	});
+}
+export { CopyField };

package/dist/components/admin/search-input.js

@@ -10,7 +10,7 @@ function SearchInput({ shortcut, size = "default", className, wrapperClassName,
 	const lg = size === "lg";
 	return /* @__PURE__ */ jsxs("label", {
 		"data-slot": "search-input",
-		className: cn("relative block", wrapperClassName),
+		className: cn("relative block group-data-[collapsible=icon]:hidden", wrapperClassName),
 		children: [
 			/* @__PURE__ */ jsx(SearchIcon, {
 				"aria-hidden": "true",

package/dist/components/admin/status.d.ts

@@ -1,12 +1,18 @@
 import { Badge } from "../ui/badge.js";
 import * as React from "react";
 export type StatusTone = "success" | "warning" | "danger" | "info" | "neutral";
-/** Small colored dot. Use for status, legends, and project markers. */
-declare function StatusDot({ tone, className, ...props }: React.ComponentProps<"span"> & {
+export interface StatusDotProps extends React.ComponentProps<"span"> {
   tone?: StatusTone;
-}): React.JSX.Element;
-/** Pill with a status dot and label, e.g. Paid / Pending / Refunded. */
-declare function StatusBadge({ tone, variant, children, className, ...props }: React.ComponentProps<typeof Badge> & {
+  /** Pulse the dot, for live states like "working" or "connecting". */
+  pulse?: boolean;
+}
+/** Small colored dot. Use for status, legends, and project markers. */
+declare function StatusDot({ tone, pulse, className, ...props }: StatusDotProps): React.JSX.Element;
+export interface StatusBadgeProps extends React.ComponentProps<typeof Badge> {
   tone?: StatusTone;
-}): React.JSX.Element;
+  /** Pulse the dot. */
+  pulse?: 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;
 export { StatusBadge, StatusDot };

package/dist/components/admin/status.js

@@ -11,22 +11,25 @@ const toneColor = {
 	neutral: "bg-muted-foreground"
 };
 /** Small colored dot. Use for status, legends, and project markers. */
-function StatusDot({ tone = "neutral", className, ...props }) {
+function StatusDot({ tone = "neutral", pulse, className, ...props }) {
 	return /* @__PURE__ */ jsx("span", {
 		"data-slot": "status-dot",
 		"aria-hidden": "true",
-		className: cn("inline-block size-2 shrink-0 rounded-full", toneColor[tone], className),
+		className: cn("inline-block size-2 shrink-0 rounded-full", toneColor[tone], pulse && "animate-pulse motion-reduce:animate-none", className),
 		...props
 	});
 }
-/** Pill with a status dot and label, e.g. Paid / Pending / Refunded. */
-function StatusBadge({ tone = "neutral", variant = "secondary", children, 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 }) {
 	return /* @__PURE__ */ jsxs(Badge, {
 		"data-slot": "status-badge",
 		variant,
 		className,
 		...props,
-		children: [/* @__PURE__ */ jsx(StatusDot, { tone }), children]
+		children: [/* @__PURE__ */ jsx(StatusDot, {
+			tone,
+			pulse
+		}), children]
 	});
 }
 export { StatusBadge, StatusDot };

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

@@ -9,6 +9,6 @@ export interface UserChipProps extends React.ComponentProps<"div"> {
   action?: React.ReactNode;
   size?: "sm" | "default" | "lg";
 }
-/** Avatar + name + secondary line. */
+/** Avatar + name + secondary line. In a sidebar collapsed to its icon rail, only the avatar shows. */
 declare function UserChip({ name, subtitle, avatarUrl, action, size, className, ...props }: UserChipProps): React.JSX.Element;
 export { UserChip };

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

@@ -7,11 +7,11 @@ import { jsx, jsxs } from "react/jsx-runtime";
 function initials(name) {
 	return name.split(/\s+/).filter(Boolean).slice(0, 2).map((p) => p[0]?.toUpperCase()).join("");
 }
-/** Avatar + name + secondary line. */
+/** Avatar + name + secondary line. In a sidebar collapsed to its icon rail, only the avatar shows. */
 function UserChip({ name, subtitle, avatarUrl, action, size = "default", className, ...props }) {
 	return /* @__PURE__ */ jsxs("div", {
 		"data-slot": "user-chip",
-		className: cn("flex min-w-0 items-center gap-3", className),
+		className: cn("flex min-w-0 items-center gap-3 group-data-[collapsible=icon]:justify-center", className),
 		...props,
 		children: [
 			/* @__PURE__ */ jsxs(Avatar, {
@@ -22,7 +22,7 @@ function UserChip({ name, subtitle, avatarUrl, action, size = "default", classNa
 				}), /* @__PURE__ */ jsx(AvatarFallback, { children: initials(name) })]
 			}),
 			/* @__PURE__ */ jsxs("div", {
-				className: "min-w-0 flex-1 leading-snug",
+				className: "min-w-0 flex-1 leading-snug group-data-[collapsible=icon]:hidden",
 				children: [/* @__PURE__ */ jsx("div", {
 					className: cn("truncate font-medium", size === "lg" && "text-lg font-semibold"),
 					children: name
@@ -31,7 +31,10 @@ function UserChip({ name, subtitle, avatarUrl, action, size = "default", classNa
 					children: subtitle
 				})]
 			}),
-			action
+			action && /* @__PURE__ */ jsx("div", {
+				className: "contents group-data-[collapsible=icon]:hidden",
+				children: action
+			})
 		]
 	});
 }

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

@@ -0,0 +1,30 @@
+import * as React from "react";
+export interface ApprovalCardProps extends Omit<React.ComponentProps<"section">, "title"> {
+  /** e.g. "Approval needed: run a command on services". */
+  title: React.ReactNode;
+  /** Small line under the title, e.g. the permission mode and when it was asked. */
+  description?: React.ReactNode;
+  /** Leading icon in a warning-tinted circle. Default a shield. Pass null for none. */
+  icon?: React.ReactNode;
+  /** The exact command or change, shown in a wrapped code block with a copy button. */
+  code?: string;
+  /** Label above the code, e.g. "bash". */
+  codeLabel?: React.ReactNode;
+  /** The choices, usually Buttons: approve, approve for the session, deny. */
+  actions?: React.ReactNode;
+  /** Small print under the actions. */
+  footer?: 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;
+export interface ApprovalResultProps extends React.ComponentProps<"div"> {
+  decision: "approved" | "denied";
+  /** Trailing time, e.g. "10:42". */
+  time?: React.ReactNode;
+}
+/** One-line record of a decision in the thread, e.g. "You approved `docker restart x`, once". */
+declare function ApprovalResult({ decision, time, className, children, ...props }: ApprovalResultProps): React.JSX.Element;
+export { ApprovalCard, ApprovalResult };

package/dist/components/ai/approval.js

@@ -0,0 +1,81 @@
+"use client";
+import { CodeBlock, CodeBlockActions, CodeBlockContent, CodeBlockCopyButton, CodeBlockHeader, CodeBlockTitle } from "../ui/code-block.js";
+import { cn } from "../../lib/utils.js";
+import * as React from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { CheckIcon, ShieldAlertIcon, XIcon } from "lucide-react";
+// src/components/ai/approval.tsx
+/**
+* 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 }) {
+	const id = React.useId();
+	return /* @__PURE__ */ jsxs("section", {
+		"data-slot": "approval-card",
+		"aria-labelledby": id,
+		className: cn("flex min-w-0 flex-col gap-4 rounded-xl border border-warning/50 bg-card px-5.5 py-5 ring-4 ring-warning/10", className),
+		...props,
+		children: [
+			/* @__PURE__ */ jsxs("div", {
+				className: "flex items-center gap-3",
+				children: [icon && /* @__PURE__ */ jsx("span", {
+					className: "grid size-8.5 shrink-0 place-items-center rounded-full bg-warning/12 text-warning [&_svg]:size-4.5",
+					children: icon
+				}), /* @__PURE__ */ jsxs("div", {
+					className: "flex min-w-0 flex-1 flex-col leading-snug",
+					children: [/* @__PURE__ */ jsx("h2", {
+						id,
+						className: "text-[15px] font-semibold whitespace-pre-wrap wrap-anywhere",
+						children: title
+					}), description && /* @__PURE__ */ jsx("span", {
+						className: "text-xs text-muted-foreground",
+						children: description
+					})]
+				})]
+			}),
+			children && /* @__PURE__ */ jsx("div", {
+				className: "text-[14.5px] leading-relaxed whitespace-pre-wrap wrap-anywhere [&_strong]:font-semibold",
+				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,
+				children: code
+			})] }),
+			actions && /* @__PURE__ */ jsx("div", {
+				className: "flex flex-wrap items-center gap-2.5",
+				children: actions
+			}),
+			footer && /* @__PURE__ */ jsx("div", {
+				className: "text-xs text-muted-foreground wrap-anywhere",
+				children: footer
+			})
+		]
+	});
+}
+/** One-line record of a decision in the thread, e.g. "You approved `docker restart x`, once". */
+function ApprovalResult({ decision, time, className, children, ...props }) {
+	const denied = decision === "denied";
+	return /* @__PURE__ */ jsxs("div", {
+		"data-slot": "approval-result",
+		"data-decision": decision,
+		className: cn("flex min-w-0 items-center gap-2.5 px-1 text-[13px]", className),
+		...props,
+		children: [
+			/* @__PURE__ */ jsx("span", {
+				"aria-hidden": "true",
+				className: cn("grid size-6.5 shrink-0 place-items-center rounded-full [&_svg]:size-3.5", denied ? "bg-muted text-muted-foreground" : "bg-success/12 text-success"),
+				children: denied ? /* @__PURE__ */ jsx(XIcon, {}) : /* @__PURE__ */ jsx(CheckIcon, {})
+			}),
+			/* @__PURE__ */ jsx("span", {
+				className: "min-w-0 flex-1 truncate",
+				children
+			}),
+			time && /* @__PURE__ */ jsx("span", {
+				className: "shrink-0 text-xs text-muted-foreground tabular-nums",
+				children: time
+			})
+		]
+	});
+}
+export { ApprovalCard, ApprovalResult };

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

@@ -0,0 +1,53 @@
+import * as React from "react";
+export interface ChatShellProps {
+  /** Sidebar top, usually <AppBrand />. Collapses to its logo tile in the icon rail. */
+  brand?: React.ReactNode;
+  /** Under the brand, usually <NewConversationButton />. Stays visible in the icon rail. */
+  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. */
+  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;
+  /** Sheet title and toggle label for the details panel. Default "Details". */
+  detailsTitle?: string;
+  /** Show the details panel at first on wide screens. Default true. */
+  defaultDetailsOpen?: boolean;
+  /** 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. */
+  defaultOpen?: boolean;
+  className?: string;
+  /** The main column, usually <ChatPanel />. */
+  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.
+ */
+declare function ChatShell({ brand, sidebarActions, sidebar, sidebarFooter, details, detailsTitle, defaultDetailsOpen, storageKey, defaultOpen, className, children }: ChatShellProps): React.JSX.Element;
+export interface ChatPanelProps extends Omit<React.ComponentProps<"section">, "title"> {
+  /** Conversation title. */
+  title?: React.ReactNode;
+  /** Line under the title, e.g. "Started Nov 10, 9:41". */
+  description?: React.ReactNode;
+  /** Header controls, e.g. <ModelPicker /> and a <StatusBadge size="lg" />. */
+  actions?: React.ReactNode;
+  /** Warning bar under the header, e.g. "Reconnecting…". */
+  notice?: React.ReactNode;
+  /** Under the thread, usually <PromptInput />. */
+  composer?: React.ReactNode;
+  /** Changing it starts a fresh thread view (scroll position resets). Pass the conversation id. */
+  conversationId?: React.Key;
+  /** Keep the thread scrolled to the bottom as it grows. Default true. */
+  autoScroll?: boolean;
+  /** The thread: ChatMessage, ToolGroup, ApprovalCard… */
+  children?: React.ReactNode;
+}
+/**
+ * The chat column as a card: header, optional notice, scrolling thread, composer. Inside ChatShell it adds the
+ * mobile sidebar button and the details toggle to the header by itself.
+ */
+declare function ChatPanel({ title, description, actions, notice, composer, conversationId, autoScroll, className, children, ...props }: ChatPanelProps): React.JSX.Element;
+export { ChatPanel, ChatShell };