@mcp-b/react-components 0.7.0 → 0.7.1

package/dist/components/AgentChat.d.ts

@@ -1,101 +1,2 @@
-import { et as PromptInputMessage, n as ExecutionApprovals } from "../PromptInput-D6-G24p7.js";
-import * as React from "react";
-import { ChatAddToolApproveResponseFunction, ChatStatus, UIMessage } from "ai";
-import { PendingApproval } from "@cloudflare/think";
-
-//#region src/components/AgentChat.d.ts
-type AgentChatPart<MessageT extends UIMessage = UIMessage> = MessageT["parts"][number];
-interface AgentChatRenderPartContext<MessageT extends UIMessage = UIMessage> {
-  message: MessageT;
-  part: AgentChatPart<MessageT>;
-  partIndex: number;
-  defaultRender: () => React.ReactNode;
-}
-interface AgentChatRenderMessageContext<MessageT extends UIMessage = UIMessage> {
-  message: MessageT;
-  messageIndex: number;
-}
-interface AgentChatProps<MessageT extends UIMessage = UIMessage> {
-  className?: string;
-  /** AI SDK `UIMessage`s to render, oldest first. */
-  messages: readonly MessageT[];
-  /** Drives the composer's send/stop affordance and streaming indicators. */
-  status?: ChatStatus;
-  /** Called with the composed message when the user submits. Omit for a read-only transcript. */
-  onSubmit?: (message: PromptInputMessage) => void | Promise<void>;
-  /** Called when the user hits stop while `status` is streaming/submitted. */
-  onStop?: () => void;
-  placeholder?: string;
-  disabled?: boolean;
-  /** Rendered in place of the transcript while `messages` is empty. */
-  emptyState?: React.ReactNode;
-  /** Extra controls rendered in the composer toolbar. */
-  composerTools?: React.ReactNode;
-  /** Extra rows rendered in the built-in plus menu after files. */
-  composerAddMenuItems?: React.ReactNode;
-  /**
-   * Transient status rendered between the transcript and the composer —
-   * e.g. a "Reconnecting…" pill. `ThinkChat.Messages` fills this from the
-   * hook's `isRecovering`/`connectionError` automatically.
-   */
-  notice?: React.ReactNode;
-  /**
-   * When set, the last assistant message gets a Retry action that calls this
-   * with its message id — pass to the AI SDK's `regenerate({ messageId })`.
-   */
-  onRegenerate?: (messageId: string) => void;
-  /**
-   * Pass `addToolApprovalResponse` from `useAgentChat`/`useChat` directly.
-   * When set and a tool call awaits approval, the composer becomes the
-   * confirmation.
-   */
-  onApprovalResponse?: ChatAddToolApproveResponseFunction;
-  /** Resolves Think execution approvals. See {@link ExecutionApprovals}. */
-  executionApprovals?: ExecutionApprovals;
-  /** Think durable-pause approvals from `pendingApprovals()`, rendered when `executionApprovals` is set. */
-  pendingApprovals?: readonly PendingApproval[];
-  /**
-   * When set, a Context ring in the composer footer shows how much of the
-   * model's window the conversation occupies. Used tokens come from the
-   * newest message carrying `metadata.usage` (the AI SDK `messageMetadata`
-   * convention; Think merges it into message metadata as turns finish).
-   */
-  contextWindow?: {
-    maxTokens: number;
-    modelId?: string;
-  };
-  /** Override rendering per part; return `undefined` to fall back to the default part UI. */
-  renderPart?: (context: AgentChatRenderPartContext<MessageT>) => React.ReactNode | undefined;
-  /** Rendered after each message's parts — for actions, citations, and the like. */
-  renderMessageAfter?: (context: AgentChatRenderMessageContext<MessageT>) => React.ReactNode;
-}
-/**
- * Low-level transcript/composer surface used by `ThinkChat`: props in, no
- * 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.
- */
-declare function AgentChat<MessageT extends UIMessage = UIMessage>({
-  className,
-  messages,
-  status,
-  onSubmit,
-  onStop,
-  placeholder,
-  disabled,
-  emptyState,
-  composerTools,
-  composerAddMenuItems,
-  notice,
-  onRegenerate,
-  onApprovalResponse,
-  executionApprovals,
-  pendingApprovals: durableApprovals,
-  contextWindow,
-  renderPart,
-  renderMessageAfter,
-  ref
-}: AgentChatProps<MessageT> & {
-  ref?: React.Ref<HTMLDivElement>;
-}): React.JSX.Element;
-//#endregion
+import { a as AgentChatRenderPartContext, i as AgentChatRenderMessageContext, n as AgentChatPart, r as AgentChatProps, t as AgentChat } from "../AgentChat-403mckDG.js";
 export { AgentChat, AgentChatPart, AgentChatProps, AgentChatRenderMessageContext, AgentChatRenderPartContext };

