@bikdotai/bik-component-library 0.0.821-beta.4 → 0.0.821-beta.6

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

@@ -0,0 +1,99 @@
+import { jsxs as i, jsx as d } from "react/jsx-runtime";
+import { useRef as A, useState as B, useCallback as L, useEffect as p, useMemo as j } from "react";
+import { TitleSmall as w, BodyCaption as F } from "../../TypographyStyle.js";
+import { COLORS as h } from "../../../constants/Theme.js";
+import { FieldBlock as N, FieldLabelRow as _, AiTextAreaShell as G } from "../AgentBuilder.styled.js";
+import { AGENT_EDITOR_STYLE as J } from "../constants/editorStyle.js";
+import { buildMentionHtml as P, instructionsToEditorHtml as Y, editorDocToInstructions as $ } from "../utils/mentionSerialization.js";
+import { MentionPicker as q } from "./MentionPicker.js";
+import { BikEditor as z } from "../../../editor/BikEditor.js";
+const tt = ({
+  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,
+  action: k,
+  ...H
+}) => {
+  const c = A(null), [O, s] = B(e.length), m = L(
+    (t, o, D) => {
+      const f = c.current;
+      if (!f)
+        return;
+      const M = n.find(
+        (u) => String(u.id) === String(o) && u.meta?.kind === t
+      ), y = D ?? M?.label ?? o;
+      f.insertInlineContent(
+        `${P(String(o), y, t)} `
+      );
+    },
+    [n]
+  );
+  p(() => {
+    if (r)
+      return r(m), () => r(null);
+  }, [r, m]);
+  const R = j(
+    () => Y(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(N, { children: [
+    /* @__PURE__ */ i(_, { children: [
+      /* @__PURE__ */ d(w, { color: h.content.primary, children: S }),
+      /* @__PURE__ */ i(F, { color: h.content.secondary, children: [
+        O,
+        "/",
+        a
+      ] })
+    ] }),
+    /* @__PURE__ */ i(G, { minHeight: x, "data-test": H["data-test"], children: [
+      /* @__PURE__ */ d(
+        z,
+        {
+          ref: c,
+          initialContent: R,
+          placeholder: C,
+          maxCharacters: a,
+          minHeight: "120px",
+          maxHeight: "320px",
+          style: { border: "none" },
+          editorStyle: J,
+          onFocus: E,
+          mentions: {
+            agents: n,
+            removeTriggerOnDismiss: !0,
+            renderDropdown: (t) => /* @__PURE__ */ d(q, { ...t }),
+            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($(o, T));
+          }
+        },
+        l
+      ),
+      k
+    ] })
+  ] });
+};
+export {
+  tt 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/** 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\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) => <MentionPicker {...props} />,\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","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":";;;;;;;;;AAuDO,MAAMA,KAA8C,CAAC;AAAA,EAC3D,OAAAC;AAAA,EACA,OAAAC;AAAA,EACA,UAAAC;AAAA,EACA,WAAAC;AAAA,EACA,aAAAC;AAAA,EACA,WAAAC,IAAY;AAAA,EACZ,UAAAC;AAAA,EACA,cAAAC;AAAA,EACA,OAAAC;AAAA,EACA,iBAAAC;AAAA,EACA,SAAAC;AAAA,EACA,gBAAAC;AAAA,EACA,QAAAC;AAAA,EACA,GAAGC;AACJ,MAAM;AACL,QAAMC,IAAYC,EAAqB,IAAI,GACrC,CAACC,GAAOC,CAAQ,IAAIC,EAASjB,EAAM,MAAM,GAEzCkB,IAASC;AAAA,IACd,CAACC,GAAMC,GAAIC,MAAkB;AAC5B,YAAMC,IAASV,EAAU;AACzB,UAAI,CAACU;AACJ;AAED,YAAMC,IAAOlB,EAAa;AAAA,QACzB,CAACmB,MACA,OAAOA,EAAE,EAAE,MAAM,OAAOJ,CAAE,KACzBI,EAAE,MAAiD,SAASL;AAAA,MAAA,GAEzDM,IAAaJ,KAAiBE,GAAM,SAASH;AACnD,MAAAE,EAAO;AAAA,QACN,GAAGI,EAAiB,OAAON,CAAE,GAAGK,GAAYN,CAAI,CAAC;AAAA,MAAA;AAAA,IAEnD;AAAA,IACA,CAACd,CAAY;AAAA,EAAA;AAGd,EAAAsB,EAAU,MAAM;AACf,QAAKlB;AAGL,aAAAA,EAAeQ,CAAM,GACd,MAAMR,EAAe,IAAI;AAAA,EACjC,GAAG,CAACA,GAAgBQ,CAAM,CAAC;AAG3B,QAAMW,IAAcC;AAAA,IACnB,MAAMC,EAAyB/B,GAAOM,CAAY;AAAA;AAAA,IAElD,CAACD,CAAQ;AAAA,EAAA;AAGV,SAAAuB;AAAA,IACC,MAAMZ,EAAShB,EAAM,MAAM;AAAA;AAAA,IAE3B,CAACK,CAAQ;AAAA,EAAA,qBAIR2B,GAAA,EACA,UAAA;AAAA,IAAA,gBAAAC,EAACC,GAAA,EACA,UAAA;AAAA,MAAA,gBAAAC,EAACC,GAAA,EAAW,OAAOC,EAAO,QAAQ,SAAU,UAAAtC,GAAM;AAAA,MAClD,gBAAAkC,EAACK,GAAA,EAAY,OAAOD,EAAO,QAAQ,WACjC,UAAA;AAAA,QAAAtB;AAAA,QAAM;AAAA,QAAEb;AAAA,MAAA,EAAA,CACV;AAAA,IAAA,GACD;AAAA,sBAECqC,GAAA,EAAgB,WAAAnC,GAAsB,aAAWQ,EAAK,WAAW,GACjE,UAAA;AAAA,MAAA,gBAAAuB;AAAA,QAACK;AAAA,QAAA;AAAA,UAEA,KAAK3B;AAAA,UACL,gBAAgBgB;AAAA,UAChB,aAAA1B;AAAA,UACA,eAAeD;AAAA,UACf,WAAU;AAAA,UACV,WAAU;AAAA,UACV,OAAO,EAAE,QAAQ,OAAA;AAAA,UACjB,aAAauC;AAAA,UACb,SAAAhC;AAAA,UACA,UAAU;AAAA,YACT,QAAQH;AAAA,YACR,wBAAwB;AAAA,YACxB,gBAAgB,CAACoC,MAAU,gBAAAP,EAACQ,GAAA,EAAe,GAAGD,GAAO;AAAA,YACrD,UAAU,CAAClB,MAAS;AACnB,oBAAMJ,IAAQI,EAAK,MAChB;AACH,cAAIJ,KACHZ,IAAkBY,GAAM,OAAOI,EAAK,EAAE,CAAC;AAAA,YAEzC;AAAA,UAAA;AAAA,UAED,UAAU,CAACoB,MAAa;AACvB,YAAA5B,EAAS4B,EAAS,cAAc;AAChC,kBAAMC,IAAMhC,EAAU,SAAS,QAAA,KAAa;AAC5C,YAAAZ,EAAS6C,EAAwBD,GAAKtC,CAAK,CAAC;AAAA,UAC7C;AAAA,QAAA;AAAA,QA1BKF;AAAA,MAAA;AAAA,MA4BLM;AAAA,IAAA,EAAA,CACF;AAAA,EAAA,GACD;AAEF;"}

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

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

@@ -0,0 +1,12 @@
+import { MentionDropdownRenderProps } from '../../../editor';
+import { default as React } from 'react';
+/**
+ * `@` 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<MentionDropdownRenderProps>;

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

@@ -0,0 +1,167 @@
+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 = [
+  { 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
+}) => {
+  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
+    ),
+    [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);
+    }
+  })), [
+    o,
+    g,
+    l,
+    a,
+    f,
+    S,
+    m
+  ]);
+  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) {
+          case "ArrowDown":
+            return n.length && p((I) => (I + 1) % n.length), !0;
+          case "ArrowUp":
+            return n.length && p((I) => (I + n.length - 1) % n.length), !0;
+          case "ArrowRight":
+          case "Enter":
+            return n[b]?.onActivate(), !0;
+          case "ArrowLeft":
+            return B ? (B.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,
+      {
+        type: "button",
+        onClick: s.onBack,
+        style: { background: r.surface.subdued },
+        children: [
+          /* @__PURE__ */ x(T, { width: 12, height: 12 }),
+          /* @__PURE__ */ h(N, { children: [
+            " ",
+            s.title
+          ] })
+        ]
+      }
+    ),
+    i.length === 0 ? /* @__PURE__ */ x(F, { children: o === "subagent" ? "No sub-agents available" : "No tools available" }) : i.map((e, n) => /* @__PURE__ */ h(
+      U,
+      {
+        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 })
+        ]
+      },
+      e.id
+    ))
+  ] });
+}, G = k.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};
+	border-radius: 4px;
+	box-shadow: 0px -2px 8px 0px #0000001f;
+`, U = k.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 ${r.stroke.primary};
+	background: ${(t) => t.$active ? r.surface.subdued : "transparent"};
+	cursor: pointer;
+	text-align: left;
+
+	&:hover {
+		background: ${r.surface.subdued};
+	}
+`, q = k.button`
+	display: flex;
+	align-items: center;
+	padding: 12px 16px;
+	border: none;
+	border-bottom: 1px solid ${r.stroke.primary};
+	background: transparent;
+	cursor: pointer;
+	font-family: Inter;
+	font-size: 12px;
+	font-weight: 600;
+	height: 48px;
+	gap: 4px;
+`, F = k.div`
+	padding: 12px 10px;
+	font-family: Inter;
+	font-size: 13px;
+	color: ${r.content.secondary};
+`;
+export {
+  H 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 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":"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"}

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

@@ -0,0 +1,36 @@
+import { default as React } from 'react';
+import { SingleOption } from '../../dropdown/type';
+export interface SelectableItem {
+    id: string;
+    label: string;
+}
+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's kebab menu gains a "Configure" action (above
+     * "Delete"). Omit for tools (Delete only).
+     */
+    onConfigure?: (id: string) => void;
+}
+export declare const SelectableListSection: React.FC<SelectableListSectionProps>;
+export {};

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

