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

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

@@ -0,0 +1,39 @@
+import { MentionItem } from '../../../editor';
+import { default as React } from 'react';
+import { AgentTool } from '../AgentBuilder.model';
+type InsertFn = (kind: 'tool' | 'subagent', id: string, label?: string) => void;
+interface MentionEditorProps {
+    label: string;
+    value: string;
+    onChange: (text: string) => void;
+    maxLength: number;
+    placeholder?: string;
+    minHeight?: string;
+    /** Changing this remounts the editor with fresh content. */
+    resetKey?: string | number;
+    /** Items shown in the `@` picker (tools, and sub-agents where allowed). */
+    mentionItems: MentionItem[];
+    /** Tools used to serialise mention nodes back to `{{tool:KEY}}`. */
+    tools: AgentTool[];
+    /** Called when an item is picked from the `@` menu (to attach it upstream). */
+    onMentionSelect?: (kind: 'tool' | 'subagent', id: string) => void;
+    onFocus?: () => void;
+    /** Receives an insert-at-cursor fn (and null on unmount) for side-panel adds. */
+    registerInsert?: (fn: InsertFn | null) => void;
+    /**
+     * When set, the `@` picker's Sub-agent view shows a "Create new" row that calls
+     * this (opens the create-sub-agent drawer). Omit to hide it (e.g. the drawer's
+     * own editors, which can't nest sub-agents).
+     */
+    onCreateSubAgent?: () => void;
+    /** Optional action(s) rendered inside the shell, below the editor. */
+    action?: React.ReactNode;
+    'data-test'?: string;
+}
+/**
+ * Presentational BikEditor field with `@` mentions. Stores firebase token text
+ * (`{{tool:KEY}}` / `{{subagent:ID}}`). Context-free — both the builder's
+ * Step-3 fields and the create-sub-agent drawer compose it.
+ */
+export declare const MentionEditor: React.FC<MentionEditorProps>;
+export {};

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

