@arcadeai/design-system 3.27.0 → 3.27.1

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

@@ -1,96 +1,101 @@
-import { jsx as t, jsxs as a } from "react/jsx-runtime";
-import { EmptyState as h } from "../../../molecules/empty-state.js";
-import "../../../../../toolkit-card-CsV6xoOG.js";
-import { ToolCard as p } from "../../../molecules/tool-card.js";
-import { getToolkitIcon as g } from "../../../../../metadata/toolkit-icons.js";
+import { jsx as t, jsxs as l } from "react/jsx-runtime";
+import { VirtualizedGrid as c } from "../../../atoms/virtualized-grid.js";
+import "../../../molecules/date-time-picker.js";
+import { EmptyState as _ } from "../../../molecules/empty-state.js";
+import "../../../../../toolkit-card-Qou74oWg.js";
+import { ToolCard as k } from "../../../molecules/tool-card.js";
+import { getToolkitIcon as T } from "../../../../../metadata/toolkit-icons.js";
 import "lucide-react";
-import { useToolkitPicker as x } from "../hooks/use-toolkit-picker.js";
+import { useToolkitPicker as N } from "../hooks/use-toolkit-picker.js";
 import "../../../atoms/mobile-tooltip.js";
+import "react";
 import "../../../atoms/chart.js";
 import "../../../../../react-resizable-panels.browser-31wAXhAV.js";
 import "../../../atoms/sidebar.js";
-import "react";
-function j({ selectionMode: n }) {
+import { useColumns as q } from "../../../../../hooks/use-columns.js";
+const f = 136;
+function K({
+  selectionMode: p,
+  scrollContainerRef: s
+}) {
   const {
-    state: { filteredTools: m, filteredToolkits: o, selectedTools: l },
-    toggleTool: c
-  } = x();
-  if (m.size === 0)
+    state: { filteredTools: o, filteredToolkits: u, selectedTools: i },
+    toggleTool: g
+  } = N(), d = q();
+  if (o.size === 0)
     return /* @__PURE__ */ t(
-      h,
+      _,
       {
         "data-testid": "empty-tools",
         description: "Try a different search term",
         title: "No tools found"
       }
     );
-  const f = Array.from(m), i = f.filter(
-    (e) => l.has(e.fully_qualified_name)
-  ), u = f.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: [
+  const m = Array.from(o), a = m.filter(
+    (e) => i.has(e.fully_qualified_name)
+  ), r = m.filter(
+    (e) => !i.has(e.fully_qualified_name)
+  ), x = new Map(
+    Array.from(u).map((e) => [e.name, e])
+  ), n = (e) => {
+    const h = x.get(e.toolkit.name), y = T(h?.metadata?.id);
+    return /* @__PURE__ */ t(
+      k,
+      {
+        "data-testid": `tool-card-${e.fully_qualified_name}`,
+        description: e.description,
+        fully_qualified_name: e.fully_qualified_name,
+        hideCheckbox: p === "single",
+        Icon: y,
+        isSelected: i.has(e.fully_qualified_name),
+        name: e.name,
+        onSelect: () => g(e),
+        toolkitName: e.toolkit.name
+      },
+      e.fully_qualified_name
+    );
+  };
+  return /* @__PURE__ */ l("div", { className: "space-y-4", "data-testid": "tools-grid", children: [
+    a.length > 0 && /* @__PURE__ */ l("div", { className: "space-y-3", "data-testid": "selected-tools-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-600 dark:text-emerald-200", children: i.length })
+        /* @__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: a.length })
       ] }),
       /* @__PURE__ */ t(
-        "div",
+        c,
         {
-          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(
-              (d) => d.name === e.toolkit.name
-            ), s = g(r?.metadata?.id);
-            return /* @__PURE__ */ t(
-              p,
-              {
-                "data-testid": `tool-card-${e.fully_qualified_name}`,
-                description: e.description,
-                fully_qualified_name: e.fully_qualified_name,
-                hideCheckbox: n === "single",
-                Icon: s,
-                isSelected: l.has(e.fully_qualified_name),
-                name: e.name,
-                onSelect: () => c(e),
-                toolkitName: e.toolkit.name
-              },
-              e.fully_qualified_name
-            );
-          })
+          columns: d,
+          estimateRowSize: f,
+          getItemKey: (e) => e.fully_qualified_name,
+          gridClassName: "grid grid-cols-1 gap-3 sm:grid-cols-2 xl:grid-cols-3",
+          items: a,
+          parentRef: s,
+          renderItem: n,
+          rowGapPx: 12
         }
       )
     ] }),
