form-builder-pro 1.4.0 → 1.4.1

package/dist/index.js

@@ -4099,7 +4099,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 },
@@ -4156,6 +4157,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 = {
@@ -4505,6 +4519,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) {
@@ -4733,6 +4749,8 @@ 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;
   if (field.nameGeneratorFormat !== void 0)
     transformed.nameGeneratorFormat = field.nameGeneratorFormat;
   if (field.nameGeneratorText !== void 0)
@@ -5047,6 +5065,12 @@ function fieldToPayload(field, opts) {
       payload.showWhenValueOffFields = field.showWhenValueOffFields;
     }
   }
+  if (field.type === "formula") {
+    payload.fieldType = "FORMULA";
+    payload.type = "formula";
+    if (field.formulaConfig !== void 0)
+      payload.formulaConfig = field.formulaConfig;
+  }
   if (field.type === "repeater") {
     payload.fieldType = "REPEATER";
     payload.type = "number";
@@ -5994,7 +6018,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" />`;
@@ -6228,6 +6253,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 = [
@@ -6877,6 +7207,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);
@@ -7301,6 +7644,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) {
@@ -7324,6 +7682,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;
@@ -7392,6 +7775,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) {
@@ -7403,7 +7795,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,
@@ -10117,6 +10509,7 @@ var SectionList = class {
 
 // src/builder/FormBuilder.ts
 var advancedCssPanelState = /* @__PURE__ */ new Map();
+var lastFocusedExprTextarea = null;
 var LABEL_DEBOUNCE_MS = 300;
 var labelUpdateTimeouts = /* @__PURE__ */ new Map();
 var FormBuilder = class {
@@ -10591,6 +10984,36 @@ 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 fAvailable = getFieldsForFormula(schema, field.id);
+          const fNames = fAvailable.map((f) => f.fieldName);
+          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, fNames);
+            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) {
@@ -11403,7 +11826,327 @@ var FormBuilder = class {
         body.appendChild(hintEl);
       }
     }
-    if (selectedField.type !== "image") {
+    if (selectedField.type === "formula") {
+      const schema = formStore.getState().schema;
+      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);
+      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 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);
+        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);
+        const conditionsLabel = 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", {
+            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 });
+            }
+          });
+          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",
+            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 });
+          });
+          const removeBtn = 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();
+            }
+          });
+          row.appendChild(whenLabel);
+          row.appendChild(valueInput);
+          row.appendChild(exprLabel);
+          row.appendChild(condTextarea);
+          row.appendChild(removeBtn);
+          body.appendChild(row);
+        });
+        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 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",
+          placeholder: "e.g. 0",
+          rows: "2"
+        });
+        fallbackTextarea.value = cfg.multiple?.fallbackExpression ?? "";
+        fallbackTextarea.addEventListener("focus", () => {
+          lastFocusedExprTextarea = fallbackTextarea;
+        });
+        fallbackTextarea.addEventListener("input", () => {
+          patchMultiple({ fallbackExpression: fallbackTextarea.value });
+        });
+        fallbackGroup.appendChild(fallbackTextarea);
+        body.appendChild(fallbackGroup);
+      }
+      if (availableFields.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 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();
+            }
+            sel.value = "";
+          }
+        });
+        insertSelect.appendChild(createElement("option", { value: "", text: "Select field to insert\u2026", selected: true }));
+        availableFields.forEach((f) => {
+          insertSelect.appendChild(createElement("option", {
+            value: `{${f.fieldName}}`,
+            text: `${f.label} ({${f.fieldName}})`
+          }));
+        });
+        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: () => {
+            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();
+          }
+        }));
+      });
+      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" && 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", {
@@ -12885,10 +13628,15 @@ exports.builderToPlatform = builderToPlatform;
 exports.cleanFormSchema = cleanFormSchema;
 exports.convertValidationObjectToArray = convertValidationObjectToArray;
 exports.detectCircularDependency = detectCircularDependency;
+exports.detectFormulaFieldCircularDependency = detectFormulaFieldCircularDependency;
 exports.evaluateFormula = evaluateFormula;
+exports.evaluateFormulaConfig = evaluateFormulaConfig;
+exports.evaluateFormulaExpression = evaluateFormulaExpression;
+exports.extractBracketFields = extractBracketFields;
 exports.formStore = formStore;
 exports.generateName = generateName;
 exports.getColSpanFromWidth = getColSpanFromWidth;
+exports.getFieldsForFormula = getFieldsForFormula;
 exports.getNumericFieldsForFormula = getNumericFieldsForFormula;
 exports.getValidationConfigForAngular = getValidationConfigForAngular;
 exports.initFormBuilder = initFormBuilder;
@@ -12897,5 +13645,6 @@ exports.parseWidth = parseWidth;
 exports.platformToBuilder = platformToBuilder;
 exports.resetNameGeneratorCounter = resetNameGeneratorCounter;
 exports.validateFormula = validateFormula;
+exports.validateFormulaExpression = validateFormulaExpression;
 //# sourceMappingURL=out.js.map
 //# sourceMappingURL=index.js.map