form-builder-pro 1.4.0 → 1.4.2

package/dist/index.mjs

@@ -4097,7 +4097,8 @@ var FIELD_TYPES = [
   { type: "repeater", label: "Repeater", icon: "Copy" },
   { type: "file", label: "File Upload", icon: "Upload" },
   { type: "image", label: "Image", icon: "Image" },
-  { type: "name_generator", label: "Name Generator", icon: "Hash" }
+  { type: "name_generator", label: "Name Generator", icon: "Hash" },
+  { type: "formula", label: "Formula", icon: "Calculator" }
 ];
 var DEFAULT_FIELD_CONFIG = {
   text: { label: "Text Input", placeholder: "Enter text...", width: "100%", enabled: true, visible: true },
@@ -4154,6 +4155,19 @@ var DEFAULT_FIELD_CONFIG = {
     nameGeneratorFormat: "TEXT_ID",
     nameGeneratorText: "",
     nameGeneratorIdPadding: 4
+  },
+  formula: {
+    label: "Formula Field",
+    placeholder: "\u2014",
+    width: "50%",
+    enabled: true,
+    visible: true,
+    formulaConfig: {
+      mode: "single",
+      single: { expression: "" },
+      multiple: { compareField: "", conditions: [], fallbackExpression: "" },
+      decimalPlaces: 2
+    }
   }
 };
 var VALIDATION_TYPE_PRESETS = {
@@ -4503,6 +4517,8 @@ function normalizeFieldType(type) {
     return "datetime";
   if (str === "NAME_GENERATOR" || normalized === "namegenerator")
     return "name_generator";
+  if (str === "FORMULA" || normalized === "formula")
+    return "formula";
   return str.toLowerCase();
 }
 function transformField(field) {
@@ -4731,6 +4747,31 @@ function transformField(field) {
     transformed.repeatIncrementEnabled = field.repeatIncrementEnabled;
   if (field.dateConstraints !== void 0)
     transformed.dateConstraints = field.dateConstraints;
+  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)
@@ -5045,6 +5086,36 @@ function fieldToPayload(field, opts) {
       payload.showWhenValueOffFields = field.showWhenValueOffFields;
     }
   }
+  if (field.type === "formula") {
+    payload.fieldType = "FORMULA";
+    payload.type = "formula";
+    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";
     payload.type = "number";
@@ -5992,7 +6063,8 @@ var ICONS = {
   "MapPin": '<path stroke-linecap="round" stroke-linejoin="round" d="M15 10.5a3 3 0 11-6 0 3 3 0 016 0z" /><path stroke-linecap="round" stroke-linejoin="round" d="M19.5 10.5c0 7.142-7.5 11.25-7.5 11.25S4.5 17.642 4.5 10.5a7.5 7.5 0 1115 0z" />',
   "Briefcase": '<path stroke-linecap="round" stroke-linejoin="round" d="M20.25 14.15v4.25c0 1.094-.787 2.036-1.872 2.18-2.087.277-4.216.42-6.378.42s-4.291-.143-6.378-.42c-1.085-.144-1.872-1.086-1.872-2.18v-4.25m16.5 0a2.18 2.18 0 00.75-1.661V8.706c0-1.081-.768-2.015-1.837-2.175a48.114 48.114 0 00-3.413-.387m4.5 8.006c-.194.165-.42.295-.67.38-1.053.33-2.177.58-3.345.726-.26.032-.52.05-.778.066m-13.882-6.626h.008v.008h-.008v-.008zm1.096-3.837a48.116 48.116 0 00-3.413.387c-1.069.16-1.837 1.094-1.837 2.175v4.784c0 .493.196.958.536 1.344m0 0a17.8 17.8 0 013.344.726c.25.085.476.215.67.38m13.784-5.32c-.34-.386-.536-.851-.536-1.344v-4.784c0-1.081-.768-2.015-1.837-2.175a48.041 48.041 0 01-3.413-.387m-4.5 8.006c.194.165.42.295.67.38 1.053.33 2.177.58 3.345.726.26.032.52.05.778.066m0-7.384V5.626a2.25 2.25 0 00-2.25-2.25h-4.5a2.25 2.25 0 00-2.25 2.25v2.247M16.5 6h-9" />',
   "Eye": '<path stroke-linecap="round" stroke-linejoin="round" d="M2.036 12.322a1.012 1.012 0 010-.639C3.423 7.51 7.36 4.5 12 4.5c4.638 0 8.573 3.007 9.963 7.178.07.207.07.431 0 .639C20.577 16.49 16.64 19.5 12 19.5c-4.638 0-8.573-3.007-9.963-7.178z" /><path stroke-linecap="round" stroke-linejoin="round" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" />',
-  "Cog": '<path stroke-linecap="round" stroke-linejoin="round" d="M9.594 3.94c.09-.542.56-.94 1.11-.94h2.593c.55 0 1.02.398 1.11.94l.213 1.281c.063.374.313.686.645.87.074.04.147.083.22.127.324.196.72.257 1.075.124l1.217-.456a1.125 1.125 0 011.37.49l1.296 2.247a1.125 1.125 0 01-.26 1.431l-1.003.827c-.293.24-.438.613-.431.992a6.759 6.759 0 010 .255c-.007.378.138.75.43.99l1.005.828c.424.35.534.954.26 1.43l-1.298 2.247a1.125 1.125 0 01-1.369.491l-1.217-.456c-.355-.133-.75-.072-1.076.124a6.57 6.57 0 01-.22.128c-.331.183-.581.495-.644.869l-.213 1.28c-.09.543-.56.941-1.11.941h-2.594c-.55 0-1.02-.398-1.11-.94l-.213-1.281c-.062-.374-.312-.686-.644-.87a6.52 6.52 0 01-.22-.127c-.325-.196-.72-.257-1.076-.124l-1.217.456a1.125 1.125 0 01-1.369-.49l-1.297-2.247a1.125 1.125 0 01.26-1.431l1.004-.827c.292-.24.437-.613.43-.992a6.932 6.932 0 010-.255c.007-.378-.138-.75-.43-.99l-1.004-.828a1.125 1.125 0 01-.26-1.43l1.297-2.247a1.125 1.125 0 011.37-.491l1.216.456c.356.133.751.072 1.076-.124.072-.044.146-.087.22-.128.332-.183.582-.495.644-.869l.214-1.281z" /><path stroke-linecap="round" stroke-linejoin="round" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" />'
+  "Cog": '<path stroke-linecap="round" stroke-linejoin="round" d="M9.594 3.94c.09-.542.56-.94 1.11-.94h2.593c.55 0 1.02.398 1.11.94l.213 1.281c.063.374.313.686.645.87.074.04.147.083.22.127.324.196.72.257 1.075.124l1.217-.456a1.125 1.125 0 011.37.49l1.296 2.247a1.125 1.125 0 01-.26 1.431l-1.003.827c-.293.24-.438.613-.431.992a6.759 6.759 0 010 .255c-.007.378.138.75.43.99l1.005.828c.424.35.534.954.26 1.43l-1.298 2.247a1.125 1.125 0 01-1.369.491l-1.217-.456c-.355-.133-.75-.072-1.076.124a6.57 6.57 0 01-.22.128c-.331.183-.581.495-.644.869l-.213 1.28c-.09.543-.56.941-1.11.941h-2.594c-.55 0-1.02-.398-1.11-.94l-.213-1.281c-.062-.374-.312-.686-.644-.87a6.52 6.52 0 01-.22-.127c-.325-.196-.72-.257-1.076-.124l-1.217.456a1.125 1.125 0 01-1.369-.49l-1.297-2.247a1.125 1.125 0 01.26-1.431l1.004-.827c.292-.24.437-.613.43-.992a6.932 6.932 0 010-.255c.007-.378-.138-.75-.43-.99l-1.004-.828a1.125 1.125 0 01-.26-1.43l1.297-2.247a1.125 1.125 0 011.37-.491l1.216.456c.356.133.751.072 1.076-.124.072-.044.146-.087.22-.128.332-.183.582-.495.644-.869l.214-1.281z" /><path stroke-linecap="round" stroke-linejoin="round" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" />',
+  "Calculator": '<path stroke-linecap="round" stroke-linejoin="round" d="M15.75 15.75V18m-7.5-6.75h.008v.008H8.25v-.008zm0 2.25h.008v.008H8.25V13.5zm0 2.25h.008v.008H8.25v-.008zm0 2.25h.008v.008H8.25V18zm2.498-6.75h.007v.008h-.007v-.008zm0 2.25h.007v.008h-.007V13.5zm0 2.25h.007v.008h-.007v-.008zm0 2.25h.007v.008h-.007V18zm2.504-6.75h.008v.008h-.008v-.008zm0 2.25h.008v.008h-.008V13.5zm0 2.25h.008v.008h-.008v-.008zm0 2.25h.008v.008h-.008V18zm2.498-6.75h.008v.008h-.008v-.008zm0 2.25h.008v.008h-.008V13.5zM8.25 6h7.5v2.25h-7.5V6zM12 2.25c-1.892 0-3.758.11-5.593.322C5.307 2.7 4.5 3.65 4.5 4.757V19.5a2.25 2.25 0 002.25 2.25h10.5a2.25 2.25 0 002.25-2.25V4.757c0-1.108-.806-2.057-1.907-2.185A48.507 48.507 0 0012 2.25z" />'
 };
 function getIcon(name, size = 20) {
   const svgString = ICONS[name] || `<path stroke-linecap="round" stroke-linejoin="round" d="M9.879 7.519c1.171-1.025 3.071-1.025 4.242 0 1.172 1.025 1.172 2.687 0 3.712-.203.179-.43.326-.67.442-.745.361-1.45.999-1.45 1.827v.75M21 12a9 9 0 11-18 0 9 9 0 0118 0zm-9 5.25h.008v.008H12v-.008z" />`;
@@ -6226,6 +6298,311 @@ function getNumericFieldsForFormula(schema, excludeFieldId) {
   }
   return result;
 }
+var _tokenCache = /* @__PURE__ */ new Map();
+function _tokenize(expr) {
+  if (_tokenCache.has(expr))
+    return _tokenCache.get(expr);
+  const tokens = [];
+  let i = 0;
+  while (i < expr.length) {
+    const c = expr[i];
+    if (/\s/.test(c)) {
+      i++;
+      continue;
+    }
+    if (/[+\-*/(),]/.test(c)) {
+      tokens.push(c);
+      i++;
+      continue;
+    }
+    if (/[0-9.]/.test(c)) {
+      let num = "";
+      while (i < expr.length && /[0-9.]/.test(expr[i])) {
+        num += expr[i++];
+      }
+      tokens.push(num);
+      continue;
+    }
+    if (/[a-zA-Z_]/.test(c)) {
+      let ident = "";
+      while (i < expr.length && /[a-zA-Z0-9_]/.test(expr[i])) {
+        ident += expr[i++];
+      }
+      tokens.push(ident);
+      continue;
+    }
+    i++;
+  }
+  _tokenCache.set(expr, tokens);
+  return tokens;
+}
+function _evalResolved(expr) {
+  const tokens = _tokenize(expr);
+  let pos = 0;
+  const parseExpr = () => {
+    let left = parseTerm();
+    while (pos < tokens.length) {
+      if (tokens[pos] === "+") {
+        pos++;
+        left += parseTerm();
+      } else if (tokens[pos] === "-") {
+        pos++;
+        left -= parseTerm();
+      } else
+        break;
+    }
+    return left;
+  };
+  const parseTerm = () => {
+    let left = parseFactor();
+    while (pos < tokens.length) {
+      if (tokens[pos] === "*") {
+        pos++;
+        left *= parseFactor();
+      } else if (tokens[pos] === "/") {
+        pos++;
+        const r = parseFactor();
+        if (r === 0)
+          return NaN;
+        left /= r;
+      } else
+        break;
+    }
+    return left;
+  };
+  const parseArgs = () => {
+    const args = [];
+    if (pos < tokens.length && tokens[pos] !== ")") {
+      args.push(parseExpr());
+      while (pos < tokens.length && tokens[pos] === ",") {
+        pos++;
+        args.push(parseExpr());
+      }
+    }
+    return args;
+  };
+  const parseFactor = () => {
+    if (pos >= tokens.length)
+      return NaN;
+    const t = tokens[pos];
+    if (t === "(") {
+      pos++;
+      const v = parseExpr();
+      if (tokens[pos] === ")")
+        pos++;
+      return v;
+    }
+    if (t === "-") {
+      pos++;
+      return -parseFactor();
+    }
+    if (t === "+") {
+      pos++;
+      return parseFactor();
+    }
+    const n = parseFloat(t);
+    if (!isNaN(n)) {
+      pos++;
+      return n;
+    }
+    if (/^[a-zA-Z_]/.test(t) && pos + 1 < tokens.length && tokens[pos + 1] === "(") {
+      const fn = t.toUpperCase();
+      pos += 2;
+      const args = parseArgs();
+      if (pos < tokens.length && tokens[pos] === ")")
+        pos++;
+      switch (fn) {
+        case "ROUND":
+          return args.length >= 2 ? Math.round(args[0] * Math.pow(10, args[1])) / Math.pow(10, args[1]) : Math.round(args[0] ?? 0);
+        case "ABS":
+          return Math.abs(args[0] ?? 0);
+        case "MIN":
+          return args.length ? Math.min(...args) : NaN;
+        case "MAX":
+          return args.length ? Math.max(...args) : NaN;
+        case "FLOOR":
+          return Math.floor(args[0] ?? 0);
+        case "CEIL":
+          return Math.ceil(args[0] ?? 0);
+        case "SQRT":
+          return Math.sqrt(args[0] ?? 0);
+        case "POW":
+          return Math.pow(args[0] ?? 0, args[1] ?? 2);
+        default:
+          return NaN;
+      }
+    }
+    pos++;
+    return 0;
+  };
+  try {
+    const result = parseExpr();
+    return isNaN(result) ? NaN : result;
+  } catch {
+    return NaN;
+  }
+}
+function extractBracketFields(expression) {
+  if (!expression)
+    return [];
+  const seen = /* @__PURE__ */ new Set();
+  const out = [];
+  for (const m of expression.matchAll(/\{([^}]+)\}/g)) {
+    const name = m[1].trim();
+    if (name && !seen.has(name)) {
+      seen.add(name);
+      out.push(name);
+    }
+  }
+  return out;
+}
+function evaluateFormulaExpression(expression, values) {
+  if (!expression?.trim())
+    return NaN;
+  const resolved = expression.replace(/\{([^}]+)\}/g, (_, name) => {
+    const v = values[name.trim()];
+    if (v === void 0 || v === null || v === "")
+      return "0";
+    const n = typeof v === "number" ? v : parseFloat(String(v));
+    return isNaN(n) ? "0" : String(n);
+  });
+  _tokenCache.delete(resolved);
+  return _evalResolved(resolved);
+}
+function evaluateFormulaConfig(config, values, compareValue) {
+  if (!config)
+    return { result: NaN, error: "No formula config" };
+  const dp = config.decimalPlaces ?? 2;
+  try {
+    let expression;
+    if (config.mode === "single") {
+      expression = config.single?.expression ?? "";
+      if (!expression.trim())
+        return { result: NaN, error: "No expression defined" };
+    } else {
+      const cmpVal = compareValue ?? "";
+      const matched = config.multiple?.conditions?.find((c) => c.value === cmpVal);
+      expression = matched?.expression ?? config.multiple?.fallbackExpression ?? "";
+      if (!expression.trim())
+        return { result: NaN, error: "No matching condition and no fallback" };
+    }
+    const raw = evaluateFormulaExpression(expression, values);
+    if (isNaN(raw))
+      return { result: NaN, error: "Expression evaluation failed (check syntax or divide-by-zero)" };
+    const result = parseFloat(raw.toFixed(dp));
+    return { result };
+  } catch (e) {
+    return { result: NaN, error: String(e) };
+  }
+}
+function validateFormulaExpression(expression, availableFieldNames) {
+  if (!expression?.trim())
+    return { valid: false, error: "Expression cannot be empty" };
+  const refs = extractBracketFields(expression);
+  const known = new Set(availableFieldNames);
+  for (const ref of refs) {
+    if (!known.has(ref)) {
+      return { valid: false, error: `Unknown field reference: "{${ref}}"` };
+    }
+  }
+  let open = 0;
+  for (const c of expression) {
+    if (c === "(")
+      open++;
+    else if (c === ")") {
+      open--;
+      if (open < 0)
+        return { valid: false, error: "Unbalanced parentheses" };
+    }
+  }
+  if (open !== 0)
+    return { valid: false, error: "Unbalanced parentheses" };
+  return { valid: true };
+}
+function getFieldsForFormula(schema, excludeFieldId) {
+  const result = [];
+  const NUMERIC_TYPES = /* @__PURE__ */ new Set(["number", "formula"]);
+  for (const section of schema.sections) {
+    for (const field of section.fields) {
+      if (!NUMERIC_TYPES.has(field.type))
+        continue;
+      if (excludeFieldId && field.id === excludeFieldId)
+        continue;
+      const fieldName = field.fieldName ?? field.id;
+      result.push({ id: field.id, fieldName, label: field.label || fieldName });
+    }
+  }
+  return result;
+}
+function detectFormulaFieldCircularDependency(schema, formulaFieldId, config) {
+  const resolveField = (ref) => {
+    for (const s of schema.sections) {
+      for (const f of s.fields) {
+        if (f.fieldName === ref || f.id === ref)
+          return f;
+      }
+    }
+    return void 0;
+  };
+  const getDepsFromConfig = (f) => {
+    if (f.type !== "formula" || !f.formulaConfig)
+      return [];
+    const cfg = f.formulaConfig;
+    const exprs = [];
+    if (cfg.mode === "single") {
+      if (cfg.single?.expression)
+        exprs.push(cfg.single.expression);
+    } else {
+      cfg.multiple?.conditions?.forEach((c) => {
+        if (c.expression)
+          exprs.push(c.expression);
+      });
+      if (cfg.multiple?.fallbackExpression)
+        exprs.push(cfg.multiple.fallbackExpression);
+    }
+    return exprs.flatMap((e) => extractBracketFields(e));
+  };
+  const visited = /* @__PURE__ */ new Set();
+  const hasCycle = (fieldId) => {
+    if (visited.has(fieldId))
+      return true;
+    visited.add(fieldId);
+    const field = resolveField(fieldId);
+    if (!field || field.type !== "formula" || !field.formulaConfig) {
+      visited.delete(fieldId);
+      return false;
+    }
+    for (const dep of getDepsFromConfig(field)) {
+      const depField = resolveField(dep);
+      if (!depField)
+        continue;
+      if (depField.id === formulaFieldId) {
+        visited.delete(fieldId);
+        return true;
+      }
+      if (hasCycle(depField.id)) {
+        visited.delete(fieldId);
+        return true;
+      }
+    }
+    visited.delete(fieldId);
+    return false;
+  };
+  const thisField = resolveField(formulaFieldId);
+  if (!thisField || !config)
+    return false;
+  const thisDeps = getDepsFromConfig({ ...thisField, formulaConfig: config });
+  for (const dep of thisDeps) {
+    const depField = resolveField(dep);
+    if (!depField)
+      continue;
+    if (depField.id === formulaFieldId)
+      return true;
+    if (hasCycle(depField.id))
+      return true;
+  }
+  return false;
+}
 
 // src/core/countryData.ts
 var COUNTRY_DATA = [
@@ -6875,6 +7252,19 @@ var FieldRenderer = class {
         });
         break;
       }
