@mcp-b/react-components 0.16.0 → 0.17.0

package/dist/components/ThinkRoutineDetail.js

@@ -1,4 +1,4 @@
-import { t as cx } from "../class-names-9UtZwb0J.js";
+import { t as cx } from "../class-names-Bk-QLWWI.js";
 import { Badge } from "./Badge.js";
 import { Switch } from "./Switch.js";
 import { getThinkRoutineNextRun } from "./ThinkRoutine.js";

package/dist/components/ThinkRoutineForm.js

@@ -1,5 +1,5 @@
-import { t as cx } from "../class-names-9UtZwb0J.js";
-import { B as SpinnerIcon } from "../icons-CpfUer49.js";
+import { t as cx } from "../class-names-Bk-QLWWI.js";
+import { V as SpinnerIcon } from "../icons--FqCZEc3.js";
 import { Button } from "./Button.js";
 import { Field } from "./Field.js";
 import { Form } from "./Form.js";

package/dist/components/ThinkRoutineLibrary.d.ts

@@ -27,8 +27,14 @@ interface ThinkRoutineLibraryProps<TRoutine extends ThinkRoutine = ThinkRoutine>
   defaultSelectedRoutineId?: string;
   /** Called when the user selects a routine from the collection. */
   onSelectedRoutineIdChange?: (routineId: string) => void;
+  /** Product navigation rendered after the built-in schedule navigation control. */
+  appBarLeading?: React.ReactNode;
+  /** Opens a host-owned create route instead of the library's built-in form. */
+  onCreateRoutineRequest?: () => void;
   /** Creates an app-owned routine from a whole native Think scheduled task. */
   onCreateRoutine?: (request: ThinkRoutineCreateRequest) => void | Promise<void>;
+  /** Opens a host-owned editor for the selected routine. */
+  onEditRoutine?: (routine: TRoutine) => void;
   /** Starts the selected routine immediately. */
   onRunRoutine?: (routine: TRoutine) => void | Promise<void>;
   /** Activates or pauses the selected app-owned routine. */
