@bikdotai/bik-component-library 0.0.821-beta.0 → 0.0.821-beta.2

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

@@ -1,54 +0,0 @@
-import { jsx as t, jsxs as e } from "react/jsx-runtime";
-import { TitleRegular as s, BodySecondary as c } from "../../TypographyStyle.js";
-import { COLORS as r } from "../../../constants/Theme.js";
-import { ModalBody as m, ModalActions as u } from "../AgentBuilder.styled.js";
-import { StyledModal as f } from "../../modals/styledModal.js";
-import { Button as a } from "../../button/Button.js";
-const v = ({
-  open: o,
-  onClose: d,
-  onDiscard: i,
-  onSaveDraft: n,
-  isSaving: l
-}) => o ? /* @__PURE__ */ t(
-  f,
-  {
-    "data-test": "agent-discard-modal",
-    open: !0,
-    onClose: d,
-    width: "530px",
-    children: /* @__PURE__ */ e(m, { style: { alignItems: "flex-start", textAlign: "left" }, children: [
-      /* @__PURE__ */ t(s, { color: r.content.primary, children: "Save agent as draft?" }),
-      /* @__PURE__ */ t(c, { color: r.content.secondary, children: "Your progress will be lost if you leave. You can save as draft and come back to this later." }),
-      /* @__PURE__ */ e(u, { children: [
-        /* @__PURE__ */ t(
-          a,
-          {
-            "data-test": "agent-discard-leave",
-            buttonType: "secondary",
-            size: "medium",
-            matchParentWidth: !0,
-            buttonText: "Discard",
-            onClick: i
-          }
-        ),
-        /* @__PURE__ */ t(
-          a,
-          {
-            "data-test": "agent-discard-save-draft",
-            buttonType: "primary",
-            size: "medium",
-            matchParentWidth: !0,
-            buttonText: "Save as draft",
-            isLoading: l,
-            onClick: n
-          }
-        )
-      ] })
-    ] })
-  }
-) : null;
-export {
-  v as DiscardModal
-};
-//# sourceMappingURL=DiscardModal.js.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"DiscardModal.js","sources":["../../../../../src/components/agent-builder/components/DiscardModal.tsx"],"sourcesContent":["import React from 'react';\nimport { Button } from '@src/components/button';\nimport { StyledModal } from '@src/components/modals';\nimport { BodySecondary, TitleRegular } from '@src/components/TypographyStyle';\nimport { COLORS } from '@src/constants/Theme';\nimport { ModalActions, ModalBody } from '../AgentBuilder.styled';\n\ninterface DiscardModalProps {\n\topen: boolean;\n\t/** Dismiss the dialog and stay on the builder (X / outside click). */\n\tonClose: () => void;\n\t/** Leave without saving. */\n\tonDiscard: () => void;\n\t/** Save the draft, then leave. */\n\tonSaveDraft: () => void;\n\tisSaving?: boolean;\n}\n\n/**\n * \"Save agent as draft?\" confirmation shown when the user tries to leave the\n * builder (Back). Actions live inside the body (see GoLiveModal for why we avoid\n * StyledModal's footer). Content is left-aligned per design.\n */\nexport const DiscardModal: React.FC<DiscardModalProps> = ({\n\topen,\n\tonClose,\n\tonDiscard,\n\tonSaveDraft,\n\tisSaving,\n}) => {\n\tif (!open) {\n\t\treturn null;\n\t}\n\n\treturn (\n\t\t<StyledModal\n\t\t\tdata-test=\"agent-discard-modal\"\n\t\t\topen\n\t\t\tonClose={onClose}\n\t\t\twidth=\"530px\"\n\t\t>\n\t\t\t<ModalBody style={{ alignItems: 'flex-start', textAlign: 'left' }}>\n\t\t\t\t<TitleRegular color={COLORS.content.primary}>\n\t\t\t\t\tSave agent as draft?\n\t\t\t\t</TitleRegular>\n\t\t\t\t<BodySecondary color={COLORS.content.secondary}>\n\t\t\t\t\tYour progress will be lost if you leave. You can save as draft and\n\t\t\t\t\tcome back to this later.\n\t\t\t\t</BodySecondary>\n\n\t\t\t\t<ModalActions>\n\t\t\t\t\t<Button\n\t\t\t\t\t\tdata-test=\"agent-discard-leave\"\n\t\t\t\t\t\tbuttonType=\"secondary\"\n\t\t\t\t\t\tsize=\"medium\"\n\t\t\t\t\t\tmatchParentWidth\n\t\t\t\t\t\tbuttonText=\"Discard\"\n\t\t\t\t\t\tonClick={onDiscard}\n\t\t\t\t\t/>\n\t\t\t\t\t<Button\n\t\t\t\t\t\tdata-test=\"agent-discard-save-draft\"\n\t\t\t\t\t\tbuttonType=\"primary\"\n\t\t\t\t\t\tsize=\"medium\"\n\t\t\t\t\t\tmatchParentWidth\n\t\t\t\t\t\tbuttonText=\"Save as draft\"\n\t\t\t\t\t\tisLoading={isSaving}\n\t\t\t\t\t\tonClick={onSaveDraft}\n\t\t\t\t\t/>\n\t\t\t\t</ModalActions>\n\t\t\t</ModalBody>\n\t\t</StyledModal>\n\t);\n};\n"],"names":["DiscardModal","open","onClose","onDiscard","onSaveDraft","isSaving","jsx","StyledModal","jsxs","ModalBody","TitleRegular","COLORS","BodySecondary","ModalActions","Button"],"mappings":";;;;;;AAuBO,MAAMA,IAA4C,CAAC;AAAA,EACzD,MAAAC;AAAA,EACA,SAAAC;AAAA,EACA,WAAAC;AAAA,EACA,aAAAC;AAAA,EACA,UAAAC;AACD,MACMJ,IAKJ,gBAAAK;AAAA,EAACC;AAAA,EAAA;AAAA,IACA,aAAU;AAAA,IACV,MAAI;AAAA,IACJ,SAAAL;AAAA,IACA,OAAM;AAAA,IAEN,UAAA,gBAAAM,EAACC,KAAU,OAAO,EAAE,YAAY,cAAc,WAAW,UACxD,UAAA;AAAA,MAAA,gBAAAH,EAACI,GAAA,EAAa,OAAOC,EAAO,QAAQ,SAAS,UAAA,wBAE7C;AAAA,wBACCC,GAAA,EAAc,OAAOD,EAAO,QAAQ,WAAW,UAAA,+FAGhD;AAAA,wBAECE,GAAA,EACA,UAAA;AAAA,QAAA,gBAAAP;AAAA,UAACQ;AAAA,UAAA;AAAA,YACA,aAAU;AAAA,YACV,YAAW;AAAA,YACX,MAAK;AAAA,YACL,kBAAgB;AAAA,YAChB,YAAW;AAAA,YACX,SAASX;AAAA,UAAA;AAAA,QAAA;AAAA,QAEV,gBAAAG;AAAA,UAACQ;AAAA,UAAA;AAAA,YACA,aAAU;AAAA,YACV,YAAW;AAAA,YACX,MAAK;AAAA,YACL,kBAAgB;AAAA,YAChB,YAAW;AAAA,YACX,WAAWT;AAAA,YACX,SAASD;AAAA,UAAA;AAAA,QAAA;AAAA,MACV,EAAA,CACD;AAAA,IAAA,EAAA,CACD;AAAA,EAAA;AAAA,IAtCM;"}

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