+      case "formula": {
+        const formulaDisplay = value !== void 0 && value !== null ? String(value) : "\u2014";
+        input = createElement("input", {
+          type: "text",
+          className: "flex min-h-touch w-full rounded-md border border-input bg-gray-50 dark:bg-gray-800 px-3 py-2 text-sm sm:text-base font-mono ring-offset-background placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50",
+          placeholder: "\u2014",
+          value: formulaDisplay,
+          readonly: true,
+          disabled: true,
+          title: "Computed field \u2014 value is calculated from a formula"
+        });
+        break;
+      }
       default:
         const rules = getValidationRules(field);
         const useNumericTextInput = field.type === "text" && isNumericTextField(field);
@@ -7299,6 +7689,21 @@ function buildFormulaValuesMap(schema, data) {
         values[field.fieldName] = newVal;
     }
   }
+  const formulaTypeFields = allFields.filter((f) => f.type === "formula" && f.formulaConfig);
+  for (let pass = 0; pass < Math.max(1, formulaTypeFields.length); pass++) {
+    for (const field of formulaTypeFields) {
+      const modelKey = getModelKey(field);
+      const compareFieldName = field.formulaConfig.multiple?.compareField;
+      const compareValue = compareFieldName ? String(values[compareFieldName] ?? "") : "";
+      const evalResult = evaluateFormulaConfig(field.formulaConfig, values, compareValue);
+      const dp = field.formulaConfig.decimalPlaces ?? 2;
+      const newVal = !evalResult.error && !isNaN(evalResult.result) ? parseFloat(evalResult.result.toFixed(dp)) : void 0;
+      values[modelKey] = newVal;
+      values[field.id] = newVal;
+      if (field.fieldName)
+        values[field.fieldName] = newVal;
+    }
+  }
   return values;
 }
 function computeFormulaValue(field, schema, data) {
@@ -7322,6 +7727,31 @@ function isFormulaDependency(schema, modelKey, fieldId) {
         if (fieldId && field.dependencies.includes(fieldId))
           return true;
       }
+      if (field.type === "formula" && field.formulaConfig) {
+        const cfg = field.formulaConfig;
+        const exprs = [];
+        if (cfg.mode === "single") {
+          if (cfg.single?.expression)
+            exprs.push(cfg.single.expression);
+        } else {
+          cfg.multiple?.conditions?.forEach((c) => {
+            if (c.expression)
+              exprs.push(c.expression);
+          });
+          if (cfg.multiple?.fallbackExpression)
+            exprs.push(cfg.multiple.fallbackExpression);
+          if (cfg.multiple?.compareField) {
+            if (cfg.multiple.compareField === modelKey || cfg.multiple.compareField === fieldId)
+              return true;
+          }
+        }
+        for (const expr of exprs) {
+          for (const ref of extractBracketFields(expr)) {
+            if (ref === modelKey || fieldId && ref === fieldId)
+              return true;
+          }
+        }
+      }
     }
   }
   return false;
