harebear-ui 0.10.0 → 0.11.0

package/dist/components/admin/detail-sheet.js

@@ -3,6 +3,7 @@ import { Button } from "../ui/button.js";
 import { Drawer, DrawerClose, DrawerContent, DrawerDescription, DrawerTitle } from "../ui/drawer.js";
 import { Sheet, SheetContent, SheetDescription, SheetTitle } from "../ui/sheet.js";
 import { useMediaQuery } from "../../hooks/use-media-query.js";
+import { useToastClearance } from "../../lib/internal/toast-clearance.js";
 import { cn } from "../../lib/utils.js";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { XIcon } from "lucide-react";
@@ -13,6 +14,8 @@ import { XIcon } from "lucide-react";
 */
 function DetailSheet({ open, onOpenChange, title, description, footer, className, children }) {
 	const desktop = useMediaQuery("(min-width: 768px)");
+	useToastClearance("--hb-toast-sheet", "calc(min(420px, 100vw - 32px) + 1rem)", open && desktop);
+	useToastClearance("--hb-toast-drawer", footer ? "calc(3.5625rem + max(1rem, env(safe-area-inset-bottom)))" : "env(safe-area-inset-bottom, 0px)", open && !desktop);
 	const noDescription = description ? {} : { "aria-describedby": void 0 };
 	const body = (padBottom) => /* @__PURE__ */ jsx("div", {
 		className: cn("min-h-0 flex-1 overflow-y-auto px-6 pb-6", !footer && padBottom),

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

@@ -2,7 +2,7 @@ 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". */
+  /** Short line under the title, e.g. "Groceries · just now". Wraps when long. */
   meta?: React.ReactNode;
   /** Shows an Undo button. */
   onUndo?: () => void;

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

@@ -26,7 +26,7 @@ function ActionReceipt({ title, meta, onUndo, undoLabel = "Undo", undone, classN
 					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",
+					className: "text-xs text-muted-foreground wrap-anywhere",
 					children: meta
 				})]
 			}),

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

@@ -27,6 +27,6 @@ export interface ApprovalResultProps extends React.ComponentProps<"div"> {
   /** 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". */
+/** Short 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

@@ -56,7 +56,7 @@ function ApprovalCard({ title, description, icon = /* @__PURE__ */ jsx(ShieldAle
 		]
 	});
 }