@@ -0,0 +1,100 @@
+import { jsxs as i, jsx as d } from "react/jsx-runtime";
+import { useRef as B, useState as L, useCallback as j, useEffect as p, useMemo as w } from "react";
+import { TitleSmall as F, BodyCaption as N } from "../../TypographyStyle.js";
+import { COLORS as h } from "../../../constants/Theme.js";
+import { FieldBlock as _, FieldLabelRow as G, AiTextAreaShell as J } from "../AgentBuilder.styled.js";
+import { AGENT_EDITOR_STYLE as P } from "../constants/editorStyle.js";
+import { buildMentionHtml as Y, instructionsToEditorHtml as $, editorDocToInstructions as q } from "../utils/mentionSerialization.js";
+import { MentionPicker as z } from "./MentionPicker.js";
+import { BikEditor as Q } from "../../../editor/BikEditor.js";
+const ot = ({
+  label: S,
+  value: e,
+  onChange: g,
+  maxLength: a,
+  placeholder: C,
+  minHeight: x = "200px",
+  resetKey: l,
+  mentionItems: n,
+  tools: T,
+  onMentionSelect: b,
+  onFocus: E,
+  registerInsert: r,
+  onCreateSubAgent: k,
+  action: H,
+  ...O
+}) => {
+  const c = B(null), [R, s] = L(e.length), m = j(
+    (t, o, M) => {
+      const f = c.current;
+      if (!f)
+        return;
+      const y = n.find(
+        (u) => String(u.id) === String(o) && u.meta?.kind === t
+      ), A = M ?? y?.label ?? o;
+      f.insertInlineContent(
+        `${Y(String(o), A, t)} `
+      );
+    },
+    [n]
+  );
+  p(() => {
+    if (r)
+      return r(m), () => r(null);
+  }, [r, m]);
+  const D = w(
+    () => $(e, n),
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [l]
+  );
+  return p(
+    () => s(e.length),
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [l]
+  ), /* @__PURE__ */ i(_, { children: [
+    /* @__PURE__ */ i(G, { children: [
+      /* @__PURE__ */ d(F, { color: h.content.primary, children: S }),
+      /* @__PURE__ */ i(N, { color: h.content.secondary, children: [
+        R,
+        "/",
+        a
+      ] })
+    ] }),
+    /* @__PURE__ */ i(J, { minHeight: x, "data-test": O["data-test"], children: [
+      /* @__PURE__ */ d(
+        Q,
+        {
+          ref: c,
+          initialContent: D,
+          placeholder: C,
+          maxCharacters: a,
+          minHeight: "120px",
+          maxHeight: "320px",
+          style: { border: "none" },
+          editorStyle: P,
+          onFocus: E,
+          mentions: {
+            agents: n,
+            removeTriggerOnDismiss: !0,
+            renderDropdown: (t) => /* @__PURE__ */ d(z, { ...t, onCreateSubAgent: k }),
+            onSelect: (t) => {
+              const o = t.meta?.kind;
+              o && b?.(o, String(t.id));
+            }
+          },
+          onChange: (t) => {
+            s(t.characterCount);
+            const o = c.current?.getJSON() ?? null;
+            g(q(o, T));
+          }
+        },
+        l
+      ),
+      H
+    ] })
+  ] });
+};
+export {
+  ot as MentionEditor
+};
+//# sourceMappingURL=MentionEditor.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"MentionEditor.js","sources":["../../../../../src/components/agent-builder/components/MentionEditor.tsx"],"sourcesContent":["import { BikEditor, BikEditorRef, MentionItem } from '@src/editor';\nimport React, {\n\tuseCallback,\n\tuseEffect,\n\tuseMemo,\n\tuseRef,\n\tuseState,\n} from 'react';\nimport { BodyCaption, TitleSmall } from '@src/components/TypographyStyle';\nimport { COLORS } from '@src/constants/Theme';\nimport { AgentTool } from '../AgentBuilder.model';\nimport {\n\tAiTextAreaShell,\n\tFieldBlock,\n\tFieldLabelRow,\n} from '../AgentBuilder.styled';\nimport { AGENT_EDITOR_STYLE } from '../constants/editorStyle';\nimport {\n\tbuildMentionHtml,\n\teditorDocToInstructions,\n\tinstructionsToEditorHtml,\n\tMentionKindMeta,\n} from '../utils/mentionSerialization';\nimport { MentionPicker } from './MentionPicker';\n\ntype InsertFn = (kind: 'tool' | 'subagent', id: string, label?: string) => void;\n\ninterface MentionEditorProps {\n\tlabel: string;\n\tvalue: string;\n\tonChange: (text: string) => void;\n\tmaxLength: number;\n\tplaceholder?: string;\n\tminHeight?: string;\n\t/** Changing this remounts the editor with fresh content. */\n\tresetKey?: string | number;\n\t/** Items shown in the `@` picker (tools, and sub-agents where allowed). */\n\tmentionItems: MentionItem[];\n\t/** Tools used to serialise mention nodes back to `{{tool:KEY}}`. */\n\ttools: AgentTool[];\n\t/** Called when an item is picked from the `@` menu (to attach it upstream). */\n\tonMentionSelect?: (kind: 'tool' | 'subagent', id: string) => void;\n\tonFocus?: () => void;\n\t/** Receives an insert-at-cursor fn (and null on unmount) for side-panel adds. */\n\tregisterInsert?: (fn: InsertFn | null) => void;\n\t/**\n\t * When set, the `@` picker's Sub-agent view shows a \"Create new\" row that calls\n\t * this (opens the create-sub-agent drawer). Omit to hide it (e.g. the drawer's\n\t * own editors, which can't nest sub-agents).\n\t */\n\tonCreateSubAgent?: () => void;\n\t/** Optional action(s) rendered inside the shell, below the editor. */\n\taction?: React.ReactNode;\n\t'data-test'?: string;\n}\n\n/**\n * Presentational BikEditor field with `@` mentions. Stores firebase token text\n * (`{{tool:KEY}}` / `{{subagent:ID}}`). Context-free — both the builder's\n * Step-3 fields and the create-sub-agent drawer compose it.\n */\nexport const MentionEditor: React.FC<MentionEditorProps> = ({\n\tlabel,\n\tvalue,\n\tonChange,\n\tmaxLength,\n\tplaceholder,\n\tminHeight = '200px',\n\tresetKey,\n\tmentionItems,\n\ttools,\n\tonMentionSelect,\n\tonFocus,\n\tregisterInsert,\n\tonCreateSubAgent,\n\taction,\n\t...rest\n}) => {\n\tconst editorRef = useRef<BikEditorRef>(null);\n\tconst [count, setCount] = useState(value.length);\n\n\tconst insert = useCallback<InsertFn>(\n\t\t(kind, id, overrideLabel) => {\n\t\t\tconst editor = editorRef.current;\n\t\t\tif (!editor) {\n\t\t\t\treturn;\n\t\t\t}\n\t\t\tconst item = mentionItems.find(\n\t\t\t\t(m) =>\n\t\t\t\t\tString(m.id) === String(id) &&\n\t\t\t\t\t(m.meta as unknown as MentionKindMeta | undefined)?.kind === kind,\n\t\t\t);\n\t\t\tconst finalLabel = overrideLabel ?? item?.label ?? id;\n\t\t\teditor.insertInlineContent(\n\t\t\t\t`${buildMentionHtml(String(id), finalLabel, kind)}&nbsp;`,\n\t\t\t);\n\t\t},\n\t\t[mentionItems],\n\t);\n\n\tuseEffect(() => {\n\t\tif (!registerInsert) {\n\t\t\treturn;\n\t\t}\n\t\tregisterInsert(insert);\n\t\treturn () => registerInsert(null);\n\t}, [registerInsert, insert]);\n\n\t// Mount-only initial HTML; recomputed (editor remounted via key) on resetKey.\n\tconst initialHtml = useMemo(\n\t\t() => instructionsToEditorHtml(value, mentionItems),\n\t\t// eslint-disable-next-line react-hooks/exhaustive-deps\n\t\t[resetKey],\n\t);\n\n\tuseEffect(\n\t\t() => setCount(value.length),\n\t\t// eslint-disable-next-line react-hooks/exhaustive-deps\n\t\t[resetKey],\n\t);\n\n\treturn (\n\t\t<FieldBlock>\n\t\t\t<FieldLabelRow>\n\t\t\t\t<TitleSmall color={COLORS.content.primary}>{label}</TitleSmall>\n\t\t\t\t<BodyCaption color={COLORS.content.secondary}>\n\t\t\t\t\t{count}/{maxLength}\n\t\t\t\t</BodyCaption>\n\t\t\t</FieldLabelRow>\n\n\t\t\t<AiTextAreaShell minHeight={minHeight} data-test={rest['data-test']}>\n\t\t\t\t<BikEditor\n\t\t\t\t\tkey={resetKey}\n\t\t\t\t\tref={editorRef}\n\t\t\t\t\tinitialContent={initialHtml}\n\t\t\t\t\tplaceholder={placeholder}\n\t\t\t\t\tmaxCharacters={maxLength}\n\t\t\t\t\tminHeight=\"120px\"\n\t\t\t\t\tmaxHeight=\"320px\"\n\t\t\t\t\tstyle={{ border: 'none' }}\n\t\t\t\t\teditorStyle={AGENT_EDITOR_STYLE}\n\t\t\t\t\tonFocus={onFocus}\n\t\t\t\t\tmentions={{\n\t\t\t\t\t\tagents: mentionItems,\n\t\t\t\t\t\tremoveTriggerOnDismiss: true,\n\t\t\t\t\t\trenderDropdown: (props) => (\n\t\t\t\t\t\t\t<MentionPicker {...props} onCreateSubAgent={onCreateSubAgent} />\n\t\t\t\t\t\t),\n\t\t\t\t\t\tonSelect: (item) => {\n\t\t\t\t\t\t\tconst kind = (item.meta as unknown as MentionKindMeta | undefined)\n\t\t\t\t\t\t\t\t?.kind;\n\t\t\t\t\t\t\tif (kind) {\n\t\t\t\t\t\t\t\tonMentionSelect?.(kind, String(item.id));\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\tonChange={(snapshot) => {\n\t\t\t\t\t\tsetCount(snapshot.characterCount);\n\t\t\t\t\t\tconst doc = editorRef.current?.getJSON() ?? null;\n\t\t\t\t\t\tonChange(editorDocToInstructions(doc, tools));\n\t\t\t\t\t}}\n\t\t\t\t/>\n\t\t\t\t{action}\n\t\t\t</AiTextAreaShell>\n\t\t</FieldBlock>\n\t);\n};\n"],"names":["MentionEditor","label","value","onChange","maxLength","placeholder","minHeight","resetKey","mentionItems","tools","onMentionSelect","onFocus","registerInsert","onCreateSubAgent","action","rest","editorRef","useRef","count","setCount","useState","insert","useCallback","kind","id","overrideLabel","editor","item","m","finalLabel","buildMentionHtml","useEffect","initialHtml","useMemo","instructionsToEditorHtml","FieldBlock","jsxs","FieldLabelRow","jsx","TitleSmall","COLORS","BodyCaption","AiTextAreaShell","BikEditor","AGENT_EDITOR_STYLE","props","MentionPicker","snapshot","doc","editorDocToInstructions"],"mappings":"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"}

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

