@arcadeai/design-system 3.46.0 → 3.48.0

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

@@ -0,0 +1,103 @@
+"use client";
+"use client";
+import { cn as e } from "../../../../lib/utils.js";
+import { a as t, d as n, i as r, n as i, o as a, r as o, s, t as c } from "../../../../alert-dialog-tBMDYzJ3.js";
+import { t as l } from "../../../../switch-CP9j-8px.js";
+import { McpSectionCallout as u } from "./section-callout.js";
+import { Fragment as d, jsx as f, jsxs as p } from "react/jsx-runtime";
+//#region lib/components/ui/molecules/mcp-server-picker/recommended-tools.tsx
+function m({ state: e, onToggle: t, ...n }) {
+	let r = e === "on";
+	return /* @__PURE__ */ f(u, {
+		...n,
+		action: /* @__PURE__ */ p(d, { children: [/* @__PURE__ */ f(l, {
+			"aria-label": `Recommended tools ${r ? "on" : "off"}`,
+			checked: r,
+			onCheckedChange: t,
+			size: "sm"
+		}), /* @__PURE__ */ f("span", {
+			className: "w-6 text-left font-medium tabular-nums",
+			children: r ? "On" : "Off"
+		})] }),
+		"data-slot": "mcp-recommended-tools-callout",
+		"data-status": e,
+		description: r ? "Arcade selects and keeps your tools up to date for you. New ones are added automatically as they become available, so there's nothing to manage." : "You're managing your own tool selection. New tools from Arcade won't be added automatically.",
+		title: "Recommended tools"
+	});
+}
+function h({ open: e, selectedCount: t, onKeep: i, onClear: l, onCancel: u }) {
+	let d = t && t > 0 ? `The ${t} selected tool${t === 1 ? "" : "s"} stay as your own set. They won't change as Arcade updates its recommendations.` : "Your selected tools stay as your own set. They won't change as Arcade updates its recommendations.";
+	return /* @__PURE__ */ f(c, {
+		onOpenChange: (e) => {
+			e || u();
+		},
+		open: e,
+		children: /* @__PURE__ */ p(r, { children: [
+			/* @__PURE__ */ f(s, { children: /* @__PURE__ */ f(n, { children: "Turn off recommended tools?" }) }),
+			/* @__PURE__ */ p("div", {
+				className: "flex flex-col gap-2",
+				children: [/* @__PURE__ */ f(g, {
+					description: d,
+					onClick: i,
+					title: "Keep my tools"
+				}), /* @__PURE__ */ f(g, {
+					description: "Remove the recommended tools and build your own selection from scratch.",
+					onClick: l,
+					title: "Clear & start fresh",
+					tone: "destructive"
+				})]
+			}),
+			/* @__PURE__ */ f(a, { children: /* @__PURE__ */ f(o, { children: "Cancel" }) })
+		] })
+	});
+}
+function g({ title: t, description: n, tone: r = "neutral", onClick: i }) {
+	return /* @__PURE__ */ p("button", {
+		className: e("flex w-full cursor-pointer flex-col gap-0.5 rounded-lg border p-3 text-left transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring/60", r === "destructive" ? "border-border hover:border-destructive/50 hover:bg-destructive/5" : "border-border hover:border-foreground/40 hover:bg-muted/50"),
+		onClick: i,
+		type: "button",
+		children: [/* @__PURE__ */ f("span", {
+			className: e("font-medium text-sm", r === "destructive" ? "text-destructive" : "text-foreground"),
+			children: t
+		}), /* @__PURE__ */ f("span", {
+			className: "text-muted-foreground text-xs leading-snug",
+			children: n
+		})]
+	});
+}
+var _ = {
+	"remove-tool": {
+		title: "Remove this recommended tool?",
+		description: "Removing it will turn off recommended tools. Arcade will stop keeping your selection up to date automatically.",
+		confirmLabel: "Remove"
+	},
+	"remove-server": {
+		title: "Remove this server's recommended tools?",
+		description: "Removing them will turn off recommended tools. Arcade will stop keeping your selection up to date automatically.",
+		confirmLabel: "Remove"
+	},
+	"clear-all": {
+		title: "Clear your selection?",
+		description: "This removes all your selected tools, including the recommended ones.",
+		confirmLabel: "Clear all"
+	}
+};
+function v({ kind: e, open: l, onConfirm: u, onCancel: d }) {
+	let m = _[e];
+	return /* @__PURE__ */ f(c, {
+		onOpenChange: (e) => {
+			e || d();
+		},
+		open: l,
+		children: /* @__PURE__ */ p(r, {
+			size: "sm",
+			children: [/* @__PURE__ */ p(s, { children: [/* @__PURE__ */ f(n, { children: m.title }), m.description ? /* @__PURE__ */ f(t, { children: m.description }) : null] }), /* @__PURE__ */ p(a, { children: [/* @__PURE__ */ f(o, { children: "Cancel" }), /* @__PURE__ */ f(i, {
+				onClick: u,
+				variant: "destructive",
+				children: m.confirmLabel
+			})] })]
+		})
+	});
+}
+//#endregion
+export { m as McpRecommendedToolsCallout, h as McpRecommendedToolsDeactivateDialog, v as McpRecommendedToolsOptOutDialog };

