@arcadeai/design-system 5.0.2 → 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-ZIywOFGf.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

@@ -1,66 +1,73 @@
 "use client";
 "use client";
 import { cn as e } from "../../../../lib/utils.js";
-import { i as t, n, r, t as i } from "../../../../tooltip-ZIywOFGf.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/tool-recommendations.d.ts

@@ -0,0 +1,12 @@
+import type * as React from "react";
+export type McpToolRecommendationsState = "on" | "off";
+export type McpToolRecommendationsProps = {
+    state: McpToolRecommendationsState;
+    onToggle?: (checked: boolean) => void;
+} & Omit<React.ComponentProps<"label">, "children" | "onToggle">;
+/**
+ * Presentational Tool Recommendations opt-in for the MCP picker. The whole card
+ * is a `<label>` for the checkbox, so a click anywhere on it toggles.
+ */
+export declare function McpToolRecommendations({ state, onToggle, className, ...rest }: McpToolRecommendationsProps): React.JSX.Element;
+//# sourceMappingURL=tool-recommendations.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"tool-recommendations.d.ts","sourceRoot":"","sources":["../../../../../lib/components/ui/molecules/mcp-server-picker/tool-recommendations.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,KAAK,MAAM,OAAO,CAAC;AAKpC,MAAM,MAAM,2BAA2B,GAAG,IAAI,GAAG,KAAK,CAAC;AAEvD,MAAM,MAAM,2BAA2B,GAAG;IACxC,KAAK,EAAE,2BAA2B,CAAC;IACnC,QAAQ,CAAC,EAAE,CAAC,OAAO,EAAE,OAAO,KAAK,IAAI,CAAC;CACvC,GAAG,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,OAAO,CAAC,EAAE,UAAU,GAAG,UAAU,CAAC,CAAC;AAEjE;;;GAGG;AACH,wBAAgB,sBAAsB,CAAC,EACrC,KAAK,EACL,QAAQ,EACR,SAAS,EACT,GAAG,IAAI,EACR,EAAE,2BAA2B,qBAoC7B"}

package/dist/components/ui/molecules/mcp-server-picker/{tool-search-band.js → tool-recommendations.js}

@@ -1,20 +1,20 @@
 "use client";
 "use client";
 import { cn as e } from "../../../../lib/utils.js";
-import { t } from "../../../../checkbox-CZViOGvt.js";
+import { t } from "../../../../checkbox-DB9O_Iw9.js";
 import { useId as n } from "react";
 import { jsx as r, jsxs as i } from "react/jsx-runtime";
