harebear-ui 0.11.0 → 0.12.0

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)

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"];
@@ -96,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, actions, 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, actions, 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);
@@ -251,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/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/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/sonner.js

@@ -25,7 +25,7 @@ const Toaster = ({ ...props }) => {
 		},
 		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/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;

package/docs/COMPONENTS.md

@@ -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`
@@ -740,15 +740,15 @@ Agent tool calls as a bordered, collapsible card. Titles, labels and details wra
 
 ### `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, 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?`.
+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
@@ -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/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.11.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.