@@ -0,0 +1,19 @@
+import { default as React } from 'react';
+import { MentionFieldKey } from '../context/AgentBuilderContext';
+interface MentionFieldProps {
+    /** Which AgentValue field this editor reads / writes. */
+    fieldKey: MentionFieldKey;
+    label: string;
+    placeholder?: string;
+    maxLength: number;
+    minHeight?: string;
+    'data-test'?: string;
+}
+/**
+ * Context-bound {@link MentionEditor} for the builder's Step-3 Instructions /
+ * Guardrails. Both `@` tools and sub-agents are offered; the field registers its
+ * insert + focus with the context so side-panel adds drop a chip into whichever
+ * field was last focused, and remounts on `mentionResetKey`.
+ */
+export declare const MentionField: React.FC<MentionFieldProps>;
+export {};

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

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

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

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

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

@@ -0,0 +1,17 @@
+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
+ *        → Sub-agent → sub-agent
+ * ("Add condition" and "Variables" are intentionally not shown yet.)
+ *
+ * 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<MentionPickerProps>;
+export {};

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

@@ -0,0 +1,268 @@
+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" }
+], 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 [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
+    ),
+    [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;
+    }
+    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,
+    k,
+    p,
+    y,
+    L,
+    I,
+    _,
+    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 }, $(() => {
+    if (m)
+      return m((t) => {
+        const { rows: e, activeIndex: c, header: D } = P.current;
+        switch (t.key) {
+          case "ArrowDown":
+            return e.length && u((E) => (E + 1) % e.length), !0;
+          case "ArrowUp":
+            return e.length && u((E) => (E + e.length - 1) % e.length), !0;
+          case "ArrowRight":
+          case "Enter":
+            return e[c]?.onActivate(), !0;
+          case "ArrowLeft":
+            return D ? (D.onBack(), !0) : !1;
+          default:
+            return !1;
+        }
+      }), () => 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: a.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,
+            {
+              width: 20,
+              height: 20,
+              color: n.content.primary
+            }
+          ),
+          /* @__PURE__ */ h(Q, { children: [
+            " ",
+            a.title
+          ] })
+        ]
+      }
+    ),
+    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: 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 })
+        ] })
+      },
+      t.id
+    ))
+  ] });
+}, Y = d.div`
+	display: flex;
+	flex-direction: column;
+	min-width: 240px;
+	max-height: 280px;
+	overflow-y: auto;
+	background: ${n.surface.standard};
+	border: 1px solid ${n.stroke.primary};
+	border-radius: 4px;
+	box-shadow: 0px -2px 8px 0px #0000001f;
+`, 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;
+	gap: 2px;
+	width: 100%;
+	padding: 8px 10px;
+	height: 48px;
+	border: none;
+	border-bottom: 1px solid ${n.stroke.primary};
+	background: ${(r) => r.$active ? n.surface.subdued : "transparent"};
+	cursor: pointer;
+	text-align: left;
+
+	&:hover {
+		background: ${n.surface.subdued};
+	}
+`, 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 ${n.stroke.primary};
+	background: transparent;
+	cursor: pointer;
+	font-family: Inter;
+	font-size: 12px;
+	font-weight: 600;
+	height: 48px;
+	gap: 4px;
+`, re = d.div`
+	padding: 12px 10px;
+	font-family: Inter;
+	font-size: 13px;
+	color: ${n.content.secondary};
+`;
+export {
+  fe as MentionPicker
+};
+//# sourceMappingURL=MentionPicker.js.map

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

@@ -0,0 +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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"}

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

@@ -0,0 +1,52 @@
+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;
+    helper?: string;
+    items: SelectableItem[];
+    /**
+     * Options shown in the add dropdown. Pass ALL items (not just unselected
+     * ones) when re-picking an already-added item is allowed (e.g. to insert its
+     * mention again) — the chip list still shows each item only once.
+     */
+    addableOptions: SingleOption[];
+    onAdd: (id: string) => void;
+    onRemove: (id: string) => void;
+    dataTestPrefix: string;
+    emptyText: string;
+    /**
+     * Adds a "create new" entry at the top of the add dropdown (e.g. "Create
+     * sub-agent"). Selecting it calls `onSelect` instead of `onAdd`.
+     */
+    createOption?: {
+        label: string;
+        onSelect: () => void;
+    };
+    /**
+     * 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 {};