@@ -7390,6 +7820,15 @@ var FormRenderer = class {
           const computed = computeFormulaValue(field, this.schema, this.data);
           fieldValue = computed;
           this.data[modelKey] = computed;
+        } else if (field.type === "formula" && field.formulaConfig) {
+          const allValues = buildFormulaValuesMap(this.schema, this.data);
+          const compareFieldName = field.formulaConfig.multiple?.compareField;
+          const compareValue = compareFieldName ? String(allValues[compareFieldName] ?? "") : "";
+          const evalResult = evaluateFormulaConfig(field.formulaConfig, allValues, compareValue);
+          const dp = field.formulaConfig.decimalPlaces ?? 2;
+          const computed = !evalResult.error && !isNaN(evalResult.result) ? parseFloat(evalResult.result.toFixed(dp)) : void 0;
+          fieldValue = computed;
+          this.data[modelKey] = computed;
         } else if (field.type === "name_generator") {
           fieldValue = this.data[modelKey];
           if (!fieldValue) {
@@ -7401,7 +7840,7 @@ var FormRenderer = class {
         } else {
           fieldValue = this.data[modelKey];
         }
-        const isFormulaField = field.type === "number" && field.valueSource === "formula";
+        const isFormulaField = field.type === "number" && field.valueSource === "formula" || field.type === "formula";
         const fieldEl = FieldRenderer.render(
           field,
           fieldValue,
@@ -10113,8 +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 lastFocusedFormulaWidget = null;
 var LABEL_DEBOUNCE_MS = 300;
 var labelUpdateTimeouts = /* @__PURE__ */ new Map();
 var FormBuilder = class {
@@ -10589,6 +11667,43 @@ var FormBuilder = class {
             }
           }
         }
+        for (const field of schema.sections.flatMap((s) => s.fields)) {
+          if (field.type !== "formula" || !field.formulaConfig)
+            continue;
+          const fcfg = field.formulaConfig;
+          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)
+              exprs.push(fcfg.single.expression);
+          } else {
+            fcfg.multiple?.conditions?.forEach((c) => {
+              if (c.expression)
+                exprs.push(c.expression);
+            });
+            if (fcfg.multiple?.fallbackExpression)
+              exprs.push(fcfg.multiple.fallbackExpression);
+          }
+          for (const expr of exprs) {
+            const result = validateFormulaExpression(expr, validRefs);
+            if (!result.valid) {
+              alert(`Formula error in "${field.label}": ${result.error}`);
+              return;
+            }
+          }
+          if (detectFormulaFieldCircularDependency(schema, field.id, fcfg)) {
+            alert(`Circular dependency detected in formula for "${field.label}"`);
+            return;
+          }
+        }
         schema.sections.forEach((section) => {
           section.fields?.forEach((field) => {
             if (field.type === "number" && field.validations) {
@@ -11336,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) => {
@@ -11375,33 +12516,364 @@ 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", {
+        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(numMathWrap);
+        body.appendChild(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."
+          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",
+        single: { expression: "" },
+        multiple: { compareField: "", conditions: [], fallbackExpression: "" },
+        decimalPlaces: 2
+      };
+      const patchFormulaConfig = (patch) => {
+        const fresh = formStore.getState().schema.sections.flatMap((s) => s.fields).find((f) => f.id === selectedField.id);
+        const current = fresh?.formulaConfig ?? cfg;
+        formStore.getState().updateField(selectedField.id, { formulaConfig: { ...current, ...patch } });
+      };
+      const patchMultiple = (patch) => {
+        const fresh = formStore.getState().schema.sections.flatMap((s) => s.fields).find((f) => f.id === selectedField.id);
+        const current = fresh?.formulaConfig ?? cfg;
+        patchFormulaConfig({ multiple: { ...current.multiple, ...patch } });
+      };
+      const formulaHeader = createElement("h3", {
+        className: "text-xs font-semibold text-gray-500 uppercase tracking-wider mb-3 mt-4",
+        text: "Formula Configuration"
+      });
+      body.appendChild(formulaHeader);
+      const modeGroup = createElement("div", { className: "mb-4" });
+      modeGroup.appendChild(createElement("label", {
+        className: "block text-sm font-normal text-gray-700 dark:text-gray-300 mb-2",
+        text: "Mode"
+      }));
+      const modeRow = createElement("div", { className: "flex gap-2" });
+      const activeModeClass = "flex-1 px-3 py-1.5 text-sm rounded-md border bg-[#635bff] text-white border-[#635bff] font-medium";
+      const inactiveModeClass = "flex-1 px-3 py-1.5 text-sm rounded-md border border-gray-300 dark:border-gray-600 text-gray-600 dark:text-gray-400 hover:border-[#635bff] transition-colors";
+      const singleBtn = createElement("button", {
+        type: "button",
+        className: cfg.mode === "single" ? activeModeClass : inactiveModeClass,
+        text: "Single Expression",
+        onclick: () => {
+          patchFormulaConfig({ mode: "single" });
+          this.render();
+        }
+      });
+      const multipleBtn = createElement("button", {
+        type: "button",
+        className: cfg.mode === "multiple" ? activeModeClass : inactiveModeClass,
+        text: "Multiple Conditions",
+        onclick: () => {
+          patchFormulaConfig({ mode: "multiple" });
+          this.render();
+        }
+      });
+      modeRow.appendChild(singleBtn);
+      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 exprError = createElement("div", { className: "text-xs text-red-500 mt-1 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 } }
+            });
+          }
+        });
+        registerFormulaWidget(singleWidget);
+        lastFocusedFormulaWidget = singleWidget;
+        exprGroup.appendChild(singleWidget.getElement());
+        exprGroup.appendChild(exprError);
+        body.appendChild(exprGroup);
+      } else {
+        const compareGroup = createElement("div", { className: "mb-3" });
+        compareGroup.appendChild(createElement("label", {
+          className: "block text-sm font-normal text-gray-700 dark:text-gray-300 mb-1",
+          text: "Compare Field"
+        }));
+        const compareSelect = createElement("select", {
+          className: "w-full px-3 py-2 border border-gray-200 dark:border-gray-700 rounded-md bg-transparent",
+          onchange: (e) => {
+            const val = e.target.value;
+            patchMultiple({ compareField: val });
+          }
+        });
+        compareSelect.appendChild(createElement("option", { value: "", text: "Select field to compare\u2026", selected: !cfg.multiple?.compareField }));
+        schema.sections.flatMap((s) => s.fields).filter((f) => f.id !== selectedField.id).forEach((f) => {
+          const fn = f.fieldName ?? f.id;
+          compareSelect.appendChild(createElement("option", {
+            value: fn,
+            text: `${f.label} (${fn})`,
+            selected: cfg.multiple?.compareField === fn
+          }));
+        });
+        compareGroup.appendChild(compareSelect);
+        body.appendChild(compareGroup);
+        body.appendChild(createElement("label", {
+          className: "block text-sm font-normal text-gray-700 dark:text-gray-300 mb-2",
+          text: "Conditions"
+        }));
+        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" });
+          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,
+            placeholder: "e.g. BHS 146",
+            oninput: (e) => {
+              const v = e.target.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], value: v };
+              patchMultiple({ conditions: newConds });
+            }
+          }));
+          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}",
+            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 });
+            }
+          });
+          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",
+            onclick: () => {
+              const freshCfg = formStore.getState().schema.sections.flatMap((s) => s.fields).find((f) => f.id === selectedField.id)?.formulaConfig ?? cfg;
+              const newConds = [...freshCfg.multiple?.conditions ?? []];
+              newConds.splice(idx, 1);
+              patchMultiple({ conditions: newConds });
+              this.render();
+            }
+          }));
+          body.appendChild(row);
         });
