@dmitryvim/form-builder 0.1.31 → 0.1.33

package/dist/form-builder.js

@@ -148,6 +148,10 @@ function renderForm(schema, prefill) {
   formEl.className = "space-y-6";
 
   schema.elements.forEach((element, _index) => {
+    // Skip rendering hidden elements
+    if (element.hidden) {
+      return;
+    }
     const block = renderElement(element, {
       path: "",
       prefill: prefill || {},
@@ -209,23 +213,44 @@ function renderElement(element, ctx) {
 
   switch (element.type) {
     case "text":
-      renderTextElement(element, ctx, wrapper, pathKey);
+      if (element.multiple) {
+        renderMultipleTextElement(element, ctx, wrapper, pathKey);
+      } else {
+        renderTextElement(element, ctx, wrapper, pathKey);
+      }
       break;
 
     case "textarea":
-      renderTextareaElement(element, ctx, wrapper, pathKey);
+      if (element.multiple) {
+        renderMultipleTextareaElement(element, ctx, wrapper, pathKey);
+      } else {
+        renderTextareaElement(element, ctx, wrapper, pathKey);
+      }
       break;
 
     case "number":
-      renderNumberElement(element, ctx, wrapper, pathKey);
+      if (element.multiple) {
+        renderMultipleNumberElement(element, ctx, wrapper, pathKey);
+      } else {
+        renderNumberElement(element, ctx, wrapper, pathKey);
+      }
       break;
 
     case "select":
-      renderSelectElement(element, ctx, wrapper, pathKey);
+      if (element.multiple) {
+        renderMultipleSelectElement(element, ctx, wrapper, pathKey);
+      } else {
+        renderSelectElement(element, ctx, wrapper, pathKey);
+      }
       break;
 
     case "file":
-      renderFileElement(element, ctx, wrapper, pathKey);
+      // Handle multiple files with file type using multiple property
+      if (element.multiple) {
+        renderMultipleFileElement(element, ctx, wrapper, pathKey);
+      } else {
+        renderFileElement(element, ctx, wrapper, pathKey);
+      }
       break;
 
     case "files":
@@ -236,6 +261,15 @@ function renderElement(element, ctx) {
       renderGroupElement(element, ctx, wrapper, pathKey);
       break;
 
+    case "container":
+      // Handle containers with multiple property like groups
+      if (element.multiple) {
+        renderMultipleContainerElement(element, ctx, wrapper, pathKey);
+      } else {
+        renderSingleContainerElement(element, ctx, wrapper, pathKey);
+      }
+      break;
+
     default: {
       const unsupported = document.createElement("div");
       unsupported.className = "text-red-500 text-sm";
@@ -580,8 +614,15 @@ function renderResourcePills(container, rids, onRemove) {
 
       // Add click handler to each slot
       slot.onclick = () => {
-        // Look for file input in the files wrapper (go up from list -> filesContainer -> filesWrapper)
-        const filesWrapper = container.closest(".space-y-2");
+        // Look for file input - check parent containers that have space-y-2 class
+        let filesWrapper = container.parentElement;
+        while (filesWrapper && !filesWrapper.classList.contains('space-y-2')) {
+          filesWrapper = filesWrapper.parentElement;
+        }
+        // If no parent with space-y-2, container itself might be the wrapper
+        if (!filesWrapper && container.classList.contains('space-y-2')) {
+          filesWrapper = container;
+        }
         const fileInput = filesWrapper?.querySelector('input[type="file"]');
         if (fileInput) fileInput.click();
       };
@@ -598,8 +639,15 @@ function renderResourcePills(container, rids, onRemove) {
     uploadLink.textContent = t("uploadText");
     uploadLink.onclick = (e) => {
       e.stopPropagation();
-      // Look for file input in the files wrapper (go up from list -> filesContainer -> filesWrapper)
-      const filesWrapper = container.closest(".space-y-2");
+      // Look for file input - check parent containers that have space-y-2 class
+      let filesWrapper = container.parentElement;
+      while (filesWrapper && !filesWrapper.classList.contains('space-y-2')) {
+        filesWrapper = filesWrapper.parentElement;
+      }
+      // If no parent with space-y-2, container itself might be the wrapper
+      if (!filesWrapper && container.classList.contains('space-y-2')) {
+        filesWrapper = container;
+      }
       const fileInput = filesWrapper?.querySelector('input[type="file"]');
       if (fileInput) fileInput.click();
     };
@@ -758,8 +806,15 @@ function renderResourcePills(container, rids, onRemove) {
       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 in the files wrapper (go up from list -> filesContainer -> filesWrapper)
-        const filesWrapper = container.closest(".space-y-2");
+        // Look for file input - check parent containers that have space-y-2 class
+        let filesWrapper = container.parentElement;
+        while (filesWrapper && !filesWrapper.classList.contains('space-y-2')) {
+          filesWrapper = filesWrapper.parentElement;
+        }
+        // If no parent with space-y-2, container itself might be the wrapper
+        if (!filesWrapper && container.classList.contains('space-y-2')) {
+          filesWrapper = container;
+        }
         const fileInput = filesWrapper?.querySelector('input[type="file"]');
         if (fileInput) fileInput.click();
       };
@@ -979,94 +1034,277 @@ function validateForm(skipValidation = false) {
     switch (element.type) {
       case "text":
       case "textarea": {
-        const input = scopeRoot.querySelector(`[name$="${key}"]`);
-        const val = input?.value ?? "";
-        if (!skipValidation && element.required && val === "") {
-          errors.push(`${key}: required`);
-          markValidity(input, "required");
-          return "";
-        }
-        if (!skipValidation && val) {
-          if (element.minLength !== null && val.length < element.minLength) {
-            errors.push(`${key}: minLength=${element.minLength}`);
-            markValidity(input, `minLength=${element.minLength}`);
+        if (element.multiple) {
+          // Handle multiple text/textarea fields
+          const inputs = scopeRoot.querySelectorAll(`[name^="${key}["]`);
+          const values = [];
+
+          inputs.forEach((input, index) => {
+            const val = input?.value ?? "";
+            values.push(val);
+
+            if (!skipValidation && val) {
+              if (element.minLength !== null && val.length < element.minLength) {
+                errors.push(`${key}[${index}]: minLength=${element.minLength}`);
+                markValidity(input, `minLength=${element.minLength}`);
+              }
+              if (element.maxLength !== null && val.length > element.maxLength) {
+                errors.push(`${key}[${index}]: maxLength=${element.maxLength}`);
+                markValidity(input, `maxLength=${element.maxLength}`);
+              }
+              if (element.pattern) {
+                try {
+                  const re = new RegExp(element.pattern);
+                  if (!re.test(val)) {
+                    errors.push(`${key}[${index}]: pattern mismatch`);
+                    markValidity(input, "pattern mismatch");
+                  }
+                } catch {
+                  errors.push(`${key}[${index}]: invalid pattern`);
+                  markValidity(input, "invalid pattern");
+                }
+              }
+            } else {
+              markValidity(input, null);
+            }
+          });
+
+          // Validate minCount/maxCount constraints
+          if (!skipValidation) {
+            const minCount = element.minCount ?? 1;
+            const maxCount = element.maxCount ?? 10;
+            const nonEmptyValues = values.filter(v => v.trim() !== "");
+
+            if (element.required && nonEmptyValues.length === 0) {
+              errors.push(`${key}: required`);
+            }
+            if (nonEmptyValues.length < minCount) {
+              errors.push(`${key}: minimum ${minCount} items required`);
+            }
+            if (nonEmptyValues.length > maxCount) {
+              errors.push(`${key}: maximum ${maxCount} items allowed`);
+            }
           }
-          if (element.maxLength !== null && val.length > element.maxLength) {
-            errors.push(`${key}: maxLength=${element.maxLength}`);
-            markValidity(input, `maxLength=${element.maxLength}`);
+
+          return values;
+        } else {
+          // Handle single text/textarea field
+          const input = scopeRoot.querySelector(`[name$="${key}"]`);
+          const val = input?.value ?? "";
+          if (!skipValidation && element.required && val === "") {
+            errors.push(`${key}: required`);
+            markValidity(input, "required");
+            return "";
           }
-          if (element.pattern) {
-            try {
-              const re = new RegExp(element.pattern);
-              if (!re.test(val)) {
-                errors.push(`${key}: pattern mismatch`);
-                markValidity(input, "pattern mismatch");
+          if (!skipValidation && val) {
+            if (element.minLength !== null && val.length < element.minLength) {
+              errors.push(`${key}: minLength=${element.minLength}`);
+              markValidity(input, `minLength=${element.minLength}`);
+            }
+            if (element.maxLength !== null && val.length > element.maxLength) {
+              errors.push(`${key}: maxLength=${element.maxLength}`);
+              markValidity(input, `maxLength=${element.maxLength}`);
+            }
+            if (element.pattern) {
+              try {
+                const re = new RegExp(element.pattern);
+                if (!re.test(val)) {
+                  errors.push(`${key}: pattern mismatch`);
+                  markValidity(input, "pattern mismatch");
+                }
+              } catch {
+                errors.push(`${key}: invalid pattern`);
+                markValidity(input, "invalid pattern");
               }
-            } catch {
-              errors.push(`${key}: invalid pattern`);
-              markValidity(input, "invalid pattern");
             }
+          } else if (skipValidation) {
+            markValidity(input, null);
+          } else {
+            markValidity(input, null);
           }
-        } else if (skipValidation) {
-          markValidity(input, null);
-        } else {
-          markValidity(input, null);
+          return val;
         }
-        return val;
       }
       case "number": {
-        const input = scopeRoot.querySelector(`[name$="${key}"]`);
-        const raw = input?.value ?? "";
-        if (!skipValidation && element.required && raw === "") {
-          errors.push(`${key}: required`);
-          markValidity(input, "required");
-          return null;
-        }
-        if (raw === "") {
+        if (element.multiple) {
+          // Handle multiple number fields
+          const inputs = scopeRoot.querySelectorAll(`[name^="${key}["]`);
+          const values = [];
+
+          inputs.forEach((input, index) => {
+            const raw = input?.value ?? "";
+            if (raw === "") {
+              values.push(null);
+              markValidity(input, null);
+              return;
+            }
+
+            const v = parseFloat(raw);
+            if (!skipValidation && !Number.isFinite(v)) {
+              errors.push(`${key}[${index}]: not a number`);
+              markValidity(input, "not a number");
+              values.push(null);
+              return;
+            }
+
+            if (!skipValidation && element.min !== null && v < element.min) {
+              errors.push(`${key}[${index}]: < min=${element.min}`);
+              markValidity(input, `< min=${element.min}`);
+            }
+            if (!skipValidation && element.max !== null && v > element.max) {
+              errors.push(`${key}[${index}]: > max=${element.max}`);
+              markValidity(input, `> max=${element.max}`);
+            }
+
+            const d = Number.isInteger(element.decimals ?? 0) ? element.decimals : 0;
+            markValidity(input, null);
+            values.push(Number(v.toFixed(d)));
+          });
+
+          // Validate minCount/maxCount constraints
+          if (!skipValidation) {
+            const minCount = element.minCount ?? 1;
+            const maxCount = element.maxCount ?? 10;
+            const nonNullValues = values.filter(v => v !== null);
+
+            if (element.required && nonNullValues.length === 0) {
+              errors.push(`${key}: required`);
+            }
+            if (nonNullValues.length < minCount) {
+              errors.push(`${key}: minimum ${minCount} items required`);
+            }
+            if (nonNullValues.length > maxCount) {
+              errors.push(`${key}: maximum ${maxCount} items allowed`);
+            }
+          }
+
+          return values;
+        } else {
+          // Handle single number field
+          const input = scopeRoot.querySelector(`[name$="${key}"]`);
+          const raw = input?.value ?? "";
+          if (!skipValidation && element.required && raw === "") {
+            errors.push(`${key}: required`);
+            markValidity(input, "required");
+            return null;
+          }
+          if (raw === "") {
+            markValidity(input, null);
+            return null;
+          }
+          const v = parseFloat(raw);
+          if (!skipValidation && !Number.isFinite(v)) {
+            errors.push(`${key}: not a number`);
+            markValidity(input, "not a number");
+            return null;
+          }
+          if (!skipValidation && element.min !== null && v < element.min) {
+            errors.push(`${key}: < min=${element.min}`);
+            markValidity(input, `< min=${element.min}`);
+          }
+          if (!skipValidation && element.max !== null && v > element.max) {
+            errors.push(`${key}: > max=${element.max}`);
+            markValidity(input, `> max=${element.max}`);
+          }
+          const d = Number.isInteger(element.decimals ?? 0)
+            ? element.decimals
+            : 0;
           markValidity(input, null);
-          return null;
-        }
-        const v = parseFloat(raw);
-        if (!skipValidation && !Number.isFinite(v)) {
-          errors.push(`${key}: not a number`);
-          markValidity(input, "not a number");
-          return null;
-        }
-        if (!skipValidation && element.min !== null && v < element.min) {
-          errors.push(`${key}: < min=${element.min}`);
-          markValidity(input, `< min=${element.min}`);
+          return Number(v.toFixed(d));
         }
-        if (!skipValidation && element.max !== null && v > element.max) {
-          errors.push(`${key}: > max=${element.max}`);
-          markValidity(input, `> max=${element.max}`);
-        }
-        const d = Number.isInteger(element.decimals ?? 0)
-          ? element.decimals
-          : 0;
-        markValidity(input, null);
-        return Number(v.toFixed(d));
       }
       case "select": {
-        const input = scopeRoot.querySelector(`[name$="${key}"]`);
-        const val = input?.value ?? "";
-        if (!skipValidation && element.required && val === "") {
-          errors.push(`${key}: required`);
-          markValidity(input, "required");
-          return "";
+        if (element.multiple) {
+          // Handle multiple select fields
+          const inputs = scopeRoot.querySelectorAll(`[name^="${key}["]`);
+          const values = [];
+
+          inputs.forEach((input) => {
+            const val = input?.value ?? "";
+            values.push(val);
+            markValidity(input, null);
+          });
+
+          // Validate minCount/maxCount constraints
+          if (!skipValidation) {
+            const minCount = element.minCount ?? 1;
+            const maxCount = element.maxCount ?? 10;
+            const nonEmptyValues = values.filter(v => v !== "");
+
+            if (element.required && nonEmptyValues.length === 0) {
+              errors.push(`${key}: required`);
+            }
+            if (nonEmptyValues.length < minCount) {
+              errors.push(`${key}: minimum ${minCount} items required`);
+            }
+            if (nonEmptyValues.length > maxCount) {
+              errors.push(`${key}: maximum ${maxCount} items allowed`);
+            }
+          }
+
+          return values;
+        } else {
+          // Handle single select field
+          const input = scopeRoot.querySelector(`[name$="${key}"]`);
+          const val = input?.value ?? "";
+          if (!skipValidation && element.required && val === "") {
+            errors.push(`${key}: required`);
+            markValidity(input, "required");
+            return "";
+          }
+          markValidity(input, null);
+          return val;
         }
-        markValidity(input, null);
-        return val;
       }
       case "file": {
-        const input = scopeRoot.querySelector(
-          `input[name$="${key}"][type="hidden"]`,
-        );
-        const rid = input?.value ?? "";
-        if (!skipValidation && element.required && rid === "") {
-          errors.push(`${key}: required`);
-          return null;
+        if (element.multiple) {
+          // Handle file with multiple property like files type
+          // Find the files list by locating the specific file input for this field
+          const fullKey = pathJoin(ctx.path, key);
+          const pickerInput = scopeRoot.querySelector(`input[type="file"][name="${fullKey}"]`);
+          const filesWrapper = pickerInput?.closest('.space-y-2');
+          const container = filesWrapper?.querySelector('.files-list') || null;
+
+          const resourceIds = [];
+          if (container) {
+            const pills = container.querySelectorAll(".resource-pill");
+            pills.forEach((pill) => {
+              const resourceId = pill.dataset.resourceId;
+              if (resourceId) {
+                resourceIds.push(resourceId);
+              }
+            });
+          }
+
+          // Validate minCount/maxCount constraints
+          if (!skipValidation) {
+            const minFiles = element.minCount ?? 0;
+            const maxFiles = element.maxCount ?? Infinity;
+
+            if (element.required && resourceIds.length === 0) {
+              errors.push(`${key}: required`);
+            }
+            if (resourceIds.length < minFiles) {
+              errors.push(`${key}: minimum ${minFiles} files required`);
+            }
+            if (resourceIds.length > maxFiles) {
+              errors.push(`${key}: maximum ${maxFiles} files allowed`);
+            }
+          }
+
+          return resourceIds;
+        } else {
+          // Handle single file
+          const input = scopeRoot.querySelector(
+            `input[name$="${key}"][type="hidden"]`,
+          );
+          const rid = input?.value ?? "";
+          if (!skipValidation && element.required && rid === "") {
+            errors.push(`${key}: required`);
+            return null;
+          }
+          return rid || null;
         }
-        return rid || null;
       }
       case "files": {
         // For files, we need to collect all resource IDs
@@ -1110,6 +1348,69 @@ function validateForm(skipValidation = false) {
       }
       case "group": {
         if (element.repeat && isPlainObject(element.repeat)) {
+          const items = [];
+          // Use full path for nested group element search
+          const fullKey = pathJoin(ctx.path, key);
+          const itemElements = scopeRoot.querySelectorAll(`[name^="${fullKey}["]`);
+
+          // Extract actual indices from DOM element names instead of assuming sequential numbering
+          const actualIndices = new Set();
+          itemElements.forEach((el) => {
+            const match = el.name.match(new RegExp(`^${fullKey.replace(/[.*+?^${}()|[\]\\]/g, '\\$&')}\\[(\\d+)\\]`));
+            if (match) {
+              actualIndices.add(parseInt(match[1]));
+            }
+          });
+
+          const sortedIndices = Array.from(actualIndices).sort((a, b) => a - b);
+
+          sortedIndices.forEach((actualIndex) => {
+            const itemData = {};
+            // Find the specific group item container for scoped queries - use full path
+            const fullItemPath = `${fullKey}[${actualIndex}]`;
+            const itemContainer =
+              scopeRoot.querySelector(`[data-group-item="${fullItemPath}"]`) ||
+              scopeRoot;
+            element.elements.forEach((child) => {
+              if (child.hidden) {
+                // For hidden child elements, use their default value
+                itemData[child.key] = child.default !== undefined ? child.default : "";
+              } else {
+                const childKey = `${fullKey}[${actualIndex}].${child.key}`;
+                itemData[child.key] = validateElement(
+                  { ...child, key: childKey },
+                  ctx,
+                  itemContainer,
+                );
+              }
+            });
+            items.push(itemData);
+          });
+          return items;
+        } else {
+          const groupData = {};
+          // Find the specific group container for scoped queries
+          const groupContainer =
+            scopeRoot.querySelector(`[data-group="${key}"]`) || scopeRoot;
+          element.elements.forEach((child) => {
+            if (child.hidden) {
+              // For hidden child elements, use their default value
+              groupData[child.key] = child.default !== undefined ? child.default : "";
+            } else {
+              const childKey = `${key}.${child.key}`;
+              groupData[child.key] = validateElement(
+                { ...child, key: childKey },
+                ctx,
+                groupContainer,
+              );
+            }
+          });
+          return groupData;
+        }
+      }
+      case "container": {
+        if (element.multiple) {
+          // Handle multiple containers like repeating groups
           const items = [];
           const itemElements = scopeRoot.querySelectorAll(`[name^="${key}["]`);
           const itemCount = Math.max(
@@ -1119,35 +1420,62 @@ function validateForm(skipValidation = false) {
 
           for (let i = 0; i < itemCount; i++) {
             const itemData = {};
-            // Find the specific group item container for scoped queries
+            // Find the specific container item container for scoped queries
             const itemContainer =
-              scopeRoot.querySelector(`[data-group-item="${key}[${i}]"]`) ||
+              scopeRoot.querySelector(`[data-container-item="${key}[${i}]"]`) ||
               scopeRoot;
             element.elements.forEach((child) => {
-              const childKey = `${key}[${i}].${child.key}`;
-              itemData[child.key] = validateElement(
-                { ...child, key: childKey },
-                ctx,
-                itemContainer,
-              );
+              if (child.hidden) {
+                // For hidden child elements, use their default value
+                itemData[child.key] = child.default !== undefined ? child.default : "";
+              } else {
+                const childKey = `${key}[${i}].${child.key}`;
+                itemData[child.key] = validateElement(
+                  { ...child, key: childKey },
+                  ctx,
+                  itemContainer,
+                );
+              }
             });
             items.push(itemData);
           }
+
+          // Validate minCount/maxCount constraints
+          if (!skipValidation) {
+            const minItems = element.minCount ?? 0;
+            const maxItems = element.maxCount ?? Infinity;
+
+            if (element.required && items.length === 0) {
+              errors.push(`${key}: required`);
+            }
+            if (items.length < minItems) {
+              errors.push(`${key}: minimum ${minItems} items required`);
+            }
+            if (items.length > maxItems) {
+              errors.push(`${key}: maximum ${maxItems} items allowed`);
+            }
+          }
+
           return items;
         } else {
-          const groupData = {};
-          // Find the specific group container for scoped queries
-          const groupContainer =
-            scopeRoot.querySelector(`[data-group="${key}"]`) || scopeRoot;
+          const containerData = {};
+          // Find the specific container container for scoped queries
+          const containerContainer =
+            scopeRoot.querySelector(`[data-container="${key}"]`) || scopeRoot;
           element.elements.forEach((child) => {
-            const childKey = `${key}.${child.key}`;
-            groupData[child.key] = validateElement(
-              { ...child, key: childKey },
-              ctx,
-              groupContainer,
-            );
+            if (child.hidden) {
+              // For hidden child elements, use their default value
+              containerData[child.key] = child.default !== undefined ? child.default : "";
+            } else {
+              const childKey = `${key}.${child.key}`;
+              containerData[child.key] = validateElement(
+                { ...child, key: childKey },
+                ctx,
+                containerContainer,
+              );
+            }
           });
-          return groupData;
+          return containerData;
         }
       }
       default:
@@ -1156,7 +1484,12 @@ function validateForm(skipValidation = false) {
   }
 
   state.schema.elements.forEach((element) => {
-    data[element.key] = validateElement(element, { path: "" });
+    // Handle hidden elements - use their default value instead of reading from DOM
+    if (element.hidden) {
+      data[element.key] = element.default !== undefined ? element.default : "";
+    } else {
+      data[element.key] = validateElement(element, { path: "" });
+    }
   });
 
   return {
@@ -1185,6 +1518,118 @@ function renderTextElement(element, ctx, wrapper, pathKey) {
   wrapper.appendChild(textHint);
 }
 
+function renderMultipleTextElement(element, ctx, wrapper, pathKey) {
+  const prefillValues = ctx.prefill[element.key] || [];
+  const values = Array.isArray(prefillValues) ? [...prefillValues] : [];
+
+  // Ensure minimum count
+  const minCount = element.minCount ?? 1;
+  const maxCount = element.maxCount ?? 10;
+
+  while (values.length < minCount) {
+    values.push(element.default || "");
+  }
+
+  const container = document.createElement("div");
+  container.className = "space-y-2";
+  wrapper.appendChild(container);
+
+  function updateIndices() {
+    const items = container.querySelectorAll(".multiple-text-item");
+    items.forEach((item, index) => {
+      const input = item.querySelector("input");
+      if (input) {
+        input.name = `${pathKey}[${index}]`;
+      }
+    });
+  }
+
+  function addTextItem(value = "", index = -1) {
+    const itemWrapper = document.createElement("div");
+    itemWrapper.className = "multiple-text-item flex items-center gap-2";
+
+    const textInput = document.createElement("input");
+    textInput.type = "text";
+    textInput.className = "flex-1 px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500";
+    textInput.placeholder = element.placeholder || "Enter text";
+    textInput.value = value;
+    textInput.readOnly = state.config.readonly;
+
+    itemWrapper.appendChild(textInput);
+
+    // Remove buttons are managed centrally via updateRemoveButtons()
+
+    if (index === -1) {
+      container.appendChild(itemWrapper);
+    } else {
+      container.insertBefore(itemWrapper, container.children[index]);
+    }
+
+    updateIndices();
+    return itemWrapper;
+  }
+
+  function updateRemoveButtons() {
+    if (state.config.readonly) return;
+    const items = container.querySelectorAll('.multiple-text-item');
+    const currentCount = items.length;
+    items.forEach((item) => {
+      let removeBtn = item.querySelector('.remove-item-btn');
+      if (!removeBtn) {
+        removeBtn = document.createElement('button');
+        removeBtn.type = 'button';
+        removeBtn.className = 'remove-item-btn px-2 py-1 text-red-600 hover:bg-red-50 rounded';
+        removeBtn.innerHTML = '✕';
+        removeBtn.onclick = () => {
+          const currentIndex = Array.from(container.children).indexOf(item);
+          if (container.children.length > minCount) {
+            values.splice(currentIndex, 1);
+            item.remove();
+            updateIndices();
+            updateAddButton();
+            updateRemoveButtons();
+          }
+        };
+        item.appendChild(removeBtn);
+      }
+      const disabled = currentCount <= minCount;
+      removeBtn.disabled = disabled;
+      removeBtn.style.opacity = disabled ? '0.5' : '1';
+      removeBtn.style.pointerEvents = disabled ? 'none' : 'auto';
+    });
+  }
+
+  function updateAddButton() {
+    const existingAddBtn = wrapper.querySelector(".add-text-btn");
+    if (existingAddBtn) existingAddBtn.remove();
+
+    if (!state.config.readonly && values.length < maxCount) {
+      const addBtn = document.createElement("button");
+      addBtn.type = "button";
+      addBtn.className = "add-text-btn mt-2 px-3 py-1 text-blue-600 border border-blue-300 rounded hover:bg-blue-50 text-sm";
+      addBtn.textContent = `+ Add ${element.label || 'Text'}`;
+      addBtn.onclick = () => {
+        values.push(element.default || "");
+        addTextItem(element.default || "");
+        updateAddButton();
+        updateRemoveButtons();
+      };
+      wrapper.appendChild(addBtn);
+    }
+  }
+
+  // Render initial items
+  values.forEach(value => addTextItem(value));
+  updateAddButton();
+  updateRemoveButtons();
+
+  // Add hint
+  const hint = document.createElement("p");
+  hint.className = "text-xs text-gray-500 mt-1";
+  hint.textContent = makeFieldHint(element);
+  wrapper.appendChild(hint);
+}
+
 function renderTextareaElement(element, ctx, wrapper, pathKey) {
   const textareaInput = document.createElement("textarea");
   textareaInput.className =
@@ -1203,6 +1648,118 @@ function renderTextareaElement(element, ctx, wrapper, pathKey) {
   wrapper.appendChild(textareaHint);
 }
 
+function renderMultipleTextareaElement(element, ctx, wrapper, pathKey) {
+  const prefillValues = ctx.prefill[element.key] || [];
+  const values = Array.isArray(prefillValues) ? [...prefillValues] : [];
+
+  // Ensure minimum count
+  const minCount = element.minCount ?? 1;
+  const maxCount = element.maxCount ?? 10;
+
+  while (values.length < minCount) {
+    values.push(element.default || "");
+  }
+
+  const container = document.createElement("div");
+  container.className = "space-y-2";
+  wrapper.appendChild(container);
+
+  function updateIndices() {
+    const items = container.querySelectorAll(".multiple-textarea-item");
+    items.forEach((item, index) => {
+      const textarea = item.querySelector("textarea");
+      if (textarea) {
+        textarea.name = `${pathKey}[${index}]`;
+      }
+    });
+  }
+
+  function addTextareaItem(value = "", index = -1) {
+    const itemWrapper = document.createElement("div");
+    itemWrapper.className = "multiple-textarea-item";
+
+    const textareaInput = document.createElement("textarea");
+    textareaInput.className = "w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 resize-none";
+    textareaInput.placeholder = element.placeholder || "Enter text";
+    textareaInput.rows = element.rows || 4;
+    textareaInput.value = value;
+    textareaInput.readOnly = state.config.readonly;
+
+    itemWrapper.appendChild(textareaInput);
+
+    // Remove buttons are managed centrally via updateRemoveButtons()
+
+    if (index === -1) {
+      container.appendChild(itemWrapper);
+    } else {
+      container.insertBefore(itemWrapper, container.children[index]);
+    }
+
+    updateIndices();
+    return itemWrapper;
+  }
+
+  function updateRemoveButtons() {
+    if (state.config.readonly) return;
+    const items = container.querySelectorAll('.multiple-textarea-item');
+    const currentCount = items.length;
+    items.forEach((item) => {
+      let removeBtn = item.querySelector('.remove-item-btn');
+      if (!removeBtn) {
+        removeBtn = document.createElement('button');
+        removeBtn.type = 'button';
+        removeBtn.className = 'remove-item-btn mt-1 px-2 py-1 text-red-600 hover:bg-red-50 rounded text-sm';
+        removeBtn.innerHTML = '✕ Remove';
+        removeBtn.onclick = () => {
+          const currentIndex = Array.from(container.children).indexOf(item);
+          if (container.children.length > minCount) {
+            values.splice(currentIndex, 1);
+            item.remove();
+            updateIndices();
+            updateAddButton();
+            updateRemoveButtons();
+          }
+        };
+        item.appendChild(removeBtn);
+      }
+      const disabled = currentCount <= minCount;
+      removeBtn.disabled = disabled;
+      removeBtn.style.opacity = disabled ? '0.5' : '1';
+      removeBtn.style.pointerEvents = disabled ? 'none' : 'auto';
+    });
+  }
+
+  function updateAddButton() {
+    const existingAddBtn = wrapper.querySelector(".add-textarea-btn");
+    if (existingAddBtn) existingAddBtn.remove();
+
+    if (!state.config.readonly && values.length < maxCount) {
+      const addBtn = document.createElement("button");
+      addBtn.type = "button";
+      addBtn.className = "add-textarea-btn mt-2 px-3 py-1 text-blue-600 border border-blue-300 rounded hover:bg-blue-50 text-sm";
+      addBtn.textContent = `+ Add ${element.label || 'Textarea'}`;
+      addBtn.onclick = () => {
+        values.push(element.default || "");
+        addTextareaItem(element.default || "");
+        updateAddButton();
+        updateRemoveButtons();
+      };
+      wrapper.appendChild(addBtn);
+    }
+  }
+
+  // Render initial items
+  values.forEach(value => addTextareaItem(value));
+  updateAddButton();
+  updateRemoveButtons();
+
+  // Add hint
+  const hint = document.createElement("p");
+  hint.className = "text-xs text-gray-500 mt-1";
+  hint.textContent = makeFieldHint(element);
+  wrapper.appendChild(hint);
+}
+
 function renderNumberElement(element, ctx, wrapper, pathKey) {
   const numberInput = document.createElement("input");
   numberInput.type = "number";
@@ -1224,6 +1781,121 @@ function renderNumberElement(element, ctx, wrapper, pathKey) {
   wrapper.appendChild(numberHint);
 }
 
+function renderMultipleNumberElement(element, ctx, wrapper, pathKey) {
+  const prefillValues = ctx.prefill[element.key] || [];
+  const values = Array.isArray(prefillValues) ? [...prefillValues] : [];
+
+  // Ensure minimum count
+  const minCount = element.minCount ?? 1;
+  const maxCount = element.maxCount ?? 10;
+
+  while (values.length < minCount) {
+    values.push(element.default || "");
+  }
+
+  const container = document.createElement("div");
+  container.className = "space-y-2";
+  wrapper.appendChild(container);
+
+  function updateIndices() {
+    const items = container.querySelectorAll(".multiple-number-item");
+    items.forEach((item, index) => {
+      const input = item.querySelector("input");
+      if (input) {
+        input.name = `${pathKey}[${index}]`;
+      }
+    });
+  }
+
+  function addNumberItem(value = "", index = -1) {
+    const itemWrapper = document.createElement("div");
+    itemWrapper.className = "multiple-number-item flex items-center gap-2";
+
+    const numberInput = document.createElement("input");
+    numberInput.type = "number";
+    numberInput.className = "flex-1 px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500";
+    numberInput.placeholder = element.placeholder || "0";
+    if (element.min !== undefined) numberInput.min = element.min;
+    if (element.max !== undefined) numberInput.max = element.max;
+    if (element.step !== undefined) numberInput.step = element.step;
+    numberInput.value = value;
+    numberInput.readOnly = state.config.readonly;
+
+    itemWrapper.appendChild(numberInput);
+
+    // Remove buttons are managed centrally via updateRemoveButtons()
+
+    if (index === -1) {
+      container.appendChild(itemWrapper);
+    } else {
+      container.insertBefore(itemWrapper, container.children[index]);
+    }
+
+    updateIndices();
+    return itemWrapper;
+  }
+
+  function updateRemoveButtons() {
+    if (state.config.readonly) return;
+    const items = container.querySelectorAll('.multiple-number-item');
+    const currentCount = items.length;
+    items.forEach((item) => {
+      let removeBtn = item.querySelector('.remove-item-btn');
+      if (!removeBtn) {
+        removeBtn = document.createElement('button');
+        removeBtn.type = 'button';
+        removeBtn.className = 'remove-item-btn px-2 py-1 text-red-600 hover:bg-red-50 rounded';
+        removeBtn.innerHTML = '✕';
+        removeBtn.onclick = () => {
+          const currentIndex = Array.from(container.children).indexOf(item);
+          if (container.children.length > minCount) {
+            values.splice(currentIndex, 1);
+            item.remove();
+            updateIndices();
+            updateAddButton();
+            updateRemoveButtons();
+          }
+        };
+        item.appendChild(removeBtn);
+      }
+      const disabled = currentCount <= minCount;
+      removeBtn.disabled = disabled;
+      removeBtn.style.opacity = disabled ? '0.5' : '1';
+      removeBtn.style.pointerEvents = disabled ? 'none' : 'auto';
+    });
+  }
+
+  function updateAddButton() {
+    const existingAddBtn = wrapper.querySelector(".add-number-btn");
+    if (existingAddBtn) existingAddBtn.remove();
+
+    if (!state.config.readonly && values.length < maxCount) {
+      const addBtn = document.createElement("button");
+      addBtn.type = "button";
+      addBtn.className = "add-number-btn mt-2 px-3 py-1 text-blue-600 border border-blue-300 rounded hover:bg-blue-50 text-sm";
+      addBtn.textContent = `+ Add ${element.label || 'Number'}`;
+      addBtn.onclick = () => {
+        values.push(element.default || "");
+        addNumberItem(element.default || "");
+        updateAddButton();
+        updateRemoveButtons();
+      };
+      wrapper.appendChild(addBtn);
+    }
+  }
+
+  // Render initial items
+  values.forEach(value => addNumberItem(value));
+  updateAddButton();
+  updateRemoveButtons();
+
+  // Add hint
+  const hint = document.createElement("p");
+  hint.className = "text-xs text-gray-500 mt-1";
+  hint.textContent = makeFieldHint(element);
+  wrapper.appendChild(hint);
+}
+
 function renderSelectElement(element, ctx, wrapper, pathKey) {
   const selectInput = document.createElement("select");
   selectInput.className =
@@ -1250,6 +1922,127 @@ function renderSelectElement(element, ctx, wrapper, pathKey) {
   wrapper.appendChild(selectHint);
 }
 
+function renderMultipleSelectElement(element, ctx, wrapper, pathKey) {
+  const prefillValues = ctx.prefill[element.key] || [];
+  const values = Array.isArray(prefillValues) ? [...prefillValues] : [];
+
+  // Ensure minimum count
+  const minCount = element.minCount ?? 1;
+  const maxCount = element.maxCount ?? 10;
+
+  while (values.length < minCount) {
+    values.push(element.default || (element.options?.[0]?.value || ""));
+  }
+
+  const container = document.createElement("div");
+  container.className = "space-y-2";
+  wrapper.appendChild(container);
+
+  function updateIndices() {
+    const items = container.querySelectorAll(".multiple-select-item");
+    items.forEach((item, index) => {
+      const select = item.querySelector("select");
+      if (select) {
+        select.name = `${pathKey}[${index}]`;
+      }
+    });
+  }
+
+  function addSelectItem(value = "", index = -1) {
+    const itemWrapper = document.createElement("div");
+    itemWrapper.className = "multiple-select-item flex items-center gap-2";
+
+    const selectInput = document.createElement("select");
+    selectInput.className = "flex-1 px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500";
+    selectInput.disabled = state.config.readonly;
+
+    // Add options
+    (element.options || []).forEach((option) => {
+      const optionElement = document.createElement("option");
+      optionElement.value = option.value;
+      optionElement.textContent = option.label;
+      if (value === option.value) {
+        optionElement.selected = true;
+      }
+      selectInput.appendChild(optionElement);
+    });
+
+    itemWrapper.appendChild(selectInput);
+
+    // Remove buttons are managed centrally via updateRemoveButtons()
+
+    if (index === -1) {
+      container.appendChild(itemWrapper);
+    } else {
+      container.insertBefore(itemWrapper, container.children[index]);
+    }
+
+    updateIndices();
+    return itemWrapper;
+  }
+
+  function updateRemoveButtons() {
+    if (state.config.readonly) return;
+    const items = container.querySelectorAll('.multiple-select-item');
+    const currentCount = items.length;
+    items.forEach((item) => {
+      let removeBtn = item.querySelector('.remove-item-btn');
+      if (!removeBtn) {
+        removeBtn = document.createElement('button');
+        removeBtn.type = 'button';
+        removeBtn.className = 'remove-item-btn px-2 py-1 text-red-600 hover:bg-red-50 rounded';
+        removeBtn.innerHTML = '✕';
+        removeBtn.onclick = () => {
+          const currentIndex = Array.from(container.children).indexOf(item);
+          if (container.children.length > minCount) {
+            values.splice(currentIndex, 1);
+            item.remove();
+            updateIndices();
+            updateAddButton();
+            updateRemoveButtons();
+          }
+        };
+        item.appendChild(removeBtn);
+      }
+      const disabled = currentCount <= minCount;
+      removeBtn.disabled = disabled;
+      removeBtn.style.opacity = disabled ? '0.5' : '1';
+      removeBtn.style.pointerEvents = disabled ? 'none' : 'auto';
+    });
+  }
+
+  function updateAddButton() {
+    const existingAddBtn = wrapper.querySelector(".add-select-btn");
+    if (existingAddBtn) existingAddBtn.remove();
+
+    if (!state.config.readonly && values.length < maxCount) {
+      const addBtn = document.createElement("button");
+      addBtn.type = "button";
+      addBtn.className = "add-select-btn mt-2 px-3 py-1 text-blue-600 border border-blue-300 rounded hover:bg-blue-50 text-sm";
+      addBtn.textContent = `+ Add ${element.label || 'Selection'}`;
+      addBtn.onclick = () => {
+        const defaultValue = element.default || (element.options?.[0]?.value || "");
+        values.push(defaultValue);
+        addSelectItem(defaultValue);
+        updateAddButton();
+        updateRemoveButtons();
+      };
+      wrapper.appendChild(addBtn);
+    }
+  }
+
+  // Render initial items
+  values.forEach(value => addSelectItem(value));
+  updateAddButton();
+  updateRemoveButtons();
+
+  // Add hint
+  const hint = document.createElement("p");
+  hint.className = "text-xs text-gray-500 mt-1";
+  hint.textContent = makeFieldHint(element);
+  wrapper.appendChild(hint);
+}
+
 function renderFileElement(element, ctx, wrapper, pathKey) {
   if (state.config.readonly) {
     // Readonly mode: use common preview function
@@ -1468,6 +2261,93 @@ function renderFilesElement(element, ctx, wrapper, pathKey) {
   }
 }
 
+function renderMultipleFileElement(element, ctx, wrapper, pathKey) {
+  // Use the same logic as renderFilesElement but with minCount/maxCount from element properties
+  const minFiles = element.minCount ?? 0;
+  const maxFiles = element.maxCount ?? Infinity;
+
+  if (state.config.readonly) {
+    // Readonly mode: render as results list
+    const resultsWrapper = document.createElement("div");
+    resultsWrapper.className = "space-y-4";
+
+    const initialFiles = ctx.prefill[element.key] || [];
+
+    if (initialFiles.length > 0) {
+      initialFiles.forEach((resourceId) => {
+        const filePreview = renderFilePreviewReadonly(resourceId);
+        resultsWrapper.appendChild(filePreview);
+      });
+    } else {
+      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: multiple file input with min/max validation
+    const filesWrapper = document.createElement("div");
+    filesWrapper.className = "space-y-2";
+
+    const filesPicker = document.createElement("input");
+    filesPicker.type = "file";
+    filesPicker.name = pathKey;
+    filesPicker.multiple = true;
+    filesPicker.style.display = "none"; // Hide default input
+    if (element.accept?.extensions) {
+      filesPicker.accept = element.accept.extensions
+        .map((ext) => `.${ext}`)
+        .join(",");
+    }
+
+    const filesContainer = document.createElement("div");
+    filesContainer.className = "files-list space-y-2";
+
+    filesWrapper.appendChild(filesPicker);
+    filesWrapper.appendChild(filesContainer);
+
+    const initialFiles = Array.isArray(ctx.prefill[element.key])
+      ? [...ctx.prefill[element.key]]
+      : [];
+
+    // Add initial files to resource index
+    addPrefillFilesToIndex(initialFiles);
+
+    const updateFilesDisplay = () => {
+      renderResourcePills(filesContainer, initialFiles, (index) => {
+        initialFiles.splice(index, 1);
+        updateFilesDisplay();
+      });
+
+      // Show count and min/max info
+      const countInfo = document.createElement("div");
+      countInfo.className = "text-xs text-gray-500 mt-2";
+      const countText = `${initialFiles.length} file${initialFiles.length !== 1 ? 's' : ''}`;
+      const minMaxText = minFiles > 0 || maxFiles < Infinity
+        ? ` (${minFiles}-${maxFiles} allowed)`
+        : '';
+      countInfo.textContent = countText + minMaxText;
+
+      // Remove previous count info
+      const existingCount = filesWrapper.querySelector('.file-count-info');
+      if (existingCount) existingCount.remove();
+
+      countInfo.className += ' file-count-info';
+      filesWrapper.appendChild(countInfo);
+    };
+
+    // Set up drag and drop
+    setupFilesDropHandler(filesContainer, initialFiles, updateFilesDisplay);
+
+    // Set up file picker
+    setupFilesPickerHandler(filesPicker, initialFiles, updateFilesDisplay);
+
+    // Initial display
+    updateFilesDisplay();
+
+    wrapper.appendChild(filesWrapper);
+  }
+}
+
 function addPrefillFilesToIndex(initialFiles) {
   if (initialFiles.length > 0) {
     initialFiles.forEach((resourceId) => {
@@ -1591,13 +2471,20 @@ function renderRepeatableGroup(element, ctx, itemsWrap, left, groupWrap) {
     const item = document.createElement("div");
     item.className =
       "groupItem border border-dashed border-slate-300 dark:border-slate-600 rounded-lg p-3 mb-3 bg-blue-50/30 dark:bg-blue-900/10";
+    const itemIndex = countItems();
+    const fullPath = pathJoin(ctx.path, `${element.key}[${itemIndex}]`);
+    // Add data-group-item attribute for validation scoping - use full path
+    item.setAttribute("data-group-item", fullPath);
     const subCtx = {
-      path: pathJoin(ctx.path, `${element.key}[${countItems()}]`),
+      path: fullPath,
       prefill: prefillObj || {},
     };
-    element.elements.forEach((child) =>
-      item.appendChild(renderElement(child, subCtx)),
-    );
+    element.elements.forEach((child) => {
+      // Skip rendering hidden child elements
+      if (!child.hidden) {
+        item.appendChild(renderElement(child, subCtx));
+      }
+    });
 
     // Only add remove button in edit mode
     if (!state.config.readonly) {
@@ -1661,13 +2548,224 @@ function renderSingleGroup(element, ctx, itemsWrap, left, groupWrap) {
     path: pathJoin(ctx.path, element.key),
     prefill: ctx.prefill?.[element.key] || {},
   };
-  element.elements.forEach((child) =>
-    itemsWrap.appendChild(renderElement(child, subCtx)),
-  );
+  element.elements.forEach((child) => {
+    // Skip rendering hidden child elements
+    if (!child.hidden) {
+      itemsWrap.appendChild(renderElement(child, subCtx));
+    }
+  });
   groupWrap.appendChild(itemsWrap);
   left.innerHTML = `<span>${element.label || element.key}</span>`;
 }
 
+function renderSingleContainerElement(element, ctx, wrapper, pathKey) {
+  // Same as renderSingleGroup but with updated naming
+  const containerWrap = document.createElement("div");
+  containerWrap.className = "border border-gray-200 rounded-lg p-4 bg-gray-50";
+  containerWrap.setAttribute("data-container", pathKey);
+
+  const header = document.createElement("div");
+  header.className = "flex justify-between items-center mb-4";
+
+  const left = document.createElement("div");
+  left.className = "flex-1";
+
+  const itemsWrap = document.createElement("div");
+  itemsWrap.className = "space-y-4";
+
+  containerWrap.appendChild(header);
+  header.appendChild(left);
+
+  // Single object container
+  const subCtx = {
+    path: pathJoin(ctx.path, element.key),
+    prefill: ctx.prefill?.[element.key] || {},
+  };
+  element.elements.forEach((child) => {
+    // Skip rendering hidden child elements
+    if (!child.hidden) {
+      itemsWrap.appendChild(renderElement(child, subCtx));
+    }
+  });
+  containerWrap.appendChild(itemsWrap);
+  left.innerHTML = `<span>${element.label || element.key}</span>`;
+
+  wrapper.appendChild(containerWrap);
+}
+
+function renderMultipleContainerElement(element, ctx, wrapper, _pathKey) {
+  // Same as renderRepeatableGroup but with minCount/maxCount from element properties
+  const containerWrap = document.createElement("div");
+  containerWrap.className = "border border-gray-200 rounded-lg p-4 bg-gray-50";
+
+  const header = document.createElement("div");
+  header.className = "flex justify-between items-center mb-4";
+
+  const left = document.createElement("div");
+  left.className = "flex-1";
+
+  const right = document.createElement("div");
+  right.className = "flex gap-2";
+
+  const itemsWrap = document.createElement("div");
+  itemsWrap.className = "space-y-4";
+
+  containerWrap.appendChild(header);
+  header.appendChild(left);
+  if (!state.config.readonly) {
+    header.appendChild(right);
+  }
+
+  const min = element.minCount ?? 0;
+  const max = element.maxCount ?? Infinity;
+  const pre = Array.isArray(ctx.prefill?.[element.key])
+    ? ctx.prefill[element.key]
+    : null;
+
+  const countItems = () =>
+    itemsWrap.querySelectorAll(":scope > .containerItem").length;
+
+  const createAddButton = () => {
+    const add = document.createElement("button");
+    add.type = "button";
+    add.className =
+      "px-3 py-1.5 bg-blue-600 text-white text-sm rounded-lg hover:bg-blue-700 transition-colors";
+    add.textContent = t("addElement");
+    add.onclick = () => {
+      if (countItems() < max) {
+        const idx = countItems();
+        const subCtx = {
+          path: pathJoin(ctx.path, `${element.key}[${idx}]`),
+          prefill: {},
+        };
+        const item = document.createElement("div");
+        item.className = "containerItem border border-gray-300 rounded-lg p-4 bg-white";
+        item.setAttribute("data-container-item", `${element.key}[${idx}]`);
+
+        element.elements.forEach((child) => {
+          // Skip rendering hidden child elements
+          if (!child.hidden) {
+            item.appendChild(renderElement(child, subCtx));
+          }
+        });
+
+        // Only add remove button in edit mode
+        if (!state.config.readonly) {
+          const rem = document.createElement("button");
+          rem.type = "button";
+          rem.className =
+            "absolute top-2 right-2 w-6 h-6 bg-red-500 text-white rounded-full text-xs hover:bg-red-600 transition-colors";
+          rem.textContent = "×";
+          rem.onclick = () => {
+            item.remove();
+            updateAddButton();
+          };
+          item.style.position = "relative";
+          item.appendChild(rem);
+        }
+
+        itemsWrap.appendChild(item);
+        updateAddButton();
+      }
+    };
+    return add;
+  };
+
+  const updateAddButton = () => {
+    const currentCount = countItems();
+    const addBtn = right.querySelector("button");
+    if (addBtn) {
+      addBtn.disabled = currentCount >= max;
+      addBtn.style.opacity = currentCount >= max ? "0.5" : "1";
+    }
+    left.innerHTML = `<span>${element.label || element.key}</span> <span class="text-sm text-gray-500">(${currentCount}/${max === Infinity ? '∞' : max})</span>`;
+  };
+
+  if (!state.config.readonly) {
+    right.appendChild(createAddButton());
+  }
+
+  // Pre-fill initial items
+  if (pre && Array.isArray(pre)) {
+    pre.forEach((prefillObj, idx) => {
+      const subCtx = {
+        path: pathJoin(ctx.path, `${element.key}[${idx}]`),
+        prefill: prefillObj || {},
+      };
+      const item = document.createElement("div");
+      item.className = "containerItem border border-gray-300 rounded-lg p-4 bg-white";
+      item.setAttribute("data-container-item", `${element.key}[${idx}]`);
+
+      element.elements.forEach((child) => {
+        // Skip rendering hidden child elements
+        if (!child.hidden) {
+          item.appendChild(renderElement(child, subCtx));
+        }
+      });
+
+      // Only add remove button in edit mode
+      if (!state.config.readonly) {
+        const rem = document.createElement("button");
+        rem.type = "button";
+        rem.className =
+          "absolute top-2 right-2 w-6 h-6 bg-red-500 text-white rounded-full text-xs hover:bg-red-600 transition-colors";
+        rem.textContent = "×";
+        rem.onclick = () => {
+          item.remove();
+          updateAddButton();
+        };
+        item.style.position = "relative";
+        item.appendChild(rem);
+      }
+
+      itemsWrap.appendChild(item);
+    });
+  }
+
+  // Ensure minimum items
+  if (!state.config.readonly) {
+    while (countItems() < min) {
+      const idx = countItems();
+      const subCtx = {
+        path: pathJoin(ctx.path, `${element.key}[${idx}]`),
+        prefill: {},
+      };
+      const item = document.createElement("div");
+      item.className = "containerItem border border-gray-300 rounded-lg p-4 bg-white";
+      item.setAttribute("data-container-item", `${element.key}[${idx}]`);
+
+      element.elements.forEach((child) => {
+        // Skip rendering hidden child elements
+        if (!child.hidden) {
+          item.appendChild(renderElement(child, subCtx));
+        }
+      });
+
+      // Remove button - but disabled if we're at minimum
+      const rem = document.createElement("button");
+      rem.type = "button";
+      rem.className =
+        "absolute top-2 right-2 w-6 h-6 bg-red-500 text-white rounded-full text-xs hover:bg-red-600 transition-colors";
+      rem.textContent = "×";
+      rem.onclick = () => {
+        if (countItems() > min) {
+          item.remove();
+          updateAddButton();
+        }
+      };
+      item.style.position = "relative";
+      item.appendChild(rem);
+
+      itemsWrap.appendChild(item);
+    }
+  }
+
+  containerWrap.appendChild(itemsWrap);
+  updateAddButton();
+
+  wrapper.appendChild(containerWrap);
+}
+
 // Common file preview rendering function for readonly mode
 function renderFilePreviewReadonly(resourceId, fileName) {
   const meta = state.resourceIndex.get(resourceId);