package/dist/components/ui/molecules/mcp-server-picker/review-count-chip.d.ts

@@ -0,0 +1,22 @@
+import type * as React from "react";
+export type McpReviewCountChipProps = {
+    /** Total selected tools — shown as the primary count. */
+    toolCount: number;
+    /** Total selected MCP servers — shown as the secondary count after a divider. */
+    serverCount: number;
+    /**
+     * The chip is currently in its pressed/open state — used when a click on
+     * the chip toggles a review pane. Adds an external ring so the active
+     * state reads at a glance without being confused with hover.
+     */
+    active?: boolean;
+} & Omit<React.ComponentProps<"button">, "children" | "type">;
+/**
+ * Compact button-chip summarising the current selection — "N tools · M
+ * servers". Sits in the picker's selection summary bar and toggles the grouped
+ * review pane when clicked. Resting tint hints "clickable"; the active state
+ * adds an external ring (same family as the server pills' focus ring) so the
+ * user can see where the click landed.
+ */
+export declare function McpReviewCountChip({ toolCount, serverCount, active, className, "aria-label": ariaLabel, ...rest }: McpReviewCountChipProps): React.JSX.Element;
+//# sourceMappingURL=review-count-chip.d.ts.map

package/dist/components/ui/molecules/mcp-server-picker/review-count-chip.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"review-count-chip.d.ts","sourceRoot":"","sources":["../../../../../lib/components/ui/molecules/mcp-server-picker/review-count-chip.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,KAAK,MAAM,OAAO,CAAC;AAGpC,MAAM,MAAM,uBAAuB,GAAG;IACpC,yDAAyD;IACzD,SAAS,EAAE,MAAM,CAAC;IAClB,iFAAiF;IACjF,WAAW,EAAE,MAAM,CAAC;IACpB;;;;OAIG;IACH,MAAM,CAAC,EAAE,OAAO,CAAC;CAClB,GAAG,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,QAAQ,CAAC,EAAE,UAAU,GAAG,MAAM,CAAC,CAAC;AAE9D;;;;;;GAMG;AACH,wBAAgB,kBAAkB,CAAC,EACjC,SAAS,EACT,WAAW,EACX,MAAc,EACd,SAAS,EACT,YAAY,EAAE,SAAS,EACvB,GAAG,IAAI,EACR,EAAE,uBAAuB,qBAkCzB"}

package/dist/components/ui/molecules/mcp-server-picker/review-count-chip.js

@@ -0,0 +1,42 @@
+"use client";
+"use client";
+import { cn as e } from "../../../../lib/utils.js";
+import { jsx as t, jsxs as n } from "react/jsx-runtime";
+//#region lib/components/ui/molecules/mcp-server-picker/review-count-chip.tsx
+function r({ toolCount: r, serverCount: i, active: a = !1, className: o, "aria-label": s, ...c }) {
+	let l = r === 1 ? "tool" : "tools", u = i === 1 ? "server" : "servers", d = s ?? `View selection: ${r} ${l}, ${i} ${u}`;
+	return /* @__PURE__ */ n("button", {
+		...c,
+		"aria-expanded": a,
+		"aria-label": d,
+		className: e("flex shrink-0 cursor-pointer items-center gap-1.5 rounded-md bg-foreground/[0.04] px-2 py-1 font-medium text-xs transition-[background-color,box-shadow,color] duration-[var(--duration-fast)] ease-[var(--ease-smooth)] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring/60 motion-reduce:transition-colors", a ? "text-foreground ring-2 ring-ring/60" : "hover:bg-foreground/10", o),
+		"data-slot": "mcp-review-count-chip",
+		"data-status": a ? "open" : "closed",
+		type: "button",
+		children: [
+			/* @__PURE__ */ t("span", {
+				className: "tabular-nums",
+				children: r
+			}),
+			/* @__PURE__ */ t("span", {
+				className: "text-muted-foreground",
+				children: l
+			}),
+			/* @__PURE__ */ t("span", {
+				"aria-hidden": !0,
+				className: "text-muted-foreground/60",
+				children: "·"
+			}),
+			/* @__PURE__ */ t("span", {
+				className: "tabular-nums",
+				children: i
+			}),
+			/* @__PURE__ */ t("span", {
+				className: "text-muted-foreground",
+				children: u
+			})
+		]
+	});
+}
+//#endregion
+export { r as McpReviewCountChip };

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