-        body.appendChild(hintEl);
+        body.appendChild(createElement("button", {
+          type: "button",
+          className: "w-full mb-3 py-1.5 text-sm border border-dashed border-gray-300 dark:border-gray-600 rounded-md text-gray-500 dark:text-gray-400 hover:border-[#635bff] hover:text-[#635bff] transition-colors",
+          text: "+ Add Condition",
+          onclick: () => {
+            const freshCfg = formStore.getState().schema.sections.flatMap((s) => s.fields).find((f) => f.id === selectedField.id)?.formulaConfig ?? cfg;
+            const newConds = [...freshCfg.multiple?.conditions ?? [], { value: "", expression: "" }];
+            patchMultiple({ conditions: newConds });
+            this.render();
+          }
+        }));
+        const fallbackGroup = createElement("div", { className: "mb-3" });
+        fallbackGroup.appendChild(createElement("label", {
+          className: "block text-sm font-normal text-gray-700 dark:text-gray-300 mb-1",
+          text: "Fallback Expression"
+        }));
+        const fallbackWidget = new FormulaEditorWidget({
+          mode: "bracket",
+          availableFields: fwFieldInfos,
+          initialValue: cfg.multiple?.fallbackExpression ?? "",
+          placeholder: "e.g. 0",
+          onChange: (expr) => {
+            patchMultiple({ fallbackExpression: expr });
+          }
+        });
+        registerFormulaWidget(fallbackWidget);
+        if (!lastFocusedFormulaWidget)
+          lastFocusedFormulaWidget = fallbackWidget;
+        fallbackGroup.appendChild(fallbackWidget.getElement());
+        body.appendChild(fallbackGroup);
       }
