@arcadeai/design-system 3.40.0 → 3.42.3

package/dist/components/ui/molecules/date-time-picker.js

@@ -33,7 +33,7 @@ function P({
               }
             ),
             children: [
-              e ? e.toLocaleDateString() : "Select date",
+              /* @__PURE__ */ r("span", { children: e ? e.toLocaleDateString() : "Select date" }),
               /* @__PURE__ */ r(u, {})
             ]
           }

package/dist/components/ui/molecules/flow-diagram.d.ts

@@ -0,0 +1,56 @@
+import { ComponentProps, ReactNode } from 'react';
+import { FlowConnectorLineStyle, FlowConnectorVariant } from '../atoms/flow-connector';
+type FlowAnimateMode = "both" | "left" | "right" | "none";
+type FlowSize = "sm" | "md" | "lg";
+type FlowDiagramProps = {
+    /** Items rendered on the left side, fanning into the hub. */
+    left: ReactNode[];
+    /** Items rendered on the right side, fanning out from the hub. */
+    right: ReactNode[];
+    /**
+     * Center mark — typically a `FlowHub` wrapping a logo. Rendered as-is.
+     */
+    center: ReactNode;
+    /**
+     * Which sides animate. `both` is the default; `none` renders static
+     * dashed lines.
+     */
+    animate?: FlowAnimateMode;
+    /**
+     * Animation style passed to both `FlowConnector` instances. Defaults
+     * to `flow`.
+     */
+    animation?: FlowConnectorVariant;
+    /**
+     * Stroke pattern for the connectors. Defaults to `dashed` for the
+     * `flow` animation and `dotted` for `dot`.
+     */
+    lineStyle?: FlowConnectorLineStyle;
+    /**
+     * Overall scale. Defaults to `md`. `sm` reduces the full-layout
+     * connector width slightly; the compact layout already uses smaller
+     * dimensions.
+     */
+    size?: FlowSize;
+    /**
+     * Override the full-layout visible counts. The compact layout always
+     * caps at 3 per side. Pass `{ left: 4 }` to show 4 items on the left
+     * at wide container widths instead of the default 5.
+     */
+    maxVisible?: {
+        left?: number;
+        right?: number;
+    };
+} & Omit<ComponentProps<"div">, "children">;
+/**
+ * Hub-and-spoke flow visualisation. Items fan out from a center mark on
+ * both sides via animated SVG connectors. Adapts between a compact and
+ * a full layout based on container width (Tailwind's `@container`).
+ *
+ * Use `GatewayDiagram` for the Arcade-branded preset with default MCP
+ * client/server icon catalogues.
+ */
+declare function FlowDiagram({ left, right, center, animate, animation, lineStyle, size, maxVisible, className, "aria-label": ariaLabel, ...props }: FlowDiagramProps): import("react/jsx-runtime").JSX.Element;
+export { FlowDiagram };
+export type { FlowAnimateMode, FlowDiagramProps, FlowSize };
+//# sourceMappingURL=flow-diagram.d.ts.map

package/dist/components/ui/molecules/flow-diagram.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"flow-diagram.d.ts","sourceRoot":"","sources":["../../../../lib/components/ui/molecules/flow-diagram.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,cAAc,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAEvD,OAAO,EAEL,KAAK,sBAAsB,EAC3B,KAAK,oBAAoB,EAC1B,MAAM,sCAAsC,CAAC;AAW9C,KAAK,eAAe,GAAG,MAAM,GAAG,MAAM,GAAG,OAAO,GAAG,MAAM,CAAC;AAC1D,KAAK,QAAQ,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;AAEnC,KAAK,gBAAgB,GAAG;IACtB,6DAA6D;IAC7D,IAAI,EAAE,SAAS,EAAE,CAAC;IAClB,kEAAkE;IAClE,KAAK,EAAE,SAAS,EAAE,CAAC;IACnB;;OAEG;IACH,MAAM,EAAE,SAAS,CAAC;IAClB;;;OAGG;IACH,OAAO,CAAC,EAAE,eAAe,CAAC;IAC1B;;;OAGG;IACH,SAAS,CAAC,EAAE,oBAAoB,CAAC;IACjC;;;OAGG;IACH,SAAS,CAAC,EAAE,sBAAsB,CAAC;IACnC;;;;OAIG;IACH,IAAI,CAAC,EAAE,QAAQ,CAAC;IAChB;;;;OAIG;IACH,UAAU,CAAC,EAAE;QAAE,IAAI,CAAC,EAAE,MAAM,CAAC;QAAC,KAAK,CAAC,EAAE,MAAM,CAAA;KAAE,CAAC;CAChD,GAAG,IAAI,CAAC,cAAc,CAAC,KAAK,CAAC,EAAE,UAAU,CAAC,CAAC;AAE5C;;;;;;;GAOG;AACH,iBAAS,WAAW,CAAC,EACnB,IAAI,EACJ,KAAK,EACL,MAAM,EACN,OAAgB,EAChB,SAAkB,EAClB,SAAS,EACT,IAAW,EACX,UAAU,EACV,SAAS,EACT,YAAY,EAAE,SAA0B,EACxC,GAAG,KAAK,EACT,EAAE,gBAAgB,2CA+MlB;AAwFD,OAAO,EAAE,WAAW,EAAE,CAAC;AACvB,YAAY,EAAE,eAAe,EAAE,gBAAgB,EAAE,QAAQ,EAAE,CAAC"}

