@mcp-b/react-components 0.12.0 → 0.14.0

package/dist/components/AgentChat.js

@@ -1,14 +1,16 @@
 import { t as cx } from "../class-names-9UtZwb0J.js";
-import { O as PlusIcon, k as RefreshIcon } from "../icons-D2Q5n5C1.js";
+import { A as RefreshIcon, D as PencilIcon, k as PlusIcon } from "../icons-Ba9THQKz.js";
 import { Activity, ActivityContent, ActivityPanel, ActivityTrigger } from "./Activity.js";
 import { Context, ContextContent, ContextContentBody, ContextContentHeader, ContextTrigger, getContextUsage, getContextUsedTokens } from "./Context.js";
+import { Button } from "./Button.js";
 import { MessageScroller, MessageScrollerButton, MessageScrollerContent, MessageScrollerItem, MessageScrollerProvider, MessageScrollerViewport } from "./MessageScroller.js";
 import { ConversationEmptyState } from "./Conversation.js";
 import { Message, MessageAction, MessageActions, MessageAttachment, MessageContent, MessageResponse } from "./Message.js";
 import { Marker, MarkerContent } from "./Marker.js";
-import { PromptInput, PromptInputActionAddAttachments, PromptInputActionMenu, PromptInputActionMenuContent, PromptInputActionMenuTrigger, PromptInputApproval, PromptInputAttachments, PromptInputBody, PromptInputButton, PromptInputFooter, PromptInputPermissionSelector, PromptInputSubmit, PromptInputTextarea, PromptInputTools, getApprovalRequestId, getApprovalStateKey, getPendingToolApprovals, usePromptInputAttachments } from "./PromptInput.js";
+import { PromptInput, PromptInputActionAddAttachments, PromptInputActionMenu, PromptInputActionMenuContent, PromptInputActionMenuTrigger, PromptInputApproval, PromptInputAttachments, PromptInputBody, PromptInputButton, PromptInputDictation, PromptInputFooter, PromptInputHeader, PromptInputPermissionSelector, PromptInputSubmit, PromptInputTextarea, PromptInputTools, getApprovalRequestId, getApprovalStateKey, getPendingToolApprovals, usePromptInputAttachments } from "./PromptInput.js";
 import { Reasoning, ReasoningContent, ReasoningTrigger } from "./Reasoning.js";
 import { Source, Sources, SourcesContent, SourcesTrigger } from "./Sources.js";
+import { t as CopyButton } from "../copy-button-DUMLYdsk.js";
 import { t as summarizeToolInput } from "../summarize-tool-input-BUJsENSn.js";
 import * as React from "react";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