@@ -1,18 +0,0 @@
-import { default as React } from 'react';
-export type GoLiveModalMode = 'confirm' | 'success' | null;
-interface GoLiveModalProps {
-    mode: GoLiveModalMode;
-    onClose: () => void;
-    onConfirm: () => void;
-    onSaveDraft: () => void;
-    onGoToDashboard?: () => void;
-    isPublishing?: boolean;
-}
-/**
- * Confirm / success dialog for going live. Uses `StyledModal` as the shell but
- * renders the actions INSIDE the body (not StyledModal's footer) — the footer's
- * `margin-top:auto` detaches from this short, centered hero layout and spills
- * out of the card. Body-level actions stay anchored under the content.
- */
-export declare const GoLiveModal: React.FC<GoLiveModalProps>;
-export {};

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

@@ -1,73 +0,0 @@
-import { jsx as t, jsxs as i, Fragment as l } from "react/jsx-runtime";
-import u from "../../../assets/icons/ManifestGlass.svg.js";
-import h from "../../../assets/icons/successIcon.svg.js";
-import { TitleRegular as g, BodySecondary as p } from "../../TypographyStyle.js";
-import { COLORS as n } from "../../../constants/Theme.js";
-import { ModalBody as y, ModalIcon as f, ModalActions as v } from "../AgentBuilder.styled.js";
-import { StyledModal as b } from "../../modals/styledModal.js";
-import { Button as o } from "../../button/Button.js";
-const A = ({
-  mode: a,
-  onClose: r,
-  onConfirm: d,
-  onSaveDraft: s,
-  onGoToDashboard: c,
-  isPublishing: m
-}) => {
-  if (!a)
-    return null;
-  const e = a === "success";
-  return /* @__PURE__ */ t(
-    b,
-    {
-      "data-test": "agent-go-live-modal",
-      open: !0,
-      onClose: r,
-      width: e ? "400px" : "520px",
-      children: /* @__PURE__ */ i(y, { children: [
-        /* @__PURE__ */ t(f, { children: e ? /* @__PURE__ */ t(h, { width: 64, height: 64 }) : /* @__PURE__ */ t(u, { width: 64, height: 64 }) }),
-        /* @__PURE__ */ t(g, { color: n.content.primary, children: e ? "Your agent is live!" : "Ready to go live?" }),
-        /* @__PURE__ */ t(p, { color: n.content.secondary, children: e ? "You can manage your agents from the AI agent dashboard." : "This agent will start handling customer conversations immediately. You can pause it at any time." }),
-        /* @__PURE__ */ t(v, { children: e ? /* @__PURE__ */ t(
-          o,
-          {
-            "data-test": "agent-go-dashboard",
-            buttonType: "primary",
-            size: "medium",
-            matchParentWidth: !0,
-            buttonText: "Go to Agent dashboard",
-            onClick: c ?? r
-          }
-        ) : /* @__PURE__ */ i(l, { children: [
-          /* @__PURE__ */ t(
-            o,
-            {
-              "data-test": "agent-confirm-save-draft",
-              buttonType: "secondary",
-              size: "medium",
-              matchParentWidth: !0,
-              buttonText: "Save as draft",
-              onClick: s
-            }
-          ),
-          /* @__PURE__ */ t(
-            o,
-            {
-              "data-test": "agent-confirm-go-live",
-              buttonType: "primary",
-              size: "medium",
-              matchParentWidth: !0,
-              buttonText: "Go live now",
-              isLoading: m,
-              onClick: d
-            }
-          )
-        ] }) })
-      ] })
-    }
-  );
-};
-export {
-  A as GoLiveModal
-};
-//# sourceMappingURL=GoLiveModal.js.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"GoLiveModal.js","sources":["../../../../../src/components/agent-builder/components/GoLiveModal.tsx"],"sourcesContent":["import ManifestGlass from '@src/assets/icons/ManifestGlass.svg';\nimport SuccessIcon from '@src/assets/icons/successIcon.svg';\nimport React from 'react';\nimport { Button } from '@src/components/button';\nimport { StyledModal } from '@src/components/modals';\nimport { BodySecondary, TitleRegular } from '@src/components/TypographyStyle';\nimport { COLORS } from '@src/constants/Theme';\nimport { ModalActions, ModalBody, ModalIcon } from '../AgentBuilder.styled';\n\nexport type GoLiveModalMode = 'confirm' | 'success' | null;\n\ninterface GoLiveModalProps {\n\tmode: GoLiveModalMode;\n\tonClose: () => void;\n\tonConfirm: () => void;\n\tonSaveDraft: () => void;\n\tonGoToDashboard?: () => void;\n\tisPublishing?: boolean;\n}\n\n/**\n * Confirm / success dialog for going live. Uses `StyledModal` as the shell but\n * renders the actions INSIDE the body (not StyledModal's footer) — the footer's\n * `margin-top:auto` detaches from this short, centered hero layout and spills\n * out of the card. Body-level actions stay anchored under the content.\n */\nexport const GoLiveModal: React.FC<GoLiveModalProps> = ({\n\tmode,\n\tonClose,\n\tonConfirm,\n\tonSaveDraft,\n\tonGoToDashboard,\n\tisPublishing,\n}) => {\n\tif (!mode) {\n\t\treturn null;\n\t}\n\n\tconst isSuccess = mode === 'success';\n\n\treturn (\n\t\t<StyledModal\n\t\t\tdata-test=\"agent-go-live-modal\"\n\t\t\topen\n\t\t\tonClose={onClose}\n\t\t\twidth={isSuccess ? '400px' : '520px'}\n\t\t\t// centralContainerStyles={{ padding: '24px' }}\n\t\t>\n\t\t\t<ModalBody>\n\t\t\t\t<ModalIcon>\n\t\t\t\t\t{isSuccess ? (\n\t\t\t\t\t\t<SuccessIcon width={64} height={64} />\n\t\t\t\t\t) : (\n\t\t\t\t\t\t<ManifestGlass width={64} height={64} />\n\t\t\t\t\t)}\n\t\t\t\t</ModalIcon>\n\n\t\t\t\t<TitleRegular color={COLORS.content.primary}>\n\t\t\t\t\t{isSuccess ? 'Your agent is live!' : 'Ready to go live?'}\n\t\t\t\t</TitleRegular>\n\t\t\t\t<BodySecondary color={COLORS.content.secondary}>\n\t\t\t\t\t{isSuccess\n\t\t\t\t\t\t? 'You can manage your agents from the AI agent dashboard.'\n\t\t\t\t\t\t: 'This agent will start handling customer conversations immediately. You can pause it at any time.'}\n\t\t\t\t</BodySecondary>\n\n\t\t\t\t<ModalActions>\n\t\t\t\t\t{isSuccess ? (\n\t\t\t\t\t\t<Button\n\t\t\t\t\t\t\tdata-test=\"agent-go-dashboard\"\n\t\t\t\t\t\t\tbuttonType=\"primary\"\n\t\t\t\t\t\t\tsize=\"medium\"\n\t\t\t\t\t\t\tmatchParentWidth\n\t\t\t\t\t\t\tbuttonText=\"Go to Agent dashboard\"\n\t\t\t\t\t\t\tonClick={onGoToDashboard ?? onClose}\n\t\t\t\t\t\t/>\n\t\t\t\t\t) : (\n\t\t\t\t\t\t<>\n\t\t\t\t\t\t\t<Button\n\t\t\t\t\t\t\t\tdata-test=\"agent-confirm-save-draft\"\n\t\t\t\t\t\t\t\tbuttonType=\"secondary\"\n\t\t\t\t\t\t\t\tsize=\"medium\"\n\t\t\t\t\t\t\t\tmatchParentWidth\n\t\t\t\t\t\t\t\tbuttonText=\"Save as draft\"\n\t\t\t\t\t\t\t\tonClick={onSaveDraft}\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t<Button\n\t\t\t\t\t\t\t\tdata-test=\"agent-confirm-go-live\"\n\t\t\t\t\t\t\t\tbuttonType=\"primary\"\n\t\t\t\t\t\t\t\tsize=\"medium\"\n\t\t\t\t\t\t\t\tmatchParentWidth\n\t\t\t\t\t\t\t\tbuttonText=\"Go live now\"\n\t\t\t\t\t\t\t\tisLoading={isPublishing}\n\t\t\t\t\t\t\t\tonClick={onConfirm}\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</ModalActions>\n\t\t\t</ModalBody>\n\t\t</StyledModal>\n\t);\n};\n"],"names":["GoLiveModal","mode","onClose","onConfirm","onSaveDraft","onGoToDashboard","isPublishing","isSuccess","jsx","StyledModal","ModalBody","ModalIcon","SuccessIcon","ManifestGlass","TitleRegular","COLORS","BodySecondary","ModalActions","Button","jsxs","Fragment"],"mappings":";;;;;;;;AA0BO,MAAMA,IAA0C,CAAC;AAAA,EACvD,MAAAC;AAAA,EACA,SAAAC;AAAA,EACA,WAAAC;AAAA,EACA,aAAAC;AAAA,EACA,iBAAAC;AAAA,EACA,cAAAC;AACD,MAAM;AACL,MAAI,CAACL;AACJ,WAAO;AAGR,QAAMM,IAAYN,MAAS;AAE3B,SACC,gBAAAO;AAAA,IAACC;AAAA,IAAA;AAAA,MACA,aAAU;AAAA,MACV,MAAI;AAAA,MACJ,SAAAP;AAAA,MACA,OAAOK,IAAY,UAAU;AAAA,MAG7B,4BAACG,GAAA,EACA,UAAA;AAAA,QAAA,gBAAAF,EAACG,GAAA,EACC,UAAAJ,IACA,gBAAAC,EAACI,GAAA,EAAY,OAAO,IAAI,QAAQ,IAAI,sBAEnCC,GAAA,EAAc,OAAO,IAAI,QAAQ,IAAI,GAExC;AAAA,QAEA,gBAAAL,EAACM,KAAa,OAAOC,EAAO,QAAQ,SAClC,UAAAR,IAAY,wBAAwB,oBAAA,CACtC;AAAA,QACA,gBAAAC,EAACQ,KAAc,OAAOD,EAAO,QAAQ,WACnC,UAAAR,IACE,4DACA,mGAAA,CACJ;AAAA,QAEA,gBAAAC,EAACS,KACC,UAAAV,IACA,gBAAAC;AAAA,UAACU;AAAA,UAAA;AAAA,YACA,aAAU;AAAA,YACV,YAAW;AAAA,YACX,MAAK;AAAA,YACL,kBAAgB;AAAA,YAChB,YAAW;AAAA,YACX,SAASb,KAAmBH;AAAA,UAAA;AAAA,QAAA,IAG7B,gBAAAiB,EAAAC,GAAA,EACC,UAAA;AAAA,UAAA,gBAAAZ;AAAA,YAACU;AAAA,YAAA;AAAA,cACA,aAAU;AAAA,cACV,YAAW;AAAA,cACX,MAAK;AAAA,cACL,kBAAgB;AAAA,cAChB,YAAW;AAAA,cACX,SAASd;AAAA,YAAA;AAAA,UAAA;AAAA,UAEV,gBAAAI;AAAA,YAACU;AAAA,YAAA;AAAA,cACA,aAAU;AAAA,cACV,YAAW;AAAA,cACX,MAAK;AAAA,cACL,kBAAgB;AAAA,cAChB,YAAW;AAAA,cACX,WAAWZ;AAAA,cACX,SAASH;AAAA,YAAA;AAAA,UAAA;AAAA,QACV,EAAA,CACD,EAAA,CAEF;AAAA,MAAA,EAAA,CACD;AAAA,IAAA;AAAA,EAAA;AAGH;"}

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

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

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

