@mcp-b/react-components 0.16.1 → 0.18.0

package/dist/components/Field.js

@@ -1,3 +1,4 @@
+import { n as mergeBaseClassName, t as cx } from "../class-names-BiMDVpUo.js";
 import "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { Field as Field$1 } from "@base-ui/react/field";
@@ -17,12 +18,8 @@ import { Field as Field$1 } from "@base-ui/react/field";
 *
 * @see {@link https://base-ui.com/react/components/field | Base UI Field}
 */
-function FieldRoot({ className = "", orientation = "vertical", ref, ...props }) {
-	const classes = [
-		"field",
-		orientation !== "vertical" && `field--${orientation}`,
-		className
-	].filter(Boolean).join(" ");
+function FieldRoot({ className, orientation = "vertical", ref, ...props }) {
+	const classes = mergeBaseClassName(["field", orientation !== "vertical" && `field--${orientation}`].filter(Boolean).join(" "), className);
 	return /* @__PURE__ */ jsx(Field$1.Root, {
 		ref,
 		role: "group",
@@ -44,8 +41,8 @@ function FieldRoot({ className = "", orientation = "vertical", ref, ...props })
 * </Field.Root>
 * ```
 */
-function FieldLabel({ className = "", ref, ...props }) {
-	const classes = ["field__label", className].filter(Boolean).join(" ");
+function FieldLabel({ className, ref, ...props }) {
+	const classes = mergeBaseClassName("field__label", className);
 	return /* @__PURE__ */ jsx(Field$1.Label, {
 		ref,
 		"data-slot": "field-label",
@@ -66,8 +63,8 @@ function FieldLabel({ className = "", ref, ...props }) {
 * <Field.Control render={<Textarea />} />
 * ```
 */
-function FieldControl({ className = "", ref, ...props }) {
-	const classes = ["field__control", className].filter(Boolean).join(" ");
+function FieldControl({ className, ref, ...props }) {
+	const classes = mergeBaseClassName("field__control", className);
 	return /* @__PURE__ */ jsx(Field$1.Control, {
 		ref,
 		"data-slot": "field-control",
@@ -88,8 +85,8 @@ function FieldControl({ className = "", ref, ...props }) {
 * </Field.Root>
 * ```
 */
-function FieldDescription({ className = "", ref, ...props }) {
-	const classes = ["field__description", className].filter(Boolean).join(" ");
+function FieldDescription({ className, ref, ...props }) {
+	const classes = mergeBaseClassName("field__description", className);
 	return /* @__PURE__ */ jsx(Field$1.Description, {
 		ref,
 		"data-slot": "field-description",
@@ -120,16 +117,21 @@ function FieldDescription({ className = "", ref, ...props }) {
 * - `rangeUnderflow` - Number is less than `min`
 * - `rangeOverflow` - Number is greater than `max`
 */
-function FieldError({ className = "", errors, children, ref, ...props }) {
-	const classes = ["field__error", className].filter(Boolean).join(" ");
-	if (errors === void 0) return /* @__PURE__ */ jsx(Field$1.Error, {
+function FieldError({ className, children, ref, ...props }) {
+	const classes = mergeBaseClassName("field__error", className);
+	return /* @__PURE__ */ jsx(Field$1.Error, {
 		ref,
 		"data-slot": "field-error",
 		className: classes,
 		...props,
 		children
 	});
-	const messages = [...new Set(errors.map((error) => typeof error === "string" ? error : error?.message).filter(Boolean))];
+}
+function FieldErrors({ className = "", errors, children, ref, ...props }) {
+	const messages = [...new Set(errors.flatMap((error) => {
+		const message = typeof error === "string" ? error : error?.message;
+		return message ? [message] : [];
+	}))];
 	const content = children ?? (messages.length === 1 ? messages[0] : messages.length > 1 ? /* @__PURE__ */ jsx("ul", {
 		className: "field__error-list",
 		children: messages.map((message) => /* @__PURE__ */ jsx("li", { children: message }, message))
@@ -139,7 +141,7 @@ function FieldError({ className = "", errors, children, ref, ...props }) {
 		ref,
 		role: "alert",
 		"data-slot": "field-error",
-		className: classes,
+		className: cx("field__error", className),
 		...props,
 		children: content
 	});
@@ -260,6 +262,7 @@ const Field = {
 	Control: FieldControl,
 	Description: FieldDescription,
 	Error: FieldError,
+	Errors: FieldErrors,
 	Item: Field$1.Item,
 	Validity: Field$1.Validity,
 	Set: FieldSet,

package/dist/components/Fieldset.d.ts

@@ -5,19 +5,14 @@ import { Fieldset as Fieldset$1 } from "@base-ui/react/fieldset";
 /**
  * Props for the Fieldset.Root component.
  */
-interface FieldsetRootProps extends Omit<React.ComponentPropsWithoutRef<typeof Fieldset$1.Root>, "className"> {
-  /** Additional CSS class names */
-  className?: string;
+interface FieldsetRootProps extends React.ComponentPropsWithoutRef<typeof Fieldset$1.Root> {
   /** Visual treatment for the field group. */
   variant?: "outlined" | "plain";
 }
 /**
  * Props for the Fieldset.Legend component.
  */
-interface FieldsetLegendProps extends Omit<React.ComponentPropsWithoutRef<typeof Fieldset$1.Legend>, "className"> {
-  /** Additional CSS class names */
-  className?: string;
-}
+interface FieldsetLegendProps extends React.ComponentPropsWithoutRef<typeof Fieldset$1.Legend> {}
 interface FieldsetDescriptionProps extends React.HTMLAttributes<HTMLParagraphElement> {}
 /**
  * Groups the fieldset legend and associated fields.

package/dist/components/Fieldset.js

@@ -1,3 +1,4 @@
+import { n as mergeBaseClassName } from "../class-names-BiMDVpUo.js";
 import "react";
 import { jsx } from "react/jsx-runtime";
 import { Fieldset as Fieldset$1 } from "@base-ui/react/fieldset";
@@ -19,8 +20,8 @@ import { Fieldset as Fieldset$1 } from "@base-ui/react/fieldset";
 *
 * @see {@link https://base-ui.com/react/components/fieldset | Base UI Fieldset}
 */
-function FieldsetRoot({ className = "", ref, variant = "outlined", ...props }) {
-	const classes = ["fieldset", className].filter(Boolean).join(" ");
+function FieldsetRoot({ className, ref, variant = "outlined", ...props }) {
+	const classes = mergeBaseClassName(["fieldset"].filter(Boolean).join(" "), className);
 	return /* @__PURE__ */ jsx(Fieldset$1.Root, {
 		ref,
 		className: classes,
@@ -32,18 +33,18 @@ function FieldsetRoot({ className = "", ref, variant = "outlined", ...props }) {
 * Accessible label for the fieldset, automatically associated with it.
 * Renders a `<div>` element (styled as legend).
 */
-function FieldsetLegend({ className = "", ref, ...props }) {
-	const classes = ["fieldset__legend", className].filter(Boolean).join(" ");
+function FieldsetLegend({ className, ref, ...props }) {
+	const classes = mergeBaseClassName(["fieldset__legend"].filter(Boolean).join(" "), className);
 	return /* @__PURE__ */ jsx(Fieldset$1.Legend, {
 		ref,
 		className: classes,
 		...props
 	});
 }
-function FieldsetDescription({ className = "", ref, ...props }) {
+function FieldsetDescription({ className, ref, ...props }) {
 	return /* @__PURE__ */ jsx("p", {
 		ref,
-		className: ["fieldset__description", className].filter(Boolean).join(" "),
+		className: mergeBaseClassName(["fieldset__description"].filter(Boolean).join(" "), className),
 		...props
 	});
 }

package/dist/components/FileTree.d.ts

@@ -2,6 +2,8 @@ import * as React from "react";
 
 //#region src/components/FileTree.d.ts
 interface FileTreeProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "onSelect"> {
+  /** Visual treatment for the tree container. Plain trees inherit their surrounding canvas. */
+  appearance?: "contained" | "plain";
   /** Set of folder paths that should be expanded. Controlled mode. */
   expanded?: Set<string>;
   /** Initial set of expanded folder paths. Uncontrolled mode. */
@@ -33,6 +35,7 @@ interface FileTreeProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "onSe
  * ```
  */
 declare function FileTree({
+  appearance,
   className,
   "aria-label": ariaLabel,
   expanded,
@@ -70,6 +73,8 @@ interface FileTreeFileProps extends React.HTMLAttributes<HTMLLIElement> {
   name: string;
   /** Optional custom icon; defaults to a generic file icon. */
   icon?: React.ReactNode;
+  /** App-owned anchor or router Link when selecting the file navigates. */
+  render?: React.ReactElement;
   /** Depth level, auto-set by parent folder. */
   level?: number;
 }
@@ -78,6 +83,7 @@ declare function FileTreeFile({
   path,
   name,
   icon,
+  render,
   level,
   ref,
   ...props

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-CkVbIMWV.js";
+import { a as FileTreeIcon, i as FileTreeFolder, n as FileTreeActions, o as FileTreeName, r as FileTreeFile, t as FileTree } from "../FileTree-3zYtrddG.js";
 export { FileTree, FileTreeActions, FileTreeFile, FileTreeFolder, FileTreeIcon, FileTreeName };

package/dist/components/Form.d.ts

@@ -5,10 +5,7 @@ import { Form as Form$1 } from "@base-ui/react/form";
 /**
  * Props for the Form component.
  */
-interface FormProps extends Omit<React.ComponentPropsWithoutRef<typeof Form$1>, "className"> {
-  /** Additional CSS class names */
-  className?: string;
-}
+interface FormProps extends React.ComponentPropsWithoutRef<typeof Form$1> {}
 /**
  * A form component that provides consolidated error handling and validation
  * for form controls. Works seamlessly with the Field component.

package/dist/components/Form.js

@@ -1,3 +1,4 @@
+import { n as mergeBaseClassName } from "../class-names-BiMDVpUo.js";
 import "react";
 import { jsx } from "react/jsx-runtime";
 import { Form as Form$1 } from "@base-ui/react/form";
@@ -76,11 +77,11 @@ import { Form as Form$1 } from "@base-ui/react/form";
 *
 * @see {@link https://base-ui.com/react/components/form | Base UI Form}
 */
-function Form({ className = "", ref, ...props }) {
+function Form({ className, ref, ...props }) {
 	return /* @__PURE__ */ jsx(Form$1, {
 		ref,
 		"data-slot": "form",
-		className: ["form", className].filter(Boolean).join(" "),
+		className: mergeBaseClassName(["form"].filter(Boolean).join(" "), className),
 		...props
 	});
 }

package/dist/components/GithubMotionMark.js

@@ -1,4 +1,4 @@
-import { t as cx } from "../class-names-9UtZwb0J.js";
+import { t as cx } from "../class-names-BiMDVpUo.js";
 import { jsx } from "react/jsx-runtime";
 //#region src/components/GithubMotionMark.tsx
 /**

package/dist/components/IconButton.d.ts

@@ -1,8 +1,7 @@
-import { i as ButtonSize, r as ButtonProps } from "../Button-FX_hpqxm.js";
+import { i as ButtonSize, r as ButtonProps } from "../Button-DLGzHsjc.js";
 import * as React from "react";
 
 //#region src/components/IconButton.d.ts
-type IconButtonSize = Extract<ButtonSize, "icon" | "icon-xs" | "icon-sm" | "icon-lg">;
 interface IconButtonProps extends Omit<ButtonProps, "aria-label" | "children" | "size"> {
   /** Decorative icon rendered inside the square button. */
   children: React.ReactNode;
@@ -13,7 +12,7 @@ interface IconButtonProps extends Omit<ButtonProps, "aria-label" | "children" |
   /** Preferred side for the tooltip. */
   tooltipSide?: "top" | "right" | "bottom" | "left";
   /** Square button size. */
-  size?: IconButtonSize;
+  size?: ButtonSize;
 }
 /**
  * A square, icon-only button with a required accessible name and matching

package/dist/components/IconButton.js

@@ -8,11 +8,12 @@ import { jsx, jsxs } from "react/jsx-runtime";
 * tooltip. Use text buttons for actions whose consequence an icon cannot make
 * clear on its own.
 */
-function IconButton({ children, label, size = "icon-sm", tooltip = label, tooltipSide = "top", type = "button", ...props }) {
+function IconButton({ children, label, size = "sm", tooltip = label, tooltipSide = "top", type = "button", ...props }) {
 	return /* @__PURE__ */ jsxs(Tooltip.Root, { children: [/* @__PURE__ */ jsx(Tooltip.Trigger, {
 		render: /* @__PURE__ */ jsx(Button, {
 			type,
 			size,
+			iconOnly: true,
 			"aria-label": label,
 			...props
 		}),

package/dist/components/InlineCitation.d.ts

@@ -0,0 +1,66 @@
+import * as React from "react";
+import { SourceDocumentUIPart, SourceUrlUIPart } from "ai";
+
+//#region src/components/InlineCitation.d.ts
+interface InlineCitationProps extends React.ComponentPropsWithoutRef<"span"> {
+  /** Claim text and citations placed beside it by the consuming application. */
+  children?: React.ReactNode;
+}
+/**
+ * Keeps claim text and an app-placed citation in one inline presentation group.
+ *
+ * AI SDK source parts do not include text offsets. The app must place this
+ * component beside the claim it supports; this component never parses message
+ * text or guesses an anchor position.
+ *
+ * @see ../../node_modules/ai/src/ui/ui-messages.ts (`SourceUrlUIPart`,
+ * `SourceDocumentUIPart`)
+ * @see https://elements.ai-sdk.dev/components/inline-citation
+ */
+declare function InlineCitation({
+  className,
+  ref,
+  ...props
+}: InlineCitationProps & {
+  ref?: React.Ref<HTMLSpanElement>;
+}): React.JSX.Element;
+interface InlineCitationTextProps extends React.ComponentPropsWithoutRef<"span"> {}
+/** Claim text whose citation is placed by the consuming app. */
+declare function InlineCitationText({
+  className,
+  ref,
+  ...props
+}: InlineCitationTextProps & {
+  ref?: React.Ref<HTMLSpanElement>;
+}): React.JSX.Element;
+interface InlineCitationCardProps extends React.ComponentPropsWithoutRef<"div"> {}
+/** Compact presentation container for citation details inside an existing overlay. */
+declare function InlineCitationCard({
+  className,
+  ref,
+  ...props
+}: InlineCitationCardProps & {
+  ref?: React.Ref<HTMLDivElement>;
+}): React.JSX.Element;
+interface InlineCitationSourceProps extends Omit<React.ComponentPropsWithoutRef<"span">, "children"> {
+  /** The complete AI SDK source part. It is consumed directly without normalization. */
+  source: SourceUrlUIPart | SourceDocumentUIPart;
+  /** Optional presentation-owned citation number. It is not part of the source model. */
+  index?: number;
+}
+/**
+ * Adapts a whole AI SDK URL or document source part to an inline citation.
+ * URL sources use a safe external link and PreviewCard. Document sources have
+ * no URL, so they use a Popover button and never fabricate a download target.
+ */
+declare function InlineCitationSource({
+  source,
+  index,
+  className,
+  ref,
+  ...props
+}: InlineCitationSourceProps & {
+  ref?: React.Ref<HTMLSpanElement>;
+}): React.JSX.Element;
+//#endregion
+export { InlineCitation, InlineCitationCard, InlineCitationCardProps, InlineCitationProps, InlineCitationSource, InlineCitationSourceProps, InlineCitationText, InlineCitationTextProps };

package/dist/components/InlineCitation.js

@@ -0,0 +1,142 @@
+import { t as cx } from "../class-names-BiMDVpUo.js";
+import { Popover } from "./Popover.js";
+import { PreviewCard } from "./PreviewCard.js";
+import "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/components/InlineCitation.tsx
+/**
+* Keeps claim text and an app-placed citation in one inline presentation group.
+*
+* AI SDK source parts do not include text offsets. The app must place this
+* component beside the claim it supports; this component never parses message
+* text or guesses an anchor position.
+*
+* @see ../../node_modules/ai/src/ui/ui-messages.ts (`SourceUrlUIPart`,
+* `SourceDocumentUIPart`)
+* @see https://elements.ai-sdk.dev/components/inline-citation
+*/
+function InlineCitation({ className, ref, ...props }) {
+	return /* @__PURE__ */ jsx("span", {
+		ref,
+		"data-slot": "inline-citation",
+		className: cx("inline-citation", className),
+		...props
+	});
+}
+/** Claim text whose citation is placed by the consuming app. */
+function InlineCitationText({ className, ref, ...props }) {
+	return /* @__PURE__ */ jsx("span", {
+		ref,
+		"data-slot": "inline-citation-text",
+		className: cx("inline-citation__text", className),
+		...props
+	});
+}
+/** Compact presentation container for citation details inside an existing overlay. */
+function InlineCitationCard({ className, ref, ...props }) {
+	return /* @__PURE__ */ jsx("div", {
+		ref,
+		"data-slot": "inline-citation-card",
+		className: cx("inline-citation__card", className),
+		...props
+	});
+}
+/**
+* Adapts a whole AI SDK URL or document source part to an inline citation.
+* URL sources use a safe external link and PreviewCard. Document sources have
+* no URL, so they use a Popover button and never fabricate a download target.
+*/
+function InlineCitationSource({ source, index, className, ref, ...props }) {
+	const visibleLabel = index == null ? defaultLabel(source) : `[${index}]`;
+	const accessibleName = `${visibleLabel}: ${source.title || visibleLabel}`;
+	if (source.type === "source-url") {
+		const href = safeSourceUrl(source.url);
+		if (href) return /* @__PURE__ */ jsx("span", {
+			ref,
+			className: cx("inline-citation__source", className),
+			...props,
+			"data-slot": "inline-citation-source",
+			"data-source-id": source.sourceId,
+			"data-source-type": source.type,
+			children: /* @__PURE__ */ jsxs(PreviewCard.Root, { children: [/* @__PURE__ */ jsx(PreviewCard.Trigger, {
+				delay: 0,
+				closeDelay: 0,
+				href,
+				target: "_blank",
+				rel: "noreferrer",
+				className: "inline-citation__trigger",
+				"aria-label": `${accessibleName} (opens in a new tab)`,
+				children: visibleLabel
+			}), /* @__PURE__ */ jsx(PreviewCard.Portal, { children: /* @__PURE__ */ jsx(PreviewCard.Positioner, {
+				sideOffset: 8,
+				children: /* @__PURE__ */ jsx(PreviewCard.Popup, {
+					className: "inline-citation__popup",
+					children: /* @__PURE__ */ jsx(CitationDetails, { source })
+				})
+			}) })] })
+		});
+	}
+	return /* @__PURE__ */ jsx("span", {
+		ref,
+		className: cx("inline-citation__source", className),
+		...props,
+		"data-slot": "inline-citation-source",
+		"data-source-id": source.sourceId,
+		"data-source-type": source.type,
+		children: /* @__PURE__ */ jsxs(Popover.Root, { children: [/* @__PURE__ */ jsx(Popover.Trigger, {
+			className: "inline-citation__trigger",
+			"aria-label": accessibleName,
+			children: visibleLabel
+		}), /* @__PURE__ */ jsx(Popover.Portal, { children: /* @__PURE__ */ jsx(Popover.Positioner, {
+			sideOffset: 8,
+			children: /* @__PURE__ */ jsx(Popover.Popup, {
+				className: "inline-citation__popup",
+				children: /* @__PURE__ */ jsx(CitationDetails, {
+					source,
+					titlePart: "popover"
+				})
+			})
+		}) })] })
+	});
+}
+function CitationDetails({ source, titlePart }) {
+	const title = source.title || defaultLabel(source);
+	return /* @__PURE__ */ jsxs(InlineCitationCard, { children: [
+		titlePart ? /* @__PURE__ */ jsx(Popover.Title, {
+			className: "inline-citation__title",
+			children: title
+		}) : /* @__PURE__ */ jsx("strong", {
+			className: "inline-citation__title",
+			children: title
+		}),
+		source.type === "source-url" ? /* @__PURE__ */ jsx("span", {
+			className: "inline-citation__location",
+			children: source.url
+		}) : /* @__PURE__ */ jsxs("span", {
+			className: "inline-citation__metadata",
+			children: [source.filename ? /* @__PURE__ */ jsx("span", { children: source.filename }) : null, /* @__PURE__ */ jsx("span", { children: source.mediaType })]
+		}),
+		/* @__PURE__ */ jsxs("span", {
+			className: "inline-citation__id",
+			children: ["Source ID: ", source.sourceId]
+		})
+	] });
+}
+function defaultLabel(source) {
+	if (source.type === "source-document") return "Document";
+	try {
+		return new URL(source.url).hostname.replace(/^www\./, "") || "Source";
+	} catch {
+		return "Source";
+	}
+}
+function safeSourceUrl(value) {
+	try {
+		const parsed = new URL(value);
+		return parsed.protocol === "https:" || parsed.protocol === "http:" ? parsed.href : null;
+	} catch {
+		return null;
+	}
+}
+//#endregion
+export { InlineCitation, InlineCitationCard, InlineCitationSource, InlineCitationText };

package/dist/components/Input.d.ts

@@ -5,10 +5,7 @@ import { InputProps as InputProps$1 } from "@base-ui/react/input";
 /**
  * Props for the Input component.
  */
-interface InputProps extends Omit<InputProps$1, "className"> {
-  /** Additional CSS class names */
-  className?: string;
-}
+interface InputProps extends InputProps$1 {}
 /**
  * An accessible text input component with consistent styling.
  *

package/dist/components/Input.js

@@ -1,3 +1,4 @@
+import { n as mergeBaseClassName } from "../class-names-BiMDVpUo.js";
 import "react";
 import { jsx } from "react/jsx-runtime";
 import { Input as Input$1 } from "@base-ui/react/input";
@@ -15,11 +16,11 @@ import { Input as Input$1 } from "@base-ui/react/input";
 *
 * @see {@link https://base-ui.com/react/components/input | Base UI Input}
 */
-function Input({ className = "", ref, ...props }) {
+function Input({ className, ref, ...props }) {
 	return /* @__PURE__ */ jsx(Input$1, {
 		ref,
 		"data-slot": "input",
-		className: ["input", className].filter(Boolean).join(" "),
+		className: mergeBaseClassName(["input"].filter(Boolean).join(" "), className),
 		...props
 	});
 }

package/dist/components/Marker.js

@@ -1,4 +1,4 @@
-import { t as cx } from "../class-names-9UtZwb0J.js";
+import { t as cx } from "../class-names-BiMDVpUo.js";
 import { n as mergeRefs } from "../merge-refs-DF_7w2x_.js";
 import * as React from "react";
 import { jsx } from "react/jsx-runtime";

package/dist/components/McpConnectionRequest.js

@@ -1,5 +1,5 @@
-import { t as cx } from "../class-names-9UtZwb0J.js";
-import { B as SpinnerIcon, T as McpIcon, o as CheckIcon, q as WarningIcon } from "../icons-CpfUer49.js";
+import { t as cx } from "../class-names-BiMDVpUo.js";
+import { G as SpinnerIcon, Z as WarningIcon, k as McpIcon, l as CheckIcon } from "../icons-CQJ-aMnI.js";
 import { Button } from "./Button.js";
 import { AgentAttention, AgentAttentionActions, AgentAttentionBody, AgentAttentionHeader } from "./AgentAttention.js";
 import { getMcpServerEntry, getMcpServerRuntimeState } from "../utils/mcp-server-catalog.js";

package/dist/components/McpServerPicker.d.ts

@@ -1,4 +1,4 @@
-import { s as MenuItemProps, t as Menu } from "../Menu-Bgu-ufb5.js";
+import { s as MenuItemProps, t as Menu } from "../Menu-L6MZm-7N.js";
 import { McpServerCard } from "../utils/mcp-server-catalog.js";
 import { McpConnectorFormProps } from "./AgentConnection.js";
 import { DialogProps } from "./Dialog.js";

package/dist/components/McpServerPicker.js

@@ -1,5 +1,5 @@
-import { t as cx } from "../class-names-9UtZwb0J.js";
-import { B as SpinnerIcon, O as MinusIcon, o as CheckIcon, q as WarningIcon } from "../icons-CpfUer49.js";
+import { n as mergeBaseClassName } from "../class-names-BiMDVpUo.js";
+import { G as SpinnerIcon, M as MinusIcon, Z as WarningIcon, l as CheckIcon } from "../icons-CQJ-aMnI.js";
 import { buttonVariants } from "./Button.js";
 import { Dialog } from "./Dialog.js";
 import { Menu } from "./Menu.js";
@@ -63,6 +63,7 @@ function McpServerPicker({ servers, onConnect, mcp, onDisconnect, sideOffset = 1
 		align: "start",
 		className: "mcp-server-picker__popup",
 		collisionPadding: 8,
+		"data-recipe": "wide-scroll-picker",
 		side: "top",
 		sideOffset,
 		children: /* @__PURE__ */ jsx(McpServerPickerItems, {
@@ -111,7 +112,7 @@ function McpServerPickerItems({ servers, onConnect, mcp, onDisconnect }) {
 }
 function McpServerPickerGroup({ label, children, className, ...props }) {
 	return /* @__PURE__ */ jsxs(Menu.Group, {
-		className: cx("mcp-server-picker__group", className),
+		className: mergeBaseClassName("mcp-server-picker__group", className),
 		...props,
 		children: [/* @__PURE__ */ jsx(Menu.GroupLabel, {
 			className: "mcp-server-picker__group-label",
@@ -121,7 +122,7 @@ function McpServerPickerGroup({ label, children, className, ...props }) {
 }
 function McpServerPickerAction({ icon, label, description, className, ...props }) {
 	return /* @__PURE__ */ jsxs(Menu.Item, {
-		className: cx("mcp-server-picker__row", "mcp-server-picker__custom-action", className),
+		className: mergeBaseClassName("mcp-server-picker__row mcp-server-picker__custom-action", className),
 		...props,
 		children: [/* @__PURE__ */ jsx("span", {
 			className: "mcp-server-picker__icon",
@@ -202,7 +203,7 @@ function McpServerPickerRow({ row, onConnect, onDisconnect, pendingAction }) {
 				onClick: pendingAction !== null ? void 0 : () => void onDisconnect(connectedServerId),
 				title: disconnectLabel,
 				children: [/* @__PURE__ */ jsx(MinusIcon, {}), /* @__PURE__ */ jsx("span", {
-					className: "mcp-server-picker__status-label",
+					className: "mcp-server-picker__status-label sigvelo-visually-hidden",
 					children: disconnectLabel
 				})]
 			}) : null]