@mcp-b/react-components 0.16.1 → 0.18.0

package/dist/components/ThinkThreadPicker.js

@@ -1,8 +1,11 @@
-import { t as cx } from "../class-names-9UtZwb0J.js";
-import { B as SpinnerIcon, F as PlusIcon, p as DotIcon, q as WarningIcon } from "../icons-CpfUer49.js";
-import { Button } from "./Button.js";
+import { t as cx } from "../class-names-BiMDVpUo.js";
+import { B as PlusIcon, G as SpinnerIcon, Z as WarningIcon, g as DotIcon, t as ArchiveIcon } from "../icons-CQJ-aMnI.js";
+import { t as NavigationLink } from "../navigation-link-Cob7KBlM.js";
+import { Button, buttonVariants } from "./Button.js";
+import { SearchField } from "./SearchField.js";
+import { AlertDialog } from "./AlertDialog.js";
 import { ScrollArea } from "./ScrollArea.js";
-import "react";
+import * as React from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/components/ThinkThreadPicker.tsx
 function toThreadDate(value) {
@@ -49,6 +52,9 @@ function formatThreadStatus(thread) {
 function isThreadBusy(status) {
 	return status === "pending" || status === "running" || status === "starting" || status === "streaming" || status === "submitted" || status === "recovering";
 }
+function errorMessage(error) {
+	return error instanceof Error ? error.message : String(error);
+}
 function summarizeThinkThreads(threads) {
 	return threads.reduce((summary, thread) => {
 		if (isThreadBusy(thread.status)) summary.running += 1;
@@ -98,12 +104,55 @@ function ThinkThreadStatusIndicators({ summary, className }) {
 * Thread roster UI for sub-agent chat apps.
 *
 * This component does not call Think or Cloudflare RPC methods directly. Feed
-* it from the parent agent's roster method, then route `onSelect` into the
-* child `useAgent({ sub: [...] })` name. Keep backend contract notes beside the
-* parent Think agent because `listThreads()`/`createThread()` are app-owned.
+* it from the parent agent's roster method, then render app-owned route links
+* that select the child `useAgent({ sub: [...] })` name. Keep backend contract
+* notes beside the parent Think agent because
+* `listThreads()`/`createThread()`/`deleteThread()` are app-owned.
 */
-function ThinkThreadPicker({ threads, selectedId, onSelect, onCreate, className, title = "Recents", "aria-label": ariaLabel = "Threads", ref, ...props }) {
+function ThinkThreadPicker({ threads, renderThreadLink, onCreate, onDelete, className, title = "Recents", "aria-label": ariaLabel = "Threads", ref, ...props }) {
 	const statusSummary = summarizeThinkThreads(threads);
+	const [query, setQuery] = React.useState("");
+	const [deleteOpen, setDeleteOpen] = React.useState(false);
+	const [deleteCandidate, setDeleteCandidate] = React.useState();
+	const [deleteBusy, setDeleteBusy] = React.useState(false);
+	const [deleteError, setDeleteError] = React.useState();
+	const deleteSucceededRef = React.useRef(false);
+	const deleteFallbackIdRef = React.useRef(void 0);
+	const threadLinkRefs = React.useRef(/* @__PURE__ */ new Map());
+	const deleteButtonRefs = React.useRef(/* @__PURE__ */ new Map());
+	const createButtonRef = React.useRef(null);
+	const navRef = React.useRef(null);
+	const normalizedQuery = query.trim().toLocaleLowerCase();
+	const visibleThreads = normalizedQuery ? threads.filter((thread) => thread.title.toLocaleLowerCase().includes(normalizedQuery)) : threads;
+	const requestDelete = (thread) => {
+		const index = threads.findIndex((candidate) => candidate.id === thread.id);
+		deleteFallbackIdRef.current = threads[index + 1]?.id ?? threads[index - 1]?.id ?? void 0;
+		deleteSucceededRef.current = false;
+		setDeleteCandidate(thread);
+		setDeleteError(void 0);
+		setDeleteOpen(true);
+	};
+	const performDelete = async () => {
+		if (!deleteCandidate || !onDelete) return;
+		setDeleteBusy(true);
+		setDeleteError(void 0);
+		try {
+			await onDelete(deleteCandidate);
+			deleteSucceededRef.current = true;
+			setDeleteOpen(false);
+		} catch (error) {
+			setDeleteError(errorMessage(error));
+		} finally {
+			setDeleteBusy(false);
+		}
+	};
+	const resolveDeleteFinalFocus = () => {
+		if (deleteSucceededRef.current) {
+			const fallbackId = deleteFallbackIdRef.current;
+			return (fallbackId ? threadLinkRefs.current.get(fallbackId) : void 0) ?? createButtonRef.current ?? navRef.current;
+		}
+		return (deleteCandidate ? deleteButtonRefs.current.get(deleteCandidate.id) : void 0) ?? createButtonRef.current ?? navRef.current;
+	};
 	return /* @__PURE__ */ jsxs("aside", {
 		ref,
 		className: cx("think-thread-picker", className),
@@ -116,53 +165,90 @@ function ThinkThreadPicker({ threads, selectedId, onSelect, onCreate, className,
 					children: title
 				}), /* @__PURE__ */ jsx(ThinkThreadStatusIndicators, { summary: statusSummary })]
 			}),
+			/* @__PURE__ */ jsxs(SearchField.Root, {
+				className: "think-thread-picker__search",
+				name: "thread-search",
+				children: [/* @__PURE__ */ jsx(SearchField.Label, {
+					className: "sigvelo-visually-hidden",
+					children: "Search threads"
+				}), /* @__PURE__ */ jsx(SearchField.Control, {
+					value: query,
+					placeholder: "Search recent threads",
+					autoComplete: "off",
+					onChange: (event) => setQuery(event.currentTarget.value)
+				})]
+			}),
 			/* @__PURE__ */ jsx("nav", {
+				ref: navRef,
 				className: "think-thread-picker__nav",
 				"aria-label": ariaLabel,
+				tabIndex: -1,
 				children: /* @__PURE__ */ jsxs(ScrollArea.Root, {
 					className: "think-thread-picker__scroll",
 					children: [/* @__PURE__ */ jsx(ScrollArea.Viewport, {
 						className: "think-thread-picker__viewport",
 						"aria-label": "Thread list",
-						children: threads.length ? /* @__PURE__ */ jsx("ul", {
+						children: visibleThreads.length ? /* @__PURE__ */ jsx("ul", {
 							className: "think-thread-picker__list",
-							children: threads.map((thread) => {
+							children: visibleThreads.map((thread) => {
 								const timestamp = formatThreadTimestamp(thread);
 								const statusLabel = formatThreadStatus(thread);
 								const busy = isThreadBusy(thread.status);
-								return /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsxs(Button, {
-									type: "button",
-									variant: "ghost",
-									color: "neutral",
-									size: "sm",
-									className: "think-thread-picker__thread",
-									"data-selected": thread.id === selectedId ? "true" : "false",
-									"data-status": thread.status,
-									"aria-current": thread.id === selectedId ? "page" : void 0,
-									onClick: () => onSelect(thread.id),
-									children: [/* @__PURE__ */ jsx("span", {
-										className: "think-thread-picker__thread-title",
-										children: thread.title
-									}), statusLabel ? /* @__PURE__ */ jsx("span", {
-										className: "think-thread-picker__thread-status",
-										role: "img",
-										"aria-label": statusLabel,
-										title: statusLabel,
-										children: busy ? /* @__PURE__ */ jsx(SpinnerIcon, {}) : /* @__PURE__ */ jsx(DotIcon, {})
-									}) : timestamp?.date ? /* @__PURE__ */ jsx("time", {
-										className: "think-thread-picker__thread-time",
-										dateTime: timestamp.date.toISOString(),
-										title: timestamp.date.toLocaleString(),
-										children: timestamp.label
-									}) : timestamp ? /* @__PURE__ */ jsx("span", {
-										className: "think-thread-picker__thread-time",
-										children: timestamp.label
+								return /* @__PURE__ */ jsxs("li", {
+									className: "think-thread-picker__item",
+									children: [/* @__PURE__ */ jsxs(NavigationLink, {
+										render: renderThreadLink(thread),
+										ref: (node) => {
+											if (node) threadLinkRefs.current.set(thread.id, node);
+											else threadLinkRefs.current.delete(thread.id);
+										},
+										className: buttonVariants({
+											variant: "ghost",
+											color: "neutral",
+											size: "sm",
+											className: "think-thread-picker__thread"
+										}),
+										"data-thread-status": thread.status,
+										children: [/* @__PURE__ */ jsx("span", {
+											className: "think-thread-picker__thread-title",
+											children: thread.title
+										}), statusLabel ? /* @__PURE__ */ jsx("span", {
+											className: "think-thread-picker__thread-status",
+											role: "img",
+											"aria-label": statusLabel,
+											title: statusLabel,
+											children: busy ? /* @__PURE__ */ jsx(SpinnerIcon, {}) : /* @__PURE__ */ jsx(DotIcon, {})
+										}) : timestamp?.date ? /* @__PURE__ */ jsx("time", {
+											className: "think-thread-picker__thread-time",
+											dateTime: timestamp.date.toISOString(),
+											title: timestamp.date.toLocaleString(),
+											children: timestamp.label
+										}) : timestamp ? /* @__PURE__ */ jsx("span", {
+											className: "think-thread-picker__thread-time",
+											children: timestamp.label
+										}) : null]
+									}), onDelete ? /* @__PURE__ */ jsx(Button, {
+										ref: (node) => {
+											if (node) deleteButtonRefs.current.set(thread.id, node);
+											else deleteButtonRefs.current.delete(thread.id);
+										},
+										type: "button",
+										variant: "ghost",
+										color: "neutral",
+										size: "sm",
+										iconOnly: true,
+										className: "think-thread-picker__delete",
+										"aria-label": `Delete thread ${thread.title}`,
+										"aria-haspopup": "dialog",
+										disabled: deleteBusy,
+										onClick: () => requestDelete(thread),
+										children: /* @__PURE__ */ jsx(ArchiveIcon, {})
 									}) : null]
-								}) }, thread.id);
+								}, thread.id);
 							})
 						}) : /* @__PURE__ */ jsx("p", {
 							className: "think-thread-picker__empty",
-							children: "No threads yet."
+							children: threads.length ? "No matching threads." : "No threads yet."
 						})
 					}), /* @__PURE__ */ jsx(ScrollArea.Scrollbar, {
 						orientation: "vertical",
@@ -173,6 +259,7 @@ function ThinkThreadPicker({ threads, selectedId, onSelect, onCreate, className,
 			onCreate ? /* @__PURE__ */ jsx("div", {
 				className: "think-thread-picker__footer",
 				children: /* @__PURE__ */ jsxs(Button, {
+					ref: createButtonRef,
 					type: "button",
 					variant: "normal",
 					color: "neutral",
@@ -181,6 +268,43 @@ function ThinkThreadPicker({ threads, selectedId, onSelect, onCreate, className,
 					onClick: () => void onCreate(),
 					children: [/* @__PURE__ */ jsx(PlusIcon, {}), /* @__PURE__ */ jsx("span", { children: "New thread" })]
 				})
+			}) : null,
+			onDelete && deleteCandidate ? /* @__PURE__ */ jsx(AlertDialog.Root, {
+				open: deleteOpen,
+				onOpenChange: (open, eventDetails) => {
+					if (deleteBusy) {
+						eventDetails.cancel();
+						return;
+					}
+					setDeleteOpen(open);
+					if (!open) setDeleteError(void 0);
+				},
+				children: /* @__PURE__ */ jsxs(AlertDialog.Portal, { children: [/* @__PURE__ */ jsx(AlertDialog.Backdrop, {}), /* @__PURE__ */ jsx(AlertDialog.Viewport, { children: /* @__PURE__ */ jsxs(AlertDialog.Popup, {
+					finalFocus: resolveDeleteFinalFocus,
+					children: [
+						/* @__PURE__ */ jsxs(AlertDialog.Title, { children: [
+							"Delete ",
+							deleteCandidate.title,
+							"?"
+						] }),
+						/* @__PURE__ */ jsx(AlertDialog.Description, { children: "This permanently deletes the conversation, its schedules, and its execution history. Any active work stops. This action cannot be undone." }),
+						deleteError ? /* @__PURE__ */ jsxs("p", {
+							className: "think-thread-picker__delete-error",
+							role: "alert",
+							children: [/* @__PURE__ */ jsx(WarningIcon, {}), /* @__PURE__ */ jsx("span", { children: deleteError })]
+						}) : null,
+						/* @__PURE__ */ jsxs(AlertDialog.Footer, { children: [/* @__PURE__ */ jsx(AlertDialog.Close, {
+							disabled: deleteBusy,
+							children: "Cancel"
+						}), /* @__PURE__ */ jsxs(Button, {
+							type: "button",
+							color: "destructive",
+							disabled: deleteBusy,
+							onClick: () => void performDelete(),
+							children: [deleteBusy ? /* @__PURE__ */ jsx(SpinnerIcon, {}) : null, deleteBusy ? "Deleting…" : "Delete thread"]
+						})] })
+					]
+				}) })] })
 			}) : null
 		]
 	});

package/dist/components/ThinkThreadShell.d.ts

@@ -1,4 +1,4 @@
-import { t as ResponsiveSidebarShell } from "../ResponsiveSidebarShell-Dd9DCcBT.js";
+import { t as ResponsiveSidebarShell } from "../ResponsiveSidebarShell-CsAh4NyL.js";
 import * as React from "react";
 
 //#region src/components/ThinkThreadShell.d.ts

package/dist/components/Toast.d.ts

@@ -9,52 +9,31 @@ interface ToastProviderProps extends React.ComponentPropsWithoutRef<typeof Toast
 /**
  * Props for the Toast.Viewport component.
  */
-interface ToastViewportProps extends Omit<React.ComponentPropsWithoutRef<typeof Toast$1.Viewport>, "className"> {
-  /** Additional CSS class names */
-  className?: string;
-}
+interface ToastViewportProps extends React.ComponentPropsWithoutRef<typeof Toast$1.Viewport> {}
 /**
  * Props for the Toast.Root component.
  */
-interface ToastRootProps extends Omit<React.ComponentPropsWithoutRef<typeof Toast$1.Root>, "className"> {
-  /** Additional CSS class names */
-  className?: string;
-}
+interface ToastRootProps extends React.ComponentPropsWithoutRef<typeof Toast$1.Root> {}
 /**
  * Props for the Toast.Content component.
  */
-interface ToastContentProps extends Omit<React.ComponentPropsWithoutRef<typeof Toast$1.Content>, "className"> {
-  /** Additional CSS class names */
-  className?: string;
-}
+interface ToastContentProps extends React.ComponentPropsWithoutRef<typeof Toast$1.Content> {}
 /**
  * Props for the Toast.Title component.
  */
-interface ToastTitleProps extends Omit<React.ComponentPropsWithoutRef<typeof Toast$1.Title>, "className"> {
-  /** Additional CSS class names */
-  className?: string;
-}
+interface ToastTitleProps extends React.ComponentPropsWithoutRef<typeof Toast$1.Title> {}
 /**
  * Props for the Toast.Description component.
  */
-interface ToastDescriptionProps extends Omit<React.ComponentPropsWithoutRef<typeof Toast$1.Description>, "className"> {
-  /** Additional CSS class names */
-  className?: string;
-}
+interface ToastDescriptionProps extends React.ComponentPropsWithoutRef<typeof Toast$1.Description> {}
 /**
  * Props for the Toast.Action component.
  */
-interface ToastActionProps extends Omit<React.ComponentPropsWithoutRef<typeof Toast$1.Action>, "className"> {
-  /** Additional CSS class names */
-  className?: string;
-}
+interface ToastActionProps extends React.ComponentPropsWithoutRef<typeof Toast$1.Action> {}
 /**
  * Props for the Toast.Close component.
  */
-interface ToastCloseProps extends Omit<React.ComponentPropsWithoutRef<typeof Toast$1.Close>, "className"> {
-  /** Additional CSS class names */
-  className?: string;
-}
+interface ToastCloseProps extends React.ComponentPropsWithoutRef<typeof Toast$1.Close> {}
 /**
  * Container for displaying toasts.
  */

package/dist/components/Toast.js

@@ -1,3 +1,4 @@
+import { n as mergeBaseClassName } from "../class-names-BiMDVpUo.js";
 import "react";
 import { jsx } from "react/jsx-runtime";
 import { Toast as Toast$1 } from "@base-ui/react/toast";
@@ -21,8 +22,8 @@ const ToastProvider = (props) => {
 /**
 * Container for displaying toasts.
 */
-function ToastViewport({ className = "", ref, ...props }) {
-	const classes = ["toast__viewport", className].filter(Boolean).join(" ");
+function ToastViewport({ className, ref, ...props }) {
+	const classes = mergeBaseClassName(["toast__viewport"].filter(Boolean).join(" "), className);
 	return /* @__PURE__ */ jsx(Toast$1.Viewport, {
 		ref,
 		"data-slot": "toast-viewport",
@@ -33,8 +34,8 @@ function ToastViewport({ className = "", ref, ...props }) {
 /**
 * Individual toast wrapper.
 */
-function ToastRoot({ className = "", ref, ...props }) {
-	const classes = ["toast", className].filter(Boolean).join(" ");
+function ToastRoot({ className, ref, ...props }) {
+	const classes = mergeBaseClassName(["toast"].filter(Boolean).join(" "), className);
 	return /* @__PURE__ */ jsx(Toast$1.Root, {
 		ref,
 		"data-slot": "toast",
@@ -45,8 +46,8 @@ function ToastRoot({ className = "", ref, ...props }) {
 /**
 * Container for the contents of a toast.
 */
-function ToastContent({ className = "", ref, ...props }) {
-	const classes = ["toast__content", className].filter(Boolean).join(" ");
+function ToastContent({ className, ref, ...props }) {
+	const classes = mergeBaseClassName(["toast__content"].filter(Boolean).join(" "), className);
 	return /* @__PURE__ */ jsx(Toast$1.Content, {
 		ref,
 		"data-slot": "toast-content",
@@ -57,8 +58,8 @@ function ToastContent({ className = "", ref, ...props }) {
 /**
 * Title that labels the toast. Renders an `<h2>` element.
 */
-function ToastTitle({ className = "", ref, ...props }) {
-	const classes = ["toast__title", className].filter(Boolean).join(" ");
+function ToastTitle({ className, ref, ...props }) {
+	const classes = mergeBaseClassName(["toast__title"].filter(Boolean).join(" "), className);
 	return /* @__PURE__ */ jsx(Toast$1.Title, {
 		ref,
 		"data-slot": "toast-title",
@@ -69,8 +70,8 @@ function ToastTitle({ className = "", ref, ...props }) {
 /**
 * Description text for the toast. Renders a `<p>` element.
 */
-function ToastDescription({ className = "", ref, ...props }) {
-	const classes = ["toast__description", className].filter(Boolean).join(" ");
+function ToastDescription({ className, ref, ...props }) {
+	const classes = mergeBaseClassName(["toast__description"].filter(Boolean).join(" "), className);
 	return /* @__PURE__ */ jsx(Toast$1.Description, {
 		ref,
 		"data-slot": "toast-description",
@@ -81,8 +82,8 @@ function ToastDescription({ className = "", ref, ...props }) {
 /**
 * Action button within the toast.
 */
-function ToastAction({ className = "", ref, ...props }) {
-	const classes = ["toast__action", className].filter(Boolean).join(" ");
+function ToastAction({ className, ref, ...props }) {
+	const classes = mergeBaseClassName(["toast__action"].filter(Boolean).join(" "), className);
 	return /* @__PURE__ */ jsx(Toast$1.Action, {
 		ref,
 		"data-slot": "toast-action",
@@ -93,8 +94,8 @@ function ToastAction({ className = "", ref, ...props }) {
 /**
 * Close button that dismisses the toast.
 */
-function ToastClose({ className = "", ref, ...props }) {
-	const classes = ["toast__close", className].filter(Boolean).join(" ");
+function ToastClose({ className, ref, ...props }) {
+	const classes = mergeBaseClassName(["toast__close"].filter(Boolean).join(" "), className);
 	return /* @__PURE__ */ jsx(Toast$1.Close, {
 		ref,
 		"data-slot": "toast-close",

package/dist/components/Toggle.d.ts

@@ -1,2 +1,2 @@
-import { i as toggleVariants, n as ToggleProps, r as ToggleVariantsOptions, t as Toggle } from "../Toggle-CAAlNl-M.js";
+import { i as toggleVariants, n as ToggleProps, r as ToggleVariantsOptions, t as Toggle } from "../Toggle-JKZ43D5S.js";
 export { Toggle, ToggleProps, ToggleVariantsOptions, toggleVariants };

package/dist/components/Toggle.js

@@ -1,12 +1,13 @@
+import { n as mergeBaseClassName } from "../class-names-BiMDVpUo.js";
 import "react";
 import { jsx } from "react/jsx-runtime";
 import { Toggle as Toggle$1 } from "@base-ui/react/toggle";
 //#region src/components/Toggle.tsx
-function toggleVariants({ variant = "default", size = "default", className } = {}) {
+function toggleVariants({ variant = "default", size = "md", className } = {}) {
 	return [
 		"toggle",
 		variant === "outline" && "toggle--outline",
-		size !== "default" && `toggle--${size}`,
+		size !== "md" && `toggle--${size}`,
 		className
 	].filter(Boolean).join(" ");
 }
@@ -50,15 +51,16 @@ function toggleVariants({ variant = "default", size = "default", className } = {
 *
 * @see {@link https://base-ui.com/react/components/toggle | Base UI Toggle}
 */
-function Toggle({ className = "", variant, size, ref, ...props }) {
+function Toggle({ className, variant, size, ref, ...props }) {
+	const classes = mergeBaseClassName(toggleVariants({
+		variant,
+		size
+	}), className);
 	return /* @__PURE__ */ jsx(Toggle$1, {
 		ref,
 		"data-slot": "toggle",
-		className: toggleVariants({
-			variant,
-			size,
-			className
-		}),
+		"data-size": size ?? "md",
+		className: classes,
 		...props
 	});
 }

package/dist/components/ToggleGroup.d.ts

@@ -1,2 +1,2 @@
-import { n as ToggleGroupItemProps, r as ToggleGroupProps, t as ToggleGroup } from "../ToggleGroup-8hPv-b69.js";
+import { n as ToggleGroupItemProps, r as ToggleGroupProps, t as ToggleGroup } from "../ToggleGroup-DNd6cDJZ.js";
 export { ToggleGroup, ToggleGroupItemProps, ToggleGroupProps };

package/dist/components/ToggleGroup.js

@@ -1,3 +1,4 @@
+import { n as mergeBaseClassName } from "../class-names-BiMDVpUo.js";
 import { toggleVariants } from "./Toggle.js";
 import * as React from "react";
 import { jsx } from "react/jsx-runtime";
@@ -6,12 +7,9 @@ import { Toggle } from "@base-ui/react/toggle";
 //#region src/components/ToggleGroup.tsx
 const ToggleGroupContext = React.createContext({
 	variant: "default",
-	size: "default",
+	size: "md",
 	spacing: 0
 });
-function normalizeSize(size) {
-	return size === "md" ? "default" : size;
-}
 /**
 * A toggle group component for selecting one or multiple options.
 *
@@ -37,8 +35,7 @@ function normalizeSize(size) {
 *
 * @see {@link https://base-ui.com/react/components/toggle-group | Base UI Toggle Group}
 */
-function ToggleGroupRoot({ size = "md", spacing = 0, variant = "default", className = "", children, style, ref, ...props }) {
-	const normalizedSize = normalizeSize(size);
+function ToggleGroupRoot({ size = "md", spacing = 0, variant = "default", className, children, style, ref, ...props }) {
 	const gap = `${spacing * .25}rem`;
 	const groupStyle = typeof style === "function" ? (state) => ({
 		...style(state),
@@ -47,25 +44,27 @@ function ToggleGroupRoot({ size = "md", spacing = 0, variant = "default", classN
 		...style,
 		gap
 	};
+	const classes = mergeBaseClassName(["toggle-group", size !== "md" && `toggle-group--${size}`].filter(Boolean).join(" "), className);
+	const contextValue = React.useMemo(() => ({
+		variant,
+		size,
+		spacing
+	}), [
+		size,
+		spacing,
+		variant
+	]);
 	return /* @__PURE__ */ jsx(ToggleGroup$1, {
 		ref,
-		"data-size": normalizedSize,
+		"data-size": size,
 		"data-slot": "toggle-group",
 		"data-spacing": spacing,
 		"data-variant": variant,
-		className: [
-			"toggle-group",
-			size !== "md" && `toggle-group--${size}`,
-			className
-		].filter(Boolean).join(" "),
+		className: classes,
 		style: groupStyle,
 		...props,
 		children: /* @__PURE__ */ jsx(ToggleGroupContext.Provider, {
-			value: {
-				variant,
-				size: normalizedSize,
-				spacing
-			},
+			value: contextValue,
 			children
 		})
 	});
@@ -73,18 +72,14 @@ function ToggleGroupRoot({ size = "md", spacing = 0, variant = "default", classN
 /**
 * A single toggle item within a ToggleGroup.
 */
-function ToggleGroupItem({ className = "", variant, size, ref, ...props }) {
+function ToggleGroupItem({ className, variant, size, ref, ...props }) {
 	const context = React.useContext(ToggleGroupContext);
 	const itemVariant = variant ?? context.variant;
 	const itemSize = size ?? context.size;
-	const classes = [
-		"toggle-group__item",
-		toggleVariants({
-			variant: itemVariant,
-			size: itemSize
-		}),
-		className
-	].filter(Boolean).join(" ");
+	const classes = mergeBaseClassName(["toggle-group__item", toggleVariants({
+		variant: itemVariant,
+		size: itemSize
+	})].filter(Boolean).join(" "), className);
 	return /* @__PURE__ */ jsx(Toggle, {
 		ref,
 		"data-size": itemSize,

package/dist/components/ToolApproval.d.ts

@@ -0,0 +1,28 @@
+import * as React from "react";
+import { ChatAddToolApproveResponseFunction, DynamicToolUIPart, ToolUIPart } from "ai";
+
+//#region src/components/ToolApproval.d.ts
+interface ToolApprovalProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "part"> {
+  /** Whole upstream AI SDK tool part. Non-request states render nothing. */
+  part: ToolUIPart | DynamicToolUIPart;
+  /** Pass `addToolApprovalResponse` from the chat hook directly. */
+  onRespond: ChatAddToolApproveResponseFunction;
+  question?: React.ReactNode;
+  count?: number;
+  onSkip?: () => void;
+}
+/** Actionable adapter for an AI SDK `approval-requested` tool part. */
+declare function ToolApproval({
+  className,
+  count,
+  onRespond,
+  onSkip,
+  part,
+  question,
+  ref,
+  ...props
+}: ToolApprovalProps & {
+  ref?: React.Ref<HTMLDivElement>;
+}): React.JSX.Element | null;
+//#endregion
+export { ToolApproval, ToolApprovalProps };

package/dist/components/ToolApproval.js

@@ -0,0 +1,35 @@
+import { Approval, ApprovalCount, ApprovalDecision, ApprovalHeader, ApprovalInputPreview, ApprovalQuestion } from "./Approval.js";
+import "react";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { getToolName } from "ai";
+//#region src/components/ToolApproval.tsx
+/** Actionable adapter for an AI SDK `approval-requested` tool part. */
+function ToolApproval({ className, count, onRespond, onSkip, part, question, ref, ...props }) {
+	if (part.state !== "approval-requested") return null;
+	const toolName = part.title ?? getToolName(part);
+	return /* @__PURE__ */ jsxs(Approval, {
+		ref,
+		className,
+		"aria-label": `Approve ${toolName}`,
+		...props,
+		children: [
+			/* @__PURE__ */ jsxs(ApprovalHeader, { children: [/* @__PURE__ */ jsx(ApprovalQuestion, { children: question ?? /* @__PURE__ */ jsxs(Fragment, { children: [
+				"Do you want to allow the agent to run ",
+				/* @__PURE__ */ jsx("code", { children: toolName }),
+				"?"
+			] }) }), count && count > 1 ? /* @__PURE__ */ jsxs(ApprovalCount, { children: ["1 of ", count] }) : null] }),
+			/* @__PURE__ */ jsx(ApprovalInputPreview, { input: part.input }),
+			/* @__PURE__ */ jsx(ApprovalDecision, {
+				subject: toolName,
+				onSkip,
+				onDecision: ({ approved, reason }) => onRespond({
+					id: part.approval.id,
+					approved,
+					reason
+				})
+			}, part.approval.id)
+		]
+	});
+}
+//#endregion
+export { ToolApproval };

package/dist/components/ToolInvocation.d.ts

@@ -0,0 +1,26 @@
+import { DynamicToolUIPart, ToolUIPart } from "ai";
+
+//#region src/components/ToolInvocation.d.ts
+/** One whole static or dynamic AI SDK tool UI part. */
+type ToolInvocationPart = ToolUIPart | DynamicToolUIPart;
+interface ToolInvocationProps {
+  /** The whole upstream AI SDK tool part, kept intact across every tool state. */
+  part: ToolInvocationPart;
+  /** Render the existing Activity disclosure expanded initially. */
+  defaultOpen?: boolean;
+}
+/**
+ * Read-only generic disclosure for one upstream AI SDK tool invocation.
+ *
+ * The component derives its name, state, input, output, denial, and error
+ * presentation from the whole `ToolUIPart | DynamicToolUIPart`. Approval
+ * response controls belong to transport-aware adapters rather than this
+ * transcript renderer. ThinkChat may replace this fallback with richer panels
+ * for known workspace, browser, fetch, session, skill, and execute tools.
+ */
+declare function ToolInvocation({
+  part,
+  defaultOpen
+}: ToolInvocationProps): import("react").JSX.Element;
+//#endregion
+export { ToolInvocation, ToolInvocationPart, ToolInvocationProps };