form-builder-pro 1.4.1 → 1.4.2

package/dist/index.mjs

@@ -4747,8 +4747,31 @@ function transformField(field) {
     transformed.repeatIncrementEnabled = field.repeatIncrementEnabled;
   if (field.dateConstraints !== void 0)
     transformed.dateConstraints = field.dateConstraints;
-  if (field.formulaConfig !== void 0)
+  if (field.formulaConfig !== void 0) {
     transformed.formulaConfig = field.formulaConfig;
+  } else if (field.type === "formula" && field.formulaType) {
+    const dp = field.floatingPrecision ?? 2;
+    if (field.formulaType === "SIMPLE") {
+      transformed.formulaConfig = {
+        mode: "single",
+        single: { expression: field.formulaExpression ?? "" },
+        multiple: { compareField: "", conditions: [], fallbackExpression: "" },
+        decimalPlaces: dp
+      };
+    } else if (field.formulaType === "SWITCH") {
+      const cases = Array.isArray(field.switchCases) ? field.switchCases.map((c) => ({ value: c.matchValue ?? c.value ?? "", expression: c.formulaExpression ?? c.expression ?? "" })) : [];
+      transformed.formulaConfig = {
+        mode: "multiple",
+        single: { expression: "" },
+        multiple: {
+          compareField: field.switchField ?? "",
+          conditions: cases,
+          fallbackExpression: field.switchDefaultFormula ?? ""
+        },
+        decimalPlaces: dp
+      };
+    }
+  }
   if (field.nameGeneratorFormat !== void 0)
     transformed.nameGeneratorFormat = field.nameGeneratorFormat;
   if (field.nameGeneratorText !== void 0)
@@ -5066,8 +5089,32 @@ function fieldToPayload(field, opts) {
   if (field.type === "formula") {
     payload.fieldType = "FORMULA";
     payload.type = "formula";
-    if (field.formulaConfig !== void 0)
-      payload.formulaConfig = field.formulaConfig;
+    payload.readOnly = true;
+    payload.floatingPrecision = field.formulaConfig?.decimalPlaces ?? 2;
+    if (field.formulaConfig?.mode === "single") {
+      payload.formulaType = "SIMPLE";
+      payload.formulaExpression = field.formulaConfig.single?.expression ?? "";
+      payload.switchField = null;
+      payload.switchCases = null;
+      payload.switchDefaultFormula = null;
+    } else if (field.formulaConfig?.mode === "multiple") {
+      const multi = field.formulaConfig.multiple;
+      payload.formulaType = "SWITCH";
+      payload.formulaExpression = "";
+      payload.switchField = multi?.compareField ?? null;
+      payload.switchCases = (multi?.conditions ?? []).map((c) => ({
+        matchValue: c.value,
+        formulaExpression: c.expression ?? ""
+      }));
+      payload.switchDefaultFormula = multi?.fallbackExpression ?? "";
+      payload.switchCases = payload.switchCases;
+    } else {
+      payload.formulaType = "SIMPLE";
+      payload.formulaExpression = "";
+      payload.switchField = null;
+      payload.switchCases = null;
+      payload.switchDefaultFormula = null;
+    }
   }
   if (field.type === "repeater") {
     payload.fieldType = "REPEATER";
@@ -10505,9 +10552,647 @@ var SectionList = class {
   }
 };
 
+// src/utils/formulaTokenParser.ts
+var FUNCTION_NAMES = /* @__PURE__ */ new Set(["ROUND", "ABS", "MIN", "MAX", "FLOOR", "CEIL", "SQRT", "POW"]);
+var OPERATOR_CHARS = /* @__PURE__ */ new Set(["+", "-", "*", "/"]);
+function parseExpressionToTokens(expression, fieldMap, mode) {
+  if (!expression)
+    return [];
+  const tokens = [];
+  let i = 0;
+  const len = expression.length;
+  while (i < len) {
+    const ch = expression[i];
+    if (/\s/.test(ch)) {
+      let ws = "";
+      while (i < len && /\s/.test(expression[i]))
+        ws += expression[i++];
+      tokens.push({ type: "space", value: ws, rawValue: ws });
+      continue;
+    }
+    if (mode === "bracket" && ch === "{") {
+      i++;
+      let ref = "";
+      while (i < len && expression[i] !== "}")
+        ref += expression[i++];
+      if (i < len && expression[i] === "}")
+        i++;
+      const trimmedRef = ref.trim();
+      const field = fieldMap.get(trimmedRef);
+      tokens.push({
+        type: "field",
+        value: field ? field.label || field.fieldName || trimmedRef : trimmedRef,
+        rawValue: `{${trimmedRef}}`,
+        fieldRef: trimmedRef
+      });
+      continue;
+    }
+    if (OPERATOR_CHARS.has(ch)) {
+      tokens.push({ type: "operator", value: ch, rawValue: ch });
+      i++;
+      continue;
+    }
+    if (ch === "%") {
+      tokens.push({ type: "percent", value: "%", rawValue: "%" });
+      i++;
+      continue;
+    }
+    if (ch === "(" || ch === ")") {
+      tokens.push({ type: "paren", value: ch, rawValue: ch });
+      i++;
+      continue;
+    }
+    if (ch === ",") {
+      tokens.push({ type: "comma", value: ",", rawValue: "," });
+      i++;
+      continue;
+    }
+    if (/[0-9]/.test(ch) || ch === "." && i + 1 < len && /[0-9]/.test(expression[i + 1])) {
+      let num = "";
+      while (i < len && /[0-9.]/.test(expression[i]))
+        num += expression[i++];
+      tokens.push({ type: "number", value: num, rawValue: num });
+      continue;
+    }
+    if (/[a-zA-Z_]/.test(ch)) {
+      let ident = "";
+      while (i < len && /[a-zA-Z0-9_]/.test(expression[i]))
+        ident += expression[i++];
+      if (FUNCTION_NAMES.has(ident.toUpperCase())) {
+        tokens.push({ type: "function", value: ident, rawValue: ident });
+        continue;
+      }
+      if (mode === "plain") {
+        const field = fieldMap.get(ident);
+        tokens.push({
+          type: "field",
+          value: field ? field.label || field.fieldName || ident : ident,
+          rawValue: ident,
+          fieldRef: ident
+        });
+        continue;
+      }
+      tokens.push({ type: "unknown", value: ident, rawValue: ident });
+      continue;
+    }
+    tokens.push({ type: "unknown", value: ch, rawValue: ch });
+    i++;
+  }
+  return tokens;
+}
+function buildFieldMap(fields) {
+  const map = /* @__PURE__ */ new Map();
+  for (const f of fields) {
+    if (f.fieldName)
+      map.set(f.fieldName, f);
+    if (f.id && f.id !== f.fieldName)
+      map.set(f.id, f);
+  }
+  return map;
+}
+function getFieldRef(field) {
+  return field.fieldName && field.fieldName !== field.id ? field.fieldName : field.id;
+}
+
+// src/builder/FormulaEditorWidget.ts
+var _stylesInjected = false;
+var STYLE_ID = "formula-editor-widget-styles-v2";
+function injectStyles() {
+  if (_stylesInjected && document.getElementById(STYLE_ID))
+    return;
+  document.getElementById(STYLE_ID)?.remove();
+  document.getElementById("formula-editor-widget-styles")?.remove();
+  _stylesInjected = true;
+  const style = document.createElement("style");
+  style.id = STYLE_ID;
+  style.textContent = `
+/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550
+   FormulaEditorWidget v2
+   \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 */
+
+/* \u2500\u2500 Container \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */
+.few-container {
+  position: relative;
+  width: 100%;
+}
+
+/* \u2500\u2500 Editor \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */
+/*
+ * NOTE: color uses !important so it is never muted by
+ * Angular ViewEncapsulation, host-element rules, or global resets.
+ * This ensures operators/numbers always render at full text contrast.
+ */
+.few-editor {
+  display: block;
+  width: 100%;
+  min-height: 38px;
+  padding: 6px 32px 6px 12px;   /* right padding reserves space for clear btn */
+  border: 1px solid #e2e8f0;
+  border-radius: 6px;
+  font-family: ui-monospace, 'Cascadia Code', 'Source Code Pro', Menlo, monospace;
+  font-size: 13px;
+  font-weight: 700 !important;   /* \u2190 operators/numbers always bold */
+  line-height: 1.7;
+  color: rgb(213, 12, 65) !important;  /* operator/text color \u2014 chips override with their own !important */
+  caret-color: #635bff;
+  background: transparent;
+  outline: none;
+  word-break: break-word;
+  white-space: pre-wrap;
+  cursor: text;
+  transition: border-color 0.15s, box-shadow 0.15s;
+  box-sizing: border-box;
+}
+
+.few-editor:focus {
+  border-color: #635bff;
+  box-shadow: 0 0 0 3px rgba(99, 91, 255, 0.15);
+}
+
+.few-editor.few-has-error {
+  border-color: #ef4444;
+  box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.12);
+}
+
+/* \u2500\u2500 Placeholder \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */
+.few-placeholder {
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 32px;  /* don't overlap clear button */
+  bottom: 0;
+  padding: 6px 0 6px 12px;
+  font-family: ui-monospace, 'Cascadia Code', 'Source Code Pro', Menlo, monospace;
+  font-size: 13px;
+  line-height: 1.7;
+  color: #94a3b8;
+  pointer-events: none;
+  user-select: none;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+/* \u2500\u2500 Field chip \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */
+.few-chip {
+  display: inline-flex;
+  align-items: center;
+  padding: 0px 7px 1px 6px;
+  margin: 0 2px;
+  font-size: 11.5px;
+  font-weight: 600 !important;   /* explicit !important so the editor's 700 !important doesn't cascade in */
+  font-family: ui-sans-serif, system-ui, sans-serif;
+  letter-spacing: 0.01em;
+  border-radius: 4px;
+  background: rgba(99, 91, 255, 0.10);
+  color: #635bff !important;     /* chip label always purple \u2014 not inherited */
+  border: 1px solid rgba(99, 91, 255, 0.28);
+  cursor: default;
+  user-select: none;
+  vertical-align: middle;
+  line-height: 1.6;
+  white-space: nowrap;
+  transition: background 0.1s;
+}
+
+.few-chip:hover {
+  background: rgba(99, 91, 255, 0.17);
+}
+
+.few-chip-unknown {
+  background: rgba(239, 68, 68, 0.08);
+  color: #dc2626 !important;
+  border-color: rgba(239, 68, 68, 0.25);
+}
+
+/* \u2500\u2500 Clear (\xD7) button \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */
+.few-clear-btn {
+  position: absolute;
+  top: 50%;
+  right: 7px;
+  transform: translateY(-50%);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 18px;
+  height: 18px;
+  padding: 0;
+  border: none;
+  border-radius: 50%;
+  background: #94a3b8;
+  color: #ffffff;
+  font-size: 12px;
+  line-height: 1;
+  font-weight: 700;
+  cursor: pointer;
+  opacity: 0;
+  pointer-events: none;
+  transition: opacity 0.15s, background 0.15s;
+  z-index: 2;
+}
+
+.few-clear-btn:hover {
+  background: #475569;
+}
+
+/* Shown only when the editor has content */
+.few-container.few-has-content .few-clear-btn {
+  opacity: 1;
+  pointer-events: auto;
+}
+
+/* \u2500\u2500 Dark mode (media query) \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */
+@media (prefers-color-scheme: dark) {
+  .few-editor {
+    border-color: #334155;
+    /* operator color is set via inline !important \u2014 not overridden here */
+  }
+  .few-editor:focus {
+    border-color: #635bff;
+    box-shadow: 0 0 0 3px rgba(99, 91, 255, 0.25);
+  }
+  .few-placeholder { color: #64748b; }
+  .few-chip {
+    background: rgba(99, 91, 255, 0.18);
+    color: #a5b4fc !important;
+    border-color: rgba(99, 91, 255, 0.38);
+  }
+  .few-chip-unknown {
+    background: rgba(239, 68, 68, 0.15);
+    color: #f87171 !important;
+    border-color: rgba(239, 68, 68, 0.35);
+  }
+  .few-clear-btn {
+    background: #64748b;
+    color: #f1f5f9;
+  }
+  .few-clear-btn:hover { background: #475569; }
+}
+
+/* \u2500\u2500 Dark mode (Tailwind class strategy) \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */
+.dark .few-editor {
+  border-color: #334155;
+  /* operator color is set via inline !important \u2014 not overridden here */
+}
+.dark .few-editor:focus {
+  border-color: #635bff;
+  box-shadow: 0 0 0 3px rgba(99, 91, 255, 0.25);
+}
+.dark .few-placeholder { color: #64748b; }
+.dark .few-chip {
+  background: rgba(99, 91, 255, 0.18);
+  color: #a5b4fc !important;
+  border-color: rgba(99, 91, 255, 0.38);
+}
+.dark .few-chip-unknown {
+  background: rgba(239, 68, 68, 0.15);
+  color: #f87171 !important;
+  border-color: rgba(239, 68, 68, 0.35);
+}
+.dark .few-clear-btn {
+  background: #64748b;
+  color: #f1f5f9;
+}
+.dark .few-clear-btn:hover { background: #475569; }
+    `;
+  document.head.appendChild(style);
+}
+var FormulaEditorWidget = class {
+  constructor(options) {
+    __publicField(this, "_container");
+    __publicField(this, "_editor");
+    __publicField(this, "_placeholderEl");
+    __publicField(this, "_clearBtn");
+    __publicField(this, "_options");
+    __publicField(this, "_fieldMap");
+    /**
+     * The canonical internal expression — SINGLE SOURCE OF TRUTH.
+     * The DOM is always derived from this; never the reverse.
+     * Updated by _onEditorInput() (user edits) and setValue() (programmatic).
+     */
+    __publicField(this, "_internalValue", "");
+    injectStyles();
+    this._options = { ...options };
+    this._fieldMap = buildFieldMap(options.availableFields);
+    this._container = document.createElement("div");
+    this._container.className = "few-container";
+    this._placeholderEl = document.createElement("div");
+    this._placeholderEl.className = "few-placeholder";
+    this._placeholderEl.textContent = options.placeholder ?? "Enter formula\u2026";
+    this._editor = document.createElement("div");
+    this._editor.className = "few-editor";
+    this._editor.contentEditable = "true";
+    this._editor.spellcheck = false;
+    this._editor.setAttribute("autocomplete", "off");
+    this._editor.setAttribute("autocorrect", "off");
+    this._editor.setAttribute("autocapitalize", "off");
+    this._editor.setAttribute("data-formula-editor", "true");
+    this._editor.style.setProperty("color", "rgb(213, 12, 65)", "important");
+    this._editor.style.setProperty("font-weight", "700", "important");
+    this._editor.style.setProperty("caret-color", "#635bff", "important");
+    this._clearBtn = document.createElement("button");
+    this._clearBtn.type = "button";
+    this._clearBtn.className = "few-clear-btn";
+    this._clearBtn.title = "Clear formula";
+    this._clearBtn.textContent = "\xD7";
+    this._clearBtn.addEventListener("mousedown", (e) => {
+      e.preventDefault();
+      this.clear();
+    });
+    this._container.appendChild(this._placeholderEl);
+    this._container.appendChild(this._editor);
+    this._container.appendChild(this._clearBtn);
+    this._attachEvents();
+    if (options.initialValue) {
+      this.setValue(options.initialValue);
+    } else {
+      this._syncUI();
+    }
+  }
+  // ─── Internal event wiring ───────────────────────────────────────────────
+  _attachEvents() {
+    this._editor.addEventListener("input", () => this._onEditorInput());
+    this._editor.addEventListener("keydown", (e) => {
+      if (e.key === "Enter") {
+        e.preventDefault();
+        return;
+      }
+      if (e.key === "Backspace")
+        this._handleBackspaceOnChip(e);
+    });
+    this._editor.addEventListener("paste", (e) => {
+      e.preventDefault();
+      const text = e.clipboardData?.getData("text/plain") ?? "";
+      if (text) {
+        this._insertTextAtCaret(text);
+        this._onEditorInput();
+      }
+    });
+    this._editor.addEventListener("dragover", (e) => e.preventDefault());
+    this._editor.addEventListener("drop", (e) => e.preventDefault());
+  }
+  // ─── Core edit cycle ─────────────────────────────────────────────────────
+  _onEditorInput() {
+    this._normaliseDom();
+    const newValue = this._readInternalExpression();
+    const changed = newValue !== this._internalValue;
+    this._internalValue = newValue;
+    this._syncUI();
+    if (changed) {
+      this._options.onChange?.(newValue);
+    }
+  }
+  /**
+   * Remove browser-inserted artefacts (<br>, stray <div>/<span>) that some
+   * browsers inject into a contenteditable.  Chips (data-field-ref) are kept.
+   */
+  _normaliseDom() {
+    for (const node of Array.from(this._editor.childNodes)) {
+      if (node.nodeType !== Node.ELEMENT_NODE)
+        continue;
+      const el = node;
+      if (el.hasAttribute("data-field-ref"))
+        continue;
+      if (el.tagName === "BR") {
+        el.remove();
+        continue;
+      }
+      const textNode = document.createTextNode(el.textContent ?? "");
+      this._editor.replaceChild(textNode, el);
+    }
+  }
+  /**
+   * Backspace immediately before a chip should delete the whole chip, not
+   * step into its non-editable content.
+   */
+  _handleBackspaceOnChip(e) {
+    const sel = window.getSelection();
+    if (!sel || sel.rangeCount === 0)
+      return;
+    const range = sel.getRangeAt(0);
+    if (!range.collapsed)
+      return;
+    let prev = null;
+    if (range.startContainer === this._editor) {
+      if (range.startOffset > 0)
+        prev = this._editor.childNodes[range.startOffset - 1];
+    } else if (range.startContainer.nodeType === Node.TEXT_NODE) {
+      if (range.startOffset === 0)
+        prev = range.startContainer.previousSibling;
+    }
+    if (prev && prev.hasAttribute?.("data-field-ref")) {
+      e.preventDefault();
+      prev.remove();
+      this._onEditorInput();
+    }
+  }
+  // ─── Serialisation: DOM → internal expression ────────────────────────────
+  _readInternalExpression() {
+    let result = "";
+    for (const node of Array.from(this._editor.childNodes)) {
+      if (node.nodeType === Node.TEXT_NODE) {
+        result += node.textContent ?? "";
+      } else if (node.nodeType === Node.ELEMENT_NODE) {
+        const el = node;
+        const ref = el.getAttribute("data-field-ref");
+        if (ref !== null) {
+          result += this._options.mode === "bracket" ? `{${ref}}` : ref;
+        } else {
+          result += el.textContent ?? "";
+        }
+      }
+    }
+    return result;
+  }
+  // ─── Deserialization: internal expression → DOM ──────────────────────────
+  /**
+   * Load an internal expression string.
+   *
+   * This is the ONLY path that populates the editor with chips.
+   * It does NOT fire onChange (programmatic set ≠ user edit).
+   *
+   * Design invariant: the DOM is ALWAYS fully rebuilt from _internalValue,
+   * never from user-visible text.  This guarantees correct state on re-render
+   * after field switches, undo/redo, or hot-reload.
+   */
+  setValue(internalExpression) {
+    this._internalValue = internalExpression ?? "";
+    this._editor.innerHTML = "";
+    if (this._internalValue.trim()) {
+      const tokens = parseExpressionToTokens(
+        this._internalValue,
+        this._fieldMap,
+        this._options.mode
+      );
+      for (const token of tokens) {
+        if (token.type === "field" && token.fieldRef !== void 0) {
+          const field = this._fieldMap.get(token.fieldRef) ?? {
+            id: token.fieldRef,
+            fieldName: token.fieldRef,
+            label: token.fieldRef
+            // shows raw ref — still readable
+          };
+          const isUnknown = !this._fieldMap.has(token.fieldRef);
+          this._editor.appendChild(this._createChipEl(field, isUnknown));
+        } else {
+          this._editor.appendChild(document.createTextNode(token.value));
+        }
+      }
+    }
+    this._syncUI();
+  }
+  /** Return the current stored expression. Always reflects live DOM state. */
+  getValue() {
+    return this._readInternalExpression();
+  }
+  // ─── Public mutation ─────────────────────────────────────────────────────
+  /**
+   * Insert a field chip at the caret (or append if editor lacks focus).
+   * Handles spacing automatically so chips never run into adjacent text.
+   */
+  insertField(field) {
+    this._editor.focus();
+    const chip = this._createChipEl(field, false);
+    const sel = window.getSelection();
+    const inEditor = sel && sel.rangeCount > 0 && this._editor.contains(sel.getRangeAt(0).commonAncestorContainer);
+    if (inEditor) {
+      const range = sel.getRangeAt(0);
+      range.deleteContents();
+      if (this._needsSpaceBefore(range)) {
+        range.insertNode(document.createTextNode(" "));
+        range.collapse(false);
+      }
+      range.insertNode(chip);
+      const spaceAfter = document.createTextNode(" ");
+      range.setStartAfter(chip);
+      range.setEndAfter(chip);
+      range.insertNode(spaceAfter);
+      range.setStartAfter(spaceAfter);
+      range.setEndAfter(spaceAfter);
+      sel.removeAllRanges();
+      sel.addRange(range);
+    } else {
+      this._appendAtEnd(chip);
+    }
+    this._onEditorInput();
+  }
+  /**
+   * Insert plain text at the caret (operators, function names, parens).
+   * Operators rendered by this path are text nodes and always inherit
+   * .few-editor's high-contrast color.
+   */
+  insertText(text) {
+    this._editor.focus();
+    this._insertTextAtCaret(text);
+    this._onEditorInput();
+  }
+  /**
+   * Clear the entire formula expression.
+   * Fires onChange('') so the store is updated immediately.
+   */
+  clear() {
+    this._editor.innerHTML = "";
+    this._internalValue = "";
+    this._syncUI();
+    this._options.onChange?.("");
+  }
+  // ─── Visual state ────────────────────────────────────────────────────────
+  /** Toggle error (red border) state. */
+  setError(hasError) {
+    this._editor.classList.toggle("few-has-error", hasError);
+  }
+  /**
+   * Refresh the field map with a new field list (e.g. schema changed).
+   * Re-renders from _internalValue so stale labels / unknowns are resolved.
+   */
+  updateFields(fields) {
+    this._options.availableFields = fields;
+    this._fieldMap = buildFieldMap(fields);
+    this.setValue(this._internalValue);
+  }
+  /** Return the root element to mount. */
+  getElement() {
+    return this._container;
+  }
+  /** Focus the editable area. */
+  focus() {
+    this._editor.focus();
+  }
+  /** Remove from DOM. */
+  destroy() {
+    this._container.remove();
+  }
+  // ─── Private helpers ─────────────────────────────────────────────────────
+  _insertTextAtCaret(text) {
+    const sel = window.getSelection();
+    const inEditor = sel && sel.rangeCount > 0 && this._editor.contains(sel.getRangeAt(0).commonAncestorContainer);
+    if (inEditor) {
+      const range = sel.getRangeAt(0);
+      range.deleteContents();
+      const tn = document.createTextNode(text);
+      range.insertNode(tn);
+      range.setStartAfter(tn);
+      range.setEndAfter(tn);
+      sel.removeAllRanges();
+      sel.addRange(range);
+    } else {
+      this._editor.appendChild(document.createTextNode(text));
+    }
+  }
+  _appendAtEnd(chip) {
+    const last = this._editor.lastChild;
+    if (last) {
+      if (last.nodeType === Node.TEXT_NODE) {
+        const txt = last.textContent ?? "";
+        if (txt.length > 0 && !/\s$/.test(txt)) {
+          this._editor.appendChild(document.createTextNode(" "));
+        }
+      } else if (last.hasAttribute?.("data-field-ref")) {
+        this._editor.appendChild(document.createTextNode(" "));
+      }
+    }
+    this._editor.appendChild(chip);
+    this._editor.appendChild(document.createTextNode(" "));
+  }
+  _needsSpaceBefore(range) {
+    const { startContainer, startOffset } = range;
+    if (startContainer.nodeType === Node.TEXT_NODE) {
+      const text = startContainer.textContent ?? "";
+      const ch = text[startOffset - 1];
+      return startOffset > 0 && ch !== void 0 && !/[\s(]/.test(ch);
+    }
+    if (startContainer === this._editor && startOffset > 0) {
+      const prev = this._editor.childNodes[startOffset - 1];
+      return prev?.hasAttribute?.("data-field-ref") ?? false;
+    }
+    return false;
+  }
+  _createChipEl(field, isUnknown) {
+    const chip = document.createElement("span");
+    chip.contentEditable = "false";
+    chip.setAttribute("data-field-ref", getFieldRef(field));
+    chip.textContent = field.label || field.fieldName || field.id;
+    chip.className = isUnknown ? "few-chip few-chip-unknown" : "few-chip";
+    chip.title = this._options.mode === "bracket" ? `{${getFieldRef(field)}}` : getFieldRef(field);
+    return chip;
+  }
+  /**
+   * Synchronise all purely-visual state:
+   *  - placeholder visibility
+   *  - clear-button visibility (few-has-content on container)
+   */
+  _syncUI() {
+    const hasContent = this._internalValue.trim().length > 0 || !!this._editor.querySelector("[data-field-ref]");
+    this._placeholderEl.style.display = hasContent ? "none" : "block";
+    this._container.classList.toggle("few-has-content", hasContent);
+    this._editor.style.setProperty("color", "rgb(213, 12, 65)", "important");
+    this._editor.style.setProperty("font-weight", "700", "important");
+  }
+};
+
 // src/builder/FormBuilder.ts
 var advancedCssPanelState = /* @__PURE__ */ new Map();
-var lastFocusedExprTextarea = null;
+var lastFocusedFormulaWidget = null;
 var LABEL_DEBOUNCE_MS = 300;
 var labelUpdateTimeouts = /* @__PURE__ */ new Map();
 var FormBuilder = class {
@@ -10986,8 +11671,15 @@ var FormBuilder = class {
           if (field.type !== "formula" || !field.formulaConfig)
             continue;
           const fcfg = field.formulaConfig;
-          const fAvailable = getFieldsForFormula(schema, field.id);
-          const fNames = fAvailable.map((f) => f.fieldName);
+          const allOtherFields = schema.sections.flatMap((s) => s.fields).filter((f) => f.id !== field.id);
+          const validRefSet = /* @__PURE__ */ new Set();
+          allOtherFields.forEach((f) => {
+            if (f.fieldName)
+              validRefSet.add(f.fieldName);
+            if (f.id)
+              validRefSet.add(f.id);
+          });
+          const validRefs = Array.from(validRefSet);
           const exprs = [];
           if (fcfg.mode === "single") {
             if (fcfg.single?.expression)
@@ -11001,7 +11693,7 @@ var FormBuilder = class {
               exprs.push(fcfg.multiple.fallbackExpression);
           }
           for (const expr of exprs) {
-            const result = validateFormulaExpression(expr, fNames);
+            const result = validateFormulaExpression(expr, validRefs);
             if (!result.valid) {
               alert(`Formula error in "${field.label}": ${result.error}`);
               return;
@@ -11759,38 +12451,64 @@ var FormBuilder = class {
         const numericFields = getNumericFieldsForFormula(schema, selectedField.id);
         const availableIds = numericFields.map((f) => f.id);
         const availableNames = numericFields.map((f) => f.fieldName);
+        const allFieldInfosForWidget = schema.sections.flatMap((s) => s.fields).filter((f) => f.id !== selectedField.id).map((f) => ({
+          id: f.id,
+          fieldName: f.fieldName ?? f.id,
+          label: f.label || f.fieldName || f.id
+        }));
+        const numFieldInfos = numericFields.map((f) => ({
+          id: f.id,
+          fieldName: f.fieldName,
+          label: f.label || f.fieldName || f.id
+        }));
         const formulaGroup = createElement("div", { className: "mb-3" });
-        formulaGroup.appendChild(createElement("label", { className: "block text-sm font-normal text-gray-700 dark:text-gray-300 mb-1", text: "Formula" }));
-        const formulaInput = createElement("input", {
-          type: "text",
-          className: "w-full px-3 py-2 border border-gray-200 dark:border-gray-700 rounded-md bg-transparent font-mono text-sm",
-          value: selectedField.formula || "",
+        formulaGroup.appendChild(createElement("label", {
+          className: "block text-sm font-normal text-gray-700 dark:text-gray-300 mb-1",
+          text: "Formula"
+        }));
+        const numFormulaWidget = new FormulaEditorWidget({
+          mode: "plain",
+          availableFields: allFieldInfosForWidget,
+          // Always read from the store snapshot — guarantees correct reload
+          // after field switch and re-render.
+          initialValue: selectedField.formula || "",
           placeholder: "e.g. quantity * price",
-          "data-focus-id": `field-formula-${selectedField.id}`,
-          oninput: (e) => {
-            const formula = e.target.value.trim();
+          onChange: (formula) => {
             const deps = parseFormulaDependencies(formula);
-            const validation = validateFormula(formula, availableIds, availableNames, selectedField.id);
-            const hasCircular = deps.length > 0 && detectCircularDependency(schema, selectedField.id, formula, deps);
-            const errEl = formulaGroup.querySelector(".formula-error");
-            if (errEl) {
-              if (validation.valid && !hasCircular) {
-                errEl.textContent = "";
-                errEl.classList.add("hidden");
-              } else {
-                errEl.textContent = !validation.valid ? validation.error : "Circular dependency detected";
-                errEl.classList.remove("hidden");
-              }
+            const isValid2 = (() => {
+              if (!formula.trim())
+                return true;
+              const v = validateFormula(formula, availableIds, availableNames, selectedField.id);
+              if (!v.valid)
+                return false;
+              return !(deps.length > 0 && detectCircularDependency(schema, selectedField.id, formula, deps));
+            })();
+            numFormulaWidget.setError(!isValid2 && formula.trim().length > 0);
+            if (!isValid2 && formula.trim()) {
+              const v = validateFormula(formula, availableIds, availableNames, selectedField.id);
+              formulaError.textContent = !v.valid ? v.error : "Circular dependency detected";
+              formulaError.classList.remove("hidden");
+            } else {
+              formulaError.textContent = "";
+              formulaError.classList.add("hidden");
             }
             formStore.getState().updateField(selectedField.id, { formula, dependencies: deps });
           }
         });
-        formulaGroup.appendChild(formulaInput);
-        const formulaError = createElement("div", { className: "text-xs text-red-600 dark:text-red-400 mt-1 formula-error hidden" });
+        numFormulaWidget.getElement().querySelector("[data-formula-editor]")?.addEventListener("focus", () => {
+          lastFocusedFormulaWidget = numFormulaWidget;
+        });
+        formulaGroup.appendChild(numFormulaWidget.getElement());
+        const formulaError = createElement("div", {
+          className: "text-xs text-red-600 dark:text-red-400 mt-1 formula-error hidden"
+        });
         formulaGroup.appendChild(formulaError);
         body.appendChild(formulaGroup);
         const insertGroup = createElement("div", { className: "mb-3" });
-        insertGroup.appendChild(createElement("label", { className: "block text-sm font-normal text-gray-700 dark:text-gray-300 mb-1", text: "Insert Field" }));
+        insertGroup.appendChild(createElement("label", {
+          className: "block text-sm font-normal text-gray-700 dark:text-gray-300 mb-1",
+          text: "Insert Field"
+        }));
         const insertSelect = createElement("select", {
           className: "w-full px-3 py-2 border border-gray-200 dark:border-gray-700 rounded-md bg-transparent",
           onchange: (e) => {
@@ -11798,34 +12516,58 @@ var FormBuilder = class {
             const ref = sel.value;
             if (!ref)
               return;
-            const current = selectedField.formula || "";
-            const insert = current ? ` ${ref} ` : ref;
-            const newFormula = current + insert;
-            formStore.getState().updateField(selectedField.id, {
-              formula: newFormula,
-              dependencies: parseFormulaDependencies(newFormula)
-            });
-            formulaInput.value = newFormula;
+            const field = numFieldInfos.find((f) => f.fieldName === ref || f.id === ref);
+            if (field) {
+              numFormulaWidget.insertField(field);
+              lastFocusedFormulaWidget = numFormulaWidget;
+            }
             sel.value = "";
-            this.render();
           }
         });
-        insertSelect.appendChild(createElement("option", { value: "", text: "Select field to insert...", selected: true }));
-        numericFields.forEach((f) => {
+        insertSelect.appendChild(createElement("option", { value: "", text: "Select field to insert\u2026", selected: true }));
+        numFieldInfos.forEach((f) => {
           const ref = f.fieldName !== f.id ? f.fieldName : f.id;
-          insertSelect.appendChild(createElement("option", { value: ref, text: `${f.label} (${ref})` }));
+          insertSelect.appendChild(createElement("option", { value: ref, text: f.label }));
         });
         insertGroup.appendChild(insertSelect);
         body.appendChild(insertGroup);
-        const hintEl = createElement("p", {
-          className: "text-xs text-gray-500 dark:text-gray-400 mb-2",
-          text: "Use +, -, *, / and parentheses. Reference fields by their name or ID."
+        body.appendChild(createElement("label", {
+          className: "block text-sm font-normal text-gray-700 dark:text-gray-300 mb-1",
+          text: "Operators"
+        }));
+        const numMathWrap = createElement("div", { className: "flex flex-wrap gap-1 mb-3" });
+        [
+          { text: "+", insert: " + " },
+          { text: "-", insert: " - " },
+          { text: "*", insert: " * " },
+          { text: "/", insert: " / " },
+          { text: "%", insert: " % " },
+          { text: "(", insert: "(" },
+          { text: ")", insert: ")" }
+        ].forEach((op) => {
+          numMathWrap.appendChild(createElement("button", {
+            type: "button",
+            className: "px-2 py-0.5 text-xs bg-gray-100 dark:bg-gray-800 text-gray-700 dark:text-gray-300 border border-gray-200 dark:border-gray-700 rounded font-mono hover:bg-gray-200 dark:hover:bg-gray-700 transition-colors",
+            text: op.text,
+            onclick: () => {
+              (lastFocusedFormulaWidget ?? numFormulaWidget).insertText(op.insert);
+            }
+          }));
         });
-        body.appendChild(hintEl);
+        body.appendChild(numMathWrap);
+        body.appendChild(createElement("p", {
+          className: "text-xs text-gray-500 dark:text-gray-400 mb-2",
+          text: "Fields shown as labels \u2014 stored as field references internally."
+        }));
       }
     }
     if (selectedField.type === "formula") {
       const schema = formStore.getState().schema;
+      const allSchemaFieldInfos = schema.sections.flatMap((s) => s.fields).filter((f) => f.id !== selectedField.id).map((f) => ({
+        id: f.id,
+        fieldName: f.fieldName ?? f.id,
+        label: f.label || f.fieldName || f.id
+      }));
       const availableFields = getFieldsForFormula(schema, selectedField.id);
       const cfg = selectedField.formulaConfig ?? {
         mode: "single",
@@ -11878,35 +12620,43 @@ var FormBuilder = class {
       modeRow.appendChild(multipleBtn);
       modeGroup.appendChild(modeRow);
       body.appendChild(modeGroup);
+      const fwFieldInfos = allSchemaFieldInfos;
+      lastFocusedFormulaWidget = null;
+      const registerFormulaWidget = (widget) => {
+        widget.getElement().querySelector("[data-formula-editor]")?.addEventListener("focus", () => {
+          lastFocusedFormulaWidget = widget;
+        });
+      };
       if (cfg.mode === "single") {
         const exprGroup = createElement("div", { className: "mb-3" });
         exprGroup.appendChild(createElement("label", {
           className: "block text-sm font-normal text-gray-700 dark:text-gray-300 mb-1",
           text: "Expression"
         }));
-        const exprTextarea = createElement("textarea", {
-          className: "w-full px-3 py-2 border border-gray-200 dark:border-gray-700 rounded-md bg-transparent font-mono text-sm resize-none",
-          placeholder: "e.g. {fieldA} + {fieldB} * 1.18",
-          rows: "3"
-        });
-        exprTextarea.value = cfg.single?.expression ?? "";
-        exprTextarea.addEventListener("focus", () => {
-          lastFocusedExprTextarea = exprTextarea;
-        });
         const exprError = createElement("div", { className: "text-xs text-red-500 mt-1 hidden" });
-        exprTextarea.addEventListener("input", () => {
-          const expr = exprTextarea.value;
-          const result = validateFormulaExpression(expr, availableFields.map((f) => f.fieldName));
-          if (result.valid || !expr.trim()) {
-            exprError.classList.add("hidden");
-          } else {
-            exprError.textContent = result.error;
-            exprError.classList.remove("hidden");
+        const singleWidget = new FormulaEditorWidget({
+          mode: "bracket",
+          // Use ALL schema fields for the fieldMap so any ref resolves to its label
+          availableFields: fwFieldInfos,
+          // Source of truth: always read from persisted cfg, never from a
+          // closure variable.  This guarantees correct reload after field switch.
+          initialValue: cfg.single?.expression ?? "",
+          placeholder: "e.g. {fieldA} + {fieldB} * 1.18",
+          onChange: (expr) => {
+            const result = validateFormulaExpression(expr, fwFieldInfos.map((f) => f.fieldName));
+            const isValid2 = result.valid || !expr.trim();
+            singleWidget.setError(!isValid2);
+            exprError.textContent = isValid2 ? "" : result.error;
+            exprError.classList.toggle("hidden", isValid2);
+            const freshCfg = formStore.getState().schema.sections.flatMap((s) => s.fields).find((f) => f.id === selectedField.id)?.formulaConfig ?? cfg;
+            formStore.getState().updateField(selectedField.id, {
+              formulaConfig: { ...freshCfg, single: { expression: expr } }
+            });
           }
-          const freshCfg = formStore.getState().schema.sections.flatMap((s) => s.fields).find((f) => f.id === selectedField.id)?.formulaConfig ?? cfg;
-          formStore.getState().updateField(selectedField.id, { formulaConfig: { ...freshCfg, single: { expression: expr } } });
         });
-        exprGroup.appendChild(exprTextarea);
+        registerFormulaWidget(singleWidget);
+        lastFocusedFormulaWidget = singleWidget;
+        exprGroup.appendChild(singleWidget.getElement());
         exprGroup.appendChild(exprError);
         body.appendChild(exprGroup);
       } else {
@@ -11933,16 +12683,15 @@ var FormBuilder = class {
         });
         compareGroup.appendChild(compareSelect);
         body.appendChild(compareGroup);
-        const conditionsLabel = createElement("label", {
+        body.appendChild(createElement("label", {
           className: "block text-sm font-normal text-gray-700 dark:text-gray-300 mb-2",
           text: "Conditions"
-        });
-        body.appendChild(conditionsLabel);
+        }));
         const conditions = cfg.multiple?.conditions ?? [];
         conditions.forEach((cond, idx) => {
           const row = createElement("div", { className: "mb-2 p-2 rounded-md border border-gray-100 dark:border-gray-800 space-y-1" });
-          const whenLabel = createElement("div", { className: "text-xs text-gray-500 dark:text-gray-400", text: "When equals" });
-          const valueInput = createElement("input", {
+          row.appendChild(createElement("div", { className: "text-xs text-gray-500 dark:text-gray-400", text: "When equals" }));
+          row.appendChild(createElement("input", {
             type: "text",
             className: "w-full px-2 py-1 text-sm border border-gray-200 dark:border-gray-700 rounded-md bg-transparent",
             value: cond.value,
@@ -11954,25 +12703,26 @@ var FormBuilder = class {
               newConds[idx] = { ...newConds[idx], value: v };
               patchMultiple({ conditions: newConds });
             }
-          });
-          const exprLabel = createElement("div", { className: "text-xs text-gray-500 dark:text-gray-400", text: "\u2192 Expression" });
-          const condTextarea = createElement("textarea", {
-            className: "w-full px-2 py-1 text-sm border border-gray-200 dark:border-gray-700 rounded-md bg-transparent font-mono resize-none",
+          }));
+          row.appendChild(createElement("div", { className: "text-xs text-gray-500 dark:text-gray-400", text: "\u2192 Expression" }));
+          const condWidget = new FormulaEditorWidget({
+            mode: "bracket",
+            availableFields: fwFieldInfos,
+            // all-schema fieldMap
+            initialValue: cond.expression ?? "",
             placeholder: "e.g. {fieldA} + {fieldB}",
-            rows: "2"
-          });
-          condTextarea.value = cond.expression ?? "";
-          condTextarea.addEventListener("focus", () => {
-            lastFocusedExprTextarea = condTextarea;
-          });
-          condTextarea.addEventListener("input", () => {
-            const expr = condTextarea.value;
-            const freshCfg = formStore.getState().schema.sections.flatMap((s) => s.fields).find((f) => f.id === selectedField.id)?.formulaConfig ?? cfg;
-            const newConds = [...freshCfg.multiple?.conditions ?? []];
-            newConds[idx] = { ...newConds[idx], expression: expr };
-            patchMultiple({ conditions: newConds });
+            onChange: (expr) => {
+              const freshCfg = formStore.getState().schema.sections.flatMap((s) => s.fields).find((f) => f.id === selectedField.id)?.formulaConfig ?? cfg;
+              const newConds = [...freshCfg.multiple?.conditions ?? []];
+              newConds[idx] = { ...newConds[idx], expression: expr };
+              patchMultiple({ conditions: newConds });
+            }
           });
-          const removeBtn = createElement("button", {
+          registerFormulaWidget(condWidget);
+          if (!lastFocusedFormulaWidget)
+            lastFocusedFormulaWidget = condWidget;
+          row.appendChild(condWidget.getElement());
+          row.appendChild(createElement("button", {
             type: "button",
             className: "text-xs text-red-500 hover:text-red-700 dark:text-red-400",
             text: "\u2212 Remove",
@@ -11983,12 +12733,7 @@ var FormBuilder = class {
               patchMultiple({ conditions: newConds });
               this.render();
             }
-          });
-          row.appendChild(whenLabel);
-          row.appendChild(valueInput);
-          row.appendChild(exprLabel);
-          row.appendChild(condTextarea);
-          row.appendChild(removeBtn);
+          }));
           body.appendChild(row);
         });
         body.appendChild(createElement("button", {
@@ -12007,22 +12752,22 @@ var FormBuilder = class {
           className: "block text-sm font-normal text-gray-700 dark:text-gray-300 mb-1",
           text: "Fallback Expression"
         }));
-        const fallbackTextarea = createElement("textarea", {
-          className: "w-full px-3 py-2 border border-gray-200 dark:border-gray-700 rounded-md bg-transparent font-mono text-sm resize-none",
+        const fallbackWidget = new FormulaEditorWidget({
+          mode: "bracket",
+          availableFields: fwFieldInfos,
+          initialValue: cfg.multiple?.fallbackExpression ?? "",
           placeholder: "e.g. 0",
-          rows: "2"
-        });
-        fallbackTextarea.value = cfg.multiple?.fallbackExpression ?? "";
-        fallbackTextarea.addEventListener("focus", () => {
-          lastFocusedExprTextarea = fallbackTextarea;
-        });
-        fallbackTextarea.addEventListener("input", () => {
-          patchMultiple({ fallbackExpression: fallbackTextarea.value });
+          onChange: (expr) => {
+            patchMultiple({ fallbackExpression: expr });
+          }
         });
-        fallbackGroup.appendChild(fallbackTextarea);
+        registerFormulaWidget(fallbackWidget);
+        if (!lastFocusedFormulaWidget)
+          lastFocusedFormulaWidget = fallbackWidget;
+        fallbackGroup.appendChild(fallbackWidget.getElement());
         body.appendChild(fallbackGroup);
       }
-      if (availableFields.length > 0) {
+      if (fwFieldInfos.length > 0) {
         const insertGroup = createElement("div", { className: "mb-3" });
         insertGroup.appendChild(createElement("label", {
           className: "block text-sm font-normal text-gray-700 dark:text-gray-300 mb-1",
@@ -12035,27 +12780,20 @@ var FormBuilder = class {
             const ref = sel.value;
             if (!ref)
               return;
-            const ta = lastFocusedExprTextarea;
-            if (ta) {
-              const start = ta.selectionStart ?? ta.value.length;
-              const end = ta.selectionEnd ?? ta.value.length;
-              const before = ta.value.slice(0, start);
-              const after = ta.value.slice(end);
-              const pad = before.length > 0 && !/\s$/.test(before) ? " " : "";
-              ta.value = before + pad + ref + after;
-              const newPos = before.length + pad.length + ref.length;
-              ta.selectionStart = ta.selectionEnd = newPos;
-              ta.dispatchEvent(new Event("input", { bubbles: true }));
-              ta.focus();
+            const field = fwFieldInfos.find((f) => f.fieldName === ref || f.id === ref);
+            const target = lastFocusedFormulaWidget;
+            if (field && target) {
+              target.insertField(field);
             }
             sel.value = "";
           }
         });
         insertSelect.appendChild(createElement("option", { value: "", text: "Select field to insert\u2026", selected: true }));
-        availableFields.forEach((f) => {
+        fwFieldInfos.forEach((f) => {
           insertSelect.appendChild(createElement("option", {
-            value: `{${f.fieldName}}`,
-            text: `${f.label} ({${f.fieldName}})`
+            value: f.fieldName !== f.id ? f.fieldName : f.id,
+            text: f.label
+            // show only human-readable label
           }));
         });
         insertGroup.appendChild(insertSelect);
@@ -12086,16 +12824,7 @@ var FormBuilder = class {
           className: "px-2 py-0.5 text-xs bg-gray-100 dark:bg-gray-800 text-gray-700 dark:text-gray-300 border border-gray-200 dark:border-gray-700 rounded font-mono hover:bg-gray-200 dark:hover:bg-gray-700 transition-colors",
           text: op.text,
           onclick: () => {
-            const ta = lastFocusedExprTextarea;
-            if (!ta)
-              return;
-            const start = ta.selectionStart ?? ta.value.length;
-            const end = ta.selectionEnd ?? ta.value.length;
-            ta.value = ta.value.slice(0, start) + op.insert + ta.value.slice(end);
-            const newPos = start + op.insert.length;
-            ta.selectionStart = ta.selectionEnd = newPos;
-            ta.dispatchEvent(new Event("input", { bubbles: true }));
-            ta.focus();
+            lastFocusedFormulaWidget?.insertText(op.insert);
           }
         }));
       });