@arcadeai/design-system 3.49.0 → 4.0.0

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

@@ -4,18 +4,18 @@ 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 McpServerCardProps = {
+type McpServerCardBaseProps = {
     name: string;
     description?: string;
     /**
      * Toolkit id used to resolve the brand icon. Falls back to a letter avatar
-     * when no brand mark is registered — the single fallback path shared with
-     * `McpToolkitChip` and the summary bar, via `McpToolkitAvatar`.
+     * when no brand mark is registered. The fallback is shared with
+     * `McpToolkitChip` and the summary bar via `McpToolkitAvatar`.
      */
     toolkitId?: string;
     /**
-     * Optional server version, shown muted next to the name (e.g. "v1.2.4") —
-     * matches the `version` slot on `McpToolCard` so the two cards read as a
+     * Optional server version, shown muted next to the name (e.g. "v1.2.4").
+     * Matches the `version` slot on `McpToolCard` so the two cards read as a
      * pair when stacked together.
      */
     version?: string;
@@ -23,18 +23,40 @@ export type McpServerCardProps = {
     selectedToolCount?: number;
     selectionState?: McpServerCardSelectionState;
     /**
-     * The server requires a secret (API key, OAuth, etc.) that isn't configured
-     * yet, so its tools can't be selected. The card becomes a single clickable
-     * "Set up" affordance that fires `onSetup` (intended to open a setup dialog)
-     * and drops the toggle/customize controls until it's configured.
+     * Whether the server still needs configuration before its tools can run.
+     * The card remains selectable regardless. Blocking selection based on setup
+     * status is the consumer's responsibility, not the card's.
      */
     needsSetup?: boolean;
-    /** Fired when a `needsSetup` card is clicked. */
+    /** Fired from the setup strip when `needsSetup` is true. */
     onSetup?: () => void;
-    onToggle?: () => void;
-    onCustomize?: () => void;
 } & Omit<React.ComponentProps<"div">, "onToggle">;
-declare function McpServerCardImpl({ name, description, toolkitId, version, toolCount, selectedToolCount, selectionState, needsSetup, onSetup, onToggle, onCustomize, className, ...rest }: McpServerCardProps): React.JSX.Element;
+type McpServerCardToggleProps = McpServerCardBaseProps & {
+    /**
+     * How the card body behaves on click:
+     * - `"toggle"` (default): the body adds/removes the whole server (`onToggle`),
+     *   with a separate right-edge control to drill into individual tools.
+     */
+    interaction?: "toggle";
+    onToggle: () => void;
+    onCustomize: () => void;
+};
+type McpServerCardDrillProps = McpServerCardBaseProps & {
+    /**
+     * `"drill"`: the card has no whole-server toggle. Clicking it opens the
+     * server's tool list via `onCustomize` so the user can pick a specific tool.
+     *
+     * Use this in single-tool contexts such as a tool-execution page, where the
+     * goal is to select one tool to run rather than to add an entire server's
+     * tools to a configuration. Selecting the server is not meaningful in that
+     * context; the card is a navigation step toward the tool.
+     */
+    interaction: "drill";
+    onCustomize: () => void;
+    onToggle?: never;
+};
+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 };
 //# 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,MAAM,MAAM,kBAAkB,GAAG;IAC/B,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;;;;;OAKG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,iDAAiD;IACjD,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAC;IACtB,WAAW,CAAC,EAAE,MAAM,IAAI,CAAC;CAC1B,GAAG,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,EAAE,UAAU,CAAC,CAAC;AA0IlD,iBAAS,iBAAiB,CAAC,EACzB,IAAI,EACJ,WAAW,EACX,SAAS,EACT,OAAO,EACP,SAAS,EACT,iBAAqB,EACrB,cAAuB,EACvB,UAAkB,EAClB,OAAO,EACP,QAAQ,EACR,WAAW,EACX,SAAS,EACT,GAAG,IAAI,EACR,EAAE,kBAAkB,qBAkCpB;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":"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"}

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

@@ -5,10 +5,10 @@ import { t } from "../../../../dist-Ber_p4PA.js";
 import { i as n, n as r, r as i, t as a } from "../../../../tooltip-34vRSwJG.js";
 import { McpToolkitAvatar as o } from "./toolkit-avatar.js";
 import * as s from "react";
-import { jsx as c, jsxs as l } from "react/jsx-runtime";
-import { ChevronRight as u, KeyRound as d } from "lucide-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";
 //#region lib/components/ui/molecules/mcp-server-picker/server-card.tsx
-var f = 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", {
+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)]",
@@ -19,100 +19,148 @@ var f = t("flex items-stretch rounded-lg border transition-[background-color,bor
 	} },
 	defaultVariants: { selectionState: "none" }
 });
