@arcadeai/design-system 3.26.1 → 3.27.1

package/dist/components/ui/organisms/toolkit-picker/mocks/toolkit-collection.js

@@ -1,31 +1,31 @@
 import "../../../../../web-sgv-FK6q.js";
-import { allTools as d } from "../../../../../lib/arcade/mocks.js";
-import { TOOLKIT_CATALOGUE as w } from "../../../../../metadata/toolkits.js";
-const y = d.filter((i) => i.toolkit.name === "basic"), q = d.filter((i) => i.toolkit.name === "api_toolkit"), M = d.filter((i) => i.toolkit.name === "Google"), T = d.filter((i) => i.toolkit.name === "Gmail"), o = (i, r = !1, n = !1) => {
-  const l = w[i];
+import { allTools as h } from "../../../../../lib/arcade/mocks.js";
+import { TOOLKIT_CATALOGUE as M } from "../../../../../metadata/toolkits.js";
+const G = h.filter((a) => a.toolkit.name === "basic"), E = h.filter((a) => a.toolkit.name === "api_toolkit"), I = h.filter((a) => a.toolkit.name === "Google"), N = h.filter((a) => a.toolkit.name === "Gmail"), o = (a, n = !1, s = !1) => {
+  const l = M[a];
   return l ? {
     ...l,
-    isBYOC: r,
-    isPro: n
+    isBYOC: n,
+    isPro: s
   } : {
-    id: i,
-    label: i,
-    isBYOC: r,
-    isPro: n,
+    id: a,
+    label: a,
+    isBYOC: n,
+    isPro: s,
     publicIconUrl: "",
-    docsLink: `https://docs.example.com/${i}`,
-    relativeDocsLink: `/${i}`,
+    docsLink: `https://docs.example.com/${a}`,
+    relativeDocsLink: `/${a}`,
     type: "community",
     category: "productivity",
     isComingSoon: !1,
     isHidden: !1
   };
-}, b = {
+}, C = {
   basic: {
     name: "basic",
     description: "Basic toolkit with essential tools",
     version: "1.0.0",
-    tools: y,
+    tools: G,
     requirements: {
       met: !0,
       secrets: [],
@@ -37,7 +37,7 @@ const y = d.filter((i) => i.toolkit.name === "basic"), q = d.filter((i) => i.too
     name: "api_toolkit",
     description: "API toolkit for external integrations",
     version: "2.0.0",
-    tools: q,
+    tools: E,
     requirements: {
       met: !1,
       secrets: [
@@ -215,7 +215,7 @@ const y = d.filter((i) => i.toolkit.name === "basic"), q = d.filter((i) => i.too
     name: "Google",
     description: "Arcade.dev LLM tools for Google Workspace",
     version: "1.2.4",
-    tools: M,
+    tools: I,
     requirements: {
       met: !0,
       secrets: [],
@@ -234,7 +234,7 @@ const y = d.filter((i) => i.toolkit.name === "basic"), q = d.filter((i) => i.too
     name: "Gmail",
     description: "Arcade.dev LLM tools for Gmail",
     version: "2.0.0",
-    tools: T,
+    tools: N,
     requirements: {
       met: !0,
       secrets: [],
@@ -260,25 +260,25 @@ const y = d.filter((i) => i.toolkit.name === "basic"), q = d.filter((i) => i.too
     }
   }
 };
-function f(i) {
-  const r = [], n = [], l = /* @__PURE__ */ new Map(), p = /* @__PURE__ */ new Map(), u = {
+function A(a) {
+  const n = [], s = [], l = /* @__PURE__ */ new Map(), m = /* @__PURE__ */ new Map(), u = {
     toolkitsByName: /* @__PURE__ */ new Map(),
     toolsByName: /* @__PURE__ */ new Map()
   };
-  for (const [e, s] of Object.entries(i)) {
-    const h = `${s.name} ${s.description || ""} ${s.version || ""}`, g = {
-      secrets: s.requirements?.secrets?.length ? {
-        configured: s.requirements.secrets.filter((t) => t.met === !0).map((t) => t.key),
-        pending: s.requirements.secrets.filter((t) => t.met === !1).map((t) => t.key)
+  for (const [e, i] of Object.entries(a)) {
+    const v = `${i.name} ${i.description || ""} ${i.version || ""}`, y = {
+      secrets: i.requirements?.secrets?.length ? {
+        configured: i.requirements.secrets.filter((t) => t.met === !0).map((t) => t.key),
+        pending: i.requirements.secrets.filter((t) => t.met === !1).map((t) => t.key)
       } : void 0,
-      oauth: s.requirements?.authorization?.length ? {
-        providers: s.requirements.authorization.filter((t) => t.provider_id || t.id).map((t) => ({
+      oauth: i.requirements?.authorization?.length ? {
+        providers: i.requirements.authorization.filter((t) => t.provider_id || t.id).map((t) => ({
           id: t.provider_id || t.id || "",
           status: t.status,
           scopes: t.oauth2?.scopes || []
         }))
       } : void 0
-    }, _ = (() => {
+    }, w = (() => {
       switch (e) {
         case "basic":
           return o(e, !1, !1);
@@ -348,33 +348,33 @@ function f(i) {
         default:
           return o(e, !1, !1);
       }
-    })(), a = {
-      ...s,
-      searchableText: h,
-      requirementsSummary: g,
-      metadata: _
+    })(), d = {
+      ...i,
+      searchableText: v,
+      requirementsSummary: y,
+      metadata: w
     };
-    r.push(a), l.set(e, a), u.toolkitsByName.set(e.toLowerCase(), a);
-    for (const t of s.tools) {
-      const v = `${t.name} ${t.fully_qualified_name} ${t.description || ""} ${s.name} ${s.description || ""}`, c = {
+    n.push(d), l.set(e, d), u.toolkitsByName.set(e.toLowerCase(), d);
+    for (const t of i.tools) {
+      const _ = `${t.name} ${t.fully_qualified_name} ${t.description || ""} ${i.name} ${i.description || ""}`, c = {
         ...t,
-        searchableText: v
+        searchableText: _
       };
-      n.push(c), p.set(t.fully_qualified_name, e), u.toolsByName.set(
+      s.push(c), m.set(t.fully_qualified_name, e), u.toolsByName.set(
         t.fully_qualified_name.toLowerCase(),
         c
       );
     }
   }
   return {
-    toolkits: r,
-    tools: n,
+    toolkits: n,
+    tools: s,
     toolkitMap: l,
-    toolToToolkitMap: p,
+    toolToToolkitMap: m,
     searchIndex: u
   };
 }
-const S = {
+const $ = {
   Slack: {
     name: "Slack",
     description: "Slack communication toolkit",
@@ -427,7 +427,7 @@ const S = {
     ],
     requirements: { met: !0, secrets: [], authorization: [], scopes: {} }
   }
-}, C = f(b), N = f(S), A = {
+}, D = A(C), L = A($), P = {
   Gmail: {
     name: "Gmail",
     description: "Gmail email management toolkit",
@@ -614,9 +614,19 @@ const S = {
       scopes: { notion: ["read", "write"] }
     }
   }
-}, $ = f(A);
-function P() {
-  const i = {}, _ = [
+}, R = A(P);
+function O(a = {}) {
+  const {
+    toolkitCount: n = 100,
+    minToolsPerToolkit: s = 10,
+    maxToolsPerToolkit: l = 25
+  } = a, m = {}, u = 3, e = 1, i = 10, v = 0.3, y = 0.7, w = 0.5, d = 0.5, t = [
+    "Gmail",
+    "GoogleCalendar",
+    "GoogleDocs",
+    "Github",
+    "Slack",
+    "Jira",
     "Discord",
     "Notion",
     "Stripe",
@@ -645,42 +655,106 @@ function P() {
     "Video",
     "Audio",
     "Finance",
-    "CRM"
-  ];
-  for (const a of _) {
-    const t = [], c = 8 + Math.floor(Math.random() * 8);
-    for (let m = 0; m < c; m++) {
-      const k = `${a.toLowerCase()}_tool_${m + 1}`;
-      t.push({
-        name: k,
-        fully_qualified_name: `${a.toLowerCase()}.${k}`,
-        qualified_name: k,
-        description: `${a} tool ${m + 1} - performs ${a.toLowerCase()} operations with advanced features`,
+    "CRM",
+    "Workflow",
+    "Scheduler",
+    "Calendar",
+    "Maps",
+    "Weather",
+    "Translation",
+    "Search",
+    "Indexing",
+    "Cache",
+    "Queue",
+    "Messaging",
+    "Notification",
+    "Authentication",
+    "Authorization",
+    "Logging",
+    "Tracing",
+    "Metrics",
+    "Alerting",
+    "Backup",
+    "Recovery"
+  ], _ = [
+    "Pro",
+    "Enterprise",
+    "Basic",
+    "Advanced",
+    "Premium",
+    "Starter",
+    "Core",
+    "Plus"
+  ], c = [];
+  for (let r = 0; c.length < n; r++) {
+    const p = t[r % t.length];
+    if (r < t.length)
+      c.push(p);
+    else {
+      const f = Math.floor(r / t.length) - 1, q = _[f % _.length];
+      c.push(`${p} ${q}`);
+    }
+  }
+  for (const r of c) {
+    const p = [], f = r.toLowerCase().replace(/\s+/g, "_"), q = l - s + 1, S = s + Math.floor(Math.random() * q), T = [
+      "create",
+      "read",
+      "update",
+      "delete",
+      "list",
+      "search",
+      "export",
+      "import",
+      "sync",
+      "validate",
+      "process",
+      "transform",
+      "analyze",
+      "generate",
+      "send",
+      "receive",
+      "connect",
+      "disconnect",
+      "configure",
+      "monitor",
+      "schedule",
+      "cancel",
+      "retry",
+      "archive",
+      "restore"
+    ];
+    for (let g = 0; g < S; g++) {
+      const k = T[g % T.length], b = `${k}_${f}_${g + 1}`;
+      p.push({
+        name: b,
+        fully_qualified_name: `${f}.${b}`,
+        qualified_name: b,
+        description: `${k.charAt(0).toUpperCase() + k.slice(1)} operation for ${r} - performs ${k} with advanced features and error handling`,
         toolkit: {
-          name: a,
-          description: `${a} toolkit for comprehensive ${a.toLowerCase()} operations`,
-          version: `${Math.floor(Math.random() * 3) + 1}.${Math.floor(
-            Math.random() * 10
+          name: r,
+          description: `${r} toolkit for comprehensive operations`,
+          version: `${Math.floor(Math.random() * u) + e}.${Math.floor(
+            Math.random() * i
           )}.0`
         },
         input: { parameters: [] },
         requirements: void 0
       });
     }
-    i[a] = {
-      name: a,
-      description: `${a} toolkit with ${c} powerful tools for ${a.toLowerCase()} operations`,
-      version: `${Math.floor(Math.random() * 3) + 1}.${Math.floor(
-        Math.random() * 10
+    m[r] = {
+      name: r,
+      description: `${r} toolkit with ${S} powerful tools for comprehensive operations`,
+      version: `${Math.floor(Math.random() * u) + e}.${Math.floor(
+        Math.random() * i
       )}.0`,
-      tools: t,
+      tools: p,
       requirements: {
-        met: Math.random() > 0.3,
-        secrets: Math.random() > 0.7 ? [
+        met: Math.random() > v,
+        secrets: Math.random() > y ? [
           {
-            key: `${a.toUpperCase()}_API_KEY`,
-            met: Math.random() > 0.5,
-            status_reason: Math.random() > 0.5 ? "API key configured" : "API key not found"
+            key: `${f.toUpperCase()}_API_KEY`,
+            met: Math.random() > w,
+            status_reason: Math.random() > d ? "API key configured" : "API key not found"
           }
         ] : [],
         authorization: [],
@@ -688,15 +762,15 @@ function P() {
       }
     };
   }
-  return i;
+  return m;
 }
 export {
-  f as createMockToolkitCollection,
-  $ as demoMockToolkitCollection,
-  A as demoMockToolkits,
-  P as generateLargeDataset,
-  C as mockToolkitCollection,
-  b as mockToolkits,
-  N as simpleMockToolkitCollection,
-  S as simpleMockToolkits
+  A as createMockToolkitCollection,
+  R as demoMockToolkitCollection,
+  P as demoMockToolkits,
+  O as generateLargeDataset,
+  D as mockToolkitCollection,
+  C as mockToolkits,
+  L as simpleMockToolkitCollection,
+  $ as simpleMockToolkits
 };

package/dist/components/ui/organisms/toolkit-picker/toolkit-picker.d.ts

@@ -1,2 +1,3 @@
 import { ToolkitPickerProps } from './index';
 export declare const ToolkitPickerDialog: (props: ToolkitPickerProps) => import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=toolkit-picker.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"toolkit-picker.d.ts","sourceRoot":"","sources":["../../../../../lib/components/ui/organisms/toolkit-picker/toolkit-picker.tsx"],"names":[],"mappings":"AAkCA,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,SAAS,CAAC;AAIlD,eAAO,MAAM,mBAAmB,GAAI,OAAO,kBAAkB,4CAsN5D,CAAC"}

package/dist/components/ui/organisms/toolkit-picker/toolkit-picker.js

@@ -1,61 +1,61 @@
 import { jsx as e, jsxs as t } from "react/jsx-runtime";
-import { X as T, Package as _, Wrench as C } from "lucide-react";
-import { useState as z } from "react";
-import { Button as n } from "../../atoms/button.js";
-import { Dialog as D, DialogTrigger as S, DialogContent as j, DialogHeader as A, DialogTitle as B, DialogDescription as M, DialogClose as d, DialogFooter as P } from "../../atoms/dialog.js";
-import { Arcade as F } from "../../atoms/icons/arcade.js";
-import { MobileTooltipProvider as L } from "../../atoms/mobile-tooltip.js";
-import { Tabs as E, TabsList as X, TabsTrigger as m, TabsContent as c } from "../../atoms/tabs.js";
-import { Tooltip as G, TooltipTrigger as H, TooltipContent as I } from "../../atoms/tooltip.js";
-import { ActionButtons as O } from "./components/action-buttons.js";
-import { FilterBadges as Q } from "./components/filter-badges.js";
-import { FooterSummary as R } from "./components/footer-summary.js";
-import { SearchInput as V } from "./components/search-input.js";
-import { SelectButton as W } from "./components/select-button.js";
-import { ToolkitList as Y } from "./components/toolkit-list.js";
-import { ToolsList as $ } from "./components/tools-list.js";
-import { useToolkitPicker as q } from "./hooks/use-toolkit-picker.js";
-const J = /Mac/i, xe = (p) => {
+import { Button as m } from "../../atoms/button.js";
+import { Dialog as S, DialogTrigger as z, DialogContent as D, DialogHeader as j, DialogTitle as A, DialogDescription as R, DialogClose as c, DialogFooter as B } from "../../atoms/dialog.js";
+import { Arcade as M } from "../../atoms/icons/arcade.js";
+import { MobileTooltipProvider as P } from "../../atoms/mobile-tooltip.js";
+import { Tabs as F, TabsList as L, TabsTrigger as p, TabsContent as h } from "../../atoms/tabs.js";
+import { Tooltip as E, TooltipTrigger as X, TooltipContent as G } from "../../atoms/tooltip.js";
+import { X as H, Package as I, Wrench as O } from "lucide-react";
+import { useState as Q, useRef as x } from "react";
+import { ActionButtons as V } from "./components/action-buttons.js";
+import { FilterBadges as W } from "./components/filter-badges.js";
+import { FooterSummary as Y } from "./components/footer-summary.js";
+import { SearchInput as $ } from "./components/search-input.js";
+import { SelectButton as q } from "./components/select-button.js";
+import { ToolkitList as J } from "./components/toolkit-list.js";
+import { ToolsList as K } from "./components/tools-list.js";
+import { useToolkitPicker as U } from "./hooks/use-toolkit-picker.js";
+const Z = /Mac/i, ue = (f) => {
   const {
-    description: h = "Select toolkits and tools",
-    children: x,
+    description: g = "Select toolkits and tools",
+    children: u,
     selectionMode: a = "multi",
     onSelectionChange: s
-  } = p, [g, r] = z(!1), {
+  } = f, [b, r] = Q(!1), i = x(null), o = x(null), {
     state: {
-      selectedToolkits: u,
-      selectedTools: i,
-      activeTab: f,
-      filteredToolkits: b,
-      filteredTools: k
+      selectedToolkits: k,
+      selectedTools: n,
+      activeTab: v,
+      filteredToolkits: N,
+      filteredTools: w
     },
-    setActiveTab: o,
-    clearSearchQuery: v,
-    commitSelections: N,
-    restoreCommittedState: w
-  } = q(), y = () => {
-    N(), s && s({
-      selectedToolkits: Array.from(u.keys()),
-      selectedTools: Array.from(i.keys())
+    setActiveTab: d,
+    clearSearchQuery: T,
+    commitSelections: y,
+    restoreCommittedState: C
+  } = U(), _ = () => {
+    y(), s && s({
+      selectedToolkits: Array.from(k.keys()),
+      selectedTools: Array.from(n.keys())
     }), r(!1);
   };
-  return /* @__PURE__ */ e(L, { children: /* @__PURE__ */ t(
-    D,
+  return /* @__PURE__ */ e(P, { children: /* @__PURE__ */ t(
+    S,
     {
       onOpenChange: (l) => {
-        r(l), l && (w(), v(), o("toolkits"));
+        r(l), l && (C(), T(), d("toolkits"));
       },
-      open: g,
+      open: b,
       children: [
-        /* @__PURE__ */ e(S, { asChild: !0, children: x }),
+        /* @__PURE__ */ e(z, { asChild: !0, children: u }),
         /* @__PURE__ */ t(
-          j,
+          D,
           {
             className: "flex max-h-[80vh] min-h-80 w-[95vw] max-w-xl flex-col gap-2 p-0 sm:max-w-2xl md:max-w-3xl lg:max-w-4xl xl:max-w-5xl 2xl:max-w-7xl",
             "data-testid": "toolkit-picker-dialog",
             showCloseButton: !1,
             children: [
-              /* @__PURE__ */ t(A, { className: "shrink-0 p-4 pb-0 sm:p-6 sm:pb-0", children: [
+              /* @__PURE__ */ t(j, { className: "shrink-0 p-4 pb-0 sm:p-6 sm:pb-0", children: [
                 /* @__PURE__ */ t("div", { className: "flex items-center justify-between", children: [
                   /* @__PURE__ */ t("div", { className: "flex items-center gap-3", children: [
                     /* @__PURE__ */ t("div", { className: "relative flex size-10 items-center justify-center overflow-hidden rounded-xl shadow-lg ring-1 ring-black/5 sm:size-12", children: [
@@ -73,97 +73,111 @@ const J = /Mac/i, xe = (p) => {
                           className: "pointer-events-none absolute inset-0 z-10 bg-[repeating-conic-gradient(from_0deg_at_100%_0%,rgba(0,0,0,0.25)_0deg_1deg,transparent_1deg_12deg)] opacity-30"
                         }
                       ),
-                      /* @__PURE__ */ e("span", { className: "relative z-20", children: /* @__PURE__ */ e(F, { className: "size-5 sm:size-7" }) })
+                      /* @__PURE__ */ e("span", { className: "relative z-20", children: /* @__PURE__ */ e(M, { className: "size-5 sm:size-7" }) })
                     ] }),
                     /* @__PURE__ */ t("div", { className: "ml-1 text-left", children: [
-                      /* @__PURE__ */ e(B, { className: "font-bold text-lg sm:text-xl", children: "Choose Your Tools" }),
-                      /* @__PURE__ */ e(M, { className: "hidden sm:block", children: h })
+                      /* @__PURE__ */ e(A, { className: "font-bold text-lg sm:text-xl", children: "Choose Your Tools" }),
+                      /* @__PURE__ */ e(R, { className: "hidden sm:block", children: g })
                     ] })
                   ] }),
-                  /* @__PURE__ */ e(d, { asChild: !0, children: /* @__PURE__ */ e(
-                    n,
+                  /* @__PURE__ */ e(c, { asChild: !0, children: /* @__PURE__ */ e(
+                    m,
                     {
                       className: "h-8 w-8 rounded-full p-0",
                       "data-testid": "toolkit-picker-close",
                       size: "sm",
                       variant: "ghost",
-                      children: /* @__PURE__ */ e(T, { className: "h-4 w-4" })
+                      children: /* @__PURE__ */ e(H, { className: "h-4 w-4" })
                     }
                   ) })
                 ] }),
-                /* @__PURE__ */ e("div", { className: "mb-2 space-y-2 pt-2 sm:space-y-4 sm:pt-4", children: /* @__PURE__ */ e(V, {}) })
+                /* @__PURE__ */ e("div", { className: "mb-2 space-y-2 pt-2 sm:space-y-4 sm:pt-4", children: /* @__PURE__ */ e($, {}) })
               ] }),
               /* @__PURE__ */ t(
-                E,
+                F,
                 {
                   className: "flex min-h-0 flex-1 flex-col gap-0.5",
-                  onValueChange: (l) => o(l),
-                  value: f,
+                  onValueChange: (l) => d(l),
+                  value: v,
                   children: [
                     /* @__PURE__ */ t("div", { className: "shrink-0 space-y-2 px-4 sm:space-y-3 sm:px-6", children: [
                       /* @__PURE__ */ t("div", { className: "flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between", children: [
-                        /* @__PURE__ */ t(X, { className: "h-10 w-auto gap-1 rounded-md border border-neutral-200 bg-white/60 p-1 shadow-sm dark:border-neutral-800 dark:bg-neutral-900/60", children: [
+                        /* @__PURE__ */ t(L, { className: "h-10 w-auto gap-1 rounded-md border border-neutral-200 bg-white/60 p-1 shadow-sm dark:border-neutral-800 dark:bg-neutral-900/60", children: [
                           /* @__PURE__ */ t(
-                            m,
+                            p,
                             {
                               className: "h-8 rounded-md px-3 font-medium text-neutral-600 text-sm hover:bg-black/5 data-[state=active]:bg-white data-[state=active]:text-neutral-900 dark:text-neutral-300 dark:data-[state=active]:bg-neutral-800 dark:data-[state=active]:text-white dark:hover:bg-white/10",
                               "data-testid": "toolkits-tab",
                               value: "toolkits",
                               children: [
-                                /* @__PURE__ */ e(_, { className: "h-4 w-4" }),
+                                /* @__PURE__ */ e(I, { className: "h-4 w-4" }),
                                 /* @__PURE__ */ e("span", { children: "Toolkits" }),
-                                /* @__PURE__ */ e("span", { className: "ml-1 rounded-full bg-emerald-300 px-1.5 py-0.5 text-emerald-900 text-xs dark:bg-emerald-500/25 dark:text-emerald-200", children: b.size })
+                                /* @__PURE__ */ e("span", { className: "ml-1 rounded-full bg-emerald-300 px-1.5 py-0.5 text-emerald-900 text-xs dark:bg-emerald-500/25 dark:text-emerald-200", children: N.size })
                               ]
                             }
                           ),
                           /* @__PURE__ */ t(
-                            m,
+                            p,
                             {
                               className: "h-8 rounded-md px-3 font-medium text-neutral-600 text-sm hover:bg-black/5 data-[state=active]:bg-white data-[state=active]:text-neutral-900 dark:text-neutral-300 dark:data-[state=active]:bg-neutral-800 dark:data-[state=active]:text-white dark:hover:bg-white/10",
                               "data-testid": "tools-tab",
                               value: "tools",
                               children: [
-                                /* @__PURE__ */ e(C, { className: "h-4 w-4" }),
+                                /* @__PURE__ */ e(O, { className: "h-4 w-4" }),
                                 /* @__PURE__ */ e("span", { children: "Tools" }),
-                                /* @__PURE__ */ e("span", { className: "ml-1 rounded-full bg-emerald-300 px-1.5 py-0.5 text-emerald-900 text-xs dark:bg-emerald-500/25 dark:text-emerald-200", children: k.size })
+                                /* @__PURE__ */ e("span", { className: "ml-1 rounded-full bg-emerald-300 px-1.5 py-0.5 text-emerald-900 text-xs dark:bg-emerald-500/25 dark:text-emerald-200", children: w.size })
                               ]
                             }
                           )
                         ] }),
-                        /* @__PURE__ */ e(O, { selectionMode: a })
+                        /* @__PURE__ */ e(V, { selectionMode: a })
                       ] }),
-                      /* @__PURE__ */ e(Q, {})
+                      /* @__PURE__ */ e(W, {})
                     ] }),
                     /* @__PURE__ */ e(
-                      c,
+                      h,
                       {
                         className: "min-h-0 flex-1 overflow-y-auto px-4 py-2 sm:px-6",
                         "data-testid": "content-area",
+                        ref: i,
                         value: "toolkits",
-                        children: /* @__PURE__ */ e("div", { className: "space-y-3", children: /* @__PURE__ */ e(Y, { selectionMode: a }) })
+                        children: /* @__PURE__ */ e(
+                          J,
+                          {
+                            scrollContainerRef: i,
+                            selectionMode: a
+                          }
+                        )
                       }
                     ),
                     /* @__PURE__ */ e(
-                      c,
+                      h,
                       {
                         className: "min-h-0 flex-1 overflow-y-auto px-4 py-2 sm:px-6",
                         "data-testid": "content-area",
+                        ref: o,
                         value: "tools",
-                        children: /* @__PURE__ */ e("div", { className: "space-y-3", children: /* @__PURE__ */ e($, { selectionMode: a }) })
+                        children: /* @__PURE__ */ e(
+                          K,
+                          {
+                            scrollContainerRef: o,
+                            selectionMode: a
+                          }
+                        )
                       }
                     )
                   ]
                 }
               ),
-              /* @__PURE__ */ e(P, { className: "shrink-0 border-t bg-white px-4 py-3 sm:px-6 sm:py-4 dark:bg-neutral-950", children: /* @__PURE__ */ t(
+              /* @__PURE__ */ e(B, { className: "shrink-0 border-t bg-white px-4 py-3 sm:px-6 sm:py-4 dark:bg-neutral-950", children: /* @__PURE__ */ t(
                 "div",
                 {
                   className: `${a === "single" ? "sm:justify-end" : "sm:justify-between"} flex w-full flex-col gap-3 sm:flex-row sm:items-center`,
                   children: [
-                    a === "multi" && /* @__PURE__ */ e(R, {}),
+                    a === "multi" && /* @__PURE__ */ e(Y, {}),
                     /* @__PURE__ */ t("div", { className: "mt-2 flex gap-2 sm:mt-0 sm:gap-2", children: [
-                      /* @__PURE__ */ e(d, { asChild: !0, children: /* @__PURE__ */ e(
-                        n,
+                      /* @__PURE__ */ e(c, { asChild: !0, children: /* @__PURE__ */ e(
+                        m,
                         {
                           className: "flex-1 sm:flex-none",
                           "data-testid": "cancel-button",
@@ -172,20 +186,20 @@ const J = /Mac/i, xe = (p) => {
                           children: "Cancel"
                         }
                       ) }),
-                      /* @__PURE__ */ t(G, { delayDuration: 350, children: [
-                        /* @__PURE__ */ e(H, { asChild: !0, children: /* @__PURE__ */ e("span", { children: /* @__PURE__ */ e(
-                          W,
+                      /* @__PURE__ */ t(E, { delayDuration: 350, children: [
+                        /* @__PURE__ */ e(X, { asChild: !0, children: /* @__PURE__ */ e("span", { children: /* @__PURE__ */ e(
+                          q,
                           {
                             className: "flex-1 sm:flex-none",
-                            onCommit: y,
-                            selectedCount: i.size,
+                            onCommit: _,
+                            selectedCount: n.size,
                             selectionMode: a
                           }
                         ) }) }),
-                        /* @__PURE__ */ e(I, { children: /* @__PURE__ */ t("div", { className: "flex items-center gap-2", children: [
+                        /* @__PURE__ */ e(G, { children: /* @__PURE__ */ t("div", { className: "flex items-center gap-2", children: [
                           /* @__PURE__ */ e("span", { children: "Submit selection" }),
                           /* @__PURE__ */ t("div", { className: "flex items-center gap-1", children: [
-                            /* @__PURE__ */ e("kbd", { className: "inline-flex h-4 items-center rounded border bg-muted px-1 font-mono text-[10px]", children: typeof window < "u" && J.test(navigator.userAgent) ? "⌘" : "Ctrl" }),
+                            /* @__PURE__ */ e("kbd", { className: "inline-flex h-4 items-center rounded border bg-muted px-1 font-mono text-[10px]", children: typeof window < "u" && Z.test(navigator.userAgent) ? "⌘" : "Ctrl" }),
                             /* @__PURE__ */ e("span", { className: "text-xs", children: "+" }),
                             /* @__PURE__ */ e("kbd", { className: "inline-flex h-4 items-center rounded border bg-muted px-1 font-mono text-[10px]", children: "↵" })
                           ] })
@@ -203,5 +217,5 @@ const J = /Mac/i, xe = (p) => {
   ) });
 };
 export {
-  xe as ToolkitPickerDialog
+  ue as ToolkitPickerDialog
 };

package/dist/components/ui/utils/memo.d.ts

@@ -1,2 +1,3 @@
 export declare function createPropsComparator<T extends object>(keys: Array<keyof T>): (prev: Readonly<T>, next: Readonly<T>) => boolean;
 export declare function areStringArraysEqual(a?: readonly string[] | null, b?: readonly string[] | null): boolean;
+//# sourceMappingURL=memo.d.ts.map

package/dist/components/ui/utils/memo.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"memo.d.ts","sourceRoot":"","sources":["../../../../lib/components/ui/utils/memo.ts"],"names":[],"mappings":"AAAA,wBAAgB,qBAAqB,CAAC,CAAC,SAAS,MAAM,EAAE,IAAI,EAAE,KAAK,CAAC,MAAM,CAAC,CAAC,IAC5C,MAAM,QAAQ,CAAC,CAAC,CAAC,EAAE,MAAM,QAAQ,CAAC,CAAC,CAAC,KAAG,OAAO,CAW7E;AAED,wBAAgB,oBAAoB,CAClC,CAAC,CAAC,EAAE,SAAS,MAAM,EAAE,GAAG,IAAI,EAC5B,CAAC,CAAC,EAAE,SAAS,MAAM,EAAE,GAAG,IAAI,GAC3B,OAAO,CAeT"}