@dmitryvim/form-builder 0.1.35 → 0.1.37

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";
@@ -293,7 +305,7 @@ function renderElement(element, ctx) {
         const actionBtn = document.createElement("button");
         actionBtn.type = "button";
         actionBtn.className =
-          "px-3 py-1.5 text-sm bg-blue-50 border border-blue-200 text-blue-700 rounded-lg hover:bg-blue-100 transition-colors";
+          "px-3 py-2 text-sm border border-gray-300 text-gray-700 rounded-lg hover:bg-gray-50 transition-colors";
         actionBtn.textContent = action.label;
 
         actionBtn.addEventListener("click", (e) => {
@@ -304,7 +316,15 @@ function renderElement(element, ctx) {
             state.config.actionHandler &&
             typeof state.config.actionHandler === "function"
           ) {
-            state.config.actionHandler(action.value);
+            // For schema-based actions (old system), call with just the value for backward compatibility
+            // Check if the handler expects 2 parameters (new system) or 1 parameter (old system)
+            if (state.config.actionHandler.length > 1) {
+              // New system: pass related_field (element key) and value
+              state.config.actionHandler(element.key, action.value);
+            } else {
+              // Old system: pass only value for backward compatibility
+              state.config.actionHandler(action.value);
+            }
           }
         });
 
@@ -616,11 +636,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 +661,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"]');
@@ -808,11 +828,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 +947,125 @@ function addDeleteButton(container, onDelete) {
   container.appendChild(overlay);
 }
 
+// JSON path resolution for external actions (currently unused but kept for future use)
+// eslint-disable-next-line no-unused-vars
+function resolveFieldPath(path, formData) {
+  // Remove leading $input_data. prefix if present
+  const cleanPath = path.replace(/^\$input_data\./, "");
+
+  // Split path into segments, handling array notation
+  const segments = cleanPath.split(/[.[\]]/).filter(Boolean);
+
+  // Try to find the corresponding form element
+  return findElementByPath(segments, formData);
+}
+
+function findElementByPath(segments, data, currentPath = "") {
+  if (segments.length === 0) return currentPath;
+
+  const [head, ...tail] = segments;
+
+  // Check if this is an array index
+  const isArrayIndex = /^\d+$/.test(head);
+
+  if (isArrayIndex) {
+    // Array index case: build path like "fieldName[index]"
+    const newPath = currentPath ? `${currentPath}[${head}]` : `[${head}]`;
+    return findElementByPath(tail, data, newPath);
+  } else {
+    // Regular field name
+    const newPath = currentPath ? `${currentPath}.${head}` : head;
+    return findElementByPath(tail, data, newPath);
+  }
+}
+
+function findFormElementByFieldPath(fieldPath) {
+  // Try to find the form element that corresponds to the field path
+  // This looks for elements with name attributes that match the path pattern
+
+  if (!state.formRoot) return null;
+
+  // Try exact match first
+  let element = state.formRoot.querySelector(`[name="${fieldPath}"]`);
+  if (element) return element;
+
+  // Try with array notation variations
+  const variations = [
+    fieldPath,
+    fieldPath.replace(/\[(\d+)\]/g, "[$1]"), // normalize array notation
+    fieldPath.replace(/\./g, "[") +
+      "]".repeat((fieldPath.match(/\./g) || []).length), // convert dots to brackets
+  ];
+
+  for (const variation of variations) {
+    element = state.formRoot.querySelector(`[name="${variation}"]`);
+    if (element) return element;
+  }
+
+  return null;
+}
+
+function renderExternalActions() {
+  if (!state.externalActions || !Array.isArray(state.externalActions)) return;
+
+  state.externalActions.forEach((action) => {
+    if (!action.related_field || !action.value || !action.label) return;
+
+    // Find the form element for this related field
+    const fieldElement = findFormElementByFieldPath(action.related_field);
+    if (!fieldElement) {
+      console.warn(
+        `External action: Could not find form element for field "${action.related_field}"`,
+      );
+      return;
+    }
+
+    // Find the wrapper element that contains the field using stable class
+    let wrapper = fieldElement.closest(".fb-field-wrapper");
+    if (!wrapper) {
+      wrapper = fieldElement.parentElement;
+    }
+
+    if (!wrapper) {
+      console.warn(
+        `External action: Could not find wrapper for field "${action.related_field}"`,
+      );
+      return;
+    }
+
+    // Check if we already added external actions to this wrapper
+    if (wrapper.querySelector(".external-actions-container")) return;
+
+    // Create actions container
+    const actionsContainer = document.createElement("div");
+    actionsContainer.className =
+      "external-actions-container mt-4 flex flex-wrap gap-2";
+
+    // Create action button
+    const actionBtn = document.createElement("button");
+    actionBtn.type = "button";
+    actionBtn.className =
+      "px-3 py-2 text-sm border border-gray-300 text-gray-700 rounded-lg hover:bg-gray-50 transition-colors";
+    actionBtn.textContent = action.label;
+
+    actionBtn.addEventListener("click", (e) => {
+      e.preventDefault();
+      e.stopPropagation();
+
+      if (
+        state.config.actionHandler &&
+        typeof state.config.actionHandler === "function"
+      ) {
+        // Call with both related_field and value for the new actions system
+        state.config.actionHandler(action.related_field, action.value);
+      }
+    });
+
+    actionsContainer.appendChild(actionBtn);
+    wrapper.appendChild(actionsContainer);
+  });
+}
+
 function showTooltip(tooltipId, button) {
   const tooltip = document.getElementById(tooltipId);
   const isCurrentlyVisible = !tooltip.classList.contains("hidden");
@@ -1044,11 +1183,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 +1218,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 +1301,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 +1312,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 +1376,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 +1408,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 +1500,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 +1529,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 +1551,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 +1584,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 +1623,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 +1709,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 +1731,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 +1755,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 +1767,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 +1781,7 @@ function renderMultipleTextElement(element, ctx, wrapper, pathKey) {
   }
 
   // Render initial items
-  values.forEach(value => addTextItem(value));
+  values.forEach((value) => addTextItem(value));
   updateAddButton();
   updateRemoveButtons();
 
@@ -1679,7 +1841,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 +1864,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 +1888,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 +1900,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 +1914,7 @@ function renderMultipleTextareaElement(element, ctx, wrapper, pathKey) {
   }
 
   // Render initial items
-  values.forEach(value => addTextareaItem(value));
+  values.forEach((value) => addTextareaItem(value));
   updateAddButton();
   updateRemoveButtons();
 
@@ -1813,7 +1978,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 +2003,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 +2027,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 +2039,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 +2053,7 @@ function renderMultipleNumberElement(element, ctx, wrapper, pathKey) {
   }
 
   // Render initial items
-  values.forEach(value => addNumberItem(value));
+  values.forEach((value) => addNumberItem(value));
   updateAddButton();
   updateRemoveButtons();
 
@@ -1931,7 +2099,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 +2121,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 +2152,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 +2176,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 +2188,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 +2204,7 @@ function renderMultipleSelectElement(element, ctx, wrapper, pathKey) {
   }
 
   // Render initial items
-  values.forEach(value => addSelectItem(value));
+  values.forEach((value) => addSelectItem(value));
   updateAddButton();
   updateRemoveButtons();
 
@@ -2321,17 +2493,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 +2812,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 +2852,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 +2867,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 +2906,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) => {