-    /* @__PURE__ */ a("div", { className: "space-y-2", children: [
-      i.length > 0 && /* @__PURE__ */ a("div", { className: "flex items-center gap-1.5", children: [
+    r.length > 0 && /* @__PURE__ */ l("div", { className: "space-y-3", children: [
+      a.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 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: u.length })
+        /* @__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: r.length })
       ] }),
-      /* @__PURE__ */ t("div", { className: "mt-2 grid grid-cols-1 gap-4 sm:grid-cols-2 xl:grid-cols-3", children: u.map((e) => {
-        const r = Array.from(o).find(
-          (d) => d.name === e.toolkit.name
-        ), s = g(r?.metadata?.id);
-        return /* @__PURE__ */ t(
-          p,
-          {
-            "data-testid": `tool-card-${e.fully_qualified_name}`,
-            description: e.description,
-            fully_qualified_name: e.fully_qualified_name,
-            hideCheckbox: n === "single",
-            Icon: s,
-            isSelected: l.has(e.fully_qualified_name),
-            name: e.name,
-            onSelect: () => c(e),
-            toolkitName: e.toolkit.name
-          },
-          e.fully_qualified_name
-        );
-      }) })
+      /* @__PURE__ */ t(
+        c,
+        {
+          columns: d,
+          estimateRowSize: f,
+          getItemKey: (e) => e.fully_qualified_name,
+          gridClassName: "grid grid-cols-1 gap-3 sm:grid-cols-2 xl:grid-cols-3",
+          items: r,
+          parentRef: s,
+          renderItem: n,
+          rowGapPx: 12
+        }
+      )
     ] })
   ] });
 }
 export {
-  j as ToolsList
+  K as ToolsList
 };

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

@@ -0,0 +1,8 @@
+/**
+ * Featured toolkit names for the toolkit picker.
+ * These appear in a highlighted "Featured Toolkits" section when not searching.
+ * Matching is case-insensitive.
+ */
+export declare const FEATURED_TOOLKITS: readonly ["Gmail", "GoogleCalendar", "GoogleDocs", "Github", "Slack", "Jira"];
+export type FeaturedToolkit = (typeof FEATURED_TOOLKITS)[number];
+//# sourceMappingURL=featured-toolkits.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"featured-toolkits.d.ts","sourceRoot":"","sources":["../../../../../../lib/components/ui/organisms/toolkit-picker/hooks/featured-toolkits.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AACH,eAAO,MAAM,iBAAiB,+EAOpB,CAAC;AAEX,MAAM,MAAM,eAAe,GAAG,CAAC,OAAO,iBAAiB,CAAC,CAAC,MAAM,CAAC,CAAC"}

package/dist/components/ui/organisms/toolkit-picker/hooks/featured-toolkits.js

@@ -0,0 +1,11 @@
+const o = [
+  "Gmail",
+  "GoogleCalendar",
+  "GoogleDocs",
+  "Github",
+  "Slack",
+  "Jira"
+];
+export {
+  o as FEATURED_TOOLKITS
+};

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

