@dmitryvim/form-builder 0.2.22 → 0.2.24

package/dist/esm/index.js

@@ -117,6 +117,48 @@ function validateSchema(schema) {
       });
     }
   }
+  function checkFlatOutputCollisions(elements, scopePath) {
+    const allOutputKeys = /* @__PURE__ */ new Set();
+    for (const el of elements) {
+      if (el.type === "richinput" && el.flatOutput) {
+        const richEl = el;
+        const textKey = richEl.textKey ?? "text";
+        const filesKey = richEl.filesKey ?? "files";
+        for (const otherEl of elements) {
+          if (otherEl === el) continue;
+          if (otherEl.key === textKey) {
+            errors.push(
+              `${scopePath}: RichInput "${el.key}" flatOutput textKey "${textKey}" collides with element key "${otherEl.key}"`
+            );
+          }
+          if (otherEl.key === filesKey) {
+            errors.push(
+              `${scopePath}: RichInput "${el.key}" flatOutput filesKey "${filesKey}" collides with element key "${otherEl.key}"`
+            );
+          }
+        }
+        if (allOutputKeys.has(textKey)) {
+          errors.push(
+            `${scopePath}: RichInput "${el.key}" flatOutput textKey "${textKey}" collides with another flatOutput key`
+          );
+        }
+        if (allOutputKeys.has(filesKey)) {
+          errors.push(
+            `${scopePath}: RichInput "${el.key}" flatOutput filesKey "${filesKey}" collides with another flatOutput key`
+          );
+        }
+        allOutputKeys.add(textKey);
+        allOutputKeys.add(filesKey);
+      } else {
+        if (allOutputKeys.has(el.key)) {
+          errors.push(
+            `${scopePath}: Element key "${el.key}" collides with a flatOutput richinput key`
+          );
+        }
+        allOutputKeys.add(el.key);
+      }
+    }
+  }
   function validateElements(elements, path) {
     elements.forEach((element, index) => {
       const elementPath = `${path}[${index}]`;
@@ -182,6 +224,7 @@ function validateSchema(schema) {
           }
         }
         validateElements(element.elements, `${elementPath}.elements`);
+        checkFlatOutputCollisions(element.elements, `${elementPath}.elements`);
       }
       if (element.type === "select" && element.options) {
         const defaultValue = element.default;
@@ -198,8 +241,10 @@ function validateSchema(schema) {
       }
     });
   }
-  if (Array.isArray(schema.elements))
+  if (Array.isArray(schema.elements)) {
     validateElements(schema.elements, "elements");
+    checkFlatOutputCollisions(schema.elements, "elements");
+  }
   return errors;
 }
 
@@ -223,6 +268,26 @@ function formatFileSize(bytes) {
   if (bytes < 1024 * 1024) return `${(bytes / 1024).toFixed(1)} KB`;
   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);
