@dmitryvim/form-builder 0.1.25 → 0.1.28

package/dist/form-builder.js

@@ -15,6 +15,30 @@ const state = {
     enableFilePreview: true,
     maxPreviewSize: "200px",
     readonly: false,
+    // Internationalization
+    locale: "en",
+    translations: {
+      en: {
+        addElement: "Add Element",
+        removeElement: "Remove",
+        uploadText: "Upload",
+        dragDropText: "or drag and drop files",
+        dragDropTextSingle: "or drag and drop file",
+        clickDragText: "Click or drag file",
+        noFileSelected: "No file selected",
+        noFilesSelected: "No files selected",
+      },
+      ru: {
+        addElement: "Добавить элемент",
+        removeElement: "Удалить",
+        uploadText: "Загрузите",
+        dragDropText: "или перетащите файлы",
+        dragDropTextSingle: "или перетащите файл",
+        clickDragText: "Нажмите или перетащите файл",
+        noFileSelected: "Файл не выбран",
+        noFilesSelected: "Нет файлов",
+      },
+    },
   },
 };
 
@@ -35,6 +59,14 @@ function clear(node) {
   while (node.firstChild) node.removeChild(node.firstChild);
 }
 
+// Translation function
+function t(key) {
+  const locale = state.config.locale || "en";
+  const translations =
+    state.config.translations[locale] || state.config.translations.en;
+  return translations[key] || key;
+}
+
 // Schema validation
 function validateSchema(schema) {
   const errors = [];
@@ -113,7 +145,7 @@ function renderForm(schema, prefill) {
   const formEl = document.createElement("div");
   formEl.className = "space-y-6";
 
-  schema.elements.forEach((element, index) => {
+  schema.elements.forEach((element, _index) => {
     const block = renderElement(element, {
       path: "",
       prefill: prefill || {},
@@ -191,384 +223,23 @@ function renderElement(element, ctx) {
       break;
 
     case "file":
-      // TODO: Extract to renderFileElement() function
-      if (state.config.readonly) {
-        // Readonly mode: use common preview function
-        const initial = ctx.prefill[element.key] || element.default;
-        if (initial) {
-          const filePreview = renderFilePreviewReadonly(initial);
-          wrapper.appendChild(filePreview);
-        } else {
-          const emptyState = document.createElement("div");
-          emptyState.className =
-            "aspect-video bg-gray-100 rounded-lg flex items-center justify-center text-gray-500";
-          emptyState.innerHTML = '<div class="text-center">Нет файла</div>';
-          wrapper.appendChild(emptyState);
-        }
-      } else {
-        // Edit mode: normal file input
-        const fileWrapper = document.createElement("div");
-        fileWrapper.className = "space-y-2";
-
-        const picker = document.createElement("input");
-        picker.type = "file";
-        picker.name = pathKey;
-        picker.style.display = "none"; // Hide default input
-        if (element.accept) {
-          if (element.accept.extensions) {
-            picker.accept = element.accept.extensions
-              .map((ext) => `.${ext}`)
-              .join(",");
-          }
-        }
-
-        const fileContainer = document.createElement("div");
-        fileContainer.className =
-          "file-preview-container w-full aspect-square max-w-xs bg-gray-100 rounded-lg overflow-hidden relative group cursor-pointer";
-
-        const initial = ctx.prefill[element.key] || element.default;
-        if (initial) {
-          // Add prefill data to resourceIndex so renderFilePreview can use it
-          if (!state.resourceIndex.has(initial)) {
-            // Extract filename from URL/path
-            const filename = initial.split("/").pop() || "file";
-            // Determine file type from extension
-            const extension = filename.split(".").pop()?.toLowerCase();
-            const fileType =
-              extension &&
-              ["jpg", "jpeg", "png", "gif", "webp"].includes(extension)
-                ? `image/${extension === "jpg" ? "jpeg" : extension}`
-                : "application/octet-stream";
-
-            state.resourceIndex.set(initial, {
-              name: filename,
-              type: fileType,
-              size: 0,
-              file: null, // No local file for prefill data
-            });
-          }
-          renderFilePreview(fileContainer, initial, initial, "", false).catch(
-            console.error,
-          );
-        } else {
-          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">Нажмите или перетащите файл</div>
-                        </div>
-                    `;
-        }
-
-        fileContainer.onclick = () => picker.click();
-        setupDragAndDrop(fileContainer, (files) => {
-          if (files.length > 0) {
-            handleFileSelect(files[0], fileContainer, pathKey);
-          }
-        });
-
-        picker.onchange = () => {
-          if (picker.files.length > 0) {
-            handleFileSelect(picker.files[0], fileContainer, pathKey);
-          }
-        };
-
-        fileWrapper.appendChild(fileContainer);
-        fileWrapper.appendChild(picker);
-
-        // Add upload text
-        const uploadText = document.createElement("p");
-        uploadText.className = "text-xs text-gray-600 mt-2 text-center";
-        uploadText.innerHTML = `<span class="underline cursor-pointer">Загрузите</span> или перетащите файл`;
-        uploadText.querySelector("span").onclick = () => picker.click();
-        fileWrapper.appendChild(uploadText);
-
-        // Add hint
-        const fileHint = document.createElement("p");
-        fileHint.className = "text-xs text-gray-500 mt-1 text-center";
-        fileHint.textContent = makeFieldHint(element);
-        fileWrapper.appendChild(fileHint);
-
-        wrapper.appendChild(fileWrapper);
-      }
+      renderFileElement(element, ctx, wrapper, pathKey);
       break;
 
     case "files":
-      // TODO: Extract to renderFilesElement() function
-      if (state.config.readonly) {
-        // Readonly mode: render as results list like in workflow-preview.html
-        const resultsWrapper = document.createElement("div");
-        resultsWrapper.className = "space-y-4";
-
-        const initialFiles = ctx.prefill[element.key] || [];
-
-        if (initialFiles.length > 0) {
-          initialFiles.forEach((resourceId) => {
-            const filePreview = renderFilePreviewReadonly(resourceId);
-            resultsWrapper.appendChild(filePreview);
-          });
-        } else {
-          resultsWrapper.innerHTML = `<div class="aspect-video bg-gray-100 rounded-lg flex items-center justify-center text-gray-500"><div class="text-center">Нет файлов</div></div>`;
-        }
-
-        wrapper.appendChild(resultsWrapper);
-      } else {
-        // Edit mode: normal files input
-        const filesWrapper = document.createElement("div");
-        filesWrapper.className = "space-y-2";
-
-        const filesPicker = document.createElement("input");
-        filesPicker.type = "file";
-        filesPicker.name = pathKey;
-        filesPicker.multiple = true;
-        filesPicker.style.display = "none"; // Hide default input
-        if (element.accept) {
-          if (element.accept.extensions) {
-            filesPicker.accept = element.accept.extensions
-              .map((ext) => `.${ext}`)
-              .join(",");
-          }
-        }
-
-        // Create container with border like in workflow-preview
-        const filesContainer = document.createElement("div");
-        filesContainer.className =
-          "border-2 border-dashed border-gray-300 rounded-lg p-3 hover:border-gray-400 transition-colors";
-
-        const list = document.createElement("div");
-        list.className = "files-list";
-
-        const initialFiles = ctx.prefill[element.key] || [];
-
-        // Add prefill files to resourceIndex so renderResourcePills can use them
-        if (initialFiles.length > 0) {
-          initialFiles.forEach((resourceId) => {
-            if (!state.resourceIndex.has(resourceId)) {
-              // Extract filename from URL/path
-              const filename = resourceId.split("/").pop() || "file";
-              // Determine file type from extension
-              const extension = filename.split(".").pop()?.toLowerCase();
-              const fileType =
-                extension &&
-                ["jpg", "jpeg", "png", "gif", "webp"].includes(extension)
-                  ? `image/${extension === "jpg" ? "jpeg" : extension}`
-                  : "application/octet-stream";
-
-              state.resourceIndex.set(resourceId, {
-                name: filename,
-                type: fileType,
-                size: 0,
-                file: null, // No local file for prefill data
-              });
-            }
-          });
-        }
-
-        function updateFilesList() {
-          renderResourcePills(list, initialFiles, (ridToRemove) => {
-            const index = initialFiles.indexOf(ridToRemove);
-            if (index > -1) {
-              initialFiles.splice(index, 1);
-            }
-            updateFilesList(); // Re-render after removal
-          });
-        }
-
-        // Initial render
-        updateFilesList();
-
-        setupDragAndDrop(filesContainer, async (files) => {
-          const arr = Array.from(files);
-          for (const file of arr) {
-            let rid;
-
-            // If uploadHandler is configured, use it to upload the file
-            if (state.config.uploadFile) {
-              try {
-                rid = await state.config.uploadFile(file);
-                if (typeof rid !== "string") {
-                  throw new Error(
-                    "Upload handler must return a string resource ID",
-                  );
-                }
-              } catch (error) {
-                throw new Error(`File upload failed: ${error.message}`);
-              }
-            } else {
-              throw new Error(
-                "No upload handler configured. Set uploadHandler via FormBuilder.setUploadHandler()",
-              );
-            }
-
-            state.resourceIndex.set(rid, {
-              name: file.name,
-              type: file.type,
-              size: file.size,
-              file: null, // Files are always uploaded, never stored locally
-            });
-            initialFiles.push(rid);
-          }
-          updateFilesList();
-        });
-
-        filesPicker.onchange = async () => {
-          for (const file of Array.from(filesPicker.files)) {
-            let rid;
-
-            // If uploadHandler is configured, use it to upload the file
-            if (state.config.uploadFile) {
-              try {
-                rid = await state.config.uploadFile(file);
-                if (typeof rid !== "string") {
-                  throw new Error(
-                    "Upload handler must return a string resource ID",
-                  );
-                }
-              } catch (error) {
-                throw new Error(`File upload failed: ${error.message}`);
-              }
-            } else {
-              throw new Error(
-                "No upload handler configured. Set uploadHandler via FormBuilder.setUploadHandler()",
-              );
-            }
-
-            state.resourceIndex.set(rid, {
-              name: file.name,
-              type: file.type,
-              size: file.size,
-              file: null, // Files are always uploaded, never stored locally
-            });
-            initialFiles.push(rid);
-          }
-          updateFilesList();
-          // Clear the file input
-          filesPicker.value = "";
-        };
-
-        filesContainer.appendChild(list);
-
-        filesWrapper.appendChild(filesContainer);
-        filesWrapper.appendChild(filesPicker);
-
-        // Add hint
-        const filesHint = document.createElement("p");
-        filesHint.className = "text-xs text-gray-500 mt-1 text-center";
-        filesHint.textContent = makeFieldHint(element);
-        filesWrapper.appendChild(filesHint);
-
-        wrapper.appendChild(filesWrapper);
-      }
+      renderFilesElement(element, ctx, wrapper, pathKey);
       break;
 
     case "group":
-      // TODO: Extract to renderGroupElement() function
-      const groupWrap = document.createElement("div");
-      groupWrap.className = "border border-gray-200 rounded-lg p-4 bg-gray-50";
-
-      const header = document.createElement("div");
-      header.className = "flex justify-between items-center mb-4";
-
-      const left = document.createElement("div");
-      left.className = "flex-1";
-
-      const right = document.createElement("div");
-      right.className = "flex gap-2";
-
-      const itemsWrap = document.createElement("div");
-      itemsWrap.className = "space-y-4";
-
-      groupWrap.appendChild(header);
-      header.appendChild(left);
-      header.appendChild(right);
-
-      if (element.repeat && isPlainObject(element.repeat)) {
-        const min = element.repeat.min ?? 0;
-        const max = element.repeat.max ?? Infinity;
-        const pre = Array.isArray(ctx.prefill?.[element.key])
-          ? ctx.prefill[element.key]
-          : null;
-
-        header.appendChild(right);
-
-        const countItems = () =>
-          itemsWrap.querySelectorAll(":scope > .groupItem").length;
-
-        const addItem = (prefillObj) => {
-          const item = document.createElement("div");
-          item.className =
-            "groupItem border border-dashed border-slate-300 dark:border-slate-600 rounded-lg p-3 mb-3 bg-blue-50/30 dark:bg-blue-900/10";
-          const subCtx = {
-            path: pathJoin(ctx.path, element.key + `[${countItems()}]`),
-            prefill: prefillObj || {},
-          };
-          element.elements.forEach((child) =>
-            item.appendChild(renderElement(child, subCtx)),
-          );
-
-          const rem = document.createElement("button");
-          rem.type = "button";
-          rem.className =
-            "bg-red-500 hover:bg-red-600 text-white px-2 py-1 rounded text-xs font-medium transition-colors";
-          rem.textContent = "Удалить";
-          rem.addEventListener("click", () => {
-            if (countItems() <= (element.repeat.min ?? 0)) return;
-            itemsWrap.removeChild(item);
-            refreshControls();
-          });
-          item.appendChild(rem);
-          itemsWrap.appendChild(item);
-          refreshControls();
-        };
-
-        groupWrap.appendChild(itemsWrap);
-
-        // Add button after items
-        const addBtn = document.createElement("button");
-        addBtn.type = "button";
-        addBtn.className =
-          "w-full py-2 px-4 border border-gray-300 rounded-lg text-gray-700 hover:bg-gray-50 flex items-center justify-center mt-3";
-        addBtn.innerHTML =
-          '<svg class="w-4 h-4 mr-2" fill="currentColor" viewBox="0 0 24 24"><path d="M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z"/></svg>Добавить элемент';
-        groupWrap.appendChild(addBtn);
-
-        const refreshControls = () => {
-          const n = countItems();
-          addBtn.disabled = n >= max;
-          left.innerHTML = `<span>${element.label || element.key}</span> <span class="text-slate-500 dark:text-slate-400 text-xs">[${n} / ${max === Infinity ? "∞" : max}, min=${min}]</span>`;
-        };
-
-        if (pre && pre.length) {
-          const n = Math.min(max, Math.max(min, pre.length));
-          for (let i = 0; i < n; i++) addItem(pre[i]);
-        } else {
-          const n = Math.max(min, 0);
-          for (let i = 0; i < n; i++) addItem(null);
-        }
-
-        addBtn.addEventListener("click", () => addItem(null));
-      } else {
-        // Single object group
-        const subCtx = {
-          path: pathJoin(ctx.path, element.key),
-          prefill: ctx.prefill?.[element.key] || {},
-        };
-        element.elements.forEach((child) =>
-          itemsWrap.appendChild(renderElement(child, subCtx)),
-        );
-        groupWrap.appendChild(itemsWrap);
-        left.innerHTML = `<span>${element.label || element.key}</span>`;
-      }
-
-      wrapper.appendChild(groupWrap);
+      renderGroupElement(element, ctx, wrapper, pathKey);
       break;
 
-    default:
+    default: {
       const unsupported = document.createElement("div");
       unsupported.className = "text-red-500 text-sm";
       unsupported.textContent = `Unsupported field type: ${element.type}`;
       wrapper.appendChild(unsupported);
+    }
   }
 
   return wrapper;
@@ -577,58 +248,75 @@ function renderElement(element, ctx) {
 function makeFieldHint(element) {
   const parts = [];
 
-  if (element.required) {
-    parts.push("required");
-  } else {
-    parts.push("optional");
-  }
+  parts.push(element.required ? "required" : "optional");
+
+  addLengthHint(element, parts);
+  addRangeHint(element, parts);
+  addFileSizeHint(element, parts);
+  addFormatHint(element, parts);
+  addPatternHint(element, parts);
+
+  return parts.join(" • ");
+}
 
-  if (element.minLength != null || element.maxLength != null) {
-    if (element.minLength != null && element.maxLength != null) {
+function addLengthHint(element, parts) {
+  if (element.minLength !== null || element.maxLength !== null) {
+    if (element.minLength !== null && element.maxLength !== null) {
       parts.push(`length=${element.minLength}-${element.maxLength} characters`);
-    } else if (element.maxLength != null) {
+    } else if (element.maxLength !== null) {
       parts.push(`max=${element.maxLength} characters`);
-    } else if (element.minLength != null) {
+    } else if (element.minLength !== null) {
       parts.push(`min=${element.minLength} characters`);
     }
   }
+}
 
-  if (element.min != null || element.max != null) {
-    if (element.min != null && element.max != null) {
+function addRangeHint(element, parts) {
+  if (element.min !== null || element.max !== null) {
+    if (element.min !== null && element.max !== null) {
       parts.push(`range=${element.min}-${element.max}`);
-    } else if (element.max != null) {
+    } else if (element.max !== null) {
       parts.push(`max=${element.max}`);
-    } else if (element.min != null) {
+    } else if (element.min !== null) {
       parts.push(`min=${element.min}`);
     }
   }
+}
 
+function addFileSizeHint(element, parts) {
   if (element.maxSizeMB) {
     parts.push(`max_size=${element.maxSizeMB}MB`);
   }
+}
 
-  if (element.accept && element.accept.extensions) {
+function addFormatHint(element, parts) {
+  if (element.accept?.extensions) {
     parts.push(
       `formats=${element.accept.extensions.map((ext) => ext.toUpperCase()).join(",")}`,
     );
   }
+}
 
+function addPatternHint(element, parts) {
   if (element.pattern && !element.pattern.includes("А-Я")) {
     parts.push("plain text only");
-  } else if (element.pattern && element.pattern.includes("А-Я")) {
+  } else if (element.pattern?.includes("А-Я")) {
     parts.push("text with punctuation");
   }
-
-  return parts.join(" • ");
 }
 
-async function renderFilePreview(
-  container,
-  resourceId,
-  fileName,
-  fileType,
-  isReadonly = false,
-) {
+async function renderFilePreview(container, resourceId, options = {}) {
+  const { fileName = "", isReadonly = false, deps = null } = options;
+  // Runtime validation for dependencies when not in readonly mode
+  if (
+    !isReadonly &&
+    deps &&
+    (!deps.picker || !deps.fileUploadHandler || !deps.dragHandler)
+  ) {
+    throw new Error(
+      "renderFilePreview: missing deps {picker, fileUploadHandler, dragHandler}",
+    );
+  }
   // Don't change container className - preserve max-w-xs and other styling
 
   // Clear container content first
@@ -654,16 +342,85 @@ async function renderFilePreview(
       };
       reader.readAsDataURL(meta.file);
       container.appendChild(img);
+    } else if (meta.type && meta.type.startsWith("video/")) {
+      // Video file - use object URL for preview
+      const videoUrl = URL.createObjectURL(meta.file);
+
+      // Remove all conflicting handlers to prevent interference with video controls
+      container.onclick = null;
+
+      // Remove drag and drop event listeners by cloning the element
+      const newContainer = container.cloneNode(false);
+      container.parentNode.replaceChild(newContainer, container);
+      container = newContainer;
+
+      container.innerHTML = `
+        <div class="relative group h-full">
+          <video class="w-full h-full object-contain" controls preload="auto" muted>
+            <source src="${videoUrl}" type="${meta.type}">
+            Your browser does not support the video tag.
+          </video>
+          <div class="absolute top-2 right-2 opacity-0 group-hover:opacity-100 transition-opacity z-10 flex gap-1">
+            <button class="bg-red-600 bg-opacity-75 hover:bg-opacity-90 text-white p-1 rounded text-xs delete-file-btn">
+              ${t("removeElement")}
+            </button>
+            <button class="bg-gray-800 bg-opacity-75 hover:bg-opacity-90 text-white p-1 rounded text-xs change-file-btn">
+              Change
+            </button>
+          </div>
+        </div>
+      `;
+
+      // Add click handlers to the custom buttons
+      const changeBtn = container.querySelector(".change-file-btn");
+      if (changeBtn) {
+        changeBtn.onclick = (e) => {
+          e.stopPropagation();
+          if (deps?.picker) {
+            deps.picker.click();
+          }
+        };
+      }
+
+      const deleteBtn = container.querySelector(".delete-file-btn");
+      if (deleteBtn) {
+        deleteBtn.onclick = (e) => {
+          e.stopPropagation();
+          // Clear the file
+          state.resourceIndex.delete(resourceId);
+          // Update hidden input
+          const hiddenInput = container.parentElement.querySelector(
+            'input[type="hidden"]',
+          );
+          if (hiddenInput) {
+            hiddenInput.value = "";
+          }
+          // Clear preview and show placeholder
+          if (deps?.fileUploadHandler) {
+            container.onclick = deps.fileUploadHandler;
+          }
+          if (deps?.dragHandler) {
+            setupDragAndDrop(container, deps.dragHandler);
+          }
+          container.innerHTML = `
+            <div class="flex flex-col items-center justify-center h-full text-gray-400">
+              <svg class="w-6 h-6 mb-2" fill="currentColor" viewBox="0 0 24 24">
+                <path d="M21 19V5c0-1.1-.9-2-2-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2zM8.5 13.5l2.5 3.01L14.5 12l4.5 6H5l3.5-4.5z"/>
+              </svg>
+              <div class="text-sm text-center">${t("clickDragText")}</div>
+            </div>
+          `;
+        };
+      }
     } else {
-      // Non-image file
-      container.innerHTML =
-        '<div class="flex flex-col items-center justify-center h-full text-gray-400"><div class="text-2xl mb-2">📁</div><div class="text-sm">' +
-        fileName +
-        "</div></div>";
+      // Non-image, non-video file
+      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) {
+    // 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
         state.resourceIndex.delete(resourceId);
@@ -680,7 +437,7 @@ async function renderFilePreview(
                         <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">Нажмите или перетащите файл</div>
+                        <div class="text-sm text-center">${t("clickDragText")}</div>
                     </div>
                 `;
       });
@@ -695,17 +452,15 @@ async function renderFilePreview(
         container.appendChild(img);
       } else {
         // Fallback to file icon
-        container.innerHTML =
-          '<div class="flex flex-col items-center justify-center h-full text-gray-400"><div class="text-2xl mb-2">🖼️</div><div class="text-sm">' +
-          fileName +
-          "</div></div>";
+        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);
-      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>";
+      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
@@ -726,17 +481,16 @@ async function renderFilePreview(
                         <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">Нажмите или перетащите файл</div>
+                        <div class="text-sm text-center">${t("clickDragText")}</div>
                     </div>
                 `;
       });
     }
   } else {
     // No file and no getThumbnail config - fallback
-    container.innerHTML =
-      '<div class="flex flex-col items-center justify-center h-full text-gray-400"><div class="text-2xl mb-2">🖼️</div><div class="text-sm">' +
-      fileName +
-      "</div></div>";
+    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
@@ -802,7 +556,7 @@ function renderResourcePills(container, rids, onRemove) {
 
     const uploadLink = document.createElement("span");
     uploadLink.className = "underline cursor-pointer";
-    uploadLink.textContent = "Загрузите";
+    uploadLink.textContent = t("uploadText");
     uploadLink.onclick = (e) => {
       e.stopPropagation();
       // Look for file input in the files wrapper (go up from list -> filesContainer -> filesWrapper)
@@ -812,7 +566,7 @@ function renderResourcePills(container, rids, onRemove) {
     };
 
     textContainer.appendChild(uploadLink);
-    textContainer.appendChild(document.createTextNode(" или перетащите файлы"));
+    textContainer.appendChild(document.createTextNode(` ${t("dragDropText")}`));
 
     // Clear and append
     container.appendChild(gridContainer);
@@ -822,7 +576,8 @@ function renderResourcePills(container, rids, onRemove) {
 
   // Always show files grid if we have files OR if this was already a grid
   // This prevents shrinking when deleting the last file
-  container.className = "grid grid-cols-4 gap-3 mt-2";
+  // Preserve the original "files-list" class and add grid classes
+  container.className = "files-list grid grid-cols-4 gap-3 mt-2";
 
   // Calculate how many slots we need (at least 4, then expand by rows of 4)
   const currentImagesCount = rids ? rids.length : 0;
@@ -840,9 +595,10 @@ function renderResourcePills(container, rids, onRemove) {
       const rid = rids[i];
       const meta = state.resourceIndex.get(rid);
       slot.className =
-        "aspect-square bg-gray-100 rounded-lg overflow-hidden relative group border border-gray-300";
+        "resource-pill aspect-square bg-gray-100 rounded-lg overflow-hidden relative group border border-gray-300";
+      slot.dataset.resourceId = rid;
 
-      // Add image or file content
+      // Add image, video, or file content
       if (meta && meta.type?.startsWith("image/")) {
         if (meta.file && meta.file instanceof File) {
           // Use FileReader for local files
@@ -880,6 +636,58 @@ function renderResourcePills(container, rids, onRemove) {
                         </svg>
                     </div>`;
         }
+      } else if (meta && meta.type?.startsWith("video/")) {
+        if (meta.file && meta.file instanceof File) {
+          // Video file - use object URL for preview in thumbnail format
+          const videoUrl = URL.createObjectURL(meta.file);
+          slot.innerHTML = `
+            <div class="relative group h-full w-full">
+              <video class="w-full h-full object-contain" preload="metadata" muted>
+                <source src="${videoUrl}" type="${meta.type}">
+              </video>
+              <div class="absolute inset-0 bg-black bg-opacity-30 flex items-center justify-center">
+                <div class="bg-white bg-opacity-90 rounded-full p-1">
+                  <svg class="w-4 h-4 text-gray-800" fill="currentColor" viewBox="0 0 24 24">
+                    <path d="M8 5v14l11-7z"/>
+                  </svg>
+                </div>
+              </div>
+            </div>
+          `;
+        } else if (state.config.getThumbnail) {
+          // Use getThumbnail for uploaded video files
+          const videoUrl = state.config.getThumbnail(rid);
+          if (videoUrl) {
+            slot.innerHTML = `
+              <div class="relative group h-full w-full">
+                <video class="w-full h-full object-contain" preload="metadata" muted>
+                  <source src="${videoUrl}" type="${meta.type}">
+                </video>
+                <div class="absolute inset-0 bg-black bg-opacity-30 flex items-center justify-center">
+                  <div class="bg-white bg-opacity-90 rounded-full p-1">
+                    <svg class="w-4 h-4 text-gray-800" fill="currentColor" viewBox="0 0 24 24">
+                      <path d="M8 5v14l11-7z"/>
+                    </svg>
+                  </div>
+                </div>
+              </div>
+            `;
+          } else {
+            slot.innerHTML = `<div class="flex flex-col items-center justify-center h-full text-gray-400">
+                            <svg class="w-8 h-8" fill="currentColor" viewBox="0 0 24 24">
+                                <path d="M8 5v14l11-7z"/>
+                            </svg>
+                            <div class="text-xs mt-1">${meta?.name || "Video"}</div>
+                        </div>`;
+          }
+        } else {
+          slot.innerHTML = `<div class="flex flex-col items-center justify-center h-full text-gray-400">
+                        <svg class="w-8 h-8" fill="currentColor" viewBox="0 0 24 24">
+                            <path d="M8 5v14l11-7z"/>
+                        </svg>
+                        <div class="text-xs mt-1">${meta?.name || "Video"}</div>
+                    </div>`;
+        }
       } else {
         slot.innerHTML = `<div class="flex flex-col items-center justify-center h-full text-gray-400">
                     <div class="text-2xl mb-1">📁</div>
@@ -895,7 +703,7 @@ function renderResourcePills(container, rids, onRemove) {
 
         const removeBtn = document.createElement("button");
         removeBtn.className = "bg-red-600 text-white px-2 py-1 rounded text-xs";
-        removeBtn.textContent = "Удалить";
+        removeBtn.textContent = t("removeElement");
         removeBtn.onclick = (e) => {
           e.stopPropagation();
           onRemove(rid);
@@ -922,21 +730,22 @@ function renderResourcePills(container, rids, onRemove) {
   }
 }
 
-function formatFileSize(bytes) {
-  if (bytes === 0) return "0 B";
-  const k = 1024;
-  const sizes = ["B", "KB", "MB", "GB"];
-  const i = Math.floor(Math.log(bytes) / Math.log(k));
-  return parseFloat((bytes / Math.pow(k, i)).toFixed(2)) + " " + sizes[i];
-}
-
-function generateResourceId() {
-  return (
-    "res_" + Math.random().toString(36).substr(2, 9) + Date.now().toString(36)
-  );
-}
-
-async function handleFileSelect(file, container, fieldName) {
+// Utility functions (currently unused but may be needed in future)
+// function formatFileSize(bytes) {
+//   if (bytes === 0) return "0 B";
+//   const k = 1024;
+//   const sizes = ["B", "KB", "MB", "GB"];
+//   const i = Math.floor(Math.log(bytes) / Math.log(k));
+//   return `${parseFloat((bytes / Math.pow(k, i)).toFixed(2))} ${sizes[i]}`;
+// }
+
+// function generateResourceId() {
+//   return (
+//     `res_${Math.random().toString(36).substr(2, 9)}${Date.now().toString(36)}`
+//   );
+// }
+
+async function handleFileSelect(file, container, fieldName, deps = null) {
   let rid;
 
   // If uploadHandler is configured, use it to upload the file
@@ -959,7 +768,7 @@ async function handleFileSelect(file, container, fieldName) {
     name: file.name,
     type: file.type,
     size: file.size,
-    file: null, // Files are always uploaded, never stored locally
+    file, // Store the file object for local preview
   });
 
   // Create hidden input to store the resource ID
@@ -974,9 +783,11 @@ async function handleFileSelect(file, container, fieldName) {
   }
   hiddenInput.value = rid;
 
-  renderFilePreview(container, rid, file.name, file.type, false).catch(
-    console.error,
-  );
+  renderFilePreview(container, rid, {
+    fileName: file.name,
+    isReadonly: false,
+    deps,
+  }).catch(console.error);
 }
 
 function setupDragAndDrop(element, dropHandler) {
@@ -1012,7 +823,7 @@ function addDeleteButton(container, onDelete) {
   const deleteBtn = document.createElement("button");
   deleteBtn.className =
     "bg-red-600 text-white px-3 py-1 rounded text-sm hover:bg-red-700 transition-colors";
-  deleteBtn.textContent = "Удалить";
+  deleteBtn.textContent = t("removeElement");
   deleteBtn.onclick = (e) => {
     e.stopPropagation();
     onDelete();
@@ -1077,8 +888,8 @@ function showTooltip(tooltipId, button) {
     top = rect.bottom + 5;
   }
 
-  tooltip.style.left = left + "px";
-  tooltip.style.top = top + "px";
+  tooltip.style.left = `${left}px`;
+  tooltip.style.top = `${top}px`;
 
   // Show the tooltip
   tooltip.classList.remove("hidden");
@@ -1091,7 +902,7 @@ function showTooltip(tooltipId, button) {
 
 // Close tooltips when clicking outside (only in browser)
 if (typeof document !== "undefined") {
-  document.addEventListener("click", function (e) {
+  document.addEventListener("click", (e) => {
     const isInfoButton =
       e.target.closest("button") && e.target.closest("button").onclick;
     const isTooltip = e.target.closest('[id^="tooltip-"]');
@@ -1122,9 +933,9 @@ function validateForm(skipValidation = false) {
     }
   }
 
-  function validateElement(element, ctx) {
+  function validateElement(element, ctx, customScopeRoot = null) {
     const key = element.key;
-    const scopeRoot = state.formRoot;
+    const scopeRoot = customScopeRoot || state.formRoot;
 
     switch (element.type) {
       case "text":
@@ -1137,11 +948,11 @@ function validateForm(skipValidation = false) {
           return "";
         }
         if (!skipValidation && val) {
-          if (element.minLength != null && val.length < element.minLength) {
+          if (element.minLength !== null && val.length < element.minLength) {
             errors.push(`${key}: minLength=${element.minLength}`);
             markValidity(input, `minLength=${element.minLength}`);
           }
-          if (element.maxLength != null && val.length > element.maxLength) {
+          if (element.maxLength !== null && val.length > element.maxLength) {
             errors.push(`${key}: maxLength=${element.maxLength}`);
             markValidity(input, `maxLength=${element.maxLength}`);
           }
@@ -1182,11 +993,11 @@ function validateForm(skipValidation = false) {
           markValidity(input, "not a number");
           return null;
         }
-        if (!skipValidation && element.min != null && v < element.min) {
+        if (!skipValidation && element.min !== null && v < element.min) {
           errors.push(`${key}: < min=${element.min}`);
           markValidity(input, `< min=${element.min}`);
         }
-        if (!skipValidation && element.max != null && v > element.max) {
+        if (!skipValidation && element.max !== null && v > element.max) {
           errors.push(`${key}: > max=${element.max}`);
           markValidity(input, `> max=${element.max}`);
         }
@@ -1220,14 +1031,42 @@ function validateForm(skipValidation = false) {
       }
       case "files": {
         // For files, we need to collect all resource IDs
-        const container = scopeRoot
-          .querySelector(`[name$="${key}"]`)
-          ?.parentElement?.querySelector(".files-list");
+        // Find the correct .files-list by looking for one that's associated with this field
+        let container = null;
+
+        // Strategy 1: Try to find via the input element
+        const nameElement = scopeRoot.querySelector(`[name="${key}"]`);
+        if (nameElement) {
+          // Look for .files-list in the input's parent container
+          container = nameElement.parentElement?.querySelector(".files-list");
+        }
+
+        // Strategy 2: If we have multiple .files-list elements, this gets tricky
+        // For now, let's use a simpler approach for the demo: just find the first .files-list
+        // that has resource pills (since our demo only has one files field)
+        if (!container) {
+          const allFilesLists = scopeRoot.querySelectorAll(".files-list");
+          for (const filesList of allFilesLists) {
+            const pillCount =
+              filesList.querySelectorAll(".resource-pill").length;
+            if (pillCount > 0) {
+              container = filesList;
+              break;
+            }
+          }
+        }
+
         const rids = [];
         if (container) {
-          // Extract resource IDs from the current state
-          // This is a simplified approach - in practice you'd track this better
+          const resourcePills = container.querySelectorAll(".resource-pill");
+          resourcePills.forEach((pill, _index) => {
+            const resourceId = pill.dataset.resourceId;
+            if (resourceId) {
+              rids.push(resourceId);
+            }
+          });
         }
+
         return rids;
       }
       case "group": {
@@ -1241,11 +1080,16 @@ function validateForm(skipValidation = false) {
 
           for (let i = 0; i < itemCount; i++) {
             const itemData = {};
+            // Find the specific group item container for scoped queries
+            const itemContainer =
+              scopeRoot.querySelector(`[data-group-item="${key}[${i}]"]`) ||
+              scopeRoot;
             element.elements.forEach((child) => {
               const childKey = `${key}[${i}].${child.key}`;
               itemData[child.key] = validateElement(
                 { ...child, key: childKey },
                 ctx,
+                itemContainer,
               );
             });
             items.push(itemData);
@@ -1253,11 +1097,15 @@ function validateForm(skipValidation = false) {
           return items;
         } else {
           const groupData = {};
+          // Find the specific group container for scoped queries
+          const groupContainer =
+            scopeRoot.querySelector(`[data-group="${key}"]`) || scopeRoot;
           element.elements.forEach((child) => {
             const childKey = `${key}.${child.key}`;
             groupData[child.key] = validateElement(
               { ...child, key: childKey },
               ctx,
+              groupContainer,
             );
           });
           return groupData;
@@ -1363,10 +1211,429 @@ function renderSelectElement(element, ctx, wrapper, pathKey) {
   wrapper.appendChild(selectHint);
 }
 
+function renderFileElement(element, ctx, wrapper, pathKey) {
+  if (state.config.readonly) {
+    // Readonly mode: use common preview function
+    const initial = ctx.prefill[element.key] || element.default;
+    if (initial) {
+      const filePreview = renderFilePreviewReadonly(initial);
+      wrapper.appendChild(filePreview);
+    } else {
+      const emptyState = document.createElement("div");
+      emptyState.className =
+        "aspect-video bg-gray-100 rounded-lg flex items-center justify-center text-gray-500";
+      emptyState.innerHTML = `<div class="text-center">${t("noFileSelected")}</div>`;
+      wrapper.appendChild(emptyState);
+    }
+  } else {
+    // Edit mode: normal file input
+    const fileWrapper = document.createElement("div");
+    fileWrapper.className = "space-y-2";
+
+    const picker = document.createElement("input");
+    picker.type = "file";
+    picker.name = pathKey;
+    picker.style.display = "none"; // Hide default input
+    if (element.accept?.extensions) {
+      picker.accept = element.accept.extensions
+        .map((ext) => `.${ext}`)
+        .join(",");
+    }
+
+    const fileContainer = document.createElement("div");
+    fileContainer.className =
+      "file-preview-container w-full aspect-square max-w-xs bg-gray-100 rounded-lg overflow-hidden relative group cursor-pointer";
+
+    const initial = ctx.prefill[element.key] || element.default;
+
+    // Set up click and drag handlers
+    const fileUploadHandler = () => picker.click();
+    const dragHandler = (files) => {
+      if (files.length > 0) {
+        const deps = { picker, fileUploadHandler, dragHandler };
+        handleFileSelect(files[0], fileContainer, pathKey, deps);
+      }
+    };
+
+    // Handle initial prefill data
+    if (initial) {
+      handleInitialFileData(initial, fileContainer, pathKey, fileWrapper, {
+        picker,
+        fileUploadHandler,
+        dragHandler,
+      });
+    } else {
+      setEmptyFileContainer(fileContainer);
+    }
+
+    fileContainer.onclick = fileUploadHandler;
+    setupDragAndDrop(fileContainer, dragHandler);
+
+    picker.onchange = () => {
+      if (picker.files.length > 0) {
+        const deps = { picker, fileUploadHandler, dragHandler };
+        handleFileSelect(picker.files[0], fileContainer, pathKey, deps);
+      }
+    };
+
+    fileWrapper.appendChild(fileContainer);
+    fileWrapper.appendChild(picker);
+
+    // Add upload text
+    const uploadText = document.createElement("p");
+    uploadText.className = "text-xs text-gray-600 mt-2 text-center";
+    uploadText.innerHTML = `<span class="underline cursor-pointer">${t("uploadText")}</span> ${t("dragDropTextSingle")}`;
+    uploadText.querySelector("span").onclick = () => picker.click();
+    fileWrapper.appendChild(uploadText);
+
+    // Add hint
+    const fileHint = document.createElement("p");
+    fileHint.className = "text-xs text-gray-500 mt-1 text-center";
+    fileHint.textContent = makeFieldHint(element);
+    fileWrapper.appendChild(fileHint);
+
+    wrapper.appendChild(fileWrapper);
+  }
+}
+
+function handleInitialFileData(
+  initial,
+  fileContainer,
+  pathKey,
+  fileWrapper,
+  deps,
+) {
+  // Add prefill data to resourceIndex so renderFilePreview can use it
+  if (!state.resourceIndex.has(initial)) {
+    // Extract filename from URL/path
+    const filename = initial.split("/").pop() || "file";
+    // Determine file type from extension
+    const extension = filename.split(".").pop()?.toLowerCase();
+    let fileType = "application/octet-stream";
+
+    if (extension) {
+      if (["jpg", "jpeg", "png", "gif", "webp"].includes(extension)) {
+        fileType = `image/${extension === "jpg" ? "jpeg" : extension}`;
+      } else if (["mp4", "webm", "mov", "avi"].includes(extension)) {
+        fileType = `video/${extension === "mov" ? "quicktime" : extension}`;
+      }
+    }
+
+    state.resourceIndex.set(initial, {
+      name: filename,
+      type: fileType,
+      size: 0,
+      file: null, // No local file for prefill data
+    });
+  }
+
+  renderFilePreview(fileContainer, initial, {
+    fileName: initial,
+    isReadonly: false,
+    deps,
+  }).catch(console.error);
+
+  // Create hidden input to store the prefilled resource ID
+  const hiddenInput = document.createElement("input");
+  hiddenInput.type = "hidden";
+  hiddenInput.name = pathKey;
+  hiddenInput.value = initial;
+  fileWrapper.appendChild(hiddenInput);
+}
+
+function setEmptyFileContainer(fileContainer) {
+  fileContainer.innerHTML = `
+    <div class="flex flex-col items-center justify-center h-full text-gray-400">
+        <svg class="w-6 h-6 mb-2" fill="currentColor" viewBox="0 0 24 24">
+            <path d="M21 19V5c0-1.1-.9-2-2-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2zM8.5 13.5l2.5 3.01L14.5 12l4.5 6H5l3.5-4.5z"/>
+        </svg>
+        <div class="text-sm text-center">${t("clickDragText")}</div>
+    </div>
+  `;
+}
+
+function renderFilesElement(element, ctx, wrapper, pathKey) {
+  if (state.config.readonly) {
+    // Readonly mode: render as results list like in workflow-preview.html
+    const resultsWrapper = document.createElement("div");
+    resultsWrapper.className = "space-y-4";
+
+    const initialFiles = ctx.prefill[element.key] || [];
+
+    if (initialFiles.length > 0) {
+      initialFiles.forEach((resourceId) => {
+        const filePreview = renderFilePreviewReadonly(resourceId);
+        resultsWrapper.appendChild(filePreview);
+      });
+    } else {
+      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);
+  } else {
+    // Edit mode: normal files input
+    const filesWrapper = document.createElement("div");
+    filesWrapper.className = "space-y-2";
+
+    const filesPicker = document.createElement("input");
+    filesPicker.type = "file";
+    filesPicker.name = pathKey;
+    filesPicker.multiple = true;
+    filesPicker.style.display = "none"; // Hide default input
+    if (element.accept?.extensions) {
+      filesPicker.accept = element.accept.extensions
+        .map((ext) => `.${ext}`)
+        .join(",");
+    }
+
+    // Create container with border like in workflow-preview
+    const filesContainer = document.createElement("div");
+    filesContainer.className =
+      "border-2 border-dashed border-gray-300 rounded-lg p-3 hover:border-gray-400 transition-colors";
+
+    const list = document.createElement("div");
+    list.className = "files-list";
+
+    const initialFiles = ctx.prefill[element.key] || [];
+
+    // Add prefill files to resourceIndex so renderResourcePills can use them
+    addPrefillFilesToIndex(initialFiles);
+
+    function updateFilesList() {
+      renderResourcePills(list, initialFiles, (ridToRemove) => {
+        const index = initialFiles.indexOf(ridToRemove);
+        if (index > -1) {
+          initialFiles.splice(index, 1);
+        }
+        updateFilesList(); // Re-render after removal
+      });
+    }
+
+    // Initial render
+    updateFilesList();
+
+    setupFilesDropHandler(filesContainer, initialFiles, updateFilesList);
+    setupFilesPickerHandler(filesPicker, initialFiles, updateFilesList);
+
+    filesContainer.appendChild(list);
+    filesWrapper.appendChild(filesContainer);
+    filesWrapper.appendChild(filesPicker);
+
+    // Add hint
+    const filesHint = document.createElement("p");
+    filesHint.className = "text-xs text-gray-500 mt-1 text-center";
+    filesHint.textContent = makeFieldHint(element);
+    filesWrapper.appendChild(filesHint);
+
+    wrapper.appendChild(filesWrapper);
+  }
+}
+
+function addPrefillFilesToIndex(initialFiles) {
+  if (initialFiles.length > 0) {
+    initialFiles.forEach((resourceId) => {
+      if (!state.resourceIndex.has(resourceId)) {
+        // Extract filename from URL/path
+        const filename = resourceId.split("/").pop() || "file";
+        // Determine file type from extension
+        const extension = filename.split(".").pop()?.toLowerCase();
+        const fileType =
+          extension && ["jpg", "jpeg", "png", "gif", "webp"].includes(extension)
+            ? `image/${extension === "jpg" ? "jpeg" : extension}`
+            : "application/octet-stream";
+
+        state.resourceIndex.set(resourceId, {
+          name: filename,
+          type: fileType,
+          size: 0,
+          file: null, // No local file for prefill data
+        });
+      }
+    });
+  }
+}
+
+function setupFilesDropHandler(filesContainer, initialFiles, updateCallback) {
+  setupDragAndDrop(filesContainer, async (files) => {
+    const arr = Array.from(files);
+    for (const file of arr) {
+      const rid = await uploadSingleFile(file);
+      state.resourceIndex.set(rid, {
+        name: file.name,
+        type: file.type,
+        size: file.size,
+        file: null, // Files are always uploaded, never stored locally
+      });
+      initialFiles.push(rid);
+    }
+    updateCallback();
+  });
+}
+
+function setupFilesPickerHandler(filesPicker, initialFiles, updateCallback) {
+  filesPicker.onchange = async () => {
+    for (const file of Array.from(filesPicker.files)) {
+      const rid = await uploadSingleFile(file);
+      state.resourceIndex.set(rid, {
+        name: file.name,
+        type: file.type,
+        size: file.size,
+        file: null, // Files are always uploaded, never stored locally
+      });
+      initialFiles.push(rid);
+    }
+    updateCallback();
+    // Clear the file input
+    filesPicker.value = "";
+  };
+}
+
+async function uploadSingleFile(file) {
+  // If uploadHandler is configured, use it to upload the file
+  if (state.config.uploadFile) {
+    try {
+      const rid = await state.config.uploadFile(file);
+      if (typeof rid !== "string") {
+        throw new Error("Upload handler must return a string resource ID");
+      }
+      return rid;
+    } catch (error) {
+      throw new Error(`File upload failed: ${error.message}`);
+    }
+  } else {
+    throw new Error(
+      "No upload handler configured. Set uploadHandler via FormBuilder.setUploadHandler()",
+    );
+  }
+}
+
+function renderGroupElement(element, ctx, wrapper, _pathKey) {
+  const groupWrap = document.createElement("div");
+  groupWrap.className = "border border-gray-200 rounded-lg p-4 bg-gray-50";
+
+  const header = document.createElement("div");
+  header.className = "flex justify-between items-center mb-4";
+
+  const left = document.createElement("div");
+  left.className = "flex-1";
+
+  const right = document.createElement("div");
+  right.className = "flex gap-2";
+
+  const itemsWrap = document.createElement("div");
+  itemsWrap.className = "space-y-4";
+
+  groupWrap.appendChild(header);
+  header.appendChild(left);
+  if (!state.config.readonly) {
+    header.appendChild(right);
+  }
+
+  if (element.repeat && isPlainObject(element.repeat)) {
+    renderRepeatableGroup(element, ctx, itemsWrap, left, groupWrap);
+  } else {
+    renderSingleGroup(element, ctx, itemsWrap, left, groupWrap);
+  }
+
+  wrapper.appendChild(groupWrap);
+}
+
+function renderRepeatableGroup(element, ctx, itemsWrap, left, groupWrap) {
+  const min = element.repeat.min ?? 0;
+  const max = element.repeat.max ?? Infinity;
+  const pre = Array.isArray(ctx.prefill?.[element.key])
+    ? ctx.prefill[element.key]
+    : null;
+
+  const countItems = () =>
+    itemsWrap.querySelectorAll(":scope > .groupItem").length;
+
+  const addItem = (prefillObj) => {
+    const item = document.createElement("div");
+    item.className =
+      "groupItem border border-dashed border-slate-300 dark:border-slate-600 rounded-lg p-3 mb-3 bg-blue-50/30 dark:bg-blue-900/10";
+    const subCtx = {
+      path: pathJoin(ctx.path, `${element.key}[${countItems()}]`),
+      prefill: prefillObj || {},
+    };
+    element.elements.forEach((child) =>
+      item.appendChild(renderElement(child, subCtx)),
+    );
+
+    // Only add remove button in edit mode
+    if (!state.config.readonly) {
+      const rem = document.createElement("button");
+      rem.type = "button";
+      rem.className =
+        "bg-red-500 hover:bg-red-600 text-white px-2 py-1 rounded text-xs font-medium transition-colors";
+      rem.textContent = t("removeElement");
+      rem.addEventListener("click", () => {
+        if (countItems() <= (element.repeat.min ?? 0)) return;
+        itemsWrap.removeChild(item);
+        refreshControls();
+      });
+      item.appendChild(rem);
+    }
+    itemsWrap.appendChild(item);
+    if (!state.config.readonly) {
+      refreshControls();
+    }
+  };
+
+  groupWrap.appendChild(itemsWrap);
+
+  // Only add button in edit mode
+  let addBtn;
+  if (!state.config.readonly) {
+    addBtn = document.createElement("button");
+    addBtn.type = "button";
+    addBtn.className =
+      "w-full py-2 px-4 border border-gray-300 rounded-lg text-gray-700 hover:bg-gray-50 flex items-center justify-center mt-3";
+    addBtn.innerHTML = `<svg class="w-4 h-4 mr-2" fill="currentColor" viewBox="0 0 24 24"><path d="M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z"/></svg>${t("addElement")}`;
+    groupWrap.appendChild(addBtn);
+  }
+
+  const refreshControls = () => {
+    if (state.config.readonly) return;
+    const n = countItems();
+    if (addBtn) addBtn.disabled = n >= max;
+    left.innerHTML = `<span>${element.label || element.key}</span> <span class="text-slate-500 dark:text-slate-400 text-xs">[${n} / ${max === Infinity ? "∞" : max}, min=${min}]</span>`;
+  };
+
+  if (pre && pre.length) {
+    const n = Math.min(max, Math.max(min, pre.length));
+    for (let i = 0; i < n; i++) addItem(pre[i]);
+  } else {
+    const n = Math.max(min, 0);
+    for (let i = 0; i < n; i++) addItem(null);
+  }
+
+  if (!state.config.readonly) {
+    addBtn.addEventListener("click", () => addItem(null));
+  } else {
+    // In readonly mode, just show the label without count controls
+    left.innerHTML = `<span>${element.label || element.key}</span>`;
+  }
+}
+
+function renderSingleGroup(element, ctx, itemsWrap, left, groupWrap) {
+  // Single object group
+  const subCtx = {
+    path: pathJoin(ctx.path, element.key),
+    prefill: ctx.prefill?.[element.key] || {},
+  };
+  element.elements.forEach((child) =>
+    itemsWrap.appendChild(renderElement(child, subCtx)),
+  );
+  groupWrap.appendChild(itemsWrap);
+  left.innerHTML = `<span>${element.label || element.key}</span>`;
+}
+
 // Common file preview rendering function for readonly mode
 function renderFilePreviewReadonly(resourceId, fileName) {
   const meta = state.resourceIndex.get(resourceId);
-  const actualFileName = fileName || meta?.name || "file";
+  const actualFileName =
+    fileName || meta?.name || resourceId.split("/").pop() || "file";
 
   // Individual file result container
   const fileResult = document.createElement("div");
@@ -1377,46 +1644,60 @@ function renderFilePreviewReadonly(resourceId, fileName) {
   previewContainer.className =
     "bg-gray-100 rounded-lg overflow-hidden cursor-pointer hover:opacity-90 transition-opacity";
 
-  // Check file type and render appropriate preview
-  if (
+  // Determine if this looks like an image file
+  const isImage =
     meta?.type?.startsWith("image/") ||
-    actualFileName.toLowerCase().match(/\.(jpg|jpeg|png|gif|webp)$/)
-  ) {
-    // Image preview
+    actualFileName.toLowerCase().match(/\.(jpg|jpeg|png|gif|webp)$/);
+
+  // Determine if this looks like a video file
+  const isVideo =
+    meta?.type?.startsWith("video/") ||
+    actualFileName.toLowerCase().match(/\.(mp4|webm|avi|mov)$/);
+
+  if (isImage) {
+    // Image preview - try getThumbnail first
     if (state.config.getThumbnail) {
-      const thumbnailUrl = state.config.getThumbnail(resourceId);
-      if (thumbnailUrl) {
-        previewContainer.innerHTML = `<img src="${thumbnailUrl}" alt="${actualFileName}" class="w-full h-auto">`;
-      } else {
+      try {
+        const thumbnailUrl = state.config.getThumbnail(resourceId);
+        if (thumbnailUrl) {
+          previewContainer.innerHTML = `<img src="${thumbnailUrl}" alt="${actualFileName}" class="w-full h-auto">`;
+        } else {
+          // Fallback to icon if getThumbnail returns null/undefined
+          previewContainer.innerHTML = `<div class="aspect-video flex items-center justify-center text-gray-400"><div class="text-center"><div class="text-4xl mb-2">🖼️</div><div class="text-sm">${actualFileName}</div></div></div>`;
+        }
+      } catch (error) {
+        console.warn("getThumbnail failed for", resourceId, error);
         previewContainer.innerHTML = `<div class="aspect-video flex items-center justify-center text-gray-400"><div class="text-center"><div class="text-4xl mb-2">🖼️</div><div class="text-sm">${actualFileName}</div></div></div>`;
       }
     } else {
       previewContainer.innerHTML = `<div class="aspect-video flex items-center justify-center text-gray-400"><div class="text-center"><div class="text-4xl mb-2">🖼️</div><div class="text-sm">${actualFileName}</div></div></div>`;
     }
-  } else if (
-    meta?.type?.startsWith("video/") ||
-    actualFileName.toLowerCase().match(/\.(mp4|webm|avi|mov)$/)
-  ) {
-    // Video preview
+  } else if (isVideo) {
+    // Video preview - try getThumbnail for video URL
     if (state.config.getThumbnail) {
-      const thumbnailUrl = state.config.getThumbnail(resourceId);
-      if (thumbnailUrl) {
-        previewContainer.innerHTML = `
-                    <div class="relative group">
-                        <video class="w-full h-auto" controls preload="auto" muted>
-                            <source src="${thumbnailUrl}" 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>
+      try {
+        const videoUrl = state.config.getThumbnail(resourceId);
+        if (videoUrl) {
+          previewContainer.innerHTML = `
+                        <div class="relative group">
+                            <video class="w-full h-auto" controls preload="auto" muted>
+                                <source src="${videoUrl}" type="${meta?.type || "video/mp4"}">
+                                Ваш браузер не поддерживает видео.
+                            </video>
+                            <div class="absolute inset-0 bg-black bg-opacity-20 opacity-0 group-hover:opacity-100 transition-opacity flex items-center justify-center pointer-events-none">
+                                <div class="bg-white bg-opacity-90 rounded-full p-3">
+                                    <svg class="w-8 h-8 text-gray-800" fill="currentColor" viewBox="0 0 24 24">
+                                        <path d="M8 5v14l11-7z"/>
+                                    </svg>
+                                </div>
                             </div>
                         </div>
-                    </div>
-                `;
-      } else {
+                    `;
+        } else {
+          previewContainer.innerHTML = `<div class="aspect-video flex items-center justify-center text-gray-400"><div class="text-center"><div class="text-4xl mb-2">🎥</div><div class="text-sm">${actualFileName}</div></div></div>`;
+        }
+      } catch (error) {
+        console.warn("getThumbnail failed for video", resourceId, error);
         previewContainer.innerHTML = `<div class="aspect-video flex items-center justify-center text-gray-400"><div class="text-center"><div class="text-4xl mb-2">🎥</div><div class="text-sm">${actualFileName}</div></div></div>`;
       }
     } else {
@@ -1537,10 +1818,12 @@ function setThumbnailHandler(thumbnailFn) {
 }
 
 function setMode(mode) {
-  if (mode === "readonly") {
-    state.config.readonly = true;
-  } else {
-    state.config.readonly = false;
+  state.config.readonly = mode === "readonly";
+}
+
+function setLocale(locale) {
+  if (state.config.translations[locale]) {
+    state.config.locale = locale;
   }
 }
 
@@ -1597,6 +1880,7 @@ const formBuilderAPI = {
   setDownloadHandler,
   setThumbnailHandler,
   setMode,
+  setLocale,
   getFormData,
   submitForm,
   saveDraft,
@@ -1620,6 +1904,7 @@ export {
   setDownloadHandler,
   setThumbnailHandler,
   setMode,
+  setLocale,
   getFormData,
   submitForm,
   saveDraft,