@@ -15,19 +15,21 @@ export type UseToolkitPickerProps = {
 export type ToolkitPickerTab = "toolkits" | "tools";
 export type ToolkitSelectionMap = Map<string, ProcessedToolkit>;
 export type ToolSelectionMap = Map<string, boolean>;
-type UseToolkitPickerState = {
-    toolkitCollection?: ToolkitCollection;
+type ReducerState = {
     selectionMode: SelectionMode;
     selectedToolkits: ToolkitSelectionMap;
     selectedTools: ToolSelectionMap;
     committedToolkits: ToolkitSelectionMap;
     committedTools: ToolSelectionMap;
-    filteredToolkits: Set<ProcessedToolkit>;
-    filteredTools: Set<ProcessedTool>;
     searchQuery: string;
     toolkitFilter: string;
     activeTab: ToolkitPickerTab;
 };
+type UseToolkitPickerState = ReducerState & {
+    toolkitCollection?: ToolkitCollection;
+    filteredToolkits: Set<ProcessedToolkit>;
+    filteredTools: Set<ProcessedTool>;
+};
 type ToolkitPickerContextType = {
     state: UseToolkitPickerState;
     toggleToolkit: (toolkit: ProcessedToolkit) => void;

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

@@ -1 +1 @@
-{"version":3,"file":"use-toolkit-picker.d.ts","sourceRoot":"","sources":["../../../../../../lib/components/ui/organisms/toolkit-picker/hooks/use-toolkit-picker.tsx"],"names":[],"mappings":"AAAA,kGAAkG;AAElG,OAAO,KAAK,EACV,aAAa,EACb,gBAAgB,EAChB,iBAAiB,EAClB,MAAM,uBAAuB,CAAC;AAC/B,OAAO,EAEL,KAAK,SAAS,EAIf,MAAM,OAAO,CAAC;AACf,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,UAAU,CAAC;AAE9C,MAAM,MAAM,yBAAyB,GAAG;IACtC,gBAAgB,CAAC,EAAE,MAAM,EAAE,CAAC;IAC5B,aAAa,CAAC,EAAE,MAAM,EAAE,CAAC;IACzB,iBAAiB,CAAC,EAAE,MAAM,EAAE,CAAC;IAC7B,cAAc,CAAC,EAAE,MAAM,EAAE,CAAC;CAC3B,CAAC;AAEF,MAAM,MAAM,qBAAqB,GAAG;IAClC,iBAAiB,CAAC,EAAE,iBAAiB,CAAC;IACtC,aAAa,CAAC,EAAE,aAAa,CAAC;IAC9B,YAAY,CAAC,EAAE,yBAAyB,CAAC;CAC1C,CAAC;AAEF,MAAM,MAAM,gBAAgB,GAAG,UAAU,GAAG,OAAO,CAAC;AACpD,MAAM,MAAM,mBAAmB,GAAG,GAAG,CAAC,MAAM,EAAE,gBAAgB,CAAC,CAAC;AAChE,MAAM,MAAM,gBAAgB,GAAG,GAAG,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC;AAEpD,KAAK,qBAAqB,GAAG;IAC3B,iBAAiB,CAAC,EAAE,iBAAiB,CAAC;IACtC,aAAa,EAAE,aAAa,CAAC;IAC7B,gBAAgB,EAAE,mBAAmB,CAAC;IACtC,aAAa,EAAE,gBAAgB,CAAC;IAChC,iBAAiB,EAAE,mBAAmB,CAAC;IACvC,cAAc,EAAE,gBAAgB,CAAC;IACjC,gBAAgB,EAAE,GAAG,CAAC,gBAAgB,CAAC,CAAC;IACxC,aAAa,EAAE,GAAG,CAAC,aAAa,CAAC,CAAC;IAClC,WAAW,EAAE,MAAM,CAAC;IACpB,aAAa,EAAE,MAAM,CAAC;IACtB,SAAS,EAAE,gBAAgB,CAAC;CAC7B,CAAC;AAseF,KAAK,wBAAwB,GAAG;IAC9B,KAAK,EAAE,qBAAqB,CAAC;IAC7B,aAAa,EAAE,CAAC,OAAO,EAAE,gBAAgB,KAAK,IAAI,CAAC;IACnD,UAAU,EAAE,CAAC,IAAI,EAAE,aAAa,KAAK,IAAI,CAAC;IAC1C,SAAS,EAAE,CAAC,eAAe,CAAC,EAAE,MAAM,EAAE,KAAK,IAAI,CAAC;IAChD,eAAe,EAAE,MAAM,IAAI,CAAC;IAC5B,gBAAgB,EAAE,MAAM,IAAI,CAAC;IAC7B,qBAAqB,EAAE,MAAM,IAAI,CAAC;IAClC,cAAc,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACxC,gBAAgB,EAAE,MAAM,IAAI,CAAC;IAC7B,gBAAgB,EAAE,CAAC,MAAM,EAAE,MAAM,KAAK,IAAI,CAAC;IAC3C,WAAW,EAAE,MAAM,IAAI,CAAC;IACxB,YAAY,EAAE,CAAC,GAAG,EAAE,gBAAgB,KAAK,IAAI,CAAC;CAC/C,CAAC;AAOF,wBAAgB,qBAAqB,CAAC,EACpC,QAAQ,EACR,iBAAiB,EACjB,aAAa,EACb,YAAY,GACb,EAAE;IAAE,QAAQ,EAAE,SAAS,CAAA;CAAE,GAAG,qBAAqB,2CAmDjD;AAGD,wBAAgB,gBAAgB,6BAQ/B;AAGD,YAAY,EAAE,qBAAqB,EAAE,CAAC"}
+{"version":3,"file":"use-toolkit-picker.d.ts","sourceRoot":"","sources":["../../../../../../lib/components/ui/organisms/toolkit-picker/hooks/use-toolkit-picker.tsx"],"names":[],"mappings":"AAAA,kGAAkG;AAElG,OAAO,KAAK,EACV,aAAa,EACb,gBAAgB,EAChB,iBAAiB,EAClB,MAAM,uBAAuB,CAAC;AAC/B,OAAO,EAEL,KAAK,SAAS,EAKf,MAAM,OAAO,CAAC;AACf,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,UAAU,CAAC;AAE9C,MAAM,MAAM,yBAAyB,GAAG;IACtC,gBAAgB,CAAC,EAAE,MAAM,EAAE,CAAC;IAC5B,aAAa,CAAC,EAAE,MAAM,EAAE,CAAC;IACzB,iBAAiB,CAAC,EAAE,MAAM,EAAE,CAAC;IAC7B,cAAc,CAAC,EAAE,MAAM,EAAE,CAAC;CAC3B,CAAC;AAEF,MAAM,MAAM,qBAAqB,GAAG;IAClC,iBAAiB,CAAC,EAAE,iBAAiB,CAAC;IACtC,aAAa,CAAC,EAAE,aAAa,CAAC;IAC9B,YAAY,CAAC,EAAE,yBAAyB,CAAC;CAC1C,CAAC;AAEF,MAAM,MAAM,gBAAgB,GAAG,UAAU,GAAG,OAAO,CAAC;AACpD,MAAM,MAAM,mBAAmB,GAAG,GAAG,CAAC,MAAM,EAAE,gBAAgB,CAAC,CAAC;AAChE,MAAM,MAAM,gBAAgB,GAAG,GAAG,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC;AAGpD,KAAK,YAAY,GAAG;IAClB,aAAa,EAAE,aAAa,CAAC;IAC7B,gBAAgB,EAAE,mBAAmB,CAAC;IACtC,aAAa,EAAE,gBAAgB,CAAC;IAChC,iBAAiB,EAAE,mBAAmB,CAAC;IACvC,cAAc,EAAE,gBAAgB,CAAC;IACjC,WAAW,EAAE,MAAM,CAAC;IACpB,aAAa,EAAE,MAAM,CAAC;IACtB,SAAS,EAAE,gBAAgB,CAAC;CAC7B,CAAC;AAGF,KAAK,qBAAqB,GAAG,YAAY,GAAG;IAC1C,iBAAiB,CAAC,EAAE,iBAAiB,CAAC;IACtC,gBAAgB,EAAE,GAAG,CAAC,gBAAgB,CAAC,CAAC;IACxC,aAAa,EAAE,GAAG,CAAC,aAAa,CAAC,CAAC;CACnC,CAAC;AAmUF,KAAK,wBAAwB,GAAG;IAC9B,KAAK,EAAE,qBAAqB,CAAC;IAC7B,aAAa,EAAE,CAAC,OAAO,EAAE,gBAAgB,KAAK,IAAI,CAAC;IACnD,UAAU,EAAE,CAAC,IAAI,EAAE,aAAa,KAAK,IAAI,CAAC;IAC1C,SAAS,EAAE,CAAC,eAAe,CAAC,EAAE,MAAM,EAAE,KAAK,IAAI,CAAC;IAChD,eAAe,EAAE,MAAM,IAAI,CAAC;IAC5B,gBAAgB,EAAE,MAAM,IAAI,CAAC;IAC7B,qBAAqB,EAAE,MAAM,IAAI,CAAC;IAClC,cAAc,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACxC,gBAAgB,EAAE,MAAM,IAAI,CAAC;IAC7B,gBAAgB,EAAE,CAAC,MAAM,EAAE,MAAM,KAAK,IAAI,CAAC;IAC3C,WAAW,EAAE,MAAM,IAAI,CAAC;IACxB,YAAY,EAAE,CAAC,GAAG,EAAE,gBAAgB,KAAK,IAAI,CAAC;CAC/C,CAAC;AAOF,wBAAgB,qBAAqB,CAAC,EACpC,QAAQ,EACR,iBAAiB,EACjB,aAAa,EACb,YAAY,GACb,EAAE;IAAE,QAAQ,EAAE,SAAS,CAAA;CAAE,GAAG,qBAAqB,2CAyIjD;AAGD,wBAAgB,gBAAgB,6BAQ/B;AAGD,YAAY,EAAE,qBAAqB,EAAE,CAAC"}