@bikdotai/bik-component-library 0.0.823-beta.2 → 0.0.823

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

@@ -1,60 +1,59 @@
-import { jsx as d } from "react/jsx-runtime";
-import { useMemo as x, useCallback as l } from "react";
-import { useAgentBuilderContext as I } from "../context/AgentBuilderContext.js";
-import { buildAgentMentionItems as T, appTypeLabel as $ } from "../utils/mentionSerialization.js";
-import { MentionEditor as h } from "./MentionEditor.js";
+import { jsx as I } from "react/jsx-runtime";
+import { useMemo as T, useCallback as m } from "react";
+import { useAgentBuilderContext as $ } from "../context/AgentBuilderContext.js";
+import { buildAgentMentionItems as f, appTypeLabel as h } from "../utils/mentionSerialization.js";
+import { MentionEditor as R } from "./MentionEditor.js";
 const L = ({
   fieldKey: e,
-  label: m,
-  placeholder: b,
+  label: u,
+  placeholder: p,
   maxLength: c,
-  minHeight: g,
-  ...p
+  minHeight: l,
+  ...b
 }) => {
   const {
-    value: t,
-    patch: n,
-    availableTools: a,
-    availableSubAgents: r,
-    applicationType: i,
+    value: n,
+    patch: g,
+    addReference: r,
+    availableTools: o,
+    availableSubAgents: a,
+    applicationType: s,
     mentionResetKey: M,
-    registerMentionField: u,
-    notifyMentionFocus: A,
-    onCreateSubAgent: C,
-    requestCreateSubAgent: v
-  } = I(), S = x(
-    () => T(
+    registerMentionField: i,
+    notifyMentionFocus: d,
+    onCreateSubAgent: A,
+    requestCreateSubAgent: C
+  } = $(), v = T(
+    () => f(
+      o,
       a,
-      r,
-      $(i)
+      h(s)
     ),
-    [a, r, i]
-  ), f = l(
-    (o) => u(e, o),
-    [u, e]
-  ), F = l(
-    (o, s) => {
-      o === "tool" ? t.tools.includes(s) || n({ tools: [...t.tools, s] }) : t.subagents.includes(s) || n({ subagents: [...t.subagents, s] });
-    },
-    [n, t.tools, t.subagents]
+    [o, a, s]
+  ), S = m(
+    (t) => i(e, t),
+    [i, e]
+  ), F = m(
+    (t, x) => r(t, x),
+    [r]
   );
-  return /* @__PURE__ */ d(
-    h,
+  return /* @__PURE__ */ I(
+    R,
     {
-      label: m,
-      value: t[e] ?? "",
-      onChange: (o) => n({ [e]: o }),
+      label: u,
+      value: n[e] ?? "",
+      onChange: (t) => g({ [e]: t }),
       maxLength: c,
-      placeholder: b,
-      minHeight: g,
-      resetKey: `${t.id}:${e}:${M}`,
-      mentionItems: S,
-      tools: a,
+      placeholder: p,
+      minHeight: l,
+      resetKey: `${n.id}:${e}:${M}`,
+      mentionItems: v,
+      tools: o,
       onMentionSelect: F,
-      onFocus: () => A(e),
-      registerInsert: f,
-      onCreateSubAgent: C ? v : void 0,
-      "data-test": p["data-test"]
+      onFocus: () => d(e),
+      registerInsert: S,
+      onCreateSubAgent: A ? C : void 0,
+      "data-test": b["data-test"]
     }
   );
 };

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

@@ -1 +1 @@
-{"version":3,"file":"MentionField.js","sources":["../../../../../src/components/agent-builder/components/MentionField.tsx"],"sourcesContent":["import React, { useCallback, useMemo } from 'react';\nimport { AgentValue } from '../AgentBuilder.model';\nimport {\n\tMentionFieldKey,\n\tuseAgentBuilderContext,\n} from '../context/AgentBuilderContext';\nimport {\n\tappTypeLabel,\n\tbuildAgentMentionItems,\n} from '../utils/mentionSerialization';\nimport { MentionEditor } from './MentionEditor';\n\ninterface MentionFieldProps {\n\t/** Which AgentValue field this editor reads / writes. */\n\tfieldKey: MentionFieldKey;\n\tlabel: string;\n\tplaceholder?: string;\n\tmaxLength: number;\n\tminHeight?: string;\n\t'data-test'?: string;\n}\n\n/**\n * Context-bound {@link MentionEditor} for the builder's Step-3 Instructions /\n * Guardrails. Both `@` tools and sub-agents are offered; the field registers its\n * insert + focus with the context so side-panel adds drop a chip into whichever\n * field was last focused, and remounts on `mentionResetKey`.\n */\nexport const MentionField: React.FC<MentionFieldProps> = ({\n\tfieldKey,\n\tlabel,\n\tplaceholder,\n\tmaxLength,\n\tminHeight,\n\t...rest\n}) => {\n\tconst {\n\t\tvalue,\n\t\tpatch,\n\t\tavailableTools,\n\t\tavailableSubAgents,\n\t\tapplicationType,\n\t\tmentionResetKey,\n\t\tregisterMentionField,\n\t\tnotifyMentionFocus,\n\t\tonCreateSubAgent,\n\t\trequestCreateSubAgent,\n\t} = useAgentBuilderContext();\n\n\tconst mentionItems = useMemo(\n\t\t() =>\n\t\t\tbuildAgentMentionItems(\n\t\t\t\tavailableTools,\n\t\t\t\tavailableSubAgents,\n\t\t\t\tappTypeLabel(applicationType),\n\t\t\t),\n\t\t[availableTools, availableSubAgents, applicationType],\n\t);\n\n\tconst registerInsert = useCallback(\n\t\t(fn: Parameters<typeof registerMentionField>[1]) =>\n\t\t\tregisterMentionField(fieldKey, fn),\n\t\t[registerMentionField, fieldKey],\n\t);\n\n\tconst onMentionSelect = useCallback(\n\t\t(kind: 'tool' | 'subagent', id: string) => {\n\t\t\tif (kind === 'tool') {\n\t\t\t\tif (!value.tools.includes(id)) {\n\t\t\t\t\tpatch({ tools: [...value.tools, id] });\n\t\t\t\t}\n\t\t\t} else if (!value.subagents.includes(id)) {\n\t\t\t\tpatch({ subagents: [...value.subagents, id] });\n\t\t\t}\n\t\t},\n\t\t[patch, value.tools, value.subagents],\n\t);\n\n\treturn (\n\t\t<MentionEditor\n\t\t\tlabel={label}\n\t\t\tvalue={(value[fieldKey] as string | undefined) ?? ''}\n\t\t\tonChange={(text) => patch({ [fieldKey]: text } as Partial<AgentValue>)}\n\t\t\tmaxLength={maxLength}\n\t\t\tplaceholder={placeholder}\n\t\t\tminHeight={minHeight}\n\t\t\tresetKey={`${value.id}:${fieldKey}:${mentionResetKey}`}\n\t\t\tmentionItems={mentionItems}\n\t\t\ttools={availableTools}\n\t\t\tonMentionSelect={onMentionSelect}\n\t\t\tonFocus={() => notifyMentionFocus(fieldKey)}\n\t\t\tregisterInsert={registerInsert}\n\t\t\tonCreateSubAgent={onCreateSubAgent ? requestCreateSubAgent : undefined}\n\t\t\tdata-test={rest['data-test']}\n\t\t/>\n\t);\n};\n"],"names":["MentionField","fieldKey","label","placeholder","maxLength","minHeight","rest","value","patch","availableTools","availableSubAgents","applicationType","mentionResetKey","registerMentionField","notifyMentionFocus","onCreateSubAgent","requestCreateSubAgent","useAgentBuilderContext","mentionItems","useMemo","buildAgentMentionItems","appTypeLabel","registerInsert","useCallback","fn","onMentionSelect","kind","id","jsx","MentionEditor","text"],"mappings":";;;;;AA4BO,MAAMA,IAA4C,CAAC;AAAA,EACzD,UAAAC;AAAA,EACA,OAAAC;AAAA,EACA,aAAAC;AAAA,EACA,WAAAC;AAAA,EACA,WAAAC;AAAA,EACA,GAAGC;AACJ,MAAM;AACL,QAAM;AAAA,IACL,OAAAC;AAAA,IACA,OAAAC;AAAA,IACA,gBAAAC;AAAA,IACA,oBAAAC;AAAA,IACA,iBAAAC;AAAA,IACA,iBAAAC;AAAA,IACA,sBAAAC;AAAA,IACA,oBAAAC;AAAA,IACA,kBAAAC;AAAA,IACA,uBAAAC;AAAA,EAAA,IACGC,EAAA,GAEEC,IAAeC;AAAA,IACpB,MACCC;AAAA,MACCX;AAAA,MACAC;AAAA,MACAW,EAAaV,CAAe;AAAA,IAAA;AAAA,IAE9B,CAACF,GAAgBC,GAAoBC,CAAe;AAAA,EAAA,GAG/CW,IAAiBC;AAAA,IACtB,CAACC,MACAX,EAAqBZ,GAAUuB,CAAE;AAAA,IAClC,CAACX,GAAsBZ,CAAQ;AAAA,EAAA,GAG1BwB,IAAkBF;AAAA,IACvB,CAACG,GAA2BC,MAAe;AAC1C,MAAID,MAAS,SACPnB,EAAM,MAAM,SAASoB,CAAE,KAC3BnB,EAAM,EAAE,OAAO,CAAC,GAAGD,EAAM,OAAOoB,CAAE,GAAG,IAE3BpB,EAAM,UAAU,SAASoB,CAAE,KACtCnB,EAAM,EAAE,WAAW,CAAC,GAAGD,EAAM,WAAWoB,CAAE,GAAG;AAAA,IAE/C;AAAA,IACA,CAACnB,GAAOD,EAAM,OAAOA,EAAM,SAAS;AAAA,EAAA;AAGrC,SACC,gBAAAqB;AAAA,IAACC;AAAA,IAAA;AAAA,MACA,OAAA3B;AAAA,MACA,OAAQK,EAAMN,CAAQ,KAA4B;AAAA,MAClD,UAAU,CAAC6B,MAAStB,EAAM,EAAE,CAACP,CAAQ,GAAG6B,GAA6B;AAAA,MACrE,WAAA1B;AAAA,MACA,aAAAD;AAAA,MACA,WAAAE;AAAA,MACA,UAAU,GAAGE,EAAM,EAAE,IAAIN,CAAQ,IAAIW,CAAe;AAAA,MACpD,cAAAM;AAAA,MACA,OAAOT;AAAA,MACP,iBAAAgB;AAAA,MACA,SAAS,MAAMX,EAAmBb,CAAQ;AAAA,MAC1C,gBAAAqB;AAAA,MACA,kBAAkBP,IAAmBC,IAAwB;AAAA,MAC7D,aAAWV,EAAK,WAAW;AAAA,IAAA;AAAA,EAAA;AAG9B;"}
+{"version":3,"file":"MentionField.js","sources":["../../../../../src/components/agent-builder/components/MentionField.tsx"],"sourcesContent":["import React, { useCallback, useMemo } from 'react';\nimport { AgentValue } from '../AgentBuilder.model';\nimport {\n\tMentionFieldKey,\n\tuseAgentBuilderContext,\n} from '../context/AgentBuilderContext';\nimport {\n\tappTypeLabel,\n\tbuildAgentMentionItems,\n} from '../utils/mentionSerialization';\nimport { MentionEditor } from './MentionEditor';\n\ninterface MentionFieldProps {\n\t/** Which AgentValue field this editor reads / writes. */\n\tfieldKey: MentionFieldKey;\n\tlabel: string;\n\tplaceholder?: string;\n\tmaxLength: number;\n\tminHeight?: string;\n\t'data-test'?: string;\n}\n\n/**\n * Context-bound {@link MentionEditor} for the builder's Step-3 Instructions /\n * Guardrails. Both `@` tools and sub-agents are offered; the field registers its\n * insert + focus with the context so side-panel adds drop a chip into whichever\n * field was last focused, and remounts on `mentionResetKey`.\n */\nexport const MentionField: React.FC<MentionFieldProps> = ({\n\tfieldKey,\n\tlabel,\n\tplaceholder,\n\tmaxLength,\n\tminHeight,\n\t...rest\n}) => {\n\tconst {\n\t\tvalue,\n\t\tpatch,\n\t\taddReference,\n\t\tavailableTools,\n\t\tavailableSubAgents,\n\t\tapplicationType,\n\t\tmentionResetKey,\n\t\tregisterMentionField,\n\t\tnotifyMentionFocus,\n\t\tonCreateSubAgent,\n\t\trequestCreateSubAgent,\n\t} = useAgentBuilderContext();\n\n\tconst mentionItems = useMemo(\n\t\t() =>\n\t\t\tbuildAgentMentionItems(\n\t\t\t\tavailableTools,\n\t\t\t\tavailableSubAgents,\n\t\t\t\tappTypeLabel(applicationType),\n\t\t\t),\n\t\t[availableTools, availableSubAgents, applicationType],\n\t);\n\n\tconst registerInsert = useCallback(\n\t\t(fn: Parameters<typeof registerMentionField>[1]) =>\n\t\t\tregisterMentionField(fieldKey, fn),\n\t\t[registerMentionField, fieldKey],\n\t);\n\n\t// Route through the context's ref-backed `addReference`: BikEditor captures\n\t// this handler at mount, so reading `value.tools` here would keep only the last\n\t// pick. `addReference` always appends against the latest lists.\n\tconst onMentionSelect = useCallback(\n\t\t(kind: 'tool' | 'subagent', id: string) => addReference(kind, id),\n\t\t[addReference],\n\t);\n\n\treturn (\n\t\t<MentionEditor\n\t\t\tlabel={label}\n\t\t\tvalue={(value[fieldKey] as string | undefined) ?? ''}\n\t\t\tonChange={(text) => patch({ [fieldKey]: text } as Partial<AgentValue>)}\n\t\t\tmaxLength={maxLength}\n\t\t\tplaceholder={placeholder}\n\t\t\tminHeight={minHeight}\n\t\t\tresetKey={`${value.id}:${fieldKey}:${mentionResetKey}`}\n\t\t\tmentionItems={mentionItems}\n\t\t\ttools={availableTools}\n\t\t\tonMentionSelect={onMentionSelect}\n\t\t\tonFocus={() => notifyMentionFocus(fieldKey)}\n\t\t\tregisterInsert={registerInsert}\n\t\t\tonCreateSubAgent={onCreateSubAgent ? requestCreateSubAgent : undefined}\n\t\t\tdata-test={rest['data-test']}\n\t\t/>\n\t);\n};\n"],"names":["MentionField","fieldKey","label","placeholder","maxLength","minHeight","rest","value","patch","addReference","availableTools","availableSubAgents","applicationType","mentionResetKey","registerMentionField","notifyMentionFocus","onCreateSubAgent","requestCreateSubAgent","useAgentBuilderContext","mentionItems","useMemo","buildAgentMentionItems","appTypeLabel","registerInsert","useCallback","fn","onMentionSelect","kind","id","jsx","MentionEditor","text"],"mappings":";;;;;AA4BO,MAAMA,IAA4C,CAAC;AAAA,EACzD,UAAAC;AAAA,EACA,OAAAC;AAAA,EACA,aAAAC;AAAA,EACA,WAAAC;AAAA,EACA,WAAAC;AAAA,EACA,GAAGC;AACJ,MAAM;AACL,QAAM;AAAA,IACL,OAAAC;AAAA,IACA,OAAAC;AAAA,IACA,cAAAC;AAAA,IACA,gBAAAC;AAAA,IACA,oBAAAC;AAAA,IACA,iBAAAC;AAAA,IACA,iBAAAC;AAAA,IACA,sBAAAC;AAAA,IACA,oBAAAC;AAAA,IACA,kBAAAC;AAAA,IACA,uBAAAC;AAAA,EAAA,IACGC,EAAA,GAEEC,IAAeC;AAAA,IACpB,MACCC;AAAA,MACCX;AAAA,MACAC;AAAA,MACAW,EAAaV,CAAe;AAAA,IAAA;AAAA,IAE9B,CAACF,GAAgBC,GAAoBC,CAAe;AAAA,EAAA,GAG/CW,IAAiBC;AAAA,IACtB,CAACC,MACAX,EAAqBb,GAAUwB,CAAE;AAAA,IAClC,CAACX,GAAsBb,CAAQ;AAAA,EAAA,GAM1ByB,IAAkBF;AAAA,IACvB,CAACG,GAA2BC,MAAenB,EAAakB,GAAMC,CAAE;AAAA,IAChE,CAACnB,CAAY;AAAA,EAAA;AAGd,SACC,gBAAAoB;AAAA,IAACC;AAAA,IAAA;AAAA,MACA,OAAA5B;AAAA,MACA,OAAQK,EAAMN,CAAQ,KAA4B;AAAA,MAClD,UAAU,CAAC8B,MAASvB,EAAM,EAAE,CAACP,CAAQ,GAAG8B,GAA6B;AAAA,MACrE,WAAA3B;AAAA,MACA,aAAAD;AAAA,MACA,WAAAE;AAAA,MACA,UAAU,GAAGE,EAAM,EAAE,IAAIN,CAAQ,IAAIY,CAAe;AAAA,MACpD,cAAAM;AAAA,MACA,OAAOT;AAAA,MACP,iBAAAgB;AAAA,MACA,SAAS,MAAMX,EAAmBd,CAAQ;AAAA,MAC1C,gBAAAsB;AAAA,MACA,kBAAkBP,IAAmBC,IAAwB;AAAA,MAC7D,aAAWX,EAAK,WAAW;AAAA,IAAA;AAAA,EAAA;AAG9B;"}

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

@@ -1,79 +1,76 @@
-import { jsx as o, jsxs as i, Fragment as B } from "react/jsx-runtime";
-import X from "../../../assets/icons/delete.svg.js";
-import Y from "../../../assets/icons/edit.svg.js";
-import L from "../../../assets/icons/plus.svg.js";
-import { useState as g, useRef as Z, useEffect as G } from "react";
-import k from "styled-components";
-import { TitleSmall as P, BodyCaption as D, BodySecondary as I } from "../../TypographyStyle.js";
+import { jsx as o, jsxs as i, Fragment as D } from "react/jsx-runtime";
+import Z from "../../../assets/icons/delete.svg.js";
+import G from "../../../assets/icons/edit.svg.js";
+import I from "../../../assets/icons/plus.svg.js";
+import { useState as $, useRef as z, useEffect as T } from "react";
+import g from "styled-components";
+import { TitleSmall as O, BodyCaption as x, BodySecondary as H } from "../../TypographyStyle.js";
 import { COLORS as d } from "../../../constants/Theme.js";
-import { SideSection as T, SideSectionHeader as O, AddIconButton as ee, SourceButtonRow as oe, SourceButton as ne, SelectableRow as te, RowText as le, RowActions as re, RowMenuButton as z, RowActionDivider as ce } from "../AgentBuilder.styled.js";
-import { renderSourceIcon as W, SOURCE_ICONS as ie } from "../utils/sourceIcons.js";
-import { MentionPicker as de } from "./MentionPicker.js";
-import { Dropdown as x } from "../../dropdown/Dropdown.js";
-import { unwrapDropdownValue as H } from "../../dropdown/utils.js";
-import { Button as se } from "../../button/Button.js";
-const M = "__bik_create_new__", _e = ({
+import { SideSection as ee, SideSectionHeader as oe, AddIconButton as ne, SourceButtonRow as te, SourceButton as re, SelectableRow as le, RowText as ce, RowActions as ie, RowMenuButton as M, RowActionDivider as de } from "../AgentBuilder.styled.js";
+import { renderSourceIcon as N, SOURCE_ICONS as se } from "../utils/sourceIcons.js";
+import { MentionPicker as ae } from "./MentionPicker.js";
+import { Dropdown as W } from "../../dropdown/Dropdown.js";
+import { unwrapDropdownValue as j } from "../../dropdown/utils.js";
+import { Button as ue } from "../../button/Button.js";
+const F = "__bik_create_new__", Ae = ({
   title: u,
-  helper: C,
+  helper: k,
   items: s,
   addableOptions: h,
-  onAdd: f,
-  onRemove: j,
-  dataTestPrefix: l,
-  emptyText: F,
+  onAdd: p,
+  onRemove: U,
+  dataTestPrefix: r,
+  emptyText: V,
   createOption: n,
   onConfigure: w,
   sourceGroups: S,
-  mentionItems: E
+  mentionItems: C
 }) => {
-  const [a, r] = g(!1), [K, v] = g(null), p = !!S && S.length > 0, y = S?.find((e) => e.source === K), t = E !== void 0, b = Z(null), [m, _] = g(null);
-  G(() => {
+  const [a, l] = $(!1), [q, v] = $(null), f = !!S && S.length > 0, y = S?.find((e) => e.source === q), t = C !== void 0, E = z(null), R = z(null), [m, _] = $(null);
+  T(() => {
     if (!t || !a)
       return;
-    const e = ($) => {
-      b.current?.contains($.target) || r(!1);
-    }, c = ($) => {
-      $.key === "Escape" && r(!1);
+    const e = (b) => {
+      const L = b.target;
+      !E.current?.contains(L) && !R.current?.contains(L) && l(!1);
+    }, c = (b) => {
+      b.key === "Escape" && l(!1);
     };
     return document.addEventListener("mousedown", e), document.addEventListener("keydown", c), () => {
       document.removeEventListener("mousedown", e), document.removeEventListener("keydown", c);
     };
   }, [t, a]);
-  const U = p ? s.length > 0 : (
-    // Picker mode (sub-agents) always shows the header "+", even when empty —
-    // the empty state is just the title + helper + "+" (create lives in the picker).
-    t || h.length > 0 || !!n && s.length > 0
-  ), V = s.length === 0 && !!n && !p && !t, q = p && s.length === 0, J = () => {
+  const P = f ? t || s.length > 0 : t || h.length > 0 || !!n && s.length > 0, J = s.length === 0 && !!n && !f && !t, Q = f && s.length === 0, X = () => {
     if (t) {
-      _(null), r((e) => !e);
+      _(null), l((e) => !e);
       return;
     }
-    if (p) {
-      v(null), r((e) => !e);
+    if (f) {
+      v(null), l((e) => !e);
       return;
     }
     if (h.length === 0 && n) {
       n.onSelect();
       return;
     }
-    r((e) => !e);
-  }, Q = () => s.map((e) => /* @__PURE__ */ i(
-    te,
+    l((e) => !e);
+  }, Y = () => s.map((e) => /* @__PURE__ */ i(
+    le,
     {
-      "data-test": `${l}-row-${e.id}`,
+      "data-test": `${r}-row-${e.id}`,
       children: [
-        W(e.icon),
-        /* @__PURE__ */ o(le, { children: /* @__PURE__ */ o(I, { numberOfLines: 1, color: d.content.primary, children: e.label }) }),
-        /* @__PURE__ */ i(re, { children: [
+        N(e.icon),
+        /* @__PURE__ */ o(ce, { children: /* @__PURE__ */ o(H, { numberOfLines: 1, color: d.content.primary, children: e.label }) }),
+        /* @__PURE__ */ i(ie, { children: [
           w && // Configurable rows (sub-agents) get an always-visible edit icon.
           /* @__PURE__ */ o(
-            z,
+            M,
             {
-              "data-test": `${l}-edit-${e.id}`,
+              "data-test": `${r}-edit-${e.id}`,
               "aria-label": `Edit ${e.label}`,
               onClick: () => w(e.id),
               children: /* @__PURE__ */ o(
-                Y,
+                G,
                 {
                   width: 16,
                   height: 16,
@@ -82,15 +79,15 @@ const M = "__bik_create_new__", _e = ({
               )
             }
           ),
-          w && /* @__PURE__ */ o(ce, { "aria-hidden": !0 }),
+          w && /* @__PURE__ */ o(de, { "aria-hidden": !0 }),
           /* @__PURE__ */ o(
-            z,
+            M,
             {
-              "data-test": `${l}-delete-${e.id}`,
+              "data-test": `${r}-delete-${e.id}`,
               "aria-label": `Delete ${e.label}`,
-              onClick: () => j(e.id),
+              onClick: () => U(e.id),
               children: /* @__PURE__ */ o(
-                X,
+                Z,
                 {
                   width: 16,
                   height: 16,
@@ -107,7 +104,7 @@ const M = "__bik_create_new__", _e = ({
     ...h,
     {
       label: n.label,
-      value: M,
+      value: F,
       searchKey: n.label,
       customComponent: /* @__PURE__ */ o(
         "div",
@@ -124,124 +121,124 @@ const M = "__bik_create_new__", _e = ({
         }
       )
     }
-  ] : h, R = t ? /* @__PURE__ */ o(
-    de,
+  ] : h, B = t ? /* @__PURE__ */ o(
+    ae,
     {
-      items: E ?? [],
+      items: C ?? [],
       query: "",
       activeIndex: 0,
       initialSource: m ?? void 0,
       onSelect: (e) => {
-        r(!1), f(String(e.id));
+        l(!1), p(String(e.id));
       },
-      onClose: () => r(!1),
+      onClose: () => l(!1),
       onCreateSubAgent: n ? () => {
-        r(!1), n.onSelect();
+        l(!1), n.onSelect();
       } : void 0
     },
     m ?? "__root__"
   ) : null;
-  return /* @__PURE__ */ i(T, { children: [
-    /* @__PURE__ */ i(O, { children: [
-      /* @__PURE__ */ o(P, { color: d.content.primary, children: u }),
-      U && /* @__PURE__ */ i(ae, { ref: b, children: [
+  return /* @__PURE__ */ i(ee, { children: [
+    /* @__PURE__ */ i(oe, { children: [
+      /* @__PURE__ */ o(O, { color: d.content.primary, children: u }),
+      P && /* @__PURE__ */ i(he, { ref: E, children: [
         /* @__PURE__ */ o(
-          ee,
+          ne,
           {
-            "data-test": `${l}-add`,
-            onClick: J,
+            "data-test": `${r}-add`,
+            onClick: X,
             "aria-label": `Add ${u}`,
-            children: /* @__PURE__ */ o(L, { width: 20, height: 20, color: d.content.brand })
+            children: /* @__PURE__ */ o(I, { width: 20, height: 20, color: d.content.brand })
           }
         ),
-        t && a && m === null && /* @__PURE__ */ o(N, { "data-test": `${l}-picker`, children: R })
+        t && a && m === null && /* @__PURE__ */ o(K, { "data-test": `${r}-picker`, children: B })
       ] })
     ] }),
-    C && /* @__PURE__ */ o(D, { color: d.content.secondary, children: C }),
-    q ? /* @__PURE__ */ i(ue, { ref: t ? b : void 0, children: [
-      /* @__PURE__ */ o(oe, { "data-test": `${l}-sources`, children: S?.map((e) => /* @__PURE__ */ i(
-        ne,
+    k && /* @__PURE__ */ o(x, { color: d.content.secondary, children: k }),
+    Q ? /* @__PURE__ */ i(Se, { ref: t ? R : void 0, children: [
+      /* @__PURE__ */ o(te, { "data-test": `${r}-sources`, children: S?.map((e) => /* @__PURE__ */ i(
+        re,
         {
           type: "button",
-          "data-test": `${l}-source-${e.source}`,
+          "data-test": `${r}-source-${e.source}`,
           onClick: () => {
             if (t) {
-              _(e.source), r(!0);
+              _(e.source), l(!0);
               return;
             }
             v(e.source);
           },
           children: [
-            W(ie[e.source], -4),
-            /* @__PURE__ */ o(I, { color: d.content.primary, children: e.label })
+            N(se[e.source], -4),
+            /* @__PURE__ */ o(H, { color: d.content.primary, children: e.label })
           ]
         },
         e.source
       )) }),
-      t && a && m !== null && /* @__PURE__ */ o(N, { $align: "left", "data-test": `${l}-picker`, children: R }),
+      t && a && m !== null && /* @__PURE__ */ o(K, { $align: "left", "data-test": `${r}-picker`, children: B }),
       !t && y && /* @__PURE__ */ o(
-        x,
+        W,
         {
-          "data-test": `${l}-dropdown`,
+          "data-test": `${r}-dropdown`,
           size: "small",
           width: "100%",
           isSearchable: !0,
           placeHolder: `Search ${y.label} tools`,
           options: y.options,
           onSelect: (e) => {
-            const c = H(e);
-            v(null), r(!1), c && f(c);
+            const c = j(e);
+            v(null), l(!1), c && p(c);
           }
         }
       )
-    ] }) : /* @__PURE__ */ i(B, { children: [
+    ] }) : /* @__PURE__ */ i(D, { children: [
       !t && a && A.length > 0 && /* @__PURE__ */ o(
-        x,
+        W,
         {
-          "data-test": `${l}-dropdown`,
+          "data-test": `${r}-dropdown`,
           size: "small",
           width: "100%",
           isSearchable: !0,
           placeHolder: `Select ${u.toLowerCase()}`,
           options: A,
           onSelect: (e) => {
-            const c = H(e);
-            r(!1), c && (c === M ? n?.onSelect() : f(c));
+            const c = j(e);
+            l(!1), c && (c === F ? n?.onSelect() : p(c));
           }
         }
       ),
-      s.length === 0 && !a ? /* @__PURE__ */ i(B, { children: [
-        /* @__PURE__ */ o(D, { color: d.content.placeholder, children: F }),
-        V && n && /* @__PURE__ */ o(
-          se,
+      s.length === 0 && !a ? /* @__PURE__ */ i(D, { children: [
+        /* @__PURE__ */ o(x, { color: d.content.placeholder, children: V }),
+        J && n && /* @__PURE__ */ o(
+          ue,
           {
-            "data-test": `${l}-create`,
+            "data-test": `${r}-create`,
             buttonType: "secondary",
             size: "small",
             matchParentWidth: !0,
-            LeadingIcon: L,
+            LeadingIcon: I,
             buttonText: n.label,
             onClick: n.onSelect
           }
         )
-      ] }) : Q()
+      ] }) : Y()
     ] })
   ] });
-}, ae = k.div`
+}, he = g.div`
 	position: relative;
 	display: flex;
-`, ue = k.div`
+`, Se = g.div`
 	position: relative;
 	display: flex;
 	flex-direction: column;
 	gap: 8px;
-`, N = k.div`
+`, K = g.div`
 	position: absolute;
 	top: calc(100% + 4px);
 	${(u) => u.$align === "left" ? "left: 0;" : "right: 0;"}
 	z-index: 30;
 `;
 export {
-  _e as SelectableListSection
+  Ae 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 {\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 {\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}\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}\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}) => {\n\tconst [adding, setAdding] = useState(false);\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\tconst pickerWrapRef = 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\tif (!pickerWrapRef.current?.contains(e.target as Node)) {\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// With sourceGroups the empty state IS the source buttons, so \"+\" only adds more.\n\tconst showAddButton = hasSourceGroups\n\t\t? items.length > 0\n\t\t: // Picker mode (sub-agents) always shows the header \"+\", even when empty —\n\t\t  // the empty state is just the title + helper + \"+\" (create lives in the picker).\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\t// Source buttons ONLY while no tool is added. Once one exists, adding more uses\n\t// the header \"+\" → all-tools dropdown (the buttons never come back).\n\tconst showSourceButtons = hasSourceGroups && 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<SelectableRow\n\t\t\t\tkey={item.id}\n\t\t\t\tdata-test={`${dataTestPrefix}-row-${item.id}`}\n\t\t\t>\n\t\t\t\t{renderSourceIcon(item.icon)}\n\t\t\t\t<RowText>\n\t\t\t\t\t<BodySecondary numberOfLines={1} color={COLORS.content.primary}>\n\t\t\t\t\t\t{item.label}\n\t\t\t\t\t</BodySecondary>\n\t\t\t\t</RowText>\n\t\t\t\t<RowActions>\n\t\t\t\t\t{onConfigure && (\n\t\t\t\t\t\t// Configurable rows (sub-agents) get an always-visible edit icon.\n\t\t\t\t\t\t<RowMenuButton\n\t\t\t\t\t\t\tdata-test={`${dataTestPrefix}-edit-${item.id}`}\n\t\t\t\t\t\t\taria-label={`Edit ${item.label}`}\n\t\t\t\t\t\t\tonClick={() => onConfigure(item.id)}\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t<EditIcon\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)}\n\t\t\t\t\t{onConfigure && <RowActionDivider aria-hidden />}\n\t\t\t\t\t<RowMenuButton\n\t\t\t\t\t\tdata-test={`${dataTestPrefix}-delete-${item.id}`}\n\t\t\t\t\t\taria-label={`Delete ${item.label}`}\n\t\t\t\t\t\tonClick={() => onRemove(item.id)}\n\t\t\t\t\t>\n\t\t\t\t\t\t<DeleteIcon\n\t\t\t\t\t\t\twidth={16}\n\t\t\t\t\t\t\theight={16}\n\t\t\t\t\t\t\tcolor={COLORS.content.secondary}\n\t\t\t\t\t\t/>\n\t\t\t\t\t</RowMenuButton>\n\t\t\t\t</RowActions>\n\t\t\t</SelectableRow>\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/>\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={pickerWrapRef}>\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 ? pickerWrapRef : 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</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</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","adding","setAdding","useState","activeSource","setActiveSource","hasSourceGroups","activeGroup","g","usePicker","pickerWrapRef","useRef","pickerSource","setPickerSource","useEffect","onDocMouseDown","e","onKeyDown","showAddButton","showEmptyCreate","showSourceButtons","handleAddClick","v","renderChipRows","item","jsxs","SelectableRow","renderSourceIcon","jsx","RowText","BodySecondary","COLORS","RowActions","RowMenuButton","EditIcon","RowActionDivider","DeleteIcon","dropdownOptions","pickerNode","MentionPicker","SideSection","SideSectionHeader","TitleSmall","AddButtonWrap","AddIconButton","PlusIcon","PickerPopover","BodyCaption","SourcePickerAnchor","SourceButtonRow","SourceButton","SOURCE_ICONS","Dropdown","opt","unwrapDropdownValue","Fragment","Button","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 {\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 {\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}\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}\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}) => {\n\tconst [adding, setAdding] = useState(false);\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\t// Source buttons ONLY while no tool is added. Once one exists, adding more uses\n\t// the header \"+\" → all-tools dropdown (the buttons never come back).\n\tconst showSourceButtons = hasSourceGroups && 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<SelectableRow\n\t\t\t\tkey={item.id}\n\t\t\t\tdata-test={`${dataTestPrefix}-row-${item.id}`}\n\t\t\t>\n\t\t\t\t{renderSourceIcon(item.icon)}\n\t\t\t\t<RowText>\n\t\t\t\t\t<BodySecondary numberOfLines={1} color={COLORS.content.primary}>\n\t\t\t\t\t\t{item.label}\n\t\t\t\t\t</BodySecondary>\n\t\t\t\t</RowText>\n\t\t\t\t<RowActions>\n\t\t\t\t\t{onConfigure && (\n\t\t\t\t\t\t// Configurable rows (sub-agents) get an always-visible edit icon.\n\t\t\t\t\t\t<RowMenuButton\n\t\t\t\t\t\t\tdata-test={`${dataTestPrefix}-edit-${item.id}`}\n\t\t\t\t\t\t\taria-label={`Edit ${item.label}`}\n\t\t\t\t\t\t\tonClick={() => onConfigure(item.id)}\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t<EditIcon\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)}\n\t\t\t\t\t{onConfigure && <RowActionDivider aria-hidden />}\n\t\t\t\t\t<RowMenuButton\n\t\t\t\t\t\tdata-test={`${dataTestPrefix}-delete-${item.id}`}\n\t\t\t\t\t\taria-label={`Delete ${item.label}`}\n\t\t\t\t\t\tonClick={() => onRemove(item.id)}\n\t\t\t\t\t>\n\t\t\t\t\t\t<DeleteIcon\n\t\t\t\t\t\t\twidth={16}\n\t\t\t\t\t\t\theight={16}\n\t\t\t\t\t\t\tcolor={COLORS.content.secondary}\n\t\t\t\t\t\t/>\n\t\t\t\t\t</RowMenuButton>\n\t\t\t\t</RowActions>\n\t\t\t</SelectableRow>\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/>\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</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</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","adding","setAdding","useState","activeSource","setActiveSource","hasSourceGroups","activeGroup","g","usePicker","headerPickerRef","useRef","sourcePickerRef","pickerSource","setPickerSource","useEffect","onDocMouseDown","e","target","onKeyDown","showAddButton","showEmptyCreate","showSourceButtons","handleAddClick","v","renderChipRows","item","jsxs","SelectableRow","renderSourceIcon","jsx","RowText","BodySecondary","COLORS","RowActions","RowMenuButton","EditIcon","RowActionDivider","DeleteIcon","dropdownOptions","pickerNode","MentionPicker","SideSection","SideSectionHeader","TitleSmall","AddButtonWrap","AddIconButton","PlusIcon","PickerPopover","BodyCaption","SourcePickerAnchor","SourceButtonRow","SourceButton","SOURCE_ICONS","Dropdown","opt","unwrapDropdownValue","Fragment","Button","styled","p"],"mappings":"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"}

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

@@ -1,35 +1,43 @@
-import { jsx as t, jsxs as s } from "react/jsx-runtime";
-import { TitleSmall as S, BodySecondary as p } from "../../TypographyStyle.js";
-import { COLORS as v } from "../../../constants/Theme.js";
-import { RailList as y, RailItem as x, StepBadge as f } from "../AgentBuilder.styled.js";
-import { STEP_DEFINITIONS as g } from "../constants/steps.js";
-import { useAgentBuilderContext as k } from "../context/AgentBuilderContext.js";
-const T = () => {
+import { jsx as e, jsxs as s } from "react/jsx-runtime";
+import S from "../../../assets/icons/tick.svg.js";
+import { TitleSmall as v, BodySecondary as y } from "../../TypographyStyle.js";
+import { COLORS as n } from "../../../constants/Theme.js";
+import { RailList as g, RailItem as f, StepBadge as h } from "../AgentBuilder.styled.js";
+import { STEP_DEFINITIONS as k } from "../constants/steps.js";
+import { useAgentBuilderContext as x } from "../context/AgentBuilderContext.js";
+const L = () => {
   const {
     activeStep: a,
-    activeIndex: n,
-    validation: c,
-    goToStep: l,
+    activeIndex: c,
+    validation: l,
+    goToStep: m,
     disableStepNavigation: i
-  } = k();
-  return /* @__PURE__ */ t(y, { children: g.map((e) => {
-    const o = e.key === a, r = e.index - 1 < n && c[e.key], d = o ? "active" : r ? "complete" : "inactive", m = o ? S : p;
+  } = x();
+  return /* @__PURE__ */ e(g, { children: k.map((t) => {
+    const o = t.key === a, r = t.index - 1 < c && l[t.key], d = o ? "active" : r ? "complete" : "inactive", p = o ? v : y;
     return /* @__PURE__ */ s(
-      x,
+      f,
       {
-        "data-test": `agent-step-${e.key}`,
+        "data-test": `agent-step-${t.key}`,
         disabled: i,
-        onClick: i ? void 0 : () => l(e.key),
+        onClick: i ? void 0 : () => m(t.key),
         children: [
-          /* @__PURE__ */ t(f, { state: d, children: r ? "✓" : e.index }),
-          /* @__PURE__ */ t(m, { color: v.content.primary, children: e.title })
+          /* @__PURE__ */ e(h, { state: d, children: r ? /* @__PURE__ */ e(
+            S,
+            {
+              width: 11,
+              height: 8,
+              color: n.content.primaryInverse
+            }
+          ) : t.index }),
+          /* @__PURE__ */ e(p, { color: n.content.primary, children: t.title })
         ]
       },
-      e.key
+      t.key
     );
   }) });
 };
 export {
-  T as StepRail
+  L as StepRail
 };
 //# sourceMappingURL=StepRail.js.map