package/dist/components/AgentChat.js

@@ -1,5 +1,5 @@
 import { t as cx } from "../class-names-9UtZwb0J.js";
-import { D as PlusIcon, O as RefreshIcon } from "../icons-BCNawx-T.js";
+import { O as PlusIcon, k as RefreshIcon } from "../icons-BAlTbWWP.js";
 import { Activity, ActivityContent, ActivityPanel, ActivityTrigger } from "./Activity.js";
 import { Context, ContextContent, ContextContentBody, ContextContentHeader, ContextTrigger, getContextUsage, getContextUsedTokens } from "./Context.js";
 import { MessageScroller, MessageScrollerButton, MessageScrollerContent, MessageScrollerItem, MessageScrollerProvider, MessageScrollerViewport } from "./MessageScroller.js";

package/dist/components/AgentConnection.d.ts

@@ -1,4 +1,4 @@
-import { McpServerCard, McpServerManualSetup } from "../utils/mcp-server-catalog.js";
+import { McpServerCard, McpServerManualSetup, McpServerSetupAuth } from "../utils/mcp-server-catalog.js";
 import * as React from "react";
 
 //#region src/components/AgentConnection.d.ts
@@ -38,6 +38,28 @@ type AgentConnectionPopoverProps = Omit<AgentConnectionPanelProps, "section"> &
 type McpServerSetupProps = {
   readonly setup: McpServerManualSetup;
 };
