@dmitryvim/form-builder 0.1.35 → 0.1.38

package/dist/form-builder.js

@@ -4,6 +4,7 @@ const state = {
   schema: null,
   formRoot: null,
   resourceIndex: new Map(),
+  externalActions: null, // Store external actions for the current form
   version: "1.0.0",
   config: {
     // File upload configuration
@@ -129,7 +130,7 @@ function validateSchema(schema) {
 }
 
 // Form rendering
-function renderForm(schema, prefill) {
+function renderForm(schema, prefill, actions) {
   const errors = validateSchema(schema);
   if (errors.length > 0) {
     console.error("Schema validation errors:", errors);
@@ -137,6 +138,8 @@ function renderForm(schema, prefill) {
   }
 
   state.schema = schema;
+  state.externalActions = actions || null;
+
   if (!state.formRoot) {
     console.error("No form root element set. Call setFormRoot() first.");
     return;
@@ -160,11 +163,20 @@ function renderForm(schema, prefill) {
   });
 
   state.formRoot.appendChild(formEl);
+
+  // Render external actions after form is built (only in readonly mode)
+  if (
+    state.config.readonly &&
+    state.externalActions &&
+    Array.isArray(state.externalActions)
+  ) {
+    renderExternalActions();
+  }
 }
 
 function renderElement(element, ctx) {
   const wrapper = document.createElement("div");
-  wrapper.className = "mb-6";
+  wrapper.className = "mb-6 fb-field-wrapper";
 
   const label = document.createElement("div");
   label.className = "flex items-center mb-2";
@@ -278,42 +290,8 @@ function renderElement(element, ctx) {
     }
   }
 
-  // Add action buttons in readonly mode
-  if (
-    state.config.readonly &&
-    element.actions &&
-    Array.isArray(element.actions) &&
-    element.actions.length > 0
-  ) {
-    const actionsContainer = document.createElement("div");
-    actionsContainer.className = "mt-3 flex flex-wrap gap-2";
-
-    element.actions.forEach((action) => {
-      if (action.value && action.label) {
-        const actionBtn = document.createElement("button");
-        actionBtn.type = "button";
-        actionBtn.className =
-          "px-3 py-1.5 text-sm bg-blue-50 border border-blue-200 text-blue-700 rounded-lg hover:bg-blue-100 transition-colors";
-        actionBtn.textContent = action.label;
-
-        actionBtn.addEventListener("click", (e) => {
-          e.preventDefault();
-          e.stopPropagation();
-
-          if (
-            state.config.actionHandler &&
-            typeof state.config.actionHandler === "function"
-          ) {
-            state.config.actionHandler(action.value);
-          }
-        });
-
-        actionsContainer.appendChild(actionBtn);
-      }
-    });
-
-    wrapper.appendChild(actionsContainer);
-  }
+  // Actions are now only rendered via external actions system in renderExternalActions()
+  // element.actions are only used for label lookup, not direct rendering
 
   return wrapper;
 }
@@ -577,6 +555,23 @@ async function renderFilePreview(container, resourceId, options = {}) {
   }
 }
 
+function renderThumbnailForResource(slot, rid, meta) {
+  const url = state.config.getThumbnail(rid);
+  if (url) {
+    const img = document.createElement("img");
+    img.className = "w-full h-full object-contain";
+    img.alt = meta.name;
+    img.src = url;
+    slot.appendChild(img);
+  } else {
+    slot.innerHTML = `<div class="flex flex-col items-center justify-center h-full text-gray-400">
+                            <svg class="w-12 h-12" fill="currentColor" viewBox="0 0 24 24">
+                                <path d="M21 19V5c0-1.1-.9-2-2-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2zM8.5 13.5l2.5 3.01L14.5 12l4.5 6H5l3.5-4.5z"/>
+                            </svg>
+                        </div>`;
+  }
+}
+
 function renderResourcePills(container, rids, onRemove) {
   clear(container);
 
@@ -616,11 +611,11 @@ function renderResourcePills(container, rids, onRemove) {
       slot.onclick = () => {
         // Look for file input - check parent containers that have space-y-2 class
         let filesWrapper = container.parentElement;
-        while (filesWrapper && !filesWrapper.classList.contains('space-y-2')) {
+        while (filesWrapper && !filesWrapper.classList.contains("space-y-2")) {
           filesWrapper = filesWrapper.parentElement;
         }
         // If no parent with space-y-2, container itself might be the wrapper
-        if (!filesWrapper && container.classList.contains('space-y-2')) {
+        if (!filesWrapper && container.classList.contains("space-y-2")) {
           filesWrapper = container;
         }
         const fileInput = filesWrapper?.querySelector('input[type="file"]');
@@ -641,11 +636,11 @@ function renderResourcePills(container, rids, onRemove) {
       e.stopPropagation();
       // Look for file input - check parent containers that have space-y-2 class
       let filesWrapper = container.parentElement;
-      while (filesWrapper && !filesWrapper.classList.contains('space-y-2')) {
+      while (filesWrapper && !filesWrapper.classList.contains("space-y-2")) {
         filesWrapper = filesWrapper.parentElement;
       }
       // If no parent with space-y-2, container itself might be the wrapper
-      if (!filesWrapper && container.classList.contains('space-y-2')) {
+      if (!filesWrapper && container.classList.contains("space-y-2")) {
         filesWrapper = container;
       }
       const fileInput = filesWrapper?.querySelector('input[type="file"]');
@@ -701,21 +696,7 @@ function renderResourcePills(container, rids, onRemove) {
           slot.appendChild(img);
         } else if (state.config.getThumbnail) {
           // Use getThumbnail for uploaded files
-          const img = document.createElement("img");
-          img.className = "w-full h-full object-contain";
-          img.alt = meta.name;
-
-          const url = state.config.getThumbnail(rid);
-          if (url) {
-            img.src = url;
-            slot.appendChild(img);
-          } else {
-            slot.innerHTML = `<div class="flex flex-col items-center justify-center h-full text-gray-400">
-                            <svg class="w-12 h-12" fill="currentColor" viewBox="0 0 24 24">
-                                <path d="M21 19V5c0-1.1-.9-2-2-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2zM8.5 13.5l2.5 3.01L14.5 12l4.5 6H5l3.5-4.5z"/>
-                            </svg>
-                        </div>`;
-          }
+          renderThumbnailForResource(slot, rid, meta);
         } else {
           slot.innerHTML = `<div class="flex flex-col items-center justify-center h-full text-gray-400">
                         <svg class="w-12 h-12" fill="currentColor" viewBox="0 0 24 24">
@@ -808,11 +789,11 @@ function renderResourcePills(container, rids, onRemove) {
       slot.onclick = () => {
         // Look for file input - check parent containers that have space-y-2 class
         let filesWrapper = container.parentElement;
-        while (filesWrapper && !filesWrapper.classList.contains('space-y-2')) {
+        while (filesWrapper && !filesWrapper.classList.contains("space-y-2")) {
           filesWrapper = filesWrapper.parentElement;
         }
         // If no parent with space-y-2, container itself might be the wrapper
-        if (!filesWrapper && container.classList.contains('space-y-2')) {
+        if (!filesWrapper && container.classList.contains("space-y-2")) {
           filesWrapper = container;
         }
         const fileInput = filesWrapper?.querySelector('input[type="file"]');
@@ -927,6 +908,280 @@ function addDeleteButton(container, onDelete) {
   container.appendChild(overlay);
 }
 
+// JSON path resolution for external actions (currently unused but kept for future use)
+// eslint-disable-next-line no-unused-vars
+function resolveFieldPath(path, formData) {
+  // Remove leading $input_data. prefix if present
+  const cleanPath = path.replace(/^\$input_data\./, "");
+
+  // Split path into segments, handling array notation
+  const segments = cleanPath.split(/[.[\]]/).filter(Boolean);
+
+  // Try to find the corresponding form element
+  return findElementByPath(segments, formData);
+}
+
+function findElementByPath(segments, data, currentPath = "") {
+  if (segments.length === 0) return currentPath;
+
+  const [head, ...tail] = segments;
+
+  // Check if this is an array index
+  const isArrayIndex = /^\d+$/.test(head);
+
+  if (isArrayIndex) {
+    // Array index case: build path like "fieldName[index]"
+    const newPath = currentPath ? `${currentPath}[${head}]` : `[${head}]`;
+    return findElementByPath(tail, data, newPath);
+  } else {
+    // Regular field name
+    const newPath = currentPath ? `${currentPath}.${head}` : head;
+    return findElementByPath(tail, data, newPath);
+  }
+}
+
+function findFormElementByFieldPath(fieldPath) {
+  // Try to find the form element that corresponds to the field path
+  // This looks for elements with name attributes that match the path pattern
+
+  if (!state.formRoot) return null;
+
+  // In edit mode, try to find input elements with name attributes
+  if (!state.config.readonly) {
+    // Try exact match first
+    let element = state.formRoot.querySelector(`[name="${fieldPath}"]`);
+    if (element) return element;
+
+    // Try with array notation variations
+    const variations = [
+      fieldPath,
+      fieldPath.replace(/\[(\d+)\]/g, "[$1]"), // normalize array notation
+      fieldPath.replace(/\./g, "[") +
+        "]".repeat((fieldPath.match(/\./g) || []).length), // convert dots to brackets
+    ];
+
+    for (const variation of variations) {
+      element = state.formRoot.querySelector(`[name="${variation}"]`);
+      if (element) return element;
+    }
+  }
+
+  // In readonly mode, or if no input found, look for field wrappers using data attributes
+  // Find the schema element for this field path to match against rendered fields
+  const schemaElement = findSchemaElement(fieldPath);
+  if (!schemaElement) return null;
+
+  // Look for field wrappers that contain the field key
+  const fieldWrappers = state.formRoot.querySelectorAll('.fb-field-wrapper');
+  for (const wrapper of fieldWrappers) {
+    // Try to find a label or element that matches this field
+    const labelText = schemaElement.label || schemaElement.key;
+    const labelElement = wrapper.querySelector('label');
+    if (labelElement && (labelElement.textContent === labelText || labelElement.textContent === `${labelText}*`)) {
+      // Create a dummy element for the field so actions can attach
+      let fieldElement = wrapper.querySelector('.field-placeholder');
+      if (!fieldElement) {
+        fieldElement = document.createElement('div');
+        fieldElement.className = 'field-placeholder';
+        fieldElement.style.display = 'none';
+        wrapper.appendChild(fieldElement);
+      }
+      return fieldElement;
+    }
+  }
+
+  return null;
+}
+
+function renderExternalActions() {
+  if (!state.externalActions || !Array.isArray(state.externalActions)) return;
+
+  // Group actions by related_field (null for form-level actions)
+  const actionsByField = new Map();
+  const formLevelActions = [];
+
+  state.externalActions.forEach((action) => {
+    if (!action.key || !action.value) return;
+
+    if (!action.related_field) {
+      // Form-level action
+      formLevelActions.push(action);
+    } else {
+      // Field-level action
+      if (!actionsByField.has(action.related_field)) {
+        actionsByField.set(action.related_field, []);
+      }
+      actionsByField.get(action.related_field).push(action);
+    }
+  });
+
+  // Render field-level actions
+  actionsByField.forEach((actions, fieldPath) => {
+    // Find the form element for this related field
+    const fieldElement = findFormElementByFieldPath(fieldPath);
+    if (!fieldElement) {
+      console.warn(
+        `External action: Could not find form element for field "${fieldPath}"`,
+      );
+      return;
+    }
+
+    // Find the wrapper element that contains the field using stable class
+    let wrapper = fieldElement.closest(".fb-field-wrapper");
+    if (!wrapper) {
+      wrapper = fieldElement.parentElement;
+    }
+
+    if (!wrapper) {
+      console.warn(
+        `External action: Could not find wrapper for field "${fieldPath}"`,
+      );
+      return;
+    }
+
+    // Remove any existing actions container
+    const existingContainer = wrapper.querySelector(".external-actions-container");
+    if (existingContainer) {
+      existingContainer.remove();
+    }
+
+    // Create actions container
+    const actionsContainer = document.createElement("div");
+    actionsContainer.className =
+      "external-actions-container mt-3 flex flex-wrap gap-2";
+
+    // Find the corresponding schema element for label lookup
+    const schemaElement = findSchemaElement(fieldPath);
+
+    // Create action buttons
+    actions.forEach((action) => {
+      const actionBtn = document.createElement("button");
+      actionBtn.type = "button";
+      actionBtn.className =
+        "bg-white text-gray-700 border border-gray-200 px-3 py-2 text-sm rounded-lg hover:bg-gray-50 hover:border-gray-300 transition-all duration-200 shadow-sm";
+
+      // Resolve action label with priority:
+      // 1. Use explicit label from action if provided
+      // 2. Try to find label from schema element labels using key
+      // 3. Fall back to using key as label
+      const resolvedLabel = resolveActionLabel(action.key, action.label, schemaElement);
+      actionBtn.textContent = resolvedLabel;
+
+      actionBtn.addEventListener("click", (e) => {
+        e.preventDefault();
+        e.stopPropagation();
+
+        if (
+          state.config.actionHandler &&
+          typeof state.config.actionHandler === "function"
+        ) {
+          // Call with value, key, and related_field for the new actions system
+          state.config.actionHandler(action.value, action.key, action.related_field);
+        }
+      });
+
+      actionsContainer.appendChild(actionBtn);
+    });
+
+    wrapper.appendChild(actionsContainer);
+  });
+
+  // Render form-level actions at the bottom of the form
+  if (formLevelActions.length > 0) {
+    renderFormLevelActions(formLevelActions);
+  }
+}
+
+function renderFormLevelActions(actions) {
+  if (!state.formRoot) return;
+
+  // Remove any existing form-level actions container
+  const existingContainer = state.formRoot.querySelector(".form-level-actions-container");
+  if (existingContainer) {
+    existingContainer.remove();
+  }
+
+  // Create form-level actions container
+  const actionsContainer = document.createElement("div");
+  actionsContainer.className =
+    "form-level-actions-container mt-6 pt-4 border-t border-gray-200 flex flex-wrap gap-3 justify-center";
+
+  // Create action buttons
+  actions.forEach((action) => {
+    const actionBtn = document.createElement("button");
+    actionBtn.type = "button";
+    actionBtn.className =
+      "bg-white text-gray-700 border border-gray-200 px-4 py-2 text-sm font-medium rounded-lg hover:bg-gray-50 hover:border-gray-300 transition-all duration-200 shadow-sm";
+
+    // Resolve action label with priority:
+    // 1. Use explicit label from action if provided
+    // 2. Try to find label from schema element labels using key
+    // 3. Fall back to using key as label
+    const resolvedLabel = resolveActionLabel(action.key, action.label, null);
+    actionBtn.textContent = resolvedLabel;
+
+    actionBtn.addEventListener("click", (e) => {
+      e.preventDefault();
+      e.stopPropagation();
+
+      if (
+        state.config.actionHandler &&
+        typeof state.config.actionHandler === "function"
+      ) {
+        // Call with value, key, and null related_field for form-level actions
+        state.config.actionHandler(action.value, action.key, null);
+      }
+    });
+
+    actionsContainer.appendChild(actionBtn);
+  });
+
+  // Append to form root
+  state.formRoot.appendChild(actionsContainer);
+}
+
+// Helper function to resolve action label
+function resolveActionLabel(actionKey, externalLabel, schemaElement) {
+  // 1. Try to find label from predefined actions in schema using key (highest priority)
+  if (schemaElement && schemaElement.actions && Array.isArray(schemaElement.actions)) {
+    const predefinedAction = schemaElement.actions.find(a => a.key === actionKey);
+    if (predefinedAction && predefinedAction.label) {
+      return predefinedAction.label;
+    }
+  }
+
+  // 2. Use explicit label from external action if provided
+  if (externalLabel) {
+    return externalLabel;
+  }
+
+  // 3. Fall back to using key as label
+  return actionKey;
+}
+
+// Helper function to find schema element by field path
+function findSchemaElement(fieldPath) {
+  if (!state.schema || !state.schema.elements) return null;
+
+  let currentElements = state.schema.elements;
+  let foundElement = null;
+
+  // Handle paths like 'a.b' or 'a[0].b' by looking for keys in sequence
+  const keys = fieldPath.replace(/\[\d+\]/g, '').split('.').filter(Boolean);
+
+  for (const key of keys) {
+    foundElement = currentElements.find(el => el.key === key);
+    if (!foundElement) {
+      return null; // Key not found at this level
+    }
+    if (foundElement.elements) {
+      currentElements = foundElement.elements;
+    }
+  }
+
+  return foundElement;
+}
+
 function showTooltip(tooltipId, button) {
   const tooltip = document.getElementById(tooltipId);
   const isCurrentlyVisible = !tooltip.classList.contains("hidden");
@@ -1044,11 +1299,17 @@ function validateForm(skipValidation = false) {
             values.push(val);
 
             if (!skipValidation && val) {
-              if (element.minLength !== null && val.length < element.minLength) {
+              if (
+                element.minLength !== null &&
+                val.length < element.minLength
+              ) {
                 errors.push(`${key}[${index}]: minLength=${element.minLength}`);
                 markValidity(input, `minLength=${element.minLength}`);
               }
-              if (element.maxLength !== null && val.length > element.maxLength) {
+              if (
+                element.maxLength !== null &&
+                val.length > element.maxLength
+              ) {
                 errors.push(`${key}[${index}]: maxLength=${element.maxLength}`);
                 markValidity(input, `maxLength=${element.maxLength}`);
               }
@@ -1073,7 +1334,7 @@ function validateForm(skipValidation = false) {
           if (!skipValidation) {
             const minCount = element.minCount ?? 1;
             const maxCount = element.maxCount ?? 10;
-            const nonEmptyValues = values.filter(v => v.trim() !== "");
+            const nonEmptyValues = values.filter((v) => v.trim() !== "");
 
             if (element.required && nonEmptyValues.length === 0) {
               errors.push(`${key}: required`);
@@ -1156,7 +1417,9 @@ function validateForm(skipValidation = false) {
               markValidity(input, `> max=${element.max}`);
             }
 
-            const d = Number.isInteger(element.decimals ?? 0) ? element.decimals : 0;
+            const d = Number.isInteger(element.decimals ?? 0)
+              ? element.decimals
+              : 0;
             markValidity(input, null);
             values.push(Number(v.toFixed(d)));
           });
@@ -1165,7 +1428,7 @@ function validateForm(skipValidation = false) {
           if (!skipValidation) {
             const minCount = element.minCount ?? 1;
             const maxCount = element.maxCount ?? 10;
-            const nonNullValues = values.filter(v => v !== null);
+            const nonNullValues = values.filter((v) => v !== null);
 
             if (element.required && nonNullValues.length === 0) {
               errors.push(`${key}: required`);
@@ -1229,7 +1492,7 @@ function validateForm(skipValidation = false) {
           if (!skipValidation) {
             const minCount = element.minCount ?? 1;
             const maxCount = element.maxCount ?? 10;
-            const nonEmptyValues = values.filter(v => v !== "");
+            const nonEmptyValues = values.filter((v) => v !== "");
 
             if (element.required && nonEmptyValues.length === 0) {
               errors.push(`${key}: required`);
@@ -1261,9 +1524,11 @@ function validateForm(skipValidation = false) {
           // Handle file with multiple property like files type
           // Find the files list by locating the specific file input for this field
           const fullKey = pathJoin(ctx.path, key);
-          const pickerInput = scopeRoot.querySelector(`input[type="file"][name="${fullKey}"]`);
-          const filesWrapper = pickerInput?.closest('.space-y-2');
-          const container = filesWrapper?.querySelector('.files-list') || null;
+          const pickerInput = scopeRoot.querySelector(
+            `input[type="file"][name="${fullKey}"]`,
+          );
+          const filesWrapper = pickerInput?.closest(".space-y-2");
+          const container = filesWrapper?.querySelector(".files-list") || null;
 
           const resourceIds = [];
           if (container) {
@@ -1351,12 +1616,18 @@ function validateForm(skipValidation = false) {
           const items = [];
           // Use full path for nested group element search
           const fullKey = pathJoin(ctx.path, key);
-          const itemElements = scopeRoot.querySelectorAll(`[name^="${fullKey}["]`);
+          const itemElements = scopeRoot.querySelectorAll(
+            `[name^="${fullKey}["]`,
+          );
 
           // Extract actual indices from DOM element names instead of assuming sequential numbering
           const actualIndices = new Set();
           itemElements.forEach((el) => {
-            const match = el.name.match(new RegExp(`^${fullKey.replace(/[.*+?^${}()|[\]\\]/g, '\\$&')}\\[(\\d+)\\]`));
+            const match = el.name.match(
+              new RegExp(
+                `^${fullKey.replace(/[.*+?^${}()|[\]\\]/g, "\\$&")}\\[(\\d+)\\]`,
+              ),
+            );
             if (match) {
               actualIndices.add(parseInt(match[1]));
             }
@@ -1374,7 +1645,8 @@ function validateForm(skipValidation = false) {
             element.elements.forEach((child) => {
               if (child.hidden) {
                 // For hidden child elements, use their default value
-                itemData[child.key] = child.default !== undefined ? child.default : "";
+                itemData[child.key] =
+                  child.default !== undefined ? child.default : "";
               } else {
                 const childKey = `${fullKey}[${actualIndex}].${child.key}`;
                 itemData[child.key] = validateElement(
@@ -1395,7 +1667,8 @@ function validateForm(skipValidation = false) {
           element.elements.forEach((child) => {
             if (child.hidden) {
               // For hidden child elements, use their default value
-              groupData[child.key] = child.default !== undefined ? child.default : "";
+              groupData[child.key] =
+                child.default !== undefined ? child.default : "";
             } else {
               const childKey = `${key}.${child.key}`;
               groupData[child.key] = validateElement(
@@ -1427,7 +1700,8 @@ function validateForm(skipValidation = false) {
             element.elements.forEach((child) => {
               if (child.hidden) {
                 // For hidden child elements, use their default value
-                itemData[child.key] = child.default !== undefined ? child.default : "";
+                itemData[child.key] =
+                  child.default !== undefined ? child.default : "";
               } else {
                 const childKey = `${key}[${i}].${child.key}`;
                 itemData[child.key] = validateElement(
@@ -1465,7 +1739,8 @@ function validateForm(skipValidation = false) {
           element.elements.forEach((child) => {
             if (child.hidden) {
               // For hidden child elements, use their default value
-              containerData[child.key] = child.default !== undefined ? child.default : "";
+              containerData[child.key] =
+                child.default !== undefined ? child.default : "";
             } else {
               const childKey = `${key}.${child.key}`;
               containerData[child.key] = validateElement(
@@ -1550,7 +1825,8 @@ function renderMultipleTextElement(element, ctx, wrapper, pathKey) {
 
     const textInput = document.createElement("input");
     textInput.type = "text";
-    textInput.className = "flex-1 px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500";
+    textInput.className =
+      "flex-1 px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500";
     textInput.placeholder = element.placeholder || "Enter text";
     textInput.value = value;
     textInput.readOnly = state.config.readonly;
@@ -1571,15 +1847,16 @@ function renderMultipleTextElement(element, ctx, wrapper, pathKey) {
 
   function updateRemoveButtons() {
     if (state.config.readonly) return;
-    const items = container.querySelectorAll('.multiple-text-item');
+    const items = container.querySelectorAll(".multiple-text-item");
     const currentCount = items.length;
     items.forEach((item) => {
-      let removeBtn = item.querySelector('.remove-item-btn');
+      let removeBtn = item.querySelector(".remove-item-btn");
       if (!removeBtn) {
-        removeBtn = document.createElement('button');
-        removeBtn.type = 'button';
-        removeBtn.className = 'remove-item-btn px-2 py-1 text-red-600 hover:bg-red-50 rounded';
-        removeBtn.innerHTML = '✕';
+        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) {
@@ -1594,8 +1871,8 @@ function renderMultipleTextElement(element, ctx, wrapper, pathKey) {
       }
       const disabled = currentCount <= minCount;
       removeBtn.disabled = disabled;
-      removeBtn.style.opacity = disabled ? '0.5' : '1';
-      removeBtn.style.pointerEvents = disabled ? 'none' : 'auto';
+      removeBtn.style.opacity = disabled ? "0.5" : "1";
+      removeBtn.style.pointerEvents = disabled ? "none" : "auto";
     });
   }
 
@@ -1606,8 +1883,9 @@ function renderMultipleTextElement(element, ctx, wrapper, pathKey) {
     if (!state.config.readonly && values.length < maxCount) {
       const addBtn = document.createElement("button");
       addBtn.type = "button";
-      addBtn.className = "add-text-btn mt-2 px-3 py-1 text-blue-600 border border-blue-300 rounded hover:bg-blue-50 text-sm";
-      addBtn.textContent = `+ Add ${element.label || 'Text'}`;
+      addBtn.className =
+        "add-text-btn mt-2 px-3 py-1 text-blue-600 border border-blue-300 rounded hover:bg-blue-50 text-sm";
+      addBtn.textContent = `+ Add ${element.label || "Text"}`;
       addBtn.onclick = () => {
         values.push(element.default || "");
         addTextItem(element.default || "");
@@ -1619,7 +1897,7 @@ function renderMultipleTextElement(element, ctx, wrapper, pathKey) {
   }
 
   // Render initial items
-  values.forEach(value => addTextItem(value));
+  values.forEach((value) => addTextItem(value));
   updateAddButton();
   updateRemoveButtons();
 
@@ -1679,7 +1957,8 @@ function renderMultipleTextareaElement(element, ctx, wrapper, pathKey) {
     itemWrapper.className = "multiple-textarea-item";
 
     const textareaInput = document.createElement("textarea");
-    textareaInput.className = "w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 resize-none";
+    textareaInput.className =
+      "w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 resize-none";
     textareaInput.placeholder = element.placeholder || "Enter text";
     textareaInput.rows = element.rows || 4;
     textareaInput.value = value;
@@ -1701,15 +1980,16 @@ function renderMultipleTextareaElement(element, ctx, wrapper, pathKey) {
 
   function updateRemoveButtons() {
     if (state.config.readonly) return;
-    const items = container.querySelectorAll('.multiple-textarea-item');
+    const items = container.querySelectorAll(".multiple-textarea-item");
     const currentCount = items.length;
     items.forEach((item) => {
-      let removeBtn = item.querySelector('.remove-item-btn');
+      let removeBtn = item.querySelector(".remove-item-btn");
       if (!removeBtn) {
-        removeBtn = document.createElement('button');
-        removeBtn.type = 'button';
-        removeBtn.className = 'remove-item-btn mt-1 px-2 py-1 text-red-600 hover:bg-red-50 rounded text-sm';
-        removeBtn.innerHTML = '✕ Remove';
+        removeBtn = document.createElement("button");
+        removeBtn.type = "button";
+        removeBtn.className =
+          "remove-item-btn mt-1 px-2 py-1 text-red-600 hover:bg-red-50 rounded text-sm";
+        removeBtn.innerHTML = "✕ Remove";
         removeBtn.onclick = () => {
           const currentIndex = Array.from(container.children).indexOf(item);
           if (container.children.length > minCount) {
@@ -1724,8 +2004,8 @@ function renderMultipleTextareaElement(element, ctx, wrapper, pathKey) {
       }
       const disabled = currentCount <= minCount;
       removeBtn.disabled = disabled;
-      removeBtn.style.opacity = disabled ? '0.5' : '1';
-      removeBtn.style.pointerEvents = disabled ? 'none' : 'auto';
+      removeBtn.style.opacity = disabled ? "0.5" : "1";
+      removeBtn.style.pointerEvents = disabled ? "none" : "auto";
     });
   }
 
@@ -1736,8 +2016,9 @@ function renderMultipleTextareaElement(element, ctx, wrapper, pathKey) {
     if (!state.config.readonly && values.length < maxCount) {
       const addBtn = document.createElement("button");
       addBtn.type = "button";
-      addBtn.className = "add-textarea-btn mt-2 px-3 py-1 text-blue-600 border border-blue-300 rounded hover:bg-blue-50 text-sm";
-      addBtn.textContent = `+ Add ${element.label || 'Textarea'}`;
+      addBtn.className =
+        "add-textarea-btn mt-2 px-3 py-1 text-blue-600 border border-blue-300 rounded hover:bg-blue-50 text-sm";
+      addBtn.textContent = `+ Add ${element.label || "Textarea"}`;
       addBtn.onclick = () => {
         values.push(element.default || "");
         addTextareaItem(element.default || "");
@@ -1749,7 +2030,7 @@ function renderMultipleTextareaElement(element, ctx, wrapper, pathKey) {
   }
 
   // Render initial items
-  values.forEach(value => addTextareaItem(value));
+  values.forEach((value) => addTextareaItem(value));
   updateAddButton();
   updateRemoveButtons();
 
@@ -1813,7 +2094,8 @@ function renderMultipleNumberElement(element, ctx, wrapper, pathKey) {
 
     const numberInput = document.createElement("input");
     numberInput.type = "number";
-    numberInput.className = "flex-1 px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500";
+    numberInput.className =
+      "flex-1 px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500";
     numberInput.placeholder = element.placeholder || "0";
     if (element.min !== undefined) numberInput.min = element.min;
     if (element.max !== undefined) numberInput.max = element.max;
@@ -1837,15 +2119,16 @@ function renderMultipleNumberElement(element, ctx, wrapper, pathKey) {
 
   function updateRemoveButtons() {
     if (state.config.readonly) return;
-    const items = container.querySelectorAll('.multiple-number-item');
+    const items = container.querySelectorAll(".multiple-number-item");
     const currentCount = items.length;
     items.forEach((item) => {
-      let removeBtn = item.querySelector('.remove-item-btn');
+      let removeBtn = item.querySelector(".remove-item-btn");
       if (!removeBtn) {
-        removeBtn = document.createElement('button');
-        removeBtn.type = 'button';
-        removeBtn.className = 'remove-item-btn px-2 py-1 text-red-600 hover:bg-red-50 rounded';
-        removeBtn.innerHTML = '✕';
+        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) {
@@ -1860,8 +2143,8 @@ function renderMultipleNumberElement(element, ctx, wrapper, pathKey) {
       }
       const disabled = currentCount <= minCount;
       removeBtn.disabled = disabled;
-      removeBtn.style.opacity = disabled ? '0.5' : '1';
-      removeBtn.style.pointerEvents = disabled ? 'none' : 'auto';
+      removeBtn.style.opacity = disabled ? "0.5" : "1";
+      removeBtn.style.pointerEvents = disabled ? "none" : "auto";
     });
   }
 
@@ -1872,8 +2155,9 @@ function renderMultipleNumberElement(element, ctx, wrapper, pathKey) {
     if (!state.config.readonly && values.length < maxCount) {
       const addBtn = document.createElement("button");
       addBtn.type = "button";
-      addBtn.className = "add-number-btn mt-2 px-3 py-1 text-blue-600 border border-blue-300 rounded hover:bg-blue-50 text-sm";
-      addBtn.textContent = `+ Add ${element.label || 'Number'}`;
+      addBtn.className =
+        "add-number-btn mt-2 px-3 py-1 text-blue-600 border border-blue-300 rounded hover:bg-blue-50 text-sm";
+      addBtn.textContent = `+ Add ${element.label || "Number"}`;
       addBtn.onclick = () => {
         values.push(element.default || "");
         addNumberItem(element.default || "");
@@ -1885,7 +2169,7 @@ function renderMultipleNumberElement(element, ctx, wrapper, pathKey) {
   }
 
   // Render initial items
-  values.forEach(value => addNumberItem(value));
+  values.forEach((value) => addNumberItem(value));
   updateAddButton();
   updateRemoveButtons();
 
@@ -1931,7 +2215,7 @@ function renderMultipleSelectElement(element, ctx, wrapper, pathKey) {
   const maxCount = element.maxCount ?? 10;
 
   while (values.length < minCount) {
-    values.push(element.default || (element.options?.[0]?.value || ""));
+    values.push(element.default || element.options?.[0]?.value || "");
   }
 
   const container = document.createElement("div");
@@ -1953,7 +2237,8 @@ function renderMultipleSelectElement(element, ctx, wrapper, pathKey) {
     itemWrapper.className = "multiple-select-item flex items-center gap-2";
 
     const selectInput = document.createElement("select");
-    selectInput.className = "flex-1 px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500";
+    selectInput.className =
+      "flex-1 px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500";
     selectInput.disabled = state.config.readonly;
 
     // Add options
@@ -1983,15 +2268,16 @@ function renderMultipleSelectElement(element, ctx, wrapper, pathKey) {
 
   function updateRemoveButtons() {
     if (state.config.readonly) return;
-    const items = container.querySelectorAll('.multiple-select-item');
+    const items = container.querySelectorAll(".multiple-select-item");
     const currentCount = items.length;
     items.forEach((item) => {
-      let removeBtn = item.querySelector('.remove-item-btn');
+      let removeBtn = item.querySelector(".remove-item-btn");
       if (!removeBtn) {
-        removeBtn = document.createElement('button');
-        removeBtn.type = 'button';
-        removeBtn.className = 'remove-item-btn px-2 py-1 text-red-600 hover:bg-red-50 rounded';
-        removeBtn.innerHTML = '✕';
+        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) {
@@ -2006,8 +2292,8 @@ function renderMultipleSelectElement(element, ctx, wrapper, pathKey) {
       }
       const disabled = currentCount <= minCount;
       removeBtn.disabled = disabled;
-      removeBtn.style.opacity = disabled ? '0.5' : '1';
-      removeBtn.style.pointerEvents = disabled ? 'none' : 'auto';
+      removeBtn.style.opacity = disabled ? "0.5" : "1";
+      removeBtn.style.pointerEvents = disabled ? "none" : "auto";
     });
   }
 
@@ -2018,10 +2304,12 @@ function renderMultipleSelectElement(element, ctx, wrapper, pathKey) {
     if (!state.config.readonly && values.length < maxCount) {
       const addBtn = document.createElement("button");
       addBtn.type = "button";
-      addBtn.className = "add-select-btn mt-2 px-3 py-1 text-blue-600 border border-blue-300 rounded hover:bg-blue-50 text-sm";
-      addBtn.textContent = `+ Add ${element.label || 'Selection'}`;
+      addBtn.className =
+        "add-select-btn mt-2 px-3 py-1 text-blue-600 border border-blue-300 rounded hover:bg-blue-50 text-sm";
+      addBtn.textContent = `+ Add ${element.label || "Selection"}`;
       addBtn.onclick = () => {
-        const defaultValue = element.default || (element.options?.[0]?.value || "");
+        const defaultValue =
+          element.default || element.options?.[0]?.value || "";
         values.push(defaultValue);
         addSelectItem(defaultValue);
         updateAddButton();
@@ -2032,7 +2320,7 @@ function renderMultipleSelectElement(element, ctx, wrapper, pathKey) {
   }
 
   // Render initial items
-  values.forEach(value => addSelectItem(value));
+  values.forEach((value) => addSelectItem(value));
   updateAddButton();
   updateRemoveButtons();
 
@@ -2321,17 +2609,18 @@ function renderMultipleFileElement(element, ctx, wrapper, pathKey) {
       // Show count and min/max info
       const countInfo = document.createElement("div");
       countInfo.className = "text-xs text-gray-500 mt-2";
-      const countText = `${initialFiles.length} file${initialFiles.length !== 1 ? 's' : ''}`;
-      const minMaxText = minFiles > 0 || maxFiles < Infinity
-        ? ` (${minFiles}-${maxFiles} allowed)`
-        : '';
+      const countText = `${initialFiles.length} file${initialFiles.length !== 1 ? "s" : ""}`;
+      const minMaxText =
+        minFiles > 0 || maxFiles < Infinity
+          ? ` (${minFiles}-${maxFiles} allowed)`
+          : "";
       countInfo.textContent = countText + minMaxText;
 
       // Remove previous count info
-      const existingCount = filesWrapper.querySelector('.file-count-info');
+      const existingCount = filesWrapper.querySelector(".file-count-info");
       if (existingCount) existingCount.remove();
 
-      countInfo.className += ' file-count-info';
+      countInfo.className += " file-count-info";
       filesWrapper.appendChild(countInfo);
     };
 
@@ -2639,7 +2928,8 @@ function renderMultipleContainerElement(element, ctx, wrapper, _pathKey) {
           prefill: {},
         };
         const item = document.createElement("div");
-        item.className = "containerItem border border-gray-300 rounded-lg p-4 bg-white";
+        item.className =
+          "containerItem border border-gray-300 rounded-lg p-4 bg-white";
         item.setAttribute("data-container-item", `${element.key}[${idx}]`);
 
         element.elements.forEach((child) => {
@@ -2678,7 +2968,7 @@ function renderMultipleContainerElement(element, ctx, wrapper, _pathKey) {
       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>`;
+    left.innerHTML = `<span>${element.label || element.key}</span> <span class="text-sm text-gray-500">(${currentCount}/${max === Infinity ? "∞" : max})</span>`;
   };
 
   if (!state.config.readonly) {
@@ -2693,7 +2983,8 @@ function renderMultipleContainerElement(element, ctx, wrapper, _pathKey) {
         prefill: prefillObj || {},
       };
       const item = document.createElement("div");
-      item.className = "containerItem border border-gray-300 rounded-lg p-4 bg-white";
+      item.className =
+        "containerItem border border-gray-300 rounded-lg p-4 bg-white";
       item.setAttribute("data-container-item", `${element.key}[${idx}]`);
 
       element.elements.forEach((child) => {
@@ -2731,7 +3022,8 @@ function renderMultipleContainerElement(element, ctx, wrapper, _pathKey) {
         prefill: {},
       };
       const item = document.createElement("div");
-      item.className = "containerItem border border-gray-300 rounded-lg p-4 bg-white";
+      item.className =
+        "containerItem border border-gray-300 rounded-lg p-4 bg-white";
       item.setAttribute("data-container-item", `${element.key}[${idx}]`);
 
       element.elements.forEach((child) => {