+      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",
+          text: "Insert Field Reference"
+        }));
+        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) => {
+            const sel = e.target;
+            const ref = sel.value;
+            if (!ref)
+              return;
+            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 }));
+        fwFieldInfos.forEach((f) => {
+          insertSelect.appendChild(createElement("option", {
+            value: f.fieldName !== f.id ? f.fieldName : f.id,
+            text: f.label
+            // show only human-readable label
+          }));
+        });
+        insertGroup.appendChild(insertSelect);
+        body.appendChild(insertGroup);
+      }
+      body.appendChild(createElement("label", {
+        className: "block text-sm font-normal text-gray-700 dark:text-gray-300 mb-1",
+        text: "Math Helpers"
+      }));
+      const mathWrap = createElement("div", { className: "flex flex-wrap gap-1 mb-3" });
+      const mathOps = [
+        { text: "+", insert: " + " },
+        { text: "-", insert: " - " },
+        { text: "*", insert: " * " },
+        { text: "/", insert: " / " },
+        { text: "(", insert: "(" },
+        { text: ")", insert: ")" },
+        { text: "ROUND", insert: "ROUND(" },
+        { text: "ABS", insert: "ABS(" },
+        { text: "MIN", insert: "MIN(" },
+        { text: "MAX", insert: "MAX(" },
+        { text: "FLOOR", insert: "FLOOR(" },
+        { text: "CEIL", insert: "CEIL(" }
+      ];
+      mathOps.forEach((op) => {
+        mathWrap.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?.insertText(op.insert);
+          }
+        }));
+      });
+      body.appendChild(mathWrap);
+      const dpGroup = createElement("div", { className: "mb-3" });
+      dpGroup.appendChild(createElement("label", {
+        className: "block text-sm font-normal text-gray-700 dark:text-gray-300 mb-1",
+        text: "Decimal Places"
+      }));
+      dpGroup.appendChild(createElement("input", {
+        type: "number",
+        className: "w-full px-3 py-2 border border-gray-200 dark:border-gray-700 rounded-md bg-transparent",
+        value: String(cfg.decimalPlaces ?? 2),
+        min: "0",
+        max: "10",
+        placeholder: "2",
+        oninput: (e) => {
+          const v = e.target.value;
+          patchFormulaConfig({ decimalPlaces: v !== "" ? parseInt(v, 10) : 2 });
+        }
+      }));
+      body.appendChild(dpGroup);
+      const zeroValues = {};
+      availableFields.forEach((f) => {
+        zeroValues[f.fieldName] = 0;
+        zeroValues[f.id] = 0;
+      });
+      let previewText = "\u2014";
+      try {
+        const previewResult = evaluateFormulaConfig(cfg, zeroValues);
+        if (!previewResult.error && !isNaN(previewResult.result)) {
+          previewText = previewResult.result.toFixed(cfg.decimalPlaces ?? 2);
+        } else if (previewResult.error) {
+          previewText = `Error: ${previewResult.error}`;
+        }
+      } catch {
+      }
+      const previewSection = createElement("div", { className: "mb-4" });
+      previewSection.appendChild(createElement("label", {
+        className: "block text-xs font-semibold text-gray-500 uppercase tracking-wider mb-1",
+        text: "Preview (fields = 0)"
+      }));
+      previewSection.appendChild(createElement("div", {
+        className: "px-3 py-2 bg-gray-50 dark:bg-gray-800 border border-gray-200 dark:border-gray-700 rounded-md text-sm font-mono text-gray-700 dark:text-gray-300",
+        text: previewText
+      }));
+      body.appendChild(previewSection);
     }