package/dist/components/ui/molecules/flow-diagram.js

@@ -0,0 +1,232 @@
+import { jsxs as a, Fragment as f, jsx as o } from "react/jsx-runtime";
+import { MoreHorizontal as W } from "lucide-react";
+import { computeFlowPaths as g } from "../atoms/compute-flow-paths.js";
+import { FlowConnector as p } from "../atoms/flow-connector.js";
+import { FlowTile as X } from "../atoms/flow-tile.js";
+import { cn as h } from "../../../lib/utils.js";
+const s = 3, k = 2, Y = 5, Z = 8, N = 3;
+function at({
+  left: t,
+  right: l,
+  center: n,
+  animate: i = "both",
+  animation: c = "flow",
+  lineStyle: r,
+  size: e = "md",
+  maxVisible: d,
+  className: _,
+  "aria-label": z = "Flow diagram",
+  ...T
+}) {
+  const m = d?.left ?? Y, u = d?.right ?? Z, M = i === "both" || i === "left", L = i === "both" || i === "right", F = t.length > 0, P = l.length > 0, R = Math.min(t.length, m) + (t.length > m ? 1 : 0), U = Math.min(l.length, u) + (l.length > u ? 1 : 0), x = Math.max(1, Math.ceil(R / N)), C = Math.max(
+    1,
+    Math.ceil(U / N)
+  ), j = Math.min(t.length, s) + (t.length > s ? 1 : 0), y = Math.min(l.length, s) + (l.length > s ? 1 : 0), E = O(j), $ = O(y), A = g({
+    count: E,
+    side: "left"
+  }), B = g({
+    count: $,
+    side: "right"
+  }), H = g({
+    count: x,
+    side: "left"
+  }), V = g({
+    count: C,
+    side: "right"
+  }), S = "h-[76px] w-12 @md:h-[92px] @md:w-[87px]", b = K(
+    e,
+    Math.max(x, C)
+  ), D = {
+    width: `${b}px`,
+    height: `${v(e, x)}px`
+  }, G = {
+    width: `${b}px`,
+    height: `${v(e, C)}px`
+  };
+  return /* @__PURE__ */ a(
+    "div",
+    {
+      "aria-label": z,
+      className: h("@container w-full", _),
+      "data-slot": "flow-diagram",
+      role: "img",
+      ...T,
+      children: [
+        /* @__PURE__ */ a(
+          "div",
+          {
+            "aria-hidden": !0,
+            className: h(
+              "mx-auto flex @2xl:hidden w-full @md:max-w-md max-w-80 items-center justify-center gap-1",
+              // Tile size scales up at @md to fill medium-width containers.
+              "@md:[&_[data-slot=flow-tile]]:size-10 [&_[data-slot=flow-tile]]:size-8",
+              "@md:[&_[data-slot=flow-tile]]:rounded-xl [&_[data-slot=flow-tile]]:rounded-lg",
+              "@md:[&_[data-slot=flow-tile]>svg]:size-5 [&_[data-slot=flow-tile]>svg]:size-4",
+              // Hub scales to match the larger tile cluster at @md.
+              "@md:[&_[data-slot=flow-hub]]:size-16 [&_[data-slot=flow-hub]]:size-12",
+              "@md:[&_[data-slot=flow-hub]_>_span:last-child]:rounded-[12px] [&_[data-slot=flow-hub]_>_span:last-child]:rounded-[8px]",
+              "@md:[&_[data-slot=flow-hub]_svg]:size-7 [&_[data-slot=flow-hub]_svg]:size-6"
+            ),
+            children: [
+              F ? /* @__PURE__ */ a(f, { children: [
+                /* @__PURE__ */ o(
+                  w,
+                  {
+                    columns: 2,
+                    hasOverflow: t.length > s,
+                    items: t.slice(0, s),
+                    overflowSize: e
+                  }
+                ),
+                /* @__PURE__ */ o(
+                  p,
+                  {
+                    animated: M,
+                    className: h(S),
+                    clusterSide: "end",
+                    lineStyle: r,
+                    paths: A,
+                    variant: c
+                  }
+                )
+              ] }) : null,
+              n,
+              P ? /* @__PURE__ */ a(f, { children: [
+                /* @__PURE__ */ o(
+                  p,
+                  {
+                    animated: L,
+                    className: h(S),
+                    clusterSide: "start",
+                    lineStyle: r,
+                    paths: B,
+                    variant: c
+                  }
+                ),
+                /* @__PURE__ */ o(
+                  w,
+                  {
+                    columns: 2,
+                    hasOverflow: l.length > s,
+                    items: l.slice(0, s),
+                    overflowSize: e
+                  }
+                )
+              ] }) : null
+            ]
+          }
+        ),
+        /* @__PURE__ */ a(
+          "div",
+          {
+            "aria-hidden": !0,
+            className: "@2xl:grid hidden w-full grid-cols-[minmax(0,1fr)_auto_minmax(0,1fr)] items-center",
+            children: [
+              /* @__PURE__ */ o("div", { className: "flex min-w-0 items-center justify-end gap-0", children: F ? /* @__PURE__ */ a(f, { children: [
+                /* @__PURE__ */ o(
+                  w,
+                  {
+                    columns: 3,
+                    hasOverflow: t.length > m,
+                    items: t.slice(0, m),
+                    overflowSize: e
+                  }
+                ),
+                /* @__PURE__ */ o(
+                  p,
+                  {
+                    animated: M,
+                    clusterSide: "end",
+                    lineStyle: r,
+                    paths: H,
+                    style: D,
+                    variant: c
+                  }
+                )
+              ] }) : null }),
+              n,
+              /* @__PURE__ */ o("div", { className: "flex min-w-0 items-center justify-start gap-0", children: P ? /* @__PURE__ */ a(f, { children: [
+                /* @__PURE__ */ o(
+                  p,
+                  {
+                    animated: L,
+                    clusterSide: "start",
+                    lineStyle: r,
+                    paths: V,
+                    style: G,
+                    variant: c
+                  }
+                ),
+                /* @__PURE__ */ o(
+                  w,
+                  {
+                    columns: 3,
+                    hasOverflow: l.length > u,
+                    items: l.slice(0, u),
+                    overflowSize: e
+                  }
+                )
+              ] }) : null })
+            ]
+          }
+        )
+      ]
+    }
+  );
+}
+function w({
+  items: t,
+  columns: l,
+  hasOverflow: n,
+  overflowSize: i
+}) {
+  const c = t.length + (n ? 1 : 0), r = Math.max(1, Math.min(l, c)), e = I[r] ?? I[3];
+  return (
+    // `shrink-0` keeps the grid at its natural width even when the
+    // parent flex slot is narrower than the cloud — without it, the
+    // `minmax(0,1fr)` tracks collapse below tile size and tiles
+    // overlap their neighbours (visible as icons stacking on top of
+    // each other at small viewports).
+    /* @__PURE__ */ a(
+      "div",
+      {
+        className: h(
+          "grid shrink-0 justify-center gap-2.5 sm:gap-3",
+          e
+        ),
+        children: [
+          t.map((d, _) => (
+            // biome-ignore lint/suspicious/noArrayIndexKey: items are caller-provided ReactNodes; index is stable within the molecule render
+            /* @__PURE__ */ o("span", { children: d }, `flow-item-${_}`)
+          )),
+          n ? /* @__PURE__ */ o(X, { size: i, variant: "muted", children: /* @__PURE__ */ o(W, { "aria-hidden": !0 }) }) : null
+        ]
+      }
+    )
+  );
+}
+const I = {
+  1: "grid-cols-1",
+  2: "grid-cols-2",
+  3: "grid-cols-3"
+}, q = {
+  sm: 32,
+  md: 40,
+  lg: 56
+}, J = 12;
+function O(t) {
+  if (t <= 0)
+    return 1;
+  const l = Math.max(1, Math.min(k, t));
+  return Math.max(1, Math.ceil(t / l));
+}
+function v(t, l) {
+  const n = q[t];
+  return l * n + Math.max(0, l - 1) * J;
+}
+function K(t, l) {
+  return Math.round(v(t, l) * 0.95);
+}
+export {
+  at as FlowDiagram
+};

