@arcadeai/design-system 1.5.1 → 1.7.0

package/dist/components/ui/molecules/toolkit-picker-trigger.js

@@ -4,37 +4,37 @@ import { Badge as y } from "../atoms/badge.js";
 import { Button as z } from "../atoms/button.js";
 import { getToolkitIcon as j } from "../atoms/icons/utils.js";
 import { Tooltip as C, TooltipTrigger as $, TooltipContent as L } from "../atoms/tooltip.js";
-import { c as g } from "../../../utils-Db4QWi-E.js";
+import { c as p } from "../../../utils-Db4QWi-E.js";
 import { useToolkitPicker as I } from "../organisms/toolkit-picker/hooks/use-toolkit-picker.js";
 function D({
-  maxVisibleIcons: x = 2,
-  className: N,
-  countType: r = "toolkits",
-  loading: i = !1,
+  maxVisibleIcons: g = 2,
+  className: b,
+  countType: s = "toolkits",
+  loading: o = !1,
   ...n
 }) {
   const {
-    state: { committedToolkits: f, committedTools: T }
-  } = I(), o = Array.from(f.keys()), l = o.length, p = T.size, c = o.slice(0, x).map((a) => {
-    const s = f.get(a);
+    state: { committedToolkits: f, committedTools: N }
+  } = I(), i = Array.from(f.keys()), l = i.length, x = N.size, c = i.slice(0, g).map((a) => {
+    const r = f.get(a);
     return j({
-      metadataIcon: s?.metadata?.icon,
+      metadataIcon: r?.metadata?.icon,
       toolkitName: a
     });
-  }), k = Math.max(l - c.length, 0), b = r === "tools";
-  let m = "Toolkits", d = l;
-  b && (m = "Tools", d = p);
-  let u = `Select ${r === "tools" ? "Tools" : "Toolkits"}`;
-  return i ? u = "Loading toolkits..." : l > 0 && (u = `${d} ${m.toLowerCase()} selected`), /* @__PURE__ */ e(
+  }), k = Math.max(l - c.length, 0), T = s === "tools";
+  let d = "Toolkits", m = l;
+  T && (d = "Tools", m = x);
+  let u = `Select ${s === "tools" ? "Tools" : "Toolkits"}`;
+  return o ? u = "Loading toolkits..." : l > 0 && (u = `${m} ${d.toLowerCase()} selected`), /* @__PURE__ */ e(
     z,
     {
       ...n,
       "aria-label": u,
-      className: g("gap-2 bg-transparent transition-colors", N),
-      disabled: i,
+      className: p("gap-2 bg-transparent transition-colors", b),
+      disabled: o,
       size: n.size ?? "sm",
       variant: n.variant ?? "outline",
-      children: i ? /* @__PURE__ */ t(h, { children: [
+      children: o ? /* @__PURE__ */ t(h, { children: [
         /* @__PURE__ */ e(v, { className: "h-4 w-4 animate-spin" }),
         /* @__PURE__ */ t("div", { className: "flex items-center gap-2", children: [
           /* @__PURE__ */ e("div", { className: "h-4 w-16 animate-pulse rounded bg-neutral-200 dark:bg-neutral-700" }),
@@ -42,23 +42,20 @@ function D({
         ] })
       ] }) : /* @__PURE__ */ t(h, { children: [
         l > 0 && /* @__PURE__ */ t(C, { children: [
-          /* @__PURE__ */ e($, { asChild: !0, children: /* @__PURE__ */ t("span", { className: "mr-1.5 flex items-center", children: [
-            c.map((a, s) => /* @__PURE__ */ e(
+          /* @__PURE__ */ e($, { asChild: !0, children: /* @__PURE__ */ t("span", { className: "mr-2 flex items-center", children: [
+            c.map((a, r) => /* @__PURE__ */ e(
               "div",
               {
-                className: g(
-                  "relative first:ml-0",
-                  s > 0 && "-ml-1.5"
-                ),
-                style: { zIndex: s + 1 },
-                children: /* @__PURE__ */ e("div", { className: "flex size-5 items-center justify-center rounded-full bg-neutral-200 p-2 ring-1 ring-black/15 dark:bg-neutral-800 dark:ring-white/15", children: /* @__PURE__ */ e(a, { className: "h-2.5 w-2.5" }) })
+                className: p("relative first:ml-0", r > 0 && "-ml-2"),
+                style: { zIndex: r + 1 },
+                children: /* @__PURE__ */ e("div", { className: "flex size-6 items-center justify-center rounded-xl bg-gradient-to-br from-white to-neutral-50 p-1.5 shadow-lg ring-1 ring-neutral-200/80 transition-all hover:scale-110 hover:shadow-xl dark:from-neutral-800 dark:to-neutral-900 dark:ring-neutral-700/80", children: /* @__PURE__ */ e(a, { className: "h-3 w-3 text-neutral-700 dark:text-neutral-300" }) })
               },
-              `${a.name || "icon"}-${s}`
+              `${a.name || "icon"}-${r}`
             )),
             k > 0 && /* @__PURE__ */ t(
               "span",
               {
-                className: "-ml-2 inline-flex h-6 w-6 items-center justify-center rounded-full bg-neutral-200 font-medium text-[10px] text-neutral-700 ring-1 ring-black/15 dark:bg-neutral-800 dark:text-neutral-200 dark:ring-white/15",
+                className: "inline-flex h-6 w-6 items-center justify-center rounded-xl bg-gradient-to-br from-blue-50 to-blue-100 font-bold text-[11px] text-blue-800 shadow-lg ring-1 ring-blue-200/80 dark:from-blue-900/40 dark:to-blue-800/40 dark:text-blue-200 dark:ring-blue-700/80",
                 style: { zIndex: c.length + 10 },
                 children: [
                   "+",
@@ -72,14 +69,14 @@ function D({
               /* @__PURE__ */ e("span", { className: "font-semibold text-neutral-800 dark:text-neutral-200", children: "Toolkits" }),
               /* @__PURE__ */ t("span", { className: "text-neutral-700 dark:text-neutral-300", children: [
                 ": ",
-                o.join(", ")
+                i.join(", ")
               ] })
             ] }),
             /* @__PURE__ */ t("li", { children: [
               /* @__PURE__ */ e("span", { className: "font-semibold text-neutral-800 dark:text-neutral-200", children: "Tools" }),
               /* @__PURE__ */ t("span", { className: "text-neutral-700 dark:text-neutral-300", children: [
                 ": ",
-                p,
+                x,
                 " selected"
               ] })
             ] })
@@ -89,12 +86,12 @@ function D({
           /* @__PURE__ */ e(w, { className: "h-4 w-4" }),
           /* @__PURE__ */ t("span", { className: "truncate text-sm", children: [
             "Select ",
-            r === "tools" ? "Tools" : "Toolkits"
+            s === "tools" ? "Tools" : "Toolkits"
           ] })
         ] }),
         l > 0 && /* @__PURE__ */ t("span", { className: "inline-flex items-center gap-2 truncate text-sm", children: [
-          m,
-          /* @__PURE__ */ e(y, { className: "px-1.5 py-0 text-[11px]", variant: "default", children: d })
+          d,
+          /* @__PURE__ */ e(y, { className: "px-1.5 py-0 text-[11px]", variant: "default", children: m })
         ] })
       ] })
     }

package/dist/components/ui/organisms/toolkit-picker/hooks/use-toolkit-picker-filter.test.js

@@ -1,8 +1,8 @@
 import { jsx as s } from "react/jsx-runtime";
-import { r as c, a as i } from "../../../../../react.esm-CFMQn0EI.js";
+import { r as c, a as i } from "../../../../../react.esm-CAxz4dXo.js";
 import { mockToolkitCollection as a } from "../mocks/toolkit-collection.js";
 import { useToolkitPicker as n, ToolkitPickerProvider as k } from "./use-toolkit-picker.js";
-import { d as T, b as d, i as u, g as e, v as p } from "../../../../../vi.bdSIJ99Y-CQ1FdEM8.js";
+import { d as T, b as d, i as u, g as e, v as p } from "../../../../../vi.bdSIJ99Y-hyudrc3R.js";
 T("useToolkitPicker - Filter Tests", () => {
   d(() => {
     p.clearAllMocks();

package/dist/components/ui/organisms/toolkit-picker/hooks/use-toolkit-picker-search.test.js

@@ -1,8 +1,8 @@
 import { jsx as i } from "react/jsx-runtime";
-import { r as c, a as l } from "../../../../../react.esm-CFMQn0EI.js";
+import { r as c, a as l } from "../../../../../react.esm-CAxz4dXo.js";
 import { mockToolkitCollection as a } from "../mocks/toolkit-collection.js";
 import { useToolkitPicker as n, ToolkitPickerProvider as u } from "./use-toolkit-picker.js";
-import { d as k, b as h, i as d, g as o, v as m } from "../../../../../vi.bdSIJ99Y-CQ1FdEM8.js";
+import { d as k, b as h, i as d, g as o, v as m } from "../../../../../vi.bdSIJ99Y-hyudrc3R.js";
 k("useToolkitPicker - Search Tests", () => {
   h(() => {
     m.clearAllMocks();

package/dist/components/ui/organisms/toolkit-picker/hooks/use-toolkit-picker-selection.test.js

@@ -1,8 +1,8 @@
 import { jsx as r } from "react/jsx-runtime";
-import { r as i, a as t } from "../../../../../react.esm-CFMQn0EI.js";
+import { r as i, a as t } from "../../../../../react.esm-CAxz4dXo.js";
 import { simpleMockToolkitCollection as c } from "../mocks/toolkit-collection.js";
 import { useToolkitPicker as a, ToolkitPickerProvider as n } from "./use-toolkit-picker.js";
-import { d as u, b as k, i as d, g as o, v as m } from "../../../../../vi.bdSIJ99Y-CQ1FdEM8.js";
+import { d as u, b as k, i as d, g as o, v as m } from "../../../../../vi.bdSIJ99Y-hyudrc3R.js";
 u("useToolkitPicker - Selection Tests", () => {
   k(() => {
     m.clearAllMocks();

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

@@ -1,14 +1,23 @@
 import { ReactNode } from 'react';
 import { ProcessedTool, ProcessedToolkit, ToolkitCollection } from '../../../../../lib/arcade/arcade';
 import { SelectionMode } from '../index';
+export type ToolkitPickerInitialProps = {
+    selectedToolkits?: string[];
+    selectedTools?: string[];
+    committedToolkits?: string[];
+    committedTools?: string[];
+};
 export type UseToolkitPickerProps = {
     toolkitCollection?: ToolkitCollection;
     selectionMode?: SelectionMode;
+    initialProps?: ToolkitPickerInitialProps;
 };
 export type ToolkitPickerTab = 'toolkits' | 'tools';
 export type ToolkitSelectionMap = Map<string, ProcessedToolkit>;
 export type ToolSelectionMap = Map<string, boolean>;
-type UseToolkitPickerState = UseToolkitPickerProps & {
+type UseToolkitPickerState = {
+    toolkitCollection?: ToolkitCollection;
+    selectionMode: SelectionMode;
     selectedToolkits: ToolkitSelectionMap;
     selectedTools: ToolSelectionMap;
     committedToolkits: ToolkitSelectionMap;
@@ -18,7 +27,6 @@ type UseToolkitPickerState = UseToolkitPickerProps & {
     searchQuery: string;
     toolkitFilter: string;
     activeTab: ToolkitPickerTab;
-    selectionMode: SelectionMode;
 };
 type ToolkitPickerContextType = {
     state: UseToolkitPickerState;
@@ -34,7 +42,7 @@ type ToolkitPickerContextType = {
     clearFilter: () => void;
     setActiveTab: (tab: ToolkitPickerTab) => void;
 };
-export declare function ToolkitPickerProvider({ children, ...props }: {
+export declare function ToolkitPickerProvider({ children, toolkitCollection, selectionMode, initialProps, }: {
     children: ReactNode;
 } & UseToolkitPickerProps): import("react/jsx-runtime").JSX.Element;
 export declare function useToolkitPicker(): ToolkitPickerContextType;

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

@@ -1,8 +1,8 @@
-import { jsx as f } from "react/jsx-runtime";
-import { createContext as S, useReducer as w, useEffect as m, useContext as E } from "react";
+import { jsx as m } from "react/jsx-runtime";
+import { createContext as S, useReducer as E, useEffect as C, useContext as w } from "react";
 const r = (o, t) => t ? new Set(
   o.filter((e) => e.searchableText?.toLowerCase().includes(t))
-) : new Set(o), a = (o, t) => {
+) : new Set(o), d = (o, t) => {
   if (!t)
     return [];
   const e = t.toolkitMap?.get(o);
@@ -10,9 +10,9 @@ const r = (o, t) => t ? new Set(
     return [];
   if (!t.tools?.length)
     return [];
-  const l = new Set(e.tools.map((s) => s.fully_qualified_name));
-  return t.tools.filter((s) => l.has(s.fully_qualified_name));
-}, C = (o, t, e) => e ? e.toolkitMap?.get(t)?.tools?.some((s) => o.has(s.fully_qualified_name)) ?? !1 : !1, p = (o, t, e) => !t.size && e.size ? "tools" : t.size && !e.size ? "toolkits" : o, _ = (o, t) => {
+  const l = new Set(e.tools.map((i) => i.fully_qualified_name));
+  return t.tools.filter((i) => l.has(i.fully_qualified_name));
+}, _ = (o, t, e) => e ? e.toolkitMap?.get(t)?.tools?.some((i) => o.has(i.fully_qualified_name)) ?? !1 : !1, h = (o, t, e) => !t.size && e.size ? "tools" : t.size && !e.size ? "toolkits" : o, y = (o, t) => {
   if (!t)
     return {
       selectedToolkits: /* @__PURE__ */ new Map(),
@@ -20,22 +20,22 @@ const r = (o, t) => t ? new Set(
     };
   const e = /* @__PURE__ */ new Map(), l = /* @__PURE__ */ new Map();
   if (o)
-    for (const s of o) {
-      l.set(s, !0);
-      const i = t.toolToToolkitMap?.get(s);
-      if (i) {
-        const n = t.toolkitMap?.get(i);
-        n && e.set(i, n);
+    for (const i of o) {
+      l.set(i, !0);
+      const n = t.toolToToolkitMap?.get(i);
+      if (n) {
+        const s = t.toolkitMap?.get(n);
+        s && e.set(n, s);
       }
     }
   else
-    for (const s of t.toolkits) {
-      e.set(s.name, s);
-      for (const i of s.tools)
-        l.set(i.fully_qualified_name, !0);
+    for (const i of t.toolkits) {
+      e.set(i.name, i);
+      for (const n of i.tools)
+        l.set(n.fully_qualified_name, !0);
     }
   return { selectedToolkits: e, selectedTools: l };
-}, h = (o, t, e) => {
+}, p = (o, t, e) => {
   if (!e)
     return {
       searchQuery: o,
@@ -43,87 +43,123 @@ const r = (o, t) => t ? new Set(
       filteredToolkits: /* @__PURE__ */ new Set(),
       filteredTools: /* @__PURE__ */ new Set()
     };
-  const l = t ? new Set(a(t, e)) : new Set(e.tools || []);
+  const l = t ? new Set(d(t, e)) : new Set(e.tools || []);
   return {
     searchQuery: o,
     activeTab: "toolkits",
     filteredToolkits: new Set(e.toolkits || []),
     filteredTools: l
   };
-}, y = (o, t) => {
-  const e = o.toLowerCase().trim(), { toolkits: l = [], tools: s = [] } = t.toolkitCollection || {}, i = !l.length, n = !s.length;
-  if (i && n)
+}, L = (o, t) => {
+  const e = o.toLowerCase().trim(), { toolkits: l = [], tools: i = [] } = t.toolkitCollection || {}, n = !l.length, s = !i.length;
+  if (n && s)
     return { searchQuery: o };
-  const c = r(l, e), u = t.toolkitFilter ? a(t.toolkitFilter, t.toolkitCollection) : s, k = r(u, e);
+  const c = r(l, e), u = t.toolkitFilter ? d(t.toolkitFilter, t.toolkitCollection) : i, a = r(u, e);
   return {
     searchQuery: o,
     filteredToolkits: c,
-    filteredTools: k,
-    activeTab: p(t.activeTab, c, k)
+    filteredTools: a,
+    activeTab: h(t.activeTab, c, a)
   };
-}, L = (o, t) => {
-  const e = t.selectedTools.has(o), l = t.toolkitCollection?.toolToToolkitMap?.get(o), s = new Map(t.selectedToolkits), i = new Map(t.selectedTools);
+}, M = (o, t) => {
+  const e = t.selectedTools.has(o), l = t.toolkitCollection?.toolToToolkitMap?.get(o), i = new Map(t.selectedToolkits), n = new Map(t.selectedTools);
   if (e)
-    i.delete(o), l && (C(
-      i,
+    n.delete(o), l && (_(
+      n,
       l,
       t.toolkitCollection
-    ) || s.delete(l));
-  else if (t.selectionMode === "single" && (i.clear(), s.clear()), i.set(o, !0), l) {
-    const n = t.toolkitCollection?.toolkitMap?.get(l);
-    n && s.set(l, n);
+    ) || i.delete(l));
+  else if (t.selectionMode === "single" && (n.clear(), i.clear()), n.set(o, !0), l) {
+    const s = t.toolkitCollection?.toolkitMap?.get(l);
+    s && i.set(l, s);
   }
-  return { selectedTools: i, selectedToolkits: s };
-}, M = (o) => ({
-  ...o,
-  selectedToolkits: /* @__PURE__ */ new Map(),
-  selectedTools: /* @__PURE__ */ new Map(),
-  committedToolkits: /* @__PURE__ */ new Map(),
-  committedTools: /* @__PURE__ */ new Map(),
-  searchQuery: "",
-  toolkitFilter: "",
-  activeTab: "toolkits",
-  selectionMode: o.selectionMode || "multi",
-  filteredToolkits: new Set(o.toolkitCollection?.toolkits || []),
-  filteredTools: new Set(o.toolkitCollection?.tools || [])
-}), I = (o, t) => {
+  return { selectedTools: n, selectedToolkits: i };
+}, k = (o, t, e) => {
+  const l = /* @__PURE__ */ new Map(), i = /* @__PURE__ */ new Map();
+  if (!e)
+    return { selectedToolkits: l, selectedTools: i };
+  if (o)
+    for (const n of o) {
+      const s = e.toolkitMap?.get(n);
+      s && l.set(n, s);
+    }
+  if (t)
+    for (const n of t)
+      i.set(n, !0);
+  return { selectedToolkits: l, selectedTools: i };
+}, I = (o) => {
+  const { selectedToolkits: t, selectedTools: e } = k(
+    o.initialProps?.selectedToolkits,
+    o.initialProps?.selectedTools,
+    o.toolkitCollection
+  ), { selectedToolkits: l, selectedTools: i } = k(
+    o.initialProps?.committedToolkits || o.initialProps?.selectedToolkits,
+    o.initialProps?.committedTools || o.initialProps?.selectedTools,
+    o.toolkitCollection
+  );
+  return {
+    toolkitCollection: o.toolkitCollection,
+    selectionMode: o.selectionMode || "multi",
+    selectedToolkits: t,
+    selectedTools: e,
+    committedToolkits: l,
+    committedTools: i,
+    searchQuery: "",
+    toolkitFilter: "",
+    activeTab: "toolkits",
+    filteredToolkits: new Set(o.toolkitCollection?.toolkits || []),
+    filteredTools: new Set(o.toolkitCollection?.tools || [])
+  };
+}, O = (o, t) => {
   switch (t.type) {
     case "TOGGLE_TOOLKIT": {
-      const e = t.payload, { name: l, tools: s } = e, i = o.selectedToolkits.has(l), n = new Map(o.selectedToolkits), T = new Map(o.selectedTools);
-      if (i) {
-        n.delete(l);
-        for (const c of s)
+      const e = t.payload, { name: l, tools: i } = e, n = o.selectedToolkits.has(l), s = new Map(o.selectedToolkits), T = new Map(o.selectedTools);
+      if (n) {
+        s.delete(l);
+        for (const c of i)
           T.delete(c.fully_qualified_name);
       } else {
-        n.set(l, e);
-        for (const c of s)
+        s.set(l, e);
+        for (const c of i)
           T.set(c.fully_qualified_name, !0);
       }
       return {
         ...o,
-        selectedToolkits: n,
+        selectedToolkits: s,
         selectedTools: T
       };
     }
-    case "SET_INITIAL_DATA": {
-      const e = t.payload;
+    case "SET_INITIAL_SELECTIONS": {
+      const e = t.payload, { selectedToolkits: l, selectedTools: i } = k(
+        e.selectedToolkits,
+        e.selectedTools,
+        o.toolkitCollection
+      ), {
+        selectedToolkits: n,
+        selectedTools: s
+      } = k(
+        e.committedToolkits || e.selectedToolkits,
+        e.committedTools || e.selectedTools,
+        o.toolkitCollection
+      );
       return {
         ...o,
-        toolkitCollection: e,
-        filteredToolkits: new Set(e.toolkits || []),
-        filteredTools: new Set(e.tools || [])
+        selectedToolkits: l,
+        selectedTools: i,
+        committedToolkits: n,
+        committedTools: s
       };
     }
     case "TOGGLE_TOOL": {
-      const e = t.payload.fully_qualified_name, l = L(e, o);
+      const e = t.payload.fully_qualified_name, l = M(e, o);
       return { ...o, ...l };
     }
     case "SELECT_ALL": {
-      const e = t.payload, l = e?.length === 0, i = !e && !o.toolkitCollection?.toolkits?.length;
-      if (l || i)
+      const e = t.payload, l = e?.length === 0, n = !e && !o.toolkitCollection?.toolkits?.length;
+      if (l || n)
         return o;
-      const n = _(e, o.toolkitCollection);
-      return { ...o, ...n };
+      const s = y(e, o.toolkitCollection);
+      return { ...o, ...s };
     }
     case "CLEAR_SELECTIONS":
       return {
@@ -148,19 +184,19 @@ const r = (o, t) => t ? new Set(
       if (o.searchQuery === e)
         return o;
       if (!e.toLowerCase().trim()) {
-        const i = h(
+        const n = p(
           e,
           o.toolkitFilter,
           o.toolkitCollection
         );
-        return { ...o, ...i };
+        return { ...o, ...n };
       }
-      const s = y(e, o);
-      return { ...o, ...s };
+      const i = L(e, o);
+      return { ...o, ...i };
     }
     case "CLEAR_SEARCH_QUERY": {
       const e = o.toolkitFilter ? new Set(
-        a(o.toolkitFilter, o.toolkitCollection)
+        d(o.toolkitFilter, o.toolkitCollection)
       ) : new Set(o.toolkitCollection?.tools || []);
       return {
         ...o,
@@ -171,18 +207,18 @@ const r = (o, t) => t ? new Set(
       };
     }
     case "SET_TOOLKIT_FILTER": {
-      const e = t.payload, l = a(
+      const e = t.payload, l = d(
         e,
         o.toolkitCollection
       );
       if (!l.length)
         return { ...o, toolkitFilter: e };
-      const s = o.searchQuery.toLowerCase().trim();
+      const i = o.searchQuery.toLowerCase().trim();
       return {
         ...o,
         toolkitFilter: e,
         activeTab: "tools",
-        filteredTools: r(l, s)
+        filteredTools: r(l, i)
       };
     }
     case "CLEAR_FILTER": {
@@ -236,39 +272,45 @@ const r = (o, t) => t ? new Set(
     default:
       return o;
   }
-}, d = S(
+}, f = S(
   null
 );
-function R({
+function A({
   children: o,
-  ...t
+  toolkitCollection: t,
+  selectionMode: e,
+  initialProps: l
 }) {
-  const [e, l] = w(
-    I,
-    t,
-    M
+  const i = {
+    toolkitCollection: t,
+    selectionMode: e,
+    initialProps: l
+  }, [n, s] = E(
+    O,
+    i,
+    I
   );
-  m(() => {
-    t.toolkitCollection && l({ type: "SET_INITIAL_DATA", payload: t.toolkitCollection });
-  }, [t.toolkitCollection]);
-  const s = {
-    state: e,
-    toggleToolkit: (i) => l({ type: "TOGGLE_TOOLKIT", payload: i }),
-    toggleTool: (i) => l({ type: "TOGGLE_TOOL", payload: i }),
-    selectAll: (i) => l({ type: "SELECT_ALL", payload: i }),
-    clearSelections: () => l({ type: "CLEAR_SELECTIONS" }),
-    commitSelections: () => l({ type: "COMMIT_SELECTIONS" }),
-    restoreCommittedState: () => l({ type: "RESTORE_COMMITTED_STATE" }),
-    setSearchQuery: (i) => l({ type: "SET_SEARCH_QUERY", payload: i }),
-    clearSearchQuery: () => l({ type: "CLEAR_SEARCH_QUERY" }),
-    setToolkitFilter: (i) => l({ type: "SET_TOOLKIT_FILTER", payload: i }),
-    clearFilter: () => l({ type: "CLEAR_FILTER" }),
-    setActiveTab: (i) => l({ type: "SET_ACTIVE_TAB", payload: i })
+  C(() => {
+    t && l && (l.selectedToolkits || l.selectedTools || l.committedToolkits || l.committedTools) && s({ type: "SET_INITIAL_SELECTIONS", payload: l });
+  }, [t, l]);
+  const T = {
+    state: n,
+    toggleToolkit: (c) => s({ type: "TOGGLE_TOOLKIT", payload: c }),
+    toggleTool: (c) => s({ type: "TOGGLE_TOOL", payload: c }),
+    selectAll: (c) => s({ type: "SELECT_ALL", payload: c }),
+    clearSelections: () => s({ type: "CLEAR_SELECTIONS" }),
+    commitSelections: () => s({ type: "COMMIT_SELECTIONS" }),
+    restoreCommittedState: () => s({ type: "RESTORE_COMMITTED_STATE" }),
+    setSearchQuery: (c) => s({ type: "SET_SEARCH_QUERY", payload: c }),
+    clearSearchQuery: () => s({ type: "CLEAR_SEARCH_QUERY" }),
+    setToolkitFilter: (c) => s({ type: "SET_TOOLKIT_FILTER", payload: c }),
+    clearFilter: () => s({ type: "CLEAR_FILTER" }),
+    setActiveTab: (c) => s({ type: "SET_ACTIVE_TAB", payload: c })
   };
-  return /* @__PURE__ */ f(d.Provider, { value: s, children: o });
+  return /* @__PURE__ */ m(f.Provider, { value: T, children: o });
 }
-function g() {
-  const o = E(d);
+function F() {
+  const o = w(f);
   if (!o)
     throw new Error(
       "useToolkitPicker must be used within a ToolkitPickerProvider. Make sure to wrap your component with <ToolkitPickerProvider>."
@@ -276,6 +318,6 @@ function g() {
   return o;
 }
 export {
-  R as ToolkitPickerProvider,
-  g as useToolkitPicker
+  A as ToolkitPickerProvider,
+  F as useToolkitPicker
 };

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

@@ -1,4 +1,5 @@
 import { ToolkitCollection } from '../../../../lib/arcade/arcade';
+import { ToolkitPickerInitialProps } from './hooks/use-toolkit-picker';
 import type * as React from 'react';
 export type SelectionMode = 'multi' | 'single';
 export type ToolkitPickerProps = {
@@ -10,5 +11,6 @@ export type ToolkitPickerProps = {
     description?: string;
     children: React.ReactElement;
     selectionMode?: SelectionMode;
+    initialProps?: ToolkitPickerInitialProps;
 };
 export declare function ToolkitPicker(props: ToolkitPickerProps): import("react/jsx-runtime").JSX.Element;

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

@@ -1,10 +1,11 @@
 import { jsx as i } from "react/jsx-runtime";
 import { ToolkitPickerProvider as t } from "./hooks/use-toolkit-picker.js";
 import { ToolkitPickerDialog as e } from "./toolkit-picker.js";
-function k(o) {
+function c(o) {
   return /* @__PURE__ */ i(
     t,
     {
+      initialProps: o.initialProps,
       selectionMode: o.selectionMode,
       toolkitCollection: o.toolkitCollection,
       children: /* @__PURE__ */ i(e, { ...o })
@@ -12,5 +13,5 @@ function k(o) {
   );
 }
 export {
-  k as ToolkitPicker
+  c as ToolkitPicker
 };

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

@@ -4,4 +4,6 @@ export declare function createMockToolkitCollection(toolkits: Record<string, Too
 export declare const simpleMockToolkits: Record<string, Toolkit>;
 export declare const mockToolkitCollection: ToolkitCollection;
 export declare const simpleMockToolkitCollection: ToolkitCollection;
+export declare const demoMockToolkits: Record<string, Toolkit>;
+export declare const demoMockToolkitCollection: ToolkitCollection;
 export declare function generateLargeDataset(): Record<string, Toolkit>;