+type McpConnectorFormValues = {
+  readonly bearerToken?: string;
+  readonly clientId?: string;
+  readonly clientSecret?: string;
+  readonly name: string;
+  readonly scope?: string;
+  readonly url: string;
+};
+type McpConnectorFormDefaults = Partial<Pick<McpConnectorFormValues, "name" | "url">>;
+type McpConnectorFormProps = Omit<React.FormHTMLAttributes<HTMLFormElement>, "onSubmit" | "status"> & {
+  /** Authentication metadata that decides which credential fields render. */readonly auth?: McpServerSetupAuth; /** Label for the OAuth authorization button. */
+  readonly authorizeLabel?: string; /** Initial MCP name and URL values. */
+  readonly defaults?: McpConnectorFormDefaults; /** Pattern used to validate the MCP name field. */
+  readonly namePattern?: string; /** OAuth URL waiting for the user to authorize, when available. */
+  readonly pendingAuthUrl?: string | null; /** Read-only redirect URL shown for manual OAuth client setup. */
+  readonly redirectUrl?: string; /** Inline connection status announced politely to assistive tech. */
+  readonly status?: React.ReactNode; /** Label for the submit button. */
+  readonly submitLabel?: string; /** Label shown while submit is pending. */
+  readonly submittingLabel?: string; /** Called when the user starts OAuth authorization. */
+  readonly onAuthorize?: () => void | Promise<void>; /** Called with normalized connector values after native form validation passes. */
+  readonly onSubmit: (values: McpConnectorFormValues) => void | Promise<void>;
+};
 declare function Connection({
   fromX,
   fromY,
@@ -69,6 +91,25 @@ declare function AgentConnectionPanel({
 declare function McpServerSetup({
   setup
 }: McpServerSetupProps): React.JSX.Element;
+/** Collects MCP connector settings and optional credentials with native form validation. */
+declare function McpConnectorForm({
+  auth,
+  authorizeLabel,
+  className,
+  defaults,
+  namePattern,
+  pendingAuthUrl,
+  redirectUrl,
+  status,
+  submitLabel,
+  submittingLabel,
+  onAuthorize,
+  onSubmit,
+  ref,
+  ...props
+}: McpConnectorFormProps & {
+  ref?: React.Ref<HTMLFormElement>;
+}): React.JSX.Element;
 /**
  * Compact popover trigger for showing AgentConnectionPanel inline.
  */
@@ -77,4 +118,4 @@ declare function AgentConnectionPopover({
   ...props
 }: AgentConnectionPopoverProps): React.JSX.Element;
 //#endregion
-export { AgentConnectionCommand, AgentConnectionPanel, AgentConnectionPanelProps, AgentConnectionPopover, AgentConnectionPopoverProps, AgentConnectionTarget, Connection, ConnectionProps, McpServerSetup, McpServerSetupProps, NanitesAgentConnectionOptions, buildNanitesAgentConnectionCommands };
+export { AgentConnectionCommand, AgentConnectionPanel, AgentConnectionPanelProps, AgentConnectionPopover, AgentConnectionPopoverProps, AgentConnectionTarget, Connection, ConnectionProps, McpConnectorForm, McpConnectorFormDefaults, McpConnectorFormProps, McpConnectorFormValues, McpServerSetup, McpServerSetupProps, NanitesAgentConnectionOptions, buildNanitesAgentConnectionCommands };

package/dist/components/AgentConnection.js

@@ -1,14 +1,22 @@
 import { t as cx } from "../class-names-9UtZwb0J.js";
-import { y as LinkIcon } from "../icons-BCNawx-T.js";
+import { b as LinkIcon } from "../icons-BAlTbWWP.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-BK0sOAbV.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-D9koxDA7.js";
+import { Field } from "./Field.js";
+import { Form } from "./Form.js";
 import { DCR_MCP_SERVER_CARDS, MANUAL_MCP_SERVER_CARDS, getMcpServerIconSrc } from "../utils/mcp-server-catalog.js";
 import * as React from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/components/AgentConnection.tsx
 const DEFAULT_LOCAL_ORIGIN = "http://localhost:5173";
 const CONNECTION_CURVE_MIDPOINT = .5;
+const MCP_CONNECTOR_NAME_PATTERN = "[A-Za-z_$][A-Za-z0-9_$]*";
+const CUSTOM_AUTH_FIELDS = [{
+	inputType: "password",
+	label: "Bearer",
+	name: "bearerToken"
+}];
 function Connection({ fromX, fromY, toX, toY, ...props }) {
 	const controlX = fromX + (toX - fromX) * CONNECTION_CURVE_MIDPOINT;
 	return /* @__PURE__ */ jsxs("g", {
@@ -211,6 +219,149 @@ function McpServerSetup({ setup }) {
 		]
 	});
 }
+/** Collects MCP connector settings and optional credentials with native form validation. */
+function McpConnectorForm({ auth, authorizeLabel = "Authorize", className, defaults, namePattern = MCP_CONNECTOR_NAME_PATTERN, pendingAuthUrl, redirectUrl = "", status, submitLabel = "Connect MCP", submittingLabel = "Connecting", onAuthorize, onSubmit, ref, ...props }) {
+	const [submitting, setSubmitting] = React.useState(false);
+	const credentialFields = (auth?.fields ?? CUSTOM_AUTH_FIELDS).filter(isCredentialAuthField);
+	const redirectUrlField = auth?.fields.find((field) => field.name === "redirectUrl");
+	async function handleSubmit(event) {
+		event.preventDefault();
+		event.stopPropagation();
+		if (!event.currentTarget.reportValidity()) return;
+		setSubmitting(true);
+		try {
+			await onSubmit(readMcpConnectorFormValues(new FormData(event.currentTarget)));
+		} finally {
+			setSubmitting(false);
+		}
+	}
+	return /* @__PURE__ */ jsxs(Form, {
+		ref,
+		"aria-label": "MCP connector",
+		className: cx("agent-connect__mcp-form", className),
+		noValidate: false,
+		onSubmit: handleSubmit,
+		...props,
+		children: [
+			/* @__PURE__ */ jsxs(Field.Root, { children: [
+				/* @__PURE__ */ jsx(Field.Label, {
+					htmlFor: "mcpName",
+					children: "MCP name"
+				}),
+				/* @__PURE__ */ jsx(Field.Control, {
+					id: "mcpName",
+					name: "name",
+					pattern: namePattern,
+					required: true,
+					title: "Use a valid JavaScript identifier.",
+					defaultValue: defaults?.name ?? "localMcp"
+				}),
+				/* @__PURE__ */ jsx(Field.Error, {
+					match: "valueMissing",
+					children: "MCP name is required."
+				}),
+				/* @__PURE__ */ jsx(Field.Error, {
+					match: "patternMismatch",
+					children: "Use a valid JavaScript identifier."
+				})
+			] }),
+			/* @__PURE__ */ jsxs(Field.Root, { children: [
+				/* @__PURE__ */ jsx(Field.Label, {
+					htmlFor: "mcpUrl",
+					children: "MCP URL"
+				}),
+				/* @__PURE__ */ jsx(Field.Control, {
+					id: "mcpUrl",
+					name: "url",
+					placeholder: "http://127.0.0.1:8787/mcp",
+					required: true,
+					type: "url",
+					defaultValue: defaults?.url ?? ""
+				}),
+				/* @__PURE__ */ jsx(Field.Error, {
+					match: "valueMissing",
+					children: "MCP URL is required."
+				}),
+				/* @__PURE__ */ jsx(Field.Error, {
+					match: "typeMismatch",
+					children: "MCP URL must use http or https."
+				})
+			] }),
+			redirectUrlField ? /* @__PURE__ */ jsxs(Field.Root, { children: [/* @__PURE__ */ jsx(Field.Label, {
+				htmlFor: "mcpRedirectUrl",
+				children: redirectUrlField.label
+			}), /* @__PURE__ */ jsx(Field.Control, {
+				id: "mcpRedirectUrl",
+				name: "redirectUrl",
+				readOnly: true,
+				type: "url",
+				value: redirectUrl
+			})] }) : null,
+			credentialFields.map((authField) => /* @__PURE__ */ jsxs(Field.Root, { children: [
+				/* @__PURE__ */ jsx(Field.Label, {
+					htmlFor: `mcp-${authField.name}`,
+					children: authField.label
+				}),
+				/* @__PURE__ */ jsx(Field.Control, {
+					autoComplete: "off",
+					id: `mcp-${authField.name}`,
+					name: authField.name,
+					placeholder: authField.placeholder,
+					required: authField.required,
+					type: authField.inputType ?? "text"
+				}),
+				/* @__PURE__ */ jsxs(Field.Error, {
+					match: "valueMissing",
+					children: [authField.label, " is required."]
+				})
+			] }, authField.name)),
+			/* @__PURE__ */ jsxs("div", {
+				className: "agent-connect__mcp-form-actions",
+				children: [/* @__PURE__ */ jsx(Button, {
+					type: "submit",
+					size: "sm",
+					disabled: submitting,
+					children: submitting ? submittingLabel : submitLabel
+				}), pendingAuthUrl ? /* @__PURE__ */ jsx(Button, {
+					type: "button",
+					variant: "outline",
+					color: "neutral",
+					size: "sm",
+					onClick: () => {
+						onAuthorize?.();
+					},
+					children: authorizeLabel
+				}) : null]
+			}),
+			status ? /* @__PURE__ */ jsx("span", {
+				className: "agent-connect__mcp-form-status",
+				"aria-live": "polite",
+				children: status
+			}) : null
+		]
+	});
+}
+function readMcpConnectorFormValues(data) {
+	const bearerToken = readFormString(data, "bearerToken");
+	const clientId = readFormString(data, "clientId");
+	const clientSecret = readFormString(data, "clientSecret");
+	const scope = readFormString(data, "scope");
+	return {
+		...bearerToken ? { bearerToken } : {},
+		...clientId ? { clientId } : {},
+		...clientSecret ? { clientSecret } : {},
+		name: readFormString(data, "name"),
+		...scope ? { scope } : {},
+		url: readFormString(data, "url")
+	};
+}
+function readFormString(data, name) {
+	const value = data.get(name);
+	return typeof value === "string" ? value.trim() : "";
+}
+function isCredentialAuthField(field) {
+	return field.name !== "redirectUrl";
+}
 function renderMcpServerIcon(server) {
 	const src = getMcpServerIconSrc(server);
 	if (src) return /* @__PURE__ */ jsx(McpServerIconImage, {
@@ -261,4 +412,4 @@ function AgentConnectionPopover({ className, ...props }) {
 	}) })] });
 }
 //#endregion