@@ -52,10 +58,13 @@ interface ThinkRoutineLibraryProps<TRoutine extends ThinkRoutine = ThinkRoutine>
  * surfaces independently.
  */
 declare function ThinkRoutineLibrary<TRoutine extends ThinkRoutine = ThinkRoutine>({
+  appBarLeading,
   className,
   defaultSelectedRoutineId,
   onCreateRoutine,
+  onCreateRoutineRequest,
   onDeleteRoutine,
+  onEditRoutine,
   onRoutineEnabledChange,
   onRunRoutine,
   onRunSelect,

package/dist/components/ThinkRoutineLibrary.js

@@ -1,20 +1,25 @@
-import { t as cx } from "../class-names-9UtZwb0J.js";
-import { B as SpinnerIcon, P as PlayIcon, h as EllipsisIcon, n as ArrowLeftIcon, q as WarningIcon } from "../icons-CpfUer49.js";
+import { t as cx } from "../class-names-Bk-QLWWI.js";
+import { F as PlayIcon, J as WarningIcon, V as SpinnerIcon, g as EllipsisIcon, n as ArrowLeftIcon } from "../icons--FqCZEc3.js";
+import { Button } from "./Button.js";
 import { Menu } from "./Menu.js";
 import { AppTopBar } from "./AppTopBar.js";
+import { AlertDialog } from "./AlertDialog.js";
 import { ResponsiveSidebarShell } from "./ResponsiveSidebarShell.js";
 import { ThinkRoutineBrowser } from "./ThinkRoutineBrowser.js";
 import { ThinkRoutineDetail } from "./ThinkRoutineDetail.js";
 import { ThinkRoutineForm } from "./ThinkRoutineForm.js";
 import * as React from "react";
-import { jsx, jsxs } from "react/jsx-runtime";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 //#region src/components/ThinkRoutineLibrary.tsx
 function errorMessage(error) {
 	return error instanceof Error ? error.message : String(error);
 }
-function RoutineTopBarActions({ busy, onDelete, onRun }) {
-	if (!onRun && !onDelete) return null;
-	return /* @__PURE__ */ jsxs(AppTopBar.Trailing, {
+function RoutineTopBarActions({ busy, onDelete, onEdit, onRun, routineName }) {
+	const [deleteOpen, setDeleteOpen] = React.useState(false);
+	const moreActionsRef = React.useRef(null);
+	const hasMenu = Boolean(onEdit || onDelete);
+	if (!onRun && !hasMenu) return null;
+	return /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsxs(AppTopBar.Trailing, {
 		"aria-label": "Schedule actions",
 		children: [onRun ? /* @__PURE__ */ jsx(AppTopBar.Button, {
 			label: "Run schedule",
@@ -22,23 +27,52 @@ function RoutineTopBarActions({ busy, onDelete, onRun }) {
 			disabled: busy,
 			onClick: onRun,
 			children: busy ? /* @__PURE__ */ jsx(SpinnerIcon, {}) : /* @__PURE__ */ jsx(PlayIcon, {})
-		}) : null, onDelete ? /* @__PURE__ */ jsxs(Menu.Root, { children: [/* @__PURE__ */ jsx(AppTopBar.Button, {
+		}) : null, hasMenu ? /* @__PURE__ */ jsxs(Menu.Root, { children: [/* @__PURE__ */ jsx(AppTopBar.Button, {
 			label: "More schedule actions",
 			tooltip: "More actions",
 			disabled: busy,
-			render: /* @__PURE__ */ jsx(Menu.Trigger, { unstyled: true }),
+			render: /* @__PURE__ */ jsx(Menu.Trigger, {
+				ref: moreActionsRef,
+				unstyled: true
+			}),
 			children: /* @__PURE__ */ jsx(EllipsisIcon, {})
 		}), /* @__PURE__ */ jsx(Menu.Portal, { children: /* @__PURE__ */ jsx(Menu.Positioner, {
 			align: "end",
 			sideOffset: 4,
-			children: /* @__PURE__ */ jsx(Menu.Popup, { children: /* @__PURE__ */ jsx(Menu.Item, {
+			children: /* @__PURE__ */ jsxs(Menu.Popup, { children: [onEdit ? /* @__PURE__ */ jsx(Menu.Item, {
+				onClick: onEdit,
+				children: "Edit schedule"
+			}) : null, onDelete ? /* @__PURE__ */ jsx(Menu.Item, {
 				variant: "destructive",
 				disabled: busy,
-				onClick: onDelete,
+				onClick: () => setDeleteOpen(true),
 				children: "Delete schedule"
-			}) })
+			}) : null] })
 		}) })] }) : null]
-	});
+	}), onDelete ? /* @__PURE__ */ jsx(AlertDialog.Root, {
+		open: deleteOpen,
+		onOpenChange: setDeleteOpen,
+		children: /* @__PURE__ */ jsxs(AlertDialog.Portal, { children: [/* @__PURE__ */ jsx(AlertDialog.Backdrop, {}), /* @__PURE__ */ jsx(AlertDialog.Viewport, { children: /* @__PURE__ */ jsxs(AlertDialog.Popup, {
+			finalFocus: moreActionsRef,
+			children: [
+				/* @__PURE__ */ jsxs(AlertDialog.Title, { children: [
+					"Delete ",
+					routineName,
+					"?"
+				] }),
+				/* @__PURE__ */ jsx(AlertDialog.Description, { children: "This permanently deletes the schedule and stops its future runs." }),
+				/* @__PURE__ */ jsxs(AlertDialog.Footer, { children: [/* @__PURE__ */ jsx(AlertDialog.Close, {
+					disabled: busy,
+					children: "Cancel"
+				}), /* @__PURE__ */ jsx(AlertDialog.Close, {
+					variant: "destructive",
+					disabled: busy,
+					onClick: onDelete,
+					children: "Delete schedule"
+				})] })
+			]
+		}) })] })
+	}) : null] });
 }
 /**
 * Full-page, cross-agent routine library. This intentionally does not live in
@@ -48,7 +82,7 @@ function RoutineTopBarActions({ busy, onDelete, onRun }) {
 * `ThinkRoutineRuns`, and `ThinkRoutineForm`; consumers may also use those
 * surfaces independently.
 */
-function ThinkRoutineLibrary({ className, defaultSelectedRoutineId, onCreateRoutine, onDeleteRoutine, onRoutineEnabledChange, onRunRoutine, onRunSelect, onSelectedRoutineIdChange, owners, renderRoutineDetail, schedules, ref, routines, selectedRoutineId, ...props }) {
+function ThinkRoutineLibrary({ appBarLeading, className, defaultSelectedRoutineId, onCreateRoutine, onCreateRoutineRequest, onDeleteRoutine, onEditRoutine, onRoutineEnabledChange, onRunRoutine, onRunSelect, onSelectedRoutineIdChange, owners, renderRoutineDetail, schedules, ref, routines, selectedRoutineId, ...props }) {
 	const [view, setView] = React.useState("library");
 	const [innerSelectedId, setInnerSelectedId] = React.useState(defaultSelectedRoutineId ?? routines[0]?.id ?? "");
 	const [busy, setBusy] = React.useState(false);
@@ -56,6 +90,7 @@ function ThinkRoutineLibrary({ className, defaultSelectedRoutineId, onCreateRout
 	const [error, setError] = React.useState(null);
 	const activeId = selectedRoutineId ?? innerSelectedId;
 	const selectedRoutine = routines.find((routine) => routine.id === activeId) ?? (selectedRoutineId === void 0 ? routines[0] : void 0);
+	const requestCreate = onCreateRoutineRequest ?? (onCreateRoutine ? () => setView("create") : void 0);
 	const selectRoutine = (id) => {
 		if (selectedRoutineId === void 0) setInnerSelectedId(id);
 		onSelectedRoutineIdChange?.(id);
@@ -92,11 +127,11 @@ function ThinkRoutineLibrary({ className, defaultSelectedRoutineId, onCreateRout
 			}) : null,
 			/* @__PURE__ */ jsxs(AppTopBar.Root, {
 				"aria-label": "Schedule editor controls",
-				children: [/* @__PURE__ */ jsx(AppTopBar.Leading, { children: /* @__PURE__ */ jsx(AppTopBar.Button, {
+				children: [/* @__PURE__ */ jsxs(AppTopBar.Leading, { children: [/* @__PURE__ */ jsx(AppTopBar.Button, {
 					label: "Back to schedules",
 					onClick: () => setView("library"),
 					children: /* @__PURE__ */ jsx(ArrowLeftIcon, {})
-				}) }), /* @__PURE__ */ jsx(AppTopBar.Title, { children: "New schedule" })]
+				}), appBarLeading] }), /* @__PURE__ */ jsx(AppTopBar.Title, { children: "New schedule" })]
 			}),
 			/* @__PURE__ */ jsx(ThinkRoutineForm, {
 				busy,
@@ -111,7 +146,7 @@ function ThinkRoutineLibrary({ className, defaultSelectedRoutineId, onCreateRout
 				}
 			}),
 			/* @__PURE__ */ jsx("div", {
-				className: "think-routine-library__status",
+				className: "think-routine-library__status sigvelo-visually-hidden",
 				role: "status",
 				"aria-atomic": "true",
 				children: announcement
@@ -136,11 +171,13 @@ function ThinkRoutineLibrary({ className, defaultSelectedRoutineId, onCreateRout
 				topBar: ({ sidebarToggle }) => /* @__PURE__ */ jsxs(AppTopBar.Root, {
 					"aria-label": "Schedule controls",
 					children: [
-						/* @__PURE__ */ jsx(AppTopBar.Leading, { children: sidebarToggle }),
+						/* @__PURE__ */ jsxs(AppTopBar.Leading, { children: [sidebarToggle, appBarLeading] }),
 						/* @__PURE__ */ jsx(AppTopBar.Title, { children: selectedRoutine?.name ?? "Schedules" }),
 						/* @__PURE__ */ jsx(RoutineTopBarActions, {
 							busy,
+							routineName: selectedRoutine?.name ?? "schedule",
 							onRun: selectedRoutine && onRunRoutine ? () => void perform(() => onRunRoutine(selectedRoutine), `Started ${selectedRoutine.name}.`) : void 0,
+							onEdit: selectedRoutine && onEditRoutine ? () => onEditRoutine(selectedRoutine) : void 0,
 							onDelete: selectedRoutine && onDeleteRoutine ? () => void perform(() => onDeleteRoutine(selectedRoutine), `Deleted ${selectedRoutine.name}.`) : void 0
 						})
 					]
@@ -148,7 +185,7 @@ function ThinkRoutineLibrary({ className, defaultSelectedRoutineId, onCreateRout
 				sidebar: ({ closeSidebarOnCompact }) => /* @__PURE__ */ jsx(ThinkRoutineBrowser, {
 					routines,
 					selectedRoutineId: selectedRoutine?.id,
-					onCreateRoutine: onCreateRoutine ? () => setView("create") : void 0,
+					onCreateRoutine: requestCreate,
 					onSelectedRoutineIdChange: (id) => {
 						selectRoutine(id);
 						closeSidebarOnCompact();
@@ -161,12 +198,22 @@ function ThinkRoutineLibrary({ className, defaultSelectedRoutineId, onCreateRout
 						defaultDetail: /* @__PURE__ */ jsx(ThinkRoutineDetail, { ...detailProps })
 					}) : /* @__PURE__ */ jsx(ThinkRoutineDetail, { ...detailProps }) }, detailProps.routine.id) : /* @__PURE__ */ jsxs("div", {
 						className: "think-routine-library__empty-detail",
-						children: [/* @__PURE__ */ jsx("h1", { children: routines.length ? "Schedule unavailable" : "No schedules yet" }), /* @__PURE__ */ jsx("p", { children: routines.length ? "Select an available schedule." : "Create a schedule to run recurring Think prompts." })]
+						children: [
+							/* @__PURE__ */ jsx("h1", { children: routines.length ? "Schedule unavailable" : "No schedules yet" }),
+							/* @__PURE__ */ jsx("p", { children: routines.length ? "Select an available schedule." : "Create a schedule to run recurring Think prompts." }),
+							!routines.length && requestCreate ? /* @__PURE__ */ jsx(Button, {
+								className: "think-routine-library__empty-action",
+								type: "button",
+								color: "primary",
+								onClick: requestCreate,
+								children: "Create schedule"
+							}) : null
+						]
 					})
 				})
 			}),
 			/* @__PURE__ */ jsx("div", {
-				className: "think-routine-library__status",
+				className: "think-routine-library__status sigvelo-visually-hidden",
 				role: "status",
 				"aria-atomic": "true",
 				children: announcement

package/dist/components/ThinkRoutineRuns.js

@@ -1,4 +1,4 @@
-import { t as cx } from "../class-names-9UtZwb0J.js";
+import { t as cx } from "../class-names-Bk-QLWWI.js";
 import { Button } from "./Button.js";
 import { Badge } from "./Badge.js";
 import { formatThinkExecutionShortTimestamp, getThinkExecutionRunId, getThinkExecutionRunStatus, isThinkSubmissionRun } from "./ThinkExecutionRun.js";

package/dist/components/ThinkThreadPicker.js

@@ -1,5 +1,5 @@
-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 { t as cx } from "../class-names-Bk-QLWWI.js";
+import { I as PlusIcon, J as WarningIcon, V as SpinnerIcon, m as DotIcon } from "../icons--FqCZEc3.js";
 import { Button } from "./Button.js";
 import { ScrollArea } from "./ScrollArea.js";
 import "react";

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-Bk-QLWWI.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-DaXpe1Lc.js";
 export { Toggle, ToggleProps, ToggleVariantsOptions, toggleVariants };

package/dist/components/Toggle.js

@@ -1,3 +1,4 @@
+import { n as mergeBaseClassName } from "../class-names-Bk-QLWWI.js";
 import "react";
 import { jsx } from "react/jsx-runtime";
 import { Toggle as Toggle$1 } from "@base-ui/react/toggle";
@@ -50,15 +51,14 @@ 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 }) {
 	return /* @__PURE__ */ jsx(Toggle$1, {
 		ref,
 		"data-slot": "toggle",
-		className: toggleVariants({
+		className: mergeBaseClassName(toggleVariants({
 			variant,
-			size,
-			className
-		}),
+			size
+		}), className),
 		...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-yseEWkOC.js";
 export { ToggleGroup, ToggleGroupItemProps, ToggleGroupProps };

package/dist/components/ToggleGroup.js

@@ -1,3 +1,4 @@
+import { n as mergeBaseClassName } from "../class-names-Bk-QLWWI.js";
 import { toggleVariants } from "./Toggle.js";
 import * as React from "react";
 import { jsx } from "react/jsx-runtime";
@@ -37,7 +38,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 }) {
+function ToggleGroupRoot({ size = "md", spacing = 0, variant = "default", className, children, style, ref, ...props }) {
 	const normalizedSize = normalizeSize(size);
 	const gap = `${spacing * .25}rem`;
 	const groupStyle = typeof style === "function" ? (state) => ({
@@ -53,11 +54,7 @@ function ToggleGroupRoot({ size = "md", spacing = 0, variant = "default", classN
 		"data-slot": "toggle-group",
 		"data-spacing": spacing,
 		"data-variant": variant,
-		className: [
-			"toggle-group",
-			size !== "md" && `toggle-group--${size}`,
-			className
-		].filter(Boolean).join(" "),
+		className: mergeBaseClassName(["toggle-group", size !== "md" && `toggle-group--${size}`].filter(Boolean).join(" "), className),
 		style: groupStyle,
 		...props,
 		children: /* @__PURE__ */ jsx(ToggleGroupContext.Provider, {
@@ -73,18 +70,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 };

package/dist/components/ToolInvocation.js

@@ -0,0 +1,72 @@
+import { Activity, ActivityContent, ActivityPanel, ActivityTrigger } from "./Activity.js";
+import { getToolDisplayName, isToolPartFailed, isToolPartWorking } from "./ThinkChatToolParts.js";
+import { t as summarizeToolInput } from "../summarize-tool-input-BUJsENSn.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { getToolName } from "ai";
+import { getToolInput, getToolOutput, getToolPartState } from "@cloudflare/think/react";
+//#region src/components/ToolInvocation.tsx
+function formatToolValue(value) {
+	if (value === void 0) return void 0;
+	return typeof value === "string" ? value : JSON.stringify(value, null, 2);
+}
+function describeToolPart(part) {
+	const name = getToolDisplayName(part);
+	let action;
+	switch (part.state) {
+		case "approval-requested":
+			action = `${name} awaiting approval`;
+			break;
+		case "approval-responded":
+			action = part.approval.approved ? `Running ${name}` : `${name} denied`;
+			break;
+		case "output-error":
+			action = `${name} failed`;
+			break;
+		case "output-denied":
+			action = `${name} denied`;
+			break;
+		case "output-available":
+			action = part.preliminary ? `Running ${name}` : `Ran ${name}`;
+			break;
+		case "input-streaming":
+		case "input-available":
+			action = `Running ${name}`;
+			break;
+	}
+	const detail = summarizeToolInput(getToolInput(part));
+	return detail ? `${action} · ${detail}` : action;
+}
+/**
+* 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.
+*/
+function ToolInvocation({ part, defaultOpen }) {
+	const state = getToolPartState(part);
+	const failed = isToolPartFailed(part);
+	const deniedReason = part.state === "output-denied" ? part.approval.reason : void 0;
+	const output = state === "error" ? part.errorText : state === "denied" ? deniedReason ?? "Denied" : formatToolValue(getToolOutput(part));
+	const inputStatus = part.state === "approval-requested" ? "awaiting approval" : part.state === "approval-responded" ? part.approval.approved ? "approved" : "denied" : void 0;
+	const outputStatus = state === "denied" ? "denied" : failed ? "error" : part.state === "output-available" && part.preliminary ? "preliminary" : void 0;
+	return /* @__PURE__ */ jsxs(Activity, {
+		isStreaming: isToolPartWorking(part),
+		defaultOpen,
+		children: [/* @__PURE__ */ jsx(ActivityTrigger, { label: describeToolPart(part) }), /* @__PURE__ */ jsxs(ActivityContent, { children: [/* @__PURE__ */ jsx(ActivityPanel, {
+			label: part.title ?? getToolName(part),
+			text: formatToolValue(getToolInput(part)),
+			status: inputStatus,
+			error: inputStatus === "denied"
+		}), output !== void 0 ? /* @__PURE__ */ jsx(ActivityPanel, {
+			label: "output",
+			text: output,
+			status: outputStatus,
+			error: failed
+		}) : null] })]
+	});
+}
+//#endregion
+export { ToolInvocation };