@arcadeai/design-system 3.46.1 → 3.49.0

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,22 @@
+/**
+ * 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`.
+ *
+ * Also returns `edges` ({ start, end }) for callers that want to draw their own
+ * edge affordance (e.g. a shadow) only when there is hidden content.
+ */
+export declare function useScrollFade(axis: "x" | "y"): {
+    ref: (el: HTMLDivElement | null) => void;
+    onScroll: () => void;
+    edges: {
+        start: boolean;
+        end: boolean;
+    };
+    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;;;;;;;;GAQG;AACH,wBAAgB,aAAa,CAAC,IAAI,EAAE,GAAG,GAAG,GAAG;cA+CpC,cAAc,GAAG,IAAI;;;;;;;;;;EAuC7B"}

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

@@ -0,0 +1,39 @@
+"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,
+		edges: a,
+		style: p ? {
+			maskImage: p,
+			WebkitMaskImage: p
+		} : void 0
+	};
+}
+//#endregion
+export { i as useScrollFade };