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

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

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

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

@@ -0,0 +1,19 @@
+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 {};

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

@@ -0,0 +1,79 @@
+import { jsxs as c, jsx as e } from "react/jsx-runtime";
+import f from "../../../assets/icons/cross.svg.js";
+import w from "../../../assets/icons/plus.svg.js";
+import { useState as y } from "react";
+import { TitleSmall as u, BodyCaption as m, BodySecondary as b } from "../../TypographyStyle.js";
+import { COLORS as r } from "../../../constants/Theme.js";
+import { SideSection as $, SideSectionHeader as v, AddIconButton as C, SelectableRow as R, RowText as A, RowRemoveButton as B } from "../AgentBuilder.styled.js";
+import { Dropdown as L } from "../../dropdown/Dropdown.js";
+const E = ({
+  title: n,
+  helper: i,
+  items: d,
+  addableOptions: t,
+  onAdd: S,
+  onRemove: p,
+  dataTestPrefix: l,
+  emptyText: g
+}) => {
+  const [a, s] = y(!1);
+  return /* @__PURE__ */ c($, { children: [
+    /* @__PURE__ */ c(v, { children: [
+      /* @__PURE__ */ e(u, { color: r.content.primary, children: n }),
+      t.length > 0 && /* @__PURE__ */ e(
+        C,
+        {
+          "data-test": `${l}-add`,
+          onClick: () => s((o) => !o),
+          "aria-label": `Add ${n}`,
+          children: /* @__PURE__ */ e(w, { width: 20, height: 20, color: r.content.brand })
+        }
+      )
+    ] }),
+    i && /* @__PURE__ */ e(m, { color: r.content.secondary, children: i }),
+    a && t.length > 0 && /* @__PURE__ */ e(
+      L,
+      {
+        "data-test": `${l}-dropdown`,
+        size: "small",
+        width: "100%",
+        isSearchable: !0,
+        placeHolder: `Select ${n.toLowerCase()}`,
+        options: t,
+        onSelect: (o) => {
+          const h = (Array.isArray(o) ? o[0] : o)?.value;
+          h && S(h), s(!1);
+        }
+      }
+    ),
+    d.length === 0 && !a ? /* @__PURE__ */ e(m, { color: r.content.placeholder, children: g }) : d.map((o) => /* @__PURE__ */ c(
+      R,
+      {
+        "data-test": `${l}-row-${o.id}`,
+        children: [
+          /* @__PURE__ */ e(A, { children: /* @__PURE__ */ e(b, { numberOfLines: 1, color: r.content.primary, children: o.label }) }),
+          /* @__PURE__ */ e(
+            B,
+            {
+              onClick: () => p(o.id),
+              "aria-label": `Remove ${o.label}`,
+              children: /* @__PURE__ */ e(
+                f,
+                {
+                  width: 16,
+                  height: 16,
+                  color: r.content.secondary
+                }
+              )
+            }
+          )
+        ]
+      },
+      o.id
+    ))
+  ] });
+};
+export {
+  E 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 CrossIcon from '@src/assets/icons/cross.svg';\nimport PlusIcon from '@src/assets/icons/plus.svg';\nimport React, { useState } from 'react';\nimport { Dropdown } 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\tRowRemoveButton,\n\tRowText,\n\tSelectableRow,\n\tSideSection,\n\tSideSectionHeader,\n} from '../AgentBuilder.styled';\n\nexport interface SelectableItem {\n\tid: string;\n\tlabel: string;\n}\n\ninterface SelectableListSectionProps {\n\ttitle: string;\n\thelper?: string;\n\titems: SelectableItem[];\n\t/** Options not yet selected, available to add. */\n\taddableOptions: SingleOption[];\n\tonAdd: (id: string) => void;\n\tonRemove: (id: string) => void;\n\tdataTestPrefix: string;\n\temptyText: string;\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}) => {\n\tconst [adding, setAdding] = useState(false);\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{addableOptions.length > 0 && (\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 && addableOptions.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={addableOptions}\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\tif (v) {\n\t\t\t\t\t\t\tonAdd(v);\n\t\t\t\t\t\t}\n\t\t\t\t\t\tsetAdding(false);\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<RowRemoveButton\n\t\t\t\t\t\t\tonClick={() => onRemove(item.id)}\n\t\t\t\t\t\t\taria-label={`Remove ${item.label}`}\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t<CrossIcon\n\t\t\t\t\t\t\t\twidth={16}\n\t\t\t\t\t\t\t\theight={16}\n\t\t\t\t\t\t\t\tcolor={COLORS.content.secondary}\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t</RowRemoveButton>\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":["SelectableListSection","title","helper","items","addableOptions","onAdd","onRemove","dataTestPrefix","emptyText","adding","setAdding","useState","SideSection","jsxs","SideSectionHeader","jsx","TitleSmall","COLORS","AddIconButton","v","PlusIcon","BodyCaption","Dropdown","opt","item","SelectableRow","RowText","BodySecondary","RowRemoveButton","CrossIcon"],"mappings":";;;;;;;;AAqCO,MAAMA,IAA8D,CAAC;AAAA,EAC3E,OAAAC;AAAA,EACA,QAAAC;AAAA,EACA,OAAAC;AAAA,EACA,gBAAAC;AAAA,EACA,OAAAC;AAAA,EACA,UAAAC;AAAA,EACA,gBAAAC;AAAA,EACA,WAAAC;AACD,MAAM;AACL,QAAM,CAACC,GAAQC,CAAS,IAAIC,EAAS,EAAK;AAE1C,2BACEC,GAAA,EACA,UAAA;AAAA,IAAA,gBAAAC,EAACC,GAAA,EACA,UAAA;AAAA,MAAA,gBAAAC,EAACC,GAAA,EAAW,OAAOC,EAAO,QAAQ,SAAU,UAAAhB,GAAM;AAAA,MACjDG,EAAe,SAAS,KACxB,gBAAAW;AAAA,QAACG;AAAA,QAAA;AAAA,UACA,aAAW,GAAGX,CAAc;AAAA,UAC5B,SAAS,MAAMG,EAAU,CAACS,MAAM,CAACA,CAAC;AAAA,UAClC,cAAY,OAAOlB,CAAK;AAAA,UAExB,UAAA,gBAAAc,EAACK,KAAS,OAAO,IAAI,QAAQ,IAAI,OAAOH,EAAO,QAAQ,MAAA,CAAO;AAAA,QAAA;AAAA,MAAA;AAAA,IAC/D,GAEF;AAAA,IAECf,KACA,gBAAAa,EAACM,GAAA,EAAY,OAAOJ,EAAO,QAAQ,WAAY,UAAAf,GAAO;AAAA,IAGtDO,KAAUL,EAAe,SAAS,KAClC,gBAAAW;AAAA,MAACO;AAAA,MAAA;AAAA,QACA,aAAW,GAAGf,CAAc;AAAA,QAC5B,MAAK;AAAA,QACL,OAAM;AAAA,QACN,cAAY;AAAA,QACZ,aAAa,UAAUN,EAAM,YAAA,CAAa;AAAA,QAC1C,SAASG;AAAA,QACT,UAAU,CAACmB,MAAQ;AAElB,gBAAMJ,KADS,MAAM,QAAQI,CAAG,IAAIA,EAAI,CAAC,IAAIA,IACT;AACpC,UAAIJ,KACHd,EAAMc,CAAC,GAERT,EAAU,EAAK;AAAA,QAChB;AAAA,MAAA;AAAA,IAAA;AAAA,IAIDP,EAAM,WAAW,KAAK,CAACM,sBACtBY,GAAA,EAAY,OAAOJ,EAAO,QAAQ,aACjC,UAAAT,EAAA,CACF,IAEAL,EAAM,IAAI,CAACqB,MACV,gBAAAX;AAAA,MAACY;AAAA,MAAA;AAAA,QAEA,aAAW,GAAGlB,CAAc,QAAQiB,EAAK,EAAE;AAAA,QAE3C,UAAA;AAAA,UAAA,gBAAAT,EAACW,GAAA,EACA,UAAA,gBAAAX,EAACY,GAAA,EAAc,eAAe,GAAG,OAAOV,EAAO,QAAQ,SACrD,UAAAO,EAAK,MAAA,CACP,GACD;AAAA,UACA,gBAAAT;AAAA,YAACa;AAAA,YAAA;AAAA,cACA,SAAS,MAAMtB,EAASkB,EAAK,EAAE;AAAA,cAC/B,cAAY,UAAUA,EAAK,KAAK;AAAA,cAEhC,UAAA,gBAAAT;AAAA,gBAACc;AAAAA,gBAAA;AAAA,kBACA,OAAO;AAAA,kBACP,QAAQ;AAAA,kBACR,OAAOZ,EAAO,QAAQ;AAAA,gBAAA;AAAA,cAAA;AAAA,YACvB;AAAA,UAAA;AAAA,QACD;AAAA,MAAA;AAAA,MAjBKO,EAAK;AAAA,IAAA,CAmBX;AAAA,EAAA,GAEH;AAEF;"}

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;

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

@@ -0,0 +1,35 @@
+import { jsx as t, jsxs as s } from "react/jsx-runtime";
+import { TitleSmall as S, BodySecondary as p } from "../../TypographyStyle.js";
+import { COLORS as v } from "../../../constants/Theme.js";
+import { RailList as y, RailItem as x, StepBadge as f } from "../AgentBuilder.styled.js";
+import { STEP_DEFINITIONS as g } from "../constants/steps.js";
+import { useAgentBuilderContext as k } from "../context/AgentBuilderContext.js";
+const T = () => {
+  const {
+    activeStep: a,
+    activeIndex: n,
+    validation: c,
+    goToStep: l,
+    disableStepNavigation: i
+  } = k();
+  return /* @__PURE__ */ t(y, { children: g.map((e) => {
+    const o = e.key === a, r = e.index - 1 < n && c[e.key], d = o ? "active" : r ? "complete" : "inactive", m = o ? S : p;
+    return /* @__PURE__ */ s(
+      x,
+      {
+        "data-test": `agent-step-${e.key}`,
+        disabled: i,
+        onClick: i ? void 0 : () => l(e.key),
+        children: [
+          /* @__PURE__ */ t(f, { state: d, children: r ? "✓" : e.index }),
+          /* @__PURE__ */ t(m, { color: v.content.primary, children: e.title })
+        ]
+      },
+      e.key
+    );
+  }) });
+};
+export {
+  T as StepRail
+};
+//# sourceMappingURL=StepRail.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"StepRail.js","sources":["../../../../../src/components/agent-builder/components/StepRail.tsx"],"sourcesContent":["import React from 'react';\nimport { BodySecondary, TitleSmall } from '@src/components/TypographyStyle';\nimport { COLORS } from '@src/constants/Theme';\nimport { RailItem, RailList, StepBadge } from '../AgentBuilder.styled';\nimport { STEP_DEFINITIONS } from '../constants/steps';\nimport { useAgentBuilderContext } from '../context/AgentBuilderContext';\n\nexport const StepRail: React.FC = () => {\n\tconst {\n\t\tactiveStep,\n\t\tactiveIndex,\n\t\tvalidation,\n\t\tgoToStep,\n\t\tdisableStepNavigation,\n\t} = useAgentBuilderContext();\n\n\treturn (\n\t\t<RailList>\n\t\t\t{STEP_DEFINITIONS.map((step) => {\n\t\t\t\tconst isActive = step.key === activeStep;\n\t\t\t\tconst isComplete = step.index - 1 < activeIndex && validation[step.key];\n\t\t\t\tconst badgeState = isActive\n\t\t\t\t\t? 'active'\n\t\t\t\t\t: isComplete\n\t\t\t\t\t? 'complete'\n\t\t\t\t\t: 'inactive';\n\n\t\t\t\tconst Label = isActive ? TitleSmall : BodySecondary;\n\n\t\t\t\treturn (\n\t\t\t\t\t<RailItem\n\t\t\t\t\t\tkey={step.key}\n\t\t\t\t\t\tdata-test={`agent-step-${step.key}`}\n\t\t\t\t\t\tdisabled={disableStepNavigation}\n\t\t\t\t\t\tonClick={\n\t\t\t\t\t\t\tdisableStepNavigation ? undefined : () => goToStep(step.key)\n\t\t\t\t\t\t}\n\t\t\t\t\t>\n\t\t\t\t\t\t<StepBadge state={badgeState}>\n\t\t\t\t\t\t\t{isComplete ? '✓' : step.index}\n\t\t\t\t\t\t</StepBadge>\n\t\t\t\t\t\t<Label color={COLORS.content.primary}>{step.title}</Label>\n\t\t\t\t\t</RailItem>\n\t\t\t\t);\n\t\t\t})}\n\t\t</RailList>\n\t);\n};\n"],"names":["StepRail","activeStep","activeIndex","validation","goToStep","disableStepNavigation","useAgentBuilderContext","jsx","RailList","STEP_DEFINITIONS","step","isActive","isComplete","badgeState","Label","TitleSmall","BodySecondary","jsxs","RailItem","StepBadge","COLORS"],"mappings":";;;;;;AAOO,MAAMA,IAAqB,MAAM;AACvC,QAAM;AAAA,IACL,YAAAC;AAAA,IACA,aAAAC;AAAA,IACA,YAAAC;AAAA,IACA,UAAAC;AAAA,IACA,uBAAAC;AAAA,EAAA,IACGC,EAAA;AAEJ,SACC,gBAAAC,EAACC,GAAA,EACC,UAAAC,EAAiB,IAAI,CAACC,MAAS;AAC/B,UAAMC,IAAWD,EAAK,QAAQT,GACxBW,IAAaF,EAAK,QAAQ,IAAIR,KAAeC,EAAWO,EAAK,GAAG,GAChEG,IAAaF,IAChB,WACAC,IACA,aACA,YAEGE,IAAQH,IAAWI,IAAaC;AAEtC,WACC,gBAAAC;AAAA,MAACC;AAAA,MAAA;AAAA,QAEA,aAAW,cAAcR,EAAK,GAAG;AAAA,QACjC,UAAUL;AAAA,QACV,SACCA,IAAwB,SAAY,MAAMD,EAASM,EAAK,GAAG;AAAA,QAG5D,UAAA;AAAA,UAAA,gBAAAH,EAACY,KAAU,OAAON,GAChB,UAAAD,IAAa,MAAMF,EAAK,OAC1B;AAAA,4BACCI,GAAA,EAAM,OAAOM,EAAO,QAAQ,SAAU,YAAK,MAAA,CAAM;AAAA,QAAA;AAAA,MAAA;AAAA,MAV7CV,EAAK;AAAA,IAAA;AAAA,EAab,CAAC,EAAA,CACF;AAEF;"}

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

@@ -0,0 +1,7 @@
+import { default as React } from 'react';
+interface StepSectionHeaderProps {
+    title: string;
+    helper?: string;
+}
+export declare const StepSectionHeader: React.FC<StepSectionHeaderProps>;
+export {};

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

@@ -0,0 +1,15 @@
+import { jsxs as c, jsx as r } from "react/jsx-runtime";
+import { TitleRegular as n, BodySecondary as i } from "../../TypographyStyle.js";
+import { COLORS as e } from "../../../constants/Theme.js";
+import { SectionHeaderWrap as m } from "../AgentBuilder.styled.js";
+const s = ({
+  title: t,
+  helper: o
+}) => /* @__PURE__ */ c(m, { children: [
+  /* @__PURE__ */ r(n, { color: e.content.primary, children: t }),
+  o && /* @__PURE__ */ r(i, { color: e.content.secondary, children: o })
+] });
+export {
+  s as StepSectionHeader
+};
+//# sourceMappingURL=StepSectionHeader.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"StepSectionHeader.js","sources":["../../../../../src/components/agent-builder/components/StepSectionHeader.tsx"],"sourcesContent":["import React from 'react';\nimport { BodySecondary, TitleRegular } from '@src/components/TypographyStyle';\nimport { COLORS } from '@src/constants/Theme';\nimport { SectionHeaderWrap } from '../AgentBuilder.styled';\n\ninterface StepSectionHeaderProps {\n\ttitle: string;\n\thelper?: string;\n}\n\nexport const StepSectionHeader: React.FC<StepSectionHeaderProps> = ({\n\ttitle,\n\thelper,\n}) => (\n\t<SectionHeaderWrap>\n\t\t<TitleRegular color={COLORS.content.primary}>{title}</TitleRegular>\n\t\t{helper && (\n\t\t\t<BodySecondary color={COLORS.content.secondary}>{helper}</BodySecondary>\n\t\t)}\n\t</SectionHeaderWrap>\n);\n"],"names":["StepSectionHeader","title","helper","SectionHeaderWrap","jsx","TitleRegular","COLORS","BodySecondary"],"mappings":";;;;AAUO,MAAMA,IAAsD,CAAC;AAAA,EACnE,OAAAC;AAAA,EACA,QAAAC;AACD,wBACEC,GAAA,EACA,UAAA;AAAA,EAAA,gBAAAC,EAACC,GAAA,EAAa,OAAOC,EAAO,QAAQ,SAAU,UAAAL,GAAM;AAAA,EACnDC,KACA,gBAAAE,EAACG,GAAA,EAAc,OAAOD,EAAO,QAAQ,WAAY,UAAAJ,EAAA,CAAO;AAAA,EAAA,CAE1D;"}

package/dist/esm/components/agent-builder/constants/charLimits.d.ts

@@ -0,0 +1,21 @@
+/**
+ * Character limits for AgentBuilder fields.
+ *
+ * `name` and `description` are taken directly from the Figma spec. The rest are
+ * sized to match the 0/1000 counters shown on the response/handover steps; adjust
+ * here if product changes them.
+ */
+export declare const AGENT_CHAR_LIMITS: {
+    /** Step 1 — Agent name. */
+    readonly name: 60;
+    /** Step 1 — "What it does". */
+    readonly description: 1000;
+    /** Step 2 — custom intent free text. */
+    readonly customIntent: 1000;
+    /** Step 3 — Instructions (BikEditor `maxCharacters`). */
+    readonly instructions: 1000;
+    /** Step 3 — Guardrails. */
+    readonly guardrail: 1000;
+    /** Step 4 — "Handover when". */
+    readonly handoverWhen: 1000;
+};

package/dist/esm/components/agent-builder/constants/charLimits.js

@@ -0,0 +1,18 @@
+const e = {
+  /** Step 1 — Agent name. */
+  name: 60,
+  /** Step 1 — "What it does". */
+  description: 1e3,
+  /** Step 2 — custom intent free text. */
+  customIntent: 1e3,
+  /** Step 3 — Instructions (BikEditor `maxCharacters`). */
+  instructions: 1e3,
+  /** Step 3 — Guardrails. */
+  guardrail: 1e3,
+  /** Step 4 — "Handover when". */
+  handoverWhen: 1e3
+};
+export {
+  e as AGENT_CHAR_LIMITS
+};
+//# sourceMappingURL=charLimits.js.map

package/dist/esm/components/agent-builder/constants/charLimits.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"charLimits.js","sources":["../../../../../src/components/agent-builder/constants/charLimits.ts"],"sourcesContent":["/**\n * Character limits for AgentBuilder fields.\n *\n * `name` and `description` are taken directly from the Figma spec. The rest are\n * sized to match the 0/1000 counters shown on the response/handover steps; adjust\n * here if product changes them.\n */\nexport const AGENT_CHAR_LIMITS = {\n\t/** Step 1 — Agent name. */\n\tname: 60,\n\t/** Step 1 — \"What it does\". */\n\tdescription: 1000,\n\t/** Step 2 — custom intent free text. */\n\tcustomIntent: 1000,\n\t/** Step 3 — Instructions (BikEditor `maxCharacters`). */\n\tinstructions: 1000,\n\t/** Step 3 — Guardrails. */\n\tguardrail: 1000,\n\t/** Step 4 — \"Handover when\". */\n\thandoverWhen: 1000,\n} as const;\n"],"names":["AGENT_CHAR_LIMITS"],"mappings":"AAOO,MAAMA,IAAoB;AAAA;AAAA,EAEhC,MAAM;AAAA;AAAA,EAEN,aAAa;AAAA;AAAA,EAEb,cAAc;AAAA;AAAA,EAEd,cAAc;AAAA;AAAA,EAEd,WAAW;AAAA;AAAA,EAEX,cAAc;AACf;"}

package/dist/esm/components/agent-builder/constants/editorStyle.d.ts

@@ -0,0 +1,8 @@
+import { default as React } from 'react';
+/**
+ * Inline ProseMirror style applied to the agent-builder BikEditors so the rich
+ * inputs (Instructions, Guardrails) render in the SAME font/metrics as the plain
+ * `AiTextAreaInput` textarea (Inter 14/20). `.ProseMirror` itself sets no
+ * font-family, so without this it inherits the host default and looks different.
+ */
+export declare const AGENT_EDITOR_STYLE: React.CSSProperties;

package/dist/esm/components/agent-builder/constants/editorStyle.js

@@ -0,0 +1,10 @@
+const n = {
+  padding: 0,
+  fontFamily: "Inter",
+  fontSize: "14px",
+  lineHeight: "20px"
+};
+export {
+  n as AGENT_EDITOR_STYLE
+};
+//# sourceMappingURL=editorStyle.js.map

package/dist/esm/components/agent-builder/constants/editorStyle.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"editorStyle.js","sources":["../../../../../src/components/agent-builder/constants/editorStyle.ts"],"sourcesContent":["import type React from 'react';\n\n/**\n * Inline ProseMirror style applied to the agent-builder BikEditors so the rich\n * inputs (Instructions, Guardrails) render in the SAME font/metrics as the plain\n * `AiTextAreaInput` textarea (Inter 14/20). `.ProseMirror` itself sets no\n * font-family, so without this it inherits the host default and looks different.\n */\nexport const AGENT_EDITOR_STYLE: React.CSSProperties = {\n\tpadding: 0,\n\tfontFamily: 'Inter',\n\tfontSize: '14px',\n\tlineHeight: '20px',\n};\n"],"names":["AGENT_EDITOR_STYLE"],"mappings":"AAQO,MAAMA,IAA0C;AAAA,EACtD,SAAS;AAAA,EACT,YAAY;AAAA,EACZ,UAAU;AAAA,EACV,YAAY;AACb;"}

package/dist/esm/components/agent-builder/constants/steps.d.ts

@@ -0,0 +1,13 @@
+import { StepKey } from '../AgentBuilder.model';
+export interface StepDefinition {
+    key: StepKey;
+    /** 1-based number shown in the rail. */
+    index: number;
+    /** Rail label + content section title. */
+    title: string;
+    /** Helper text under the section title. */
+    helper: string;
+}
+export declare const STEP_DEFINITIONS: StepDefinition[];
+export declare const STEP_KEYS: StepKey[];
+export declare const getStepIndex: (key: StepKey) => number;

package/dist/esm/components/agent-builder/constants/steps.js

@@ -0,0 +1,32 @@
+const t = [
+  {
+    key: "about",
+    index: 1,
+    title: "About this agent",
+    helper: "Give it a name and one clear job. One agent → one job, that’s what keeps answers sharp."
+  },
+  {
+    key: "trigger",
+    index: 2,
+    title: "When it steps in",
+    helper: "Choose how Manifest knows when to route a conversation to this agent."
+  },
+  {
+    key: "response",
+    index: 3,
+    title: "How it responds",
+    helper: "Write what this agent should do. Type @ to reference a tool, add a condition, or hand off to a sub-agent."
+  },
+  {
+    key: "handover",
+    index: 4,
+    title: "Handover rules",
+    helper: "Define when this agent passes the conversation to a human, and how."
+  }
+], n = t.map((e) => e.key), o = (e) => n.indexOf(e);
+export {
+  t as STEP_DEFINITIONS,
+  n as STEP_KEYS,
+  o as getStepIndex
+};
+//# sourceMappingURL=steps.js.map

package/dist/esm/components/agent-builder/constants/steps.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"steps.js","sources":["../../../../../src/components/agent-builder/constants/steps.ts"],"sourcesContent":["import { StepKey } from '../AgentBuilder.model';\n\nexport interface StepDefinition {\n\tkey: StepKey;\n\t/** 1-based number shown in the rail. */\n\tindex: number;\n\t/** Rail label + content section title. */\n\ttitle: string;\n\t/** Helper text under the section title. */\n\thelper: string;\n}\n\nexport const STEP_DEFINITIONS: StepDefinition[] = [\n\t{\n\t\tkey: 'about',\n\t\tindex: 1,\n\t\ttitle: 'About this agent',\n\t\thelper:\n\t\t\t'Give it a name and one clear job. One agent → one job, that’s what keeps answers sharp.',\n\t},\n\t{\n\t\tkey: 'trigger',\n\t\tindex: 2,\n\t\ttitle: 'When it steps in',\n\t\thelper:\n\t\t\t'Choose how Manifest knows when to route a conversation to this agent.',\n\t},\n\t{\n\t\tkey: 'response',\n\t\tindex: 3,\n\t\ttitle: 'How it responds',\n\t\thelper:\n\t\t\t'Write what this agent should do. Type @ to reference a tool, add a condition, or hand off to a sub-agent.',\n\t},\n\t{\n\t\tkey: 'handover',\n\t\tindex: 4,\n\t\ttitle: 'Handover rules',\n\t\thelper:\n\t\t\t'Define when this agent passes the conversation to a human, and how.',\n\t},\n];\n\nexport const STEP_KEYS: StepKey[] = STEP_DEFINITIONS.map((s) => s.key);\n\nexport const getStepIndex = (key: StepKey): number => STEP_KEYS.indexOf(key);\n"],"names":["STEP_DEFINITIONS","STEP_KEYS","s","getStepIndex","key"],"mappings":"AAYO,MAAMA,IAAqC;AAAA,EACjD;AAAA,IACC,KAAK;AAAA,IACL,OAAO;AAAA,IACP,OAAO;AAAA,IACP,QACC;AAAA,EAAA;AAAA,EAEF;AAAA,IACC,KAAK;AAAA,IACL,OAAO;AAAA,IACP,OAAO;AAAA,IACP,QACC;AAAA,EAAA;AAAA,EAEF;AAAA,IACC,KAAK;AAAA,IACL,OAAO;AAAA,IACP,OAAO;AAAA,IACP,QACC;AAAA,EAAA;AAAA,EAEF;AAAA,IACC,KAAK;AAAA,IACL,OAAO;AAAA,IACP,OAAO;AAAA,IACP,QACC;AAAA,EAAA;AAEH,GAEaC,IAAuBD,EAAiB,IAAI,CAACE,MAAMA,EAAE,GAAG,GAExDC,IAAe,CAACC,MAAyBH,EAAU,QAAQG,CAAG;"}