package/dist/components/ui/molecules/index.d.ts

@@ -12,6 +12,8 @@ export { DateTimePicker } from './date-time-picker';
 export { EmptyState } from './empty-state';
 export type { ErrorStateProps } from './error-state';
 export { ErrorState } from './error-state';
+export type { FlowAnimateMode, FlowDiagramProps, FlowSize, } from './flow-diagram';
+export { FlowDiagram } from './flow-diagram';
 export type { MessageActionProps, MessageActionsProps, MessageAvatarProps, MessageContentProps, MessageProps, } from './message';
 export { Message, MessageAction, MessageActions, MessageAvatar, MessageContent, } from './message';
 export type { PromptInputActionProps, PromptInputActionsProps, PromptInputProps, PromptInputTextareaProps, } from './prompt-input';

package/dist/components/ui/molecules/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../lib/components/ui/molecules/index.ts"],"names":[],"mappings":"AAAA,+GAA+G;AAE/G,YAAY,EAAE,oBAAoB,EAAE,MAAM,qBAAqB,CAAC;AAChE,OAAO,EAAE,eAAe,EAAE,MAAM,qBAAqB,CAAC;AACtD,YAAY,EACV,yBAAyB,EACzB,eAAe,EACf,oBAAoB,EACpB,4BAA4B,EAC5B,2BAA2B,EAC3B,oBAAoB,GACrB,MAAM,qBAAqB,CAAC;AAC7B,OAAO,EACL,oBAAoB,EACpB,eAAe,EACf,uBAAuB,EACvB,sBAAsB,EACtB,eAAe,GAChB,MAAM,qBAAqB,CAAC;AAE7B,YAAY,EAAE,sBAAsB,EAAE,MAAM,uBAAuB,CAAC;AACpE,OAAO,EAAE,iBAAiB,EAAE,MAAM,uBAAuB,CAAC;AAC1D,OAAO,EAAE,UAAU,EAAE,MAAM,eAAe,CAAC;AAC3C,YAAY,EAAE,mBAAmB,EAAE,MAAM,mBAAmB,CAAC;AAC7D,OAAO,EAAE,cAAc,EAAE,MAAM,mBAAmB,CAAC;AACnD,OAAO,EAAE,cAAc,EAAE,MAAM,oBAAoB,CAAC;AACpD,OAAO,EAAE,UAAU,EAAE,MAAM,eAAe,CAAC;AAC3C,YAAY,EAAE,eAAe,EAAE,MAAM,eAAe,CAAC;AACrD,OAAO,EAAE,UAAU,EAAE,MAAM,eAAe,CAAC;AAC3C,YAAY,EACV,kBAAkB,EAClB,mBAAmB,EACnB,kBAAkB,EAClB,mBAAmB,EACnB,YAAY,GACb,MAAM,WAAW,CAAC;AACnB,OAAO,EACL,OAAO,EACP,aAAa,EACb,cAAc,EACd,aAAa,EACb,cAAc,GACf,MAAM,WAAW,CAAC;AACnB,YAAY,EACV,sBAAsB,EACtB,uBAAuB,EACvB,gBAAgB,EAChB,wBAAwB,GACzB,MAAM,gBAAgB,CAAC;AACxB,OAAO,EACL,WAAW,EACX,iBAAiB,EACjB,kBAAkB,EAClB,mBAAmB,GACpB,MAAM,gBAAgB,CAAC;AACxB,OAAO,EAAE,iBAAiB,EAAE,MAAM,sBAAsB,CAAC;AACzD,YAAY,EAAE,IAAI,EAAE,UAAU,EAAE,kBAAkB,EAAE,MAAM,kBAAkB,CAAC;AAC7E,OAAO,EAAE,aAAa,EAAE,MAAM,kBAAkB,CAAC;AACjD,YAAY,EACV,mBAAmB,EACnB,2BAA2B,GAC5B,MAAM,mBAAmB,CAAC;AAC3B,OAAO,EAAE,cAAc,EAAE,sBAAsB,EAAE,MAAM,mBAAmB,CAAC;AAC3E,YAAY,EACV,cAAc,EACd,yBAAyB,EACzB,mBAAmB,GACpB,MAAM,cAAc,CAAC;AACtB,OAAO,EAAE,SAAS,EAAE,cAAc,EAAE,MAAM,cAAc,CAAC;AACzD,YAAY,EACV,0BAA0B,EAC1B,4BAA4B,EAC5B,6BAA6B,EAC7B,sBAAsB,EACtB,uBAAuB,GACxB,MAAM,sBAAsB,CAAC;AAC9B,OAAO,EACL,iBAAiB,EACjB,qBAAqB,EACrB,wBAAwB,EACxB,uBAAuB,EACvB,wBAAwB,GACzB,MAAM,sBAAsB,CAAC;AAC9B,YAAY,EACV,6BAA6B,EAC7B,0BAA0B,EAC1B,sBAAsB,EACtB,6BAA6B,EAC7B,aAAa,EACb,YAAY,GACb,MAAM,uBAAuB,CAAC;AAC/B,OAAO,EACL,iBAAiB,EACjB,wBAAwB,EACxB,qBAAqB,EACrB,wBAAwB,GACzB,MAAM,uBAAuB,CAAC;AAC/B,OAAO,EAAE,QAAQ,EAAE,MAAM,aAAa,CAAC;AACvC,OAAO,EAAE,WAAW,EAAE,MAAM,gBAAgB,CAAC;AAC7C,YAAY,EAAE,YAAY,EAAE,WAAW,EAAE,MAAM,YAAY,CAAC;AAC5D,OAAO,EAAE,OAAO,EAAE,MAAM,YAAY,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../lib/components/ui/molecules/index.ts"],"names":[],"mappings":"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"}

