@dmitryvim/form-builder 0.1.31 → 0.1.34

package/dist/form-builder.js

@@ -1,4 +1,56 @@
 // Form Builder Library - Core API
+
+// Object URL management for memory leak prevention
+const objectUrlIndex = new Map();
+
+function createObjectURL(file, resourceIdParam) {
+  // Revoke previous URL for this resource to prevent memory leaks
+  revokeObjectURL(resourceIdParam);
+
+  const url = URL.createObjectURL(file);
+  objectUrlIndex.set(resourceIdParam, url);
+  return url;
+}
+
+function revokeObjectURL(resourceIdParam) {
+  const url = objectUrlIndex.get(resourceIdParam);
+  if (url) {
+    URL.revokeObjectURL(url);
+    objectUrlIndex.delete(resourceIdParam);
+  }
+}
+
+function revokeAllObjectURLs() {
+  for (const [, url] of objectUrlIndex.entries()) {
+    URL.revokeObjectURL(url);
+  }
+  objectUrlIndex.clear();
+}
+
+// Helper function to create safe preview elements
+function createPreviewElement(icon, fileName) {
+  const wrapper = document.createElement("div");
+  wrapper.className =
+    "aspect-video flex items-center justify-center text-gray-400";
+
+  const textCenter = document.createElement("div");
+  textCenter.className = "text-center";
+
+  const iconEl = document.createElement("div");
+  iconEl.className = "text-4xl mb-2";
+  iconEl.textContent = icon;
+
+  const nameEl = document.createElement("div");
+  nameEl.className = "text-sm";
+  nameEl.textContent = fileName || "";
+
+  textCenter.appendChild(iconEl);
+  textCenter.appendChild(nameEl);
+  wrapper.appendChild(textCenter);
+
+  return wrapper;
+}
+
 // State management
 const state = {
   schema: null,
@@ -142,12 +194,18 @@ function renderForm(schema, prefill) {
     return;
   }
 
+  // Clean up any existing object URLs before clearing form
+  revokeAllObjectURLs();
   clear(state.formRoot);
 
   const formEl = document.createElement("div");
   formEl.className = "space-y-6";
 
   schema.elements.forEach((element, _index) => {
+    // Skip rendering hidden elements
+    if (element.hidden) {
+      return;
+    }
     const block = renderElement(element, {
       path: "",
       prefill: prefill || {},
@@ -180,8 +238,17 @@ function renderElement(element, ctx) {
     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>';
+    // Create SVG icon safely
+    const svg = document.createElementNS("http://www.w3.org/2000/svg", "svg");
+    svg.setAttribute("class", "w-4 h-4");
+    svg.setAttribute("fill", "currentColor");
+    svg.setAttribute("viewBox", "0 0 24 24");
+
+    const path = document.createElementNS("http://www.w3.org/2000/svg", "path");
+    path.setAttribute("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.appendChild(path);
+    infoBtn.appendChild(svg);
 
     // Create tooltip
     const tooltipId = `tooltip-${element.key}-${Math.random().toString(36).substr(2, 9)}`;
@@ -209,23 +276,44 @@ function renderElement(element, ctx) {
 
   switch (element.type) {
     case "text":
-      renderTextElement(element, ctx, wrapper, pathKey);
+      if (element.multiple) {
+        renderMultipleTextElement(element, ctx, wrapper, pathKey);
+      } else {
+        renderTextElement(element, ctx, wrapper, pathKey);
+      }
       break;
 
     case "textarea":
-      renderTextareaElement(element, ctx, wrapper, pathKey);
+      if (element.multiple) {
+        renderMultipleTextareaElement(element, ctx, wrapper, pathKey);
+      } else {
+        renderTextareaElement(element, ctx, wrapper, pathKey);
+      }
       break;
 
     case "number":
-      renderNumberElement(element, ctx, wrapper, pathKey);
+      if (element.multiple) {
+        renderMultipleNumberElement(element, ctx, wrapper, pathKey);
+      } else {
+        renderNumberElement(element, ctx, wrapper, pathKey);
+      }
       break;
 
     case "select":
-      renderSelectElement(element, ctx, wrapper, pathKey);
+      if (element.multiple) {
+        renderMultipleSelectElement(element, ctx, wrapper, pathKey);
+      } else {
+        renderSelectElement(element, ctx, wrapper, pathKey);
+      }
       break;
 
     case "file":
-      renderFileElement(element, ctx, wrapper, pathKey);
+      // Handle multiple files with file type using multiple property
+      if (element.multiple) {
+        renderMultipleFileElement(element, ctx, wrapper, pathKey);
+      } else {
+        renderFileElement(element, ctx, wrapper, pathKey);
+      }
       break;
 
     case "files":
@@ -236,6 +324,15 @@ function renderElement(element, ctx) {
       renderGroupElement(element, ctx, wrapper, pathKey);
       break;
 
+    case "container":
+      // Handle containers with multiple property like groups
+      if (element.multiple) {
+        renderMultipleContainerElement(element, ctx, wrapper, pathKey);
+      } else {
+        renderSingleContainerElement(element, ctx, wrapper, pathKey);
+      }
+      break;
+
     default: {
       const unsupported = document.createElement("div");
       unsupported.className = "text-red-500 text-sm";
@@ -382,8 +479,8 @@ async function renderFilePreview(container, resourceId, options = {}) {
       reader.readAsDataURL(meta.file);
       container.appendChild(img);
     } else if (meta.type && meta.type.startsWith("video/")) {
-      // Video file - use object URL for preview
-      const videoUrl = URL.createObjectURL(meta.file);
+      // Video file - use managed object URL for preview
+      const videoUrl = createObjectURL(meta.file, resourceId);
 
       // Remove all conflicting handlers to prevent interference with video controls
       container.onclick = null;
@@ -393,39 +490,55 @@ async function renderFilePreview(container, resourceId, options = {}) {
       container.parentNode.replaceChild(newContainer, container);
       container = newContainer;
 
-      container.innerHTML = `
-        <div class="relative group h-full">
-          <video class="w-full h-full object-contain" controls preload="auto" muted>
-            <source src="${videoUrl}" type="${meta.type}">
-            Your browser does not support the video tag.
-          </video>
-          <div class="absolute top-2 right-2 opacity-0 group-hover:opacity-100 transition-opacity z-10 flex gap-1">
-            <button class="bg-red-600 bg-opacity-75 hover:bg-opacity-90 text-white p-1 rounded text-xs delete-file-btn">
-              ${t("removeElement")}
-            </button>
-            <button class="bg-gray-800 bg-opacity-75 hover:bg-opacity-90 text-white p-1 rounded text-xs change-file-btn">
-              Change
-            </button>
-          </div>
-        </div>
-      `;
+      // Create video container safely
+      clear(container);
+
+      const wrapper = document.createElement("div");
+      wrapper.className = "relative group h-full";
+
+      const video = document.createElement("video");
+      video.className = "w-full h-full object-contain";
+      video.controls = true;
+      video.preload = "auto";
+      video.muted = true;
+
+      const source = document.createElement("source");
+      source.src = videoUrl;
+      source.type = meta.type;
+
+      const fallback = document.createTextNode("Your browser does not support the video tag.");
+      video.appendChild(source);
+      video.appendChild(fallback);
+
+      const buttonsContainer = document.createElement("div");
+      buttonsContainer.className = "absolute top-2 right-2 opacity-0 group-hover:opacity-100 transition-opacity z-10 flex gap-1";
+
+      const deleteBtn = document.createElement("button");
+      deleteBtn.className = "bg-red-600 bg-opacity-75 hover:bg-opacity-90 text-white p-1 rounded text-xs delete-file-btn";
+      deleteBtn.textContent = t("removeElement");
+
+      const changeBtn = document.createElement("button");
+      changeBtn.className = "bg-gray-800 bg-opacity-75 hover:bg-opacity-90 text-white p-1 rounded text-xs change-file-btn";
+      changeBtn.textContent = "Change";
+
+      buttonsContainer.appendChild(deleteBtn);
+      buttonsContainer.appendChild(changeBtn);
+      wrapper.appendChild(video);
+      wrapper.appendChild(buttonsContainer);
+      container.appendChild(wrapper);
 
       // Add click handlers to the custom buttons
-      const changeBtn = container.querySelector(".change-file-btn");
-      if (changeBtn) {
-        changeBtn.onclick = (e) => {
-          e.stopPropagation();
-          if (deps?.picker) {
-            deps.picker.click();
-          }
-        };
-      }
+      changeBtn.onclick = (e) => {
+        e.stopPropagation();
+        if (deps?.picker) {
+          deps.picker.click();
+        }
+      };
 
-      const deleteBtn = container.querySelector(".delete-file-btn");
-      if (deleteBtn) {
-        deleteBtn.onclick = (e) => {
+      deleteBtn.onclick = (e) => {
           e.stopPropagation();
-          // Clear the file
+          // Clear the file and revoke object URL
+          revokeObjectURL(resourceId);
           state.resourceIndex.delete(resourceId);
           // Update hidden input
           const hiddenInput = container.parentElement.querySelector(
@@ -441,27 +554,55 @@ async function renderFilePreview(container, resourceId, options = {}) {
           if (deps?.dragHandler) {
             setupDragAndDrop(container, deps.dragHandler);
           }
-          container.innerHTML = `
-            <div class="flex flex-col items-center justify-center h-full text-gray-400">
-              <svg class="w-6 h-6 mb-2" fill="currentColor" viewBox="0 0 24 24">
-                <path d="M21 19V5c0-1.1-.9-2-2-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2zM8.5 13.5l2.5 3.01L14.5 12l4.5 6H5l3.5-4.5z"/>
-              </svg>
-              <div class="text-sm text-center">${t("clickDragText")}</div>
-            </div>
-          `;
+          // Create placeholder content safely
+          clear(container);
+
+          const wrapper = document.createElement("div");
+          wrapper.className = "flex flex-col items-center justify-center h-full text-gray-400";
+
+          const svg = document.createElementNS("http://www.w3.org/2000/svg", "svg");
+          svg.setAttribute("class", "w-6 h-6 mb-2");
+          svg.setAttribute("fill", "currentColor");
+          svg.setAttribute("viewBox", "0 0 24 24");
+
+          const path = document.createElementNS("http://www.w3.org/2000/svg", "path");
+          path.setAttribute("d", "M21 19V5c0-1.1-.9-2-2-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2zM8.5 13.5l2.5 3.01L14.5 12l4.5 6H5l3.5-4.5z");
+
+          svg.appendChild(path);
+
+          const textDiv = document.createElement("div");
+          textDiv.className = "text-sm text-center";
+          textDiv.textContent = t("clickDragText");
+
+          wrapper.appendChild(svg);
+          wrapper.appendChild(textDiv);
+          container.appendChild(wrapper);
         };
-      }
     } else {
-      // Non-image, non-video file
-      container.innerHTML = `<div class="flex flex-col items-center justify-center h-full text-gray-400"><div class="text-2xl mb-2">📁</div><div class="text-sm">${
-        fileName
-      }</div></div>`;
+      // Non-image, non-video file - create elements safely
+      const wrapper = document.createElement("div");
+      wrapper.className =
+        "flex flex-col items-center justify-center h-full text-gray-400";
+
+      const icon = document.createElement("div");
+      icon.className = "text-2xl mb-2";
+      icon.textContent = "📁";
+
+      const nameEl = document.createElement("div");
+      nameEl.className = "text-sm";
+      nameEl.textContent = fileName || "";
+
+      wrapper.appendChild(icon);
+      wrapper.appendChild(nameEl);
+      clear(container);
+      container.appendChild(wrapper);
     }
 
     // Add delete button for edit mode (except for videos which have custom buttons)
     if (!isReadonly && !(meta && meta.type && meta.type.startsWith("video/"))) {
       addDeleteButton(container, () => {
-        // Clear the file
+        // Clear the file and revoke object URL
+        revokeObjectURL(resourceId);
         state.resourceIndex.delete(resourceId);
         // Update hidden input
         const hiddenInput = container.parentElement.querySelector(
@@ -470,15 +611,29 @@ async function renderFilePreview(container, resourceId, options = {}) {
         if (hiddenInput) {
           hiddenInput.value = "";
         }
-        // Clear preview and show placeholder
-        container.innerHTML = `
-                    <div class="flex flex-col items-center justify-center h-full text-gray-400">
-                        <svg class="w-6 h-6 mb-2" fill="currentColor" viewBox="0 0 24 24">
-                            <path d="M21 19V5c0-1.1-.9-2-2-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2zM8.5 13.5l2.5 3.01L14.5 12l4.5 6H5l3.5-4.5z"/>
-                        </svg>
-                        <div class="text-sm text-center">${t("clickDragText")}</div>
-                    </div>
-                `;
+        // Clear preview and show placeholder safely
+        clear(container);
+
+        const wrapper = document.createElement("div");
+        wrapper.className = "flex flex-col items-center justify-center h-full text-gray-400";
+
+        const svg = document.createElementNS("http://www.w3.org/2000/svg", "svg");
+        svg.setAttribute("class", "w-6 h-6 mb-2");
+        svg.setAttribute("fill", "currentColor");
+        svg.setAttribute("viewBox", "0 0 24 24");
+
+        const path = document.createElementNS("http://www.w3.org/2000/svg", "path");
+        path.setAttribute("d", "M21 19V5c0-1.1-.9-2-2-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2zM8.5 13.5l2.5 3.01L14.5 12l4.5 6H5l3.5-4.5z");
+
+        svg.appendChild(path);
+
+        const textDiv = document.createElement("div");
+        textDiv.className = "text-sm text-center";
+        textDiv.textContent = t("clickDragText");
+
+        wrapper.appendChild(svg);
+        wrapper.appendChild(textDiv);
+        container.appendChild(wrapper);
       });
     }
   } else if (state.config.getThumbnail) {
@@ -491,21 +646,50 @@ async function renderFilePreview(container, resourceId, options = {}) {
         container.appendChild(img);
       } else {
         // Fallback to file icon
-        container.innerHTML = `<div class="flex flex-col items-center justify-center h-full text-gray-400"><div class="text-2xl mb-2">🖼️</div><div class="text-sm">${
-          fileName
-        }</div></div>`;
+        // Create elements safely
+        const wrapper = document.createElement("div");
+        wrapper.className =
+          "flex flex-col items-center justify-center h-full text-gray-400";
+
+        const icon = document.createElement("div");
+        icon.className = "text-2xl mb-2";
+        icon.textContent = "🖼️";
+
+        const nameEl = document.createElement("div");
+        nameEl.className = "text-sm";
+        nameEl.textContent = fileName || "";
+
+        wrapper.appendChild(icon);
+        wrapper.appendChild(nameEl);
+        clear(container);
+        container.appendChild(wrapper);
       }
     } catch (error) {
       console.warn("Thumbnail loading failed:", error);
-      container.innerHTML = `<div class="flex flex-col items-center justify-center h-full text-gray-400"><div class="text-2xl mb-2">📁</div><div class="text-sm">${
-        fileName
-      }</div></div>`;
+      // Create elements safely
+      const wrapper = document.createElement("div");
+      wrapper.className =
+        "flex flex-col items-center justify-center h-full text-gray-400";
+
+      const icon = document.createElement("div");
+      icon.className = "text-2xl mb-2";
+      icon.textContent = "📁";
+
+      const nameEl = document.createElement("div");
+      nameEl.className = "text-sm";
+      nameEl.textContent = fileName || "";
+
+      wrapper.appendChild(icon);
+      wrapper.appendChild(nameEl);
+      clear(container);
+      container.appendChild(wrapper);
     }
 
     // Add delete button for edit mode
     if (!isReadonly) {
       addDeleteButton(container, () => {
-        // Clear the file
+        // Clear the file and revoke object URL
+        revokeObjectURL(resourceId);
         state.resourceIndex.delete(resourceId);
         // Update hidden input
         const hiddenInput = container.parentElement.querySelector(
@@ -514,22 +698,35 @@ async function renderFilePreview(container, resourceId, options = {}) {
         if (hiddenInput) {
           hiddenInput.value = "";
         }
-        // Clear preview and show placeholder
-        container.innerHTML = `
-                    <div class="flex flex-col items-center justify-center h-full text-gray-400">
-                        <svg class="w-6 h-6 mb-2" fill="currentColor" viewBox="0 0 24 24">
-                            <path d="M21 19V5c0-1.1-.9-2-2-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2zM8.5 13.5l2.5 3.01L14.5 12l4.5 6H5l3.5-4.5z"/>
-                        </svg>
-                        <div class="text-sm text-center">${t("clickDragText")}</div>
-                    </div>
-                `;
+        // Clear preview and show placeholder safely
+        clear(container);
+
+        const wrapper = document.createElement("div");
+        wrapper.className = "flex flex-col items-center justify-center h-full text-gray-400";
+
+        const svg = document.createElementNS("http://www.w3.org/2000/svg", "svg");
+        svg.setAttribute("class", "w-6 h-6 mb-2");
+        svg.setAttribute("fill", "currentColor");
+        svg.setAttribute("viewBox", "0 0 24 24");
+
+        const path = document.createElementNS("http://www.w3.org/2000/svg", "path");
+        path.setAttribute("d", "M21 19V5c0-1.1-.9-2-2-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2zM8.5 13.5l2.5 3.01L14.5 12l4.5 6H5l3.5-4.5z");
+
+        svg.appendChild(path);
+
+        const textDiv = document.createElement("div");
+        textDiv.className = "text-sm text-center";
+        textDiv.textContent = t("clickDragText");
+
+        wrapper.appendChild(svg);
+        wrapper.appendChild(textDiv);
+        container.appendChild(wrapper);
       });
     }
   } else {
-    // No file and no getThumbnail config - fallback
-    container.innerHTML = `<div class="flex flex-col items-center justify-center h-full text-gray-400"><div class="text-2xl mb-2">🖼️</div><div class="text-sm">${
-      fileName
-    }</div></div>`;
+    // No file and no getThumbnail config - fallback - create elements safely
+    clear(container);
+    container.appendChild(createPreviewElement("🖼️", fileName));
   }
 
   // Add click handler for download in readonly mode
@@ -580,8 +777,15 @@ function renderResourcePills(container, rids, onRemove) {
 
       // Add click handler to each slot
       slot.onclick = () => {
-        // Look for file input in the files wrapper (go up from list -> filesContainer -> filesWrapper)
-        const filesWrapper = container.closest(".space-y-2");
+        // Look for file input - check parent containers that have space-y-2 class
+        let filesWrapper = container.parentElement;
+        while (filesWrapper && !filesWrapper.classList.contains("space-y-2")) {
+          filesWrapper = filesWrapper.parentElement;
+        }
+        // If no parent with space-y-2, container itself might be the wrapper
+        if (!filesWrapper && container.classList.contains("space-y-2")) {
+          filesWrapper = container;
+        }
         const fileInput = filesWrapper?.querySelector('input[type="file"]');
         if (fileInput) fileInput.click();
       };
@@ -598,8 +802,15 @@ function renderResourcePills(container, rids, onRemove) {
     uploadLink.textContent = t("uploadText");
     uploadLink.onclick = (e) => {
       e.stopPropagation();
-      // Look for file input in the files wrapper (go up from list -> filesContainer -> filesWrapper)
-      const filesWrapper = container.closest(".space-y-2");
+      // Look for file input - check parent containers that have space-y-2 class
+      let filesWrapper = container.parentElement;
+      while (filesWrapper && !filesWrapper.classList.contains("space-y-2")) {
+        filesWrapper = filesWrapper.parentElement;
+      }
+      // If no parent with space-y-2, container itself might be the wrapper
+      if (!filesWrapper && container.classList.contains("space-y-2")) {
+        filesWrapper = container;
+      }
       const fileInput = filesWrapper?.querySelector('input[type="file"]');
       if (fileInput) fileInput.click();
     };
@@ -662,76 +873,179 @@ function renderResourcePills(container, rids, onRemove) {
             img.src = url;
             slot.appendChild(img);
           } else {
-            slot.innerHTML = `<div class="flex flex-col items-center justify-center h-full text-gray-400">
-                            <svg class="w-12 h-12" fill="currentColor" viewBox="0 0 24 24">
-                                <path d="M21 19V5c0-1.1-.9-2-2-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2zM8.5 13.5l2.5 3.01L14.5 12l4.5 6H5l3.5-4.5z"/>
-                            </svg>
-                        </div>`;
+            // Create fallback placeholder safely
+            const wrapper = document.createElement("div");
+            wrapper.className = "flex flex-col items-center justify-center h-full text-gray-400";
+
+            const svg = document.createElementNS("http://www.w3.org/2000/svg", "svg");
+            svg.setAttribute("class", "w-12 h-12");
+            svg.setAttribute("fill", "currentColor");
+            svg.setAttribute("viewBox", "0 0 24 24");
+
+            const path = document.createElementNS("http://www.w3.org/2000/svg", "path");
+            path.setAttribute("d", "M21 19V5c0-1.1-.9-2-2-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2zM8.5 13.5l2.5 3.01L14.5 12l4.5 6H5l3.5-4.5z");
+
+            svg.appendChild(path);
+            wrapper.appendChild(svg);
+            slot.appendChild(wrapper);
           }
         } else {
-          slot.innerHTML = `<div class="flex flex-col items-center justify-center h-full text-gray-400">
-                        <svg class="w-12 h-12" fill="currentColor" viewBox="0 0 24 24">
-                            <path d="M21 19V5c0-1.1-.9-2-2-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2zM8.5 13.5l2.5 3.01L14.5 12l4.5 6H5l3.5-4.5z"/>
-                        </svg>
-                    </div>`;
+          // Create fallback placeholder safely
+          const wrapper = document.createElement("div");
+          wrapper.className = "flex flex-col items-center justify-center h-full text-gray-400";
+
+          const svg = document.createElementNS("http://www.w3.org/2000/svg", "svg");
+          svg.setAttribute("class", "w-12 h-12");
+          svg.setAttribute("fill", "currentColor");
+          svg.setAttribute("viewBox", "0 0 24 24");
+
+          const path = document.createElementNS("http://www.w3.org/2000/svg", "path");
+          path.setAttribute("d", "M21 19V5c0-1.1-.9-2-2-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2zM8.5 13.5l2.5 3.01L14.5 12l4.5 6H5l3.5-4.5z");
+
+          svg.appendChild(path);
+          wrapper.appendChild(svg);
+          slot.appendChild(wrapper);
         }
       } else if (meta && meta.type?.startsWith("video/")) {
         if (meta.file && meta.file instanceof File) {
-          // Video file - use object URL for preview in thumbnail format
-          const videoUrl = URL.createObjectURL(meta.file);
-          slot.innerHTML = `
-            <div class="relative group h-full w-full">
-              <video class="w-full h-full object-contain" preload="metadata" muted>
-                <source src="${videoUrl}" type="${meta.type}">
-              </video>
-              <div class="absolute inset-0 bg-black bg-opacity-30 flex items-center justify-center">
-                <div class="bg-white bg-opacity-90 rounded-full p-1">
-                  <svg class="w-4 h-4 text-gray-800" fill="currentColor" viewBox="0 0 24 24">
-                    <path d="M8 5v14l11-7z"/>
-                  </svg>
-                </div>
-              </div>
-            </div>
-          `;
+          // Video file - use managed object URL for preview in thumbnail format
+          const videoUrl = createObjectURL(meta.file, rid);
+          // Create video thumbnail safely
+          const wrapper = document.createElement("div");
+          wrapper.className = "relative group h-full w-full";
+
+          const video = document.createElement("video");
+          video.className = "w-full h-full object-contain";
+          video.preload = "metadata";
+          video.muted = true;
+
+          const source = document.createElement("source");
+          source.src = videoUrl;
+          source.type = meta.type;
+
+          video.appendChild(source);
+
+          const overlay = document.createElement("div");
+          overlay.className = "absolute inset-0 bg-black bg-opacity-30 flex items-center justify-center";
+
+          const playButton = document.createElement("div");
+          playButton.className = "bg-white bg-opacity-90 rounded-full p-1";
+
+          const playIcon = document.createElementNS("http://www.w3.org/2000/svg", "svg");
+          playIcon.setAttribute("class", "w-4 h-4 text-gray-800");
+          playIcon.setAttribute("fill", "currentColor");
+          playIcon.setAttribute("viewBox", "0 0 24 24");
+
+          const playPath = document.createElementNS("http://www.w3.org/2000/svg", "path");
+          playPath.setAttribute("d", "M8 5v14l11-7z");
+
+          playIcon.appendChild(playPath);
+          playButton.appendChild(playIcon);
+          overlay.appendChild(playButton);
+          wrapper.appendChild(video);
+          wrapper.appendChild(overlay);
+          slot.appendChild(wrapper);
         } else if (state.config.getThumbnail) {
           // Use getThumbnail for uploaded video files
           const videoUrl = state.config.getThumbnail(rid);
           if (videoUrl) {
-            slot.innerHTML = `
-              <div class="relative group h-full w-full">
-                <video class="w-full h-full object-contain" preload="metadata" muted>
-                  <source src="${videoUrl}" type="${meta.type}">
-                </video>
-                <div class="absolute inset-0 bg-black bg-opacity-30 flex items-center justify-center">
-                  <div class="bg-white bg-opacity-90 rounded-full p-1">
-                    <svg class="w-4 h-4 text-gray-800" fill="currentColor" viewBox="0 0 24 24">
-                      <path d="M8 5v14l11-7z"/>
-                    </svg>
-                  </div>
-                </div>
-              </div>
-            `;
+            // Create video thumbnail safely
+            const wrapper = document.createElement("div");
+            wrapper.className = "relative group h-full w-full";
+
+            const video = document.createElement("video");
+            video.className = "w-full h-full object-contain";
+            video.preload = "metadata";
+            video.muted = true;
+
+            const source = document.createElement("source");
+            source.src = videoUrl;
+            source.type = meta.type;
+
+            video.appendChild(source);
+
+            const overlay = document.createElement("div");
+            overlay.className = "absolute inset-0 bg-black bg-opacity-30 flex items-center justify-center";
+
+            const playButton = document.createElement("div");
+            playButton.className = "bg-white bg-opacity-90 rounded-full p-1";
+
+            const playIcon = document.createElementNS("http://www.w3.org/2000/svg", "svg");
+            playIcon.setAttribute("class", "w-4 h-4 text-gray-800");
+            playIcon.setAttribute("fill", "currentColor");
+            playIcon.setAttribute("viewBox", "0 0 24 24");
+
+            const playPath = document.createElementNS("http://www.w3.org/2000/svg", "path");
+            playPath.setAttribute("d", "M8 5v14l11-7z");
+
+            playIcon.appendChild(playPath);
+            playButton.appendChild(playIcon);
+            overlay.appendChild(playButton);
+            wrapper.appendChild(video);
+            wrapper.appendChild(overlay);
+            slot.appendChild(wrapper);
           } else {
-            slot.innerHTML = `<div class="flex flex-col items-center justify-center h-full text-gray-400">
-                            <svg class="w-8 h-8" fill="currentColor" viewBox="0 0 24 24">
-                                <path d="M8 5v14l11-7z"/>
-                            </svg>
-                            <div class="text-xs mt-1">${meta?.name || "Video"}</div>
-                        </div>`;
+            // Create video placeholder safely
+            const wrapper = document.createElement("div");
+            wrapper.className = "flex flex-col items-center justify-center h-full text-gray-400";
+
+            const svg = document.createElementNS("http://www.w3.org/2000/svg", "svg");
+            svg.setAttribute("class", "w-8 h-8");
+            svg.setAttribute("fill", "currentColor");
+            svg.setAttribute("viewBox", "0 0 24 24");
+
+            const path = document.createElementNS("http://www.w3.org/2000/svg", "path");
+            path.setAttribute("d", "M8 5v14l11-7z");
+
+            svg.appendChild(path);
+
+            const nameDiv = document.createElement("div");
+            nameDiv.className = "text-xs mt-1";
+            nameDiv.textContent = meta?.name || "Video";
+
+            wrapper.appendChild(svg);
+            wrapper.appendChild(nameDiv);
+            slot.appendChild(wrapper);
           }
         } else {
-          slot.innerHTML = `<div class="flex flex-col items-center justify-center h-full text-gray-400">
-                        <svg class="w-8 h-8" fill="currentColor" viewBox="0 0 24 24">
-                            <path d="M8 5v14l11-7z"/>
-                        </svg>
-                        <div class="text-xs mt-1">${meta?.name || "Video"}</div>
-                    </div>`;
+          // Create video placeholder safely
+          const wrapper = document.createElement("div");
+          wrapper.className = "flex flex-col items-center justify-center h-full text-gray-400";
+
+          const svg = document.createElementNS("http://www.w3.org/2000/svg", "svg");
+          svg.setAttribute("class", "w-8 h-8");
+          svg.setAttribute("fill", "currentColor");
+          svg.setAttribute("viewBox", "0 0 24 24");
+
+          const path = document.createElementNS("http://www.w3.org/2000/svg", "path");
+          path.setAttribute("d", "M8 5v14l11-7z");
+
+          svg.appendChild(path);
+
+          const nameDiv = document.createElement("div");
+          nameDiv.className = "text-xs mt-1";
+          nameDiv.textContent = meta?.name || "Video";
+
+          wrapper.appendChild(svg);
+          wrapper.appendChild(nameDiv);
+          slot.appendChild(wrapper);
         }
       } else {
-        slot.innerHTML = `<div class="flex flex-col items-center justify-center h-full text-gray-400">
-                    <div class="text-2xl mb-1">📁</div>
-                    <div class="text-xs">${meta?.name || "File"}</div>
-                </div>`;
+        // Create file placeholder safely
+        const wrapper = document.createElement("div");
+        wrapper.className = "flex flex-col items-center justify-center h-full text-gray-400";
+
+        const iconDiv = document.createElement("div");
+        iconDiv.className = "text-2xl mb-1";
+        iconDiv.textContent = "📁";
+
+        const nameDiv = document.createElement("div");
+        nameDiv.className = "text-xs";
+        nameDiv.textContent = meta?.name || "File";
+
+        wrapper.appendChild(iconDiv);
+        wrapper.appendChild(nameDiv);
+        slot.appendChild(wrapper);
       }
 
       // Add remove button overlay (similar to file field)
@@ -755,11 +1069,27 @@ function renderResourcePills(container, rids, onRemove) {
       // Empty slot placeholder
       slot.className =
         "aspect-square bg-gray-100 border-2 border-dashed border-gray-300 rounded-lg flex items-center justify-center cursor-pointer hover:border-gray-400 transition-colors";
-      slot.innerHTML =
-        '<svg class="w-12 h-12 text-gray-400" fill="currentColor" viewBox="0 0 24 24"><path d="M21 19V5c0-1.1-.9-2-2-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2zM8.5 13.5l2.5 3.01L14.5 12l4.5 6H5l3.5-4.5z"/></svg>';
+      // Create empty slot SVG safely
+      const svg = document.createElementNS("http://www.w3.org/2000/svg", "svg");
+      svg.setAttribute("class", "w-12 h-12 text-gray-400");
+      svg.setAttribute("fill", "currentColor");
+      svg.setAttribute("viewBox", "0 0 24 24");
+
+      const path = document.createElementNS("http://www.w3.org/2000/svg", "path");
+      path.setAttribute("d", "M21 19V5c0-1.1-.9-2-2-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2zM8.5 13.5l2.5 3.01L14.5 12l4.5 6H5l3.5-4.5z");
+
+      svg.appendChild(path);
+      slot.appendChild(svg);
       slot.onclick = () => {
-        // Look for file input in the files wrapper (go up from list -> filesContainer -> filesWrapper)
-        const filesWrapper = container.closest(".space-y-2");
+        // Look for file input - check parent containers that have space-y-2 class
+        let filesWrapper = container.parentElement;
+        while (filesWrapper && !filesWrapper.classList.contains("space-y-2")) {
+          filesWrapper = filesWrapper.parentElement;
+        }
+        // If no parent with space-y-2, container itself might be the wrapper
+        if (!filesWrapper && container.classList.contains("space-y-2")) {
+          filesWrapper = container;
+        }
         const fileInput = filesWrapper?.querySelector('input[type="file"]');
         if (fileInput) fileInput.click();
       };
@@ -811,14 +1141,37 @@ async function handleFileSelect(file, container, fieldName, deps = null) {
   });
 
   // Create hidden input to store the resource ID
-  let hiddenInput = container.parentElement.querySelector(
+  // Handle case where container might be detached due to video replacement
+  let parentElement = container.parentElement;
+  if (!parentElement) {
+    // Container is detached - find the current container by field name
+    const form = document.querySelector('[data-form-builder]');
+    if (form) {
+      const existingInput = form.querySelector(`input[name="${fieldName}"]`);
+      if (existingInput) {
+        parentElement = existingInput.parentElement;
+        // Update container reference to the current one in DOM
+        const currentContainer = parentElement.querySelector('.file-preview-container');
+        if (currentContainer) {
+          container = currentContainer;
+        }
+      }
+    }
+  }
+
+  if (!parentElement) {
+    console.warn('Could not find parent element for file field:', fieldName);
+    return;
+  }
+
+  let hiddenInput = parentElement.querySelector(
     'input[type="hidden"]',
   );
   if (!hiddenInput) {
     hiddenInput = document.createElement("input");
     hiddenInput.type = "hidden";
     hiddenInput.name = fieldName;
-    container.parentElement.appendChild(hiddenInput);
+    parentElement.appendChild(hiddenInput);
   }
   hiddenInput.value = rid;
 
@@ -979,94 +1332,287 @@ function validateForm(skipValidation = false) {
     switch (element.type) {
       case "text":
       case "textarea": {
-        const input = scopeRoot.querySelector(`[name$="${key}"]`);
-        const val = input?.value ?? "";
-        if (!skipValidation && element.required && val === "") {
-          errors.push(`${key}: required`);
-          markValidity(input, "required");
-          return "";
-        }
-        if (!skipValidation && val) {
-          if (element.minLength !== null && val.length < element.minLength) {
-            errors.push(`${key}: minLength=${element.minLength}`);
-            markValidity(input, `minLength=${element.minLength}`);
+        if (element.multiple) {
+          // Handle multiple text/textarea fields
+          const inputs = scopeRoot.querySelectorAll(`[name^="${key}["]`);
+          const values = [];
+
+          inputs.forEach((input, index) => {
+            const val = input?.value ?? "";
+            values.push(val);
+
+            if (!skipValidation && val) {
+              if (
+                element.minLength !== null &&
+                val.length < element.minLength
+              ) {
+                errors.push(`${key}[${index}]: minLength=${element.minLength}`);
+                markValidity(input, `minLength=${element.minLength}`);
+              }
+              if (
+                element.maxLength !== null &&
+                val.length > element.maxLength
+              ) {
+                errors.push(`${key}[${index}]: maxLength=${element.maxLength}`);
+                markValidity(input, `maxLength=${element.maxLength}`);
+              }
+              if (element.pattern) {
+                try {
+                  const re = new RegExp(element.pattern);
+                  if (!re.test(val)) {
+                    errors.push(`${key}[${index}]: pattern mismatch`);
+                    markValidity(input, "pattern mismatch");
+                  }
+                } catch {
+                  errors.push(`${key}[${index}]: invalid pattern`);
+                  markValidity(input, "invalid pattern");
+                }
+              }
+            } else {
+              markValidity(input, null);
+            }
+          });
+
+          // Validate minCount/maxCount constraints
+          if (!skipValidation) {
+            const minCount = element.minCount ?? 1;
+            const maxCount = element.maxCount ?? 10;
+            const nonEmptyValues = values.filter((v) => v.trim() !== "");
+
+            if (element.required && nonEmptyValues.length === 0) {
+              errors.push(`${key}: required`);
+            }
+            if (nonEmptyValues.length < minCount) {
+              errors.push(`${key}: minimum ${minCount} items required`);
+            }
+            if (nonEmptyValues.length > maxCount) {
+              errors.push(`${key}: maximum ${maxCount} items allowed`);
+            }
           }
-          if (element.maxLength !== null && val.length > element.maxLength) {
-            errors.push(`${key}: maxLength=${element.maxLength}`);
-            markValidity(input, `maxLength=${element.maxLength}`);
+
+          return values;
+        } else {
+          // Handle single text/textarea field
+          const input = scopeRoot.querySelector(`[name$="${key}"]`);
+          const val = input?.value ?? "";
+          if (!skipValidation && element.required && val === "") {
+            errors.push(`${key}: required`);
+            markValidity(input, "required");
+            return "";
           }
-          if (element.pattern) {
-            try {
-              const re = new RegExp(element.pattern);
-              if (!re.test(val)) {
-                errors.push(`${key}: pattern mismatch`);
-                markValidity(input, "pattern mismatch");
+          if (!skipValidation && val) {
+            if (element.minLength !== null && val.length < element.minLength) {
+              errors.push(`${key}: minLength=${element.minLength}`);
+              markValidity(input, `minLength=${element.minLength}`);
+            }
+            if (element.maxLength !== null && val.length > element.maxLength) {
+              errors.push(`${key}: maxLength=${element.maxLength}`);
+              markValidity(input, `maxLength=${element.maxLength}`);
+            }
+            if (element.pattern) {
+              try {
+                const re = new RegExp(element.pattern);
+                if (!re.test(val)) {
+                  errors.push(`${key}: pattern mismatch`);
+                  markValidity(input, "pattern mismatch");
+                }
+              } catch {
+                errors.push(`${key}: invalid pattern`);
+                markValidity(input, "invalid pattern");
               }
-            } catch {
-              errors.push(`${key}: invalid pattern`);
-              markValidity(input, "invalid pattern");
             }
+          } else if (skipValidation) {
+            markValidity(input, null);
+          } else {
+            markValidity(input, null);
           }
-        } else if (skipValidation) {
-          markValidity(input, null);
-        } else {
-          markValidity(input, null);
+          return val;
         }
-        return val;
       }
       case "number": {
-        const input = scopeRoot.querySelector(`[name$="${key}"]`);
-        const raw = input?.value ?? "";
-        if (!skipValidation && element.required && raw === "") {
-          errors.push(`${key}: required`);
-          markValidity(input, "required");
-          return null;
-        }
-        if (raw === "") {
+        if (element.multiple) {
+          // Handle multiple number fields
+          const inputs = scopeRoot.querySelectorAll(`[name^="${key}["]`);
+          const values = [];
+
+          inputs.forEach((input, index) => {
+            const raw = input?.value ?? "";
+            if (raw === "") {
+              values.push(null);
+              markValidity(input, null);
+              return;
+            }
+
+            const v = parseFloat(raw);
+            if (!skipValidation && !Number.isFinite(v)) {
+              errors.push(`${key}[${index}]: not a number`);
+              markValidity(input, "not a number");
+              values.push(null);
+              return;
+            }
+
+            if (!skipValidation && element.min !== null && v < element.min) {
+              errors.push(`${key}[${index}]: < min=${element.min}`);
+              markValidity(input, `< min=${element.min}`);
+            }
+            if (!skipValidation && element.max !== null && v > element.max) {
+              errors.push(`${key}[${index}]: > max=${element.max}`);
+              markValidity(input, `> max=${element.max}`);
+            }
+
+            const d = Number.isInteger(element.decimals ?? 0)
+              ? element.decimals
+              : 0;
+            markValidity(input, null);
+            values.push(Number(v.toFixed(d)));
+          });
+
+          // Validate minCount/maxCount constraints
+          if (!skipValidation) {
+            const minCount = element.minCount ?? 1;
+            const maxCount = element.maxCount ?? 10;
+            const nonNullValues = values.filter((v) => v !== null);
+
+            if (element.required && nonNullValues.length === 0) {
+              errors.push(`${key}: required`);
+            }
+            if (nonNullValues.length < minCount) {
+              errors.push(`${key}: minimum ${minCount} items required`);
+            }
+            if (nonNullValues.length > maxCount) {
+              errors.push(`${key}: maximum ${maxCount} items allowed`);
+            }
+          }
+
+          return values;
+        } else {
+          // Handle single number field
+          const input = scopeRoot.querySelector(`[name$="${key}"]`);
+          const raw = input?.value ?? "";
+          if (!skipValidation && element.required && raw === "") {
+            errors.push(`${key}: required`);
+            markValidity(input, "required");
+            return null;
+          }
+          if (raw === "") {
+            markValidity(input, null);
+            return null;
+          }
+          const v = parseFloat(raw);
+          if (!skipValidation && !Number.isFinite(v)) {
+            errors.push(`${key}: not a number`);
+            markValidity(input, "not a number");
+            return null;
+          }
+          if (!skipValidation && element.min !== null && v < element.min) {
+            errors.push(`${key}: < min=${element.min}`);
+            markValidity(input, `< min=${element.min}`);
+          }
+          if (!skipValidation && element.max !== null && v > element.max) {
+            errors.push(`${key}: > max=${element.max}`);
+            markValidity(input, `> max=${element.max}`);
+          }
+          const d = Number.isInteger(element.decimals ?? 0)
+            ? element.decimals
+            : 0;
           markValidity(input, null);
-          return null;
+          return Number(v.toFixed(d));
         }
-        const v = parseFloat(raw);
-        if (!skipValidation && !Number.isFinite(v)) {
-          errors.push(`${key}: not a number`);
-          markValidity(input, "not a number");
-          return null;
-        }
-        if (!skipValidation && element.min !== null && v < element.min) {
-          errors.push(`${key}: < min=${element.min}`);
-          markValidity(input, `< min=${element.min}`);
-        }
-        if (!skipValidation && element.max !== null && v > element.max) {
-          errors.push(`${key}: > max=${element.max}`);
-          markValidity(input, `> max=${element.max}`);
-        }
-        const d = Number.isInteger(element.decimals ?? 0)
-          ? element.decimals
-          : 0;
-        markValidity(input, null);
-        return Number(v.toFixed(d));
       }
       case "select": {
-        const input = scopeRoot.querySelector(`[name$="${key}"]`);
-        const val = input?.value ?? "";
-        if (!skipValidation && element.required && val === "") {
-          errors.push(`${key}: required`);
-          markValidity(input, "required");
-          return "";
+        if (element.multiple) {
+          // Handle multiple select fields
+          const inputs = scopeRoot.querySelectorAll(`[name^="${key}["]`);
+          const values = [];
+
+          inputs.forEach((input) => {
+            const val = input?.value ?? "";
+            values.push(val);
+            markValidity(input, null);
+          });
+
+          // Validate minCount/maxCount constraints
+          if (!skipValidation) {
+            const minCount = element.minCount ?? 1;
+            const maxCount = element.maxCount ?? 10;
+            const nonEmptyValues = values.filter((v) => v !== "");
+
+            if (element.required && nonEmptyValues.length === 0) {
+              errors.push(`${key}: required`);
+            }
+            if (nonEmptyValues.length < minCount) {
+              errors.push(`${key}: minimum ${minCount} items required`);
+            }
+            if (nonEmptyValues.length > maxCount) {
+              errors.push(`${key}: maximum ${maxCount} items allowed`);
+            }
+          }
+
+          return values;
+        } else {
+          // Handle single select field
+          const input = scopeRoot.querySelector(`[name$="${key}"]`);
+          const val = input?.value ?? "";
+          if (!skipValidation && element.required && val === "") {
+            errors.push(`${key}: required`);
+            markValidity(input, "required");
+            return "";
+          }
+          markValidity(input, null);
+          return val;
         }
-        markValidity(input, null);
-        return val;
       }
       case "file": {
-        const input = scopeRoot.querySelector(
-          `input[name$="${key}"][type="hidden"]`,
-        );
-        const rid = input?.value ?? "";
-        if (!skipValidation && element.required && rid === "") {
-          errors.push(`${key}: required`);
-          return null;
+        if (element.multiple) {
+          // Handle file with multiple property like files type
+          // Find the files list by locating the specific file input for this field
+          const fullKey = pathJoin(ctx.path, key);
+          const pickerInput = scopeRoot.querySelector(
+            `input[type="file"][name="${fullKey}"]`,
+          );
+          const filesWrapper = pickerInput?.closest(".space-y-2");
+          const container = filesWrapper?.querySelector(".files-list") || null;
+
+          const resourceIds = [];
+          if (container) {
+            const pills = container.querySelectorAll(".resource-pill");
+            pills.forEach((pill) => {
+              const resourceId = pill.dataset.resourceId;
+              if (resourceId) {
+                resourceIds.push(resourceId);
+              }
+            });
+          }
+
+          // Validate minCount/maxCount constraints
+          if (!skipValidation) {
+            const minFiles = element.minCount ?? 0;
+            const maxFiles = element.maxCount ?? Infinity;
+
+            if (element.required && resourceIds.length === 0) {
+              errors.push(`${key}: required`);
+            }
+            if (resourceIds.length < minFiles) {
+              errors.push(`${key}: minimum ${minFiles} files required`);
+            }
+            if (resourceIds.length > maxFiles) {
+              errors.push(`${key}: maximum ${maxFiles} files allowed`);
+            }
+          }
+
+          return resourceIds;
+        } else {
+          // Handle single file
+          const input = scopeRoot.querySelector(
+            `input[name$="${key}"][type="hidden"]`,
+          );
+          const rid = input?.value ?? "";
+          if (!skipValidation && element.required && rid === "") {
+            errors.push(`${key}: required`);
+            return null;
+          }
+          return rid || null;
         }
-        return rid || null;
       }
       case "files": {
         // For files, we need to collect all resource IDs
@@ -1110,6 +1656,77 @@ function validateForm(skipValidation = false) {
       }
       case "group": {
         if (element.repeat && isPlainObject(element.repeat)) {
+          const items = [];
+          // Use full path for nested group element search
+          const fullKey = pathJoin(ctx.path, key);
+          const itemElements = scopeRoot.querySelectorAll(
+            `[name^="${fullKey}["]`,
+          );
+
+          // Extract actual indices from DOM element names instead of assuming sequential numbering
+          const actualIndices = new Set();
+          itemElements.forEach((el) => {
+            const match = el.name.match(
+              new RegExp(
+                `^${fullKey.replace(/[.*+?^${}()|[\]\\]/g, "\\$&")}\\[(\\d+)\\]`,
+              ),
+            );
+            if (match) {
+              actualIndices.add(parseInt(match[1]));
+            }
+          });
+
+          const sortedIndices = Array.from(actualIndices).sort((a, b) => a - b);
+
+          sortedIndices.forEach((actualIndex) => {
+            const itemData = {};
+            // Find the specific group item container for scoped queries - use full path
+            const fullItemPath = `${fullKey}[${actualIndex}]`;
+            const itemContainer =
+              scopeRoot.querySelector(`[data-group-item="${fullItemPath}"]`) ||
+              scopeRoot;
+            element.elements.forEach((child) => {
+              if (child.hidden) {
+                // For hidden child elements, use their default value
+                itemData[child.key] =
+                  child.default !== undefined ? child.default : "";
+              } else {
+                const childKey = `${fullKey}[${actualIndex}].${child.key}`;
+                itemData[child.key] = validateElement(
+                  { ...child, key: childKey },
+                  ctx,
+                  itemContainer,
+                );
+              }
+            });
+            items.push(itemData);
+          });
+          return items;
+        } else {
+          const groupData = {};
+          // Find the specific group container for scoped queries
+          const groupContainer =
+            scopeRoot.querySelector(`[data-group="${key}"]`) || scopeRoot;
+          element.elements.forEach((child) => {
+            if (child.hidden) {
+              // For hidden child elements, use their default value
+              groupData[child.key] =
+                child.default !== undefined ? child.default : "";
+            } else {
+              const childKey = `${key}.${child.key}`;
+              groupData[child.key] = validateElement(
+                { ...child, key: childKey },
+                ctx,
+                groupContainer,
+              );
+            }
+          });
+          return groupData;
+        }
+      }
+      case "container": {
+        if (element.multiple) {
+          // Handle multiple containers like repeating groups
           const items = [];
           const itemElements = scopeRoot.querySelectorAll(`[name^="${key}["]`);
           const itemCount = Math.max(
@@ -1119,35 +1736,64 @@ function validateForm(skipValidation = false) {
 
           for (let i = 0; i < itemCount; i++) {
             const itemData = {};
-            // Find the specific group item container for scoped queries
+            // Find the specific container item container for scoped queries
             const itemContainer =
-              scopeRoot.querySelector(`[data-group-item="${key}[${i}]"]`) ||
+              scopeRoot.querySelector(`[data-container-item="${key}[${i}]"]`) ||
               scopeRoot;
             element.elements.forEach((child) => {
-              const childKey = `${key}[${i}].${child.key}`;
-              itemData[child.key] = validateElement(
-                { ...child, key: childKey },
-                ctx,
-                itemContainer,
-              );
+              if (child.hidden) {
+                // For hidden child elements, use their default value
+                itemData[child.key] =
+                  child.default !== undefined ? child.default : "";
+              } else {
+                const childKey = `${key}[${i}].${child.key}`;
+                itemData[child.key] = validateElement(
+                  { ...child, key: childKey },
+                  ctx,
+                  itemContainer,
+                );
+              }
             });
             items.push(itemData);
           }
+
+          // Validate minCount/maxCount constraints
+          if (!skipValidation) {
+            const minItems = element.minCount ?? 0;
+            const maxItems = element.maxCount ?? Infinity;
+
+            if (element.required && items.length === 0) {
+              errors.push(`${key}: required`);
+            }
+            if (items.length < minItems) {
+              errors.push(`${key}: minimum ${minItems} items required`);
+            }
+            if (items.length > maxItems) {
+              errors.push(`${key}: maximum ${maxItems} items allowed`);
+            }
+          }
+
           return items;
         } else {
-          const groupData = {};
-          // Find the specific group container for scoped queries
-          const groupContainer =
-            scopeRoot.querySelector(`[data-group="${key}"]`) || scopeRoot;
+          const containerData = {};
+          // Find the specific container container for scoped queries
+          const containerContainer =
+            scopeRoot.querySelector(`[data-container="${key}"]`) || scopeRoot;
           element.elements.forEach((child) => {
-            const childKey = `${key}.${child.key}`;
-            groupData[child.key] = validateElement(
-              { ...child, key: childKey },
-              ctx,
-              groupContainer,
-            );
+            if (child.hidden) {
+              // For hidden child elements, use their default value
+              containerData[child.key] =
+                child.default !== undefined ? child.default : "";
+            } else {
+              const childKey = `${key}.${child.key}`;
+              containerData[child.key] = validateElement(
+                { ...child, key: childKey },
+                ctx,
+                containerContainer,
+              );
+            }
           });
-          return groupData;
+          return containerData;
         }
       }
       default:
@@ -1156,7 +1802,12 @@ function validateForm(skipValidation = false) {
   }
 
   state.schema.elements.forEach((element) => {
-    data[element.key] = validateElement(element, { path: "" });
+    // Handle hidden elements - use their default value instead of reading from DOM
+    if (element.hidden) {
+      data[element.key] = element.default !== undefined ? element.default : "";
+    } else {
+      data[element.key] = validateElement(element, { path: "" });
+    }
   });
 
   return {
@@ -1185,24 +1836,254 @@ function renderTextElement(element, ctx, wrapper, pathKey) {
   wrapper.appendChild(textHint);
 }
 
-function renderTextareaElement(element, ctx, wrapper, pathKey) {
-  const textareaInput = document.createElement("textarea");
-  textareaInput.className =
-    "w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 resize-none";
-  textareaInput.name = pathKey;
-  textareaInput.placeholder = element.placeholder || "Введите текст";
-  textareaInput.rows = element.rows || 4;
-  textareaInput.value = ctx.prefill[element.key] || element.default || "";
-  textareaInput.readOnly = state.config.readonly;
-  wrapper.appendChild(textareaInput);
+function renderMultipleTextElement(element, ctx, wrapper, pathKey) {
+  const prefillValues = ctx.prefill[element.key] || [];
+  const values = Array.isArray(prefillValues) ? [...prefillValues] : [];
 
-  // Add hint
-  const textareaHint = document.createElement("p");
-  textareaHint.className = "text-xs text-gray-500 mt-1";
+  // Ensure minimum count
+  const minCount = element.minCount ?? 1;
+  const maxCount = element.maxCount ?? 10;
+
+  while (values.length < minCount) {
+    values.push(element.default || "");
+  }
+
+  const container = document.createElement("div");
+  container.className = "space-y-2";
+  wrapper.appendChild(container);
+
+  function updateIndices() {
+    const items = container.querySelectorAll(".multiple-text-item");
+    items.forEach((item, index) => {
+      const input = item.querySelector("input");
+      if (input) {
+        input.name = `${pathKey}[${index}]`;
+      }
+    });
+  }
+
+  function addTextItem(value = "", index = -1) {
+    const itemWrapper = document.createElement("div");
+    itemWrapper.className = "multiple-text-item flex items-center gap-2";
+
+    const textInput = document.createElement("input");
+    textInput.type = "text";
+    textInput.className =
+      "flex-1 px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500";
+    textInput.placeholder = element.placeholder || "Enter text";
+    textInput.value = value;
+    textInput.readOnly = state.config.readonly;
+
+    itemWrapper.appendChild(textInput);
+
+    // Remove buttons are managed centrally via updateRemoveButtons()
+
+    if (index === -1) {
+      container.appendChild(itemWrapper);
+    } else {
+      container.insertBefore(itemWrapper, container.children[index]);
+    }
+
+    updateIndices();
+    return itemWrapper;
+  }
+
+  function updateRemoveButtons() {
+    if (state.config.readonly) return;
+    const items = container.querySelectorAll(".multiple-text-item");
+    const currentCount = items.length;
+    items.forEach((item) => {
+      let removeBtn = item.querySelector(".remove-item-btn");
+      if (!removeBtn) {
+        removeBtn = document.createElement("button");
+        removeBtn.type = "button";
+        removeBtn.className =
+          "remove-item-btn px-2 py-1 text-red-600 hover:bg-red-50 rounded";
+        removeBtn.textContent = "✕";
+        removeBtn.onclick = () => {
+          const currentIndex = Array.from(container.children).indexOf(item);
+          if (container.children.length > minCount) {
+            values.splice(currentIndex, 1);
+            item.remove();
+            updateIndices();
+            updateAddButton();
+            updateRemoveButtons();
+          }
+        };
+        item.appendChild(removeBtn);
+      }
+      const disabled = currentCount <= minCount;
+      removeBtn.disabled = disabled;
+      removeBtn.style.opacity = disabled ? "0.5" : "1";
+      removeBtn.style.pointerEvents = disabled ? "none" : "auto";
+    });
+  }
+
+  function updateAddButton() {
+    const existingAddBtn = wrapper.querySelector(".add-text-btn");
+    if (existingAddBtn) existingAddBtn.remove();
+
+    if (!state.config.readonly && values.length < maxCount) {
+      const addBtn = document.createElement("button");
+      addBtn.type = "button";
+      addBtn.className =
+        "add-text-btn mt-2 px-3 py-1 text-blue-600 border border-blue-300 rounded hover:bg-blue-50 text-sm";
+      addBtn.textContent = `+ Add ${element.label || "Text"}`;
+      addBtn.onclick = () => {
+        values.push(element.default || "");
+        addTextItem(element.default || "");
+        updateAddButton();
+        updateRemoveButtons();
+      };
+      wrapper.appendChild(addBtn);
+    }
+  }
+
+  // Render initial items
+  values.forEach((value) => addTextItem(value));
+  updateAddButton();
+  updateRemoveButtons();
+
+  // Add hint
+  const hint = document.createElement("p");
+  hint.className = "text-xs text-gray-500 mt-1";
+  hint.textContent = makeFieldHint(element);
+  wrapper.appendChild(hint);
+}
+
+function renderTextareaElement(element, ctx, wrapper, pathKey) {
+  const textareaInput = document.createElement("textarea");
+  textareaInput.className =
+    "w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 resize-none";
+  textareaInput.name = pathKey;
+  textareaInput.placeholder = element.placeholder || "Введите текст";
+  textareaInput.rows = element.rows || 4;
+  textareaInput.value = ctx.prefill[element.key] || element.default || "";
+  textareaInput.readOnly = state.config.readonly;
+  wrapper.appendChild(textareaInput);
+
+  // Add hint
+  const textareaHint = document.createElement("p");
+  textareaHint.className = "text-xs text-gray-500 mt-1";
   textareaHint.textContent = makeFieldHint(element);
   wrapper.appendChild(textareaHint);
 }
 
+function renderMultipleTextareaElement(element, ctx, wrapper, pathKey) {
+  const prefillValues = ctx.prefill[element.key] || [];
+  const values = Array.isArray(prefillValues) ? [...prefillValues] : [];
+
+  // Ensure minimum count
+  const minCount = element.minCount ?? 1;
+  const maxCount = element.maxCount ?? 10;
+
+  while (values.length < minCount) {
+    values.push(element.default || "");
+  }
+
+  const container = document.createElement("div");
+  container.className = "space-y-2";
+  wrapper.appendChild(container);
+
+  function updateIndices() {
+    const items = container.querySelectorAll(".multiple-textarea-item");
+    items.forEach((item, index) => {
+      const textarea = item.querySelector("textarea");
+      if (textarea) {
+        textarea.name = `${pathKey}[${index}]`;
+      }
+    });
+  }
+
+  function addTextareaItem(value = "", index = -1) {
+    const itemWrapper = document.createElement("div");
+    itemWrapper.className = "multiple-textarea-item";
+
+    const textareaInput = document.createElement("textarea");
+    textareaInput.className =
+      "w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 resize-none";
+    textareaInput.placeholder = element.placeholder || "Enter text";
+    textareaInput.rows = element.rows || 4;
+    textareaInput.value = value;
+    textareaInput.readOnly = state.config.readonly;
+
+    itemWrapper.appendChild(textareaInput);
+
+    // Remove buttons are managed centrally via updateRemoveButtons()
+
+    if (index === -1) {
+      container.appendChild(itemWrapper);
+    } else {
+      container.insertBefore(itemWrapper, container.children[index]);
+    }
+
+    updateIndices();
+    return itemWrapper;
+  }
+
+  function updateRemoveButtons() {
+    if (state.config.readonly) return;
+    const items = container.querySelectorAll(".multiple-textarea-item");
+    const currentCount = items.length;
+    items.forEach((item) => {
+      let removeBtn = item.querySelector(".remove-item-btn");
+      if (!removeBtn) {
+        removeBtn = document.createElement("button");
+        removeBtn.type = "button";
+        removeBtn.className =
+          "remove-item-btn mt-1 px-2 py-1 text-red-600 hover:bg-red-50 rounded text-sm";
+        removeBtn.textContent = "✕ Remove";
+        removeBtn.onclick = () => {
+          const currentIndex = Array.from(container.children).indexOf(item);
+          if (container.children.length > minCount) {
+            values.splice(currentIndex, 1);
+            item.remove();
+            updateIndices();
+            updateAddButton();
+            updateRemoveButtons();
+          }
+        };
+        item.appendChild(removeBtn);
+      }
+      const disabled = currentCount <= minCount;
+      removeBtn.disabled = disabled;
+      removeBtn.style.opacity = disabled ? "0.5" : "1";
+      removeBtn.style.pointerEvents = disabled ? "none" : "auto";
+    });
+  }
+
+  function updateAddButton() {
+    const existingAddBtn = wrapper.querySelector(".add-textarea-btn");
+    if (existingAddBtn) existingAddBtn.remove();
+
+    if (!state.config.readonly && values.length < maxCount) {
+      const addBtn = document.createElement("button");
+      addBtn.type = "button";
+      addBtn.className =
+        "add-textarea-btn mt-2 px-3 py-1 text-blue-600 border border-blue-300 rounded hover:bg-blue-50 text-sm";
+      addBtn.textContent = `+ Add ${element.label || "Textarea"}`;
+      addBtn.onclick = () => {
+        values.push(element.default || "");
+        addTextareaItem(element.default || "");
+        updateAddButton();
+        updateRemoveButtons();
+      };
+      wrapper.appendChild(addBtn);
+    }
+  }
+
+  // Render initial items
+  values.forEach((value) => addTextareaItem(value));
+  updateAddButton();
+  updateRemoveButtons();
+
+  // Add hint
+  const hint = document.createElement("p");
+  hint.className = "text-xs text-gray-500 mt-1";
+  hint.textContent = makeFieldHint(element);
+  wrapper.appendChild(hint);
+}
+
 function renderNumberElement(element, ctx, wrapper, pathKey) {
   const numberInput = document.createElement("input");
   numberInput.type = "number";
@@ -1224,6 +2105,124 @@ function renderNumberElement(element, ctx, wrapper, pathKey) {
   wrapper.appendChild(numberHint);
 }
 
+function renderMultipleNumberElement(element, ctx, wrapper, pathKey) {
+  const prefillValues = ctx.prefill[element.key] || [];
+  const values = Array.isArray(prefillValues) ? [...prefillValues] : [];
+
+  // Ensure minimum count
+  const minCount = element.minCount ?? 1;
+  const maxCount = element.maxCount ?? 10;
+
+  while (values.length < minCount) {
+    values.push(element.default || "");
+  }
+
+  const container = document.createElement("div");
+  container.className = "space-y-2";
+  wrapper.appendChild(container);
+
+  function updateIndices() {
+    const items = container.querySelectorAll(".multiple-number-item");
+    items.forEach((item, index) => {
+      const input = item.querySelector("input");
+      if (input) {
+        input.name = `${pathKey}[${index}]`;
+      }
+    });
+  }
+
+  function addNumberItem(value = "", index = -1) {
+    const itemWrapper = document.createElement("div");
+    itemWrapper.className = "multiple-number-item flex items-center gap-2";
+
+    const numberInput = document.createElement("input");
+    numberInput.type = "number";
+    numberInput.className =
+      "flex-1 px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500";
+    numberInput.placeholder = element.placeholder || "0";
+    if (element.min !== undefined) numberInput.min = element.min;
+    if (element.max !== undefined) numberInput.max = element.max;
+    if (element.step !== undefined) numberInput.step = element.step;
+    numberInput.value = value;
+    numberInput.readOnly = state.config.readonly;
+
+    itemWrapper.appendChild(numberInput);
+
+    // Remove buttons are managed centrally via updateRemoveButtons()
+
+    if (index === -1) {
+      container.appendChild(itemWrapper);
+    } else {
+      container.insertBefore(itemWrapper, container.children[index]);
+    }
+
+    updateIndices();
+    return itemWrapper;
+  }
+
+  function updateRemoveButtons() {
+    if (state.config.readonly) return;
+    const items = container.querySelectorAll(".multiple-number-item");
+    const currentCount = items.length;
+    items.forEach((item) => {
+      let removeBtn = item.querySelector(".remove-item-btn");
+      if (!removeBtn) {
+        removeBtn = document.createElement("button");
+        removeBtn.type = "button";
+        removeBtn.className =
+          "remove-item-btn px-2 py-1 text-red-600 hover:bg-red-50 rounded";
+        removeBtn.textContent = "✕";
+        removeBtn.onclick = () => {
+          const currentIndex = Array.from(container.children).indexOf(item);
+          if (container.children.length > minCount) {
+            values.splice(currentIndex, 1);
+            item.remove();
+            updateIndices();
+            updateAddButton();
+            updateRemoveButtons();
+          }
+        };
+        item.appendChild(removeBtn);
+      }
+      const disabled = currentCount <= minCount;
+      removeBtn.disabled = disabled;
+      removeBtn.style.opacity = disabled ? "0.5" : "1";
+      removeBtn.style.pointerEvents = disabled ? "none" : "auto";
+    });
+  }
+
+  function updateAddButton() {
+    const existingAddBtn = wrapper.querySelector(".add-number-btn");
+    if (existingAddBtn) existingAddBtn.remove();
+
+    if (!state.config.readonly && values.length < maxCount) {
+      const addBtn = document.createElement("button");
+      addBtn.type = "button";
+      addBtn.className =
+        "add-number-btn mt-2 px-3 py-1 text-blue-600 border border-blue-300 rounded hover:bg-blue-50 text-sm";
+      addBtn.textContent = `+ Add ${element.label || "Number"}`;
+      addBtn.onclick = () => {
+        values.push(element.default || "");
+        addNumberItem(element.default || "");
+        updateAddButton();
+        updateRemoveButtons();
+      };
+      wrapper.appendChild(addBtn);
+    }
+  }
+
+  // Render initial items
+  values.forEach((value) => addNumberItem(value));
+  updateAddButton();
+  updateRemoveButtons();
+
+  // Add hint
+  const hint = document.createElement("p");
+  hint.className = "text-xs text-gray-500 mt-1";
+  hint.textContent = makeFieldHint(element);
+  wrapper.appendChild(hint);
+}
+
 function renderSelectElement(element, ctx, wrapper, pathKey) {
   const selectInput = document.createElement("select");
   selectInput.className =
@@ -1250,6 +2249,131 @@ function renderSelectElement(element, ctx, wrapper, pathKey) {
   wrapper.appendChild(selectHint);
 }
 
+function renderMultipleSelectElement(element, ctx, wrapper, pathKey) {
+  const prefillValues = ctx.prefill[element.key] || [];
+  const values = Array.isArray(prefillValues) ? [...prefillValues] : [];
+
+  // Ensure minimum count
+  const minCount = element.minCount ?? 1;
+  const maxCount = element.maxCount ?? 10;
+
+  while (values.length < minCount) {
+    values.push(element.default || element.options?.[0]?.value || "");
+  }
+
+  const container = document.createElement("div");
+  container.className = "space-y-2";
+  wrapper.appendChild(container);
+
+  function updateIndices() {
+    const items = container.querySelectorAll(".multiple-select-item");
+    items.forEach((item, index) => {
+      const select = item.querySelector("select");
+      if (select) {
+        select.name = `${pathKey}[${index}]`;
+      }
+    });
+  }
+
+  function addSelectItem(value = "", index = -1) {
+    const itemWrapper = document.createElement("div");
+    itemWrapper.className = "multiple-select-item flex items-center gap-2";
+
+    const selectInput = document.createElement("select");
+    selectInput.className =
+      "flex-1 px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500";
+    selectInput.disabled = state.config.readonly;
+
+    // Add options
+    (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);
+    });
+
+    itemWrapper.appendChild(selectInput);
+
+    // Remove buttons are managed centrally via updateRemoveButtons()
+
+    if (index === -1) {
+      container.appendChild(itemWrapper);
+    } else {
+      container.insertBefore(itemWrapper, container.children[index]);
+    }
+
+    updateIndices();
+    return itemWrapper;
+  }
+
+  function updateRemoveButtons() {
+    if (state.config.readonly) return;
+    const items = container.querySelectorAll(".multiple-select-item");
+    const currentCount = items.length;
+    items.forEach((item) => {
+      let removeBtn = item.querySelector(".remove-item-btn");
+      if (!removeBtn) {
+        removeBtn = document.createElement("button");
+        removeBtn.type = "button";
+        removeBtn.className =
+          "remove-item-btn px-2 py-1 text-red-600 hover:bg-red-50 rounded";
+        removeBtn.textContent = "✕";
+        removeBtn.onclick = () => {
+          const currentIndex = Array.from(container.children).indexOf(item);
+          if (container.children.length > minCount) {
+            values.splice(currentIndex, 1);
+            item.remove();
+            updateIndices();
+            updateAddButton();
+            updateRemoveButtons();
+          }
+        };
+        item.appendChild(removeBtn);
+      }
+      const disabled = currentCount <= minCount;
+      removeBtn.disabled = disabled;
+      removeBtn.style.opacity = disabled ? "0.5" : "1";
+      removeBtn.style.pointerEvents = disabled ? "none" : "auto";
+    });
+  }
+
+  function updateAddButton() {
+    const existingAddBtn = wrapper.querySelector(".add-select-btn");
+    if (existingAddBtn) existingAddBtn.remove();
+
+    if (!state.config.readonly && values.length < maxCount) {
+      const addBtn = document.createElement("button");
+      addBtn.type = "button";
+      addBtn.className =
+        "add-select-btn mt-2 px-3 py-1 text-blue-600 border border-blue-300 rounded hover:bg-blue-50 text-sm";
+      addBtn.textContent = `+ Add ${element.label || "Selection"}`;
+      addBtn.onclick = () => {
+        const defaultValue =
+          element.default || element.options?.[0]?.value || "";
+        values.push(defaultValue);
+        addSelectItem(defaultValue);
+        updateAddButton();
+        updateRemoveButtons();
+      };
+      wrapper.appendChild(addBtn);
+    }
+  }
+
+  // Render initial items
+  values.forEach((value) => addSelectItem(value));
+  updateAddButton();
+  updateRemoveButtons();
+
+  // Add hint
+  const hint = document.createElement("p");
+  hint.className = "text-xs text-gray-500 mt-1";
+  hint.textContent = makeFieldHint(element);
+  wrapper.appendChild(hint);
+}
+
 function renderFileElement(element, ctx, wrapper, pathKey) {
   if (state.config.readonly) {
     // Readonly mode: use common preview function
@@ -1261,7 +2385,11 @@ function renderFileElement(element, ctx, wrapper, pathKey) {
       const emptyState = document.createElement("div");
       emptyState.className =
         "aspect-video bg-gray-100 rounded-lg flex items-center justify-center text-gray-500";
-      emptyState.innerHTML = `<div class="text-center">${t("noFileSelected")}</div>`;
+      // Create empty state content safely
+      const textDiv = document.createElement("div");
+      textDiv.className = "text-center";
+      textDiv.textContent = t("noFileSelected");
+      emptyState.appendChild(textDiv);
       wrapper.appendChild(emptyState);
     }
   } else {
@@ -1321,8 +2449,14 @@ function renderFileElement(element, ctx, wrapper, pathKey) {
     // Add upload text
     const uploadText = document.createElement("p");
     uploadText.className = "text-xs text-gray-600 mt-2 text-center";
-    uploadText.innerHTML = `<span class="underline cursor-pointer">${t("uploadText")}</span> ${t("dragDropTextSingle")}`;
-    uploadText.querySelector("span").onclick = () => picker.click();
+    // Create upload text content safely
+    const uploadSpan = document.createElement("span");
+    uploadSpan.className = "underline cursor-pointer";
+    uploadSpan.textContent = t("uploadText");
+    uploadSpan.onclick = () => picker.click();
+
+    uploadText.appendChild(uploadSpan);
+    uploadText.appendChild(document.createTextNode(" " + t("dragDropTextSingle")));
     fileWrapper.appendChild(uploadText);
 
     // Add hint
@@ -1381,14 +2515,29 @@ function handleInitialFileData(
 }
 
 function setEmptyFileContainer(fileContainer) {
-  fileContainer.innerHTML = `
-    <div class="flex flex-col items-center justify-center h-full text-gray-400">
-        <svg class="w-6 h-6 mb-2" fill="currentColor" viewBox="0 0 24 24">
-            <path d="M21 19V5c0-1.1-.9-2-2-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2zM8.5 13.5l2.5 3.01L14.5 12l4.5 6H5l3.5-4.5z"/>
-        </svg>
-        <div class="text-sm text-center">${t("clickDragText")}</div>
-    </div>
-  `;
+  // Create empty file container content safely
+  clear(fileContainer);
+
+  const wrapper = document.createElement("div");
+  wrapper.className = "flex flex-col items-center justify-center h-full text-gray-400";
+
+  const svg = document.createElementNS("http://www.w3.org/2000/svg", "svg");
+  svg.setAttribute("class", "w-6 h-6 mb-2");
+  svg.setAttribute("fill", "currentColor");
+  svg.setAttribute("viewBox", "0 0 24 24");
+
+  const path = document.createElementNS("http://www.w3.org/2000/svg", "path");
+  path.setAttribute("d", "M21 19V5c0-1.1-.9-2-2-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2zM8.5 13.5l2.5 3.01L14.5 12l4.5 6H5l3.5-4.5z");
+
+  svg.appendChild(path);
+
+  const textDiv = document.createElement("div");
+  textDiv.className = "text-sm text-center";
+  textDiv.textContent = t("clickDragText");
+
+  wrapper.appendChild(svg);
+  wrapper.appendChild(textDiv);
+  fileContainer.appendChild(wrapper);
 }
 
 function renderFilesElement(element, ctx, wrapper, pathKey) {
@@ -1405,7 +2554,16 @@ function renderFilesElement(element, ctx, wrapper, pathKey) {
         resultsWrapper.appendChild(filePreview);
       });
     } else {
-      resultsWrapper.innerHTML = `<div class="aspect-video bg-gray-100 rounded-lg flex items-center justify-center text-gray-500"><div class="text-center">${t("noFilesSelected")}</div></div>`;
+      // Create empty state safely
+      const emptyDiv = document.createElement("div");
+      emptyDiv.className = "aspect-video bg-gray-100 rounded-lg flex items-center justify-center text-gray-500";
+
+      const textDiv = document.createElement("div");
+      textDiv.className = "text-center";
+      textDiv.textContent = t("noFilesSelected");
+
+      emptyDiv.appendChild(textDiv);
+      resultsWrapper.appendChild(emptyDiv);
     }
 
     wrapper.appendChild(resultsWrapper);
@@ -1468,6 +2626,103 @@ function renderFilesElement(element, ctx, wrapper, pathKey) {
   }
 }
 
+function renderMultipleFileElement(element, ctx, wrapper, pathKey) {
+  // Use the same logic as renderFilesElement but with minCount/maxCount from element properties
+  const minFiles = element.minCount ?? 0;
+  const maxFiles = element.maxCount ?? Infinity;
+
+  if (state.config.readonly) {
+    // Readonly mode: render as results list
+    const resultsWrapper = document.createElement("div");
+    resultsWrapper.className = "space-y-4";
+
+    const initialFiles = ctx.prefill[element.key] || [];
+
+    if (initialFiles.length > 0) {
+      initialFiles.forEach((resourceId) => {
+        const filePreview = renderFilePreviewReadonly(resourceId);
+        resultsWrapper.appendChild(filePreview);
+      });
+    } else {
+      // Create empty state safely
+      const emptyDiv = document.createElement("div");
+      emptyDiv.className = "aspect-video bg-gray-100 rounded-lg flex items-center justify-center text-gray-500";
+
+      const textDiv = document.createElement("div");
+      textDiv.className = "text-center";
+      textDiv.textContent = t("noFilesSelected");
+
+      emptyDiv.appendChild(textDiv);
+      resultsWrapper.appendChild(emptyDiv);
+    }
+
+    wrapper.appendChild(resultsWrapper);
+  } else {
+    // Edit mode: multiple file input with min/max validation
+    const filesWrapper = document.createElement("div");
+    filesWrapper.className = "space-y-2";
+
+    const filesPicker = document.createElement("input");
+    filesPicker.type = "file";
+    filesPicker.name = pathKey;
+    filesPicker.multiple = true;
+    filesPicker.style.display = "none"; // Hide default input
+    if (element.accept?.extensions) {
+      filesPicker.accept = element.accept.extensions
+        .map((ext) => `.${ext}`)
+        .join(",");
+    }
+
+    const filesContainer = document.createElement("div");
+    filesContainer.className = "files-list space-y-2";
+
+    filesWrapper.appendChild(filesPicker);
+    filesWrapper.appendChild(filesContainer);
+
+    const initialFiles = Array.isArray(ctx.prefill[element.key])
+      ? [...ctx.prefill[element.key]]
+      : [];
+
+    // Add initial files to resource index
+    addPrefillFilesToIndex(initialFiles);
+
+    const updateFilesDisplay = () => {
+      renderResourcePills(filesContainer, initialFiles, (index) => {
+        initialFiles.splice(index, 1);
+        updateFilesDisplay();
+      });
+
+      // Show count and min/max info
+      const countInfo = document.createElement("div");
+      countInfo.className = "text-xs text-gray-500 mt-2";
+      const countText = `${initialFiles.length} file${initialFiles.length !== 1 ? "s" : ""}`;
+      const minMaxText =
+        minFiles > 0 || maxFiles < Infinity
+          ? ` (${minFiles}-${maxFiles} allowed)`
+          : "";
+      countInfo.textContent = countText + minMaxText;
+
+      // Remove previous count info
+      const existingCount = filesWrapper.querySelector(".file-count-info");
+      if (existingCount) existingCount.remove();
+
+      countInfo.className += " file-count-info";
+      filesWrapper.appendChild(countInfo);
+    };
+
+    // Set up drag and drop
+    setupFilesDropHandler(filesContainer, initialFiles, updateFilesDisplay);
+
+    // Set up file picker
+    setupFilesPickerHandler(filesPicker, initialFiles, updateFilesDisplay);
+
+    // Initial display
+    updateFilesDisplay();
+
+    wrapper.appendChild(filesWrapper);
+  }
+}
+
 function addPrefillFilesToIndex(initialFiles) {
   if (initialFiles.length > 0) {
     initialFiles.forEach((resourceId) => {
@@ -1591,13 +2846,20 @@ function renderRepeatableGroup(element, ctx, itemsWrap, left, groupWrap) {
     const item = document.createElement("div");
     item.className =
       "groupItem border border-dashed border-slate-300 dark:border-slate-600 rounded-lg p-3 mb-3 bg-blue-50/30 dark:bg-blue-900/10";
+    const itemIndex = countItems();
+    const fullPath = pathJoin(ctx.path, `${element.key}[${itemIndex}]`);
+    // Add data-group-item attribute for validation scoping - use full path
+    item.setAttribute("data-group-item", fullPath);
     const subCtx = {
-      path: pathJoin(ctx.path, `${element.key}[${countItems()}]`),
+      path: fullPath,
       prefill: prefillObj || {},
     };
-    element.elements.forEach((child) =>
-      item.appendChild(renderElement(child, subCtx)),
-    );
+    element.elements.forEach((child) => {
+      // Skip rendering hidden child elements
+      if (!child.hidden) {
+        item.appendChild(renderElement(child, subCtx));
+      }
+    });
 
     // Only add remove button in edit mode
     if (!state.config.readonly) {
@@ -1628,7 +2890,18 @@ function renderRepeatableGroup(element, ctx, itemsWrap, left, groupWrap) {
     addBtn.type = "button";
     addBtn.className =
       "w-full py-2 px-4 border border-gray-300 rounded-lg text-gray-700 hover:bg-gray-50 flex items-center justify-center mt-3";
-    addBtn.innerHTML = `<svg class="w-4 h-4 mr-2" fill="currentColor" viewBox="0 0 24 24"><path d="M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z"/></svg>${t("addElement")}`;
+    // Create add button content safely
+    const svg = document.createElementNS("http://www.w3.org/2000/svg", "svg");
+    svg.setAttribute("class", "w-4 h-4 mr-2");
+    svg.setAttribute("fill", "currentColor");
+    svg.setAttribute("viewBox", "0 0 24 24");
+
+    const path = document.createElementNS("http://www.w3.org/2000/svg", "path");
+    path.setAttribute("d", "M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z");
+
+    svg.appendChild(path);
+    addBtn.appendChild(svg);
+    addBtn.appendChild(document.createTextNode(t("addElement")));
     groupWrap.appendChild(addBtn);
   }
 
@@ -1636,7 +2909,16 @@ function renderRepeatableGroup(element, ctx, itemsWrap, left, groupWrap) {
     if (state.config.readonly) return;
     const n = countItems();
     if (addBtn) addBtn.disabled = n >= max;
-    left.innerHTML = `<span>${element.label || element.key}</span> <span class="text-slate-500 dark:text-slate-400 text-xs">[${n} / ${max === Infinity ? "∞" : max}, min=${min}]</span>`;
+    // Create elements safely
+    clear(left);
+    const labelSpan = document.createElement("span");
+    labelSpan.textContent = element.label || element.key;
+    const countSpan = document.createElement("span");
+    countSpan.className = "text-slate-500 dark:text-slate-400 text-xs";
+    countSpan.textContent = `[${n} / ${max === Infinity ? "∞" : max}, min=${min}]`;
+    left.appendChild(labelSpan);
+    left.appendChild(document.createTextNode(" "));
+    left.appendChild(countSpan);
   };
 
   if (pre && pre.length) {
@@ -1651,7 +2933,10 @@ function renderRepeatableGroup(element, ctx, itemsWrap, left, groupWrap) {
     addBtn.addEventListener("click", () => addItem(null));
   } else {
     // In readonly mode, just show the label without count controls
-    left.innerHTML = `<span>${element.label || element.key}</span>`;
+    clear(left);
+    const labelSpan = document.createElement("span");
+    labelSpan.textContent = element.label || element.key;
+    left.appendChild(labelSpan);
   }
 }
 
@@ -1661,11 +2946,240 @@ function renderSingleGroup(element, ctx, itemsWrap, left, groupWrap) {
     path: pathJoin(ctx.path, element.key),
     prefill: ctx.prefill?.[element.key] || {},
   };
-  element.elements.forEach((child) =>
-    itemsWrap.appendChild(renderElement(child, subCtx)),
-  );
+  element.elements.forEach((child) => {
+    // Skip rendering hidden child elements
+    if (!child.hidden) {
+      itemsWrap.appendChild(renderElement(child, subCtx));
+    }
+  });
   groupWrap.appendChild(itemsWrap);
-  left.innerHTML = `<span>${element.label || element.key}</span>`;
+  clear(left);
+  const labelSpan = document.createElement("span");
+  labelSpan.textContent = element.label || element.key;
+  left.appendChild(labelSpan);
+}
+
+function renderSingleContainerElement(element, ctx, wrapper, pathKey) {
+  // Same as renderSingleGroup but with updated naming
+  const containerWrap = document.createElement("div");
+  containerWrap.className = "border border-gray-200 rounded-lg p-4 bg-gray-50";
+  containerWrap.setAttribute("data-container", pathKey);
+
+  const header = document.createElement("div");
+  header.className = "flex justify-between items-center mb-4";
+
+  const left = document.createElement("div");
+  left.className = "flex-1";
+
+  const itemsWrap = document.createElement("div");
+  itemsWrap.className = "space-y-4";
+
+  containerWrap.appendChild(header);
+  header.appendChild(left);
+
+  // Single object container
+  const subCtx = {
+    path: pathJoin(ctx.path, element.key),
+    prefill: ctx.prefill?.[element.key] || {},
+  };
+  element.elements.forEach((child) => {
+    // Skip rendering hidden child elements
+    if (!child.hidden) {
+      itemsWrap.appendChild(renderElement(child, subCtx));
+    }
+  });
+  containerWrap.appendChild(itemsWrap);
+  clear(left);
+  const labelSpan = document.createElement("span");
+  labelSpan.textContent = element.label || element.key;
+  left.appendChild(labelSpan);
+
+  wrapper.appendChild(containerWrap);
+}
+
+function renderMultipleContainerElement(element, ctx, wrapper, _pathKey) {
+  // Same as renderRepeatableGroup but with minCount/maxCount from element properties
+  const containerWrap = document.createElement("div");
+  containerWrap.className = "border border-gray-200 rounded-lg p-4 bg-gray-50";
+
+  const header = document.createElement("div");
+  header.className = "flex justify-between items-center mb-4";
+
+  const left = document.createElement("div");
+  left.className = "flex-1";
+
+  const right = document.createElement("div");
+  right.className = "flex gap-2";
+
+  const itemsWrap = document.createElement("div");
+  itemsWrap.className = "space-y-4";
+
+  containerWrap.appendChild(header);
+  header.appendChild(left);
+  if (!state.config.readonly) {
+    header.appendChild(right);
+  }
+
+  const min = element.minCount ?? 0;
+  const max = element.maxCount ?? Infinity;
+  const pre = Array.isArray(ctx.prefill?.[element.key])
+    ? ctx.prefill[element.key]
+    : null;
+
+  const countItems = () =>
+    itemsWrap.querySelectorAll(":scope > .containerItem").length;
+
+  const createAddButton = () => {
+    const add = document.createElement("button");
+    add.type = "button";
+    add.className =
+      "px-3 py-1.5 bg-blue-600 text-white text-sm rounded-lg hover:bg-blue-700 transition-colors";
+    add.textContent = t("addElement");
+    add.onclick = () => {
+      if (countItems() < max) {
+        const idx = countItems();
+        const subCtx = {
+          path: pathJoin(ctx.path, `${element.key}[${idx}]`),
+          prefill: {},
+        };
+        const item = document.createElement("div");
+        item.className =
+          "containerItem border border-gray-300 rounded-lg p-4 bg-white";
+        item.setAttribute("data-container-item", `${element.key}[${idx}]`);
+
+        element.elements.forEach((child) => {
+          // Skip rendering hidden child elements
+          if (!child.hidden) {
+            item.appendChild(renderElement(child, subCtx));
+          }
+        });
+
+        // Only add remove button in edit mode
+        if (!state.config.readonly) {
+          const rem = document.createElement("button");
+          rem.type = "button";
+          rem.className =
+            "absolute top-2 right-2 w-6 h-6 bg-red-500 text-white rounded-full text-xs hover:bg-red-600 transition-colors";
+          rem.textContent = "×";
+          rem.onclick = () => {
+            item.remove();
+            updateAddButton();
+          };
+          item.style.position = "relative";
+          item.appendChild(rem);
+        }
+
+        itemsWrap.appendChild(item);
+        updateAddButton();
+      }
+    };
+    return add;
+  };
+
+  const updateAddButton = () => {
+    const currentCount = countItems();
+    const addBtn = right.querySelector("button");
+    if (addBtn) {
+      addBtn.disabled = currentCount >= max;
+      addBtn.style.opacity = currentCount >= max ? "0.5" : "1";
+    }
+    // Create elements safely
+    clear(left);
+    const labelSpan = document.createElement("span");
+    labelSpan.textContent = element.label || element.key;
+    const countSpan = document.createElement("span");
+    countSpan.className = "text-sm text-gray-500";
+    countSpan.textContent = `(${currentCount}/${max === Infinity ? "∞" : max})`;
+    left.appendChild(labelSpan);
+    left.appendChild(document.createTextNode(" "));
+    left.appendChild(countSpan);
+  };
+
+  if (!state.config.readonly) {
+    right.appendChild(createAddButton());
+  }
+
+  // Pre-fill initial items
+  if (pre && Array.isArray(pre)) {
+    pre.forEach((prefillObj, idx) => {
+      const subCtx = {
+        path: pathJoin(ctx.path, `${element.key}[${idx}]`),
+        prefill: prefillObj || {},
+      };
+      const item = document.createElement("div");
+      item.className =
+        "containerItem border border-gray-300 rounded-lg p-4 bg-white";
+      item.setAttribute("data-container-item", `${element.key}[${idx}]`);
+
+      element.elements.forEach((child) => {
+        // Skip rendering hidden child elements
+        if (!child.hidden) {
+          item.appendChild(renderElement(child, subCtx));
+        }
+      });
+
+      // Only add remove button in edit mode
+      if (!state.config.readonly) {
+        const rem = document.createElement("button");
+        rem.type = "button";
+        rem.className =
+          "absolute top-2 right-2 w-6 h-6 bg-red-500 text-white rounded-full text-xs hover:bg-red-600 transition-colors";
+        rem.textContent = "×";
+        rem.onclick = () => {
+          item.remove();
+          updateAddButton();
+        };
+        item.style.position = "relative";
+        item.appendChild(rem);
+      }
+
+      itemsWrap.appendChild(item);
+    });
+  }
+
+  // Ensure minimum items
+  if (!state.config.readonly) {
+    while (countItems() < min) {
+      const idx = countItems();
+      const subCtx = {
+        path: pathJoin(ctx.path, `${element.key}[${idx}]`),
+        prefill: {},
+      };
+      const item = document.createElement("div");
+      item.className =
+        "containerItem border border-gray-300 rounded-lg p-4 bg-white";
+      item.setAttribute("data-container-item", `${element.key}[${idx}]`);
+
+      element.elements.forEach((child) => {
+        // Skip rendering hidden child elements
+        if (!child.hidden) {
+          item.appendChild(renderElement(child, subCtx));
+        }
+      });
+
+      // Remove button - but disabled if we're at minimum
+      const rem = document.createElement("button");
+      rem.type = "button";
+      rem.className =
+        "absolute top-2 right-2 w-6 h-6 bg-red-500 text-white rounded-full text-xs hover:bg-red-600 transition-colors";
+      rem.textContent = "×";
+      rem.onclick = () => {
+        if (countItems() > min) {
+          item.remove();
+          updateAddButton();
+        }
+      };
+      item.style.position = "relative";
+      item.appendChild(rem);
+
+      itemsWrap.appendChild(item);
+    }
+  }
+
+  containerWrap.appendChild(itemsWrap);
+  updateAddButton();
+
+  wrapper.appendChild(containerWrap);
 }
 
 // Common file preview rendering function for readonly mode
@@ -1699,17 +3213,29 @@ function renderFilePreviewReadonly(resourceId, fileName) {
       try {
         const thumbnailUrl = state.config.getThumbnail(resourceId);
         if (thumbnailUrl) {
-          previewContainer.innerHTML = `<img src="${thumbnailUrl}" alt="${actualFileName}" class="w-full h-auto">`;
+          const img = document.createElement("img");
+          img.src = thumbnailUrl;
+          img.alt = actualFileName || "";
+          img.className = "w-full h-auto";
+          clear(previewContainer);
+          previewContainer.appendChild(img);
         } else {
           // Fallback to icon if getThumbnail returns null/undefined
-          previewContainer.innerHTML = `<div class="aspect-video flex items-center justify-center text-gray-400"><div class="text-center"><div class="text-4xl mb-2">🖼️</div><div class="text-sm">${actualFileName}</div></div></div>`;
+          clear(previewContainer);
+          previewContainer.appendChild(
+            createPreviewElement("🖼️", actualFileName),
+          );
         }
       } catch (error) {
         console.warn("getThumbnail failed for", resourceId, error);
-        previewContainer.innerHTML = `<div class="aspect-video flex items-center justify-center text-gray-400"><div class="text-center"><div class="text-4xl mb-2">🖼️</div><div class="text-sm">${actualFileName}</div></div></div>`;
+        clear(previewContainer);
+        previewContainer.appendChild(
+          createPreviewElement("🖼️", actualFileName),
+        );
       }
     } else {
-      previewContainer.innerHTML = `<div class="aspect-video flex items-center justify-center text-gray-400"><div class="text-center"><div class="text-4xl mb-2">🖼️</div><div class="text-sm">${actualFileName}</div></div></div>`;
+      clear(previewContainer);
+      previewContainer.appendChild(createPreviewElement("🖼️", actualFileName));
     }
   } else if (isVideo) {
     // Video preview - try getThumbnail for video URL
@@ -1717,34 +3243,76 @@ function renderFilePreviewReadonly(resourceId, fileName) {
       try {
         const videoUrl = state.config.getThumbnail(resourceId);
         if (videoUrl) {
-          previewContainer.innerHTML = `
-                        <div class="relative group">
-                            <video class="w-full h-auto" controls preload="auto" muted>
-                                <source src="${videoUrl}" type="${meta?.type || "video/mp4"}">
-                                Ваш браузер не поддерживает видео.
-                            </video>
-                            <div class="absolute inset-0 bg-black bg-opacity-20 opacity-0 group-hover:opacity-100 transition-opacity flex items-center justify-center pointer-events-none">
-                                <div class="bg-white bg-opacity-90 rounded-full p-3">
-                                    <svg class="w-8 h-8 text-gray-800" fill="currentColor" viewBox="0 0 24 24">
-                                        <path d="M8 5v14l11-7z"/>
-                                    </svg>
-                                </div>
-                            </div>
-                        </div>
-                    `;
+          // Create video elements safely
+          const wrapper = document.createElement("div");
+          wrapper.className = "relative group";
+
+          const video = document.createElement("video");
+          video.className = "w-full h-auto";
+          video.controls = true;
+          video.preload = "auto";
+          video.muted = true;
+
+          const source = document.createElement("source");
+          source.src = videoUrl;
+          source.type = meta?.type || "video/mp4";
+
+          video.appendChild(source);
+          video.appendChild(
+            document.createTextNode("Ваш браузер не поддерживает видео."),
+          );
+
+          const overlay = document.createElement("div");
+          overlay.className =
+            "absolute inset-0 bg-black bg-opacity-20 opacity-0 group-hover:opacity-100 transition-opacity flex items-center justify-center pointer-events-none";
+
+          const overlayContent = document.createElement("div");
+          overlayContent.className = "bg-white bg-opacity-90 rounded-full p-3";
+
+          const svg = document.createElementNS(
+            "http://www.w3.org/2000/svg",
+            "svg",
+          );
+          svg.setAttribute("class", "w-8 h-8 text-gray-800");
+          svg.setAttribute("fill", "currentColor");
+          svg.setAttribute("viewBox", "0 0 24 24");
+
+          const path = document.createElementNS(
+            "http://www.w3.org/2000/svg",
+            "path",
+          );
+          path.setAttribute("d", "M8 5v14l11-7z");
+
+          svg.appendChild(path);
+          overlayContent.appendChild(svg);
+          overlay.appendChild(overlayContent);
+
+          wrapper.appendChild(video);
+          wrapper.appendChild(overlay);
+
+          clear(previewContainer);
+          previewContainer.appendChild(wrapper);
         } else {
-          previewContainer.innerHTML = `<div class="aspect-video flex items-center justify-center text-gray-400"><div class="text-center"><div class="text-4xl mb-2">🎥</div><div class="text-sm">${actualFileName}</div></div></div>`;
+          clear(previewContainer);
+          previewContainer.appendChild(
+            createPreviewElement("🎥", actualFileName),
+          );
         }
       } catch (error) {
         console.warn("getThumbnail failed for video", resourceId, error);
-        previewContainer.innerHTML = `<div class="aspect-video flex items-center justify-center text-gray-400"><div class="text-center"><div class="text-4xl mb-2">🎥</div><div class="text-sm">${actualFileName}</div></div></div>`;
+        clear(previewContainer);
+        previewContainer.appendChild(
+          createPreviewElement("🎥", actualFileName),
+        );
       }
     } else {
-      previewContainer.innerHTML = `<div class="aspect-video flex items-center justify-center text-gray-400"><div class="text-center"><div class="text-4xl mb-2">🎥</div><div class="text-sm">${actualFileName}</div></div></div>`;
+      clear(previewContainer);
+      previewContainer.appendChild(createPreviewElement("🎥", actualFileName));
     }
   } else {
     // Other file types
-    previewContainer.innerHTML = `<div class="aspect-video flex items-center justify-center text-gray-400"><div class="text-center"><div class="text-4xl mb-2">📁</div><div class="text-sm">${actualFileName}</div></div></div>`;
+    clear(previewContainer);
+    previewContainer.appendChild(createPreviewElement("📁", actualFileName));
   }
 
   // File name
@@ -1910,6 +3478,8 @@ function saveDraft() {
 
 function clearForm() {
   if (state.formRoot) {
+    // Clean up any existing object URLs before clearing form
+    revokeAllObjectURLs();
     clear(state.formRoot);
   }
 }