-export { AgentConnectionPanel, AgentConnectionPopover, Connection, McpServerSetup, buildNanitesAgentConnectionCommands };
+export { AgentConnectionPanel, AgentConnectionPopover, Connection, McpConnectorForm, McpServerSetup, buildNanitesAgentConnectionCommands };

package/dist/components/Artifact.js

@@ -1,5 +1,5 @@
 import { t as cx } from "../class-names-9UtZwb0J.js";
-import { F as XIcon } from "../icons-BCNawx-T.js";
+import { I as XIcon } from "../icons-BAlTbWWP.js";
 import { Button } from "./Button.js";
 import { Tooltip, TooltipPopup, TooltipPortal, TooltipPositioner, TooltipTrigger } from "./Tooltip.js";
 import "react";

package/dist/components/BrowserLiveView.d.ts

@@ -1,47 +1,2 @@
-import * as React from "react";
-
-//#region src/components/BrowserLiveView.d.ts
-interface BrowserLiveViewProps extends React.HTMLAttributes<HTMLDivElement> {
-  /** Live View URL (Browser Run `devtoolsFrontendUrl`, e.g. live.browser.run). */
-  url: string;
-  /** Epoch ms after which the URL is dead (Browser Run mints ~5-minute links). */
-  expiresAt?: number;
-  /** The page the session was showing — used for the ended-state text. */
-  pageTitle?: string;
-  /**
-   * Shown once the link expires — pass the last screenshot the agent took
-   * (`<img>`) to keep the final frame on screen. Defaults to a quiet
-   * "Live view ended" state.
-   */
-  fallback?: React.ReactNode;
-}
-/**
- * Embeds a Browser Run Live View — a real-time, interactive view of the
- * agent's browser session. Links expire (~5 minutes), so the iframe swaps to
- * `fallback` (e.g. the last screenshot) once `expiresAt` passes. While the
- * hosted viewer connects, a quiet loading overlay hides the frame; if it
- * never loads, the view degrades to `fallback` or an unavailable state. An
- * expand button opens the same view in a fullscreen dialog.
- *
- * Where URLs come from (upstream: `agents/browser` in
- * github.com/cloudflare/agents — `BrowserLiveViewUrl`): the model calls
- * `cdp.getLiveViewUrl()` inside a `browser_execute` tool run, or the host
- * calls `connector.liveView()`/`sessionInfo()`. This package's chat rendering
- * derives the component automatically from links found in tool results.
- *
- * Styling rides `@mcp-b/react-components/styles` (browser-live-view.css),
- * which think-chat consumers load anyway.
- *
- * The iframe is unsandboxed by design: the hosted Live View UI needs scripts
- * and its own origin to stream the session. Only pass trusted Live View URLs.
- */
-declare function BrowserLiveView({
-  url,
-  expiresAt,
-  pageTitle,
-  fallback,
-  className,
-  ...props
-}: BrowserLiveViewProps): React.JSX.Element;
-//#endregion
+import { n as BrowserLiveViewProps, t as BrowserLiveView } from "../BrowserLiveView-ZktFZiMD.js";
 export { BrowserLiveView, BrowserLiveViewProps };