package/dist/components/ui/molecules/index.js

@@ -1,59 +1,61 @@
 import { ChatHistoryItem as r } from "./chat-history-item.js";
-import { ChatAssistantMessage as a, ChatMessageList as s, ChatMessageListSkeleton as n, ChatStreamingIndicator as i, ChatUserMessage as p } from "./chat-message-list.js";
+import { ChatAssistantMessage as a, ChatMessageList as s, ChatMessageListSkeleton as n, ChatStreamingIndicator as i, ChatUserMessage as m } from "./chat-message-list.js";
 import { ClientSecretInput as l } from "./client-secret-field.js";
-import { CommandBar as C } from "./command-bar.js";
-import { ConfirmPopover as x } from "./confirm-popover.js";
+import { CommandBar as f } from "./command-bar.js";
+import { ConfirmPopover as C } from "./confirm-popover.js";
 import { DateTimePicker as u } from "./date-time-picker.js";
 import { EmptyState as c } from "./empty-state.js";
 import { ErrorState as h } from "./error-state.js";
-import { Message as M, MessageAction as S, MessageActions as P, MessageAvatar as z, MessageContent as k } from "./message.js";
-import { PromptInput as y, PromptInputAction as B, PromptInputActions as E, PromptInputTextarea as H } from "./prompt-input.js";
-import { R, T as U } from "../../../toolkit-card-Dc104Z9e.js";
-import { StepsProgress as D } from "./steps-progress.js";
+import { FlowDiagram as M } from "./flow-diagram.js";
+import { Message as P, MessageAction as z, MessageActions as k, MessageAvatar as v, MessageContent as y } from "./message.js";
+import { PromptInput as D, PromptInputAction as E, PromptInputActions as H, PromptInputTextarea as L } from "./prompt-input.js";
+import { R as U, T as q } from "../../../toolkit-card-ryIR325K.js";
+import { StepsProgress as F } from "./steps-progress.js";
 import { SuggestionCard as V, SuggestionCardSkeleton as b } from "./suggestion-card.js";