@@ -117,6 +119,123 @@ function isCompactionMessage$1(message) {
 function getMessageText(message) {
 	return message.parts.filter((part) => isTextUIPart(part) || isReasoningUIPart(part)).map((part) => part.text).join("");
 }
+function getCopyableResponseText(message) {
+	return message.parts.filter(isTextUIPart).map((part) => part.text).join("\n\n").trim() || void 0;
+}
+function AgentChatAssistantActions({ message, responseNumber, showCopy, showRetry, onRegenerate, onCopyStatus }) {
+	const copyText = getCopyableResponseText(message);
+	if ((!showCopy || !copyText) && !showRetry) return null;
+	return /* @__PURE__ */ jsxs(MessageActions, {
+		"aria-label": `Actions for response ${responseNumber}`,
+		children: [showCopy && copyText ? /* @__PURE__ */ jsx(CopyButton, {
+			className: "message__action",
+			label: `Copy response ${responseNumber}`,
+			tooltip: "Copy response",
+			text: copyText,
+			size: "icon-lg",
+			onCopy: () => onCopyStatus(`Response ${responseNumber} copied.`),
+			onError: () => onCopyStatus(`Could not copy response ${responseNumber}. Try again.`)
+		}) : null, showRetry && onRegenerate ? /* @__PURE__ */ jsx(MessageAction, {
+			label: "Retry",
+			tooltip: "Regenerate response",
+			size: "icon-lg",
+			onClick: () => onRegenerate(message.id),
+			children: /* @__PURE__ */ jsx(RefreshIcon, { size: 14 })
+		}) : null]
+	});
+}
+function getEditableUserText(message) {
+	if (message.role !== "user" || message.parts.length !== 1) return void 0;
+	const part = message.parts[0];
+	return isTextUIPart(part) && part.text.trim() ? part.text : void 0;
+}
+function AgentChatMessageEditor({ message, originalText, onCancel, onEditAndResend, onSuccess }) {
+	const [draft, setDraft] = React.useState(originalText);
+	const [isSubmitting, setIsSubmitting] = React.useState(false);
+	const [error, setError] = React.useState();
+	const textareaRef = React.useRef(null);
+	const labelId = React.useId();
+	const errorId = React.useId();
+	const trimmedDraft = draft.trim();
+	const canSubmit = !isSubmitting && Boolean(trimmedDraft) && trimmedDraft !== originalText.trim();
+	React.useLayoutEffect(() => {
+		textareaRef.current?.focus();
+		const end = textareaRef.current?.value.length ?? 0;
+		textareaRef.current?.setSelectionRange(end, end);
+	}, []);
+	const handleSubmit = async (event) => {
+		event.preventDefault();
+		if (!canSubmit) return;
+		setError(void 0);
+		setIsSubmitting(true);
+		try {
+			await onEditAndResend({
+				message,
+				text: trimmedDraft
+			});
+			onSuccess();
+		} catch {
+			setError("Message wasn’t resent. Try again.");
+			setIsSubmitting(false);
+		}
+	};
+	return /* @__PURE__ */ jsxs("form", {
+		className: "message__edit-form",
+		"aria-busy": isSubmitting,
+		onSubmit: (event) => void handleSubmit(event),
+		children: [
+			/* @__PURE__ */ jsx("label", {
+				id: labelId,
+				className: "message__edit-label",
+				htmlFor: `${labelId}-textarea`,
+				children: "Edit message"
+			}),
+			/* @__PURE__ */ jsx("textarea", {
+				ref: textareaRef,
+				id: `${labelId}-textarea`,
+				className: "message__edit-textarea",
+				value: draft,
+				"aria-describedby": error ? errorId : void 0,
+				"aria-invalid": error ? true : void 0,
+				disabled: isSubmitting,
+				rows: 3,
+				onChange: (event) => {
+					setDraft(event.currentTarget.value);
+					if (error) setError(void 0);
+				},
+				onKeyDown: (event) => {
+					if (event.key !== "Escape" || isSubmitting) return;
+					event.preventDefault();
+					onCancel();
+				}
+			}),
+			error ? /* @__PURE__ */ jsx("p", {
+				id: errorId,
+				className: "message__edit-error",
+				role: "alert",
+				children: error
+			}) : null,
+			/* @__PURE__ */ jsxs("div", {
+				className: "message__edit-actions",
+				children: [/* @__PURE__ */ jsx(Button, {
+					type: "button",
+					variant: "outline",
+					color: "neutral",
+					size: "lg",
+					disabled: isSubmitting,
+					onClick: onCancel,
+					children: "Cancel"
+				}), /* @__PURE__ */ jsx(Button, {
+					type: "submit",
+					color: "primary",
+					size: "lg",
+					disabled: !canSubmit,
+					children: isSubmitting ? "Resending…" : "Send"
+				})]
+			})
+		]
+	});
+}
 function formatSourceTitle(part) {
 	if (part.title) return part.title;
 	if (part.type === "source-document") return part.filename ?? part.mediaType;
@@ -191,7 +310,20 @@ function renderDefaultPart(part) {
 * transport. Product code that talks to a Cloudflare Think agent should render
 * `ThinkChat`; use this directly only for plain AI SDK or read-only messages.
 */
-function AgentChat({ className, messages, status = "ready", onSubmit, onStop, placeholder = "Ask anything...", disabled, emptyState, composerTools, composerAddMenuItems, notice, onRegenerate, onApprovalResponse, thinkStub, onExecutionSettled, pendingApprovals: durableApprovals = EMPTY_PENDING_APPROVALS, contextWindow, renderPart, renderMessageAfter, ref }) {
+function AgentChat({ className, messages, status = "ready", onSubmit, onStop, placeholder = "Ask anything...", disabled, emptyState, composerHeader, composerTools, voiceInput, beforeVoiceStart, composerAddMenuItems, notice, onRegenerate, onEditAndResend, onApprovalResponse, thinkStub, onExecutionSettled, pendingApprovals: durableApprovals = EMPTY_PENDING_APPROVALS, contextWindow, renderPart, renderMessageAfter, ref }) {
+	const [copyAnnouncement, setCopyAnnouncement] = React.useState("");
+	const copyAnnouncementTimer = React.useRef(null);
+	const announceCopyStatus = React.useCallback((message) => {
+		if (copyAnnouncementTimer.current !== null) window.clearTimeout(copyAnnouncementTimer.current);
+		setCopyAnnouncement("");
+		copyAnnouncementTimer.current = window.setTimeout(() => {
+			setCopyAnnouncement(message);
+			copyAnnouncementTimer.current = null;
+		}, 50);
+	}, []);
+	React.useEffect(() => () => {
+		if (copyAnnouncementTimer.current !== null) window.clearTimeout(copyAnnouncementTimer.current);
+	}, []);
 	const handleSubmit = React.useCallback((message) => {
 		onSubmit?.(message);
 	}, [onSubmit]);
@@ -253,7 +385,23 @@ function AgentChat({ className, messages, status = "ready", onSubmit, onStop, pl
 	]);
 	const pendingApproval = permissionMode === "bypass" ? void 0 : pendingApprovalItems[0];
 	const contextUsage = contextWindow ? getContextUsage(messages) : void 0;
-	const lastAssistantIndex = onRegenerate && status !== "streaming" && status !== "submitted" ? messages.findLastIndex((message) => message.role === "assistant") : -1;
+	const newestAssistantIndex = messages.findLastIndex((message) => message.role === "assistant" && !isCompactionMessage$1(message));
+	const lastAssistantIndex = onRegenerate && status !== "streaming" && status !== "submitted" ? newestAssistantIndex : -1;
+	const lastUserIndex = onEditAndResend && !disabled && status !== "streaming" && status !== "submitted" ? messages.findLastIndex((message) => message.role === "user") : -1;
+	const [editingMessageId, setEditingMessageId] = React.useState();
+	const restoreEditFocus = React.useRef(false);
+	const editButtonRef = React.useRef(null);
+	let assistantResponseCount = 0;
+	const assistantResponseNumbers = messages.map((message) => {
+		if (message.role !== "assistant" || isCompactionMessage$1(message)) return 0;
+		assistantResponseCount += 1;
+		return assistantResponseCount;
+	});
+	React.useLayoutEffect(() => {
+		if (editingMessageId || !restoreEditFocus.current) return;
+		editButtonRef.current?.focus();
+		restoreEditFocus.current = false;
+	}, [editingMessageId]);
 	const composerRef = (el) => {
 		if (!el || typeof ResizeObserver === "undefined") return;
 		const root = el.parentElement;
@@ -266,121 +414,166 @@ function AgentChat({ className, messages, status = "ready", onSubmit, onStop, pl
 	return /* @__PURE__ */ jsxs("div", {
 		ref,
 		className: cx("agent-chat", className),
-		children: [/* @__PURE__ */ jsx(MessageScrollerProvider, {
-			autoScroll: true,
-			defaultScrollPosition: "last-anchor",
-			children: /* @__PURE__ */ jsxs(MessageScroller, {
-				className: "agent-chat__conversation",
-				children: [/* @__PURE__ */ jsx(MessageScrollerViewport, { children: /* @__PURE__ */ jsxs(MessageScrollerContent, {
-					"aria-busy": status === "streaming" || status === "submitted",
-					className: "agent-chat__transcript-content",
-					children: [messages.length === 0 ? /* @__PURE__ */ jsx(MessageScrollerItem, {
-						className: "agent-chat__empty-row",
-						children: emptyState ?? /* @__PURE__ */ jsx(ConversationEmptyState, {
-							title: "Start a conversation",
-							description: "Ask the agent to inspect, plan, or build."
-						})
-					}) : null, messages.map((message, messageIndex) => /* @__PURE__ */ jsx(MessageScrollerItem, {
-						messageId: message.id,
-						scrollAnchor: message.role === "user",
-						children: isCompactionMessage$1(message) ? /* @__PURE__ */ jsx(Marker, {
-							variant: "separator",
-							children: /* @__PURE__ */ jsx(MarkerContent, { children: getMessageText(message) || "Conversation compacted" })
-						}) : /* @__PURE__ */ jsxs(Message, {
-							from: message.role,
-							children: [
-								message.parts.map((part, partIndex) => {
-									const defaultRender = () => renderDefaultPart(part);
-									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;
-								}),
-								renderMessageAfter?.({
+		children: [
+			/* @__PURE__ */ jsx("span", {
+				className: "message__copy-status",
+				role: "status",
+				"aria-atomic": "true",
+				children: copyAnnouncement
+			}),
+			/* @__PURE__ */ jsx(MessageScrollerProvider, {
+				autoScroll: true,
+				defaultScrollPosition: "last-anchor",
+				children: /* @__PURE__ */ jsxs(MessageScroller, {
+					className: "agent-chat__conversation",
+					children: [/* @__PURE__ */ jsx(MessageScrollerViewport, { children: /* @__PURE__ */ jsxs(MessageScrollerContent, {
+						"aria-busy": status === "streaming" || status === "submitted",
+						className: "agent-chat__transcript-content",
+						children: [messages.length === 0 ? /* @__PURE__ */ jsx(MessageScrollerItem, {
+							className: "agent-chat__empty-row",
+							children: emptyState ?? /* @__PURE__ */ jsx(ConversationEmptyState, {
+								title: "Start a conversation",
+								description: "Ask the agent to inspect, plan, or build."
+							})
+						}) : null, messages.map((message, messageIndex) => /* @__PURE__ */ jsx(MessageScrollerItem, {
+							messageId: message.id,
+							scrollAnchor: message.role === "user",
+							children: isCompactionMessage$1(message) ? /* @__PURE__ */ jsx(Marker, {
+								variant: "separator",
+								children: /* @__PURE__ */ jsx(MarkerContent, { children: getMessageText(message) || "Conversation compacted" })
+							}) : /* @__PURE__ */ jsx(Message, {
+								from: message.role,
+								children: editingMessageId === message.id && onEditAndResend ? /* @__PURE__ */ jsx(AgentChatMessageEditor, {
 									message,
-									messageIndex
-								}),
-								onRegenerate && messageIndex === lastAssistantIndex ? /* @__PURE__ */ jsx(MessageActions, { children: /* @__PURE__ */ jsx(MessageAction, {
-									label: "Retry",
-									tooltip: "Regenerate response",
-									onClick: () => onRegenerate(message.id),
-									children: /* @__PURE__ */ jsx(RefreshIcon, { size: 14 })
-								}) }) : null
-							]
-						})
-					}, message.id ?? messageIndex))]
-				}) }), /* @__PURE__ */ jsx(MessageScrollerButton, {
-					"aria-label": "Scroll to latest",
-					className: "agent-chat__scroll-button",
-					size: "icon"
+									originalText: getEditableUserText(message) ?? "",
+									onEditAndResend,
+									onCancel: () => {
+										restoreEditFocus.current = true;
+										setEditingMessageId(void 0);
+									},
+									onSuccess: () => {
+										restoreEditFocus.current = false;
+										setEditingMessageId(void 0);
+									}
+								}, message.id) : /* @__PURE__ */ jsxs(Fragment, { children: [
+									message.parts.map((part, partIndex) => {
+										const defaultRender = () => renderDefaultPart(part);
+										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;
+									}),
+									renderMessageAfter?.({
+										message,
+										messageIndex
+									}),
+									onEditAndResend && messageIndex === lastUserIndex && getEditableUserText(message) !== void 0 ? /* @__PURE__ */ jsx(MessageActions, {
+										"aria-label": "Message actions",
+										children: /* @__PURE__ */ jsx(MessageAction, {
+											ref: editButtonRef,
+											label: "Edit message",
+											tooltip: "Edit and resend",
+											size: "icon-lg",
+											onClick: () => {
+												restoreEditFocus.current = false;
+												setEditingMessageId(message.id);
+											},
+											children: /* @__PURE__ */ jsx(PencilIcon, {})
+										})
+									}) : null,
+									message.role === "assistant" ? /* @__PURE__ */ jsx(AgentChatAssistantActions, {
+										message,
+										responseNumber: assistantResponseNumbers[messageIndex],
+										showCopy: messageIndex !== newestAssistantIndex || status !== "streaming" && status !== "submitted",
+										showRetry: messageIndex === lastAssistantIndex,
+										onRegenerate,
+										onCopyStatus: announceCopyStatus
+									}) : null
+								] })
+							})
+						}, message.id ?? messageIndex))]
+					}) }), /* @__PURE__ */ jsx(MessageScrollerButton, {
+						"aria-label": "Scroll to latest",
+						className: "agent-chat__scroll-button",
+						size: "icon"
+					})]
+				})
+			}),
+			/* @__PURE__ */ jsxs("div", {
+				ref: composerRef,
+				className: "agent-chat__composer",
+				children: [/* @__PURE__ */ jsx("div", {
+					className: "agent-chat__notice",
+					role: "status",
+					"aria-atomic": "true",
+					children: notice
+				}), /* @__PURE__ */ jsx(PromptInput, {
+					multiple: true,
+					onSubmit: handleSubmit,
+					children: pendingApproval ? /* @__PURE__ */ jsx(PromptInputApproval, {
+						part: "part" in pendingApproval ? pendingApproval.part : void 0,
+						approval: "approval" in pendingApproval ? pendingApproval.approval : void 0,
+						count: pendingApprovalItems.length,
+						onRespond: onApprovalResponse,
+						thinkStub,
+						onExecutionSettled,
+						onSkip: () => {
+							const id = "part" in pendingApproval ? getApprovalStateKey(pendingApproval.part) : pendingApproval.approval.executionId;
+							if (id) updateApprovalSession((current) => ({
+								...current,
+								skippedApprovalIds: [...current.skippedApprovalIds, id]
+							}));
+						}
+					}) : /* @__PURE__ */ jsxs(Fragment, { children: [
+						composerHeader ? /* @__PURE__ */ jsx(PromptInputHeader, { children: composerHeader }) : null,
+						/* @__PURE__ */ jsx(PromptInputAttachments, {}),
+						/* @__PURE__ */ jsx(PromptInputBody, { children: /* @__PURE__ */ jsx(PromptInputTextarea, {
+							"aria-label": "Message",
+							placeholder,
+							disabled
+						}) }),
+						/* @__PURE__ */ jsxs(PromptInputFooter, { children: [/* @__PURE__ */ jsxs(PromptInputTools, { children: [
+							/* @__PURE__ */ jsx(AgentChatAddMenu, { children: composerAddMenuItems }),
+							approvalsWired ? /* @__PURE__ */ jsx(PromptInputPermissionSelector, {
+								value: permissionMode,
+								onValueChange: setPermissionMode
+							}) : null,
+							composerTools,
+							voiceInput ? /* @__PURE__ */ jsx(PromptInputDictation, {
+								voice: voiceInput,
+								beforeStart: beforeVoiceStart,
+								disabled
+							}) : null
+						] }), /* @__PURE__ */ jsxs("div", {
+							className: "prompt-input__footer-end",
+							children: [contextWindow ? /* @__PURE__ */ jsxs(Context, {
+								usedTokens: getContextUsedTokens(contextUsage),
+								maxTokens: contextWindow.maxTokens,
+								usage: contextUsage,
+								modelId: contextWindow.modelId,
+								children: [/* @__PURE__ */ jsx(ContextTrigger, {}), /* @__PURE__ */ jsxs(ContextContent, { children: [/* @__PURE__ */ jsx(ContextContentHeader, {}), /* @__PURE__ */ jsx(ContextContentBody, {})] })]
+							}) : null, /* @__PURE__ */ jsx(PromptInputSubmit, {
+								status,
+								onStop
+							})]
+						})] })
+					] })
 				})]
 			})
-		}), /* @__PURE__ */ jsxs("div", {
-			ref: composerRef,
-			className: "agent-chat__composer",
-			children: [notice ? /* @__PURE__ */ jsx("div", {
-				className: "agent-chat__notice",
-				children: notice
-			}) : null, /* @__PURE__ */ jsx(PromptInput, {
-				multiple: true,
-				onSubmit: handleSubmit,
-				children: pendingApproval ? /* @__PURE__ */ jsx(PromptInputApproval, {
-					part: "part" in pendingApproval ? pendingApproval.part : void 0,
-					approval: "approval" in pendingApproval ? pendingApproval.approval : void 0,
-					count: pendingApprovalItems.length,
-					onRespond: onApprovalResponse,
-					thinkStub,
-					onExecutionSettled,
-					onSkip: () => {
-						const id = "part" in pendingApproval ? getApprovalStateKey(pendingApproval.part) : pendingApproval.approval.executionId;
-						if (id) updateApprovalSession((current) => ({
-							...current,
-							skippedApprovalIds: [...current.skippedApprovalIds, id]
-						}));
-					}
-				}) : /* @__PURE__ */ jsxs(Fragment, { children: [
-					/* @__PURE__ */ jsx(PromptInputAttachments, {}),
-					/* @__PURE__ */ jsx(PromptInputBody, { children: /* @__PURE__ */ jsx(PromptInputTextarea, {
-						"aria-label": "Message",
-						placeholder,
-						disabled
-					}) }),
-					/* @__PURE__ */ jsxs(PromptInputFooter, { children: [/* @__PURE__ */ jsxs(PromptInputTools, { children: [
-						/* @__PURE__ */ jsx(AgentChatAddMenu, { children: composerAddMenuItems }),
-						approvalsWired ? /* @__PURE__ */ jsx(PromptInputPermissionSelector, {
-							value: permissionMode,
-							onValueChange: setPermissionMode
-						}) : null,
-						composerTools
-					] }), /* @__PURE__ */ jsxs("div", {
-						className: "prompt-input__footer-end",
-						children: [contextWindow ? /* @__PURE__ */ jsxs(Context, {
-							usedTokens: getContextUsedTokens(contextUsage),
-							maxTokens: contextWindow.maxTokens,
-							usage: contextUsage,
-							modelId: contextWindow.modelId,
-							children: [/* @__PURE__ */ jsx(ContextTrigger, {}), /* @__PURE__ */ jsxs(ContextContent, { children: [/* @__PURE__ */ jsx(ContextContentHeader, {}), /* @__PURE__ */ jsx(ContextContentBody, {})] })]
-						}) : null, /* @__PURE__ */ jsx(PromptInputSubmit, {
-							status,
-							onStop
-						})]
-					})] })
-				] })
-			})]
-		})]
+		]
 	});
 }
 //#endregion

package/dist/components/AgentConnection.js

@@ -1,8 +1,8 @@
 import { t as cx } from "../class-names-9UtZwb0J.js";
-import { b as LinkIcon } from "../icons-D2Q5n5C1.js";
+import { b as LinkIcon } from "../icons-Ba9THQKz.js";
 import { Popover } from "./Popover.js";
 import { Button } from "./Button.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-XNQOupQ3.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-BUFXG8HW.js";
 import { Field } from "./Field.js";
 import { Form } from "./Form.js";
 import * as React from "react";

package/dist/components/AlertDialog.d.ts

@@ -9,6 +9,9 @@ interface AlertDialogTriggerProps extends Omit<React.ComponentPropsWithRef<typeo
 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;
   /**
@@ -31,10 +34,6 @@ interface AlertDialogCloseProps extends Omit<React.ComponentPropsWithRef<typeof
    */
   variant?: "primary" | "secondary" | "destructive" | "outline" | "ghost";
 }
-type AlertDialogOverlayProps = AlertDialogBackdropProps;
-type AlertDialogContentProps = AlertDialogPopupProps;
-type AlertDialogActionProps = AlertDialogCloseProps;
-type AlertDialogCancelProps = AlertDialogCloseProps;
 interface AlertDialogHeaderProps extends React.HTMLAttributes<HTMLDivElement> {}
 interface AlertDialogFooterProps extends React.HTMLAttributes<HTMLDivElement> {}
 interface AlertDialogMediaProps extends React.HTMLAttributes<HTMLDivElement> {}
@@ -44,27 +43,28 @@ interface AlertDialogMediaProps extends React.HTMLAttributes<HTMLDivElement> {}
  *
  * @example
  * ```tsx
- * <AlertDialog>
- *   <AlertDialogTrigger>Delete Account</AlertDialogTrigger>
- *   <AlertDialogPortal>
- *     <AlertDialogBackdrop />
- *     <AlertDialogPopup>
- *       <AlertDialogTitle>Are you sure?</AlertDialogTitle>
- *       <AlertDialogDescription>
+ * <AlertDialog.Root>
+ *   <AlertDialog.Trigger>Delete Account</AlertDialog.Trigger>
+ *   <AlertDialog.Portal>
+ *     <AlertDialog.Backdrop />
+ *     <AlertDialog.Viewport>
+ *       <AlertDialog.Popup>
+ *       <AlertDialog.Title>Are you sure?</AlertDialog.Title>
+ *       <AlertDialog.Description>
  *         This action cannot be undone.
- *       </AlertDialogDescription>
+ *       </AlertDialog.Description>
  *       <div style={{ display: "flex", gap: "0.5rem", justifyContent: "flex-end" }}>
- *         <AlertDialogClose>Cancel</AlertDialogClose>
- *         <AlertDialogClose variant="destructive">Delete</AlertDialogClose>
+ *         <AlertDialog.Close>Cancel</AlertDialog.Close>
+ *         <AlertDialog.Close variant="destructive">Delete</AlertDialog.Close>
  *       </div>
- *     </AlertDialogPopup>
- *   </AlertDialogPortal>
- * </AlertDialog>
+ *       </AlertDialog.Popup>
+ *     </AlertDialog.Viewport>
+ *   </AlertDialog.Portal>
+ * </AlertDialog.Root>
  * ```
  *
  * @see {@link https://base-ui.com/react/components/alert-dialog | Base UI Alert Dialog}
  */
-declare const AlertDialog: typeof AlertDialog$1.Root;
 declare function AlertDialogTrigger({
   className,
   ref,
@@ -72,7 +72,6 @@ declare function AlertDialogTrigger({
 }: AlertDialogTriggerProps & {
   ref?: React.Ref<HTMLButtonElement>;
 }): React.JSX.Element;
-declare const AlertDialogPortal: React.ForwardRefExoticComponent<Omit<import("@base-ui/react").AlertDialogPortalProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
 declare function AlertDialogBackdrop({
   className,
   ref,
@@ -80,19 +79,19 @@ declare function AlertDialogBackdrop({
 }: AlertDialogBackdropProps & {
   ref?: React.Ref<HTMLDivElement>;
 }): React.JSX.Element;
-declare const AlertDialogOverlay: typeof AlertDialogBackdrop;
-declare function AlertDialogPopup({
-  size,
+declare function AlertDialogViewport({
   className,
   ref,
   ...props
-}: AlertDialogPopupProps & {
+}: AlertDialogViewportProps & {
   ref?: React.Ref<HTMLDivElement>;
 }): React.JSX.Element;
-declare function AlertDialogContent({
+declare function AlertDialogPopup({
+  size,
+  className,
   ref,
   ...props
-}: AlertDialogContentProps & {
+}: AlertDialogPopupProps & {
   ref?: React.Ref<HTMLDivElement>;
 }): React.JSX.Element;
 declare function AlertDialogHeader({
@@ -138,11 +137,20 @@ declare function AlertDialogClose({
 }: AlertDialogCloseProps & {
   ref?: React.Ref<HTMLButtonElement>;
 }): React.JSX.Element;
-declare function AlertDialogAction(props: AlertDialogActionProps & {
-  ref?: React.Ref<HTMLButtonElement>;
-}): React.JSX.Element;
-declare function AlertDialogCancel(props: AlertDialogCancelProps & {
-  ref?: React.Ref<HTMLButtonElement>;
-}): React.JSX.Element;
+declare const AlertDialog: {
+  Root: typeof AlertDialog$1.Root;
+  Trigger: typeof AlertDialogTrigger;
+  Portal: React.ForwardRefExoticComponent<Omit<import("@base-ui/react").AlertDialogPortalProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
+  Backdrop: typeof AlertDialogBackdrop;
+  Viewport: typeof AlertDialogViewport;
+  Popup: typeof AlertDialogPopup;
+  Header: typeof AlertDialogHeader;
+  Footer: typeof AlertDialogFooter;
+  Media: typeof AlertDialogMedia;
+  Title: typeof AlertDialogTitle;
+  Description: typeof AlertDialogDescription;
+  Close: typeof AlertDialogClose;
+  createHandle: typeof AlertDialog$1.createHandle;
+};
 //#endregion
-export { AlertDialog, AlertDialogAction, AlertDialogActionProps, AlertDialogBackdrop, AlertDialogBackdropProps, AlertDialogCancel, AlertDialogCancelProps, AlertDialogClose, AlertDialogCloseProps, AlertDialogContent, AlertDialogContentProps, AlertDialogDescription, AlertDialogDescriptionProps, AlertDialogFooter, AlertDialogFooterProps, AlertDialogHeader, AlertDialogHeaderProps, AlertDialogMedia, AlertDialogMediaProps, AlertDialogOverlay, AlertDialogOverlayProps, AlertDialogPopup, AlertDialogPopupProps, AlertDialogPortal, AlertDialogProps, AlertDialogTitle, AlertDialogTitleProps, AlertDialogTrigger, AlertDialogTriggerProps };
+export { AlertDialog, AlertDialogBackdropProps, AlertDialogCloseProps, AlertDialogDescriptionProps, AlertDialogFooterProps, AlertDialogHeaderProps, AlertDialogMediaProps, AlertDialogPopupProps, AlertDialogProps, AlertDialogTitleProps, AlertDialogTriggerProps, AlertDialogViewportProps };