+}
+function deserializeHiddenValue(raw) {
+  if (raw === "") return null;
+  try {
+    return JSON.parse(raw);
+  } catch {
+    return raw;
+  }
+}
+function createHiddenInput(name, value) {
+  const input = document.createElement("input");
+  input.type = "hidden";
+  input.name = name;
+  input.setAttribute("data-hidden-field", "true");
+  input.value = serializeHiddenValue(value);
+  return input;
+}
 
 // src/utils/enable-conditions.ts
 function getValueByPath(data, path) {
@@ -2006,6 +2071,25 @@ function updateSwitcherField(element, fieldPath, value, context) {
 }
 
 // src/components/file.ts
+function getAllowedExtensions(accept) {
+  if (!accept) return [];
+  if (typeof accept === "object" && Array.isArray(accept.extensions)) {
+    return accept.extensions.map((ext) => ext.toLowerCase());
+  }
+  if (typeof accept === "string") {
+    return accept.split(",").map((s) => s.trim()).filter((s) => s.startsWith(".")).map((s) => s.substring(1).toLowerCase());
+  }
+  return [];
+}
+function isFileExtensionAllowed(fileName, allowedExtensions) {
+  if (allowedExtensions.length === 0) return true;
+  const ext = fileName.split(".").pop()?.toLowerCase() || "";
+  return allowedExtensions.includes(ext);
+}
+function isFileSizeAllowed(file, maxSizeMB) {
+  if (maxSizeMB === Infinity) return true;
+  return file.size <= maxSizeMB * 1024 * 1024;
+}
 function renderLocalImagePreview(container, file, fileName, state) {
   const img = document.createElement("img");
   img.className = "w-full h-full object-contain";
@@ -2535,7 +2619,40 @@ function setEmptyFileContainer(fileContainer, state, hint) {
     </div>
   `;
 }
-async function handleFileSelect(file, container, fieldName, state, deps = null, instance) {
+function showFileError(container, message) {
+  const existing = container.closest(".space-y-2")?.querySelector(".file-error-message");
+  if (existing) existing.remove();
+  const errorEl = document.createElement("div");
+  errorEl.className = "file-error-message error-message";
+  errorEl.style.cssText = `
+    color: var(--fb-error-color);
+    font-size: var(--fb-font-size-small);
+    margin-top: 0.25rem;
+  `;
+  errorEl.textContent = message;
+  container.closest(".space-y-2")?.appendChild(errorEl);
+}
+function clearFileError(container) {
+  const existing = container.closest(".space-y-2")?.querySelector(".file-error-message");
+  if (existing) existing.remove();
+}
+async function handleFileSelect(file, container, fieldName, state, deps = null, instance, allowedExtensions = [], maxSizeMB = Infinity) {
+  if (!isFileExtensionAllowed(file.name, allowedExtensions)) {
+    const formats = allowedExtensions.join(", ");
+    showFileError(
+      container,
+      t("invalidFileExtension", state, { name: file.name, formats })
+    );
+    return;
+  }
+  if (!isFileSizeAllowed(file, maxSizeMB)) {
+    showFileError(
+      container,
+      t("fileTooLarge", state, { name: file.name, maxSize: maxSizeMB })
+    );
+    return;
+  }
+  clearFileError(container);
   let rid;
   if (state.config.uploadFile) {
     try {
@@ -2738,9 +2855,51 @@ function handleInitialFileData(initial, fileContainer, pathKey, fileWrapper, sta
   hiddenInput.value = initial;
   fileWrapper.appendChild(hiddenInput);
 }
-function setupFilesDropHandler(filesContainer, initialFiles, state, updateCallback, pathKey, instance) {
+function setupFilesDropHandler(filesContainer, initialFiles, state, updateCallback, constraints, pathKey, instance) {
   setupDragAndDrop(filesContainer, async (files) => {
-    const arr = Array.from(files);
+    const allFiles = Array.from(files);
+    const rejectedByExtension = allFiles.filter(
+      (f) => !isFileExtensionAllowed(f.name, constraints.allowedExtensions)
+    );
+    const afterExtension = allFiles.filter(
+      (f) => isFileExtensionAllowed(f.name, constraints.allowedExtensions)
+    );
+    const rejectedBySize = afterExtension.filter(
+      (f) => !isFileSizeAllowed(f, constraints.maxSize)
+    );
+    const validFiles = afterExtension.filter(
+      (f) => isFileSizeAllowed(f, constraints.maxSize)
+    );
+    const remaining = constraints.maxCount === Infinity ? validFiles.length : Math.max(0, constraints.maxCount - initialFiles.length);
+    const arr = validFiles.slice(0, remaining);
+    const skippedByCount = validFiles.length - arr.length;
+    const errorParts = [];
+    if (rejectedByExtension.length > 0) {
+      const formats = constraints.allowedExtensions.join(", ");
+      const names = rejectedByExtension.map((f) => f.name).join(", ");
+      errorParts.push(
+        t("invalidFileExtension", state, { name: names, formats })
+      );
+    }
+    if (rejectedBySize.length > 0) {
+      const names = rejectedBySize.map((f) => f.name).join(", ");
+      errorParts.push(
+        t("fileTooLarge", state, { name: names, maxSize: constraints.maxSize })
+      );
+    }
+    if (skippedByCount > 0) {
+      errorParts.push(
+        t("filesLimitExceeded", state, {
+          skipped: skippedByCount,
+          max: constraints.maxCount
+        })
+      );
+    }
+    if (errorParts.length > 0) {
+      showFileError(filesContainer, errorParts.join(" \u2022 "));
+    } else {
+      clearFileError(filesContainer);
+    }
     for (const file of arr) {
       const rid = await uploadSingleFile(file, state);
       state.resourceIndex.set(rid, {
@@ -2758,10 +2917,57 @@ function setupFilesDropHandler(filesContainer, initialFiles, state, updateCallba
     }
   });
 }
-function setupFilesPickerHandler(filesPicker, initialFiles, state, updateCallback, pathKey, instance) {
+function setupFilesPickerHandler(filesPicker, initialFiles, state, updateCallback, constraints, pathKey, instance) {
   filesPicker.onchange = async () => {
     if (filesPicker.files) {
-      for (const file of Array.from(filesPicker.files)) {
+      const allFiles = Array.from(filesPicker.files);
+      const rejectedByExtension = allFiles.filter(
+        (f) => !isFileExtensionAllowed(f.name, constraints.allowedExtensions)
+      );
+      const afterExtension = allFiles.filter(
+        (f) => isFileExtensionAllowed(f.name, constraints.allowedExtensions)
+      );
+      const rejectedBySize = afterExtension.filter(
+        (f) => !isFileSizeAllowed(f, constraints.maxSize)
+      );
+      const validFiles = afterExtension.filter(
+        (f) => isFileSizeAllowed(f, constraints.maxSize)
+      );
+      const remaining = constraints.maxCount === Infinity ? validFiles.length : Math.max(0, constraints.maxCount - initialFiles.length);
+      const arr = validFiles.slice(0, remaining);
+      const skippedByCount = validFiles.length - arr.length;
+      const errorParts = [];
+      if (rejectedByExtension.length > 0) {
+        const formats = constraints.allowedExtensions.join(", ");
+        const names = rejectedByExtension.map((f) => f.name).join(", ");
+        errorParts.push(
+          t("invalidFileExtension", state, { name: names, formats })
+        );
+      }
+      if (rejectedBySize.length > 0) {
+        const names = rejectedBySize.map((f) => f.name).join(", ");
+        errorParts.push(
+          t("fileTooLarge", state, {
+            name: names,
+            maxSize: constraints.maxSize
+          })
+        );
+      }
+      if (skippedByCount > 0) {
+        errorParts.push(
+          t("filesLimitExceeded", state, {
+            skipped: skippedByCount,
+            max: constraints.maxCount
+          })
+        );
+      }
+      const wrapper = filesPicker.closest(".space-y-2") || filesPicker.parentElement;
+      if (errorParts.length > 0 && wrapper) {
+        showFileError(wrapper, errorParts.join(" \u2022 "));
+      } else if (wrapper) {
+        clearFileError(wrapper);
+      }
+      for (const file of arr) {
         const rid = await uploadSingleFile(file, state);
         state.resourceIndex.set(rid, {
           name: file.name,
@@ -2813,6 +3019,8 @@ function renderFileElement(element, ctx, wrapper, pathKey) {
     const fileContainer = document.createElement("div");
     fileContainer.className = "file-preview-container w-full aspect-square max-w-xs bg-gray-100 rounded-lg overflow-hidden relative group cursor-pointer";
     const initial = ctx.prefill[element.key];
+    const allowedExts = getAllowedExtensions(element.accept);
+    const maxSizeMB = element.maxSize ?? Infinity;
     const fileUploadHandler = () => picker.click();
     const dragHandler = (files) => {
       if (files.length > 0) {
@@ -2823,7 +3031,9 @@ function renderFileElement(element, ctx, wrapper, pathKey) {
           pathKey,
           state,
           deps,
-          ctx.instance
+          ctx.instance,
+          allowedExts,
+          maxSizeMB
         );
       }
     };
@@ -2855,7 +3065,9 @@ function renderFileElement(element, ctx, wrapper, pathKey) {
           pathKey,
           state,
           deps,
-          ctx.instance
+          ctx.instance,
+          allowedExts,
+          maxSizeMB
         );
       }
     };
@@ -2915,12 +3127,18 @@ function renderFilesElement(element, ctx, wrapper, pathKey) {
     const initialFiles = ctx.prefill[element.key] || [];
     addPrefillFilesToIndex(initialFiles, state);
     const filesFieldHint = makeFieldHint(element, state);
+    const filesConstraints = {
+      maxCount: Infinity,
+      allowedExtensions: getAllowedExtensions(element.accept),
+      maxSize: element.maxSize ?? Infinity
+    };
     updateFilesList2();
     setupFilesDropHandler(
       filesContainer,
       initialFiles,
       state,
       updateFilesList2,
+      filesConstraints,
       pathKey,
       ctx.instance
     );
@@ -2929,6 +3147,7 @@ function renderFilesElement(element, ctx, wrapper, pathKey) {
       initialFiles,
       state,
       updateFilesList2,
+      filesConstraints,
       pathKey,
       ctx.instance
     );
@@ -2976,6 +3195,11 @@ function renderMultipleFileElement(element, ctx, wrapper, pathKey) {
     const initialFiles = Array.isArray(ctx.prefill[element.key]) ? [...ctx.prefill[element.key]] : [];
     addPrefillFilesToIndex(initialFiles, state);
     const multipleFilesHint = makeFieldHint(element, state);
+    const multipleConstraints = {
+      maxCount: maxFiles,
+      allowedExtensions: getAllowedExtensions(element.accept),
+      maxSize: element.maxSize ?? Infinity
+    };
     const buildCountInfo = () => {
       const countText = initialFiles.length === 1 ? t("fileCountSingle", state, { count: initialFiles.length }) : t("fileCountPlural", state, { count: initialFiles.length });
       const minMaxText = minFiles > 0 || maxFiles < Infinity ? ` ${t("fileCountRange", state, { min: minFiles, max: maxFiles })}` : "";
@@ -2999,6 +3223,7 @@ function renderMultipleFileElement(element, ctx, wrapper, pathKey) {
       initialFiles,
       state,
       updateFilesDisplay,
+      multipleConstraints,
       pathKey,
       ctx.instance
     );
@@ -3007,6 +3232,7 @@ function renderMultipleFileElement(element, ctx, wrapper, pathKey) {
       initialFiles,
       state,
       updateFilesDisplay,
+      multipleConstraints,
       pathKey,
       ctx.instance
     );
@@ -3033,6 +3259,38 @@ function validateFileElement(element, key, context) {
       errors.push(`${key2}: ${t("maxFiles", state, { max: maxFiles })}`);
     }
   };
+  const validateFileExtensions = (key2, resourceIds, element2) => {
+    if (skipValidation) return;
+    const { state } = context;
+    const acceptField = "accept" in element2 ? element2.accept : void 0;
+    const allowedExtensions = getAllowedExtensions(acceptField);
+    if (allowedExtensions.length === 0) return;
+    const formats = allowedExtensions.join(", ");
+    for (const rid of resourceIds) {
+      const meta = state.resourceIndex.get(rid);
+      const fileName = meta?.name ?? rid;
+      if (!isFileExtensionAllowed(fileName, allowedExtensions)) {
+        errors.push(
+          `${key2}: ${t("invalidFileExtension", state, { name: fileName, formats })}`
+        );
+      }
+    }
+  };
+  const validateFileSizes = (key2, resourceIds, element2) => {
+    if (skipValidation) return;
+    const { state } = context;
+    const maxSizeMB = "maxSize" in element2 ? element2.maxSize ?? Infinity : Infinity;
+    if (maxSizeMB === Infinity) return;
+    for (const rid of resourceIds) {
+      const meta = state.resourceIndex.get(rid);
+      if (!meta) continue;
+      if (meta.size > maxSizeMB * 1024 * 1024) {
+        errors.push(
+          `${key2}: ${t("fileTooLarge", state, { name: meta.name, maxSize: maxSizeMB })}`
+        );
+      }
+    }
+  };
   if (isMultipleField) {
     const fullKey = pathJoin(path, key);
     const pickerInput = scopeRoot.querySelector(
@@ -3051,6 +3309,8 @@ function validateFileElement(element, key, context) {
       });
     }
     validateFileCount(key, resourceIds, element);
+    validateFileExtensions(key, resourceIds, element);
+    validateFileSizes(key, resourceIds, element);
     return { value: resourceIds, errors };
   } else {
     const input = scopeRoot.querySelector(
@@ -3061,6 +3321,10 @@ function validateFileElement(element, key, context) {
       errors.push(`${key}: ${t("required", context.state)}`);
       return { value: null, errors };
     }
+    if (!skipValidation && rid !== "") {
+      validateFileExtensions(key, [rid], element);
+      validateFileSizes(key, [rid], element);
+    }
     return { value: rid || null, errors };
   }
 }
@@ -4248,7 +4512,10 @@ function renderSingleContainerElement(element, ctx, wrapper, pathKey) {
     state: ctx.state
   };
   element.elements.forEach((child) => {
-    if (!child.hidden) {
+    if (child.hidden || child.type === "hidden") {
+      const prefillVal = containerPrefill[child.key] ?? child.default ?? null;
+      itemsWrap.appendChild(createHiddenInput(pathJoin(subCtx.path, child.key), prefillVal));
+    } else {
       itemsWrap.appendChild(renderElement(child, subCtx));
     }
   });
@@ -4315,7 +4582,9 @@ function renderMultipleContainerElement(element, ctx, wrapper, _pathKey) {
           childWrapper.className = `grid grid-cols-${columns} gap-4`;
         }
         element.elements.forEach((child) => {
-          if (!child.hidden) {
+          if (child.hidden || child.type === "hidden") {
+            childWrapper.appendChild(createHiddenInput(pathJoin(subCtx.path, child.key), child.default ?? null));
+          } else {
             childWrapper.appendChild(renderElement(child, subCtx));
           }
         });
@@ -4384,7 +4653,10 @@ function renderMultipleContainerElement(element, ctx, wrapper, _pathKey) {
         childWrapper.className = `grid grid-cols-${columns} gap-4`;
       }
       element.elements.forEach((child) => {
-        if (!child.hidden) {
+        if (child.hidden || child.type === "hidden") {
+          const prefillVal = prefillObj?.[child.key] ?? child.default ?? null;
+          childWrapper.appendChild(createHiddenInput(pathJoin(subCtx.path, child.key), prefillVal));
+        } else {
           childWrapper.appendChild(renderElement(child, subCtx));
         }
       });
@@ -4434,7 +4706,9 @@ function renderMultipleContainerElement(element, ctx, wrapper, _pathKey) {
         childWrapper.className = `grid grid-cols-${columns} gap-4`;
       }
       element.elements.forEach((child) => {
-        if (!child.hidden) {
+        if (child.hidden || child.type === "hidden") {
+          childWrapper.appendChild(createHiddenInput(pathJoin(subCtx.path, child.key), child.default ?? null));
+        } else {
           childWrapper.appendChild(renderElement(child, subCtx));
         }
       });
@@ -4545,15 +4819,16 @@ function validateContainerElement(element, key, context) {
             );
           }
         }
-        if (child.hidden || child.type === "hidden") {
-          itemData[child.key] = child.default !== void 0 ? child.default : null;
+        const childKey = `${key}[${domIndex}].${child.key}`;
+        const childResult = validateElement(
+          { ...child, key: childKey },
+          { path },
+          itemContainer
+        );
+        if (childResult.spread && childResult.value !== null && typeof childResult.value === "object") {
+          Object.assign(itemData, childResult.value);
         } else {
-          const childKey = `${key}[${domIndex}].${child.key}`;
-          itemData[child.key] = validateElement(
-            { ...child, key: childKey },
-            { path },
-            itemContainer
-          );
+          itemData[child.key] = childResult.value;
         }
       });
       items.push(itemData);
@@ -4584,15 +4859,18 @@ function validateContainerElement(element, key, context) {
           );
         }
       }
-      if (child.hidden || child.type === "hidden") {
-        containerData[child.key] = child.default !== void 0 ? child.default : null;
-      } else {
+      {
         const childKey = `${key}.${child.key}`;
-        containerData[child.key] = validateElement(
+        const childResult = validateElement(
           { ...child, key: childKey },
           { path },
           containerContainer
         );
+        if (childResult.spread && childResult.value !== null && typeof childResult.value === "object") {
+          Object.assign(containerData, childResult.value);
+        } else {
+          containerData[child.key] = childResult.value;
+        }
       }
     });
     return { value: containerData, errors };
@@ -4613,11 +4891,23 @@ function updateContainerField(element, fieldPath, value, context) {
     value.forEach((itemValue, index) => {
       if (isPlainObject(itemValue)) {
         element.elements.forEach((childElement) => {
-          const childKey = childElement.key;
-          const childPath = `${fieldPath}[${index}].${childKey}`;
-          const childValue = itemValue[childKey];
-          if (childValue !== void 0) {
-            instance.updateField(childPath, childValue);
+          const childPath = `${fieldPath}[${index}].${childElement.key}`;
+          if (childElement.type === "richinput" && childElement.flatOutput) {
+            const richChild = childElement;
+            const textKey = richChild.textKey ?? "text";
+            const filesKey = richChild.filesKey ?? "files";
+            const containerValue = itemValue;
+            const compositeValue = {};
+            if (textKey in containerValue) compositeValue[textKey] = containerValue[textKey];
+            if (filesKey in containerValue) compositeValue[filesKey] = containerValue[filesKey];
+            if (Object.keys(compositeValue).length > 0) {
+              instance.updateField(childPath, compositeValue);
+            }
+          } else {
+            const childValue = itemValue[childElement.key];
+            if (childValue !== void 0) {
+              instance.updateField(childPath, childValue);
+            }
           }
         });
       }
@@ -4638,11 +4928,23 @@ function updateContainerField(element, fieldPath, value, context) {
       return;
     }
     element.elements.forEach((childElement) => {
-      const childKey = childElement.key;
-      const childPath = `${fieldPath}.${childKey}`;
-      const childValue = value[childKey];
-      if (childValue !== void 0) {
-        instance.updateField(childPath, childValue);
+      const childPath = `${fieldPath}.${childElement.key}`;
+      if (childElement.type === "richinput" && childElement.flatOutput) {
+        const richChild = childElement;
+        const textKey = richChild.textKey ?? "text";
+        const filesKey = richChild.filesKey ?? "files";
+        const containerValue = value;
+        const compositeValue = {};
+        if (textKey in containerValue) compositeValue[textKey] = containerValue[textKey];
+        if (filesKey in containerValue) compositeValue[filesKey] = containerValue[filesKey];
+        if (Object.keys(compositeValue).length > 0) {
+          instance.updateField(childPath, compositeValue);
+        }
+      } else {
+        const childValue = value[childElement.key];
+        if (childValue !== void 0) {
+          instance.updateField(childPath, childValue);
+        }
       }
     });
   }
@@ -6436,6 +6738,41 @@ function renderEditMode(element, ctx, wrapper, pathKey, initialValue) {
     outerDiv.style.borderColor = "var(--fb-border-color, #d1d5db)";
     outerDiv.style.boxShadow = "none";
   });
+  const errorEl = document.createElement("div");
+  errorEl.className = "fb-richinput-error";
+  errorEl.style.cssText = "display: none; color: var(--fb-error-color, #ef4444); font-size: var(--fb-font-size-small, 12px); padding: 4px 14px 8px;";
+  let errorTimer = null;
+  function showUploadError(message) {
+    errorEl.textContent = message;
+    errorEl.style.display = "block";
+    if (errorTimer) clearTimeout(errorTimer);
+    errorTimer = setTimeout(() => {
+      errorEl.style.display = "none";
+      errorEl.textContent = "";
+      errorTimer = null;
+    }, 5e3);
+  }
+  function validateFileForUpload(file) {
+    const allowedExtensions = getAllowedExtensions(element.accept);
+    if (!isFileExtensionAllowed(file.name, allowedExtensions)) {
+      const formats = allowedExtensions.join(", ");
+      showUploadError(
+        t("invalidFileExtension", state, { name: file.name, formats })
+      );
+      return false;
+    }
+    const maxSizeMB = element.maxSize ?? Infinity;
+    if (!isFileSizeAllowed(file, maxSizeMB)) {
+      showUploadError(
+        t("fileTooLarge", state, {
+          name: file.name,
+          maxSize: maxSizeMB
+        })
+      );
+      return false;
+    }
+    return true;
+  }
   let dragCounter = 0;
   outerDiv.addEventListener("dragenter", (e) => {
     e.preventDefault();
@@ -6463,7 +6800,17 @@ function renderEditMode(element, ctx, wrapper, pathKey, initialValue) {
     const droppedFiles = e.dataTransfer?.files;
     if (!droppedFiles || !state.config.uploadFile) return;
     const maxFiles = element.maxFiles ?? Infinity;
-    for (let i = 0; i < droppedFiles.length && files.length < maxFiles; i++) {
+    for (let i = 0; i < droppedFiles.length; i++) {
+      if (files.length >= maxFiles) {
+        showUploadError(
+          t("filesLimitExceeded", state, {
+            skipped: droppedFiles.length - i,
+            max: maxFiles
+          })
+        );
+        break;
+      }
+      if (!validateFileForUpload(droppedFiles[i])) continue;
       uploadFile(droppedFiles[i]);
     }
   });
@@ -6619,9 +6966,13 @@ function renderEditMode(element, ctx, wrapper, pathKey, initialValue) {
   });
   paperclipBtn.addEventListener("click", () => {
     const maxFiles = element.maxFiles ?? Infinity;
-    if (files.length < maxFiles) {
-      fileInput.click();
+    if (files.length >= maxFiles) {
+      showUploadError(
+        t("filesLimitExceeded", state, { skipped: 1, max: maxFiles })
+      );
+      return;
     }
+    fileInput.click();
   });
   const dropdown = document.createElement("div");
   dropdown.className = "fb-richinput-dropdown";
@@ -6929,7 +7280,17 @@ function renderEditMode(element, ctx, wrapper, pathKey, initialValue) {
     const selected = fileInput.files;
     if (!selected || selected.length === 0) return;
     const maxFiles = element.maxFiles ?? Infinity;
-    for (let i = 0; i < selected.length && files.length < maxFiles; i++) {
+    for (let i = 0; i < selected.length; i++) {
+      if (files.length >= maxFiles) {
+        showUploadError(
+          t("filesLimitExceeded", state, {
+            skipped: selected.length - i,
+            max: maxFiles
+          })
+        );
+        break;
+      }
+      if (!validateFileForUpload(selected[i])) continue;
       uploadFile(selected[i]);
     }
     fileInput.value = "";
@@ -6940,6 +7301,7 @@ function renderEditMode(element, ctx, wrapper, pathKey, initialValue) {
   textareaArea.appendChild(dropdown);
   outerDiv.appendChild(filesRow);
   outerDiv.appendChild(textareaArea);
+  outerDiv.appendChild(errorEl);
   if (element.minLength != null || element.maxLength != null) {
     const counterRow = document.createElement("div");
     counterRow.style.cssText = "position: relative; padding: 2px 14px 6px; text-align: right;";
@@ -7099,20 +7461,29 @@ function renderRichInputElement(element, ctx, wrapper, pathKey) {
   const state = ctx.state;
   const textKey = element.textKey ?? "text";
   const filesKey = element.filesKey ?? "files";
-  const rawPrefill = ctx.prefill[element.key];
   let initialValue;
-  if (rawPrefill && typeof rawPrefill === "object" && !Array.isArray(rawPrefill)) {
-    const obj = rawPrefill;
-    const textVal = obj[textKey] ?? obj["text"];
-    const filesVal = obj[filesKey] ?? obj["files"];
+  if (element.flatOutput) {
+    const textVal = ctx.prefill[textKey];
+    const filesVal = ctx.prefill[filesKey];
     initialValue = {
       text: typeof textVal === "string" ? textVal : null,
       files: Array.isArray(filesVal) ? filesVal : []
     };
-  } else if (typeof rawPrefill === "string") {
-    initialValue = { text: rawPrefill || null, files: [] };
   } else {
-    initialValue = { text: null, files: [] };
+    const rawPrefill = ctx.prefill[element.key];
+    if (rawPrefill && typeof rawPrefill === "object" && !Array.isArray(rawPrefill)) {
+      const obj = rawPrefill;
+      const textVal = obj[textKey] ?? obj["text"];
+      const filesVal = obj[filesKey] ?? obj["files"];
+      initialValue = {
+        text: typeof textVal === "string" ? textVal : null,
+        files: Array.isArray(filesVal) ? filesVal : []
+      };
+    } else if (typeof rawPrefill === "string") {
+      initialValue = { text: rawPrefill || null, files: [] };
+    } else {
+      initialValue = { text: null, files: [] };
+    }
   }
   for (const rid of initialValue.files) {
     if (!state.resourceIndex.has(rid)) {
@@ -7192,7 +7563,7 @@ function validateRichInputElement(element, key, context) {
       );
     }
   }
-  return { value, errors };
+  return { value, errors, spread: !!element.flatOutput };
 }
 function updateRichInputField(element, fieldPath, value, context) {
   const { scopeRoot } = context;
@@ -7668,6 +8039,9 @@ var defaultConfig = {
       invalidHexColour: "Invalid hex color",
       minFiles: "Minimum {min} files required",
       maxFiles: "Maximum {max} files allowed",
+      invalidFileExtension: 'File "{name}" has unsupported format. Allowed: {formats}',
+      fileTooLarge: 'File "{name}" exceeds maximum size of {maxSize}MB',
+      filesLimitExceeded: "{skipped} file(s) skipped: maximum {max} files allowed",
       unsupportedFieldType: "Unsupported field type: {type}",
       invalidOption: "Invalid option",
       tableAddRow: "Add row",
@@ -7727,6 +8101,9 @@ var defaultConfig = {
       invalidHexColour: "\u041D\u0435\u0432\u0435\u0440\u043D\u044B\u0439 \u0444\u043E\u0440\u043C\u0430\u0442 \u0446\u0432\u0435\u0442\u0430",
       minFiles: "\u041C\u0438\u043D\u0438\u043C\u0443\u043C {min} \u0444\u0430\u0439\u043B\u043E\u0432",
       maxFiles: "\u041C\u0430\u043A\u0441\u0438\u043C\u0443\u043C {max} \u0444\u0430\u0439\u043B\u043E\u0432",
+      invalidFileExtension: '\u0424\u0430\u0439\u043B "{name}" \u0438\u043C\u0435\u0435\u0442 \u043D\u0435\u043F\u043E\u0434\u0434\u0435\u0440\u0436\u0438\u0432\u0430\u0435\u043C\u044B\u0439 \u0444\u043E\u0440\u043C\u0430\u0442. \u0414\u043E\u043F\u0443\u0441\u0442\u0438\u043C\u044B\u0435: {formats}',
+      fileTooLarge: '\u0424\u0430\u0439\u043B "{name}" \u043F\u0440\u0435\u0432\u044B\u0448\u0430\u0435\u0442 \u043C\u0430\u043A\u0441\u0438\u043C\u0430\u043B\u044C\u043D\u044B\u0439 \u0440\u0430\u0437\u043C\u0435\u0440 {maxSize}\u041C\u0411',
+      filesLimitExceeded: "{skipped} \u0444\u0430\u0439\u043B(\u043E\u0432) \u043F\u0440\u043E\u043F\u0443\u0449\u0435\u043D\u043E: \u043C\u0430\u043A\u0441\u0438\u043C\u0443\u043C {max} \u0444\u0430\u0439\u043B\u043E\u0432",
       unsupportedFieldType: "\u041D\u0435\u043F\u043E\u0434\u0434\u0435\u0440\u0436\u0438\u0432\u0430\u0435\u043C\u044B\u0439 \u0442\u0438\u043F \u043F\u043E\u043B\u044F: {type}",
       invalidOption: "\u041D\u0435\u0434\u043E\u043F\u0443\u0441\u0442\u0438\u043C\u043E\u0435 \u0437\u043D\u0430\u0447\u0435\u043D\u0438\u0435",
       tableAddRow: "\u0414\u043E\u0431\u0430\u0432\u0438\u0442\u044C \u0441\u0442\u0440\u043E\u043A\u0443",
@@ -7771,7 +8148,8 @@ function createInstanceState(config) {
       ...config,
       translations: mergedTranslations
     },
-    debounceTimer: null
+    debounceTimer: null,
+    prefill: {}
   };
 }
 function generateInstanceId() {
@@ -7969,6 +8347,26 @@ function applyActionButtonStyles(button, isFormLevel = false) {
 }
 
 // src/components/registry.ts
+function validateHiddenElement(element, key, context) {
+  const { scopeRoot } = 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: [] };
+}
+function updateHiddenField(_element, fieldPath, value, context) {
+  const { scopeRoot } = context;
+  const input = scopeRoot.querySelector(
+    `input[type="hidden"][data-hidden-field="true"][name="${fieldPath}"]`
+  );
+  if (!input) return;
+  input.value = serializeHiddenValue(value);
+}
 var componentRegistry = {
   text: {
     validate: validateTextElement,
@@ -8023,6 +8421,11 @@ var componentRegistry = {
   richinput: {
     validate: validateRichInputElement,
     update: updateRichInputField
+  },
+  hidden: {
+    // Legacy type: `type: "hidden"` — reads/writes DOM <input type="hidden"> element
+    validate: validateHiddenElement,
+    update: updateHiddenField
   }
 };
 function getComponentOperations(elementType) {
@@ -8432,6 +8835,7 @@ var FormBuilderInstance = class {
     this.state.formRoot = root;
     this.state.schema = schema;
     this.state.externalActions = actions || null;
+    this.state.prefill = prefill || {};
     clear(root);
     root.setAttribute("data-fb-root", "true");
     injectThemeVariables(root, this.state.config.theme);
@@ -8449,7 +8853,9 @@ var FormBuilderInstance = class {
       fieldsWrapper.className = `grid grid-cols-${columns} gap-4`;
     }
     schema.elements.forEach((element) => {
-      if (element.hidden) {
+      if (element.hidden || element.type === "hidden") {
+        const val = prefill?.[element.key] ?? element.default ?? null;
+        fieldsWrapper.appendChild(createHiddenInput(element.key, val));
         return;
       }
       const block = renderElement2(element, {
@@ -8498,10 +8904,10 @@ var FormBuilderInstance = class {
       );
       if (componentResult !== null) {
         errors.push(...componentResult.errors);
-        return componentResult.value;
+        return { value: componentResult.value, spread: !!componentResult.spread };
       }
       console.warn(`Unknown field type "${element.type}" for key "${key}"`);
-      return null;
+      return { value: null, spread: false };
     };
     setValidateElement(validateElement2);
     this.state.schema.elements.forEach((element) => {
@@ -8521,10 +8927,23 @@ var FormBuilderInstance = class {
           );
         }
       }
-      if (element.hidden) {
-        data[element.key] = element.default !== void 0 ? element.default : null;
+      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 {
-        data[element.key] = validateElement2(element, { path: "" });
+        const result = validateElement2(element, { path: "" });
+        if (result.spread && result.value !== null && typeof result.value === "object") {
+          Object.assign(data, result.value);
+        } else {
+          data[element.key] = result.value;
+        }
       }
     });
     return {
@@ -8618,6 +9037,23 @@ var FormBuilderInstance = class {
     }
     return data;
   }
+  /**
+   * Build a map from flat output keys (textKey/filesKey) to the richinput schema element info.
+   * Used by setFormData to detect flat richinput keys and remap them to their composite values.
+   */
+  buildFlatKeyMap(elements) {
+    const map = /* @__PURE__ */ new Map();
+    for (const el of elements) {
+      if (el.type === "richinput" && el.flatOutput) {
+        const richEl = el;
+        const textKey = richEl.textKey ?? "text";
+        const filesKey = richEl.filesKey ?? "files";
+        map.set(textKey, { schemaKey: el.key, role: "text" });
+        map.set(filesKey, { schemaKey: el.key, role: "files" });
+      }
+    }
+    return map;
+  }
   /**
    * Set form data - update multiple fields without full re-render
    * @param data - Object with field paths and their values
@@ -8629,8 +9065,21 @@ var FormBuilderInstance = class {
       );
       return;
     }
+    const flatKeyMap = this.buildFlatKeyMap(this.state.schema.elements);
+    const flatUpdates = /* @__PURE__ */ new Map();
     for (const fieldPath in data) {
-      this.updateField(fieldPath, data[fieldPath]);
+      const flatInfo = flatKeyMap.get(fieldPath);
+      if (flatInfo) {
+        if (!flatUpdates.has(flatInfo.schemaKey)) {
+          flatUpdates.set(flatInfo.schemaKey, {});
+        }
+        flatUpdates.get(flatInfo.schemaKey)[fieldPath] = data[fieldPath];
+      } else {
+        this.updateField(fieldPath, data[fieldPath]);
+      }
+    }
+    for (const [schemaKey, compositeValue] of flatUpdates) {
+      this.updateField(schemaKey, compositeValue);
     }
   }
   /**