harebear-ui 0.9.0 → 0.11.0

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

@@ -15,6 +15,8 @@ export interface SettingsRowProps extends Omit<React.ComponentProps<"div">, "con
   htmlFor?: string;
   /** The control at the right: Switch, Select, ToggleGroup, Button. */
   control?: React.ReactNode;
+  /** Always shown under the label, full width, with no toggle (a list of connections, a hint, a short form). */
+  body?: React.ReactNode;
   /**
    * Inline content that expands under the row (change password, add a connection). Without a `control`, the row
    * gets a toggle button (`expandLabel` / "Cancel").
@@ -26,6 +28,6 @@ export interface SettingsRowProps extends Omit<React.ComponentProps<"div">, "con
   /** Label of the default toggle button. Default "Change". */
   expandLabel?: React.ReactNode;
 }
-/** One setting: label and description at the left, a control at the right, optional expandable content. */
-declare function SettingsRow({ label, description, htmlFor, control, content, open: openProp, defaultOpen, onOpenChange, expandLabel, className, ...props }: SettingsRowProps): React.JSX.Element;
+/** One setting: label and description at the left, a control at the right, optional body and expandable content. */
+declare function SettingsRow({ label, description, htmlFor, control, body, content, open: openProp, defaultOpen, onOpenChange, expandLabel, className, ...props }: SettingsRowProps): React.JSX.Element;
 export { SettingsRow, SettingsSection };

package/dist/components/admin/settings.js

@@ -29,8 +29,8 @@ function SettingsSection({ title, description, className, children, ...props })
 		})]
 	});
 }
