@dmitryvim/form-builder 0.5.3 → 0.6.4

package/dist/cjs/index.cjs

@@ -4,15 +4,16 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 // src/utils/translation.ts
 function t(key, state, params) {
+  var _a, _b;
   const locale = state.config.locale || "en";
   const localeTranslations = state.config.translations[locale];
   const fallbackTranslations = state.config.translations.en;
-  let text = (localeTranslations == null ? void 0 : localeTranslations[key]) || (fallbackTranslations == null ? void 0 : fallbackTranslations[key]) || key;
+  let text = (_b = (_a = localeTranslations == null ? void 0 : localeTranslations[key]) != null ? _a : fallbackTranslations == null ? void 0 : fallbackTranslations[key]) != null ? _b : key;
   if (params) {
     for (const [paramKey, paramValue] of Object.entries(params)) {
       text = text.replace(
         new RegExp(`\\{${paramKey}\\}`, "g"),
-        String(paramValue)
+        () => String(paramValue)
       );
     }
   }
@@ -27,9 +28,7 @@ function isPlainObject(obj) {
   return obj && typeof obj === "object" && obj.constructor === Object;
 }
 function escapeHtml(text) {
-  const div = document.createElement("div");
-  div.textContent = text;
-  return div.innerHTML;
+  return text.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(/"/g, "&quot;").replace(/'/g, "&#39;");
 }
 function getElementLookupKey(element, state) {
   if (element.key) {
@@ -64,8 +63,8 @@ function formatFileSize(bytes) {
   return `${(bytes / (1024 * 1024)).toFixed(1)} MB`;
 }
 function serializeHiddenValue(value) {
-  if (value === null || value === void 0) return "";
-  return typeof value === "object" ? JSON.stringify(value) : String(value);
+  if (value === void 0) return "";
+  return JSON.stringify(value);
 }
 function deserializeHiddenValue(raw) {
   if (raw === "") return null;
@@ -75,6 +74,23 @@ function deserializeHiddenValue(raw) {
     return raw;
   }
 }
+function readTypedInputValue(input) {
+  if (input instanceof HTMLInputElement) {
+    if (input.type === "checkbox") return input.checked;
+    if (input.dataset.hiddenField) return deserializeHiddenValue(input.value);
+    if (input.dataset.booleanField) return input.value === "true";
+    if (input.type === "number" || input.type === "range") {
+      if (input.value === "") return null;
+      const parsed = parseFloat(input.value);
+      const decimals = input.dataset.decimals;
+      return decimals !== void 0 ? Number(parsed.toFixed(parseInt(decimals, 10))) : parsed;
+    }
+    if (input.dataset.colourField) {
+      return input.value.toUpperCase();
+    }
+  }
+  return input.value === "" ? null : input.value;
+}
 function createHiddenInput(name, value) {
   const input = document.createElement("input");
   input.type = "hidden";
@@ -316,6 +332,14 @@ function validateSchema(schema) {
     }
   }
   function validateElements(elements, path) {
+    const seenKeys = /* @__PURE__ */ new Set();
+    elements.forEach((element, index) => {
+      if (!element.key) return;
+      if (seenKeys.has(element.key)) {
+        errors.push(`${path}[${index}]: duplicate key "${element.key}"`);
+      }
+      seenKeys.add(element.key);
+    });
     elements.forEach((element, index) => {
       const elementPath = `${path}[${index}]`;
       if (!element.type) {
@@ -325,6 +349,14 @@ function validateSchema(schema) {
         errors.push(`${elementPath}: missing key`);
       }
       validateCountBounds(element, elementPath, errors);
+      if (element.type === "number" && "decimals" in element) {
+        const decimals = element.decimals;
+        if (decimals !== void 0 && (!Number.isInteger(decimals) || decimals < 0)) {
+          errors.push(
+            `${elementPath}: decimals must be a non-negative integer (got ${JSON.stringify(decimals)})`
+          );
+        }
+      }
       if (element.type === "markdown") {
         const content = element.content;
         if (typeof content !== "string") {
@@ -476,12 +508,58 @@ function deepEqual(a, b) {
 }
 
 // src/utils/styles.ts
-function clearFieldError(input) {
+function findErrorAnchor(input) {
+  var _a, _b, _c, _d;
+  return (_d = (_c = (_a = input.closest) == null ? void 0 : _a.call(input, ".fb-chip")) != null ? _c : (_b = input.closest) == null ? void 0 : _b.call(input, ".slider-container")) != null ? _d : input;
+}
+function findErrorNode(input) {
+  const anchor = findErrorAnchor(input);
   const name = input.getAttribute("name");
-  if (!name) return;
-  const doc = input.ownerDocument || document;
-  const errorNode = doc.getElementById(`error-${name}`);
-  if (errorNode) errorNode.remove();
+  const parent = anchor.parentElement;
+  if (name && parent) {
+    for (const child of Array.from(parent.children)) {
+      if (child.classList.contains("error-message") && child.getAttribute("data-error-for") === name) {
+        return child;
+      }
+    }
+  }
+  const sibling = anchor.nextElementSibling;
+  return sibling && sibling.classList.contains("error-message") ? sibling : null;
+}
+function markFieldValidity(input, errorMessage) {
+  var _a, _b, _c, _d;
+  if (!input) return;
+  if (errorMessage == null) {
+    input.classList.remove("invalid");
+    input.title = "";
+    (_a = findErrorNode(input)) == null ? void 0 : _a.remove();
+    return;
+  }
+  input.classList.add("invalid");
+  input.title = errorMessage;
+  if (errorMessage === "") {
+    (_b = findErrorNode(input)) == null ? void 0 : _b.remove();
+    return;
+  }
+  let errorElement = findErrorNode(input);
+  if (!errorElement) {
+    const anchor = findErrorAnchor(input);
+    errorElement = document.createElement("div");
+    errorElement.className = "error-message";
+    errorElement.style.cssText = `
+      color: var(--fb-error-color);
+      font-size: var(--fb-font-size-small);
+      margin-top: 0.25rem;
+    `;
+    (_c = anchor.parentNode) == null ? void 0 : _c.insertBefore(errorElement, anchor.nextSibling);
+  }
+  errorElement.setAttribute("data-error-for", (_d = input.getAttribute("name")) != null ? _d : "");
+  errorElement.textContent = errorMessage;
+  errorElement.style.display = "block";
+}
+function clearFieldError(input) {
+  var _a;
+  (_a = findErrorNode(input)) == null ? void 0 : _a.remove();
 }
 var BIN_ICON_SVG = '<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><polyline points="3 6 5 6 21 6"/><path d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6"/><path d="M10 11v6"/><path d="M14 11v6"/><path d="M8 6V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2"/></svg>';
 function ensureThemingHooks(doc) {
@@ -603,8 +681,8 @@ function ensureThemingHooks(doc) {
 `;
   doc.head.appendChild(style);
 }
-function applyAutoExpand(textarea, options = {}) {
-  var _a;
+function applyAutoExpand(textarea, options) {
+  var _a, _b;
   textarea.style.overflow = "hidden";
   textarea.style.resize = "none";
   const minRows = Math.max(1, (_a = options.minRows) != null ? _a : 1);
@@ -632,18 +710,20 @@ function applyAutoExpand(textarea, options = {}) {
   if (typeof ResizeObserver === "undefined") return;
   let lastWidth = -1;
   const ro = new ResizeObserver((entries) => {
-    var _a2, _b, _c, _d, _e;
+    var _a2, _b2, _c, _d, _e, _f;
     if (!textarea.isConnected) {
       ro.disconnect();
+      (_a2 = options.observers) == null ? void 0 : _a2.delete(ro);
       return;
     }
     const entry = entries[0];
-    const w = (_e = (_d = (_b = (_a2 = entry == null ? void 0 : entry.contentBoxSize) == null ? void 0 : _a2[0]) == null ? void 0 : _b.inlineSize) != null ? _d : (_c = entry == null ? void 0 : entry.contentRect) == null ? void 0 : _c.width) != null ? _e : 0;
+    const w = (_f = (_e = (_c = (_b2 = entry == null ? void 0 : entry.contentBoxSize) == null ? void 0 : _b2[0]) == null ? void 0 : _c.inlineSize) != null ? _e : (_d = entry == null ? void 0 : entry.contentRect) == null ? void 0 : _d.width) != null ? _f : 0;
     if (w === lastWidth) return;
     lastWidth = w;
     resize();
   });
   ro.observe(textarea);
+  (_b = options.observers) == null ? void 0 : _b.add(ro);
 }
 function applySingleLineMode(textarea) {
   textarea.addEventListener("keydown", (e) => {
@@ -931,7 +1011,7 @@ function createCharCounter(element, input) {
   return counter;
 }
 function renderTextElement(element, ctx, wrapper, pathKey) {
-  var _a;
+  var _a, _b, _c;
   const state = ctx.state;
   const readonly = isElementReadonly(element, state, ctx);
   const inputWrapper = document.createElement("div");
@@ -958,11 +1038,11 @@ function renderTextElement(element, ctx, wrapper, pathKey) {
     overflow-wrap: anywhere;
   `;
   textInput.name = pathKey;
-  textInput.placeholder = (_a = element.placeholder) != null ? _a : "\u0412\u0432\u0435\u0434\u0438\u0442\u0435 \u0442\u0435\u043A\u0441\u0442";
-  textInput.value = ctx.prefill[element.key] || element.default || "";
+  textInput.placeholder = (_a = element.placeholder) != null ? _a : t("placeholderText", state);
+  textInput.value = (_c = (_b = ctx.prefill[element.key]) != null ? _b : element.default) != null ? _c : "";
   textInput.readOnly = readonly;
   applySingleLineMode(textInput);
-  applyAutoExpand(textInput);
+  applyAutoExpand(textInput, { observers: state.autoExpandObservers });
   if (!readonly) {
     textInput.addEventListener("focus", () => {
       textInput.style.borderColor = "var(--fb-border-focus-color)";
@@ -1021,11 +1101,12 @@ function renderMultipleTextElement(element, ctx, wrapper, pathKey) {
       const chip = input.closest(".fb-chip");
       const sib = chip == null ? void 0 : chip.nextElementSibling;
       if (sib && sib.classList.contains("error-message")) {
-        sib.id = `error-${input.name}`;
+        sib.setAttribute("data-error-for", input.name);
       }
     });
   }
   function addChip(value = "") {
+    var _a2;
     const chip = document.createElement("div");
     chip.className = "fb-chip";
     const dot = document.createElement("span");
@@ -1036,7 +1117,7 @@ function renderMultipleTextElement(element, ctx, wrapper, pathKey) {
     input.rows = 1;
     input.className = "fb-chip-input";
     input.value = value;
-    input.placeholder = element.placeholder || t("placeholderText", state);
+    input.placeholder = (_a2 = element.placeholder) != null ? _a2 : t("placeholderText", state);
     input.readOnly = readonly;
     chip.appendChild(input);
     if (!readonly && ctx.instance) {
@@ -1050,7 +1131,7 @@ function renderMultipleTextElement(element, ctx, wrapper, pathKey) {
       input.addEventListener("input", handleChange);
     }
     applySingleLineMode(input);
-    applyAutoExpand(input);
+    applyAutoExpand(input, { observers: state.autoExpandObservers });
     if (!readonly) {
       const rem = document.createElement("button");
       rem.type = "button";
@@ -1058,6 +1139,7 @@ function renderMultipleTextElement(element, ctx, wrapper, pathKey) {
       rem.setAttribute("aria-label", t("removeElement", state));
       rem.innerHTML = BIN_ICON_SVG;
       rem.onclick = () => {
+        var _a3;
         const chips = list.querySelectorAll(".fb-chip");
         const idx = Array.prototype.indexOf.call(chips, chip);
         if (idx < 0) return;
@@ -1071,6 +1153,7 @@ function renderMultipleTextElement(element, ctx, wrapper, pathKey) {
         updateIndices();
         updateAddButton();
         updateRemoveButtons();
+        (_a3 = ctx.instance) == null ? void 0 : _a3.triggerOnChange(pathKey);
       };
       chip.appendChild(rem);
     }
@@ -1091,10 +1174,12 @@ function renderMultipleTextElement(element, ctx, wrapper, pathKey) {
     const handle = createAddItemRow(
       "text",
       () => {
+        var _a2;
         values.push(element.default || "");
         addChip(element.default || "");
         updateAddButton();
         updateRemoveButtons();
+        (_a2 = ctx.instance) == null ? void 0 : _a2.triggerOnChange(pathKey);
       },
       { label: element.addLabel }
     );
@@ -1113,41 +1198,6 @@ function validateTextElement(element, key, context) {
   var _a, _b, _c;
   const errors = [];
   const { scopeRoot, skipValidation } = context;
-  const markValidity = (input, errorMessage) => {
-    var _a2, _b2, _c2;
-    if (!input) return;
-    const errorId = `error-${input.getAttribute("name") || Math.random().toString(36).substring(7)}`;
-    let errorElement = document.getElementById(errorId);
-    if (errorMessage) {
-      input.classList.add("invalid");
-      input.title = errorMessage;
-      if (!errorElement) {
-        errorElement = document.createElement("div");
-        errorElement.id = errorId;
-        errorElement.className = "error-message";
-        errorElement.style.cssText = `
-          color: var(--fb-error-color);
-          font-size: var(--fb-font-size-small);
-          margin-top: 0.25rem;
-        `;
-        const chipAncestor = (_a2 = input.closest) == null ? void 0 : _a2.call(input, ".fb-chip");
-        const anchor = chipAncestor || input;
-        if (anchor.nextSibling) {
-          (_b2 = anchor.parentNode) == null ? void 0 : _b2.insertBefore(errorElement, anchor.nextSibling);
-        } else {
-          (_c2 = anchor.parentNode) == null ? void 0 : _c2.appendChild(errorElement);
-        }
-      }
-      errorElement.textContent = errorMessage;
-      errorElement.style.display = "block";
-    } else {
-      input.classList.remove("invalid");
-      input.title = "";
-      if (errorElement) {
-        errorElement.remove();
-      }
-    }
-  };
   const validateTextInput = (input, val, fieldKey) => {
     let hasError = false;
     const { state } = context;
@@ -1155,12 +1205,12 @@ function validateTextElement(element, key, context) {
       if (element.minLength !== void 0 && element.minLength !== null && val.length < element.minLength) {
         const msg = t("minLength", state, { min: element.minLength });
         errors.push(`${fieldKey}: ${msg}`);
-        markValidity(input, msg);
+        markFieldValidity(input, msg);
         hasError = true;
       } else if (element.maxLength !== void 0 && element.maxLength !== null && val.length > element.maxLength) {
         const msg = t("maxLength", state, { max: element.maxLength });
         errors.push(`${fieldKey}: ${msg}`);
-        markValidity(input, msg);
+        markFieldValidity(input, msg);
         hasError = true;
       } else if (element.pattern) {
         try {
@@ -1168,19 +1218,19 @@ function validateTextElement(element, key, context) {
           if (!re.test(val)) {
             const msg = t("patternMismatch", state);
             errors.push(`${fieldKey}: ${msg}`);
-            markValidity(input, msg);
+            markFieldValidity(input, msg);
             hasError = true;
           }
         } catch {
           const msg = t("invalidPattern", state);
           errors.push(`${fieldKey}: ${msg}`);
-          markValidity(input, msg);
+          markFieldValidity(input, msg);
           hasError = true;
         }
       }
     }
     if (!hasError) {
-      markValidity(input, null);
+      markFieldValidity(input, null);
     }
   };
   if (element.multiple) {
@@ -1211,12 +1261,12 @@ function validateTextElement(element, key, context) {
     }
     return { value: values, errors };
   } else {
-    const input = scopeRoot.querySelector(`[name$="${key}"]`);
+    const input = scopeRoot.querySelector(`[name="${key}"]`);
     const val = (_c = input == null ? void 0 : input.value) != null ? _c : "";
     if (!skipValidation && element.required && val === "") {
       const msg = t("required", context.state);
       errors.push(`${key}: ${msg}`);
-      markValidity(input, msg);
+      markFieldValidity(input, msg);
       return { value: null, errors };
     }
     if (input) {
@@ -1265,7 +1315,7 @@ function updateTextField(element, fieldPath, value, context) {
 
 // src/components/textarea.ts
 function renderTextareaElement(element, ctx, wrapper, pathKey) {
-  var _a, _b;
+  var _a, _b, _c, _d;
   const state = ctx.state;
   const readonly = isElementReadonly(element, state, ctx);
   const textareaWrapper = document.createElement("div");
@@ -1279,8 +1329,8 @@ function renderTextareaElement(element, ctx, wrapper, pathKey) {
     line-height: var(--fb-line-height, 1.5);
   `;
   textareaInput.name = pathKey;
-  textareaInput.placeholder = (_a = element.placeholder) != null ? _a : "\u0412\u0432\u0435\u0434\u0438\u0442\u0435 \u0442\u0435\u043A\u0441\u0442";
-  textareaInput.value = ctx.prefill[element.key] || element.default || "";
+  textareaInput.placeholder = (_a = element.placeholder) != null ? _a : t("placeholderText", state);
+  textareaInput.value = (_c = (_b = ctx.prefill[element.key]) != null ? _b : element.default) != null ? _c : "";
   textareaInput.readOnly = readonly;
   if (!readonly && ctx.instance) {
     const handleChange = () => {
@@ -1290,7 +1340,10 @@ function renderTextareaElement(element, ctx, wrapper, pathKey) {
     textareaInput.addEventListener("blur", handleChange);
     textareaInput.addEventListener("input", handleChange);
   }
-  applyAutoExpand(textareaInput, { minRows: (_b = element.rows) != null ? _b : 1 });
+  applyAutoExpand(textareaInput, {
+    minRows: (_d = element.rows) != null ? _d : 1,
+    observers: state.autoExpandObservers
+  });
   textareaWrapper.appendChild(textareaInput);
   if (!readonly && (element.minLength != null || element.maxLength != null)) {
     const counter = createCharCounter(element, textareaInput);
@@ -1322,7 +1375,7 @@ function renderMultipleTextareaElement(element, ctx, wrapper, pathKey) {
     });
   }
   function addTextareaItem(value = "", index = -1) {
-    var _a2;
+    var _a2, _b2;
     const itemWrapper = document.createElement("div");
     itemWrapper.className = "multiple-textarea-item";
     const textareaContainer = document.createElement("div");
@@ -1335,7 +1388,7 @@ function renderMultipleTextareaElement(element, ctx, wrapper, pathKey) {
       font-family: var(--fb-font-family);
       line-height: var(--fb-line-height, 1.5);
     `;
-    textareaInput.placeholder = element.placeholder || t("placeholderText", state);
+    textareaInput.placeholder = (_a2 = element.placeholder) != null ? _a2 : t("placeholderText", state);
     textareaInput.value = value;
     textareaInput.readOnly = readonly;
     if (!readonly && ctx.instance) {
@@ -1346,7 +1399,10 @@ function renderMultipleTextareaElement(element, ctx, wrapper, pathKey) {
       textareaInput.addEventListener("blur", handleChange);
       textareaInput.addEventListener("input", handleChange);
     }
-    applyAutoExpand(textareaInput, { minRows: (_a2 = element.rows) != null ? _a2 : 1 });
+    applyAutoExpand(textareaInput, {
+      minRows: (_b2 = element.rows) != null ? _b2 : 1,
+      observers: state.autoExpandObservers
+    });
     textareaContainer.appendChild(textareaInput);
     if (!readonly && (element.minLength != null || element.maxLength != null)) {
       const counter = createCharCounter(element, textareaInput);
@@ -1375,6 +1431,7 @@ function renderMultipleTextareaElement(element, ctx, wrapper, pathKey) {
         removeBtn.className = "remove-item-btn mt-1 px-2 py-1 text-red-600 hover:bg-red-50 rounded text-sm";
         removeBtn.innerHTML = "\u2715";
         removeBtn.onclick = () => {
+          var _a2;
           const currentIndex = Array.from(container.children).indexOf(
             item
           );
@@ -1384,6 +1441,7 @@ function renderMultipleTextareaElement(element, ctx, wrapper, pathKey) {
             updateIndices();
             updateAddButton();
             updateRemoveButtons();
+            (_a2 = ctx.instance) == null ? void 0 : _a2.triggerOnChange(pathKey);
           }
         };
         item.appendChild(removeBtn);
@@ -1399,10 +1457,12 @@ function renderMultipleTextareaElement(element, ctx, wrapper, pathKey) {
     const handle = createAddItemRow(
       "textarea",
       () => {
+        var _a2;
         values.push(element.default || "");
         addTextareaItem(element.default || "");
         updateAddButton();
         updateRemoveButtons();
+        (_a2 = ctx.instance) == null ? void 0 : _a2.triggerOnChange(pathKey);
       },
       { label: element.addLabel }
     );
@@ -1565,7 +1625,19 @@ function createNumberRangeHint(element, input) {
   updateColor();
   return hint;
 }
+function numberStepAttr(element) {
+  if (element.step !== void 0) return element.step.toString();
+  if (element.decimals !== void 0)
+    return (10 ** -element.decimals).toString();
+  return "any";
+}
+function applyDecimalsMarker(input, element) {
+  if (element.decimals !== void 0) {
+    input.setAttribute("data-decimals", String(element.decimals));
+  }
+}
 function renderNumberElement(element, ctx, wrapper, pathKey) {
+  var _a, _b, _c;
   const state = ctx.state;
   const readonly = isElementReadonly(element, state, ctx);
   const inputWrapper = document.createElement("div");
@@ -1573,11 +1645,12 @@ function renderNumberElement(element, ctx, wrapper, pathKey) {
   const numberInput = document.createElement("input");
   numberInput.type = "number";
   numberInput.name = pathKey;
-  numberInput.placeholder = element.placeholder || "0";
+  numberInput.placeholder = (_a = element.placeholder) != null ? _a : "0";
   if (element.min !== void 0) numberInput.min = element.min.toString();
   if (element.max !== void 0) numberInput.max = element.max.toString();
-  if (element.step !== void 0) numberInput.step = element.step.toString();
-  numberInput.value = ctx.prefill[element.key] || element.default || "";
+  numberInput.step = numberStepAttr(element);
+  applyDecimalsMarker(numberInput, element);
+  numberInput.value = (_c = (_b = ctx.prefill[element.key]) != null ? _b : element.default) != null ? _c : "";
   numberInput.readOnly = readonly;
   if (!element.stepper) {
     numberInput.className = "w-full border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500";
@@ -1609,7 +1682,7 @@ function renderNumberElement(element, ctx, wrapper, pathKey) {
   wrapper.appendChild(inputWrapper);
 }
 function renderMultipleNumberElement(element, ctx, wrapper, pathKey) {
-  var _a, _b;
+  var _a, _b, _c;
   const state = ctx.state;
   const readonly = isElementReadonly(element, state, ctx);
   const prefillValues = ctx.prefill[element.key] || [];
@@ -1617,7 +1690,7 @@ function renderMultipleNumberElement(element, ctx, wrapper, pathKey) {
   const minCount = (_a = element.minCount) != null ? _a : element.required ? 1 : 0;
   const maxCount = (_b = element.maxCount) != null ? _b : Infinity;
   while (values.length < minCount) {
-    values.push(element.default || "");
+    values.push((_c = element.default) != null ? _c : "");
   }
   const container = document.createElement("div");
   container.className = "fb-row";
@@ -1632,6 +1705,7 @@ function renderMultipleNumberElement(element, ctx, wrapper, pathKey) {
     });
   }
   function addNumberItem(value = "", index = -1) {
+    var _a2;
     const itemWrapper = document.createElement("div");
     itemWrapper.className = "multiple-number-item flex items-center gap-2";
     const inputContainer = document.createElement("div");
@@ -1646,10 +1720,11 @@ function renderMultipleNumberElement(element, ctx, wrapper, pathKey) {
       width: 100%;
       box-sizing: border-box;
     `;
-    numberInput.placeholder = element.placeholder || "0";
+    numberInput.placeholder = (_a2 = element.placeholder) != null ? _a2 : "0";
     if (element.min !== void 0) numberInput.min = element.min.toString();
     if (element.max !== void 0) numberInput.max = element.max.toString();
-    if (element.step !== void 0) numberInput.step = element.step.toString();
+    numberInput.step = numberStepAttr(element);
+    applyDecimalsMarker(numberInput, element);
     numberInput.value = value.toString();
     numberInput.readOnly = readonly;
     if (!readonly && ctx.instance) {
@@ -1688,6 +1763,7 @@ function renderMultipleNumberElement(element, ctx, wrapper, pathKey) {
         removeBtn.className = "remove-item-btn px-2 py-1 text-red-600 hover:bg-red-50 rounded";
         removeBtn.innerHTML = "\u2715";
         removeBtn.onclick = () => {
+          var _a2;
           const currentIndex = Array.from(container.children).indexOf(
             item
           );
@@ -1697,6 +1773,7 @@ function renderMultipleNumberElement(element, ctx, wrapper, pathKey) {
             updateIndices();
             updateAddButton();
             updateRemoveButtons();
+            (_a2 = ctx.instance) == null ? void 0 : _a2.triggerOnChange(pathKey);
           }
         };
         item.appendChild(removeBtn);
@@ -1712,10 +1789,12 @@ function renderMultipleNumberElement(element, ctx, wrapper, pathKey) {
     const handle = createAddItemRow(
       "number",
       () => {
-        values.push(element.default || "");
-        addNumberItem(element.default || "");
+        var _a2, _b2, _c2;
+        values.push((_a2 = element.default) != null ? _a2 : "");
+        addNumberItem((_b2 = element.default) != null ? _b2 : "");
         updateAddButton();
         updateRemoveButtons();
+        (_c2 = ctx.instance) == null ? void 0 : _c2.triggerOnChange(pathKey);
       },
       { label: element.addLabel }
     );
@@ -1731,58 +1810,25 @@ function renderMultipleNumberElement(element, ctx, wrapper, pathKey) {
   updateRemoveButtons();
 }
 function validateNumberElement(element, key, context) {
-  var _a, _b, _c, _d, _e;
+  var _a, _b, _c;
   const errors = [];
   const { scopeRoot, skipValidation } = context;
-  const markValidity = (input, errorMessage) => {
-    var _a2, _b2;
-    if (!input) return;
-    const errorId = `error-${input.getAttribute("name") || Math.random().toString(36).substring(7)}`;
-    let errorElement = document.getElementById(errorId);
-    if (errorMessage) {
-      input.classList.add("invalid");
-      input.title = errorMessage;
-      if (!errorElement) {
-        errorElement = document.createElement("div");
-        errorElement.id = errorId;
-        errorElement.className = "error-message";
-        errorElement.style.cssText = `
-          color: var(--fb-error-color);
-          font-size: var(--fb-font-size-small);
-          margin-top: 0.25rem;
-        `;
-        if (input.nextSibling) {
-          (_a2 = input.parentNode) == null ? void 0 : _a2.insertBefore(errorElement, input.nextSibling);
-        } else {
-          (_b2 = input.parentNode) == null ? void 0 : _b2.appendChild(errorElement);
-        }
-      }
-      errorElement.textContent = errorMessage;
-      errorElement.style.display = "block";
-    } else {
-      input.classList.remove("invalid");
-      input.title = "";
-      if (errorElement) {
-        errorElement.remove();
-      }
-    }
-  };
   const validateNumberInput = (input, v, fieldKey) => {
     let hasError = false;
     const { state } = context;
     if (!skipValidation && element.min !== void 0 && element.min !== null && v < element.min) {
       const msg = t("minValue", state, { min: element.min });
       errors.push(`${fieldKey}: ${msg}`);
-      markValidity(input, msg);
+      markFieldValidity(input, msg);
       hasError = true;
     } else if (!skipValidation && element.max !== void 0 && element.max !== null && v > element.max) {
       const msg = t("maxValue", state, { max: element.max });
       errors.push(`${fieldKey}: ${msg}`);
-      markValidity(input, msg);
+      markFieldValidity(input, msg);
       hasError = true;
     }
     if (!hasError) {
-      markValidity(input, null);
+      markFieldValidity(input, null);
     }
   };
   if (element.multiple) {
@@ -1791,24 +1837,23 @@ function validateNumberElement(element, key, context) {
     );
     const values = [];
     inputs.forEach((input, index) => {
-      var _a2, _b2, _c2;
+      var _a2;
       const raw = (_a2 = input == null ? void 0 : input.value) != null ? _a2 : "";
       if (raw === "") {
         values.push(null);
-        markValidity(input, null);
+        markFieldValidity(input, null);
         return;
       }
       const v = parseFloat(raw);
       if (!skipValidation && !Number.isFinite(v)) {
         const msg = t("notANumber", context.state);
         errors.push(`${key}[${index}]: ${msg}`);
-        markValidity(input, msg);
+        markFieldValidity(input, msg);
         values.push(null);
         return;
       }
       validateNumberInput(input, v, `${key}[${index}]`);
-      const d = Number.isInteger((_b2 = element.decimals) != null ? _b2 : 0) ? (_c2 = element.decimals) != null ? _c2 : 0 : 0;
-      values.push(Number(v.toFixed(d)));
+      values.push(applyDecimals(v, element.decimals));
     });
     if (!skipValidation) {
       const { state } = context;
@@ -1827,31 +1872,34 @@ function validateNumberElement(element, key, context) {
     }
     return { value: values, errors };
   } else {
-    const input = scopeRoot.querySelector(`[name$="${key}"]`);
+    const input = scopeRoot.querySelector(`[name="${key}"]`);
     const raw = (_c = input == null ? void 0 : input.value) != null ? _c : "";
     const { state } = context;
     if (!skipValidation && element.required && raw === "") {
       const msg = t("required", state);
       errors.push(`${key}: ${msg}`);
-      markValidity(input, msg);
+      markFieldValidity(input, msg);
       return { value: null, errors };
     }
     if (raw === "") {
-      markValidity(input, null);
+      markFieldValidity(input, null);
       return { value: null, errors };
     }
     const v = parseFloat(raw);
     if (!skipValidation && !Number.isFinite(v)) {
       const msg = t("notANumber", state);
       errors.push(`${key}: ${msg}`);
-      markValidity(input, msg);
+      markFieldValidity(input, msg);
       return { value: null, errors };
     }
     validateNumberInput(input, v, key);
-    const d = Number.isInteger((_d = element.decimals) != null ? _d : 0) ? (_e = element.decimals) != null ? _e : 0 : 0;
-    return { value: Number(v.toFixed(d)), errors };
+    return { value: applyDecimals(v, element.decimals), errors };
   }
 }
+function applyDecimals(v, decimals) {
+  if (!Number.isInteger(decimals) || decimals < 0) return v;
+  return Number(v.toFixed(decimals));
+}
 function updateNumberField(element, fieldPath, value, context) {
   const { scopeRoot } = context;
   if (element.multiple) {
@@ -1891,7 +1939,41 @@ function updateNumberField(element, fieldPath, value, context) {
 }
 
 // src/components/select.ts
+function appendSelectOptions(select, element, selectedValue, state) {
+  var _a;
+  const options = element.options || [];
+  if (!options.some((option) => option.value === "")) {
+    const emptyOption = document.createElement("option");
+    emptyOption.value = "";
+    emptyOption.textContent = (_a = element.placeholder) != null ? _a : t("selectPlaceholder", state);
+    select.appendChild(emptyOption);
+  }
+  const strSelected = selectedValue == null ? null : String(selectedValue);
+  let anySelected = false;
+  options.forEach((option) => {
+    const optionEl = document.createElement("option");
+    optionEl.value = option.value;
+    optionEl.textContent = option.label;
+    if (strSelected === option.value) {
+      optionEl.selected = true;
+      anySelected = true;
+    }
+    select.appendChild(optionEl);
+  });
+  if (!anySelected && strSelected !== null && strSelected !== "") {
+    console.warn(
+      `select "${element.key}": prefill value "${strSelected}" is not among the options; leaving the field unselected`
+    );
+  }
+  if (!anySelected) {
+    const empty = Array.from(select.options).find(
+      (option) => option.value === ""
+    );
+    if (empty) empty.selected = true;
+  }
+}
 function renderSelectElement(element, ctx, wrapper, pathKey) {
+  var _a;
   const state = ctx.state;
   const readonly = isElementReadonly(element, state, ctx);
   const selectInput = document.createElement("select");
@@ -1903,18 +1985,18 @@ function renderSelectElement(element, ctx, wrapper, pathKey) {
   `;
   selectInput.name = pathKey;
   selectInput.disabled = readonly;
-  (element.options || []).forEach((option) => {
-    const optionEl = document.createElement("option");
-    optionEl.value = option.value;
-    optionEl.textContent = option.label;
-    if ((ctx.prefill[element.key] || element.default) === option.value) {
-      optionEl.selected = true;
-    }
-    selectInput.appendChild(optionEl);
-  });
+  appendSelectOptions(
+    selectInput,
+    element,
+    (_a = ctx.prefill[element.key]) != null ? _a : element.default,
+    state
+  );
   if (!readonly && ctx.instance) {
     const handleChange = () => {
-      ctx.instance.triggerOnChange(pathKey, selectInput.value);
+      ctx.instance.triggerOnChange(
+        pathKey,
+        selectInput.value === "" ? null : selectInput.value
+      );
     };
     selectInput.addEventListener("change", handleChange);
   }
@@ -1927,7 +2009,7 @@ function renderSelectElement(element, ctx, wrapper, pathKey) {
   }
 }
 function renderMultipleSelectElement(element, ctx, wrapper, pathKey) {
-  var _a, _b, _c, _d;
+  var _a, _b, _c;
   const state = ctx.state;
   const readonly = isElementReadonly(element, state, ctx);
   const prefillValues = ctx.prefill[element.key] || [];
@@ -1935,7 +2017,7 @@ function renderMultipleSelectElement(element, ctx, wrapper, pathKey) {
   const minCount = (_a = element.minCount) != null ? _a : element.required ? 1 : 0;
   const maxCount = (_b = element.maxCount) != null ? _b : Infinity;
   while (values.length < minCount) {
-    values.push(element.default || ((_d = (_c = element.options) == null ? void 0 : _c[0]) == null ? void 0 : _d.value) || "");
+    values.push((_c = element.default) != null ? _c : "");
   }
   const container = document.createElement("div");
   container.className = "fb-row";
@@ -1960,15 +2042,7 @@ function renderMultipleSelectElement(element, ctx, wrapper, pathKey) {
       font-family: var(--fb-font-family);
     `;
     selectInput.disabled = readonly;
-    (element.options || []).forEach((option) => {
-      const optionElement = document.createElement("option");
-      optionElement.value = option.value;
-      optionElement.textContent = option.label;
-      if (value === option.value) {
-        optionElement.selected = true;
-      }
-      selectInput.appendChild(optionElement);
-    });
+    appendSelectOptions(selectInput, element, value, state);
     if (!readonly && ctx.instance) {
       const handleChange = () => {
         ctx.instance.triggerOnChange(selectInput.name, selectInput.value);
@@ -1998,6 +2072,7 @@ function renderMultipleSelectElement(element, ctx, wrapper, pathKey) {
         removeBtn.className = "remove-item-btn px-2 py-1 text-red-600 hover:bg-red-50 rounded";
         removeBtn.innerHTML = "\u2715";
         removeBtn.onclick = () => {
+          var _a2;
           const currentIndex = Array.from(container.children).indexOf(item);
           if (container.children.length > minCount) {
             values.splice(currentIndex, 1);
@@ -2005,6 +2080,7 @@ function renderMultipleSelectElement(element, ctx, wrapper, pathKey) {
             updateIndices();
             updateAddButton();
             updateRemoveButtons();
+            (_a2 = ctx.instance) == null ? void 0 : _a2.triggerOnChange(pathKey);
           }
         };
         item.appendChild(removeBtn);
@@ -2021,11 +2097,12 @@ function renderMultipleSelectElement(element, ctx, wrapper, pathKey) {
       "select",
       () => {
         var _a2, _b2;
-        const defaultValue = element.default || ((_b2 = (_a2 = element.options) == null ? void 0 : _a2[0]) == null ? void 0 : _b2.value) || "";
+        const defaultValue = (_a2 = element.default) != null ? _a2 : "";
         values.push(defaultValue);
         addSelectItem(defaultValue);
         updateAddButton();
         updateRemoveButtons();
+        (_b2 = ctx.instance) == null ? void 0 : _b2.triggerOnChange(pathKey);
       },
       { label: element.addLabel }
     );
@@ -2050,39 +2127,6 @@ function validateSelectElement(element, key, context) {
   var _a;
   const errors = [];
   const { scopeRoot, skipValidation } = context;
-  const markValidity = (input, errorMessage) => {
-    var _a2, _b;
-    if (!input) return;
-    const errorId = `error-${input.getAttribute("name") || Math.random().toString(36).substring(7)}`;
-    let errorElement = document.getElementById(errorId);
-    if (errorMessage) {
-      input.classList.add("invalid");
-      input.title = errorMessage;
-      if (!errorElement) {
-        errorElement = document.createElement("div");
-        errorElement.id = errorId;
-        errorElement.className = "error-message";
-        errorElement.style.cssText = `
-          color: var(--fb-error-color);
-          font-size: var(--fb-font-size-small);
-          margin-top: 0.25rem;
-        `;
-        if (input.nextSibling) {
-          (_a2 = input.parentNode) == null ? void 0 : _a2.insertBefore(errorElement, input.nextSibling);
-        } else {
-          (_b = input.parentNode) == null ? void 0 : _b.appendChild(errorElement);
-        }
-      }
-      errorElement.textContent = errorMessage;
-      errorElement.style.display = "block";
-    } else {
-      input.classList.remove("invalid");
-      input.title = "";
-      if (errorElement) {
-        errorElement.remove();
-      }
-    }
-  };
   const validateMultipleCount = (key2, values, element2, filterFn) => {
     var _a2, _b;
     if (skipValidation) return;
@@ -2108,27 +2152,36 @@ function validateSelectElement(element, key, context) {
     inputs.forEach((input) => {
       var _a2;
       const val = (_a2 = input == null ? void 0 : input.value) != null ? _a2 : "";
-      values.push(val);
-      markValidity(input, null);
+      values.push(val === "" ? null : val);
+      markFieldValidity(input, null);
     });
-    validateMultipleCount(key, values, element, (v) => v !== "");
+    validateMultipleCount(key, values, element, (v) => v != null);
     return { value: values, errors };
   } else {
-    const input = scopeRoot.querySelector(
-      `[name$="${key}"]`
-    );
+    const input = scopeRoot.querySelector(`[name="${key}"]`);
     const val = (_a = input == null ? void 0 : input.value) != null ? _a : "";
     if (!skipValidation && element.required && val === "") {
       const msg = t("required", context.state);
       errors.push(`${key}: ${msg}`);
-      markValidity(input, msg);
+      markFieldValidity(input, msg);
       return { value: null, errors };
     } else {
-      markValidity(input, null);
+      markFieldValidity(input, null);
     }
     return { value: val === "" ? null : val, errors };
   }
 }
+function assertValueInOptions(select, strValue, fieldPath) {
+  if (strValue === "") return;
+  const match = Array.from(select.options).some(
+    (option) => option.value === strValue
+  );
+  if (!match) {
+    throw new Error(
+      `updateSelectField: value "${strValue}" is not among the options of "${fieldPath}"`
+    );
+  }
+}
 function updateSelectField(element, fieldPath, value, context) {
   const { scopeRoot } = context;
   if ("multiple" in element && element.multiple) {
@@ -2143,10 +2196,17 @@ function updateSelectField(element, fieldPath, value, context) {
     );
     selects.forEach((select, index) => {
       if (index < value.length) {
-        select.value = value[index] != null ? String(value[index]) : "";
+        const strValue = value[index] != null ? String(value[index]) : "";
+        assertValueInOptions(select, strValue, `${fieldPath}[${index}]`);
+      }
+    });
+    selects.forEach((select, index) => {
+      if (index < value.length) {
+        const strValue = value[index] != null ? String(value[index]) : "";
+        select.value = strValue;
         const options = select.querySelectorAll("option");
         options.forEach((option) => {
-          option.selected = option.value === String(value[index]);
+          option.selected = option.value === strValue;
         });
         select.classList.remove("invalid");
         select.title = "";
@@ -2163,10 +2223,12 @@ function updateSelectField(element, fieldPath, value, context) {
       `[name="${fieldPath}"]`
     );
     if (select) {
-      select.value = value != null ? String(value) : "";
+      const strValue = value != null ? String(value) : "";
+      assertValueInOptions(select, strValue, fieldPath);
+      select.value = strValue;
       const options = select.querySelectorAll("option");
       options.forEach((option) => {
-        option.selected = option.value === String(value);
+        option.selected = option.value === strValue;
       });
       select.classList.remove("invalid");
       select.title = "";
@@ -2364,14 +2426,14 @@ function renderSwitcherElement(element, ctx, wrapper, pathKey) {
   }
 }
 function renderMultipleSwitcherElement(element, ctx, wrapper, pathKey) {
-  var _a, _b, _c, _d;
+  var _a, _b, _c;
   const state = ctx.state;
   const prefillValues = ctx.prefill[element.key] || [];
   const values = Array.isArray(prefillValues) ? [...prefillValues] : [];
   const minCount = (_a = element.minCount) != null ? _a : element.required ? 1 : 0;
   const maxCount = (_b = element.maxCount) != null ? _b : Infinity;
   while (values.length < minCount) {
-    values.push(element.default || ((_d = (_c = element.options) == null ? void 0 : _c[0]) == null ? void 0 : _d.value) || "");
+    values.push((_c = element.default) != null ? _c : "");
   }
   const readonly = isElementReadonly(element, state, ctx);
   const container = document.createElement("div");
@@ -2440,6 +2502,7 @@ function renderMultipleSwitcherElement(element, ctx, wrapper, pathKey) {
           removeBtn.style.backgroundColor = "transparent";
         });
         removeBtn.onclick = () => {
+          var _a2;
           const currentIndex = Array.from(container.children).indexOf(
             item
           );
@@ -2449,6 +2512,7 @@ function renderMultipleSwitcherElement(element, ctx, wrapper, pathKey) {
             updateIndices();
             updateAddButton();
             updateRemoveButtons();
+            (_a2 = ctx.instance) == null ? void 0 : _a2.triggerOnChange(pathKey);
           }
         };
         item.appendChild(removeBtn);
@@ -2465,11 +2529,12 @@ function renderMultipleSwitcherElement(element, ctx, wrapper, pathKey) {
       "switcher",
       () => {
         var _a2, _b2;
-        const defaultValue = element.default || ((_b2 = (_a2 = element.options) == null ? void 0 : _a2[0]) == null ? void 0 : _b2.value) || "";
+        const defaultValue = (_a2 = element.default) != null ? _a2 : "";
         values.push(defaultValue);
         addSwitcherItem(defaultValue);
         updateAddButton();
         updateRemoveButtons();
+        (_b2 = ctx.instance) == null ? void 0 : _b2.triggerOnChange(pathKey);
       },
       { label: element.addLabel }
     );
@@ -2494,39 +2559,6 @@ function validateSwitcherElement(element, key, context) {
   var _a;
   const errors = [];
   const { scopeRoot, skipValidation } = context;
-  const markValidity = (input, errorMessage) => {
-    var _a2, _b;
-    if (!input) return;
-    const errorId = `error-${input.getAttribute("name") || Math.random().toString(36).substring(7)}`;
-    let errorElement = document.getElementById(errorId);
-    if (errorMessage) {
-      input.classList.add("invalid");
-      input.title = errorMessage;
-      if (!errorElement) {
-        errorElement = document.createElement("div");
-        errorElement.id = errorId;
-        errorElement.className = "error-message";
-        errorElement.style.cssText = `
-          color: var(--fb-error-color);
-          font-size: var(--fb-font-size-small);
-          margin-top: 0.25rem;
-        `;
-        if (input.nextSibling) {
-          (_a2 = input.parentNode) == null ? void 0 : _a2.insertBefore(errorElement, input.nextSibling);
-        } else {
-          (_b = input.parentNode) == null ? void 0 : _b.appendChild(errorElement);
-        }
-      }
-      errorElement.textContent = errorMessage;
-      errorElement.style.display = "block";
-    } else {
-      input.classList.remove("invalid");
-      input.title = "";
-      if (errorElement) {
-        errorElement.remove();
-      }
-    }
-  };
   const validateMultipleCount = (fieldKey, values, el, filterFn) => {
     var _a2, _b;
     if (skipValidation) return;
@@ -2555,35 +2587,35 @@ function validateSwitcherElement(element, key, context) {
     inputs.forEach((input) => {
       var _a2;
       const val = (_a2 = input == null ? void 0 : input.value) != null ? _a2 : "";
-      values.push(val);
+      values.push(val === "" ? null : val);
       if (!skipValidation && val !== "" && !validOptionValues.has(val)) {
         const msg = t("invalidOption", context.state);
-        markValidity(input, msg);
+        markFieldValidity(input, msg);
         errors.push(`${key}: ${msg}`);
       } else {
-        markValidity(input, null);
+        markFieldValidity(input, null);
       }
     });
-    validateMultipleCount(key, values, element, (v) => v !== "");
+    validateMultipleCount(key, values, element, (v) => v != null);
     return { value: values, errors };
   } else {
     const input = scopeRoot.querySelector(
-      `input[type="hidden"][name$="${key}"]`
+      `input[type="hidden"][name="${key}"]`
     );
     const val = (_a = input == null ? void 0 : input.value) != null ? _a : "";
     if (!skipValidation && element.required && val === "") {
       const msg = t("required", context.state);
       errors.push(`${key}: ${msg}`);
-      markValidity(input, msg);
+      markFieldValidity(input, msg);
       return { value: null, errors };
     }
     if (!skipValidation && val !== "" && !validOptionValues.has(val)) {
       const msg = t("invalidOption", context.state);
       errors.push(`${key}: ${msg}`);
-      markValidity(input, msg);
+      markFieldValidity(input, msg);
       return { value: null, errors };
     }
-    markValidity(input, null);
+    markFieldValidity(input, null);
     return { value: val === "" ? null : val, errors };
   }
 }
@@ -2758,6 +2790,7 @@ function renderBooleanElement(element, ctx, wrapper, pathKey) {
   const hiddenInput = document.createElement("input");
   hiddenInput.type = "hidden";
   hiddenInput.name = pathKey;
+  hiddenInput.setAttribute("data-boolean-field", "true");
   hiddenInput.value = initial ? "true" : "false";
   const row = document.createElement("div");
   row.className = "fb-toggle-row";
@@ -5664,7 +5697,7 @@ function validateSingleFile(element, key, context) {
   const { scopeRoot, skipValidation, state } = context;
   const errors = [];
   const input = scopeRoot.querySelector(
-    `input[name$="${key}"][type="hidden"]`
+    `input[name="${key}"][type="hidden"]`
   );
   const rid = (_a = input == null ? void 0 : input.value) != null ? _a : "";
   if (!skipValidation && element.required && rid === "") {
@@ -5884,7 +5917,7 @@ function createReadonlyColourUI(value) {
   container.appendChild(hexText);
   return container;
 }
-function createEditColourUI(value, pathKey, ctx) {
+function createEditColourUI(value, pathKey, ctx, placeholder) {
   const normalizedValue = normalizeColourValue(value);
   const pickerWrapper = document.createElement("div");
   pickerWrapper.className = "colour-picker-wrapper";
@@ -5908,9 +5941,10 @@ function createEditColourUI(value, pathKey, ctx) {
   const hexInput = document.createElement("input");
   hexInput.type = "text";
   hexInput.className = "colour-hex-input";
+  hexInput.setAttribute("data-colour-field", "true");
   hexInput.name = pathKey;
   hexInput.value = normalizedValue;
-  hexInput.placeholder = "#000000";
+  hexInput.placeholder = placeholder != null ? placeholder : "#000000";
   hexInput.style.cssText = `
     width: 100px;
     padding: var(--fb-input-padding-y) var(--fb-input-padding-x);
@@ -5997,14 +6031,20 @@ function createEditColourUI(value, pathKey, ctx) {
   return pickerWrapper;
 }
 function renderColourElement(element, ctx, wrapper, pathKey) {
+  var _a, _b;
   const state = ctx.state;
   const readonly = isElementReadonly(element, state, ctx);
-  const initialValue = ctx.prefill[element.key] || element.default || "#000000";
+  const initialValue = (_b = (_a = ctx.prefill[element.key]) != null ? _a : element.default) != null ? _b : "#000000";
   if (readonly) {
     const readonlyUI = createReadonlyColourUI(initialValue);
     wrapper.appendChild(readonlyUI);
   } else {
-    const editUI = createEditColourUI(initialValue, pathKey, ctx);
+    const editUI = createEditColourUI(
+      initialValue,
+      pathKey,
+      ctx,
+      element.placeholder
+    );
     wrapper.appendChild(editUI);
   }
   if (!readonly) {
@@ -6019,7 +6059,7 @@ function renderColourElement(element, ctx, wrapper, pathKey) {
   }
 }
 function renderMultipleColourElement(element, ctx, wrapper, pathKey) {
-  var _a, _b;
+  var _a, _b, _c;
   const state = ctx.state;
   const readonly = isElementReadonly(element, state, ctx);
   const prefillValues = ctx.prefill[element.key] || [];
@@ -6027,7 +6067,7 @@ function renderMultipleColourElement(element, ctx, wrapper, pathKey) {
   const minCount = (_a = element.minCount) != null ? _a : element.required ? 1 : 0;
   const maxCount = (_b = element.maxCount) != null ? _b : Infinity;
   while (values.length < minCount) {
-    values.push(element.default || "#000000");
+    values.push((_c = element.default) != null ? _c : "#000000");
   }
   const container = document.createElement("div");
   container.className = "fb-row";
@@ -6051,7 +6091,12 @@ function renderMultipleColourElement(element, ctx, wrapper, pathKey) {
       }
     } else {
       const tempPathKey = `${pathKey}[${container.children.length}]`;
-      const editUI = createEditColourUI(value, tempPathKey, ctx);
+      const editUI = createEditColourUI(
+        value,
+        tempPathKey,
+        ctx,
+        element.placeholder
+      );
       editUI.style.flex = "1";
       itemWrapper.appendChild(editUI);
     }
@@ -6088,6 +6133,7 @@ function renderMultipleColourElement(element, ctx, wrapper, pathKey) {
           removeBtn.style.backgroundColor = "transparent";
         });
         removeBtn.onclick = () => {
+          var _a2;
           const currentIndex = Array.from(container.children).indexOf(
             item
           );
@@ -6097,6 +6143,7 @@ function renderMultipleColourElement(element, ctx, wrapper, pathKey) {
             updateIndices();
             updateAddButton();
             updateRemoveButtons();
+            (_a2 = ctx.instance) == null ? void 0 : _a2.triggerOnChange(pathKey);
           }
         };
         item.appendChild(removeBtn);
@@ -6112,11 +6159,13 @@ function renderMultipleColourElement(element, ctx, wrapper, pathKey) {
     const handle = createAddItemRow(
       "colour",
       () => {
-        const defaultColour = element.default || "#000000";
+        var _a2, _b2;
+        const defaultColour = (_a2 = element.default) != null ? _a2 : "#000000";
         values.push(defaultColour);
         addColourItem(defaultColour);
         updateAddButton();
         updateRemoveButtons();
+        (_b2 = ctx.instance) == null ? void 0 : _b2.triggerOnChange(pathKey);
       },
       { label: element.addLabel }
     );
@@ -6145,59 +6194,26 @@ function validateColourElement(element, key, context) {
   var _a, _b, _c;
   const errors = [];
   const { scopeRoot, skipValidation } = context;
-  const markValidity = (input, errorMessage) => {
-    var _a2, _b2;
-    if (!input) return;
-    const errorId = `error-${input.getAttribute("name") || Math.random().toString(36).substring(7)}`;
-    let errorElement = document.getElementById(errorId);
-    if (errorMessage) {
-      input.classList.add("invalid");
-      input.title = errorMessage;
-      if (!errorElement) {
-        errorElement = document.createElement("div");
-        errorElement.id = errorId;
-        errorElement.className = "error-message";
-        errorElement.style.cssText = `
-          color: var(--fb-error-color);
-          font-size: var(--fb-font-size-small);
-          margin-top: 0.25rem;
-        `;
-        if (input.nextSibling) {
-          (_a2 = input.parentNode) == null ? void 0 : _a2.insertBefore(errorElement, input.nextSibling);
-        } else {
-          (_b2 = input.parentNode) == null ? void 0 : _b2.appendChild(errorElement);
-        }
-      }
-      errorElement.textContent = errorMessage;
-      errorElement.style.display = "block";
-    } else {
-      input.classList.remove("invalid");
-      input.title = "";
-      if (errorElement) {
-        errorElement.remove();
-      }
-    }
-  };
   const validateColourValue = (input, val, fieldKey) => {
     const { state } = context;
     if (!val) {
       if (!skipValidation && element.required) {
         const msg = t("required", state);
         errors.push(`${fieldKey}: ${msg}`);
-        markValidity(input, msg);
+        markFieldValidity(input, msg);
         return "";
       }
-      markValidity(input, null);
+      markFieldValidity(input, null);
       return "";
     }
     const normalized = normalizeColourValue(val);
     if (!skipValidation && !isValidHexColour(normalized)) {
       const msg = t("invalidHexColour", state);
       errors.push(`${fieldKey}: ${msg}`);
-      markValidity(input, msg);
+      markFieldValidity(input, msg);
       return val;
     }
-    markValidity(input, null);
+    markFieldValidity(input, null);
     return normalized;
   };
   if (element.multiple) {
@@ -6235,7 +6251,7 @@ function validateColourElement(element, key, context) {
     if (!skipValidation && element.required && val === "") {
       const msg = t("required", context.state);
       errors.push(`${key}: ${msg}`);
-      markValidity(hexInput, msg);
+      markFieldValidity(hexInput, msg);
       return { value: "", errors };
     }
     const validated = validateColourValue(hexInput, val, key);
@@ -6550,6 +6566,7 @@ function renderMultipleSliderElement(element, ctx, wrapper, pathKey) {
           removeBtn.style.backgroundColor = "transparent";
         });
         removeBtn.onclick = () => {
+          var _a2;
           const currentIndex = Array.from(container.children).indexOf(
             item
           );
@@ -6559,6 +6576,7 @@ function renderMultipleSliderElement(element, ctx, wrapper, pathKey) {
             updateIndices();
             updateAddButton();
             updateRemoveButtons();
+            (_a2 = ctx.instance) == null ? void 0 : _a2.triggerOnChange(pathKey);
           }
         };
         item.appendChild(removeBtn);
@@ -6574,10 +6592,12 @@ function renderMultipleSliderElement(element, ctx, wrapper, pathKey) {
     const handle = createAddItemRow(
       "slider",
       () => {
+        var _a2;
         values.push(defaultValue);
         addSliderItem(defaultValue);
         updateAddButton();
         updateRemoveButtons();
+        (_a2 = ctx.instance) == null ? void 0 : _a2.triggerOnChange(pathKey);
       },
       { label: element.addLabel }
     );
@@ -6620,43 +6640,6 @@ function validateSliderElement(element, key, context) {
   const max = element.max;
   const step = (_a = element.step) != null ? _a : 1;
   const scale = element.scale || "linear";
-  const markValidity = (input, errorMessage) => {
-    var _a2, _b2;
-    if (!input) return;
-    const errorId = `error-${input.getAttribute("name") || Math.random().toString(36).substring(7)}`;
-    let errorElement = document.getElementById(errorId);
-    if (errorMessage) {
-      input.classList.add("invalid");
-      input.title = errorMessage;
-      if (!errorElement) {
-        errorElement = document.createElement("div");
-        errorElement.id = errorId;
-        errorElement.className = "error-message";
-        errorElement.style.cssText = `
-          color: var(--fb-error-color);
-          font-size: var(--fb-font-size-small);
-          margin-top: 0.25rem;
-        `;
-        const sliderContainer = input.closest(".slider-container");
-        if (sliderContainer && sliderContainer.nextSibling) {
-          (_a2 = sliderContainer.parentNode) == null ? void 0 : _a2.insertBefore(
-            errorElement,
-            sliderContainer.nextSibling
-          );
-        } else if (sliderContainer) {
-          (_b2 = sliderContainer.parentNode) == null ? void 0 : _b2.appendChild(errorElement);
-        }
-      }
-      errorElement.textContent = errorMessage;
-      errorElement.style.display = "block";
-    } else {
-      input.classList.remove("invalid");
-      input.title = "";
-      if (errorElement) {
-        errorElement.remove();
-      }
-    }
-  };
   const validateSliderValue = (slider, fieldKey) => {
     const { state } = context;
     const rawValue = slider.value;
@@ -6664,10 +6647,10 @@ function validateSliderElement(element, key, context) {
       if (!skipValidation && element.required) {
         const msg = t("required", state);
         errors.push(`${fieldKey}: ${msg}`);
-        markValidity(slider, msg);
+        markFieldValidity(slider, msg);
         return null;
       }
-      markValidity(slider, null);
+      markFieldValidity(slider, null);
       return null;
     }
     let value;
@@ -6683,17 +6666,17 @@ function validateSliderElement(element, key, context) {
       if (value < min) {
         const msg = t("minValue", state, { min });
         errors.push(`${fieldKey}: ${msg}`);
-        markValidity(slider, msg);
+        markFieldValidity(slider, msg);
         return value;
       }
       if (value > max) {
         const msg = t("maxValue", state, { max });
         errors.push(`${fieldKey}: ${msg}`);
-        markValidity(slider, msg);
+        markFieldValidity(slider, msg);
         return value;
       }
     }
-    markValidity(slider, null);
+    markFieldValidity(slider, null);
     return value;
   };
   if (element.multiple) {
@@ -6839,20 +6822,12 @@ function extractRootFormData(formRoot) {
   inputs.forEach((input) => {
     const fieldName = input.getAttribute("name");
     if (fieldName && !fieldName.includes("[") && !fieldName.includes(".")) {
-      if (input instanceof HTMLSelectElement) {
-        data[fieldName] = input.value;
-      } else if (input instanceof HTMLInputElement) {
-        if (input.type === "checkbox") {
-          data[fieldName] = input.checked;
-        } else if (input.type === "radio") {
-          if (input.checked) {
-            data[fieldName] = input.value;
-          }
-        } else {
+      if (input instanceof HTMLInputElement && input.type === "radio") {
+        if (input.checked) {
           data[fieldName] = input.value;
         }
-      } else if (input instanceof HTMLTextAreaElement) {
-        data[fieldName] = input.value;
+      } else {
+        data[fieldName] = readTypedInputValue(input);
       }
     }
   });
@@ -6921,9 +6896,9 @@ function renderSingleContainerElement(element, ctx, wrapper, pathKey) {
     inheritedReadonly: containerIsReadonly || ctx.inheritedReadonly
   };
   element.elements.forEach((child) => {
-    var _a2, _b2;
+    var _a2;
     if (child.type !== "markdown" && (child.hidden || child.type === "hidden")) {
-      const prefillVal = (_b2 = (_a2 = containerPrefill[child.key]) != null ? _a2 : "default" in child ? child.default : null) != null ? _b2 : null;
+      const prefillVal = child.key in containerPrefill ? containerPrefill[child.key] : (_a2 = "default" in child ? child.default : null) != null ? _a2 : null;
       itemsWrap.appendChild(
         createHiddenInput(pathJoin(subCtx.path, child.key), prefillVal)
       );
@@ -6968,7 +6943,7 @@ function mountRemoveButton(item, onRemove, state, containerLabel) {
   item.classList.add("fb-row-removable");
   item.insertBefore(rem, item.firstChild);
 }
-function renderMultipleContainerElement(element, ctx, wrapper, _pathKey) {
+function renderMultipleContainerElement(element, ctx, wrapper, pathKey) {
   var _a, _b, _c, _d;
   const state = ctx.state;
   const containerIsReadonly = isElementReadonly(element, state, ctx);
@@ -6999,9 +6974,11 @@ function renderMultipleContainerElement(element, ctx, wrapper, _pathKey) {
   );
   const countItems = () => directRows().length;
   const handleRemoveItem = (item) => {
+    var _a2;
     if (countItems() <= min) return;
     item.remove();
     updateAddButton();
+    (_a2 = ctx.instance) == null ? void 0 : _a2.triggerOnChange(pathKey);
   };
   const createContainerItem = (idx, rowPrefill, formData) => {
     const subCtx = {
@@ -7023,9 +7000,9 @@ function renderMultipleContainerElement(element, ctx, wrapper, _pathKey) {
       isSlides ? void 0 : element.columns
     );
     element.elements.forEach((child) => {
-      var _a2, _b2;
+      var _a2;
       if (child.type !== "markdown" && (child.hidden || child.type === "hidden")) {
-        const hiddenValue = (_b2 = (_a2 = rowPrefill == null ? void 0 : rowPrefill[child.key]) != null ? _a2 : "default" in child ? child.default : null) != null ? _b2 : null;
+        const hiddenValue = rowPrefill && child.key in rowPrefill ? rowPrefill[child.key] : (_a2 = "default" in child ? child.default : null) != null ? _a2 : null;
         childWrapper.appendChild(
           createHiddenInput(pathJoin(subCtx.path, child.key), hiddenValue)
         );
@@ -7045,6 +7022,7 @@ function renderMultipleContainerElement(element, ctx, wrapper, _pathKey) {
     return item;
   };
   const handleAddItem = () => {
+    var _a2;
     if (countItems() >= max) return;
     const item = createContainerItem(
       takeRowIndex(),
@@ -7059,6 +7037,7 @@ function renderMultipleContainerElement(element, ctx, wrapper, _pathKey) {
       itemsWrap.appendChild(item);
     }
     updateAddButton();
+    (_a2 = ctx.instance) == null ? void 0 : _a2.triggerOnChange(pathKey);
   };
   let slideAddTile = null;
   let slideAddUpdate = null;
@@ -7134,19 +7113,16 @@ function renderMultipleContainerElement(element, ctx, wrapper, _pathKey) {
     }
   }
 }
-var validateElementFunc = null;
-function setValidateElement(fn) {
-  validateElementFunc = fn;
-}
-function validateElement(element, ctx, customScopeRoot) {
-  if (!validateElementFunc) {
+function requireValidateElement(context) {
+  if (!context.validateElement) {
     throw new Error(
-      "validateElement not initialized. Should be set from FormBuilderInstance"
+      "validateContainerElement: context.validateElement missing \u2014 container validation requires the instance validator"
     );
   }
-  return validateElementFunc(element, ctx, customScopeRoot);
+  return context.validateElement;
 }
 function validateContainerElement(element, key, context) {
+  const validateChild = requireValidateElement(context);
   const errors = [];
   const { scopeRoot, skipValidation, path } = context;
   if (!("elements" in element)) {
@@ -7199,7 +7175,7 @@ function validateContainerElement(element, key, context) {
           }
         }
         const childKey = `${key}[${domIndex}].${child.key}`;
-        const childResult = validateElement(
+        const childResult = validateChild(
           { ...child, key: childKey },
           { path },
           itemContainer
@@ -7241,7 +7217,7 @@ function validateContainerElement(element, key, context) {
       }
       {
         const childKey = `${key}.${child.key}`;
-        const childResult = validateElement(
+        const childResult = validateChild(
           { ...child, key: childKey },
           { path },
           containerContainer
@@ -7360,7 +7336,7 @@ function renderGroupElement(element, ctx, wrapper, pathKey) {
     maxCount: (_b = element.repeat) == null ? void 0 : _b.max
   };
   if (containerElement.multiple) {
-    renderMultipleContainerElement(containerElement, ctx, wrapper);
+    renderMultipleContainerElement(containerElement, ctx, wrapper, pathKey);
   } else {
     renderSingleContainerElement(containerElement, ctx, wrapper, pathKey);
   }
@@ -7744,7 +7720,7 @@ function renderEditTable(element, initialData, pathKey, ctx, wrapper) {
       rebuild();
     } catch (e) {
       const errMsg = e instanceof Error ? e.message : String(e);
-      console.error(t("tableImportError", state).replace("{error}", errMsg));
+      console.error(t("tableImportError", state, { error: errMsg }));
     } finally {
       overlay.remove();
     }
@@ -8704,7 +8680,7 @@ function updateTableField(element, fieldPath, value, context) {
 }
 
 // src/components/richinput.ts
-function applyAutoExpand2(textarea, backdrop) {
+function applyAutoExpand2(textarea, backdrop, observers) {
   textarea.style.overflow = "hidden";
   textarea.style.resize = "none";
   const lineCount = (textarea.value.match(/\n/g) || []).length + 1;
@@ -8727,6 +8703,7 @@ function applyAutoExpand2(textarea, backdrop) {
     var _a, _b, _c, _d, _e;
     if (!textarea.isConnected) {
       ro.disconnect();
+      observers.delete(ro);
       return;
     }
     const entry = entries[0];
@@ -8736,6 +8713,7 @@ function applyAutoExpand2(textarea, backdrop) {
     resize();
   });
   ro.observe(textarea);
+  observers.add(ro);
 }
 function buildFileLabels(files, state) {
   var _a, _b, _c, _d;
@@ -9164,7 +9142,7 @@ function filterFilesForDropdown(query, files, labels) {
 var TEXTAREA_FONT = "font-size: var(--fb-font-size, 14px); font-family: var(--fb-font-family, inherit); line-height: 1.6;";
 var TEXTAREA_PADDING = "padding: 8px 40px 8px 10px;";
 function renderEditMode(element, ctx, wrapper, pathKey, initialValue) {
-  var _a;
+  var _a, _b;
   const state = ctx.state;
   const files = [...initialValue.files];
   const dropdownState = {
@@ -9178,12 +9156,12 @@ function renderEditMode(element, ctx, wrapper, pathKey, initialValue) {
   hiddenInput.type = "hidden";
   hiddenInput.name = pathKey;
   function getCurrentValue() {
-    var _a2, _b;
+    var _a2, _b2;
     const rawText = textarea.value;
     const nameToRid = buildNameToRid(files, state);
     const submissionText = rawText ? replaceFilenamesWithRids(rawText, nameToRid) : null;
     const textKey = (_a2 = element.textKey) != null ? _a2 : "text";
-    const filesKey = (_b = element.filesKey) != null ? _b : "files";
+    const filesKey = (_b2 = element.filesKey) != null ? _b2 : "files";
     return {
       [textKey]: rawText === "" ? null : submissionText,
       [filesKey]: [...files]
@@ -9265,14 +9243,14 @@ function renderEditMode(element, ctx, wrapper, pathKey, initialValue) {
     }
   });
   outerDiv.addEventListener("drop", (e) => {
-    var _a2, _b;
+    var _a2, _b2;
     e.preventDefault();
     dragCounter = 0;
     outerDiv.style.borderColor = "var(--fb-border-color, #d1d5db)";
     outerDiv.style.boxShadow = "none";
     const droppedFiles = (_a2 = e.dataTransfer) == null ? void 0 : _a2.files;
     if (!droppedFiles || !state.config.uploadFile) return;
-    const maxFiles = (_b = element.maxFiles) != null ? _b : Infinity;
+    const maxFiles = (_b2 = element.maxFiles) != null ? _b2 : Infinity;
     for (let i = 0; i < droppedFiles.length; i++) {
       if (files.length >= maxFiles) {
         showUploadError(
@@ -9321,8 +9299,8 @@ function renderEditMode(element, ctx, wrapper, pathKey, initialValue) {
   `;
   const textarea = document.createElement("textarea");
   textarea.name = `${pathKey}__text`;
-  textarea.placeholder = element.placeholder || t("richinputPlaceholder", state);
-  const rawInitialText = (_a = initialValue.text) != null ? _a : "";
+  textarea.placeholder = (_a = element.placeholder) != null ? _a : t("richinputPlaceholder", state);
+  const rawInitialText = (_b = initialValue.text) != null ? _b : "";
   textarea.value = rawInitialText ? replaceRidsWithFilenames(rawInitialText, files, state) : "";
   textarea.style.cssText = `
     width: 100%;
@@ -9338,14 +9316,14 @@ function renderEditMode(element, ctx, wrapper, pathKey, initialValue) {
     z-index: 1;
     caret-color: var(--fb-text-color, #111827);
   `;
-  applyAutoExpand2(textarea, backdrop);
+  applyAutoExpand2(textarea, backdrop, ctx.state.autoExpandObservers);
   textarea.addEventListener("scroll", () => {
     backdrop.scrollTop = textarea.scrollTop;
   });
   let mentionTooltip = null;
   backdrop.addEventListener("mouseover", (e) => {
-    var _a2, _b;
-    const mark = (_b = (_a2 = e.target).closest) == null ? void 0 : _b.call(
+    var _a2, _b2;
+    const mark = (_b2 = (_a2 = e.target).closest) == null ? void 0 : _b2.call(
       _a2,
       "mark"
     );
@@ -9354,8 +9332,8 @@ function renderEditMode(element, ctx, wrapper, pathKey, initialValue) {
     mentionTooltip = showMentionTooltip(mark, mark.dataset.rid, state);
   });
   backdrop.addEventListener("mouseout", (e) => {
-    var _a2, _b, _c;
-    const mark = (_b = (_a2 = e.target).closest) == null ? void 0 : _b.call(
+    var _a2, _b2, _c;
+    const mark = (_b2 = (_a2 = e.target).closest) == null ? void 0 : _b2.call(
       _a2,
       "mark"
     );
@@ -9365,8 +9343,8 @@ function renderEditMode(element, ctx, wrapper, pathKey, initialValue) {
     mentionTooltip = removePortalTooltip(mentionTooltip);
   });
   backdrop.addEventListener("mousedown", (e) => {
-    var _a2, _b;
-    const mark = (_b = (_a2 = e.target).closest) == null ? void 0 : _b.call(
+    var _a2, _b2;
+    const mark = (_b2 = (_a2 = e.target).closest) == null ? void 0 : _b2.call(
       _a2,
       "mark"
     );
@@ -9539,8 +9517,8 @@ function renderEditMode(element, ctx, wrapper, pathKey, initialValue) {
       dropdown.appendChild(item);
     });
     dropdown.onmousemove = (e) => {
-      var _a2, _b, _c;
-      const target = (_b = (_a2 = e.target).closest) == null ? void 0 : _b.call(
+      var _a2, _b2, _c;
+      const target = (_b2 = (_a2 = e.target).closest) == null ? void 0 : _b2.call(
         _a2,
         ".fb-richinput-dropdown-item"
       );
@@ -9556,10 +9534,10 @@ function renderEditMode(element, ctx, wrapper, pathKey, initialValue) {
       dropdownState.selectedIndex = newIdx;
     };
     dropdown.onmousedown = (e) => {
-      var _a2, _b;
+      var _a2, _b2;
       e.preventDefault();
       e.stopPropagation();
-      const target = (_b = (_a2 = e.target).closest) == null ? void 0 : _b.call(
+      const target = (_b2 = (_a2 = e.target).closest) == null ? void 0 : _b2.call(
         _a2,
         ".fb-richinput-dropdown-item"
       );
@@ -9587,9 +9565,9 @@ function renderEditMode(element, ctx, wrapper, pathKey, initialValue) {
     dropdownState.open = false;
   }
   function insertMention(rid) {
-    var _a2, _b, _c, _d;
+    var _a2, _b2, _c, _d;
     const labels = buildFileLabelsFromClosure();
-    const label = (_c = (_b = labels.get(rid)) != null ? _b : (_a2 = state.resourceIndex.get(rid)) == null ? void 0 : _a2.name) != null ? _c : rid;
+    const label = (_c = (_b2 = labels.get(rid)) != null ? _b2 : (_a2 = state.resourceIndex.get(rid)) == null ? void 0 : _a2.name) != null ? _c : rid;
     const cursorPos = (_d = textarea.selectionStart) != null ? _d : 0;
     const before = textarea.value.slice(0, dropdownState.triggerPos);
     const after = textarea.value.slice(cursorPos);
@@ -9681,10 +9659,10 @@ function renderEditMode(element, ctx, wrapper, pathKey, initialValue) {
       thumbWrapper.appendChild(thumbInner);
       const tooltipHandle = createTooltipHandle();
       const doMention = () => {
-        var _a2, _b, _c;
+        var _a2, _b2, _c;
         const cursorPos = (_a2 = textarea.selectionStart) != null ? _a2 : textarea.value.length;
         const labels = buildFileLabelsFromClosure();
-        const label = (_c = (_b = labels.get(rid)) != null ? _b : meta == null ? void 0 : meta.name) != null ? _c : rid;
+        const label = (_c = (_b2 = labels.get(rid)) != null ? _b2 : meta == null ? void 0 : meta.name) != null ? _c : rid;
         const before = textarea.value.slice(0, cursorPos);
         const after = textarea.value.slice(cursorPos);
         const prefix = before.length > 0 && !/[\s\n]$/.test(before) ? "\n" : "";
@@ -9762,12 +9740,12 @@ function renderEditMode(element, ctx, wrapper, pathKey, initialValue) {
       writeHidden();
       (_a2 = ctx.instance) == null ? void 0 : _a2.triggerOnChange(pathKey, getCurrentValue());
     }).catch((err) => {
-      var _a2, _b;
+      var _a2, _b2;
       const idx = files.indexOf(tempId);
       if (idx !== -1) files.splice(idx, 1);
       state.resourceIndex.delete(tempId);
       renderFilesRow();
-      (_b = (_a2 = state.config).onUploadError) == null ? void 0 : _b.call(_a2, err, file);
+      (_b2 = (_a2 = state.config).onUploadError) == null ? void 0 : _b2.call(_a2, err, file);
     });
   }
   fileInput.addEventListener("change", () => {
@@ -10339,12 +10317,7 @@ function validateHiddenElement(element, key, context) {
   const input = scopeRoot.querySelector(
     `input[type="hidden"][data-hidden-field="true"][name="${key}"]`
   );
-  const raw = (_a = input == null ? void 0 : input.value) != null ? _a : "";
-  if (raw === "") {
-    const defaultVal = "default" in element ? element.default : null;
-    return { value: defaultVal !== void 0 ? defaultVal : null, errors: [] };
-  }
-  return { value: deserializeHiddenValue(raw), errors: [] };
+  return { value: deserializeHiddenValue((_a = input == null ? void 0 : input.value) != null ? _a : ""), errors: [] };
 }
 function updateHiddenField(_element, fieldPath, value, context) {
   const { scopeRoot } = context;
@@ -10428,15 +10401,19 @@ var componentRegistry = {
 function getComponentOperations(elementType) {
   return componentRegistry[elementType] || null;
 }
+function resolveOperations(element) {
+  const isHiddenField = element.type !== "markdown" && (element.type === "hidden" || Boolean(element.hidden));
+  return isHiddenField ? componentRegistry.hidden : getComponentOperations(element.type);
+}
 function validateElementWithComponent(element, key, context) {
-  const ops = getComponentOperations(element.type);
+  const ops = resolveOperations(element);
   if (ops && ops.validate) {
     return ops.validate(element, key, context);
   }
   return null;
 }
 function updateElementWithComponent(element, fieldPath, value, context) {
-  const ops = getComponentOperations(element.type);
+  const ops = resolveOperations(element);
   if (ops && ops.update) {
     ops.update(element, fieldPath, value, context);
     return true;
@@ -10448,6 +10425,10 @@ function updateElementWithComponent(element, fieldPath, value, context) {
 function showTooltip(tooltipId, button) {
   const tooltip = document.getElementById(tooltipId);
   if (!tooltip) return;
+  if (!button.isConnected) {
+    tooltip.remove();
+    return;
+  }
   const isCurrentlyVisible = !tooltip.classList.contains("hidden");
   document.querySelectorAll('[id^="tooltip-"]').forEach((t2) => {
     t2.classList.add("hidden");
@@ -10528,23 +10509,13 @@ function extractDOMValue(fieldPath, formRoot) {
   if (!input) {
     return void 0;
   }
-  if (input instanceof HTMLSelectElement) {
-    return input.value;
-  } else if (input instanceof HTMLInputElement) {
-    if (input.type === "checkbox") {
-      return input.checked;
-    } else if (input.type === "radio") {
-      const checked = formRoot.querySelector(
-        `[name="${fieldPath}"]:checked`
-      );
-      return checked ? checked.value : void 0;
-    } else {
-      return input.value;
-    }
-  } else if (input instanceof HTMLTextAreaElement) {
-    return input.value;
+  if (input instanceof HTMLInputElement && input.type === "radio") {
+    const checked = formRoot.querySelector(
+      `[name="${fieldPath}"]:checked`
+    );
+    return checked ? checked.value : void 0;
   }
-  return void 0;
+  return readTypedInputValue(input);
 }
 function buildScopedDataAtPath(path, value) {
   const segments = path.match(/[^.[\]]+|\[\d+\]/g);
@@ -10676,11 +10647,19 @@ function createFieldLabel(element) {
   }
   return title;
 }
-function createInfoButton(element) {
+function ensureTooltipStyles(doc) {
+  if (doc.head.querySelector("[data-fb-tooltip-styles]")) return;
+  const style = doc.createElement("style");
+  style.setAttribute("data-fb-tooltip-styles", "");
+  style.textContent = `[id^="tooltip-"].hidden { display: none; }`;
+  doc.head.appendChild(style);
+}
+function createInfoButton(element, state) {
   const infoBtn = document.createElement("button");
   infoBtn.type = "button";
   infoBtn.className = "ml-2 text-gray-400 hover:text-gray-600";
   infoBtn.innerHTML = '<svg class="w-4 h-4" fill="currentColor" viewBox="0 0 24 24"><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h-2v-6h2v6zm0-8h-2V7h2v2z"/></svg>';
+  ensureTooltipStyles(document);
   const tooltipId = `tooltip-${element.key}-${Math.random().toString(36).substr(2, 9)}`;
   const tooltip = document.createElement("div");
   tooltip.id = tooltipId;
@@ -10688,6 +10667,7 @@ function createInfoButton(element) {
   tooltip.style.position = "fixed";
   tooltip.textContent = element.description || element.hint || "Field information";
   document.body.appendChild(tooltip);
+  state.tooltipElements.add(tooltip);
   infoBtn.onclick = (e) => {
     e.preventDefault();
     e.stopPropagation();
@@ -10695,7 +10675,7 @@ function createInfoButton(element) {
   };
   return infoBtn;
 }
-function createLabelContainer(element) {
+function createLabelContainer(element, state) {
   const label = document.createElement("div");
   label.className = "flex items-center";
   label.style.marginBottom = "var(--fb-label-margin-bottom, 2px)";
@@ -10703,7 +10683,7 @@ function createLabelContainer(element) {
   const title = createFieldLabel(element);
   label.appendChild(title);
   if (element.description || element.hint) {
-    const infoBtn = createInfoButton(element);
+    const infoBtn = createInfoButton(element, state);
     label.appendChild(infoBtn);
   }
   return label;
@@ -10778,7 +10758,7 @@ function dispatchToRenderer(element, ctx, wrapper, pathKey) {
       break;
     case "container":
       if (isMultiple) {
-        renderMultipleContainerElement(element, ctx, wrapper);
+        renderMultipleContainerElement(element, ctx, wrapper, pathKey);
       } else {
         renderSingleContainerElement(element, ctx, wrapper, pathKey);
       }
@@ -10831,7 +10811,7 @@ function renderElement2(element, ctx) {
   wrapper.setAttribute("data-fb-width", element.width || "full");
   const ops = getComponentOperations(element.type);
   if (!(ops == null ? void 0 : ops.ownsLabel)) {
-    const label = createLabelContainer(element);
+    const label = createLabelContainer(element, ctx.state);
     wrapper.appendChild(label);
   }
   const pathKey = pathJoin(ctx.path, element.key);
@@ -10860,6 +10840,7 @@ var defaultConfig = {
   onDownloadError: null,
   debounceMs: 300,
   verboseErrors: false,
+  postMessageTarget: null,
   enableFilePreview: true,
   maxPreviewSize: "200px",
   readonly: false,
@@ -10881,6 +10862,7 @@ var defaultConfig = {
       openInNewTab: "Open in new tab",
       changeButton: "Change",
       placeholderText: "Enter text",
+      selectPlaceholder: "Select\u2026",
       previewAlt: "Preview",
       previewUnavailable: "Preview unavailable",
       previewError: "Preview error",
@@ -10956,6 +10938,7 @@ var defaultConfig = {
       openInNewTab: "\u041E\u0442\u043A\u0440\u044B\u0442\u044C \u0432 \u043D\u043E\u0432\u043E\u0439 \u0432\u043A\u043B\u0430\u0434\u043A\u0435",
       changeButton: "\u0418\u0437\u043C\u0435\u043D\u0438\u0442\u044C",
       placeholderText: "\u0412\u0432\u0435\u0434\u0438\u0442\u0435 \u0442\u0435\u043A\u0441\u0442",
+      selectPlaceholder: "\u0412\u044B\u0431\u0435\u0440\u0438\u0442\u0435\u2026",
       previewAlt: "\u041F\u0440\u0435\u0434\u043F\u0440\u043E\u0441\u043C\u043E\u0442\u0440",
       previewUnavailable: "\u041F\u0440\u0435\u0434\u043F\u0440\u043E\u0441\u043C\u043E\u0442\u0440 \u043D\u0435\u0434\u043E\u0441\u0442\u0443\u043F\u0435\u043D",
       previewError: "\u041E\u0448\u0438\u0431\u043A\u0430 \u043F\u0440\u0435\u0434\u043F\u0440\u043E\u0441\u043C\u043E\u0442\u0440\u0430",
@@ -11020,20 +11003,23 @@ var defaultConfig = {
   },
   theme: {}
 };
-function createInstanceState(config) {
-  const mergedTranslations = {
-    ...defaultConfig.translations
-  };
-  if (config == null ? void 0 : config.translations) {
-    for (const [locale, userTranslations] of Object.entries(
-      config.translations
-    )) {
-      mergedTranslations[locale] = {
-        ...defaultConfig.translations[locale] || {},
+function mergeTranslations(base, overrides) {
+  const merged = { ...base };
+  if (overrides) {
+    for (const [locale, userTranslations] of Object.entries(overrides)) {
+      merged[locale] = {
+        ...base[locale] || {},
         ...userTranslations
       };
     }
   }
+  return merged;
+}
+function createInstanceState(config) {
+  const mergedTranslations = mergeTranslations(
+    defaultConfig.translations,
+    config == null ? void 0 : config.translations
+  );
   return {
     schema: null,
     formRoot: null,
@@ -11049,7 +11035,9 @@ function createInstanceState(config) {
     prefill: {},
     syntheticElementIds: /* @__PURE__ */ new WeakMap(),
     syntheticElementIdCounter: 0,
-    enableIfObservers: /* @__PURE__ */ new Set()
+    enableIfObservers: /* @__PURE__ */ new Set(),
+    autoExpandObservers: /* @__PURE__ */ new Set(),
+    tooltipElements: /* @__PURE__ */ new Set()
   };
 }
 function generateInstanceId() {
@@ -11350,6 +11338,11 @@ function findOwnField(scope, lookupKey, ownBoundary) {
 }
 var FormBuilderInstance = class {
   constructor(config) {
+    // The bound prefill-hint click handler currently attached to the form root.
+    // Kept so renderForm()/destroy() can remove it — re-binding on every render
+    // stacked listeners (hint clicks applied values N times) and destroy()
+    // left the last one on the host-owned root, retaining the instance.
+    this.prefillHintHandler = null;
     this.instanceId = generateInstanceId();
     this.state = createInstanceState(config);
     if (this.state.config.verboseErrors) {
@@ -11383,10 +11376,21 @@ var FormBuilderInstance = class {
     this.state.formRoot = element;
   }
   /**
-   * Configure the form builder
+   * Configure the form builder. Translations deep-merge per locale (same as
+   * the constructor); a locale without translations — configured or default —
+   * is rejected, matching setLocale.
    */
   configure(config) {
-    Object.assign(this.state.config, config);
+    const translations = mergeTranslations(
+      this.state.config.translations,
+      config.translations
+    );
+    if (config.locale !== void 0 && !translations[config.locale]) {
+      throw new Error(
+        `configure: no translations configured for locale "${config.locale}"`
+      );
+    }
+    Object.assign(this.state.config, config, { translations });
   }
   /**
    * Set file upload handler
@@ -11419,17 +11423,25 @@ var FormBuilderInstance = class {
     this.state.config.readonly = mode === "readonly";
   }
   /**
-   * Set locale
+   * Set locale. Custom locales are allowed — their translations must have
+   * been provided via the constructor or configure() first.
    */
   setLocale(locale) {
-    if (this.state.config.translations[locale]) {
-      this.state.config.locale = locale;
+    if (!this.state.config.translations[locale]) {
+      throw new Error(
+        `setLocale: no translations configured for locale "${locale}"`
+      );
     }
+    this.state.config.locale = locale;
   }
   /**
    * Trigger onChange callbacks with debouncing
    * @param fieldPath - Optional field path for field-specific change events
-   * @param fieldValue - Optional field value for field-specific change events
+   * @param fieldValue - Optional field value for field-specific change events.
+   *   When omitted while fieldPath is given, the value is read from the
+   *   freshly extracted form data at debounce time — used by structural
+   *   changes (multi-item add/remove), where the handler has no cheap
+   *   current value but the array is trivially derivable after the fact.
    */
   triggerOnChange(fieldPath, fieldValue) {
     if (this.state.config.readonly) return;
@@ -11442,12 +11454,49 @@ var FormBuilderInstance = class {
       if (this.state.config.onChange) {
         this.state.config.onChange(formData);
       }
-      if (this.state.config.onFieldChange && fieldPath !== void 0 && fieldValue !== void 0) {
-        this.state.config.onFieldChange(fieldPath, fieldValue, formData);
+      if (this.state.config.onFieldChange && fieldPath !== void 0) {
+        const resolvedValue = fieldValue !== void 0 ? fieldValue : this.resolveDomPathValue(formData.data, fieldPath);
+        this.state.config.onFieldChange(fieldPath, resolvedValue, formData);
       }
       this.state.debounceTimer = null;
     }, this.state.config.debounceMs);
   }
+  /**
+   * Resolve a DOM field path against the extracted form data.
+   *
+   * A plain getValueByPath is wrong for paths inside a multiple container:
+   * row markers keep gaps after a deletion (`s[2]` may be the first surviving
+   * row) while the extracted array is re-packed contiguously — the naive
+   * lookup would read a different row, or nothing. Each `[N]` segment is
+   * mapped from its marker to the row's position among the container's
+   * rendered rows, the same DOM order extraction used to build the array.
+   * A bracketed segment that is not a container marker (a multi-value leaf
+   * like `tags[1]`, whose indices are contiguous) falls back to the index.
+   */
+  resolveDomPathValue(data, domPath) {
+    let cur = data;
+    let domPrefix = "";
+    for (const seg of domPath.split(".")) {
+      if (cur === null || cur === void 0) return void 0;
+      const marker = seg.match(/^(.+)\[(\d+)\]$/);
+      if (!marker) {
+        domPrefix = domPrefix ? `${domPrefix}.${seg}` : seg;
+        cur = cur[seg];
+        continue;
+      }
+      const key = marker[1];
+      domPrefix = domPrefix ? `${domPrefix}.${key}` : key;
+      const arr = cur[key];
+      if (!Array.isArray(arr)) return void 0;
+      const rows = this.state.formRoot ? findDirectContainerRows(this.state.formRoot, domPrefix) : [];
+      domPrefix = `${domPrefix}[${marker[2]}]`;
+      const pos = rows.findIndex(
+        (row) => row.getAttribute("data-container-item") === domPrefix
+      );
+      cur = pos >= 0 ? arr[pos] : arr[parseInt(marker[2], 10)];
+    }
+    return cur;
+  }
   /**
    * Register an external action that will be displayed as a button
    * External actions can be form-level (no related_field) or field-level (with related_field)
@@ -11487,21 +11536,10 @@ var FormBuilderInstance = class {
    */
   findFormElementByFieldPath(fieldPath) {
     if (!this.state.formRoot) return null;
-    let element = this.state.formRoot.querySelector(
+    const element = this.state.formRoot.querySelector(
       `[name="${fieldPath}"]`
     );
     if (element) return element;
-    const variations = [
-      fieldPath,
-      fieldPath.replace(/\[(\d+)\]/g, "[$1]"),
-      fieldPath.replace(/\./g, "[") + "]".repeat((fieldPath.match(/\./g) || []).length)
-    ];
-    for (const variation of variations) {
-      element = this.state.formRoot.querySelector(
-        `[name="${variation}"]`
-      );
-      if (element) return element;
-    }
     const schemaElement = this.findSchemaElement(fieldPath);
     if (!schemaElement) return null;
     const fieldWrappers = this.state.formRoot.querySelectorAll(".fb-field-wrapper");
@@ -11747,10 +11785,13 @@ var FormBuilderInstance = class {
   renderForm(root, schema, prefill, actions) {
     const errors = validateSchema(schema);
     if (errors.length > 0) {
-      console.error("Schema validation errors:", errors);
-      return;
+      throw new Error(`renderForm: invalid schema:
+- ${errors.join("\n- ")}`);
     }
     this.disconnectEnableIfObservers();
+    this.disconnectAutoExpandObservers();
+    this.removeTooltipElements();
+    this.removePrefillHintListener();
     this.state.formRoot = root;
     this.state.schema = schema;
     this.state.externalActions = actions || null;
@@ -11772,9 +11813,9 @@ var FormBuilderInstance = class {
       fieldsWrapper.className = `grid grid-cols-${columns} gap-2`;
     }
     schema.elements.forEach((element) => {
-      var _a, _b;
+      var _a;
       if (element.type !== "markdown" && (element.hidden || element.type === "hidden")) {
-        const val = (_b = (_a = prefill == null ? void 0 : prefill[element.key]) != null ? _a : element.default) != null ? _b : null;
+        const val = prefill && element.key in prefill ? prefill[element.key] : (_a = element.default) != null ? _a : null;
         fieldsWrapper.appendChild(createHiddenInput(element.key, val));
         return;
       }
@@ -11791,7 +11832,10 @@ var FormBuilderInstance = class {
     rootContainer.appendChild(fieldsWrapper);
     root.appendChild(rootContainer);
     if (!this.state.config.readonly) {
-      root.addEventListener("click", this.handlePrefillHintClick.bind(this));
+      this.prefillHintHandler = this.handlePrefillHintClick.bind(
+        this
+      );
+      root.addEventListener("click", this.prefillHintHandler);
     }
     if (this.state.config.readonly && this.state.externalActions && Array.isArray(this.state.externalActions)) {
       this.renderExternalActions();
@@ -11807,7 +11851,7 @@ var FormBuilderInstance = class {
       return { valid: true, errors: [], data: {} };
     const errors = [];
     const data = {};
-    const validateElement2 = (element, ctx, customScopeRoot = null) => {
+    const validateElement = (element, ctx, customScopeRoot = null) => {
       var _a;
       const key = (_a = element.key) != null ? _a : "";
       const scopeRoot = customScopeRoot || this.state.formRoot;
@@ -11816,7 +11860,10 @@ var FormBuilderInstance = class {
         state: this.state,
         instance: this,
         path: ctx.path,
-        skipValidation
+        skipValidation,
+        // Containers recurse into their children through this — threaded per
+        // pass, never module state (see ComponentContext.validateElement).
+        validateElement
       };
       const componentResult = validateElementWithComponent(
         element,
@@ -11834,9 +11881,7 @@ var FormBuilderInstance = class {
       console.warn(`Unknown field type "${element.type}" for key "${key}"`);
       return { value: null, spread: false };
     };
-    setValidateElement(validateElement2);
     this.state.schema.elements.forEach((element) => {
-      var _a;
       if (element.enableIf) {
         try {
           const shouldEnable = evaluateEnableCondition(element.enableIf, data);
@@ -11853,24 +11898,12 @@ var FormBuilderInstance = class {
       if (element.type === "markdown") {
         return;
       }
-      if (element.hidden || element.type === "hidden") {
-        const hiddenInput = this.state.formRoot.querySelector(
-          `input[type="hidden"][data-hidden-field="true"][name="${element.key}"]`
-        );
-        const raw = (_a = hiddenInput == null ? void 0 : hiddenInput.value) != null ? _a : "";
-        if (raw !== "") {
-          data[element.key] = deserializeHiddenValue(raw);
-        } else {
-          data[element.key] = element.default !== void 0 ? element.default : null;
-        }
-      } else {
-        const result = validateElement2(element, { path: "" });
-        if (result.skip) return;
-        if (result.spread && result.value !== null && typeof result.value === "object") {
-          Object.assign(data, result.value);
-        } else if (element.key) {
-          data[element.key] = result.value;
-        }
+      const result = validateElement(element, { path: "" });
+      if (result.skip) return;
+      if (result.spread && result.value !== null && typeof result.value === "object") {
+        Object.assign(data, result.value);
+      } else if (element.key) {
+        data[element.key] = result.value;
       }
     });
     return {
@@ -11891,16 +11924,7 @@ var FormBuilderInstance = class {
   submitForm() {
     const result = this.validateForm(false);
     if (result.valid) {
-      if (typeof window !== "undefined" && window.parent) {
-        window.parent.postMessage(
-          {
-            type: "formSubmit",
-            data: result.data,
-            schema: this.state.schema
-          },
-          "*"
-        );
-      }
+      this.postToParent("formSubmit", result.data);
     }
     return result;
   }
@@ -11909,17 +11933,27 @@ var FormBuilderInstance = class {
    */
   saveDraft() {
     const result = this.validateForm(true);
-    if (typeof window !== "undefined" && window.parent) {
-      window.parent.postMessage(
-        {
-          type: "formDraft",
-          data: result.data,
-          schema: this.state.schema
-        },
-        "*"
+    this.postToParent("formDraft", result.data);
+    return result;
+  }
+  /**
+   * Post form data to the parent frame — only when the host opted in via
+   * `postMessageTarget`. Outside an iframe `window.parent === window`, so an
+   * unconditional post broadcast form data and the full schema to any
+   * embedding page (targetOrigin "*") on every submit. See CHANGELOG 0.6.0.
+   */
+  postToParent(type, data) {
+    const target = this.state.config.postMessageTarget;
+    if (target === "") {
+      throw new Error(
+        'postMessageTarget: "" is not a valid target origin \u2014 use null to disable posting or "*" to knowingly broadcast'
       );
     }
-    return result;
+    if (!target || typeof window === "undefined" || !window.parent) return;
+    window.parent.postMessage(
+      { type, data, schema: this.state.schema },
+      target
+    );
   }
   /**
    * Clear the form - reset all field values to empty while preserving form structure
@@ -12193,6 +12227,9 @@ var FormBuilderInstance = class {
       this.state.debounceTimer = null;
     }
     this.disconnectEnableIfObservers();
+    this.disconnectAutoExpandObservers();
+    this.removeTooltipElements();
+    this.removePrefillHintListener();
     this.state.resourceIndex.clear();
     if (this.state.formRoot) {
       clear(this.state.formRoot);
@@ -12210,6 +12247,24 @@ var FormBuilderInstance = class {
     }
     this.state.enableIfObservers.clear();
   }
+  disconnectAutoExpandObservers() {
+    for (const observer of this.state.autoExpandObservers) {
+      observer.disconnect();
+    }
+    this.state.autoExpandObservers.clear();
+  }
+  removePrefillHintListener() {
+    if (this.prefillHintHandler && this.state.formRoot) {
+      this.state.formRoot.removeEventListener("click", this.prefillHintHandler);
+    }
+    this.prefillHintHandler = null;
+  }
+  removeTooltipElements() {
+    for (const tooltip of this.state.tooltipElements) {
+      tooltip.remove();
+    }
+    this.state.tooltipElements.clear();
+  }
 };
 
 // src/index.ts