-/** One-line record of a decision in the thread, e.g. "You approved `docker restart x`, once". */
+/** Short 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", {
@@ -71,7 +71,7 @@ function ApprovalResult({ decision, time, className, children, ...props }) {
 				children: denied ? /* @__PURE__ */ jsx(XIcon, {}) : /* @__PURE__ */ jsx(CheckIcon, {})
 			}),
 			/* @__PURE__ */ jsx("span", {
-				className: "min-w-0 flex-1 truncate",
+				className: "min-w-0 flex-1 wrap-anywhere",
 				children
 			}),
 			time && /* @__PURE__ */ jsx("span", {

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

@@ -91,7 +91,7 @@ function AskBox({ value, onValueChange, onSubmit, placeholder = "Ask anything",
 				"data-slot": "ask-box-reply",
 				"aria-live": "polite",
 				"aria-busy": pending || void 0,
-				className: "flex min-w-0 flex-col gap-3 px-2 text-[15px] leading-relaxed",
+				className: "flex min-w-0 flex-col gap-3 px-2 text-[15px] leading-relaxed wrap-anywhere",
 				children: [hasReply ? reply : /* @__PURE__ */ jsx(TypingIndicator, { label: "Working" }), chatHref && /* @__PURE__ */ jsx(Button, {
 					asChild: true,
 					variant: "link",

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

@@ -80,6 +80,8 @@ export interface AssistantDockProps extends Omit<React.ComponentProps<"section">
   icon?: React.ReactNode;
   /** Link to the full-screen chat. Shows an expand button in the header. */
   fullScreenHref?: string;
+  /** Header controls before the full-screen link and close button, e.g. a "New chat" icon button. */
+  actions?: React.ReactNode;
   /** Empty state heading. Default "How can I help?". */
   emptyTitle?: React.ReactNode;
   /** Empty state line under the heading. */
@@ -100,5 +102,5 @@ export interface AssistantDockProps extends Omit<React.ComponentProps<"section">
  * suggestions, message list, AskBox. A soft launcher button opens it. Escape closes it. Needs AssistantProvider.
  * Sits above AppNav's phone tab bar.
  */
-declare function AssistantDock({ title, icon, fullScreenHref, emptyTitle, emptyDescription, suggestions, placeholder, dictation, launcher, launcherLabel, className, ...props }: AssistantDockProps): React.JSX.Element | null;
+declare function AssistantDock({ title, icon, fullScreenHref, actions, emptyTitle, emptyDescription, suggestions, placeholder, dictation, launcher, launcherLabel, className, ...props }: AssistantDockProps): React.JSX.Element | null;
 export { AssistantDock, AssistantProvider };

package/dist/components/ai/assistant.js

@@ -144,7 +144,7 @@ function useAssistantPage(page) {
 * suggestions, message list, AskBox. A soft launcher button opens it. Escape closes it. Needs AssistantProvider.
 * Sits above AppNav's phone tab bar.
 */
-function AssistantDock({ title = "Assistant", icon = /* @__PURE__ */ jsx(SparklesIcon, {}), fullScreenHref, emptyTitle = "How can I help?", emptyDescription, suggestions, placeholder, dictation, launcher = true, launcherLabel, className, ...props }) {
+function AssistantDock({ title = "Assistant", icon = /* @__PURE__ */ jsx(SparklesIcon, {}), fullScreenHref, actions, emptyTitle = "How can I help?", emptyDescription, suggestions, placeholder, dictation, launcher = true, launcherLabel, className, ...props }) {
 	const { open, setOpen, messages, pending, page, send, stop } = useAssistant();
 	const [draft, setDraft] = React.useState("");
 	const titleId = React.useId();
@@ -200,6 +200,7 @@ function AssistantDock({ title = "Assistant", icon = /* @__PURE__ */ jsx(Sparkle
 						className: "min-w-0 flex-1 truncate text-[15px] font-semibold",
 						children: title
 					}),
+					actions,
 					fullScreenHref && /* @__PURE__ */ jsx(Button, {
 						asChild: true,
 						variant: "ghost",

package/dist/components/ai/chat.js

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

package/dist/components/ai/tool-steps.d.ts

@@ -24,9 +24,9 @@ declare function ToolGroup({ title, status, meta, autoOpen, open: openProp, onOp
 export interface ToolStepProps extends Omit<React.ComponentProps<"div">, "title"> {
   /** Tool icon, e.g. <TerminalIcon />. */
   icon?: React.ReactNode;
-  /** Short verb column, e.g. "Run", "Read", "Edit". */
+  /** Short verb column, e.g. "Run", "Read", "Edit". With an empty `detail` it is the whole label, e.g. "Added milk". */
   kind: React.ReactNode;
-  /** What it acted on, shown monospace: the command or path. */
+  /** What it acted on, shown monospace: the command or path. Empty for a plain-language step. */
   detail: string;
   status: ToolStatus;
   /** Trailing text. Default derived from status ("running", "failed"…). */

package/dist/components/ai/tool-steps.js

@@ -52,7 +52,7 @@ function ToolGroup({ title, status, meta, autoOpen, open: openProp, onOpenChange
 			children: [
 				/* @__PURE__ */ jsx(ChevronRightIcon, { className: cn("size-4 shrink-0 text-muted-foreground transition-transform", open && "rotate-90") }),
 				/* @__PURE__ */ jsx("span", {
-					className: "min-w-0 flex-1 truncate font-medium",
+					className: "min-w-0 flex-1 font-medium wrap-anywhere",
 					children: title
 				}),
 				meta !== void 0 && /* @__PURE__ */ jsx("span", {
@@ -85,11 +85,12 @@ function ToolStep({ icon, kind, detail, status, meta, output, autoOpen, classNam
 			children: icon
 		}),
 		/* @__PURE__ */ jsx("span", {
-			className: "w-18 shrink-0 truncate text-[13px] text-muted-foreground",
+			"data-slot": "tool-step-kind",
+			className: cn("text-[13px] text-muted-foreground wrap-anywhere", detail ? "w-18 shrink-0" : "min-w-0 flex-1 text-foreground"),
 			children: kind
 		}),
-		/* @__PURE__ */ jsx("span", {
-			className: "min-w-0 flex-1 truncate font-mono text-[12.5px]",
+		detail && /* @__PURE__ */ jsx("span", {
+			className: "min-w-0 flex-1 font-mono text-[12.5px] wrap-anywhere",
 			children: detail
 		}),
 		/* @__PURE__ */ jsx("span", {

package/dist/components/ui/dialog.d.ts

@@ -5,7 +5,7 @@ declare function DialogTrigger({ ...props }: React.ComponentProps<typeof Dialog$
 declare function DialogPortal({ ...props }: React.ComponentProps<typeof Dialog$1.Portal>): React.JSX.Element;
 declare function DialogClose({ ...props }: React.ComponentProps<typeof Dialog$1.Close>): React.JSX.Element;
 declare function DialogOverlay({ className, ...props }: React.ComponentProps<typeof Dialog$1.Overlay>): React.JSX.Element;
-declare function DialogContent({ className, children, showCloseButton, ...props }: React.ComponentProps<typeof Dialog$1.Content> & {
+declare function DialogContent({ className, children, showCloseButton, onInteractOutside, ...props }: React.ComponentProps<typeof Dialog$1.Content> & {
   showCloseButton?: boolean;
 }): React.JSX.Element;
 declare function DialogHeader({ className, ...props }: React.ComponentProps<"div">): React.JSX.Element;

package/dist/components/ui/dialog.js

@@ -1,4 +1,5 @@
 "use client";
+import { keepOpenOnToast } from "../../lib/internal/toast-clearance.js";
 import { cn } from "../../lib/utils.js";
 import { Button } from "./button.js";
 import { jsx, jsxs } from "react/jsx-runtime";
@@ -36,11 +37,12 @@ function DialogOverlay({ className, ...props }) {
 		...props
 	});
 }
-function DialogContent({ className, children, showCloseButton = true, ...props }) {
+function DialogContent({ className, children, showCloseButton = true, onInteractOutside, ...props }) {
 	return /* @__PURE__ */ jsxs(DialogPortal, { children: [/* @__PURE__ */ jsx(DialogOverlay, {}), /* @__PURE__ */ jsxs(Dialog$1.Content, {
 		"data-slot": "dialog-content",
 		className: cn("fixed top-1/2 left-1/2 z-50 grid w-full max-w-[calc(100%-2rem)] -translate-x-1/2 -translate-y-1/2 gap-4 rounded-xl bg-popover p-4 text-sm text-popover-foreground ring-1 ring-foreground/10 duration-100 outline-none sm:max-w-sm data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95", className),
 		...props,
+		onInteractOutside: keepOpenOnToast(onInteractOutside),
 		children: [children, showCloseButton && /* @__PURE__ */ jsx(Dialog$1.Close, {
 			"data-slot": "dialog-close",
 			asChild: true,

package/dist/components/ui/drawer.d.ts

@@ -5,7 +5,7 @@ declare function DrawerTrigger({ ...props }: React.ComponentProps<typeof Drawer$
 declare function DrawerPortal({ ...props }: React.ComponentProps<typeof Drawer$1.Portal>): React.JSX.Element;
 declare function DrawerClose({ ...props }: React.ComponentProps<typeof Drawer$1.Close>): React.JSX.Element;
 declare function DrawerOverlay({ className, ...props }: React.ComponentProps<typeof Drawer$1.Overlay>): React.JSX.Element;
-declare function DrawerContent({ className, children, ...props }: React.ComponentProps<typeof Drawer$1.Content>): React.JSX.Element;
+declare function DrawerContent({ className, children, onInteractOutside, ...props }: React.ComponentProps<typeof Drawer$1.Content>): React.JSX.Element;
 declare function DrawerHeader({ className, ...props }: React.ComponentProps<"div">): React.JSX.Element;
 declare function DrawerFooter({ className, ...props }: React.ComponentProps<"div">): React.JSX.Element;
 declare function DrawerTitle({ className, ...props }: React.ComponentProps<typeof Drawer$1.Title>): React.JSX.Element;

package/dist/components/ui/drawer.js

@@ -1,4 +1,5 @@
 "use client";
+import { keepOpenOnToast } from "../../lib/internal/toast-clearance.js";
 import { cn } from "../../lib/utils.js";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { Drawer as Drawer$1 } from "vaul";
@@ -34,13 +35,14 @@ function DrawerOverlay({ className, ...props }) {
 		...props
 	});
 }
-function DrawerContent({ className, children, ...props }) {
+function DrawerContent({ className, children, onInteractOutside, ...props }) {
 	return /* @__PURE__ */ jsxs(DrawerPortal, {
 		"data-slot": "drawer-portal",
 		children: [/* @__PURE__ */ jsx(DrawerOverlay, {}), /* @__PURE__ */ jsxs(Drawer$1.Content, {
 			"data-slot": "drawer-content",
 			className: cn("group/drawer-content fixed z-50 flex h-auto flex-col bg-popover text-sm text-popover-foreground data-[vaul-drawer-direction=bottom]:inset-x-0 data-[vaul-drawer-direction=bottom]:bottom-0 data-[vaul-drawer-direction=bottom]:mt-24 data-[vaul-drawer-direction=bottom]:max-h-[80vh] data-[vaul-drawer-direction=bottom]:rounded-t-xl data-[vaul-drawer-direction=bottom]:border-t data-[vaul-drawer-direction=left]:inset-y-0 data-[vaul-drawer-direction=left]:left-0 data-[vaul-drawer-direction=left]:w-3/4 data-[vaul-drawer-direction=left]:rounded-r-xl data-[vaul-drawer-direction=left]:border-r data-[vaul-drawer-direction=right]:inset-y-0 data-[vaul-drawer-direction=right]:right-0 data-[vaul-drawer-direction=right]:w-3/4 data-[vaul-drawer-direction=right]:rounded-l-xl data-[vaul-drawer-direction=right]:border-l data-[vaul-drawer-direction=top]:inset-x-0 data-[vaul-drawer-direction=top]:top-0 data-[vaul-drawer-direction=top]:mb-24 data-[vaul-drawer-direction=top]:max-h-[80vh] data-[vaul-drawer-direction=top]:rounded-b-xl data-[vaul-drawer-direction=top]:border-b data-[vaul-drawer-direction=left]:sm:max-w-sm data-[vaul-drawer-direction=right]:sm:max-w-sm", className),
 			...props,
+			onInteractOutside: keepOpenOnToast(onInteractOutside),
 			children: [/* @__PURE__ */ jsx("div", { className: "mx-auto mt-4 hidden h-1 w-[100px] shrink-0 rounded-full bg-muted group-data-[vaul-drawer-direction=bottom]/drawer-content:block" }), children]
 		})]
 	});

package/dist/components/ui/sheet.d.ts

@@ -3,7 +3,7 @@ import { Dialog } from "radix-ui";
 declare function Sheet({ ...props }: React.ComponentProps<typeof Dialog.Root>): React.JSX.Element;
 declare function SheetTrigger({ ...props }: React.ComponentProps<typeof Dialog.Trigger>): React.JSX.Element;
 declare function SheetClose({ ...props }: React.ComponentProps<typeof Dialog.Close>): React.JSX.Element;
-declare function SheetContent({ className, children, side, showCloseButton, ...props }: React.ComponentProps<typeof Dialog.Content> & {
+declare function SheetContent({ className, children, side, showCloseButton, onInteractOutside, ...props }: React.ComponentProps<typeof Dialog.Content> & {
   side?: "top" | "right" | "bottom" | "left";
   showCloseButton?: boolean;
 }): React.JSX.Element;

package/dist/components/ui/sheet.js

@@ -1,4 +1,5 @@
 "use client";
+import { keepOpenOnToast } from "../../lib/internal/toast-clearance.js";
 import { cn } from "../../lib/utils.js";
 import { Button } from "./button.js";
 import { jsx, jsxs } from "react/jsx-runtime";
@@ -36,12 +37,13 @@ function SheetOverlay({ className, ...props }) {
 		...props
 	});
 }
-function SheetContent({ className, children, side = "right", showCloseButton = true, ...props }) {
+function SheetContent({ className, children, side = "right", showCloseButton = true, onInteractOutside, ...props }) {
 	return /* @__PURE__ */ jsxs(SheetPortal, { children: [/* @__PURE__ */ jsx(SheetOverlay, {}), /* @__PURE__ */ jsxs(Dialog.Content, {
 		"data-slot": "sheet-content",
 		"data-side": side,
 		className: cn("fixed z-50 flex flex-col gap-4 bg-popover bg-clip-padding text-sm text-popover-foreground shadow-lg transition duration-200 ease-in-out data-[side=bottom]:inset-x-0 data-[side=bottom]:bottom-0 data-[side=bottom]:h-auto data-[side=bottom]:border-t data-[side=left]:inset-y-0 data-[side=left]:left-0 data-[side=left]:h-full data-[side=left]:w-3/4 data-[side=left]:border-r data-[side=right]:inset-y-0 data-[side=right]:right-0 data-[side=right]:h-full data-[side=right]:w-3/4 data-[side=right]:border-l data-[side=top]:inset-x-0 data-[side=top]:top-0 data-[side=top]:h-auto data-[side=top]:border-b data-[side=left]:sm:max-w-sm data-[side=right]:sm:max-w-sm data-open:animate-in data-open:fade-in-0 data-[side=bottom]:data-open:slide-in-from-bottom-10 data-[side=left]:data-open:slide-in-from-left-10 data-[side=right]:data-open:slide-in-from-right-10 data-[side=top]:data-open:slide-in-from-top-10 data-closed:animate-out data-closed:fade-out-0 data-[side=bottom]:data-closed:slide-out-to-bottom-10 data-[side=left]:data-closed:slide-out-to-left-10 data-[side=right]:data-closed:slide-out-to-right-10 data-[side=top]:data-closed:slide-out-to-top-10", className),
 		...props,
+		onInteractOutside: keepOpenOnToast(onInteractOutside),
 		children: [children, showCloseButton && /* @__PURE__ */ jsx(Dialog.Close, {
 			"data-slot": "sheet-close",
 			asChild: true,

package/dist/components/ui/sonner.js

@@ -20,7 +20,8 @@ const Toaster = ({ ...props }) => {
 			"--normal-bg": "var(--popover)",
 			"--normal-text": "var(--popover-foreground)",
 			"--normal-border": "var(--border)",
-			"--border-radius": "var(--radius)"
+			"--border-radius": "var(--radius)",
+			pointerEvents: "auto"
 		},
 		toastOptions: { classNames: {
 			toast: "cn-toast",

package/dist/components/ui/trace.js

@@ -30,7 +30,7 @@ function TraceIcon({ className, ...props }) {
 function TraceTitle({ className, ...props }) {
 	return /* @__PURE__ */ jsx("span", {
 		"data-slot": "trace-title",
-		className: cn("min-w-0 truncate motion-reduce:shimmer-none", className),
+		className: cn("min-w-0 wrap-anywhere motion-reduce:shimmer-none", className),
 		...props
 	});
 }

package/dist/lib/internal/toast-clearance.js

@@ -2,6 +2,16 @@
 import * as React from "react";
 // src/lib/internal/toast-clearance.ts
 const counts = /* @__PURE__ */ new Map();
+/**
+* For a modal's `onInteractOutside`: a press or focus inside the Toaster (e.g. a toast's Undo) does not dismiss the
+* modal. The Toaster opts out of the modal's `pointer-events: none` on <body> (src/components/ui/sonner.tsx).
+*/
+function keepOpenOnToast(handler) {
+	return (event) => {
+		handler?.(event);
+		if (event.target instanceof Element && event.target.closest("[data-sonner-toaster]")) event.preventDefault();
+	};
+}
 function useToastClearance(name, value, enabled = true) {
 	React.useEffect(() => {
 		if (!enabled || typeof document === "undefined") return;
@@ -19,4 +29,4 @@ function useToastClearance(name, value, enabled = true) {
 		enabled
 	]);
 }
-export { useToastClearance };
+export { keepOpenOnToast, useToastClearance };

package/dist/styles.css

@@ -319,22 +319,37 @@
 /* Toasts clear floating controls. AppNav (tab bar, action button) and AssistantDock (launcher) set --hb-toast-* on
    <html> while mounted (src/lib/internal/toast-clearance.ts); this adds them to Sonner's bottom offset. Unlayered and
    !important because Sonner injects its own unlayered rule at runtime. Breakpoints: AppNav's tab bar shows under
-   768px; Sonner switches to full-width mobile toasts under 600px. */
+   768px; Sonner switches to full-width mobile toasts under 600px.
+   An open DetailSheet sets --hb-toast-sheet (desktop side sheet: its width plus gap) or --hb-toast-drawer (phone
+   full-screen drawer: its footer height). The sheet moves toasts left of it and narrows them to fit; the drawer
+   replaces the other bottom offsets, since it covers the tab bar, action button and launcher. */
 [data-sonner-toaster][data-y-position="bottom"] {
   bottom: calc(var(--offset-bottom) + var(--hb-toast-launcher, 0px)) !important;
 }
+@media (min-width: 768px) {
+  [data-sonner-toaster] {
+    --width: min(356px, 100vw - var(--hb-toast-sheet, 0px) - 2 * var(--offset-right)) !important;
+  }
+  [data-sonner-toaster][data-x-position="right"] {
+    right: calc(var(--offset-right) + var(--hb-toast-sheet, 0px)) !important;
+  }
+  [data-sonner-toaster][data-x-position="center"] {
+    transform: translateX(calc(-50% - var(--hb-toast-sheet, 0px) / 2)) !important;
+  }
+}
 @media (max-width: 767px) {
   [data-sonner-toaster][data-y-position="bottom"] {
     bottom: calc(
-      var(--offset-bottom) + var(--hb-toast-nav, 0px) + var(--hb-toast-fab, 0px) + var(--hb-toast-launcher, 0px)
+      var(--offset-bottom) +
+        var(--hb-toast-drawer, var(--hb-toast-nav, 0px) + var(--hb-toast-fab, 0px) + var(--hb-toast-launcher, 0px))
     ) !important;
   }
 }
 @media (max-width: 600px) {
   [data-sonner-toaster][data-y-position="bottom"] {
     bottom: calc(
-      var(--mobile-offset-bottom) + var(--hb-toast-nav, 0px) + var(--hb-toast-fab, 0px) +
-        var(--hb-toast-launcher, 0px)
+      var(--mobile-offset-bottom) +
+        var(--hb-toast-drawer, var(--hb-toast-nav, 0px) + var(--hb-toast-fab, 0px) + var(--hb-toast-launcher, 0px))
     ) !important;
   }
 }

package/docs/COMPONENTS.md

@@ -373,7 +373,7 @@ Searchable IANA time zone field built on `Combobox`, listing `Intl.supportedValu
 
 ### `DetailSheet`
 
-A record's details, one API for both sizes: a floating side sheet from 768px up, a full-screen drawer with a close button on phones. Props: `open`, `onOpenChange`, `title` (heading and accessible name), `description?`, `footer?` (pinned under the scrolling body, e.g. Delete), `children` (the fields). `data-layout` is `"sheet"` or `"drawer"`.
+A record's details, one API for both sizes: a floating side sheet from 768px up, a full-screen drawer with a close button on phones. Props: `open`, `onOpenChange`, `title` (heading and accessible name), `description?`, `footer?` (pinned under the scrolling body, e.g. Delete), `children` (the fields). `data-layout` is `"sheet"` or `"drawer"`. While open, toasts (e.g. `toastUndo`) stay off it: on desktop they move to the left of the sheet and narrow to fit; on phones they sit above the footer (one row of buttons) or the bottom safe area, in place of the hidden tab bar's space.
 
 ```tsx
 ;<DetailSheet
@@ -651,7 +651,7 @@ Scrollable log that sticks to the bottom as content streams in (unless the user
 
 ### `ChatMessage`
 
-One turn. Props: `role: "user" | "assistant"` (matches AI SDK message roles), `avatar?` (assistant only, defaults to `AssistantAvatar`; `false` for none and full-width content, for agent threads where one turn is many blocks), `actions?` (assistant only, under the content), `variant?` (user bubble: `"muted"` default or `"soft"` accent tint), `children`. Long words wrap.
+One turn. Props: `role: "user" | "assistant"` (matches AI SDK message roles), `avatar?` (assistant only, defaults to `AssistantAvatar`; `false` for none and full-width content, for agent threads where one turn is many blocks), `actions?` (assistant only, under the content), `variant?` (user bubble: `"muted"` default or `"soft"` accent tint), `children`. Long words wrap, in assistant content too.
 User turns render as a right-aligned bubble with preserved newlines. Assistant turns render free-flowing: put `Prose`, `CodeBlock`, `ToolCall`, `TypingIndicator` inside.
 
 ```tsx
@@ -722,9 +722,9 @@ Three pulsing dots. Props: `label?` (text after the dots, e.g. "Working"), `vari
 
 ### `ToolGroup`, `ToolStep`, `ToolStatusIcon`
 
-Agent tool calls as a bordered, collapsible card. `ToolStatus = "queued" | "waiting" | "running" | "done" | "error" | "stopped"`.
+Agent tool calls as a bordered, collapsible card. Titles, labels and details wrap instead of cutting off. `ToolStatus = "queued" | "waiting" | "running" | "done" | "error" | "stopped"`.
 `ToolGroup` props: `title`, `status`, `meta?` (e.g. time), `autoOpen?` (default open while active, until the user toggles), `open?`/`onOpenChange?`.
-`ToolStep` props: `icon?`, `kind` (verb column), `detail` (monospace command or path), `status`, `meta?` (default from status), `output?` (monospace, shown when expanded; omit for a fixed row), `autoOpen?` (default open while running).
+`ToolStep` props: `icon?`, `kind` (verb column; with an empty `detail` it is the whole label, for plain-language steps such as "Added milk"), `detail` (monospace command or path, or `""`), `status`, `meta?` (default from status), `output?` (monospace, shown when expanded; omit for a fixed row), `autoOpen?` (default open while running).
 `ToolStatusIcon`: spinner while running, else a toned dot. Lighter alternative: `Trace`.
 
 ```tsx
@@ -736,7 +736,7 @@ Agent tool calls as a bordered, collapsible card. `ToolStatus = "queued" | "wait
 ### `ApprovalCard`, `ApprovalResult`
 
 `ApprovalCard`: warning-ringed card for anything the agent waits on the user for. Props: `title`, `description?`, `icon?` (default shield, `null` for none), `reason?` (shown first after a bold "Why:"), `code?` + `codeLabel?` (wrapped code block with copy), `actions?` (buttons), `footer?`, `children` (more body).
-`ApprovalResult`: one-line record in the thread. Props: `decision: "approved" | "denied"`, `time?`, `children`.
+`ApprovalResult`: short record of a decision in the thread; wraps when long. Props: `decision: "approved" | "denied"`, `time?`, `children`.
 
 ### `AssistantProvider`, `useAssistant`, `useAssistantPage`
 
@@ -744,7 +744,7 @@ One assistant conversation across pages. `AssistantProvider` props: `onSend(text
 
 ### `AssistantDock`
 
-The assistant as a floating panel over the page (never reflows it): header (icon, title, full-screen link, close), empty state with suggestions, thread, `AskBox` (Stop while the assistant works, wired to `useAssistant().stop`). Closed, it is a soft launcher button. Escape closes and returns focus to the launcher. Props: `title?` (default "Assistant"), `icon?`, `fullScreenHref?`, `emptyTitle?`, `emptyDescription?`, `suggestions?` (default: the page's), `placeholder?`, `dictation?`, `launcher?` (false when another control opens it), `launcherLabel?`.
+The assistant as a floating panel over the page (never reflows it): header (icon, title, your `actions`, full-screen link, close), empty state with suggestions, thread, `AskBox` (Stop while the assistant works, wired to `useAssistant().stop`). Closed, it is a soft launcher button. Escape closes and returns focus to the launcher. Props: `title?` (default "Assistant"), `icon?`, `fullScreenHref?`, `actions?` (header controls before the full-screen link, e.g. a "New chat" icon button with an `aria-label`), `emptyTitle?`, `emptyDescription?`, `suggestions?` (default: the page's), `placeholder?`, `dictation?`, `launcher?` (false when another control opens it), `launcherLabel?`.
 
 ### `AskBox`
 
@@ -774,7 +774,7 @@ const { send, pending, stop, reply } = useAssistant()
 
 ### `ActionReceipt`
 
-What the assistant did, as a compact card: round check, `title` (past tense), `meta?`, Undo (`onUndo?`, `undoLabel?`). `undone` strikes it through and shows "Undone".
+What the assistant did, as a compact card: round check, `title` (past tense), `meta?` (wraps when long), Undo (`onUndo?`, `undoLabel?`). `undone` strikes it through and shows "Undone".
 
 ### `CodeSnippet`, `InlineCode`, `Prose`, `ProseBlockquote`
 

package/docs/ROADMAP.md

@@ -48,7 +48,7 @@ Calendar views and SmartInput follow when a second app needs them.
 | AssistantDock (built)                   | Floating panel over the page (never reflows it) with header, empty state, thread, receipts and composer; a soft launcher button when closed; a link to full screen. Same on every page; pages pass suggestions only.     | Extends ChatShell.                                |
 | AskBox (built)                          | Large rounded input with chips that appear as you type, suggestion pills under it, and the dictation button. Focus ring on the box, not the field.                                                                       | One placeholder per app ("Ask HomeBot anything"). |
 | DictationButton, `useDictation` (built) | One button that is a microphone when empty, a stop button while listening (with listening bars and a live region), and send once there is text. The speech source plugs in (browser speech recognition, a server model). | Off-animation under reduced motion.               |
-| ActionReceipt (built)                   | What the assistant did, as a compact card: round check, title, one meta line, Undo. One per action.                                                                                                                      | The core of "safe actions run on their own".      |
+| ActionReceipt (built)                   | What the assistant did, as a compact card: round check, title, meta, Undo. One per action.                                                                                                                               | The core of "safe actions run on their own".      |
 | WhatIDid                                | Collapsed list of plain past-tense steps under an answer.                                                                                                                                                                | A plain-language variant of ToolSteps.            |
 | ProgressCard                            | A long-running job: title, status word, progress bar, time left, an action when finished.                                                                                                                                | Downloads, imports, syncs.                        |
 | ChatsHome                               | Recent chats grouped Today, This week, Earlier, with search and a row menu (Rename, Delete with inline confirm).                                                                                                         | Extends ConversationList.                         |

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "harebear-ui",
-  "version": "0.10.0",
+  "version": "0.11.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",