form-builder-pro 1.2.8 → 1.2.9

package/dist/index.mjs

@@ -4119,7 +4119,8 @@ var FIELD_TYPES = [
   { type: "checkbox", label: "Checkbox", icon: "CheckSquare" },
   { type: "radio", label: "Radio Group", icon: "CircleDot" },
   { type: "toggle", label: "Toggle", icon: "ToggleSwitch" },
-  { type: "file", label: "File Upload", icon: "Upload" }
+  { type: "file", label: "File Upload", icon: "Upload" },
+  { type: "image", label: "Image", icon: "Image" }
 ];
 var DEFAULT_FIELD_CONFIG = {
   text: { label: "Text Input", placeholder: "Enter text...", width: "100%", enabled: true, visible: true },
@@ -4145,7 +4146,39 @@ var DEFAULT_FIELD_CONFIG = {
   checkbox: { label: "Checkbox", options: [], width: "100%", enabled: true, visible: true },
   radio: { label: "Radio Group", options: [], width: "100%", enabled: true, visible: true },
   toggle: { label: "Toggle", width: "50%", enabled: true, visible: true },
-  file: { label: "File Upload", width: "100%", enabled: true, visible: true }
+  file: { label: "File Upload", width: "100%", enabled: true, visible: true },
+  image: { label: "Image", width: "50%", enabled: true, visible: true }
+};
+var VALIDATION_TYPE_PRESETS = {
+  postalCode: {
+    pattern: "^[0-9]{6}$",
+    minLength: 6,
+    maxLength: 6,
+    validationType: "postalCode",
+    customErrorMessages: { pattern: "Please enter a valid 6-digit postal code" }
+  },
+  phoneNumber: {
+    pattern: "^[6-9][0-9]{9}$",
+    minLength: 10,
+    maxLength: 10,
+    validationType: "phoneNumber",
+    customErrorMessages: { pattern: "Please enter a valid 10-digit mobile number starting with 6-9" }
+  },
+  otp: {
+    pattern: "^[0-9]{4,6}$",
+    minLength: 4,
+    maxLength: 6,
+    validationType: "otp",
+    customErrorMessages: { pattern: "Please enter a valid OTP (4-6 digits)" }
+  },
+  amount: {
+    min: 0,
+    allowDecimal: true,
+    decimalPlaces: 2,
+    allowNegative: false,
+    validationType: "amount",
+    customErrorMessages: { min: "Amount must be at least 0" }
+  }
 };
 var REGEX_PRESETS = [
   {
@@ -4271,11 +4304,72 @@ var cloneField = (field) => {
     id: generateId(),
     // Ensure options are also cloned if present
     options: field.options ? field.options.map((opt) => ({ ...opt })) : void 0,
-    validation: field.validation ? field.validation.map((v) => ({ ...v })) : void 0
+    validation: field.validation ? field.validation.map((v) => ({ ...v })) : void 0,
+    // Preserve formula config for number fields (dependencies stay as-is - they reference other field ids/names)
+    valueSource: field.valueSource,
+    formula: field.formula,
+    dependencies: field.dependencies ? [...field.dependencies] : void 0
   };
 };
 
 // src/utils/mapper.ts
+function validationsToValidationObject(v) {
+  if (!v)
+    return void 0;
+  const obj = {};
+  if (v.required !== void 0)
+    obj.required = v.required;
+  if (v.pattern)
+    obj.regex = v.pattern;
+  if (v.minLength !== void 0)
+    obj.minLength = v.minLength;
+  if (v.maxLength !== void 0)
+    obj.maxLength = v.maxLength;
+  if (v.min !== void 0)
+    obj.min = v.min;
+  if (v.max !== void 0)
+    obj.max = v.max;
+  if (v.customErrorMessages?.pattern)
+    obj.regexMessage = v.customErrorMessages.pattern;
+  if (v.minSelected !== void 0)
+    obj.minSelected = v.minSelected;
+  if (v.maxSelected !== void 0)
+    obj.maxSelected = v.maxSelected;
+  if (v.minDate)
+    obj.minDate = v.minDate;
+  if (v.maxDate)
+    obj.maxDate = v.maxDate;
+  return Object.keys(obj).length > 0 ? obj : void 0;
+}
+function validationObjectToValidations(v) {
+  if (!v)
+    return void 0;
+  const validations = {};
+  if (v.required !== void 0)
+    validations.required = v.required;
+  if (v.regex)
+    validations.pattern = v.regex;
+  if (v.minLength !== void 0)
+    validations.minLength = v.minLength;
+  if (v.maxLength !== void 0)
+    validations.maxLength = v.maxLength;
+  if (v.min !== void 0)
+    validations.min = v.min;
+  if (v.max !== void 0)
+    validations.max = v.max;
+  if (v.regexMessage) {
+    validations.customErrorMessages = { pattern: v.regexMessage };
+  }
+  if (v.minSelected !== void 0)
+    validations.minSelected = v.minSelected;
+  if (v.maxSelected !== void 0)
+    validations.maxSelected = v.maxSelected;
+  if (v.minDate)
+    validations.minDate = v.minDate;
+  if (v.maxDate)
+    validations.maxDate = v.maxDate;
+  return Object.keys(validations).length > 0 ? validations : void 0;
+}
 function convertValidationObjectToArray(validationObj) {
   if (!validationObj)
     return [];
@@ -4284,7 +4378,7 @@ function convertValidationObjectToArray(validationObj) {
   }
   const rules = [];
   const obj = validationObj;
-  const hasValidationProperties = !!(obj.regex || obj.regexMessage || obj.minLength !== void 0 || obj.maxLength !== void 0 || obj.minSelected !== void 0 || obj.maxSelected !== void 0);
+  const hasValidationProperties = !!(obj.regex || obj.regexMessage || obj.minLength !== void 0 || obj.maxLength !== void 0 || obj.min !== void 0 || obj.max !== void 0 || obj.minSelected !== void 0 || obj.maxSelected !== void 0);
   const isRequired = obj.required === true || hasValidationProperties && obj.required !== false;
   if (isRequired) {
     rules.push({ type: "required", value: true });
@@ -4302,6 +4396,12 @@ function convertValidationObjectToArray(validationObj) {
   if (obj.maxLength !== void 0) {
     rules.push({ type: "maxLength", value: obj.maxLength });
   }
+  if (obj.min !== void 0) {
+    rules.push({ type: "min", value: obj.min });
+  }
+  if (obj.max !== void 0) {
+    rules.push({ type: "max", value: obj.max });
+  }
   if (obj.minSelected !== void 0) {
     rules.push({ type: "minSelected", value: obj.minSelected });
   }
@@ -4375,7 +4475,15 @@ function transformField(field) {
   if (transformed.order === void 0) {
     transformed.order = field.order !== void 0 ? field.order : 0;
   }
-  if (field.validation) {
+  if (field.validations) {
+    let validations = field.validations;
+    if (validations.validationType === "age") {
+      validations = { ...validations, validationType: "custom" };
+    }
+    transformed.validations = validations;
+    transformed.required = validations.required ?? false;
+    transformed.validation = validationsToValidationObject(validations);
+  } else if (field.validation) {
     if (Array.isArray(field.validation)) {
       const validationObj = {};
       field.validation.forEach((rule) => {
@@ -4388,6 +4496,10 @@ function transformField(field) {
           validationObj.minLength = rule.value;
         } else if (rule.type === "maxLength" && typeof rule.value === "number") {
           validationObj.maxLength = rule.value;
+        } else if (rule.type === "min" && typeof rule.value === "number") {
+          validationObj.min = rule.value;
+        } else if (rule.type === "max" && typeof rule.value === "number") {
+          validationObj.max = rule.value;
         } else if (rule.type === "minSelected" && typeof rule.value === "number") {
           validationObj.minSelected = rule.value;
         } else if (rule.type === "maxSelected" && typeof rule.value === "number") {
@@ -4400,13 +4512,20 @@ function transformField(field) {
       });
       transformed.validation = validationObj;
       transformed.required = validationObj.required || false;
+      transformed.validations = validationObjectToValidations(validationObj);
     } else {
       transformed.validation = field.validation;
       transformed.required = field.validation.required || false;
+      let validations = validationObjectToValidations(field.validation);
+      if (validations?.validationType === "age") {
+        validations = { ...validations, validationType: "custom" };
+      }
+      transformed.validations = validations;
     }
   } else if (field.required !== void 0) {
     transformed.required = field.required;
     transformed.validation = { required: field.required };
+    transformed.validations = { required: field.required };
   }
   if (normalizedType === "select") {
     if (field.multiSelect !== void 0) {
@@ -4455,6 +4574,10 @@ function transformField(field) {
     transformed.lookupValueField = lookupValueField;
   if (lookupLabelField !== void 0)
     transformed.lookupLabelField = lookupLabelField;
+  if (field.fieldName !== void 0)
+    transformed.fieldName = field.fieldName;
+  else if (field.name !== void 0)
+    transformed.fieldName = field.name;
   if (field.placeholder !== void 0)
     transformed.placeholder = field.placeholder;
   if (field.description !== void 0)
@@ -4471,6 +4594,14 @@ function transformField(field) {
     transformed.visible = field.visible;
   if (field.isd !== void 0)
     transformed.isd = field.isd;
+  if (field.imageUrl !== void 0)
+    transformed.imageUrl = field.imageUrl;
+  if (field.valueSource !== void 0)
+    transformed.valueSource = field.valueSource;
+  if (field.formula !== void 0)
+    transformed.formula = field.formula;
+  if (field.dependencies !== void 0 && Array.isArray(field.dependencies))
+    transformed.dependencies = field.dependencies;
   if (field.css !== void 0)
     transformed.css = field.css;
   if (field.optionsSource !== void 0)
@@ -4481,8 +4612,18 @@ function transformField(field) {
     transformed.groupName = field.groupName;
   if (field.masterTypeName !== void 0)
     transformed.masterTypeName = field.masterTypeName;
-  if ((normalizedType === "select" || normalizedType === "radio" || normalizedType === "checkbox") && field.options) {
-    transformed.options = field.options;
+  if ((normalizedType === "select" || normalizedType === "radio" || normalizedType === "checkbox") && field.options && Array.isArray(field.options)) {
+    transformed.options = field.options.map((opt, idx) => {
+      if (opt && typeof opt === "object" && "label" in opt && "value" in opt) {
+        return { label: String(opt.label), value: String(opt.value) };
+      }
+      const label = opt?.label ?? opt?.name ?? opt?.displayName ?? opt?.text ?? `Option ${idx + 1}`;
+      const value = opt?.value ?? opt?.id ?? opt?.name ?? String(idx);
+      return { label: String(label), value: String(value) };
+    });
+    if (normalizedType === "select" && transformed.options.length > 0 && (transformed.optionSource === "STATIC" || !transformed.optionSource) && transformed.customOptionsEnabled === void 0) {
+      transformed.customOptionsEnabled = true;
+    }
   }
   return transformed;
 }
@@ -4552,6 +4693,10 @@ function convertValidationArrayToObject(validation) {
       obj.minLength = rule.value;
     } else if (rule.type === "maxLength" && typeof rule.value === "number") {
       obj.maxLength = rule.value;
+    } else if (rule.type === "min" && typeof rule.value === "number") {
+      obj.min = rule.value;
+    } else if (rule.type === "max" && typeof rule.value === "number") {
+      obj.max = rule.value;
     } else if (rule.type === "minSelected" && typeof rule.value === "number") {
       obj.minSelected = rule.value;
     } else if (rule.type === "maxSelected" && typeof rule.value === "number") {
@@ -4575,6 +4720,8 @@ function fieldToPayload(field) {
     id: field.id,
     type: field.type,
     label: field.label,
+    name: field.fieldName || field.id,
+    // Model key for binding (API / host app)
     order: field.order !== void 0 ? field.order : 0
   };
   if (field.layout?.span !== void 0) {
@@ -4596,8 +4743,18 @@ function fieldToPayload(field) {
       span: 12
     };
   }
-  payload.validation = convertValidationArrayToObject(field.validation);
-  if (payload.validation?.required) {
+  if (field.validations) {
+    let validations = { ...field.validations };
+    if (validations.validationType === "age") {
+      validations = { ...validations, validationType: "custom" };
+    }
+    payload.validations = validations;
+    if (field.validations.required) {
+      payload.required = true;
+    }
+  }
+  payload.validation = field.validations ? validationsToValidationObject(field.validations) : convertValidationArrayToObject(field.validation);
+  if (payload.validation?.required || payload.validations?.required) {
     payload.required = true;
   }
   if (field.type === "select") {
@@ -4633,6 +4790,14 @@ function fieldToPayload(field) {
     payload.lookupLabelField = field.lookupLabelField;
   if (field.isd !== void 0)
     payload.isd = field.isd;
+  if (field.imageUrl !== void 0)
+    payload.imageUrl = field.imageUrl;
+  if (field.valueSource !== void 0)
+    payload.valueSource = field.valueSource;
+  if (field.formula !== void 0)
+    payload.formula = field.formula;
+  if (field.dependencies !== void 0 && Array.isArray(field.dependencies))
+    payload.dependencies = field.dependencies;
   if ((field.type === "select" || field.type === "radio" || field.type === "checkbox") && field.options && Array.isArray(field.options)) {
     payload.options = field.options.map((opt) => ({ label: opt.label, value: opt.value }));
   }
@@ -4657,6 +4822,20 @@ var builderToPlatform = (builderSchema) => {
 var platformToBuilder = (platformSchema) => {
   return cleanFormSchema(platformSchema);
 };
+function getValidationConfigForAngular(validations) {
+  if (!validations) {
+    return { required: false, customErrorMessages: {} };
+  }
+  return {
+    required: validations.required ?? false,
+    minLength: validations.minLength,
+    maxLength: validations.maxLength,
+    min: validations.min,
+    max: validations.max,
+    pattern: validations.pattern,
+    customErrorMessages: validations.customErrorMessages || {}
+  };
+}
 
 // src/core/useFormStore.ts
 var INITIAL_SCHEMA = {
@@ -4961,9 +5140,10 @@ var formStore = createStore((set, get) => ({
     const { existingForms, history, historyIndex } = get();
     const found = existingForms.find((f) => f.id === formId);
     if (found) {
+      const cleanedSchema = cleanFormSchema(found);
       set({
-        schema: found,
-        history: [...history.slice(0, historyIndex + 1), found],
+        schema: cleanedSchema,
+        history: [...history.slice(0, historyIndex + 1), cleanedSchema],
         historyIndex: historyIndex + 1
       });
     }
@@ -4973,9 +5153,10 @@ var formStore = createStore((set, get) => ({
     const found = existingForms.find((f) => f.id === formId);
     if (found) {
       const cloned = cloneForm(found);
+      const cleanedSchema = cleanFormSchema(cloned);
       set({
-        schema: cloned,
-        history: [...history.slice(0, historyIndex + 1), cloned],
+        schema: cleanedSchema,
+        history: [...history.slice(0, historyIndex + 1), cleanedSchema],
         historyIndex: historyIndex + 1
       });
     }
@@ -5358,6 +5539,7 @@ var ICONS = {
   "ToggleSwitch": '<rect x="2" y="6" width="20" height="12" rx="6" ry="6" stroke-linecap="round" stroke-linejoin="round" /><circle cx="8" cy="12" r="4" stroke-linecap="round" stroke-linejoin="round" />',
   // Custom SVG for toggle
   "Upload": '<path stroke-linecap="round" stroke-linejoin="round" d="M3 16.5v2.25A2.25 2.25 0 005.25 21h13.5A2.25 2.25 0 0021 18.75V16.5m-13.5-9L12 3m0 0l4.5 4.5M12 3v13.5" />',
+  "Image": '<path stroke-linecap="round" stroke-linejoin="round" d="M2.25 15.75l5.159-5.159a2.25 2.25 0 013.182 0l5.159 5.159m-1.5-1.5l1.409-1.409a2.25 2.25 0 013.182 0l2.909 2.909m-18 3.75h16.5a1.5 1.5 0 001.5-1.5V6a1.5 1.5 0 00-1.5-1.5H3.75A1.5 1.5 0 002.25 6v12a1.5 1.5 0 001.5 1.5zm10.5-11.25h.008v.008h-.008V8.25zm.375 0a.375.375 0 11-.75 0 .375.375 0 01.75 0z" />',
   // UI Icons
   "GripVertical": '<path stroke-linecap="round" stroke-linejoin="round" d="M8.25 15L12 18.75 15.75 15m-7.5-6L12 5.25 15.75 9" />',
   "GripDots": '<path stroke-linecap="round" stroke-linejoin="round" d="M12 6.75a.75.75 0 110-1.5.75.75 0 010 1.5zM12 12.75a.75.75 0 110-1.5.75.75 0 010 1.5zM12 18.75a.75.75 0 110-1.5.75.75 0 010 1.5z" />',
@@ -5390,6 +5572,224 @@ function getIcon(name, size = 20) {
   return svg;
 }
 
+// src/utils/formula.ts
+var FORMULA_OPERATOR_REGEX = /[\+\-\*\/\(\)]/g;
+function parseFormulaDependencies(formula) {
+  if (!formula || typeof formula !== "string")
+    return [];
+  const tokens = formula.replace(FORMULA_OPERATOR_REGEX, " ").split(/\s+/).filter(Boolean);
+  const seen = /* @__PURE__ */ new Set();
+  const deps = [];
+  for (const t of tokens) {
+    const trimmed = t.trim();
+    if (trimmed && !seen.has(trimmed)) {
+      seen.add(trimmed);
+      deps.push(trimmed);
+    }
+  }
+  return deps;
+}
+function validateFormula(formula, availableFieldIds, availableFieldNames, _currentFieldId) {
+  if (!formula || typeof formula !== "string") {
+    return { valid: false, error: "Formula cannot be empty" };
+  }
+  const trimmed = formula.trim();
+  if (!trimmed) {
+    return { valid: false, error: "Formula cannot be empty" };
+  }
+  const deps = parseFormulaDependencies(trimmed);
+  const validRefs = /* @__PURE__ */ new Set([...availableFieldIds, ...availableFieldNames]);
+  for (const dep of deps) {
+    if (!validRefs.has(dep)) {
+      return { valid: false, error: `Unknown field reference: "${dep}"` };
+    }
+  }
+  let open = 0;
+  for (const c of trimmed) {
+    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 detectCircularDependency(schema, formulaFieldId, _formula, dependencies) {
+  const visited = /* @__PURE__ */ new Set();
+  const resolveFieldByRef = (ref) => {
+    for (const s of schema.sections) {
+      for (const f of s.fields) {
+        if (f.id === ref || f.fieldName === ref)
+          return f;
+      }
+    }
+    return void 0;
+  };
+  const hasCycle = (fieldId) => {
+    if (visited.has(fieldId))
+      return true;
+    visited.add(fieldId);
+    const field = resolveFieldByRef(fieldId);
+    if (!field || field.type !== "number" || field.valueSource !== "formula" || !field.formula) {
+      visited.delete(fieldId);
+      return false;
+    }
+    const deps = field.dependencies ?? parseFormulaDependencies(field.formula);
+    for (const dep of deps) {
+      const depField = resolveFieldByRef(dep);
+      if (!depField)
+        continue;
+      const depId = depField.id;
+      if (depId === formulaFieldId) {
+        visited.delete(fieldId);
+        return true;
+      }
+      if (hasCycle(depId)) {
+        visited.delete(fieldId);
+        return true;
+      }
+    }
+    visited.delete(fieldId);
+    return false;
+  };
+  for (const dep of dependencies) {
+    const depField = resolveFieldByRef(dep);
+    if (!depField)
+      continue;
+    if (depField.id === formulaFieldId)
+      return true;
+    if (hasCycle(depField.id))
+      return true;
+  }
+  return false;
+}
+function evaluateFormula(formula, values) {
+  if (!formula || typeof formula !== "string")
+    return NaN;
+  const trimmed = formula.trim();
+  if (!trimmed)
+    return NaN;
+  const getValue = (ref) => {
+    const v = values[ref];
+    if (v === void 0 || v === null || v === "")
+      return 0;
+    const n = typeof v === "number" ? v : parseFloat(String(v));
+    return isNaN(n) ? 0 : n;
+  };
+  const tokens = [];
+  let i = 0;
+  while (i < trimmed.length) {
+    const c = trimmed[i];
+    if (/\s/.test(c)) {
+      i++;
+      continue;
+    }
+    if (/[\+\-\*\/\(\)]/.test(c)) {
+      tokens.push(c);
+      i++;
+      continue;
+    }
+    if (/[a-zA-Z_0-9]/.test(c)) {
+      let ident = "";
+      while (i < trimmed.length && /[a-zA-Z0-9_]/.test(trimmed[i])) {
+        ident += trimmed[i++];
+      }
+      tokens.push(ident);
+      continue;
+    }
+    i++;
+  }
+  let pos = 0;
+  const parseExpr = () => {
+    let left = parseTerm();
+    while (pos < tokens.length) {
+      const op = tokens[pos];
+      if (op === "+") {
+        pos++;
+        left += parseTerm();
+      } else if (op === "-") {
+        pos++;
+        left -= parseTerm();
+      } else
+        break;
+    }
+    return left;
+  };
+  const parseTerm = () => {
+    let left = parseFactor();
+    while (pos < tokens.length) {
+      const op = tokens[pos];
+      if (op === "*") {
+        pos++;
+        left *= parseFactor();
+      } else if (op === "/") {
+        pos++;
+        const right = parseFactor();
+        if (right === 0)
+          return NaN;
+        left /= right;
+      } else
+        break;
+    }
+    return left;
+  };
+  const parseFactor = () => {
+    if (pos >= tokens.length)
+      return NaN;
+    const t = tokens[pos];
+    if (t === "(") {
+      pos++;
+      const v = parseExpr();
+      if (pos < tokens.length && 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;
+    }
+    pos++;
+    return getValue(t);
+  };
+  try {
+    const result = parseExpr();
+    return isNaN(result) ? NaN : result;
+  } catch {
+    return NaN;
+  }
+}
+function getNumericFieldsForFormula(schema, excludeFieldId) {
+  const result = [];
+  for (const section of schema.sections) {
+    for (const field of section.fields) {
+      if (field.type !== "number")
+        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;
+}
+
 // src/core/countryData.ts
 var COUNTRY_DATA = [
   { code: "US", name: "United States", dialCode: "+1", flag: "\u{1F1FA}\u{1F1F8}" },
@@ -5445,6 +5845,64 @@ function getDefaultCountry() {
 }
 
 // src/renderer/FieldRenderer.ts
+function getValidationRules(field) {
+  const v = field.validations;
+  if (v) {
+    return {
+      required: v.required,
+      pattern: v.pattern,
+      patternMessage: v.customErrorMessages?.pattern,
+      minLength: v.minLength,
+      maxLength: v.maxLength,
+      min: v.min,
+      max: v.max,
+      minDate: v.minDate,
+      maxDate: v.maxDate
+    };
+  }
+  const val = field.validation;
+  if (!val)
+    return {};
+  if (Array.isArray(val)) {
+    const rules = {};
+    val.forEach((r) => {
+      if (r.type === "required")
+        rules.required = true;
+      else if (r.type === "pattern") {
+        rules.pattern = r.regex;
+        rules.patternMessage = r.message;
+      } else if (r.type === "minLength")
+        rules.minLength = r.value;
+      else if (r.type === "maxLength")
+        rules.maxLength = r.value;
+      else if (r.type === "min")
+        rules.min = r.value;
+      else if (r.type === "max")
+        rules.max = r.value;
+      else if (r.type === "minDate")
+        rules.minDate = r.value;
+      else if (r.type === "maxDate")
+        rules.maxDate = r.value;
+    });
+    return rules;
+  }
+  const o = val;
+  return {
+    required: o.required,
+    pattern: o.regex,
+    patternMessage: o.regexMessage,
+    minLength: o.minLength,
+    maxLength: o.maxLength,
+    min: o.min,
+    max: o.max,
+    minDate: o.minDate,
+    maxDate: o.maxDate
+  };
+}
+function isNumericTextField(field) {
+  const v = field.validations;
+  return !!(v?.validationType && ["postalCode", "phoneNumber", "otp"].includes(v.validationType));
+}
 var FieldRenderer = class {
   static render(field, value, onChange, readOnly = false) {
     const wrapper = createElement("div", { className: "w-full form-row" });
@@ -5479,89 +5937,71 @@ var FieldRenderer = class {
     }
     let input;
     let validationMsg = null;
-    const validationArray = Array.isArray(field.validation) ? field.validation : field.validation ? (() => {
-      const obj = field.validation;
-      const rules = [];
-      if (obj.required)
-        rules.push({ type: "required", value: true });
-      if (obj.regex)
-        rules.push({ type: "pattern", regex: obj.regex, message: obj.regexMessage });
-      if (obj.minLength !== void 0)
-        rules.push({ type: "minLength", value: obj.minLength });
-      if (obj.maxLength !== void 0)
-        rules.push({ type: "maxLength", value: obj.maxLength });
-      if (obj.minSelected !== void 0)
-        rules.push({ type: "minSelected", value: obj.minSelected });
-      if (obj.maxSelected !== void 0)
-        rules.push({ type: "maxSelected", value: obj.maxSelected });
-      if (obj.minDate)
-        rules.push({ type: "minDate", value: obj.minDate });
-      if (obj.maxDate)
-        rules.push({ type: "maxDate", value: obj.maxDate });
-      return rules;
-    })() : [];
-    const hasPatternValidation = validationArray.some((v) => v.type === "pattern");
-    if (field.type === "date" || field.type === "email" || field.type === "text" && hasPatternValidation) {
+    const validationRules = getValidationRules(field);
+    const hasPatternValidation = !!validationRules.pattern;
+    const hasNumericTextValidation = isNumericTextField(field);
+    if (field.type === "date" || field.type === "email" || field.type === "number" || field.type === "text" && (hasPatternValidation || hasNumericTextValidation || validationRules.minLength !== void 0 || validationRules.maxLength !== void 0)) {
       validationMsg = createElement("div", { className: "text-xs text-red-600 dark:text-red-400 mt-1 hidden", id: `validation-${field.id}` });
     }
-    const validateField = (field2, value2, inputElement, validationMsg2) => {
+    const validateField = (f, value2, inputElement, msgEl) => {
+      const rules = getValidationRules(f);
+      const custom2 = f.validations?.customErrorMessages;
       let errorMessage = "";
-      const validationArray2 = Array.isArray(field2.validation) ? field2.validation : field2.validation ? (() => {
-        const obj = field2.validation;
-        const rules = [];
-        if (obj.required)
-          rules.push({ type: "required", value: true });
-        if (obj.regex)
-          rules.push({ type: "pattern", regex: obj.regex, message: obj.regexMessage });
-        if (obj.minLength !== void 0)
-          rules.push({ type: "minLength", value: obj.minLength });
-        if (obj.maxLength !== void 0)
-          rules.push({ type: "maxLength", value: obj.maxLength });
-        if (obj.minSelected !== void 0)
-          rules.push({ type: "minSelected", value: obj.minSelected });
-        if (obj.maxSelected !== void 0)
-          rules.push({ type: "maxSelected", value: obj.maxSelected });
-        if (obj.minDate)
-          rules.push({ type: "minDate", value: obj.minDate });
-        if (obj.maxDate)
-          rules.push({ type: "maxDate", value: obj.maxDate });
-        return rules;
-      })() : [];
-      if (field2.type === "date" && value2) {
-        const minDateRule = validationArray2.find((v) => v.type === "minDate");
-        const maxDateRule = validationArray2.find((v) => v.type === "maxDate");
+      if (rules.required && (!value2 || String(value2).trim() === "")) {
+        errorMessage = custom2?.required || "This field is required";
+      }
+      if (!errorMessage && f.type === "date" && value2) {
         const inputDate = new Date(value2);
-        if (minDateRule?.value) {
-          const minDate = new Date(minDateRule.value);
+        if (rules.minDate) {
+          const minDate = new Date(rules.minDate);
           if (inputDate < minDate) {
-            errorMessage = minDateRule.message || "Date must be after the minimum date";
+            errorMessage = "Date must be after the minimum date";
           }
         }
-        if (maxDateRule?.value && !errorMessage) {
-          const maxDate = new Date(maxDateRule.value);
+        if (!errorMessage && rules.maxDate) {
+          const maxDate = new Date(rules.maxDate);
           if (inputDate > maxDate) {
-            errorMessage = maxDateRule.message || "Date must be before the maximum date";
+            errorMessage = "Date must be before the maximum date";
           }
         }
       }
-      if ((field2.type === "email" || field2.type === "text") && value2) {
-        const patternRule = validationArray2.find((v) => v.type === "pattern");
-        if (patternRule?.regex) {
-          try {
-            const regex = new RegExp(patternRule.regex);
-            if (!regex.test(value2)) {
-              errorMessage = patternRule.message || "Invalid format";
-            }
-          } catch (e) {
+      if (!errorMessage && (f.type === "email" || f.type === "text" || f.type === "phone") && value2 && rules.pattern) {
+        try {
+          if (!new RegExp(rules.pattern).test(value2)) {
+            errorMessage = rules.patternMessage || custom2?.pattern || "Invalid format";
+          }
+        } catch (_e) {
+        }
+      }
+      if (!errorMessage && value2 && (f.type === "text" || f.type === "phone")) {
+        const len = String(value2).length;
+        if (rules.minLength !== void 0 && len < rules.minLength) {
+          errorMessage = custom2?.minLength || `Minimum length is ${rules.minLength}`;
+        }
+        if (!errorMessage && rules.maxLength !== void 0 && len > rules.maxLength) {
+          errorMessage = custom2?.maxLength || `Maximum length is ${rules.maxLength}`;
+        }
+      }
+      if (!errorMessage && f.type === "number" && value2 !== "" && value2 !== void 0) {
+        const num = parseFloat(String(value2));
+        if (!isNaN(num)) {
+          if (f.validations?.allowNegative === false && num < 0) {
+            errorMessage = custom2?.min || "Negative values are not allowed";
+          }
+          if (!errorMessage && rules.min !== void 0 && num < rules.min) {
+            errorMessage = custom2?.min || `Value must be at least ${rules.min}`;
+          }
+          if (!errorMessage && rules.max !== void 0 && num > rules.max) {
+            errorMessage = custom2?.max || `Value must be at most ${rules.max}`;
           }
         }
       }
       if (errorMessage) {
-        validationMsg2.textContent = errorMessage;
-        validationMsg2.classList.remove("hidden");
+        msgEl.textContent = errorMessage;
+        msgEl.classList.remove("hidden");
         inputElement.classList.add("border-red-500");
       } else {
-        validationMsg2.classList.add("hidden");
+        msgEl.classList.add("hidden");
         inputElement.classList.remove("border-red-500");
       }
     };
@@ -5695,59 +6135,40 @@ var FieldRenderer = class {
       case "phone":
         input = this.renderPhoneField(field, value, onChange, isEnabled);
         break;
+      case "image":
+        input = this.renderImageField(field, value ?? field.imageUrl ?? field.defaultValue, onChange, isEnabled);
+        break;
       default:
-        const fieldValidationArray = Array.isArray(field.validation) ? field.validation : field.validation ? (() => {
-          const obj = field.validation;
-          const rules = [];
-          if (obj.required)
-            rules.push({ type: "required", value: true });
-          if (obj.regex)
-            rules.push({ type: "pattern", regex: obj.regex, message: obj.regexMessage });
-          if (obj.minLength !== void 0)
-            rules.push({ type: "minLength", value: obj.minLength });
-          if (obj.maxLength !== void 0)
-            rules.push({ type: "maxLength", value: obj.maxLength });
-          if (obj.minSelected !== void 0)
-            rules.push({ type: "minSelected", value: obj.minSelected });
-          if (obj.maxSelected !== void 0)
-            rules.push({ type: "maxSelected", value: obj.maxSelected });
-          if (obj.minDate)
-            rules.push({ type: "minDate", value: obj.minDate });
-          if (obj.maxDate)
-            rules.push({ type: "maxDate", value: obj.maxDate });
-          return rules;
-        })() : [];
-        const patternRule = fieldValidationArray.find((v) => v.type === "pattern");
-        const patternRegex = patternRule?.regex;
+        const rules = getValidationRules(field);
+        const useNumericTextInput = field.type === "text" && isNumericTextField(field);
+        const inputType = useNumericTextInput ? "text" : field.type === "number" ? "number" : field.type;
+        const runValidation = () => {
+          if (validationMsg && (field.type === "date" || field.type === "email" || field.type === "text" || field.type === "number")) {
+            validateField(field, input.value, input, validationMsg);
+          }
+        };
         input = createElement("input", {
-          type: field.type,
+          type: inputType,
+          ...useNumericTextInput && { inputmode: "numeric" },
           className: "flex min-h-touch w-full rounded-md border border-input bg-background px-3 py-2 text-sm sm:text-base ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium 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",
-          // type: field.type === 'phone' ? 'tel' : field.type,
-          // className: 'flex min-h-touch w-full rounded-md border border-gray-300 bg-background px-3 py-2 text-sm sm:text-base ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none   disabled:cursor-not-allowed disabled:opacity-50',
           placeholder: field.placeholder,
           value: value || "",
           disabled: !isEnabled,
-          min: field.type === "date" ? fieldValidationArray.find((v) => v.type === "minDate")?.value : void 0,
-          max: field.type === "date" ? fieldValidationArray.find((v) => v.type === "maxDate")?.value : void 0,
-          pattern: patternRegex || void 0,
-          // Apply pattern for both email and text fields
+          min: field.type === "date" ? rules.minDate : field.type === "number" ? rules.min !== void 0 ? String(rules.min) : void 0 : void 0,
+          max: field.type === "date" ? rules.maxDate : field.type === "number" ? rules.max !== void 0 ? String(rules.max) : void 0 : void 0,
+          pattern: !useNumericTextInput ? rules.pattern || void 0 : void 0,
           oninput: (e) => {
-            const inputValue = e.target.value;
-            onChange?.(inputValue);
-            if (validationMsg && (field.type === "date" || field.type === "email" || field.type === "text" && hasPatternValidation)) {
-              validateField(field, inputValue, input, validationMsg);
-            }
-          },
-          onchange: (e) => {
-            if (validationMsg && (field.type === "date" || field.type === "email" || field.type === "text" && hasPatternValidation)) {
-              validateField(field, e.target.value, input, validationMsg);
+            const inputEl = e.target;
+            let inputValue = inputEl.value;
+            if (useNumericTextInput) {
+              inputValue = inputValue.replace(/[eE+-]/g, "");
+              inputEl.value = inputValue;
             }
+            onChange?.(inputValue);
+            runValidation();
           },
-          onblur: (e) => {
-            if (validationMsg && (field.type === "date" || field.type === "email" || field.type === "text" && hasPatternValidation)) {
-              validateField(field, e.target.value, input, validationMsg);
-            }
-          }
+          onchange: () => runValidation(),
+          onblur: () => runValidation()
         });
     }
     wrapper.appendChild(input);
@@ -5843,6 +6264,93 @@ var FieldRenderer = class {
     });
     return container;
   }
+  /**
+   * Render image field with upload, preview, and remove/replace
+   */
+  static renderImageField(field, imageValue, onChange, isEnabled = true) {
+    const ACCEPT = "image/jpeg,image/png,image/gif,image/webp";
+    const MAX_SIZE_MB = 5;
+    const MAX_SIZE_BYTES = MAX_SIZE_MB * 1024 * 1024;
+    const container = createElement("div", { className: "image-field-wrapper flex flex-col gap-3 w-full" });
+    const previewWrap = createElement("div", {
+      className: "relative rounded-md border border-input bg-gray-50 dark:bg-gray-800 overflow-hidden min-h-[120px] flex items-center justify-center"
+    });
+    if (imageValue) {
+      const img = createElement("img", {
+        src: imageValue,
+        alt: field.label || "Uploaded image",
+        className: "max-h-48 max-w-full object-contain"
+      });
+      img.onerror = () => {
+        previewWrap.innerHTML = "";
+        previewWrap.appendChild(createElement("p", {
+          className: "text-xs text-red-500 p-4",
+          text: "Failed to load image"
+        }));
+      };
+      previewWrap.appendChild(img);
+      if (isEnabled) {
+        const removeBtn = createElement("button", {
+          type: "button",
+          className: "absolute top-2 right-2 p-1.5 bg-red-500 text-white rounded-md hover:bg-red-600 text-xs",
+          title: "Remove image",
+          onclick: () => onChange?.(void 0)
+        });
+        removeBtn.innerHTML = "\xD7";
+        previewWrap.appendChild(removeBtn);
+      }
+    } else {
+      previewWrap.appendChild(createElement("p", {
+        className: "text-xs text-muted-foreground p-4",
+        text: "No image uploaded"
+      }));
+    }
+    container.appendChild(previewWrap);
+    if (isEnabled) {
+      const fileInput = createElement("input", {
+        type: "file",
+        accept: ACCEPT,
+        className: "hidden",
+        id: `image-upload-${field.id}`
+      });
+      const uploadBtn = createElement("button", {
+        type: "button",
+        className: "px-3 py-2 text-sm border border-gray-300 dark:border-gray-700 rounded-md hover:bg-gray-50 dark:hover:bg-gray-800 transition-colors disabled:opacity-50 disabled:cursor-not-allowed",
+        text: imageValue ? "Replace" : "Upload Image",
+        onclick: () => fileInput.click()
+      });
+      fileInput.onchange = (e) => {
+        const target = e.target;
+        const file = target.files?.[0];
+        if (!file)
+          return;
+        if (!file.type.match(/^image\/(jpeg|png|gif|webp)$/)) {
+          alert(`Please select a valid image (JPG, PNG, GIF, WebP)`);
+          target.value = "";
+          return;
+        }
+        if (file.size > MAX_SIZE_BYTES) {
+          alert(`Image must be under ${MAX_SIZE_MB}MB`);
+          target.value = "";
+          return;
+        }
+        const reader = new FileReader();
+        reader.onload = () => {
+          const result = reader.result;
+          if (result)
+            onChange?.(result);
+        };
+        reader.onerror = () => {
+          alert("Failed to read image");
+        };
+        reader.readAsDataURL(file);
+        target.value = "";
+      };
+      container.appendChild(fileInput);
+      container.appendChild(uploadBtn);
+    }
+    return container;
+  }
 };
 
 // src/renderer/FormRenderer.ts
@@ -5861,6 +6369,10 @@ function convertValidationToArray(validation) {
     rules.push({ type: "minLength", value: obj.minLength });
   if (obj.maxLength !== void 0)
     rules.push({ type: "maxLength", value: obj.maxLength });
+  if (obj.min !== void 0)
+    rules.push({ type: "min", value: obj.min });
+  if (obj.max !== void 0)
+    rules.push({ type: "max", value: obj.max });
   if (obj.minSelected !== void 0)
     rules.push({ type: "minSelected", value: obj.minSelected });
   if (obj.maxSelected !== void 0)
@@ -5871,9 +6383,146 @@ function convertValidationToArray(validation) {
     rules.push({ type: "maxDate", value: obj.maxDate });
   return rules;
 }
+function getValidationRulesForField(field) {
+  const v = field.validations;
+  if (v) {
+    const obj = {};
+    if (v.required)
+      obj.required = true;
+    if (v.pattern)
+      obj.regex = v.pattern;
+    if (v.customErrorMessages?.pattern)
+      obj.regexMessage = v.customErrorMessages.pattern;
+    if (v.minLength !== void 0)
+      obj.minLength = v.minLength;
+    if (v.maxLength !== void 0)
+      obj.maxLength = v.maxLength;
+    if (v.min !== void 0)
+      obj.min = v.min;
+    if (v.max !== void 0)
+      obj.max = v.max;
+    if (v.minSelected !== void 0)
+      obj.minSelected = v.minSelected;
+    if (v.maxSelected !== void 0)
+      obj.maxSelected = v.maxSelected;
+    if (v.minDate)
+      obj.minDate = v.minDate;
+    if (v.maxDate)
+      obj.maxDate = v.maxDate;
+    return convertValidationToArray(obj);
+  }
+  return convertValidationToArray(field.validation);
+}
+function getFieldValidationError(field, fieldValue) {
+  const isRequired = field.validations?.required ?? field.required;
+  if (isRequired && (!fieldValue || fieldValue === "" || Array.isArray(fieldValue) && fieldValue.length === 0)) {
+    return field.validations?.customErrorMessages?.required || "This field is required";
+  }
+  if ((field.type === "text" || field.type === "email" || field.type === "phone") && fieldValue) {
+    const validationArray = getValidationRulesForField(field);
+    const patternRule = validationArray.find((v) => v.type === "pattern");
+    if (patternRule?.regex) {
+      try {
+        if (!new RegExp(patternRule.regex).test(String(fieldValue))) {
+          return field.validations?.customErrorMessages?.pattern || patternRule.message || "Invalid format";
+        }
+      } catch (_e) {
+      }
+    }
+    const minLenRule = validationArray.find((v) => v.type === "minLength");
+    const maxLenRule = validationArray.find((v) => v.type === "maxLength");
+    const len = String(fieldValue).length;
+    if (minLenRule && typeof minLenRule.value === "number" && len < minLenRule.value) {
+      return field.validations?.customErrorMessages?.minLength || `Minimum length is ${minLenRule.value}`;
+    }
+    if (maxLenRule && typeof maxLenRule.value === "number" && len > maxLenRule.value) {
+      return field.validations?.customErrorMessages?.maxLength || `Maximum length is ${maxLenRule.value}`;
+    }
+  }
+  if (field.type === "number" && fieldValue !== "" && fieldValue !== void 0) {
+    const v = field.validations;
+    const num = parseFloat(String(fieldValue));
+    if (!isNaN(num)) {
+      if (v?.min !== void 0 && num < v.min) {
+        return v.customErrorMessages?.min || `Value must be at least ${v.min}`;
+      }
+      if (v?.max !== void 0 && num > v.max) {
+        return v.customErrorMessages?.max || `Value must be at most ${v.max}`;
+      }
+      if (v?.allowNegative === false && num < 0) {
+        return v.customErrorMessages?.min || "Negative values are not allowed";
+      }
+    }
+  }
+  if (field.type === "checkbox" && Array.isArray(fieldValue)) {
+    const validationArray = getValidationRulesForField(field);
+    const minSelectedRule = validationArray.find((v) => v.type === "minSelected");
+    const maxSelectedRule = validationArray.find((v) => v.type === "maxSelected");
+    const selectedCount = fieldValue.length;
+    const minSelected = typeof minSelectedRule?.value === "number" ? minSelectedRule.value : void 0;
+    const maxSelected = typeof maxSelectedRule?.value === "number" ? maxSelectedRule.value : void 0;
+    if (minSelected !== void 0 && selectedCount < minSelected) {
+      return `Please select at least ${minSelected} option(s)`;
+    }
+    if (maxSelected !== void 0 && selectedCount > maxSelected) {
+      return `Please select at most ${maxSelected} option(s)`;
+    }
+  }
+  return "";
+}
 function getModelKey(field) {
   return field.fieldName ?? field.id;
 }
+function buildFormulaValuesMap(schema, data) {
+  const values = {};
+  const allFields = schema.sections.flatMap((s) => s.fields);
+  for (const field of allFields) {
+    const modelKey = getModelKey(field);
+    const val = data[modelKey];
+    values[modelKey] = val;
+    values[field.id] = val;
+    if (field.fieldName)
+      values[field.fieldName] = val;
+  }
+  const formulaFields = allFields.filter((f) => f.type === "number" && f.valueSource === "formula" && f.formula);
+  for (let pass = 0; pass < Math.max(1, formulaFields.length); pass++) {
+    for (const field of formulaFields) {
+      const modelKey = getModelKey(field);
+      const result = evaluateFormula(field.formula, values);
+      const newVal = isNaN(result) ? void 0 : result;
+      values[modelKey] = newVal;
+      values[field.id] = newVal;
+      if (field.fieldName)
+        values[field.fieldName] = newVal;
+    }
+  }
+  return values;
+}
+function computeFormulaValue(field, schema, data) {
+  if (field.type !== "number" || field.valueSource !== "formula" || !field.formula)
+    return void 0;
+  const values = buildFormulaValuesMap(schema, data);
+  const modelKey = getModelKey(field);
+  const result = values[modelKey];
+  if (typeof result !== "number")
+    return void 0;
+  const decimalPlaces = field.validations?.decimalPlaces ?? (field.validations?.allowDecimal ? 2 : 0);
+  const rounded = decimalPlaces > 0 ? Math.round(result * Math.pow(10, decimalPlaces)) / Math.pow(10, decimalPlaces) : Math.round(result);
+  return rounded;
+}
+function isFormulaDependency(schema, modelKey, fieldId) {
+  for (const section of schema.sections) {
+    for (const field of section.fields) {
+      if (field.type === "number" && field.valueSource === "formula" && field.dependencies) {
+        if (field.dependencies.includes(modelKey))
+          return true;
+        if (fieldId && field.dependencies.includes(fieldId))
+          return true;
+      }
+    }
+  }
+  return false;
+}
 var FormRenderer = class {
   constructor(container, schema, onSubmit, onDropdownValueChange, initialData) {
     __publicField(this, "container");
@@ -5918,15 +6567,35 @@ var FormRenderer = class {
         }
         fieldWrapper.className = spanClass;
         const modelKey = getModelKey(field);
-        const fieldEl = FieldRenderer.render(field, this.data[modelKey], (val) => {
-          this.data[modelKey] = val;
-          if (field.type === "select" && this.onDropdownValueChange) {
-            this.onDropdownValueChange({
-              fieldId: field.id,
-              value: val || ""
-            });
-          }
-        });
+        let fieldValue;
+        if (field.type === "number" && field.valueSource === "formula" && field.formula) {
+          const computed = computeFormulaValue(field, this.schema, this.data);
+          fieldValue = computed;
+          this.data[modelKey] = computed;
+        } else if (field.type === "image") {
+          fieldValue = this.data[modelKey] ?? field.imageUrl ?? field.defaultValue;
+        } else {
+          fieldValue = this.data[modelKey];
+        }
+        const isFormulaField = field.type === "number" && field.valueSource === "formula";
+        const fieldEl = FieldRenderer.render(
+          field,
+          fieldValue,
+          (val) => {
+            this.data[modelKey] = val;
+            if (field.type === "select" && this.onDropdownValueChange) {
+              this.onDropdownValueChange({
+                fieldId: field.id,
+                value: val || ""
+              });
+            }
+            if (isFormulaDependency(this.schema, modelKey, field.id)) {
+              this.render();
+            }
+          },
+          isFormulaField
+          // Formula fields are read-only
+        );
         fieldWrapper.appendChild(fieldEl);
         grid.appendChild(fieldWrapper);
       });
@@ -5949,107 +6618,19 @@ var FormRenderer = class {
           const modelKey = getModelKey(field);
           const fieldValue = this.data[modelKey];
           const fieldElement = form.querySelector(`input[id*="${field.id}"], textarea[id*="${field.id}"], select[id*="${field.id}"]`);
-          if (!fieldElement) {
-            const altElement = Array.from(form.querySelectorAll("input, textarea, select")).find((el) => {
-              const wrapper = el.closest("div");
-              return wrapper && wrapper.textContent?.includes(field.label);
-            });
-            if (altElement) {
-              if (field.required && (!fieldValue || fieldValue === "" || Array.isArray(fieldValue) && fieldValue.length === 0)) {
-                isValid2 = false;
-                altElement.setCustomValidity("This field is required");
-                altElement.reportValidity();
-                invalidFields.push(altElement);
-              } else {
-                altElement.setCustomValidity("");
-              }
-              if ((field.type === "text" || field.type === "email") && fieldValue) {
-                const validationArray = convertValidationToArray(field.validation);
-                const patternRule = validationArray.find((v) => v.type === "pattern");
-                if (patternRule?.regex) {
-                  try {
-                    const regex = new RegExp(patternRule.regex);
-                    if (!regex.test(String(fieldValue))) {
-                      isValid2 = false;
-                      altElement.setCustomValidity(patternRule.message || "Invalid format");
-                      altElement.reportValidity();
-                      invalidFields.push(altElement);
-                    } else {
-                      altElement.setCustomValidity("");
-                    }
-                  } catch (e2) {
-                  }
-                }
-              }
-              if (field.type === "checkbox" && Array.isArray(fieldValue)) {
-                const validationArray = convertValidationToArray(field.validation);
-                const minSelectedRule = validationArray.find((v) => v.type === "minSelected");
-                const maxSelectedRule = validationArray.find((v) => v.type === "maxSelected");
-                const selectedCount = fieldValue.length;
-                const minSelected = typeof minSelectedRule?.value === "number" ? minSelectedRule.value : void 0;
-                const maxSelected = typeof maxSelectedRule?.value === "number" ? maxSelectedRule.value : void 0;
-                if (minSelected !== void 0 && selectedCount < minSelected) {
-                  isValid2 = false;
-                  altElement.setCustomValidity(`Please select at least ${minSelected} option(s)`);
-                  altElement.reportValidity();
-                  invalidFields.push(altElement);
-                } else if (maxSelected !== void 0 && selectedCount > maxSelected) {
-                  isValid2 = false;
-                  altElement.setCustomValidity(`Please select at most ${maxSelected} option(s)`);
-                  altElement.reportValidity();
-                  invalidFields.push(altElement);
-                } else {
-                  altElement.setCustomValidity("");
-                }
-              }
-            }
-            return;
-          }
-          if (field.required && (!fieldValue || fieldValue === "" || Array.isArray(fieldValue) && fieldValue.length === 0)) {
-            isValid2 = false;
-            fieldElement.setCustomValidity("This field is required");
-            fieldElement.reportValidity();
-            invalidFields.push(fieldElement);
-          } else {
-            fieldElement.setCustomValidity("");
-          }
-          if ((field.type === "text" || field.type === "email") && fieldValue) {
-            const validationArray = convertValidationToArray(field.validation);
-            const patternRule = validationArray.find((v) => v.type === "pattern");
-            if (patternRule?.regex) {
-              try {
-                const regex = new RegExp(patternRule.regex);
-                if (!regex.test(String(fieldValue))) {
-                  isValid2 = false;
-                  fieldElement.setCustomValidity(patternRule.message || "Invalid format");
-                  fieldElement.reportValidity();
-                  invalidFields.push(fieldElement);
-                } else {
-                  fieldElement.setCustomValidity("");
-                }
-              } catch (e2) {
-              }
-            }
-          }
-          if (field.type === "checkbox" && Array.isArray(fieldValue)) {
-            const validationArray = convertValidationToArray(field.validation);
-            const minSelectedRule = validationArray.find((v) => v.type === "minSelected");
-            const maxSelectedRule = validationArray.find((v) => v.type === "maxSelected");
-            const selectedCount = fieldValue.length;
-            const minSelected = typeof minSelectedRule?.value === "number" ? minSelectedRule.value : void 0;
-            const maxSelected = typeof maxSelectedRule?.value === "number" ? maxSelectedRule.value : void 0;
-            if (minSelected !== void 0 && selectedCount < minSelected) {
-              isValid2 = false;
-              fieldElement.setCustomValidity(`Please select at least ${minSelected} option(s)`);
-              fieldElement.reportValidity();
-              invalidFields.push(fieldElement);
-            } else if (maxSelected !== void 0 && selectedCount > maxSelected) {
+          const fieldError = getFieldValidationError(field, fieldValue);
+          const element = fieldElement ?? Array.from(form.querySelectorAll("input, textarea, select")).find((el) => {
+            const wrapper = el.closest("div");
+            return wrapper && wrapper.textContent?.includes(field.label);
+          });
+          if (element) {
+            if (fieldError) {
               isValid2 = false;
-              fieldElement.setCustomValidity(`Please select at most ${maxSelected} option(s)`);
-              fieldElement.reportValidity();
-              invalidFields.push(fieldElement);
+              element.setCustomValidity(fieldError);
+              element.reportValidity();
+              invalidFields.push(element);
             } else {
-              fieldElement.setCustomValidity("");
+              element.setCustomValidity("");
             }
           }
         });
@@ -9069,6 +9650,36 @@ var FormBuilder = class {
       className: "flex items-center px-3 py-2 text-sm font-medium text-[#635bff] bg-[#e7e7ff]  rounded-md shadow-sm transition-colors",
       onclick: () => {
         const schema = formStore.getState().schema;
+        const numericFields = schema.sections.flatMap((s) => s.fields).filter((f) => f.type === "number");
+        const allIds = numericFields.map((f) => f.id);
+        const allNames = numericFields.map((f) => f.fieldName ?? f.id);
+        for (const field of schema.sections.flatMap((s) => s.fields)) {
+          if (field.type === "number" && field.valueSource === "formula" && field.formula) {
+            const validation = validateFormula(field.formula, allIds, allNames, field.id);
+            if (!validation.valid) {
+              alert(`Formula error in "${field.label}": ${validation.error}`);
+              return;
+            }
+            const deps = field.dependencies ?? parseFormulaDependencies(field.formula);
+            if (detectCircularDependency(schema, field.id, field.formula, deps)) {
+              alert(`Circular dependency in formula for "${field.label}"`);
+              return;
+            }
+          }
+        }
+        schema.sections.forEach((section) => {
+          section.fields?.forEach((field) => {
+            if (field.type === "number" && field.validations) {
+              console.log("[Form Builder] Number field validations before save:", {
+                fieldId: field.id,
+                label: field.label,
+                validations: field.validations,
+                hasMin: "min" in field.validations,
+                hasMax: "max" in field.validations
+              });
+            }
+          });
+        });
         console.log("[Form Builder] Schema being sent to app:", JSON.stringify(schema, null, 2));
         if (this.options.onSave) {
           this.options.onSave(schema);
@@ -9275,17 +9886,178 @@ var FormBuilder = class {
       }
     }));
     body.appendChild(labelGroup);
-    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", {
-      className: "w-full px-3 py-2 border border-gray-200 dark:border-gray-700 rounded-md bg-transparent",
-      value: selectedField.placeholder || "",
-      "data-focus-id": `field-placeholder-${selectedField.id}`,
-      oninput: (e) => {
-        formStore.getState().updateField(selectedField.id, { placeholder: e.target.value });
+    if (selectedField.type === "number") {
+      const valueSourceHeader = createElement("h3", { className: "text-xs font-semibold text-gray-500 uppercase tracking-wider mb-2 mt-4", text: "Value Source" });
+      body.appendChild(valueSourceHeader);
+      const valueSourceGroup = createElement("div", { className: "mb-3" });
+      valueSourceGroup.appendChild(createElement("label", { className: "block text-sm font-normal text-gray-700 dark:text-gray-300 mb-1", text: "Source" }));
+      const valueSourceSelect = createElement("select", {
+        className: "w-full px-3 py-2 border border-gray-200 dark:border-gray-700 rounded-md bg-transparent",
+        value: selectedField.valueSource || "manual",
+        onchange: (e) => {
+          const source = e.target.value;
+          const updates = { valueSource: source };
+          if (source === "manual") {
+            updates.formula = void 0;
+            updates.dependencies = void 0;
+          } else if (source === "formula") {
+            updates.formula = selectedField.formula || "";
+            updates.dependencies = selectedField.dependencies || [];
+          }
+          formStore.getState().updateField(selectedField.id, updates);
+          this.render();
+        }
+      });
+      valueSourceSelect.appendChild(createElement("option", { value: "manual", text: "Manual", selected: (selectedField.valueSource || "manual") === "manual" }));
+      valueSourceSelect.appendChild(createElement("option", { value: "formula", text: "Formula", selected: selectedField.valueSource === "formula" }));
+      valueSourceGroup.appendChild(valueSourceSelect);
+      body.appendChild(valueSourceGroup);
+      if (selectedField.valueSource === "formula") {
+        const schema = formStore.getState().schema;
+        const numericFields = getNumericFieldsForFormula(schema, selectedField.id);
+        const availableIds = numericFields.map((f) => f.id);
+        const availableNames = numericFields.map((f) => f.fieldName);
+        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 || "",
+          placeholder: "e.g. quantity * price",
+          "data-focus-id": `field-formula-${selectedField.id}`,
+          oninput: (e) => {
+            const formula = e.target.value.trim();
+            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");
+              }
+            }
+            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" });
+        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" }));
+        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 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;
+            sel.value = "";
+            this.render();
+          }
+        });
+        insertSelect.appendChild(createElement("option", { value: "", text: "Select field to insert...", selected: true }));
+        numericFields.forEach((f) => {
+          const ref = f.fieldName !== f.id ? f.fieldName : f.id;
+          insertSelect.appendChild(createElement("option", { value: ref, text: `${f.label} (${ref})` }));
+        });
+        insertGroup.appendChild(insertSelect);
+        body.appendChild(insertGroup);
+        const hintEl = createElement("p", {
+          className: "text-xs text-gray-500 dark:text-gray-400 mb-2",
+          text: "Use +, -, *, / and parentheses. Reference fields by their name or ID."
+        });
+        body.appendChild(hintEl);
       }
-    }));
-    body.appendChild(placeholderGroup);
+    }
+    if (selectedField.type !== "image") {
+      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", {
+        className: "w-full px-3 py-2 border border-gray-200 dark:border-gray-700 rounded-md bg-transparent",
+        value: selectedField.placeholder || "",
+        "data-focus-id": `field-placeholder-${selectedField.id}`,
+        oninput: (e) => {
+          formStore.getState().updateField(selectedField.id, { placeholder: e.target.value });
+        }
+      }));
+      body.appendChild(placeholderGroup);
+    }
+    if (selectedField.type === "image") {
+      const imageUrl = selectedField.imageUrl ?? selectedField.defaultValue;
+      const imageGroup = createElement("div", { className: "mb-4" });
+      imageGroup.appendChild(createElement("label", { className: "block text-sm font-normal text-gray-700 dark:text-gray-300 mb-2", text: "Image" }));
+      const previewWrap = createElement("div", {
+        className: "rounded-md border border-gray-200 dark:border-gray-700 bg-gray-50 dark:bg-gray-800 overflow-hidden min-h-[80px] flex items-center justify-center mb-2"
+      });
+      if (imageUrl) {
+        const img = createElement("img", {
+          src: imageUrl,
+          alt: selectedField.label || "Image",
+          className: "max-h-32 max-w-full object-contain"
+        });
+        img.onerror = () => {
+          previewWrap.innerHTML = "";
+          previewWrap.appendChild(createElement("p", { className: "text-xs text-red-500 p-2", text: "Failed to load" }));
+        };
+        previewWrap.appendChild(img);
+      } else {
+        previewWrap.appendChild(createElement("p", { className: "text-xs text-muted-foreground p-2", text: "No image" }));
+      }
+      imageGroup.appendChild(previewWrap);
+      const btnRow = createElement("div", { className: "flex gap-2" });
+      const fileInput = createElement("input", {
+        type: "file",
+        accept: "image/jpeg,image/png,image/gif,image/webp",
+        className: "hidden",
+        id: `config-image-${selectedField.id}`
+      });
+      fileInput.onchange = (e) => {
+        const file = e.target.files?.[0];
+        if (!file || !file.type.match(/^image\/(jpeg|png|gif|webp)$/))
+          return;
+        if (file.size > 5 * 1024 * 1024) {
+          alert("Image must be under 5MB");
+          return;
+        }
+        const reader = new FileReader();
+        reader.onload = () => {
+          const base64 = reader.result;
+          if (base64)
+            formStore.getState().updateField(selectedField.id, { imageUrl: base64, defaultValue: base64 });
+        };
+        reader.readAsDataURL(file);
+        e.target.value = "";
+      };
+      btnRow.appendChild(fileInput);
+      btnRow.appendChild(createElement("button", {
+        type: "button",
+        className: "px-3 py-2 text-sm border border-gray-300 dark:border-gray-700 rounded-md hover:bg-gray-50 dark:hover:bg-gray-800",
+        text: imageUrl ? "Replace" : "Upload",
+        onclick: () => fileInput.click()
+      }));
+      btnRow.appendChild(createElement("button", {
+        type: "button",
+        className: "px-3 py-2 text-sm border border-red-200 text-red-600 rounded-md hover:bg-red-50 dark:hover:bg-red-900/20",
+        text: "Remove",
+        disabled: !imageUrl,
+        onclick: () => formStore.getState().updateField(selectedField.id, { imageUrl: void 0, defaultValue: void 0 })
+      }));
+      imageGroup.appendChild(btnRow);
+      body.appendChild(imageGroup);
+    }
     const layoutGroup = createElement("div", { className: "layout-span-group" });
     const layoutLabelRow = createElement("div", { className: "flex items-center justify-between mb-2" });
     layoutLabelRow.appendChild(createElement("label", { className: "text-sm font-medium text-gray-700 dark:text-gray-300", text: "Grid Span" }));
@@ -9330,8 +10102,14 @@ var FormBuilder = class {
     body.appendChild(layoutGroup);
     body.appendChild(this.createCheckboxField(
       "Required",
-      !!selectedField.required,
-      (checked) => formStore.getState().updateField(selectedField.id, { required: checked }),
+      !!selectedField.required || !!selectedField.validations?.required,
+      (checked) => {
+        const currentValidations = selectedField.validations || {};
+        formStore.getState().updateField(selectedField.id, {
+          required: checked,
+          validations: { ...currentValidations, required: checked }
+        });
+      },
       `required-${selectedField.id}`
     ));
     body.appendChild(this.createCheckboxField(
@@ -9701,7 +10479,9 @@ var FormBuilder = class {
           `custom-options-${selectedField.id}`
         ));
       }
-      const shouldShowOptions = selectedField.type === "select" ? selectedField.customOptionsEnabled && (selectedField.optionSource === "STATIC" || !selectedField.optionSource) : true;
+      const isStaticSelect = selectedField.type === "select" && (selectedField.optionSource === "STATIC" || !selectedField.optionSource);
+      const hasOptions = selectedField.options && selectedField.options.length > 0;
+      const shouldShowOptions = selectedField.type === "select" ? isStaticSelect && (!!selectedField.customOptionsEnabled || !!hasOptions) : true;
       if (shouldShowOptions) {
         const options = selectedField.options || [];
         const fieldId2 = selectedField.id;
@@ -9743,12 +10523,16 @@ var FormBuilder = class {
             }
           });
           const deleteBtn = createElement("button", {
+            type: "button",
             className: "p-1.5 text-red-600 hover:bg-red-50 rounded transition-colors",
             title: "Delete option",
-            onclick: () => {
+            onclick: (e) => {
+              e.preventDefault();
+              e.stopPropagation();
               const currentOptions = getCurrentOptions();
-              const newOptions = currentOptions.filter((_, i) => i !== index2);
+              const newOptions = currentOptions.filter((o) => o.value !== opt.value);
               formStore.getState().updateField(fieldId2, { options: newOptions });
+              this.render();
             }
           }, [getIcon("Trash2", 14)]);
           optionRow.appendChild(labelInput);
@@ -9772,40 +10556,67 @@ var FormBuilder = class {
         body.appendChild(addOptionBtn);
       }
     }
-    const validationObj = Array.isArray(selectedField.validation) ? (() => {
-      const obj = {};
-      selectedField.validation.forEach((rule) => {
-        if (rule.type === "required")
-          obj.required = true;
-        else if (rule.type === "pattern" && rule.regex) {
-          obj.regex = rule.regex;
-          obj.regexMessage = rule.message;
-        } else if (rule.type === "minLength" && typeof rule.value === "number")
-          obj.minLength = rule.value;
-        else if (rule.type === "maxLength" && typeof rule.value === "number")
-          obj.maxLength = rule.value;
-        else if (rule.type === "minSelected" && typeof rule.value === "number")
-          obj.minSelected = rule.value;
-        else if (rule.type === "maxSelected" && typeof rule.value === "number")
-          obj.maxSelected = rule.value;
-        else if (rule.type === "minDate" && typeof rule.value === "string")
-          obj.minDate = rule.value;
-        else if (rule.type === "maxDate" && typeof rule.value === "string")
-          obj.maxDate = rule.value;
-      });
-      return obj;
-    })() : selectedField.validation || {};
-    const updateValidation = (updates) => {
-      const newValidation = { ...validationObj, ...updates };
-      Object.keys(newValidation).forEach((key) => {
-        if (newValidation[key] === void 0) {
-          delete newValidation[key];
+    const validationsObj = selectedField.validations || (() => {
+      const v = selectedField.validation;
+      if (!v)
+        return {};
+      if (Array.isArray(v)) {
+        const obj = {};
+        v.forEach((rule) => {
+          if (rule.type === "required")
+            obj.required = true;
+          else if (rule.type === "pattern" && rule.regex) {
+            obj.pattern = rule.regex;
+            if (rule.message)
+              obj.customErrorMessages = { ...obj.customErrorMessages, pattern: rule.message };
+          } else if (rule.type === "minLength" && typeof rule.value === "number")
+            obj.minLength = rule.value;
+          else if (rule.type === "maxLength" && typeof rule.value === "number")
+            obj.maxLength = rule.value;
+          else if (rule.type === "min" && typeof rule.value === "number")
+            obj.min = rule.value;
+          else if (rule.type === "max" && typeof rule.value === "number")
+            obj.max = rule.value;
+          else if (rule.type === "minSelected" && typeof rule.value === "number")
+            obj.minSelected = rule.value;
+          else if (rule.type === "maxSelected" && typeof rule.value === "number")
+            obj.maxSelected = rule.value;
+          else if (rule.type === "minDate" && typeof rule.value === "string")
+            obj.minDate = rule.value;
+          else if (rule.type === "maxDate" && typeof rule.value === "string")
+            obj.maxDate = rule.value;
+        });
+        return obj;
+      }
+      const o = v;
+      return {
+        required: o.required,
+        pattern: o.regex,
+        minLength: o.minLength,
+        maxLength: o.maxLength,
+        min: o.min,
+        max: o.max,
+        minSelected: o.minSelected,
+        maxSelected: o.maxSelected,
+        minDate: o.minDate,
+        maxDate: o.maxDate,
+        customErrorMessages: o.regexMessage ? { pattern: o.regexMessage } : void 0
+      };
+    })();
+    const updateValidations = (updates) => {
+      const currentField = formStore.getState().schema.sections.flatMap((s) => s.fields).find((f) => f.id === selectedField.id);
+      const currentValidations = currentField?.validations ? { ...currentField.validations } : { ...validationsObj };
+      const newValidations = { ...currentValidations, ...updates };
+      Object.keys(newValidations).forEach((key) => {
+        const v = newValidations[key];
+        if (v === void 0 || v === null) {
+          delete newValidations[key];
         }
       });
-      formStore.getState().updateField(selectedField.id, { validation: newValidation });
+      formStore.getState().updateField(selectedField.id, { validations: newValidations });
     };
-    const getRuleValue = (key) => {
-      const value = validationObj[key];
+    const getValidationsValue = (key) => {
+      const value = validationsObj[key];
       if (value === void 0 || value === null)
         return "";
       if (typeof value === "number")
@@ -9815,17 +10626,139 @@ var FormBuilder = class {
       return String(value);
     };
     const validationElements = [];
-    if (["text", "textarea", "email", "password"].includes(selectedField.type)) {
+    if (selectedField.type === "number") {
+      const numValidationTypeGroup = createElement("div", { className: "mb-3" });
+      numValidationTypeGroup.appendChild(createElement("label", { className: "block text-sm font-normal text-gray-700 dark:text-gray-300 mb-1", text: "Validation Type" }));
+      const numValidationTypeSelect = createElement("select", {
+        className: "w-full px-3 py-2 border border-gray-200 dark:border-gray-700 rounded-md bg-transparent",
+        onchange: (e) => {
+          const presetId = e.target.value;
+          if (presetId) {
+            const preset = VALIDATION_TYPE_PRESETS[presetId];
+            if (preset && presetId === "amount") {
+              updateValidations({ ...preset, validationType: presetId });
+            }
+          } else {
+            updateValidations({ validationType: "custom" });
+          }
+        }
+      });
+      [
+        { value: "", text: "Custom" },
+        { value: "amount", text: "Amount (min 0, 2 decimals)" }
+      ].forEach((opt) => {
+        numValidationTypeSelect.appendChild(createElement("option", {
+          value: opt.value,
+          text: opt.text,
+          selected: validationsObj.validationType === opt.value || !validationsObj.validationType && opt.value === ""
+        }));
+      });
+      numValidationTypeGroup.appendChild(numValidationTypeSelect);
+      validationElements.push(numValidationTypeGroup);
+      const minValGroup = createElement("div", { className: "mb-3" });
+      minValGroup.appendChild(createElement("label", { className: "block text-sm font-normal text-gray-700 dark:text-gray-300 mb-1", text: "Min Value" }));
+      minValGroup.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: getValidationsValue("min") || "",
+        placeholder: "e.g. 0",
+        oninput: (e) => {
+          const val = e.target.value;
+          updateValidations({ min: val !== "" ? parseFloat(val) : void 0 });
+        }
+      }));
+      validationElements.push(minValGroup);
+      const maxValGroup = createElement("div", { className: "mb-3" });
+      maxValGroup.appendChild(createElement("label", { className: "block text-sm font-normal text-gray-700 dark:text-gray-300 mb-1", text: "Max Value" }));
+      maxValGroup.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: getValidationsValue("max") || "",
+        placeholder: "e.g. 100",
+        oninput: (e) => {
+          const val = e.target.value;
+          updateValidations({ max: val !== "" ? parseFloat(val) : void 0 });
+        }
+      }));
+      validationElements.push(maxValGroup);
+      validationElements.push(this.createCheckboxField(
+        "Allow Decimal",
+        validationsObj.allowDecimal === true,
+        (checked) => updateValidations({
+          allowDecimal: checked,
+          // When unchecked, remove decimalPlaces so it's not in the payload
+          decimalPlaces: checked ? validationsObj.decimalPlaces ?? 2 : void 0
+        }),
+        `allow-decimal-${selectedField.id}`
+      ));
+      const decimalPlacesGroup = createElement("div", { className: "mb-3" });
+      decimalPlacesGroup.appendChild(createElement("label", { className: "block text-sm font-normal text-gray-700 dark:text-gray-300 mb-1", text: "Decimal Places" }));
+      const decimalPlacesInput = createElement("input", {
+        type: "number",
+        className: "w-full px-3 py-2 border border-gray-200 dark:border-gray-700 rounded-md bg-transparent disabled:opacity-50 disabled:cursor-not-allowed",
+        value: validationsObj.allowDecimal === true ? String(validationsObj.decimalPlaces ?? 2) : "",
+        placeholder: "e.g. 2",
+        min: "0",
+        max: "10",
+        disabled: validationsObj.allowDecimal !== true,
+        oninput: (e) => {
+          const val = e.target.value;
+          updateValidations({ decimalPlaces: val !== "" ? parseInt(val) : void 0 });
+        }
+      });
+      decimalPlacesGroup.appendChild(decimalPlacesInput);
+      validationElements.push(decimalPlacesGroup);
+      validationElements.push(this.createCheckboxField(
+        "Allow Negative",
+        validationsObj.allowNegative === true,
+        (checked) => updateValidations({ allowNegative: checked }),
+        `allow-negative-${selectedField.id}`
+      ));
+    }
+    if (["text", "textarea", "email", "phone"].includes(selectedField.type)) {
+      if (selectedField.type === "text" || selectedField.type === "phone") {
+        const validationTypeGroup = createElement("div", { className: "mb-3" });
+        validationTypeGroup.appendChild(createElement("label", { className: "block text-sm font-normal text-gray-700 dark:text-gray-300 mb-1", text: "Validation Type" }));
+        const validationTypeSelect = createElement("select", {
+          className: "w-full px-3 py-2 border border-gray-200 dark:border-gray-700 rounded-md bg-transparent",
+          onchange: (e) => {
+            const presetId = e.target.value;
+            if (presetId) {
+              const preset = VALIDATION_TYPE_PRESETS[presetId];
+              if (preset) {
+                updateValidations({ ...preset, validationType: presetId });
+              }
+            } else {
+              updateValidations({ validationType: "custom" });
+            }
+          }
+        });
+        const options = [
+          { value: "", text: "Custom" },
+          { value: "postalCode", text: "Postal Code (6 digit)" },
+          { value: "phoneNumber", text: "Phone Number (10 digit)" },
+          { value: "otp", text: "OTP (4/6 digit)" }
+        ];
+        options.forEach((opt) => {
+          validationTypeSelect.appendChild(createElement("option", {
+            value: opt.value,
+            text: opt.text,
+            selected: validationsObj.validationType === opt.value || !validationsObj.validationType && opt.value === ""
+          }));
+        });
+        validationTypeGroup.appendChild(validationTypeSelect);
+        validationElements.push(validationTypeGroup);
+      }
       const minLenGroup = createElement("div", { className: "mb-3" });
       minLenGroup.appendChild(createElement("label", { className: "block text-sm font-normal text-gray-700 dark:text-gray-300 mb-1", text: "Min Length" }));
       minLenGroup.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: getRuleValue("minLength") || "",
+        value: getValidationsValue("minLength") || "",
         placeholder: "e.g. 3",
-        onchange: (e) => {
+        oninput: (e) => {
           const value = e.target.value;
-          updateValidation({ minLength: value ? parseInt(value) : void 0 });
+          updateValidations({ minLength: value !== "" ? parseInt(value) : void 0 });
         }
       }));
       validationElements.push(minLenGroup);
@@ -9834,11 +10767,11 @@ var FormBuilder = class {
       maxLenGroup.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: getRuleValue("maxLength") || "",
+        value: getValidationsValue("maxLength") || "",
         placeholder: "e.g. 100",
-        onchange: (e) => {
+        oninput: (e) => {
           const value = e.target.value;
-          updateValidation({ maxLength: value ? parseInt(value) : void 0 });
+          updateValidations({ maxLength: value !== "" ? parseInt(value) : void 0 });
         }
       }));
       validationElements.push(maxLenGroup);
@@ -9898,10 +10831,11 @@ var FormBuilder = class {
         examplesContainer.appendChild(examplesList);
         regexGroup.appendChild(examplesContainer);
       }
-      const currentRegex = validationObj.regex || "";
+      const currentRegex = validationsObj.pattern || selectedField.validation?.regex || "";
       const findPresetByRegex = (regex) => {
         return REGEX_PRESETS.find((preset) => preset.pattern === regex);
       };
+      const regexMessage = validationsObj.customErrorMessages?.pattern || selectedField.validation?.regexMessage || "Invalid format";
       let currentPreset = currentRegex ? findPresetByRegex(currentRegex) : void 0;
       let selectedPresetId = currentPreset?.id || "";
       let regexInput;
@@ -9916,9 +10850,9 @@ var FormBuilder = class {
             selectedPresetId = presetId;
             const preset = REGEX_PRESETS.find((p) => p.id === presetId);
             if (preset) {
-              updateValidation({
-                regex: preset.pattern,
-                regexMessage: preset.errorMessage
+              updateValidations({
+                pattern: preset.pattern,
+                customErrorMessages: { ...validationsObj.customErrorMessages, pattern: preset.errorMessage }
               });
               regexInput.value = preset.pattern;
               currentPreset = preset;
@@ -9973,9 +10907,9 @@ var FormBuilder = class {
               }
             }
           }
-          updateValidation({
-            regex: val || void 0,
-            regexMessage: currentPreset?.errorMessage || validationObj.regexMessage || "Invalid format"
+          updateValidations({
+            pattern: val || void 0,
+            customErrorMessages: { ...validationsObj.customErrorMessages, pattern: currentPreset?.errorMessage || regexMessage || "Invalid format" }
           });
           if (examplesList) {
             if (currentPreset) {
@@ -9998,6 +10932,21 @@ var FormBuilder = class {
           updateExamples(examplesList, currentRegex);
         }
       }
+      const patternMsgGroup = createElement("div", { className: "mb-3 mt-2" });
+      patternMsgGroup.appendChild(createElement("label", { className: "block text-xs font-medium text-gray-600 dark:text-gray-400 mb-1", text: "Pattern Error Message" }));
+      patternMsgGroup.appendChild(createElement("input", {
+        type: "text",
+        className: "w-full px-3 py-2 border border-gray-200 dark:border-gray-700 rounded-md bg-transparent text-sm",
+        value: validationsObj.customErrorMessages?.pattern || "",
+        placeholder: "e.g. Invalid format",
+        oninput: (e) => {
+          const val = e.target.value;
+          updateValidations({
+            customErrorMessages: { ...validationsObj.customErrorMessages, pattern: val || void 0 }
+          });
+        }
+      }));
+      regexGroup.appendChild(patternMsgGroup);
       validationElements.push(regexGroup);
     }
     if (selectedField.type === "checkbox") {
@@ -10006,12 +10955,12 @@ var FormBuilder = class {
       minSelectedGroup.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: getRuleValue("minSelected"),
+        value: getValidationsValue("minSelected"),
         placeholder: "e.g. 1",
         min: "0",
         onchange: (e) => {
           const val = e.target.value;
-          updateValidation({ minSelected: val ? parseInt(val) : void 0 });
+          updateValidations({ minSelected: val ? parseInt(val) : void 0 });
         }
       }));
       validationElements.push(minSelectedGroup);
@@ -10020,12 +10969,12 @@ var FormBuilder = class {
       maxSelectedGroup.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: getRuleValue("maxSelected"),
+        value: getValidationsValue("maxSelected"),
         placeholder: "e.g. 2",
         min: "1",
         onchange: (e) => {
           const val = e.target.value;
-          updateValidation({ maxSelected: val ? parseInt(val) : void 0 });
+          updateValidations({ maxSelected: val ? parseInt(val) : void 0 });
         }
       }));
       validationElements.push(maxSelectedGroup);
@@ -10036,10 +10985,10 @@ var FormBuilder = class {
       minDateGroup.appendChild(createElement("input", {
         type: "date",
         className: "w-full px-3 py-2 border border-gray-200 dark:border-gray-700 rounded-md bg-transparent",
-        value: validationObj.minDate || "",
+        value: validationsObj.minDate || "",
         onchange: (e) => {
           const val = e.target.value;
-          updateValidation({ minDate: val || void 0 });
+          updateValidations({ minDate: val || void 0 });
         }
       }));
       validationElements.push(minDateGroup);
@@ -10048,10 +10997,10 @@ var FormBuilder = class {
       maxDateGroup.appendChild(createElement("input", {
         type: "date",
         className: "w-full px-3 py-2 border border-gray-200 dark:border-gray-700 rounded-md bg-transparent",
-        value: validationObj.maxDate || "",
+        value: validationsObj.maxDate || "",
         onchange: (e) => {
           const val = e.target.value;
-          updateValidation({ maxDate: val || void 0 });
+          updateValidations({ maxDate: val || void 0 });
         }
       }));
       validationElements.push(maxDateGroup);
@@ -10342,6 +11291,6 @@ sortablejs/modular/sortable.esm.js:
    *)
 */
 
-export { FormBuilder, FormRenderer, FormSchemaValidation, builderToPlatform, cleanFormSchema, convertValidationObjectToArray, formStore, getColSpanFromWidth, initFormBuilder, parseWidth, platformToBuilder };
+export { FormBuilder, FormRenderer, FormSchemaValidation, builderToPlatform, cleanFormSchema, convertValidationObjectToArray, detectCircularDependency, evaluateFormula, formStore, getColSpanFromWidth, getNumericFieldsForFormula, getValidationConfigForAngular, initFormBuilder, parseFormulaDependencies, parseWidth, platformToBuilder, validateFormula };
 //# sourceMappingURL=out.js.map
 //# sourceMappingURL=index.mjs.map