@arcadeai/design-system 3.46.0 → 3.48.0

package/dist/components/ui/organisms/mcp-selection-summary-bar.d.ts

@@ -0,0 +1,71 @@
+import { McpRecommendedMcpServer } from '../molecules/mcp-server-picker/recommended-toolkits-chip';
+import { McpReviewCountChipProps } from '../molecules/mcp-server-picker/review-count-chip';
+import { McpToolkitChipProps } from '../molecules/mcp-server-picker/toolkit-chip';
+import type * as React from "react";
+export type McpSelectionSummaryMcpServer = {
+    /** Stable React key — typically the MCP server name or id. */
+    id: string;
+} & Omit<McpToolkitChipProps, "onOpen" | "onRemove">;
+export type McpSelectionSummaryBarProps = {
+    /**
+     * Selected MCP servers, in display order. An empty array renders the idle
+     * placeholder; the bar keeps its height so the surrounding layout doesn't
+     * shift on first selection.
+     *
+     * Servers in `recommendedMcpServers` are NOT also included here — the
+     * consumer separates the two lists so this bar always renders the
+     * grouped recommended chip first, with the rest of the per-server chips
+     * trailing.
+     */
+    mcpServers: McpSelectionSummaryMcpServer[];
+    /**
+     * Recommended MCP servers collapsed into a single grouped chip. When this
+     * array is non-empty the bar renders one "Recommended tools" chip in
+     * front of the per-server chips; the chip's popover lists every entry.
+     */
+    recommendedMcpServers?: McpRecommendedMcpServer[];
+    /**
+     * Total selected tools across all MCP servers. Drives the count chip's
+     * primary number.
+     */
+    toolCount: number;
+    /**
+     * Whether the grouped review is currently open — flips the count chip to
+     * its pressed state so the user can see where the click landed.
+     */
+    reviewing?: boolean;
+    /**
+     * Whether the grouped review is currently filtered to recommended servers —
+     * flips the recommended chip into its active ring state.
+     */
+    reviewingRecommended?: boolean;
+    /** Custom aria-label for the count chip. */
+    reviewLabel?: McpReviewCountChipProps["aria-label"];
+    /** Open the grouped selected-tools view. */
+    onReview?: () => void;
+    /** Open the grouped review scoped to the recommended set. */
+    onReviewRecommended?: () => void;
+    /** Open this MCP server's tools to adjust selection. */
+    onOpenMcpServer?: (id: string) => void;
+    /** Remove this MCP server (and all of its selected tools). */
+    onRemoveMcpServer?: (id: string) => void;
+    /** Remove the entire recommended set in one go. */
+    onRemoveRecommended?: () => void;
+    /** Clear the entire selection. */
+    onClear?: () => void;
+    /** Copy override for the empty / no-selection-yet placeholder. */
+    emptyMessage?: string;
+} & Omit<React.ComponentProps<"div">, "children" | "onReview">;
+/**
+ * Persistent selection summary used inside the MCP picker shell: the total
+ * tool count (clickable — opens the grouped selected-tools view), the
+ * grouped recommended chip (if any), one removable chip per other selected
+ * MCP server, and a clear-all on the right. Sits above the results so the
+ * selection is obvious at a glance and easy to prune.
+ *
+ * Pure presentational — the consumer supplies the ordered server list and
+ * the callbacks. Domain-specific ordering (e.g. "newest-selected first")
+ * belongs in the consumer.
+ */
+export declare function McpSelectionSummaryBar({ mcpServers, recommendedMcpServers, toolCount, reviewing, reviewingRecommended, reviewLabel, onReview, onReviewRecommended, onOpenMcpServer, onRemoveMcpServer, onRemoveRecommended, onClear, emptyMessage, className, ...rest }: McpSelectionSummaryBarProps): React.JSX.Element;
+//# sourceMappingURL=mcp-selection-summary-bar.d.ts.map