@@ -0,0 +1,18 @@
+import { Tabs } from '../../atoms/tabs';
+import type * as React from "react";
+export type McpSearchScope = "servers" | "tools";
+export type McpSearchScopeTabsProps = {
+    active: McpSearchScope;
+    serverCount: number;
+    toolCount: number;
+    onChange?: (scope: McpSearchScope) => void;
+} & Omit<React.ComponentProps<typeof Tabs>, "value" | "onValueChange" | "onChange">;
+/**
+ * MCP servers / Tools scope switcher shown above search results. Composes the
+ * design-system `Tabs` primitive (line variant) instead of reimplementing
+ * tablist semantics — so the underline-on-active look, keyboard nav, and
+ * focus-ring all come from the same source as every other tab in the app.
+ * It renders tabs and picks one-of-two, so it's named `…Tabs`, not `…Toggle`.
+ */
+export declare function McpSearchScopeTabs({ active, serverCount, toolCount, onChange, ...rest }: McpSearchScopeTabsProps): React.JSX.Element;
+//# sourceMappingURL=search-scope-tabs.d.ts.map

package/dist/components/ui/molecules/mcp-server-picker/search-scope-tabs.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"search-scope-tabs.d.ts","sourceRoot":"","sources":["../../../../../lib/components/ui/molecules/mcp-server-picker/search-scope-tabs.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,KAAK,MAAM,OAAO,CAAC;AACpC,OAAO,EAAE,IAAI,EAAyB,MAAM,kBAAkB,CAAC;AAE/D,MAAM,MAAM,cAAc,GAAG,SAAS,GAAG,OAAO,CAAC;AAEjD,MAAM,MAAM,uBAAuB,GAAG;IACpC,MAAM,EAAE,cAAc,CAAC;IACvB,WAAW,EAAE,MAAM,CAAC;IACpB,SAAS,EAAE,MAAM,CAAC;IAClB,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,cAAc,KAAK,IAAI,CAAC;CAC5C,GAAG,IAAI,CACN,KAAK,CAAC,cAAc,CAAC,OAAO,IAAI,CAAC,EACjC,OAAO,GAAG,eAAe,GAAG,UAAU,CACvC,CAAC;AAEF;;;;;;GAMG;AACH,wBAAgB,kBAAkB,CAAC,EACjC,MAAM,EACN,WAAW,EACX,SAAS,EACT,QAAQ,EACR,GAAG,IAAI,EACR,EAAE,uBAAuB,qBAwBzB"}

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

@@ -0,0 +1,31 @@
+"use client";
+"use client";
+import { i as e, r as t, t as n } from "../../../../tabs-C7JA8G0W.js";
+import { jsx as r, jsxs as i } from "react/jsx-runtime";
+//#region lib/components/ui/molecules/mcp-server-picker/search-scope-tabs.tsx
+function a({ active: a, serverCount: o, toolCount: s, onChange: c, ...l }) {
+	return /* @__PURE__ */ r(n, {
+		...l,
+		"aria-label": "Search result scope",
+		onValueChange: (e) => c?.(e),
+		value: a,
+		children: /* @__PURE__ */ i(t, {
+			variant: "line",
+			children: [/* @__PURE__ */ i(e, {
+				value: "servers",
+				children: ["MCP servers", /* @__PURE__ */ r("span", {
+					className: "text-muted-foreground tabular-nums",
+					children: o
+				})]
+			}), /* @__PURE__ */ i(e, {
+				value: "tools",
+				children: ["Tools", /* @__PURE__ */ r("span", {
+					className: "text-muted-foreground tabular-nums",
+					children: s
+				})]
+			})]
+		})
+	});
+}
+//#endregion
+export { a as McpSearchScopeTabs };

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

