@sparkvault/sdk 1.8.4 → 1.9.0

package/dist/sparkvault.esm.js

@@ -7505,11 +7505,15 @@ class UploadRenderer {
         this.selectedFile = null;
         // File input element for selection
         this.fileInputElement = null;
+        // Hybrid mode: modal overlay for upload/ceremony in inline mode
+        this.uploadModal = null;
+        this.isInlineMode = false;
         this.pasteHandler = null;
         this.container = container;
         this.api = api;
         this.options = options;
         this.callbacks = callbacks;
+        this.isInlineMode = !!options.target;
     }
     /**
      * Start the upload flow.
@@ -7540,6 +7544,11 @@ class UploadRenderer {
     close() {
         this.cleanupFileInput();
         this.cleanupPasteHandler();
+        // Clean up modal if open (hybrid mode)
+        if (this.uploadModal) {
+            this.uploadModal.destroy();
+            this.uploadModal = null;
+        }
         this.container.destroy();
     }
     handleClose() {
@@ -7551,17 +7560,27 @@ class UploadRenderer {
         this.render();
     }
     render() {
+        const isDarkState = this.viewState.view === 'uploading' || this.viewState.view === 'ceremony';
+        // Hybrid mode: For inline containers, use a modal popup for upload/ceremony
+        // This gives the polished full experience, then returns to inline for success
+        if (this.isInlineMode && isDarkState) {
+            this.renderInModal();
+            return;
+        }
+        // Close modal if we're leaving upload/ceremony states
+        if (this.uploadModal) {
+            this.uploadModal.destroy();
+            this.uploadModal = null;
+        }
         const body = this.container.getBody();
         if (!body)
             return;
         // Clear body
         body.innerHTML = '';
-        // Handle dark mode for certain states
+        // Handle dark mode for certain states (modal mode only)
         const containerWithDarkMode = this.container;
-        if ('setDarkMode' in containerWithDarkMode) {
-            const isDarkState = this.viewState.view === 'uploading' || this.viewState.view === 'ceremony';
+        if ('setDarkMode' in containerWithDarkMode && !this.isInlineMode) {
             containerWithDarkMode.setDarkMode(isDarkState);
-            // Show sidebar during dark states (uploading/ceremony)
             this.container.toggleSidebar(isDarkState);
         }
         switch (this.viewState.view) {
@@ -7585,6 +7604,35 @@ class UploadRenderer {
                 break;
         }
     }
+    /**
+     * Render uploading/ceremony states in a modal overlay (for inline mode).
+     * This provides the full polished experience during upload.
+     */
+    renderInModal() {
+        // Create modal if not exists
+        if (!this.uploadModal) {
+            this.uploadModal = new UploadModalContainer();
+            this.uploadModal.createLoading({ backdropBlur: this.options.backdropBlur ?? true }, () => { } // No close callback - user can't cancel during upload
+            );
+            if (this.config) {
+                this.uploadModal.updateBranding(this.config.branding);
+            }
+        }
+        const body = this.uploadModal.getBody();
+        if (!body)
+            return;
+        // 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));
+        }
+        else if (this.viewState.view === 'ceremony') {
+            body.appendChild(this.renderCeremony(this.viewState));
+        }
+    }
     renderLoading() {
         const div = document.createElement('div');
         div.className = 'svu-loading';