package/dist/components/ui/organisms/mcp-selection-summary-bar.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"mcp-selection-summary-bar.d.ts","sourceRoot":"","sources":["../../../../lib/components/ui/organisms/mcp-selection-summary-bar.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,KAAK,MAAM,OAAO,CAAC;AAEpC,OAAO,EACL,KAAK,uBAAuB,EAE7B,MAAM,uEAAuE,CAAC;AAC/E,OAAO,EAEL,KAAK,uBAAuB,EAC7B,MAAM,+DAA+D,CAAC;AACvE,OAAO,EAEL,KAAK,mBAAmB,EACzB,MAAM,0DAA0D,CAAC;AAIlE,MAAM,MAAM,4BAA4B,GAAG;IACzC,8DAA8D;IAC9D,EAAE,EAAE,MAAM,CAAC;CACZ,GAAG,IAAI,CAAC,mBAAmB,EAAE,QAAQ,GAAG,UAAU,CAAC,CAAC;AAErD,MAAM,MAAM,2BAA2B,GAAG;IACxC;;;;;;;;;OASG;IACH,UAAU,EAAE,4BAA4B,EAAE,CAAC;IAC3C;;;;OAIG;IACH,qBAAqB,CAAC,EAAE,uBAAuB,EAAE,CAAC;IAClD;;;OAGG;IACH,SAAS,EAAE,MAAM,CAAC;IAClB;;;OAGG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB;;;OAGG;IACH,oBAAoB,CAAC,EAAE,OAAO,CAAC;IAC/B,4CAA4C;IAC5C,WAAW,CAAC,EAAE,uBAAuB,CAAC,YAAY,CAAC,CAAC;IACpD,4CAA4C;IAC5C,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAC;IACtB,6DAA6D;IAC7D,mBAAmB,CAAC,EAAE,MAAM,IAAI,CAAC;IACjC,wDAAwD;IACxD,eAAe,CAAC,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,IAAI,CAAC;IACvC,8DAA8D;IAC9D,iBAAiB,CAAC,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,IAAI,CAAC;IACzC,mDAAmD;IACnD,mBAAmB,CAAC,EAAE,MAAM,IAAI,CAAC;IACjC,kCAAkC;IAClC,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,kEAAkE;IAClE,YAAY,CAAC,EAAE,MAAM,CAAC;CACvB,GAAG,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,EAAE,UAAU,GAAG,UAAU,CAAC,CAAC;AAE/D;;;;;;;;;;GAUG;AACH,wBAAgB,sBAAsB,CAAC,EACrC,UAAU,EACV,qBAA0B,EAC1B,SAAS,EACT,SAAiB,EACjB,oBAA4B,EAC5B,WAAW,EACX,QAAQ,EACR,mBAAmB,EACnB,eAAe,EACf,iBAAiB,EACjB,mBAAmB,EACnB,OAAO,EACP,YAAsC,EACtC,SAAS,EACT,GAAG,IAAI,EACR,EAAE,2BAA2B,qBA2E7B"}

package/dist/components/ui/organisms/mcp-selection-summary-bar.js