-/** One setting: label and description at the left, a control at the right, optional expandable content. */
-function SettingsRow({ label, description, htmlFor, control, content, open: openProp, defaultOpen = false, onOpenChange, expandLabel = "Change", className, ...props }) {
+/** One setting: label and description at the left, a control at the right, optional body and expandable content. */
+function SettingsRow({ label, description, htmlFor, control, body, content, open: openProp, defaultOpen = false, onOpenChange, expandLabel = "Change", className, ...props }) {
 	const [openState, setOpenState] = React.useState(defaultOpen);
 	const open = openProp ?? openState;
 	const setOpen = (next) => {
@@ -44,35 +44,42 @@ function SettingsRow({ label, description, htmlFor, control, content, open: open
 		"data-state": content ? open ? "open" : "closed" : void 0,
 		className: cn("py-3.5", className),
 		...props,
-		children: [/* @__PURE__ */ jsxs("div", {
-			className: "flex flex-wrap items-center gap-x-4 gap-y-2",
-			children: [/* @__PURE__ */ jsxs("div", {
-				className: "flex min-w-0 flex-1 basis-48 flex-col",
-				children: [/* @__PURE__ */ jsx(Label, {
-					htmlFor,
-					className: "text-sm font-medium",
-					children: label
-				}), description && /* @__PURE__ */ jsx("span", {
-					className: "text-[13px] text-muted-foreground",
-					children: description
-				})]
-			}), control ?? (content ? /* @__PURE__ */ jsx(Button, {
-				type: "button",
-				variant: "outline",
-				size: "sm",
-				"aria-expanded": open,
-				"aria-controls": contentId,
-				onClick: () => setOpen(!open),
-				children: open ? "Cancel" : expandLabel
-			}) : null)]
-		}), content && /* @__PURE__ */ jsx(Collapse, {
-			open,
-			id: contentId,
-			children: /* @__PURE__ */ jsx("div", {
-				className: "pt-3.5",
-				children: content
+		children: [
+			/* @__PURE__ */ jsxs("div", {
+				className: "flex flex-wrap items-center gap-x-4 gap-y-2",
+				children: [/* @__PURE__ */ jsxs("div", {
+					className: "flex min-w-0 flex-1 basis-48 flex-col",
+					children: [/* @__PURE__ */ jsx(Label, {
+						htmlFor,
+						className: "text-sm font-medium",
+						children: label
+					}), description && /* @__PURE__ */ jsx("span", {
+						className: "text-[13px] text-muted-foreground",
+						children: description
+					})]
+				}), control ?? (content ? /* @__PURE__ */ jsx(Button, {
+					type: "button",
+					variant: "outline",
+					size: "sm",
+					"aria-expanded": open,
+					"aria-controls": contentId,
+					onClick: () => setOpen(!open),
+					children: open ? "Cancel" : expandLabel
+				}) : null)]
+			}),
+			body && /* @__PURE__ */ jsx("div", {
+				className: "pt-3",
+				children: body
+			}),
+			content && /* @__PURE__ */ jsx(Collapse, {
+				open,
+				id: contentId,
+				children: /* @__PURE__ */ jsx("div", {
+					className: "pt-3.5",
+					children: content
+				})
 			})
-		})]
+		]
 	});
 }
 export { SettingsRow, SettingsSection };

package/dist/components/admin/time-zone-picker.d.ts

@@ -0,0 +1,12 @@
+import * as React from "react";
+export interface TimeZonePickerProps {
+  /** IANA name, e.g. "America/Vancouver". */
+  value: string;
+  onValueChange: (value: string) => void;
+  /** id of the search input, for a FieldLabel or SettingsRow `htmlFor`. */
+  id?: string;
+  className?: string;
+}
+/** Searchable IANA time zone list (Intl.supportedValuesOf("timeZone")), built on Combobox. */
+declare function TimeZonePicker({ value, onValueChange, id, className }: TimeZonePickerProps): React.JSX.Element;
+export { TimeZonePicker };

package/dist/components/admin/time-zone-picker.js

@@ -0,0 +1,31 @@
+"use client";
+import { Combobox, ComboboxContent, ComboboxEmpty, ComboboxInput, ComboboxItem, ComboboxList } from "../ui/combobox.js";
+import { cn } from "../../lib/utils.js";
+import * as React from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+// src/components/admin/time-zone-picker.tsx
+const label = (zone) => zone.replaceAll("_", " ");
+/** Searchable IANA time zone list (Intl.supportedValuesOf("timeZone")), built on Combobox. */
+function TimeZonePicker({ value, onValueChange, id, className }) {
+	const zones = React.useMemo(() => {
+		const all = Intl.supportedValuesOf("timeZone");
+		return value && !all.includes(value) ? [value, ...all] : all;
+	}, [value]);
+	return /* @__PURE__ */ jsxs(Combobox, {
+		items: zones,
+		value,
+		onValueChange: (next) => next && onValueChange(next),
+		itemToStringLabel: label,
+		children: [/* @__PURE__ */ jsx(ComboboxInput, {
+			id,
+			placeholder: "Search time zones",
+			showTrigger: false,
+			className: cn("w-full", className)
+		}), /* @__PURE__ */ jsxs(ComboboxContent, { children: [/* @__PURE__ */ jsx(ComboboxEmpty, { children: "No matching time zone." }), /* @__PURE__ */ jsx(ComboboxList, { children: (zone) => /* @__PURE__ */ jsx(ComboboxItem, {
+			value: zone,
+			className: "pointer-coarse:min-h-11",
+			children: label(zone)
+		}, zone) })] })]
+	});
+}
+export { TimeZonePicker };

package/dist/components/admin/user-menu.d.ts

@@ -15,11 +15,13 @@ export interface UserMenuProps {
   onSignOut?: () => void;
   /** Default "Sign out". */
   signOutLabel?: React.ReactNode;
+  /** Trigger is just the avatar (44px on touch screens) and the menu opens below it, e.g. in a phone page header. */
+  compact?: boolean;
   className?: string;
 }
 /**
  * The signed-in user as a menu button, for a sidebar footer or top bar: theme choice, app items such as
  * Settings, and sign out. In a sidebar icon rail the trigger is just the avatar and the menu opens to the side.
  */
-declare function UserMenu({ name, subtitle, avatarUrl, color, children, themeSwitch, onSignOut, signOutLabel, className }: UserMenuProps): React.JSX.Element;
+declare function UserMenu({ name, subtitle, avatarUrl, color, children, themeSwitch, onSignOut, signOutLabel, compact, className }: UserMenuProps): React.JSX.Element;
 export { UserMenu };

package/dist/components/admin/user-menu.js

@@ -1,6 +1,8 @@
 "use client";
-import { UserChip } from "./user-chip.js";
+import { categoryBg } from "./category.js";
+import { UserChip, initials } from "./user-chip.js";
 import { useTheme } from "../theme/theme-provider.js";
+import { Avatar, AvatarFallback, AvatarImage } from "../ui/avatar.js";
 import { DropdownMenu, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuTrigger } from "../ui/dropdown-menu.js";
 import { useSidebarOptional } from "../ui/sidebar.js";
 import { cn } from "../../lib/utils.js";
@@ -28,26 +30,35 @@ const themes = [
 * The signed-in user as a menu button, for a sidebar footer or top bar: theme choice, app items such as
 * Settings, and sign out. In a sidebar icon rail the trigger is just the avatar and the menu opens to the side.
 */
-function UserMenu({ name, subtitle, avatarUrl, color, children, themeSwitch = true, onSignOut, signOutLabel = "Sign out", className }) {
+function UserMenu({ name, subtitle, avatarUrl, color, children, themeSwitch = true, onSignOut, signOutLabel = "Sign out", compact = false, className }) {
 	const { mode, setMode } = useTheme();
 	const sidebar = useSidebarOptional();
 	const rail = sidebar?.state === "collapsed" && !sidebar.isMobile;
-	return /* @__PURE__ */ jsxs(DropdownMenu, { children: [/* @__PURE__ */ jsxs(DropdownMenuTrigger, {
+	return /* @__PURE__ */ jsxs(DropdownMenu, { children: [/* @__PURE__ */ jsx(DropdownMenuTrigger, {
 		"data-slot": "user-menu-trigger",
-		"aria-label": `Account menu for ${name}`,
-		className: cn("flex w-full min-w-0 items-center gap-2 rounded-lg px-2 py-1.5 text-left transition-colors outline-none hover:bg-muted focus-visible:ring-2 focus-visible:ring-ring/40 data-[state=open]:bg-muted group-data-[collapsible=icon]:mx-auto group-data-[collapsible=icon]:size-10 group-data-[collapsible=icon]:justify-center group-data-[collapsible=icon]:rounded-full group-data-[collapsible=icon]:p-0", className),
-		children: [/* @__PURE__ */ jsx(UserChip, {
+		"aria-label": compact ? `Account menu for ${name}` : rail ? name : void 0,
+		className: cn(compact ? "grid size-10 shrink-0 place-items-center rounded-full outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background pointer-coarse:size-11" : "flex w-full min-w-0 items-center gap-2 rounded-lg px-2 py-1.5 text-left transition-colors outline-none hover:bg-muted focus-visible:ring-2 focus-visible:ring-ring data-[state=open]:bg-muted group-data-[collapsible=icon]:mx-auto group-data-[collapsible=icon]:size-10 group-data-[collapsible=icon]:justify-center group-data-[collapsible=icon]:rounded-full group-data-[collapsible=icon]:p-0", className),
+		children: compact || rail ? /* @__PURE__ */ jsxs(Avatar, {
+			"aria-hidden": "true",
+			children: [avatarUrl && /* @__PURE__ */ jsx(AvatarImage, {
+				src: avatarUrl,
+				alt: ""
+			}), /* @__PURE__ */ jsx(AvatarFallback, {
+				"data-initials": initials(name),
+				className: cn("after:content-[attr(data-initials)]", color && [categoryBg[color], "text-category-foreground"])
+			})]
+		}) : /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(UserChip, {
 			name,
 			subtitle,
 			avatarUrl,
 			color,
 			className: "flex-1"
-		}), /* @__PURE__ */ jsx(ChevronsUpDownIcon, { className: "size-4 shrink-0 text-muted-foreground group-data-[collapsible=icon]:hidden" })]
+		}), /* @__PURE__ */ jsx(ChevronsUpDownIcon, { className: "size-4 shrink-0 text-muted-foreground group-data-[collapsible=icon]:hidden" })] })
 	}), /* @__PURE__ */ jsxs(DropdownMenuContent, {
 		"data-slot": "user-menu",
-		side: rail ? "right" : "top",
-		align: rail ? "end" : "start",
-		className: "w-(--radix-dropdown-menu-trigger-width) min-w-60",
+		side: compact ? "bottom" : rail ? "right" : "top",
+		align: compact || rail ? "end" : "start",
+		className: compact ? "min-w-60" : "w-(--radix-dropdown-menu-trigger-width) min-w-60",
 		children: [
 			/* @__PURE__ */ jsxs(DropdownMenuLabel, {
 				className: "flex min-w-0 flex-col font-normal",

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

@@ -2,7 +2,7 @@ import * as React from "react";
 export interface ActionReceiptProps extends Omit<React.ComponentProps<"div">, "title"> {
   /** What was done, past tense: "Added milk to Groceries". */
   title: React.ReactNode;
-  /** One line, e.g. "Groceries · just now". */
+  /** Short line under the title, e.g. "Groceries · just now". Wraps when long. */
   meta?: React.ReactNode;
   /** Shows an Undo button. */
   onUndo?: () => void;

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

@@ -26,7 +26,7 @@ function ActionReceipt({ title, meta, onUndo, undoLabel = "Undo", undone, classN
 					className: cn("text-sm font-medium wrap-anywhere", undone && "text-muted-foreground line-through"),
 					children: title
 				}), meta && /* @__PURE__ */ jsx("span", {
-					className: "truncate text-xs text-muted-foreground",
+					className: "text-xs text-muted-foreground wrap-anywhere",
 					children: meta
 				})]
 			}),

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

@@ -27,6 +27,6 @@ export interface ApprovalResultProps extends React.ComponentProps<"div"> {
   /** Trailing time, e.g. "10:42". */
   time?: React.ReactNode;
 }
-/** One-line record of a decision in the thread, e.g. "You approved `docker restart x`, once". */
+/** Short record of a decision in the thread, e.g. "You approved `docker restart x`, once". */
 declare function ApprovalResult({ decision, time, className, children, ...props }: ApprovalResultProps): React.JSX.Element;
 export { ApprovalCard, ApprovalResult };

package/dist/components/ai/approval.js

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

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

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

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

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

package/dist/components/ai/assistant.js

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

package/dist/components/ai/chat.js

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

package/dist/components/ai/code-block.js

@@ -30,9 +30,9 @@ function CodeSnippet({ code, language, highlight = true, lineNumbers, hideCopy,
 				type: "button",
 				variant: "ghost",
 				size: "sm",
-				className: "ms-auto",
+				className: "ms-auto pointer-coarse:h-11",
 				onClick: () => copy(code),
-				"aria-label": "Copy code",
+				"aria-label": copied ? void 0 : "Copy code",
 				children: [copied ? /* @__PURE__ */ jsx(CheckIcon, {}) : /* @__PURE__ */ jsx(CopyIcon, {}), copied ? "Copied" : "Copy"]
 			})]
 		}), /* @__PURE__ */ jsx(CodeBlockContent, {
@@ -106,7 +106,7 @@ function withTips(children) {
 function Prose({ className, children, ...props }) {
 	return /* @__PURE__ */ jsx("div", {
 		"data-slot": "prose",
-		className: cn("flex min-w-0 flex-col gap-3.5 text-[15px] leading-[1.65] wrap-anywhere text-foreground", "[&_ol]:flex [&_ol]:list-decimal [&_ol]:flex-col [&_ol]:gap-2 [&_ol]:pl-5.5", "[&_ul]:flex [&_ul]:list-disc [&_ul]:flex-col [&_ul]:gap-2 [&_ul]:pl-5.5", "[&_strong]:font-semibold [&_a]:text-primary [&_a]:underline-offset-4 hover:[&_a]:underline", "[&_h1]:text-xl [&_h1]:font-semibold [&_h2]:text-lg [&_h2]:font-semibold [&_h3]:font-semibold [&_h4]:font-semibold", "[&_blockquote]:border-l-2 [&_blockquote]:pl-4 [&_blockquote]:text-muted-foreground", "[&_:not(pre)>code]:rounded-[6px] [&_:not(pre)>code]:bg-muted [&_:not(pre)>code]:px-1.5 [&_:not(pre)>code]:py-0.5 [&_:not(pre)>code]:font-mono [&_:not(pre)>code]:text-[12.5px]", "[&_pre]:overflow-x-auto [&_pre]:rounded-lg [&_pre]:bg-muted [&_pre]:p-4.5 [&_pre]:font-mono [&_pre]:text-[13px]", "[&_table]:w-full [&_table]:text-sm [&_td]:border-b [&_td]:py-2 [&_th]:border-b [&_th]:py-2 [&_th]:text-left [&_th]:font-medium", className),
+		className: cn("flex min-w-0 flex-col gap-3.5 text-[15px] leading-[1.65] wrap-anywhere text-foreground", "[&_ol]:flex [&_ol]:list-decimal [&_ol]:flex-col [&_ol]:gap-2 [&_ol]:pl-5.5", "[&_ul]:flex [&_ul]:list-disc [&_ul]:flex-col [&_ul]:gap-2 [&_ul]:pl-5.5", "[&_strong]:font-semibold [&_a]:text-primary [&_a]:underline [&_a]:decoration-primary/40 [&_a]:underline-offset-4 hover:[&_a]:decoration-primary [&_a]:rounded-sm [&_a:focus-visible]:outline-2 [&_a:focus-visible]:outline-offset-2 [&_a:focus-visible]:outline-ring", "[&_h1]:text-xl [&_h1]:font-semibold [&_h2]:text-lg [&_h2]:font-semibold [&_h3]:font-semibold [&_h4]:font-semibold", "[&_blockquote]:border-l-2 [&_blockquote]:pl-4 [&_blockquote]:text-muted-foreground", "[&_:not(pre)>code]:rounded-[6px] [&_:not(pre)>code]:bg-muted [&_:not(pre)>code]:px-1.5 [&_:not(pre)>code]:py-0.5 [&_:not(pre)>code]:font-mono [&_:not(pre)>code]:text-[12.5px]", "[&_pre]:overflow-x-auto [&_pre]:rounded-lg [&_pre]:bg-muted [&_pre]:p-4.5 [&_pre]:font-mono [&_pre]:text-[13px]", "[&_table]:w-full [&_table]:text-sm [&_td]:border-b [&_td]:py-2 [&_th]:border-b [&_th]:py-2 [&_th]:text-left [&_th]:font-medium", className),
 		...props,
 		children: withTips(children)
 	});

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

@@ -0,0 +1,13 @@
+import * as React from "react";
+export interface MarkdownProps extends Omit<React.ComponentProps<"div">, "children"> {
+  /** The Markdown source. GitHub flavoured (tables, task lists, strikethrough, autolinks). Raw HTML is dropped. */
+  children: string;
+  /** Component for in-app links (href without a scheme, e.g. "/lists/2"), e.g. Next.js or React Router Link. Gets `href`. */
+  linkComponent?: React.ElementType;
+}
+/**
+ * Renders Markdown safely inside Prose: no raw HTML, unsafe URLs (javascript:) removed, `> Tip:` blockquotes as
+ * a Callout. Other props go to the Prose wrapper.
+ */
+declare function Markdown({ children, linkComponent: Link, ...props }: MarkdownProps): React.JSX.Element;
+export { Markdown };

package/dist/components/ai/markdown.js

@@ -0,0 +1,41 @@
+"use client";
+import { Prose, ProseBlockquote } from "./code-block.js";
+import * as React from "react";
+import { jsx } from "react/jsx-runtime";
+import ReactMarkdown from "react-markdown";
+import remarkGfm from "remark-gfm";
+// src/components/ai/markdown.tsx
+const plugins = [remarkGfm];
+const SCHEME = /^([a-z][a-z\d+.-]*:|\/\/)/i;
+/**
+* Renders Markdown safely inside Prose: no raw HTML, unsafe URLs (javascript:) removed, `> Tip:` blockquotes as
+* a Callout. Other props go to the Prose wrapper.
+*/
+function Markdown({ children, linkComponent: Link, ...props }) {
+	const components = React.useMemo(() => ({
+		blockquote: ProseBlockquote,
+		a: ({ node: _node, href = "", ...rest }) => Link && !SCHEME.test(href) ? /* @__PURE__ */ jsx(Link, {
+			href,
+			...rest
+		}) : /* @__PURE__ */ jsx("a", {
+			href,
+			...rest
+		}),
+		input: ({ node: _node, checked, ...rest }) => /* @__PURE__ */ jsx("input", {
+			...rest,
+			checked,
+			"aria-label": checked ? "Done" : "Not done"
+		})
+	}), [Link]);
+	return /* @__PURE__ */ jsx(Prose, {
+		"data-slot": "markdown",
+		...props,
+		children: /* @__PURE__ */ jsx(ReactMarkdown, {
+			remarkPlugins: plugins,
+			components,
+			skipHtml: true,
+			children
+		})
+	});
+}
+export { Markdown };

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

@@ -33,6 +33,23 @@ declare function GitHubIcon(props: React.ComponentProps<"svg">): React.JSX.Eleme
 declare function GoogleIcon(props: React.ComponentProps<"svg">): React.JSX.Element;
 /** Apple mark, for AuthProvider icons. */
 declare function AppleIcon(props: React.ComponentProps<"svg">): React.JSX.Element;
+export interface AuthFormProps extends Omit<React.ComponentProps<"form">, "onSubmit" | "title"> {
+  title: React.ReactNode;
+  description?: React.ReactNode;
+  /** The fields. Give each a `name`; they arrive in onSubmit's FormData. */
+  children?: React.ReactNode;
+  /** Form-level error, e.g. "Invalid email or password". */
+  error?: React.ReactNode;
+  submitLabel: React.ReactNode;
+  /** Shows a spinner on the submit button and disables every control. */
+  loading?: boolean;
+  /** Called with the form's data once the browser's validation passes. Omit to submit natively (e.g. to an `action`). */
+  onSubmit?: (data: FormData) => void | Promise<void>;
+  /** Under the submit button: provider buttons, a "Sign in" link. */
+  footer?: React.ReactNode;
+}
+/** The shell LoginForm, SignupForm and NewPasswordForm share: heading, your fields, error, submit button. */
+declare function AuthForm({ title, description, children, error, submitLabel, loading, onSubmit, footer, className, ...props }: AuthFormProps): React.JSX.Element;
 interface AuthFormBase extends Omit<React.ComponentProps<"form">, "onSubmit" | "title"> {
   title?: React.ReactNode;
   description?: React.ReactNode;
@@ -51,7 +68,7 @@ export interface LoginValues {
   /** Absent in "email-only" mode. */
   password?: string;
 }
-export interface LoginFormProps extends AuthFormBase {
+export interface LoginFormProps extends Omit<AuthFormBase, "children"> {
   /** Called with the entered values. Omit to let the form submit natively (e.g. to an `action`). */
   onSubmit?: (values: LoginValues) => void | Promise<void>;
   /** "email-only" drops the password field for magic-link or OTP flows (shadcn login-05). */
@@ -61,14 +78,17 @@ export interface LoginFormProps extends AuthFormBase {
   submitLabel?: React.ReactNode;
 }
 /** Email + password sign-in form with optional SSO buttons. Pair with AuthLayout. */
-declare function LoginForm({ title, description, onSubmit, mode, providers, onProviderClick, providersFirst, forgotPasswordHref, signupHref, submitLabel, loading, error, className, ...props }: LoginFormProps): React.JSX.Element;
+declare function LoginForm({ title, description, onSubmit, mode, providers, onProviderClick, providersFirst, forgotPasswordHref, signupHref, submitLabel, ...props }: LoginFormProps): React.JSX.Element;
 export interface SignupValues {
   name?: string;
   email: string;
   password: string;
 }
 export interface SignupFormProps extends AuthFormBase {
-  onSubmit?: (values: SignupValues) => void | Promise<void>;
+  /** `data` holds every field, including your own `children` fields. */
+  onSubmit?: (values: SignupValues, data: FormData) => void | Promise<void>;
+  /** Extra fields shown before the name field (e.g. a household name). Give each a `name`; read it from `data`. */
+  children?: React.ReactNode;
   /** Ask for a full name. Default true. */
   nameField?: boolean;
   /** Ask for the password twice; mismatches are reported before onSubmit. Default true. */
@@ -81,5 +101,21 @@ export interface SignupFormProps extends AuthFormBase {
   submitLabel?: React.ReactNode;
 }
 /** Account creation form: name, email, password (+ confirm), optional SSO. Pair with AuthLayout. */
-declare function SignupForm({ title, description, onSubmit, nameField, confirmPassword, passwordHint, minPasswordLength, providers, onProviderClick, providersFirst, loginHref, submitLabel, loading, error, className, ...props }: SignupFormProps): React.JSX.Element;
-export { AppleIcon, AuthLayout, GitHubIcon, GoogleIcon, LoginForm, SignupForm };
+declare function SignupForm({ title, description, onSubmit, children, nameField, confirmPassword, passwordHint, minPasswordLength, providers, onProviderClick, providersFirst, loginHref, submitLabel, ...props }: SignupFormProps): React.JSX.Element;
+export interface NewPasswordFormProps extends Omit<React.ComponentProps<"form">, "onSubmit" | "title" | "children">, Pick<AuthFormProps, "description" | "error" | "loading"> {
+  /** Default "Choose a new password". */
+  title?: React.ReactNode;
+  /** Called once both fields match. */
+  onSubmit?: (values: {
+    password: string;
+  }) => void | Promise<void>;
+  /** Minimum length enforced by the browser. Default 8. */
+  minPasswordLength?: number;
+  /** Hint under the password field. Default "At least N characters." */
+  passwordHint?: React.ReactNode;
+  /** Default "Save password". */
+  submitLabel?: React.ReactNode;
+}
+/** Password reset or first password: new password + confirm. Pair with AuthLayout. */
+declare function NewPasswordForm({ title, onSubmit, minPasswordLength, passwordHint, submitLabel, ...props }: NewPasswordFormProps): React.JSX.Element;
+export { AppleIcon, AuthForm, AuthLayout, GitHubIcon, GoogleIcon, LoginForm, NewPasswordForm, SignupForm };