@bikdotai/bik-component-library 0.0.821-beta.8 → 0.0.821

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

@@ -1,61 +1,64 @@
-import { jsx as A } from "react/jsx-runtime";
-import { useMemo as C, useCallback as u } from "react";
+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 d } from "./MentionEditor.js";
-const E = ({
-  fieldKey: o,
+import { MentionEditor as h } from "./MentionEditor.js";
+const L = ({
+  fieldKey: e,
   label: m,
-  placeholder: c,
-  maxLength: p,
-  minHeight: b,
-  ...g
+  placeholder: b,
+  maxLength: c,
+  minHeight: g,
+  ...p
 }) => {
   const {
     value: t,
     patch: n,
     availableTools: a,
-    availableSubAgents: i,
-    applicationType: r,
+    availableSubAgents: r,
+    applicationType: i,
     mentionResetKey: M,
-    registerMentionField: l,
-    notifyMentionFocus: f
-  } = I(), v = C(
+    registerMentionField: u,
+    notifyMentionFocus: A,
+    onCreateSubAgent: C,
+    requestCreateSubAgent: v
+  } = I(), S = x(
     () => T(
       a,
-      i,
-      $(r)
+      r,
+      $(i)
     ),
-    [a, i, r]
-  ), F = u(
-    (e) => l(o, e),
-    [l, o]
-  ), x = u(
-    (e, s) => {
-      e === "tool" ? t.tools.includes(s) || n({ tools: [...t.tools, s] }) : t.subagents.includes(s) || n({ subagents: [...t.subagents, 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]
   );
-  return /* @__PURE__ */ A(
-    d,
+  return /* @__PURE__ */ d(
+    h,
     {
       label: m,
-      value: t[o] ?? "",
-      onChange: (e) => n({ [o]: e }),
-      maxLength: p,
-      placeholder: c,
-      minHeight: b,
-      resetKey: `${t.id}:${o}:${M}`,
-      mentionItems: v,
+      value: t[e] ?? "",
+      onChange: (o) => n({ [e]: o }),
+      maxLength: c,
+      placeholder: b,
+      minHeight: g,
+      resetKey: `${t.id}:${e}:${M}`,
+      mentionItems: S,
       tools: a,
-      onMentionSelect: x,
-      onFocus: () => f(o),
-      registerInsert: F,
-      "data-test": g["data-test"]
+      onMentionSelect: F,
+      onFocus: () => A(e),
+      registerInsert: f,
+      onCreateSubAgent: C ? v : void 0,
+      "data-test": p["data-test"]
     }
   );
 };
 export {
-  E as MentionField
+  L as MentionField
 };
 //# sourceMappingURL=MentionField.js.map

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} = 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\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","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,EAAA,IACGC,EAAA,GAEEC,IAAeC;AAAA,IACpB,MACCC;AAAA,MACCT;AAAA,MACAC;AAAA,MACAS,EAAaR,CAAe;AAAA,IAAA;AAAA,IAE9B,CAACF,GAAgBC,GAAoBC,CAAe;AAAA,EAAA,GAG/CS,IAAiBC;AAAA,IACtB,CAACC,MACAT,EAAqBZ,GAAUqB,CAAE;AAAA,IAClC,CAACT,GAAsBZ,CAAQ;AAAA,EAAA,GAG1BsB,IAAkBF;AAAA,IACvB,CAACG,GAA2BC,MAAe;AAC1C,MAAID,MAAS,SACPjB,EAAM,MAAM,SAASkB,CAAE,KAC3BjB,EAAM,EAAE,OAAO,CAAC,GAAGD,EAAM,OAAOkB,CAAE,GAAG,IAE3BlB,EAAM,UAAU,SAASkB,CAAE,KACtCjB,EAAM,EAAE,WAAW,CAAC,GAAGD,EAAM,WAAWkB,CAAE,GAAG;AAAA,IAE/C;AAAA,IACA,CAACjB,GAAOD,EAAM,OAAOA,EAAM,SAAS;AAAA,EAAA;AAGrC,SACC,gBAAAmB;AAAA,IAACC;AAAA,IAAA;AAAA,MACA,OAAAzB;AAAA,MACA,OAAQK,EAAMN,CAAQ,KAA4B;AAAA,MAClD,UAAU,CAAC2B,MAASpB,EAAM,EAAE,CAACP,CAAQ,GAAG2B,GAA6B;AAAA,MACrE,WAAAxB;AAAA,MACA,aAAAD;AAAA,MACA,WAAAE;AAAA,MACA,UAAU,GAAGE,EAAM,EAAE,IAAIN,CAAQ,IAAIW,CAAe;AAAA,MACpD,cAAAI;AAAA,MACA,OAAOP;AAAA,MACP,iBAAAc;AAAA,MACA,SAAS,MAAMT,EAAmBb,CAAQ;AAAA,MAC1C,gBAAAmB;AAAA,MACA,aAAWd,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\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;"}

package/dist/esm/components/agent-builder/components/MentionPicker.d.ts

@@ -1,5 +1,9 @@
 import { MentionDropdownRenderProps } from '../../../editor';
 import { default as React } from 'react';
+type MentionPickerProps = MentionDropdownRenderProps & {
+    /** Opens the create-sub-agent drawer (shows a "Create new" row in the Sub-agent view). */
+    onCreateSubAgent?: () => void;
+};
 /**
  * `@` reference picker. Drills:
  *   root → Tools → <source> (Manifest / Shopify / …) → tool
@@ -9,4 +13,5 @@ import { default as React } from 'react';
  * Owns keyboard navigation (↑/↓ move, →/Enter activate, ← go back) over the
  * CURRENTLY visible rows — registered with the editor via `registerKeyHandler`.
  */
-export declare const MentionPicker: React.FC<MentionDropdownRenderProps>;
+export declare const MentionPicker: React.FC<MentionPickerProps>;
+export {};

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

@@ -1,131 +1,220 @@
-import { jsxs as h, jsx as x } from "react/jsx-runtime";
-import T from "../../../assets/icons/chevronLeft.svg.js";
-import j from "../../../assets/icons/chevronRight.svg.js";
-import { useState as C, useMemo as c, useEffect as E, useRef as M } from "react";
-import k from "styled-components";
-import { TitleSmall as N, BodySecondary as z } from "../../TypographyStyle.js";
-import { COLORS as r } from "../../../constants/Theme.js";
-import { toolSourceLabel as R } from "../utils/mentionSerialization.js";
-const D = [
+import { jsxs as h, jsx as s, Fragment as j } from "react/jsx-runtime";
+import F from "../../../assets/icons/chevronRight.svg.js";
+import G from "../../../assets/icons/searchIcon.svg.js";
+import q from "../../../icons/Arrows/Normal arrows/ArrowLeft.js";
+import T, { useState as w, useMemo as g, useEffect as $, useRef as J } from "react";
+import d from "styled-components";
+import { TitleSmall as Q, BodySecondary as V } from "../../TypographyStyle.js";
+import { COLORS as n } from "../../../constants/Theme.js";
+import { toolSourceLabel as O } from "../utils/mentionSerialization.js";
+import { SOURCE_ICONS as N } from "../utils/sourceIcons.js";
+const W = [
   { key: "tool", label: "Tools" },
   { key: "subagent", label: "Sub-agent" }
-], u = (t) => t.meta, L = (t) => u(t)?.plainLabel ?? t.label, H = ({
-  items: t,
-  onSelect: m,
-  registerKeyHandler: d
+], b = (r) => r.meta, R = (r) => b(r)?.plainLabel ?? r.label, X = "__bik_create_subagent__", fe = ({
+  items: r,
+  onSelect: I,
+  registerKeyHandler: m,
+  onClose: _,
+  onCreateSubAgent: f
 }) => {
-  const [P, y] = C(null), [l, v] = C(null), [w, p] = C(0), a = c(
-    () => t.filter((e) => u(e)?.kind === "tool"),
-    [t]
-  ), f = c(
-    () => t.filter((e) => u(e)?.kind === "subagent"),
-    [t]
-  ), S = c(() => {
-    const e = [];
-    return a.forEach((n) => {
-      const b = u(n)?.source ?? "other";
-      e.includes(b) || e.push(b);
-    }), e;
-  }, [a]), g = c(
-    () => D.filter(
-      (e) => e.key === "tool" ? a.length > 0 : f.length > 0
+  const [z, S] = w(null), [l, A] = w(null), [x, u] = w(0), [k, B] = w(""), p = g(
+    () => r.filter((t) => b(t)?.kind === "tool"),
+    [r]
+  ), y = g(
+    () => r.filter((t) => b(t)?.kind === "subagent"),
+    [r]
+  ), L = g(() => {
+    const t = [];
+    return p.forEach((e) => {
+      const c = b(e)?.source ?? "other";
+      t.includes(c) || t.push(c);
+    }), t;
+  }, [p]), v = g(
+    () => W.filter(
+      (t) => t.key === "tool" ? p.length > 0 : y.length > 0 || !!f
     ),
-    [a.length, f.length]
-  ), A = g.length === 1 ? g[0].key : null, o = P ?? A, s = o ? o === "subagent" ? A ? null : { title: "Sub-agent", onBack: () => y(null) } : l ? { title: R(l), onBack: () => v(null) } : A ? null : { title: "Tools", onBack: () => y(null) } : null, i = c(() => o ? o === "subagent" ? f.map((e) => ({
-    id: String(e.id),
-    label: L(e),
-    drillsIn: !1,
-    onActivate: () => m(e)
-  })) : l ? a.filter((e) => (u(e)?.source ?? "other") === l).map((e) => ({
-    id: String(e.id),
-    label: L(e),
-    drillsIn: !1,
-    onActivate: () => m(e)
-  })) : S.map((e) => ({
-    id: e,
-    label: R(e),
-    drillsIn: !0,
-    onActivate: () => v(e)
-  })) : g.map((e) => ({
-    id: e.key,
-    label: e.label,
-    drillsIn: !0,
-    onActivate: () => {
-      y(e.key), v(null);
+    [p.length, y.length, f]
+  ), C = v.length === 1 ? v[0].key : null, i = z ?? C, a = i ? i === "subagent" ? C ? null : { title: "Sub-agent", onBack: () => S(null) } : l ? {
+    title: O(l),
+    onBack: () => A(null),
+    icon: N[l]
+  } : C ? null : { title: "Tools", onBack: () => S(null) } : null, o = g(() => {
+    if (!i)
+      return v.map((e) => ({
+        id: e.key,
+        label: e.label,
+        drillsIn: !0,
+        onActivate: () => {
+          S(e.key), A(null);
+        }
+      }));
+    if (i === "subagent") {
+      const e = y.map((c) => ({
+        id: String(c.id),
+        label: R(c),
+        drillsIn: !1,
+        onActivate: () => I(c)
+      }));
+      return f && e.push({
+        id: X,
+        label: "Create new",
+        drillsIn: !1,
+        isCreate: !0,
+        onActivate: () => {
+          _?.(), f();
+        }
+      }), e;
     }
-  })), [
-    o,
-    g,
+    if (!l)
+      return L.map((e) => ({
+        id: e,
+        label: O(e),
+        drillsIn: !0,
+        icon: N[e],
+        onActivate: () => A(e)
+      }));
+    const t = k.trim().toLowerCase();
+    return p.filter((e) => (b(e)?.source ?? "other") === l).filter((e) => !t || R(e).toLowerCase().includes(t)).map((e) => ({
+      id: String(e.id),
+      label: R(e),
+      drillsIn: !1,
+      onActivate: () => I(e)
+    }));
+  }, [
+    i,
+    v,
     l,
-    a,
-    f,
-    S,
-    m
+    k,
+    p,
+    y,
+    L,
+    I,
+    _,
+    f
   ]);
-  E(() => p(0), [o, l, t]);
-  const $ = M({ rows: i, activeIndex: w, header: s });
-  $.current = { rows: i, activeIndex: w, header: s }, E(() => {
-    if (d)
-      return d((e) => {
-        const { rows: n, activeIndex: b, header: B } = $.current;
-        switch (e.key) {
+  $(() => u(0), [i, l, k, r]), $(() => B(""), [i, l]);
+  const P = J({ rows: o, activeIndex: x, header: a });
+  P.current = { rows: o, activeIndex: x, header: a }, $(() => {
+    if (m)
+      return m((t) => {
+        const { rows: e, activeIndex: c, header: D } = P.current;
+        switch (t.key) {
           case "ArrowDown":
-            return n.length && p((I) => (I + 1) % n.length), !0;
+            return e.length && u((E) => (E + 1) % e.length), !0;
           case "ArrowUp":
-            return n.length && p((I) => (I + n.length - 1) % n.length), !0;
+            return e.length && u((E) => (E + e.length - 1) % e.length), !0;
           case "ArrowRight":
           case "Enter":
-            return n[b]?.onActivate(), !0;
+            return e[c]?.onActivate(), !0;
           case "ArrowLeft":
-            return B ? (B.onBack(), !0) : !1;
+            return D ? (D.onBack(), !0) : !1;
           default:
             return !1;
         }
-      }), () => d(null);
-  }, [d]);
-  const O = o ? i.length && !i[0].drillsIn ? "items" : "sources" : "categories";
-  return /* @__PURE__ */ h(G, { className: `bik-mention-picker bik-mention-picker--${O}`, children: [
-    s && /* @__PURE__ */ h(
-      q,
+      }), () => m(null);
+  }, [m]);
+  const M = i ? o.length && !o[0].drillsIn ? "items" : "sources" : "categories", U = i === "tool" && !!l;
+  return /* @__PURE__ */ h(Y, { className: `bik-mention-picker bik-mention-picker--${M}`, children: [
+    a && /* @__PURE__ */ h(
+      ne,
       {
         type: "button",
-        onClick: s.onBack,
-        style: { background: r.surface.subdued },
+        onClick: a.onBack,
+        style: { background: n.surface.subdued },
         children: [
-          /* @__PURE__ */ x(T, { width: 12, height: 12 }),
-          /* @__PURE__ */ h(N, { children: [
+          a.icon ? T.createElement(a.icon.Icon, {
+            width: a.icon.w,
+            height: a.icon.h
+          }) : /* @__PURE__ */ s(
+            q,
+            {
+              width: 20,
+              height: 20,
+              color: n.content.primary
+            }
+          ),
+          /* @__PURE__ */ h(Q, { children: [
             " ",
-            s.title
+            a.title
           ] })
         ]
       }
     ),
-    i.length === 0 ? /* @__PURE__ */ x(F, { children: o === "subagent" ? "No sub-agents available" : "No tools available" }) : i.map((e, n) => /* @__PURE__ */ h(
-      U,
+    U && /* @__PURE__ */ h(Z, { children: [
+      /* @__PURE__ */ s(
+        G,
+        {
+          width: 20,
+          height: 20,
+          color: n.content.placeholder
+        }
+      ),
+      /* @__PURE__ */ s(
+        K,
+        {
+          autoFocus: !0,
+          value: k,
+          placeholder: "Search",
+          "data-test": "mention-picker-search",
+          onChange: (t) => B(t.target.value),
+          onKeyDown: (t) => {
+            o.length && (t.key === "ArrowDown" ? (t.preventDefault(), u((e) => (e + 1) % o.length)) : t.key === "ArrowUp" ? (t.preventDefault(), u((e) => (e + o.length - 1) % o.length)) : t.key === "Enter" && (t.preventDefault(), o[x]?.onActivate()));
+          }
+        }
+      )
+    ] }),
+    o.length === 0 ? /* @__PURE__ */ s(re, { children: i === "subagent" ? "No sub-agents available" : "No tools available" }) : o.map((t, e) => /* @__PURE__ */ s(
+      H,
       {
         type: "button",
-        $active: n === w,
-        onMouseEnter: () => p(n),
-        onClick: e.onActivate,
-        children: [
-          /* @__PURE__ */ x(z, { color: r.content.primary, children: e.label }),
-          e.drillsIn && /* @__PURE__ */ x(j, { width: 12, height: 12 })
-        ]
+        $active: e === x,
+        onMouseEnter: () => u(e),
+        onClick: t.onActivate,
+        children: t.isCreate ? /* @__PURE__ */ s(te, { children: t.label }) : /* @__PURE__ */ h(j, { children: [
+          /* @__PURE__ */ h(ee, { children: [
+            t.icon && T.createElement(t.icon.Icon, {
+              width: t.icon.w,
+              height: t.icon.h
+            }),
+            /* @__PURE__ */ s(V, { color: n.content.primary, children: t.label })
+          ] }),
+          t.drillsIn && /* @__PURE__ */ s(F, { width: 12, height: 12 })
+        ] })
       },
-      e.id
+      t.id
     ))
   ] });
-}, G = k.div`
+}, Y = d.div`
 	display: flex;
 	flex-direction: column;
 	min-width: 240px;
 	max-height: 280px;
 	overflow-y: auto;
-	background: ${r.surface.standard};
-	border: 1px solid ${r.stroke.primary};
+	background: ${n.surface.standard};
+	border: 1px solid ${n.stroke.primary};
 	border-radius: 4px;
 	box-shadow: 0px -2px 8px 0px #0000001f;
-`, U = k.button`
+`, Z = d.div`
+	display: flex;
+	align-items: center;
+	gap: 8px;
+	padding: 10px 12px;
+	border-bottom: 1px solid ${n.stroke.primary};
+`, K = d.input`
+	flex: 1;
+	min-width: 0;
+	border: none;
+	outline: none;
+	background: transparent;
+	font-family: Inter;
+	font-size: 14px;
+	color: ${n.content.primary};
+
+	&::placeholder {
+		color: ${n.content.placeholder};
+	}
+`, H = d.button`
 	display: flex;
 	justify-content: space-between;
 	align-items: center;
@@ -134,20 +223,32 @@ const D = [
 	padding: 8px 10px;
 	height: 48px;
 	border: none;
-	border-bottom: 1px solid ${r.stroke.primary};
-	background: ${(t) => t.$active ? r.surface.subdued : "transparent"};
+	border-bottom: 1px solid ${n.stroke.primary};
+	background: ${(r) => r.$active ? n.surface.subdued : "transparent"};
 	cursor: pointer;
 	text-align: left;
 
 	&:hover {
-		background: ${r.surface.subdued};
+		background: ${n.surface.subdued};
 	}
-`, q = k.button`
+`, ee = d.div`
+	display: flex;
+	align-items: center;
+	gap: 12px;
+	min-width: 0;
+`, te = d.div`
+	width: 100%;
+	text-align: center;
+	color: ${n.content.brand};
+	font-family: Inter;
+	font-size: 14px;
+	font-weight: 600;
+`, ne = d.button`
 	display: flex;
 	align-items: center;
 	padding: 12px 16px;
 	border: none;
-	border-bottom: 1px solid ${r.stroke.primary};
+	border-bottom: 1px solid ${n.stroke.primary};
 	background: transparent;
 	cursor: pointer;
 	font-family: Inter;
@@ -155,13 +256,13 @@ const D = [
 	font-weight: 600;
 	height: 48px;
 	gap: 4px;
-`, F = k.div`
+`, re = d.div`
 	padding: 12px 10px;
 	font-family: Inter;
 	font-size: 13px;
-	color: ${r.content.secondary};
+	color: ${n.content.secondary};
 `;
 export {
-  H as MentionPicker
+  fe as MentionPicker
 };
 //# sourceMappingURL=MentionPicker.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"MentionPicker.js","sources":["../../../../../src/components/agent-builder/components/MentionPicker.tsx"],"sourcesContent":["import ChevronLeft from '@src/assets/icons/chevronLeft.svg';\nimport ChevronRight from '@src/assets/icons/chevronRight.svg';\nimport type { MentionDropdownRenderProps, MentionItem } from '@src/editor';\nimport React, { useEffect, useMemo, useRef, useState } from 'react';\nimport styled from 'styled-components';\nimport { BodySecondary, TitleSmall } from '@src/components/TypographyStyle';\nimport { COLORS } from '@src/constants/Theme';\nimport {\n\tMentionKindMeta,\n\ttoolSourceLabel,\n} from '../utils/mentionSerialization';\n\ntype Category = 'tool' | 'subagent';\n\nconst CATEGORIES: { key: Category; label: string }[] = [\n\t{ key: 'tool', label: 'Tools' },\n\t{ key: 'subagent', label: 'Sub-agent' },\n];\n\nconst metaOf = (item: MentionItem): MentionKindMeta | undefined =>\n\titem.meta as unknown as MentionKindMeta | undefined;\n\nconst rowLabel = (item: MentionItem): string =>\n\tmetaOf(item)?.plainLabel ?? item.label;\n\n/** One navigable row in the picker's current view. */\ntype PickerRowModel = {\n\tid: string;\n\tlabel: string;\n\t/** Drill-in rows show a chevron; leaf (selectable) rows do not. */\n\tdrillsIn: boolean;\n\tonActivate: () => void;\n};\n\n/**\n * `@` reference picker. Drills:\n *   root → Tools → <source> (Manifest / Shopify / …) → tool\n *        → Sub-agent → sub-agent\n * (\"Add condition\" and \"Variables\" are intentionally not shown yet.)\n *\n * Owns keyboard navigation (↑/↓ move, →/Enter activate, ← go back) over the\n * CURRENTLY visible rows — registered with the editor via `registerKeyHandler`.\n */\nexport const MentionPicker: React.FC<MentionDropdownRenderProps> = ({\n\titems,\n\tonSelect,\n\tregisterKeyHandler,\n}) => {\n\tconst [category, setCategory] = useState<Category | null>(null);\n\tconst [source, setSource] = useState<string | null>(null);\n\tconst [activeIndex, setActiveIndex] = useState(0);\n\n\tconst tools = useMemo(\n\t\t() => items.filter((i) => metaOf(i)?.kind === 'tool'),\n\t\t[items],\n\t);\n\tconst subAgents = useMemo(\n\t\t() => items.filter((i) => metaOf(i)?.kind === 'subagent'),\n\t\t[items],\n\t);\n\tconst sources = useMemo(() => {\n\t\tconst acc: string[] = [];\n\t\ttools.forEach((t) => {\n\t\t\tconst s = metaOf(t)?.source ?? 'other';\n\t\t\tif (!acc.includes(s)) {\n\t\t\t\tacc.push(s);\n\t\t\t}\n\t\t});\n\t\treturn acc;\n\t}, [tools]);\n\n\t// Only show categories that actually have items. When just one is available\n\t// (e.g. the sub-agent drawer offers tools only), skip the category selector.\n\tconst availableCategories = useMemo(\n\t\t() =>\n\t\t\tCATEGORIES.filter((c) =>\n\t\t\t\tc.key === 'tool' ? tools.length > 0 : subAgents.length > 0,\n\t\t\t),\n\t\t[tools.length, subAgents.length],\n\t);\n\tconst soleCategory =\n\t\tavailableCategories.length === 1 ? availableCategories[0].key : null;\n\tconst activeCategory = category ?? soleCategory;\n\n\t// Title shown above the current view, and whether we can go back a level.\n\t// With a sole category there is no root to go back to (no category header).\n\tconst header: { title: string; onBack: () => void } | null = !activeCategory\n\t\t? null\n\t\t: activeCategory === 'subagent'\n\t\t? soleCategory\n\t\t\t? null\n\t\t\t: { title: 'Sub-agent', onBack: () => setCategory(null) }\n\t\t: source\n\t\t? { title: toolSourceLabel(source), onBack: () => setSource(null) }\n\t\t: soleCategory\n\t\t? null\n\t\t: { title: 'Tools', onBack: () => setCategory(null) };\n\n\t// Build the navigable rows for the current view.\n\tconst rows: PickerRowModel[] = useMemo(() => {\n\t\tif (!activeCategory) {\n\t\t\treturn availableCategories.map((c) => ({\n\t\t\t\tid: c.key,\n\t\t\t\tlabel: c.label,\n\t\t\t\tdrillsIn: true,\n\t\t\t\tonActivate: () => {\n\t\t\t\t\tsetCategory(c.key);\n\t\t\t\t\tsetSource(null);\n\t\t\t\t},\n\t\t\t}));\n\t\t}\n\t\tif (activeCategory === 'subagent') {\n\t\t\treturn subAgents.map((item) => ({\n\t\t\t\tid: String(item.id),\n\t\t\t\tlabel: rowLabel(item),\n\t\t\t\tdrillsIn: false,\n\t\t\t\tonActivate: () => onSelect(item),\n\t\t\t}));\n\t\t}\n\t\tif (!source) {\n\t\t\treturn sources.map((s) => ({\n\t\t\t\tid: s,\n\t\t\t\tlabel: toolSourceLabel(s),\n\t\t\t\tdrillsIn: true,\n\t\t\t\tonActivate: () => setSource(s),\n\t\t\t}));\n\t\t}\n\t\treturn tools\n\t\t\t.filter((t) => (metaOf(t)?.source ?? 'other') === source)\n\t\t\t.map((item) => ({\n\t\t\t\tid: String(item.id),\n\t\t\t\tlabel: rowLabel(item),\n\t\t\t\tdrillsIn: false,\n\t\t\t\tonActivate: () => onSelect(item),\n\t\t\t}));\n\t}, [\n\t\tactiveCategory,\n\t\tavailableCategories,\n\t\tsource,\n\t\ttools,\n\t\tsubAgents,\n\t\tsources,\n\t\tonSelect,\n\t]);\n\n\t// Reset highlight whenever the view (or filtered result set) changes.\n\tuseEffect(() => setActiveIndex(0), [activeCategory, source, items]);\n\n\t// Keep the latest rows/index reachable from the stable key handler.\n\tconst navRef = useRef({ rows, activeIndex, header });\n\tnavRef.current = { rows, activeIndex, header };\n\n\tuseEffect(() => {\n\t\tif (!registerKeyHandler) {\n\t\t\treturn;\n\t\t}\n\t\tregisterKeyHandler((event) => {\n\t\t\tconst { rows: r, activeIndex: i, header: h } = navRef.current;\n\t\t\tswitch (event.key) {\n\t\t\t\tcase 'ArrowDown':\n\t\t\t\t\tif (r.length) setActiveIndex((p) => (p + 1) % r.length);\n\t\t\t\t\treturn true;\n\t\t\t\tcase 'ArrowUp':\n\t\t\t\t\tif (r.length) setActiveIndex((p) => (p + r.length - 1) % r.length);\n\t\t\t\t\treturn true;\n\t\t\t\tcase 'ArrowRight':\n\t\t\t\tcase 'Enter':\n\t\t\t\t\tr[i]?.onActivate();\n\t\t\t\t\treturn true;\n\t\t\t\tcase 'ArrowLeft':\n\t\t\t\t\tif (h) {\n\t\t\t\t\t\th.onBack();\n\t\t\t\t\t\treturn true;\n\t\t\t\t\t}\n\t\t\t\t\treturn false;\n\t\t\t\tdefault:\n\t\t\t\t\treturn false;\n\t\t\t}\n\t\t});\n\t\treturn () => registerKeyHandler(null);\n\t}, [registerKeyHandler]);\n\n\tconst variant = !activeCategory\n\t\t? 'categories'\n\t\t: rows.length && !rows[0].drillsIn\n\t\t? 'items'\n\t\t: 'sources';\n\n\treturn (\n\t\t<PickerCard className={`bik-mention-picker bik-mention-picker--${variant}`}>\n\t\t\t{header && (\n\t\t\t\t<PickerBack\n\t\t\t\t\ttype=\"button\"\n\t\t\t\t\tonClick={header.onBack}\n\t\t\t\t\tstyle={{ background: COLORS.surface.subdued }}\n\t\t\t\t>\n\t\t\t\t\t<ChevronLeft width={12} height={12} />\n\t\t\t\t\t<TitleSmall> {header.title}</TitleSmall>\n\t\t\t\t</PickerBack>\n\t\t\t)}\n\t\t\t{rows.length === 0 ? (\n\t\t\t\t<PickerEmpty>\n\t\t\t\t\t{activeCategory === 'subagent'\n\t\t\t\t\t\t? 'No sub-agents available'\n\t\t\t\t\t\t: 'No tools available'}\n\t\t\t\t</PickerEmpty>\n\t\t\t) : (\n\t\t\t\trows.map((row, i) => (\n\t\t\t\t\t<PickerRow\n\t\t\t\t\t\tkey={row.id}\n\t\t\t\t\t\ttype=\"button\"\n\t\t\t\t\t\t$active={i === activeIndex}\n\t\t\t\t\t\tonMouseEnter={() => setActiveIndex(i)}\n\t\t\t\t\t\tonClick={row.onActivate}\n\t\t\t\t\t>\n\t\t\t\t\t\t<BodySecondary color={COLORS.content.primary}>\n\t\t\t\t\t\t\t{row.label}\n\t\t\t\t\t\t</BodySecondary>\n\t\t\t\t\t\t{row.drillsIn && <ChevronRight width={12} height={12} />}\n\t\t\t\t\t</PickerRow>\n\t\t\t\t))\n\t\t\t)}\n\t\t</PickerCard>\n\t);\n};\n\nconst PickerCard = styled.div`\n\tdisplay: flex;\n\tflex-direction: column;\n\tmin-width: 240px;\n\tmax-height: 280px;\n\toverflow-y: auto;\n\tbackground: ${COLORS.surface.standard};\n\tborder: 1px solid ${COLORS.stroke.primary};\n\tborder-radius: 4px;\n\tbox-shadow: 0px -2px 8px 0px #0000001f;\n`;\n\nconst PickerRow = styled.button<{ $active?: boolean }>`\n\tdisplay: flex;\n\tjustify-content: space-between;\n\talign-items: center;\n\tgap: 2px;\n\twidth: 100%;\n\tpadding: 8px 10px;\n\theight: 48px;\n\tborder: none;\n\tborder-bottom: 1px solid ${COLORS.stroke.primary};\n\tbackground: ${(p) => (p.$active ? COLORS.surface.subdued : 'transparent')};\n\tcursor: pointer;\n\ttext-align: left;\n\n\t&:hover {\n\t\tbackground: ${COLORS.surface.subdued};\n\t}\n`;\n\nconst PickerBack = styled.button`\n\tdisplay: flex;\n\talign-items: center;\n\tpadding: 12px 16px;\n\tborder: none;\n\tborder-bottom: 1px solid ${COLORS.stroke.primary};\n\tbackground: transparent;\n\tcursor: pointer;\n\tfont-family: Inter;\n\tfont-size: 12px;\n\tfont-weight: 600;\n\theight: 48px;\n\tgap: 4px;\n`;\n\nconst PickerEmpty = styled.div`\n\tpadding: 12px 10px;\n\tfont-family: Inter;\n\tfont-size: 13px;\n\tcolor: ${COLORS.content.secondary};\n`;\n"],"names":["CATEGORIES","metaOf","item","rowLabel","MentionPicker","items","onSelect","registerKeyHandler","category","setCategory","useState","source","setSource","activeIndex","setActiveIndex","tools","useMemo","i","subAgents","sources","acc","t","s","availableCategories","c","soleCategory","activeCategory","header","toolSourceLabel","rows","useEffect","navRef","useRef","event","r","h","p","variant","jsxs","PickerCard","PickerBack","COLORS","jsx","ChevronLeft","TitleSmall","PickerEmpty","row","PickerRow","BodySecondary","ChevronRight","styled"],"mappings":";;;;;;;;AAcA,MAAMA,IAAiD;AAAA,EACtD,EAAE,KAAK,QAAQ,OAAO,QAAA;AAAA,EACtB,EAAE,KAAK,YAAY,OAAO,YAAA;AAC3B,GAEMC,IAAS,CAACC,MACfA,EAAK,MAEAC,IAAW,CAACD,MACjBD,EAAOC,CAAI,GAAG,cAAcA,EAAK,OAoBrBE,IAAsD,CAAC;AAAA,EACnE,OAAAC;AAAA,EACA,UAAAC;AAAA,EACA,oBAAAC;AACD,MAAM;AACL,QAAM,CAACC,GAAUC,CAAW,IAAIC,EAA0B,IAAI,GACxD,CAACC,GAAQC,CAAS,IAAIF,EAAwB,IAAI,GAClD,CAACG,GAAaC,CAAc,IAAIJ,EAAS,CAAC,GAE1CK,IAAQC;AAAA,IACb,MAAMX,EAAM,OAAO,CAACY,MAAMhB,EAAOgB,CAAC,GAAG,SAAS,MAAM;AAAA,IACpD,CAACZ,CAAK;AAAA,EAAA,GAEDa,IAAYF;AAAA,IACjB,MAAMX,EAAM,OAAO,CAACY,MAAMhB,EAAOgB,CAAC,GAAG,SAAS,UAAU;AAAA,IACxD,CAACZ,CAAK;AAAA,EAAA,GAEDc,IAAUH,EAAQ,MAAM;AAC7B,UAAMI,IAAgB,CAAA;AACtB,WAAAL,EAAM,QAAQ,CAACM,MAAM;AACpB,YAAMC,IAAIrB,EAAOoB,CAAC,GAAG,UAAU;AAC/B,MAAKD,EAAI,SAASE,CAAC,KAClBF,EAAI,KAAKE,CAAC;AAAA,IAEZ,CAAC,GACMF;AAAA,EACR,GAAG,CAACL,CAAK,CAAC,GAIJQ,IAAsBP;AAAA,IAC3B,MACChB,EAAW;AAAA,MAAO,CAACwB,MAClBA,EAAE,QAAQ,SAAST,EAAM,SAAS,IAAIG,EAAU,SAAS;AAAA,IAAA;AAAA,IAE3D,CAACH,EAAM,QAAQG,EAAU,MAAM;AAAA,EAAA,GAE1BO,IACLF,EAAoB,WAAW,IAAIA,EAAoB,CAAC,EAAE,MAAM,MAC3DG,IAAiBlB,KAAYiB,GAI7BE,IAAwDD,IAE3DA,MAAmB,aACnBD,IACC,OACA,EAAE,OAAO,aAAa,QAAQ,MAAMhB,EAAY,IAAI,EAAA,IACrDE,IACA,EAAE,OAAOiB,EAAgBjB,CAAM,GAAG,QAAQ,MAAMC,EAAU,IAAI,EAAA,IAC9Da,IACA,OACA,EAAE,OAAO,SAAS,QAAQ,MAAMhB,EAAY,IAAI,EAAA,IAThD,MAYGoB,IAAyBb,EAAQ,MACjCU,IAWDA,MAAmB,aACfR,EAAU,IAAI,CAAChB,OAAU;AAAA,IAC/B,IAAI,OAAOA,EAAK,EAAE;AAAA,IAClB,OAAOC,EAASD,CAAI;AAAA,IACpB,UAAU;AAAA,IACV,YAAY,MAAMI,EAASJ,CAAI;AAAA,EAAA,EAC9B,IAEES,IAQEI,EACL,OAAO,CAACM,OAAOpB,EAAOoB,CAAC,GAAG,UAAU,aAAaV,CAAM,EACvD,IAAI,CAACT,OAAU;AAAA,IACf,IAAI,OAAOA,EAAK,EAAE;AAAA,IAClB,OAAOC,EAASD,CAAI;AAAA,IACpB,UAAU;AAAA,IACV,YAAY,MAAMI,EAASJ,CAAI;AAAA,EAAA,EAC9B,IAdKiB,EAAQ,IAAI,CAACG,OAAO;AAAA,IAC1B,IAAIA;AAAA,IACJ,OAAOM,EAAgBN,CAAC;AAAA,IACxB,UAAU;AAAA,IACV,YAAY,MAAMV,EAAUU,CAAC;AAAA,EAAA,EAC5B,IAxBKC,EAAoB,IAAI,CAACC,OAAO;AAAA,IACtC,IAAIA,EAAE;AAAA,IACN,OAAOA,EAAE;AAAA,IACT,UAAU;AAAA,IACV,YAAY,MAAM;AACjB,MAAAf,EAAYe,EAAE,GAAG,GACjBZ,EAAU,IAAI;AAAA,IACf;AAAA,EAAA,EACC,GA0BD;AAAA,IACFc;AAAA,IACAH;AAAA,IACAZ;AAAA,IACAI;AAAA,IACAG;AAAA,IACAC;AAAA,IACAb;AAAA,EAAA,CACA;AAGD,EAAAwB,EAAU,MAAMhB,EAAe,CAAC,GAAG,CAACY,GAAgBf,GAAQN,CAAK,CAAC;AAGlE,QAAM0B,IAASC,EAAO,EAAE,MAAAH,GAAM,aAAAhB,GAAa,QAAAc,GAAQ;AACnD,EAAAI,EAAO,UAAU,EAAE,MAAAF,GAAM,aAAAhB,GAAa,QAAAc,EAAA,GAEtCG,EAAU,MAAM;AACf,QAAKvB;AAGL,aAAAA,EAAmB,CAAC0B,MAAU;AAC7B,cAAM,EAAE,MAAMC,GAAG,aAAajB,GAAG,QAAQkB,MAAMJ,EAAO;AACtD,gBAAQE,EAAM,KAAA;AAAA,UACb,KAAK;AACJ,mBAAIC,EAAE,UAAQpB,EAAe,CAACsB,OAAOA,IAAI,KAAKF,EAAE,MAAM,GAC/C;AAAA,UACR,KAAK;AACJ,mBAAIA,EAAE,UAAQpB,EAAe,CAACsB,OAAOA,IAAIF,EAAE,SAAS,KAAKA,EAAE,MAAM,GAC1D;AAAA,UACR,KAAK;AAAA,UACL,KAAK;AACJ,mBAAAA,EAAEjB,CAAC,GAAG,WAAA,GACC;AAAA,UACR,KAAK;AACJ,mBAAIkB,KACHA,EAAE,OAAA,GACK,MAED;AAAA,UACR;AACC,mBAAO;AAAA,QAAA;AAAA,MAEV,CAAC,GACM,MAAM5B,EAAmB,IAAI;AAAA,EACrC,GAAG,CAACA,CAAkB,CAAC;AAEvB,QAAM8B,IAAWX,IAEdG,EAAK,UAAU,CAACA,EAAK,CAAC,EAAE,WACxB,UACA,YAHA;AAKH,SACC,gBAAAS,EAACC,GAAA,EAAW,WAAW,0CAA0CF,CAAO,IACtE,UAAA;AAAA,IAAAV,KACA,gBAAAW;AAAA,MAACE;AAAA,MAAA;AAAA,QACA,MAAK;AAAA,QACL,SAASb,EAAO;AAAA,QAChB,OAAO,EAAE,YAAYc,EAAO,QAAQ,QAAA;AAAA,QAEpC,UAAA;AAAA,UAAA,gBAAAC,EAACC,GAAA,EAAY,OAAO,IAAI,QAAQ,IAAI;AAAA,4BACnCC,GAAA,EAAW,UAAA;AAAA,YAAA;AAAA,YAAEjB,EAAO;AAAA,UAAA,EAAA,CAAM;AAAA,QAAA;AAAA,MAAA;AAAA,IAAA;AAAA,IAG5BE,EAAK,WAAW,IAChB,gBAAAa,EAACG,KACC,UAAAnB,MAAmB,aACjB,4BACA,qBAAA,CACJ,IAEAG,EAAK,IAAI,CAACiB,GAAK7B,MACd,gBAAAqB;AAAA,MAACS;AAAA,MAAA;AAAA,QAEA,MAAK;AAAA,QACL,SAAS9B,MAAMJ;AAAA,QACf,cAAc,MAAMC,EAAeG,CAAC;AAAA,QACpC,SAAS6B,EAAI;AAAA,QAEb,UAAA;AAAA,UAAA,gBAAAJ,EAACM,KAAc,OAAOP,EAAO,QAAQ,SACnC,YAAI,OACN;AAAA,UACCK,EAAI,YAAY,gBAAAJ,EAACO,KAAa,OAAO,IAAI,QAAQ,GAAA,CAAI;AAAA,QAAA;AAAA,MAAA;AAAA,MATjDH,EAAI;AAAA,IAAA,CAWV;AAAA,EAAA,GAEH;AAEF,GAEMP,IAAaW,EAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,eAMXT,EAAO,QAAQ,QAAQ;AAAA,qBACjBA,EAAO,OAAO,OAAO;AAAA;AAAA;AAAA,GAKpCM,IAAYG,EAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,4BASGT,EAAO,OAAO,OAAO;AAAA,eAClC,CAACL,MAAOA,EAAE,UAAUK,EAAO,QAAQ,UAAU,aAAc;AAAA;AAAA;AAAA;AAAA;AAAA,gBAK1DA,EAAO,QAAQ,OAAO;AAAA;AAAA,GAIhCD,IAAaU,EAAO;AAAA;AAAA;AAAA;AAAA;AAAA,4BAKET,EAAO,OAAO,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,GAU3CI,IAAcK,EAAO;AAAA;AAAA;AAAA;AAAA,UAIjBT,EAAO,QAAQ,SAAS;AAAA;"}
+{"version":3,"file":"MentionPicker.js","sources":["../../../../../src/components/agent-builder/components/MentionPicker.tsx"],"sourcesContent":["// import ChevronLeft from '@src/assets/icons/chevronLeft.svg';\nimport ChevronRight from '@src/assets/icons/chevronRight.svg';\nimport SearchIcon from '@src/assets/icons/searchIcon.svg';\nimport type { MentionDropdownRenderProps, MentionItem } from '@src/editor';\nimport SvgArrowLeft from '@src/icons/Arrows/Normal arrows/ArrowLeft';\nimport React, { useEffect, useMemo, useRef, useState } from 'react';\nimport styled from 'styled-components';\nimport { BodySecondary, TitleSmall } from '@src/components/TypographyStyle';\nimport { COLORS } from '@src/constants/Theme';\nimport {\n\tMentionKindMeta,\n\ttoolSourceLabel,\n} from '../utils/mentionSerialization';\nimport { SOURCE_ICONS, SourceIcon } from '../utils/sourceIcons';\n\ntype Category = 'tool' | 'subagent';\n\nconst CATEGORIES: { key: Category; label: string }[] = [\n\t{ key: 'tool', label: 'Tools' },\n\t{ key: 'subagent', label: 'Sub-agent' },\n];\n\nconst metaOf = (item: MentionItem): MentionKindMeta | undefined =>\n\titem.meta as unknown as MentionKindMeta | undefined;\n\nconst rowLabel = (item: MentionItem): string =>\n\tmetaOf(item)?.plainLabel ?? item.label;\n\n/** One navigable row in the picker's current view. */\ntype PickerRowModel = {\n\tid: string;\n\tlabel: string;\n\t/** Drill-in rows show a chevron; leaf (selectable) rows do not. */\n\tdrillsIn: boolean;\n\t/** Leading brand glyph (source rows only). */\n\ticon?: SourceIcon;\n\t/** Brand-coloured \"Create new\" action row (not a selectable item). */\n\tisCreate?: boolean;\n\tonActivate: () => void;\n};\n\n/** Sentinel id for the sub-agent \"Create new\" row. */\nconst CREATE_SUBAGENT_ID = '__bik_create_subagent__';\n\ntype MentionPickerProps = MentionDropdownRenderProps & {\n\t/** Opens the create-sub-agent drawer (shows a \"Create new\" row in the Sub-agent view). */\n\tonCreateSubAgent?: () => void;\n};\n\n/**\n * `@` reference picker. Drills:\n *   root → Tools → <source> (Manifest / Shopify / …) → tool\n *        → Sub-agent → sub-agent\n * (\"Add condition\" and \"Variables\" are intentionally not shown yet.)\n *\n * Owns keyboard navigation (↑/↓ move, →/Enter activate, ← go back) over the\n * CURRENTLY visible rows — registered with the editor via `registerKeyHandler`.\n */\nexport const MentionPicker: React.FC<MentionPickerProps> = ({\n\titems,\n\tonSelect,\n\tregisterKeyHandler,\n\tonClose,\n\tonCreateSubAgent,\n}) => {\n\tconst [category, setCategory] = useState<Category | null>(null);\n\tconst [source, setSource] = useState<string | null>(null);\n\tconst [activeIndex, setActiveIndex] = useState(0);\n\t// Search box shown inside a source's tool list (Manifest / Shopify); filters\n\t// that source's tools by name.\n\tconst [search, setSearch] = useState('');\n\n\tconst tools = useMemo(\n\t\t() => items.filter((i) => metaOf(i)?.kind === 'tool'),\n\t\t[items],\n\t);\n\tconst subAgents = useMemo(\n\t\t() => items.filter((i) => metaOf(i)?.kind === 'subagent'),\n\t\t[items],\n\t);\n\tconst sources = useMemo(() => {\n\t\tconst acc: string[] = [];\n\t\ttools.forEach((t) => {\n\t\t\tconst s = metaOf(t)?.source ?? 'other';\n\t\t\tif (!acc.includes(s)) {\n\t\t\t\tacc.push(s);\n\t\t\t}\n\t\t});\n\t\treturn acc;\n\t}, [tools]);\n\n\t// Show a category when it has items — and ALWAYS show Sub-agent when creating\n\t// one is possible, so an agent with no sub-agents yet still gets the root\n\t// \"Tools / Sub-agent\" choice (with a \"Create new\" inside). When only one is\n\t// available (e.g. the sub-agent drawer offers tools only) the selector is skipped.\n\tconst availableCategories = useMemo(\n\t\t() =>\n\t\t\tCATEGORIES.filter((c) =>\n\t\t\t\tc.key === 'tool'\n\t\t\t\t\t? tools.length > 0\n\t\t\t\t\t: subAgents.length > 0 || !!onCreateSubAgent,\n\t\t\t),\n\t\t[tools.length, subAgents.length, onCreateSubAgent],\n\t);\n\tconst soleCategory =\n\t\tavailableCategories.length === 1 ? availableCategories[0].key : null;\n\tconst activeCategory = category ?? soleCategory;\n\n\t// Title shown above the current view, and whether we can go back a level.\n\t// With a sole category there is no root to go back to (no category header).\n\t// In a source detail view the leading glyph is the source icon (per design),\n\t// otherwise it's a back chevron.\n\tconst header: {\n\t\ttitle: string;\n\t\tonBack: () => void;\n\t\ticon?: SourceIcon;\n\t} | null = !activeCategory\n\t\t? null\n\t\t: activeCategory === 'subagent'\n\t\t? soleCategory\n\t\t\t? null\n\t\t\t: { title: 'Sub-agent', onBack: () => setCategory(null) }\n\t\t: source\n\t\t? {\n\t\t\t\ttitle: toolSourceLabel(source),\n\t\t\t\tonBack: () => setSource(null),\n\t\t\t\ticon: SOURCE_ICONS[source],\n\t\t  }\n\t\t: soleCategory\n\t\t? null\n\t\t: { title: 'Tools', onBack: () => setCategory(null) };\n\n\t// Build the navigable rows for the current view.\n\tconst rows: PickerRowModel[] = useMemo(() => {\n\t\tif (!activeCategory) {\n\t\t\treturn availableCategories.map((c) => ({\n\t\t\t\tid: c.key,\n\t\t\t\tlabel: c.label,\n\t\t\t\tdrillsIn: true,\n\t\t\t\tonActivate: () => {\n\t\t\t\t\tsetCategory(c.key);\n\t\t\t\t\tsetSource(null);\n\t\t\t\t},\n\t\t\t}));\n\t\t}\n\t\tif (activeCategory === 'subagent') {\n\t\t\tconst leaves: PickerRowModel[] = subAgents.map((item) => ({\n\t\t\t\tid: String(item.id),\n\t\t\t\tlabel: rowLabel(item),\n\t\t\t\tdrillsIn: false,\n\t\t\t\tonActivate: () => onSelect(item),\n\t\t\t}));\n\t\t\t// \"Create new\" opens the drawer — first dismiss the menu (strips the \"@\").\n\t\t\tif (onCreateSubAgent) {\n\t\t\t\tleaves.push({\n\t\t\t\t\tid: CREATE_SUBAGENT_ID,\n\t\t\t\t\tlabel: 'Create new',\n\t\t\t\t\tdrillsIn: false,\n\t\t\t\t\tisCreate: true,\n\t\t\t\t\tonActivate: () => {\n\t\t\t\t\t\tonClose?.();\n\t\t\t\t\t\tonCreateSubAgent();\n\t\t\t\t\t},\n\t\t\t\t});\n\t\t\t}\n\t\t\treturn leaves;\n\t\t}\n\t\tif (!source) {\n\t\t\treturn sources.map((s) => ({\n\t\t\t\tid: s,\n\t\t\t\tlabel: toolSourceLabel(s),\n\t\t\t\tdrillsIn: true,\n\t\t\t\ticon: SOURCE_ICONS[s],\n\t\t\t\tonActivate: () => setSource(s),\n\t\t\t}));\n\t\t}\n\t\tconst q = search.trim().toLowerCase();\n\t\treturn tools\n\t\t\t.filter((t) => (metaOf(t)?.source ?? 'other') === source)\n\t\t\t.filter((t) => !q || rowLabel(t).toLowerCase().includes(q))\n\t\t\t.map((item) => ({\n\t\t\t\tid: String(item.id),\n\t\t\t\tlabel: rowLabel(item),\n\t\t\t\tdrillsIn: false,\n\t\t\t\tonActivate: () => onSelect(item),\n\t\t\t}));\n\t}, [\n\t\tactiveCategory,\n\t\tavailableCategories,\n\t\tsource,\n\t\tsearch,\n\t\ttools,\n\t\tsubAgents,\n\t\tsources,\n\t\tonSelect,\n\t\tonClose,\n\t\tonCreateSubAgent,\n\t]);\n\n\t// Reset highlight whenever the view (or filtered result set) changes.\n\tuseEffect(() => setActiveIndex(0), [activeCategory, source, search, items]);\n\t// Clear the search box when leaving a source view.\n\tuseEffect(() => setSearch(''), [activeCategory, source]);\n\n\t// Keep the latest rows/index reachable from the stable key handler.\n\tconst navRef = useRef({ rows, activeIndex, header });\n\tnavRef.current = { rows, activeIndex, header };\n\n\tuseEffect(() => {\n\t\tif (!registerKeyHandler) {\n\t\t\treturn;\n\t\t}\n\t\tregisterKeyHandler((event) => {\n\t\t\tconst { rows: r, activeIndex: i, header: h } = navRef.current;\n\t\t\tswitch (event.key) {\n\t\t\t\tcase 'ArrowDown':\n\t\t\t\t\tif (r.length) setActiveIndex((p) => (p + 1) % r.length);\n\t\t\t\t\treturn true;\n\t\t\t\tcase 'ArrowUp':\n\t\t\t\t\tif (r.length) setActiveIndex((p) => (p + r.length - 1) % r.length);\n\t\t\t\t\treturn true;\n\t\t\t\tcase 'ArrowRight':\n\t\t\t\tcase 'Enter':\n\t\t\t\t\tr[i]?.onActivate();\n\t\t\t\t\treturn true;\n\t\t\t\tcase 'ArrowLeft':\n\t\t\t\t\tif (h) {\n\t\t\t\t\t\th.onBack();\n\t\t\t\t\t\treturn true;\n\t\t\t\t\t}\n\t\t\t\t\treturn false;\n\t\t\t\tdefault:\n\t\t\t\t\treturn false;\n\t\t\t}\n\t\t});\n\t\treturn () => registerKeyHandler(null);\n\t}, [registerKeyHandler]);\n\n\tconst variant = !activeCategory\n\t\t? 'categories'\n\t\t: rows.length && !rows[0].drillsIn\n\t\t? 'items'\n\t\t: 'sources';\n\n\t// Search lives inside a source's tool list (Manifest / Shopify).\n\tconst showSearch = activeCategory === 'tool' && !!source;\n\n\treturn (\n\t\t<PickerCard className={`bik-mention-picker bik-mention-picker--${variant}`}>\n\t\t\t{header && (\n\t\t\t\t<PickerBack\n\t\t\t\t\ttype=\"button\"\n\t\t\t\t\tonClick={header.onBack}\n\t\t\t\t\tstyle={{ background: COLORS.surface.subdued }}\n\t\t\t\t>\n\t\t\t\t\t{header.icon ? (\n\t\t\t\t\t\tReact.createElement(header.icon.Icon, {\n\t\t\t\t\t\t\twidth: header.icon.w,\n\t\t\t\t\t\t\theight: header.icon.h,\n\t\t\t\t\t\t})\n\t\t\t\t\t) : (\n\t\t\t\t\t\t<SvgArrowLeft\n\t\t\t\t\t\t\twidth={20}\n\t\t\t\t\t\t\theight={20}\n\t\t\t\t\t\t\tcolor={COLORS.content.primary}\n\t\t\t\t\t\t/>\n\t\t\t\t\t)}\n\t\t\t\t\t<TitleSmall> {header.title}</TitleSmall>\n\t\t\t\t</PickerBack>\n\t\t\t)}\n\t\t\t{showSearch && (\n\t\t\t\t<PickerSearchRow>\n\t\t\t\t\t<SearchIcon\n\t\t\t\t\t\twidth={20}\n\t\t\t\t\t\theight={20}\n\t\t\t\t\t\tcolor={COLORS.content.placeholder}\n\t\t\t\t\t/>\n\t\t\t\t\t<PickerSearchInput\n\t\t\t\t\t\t// Focus on open so the user can type immediately (appears only\n\t\t\t\t\t\t// after they drill into a source).\n\t\t\t\t\t\t// eslint-disable-next-line jsx-a11y/no-autofocus\n\t\t\t\t\t\tautoFocus\n\t\t\t\t\t\tvalue={search}\n\t\t\t\t\t\tplaceholder=\"Search\"\n\t\t\t\t\t\tdata-test=\"mention-picker-search\"\n\t\t\t\t\t\tonChange={(e) => setSearch(e.target.value)}\n\t\t\t\t\t\tonKeyDown={(e) => {\n\t\t\t\t\t\t\tif (!rows.length) {\n\t\t\t\t\t\t\t\treturn;\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\tif (e.key === 'ArrowDown') {\n\t\t\t\t\t\t\t\te.preventDefault();\n\t\t\t\t\t\t\t\tsetActiveIndex((p) => (p + 1) % rows.length);\n\t\t\t\t\t\t\t} else if (e.key === 'ArrowUp') {\n\t\t\t\t\t\t\t\te.preventDefault();\n\t\t\t\t\t\t\t\tsetActiveIndex((p) => (p + rows.length - 1) % rows.length);\n\t\t\t\t\t\t\t} else if (e.key === 'Enter') {\n\t\t\t\t\t\t\t\te.preventDefault();\n\t\t\t\t\t\t\t\trows[activeIndex]?.onActivate();\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</PickerSearchRow>\n\t\t\t)}\n\t\t\t{rows.length === 0 ? (\n\t\t\t\t<PickerEmpty>\n\t\t\t\t\t{activeCategory === 'subagent'\n\t\t\t\t\t\t? 'No sub-agents available'\n\t\t\t\t\t\t: 'No tools available'}\n\t\t\t\t</PickerEmpty>\n\t\t\t) : (\n\t\t\t\trows.map((row, i) => (\n\t\t\t\t\t<PickerRow\n\t\t\t\t\t\tkey={row.id}\n\t\t\t\t\t\ttype=\"button\"\n\t\t\t\t\t\t$active={i === activeIndex}\n\t\t\t\t\t\tonMouseEnter={() => setActiveIndex(i)}\n\t\t\t\t\t\tonClick={row.onActivate}\n\t\t\t\t\t>\n\t\t\t\t\t\t{row.isCreate ? (\n\t\t\t\t\t\t\t<CreateRowText>{row.label}</CreateRowText>\n\t\t\t\t\t\t) : (\n\t\t\t\t\t\t\t<>\n\t\t\t\t\t\t\t\t<PickerRowMain>\n\t\t\t\t\t\t\t\t\t{row.icon &&\n\t\t\t\t\t\t\t\t\t\tReact.createElement(row.icon.Icon, {\n\t\t\t\t\t\t\t\t\t\t\twidth: row.icon.w,\n\t\t\t\t\t\t\t\t\t\t\theight: row.icon.h,\n\t\t\t\t\t\t\t\t\t\t})}\n\t\t\t\t\t\t\t\t\t<BodySecondary color={COLORS.content.primary}>\n\t\t\t\t\t\t\t\t\t\t{row.label}\n\t\t\t\t\t\t\t\t\t</BodySecondary>\n\t\t\t\t\t\t\t\t</PickerRowMain>\n\t\t\t\t\t\t\t\t{row.drillsIn && <ChevronRight width={12} height={12} />}\n\t\t\t\t\t\t\t</>\n\t\t\t\t\t\t)}\n\t\t\t\t\t</PickerRow>\n\t\t\t\t))\n\t\t\t)}\n\t\t</PickerCard>\n\t);\n};\n\nconst PickerCard = styled.div`\n\tdisplay: flex;\n\tflex-direction: column;\n\tmin-width: 240px;\n\tmax-height: 280px;\n\toverflow-y: auto;\n\tbackground: ${COLORS.surface.standard};\n\tborder: 1px solid ${COLORS.stroke.primary};\n\tborder-radius: 4px;\n\tbox-shadow: 0px -2px 8px 0px #0000001f;\n`;\n\n// Search box at the top of a source's tool list (Manifest / Shopify).\nconst PickerSearchRow = styled.div`\n\tdisplay: flex;\n\talign-items: center;\n\tgap: 8px;\n\tpadding: 10px 12px;\n\tborder-bottom: 1px solid ${COLORS.stroke.primary};\n`;\n\nconst PickerSearchInput = styled.input`\n\tflex: 1;\n\tmin-width: 0;\n\tborder: none;\n\toutline: none;\n\tbackground: transparent;\n\tfont-family: Inter;\n\tfont-size: 14px;\n\tcolor: ${COLORS.content.primary};\n\n\t&::placeholder {\n\t\tcolor: ${COLORS.content.placeholder};\n\t}\n`;\n\nconst PickerRow = styled.button<{ $active?: boolean }>`\n\tdisplay: flex;\n\tjustify-content: space-between;\n\talign-items: center;\n\tgap: 2px;\n\twidth: 100%;\n\tpadding: 8px 10px;\n\theight: 48px;\n\tborder: none;\n\tborder-bottom: 1px solid ${COLORS.stroke.primary};\n\tbackground: ${(p) => (p.$active ? COLORS.surface.subdued : 'transparent')};\n\tcursor: pointer;\n\ttext-align: left;\n\n\t&:hover {\n\t\tbackground: ${COLORS.surface.subdued};\n\t}\n`;\n\n// Left cluster: leading source glyph + label (chevron stays right via PickerRow).\nconst PickerRowMain = styled.div`\n\tdisplay: flex;\n\talign-items: center;\n\tgap: 12px;\n\tmin-width: 0;\n`;\n\n// \"Create new\" — centered brand text, no icon (matches the side-panel dropdown).\nconst CreateRowText = styled.div`\n\twidth: 100%;\n\ttext-align: center;\n\tcolor: ${COLORS.content.brand};\n\tfont-family: Inter;\n\tfont-size: 14px;\n\tfont-weight: 600;\n`;\n\nconst PickerBack = styled.button`\n\tdisplay: flex;\n\talign-items: center;\n\tpadding: 12px 16px;\n\tborder: none;\n\tborder-bottom: 1px solid ${COLORS.stroke.primary};\n\tbackground: transparent;\n\tcursor: pointer;\n\tfont-family: Inter;\n\tfont-size: 12px;\n\tfont-weight: 600;\n\theight: 48px;\n\tgap: 4px;\n`;\n\nconst PickerEmpty = styled.div`\n\tpadding: 12px 10px;\n\tfont-family: Inter;\n\tfont-size: 13px;\n\tcolor: ${COLORS.content.secondary};\n`;\n"],"names":["CATEGORIES","metaOf","item","rowLabel","CREATE_SUBAGENT_ID","MentionPicker","items","onSelect","registerKeyHandler","onClose","onCreateSubAgent","category","setCategory","useState","source","setSource","activeIndex","setActiveIndex","search","setSearch","tools","useMemo","i","subAgents","sources","acc","t","s","availableCategories","c","soleCategory","activeCategory","header","toolSourceLabel","SOURCE_ICONS","rows","leaves","q","useEffect","navRef","useRef","event","r","h","p","variant","showSearch","jsxs","PickerCard","PickerBack","COLORS","React","jsx","SvgArrowLeft","TitleSmall","PickerSearchRow","SearchIcon","PickerSearchInput","e","PickerEmpty","row","PickerRow","CreateRowText","Fragment","PickerRowMain","BodySecondary","ChevronRight","styled"],"mappings":"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"}

package/dist/esm/components/agent-builder/components/SelectableListSection.d.ts

@@ -1,8 +1,17 @@
 import { default as React } from 'react';
 import { SingleOption } from '../../dropdown/type';
+import { SourceIcon } from '../utils/sourceIcons';
 export interface SelectableItem {
     id: string;
     label: string;
+    /** Leading brand glyph (e.g. a tool's source icon). */
+    icon?: SourceIcon;
+}
+/** A tool source for the empty-state picker (Tools): a button → its searchable list. */
+export interface SourceGroup {
+    source: string;
+    label: string;
+    options: SingleOption[];
 }
 interface SelectableListSectionProps {
     title: string;
@@ -27,10 +36,17 @@ interface SelectableListSectionProps {
         onSelect: () => void;
     };
     /**
-     * When provided, each row's kebab menu gains a "Configure" action (above
-     * "Delete"). Omit for tools (Delete only).
+     * When provided, each row shows an edit (Configure) icon next to Delete.
+     * Omit for tools (Delete only).
      */
     onConfigure?: (id: string) => void;
+    /**
+     * Tool sources (e.g. Manifest / Shopify). When set, the empty state shows a
+     * button per source; clicking one reveals a searchable dropdown of just that
+     * source's options. Selecting calls `onAdd`. Takes precedence over the plain
+     * `addableOptions` dropdown.
+     */
+    sourceGroups?: SourceGroup[];
 }
 export declare const SelectableListSection: React.FC<SelectableListSectionProps>;
 export {};