-import { TagsInput as w, TagsInputValue as F } from "./tags-input.js";
-import { ToolAuthorization as J, ToolAuthorizationArgs as K, ToolAuthorizationContent as O, ToolAuthorizationHeader as Q, ToolAuthorizationMessage as W } from "./tool-authorization.js";
-import { ToolCallAccordion as Y, ToolCallAccordionContent as Z, ToolCallAccordionItem as _, ToolCallAccordionTrigger as $ } from "./tool-call-accordion.js";
-import { ToolCard as to } from "./tool-card.js";
-import { UserNav as eo } from "./user-nav.js";
+import { TagsInput as G, TagsInputValue as J } from "./tags-input.js";
+import { ToolAuthorization as O, ToolAuthorizationArgs as Q, ToolAuthorizationContent as W, ToolAuthorizationHeader as X, ToolAuthorizationMessage as Y } from "./tool-authorization.js";
+import { ToolCallAccordion as _, ToolCallAccordionContent as $, ToolCallAccordionItem as oo, ToolCallAccordionTrigger as to } from "./tool-call-accordion.js";
+import { ToolCard as eo } from "./tool-card.js";
+import { UserNav as so } from "./user-nav.js";
 export {
   a as ChatAssistantMessage,
   r as ChatHistoryItem,
   s as ChatMessageList,
   n as ChatMessageListSkeleton,
   i as ChatStreamingIndicator,
-  p as ChatUserMessage,
+  m as ChatUserMessage,
   l as ClientSecretInput,
-  C as CommandBar,
-  x as ConfirmPopover,
+  f as CommandBar,
+  C as ConfirmPopover,
   u as DateTimePicker,
   c as EmptyState,
   h as ErrorState,
-  M as Message,
-  S as MessageAction,
-  P as MessageActions,
-  z as MessageAvatar,
-  k as MessageContent,
-  y as PromptInput,
-  B as PromptInputAction,
-  E as PromptInputActions,
-  H as PromptInputTextarea,
-  R as RequirementBadges,
-  D as StepsProgress,
+  M as FlowDiagram,
+  P as Message,
+  z as MessageAction,
+  k as MessageActions,
+  v as MessageAvatar,
+  y as MessageContent,
+  D as PromptInput,
+  E as PromptInputAction,
+  H as PromptInputActions,
+  L as PromptInputTextarea,
+  U as RequirementBadges,
+  F as StepsProgress,
   V as SuggestionCard,
   b as SuggestionCardSkeleton,
-  w as TagsInput,
-  F as TagsInputValue,
-  J as ToolAuthorization,
-  K as ToolAuthorizationArgs,
-  O as ToolAuthorizationContent,
-  Q as ToolAuthorizationHeader,
-  W as ToolAuthorizationMessage,
-  Y as ToolCallAccordion,
-  Z as ToolCallAccordionContent,
-  _ as ToolCallAccordionItem,
-  $ as ToolCallAccordionTrigger,
-  to as ToolCard,
-  U as ToolkitCard,
-  eo as UserNav
+  G as TagsInput,
+  J as TagsInputValue,
+  O as ToolAuthorization,
+  Q as ToolAuthorizationArgs,
+  W as ToolAuthorizationContent,
+  X as ToolAuthorizationHeader,
+  Y as ToolAuthorizationMessage,
+  _ as ToolCallAccordion,
+  $ as ToolCallAccordionContent,
+  oo as ToolCallAccordionItem,
+  to as ToolCallAccordionTrigger,
+  eo as ToolCard,
+  q as ToolkitCard,
+  so as UserNav
 };

