@bikdotai/bik-component-library 0.0.853 → 0.0.855

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

@@ -1,66 +1,85 @@
-import { jsxs as a, jsx as e } from "react/jsx-runtime";
-import { useState as m } from "react";
-import x from "styled-components";
-import { TitleSmall as y } from "../../TypographyStyle.js";
-import { COLORS as I } from "../../../constants/Theme.js";
-import { FieldBlock as S, AiTextAreaShell as T, AiTextAreaInput as A } from "../AgentBuilder.styled.js";
-import { Button as v } from "../../button/Button.js";
-import F from "../../../icons/BIK AI specific/WandSparkles.js";
-const z = ({
-  label: d,
+import { jsx as o, jsxs as g } from "react/jsx-runtime";
+import { useState as a } from "react";
+import T from "styled-components";
+import { TitleSmall as v } from "../../TypographyStyle.js";
+import { COLORS as w } from "../../../constants/Theme.js";
+import { FieldBlock as B, AiTextAreaShell as E, AiTextAreaInput as F } from "../AgentBuilder.styled.js";
+import { MentionEditor as k } from "./MentionEditor.js";
+import { Button as b } from "../../button/Button.js";
+import j from "../../../icons/BIK AI specific/WandSparkles.js";
+const q = ({
+  label: m,
   value: t,
-  onChange: i,
-  maxLength: c,
-  placeholder: p,
-  minHeight: f = "120px",
-  onImprove: o,
-  ...n
+  onChange: e,
+  maxLength: l,
+  placeholder: d,
+  minHeight: c = "120px",
+  onImprove: i,
+  variablesData: p,
+  ...r
 }) => {
-  const [u, l] = m(!1), [r, s] = m(!1), g = async () => {
-    if (!(!o || r || t.trim().length === 0)) {
-      s(!0);
+  const [x, f] = a(!1), [n, u] = a(!1), [I, A] = a(0), h = (p?.length ?? 0) > 0, S = async () => {
+    if (!(!i || n || t.trim().length === 0)) {
+      u(!0);
       try {
-        i(await o(t));
+        e(await i(t)), h && A((s) => s + 1);
       } finally {
-        s(!1);
+        u(!1);
       }
     }
-  };
-  return /* @__PURE__ */ a(S, { children: [
-    /* @__PURE__ */ e(y, { color: I.content.primary, children: d }),
-    /* @__PURE__ */ a(T, { focused: u, minHeight: f, children: [
-      /* @__PURE__ */ e(
-        A,
+  }, y = i ? /* @__PURE__ */ o(L, { children: /* @__PURE__ */ o(
+    b,
+    {
+      "data-test": `${r["data-test"] ?? "tool"}-improve`,
+      buttonType: "ai",
+      size: "small",
+      LeadingIcon: j,
+      buttonText: "Improve with AI",
+      isLoading: n,
+      disabled: n || t.trim().length === 0,
+      onClick: S
+    }
+  ) }) : void 0;
+  return h ? /* @__PURE__ */ o(
+    k,
+    {
+      "data-test": r["data-test"],
+      label: m,
+      value: t,
+      onChange: e,
+      maxLength: l,
+      placeholder: d,
+      minHeight: c,
+      resetKey: `improve-${I}`,
+      mentionItems: [],
+      tools: [],
+      variablesData: p,
+      addDataButton: !0,
+      action: y
+    }
+  ) : /* @__PURE__ */ g(B, { children: [
+    /* @__PURE__ */ o(v, { color: w.content.primary, children: m }),
+    /* @__PURE__ */ g(E, { focused: x, minHeight: c, children: [
+      /* @__PURE__ */ o(
+        F,
         {
-          "data-test": n["data-test"],
+          "data-test": r["data-test"],
           value: t,
-          placeholder: p,
-          maxLength: c,
-          onFocus: () => l(!0),
-          onBlur: () => l(!1),
-          onChange: (h) => i(h.target.value)
+          placeholder: d,
+          maxLength: l,
+          onFocus: () => f(!0),
+          onBlur: () => f(!1),
+          onChange: (s) => e(s.target.value)
         }
       ),
-      o && /* @__PURE__ */ e(b, { children: /* @__PURE__ */ e(
-        v,
-        {
-          "data-test": `${n["data-test"] ?? "tool"}-improve`,
-          buttonType: "ai",
-          size: "small",
-          LeadingIcon: F,
-          buttonText: "Improve with AI",
-          isLoading: r,
-          disabled: r || t.trim().length === 0,
-          onClick: g
-        }
-      ) })
+      y
     ] })
   ] });
-}, b = x.div`
+}, L = T.div`
 	display: flex;
 	align-items: center;
 `;
 export {
-  z as ToolInstructionsField
+  q as ToolInstructionsField
 };
 //# sourceMappingURL=ToolInstructionsField.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"ToolInstructionsField.js","sources":["../../../../../src/components/agent-builder/components/ToolInstructionsField.tsx"],"sourcesContent":["import { WandSparkles } from '@src/icons';\nimport React, { useState } from 'react';\nimport styled from 'styled-components';\nimport { Button } from '@src/components/button';\nimport { TitleSmall } from '@src/components/TypographyStyle';\nimport { COLORS } from '@src/constants/Theme';\nimport {\n\tAiTextAreaInput,\n\tAiTextAreaShell,\n\tFieldBlock,\n} from '../AgentBuilder.styled';\n\ninterface ToolInstructionsFieldProps {\n\tlabel: string;\n\tvalue: string;\n\tonChange: (value: string) => void;\n\tmaxLength: number;\n\tplaceholder?: string;\n\tminHeight?: string;\n\t/** \"Improve with AI\" — resolves with rewritten text. Omit to hide the button. */\n\tonImprove?: (text: string) => Promise<string>;\n\t'data-test'?: string;\n}\n\n/**\n * A labelled multiline field with an inline \"Improve with AI\" action pinned to\n * the bottom-left of the box (Figma: Rest API / Handover-to-email drawers). The\n * button is hidden when `onImprove` is omitted.\n */\nexport const ToolInstructionsField: React.FC<ToolInstructionsFieldProps> = ({\n\tlabel,\n\tvalue,\n\tonChange,\n\tmaxLength,\n\tplaceholder,\n\tminHeight = '120px',\n\tonImprove,\n\t...rest\n}) => {\n\tconst [focused, setFocused] = useState(false);\n\tconst [improving, setImproving] = useState(false);\n\n\tconst handleImprove = async () => {\n\t\tif (!onImprove || improving || value.trim().length === 0) {\n\t\t\treturn;\n\t\t}\n\t\tsetImproving(true);\n\t\ttry {\n\t\t\tonChange(await onImprove(value));\n\t\t} finally {\n\t\t\tsetImproving(false);\n\t\t}\n\t};\n\n\treturn (\n\t\t<FieldBlock>\n\t\t\t<TitleSmall color={COLORS.content.primary}>{label}</TitleSmall>\n\t\t\t<AiTextAreaShell focused={focused} minHeight={minHeight}>\n\t\t\t\t<AiTextAreaInput\n\t\t\t\t\tdata-test={rest['data-test']}\n\t\t\t\t\tvalue={value}\n\t\t\t\t\tplaceholder={placeholder}\n\t\t\t\t\tmaxLength={maxLength}\n\t\t\t\t\tonFocus={() => setFocused(true)}\n\t\t\t\t\tonBlur={() => setFocused(false)}\n\t\t\t\t\tonChange={(e) => onChange(e.target.value)}\n\t\t\t\t/>\n\t\t\t\t{onImprove && (\n\t\t\t\t\t<ImproveRow>\n\t\t\t\t\t\t<Button\n\t\t\t\t\t\t\tdata-test={`${rest['data-test'] ?? 'tool'}-improve`}\n\t\t\t\t\t\t\tbuttonType=\"ai\"\n\t\t\t\t\t\t\tsize=\"small\"\n\t\t\t\t\t\t\tLeadingIcon={WandSparkles}\n\t\t\t\t\t\t\tbuttonText=\"Improve with AI\"\n\t\t\t\t\t\t\tisLoading={improving}\n\t\t\t\t\t\t\tdisabled={improving || value.trim().length === 0}\n\t\t\t\t\t\t\tonClick={handleImprove}\n\t\t\t\t\t\t/>\n\t\t\t\t\t</ImproveRow>\n\t\t\t\t)}\n\t\t\t</AiTextAreaShell>\n\t\t</FieldBlock>\n\t);\n};\n\nconst ImproveRow = styled.div`\n\tdisplay: flex;\n\talign-items: center;\n`;\n"],"names":["ToolInstructionsField","label","value","onChange","maxLength","placeholder","minHeight","onImprove","rest","focused","setFocused","useState","improving","setImproving","handleImprove","FieldBlock","jsx","TitleSmall","COLORS","jsxs","AiTextAreaShell","AiTextAreaInput","e","ImproveRow","Button","WandSparkles","styled"],"mappings":";;;;;;;;AA6BO,MAAMA,IAA8D,CAAC;AAAA,EAC3E,OAAAC;AAAA,EACA,OAAAC;AAAA,EACA,UAAAC;AAAA,EACA,WAAAC;AAAA,EACA,aAAAC;AAAA,EACA,WAAAC,IAAY;AAAA,EACZ,WAAAC;AAAA,EACA,GAAGC;AACJ,MAAM;AACL,QAAM,CAACC,GAASC,CAAU,IAAIC,EAAS,EAAK,GACtC,CAACC,GAAWC,CAAY,IAAIF,EAAS,EAAK,GAE1CG,IAAgB,YAAY;AACjC,QAAI,GAACP,KAAaK,KAAaV,EAAM,KAAA,EAAO,WAAW,IAGvD;AAAA,MAAAW,EAAa,EAAI;AACjB,UAAI;AACH,QAAAV,EAAS,MAAMI,EAAUL,CAAK,CAAC;AAAA,MAChC,UAAA;AACC,QAAAW,EAAa,EAAK;AAAA,MACnB;AAAA;AAAA,EACD;AAEA,2BACEE,GAAA,EACA,UAAA;AAAA,IAAA,gBAAAC,EAACC,GAAA,EAAW,OAAOC,EAAO,QAAQ,SAAU,UAAAjB,GAAM;AAAA,IAClD,gBAAAkB,EAACC,GAAA,EAAgB,SAAAX,GAAkB,WAAAH,GAClC,UAAA;AAAA,MAAA,gBAAAU;AAAA,QAACK;AAAA,QAAA;AAAA,UACA,aAAWb,EAAK,WAAW;AAAA,UAC3B,OAAAN;AAAA,UACA,aAAAG;AAAA,UACA,WAAAD;AAAA,UACA,SAAS,MAAMM,EAAW,EAAI;AAAA,UAC9B,QAAQ,MAAMA,EAAW,EAAK;AAAA,UAC9B,UAAU,CAACY,MAAMnB,EAASmB,EAAE,OAAO,KAAK;AAAA,QAAA;AAAA,MAAA;AAAA,MAExCf,uBACCgB,GAAA,EACA,UAAA,gBAAAP;AAAA,QAACQ;AAAA,QAAA;AAAA,UACA,aAAW,GAAGhB,EAAK,WAAW,KAAK,MAAM;AAAA,UACzC,YAAW;AAAA,UACX,MAAK;AAAA,UACL,aAAaiB;AAAAA,UACb,YAAW;AAAA,UACX,WAAWb;AAAA,UACX,UAAUA,KAAaV,EAAM,KAAA,EAAO,WAAW;AAAA,UAC/C,SAASY;AAAA,QAAA;AAAA,MAAA,EACV,CACD;AAAA,IAAA,EAAA,CAEF;AAAA,EAAA,GACD;AAEF,GAEMS,IAAaG,EAAO;AAAA;AAAA;AAAA;"}
+{"version":3,"file":"ToolInstructionsField.js","sources":["../../../../../src/components/agent-builder/components/ToolInstructionsField.tsx"],"sourcesContent":["import { WandSparkles } from '@src/icons';\nimport React, { useState } from 'react';\nimport styled from 'styled-components';\nimport { Button } from '@src/components/button';\nimport { TitleSmall } from '@src/components/TypographyStyle';\nimport { COLORS } from '@src/constants/Theme';\nimport type { VariableListInterfaceV3 } from '../../variable-picker-v3/model';\nimport {\n\tAiTextAreaInput,\n\tAiTextAreaShell,\n\tFieldBlock,\n} from '../AgentBuilder.styled';\nimport { MentionEditor } from './MentionEditor';\n\ninterface ToolInstructionsFieldProps {\n\tlabel: string;\n\tvalue: string;\n\tonChange: (value: string) => void;\n\tmaxLength: number;\n\tplaceholder?: string;\n\tminHeight?: string;\n\t/** \"Improve with AI\" — resolves with rewritten text. Omit to hide the button. */\n\tonImprove?: (text: string) => Promise<string>;\n\t/**\n\t * Variable catalog. When non-empty the field upgrades from a plain textarea\n\t * to a variables-only `@` mention editor: typing `@` opens the variable\n\t * categories directly (Variables is the sole category, so the picker skips\n\t * the Tools / Sub-agent root), and picks render as chips persisted as\n\t * `{{variable:<name>}}` tokens.\n\t */\n\tvariablesData?: VariableListInterfaceV3[];\n\t'data-test'?: string;\n}\n\n/**\n * A labelled multiline field with an inline \"Improve with AI\" action pinned to\n * the bottom-left of the box (Figma: Rest API / Handover-to-email drawers). The\n * button is hidden when `onImprove` is omitted.\n */\nexport const ToolInstructionsField: React.FC<ToolInstructionsFieldProps> = ({\n\tlabel,\n\tvalue,\n\tonChange,\n\tmaxLength,\n\tplaceholder,\n\tminHeight = '120px',\n\tonImprove,\n\tvariablesData,\n\t...rest\n}) => {\n\tconst [focused, setFocused] = useState(false);\n\tconst [improving, setImproving] = useState(false);\n\t// Bumped when \"Improve with AI\" replaces the text externally — the mention\n\t// editor only reads `value` on (re)mount, so it must be remounted.\n\tconst [editorEpoch, setEditorEpoch] = useState(0);\n\n\tconst withVariables = (variablesData?.length ?? 0) > 0;\n\n\tconst handleImprove = async () => {\n\t\tif (!onImprove || improving || value.trim().length === 0) {\n\t\t\treturn;\n\t\t}\n\t\tsetImproving(true);\n\t\ttry {\n\t\t\tonChange(await onImprove(value));\n\t\t\tif (withVariables) {\n\t\t\t\tsetEditorEpoch((e) => e + 1);\n\t\t\t}\n\t\t} finally {\n\t\t\tsetImproving(false);\n\t\t}\n\t};\n\n\tconst improveAction = onImprove ? (\n\t\t<ImproveRow>\n\t\t\t<Button\n\t\t\t\tdata-test={`${rest['data-test'] ?? 'tool'}-improve`}\n\t\t\t\tbuttonType=\"ai\"\n\t\t\t\tsize=\"small\"\n\t\t\t\tLeadingIcon={WandSparkles}\n\t\t\t\tbuttonText=\"Improve with AI\"\n\t\t\t\tisLoading={improving}\n\t\t\t\tdisabled={improving || value.trim().length === 0}\n\t\t\t\tonClick={handleImprove}\n\t\t\t/>\n\t\t</ImproveRow>\n\t) : undefined;\n\n\t// Variables enabled → the mention-editor variant. `mentionItems` / tool\n\t// hooks stay empty so Variables is the picker's ONLY category and `@` lands\n\t// straight in the variable list.\n\tif (withVariables) {\n\t\treturn (\n\t\t\t<MentionEditor\n\t\t\t\tdata-test={rest['data-test']}\n\t\t\t\tlabel={label}\n\t\t\t\tvalue={value}\n\t\t\t\tonChange={onChange}\n\t\t\t\tmaxLength={maxLength}\n\t\t\t\tplaceholder={placeholder}\n\t\t\t\tminHeight={minHeight}\n\t\t\t\tresetKey={`improve-${editorEpoch}`}\n\t\t\t\tmentionItems={[]}\n\t\t\t\ttools={[]}\n\t\t\t\tvariablesData={variablesData}\n\t\t\t\t// Drawers get the same focused-field \"+ Add data\" affordance as the\n\t\t\t\t// main Step-3 editors.\n\t\t\t\taddDataButton\n\t\t\t\taction={improveAction}\n\t\t\t/>\n\t\t);\n\t}\n\n\treturn (\n\t\t<FieldBlock>\n\t\t\t<TitleSmall color={COLORS.content.primary}>{label}</TitleSmall>\n\t\t\t<AiTextAreaShell focused={focused} minHeight={minHeight}>\n\t\t\t\t<AiTextAreaInput\n\t\t\t\t\tdata-test={rest['data-test']}\n\t\t\t\t\tvalue={value}\n\t\t\t\t\tplaceholder={placeholder}\n\t\t\t\t\tmaxLength={maxLength}\n\t\t\t\t\tonFocus={() => setFocused(true)}\n\t\t\t\t\tonBlur={() => setFocused(false)}\n\t\t\t\t\tonChange={(e) => onChange(e.target.value)}\n\t\t\t\t/>\n\t\t\t\t{improveAction}\n\t\t\t</AiTextAreaShell>\n\t\t</FieldBlock>\n\t);\n};\n\nconst ImproveRow = styled.div`\n\tdisplay: flex;\n\talign-items: center;\n`;\n"],"names":["ToolInstructionsField","label","value","onChange","maxLength","placeholder","minHeight","onImprove","variablesData","rest","focused","setFocused","useState","improving","setImproving","editorEpoch","setEditorEpoch","withVariables","handleImprove","e","improveAction","jsx","ImproveRow","Button","WandSparkles","MentionEditor","FieldBlock","TitleSmall","COLORS","jsxs","AiTextAreaShell","AiTextAreaInput","styled"],"mappings":";;;;;;;;;AAuCO,MAAMA,IAA8D,CAAC;AAAA,EAC3E,OAAAC;AAAA,EACA,OAAAC;AAAA,EACA,UAAAC;AAAA,EACA,WAAAC;AAAA,EACA,aAAAC;AAAA,EACA,WAAAC,IAAY;AAAA,EACZ,WAAAC;AAAA,EACA,eAAAC;AAAA,EACA,GAAGC;AACJ,MAAM;AACL,QAAM,CAACC,GAASC,CAAU,IAAIC,EAAS,EAAK,GACtC,CAACC,GAAWC,CAAY,IAAIF,EAAS,EAAK,GAG1C,CAACG,GAAaC,CAAc,IAAIJ,EAAS,CAAC,GAE1CK,KAAiBT,GAAe,UAAU,KAAK,GAE/CU,IAAgB,YAAY;AACjC,QAAI,GAACX,KAAaM,KAAaX,EAAM,KAAA,EAAO,WAAW,IAGvD;AAAA,MAAAY,EAAa,EAAI;AACjB,UAAI;AACH,QAAAX,EAAS,MAAMI,EAAUL,CAAK,CAAC,GAC3Be,KACHD,EAAe,CAACG,MAAMA,IAAI,CAAC;AAAA,MAE7B,UAAA;AACC,QAAAL,EAAa,EAAK;AAAA,MACnB;AAAA;AAAA,EACD,GAEMM,IAAgBb,IACrB,gBAAAc,EAACC,GAAA,EACA,UAAA,gBAAAD;AAAA,IAACE;AAAA,IAAA;AAAA,MACA,aAAW,GAAGd,EAAK,WAAW,KAAK,MAAM;AAAA,MACzC,YAAW;AAAA,MACX,MAAK;AAAA,MACL,aAAae;AAAAA,MACb,YAAW;AAAA,MACX,WAAWX;AAAA,MACX,UAAUA,KAAaX,EAAM,KAAA,EAAO,WAAW;AAAA,MAC/C,SAASgB;AAAA,IAAA;AAAA,EAAA,GAEX,IACG;AAKJ,SAAID,IAEF,gBAAAI;AAAA,IAACI;AAAA,IAAA;AAAA,MACA,aAAWhB,EAAK,WAAW;AAAA,MAC3B,OAAAR;AAAA,MACA,OAAAC;AAAA,MACA,UAAAC;AAAA,MACA,WAAAC;AAAA,MACA,aAAAC;AAAA,MACA,WAAAC;AAAA,MACA,UAAU,WAAWS,CAAW;AAAA,MAChC,cAAc,CAAA;AAAA,MACd,OAAO,CAAA;AAAA,MACP,eAAAP;AAAA,MAGA,eAAa;AAAA,MACb,QAAQY;AAAA,IAAA;AAAA,EAAA,sBAMTM,GAAA,EACA,UAAA;AAAA,IAAA,gBAAAL,EAACM,GAAA,EAAW,OAAOC,EAAO,QAAQ,SAAU,UAAA3B,GAAM;AAAA,IAClD,gBAAA4B,EAACC,GAAA,EAAgB,SAAApB,GAAkB,WAAAJ,GAClC,UAAA;AAAA,MAAA,gBAAAe;AAAA,QAACU;AAAA,QAAA;AAAA,UACA,aAAWtB,EAAK,WAAW;AAAA,UAC3B,OAAAP;AAAA,UACA,aAAAG;AAAA,UACA,WAAAD;AAAA,UACA,SAAS,MAAMO,EAAW,EAAI;AAAA,UAC9B,QAAQ,MAAMA,EAAW,EAAK;AAAA,UAC9B,UAAU,CAACQ,MAAMhB,EAASgB,EAAE,OAAO,KAAK;AAAA,QAAA;AAAA,MAAA;AAAA,MAExCC;AAAA,IAAA,EAAA,CACF;AAAA,EAAA,GACD;AAEF,GAEME,IAAaU,EAAO;AAAA;AAAA;AAAA;"}

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

@@ -0,0 +1,26 @@
+import { default as React } from 'react';
+import { VariableListInterfaceV3 } from '../../variable-picker-v3/model';
+interface VariableInlineFieldProps {
+    /** Stored string, `{{variable:<name>}}` tokens inline (e.g. a URL). */
+    value: string;
+    onChange: (text: string) => void;
+    label?: string;
+    placeholder?: string;
+    /** Variable catalog. Absent / empty → behaves as a plain single-line input. */
+    variablesData?: VariableListInterfaceV3[];
+    'data-test'?: string;
+}
+/**
+ * Single-line text field whose `{{variable:<name>}}` tokens render as the
+ * SAME purple `{{<name>}}` chips as the Instructions / Guardrails editors —
+ * BikEditor under the hood, styled like the small `Input`. Used for tool
+ * params that mix free text with variables (Request URL, header values).
+ *
+ * `@` opens the variable panel: after whitespace / at the start via the
+ * editor's native mention trigger, after URL/JSON delimiters (`https://@`)
+ * via the {@link VariableTriggerArea} wrapper — both render the same
+ * {@link MentionPicker}. Enter is swallowed (single-line), and any pasted
+ * newlines are dropped on serialize.
+ */
+export declare const VariableInlineField: React.FC<VariableInlineFieldProps>;
+export {};

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

@@ -0,0 +1,149 @@
+import { jsxs as y, jsx as i } from "react/jsx-runtime";
+import { useRef as v, useMemo as p, useCallback as d } from "react";
+import m, { css as k } from "styled-components";
+import { TitleSmall as I } from "../../TypographyStyle.js";
+import { COLORS as r } from "../../../constants/Theme.js";
+import { buildVariableMentionItems as S, instructionsToEditorHtml as M, buildMentionHtml as T, variableTokenName as u, editorDocToInstructions as C } from "../utils/mentionSerialization.js";
+import { MentionPicker as H } from "./MentionPicker.js";
+import { VariableTriggerArea as E } from "./VariableTriggerArea.js";
+import { BikEditor as N } from "../../../editor/BikEditor.js";
+const $ = (t) => u(t).replace(/^variable:/, ""), J = ({
+  value: t,
+  onChange: a,
+  label: h,
+  placeholder: w,
+  variablesData: o,
+  ...f
+}) => {
+  const n = v(null), l = (o?.length ?? 0) > 0, c = p(
+    () => S(o),
+    [o]
+  ), g = p(
+    () => M(t, c),
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [l]
+  ), s = d((e) => {
+    n.current?.insertInlineContent(
+      T(e, `{{${e}}}`, "variable")
+    );
+  }, []), b = d(
+    (e) => s(u(e.actualValue)),
+    [s]
+  ), x = d(() => {
+    const e = n.current?.getJSON() ?? null;
+    a(C(e, []).replace(/\n+/g, ""));
+  }, [a]);
+  return /* @__PURE__ */ y(P, { children: [
+    h && /* @__PURE__ */ i(I, { color: r.content.primary, children: h }),
+    /* @__PURE__ */ i(
+      E,
+      {
+        variablesData: o,
+        addDataButton: !0,
+        skipNativeBoundaries: !0,
+        onInsert: (e) => s($(e)),
+        children: /* @__PURE__ */ i(V, { $atHint: l, "data-test": f["data-test"], children: /* @__PURE__ */ i(
+          N,
+          {
+            ref: n,
+            initialContent: g,
+            placeholder: w,
+            minHeight: "20px",
+            maxHeight: "20px",
+            style: { border: "none" },
+            editorStyle: O,
+            onSend: () => {
+            },
+            sendShortcut: { key: "Enter" },
+            mentions: {
+              agents: c,
+              removeTriggerOnDismiss: !0,
+              renderDropdown: (e) => /* @__PURE__ */ i(
+                H,
+                {
+                  ...e,
+                  variablesData: o,
+                  onSelectVariable: b
+                }
+              )
+            },
+            onChange: x
+          },
+          l ? "v1" : "v0"
+        ) })
+      }
+    )
+  ] });
+}, O = {
+  padding: 0,
+  fontFamily: "Inter",
+  fontSize: "14px",
+  lineHeight: "20px"
+}, P = m.div`
+	display: flex;
+	flex-direction: column;
+	gap: 4px;
+	width: 100%;
+	/* In a flex row (header key/value pairs) share the space and allow
+	   shrinking below content width — long values scroll inside the field
+	   instead of widening the row / drawer. */
+	flex: 1 1 0%;
+	min-width: 0;
+`, V = m.div`
+	/* No global reset in every host — without this, width:100% + padding
+	   overflows the drawer by the padding + border (the reported overflow). */
+	box-sizing: border-box;
+	display: flex;
+	align-items: center;
+	width: 100%;
+	min-width: 0;
+	overflow: hidden;
+	padding: 6px 12px;
+	background: ${r.surface.standard};
+	border: 1px solid ${r.stroke.primary};
+	border-radius: 4px;
+
+	/* The editor root is width:100% — cap it so a long value scrolls inside
+	   the ProseMirror line rather than stretching the shell. */
+	> div {
+		width: 100%;
+		min-width: 0;
+	}
+
+	&:focus-within {
+		border-color: ${r.stroke.brand};
+	}
+
+	/* While the (empty) field is focused, the placeholder switches to the @
+	   hint — only when a catalog makes @ do anything; unfocused (or without
+	   variables) it shows the field's own placeholder. */
+	${(t) => t.$atHint && k`
+			.ProseMirror.ProseMirror-focused p.is-editor-empty:first-child::before {
+				content: 'Enter text, type @ to add variable';
+			}
+		`}
+
+	/* Keep the editor to one visual line; long values scroll horizontally the
+	   way a native input does. */
+	.ProseMirror {
+		width: 100%;
+		max-width: 100%;
+		white-space: nowrap;
+		overflow-x: auto;
+		overflow-y: hidden;
+		word-break: normal;
+		scrollbar-width: none;
+
+		&::-webkit-scrollbar {
+			display: none;
+		}
+	}
+
+	.ProseMirror p {
+		display: inline;
+	}
+`;
+export {
+  J as VariableInlineField
+};
+//# sourceMappingURL=VariableInlineField.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"VariableInlineField.js","sources":["../../../../../src/components/agent-builder/components/VariableInlineField.tsx"],"sourcesContent":["import { BikEditor, BikEditorRef } from '@src/editor';\nimport React, { useCallback, useMemo, useRef } from 'react';\nimport styled, { css } from 'styled-components';\nimport { TitleSmall } from '@src/components/TypographyStyle';\nimport { COLORS } from '@src/constants/Theme';\nimport type {\n\tVariableListInterfaceV3,\n\tVariableV3,\n} from '../../variable-picker-v3/model';\nimport {\n\tbuildMentionHtml,\n\tbuildVariableMentionItems,\n\teditorDocToInstructions,\n\tinstructionsToEditorHtml,\n\tvariableTokenName,\n} from '../utils/mentionSerialization';\nimport { MentionPicker } from './MentionPicker';\nimport { VariableTriggerArea } from './VariableTriggerArea';\n\ninterface VariableInlineFieldProps {\n\t/** Stored string, `{{variable:<name>}}` tokens inline (e.g. a URL). */\n\tvalue: string;\n\tonChange: (text: string) => void;\n\tlabel?: string;\n\tplaceholder?: string;\n\t/** Variable catalog. Absent / empty → behaves as a plain single-line input. */\n\tvariablesData?: VariableListInterfaceV3[];\n\t'data-test'?: string;\n}\n\n/** `{{variable:a.b}}` / `{{a.b}}` → `a.b`. */\nconst nameOf = (token: string): string =>\n\tvariableTokenName(token).replace(/^variable:/, '');\n\n/**\n * Single-line text field whose `{{variable:<name>}}` tokens render as the\n * SAME purple `{{<name>}}` chips as the Instructions / Guardrails editors —\n * BikEditor under the hood, styled like the small `Input`. Used for tool\n * params that mix free text with variables (Request URL, header values).\n *\n * `@` opens the variable panel: after whitespace / at the start via the\n * editor's native mention trigger, after URL/JSON delimiters (`https://@`)\n * via the {@link VariableTriggerArea} wrapper — both render the same\n * {@link MentionPicker}. Enter is swallowed (single-line), and any pasted\n * newlines are dropped on serialize.\n */\nexport const VariableInlineField: React.FC<VariableInlineFieldProps> = ({\n\tvalue,\n\tonChange,\n\tlabel,\n\tplaceholder,\n\tvariablesData,\n\t...rest\n}) => {\n\tconst editorRef = useRef<BikEditorRef>(null);\n\n\tconst hasVariables = (variablesData?.length ?? 0) > 0;\n\tconst mentionItems = useMemo(\n\t\t() => buildVariableMentionItems(variablesData),\n\t\t[variablesData],\n\t);\n\n\t// Initial HTML — the field is uncontrolled after mount (the drawers key\n\t// their fields per open), EXCEPT when the variable catalog first arrives\n\t// (async fetch): the editor re-mounts (keyed below) so stored\n\t// `{{variable:…}}` tokens become chips instead of staying literal text.\n\t// `value` is kept current by onChange, so the re-seed loses nothing.\n\tconst initialHtml = useMemo(\n\t\t() => instructionsToEditorHtml(value, mentionItems),\n\t\t// eslint-disable-next-line react-hooks/exhaustive-deps\n\t\t[hasVariables],\n\t);\n\n\t// Insert the purple `{{<name>}}` chip; serialization emits the stored\n\t// `{{variable:<name>}}` token (same path as the instructions editors).\n\t// Single construction site for BOTH trigger paths (native `@` suggestion\n\t// and the VariableTriggerArea wrapper) so the chip flavor can't diverge.\n\tconst insertChipByName = useCallback((name: string) => {\n\t\teditorRef.current?.insertInlineContent(\n\t\t\tbuildMentionHtml(name, `{{${name}}}`, 'variable'),\n\t\t);\n\t}, []);\n\tconst insertChip = useCallback(\n\t\t(variable: VariableV3) =>\n\t\t\tinsertChipByName(variableTokenName(variable.actualValue)),\n\t\t[insertChipByName],\n\t);\n\n\tconst emitChange = useCallback(() => {\n\t\tconst doc = editorRef.current?.getJSON() ?? null;\n\t\t// Single-line: pasted newlines have no meaning in a URL / header value.\n\t\tonChange(editorDocToInstructions(doc, []).replace(/\\n+/g, ''));\n\t}, [onChange]);\n\n\treturn (\n\t\t<FieldBlockCol>\n\t\t\t{label && <TitleSmall color={COLORS.content.primary}>{label}</TitleSmall>}\n\t\t\t<VariableTriggerArea\n\t\t\t\tvariablesData={variablesData}\n\t\t\t\taddDataButton\n\t\t\t\tskipNativeBoundaries\n\t\t\t\tonInsert={(token) => insertChipByName(nameOf(token))}\n\t\t\t>\n\t\t\t\t<InputShell $atHint={hasVariables} data-test={rest['data-test']}>\n\t\t\t\t\t<BikEditor\n\t\t\t\t\t\tkey={hasVariables ? 'v1' : 'v0'}\n\t\t\t\t\t\tref={editorRef}\n\t\t\t\t\t\tinitialContent={initialHtml}\n\t\t\t\t\t\tplaceholder={placeholder}\n\t\t\t\t\t\tminHeight=\"20px\"\n\t\t\t\t\t\tmaxHeight=\"20px\"\n\t\t\t\t\t\tstyle={{ border: 'none' }}\n\t\t\t\t\t\teditorStyle={INLINE_EDITOR_STYLE}\n\t\t\t\t\t\t// Single-line: Enter is a no-op \"send\".\n\t\t\t\t\t\tonSend={() => undefined}\n\t\t\t\t\t\tsendShortcut={{ key: 'Enter' }}\n\t\t\t\t\t\tmentions={{\n\t\t\t\t\t\t\tagents: mentionItems,\n\t\t\t\t\t\t\tremoveTriggerOnDismiss: true,\n\t\t\t\t\t\t\trenderDropdown: (props) => (\n\t\t\t\t\t\t\t\t<MentionPicker\n\t\t\t\t\t\t\t\t\t{...props}\n\t\t\t\t\t\t\t\t\tvariablesData={variablesData}\n\t\t\t\t\t\t\t\t\tonSelectVariable={insertChip}\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\tonChange={emitChange}\n\t\t\t\t\t/>\n\t\t\t\t</InputShell>\n\t\t\t</VariableTriggerArea>\n\t\t</FieldBlockCol>\n\t);\n};\n\nconst INLINE_EDITOR_STYLE: React.CSSProperties = {\n\tpadding: 0,\n\tfontFamily: 'Inter',\n\tfontSize: '14px',\n\tlineHeight: '20px',\n};\n\nconst FieldBlockCol = styled.div`\n\tdisplay: flex;\n\tflex-direction: column;\n\tgap: 4px;\n\twidth: 100%;\n\t/* In a flex row (header key/value pairs) share the space and allow\n\t   shrinking below content width — long values scroll inside the field\n\t   instead of widening the row / drawer. */\n\tflex: 1 1 0%;\n\tmin-width: 0;\n`;\n\n// Mirrors the small Input's box (border, radius, padding, focus ring) around\n// the single-line editor.\nconst InputShell = styled.div<{ $atHint: boolean }>`\n\t/* No global reset in every host — without this, width:100% + padding\n\t   overflows the drawer by the padding + border (the reported overflow). */\n\tbox-sizing: border-box;\n\tdisplay: flex;\n\talign-items: center;\n\twidth: 100%;\n\tmin-width: 0;\n\toverflow: hidden;\n\tpadding: 6px 12px;\n\tbackground: ${COLORS.surface.standard};\n\tborder: 1px solid ${COLORS.stroke.primary};\n\tborder-radius: 4px;\n\n\t/* The editor root is width:100% — cap it so a long value scrolls inside\n\t   the ProseMirror line rather than stretching the shell. */\n\t> div {\n\t\twidth: 100%;\n\t\tmin-width: 0;\n\t}\n\n\t&:focus-within {\n\t\tborder-color: ${COLORS.stroke.brand};\n\t}\n\n\t/* While the (empty) field is focused, the placeholder switches to the @\n\t   hint — only when a catalog makes @ do anything; unfocused (or without\n\t   variables) it shows the field's own placeholder. */\n\t${(p) =>\n\t\tp.$atHint &&\n\t\tcss`\n\t\t\t.ProseMirror.ProseMirror-focused p.is-editor-empty:first-child::before {\n\t\t\t\tcontent: 'Enter text, type @ to add variable';\n\t\t\t}\n\t\t`}\n\n\t/* Keep the editor to one visual line; long values scroll horizontally the\n\t   way a native input does. */\n\t.ProseMirror {\n\t\twidth: 100%;\n\t\tmax-width: 100%;\n\t\twhite-space: nowrap;\n\t\toverflow-x: auto;\n\t\toverflow-y: hidden;\n\t\tword-break: normal;\n\t\tscrollbar-width: none;\n\n\t\t&::-webkit-scrollbar {\n\t\t\tdisplay: none;\n\t\t}\n\t}\n\n\t.ProseMirror p {\n\t\tdisplay: inline;\n\t}\n`;\n"],"names":["nameOf","token","variableTokenName","VariableInlineField","value","onChange","label","placeholder","variablesData","rest","editorRef","useRef","hasVariables","mentionItems","useMemo","buildVariableMentionItems","initialHtml","instructionsToEditorHtml","insertChipByName","useCallback","name","buildMentionHtml","insertChip","variable","emitChange","doc","editorDocToInstructions","FieldBlockCol","TitleSmall","COLORS","jsx","VariableTriggerArea","InputShell","BikEditor","INLINE_EDITOR_STYLE","props","MentionPicker","styled","p","css"],"mappings":"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"}

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

@@ -0,0 +1,46 @@
+import { default as React } from 'react';
+import { VariableListInterfaceV3, VariableV3 } from '../../variable-picker-v3/model';
+/** The persisted form of a picked variable (`{{variable:<name>}}`). */
+export declare const variableToken: (variable: VariableV3) => string;
+interface VariableTriggerAreaProps {
+    /** Variable catalog. Absent / empty → the wrapper is inert (children only). */
+    variablesData?: VariableListInterfaceV3[];
+    /**
+     * Insert `token` into the wrapped field. `caret` is the character index the
+     * `@` was typed at (input / textarea targets — splice the token in there);
+     * null for rich-editor targets (insert at the editor's own cursor).
+     */
+    onInsert: (token: string, caret: number | null) => void;
+    /**
+     * Show the floating "+ Add data" pill while the wrapped field is focused.
+     * Clicking it opens this same variable panel at the field's caret — the
+     * button equivalent of typing `@`.
+     */
+    addDataButton?: boolean;
+    /**
+     * The wrapped field is a BikEditor whose OWN `@` mention trigger already
+     * fires after whitespace / at the start — this wrapper then only handles
+     * the delimiter boundaries the native trigger misses (`https://@`, `"@`…),
+     * so the two never open a panel for the same keystroke.
+     */
+    skipNativeBoundaries?: boolean;
+    /**
+     * Observes the panel's open state. Fields that commit on blur (the email
+     * chips entry) use this to hold off while focus is bouncing through the
+     * panel — blur-time focus targets are unreliable mid-transition.
+     */
+    onOpenChange?: (open: boolean) => void;
+    children: React.ReactNode;
+}
+/**
+ * Wraps any plain field (input / textarea / chips entry / BikEditor) and opens
+ * the shared {@link VariablePicker} as a floating panel when `@` is typed at a
+ * word boundary. The `@` keystroke itself is swallowed (never reaches the
+ * field); picking a variable calls `onInsert` with the `{{variable:<name>}}`
+ * token, and Escape / click-outside / the panel's ✕ just closes the panel.
+ *
+ * Purely presentational wrapper — it renders a `position: relative` block, so
+ * the wrapped field must be happy inside a plain block container.
+ */
+export declare const VariableTriggerArea: React.FC<VariableTriggerAreaProps>;
+export {};

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

@@ -0,0 +1,118 @@
+import { jsxs as y, jsx as v } from "react/jsx-runtime";
+import { useRef as h, useState as T, useCallback as D, useEffect as F } from "react";
+import A from "styled-components";
+import { AddDataPill as S } from "../../add-variableV2/AddDataPill.js";
+import { variableTokenName as $ } from "../utils/mentionSerialization.js";
+import { MentionPicker as M } from "./MentionPicker.js";
+const N = (e) => `{{variable:${$(e.actualValue)}}}`, E = /[\s,;:/?&=({[<"']/, P = /[,;:/?&=({[<"']/, k = (e, l, u) => {
+  if (e instanceof HTMLInputElement || e instanceof HTMLTextAreaElement) {
+    const c = e.selectionStart ?? e.value.length, a = c === 0, n = a ? " " : e.value[c - 1] ?? " ";
+    return { ok: a ? !u : l.test(n), caret: c };
+  }
+  const i = window.getSelection(), d = i?.anchorNode?.textContent ?? "", f = i?.anchorOffset ?? 0, r = f === 0, p = r ? " " : d[f - 1] ?? " ";
+  return { ok: r ? !u : l.test(p), caret: null };
+}, U = ({
+  variablesData: e,
+  onInsert: l,
+  addDataButton: u,
+  skipNativeBoundaries: i,
+  onOpenChange: d,
+  children: f
+}) => {
+  const r = h(null), [p, c] = T(!1), a = h(null), [n, b] = T(null), g = (e?.length ?? 0) > 0, x = (t) => {
+    b(t), d?.(!0);
+  }, m = () => {
+    b(null), d?.(!1);
+  }, w = () => {
+    const t = r.current?.getBoundingClientRect();
+    return {
+      above: !!t && window.innerHeight - t.bottom < 385,
+      alignRight: !!t && window.innerWidth - t.left < 360
+    };
+  }, L = D(
+    (t) => {
+      if (!g || t.key !== "@")
+        return;
+      const o = k(
+        t.target,
+        i ? P : E,
+        !!i
+      );
+      o.ok && (t.preventDefault(), t.stopPropagation(), x({ caret: o.caret, ...w() }));
+    },
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [g]
+  ), R = () => {
+    const t = k(a.current, E, !1);
+    x({ caret: t.caret, ...w() });
+  };
+  return F(() => {
+    if (!n)
+      return;
+    const t = (s) => {
+      s.key === "Escape" && (s.stopPropagation(), m());
+    }, o = (s) => {
+      r.current?.contains(s.target) || m();
+    };
+    return document.addEventListener("keydown", t, !0), document.addEventListener("mousedown", o), () => {
+      document.removeEventListener("keydown", t, !0), document.removeEventListener("mousedown", o);
+    };
+  }, [n]), /* @__PURE__ */ y(
+    B,
+    {
+      ref: r,
+      onKeyDownCapture: L,
+      onFocus: (t) => {
+        t.target.closest?.(
+          '[data-test="variable-trigger-panel"]'
+        ) || (a.current = t.target, c(!0));
+      },
+      onBlur: () => c(!1),
+      children: [
+        f,
+        u && g && (p || n) && /* @__PURE__ */ v(S, { label: "Add variable", onOpen: R }),
+        n && /* @__PURE__ */ v(
+          C,
+          {
+            $above: n.above,
+            $right: n.alignRight,
+            "data-test": "variable-trigger-panel",
+            onMouseDown: (t) => {
+              t.target.closest("input") || t.preventDefault();
+            },
+            children: /* @__PURE__ */ v(
+              M,
+              {
+                items: [],
+                query: "",
+                activeIndex: -1,
+                onSelect: () => {
+                },
+                onClose: m,
+                variablesData: e,
+                onSelectVariable: (t) => {
+                  m();
+                  const o = a.current, s = o instanceof HTMLInputElement || o instanceof HTMLTextAreaElement ? o.selectionStart ?? n.caret : n.caret;
+                  l(N(t), s);
+                }
+              }
+            )
+          }
+        )
+      ]
+    }
+  );
+}, B = A.div`
+	position: relative;
+`, C = A.div`
+	position: absolute;
+	z-index: 1000;
+	width: 344px;
+	${(e) => e.$right ? "right: 0;" : "left: 0;"}
+	${(e) => e.$above ? "bottom: calc(100% + 4px);" : "top: calc(100% + 4px);"}
+`;
+export {
+  U as VariableTriggerArea,
+  N as variableToken
+};
+//# sourceMappingURL=VariableTriggerArea.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"VariableTriggerArea.js","sources":["../../../../../src/components/agent-builder/components/VariableTriggerArea.tsx"],"sourcesContent":["import React, { useCallback, useEffect, useRef, useState } from 'react';\nimport styled from 'styled-components';\nimport { AddDataPill } from '../../add-variableV2/AddDataPill';\nimport type {\n\tVariableListInterfaceV3,\n\tVariableV3,\n} from '../../variable-picker-v3/model';\nimport { variableTokenName } from '../utils/mentionSerialization';\nimport { MentionPicker } from './MentionPicker';\n\n/** The persisted form of a picked variable (`{{variable:<name>}}`). */\nexport const variableToken = (variable: VariableV3): string =>\n\t`{{variable:${variableTokenName(variable.actualValue)}}}`;\n\n/**\n * Boundary test for the `@` trigger: an `@` typed at the start of the field or\n * after a separator opens the picker. The separator set covers URL and JSON\n * delimiters too (`https://@`, `Bearer=@`, `\"@`, `[@`) — an email address's `@`\n * always follows a letter / digit / dot, so `john@acme.com` still types\n * through untouched. Returns the caret index for input / textarea targets\n * (where the caller can splice the token in), null for contenteditable ones.\n */\n// Opening delimiters trigger; closing ones (`}` `)` `]` `>`) deliberately do\n// NOT — typing a literal `@` right after an inserted `{{token}}` (e.g.\n// `{{store_name}}@acme.com`) must stay literal.\nconst BOUNDARY = /[\\s,;:/?&=({[<\"']/;\n// The subset the editor's own `@` mention trigger does NOT handle (it only\n// fires after whitespace / at the start) — used by `skipNativeBoundaries`\n// fields so the two triggers never fire for the same keystroke.\nconst NON_NATIVE_BOUNDARY = /[,;:/?&=({[<\"']/;\n\nconst triggerContext = (\n\ttarget: EventTarget | null,\n\tboundary: RegExp,\n\tskipStart: boolean,\n): { ok: boolean; caret: number | null } => {\n\tif (\n\t\ttarget instanceof HTMLInputElement ||\n\t\ttarget instanceof HTMLTextAreaElement\n\t) {\n\t\tconst caret = target.selectionStart ?? target.value.length;\n\t\tconst atStart = caret === 0;\n\t\tconst prev = atStart ? ' ' : target.value[caret - 1] ?? ' ';\n\t\treturn { ok: atStart ? !skipStart : boundary.test(prev), caret };\n\t}\n\t// Rich editor (ProseMirror contenteditable): read the character before the\n\t// selection.\n\tconst sel = window.getSelection();\n\tconst text = sel?.anchorNode?.textContent ?? '';\n\tconst offset = sel?.anchorOffset ?? 0;\n\tconst atStart = offset === 0;\n\tconst prev = atStart ? ' ' : text[offset - 1] ?? ' ';\n\treturn { ok: atStart ? !skipStart : boundary.test(prev), caret: null };\n};\n\ninterface VariableTriggerAreaProps {\n\t/** Variable catalog. Absent / empty → the wrapper is inert (children only). */\n\tvariablesData?: VariableListInterfaceV3[];\n\t/**\n\t * Insert `token` into the wrapped field. `caret` is the character index the\n\t * `@` was typed at (input / textarea targets — splice the token in there);\n\t * null for rich-editor targets (insert at the editor's own cursor).\n\t */\n\tonInsert: (token: string, caret: number | null) => void;\n\t/**\n\t * Show the floating \"+ Add data\" pill while the wrapped field is focused.\n\t * Clicking it opens this same variable panel at the field's caret — the\n\t * button equivalent of typing `@`.\n\t */\n\taddDataButton?: boolean;\n\t/**\n\t * The wrapped field is a BikEditor whose OWN `@` mention trigger already\n\t * fires after whitespace / at the start — this wrapper then only handles\n\t * the delimiter boundaries the native trigger misses (`https://@`, `\"@`…),\n\t * so the two never open a panel for the same keystroke.\n\t */\n\tskipNativeBoundaries?: boolean;\n\t/**\n\t * Observes the panel's open state. Fields that commit on blur (the email\n\t * chips entry) use this to hold off while focus is bouncing through the\n\t * panel — blur-time focus targets are unreliable mid-transition.\n\t */\n\tonOpenChange?: (open: boolean) => void;\n\tchildren: React.ReactNode;\n}\n\n/**\n * Wraps any plain field (input / textarea / chips entry / BikEditor) and opens\n * the shared {@link VariablePicker} as a floating panel when `@` is typed at a\n * word boundary. The `@` keystroke itself is swallowed (never reaches the\n * field); picking a variable calls `onInsert` with the `{{variable:<name>}}`\n * token, and Escape / click-outside / the panel's ✕ just closes the panel.\n *\n * Purely presentational wrapper — it renders a `position: relative` block, so\n * the wrapped field must be happy inside a plain block container.\n */\nexport const VariableTriggerArea: React.FC<VariableTriggerAreaProps> = ({\n\tvariablesData,\n\tonInsert,\n\taddDataButton,\n\tskipNativeBoundaries,\n\tonOpenChange,\n\tchildren,\n}) => {\n\tconst containerRef = useRef<HTMLDivElement>(null);\n\t// Whether the wrapped field (any focusable inside) currently has focus, and\n\t// the element that had it — the pill inserts at that element's caret.\n\tconst [fieldFocused, setFieldFocused] = useState(false);\n\tconst lastFocusedRef = useRef<EventTarget | null>(null);\n\t// Non-null while the panel is open: where to put the token when picked, and\n\t// which way the panel flips to stay on screen (above when there's no room\n\t// below, right-aligned when the field sits too close to the right edge —\n\t// e.g. header-value inputs in the Rest API drawer).\n\tconst [trigger, setTrigger] = useState<{\n\t\tcaret: number | null;\n\t\tabove: boolean;\n\t\talignRight: boolean;\n\t} | null>(null);\n\n\tconst enabled = (variablesData?.length ?? 0) > 0;\n\n\tconst openPanel = (t: NonNullable<typeof trigger>) => {\n\t\tsetTrigger(t);\n\t\tonOpenChange?.(true);\n\t};\n\tconst closePanel = () => {\n\t\tsetTrigger(null);\n\t\tonOpenChange?.(false);\n\t};\n\n\t// Panel is ~344px wide / ~385px tall (the MentionPicker card in its\n\t// variables view, plus a little slack), anchored to the field's left edge —\n\t// flip above / right-align when it would spill past the viewport (avoids\n\t// the drawer growing scrollbars).\n\tconst placement = () => {\n\t\tconst rect = containerRef.current?.getBoundingClientRect();\n\t\treturn {\n\t\t\tabove: !!rect && window.innerHeight - rect.bottom < 385,\n\t\t\talignRight: !!rect && window.innerWidth - rect.left < 360,\n\t\t};\n\t};\n\n\tconst onKeyDownCapture = useCallback(\n\t\t(e: React.KeyboardEvent) => {\n\t\t\tif (!enabled || e.key !== '@') {\n\t\t\t\treturn;\n\t\t\t}\n\t\t\tconst ctx = triggerContext(\n\t\t\t\te.target,\n\t\t\t\tskipNativeBoundaries ? NON_NATIVE_BOUNDARY : BOUNDARY,\n\t\t\t\t!!skipNativeBoundaries,\n\t\t\t);\n\t\t\tif (!ctx.ok) {\n\t\t\t\treturn;\n\t\t\t}\n\t\t\t// Swallow the `@` so the field's value stays untouched while picking.\n\t\t\te.preventDefault();\n\t\t\te.stopPropagation();\n\t\t\topenPanel({ caret: ctx.caret, ...placement() });\n\t\t},\n\t\t// eslint-disable-next-line react-hooks/exhaustive-deps\n\t\t[enabled],\n\t);\n\n\t// The pill's click — same panel, anchored at the focused field's caret (no\n\t// boundary rule: an explicit button click is always intentional).\n\tconst openFromButton = () => {\n\t\tconst ctx = triggerContext(lastFocusedRef.current, BOUNDARY, false);\n\t\topenPanel({ caret: ctx.caret, ...placement() });\n\t};\n\n\t// Escape / click-outside dismiss, active only while open.\n\tuseEffect(() => {\n\t\tif (!trigger) {\n\t\t\treturn;\n\t\t}\n\t\tconst onKey = (e: KeyboardEvent) => {\n\t\t\tif (e.key === 'Escape') {\n\t\t\t\te.stopPropagation();\n\t\t\t\tclosePanel();\n\t\t\t}\n\t\t};\n\t\tconst onDown = (e: MouseEvent) => {\n\t\t\tif (!containerRef.current?.contains(e.target as Node)) {\n\t\t\t\tclosePanel();\n\t\t\t}\n\t\t};\n\t\t// Capture phase so an Escape meant for the panel never also closes the\n\t\t// drawer underneath.\n\t\tdocument.addEventListener('keydown', onKey, true);\n\t\tdocument.addEventListener('mousedown', onDown);\n\t\treturn () => {\n\t\t\tdocument.removeEventListener('keydown', onKey, true);\n\t\t\tdocument.removeEventListener('mousedown', onDown);\n\t\t};\n\t}, [trigger]);\n\n\treturn (\n\t\t<TriggerWrap\n\t\t\tref={containerRef}\n\t\t\tonKeyDownCapture={onKeyDownCapture}\n\t\t\t// React's focus/blur bubble — this tracks any focusable child (the\n\t\t\t// input, a chips entry, the ProseMirror contenteditable).\n\t\t\tonFocus={(e) => {\n\t\t\t\t// Focus landing inside the floating panel (its search box) is not\n\t\t\t\t// the field — inserting at \"its caret\" would target the wrong input.\n\t\t\t\tif (\n\t\t\t\t\t(e.target as HTMLElement).closest?.(\n\t\t\t\t\t\t'[data-test=\"variable-trigger-panel\"]',\n\t\t\t\t\t)\n\t\t\t\t) {\n\t\t\t\t\treturn;\n\t\t\t\t}\n\t\t\t\tlastFocusedRef.current = e.target;\n\t\t\t\tsetFieldFocused(true);\n\t\t\t}}\n\t\t\tonBlur={() => setFieldFocused(false)}\n\t\t>\n\t\t\t{children}\n\t\t\t{addDataButton && enabled && (fieldFocused || trigger) && (\n\t\t\t\t<AddDataPill label=\"Add variable\" onOpen={openFromButton} />\n\t\t\t)}\n\t\t\t{trigger && (\n\t\t\t\t<FloaterBox\n\t\t\t\t\t$above={trigger.above}\n\t\t\t\t\t$right={trigger.alignRight}\n\t\t\t\t\tdata-test=\"variable-trigger-panel\"\n\t\t\t\t\t// Keep the field focused while clicking rows (a blur mid-pick\n\t\t\t\t\t// would e.g. commit a half-typed email chip). The panel's own\n\t\t\t\t\t// inputs (search) still take focus normally.\n\t\t\t\t\tonMouseDown={(e) => {\n\t\t\t\t\t\tconst t = e.target as HTMLElement;\n\t\t\t\t\t\tif (!t.closest('input')) {\n\t\t\t\t\t\t\te.preventDefault();\n\t\t\t\t\t\t}\n\t\t\t\t\t}}\n\t\t\t\t>\n\t\t\t\t\t{/* The EXACT panel the Instructions / Guardrails @ opens: with no\n\t\t\t\t\t    tools / sub-agents, Variables is its sole category, so it\n\t\t\t\t\t    renders the \"Variables\" header + variable list directly. */}\n\t\t\t\t\t<MentionPicker\n\t\t\t\t\t\titems={[]}\n\t\t\t\t\t\tquery=\"\"\n\t\t\t\t\t\tactiveIndex={-1}\n\t\t\t\t\t\tonSelect={() => undefined}\n\t\t\t\t\t\tonClose={closePanel}\n\t\t\t\t\t\tvariablesData={variablesData}\n\t\t\t\t\t\tonSelectVariable={(variable: VariableV3) => {\n\t\t\t\t\t\t\tclosePanel();\n\t\t\t\t\t\t\t// Re-read the caret at PICK time: the user may have clicked\n\t\t\t\t\t\t\t// elsewhere in the field since the `@` (the panel stays open\n\t\t\t\t\t\t\t// for clicks inside the wrapper), and an input keeps its\n\t\t\t\t\t\t\t// selection while unfocused — trigger.caret is the fallback.\n\t\t\t\t\t\t\tconst el = lastFocusedRef.current;\n\t\t\t\t\t\t\tconst caret =\n\t\t\t\t\t\t\t\tel instanceof HTMLInputElement ||\n\t\t\t\t\t\t\t\tel instanceof HTMLTextAreaElement\n\t\t\t\t\t\t\t\t\t? el.selectionStart ?? trigger.caret\n\t\t\t\t\t\t\t\t\t: trigger.caret;\n\t\t\t\t\t\t\tonInsert(variableToken(variable), caret);\n\t\t\t\t\t\t}}\n\t\t\t\t\t/>\n\t\t\t\t</FloaterBox>\n\t\t\t)}\n\t\t</TriggerWrap>\n\t);\n};\n\nconst TriggerWrap = styled.div`\n\tposition: relative;\n`;\n\n// Floats under (or over) the wrapped field; the MentionPicker inside brings\n// its own card chrome (same as the Instructions / Guardrails @ menu). High\n// z-index: these fields live inside side-modal drawers.\nconst FloaterBox = styled.div<{ $above: boolean; $right: boolean }>`\n\tposition: absolute;\n\tz-index: 1000;\n\twidth: 344px;\n\t${(p) => (p.$right ? 'right: 0;' : 'left: 0;')}\n\t${(p) => (p.$above ? 'bottom: calc(100% + 4px);' : 'top: calc(100% + 4px);')}\n`;\n"],"names":["variableToken","variable","variableTokenName","BOUNDARY","NON_NATIVE_BOUNDARY","triggerContext","target","boundary","skipStart","caret","atStart","prev","sel","text","offset","VariableTriggerArea","variablesData","onInsert","addDataButton","skipNativeBoundaries","onOpenChange","children","containerRef","useRef","fieldFocused","setFieldFocused","useState","lastFocusedRef","trigger","setTrigger","enabled","openPanel","closePanel","placement","rect","onKeyDownCapture","useCallback","e","ctx","openFromButton","useEffect","onKey","onDown","jsxs","TriggerWrap","AddDataPill","jsx","FloaterBox","MentionPicker","el","styled","p"],"mappings":"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"}

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

@@ -6,7 +6,7 @@ import { FunctionComponent, SVGAttributes } from 'react';
  * sees are all in one obvious place.
  */
 /** A reference-picker category tab. */
-export type Category = 'tool' | 'subagent';
+export type Category = 'tool' | 'subagent' | 'variable';
 /** Category tabs shown at the root of the `@` reference picker. */
 export declare const CATEGORIES: {
     key: Category;

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

@@ -1,9 +1,10 @@
-const O = [
+const r = [
   { key: "tool", label: "Tools" },
-  { key: "subagent", label: "Sub-agent" }
+  { key: "subagent", label: "Sub-agent" },
+  { key: "variable", label: "Variables" }
 ];
-var t = /* @__PURE__ */ ((i) => (i.Manifest = "manifest", i.Shopify = "shopify", i.Bigcommerce = "bigcommerce", i.Shipstation = "shipstation", i.Skio = "skio", i.Gorgias = "gorgias", i.Integration = "integration", i.RestApi = "rest_api", i.EmailHandover = "email_handover", i.Slack = "slack", i))(t || {});
-const r = {
+var a = /* @__PURE__ */ ((i) => (i.Manifest = "manifest", i.Shopify = "shopify", i.Bigcommerce = "bigcommerce", i.Shipstation = "shipstation", i.Skio = "skio", i.Gorgias = "gorgias", i.Integration = "integration", i.RestApi = "rest_api", i.EmailHandover = "email_handover", i.Slack = "slack", i))(a || {});
+const O = {
   manifest: "Manifest",
   shopify: "Shopify",
   bigcommerce: "BigCommerce",
@@ -38,7 +39,7 @@ const r = {
   // Send Email then REST API sit after the integration sources at the top level.
   email_handover: 7,
   rest_api: 8
-}, a = [
+}, e = [
   "shopify",
   "bigcommerce",
   "shipstation",
@@ -46,29 +47,29 @@ const r = {
   "gorgias",
   "integration"
   /* Integration */
-], e = new Set(a), g = (i) => e.has(i), n = [
+], t = new Set(e), g = (i) => t.has(i), n = [
   "shipstation",
   "integration"
   /* Integration */
-], o = new Set(n), S = (i) => o.has(i), R = "more_integrations", m = "More Integrations", I = 9, _ = Object.keys(s).length, h = (i) => s[i] ?? _, N = {
+], o = new Set(n), S = (i) => o.has(i), R = "more_integrations", m = "More Integrations", I = 9, _ = Object.keys(s).length, l = (i) => s[i] ?? _, h = {
   email_handover: "send_email",
   slack: "send_slack_message"
 };
 export {
-  O as CATEGORIES,
-  N as CONFIG_TOOL_SOURCES,
-  a as INTEGRATION_SOURCES,
+  r as CATEGORIES,
+  h as CONFIG_TOOL_SOURCES,
+  e as INTEGRATION_SOURCES,
   R as MORE_INTEGRATIONS_KEY,
   m as MORE_INTEGRATIONS_LABEL,
   I as MORE_INTEGRATIONS_RANK,
   n as MORE_INTEGRATION_SOURCES,
   c as TOOL_ACTION_LABELS,
   E as TOOL_ACTION_SOURCES,
-  r as TOOL_SOURCE_LABELS,
+  O as TOOL_SOURCE_LABELS,
   s as TOOL_SOURCE_RANK,
-  t as ToolSource,
+  a as ToolSource,
   g as isIntegrationSource,
   S as isMoreIntegrationSource,
-  h as toolSourceRank
+  l as toolSourceRank
 };
 //# sourceMappingURL=tools.js.map