@arcadeai/design-system 2.1.1 → 2.3.0

package/dist/components/index.js

@@ -148,7 +148,7 @@ import { Textarea as Qm } from "./ui/atoms/textarea.js";
 import { Toggle as Ym, toggleVariants as jm } from "./ui/atoms/toggle.js";
 import { Tooltip as _m, TooltipContent as $m, TooltipProvider as oi, TooltipTrigger as ri } from "./ui/atoms/tooltip.js";
 import { EmptyState as ti } from "./ui/molecules/empty-state.js";
-import { R as ai, T as mi } from "../toolkit-card-DgjPGtsJ.js";
+import { R as ai, T as mi } from "../toolkit-card-BWuG_NJi.js";
 import { ToolCard as li } from "./ui/molecules/tool-card.js";
 import { ToolkitPickerTrigger as xi } from "./ui/molecules/toolkit-picker-trigger.js";
 import { ToolkitSelectionSummary as di } from "./ui/molecules/toolkit-selection-summary.js";

package/dist/components/ui/index.js

@@ -148,7 +148,7 @@ import { Textarea as Qm } from "./atoms/textarea.js";
 import { Toggle as Ym, toggleVariants as jm } from "./atoms/toggle.js";
 import { Tooltip as _m, TooltipContent as $m, TooltipProvider as oi, TooltipTrigger as ri } from "./atoms/tooltip.js";
 import { EmptyState as ti } from "./molecules/empty-state.js";
-import { R as ai, T as mi } from "../../toolkit-card-DgjPGtsJ.js";
+import { R as ai, T as mi } from "../../toolkit-card-BWuG_NJi.js";
 import { ToolCard as li } from "./molecules/tool-card.js";
 import { ToolkitPickerTrigger as xi } from "./molecules/toolkit-picker-trigger.js";
 import { ToolkitSelectionSummary as di } from "./molecules/toolkit-selection-summary.js";

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

@@ -1,5 +1,5 @@
 import { EmptyState as e } from "./empty-state.js";
-import { R as m, T as a } from "../../../toolkit-card-DgjPGtsJ.js";
+import { R as m, T as a } from "../../../toolkit-card-BWuG_NJi.js";
 import { ToolCard as p } from "./tool-card.js";
 import { ToolkitPickerTrigger as f } from "./toolkit-picker-trigger.js";
 import { ToolkitSelectionSummary as x } from "./toolkit-selection-summary.js";

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

@@ -11,7 +11,7 @@ import "../../../react-resizable-panels.browser-DggUboAp.js";
 import "../atoms/sidebar.js";
 import "../atoms/table.js";
 import "../atoms/tooltip.js";
-import { O as n, R as q, S as x } from "../../../toolkit-card-DgjPGtsJ.js";
+import { O as n, R as q, S as x } from "../../../toolkit-card-BWuG_NJi.js";
 import "./tool-card.js";
 import "../../../metadata/toolkits.js";
 import "../organisms/toolkit-picker/hooks/use-toolkit-picker.js";

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