package/dist/esm/components/agent-builder/context/AgentBuilderContext.d.ts

@@ -0,0 +1,53 @@
+import { ApplicationType } from '@bikdotai/bik-models/growth';
+import { default as React } from 'react';
+import { AgentTool, AgentValue, IntentOption, ModelOption, StepKey, StepValidation, SubAgentRef } from '../AgentBuilder.model';
+export interface AgentBuilderContextShape {
+    /** Controlled value relayed from props. */
+    value: AgentValue;
+    /** Patch one or more fields. */
+    patch: (partial: Partial<AgentValue>) => void;
+    /** Patch a single field. */
+    updateField: <K extends keyof AgentValue>(key: K, val: AgentValue[K]) => void;
+    /**
+     * Remove a tool / sub-agent everywhere: drops it from the list AND strips ALL
+     * its `{{tool:KEY}}` / `{{subagent:ID}}` tokens from the instructions, then
+     * bumps `instructionsResetKey` so the editor remounts without those chips.
+     */
+    removeReference: (kind: 'tool' | 'subagent', id: string) => void;
+    /** Remount signal for the instructions editor after an external edit. */
+    instructionsResetKey: number;
+    activeStep: StepKey;
+    activeIndex: number;
+    goToStep: (step: StepKey) => void;
+    goNext: () => void;
+    goPrev: () => void;
+    isFirstStep: boolean;
+    isLastStep: boolean;
+    validation: StepValidation;
+    isActiveStepValid: boolean;
+    availableTools: AgentTool[];
+    availableSubAgents: SubAgentRef[];
+    availableIntents: IntentOption[];
+    availableModels: ModelOption[];
+    /** Host application context (e.g. MANIFEST) — drives tool-chip labelling. */
+    applicationType?: ApplicationType;
+    /** When true, step-rail items are not clickable (Back / Next only). */
+    disableStepNavigation: boolean;
+}
+export declare const useAgentBuilderContext: () => AgentBuilderContextShape;
+interface ProviderProps {
+    value: AgentValue;
+    onChange: (patch: Partial<AgentValue>) => void;
+    activeStep?: StepKey;
+    onStepChange?: (step: StepKey) => void;
+    availableTools: AgentTool[];
+    availableSubAgents: SubAgentRef[];
+    availableIntents: IntentOption[];
+    availableModels: ModelOption[];
+    validation?: Partial<StepValidation>;
+    applicationType?: ApplicationType;
+    disableStepNavigation?: boolean;
+    children: React.ReactNode;
+}
+export declare const AgentBuilderProvider: React.FC<ProviderProps>;
+export {};

