@sparkvault/sdk 1.8.3 → 1.9.0

package/dist/index.d.ts

@@ -398,6 +398,15 @@ interface UploadOptions {
     target?: string | HTMLElement;
     /** Override backdrop blur for this dialog (uses global config if omitted) */
     backdropBlur?: boolean;
+    /**
+     * Use minimal mode for cleaner inline experience.
+     * When true:
+     * - No dark mode transition during upload
+     * - No security sidebar during upload/ceremony
+     * - Cleaner, simpler progress visualization
+     * Defaults to true for inline mode, false for modal mode.
+     */
+    minimal?: boolean;
     /** Callback when upload completes successfully (if omitted, uses server-configured redirect) */
     onSuccess?: (result: UploadResult) => void;
     /** Callback when an error occurs (if omitted, uses server-configured redirect) */

package/dist/sparkvault.cjs.js

@@ -5719,7 +5719,7 @@ function injectUploadStyles(options) {
 function getUploadStyles(options) {
     const { backdropBlur } = options;
     const enableBlur = backdropBlur !== false;
-    // Design tokens - using light theme for upload widget (matches PublicUploader)
+    // Design tokens - using light theme for upload widget (matches SecureUploadPortal)
     const tokens = {
         // Colors
         primary: '#4F46E5',
@@ -7509,11 +7509,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.
@@ -7544,6 +7548,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() {
@@ -7555,17 +7564,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) {
@@ -7589,6 +7608,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';