@sparkvault/sdk 1.9.1 → 1.10.0

package/dist/sparkvault.esm.js

@@ -5098,8 +5098,8 @@ class IdentityRenderer {
  * Implements the Container interface for use with IdentityRenderer.
  */
 const DEFAULT_OPTIONS$1 = {
-    showHeader: true,
-    showCloseButton: true,
+    showHeader: false,
+    showCloseButton: false,
     showFooter: true,
 };
 class InlineContainer {
@@ -5290,6 +5290,36 @@ function onDomReady(callback) {
         callback();
     }
 }
+/**
+ * Execute a callback when document.body is available.
+ * Handles edge cases where body might not exist even after DOMContentLoaded
+ * (e.g., scripts with defer/async loading during parsing).
+ */
+function onBodyReady(callback) {
+    if (document.body) {
+        callback();
+    }
+    else {
+        // Body not yet available - wait for DOMContentLoaded
+        // or poll briefly as a fallback for edge cases
+        const checkBody = () => {
+            if (document.body) {
+                callback();
+            }
+            else {
+                // Rare edge case: poll for body availability
+                window.requestAnimationFrame(checkBody);
+            }
+        };
+        if (document.readyState === 'loading') {
+            document.addEventListener('DOMContentLoaded', checkBody, { once: true });
+        }
+        else {
+            // Document ready but no body yet - poll
+            window.requestAnimationFrame(checkBody);
+        }
+    }
+}
 
 /* global Element */
 /**
@@ -5451,7 +5481,11 @@ class IdentityModule {
                     });
                 });
             });
-            observer.observe(document.body, { childList: true, subtree: true });
+            // Observe document.body for dynamic elements
+            // Use onBodyReady to handle edge cases where body isn't available yet
+            onBodyReady(() => {
+                observer?.observe(document.body, { childList: true, subtree: true });
+            });
         };
         // Defer attachment until DOM is ready
         onDomReady(attachToElements);
@@ -5752,18 +5786,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 +7020,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 +7030,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);
@@ -7085,7 +7136,7 @@ class UploadModalContainer {
       <div class="svu-security-badges">
         <span class="svu-tls-badge">TLS 1.3 In Transit</span>
         <span class="svu-tls-badge">Encrypted At Rest</span>
-        <span class="svu-tls-badge">Zero Knowledge</span>
+        <span class="svu-tls-badge">Zero Trust</span>
       </div>
     `;
         sidebar.appendChild(security);
@@ -7151,8 +7202,8 @@ class UploadModalContainer {
  * Implements the UploadContainer interface for use with UploadRenderer.
  */
 const DEFAULT_OPTIONS = {
-    showHeader: true,
-    showCloseButton: true,
+    showHeader: false,
+    showCloseButton: false,
     showFooter: true,
 };
 class UploadInlineContainer {
@@ -7246,6 +7297,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 +7307,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);
@@ -7441,7 +7495,7 @@ class UploadInlineContainer {
       <div class="svu-security-badges">
         <span class="svu-tls-badge">TLS 1.3 In Transit</span>
         <span class="svu-tls-badge">Encrypted At Rest</span>
-        <span class="svu-tls-badge">Zero Knowledge</span>
+        <span class="svu-tls-badge">Zero Trust</span>
       </div>
     `;
         sidebar.appendChild(security);
@@ -7508,6 +7562,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 +7603,7 @@ class UploadRenderer {
         if (this.uploadModal) {
             this.uploadModal.destroy();
             this.uploadModal = null;
+            this.hybridModalInitialized = false;
         }
         this.container.destroy();
     }
@@ -7567,10 +7623,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 +7671,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 +7679,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));
         }
@@ -8074,45 +8146,81 @@ class UploadRenderer {
         }
     }
     async uploadWithTus(file, forgeUrl, ingotId, requestId) {
-        // Simple XHR upload with progress (tus-like behavior)
-        // Timeout: 10 minutes for large file uploads
-        const UPLOAD_TIMEOUT_MS = 10 * 60 * 1000;
-        return new Promise((resolve, reject) => {
-            const xhr = new XMLHttpRequest();
-            xhr.timeout = UPLOAD_TIMEOUT_MS;
-            xhr.upload.onprogress = (e) => {
-                if (e.lengthComputable) {
-                    const progress = Math.round((e.loaded / e.total) * 100);
-                    this.setState({
-                        view: 'uploading',
-                        file,
-                        ingotId,
-                        requestId,
-                        progress,
-                        bytesUploaded: e.loaded,
-                    });
-                    this.callbacks.onProgress?.({
-                        bytesUploaded: e.loaded,
-                        bytesTotal: e.total,
-                        percentage: progress,
-                        phase: 'uploading',
-                    });
-                }
-            };
-            xhr.onload = () => {
-                if (xhr.status >= 200 && xhr.status < 300) {
-                    resolve();
-                }
-                else {
-                    reject(new Error(`Upload failed with status ${xhr.status}`));
-                }
-            };
-            xhr.onerror = () => reject(new Error('Upload failed'));
-            xhr.ontimeout = () => reject(new Error('Upload timed out'));
-            xhr.open('POST', forgeUrl);
-            xhr.setRequestHeader('Content-Type', file.type || 'application/octet-stream');
-            xhr.send(file);
+        // tus resumable upload protocol v1.0.0
+        // Uploads file in chunks to avoid Cloudflare's 100MB request limit
+        const TUS_VERSION = '1.0.0';
+        const DEFAULT_CHUNK_SIZE = 50 * 1024 * 1024; // 50MB default, server may override
+        // Extract base URL and ISTK from forge URL
+        const url = new URL(forgeUrl);
+        const istk = url.searchParams.get('istk');
+        const baseUrl = `${url.origin}${url.pathname}`;
+        if (!istk) {
+            throw new Error('Missing ISTK in forge URL');
+        }
+        // Step 1: Create tus upload session
+        const createResponse = await fetch(baseUrl, {
+            method: 'POST',
+            headers: {
+                'Tus-Resumable': TUS_VERSION,
+                'Upload-Length': String(file.size),
+                'X-ISTK': istk,
+                'Content-Type': 'application/offset+octet-stream',
+            },
         });
+        if (!createResponse.ok) {
+            const errorText = await createResponse.text();
+            throw new Error(`Failed to create upload session: ${createResponse.status} ${errorText}`);
+        }
+        // Get upload location and chunk size from response
+        const location = createResponse.headers.get('Location');
+        const chunkSizeHeader = createResponse.headers.get('X-Chunk-Size');
+        const chunkSize = chunkSizeHeader ? parseInt(chunkSizeHeader, 10) : DEFAULT_CHUNK_SIZE;
+        if (!location) {
+            throw new Error('Server did not return upload location');
+        }
+        // Build full upload URL
+        const uploadUrl = location.startsWith('http') ? location : `${url.origin}${location}`;
+        // Step 2: Upload file in chunks
+        let offset = 0;
+        const totalSize = file.size;
+        while (offset < totalSize) {
+            const end = Math.min(offset + chunkSize, totalSize);
+            const chunk = file.slice(offset, end);
+            // Upload chunk
+            const patchResponse = await fetch(uploadUrl, {
+                method: 'PATCH',
+                headers: {
+                    'Tus-Resumable': TUS_VERSION,
+                    'Upload-Offset': String(offset),
+                    'Content-Type': 'application/offset+octet-stream',
+                },
+                body: chunk,
+            });
+            if (!patchResponse.ok) {
+                const errorText = await patchResponse.text();
+                throw new Error(`Chunk upload failed: ${patchResponse.status} ${errorText}`);
+            }
+            // Update offset from server response
+            const newOffsetHeader = patchResponse.headers.get('Upload-Offset');
+            const newOffset = newOffsetHeader ? parseInt(newOffsetHeader, 10) : end;
+            offset = newOffset;
+            // Update progress
+            const progress = Math.round((offset / totalSize) * 100);
+            this.setState({
+                view: 'uploading',
+                file,
+                ingotId,
+                requestId,
+                progress,
+                bytesUploaded: offset,
+            });
+            this.callbacks.onProgress?.({
+                bytesUploaded: offset,
+                bytesTotal: totalSize,
+                percentage: progress,
+                phase: 'uploading',
+            });
+        }
     }
     async runCeremony(file, ingotId, requestId) {
         for (let i = 0; i < CEREMONY_STEPS.length; i++) {