-//#region lib/components/ui/molecules/mcp-server-picker/tool-search-band.tsx
+//#region lib/components/ui/molecules/mcp-server-picker/tool-recommendations.tsx
 function a({ state: a, onToggle: o, className: s, ...c }) {
 	let l = a === "on", u = n();
 	return /* @__PURE__ */ i("label", {
 		...c,
 		className: e("flex cursor-pointer items-start gap-3 rounded-lg border px-4 py-3 transition-colors", l ? "border-foreground/20 bg-muted/30" : "border-border/60 bg-muted/10 hover:border-foreground/25", s),
-		"data-slot": "mcp-tool-search-band",
+		"data-slot": "mcp-tool-recommendations",
 		"data-status": a,
 		htmlFor: u,
 		children: [/* @__PURE__ */ r(t, {
-			"aria-label": `Personalized Tool Search ${l ? "on" : "off"}`,
+			"aria-label": `Tool Recommendations ${l ? "on" : "off"}`,
 			checked: l,
 			className: "mt-0.5",
 			id: u,
@@ -23,7 +23,7 @@ function a({ state: a, onToggle: o, className: s, ...c }) {
 			className: "min-w-0",
 			children: [/* @__PURE__ */ r("p", {
 				className: "font-semibold text-[15px] text-foreground leading-5",
-				children: "Personalized Tool Search"
+				children: "Tool Recommendations"
 			}), /* @__PURE__ */ r("p", {
 				className: "mt-1 text-[13px] text-muted-foreground leading-snug",
 				children: "Your agent fetches only the tools relevant to each task, saving tokens and keeping responses focused."
@@ -32,4 +32,4 @@ function a({ state: a, onToggle: o, className: s, ...c }) {
 	});
 }
 //#endregion
-export { a as McpToolSearchBand };
+export { a as McpToolRecommendations };

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

@@ -1,16 +1,16 @@
-import { VariantProps } from 'class-variance-authority';
+import { IconTileProps } from '../../atoms/icon-tile';
 import { ClassProp } from 'class-variance-authority/types';
 import * as React from "react";
-declare const avatarVariants: (props?: ({
-    size?: "xs" | "sm" | "lg" | "md" | null | undefined;
-} & ClassProp) | undefined) => string;
 export type McpToolkitAvatarProps = {
     /** Toolkit display name — used for the letter fallback. */
     name: string;
     /** Toolkit ID — used to look up the brand icon. Omit to force fallback. */
     toolkitId?: string;
-} & VariantProps<typeof avatarVariants> & Omit<React.ComponentProps<"span">, "children">;
+} & Pick<IconTileProps, "size"> & Omit<React.ComponentProps<"span">, "children">;
 declare function McpToolkitAvatarImpl({ name, toolkitId, size, className, ...rest }: McpToolkitAvatarProps): React.JSX.Element;
 export declare const McpToolkitAvatar: React.MemoExoticComponent<typeof McpToolkitAvatarImpl>;
-export { avatarVariants as mcpToolkitAvatarVariants };
+export declare const mcpToolkitAvatarVariants: (props?: ({
+    size?: "xs" | "sm" | "lg" | "md" | "xl" | null | undefined;
+} & ClassProp) | undefined) => string;
+export {};
 //# sourceMappingURL=toolkit-avatar.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"toolkit-avatar.d.ts","sourceRoot":"","sources":["../../../../../lib/components/ui/molecules/mcp-server-picker/toolkit-avatar.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAO,KAAK,YAAY,EAAE,MAAM,0BAA0B,CAAC;AAClE,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AA4B/B,QAAA,MAAM,cAAc;;8EAenB,CAAC;AASF,MAAM,MAAM,qBAAqB,GAAG;IAClC,2DAA2D;IAC3D,IAAI,EAAE,MAAM,CAAC;IACb,2EAA2E;IAC3E,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,GAAG,YAAY,CAAC,OAAO,cAAc,CAAC,GACrC,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,MAAM,CAAC,EAAE,UAAU,CAAC,CAAC;AAEjD,iBAAS,oBAAoB,CAAC,EAC5B,IAAI,EACJ,SAAS,EACT,IAAW,EACX,SAAS,EACT,GAAG,IAAI,EACR,EAAE,qBAAqB,qBAsCvB;AAED,eAAO,MAAM,gBAAgB,wDAAmC,CAAC;AACjE,OAAO,EAAE,cAAc,IAAI,wBAAwB,EAAE,CAAC"}
+{"version":3,"file":"toolkit-avatar.d.ts","sourceRoot":"","sources":["../../../../../lib/components/ui/molecules/mcp-server-picker/toolkit-avatar.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAEL,KAAK,aAAa,EAEnB,MAAM,iCAAiC,CAAC;AA2BzC,MAAM,MAAM,qBAAqB,GAAG;IAClC,2DAA2D;IAC3D,IAAI,EAAE,MAAM,CAAC;IACb,2EAA2E;IAC3E,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,GAAG,IAAI,CAAC,aAAa,EAAE,MAAM,CAAC,GAC7B,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,MAAM,CAAC,EAAE,UAAU,CAAC,CAAC;AAEjD,iBAAS,oBAAoB,CAAC,EAC5B,IAAI,EACJ,SAAS,EACT,IAAW,EACX,SAAS,EACT,GAAG,IAAI,EACR,EAAE,qBAAqB,qBA8BvB;AAED,eAAO,MAAM,gBAAgB,wDAAmC,CAAC;AACjE,eAAO,MAAM,wBAAwB;;8EAAmB,CAAC"}

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

@@ -1,12 +1,12 @@
 "use client";
 "use client";
 import { cn as e } from "../../../../lib/utils.js";
-import { t } from "../../../../dist-Ber_p4PA.js";
-import { resolveToolkitIcon as n } from "../../../../metadata/toolkit-icons.js";
-import * as r from "react";
-import { jsx as i } from "react/jsx-runtime";
+import { IconTile as t, iconTileVariants as n } from "../../atoms/icon-tile.js";
+import { resolveToolkitIcon as r } from "../../../../metadata/toolkit-icons.js";
+import * as i from "react";
+import { jsx as a } from "react/jsx-runtime";
 //#region lib/components/ui/molecules/mcp-server-picker/toolkit-avatar.tsx
-var a = [
+var o = [
 	"text-brand-text",
 	"text-brand-fuchsia",
 	"text-brand-red",
@@ -14,43 +14,31 @@ var a = [
 	"text-brand-navy",
 	"text-brand-green"
 ];
-function o(e) {
+function s(e) {
 	let t = 0;
 	for (let n of e) t = (t * 31 + n.charCodeAt(0)) % 1000003;
-	return a[t % a.length] ?? a[0];
+	return o[t % o.length] ?? o[0];
 }
-var s = t("inline-flex shrink-0 items-center justify-center font-semibold uppercase", {
-	variants: { size: {
-		xs: "size-4 rounded-sm text-[10px]",
-		sm: "size-5 rounded-sm text-[10px]",
-		md: "size-7 rounded-md text-xs",
-		lg: "size-9 rounded-md text-sm"
-	} },
-	defaultVariants: { size: "md" }
-}), c = {
-	xs: "size-3",
-	sm: "size-3.5",
-	md: "size-4",
-	lg: "size-5"
-};
-function l({ name: t, toolkitId: r, size: a = "md", className: l, ...u }) {
-	let { Icon: d, hasBrandIcon: f } = n(r), p = a ?? "md";
-	return f ? /* @__PURE__ */ i("span", {
-		...u,
+function c({ name: n, toolkitId: i, size: o = "md", className: c, ...l }) {
+	let { Icon: u, hasBrandIcon: d } = r(i);
+	return d ? /* @__PURE__ */ a(t, {
+		...l,
 		"aria-hidden": !0,
-		className: e(s({ size: p }), "bg-muted/40", l),
+		className: c,
 		"data-slot": "mcp-toolkit-avatar",
 		"data-variant": "brand",
-		children: /* @__PURE__ */ i(d, { className: c[p] })
-	}) : /* @__PURE__ */ i("span", {
-		...u,
+		size: o,
+		children: /* @__PURE__ */ a(u, {})
+	}) : /* @__PURE__ */ a(t, {
+		...l,
 		"aria-hidden": !0,
-		className: e(s({ size: p }), "bg-muted/40", o(t), l),
+		className: e(s(n), c),
 		"data-slot": "mcp-toolkit-avatar",
 		"data-variant": "fallback",
-		children: t.charAt(0)
+		size: o,
+		children: n.charAt(0)
 	});
 }
-var u = r.memo(l);
+var l = i.memo(c), u = n;
 //#endregion
-export { u as McpToolkitAvatar, s as mcpToolkitAvatarVariants };
+export { l as McpToolkitAvatar, u as mcpToolkitAvatarVariants };