@arcadeai/design-system 5.3.0 → 6.0.0

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

@@ -1,166 +1,151 @@
 "use client";
 "use client";
 import { cn as e } from "../../../../lib/utils.js";
-import { t } from "../../../../dist-Ber_p4PA.js";
-import { i as n, n as r, r as i, t as a } from "../../../../tooltip-BUR7V5Aa.js";
-import { McpToolkitAvatar as o } from "./toolkit-avatar.js";
-import * as s from "react";
-import { Fragment as c, jsx as l, jsxs as u } from "react/jsx-runtime";
-import { ChevronRight as d, KeyRound as f } from "lucide-react";
+import { i as t, n, r, t as i } from "../../../../tooltip-BUR7V5Aa.js";
+import { n as a } from "../../../../checkbox-DB9O_Iw9.js";
+import { McpCardHeading as o, mcpSelectionCardShellVariants as s } from "./selection-card-parts.js";
+import { McpToolkitAvatar as c } from "./toolkit-avatar.js";
+import "./constants.js";
+import { McpCardSetupButton as l } from "./card-setup-button.js";
+import * as u from "react";
+import { Fragment as d, jsx as f, jsxs as p } from "react/jsx-runtime";
+import { ChevronRight as m } from "lucide-react";
 //#region lib/components/ui/molecules/mcp-server-picker/server-card.tsx
-var p = t("flex items-stretch rounded-lg border transition-[background-color,border-color,box-shadow,transform] duration-[var(--duration-normal)] ease-[var(--ease-smooth)] motion-reduce:transition-colors", {
-	variants: { selectionState: {
-		selected: "border-foreground/45 bg-muted/20 shadow-[var(--shadow-card)]",
-		partial: "border-foreground/45 border-dashed bg-muted/20 shadow-[var(--shadow-card)]",
-		none: "border-border hover:border-foreground/40 hover:shadow-[var(--shadow-card-hover)]",
-		"setup-none": "border-warning/15 hover:border-warning/50 hover:shadow-[var(--shadow-card-hover)]",
-		"setup-selected": "border-warning/50 bg-warning/[0.5%] shadow-[var(--shadow-card)]",
-		"setup-partial": "border-warning/50 border-dashed bg-warning/[0.5%] shadow-[var(--shadow-card)]"
-	} },
-	defaultVariants: { selectionState: "none" }
-});
-function m(e, t) {
-	return t ? e === "selected" ? "setup-selected" : e === "partial" ? "setup-partial" : "setup-none" : e;
-}
 function h(e) {
 	return e === "selected" ? !0 : e === "partial" ? "mixed" : !1;
 }