-function p(e, t) {
+function m(e, t) {
 	return t ? e === "selected" ? "setup-selected" : e === "partial" ? "setup-partial" : "setup-none" : e;
 }
-function m(e) {
+function h(e) {
 	return e === "selected" ? !0 : e === "partial" ? "mixed" : !1;
 }
-function h({ name: e, description: t, toolkitId: n, version: r, selectionState: i, onToggle: a }) {
-	return /* @__PURE__ */ l("button", {
+function g({ name: e, description: t, toolkitId: n, version: r, selectionState: i, onToggle: a }) {
+	return /* @__PURE__ */ u("button", {
 		"aria-label": `${i === "selected" ? "Remove all" : "Add all"} ${e} tools`,
-		"aria-pressed": m(i),
+		"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,
 		type: "button",
-		children: [/* @__PURE__ */ c(o, {
+		children: [/* @__PURE__ */ l(o, {
 			name: e,
 			size: "md",
 			toolkitId: n
-		}), /* @__PURE__ */ l("span", {
+		}), /* @__PURE__ */ u("span", {
 			className: "flex min-w-0 flex-1 items-baseline gap-1.5",
-			children: [/* @__PURE__ */ c("span", {
+			children: [/* @__PURE__ */ l("span", {
 				className: "min-w-0 truncate font-medium text-base capitalize",
 				children: e
-			}), r ? /* @__PURE__ */ l("span", {
+			}), r ? /* @__PURE__ */ u("span", {
 				className: "shrink-0 font-normal text-muted-foreground text-xs tabular-nums",
 				children: ["v", r]
 			}) : null]
 		})]
 	});
 }
-function g({ name: e, toolsLabel: t, onCustomize: n }) {
-	return /* @__PURE__ */ l("button", {
+function _({ hasSetup: t, name: n, description: r, toolkitId: i, version: a, toolsLabel: s, onCustomize: c }) {
+	return /* @__PURE__ */ u("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,
+		type: "button",
+		children: [
+			/* @__PURE__ */ l(o, {
+				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__ */ u("span", {
+				className: "flex shrink-0 items-center gap-1.5 text-muted-foreground text-xs",
+				children: [/* @__PURE__ */ l("span", {
+					className: "whitespace-nowrap tabular-nums",
+					children: s
+				}), /* @__PURE__ */ l(d, {
+					"aria-hidden": !0,
+					className: "size-3 transition-transform duration-[var(--duration-fast)] ease-[var(--ease-smooth)] motion-reduce:transition-none"
+				})]
+			})
+		]
+	});
+}
+function v({ name: e, toolsLabel: t, onCustomize: n }) {
+	return /* @__PURE__ */ u("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",
 		"data-slot": "mcp-server-card-customize",
 		onClick: n,
 		type: "button",
-		children: [/* @__PURE__ */ c("span", {
+		children: [/* @__PURE__ */ l("span", {
 			className: "whitespace-nowrap tabular-nums",
 			children: t
-		}), /* @__PURE__ */ c(u, {
+		}), /* @__PURE__ */ l(d, {
 			"aria-hidden": !0,
 			className: "size-3 transition-transform duration-[var(--duration-fast)] ease-[var(--ease-smooth)] motion-reduce:transition-none"
 		})]
 	});
 }
-function _({ name: e, onSetup: t }) {
-	return /* @__PURE__ */ c(i, { children: /* @__PURE__ */ l(a, { children: [/* @__PURE__ */ c(n, { render: /* @__PURE__ */ c("button", {
-		"aria-label": `Set up ${e}`,
-		className: "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",
+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: t,
+		onClick: s,
 		type: "button",
-		children: /* @__PURE__ */ c(d, {
+		children: /* @__PURE__ */ l(f, {
 			"aria-hidden": !0,
 			className: "size-4"
 		})
-	}) }), /* @__PURE__ */ l(r, {
+	}) }), /* @__PURE__ */ u(r, {
 		className: "max-w-56 flex-col items-start gap-0.5 text-left",
 		side: "top",
-		children: [/* @__PURE__ */ c("span", {
+		children: [/* @__PURE__ */ l("span", {
 			className: "font-semibold",
 			children: "Setup required"
-		}), /* @__PURE__ */ c("span", { children: "This server isn't ready yet. It needs some configuration before its tools work." })]
+		}), /* @__PURE__ */ l("span", { children: "This server isn't ready yet. It needs some configuration before its tools work." })]
 	})] }) });
 }
-function v({ name: t, description: n, toolkitId: r, version: i, toolCount: a, selectedToolCount: o = 0, selectionState: s = "none", needsSetup: u = !1, onSetup: d, onToggle: m, onCustomize: v, className: y, ...b }) {
-	let x = s === "partial" ? `${o}/${a} tools` : `${a} ${a === 1 ? "tool" : "tools"}`;
+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", {
-		...b,
-		className: e(f({ selectionState: p(s, u) }), y),
+		...C,
+		className: e(p({ selectionState: m(s, d) }), S),
 		"data-slot": "mcp-server-card",
-		"data-status": u ? "needs-setup" : s,
-		children: [
-			/* @__PURE__ */ c(h, {
+		"data-status": d ? "needs-setup" : s,
+		children: f === "drill" ? /* @__PURE__ */ u(c, { children: [/* @__PURE__ */ l(_, {
+			description: n,
+			hasSetup: d,
+			name: t,
+			onCustomize: x,
+			toolkitId: r,
+			toolsLabel: w,
+			version: i
+		}), d ? /* @__PURE__ */ l(y, {
+			isTerminal: !0,
+			name: t,
+			onSetup: h
+		}) : null] }) : /* @__PURE__ */ u(c, { children: [
+			/* @__PURE__ */ l(g, {
 				description: n,
 				name: t,
-				onToggle: m,
+				onToggle: b,
 				selectionState: s,
 				toolkitId: r,
 				version: i
 			}),
-			u ? /* @__PURE__ */ c(_, {
+			d ? /* @__PURE__ */ l(y, {
 				name: t,
-				onSetup: d
+				onSetup: h
 			}) : null,
-			/* @__PURE__ */ c(g, {
+			/* @__PURE__ */ l(v, {
 				name: t,
-				onCustomize: v,
-				toolsLabel: x
+				onCustomize: x,
+				toolsLabel: w
 			})
-		]
+		] })
 	});
 }
-var y = s.memo(v);
+var x = s.memo(b);
 //#endregion
-export { y as McpServerCard, f as mcpServerCardShellVariants };
+export { x as McpServerCard, p as mcpServerCardShellVariants };

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;AAS/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":"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"}

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

@@ -2,6 +2,7 @@
 "use client";
 import { cn as e } from "../../../../lib/utils.js";
 import { i as t, n, r, t as i } from "../../../../tooltip-34vRSwJG.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";
@@ -48,14 +49,17 @@ function l({ name: a, rawName: l, version: u, description: d, selected: f = !1,
 			}) : null]
 		})]
 	});
-	return d ? /* @__PURE__ */ o(r, { children: /* @__PURE__ */ s(i, { children: [/* @__PURE__ */ o(t, { render: v }), /* @__PURE__ */ s(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", {
-			className: "font-medium",
-			children: l
-		}) : null, /* @__PURE__ */ o("span", { children: d })]
-	})] }) }) : v;
+	return d ? /* @__PURE__ */ o(r, {
+		delay: 600,
+		children: /* @__PURE__ */ s(i, { children: [/* @__PURE__ */ o(t, { render: v }), /* @__PURE__ */ s(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", {
+				className: "font-medium",
+				children: l
+			}) : null, /* @__PURE__ */ o("span", { children: d })]
+		})] })
+	}) : v;
 }
 var u = a.memo(l);
 //#endregion

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

@@ -0,0 +1,8 @@
+export type McpUnoptimizedMatchCardProps = {
+    serverCount: number;
+    toolCount: number;
+    onShow?: () => void;
+    className?: string;
+};
+export declare function McpUnoptimizedMatchCard({ serverCount, toolCount, 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

@@ -0,0 +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"}

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

@@ -0,0 +1,61 @@
+"use client";
+"use client";
+import { cn as e } from "../../../../lib/utils.js";
+import { i as t, n, r, t as i } from "../../../../tooltip-34vRSwJG.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";
+//#region lib/components/ui/molecules/mcp-server-picker/unoptimized-match-card.tsx
+function u(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),
+		"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,
+				type: "button"
+			}),
+			children: [
+				/* @__PURE__ */ o(c, {
+					"aria-hidden": !0,
+					className: "size-5 shrink-0 text-brand-text"
+				}),
+				/* @__PURE__ */ o("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__ */ o(n, {
+			className: "max-w-xs",
+			side: "top",
+			children: d
+		})] }) }), /* @__PURE__ */ o(r, { children: /* @__PURE__ */ s(i, { children: [/* @__PURE__ */ o(t, {
+			render: /* @__PURE__ */ o("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",
+				type: "button"
+			}),
+			children: /* @__PURE__ */ o(l, {
+				"aria-hidden": !0,
+				className: "size-3.5 text-muted-foreground"
+			})
+		}), /* @__PURE__ */ o(n, {
+			className: "max-w-xs",
+			side: "top",
+			children: d
+		})] }) })]
+	});
+}
+//#endregion
+export { f as McpUnoptimizedMatchCard };

