@dmitryvim/form-builder 0.5.3 → 0.6.4

package/dist/esm/index.js

@@ -3,12 +3,12 @@ function t(key, state, params) {
   const locale = state.config.locale || "en";
   const localeTranslations = state.config.translations[locale];
   const fallbackTranslations = state.config.translations.en;
-  let text = localeTranslations?.[key] || fallbackTranslations?.[key] || key;
+  let text = localeTranslations?.[key] ?? fallbackTranslations?.[key] ?? key;
   if (params) {
     for (const [paramKey, paramValue] of Object.entries(params)) {
       text = text.replace(
         new RegExp(`\\{${paramKey}\\}`, "g"),
-        String(paramValue)
+        () => String(paramValue)
       );
     }
   }
@@ -23,9 +23,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) {
@@ -60,8 +58,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;
@@ -71,6 +69,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";
@@ -308,6 +323,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) {
@@ -317,6 +340,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") {
@@ -467,12 +498,55 @@ function deepEqual(a, b) {
 }
 
 // src/utils/styles.ts
-function clearFieldError(input) {
+function findErrorAnchor(input) {
+  return input.closest?.(".fb-chip") ?? input.closest?.(".slider-container") ?? 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) {
+  if (!input) return;
+  if (errorMessage == null) {
+    input.classList.remove("invalid");
+    input.title = "";
+    findErrorNode(input)?.remove();
+    return;
+  }
+  input.classList.add("invalid");
+  input.title = errorMessage;
+  if (errorMessage === "") {
+    findErrorNode(input)?.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;
+    `;
+    anchor.parentNode?.insertBefore(errorElement, anchor.nextSibling);
+  }
+  errorElement.setAttribute("data-error-for", input.getAttribute("name") ?? "");
+  errorElement.textContent = errorMessage;
+  errorElement.style.display = "block";
+}
+function clearFieldError(input) {
+  findErrorNode(input)?.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) {
@@ -594,7 +668,7 @@ function ensureThemingHooks(doc) {
 `;
   doc.head.appendChild(style);
 }
-function applyAutoExpand(textarea, options = {}) {
+function applyAutoExpand(textarea, options) {
   textarea.style.overflow = "hidden";
   textarea.style.resize = "none";
   const minRows = Math.max(1, options.minRows ?? 1);
@@ -624,6 +698,7 @@ function applyAutoExpand(textarea, options = {}) {
   const ro = new ResizeObserver((entries) => {
     if (!textarea.isConnected) {
       ro.disconnect();
+      options.observers?.delete(ro);
       return;
     }
     const entry = entries[0];
@@ -633,6 +708,7 @@ function applyAutoExpand(textarea, options = {}) {
     resize();
   });
   ro.observe(textarea);
+  options.observers?.add(ro);
 }
 function applySingleLineMode(textarea) {
   textarea.addEventListener("keydown", (e) => {
@@ -943,11 +1019,11 @@ function renderTextElement(element, ctx, wrapper, pathKey) {
     overflow-wrap: anywhere;
   `;
   textInput.name = pathKey;
-  textInput.placeholder = element.placeholder ?? "\u0412\u0432\u0435\u0434\u0438\u0442\u0435 \u0442\u0435\u043A\u0441\u0442";
-  textInput.value = ctx.prefill[element.key] || element.default || "";
+  textInput.placeholder = element.placeholder ?? t("placeholderText", state);
+  textInput.value = ctx.prefill[element.key] ?? element.default ?? "";
   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)";
@@ -1005,7 +1081,7 @@ function renderMultipleTextElement(element, ctx, wrapper, pathKey) {
       const chip = input.closest(".fb-chip");
       const sib = chip?.nextElementSibling;
       if (sib && sib.classList.contains("error-message")) {
-        sib.id = `error-${input.name}`;
+        sib.setAttribute("data-error-for", input.name);
       }
     });
   }
@@ -1020,7 +1096,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 = element.placeholder ?? t("placeholderText", state);
     input.readOnly = readonly;
     chip.appendChild(input);
     if (!readonly && ctx.instance) {
@@ -1034,7 +1110,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";
@@ -1055,6 +1131,7 @@ function renderMultipleTextElement(element, ctx, wrapper, pathKey) {
         updateIndices();
         updateAddButton();
         updateRemoveButtons();
+        ctx.instance?.triggerOnChange(pathKey);
       };
       chip.appendChild(rem);
     }
@@ -1079,6 +1156,7 @@ function renderMultipleTextElement(element, ctx, wrapper, pathKey) {
         addChip(element.default || "");
         updateAddButton();
         updateRemoveButtons();
+        ctx.instance?.triggerOnChange(pathKey);
       },
       { label: element.addLabel }
     );
@@ -1096,40 +1174,6 @@ function renderMultipleTextElement(element, ctx, wrapper, pathKey) {
 function validateTextElement(element, key, context) {
   const errors = [];
   const { scopeRoot, skipValidation } = context;
-  const markValidity = (input, errorMessage) => {
-    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 = input.closest?.(".fb-chip");
-        const anchor = chipAncestor || input;
-        if (anchor.nextSibling) {
-          anchor.parentNode?.insertBefore(errorElement, anchor.nextSibling);
-        } else {
-          anchor.parentNode?.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;
@@ -1137,12 +1181,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 {
@@ -1150,19 +1194,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) {
@@ -1192,12 +1236,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 = input?.value ?? "";
     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) {
@@ -1259,8 +1303,8 @@ function renderTextareaElement(element, ctx, wrapper, pathKey) {
     line-height: var(--fb-line-height, 1.5);
   `;
   textareaInput.name = pathKey;
-  textareaInput.placeholder = element.placeholder ?? "\u0412\u0432\u0435\u0434\u0438\u0442\u0435 \u0442\u0435\u043A\u0441\u0442";
-  textareaInput.value = ctx.prefill[element.key] || element.default || "";
+  textareaInput.placeholder = element.placeholder ?? t("placeholderText", state);
+  textareaInput.value = ctx.prefill[element.key] ?? element.default ?? "";
   textareaInput.readOnly = readonly;
   if (!readonly && ctx.instance) {
     const handleChange = () => {
@@ -1270,7 +1314,10 @@ function renderTextareaElement(element, ctx, wrapper, pathKey) {
     textareaInput.addEventListener("blur", handleChange);
     textareaInput.addEventListener("input", handleChange);
   }
-  applyAutoExpand(textareaInput, { minRows: element.rows ?? 1 });
+  applyAutoExpand(textareaInput, {
+    minRows: element.rows ?? 1,
+    observers: state.autoExpandObservers
+  });
   textareaWrapper.appendChild(textareaInput);
   if (!readonly && (element.minLength != null || element.maxLength != null)) {
     const counter = createCharCounter(element, textareaInput);
@@ -1313,7 +1360,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 = element.placeholder ?? t("placeholderText", state);
     textareaInput.value = value;
     textareaInput.readOnly = readonly;
     if (!readonly && ctx.instance) {
@@ -1324,7 +1371,10 @@ function renderMultipleTextareaElement(element, ctx, wrapper, pathKey) {
       textareaInput.addEventListener("blur", handleChange);
       textareaInput.addEventListener("input", handleChange);
     }
-    applyAutoExpand(textareaInput, { minRows: element.rows ?? 1 });
+    applyAutoExpand(textareaInput, {
+      minRows: element.rows ?? 1,
+      observers: state.autoExpandObservers
+    });
     textareaContainer.appendChild(textareaInput);
     if (!readonly && (element.minLength != null || element.maxLength != null)) {
       const counter = createCharCounter(element, textareaInput);
@@ -1362,6 +1412,7 @@ function renderMultipleTextareaElement(element, ctx, wrapper, pathKey) {
             updateIndices();
             updateAddButton();
             updateRemoveButtons();
+            ctx.instance?.triggerOnChange(pathKey);
           }
         };
         item.appendChild(removeBtn);
@@ -1381,6 +1432,7 @@ function renderMultipleTextareaElement(element, ctx, wrapper, pathKey) {
         addTextareaItem(element.default || "");
         updateAddButton();
         updateRemoveButtons();
+        ctx.instance?.triggerOnChange(pathKey);
       },
       { label: element.addLabel }
     );
@@ -1541,6 +1593,17 @@ 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) {
   const state = ctx.state;
   const readonly = isElementReadonly(element, state, ctx);
@@ -1549,11 +1612,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 = element.placeholder ?? "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 = ctx.prefill[element.key] ?? element.default ?? "";
   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";
@@ -1592,7 +1656,7 @@ function renderMultipleNumberElement(element, ctx, wrapper, pathKey) {
   const minCount = element.minCount ?? (element.required ? 1 : 0);
   const maxCount = element.maxCount ?? Infinity;
   while (values.length < minCount) {
-    values.push(element.default || "");
+    values.push(element.default ?? "");
   }
   const container = document.createElement("div");
   container.className = "fb-row";
@@ -1621,10 +1685,11 @@ function renderMultipleNumberElement(element, ctx, wrapper, pathKey) {
       width: 100%;
       box-sizing: border-box;
     `;
-    numberInput.placeholder = element.placeholder || "0";
+    numberInput.placeholder = element.placeholder ?? "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) {
@@ -1672,6 +1737,7 @@ function renderMultipleNumberElement(element, ctx, wrapper, pathKey) {
             updateIndices();
             updateAddButton();
             updateRemoveButtons();
+            ctx.instance?.triggerOnChange(pathKey);
           }
         };
         item.appendChild(removeBtn);
@@ -1687,10 +1753,11 @@ function renderMultipleNumberElement(element, ctx, wrapper, pathKey) {
     const handle = createAddItemRow(
       "number",
       () => {
-        values.push(element.default || "");
-        addNumberItem(element.default || "");
+        values.push(element.default ?? "");
+        addNumberItem(element.default ?? "");
         updateAddButton();
         updateRemoveButtons();
+        ctx.instance?.triggerOnChange(pathKey);
       },
       { label: element.addLabel }
     );
@@ -1708,54 +1775,22 @@ function renderMultipleNumberElement(element, ctx, wrapper, pathKey) {
 function validateNumberElement(element, key, context) {
   const errors = [];
   const { scopeRoot, skipValidation } = context;
-  const markValidity = (input, errorMessage) => {
-    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) {
-          input.parentNode?.insertBefore(errorElement, input.nextSibling);
-        } else {
-          input.parentNode?.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) {
@@ -1767,20 +1802,19 @@ function validateNumberElement(element, key, context) {
       const raw = input?.value ?? "";
       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(element.decimals ?? 0) ? element.decimals ?? 0 : 0;
-      values.push(Number(v.toFixed(d)));
+      values.push(applyDecimals(v, element.decimals));
     });
     if (!skipValidation) {
       const { state } = context;
@@ -1799,31 +1833,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 = input?.value ?? "";
     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(element.decimals ?? 0) ? element.decimals ?? 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) {
@@ -1863,6 +1900,38 @@ function updateNumberField(element, fieldPath, value, context) {
 }
 
 // src/components/select.ts
+function appendSelectOptions(select, element, selectedValue, state) {
+  const options = element.options || [];
+  if (!options.some((option) => option.value === "")) {
+    const emptyOption = document.createElement("option");
+    emptyOption.value = "";
+    emptyOption.textContent = element.placeholder ?? 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) {
   const state = ctx.state;
   const readonly = isElementReadonly(element, state, ctx);
@@ -1875,18 +1944,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,
+    ctx.prefill[element.key] ?? 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);
   }
@@ -1906,7 +1975,7 @@ function renderMultipleSelectElement(element, ctx, wrapper, pathKey) {
   const minCount = element.minCount ?? (element.required ? 1 : 0);
   const maxCount = element.maxCount ?? Infinity;
   while (values.length < minCount) {
-    values.push(element.default || element.options?.[0]?.value || "");
+    values.push(element.default ?? "");
   }
   const container = document.createElement("div");
   container.className = "fb-row";
@@ -1931,15 +2000,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);
@@ -1976,6 +2037,7 @@ function renderMultipleSelectElement(element, ctx, wrapper, pathKey) {
             updateIndices();
             updateAddButton();
             updateRemoveButtons();
+            ctx.instance?.triggerOnChange(pathKey);
           }
         };
         item.appendChild(removeBtn);
@@ -1991,11 +2053,12 @@ function renderMultipleSelectElement(element, ctx, wrapper, pathKey) {
     const handle = createAddItemRow(
       "select",
       () => {
-        const defaultValue = element.default || element.options?.[0]?.value || "";
+        const defaultValue = element.default ?? "";
         values.push(defaultValue);
         addSelectItem(defaultValue);
         updateAddButton();
         updateRemoveButtons();
+        ctx.instance?.triggerOnChange(pathKey);
       },
       { label: element.addLabel }
     );
@@ -2019,38 +2082,6 @@ function renderMultipleSelectElement(element, ctx, wrapper, pathKey) {
 function validateSelectElement(element, key, context) {
   const errors = [];
   const { scopeRoot, skipValidation } = context;
-  const markValidity = (input, errorMessage) => {
-    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) {
-          input.parentNode?.insertBefore(errorElement, input.nextSibling);
-        } else {
-          input.parentNode?.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) => {
     if (skipValidation) return;
     const { state } = context;
@@ -2074,27 +2105,36 @@ function validateSelectElement(element, key, context) {
     const values = [];
     inputs.forEach((input) => {
       const val = input?.value ?? "";
-      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 = input?.value ?? "";
     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) {
@@ -2109,10 +2149,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 = "";
@@ -2129,10 +2176,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 = "";
@@ -2335,7 +2384,7 @@ function renderMultipleSwitcherElement(element, ctx, wrapper, pathKey) {
   const minCount = element.minCount ?? (element.required ? 1 : 0);
   const maxCount = element.maxCount ?? Infinity;
   while (values.length < minCount) {
-    values.push(element.default || element.options?.[0]?.value || "");
+    values.push(element.default ?? "");
   }
   const readonly = isElementReadonly(element, state, ctx);
   const container = document.createElement("div");
@@ -2413,6 +2462,7 @@ function renderMultipleSwitcherElement(element, ctx, wrapper, pathKey) {
             updateIndices();
             updateAddButton();
             updateRemoveButtons();
+            ctx.instance?.triggerOnChange(pathKey);
           }
         };
         item.appendChild(removeBtn);
@@ -2428,11 +2478,12 @@ function renderMultipleSwitcherElement(element, ctx, wrapper, pathKey) {
     const handle = createAddItemRow(
       "switcher",
       () => {
-        const defaultValue = element.default || element.options?.[0]?.value || "";
+        const defaultValue = element.default ?? "";
         values.push(defaultValue);
         addSwitcherItem(defaultValue);
         updateAddButton();
         updateRemoveButtons();
+        ctx.instance?.triggerOnChange(pathKey);
       },
       { label: element.addLabel }
     );
@@ -2456,38 +2507,6 @@ function renderMultipleSwitcherElement(element, ctx, wrapper, pathKey) {
 function validateSwitcherElement(element, key, context) {
   const errors = [];
   const { scopeRoot, skipValidation } = context;
-  const markValidity = (input, errorMessage) => {
-    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) {
-          input.parentNode?.insertBefore(errorElement, input.nextSibling);
-        } else {
-          input.parentNode?.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) => {
     if (skipValidation) return;
     const { state } = context;
@@ -2514,35 +2533,35 @@ function validateSwitcherElement(element, key, context) {
     const values = [];
     inputs.forEach((input) => {
       const val = input?.value ?? "";
-      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 = input?.value ?? "";
     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 };
   }
 }
@@ -2714,6 +2733,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";
@@ -5569,7 +5589,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 = input?.value ?? "";
   if (!skipValidation && element.required && rid === "") {
@@ -5789,7 +5809,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";
@@ -5813,9 +5833,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 ?? "#000000";
   hexInput.style.cssText = `
     width: 100px;
     padding: var(--fb-input-padding-y) var(--fb-input-padding-x);
@@ -5904,12 +5925,17 @@ function createEditColourUI(value, pathKey, ctx) {
 function renderColourElement(element, ctx, wrapper, pathKey) {
   const state = ctx.state;
   const readonly = isElementReadonly(element, state, ctx);
-  const initialValue = ctx.prefill[element.key] || element.default || "#000000";
+  const initialValue = ctx.prefill[element.key] ?? element.default ?? "#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) {
@@ -5931,7 +5957,7 @@ function renderMultipleColourElement(element, ctx, wrapper, pathKey) {
   const minCount = element.minCount ?? (element.required ? 1 : 0);
   const maxCount = element.maxCount ?? Infinity;
   while (values.length < minCount) {
-    values.push(element.default || "#000000");
+    values.push(element.default ?? "#000000");
   }
   const container = document.createElement("div");
   container.className = "fb-row";
@@ -5955,7 +5981,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);
     }
@@ -6001,6 +6032,7 @@ function renderMultipleColourElement(element, ctx, wrapper, pathKey) {
             updateIndices();
             updateAddButton();
             updateRemoveButtons();
+            ctx.instance?.triggerOnChange(pathKey);
           }
         };
         item.appendChild(removeBtn);
@@ -6016,11 +6048,12 @@ function renderMultipleColourElement(element, ctx, wrapper, pathKey) {
     const handle = createAddItemRow(
       "colour",
       () => {
-        const defaultColour = element.default || "#000000";
+        const defaultColour = element.default ?? "#000000";
         values.push(defaultColour);
         addColourItem(defaultColour);
         updateAddButton();
         updateRemoveButtons();
+        ctx.instance?.triggerOnChange(pathKey);
       },
       { label: element.addLabel }
     );
@@ -6048,58 +6081,26 @@ function renderMultipleColourElement(element, ctx, wrapper, pathKey) {
 function validateColourElement(element, key, context) {
   const errors = [];
   const { scopeRoot, skipValidation } = context;
-  const markValidity = (input, errorMessage) => {
-    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) {
-          input.parentNode?.insertBefore(errorElement, input.nextSibling);
-        } else {
-          input.parentNode?.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) {
@@ -6136,7 +6137,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);
@@ -6457,6 +6458,7 @@ function renderMultipleSliderElement(element, ctx, wrapper, pathKey) {
             updateIndices();
             updateAddButton();
             updateRemoveButtons();
+            ctx.instance?.triggerOnChange(pathKey);
           }
         };
         item.appendChild(removeBtn);
@@ -6476,6 +6478,7 @@ function renderMultipleSliderElement(element, ctx, wrapper, pathKey) {
         addSliderItem(defaultValue);
         updateAddButton();
         updateRemoveButtons();
+        ctx.instance?.triggerOnChange(pathKey);
       },
       { label: element.addLabel }
     );
@@ -6517,42 +6520,6 @@ function validateSliderElement(element, key, context) {
   const max = element.max;
   const step = element.step ?? 1;
   const scale = element.scale || "linear";
-  const markValidity = (input, errorMessage) => {
-    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) {
-          sliderContainer.parentNode?.insertBefore(
-            errorElement,
-            sliderContainer.nextSibling
-          );
-        } else if (sliderContainer) {
-          sliderContainer.parentNode?.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;
@@ -6560,10 +6527,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;
@@ -6579,17 +6546,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) {
@@ -6734,20 +6701,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);
       }
     }
   });
@@ -6816,7 +6775,7 @@ function renderSingleContainerElement(element, ctx, wrapper, pathKey) {
   };
   element.elements.forEach((child) => {
     if (child.type !== "markdown" && (child.hidden || child.type === "hidden")) {
-      const prefillVal = containerPrefill[child.key] ?? ("default" in child ? child.default : null) ?? null;
+      const prefillVal = child.key in containerPrefill ? containerPrefill[child.key] : ("default" in child ? child.default : null) ?? null;
       itemsWrap.appendChild(
         createHiddenInput(pathJoin(subCtx.path, child.key), prefillVal)
       );
@@ -6861,7 +6820,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) {
   const state = ctx.state;
   const containerIsReadonly = isElementReadonly(element, state, ctx);
   const childInheritedReadonly = containerIsReadonly || ctx.inheritedReadonly;
@@ -6894,6 +6853,7 @@ function renderMultipleContainerElement(element, ctx, wrapper, _pathKey) {
     if (countItems() <= min) return;
     item.remove();
     updateAddButton();
+    ctx.instance?.triggerOnChange(pathKey);
   };
   const createContainerItem = (idx, rowPrefill, formData) => {
     const subCtx = {
@@ -6916,7 +6876,7 @@ function renderMultipleContainerElement(element, ctx, wrapper, _pathKey) {
     );
     element.elements.forEach((child) => {
       if (child.type !== "markdown" && (child.hidden || child.type === "hidden")) {
-        const hiddenValue = rowPrefill?.[child.key] ?? ("default" in child ? child.default : null) ?? null;
+        const hiddenValue = rowPrefill && child.key in rowPrefill ? rowPrefill[child.key] : ("default" in child ? child.default : null) ?? null;
         childWrapper.appendChild(
           createHiddenInput(pathJoin(subCtx.path, child.key), hiddenValue)
         );
@@ -6950,6 +6910,7 @@ function renderMultipleContainerElement(element, ctx, wrapper, _pathKey) {
       itemsWrap.appendChild(item);
     }
     updateAddButton();
+    ctx.instance?.triggerOnChange(pathKey);
   };
   let slideAddTile = null;
   let slideAddUpdate = null;
@@ -7024,19 +6985,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)) {
@@ -7087,7 +7045,7 @@ function validateContainerElement(element, key, context) {
           }
         }
         const childKey = `${key}[${domIndex}].${child.key}`;
-        const childResult = validateElement(
+        const childResult = validateChild(
           { ...child, key: childKey },
           { path },
           itemContainer
@@ -7128,7 +7086,7 @@ function validateContainerElement(element, key, context) {
       }
       {
         const childKey = `${key}.${child.key}`;
-        const childResult = validateElement(
+        const childResult = validateChild(
           { ...child, key: childKey },
           { path },
           containerContainer
@@ -7243,7 +7201,7 @@ function renderGroupElement(element, ctx, wrapper, pathKey) {
     maxCount: element.repeat?.max
   };
   if (containerElement.multiple) {
-    renderMultipleContainerElement(containerElement, ctx, wrapper);
+    renderMultipleContainerElement(containerElement, ctx, wrapper, pathKey);
   } else {
     renderSingleContainerElement(containerElement, ctx, wrapper, pathKey);
   }
@@ -7619,7 +7577,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();
     }
@@ -8561,7 +8519,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;
@@ -8583,6 +8541,7 @@ function applyAutoExpand2(textarea, backdrop) {
   const ro = new ResizeObserver((entries) => {
     if (!textarea.isConnected) {
       ro.disconnect();
+      observers.delete(ro);
       return;
     }
     const entry = entries[0];
@@ -8592,6 +8551,7 @@ function applyAutoExpand2(textarea, backdrop) {
     resize();
   });
   ro.observe(textarea);
+  observers.add(ro);
 }
 function buildFileLabels(files, state) {
   const labels = /* @__PURE__ */ new Map();
@@ -9161,7 +9121,7 @@ function renderEditMode(element, ctx, wrapper, pathKey, initialValue) {
   `;
   const textarea = document.createElement("textarea");
   textarea.name = `${pathKey}__text`;
-  textarea.placeholder = element.placeholder || t("richinputPlaceholder", state);
+  textarea.placeholder = element.placeholder ?? t("richinputPlaceholder", state);
   const rawInitialText = initialValue.text ?? "";
   textarea.value = rawInitialText ? replaceRidsWithFilenames(rawInitialText, files, state) : "";
   textarea.style.cssText = `
@@ -9178,7 +9138,7 @@ 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;
   });
@@ -10151,12 +10111,7 @@ function validateHiddenElement(element, key, context) {
   const input = scopeRoot.querySelector(
     `input[type="hidden"][data-hidden-field="true"][name="${key}"]`
   );
-  const raw = input?.value ?? "";
-  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(input?.value ?? ""), errors: [] };
 }
 function updateHiddenField(_element, fieldPath, value, context) {
   const { scopeRoot } = context;
@@ -10240,15 +10195,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;
@@ -10260,6 +10219,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");
@@ -10339,23 +10302,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);
@@ -10484,11 +10437,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;
@@ -10496,6 +10457,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();
@@ -10503,7 +10465,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)";
@@ -10511,7 +10473,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;
@@ -10586,7 +10548,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);
       }
@@ -10639,7 +10601,7 @@ function renderElement2(element, ctx) {
   wrapper.setAttribute("data-fb-width", element.width || "full");
   const ops = getComponentOperations(element.type);
   if (!ops?.ownsLabel) {
-    const label = createLabelContainer(element);
+    const label = createLabelContainer(element, ctx.state);
     wrapper.appendChild(label);
   }
   const pathKey = pathJoin(ctx.path, element.key);
@@ -10668,6 +10630,7 @@ var defaultConfig = {
   onDownloadError: null,
   debounceMs: 300,
   verboseErrors: false,
+  postMessageTarget: null,
   enableFilePreview: true,
   maxPreviewSize: "200px",
   readonly: false,
@@ -10689,6 +10652,7 @@ var defaultConfig = {
       openInNewTab: "Open in new tab",
       changeButton: "Change",
       placeholderText: "Enter text",
+      selectPlaceholder: "Select\u2026",
       previewAlt: "Preview",
       previewUnavailable: "Preview unavailable",
       previewError: "Preview error",
@@ -10764,6 +10728,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",
@@ -10828,20 +10793,23 @@ var defaultConfig = {
   },
   theme: {}
 };
-function createInstanceState(config) {
-  const mergedTranslations = {
-    ...defaultConfig.translations
-  };
-  if (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?.translations
+  );
   return {
     schema: null,
     formRoot: null,
@@ -10857,7 +10825,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() {
@@ -11158,6 +11128,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) {
@@ -11191,10 +11166,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
@@ -11227,17 +11213,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;
@@ -11250,12 +11244,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)
@@ -11295,21 +11326,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");
@@ -11555,10 +11575,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;
@@ -11581,7 +11604,7 @@ var FormBuilderInstance = class {
     }
     schema.elements.forEach((element) => {
       if (element.type !== "markdown" && (element.hidden || element.type === "hidden")) {
-        const val = prefill?.[element.key] ?? element.default ?? null;
+        const val = prefill && element.key in prefill ? prefill[element.key] : element.default ?? null;
         fieldsWrapper.appendChild(createHiddenInput(element.key, val));
         return;
       }
@@ -11598,7 +11621,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();
@@ -11614,7 +11640,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) => {
       const key = element.key ?? "";
       const scopeRoot = customScopeRoot || this.state.formRoot;
       const componentContext = {
@@ -11622,7 +11648,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,
@@ -11640,7 +11669,6 @@ 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) => {
       if (element.enableIf) {
         try {
@@ -11658,24 +11686,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 = hiddenInput?.value ?? "";
-        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 {
@@ -11696,16 +11712,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;
   }
@@ -11714,17 +11721,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
@@ -11994,6 +12011,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);
@@ -12011,6 +12031,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