package/dist/components/BrowserLiveView.js

@@ -1,5 +1,5 @@
 import { t as cx } from "../class-names-9UtZwb0J.js";
-import { A as SpinnerIcon, b as MaximizeIcon } from "../icons-BCNawx-T.js";
+import { j as SpinnerIcon, x as MaximizeIcon } from "../icons-BAlTbWWP.js";
 import { Button } from "./Button.js";
 import { Dialog, DialogContent, DialogTitle } from "./Dialog.js";
 import { Badge } from "./Badge.js";

package/dist/components/BrowserReplay.d.ts

@@ -1,40 +1,2 @@
-import * as React from "react";
-
-//#region src/components/BrowserReplay.d.ts
-interface BrowserReplayProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "children"> {
-  /**
-   * rrweb events for one tab, e.g. one
-   * `BrowserRecording.events[targetId]` entry from Cloudflare Browser Run.
-   */
-  events: unknown[];
-  /** Start playing on mount. */
-  autoPlay?: boolean;
-}
-/**
- * Replays a completed Cloudflare Browser Run recording locally with rrweb.
- *
- * This is intentionally not derived from Think chat message parts. Live view
- * links and screenshots ride the `browser_execute` stream and belong to
- * `BrowserLiveView`; replay events are fetched after a session closes with
- * Browser Run's `getBrowserRecording()`. Upstream currently shapes those
- * recordings as `Record<targetId, unknown[]>`, where each array is plain rrweb
- * JSON for one tab. Playback happens in the viewer's browser through
- * `@rrweb/replay`; no replay service is contacted at playback time.
- *
- * Styling rides `@mcp-b/react-components/styles` (browser-replay.css), which
- * think-chat consumers load anyway.
- *
- * @see https://github.com/cloudflare/agents/tree/main/packages/agents/src/browser
- * @see https://github.com/rrweb-io/rrweb/tree/main/packages/%40rrweb/replay
- */
-declare function BrowserReplay({
-  className,
-  events,
-  autoPlay,
-  ref,
-  ...props
-}: BrowserReplayProps & {
-  ref?: React.Ref<HTMLDivElement>;
-}): React.JSX.Element;
-//#endregion
+import { n as BrowserReplayProps, t as BrowserReplay } from "../BrowserReplay-6G-mnwcn.js";
 export { BrowserReplay, BrowserReplayProps };

