@dmitryvim/form-builder 0.1.34 → 0.1.35

package/dist/form-builder.js

@@ -1,56 +1,4 @@
 // 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,
@@ -194,8 +142,6 @@ function renderForm(schema, prefill) {
     return;
   }
 
-  // Clean up any existing object URLs before clearing form
-  revokeAllObjectURLs();
   clear(state.formRoot);
 
   const formEl = document.createElement("div");
@@ -238,17 +184,8 @@ function renderElement(element, ctx) {
     const infoBtn = document.createElement("button");
     infoBtn.type = "button";
     infoBtn.className = "ml-2 text-gray-400 hover:text-gray-600";
-    // 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);
+    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 tooltip
     const tooltipId = `tooltip-${element.key}-${Math.random().toString(36).substr(2, 9)}`;
@@ -479,8 +416,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 managed object URL for preview
-      const videoUrl = createObjectURL(meta.file, resourceId);
+      // Video file - use object URL for preview
+      const videoUrl = URL.createObjectURL(meta.file);
 
       // Remove all conflicting handlers to prevent interference with video controls
       container.onclick = null;
@@ -490,55 +427,39 @@ async function renderFilePreview(container, resourceId, options = {}) {
       container.parentNode.replaceChild(newContainer, container);
       container = newContainer;
 
-      // 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);
+      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>
+      `;
 
       // Add click handlers to the custom buttons
-      changeBtn.onclick = (e) => {
-        e.stopPropagation();
-        if (deps?.picker) {
-          deps.picker.click();
-        }
-      };
+      const changeBtn = container.querySelector(".change-file-btn");
+      if (changeBtn) {
+        changeBtn.onclick = (e) => {
+          e.stopPropagation();
+          if (deps?.picker) {
+            deps.picker.click();
+          }
+        };
+      }
 
-      deleteBtn.onclick = (e) => {
+      const deleteBtn = container.querySelector(".delete-file-btn");
+      if (deleteBtn) {
+        deleteBtn.onclick = (e) => {
           e.stopPropagation();
-          // Clear the file and revoke object URL
-          revokeObjectURL(resourceId);
+          // Clear the file
           state.resourceIndex.delete(resourceId);
           // Update hidden input
           const hiddenInput = container.parentElement.querySelector(
@@ -554,55 +475,27 @@ async function renderFilePreview(container, resourceId, options = {}) {
           if (deps?.dragHandler) {
             setupDragAndDrop(container, deps.dragHandler);
           }
-          // 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);
+          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>
+          `;
         };
+      }
     } else {
-      // 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);
+      // 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>`;
     }
 
     // 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 and revoke object URL
-        revokeObjectURL(resourceId);
+        // Clear the file
         state.resourceIndex.delete(resourceId);
         // Update hidden input
         const hiddenInput = container.parentElement.querySelector(
@@ -611,29 +504,15 @@ async function renderFilePreview(container, resourceId, options = {}) {
         if (hiddenInput) {
           hiddenInput.value = "";
         }
-        // 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);
+        // 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>
+                `;
       });
     }
   } else if (state.config.getThumbnail) {
@@ -646,50 +525,21 @@ async function renderFilePreview(container, resourceId, options = {}) {
         container.appendChild(img);
       } else {
         // Fallback to file icon
-        // 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);
+        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>`;
       }
     } catch (error) {
       console.warn("Thumbnail loading failed:", error);
-      // 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);
+      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>`;
     }
 
     // Add delete button for edit mode
     if (!isReadonly) {
       addDeleteButton(container, () => {
-        // Clear the file and revoke object URL
-        revokeObjectURL(resourceId);
+        // Clear the file
         state.resourceIndex.delete(resourceId);
         // Update hidden input
         const hiddenInput = container.parentElement.querySelector(
@@ -698,35 +548,22 @@ async function renderFilePreview(container, resourceId, options = {}) {
         if (hiddenInput) {
           hiddenInput.value = "";
         }
-        // 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);
+        // 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>
+                `;
       });
     }
   } else {
-    // No file and no getThumbnail config - fallback - create elements safely
-    clear(container);
-    container.appendChild(createPreviewElement("🖼️", fileName));
+    // 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>`;
   }
 
   // Add click handler for download in readonly mode
