@bikdotai/bik-component-library 0.0.849-beta.5 → 0.0.849-beta.6

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

@@ -0,0 +1,142 @@
+import { jsxs as v, jsx as t } from "react/jsx-runtime";
+import { useRef as y, useMemo as c, useCallback as h } from "react";
+import p from "styled-components";
+import { TitleSmall as k } from "../../TypographyStyle.js";
+import { COLORS as n } from "../../../constants/Theme.js";
+import { buildVariableMentionItems as I, instructionsToEditorHtml as S, variableTokenName as u, buildMentionHtml as m, editorDocToInstructions as T } from "../utils/mentionSerialization.js";
+import { MentionPicker as C } from "./MentionPicker.js";
+import { VariableTriggerArea as M } from "./VariableTriggerArea.js";
+import { BikEditor as E } from "../../../editor/BikEditor.js";
+const H = (l) => u(l).replace(/^variable:/, ""), _ = ({
+  value: l,
+  onChange: d,
+  label: a,
+  placeholder: w,
+  variablesData: i,
+  ...f
+}) => {
+  const o = y(null), s = c(
+    () => I(i),
+    [i]
+  ), g = c(
+    () => S(l, s),
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    []
+  ), b = h((e) => {
+    const r = u(e.actualValue);
+    o.current?.insertInlineContent(
+      m(r, `{{${r}}}`, "variable")
+    );
+  }, []), x = h(() => {
+    const e = o.current?.getJSON() ?? null;
+    d(T(e, []).replace(/\n+/g, ""));
+  }, [d]);
+  return /* @__PURE__ */ v(O, { children: [
+    a && /* @__PURE__ */ t(k, { color: n.content.primary, children: a }),
+    /* @__PURE__ */ t(
+      M,
+      {
+        variablesData: i,
+        addDataButton: !0,
+        skipNativeBoundaries: !0,
+        onInsert: (e) => {
+          const r = H(e);
+          o.current?.insertInlineContent(
+            m(r, `{{${r}}}`, "variable")
+          );
+        },
+        children: /* @__PURE__ */ t(V, { "data-test": f["data-test"], children: /* @__PURE__ */ t(
+          E,
+          {
+            ref: o,
+            initialContent: g,
+            placeholder: w,
+            minHeight: "20px",
+            maxHeight: "20px",
+            style: { border: "none" },
+            editorStyle: N,
+            onSend: () => {
+            },
+            sendShortcut: { key: "Enter" },
+            mentions: {
+              agents: s,
+              removeTriggerOnDismiss: !0,
+              renderDropdown: (e) => /* @__PURE__ */ t(
+                C,
+                {
+                  ...e,
+                  variablesData: i,
+                  onSelectVariable: b
+                }
+              )
+            },
+            onChange: x
+          }
+        ) })
+      }
+    )
+  ] });
+}, N = {
+  padding: 0,
+  fontFamily: "Inter",
+  fontSize: "14px",
+  lineHeight: "20px"
+}, O = p.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 = p.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: ${n.surface.standard};
+	border: 1px solid ${n.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: ${n.stroke.brand};
+	}
+
+	/* 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 {
+  _ 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 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 mentionItems = useMemo(\n\t\t() => buildVariableMentionItems(variablesData),\n\t\t[variablesData],\n\t);\n\n\t// Mount-only initial HTML — the field is uncontrolled after mount (the\n\t// drawers key their fields per open, so `value` is fresh when it matters).\n\tconst initialHtml = useMemo(\n\t\t() => instructionsToEditorHtml(value, mentionItems),\n\t\t// eslint-disable-next-line react-hooks/exhaustive-deps\n\t\t[],\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\tconst insertChip = useCallback((variable: VariableV3) => {\n\t\tconst name = variableTokenName(variable.actualValue);\n\t\teditorRef.current?.insertInlineContent(\n\t\t\tbuildMentionHtml(name, `{{${name}}}`, 'variable'),\n\t\t);\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) => {\n\t\t\t\t\tconst name = nameOf(token);\n\t\t\t\t\teditorRef.current?.insertInlineContent(\n\t\t\t\t\t\tbuildMentionHtml(name, `{{${name}}}`, 'variable'),\n\t\t\t\t\t);\n\t\t\t\t}}\n\t\t\t>\n\t\t\t\t<InputShell data-test={rest['data-test']}>\n\t\t\t\t\t<BikEditor\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`\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/* 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","mentionItems","useMemo","buildVariableMentionItems","initialHtml","instructionsToEditorHtml","insertChip","useCallback","variable","name","buildMentionHtml","emitChange","doc","editorDocToInstructions","FieldBlockCol","TitleSmall","COLORS","jsx","VariableTriggerArea","InputShell","BikEditor","INLINE_EDITOR_STYLE","props","MentionPicker","styled"],"mappings":"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"}

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

@@ -26,6 +26,19 @@ interface VariableTriggerAreaProps {
      * 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;
 }
 /**

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

@@ -1,102 +1,116 @@
-import { jsxs as E, jsx as p } from "react/jsx-runtime";
-import { useRef as v, useState as b, useCallback as T, useEffect as $ } from "react";
-import B from "styled-components";
-import { COLORS as h } from "../../../constants/Theme.js";
-import { PickerType as F } from "../../variable-picker-v3/model.js";
+import { jsxs as F, jsx as x } from "react/jsx-runtime";
+import { useRef as B, useState as k, useCallback as $, useEffect as A } from "react";
+import T from "styled-components";
 import { variableTokenName as L } from "../utils/mentionSerialization.js";
-import { AddDataPill as C } from "./AddDataPill.js";
-import { VariablePicker as O } from "../../variable-picker-v3/VariablePicker.js";
-const A = (t) => `{{variable:${L(t.actualValue)}}}`, w = /[\s,;:/?&=(){}[\]"'<>]/, k = (t) => {
+import { AddDataPill as N } from "./AddDataPill.js";
+import { MentionPicker as P } from "./MentionPicker.js";
+const S = (t) => `{{variable:${L(t.actualValue)}}}`, E = /[\s,;:/?&=({[<"']/, C = /[,;:/?&=({[<"']/, R = (t, f, a) => {
   if (t instanceof HTMLInputElement || t instanceof HTMLTextAreaElement) {
-    const n = t.selectionStart ?? t.value.length, d = n === 0 ? " " : t.value[n - 1] ?? " ";
+    const c = t.selectionStart ?? t.value.length, u = c === 0, g = u ? " " : t.value[c - 1] ?? " ";
     return {
-      ok: w.test(d),
-      caret: n,
-      textBefore: t.value.slice(0, n)
+      ok: u ? !a : f.test(g),
+      caret: c,
+      textBefore: t.value.slice(0, c)
     };
   }
-  const l = window.getSelection(), c = l?.anchorNode?.textContent ?? "", i = l?.anchorOffset ?? 0, u = i === 0 ? " " : c[i - 1] ?? " ";
+  const d = window.getSelection(), i = d?.anchorNode?.textContent ?? "", r = d?.anchorOffset ?? 0, p = r === 0, l = p ? " " : i[r - 1] ?? " ";
   return {
-    ok: w.test(u),
+    ok: p ? !a : f.test(l),
     caret: null,
-    textBefore: c.slice(0, i)
+    textBefore: i.slice(0, r)
   };
-}, z = ({
+}, W = ({
   variablesData: t,
-  onInsert: l,
-  transformToken: c,
-  addDataButton: i,
-  children: u
+  onInsert: f,
+  transformToken: a,
+  addDataButton: d,
+  skipNativeBoundaries: i,
+  onOpenChange: r,
+  children: p
 }) => {
-  const n = v(null), [d, m] = b(!1), g = v(null), [r, a] = b(null), f = (t?.length ?? 0) > 0, x = () => {
-    const e = n.current?.getBoundingClientRect();
+  const l = B(null), [c, u] = k(!1), g = B(null), [n, w] = k(null), v = (t?.length ?? 0) > 0, b = (e) => {
+    w(e), r?.(!0);
+  }, m = () => {
+    w(null), r?.(!1);
+  }, h = () => {
+    const e = l.current?.getBoundingClientRect();
     return {
       above: !!e && window.innerHeight - e.bottom < 340,
       alignRight: !!e && window.innerWidth - e.left < 360
     };
-  }, y = T(
+  }, y = $(
     (e) => {
-      if (!f || e.key !== "@")
+      if (!v || e.key !== "@")
         return;
-      const o = k(e.target);
-      o.ok && (e.preventDefault(), e.stopPropagation(), a({
+      const o = R(
+        e.target,
+        i ? C : E,
+        !!i
+      );
+      o.ok && (e.preventDefault(), e.stopPropagation(), b({
         caret: o.caret,
         textBefore: o.textBefore,
-        ...x()
+        ...h()
       }));
     },
     // eslint-disable-next-line react-hooks/exhaustive-deps
-    [f]
-  ), R = () => {
-    const e = k(g.current);
-    a({
+    [v]
+  ), D = () => {
+    const e = R(g.current, E, !1);
+    b({
       caret: e.caret,
       textBefore: e.textBefore,
-      ...x()
+      ...h()
     });
   };
-  return $(() => {
-    if (!r)
+  return A(() => {
+    if (!n)
       return;
     const e = (s) => {
-      s.key === "Escape" && (s.stopPropagation(), a(null));
+      s.key === "Escape" && (s.stopPropagation(), m());
     }, o = (s) => {
-      n.current?.contains(s.target) || a(null);
+      l.current?.contains(s.target) || m();
     };
     return document.addEventListener("keydown", e, !0), document.addEventListener("mousedown", o), () => {
       document.removeEventListener("keydown", e, !0), document.removeEventListener("mousedown", o);
     };
-  }, [r]), /* @__PURE__ */ E(
-    P,
+  }, [n]), /* @__PURE__ */ F(
+    M,
     {
-      ref: n,
+      ref: l,
       onKeyDownCapture: y,
       onFocus: (e) => {
         e.target.closest?.(
           '[data-test="variable-trigger-panel"]'
-        ) || (g.current = e.target, m(!0));
+        ) || (g.current = e.target, u(!0));
       },
-      onBlur: () => m(!1),
+      onBlur: () => u(!1),
       children: [
-        u,
-        i && f && (d || r) && /* @__PURE__ */ p(C, { onOpen: R }),
-        r && /* @__PURE__ */ p(
-          S,
+        p,
+        d && v && (c || n) && /* @__PURE__ */ x(N, { onOpen: D }),
+        n && /* @__PURE__ */ x(
+          O,
           {
-            $above: r.above,
-            $right: r.alignRight,
+            $above: n.above,
+            $right: n.alignRight,
             "data-test": "variable-trigger-panel",
-            children: /* @__PURE__ */ p(
-              O,
+            onMouseDown: (e) => {
+              e.target.closest("input") || e.preventDefault();
+            },
+            children: /* @__PURE__ */ x(
+              P,
               {
-                type: F.FLOATER,
-                data: t ?? [],
-                showRecommendedBar: !1,
-                onClose: () => a(null),
-                onSelect: (e) => {
-                  a(null);
-                  const o = A(e), s = c ? c(o, { textBefore: r.textBefore }) : o;
-                  l(s, r.caret);
+                items: [],
+                query: "",
+                activeIndex: -1,
+                onSelect: () => {
+                },
+                onClose: m,
+                variablesData: t,
+                onSelectVariable: (e) => {
+                  m();
+                  const o = S(e), s = a ? a(o, { textBefore: n.textBefore }) : o;
+                  f(s, n.caret);
                 }
               }
             )
@@ -105,22 +119,17 @@ const A = (t) => `{{variable:${L(t.actualValue)}}}`, w = /[\s,;:/?&=(){}[\]"'<>]
       ]
     }
   );
-}, P = B.div`
+}, M = T.div`
 	position: relative;
-`, S = B.div`
+`, O = T.div`
 	position: absolute;
 	z-index: 1000;
 	width: 344px;
-	background: ${h.surface.standard};
-	border: 1px solid ${h.stroke.primary};
-	border-radius: 4px;
-	box-shadow: 0px -2px 8px 0px #0000001f;
-	overflow: hidden;
 	${(t) => t.$right ? "right: 0;" : "left: 0;"}
 	${(t) => t.$above ? "bottom: calc(100% + 4px);" : "top: calc(100% + 4px);"}
 `;
 export {
-  z as VariableTriggerArea,
-  A as variableToken
+  W as VariableTriggerArea,
+  S as variableToken
 };
 //# sourceMappingURL=VariableTriggerArea.js.map

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

@@ -1 +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 { COLORS } from '@src/constants/Theme';\nimport { VariablePicker } from '../../variable-picker-v3';\nimport { PickerType } from '../../variable-picker-v3/model';\nimport type {\n\tVariableListInterfaceV3,\n\tVariableV3,\n} from '../../variable-picker-v3/model';\nimport { variableTokenName } from '../utils/mentionSerialization';\nimport { AddDataPill } from './AddDataPill';\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 */\nconst BOUNDARY = /[\\s,;:/?&=(){}[\\]\"'<>]/;\n\nconst triggerContext = (\n\ttarget: EventTarget | null,\n): { ok: boolean; caret: number | null; textBefore: string } => {\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 prev = caret === 0 ? ' ' : target.value[caret - 1] ?? ' ';\n\t\treturn {\n\t\t\tok: BOUNDARY.test(prev),\n\t\t\tcaret,\n\t\t\ttextBefore: target.value.slice(0, caret),\n\t\t};\n\t}\n\t// Rich editor (ProseMirror contenteditable): read the character before the\n\t// selection. `textBefore` is only the current text-node fragment (fine for\n\t// the token transforms, which just look at nearby characters).\n\tconst sel = window.getSelection();\n\tconst text = sel?.anchorNode?.textContent ?? '';\n\tconst offset = sel?.anchorOffset ?? 0;\n\tconst prev = offset === 0 ? ' ' : text[offset - 1] ?? ' ';\n\treturn {\n\t\tok: BOUNDARY.test(prev),\n\t\tcaret: null,\n\t\ttextBefore: text.slice(0, offset),\n\t};\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 * Rewrite the token before it's handed to `onInsert` — e.g. the Rest API\n\t * JSON editors wrap it in quotes. `textBefore` is the text preceding the\n\t * `@` (for input targets the whole value up to the caret; for rich-editor\n\t * targets just the current text-node fragment).\n\t */\n\ttransformToken?: (token: string, ctx: { textBefore: string }) => string;\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\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\ttransformToken,\n\taddDataButton,\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\ttextBefore: string;\n\t\tabove: boolean;\n\t\talignRight: boolean;\n\t} | null>(null);\n\n\tconst enabled = (variablesData?.length ?? 0) > 0;\n\n\t// Panel is ~344px wide / ~340px tall, 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 < 340,\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(e.target);\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\tsetTrigger({\n\t\t\t\tcaret: ctx.caret,\n\t\t\t\ttextBefore: ctx.textBefore,\n\t\t\t\t...placement(),\n\t\t\t});\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);\n\t\tsetTrigger({\n\t\t\tcaret: ctx.caret,\n\t\t\ttextBefore: ctx.textBefore,\n\t\t\t...placement(),\n\t\t});\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\tsetTrigger(null);\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\tsetTrigger(null);\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 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>\n\t\t\t\t\t<VariablePicker\n\t\t\t\t\t\ttype={PickerType.FLOATER}\n\t\t\t\t\t\tdata={variablesData ?? []}\n\t\t\t\t\t\tshowRecommendedBar={false}\n\t\t\t\t\t\tonClose={() => setTrigger(null)}\n\t\t\t\t\t\tonSelect={(variable: VariableV3) => {\n\t\t\t\t\t\t\tsetTrigger(null);\n\t\t\t\t\t\t\tconst raw = variableToken(variable);\n\t\t\t\t\t\t\tconst token = transformToken\n\t\t\t\t\t\t\t\t? transformToken(raw, { textBefore: trigger.textBefore })\n\t\t\t\t\t\t\t\t: raw;\n\t\t\t\t\t\t\tonInsert(token, trigger.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 picker is EMBEDDED (no close\n// cross — Escape / click-outside dismiss instead, matching the Instructions /\n// Guardrails @ menu), so this box provides the card chrome the mention picker\n// normally would. High 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\tbackground: ${COLORS.surface.standard};\n\tborder: 1px solid ${COLORS.stroke.primary};\n\tborder-radius: 4px;\n\tbox-shadow: 0px -2px 8px 0px #0000001f;\n\toverflow: hidden;\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","triggerContext","target","caret","prev","sel","text","offset","VariableTriggerArea","variablesData","onInsert","transformToken","addDataButton","children","containerRef","useRef","fieldFocused","setFieldFocused","useState","lastFocusedRef","trigger","setTrigger","enabled","placement","rect","onKeyDownCapture","useCallback","ctx","openFromButton","useEffect","onKey","e","onDown","jsxs","TriggerWrap","jsx","AddDataPill","FloaterBox","VariablePicker","PickerType","raw","token","styled","COLORS","p"],"mappings":"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"}
+{"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 type {\n\tVariableListInterfaceV3,\n\tVariableV3,\n} from '../../variable-picker-v3/model';\nimport { variableTokenName } from '../utils/mentionSerialization';\nimport { AddDataPill } from './AddDataPill';\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; textBefore: string } => {\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 {\n\t\t\tok: atStart ? !skipStart : boundary.test(prev),\n\t\t\tcaret,\n\t\t\ttextBefore: target.value.slice(0, caret),\n\t\t};\n\t}\n\t// Rich editor (ProseMirror contenteditable): read the character before the\n\t// selection. `textBefore` is only the current text-node fragment (fine for\n\t// the token transforms, which just look at nearby characters).\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 {\n\t\tok: atStart ? !skipStart : boundary.test(prev),\n\t\tcaret: null,\n\t\ttextBefore: text.slice(0, offset),\n\t};\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 * Rewrite the token before it's handed to `onInsert` — e.g. the Rest API\n\t * JSON editors wrap it in quotes. `textBefore` is the text preceding the\n\t * `@` (for input targets the whole value up to the caret; for rich-editor\n\t * targets just the current text-node fragment).\n\t */\n\ttransformToken?: (token: string, ctx: { textBefore: string }) => string;\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\ttransformToken,\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\ttextBefore: string;\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 / ~340px tall, 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 < 340,\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({\n\t\t\t\tcaret: ctx.caret,\n\t\t\t\ttextBefore: ctx.textBefore,\n\t\t\t\t...placement(),\n\t\t\t});\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({\n\t\t\tcaret: ctx.caret,\n\t\t\ttextBefore: ctx.textBefore,\n\t\t\t...placement(),\n\t\t});\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 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\tconst raw = variableToken(variable);\n\t\t\t\t\t\t\tconst token = transformToken\n\t\t\t\t\t\t\t\t? transformToken(raw, { textBefore: trigger.textBefore })\n\t\t\t\t\t\t\t\t: raw;\n\t\t\t\t\t\t\tonInsert(token, trigger.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","transformToken","addDataButton","skipNativeBoundaries","onOpenChange","children","containerRef","useRef","fieldFocused","setFieldFocused","useState","lastFocusedRef","trigger","setTrigger","enabled","openPanel","t","closePanel","placement","rect","onKeyDownCapture","useCallback","ctx","openFromButton","useEffect","onKey","e","onDown","jsxs","TriggerWrap","jsx","AddDataPill","FloaterBox","MentionPicker","raw","token","styled","p"],"mappings":"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"}

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@bikdotai/bik-component-library",
-	"version": "0.0.849-beta.5",
+	"version": "0.0.849-beta.6",
 	"description": "Bik Component Library",
 	"repository": {
 		"type": "git",
@@ -34,6 +34,7 @@
 	],
 	"scripts": {
 		"build": "vite build --config vite.config.lib.ts",
+		"prepublishOnly": "npm run build",
 		"dev": "LIB_DEV=true vite build --config vite.config.lib.ts --watch",
 		"build:storybook": "storybook build -o storybook-static",
 		"generate:icons": "npx @svgr/cli --config-file svgr.generate.cjs --out-dir src/icons svgs/",