package/dist/esm/components/agent-builder/context/AgentBuilderContext.js

@@ -0,0 +1,118 @@
+import { jsx as N } from "react/jsx-runtime";
+import Y, { useState as j, useCallback as c, useMemo as k, useContext as q } from "react";
+import { AGENT_CHAR_LIMITS as l } from "../constants/charLimits.js";
+import { getStepIndex as z, STEP_KEYS as m } from "../constants/steps.js";
+const y = Y.createContext(null), W = () => {
+  const t = q(y);
+  if (!t)
+    throw new Error(
+      "useAgentBuilderContext must be used within an AgentBuilderProvider"
+    );
+  return t;
+}, D = (t) => {
+  const e = t.trigger.mode === "custom_intent" ? (t.trigger.customIntent ?? "").trim().length > 0 : t.trigger.intents.length > 0;
+  return {
+    about: t.name.trim().length > 0 && t.name.length <= l.name && t.description.length <= l.description,
+    trigger: e,
+    response: t.instructions.trim().length > 0,
+    // Optional until specced further — never blocks go-live.
+    handover: !0
+  };
+}, X = ({
+  value: t,
+  onChange: e,
+  activeStep: d,
+  onStepChange: p,
+  availableTools: u,
+  availableSubAgents: f,
+  availableIntents: h,
+  availableModels: S,
+  validation: _,
+  applicationType: A,
+  disableStepNavigation: I = !0,
+  children: F
+}) => {
+  const [L, $] = j("about"), g = d ?? L, o = z(g), [B, C] = j(0), s = c(
+    (n) => {
+      d === void 0 && $(n), p?.(n);
+    },
+    [d, p]
+  ), P = c(() => {
+    const n = m[Math.min(o + 1, m.length - 1)];
+    s(n);
+  }, [o, s]), R = c(() => {
+    const n = m[Math.max(o - 1, 0)];
+    s(n);
+  }, [o, s]), E = c(
+    (n) => e(n),
+    [e]
+  ), w = c(
+    (n, i) => e({ [n]: i }),
+    [e]
+  ), K = c(
+    (n, i) => {
+      const M = n === "tool" ? (() => {
+        const r = u.find((H) => H.tool_id === i);
+        return r ? `{{tool:${r.function_key}}}` : null;
+      })() : `{{subagent:${i}}}`, V = M ? t.instructions.split(M).join("") : t.instructions;
+      e(
+        n === "tool" ? { tools: t.tools.filter((r) => r !== i), instructions: V } : {
+          subagents: t.subagents.filter((r) => r !== i),
+          instructions: V
+        }
+      ), C((r) => r + 1);
+    },
+    [u, t, e]
+  ), x = k(
+    () => ({ ...D(t), ..._ }),
+    [t, _]
+  ), G = k(
+    () => ({
+      value: t,
+      patch: E,
+      updateField: w,
+      removeReference: K,
+      instructionsResetKey: B,
+      activeStep: g,
+      activeIndex: o,
+      goToStep: s,
+      goNext: P,
+      goPrev: R,
+      isFirstStep: o === 0,
+      isLastStep: o === m.length - 1,
+      validation: x,
+      isActiveStepValid: x[g],
+      availableTools: u,
+      availableSubAgents: f,
+      availableIntents: h,
+      availableModels: S,
+      applicationType: A,
+      disableStepNavigation: I
+    }),
+    [
+      t,
+      E,
+      w,
+      K,
+      B,
+      g,
+      o,
+      s,
+      P,
+      R,
+      x,
+      u,
+      f,
+      h,
+      S,
+      A,
+      I
+    ]
+  );
+  return /* @__PURE__ */ N(y.Provider, { value: G, children: F });
+};
+export {
+  X as AgentBuilderProvider,
+  W as useAgentBuilderContext
+};
+//# sourceMappingURL=AgentBuilderContext.js.map