@@ -779,11 +616,11 @@ function renderResourcePills(container, rids, onRemove) {
       slot.onclick = () => {
         // 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")) {
+        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")) {
+        if (!filesWrapper && container.classList.contains('space-y-2')) {
           filesWrapper = container;
         }
         const fileInput = filesWrapper?.querySelector('input[type="file"]');
@@ -804,11 +641,11 @@ function renderResourcePills(container, rids, onRemove) {
       e.stopPropagation();
       // 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")) {
+      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")) {
+      if (!filesWrapper && container.classList.contains('space-y-2')) {
         filesWrapper = container;
       }
       const fileInput = filesWrapper?.querySelector('input[type="file"]');
@@ -873,179 +710,76 @@ function renderResourcePills(container, rids, onRemove) {
             img.src = url;
             slot.appendChild(img);
           } else {
-            // 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);
+            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>`;
           }
         } else {
-          // 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);
+          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>`;
         }
       } else if (meta && meta.type?.startsWith("video/")) {
         if (meta.file && meta.file instanceof File) {
-          // 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);
+          // 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>
+          `;
         } else if (state.config.getThumbnail) {
           // Use getThumbnail for uploaded video files
           const videoUrl = state.config.getThumbnail(rid);
           if (videoUrl) {
-            // 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);
+            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>
+            `;
           } else {
-            // 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);
+            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>`;
           }
         } else {
-          // 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);
+          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>`;
         }
       } else {
-        // 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);
+        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>`;
       }
 
       // Add remove button overlay (similar to file field)
@@ -1069,25 +803,16 @@ 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";
-      // 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.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>';
       slot.onclick = () => {
         // 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")) {
+        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")) {
+        if (!filesWrapper && container.classList.contains('space-y-2')) {
           filesWrapper = container;
         }
         const fileInput = filesWrapper?.querySelector('input[type="file"]');
@@ -1141,37 +866,14 @@ async function handleFileSelect(file, container, fieldName, deps = null) {
   });
 
   // Create hidden input to store the resource ID
-  // 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(
+  let hiddenInput = container.parentElement.querySelector(
     'input[type="hidden"]',
   );
   if (!hiddenInput) {
     hiddenInput = document.createElement("input");
     hiddenInput.type = "hidden";
     hiddenInput.name = fieldName;
-    parentElement.appendChild(hiddenInput);
+    container.parentElement.appendChild(hiddenInput);
   }
   hiddenInput.value = rid;
 
@@ -1342,17 +1044,11 @@ function validateForm(skipValidation = false) {
             values.push(val);
 
             if (!skipValidation && val) {
-              if (
-                element.minLength !== null &&
-                val.length < element.minLength
-              ) {
+              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
-              ) {
+              if (element.maxLength !== null && val.length > element.maxLength) {
                 errors.push(`${key}[${index}]: maxLength=${element.maxLength}`);
                 markValidity(input, `maxLength=${element.maxLength}`);
               }
@@ -1377,7 +1073,7 @@ function validateForm(skipValidation = false) {
           if (!skipValidation) {
             const minCount = element.minCount ?? 1;
             const maxCount = element.maxCount ?? 10;
-            const nonEmptyValues = values.filter((v) => v.trim() !== "");
+            const nonEmptyValues = values.filter(v => v.trim() !== "");
 
             if (element.required && nonEmptyValues.length === 0) {
               errors.push(`${key}: required`);
@@ -1460,9 +1156,7 @@ function validateForm(skipValidation = false) {
               markValidity(input, `> max=${element.max}`);
             }
 
-            const d = Number.isInteger(element.decimals ?? 0)
-              ? element.decimals
-              : 0;
+            const d = Number.isInteger(element.decimals ?? 0) ? element.decimals : 0;
             markValidity(input, null);
             values.push(Number(v.toFixed(d)));
           });
@@ -1471,7 +1165,7 @@ function validateForm(skipValidation = false) {
           if (!skipValidation) {
             const minCount = element.minCount ?? 1;
             const maxCount = element.maxCount ?? 10;
-            const nonNullValues = values.filter((v) => v !== null);
+            const nonNullValues = values.filter(v => v !== null);
 
             if (element.required && nonNullValues.length === 0) {
               errors.push(`${key}: required`);
@@ -1535,7 +1229,7 @@ function validateForm(skipValidation = false) {
           if (!skipValidation) {
             const minCount = element.minCount ?? 1;
             const maxCount = element.maxCount ?? 10;
-            const nonEmptyValues = values.filter((v) => v !== "");
+            const nonEmptyValues = values.filter(v => v !== "");
 
             if (element.required && nonEmptyValues.length === 0) {
               errors.push(`${key}: required`);
@@ -1567,11 +1261,9 @@ function validateForm(skipValidation = false) {
           // 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 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) {
@@ -1659,18 +1351,12 @@ function validateForm(skipValidation = false) {
           const items = [];
           // Use full path for nested group element search
           const fullKey = pathJoin(ctx.path, key);
-          const itemElements = scopeRoot.querySelectorAll(
-            `[name^="${fullKey}["]`,
-          );
+          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+)\\]`,
-              ),
-            );
+            const match = el.name.match(new RegExp(`^${fullKey.replace(/[.*+?^${}()|[\]\\]/g, '\\$&')}\\[(\\d+)\\]`));
             if (match) {
               actualIndices.add(parseInt(match[1]));
             }
@@ -1688,8 +1374,7 @@ function validateForm(skipValidation = false) {
             element.elements.forEach((child) => {
               if (child.hidden) {
                 // For hidden child elements, use their default value
-                itemData[child.key] =
-                  child.default !== undefined ? child.default : "";
+                itemData[child.key] = child.default !== undefined ? child.default : "";
               } else {
                 const childKey = `${fullKey}[${actualIndex}].${child.key}`;
                 itemData[child.key] = validateElement(
@@ -1710,8 +1395,7 @@ function validateForm(skipValidation = false) {
           element.elements.forEach((child) => {
             if (child.hidden) {
               // For hidden child elements, use their default value
-              groupData[child.key] =
-                child.default !== undefined ? child.default : "";
+              groupData[child.key] = child.default !== undefined ? child.default : "";
             } else {
               const childKey = `${key}.${child.key}`;
               groupData[child.key] = validateElement(
@@ -1743,8 +1427,7 @@ function validateForm(skipValidation = false) {
             element.elements.forEach((child) => {
               if (child.hidden) {
                 // For hidden child elements, use their default value
-                itemData[child.key] =
-                  child.default !== undefined ? child.default : "";
+                itemData[child.key] = child.default !== undefined ? child.default : "";
               } else {
                 const childKey = `${key}[${i}].${child.key}`;
                 itemData[child.key] = validateElement(
@@ -1782,8 +1465,7 @@ function validateForm(skipValidation = false) {
           element.elements.forEach((child) => {
             if (child.hidden) {
               // For hidden child elements, use their default value
-              containerData[child.key] =
-                child.default !== undefined ? child.default : "";
+              containerData[child.key] = child.default !== undefined ? child.default : "";
             } else {
               const childKey = `${key}.${child.key}`;
               containerData[child.key] = validateElement(
@@ -1868,8 +1550,7 @@ function renderMultipleTextElement(element, ctx, wrapper, pathKey) {
 
     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.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;
@@ -1890,16 +1571,15 @@ function renderMultipleTextElement(element, ctx, wrapper, pathKey) {
 
   function updateRemoveButtons() {
     if (state.config.readonly) return;
-    const items = container.querySelectorAll(".multiple-text-item");
+    const items = container.querySelectorAll('.multiple-text-item');
     const currentCount = items.length;
     items.forEach((item) => {
-      let removeBtn = item.querySelector(".remove-item-btn");
+      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 = document.createElement('button');
+        removeBtn.type = 'button';
+        removeBtn.className = 'remove-item-btn px-2 py-1 text-red-600 hover:bg-red-50 rounded';
+        removeBtn.innerHTML = '✕';
         removeBtn.onclick = () => {
           const currentIndex = Array.from(container.children).indexOf(item);
           if (container.children.length > minCount) {
@@ -1914,8 +1594,8 @@ function renderMultipleTextElement(element, ctx, wrapper, pathKey) {
       }
       const disabled = currentCount <= minCount;
       removeBtn.disabled = disabled;
-      removeBtn.style.opacity = disabled ? "0.5" : "1";
-      removeBtn.style.pointerEvents = disabled ? "none" : "auto";
+      removeBtn.style.opacity = disabled ? '0.5' : '1';
+      removeBtn.style.pointerEvents = disabled ? 'none' : 'auto';
     });
   }
 
@@ -1926,9 +1606,8 @@ function renderMultipleTextElement(element, ctx, wrapper, pathKey) {
     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.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 || "");
@@ -1940,7 +1619,7 @@ function renderMultipleTextElement(element, ctx, wrapper, pathKey) {
   }
 
   // Render initial items
-  values.forEach((value) => addTextItem(value));
+  values.forEach(value => addTextItem(value));
   updateAddButton();
   updateRemoveButtons();
 
@@ -2000,8 +1679,7 @@ function renderMultipleTextareaElement(element, ctx, wrapper, pathKey) {
     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.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;
@@ -2023,16 +1701,15 @@ function renderMultipleTextareaElement(element, ctx, wrapper, pathKey) {
 
   function updateRemoveButtons() {
     if (state.config.readonly) return;
-    const items = container.querySelectorAll(".multiple-textarea-item");
+    const items = container.querySelectorAll('.multiple-textarea-item');
     const currentCount = items.length;
     items.forEach((item) => {
-      let removeBtn = item.querySelector(".remove-item-btn");
+      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 = 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.innerHTML = '✕ Remove';
         removeBtn.onclick = () => {
           const currentIndex = Array.from(container.children).indexOf(item);
           if (container.children.length > minCount) {
@@ -2047,8 +1724,8 @@ function renderMultipleTextareaElement(element, ctx, wrapper, pathKey) {
       }
       const disabled = currentCount <= minCount;
       removeBtn.disabled = disabled;
-      removeBtn.style.opacity = disabled ? "0.5" : "1";
-      removeBtn.style.pointerEvents = disabled ? "none" : "auto";
+      removeBtn.style.opacity = disabled ? '0.5' : '1';
+      removeBtn.style.pointerEvents = disabled ? 'none' : 'auto';
     });
   }
 
@@ -2059,9 +1736,8 @@ function renderMultipleTextareaElement(element, ctx, wrapper, pathKey) {
     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.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 || "");
@@ -2073,7 +1749,7 @@ function renderMultipleTextareaElement(element, ctx, wrapper, pathKey) {
   }
 
   // Render initial items
-  values.forEach((value) => addTextareaItem(value));
+  values.forEach(value => addTextareaItem(value));
   updateAddButton();
   updateRemoveButtons();
 
@@ -2137,8 +1813,7 @@ function renderMultipleNumberElement(element, ctx, wrapper, pathKey) {
 
     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.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;
@@ -2162,16 +1837,15 @@ function renderMultipleNumberElement(element, ctx, wrapper, pathKey) {
 
   function updateRemoveButtons() {
     if (state.config.readonly) return;
-    const items = container.querySelectorAll(".multiple-number-item");
+    const items = container.querySelectorAll('.multiple-number-item');
     const currentCount = items.length;
     items.forEach((item) => {
-      let removeBtn = item.querySelector(".remove-item-btn");
+      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 = document.createElement('button');
+        removeBtn.type = 'button';
+        removeBtn.className = 'remove-item-btn px-2 py-1 text-red-600 hover:bg-red-50 rounded';
+        removeBtn.innerHTML = '✕';
         removeBtn.onclick = () => {
           const currentIndex = Array.from(container.children).indexOf(item);
           if (container.children.length > minCount) {
@@ -2186,8 +1860,8 @@ function renderMultipleNumberElement(element, ctx, wrapper, pathKey) {
       }
       const disabled = currentCount <= minCount;
       removeBtn.disabled = disabled;
-      removeBtn.style.opacity = disabled ? "0.5" : "1";
-      removeBtn.style.pointerEvents = disabled ? "none" : "auto";
+      removeBtn.style.opacity = disabled ? '0.5' : '1';
+      removeBtn.style.pointerEvents = disabled ? 'none' : 'auto';
     });
   }
 
@@ -2198,9 +1872,8 @@ function renderMultipleNumberElement(element, ctx, wrapper, pathKey) {
     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.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 || "");
@@ -2212,7 +1885,7 @@ function renderMultipleNumberElement(element, ctx, wrapper, pathKey) {
   }
 
   // Render initial items
-  values.forEach((value) => addNumberItem(value));
+  values.forEach(value => addNumberItem(value));
   updateAddButton();
   updateRemoveButtons();
 
@@ -2258,7 +1931,7 @@ function renderMultipleSelectElement(element, ctx, wrapper, pathKey) {
   const maxCount = element.maxCount ?? 10;
 
   while (values.length < minCount) {
-    values.push(element.default || element.options?.[0]?.value || "");
+    values.push(element.default || (element.options?.[0]?.value || ""));
   }
 
   const container = document.createElement("div");
@@ -2280,8 +1953,7 @@ function renderMultipleSelectElement(element, ctx, wrapper, pathKey) {
     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.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
@@ -2311,16 +1983,15 @@ function renderMultipleSelectElement(element, ctx, wrapper, pathKey) {
 
   function updateRemoveButtons() {
     if (state.config.readonly) return;
-    const items = container.querySelectorAll(".multiple-select-item");
+    const items = container.querySelectorAll('.multiple-select-item');
     const currentCount = items.length;
     items.forEach((item) => {
-      let removeBtn = item.querySelector(".remove-item-btn");
+      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 = document.createElement('button');
+        removeBtn.type = 'button';
+        removeBtn.className = 'remove-item-btn px-2 py-1 text-red-600 hover:bg-red-50 rounded';
+        removeBtn.innerHTML = '✕';
         removeBtn.onclick = () => {
           const currentIndex = Array.from(container.children).indexOf(item);
           if (container.children.length > minCount) {
@@ -2335,8 +2006,8 @@ function renderMultipleSelectElement(element, ctx, wrapper, pathKey) {
       }
       const disabled = currentCount <= minCount;
       removeBtn.disabled = disabled;
-      removeBtn.style.opacity = disabled ? "0.5" : "1";
-      removeBtn.style.pointerEvents = disabled ? "none" : "auto";
+      removeBtn.style.opacity = disabled ? '0.5' : '1';
+      removeBtn.style.pointerEvents = disabled ? 'none' : 'auto';
     });
   }
 
@@ -2347,12 +2018,10 @@ function renderMultipleSelectElement(element, ctx, wrapper, pathKey) {
     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.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 || "";
+        const defaultValue = element.default || (element.options?.[0]?.value || "");
         values.push(defaultValue);
         addSelectItem(defaultValue);
         updateAddButton();
@@ -2363,7 +2032,7 @@ function renderMultipleSelectElement(element, ctx, wrapper, pathKey) {
   }
 
   // Render initial items
-  values.forEach((value) => addSelectItem(value));
+  values.forEach(value => addSelectItem(value));
   updateAddButton();
   updateRemoveButtons();
 
@@ -2385,11 +2054,7 @@ 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";
-      // Create empty state content safely
-      const textDiv = document.createElement("div");
-      textDiv.className = "text-center";
-      textDiv.textContent = t("noFileSelected");
-      emptyState.appendChild(textDiv);
+      emptyState.innerHTML = `<div class="text-center">${t("noFileSelected")}</div>`;
       wrapper.appendChild(emptyState);
     }
   } else {
@@ -2449,14 +2114,8 @@ 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";
-    // 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")));
+    uploadText.innerHTML = `<span class="underline cursor-pointer">${t("uploadText")}</span> ${t("dragDropTextSingle")}`;
+    uploadText.querySelector("span").onclick = () => picker.click();
     fileWrapper.appendChild(uploadText);
 
     // Add hint
@@ -2515,29 +2174,14 @@ function handleInitialFileData(
 }
 
 function setEmptyFileContainer(fileContainer) {
-  // 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);
+  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>
+  `;
 }
 
 function renderFilesElement(element, ctx, wrapper, pathKey) {
@@ -2554,16 +2198,7 @@ function renderFilesElement(element, ctx, wrapper, pathKey) {
         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);
+      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>`;
     }
 
     wrapper.appendChild(resultsWrapper);
@@ -2644,16 +2279,7 @@ function renderMultipleFileElement(element, ctx, wrapper, pathKey) {
         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);
+      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>`;
     }
 
     wrapper.appendChild(resultsWrapper);
@@ -2695,18 +2321,17 @@ function renderMultipleFileElement(element, ctx, wrapper, pathKey) {
       // 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)`
-          : "";
+      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");
+      const existingCount = filesWrapper.querySelector('.file-count-info');
       if (existingCount) existingCount.remove();
 
-      countInfo.className += " file-count-info";
+      countInfo.className += ' file-count-info';
       filesWrapper.appendChild(countInfo);
     };
 
@@ -2890,18 +2515,7 @@ 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";
-    // 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")));
+    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")}`;
     groupWrap.appendChild(addBtn);
   }
 
@@ -2909,16 +2523,7 @@ function renderRepeatableGroup(element, ctx, itemsWrap, left, groupWrap) {
     if (state.config.readonly) return;
     const n = countItems();
     if (addBtn) addBtn.disabled = n >= max;
-    // 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);
+    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>`;
   };
 
   if (pre && pre.length) {
@@ -2933,10 +2538,7 @@ function renderRepeatableGroup(element, ctx, itemsWrap, left, groupWrap) {
     addBtn.addEventListener("click", () => addItem(null));
   } else {
     // In readonly mode, just show the label without count controls
-    clear(left);
-    const labelSpan = document.createElement("span");
-    labelSpan.textContent = element.label || element.key;
-    left.appendChild(labelSpan);
+    left.innerHTML = `<span>${element.label || element.key}</span>`;
   }
 }
 
@@ -2953,10 +2555,7 @@ function renderSingleGroup(element, ctx, itemsWrap, left, groupWrap) {
     }
   });
   groupWrap.appendChild(itemsWrap);
-  clear(left);
-  const labelSpan = document.createElement("span");
-  labelSpan.textContent = element.label || element.key;
-  left.appendChild(labelSpan);
+  left.innerHTML = `<span>${element.label || element.key}</span>`;
 }
 
 function renderSingleContainerElement(element, ctx, wrapper, pathKey) {
@@ -2989,10 +2588,7 @@ function renderSingleContainerElement(element, ctx, wrapper, pathKey) {
     }
   });
   containerWrap.appendChild(itemsWrap);
-  clear(left);
-  const labelSpan = document.createElement("span");
-  labelSpan.textContent = element.label || element.key;
-  left.appendChild(labelSpan);
+  left.innerHTML = `<span>${element.label || element.key}</span>`;
 
   wrapper.appendChild(containerWrap);
 }
@@ -3043,8 +2639,7 @@ function renderMultipleContainerElement(element, ctx, wrapper, _pathKey) {
           prefill: {},
         };
         const item = document.createElement("div");
-        item.className =
-          "containerItem border border-gray-300 rounded-lg p-4 bg-white";
+        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) => {
@@ -3083,16 +2678,7 @@ function renderMultipleContainerElement(element, ctx, wrapper, _pathKey) {
       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);
+    left.innerHTML = `<span>${element.label || element.key}</span> <span class="text-sm text-gray-500">(${currentCount}/${max === Infinity ? '∞' : max})</span>`;
   };
 
   if (!state.config.readonly) {
@@ -3107,8 +2693,7 @@ function renderMultipleContainerElement(element, ctx, wrapper, _pathKey) {
         prefill: prefillObj || {},
       };
       const item = document.createElement("div");
-      item.className =
-        "containerItem border border-gray-300 rounded-lg p-4 bg-white";
+      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) => {
@@ -3146,8 +2731,7 @@ function renderMultipleContainerElement(element, ctx, wrapper, _pathKey) {
         prefill: {},
       };
       const item = document.createElement("div");
-      item.className =
-        "containerItem border border-gray-300 rounded-lg p-4 bg-white";
+      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) => {
@@ -3213,29 +2797,17 @@ function renderFilePreviewReadonly(resourceId, fileName) {
       try {
         const thumbnailUrl = state.config.getThumbnail(resourceId);
         if (thumbnailUrl) {
-          const img = document.createElement("img");
-          img.src = thumbnailUrl;
-          img.alt = actualFileName || "";
-          img.className = "w-full h-auto";
-          clear(previewContainer);
-          previewContainer.appendChild(img);
+          previewContainer.innerHTML = `<img src="${thumbnailUrl}" alt="${actualFileName}" class="w-full h-auto">`;
         } else {
           // Fallback to icon if getThumbnail returns null/undefined
-          clear(previewContainer);
-          previewContainer.appendChild(
-            createPreviewElement("🖼️", actualFileName),
-          );
+          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>`;
         }
       } catch (error) {
         console.warn("getThumbnail failed for", resourceId, error);
-        clear(previewContainer);
-        previewContainer.appendChild(
-          createPreviewElement("🖼️", actualFileName),
-        );
+        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>`;
       }
     } else {
-      clear(previewContainer);
-      previewContainer.appendChild(createPreviewElement("🖼️", actualFileName));
+      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>`;
     }
   } else if (isVideo) {
     // Video preview - try getThumbnail for video URL
@@ -3243,76 +2815,34 @@ function renderFilePreviewReadonly(resourceId, fileName) {
       try {
         const videoUrl = state.config.getThumbnail(resourceId);
         if (videoUrl) {
-          // 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);
+          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>
+                    `;
         } else {
-          clear(previewContainer);
-          previewContainer.appendChild(
-            createPreviewElement("🎥", actualFileName),
-          );
+          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>`;
         }
       } catch (error) {
         console.warn("getThumbnail failed for video", resourceId, error);
-        clear(previewContainer);
-        previewContainer.appendChild(
-          createPreviewElement("🎥", actualFileName),
-        );
+        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>`;
       }
     } else {
-      clear(previewContainer);
-      previewContainer.appendChild(createPreviewElement("🎥", actualFileName));
+      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>`;
     }
   } else {
     // Other file types
-    clear(previewContainer);
-    previewContainer.appendChild(createPreviewElement("📁", actualFileName));
+    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>`;
   }
 
   // File name
@@ -3478,8 +3008,6 @@ function saveDraft() {
 
 function clearForm() {
   if (state.formRoot) {
-    // Clean up any existing object URLs before clearing form
-    revokeAllObjectURLs();
     clear(state.formRoot);
   }
 }