@bikdotai/bik-component-library 0.0.839 → 0.0.840-beta.0

package/dist/esm/components/agent-builder/components/SelectableListSection.js

@@ -1,82 +1,90 @@
-import { jsx as o, jsxs as i, Fragment as j } from "react/jsx-runtime";
-import ne from "../../../assets/icons/delete.svg.js";
-import te from "../../../assets/icons/edit.svg.js";
-import F from "../../../assets/icons/plus.svg.js";
-import { useState as v, useRef as K, useEffect as le } from "react";
-import E from "styled-components";
-import { TitleSmall as re, BodyCaption as U, BodySecondary as C } from "../../TypographyStyle.js";
+import { jsx as o, jsxs as i, Fragment as q } from "react/jsx-runtime";
+import ce from "../../../assets/icons/delete.svg.js";
+import ie from "../../../assets/icons/edit.svg.js";
+import U from "../../../assets/icons/plus.svg.js";
+import { useState as f, useRef as J, useEffect as de } from "react";
+import _ from "styled-components";
+import { TitleSmall as se, BodyCaption as v, BodySecondary as ue } from "../../TypographyStyle.js";
 import { COLORS as d } from "../../../constants/Theme.js";
-import { SideSection as ce, SideSectionHeader as ie, AddIconButton as de, SourceButtonRow as se, SourceButton as V, SelectableRow as ae, RowText as ue, RowActions as he, RowMenuButton as q, RowActionDivider as fe } from "../AgentBuilder.styled.js";
-import { renderSourceIcon as A, SOURCE_ICONS as pe } from "../utils/sourceIcons.js";
-import { MentionPicker as me } from "./MentionPicker.js";
-import { Dropdown as J } from "../../dropdown/Dropdown.js";
-import { unwrapDropdownValue as P } from "../../dropdown/utils.js";
-import { Button as Se } from "../../button/Button.js";
-import { DeleteConfirmationModal as we } from "../../states-modal/DeleteConfirmationModal.js";
-const Q = "__bik_create_new__", He = ({
-  title: u,
-  helper: _,
-  items: s,
-  addableOptions: f,
-  onAdd: g,
-  onRemove: R,
-  dataTestPrefix: t,
-  emptyText: Y,
-  createOption: n,
-  onConfigure: D,
-  sourceGroups: p,
+import { SideSection as ae, SideSectionHeader as he, AddIconButton as pe, SourceButtonRow as fe, SourceButton as P, SelectableRow as me, RowText as Se, RowActions as ge, RowMenuButton as Q, RowActionDivider as we } from "../AgentBuilder.styled.js";
+import { renderSourceIcon as A, SOURCE_ICONS as ye } from "../utils/sourceIcons.js";
+import { MentionPicker as ve } from "./MentionPicker.js";
+import { Dropdown as X } from "../../dropdown/Dropdown.js";
+import { unwrapDropdownValue as Y } from "../../dropdown/utils.js";
+import { Button as $e } from "../../button/Button.js";
+import { DeleteConfirmationModal as be } from "../../states-modal/DeleteConfirmationModal.js";
+import { Tooltip as E } from "../../tooltips/Tooltip.js";
+const Z = "__bik_create_new__", Ke = ({
+  title: s,
+  helper: D,
+  items: a,
+  addableOptions: m,
+  onAdd: $,
+  onRemove: I,
+  dataTestPrefix: l,
+  emptyText: T,
+  createOption: t,
+  onConfigure: R,
+  sourceGroups: S,
   mentionItems: B,
-  actionSources: m,
-  confirmDelete: h
+  actionSources: g,
+  confirmDelete: p,
+  pickerOpensUp: L
 }) => {
-  const [a, c] = v(!1), [I, $] = v(null), [Z, y] = v(null), S = !!p && p.length > 0, b = p?.find((e) => e.source === Z), l = B !== void 0, L = K(null), z = K(null), [w, x] = v(null);
-  le(() => {
-    if (!l || !a)
+  const [h, r] = f(!1), [z, b] = f(null), [x, H] = f(null), [O, C] = f(null), w = !!S && S.length > 0, k = S?.find((e) => e.source === O), c = B !== void 0, M = J(null), N = J(null), [y, W] = f(null);
+  de(() => {
+    if (!c || !h)
       return;
-    const e = (k) => {
-      const W = k.target;
-      !L.current?.contains(W) && !z.current?.contains(W) && c(!1);
-    }, r = (k) => {
-      k.key === "Escape" && c(!1);
+    const e = (u) => {
+      const V = u.target;
+      !M.current?.contains(V) && !N.current?.contains(V) && r(!1);
+    }, n = (u) => {
+      u.key === "Escape" && r(!1);
     };
-    return document.addEventListener("mousedown", e), document.addEventListener("keydown", r), () => {
-      document.removeEventListener("mousedown", e), document.removeEventListener("keydown", r);
+    return document.addEventListener("mousedown", e), document.addEventListener("keydown", n), () => {
+      document.removeEventListener("mousedown", e), document.removeEventListener("keydown", n);
     };
-  }, [l, a]);
-  const G = S ? l || s.length > 0 : l || f.length > 0 || !!n && s.length > 0, T = s.length === 0 && !!n && !S && !l, H = !!m && m.length > 0, O = (S || H) && s.length === 0, ee = () => {
-    if (l) {
-      x(null), c((e) => !e);
+  }, [c, h]);
+  const ee = w ? c || a.length > 0 : c || m.length > 0 || !!t && a.length > 0, oe = a.length === 0 && !!t && !w && !c, j = !!g && g.length > 0, ne = (w || j) && a.length === 0, te = () => {
+    if (c) {
+      W(null), r((e) => !e);
       return;
     }
-    if (S) {
-      y(null), c((e) => !e);
+    if (w) {
+      C(null), r((e) => !e);
       return;
     }
-    if (f.length === 0 && n) {
-      n.onSelect();
+    if (m.length === 0 && t) {
+      t.onSelect();
       return;
     }
-    c((e) => !e);
-  }, oe = () => s.map((e) => {
-    const r = e.onConfigure ?? (D ? () => D(e.id) : void 0);
+    r((e) => !e);
+  }, le = (e, n) => {
+    if (x)
+      return;
+    const u = n();
+    u && typeof u.then == "function" && (H(e), u.finally(() => H(null)));
+  }, re = () => a.map((e) => {
+    const n = e.onConfigure ?? (R ? () => R(e.id) : void 0);
     return /* @__PURE__ */ i(
-      ae,
+      me,
       {
-        "data-test": `${t}-row-${e.id}`,
+        "data-test": `${l}-row-${e.id}`,
         children: [
           A(e.icon),
-          /* @__PURE__ */ o(ue, { children: /* @__PURE__ */ o(C, { numberOfLines: 1, color: d.content.primary, children: e.label }) }),
-          /* @__PURE__ */ i(he, { children: [
-            r && // Configurable rows (sub-agents, Rest API / email tools) get an
+          /* @__PURE__ */ o(E, { body: e.label, placement: "top", children: /* @__PURE__ */ o(Se, { children: /* @__PURE__ */ o(ue, { numberOfLines: 1, color: d.content.primary, children: e.label }) }) }),
+          /* @__PURE__ */ i(ge, { children: [
+            n && // Configurable rows (sub-agents, Rest API / email tools) get an
             // always-visible edit icon.
-            /* @__PURE__ */ o(
-              q,
+            /* @__PURE__ */ o(E, { body: "Edit", placement: "top", children: /* @__PURE__ */ o(
+              Q,
               {
-                "data-test": `${t}-edit-${e.id}`,
+                "data-test": `${l}-edit-${e.id}`,
                 "aria-label": `Edit ${e.label}`,
-                onClick: r,
+                disabled: x !== null,
+                onClick: () => le(e.id, n),
                 children: /* @__PURE__ */ o(
-                  te,
+                  ie,
                   {
                     width: 16,
                     height: 16,
@@ -84,16 +92,16 @@ const Q = "__bik_create_new__", He = ({
                   }
                 )
               }
-            ),
-            r && /* @__PURE__ */ o(fe, { "aria-hidden": !0 }),
-            /* @__PURE__ */ o(
-              q,
+            ) }),
+            n && /* @__PURE__ */ o(we, { "aria-hidden": !0 }),
+            /* @__PURE__ */ o(E, { body: "Delete", placement: "top", children: /* @__PURE__ */ o(
+              Q,
               {
-                "data-test": `${t}-delete-${e.id}`,
+                "data-test": `${l}-delete-${e.id}`,
                 "aria-label": `Delete ${e.label}`,
-                onClick: () => h ? $(e.id) : R(e.id),
+                onClick: () => p ? b(e.id) : I(e.id),
                 children: /* @__PURE__ */ o(
-                  ne,
+                  ce,
                   {
                     width: 16,
                     height: 16,
@@ -101,18 +109,18 @@ const Q = "__bik_create_new__", He = ({
                   }
                 )
               }
-            )
+            ) })
           ] })
         ]
       },
       e.id
     );
-  }), M = n ? [
-    ...f,
+  }), F = t ? [
+    ...m,
     {
-      label: n.label,
-      value: Q,
-      searchKey: n.label,
+      label: t.label,
+      value: Z,
+      searchKey: t.label,
       customComponent: /* @__PURE__ */ o(
         "div",
         {
@@ -124,163 +132,180 @@ const Q = "__bik_create_new__", He = ({
             fontSize: 14,
             fontWeight: 600
           },
-          children: n.label
+          children: t.label
         }
       )
     }
-  ] : f, N = l ? /* @__PURE__ */ o(
-    me,
+  ] : m, K = c ? /* @__PURE__ */ o(
+    ve,
     {
       items: B ?? [],
       query: "",
       activeIndex: 0,
-      initialSource: w ?? void 0,
+      initialSource: y ?? void 0,
       onSelect: (e) => {
-        c(!1), g(String(e.id));
+        r(!1), $(String(e.id));
       },
-      onClose: () => c(!1),
-      onCreateSubAgent: n ? () => {
-        c(!1), n.onSelect();
+      onClose: () => r(!1),
+      onCreateSubAgent: t ? () => {
+        r(!1), t.onSelect();
       } : void 0,
-      toolActions: H ? m?.map((e) => ({
+      toolActions: j ? g?.map((e) => ({
         ...e,
         onSelect: () => {
-          c(!1), e.onSelect();
+          r(!1), e.onSelect();
         }
       })) : void 0
     },
-    w ?? "__root__"
+    y ?? "__root__"
   ) : null;
-  return /* @__PURE__ */ i(ce, { children: [
-    /* @__PURE__ */ i(ie, { children: [
-      /* @__PURE__ */ o(re, { color: d.content.primary, children: u }),
-      G && /* @__PURE__ */ i(ve, { ref: L, children: [
+  return /* @__PURE__ */ i(ae, { children: [
+    /* @__PURE__ */ i(he, { children: [
+      /* @__PURE__ */ o(se, { color: d.content.primary, children: s }),
+      ee && /* @__PURE__ */ i(Ce, { ref: M, children: [
         /* @__PURE__ */ o(
-          de,
+          pe,
           {
-            "data-test": `${t}-add`,
-            onClick: ee,
-            "aria-label": `Add ${u}`,
-            children: /* @__PURE__ */ o(F, { width: 20, height: 20, color: d.content.brand })
+            "data-test": `${l}-add`,
+            onClick: te,
+            "aria-label": `Add ${s}`,
+            children: /* @__PURE__ */ o(U, { width: 16, height: 16, color: d.content.primary })
           }
         ),
-        l && a && w === null && /* @__PURE__ */ o(X, { "data-test": `${t}-picker`, children: N })
+        c && h && y === null && /* @__PURE__ */ o(
+          G,
+          {
+            $up: L,
+            "data-test": `${l}-picker`,
+            children: K
+          }
+        )
       ] })
     ] }),
-    _ && /* @__PURE__ */ o(U, { color: d.content.secondary, children: _ }),
-    O ? /* @__PURE__ */ i(ge, { ref: l ? z : void 0, children: [
-      /* @__PURE__ */ i(se, { "data-test": `${t}-sources`, children: [
-        p?.map((e) => /* @__PURE__ */ i(
-          V,
+    D && /* @__PURE__ */ o(v, { color: d.content.secondary, children: D }),
+    ne ? /* @__PURE__ */ i(ke, { ref: c ? N : void 0, children: [
+      /* @__PURE__ */ i(fe, { "data-test": `${l}-sources`, children: [
+        S?.map((e) => /* @__PURE__ */ i(
+          P,
           {
             type: "button",
-            "data-test": `${t}-source-${e.source}`,
+            "data-test": `${l}-source-${e.source}`,
             onClick: () => {
-              if (l) {
-                x(e.source), c(!0);
+              if (c) {
+                W(e.source), r(!0);
                 return;
               }
-              y(e.source);
+              C(e.source);
             },
             children: [
-              A(pe[e.source], -4),
-              /* @__PURE__ */ o(C, { color: d.content.primary, children: e.label })
+              A(ye[e.source], -4),
+              /* @__PURE__ */ o(v, { color: d.content.primary, children: e.label })
             ]
           },
           e.source
         )),
-        m?.map((e) => /* @__PURE__ */ i(
-          V,
+        g?.map((e) => /* @__PURE__ */ i(
+          P,
           {
             type: "button",
-            "data-test": `${t}-action-${e.source}`,
-            onClick: e.onSelect,
+            "data-test": `${l}-action-${e.source}`,
+            onClick: () => {
+              r(!1), e.onSelect();
+            },
             children: [
               A(e.icon, -4),
-              /* @__PURE__ */ o(C, { color: d.content.primary, children: e.label })
+              /* @__PURE__ */ o(v, { color: d.content.primary, children: e.label })
             ]
           },
           e.source
         ))
       ] }),
-      l && a && w !== null && /* @__PURE__ */ o(X, { $align: "left", "data-test": `${t}-picker`, children: N }),
-      !l && b && /* @__PURE__ */ o(
-        J,
+      c && h && y !== null && /* @__PURE__ */ o(
+        G,
+        {
+          $align: "left",
+          $up: L,
+          "data-test": `${l}-picker`,
+          children: K
+        }
+      ),
+      !c && k && /* @__PURE__ */ o(
+        X,
         {
-          "data-test": `${t}-dropdown`,
+          "data-test": `${l}-dropdown`,
           size: "small",
           width: "100%",
           isSearchable: !0,
-          placeHolder: `Search ${b.label} tools`,
-          options: b.options,
+          placeHolder: `Search ${k.label} tools`,
+          options: k.options,
           onSelect: (e) => {
-            const r = P(e);
-            y(null), c(!1), r && g(r);
+            const n = Y(e);
+            C(null), r(!1), n && $(n);
           }
         }
       )
-    ] }) : /* @__PURE__ */ i(j, { children: [
-      !l && a && M.length > 0 && /* @__PURE__ */ o(
-        J,
+    ] }) : /* @__PURE__ */ i(q, { children: [
+      !c && h && F.length > 0 && /* @__PURE__ */ o(
+        X,
         {
-          "data-test": `${t}-dropdown`,
+          "data-test": `${l}-dropdown`,
           size: "small",
           width: "100%",
           isSearchable: !0,
-          placeHolder: `Select ${u.toLowerCase()}`,
-          options: M,
+          placeHolder: `Select ${s.toLowerCase()}`,
+          options: F,
           onSelect: (e) => {
-            const r = P(e);
-            c(!1), r && (r === Q ? n?.onSelect() : g(r));
+            const n = Y(e);
+            r(!1), n && (n === Z ? t?.onSelect() : $(n));
           }
         }
       ),
-      s.length === 0 && !a ? /* @__PURE__ */ i(j, { children: [
-        /* @__PURE__ */ o(U, { color: d.content.placeholder, children: Y }),
-        T && n && /* @__PURE__ */ o(
-          Se,
+      a.length === 0 && !h ? /* @__PURE__ */ i(q, { children: [
+        /* @__PURE__ */ o(v, { color: d.content.placeholder, children: T }),
+        oe && t && /* @__PURE__ */ o(
+          $e,
           {
-            "data-test": `${t}-create`,
+            "data-test": `${l}-create`,
             buttonType: "secondary",
             size: "small",
             matchParentWidth: !0,
-            LeadingIcon: F,
-            buttonText: n.label,
-            onClick: n.onSelect
+            LeadingIcon: U,
+            buttonText: t.label,
+            onClick: t.onSelect
           }
         )
-      ] }) : oe()
+      ] }) : re()
     ] }),
-    h && I && /* @__PURE__ */ o(
-      we,
+    p && z && /* @__PURE__ */ o(
+      be,
       {
-        "data-test": `${t}-delete-confirm`,
-        header: `Delete this ${h.noun}?`,
-        subHeader: `Deleting this ${h.noun} will also remove it from your instructions, wherever it's referenced.`,
+        "data-test": `${l}-delete-confirm`,
+        header: `Delete this ${p.noun}?`,
+        subHeader: `Deleting this ${p.noun} will also remove it from your instructions, wherever it's referenced.`,
         confirmationText: "Delete",
-        zIndex: h.zIndex,
+        zIndex: p.zIndex,
         onDeleteConfirmed: () => {
-          R(I), $(null);
+          I(z), b(null);
         },
-        onCancelClicked: () => $(null)
+        onCancelClicked: () => b(null)
       }
     )
   ] });
-}, ve = E.div`
+}, Ce = _.div`
 	position: relative;
 	display: flex;
-`, ge = E.div`
+`, ke = _.div`
 	position: relative;
 	display: flex;
 	flex-direction: column;
 	gap: 8px;
-`, X = E.div`
+`, G = _.div`
 	position: absolute;
-	top: calc(100% + 4px);
-	${(u) => u.$align === "left" ? "left: 0;" : "right: 0;"}
+	${(s) => s.$up ? "bottom: calc(100% + 4px);" : "top: calc(100% + 4px);"}
+	${(s) => s.$align === "left" ? "left: 0;" : "right: 0;"}
 	z-index: 30;
 `;
 export {
-  He as SelectableListSection
+  Ke as SelectableListSection
 };
 //# sourceMappingURL=SelectableListSection.js.map

package/dist/esm/components/agent-builder/components/SelectableListSection.js.map

@@ -1 +1 @@
-{"version":3,"file":"SelectableListSection.js","sources":["../../../../../src/components/agent-builder/components/SelectableListSection.tsx"],"sourcesContent":["import DeleteIcon from '@src/assets/icons/delete.svg';\nimport EditIcon from '@src/assets/icons/edit.svg';\nimport PlusIcon from '@src/assets/icons/plus.svg';\nimport { MentionItem } from '@src/editor';\nimport React, { useEffect, useRef, useState } from 'react';\nimport styled from 'styled-components';\nimport { Button } from '@src/components/button';\nimport { Dropdown, unwrapDropdownValue } from '@src/components/dropdown';\nimport { SingleOption } from '@src/components/dropdown/type';\nimport { DeleteConfirmationModal } from '@src/components/states-modal';\nimport {\n\tBodyCaption,\n\tBodySecondary,\n\tTitleSmall,\n} from '@src/components/TypographyStyle';\nimport { COLORS } from '@src/constants/Theme';\nimport {\n\tAddIconButton,\n\tRowActionDivider,\n\tRowActions,\n\tRowMenuButton,\n\tRowText,\n\tSelectableRow,\n\tSideSection,\n\tSideSectionHeader,\n\tSourceButton,\n\tSourceButtonRow,\n} from '../AgentBuilder.styled';\nimport { ToolAction } from '../constants/tools';\nimport {\n\trenderSourceIcon,\n\tSOURCE_ICONS,\n\tSourceIcon,\n} from '../utils/sourceIcons';\nimport { MentionPicker } from './MentionPicker';\n\nexport interface SelectableItem {\n\tid: string;\n\tlabel: string;\n\t/** Leading brand glyph (e.g. a tool's source icon). */\n\ticon?: SourceIcon;\n\t/**\n\t * When set, this row shows an edit (Configure) icon that calls this instead of\n\t * the section-level `onConfigure`. Use for rows that open their own drawer\n\t * (e.g. a configured Rest API / email-handover tool).\n\t */\n\tonConfigure?: () => void;\n}\n\n/** A tool source for the empty-state picker (Tools): a button → its searchable list. */\nexport interface SourceGroup {\n\tsource: string;\n\tlabel: string;\n\toptions: SingleOption[];\n}\n\n/** Sentinel value for the \"create new\" entry in the add dropdown. */\nconst CREATE_OPTION_VALUE = '__bik_create_new__';\n\ninterface SelectableListSectionProps {\n\ttitle: string;\n\thelper?: string;\n\titems: SelectableItem[];\n\t/**\n\t * Options shown in the add dropdown. Pass ALL items (not just unselected\n\t * ones) when re-picking an already-added item is allowed (e.g. to insert its\n\t * mention again) — the chip list still shows each item only once.\n\t */\n\taddableOptions: SingleOption[];\n\tonAdd: (id: string) => void;\n\tonRemove: (id: string) => void;\n\tdataTestPrefix: string;\n\temptyText: string;\n\t/**\n\t * Adds a \"create new\" entry at the top of the add dropdown (e.g. \"Create\n\t * sub-agent\"). Selecting it calls `onSelect` instead of `onAdd`.\n\t */\n\tcreateOption?: { label: string; onSelect: () => void };\n\t/**\n\t * When provided, each row shows an edit (Configure) icon next to Delete.\n\t * Omit for tools (Delete only).\n\t */\n\tonConfigure?: (id: string) => void;\n\t/**\n\t * Tool sources (e.g. Manifest / Shopify). When set, the empty state shows a\n\t * button per source; clicking one reveals a searchable dropdown of just that\n\t * source's options. Selecting calls `onAdd`. Takes precedence over the plain\n\t * `addableOptions` dropdown.\n\t */\n\tsourceGroups?: SourceGroup[];\n\t/**\n\t * When provided, the header \"+\" opens the same `@` reference picker used in the\n\t * Instructions editor (a {@link MentionPicker} popover) instead of the inline\n\t * select dropdown. Pass the items for THIS section only (tools OR sub-agents) —\n\t * the picker auto-drills into the single category. Selecting a row calls\n\t * `onAdd(id)`; the picker's \"Create new\" row (sub-agents) calls\n\t * `createOption.onSelect`.\n\t */\n\tmentionItems?: MentionItem[];\n\t/**\n\t * Built-in \"action\" tools (e.g. Rest API / Handover to email) that open a\n\t * config drawer via `onSelect` instead of adding a mention. Shown as\n\t * empty-state source buttons (only while no items exist, alongside\n\t * `sourceGroups`) AND as rows inside the `@` picker's Tools view.\n\t */\n\tactionSources?: ToolAction[];\n\t/**\n\t * When set, the row Delete icon opens a confirmation modal (instead of\n\t * removing immediately); `onRemove` runs only on confirm. `noun` fills the one\n\t * shared message template (\"Delete this <noun>?\" …); `zIndex` raises the modal\n\t * above a parent drawer. Omit to delete directly.\n\t */\n\tconfirmDelete?: { noun: string; zIndex?: number };\n}\n\nexport const SelectableListSection: React.FC<SelectableListSectionProps> = ({\n\ttitle,\n\thelper,\n\titems,\n\taddableOptions,\n\tonAdd,\n\tonRemove,\n\tdataTestPrefix,\n\temptyText,\n\tcreateOption,\n\tonConfigure,\n\tsourceGroups,\n\tmentionItems,\n\tactionSources,\n\tconfirmDelete,\n}) => {\n\tconst [adding, setAdding] = useState(false);\n\t// Row id awaiting delete confirmation (null = modal closed).\n\tconst [pendingDeleteId, setPendingDeleteId] = useState<string | null>(null);\n\t// Tools: which source's searchable list is open (null = just show the buttons).\n\tconst [activeSource, setActiveSource] = useState<string | null>(null);\n\tconst hasSourceGroups = !!sourceGroups && sourceGroups.length > 0;\n\tconst activeGroup = sourceGroups?.find((g) => g.source === activeSource);\n\t// When set, \"+\" opens the `@` MentionPicker popover instead of a select input.\n\tconst usePicker = mentionItems !== undefined;\n\t// Separate anchors for the header \"+\" popover and the empty-state source-button\n\t// popover — when empty both render at once, so a shared ref would misfire the\n\t// outside-click check (closing the header picker when a source row is clicked).\n\tconst headerPickerRef = useRef<HTMLDivElement>(null);\n\tconst sourcePickerRef = useRef<HTMLDivElement>(null);\n\t// Source (Shopify / Manifest) the empty-state button opened the picker into;\n\t// null when \"+\" opened it at the root source list.\n\tconst [pickerSource, setPickerSource] = useState<string | null>(null);\n\n\t// Dismiss the picker popover on outside click / Escape.\n\tuseEffect(() => {\n\t\tif (!usePicker || !adding) {\n\t\t\treturn;\n\t\t}\n\t\tconst onDocMouseDown = (e: MouseEvent) => {\n\t\t\tconst target = e.target as Node;\n\t\t\tif (\n\t\t\t\t!headerPickerRef.current?.contains(target) &&\n\t\t\t\t!sourcePickerRef.current?.contains(target)\n\t\t\t) {\n\t\t\t\tsetAdding(false);\n\t\t\t}\n\t\t};\n\t\tconst onKeyDown = (e: KeyboardEvent) => {\n\t\t\tif (e.key === 'Escape') {\n\t\t\t\tsetAdding(false);\n\t\t\t}\n\t\t};\n\t\tdocument.addEventListener('mousedown', onDocMouseDown);\n\t\tdocument.addEventListener('keydown', onKeyDown);\n\t\treturn () => {\n\t\t\tdocument.removeEventListener('mousedown', onDocMouseDown);\n\t\t\tdocument.removeEventListener('keydown', onKeyDown);\n\t\t};\n\t}, [usePicker, adding]);\n\n\t// Header \"+\" picks an EXISTING item (and, once some exist, re-creates via the\n\t// dropdown's footer row). With an empty list + a createOption the body shows a\n\t// dedicated \"Create new\" button instead, so the header \"+\" would be redundant.\n\t// In picker mode the \"+\" always shows (even empty) — for tools it sits next to\n\t// the empty-state source buttons; the create flow lives inside the picker.\n\tconst showAddButton = hasSourceGroups\n\t\t? usePicker || items.length > 0\n\t\t: usePicker ||\n\t\t  addableOptions.length > 0 ||\n\t\t  (!!createOption && items.length > 0);\n\t// Empty state offers a one-click \"Create new\" (sub-agents) rather than burying\n\t// it behind a single-item dropdown. In picker mode the \"+\" opens the picker\n\t// (with its own \"Create new\" row) instead, so skip the standalone button.\n\tconst showEmptyCreate =\n\t\titems.length === 0 && !!createOption && !hasSourceGroups && !usePicker;\n\tconst hasActionSources = !!actionSources && actionSources.length > 0;\n\t// Source buttons ONLY while no item is added — the tool sources (Manifest /\n\t// Shopify …) plus the built-in action tools (Rest API / Handover to email).\n\t// Once an item exists, adding more uses the header \"+\" → picker (the buttons\n\t// never come back); the action tools still live inside that picker.\n\tconst showSourceButtons =\n\t\t(hasSourceGroups || hasActionSources) && items.length === 0;\n\t// Nothing existing to pick → skip the 1-item dropdown and create directly.\n\tconst handleAddClick = () => {\n\t\tif (usePicker) {\n\t\t\t// Toggle the `@` reference-picker popover (rendered under the \"+\"), opened\n\t\t\t// at the root source list (no pre-drilled source).\n\t\t\tsetPickerSource(null);\n\t\t\tsetAdding((v) => !v);\n\t\t\treturn;\n\t\t}\n\t\tif (hasSourceGroups) {\n\t\t\tsetActiveSource(null);\n\t\t\tsetAdding((v) => !v);\n\t\t\treturn;\n\t\t}\n\t\tif (addableOptions.length === 0 && createOption) {\n\t\t\tcreateOption.onSelect();\n\t\t\treturn;\n\t\t}\n\t\tsetAdding((v) => !v);\n\t};\n\n\tconst renderChipRows = () =>\n\t\titems.map((item) => {\n\t\t\t// Per-item configure wins; otherwise fall back to the section-level one.\n\t\t\tconst configure =\n\t\t\t\titem.onConfigure ??\n\t\t\t\t(onConfigure ? () => onConfigure(item.id) : undefined);\n\t\t\treturn (\n\t\t\t\t<SelectableRow\n\t\t\t\t\tkey={item.id}\n\t\t\t\t\tdata-test={`${dataTestPrefix}-row-${item.id}`}\n\t\t\t\t>\n\t\t\t\t\t{renderSourceIcon(item.icon)}\n\t\t\t\t\t<RowText>\n\t\t\t\t\t\t<BodySecondary numberOfLines={1} color={COLORS.content.primary}>\n\t\t\t\t\t\t\t{item.label}\n\t\t\t\t\t\t</BodySecondary>\n\t\t\t\t\t</RowText>\n\t\t\t\t\t<RowActions>\n\t\t\t\t\t\t{configure && (\n\t\t\t\t\t\t\t// Configurable rows (sub-agents, Rest API / email tools) get an\n\t\t\t\t\t\t\t// always-visible edit icon.\n\t\t\t\t\t\t\t<RowMenuButton\n\t\t\t\t\t\t\t\tdata-test={`${dataTestPrefix}-edit-${item.id}`}\n\t\t\t\t\t\t\t\taria-label={`Edit ${item.label}`}\n\t\t\t\t\t\t\t\tonClick={configure}\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t<EditIcon\n\t\t\t\t\t\t\t\t\twidth={16}\n\t\t\t\t\t\t\t\t\theight={16}\n\t\t\t\t\t\t\t\t\tcolor={COLORS.content.secondary}\n\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t</RowMenuButton>\n\t\t\t\t\t\t)}\n\t\t\t\t\t\t{configure && <RowActionDivider aria-hidden />}\n\t\t\t\t\t\t<RowMenuButton\n\t\t\t\t\t\t\tdata-test={`${dataTestPrefix}-delete-${item.id}`}\n\t\t\t\t\t\t\taria-label={`Delete ${item.label}`}\n\t\t\t\t\t\t\tonClick={() =>\n\t\t\t\t\t\t\t\tconfirmDelete ? setPendingDeleteId(item.id) : onRemove(item.id)\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t<DeleteIcon\n\t\t\t\t\t\t\t\twidth={16}\n\t\t\t\t\t\t\t\theight={16}\n\t\t\t\t\t\t\t\tcolor={COLORS.content.secondary}\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t</RowMenuButton>\n\t\t\t\t\t</RowActions>\n\t\t\t\t</SelectableRow>\n\t\t\t);\n\t\t});\n\t// \"Create new\" is a brand-coloured footer row at the BOTTOM of the dropdown,\n\t// separated from the selectable items by a divider.\n\tconst dropdownOptions: SingleOption[] = createOption\n\t\t? [\n\t\t\t\t...addableOptions,\n\t\t\t\t{\n\t\t\t\t\tlabel: createOption.label,\n\t\t\t\t\tvalue: CREATE_OPTION_VALUE,\n\t\t\t\t\tsearchKey: createOption.label,\n\t\t\t\t\tcustomComponent: (\n\t\t\t\t\t\t<div\n\t\t\t\t\t\t\tstyle={{\n\t\t\t\t\t\t\t\twidth: '100%',\n\t\t\t\t\t\t\t\ttextAlign: 'center',\n\t\t\t\t\t\t\t\tcolor: COLORS.content.brand,\n\t\t\t\t\t\t\t\tfontFamily: 'Inter',\n\t\t\t\t\t\t\t\tfontSize: 14,\n\t\t\t\t\t\t\t\tfontWeight: 600,\n\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t{createOption.label}\n\t\t\t\t\t\t</div>\n\t\t\t\t\t),\n\t\t\t\t},\n\t\t  ]\n\t\t: addableOptions;\n\n\t// One picker instance reused by the header \"+\" and the empty-state source\n\t// buttons. `key` remounts it so a source button re-drills into its own tools\n\t// (the initial drill-in level is read once, on mount).\n\tconst pickerNode = usePicker ? (\n\t\t<MentionPicker\n\t\t\tkey={pickerSource ?? '__root__'}\n\t\t\titems={mentionItems ?? []}\n\t\t\tquery=\"\"\n\t\t\tactiveIndex={0}\n\t\t\tinitialSource={pickerSource ?? undefined}\n\t\t\tonSelect={(item) => {\n\t\t\t\tsetAdding(false);\n\t\t\t\tonAdd(String(item.id));\n\t\t\t}}\n\t\t\tonClose={() => setAdding(false)}\n\t\t\tonCreateSubAgent={\n\t\t\t\tcreateOption\n\t\t\t\t\t? () => {\n\t\t\t\t\t\t\tsetAdding(false);\n\t\t\t\t\t\t\tcreateOption.onSelect();\n\t\t\t\t\t  }\n\t\t\t\t\t: undefined\n\t\t\t}\n\t\t\ttoolActions={\n\t\t\t\thasActionSources\n\t\t\t\t\t? actionSources?.map((a) => ({\n\t\t\t\t\t\t\t...a,\n\t\t\t\t\t\t\tonSelect: () => {\n\t\t\t\t\t\t\t\tsetAdding(false);\n\t\t\t\t\t\t\t\ta.onSelect();\n\t\t\t\t\t\t\t},\n\t\t\t\t\t  }))\n\t\t\t\t\t: undefined\n\t\t\t}\n\t\t/>\n\t) : null;\n\n\treturn (\n\t\t<SideSection>\n\t\t\t<SideSectionHeader>\n\t\t\t\t<TitleSmall color={COLORS.content.primary}>{title}</TitleSmall>\n\t\t\t\t{showAddButton && (\n\t\t\t\t\t<AddButtonWrap ref={headerPickerRef}>\n\t\t\t\t\t\t<AddIconButton\n\t\t\t\t\t\t\tdata-test={`${dataTestPrefix}-add`}\n\t\t\t\t\t\t\tonClick={handleAddClick}\n\t\t\t\t\t\t\taria-label={`Add ${title}`}\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t<PlusIcon width={20} height={20} color={COLORS.content.brand} />\n\t\t\t\t\t\t</AddIconButton>\n\t\t\t\t\t\t{usePicker && adding && pickerSource === null && (\n\t\t\t\t\t\t\t<PickerPopover data-test={`${dataTestPrefix}-picker`}>\n\t\t\t\t\t\t\t\t{pickerNode}\n\t\t\t\t\t\t\t</PickerPopover>\n\t\t\t\t\t\t)}\n\t\t\t\t\t</AddButtonWrap>\n\t\t\t\t)}\n\t\t\t</SideSectionHeader>\n\n\t\t\t{helper && (\n\t\t\t\t<BodyCaption color={COLORS.content.secondary}>{helper}</BodyCaption>\n\t\t\t)}\n\n\t\t\t{showSourceButtons ? (\n\t\t\t\t<SourcePickerAnchor ref={usePicker ? sourcePickerRef : undefined}>\n\t\t\t\t\t{/* No tools yet: one button per source (never shown once a tool exists). */}\n\t\t\t\t\t<SourceButtonRow data-test={`${dataTestPrefix}-sources`}>\n\t\t\t\t\t\t{sourceGroups?.map((g) => (\n\t\t\t\t\t\t\t<SourceButton\n\t\t\t\t\t\t\t\tkey={g.source}\n\t\t\t\t\t\t\t\ttype=\"button\"\n\t\t\t\t\t\t\t\tdata-test={`${dataTestPrefix}-source-${g.source}`}\n\t\t\t\t\t\t\t\tonClick={() => {\n\t\t\t\t\t\t\t\t\tif (usePicker) {\n\t\t\t\t\t\t\t\t\t\t// Open the `@` picker drilled straight into this source's tools.\n\t\t\t\t\t\t\t\t\t\tsetPickerSource(g.source);\n\t\t\t\t\t\t\t\t\t\tsetAdding(true);\n\t\t\t\t\t\t\t\t\t\treturn;\n\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\tsetActiveSource(g.source);\n\t\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t{renderSourceIcon(SOURCE_ICONS[g.source], -4)}\n\t\t\t\t\t\t\t\t<BodySecondary color={COLORS.content.primary}>\n\t\t\t\t\t\t\t\t\t{g.label}\n\t\t\t\t\t\t\t\t</BodySecondary>\n\t\t\t\t\t\t\t</SourceButton>\n\t\t\t\t\t\t))}\n\t\t\t\t\t\t{/* Built-in action tools (Rest API / Handover to email) open a drawer. */}\n\t\t\t\t\t\t{actionSources?.map((a) => (\n\t\t\t\t\t\t\t<SourceButton\n\t\t\t\t\t\t\t\tkey={a.source}\n\t\t\t\t\t\t\t\ttype=\"button\"\n\t\t\t\t\t\t\t\tdata-test={`${dataTestPrefix}-action-${a.source}`}\n\t\t\t\t\t\t\t\tonClick={a.onSelect}\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t{renderSourceIcon(a.icon, -4)}\n\t\t\t\t\t\t\t\t<BodySecondary color={COLORS.content.primary}>\n\t\t\t\t\t\t\t\t\t{a.label}\n\t\t\t\t\t\t\t\t</BodySecondary>\n\t\t\t\t\t\t\t</SourceButton>\n\t\t\t\t\t\t))}\n\t\t\t\t\t</SourceButtonRow>\n\n\t\t\t\t\t{/* Picker mode: clicking a source opens its tools in the `@` picker. */}\n\t\t\t\t\t{usePicker && adding && pickerSource !== null && (\n\t\t\t\t\t\t<PickerPopover $align=\"left\" data-test={`${dataTestPrefix}-picker`}>\n\t\t\t\t\t\t\t{pickerNode}\n\t\t\t\t\t\t</PickerPopover>\n\t\t\t\t\t)}\n\n\t\t\t\t\t{/* Legacy (non-picker) mode: chosen source → its searchable tool list. */}\n\t\t\t\t\t{!usePicker && activeGroup && (\n\t\t\t\t\t\t<Dropdown\n\t\t\t\t\t\t\tdata-test={`${dataTestPrefix}-dropdown`}\n\t\t\t\t\t\t\tsize=\"small\"\n\t\t\t\t\t\t\twidth=\"100%\"\n\t\t\t\t\t\t\tisSearchable\n\t\t\t\t\t\t\tplaceHolder={`Search ${activeGroup.label} tools`}\n\t\t\t\t\t\t\toptions={activeGroup.options}\n\t\t\t\t\t\t\tonSelect={(opt) => {\n\t\t\t\t\t\t\t\tconst v = unwrapDropdownValue(opt);\n\t\t\t\t\t\t\t\tsetActiveSource(null);\n\t\t\t\t\t\t\t\tsetAdding(false);\n\t\t\t\t\t\t\t\tif (v) {\n\t\t\t\t\t\t\t\t\tonAdd(v);\n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t/>\n\t\t\t\t\t)}\n\t\t\t\t</SourcePickerAnchor>\n\t\t\t) : (\n\t\t\t\t<>\n\t\t\t\t\t{!usePicker && adding && dropdownOptions.length > 0 && (\n\t\t\t\t\t\t<Dropdown\n\t\t\t\t\t\t\tdata-test={`${dataTestPrefix}-dropdown`}\n\t\t\t\t\t\t\tsize=\"small\"\n\t\t\t\t\t\t\twidth=\"100%\"\n\t\t\t\t\t\t\tisSearchable\n\t\t\t\t\t\t\tplaceHolder={`Select ${title.toLowerCase()}`}\n\t\t\t\t\t\t\toptions={dropdownOptions}\n\t\t\t\t\t\t\tonSelect={(opt) => {\n\t\t\t\t\t\t\t\tconst v = unwrapDropdownValue(opt);\n\t\t\t\t\t\t\t\tsetAdding(false);\n\t\t\t\t\t\t\t\tif (!v) {\n\t\t\t\t\t\t\t\t\treturn;\n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\tif (v === CREATE_OPTION_VALUE) {\n\t\t\t\t\t\t\t\t\tcreateOption?.onSelect();\n\t\t\t\t\t\t\t\t} else {\n\t\t\t\t\t\t\t\t\tonAdd(v);\n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t/>\n\t\t\t\t\t)}\n\n\t\t\t\t\t{items.length === 0 && !adding ? (\n\t\t\t\t\t\t<>\n\t\t\t\t\t\t\t<BodyCaption color={COLORS.content.placeholder}>\n\t\t\t\t\t\t\t\t{emptyText}\n\t\t\t\t\t\t\t</BodyCaption>\n\t\t\t\t\t\t\t{showEmptyCreate && createOption && (\n\t\t\t\t\t\t\t\t<Button\n\t\t\t\t\t\t\t\t\tdata-test={`${dataTestPrefix}-create`}\n\t\t\t\t\t\t\t\t\tbuttonType=\"secondary\"\n\t\t\t\t\t\t\t\t\tsize=\"small\"\n\t\t\t\t\t\t\t\t\tmatchParentWidth\n\t\t\t\t\t\t\t\t\tLeadingIcon={PlusIcon}\n\t\t\t\t\t\t\t\t\tbuttonText={createOption.label}\n\t\t\t\t\t\t\t\t\tonClick={createOption.onSelect}\n\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t</>\n\t\t\t\t\t) : (\n\t\t\t\t\t\trenderChipRows()\n\t\t\t\t\t)}\n\t\t\t\t</>\n\t\t\t)}\n\t\t\t{confirmDelete && pendingDeleteId && (\n\t\t\t\t<DeleteConfirmationModal\n\t\t\t\t\tdata-test={`${dataTestPrefix}-delete-confirm`}\n\t\t\t\t\theader={`Delete this ${confirmDelete.noun}?`}\n\t\t\t\t\tsubHeader={`Deleting this ${confirmDelete.noun} will also remove it from your instructions, wherever it's referenced.`}\n\t\t\t\t\tconfirmationText=\"Delete\"\n\t\t\t\t\tzIndex={confirmDelete.zIndex}\n\t\t\t\t\tonDeleteConfirmed={() => {\n\t\t\t\t\t\tonRemove(pendingDeleteId);\n\t\t\t\t\t\tsetPendingDeleteId(null);\n\t\t\t\t\t}}\n\t\t\t\t\tonCancelClicked={() => setPendingDeleteId(null)}\n\t\t\t\t/>\n\t\t\t)}\n\t\t</SideSection>\n\t);\n};\n\n// Anchors the `@`-picker popover to the header \"+\" button.\nconst AddButtonWrap = styled.div`\n\tposition: relative;\n\tdisplay: flex;\n`;\n\n// Anchors the `@`-picker popover to the empty-state source buttons.\nconst SourcePickerAnchor = styled.div`\n\tposition: relative;\n\tdisplay: flex;\n\tflex-direction: column;\n\tgap: 8px;\n`;\n\n// Floating card under the trigger. Aligns to the \"+\" (right) or the source\n// buttons (left) so it stays inside the side panel.\nconst PickerPopover = styled.div<{ $align?: 'left' | 'right' }>`\n\tposition: absolute;\n\ttop: calc(100% + 4px);\n\t${(p) => (p.$align === 'left' ? 'left: 0;' : 'right: 0;')}\n\tz-index: 30;\n`;\n"],"names":["CREATE_OPTION_VALUE","SelectableListSection","title","helper","items","addableOptions","onAdd","onRemove","dataTestPrefix","emptyText","createOption","onConfigure","sourceGroups","mentionItems","actionSources","confirmDelete","adding","setAdding","useState","pendingDeleteId","setPendingDeleteId","activeSource","setActiveSource","hasSourceGroups","activeGroup","g","usePicker","headerPickerRef","useRef","sourcePickerRef","pickerSource","setPickerSource","useEffect","onDocMouseDown","e","target","onKeyDown","showAddButton","showEmptyCreate","hasActionSources","showSourceButtons","handleAddClick","v","renderChipRows","item","configure","jsxs","SelectableRow","renderSourceIcon","jsx","RowText","BodySecondary","COLORS","RowActions","RowMenuButton","EditIcon","RowActionDivider","DeleteIcon","dropdownOptions","pickerNode","MentionPicker","a","SideSection","SideSectionHeader","TitleSmall","AddButtonWrap","AddIconButton","PlusIcon","PickerPopover","BodyCaption","SourcePickerAnchor","SourceButtonRow","SourceButton","SOURCE_ICONS","Dropdown","opt","unwrapDropdownValue","Fragment","Button","DeleteConfirmationModal","styled","p"],"mappings":"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"}
+{"version":3,"file":"SelectableListSection.js","sources":["../../../../../src/components/agent-builder/components/SelectableListSection.tsx"],"sourcesContent":["import DeleteIcon from '@src/assets/icons/delete.svg';\nimport EditIcon from '@src/assets/icons/edit.svg';\nimport PlusIcon from '@src/assets/icons/plus.svg';\nimport { MentionItem } from '@src/editor';\nimport React, { useEffect, useRef, useState } from 'react';\nimport styled from 'styled-components';\nimport { Button } from '@src/components/button';\nimport { Dropdown, unwrapDropdownValue } from '@src/components/dropdown';\nimport { SingleOption } from '@src/components/dropdown/type';\nimport { DeleteConfirmationModal } from '@src/components/states-modal';\nimport { Tooltip } from '@src/components/tooltips';\nimport {\n\tBodyCaption,\n\tBodySecondary,\n\tTitleSmall,\n} from '@src/components/TypographyStyle';\nimport { COLORS } from '@src/constants/Theme';\nimport {\n\tAddIconButton,\n\tRowActionDivider,\n\tRowActions,\n\tRowMenuButton,\n\tRowText,\n\tSelectableRow,\n\tSideSection,\n\tSideSectionHeader,\n\tSourceButton,\n\tSourceButtonRow,\n} from '../AgentBuilder.styled';\nimport { ToolAction } from '../constants/tools';\nimport {\n\trenderSourceIcon,\n\tSOURCE_ICONS,\n\tSourceIcon,\n} from '../utils/sourceIcons';\nimport { MentionPicker } from './MentionPicker';\n\nexport interface SelectableItem {\n\tid: string;\n\tlabel: string;\n\t/** Leading brand glyph (e.g. a tool's source icon). */\n\ticon?: SourceIcon;\n\t/**\n\t * When set, this row shows an edit (Configure) icon that calls this instead of\n\t * the section-level `onConfigure`. Use for rows that open their own drawer\n\t * (e.g. a configured Rest API / email-handover tool). A pending promise\n\t * disables the row's edit button until it settles (e.g. while the consumer\n\t * fetches the sub-agent's data before opening its drawer).\n\t */\n\tonConfigure?: () => void | Promise<void>;\n}\n\n/** A tool source for the empty-state picker (Tools): a button → its searchable list. */\nexport interface SourceGroup {\n\tsource: string;\n\tlabel: string;\n\toptions: SingleOption[];\n}\n\n/** Sentinel value for the \"create new\" entry in the add dropdown. */\nconst CREATE_OPTION_VALUE = '__bik_create_new__';\n\ninterface SelectableListSectionProps {\n\ttitle: string;\n\thelper?: string;\n\titems: SelectableItem[];\n\t/**\n\t * Options shown in the add dropdown. Pass ALL items (not just unselected\n\t * ones) when re-picking an already-added item is allowed (e.g. to insert its\n\t * mention again) — the chip list still shows each item only once.\n\t */\n\taddableOptions: SingleOption[];\n\tonAdd: (id: string) => void;\n\tonRemove: (id: string) => void;\n\tdataTestPrefix: string;\n\temptyText: string;\n\t/**\n\t * Adds a \"create new\" entry at the top of the add dropdown (e.g. \"Create\n\t * sub-agent\"). Selecting it calls `onSelect` instead of `onAdd`.\n\t */\n\tcreateOption?: { label: string; onSelect: () => void };\n\t/**\n\t * When provided, each row shows an edit (Configure) icon next to Delete.\n\t * Omit for tools (Delete only). A pending promise disables the edit buttons\n\t * until it settles.\n\t */\n\tonConfigure?: (id: string) => void | Promise<void>;\n\t/**\n\t * Tool sources (e.g. Manifest / Shopify). When set, the empty state shows a\n\t * button per source; clicking one reveals a searchable dropdown of just that\n\t * source's options. Selecting calls `onAdd`. Takes precedence over the plain\n\t * `addableOptions` dropdown.\n\t */\n\tsourceGroups?: SourceGroup[];\n\t/**\n\t * When provided, the header \"+\" opens the same `@` reference picker used in the\n\t * Instructions editor (a {@link MentionPicker} popover) instead of the inline\n\t * select dropdown. Pass the items for THIS section only (tools OR sub-agents) —\n\t * the picker auto-drills into the single category. Selecting a row calls\n\t * `onAdd(id)`; the picker's \"Create new\" row (sub-agents) calls\n\t * `createOption.onSelect`.\n\t */\n\tmentionItems?: MentionItem[];\n\t/**\n\t * Built-in \"action\" tools (e.g. Rest API / Handover to email) that open a\n\t * config drawer via `onSelect` instead of adding a mention. Shown as\n\t * empty-state source buttons (only while no items exist, alongside\n\t * `sourceGroups`) AND as rows inside the `@` picker's Tools view.\n\t */\n\tactionSources?: ToolAction[];\n\t/**\n\t * When set, the row Delete icon opens a confirmation modal (instead of\n\t * removing immediately); `onRemove` runs only on confirm. `noun` fills the one\n\t * shared message template (\"Delete this <noun>?\" …); `zIndex` raises the modal\n\t * above a parent drawer. Omit to delete directly.\n\t */\n\tconfirmDelete?: { noun: string; zIndex?: number };\n\t/**\n\t * Open the `@` picker popover above the trigger instead of below. Use inside\n\t * a drawer where the section sits near the bottom — opening downward\n\t * stretches the drawer and leaves a gap.\n\t */\n\tpickerOpensUp?: boolean;\n}\n\nexport const SelectableListSection: React.FC<SelectableListSectionProps> = ({\n\ttitle,\n\thelper,\n\titems,\n\taddableOptions,\n\tonAdd,\n\tonRemove,\n\tdataTestPrefix,\n\temptyText,\n\tcreateOption,\n\tonConfigure,\n\tsourceGroups,\n\tmentionItems,\n\tactionSources,\n\tconfirmDelete,\n\tpickerOpensUp,\n}) => {\n\tconst [adding, setAdding] = useState(false);\n\t// Row id awaiting delete confirmation (null = modal closed).\n\tconst [pendingDeleteId, setPendingDeleteId] = useState<string | null>(null);\n\t// Row id whose configure handler is in flight (async fetch before its drawer\n\t// opens) — all edit buttons are disabled meanwhile so the UI isn't\n\t// unresponsive to double clicks.\n\tconst [configuringId, setConfiguringId] = useState<string | null>(null);\n\t// Tools: which source's searchable list is open (null = just show the buttons).\n\tconst [activeSource, setActiveSource] = useState<string | null>(null);\n\tconst hasSourceGroups = !!sourceGroups && sourceGroups.length > 0;\n\tconst activeGroup = sourceGroups?.find((g) => g.source === activeSource);\n\t// When set, \"+\" opens the `@` MentionPicker popover instead of a select input.\n\tconst usePicker = mentionItems !== undefined;\n\t// Separate anchors for the header \"+\" popover and the empty-state source-button\n\t// popover — when empty both render at once, so a shared ref would misfire the\n\t// outside-click check (closing the header picker when a source row is clicked).\n\tconst headerPickerRef = useRef<HTMLDivElement>(null);\n\tconst sourcePickerRef = useRef<HTMLDivElement>(null);\n\t// Source (Shopify / Manifest) the empty-state button opened the picker into;\n\t// null when \"+\" opened it at the root source list.\n\tconst [pickerSource, setPickerSource] = useState<string | null>(null);\n\n\t// Dismiss the picker popover on outside click / Escape.\n\tuseEffect(() => {\n\t\tif (!usePicker || !adding) {\n\t\t\treturn;\n\t\t}\n\t\tconst onDocMouseDown = (e: MouseEvent) => {\n\t\t\tconst target = e.target as Node;\n\t\t\tif (\n\t\t\t\t!headerPickerRef.current?.contains(target) &&\n\t\t\t\t!sourcePickerRef.current?.contains(target)\n\t\t\t) {\n\t\t\t\tsetAdding(false);\n\t\t\t}\n\t\t};\n\t\tconst onKeyDown = (e: KeyboardEvent) => {\n\t\t\tif (e.key === 'Escape') {\n\t\t\t\tsetAdding(false);\n\t\t\t}\n\t\t};\n\t\tdocument.addEventListener('mousedown', onDocMouseDown);\n\t\tdocument.addEventListener('keydown', onKeyDown);\n\t\treturn () => {\n\t\t\tdocument.removeEventListener('mousedown', onDocMouseDown);\n\t\t\tdocument.removeEventListener('keydown', onKeyDown);\n\t\t};\n\t}, [usePicker, adding]);\n\n\t// Header \"+\" picks an EXISTING item (and, once some exist, re-creates via the\n\t// dropdown's footer row). With an empty list + a createOption the body shows a\n\t// dedicated \"Create new\" button instead, so the header \"+\" would be redundant.\n\t// In picker mode the \"+\" always shows (even empty) — for tools it sits next to\n\t// the empty-state source buttons; the create flow lives inside the picker.\n\tconst showAddButton = hasSourceGroups\n\t\t? usePicker || items.length > 0\n\t\t: usePicker ||\n\t\t  addableOptions.length > 0 ||\n\t\t  (!!createOption && items.length > 0);\n\t// Empty state offers a one-click \"Create new\" (sub-agents) rather than burying\n\t// it behind a single-item dropdown. In picker mode the \"+\" opens the picker\n\t// (with its own \"Create new\" row) instead, so skip the standalone button.\n\tconst showEmptyCreate =\n\t\titems.length === 0 && !!createOption && !hasSourceGroups && !usePicker;\n\tconst hasActionSources = !!actionSources && actionSources.length > 0;\n\t// Source buttons ONLY while no item is added — the tool sources (Manifest /\n\t// Shopify …) plus the built-in action tools (Rest API / Handover to email).\n\t// Once an item exists, adding more uses the header \"+\" → picker (the buttons\n\t// never come back); the action tools still live inside that picker.\n\tconst showSourceButtons =\n\t\t(hasSourceGroups || hasActionSources) && items.length === 0;\n\t// Nothing existing to pick → skip the 1-item dropdown and create directly.\n\tconst handleAddClick = () => {\n\t\tif (usePicker) {\n\t\t\t// Toggle the `@` reference-picker popover (rendered under the \"+\"), opened\n\t\t\t// at the root source list (no pre-drilled source).\n\t\t\tsetPickerSource(null);\n\t\t\tsetAdding((v) => !v);\n\t\t\treturn;\n\t\t}\n\t\tif (hasSourceGroups) {\n\t\t\tsetActiveSource(null);\n\t\t\tsetAdding((v) => !v);\n\t\t\treturn;\n\t\t}\n\t\tif (addableOptions.length === 0 && createOption) {\n\t\t\tcreateOption.onSelect();\n\t\t\treturn;\n\t\t}\n\t\tsetAdding((v) => !v);\n\t};\n\n\t// Run a row's configure handler; a returned promise disables the edit\n\t// buttons until it settles (same promise-sniff as the drawer Save buttons).\n\tconst handleConfigureClick = (\n\t\tid: string,\n\t\tconfigure: () => void | Promise<void>,\n\t) => {\n\t\tif (configuringId) {\n\t\t\treturn;\n\t\t}\n\t\tconst result = configure();\n\t\tif (result && typeof (result as Promise<void>).then === 'function') {\n\t\t\tsetConfiguringId(id);\n\t\t\tvoid (result as Promise<void>).finally(() => setConfiguringId(null));\n\t\t}\n\t};\n\n\tconst renderChipRows = () =>\n\t\titems.map((item) => {\n\t\t\t// Per-item configure wins; otherwise fall back to the section-level one.\n\t\t\tconst configure =\n\t\t\t\titem.onConfigure ??\n\t\t\t\t(onConfigure ? () => onConfigure(item.id) : undefined);\n\t\t\treturn (\n\t\t\t\t<SelectableRow\n\t\t\t\t\tkey={item.id}\n\t\t\t\t\tdata-test={`${dataTestPrefix}-row-${item.id}`}\n\t\t\t\t>\n\t\t\t\t\t{renderSourceIcon(item.icon)}\n\t\t\t\t\t{/* Row label truncates to one line; tooltip surfaces the full name. */}\n\t\t\t\t\t<Tooltip body={item.label} placement=\"top\">\n\t\t\t\t\t\t<RowText>\n\t\t\t\t\t\t\t<BodySecondary numberOfLines={1} color={COLORS.content.primary}>\n\t\t\t\t\t\t\t\t{item.label}\n\t\t\t\t\t\t\t</BodySecondary>\n\t\t\t\t\t\t</RowText>\n\t\t\t\t\t</Tooltip>\n\t\t\t\t\t<RowActions>\n\t\t\t\t\t\t{configure && (\n\t\t\t\t\t\t\t// Configurable rows (sub-agents, Rest API / email tools) get an\n\t\t\t\t\t\t\t// always-visible edit icon.\n\t\t\t\t\t\t\t<Tooltip body=\"Edit\" placement=\"top\">\n\t\t\t\t\t\t\t\t<RowMenuButton\n\t\t\t\t\t\t\t\t\tdata-test={`${dataTestPrefix}-edit-${item.id}`}\n\t\t\t\t\t\t\t\t\taria-label={`Edit ${item.label}`}\n\t\t\t\t\t\t\t\t\tdisabled={configuringId !== null}\n\t\t\t\t\t\t\t\t\tonClick={() => handleConfigureClick(item.id, configure)}\n\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t<EditIcon\n\t\t\t\t\t\t\t\t\t\twidth={16}\n\t\t\t\t\t\t\t\t\t\theight={16}\n\t\t\t\t\t\t\t\t\t\tcolor={COLORS.content.secondary}\n\t\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t</RowMenuButton>\n\t\t\t\t\t\t\t</Tooltip>\n\t\t\t\t\t\t)}\n\t\t\t\t\t\t{configure && <RowActionDivider aria-hidden />}\n\t\t\t\t\t\t<Tooltip body=\"Delete\" placement=\"top\">\n\t\t\t\t\t\t\t<RowMenuButton\n\t\t\t\t\t\t\t\tdata-test={`${dataTestPrefix}-delete-${item.id}`}\n\t\t\t\t\t\t\t\taria-label={`Delete ${item.label}`}\n\t\t\t\t\t\t\t\tonClick={() =>\n\t\t\t\t\t\t\t\t\tconfirmDelete\n\t\t\t\t\t\t\t\t\t\t? setPendingDeleteId(item.id)\n\t\t\t\t\t\t\t\t\t\t: onRemove(item.id)\n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t<DeleteIcon\n\t\t\t\t\t\t\t\t\twidth={16}\n\t\t\t\t\t\t\t\t\theight={16}\n\t\t\t\t\t\t\t\t\tcolor={COLORS.content.secondary}\n\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t</RowMenuButton>\n\t\t\t\t\t\t</Tooltip>\n\t\t\t\t\t</RowActions>\n\t\t\t\t</SelectableRow>\n\t\t\t);\n\t\t});\n\t// \"Create new\" is a brand-coloured footer row at the BOTTOM of the dropdown,\n\t// separated from the selectable items by a divider.\n\tconst dropdownOptions: SingleOption[] = createOption\n\t\t? [\n\t\t\t\t...addableOptions,\n\t\t\t\t{\n\t\t\t\t\tlabel: createOption.label,\n\t\t\t\t\tvalue: CREATE_OPTION_VALUE,\n\t\t\t\t\tsearchKey: createOption.label,\n\t\t\t\t\tcustomComponent: (\n\t\t\t\t\t\t<div\n\t\t\t\t\t\t\tstyle={{\n\t\t\t\t\t\t\t\twidth: '100%',\n\t\t\t\t\t\t\t\ttextAlign: 'center',\n\t\t\t\t\t\t\t\tcolor: COLORS.content.brand,\n\t\t\t\t\t\t\t\tfontFamily: 'Inter',\n\t\t\t\t\t\t\t\tfontSize: 14,\n\t\t\t\t\t\t\t\tfontWeight: 600,\n\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t{createOption.label}\n\t\t\t\t\t\t</div>\n\t\t\t\t\t),\n\t\t\t\t},\n\t\t  ]\n\t\t: addableOptions;\n\n\t// One picker instance reused by the header \"+\" and the empty-state source\n\t// buttons. `key` remounts it so a source button re-drills into its own tools\n\t// (the initial drill-in level is read once, on mount).\n\tconst pickerNode = usePicker ? (\n\t\t<MentionPicker\n\t\t\tkey={pickerSource ?? '__root__'}\n\t\t\titems={mentionItems ?? []}\n\t\t\tquery=\"\"\n\t\t\tactiveIndex={0}\n\t\t\tinitialSource={pickerSource ?? undefined}\n\t\t\tonSelect={(item) => {\n\t\t\t\tsetAdding(false);\n\t\t\t\tonAdd(String(item.id));\n\t\t\t}}\n\t\t\tonClose={() => setAdding(false)}\n\t\t\tonCreateSubAgent={\n\t\t\t\tcreateOption\n\t\t\t\t\t? () => {\n\t\t\t\t\t\t\tsetAdding(false);\n\t\t\t\t\t\t\tcreateOption.onSelect();\n\t\t\t\t\t  }\n\t\t\t\t\t: undefined\n\t\t\t}\n\t\t\ttoolActions={\n\t\t\t\thasActionSources\n\t\t\t\t\t? actionSources?.map((a) => ({\n\t\t\t\t\t\t\t...a,\n\t\t\t\t\t\t\tonSelect: () => {\n\t\t\t\t\t\t\t\tsetAdding(false);\n\t\t\t\t\t\t\t\ta.onSelect();\n\t\t\t\t\t\t\t},\n\t\t\t\t\t  }))\n\t\t\t\t\t: undefined\n\t\t\t}\n\t\t/>\n\t) : null;\n\n\treturn (\n\t\t<SideSection>\n\t\t\t<SideSectionHeader>\n\t\t\t\t<TitleSmall color={COLORS.content.primary}>{title}</TitleSmall>\n\t\t\t\t{showAddButton && (\n\t\t\t\t\t<AddButtonWrap ref={headerPickerRef}>\n\t\t\t\t\t\t<AddIconButton\n\t\t\t\t\t\t\tdata-test={`${dataTestPrefix}-add`}\n\t\t\t\t\t\t\tonClick={handleAddClick}\n\t\t\t\t\t\t\taria-label={`Add ${title}`}\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t<PlusIcon width={16} height={16} color={COLORS.content.primary} />\n\t\t\t\t\t\t</AddIconButton>\n\t\t\t\t\t\t{usePicker && adding && pickerSource === null && (\n\t\t\t\t\t\t\t<PickerPopover\n\t\t\t\t\t\t\t\t$up={pickerOpensUp}\n\t\t\t\t\t\t\t\tdata-test={`${dataTestPrefix}-picker`}\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t{pickerNode}\n\t\t\t\t\t\t\t</PickerPopover>\n\t\t\t\t\t\t)}\n\t\t\t\t\t</AddButtonWrap>\n\t\t\t\t)}\n\t\t\t</SideSectionHeader>\n\n\t\t\t{helper && (\n\t\t\t\t<BodyCaption color={COLORS.content.secondary}>{helper}</BodyCaption>\n\t\t\t)}\n\n\t\t\t{showSourceButtons ? (\n\t\t\t\t<SourcePickerAnchor ref={usePicker ? sourcePickerRef : undefined}>\n\t\t\t\t\t{/* No tools yet: one button per source (never shown once a tool exists). */}\n\t\t\t\t\t<SourceButtonRow data-test={`${dataTestPrefix}-sources`}>\n\t\t\t\t\t\t{sourceGroups?.map((g) => (\n\t\t\t\t\t\t\t<SourceButton\n\t\t\t\t\t\t\t\tkey={g.source}\n\t\t\t\t\t\t\t\ttype=\"button\"\n\t\t\t\t\t\t\t\tdata-test={`${dataTestPrefix}-source-${g.source}`}\n\t\t\t\t\t\t\t\tonClick={() => {\n\t\t\t\t\t\t\t\t\tif (usePicker) {\n\t\t\t\t\t\t\t\t\t\t// Open the `@` picker drilled straight into this source's tools.\n\t\t\t\t\t\t\t\t\t\tsetPickerSource(g.source);\n\t\t\t\t\t\t\t\t\t\tsetAdding(true);\n\t\t\t\t\t\t\t\t\t\treturn;\n\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\tsetActiveSource(g.source);\n\t\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t{renderSourceIcon(SOURCE_ICONS[g.source], -4)}\n\t\t\t\t\t\t\t\t<BodyCaption color={COLORS.content.primary}>\n\t\t\t\t\t\t\t\t\t{g.label}\n\t\t\t\t\t\t\t\t</BodyCaption>\n\t\t\t\t\t\t\t</SourceButton>\n\t\t\t\t\t\t))}\n\t\t\t\t\t\t{actionSources?.map((a) => (\n\t\t\t\t\t\t\t<SourceButton\n\t\t\t\t\t\t\t\tkey={a.source}\n\t\t\t\t\t\t\t\ttype=\"button\"\n\t\t\t\t\t\t\t\tdata-test={`${dataTestPrefix}-action-${a.source}`}\n\t\t\t\t\t\t\t\t// Close any open source picker before this opens its drawer,\n\t\t\t\t\t\t\t\t// otherwise the previous source's popup lingers behind it.\n\t\t\t\t\t\t\t\tonClick={() => {\n\t\t\t\t\t\t\t\t\tsetAdding(false);\n\t\t\t\t\t\t\t\t\ta.onSelect();\n\t\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t{renderSourceIcon(a.icon, -4)}\n\t\t\t\t\t\t\t\t<BodyCaption color={COLORS.content.primary}>\n\t\t\t\t\t\t\t\t\t{a.label}\n\t\t\t\t\t\t\t\t</BodyCaption>\n\t\t\t\t\t\t\t</SourceButton>\n\t\t\t\t\t\t))}\n\t\t\t\t\t</SourceButtonRow>\n\n\t\t\t\t\t{/* Picker mode: clicking a source opens its tools in the `@` picker. */}\n\t\t\t\t\t{usePicker && adding && pickerSource !== null && (\n\t\t\t\t\t\t<PickerPopover\n\t\t\t\t\t\t\t$align=\"left\"\n\t\t\t\t\t\t\t$up={pickerOpensUp}\n\t\t\t\t\t\t\tdata-test={`${dataTestPrefix}-picker`}\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t{pickerNode}\n\t\t\t\t\t\t</PickerPopover>\n\t\t\t\t\t)}\n\n\t\t\t\t\t{/* Legacy (non-picker) mode: chosen source → its searchable tool list. */}\n\t\t\t\t\t{!usePicker && activeGroup && (\n\t\t\t\t\t\t<Dropdown\n\t\t\t\t\t\t\tdata-test={`${dataTestPrefix}-dropdown`}\n\t\t\t\t\t\t\tsize=\"small\"\n\t\t\t\t\t\t\twidth=\"100%\"\n\t\t\t\t\t\t\tisSearchable\n\t\t\t\t\t\t\tplaceHolder={`Search ${activeGroup.label} tools`}\n\t\t\t\t\t\t\toptions={activeGroup.options}\n\t\t\t\t\t\t\tonSelect={(opt) => {\n\t\t\t\t\t\t\t\tconst v = unwrapDropdownValue(opt);\n\t\t\t\t\t\t\t\tsetActiveSource(null);\n\t\t\t\t\t\t\t\tsetAdding(false);\n\t\t\t\t\t\t\t\tif (v) {\n\t\t\t\t\t\t\t\t\tonAdd(v);\n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t/>\n\t\t\t\t\t)}\n\t\t\t\t</SourcePickerAnchor>\n\t\t\t) : (\n\t\t\t\t<>\n\t\t\t\t\t{!usePicker && adding && dropdownOptions.length > 0 && (\n\t\t\t\t\t\t<Dropdown\n\t\t\t\t\t\t\tdata-test={`${dataTestPrefix}-dropdown`}\n\t\t\t\t\t\t\tsize=\"small\"\n\t\t\t\t\t\t\twidth=\"100%\"\n\t\t\t\t\t\t\tisSearchable\n\t\t\t\t\t\t\tplaceHolder={`Select ${title.toLowerCase()}`}\n\t\t\t\t\t\t\toptions={dropdownOptions}\n\t\t\t\t\t\t\tonSelect={(opt) => {\n\t\t\t\t\t\t\t\tconst v = unwrapDropdownValue(opt);\n\t\t\t\t\t\t\t\tsetAdding(false);\n\t\t\t\t\t\t\t\tif (!v) {\n\t\t\t\t\t\t\t\t\treturn;\n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\tif (v === CREATE_OPTION_VALUE) {\n\t\t\t\t\t\t\t\t\tcreateOption?.onSelect();\n\t\t\t\t\t\t\t\t} else {\n\t\t\t\t\t\t\t\t\tonAdd(v);\n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t/>\n\t\t\t\t\t)}\n\n\t\t\t\t\t{items.length === 0 && !adding ? (\n\t\t\t\t\t\t<>\n\t\t\t\t\t\t\t<BodyCaption color={COLORS.content.placeholder}>\n\t\t\t\t\t\t\t\t{emptyText}\n\t\t\t\t\t\t\t</BodyCaption>\n\t\t\t\t\t\t\t{showEmptyCreate && createOption && (\n\t\t\t\t\t\t\t\t<Button\n\t\t\t\t\t\t\t\t\tdata-test={`${dataTestPrefix}-create`}\n\t\t\t\t\t\t\t\t\tbuttonType=\"secondary\"\n\t\t\t\t\t\t\t\t\tsize=\"small\"\n\t\t\t\t\t\t\t\t\tmatchParentWidth\n\t\t\t\t\t\t\t\t\tLeadingIcon={PlusIcon}\n\t\t\t\t\t\t\t\t\tbuttonText={createOption.label}\n\t\t\t\t\t\t\t\t\tonClick={createOption.onSelect}\n\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t</>\n\t\t\t\t\t) : (\n\t\t\t\t\t\trenderChipRows()\n\t\t\t\t\t)}\n\t\t\t\t</>\n\t\t\t)}\n\t\t\t{confirmDelete && pendingDeleteId && (\n\t\t\t\t<DeleteConfirmationModal\n\t\t\t\t\tdata-test={`${dataTestPrefix}-delete-confirm`}\n\t\t\t\t\theader={`Delete this ${confirmDelete.noun}?`}\n\t\t\t\t\tsubHeader={`Deleting this ${confirmDelete.noun} will also remove it from your instructions, wherever it's referenced.`}\n\t\t\t\t\tconfirmationText=\"Delete\"\n\t\t\t\t\tzIndex={confirmDelete.zIndex}\n\t\t\t\t\tonDeleteConfirmed={() => {\n\t\t\t\t\t\tonRemove(pendingDeleteId);\n\t\t\t\t\t\tsetPendingDeleteId(null);\n\t\t\t\t\t}}\n\t\t\t\t\tonCancelClicked={() => setPendingDeleteId(null)}\n\t\t\t\t/>\n\t\t\t)}\n\t\t</SideSection>\n\t);\n};\n\n// Anchors the `@`-picker popover to the header \"+\" button.\nconst AddButtonWrap = styled.div`\n\tposition: relative;\n\tdisplay: flex;\n`;\n\n// Anchors the `@`-picker popover to the empty-state source buttons.\nconst SourcePickerAnchor = styled.div`\n\tposition: relative;\n\tdisplay: flex;\n\tflex-direction: column;\n\tgap: 8px;\n`;\n\n// Floating card under the trigger. Aligns to the \"+\" (right) or the source\n// buttons (left) so it stays inside the side panel.\nconst PickerPopover = styled.div<{ $align?: 'left' | 'right'; $up?: boolean }>`\n\tposition: absolute;\n\t${(p) => (p.$up ? 'bottom: calc(100% + 4px);' : 'top: calc(100% + 4px);')}\n\t${(p) => (p.$align === 'left' ? 'left: 0;' : 'right: 0;')}\n\tz-index: 30;\n`;\n"],"names":["CREATE_OPTION_VALUE","SelectableListSection","title","helper","items","addableOptions","onAdd","onRemove","dataTestPrefix","emptyText","createOption","onConfigure","sourceGroups","mentionItems","actionSources","confirmDelete","pickerOpensUp","adding","setAdding","useState","pendingDeleteId","setPendingDeleteId","configuringId","setConfiguringId","activeSource","setActiveSource","hasSourceGroups","activeGroup","g","usePicker","headerPickerRef","useRef","sourcePickerRef","pickerSource","setPickerSource","useEffect","onDocMouseDown","e","target","onKeyDown","showAddButton","showEmptyCreate","hasActionSources","showSourceButtons","handleAddClick","v","handleConfigureClick","id","configure","result","renderChipRows","item","jsxs","SelectableRow","renderSourceIcon","jsx","Tooltip","RowText","BodySecondary","COLORS","RowActions","RowMenuButton","EditIcon","RowActionDivider","DeleteIcon","dropdownOptions","pickerNode","MentionPicker","a","SideSection","SideSectionHeader","TitleSmall","AddButtonWrap","AddIconButton","PlusIcon","PickerPopover","BodyCaption","SourcePickerAnchor","SourceButtonRow","SourceButton","SOURCE_ICONS","Dropdown","opt","unwrapDropdownValue","Fragment","Button","DeleteConfirmationModal","styled","p"],"mappings":";;;;;;;;;;;;;;;;AA4DA,MAAMA,IAAsB,sBAiEfC,KAA8D,CAAC;AAAA,EAC3E,OAAAC;AAAA,EACA,QAAAC;AAAA,EACA,OAAAC;AAAA,EACA,gBAAAC;AAAA,EACA,OAAAC;AAAA,EACA,UAAAC;AAAA,EACA,gBAAAC;AAAA,EACA,WAAAC;AAAA,EACA,cAAAC;AAAA,EACA,aAAAC;AAAA,EACA,cAAAC;AAAA,EACA,cAAAC;AAAA,EACA,eAAAC;AAAA,EACA,eAAAC;AAAA,EACA,eAAAC;AACD,MAAM;AACL,QAAM,CAACC,GAAQC,CAAS,IAAIC,EAAS,EAAK,GAEpC,CAACC,GAAiBC,CAAkB,IAAIF,EAAwB,IAAI,GAIpE,CAACG,GAAeC,CAAgB,IAAIJ,EAAwB,IAAI,GAEhE,CAACK,GAAcC,CAAe,IAAIN,EAAwB,IAAI,GAC9DO,IAAkB,CAAC,CAACd,KAAgBA,EAAa,SAAS,GAC1De,IAAcf,GAAc,KAAK,CAACgB,MAAMA,EAAE,WAAWJ,CAAY,GAEjEK,IAAYhB,MAAiB,QAI7BiB,IAAkBC,EAAuB,IAAI,GAC7CC,IAAkBD,EAAuB,IAAI,GAG7C,CAACE,GAAcC,CAAe,IAAIf,EAAwB,IAAI;AAGpE,EAAAgB,GAAU,MAAM;AACf,QAAI,CAACN,KAAa,CAACZ;AAClB;AAED,UAAMmB,IAAiB,CAACC,MAAkB;AACzC,YAAMC,IAASD,EAAE;AACjB,MACC,CAACP,EAAgB,SAAS,SAASQ,CAAM,KACzC,CAACN,EAAgB,SAAS,SAASM,CAAM,KAEzCpB,EAAU,EAAK;AAAA,IAEjB,GACMqB,IAAY,CAACF,MAAqB;AACvC,MAAIA,EAAE,QAAQ,YACbnB,EAAU,EAAK;AAAA,IAEjB;AACA,oBAAS,iBAAiB,aAAakB,CAAc,GACrD,SAAS,iBAAiB,WAAWG,CAAS,GACvC,MAAM;AACZ,eAAS,oBAAoB,aAAaH,CAAc,GACxD,SAAS,oBAAoB,WAAWG,CAAS;AAAA,IAClD;AAAA,EACD,GAAG,CAACV,GAAWZ,CAAM,CAAC;AAOtB,QAAMuB,KAAgBd,IACnBG,KAAazB,EAAM,SAAS,IAC5ByB,KACAxB,EAAe,SAAS,KACvB,CAAC,CAACK,KAAgBN,EAAM,SAAS,GAI/BqC,KACLrC,EAAM,WAAW,KAAK,CAAC,CAACM,KAAgB,CAACgB,KAAmB,CAACG,GACxDa,IAAmB,CAAC,CAAC5B,KAAiBA,EAAc,SAAS,GAK7D6B,MACJjB,KAAmBgB,MAAqBtC,EAAM,WAAW,GAErDwC,KAAiB,MAAM;AAC5B,QAAIf,GAAW;AAGd,MAAAK,EAAgB,IAAI,GACpBhB,EAAU,CAAC2B,MAAM,CAACA,CAAC;AACnB;AAAA,IACD;AACA,QAAInB,GAAiB;AACpB,MAAAD,EAAgB,IAAI,GACpBP,EAAU,CAAC2B,MAAM,CAACA,CAAC;AACnB;AAAA,IACD;AACA,QAAIxC,EAAe,WAAW,KAAKK,GAAc;AAChD,MAAAA,EAAa,SAAA;AACb;AAAA,IACD;AACA,IAAAQ,EAAU,CAAC2B,MAAM,CAACA,CAAC;AAAA,EACpB,GAIMC,KAAuB,CAC5BC,GACAC,MACI;AACJ,QAAI1B;AACH;AAED,UAAM2B,IAASD,EAAA;AACf,IAAIC,KAAU,OAAQA,EAAyB,QAAS,eACvD1B,EAAiBwB,CAAE,GACbE,EAAyB,QAAQ,MAAM1B,EAAiB,IAAI,CAAC;AAAA,EAErE,GAEM2B,KAAiB,MACtB9C,EAAM,IAAI,CAAC+C,MAAS;AAEnB,UAAMH,IACLG,EAAK,gBACJxC,IAAc,MAAMA,EAAYwC,EAAK,EAAE,IAAI;AAC7C,WACC,gBAAAC;AAAA,MAACC;AAAA,MAAA;AAAA,QAEA,aAAW,GAAG7C,CAAc,QAAQ2C,EAAK,EAAE;AAAA,QAE1C,UAAA;AAAA,UAAAG,EAAiBH,EAAK,IAAI;AAAA,UAE3B,gBAAAI,EAACC,KAAQ,MAAML,EAAK,OAAO,WAAU,OACpC,4BAACM,IAAA,EACA,UAAA,gBAAAF,EAACG,MAAc,eAAe,GAAG,OAAOC,EAAO,QAAQ,SACrD,UAAAR,EAAK,OACP,GACD,EAAA,CACD;AAAA,4BACCS,IAAA,EACC,UAAA;AAAA,YAAAZ;AAAA;AAAA,YAGA,gBAAAO,EAACC,GAAA,EAAQ,MAAK,QAAO,WAAU,OAC9B,UAAA,gBAAAD;AAAA,cAACM;AAAA,cAAA;AAAA,gBACA,aAAW,GAAGrD,CAAc,SAAS2C,EAAK,EAAE;AAAA,gBAC5C,cAAY,QAAQA,EAAK,KAAK;AAAA,gBAC9B,UAAU7B,MAAkB;AAAA,gBAC5B,SAAS,MAAMwB,GAAqBK,EAAK,IAAIH,CAAS;AAAA,gBAEtD,UAAA,gBAAAO;AAAA,kBAACO;AAAAA,kBAAA;AAAA,oBACA,OAAO;AAAA,oBACP,QAAQ;AAAA,oBACR,OAAOH,EAAO,QAAQ;AAAA,kBAAA;AAAA,gBAAA;AAAA,cACvB;AAAA,YAAA,GAEF;AAAA,YAEAX,KAAa,gBAAAO,EAACQ,IAAA,EAAiB,eAAW,GAAA,CAAC;AAAA,YAC5C,gBAAAR,EAACC,GAAA,EAAQ,MAAK,UAAS,WAAU,OAChC,UAAA,gBAAAD;AAAA,cAACM;AAAA,cAAA;AAAA,gBACA,aAAW,GAAGrD,CAAc,WAAW2C,EAAK,EAAE;AAAA,gBAC9C,cAAY,UAAUA,EAAK,KAAK;AAAA,gBAChC,SAAS,MACRpC,IACGM,EAAmB8B,EAAK,EAAE,IAC1B5C,EAAS4C,EAAK,EAAE;AAAA,gBAGpB,UAAA,gBAAAI;AAAA,kBAACS;AAAAA,kBAAA;AAAA,oBACA,OAAO;AAAA,oBACP,QAAQ;AAAA,oBACR,OAAOL,EAAO,QAAQ;AAAA,kBAAA;AAAA,gBAAA;AAAA,cACvB;AAAA,YAAA,EACD,CACD;AAAA,UAAA,EAAA,CACD;AAAA,QAAA;AAAA,MAAA;AAAA,MAjDKR,EAAK;AAAA,IAAA;AAAA,EAoDb,CAAC,GAGIc,IAAkCvD,IACrC;AAAA,IACA,GAAGL;AAAA,IACH;AAAA,MACC,OAAOK,EAAa;AAAA,MACpB,OAAOV;AAAA,MACP,WAAWU,EAAa;AAAA,MACxB,iBACC,gBAAA6C;AAAA,QAAC;AAAA,QAAA;AAAA,UACA,OAAO;AAAA,YACN,OAAO;AAAA,YACP,WAAW;AAAA,YACX,OAAOI,EAAO,QAAQ;AAAA,YACtB,YAAY;AAAA,YACZ,UAAU;AAAA,YACV,YAAY;AAAA,UAAA;AAAA,UAGZ,UAAAjD,EAAa;AAAA,QAAA;AAAA,MAAA;AAAA,IACf;AAAA,EAEF,IAEAL,GAKG6D,IAAarC,IAClB,gBAAA0B;AAAA,IAACY;AAAA,IAAA;AAAA,MAEA,OAAOtD,KAAgB,CAAA;AAAA,MACvB,OAAM;AAAA,MACN,aAAa;AAAA,MACb,eAAeoB,KAAgB;AAAA,MAC/B,UAAU,CAACkB,MAAS;AACnB,QAAAjC,EAAU,EAAK,GACfZ,EAAM,OAAO6C,EAAK,EAAE,CAAC;AAAA,MACtB;AAAA,MACA,SAAS,MAAMjC,EAAU,EAAK;AAAA,MAC9B,kBACCR,IACG,MAAM;AACN,QAAAQ,EAAU,EAAK,GACfR,EAAa,SAAA;AAAA,MACb,IACA;AAAA,MAEJ,aACCgC,IACG5B,GAAe,IAAI,CAACsD,OAAO;AAAA,QAC3B,GAAGA;AAAA,QACH,UAAU,MAAM;AACf,UAAAlD,EAAU,EAAK,GACfkD,EAAE,SAAA;AAAA,QACH;AAAA,MAAA,EACE,IACF;AAAA,IAAA;AAAA,IA3BCnC,KAAgB;AAAA,EAAA,IA8BnB;AAEJ,2BACEoC,IAAA,EACA,UAAA;AAAA,IAAA,gBAAAjB,EAACkB,IAAA,EACA,UAAA;AAAA,MAAA,gBAAAf,EAACgB,IAAA,EAAW,OAAOZ,EAAO,QAAQ,SAAU,UAAAzD,GAAM;AAAA,MACjDsC,MACA,gBAAAY,EAACoB,IAAA,EAAc,KAAK1C,GACnB,UAAA;AAAA,QAAA,gBAAAyB;AAAA,UAACkB;AAAA,UAAA;AAAA,YACA,aAAW,GAAGjE,CAAc;AAAA,YAC5B,SAASoC;AAAA,YACT,cAAY,OAAO1C,CAAK;AAAA,YAExB,UAAA,gBAAAqD,EAACmB,KAAS,OAAO,IAAI,QAAQ,IAAI,OAAOf,EAAO,QAAQ,QAAA,CAAS;AAAA,UAAA;AAAA,QAAA;AAAA,QAEhE9B,KAAaZ,KAAUgB,MAAiB,QACxC,gBAAAsB;AAAA,UAACoB;AAAA,UAAA;AAAA,YACA,KAAK3D;AAAA,YACL,aAAW,GAAGR,CAAc;AAAA,YAE3B,UAAA0D;AAAA,UAAA;AAAA,QAAA;AAAA,MACF,EAAA,CAEF;AAAA,IAAA,GAEF;AAAA,IAEC/D,KACA,gBAAAoD,EAACqB,GAAA,EAAY,OAAOjB,EAAO,QAAQ,WAAY,UAAAxD,GAAO;AAAA,IAGtDwC,KACA,gBAAAS,EAACyB,IAAA,EAAmB,KAAKhD,IAAYG,IAAkB,QAEtD,UAAA;AAAA,MAAA,gBAAAoB,EAAC0B,IAAA,EAAgB,aAAW,GAAGtE,CAAc,YAC3C,UAAA;AAAA,QAAAI,GAAc,IAAI,CAACgB,MACnB,gBAAAwB;AAAA,UAAC2B;AAAA,UAAA;AAAA,YAEA,MAAK;AAAA,YACL,aAAW,GAAGvE,CAAc,WAAWoB,EAAE,MAAM;AAAA,YAC/C,SAAS,MAAM;AACd,kBAAIC,GAAW;AAEd,gBAAAK,EAAgBN,EAAE,MAAM,GACxBV,EAAU,EAAI;AACd;AAAA,cACD;AACA,cAAAO,EAAgBG,EAAE,MAAM;AAAA,YACzB;AAAA,YAEC,UAAA;AAAA,cAAA0B,EAAiB0B,GAAapD,EAAE,MAAM,GAAG,EAAE;AAAA,gCAC3CgD,GAAA,EAAY,OAAOjB,EAAO,QAAQ,SACjC,YAAE,MAAA,CACJ;AAAA,YAAA;AAAA,UAAA;AAAA,UAhBK/B,EAAE;AAAA,QAAA,CAkBR;AAAA,QACAd,GAAe,IAAI,CAACsD,MACpB,gBAAAhB;AAAA,UAAC2B;AAAA,UAAA;AAAA,YAEA,MAAK;AAAA,YACL,aAAW,GAAGvE,CAAc,WAAW4D,EAAE,MAAM;AAAA,YAG/C,SAAS,MAAM;AACd,cAAAlD,EAAU,EAAK,GACfkD,EAAE,SAAA;AAAA,YACH;AAAA,YAEC,UAAA;AAAA,cAAAd,EAAiBc,EAAE,MAAM,EAAE;AAAA,gCAC3BQ,GAAA,EAAY,OAAOjB,EAAO,QAAQ,SACjC,YAAE,MAAA,CACJ;AAAA,YAAA;AAAA,UAAA;AAAA,UAbKS,EAAE;AAAA,QAAA,CAeR;AAAA,MAAA,GACF;AAAA,MAGCvC,KAAaZ,KAAUgB,MAAiB,QACxC,gBAAAsB;AAAA,QAACoB;AAAA,QAAA;AAAA,UACA,QAAO;AAAA,UACP,KAAK3D;AAAA,UACL,aAAW,GAAGR,CAAc;AAAA,UAE3B,UAAA0D;AAAA,QAAA;AAAA,MAAA;AAAA,MAKF,CAACrC,KAAaF,KACd,gBAAA4B;AAAA,QAAC0B;AAAA,QAAA;AAAA,UACA,aAAW,GAAGzE,CAAc;AAAA,UAC5B,MAAK;AAAA,UACL,OAAM;AAAA,UACN,cAAY;AAAA,UACZ,aAAa,UAAUmB,EAAY,KAAK;AAAA,UACxC,SAASA,EAAY;AAAA,UACrB,UAAU,CAACuD,MAAQ;AAClB,kBAAMrC,IAAIsC,EAAoBD,CAAG;AACjC,YAAAzD,EAAgB,IAAI,GACpBP,EAAU,EAAK,GACX2B,KACHvC,EAAMuC,CAAC;AAAA,UAET;AAAA,QAAA;AAAA,MAAA;AAAA,IACD,EAAA,CAEF,IAEA,gBAAAO,EAAAgC,GAAA,EACE,UAAA;AAAA,MAAA,CAACvD,KAAaZ,KAAUgD,EAAgB,SAAS,KACjD,gBAAAV;AAAA,QAAC0B;AAAA,QAAA;AAAA,UACA,aAAW,GAAGzE,CAAc;AAAA,UAC5B,MAAK;AAAA,UACL,OAAM;AAAA,UACN,cAAY;AAAA,UACZ,aAAa,UAAUN,EAAM,YAAA,CAAa;AAAA,UAC1C,SAAS+D;AAAA,UACT,UAAU,CAACiB,MAAQ;AAClB,kBAAMrC,IAAIsC,EAAoBD,CAAG;AAEjC,YADAhE,EAAU,EAAK,GACV2B,MAGDA,MAAM7C,IACTU,GAAc,SAAA,IAEdJ,EAAMuC,CAAC;AAAA,UAET;AAAA,QAAA;AAAA,MAAA;AAAA,MAIDzC,EAAM,WAAW,KAAK,CAACa,IACvB,gBAAAmC,EAAAgC,GAAA,EACC,UAAA;AAAA,QAAA,gBAAA7B,EAACqB,GAAA,EAAY,OAAOjB,EAAO,QAAQ,aACjC,UAAAlD,GACF;AAAA,QACCgC,MAAmB/B,KACnB,gBAAA6C;AAAA,UAAC8B;AAAA,UAAA;AAAA,YACA,aAAW,GAAG7E,CAAc;AAAA,YAC5B,YAAW;AAAA,YACX,MAAK;AAAA,YACL,kBAAgB;AAAA,YAChB,aAAakE;AAAAA,YACb,YAAYhE,EAAa;AAAA,YACzB,SAASA,EAAa;AAAA,UAAA;AAAA,QAAA;AAAA,MACvB,EAAA,CAEF,IAEAwC,GAAA;AAAA,IAAe,GAEjB;AAAA,IAEAnC,KAAiBK,KACjB,gBAAAmC;AAAA,MAAC+B;AAAA,MAAA;AAAA,QACA,aAAW,GAAG9E,CAAc;AAAA,QAC5B,QAAQ,eAAeO,EAAc,IAAI;AAAA,QACzC,WAAW,iBAAiBA,EAAc,IAAI;AAAA,QAC9C,kBAAiB;AAAA,QACjB,QAAQA,EAAc;AAAA,QACtB,mBAAmB,MAAM;AACxB,UAAAR,EAASa,CAAe,GACxBC,EAAmB,IAAI;AAAA,QACxB;AAAA,QACA,iBAAiB,MAAMA,EAAmB,IAAI;AAAA,MAAA;AAAA,IAAA;AAAA,EAC/C,GAEF;AAEF,GAGMmD,KAAgBe,EAAO;AAAA;AAAA;AAAA,GAMvBV,KAAqBU,EAAO;AAAA;AAAA;AAAA;AAAA;AAAA,GAS5BZ,IAAgBY,EAAO;AAAA;AAAA,GAE1B,CAACC,MAAOA,EAAE,MAAM,8BAA8B,wBAAyB;AAAA,GACvE,CAACA,MAAOA,EAAE,WAAW,SAAS,aAAa,WAAY;AAAA;AAAA;"}

package/dist/esm/components/agent-builder/components/StepSectionHeader.js

@@ -1,13 +1,13 @@
-import { jsxs as c, jsx as r } from "react/jsx-runtime";
-import { TitleRegular as n, BodySecondary as i } from "../../TypographyStyle.js";
-import { COLORS as e } from "../../../constants/Theme.js";
+import { jsxs as i, jsx as r } from "react/jsx-runtime";
+import { TitleRegular as n, BodyCaption as c } from "../../TypographyStyle.js";
+import { COLORS as t } from "../../../constants/Theme.js";
 import { SectionHeaderWrap as m } from "../AgentBuilder.styled.js";
 const s = ({
-  title: t,
+  title: e,
   helper: o
-}) => /* @__PURE__ */ c(m, { children: [
-  /* @__PURE__ */ r(n, { color: e.content.primary, children: t }),
-  o && /* @__PURE__ */ r(i, { color: e.content.secondary, children: o })
+}) => /* @__PURE__ */ i(m, { children: [
+  /* @__PURE__ */ r(n, { color: t.content.primary, children: e }),
+  o && /* @__PURE__ */ r(c, { color: t.content.secondary, children: o })
 ] });
 export {
   s as StepSectionHeader