@mcp-b/react-components 0.16.1 → 0.17.0

package/dist/components/AgentConnection.js

@@ -1,10 +1,10 @@
-import { t as cx } from "../class-names-9UtZwb0J.js";
-import { C as LinkIcon } from "../icons-CpfUer49.js";
+import { t as cx } from "../class-names-Bk-QLWWI.js";
+import { w as LinkIcon } from "../icons--FqCZEc3.js";
 import { Button } from "./Button.js";
 import { Popover } from "./Popover.js";
 import { Field } from "./Field.js";
 import { Form } from "./Form.js";
-import { a as CodeBlockCopyButton, i as CodeBlockContent, n as CodeBlockActions, p as CodeBlockTitle, r as CodeBlockContainer, s as CodeBlockHeader, t as CodeBlock } from "../CodeBlock-BmB4Xaqq.js";
+import { a as CodeBlockCopyButton, i as CodeBlockContent, n as CodeBlockActions, p as CodeBlockTitle, r as CodeBlockContainer, s as CodeBlockHeader, t as CodeBlock } from "../CodeBlock-Co1noLbC.js";
 import { CUSTOM_MCP_SERVER_CARD } from "../utils/mcp-server-catalog.js";
 import * as React from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
@@ -131,7 +131,7 @@ function AgentConnectionPanel({ className, commands: commandsProp, defaultTarget
 			/* @__PURE__ */ jsxs("fieldset", {
 				className: "agent-connect__targets",
 				children: [/* @__PURE__ */ jsx("legend", {
-					className: "agent-connect__legend",
+					className: "agent-connect__legend sigvelo-visually-hidden",
 					children: "Agent connection target"
 				}), commands.map((command) => /* @__PURE__ */ jsx(Button, {
 					variant: "ghost",

package/dist/components/AgentMessageParts.d.ts

@@ -0,0 +1,2 @@
+import { i as AgentMessageRenderPartContext, n as AgentMessageParts, r as AgentMessagePartsProps, t as AgentMessagePart } from "../AgentMessageParts-CyD2UB3V.js";
+export { AgentMessagePart, AgentMessageParts, AgentMessagePartsProps, AgentMessageRenderPartContext };

package/dist/components/AgentMessageParts.js

@@ -0,0 +1,119 @@
+import { d as MessageContent, f as MessageResponse, i as MessageAttachment } from "../Message-C4eYRogZ.js";
+import { Reasoning, ReasoningContent, ReasoningTrigger } from "./Reasoning.js";
+import { Source, Sources, SourcesContent, SourcesTrigger } from "./Sources.js";
+import { ToolInvocation } from "./ToolInvocation.js";
+import "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { isFileUIPart, isReasoningUIPart, isTextUIPart, isToolUIPart } from "ai";
+//#region src/components/AgentMessageParts.tsx
+/**
+* Per-message row-size compaction marker from `AIChatAgent` persistence.
+*
+* This is distinct from Session history compaction overlays. When a single
+* SQLite row approaches the Workers/SQLite size limit, Agents compacts large
+* tool outputs and, if necessary, truncates text before persistence. The
+* message remains in place and receives metadata keys documented by Agents:
+* `compactedToolOutputs` lists tool-call ids whose outputs were summarized;
+* `compactedTextParts` lists text-part indexes that were truncated. The UI
+* reads those keys structurally because they are persisted metadata rather than
+* exported AI SDK part variants, then adds a local visual note while preserving
+* the original `UIMessage` and part shapes.
+*
+* @see https://github.com/cloudflare/agents/blob/main/docs/agents/chat-agents.md#row-size-protection
+*/
+function isCompactedPart(message, part, partIndex) {
+	const metadata = message.metadata;
+	if (isTextUIPart(part)) return Array.isArray(metadata?.compactedTextParts) && metadata.compactedTextParts.includes(partIndex);
+	if (isToolUIPart(part)) return Array.isArray(metadata?.compactedToolOutputs) && metadata.compactedToolOutputs.includes(part.toolCallId);
+	return false;
+}
+function getPartKey(part, partIndex) {
+	if (isToolUIPart(part)) return part.toolCallId;
+	if ("id" in part && typeof part.id === "string") return `${part.type}-${part.id}`;
+	return `${part.type}-${partIndex}`;
+}
+/**
+* AI SDK exports concrete source part types but no public source-part guard.
+* Keep these local guards as exact discriminant checks, matching
+* `ai/src/ui/ui-messages.ts` and `ai/src/ui/process-ui-message-stream.ts`.
+* If AI SDK exports source or step guards later, replace these wrappers rather
+* than widening the local transcript contract.
+*/
+function isSourceUrlPart(part) {
+	return part?.type === "source-url";
+}
+function isSourceDocumentPart(part) {
+	return part?.type === "source-document";
+}
+function formatSourceTitle(part) {
+	if (part.title) return part.title;
+	if (part.type === "source-document") return part.filename ?? part.mediaType;
+	try {
+		return new URL(part.url).hostname.replace(/^www\./, "");
+	} catch {
+		return part.url;
+	}
+}
+function renderSources(parts) {
+	return /* @__PURE__ */ jsxs(Sources, { children: [/* @__PURE__ */ jsx(SourcesTrigger, { count: parts.length }), /* @__PURE__ */ jsx(SourcesContent, { children: parts.map((part) => part.type === "source-url" ? /* @__PURE__ */ jsx(Source, {
+		href: part.url,
+		title: formatSourceTitle(part)
+	}, part.sourceId) : /* @__PURE__ */ jsx(Source, {
+		title: formatSourceTitle(part),
+		description: part.filename ?? part.mediaType
+	}, part.sourceId)) })] });
+}
+function getSourceRun(parts, start) {
+	const sources = [];
+	for (let index = start; index < parts.length; index++) {
+		const candidate = parts[index];
+		if (!isSourceUrlPart(candidate) && !isSourceDocumentPart(candidate)) break;
+		sources.push(candidate);
+	}
+	return sources;
+}
+function renderDefaultPart(message, part, partIndex, status) {
+	if (isTextUIPart(part) && part.text) return /* @__PURE__ */ jsx(MessageResponse, { children: part.text });
+	if (isFileUIPart(part)) return /* @__PURE__ */ jsx(MessageAttachment, { part });
+	if (isReasoningUIPart(part)) {
+		if (partIndex !== message.parts.findIndex(isReasoningUIPart)) return null;
+		const reasoningText = message.parts.filter(isReasoningUIPart).map((reasoningPart) => reasoningPart.text).join("\n\n");
+		if (!reasoningText) return null;
+		const lastPart = message.parts.at(-1);
+		return /* @__PURE__ */ jsxs(Reasoning, {
+			isStreaming: status === "streaming" && lastPart !== void 0 && isReasoningUIPart(lastPart) && lastPart.state === "streaming",
+			children: [/* @__PURE__ */ jsx(ReasoningTrigger, {}), /* @__PURE__ */ jsx(ReasoningContent, { children: reasoningText })]
+		});
+	}
+	if (isToolUIPart(part)) return /* @__PURE__ */ jsx(ToolInvocation, { part });
+	return null;
+}
+/**
+* Renders the ordered parts of one whole AI SDK `UIMessage` without adding a
+* transcript, message wrapper, composer, or transport. Compose it inside
+* `Message` for read-only run previews and child-agent transcript rows.
+*/
+function AgentMessageParts({ message, status = "ready", renderPart }) {
+	return message.parts.map((part, partIndex) => {
+		const defaultRender = () => renderDefaultPart(message, part, partIndex, status);
+		const custom = renderPart?.({
+			message,
+			part,
+			partIndex,
+			defaultRender
+		});
+		if (isSourceUrlPart(part) || isSourceDocumentPart(part)) {
+			if (custom !== void 0) return custom ? /* @__PURE__ */ jsx(MessageContent, { children: custom }, getPartKey(part, partIndex)) : null;
+			const previous = message.parts[partIndex - 1];
+			if (isSourceUrlPart(previous) || isSourceDocumentPart(previous)) return null;
+			return /* @__PURE__ */ jsx(MessageContent, { children: renderSources(getSourceRun(message.parts, partIndex)) }, getPartKey(part, partIndex));
+		}
+		const rendered = custom === void 0 ? defaultRender() : custom;
+		return rendered ? /* @__PURE__ */ jsxs(MessageContent, { children: [rendered, isCompactedPart(message, part, partIndex) ? /* @__PURE__ */ jsx("div", {
+			className: "message__compacted",
+			children: "Output truncated for storage"
+		}) : null] }, getPartKey(part, partIndex)) : null;
+	});
+}
+//#endregion
+export { AgentMessageParts };

package/dist/components/AgentToolDetail.d.ts

@@ -0,0 +1,55 @@
+import { n as ThinkChatValue } from "../ThinkChatContext-DrsZqdaO.js";
+import { ThinkChatMessagesProps } from "./ThinkChat.js";
+import { t as ThinkAgent } from "../think-agent-Cip5KAPj.js";
+import * as React from "react";
+import { UIMessage } from "ai";
+import { UseAgentOptions, useAgent } from "agents/react";
+import { AgentToolRunState } from "agents/agent-tools";
+
+//#region src/components/AgentToolDetail.d.ts
+interface AgentToolDetailProps<State = unknown, MessageT extends UIMessage = UIMessage> extends React.HTMLAttributes<HTMLDivElement> {
+  /** Whole retained run selected from the parent `useAgentToolEvents` result. */
+  run: AgentToolRunState<MessageT["parts"][number]>;
+  /** Whole child Think chat hook result; it owns the stored child transcript. */
+  chat: ThinkChatValue<State, MessageT>;
+  messages?: ThinkChatMessagesProps<MessageT>;
+  onBack?: () => void;
+}
+/**
+ * Live retained-child detail composed from upstream connection and chat values.
+ * The full child transcript comes from `chat.messages`; `run.parts` remains a
+ * compact parent-side stream projection and is never promoted to fake history.
+ */
+declare function AgentToolDetail<State = unknown, MessageT extends UIMessage = UIMessage>({
+  chat,
+  className,
+  messages,
+  onBack,
+  ref,
+  run,
+  ...props
+}: AgentToolDetailProps<State, MessageT> & {
+  ref?: React.Ref<HTMLDivElement>;
+}): React.JSX.Element;
+interface SelectedAgentToolChildProps<ParentAgentT extends ThinkAgent<ParentState>, ParentState = unknown, ChildState = unknown, MessageT extends UIMessage = UIMessage> {
+  run: AgentToolRunState<MessageT["parts"][number]>;
+  /** Whole parent `useAgent` result used to derive the standard root-first route. */
+  parentAgent: ReturnType<typeof useAgent<ParentAgentT, ParentState>>;
+  /**
+   * Optional whole upstream connection options. Supply the same auth/query/base
+   * configuration as the parent; the selected `run.subAgent` is appended.
+   */
+  connectionOptions?: UseAgentOptions<ChildState>;
+  messages?: ThinkChatMessagesProps<MessageT>;
+  onBack?: () => void;
+}
+/** Lazily connects one selected retained child and renders its real Think chat. */
+declare function SelectedAgentToolChild<ParentAgentT extends ThinkAgent<ParentState>, ParentState = unknown, ChildState = unknown, MessageT extends UIMessage = UIMessage>({
+  connectionOptions,
+  messages,
+  onBack,
+  parentAgent,
+  run
+}: SelectedAgentToolChildProps<ParentAgentT, ParentState, ChildState, MessageT>): React.JSX.Element;
+//#endregion
+export { AgentToolDetail, AgentToolDetailProps, SelectedAgentToolChild, SelectedAgentToolChildProps };

package/dist/components/AgentToolDetail.js

@@ -0,0 +1,98 @@
+import { t as cx } from "../class-names-Bk-QLWWI.js";
+import { n as ArrowLeftIcon } from "../icons--FqCZEc3.js";
+import { AppTopBar } from "./AppTopBar.js";
+import { NaniteMark } from "./NaniteScene.js";
+import { SubagentRunIndicator, getSubagentRunName } from "./SubagentRunIndicator.js";
+import { SubagentRunMilestone, SubagentRunMilestones, SubagentRunProgress } from "./SubagentRunDetails.js";
+import { t as ThinkChat } from "../ThinkChat-DInElus-.js";
+import * as React from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useAgentChat } from "@cloudflare/think/react";
+import { useAgent } from "agents/react";
+//#region src/components/AgentToolDetail.tsx
+/**
+* Live retained-child detail composed from upstream connection and chat values.
+* The full child transcript comes from `chat.messages`; `run.parts` remains a
+* compact parent-side stream projection and is never promoted to fake history.
+*/
+function AgentToolDetail({ chat, className, messages, onBack, ref, run, ...props }) {
+	const backRef = React.useRef(null);
+	const name = getSubagentRunName(run);
+	const progressLabel = run.progress?.message ?? run.progress?.phase;
+	React.useEffect(() => {
+		backRef.current?.focus();
+	}, [run.runId]);
+	return /* @__PURE__ */ jsxs("div", {
+		ref,
+		"data-slot": "agent-tool-detail",
+		className: cx("agent-tool-detail", className),
+		...props,
+		children: [
+			/* @__PURE__ */ jsxs(AppTopBar.Root, {
+				"aria-label": `${name} controls`,
+				children: [
+					/* @__PURE__ */ jsxs(AppTopBar.Leading, { children: [onBack ? /* @__PURE__ */ jsx(AppTopBar.Button, {
+						ref: backRef,
+						label: "Back to parent conversation",
+						onClick: onBack,
+						children: /* @__PURE__ */ jsx(ArrowLeftIcon, {})
+					}) : null, /* @__PURE__ */ jsx(NaniteMark, { index: run.order })] }),
+					/* @__PURE__ */ jsx(AppTopBar.Title, { children: /* @__PURE__ */ jsx("h2", {
+						className: "agent-tool-detail__title",
+						children: name
+					}) }),
+					/* @__PURE__ */ jsx(AppTopBar.Trailing, { children: /* @__PURE__ */ jsx(SubagentRunIndicator, { run }) })
+				]
+			}),
+			progressLabel || run.milestones?.length || run.error || run.summary ? /* @__PURE__ */ jsxs("div", {
+				className: "agent-tool-detail__run-state",
+				children: [
+					progressLabel ? /* @__PURE__ */ jsx(SubagentRunProgress, {
+						label: progressLabel,
+						value: run.progress?.fraction
+					}) : null,
+					run.milestones?.length ? /* @__PURE__ */ jsx(SubagentRunMilestones, {
+						"aria-label": `${name} milestones`,
+						children: run.milestones.map((milestone) => /* @__PURE__ */ jsx(SubagentRunMilestone, { children: milestone.name }, milestone.sequence))
+					}) : null,
+					run.error ? /* @__PURE__ */ jsx("p", {
+						className: "agent-tool-detail__error",
+						children: run.error
+					}) : null,
+					!run.error && run.summary ? /* @__PURE__ */ jsx("p", {
+						className: "agent-tool-detail__summary",
+						children: run.summary
+					}) : null
+				]
+			}) : null,
+			/* @__PURE__ */ jsx("div", {
+				className: "agent-tool-detail__chat",
+				children: /* @__PURE__ */ jsx(ThinkChat.Provider, {
+					chat,
+					children: /* @__PURE__ */ jsx(ThinkChat.Messages, {
+						...messages,
+						showComposer: false
+					})
+				})
+			})
+		]
+	});
+}
+/** Lazily connects one selected retained child and renders its real Think chat. */
+function SelectedAgentToolChild({ connectionOptions, messages, onBack, parentAgent, run }) {
+	const [root, ...parentSubPath] = parentAgent.path;
+	return /* @__PURE__ */ jsx(AgentToolDetail, {
+		run,
+		chat: useAgentChat({ agent: useAgent({
+			...connectionOptions ?? {
+				agent: root?.agent ?? parentAgent.agent,
+				name: root?.name ?? parentAgent.name
+			},
+			sub: [...connectionOptions?.sub ?? parentSubPath, run.subAgent]
+		}) }),
+		messages,
+		onBack
+	});
+}
+//#endregion
+export { AgentToolDetail, SelectedAgentToolChild };

package/dist/components/AgentToolRunsContext.d.ts

@@ -0,0 +1,2 @@
+import { i as useOptionalAgentToolRuns, n as AgentToolRunsProvider, r as AgentToolRunsProviderProps, t as AgentToolEventsValue } from "../AgentToolRunsContext-BVe4stgw.js";
+export { AgentToolEventsValue, AgentToolRunsProvider, AgentToolRunsProviderProps, useOptionalAgentToolRuns };

package/dist/components/AgentToolRunsContext.js

@@ -0,0 +1,16 @@
+import * as React from "react";
+import { jsx } from "react/jsx-runtime";
+//#region src/components/AgentToolRunsContext.tsx
+const AgentToolRunsContext = React.createContext(null);
+/** Provides one parent connection's retained Agent Tool event projection. */
+function AgentToolRunsProvider({ agentTools, children }) {
+	return /* @__PURE__ */ jsx(AgentToolRunsContext.Provider, {
+		value: agentTools,
+		children
+	});
+}
+function useOptionalAgentToolRuns() {
+	return React.useContext(AgentToolRunsContext);
+}
+//#endregion
+export { AgentToolRunsProvider, useOptionalAgentToolRuns };

package/dist/components/AlertDialog.d.ts

@@ -3,31 +3,19 @@ import { AlertDialog as AlertDialog$1 } from "@base-ui/react/alert-dialog";
 
 //#region src/components/AlertDialog.d.ts
 interface AlertDialogProps extends React.ComponentPropsWithRef<typeof AlertDialog$1.Root> {}
-interface AlertDialogTriggerProps extends Omit<React.ComponentPropsWithRef<typeof AlertDialog$1.Trigger>, "className"> {
-  className?: string;
-}
-interface AlertDialogBackdropProps extends Omit<React.ComponentPropsWithRef<typeof AlertDialog$1.Backdrop>, "className"> {
-  className?: string;
-}
-interface AlertDialogViewportProps extends Omit<React.ComponentPropsWithRef<typeof AlertDialog$1.Viewport>, "className"> {
-  className?: string;
-}
-interface AlertDialogPopupProps extends Omit<React.ComponentPropsWithRef<typeof AlertDialog$1.Popup>, "className"> {
-  className?: string;
+interface AlertDialogTriggerProps extends React.ComponentPropsWithRef<typeof AlertDialog$1.Trigger> {}
+interface AlertDialogBackdropProps extends React.ComponentPropsWithRef<typeof AlertDialog$1.Backdrop> {}
+interface AlertDialogViewportProps extends React.ComponentPropsWithRef<typeof AlertDialog$1.Viewport> {}
+interface AlertDialogPopupProps extends React.ComponentPropsWithRef<typeof AlertDialog$1.Popup> {
   /**
    * The size of the alert dialog.
    * @default 'md'
    */
   size?: "sm" | "md" | "lg";
 }
-interface AlertDialogTitleProps extends Omit<React.ComponentPropsWithRef<typeof AlertDialog$1.Title>, "className"> {
-  className?: string;
-}
-interface AlertDialogDescriptionProps extends Omit<React.ComponentPropsWithRef<typeof AlertDialog$1.Description>, "className"> {
-  className?: string;
-}
-interface AlertDialogCloseProps extends Omit<React.ComponentPropsWithRef<typeof AlertDialog$1.Close>, "className"> {
-  className?: string;
+interface AlertDialogTitleProps extends React.ComponentPropsWithRef<typeof AlertDialog$1.Title> {}
+interface AlertDialogDescriptionProps extends React.ComponentPropsWithRef<typeof AlertDialog$1.Description> {}
+interface AlertDialogCloseProps extends React.ComponentPropsWithRef<typeof AlertDialog$1.Close> {
   /**
    * The variant of the close button.
    * @default 'secondary'

package/dist/components/AlertDialog.js

@@ -1,3 +1,4 @@
+import { n as mergeBaseClassName } from "../class-names-Bk-QLWWI.js";
 import "react";
 import { jsx } from "react/jsx-runtime";
 import { AlertDialog as AlertDialog$1 } from "@base-ui/react/alert-dialog";
@@ -30,8 +31,8 @@ import { AlertDialog as AlertDialog$1 } from "@base-ui/react/alert-dialog";
 *
 * @see {@link https://base-ui.com/react/components/alert-dialog | Base UI Alert Dialog}
 */
-function AlertDialogTrigger({ className = "", ref, ...props }) {
-	const classes = ["alert-dialog__trigger", className].filter(Boolean).join(" ");
+function AlertDialogTrigger({ className, ref, ...props }) {
+	const classes = mergeBaseClassName(["alert-dialog__trigger"].filter(Boolean).join(" "), className);
 	return /* @__PURE__ */ jsx(AlertDialog$1.Trigger, {
 		ref,
 		"data-slot": "alert-dialog-trigger",
@@ -39,12 +40,8 @@ function AlertDialogTrigger({ className = "", ref, ...props }) {
 		...props
 	});
 }
-function AlertDialogBackdrop({ className = "", ref, ...props }) {
-	const classes = [
-		"alert-dialog__backdrop",
-		"base-ui-backdrop",
-		className
-	].filter(Boolean).join(" ");
+function AlertDialogBackdrop({ className, ref, ...props }) {
+	const classes = mergeBaseClassName(["alert-dialog__backdrop", "base-ui-backdrop"].filter(Boolean).join(" "), className);
 	return /* @__PURE__ */ jsx(AlertDialog$1.Backdrop, {
 		ref,
 		"data-slot": "alert-dialog-overlay",
@@ -52,8 +49,8 @@ function AlertDialogBackdrop({ className = "", ref, ...props }) {
 		...props
 	});
 }
-function AlertDialogViewport({ className = "", ref, ...props }) {
-	const classes = ["alert-dialog__viewport", className].filter(Boolean).join(" ");
+function AlertDialogViewport({ className, ref, ...props }) {
+	const classes = mergeBaseClassName(["alert-dialog__viewport"].filter(Boolean).join(" "), className);
 	return /* @__PURE__ */ jsx(AlertDialog$1.Viewport, {
 		ref,
 		"data-slot": "alert-dialog-viewport",
@@ -61,12 +58,8 @@ function AlertDialogViewport({ className = "", ref, ...props }) {
 		...props
 	});
 }
-function AlertDialogPopup({ size = "md", className = "", ref, ...props }) {
-	const classes = [
-		"alert-dialog__popup",
-		size !== "md" && `alert-dialog__popup--${size}`,
-		className
-	].filter(Boolean).join(" ");
+function AlertDialogPopup({ size = "md", className, ref, ...props }) {
+	const classes = mergeBaseClassName(["alert-dialog__popup", size !== "md" && `alert-dialog__popup--${size}`].filter(Boolean).join(" "), className);
 	return /* @__PURE__ */ jsx(AlertDialog$1.Popup, {
 		ref,
 		"data-slot": "alert-dialog-content",
@@ -74,32 +67,32 @@ function AlertDialogPopup({ size = "md", className = "", ref, ...props }) {
 		...props
 	});
 }
-function AlertDialogHeader({ className = "", ref, ...props }) {
+function AlertDialogHeader({ className, ref, ...props }) {
 	return /* @__PURE__ */ jsx("div", {
 		ref,
 		"data-slot": "alert-dialog-header",
-		className: ["alert-dialog__header", className].filter(Boolean).join(" "),
+		className: mergeBaseClassName(["alert-dialog__header"].filter(Boolean).join(" "), className),
 		...props
 	});
 }
-function AlertDialogFooter({ className = "", ref, ...props }) {
+function AlertDialogFooter({ className, ref, ...props }) {
 	return /* @__PURE__ */ jsx("div", {
 		ref,
 		"data-slot": "alert-dialog-footer",
-		className: ["alert-dialog__footer", className].filter(Boolean).join(" "),
+		className: mergeBaseClassName(["alert-dialog__footer"].filter(Boolean).join(" "), className),
 		...props
 	});
 }
-function AlertDialogMedia({ className = "", ref, ...props }) {
+function AlertDialogMedia({ className, ref, ...props }) {
 	return /* @__PURE__ */ jsx("div", {
 		ref,
 		"data-slot": "alert-dialog-media",
-		className: ["alert-dialog__media", className].filter(Boolean).join(" "),
+		className: mergeBaseClassName(["alert-dialog__media"].filter(Boolean).join(" "), className),
 		...props
 	});
 }
-function AlertDialogTitle({ className = "", ref, ...props }) {
-	const classes = ["alert-dialog__title", className].filter(Boolean).join(" ");
+function AlertDialogTitle({ className, ref, ...props }) {
+	const classes = mergeBaseClassName(["alert-dialog__title"].filter(Boolean).join(" "), className);
 	return /* @__PURE__ */ jsx(AlertDialog$1.Title, {
 		ref,
 		"data-slot": "alert-dialog-title",
@@ -107,8 +100,8 @@ function AlertDialogTitle({ className = "", ref, ...props }) {
 		...props
 	});
 }
-function AlertDialogDescription({ className = "", ref, ...props }) {
-	const classes = ["alert-dialog__description", className].filter(Boolean).join(" ");
+function AlertDialogDescription({ className, ref, ...props }) {
+	const classes = mergeBaseClassName(["alert-dialog__description"].filter(Boolean).join(" "), className);
 	return /* @__PURE__ */ jsx(AlertDialog$1.Description, {
 		ref,
 		"data-slot": "alert-dialog-description",
@@ -116,12 +109,8 @@ function AlertDialogDescription({ className = "", ref, ...props }) {
 		...props
 	});
 }
-function AlertDialogClose({ variant = "secondary", className = "", ref, ...props }) {
-	const classes = [
-		"alert-dialog__action",
-		`alert-dialog__action--${variant}`,
-		className
-	].filter(Boolean).join(" ");
+function AlertDialogClose({ variant = "secondary", className, ref, ...props }) {
+	const classes = mergeBaseClassName(["alert-dialog__action", `alert-dialog__action--${variant}`].filter(Boolean).join(" "), className);
 	return /* @__PURE__ */ jsx(AlertDialog$1.Close, {
 		ref,
 		"data-slot": "alert-dialog-close",

package/dist/components/AppTopBar.d.ts

@@ -9,12 +9,15 @@ interface AppTopBarRootProps extends React.ComponentPropsWithoutRef<typeof Toolb
 interface AppTopBarGroupProps extends ToolbarGroupProps {}
 interface AppTopBarTitleProps extends React.HTMLAttributes<HTMLDivElement> {}
 interface AppTopBarButtonProps extends Omit<ToolbarButtonProps, "aria-label"> {
+  ref?: React.Ref<HTMLButtonElement>;
   /** Accessible name and default tooltip text for the icon-only control. */
   label: string;
   /** Tooltip text when it should differ from the accessible name. */
   tooltip?: React.ReactNode;
 }
-interface AppTopBarControlProps extends ToolbarButtonProps {}
+interface AppTopBarControlProps extends ToolbarButtonProps {
+  ref?: React.Ref<HTMLButtonElement>;
+}
 /**
  * Stable application-level toolbar with composable leading, title, and trailing
  * slots. Descendant buttons share Base UI's roving focus and tooltip provider.

package/dist/components/AppTopBar.js

@@ -1,4 +1,4 @@
-import { t as cx } from "../class-names-9UtZwb0J.js";
+import { n as mergeBaseClassName, t as cx } from "../class-names-Bk-QLWWI.js";
 import { Button } from "./Button.js";
 import { Tooltip } from "./Tooltip.js";
 import { Toolbar } from "./Toolbar.js";
@@ -11,14 +11,14 @@ import { jsx, jsxs } from "react/jsx-runtime";
 */
 function AppTopBarRoot({ children, className, ...props }) {
 	return /* @__PURE__ */ jsx(Tooltip.Provider, { children: /* @__PURE__ */ jsx(Toolbar.Root, {
-		className: cx("app-top-bar", className),
+		className: mergeBaseClassName("app-top-bar", className),
 		...props,
 		children
 	}) });
 }
 function AppTopBarLeading({ className, ...props }) {
 	return /* @__PURE__ */ jsx(Toolbar.Group, {
-		className: cx("app-top-bar__leading", className),
+		className: mergeBaseClassName("app-top-bar__leading", className),
 		...props
 	});
 }
@@ -31,13 +31,13 @@ function AppTopBarTitle({ className, ref, ...props }) {
 }
 function AppTopBarTrailing({ className, ...props }) {
 	return /* @__PURE__ */ jsx(Toolbar.Group, {
-		className: cx("app-top-bar__trailing", className),
+		className: mergeBaseClassName("app-top-bar__trailing", className),
 		...props
 	});
 }
 function AppTopBarControl({ className, ...props }) {
 	return /* @__PURE__ */ jsx(Toolbar.Button, {
-		className: cx("app-top-bar__button", className),
+		className: mergeBaseClassName("app-top-bar__button", className),
 		...props
 	});
 }

package/dist/components/Approval.d.ts

@@ -0,0 +1,102 @@
+import * as React from "react";
+
+//#region src/components/Approval.d.ts
+interface ApprovalProps extends React.HTMLAttributes<HTMLDivElement> {
+  /** Approval question, preview, and decision controls composed by the application. */
+  children?: React.ReactNode;
+}
+/** Presentation-only frame for a human approval request. */
+declare function Approval({
+  className,
+  ref,
+  ...props
+}: ApprovalProps & {
+  ref?: React.Ref<HTMLDivElement>;
+}): React.JSX.Element;
+interface ApprovalHeaderProps extends React.HTMLAttributes<HTMLDivElement> {}
+/** Question and optional queue position for an approval request. */
+declare function ApprovalHeader({
+  className,
+  ref,
+  ...props
+}: ApprovalHeaderProps & {
+  ref?: React.Ref<HTMLDivElement>;
+}): React.JSX.Element;
+interface ApprovalQuestionProps extends React.HTMLAttributes<HTMLSpanElement> {}
+/** The request phrased as a human-readable question. */
+declare function ApprovalQuestion({
+  className,
+  ref,
+  ...props
+}: ApprovalQuestionProps & {
+  ref?: React.Ref<HTMLSpanElement>;
+}): React.JSX.Element;
+interface ApprovalCountProps extends React.HTMLAttributes<HTMLSpanElement> {}
+/** Position of the current request in an app-owned approval queue. */
+declare function ApprovalCount({
+  className,
+  ref,
+  ...props
+}: ApprovalCountProps & {
+  ref?: React.Ref<HTMLSpanElement>;
+}): React.JSX.Element;
+interface ApprovalPreviewProps extends React.HTMLAttributes<HTMLDivElement> {}
+/** Bounded, read-only preview of the operation being authorized. */
+declare function ApprovalPreview({
+  className,
+  ref,
+  ...props
+}: ApprovalPreviewProps & {
+  ref?: React.Ref<HTMLDivElement>;
+}): React.JSX.Element;
+interface ApprovalPreviewRowProps extends React.HTMLAttributes<HTMLDivElement> {
+  label?: React.ReactNode;
+}
+/** One labelled value in an approval preview. */
+declare function ApprovalPreviewRow({
+  children,
+  className,
+  label,
+  ref,
+  ...props
+}: ApprovalPreviewRowProps & {
+  ref?: React.Ref<HTMLDivElement>;
+}): React.JSX.Element;
+declare function formatApprovalValue(value: unknown): string;
+interface ApprovalInputPreviewProps {
+  input: unknown;
+}
+/** Renders unknown upstream input without changing or normalizing its shape. */
+declare function ApprovalInputPreview({
+  input
+}: ApprovalInputPreviewProps): React.JSX.Element;
+interface ApprovalDecisionValue {
+  approved: boolean;
+  reason?: string;
+}
+interface ApprovalDecisionProps extends React.HTMLAttributes<HTMLDivElement> {
+  /** Presentation callback. Transport adapters supply the upstream operation. */
+  onDecision: (decision: ApprovalDecisionValue) => void | PromiseLike<void>;
+  /** Dismisses the local presentation without settling the upstream request. */
+  onSkip?: () => void;
+  /** Accessible subject used by the deny-reason label. */
+  subject?: string;
+}
+/**
+ * Keyboard-operable approve/deny controls shared by inline and durable adapters.
+ * Arrow keys move between approve and deny, `1` returns to approve, and Enter
+ * in the reason field submits a denial. Async failures stay visible and are
+ * announced politely without coupling this presentation to a transport.
+ */
+declare function ApprovalDecision({
+  className,
+  onDecision,
+  onSkip,
+  subject,
+  ref,
+  ...props
+}: ApprovalDecisionProps & {
+  ref?: React.Ref<HTMLDivElement>;
+}): React.JSX.Element;
+//#endregion
+export { Approval, ApprovalCount, ApprovalCountProps, ApprovalDecision, ApprovalDecisionProps, ApprovalDecisionValue, ApprovalHeader, ApprovalHeaderProps, ApprovalInputPreview, ApprovalInputPreviewProps, ApprovalPreview, ApprovalPreviewProps, ApprovalPreviewRow, ApprovalPreviewRowProps, ApprovalProps, ApprovalQuestion, ApprovalQuestionProps, formatApprovalValue };