-    if (selectedField.type !== "image") {
+    if (selectedField.type !== "image" && selectedField.type !== "formula") {
       const placeholderGroup = createElement("div");
       placeholderGroup.appendChild(createElement("label", { className: "block text-sm font-normal text-gray-700 dark:text-gray-300 mb-1", text: "Placeholder" }));
       placeholderGroup.appendChild(createElement("input", {
@@ -12875,6 +14347,6 @@ sortablejs/modular/sortable.esm.js:
    *)
 */
 
-export { FormBuilder, FormRenderer, FormSchemaValidation, LOOKUP_SOURCE_TYPE_OPTIONS, builderToPlatform, cleanFormSchema, convertValidationObjectToArray, detectCircularDependency, evaluateFormula, formStore, generateName, getColSpanFromWidth, getNumericFieldsForFormula, getValidationConfigForAngular, initFormBuilder, parseFormulaDependencies, parseWidth, platformToBuilder, resetNameGeneratorCounter, validateFormula };
+export { FormBuilder, FormRenderer, FormSchemaValidation, LOOKUP_SOURCE_TYPE_OPTIONS, builderToPlatform, cleanFormSchema, convertValidationObjectToArray, detectCircularDependency, detectFormulaFieldCircularDependency, evaluateFormula, evaluateFormulaConfig, evaluateFormulaExpression, extractBracketFields, formStore, generateName, getColSpanFromWidth, getFieldsForFormula, getNumericFieldsForFormula, getValidationConfigForAngular, initFormBuilder, parseFormulaDependencies, parseWidth, platformToBuilder, resetNameGeneratorCounter, validateFormula, validateFormulaExpression };
 //# sourceMappingURL=out.js.map
 //# sourceMappingURL=index.mjs.map