@@ -0,0 +1,61 @@
+"use client";
+"use client";
+import { cn as e } from "../../../lib/utils.js";
+import { t } from "../../../button-BNOmhdpM.js";
+import { useScrollFade as n } from "../../../hooks/use-scroll-fade.js";
+import { McpReviewCountChip as r } from "../molecules/mcp-server-picker/review-count-chip.js";
+import { McpToolkitChip as i } from "../molecules/mcp-server-picker/toolkit-chip.js";
+import { McpRecommendedToolkitsChip as a } from "../molecules/mcp-server-picker/recommended-toolkits-chip.js";
+import { Fragment as o, jsx as s, jsxs as c } from "react/jsx-runtime";
+//#region lib/components/ui/organisms/mcp-selection-summary-bar.tsx
+function l({ mcpServers: l, recommendedMcpServers: u = [], toolCount: d, reviewing: f = !1, reviewingRecommended: p = !1, reviewLabel: m, onReview: h, onReviewRecommended: g, onOpenMcpServer: _, onRemoveMcpServer: v, onRemoveRecommended: y, onClear: b, emptyMessage: x = "No tools selected yet", className: S, ...C }) {
+	let w = l.length + u.length, T = w > 0, E = n("x");
+	return /* @__PURE__ */ s("div", {
+		...C,
+		className: e("@container flex min-h-9 items-center gap-2 rounded-lg bg-muted/30 px-2.5 py-1.5", S),
+		"data-slot": "mcp-selection-summary-bar",
+		"data-status": T ? "filled" : "empty",
+		children: T ? /* @__PURE__ */ c(o, { children: [
+			/* @__PURE__ */ s(r, {
+				active: f,
+				"aria-label": m,
+				onClick: h,
+				serverCount: w,
+				toolCount: d
+			}),
+			/* @__PURE__ */ s("span", {
+				"aria-hidden": !0,
+				className: "@md:block hidden h-5 w-px shrink-0 bg-border"
+			}),
+			/* @__PURE__ */ c("div", {
+				className: "@md:flex hidden min-w-0 flex-1 gap-1.5 overflow-x-auto p-0.5 [-ms-overflow-style:none] [scrollbar-width:none] [&::-webkit-scrollbar]:hidden",
+				onScroll: E.onScroll,
+				ref: E.ref,
+				style: E.style,
+				children: [u.length > 0 ? /* @__PURE__ */ s(a, {
+					active: p,
+					mcpServers: u,
+					onOpenMcpServer: _,
+					onRemove: y,
+					onReview: g
+				}) : null, l.map(({ id: e, ...t }) => /* @__PURE__ */ s(i, {
+					...t,
+					onOpen: _ ? () => _(e) : void 0,
+					onRemove: v ? () => v(e) : void 0
+				}, e))]
+			}),
+			b ? /* @__PURE__ */ s(t, {
+				className: "ml-auto",
+				onClick: b,
+				size: "xs",
+				variant: "ghost",
+				children: "Clear all"
+			}) : null
+		] }) : /* @__PURE__ */ s("span", {
+			className: "flex shrink-0 items-center px-2 py-1 font-medium text-muted-foreground text-xs",
+			children: x
+		})
+	});
+}
+//#endregion
+export { l as McpSelectionSummaryBar };

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

@@ -0,0 +1,45 @@
+import type * as React from "react";
+/**
+ * Layout shell for the MCP server picker. Pure presentational composition —
+ * the consumer (ui-kit) supplies the molecules (search input, filter chips,
+ * server cards, summary chips, etc.) and all the domain data + callbacks
+ * via children. The shell only owns spacing, container queries, and the
+ * `data-slot` hooks for queryability.
+ *
+ * Typical composition:
+ *
+ *   <McpServerPicker>
+ *     <McpServerPickerHeader>
+ *       <Input ... />
+ *       <McpCategoryFilter ... />
+ *       <McpUnoptimizedToggle ... />
+ *     </McpServerPickerHeader>
+ *     <McpSelectionSummaryBar ... />
+ *     <McpServerPickerGrid>
+ *       {servers.map(s => <McpServerCard key={s.id} ... />)}
+ *     </McpServerPickerGrid>
+ *   </McpServerPicker>
+ *
+ * Each subcomponent is a thin <div> with consistent layout — no internal
+ * state, no domain knowledge. Selection / search / filter behavior belongs
+ * in the consumer (ui-kit), where the picker's domain state already lives
+ * (`useToolSelection`, `usePickerSearch`, etc.).
+ */
+export declare function McpServerPicker({ className, ...props }: React.ComponentProps<"div">): React.JSX.Element;
+/**
+ * Toolbar row — search input, category filter, unoptimized toggle, etc.
+ * Stacks on narrow containers, flows inline at `@3xl`.
+ */
+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.
+ */
+export declare function McpServerPickerGrid({ className, ...props }: React.ComponentProps<"div">): React.JSX.Element;
+/**
+ * Responsive grid of tool cards (denser than the server grid). 1 col by
+ * default, 2 at `@xl`, 3 at `@4xl` — sized to fit `McpToolCard` widths.
+ * Used inside drill-in views and grouped tool sections.
+ */
+export declare function McpServerPickerToolGrid({ className, ...props }: React.ComponentProps<"div">): React.JSX.Element;
+//# sourceMappingURL=mcp-server-picker.d.ts.map

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

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

