harebear-ui 0.10.0 → 0.12.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.d.ts

@@ -18,8 +18,13 @@ export interface AskBoxProps extends Omit<React.ComponentProps<"form">, "onSubmi
   lang?: string;
   disabled?: boolean;
   autoFocus?: boolean;
-  /** The assistant is working: sending is blocked and, with `onStop`, the send button becomes Stop. */
+  /** The assistant is working: sending is blocked (unless `queue`) and, with `onStop`, the send button becomes Stop. */
   pending?: boolean;
+  /**
+   * Allow sending while `pending`, so the app can queue a follow-up. Enter submits and the send button shows beside
+   * Stop. Default false.
+   */
+  queue?: boolean;
   /** Stops the assistant. Shown as a Stop button while `pending`. */
   onStop?: () => void;
   /**
@@ -33,7 +38,7 @@ export interface AskBoxProps extends Omit<React.ComponentProps<"form">, "onSubmi
 /**
  * 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. With `reply` the answer shows under the box;
- * with `pending` and `onStop` the send button becomes Stop.
+ * with `pending` and `onStop` the send button becomes Stop (with `queue`, send stays beside it).
  */
-declare function AskBox({ value, onValueChange, onSubmit, placeholder, chips, suggestions, onSuggestion, dictation, lang, disabled, autoFocus, pending, onStop, reply, chatHref, className, ...props }: AskBoxProps): React.JSX.Element;
+declare function AskBox({ value, onValueChange, onSubmit, placeholder, chips, suggestions, onSuggestion, dictation, lang, disabled, autoFocus, pending, queue, onStop, reply, chatHref, className, ...props }: AskBoxProps): React.JSX.Element;
 export { AskBox };

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