package/dist/components/BrowserReplay.js

@@ -1,5 +1,5 @@
 import { t as cx } from "../class-names-9UtZwb0J.js";
-import { E as PlayIcon, w as PauseIcon } from "../icons-BCNawx-T.js";
+import { D as PlayIcon, T as PauseIcon } from "../icons-BAlTbWWP.js";
 import { Button } from "./Button.js";
 import { Slider, SliderControl, SliderIndicator, SliderThumb, SliderTrack } from "./Slider.js";
 import * as React from "react";

package/dist/components/ChainOfThought.d.ts

@@ -1,5 +1,5 @@
 import { CollapsiblePanelProps, CollapsibleRootProps, CollapsibleTriggerProps } from "./Collapsible.js";
-import { _ as IconProps } from "../icons-BYpJY6L2.js";
+import { v as IconProps } from "../icons-BRI54ATJ.js";
 import * as React from "react";
 
 //#region src/components/ChainOfThought.d.ts

package/dist/components/ChainOfThought.js

@@ -1,6 +1,6 @@
 import { CollapsiblePanel, CollapsibleRoot, CollapsibleTrigger } from "./Collapsible.js";
 import { t as cx } from "../class-names-9UtZwb0J.js";
-import { A as SpinnerIcon, a as CheckIcon, c as ChevronRightIcon, u as DotIcon } from "../icons-BCNawx-T.js";
+import { a as CheckIcon, c as ChevronRightIcon, j as SpinnerIcon, u as DotIcon } from "../icons-BAlTbWWP.js";
 import "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/components/ChainOfThought.tsx

package/dist/components/ChatGptSignInScreen.d.ts

@@ -0,0 +1,38 @@
+import * as React from "react";
+
+//#region src/components/ChatGptSignInScreen.d.ts
+interface ChatGptSignInScreenProps extends React.HTMLAttributes<HTMLElement> {
+  /** Whether the sign-in request is currently opening ChatGPT. */
+  busy?: boolean;
+  /** Shows the sign-in action in its error state. */
+  error?: boolean;
+  /** Button label for the ChatGPT sign-in action. */
+  label?: string;
+  /** Main heading shown above the sign-in button. */
+  title?: string;
+  /** Brand name displayed under the heading. */
+  brandName?: string;
+  /** Brand mark displayed next to the brand name. */
+  brandLogo?: React.ReactNode;
+  /** Called when the user clicks the sign-in action. */
+  onSignIn?: () => void;
+}
+/** Full-screen ChatGPT authentication prompt for MCP-B onboarding. */
+declare function ChatGptSignInScreen({
+  busy,
+  error,
+  label,
+  title,
+  brandName,
+  brandLogo,
+  className,
+  onPointerLeave,
+  onPointerMove,
+  onSignIn,
+  ref,
+  ...props
+}: ChatGptSignInScreenProps & {
+  ref?: React.Ref<HTMLElement>;
+}): React.JSX.Element;
+//#endregion
+export { ChatGptSignInScreen, ChatGptSignInScreenProps };