package/dist/esm/components/agent-builder/context/AgentBuilderContext.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"AgentBuilderContext.js","sources":["../../../../../src/components/agent-builder/context/AgentBuilderContext.tsx"],"sourcesContent":["import type { ApplicationType } from '@bikdotai/bik-models/growth';\nimport React, { useCallback, useContext, useMemo, useState } from 'react';\nimport {\n\tAgentTool,\n\tAgentValue,\n\tIntentOption,\n\tModelOption,\n\tStepKey,\n\tStepValidation,\n\tSubAgentRef,\n} from '../AgentBuilder.model';\nimport { AGENT_CHAR_LIMITS } from '../constants/charLimits';\nimport { getStepIndex, STEP_KEYS } from '../constants/steps';\n\nexport interface AgentBuilderContextShape {\n\t/** Controlled value relayed from props. */\n\tvalue: AgentValue;\n\t/** Patch one or more fields. */\n\tpatch: (partial: Partial<AgentValue>) => void;\n\t/** Patch a single field. */\n\tupdateField: <K extends keyof AgentValue>(key: K, val: AgentValue[K]) => void;\n\t/**\n\t * Remove a tool / sub-agent everywhere: drops it from the list AND strips ALL\n\t * its `{{tool:KEY}}` / `{{subagent:ID}}` tokens from the instructions, then\n\t * bumps `instructionsResetKey` so the editor remounts without those chips.\n\t */\n\tremoveReference: (kind: 'tool' | 'subagent', id: string) => void;\n\t/** Remount signal for the instructions editor after an external edit. */\n\tinstructionsResetKey: number;\n\n\t// Navigation\n\tactiveStep: StepKey;\n\tactiveIndex: number;\n\tgoToStep: (step: StepKey) => void;\n\tgoNext: () => void;\n\tgoPrev: () => void;\n\tisFirstStep: boolean;\n\tisLastStep: boolean;\n\n\t// Validation\n\tvalidation: StepValidation;\n\tisActiveStepValid: boolean;\n\n\t// Reference data\n\tavailableTools: AgentTool[];\n\tavailableSubAgents: SubAgentRef[];\n\tavailableIntents: IntentOption[];\n\tavailableModels: ModelOption[];\n\t/** Host application context (e.g. MANIFEST) — drives tool-chip labelling. */\n\tapplicationType?: ApplicationType;\n\t/** When true, step-rail items are not clickable (Back / Next only). */\n\tdisableStepNavigation: boolean;\n}\n\nconst AgentBuilderContext =\n\tReact.createContext<AgentBuilderContextShape | null>(null);\n\nexport const useAgentBuilderContext = (): AgentBuilderContextShape => {\n\tconst ctx = useContext(AgentBuilderContext);\n\tif (!ctx) {\n\t\tthrow new Error(\n\t\t\t'useAgentBuilderContext must be used within an AgentBuilderProvider',\n\t\t);\n\t}\n\treturn ctx;\n};\n\n/** Validity derived purely from the current value (no effects). */\nconst deriveValidation = (value: AgentValue): StepValidation => {\n\tconst triggerValid =\n\t\tvalue.trigger.mode === 'custom_intent'\n\t\t\t? (value.trigger.customIntent ?? '').trim().length > 0\n\t\t\t: value.trigger.intents.length > 0;\n\n\treturn {\n\t\tabout:\n\t\t\tvalue.name.trim().length > 0 &&\n\t\t\tvalue.name.length <= AGENT_CHAR_LIMITS.name &&\n\t\t\tvalue.description.length <= AGENT_CHAR_LIMITS.description,\n\t\ttrigger: triggerValid,\n\t\tresponse: value.instructions.trim().length > 0,\n\t\t// Optional until specced further — never blocks go-live.\n\t\thandover: true,\n\t};\n};\n\ninterface ProviderProps {\n\tvalue: AgentValue;\n\tonChange: (patch: Partial<AgentValue>) => void;\n\tactiveStep?: StepKey;\n\tonStepChange?: (step: StepKey) => void;\n\tavailableTools: AgentTool[];\n\tavailableSubAgents: SubAgentRef[];\n\tavailableIntents: IntentOption[];\n\tavailableModels: ModelOption[];\n\tvalidation?: Partial<StepValidation>;\n\tapplicationType?: ApplicationType;\n\tdisableStepNavigation?: boolean;\n\tchildren: React.ReactNode;\n}\n\nexport const AgentBuilderProvider: React.FC<ProviderProps> = ({\n\tvalue,\n\tonChange,\n\tactiveStep: controlledStep,\n\tonStepChange,\n\tavailableTools,\n\tavailableSubAgents,\n\tavailableIntents,\n\tavailableModels,\n\tvalidation: validationOverride,\n\tapplicationType,\n\tdisableStepNavigation = true,\n\tchildren,\n}) => {\n\tconst [internalStep, setInternalStep] = useState<StepKey>('about');\n\tconst activeStep = controlledStep ?? internalStep;\n\tconst activeIndex = getStepIndex(activeStep);\n\n\t// Bumped when instructions are edited from OUTSIDE the editor (e.g. removing\n\t// a tool from the side list), forcing the instructions editor to remount.\n\tconst [instructionsResetKey, setInstructionsResetKey] = useState(0);\n\n\tconst goToStep = useCallback(\n\t\t(step: StepKey) => {\n\t\t\tif (controlledStep === undefined) {\n\t\t\t\tsetInternalStep(step);\n\t\t\t}\n\t\t\tonStepChange?.(step);\n\t\t},\n\t\t[controlledStep, onStepChange],\n\t);\n\n\tconst goNext = useCallback(() => {\n\t\tconst next = STEP_KEYS[Math.min(activeIndex + 1, STEP_KEYS.length - 1)];\n\t\tgoToStep(next);\n\t}, [activeIndex, goToStep]);\n\n\tconst goPrev = useCallback(() => {\n\t\tconst prev = STEP_KEYS[Math.max(activeIndex - 1, 0)];\n\t\tgoToStep(prev);\n\t}, [activeIndex, goToStep]);\n\n\tconst patch = useCallback(\n\t\t(partial: Partial<AgentValue>) => onChange(partial),\n\t\t[onChange],\n\t);\n\n\tconst updateField = useCallback(\n\t\t<K extends keyof AgentValue>(key: K, val: AgentValue[K]) =>\n\t\t\tonChange({ [key]: val } as Partial<AgentValue>),\n\t\t[onChange],\n\t);\n\n\tconst removeReference = useCallback(\n\t\t(kind: 'tool' | 'subagent', id: string) => {\n\t\t\tconst token =\n\t\t\t\tkind === 'tool'\n\t\t\t\t\t? (() => {\n\t\t\t\t\t\t\tconst tool = availableTools.find((t) => t.tool_id === id);\n\t\t\t\t\t\t\treturn tool ? `{{tool:${tool.function_key}}}` : null;\n\t\t\t\t\t  })()\n\t\t\t\t\t: `{{subagent:${id}}}`;\n\t\t\tconst instructions = token\n\t\t\t\t? value.instructions.split(token).join('')\n\t\t\t\t: value.instructions;\n\t\t\tonChange(\n\t\t\t\tkind === 'tool'\n\t\t\t\t\t? { tools: value.tools.filter((t) => t !== id), instructions }\n\t\t\t\t\t: {\n\t\t\t\t\t\t\tsubagents: value.subagents.filter((s) => s !== id),\n\t\t\t\t\t\t\tinstructions,\n\t\t\t\t\t  },\n\t\t\t);\n\t\t\tsetInstructionsResetKey((k) => k + 1);\n\t\t},\n\t\t[availableTools, value, onChange],\n\t);\n\n\tconst validation: StepValidation = useMemo(\n\t\t() => ({ ...deriveValidation(value), ...validationOverride }),\n\t\t[value, validationOverride],\n\t);\n\n\tconst ctx = useMemo<AgentBuilderContextShape>(\n\t\t() => ({\n\t\t\tvalue,\n\t\t\tpatch,\n\t\t\tupdateField,\n\t\t\tremoveReference,\n\t\t\tinstructionsResetKey,\n\t\t\tactiveStep,\n\t\t\tactiveIndex,\n\t\t\tgoToStep,\n\t\t\tgoNext,\n\t\t\tgoPrev,\n\t\t\tisFirstStep: activeIndex === 0,\n\t\t\tisLastStep: activeIndex === STEP_KEYS.length - 1,\n\t\t\tvalidation,\n\t\t\tisActiveStepValid: validation[activeStep],\n\t\t\tavailableTools,\n\t\t\tavailableSubAgents,\n\t\t\tavailableIntents,\n\t\t\tavailableModels,\n\t\t\tapplicationType,\n\t\t\tdisableStepNavigation,\n\t\t}),\n\t\t[\n\t\t\tvalue,\n\t\t\tpatch,\n\t\t\tupdateField,\n\t\t\tremoveReference,\n\t\t\tinstructionsResetKey,\n\t\t\tactiveStep,\n\t\t\tactiveIndex,\n\t\t\tgoToStep,\n\t\t\tgoNext,\n\t\t\tgoPrev,\n\t\t\tvalidation,\n\t\t\tavailableTools,\n\t\t\tavailableSubAgents,\n\t\t\tavailableIntents,\n\t\t\tavailableModels,\n\t\t\tapplicationType,\n\t\t\tdisableStepNavigation,\n\t\t],\n\t);\n\n\treturn (\n\t\t<AgentBuilderContext.Provider value={ctx}>\n\t\t\t{children}\n\t\t</AgentBuilderContext.Provider>\n\t);\n};\n"],"names":["AgentBuilderContext","React","useAgentBuilderContext","ctx","useContext","deriveValidation","value","triggerValid","AGENT_CHAR_LIMITS","AgentBuilderProvider","onChange","controlledStep","onStepChange","availableTools","availableSubAgents","availableIntents","availableModels","validationOverride","applicationType","disableStepNavigation","children","internalStep","setInternalStep","useState","activeStep","activeIndex","getStepIndex","instructionsResetKey","setInstructionsResetKey","goToStep","useCallback","step","goNext","next","STEP_KEYS","goPrev","prev","patch","partial","updateField","key","val","removeReference","kind","id","token","tool","t","instructions","s","k","validation","useMemo"],"mappings":"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"}

