@arcadeai/design-system 5.0.2 → 6.0.0

package/dist/components/ui/molecules/mcp-server-picker/recommended-toolkits-chip.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"recommended-toolkits-chip.d.ts","sourceRoot":"","sources":["../../../../../lib/components/ui/molecules/mcp-server-picker/recommended-toolkits-chip.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,KAAK,MAAM,OAAO,CAAC;AAiBpC,MAAM,MAAM,uBAAuB,GAAG;IACpC,8DAA8D;IAC9D,EAAE,EAAE,MAAM,CAAC;IACX,+BAA+B;IAC/B,IAAI,EAAE,MAAM,CAAC;IACb;;;OAGG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,iDAAiD;IACjD,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,qEAAqE;IACrE,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB,CAAC;AAEF,MAAM,MAAM,+BAA+B,GAAG;IAC5C;;;;OAIG;IACH,UAAU,EAAE,uBAAuB,EAAE,CAAC;IACtC;;;OAGG;IACH,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB;;;OAGG;IACH,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAC;IACtB;;;OAGG;IACH,eAAe,CAAC,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,IAAI,CAAC;IACvC,kDAAkD;IAClD,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAC;CACvB,GAAG,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,EAAE,UAAU,GAAG,UAAU,CAAC,CAAC;AAqB/D;;;;;;;;;GASG;AACH,wBAAgB,0BAA0B,CAAC,EACzC,UAAU,EACV,MAAc,EACd,QAAQ,EACR,eAAe,EACf,QAAQ,EACR,SAAS,EACT,GAAG,IAAI,EACR,EAAE,+BAA+B,qBAqFjC"}
+{"version":3,"file":"recommended-toolkits-chip.d.ts","sourceRoot":"","sources":["../../../../../lib/components/ui/molecules/mcp-server-picker/recommended-toolkits-chip.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,KAAK,MAAM,OAAO,CAAC;AAepC,MAAM,MAAM,uBAAuB,GAAG;IACpC,8DAA8D;IAC9D,EAAE,EAAE,MAAM,CAAC;IACX,+BAA+B;IAC/B,IAAI,EAAE,MAAM,CAAC;IACb;;;OAGG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,iDAAiD;IACjD,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,qEAAqE;IACrE,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB,CAAC;AAEF,MAAM,MAAM,+BAA+B,GAAG;IAC5C;;;;OAIG;IACH,UAAU,EAAE,uBAAuB,EAAE,CAAC;IACtC;;;OAGG;IACH,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB;;;OAGG;IACH,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAC;IACtB;;;OAGG;IACH,eAAe,CAAC,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,IAAI,CAAC;IACvC,kDAAkD;IAClD,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAC;CACvB,GAAG,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,EAAE,UAAU,GAAG,UAAU,CAAC,CAAC;AAqB/D;;;;;;;;;GASG;AACH,wBAAgB,0BAA0B,CAAC,EACzC,UAAU,EACV,MAAc,EACd,QAAQ,EACR,eAAe,EACf,QAAQ,EACR,SAAS,EACT,GAAG,IAAI,EACR,EAAE,+BAA+B,qBAmGjC"}

package/dist/components/ui/molecules/mcp-server-picker/recommended-toolkits-chip.js

@@ -1,10 +1,11 @@
 "use client";
 "use client";
 import { cn as e } from "../../../../lib/utils.js";
-import { i as t, n, o as r, t as i } from "../../../../popover-Cne_hQUh.js";
+import { i as t, n, o as r, t as i } from "../../../../popover-CpLkQtT5.js";
 import { Arcade as a } from "../../atoms/icons/arcade.js";
-import { RemovableChip as o, RemovableChipButton as s } from "../../atoms/removable-chip.js";
-import { t as c } from "../../../../scroll-area-C0KbhRES.js";
+import { t as o } from "../../../../scroll-area-D7iOy7xj.js";
+import { RemovableChip as s } from "../removable-chip.js";
+import { ChipBody as c } from "../chip-body.js";
 import { McpToolkitAvatar as l } from "./toolkit-avatar.js";
 import { useState as u } from "react";
 import { jsx as d, jsxs as f } from "react/jsx-runtime";
@@ -18,28 +19,29 @@ function p({ className: t }) {
 	});
 }
 function m({ mcpServers: a, active: m = !1, onReview: h, onOpenMcpServer: g, onRemove: _, className: v, ...y }) {
-	let [b, x] = u(!1), S = a.length, C = S === 1 ? "server" : "servers", w = `Review ${S} recommended ${C}`, T = `Show ${S} recommended ${C}`, E = `Remove all ${S} recommended ${C}`;
-	return /* @__PURE__ */ f(o, {
+	let [b, x] = u(!1), S = a.length, C = S === 1 ? "server" : "servers", w = `min(18rem, calc(${S} * 2rem + 0.5rem))`, T = `Review ${S} recommended ${C}`, E = `Show ${S} recommended ${C}`, D = `Remove all ${S} recommended ${C}`;
+	return /* @__PURE__ */ f(s, {
 		...y,
 		active: m,
 		className: e(m ? "bg-brand-navy/15 ring-brand-navy/40" : null, v),
 		"data-slot": "mcp-recommended-toolkits-chip",
 		"data-status": m ? "open" : "closed",
 		onRemove: _,
-		removeLabel: E,
-		children: [/* @__PURE__ */ f(s, {
-			"aria-label": w,
+		removeLabel: D,
+		children: [/* @__PURE__ */ d(c, {
+			"aria-label": T,
 			className: "pr-1.5 font-medium",
+			icon: /* @__PURE__ */ d(p, {}),
+			label: "Recommended tools",
 			onClick: h,
-			title: w,
-			children: [/* @__PURE__ */ d(p, {}), /* @__PURE__ */ d("span", { children: "Recommended tools" })]
+			title: T
 		}), /* @__PURE__ */ f(i, {
 			onOpenChange: x,
 			open: b,
 			children: [/* @__PURE__ */ d(r, {
-				"aria-label": T,
+				"aria-label": E,
 				className: "inline-flex cursor-pointer items-center gap-1 py-1 pr-1.5 pl-1 text-muted-foreground transition-[background-color,color] duration-[var(--duration-fast)] ease-[var(--ease-smooth)] hover:bg-foreground/10 hover:text-foreground focus-visible:bg-foreground/10 focus-visible:outline-none motion-reduce:transition-colors",
-				title: T,
+				title: E,
 				type: "button",
 				children: /* @__PURE__ */ d("span", {
 					className: "rounded-full bg-muted px-1.5 py-0.5 text-[10px] text-foreground tabular-nums",
@@ -47,14 +49,15 @@ function m({ mcpServers: a, active: m = !1, onReview: h, onOpenMcpServer: g, onR
 				})
 			}), /* @__PURE__ */ f(n, {
 				align: "start",
-				className: "w-64 gap-0 p-0",
+				className: "w-64 gap-0 overflow-hidden p-0",
 				sideOffset: 6,
 				children: [/* @__PURE__ */ f(t, {
 					className: "flex items-center gap-2 px-3 pt-2.5 pb-1.5 font-medium text-foreground text-xs",
 					children: [/* @__PURE__ */ d(p, {}), /* @__PURE__ */ d("span", { children: "Recommended by Arcade" })]
-				}), /* @__PURE__ */ d(c, {
-					className: "max-h-72",
+				}), /* @__PURE__ */ d(o, {
+					className: "min-h-0 overflow-hidden",
 					orientation: "vertical",
+					style: { height: w },
 					type: "hover",
 					children: /* @__PURE__ */ d("ul", {
 						className: "flex flex-col py-1",

package/dist/components/ui/molecules/mcp-server-picker/recommended-tools.js

@@ -1,8 +1,8 @@
 "use client";
 "use client";
 import { cn as e } from "../../../../lib/utils.js";
-import { a as t, d as n, i as r, n as i, o as a, r as o, s, t as c } from "../../../../alert-dialog-BiDZwtP2.js";
-import { t as l } from "../../../../switch-D8M0xvzp.js";
+import { a as t, d as n, i as r, n as i, o as a, r as o, s, t as c } from "../../../../alert-dialog-1bUE2clB.js";
+import { t as l } from "../../../../switch-DlxZDt6o.js";
 import { McpSectionCallout as u } from "./section-callout.js";
 import { Fragment as d, jsx as f, jsxs as p } from "react/jsx-runtime";
 //#region lib/components/ui/molecules/mcp-server-picker/recommended-tools.tsx

package/dist/components/ui/molecules/mcp-server-picker/search-scope-tabs.js

@@ -1,6 +1,6 @@
 "use client";
 "use client";
-import { i as e, r as t, t as n } from "../../../../tabs-ttkDuwww.js";
+import { i as e, r as t, t as n } from "../../../../tabs-Cj3LY-7F.js";
 import { jsx as r, jsxs as i } from "react/jsx-runtime";
 //#region lib/components/ui/molecules/mcp-server-picker/search-scope-tabs.tsx
 function a({ active: a, serverCount: o, toolCount: s, onChange: c, ...l }) {

package/dist/components/ui/molecules/mcp-server-picker/section-callout.js

@@ -14,7 +14,7 @@ function r({ title: r, description: i, action: a, className: o, ...s }) {
 			className: "font-semibold text-foreground text-sm",
 			children: r
 		}), /* @__PURE__ */ t("p", {
-			className: "mt-1.5 text-[13px] text-muted-foreground leading-relaxed",
+			className: "mt-1.5 text-[13px] text-[var(--mcp-muted-foreground)] leading-relaxed",
 			children: i
 		})]
 	});

package/dist/components/ui/molecules/mcp-server-picker/section-nav-header.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"section-nav-header.d.ts","sourceRoot":"","sources":["../../../../../lib/components/ui/molecules/mcp-server-picker/section-nav-header.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,KAAK,KAAK,MAAM,OAAO,CAAC;AAIpC,MAAM,MAAM,wBAAwB,GAAG;IACrC;;;OAGG;IACH,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B;;;OAGG;IACH,OAAO,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B;;;OAGG;IACH,MAAM,CAAC,EAAE,MAAM,IAAI,CAAC;IACpB;;;OAGG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;;;OAIG;IACH,IAAI,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CACxB,GAAG,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,EAAE,UAAU,CAAC,CAAC;AAElD;;;;;;;GAOG;AACH,wBAAgB,mBAAmB,CAAC,EAClC,QAAQ,EACR,OAAO,EACP,IAAI,EACJ,MAAM,EACN,SAAyB,EACzB,SAAS,EACT,GAAG,IAAI,EACR,EAAE,wBAAwB,qBAoC1B"}
+{"version":3,"file":"section-nav-header.d.ts","sourceRoot":"","sources":["../../../../../lib/components/ui/molecules/mcp-server-picker/section-nav-header.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,KAAK,KAAK,MAAM,OAAO,CAAC;AAIpC,MAAM,MAAM,wBAAwB,GAAG;IACrC;;;OAGG;IACH,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B;;;OAGG;IACH,OAAO,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B;;;OAGG;IACH,MAAM,CAAC,EAAE,MAAM,IAAI,CAAC;IACpB;;;OAGG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;;;OAIG;IACH,IAAI,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CACxB,GAAG,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,EAAE,UAAU,CAAC,CAAC;AAElD;;;;;;;GAOG;AACH,wBAAgB,mBAAmB,CAAC,EAClC,QAAQ,EACR,OAAO,EACP,IAAI,EACJ,MAAM,EACN,SAAyB,EACzB,SAAS,EACT,GAAG,IAAI,EACR,EAAE,wBAAwB,qBAwC1B"}

package/dist/components/ui/molecules/mcp-server-picker/section-nav-header.js

@@ -8,13 +8,19 @@ import { ChevronLeft as i } from "lucide-react";
 function a({ identity: a, actions: o, back: s, onBack: c, backLabel: l = "MCP servers", className: u, ...d }) {
 	let f = s ?? (c ? /* @__PURE__ */ r(t, {
 		"aria-label": `Back to ${l.toLowerCase()}`,
+		className: "shrink-0 font-semibold",
 		onClick: c,
-		size: "sm",
-		variant: "ghost",
-		children: [/* @__PURE__ */ n(i, {
-			"aria-hidden": !0,
-			"data-icon": "inline-start"
-		}), l]
+		size: "default",
+		type: "button",
+		variant: "secondary",
+		children: [
+			/* @__PURE__ */ n(i, {
+				"aria-hidden": !0,
+				"data-icon": "inline-start"
+			}),
+			"Back to ",
+			l
+		]
 	}) : null);
 	return /* @__PURE__ */ r("div", {
 		...d,

package/dist/components/ui/molecules/mcp-server-picker/selection-card-parts.d.ts

@@ -0,0 +1,28 @@
+import { ClassProp } from 'class-variance-authority/types';
+export type McpCardSelectionState = "none" | "partial" | "selected";
+/**
+ * The shared frame for the picker's selectable entity cards — the server card
+ * and the tool card. There is deliberately no composed `McpSelectionCard`: the
+ * two cards own very different interactive layouts (a single toggle button vs.
+ * a multi-button composite), so this file only provides the parts that keep
+ * them reading as one family. The shell owns radius, border, selection tint,
+ * and transition — never the layout or the interactive element. A card that
+ * still needs configuration keeps its normal shell; the warning treatment
+ * lives entirely on each card's setup strip.
+ */
+export declare const mcpSelectionCardShellVariants: (props?: ({
+    selectionState?: "none" | "selected" | "partial" | null | undefined;
+} & ClassProp) | undefined) => string;
+/**
+ * The name + optional muted version line both cards lead their text block with.
+ * Truncates the name and keeps the version pinned beside it. `capitalize`
+ * title-cases the name for server display names (raw tool names are shown
+ * verbatim).
+ */
+export declare function McpCardHeading({ name, version, capitalize, className, }: {
+    name: string;
+    version?: string;
+    capitalize?: boolean;
+    className?: string;
+}): import("react").JSX.Element;
+//# sourceMappingURL=selection-card-parts.d.ts.map

package/dist/components/ui/molecules/mcp-server-picker/selection-card-parts.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"selection-card-parts.d.ts","sourceRoot":"","sources":["../../../../../lib/components/ui/molecules/mcp-server-picker/selection-card-parts.tsx"],"names":[],"mappings":";AAKA,MAAM,MAAM,qBAAqB,GAAG,MAAM,GAAG,SAAS,GAAG,UAAU,CAAC;AAEpE;;;;;;;;;GASG;AACH,eAAO,MAAM,6BAA6B;;8EAkBzC,CAAC;AAEF;;;;;GAKG;AACH,wBAAgB,cAAc,CAAC,EAC7B,IAAI,EACJ,OAAO,EACP,UAAkB,EAClB,SAAS,GACV,EAAE;IACD,IAAI,EAAE,MAAM,CAAC;IACb,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,+BAkBA"}

package/dist/components/ui/molecules/mcp-server-picker/selection-card-parts.js

@@ -0,0 +1,28 @@
+"use client";
+"use client";
+import { cn as e } from "../../../../lib/utils.js";
+import { t } from "../../../../dist-Ber_p4PA.js";
+import { jsx as n, jsxs as r } from "react/jsx-runtime";
+//#region lib/components/ui/molecules/mcp-server-picker/selection-card-parts.tsx
+var i = t("rounded-lg border border-transparent bg-[var(--mcp-picker-surface)] transition-[background-color,border-color,box-shadow,transform] duration-[var(--duration-normal)] ease-[var(--ease-smooth)] motion-reduce:transition-colors dark:bg-muted/20", {
+	variants: { selectionState: {
+		selected: "border-[var(--mcp-picker-selected-border)] bg-[var(--mcp-picker-selected-surface)] shadow-[var(--shadow-card)] hover:bg-[var(--mcp-picker-selected-hover)] dark:border-transparent dark:bg-muted/58 dark:hover:bg-muted/63",
+		partial: "border-[var(--mcp-picker-partial-border)] bg-[var(--mcp-picker-partial-surface)] shadow-[var(--shadow-card)] hover:bg-[var(--mcp-picker-selected-hover)] dark:border-transparent dark:bg-muted/43 dark:hover:bg-muted/48",
+		none: "hover:bg-[var(--mcp-picker-surface-hover)] hover:shadow-[var(--shadow-card)] dark:hover:bg-muted/45"
+	} },
+	defaultVariants: { selectionState: "none" }
+});
+function a({ name: t, version: i, capitalize: a = !1, className: o }) {
+	return /* @__PURE__ */ r("span", {
+		className: e("flex min-w-0 items-baseline gap-1.5", o),
+		children: [/* @__PURE__ */ n("span", {
+			className: e("min-w-0 truncate font-medium text-sm", a && "capitalize"),
+			children: t
+		}), i ? /* @__PURE__ */ r("span", {
+			className: "shrink-0 font-normal text-[var(--mcp-muted-foreground)] text-xs tabular-nums",
+			children: ["v", i]
+		}) : null]
+	});
+}
+//#endregion
+export { a as McpCardHeading, i as mcpSelectionCardShellVariants };

package/dist/components/ui/molecules/mcp-server-picker/server-avatar-stack.d.ts

@@ -12,5 +12,5 @@ export type McpServerAvatarStackProps = {
     overflowLabel?: string;
     onOpenMcpServer?: (id: string) => void;
 } & Omit<React.ComponentProps<"span">, "children">;
-export declare function McpServerAvatarStack({ servers, maxVisible, overflowLabel, onOpenMcpServer, className, ...rest }: McpServerAvatarStackProps): React.JSX.Element | null;
+export declare function McpServerAvatarStack({ servers, maxVisible, overflowLabel, onOpenMcpServer, ...rest }: McpServerAvatarStackProps): React.JSX.Element | null;
 //# sourceMappingURL=server-avatar-stack.d.ts.map

package/dist/components/ui/molecules/mcp-server-picker/server-avatar-stack.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"server-avatar-stack.d.ts","sourceRoot":"","sources":["../../../../../lib/components/ui/molecules/mcp-server-picker/server-avatar-stack.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,KAAK,MAAM,OAAO,CAAC;AAYpC,MAAM,MAAM,wBAAwB,GAAG;IACrC,EAAE,EAAE,MAAM,CAAC;IACX,IAAI,EAAE,MAAM,CAAC;IACb,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB,CAAC;AAEF,MAAM,MAAM,yBAAyB,GAAG;IACtC,OAAO,EAAE,wBAAwB,EAAE,CAAC;IACpC,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,eAAe,CAAC,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,IAAI,CAAC;CACxC,GAAG,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,MAAM,CAAC,EAAE,UAAU,CAAC,CAAC;AAEnD,wBAAgB,oBAAoB,CAAC,EACnC,OAAO,EACP,UAAc,EACd,aAAkC,EAClC,eAAe,EACf,SAAS,EACT,GAAG,IAAI,EACR,EAAE,yBAAyB,4BAmC3B"}
+{"version":3,"file":"server-avatar-stack.d.ts","sourceRoot":"","sources":["../../../../../lib/components/ui/molecules/mcp-server-picker/server-avatar-stack.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,KAAK,MAAM,OAAO,CAAC;AAOpC,MAAM,MAAM,wBAAwB,GAAG;IACrC,EAAE,EAAE,MAAM,CAAC;IACX,IAAI,EAAE,MAAM,CAAC;IACb,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB,CAAC;AAEF,MAAM,MAAM,yBAAyB,GAAG;IACtC,OAAO,EAAE,wBAAwB,EAAE,CAAC;IACpC,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,eAAe,CAAC,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,IAAI,CAAC;CACxC,GAAG,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,MAAM,CAAC,EAAE,UAAU,CAAC,CAAC;AAEnD,wBAAgB,oBAAoB,CAAC,EACnC,OAAO,EACP,UAAc,EACd,aAAkC,EAClC,eAAe,EACf,GAAG,IAAI,EACR,EAAE,yBAAyB,4BA+B3B"}

package/dist/components/ui/molecules/mcp-server-picker/server-avatar-stack.js

@@ -1,99 +1,47 @@
 "use client";
 "use client";
-import { cn as e } from "../../../../lib/utils.js";
-import { i as t, n, o as r, t as i } from "../../../../popover-Cne_hQUh.js";
-import { t as a } from "../../../../scroll-area-C0KbhRES.js";
-import { McpToolkitAvatar as o } from "./toolkit-avatar.js";
-import { useState as s } from "react";
-import { Fragment as c, jsx as l, jsxs as u } from "react/jsx-runtime";
+import { AvatarStack as e } from "../avatar-stack.js";
+import { McpToolkitAvatar as t } from "./toolkit-avatar.js";
+import { Fragment as n, jsx as r, jsxs as i } from "react/jsx-runtime";
 //#region lib/components/ui/molecules/mcp-server-picker/server-avatar-stack.tsx
-function d({ servers: t, maxVisible: n = 5, overflowLabel: r = "more MCP servers", onOpenMcpServer: i, className: a, ...s }) {
-	if (t.length === 0) return null;
-	let c = t.slice(0, n), d = t.slice(n), p = d.length;
-	return /* @__PURE__ */ u("span", {
-		...s,
-		className: e("inline-flex shrink-0 items-center gap-1", a),
-		"data-slot": "mcp-server-avatar-stack",
-		children: [/* @__PURE__ */ l("span", {
-			className: "inline-flex items-center gap-1",
-			children: c.map((e) => /* @__PURE__ */ l(o, {
-				name: e.name,
-				size: "xs",
-				title: e.name,
-				toolkitId: e.toolkitId
-			}, e.id))
-		}), p > 0 ? /* @__PURE__ */ l(f, {
-			label: r,
-			onOpenMcpServer: i,
-			servers: d
-		}) : null]
-	});
-}
-function f({ label: e, servers: o, onOpenMcpServer: c }) {
-	let [d, f] = s(!1), m = o.length, h = m === 1 ? "server" : "servers", g = `Show ${m} ${e}`;
-	return /* @__PURE__ */ u(i, {
-		onOpenChange: f,
-		open: d,
-		children: [/* @__PURE__ */ u(r, {
-			"aria-label": g,
-			className: "inline-flex size-[18px] cursor-pointer items-center justify-center rounded-full bg-foreground/8 font-medium text-[9px] text-muted-foreground tabular-nums transition-colors hover:bg-foreground/12 hover:text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring/60",
-			title: g,
-			type: "button",
-			children: ["+", m]
-		}), /* @__PURE__ */ u(n, {
-			align: "start",
-			className: "w-56 gap-0 p-0",
-			sideOffset: 6,
-			children: [/* @__PURE__ */ u(t, {
-				className: "px-3 pt-2.5 pb-1.5 font-medium text-foreground text-xs",
-				children: [
-					m,
-					" more MCP ",
-					h
-				]
-			}), /* @__PURE__ */ l(a, {
-				className: "max-h-72",
-				orientation: "vertical",
-				type: "hover",
-				children: /* @__PURE__ */ l("ul", {
-					className: "flex flex-col py-1",
-					children: o.map((e) => /* @__PURE__ */ l("li", { children: /* @__PURE__ */ l(p, {
-						onOpenMcpServer: c ? (e) => {
-							f(!1), c(e);
-						} : void 0,
-						server: e
-					}) }, e.id))
-				})
-			})]
-		})]
+function a({ servers: n, maxVisible: i = 5, overflowLabel: a = "more MCP servers", onOpenMcpServer: s, ...c }) {
+	if (n.length === 0) return null;
+	let l = n.map((e) => ({
+		id: e.id,
+		avatar: /* @__PURE__ */ r(t, {
+			name: e.name,
+			size: "xs",
+			title: e.name,
+			toolkitId: e.toolkitId
+		}),
+		overflowRow: /* @__PURE__ */ r(o, { server: e }),
+		overflowRowLabel: `Open ${e.name} tools`,
+		onSelect: s ? () => s(e.id) : void 0
+	}));
+	return /* @__PURE__ */ r(e, {
+		...c,
+		items: l,
+		maxVisible: i,
+		overflowLabel: a,
+		renderOverflowHeader: (e) => `${e} more MCP ${e === 1 ? "server" : "servers"}`
 	});
 }
-function p({ server: e, onOpenMcpServer: t }) {
-	let n = /* @__PURE__ */ u(c, { children: [
-		/* @__PURE__ */ l(o, {
+function o({ server: e }) {
+	return /* @__PURE__ */ i(n, { children: [
+		/* @__PURE__ */ r(t, {
 			name: e.name,
 			size: "sm",
 			toolkitId: e.toolkitId
 		}),
-		/* @__PURE__ */ l("span", {
+		/* @__PURE__ */ r("span", {
 			className: "min-w-0 flex-1 truncate font-medium capitalize",
 			children: e.name
 		}),
-		e.selectedCount != null && e.total != null ? /* @__PURE__ */ l("span", {
+		e.selectedCount != null && e.total != null ? /* @__PURE__ */ r("span", {
 			className: "shrink-0 text-[10px] text-muted-foreground tabular-nums",
 			children: e.selectedCount === e.total ? `${e.total}` : `${e.selectedCount}/${e.total}`
 		}) : null
 	] });
-	return t ? /* @__PURE__ */ l("button", {
-		"aria-label": `Open ${e.name} tools`,
-		className: "flex w-full cursor-pointer items-center gap-2 px-3 py-1.5 text-left text-xs transition-colors hover:bg-foreground/[0.06] focus-visible:bg-foreground/[0.06] focus-visible:outline-none",
-		onClick: () => t(e.id),
-		type: "button",
-		children: n
-	}) : /* @__PURE__ */ l("div", {
-		className: "flex w-full items-center gap-2 px-3 py-1.5 text-left text-xs",
-		children: n
-	});
 }
 //#endregion
-export { d as McpServerAvatarStack };
+export { a as McpServerAvatarStack };

package/dist/components/ui/molecules/mcp-server-picker/server-card.d.ts

@@ -1,9 +1,6 @@
-import { ClassProp } from 'class-variance-authority/types';
+import { McpCardSelectionState } from './selection-card-parts';
 import * as React from "react";
-export type McpServerCardSelectionState = "none" | "partial" | "selected";
-declare const shellVariants: (props?: ({
-    selectionState?: "none" | "selected" | "partial" | "setup-none" | "setup-selected" | "setup-partial" | null | undefined;
-} & ClassProp) | undefined) => string;
+export type McpServerCardSelectionState = McpCardSelectionState;
 type McpServerCardBaseProps = {
     name: string;
     description?: string;
@@ -58,5 +55,5 @@ type McpServerCardDrillProps = McpServerCardBaseProps & {
 export type McpServerCardProps = McpServerCardToggleProps | McpServerCardDrillProps;
 declare function McpServerCardImpl({ name, description, toolkitId, version, toolCount, selectedToolCount, selectionState, needsSetup, interaction, onSetup, onToggle, onCustomize, className, ...rest }: McpServerCardProps): React.JSX.Element;
 export declare const McpServerCard: React.MemoExoticComponent<typeof McpServerCardImpl>;
-export { shellVariants as mcpServerCardShellVariants };
+export {};
 //# sourceMappingURL=server-card.d.ts.map

package/dist/components/ui/molecules/mcp-server-picker/server-card.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"server-card.d.ts","sourceRoot":"","sources":["../../../../../lib/components/ui/molecules/mcp-server-picker/server-card.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAU/B,MAAM,MAAM,2BAA2B,GAAG,MAAM,GAAG,SAAS,GAAG,UAAU,CAAC;AAE1E,QAAA,MAAM,aAAa;;8EAoBlB,CAAC;AAwBF,KAAK,sBAAsB,GAAG;IAC5B,IAAI,EAAE,MAAM,CAAC;IACb,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB;;;;OAIG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;;;OAIG;IACH,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,SAAS,EAAE,MAAM,CAAC;IAClB,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B,cAAc,CAAC,EAAE,2BAA2B,CAAC;IAC7C;;;;OAIG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,4DAA4D;IAC5D,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;CACtB,GAAG,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,EAAE,UAAU,CAAC,CAAC;AAElD,KAAK,wBAAwB,GAAG,sBAAsB,GAAG;IACvD;;;;OAIG;IACH,WAAW,CAAC,EAAE,QAAQ,CAAC;IACvB,QAAQ,EAAE,MAAM,IAAI,CAAC;IACrB,WAAW,EAAE,MAAM,IAAI,CAAC;CACzB,CAAC;AAEF,KAAK,uBAAuB,GAAG,sBAAsB,GAAG;IACtD;;;;;;;;OAQG;IACH,WAAW,EAAE,OAAO,CAAC;IACrB,WAAW,EAAE,MAAM,IAAI,CAAC;IACxB,QAAQ,CAAC,EAAE,KAAK,CAAC;CAClB,CAAC;AAEF,MAAM,MAAM,kBAAkB,GAC1B,wBAAwB,GACxB,uBAAuB,CAAC;AA+M5B,iBAAS,iBAAiB,CAAC,EACzB,IAAI,EACJ,WAAW,EACX,SAAS,EACT,OAAO,EACP,SAAS,EACT,iBAAqB,EACrB,cAAuB,EACvB,UAAkB,EAClB,WAAsB,EACtB,OAAO,EACP,QAAQ,EACR,WAAW,EACX,SAAS,EACT,GAAG,IAAI,EACR,EAAE,kBAAkB,qBAqDpB;AAED,eAAO,MAAM,aAAa,qDAAgC,CAAC;AAC3D,OAAO,EAAE,aAAa,IAAI,0BAA0B,EAAE,CAAC"}
+{"version":3,"file":"server-card.d.ts","sourceRoot":"","sources":["../../../../../lib/components/ui/molecules/mcp-server-picker/server-card.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAW/B,OAAO,EAEL,KAAK,qBAAqB,EAE3B,MAAM,wBAAwB,CAAC;AAGhC,MAAM,MAAM,2BAA2B,GAAG,qBAAqB,CAAC;AAEhE,KAAK,sBAAsB,GAAG;IAC5B,IAAI,EAAE,MAAM,CAAC;IACb,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB;;;;OAIG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;;;OAIG;IACH,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,SAAS,EAAE,MAAM,CAAC;IAClB,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B,cAAc,CAAC,EAAE,2BAA2B,CAAC;IAC7C;;;;OAIG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,4DAA4D;IAC5D,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;CACtB,GAAG,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,EAAE,UAAU,CAAC,CAAC;AAElD,KAAK,wBAAwB,GAAG,sBAAsB,GAAG;IACvD;;;;OAIG;IACH,WAAW,CAAC,EAAE,QAAQ,CAAC;IACvB,QAAQ,EAAE,MAAM,IAAI,CAAC;IACrB,WAAW,EAAE,MAAM,IAAI,CAAC;CACzB,CAAC;AAEF,KAAK,uBAAuB,GAAG,sBAAsB,GAAG;IACtD;;;;;;;;OAQG;IACH,WAAW,EAAE,OAAO,CAAC;IACrB,WAAW,EAAE,MAAM,IAAI,CAAC;IACxB,QAAQ,CAAC,EAAE,KAAK,CAAC;CAClB,CAAC;AAEF,MAAM,MAAM,kBAAkB,GAC1B,wBAAwB,GACxB,uBAAuB,CAAC;AA6L5B,iBAAS,iBAAiB,CAAC,EACzB,IAAI,EACJ,WAAW,EACX,SAAS,EACT,OAAO,EACP,SAAS,EACT,iBAAqB,EACrB,cAAuB,EACvB,UAAkB,EAClB,WAAsB,EACtB,OAAO,EACP,QAAQ,EACR,WAAW,EACX,SAAS,EACT,GAAG,IAAI,EACR,EAAE,kBAAkB,qBAmEpB;AAED,eAAO,MAAM,aAAa,qDAAgC,CAAC"}