harebear-ui 0.7.0 → 0.8.0

package/AGENTS.md

@@ -25,13 +25,15 @@ src/
   index.ts              Generated barrel. Do not edit by hand.
   components/ui/        shadcn primitives (radix-nova style), restyled. Keep upstream structure.
   components/theme/     ThemeProvider, ThemeToggle, ThemeScript.
-  components/admin/     Layout and dashboard composites (AppShell, StatCard, PageHeader...).
-  components/data/      DataTable, TrendChart, Sparkline, BarList, StatusBars.
-  components/ai/        Chat composites (ChatThread, ChatMessage, PromptInput, ModelPicker, CodeSnippet...).
+  components/admin/     Layout and dashboard composites (AppShell, AppNav, FocusLayout, SettingsSection, StatCard...).
+  components/data/      DataTable, TrendChart, Sparkline, BarList, StatusBars, TaskRow, SectionedList.
+  components/ai/        Chat composites (ChatThread, ChatMessage, PromptInput...) and the assistant layer (AssistantProvider, AssistantDock, AskBox, DictationButton, ActionReceipt).
   components/auth/      AuthLayout, LoginForm, SignupForm (parameterized shadcn login/signup blocks).
+  components/layout/    Prop-driven layout and text (Stack, Text, Metric, ShowMore, Collapse).
   hooks/, lib/utils.ts  Shared hooks and cn().