@@ -9,23 +9,23 @@ import { c as m } from "../../../utils-Db4QWi-E.js";
 import { createPropsComparator as j } from "../utils/memo.js";
 const K = /\s+/, O = 220, R = 40;
 function z({
-  fully_qualified_name: u,
-  name: k,
-  toolkitName: p,
-  description: n,
-  Icon: C = (s) => /* @__PURE__ */ r(N, { ...s }),
-  isSelected: o = !1,
+  fully_qualified_name: p,
+  name: b,
+  toolkitName: u,
+  description: o,
+  Icon: k = (s) => /* @__PURE__ */ r(N, { ...s }),
+  isSelected: n = !1,
   onSelect: l,
   hideCheckbox: h = !1,
-  ...b
+  ...C
 }) {
   const s = t.useCallback(
-    () => l?.(!o),
-    [o, l]
-  ), [i, x] = t.useState(!1), w = t.useMemo(() => n ? n.length > O ? !0 : n.trim().split(K).length > R : !1, [n]), y = (e) => {
+    () => l?.(!n),
+    [n, l]
+  ), [i, x] = t.useState(!1), y = t.useMemo(() => o ? o.length > O ? !0 : o.trim().split(K).length > R : !1, [o]), v = (e) => {
     const c = e.key === "Enter" || e.code === "Enter", d = e.key === " " || e.key === "Spacebar" || e.code === "Space";
     (c || d) && (e.preventDefault(), s());
-  }, v = t.useCallback(
+  }, w = t.useCallback(
     (e) => l?.(!!e),
     [l]
   ), f = t.useCallback((e) => {
@@ -37,17 +37,17 @@ function z({
   return /* @__PURE__ */ r(
     D,
     {
-      ...b,
-      "aria-label": `Select tool ${u}`,
+      ...C,
+      "aria-label": `Select tool ${p}`,
       className: m(
         "group relative cursor-pointer overflow-hidden rounded-lg border py-3 transition-all duration-200",
         "bg-white/50 hover:bg-white/70 dark:bg-neutral-900/50 dark:hover:bg-neutral-900/70",
         "hover:-translate-y-0.5 hover:shadow-lg",
-        o && "border-emerald-300 ring-2 ring-emerald-500 ring-offset-2 ring-offset-white dark:border-emerald-900/60 dark:ring-offset-neutral-950",
-        !o && "border-neutral-200 hover:border-neutral-300 dark:border-neutral-800 dark:hover:border-neutral-700"
+        n && "border-2 border-emerald-600 dark:border-emerald-400",
+        !n && "border-neutral-200 hover:border-neutral-300 dark:border-neutral-800 dark:hover:border-neutral-700"
       ),
       onClick: s,
-      onKeyDown: y,
+      onKeyDown: v,
       tabIndex: 0,
       children: /* @__PURE__ */ r(I, { className: "px-3", children: /* @__PURE__ */ a(
         "div",
@@ -61,8 +61,8 @@ function z({
             !h && /* @__PURE__ */ r("div", { className: "flex items-center justify-center pt-1.5", children: /* @__PURE__ */ r(
               P,
               {
-                checked: o,
-                onCheckedChange: v,
+                checked: n,
+                onCheckedChange: w,
                 onClick: f,
                 onKeyDown: g,
                 tabIndex: -1
@@ -70,13 +70,13 @@ function z({
             ) }),
             /* @__PURE__ */ a("div", { className: "min-w-0 space-y-2", children: [
               /* @__PURE__ */ a("div", { className: "flex min-w-0 items-start gap-3", children: [
-                /* @__PURE__ */ r("div", { className: "flex size-9 items-center justify-center rounded bg-gradient-to-b from-neutral-200 to-neutral-100 ring-1 ring-black/5 dark:from-neutral-800 dark:to-neutral-900 dark:ring-white/5", children: /* @__PURE__ */ r(C, { className: "size-6 text-neutral-700 dark:text-neutral-200" }) }),
+                /* @__PURE__ */ r("div", { className: "flex size-9 items-center justify-center rounded bg-gradient-to-b from-neutral-200 to-neutral-100 ring-1 ring-black/5 dark:from-neutral-800 dark:to-neutral-900 dark:ring-white/5", children: /* @__PURE__ */ r(k, { className: "size-6 text-neutral-700 dark:text-neutral-200" }) }),
                 /* @__PURE__ */ a("div", { className: "flex h-9 min-w-0 flex-col justify-center space-y-0.5", children: [
-                  /* @__PURE__ */ r("h3", { className: "truncate font-semibold text-base text-neutral-900 leading-tight dark:text-neutral-100", children: k ?? u }),
-                  p && /* @__PURE__ */ r("span", { className: "font-medium text-neutral-500 text-xs leading-tight dark:text-neutral-400", children: p })
+                  /* @__PURE__ */ r("h3", { className: "truncate font-semibold text-base text-neutral-900 leading-tight dark:text-neutral-100", children: b ?? p }),
+                  u && /* @__PURE__ */ r("span", { className: "font-medium text-neutral-500 text-xs leading-tight dark:text-neutral-400", children: u })
                 ] })
               ] }),
-              n && /* @__PURE__ */ a(T, { onOpenChange: x, open: i, children: [
+              o && /* @__PURE__ */ a(T, { onOpenChange: x, open: i, children: [
                 /* @__PURE__ */ a("div", { className: "space-y-1", children: [
                   /* @__PURE__ */ r(
                     "p",
@@ -85,10 +85,10 @@ function z({
                         "text-neutral-600 text-sm dark:text-neutral-400",
                         !i && "line-clamp-3"
                       ),
-                      children: n
+                      children: o
                     }
                   ),
-                  w && /* @__PURE__ */ r(_, { asChild: !0, children: /* @__PURE__ */ a(
+                  y && /* @__PURE__ */ r(_, { asChild: !0, children: /* @__PURE__ */ a(
                     E,
                     {
                       className: "h-auto px-0",

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 "../../../utils-Db4QWi-E.js";
-import { T as k } from "../../../toolkit-card-DgjPGtsJ.js";
+import { T as k } from "../../../toolkit-card-BWuG_NJi.js";
 import "../utils/memo.js";
 export {
   k as ToolkitCard

package/dist/components/ui/molecules/toolkit-selection-summary.js

@@ -7,7 +7,7 @@ import "../../../react-resizable-panels.browser-DggUboAp.js";
 import "../atoms/sidebar.js";
 import "react";
 import "../atoms/table.js";
-import "../../../toolkit-card-DgjPGtsJ.js";
+import "../../../toolkit-card-BWuG_NJi.js";
 import "./tool-card.js";
 import { getToolkitIcon as z } from "../atoms/icons/utils.js";
 import "../organisms/toolkit-picker/hooks/use-toolkit-picker.js";

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

@@ -0,0 +1,6 @@
+import { SelectionMode } from '../index';
+type ActionButtonsProps = {
+    selectionMode: SelectionMode;
+};
+export declare function ActionButtons({ selectionMode }: ActionButtonsProps): import("react/jsx-runtime").JSX.Element;
+export {};

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

@@ -0,0 +1,54 @@
+import { jsxs as l, jsx as r } from "react/jsx-runtime";
+import { X as v, CheckSquare as x } from "lucide-react";
+import { Button as s } from "../../../atoms/button.js";
+import { useToolkitPicker as b } from "../hooks/use-toolkit-picker.js";
+function y({ selectionMode: o }) {
+  const {
+    state: {
+      selectedToolkits: i,
+      selectedTools: a,
+      activeTab: n,
+      filteredToolkits: c,
+      filteredTools: d
+    },
+    clearSelections: m,
+    selectAll: u
+  } = b(), h = i.size > 0 || a.size > 0, t = n === "toolkits" ? Array.from(c).flatMap(
+    (e) => e.tools.map((k) => k.fully_qualified_name)
+  ) : Array.from(d).map((e) => e.fully_qualified_name), f = t.length > 0 && t.every((e) => a.has(e));
+  return /* @__PURE__ */ l("div", { className: "hidden items-center gap-2 sm:flex", children: [
+    h && /* @__PURE__ */ l(
+      s,
+      {
+        className: "h-8 border-neutral-300 text-neutral-700 hover:bg-neutral-50 hover:text-neutral-900 dark:border-neutral-700 dark:text-neutral-300 dark:hover:bg-neutral-900/40 dark:hover:text-neutral-100",
+        "data-testid": "clear-selections",
+        onClick: m,
+        size: "sm",
+        variant: "outline",
+        children: [
+          /* @__PURE__ */ r(v, { className: "h-4 w-4 text-red-600 dark:text-red-400" }),
+          "Clear All"
+        ]
+      }
+    ),
+    o === "multi" && !f && /* @__PURE__ */ l(
+      s,
+      {
+        className: "h-8",
+        "data-testid": "select-all",
+        onClick: () => {
+          u(t);
+        },
+        size: "sm",
+        variant: "outline",
+        children: [
+          /* @__PURE__ */ r(x, { className: "h-4 w-4" }),
+          "Select all"
+        ]
+      }
+    )
+  ] });
+}
+export {
+  y as ActionButtons
+};

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

@@ -0,0 +1 @@
+export declare function FilterBadges(): import("react/jsx-runtime").JSX.Element | null;

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

@@ -0,0 +1,92 @@
+import { jsxs as r, jsx as e } from "react/jsx-runtime";
+import { FilterIcon as u, X as l, Search as x } from "lucide-react";
+import { Badge as i } from "../../../atoms/badge.js";
+import { getToolkitIcon as b } from "../../../atoms/icons/utils.js";
+import { useToolkitPicker as h } from "../hooks/use-toolkit-picker.js";
+function y() {
+  const {
+    state: { toolkitFilter: t, searchQuery: a, filteredToolkits: d },
+    setActiveTab: n,
+    clearFilter: s,
+    clearSearchQuery: o
+  } = h();
+  return t || a ? /* @__PURE__ */ r("div", { className: "mb-2 flex flex-wrap items-center gap-2", children: [
+    t && /* @__PURE__ */ r(
+      i,
+      {
+        className: "h-8 border border-purple-200 bg-purple-50 pr-1.5 pl-2 text-purple-800 shadow-sm ring-1 ring-purple-200/50 dark:border-purple-800/60 dark:bg-purple-950/40 dark:text-purple-200 dark:ring-purple-800/30",
+        variant: "secondary",
+        children: [
+          /* @__PURE__ */ r("span", { className: "mr-1.5 inline-flex items-center gap-1 rounded-full bg-purple-100 px-1.5 py-0.5 text-[10px] text-purple-700 dark:bg-purple-800/60 dark:text-purple-200", children: [
+            /* @__PURE__ */ e(u, { className: "h-3 w-3" }),
+            "Filter"
+          ] }),
+          /* @__PURE__ */ r(
+            "button",
+            {
+              className: "inline-flex h-full items-center gap-1.5",
+              "data-testid": "filter-badge",
+              onClick: () => n("toolkits"),
+              type: "button",
+              children: [
+                (() => {
+                  const c = Array.from(d).find(
+                    (m) => m.name === t
+                  ), p = b({
+                    metadataIcon: c?.metadata?.icon,
+                    toolkitName: t
+                  });
+                  return /* @__PURE__ */ e(p, { className: "h-3.5 w-3.5" });
+                })(),
+                /* @__PURE__ */ e("span", { className: "font-medium text-xs", children: t })
+              ]
+            }
+          ),
+          /* @__PURE__ */ e(
+            "button",
+            {
+              "aria-label": "Clear toolkit filter",
+              className: "ml-1 inline-flex h-5 w-5 items-center justify-center rounded-full bg-purple-100 text-red-600 hover:bg-red-100 hover:text-red-700 focus-visible:ring-[3px] focus-visible:ring-red-200 dark:bg-purple-800/60 dark:text-red-400 dark:hover:bg-red-950/40 dark:hover:text-red-300",
+              "data-testid": "clear-filter",
+              onClick: s,
+              type: "button",
+              children: /* @__PURE__ */ e(l, { className: "h-3.5 w-3.5" })
+            }
+          )
+        ]
+      }
+    ),
+    a && /* @__PURE__ */ r(
+      i,
+      {
+        className: "h-8 border border-teal-200 bg-teal-50 pr-1.5 pl-2 text-teal-800 shadow-sm ring-1 ring-teal-200/50 dark:border-teal-800/60 dark:bg-teal-950/40 dark:text-teal-200 dark:ring-teal-800/30",
+        variant: "secondary",
+        children: [
+          /* @__PURE__ */ r("span", { className: "mr-1.5 inline-flex items-center gap-1 rounded-full bg-teal-100 px-1.5 py-0.5 text-[10px] text-teal-700 dark:bg-teal-800/60 dark:text-teal-200", children: [
+            /* @__PURE__ */ e(x, { className: "h-3 w-3" }),
+            "Search"
+          ] }),
+          /* @__PURE__ */ r("span", { className: "font-medium text-xs", children: [
+            '"',
+            a,
+            '"'
+          ] }),
+          /* @__PURE__ */ e(
+            "button",
+            {
+              "aria-label": "Clear search query",
+              className: "ml-1 inline-flex h-5 w-5 items-center justify-center rounded-full bg-teal-100 text-red-600 hover:bg-red-100 hover:text-red-700 focus-visible:ring-[3px] focus-visible:ring-red-200 dark:bg-teal-800/60 dark:text-red-400 dark:hover:bg-red-950/40 dark:hover:text-red-300",
+              "data-testid": "clear-search",
+              onClick: o,
+              type: "button",
+              children: /* @__PURE__ */ e(l, { className: "h-3.5 w-3.5" })
+            }
+          )
+        ]
+      }
+    )
+  ] }) : null;
+}
+export {
+  y as FilterBadges
+};

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

@@ -1,35 +1,69 @@
-import { jsxs as a, jsx as t } from "react/jsx-runtime";
-import { Search as i } from "lucide-react";
+import { jsxs as d, jsx as e } from "react/jsx-runtime";
+import { Search as y } from "lucide-react";
+import { useRef as T } from "react";
 import "../../../atoms/mobile-tooltip.js";
 import "../../../atoms/chart.js";
-import { Input as s } from "../../../atoms/input.js";
+import { Input as k } from "../../../atoms/input.js";
 import "../../../../../react-resizable-panels.browser-DggUboAp.js";
 import "../../../atoms/sidebar.js";
-import "react";
 import "../../../atoms/table.js";
-import "../../../../../toolkit-card-DgjPGtsJ.js";
+import "../../../../../toolkit-card-BWuG_NJi.js";
 import "../../../molecules/tool-card.js";
 import "../../../../../metadata/toolkits.js";
-import { useToolkitPicker as m } from "../hooks/use-toolkit-picker.js";
-function k() {
-  const {
-    state: { searchQuery: r },
-    setSearchQuery: e
-  } = m();
-  return /* @__PURE__ */ a("div", { className: "relative flex-1", children: [
-    /* @__PURE__ */ t(i, { className: "-translate-y-1/2 absolute top-1/2 left-3.5 size-4 text-gray-400" }),
-    /* @__PURE__ */ t(
-      s,
+import { useToolkitPicker as g } from "../hooks/use-toolkit-picker.js";
+function z() {
+  const r = T(null), {
+    state: {
+      searchQuery: o,
+      activeTab: i,
+      filteredToolkits: s,
+      filteredTools: l,
+      selectionMode: a
+    },
+    setSearchQuery: n,
+    toggleToolkit: c,
+    toggleTool: u,
+    setActiveTab: m,
+    setToolkitFilter: f
+  } = g(), p = () => {
+    const t = Array.from(s)[0];
+    if (t) {
+      if (a === "single") {
+        f(t.name), m("tools");
+        return;
+      }
+      c(t);
+    }
+  }, h = () => {
+    const t = Array.from(l)[0];
+    t && u(t);
+  };
+  return /* @__PURE__ */ d("div", { className: "relative flex-1", children: [
+    /* @__PURE__ */ e(y, { className: "-translate-y-1/2 absolute top-1/2 left-3.5 size-4 text-gray-400" }),
+    /* @__PURE__ */ e(
+      k,
       {
+        "aria-label": "Search toolkits and tools",
+        autoFocus: !0,
         className: "h-9 pl-10",
         "data-testid": "search-input",
-        onChange: (o) => e(o.target.value),
+        onChange: (t) => n(t.target.value),
+        onKeyDown: (t) => {
+          if (!(t.key !== "Enter" || !(o.trim().length > 0))) {
+            if (t.preventDefault(), t.stopPropagation(), i === "toolkits") {
+              p();
+              return;
+            }
+            h();
+          }
+        },
         placeholder: "Search toolkits and tools",
-        value: r
+        ref: r,
+        value: o
       }
     )
   ] });
 }
 export {
-  k as SearchInput
+  z as SearchInput
 };

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

@@ -7,7 +7,7 @@ import "../../../../../react-resizable-panels.browser-DggUboAp.js";
 import "../../../atoms/sidebar.js";
 import "react";
 import "../../../atoms/table.js";
-import "../../../../../toolkit-card-DgjPGtsJ.js";
+import "../../../../../toolkit-card-BWuG_NJi.js";
 import "../../../molecules/tool-card.js";
 import "../../../../../metadata/toolkits.js";
 import "../hooks/use-toolkit-picker.js";

package/dist/components/ui/organisms/toolkit-picker/components/toolkit-card-with-selection.js

@@ -1,6 +1,6 @@
 import { jsx as m } from "react/jsx-runtime";
 import { getToolkitIcon as c } from "../../../atoms/icons/utils.js";
-import { T as d } from "../../../../../toolkit-card-DgjPGtsJ.js";
+import { T as d } from "../../../../../toolkit-card-BWuG_NJi.js";
 function g({
   toolkit: e,
   selectedTools: o,

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

@@ -0,0 +1,6 @@
+import { SelectionMode } from '../index';
+type ToolkitListProps = {
+    selectionMode: SelectionMode;
+};
+export declare function ToolkitList({ selectionMode }: ToolkitListProps): import("react/jsx-runtime").JSX.Element;
+export {};

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

@@ -0,0 +1,90 @@
+import { jsx as t, jsxs as l } from "react/jsx-runtime";
+import { EmptyState as k } from "../../../molecules/empty-state.js";
+import "../../../../../toolkit-card-BWuG_NJi.js";
+import "../../../molecules/tool-card.js";
+import "lucide-react";
+import "../../../../../metadata/toolkits.js";
+import { useToolkitPicker as f } from "../hooks/use-toolkit-picker.js";
+import "../../../atoms/mobile-tooltip.js";
+import "../../../atoms/chart.js";
+import "../../../../../react-resizable-panels.browser-DggUboAp.js";
+import "../../../atoms/sidebar.js";
+import "react";
+import "../../../atoms/table.js";
+import { ToolkitCardWithSelection as h } from "./toolkit-card-with-selection.js";
+function F({ selectionMode: s }) {
+  const {
+    state: { filteredToolkits: i, selectedToolkits: r, selectedTools: a },
+    toggleToolkit: x,
+    setActiveTab: d,
+    setToolkitFilter: n
+  } = f();
+  if (i.size === 0)
+    return /* @__PURE__ */ t(
+      k,
+      {
+        "data-testid": "empty-toolkits",
+        description: "Try a different search term",
+        title: "No toolkits found"
+      }
+    );
+  const m = Array.from(i), o = m.filter(
+    (e) => r.has(e.name)
+  ), c = m.filter(
+    (e) => !r.has(e.name)
+  ), p = (e) => (u) => {
+    if (s === "single") {
+      d("tools"), n(e.name);
+      return;
+    }
+    x(e);
+  }, g = (e) => () => {
+    n(e.name), d("tools");
+  };
+  return /* @__PURE__ */ l("div", { className: "space-y-4", "data-testid": "toolkits-grid", children: [
+    o.length > 0 && /* @__PURE__ */ l(
+      "div",
+      {
+        className: "mt-0.5 space-y-2",
+        "data-testid": "selected-toolkits-section",
+        children: [
+          /* @__PURE__ */ l("div", { className: "flex items-center gap-1.5", children: [
+            /* @__PURE__ */ t("h3", { className: "font-semibold text-neutral-700 text-sm dark:text-neutral-200", children: "Selected" }),
+            /* @__PURE__ */ t("span", { className: "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: o.length })
+          ] }),
+          /* @__PURE__ */ t("div", { className: "mt-3 grid grid-cols-1 gap-4 sm:grid-cols-2 xl:grid-cols-3", children: o.map((e) => /* @__PURE__ */ t(
+            h,
+            {
+              onSelect: p(e),
+              onView: g(e),
+              selectedTools: new Set(a.keys()),
+              selectionMode: s,
+              toolkit: e
+            },
+            e.name
+          )) })
+        ]
+      }
+    ),
+    /* @__PURE__ */ l("div", { className: "space-y-2", children: [
+      o.length > 0 && /* @__PURE__ */ l("div", { className: "flex items-center gap-1.5", children: [
+        /* @__PURE__ */ t("h3", { className: "font-semibold text-neutral-700 text-sm dark:text-neutral-200", children: "All toolkits" }),
+        /* @__PURE__ */ t("span", { className: "rounded-full bg-neutral-200 px-1.5 py-0.5 text-neutral-800 text-xs dark:bg-neutral-800 dark:text-neutral-200", children: c.length })
+      ] }),
+      /* @__PURE__ */ t("div", { className: "mt-2 grid grid-cols-1 gap-4 sm:grid-cols-2 xl:grid-cols-3", children: c.map((e) => /* @__PURE__ */ t(
+        h,
+        {
+          onSelect: p(e),
+          onView: g(e),
+          selectedTools: new Set(a.keys()),
+          selectionMode: s,
+          toolkit: e
+        },
+        e.name
+      )) })
+    ] })
+  ] });
+}
+export {
+  F as ToolkitList
+};

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

@@ -0,0 +1,6 @@
+import { SelectionMode } from '../index';
+type ToolsListProps = {
+    selectionMode: SelectionMode;
+};
+export declare function ToolsList({ selectionMode }: ToolsListProps): import("react/jsx-runtime").JSX.Element;
+export {};

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

@@ -0,0 +1,97 @@
+import { jsx as t, jsxs as a } from "react/jsx-runtime";
+import { getToolIconByToolkitName as u } from "../../../atoms/icons/utils.js";
+import { EmptyState as h } from "../../../molecules/empty-state.js";
+import "../../../../../toolkit-card-BWuG_NJi.js";
+import { ToolCard as p } from "../../../molecules/tool-card.js";
+import "lucide-react";
+import { useToolkitPicker as x } from "../hooks/use-toolkit-picker.js";
+import "../../../atoms/mobile-tooltip.js";
+import "../../../atoms/chart.js";
+import "../../../../../react-resizable-panels.browser-DggUboAp.js";
+import "../../../atoms/sidebar.js";
+import "react";
+import "../../../atoms/table.js";
+function $({ selectionMode: d }) {
+  const {
+    state: { filteredTools: n, filteredToolkits: o, selectedTools: l },
+    toggleTool: m
+  } = x();
+  if (n.size === 0)
+    return /* @__PURE__ */ t(
+      h,
+      {
+        "data-testid": "empty-tools",
+        description: "Try a different search term",
+        title: "No tools found"
+      }
+    );
+  const c = Array.from(n), i = c.filter(
+    (e) => l.has(e.fully_qualified_name)
+  ), f = c.filter(
+    (e) => !l.has(e.fully_qualified_name)
+  );
+  return /* @__PURE__ */ a("div", { className: "space-y-4", "data-testid": "tools-grid", children: [
+    i.length > 0 && /* @__PURE__ */ a("div", { className: "mt-0.5 space-y-2", "data-testid": "selected-tools-section", children: [
+      /* @__PURE__ */ a("div", { className: "flex items-center gap-1.5", children: [
+        /* @__PURE__ */ t("h3", { className: "font-semibold text-neutral-700 text-sm dark:text-neutral-200", children: "Selected" }),
+        /* @__PURE__ */ t("span", { className: "rounded-full bg-emerald-300 px-1.5 py-0.5 text-emerald-900 text-xs dark:bg-emerald-600 dark:text-emerald-200", children: i.length })
+      ] }),
+      /* @__PURE__ */ t(
+        "div",
+        {
+          className: "mt-3 grid grid-cols-1 gap-4 sm:grid-cols-2 xl:grid-cols-3",
+          "data-testid": "selected-tools-grid",
+          children: i.map((e) => {
+            const r = Array.from(o).find(
+              (s) => s.name === e.toolkit.name
+            )?.metadata?.icon ?? u(e.toolkit.name);
+            return /* @__PURE__ */ t(
+              p,
+              {
+                "data-testid": `tool-card-${e.fully_qualified_name}`,
+                description: e.description,
+                fully_qualified_name: e.fully_qualified_name,
+                hideCheckbox: d === "single",
+                Icon: r,
+                isSelected: l.has(e.fully_qualified_name),
+                name: e.name,
+                onSelect: () => m(e),
+                toolkitName: e.toolkit.name
+              },
+              e.fully_qualified_name
+            );
+          })
+        }
+      )
+    ] }),
+    /* @__PURE__ */ a("div", { className: "space-y-2", children: [
+      i.length > 0 && /* @__PURE__ */ a("div", { className: "flex items-center gap-1.5", children: [
+        /* @__PURE__ */ t("h3", { className: "font-semibold text-neutral-700 text-sm dark:text-neutral-200", children: "All tools" }),
+        /* @__PURE__ */ t("span", { className: "rounded-full bg-neutral-200 px-1.5 py-0.5 text-neutral-800 text-xs dark:bg-neutral-800 dark:text-neutral-200", children: f.length })
+      ] }),
+      /* @__PURE__ */ t("div", { className: "mt-2 grid grid-cols-1 gap-4 sm:grid-cols-2 xl:grid-cols-3", children: f.map((e) => {
+        const r = Array.from(o).find(
+          (s) => s.name === e.toolkit.name
+        )?.metadata?.icon ?? u(e.toolkit.name);
+        return /* @__PURE__ */ t(
+          p,
+          {
+            "data-testid": `tool-card-${e.fully_qualified_name}`,
+            description: e.description,
+            fully_qualified_name: e.fully_qualified_name,
+            hideCheckbox: d === "single",
+            Icon: r,
+            isSelected: l.has(e.fully_qualified_name),
+            name: e.name,
+            onSelect: () => m(e),
+            toolkitName: e.toolkit.name
+          },
+          e.fully_qualified_name
+        );
+      }) })
+    ] })
+  ] });
+}
+export {
+  $ as ToolsList
+};