package/dist/components/ui/molecules/scroll-fade-area.d.ts

@@ -5,6 +5,12 @@ export type ScrollFadeAreaProps = {
     className?: string;
     /** Classes for the inner scroll viewport (padding, child spacing). */
     viewportClassName?: string;
+    /**
+     * Receives the scroll viewport element (or `null` on unmount). Use when a
+     * child needs the scroll container itself — e.g. a virtualizer that reads
+     * scroll position from it.
+     */
+    viewportRef?: (el: HTMLDivElement | null) => void;
 };
 /**
  * Vertical scroll area with "there's more" affordances on whichever edge still
@@ -22,5 +28,5 @@ export type ScrollFadeAreaProps = {
  * background-colored surface; on a `card`/`muted` surface the gradient seams.
  * Such callers want the mask treatment instead.
  */
-export declare function ScrollFadeArea({ children, className, viewportClassName, }: ScrollFadeAreaProps): import("react").JSX.Element;
+export declare function ScrollFadeArea({ children, className, viewportClassName, viewportRef, }: ScrollFadeAreaProps): import("react").JSX.Element;
 //# sourceMappingURL=scroll-fade-area.d.ts.map

package/dist/components/ui/molecules/scroll-fade-area.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"scroll-fade-area.d.ts","sourceRoot":"","sources":["../../../../lib/components/ui/molecules/scroll-fade-area.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAIvC,MAAM,MAAM,mBAAmB,GAAG;IAChC,QAAQ,EAAE,SAAS,CAAC;IACpB,yEAAyE;IACzE,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,sEAAsE;IACtE,iBAAiB,CAAC,EAAE,MAAM,CAAC;CAC5B,CAAC;AAEF;;;;;;;;;;;;;;;GAeG;AACH,wBAAgB,cAAc,CAAC,EAC7B,QAAQ,EACR,SAAS,EACT,iBAAiB,GAClB,EAAE,mBAAmB,+BAiCrB"}
+{"version":3,"file":"scroll-fade-area.d.ts","sourceRoot":"","sources":["../../../../lib/components/ui/molecules/scroll-fade-area.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,KAAK,SAAS,EAAuB,MAAM,OAAO,CAAC;AAI5D,MAAM,MAAM,mBAAmB,GAAG;IAChC,QAAQ,EAAE,SAAS,CAAC;IACpB,yEAAyE;IACzE,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,sEAAsE;IACtE,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B;;;;OAIG;IACH,WAAW,CAAC,EAAE,CAAC,EAAE,EAAE,cAAc,GAAG,IAAI,KAAK,IAAI,CAAC;CACnD,CAAC;AAEF;;;;;;;;;;;;;;;GAeG;AACH,wBAAgB,cAAc,CAAC,EAC7B,QAAQ,EACR,SAAS,EACT,iBAAiB,EACjB,WAAW,GACZ,EAAE,mBAAmB,+BAkDrB"}

package/dist/components/ui/molecules/scroll-fade-area.js

@@ -2,24 +2,29 @@
 "use client";
 import { cn as e } from "../../../lib/utils.js";
 import { useScrollFade as t } from "../../../hooks/use-scroll-fade.js";
-import { jsx as n, jsxs as r } from "react/jsx-runtime";
+import { useCallback as n, useRef as r } from "react";
+import { jsx as i, jsxs as a } from "react/jsx-runtime";
 //#region lib/components/ui/molecules/scroll-fade-area.tsx
-function i({ children: i, className: a, viewportClassName: o }) {
-	let s = t("y"), c = [s.edges.start && "inset 0 8px 12px -10px color-mix(in oklch, var(--shadow-color) 3%, transparent)", s.edges.end && "inset 0 -12px 16px -10px color-mix(in oklch, var(--shadow-color) 6%, transparent)"].filter(Boolean).join(", ") || void 0;
-	return /* @__PURE__ */ r("div", {
-		className: e("relative min-h-0 flex-1", a),
+function o({ children: o, className: s, viewportClassName: c, viewportRef: l }) {
+	let u = t("y"), d = r(l);
+	d.current = l;
+	let f = n((e) => {
+		u.ref(e), d.current?.(e);
+	}, [u.ref]), p = [u.edges.start && "inset 0 8px 12px -10px color-mix(in oklch, var(--shadow-color) 3%, transparent)", u.edges.end && "inset 0 -12px 16px -10px color-mix(in oklch, var(--shadow-color) 6%, transparent)"].filter(Boolean).join(", ") || void 0;
+	return /* @__PURE__ */ a("div", {
+		className: e("relative min-h-0 flex-1", s),
 		children: [
-			s.edges.start ? /* @__PURE__ */ n("div", { className: "pointer-events-none absolute inset-x-0 top-0 z-10 h-8 bg-gradient-to-b from-background to-transparent dark:from-background/40" }) : null,
-			s.edges.end ? /* @__PURE__ */ n("div", { className: "pointer-events-none absolute inset-x-0 bottom-0 z-10 h-10 bg-gradient-to-t from-background to-transparent dark:from-background/40" }) : null,
-			/* @__PURE__ */ n("div", {
-				className: e("h-full overflow-y-auto transition-shadow duration-200", o),
-				onScroll: s.onScroll,
-				ref: s.ref,
-				style: { boxShadow: c },
-				children: i
+			u.edges.start ? /* @__PURE__ */ i("div", { className: "pointer-events-none absolute inset-x-0 top-0 z-10 h-8 bg-gradient-to-b from-background to-transparent dark:from-background/40" }) : null,
+			u.edges.end ? /* @__PURE__ */ i("div", { className: "pointer-events-none absolute inset-x-0 bottom-0 z-10 h-10 bg-gradient-to-t from-background to-transparent dark:from-background/40" }) : null,
+			/* @__PURE__ */ i("div", {
+				className: e("h-full overflow-y-auto transition-shadow duration-200", c),
+				onScroll: u.onScroll,
+				ref: f,
+				style: { boxShadow: p },
+				children: o
 			})
 		]
 	});
 }
 //#endregion
-export { i as ScrollFadeArea };
+export { o as ScrollFadeArea };