-function g({ name: e, description: t, toolkitId: n, version: r, selectionState: i, onToggle: a }) {
-	return /* @__PURE__ */ u("button", {
+function g(e, a) {
+	return a ? /* @__PURE__ */ f(r, {
+		delay: 600,
+		children: /* @__PURE__ */ p(i, { children: [/* @__PURE__ */ f(t, { render: e }), /* @__PURE__ */ f(n, {
+			className: "max-w-xs flex-col items-start gap-0.5 text-left text-xs",
+			side: "bottom",
+			children: /* @__PURE__ */ f("span", { children: a })
+		})] })
+	}) : e;
+}
+function _({ name: e, description: t, toolkitId: n, version: r, selectionState: i, onToggle: s }) {
+	return g(/* @__PURE__ */ p("button", {
 		"aria-label": `${i === "selected" ? "Remove all" : "Add all"} ${e} tools`,
 		"aria-pressed": h(i),
-		className: "flex min-w-0 flex-1 cursor-pointer items-center gap-2 rounded-l-lg px-3 py-2.5 text-left transition-[background-color,color,transform] duration-[var(--duration-fast)] ease-[var(--ease-smooth)] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring/60 focus-visible:ring-inset active:scale-[0.98] motion-reduce:transition-colors motion-reduce:active:scale-100",
-		onClick: a,
-		title: t || void 0,
+		className: "peer/mcp-server-card-toggle flex min-w-0 flex-1 cursor-pointer items-center gap-2.5 rounded-l-lg px-3 py-2.5 text-left transition-[background-color,color,transform] duration-[var(--duration-fast)] ease-[var(--ease-smooth)] hover:bg-foreground/[0.03] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring/60 focus-visible:ring-inset active:translate-y-px group-has-[[data-slot=mcp-server-card-customize]:hover]/mcp-server-card:bg-[var(--mcp-server-card-subtle-hover)] motion-reduce:transition-colors motion-reduce:active:translate-y-0 dark:hover:bg-muted/50",
+		onClick: s,
 		type: "button",
-		children: [/* @__PURE__ */ l(o, {
-			name: e,
-			size: "md",
-			toolkitId: n
-		}), /* @__PURE__ */ u("span", {
-			className: "flex min-w-0 flex-1 items-baseline gap-1.5",
-			children: [/* @__PURE__ */ l("span", {
-				className: "min-w-0 truncate font-medium text-base capitalize",
-				children: e
-			}), r ? /* @__PURE__ */ u("span", {
-				className: "shrink-0 font-normal text-muted-foreground text-xs tabular-nums",
-				children: ["v", r]
-			}) : null]
-		})]
-	});
+		children: [
+			/* @__PURE__ */ f(a, {
+				checked: i === "selected",
+				indeterminate: i === "partial"
+			}),
+			/* @__PURE__ */ f(c, {
+				name: e,
+				size: "xl",
+				toolkitId: n
+			}),
+			/* @__PURE__ */ p("span", {
+				className: "flex min-w-0 flex-1 flex-col",
+				children: [/* @__PURE__ */ f(o, {
+					capitalize: !0,
+					name: e,
+					version: r
+				}), t ? /* @__PURE__ */ f("span", {
+					className: "mt-0.5 min-w-0 truncate text-[var(--mcp-muted-foreground)] text-xs",
+					children: t
+				}) : null]
+			})
+		]
+	}), t);
 }
-function _({ hasSetup: t, name: n, description: r, toolkitId: i, version: a, toolsLabel: s, onCustomize: c }) {
-	return /* @__PURE__ */ u("button", {
+function v({ hasSetup: t, name: n, description: r, toolkitId: i, version: a, toolsLabel: s, onCustomize: l }) {
+	return g(/* @__PURE__ */ p("button", {
 		"aria-label": `Choose individual tools for ${n}`,
 		className: e("flex min-w-0 flex-1 cursor-pointer items-center gap-2 px-3 py-2.5 text-left transition-[background-color,color,transform] duration-[var(--duration-fast)] ease-[var(--ease-smooth)] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring/60 focus-visible:ring-inset active:scale-[0.98] motion-reduce:transition-colors motion-reduce:active:scale-100", t ? "rounded-l-lg" : "rounded-lg"),
-		onClick: c,
-		title: r || void 0,
+		onClick: l,
 		type: "button",
 		children: [
-			/* @__PURE__ */ l(o, {
+			/* @__PURE__ */ f(c, {
 				name: n,
 				size: "md",
 				toolkitId: i
 			}),
-			/* @__PURE__ */ u("span", {
-				className: "flex min-w-0 flex-1 items-baseline gap-1.5",
-				children: [/* @__PURE__ */ l("span", {
-					className: "min-w-0 truncate font-medium text-base capitalize",
-					children: n
-				}), a ? /* @__PURE__ */ u("span", {
-					className: "shrink-0 font-normal text-muted-foreground text-xs tabular-nums",
-					children: ["v", a]
-				}) : null]
+			/* @__PURE__ */ f(o, {
+				capitalize: !0,
+				className: "flex-1",
+				name: n,
+				version: a
 			}),
-			/* @__PURE__ */ u("span", {
-				className: "flex shrink-0 items-center gap-1.5 text-muted-foreground text-xs",
-				children: [/* @__PURE__ */ l("span", {
+			/* @__PURE__ */ p("span", {
+				className: "flex shrink-0 items-center gap-1.5 text-[var(--mcp-muted-foreground)] text-xs",
+				children: [/* @__PURE__ */ f("span", {
 					className: "whitespace-nowrap tabular-nums",
 					children: s
-				}), /* @__PURE__ */ l(d, {
+				}), /* @__PURE__ */ f(m, {
 					"aria-hidden": !0,
 					className: "size-3 transition-transform duration-[var(--duration-fast)] ease-[var(--ease-smooth)] motion-reduce:transition-none"
 				})]
 			})
 		]
-	});
+	}), r);
 }
-function v({ name: e, toolsLabel: t, onCustomize: n }) {
-	return /* @__PURE__ */ u("button", {
+function y({ name: e, toolsLabel: t, onCustomize: n }) {
+	return /* @__PURE__ */ p("button", {
 		"aria-label": `Choose individual tools for ${e}`,
-		className: "flex min-w-[5.5rem] shrink-0 cursor-pointer items-center justify-end gap-1.5 rounded-r-lg border-border/60 border-l px-2.5 text-muted-foreground text-xs transition-[background-color,color,transform] duration-[var(--duration-fast)] ease-[var(--ease-smooth)] hover:bg-muted/40 hover:text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring/60 focus-visible:ring-inset active:scale-[0.98] motion-reduce:transition-colors motion-reduce:active:scale-100",
+		className: "flex min-w-[5.25rem] shrink-0 cursor-pointer items-center justify-end gap-1.5 rounded-r-lg border-border/65 border-l bg-foreground/[0.02] px-3 text-[var(--mcp-muted-foreground)] text-xs transition-[background-color,color,transform] duration-[var(--duration-fast)] ease-[var(--ease-smooth)] hover:bg-foreground/[0.045] hover:text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring/60 focus-visible:ring-inset active:translate-y-px peer-hover/mcp-server-card-toggle:bg-[var(--mcp-server-card-subtle-hover)] motion-reduce:transition-colors motion-reduce:active:translate-y-0 dark:border-border/50 dark:bg-foreground/[0.015] dark:hover:bg-muted/65",
 		"data-slot": "mcp-server-card-customize",
 		onClick: n,
 		type: "button",
-		children: [/* @__PURE__ */ l("span", {
+		children: [/* @__PURE__ */ f("span", {
 			className: "whitespace-nowrap tabular-nums",
 			children: t
-		}), /* @__PURE__ */ l(d, {
+		}), /* @__PURE__ */ f(m, {
 			"aria-hidden": !0,
 			className: "size-3 transition-transform duration-[var(--duration-fast)] ease-[var(--ease-smooth)] motion-reduce:transition-none"
 		})]
 	});
 }
-function y({ isTerminal: t = !1, name: o, onSetup: s }) {
-	return /* @__PURE__ */ l(i, { children: /* @__PURE__ */ u(a, { children: [/* @__PURE__ */ l(n, { render: /* @__PURE__ */ l("button", {
-		"aria-label": `Set up ${o}`,
-		className: e("flex shrink-0 cursor-pointer items-center justify-center border-border/60 border-l bg-warning/10 px-2.5 text-warning transition-colors duration-[var(--duration-fast)] ease-[var(--ease-smooth)] hover:bg-warning/20 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring/60 focus-visible:ring-inset", t ? "rounded-r-lg" : ""),
-		"data-slot": "mcp-server-card-setup",
-		onClick: s,
-		type: "button",
-		children: /* @__PURE__ */ l(f, {
-			"aria-hidden": !0,
-			className: "size-4"
-		})
-	}) }), /* @__PURE__ */ u(r, {
-		className: "max-w-56 flex-col items-start gap-0.5 text-left",
-		side: "top",
-		children: [/* @__PURE__ */ l("span", {
-			className: "font-semibold",
-			children: "Setup required"
-		}), /* @__PURE__ */ l("span", { children: "This server isn't ready yet. It needs some configuration before its tools work." })]
-	})] }) });
-}
-function b({ name: t, description: n, toolkitId: r, version: i, toolCount: a, selectedToolCount: o = 0, selectionState: s = "none", needsSetup: d = !1, interaction: f = "toggle", onSetup: h, onToggle: b, onCustomize: x, className: S, ...C }) {
-	let w = s === "partial" ? `${o}/${a} tools` : `${a} ${a === 1 ? "tool" : "tools"}`;
-	return /* @__PURE__ */ l("div", {
-		...C,
-		className: e(p({ selectionState: m(s, d) }), S),
+function b({ name: t, description: n, toolkitId: r, version: i, toolCount: a, selectedToolCount: o = 0, selectionState: c = "none", needsSetup: u = !1, interaction: m = "toggle", onSetup: h, onToggle: g, onCustomize: b, className: x, ...S }) {
+	let C = c === "partial" ? `${o}/${a} tools` : `${a} ${a === 1 ? "tool" : "tools"}`;
+	return /* @__PURE__ */ f("div", {
+		...S,
+		className: e(s({ selectionState: c }), "group/mcp-server-card flex items-stretch", c === "none" && "hover:!bg-[var(--mcp-picker-surface)] dark:hover:!bg-muted/45", x),
 		"data-slot": "mcp-server-card",
-		"data-status": d ? "needs-setup" : s,
-		children: f === "drill" ? /* @__PURE__ */ u(c, { children: [/* @__PURE__ */ l(_, {
+		"data-status": u ? "needs-setup" : c,
+		children: m === "drill" ? /* @__PURE__ */ p(d, { children: [/* @__PURE__ */ f(v, {
 			description: n,
-			hasSetup: d,
+			hasSetup: u,
 			name: t,
-			onCustomize: x,
+			onCustomize: b,
 			toolkitId: r,
-			toolsLabel: w,
+			toolsLabel: C,
 			version: i
-		}), d ? /* @__PURE__ */ l(y, {
-			isTerminal: !0,
+		}), u ? /* @__PURE__ */ f(l, {
+			className: "rounded-r-lg",
+			description: "This server isn't ready yet. It needs some configuration before its tools work.",
 			name: t,
-			onSetup: h
-		}) : null] }) : /* @__PURE__ */ u(c, { children: [
-			/* @__PURE__ */ l(g, {
+			onSetup: h,
+			slot: "mcp-server-card-setup"
+		}) : null] }) : /* @__PURE__ */ p(d, { children: [
+			/* @__PURE__ */ f(_, {
 				description: n,
 				name: t,
-				onToggle: b,
-				selectionState: s,
+				onToggle: g,
+				selectionState: c,
 				toolkitId: r,
 				version: i
 			}),
-			d ? /* @__PURE__ */ l(y, {
+			u ? /* @__PURE__ */ f(l, {
+				description: "This server isn't ready yet. It needs some configuration before its tools work.",
 				name: t,
-				onSetup: h
+				onSetup: h,
+				slot: "mcp-server-card-setup"
 			}) : null,
-			/* @__PURE__ */ l(v, {
+			/* @__PURE__ */ f(y, {
 				name: t,
-				onCustomize: x,
-				toolsLabel: w
+				onCustomize: b,
+				toolsLabel: C
 			})
 		] })
 	});
 }
-var x = s.memo(b);
+var x = u.memo(b);
 //#endregion
-export { x as McpServerCard, p as mcpServerCardShellVariants };
+export { x as McpServerCard };

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

@@ -0,0 +1,13 @@
+import type * as React from "react";
+export type McpSetupCalloutProps = {
+    /** Number of selected items that still need setup. */
+    count: number;
+    onClick?: () => void;
+} & Omit<React.ComponentProps<"button">, "children" | "title" | "onClick">;
+/**
+ * A non-blocking summary of the selection's remaining setup work — the base
+ * `Callout` with the picker's warning treatment and a count chip. Consumers
+ * own the destination (sheet, inline flow, or page).
+ */
+export declare function McpSetupCallout({ count, className, onClick, ...rest }: McpSetupCalloutProps): React.JSX.Element;
+//# sourceMappingURL=setup-callout.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"setup-callout.d.ts","sourceRoot":"","sources":["../../../../../lib/components/ui/molecules/mcp-server-picker/setup-callout.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,KAAK,KAAK,MAAM,OAAO,CAAC;AAIpC,MAAM,MAAM,oBAAoB,GAAG;IACjC,sDAAsD;IACtD,KAAK,EAAE,MAAM,CAAC;IACd,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;CACtB,GAAG,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,QAAQ,CAAC,EAAE,UAAU,GAAG,OAAO,GAAG,SAAS,CAAC,CAAC;AAI3E;;;;GAIG;AACH,wBAAgB,eAAe,CAAC,EAC9B,KAAK,EACL,SAAS,EACT,OAAO,EACP,GAAG,IAAI,EACR,EAAE,oBAAoB,qBA+BtB"}

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

@@ -0,0 +1,27 @@
+"use client";
+"use client";
+import { cn as e } from "../../../../lib/utils.js";
+import { Callout as t } from "../callout.js";
+import { Fragment as n, jsx as r, jsxs as i } from "react/jsx-runtime";
+import { KeyRound as a } from "lucide-react";
+//#region lib/components/ui/molecules/mcp-server-picker/setup-callout.tsx
+var o = "Review setup";
+function s({ count: s, className: c, onClick: l, ...u }) {
+	let d = `${s} ${s === 1 ? "item" : "items"}`;
+	return /* @__PURE__ */ r(t, {
+		...u,
+		actionLabel: o,
+		"aria-label": `${o} for ${d}`,
+		className: e("border-[var(--mcp-setup-border)] bg-[var(--mcp-setup-surface)] hover:bg-[var(--mcp-setup-hover)] dark:border-border/70 dark:bg-muted/15 dark:hover:border-border dark:hover:bg-muted/25", "[&_[data-slot=callout-description]]:text-[var(--mcp-muted-foreground)]", c),
+		description: s === 1 ? "A selected item needs a secret or connection before agents can use it." : "A few selected items need a secret or connection before agents can use them.",
+		icon: /* @__PURE__ */ r(a, { className: "size-4" }),
+		iconClassName: "text-[var(--mcp-setup-foreground)] dark:bg-warning/12 dark:text-warning dark:group-hover:bg-warning/15",
+		onClick: l,
+		title: /* @__PURE__ */ i(n, { children: ["Setup recommended", /* @__PURE__ */ r("span", {
+			className: "rounded-md border border-[var(--mcp-setup-border)] bg-background/60 px-1.5 py-0.5 font-medium text-foreground text-xs tabular-nums dark:border-warning/30 dark:bg-warning/[0.06]",
+			children: d
+		})] })
+	});
+}
+//#endregion
+export { s as McpSetupCallout };

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

@@ -14,9 +14,13 @@ export type McpToolCardProps = {
     selected?: boolean;
     destructive?: boolean;
     readOnly?: boolean;
+    /** Whether this tool still needs configuration before it can run. */
+    needsSetup?: boolean;
+    /** Fired from the setup strip when `needsSetup` is true. */
+    onSetup?: () => void;
     onToggle?: () => void;
 } & Omit<React.ComponentProps<"button">, "onClick" | "onToggle" | "name">;
-declare function McpToolCardImpl({ name, rawName, version, description, selected, destructive, readOnly, onToggle, className, ...rest }: McpToolCardProps): React.JSX.Element;
+declare function McpToolCardImpl({ name, rawName, version, description, selected, destructive, readOnly, needsSetup, onSetup, onToggle, disabled, className, ...rest }: McpToolCardProps): React.JSX.Element;
 export declare const McpToolCard: React.MemoExoticComponent<typeof McpToolCardImpl>;
 export {};
 //# sourceMappingURL=tool-card.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"tool-card.d.ts","sourceRoot":"","sources":["../../../../../lib/components/ui/molecules/mcp-server-picker/tool-card.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAU/B,MAAM,MAAM,gBAAgB,GAAG;IAC7B;;;;OAIG;IACH,IAAI,EAAE,MAAM,CAAC;IACb,iFAAiF;IACjF,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,0EAA0E;IAC1E,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAC;CACvB,GAAG,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,QAAQ,CAAC,EAAE,SAAS,GAAG,UAAU,GAAG,MAAM,CAAC,CAAC;AAE1E,iBAAS,eAAe,CAAC,EACvB,IAAI,EACJ,OAAO,EACP,OAAO,EACP,WAAW,EACX,QAAgB,EAChB,WAAmB,EACnB,QAAgB,EAChB,QAAQ,EACR,SAAS,EACT,GAAG,IAAI,EACR,EAAE,gBAAgB,qBAkFlB;AAED,eAAO,MAAM,WAAW,mDAA8B,CAAC"}
+{"version":3,"file":"tool-card.d.ts","sourceRoot":"","sources":["../../../../../lib/components/ui/molecules/mcp-server-picker/tool-card.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAgB/B,MAAM,MAAM,gBAAgB,GAAG;IAC7B;;;;OAIG;IACH,IAAI,EAAE,MAAM,CAAC;IACb,iFAAiF;IACjF,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,0EAA0E;IAC1E,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,qEAAqE;IACrE,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,4DAA4D;IAC5D,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAC;CACvB,GAAG,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,QAAQ,CAAC,EAAE,SAAS,GAAG,UAAU,GAAG,MAAM,CAAC,CAAC;AAE1E,iBAAS,eAAe,CAAC,EACvB,IAAI,EACJ,OAAO,EACP,OAAO,EACP,WAAW,EACX,QAAgB,EAChB,WAAmB,EACnB,QAAgB,EAChB,UAAkB,EAClB,OAAO,EACP,QAAQ,EACR,QAAQ,EACR,SAAS,EACT,GAAG,IAAI,EACR,EAAE,gBAAgB,qBAkHlB;AAED,eAAO,MAAM,WAAW,mDAA8B,CAAC"}

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

@@ -2,65 +2,72 @@
 "use client";
 import { cn as e } from "../../../../lib/utils.js";
 import { i as t, n, r, t as i } from "../../../../tooltip-BUR7V5Aa.js";
+import { n as a } from "../../../../checkbox-DB9O_Iw9.js";
+import { McpCardHeading as o, mcpSelectionCardShellVariants as s } from "./selection-card-parts.js";
 import "./constants.js";
-import * as a from "react";
-import { jsx as o, jsxs as s } from "react/jsx-runtime";
-import { Check as c } from "lucide-react";
+import { McpCardSetupButton as c } from "./card-setup-button.js";
+import * as l from "react";
+import { jsx as u, jsxs as d } from "react/jsx-runtime";
 //#region lib/components/ui/molecules/mcp-server-picker/tool-card.tsx
-function l({ name: a, rawName: l, version: u, description: d, selected: f = !1, destructive: p = !1, readOnly: m = !1, onToggle: h, className: g, ..._ }) {
-	let v = /* @__PURE__ */ s("button", {
-		..._,
-		"aria-pressed": f,
-		className: e("flex cursor-pointer items-start gap-2.5 rounded-lg border p-3 text-left transition-[background-color,border-color,box-shadow,transform] duration-[var(--duration-normal)] ease-[var(--ease-smooth)] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring/60 active:scale-[0.98] motion-reduce:transition-colors motion-reduce:active:scale-100", f ? "border-foreground/45 bg-muted/20 shadow-[var(--shadow-card)]" : "border-border hover:border-foreground/40 hover:shadow-[var(--shadow-card-hover)]", g),
+function f({ name: l, rawName: f, version: p, description: m, selected: h = !1, destructive: g = !1, readOnly: _ = !1, needsSetup: v = !1, onSetup: y, onToggle: b, disabled: x, className: S, ...C }) {
+	let w = h ? "selected" : "none", T = v ? "needs-setup" : w, E = /* @__PURE__ */ d("button", {
+		...C,
+		"aria-pressed": h,
+		className: e(v ? "rounded-l-lg transition-[background-color] duration-[var(--duration-fast)] ease-[var(--ease-smooth)] hover:bg-foreground/[0.03] focus-visible:ring-inset motion-reduce:transition-colors dark:hover:bg-muted/50" : s({ selectionState: w }), "flex min-w-0 flex-1 cursor-pointer items-start gap-2.5 p-3 text-left focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring/60 motion-reduce:active:scale-100", !v && "active:scale-[0.98]", !v && S),
 		"data-slot": "mcp-tool-card",
-		"data-status": f ? "selected" : "none",
-		onClick: h,
+		"data-status": T,
+		disabled: x,
+		onClick: b,
 		type: "button",
-		children: [/* @__PURE__ */ o("span", {
-			"aria-hidden": !0,
-			className: e("mt-0.5 flex size-4 shrink-0 items-center justify-center rounded-[4px] border transition-colors", f ? "border-primary bg-primary text-primary-foreground" : "border-input"),
-			children: f ? /* @__PURE__ */ o(c, { className: "size-3" }) : null
-		}), /* @__PURE__ */ s("span", {
+		children: [/* @__PURE__ */ u(a, {
+			checked: h,
+			className: "mt-0.5"
+		}), /* @__PURE__ */ d("span", {
 			className: "min-w-0 flex-1",
-			children: [/* @__PURE__ */ s("span", {
+			children: [/* @__PURE__ */ d("span", {
 				className: "flex items-start justify-between gap-3",
-				children: [/* @__PURE__ */ s("span", {
-					className: "flex min-w-0 items-baseline gap-1.5",
-					children: [/* @__PURE__ */ o("span", {
-						className: "truncate font-medium text-sm",
-						children: a
-					}), u ? /* @__PURE__ */ s("span", {
-						className: "shrink-0 font-normal text-muted-foreground text-xs tabular-nums",
-						children: ["v", u]
-					}) : null]
-				}), /* @__PURE__ */ s("span", {
+				children: [/* @__PURE__ */ u(o, {
+					name: l,
+					version: p
+				}), /* @__PURE__ */ d("span", {
 					className: "flex shrink-0 items-center gap-1.5 self-start",
-					children: [p ? /* @__PURE__ */ o("span", {
+					children: [g ? /* @__PURE__ */ u("span", {
 						className: "ds-focus-in rounded-full bg-destructive/10 px-1.5 py-0.5 font-medium text-[10px] text-destructive uppercase tracking-wide",
 						children: "Destructive"
-					}) : null, m ? /* @__PURE__ */ o("span", {
-						className: "ds-focus-in rounded-full bg-muted px-1.5 py-0.5 font-medium text-[10px] text-muted-foreground uppercase tracking-wide",
+					}) : null, _ ? /* @__PURE__ */ u("span", {
+						className: "ds-focus-in rounded-full bg-muted px-1.5 py-0.5 font-medium text-[10px] text-[var(--mcp-muted-foreground)] uppercase tracking-wide",
 						children: "Read-only"
 					}) : null]
 				})]
-			}), d ? /* @__PURE__ */ o("span", {
-				className: "mt-0.5 line-clamp-1 text-muted-foreground text-xs leading-snug",
-				children: d
+			}), m ? /* @__PURE__ */ u("span", {
+				className: "mt-0.5 line-clamp-1 text-[var(--mcp-muted-foreground)] text-xs leading-snug",
+				children: m
 			}) : null]
 		})]
-	});
-	return d ? /* @__PURE__ */ o(r, {
+	}), D = m ? /* @__PURE__ */ u(r, {
 		delay: 600,
-		children: /* @__PURE__ */ s(i, { children: [/* @__PURE__ */ o(t, { render: v }), /* @__PURE__ */ s(n, {
+		children: /* @__PURE__ */ d(i, { children: [/* @__PURE__ */ u(t, { render: E }), /* @__PURE__ */ d(n, {
 			className: "max-w-xs flex-col items-start gap-0.5 text-left text-xs",
 			side: "bottom",
-			children: [l && l !== a ? /* @__PURE__ */ o("span", {
+			children: [f && f !== l ? /* @__PURE__ */ u("span", {
 				className: "font-medium",
-				children: l
-			}) : null, /* @__PURE__ */ o("span", { children: d })]
+				children: f
+			}) : null, /* @__PURE__ */ u("span", { children: m })]
 		})] })
-	}) : v;
+	}) : E;
+	return v ? /* @__PURE__ */ d("div", {
+		className: e(s({ selectionState: w }), "flex items-stretch", w === "none" && "hover:!bg-[var(--mcp-picker-surface)] dark:hover:!bg-muted/45", "has-[button:active]:scale-[0.98] motion-reduce:has-[button:active]:scale-100", S),
+		"data-slot": "mcp-tool-card-frame",
+		children: [D, /* @__PURE__ */ u(c, {
+			className: "rounded-r-lg",
+			description: "This tool needs a secret or an auth provider before it can run.",
+			disabled: x,
+			name: l,
+			onSetup: y,
+			slot: "mcp-tool-card-setup"
+		})]
+	}) : D;
 }
-var u = a.memo(l);
+var p = l.memo(f);
 //#endregion
-export { u as McpToolCard };
+export { p as McpToolCard };

package/dist/components/ui/molecules/mcp-server-picker/toolkit-group-header.js

@@ -22,7 +22,7 @@ function i({ name: i, toolkitId: a, avatarSize: o = "sm", headingAs: s = "h4", c
 					children: i
 				}),
 				c === void 0 ? null : /* @__PURE__ */ n("span", {
-					className: "shrink-0 text-muted-foreground text-xs tabular-nums",
+					className: "shrink-0 text-[var(--mcp-muted-foreground)] text-xs tabular-nums",
 					children: c
 				})
 			]

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

@@ -1,8 +1,10 @@
 export type McpUnoptimizedMatchCardProps = {
     serverCount: number;
     toolCount: number;
+    /** Explanation shown in the desktop-hover and mobile-tap tooltips. */
+    tooltip: string;
     onShow?: () => void;
     className?: string;
 };
-export declare function McpUnoptimizedMatchCard({ serverCount, toolCount, onShow, className, }: McpUnoptimizedMatchCardProps): import("react").JSX.Element | null;
+export declare function McpUnoptimizedMatchCard({ serverCount, toolCount, tooltip, onShow, className, }: McpUnoptimizedMatchCardProps): import("react").JSX.Element | null;
 //# sourceMappingURL=unoptimized-match-card.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"unoptimized-match-card.d.ts","sourceRoot":"","sources":["../../../../../lib/components/ui/molecules/mcp-server-picker/unoptimized-match-card.tsx"],"names":[],"mappings":"AAWA,MAAM,MAAM,4BAA4B,GAAG;IACzC,WAAW,EAAE,MAAM,CAAC;IACpB,SAAS,EAAE,MAAM,CAAC;IAClB,MAAM,CAAC,EAAE,MAAM,IAAI,CAAC;IACpB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,CAAC;AAeF,wBAAgB,uBAAuB,CAAC,EACtC,WAAW,EACX,SAAS,EACT,MAAM,EACN,SAAS,GACV,EAAE,4BAA4B,sCA2E9B"}
+{"version":3,"file":"unoptimized-match-card.d.ts","sourceRoot":"","sources":["../../../../../lib/components/ui/molecules/mcp-server-picker/unoptimized-match-card.tsx"],"names":[],"mappings":"AAaA,MAAM,MAAM,4BAA4B,GAAG;IACzC,WAAW,EAAE,MAAM,CAAC;IACpB,SAAS,EAAE,MAAM,CAAC;IAClB,sEAAsE;IACtE,OAAO,EAAE,MAAM,CAAC;IAChB,MAAM,CAAC,EAAE,MAAM,IAAI,CAAC;IACpB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,CAAC;AAMF,wBAAgB,uBAAuB,CAAC,EACtC,WAAW,EACX,SAAS,EACT,OAAO,EACP,MAAM,EACN,SAAS,GACV,EAAE,4BAA4B,sCAyF9B"}

package/dist/components/ui/molecules/mcp-server-picker/unoptimized-match-card.js

@@ -2,58 +2,60 @@
 "use client";
 import { cn as e } from "../../../../lib/utils.js";
 import { i as t, n, r, t as i } from "../../../../tooltip-BUR7V5Aa.js";
-import { Fragment as a, jsx as o, jsxs as s } from "react/jsx-runtime";
-import { Braces as c, Info as l } from "lucide-react";
+import { IconTile as a } from "../../atoms/icon-tile.js";
+import { mcpSelectionCardShellVariants as o } from "./selection-card-parts.js";
+import { jsx as s, jsxs as c } from "react/jsx-runtime";
+import { Braces as l, Info as u } from "lucide-react";
 //#region lib/components/ui/molecules/mcp-server-picker/unoptimized-match-card.tsx
-function u(e, t) {
+function d(e, t) {
 	return `${e} ${t}${e === 1 ? "" : "s"}`;
 }
-var d = /* @__PURE__ */ o(a, { children: "Tools built around individual actions rather than full tasks. Useful when you need something specific, but your agent often has to combine a few to complete a task." });
-function f({ serverCount: a, toolCount: f, onShow: p, className: m }) {
-	if (a === 0 && f === 0) return null;
-	let h = [a > 0 ? `+${u(a, "server")}` : null, f > 0 ? `+${u(f, "tool")}` : null].filter(Boolean).join(" ");
-	return /* @__PURE__ */ s("div", {
-		className: e("flex h-full w-full items-center gap-2 rounded-lg border border-brand-text/40 border-dashed bg-muted/20 p-3", m),
+function f({ serverCount: f, toolCount: p, tooltip: m, onShow: h, className: g }) {
+	if (f === 0 && p === 0) return null;
+	let _ = [f > 0 ? `+${d(f, "server")}` : null, p > 0 ? `+${d(p, "tool")}` : null].filter(Boolean).join(" ");
+	return /* @__PURE__ */ c("div", {
+		className: e(o({ selectionState: "none" }), "relative flex h-full w-full items-stretch border-[var(--mcp-picker-selected-border)] border-dashed dark:border-brand-text/40", g),
 		"data-slot": "mcp-unoptimized-match-card",
-		children: [/* @__PURE__ */ o(r, { children: /* @__PURE__ */ s(i, { children: [/* @__PURE__ */ s(t, {
-			render: /* @__PURE__ */ o("button", {
-				"aria-label": `Show unoptimized (${h})`,
-				className: "flex min-w-0 flex-1 cursor-pointer items-center gap-2 text-left transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring/60 focus-visible:ring-inset",
-				onClick: p,
+		children: [/* @__PURE__ */ s(r, { children: /* @__PURE__ */ c(i, { children: [/* @__PURE__ */ c(t, {
+			render: /* @__PURE__ */ s("button", {
+				"aria-label": `Show unoptimized (${_})`,
+				className: "flex min-w-0 flex-1 cursor-pointer items-center gap-2.5 rounded-lg px-3 py-2.5 text-left transition-[background-color,color,transform] duration-[var(--duration-fast)] ease-[var(--ease-smooth)] after:absolute after:inset-0 after:rounded-lg after:content-[''] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring/60 focus-visible:ring-inset active:translate-y-px motion-reduce:transition-colors motion-reduce:active:translate-y-0",
+				onClick: h,
 				type: "button"
 			}),
 			children: [
-				/* @__PURE__ */ o(c, {
-					"aria-hidden": !0,
-					className: "size-5 shrink-0 text-brand-text"
+				/* @__PURE__ */ s(a, {
+					className: "text-brand-text",
+					size: "xl",
+					children: /* @__PURE__ */ s(l, { "aria-hidden": !0 })
 				}),
-				/* @__PURE__ */ o("span", {
+				/* @__PURE__ */ s("span", {
 					className: "min-w-0 flex-1 truncate font-medium text-sm",
 					children: "Show unoptimized"
 				}),
-				/* @__PURE__ */ o("span", {
-					className: "shrink-0 whitespace-nowrap text-muted-foreground text-xs tabular-nums",
-					children: h
+				/* @__PURE__ */ s("span", {
+					className: "shrink-0 whitespace-nowrap text-[var(--mcp-muted-foreground)] text-xs tabular-nums",
+					children: _
 				})
 			]
-		}), /* @__PURE__ */ o(n, {
+		}), /* @__PURE__ */ s(n, {
 			className: "max-w-xs",
 			side: "top",
-			children: d
-		})] }) }), /* @__PURE__ */ o(r, { children: /* @__PURE__ */ s(i, { children: [/* @__PURE__ */ o(t, {
-			render: /* @__PURE__ */ o("button", {
+			children: m
+		})] }) }), /* @__PURE__ */ s(r, { children: /* @__PURE__ */ c(i, { children: [/* @__PURE__ */ s(t, {
+			render: /* @__PURE__ */ s("button", {
 				"aria-label": "What are unoptimized tools?",
-				className: "shrink-0 cursor-pointer rounded focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring/60 sm:hidden",
+				className: "relative z-10 flex shrink-0 cursor-pointer items-center rounded-r-lg px-3 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring/60 focus-visible:ring-inset sm:hidden",
 				type: "button"
 			}),
-			children: /* @__PURE__ */ o(l, {
+			children: /* @__PURE__ */ s(u, {
 				"aria-hidden": !0,
-				className: "size-3.5 text-muted-foreground"
+				className: "size-3.5 text-[var(--mcp-muted-foreground)]"
 			})
-		}), /* @__PURE__ */ o(n, {
+		}), /* @__PURE__ */ s(n, {
 			className: "max-w-xs",
 			side: "top",
-			children: d
+			children: m
 		})] }) })]
 	});
 }

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

@@ -11,7 +11,7 @@ import type * as React from "react";
  *   <McpServerPicker>
  *     <McpServerPickerHeader>
  *       <Input ... />
- *       <McpCategoryFilter ... />
+ *       <FilterChipGroup ... />
  *       <McpUnoptimizedToggle ... />
  *     </McpServerPickerHeader>
  *     <McpSelectionSummaryBar ... />
@@ -32,8 +32,11 @@ export declare function McpServerPicker({ className, ...props }: React.Component
  */
 export declare function McpServerPickerHeader({ className, ...props }: React.ComponentProps<"div">): React.JSX.Element;
 /**
- * Responsive grid of server cards. 1 col by default, 2 at `@md`, 3 at
- * `@3xl`, 4 at `@5xl` — sized to comfortably fit `McpServerCard` widths.
+ * Responsive grid of server cards that keeps a roomy card width as the
+ * container grows: one column when narrow, two at `@2xl` (~672px), three at
+ * `@7xl` (~1280px). Capped at three so cards never get cramped or overly wide,
+ * and the name + description always have room. The steps match the ui-kit
+ * picker's 672/1280px column breakpoints so the two stay in sync.
  */
 export declare function McpServerPickerGrid({ className, ...props }: React.ComponentProps<"div">): React.JSX.Element;
 /**

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

@@ -1 +1 @@
-{"version":3,"file":"mcp-server-picker.d.ts","sourceRoot":"","sources":["../../../../lib/components/ui/organisms/mcp-server-picker.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,KAAK,MAAM,OAAO,CAAC;AAGpC;;;;;;;;;;;;;;;;;;;;;;;;;GAyBG;AACH,wBAAgB,eAAe,CAAC,EAC9B,SAAS,EACT,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,qBAQ7B;AAED;;;GAGG;AACH,wBAAgB,qBAAqB,CAAC,EACpC,SAAS,EACT,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,qBAW7B;AAED;;;GAGG;AACH,wBAAgB,mBAAmB,CAAC,EAClC,SAAS,EACT,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,qBAW7B;AAED;;;;GAIG;AACH,wBAAgB,uBAAuB,CAAC,EACtC,SAAS,EACT,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,qBAW7B"}
+{"version":3,"file":"mcp-server-picker.d.ts","sourceRoot":"","sources":["../../../../lib/components/ui/organisms/mcp-server-picker.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,KAAK,MAAM,OAAO,CAAC;AAGpC;;;;;;;;;;;;;;;;;;;;;;;;;GAyBG;AACH,wBAAgB,eAAe,CAAC,EAC9B,SAAS,EACT,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,qBAQ7B;AAED;;;GAGG;AACH,wBAAgB,qBAAqB,CAAC,EACpC,SAAS,EACT,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,qBAW7B;AAED;;;;;;GAMG;AACH,wBAAgB,mBAAmB,CAAC,EAClC,SAAS,EACT,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,qBAW7B;AAED;;;;GAIG;AACH,wBAAgB,uBAAuB,CAAC,EACtC,SAAS,EACT,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,qBAa7B"}