@@ -1,81 +0,0 @@
-import { jsxs as l, jsx as n } from "react/jsx-runtime";
-import { useRef as x, useState as y, useMemo as f, useEffect as C } from "react";
-import { TitleSmall as A, BodyCaption as E } from "../../TypographyStyle.js";
-import { COLORS as g } from "../../../constants/Theme.js";
-import { FieldBlock as I, FieldLabelRow as R, AiTextAreaShell as H } from "../AgentBuilder.styled.js";
-import { AGENT_CHAR_LIMITS as h } from "../constants/charLimits.js";
-import { AGENT_EDITOR_STYLE as k } from "../constants/editorStyle.js";
-import { useAgentBuilderContext as L } from "../context/AgentBuilderContext.js";
-import { buildAgentMentionItems as O, appTypeLabel as v, instructionsToEditorHtml as B, editorDocToInstructions as D } from "../utils/mentionSerialization.js";
-import { MentionPicker as F } from "./MentionPicker.js";
-import { BikEditor as M } from "../../../editor/BikEditor.js";
-const q = () => {
-  const {
-    value: t,
-    patch: i,
-    availableTools: r,
-    availableSubAgents: c,
-    applicationType: a,
-    instructionsResetKey: s
-  } = L(), m = x(null), [T, u] = y(t.instructions.length), d = f(
-    () => O(
-      r,
-      c,
-      v(a)
-    ),
-    [r, c, a]
-  ), b = f(
-    () => B(t.instructions, d),
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-    [t.id, s]
-  );
-  C(
-    () => u(t.instructions.length),
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-    [s]
-  );
-  const S = () => {
-    const o = m.current?.getJSON() ?? null;
-    i({ instructions: D(o, r) });
-  };
-  return /* @__PURE__ */ l(I, { children: [
-    /* @__PURE__ */ l(R, { children: [
-      /* @__PURE__ */ n(A, { color: g.content.primary, children: "Instructions" }),
-      /* @__PURE__ */ l(E, { color: g.content.secondary, children: [
-        T,
-        "/",
-        h.instructions
-      ] })
-    ] }),
-    /* @__PURE__ */ n(H, { minHeight: "200px", children: /* @__PURE__ */ n(
-      M,
-      {
-        ref: m,
-        initialContent: b,
-        placeholder: "Write what this agent should do. Type @ to reference a tool or sub-agent.",
-        maxCharacters: h.instructions,
-        minHeight: "140px",
-        maxHeight: "320px",
-        style: { border: "none" },
-        editorStyle: k,
-        mentions: {
-          agents: d,
-          removeTriggerOnDismiss: !0,
-          renderDropdown: (o) => /* @__PURE__ */ n(F, { ...o }),
-          onSelect: (o) => {
-            const p = o.meta?.kind, e = String(o.id);
-            p === "tool" ? t.tools.includes(e) || i({ tools: [...t.tools, e] }) : p === "subagent" && (t.subagents.includes(e) || i({ subagents: [...t.subagents, e] }));
-          }
-        },
-        onChange: (o) => {
-          u(o.characterCount), S();
-        }
-      },
-      `${t.id}:${s}`
-    ) })
-  ] });
-};
-export {
-  q as InstructionsField
-};
-//# sourceMappingURL=InstructionsField.js.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"InstructionsField.js","sources":["../../../../../src/components/agent-builder/components/InstructionsField.tsx"],"sourcesContent":["import { BikEditor, BikEditorRef } from '@src/editor';\nimport React, { useEffect, useMemo, useRef, useState } from 'react';\nimport { BodyCaption, TitleSmall } from '@src/components/TypographyStyle';\nimport { COLORS } from '@src/constants/Theme';\nimport {\n\tAiTextAreaShell,\n\tFieldBlock,\n\tFieldLabelRow,\n} from '../AgentBuilder.styled';\nimport { AGENT_CHAR_LIMITS } from '../constants/charLimits';\nimport { AGENT_EDITOR_STYLE } from '../constants/editorStyle';\nimport { useAgentBuilderContext } from '../context/AgentBuilderContext';\nimport {\n\tappTypeLabel,\n\tbuildAgentMentionItems,\n\teditorDocToInstructions,\n\tinstructionsToEditorHtml,\n\tMentionKindMeta,\n} from '../utils/mentionSerialization';\nimport { MentionPicker } from './MentionPicker';\n\nexport const InstructionsField: React.FC = () => {\n\tconst {\n\t\tvalue,\n\t\tpatch,\n\t\tavailableTools,\n\t\tavailableSubAgents,\n\t\tapplicationType,\n\t\tinstructionsResetKey,\n\t} = useAgentBuilderContext();\n\n\tconst editorRef = useRef<BikEditorRef>(null);\n\tconst [count, setCount] = useState(value.instructions.length);\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\t// Mount-only initial HTML; recomputed (and the editor remounted via `key`)\n\t// when the agent changes OR `instructionsResetKey` bumps after an external\n\t// edit (e.g. a tool removed from the side list). `mentionItems` (read here)\n\t// rehydrates stored {{tool}}/{{subagent}} tokens into chips.\n\tconst initialHtml = useMemo(\n\t\t() => instructionsToEditorHtml(value.instructions, mentionItems),\n\t\t// eslint-disable-next-line react-hooks/exhaustive-deps\n\t\t[value.id, instructionsResetKey],\n\t);\n\n\t// Keep the counter honest after an external edit remounts the editor.\n\tuseEffect(\n\t\t() => setCount(value.instructions.length),\n\t\t// eslint-disable-next-line react-hooks/exhaustive-deps\n\t\t[instructionsResetKey],\n\t);\n\n\tconst syncFromEditor = () => {\n\t\tconst doc = editorRef.current?.getJSON() ?? null;\n\t\tpatch({ instructions: editorDocToInstructions(doc, availableTools) });\n\t};\n\n\treturn (\n\t\t<FieldBlock>\n\t\t\t<FieldLabelRow>\n\t\t\t\t<TitleSmall color={COLORS.content.primary}>Instructions</TitleSmall>\n\t\t\t\t<BodyCaption color={COLORS.content.secondary}>\n\t\t\t\t\t{count}/{AGENT_CHAR_LIMITS.instructions}\n\t\t\t\t</BodyCaption>\n\t\t\t</FieldLabelRow>\n\n\t\t\t<AiTextAreaShell minHeight=\"200px\">\n\t\t\t\t<BikEditor\n\t\t\t\t\tkey={`${value.id}:${instructionsResetKey}`}\n\t\t\t\t\tref={editorRef}\n\t\t\t\t\tinitialContent={initialHtml}\n\t\t\t\t\tplaceholder=\"Write what this agent should do. Type @ to reference a tool or sub-agent.\"\n\t\t\t\t\tmaxCharacters={AGENT_CHAR_LIMITS.instructions}\n\t\t\t\t\tminHeight=\"140px\"\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\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\tconst id = String(item.id);\n\t\t\t\t\t\t\tif (kind === 'tool') {\n\t\t\t\t\t\t\t\tif (!value.tools.includes(id)) {\n\t\t\t\t\t\t\t\t\tpatch({ tools: [...value.tools, id] });\n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t} else if (kind === 'subagent') {\n\t\t\t\t\t\t\t\tif (!value.subagents.includes(id)) {\n\t\t\t\t\t\t\t\t\tpatch({ subagents: [...value.subagents, id] });\n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t},\n\t\t\t\t\t}}\n\t\t\t\t\tonChange={(snapshot) => {\n\t\t\t\t\t\tsetCount(snapshot.characterCount);\n\t\t\t\t\t\tsyncFromEditor();\n\t\t\t\t\t}}\n\t\t\t\t/>\n\t\t\t</AiTextAreaShell>\n\t\t</FieldBlock>\n\t);\n};\n"],"names":["InstructionsField","value","patch","availableTools","availableSubAgents","applicationType","instructionsResetKey","useAgentBuilderContext","editorRef","useRef","count","setCount","useState","mentionItems","useMemo","buildAgentMentionItems","appTypeLabel","initialHtml","instructionsToEditorHtml","useEffect","syncFromEditor","doc","editorDocToInstructions","FieldBlock","jsxs","FieldLabelRow","jsx","TitleSmall","COLORS","BodyCaption","AGENT_CHAR_LIMITS","AiTextAreaShell","BikEditor","AGENT_EDITOR_STYLE","props","MentionPicker","item","kind","id","snapshot"],"mappings":";;;;;;;;;;;AAqBO,MAAMA,IAA8B,MAAM;AAChD,QAAM;AAAA,IACL,OAAAC;AAAA,IACA,OAAAC;AAAA,IACA,gBAAAC;AAAA,IACA,oBAAAC;AAAA,IACA,iBAAAC;AAAA,IACA,sBAAAC;AAAA,EAAA,IACGC,EAAA,GAEEC,IAAYC,EAAqB,IAAI,GACrC,CAACC,GAAOC,CAAQ,IAAIC,EAASX,EAAM,aAAa,MAAM,GAEtDY,IAAeC;AAAA,IACpB,MACCC;AAAA,MACCZ;AAAA,MACAC;AAAA,MACAY,EAAaX,CAAe;AAAA,IAAA;AAAA,IAE9B,CAACF,GAAgBC,GAAoBC,CAAe;AAAA,EAAA,GAO/CY,IAAcH;AAAA,IACnB,MAAMI,EAAyBjB,EAAM,cAAcY,CAAY;AAAA;AAAA,IAE/D,CAACZ,EAAM,IAAIK,CAAoB;AAAA,EAAA;AAIhC,EAAAa;AAAA,IACC,MAAMR,EAASV,EAAM,aAAa,MAAM;AAAA;AAAA,IAExC,CAACK,CAAoB;AAAA,EAAA;AAGtB,QAAMc,IAAiB,MAAM;AAC5B,UAAMC,IAAMb,EAAU,SAAS,QAAA,KAAa;AAC5C,IAAAN,EAAM,EAAE,cAAcoB,EAAwBD,GAAKlB,CAAc,GAAG;AAAA,EACrE;AAEA,2BACEoB,GAAA,EACA,UAAA;AAAA,IAAA,gBAAAC,EAACC,GAAA,EACA,UAAA;AAAA,MAAA,gBAAAC,EAACC,GAAA,EAAW,OAAOC,EAAO,QAAQ,SAAS,UAAA,gBAAY;AAAA,MACvD,gBAAAJ,EAACK,GAAA,EAAY,OAAOD,EAAO,QAAQ,WACjC,UAAA;AAAA,QAAAlB;AAAA,QAAM;AAAA,QAAEoB,EAAkB;AAAA,MAAA,EAAA,CAC5B;AAAA,IAAA,GACD;AAAA,IAEA,gBAAAJ,EAACK,GAAA,EAAgB,WAAU,SAC1B,UAAA,gBAAAL;AAAA,MAACM;AAAA,MAAA;AAAA,QAEA,KAAKxB;AAAA,QACL,gBAAgBS;AAAA,QAChB,aAAY;AAAA,QACZ,eAAea,EAAkB;AAAA,QACjC,WAAU;AAAA,QACV,WAAU;AAAA,QACV,OAAO,EAAE,QAAQ,OAAA;AAAA,QACjB,aAAaG;AAAA,QACb,UAAU;AAAA,UACT,QAAQpB;AAAA,UACR,wBAAwB;AAAA,UACxB,gBAAgB,CAACqB,MAAU,gBAAAR,EAACS,GAAA,EAAe,GAAGD,GAAO;AAAA,UACrD,UAAU,CAACE,MAAS;AACnB,kBAAMC,IAAQD,EAAK,MAChB,MACGE,IAAK,OAAOF,EAAK,EAAE;AACzB,YAAIC,MAAS,SACPpC,EAAM,MAAM,SAASqC,CAAE,KAC3BpC,EAAM,EAAE,OAAO,CAAC,GAAGD,EAAM,OAAOqC,CAAE,GAAG,IAE5BD,MAAS,eACdpC,EAAM,UAAU,SAASqC,CAAE,KAC/BpC,EAAM,EAAE,WAAW,CAAC,GAAGD,EAAM,WAAWqC,CAAE,GAAG;AAAA,UAGhD;AAAA,QAAA;AAAA,QAED,UAAU,CAACC,MAAa;AACvB,UAAA5B,EAAS4B,EAAS,cAAc,GAChCnB,EAAA;AAAA,QACD;AAAA,MAAA;AAAA,MA/BK,GAAGnB,EAAM,EAAE,IAAIK,CAAoB;AAAA,IAAA,EAgCzC,CACD;AAAA,EAAA,GACD;AAEF;"}

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