package/dist/components/ui/organisms/mcp-server-picker.js

@@ -0,0 +1,35 @@
+"use client";
+"use client";
+import { cn as e } from "../../../lib/utils.js";
+import { jsx as t } from "react/jsx-runtime";
+//#region lib/components/ui/organisms/mcp-server-picker.tsx
+function n({ className: n, ...r }) {
+	return /* @__PURE__ */ t("div", {
+		...r,
+		className: e("@container space-y-3", n),
+		"data-slot": "mcp-server-picker"
+	});
+}
+function r({ className: n, ...r }) {
+	return /* @__PURE__ */ t("div", {
+		...r,
+		className: e("flex @3xl:flex-row flex-col @3xl:items-center @3xl:gap-3 gap-2", n),
+		"data-slot": "mcp-server-picker-header"
+	});
+}
+function i({ className: n, ...r }) {
+	return /* @__PURE__ */ t("div", {
+		...r,
+		className: e("grid @3xl:grid-cols-3 @5xl:grid-cols-4 @md:grid-cols-2 grid-cols-1 gap-2", n),
+		"data-slot": "mcp-server-picker-grid"
+	});
+}
+function a({ className: n, ...r }) {
+	return /* @__PURE__ */ t("div", {
+		...r,
+		className: e("grid @4xl:grid-cols-3 @xl:grid-cols-2 grid-cols-1 gap-2", n),
+		"data-slot": "mcp-server-picker-tool-grid"
+	});
+}
+//#endregion
+export { n as McpServerPicker, i as McpServerPickerGrid, r as McpServerPickerHeader, a as McpServerPickerToolGrid };

package/dist/components/ui/pages/login-page.js

@@ -2,13 +2,13 @@ import { cn as e } from "../../../lib/utils.js";
 import { t } from "../../../button-BNOmhdpM.js";
 import { ArcadeGrid as n } from "../atoms/arcade-grid.js";
 import { ArcadeLogo as r } from "../atoms/icons/arcade-logo.js";
-import { AuthTemplate as i, AuthTemplateCard as a, AuthTemplateContent as o, AuthTemplateDescription as s, AuthTemplateFooter as c, AuthTemplateHeader as l, AuthTemplateLegal as u, AuthTemplateLegalLink as d, AuthTemplateLogo as f, AuthTemplatePrompt as p, AuthTemplatePromptLink as m, AuthTemplateTitle as h, AuthTemplateVideoBackground as g } from "../templates/auth-template.js";
-import { PUBLIC_VIDEO_URL as _ } from "../../../metadata/constants.js";
+import { PUBLIC_VIDEO_URL as i } from "../../../metadata/constants.js";
+import { AuthTemplate as a, AuthTemplateCard as o, AuthTemplateContent as s, AuthTemplateDescription as c, AuthTemplateFooter as l, AuthTemplateHeader as u, AuthTemplateLegal as d, AuthTemplateLegalLink as f, AuthTemplateLogo as p, AuthTemplatePrompt as m, AuthTemplatePromptLink as h, AuthTemplateTitle as g, AuthTemplateVideoBackground as _ } from "../templates/auth-template.js";
 import { Fragment as v } from "react";
 import { jsx as y, jsxs as b } from "react/jsx-runtime";
 import { Loader2 as x, LogIn as S } from "lucide-react";
 //#region lib/components/ui/pages/login-page.tsx
-var C = `${_}/A_L_Orange_Pink.mp4`;
+var C = `${i}/A_L_Orange_Pink.mp4`;
 function w({ isLoading: e }) {
 	return e ? /* @__PURE__ */ y(x, { className: "size-5 animate-spin" }) : /* @__PURE__ */ y(S, { className: "size-5" });
 }