@@ -0,0 +1,21 @@
+import type * as React from "react";
+export type McpSectionCalloutProps = {
+    /** Section title — rendered semibold. */
+    title: React.ReactNode;
+    /** Short explanatory paragraph beneath the title. */
+    description: React.ReactNode;
+    /**
+     * Optional inline control rendered next to the title (e.g. an on/off switch).
+     * Sits on the title row, close enough that the eye reads it and the title as
+     * one unit.
+     */
+    action?: React.ReactNode;
+} & Omit<React.ComponentProps<"div">, "title" | "children">;
+/**
+ * Flat section explainer shown above a stream of picker results — a semibold
+ * title with an optional inline control, and a muted description beneath. No
+ * card chrome, so it reads as part of the results rather than a competing
+ * surface. The shared layout behind the Recommended and Unoptimized callouts.
+ */
+export declare function McpSectionCallout({ title, description, action, className, ...rest }: McpSectionCalloutProps): React.JSX.Element;
+//# sourceMappingURL=section-callout.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"section-callout.d.ts","sourceRoot":"","sources":["../../../../../lib/components/ui/molecules/mcp-server-picker/section-callout.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,KAAK,MAAM,OAAO,CAAC;AAGpC,MAAM,MAAM,sBAAsB,GAAG;IACnC,yCAAyC;IACzC,KAAK,EAAE,KAAK,CAAC,SAAS,CAAC;IACvB,qDAAqD;IACrD,WAAW,EAAE,KAAK,CAAC,SAAS,CAAC;IAC7B;;;;OAIG;IACH,MAAM,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC1B,GAAG,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,EAAE,OAAO,GAAG,UAAU,CAAC,CAAC;AAE5D;;;;;GAKG;AACH,wBAAgB,iBAAiB,CAAC,EAChC,KAAK,EACL,WAAW,EACX,MAAM,EACN,SAAS,EACT,GAAG,IAAI,EACR,EAAE,sBAAsB,qBAgBxB"}

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

@@ -0,0 +1,23 @@
+"use client";
+"use client";
+import { cn as e } from "../../../../lib/utils.js";
+import { jsx as t, jsxs as n } from "react/jsx-runtime";
+//#region lib/components/ui/molecules/mcp-server-picker/section-callout.tsx
+function r({ title: r, description: i, action: a, className: o, ...s }) {
+	return /* @__PURE__ */ n("div", {
+		className: e("px-0.5 py-1", o),
+		...s,
+		children: [a ? /* @__PURE__ */ n("div", {
+			className: "inline-flex items-center gap-3 font-semibold text-foreground text-sm",
+			children: [/* @__PURE__ */ t("span", { children: r }), a]
+		}) : /* @__PURE__ */ t("p", {
+			className: "font-semibold text-foreground text-sm",
+			children: r
+		}), /* @__PURE__ */ t("p", {
+			className: "mt-1.5 text-[13px] text-muted-foreground leading-relaxed",
+			children: i
+		})]
+	});
+}
+//#endregion
+export { r as McpSectionCallout };

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

@@ -0,0 +1,39 @@
+import type * as React from "react";
+export type McpSectionNavHeaderProps = {
+    /**
+     * Identity slot — typically a `McpToolkitGroupHeader` or a plain title with
+     * trailing count. Rendered after the back affordance and the divider.
+     */
+    identity: React.ReactNode;
+    /**
+     * Optional right-aligned actions (e.g. "Select all" / "Clear" buttons). Wraps
+     * to a second row at narrow widths instead of squeezing the identity slot.
+     */
+    actions?: React.ReactNode;
+    /**
+     * Click handler for the back affordance. When provided, the default
+     * "← MCP servers" button is rendered automatically.
+     */
+    onBack?: () => void;
+    /**
+     * Label for the back button (and its `aria-label`). Override to match the
+     * surface being returned to — e.g. `"Tools"` or `"Results"`.
+     */
+    backLabel?: string;
+    /**
+     * Render a custom back affordance. Overrides `onBack` + `backLabel` if both
+     * are passed — useful when the back action needs to be a link instead of a
+     * button.
+     */
+    back?: React.ReactNode;
+} & Omit<React.ComponentProps<"div">, "children">;
+/**
+ * Section navigation strip used at the top of a drill-in or review pane:
+ * a back affordance, a separator, identity (avatar + title + count), and an
+ * optional cluster of actions on the right. Used as the recurring header for
+ * `ToolsView` and `SelectedToolsReview` inside the MCP server picker.
+ *
+ * Pure layout — the caller owns what goes in each slot.
+ */
+export declare function McpSectionNavHeader({ identity, actions, back, onBack, backLabel, className, ...rest }: McpSectionNavHeaderProps): React.JSX.Element;
+//# sourceMappingURL=section-nav-header.d.ts.map

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

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

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