@@ -1,12 +0,0 @@
-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

@@ -1,154 +0,0 @@
-import { jsxs as f, jsx as b } from "react/jsx-runtime";
-import L from "../../../assets/icons/chevronLeft.svg.js";
-import P from "../../../assets/icons/chevronRight.svg.js";
-import { useState as w, useMemo as h, useEffect as C, useRef as O } from "react";
-import g from "styled-components";
-import { TitleSmall as T, BodySecondary as j } from "../../TypographyStyle.js";
-import { COLORS as n } from "../../../constants/Theme.js";
-import { toolSourceLabel as B } from "../utils/mentionSerialization.js";
-const M = [
-  { key: "tool", label: "Tools" },
-  { key: "subagent", label: "Sub-agent" }
-], s = (t) => t.meta, E = (t) => s(t)?.plainLabel ?? t.label, Y = ({
-  items: t,
-  onSelect: x,
-  registerKeyHandler: c
-}) => {
-  const [o, m] = w(null), [a, k] = w(null), [v, u] = w(0), d = h(
-    () => t.filter((e) => s(e)?.kind === "tool"),
-    [t]
-  ), A = h(
-    () => t.filter((e) => s(e)?.kind === "subagent"),
-    [t]
-  ), I = h(() => {
-    const e = [];
-    return d.forEach((r) => {
-      const p = s(r)?.source ?? "other";
-      e.includes(p) || e.push(p);
-    }), e;
-  }, [d]), l = o ? o === "subagent" ? { title: "Sub-agent", onBack: () => m(null) } : a ? { title: B(a), onBack: () => k(null) } : { title: "Tools", onBack: () => m(null) } : null, i = h(() => o ? o === "subagent" ? A.map((e) => ({
-    id: String(e.id),
-    label: E(e),
-    drillsIn: !1,
-    onActivate: () => x(e)
-  })) : a ? d.filter((e) => (s(e)?.source ?? "other") === a).map((e) => ({
-    id: String(e.id),
-    label: E(e),
-    drillsIn: !1,
-    onActivate: () => x(e)
-  })) : I.map((e) => ({
-    id: e,
-    label: B(e),
-    drillsIn: !0,
-    onActivate: () => k(e)
-  })) : M.map((e) => ({
-    id: e.key,
-    label: e.label,
-    drillsIn: !0,
-    onActivate: () => {
-      m(e.key), k(null);
-    }
-  })), [o, a, d, A, I, x]);
-  C(() => u(0), [o, a, t]);
-  const S = O({ rows: i, activeIndex: v, header: l });
-  S.current = { rows: i, activeIndex: v, header: l }, C(() => {
-    if (c)
-      return c((e) => {
-        const { rows: r, activeIndex: p, header: $ } = S.current;
-        switch (e.key) {
-          case "ArrowDown":
-            return r.length && u((y) => (y + 1) % r.length), !0;
-          case "ArrowUp":
-            return r.length && u((y) => (y + r.length - 1) % r.length), !0;
-          case "ArrowRight":
-          case "Enter":
-            return r[p]?.onActivate(), !0;
-          case "ArrowLeft":
-            return $ ? ($.onBack(), !0) : !1;
-          default:
-            return !1;
-        }
-      }), () => c(null);
-  }, [c]);
-  const R = o ? i.length && !i[0].drillsIn ? "items" : "sources" : "categories";
-  return /* @__PURE__ */ f(N, { className: `bik-mention-picker bik-mention-picker--${R}`, children: [
-    l && /* @__PURE__ */ f(
-      D,
-      {
-        type: "button",
-        onClick: l.onBack,
-        style: { background: n.surface.subdued },
-        children: [
-          /* @__PURE__ */ b(L, { width: 12, height: 12 }),
-          /* @__PURE__ */ f(T, { children: [
-            " ",
-            l.title
-          ] })
-        ]
-      }
-    ),
-    i.length === 0 ? /* @__PURE__ */ b(G, { children: o === "subagent" ? "No sub-agents available" : "No tools available" }) : i.map((e, r) => /* @__PURE__ */ f(
-      z,
-      {
-        type: "button",
-        $active: r === v,
-        onMouseEnter: () => u(r),
-        onClick: e.onActivate,
-        children: [
-          /* @__PURE__ */ b(j, { color: n.content.primary, children: e.label }),
-          e.drillsIn && /* @__PURE__ */ b(P, { width: 12, height: 12 })
-        ]
-      },
-      e.id
-    ))
-  ] });
-}, N = g.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 = g.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: ${(t) => t.$active ? n.surface.subdued : "transparent"};
-	cursor: pointer;
-	text-align: left;
-
-	&:hover {
-		background: ${n.surface.subdued};
-	}
-`, D = g.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;
-`, G = g.div`
-	padding: 12px 10px;
-	font-family: Inter;
-	font-size: 13px;
-	color: ${n.content.secondary};
-`;
-export {
-  Y as MentionPicker
-};
-//# sourceMappingURL=MentionPicker.js.map

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