@@ -0,0 +1,138 @@
+import { jsx as o, jsxs as s } from "react/jsx-runtime";
+import L from "../../../assets/icons/delete.svg.js";
+import R from "../../../assets/icons/plus.svg.js";
+import k from "../../../assets/icons/vertical_dots.svg.js";
+import { useState as B } from "react";
+import { DropdownPopover as I } from "../../dropdown/DropdownPopover/index.js";
+import { Dropdown as O } from "../../dropdown/Dropdown.js";
+import { BodySecondary as g, TitleSmall as U, BodyCaption as w } from "../../TypographyStyle.js";
+import { COLORS as n } from "../../../constants/Theme.js";
+import { SideSection as V, SideSectionHeader as W, AddIconButton as j, SelectableRow as x, RowText as z, RowMenuButton as f } from "../AgentBuilder.styled.js";
+const y = "__bik_create_new__", A = "__bik_configure__", v = "__bik_delete__", X = ({
+  title: i,
+  helper: h,
+  items: m,
+  addableOptions: d,
+  onAdd: $,
+  onRemove: _,
+  dataTestPrefix: t,
+  emptyText: E,
+  createOption: l,
+  onConfigure: a
+}) => {
+  const [b, S] = B(!1), C = d.length > 0 || !!l, p = l ? [
+    ...d,
+    {
+      label: l.label,
+      value: y,
+      searchKey: l.label,
+      customComponent: /* @__PURE__ */ o(
+        "div",
+        {
+          style: {
+            width: "100%",
+            textAlign: "center",
+            color: n.content.brand,
+            fontFamily: "Inter",
+            fontSize: 14,
+            fontWeight: 600
+          },
+          children: l.label
+        }
+      )
+    }
+  ] : d, D = [
+    ...a ? [{ label: "Configure", value: A }] : [],
+    {
+      label: "Delete",
+      value: v,
+      customComponent: /* @__PURE__ */ o(g, { color: n.content.negative, children: "Delete" })
+    }
+  ];
+  return /* @__PURE__ */ s(V, { children: [
+    /* @__PURE__ */ s(W, { children: [
+      /* @__PURE__ */ o(U, { color: n.content.primary, children: i }),
+      C && /* @__PURE__ */ o(
+        j,
+        {
+          "data-test": `${t}-add`,
+          onClick: () => S((e) => !e),
+          "aria-label": `Add ${i}`,
+          children: /* @__PURE__ */ o(R, { width: 20, height: 20, color: n.content.brand })
+        }
+      )
+    ] }),
+    h && /* @__PURE__ */ o(w, { color: n.content.secondary, children: h }),
+    b && p.length > 0 && /* @__PURE__ */ o(
+      O,
+      {
+        "data-test": `${t}-dropdown`,
+        size: "small",
+        width: "100%",
+        isSearchable: !0,
+        placeHolder: `Select ${i.toLowerCase()}`,
+        options: p,
+        onSelect: (e) => {
+          const c = (Array.isArray(e) ? e[0] : e)?.value;
+          S(!1), c && (c === y ? l?.onSelect() : $(c));
+        }
+      }
+    ),
+    m.length === 0 && !b ? /* @__PURE__ */ o(w, { color: n.content.placeholder, children: E }) : m.map((e) => /* @__PURE__ */ s(
+      x,
+      {
+        "data-test": `${t}-row-${e.id}`,
+        children: [
+          /* @__PURE__ */ o(z, { children: /* @__PURE__ */ o(g, { numberOfLines: 1, color: n.content.primary, children: e.label }) }),
+          a ? (
+            // Multiple actions (Configure + Delete) → kebab menu.
+            /* @__PURE__ */ o(
+              I,
+              {
+                placement: "bottom-end",
+                options: D,
+                width: "150px",
+                "data-test": `${t}-menu-${e.id}`,
+                onSelect: (r) => {
+                  const u = (Array.isArray(r) ? r[0] : r)?.value;
+                  u === A ? a?.(e.id) : u === v && _(e.id);
+                },
+                children: /* @__PURE__ */ o(f, { "aria-label": `Options for ${e.label}`, children: /* @__PURE__ */ o(
+                  k,
+                  {
+                    width: 16,
+                    height: 16,
+                    color: n.content.secondary
+                  }
+                ) })
+              }
+            )
+          ) : (
+            // Delete-only → direct delete icon, no kebab/popover.
+            /* @__PURE__ */ o(
+              f,
+              {
+                "data-test": `${t}-delete-${e.id}`,
+                "aria-label": `Delete ${e.label}`,
+                onClick: () => _(e.id),
+                children: /* @__PURE__ */ o(
+                  L,
+                  {
+                    width: 16,
+                    height: 16,
+                    color: n.content.secondary
+                  }
+                )
+              }
+            )
+          )
+        ]
+      },
+      e.id
+    ))
+  ] });
+};
+export {
+  X as SelectableListSection
+};
+//# sourceMappingURL=SelectableListSection.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"SelectableListSection.js","sources":["../../../../../src/components/agent-builder/components/SelectableListSection.tsx"],"sourcesContent":["import DeleteIcon from '@src/assets/icons/delete.svg';\nimport PlusIcon from '@src/assets/icons/plus.svg';\nimport VerticalDotsIcon from '@src/assets/icons/vertical_dots.svg';\nimport React, { useState } from 'react';\nimport { Dropdown, DropdownPopover } from '@src/components/dropdown';\nimport { SingleOption } from '@src/components/dropdown/type';\nimport {\n\tBodyCaption,\n\tBodySecondary,\n\tTitleSmall,\n} from '@src/components/TypographyStyle';\nimport { COLORS } from '@src/constants/Theme';\nimport {\n\tAddIconButton,\n\tRowMenuButton,\n\tRowText,\n\tSelectableRow,\n\tSideSection,\n\tSideSectionHeader,\n} from '../AgentBuilder.styled';\n\nexport interface SelectableItem {\n\tid: string;\n\tlabel: string;\n}\n\n/** Sentinel value for the \"create new\" entry in the add dropdown. */\nconst CREATE_OPTION_VALUE = '__bik_create_new__';\n/** Sentinels for the per-row kebab menu actions. */\nconst ROW_CONFIGURE_VALUE = '__bik_configure__';\nconst ROW_DELETE_VALUE = '__bik_delete__';\n\ninterface SelectableListSectionProps {\n\ttitle: string;\n\thelper?: string;\n\titems: SelectableItem[];\n\t/**\n\t * Options shown in the add dropdown. Pass ALL items (not just unselected\n\t * ones) when re-picking an already-added item is allowed (e.g. to insert its\n\t * mention again) — the chip list still shows each item only once.\n\t */\n\taddableOptions: SingleOption[];\n\tonAdd: (id: string) => void;\n\tonRemove: (id: string) => void;\n\tdataTestPrefix: string;\n\temptyText: string;\n\t/**\n\t * Adds a \"create new\" entry at the top of the add dropdown (e.g. \"Create\n\t * sub-agent\"). Selecting it calls `onSelect` instead of `onAdd`.\n\t */\n\tcreateOption?: { label: string; onSelect: () => void };\n\t/**\n\t * When provided, each row's kebab menu gains a \"Configure\" action (above\n\t * \"Delete\"). Omit for tools (Delete only).\n\t */\n\tonConfigure?: (id: string) => void;\n}\n\nexport const SelectableListSection: React.FC<SelectableListSectionProps> = ({\n\ttitle,\n\thelper,\n\titems,\n\taddableOptions,\n\tonAdd,\n\tonRemove,\n\tdataTestPrefix,\n\temptyText,\n\tcreateOption,\n\tonConfigure,\n}) => {\n\tconst [adding, setAdding] = useState(false);\n\tconst showAddButton = addableOptions.length > 0 || !!createOption;\n\t// \"Create new\" is a brand-coloured footer row at the BOTTOM of the dropdown,\n\t// separated from the selectable items by a divider.\n\tconst dropdownOptions: SingleOption[] = createOption\n\t\t? [\n\t\t\t\t...addableOptions,\n\t\t\t\t{\n\t\t\t\t\tlabel: createOption.label,\n\t\t\t\t\tvalue: CREATE_OPTION_VALUE,\n\t\t\t\t\tsearchKey: createOption.label,\n\t\t\t\t\tcustomComponent: (\n\t\t\t\t\t\t<div\n\t\t\t\t\t\t\tstyle={{\n\t\t\t\t\t\t\t\twidth: '100%',\n\t\t\t\t\t\t\t\ttextAlign: 'center',\n\t\t\t\t\t\t\t\tcolor: COLORS.content.brand,\n\t\t\t\t\t\t\t\tfontFamily: 'Inter',\n\t\t\t\t\t\t\t\tfontSize: 14,\n\t\t\t\t\t\t\t\tfontWeight: 600,\n\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t{createOption.label}\n\t\t\t\t\t\t</div>\n\t\t\t\t\t),\n\t\t\t\t},\n\t\t  ]\n\t\t: addableOptions;\n\n\t// Per-row kebab menu: Delete (red) always; Configure above it when allowed.\n\tconst rowMenuOptions: SingleOption[] = [\n\t\t...(onConfigure\n\t\t\t? [{ label: 'Configure', value: ROW_CONFIGURE_VALUE }]\n\t\t\t: []),\n\t\t{\n\t\t\tlabel: 'Delete',\n\t\t\tvalue: ROW_DELETE_VALUE,\n\t\t\tcustomComponent: (\n\t\t\t\t<BodySecondary color={COLORS.content.negative}>Delete</BodySecondary>\n\t\t\t),\n\t\t},\n\t];\n\n\treturn (\n\t\t<SideSection>\n\t\t\t<SideSectionHeader>\n\t\t\t\t<TitleSmall color={COLORS.content.primary}>{title}</TitleSmall>\n\t\t\t\t{showAddButton && (\n\t\t\t\t\t<AddIconButton\n\t\t\t\t\t\tdata-test={`${dataTestPrefix}-add`}\n\t\t\t\t\t\tonClick={() => setAdding((v) => !v)}\n\t\t\t\t\t\taria-label={`Add ${title}`}\n\t\t\t\t\t>\n\t\t\t\t\t\t<PlusIcon width={20} height={20} color={COLORS.content.brand} />\n\t\t\t\t\t</AddIconButton>\n\t\t\t\t)}\n\t\t\t</SideSectionHeader>\n\n\t\t\t{helper && (\n\t\t\t\t<BodyCaption color={COLORS.content.secondary}>{helper}</BodyCaption>\n\t\t\t)}\n\n\t\t\t{adding && dropdownOptions.length > 0 && (\n\t\t\t\t<Dropdown\n\t\t\t\t\tdata-test={`${dataTestPrefix}-dropdown`}\n\t\t\t\t\tsize=\"small\"\n\t\t\t\t\twidth=\"100%\"\n\t\t\t\t\tisSearchable\n\t\t\t\t\tplaceHolder={`Select ${title.toLowerCase()}`}\n\t\t\t\t\toptions={dropdownOptions}\n\t\t\t\t\tonSelect={(opt) => {\n\t\t\t\t\t\tconst single = Array.isArray(opt) ? opt[0] : opt;\n\t\t\t\t\t\tconst v = (single as SingleOption)?.value;\n\t\t\t\t\t\tsetAdding(false);\n\t\t\t\t\t\tif (!v) {\n\t\t\t\t\t\t\treturn;\n\t\t\t\t\t\t}\n\t\t\t\t\t\tif (v === CREATE_OPTION_VALUE) {\n\t\t\t\t\t\t\tcreateOption?.onSelect();\n\t\t\t\t\t\t} else {\n\t\t\t\t\t\t\tonAdd(v);\n\t\t\t\t\t\t}\n\t\t\t\t\t}}\n\t\t\t\t/>\n\t\t\t)}\n\n\t\t\t{items.length === 0 && !adding ? (\n\t\t\t\t<BodyCaption color={COLORS.content.placeholder}>\n\t\t\t\t\t{emptyText}\n\t\t\t\t</BodyCaption>\n\t\t\t) : (\n\t\t\t\titems.map((item) => (\n\t\t\t\t\t<SelectableRow\n\t\t\t\t\t\tkey={item.id}\n\t\t\t\t\t\tdata-test={`${dataTestPrefix}-row-${item.id}`}\n\t\t\t\t\t>\n\t\t\t\t\t\t<RowText>\n\t\t\t\t\t\t\t<BodySecondary numberOfLines={1} color={COLORS.content.primary}>\n\t\t\t\t\t\t\t\t{item.label}\n\t\t\t\t\t\t\t</BodySecondary>\n\t\t\t\t\t\t</RowText>\n\t\t\t\t\t\t{onConfigure ? (\n\t\t\t\t\t\t\t// Multiple actions (Configure + Delete) → kebab menu.\n\t\t\t\t\t\t\t<DropdownPopover\n\t\t\t\t\t\t\t\tplacement=\"bottom-end\"\n\t\t\t\t\t\t\t\toptions={rowMenuOptions}\n\t\t\t\t\t\t\t\twidth=\"150px\"\n\t\t\t\t\t\t\t\tdata-test={`${dataTestPrefix}-menu-${item.id}`}\n\t\t\t\t\t\t\t\tonSelect={(opt) => {\n\t\t\t\t\t\t\t\t\tconst single = Array.isArray(opt) ? opt[0] : opt;\n\t\t\t\t\t\t\t\t\tconst v = (single as SingleOption)?.value;\n\t\t\t\t\t\t\t\t\tif (v === ROW_CONFIGURE_VALUE) {\n\t\t\t\t\t\t\t\t\t\tonConfigure?.(item.id);\n\t\t\t\t\t\t\t\t\t} else if (v === ROW_DELETE_VALUE) {\n\t\t\t\t\t\t\t\t\t\tonRemove(item.id);\n\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t<RowMenuButton aria-label={`Options for ${item.label}`}>\n\t\t\t\t\t\t\t\t\t<VerticalDotsIcon\n\t\t\t\t\t\t\t\t\t\twidth={16}\n\t\t\t\t\t\t\t\t\t\theight={16}\n\t\t\t\t\t\t\t\t\t\tcolor={COLORS.content.secondary}\n\t\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t</RowMenuButton>\n\t\t\t\t\t\t\t</DropdownPopover>\n\t\t\t\t\t\t) : (\n\t\t\t\t\t\t\t// Delete-only → direct delete icon, no kebab/popover.\n\t\t\t\t\t\t\t<RowMenuButton\n\t\t\t\t\t\t\t\tdata-test={`${dataTestPrefix}-delete-${item.id}`}\n\t\t\t\t\t\t\t\taria-label={`Delete ${item.label}`}\n\t\t\t\t\t\t\t\tonClick={() => onRemove(item.id)}\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t<DeleteIcon\n\t\t\t\t\t\t\t\t\twidth={16}\n\t\t\t\t\t\t\t\t\theight={16}\n\t\t\t\t\t\t\t\t\tcolor={COLORS.content.secondary}\n\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t</RowMenuButton>\n\t\t\t\t\t\t)}\n\t\t\t\t\t</SelectableRow>\n\t\t\t\t))\n\t\t\t)}\n\t\t</SideSection>\n\t);\n};\n"],"names":["CREATE_OPTION_VALUE","ROW_CONFIGURE_VALUE","ROW_DELETE_VALUE","SelectableListSection","title","helper","items","addableOptions","onAdd","onRemove","dataTestPrefix","emptyText","createOption","onConfigure","adding","setAdding","useState","showAddButton","dropdownOptions","jsx","COLORS","rowMenuOptions","BodySecondary","SideSection","jsxs","SideSectionHeader","TitleSmall","AddIconButton","v","PlusIcon","BodyCaption","Dropdown","opt","item","SelectableRow","RowText","DropdownPopover","RowMenuButton","VerticalDotsIcon","DeleteIcon"],"mappings":"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"}

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

@@ -0,0 +1,2 @@
+import { default as React } from 'react';
+export declare const StepRail: React.FC;