@mcp-b/react-components 0.14.1 → 0.16.0

package/dist/components/AgentChatMessageEditor.js

@@ -0,0 +1,92 @@
+import { Button } from "./Button.js";
+import { Field } from "./Field.js";
+import { Form } from "./Form.js";
+import { Textarea } from "./Textarea.js";
+import * as React from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/components/AgentChatMessageEditor.tsx
+/**
+* Edit-and-resend form for a chat message. It composes the shared Base UI
+* Form/Field wrappers and Textarea recipe so validation, labels, focus, and
+* disabled states stay owned by the design-system primitives.
+*/
+function AgentChatMessageEditor({ message, originalText, onCancel, onSubmit, onSuccess }) {
+	const [draft, setDraft] = React.useState(originalText);
+	const [isSubmitting, setIsSubmitting] = React.useState(false);
+	const [error, setError] = React.useState();
+	const textareaRef = React.useRef(null);
+	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 onSubmit({
+				message,
+				text: trimmedDraft
+			});
+			onSuccess?.();
+		} catch {
+			setError("Message wasn’t resent. Try again.");
+			setIsSubmitting(false);
+		}
+	};
+	return /* @__PURE__ */ jsxs(Form, {
+		className: "message__edit-form",
+		"data-slot": "agent-chat-message-editor",
+		"aria-busy": isSubmitting,
+		onSubmit: (event) => void handleSubmit(event),
+		children: [/* @__PURE__ */ jsxs(Field.Root, {
+			name: "message",
+			invalid: Boolean(error),
+			disabled: isSubmitting,
+			children: [
+				/* @__PURE__ */ jsx(Field.Label, { children: "Edit message" }),
+				/* @__PURE__ */ jsx(Field.Control, {
+					render: /* @__PURE__ */ jsx(Textarea, {
+						ref: textareaRef,
+						className: "message__edit-textarea",
+						rows: 3
+					}),
+					value: draft,
+					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(Field.Error, { errors: [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"
+			})]
+		})]
+	});
+}
+//#endregion
+export { AgentChatMessageEditor };

package/dist/components/AgentChatTurnError.d.ts

@@ -0,0 +1,17 @@
+//#region src/components/AgentChatTurnError.d.ts
+interface AgentChatTurnErrorProps {
+  error: Error;
+  onDismiss: () => void;
+  onRetry?: () => void;
+}
+/**
+ * Recoverable turn failure for AgentChat-compatible surfaces. The message and
+ * actions remain one status unit while Button owns all interaction styling.
+ */
+declare function AgentChatTurnError({
+  error,
+  onDismiss,
+  onRetry
+}: AgentChatTurnErrorProps): import("react").JSX.Element;
+//#endregion
+export { AgentChatTurnError, AgentChatTurnErrorProps };

package/dist/components/AgentChatTurnError.js

@@ -0,0 +1,40 @@
+import { Button } from "./Button.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/components/AgentChatTurnError.tsx
+/**
+* Recoverable turn failure for AgentChat-compatible surfaces. The message and
+* actions remain one status unit while Button owns all interaction styling.
+*/
+function AgentChatTurnError({ error, onDismiss, onRetry }) {
+	return /* @__PURE__ */ jsxs("div", {
+		className: "agent-chat__turn-error",
+		"data-slot": "agent-chat-turn-error",
+		"data-tone": "danger",
+		children: [/* @__PURE__ */ jsxs("p", {
+			className: "agent-chat__turn-error-message",
+			children: [
+				/* @__PURE__ */ jsx("strong", { children: "Response failed." }),
+				" ",
+				error.message.trim() || "The response could not be completed."
+			]
+		}), /* @__PURE__ */ jsxs("div", {
+			className: "agent-chat__turn-error-actions",
+			children: [/* @__PURE__ */ jsx(Button, {
+				type: "button",
+				variant: "ghost",
+				color: "neutral",
+				size: "lg",
+				onClick: onDismiss,
+				children: "Dismiss"
+			}), onRetry ? /* @__PURE__ */ jsx(Button, {
+				type: "button",
+				color: "primary",
+				size: "lg",
+				onClick: onRetry,
+				children: "Try again"
+			}) : null]
+		})]
+	});
+}
+//#endregion
+export { AgentChatTurnError };

package/dist/components/AgentConnection.d.ts

@@ -1,4 +1,4 @@
-import { McpServerSetupAuth } from "../utils/mcp-server-catalog.js";
+import { McpServerSetupAuth, McpServerSetupAuthFieldName } from "../utils/mcp-server-catalog.js";
 import * as React from "react";
 
 //#region src/components/AgentConnection.d.ts
@@ -19,6 +19,7 @@ type ConnectionProps = React.SVGProps<SVGGElement> & {
 type NanitesAgentConnectionOptions = {
   readonly mcpName?: string;
   readonly pluginMarketplace?: string;
+  readonly codexPluginRef?: string;
   readonly claudePluginRef?: string;
   readonly skillName?: string;
 };
@@ -33,25 +34,20 @@ type AgentConnectionPanelProps = {
 type AgentConnectionPopoverProps = Omit<AgentConnectionPanelProps, "section"> & {
   readonly className?: string;
 };
-type McpConnectorFormValues = {
-  readonly bearerToken?: string;
-  readonly clientId?: string;
-  readonly clientSecret?: string;
+type CredentialFieldName = Exclude<McpServerSetupAuthFieldName, "redirectUrl">;
+type McpConnectorFormValues = Readonly<Partial<Record<CredentialFieldName, string>> & {
   readonly name: string;
-  readonly scope?: string;
   readonly url: string;
-};
+}>;
 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?: Partial<Pick<McpConnectorFormValues, "name" | "url">>; /** 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. */
+  /** Authentication metadata that decides which credential fields render. */readonly auth?: McpServerSetupAuth; /** Initial connector values. Publisher client credentials remain app-owned. */
+  readonly defaults?: Partial<McpConnectorFormValues>; /** Optional pattern used to validate the MCP name field. */
+  readonly namePattern?: string; /** Keep a catalog-owned MCP name and URL visible but immutable. */
+  readonly readOnlyServer?: boolean; /** 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 submittingLabel?: string; /** Called with normalized connector values after native form validation passes. */
   readonly onSubmit: (values: McpConnectorFormValues) => void | Promise<void>;
 };
 declare function Connection({
@@ -64,6 +60,7 @@ declare function Connection({
 declare function buildNanitesAgentConnectionCommands(origin: string, {
   mcpName,
   pluginMarketplace,
+  codexPluginRef,
   claudePluginRef,
   skillName
 }?: NanitesAgentConnectionOptions): readonly AgentConnectionCommand[];
@@ -83,16 +80,14 @@ declare function AgentConnectionPanel({
 /** Collects MCP connector settings and optional credentials with native form validation. */
 declare function McpConnectorForm({
   auth,
-  authorizeLabel,
   className,
   defaults,
   namePattern,
-  pendingAuthUrl,
+  readOnlyServer,
   redirectUrl,
   status,
   submitLabel,
   submittingLabel,
-  onAuthorize,
   onSubmit,
   ref,
   ...props

package/dist/components/AgentConnection.js

@@ -1,16 +1,16 @@
 import { t as cx } from "../class-names-9UtZwb0J.js";
-import { b as LinkIcon } from "../icons-Ba9THQKz.js";
-import { Popover } from "./Popover.js";
+import { C as LinkIcon } from "../icons-CpfUer49.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-BUFXG8HW.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 { CUSTOM_MCP_SERVER_CARD } 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",
@@ -43,7 +43,7 @@ function getBrowserOrigin() {
 function buildMcpUrl(origin) {
 	return `${origin.replace(/\/$/, "")}/mcp`;
 }
-function buildNanitesAgentConnectionCommands(origin, { mcpName = "nanites", pluginMarketplace = "WebMCP-org/nanites", claudePluginRef = "nanites@nanites", skillName = "nanites" } = {}) {
+function buildNanitesAgentConnectionCommands(origin, { mcpName = "nanites", pluginMarketplace = "WebMCP-org/nanites", codexPluginRef = "nanites@nanites", claudePluginRef = "nanites@nanites", skillName = "nanites" } = {}) {
 	const mcpUrl = buildMcpUrl(origin);
 	return [
 		{
@@ -55,6 +55,7 @@ function buildNanitesAgentConnectionCommands(origin, { mcpName = "nanites", plug
 				`NANITES_MCP_URL="${mcpUrl}"`,
 				"",
 				`codex plugin marketplace add ${pluginMarketplace}`,
+				`codex plugin add ${codexPluginRef}`,
 				`codex mcp add ${mcpName} --url "$NANITES_MCP_URL"`,
 				`codex mcp login ${mcpName}`
 			].join("\n")
@@ -154,106 +155,115 @@ function AgentConnectionPanel({ className, commands: commandsProp, defaultTarget
 	});
 }
 /** 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);
+function McpConnectorForm({ auth, className, defaults, namePattern, readOnlyServer = false, redirectUrl = "", status, submitLabel = "Connect MCP", submittingLabel = "Connecting", onSubmit, ref, ...props }) {
+	const [submission, setSubmission] = React.useState(null);
 	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);
+	async function handleSubmit(values) {
+		setSubmission(true);
 		try {
-			await onSubmit(readMcpConnectorFormValues(new FormData(event.currentTarget)));
-		} finally {
-			setSubmitting(false);
+			await onSubmit(readMcpConnectorFormValues(values));
+			setSubmission(null);
+		} catch (error) {
+			setSubmission(error instanceof Error ? error.message : String(error));
 		}
 	}
 	return /* @__PURE__ */ jsxs(Form, {
 		ref,
 		"aria-label": "MCP connector",
 		className: cx("agent-connect__mcp-form", className),
-		noValidate: false,
-		onSubmit: handleSubmit,
+		onFormSubmit: handleSubmit,
 		...props,
 		children: [
-			/* @__PURE__ */ jsxs(Field.Root, { children: [
-				/* @__PURE__ */ jsx(Field.Label, { children: "MCP name" }),
-				/* @__PURE__ */ jsx(Field.Control, {
-					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, { children: "MCP URL" }),
-				/* @__PURE__ */ jsx(Field.Control, {
-					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, { children: redirectUrlField.label }), /* @__PURE__ */ jsx(Field.Control, {
+			/* @__PURE__ */ jsxs(Field.Root, {
+				name: "name",
+				children: [
+					/* @__PURE__ */ jsx(Field.Label, { children: "MCP name" }),
+					/* @__PURE__ */ jsx(Field.Control, {
+						defaultValue: defaults?.name ?? CUSTOM_MCP_SERVER_CARD.id,
+						pattern: namePattern,
+						readOnly: readOnlyServer,
+						required: true,
+						title: namePattern ? "Use the required name format." : void 0
+					}),
+					/* @__PURE__ */ jsx(Field.Error, {
+						match: "valueMissing",
+						children: "MCP name is required."
+					}),
+					/* @__PURE__ */ jsx(Field.Error, {
+						match: "patternMismatch",
+						children: "Use the required name format."
+					})
+				]
+			}),
+			/* @__PURE__ */ jsxs(Field.Root, {
+				name: "url",
+				children: [
+					/* @__PURE__ */ jsx(Field.Label, { children: "MCP URL" }),
+					/* @__PURE__ */ jsx(Field.Control, {
+						defaultValue: defaults?.url ?? "",
+						placeholder: "http://127.0.0.1:8787/mcp",
+						readOnly: readOnlyServer,
+						required: true,
+						type: "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, {
 				name: "redirectUrl",
-				readOnly: true,
-				type: "url",
-				value: redirectUrl
-			})] }) : null,
-			credentialFields.map((authField) => /* @__PURE__ */ jsxs(Field.Root, { children: [
-				/* @__PURE__ */ jsx(Field.Label, { children: authField.label }),
-				/* @__PURE__ */ jsx(Field.Control, {
-					autoComplete: "off",
-					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", {
+				children: [/* @__PURE__ */ jsx(Field.Label, { children: redirectUrlField.label }), /* @__PURE__ */ jsx(Field.Control, {
+					readOnly: true,
+					type: "url",
+					value: redirectUrl
+				})]
+			}) : null,
+			credentialFields.length > 0 ? /* @__PURE__ */ jsxs(Field.Set, { children: [/* @__PURE__ */ jsx(Field.Legend, {
+				variant: "label",
+				children: auth?.label ?? "Credentials"
+			}), /* @__PURE__ */ jsx(Field.Group, { children: credentialFields.map((authField) => /* @__PURE__ */ jsxs(Field.Root, {
+				name: authField.name,
+				children: [
+					/* @__PURE__ */ jsx(Field.Label, { children: authField.label }),
+					/* @__PURE__ */ jsx(Field.Control, {
+						autoComplete: "off",
+						defaultValue: defaults?.[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)) })] }) : null,
+			/* @__PURE__ */ jsx("div", {
 				className: "agent-connect__mcp-form-actions",
-				children: [/* @__PURE__ */ jsx(Button, {
+				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]
+					disabled: submission === true,
+					focusableWhenDisabled: submission === true,
+					children: submission === true ? submittingLabel : submitLabel
+				})
 			}),
-			status ? /* @__PURE__ */ jsx("span", {
+			typeof submission === "string" ? /* @__PURE__ */ jsx("span", {
+				className: "agent-connect__mcp-form-status",
+				"aria-atomic": "true",
+				role: "alert",
+				children: submission
+			}) : status ? /* @__PURE__ */ jsx("span", {
 				className: "agent-connect__mcp-form-status",
-				"aria-live": "polite",
+				"aria-atomic": "true",
+				role: "status",
 				children: status
 			}) : null
 		]
@@ -263,18 +273,16 @@ 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);
+	const value = data[name];
 	return typeof value === "string" ? value.trim() : "";
 }
 function isCredentialAuthField(field) {

package/dist/components/AppFrame.d.ts

@@ -0,0 +1,24 @@
+import * as React from "react";
+
+//#region src/components/AppFrame.d.ts
+declare function Root({
+  className,
+  ref,
+  ...props
+}: React.HTMLAttributes<HTMLDivElement> & {
+  ref?: React.Ref<HTMLDivElement>;
+}): React.JSX.Element;
+declare function Body({
+  className,
+  ref,
+  ...props
+}: React.HTMLAttributes<HTMLDivElement> & {
+  ref?: React.Ref<HTMLDivElement>;
+}): React.JSX.Element;
+/** Full-height application frame with a fixed chrome row and contained work surface. */
+declare const AppFrame: {
+  Root: typeof Root;
+  Body: typeof Body;
+};
+//#endregion
+export { AppFrame };

package/dist/components/AppFrame.js

@@ -0,0 +1,25 @@
+import { t as cx } from "../class-names-9UtZwb0J.js";
+import "react";
+import { jsx } from "react/jsx-runtime";
+//#region src/components/AppFrame.tsx
+function Root({ className, ref, ...props }) {
+	return /* @__PURE__ */ jsx("div", {
+		ref,
+		className: cx("app-frame", className),
+		...props
+	});
+}
+function Body({ className, ref, ...props }) {
+	return /* @__PURE__ */ jsx("div", {
+		ref,
+		className: cx("app-frame__body", className),
+		...props
+	});
+}
+/** Full-height application frame with a fixed chrome row and contained work surface. */
+const AppFrame = {
+	Root,
+	Body
+};
+//#endregion
+export { AppFrame };

package/dist/components/AppTopBar.d.ts

@@ -0,0 +1,71 @@
+import { Toolbar, ToolbarButtonProps, ToolbarGroupProps } from "./Toolbar.js";
+import * as React from "react";
+
+//#region src/components/AppTopBar.d.ts
+interface AppTopBarRootProps extends React.ComponentPropsWithoutRef<typeof Toolbar.Root> {
+  /** Accessible name describing the controls in this application bar. */
+  "aria-label": string;
+}
+interface AppTopBarGroupProps extends ToolbarGroupProps {}
+interface AppTopBarTitleProps extends React.HTMLAttributes<HTMLDivElement> {}
+interface AppTopBarButtonProps extends Omit<ToolbarButtonProps, "aria-label"> {
+  /** 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 {}
+/**
+ * Stable application-level toolbar with composable leading, title, and trailing
+ * slots. Descendant buttons share Base UI's roving focus and tooltip provider.
+ */
+declare function AppTopBarRoot({
+  children,
+  className,
+  ...props
+}: AppTopBarRootProps): React.JSX.Element;
+declare function AppTopBarLeading({
+  className,
+  ...props
+}: AppTopBarGroupProps): React.JSX.Element;
+declare function AppTopBarTitle({
+  className,
+  ref,
+  ...props
+}: AppTopBarTitleProps & {
+  ref?: React.Ref<HTMLDivElement>;
+}): React.JSX.Element;
+declare function AppTopBarTrailing({
+  className,
+  ...props
+}: AppTopBarGroupProps): React.JSX.Element;
+declare function AppTopBarControl({
+  className,
+  ...props
+}: AppTopBarControlProps): React.JSX.Element;
+declare function AppTopBarButton({
+  children,
+  className,
+  disabled,
+  label,
+  render,
+  tooltip,
+  ...props
+}: AppTopBarButtonProps): React.JSX.Element;
+/**
+ * Composable application top bar with stable leading, title, and trailing
+ * slots. Icon controls use shared Toolbar roving focus and coordinated Tooltip
+ * behavior; their fixed slots do not resize when state icons change. Render an
+ * existing behavior-rich button through `Control` to retain those toolbar
+ * semantics without rebuilding the control.
+ */
+declare const AppTopBar: {
+  Root: typeof AppTopBarRoot;
+  Leading: typeof AppTopBarLeading;
+  Title: typeof AppTopBarTitle;
+  Trailing: typeof AppTopBarTrailing;
+  Control: typeof AppTopBarControl;
+  Button: typeof AppTopBarButton;
+};
+//#endregion
+export { AppTopBar, AppTopBarButtonProps, AppTopBarControlProps, AppTopBarGroupProps, AppTopBarRootProps, AppTopBarTitleProps };