@dmitryvim/form-builder 0.1.34 → 0.1.37

package/dist/form-builder.js

@@ -1,61 +1,10 @@
 // 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,
   formRoot: null,
   resourceIndex: new Map(),
+  externalActions: null, // Store external actions for the current form
   version: "1.0.0",
   config: {
     // File upload configuration
@@ -181,7 +130,7 @@ function validateSchema(schema) {
 }
 
 // Form rendering
-function renderForm(schema, prefill) {
+function renderForm(schema, prefill, actions) {
   const errors = validateSchema(schema);
   if (errors.length > 0) {
     console.error("Schema validation errors:", errors);
@@ -189,13 +138,13 @@ function renderForm(schema, prefill) {
   }
 
   state.schema = schema;
+  state.externalActions = actions || null;
+
   if (!state.formRoot) {
     console.error("No form root element set. Call setFormRoot() first.");
     return;
   }
 
-  // Clean up any existing object URLs before clearing form
-  revokeAllObjectURLs();
   clear(state.formRoot);
 
   const formEl = document.createElement("div");
@@ -214,11 +163,20 @@ function renderForm(schema, prefill) {
   });
 
   state.formRoot.appendChild(formEl);
+
+  // Render external actions after form is built (only in readonly mode)
+  if (
+    state.config.readonly &&
+    state.externalActions &&
+    Array.isArray(state.externalActions)
+  ) {
+    renderExternalActions();
+  }
 }
 
 function renderElement(element, ctx) {
   const wrapper = document.createElement("div");
-  wrapper.className = "mb-6";
+  wrapper.className = "mb-6 fb-field-wrapper";
 
   const label = document.createElement("div");
   label.className = "flex items-center mb-2";
@@ -238,17 +196,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)}`;
@@ -356,7 +305,7 @@ function renderElement(element, ctx) {
         const actionBtn = document.createElement("button");
         actionBtn.type = "button";
         actionBtn.className =
-          "px-3 py-1.5 text-sm bg-blue-50 border border-blue-200 text-blue-700 rounded-lg hover:bg-blue-100 transition-colors";
+          "px-3 py-2 text-sm border border-gray-300 text-gray-700 rounded-lg hover:bg-gray-50 transition-colors";
         actionBtn.textContent = action.label;
 
         actionBtn.addEventListener("click", (e) => {
@@ -367,7 +316,15 @@ function renderElement(element, ctx) {
             state.config.actionHandler &&
             typeof state.config.actionHandler === "function"
           ) {
-            state.config.actionHandler(action.value);
+            // For schema-based actions (old system), call with just the value for backward compatibility
+            // Check if the handler expects 2 parameters (new system) or 1 parameter (old system)
+            if (state.config.actionHandler.length > 1) {
+              // New system: pass related_field (element key) and value
+              state.config.actionHandler(element.key, action.value);
+            } else {
+              // Old system: pass only value for backward compatibility
+              state.config.actionHandler(action.value);
+            }
           }
         });
 
@@ -479,8 +436,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 +447,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 +495,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 +524,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 +545,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 +568,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
@@ -873,179 +730,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,17 +823,8 @@ 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;
@@ -1141,37 +886,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;
 
@@ -1225,6 +947,125 @@ function addDeleteButton(container, onDelete) {
   container.appendChild(overlay);
 }
 
+// JSON path resolution for external actions (currently unused but kept for future use)
+// eslint-disable-next-line no-unused-vars
+function resolveFieldPath(path, formData) {
+  // Remove leading $input_data. prefix if present
+  const cleanPath = path.replace(/^\$input_data\./, "");
+
+  // Split path into segments, handling array notation
+  const segments = cleanPath.split(/[.[\]]/).filter(Boolean);
+
+  // Try to find the corresponding form element
+  return findElementByPath(segments, formData);
+}
+
+function findElementByPath(segments, data, currentPath = "") {
+  if (segments.length === 0) return currentPath;
+
+  const [head, ...tail] = segments;
+
+  // Check if this is an array index
+  const isArrayIndex = /^\d+$/.test(head);
+
+  if (isArrayIndex) {
+    // Array index case: build path like "fieldName[index]"
+    const newPath = currentPath ? `${currentPath}[${head}]` : `[${head}]`;
+    return findElementByPath(tail, data, newPath);
+  } else {
+    // Regular field name
+    const newPath = currentPath ? `${currentPath}.${head}` : head;
+    return findElementByPath(tail, data, newPath);
+  }
+}
+
+function findFormElementByFieldPath(fieldPath) {
+  // Try to find the form element that corresponds to the field path
+  // This looks for elements with name attributes that match the path pattern
+
+  if (!state.formRoot) return null;
+
+  // Try exact match first
+  let element = state.formRoot.querySelector(`[name="${fieldPath}"]`);
+  if (element) return element;
+
+  // Try with array notation variations
+  const variations = [
+    fieldPath,
+    fieldPath.replace(/\[(\d+)\]/g, "[$1]"), // normalize array notation
+    fieldPath.replace(/\./g, "[") +
+      "]".repeat((fieldPath.match(/\./g) || []).length), // convert dots to brackets
+  ];
+
+  for (const variation of variations) {
+    element = state.formRoot.querySelector(`[name="${variation}"]`);
+    if (element) return element;
+  }
+
+  return null;
+}
+
+function renderExternalActions() {
+  if (!state.externalActions || !Array.isArray(state.externalActions)) return;
+
+  state.externalActions.forEach((action) => {
+    if (!action.related_field || !action.value || !action.label) return;
+
+    // Find the form element for this related field
+    const fieldElement = findFormElementByFieldPath(action.related_field);
+    if (!fieldElement) {
+      console.warn(
+        `External action: Could not find form element for field "${action.related_field}"`,
+      );
+      return;
+    }
+
+    // Find the wrapper element that contains the field using stable class
+    let wrapper = fieldElement.closest(".fb-field-wrapper");
+    if (!wrapper) {
+      wrapper = fieldElement.parentElement;
+    }
+
+    if (!wrapper) {
+      console.warn(
+        `External action: Could not find wrapper for field "${action.related_field}"`,
+      );
+      return;
+    }
+
+    // Check if we already added external actions to this wrapper
+    if (wrapper.querySelector(".external-actions-container")) return;
+
+    // Create actions container
+    const actionsContainer = document.createElement("div");
+    actionsContainer.className =
+      "external-actions-container mt-4 flex flex-wrap gap-2";
+
+    // Create action button
+    const actionBtn = document.createElement("button");
+    actionBtn.type = "button";
+    actionBtn.className =
+      "px-3 py-2 text-sm border border-gray-300 text-gray-700 rounded-lg hover:bg-gray-50 transition-colors";
+    actionBtn.textContent = action.label;
+
+    actionBtn.addEventListener("click", (e) => {
+      e.preventDefault();
+      e.stopPropagation();
+
+      if (
+        state.config.actionHandler &&
+        typeof state.config.actionHandler === "function"
+      ) {
+        // Call with both related_field and value for the new actions system
+        state.config.actionHandler(action.related_field, action.value);
+      }
+    });
+
+    actionsContainer.appendChild(actionBtn);
+    wrapper.appendChild(actionsContainer);
+  });
+}
+
 function showTooltip(tooltipId, button) {
   const tooltip = document.getElementById(tooltipId);
   const isCurrentlyVisible = !tooltip.classList.contains("hidden");
@@ -1899,7 +1740,7 @@ function renderMultipleTextElement(element, ctx, wrapper, pathKey) {
         removeBtn.type = "button";
         removeBtn.className =
           "remove-item-btn px-2 py-1 text-red-600 hover:bg-red-50 rounded";
-        removeBtn.textContent = "✕";
+        removeBtn.innerHTML = "✕";
         removeBtn.onclick = () => {
           const currentIndex = Array.from(container.children).indexOf(item);
           if (container.children.length > minCount) {
@@ -2032,7 +1873,7 @@ function renderMultipleTextareaElement(element, ctx, wrapper, pathKey) {
         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.innerHTML = "✕ Remove";
         removeBtn.onclick = () => {
           const currentIndex = Array.from(container.children).indexOf(item);
           if (container.children.length > minCount) {
@@ -2171,7 +2012,7 @@ function renderMultipleNumberElement(element, ctx, wrapper, pathKey) {
         removeBtn.type = "button";
         removeBtn.className =
           "remove-item-btn px-2 py-1 text-red-600 hover:bg-red-50 rounded";
-        removeBtn.textContent = "✕";
+        removeBtn.innerHTML = "✕";
         removeBtn.onclick = () => {
           const currentIndex = Array.from(container.children).indexOf(item);
           if (container.children.length > minCount) {
@@ -2320,7 +2161,7 @@ function renderMultipleSelectElement(element, ctx, wrapper, pathKey) {
         removeBtn.type = "button";
         removeBtn.className =
           "remove-item-btn px-2 py-1 text-red-600 hover:bg-red-50 rounded";
-        removeBtn.textContent = "✕";
+        removeBtn.innerHTML = "✕";
         removeBtn.onclick = () => {
           const currentIndex = Array.from(container.children).indexOf(item);
           if (container.children.length > minCount) {
@@ -2385,11 +2226,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 +2286,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 +2346,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 +2370,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 +2451,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);
@@ -2890,18 +2688,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 +2696,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 +2711,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 +2728,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 +2761,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);
 }
@@ -3083,16 +2852,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) {
@@ -3213,29 +2973,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 +2991,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 +3184,6 @@ function saveDraft() {
 
 function clearForm() {
   if (state.formRoot) {
-    // Clean up any existing object URLs before clearing form
-    revokeAllObjectURLs();
     clear(state.formRoot);
   }
 }