@@ -0,0 +1,43 @@
+"use client";
+"use client";
+import { cn as e } from "../../../../lib/utils.js";
+import { t } from "../../../../button-BNOmhdpM.js";
+import { jsx as n, jsxs as r } from "react/jsx-runtime";
+import { ChevronLeft as i } from "lucide-react";
+//#region lib/components/ui/molecules/mcp-server-picker/section-nav-header.tsx
+function a({ identity: a, actions: o, back: s, onBack: c, backLabel: l = "MCP servers", className: u, ...d }) {
+	let f = s ?? (c ? /* @__PURE__ */ r(t, {
+		"aria-label": `Back to ${l.toLowerCase()}`,
+		onClick: c,
+		size: "sm",
+		variant: "ghost",
+		children: [/* @__PURE__ */ n(i, {
+			"aria-hidden": !0,
+			"data-icon": "inline-start"
+		}), l]
+	}) : null);
+	return /* @__PURE__ */ r("div", {
+		...d,
+		className: e("flex flex-wrap items-center justify-between gap-x-3 gap-y-2", u),
+		"data-slot": "mcp-section-nav-header",
+		children: [/* @__PURE__ */ r("div", {
+			className: "flex min-w-0 items-center gap-3",
+			children: [
+				f,
+				f ? /* @__PURE__ */ n("span", {
+					"aria-hidden": !0,
+					className: "h-5 w-px shrink-0 bg-border"
+				}) : null,
+				/* @__PURE__ */ n("div", {
+					className: "flex min-w-0 items-center gap-2",
+					children: a
+				})
+			]
+		}), o ? /* @__PURE__ */ n("div", {
+			className: "flex items-center gap-1",
+			children: o
+		}) : null]
+	});
+}
+//#endregion
+export { a as McpSectionNavHeader };

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

@@ -0,0 +1,16 @@
+import type * as React from "react";
+export type McpServerAvatarStackItem = {
+    id: string;
+    name: string;
+    toolkitId?: string;
+    selectedCount?: number;
+    total?: number;
+};
+export type McpServerAvatarStackProps = {
+    servers: McpServerAvatarStackItem[];
+    maxVisible?: number;
+    overflowLabel?: string;
+    onOpenMcpServer?: (id: string) => void;
+} & Omit<React.ComponentProps<"span">, "children">;
+export declare function McpServerAvatarStack({ servers, maxVisible, overflowLabel, onOpenMcpServer, className, ...rest }: McpServerAvatarStackProps): React.JSX.Element | null;
+//# sourceMappingURL=server-avatar-stack.d.ts.map

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

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

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

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

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

@@ -0,0 +1,41 @@
+import { ClassProp } from 'class-variance-authority/types';
+import * as React from "react";
+export type McpServerCardSelectionState = "none" | "partial" | "selected";
+declare const shellVariants: (props?: ({
+    selectionState?: "none" | "selected" | "partial" | "setup-none" | "setup-selected" | "setup-partial" | null | undefined;
+} & ClassProp) | undefined) => string;
+export type McpServerCardProps = {
+    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`.
+     */
+    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
+     * pair when stacked together.
+     */
+    version?: string;
+    toolCount: number;
+    selectedToolCount?: number;
+    selectionState?: McpServerCardSelectionState;
+    isUnoptimized?: boolean;
+    /**
+     * 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.
+     */
+    needsSetup?: boolean;
+    /** Fired when a `needsSetup` card is clicked. */
+    onSetup?: () => void;
+    onToggle?: () => void;
+    onCustomize?: () => void;
+} & Omit<React.ComponentProps<"div">, "onToggle">;
+declare function McpServerCardImpl({ name, description, toolkitId, version, toolCount, selectedToolCount, selectionState, isUnoptimized, needsSetup, 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

@@ -0,0 +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;AAW/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,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB;;;;;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;AA6IlD,iBAAS,iBAAiB,CAAC,EACzB,IAAI,EACJ,WAAW,EACX,SAAS,EACT,OAAO,EACP,SAAS,EACT,iBAAqB,EACrB,cAAuB,EACvB,aAAqB,EACrB,UAAkB,EAClB,OAAO,EACP,QAAQ,EACR,WAAW,EACX,SAAS,EACT,GAAG,IAAI,EACR,EAAE,kBAAkB,qBAmCpB;AAED,eAAO,MAAM,aAAa,qDAAgC,CAAC;AAC3D,OAAO,EAAE,aAAa,IAAI,0BAA0B,EAAE,CAAC"}