@mcp-b/react-components 0.11.0 → 0.13.0

package/dist/components/Fieldset.d.ts

@@ -77,8 +77,8 @@ declare function FieldsetLegend({
  * <Fieldset.Root>
  *   <Fieldset.Legend>Notification Preferences</Fieldset.Legend>
  *   <CheckboxGroup>
- *     <label><Checkbox name="email" /> Email</label>
- *     <label><Checkbox name="sms" /> SMS</label>
+ *     <label><Checkbox.Root name="email" ><Checkbox.Indicator /></Checkbox.Root> Email</label>
+ *     <label><Checkbox.Root name="sms" ><Checkbox.Indicator /></Checkbox.Root> SMS</label>
  *   </CheckboxGroup>
  * </Fieldset.Root>
  * ```

package/dist/components/Fieldset.js

@@ -65,8 +65,8 @@ function FieldsetLegend({ className = "", ref, ...props }) {
 * <Fieldset.Root>
 *   <Fieldset.Legend>Notification Preferences</Fieldset.Legend>
 *   <CheckboxGroup>
-*     <label><Checkbox name="email" /> Email</label>
-*     <label><Checkbox name="sms" /> SMS</label>
+*     <label><Checkbox.Root name="email" ><Checkbox.Indicator /></Checkbox.Root> Email</label>
+*     <label><Checkbox.Root name="sms" ><Checkbox.Indicator /></Checkbox.Root> SMS</label>
 *   </CheckboxGroup>
 * </Fieldset.Root>
 * ```

package/dist/components/FileTree.js

@@ -1,2 +1,2 @@
-import { a as FileTreeIcon, i as FileTreeFolder, n as FileTreeActions, o as FileTreeName, r as FileTreeFile, t as FileTree } from "../FileTree-wMyZhhHO.js";
+import { a as FileTreeIcon, i as FileTreeFolder, n as FileTreeActions, o as FileTreeName, r as FileTreeFile, t as FileTree } from "../FileTree-mpEIcfzA.js";
 export { FileTree, FileTreeActions, FileTreeFile, FileTreeFolder, FileTreeIcon, FileTreeName };

package/dist/components/Label.d.ts

@@ -26,7 +26,7 @@ interface LabelProps extends React.LabelHTMLAttributes<HTMLLabelElement> {
  * <Input id="username" type="text" />
  *
  * <div style={{ display: 'flex', alignItems: 'center', gap: '0.5rem' }}>
- *   <Checkbox id="newsletter" />
+ *   <Checkbox.Root id="newsletter" ><Checkbox.Indicator /></Checkbox.Root>
  *   <Label htmlFor="newsletter">Subscribe to newsletter</Label>
  * </div>
  * ```

package/dist/components/Label.js

@@ -18,7 +18,7 @@ import { jsx } from "react/jsx-runtime";
 * <Input id="username" type="text" />
 *
 * <div style={{ display: 'flex', alignItems: 'center', gap: '0.5rem' }}>
-*   <Checkbox id="newsletter" />
+*   <Checkbox.Root id="newsletter" ><Checkbox.Indicator /></Checkbox.Root>
 *   <Label htmlFor="newsletter">Subscribe to newsletter</Label>
 * </div>
 * ```

package/dist/components/Marker.js

@@ -1,25 +1,11 @@
 import { t as cx } from "../class-names-9UtZwb0J.js";
+import { n as mergeRefs } from "../merge-refs-DF_7w2x_.js";
 import * as React from "react";
 import { jsx } from "react/jsx-runtime";
 //#region src/components/Marker.tsx
 function markerVariants({ variant = "default", className } = {}) {
 	return cx("marker", `marker--${variant ?? "default"}`, className);
 }
-function assignRef(ref, value) {
-	if (!ref) return;
-	if (typeof ref === "function") {
-		ref(value);
-		return;
-	}
-	ref.current = value;
-}
-function mergeRefs(...refs) {
-	const activeRefs = refs.filter(Boolean);
-	if (activeRefs.length === 0) return void 0;
-	return (value) => {
-		for (const activeRef of activeRefs) assignRef(activeRef, value);
-	};
-}
 function isEventHandler(propName, value) {
 	return /^on[A-Z]/.test(propName) && typeof value === "function";
 }

package/dist/components/McpServerPicker.d.ts

@@ -1,16 +1,30 @@
 import { McpServerCard } from "../utils/mcp-server-catalog.js";
 import * as React from "react";
+import { MCPServer, MCPServersState } from "agents";
 
 //#region src/components/McpServerPicker.d.ts
 interface McpServerPickerProps {
   /** MCP servers to show in the plus-menu picker. */
   servers: readonly McpServerCard[];
   /** Called when the user chooses a server; hosts own OAuth and connection state. */
-  onConnect: (server: McpServerCard) => void | Promise<void>;
+  onConnect?: (server: McpServerCard) => void | Promise<void>;
+  /** Upstream Agents SDK MCP state from `getMcpServers()` or `useAgent({ onMcpUpdate })`. */
+  mcp?: MCPServersState;
+  /** Called when an OAuth server needs user authorization. */
+  onAuthorize?: McpServerConnectionAction;
+  /** Called when a failed server should retry through an app-owned Agent RPC. */
+  onRetry?: McpServerConnectionAction;
+  /** Called when a ready/connected server should refresh discovery through an app-owned Agent RPC. */
+  onRefresh?: McpServerConnectionAction;
+  /** Called when a server transport should close but the stored config should remain. */
+  onDisconnect?: McpServerConnectionAction;
   /** Offset from the plus trigger to the menu, useful for prompt composers. */
   sideOffset?: number;
+  /** Accessible name for the plus trigger. */
+  triggerLabel?: string;
 }
-type McpServerPickerItemsProps = Pick<McpServerPickerProps, "servers" | "onConnect">;
+type McpServerConnectionAction = (serverId: string, server: MCPServer) => void | Promise<void>;
+type McpServerPickerItemsProps = Omit<McpServerPickerProps, "sideOffset" | "triggerLabel">;
 /**
  * Prompt plus-menu picker for choosing an MCP server and handing connection
  * work back to the host app.
@@ -18,11 +32,22 @@ type McpServerPickerItemsProps = Pick<McpServerPickerProps, "servers" | "onConne
 declare function McpServerPicker({
   servers,
   onConnect,
-  sideOffset
+  mcp,
+  onAuthorize,
+  onDisconnect,
+  onRefresh,
+  onRetry,
+  sideOffset,
+  triggerLabel
 }: McpServerPickerProps): React.JSX.Element;
 declare function McpServerPickerItems({
   servers,
-  onConnect
-}: McpServerPickerItemsProps): React.JSX.Element | React.JSX.Element[];
+  onConnect,
+  mcp,
+  onAuthorize,
+  onDisconnect,
+  onRefresh,
+  onRetry
+}: McpServerPickerItemsProps): React.JSX.Element;
 //#endregion
-export { McpServerPicker, McpServerPickerItems, McpServerPickerItemsProps, McpServerPickerProps };
+export { McpServerConnectionAction, McpServerPicker, McpServerPickerItems, McpServerPickerItemsProps, McpServerPickerProps };

package/dist/components/McpServerPicker.js

@@ -1,74 +1,98 @@
-import { F as WarningIcon, M as SpinnerIcon, O as PlusIcon, a as CheckIcon } from "../icons-D2Q5n5C1.js";
-import { Button } from "./Button.js";
-import { MenuContent, MenuGroup, MenuGroupLabel, MenuItem, MenuRoot, MenuShortcut, MenuTrigger } from "./Menu.js";
+import { A as RefreshIcon, C as MinusIcon, L as WarningIcon, N as SpinnerIcon, a as CheckIcon, b as LinkIcon } from "../icons-Ba9THQKz.js";
+import { Menu } from "./Menu.js";
+import { PromptInputActionMenuTrigger } from "./PromptInput.js";
 import { getMcpServerIconSrc } from "../utils/mcp-server-catalog.js";
 import * as React from "react";
-import { jsx, jsxs } from "react/jsx-runtime";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 //#region src/components/McpServerPicker.tsx
 /**
 * Prompt plus-menu picker for choosing an MCP server and handing connection
 * work back to the host app.
 */
-function McpServerPicker({ servers, onConnect, sideOffset = 80 }) {
+function McpServerPicker({ servers, onConnect, mcp, onAuthorize, onDisconnect, onRefresh, onRetry, sideOffset = 80, triggerLabel = "Add server" }) {
 	return /* @__PURE__ */ jsx("div", {
 		className: "mcp-server-picker",
-		children: /* @__PURE__ */ jsxs(MenuRoot, { children: [/* @__PURE__ */ jsx(MenuTrigger, { render: /* @__PURE__ */ jsx(Button, {
-			type: "button",
-			variant: "ghost",
-			color: "neutral",
-			size: "icon-xs",
+		children: /* @__PURE__ */ jsxs(Menu.Root, { children: [/* @__PURE__ */ jsx(PromptInputActionMenuTrigger, {
 			className: "mcp-server-picker__trigger",
-			"aria-label": "Add server",
-			children: /* @__PURE__ */ jsx(PlusIcon, {})
-		}) }), /* @__PURE__ */ jsx(MenuContent, {
+			"aria-label": triggerLabel
+		}), /* @__PURE__ */ jsx(Menu.Portal, { children: /* @__PURE__ */ jsx(Menu.Positioner, {
 			side: "top",
 			align: "start",
 			sideOffset,
 			collisionPadding: 8,
-			"aria-label": "Servers",
-			className: "mcp-server-picker__popup",
-			children: /* @__PURE__ */ jsx(McpServerPickerItems, {
-				servers,
-				onConnect
+			children: /* @__PURE__ */ jsx(Menu.Popup, {
+				tabIndex: 0,
+				"aria-label": "Servers",
+				className: "mcp-server-picker__popup",
+				children: /* @__PURE__ */ jsx(McpServerPickerItems, {
+					servers,
+					onConnect,
+					mcp,
+					onAuthorize,
+					onDisconnect,
+					onRefresh,
+					onRetry
+				})
 			})
-		})] })
+		}) })] })
 	});
 }
-function McpServerPickerItems({ servers, onConnect }) {
-	const groups = groupServers(servers);
-	const showHeadings = groups.some((group) => group.category);
-	if (servers.length === 0) return /* @__PURE__ */ jsx(MenuItem, {
+function McpServerPickerItems({ servers, onConnect, mcp, onAuthorize, onDisconnect, onRefresh, onRetry }) {
+	const [pendingAction, setPendingAction] = React.useState(null);
+	const rows = getPickerRows(servers, mcp);
+	async function runAction(action, serverId, server, handler) {
+		if (!handler) return;
+		setPendingAction(`${action}:${serverId}`);
+		try {
+			await handler(serverId, server);
+		} finally {
+			setPendingAction(null);
+		}
+	}
+	if (rows.length === 0) return /* @__PURE__ */ jsx(Menu.Item, {
 		disabled: true,
 		className: "mcp-server-picker__empty",
 		children: "No servers available."
 	});
-	return groups.map((group) => /* @__PURE__ */ jsxs(MenuGroup, {
-		className: "mcp-server-picker__group",
-		children: [showHeadings ? /* @__PURE__ */ jsx(MenuGroupLabel, { children: group.category || "Servers" }) : null, group.servers.map((server) => /* @__PURE__ */ jsx(McpServerPickerRow, {
-			server,
-			onConnect
-		}, server.id))]
-	}, group.category));
+	return /* @__PURE__ */ jsx(Fragment, { children: rows.map((server) => /* @__PURE__ */ jsx(McpServerPickerRow, {
+		mcp,
+		pendingAction,
+		server,
+		onAuthorize: (id, entry) => void runAction("authorize", id, entry, onAuthorize),
+		onConnect,
+		onDisconnect: (id, entry) => void runAction("disconnect", id, entry, onDisconnect),
+		onRefresh: (id, entry) => void runAction("refresh", id, entry, onRefresh),
+		onRetry: (id, entry) => void runAction("retry", id, entry, onRetry)
+	}, server.id)) });
 }
-function McpServerPickerRow({ server, onConnect }) {
+function McpServerPickerRow({ server, mcp, onConnect, onAuthorize, onDisconnect, onRefresh, onRetry, pendingAction }) {
 	const descriptionId = React.useId();
-	const statusText = server.statusLabel ?? getStatusLabel(server.status);
-	const busy = server.status === "connecting" || server.status === "authenticating" || server.status === "discovering";
-	const disabled = busy || server.status === "ready" || server.status === "connected";
-	return /* @__PURE__ */ jsxs(MenuItem, {
-		className: "mcp-server-picker__row",
-		closeOnClick: false,
-		"data-status": server.status,
-		disabled,
-		"aria-busy": busy || void 0,
-		"aria-describedby": server.description ? descriptionId : void 0,
-		onClick: disabled ? void 0 : () => void onConnect(server),
-		children: [
-			/* @__PURE__ */ jsx("span", {
+	const connected = getConnectedServerEntry(server, mcp);
+	const connectedServerId = connected?.[0];
+	const connectedServer = connected?.[1];
+	const derivedStatus = server.status ?? connectedServer?.state;
+	const statusText = server.statusLabel ?? getStatusLabel(derivedStatus);
+	const connectedState = derivedStatus === "ready" || derivedStatus === "connected";
+	const busy = derivedStatus === "connecting" || derivedStatus === "authenticating" || derivedStatus === "discovering";
+	const disabled = !onConnect || busy || Boolean(connectedServer) || derivedStatus === "ready" || derivedStatus === "connected";
+	const pending = (action) => Boolean(connectedServerId && pendingAction === `${action}:${connectedServerId}`);
+	const hasStatusIcon = connectedState || busy || derivedStatus === "failed" || derivedStatus === "needs-auth";
+	return /* @__PURE__ */ jsxs("div", {
+		className: "mcp-server-picker__row-shell",
+		"data-connection": connectedState ? "connected" : "disconnected",
+		"data-status": derivedStatus,
+		children: [/* @__PURE__ */ jsxs(Menu.Item, {
+			className: "mcp-server-picker__row",
+			closeOnClick: false,
+			"data-status": derivedStatus,
+			disabled,
+			"aria-busy": busy || void 0,
+			"aria-describedby": server.description ? descriptionId : void 0,
+			onClick: disabled ? void 0 : () => void onConnect(server),
+			children: [/* @__PURE__ */ jsx("span", {
 				className: "mcp-server-picker__icon",
 				children: renderIcon(server)
-			}),
-			/* @__PURE__ */ jsxs("span", {
+			}), /* @__PURE__ */ jsxs("span", {
 				className: "mcp-server-picker__copy",
 				children: [/* @__PURE__ */ jsx("span", {
 					className: "mcp-server-picker__name",
@@ -78,16 +102,56 @@ function McpServerPickerRow({ server, onConnect }) {
 					className: "mcp-server-picker__description",
 					children: server.description
 				}) : null]
-			}),
-			statusText ? /* @__PURE__ */ jsxs(MenuShortcut, {
-				className: "mcp-server-picker__meta",
-				title: statusText,
-				children: [/* @__PURE__ */ jsx(StatusIcon, { status: server.status }), /* @__PURE__ */ jsx("span", {
-					className: "mcp-server-picker__status-label",
-					children: statusText
-				})]
-			}) : null
-		]
+			})]
+		}), hasStatusIcon || connectedServer ? /* @__PURE__ */ jsxs("div", {
+			className: "mcp-server-picker__row-actions",
+			children: [
+				hasStatusIcon ? /* @__PURE__ */ jsxs("span", {
+					className: "mcp-server-picker__row-status",
+					title: statusText,
+					children: [/* @__PURE__ */ jsx(StatusIcon, { status: derivedStatus }), /* @__PURE__ */ jsx("span", {
+						className: "mcp-server-picker__status-label",
+						children: statusText
+					})]
+				}) : null,
+				connectedServer?.state === "authenticating" && connectedServerId && onAuthorize ? /* @__PURE__ */ jsx(McpServerActionItem, {
+					disabled: pending("authorize"),
+					icon: /* @__PURE__ */ jsx(LinkIcon, {}),
+					label: pending("authorize") ? `Opening ${server.name}` : `Authorize ${server.name}`,
+					onClick: () => onAuthorize(connectedServerId, connectedServer)
+				}) : null,
+				connectedServer?.state === "failed" && connectedServerId && onRetry ? /* @__PURE__ */ jsx(McpServerActionItem, {
+					disabled: pending("retry"),
+					icon: /* @__PURE__ */ jsx(RefreshIcon, {}),
+					label: pending("retry") ? `Retrying ${server.name}` : `Retry ${server.name}`,
+					onClick: () => onRetry(connectedServerId, connectedServer)
+				}) : null,
+				(connectedServer?.state === "ready" || connectedServer?.state === "connected") && connectedServerId && onRefresh ? /* @__PURE__ */ jsx(McpServerActionItem, {
+					disabled: pending("refresh"),
+					icon: /* @__PURE__ */ jsx(RefreshIcon, {}),
+					label: pending("refresh") ? `Reconnecting ${server.name}` : `Reconnect ${server.name}`,
+					onClick: () => onRefresh(connectedServerId, connectedServer)
+				}) : null,
+				(connectedServer?.state === "ready" || connectedServer?.state === "connected") && connectedServerId && onDisconnect ? /* @__PURE__ */ jsx(McpServerActionItem, {
+					disabled: pending("disconnect"),
+					icon: /* @__PURE__ */ jsx(MinusIcon, {}),
+					label: pending("disconnect") ? `Disconnecting ${server.name}` : `Disconnect ${server.name}`,
+					onClick: () => onDisconnect(connectedServerId, connectedServer)
+				}) : null
+			]
+		}) : null]
+	});
+}
+function McpServerActionItem({ disabled, icon, label, onClick }) {
+	return /* @__PURE__ */ jsxs(Menu.Item, {
+		className: "mcp-server-picker__action",
+		closeOnClick: false,
+		disabled,
+		onClick: disabled ? void 0 : () => void onClick(),
+		children: [icon, /* @__PURE__ */ jsx("span", {
+			className: "mcp-server-picker__status-label",
+			children: label
+		})]
 	});
 }
 function StatusIcon({ status }) {
@@ -109,6 +173,19 @@ function getStatusLabel(status) {
 	if (status === "discovering") return "Discovering";
 	return "";
 }
+function getConnectedServerEntry(card, mcp) {
+	if (!mcp) return void 0;
+	return Object.entries(mcp.servers).find(([serverId, entry]) => serverId === card.id || entry.server_url === card.url);
+}
+function getPickerRows(servers, mcp) {
+	if (!mcp) return [...servers];
+	const upstreamRows = Object.entries(mcp.servers).filter(([serverId, entry]) => !servers.some((server) => server.id === serverId || server.url === entry.server_url)).map(([serverId, entry]) => ({
+		id: serverId,
+		name: entry.name,
+		url: entry.server_url
+	}));
+	return [...servers, ...upstreamRows];
+}
 function renderIcon(server) {
 	const src = getMcpServerIconSrc(server);
 	if (src) return /* @__PURE__ */ jsx(IconImage, {
@@ -122,6 +199,9 @@ function renderIcon(server) {
 }
 function IconImage({ src, name }) {
 	const [failed, setFailed] = React.useState(false);
+	React.useEffect(() => {
+		setFailed(false);
+	}, [src]);
 	if (failed) return /* @__PURE__ */ jsx("span", {
 		className: "mcp-server-picker__fallback-icon",
 		children: name.slice(0, 1)
@@ -137,21 +217,5 @@ function IconImage({ src, name }) {
 		onError: () => setFailed(true)
 	});
 }
-function groupServers(servers) {
-	const groups = [];
-	for (const server of servers) {
-		const category = server.category ?? "";
-		let group = groups.find((candidate) => candidate.category === category);
-		if (!group) {
-			group = {
-				category,
-				servers: []
-			};
-			groups.push(group);
-		}
-		group.servers.push(server);
-	}
-	return groups;
-}
 //#endregion
 export { McpServerPicker, McpServerPickerItems };

package/dist/components/Menu.d.ts

@@ -1,2 +1,2 @@
-import { A as MenuRadioItemProps, B as MenuSubTrigger, C as MenuPositionerProps, D as MenuRadioItem, E as MenuRadioGroupProps, F as MenuShortcutProps, G as MenuTriggerProps, H as MenuSubmenuTrigger, I as MenuSub, L as MenuSubContent, M as MenuSeparator, N as MenuSeparatorProps, O as MenuRadioItemIndicator, P as MenuShortcut, R as MenuSubContentProps, S as MenuPositioner, T as MenuRadioGroup, U as MenuSubmenuTriggerProps, V as MenuSubTriggerProps, W as MenuTrigger, _ as MenuLabelProps, a as MenuCheckboxItemIndicator, b as MenuPortal, c as MenuContent, d as MenuGroupLabel, f as MenuGroupLabelProps, g as MenuLabel, h as MenuItemProps, i as MenuCheckboxItem, j as MenuRoot, k as MenuRadioItemIndicatorProps, l as MenuContentProps, m as MenuItem, n as MenuArrow, o as MenuCheckboxItemIndicatorProps, p as MenuGroupProps, r as MenuArrowProps, s as MenuCheckboxItemProps, t as Menu, u as MenuGroup, v as MenuPopup, w as MenuProps, x as MenuPortalProps, y as MenuPopupProps, z as MenuSubProps } from "../Menu-B5vDqZe_.js";
-export { Menu, MenuArrow, MenuArrowProps, MenuCheckboxItem, MenuCheckboxItemIndicator, MenuCheckboxItemIndicatorProps, MenuCheckboxItemProps, MenuContent, MenuContentProps, MenuGroup, MenuGroupLabel, MenuGroupLabelProps, MenuGroupProps, MenuItem, MenuItemProps, MenuLabel, MenuLabelProps, MenuPopup, MenuPopupProps, MenuPortal, MenuPortalProps, MenuPositioner, MenuPositionerProps, MenuProps, MenuRadioGroup, MenuRadioGroupProps, MenuRadioItem, MenuRadioItemIndicator, MenuRadioItemIndicatorProps, MenuRadioItemProps, MenuRoot, MenuSeparator, MenuSeparatorProps, MenuShortcut, MenuShortcutProps, MenuSub, MenuSubContent, MenuSubContentProps, MenuSubProps, MenuSubTrigger, MenuSubTriggerProps, MenuSubmenuTrigger, MenuSubmenuTriggerProps, MenuTrigger, MenuTriggerProps };
+import { _ as MenuSubmenuRootProps, a as MenuGroupLabelProps, b as MenuViewportProps, c as MenuPopupProps, d as MenuProps, f as MenuRadioGroupProps, g as MenuShortcutProps, h as MenuSeparatorProps, i as MenuCheckboxItemProps, l as MenuPortalProps, m as MenuRadioItemProps, n as MenuArrowProps, o as MenuGroupProps, p as MenuRadioItemIndicatorProps, r as MenuCheckboxItemIndicatorProps, s as MenuItemProps, t as Menu, u as MenuPositionerProps, v as MenuSubmenuTriggerProps, y as MenuTriggerProps } from "../Menu-Bgu-ufb5.js";
+export { Menu, MenuArrowProps, MenuCheckboxItemIndicatorProps, MenuCheckboxItemProps, MenuGroupLabelProps, MenuGroupProps, MenuItemProps, MenuPopupProps, MenuPortalProps, MenuPositionerProps, MenuProps, MenuRadioGroupProps, MenuRadioItemIndicatorProps, MenuRadioItemProps, MenuSeparatorProps, MenuShortcutProps, MenuSubmenuRootProps, MenuSubmenuTriggerProps, MenuTriggerProps, MenuViewportProps };

package/dist/components/Menu.js

@@ -1,5 +1,5 @@
-import * as React from "react";
-import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import "react";
+import { jsx } from "react/jsx-runtime";
 import { Menu as Menu$1 } from "@base-ui/react/menu";
 //#region src/components/Menu.tsx
 /**
@@ -31,11 +31,12 @@ const MenuRoot = (props) => {
 /**
 * Button that toggles the menu visibility.
 */
-function MenuTrigger({ className = "", ref, ...props }) {
-	const classes = ["menu__trigger", className].filter(Boolean).join(" ");
+function MenuTrigger({ className = "", unstyled = false, ref, ...props }) {
+	const classes = [!unstyled && "menu__trigger", className].filter(Boolean).join(" ");
 	return /* @__PURE__ */ jsx(Menu$1.Trigger, {
 		ref,
 		"data-slot": "dropdown-menu-trigger",
+		"data-unstyled": unstyled || void 0,
 		className: classes,
 		...props
 	});
@@ -53,7 +54,11 @@ const MenuPortal = (props) => {
 * Positions the menu popup relative to the trigger.
 */
 function MenuPositioner({ className = "", ref, ...props }) {
-	const classes = ["menu__positioner", className].filter(Boolean).join(" ");
+	const classes = [
+		"menu__positioner",
+		"base-ui-positioner",
+		className
+	].filter(Boolean).join(" ");
 	return /* @__PURE__ */ jsx(Menu$1.Positioner, {
 		ref,
 		"data-slot": "dropdown-menu-positioner",
@@ -65,7 +70,11 @@ function MenuPositioner({ className = "", ref, ...props }) {
 * Container for menu items.
 */
 function MenuPopup({ className = "", ref, ...props }) {
-	const classes = ["menu__popup", className].filter(Boolean).join(" ");
+	const classes = [
+		"menu__popup",
+		"base-ui-popup",
+		className
+	].filter(Boolean).join(" ");
 	return /* @__PURE__ */ jsx(Menu$1.Popup, {
 		ref,
 		"data-slot": "dropdown-menu-content",
@@ -73,22 +82,19 @@ function MenuPopup({ className = "", ref, ...props }) {
 		...props
 	});
 }
-function MenuContent({ anchor, positionMethod, side, sideOffset = 4, align, alignOffset, collisionBoundary, collisionPadding, sticky, arrowPadding, disableAnchorTracking, collisionAvoidance, ...props }) {
-	return /* @__PURE__ */ jsx(MenuPortal, { children: /* @__PURE__ */ jsx(MenuPositioner, {
-		anchor,
-		positionMethod,
-		side,
-		sideOffset,
-		align,
-		alignOffset,
-		collisionBoundary,
-		collisionPadding,
-		sticky,
-		arrowPadding,
-		disableAnchorTracking,
-		collisionAvoidance,
-		children: /* @__PURE__ */ jsx(MenuPopup, { ...props })
-	}) });
+/**
+* Transition container for content that changes as a menu moves between
+* triggers. Pair the adaptive classes from `base-ui-motion.css` with the
+* positioner, popup, and this viewport when that behavior is needed.
+*/
+function MenuViewport({ className = "", ref, ...props }) {
+	const classes = ["menu__viewport", className].filter(Boolean).join(" ");
+	return /* @__PURE__ */ jsx(Menu$1.Viewport, {
+		ref,
+		"data-slot": "dropdown-menu-viewport",
+		className: classes,
+		...props
+	});
 }
 /**
 * Interactive menu item.
@@ -137,7 +143,6 @@ function MenuGroupLabel({ className = "", inset, ref, ...props }) {
 		...props
 	});
 }
-const MenuLabel = MenuGroupLabel;
 /**
 * Arrow pointing to the trigger.
 */
@@ -177,14 +182,13 @@ function MenuRadioGroup({ className = "", ref, ...props }) {
 /**
 * Radio item for exclusive selection.
 */
-function MenuRadioItem({ className = "", children, ref, ...props }) {
+function MenuRadioItem({ className = "", ref, ...props }) {
 	const classes = ["menu__radio-item", className].filter(Boolean).join(" ");
 	return /* @__PURE__ */ jsx(Menu$1.RadioItem, {
 		ref,
 		"data-slot": "dropdown-menu-radio-item",
 		className: classes,
-		...props,
-		children: hasChildOfType(children, MenuRadioItemIndicator) ? children : /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(MenuRadioItemIndicator, {}), children] })
+		...props
 	});
 }
 /**
@@ -202,14 +206,13 @@ function MenuRadioItemIndicator({ className = "", ref, ...props }) {
 /**
 * Checkbox item for toggling options.
 */
-function MenuCheckboxItem({ className = "", children, ref, ...props }) {
+function MenuCheckboxItem({ className = "", ref, ...props }) {
 	const classes = ["menu__checkbox-item", className].filter(Boolean).join(" ");
 	return /* @__PURE__ */ jsx(Menu$1.CheckboxItem, {
 		ref,
 		"data-slot": "dropdown-menu-checkbox-item",
 		className: classes,
-		...props,
-		children: hasChildOfType(children, MenuCheckboxItemIndicator) ? children : /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(MenuCheckboxItemIndicator, {}), children] })
+		...props
 	});
 }
 /**
@@ -232,21 +235,12 @@ function MenuShortcut({ className = "", ref, ...props }) {
 		...props
 	});
 }
-function MenuSub(props) {
+function MenuSubmenuRoot(props) {
 	return /* @__PURE__ */ jsx(Menu$1.SubmenuRoot, {
 		"data-slot": "dropdown-menu-sub",
 		...props
 	});
 }
-function MenuSubContent({ side = "right", align, sideOffset = 4, ...props }) {
-	return /* @__PURE__ */ jsx(MenuContent, {
-		"data-slot": "dropdown-menu-sub-content",
-		side,
-		align,
-		sideOffset,
-		...props
-	});
-}
 /**
 * Trigger that opens a submenu.
 */
@@ -264,10 +258,6 @@ function MenuSubmenuTrigger({ className = "", inset, ref, ...props }) {
 		...props
 	});
 }
-const MenuSubTrigger = MenuSubmenuTrigger;
-function hasChildOfType(children, type) {
-	return React.Children.toArray(children).some((child) => React.isValidElement(child) && child.type === type);
-}
 /**
 * A dropdown menu with keyboard navigation support.
 * Provides items, groups, checkboxes, radio selections, and nested submenus.
@@ -310,17 +300,19 @@ function hasChildOfType(children, type) {
 *
 * @see {@link https://base-ui.com/react/components/menu | Base UI Menu}
 */
-const Menu = Object.assign(MenuRoot, {
+const Menu = {
+	createHandle: Menu$1.createHandle,
 	Root: MenuRoot,
 	Trigger: MenuTrigger,
 	Portal: MenuPortal,
 	Positioner: MenuPositioner,
 	Popup: MenuPopup,
-	Content: MenuContent,
+	Viewport: MenuViewport,
+	Backdrop: Menu$1.Backdrop,
 	Item: MenuItem,
 	Group: MenuGroup,
 	GroupLabel: MenuGroupLabel,
-	Label: MenuLabel,
+	LinkItem: Menu$1.LinkItem,
 	Arrow: MenuArrow,
 	Separator: MenuSeparator,
 	RadioGroup: MenuRadioGroup,
@@ -329,10 +321,8 @@ const Menu = Object.assign(MenuRoot, {
 	CheckboxItem: MenuCheckboxItem,
 	CheckboxItemIndicator: MenuCheckboxItemIndicator,
 	Shortcut: MenuShortcut,
-	Sub: MenuSub,
-	SubContent: MenuSubContent,
-	SubTrigger: MenuSubTrigger,
+	SubmenuRoot: MenuSubmenuRoot,
 	SubmenuTrigger: MenuSubmenuTrigger
-});
+};
 //#endregion
-export { Menu, MenuArrow, MenuCheckboxItem, MenuCheckboxItemIndicator, MenuContent, MenuGroup, MenuGroupLabel, MenuItem, MenuLabel, MenuPopup, MenuPortal, MenuPositioner, MenuRadioGroup, MenuRadioItem, MenuRadioItemIndicator, MenuRoot, MenuSeparator, MenuShortcut, MenuSub, MenuSubContent, MenuSubTrigger, MenuSubmenuTrigger, MenuTrigger };
+export { Menu };