@dmitryvim/form-builder 0.5.4 → 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)
       );
     }
   }
@@ -58,7 +58,7 @@ function formatFileSize(bytes) {
   return `${(bytes / (1024 * 1024)).toFixed(1)} MB`;
 }
 function serializeHiddenValue(value) {
-  if (value === null || value === void 0) return "";
+  if (value === void 0) return "";
   return JSON.stringify(value);
 }
 function deserializeHiddenValue(raw) {
@@ -69,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";
@@ -306,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) {
@@ -473,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) {
@@ -600,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);
@@ -630,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];
@@ -639,6 +708,7 @@ function applyAutoExpand(textarea, options = {}) {
     resize();
   });
   ro.observe(textarea);
+  options.observers?.add(ro);
 }
 function applySingleLineMode(textarea) {
   textarea.addEventListener("keydown", (e) => {
@@ -950,10 +1020,10 @@ function renderTextElement(element, ctx, wrapper, pathKey) {
   `;
   textInput.name = pathKey;
   textInput.placeholder = element.placeholder ?? t("placeholderText", state);
-  textInput.value = ctx.prefill[element.key] || element.default || "";
+  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)";
@@ -1011,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);
       }
     });
   }
@@ -1026,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) {
@@ -1040,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";
@@ -1104,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;
@@ -1145,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 {
@@ -1158,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) {
@@ -1205,7 +1241,7 @@ function validateTextElement(element, key, context) {
     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) {
@@ -1267,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 = () => {
@@ -1278,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);
@@ -1321,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) {
@@ -1332,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);
@@ -1551,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);
@@ -1559,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";
@@ -1602,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";
@@ -1631,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) {
@@ -1698,8 +1753,8 @@ 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);
@@ -1720,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) {
@@ -1779,14 +1802,14 @@ 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;
       }
@@ -1816,18 +1839,18 @@ function validateNumberElement(element, key, 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);
@@ -1877,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);
@@ -1889,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);
   }
@@ -1920,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";
@@ -1945,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);
@@ -2006,7 +2053,7 @@ 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();
@@ -2035,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;
@@ -2090,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) {
@@ -2125,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 = "";
@@ -2145,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 = "";
@@ -2351,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");
@@ -2445,7 +2478,7 @@ 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();
@@ -2474,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;
@@ -2532,16 +2533,16 @@ 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(
@@ -2551,16 +2552,16 @@ function validateSwitcherElement(element, key, context) {
     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 };
   }
 }
@@ -2732,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";
@@ -5807,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";
@@ -5831,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);
@@ -5922,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) {
@@ -5949,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";
@@ -5973,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);
     }
@@ -6035,7 +6048,7 @@ 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();
@@ -6068,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) {
@@ -6156,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);
@@ -6539,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;
@@ -6582,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;
@@ -6601,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) {
@@ -6756,22 +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.dataset.hiddenField) {
-          data[fieldName] = deserializeHiddenValue(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);
       }
     }
   });
@@ -6840,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)
       );
@@ -6941,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)
         );
@@ -7050,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)) {
@@ -7113,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
@@ -7154,7 +7086,7 @@ function validateContainerElement(element, key, context) {
       }
       {
         const childKey = `${key}.${child.key}`;
-        const childResult = validateElement(
+        const childResult = validateChild(
           { ...child, key: childKey },
           { path },
           containerContainer
@@ -7645,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();
     }
@@ -8587,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;
@@ -8609,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];
@@ -8618,6 +8551,7 @@ function applyAutoExpand2(textarea, backdrop) {
     resize();
   });
   ro.observe(textarea);
+  observers.add(ro);
 }
 function buildFileLabels(files, state) {
   const labels = /* @__PURE__ */ new Map();
@@ -9187,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 = `
@@ -9204,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;
   });
@@ -10177,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;
@@ -10373,25 +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 if (input.dataset.hiddenField) {
-      return deserializeHiddenValue(input.value);
-    } 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);
@@ -10520,11 +10437,19 @@ function createFieldLabel(element) {
   }
   return title;
 }
+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;
@@ -10705,6 +10630,7 @@ var defaultConfig = {
   onDownloadError: null,
   debounceMs: 300,
   verboseErrors: false,
+  postMessageTarget: null,
   enableFilePreview: true,
   maxPreviewSize: "200px",
   readonly: false,
@@ -10726,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",
@@ -10801,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",
@@ -10865,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,
@@ -10895,6 +10826,7 @@ function createInstanceState(config) {
     syntheticElementIds: /* @__PURE__ */ new WeakMap(),
     syntheticElementIdCounter: 0,
     enableIfObservers: /* @__PURE__ */ new Set(),
+    autoExpandObservers: /* @__PURE__ */ new Set(),
     tooltipElements: /* @__PURE__ */ new Set()
   };
 }
@@ -11196,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) {
@@ -11229,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
@@ -11265,12 +11213,16 @@ 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
@@ -11623,11 +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;
@@ -11650,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;
       }
@@ -11667,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();
@@ -11683,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 = {
@@ -11691,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,
@@ -11709,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 {
@@ -11727,7 +11686,7 @@ var FormBuilderInstance = class {
       if (element.type === "markdown") {
         return;
       }
-      const result = validateElement2(element, { path: "" });
+      const result = validateElement(element, { path: "" });
       if (result.skip) return;
       if (result.spread && result.value !== null && typeof result.value === "object") {
         Object.assign(data, result.value);
@@ -11753,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;
   }
@@ -11771,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
@@ -12051,7 +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);
@@ -12069,6 +12031,18 @@ 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();