@@ -1 +0,0 @@
-{"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// Title shown above the current view, and whether we can go back a level.\n\tconst header: { title: string; onBack: () => void } | null = !category\n\t\t? null\n\t\t: category === 'subagent'\n\t\t? { title: 'Sub-agent', onBack: () => setCategory(null) }\n\t\t: source\n\t\t? { title: toolSourceLabel(source), onBack: () => setSource(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 (!category) {\n\t\t\treturn CATEGORIES.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 (category === '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}, [category, source, tools, subAgents, sources, onSelect]);\n\n\t// Reset highlight whenever the view (or filtered result set) changes.\n\tuseEffect(() => setActiveIndex(0), [category, 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 = !category\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{category === '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","header","toolSourceLabel","rows","c","useEffect","navRef","useRef","event","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/RichTextField.d.ts

@@ -1,21 +0,0 @@
-import { default as React } from 'react';
-interface RichTextFieldProps {
-    label: string;
-    value: string;
-    onChange: (value: string) => void;
-    maxLength: number;
-    placeholder?: string;
-    minHeight?: string;
-    /** Changing this remounts the editor with fresh content (e.g. agent id). */
-    resetKey?: string;
-    'data-test'?: string;
-}
-/**
- * A rich (BikEditor-backed) plain-text field — same look/feel/font as the
- * Instructions editor, but WITHOUT mentions. Content is stored as plain text:
- * deserialized via `instructionsToEditorHtml` (no mention items → just escaped
- * paragraphs) and serialized back with `editorDocToInstructions` (no tools →
- * plain text). Used for Guardrails so both Step-3 inputs match visually.
- */
-export declare const RichTextField: React.FC<RichTextFieldProps>;
-export {};

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

@@ -1,66 +0,0 @@
-import { jsxs as t, jsx as o } from "react/jsx-runtime";
-import { useRef as R, useState as c, useMemo as y } from "react";
-import { TitleSmall as E, BodyCaption as F } from "../../TypographyStyle.js";
-import { COLORS as l } from "../../../constants/Theme.js";
-import { FieldBlock as g, FieldLabelRow as B, AiTextAreaShell as H } from "../AgentBuilder.styled.js";
-import { AGENT_EDITOR_STYLE as O } from "../constants/editorStyle.js";
-import { instructionsToEditorHtml as A, editorDocToInstructions as b } from "../utils/mentionSerialization.js";
-import { BikEditor as j } from "../../../editor/BikEditor.js";
-const J = ({
-  label: s,
-  value: e,
-  onChange: m,
-  maxLength: r,
-  placeholder: d,
-  minHeight: a = "140px",
-  resetKey: u,
-  ...f
-}) => {
-  const i = R(null), [p, h] = c(e.length), [x, n] = c(!1), T = y(
-    () => A(e),
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-    [u]
-  );
-  return /* @__PURE__ */ t(g, { children: [
-    /* @__PURE__ */ t(B, { children: [
-      /* @__PURE__ */ o(E, { color: l.content.primary, children: s }),
-      /* @__PURE__ */ t(F, { color: l.content.secondary, children: [
-        p,
-        "/",
-        r
-      ] })
-    ] }),
-    /* @__PURE__ */ o(
-      H,
-      {
-        focused: x,
-        minHeight: a,
-        "data-test": f["data-test"],
-        children: /* @__PURE__ */ o(
-          j,
-          {
-            ref: i,
-            initialContent: T,
-            placeholder: d,
-            maxCharacters: r,
-            minHeight: "120px",
-            maxHeight: "320px",
-            style: { border: "none" },
-            editorStyle: O,
-            onFocus: () => n(!0),
-            onBlur: () => n(!1),
-            onChange: (C) => {
-              h(C.characterCount);
-              const S = i.current?.getJSON() ?? null;
-              m(b(S, []));
-            }
-          }
-        )
-      }
-    )
-  ] });
-};
-export {
-  J as RichTextField
-};
-//# sourceMappingURL=RichTextField.js.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"RichTextField.js","sources":["../../../../../src/components/agent-builder/components/RichTextField.tsx"],"sourcesContent":["import { BikEditor, BikEditorRef } from '@src/editor';\nimport React, { useMemo, useRef, useState } from 'react';\nimport { BodyCaption, TitleSmall } from '@src/components/TypographyStyle';\nimport { COLORS } from '@src/constants/Theme';\nimport {\n\tAiTextAreaShell,\n\tFieldBlock,\n\tFieldLabelRow,\n} from '../AgentBuilder.styled';\nimport { AGENT_EDITOR_STYLE } from '../constants/editorStyle';\nimport {\n\teditorDocToInstructions,\n\tinstructionsToEditorHtml,\n} from '../utils/mentionSerialization';\n\ninterface RichTextFieldProps {\n\tlabel: string;\n\tvalue: string;\n\tonChange: (value: string) => void;\n\tmaxLength: number;\n\tplaceholder?: string;\n\tminHeight?: string;\n\t/** Changing this remounts the editor with fresh content (e.g. agent id). */\n\tresetKey?: string;\n\t'data-test'?: string;\n}\n\n/**\n * A rich (BikEditor-backed) plain-text field — same look/feel/font as the\n * Instructions editor, but WITHOUT mentions. Content is stored as plain text:\n * deserialized via `instructionsToEditorHtml` (no mention items → just escaped\n * paragraphs) and serialized back with `editorDocToInstructions` (no tools →\n * plain text). Used for Guardrails so both Step-3 inputs match visually.\n */\nexport const RichTextField: React.FC<RichTextFieldProps> = ({\n\tlabel,\n\tvalue,\n\tonChange,\n\tmaxLength,\n\tplaceholder,\n\tminHeight = '140px',\n\tresetKey,\n\t...rest\n}) => {\n\tconst editorRef = useRef<BikEditorRef>(null);\n\tconst [count, setCount] = useState(value.length);\n\tconst [focused, setFocused] = useState(false);\n\n\t// Mount-only initial HTML; recomputed when the agent (resetKey) changes.\n\tconst initialHtml = useMemo(\n\t\t() => instructionsToEditorHtml(value),\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\n\t\t\t\tfocused={focused}\n\t\t\t\tminHeight={minHeight}\n\t\t\t\tdata-test={rest['data-test']}\n\t\t\t>\n\t\t\t\t<BikEditor\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={() => setFocused(true)}\n\t\t\t\t\tonBlur={() => setFocused(false)}\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, []));\n\t\t\t\t\t}}\n\t\t\t\t/>\n\t\t\t</AiTextAreaShell>\n\t\t</FieldBlock>\n\t);\n};\n"],"names":["RichTextField","label","value","onChange","maxLength","placeholder","minHeight","resetKey","rest","editorRef","useRef","count","setCount","useState","focused","setFocused","initialHtml","useMemo","instructionsToEditorHtml","FieldBlock","jsxs","FieldLabelRow","jsx","TitleSmall","COLORS","BodyCaption","AiTextAreaShell","BikEditor","AGENT_EDITOR_STYLE","snapshot","doc","editorDocToInstructions"],"mappings":";;;;;;;;AAkCO,MAAMA,IAA8C,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,GAAGC;AACJ,MAAM;AACL,QAAMC,IAAYC,EAAqB,IAAI,GACrC,CAACC,GAAOC,CAAQ,IAAIC,EAASX,EAAM,MAAM,GACzC,CAACY,GAASC,CAAU,IAAIF,EAAS,EAAK,GAGtCG,IAAcC;AAAA,IACnB,MAAMC,EAAyBhB,CAAK;AAAA;AAAA,IAEpC,CAACK,CAAQ;AAAA,EAAA;AAGV,2BACEY,GAAA,EACA,UAAA;AAAA,IAAA,gBAAAC,EAACC,GAAA,EACA,UAAA;AAAA,MAAA,gBAAAC,EAACC,GAAA,EAAW,OAAOC,EAAO,QAAQ,SAAU,UAAAvB,GAAM;AAAA,MAClD,gBAAAmB,EAACK,GAAA,EAAY,OAAOD,EAAO,QAAQ,WACjC,UAAA;AAAA,QAAAb;AAAA,QAAM;AAAA,QAAEP;AAAA,MAAA,EAAA,CACV;AAAA,IAAA,GACD;AAAA,IAEA,gBAAAkB;AAAA,MAACI;AAAA,MAAA;AAAA,QACA,SAAAZ;AAAA,QACA,WAAAR;AAAA,QACA,aAAWE,EAAK,WAAW;AAAA,QAE3B,UAAA,gBAAAc;AAAA,UAACK;AAAA,UAAA;AAAA,YACA,KAAKlB;AAAA,YACL,gBAAgBO;AAAA,YAChB,aAAAX;AAAA,YACA,eAAeD;AAAA,YACf,WAAU;AAAA,YACV,WAAU;AAAA,YACV,OAAO,EAAE,QAAQ,OAAA;AAAA,YACjB,aAAawB;AAAA,YACb,SAAS,MAAMb,EAAW,EAAI;AAAA,YAC9B,QAAQ,MAAMA,EAAW,EAAK;AAAA,YAC9B,UAAU,CAACc,MAAa;AACvB,cAAAjB,EAASiB,EAAS,cAAc;AAChC,oBAAMC,IAAMrB,EAAU,SAAS,QAAA,KAAa;AAC5C,cAAAN,EAAS4B,EAAwBD,GAAK,CAAA,CAAE,CAAC;AAAA,YAC1C;AAAA,UAAA;AAAA,QAAA;AAAA,MACD;AAAA,IAAA;AAAA,EACD,GACD;AAEF;"}

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

@@ -1,19 +0,0 @@
-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 not yet selected, available to add. */
-    addableOptions: SingleOption[];
-    onAdd: (id: string) => void;
-    onRemove: (id: string) => void;
-    dataTestPrefix: string;
-    emptyText: string;
-}
-export declare const SelectableListSection: React.FC<SelectableListSectionProps>;
-export {};