harebear-ui 0.3.0 → 0.4.0

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

@@ -6,7 +6,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;

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

@@ -87,7 +87,7 @@ function ChatShell({ brand, sidebarActions, sidebar, sidebarFooter, details, det
 					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",
+							className: "px-2 group-data-[collapsible=icon]:px-0 has-data-[slot=user-menu-trigger]:px-0",
 							children: sidebarFooter
 						})
 					})

package/dist/index.d.ts

@@ -77,6 +77,7 @@ import { StatusBadge, StatusBadgeProps, StatusDot, StatusDotProps, StatusTone }
 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 +98,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, 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, 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

@@ -77,6 +77,7 @@ 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 +98,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, 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, 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

@@ -195,6 +195,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,7 +270,7 @@ 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`
 
@@ -269,7 +282,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: 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.4.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

@@ -24,7 +24,7 @@ This project uses `harebear-ui` for all UI. Its theme, tokens, and components ar
 - 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.
 - 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.