@@ -20,20 +20,20 @@ function T({ termsHref: e, privacyHref: t }) {
 		href: t,
 		label: "Privacy Policy"
 	}].filter((e) => !!e);
-	return n.length === 0 ? null : /* @__PURE__ */ b(u, { children: [
+	return n.length === 0 ? null : /* @__PURE__ */ b(d, { children: [
 		"By continuing, you agree to the",
 		" ",
-		n.map((e, t) => /* @__PURE__ */ b(v, { children: [t > 0 && /* @__PURE__ */ y("span", { children: " and " }), /* @__PURE__ */ y(d, {
+		n.map((e, t) => /* @__PURE__ */ b(v, { children: [t > 0 && /* @__PURE__ */ y("span", { children: " and " }), /* @__PURE__ */ y(f, {
 			href: e.href,
 			children: e.label
 		})] }, e.href))
 	] });
 }
-function E({ isLoading: u = !1, loadingText: d = "Authenticating...", onSubmit: _, privacyHref: v, registerHref: x, submitText: S = "Sign in with Arcade", termsHref: E, videoSrc: D = C }) {
-	let O = u ? d : S, k = x || E || v;
-	return /* @__PURE__ */ b(i, { children: [
+function E({ isLoading: i = !1, loadingText: d = "Authenticating...", onSubmit: f, privacyHref: v, registerHref: x, submitText: S = "Sign in with Arcade", termsHref: E, videoSrc: D = C }) {
+	let O = i ? d : S, k = x || E || v;
+	return /* @__PURE__ */ b(a, { children: [
 		/* @__PURE__ */ y("div", { className: "absolute -inset-4 z-0 bg-gradient-to-br from-rose-500/70 via-pink-400/50 to-amber-500/70 opacity-60 blur-lg brightness-50" }),
-		D && /* @__PURE__ */ y(g, { src: D }),
+		D && /* @__PURE__ */ y(_, { src: D }),
 		/* @__PURE__ */ y("div", {
 			className: "absolute inset-0 z-1 opacity-[0.01]",
 			children: /* @__PURE__ */ y(n, {
@@ -41,26 +41,26 @@ function E({ isLoading: u = !1, loadingText: d = "Authenticating...", onSubmit:
 				fill: "currentColor"
 			})
 		}),
-		/* @__PURE__ */ y(f, { children: /* @__PURE__ */ y(r, { className: "h-12 w-auto text-zinc-900 dark:text-white" }) }),
-		/* @__PURE__ */ b(a, { children: [
-			/* @__PURE__ */ b(l, { children: [/* @__PURE__ */ y(h, { children: "Welcome back" }), /* @__PURE__ */ y(s, { children: "Sign in with your Arcade account to continue" })] }),
-			/* @__PURE__ */ y(o, { children: /* @__PURE__ */ b(t, {
+		/* @__PURE__ */ y(p, { children: /* @__PURE__ */ y(r, { className: "h-12 w-auto text-zinc-900 dark:text-white" }) }),
+		/* @__PURE__ */ b(o, { children: [
+			/* @__PURE__ */ b(u, { children: [/* @__PURE__ */ y(g, { children: "Welcome back" }), /* @__PURE__ */ y(c, { children: "Sign in with your Arcade account to continue" })] }),
+			/* @__PURE__ */ y(s, { children: /* @__PURE__ */ b(t, {
 				className: e("group relative h-12 w-full overflow-hidden text-base transition-all duration-300", "hover:scale-[1.01] hover:shadow-md hover:brightness-105 active:scale-[0.99]"),
-				disabled: u,
-				onClick: _,
+				disabled: i,
+				onClick: f,
 				size: "lg",
 				children: [/* @__PURE__ */ b("span", {
 					className: "relative z-10 flex items-center justify-center gap-2",
-					children: [/* @__PURE__ */ y(w, { isLoading: u }), O]
-				}), /* @__PURE__ */ y("div", { className: e("absolute inset-0 bg-gradient-to-r from-primary/5 via-primary/0 to-primary/5 transition-opacity duration-300 group-hover:opacity-100", u ? "pointer-events-none opacity-0" : "opacity-0") })]
+					children: [/* @__PURE__ */ y(w, { isLoading: i }), O]
+				}), /* @__PURE__ */ y("div", { className: e("absolute inset-0 bg-gradient-to-r from-primary/5 via-primary/0 to-primary/5 transition-opacity duration-300 group-hover:opacity-100", i ? "pointer-events-none opacity-0" : "opacity-0") })]
 			}) }),
-			k && /* @__PURE__ */ b(c, { children: [x && /* @__PURE__ */ b(p, { children: [
+			k && /* @__PURE__ */ b(l, { children: [x && /* @__PURE__ */ b(m, { children: [
 				/* @__PURE__ */ y("span", {
 					className: "text-muted-foreground text-sm",
 					children: "Don't have an account?"
 				}),
 				" ",
-				/* @__PURE__ */ y(m, {
+				/* @__PURE__ */ y(h, {
 					href: x,
 					children: "Register"
 				})

package/dist/components/ui/templates/gateway-diagram.js

@@ -1,10 +1,10 @@
 import { Arcade as e } from "../atoms/icons/arcade.js";
 import { FlowTile as t } from "../atoms/flow-tile.js";
 import { FlowDiagram as n } from "../molecules/flow-diagram.js";
-import { FlowHub as r } from "../atoms/flow-hub.js";
-import { MCP_CLIENT_METADATA as i } from "../../../metadata/mcp-clients.js";
-import { TOOLKITS as a } from "../../../metadata/toolkits.js";
-import { TOOLKIT_ICON_MAP as o } from "../../../metadata/toolkit-icons.js";
+import { TOOLKITS as r } from "../../../metadata/toolkits.js";
+import { TOOLKIT_ICON_MAP as i } from "../../../metadata/toolkit-icons.js";
+import { FlowHub as a } from "../atoms/flow-hub.js";
+import { MCP_CLIENT_METADATA as o } from "../../../metadata/mcp-clients.js";
 import { jsx as s } from "react/jsx-runtime";
 //#region lib/components/ui/templates/gateway-diagram.tsx
 var c = [
@@ -33,18 +33,18 @@ var c = [
 };
 function f({ mcpClientIds: f = c, mcpServerIds: p = l, animate: m = "both", animation: h = "flow", lineStyle: g, size: _ = "md", "aria-label": v = "Arcade MCP gateway diagram", ...y }) {
 	let b = _, x = d[_], S = f.map((e) => {
-		let n = i[e];
+		let n = o[e];
 		if (!n) return null;
-		let { label: r, Icon: a } = n;
+		let { label: r, Icon: i } = n;
 		return /* @__PURE__ */ s(t, {
 			label: r,
 			size: b,
-			children: /* @__PURE__ */ s(a, {})
+			children: /* @__PURE__ */ s(i, {})
 		}, e);
 	}).filter((e) => e !== null), C = p.map((e) => {
-		let n = o[e];
+		let n = i[e];
 		return n ? /* @__PURE__ */ s(t, {
-			label: a.find((t) => t.id === e)?.label ?? e,
+			label: r.find((t) => t.id === e)?.label ?? e,
 			size: b,
 			children: /* @__PURE__ */ s(n, {})
 		}, e) : null;
@@ -53,7 +53,7 @@ function f({ mcpClientIds: f = c, mcpServerIds: p = l, animate: m = "both", anim
 		animate: m,
 		animation: h,
 		"aria-label": v,
-		center: /* @__PURE__ */ s(r, {
+		center: /* @__PURE__ */ s(a, {
 			className: u,
 			size: x,
 			children: /* @__PURE__ */ s(e, { "aria-hidden": !0 })

package/dist/{dropdown-menu-DCFuLDwH.js → dropdown-menu-dsg43mOw.js}

@@ -27,7 +27,8 @@ import { t as De } from "./useFocus-DzHCrvH6.js";
 import { n as Oe, r as ke, t as Ae } from "./getPseudoElementBounds-DarjR4tH.js";
 import { t as je } from "./inertValue-C36grUTu.js";
 import { t as Me } from "./useTriggerFocusGuards-D1QlFlDK.js";
-import { n as Ne, t as Pe } from "./ToolbarRootContext-Dubw_915.js";
+import { t as Ne } from "./useAnchoredPopupScrollLock-C8wRjuy0.js";
+import { t as Pe } from "./ToolbarRootContext-DVNA8Vkb.js";
 import { t as Fe } from "./CompositeItem-BWqRobLN.js";
 import { t as Ie } from "./Separator-CgntgfMd.js";
 import * as Z from "react";

package/dist/hooks/use-scroll-fade.d.ts

@@ -0,0 +1,15 @@
+/**
+ * Fades the edge(s) of a scroll container that still have hidden content, via a
+ * dynamic mask-image — a lightweight "there's more" hint with no extra DOM.
+ * Works on either axis and only fades an edge you can actually scroll toward.
+ * Attach `ref` + `onScroll` to the scrollable element and spread `style`.
+ */
+export declare function useScrollFade(axis: "x" | "y"): {
+    ref: (el: HTMLDivElement | null) => void;
+    onScroll: () => void;
+    style: {
+        maskImage: string;
+        WebkitMaskImage: string;
+    } | undefined;
+};
+//# sourceMappingURL=use-scroll-fade.d.ts.map

package/dist/hooks/use-scroll-fade.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-scroll-fade.d.ts","sourceRoot":"","sources":["../../lib/hooks/use-scroll-fade.ts"],"names":[],"mappings":"AAMA;;;;;GAKG;AACH,wBAAgB,aAAa,CAAC,IAAI,EAAE,GAAG,GAAG,GAAG;cA+CpC,cAAc,GAAG,IAAI;;;;;;EAsC7B"}

package/dist/hooks/use-scroll-fade.js

@@ -0,0 +1,38 @@
+"use client";
+"use client";
+import { useCallback as e, useRef as t, useState as n } from "react";
+//#region lib/hooks/use-scroll-fade.ts
+var r = 24;
+function i(i) {
+	let [a, o] = n({
+		start: !1,
+		end: !1
+	}), s = t(null), c = t(null), l = t(null), u = e(() => {
+		let e = s.current;
+		if (!e) return;
+		let t = i === "x" ? e.scrollLeft : e.scrollTop, n = i === "x" ? e.clientWidth : e.clientHeight, r = i === "x" ? e.scrollWidth : e.scrollHeight, a = t > 1, c = t + n < r - 1;
+		o((e) => e.start === a && e.end === c ? e : {
+			start: a,
+			end: c
+		});
+	}, [i]), d = e(() => {
+		let e = s.current, t = c.current;
+		if (e && t) {
+			t.disconnect(), t.observe(e);
+			for (let n of Array.from(e.children)) t.observe(n);
+			u();
+		}
+	}, [u]), f = e((e) => {
+		c.current?.disconnect(), l.current?.disconnect(), c.current = null, l.current = null, s.current = e, e && (c.current = new ResizeObserver(() => u()), l.current = new MutationObserver(() => d()), l.current.observe(e, { childList: !0 }), d());
+	}, [u, d]), p;
+	return (a.start || a.end) && (p = `linear-gradient(${i === "x" ? "to right" : "to bottom"}, ${a.start ? `transparent 0, black ${r}px` : "black 0"}, ${a.end ? `black calc(100% - ${r}px), transparent 100%` : "black 100%"})`), {
+		ref: f,
+		onScroll: u,
+		style: p ? {
+			maskImage: p,
+			WebkitMaskImage: p
+		} : void 0
+	};
+}
+//#endregion
+export { i as useScrollFade };