@bikdotai/bik-component-library 0.0.821 → 0.0.822-beta.1

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

@@ -1,24 +1,25 @@
-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 { jsxs as h, jsx as c, Fragment as F } from "react/jsx-runtime";
+import G from "../../../assets/icons/chevronRight.svg.js";
+import q from "../../../assets/icons/searchIcon.svg.js";
+import J from "../../../icons/Arrows/Normal arrows/ArrowLeft.js";
+import { useState as w, useMemo as g, useEffect as E, useRef as Q } from "react";
+import s from "styled-components";
+import { TitleSmall as V, BodySecondary as W } 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 = [
+import { toolSourceLabel as T } from "../utils/mentionSerialization.js";
+import { SOURCE_ICONS as O, renderSourceIcon as N } from "../utils/sourceIcons.js";
+const X = [
   { key: "tool", label: "Tools" },
   { key: "subagent", label: "Sub-agent" }
-], b = (r) => r.meta, R = (r) => b(r)?.plainLabel ?? r.label, X = "__bik_create_subagent__", fe = ({
+], b = (r) => r.meta, R = (r) => b(r)?.plainLabel ?? r.label, Y = "__bik_create_subagent__", ge = ({
   items: r,
   onSelect: I,
   registerKeyHandler: m,
   onClose: _,
-  onCreateSubAgent: f
+  onCreateSubAgent: f,
+  initialSource: z
 }) => {
-  const [z, S] = w(null), [l, A] = w(null), [x, u] = w(0), [k, B] = w(""), p = g(
+  const [M, S] = w(null), [l, A] = w(z ?? null), [x, u] = w(0), [k, B] = w(""), p = g(
     () => r.filter((t) => b(t)?.kind === "tool"),
     [r]
   ), y = g(
@@ -27,18 +28,18 @@ const W = [
   ), L = g(() => {
     const t = [];
     return p.forEach((e) => {
-      const c = b(e)?.source ?? "other";
-      t.includes(c) || t.push(c);
+      const a = b(e)?.source ?? "other";
+      t.includes(a) || t.push(a);
     }), t;
   }, [p]), v = g(
-    () => W.filter(
+    () => X.filter(
       (t) => t.key === "tool" ? p.length > 0 : y.length > 0 || !!f
     ),
     [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),
+  ), C = v.length === 1 ? v[0].key : null, i = M ?? C, d = i ? i === "subagent" ? C ? null : { title: "Sub-agent", onBack: () => S(null) } : l ? {
+    title: T(l),
     onBack: () => A(null),
-    icon: N[l]
+    icon: O[l]
   } : C ? null : { title: "Tools", onBack: () => S(null) } : null, o = g(() => {
     if (!i)
       return v.map((e) => ({
@@ -50,14 +51,14 @@ const W = [
         }
       }));
     if (i === "subagent") {
-      const e = y.map((c) => ({
-        id: String(c.id),
-        label: R(c),
+      const e = y.map((a) => ({
+        id: String(a.id),
+        label: R(a),
         drillsIn: !1,
-        onActivate: () => I(c)
+        onActivate: () => I(a)
       }));
       return f && e.push({
-        id: X,
+        id: Y,
         label: "Create new",
         drillsIn: !1,
         isCreate: !0,
@@ -69,9 +70,9 @@ const W = [
     if (!l)
       return L.map((e) => ({
         id: e,
-        label: O(e),
+        label: T(e),
         drillsIn: !0,
-        icon: N[e],
+        icon: O[e],
         onActivate: () => A(e)
       }));
     const t = k.trim().toLowerCase();
@@ -93,20 +94,20 @@ const W = [
     _,
     f
   ]);
-  $(() => 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 }, $(() => {
+  E(() => u(0), [i, l, k, r]), E(() => B(""), [i, l]);
+  const P = Q({ rows: o, activeIndex: x, header: d });
+  P.current = { rows: o, activeIndex: x, header: d }, E(() => {
     if (m)
       return m((t) => {
-        const { rows: e, activeIndex: c, header: D } = P.current;
+        const { rows: e, activeIndex: a, header: D } = P.current;
         switch (t.key) {
           case "ArrowDown":
-            return e.length && u((E) => (E + 1) % e.length), !0;
+            return e.length && u(($) => ($ + 1) % e.length), !0;
           case "ArrowUp":
-            return e.length && u((E) => (E + e.length - 1) % e.length), !0;
+            return e.length && u(($) => ($ + e.length - 1) % e.length), !0;
           case "ArrowRight":
           case "Enter":
-            return e[c]?.onActivate(), !0;
+            return e[a]?.onActivate(), !0;
           case "ArrowLeft":
             return D ? (D.onBack(), !0) : !1;
           default:
@@ -114,44 +115,41 @@ const W = [
         }
       }), () => 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,
+  const U = i ? o.length && !o[0].drillsIn ? "items" : "sources" : "categories", j = i === "tool" && !!l;
+  return /* @__PURE__ */ h(Z, { className: `bik-mention-picker bik-mention-picker--${U}`, children: [
+    d && /* @__PURE__ */ h(
+      re,
       {
         type: "button",
-        onClick: a.onBack,
+        onClick: d.onBack,
         style: { background: n.surface.subdued },
         children: [
-          a.icon ? T.createElement(a.icon.Icon, {
-            width: a.icon.w,
-            height: a.icon.h
-          }) : /* @__PURE__ */ s(
-            q,
+          d.icon ? N(d.icon) : /* @__PURE__ */ c(
+            J,
             {
               width: 20,
               height: 20,
               color: n.content.primary
             }
           ),
-          /* @__PURE__ */ h(Q, { children: [
+          /* @__PURE__ */ h(V, { children: [
             " ",
-            a.title
+            d.title
           ] })
         ]
       }
     ),
-    U && /* @__PURE__ */ h(Z, { children: [
-      /* @__PURE__ */ s(
-        G,
+    j && /* @__PURE__ */ h(K, { children: [
+      /* @__PURE__ */ c(
+        q,
         {
           width: 20,
           height: 20,
           color: n.content.placeholder
         }
       ),
-      /* @__PURE__ */ s(
-        K,
+      /* @__PURE__ */ c(
+        H,
         {
           autoFocus: !0,
           value: k,
@@ -164,28 +162,25 @@ const W = [
         }
       )
     ] }),
-    o.length === 0 ? /* @__PURE__ */ s(re, { children: i === "subagent" ? "No sub-agents available" : "No tools available" }) : o.map((t, e) => /* @__PURE__ */ s(
-      H,
+    o.length === 0 ? /* @__PURE__ */ c(oe, { children: i === "subagent" ? "No sub-agents available" : "No tools available" }) : o.map((t, e) => /* @__PURE__ */ c(
+      ee,
       {
         type: "button",
         $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 })
+        children: t.isCreate ? /* @__PURE__ */ c(ne, { children: t.label }) : /* @__PURE__ */ h(F, { children: [
+          /* @__PURE__ */ h(te, { children: [
+            N(t.icon),
+            /* @__PURE__ */ c(W, { color: n.content.primary, children: t.label })
           ] }),
-          t.drillsIn && /* @__PURE__ */ s(F, { width: 12, height: 12 })
+          t.drillsIn && /* @__PURE__ */ c(G, { width: 12, height: 12 })
         ] })
       },
       t.id
     ))
   ] });
-}, Y = d.div`
+}, Z = s.div`
 	display: flex;
 	flex-direction: column;
 	min-width: 240px;
@@ -195,13 +190,13 @@ const W = [
 	border: 1px solid ${n.stroke.primary};
 	border-radius: 4px;
 	box-shadow: 0px -2px 8px 0px #0000001f;
-`, Z = d.div`
+`, K = s.div`
 	display: flex;
 	align-items: center;
 	gap: 8px;
 	padding: 10px 12px;
 	border-bottom: 1px solid ${n.stroke.primary};
-`, K = d.input`
+`, H = s.input`
 	flex: 1;
 	min-width: 0;
 	border: none;
@@ -214,7 +209,7 @@ const W = [
 	&::placeholder {
 		color: ${n.content.placeholder};
 	}
-`, H = d.button`
+`, ee = s.button`
 	display: flex;
 	justify-content: space-between;
 	align-items: center;
@@ -231,19 +226,19 @@ const W = [
 	&:hover {
 		background: ${n.surface.subdued};
 	}
-`, ee = d.div`
+`, te = s.div`
 	display: flex;
 	align-items: center;
 	gap: 12px;
 	min-width: 0;
-`, te = d.div`
+`, ne = s.div`
 	width: 100%;
 	text-align: center;
 	color: ${n.content.brand};
 	font-family: Inter;
 	font-size: 14px;
 	font-weight: 600;
-`, ne = d.button`
+`, re = s.button`
 	display: flex;
 	align-items: center;
 	padding: 12px 16px;
@@ -256,13 +251,13 @@ const W = [
 	font-weight: 600;
 	height: 48px;
 	gap: 4px;
-`, re = d.div`
+`, oe = s.div`
 	padding: 12px 10px;
 	font-family: Inter;
 	font-size: 13px;
 	color: ${n.content.secondary};
 `;
 export {
-  fe as MentionPicker
+  ge 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 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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"}
+{"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 {\n\trenderSourceIcon,\n\tSOURCE_ICONS,\n\tSourceIcon,\n} 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\t/**\n\t * Open already drilled into this tool source (e.g. `'shopify'`) — its tool list\n\t * is shown immediately. */\n\tinitialSource?: string;\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\tinitialSource,\n}) => {\n\tconst [category, setCategory] = useState<Category | null>(null);\n\tconst [source, setSource] = useState<string | null>(initialSource ?? 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\trenderSourceIcon(header.icon)\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{renderSourceIcon(row.icon)}\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","initialSource","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","renderSourceIcon","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,3 +1,4 @@
+import { MentionItem } from '../../../editor';
 import { default as React } from 'react';
 import { SingleOption } from '../../dropdown/type';
 import { SourceIcon } from '../utils/sourceIcons';
@@ -47,6 +48,15 @@ interface SelectableListSectionProps {
      * `addableOptions` dropdown.
      */
     sourceGroups?: SourceGroup[];
+    /**
+     * When provided, the header "+" opens the same `@` reference picker used in the
+     * Instructions editor (a {@link MentionPicker} popover) instead of the inline
+     * select dropdown. Pass the items for THIS section only (tools OR sub-agents) —
+     * the picker auto-drills into the single category. Selecting a row calls
+     * `onAdd(id)`; the picker's "Create new" row (sub-agents) calls
+     * `createOption.onSelect`.
+     */
+    mentionItems?: MentionItem[];
 }
 export declare const SelectableListSection: React.FC<SelectableListSectionProps>;
 export {};