package/dist/esm/components/agent-builder/hooks/useAgentDraft.d.ts

@@ -0,0 +1,24 @@
+import { AgentValue } from '../AgentBuilder.model';
+export interface AgentDraft {
+    /** Current draft value — pass straight to `<AgentBuilder value={...} />`. */
+    value: AgentValue;
+    /** Merge a partial — pass straight to `<AgentBuilder onChange={...} />`. */
+    onChange: (patch: Partial<AgentValue>) => void;
+    /** Replace the whole value (e.g. after an async edit-mode load). */
+    setValue: (value: AgentValue) => void;
+    /** Reset back to the initial value this hook was created with. */
+    reset: () => void;
+}
+/**
+ * `useReducer`-based state helper for driving a controlled `<AgentBuilder />` from
+ * the consumer (e.g. merchantAdminReact) without hand-writing the patch/merge logic.
+ *
+ * The consumer remains the single source of truth — this just packages the reducer.
+ * For edit mode where the agent loads asynchronously, either key the host component
+ * on the agent id, or call `setValue` once the data arrives.
+ *
+ * @example
+ * const { value, onChange } = useAgentDraft(mapDocToAgentValue(doc));
+ * <AgentBuilder value={value} onChange={onChange} onSaveDraft={() => save(value)} ... />
+ */
+export declare const useAgentDraft: (initial: AgentValue) => AgentDraft;