@mcp-b/react-components 0.20.4 → 0.21.0

package/dist/components/AgentChat.js

@@ -3,8 +3,9 @@ import { H as QueueIcon, I as MoveToFrontIcon, U as RefreshIcon, V as PlusIcon,
 import { n as MessageAction, r as MessageActions, t as Message } from "../Message-DzuteocT.js";
 import { AgentMessageParts } from "./AgentMessageParts.js";
 import { Context, ContextContent, ContextContentBody, ContextContentHeader, ContextTrigger, getContextUsage, getContextUsedTokens } from "./Context.js";
+import { EmptyState } from "./EmptyState.js";
 import { MessageScroller, MessageScrollerButton, MessageScrollerContent, MessageScrollerItem, MessageScrollerProvider, MessageScrollerViewport } from "./MessageScroller.js";
-import { ConversationEmptyState } from "./Conversation.js";
+import { AgentChatStartScreen } from "./AgentChatStartScreen.js";
 import { AgentChatMessageEditor } from "./AgentChatMessageEditor.js";
 import { Marker, MarkerContent } from "./Marker.js";
 import { Menu } from "./Menu.js";
@@ -108,7 +109,7 @@ function getEditableUserText(message) {
 * 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, showComposer = onSubmit !== void 0, onStop, placeholder = "Ask anything...", disabled, emptyState, composerHeader, composerTools, slashCommands, mentionCommands, contextSelector, composerEndTools, voiceInput, beforeVoiceStart, composerAddMenuItems, notice, onRegenerate, onEditAndResend, onApprovalResponse, thinkStub, approvalsEnabled = true, permissionModeControl, onExecutionSettled, pendingApprovals: durableApprovals = EMPTY_PENDING_APPROVALS, contextWindow, renderPart, renderMessageAfter, ref }) {
+function AgentChat({ className, messages, status = "ready", onSubmit, showComposer = onSubmit !== void 0, onStop, placeholder = "Ask anything...", disabled, emptyState, startScreen, composerHeader, composerTools, slashCommands, mentionCommands, contextSelector, composerEndTools, voiceInput, beforeVoiceStart, composerAddMenuItems, notice, onRegenerate, onEditAndResend, onApprovalResponse, thinkStub, approvalsEnabled = true, permissionModeControl, onExecutionSettled, pendingApprovals: durableApprovals = EMPTY_PENDING_APPROVALS, contextWindow, renderPart, renderMessageAfter, showAssistantActions, isMessageScrollAnchor, ref }) {
 	const [copyAnnouncement, setCopyAnnouncement] = React.useState("");
 	const [composerDraft, setComposerDraft] = React.useState("");
 	const [composerReferences, setComposerReferences] = React.useState([]);
@@ -286,6 +287,131 @@ function AgentChat({ className, messages, status = "ready", onSubmit, showCompos
 		editButtonRef.current?.focus();
 		restoreEditFocus.current = false;
 	}, [editingMessageId]);
+	const composer = showComposer ? /* @__PURE__ */ jsxs("div", {
+		ref: observeAgentChatComposer,
+		className: "agent-chat__composer",
+		children: [
+			/* @__PURE__ */ jsx("div", {
+				className: "agent-chat__notice",
+				role: "status",
+				"aria-atomic": "true",
+				children: notice
+			}),
+			pendingPrompts.length ? /* @__PURE__ */ jsx("section", {
+				className: "agent-chat__queued",
+				"aria-label": "Queued messages",
+				children: /* @__PURE__ */ jsx("ul", {
+					className: "agent-chat__queued-list",
+					children: pendingPrompts.map((pending) => {
+						const messageText = pending.message.text || "Queued message";
+						return /* @__PURE__ */ jsxs("li", {
+							className: "agent-chat__queued-message",
+							children: [
+								/* @__PURE__ */ jsx("span", {
+									className: "agent-chat__queued-indicator",
+									"aria-hidden": "true",
+									children: /* @__PURE__ */ jsx(QueueIcon, {})
+								}),
+								/* @__PURE__ */ jsx("span", {
+									className: "agent-chat__queued-text sigvelo-truncate sigvelo-truncate-grow",
+									children: messageText
+								}),
+								/* @__PURE__ */ jsxs("button", {
+									type: "button",
+									className: "agent-chat__queued-action",
+									"aria-label": `Move queued message to front: ${messageText}`,
+									onClick: () => setPendingPrompts((current) => [pending, ...current.filter((item) => item !== pending)]),
+									children: [/* @__PURE__ */ jsx(MoveToFrontIcon, {}), "Move to front"]
+								}),
+								/* @__PURE__ */ jsx("button", {
+									type: "button",
+									className: "agent-chat__queued-action agent-chat__queued-remove",
+									"aria-label": `Remove queued message: ${messageText}`,
+									onClick: () => setPendingPrompts((current) => current.filter((item) => item !== pending)),
+									children: /* @__PURE__ */ jsx(TrashIcon, {})
+								})
+							]
+						}, pending.id);
+					})
+				})
+			}) : 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: [
+					composerHeader ? /* @__PURE__ */ jsx(PromptInputHeader, { children: composerHeader }) : null,
+					/* @__PURE__ */ jsx(PromptInputAttachments, {}),
+					/* @__PURE__ */ jsxs(PromptInputBody, { children: [/* @__PURE__ */ jsx(PromptInputReferences, {
+						references: composerReferences,
+						onRemove: removeComposerReference
+					}), slashCommands || mentionCommands ? /* @__PURE__ */ jsx(PromptInputCommandComposer, {
+						"aria-label": "Message",
+						placeholder: composerReferences.length ? "" : placeholder,
+						disabled,
+						commands: slashCommands?.items ?? [],
+						mentionCommands: mentionCommands?.items,
+						value: composerDraft,
+						onValueChange: setComposerDraft,
+						onCommandSelect: selectComposerCommand
+					}) : /* @__PURE__ */ jsx(PromptInputTextarea, {
+						"aria-label": "Message",
+						placeholder,
+						disabled,
+						value: composerDraft,
+						onChange: (event) => setComposerDraft(event.currentTarget.value)
+					})] }),
+					/* @__PURE__ */ jsxs(PromptInputFooter, { children: [/* @__PURE__ */ jsxs(PromptInputTools, { children: [
+						/* @__PURE__ */ jsx(AgentChatAddMenu, { children: composerAddMenuItems }),
+						contextSelector ? /* @__PURE__ */ jsx(PromptInputContextSelector, { ...contextSelector }) : null,
+						approvalsWired ? /* @__PURE__ */ jsx(PromptInputPermissionSelector, {
+							value: permissionMode,
+							onValueChange: setPermissionMode
+						}) : null,
+						composerTools
+					] }), /* @__PURE__ */ jsxs("div", {
+						className: "prompt-input__footer-end",
+						children: [
+							composerEndTools,
+							voiceInput ? /* @__PURE__ */ jsx(PromptInputDictation, {
+								voice: voiceInput,
+								beforeStart: beforeVoiceStart,
+								disabled
+							}) : null,
+							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(AgentChatSubmitAction, {
+								status,
+								onStop,
+								disabled,
+								hasDraft: Boolean(composerDraft.trim() || composerReferences.length)
+							})
+						]
+					})] })
+				] })
+			})
+		]
+	}) : null;
+	const showsStartScreen = messages.length === 0 && showComposer && startScreen !== false && (startScreen !== void 0 || emptyState === void 0);
+	const startScreenProps = startScreen && typeof startScreen === "object" ? startScreen : void 0;
 	return /* @__PURE__ */ jsxs(TransitionSurface, {
 		ref,
 		variant: "fade",
@@ -298,7 +424,10 @@ function AgentChat({ className, messages, status = "ready", onSubmit, showCompos
 				"aria-atomic": "true",
 				children: copyAnnouncement
 			}),
-			/* @__PURE__ */ jsx(MessageScrollerProvider, {
+			showsStartScreen ? /* @__PURE__ */ jsx(AgentChatStartScreen, {
+				...startScreenProps,
+				composer
+			}) : /* @__PURE__ */ jsx(MessageScrollerProvider, {
 				autoScroll: true,
 				defaultScrollPosition: "last-anchor",
 				children: /* @__PURE__ */ jsxs(MessageScroller, {
@@ -308,13 +437,16 @@ function AgentChat({ className, messages, status = "ready", onSubmit, showCompos
 						className: "agent-chat__transcript-content",
 						children: [messages.length === 0 ? /* @__PURE__ */ jsx(MessageScrollerItem, {
 							className: "conversation__empty-row",
-							children: emptyState ?? /* @__PURE__ */ jsx(ConversationEmptyState, {
+							children: emptyState ?? /* @__PURE__ */ jsx(EmptyState, {
 								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",
+							scrollAnchor: isMessageScrollAnchor?.({
+								message,
+								messageIndex
+							}) ?? message.role === "user",
 							children: isCompactionMessage(message) ? /* @__PURE__ */ jsx(Marker, {
 								variant: "separator",
 								children: /* @__PURE__ */ jsx(MarkerContent, { children: getMessageText(message) || "Conversation compacted" })
@@ -355,7 +487,10 @@ function AgentChat({ className, messages, status = "ready", onSubmit, showCompos
 											children: /* @__PURE__ */ jsx(PencilIcon, {})
 										})
 									}) : null,
-									message.role === "assistant" ? /* @__PURE__ */ jsx(AgentChatAssistantActions, {
+									message.role === "assistant" && (showAssistantActions?.({
+										message,
+										messageIndex
+									}) ?? true) ? /* @__PURE__ */ jsx(AgentChatAssistantActions, {
 										message,
 										responseNumber: assistantResponseNumbers[messageIndex],
 										showCopy: messageIndex !== newestAssistantIndex || status !== "streaming" && status !== "submitted",
@@ -373,129 +508,7 @@ function AgentChat({ className, messages, status = "ready", onSubmit, showCompos
 					})]
 				})
 			}),
-			showComposer ? /* @__PURE__ */ jsxs("div", {
-				ref: observeAgentChatComposer,
-				className: "agent-chat__composer",
-				children: [
-					/* @__PURE__ */ jsx("div", {
-						className: "agent-chat__notice",
-						role: "status",
-						"aria-atomic": "true",
-						children: notice
-					}),
-					pendingPrompts.length ? /* @__PURE__ */ jsx("section", {
-						className: "agent-chat__queued",
-						"aria-label": "Queued messages",
-						children: /* @__PURE__ */ jsx("ul", {
-							className: "agent-chat__queued-list",
-							children: pendingPrompts.map((pending) => {
-								const messageText = pending.message.text || "Queued message";
-								return /* @__PURE__ */ jsxs("li", {
-									className: "agent-chat__queued-message",
-									children: [
-										/* @__PURE__ */ jsx("span", {
-											className: "agent-chat__queued-indicator",
-											"aria-hidden": "true",
-											children: /* @__PURE__ */ jsx(QueueIcon, {})
-										}),
-										/* @__PURE__ */ jsx("span", {
-											className: "agent-chat__queued-text sigvelo-truncate sigvelo-truncate-grow",
-											children: messageText
-										}),
-										/* @__PURE__ */ jsxs("button", {
-											type: "button",
-											className: "agent-chat__queued-action",
-											"aria-label": `Move queued message to front: ${messageText}`,
-											onClick: () => setPendingPrompts((current) => [pending, ...current.filter((item) => item !== pending)]),
-											children: [/* @__PURE__ */ jsx(MoveToFrontIcon, {}), "Move to front"]
-										}),
-										/* @__PURE__ */ jsx("button", {
-											type: "button",
-											className: "agent-chat__queued-action agent-chat__queued-remove",
-											"aria-label": `Remove queued message: ${messageText}`,
-											onClick: () => setPendingPrompts((current) => current.filter((item) => item !== pending)),
-											children: /* @__PURE__ */ jsx(TrashIcon, {})
-										})
-									]
-								}, pending.id);
-							})
-						})
-					}) : 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: [
-							composerHeader ? /* @__PURE__ */ jsx(PromptInputHeader, { children: composerHeader }) : null,
-							/* @__PURE__ */ jsx(PromptInputAttachments, {}),
-							/* @__PURE__ */ jsxs(PromptInputBody, { children: [/* @__PURE__ */ jsx(PromptInputReferences, {
-								references: composerReferences,
-								onRemove: removeComposerReference
-							}), slashCommands || mentionCommands ? /* @__PURE__ */ jsx(PromptInputCommandComposer, {
-								"aria-label": "Message",
-								placeholder: composerReferences.length ? "" : placeholder,
-								disabled,
-								commands: slashCommands?.items ?? [],
-								mentionCommands: mentionCommands?.items,
-								value: composerDraft,
-								onValueChange: setComposerDraft,
-								onCommandSelect: selectComposerCommand
-							}) : /* @__PURE__ */ jsx(PromptInputTextarea, {
-								"aria-label": "Message",
-								placeholder,
-								disabled,
-								value: composerDraft,
-								onChange: (event) => setComposerDraft(event.currentTarget.value)
-							})] }),
-							/* @__PURE__ */ jsxs(PromptInputFooter, { children: [/* @__PURE__ */ jsxs(PromptInputTools, { children: [
-								/* @__PURE__ */ jsx(AgentChatAddMenu, { children: composerAddMenuItems }),
-								contextSelector ? /* @__PURE__ */ jsx(PromptInputContextSelector, { ...contextSelector }) : null,
-								approvalsWired ? /* @__PURE__ */ jsx(PromptInputPermissionSelector, {
-									value: permissionMode,
-									onValueChange: setPermissionMode
-								}) : null,
-								composerTools
-							] }), /* @__PURE__ */ jsxs("div", {
-								className: "prompt-input__footer-end",
-								children: [
-									composerEndTools,
-									voiceInput ? /* @__PURE__ */ jsx(PromptInputDictation, {
-										voice: voiceInput,
-										beforeStart: beforeVoiceStart,
-										disabled
-									}) : null,
-									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(AgentChatSubmitAction, {
-										status,
-										onStop,
-										disabled,
-										hasDraft: Boolean(composerDraft.trim() || composerReferences.length)
-									})
-								]
-							})] })
-						] })
-					})
-				]
-			}) : null
+			showsStartScreen ? null : composer
 		]
 	});
 }

package/dist/components/AgentChatStartScreen.d.ts

@@ -0,0 +1,2 @@
+import { a as AgentChatStarterListProps, i as AgentChatStarterList, n as AgentChatStartScreenProps, o as AgentChatStarterProps, r as AgentChatStarter, t as AgentChatStartScreen } from "../AgentChatStartScreen-CvXJBr4y.js";
+export { AgentChatStartScreen, AgentChatStartScreenProps, AgentChatStarter, AgentChatStarterList, AgentChatStarterListProps, AgentChatStarterProps };

package/dist/components/AgentChatStartScreen.js

@@ -0,0 +1,82 @@
+import { t as cx } from "../class-names-BiMDVpUo.js";
+import { et as XIcon } from "../icons-DyOM0EJs.js";
+import { Button } from "./Button.js";
+import * as React from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/components/AgentChatStartScreen.tsx
+/**
+* Welcoming first-turn layout for `AgentChat` and `ThinkChat`.
+*
+* `AgentChat` normally creates this component through its `startScreen` prop so
+* the same live composer moves from the center of the empty view to the pinned
+* transcript position after the first message.
+*/
+function AgentChatStartScreen({ heading = "What should we work on?", composer, children, className, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, ...props }) {
+	const headingId = React.useId();
+	return /* @__PURE__ */ jsx("section", {
+		"data-slot": "agent-chat-start-screen",
+		className: cx("agent-chat-start-screen", className),
+		"aria-label": ariaLabel,
+		"aria-labelledby": ariaLabel ? void 0 : ariaLabelledBy ?? (heading ? headingId : void 0),
+		...props,
+		children: /* @__PURE__ */ jsxs("div", {
+			className: "agent-chat-start-screen__content",
+			children: [
+				heading ? /* @__PURE__ */ jsx("h2", {
+					id: headingId,
+					className: "agent-chat-start-screen__heading",
+					children: heading
+				}) : null,
+				composer,
+				children ? /* @__PURE__ */ jsx("div", {
+					className: "agent-chat-start-screen__starters",
+					children
+				}) : null
+			]
+		})
+	});
+}
+/** Semantic list for first-turn prompts below an `AgentChatStartScreen`. */
+function AgentChatStarterList({ className, ...props }) {
+	return /* @__PURE__ */ jsx("ul", {
+		"data-slot": "agent-chat-starter-list",
+		role: "list",
+		className: cx("agent-chat-starter-list", className),
+		...props
+	});
+}
+/** One full-width, keyboard-native starter prompt. */
+function AgentChatStarter({ icon, muted = false, onDismiss, dismissLabel, children, className, type = "button", ...props }) {
+	return /* @__PURE__ */ jsxs("li", {
+		"data-slot": "agent-chat-starter",
+		className: "agent-chat-starter",
+		children: [/* @__PURE__ */ jsxs(Button, {
+			...props,
+			type,
+			variant: "ghost",
+			color: "neutral",
+			className: cx("agent-chat-starter__action", className),
+			"data-muted": muted ? "" : void 0,
+			children: [icon ? /* @__PURE__ */ jsx("span", {
+				className: "agent-chat-starter__icon",
+				"aria-hidden": "true",
+				children: icon
+			}) : null, /* @__PURE__ */ jsx("span", {
+				className: "agent-chat-starter__label",
+				children
+			})]
+		}), onDismiss ? /* @__PURE__ */ jsx(Button, {
+			type: "button",
+			variant: "ghost",
+			color: "neutral",
+			size: "lg",
+			iconOnly: true,
+			className: "agent-chat-starter__dismiss",
+			"aria-label": dismissLabel ?? "Dismiss suggestion",
+			onClick: onDismiss,
+			children: /* @__PURE__ */ jsx(XIcon, {})
+		}) : null]
+	});
+}
+//#endregion
+export { AgentChatStartScreen, AgentChatStarter, AgentChatStarterList };

package/dist/components/Approval.js

@@ -1,6 +1,7 @@
 import { t as cx } from "../class-names-BiMDVpUo.js";
 import { z as PencilIcon } from "../icons-DyOM0EJs.js";
 import { Button } from "./Button.js";
+import { Kbd } from "./Kbd.js";
 import * as React from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/components/Approval.tsx
@@ -207,10 +208,7 @@ function ApprovalDecision({ className, onDecision, onSkip, subject = "this actio
 						className: "approval__submit",
 						disabled: busy,
 						onClick: () => void respond(selected === "approve"),
-						children: [busy ? "Submitting…" : selected === "approve" ? "Approve" : "Submit denial", !busy ? /* @__PURE__ */ jsx("kbd", {
-							className: "approval__kbd",
-							children: "⏎"
-						}) : null]
+						children: [busy ? "Submitting…" : selected === "approve" ? "Approve" : "Submit denial", !busy ? /* @__PURE__ */ jsx(Kbd, { children: "⏎" }) : null]
 					})
 				]
 			}),

package/dist/components/BrowserLiveView.js

@@ -3,7 +3,7 @@ import { K as SpinnerIcon, k as MaximizeIcon } from "../icons-DyOM0EJs.js";
 import { Button } from "./Button.js";
 import { Dialog } from "./Dialog.js";
 import { TransitionSurface } from "./TransitionSurface.js";
-import { Badge } from "./Badge.js";
+import { StatusPill } from "./StatusPill.js";
 import * as React from "react";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 //#region src/components/BrowserLiveView.tsx
@@ -79,14 +79,12 @@ function BrowserLiveView({ source, receivedAt, pageTitle, fallback, className, .
 	const live = !expired && !failed;
 	const frameTitle = pageTitle ? `Live browser view — ${pageTitle}` : "Live browser view";
 	const view = live ? /* @__PURE__ */ jsxs(Fragment, { children: [
-		/* @__PURE__ */ jsxs(Badge, {
+		/* @__PURE__ */ jsx(StatusPill, {
+			busy: true,
 			size: "sm",
 			color: "destructive",
 			className: "browser-live-view__badge",
-			children: [/* @__PURE__ */ jsx("span", {
-				className: "browser-live-view__badge-dot",
-				"aria-hidden": true
-			}), "Live"]
+			children: "Live"
 		}),
 		/* @__PURE__ */ jsx("iframe", {
 			className: "browser-live-view__frame",
@@ -101,7 +99,7 @@ function BrowserLiveView({ source, receivedAt, pageTitle, fallback, className, .
 		frameState === "loading" ? /* @__PURE__ */ jsxs(TransitionSurface, {
 			className: "browser-live-view__state",
 			role: "status",
-			children: [/* @__PURE__ */ jsx(SpinnerIcon, { className: "browser-live-view__state-spinner" }), "Connecting live view…"]
+			children: [/* @__PURE__ */ jsx(SpinnerIcon, {}), "Connecting live view…"]
 		}) : null
 	] }) : fallback ?? /* @__PURE__ */ jsx(EndedState, {
 		title: failed ? "Live view unavailable" : "Live view ended",

package/dist/components/BrowserReplay.js

@@ -2,6 +2,7 @@ import { t as cx } from "../class-names-BiMDVpUo.js";
 import { B as PlayIcon, R as PauseIcon } from "../icons-DyOM0EJs.js";
 import { Button } from "./Button.js";
 import { r as formatClock } from "../format-S6uWyoSb.js";
+import { EmptyState } from "./EmptyState.js";
 import { Slider } from "./Slider.js";
 import * as React from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
@@ -135,14 +136,14 @@ function BrowserReplay({ className, events, autoPlay, ref, ...props }) {
 					ref: stageRef,
 					className: "browser-replay__stage"
 				}),
-				events.length < 2 ? /* @__PURE__ */ jsx("div", {
+				events.length < 2 ? /* @__PURE__ */ jsx(EmptyState, {
 					className: "browser-replay__empty",
-					children: "No browser recording"
+					description: "No browser recording"
 				}) : null,
-				hasError ? /* @__PURE__ */ jsx("div", {
+				hasError ? /* @__PURE__ */ jsx(EmptyState, {
 					className: "browser-replay__empty",
 					role: "alert",
-					children: "Browser replay could not be loaded"
+					description: "Browser replay could not be loaded"
 				}) : null
 			]
 		}), /* @__PURE__ */ jsxs("div", {

package/dist/components/BrowserRunPanel.js

@@ -56,7 +56,7 @@ function BrowserRunPanel({ liveView, onRefresh, onCloseSession, loading, error,
 		className: "browser-run-panel__live-view"
 	}) : loading ? /* @__PURE__ */ jsxs(BrowserRunPanelState, {
 		role: "status",
-		children: [/* @__PURE__ */ jsx(SpinnerIcon, { className: "browser-run-panel__spinner" }), "Loading browser session"]
+		children: [/* @__PURE__ */ jsx(SpinnerIcon, {}), "Loading browser session"]
 	}) : /* @__PURE__ */ jsx(BrowserRunPanelState, { children: empty });
 	const bodyProps = {
 		className: "web-preview__body browser-run-panel__body",

package/dist/components/ChatGptSignInScreen.js

@@ -1,7 +1,7 @@
 import { t as cx } from "../class-names-BiMDVpUo.js";
 import { K as SpinnerIcon } from "../icons-DyOM0EJs.js";
 import { Button } from "./Button.js";
-import { u as ModelSelectorLogo } from "../ModelSelector-pecWyOFI.js";
+import { u as ModelSelectorLogo } from "../ModelSelector-CEd8M9eK.js";
 import "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/components/ChatGptSignInScreen.tsx

package/dist/components/Conversation.d.ts

@@ -76,27 +76,6 @@ declare function ConversationItem({
   scrollAnchor,
   ...props
 }: ConversationItemProps): React.JSX.Element;
-interface ConversationEmptyStateProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "title"> {
-  title?: React.ReactNode;
-  description?: React.ReactNode;
-  icon?: React.ReactNode;
-}
-/**
- * Placeholder shown when there are no messages yet. Renders an icon, title,
- * and description stacked vertically; pass `children` to override the
- * default layout entirely.
- */
-declare function ConversationEmptyState({
-  className,
-  title,
-  description,
-  icon,
-  children,
-  ref,
-  ...props
-}: ConversationEmptyStateProps & {
-  ref?: React.Ref<HTMLDivElement>;
-}): React.JSX.Element;
 interface ConversationScrollButtonProps extends Omit<MessageScrollerButtonProps, "children"> {
   /** Accessible label for the button. */
   label?: string;
@@ -157,4 +136,4 @@ declare function ConversationDownload({
   ref?: React.Ref<HTMLButtonElement>;
 }): React.JSX.Element | null;
 //#endregion
-export { Conversation, ConversationContent, ConversationContentProps, ConversationDownload, ConversationDownloadProps, ConversationEmptyState, ConversationEmptyStateProps, ConversationItem, ConversationItemProps, ConversationMessage, ConversationProps, ConversationScrollButton, ConversationScrollButtonProps, messagesToMarkdown };
+export { Conversation, ConversationContent, ConversationContentProps, ConversationDownload, ConversationDownloadProps, ConversationItem, ConversationItemProps, ConversationMessage, ConversationProps, ConversationScrollButton, ConversationScrollButtonProps, messagesToMarkdown };

package/dist/components/Conversation.js

@@ -4,7 +4,7 @@ import { Button } from "./Button.js";
 import { t as assignRef } from "../merge-refs-DF_7w2x_.js";
 import { MessageScroller, MessageScrollerButton, MessageScrollerContent, MessageScrollerItem, MessageScrollerProvider, MessageScrollerViewport } from "./MessageScroller.js";
 import * as React from "react";
-import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { jsx } from "react/jsx-runtime";
 import { isReasoningUIPart, isTextUIPart } from "ai";
 //#region src/components/Conversation.tsx
 /**
@@ -84,33 +84,6 @@ function ConversationItem({ className, scrollAnchor = false, ...props }) {
 	});
 }
 /**
-* Placeholder shown when there are no messages yet. Renders an icon, title,
-* and description stacked vertically; pass `children` to override the
-* default layout entirely.
-*/
-function ConversationEmptyState({ className, title = "No messages yet", description = "Start a conversation to see messages here", icon, children, ref, ...props }) {
-	return /* @__PURE__ */ jsx("div", {
-		ref,
-		className: cx("conversation__empty", className),
-		...props,
-		children: children ?? /* @__PURE__ */ jsxs(Fragment, { children: [
-			icon ? /* @__PURE__ */ jsx("span", {
-				className: "conversation__empty-icon",
-				"aria-hidden": "true",
-				children: icon
-			}) : null,
-			title ? /* @__PURE__ */ jsx("div", {
-				className: "conversation__empty-title",
-				children: title
-			}) : null,
-			description ? /* @__PURE__ */ jsx("div", {
-				className: "conversation__empty-description",
-				children: description
-			}) : null
-		] })
-	});
-}
-/**
 * Floating button that scrolls the conversation to the latest message.
 * Hidden from view and tab order while the viewport is already at the end.
 */
@@ -178,4 +151,4 @@ function ConversationDownload({ className, messages, filename = "conversation.md
 	});
 }
 //#endregion
-export { Conversation, ConversationContent, ConversationDownload, ConversationEmptyState, ConversationItem, ConversationScrollButton, messagesToMarkdown };
+export { Conversation, ConversationContent, ConversationDownload, ConversationItem, ConversationScrollButton, messagesToMarkdown };

package/dist/components/EmptyState.d.ts

@@ -0,0 +1,46 @@
+import * as React from "react";
+
+//#region src/components/EmptyState.d.ts
+interface EmptyStateProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "title"> {
+  /** Optional glyph above the title, in a quiet circular well. */
+  icon?: React.ReactNode;
+  /** What is absent, as a short noun phrase. */
+  title?: React.ReactNode;
+  /** One sentence on how to make it non-empty. */
+  description?: React.ReactNode;
+}
+/**
+ * Placeholder for a region that has nothing in it yet.
+ *
+ * There is no size prop. A one-line "No results" and a full centred block are
+ * the same component with different content — pass only `description` for the
+ * first and add `icon` and `title` for the second. Filling and centring a
+ * region is the container's job, not this component's; set
+ * `--sigvelo-recipe-empty-state-padding-block` where a roomier well is wanted.
+ *
+ * `children` replaces the whole stack, for the cases that need an action.
+ *
+ * @example
+ * ```tsx
+ * <EmptyState description="No runs yet." />
+ *
+ * <EmptyState
+ *   icon={<MessageIcon />}
+ *   title="Start a conversation"
+ *   description="Ask the agent to inspect, plan, or build."
+ * />
+ * ```
+ */
+declare function EmptyState({
+  className,
+  icon,
+  title,
+  description,
+  children,
+  ref,
+  ...props
+}: EmptyStateProps & {
+  ref?: React.Ref<HTMLDivElement>;
+}): React.JSX.Element;
+//#endregion
+export { EmptyState, EmptyStateProps };