@sparkvault/sdk 1.9.0 → 1.9.2

package/dist/sparkvault.esm.js

@@ -5752,18 +5752,32 @@ function getUploadStyles(options) {
        ======================================== */
 
     .svu-overlay {
-      position: fixed;
-      inset: 0;
+      /* Force full-screen overlay regardless of page styles */
+      position: fixed !important;
+      top: 0 !important;
+      left: 0 !important;
+      right: 0 !important;
+      bottom: 0 !important;
+      width: 100vw !important;
+      height: 100vh !important;
+      max-width: none !important;
+      max-height: none !important;
+      margin: 0 !important;
       background: rgba(0, 0, 0, 0.5);
-      display: flex;
+      display: flex !important;
       align-items: center;
       justify-content: center;
-      z-index: 999999;
+      z-index: 999999 !important;
       padding: 16px;
       box-sizing: border-box;
       font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
       -webkit-font-smoothing: antialiased;
       -moz-osx-font-smoothing: grayscale;
+      /* Break out of any containing block that could affect fixed positioning */
+      transform: none !important;
+      filter: none !important;
+      contain: none !important;
+      isolation: isolate;
     }
 
     .svu-overlay.svu-blur {
@@ -6972,6 +6986,9 @@ class UploadModalContainer {
     setDarkMode(enabled) {
         if (!this.elements)
             return;
+        // Skip if already in the requested mode
+        if (this.isDarkMode === enabled)
+            return;
         this.isDarkMode = enabled;
         if (enabled) {
             this.elements.modal.classList.add('svu-dark');
@@ -6979,7 +6996,7 @@ class UploadModalContainer {
         else {
             this.elements.modal.classList.remove('svu-dark');
         }
-        // Re-create header with correct logo
+        // Re-create header with correct logo (only when mode actually changes)
         const newHeader = this.createHeader(this.branding);
         if (this.headerElement?.parentNode) {
             this.headerElement.parentNode.replaceChild(newHeader, this.headerElement);
@@ -7246,6 +7263,9 @@ class UploadInlineContainer {
     setDarkMode(enabled) {
         if (!this.container)
             return;
+        // Skip if already in the requested mode
+        if (this.isDarkMode === enabled)
+            return;
         this.isDarkMode = enabled;
         if (enabled) {
             this.container.classList.add('svu-dark');
@@ -7253,7 +7273,7 @@ class UploadInlineContainer {
         else {
             this.container.classList.remove('svu-dark');
         }
-        // Re-create header with correct logo
+        // Re-create header with correct logo (only when mode actually changes)
         if (this.containerOptions.showHeader && this.header) {
             const newHeader = this.createHeader(this.branding);
             this.container.replaceChild(newHeader, this.header);
@@ -7508,6 +7528,7 @@ class UploadRenderer {
         // Hybrid mode: modal overlay for upload/ceremony in inline mode
         this.uploadModal = null;
         this.isInlineMode = false;
+        this.hybridModalInitialized = false;
         this.pasteHandler = null;
         this.container = container;
         this.api = api;
@@ -7548,6 +7569,7 @@ class UploadRenderer {
         if (this.uploadModal) {
             this.uploadModal.destroy();
             this.uploadModal = null;
+            this.hybridModalInitialized = false;
         }
         this.container.destroy();
     }
@@ -7567,10 +7589,16 @@ class UploadRenderer {
             this.renderInModal();
             return;
         }
-        // Close modal if we're leaving upload/ceremony states
+        // Close modal if we're leaving upload/ceremony states (hybrid mode complete)
         if (this.uploadModal) {
             this.uploadModal.destroy();
             this.uploadModal = null;
+            this.hybridModalInitialized = false;
+            // Restore inline container visibility
+            const inlineBody = this.container.getBody();
+            if (inlineBody?.parentElement) {
+                inlineBody.parentElement.style.display = '';
+            }
         }
         const body = this.container.getBody();
         if (!body)
@@ -7609,7 +7637,7 @@ class UploadRenderer {
      * This provides the full polished experience during upload.
      */
     renderInModal() {
-        // Create modal if not exists
+        // Create and initialize modal only once
         if (!this.uploadModal) {
             this.uploadModal = new UploadModalContainer();
             this.uploadModal.createLoading({ backdropBlur: this.options.backdropBlur ?? true }, () => { } // No close callback - user can't cancel during upload
@@ -7617,15 +7645,25 @@ class UploadRenderer {
             if (this.config) {
                 this.uploadModal.updateBranding(this.config.branding);
             }
+            this.hybridModalInitialized = false;
         }
         const body = this.uploadModal.getBody();
         if (!body)
             return;
+        // Initialize modal state only once (not on every progress update)
+        if (!this.hybridModalInitialized) {
+            // Hide inline container during hybrid mode to avoid CSS conflicts
+            const inlineBody = this.container.getBody();
+            if (inlineBody?.parentElement) {
+                inlineBody.parentElement.style.display = 'none';
+            }
+            // Set dark mode and show sidebar once
+            this.uploadModal.setDarkMode(true);
+            this.uploadModal.toggleSidebar(true);
+            this.hybridModalInitialized = true;
+        }
         // Clear and render current state
         body.innerHTML = '';
-        // Set dark mode and show sidebar
-        this.uploadModal.setDarkMode(true);
-        this.uploadModal.toggleSidebar(true);
         if (this.viewState.view === 'uploading') {
             body.appendChild(this.renderUploading(this.viewState));
         }