-playground/screens/     Reference screens that use only public exports (#admin, #chat, #records, #home, #auth, #catalog). Visual spec and usage examples.
-docs/COMPONENTS.md      Consumer-facing catalog. Shipped. Test-enforced to mention every export.
+playground/screens/     Reference screens that use only public exports (#admin, #chat, #agent, #records, #home, #household, #settings, #auth, #catalog). Visual spec and usage examples.
+docs/COMPONENTS.md      Consumer-facing catalog. Shipped. Test-enforced to mention every export. "Agent-first apps" is the recipe for household/assistant apps.
+docs/ROADMAP.md         Proposed and built components for household and agent-first apps. Mark items built when they land.
 docs/guides/            Getting started (per framework), theming, working with agents. Shipped.
 llms.txt, skills/       Consumer-facing agent docs. Shipped.
 bin/harebear-ui.mjs     `npx harebear-ui init|docs [name...]` for consuming apps. Zero dependencies.
@@ -42,17 +44,18 @@ test/                   Vitest: API snapshot, docs coverage, token integrity, be
 
 ## Adding a component
 
-1. Pick the folder by purpose (`admin`, `data`, `ai`, `auth`; `ui` only for shadcn primitives).
+1. Pick the folder by purpose (`admin`, `layout`, `data`, `ai`, `auth`; `ui` only for shadcn primitives and small harebear primitives such as `CheckCircle`).
 2. Follow the existing files: `"use client"` first line, named function component, props interface exported as `<Name>Props`, `data-slot="<kebab-name>"` on the root, `className` merged last with `cn()`, rest props spread on the root.
-3. Style only with tokens (`bg-card`, `text-muted-foreground`, `bg-primary-soft`, `shadow-card`, `rounded-xl`). No hex, no palette colors. Status takes a `tone` (`success | warning | danger | info | neutral`).
-4. `pnpm gen`, then add the component to `docs/COMPONENTS.md` (the docs test fails otherwise) and to the index in `llms.txt`. Use a heading like ``### `Name` `` or a table row with the name in backticks, so `npx harebear-ui docs Name` finds it.
-5. Use it in a playground screen if it is visual, and look at it in light and dark mode and at 375px width.
-6. Add a behavior test in `test/components.test.tsx` if it has logic. `pnpm test -u` to accept the new export in the snapshot.
-7. `pnpm check`.
+3. Style only with tokens (`bg-card`, `text-muted-foreground`, `bg-primary-soft`, `shadow-card`, `rounded-xl`). No hex, no palette colors. Status takes a `tone` (`success | warning | danger | info | neutral`); categories (members, lists) use `category-1..6`. A box around a bare field uses `focus-box`. Motion is CSS only and off under `prefers-reduced-motion` (`motion-reduce:`; `Collapse` for height changes).
+4. Floors: checks 24px, phone touch targets 44px, no text under 12px, icon-only buttons have `aria-label`.
+5. `pnpm gen`, then add the component to `docs/COMPONENTS.md` (the docs test fails otherwise) and to the index in `llms.txt`. Use a heading like ``### `Name` `` or a table row with the name in backticks, so `npx harebear-ui docs Name` finds it.
+6. Use it in a playground screen if it is visual, and look at it in light and dark mode and at 375px width.
+7. Add a behavior test in `test/` if it has logic (`components.test.tsx`, `building-blocks.test.tsx`, `household.test.tsx` for the household and assistant layer). `pnpm test -u` to accept the new export in the snapshot.
+8. `pnpm check`.
 
 ## Looking at your work
 
-- `pnpm dev`, then open http://localhost:5199/#admin (or `#chat`, `#agent`, `#records`, `#home`, `#auth`, `#catalog`).
+- `pnpm dev`, then open http://localhost:5199/#admin (or `#chat`, `#agent`, `#records`, `#home`, `#household`, `#settings`, `#auth`, `#catalog`).
 - `?mode=dark` or `?mode=light` pins the theme without touching localStorage; `?shot` hides the screen switcher. Example: http://localhost:5199/?mode=dark&shot#agent
 - A headless capture: `pnpm shots admin` writes `.github/assets/screens/admin-*.webp`.
 

package/README.md

@@ -139,13 +139,14 @@ Prompts that work, and what to check before you accept an agent's UI: [Working w
 
 ## What's inside
 
-| Group         | Exports                                                                                                                     |
-| ------------- | --------------------------------------------------------------------------------------------------------------------------- |
-| Layout, admin | `SidebarLayout`, `AppShell`, `PageHeader`, `StatCard`, `StatusBadge`, `UsageMeter`, `Timeline`, `UserMenu`, `ConfirmDialog` |
-| Data          | `DataTable`, `TrendChart`, `BarList`, `Sparkline`, `StatusBars`                                                             |
-| AI and chat   | `ChatShell`, `ChatPanel`, `ChatMessage`, `PromptInput`, `ModelPicker`, `ToolGroup`, `ApprovalCard`, `CodeSnippet`, `Prose`  |
-| Auth          | `AuthLayout`, `LoginForm`, `SignupForm`                                                                                     |
-| Primitives    | The full shadcn/ui registry: `Button`, `Dialog`, `Select`, `Sidebar`, `Tabs`, `Command`, `Chart`, and the rest              |
+| Group         | Exports                                                                                                                                       |
+| ------------- | --------------------------------------------------------------------------------------------------------------------------------------------- |
+| Layout, admin | `SidebarLayout`, `AppShell`, `AppNav`, `FocusLayout`, `SettingsSection`, `PageHeader`, `StatCard`, `StatusBadge`, `UserMenu`, `ConfirmDialog` |
+| Data          | `SectionedList`, `TaskRow`, `DataTable`, `TrendChart`, `BarList`, `Sparkline`, `StatusBars`                                                   |
+| Assistant     | `AssistantProvider`, `AssistantDock`, `AskBox`, `DictationButton`, `ActionReceipt`, `toastUndo`                                               |
+| AI and chat   | `ChatShell`, `ChatPanel`, `ChatMessage`, `PromptInput`, `ModelPicker`, `ToolGroup`, `ApprovalCard`, `CodeSnippet`, `Prose`                    |
+| Auth          | `AuthLayout`, `LoginForm`, `SignupForm`                                                                                                       |
+| Primitives    | The full shadcn/ui registry: `Button`, `Dialog`, `Select`, `Sidebar`, `Tabs`, `Command`, `Chart`, and the rest                                |
 
 The full list with props: [docs/COMPONENTS.md](docs/COMPONENTS.md).
 

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

@@ -0,0 +1,57 @@
+import { AppNavItem } from "./app-shell.js";
+import { SidebarLayoutProps } from "./sidebar-layout.js";
+import * as React from "react";
+export interface AppNavPlace extends Omit<AppNavItem, "badge"> {
+  /** Count at the right in the sidebar and on the icon in the tab bar, e.g. open to-dos. Hidden when 0. */
+  count?: number;
+  /** Show in the phone tab bar. Default true; the first 5 that are not false are shown. */
+  tab?: boolean;
+}
+export interface AppNavGroup {
+  /** Group heading, e.g. "Lists". */
+  label: string;
+  items: AppNavPlace[];
+  /** Expanded at first. Default true. */
+  defaultOpen?: boolean;
+  /** Shows an add button next to the heading. */
+  onAdd?: () => void;
+  /** Accessible label of the add button, e.g. "New list". Default "Add". */
+  addLabel?: string;
+}
+export interface AppNavAction {
+  label: string;
+  icon: React.ReactNode;
+  onSelect: () => void;
+}
+export interface AppNavProps {
+  /** Product mark at the top of the sidebar, usually <AppBrand />. */
+  brand?: React.ReactNode;
+  /** Top-level places (Today, Calendar, Docs). Sidebar items on desktop, tabs on phones. */
+  places: AppNavPlace[];
+  /** One collapsible group under the places, e.g. Lists with an add button. Desktop sidebar only. */
+  group?: AppNavGroup;
+  /** Sidebar bottom, usually <UserMenu />. Desktop sidebar only. */
+  footer?: React.ReactNode;
+  /** Primary action: a button under the brand on desktop, a round floating button above the tab bar on phones. */
+  action?: AppNavAction;
+  /** Accessible name of the navigation. Default "Main". */
+  label?: string;
+  /** Component used for links. Default "a". Pass Next.js Link or React Router Link. */
+  linkComponent?: React.ElementType;
+  collapsible?: SidebarLayoutProps["collapsible"];
+  storageKey?: string;
+  defaultOpen?: boolean;
+  /** Sidebar width. Default "15.75rem". */
+  width?: string;
+  /** Classes for the main column. */
+  className?: string;
+  children?: React.ReactNode;
+}
+/**
+ * App navigation from one config. Desktop (768px and up): SidebarLayout with the brand, action, places, a
+ * collapsible group and the footer; the active place is a raised card. Phones: a bottom tab bar with up to 5 places
+ * and an optional round action button. The main column gets bottom padding and sets `--hb-bottom-inset` (and
+ * `--hb-fab-inset`) so an AssistantDock rendered inside sits above the tab bar and the action button.
+ */
+declare function AppNav({ brand, places, group, footer, action, label, linkComponent, collapsible, storageKey, defaultOpen, width, className, children }: AppNavProps): React.JSX.Element;
+export { AppNav };

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

@@ -0,0 +1,172 @@
+"use client";
+import { SidebarLayout } from "./sidebar-layout.js";
+import { Badge } from "../ui/badge.js";
+import { Button } from "../ui/button.js";
+import { Collapsible, CollapsibleContent, CollapsibleTrigger } from "../ui/collapsible.js";
+import { SidebarMenu, SidebarMenuButton, SidebarMenuItem } from "../ui/sidebar.js";
+import { cn } from "../../lib/utils.js";
+import * as React from "react";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { ChevronDownIcon, PlusIcon } from "lucide-react";
+// src/components/admin/app-nav.tsx
+const TAB_LIMIT = 5;
+/**
+* App navigation from one config. Desktop (768px and up): SidebarLayout with the brand, action, places, a
+* collapsible group and the footer; the active place is a raised card. Phones: a bottom tab bar with up to 5 places
+* and an optional round action button. The main column gets bottom padding and sets `--hb-bottom-inset` (and
+* `--hb-fab-inset`) so an AssistantDock rendered inside sits above the tab bar and the action button.
+*/
+function AppNav({ brand, places, group, footer, action, label = "Main", linkComponent = "a", collapsible, storageKey, defaultOpen, width = "15.75rem", className, children }) {
+	const tabs = places.filter((p) => p.tab !== false).slice(0, TAB_LIMIT);
+	return /* @__PURE__ */ jsxs(SidebarLayout, {
+		brand,
+		collapsible,
+		storageKey,
+		defaultOpen,
+		width,
+		sidebarFooter: footer,
+		sidebarActions: action && /* @__PURE__ */ jsxs(Button, {
+			type: "button",
+			"aria-label": action.label,
+			onClick: action.onSelect,
+			className: "w-full justify-start group-data-[collapsible=icon]:size-10 group-data-[collapsible=icon]:justify-center group-data-[collapsible=icon]:px-0",
+			children: [action.icon, /* @__PURE__ */ jsx("span", {
+				className: "group-data-[collapsible=icon]:hidden",
+				children: action.label
+			})]
+		}),
+		sidebar: /* @__PURE__ */ jsxs("nav", {
+			"aria-label": label,
+			"data-slot": "app-nav",
+			className: "flex flex-col gap-5",
+			children: [/* @__PURE__ */ jsx(SidebarMenu, {
+				className: "gap-1 group-data-[collapsible=icon]:items-center",
+				children: places.map((place) => /* @__PURE__ */ jsx(PlaceItem, {
+					place,
+					Link: linkComponent
+				}, place.label))
+			}), group && /* @__PURE__ */ jsx(NavGroup, {
+				group,
+				Link: linkComponent
+			})]
+		}),
+		className: cn("max-md:pb-[calc(4.5rem+env(safe-area-inset-bottom))] max-md:[--hb-bottom-inset:calc(4.5rem+env(safe-area-inset-bottom))]", action && "max-md:[--hb-fab-inset:4.5rem]", className),
+		children: [
+			children,
+			tabs.length > 0 && /* @__PURE__ */ jsx(TabBar, {
+				tabs,
+				label,
+				Link: linkComponent
+			}),
+			action && /* @__PURE__ */ jsx(Button, {
+				type: "button",
+				"data-slot": "app-nav-fab",
+				size: "icon-lg",
+				shape: "pill",
+				"aria-label": action.label,
+				onClick: action.onSelect,
+				className: "fixed right-4 bottom-[calc(4.5rem+env(safe-area-inset-bottom)+1rem)] z-30 size-14 shadow-card md:hidden [&_svg:not([class*='size-'])]:size-6",
+				children: action.icon
+			})
+		]
+	});
+}
+function PlaceItem({ place, Link }) {
+	const content = /* @__PURE__ */ jsxs(Fragment, { children: [
+		place.icon,
+		/* @__PURE__ */ jsx("span", {
+			className: "flex-1",
+			children: place.label
+		}),
+		!!place.count && /* @__PURE__ */ jsx(Badge, {
+			variant: "soft",
+			className: "h-5 px-2 group-data-[collapsible=icon]:hidden",
+			children: place.count
+		})
+	] });
+	return /* @__PURE__ */ jsx(SidebarMenuItem, { children: /* @__PURE__ */ jsx(SidebarMenuButton, {
+		asChild: !!place.href,
+		isActive: place.active,
+		"aria-current": place.active ? "page" : void 0,
+		onClick: place.onSelect,
+		tooltip: place.label,
+		children: place.href ? /* @__PURE__ */ jsx(Link, {
+			href: place.href,
+			children: content
+		}) : content
+	}) });
+}
+function NavGroup({ group, Link }) {
+	const [open, setOpen] = React.useState(group.defaultOpen ?? true);
+	return /* @__PURE__ */ jsxs(Collapsible, {
+		open,
+		onOpenChange: setOpen,
+		"data-slot": "app-nav-group",
+		className: "flex flex-col gap-1 group-data-[collapsible=icon]:hidden",
+		children: [/* @__PURE__ */ jsxs("div", {
+			className: "flex items-center gap-1 pr-1",
+			children: [/* @__PURE__ */ jsxs(CollapsibleTrigger, {
+				className: "flex h-8 min-w-0 flex-1 items-center gap-1.5 rounded-md px-3 text-xs font-medium text-muted-foreground outline-none hover:text-foreground focus-visible:ring-2 focus-visible:ring-ring/40",
+				children: [/* @__PURE__ */ jsx("span", {
+					className: "truncate",
+					children: group.label
+				}), /* @__PURE__ */ jsx(ChevronDownIcon, {
+					"aria-hidden": "true",
+					className: cn("size-3.5 transition-transform motion-reduce:transition-none", !open && "-rotate-90")
+				})]
+			}), group.onAdd && /* @__PURE__ */ jsx(Button, {
+				type: "button",
+				variant: "ghost",
+				size: "icon-sm",
+				"aria-label": group.addLabel ?? "Add",
+				onClick: group.onAdd,
+				children: /* @__PURE__ */ jsx(PlusIcon, {})
+			})]
+		}), /* @__PURE__ */ jsx(CollapsibleContent, { children: /* @__PURE__ */ jsx(SidebarMenu, {
+			className: "gap-1",
+			children: group.items.map((place) => /* @__PURE__ */ jsx(PlaceItem, {
+				place,
+				Link
+			}, place.label))
+		}) })]
+	});
+}
+function TabBar({ tabs, label, Link }) {
+	return /* @__PURE__ */ jsx("nav", {
+		"aria-label": label,
+		"data-slot": "app-nav-tabs",
+		className: "fixed inset-x-0 bottom-0 z-30 border-t border-border bg-background/95 px-2 pt-1.5 pb-[max(0.375rem,env(safe-area-inset-bottom))] backdrop-blur md:hidden",
+		children: /* @__PURE__ */ jsx("ul", {
+			className: "mx-auto flex max-w-lg",
+			children: tabs.map((tab) => {
+				const Comp = tab.href ? Link : "button";
+				return /* @__PURE__ */ jsx("li", {
+					className: "flex min-w-0 flex-1",
+					children: /* @__PURE__ */ jsxs(Comp, {
+						...tab.href ? { href: tab.href } : {
+							type: "button",
+							onClick: tab.onSelect
+						},
+						"aria-current": tab.active ? "page" : void 0,
+						className: "flex min-h-14 min-w-0 flex-1 flex-col items-center justify-center gap-1 rounded-xl px-1 text-xs font-medium text-muted-foreground outline-none hover:text-foreground focus-visible:ring-4 focus-visible:ring-ring/20 aria-[current=page]:text-primary",
+						children: [/* @__PURE__ */ jsxs("span", {
+							className: "relative [&_svg]:size-6",
+							children: [tab.icon, !!tab.count && /* @__PURE__ */ jsx("span", {
+								"aria-hidden": "true",
+								className: "absolute -top-1.5 left-[calc(100%-0.5rem)] grid h-4.5 min-w-4.5 place-items-center rounded-full bg-primary px-1 text-xs leading-none font-semibold text-primary-foreground",
+								children: tab.count > 99 ? "99+" : tab.count
+							})]
+						}), /* @__PURE__ */ jsxs("span", {
+							className: "max-w-full truncate",
+							children: [tab.label, !!tab.count && /* @__PURE__ */ jsxs("span", {
+								className: "sr-only",
+								children: [", ", tab.count]
+							})]
+						})]
+					})
+				}, tab.label);
+			})
+		})
+	});
+}
+export { AppNav };

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

@@ -0,0 +1,14 @@
+import * as React from "react";
+export interface FocusLayoutProps extends Omit<React.ComponentProps<"div">, "title"> {
+  /** Page title in the top bar. */
+  title?: React.ReactNode;
+  /** Leading control, usually a close or back link: <Button asChild variant="ghost" size="icon"><a aria-label="Close">…</a></Button>. */
+  back?: React.ReactNode;
+  /** Trailing top bar controls, e.g. a Save button. */
+  actions?: React.ReactNode;
+  /** Column width. Default "md" (42rem). */
+  width?: "sm" | "md" | "lg";
+}
+/** A page outside the app frame (settings, onboarding, setup): slim top bar with back link and title, one centred column. */
+declare function FocusLayout({ title, back, actions, width, className, children, ...props }: FocusLayoutProps): React.JSX.Element;
+export { FocusLayout };

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

@@ -0,0 +1,36 @@
+"use client";
+import { cn } from "../../lib/utils.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+// src/components/admin/focus-layout.tsx
+const widthClass = {
+	sm: "max-w-xl",
+	md: "max-w-2xl",
+	lg: "max-w-4xl"
+};
+/** A page outside the app frame (settings, onboarding, setup): slim top bar with back link and title, one centred column. */
+function FocusLayout({ title, back, actions, width = "md", className, children, ...props }) {
+	return /* @__PURE__ */ jsxs("div", {
+		"data-slot": "focus-layout",
+		className: cn("flex min-h-dvh flex-col bg-background", className),
+		...props,
+		children: [/* @__PURE__ */ jsxs("header", {
+			className: "sticky top-0 z-20 flex min-h-14 items-center gap-2 bg-background/90 px-3 pt-[env(safe-area-inset-top)] backdrop-blur sm:px-4",
+			children: [
+				back,
+				title && /* @__PURE__ */ jsx("h1", {
+					className: "min-w-0 flex-1 truncate text-[15px] font-semibold",
+					children: title
+				}),
+				!title && /* @__PURE__ */ jsx("div", { className: "flex-1" }),
+				actions && /* @__PURE__ */ jsx("div", {
+					className: "flex items-center gap-2",
+					children: actions
+				})
+			]
+		}), /* @__PURE__ */ jsx("main", {
+			className: cn("mx-auto flex w-full flex-col gap-6 px-4 pt-4 pb-[max(3rem,env(safe-area-inset-bottom))]", widthClass[width]),
+			children
+		})]
+	});
+}
+export { FocusLayout };

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

@@ -0,0 +1,31 @@
+import * as React from "react";
+export interface SettingsSectionProps extends Omit<React.ComponentProps<"section">, "title"> {
+  title: React.ReactNode;
+  description?: React.ReactNode;
+  /** SettingsRow children. */
+  children?: React.ReactNode;
+}
+/** A card of settings: heading, optional description, then SettingsRows separated by hairlines. */
+declare function SettingsSection({ title, description, className, children, ...props }: SettingsSectionProps): React.JSX.Element;
+export interface SettingsRowProps extends Omit<React.ComponentProps<"div">, "content"> {
+  label: React.ReactNode;
+  /** One line under the label. */
+  description?: React.ReactNode;
+  /** id of the control, so the label is a <label> for it (Switch, Select trigger, Input). */
+  htmlFor?: string;
+  /** The control at the right: Switch, Select, ToggleGroup, Button. */
+  control?: React.ReactNode;
+  /**
+   * Inline content that expands under the row (change password, add a connection). Without a `control`, the row
+   * gets a toggle button (`expandLabel` / "Cancel").
+   */
+  content?: React.ReactNode;
+  open?: boolean;
+  defaultOpen?: boolean;
+  onOpenChange?: (open: boolean) => void;
+  /** Label of the default toggle button. Default "Change". */
+  expandLabel?: React.ReactNode;
+}
+/** One setting: label and description at the left, a control at the right, optional expandable content. */
+declare function SettingsRow({ label, description, htmlFor, control, content, open: openProp, defaultOpen, onOpenChange, expandLabel, className, ...props }: SettingsRowProps): React.JSX.Element;
+export { SettingsRow, SettingsSection };

package/dist/components/admin/settings.js

@@ -0,0 +1,78 @@
+"use client";
+import { Collapse } from "../layout/collapse.js";
+import { Button } from "../ui/button.js";
+import { cn } from "../../lib/utils.js";
+import * as React from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+// src/components/admin/settings.tsx
+/** A card of settings: heading, optional description, then SettingsRows separated by hairlines. */
+function SettingsSection({ title, description, className, children, ...props }) {
+	const id = React.useId();
+	return /* @__PURE__ */ jsxs("section", {
+		"data-slot": "settings-section",
+		"aria-labelledby": id,
+		className: cn("flex min-w-0 flex-col rounded-xl bg-card shadow-card", className),
+		...props,
+		children: [/* @__PURE__ */ jsxs("div", {
+			className: "flex flex-col gap-1 px-5 pt-5 pb-2",
+			children: [/* @__PURE__ */ jsx("h2", {
+				id,
+				className: "text-base font-semibold",
+				children: title
+			}), description && /* @__PURE__ */ jsx("p", {
+				className: "text-[13px] text-muted-foreground",
+				children: description
+			})]
+		}), /* @__PURE__ */ jsx("div", {
+			className: "flex flex-col divide-y divide-border px-5 pb-1",
+			children
+		})]
+	});
+}
+/** One setting: label and description at the left, a control at the right, optional expandable content. */
+function SettingsRow({ label, description, htmlFor, control, content, open: openProp, defaultOpen = false, onOpenChange, expandLabel = "Change", className, ...props }) {
+	const [openState, setOpenState] = React.useState(defaultOpen);
+	const open = openProp ?? openState;
+	const setOpen = (next) => {
+		if (openProp === void 0) setOpenState(next);
+		onOpenChange?.(next);
+	};
+	const contentId = React.useId();
+	const Label = htmlFor ? "label" : "div";
+	return /* @__PURE__ */ jsxs("div", {
+		"data-slot": "settings-row",
+		"data-state": content ? open ? "open" : "closed" : void 0,
+		className: cn("py-3.5", className),
+		...props,
+		children: [/* @__PURE__ */ jsxs("div", {
+			className: "flex flex-wrap items-center gap-x-4 gap-y-2",
+			children: [/* @__PURE__ */ jsxs("div", {
+				className: "flex min-w-0 flex-1 basis-48 flex-col",
+				children: [/* @__PURE__ */ jsx(Label, {
+					htmlFor,
+					className: "text-sm font-medium",
+					children: label
+				}), description && /* @__PURE__ */ jsx("span", {
+					className: "text-[13px] text-muted-foreground",
+					children: description
+				})]
+			}), control ?? (content ? /* @__PURE__ */ jsx(Button, {
+				type: "button",
+				variant: "outline",
+				size: "sm",
+				"aria-expanded": open,
+				"aria-controls": contentId,
+				onClick: () => setOpen(!open),
+				children: open ? "Cancel" : expandLabel
+			}) : null)]
+		}), content && /* @__PURE__ */ jsx(Collapse, {
+			open,
+			id: contentId,
+			children: /* @__PURE__ */ jsx("div", {
+				className: "pt-3.5",
+				children: content
+			})
+		})]
+	});
+}
+export { SettingsRow, SettingsSection };

package/dist/components/ai/action-receipt.d.ts

@@ -0,0 +1,16 @@
+import * as React from "react";
+export interface ActionReceiptProps extends Omit<React.ComponentProps<"div">, "title"> {
+  /** What was done, past tense: "Added milk to Groceries". */
+  title: React.ReactNode;
+  /** One line, e.g. "Groceries · just now". */
+  meta?: React.ReactNode;
+  /** Shows an Undo button. */
+  onUndo?: () => void;
+  /** Default "Undo". */
+  undoLabel?: React.ReactNode;
+  /** After undo: the check goes away, the title is struck through and the button is replaced by "Undone". */
+  undone?: boolean;
+}
+/** A compact card for one action the assistant took on its own: round check, title, one meta line, Undo. */
+declare function ActionReceipt({ title, meta, onUndo, undoLabel, undone, className, ...props }: ActionReceiptProps): React.JSX.Element;
+export { ActionReceipt };

package/dist/components/ai/action-receipt.js

@@ -0,0 +1,47 @@
+"use client";
+import { Button } from "../ui/button.js";
+import { cn } from "../../lib/utils.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { CheckIcon } from "lucide-react";
+// src/components/ai/action-receipt.tsx
+/** A compact card for one action the assistant took on its own: round check, title, one meta line, Undo. */
+function ActionReceipt({ title, meta, onUndo, undoLabel = "Undo", undone, className, ...props }) {
+	return /* @__PURE__ */ jsxs("div", {
+		"data-slot": "action-receipt",
+		"data-undone": undone || void 0,
+		className: cn("flex min-w-0 items-center gap-3 rounded-xl border border-border bg-card px-3.5 py-2.5", className),
+		...props,
+		children: [
+			/* @__PURE__ */ jsx("span", {
+				"aria-hidden": "true",
+				className: cn("grid size-6 shrink-0 place-items-center rounded-full", undone ? "border-2 border-muted-foreground/40" : "bg-success text-card"),
+				children: !undone && /* @__PURE__ */ jsx(CheckIcon, {
+					className: "size-3.5",
+					strokeWidth: 3
+				})
+			}),
+			/* @__PURE__ */ jsxs("div", {
+				className: "flex min-w-0 flex-1 flex-col leading-snug",
+				children: [/* @__PURE__ */ jsx("span", {
+					className: cn("text-sm font-medium wrap-anywhere", undone && "text-muted-foreground line-through"),
+					children: title
+				}), meta && /* @__PURE__ */ jsx("span", {
+					className: "truncate text-xs text-muted-foreground",
+					children: meta
+				})]
+			}),
+			undone ? /* @__PURE__ */ jsx("span", {
+				className: "shrink-0 text-xs font-medium text-muted-foreground",
+				children: "Undone"
+			}) : onUndo && /* @__PURE__ */ jsx(Button, {
+				type: "button",
+				variant: "ghost",
+				size: "sm",
+				className: "shrink-0",
+				onClick: onUndo,
+				children: undoLabel
+			})
+		]
+	});
+}
+export { ActionReceipt };

package/dist/components/ai/ask-box.d.ts

@@ -0,0 +1,27 @@
+import { SpeechSource } from "./dictation.js";
+import * as React from "react";
+export interface AskBoxProps extends Omit<React.ComponentProps<"form">, "onSubmit" | "onChange"> {
+  value: string;
+  onValueChange: (value: string) => void;
+  /** Called with the trimmed text on Enter or the send button. Shift+Enter inserts a newline. */
+  onSubmit: (value: string) => void;
+  /** One per app, e.g. "Ask HomeBot anything". Also the field's accessible label. Default "Ask anything". */
+  placeholder?: string;
+  /** Shown under the text while there is text, e.g. chips for the date or list it picked up. */
+  chips?: React.ReactNode;
+  /** Pills under the box. Clicking one submits it (or calls onSuggestion). */
+  suggestions?: string[];
+  onSuggestion?: (suggestion: string) => void;
+  /** Speech source for the mic. Default the browser's; `false` hides the mic. */
+  dictation?: SpeechSource | false;
+  /** BCP 47 language for dictation. */
+  lang?: string;
+  disabled?: boolean;
+  autoFocus?: boolean;
+}
+/**
+ * The large rounded input an assistant starts from: auto-growing text, chips while typing, suggestion pills and the
+ * DictationButton (mic, stop, send). The focus ring is on the whole box.
+ */
+declare function AskBox({ value, onValueChange, onSubmit, placeholder, chips, suggestions, onSuggestion, dictation, lang, disabled, autoFocus, className, ...props }: AskBoxProps): React.JSX.Element;
+export { AskBox };

package/dist/components/ai/ask-box.js

@@ -0,0 +1,85 @@
+"use client";
+import { DictationButton } from "./dictation.js";
+import { Button } from "../ui/button.js";
+import { cn } from "../../lib/utils.js";
+import * as React from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+// src/components/ai/ask-box.tsx
+const noSpeech = {
+	isSupported: () => false,
+	start: () => () => {}
+};
+/**
+* The large rounded input an assistant starts from: auto-growing text, chips while typing, suggestion pills and the
+* DictationButton (mic, stop, send). The focus ring is on the whole box.
+*/
+function AskBox({ value, onValueChange, onSubmit, placeholder = "Ask anything", chips, suggestions, onSuggestion, dictation, lang, disabled, autoFocus, className, ...props }) {
+	const id = React.useId();
+	const submit = () => {
+		const text = value.trim();
+		if (text && !disabled) onSubmit(text);
+	};
+	const hasText = value.trim().length > 0;
+	return /* @__PURE__ */ jsxs("form", {
+		"data-slot": "ask-box",
+		className: cn("flex w-full min-w-0 flex-col gap-3", className),
+		onSubmit: (e) => {
+			e.preventDefault();
+			submit();
+		},
+		...props,
+		children: [/* @__PURE__ */ jsxs("div", {
+			className: "focus-box flex flex-col gap-2 rounded-3xl border border-transparent bg-muted py-2.5 pr-2.5 pl-5",
+			children: [/* @__PURE__ */ jsxs("div", {
+				className: "flex items-end gap-2",
+				children: [
+					/* @__PURE__ */ jsx("label", {
+						htmlFor: id,
+						className: "sr-only",
+						children: placeholder
+					}),
+					/* @__PURE__ */ jsx("textarea", {
+						id,
+						rows: 1,
+						value,
+						disabled,
+						autoFocus,
+						placeholder,
+						onChange: (e) => onValueChange(e.target.value),
+						onKeyDown: (e) => {
+							if (e.key === "Enter" && !e.shiftKey && !e.nativeEvent.isComposing) {
+								e.preventDefault();
+								submit();
+							}
+						},
+						className: "field-sizing-content max-h-48 min-h-10 min-w-0 flex-1 resize-none border-0 bg-transparent py-2 text-base leading-6 text-foreground outline-none placeholder:text-muted-foreground"
+					}),
+					/* @__PURE__ */ jsx(DictationButton, {
+						value,
+						disabled,
+						source: dictation === false ? noSpeech : dictation,
+						lang,
+						onTranscript: (text) => onValueChange(value ? `${value.replace(/\s+$/, "")} ${text}` : text)
+					})
+				]
+			}), hasText && chips && /* @__PURE__ */ jsx("div", {
+				"data-slot": "ask-box-chips",
+				className: "flex flex-wrap gap-1.5 pb-1",
+				children: chips
+			})]
+		}), suggestions && suggestions.length > 0 && /* @__PURE__ */ jsx("div", {
+			"data-slot": "ask-box-suggestions",
+			className: "flex flex-wrap gap-2",
+			children: suggestions.map((s) => /* @__PURE__ */ jsx(Button, {
+				type: "button",
+				variant: "outline",
+				size: "sm",
+				shape: "pill",
+				disabled,
+				onClick: () => onSuggestion ? onSuggestion(s) : onSubmit(s),
+				children: s
+			}, s))
+		})]
+	});
+}
+export { AskBox };