@@ -14,13 +14,13 @@ const noSpeech = {
 /**
 * 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. With `reply` the answer shows under the box;
-* with `pending` and `onStop` the send button becomes Stop.
+* with `pending` and `onStop` the send button becomes Stop (with `queue`, send stays beside it).
 */
-function AskBox({ value, onValueChange, onSubmit, placeholder = "Ask anything", chips, suggestions, onSuggestion, dictation, lang, disabled, autoFocus, pending, onStop, reply, chatHref, className, ...props }) {
+function AskBox({ value, onValueChange, onSubmit, placeholder = "Ask anything", chips, suggestions, onSuggestion, dictation, lang, disabled, autoFocus, pending, queue, onStop, reply, chatHref, className, ...props }) {
 	const id = React.useId();
 	const submit = () => {
 		const text = value.trim();
-		if (!text || disabled || pending) return;
+		if (!text || disabled || pending && !queue) return;
 		onSubmit(text);
 		document.getElementById(id)?.focus();
 	};
@@ -62,7 +62,7 @@ function AskBox({ value, onValueChange, onSubmit, placeholder = "Ask anything",
 							},
 							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"
 						}),
-						pending && onStop ? /* @__PURE__ */ jsx(Button, {
+						pending && onStop && /* @__PURE__ */ jsx(Button, {
 							type: "button",
 							size: "icon",
 							shape: "pill",
@@ -73,9 +73,10 @@ function AskBox({ value, onValueChange, onSubmit, placeholder = "Ask anything",
 								document.getElementById(id)?.focus();
 							},
 							children: /* @__PURE__ */ jsx(SquareIcon, { className: "size-3.5 fill-current" })
-						}) : /* @__PURE__ */ jsx(DictationButton, {
+						}),
+						(!pending || !onStop || queue) && /* @__PURE__ */ jsx(DictationButton, {
 							value,
-							disabled: disabled || pending,
+							disabled: disabled || pending && !queue,
 							source: dictation === false ? noSpeech : dictation,
 							lang,
 							onTranscript: (text) => onValueChange(value ? `${value.replace(/\s+$/, "")} ${text}` : text)
@@ -91,7 +92,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

@@ -25,7 +25,12 @@ export interface AssistantSendContext {
   }) => string;
   /** Replace a message's content, e.g. while a reply streams in. */
   update: (id: string, content: React.ReactNode) => void;
-  /** Aborted when the user presses Stop. Pass it to `fetch`, or listen for `abort` to tell your server to stop. */
+  /**
+   * Aborted when the user presses Stop (`signal.reason` is "stop") or when the next send starts (`signal.reason` is
+   * "superseded"). Pass it to `fetch`, or listen for `abort` and tell your server to stop only on "stop". After either
+   * abort, this send's return value and later `append`/`update` calls are dropped; on "superseded", show the rest of
+   * the run through the new send.
+   */
   signal: AbortSignal;
 }
 export interface AssistantSendOptions {
@@ -45,7 +50,7 @@ export interface AssistantContextValue {
   setPage: (page: AssistantPage | null) => void;
   /** Adds the user message, opens the dock (unless `{ open: false }`) and runs the app's onSend. */
   send: (text: string, options?: AssistantSendOptions) => Promise<void>;
-  /** Stops the running send: aborts its `signal`, ends `pending` and drops its return value and later `append`/`update` calls. */
+  /** Stops the running send: aborts its `signal` with reason "stop", ends `pending` and drops its return value and later `append`/`update` calls. */
   stop: () => void;
   append: AssistantSendContext["append"];
   update: AssistantSendContext["update"];
@@ -80,6 +85,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. */
@@ -94,11 +101,16 @@ export interface AssistantDockProps extends Omit<React.ComponentProps<"section">
   launcher?: boolean;
   /** Label of the launcher. Default `Ask ${title}`. */
   launcherLabel?: string;
+  /**
+   * Allow sending while the assistant works, so the app can queue a follow-up. The new send aborts the running
+   * one's `signal` with reason "superseded", not "stop". Stop stays available. Default false.
+   */
+  queue?: boolean;
 }
 /**
  * The assistant as a floating panel over the page (it never reflows the page): header, empty state with
  * 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, queue, className, ...props }: AssistantDockProps): React.JSX.Element | null;
 export { AssistantDock, AssistantProvider };

package/dist/components/ai/assistant.js

@@ -43,7 +43,7 @@ function AssistantProvider({ onSend, initialMessages = [], defaultOpen = false,
 	}, []);
 	const send = React.useCallback(async (text, options) => {
 		const before = messagesRef.current;
-		runRef.current?.abort();
+		runRef.current?.abort("superseded");
 		const run = new AbortController();
 		runRef.current = run;
 		append({
@@ -81,7 +81,7 @@ function AssistantProvider({ onSend, initialMessages = [], defaultOpen = false,
 		}
 	}, [append, update]);
 	const stop = React.useCallback(() => {
-		runRef.current?.abort();
+		runRef.current?.abort("stop");
 		runRef.current = null;
 		setPending(false);
 	}, []);
@@ -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, queue, className, ...props }) {
 	const { open, setOpen, messages, pending, page, send, stop } = useAssistant();
 	const [draft, setDraft] = React.useState("");
 	const titleId = React.useId();
@@ -158,7 +158,7 @@ function AssistantDock({ title = "Assistant", icon = /* @__PURE__ */ jsx(Sparkle
 		wasOpen.current = open;
 	}, [open]);
 	const submit = (text) => {
-		if (pending) return;
+		if (pending && !queue) return;
 		setDraft("");
 		panelRef.current?.querySelector("textarea")?.focus();
 		send(text);
@@ -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",
@@ -250,6 +251,7 @@ function AssistantDock({ title = "Assistant", icon = /* @__PURE__ */ jsx(Sparkle
 					suggestions: messages.length === 0 ? pills : void 0,
 					dictation,
 					pending,
+					queue,
 					onStop: stop
 				})
 			})

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/prompt-input.d.ts

@@ -6,8 +6,15 @@ export interface PromptInputProps extends Omit<React.ComponentProps<"form">, "on
   /** Called with the trimmed text on Enter or the send button. Shift+Enter inserts a newline. */
   onSubmit: (value: string) => void;
   placeholder?: string;
-  /** While true, the send button becomes a stop button. */
+  /** The text field's accessible name. Default the placeholder. */
+  label?: string;
+  /** While true, the send button becomes a stop button (with `queue`, send stays beside it). */
   loading?: boolean;
+  /**
+   * Allow sending while `loading`, so the app can queue a follow-up. Enter submits and a send button shows beside
+   * Stop. Default false: sending waits until `loading` ends.
+   */
+  queue?: boolean;
   onStop?: () => void;
   /** Shows a paperclip button. */
   onAttach?: () => void;
@@ -18,8 +25,8 @@ export interface PromptInputProps extends Omit<React.ComponentProps<"form">, "on
   disabled?: boolean;
   autoFocus?: boolean;
 }
-/** Chat composer: auto-growing textarea with attach, tool chips, and send/stop. */
-declare function PromptInput({ value, onValueChange, onSubmit, placeholder, loading, onStop, onAttach, tools, footer, disabled, autoFocus, className, ...props }: PromptInputProps): React.JSX.Element;
+/** Chat composer: auto-growing textarea with attach, tool chips, and send/stop. With `queue`, follow-ups can be sent while loading. */
+declare function PromptInput({ value, onValueChange, onSubmit, placeholder, label, loading, queue, onStop, onAttach, tools, footer, disabled, autoFocus, className, ...props }: PromptInputProps): React.JSX.Element;
 export interface PromptInputChipProps extends React.ComponentProps<typeof Button> {
   active?: boolean;
   /** "warning" outlines the chip in the warning color, e.g. for a risky mode that is on. */

package/dist/components/ai/prompt-input.js

@@ -6,12 +6,12 @@ import * as React from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { ArrowUpIcon, ChevronDownIcon, PaperclipIcon, SquareIcon } from "lucide-react";
 // src/components/ai/prompt-input.tsx
-/** Chat composer: auto-growing textarea with attach, tool chips, and send/stop. */
-function PromptInput({ value, onValueChange, onSubmit, placeholder = "Send a message…", loading, onStop, onAttach, tools, footer, disabled, autoFocus, className, ...props }) {
+/** Chat composer: auto-growing textarea with attach, tool chips, and send/stop. With `queue`, follow-ups can be sent while loading. */
+function PromptInput({ value, onValueChange, onSubmit, placeholder = "Send a message…", label = placeholder, loading, queue, onStop, onAttach, tools, footer, disabled, autoFocus, className, ...props }) {
 	const id = React.useId();
 	const canSend = value.trim().length > 0 && !disabled;
 	const submit = () => {
-		if (canSend && !loading) onSubmit(value.trim());
+		if (canSend && (!loading || queue)) onSubmit(value.trim());
 	};
 	return /* @__PURE__ */ jsxs("form", {
 		"data-slot": "prompt-input",
@@ -27,7 +27,7 @@ function PromptInput({ value, onValueChange, onSubmit, placeholder = "Send a mes
 				/* @__PURE__ */ jsx("label", {
 					htmlFor: id,
 					className: "sr-only",
-					children: "Message"
+					children: label
 				}),
 				/* @__PURE__ */ jsx("textarea", {
 					id,
@@ -59,7 +59,7 @@ function PromptInput({ value, onValueChange, onSubmit, placeholder = "Send a mes
 						}),
 						tools,
 						/* @__PURE__ */ jsx("div", { className: "flex-1" }),
-						loading && onStop ? /* @__PURE__ */ jsx(Button, {
+						loading && onStop && /* @__PURE__ */ jsx(Button, {
 							type: "button",
 							size: "icon",
 							shape: "pill",
@@ -67,13 +67,14 @@ function PromptInput({ value, onValueChange, onSubmit, placeholder = "Send a mes
 							"aria-label": "Stop generating",
 							onClick: onStop,
 							children: /* @__PURE__ */ jsx(SquareIcon, { className: "fill-current" })
-						}) : /* @__PURE__ */ jsx(Button, {
+						}),
+						(!loading || !onStop || queue) && /* @__PURE__ */ jsx(Button, {
 							type: "submit",
 							size: "icon",
 							shape: "pill",
 							className: "size-9",
 							"aria-label": "Send message",
-							disabled: !canSend || loading,
+							disabled: !canSend || loading && !queue,
 							children: /* @__PURE__ */ jsx(ArrowUpIcon, {})
 						})
 					]

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/avatar.js

@@ -21,7 +21,7 @@ function AvatarImage({ className, ...props }) {
 function AvatarFallback({ className, ...props }) {
 	return /* @__PURE__ */ jsx(Avatar$1.Fallback, {
 		"data-slot": "avatar-fallback",
-		className: cn("flex size-full items-center justify-center rounded-full bg-primary-soft text-[13px] font-semibold text-primary group-data-[size=sm]/avatar:text-xs group-data-[size=lg]/avatar:text-lg", className),
+		className: cn("flex size-full items-center justify-center rounded-full bg-primary-soft text-[13px] font-semibold text-primary-soft-foreground group-data-[size=sm]/avatar:text-xs group-data-[size=lg]/avatar:text-lg", className),
 		...props
 	});
 }

package/dist/components/ui/badge.js

@@ -9,7 +9,7 @@ const badgeVariants = cva("group/badge inline-flex h-6 w-fit shrink-0 items-cent
 		variant: {
 			default: "bg-primary text-primary-foreground [a]:hover:bg-primary/80",
 			secondary: "bg-secondary text-secondary-foreground [a]:hover:bg-secondary/80",
-			soft: "bg-primary-soft text-primary",
+			soft: "bg-primary-soft text-primary-soft-foreground",
 			success: "bg-success/12 text-success",
 			warning: "bg-warning/12 text-warning",
 			destructive: "bg-destructive/10 text-destructive focus-visible:ring-destructive/20 dark:bg-destructive/20 dark:focus-visible:ring-destructive/40 [a]:hover:bg-destructive/20",

package/dist/components/ui/button.js

@@ -12,7 +12,7 @@ const buttonVariants = cva("group/button relative inline-flex shrink-0 items-cen
 			secondary: "bg-secondary text-secondary-foreground hover:bg-[color-mix(in_oklab,var(--secondary),var(--foreground)_6%)] aria-expanded:bg-[color-mix(in_oklab,var(--secondary),var(--foreground)_6%)]",
 			outline: "border-border bg-card text-foreground hover:bg-muted aria-expanded:bg-muted",
 			ghost: "text-muted-foreground hover:bg-muted hover:text-foreground aria-expanded:bg-muted aria-expanded:text-foreground",
-			soft: "bg-primary-soft text-primary hover:bg-[color-mix(in_oklab,var(--primary-soft),var(--primary)_8%)]",
+			soft: "bg-primary-soft text-primary-soft-foreground hover:bg-[color-mix(in_oklab,var(--primary-soft),var(--primary)_8%)]",
 			dashed: "border-dashed border-border bg-transparent text-muted-foreground hover:border-muted-foreground hover:text-foreground",
 			destructive: "bg-destructive/10 text-destructive hover:bg-destructive/20 focus-visible:border-destructive/40 focus-visible:ring-destructive/20 dark:bg-destructive/20 dark:hover:bg-destructive/30",
 			link: "text-primary underline-offset-4 hover:underline"

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,11 +20,12 @@ 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",
-			actionButton: "bg-primary-soft! text-primary! font-medium! h-8! px-3! rounded-md!"
+			actionButton: "bg-primary-soft! text-primary-soft-foreground! font-medium! h-8! px-3! rounded-md!"
 		} },
 		...props
 	});

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

@@ -34,6 +34,7 @@
   --color-primary: var(--primary);
   --color-primary-foreground: var(--primary-foreground);
   --color-primary-soft: var(--primary-soft);
+  --color-primary-soft-foreground: var(--primary-soft-foreground);
   --color-secondary: var(--secondary);
   --color-secondary-foreground: var(--secondary-foreground);
   --color-muted: var(--muted);
@@ -96,6 +97,7 @@
   --primary: var(--brand);
   --primary-foreground: #ffffff;
   --primary-soft: color-mix(in oklab, var(--primary) 10%, var(--card));
+  --primary-soft-foreground: var(--primary);
   --secondary: #f1f1f3;
   --secondary-foreground: #18181b;
   --muted: #f1f1f3;
@@ -148,6 +150,8 @@
   --primary: color-mix(in oklab, var(--brand), white 26%);
   --primary-foreground: #0b1020;
   --primary-soft: color-mix(in oklab, var(--primary) 15%, var(--card));
+  /* Text on primary-soft: plain primary is 4.35:1 here with the default brand; this is 6.6:1. */
+  --primary-soft-foreground: color-mix(in oklab, var(--primary), white 30%);
   --secondary: #232326;
   --secondary-foreground: #ededef;
   --muted: #232326;
@@ -319,22 +323,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
@@ -689,7 +689,7 @@ Row of ghost icon buttons. Props: `copyText?` (shows copy), `onRegenerate?`, `on
 
 ### `PromptInput`, `PromptInputChip`
 
-Composer. Props: `value`, `onValueChange`, `onSubmit(text)` (Enter sends trimmed text, Shift+Enter is a newline), `placeholder?`, `loading?` + `onStop?` (send becomes stop), `onAttach?` (shows paperclip), `tools?` (chips), `footer?` (disclaimer), `disabled?`, `autoFocus?`.
+Composer. Props: `value`, `onValueChange`, `onSubmit(text)` (Enter sends trimmed text, Shift+Enter is a newline), `placeholder?`, `label?` (the field's accessible name, default the placeholder), `loading?` + `onStop?` (send becomes stop), `queue?` (Enter and send still work while `loading`, beside Stop, so the app can queue a follow-up), `onAttach?` (shows paperclip), `tools?` (chips), `footer?` (disclaimer), `disabled?`, `autoFocus?`.
 `PromptInputChip` is a pill toggle for the tools slot: `active`, `tone?` (`"warning"`), `onClick`, children (icon + label).
 
 ### `PromptInputSelect`
@@ -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,19 +736,19 @@ 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`
 
-One assistant conversation across pages. `AssistantProvider` props: `onSend(text, { page, messages, append, update, signal })` (return the reply, or `append`/`update` messages yourself for streaming and receipts; a thrown error becomes the reply; `signal` aborts when the user presses Stop, so pass it to `fetch` or listen for `abort` to tell your server), `initialMessages?`, `defaultOpen?`. `useAssistant()` returns `{ open, setOpen, toggle, messages, pending, reply, page, setPage, send, stop, append, update, clear }`: `send(text, { open: false }?)` skips opening the dock, `stop()` aborts the running send, ends `pending` and drops its late reply, `reply` is the assistant messages after the latest user message (null until there is one), for `AskBox`. A page calls `useAssistantPage({ id, title?, data?, suggestions? })` to become the context while mounted.
+One assistant conversation across pages. `AssistantProvider` props: `onSend(text, { page, messages, append, update, signal })` (return the reply, or `append`/`update` messages yourself for streaming and receipts; a thrown error becomes the reply; `signal` aborts with `signal.reason` `"stop"` when the user presses Stop and `"superseded"` when the next send starts, so pass it to `fetch`, or listen for `abort` and tell your server to stop only on `"stop"`; after either abort that send's return value and later `append`/`update` calls are dropped, so on `"superseded"` show the rest of the run through the new send), `initialMessages?`, `defaultOpen?`. `useAssistant()` returns `{ open, setOpen, toggle, messages, pending, reply, page, setPage, send, stop, append, update, clear }`: `send(text, { open: false }?)` skips opening the dock, `stop()` aborts the running send (reason `"stop"`), ends `pending` and drops its late reply, `reply` is the assistant messages after the latest user message (null until there is one), for `AskBox`. A page calls `useAssistantPage({ id, title?, data?, suggestions? })` to become the context while mounted.
 
 ### `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?`, `queue?` (send follow-ups while the assistant works; the running send's `signal` aborts with reason `"superseded"` and its later output is dropped, so the new send shows the rest; Stop stays).
 
 ### `AskBox`
 
-Large rounded composer: auto-growing text, `chips` shown while there is text, suggestion pills, `DictationButton`. The focus ring is on the box (`focus-box`). Props: `value`, `onValueChange`, `onSubmit(text)`, `placeholder?` (also the label, default "Ask anything"), `chips?`, `suggestions?`, `onSuggestion?` (default submits), `dictation?` (`SpeechSource`, or `false` to hide the mic), `lang?`, `disabled?`, `pending?` (blocks sending; with `onStop?` the send button becomes Stop), `reply?` (the answer under the box; passing it, even `null`, shows "Working" while `pending`), `chatHref?` (an "Open chat" link under the reply).
+Large rounded composer: auto-growing text, `chips` shown while there is text, suggestion pills, `DictationButton`. The focus ring is on the box (`focus-box`). Props: `value`, `onValueChange`, `onSubmit(text)`, `placeholder?` (also the label, default "Ask anything"), `chips?`, `suggestions?`, `onSuggestion?` (default submits), `dictation?` (`SpeechSource`, or `false` to hide the mic), `lang?`, `disabled?`, `pending?` (blocks sending; with `onStop?` the send button becomes Stop), `queue?` (sending works while `pending`, with send beside Stop, so the app can queue a follow-up), `reply?` (the answer under the box; passing it, even `null`, shows "Working" while `pending`), `chatHref?` (an "Open chat" link under the reply).
 
 ```tsx
 // Inline answer under the box (no dock), e.g. a Today page
@@ -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`
 
@@ -884,20 +884,22 @@ Reset or first password: "New password" + "Confirm password" (a mismatch is bloc
 
 Use these as Tailwind utilities (`bg-*`, `text-*`, `border-*`, `ring-*`, `fill-*`, `stroke-*`):
 
-| Token                               | Use                                                                                                     |
-| ----------------------------------- | ------------------------------------------------------------------------------------------------------- |
-| `background` / `foreground`         | Page background and body text.                                                                          |
-| `card` / `card-foreground`          | Raised surfaces (cards, active nav item, popovers via `popover`).                                       |
-| `muted` / `muted-foreground`        | Inputs, segmented controls, quiet panels; secondary text and labels.                                    |
-| `primary` / `primary-foreground`    | Brand accent (from `--brand`). Primary buttons, links, chart line.                                      |
-| `primary-soft`                      | Tinted primary background for selected rows, soft badges, icon circles. Pair with `text-primary`.       |
-| `secondary`, `accent`               | Same as muted; kept for shadcn compatibility.                                                           |
-| `success`, `warning`, `destructive` | Status colors. Use `bg-success/12 text-success` for soft status fills.                                  |
-| `border`, `input`, `ring`           | Hairlines, input borders, focus rings.                                                                  |
-| `chart-1` … `chart-5`, `chart-grid` | Data series and gridlines.                                                                              |
-| `category-1` … `category-6`         | Members, lists, calendars: blue, teal, violet, rose, slate, cyan, each with a dark value. Never status. |
-| `category-foreground`               | Text and icons on a category fill (initials, a swatch's check).                                         |
-| `sidebar-*`                         | Sidebar surfaces (default to the page tokens).                                                          |
+| Token                                      | Use                                                                                                     |
+| ------------------------------------------ | ------------------------------------------------------------------------------------------------------- |
+| `background` / `foreground`                | Page background and body text.                                                                          |
+| `card` / `card-foreground`                 | Raised surfaces (cards, active nav item, popovers via `popover`).                                       |
+| `muted` / `muted-foreground`               | Inputs, segmented controls, quiet panels; secondary text and labels.                                    |
+| `primary` / `primary-foreground`           | Brand accent (from `--brand`). Primary buttons, links, chart line.                                      |
+| `primary-soft` / `primary-soft-foreground` | Tinted primary background for selected rows, soft badges, icon circles, and the text that goes on it.   |
+| `secondary`, `accent`                      | Same as muted; kept for shadcn compatibility.                                                           |
+| `success`, `warning`, `destructive`        | Status colors. Use `bg-success/12 text-success` for soft status fills.                                  |
+| `border`, `input`, `ring`                  | Hairlines, input borders, focus rings.                                                                  |
+| `chart-1` … `chart-5`, `chart-grid`        | Data series and gridlines.                                                                              |
+| `category-1` … `category-6`                | Members, lists, calendars: blue, teal, violet, rose, slate, cyan, each with a dark value. Never status. |
+| `category-foreground`                      | Text and icons on a category fill (initials, a swatch's check).                                         |
+| `sidebar-*`                                | Sidebar surfaces (default to the page tokens).                                                          |
+
+Put text on `bg-primary-soft` in `text-primary-soft-foreground`, not `text-primary`. In dark mode plain primary on the soft tint is 4.35:1 with the default brand, under axe's 4.5:1; the soft foreground is primary mixed with 30% white there (6.6:1) and plain primary in light mode. The soft Button and Badge, Avatar initials and the toast action use it. Icons alone need only 3:1, so `text-primary` is fine for them.
 
 Other theme values: `rounded-sm/md/lg/xl/2xl` scale from `--radius` (default 14px; cards use `xl`, buttons and inputs `md`), `shadow-card` (the one elevation), `font-sans` (Geist), `font-mono` (Geist Mono), `animate-typing`.
 

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/docs/guides/theming.md

@@ -68,16 +68,16 @@ Use CSS rather than props when the first paint must be right (SSR apps): `ThemeP
 
 The full token list, with what each is for, is in the [component catalog](../COMPONENTS.md#tokens) (`npx harebear-ui docs Tokens`). The ones you will use most:
 
-| Token                               | Tailwind utilities                                        |
-| ----------------------------------- | --------------------------------------------------------- |
-| `background`, `foreground`          | `bg-background`, `text-foreground`                        |
-| `card`                              | `bg-card` (raised surfaces)                               |
-| `muted`, `muted-foreground`         | `bg-muted` (inputs, quiet panels), secondary text         |
-| `primary`, `primary-soft`           | `bg-primary`, `bg-primary-soft text-primary`              |
-| `success`, `warning`, `destructive` | `text-success`, `bg-success/12`, and so on                |
-| `category-1` … `category-6`         | `bg-category-2` (members, lists, calendars; never status) |
-| `border`                            | `border-border` (the default border color)                |
-| elevation                           | `shadow-card` (the one shadow)                            |
+| Token                               | Tailwind utilities                                           |
+| ----------------------------------- | ------------------------------------------------------------ |
+| `background`, `foreground`          | `bg-background`, `text-foreground`                           |
+| `card`                              | `bg-card` (raised surfaces)                                  |
+| `muted`, `muted-foreground`         | `bg-muted` (inputs, quiet panels), secondary text            |
+| `primary`, `primary-soft`           | `bg-primary`, `bg-primary-soft text-primary-soft-foreground` |
+| `success`, `warning`, `destructive` | `text-success`, `bg-success/12`, and so on                   |
+| `category-1` … `category-6`         | `bg-category-2` (members, lists, calendars; never status)    |
+| `border`                            | `border-border` (the default border color)                   |
+| elevation                           | `shadow-card` (the one shadow)                               |
 
 ## Rules that keep a themed app consistent
 

package/llms.txt

@@ -12,9 +12,9 @@
 ## Rules
 
 - Use harebear-ui components before writing new UI. Primitives keep shadcn/ui names and props.
-- Style with theme tokens only: bg-background, bg-card, bg-muted, text-muted-foreground, bg-primary, bg-primary-soft, text-success, text-warning, text-destructive, border-border, shadow-card, rounded-md/lg/xl. No hex colors or Tailwind palette colors.
+- Style with theme tokens only: bg-background, bg-card, bg-muted, text-muted-foreground, bg-primary, bg-primary-soft (text on it: text-primary-soft-foreground), text-success, text-warning, text-destructive, border-border, shadow-card, rounded-md/lg/xl. No hex colors or Tailwind palette colors.
 - Status is a tone: success | warning | danger | info | neutral. Members, lists and calendars use category-1..6 (bg-category-3, or `color={3}` on MemberAvatar, CategoryDot, ColorSwatchPicker), never status colors.
-- Agent-first apps (assistant on every page, undoable actions): AppNav + Page/PageHeader/PageSection + AssistantProvider/AssistantDock + SectionedList + toastUndo + FocusLayout/SettingsSection. A page's own AskBox answers inline with `reply` from useAssistant and stops with `pending` + `onStop={stop}`. Recipe: `npx harebear-ui docs "Agent-first apps"`.
+- Agent-first apps (assistant on every page, undoable actions): AppNav + Page/PageHeader/PageSection + AssistantProvider/AssistantDock + SectionedList + toastUndo + FocusLayout/SettingsSection. A page's own AskBox answers inline with `reply` from useAssistant and stops with `pending` + `onStop={stop}`. To queue follow-ups while it works, pass `queue` (AskBox, PromptInput, AssistantDock); a superseded send's `signal.reason` is "superseded", a Stop's is "stop"; after either, that send's later output is dropped, so the new send shows the rest. Recipe: `npx harebear-ui docs "Agent-first apps"`.
 - Icons: lucide-react elements, e.g. `<SearchIcon />`. Icon-only buttons need aria-label.
 - Touch: Button, Toggle and Input already meet 44px under `pointer: coarse` (buttons via an invisible ::after, which overflow-hidden ancestors clip: there, size the button itself with pointer-coarse:size-11).
 - Change the brand with `<ThemeProvider accent="#hex" radius={14}>` or `--brand` / `--radius` in CSS.

package/package.json

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

@@ -18,7 +18,7 @@ This project uses `harebear-ui` for all UI. Its theme, tokens, and components ar
 
 - Import from the package root: `import { Button, Card, DataTable } from "harebear-ui"`. Never copy component source into the app.
 - Primitives keep shadcn/ui names, parts, and props (Dialog, DropdownMenu, Select, Sidebar, Tabs...).
-- Style only with theme tokens: `bg-background`, `bg-card`, `bg-muted`, `text-foreground`, `text-muted-foreground`, `bg-primary`, `bg-primary-soft text-primary`, `text-success`, `text-warning`, `text-destructive`, `border-border`, `shadow-card`, `rounded-md` (controls), `rounded-xl` (cards). No hex colors, no Tailwind palette colors like `bg-blue-500`, no inline color styles.
+- Style only with theme tokens: `bg-background`, `bg-card`, `bg-muted`, `text-foreground`, `text-muted-foreground`, `bg-primary`, `bg-primary-soft text-primary-soft-foreground`, `text-success`, `text-warning`, `text-destructive`, `border-border`, `shadow-card`, `rounded-md` (controls), `rounded-xl` (cards). No hex colors, no Tailwind palette colors like `bg-blue-500`, no inline color styles.
 - Status uses a tone prop: `success | warning | danger | info | neutral` (StatusBadge, StatusDot, Timeline, StatusBars, LinkTile).
 - Icons are lucide-react elements passed as nodes: `icon={<UsersIcon />}`. Icon-only buttons need `aria-label`.
 - Touch: `Button`, `Toggle` and `Input` already meet 44px under `pointer: coarse` (buttons via an invisible `::after`, which `overflow-hidden` ancestors clip: there, size the button itself with `pointer-coarse:size-11`); don't override their size.
@@ -26,8 +26,8 @@ This project uses `harebear-ui` for all UI. Its theme, tokens, and components ar
 - 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. Every shell (`AppShell`, `ChatShell`) is built on `SidebarLayout`, which gives the collapsible icon rail; use it directly for other sidebar layouts instead of the raw Sidebar primitives.
 - DataTable columns: define with `createDataTableColumnHelper<Row>()` at module scope, pass `getRowId`.
 - 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`.
-- Agent-first and household apps: `AppNav` (sidebar on desktop, tab bar on phones; `fill` for a chat page, minus the round action button's space when `action` is set) around pages, each a `Page` with a `PageHeader` (`UserMenu compact className="md:hidden"` in its actions, hidden from md up) and `PageSection`s (h2; `Heading level={3}` inside cards); `AssistantProvider` + `AssistantDock` (pages call `useAssistantPage`); `AskBox` with `DictationButton` (inline answers: `AskBox` `reply={reply}` from `useAssistant()` plus your own `chatHref`, `send(text, { open: false })`; Stop: `pending` + `onStop={stop}`); `ActionReceipt` for each action the agent took; `toastUndo` after undoable changes; to-dos are `SectionedList` / `TaskRow` / `CheckCircle` (`lingerMs` = the Undo window); a week agenda is `DayStrip sticky` + one `SectionedList` with a section per day and `AgendaRow` rows via `renderItem`; settings are `FocusLayout` + `SettingsSection` + `SettingsRow`. Recipe: `npx harebear-ui docs "Agent-first apps"`. Categories (members, lists) use `category-1..6`. People are `MemberAvatar` (photo or initials on their `color`), `AvatarStack` and `VisibilityBadge`; list dots are `CategoryDot` (`locked` for private); profile settings use `AvatarUpload` and `ColorSwatchPicker`.
+- Chat content: `ChatMessage role="user" | "assistant"`; render model output inside `Prose`; composer is `PromptInput` (+ `PromptInputChip`, `PromptInputSelect`; `label` names its field, default the placeholder); 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`.
+- Agent-first and household apps: `AppNav` (sidebar on desktop, tab bar on phones; `fill` for a chat page, minus the round action button's space when `action` is set) around pages, each a `Page` with a `PageHeader` (`UserMenu compact className="md:hidden"` in its actions, hidden from md up) and `PageSection`s (h2; `Heading level={3}` inside cards); `AssistantProvider` + `AssistantDock` (pages call `useAssistantPage`); `AskBox` with `DictationButton` (inline answers: `AskBox` `reply={reply}` from `useAssistant()` plus your own `chatHref`, `send(text, { open: false })`; Stop: `pending` + `onStop={stop}`; follow-ups while it works: `queue` on `AskBox`/`PromptInput`/`AssistantDock`, and in `onSend` tell the server to stop only when `signal.reason === "stop"`, not `"superseded"`; a superseded send's later `append`/`update` calls and return value are dropped, so the new send shows the rest); `ActionReceipt` for each action the agent took; `toastUndo` after undoable changes; to-dos are `SectionedList` / `TaskRow` / `CheckCircle` (`lingerMs` = the Undo window); a week agenda is `DayStrip sticky` + one `SectionedList` with a section per day and `AgendaRow` rows via `renderItem`; settings are `FocusLayout` + `SettingsSection` + `SettingsRow`. Recipe: `npx harebear-ui docs "Agent-first apps"`. Categories (members, lists) use `category-1..6`. People are `MemberAvatar` (photo or initials on their `color`), `AvatarStack` and `VisibilityBadge`; list dots are `CategoryDot` (`locked` for private); profile settings use `AvatarUpload` and `ColorSwatchPicker`.
 - Notices: `Alert variant="warning" | "success" | "info" | "destructive"`. Confirmations: `ConfirmDialog`; one line of text (New, Rename): `PromptDialog`. Toasts: `toast` / `toast.success` / `toast.error` from harebear-ui. 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.
 - Sign-in and sign-up pages: `AuthLayout` + `LoginForm` / `SignupForm` (extra fields as `children`) / `NewPasswordForm`; other signed-out steps use `AuthForm`. Don't hand-build auth forms.