package/dist/components/ui/molecules/requirement-badges.js

@@ -15,12 +15,14 @@ import "../atoms/sidebar.js";
 import "../atoms/view-tools-control.js";
 import "./date-time-picker.js";
 import "./prompt-input.js";
-import { O as A, R as b, S as j } from "../../../toolkit-card-Dc104Z9e.js";
+import { O as j, R as k, S as l } from "../../../toolkit-card-ryIR325K.js";
 import "./tool-call-accordion.js";
 import "./tool-card.js";
+import "../../../metadata/oauth-providers.js";
+import "../../../metadata/toolkits.js";
 import "../utils/memo.js";
 export {
-  A as OAuthBadge,
-  b as RequirementBadges,
-  j as SecretsBadge
+  j as OAuthBadge,
+  k as RequirementBadges,
+  l as SecretsBadge
 };

package/dist/components/ui/molecules/tool-card.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"tool-card.d.ts","sourceRoot":"","sources":["../../../../lib/components/ui/molecules/tool-card.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,KAAK,EAAE,GAAG,EAAE,MAAM,mBAAmB,CAAC;AAY7C,MAAM,MAAM,aAAa,GAAG;IAC1B,oBAAoB,EAAE,MAAM,CAAC;IAC7B,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,IAAI,CAAC,EAAE,CAAC,KAAK,EAAE;QAAE,SAAS,CAAC,EAAE,MAAM,CAAA;KAAE,KAAK,GAAG,CAAC,OAAO,CAAC;IACtD,QAAQ,CAAC,EAAE,CAAC,OAAO,EAAE,OAAO,KAAK,IAAI,CAAC;IACtC,YAAY,CAAC,EAAE,OAAO,CAAC;CACxB,GAAG,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC,EAAE,UAAU,CAAC,CAAC;AAE3D,iBAAS,YAAY,CAAC,EACpB,oBAAoB,EACpB,IAAI,EACJ,WAAW,EACX,WAAW,EACX,IAA+B,EAC/B,UAAkB,EAClB,QAAQ,EACR,YAAoB,EACpB,GAAG,IAAI,EACR,EAAE,aAAa,eA0If;AAcD,eAAO,MAAM,QAAQ,gDAAoD,CAAC"}
+{"version":3,"file":"tool-card.d.ts","sourceRoot":"","sources":["../../../../lib/components/ui/molecules/tool-card.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,KAAK,EAAE,GAAG,EAAE,MAAM,mBAAmB,CAAC;AAY7C,MAAM,MAAM,aAAa,GAAG;IAC1B,oBAAoB,EAAE,MAAM,CAAC;IAC7B,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,IAAI,CAAC,EAAE,CAAC,KAAK,EAAE;QAAE,SAAS,CAAC,EAAE,MAAM,CAAA;KAAE,KAAK,GAAG,CAAC,OAAO,CAAC;IACtD,QAAQ,CAAC,EAAE,CAAC,OAAO,EAAE,OAAO,KAAK,IAAI,CAAC;IACtC,YAAY,CAAC,EAAE,OAAO,CAAC;CACxB,GAAG,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC,EAAE,UAAU,CAAC,CAAC;AAE3D,iBAAS,YAAY,CAAC,EACpB,oBAAoB,EACpB,IAAI,EACJ,WAAW,EACX,WAAW,EACX,IAA+B,EAC/B,UAAkB,EAClB,QAAQ,EACR,YAAoB,EACpB,GAAG,IAAI,EACR,EAAE,aAAa,eAyIf;AAcD,eAAO,MAAM,QAAQ,gDAAoD,CAAC"}

package/dist/components/ui/molecules/tool-card.js

@@ -13,22 +13,22 @@ function R({
   fully_qualified_name: m,
   name: f,
   toolkitName: p,
-  description: u,
-  Icon: b = (l) => /* @__PURE__ */ r(E, { ...l }),
+  description: h,
+  Icon: b = (s) => /* @__PURE__ */ r(E, { ...s }),
   isSelected: o = !1,
-  onSelect: s,
-  hideCheckbox: h = !1,
+  onSelect: n,
+  hideCheckbox: u = !1,
   ...g
 }) {
-  const l = t.useCallback(
-    () => s?.(!o),
-    [o, s]
-  ), [n, k] = t.useState(!1), { ref: x, isTruncated: C } = z(!n), v = (e) => {
+  const s = t.useCallback(
+    () => n?.(!o),
+    [o, n]
+  ), [l, k] = t.useState(!1), { ref: x, isTruncated: C } = z(!l), v = (e) => {
     const i = e.key === "Enter" || e.code === "Enter", c = e.key === " " || e.key === "Spacebar" || e.code === "Space";
-    (i || c) && (e.preventDefault(), l());
+    (i || c) && (e.preventDefault(), s());
   }, y = t.useCallback(
-    (e) => s?.(!!e),
-    [s]
+    (e) => n?.(!!e),
+    [n]
   ), w = t.useCallback((e) => {
     e.stopPropagation();
   }, []), N = t.useCallback((e) => {
@@ -47,7 +47,7 @@ function R({
         !o && "border-neutral-200 hover:border-neutral-300 dark:border-neutral-800 dark:hover:border-neutral-700"
       ),
       onClick: (e) => {
-        e.target.closest('[data-slot="checkbox-wrapper"]') || l();
+        e.target.closest('[data-slot="checkbox-wrapper"]') || s();
       },
       onKeyDown: v,
       tabIndex: 0,
@@ -57,10 +57,10 @@ function R({
           className: d(
             "grid items-start gap-2",
             "grid-cols-[20px_1fr_auto]",
-            h && "grid-cols-[1fr_auto]"
+            u && "grid-cols-[1fr_auto]"
           ),
           children: [
-            !h && /* @__PURE__ */ r(
+            !u && /* @__PURE__ */ r(
               "div",
               {
                 className: "flex items-center justify-center pt-1.5",
@@ -84,20 +84,20 @@ function R({
                   p && /* @__PURE__ */ r("span", { className: "font-medium text-neutral-500 text-xs leading-tight dark:text-neutral-400", children: p })
                 ] })
               ] }),
-              u && /* @__PURE__ */ a(T, { onOpenChange: k, open: n, children: [
+              h && /* @__PURE__ */ a(T, { onOpenChange: k, open: l, children: [
                 /* @__PURE__ */ a("div", { className: "space-y-1", children: [
                   /* @__PURE__ */ r(
                     "p",
                     {
                       className: d(
                         "text-neutral-600 text-sm dark:text-neutral-400",
-                        !n && "line-clamp-3"
+                        !l && "line-clamp-3"
                       ),
                       ref: x,
-                      children: u
+                      children: h
                     }
                   ),
-                  C && /* @__PURE__ */ a(
+                  C && /* @__PURE__ */ r(
                     K,
                     {
                       render: /* @__PURE__ */ r(
@@ -110,10 +110,7 @@ function R({
                           variant: "link"
                         }
                       ),
-                      children: [
-                        n && "Show less",
-                        !n && "Show more"
-                      ]
+                      children: /* @__PURE__ */ r("span", { children: l ? "Show less" : "Show more" })
                     }
                   )
                 ] }),

package/dist/components/ui/molecules/toolkit-card.js

@@ -6,7 +6,7 @@ import "../atoms/card.js";
 import "../atoms/checkbox.js";
 import "../atoms/view-tools-control.js";
 import "../../../lib/utils.js";
-import { T as k } from "../../../toolkit-card-Dc104Z9e.js";
+import { T as k } from "../../../toolkit-card-ryIR325K.js";
 import "../utils/memo.js";
 export {
   k as ToolkitCard

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

@@ -5,7 +5,7 @@ import { ArcadeGrid as g } from "../../../assets/images/arcade-grid.js";
 import { Button as A } from "../atoms/button.js";
 import { ArcadeLogo as b } from "../atoms/icons/arcade-logo.js";
 import { AuthTemplate as T, AuthTemplateVideoBackground as v, AuthTemplateLogo as y, AuthTemplateCard as L, AuthTemplateHeader as N, AuthTemplateTitle as x, AuthTemplateDescription as k, AuthTemplateContent as z, AuthTemplateFooter as w, AuthTemplatePrompt as P, AuthTemplatePromptLink as _, AuthTemplateLegal as B, AuthTemplateLegalLink as C } from "../templates/auth-template.js";
-import { cn as m } from "../../../lib/utils.js";
+import { cn as s } from "../../../lib/utils.js";
 import { PUBLIC_VIDEO_URL as D } from "../../../metadata/constants.js";
 const I = `${D}/A_L_Orange_Pink.mp4`;
 function F({ isLoading: t }) {
@@ -13,32 +13,32 @@ function F({ isLoading: t }) {
 }
 function j({
   termsHref: t,
-  privacyHref: n
+  privacyHref: o
 }) {
   const i = [
     t && { href: t, label: "Terms of Service" },
-    n && { href: n, label: "Privacy Policy" }
+    o && { href: o, label: "Privacy Policy" }
   ].filter((a) => !!a);
   return i.length === 0 ? null : /* @__PURE__ */ r(B, { children: [
     "By continuing, you agree to the",
     " ",
-    i.map((a, o) => /* @__PURE__ */ r(f, { children: [
-      o > 0 && " and ",
+    i.map((a, n) => /* @__PURE__ */ r(f, { children: [
+      n > 0 && /* @__PURE__ */ e("span", { children: " and " }),
       /* @__PURE__ */ e(C, { href: a.href, children: a.label })
     ] }, a.href))
   ] });
 }
 function q({
   isLoading: t = !1,
-  loadingText: n = "Authenticating...",
+  loadingText: o = "Authenticating...",
   onSubmit: i,
   privacyHref: a,
-  registerHref: o,
-  submitText: s = "Sign in with Arcade",
+  registerHref: n,
+  submitText: m = "Sign in with Arcade",
   termsHref: l,
   videoSrc: c = I
 }) {
-  const h = t ? n : s, u = o || l || a;
+  const h = t ? o : m, u = n || l || a;
   return /* @__PURE__ */ r(T, { children: [
     /* @__PURE__ */ e("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" }),
     c && /* @__PURE__ */ e(v, { src: c }),
@@ -52,7 +52,7 @@ function q({
       /* @__PURE__ */ e(z, { children: /* @__PURE__ */ r(
         A,
         {
-          className: m(
+          className: s(
             "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]"
           ),
@@ -67,7 +67,7 @@ function q({
             /* @__PURE__ */ e(
               "div",
               {
-                className: m(
+                className: s(
                   "absolute inset-0 bg-gradient-to-r from-primary/5 via-primary/0 to-primary/5 transition-opacity duration-300 group-hover:opacity-100",
                   t ? "pointer-events-none opacity-0" : "opacity-0"
                 )
@@ -77,10 +77,10 @@ function q({
         }
       ) }),
       u && /* @__PURE__ */ r(w, { children: [
-        o && /* @__PURE__ */ r(P, { children: [
+        n && /* @__PURE__ */ r(P, { children: [
           /* @__PURE__ */ e("span", { className: "text-muted-foreground text-sm", children: "Don't have an account?" }),
           " ",
-          /* @__PURE__ */ e(_, { href: o, children: "Register" })
+          /* @__PURE__ */ e(_, { href: n, children: "Register" })
         ] }),
         /* @__PURE__ */ e(j, { privacyHref: a, termsHref: l })
       ] })