@unvired/turboforms-embed-sdk 1.0.22 → 1.0.29

package/README.md

@@ -251,7 +251,9 @@ document.addEventListener('deviceready', function() {
 | `GET_ATTACHMENT` | Attachment request |
 | `ERROR` | Error occurred |
 
-## ✅ Button Visibility & Enablement
+## ✅ Button Visibility & Enablement (Normal Forms)
+
+The following rules apply to standard (non-wizard) forms:
 
 | privateExternal    | Permission      | Main Toolbar Button        | More Options (Dropdown)         | Enable / Disable Rule                              |
 | ------------------ | --------------- | -------------------------- | ------------------------------- | -------------------------------------------------- |
@@ -261,6 +263,18 @@ document.addEventListener('deviceready', function() {
 | **true (Private)** | `writesingle`   | **Complete** (`submitBtn`) | **Save** (`saveOption`)         | Complete enabled **ONLY when form is 100% filled** |
 | **Any**            | `read`          | None                       | None                            | N/A (Read-only mode)                               |
 
+## 🧙 Wizard Form Navigation & Visibility
+
+For Wizard forms, the standard action buttons are managed per-page to prioritize navigation:
+
+| Page Status | Action Buttons (Save/Complete) | Navigation Buttons | Action Menu (More Options) |
+| :--- | :--- | :--- | :--- |
+| **Intermediate Steps** | **Hidden** | **Previous**, **Next** | **Help** / **Comments** (if enabled) |
+| **Final Step** | **Visible** (Follows standard rules above) | **Previous** | **All Actions** (Follows standard rules above) |
+
+* **Intermediate Steps**: To ensure a clean experience, the SDK automatically hides all final submission actions (buttons, icons, and "More" dropdown items) until the user reaches the end of the wizard.
+* **Final Step**: Once the user reaches the last page, the standard logic defined in the table above is applied. The **Next** button is replaced by the appropriate **Save** or **Complete** action based on permissions and form state.
+
 ## 🧭 “More Options” Dropdown Logic
 
 ### ▶ **Complete appears in More Options**

package/dist/unvired-form-sdk.html

@@ -56365,6 +56365,11 @@ class SignatureComponent extends InputComponentForSignature {
         }
         if (this.refs.clicktoSign) {
           this.refs.clicktoSign.disabled = true;
+          this.refs.clicktoSign.style.pointerEvents = 'none';
+          this.refs.clicktoSign.style.display = 'none';
+          
+          const clickBox = this.refs.clicktoSign.closest('.click-to-sign-box');
+          if(clickBox) clickBox.style.display = 'none';
         }
         if (this.refs.signatureImage && this.dataValue) {
           this.refs.signatureImage.setAttribute('src', this.dataValue);
@@ -56376,6 +56381,12 @@ class SignatureComponent extends InputComponentForSignature {
         }
         if (this.refs.clicktoSign) {
           this.refs.clicktoSign.disabled = false;
+          this.refs.clicktoSign.style.pointerEvents = 'auto';
+          if (this.component.isEnableClicktoSign) {
+             this.refs.clicktoSign.style.display = 'inline-flex';
+             const clickBox = this.refs.clicktoSign.closest('.click-to-sign-box');
+             if(clickBox) clickBox.style.display = '';
+          }
         }
       }
     }
@@ -56447,6 +56458,11 @@ class SignatureComponent extends InputComponentForSignature {
       this.refs.refresh.classList.add('disabled');
       if (this.refs.clicktoSign) {
         this.refs.clicktoSign.disabled = true;
+        this.refs.clicktoSign.style.pointerEvents = 'none';
+        this.refs.clicktoSign.style.display = 'none';
+        
+        const clickBox = this.refs.clicktoSign.closest('.click-to-sign-box');
+        if(clickBox) clickBox.style.display = 'none';
       }
     }
 
@@ -58954,16 +58970,13 @@ function showDynamicModal(
       .custom-modal.show, .custom-modal-backdrop.show {
         display: flex;
       }
-      /* Center the dialog using translate which behaves consistently across browsers */
+      /* Flexbox on the parent handles centering */
       .custom-modal-dialog {
         width: 100%;
         max-width: 500px;
-        margin: 0; /* reset; we position via transform */
+        margin: auto;
         box-sizing: border-box;
         position: relative;
-        top: 50%;
-        left: 50%;
-        transform: translate(-50%, -50%);
       }
       .custom-modal-content {
         background: #fff;
@@ -59015,9 +59028,7 @@ function showDynamicModal(
       @media (max-width: 600px) {
         .custom-modal-dialog {
           max-width: 95vw;
-          /* On small screens prefer slightly higher vertical position so header isn't cut off */
-          top: 40%;
-          transform: translate(-50%, -40%);
+          margin: 1rem auto;
         }
         .custom-modal-content {
           border-radius: 0.15rem;
@@ -59996,7 +60007,7 @@ async function renderRNform(
             }
 
             // Hide FormIO submit button component and wizard buttons in readOnly mode
-            if (mode == "readOnly") {
+            if (mode == "readOnly" || permission == "read") {
                 const submitComponents = document.querySelectorAll(
                     ".formio-component-submit"
                 );
@@ -60004,6 +60015,18 @@ async function renderRNform(
                     component.style.display = "none";
                 });
 
+                // Disable signature pads robustly via CSS
+                if (!document.getElementById("readonly-signature-style")) {
+                    const style = document.createElement("style");
+                    style.id = "readonly-signature-style";
+                    style.innerHTML = `
+                      .formio-component-signature { pointer-events: none !important; }
+                      .formio-component-signature [ref="clicktoSign"],
+                      .formio-component-signature .click-to-sign-box { display: none !important; }
+                    `;
+                    document.head.appendChild(style);
+                }
+
                 // Hide wizard navigation buttons
                 const wizardNextBtns = document.querySelectorAll(
                     ".btn-wizard-nav-next"
@@ -60687,7 +60710,7 @@ window.CommentOnBack = CommentOnBack;
 
     
     <div id="sticky-footer">
-        <div class="build-version">SDK v1.0.22</div>
+        <div class="build-version">SDK v1.0.29</div>
         <div class="relative-position">
             <button id="unvired-more-btn" class="ui button primary dataGrid-addRow" onclick="toggleTooltip()">
                 <i class="icon options"></i>

package/dist/unvired-forms-sdk.js

@@ -43,11 +43,18 @@ function attachMasterDataToForm(obj, masterdataResults, key = "dataSrc", type =
       attachMasterDataToForm(obj[k], masterdataResults, key, type, true);
     } else if (k === key && obj[k] === type) {
       if (Array.isArray(masterdataResults)) {
-        obj.masterdata = masterdataResults.flatMap(
-          (md) => md.submissionData || []
-        );
+        let matchedData = [];
+        if (obj.selMasterdataId) {
+          const match = masterdataResults.find((md) => md.masterdataId === obj.selMasterdataId);
+          if (match && match.submissionData) {
+            matchedData = match.submissionData;
+          }
+        } else {
+          matchedData = masterdataResults.flatMap((md) => md.submissionData || []);
+        }
+        obj.masterdata = matchedData.map((item) => item && item.data !== void 0 ? item : { data: item });
       } else if (masterdataResults && Array.isArray(masterdataResults.submissionData)) {
-        obj.masterdata = masterdataResults.submissionData;
+        obj.masterdata = masterdataResults.submissionData.map((item) => item && item.data !== void 0 ? item : { data: item });
       } else {
         obj.masterdata = [];
       }
@@ -939,6 +946,8 @@ async function loadUnviredForms({
   const template = formJson;
   const nestedFormArrTemp = options.nestedFormData || [];
   const masterDataArrTemp = options.masterData || [];
+  console.log("[SDK:3] Debug - options.masterData received:", options.masterData);
+  console.log("[SDK:3] Debug - masterDataArrTemp evaluated to:", masterDataArrTemp);
   const nestedFormError = validateNestedForms(formJson, nestedFormArrTemp);
   if (nestedFormError) {
     console.error("[SDK] \u274C Step 3: Nested form validation failed", nestedFormError);
@@ -27823,6 +27832,7 @@ select.ui.dropdown {
         height: 100%;
         background: rgba(255, 255, 255, 0.95);
         backdrop-filter: blur(10px);
+        -webkit-backdrop-filter: blur(10px);
         display: flex;
         flex-direction: column;
         justify-content: center;
@@ -27842,15 +27852,23 @@ select.ui.dropdown {
         border: 4px solid #e0e0e0;
         border-top: 4px solid #0077b6;
         border-radius: 50%;
+        -webkit-animation: sdk-spin 1s linear infinite;
         animation: sdk-spin 1s linear infinite;
         margin-bottom: 20px;
+        -webkit-transform: translateZ(0);
+        transform: translateZ(0);
+        will-change: transform;
       }
       .sdk-loader-text {
         color: #0077b6;
         font-size: 1.1rem;
         font-weight: 500;
         letter-spacing: 0.5px;
+        -webkit-animation: sdk-pulse 1.5s ease-in-out infinite;
         animation: sdk-pulse 1.5s ease-in-out infinite;
+        -webkit-transform: translateZ(0);
+        transform: translateZ(0);
+        will-change: opacity;
       }
       .sdk-loader-subtext {
         color: #666;
@@ -27858,10 +27876,18 @@ select.ui.dropdown {
         margin-top: 8px;
         opacity: 0.7;
       }
+      @-webkit-keyframes sdk-spin {
+        0% { -webkit-transform: rotate(0deg); transform: rotate(0deg); }
+        100% { -webkit-transform: rotate(360deg); transform: rotate(360deg); }
+      }
       @keyframes sdk-spin {
         0% { transform: rotate(0deg); }
         100% { transform: rotate(360deg); }
       }
+      @-webkit-keyframes sdk-pulse {
+        0%, 100% { opacity: 1; }
+        50% { opacity: 0.5; }
+      }
       @keyframes sdk-pulse {
         0%, 100% { opacity: 1; }
         50% { opacity: 0.5; }
@@ -27922,14 +27948,20 @@ select.ui.dropdown {
       <div id="formio-cmt" style="margin-bottom: 20px;"></div>
     </div>
     <div id="sticky-footer">
-      <div class="build-version">SDK v1.0.22</div>
+      <div class="build-version">SDK v1.0.29</div>
       <button class="ui button primary dataGrid-addRow" id="saveBtn" disabled="true" onclick="FormOnSave()">
         <i class="icon save large"></i>Save
       </button>
+      <button class="ui button secondary dataGrid-addRow" id="prevBtn" style="display:none" onclick="FormOnPrevious()">
+        <i class="icon arrow left"></i>Previous
+      </button>
+      <button class="ui button primary dataGrid-addRow" id="nextBtn" style="display:none" onclick="FormOnNext()">
+        Next<i class="icon arrow right"></i>
+      </button>
       <button class="ui button primary dataGrid-addRow" id="submitBtn" style="display:none" onclick="FormOnSubmit()">
         <i class="icon save large"></i>Submit
       </button>
-      
+
       <!-- Quick Action Buttons -->
       <div id="quick-actions" style="display: flex; align-items: center;">
          <i id="quickCompleteBtn" class="icon clipboard check large" style="display:none; cursor: pointer; margin: 0 10px;" onclick="FormOnSubmit()" title="Complete"></i>
@@ -28078,6 +28110,16 @@ select.ui.dropdown {
       window.formOnSubmitFunction();
     }
   };
+  window.FormOnNext = window.FormOnNext || function() {
+    if (typeof window.formOnNextFunction === "function") {
+      window.formOnNextFunction();
+    }
+  };
+  window.FormOnPrevious = window.FormOnPrevious || function() {
+    if (typeof window.formOnPreviousFunction === "function") {
+      window.formOnPreviousFunction();
+    }
+  };
   const scriptContents = `
     // Global variable initialization
     window.form = window.form || {};
@@ -63598,6 +63640,11 @@ class SignatureComponent extends InputComponentForSignature {
         }
         if (this.refs.clicktoSign) {
           this.refs.clicktoSign.disabled = true;
+          this.refs.clicktoSign.style.pointerEvents = 'none';
+          this.refs.clicktoSign.style.display = 'none';
+          
+          const clickBox = this.refs.clicktoSign.closest('.click-to-sign-box');
+          if(clickBox) clickBox.style.display = 'none';
         }
         if (this.refs.signatureImage && this.dataValue) {
           this.refs.signatureImage.setAttribute('src', this.dataValue);
@@ -63609,6 +63656,12 @@ class SignatureComponent extends InputComponentForSignature {
         }
         if (this.refs.clicktoSign) {
           this.refs.clicktoSign.disabled = false;
+          this.refs.clicktoSign.style.pointerEvents = 'auto';
+          if (this.component.isEnableClicktoSign) {
+             this.refs.clicktoSign.style.display = 'inline-flex';
+             const clickBox = this.refs.clicktoSign.closest('.click-to-sign-box');
+             if(clickBox) clickBox.style.display = '';
+          }
         }
       }
     }
@@ -63680,6 +63733,11 @@ class SignatureComponent extends InputComponentForSignature {
       this.refs.refresh.classList.add('disabled');
       if (this.refs.clicktoSign) {
         this.refs.clicktoSign.disabled = true;
+        this.refs.clicktoSign.style.pointerEvents = 'none';
+        this.refs.clicktoSign.style.display = 'none';
+        
+        const clickBox = this.refs.clicktoSign.closest('.click-to-sign-box');
+        if(clickBox) clickBox.style.display = 'none';
       }
     }
 
@@ -66192,16 +66250,13 @@ function showDynamicModal(
       .custom-modal.show, .custom-modal-backdrop.show {
         display: flex;
       }
-      /* Center the dialog using translate which behaves consistently across browsers */
+      /* Flexbox on the parent handles centering */
       .custom-modal-dialog {
         width: 100%;
         max-width: 500px;
-        margin: 0; /* reset; we position via transform */
+        margin: auto;
         box-sizing: border-box;
         position: relative;
-        top: 50%;
-        left: 50%;
-        transform: translate(-50%, -50%);
       }
       .custom-modal-content {
         background: #fff;
@@ -66253,9 +66308,7 @@ function showDynamicModal(
       @media (max-width: 600px) {
         .custom-modal-dialog {
           max-width: 95vw;
-          /* On small screens prefer slightly higher vertical position so header isn't cut off */
-          top: 40%;
-          transform: translate(-50%, -40%);
+          margin: 1rem auto;
         }
         .custom-modal-content {
           border-radius: 0.15rem;
@@ -66567,6 +66620,8 @@ function FormOnBackNavigation() {
 function initialButtonSetup(privateExternal, permission) {
   const saveBtn = document.getElementById("saveBtn");
   const submitBtn = document.getElementById("submitBtn");
+  const prevBtn = document.getElementById("prevBtn");
+  const nextBtn = document.getElementById("nextBtn");
   const completeOption = document.getElementById("completeOption");
   const saveOption = document.getElementById("saveOption");
   const completeDivider = document.getElementById("completeDivider");
@@ -66672,6 +66727,7 @@ function initialButtonSetup(privateExternal, permission) {
   }
 }
 
+
 function onChangeButtonSetup(
   completionPercentage,
   formData,
@@ -66680,6 +66736,8 @@ function onChangeButtonSetup(
 ) {
   const saveBtn = document.getElementById("saveBtn");
   const submitBtn = document.getElementById("submitBtn");
+  const prevBtn = document.getElementById("prevBtn");
+  const nextBtn = document.getElementById("nextBtn");
   if (!saveBtn || !submitBtn) return;
 
   const isPrivate = privateExternal === true || privateExternal === "true";
@@ -67042,6 +67100,11 @@ async function loadRNform(
       .then(() => {
         console.log("[FormIO] \u{1F680} formReady.then() triggered");
 
+        // Handle Navigation and Button Hiding (Wizard-specific logic separated)
+        if (typeof window.initializeWizardLogic === "function") {
+          window.initializeWizardLogic(formObj, privateExternal, permission);
+        }
+
         if (formPreviousData) {
           console.log("[FormIO] \u{1F4E6} Previous form data found:", formPreviousData);
 
@@ -67063,7 +67126,7 @@ async function loadRNform(
         console.log("[FormIO] \u2705 Progress calculation completed");
 
         // Hide FormIO submit button component and wizard buttons in readOnly mode
-        if (mode == "readOnly") {
+        if (mode == "readOnly" || permission == "read") {
           console.log("[FormIO] \u{1F512} ReadOnly mode detected");
 
           const submitComponents = document.querySelectorAll(
@@ -67078,41 +67141,17 @@ async function loadRNform(
             console.log(\`[FormIO] Hidden submit component \${index + 1}\`);
           });
 
-          const wizardNextBtns = document.querySelectorAll(
-            ".btn-wizard-nav-next"
-          );
-          console.log(
-            \`[FormIO] Found \${wizardNextBtns.length} wizard next buttons\`
-          );
-
-          wizardNextBtns.forEach((btn, index) => {
-            btn.style.display = "none";
-            console.log(\`[FormIO] Hidden wizard next button \${index + 1}\`);
-          });
-
-          const wizardSubmitBtns = document.querySelectorAll(
-            ".btn-wizard-nav-submit"
-          );
-          console.log(
-            \`[FormIO] Found \${wizardSubmitBtns.length} wizard submit buttons\`
-          );
-
-          wizardSubmitBtns.forEach((btn, index) => {
-            btn.style.display = "none";
-            console.log(\`[FormIO] Hidden wizard submit button \${index + 1}\`);
-          });
-
-          const wizardPrevBtns = document.querySelectorAll(
-            ".btn-wizard-nav-previous"
-          );
-          console.log(
-            \`[FormIO] Found \${wizardPrevBtns.length} wizard previous buttons\`
-          );
-
-          wizardPrevBtns.forEach((btn, index) => {
-            btn.style.display = "none";
-            console.log(\`[FormIO] Hidden wizard previous button \${index + 1}\`);
-          });
+          // Disable signature components robustly via CSS
+          if (!document.getElementById("readonly-signature-style")) {
+            const style = document.createElement("style");
+            style.id = "readonly-signature-style";
+            style.innerHTML = \`
+              .formio-component-signature { pointer-events: none !important; }
+              .formio-component-signature [ref="clicktoSign"],
+              .formio-component-signature .click-to-sign-box { display: none !important; }
+            \`;
+            document.head.appendChild(style);
+          }
         } else {
           console.log("[FormIO] \u{1F513} Editable mode detected");
         }
@@ -67257,6 +67296,11 @@ function buildMandatoryFieldsCache() {
         cacheMandatoryFields(comp.components, fieldPath);
       }
 
+      // Nested forms
+      if (comp.type === 'form' && comp.subForm && Array.isArray(comp.subForm.components)) {
+        cacheMandatoryFields(comp.subForm.components, fieldPath ? \`\${fieldPath}.data\` : 'data');
+      }
+
       // Columns component handles children differently in instances?
       // Usually comp.columns is an array of objects which contain .components (instances)
       if (Array.isArray(comp.columns)) {
@@ -67290,13 +67334,16 @@ function buildMandatoryFieldsCache() {
   return cache;
 }
 
-function executeProgressCalculation(privateExternal, permission) {
+window.executeProgressCalculation = function(privateExternal, permission) {
   if (!formObj) return;
 
   const data = formObj.data || {};
   const dataHash = JSON.stringify(data);
+  const isWizard = formObj && !!formObj.wizard;
 
-  if (dataHash === lastDataHash) return;
+  // For wizards, we must always proceed even if data is same, 
+  // because button visibility depends on the current page.
+  if (!isWizard && dataHash === lastDataHash) return;
   lastDataHash = dataHash;
 
   const mandatoryFields = buildMandatoryFieldsCache();
@@ -67398,6 +67445,11 @@ function executeProgressCalculation(privateExternal, permission) {
     permission
   );
 
+  // After setting up standard button visibility, override with wizard rules if applicable
+  if (typeof window.updateWizardNav === "function") {
+    window.updateWizardNav(formObj);
+  }
+
   // Update progress bar
   const progressBar = document.getElementById("progress-bar");
   if (progressBar) {
@@ -67678,6 +67730,12 @@ function FormOnSave() {
 }
 
 function FormOnBack() {
+  // Do not ask for confirmation in read-only mode
+  if (formObj && formObj.options && formObj.options.readOnly) {
+    FormOnBackNavigation();
+    return;
+  }
+
   let currentData;
   try {
     currentData = formObj ? formObj.getValue().data : null;
@@ -67685,10 +67743,10 @@ function FormOnBack() {
     currentData = null;
   }
 
-  const hasChanges =
+  const noChanges =
     JSON.stringify(currentData) === JSON.stringify(initialFormData);
 
-  if (hasChanges) {
+  if (noChanges) {
     FormOnBackNavigation();
   } else {
     showDynamicModal(
@@ -67740,18 +67798,19 @@ window.checkMoreButtonVisibility = function () {
   //    For documentsOption, its display is managed by logic.
   //    For comments/help, they are often just static items toggled.
 
-  const isVisible = (el) => el && el.style.display !== "none";
-
-  // Assuming options.showComments/Help also imply the item SHOULD be visible if logic permits
-  // But logic might hide them. The 'isVisible' check handles dynamic logic.
-  // But for comments/help, they might be hidden initially.
+  const isVisible = (el, optionKey) => {
+    if (!el) return false;
+    // If it's a static item like Help or Comments, check the options as well
+    if (optionKey && options[optionKey] === true) return true;
+    return el.style.display !== "none";
+  };
 
   const hasVisibleItems =
     isVisible(completeOption) ||
     isVisible(saveOption) ||
     isVisible(documentsOption) ||
-    isVisible(commentsItem) ||
-    isVisible(helpItem); // Simplified: check actual DOM state
+    isVisible(commentsItem, "showComments") ||
+    isVisible(helpItem, "showHelp"); // Simplified: check actual DOM state + options
 
   // If ANY item is visible, show the button. Otherwise hide.
   if (hasVisibleItems) {
@@ -67769,6 +67828,28 @@ window.FormOnSave = FormOnSave;
 window.FormOnBack = FormOnBack;
 window.setImageData = setImageData;
 window.FormOnSubmit = FormOnSubmit;
+window.FormOnNext = function () {
+  if (formObj && typeof formObj.nextPage === "function") {
+    formObj.nextPage().then(() => {
+      if (typeof window.updateWizardNav === "function") {
+        window.updateWizardNav(formObj);
+      }
+    });
+  }
+};
+
+window.FormOnPrevious = function () {
+  if (formObj && typeof formObj.prevPage === "function") {
+    formObj.prevPage().then(() => {
+      if (typeof window.updateWizardNav === "function") {
+        window.updateWizardNav(formObj);
+      }
+    });
+  }
+};
+
+window.formOnSubmitFunction = FormOnSubmit;
+
 window.resetFormCache = resetFormCache;
 
 // Notify that loadRNform is ready (for event-based coordination)
@@ -67778,6 +67859,174 @@ document.dispatchEvent(new CustomEvent('LoadRNformReady'));
 
 // === SCRIPT_SEPARATOR ===
 
+(function(){
+/**
+ * Wizard Navigation Logic for Unvired Forms
+ * This file handles all logic specific to Form.io wizard forms,
+ * including navigation button visibility and event handling.
+ */
+
+/**
+ * Updates the visibility of navigation buttons (Next, Previous, Submit)
+ * based on the current wizard page and form type.
+ * 
+ * @param {Object} formObj - The Form.io form instance
+ */
+function updateWizardNav(formObj) {
+  if (!formObj) return;
+
+  // 1. Hide default navigation and buttons (Next, Previous, Cancel, Submit)
+  // This ensures that we only use our own footer buttons
+  const selectorsToHide = [
+    '.formio-component-wizard_nav',
+    '.btn-wizard-nav-next',
+    '.btn-wizard-nav-previous',
+    '.btn-wizard-nav-cancel',
+    '.btn-wizard-nav-submit'
+  ];
+
+  selectorsToHide.forEach(selector => {
+    const elements = formObj.element.querySelectorAll(selector);
+    elements.forEach(el => {
+      el.style.display = "none";
+    });
+  });
+
+  // 2. Hide components from JSON that match navigation actions
+  if (typeof formObj.eachComponent === 'function') {
+    formObj.eachComponent((component) => {
+      if (component.type === 'button') {
+        const action = (component.component.action || '').toLowerCase();
+        const label = (component.component.label || '').toLowerCase();
+
+        if (action === 'next' || action === 'previous' || action === 'cancel' ||
+          label === 'next' || label === 'previous' || label === 'cancel') {
+          // Hide both the component instance and its DOM element
+          component.visible = false;
+          if (component.element) {
+            component.element.style.display = 'none';
+          }
+        }
+      }
+    });
+  }
+
+  // 3. Handle Footer Navigation Toggling (Only for Wizards)
+  if (!formObj.wizard) return;
+
+  const prevBtn = document.getElementById("prevBtn");
+  const nextBtn = document.getElementById("nextBtn");
+  const submitBtn = document.getElementById("submitBtn");
+  const saveBtn = document.getElementById("saveBtn");
+
+  const currentPage = formObj.page || 0;
+  const numPages = (formObj.pages && formObj.pages.length) || 0;
+  const isLastPage = (currentPage >= numPages - 1);
+
+  console.log(\`[WizardLogic] \u{1F9ED} Page: \${currentPage + 1}/\${numPages}, isLastPage: \${isLastPage}\`);
+
+  if (prevBtn) {
+    prevBtn.style.display = currentPage > 0 ? "inline-block" : "none";
+  }
+
+  if (nextBtn) {
+    nextBtn.style.display = currentPage < numPages - 1 ? "inline-block" : "none";
+  }
+
+  // If it's a wizard, we only want the save and submit buttons on the last page.
+  // If it's NOT the last page, we force hide them.
+  // If it IS the last page, we let the normal logic (onChangeButtonSetup) decide.
+  if (!isLastPage) {
+    console.log("[WizardLogic] \u{1F512} Intermediate page: Hiding save/complete actions");
+    if (submitBtn) submitBtn.style.display = "none";
+    if (saveBtn) saveBtn.style.display = "none";
+
+    // Hide dropdown options as well
+    const completeOption = document.getElementById("completeOption");
+    const saveOption = document.getElementById("saveOption");
+    const completeDivider = document.getElementById("completeDivider");
+    const saveDivider = document.getElementById("saveDivider");
+
+    if (completeOption) completeOption.style.display = "none";
+    if (saveOption) saveOption.style.display = "none";
+    if (completeDivider) completeDivider.style.display = "none";
+    if (saveDivider) saveDivider.style.display = "none";
+
+    // Also hide quick action buttons if they exist
+    const quickCompleteBtn = document.getElementById("quickCompleteBtn");
+    const quickSaveBtn = document.getElementById("quickSaveBtn");
+    if (quickCompleteBtn) quickCompleteBtn.style.display = "none";
+    if (quickSaveBtn) quickSaveBtn.style.display = "none";
+
+    // Re-check More button visibility after hiding items
+    if (typeof window.checkMoreButtonVisibility === "function") {
+      window.checkMoreButtonVisibility();
+    }
+  } else {
+    console.log("[WizardLogic] \u{1F513} Last page: Allowing normal button logic to take over");
+    // On the last page, we MUST ensure the More button visibility is re-evaluated
+    // because it might have been hidden on the previous page.
+    if (typeof window.checkMoreButtonVisibility === "function") {
+      window.checkMoreButtonVisibility();
+    }
+  }
+}
+
+/**
+ * Sets up event listeners for wizard-specific events like page changes.
+ * 
+ * @param {Object} formObj - The Form.io form instance
+ * @param {Boolean} privateExternal - Private/External flag
+ * @param {String} permission - User permission level
+ */
+function setupWizardEvents(formObj, privateExternal, permission) {
+  if (!formObj) return;
+
+  if (formObj.wizard) {
+    formObj.on('nextPage', () => {
+      updateWizardNav(formObj);
+      // Trigger progress calculation on page change
+      if (typeof window.executeProgressCalculation === 'function') {
+        window.executeProgressCalculation(privateExternal, permission);
+      }
+    });
+    formObj.on('prevPage', () => {
+      updateWizardNav(formObj);
+      // Trigger progress calculation on page change
+      if (typeof window.executeProgressCalculation === 'function') {
+        window.executeProgressCalculation(privateExternal, permission);
+      }
+    });
+  }
+
+  // Always handle render event to ensure buttons stay hidden
+  formObj.on('render', () => {
+    updateWizardNav(formObj);
+  });
+}
+
+window.updateWizardNav = updateWizardNav;
+
+/**
+ * Main initialization function for wizard logic.
+ * Should be called after the Form.io form is created.
+ */
+window.initializeWizardLogic = function(formObj, privateExternal, permission) {
+  console.log("[WizardLogic] \u{1F9D9} Initializing wizard-specific logic...");
+  setupWizardEvents(formObj, privateExternal, permission);
+
+  // Also listen for change events to update nav (e.g. if pages are conditionally hidden)
+  formObj.on('change', () => {
+    updateWizardNav(formObj);
+  });
+
+  updateWizardNav(formObj);
+};
+
+})();
+
+// === SCRIPT_SEPARATOR ===
+
 (function(){
 async function loadCommentsform(
   template,
@@ -68040,19 +68289,28 @@ window.CommentOnBack = CommentOnBack;
       window.__unviredSdkScriptsLoading = false;
       throw error;
     }
-    for (let i = 1; i <= 2; i++) {
-      if (scriptContents[i] && scriptContents[i].trim()) {
-        const scriptElement = document.createElement("script");
-        scriptElement.textContent = scriptContents[i];
-        scriptElement.setAttribute("data-unvired-script", `recogito-${i}`);
-        document.head.appendChild(scriptElement);
+    if (options.showComments) {
+      for (let i = 1; i <= 2; i++) {
+        if (scriptContents[i] && scriptContents[i].trim()) {
+          const scriptElement = document.createElement("script");
+          scriptElement.textContent = scriptContents[i];
+          scriptElement.setAttribute("data-unvired-script", `recogito-${i}`);
+          document.head.appendChild(scriptElement);
+          await new Promise((r) => setTimeout(r, 0));
+        }
       }
+    } else {
+      console.log("[SDK:10.3] \u26A1 Skipping Recogito (comments disabled, optimized load)");
     }
-    if (scriptContents[3] && scriptContents[3].trim()) {
+    const hasThemeOverrides = options.themeData && Object.keys(options.themeData).length > 0;
+    if (hasThemeOverrides && scriptContents[3] && scriptContents[3].trim()) {
       const lessScript = document.createElement("script");
       lessScript.textContent = scriptContents[3];
       lessScript.setAttribute("data-unvired-script", "less");
       document.head.appendChild(lessScript);
+    } else {
+      console.log("[SDK:10.4] \u26A1 Skipping LESS.js (no theme overrides, optimized load)");
+      window.less = window.less || { modifyVars: () => Promise.resolve() };
     }
     window.form = window.form || {};
     window.platform = window.platform || {};
@@ -68075,6 +68333,9 @@ window.CommentOnBack = CommentOnBack;
         scriptElement.textContent = scriptContent;
         scriptElement.setAttribute("data-unvired-script", `script-${i}`);
         document.head.appendChild(scriptElement);
+        if (i % 5 === 0) {
+          await new Promise((r) => setTimeout(r, 0));
+        }
       }
     }
     window.__unviredSdkScriptsLoaded = true;
@@ -68300,7 +68561,7 @@ window.deleteAppDocument = async function(id) {
 window.getAllDocuments = getAllDocuments;
 window.hasDocuments = hasDocuments;
 function getBuildVersion() {
-  return "1.0.22";
+  return "1.0.29";
 }
 export {
   getBuildVersion,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@unvired/turboforms-embed-sdk",
-  "version": "1.0.22",
+  "version": "1.0.29",
   "description": "Reusable vanilla JS form library that works with React, Angular, Ionic, etc.",
   "main": "dist/unvired-forms-sdk.js",
   "types": "dist/index.d.ts",