@sparkvault/sdk 1.1.6 → 1.8.3

package/dist/sparkvault.cjs.js

@@ -77,6 +77,7 @@ function resolveConfig(config) {
         apiBaseUrl: API_URL,
         identityBaseUrl: IDENTITY_URL,
         preloadConfig: config.preloadConfig !== false, // Default: true
+        backdropBlur: config.backdropBlur !== false, // Default: true
     };
 }
 function validateConfig(config) {
@@ -102,7 +103,7 @@ function validateConfig(config) {
  *
  * Per CLAUDE.md §7: Retries allowed only if idempotent, MUST use exponential backoff.
  */
-const DEFAULT_OPTIONS$1 = {
+const DEFAULT_OPTIONS$2 = {
     maxAttempts: 3,
     baseDelayMs: 200,
     maxDelayMs: 5000,
@@ -164,7 +165,7 @@ function sleep(ms) {
  * );
  */
 async function withRetry(fn, options = {}) {
-    const config = { ...DEFAULT_OPTIONS$1, ...options };
+    const config = { ...DEFAULT_OPTIONS$2, ...options };
     let lastError;
     for (let attempt = 0; attempt < config.maxAttempts; attempt++) {
         try {
@@ -496,7 +497,7 @@ class ExpirationTimer {
  * Base64URL Encoding/Decoding Utilities
  *
  * Centralized implementation per CLAUDE.md DRY enforcement.
- * Used across identity (WebAuthn), sparks, and RNG modules.
+ * Used by Identity (WebAuthn) and Vaults modules.
  */
 /**
  * Encode Uint8Array to base64url string (URL-safe base64 without padding)
@@ -523,35 +524,6 @@ function base64urlEncode(data) {
 function arrayBufferToBase64url(buffer) {
     return base64urlEncode(new Uint8Array(buffer));
 }
-/**
- * Decode base64url string to Uint8Array
- *
- * @param base64url - Base64url encoded string
- * @returns Decoded bytes as Uint8Array
- */
-function base64urlDecode(base64url) {
-    const base64 = base64url.replace(/-/g, '+').replace(/_/g, '/');
-    const padded = base64 + '='.repeat((4 - (base64.length % 4)) % 4);
-    const binary = atob(padded);
-    const bytes = new Uint8Array(binary.length);
-    for (let i = 0; i < binary.length; i++) {
-        bytes[i] = binary.charCodeAt(i);
-    }
-    return bytes;
-}
-/**
- * Decode base64url string to ArrayBuffer
- *
- * @param base64url - Base64url encoded string
- * @returns Decoded ArrayBuffer
- */
-function base64urlToArrayBuffer(base64url) {
-    const bytes = base64urlDecode(base64url);
-    // Create a new ArrayBuffer with exact copy (avoids TypeScript ArrayBufferLike issue)
-    const buffer = new ArrayBuffer(bytes.length);
-    new Uint8Array(buffer).set(bytes);
-    return buffer;
-}
 /**
  * Decode base64url string to UTF-8 string
  *
@@ -563,17 +535,6 @@ function base64urlToString(base64url) {
     const padded = base64 + '='.repeat((4 - (base64.length % 4)) % 4);
     return atob(padded);
 }
-/**
- * Decode base64url string to number array
- * Used by RNG module for bytes format
- *
- * @param base64url - Base64url encoded string
- * @returns Array of byte values
- */
-function base64urlToBytes(base64url) {
-    const bytes = base64urlDecode(base64url);
-    return Array.from(bytes);
-}
 
 /**
  * Identity Module Utilities
@@ -620,9 +581,9 @@ function generateState() {
  * Single responsibility: API calls only.
  */
 /** Default request timeout in milliseconds (30 seconds) */
-const DEFAULT_TIMEOUT_MS = 30000;
+const DEFAULT_TIMEOUT_MS$1 = 30000;
 class IdentityApi {
-    constructor(config, timeoutMs = DEFAULT_TIMEOUT_MS) {
+    constructor(config, timeoutMs = DEFAULT_TIMEOUT_MS$1) {
         /** Cached config promise - allows preloading and deduplication */
         this.configCache = null;
         this.config = config;
@@ -707,6 +668,26 @@ class IdentityApi {
     async checkPasskey(email) {
         return this.request('POST', '/passkey/check', { email });
     }
+    /**
+     * Build auth context params for API requests (OIDC/simple mode).
+     * Converts AuthContext to snake_case params expected by backend.
+     */
+    buildAuthContextParams(authContext) {
+        if (!authContext)
+            return {};
+        const params = {};
+        if (authContext.authRequestId) {
+            params.auth_request_id = authContext.authRequestId;
+        }
+        if (authContext.simpleMode) {
+            params.simple_mode = {
+                success_url: authContext.simpleMode.successUrl,
+                failure_url: authContext.simpleMode.failureUrl,
+                state: authContext.simpleMode.state,
+            };
+        }
+        return params;
+    }
     /**
      * Send TOTP code to email or phone
      */
@@ -714,6 +695,7 @@ class IdentityApi {
         return this.request('POST', '/totp/send', {
             recipient: params.recipient,
             method: params.method,
+            ...this.buildAuthContextParams(params.authContext),
         });
     }
     /**
@@ -724,6 +706,7 @@ class IdentityApi {
             kindling: params.kindling,
             pin: params.pin,
             recipient: params.recipient,
+            ...this.buildAuthContextParams(params.authContext),
         });
     }
     /**
@@ -764,10 +747,10 @@ class IdentityApi {
     /**
      * Start passkey verification
      */
-    async startPasskeyVerify(email) {
+    async startPasskeyVerify(email, authContext) {
         // Backend returns { options: PublicKeyCredentialRequestOptions, session: {...} }
         // Extract and flatten to match PasskeyChallengeResponse
-        const response = await this.request('POST', '/passkey/verify', { email });
+        const response = await this.request('POST', '/passkey/verify', { email, ...this.buildAuthContextParams(authContext) });
         return {
             challenge: response.options.challenge,
             rpId: response.options.rpId,
@@ -784,6 +767,7 @@ class IdentityApi {
         const assertion = params.credential.response;
         return this.request('POST', '/passkey/verify/complete', {
             session: params.session,
+            ...this.buildAuthContextParams(params.authContext),
             credential: {
                 id: params.credential.id,
                 rawId: arrayBufferToBase64url(params.credential.rawId),
@@ -809,33 +793,26 @@ class IdentityApi {
         });
         return `${this.baseUrl}/social/${provider}?${params}`;
     }
-    /**
-     * Get SAML redirect URL for enterprise provider
-     */
-    getEnterpriseAuthUrl(provider, redirectUri, state) {
-        const params = new URLSearchParams({
-            redirect_uri: redirectUri,
-            state,
-        });
-        return `${this.baseUrl}/saml/${provider}?${params}`;
-    }
     /**
      * Send SparkLink email for identity verification.
      * Includes openerOrigin for postMessage-based completion notification.
      */
-    async sendSparkLink(email) {
+    async sendSparkLink(email, authContext) {
         return this.request('POST', '/sparklink/send', {
             email,
             type: 'verify_identity',
             // Send opener origin for postMessage on verification completion
             // This allows the ceremony page to notify the SDK directly instead of polling
             openerOrigin: typeof window !== 'undefined' ? window.location.origin : undefined,
+            ...this.buildAuthContextParams(authContext),
         });
     }
     /**
      * Check SparkLink verification status (polling endpoint)
      */
-    async checkSparkLinkStatus(sparkId) {
+    async checkSparkLinkStatus(sparkId, _authContext) {
+        // For GET requests with auth context, we'd need query params, but the status endpoint
+        // doesn't need auth context - it's already stored in the sparklink record
         return this.request('GET', `/sparklink/status/${sparkId}`);
     }
 }
@@ -893,10 +870,10 @@ const METHOD_REGISTRY = {
     },
     sparklink: {
         id: 'sparklink',
-        type: 'magic_link',
+        type: 'sparklink',
         identityType: 'email',
         name: 'SparkLink',
-        description: 'Get an instant sign-in magic link via email',
+        description: 'Get an instant sign-in link via email',
         icon: 'link',
     },
     // Social providers
@@ -954,98 +931,6 @@ const METHOD_REGISTRY = {
         icon: 'linkedin',
         provider: 'linkedin',
     },
-    // Enterprise SSO
-    enterprise_okta: {
-        id: 'enterprise_okta',
-        type: 'enterprise',
-        identityType: 'email',
-        name: 'Okta',
-        description: 'Sign in with Okta SSO',
-        icon: 'okta',
-        provider: 'okta',
-    },
-    enterprise_entra: {
-        id: 'enterprise_entra',
-        type: 'enterprise',
-        identityType: 'email',
-        name: 'Microsoft Entra',
-        description: 'Sign in with Microsoft Entra ID',
-        icon: 'microsoft',
-        provider: 'entra',
-    },
-    enterprise_onelogin: {
-        id: 'enterprise_onelogin',
-        type: 'enterprise',
-        identityType: 'email',
-        name: 'OneLogin',
-        description: 'Sign in with OneLogin SSO',
-        icon: 'onelogin',
-        provider: 'onelogin',
-    },
-    enterprise_ping: {
-        id: 'enterprise_ping',
-        type: 'enterprise',
-        identityType: 'email',
-        name: 'Ping Identity',
-        description: 'Sign in with Ping Identity',
-        icon: 'ping',
-        provider: 'ping',
-    },
-    enterprise_jumpcloud: {
-        id: 'enterprise_jumpcloud',
-        type: 'enterprise',
-        identityType: 'email',
-        name: 'JumpCloud',
-        description: 'Sign in with JumpCloud SSO',
-        icon: 'jumpcloud',
-        provider: 'jumpcloud',
-    },
-    // HRIS
-    hris_bamboohr: {
-        id: 'hris_bamboohr',
-        type: 'hris',
-        identityType: 'email',
-        name: 'BambooHR',
-        description: 'Sign in with BambooHR',
-        icon: 'bamboohr',
-        provider: 'bamboohr',
-    },
-    hris_workday: {
-        id: 'hris_workday',
-        type: 'hris',
-        identityType: 'email',
-        name: 'Workday',
-        description: 'Sign in with Workday',
-        icon: 'workday',
-        provider: 'workday',
-    },
-    hris_adp: {
-        id: 'hris_adp',
-        type: 'hris',
-        identityType: 'email',
-        name: 'ADP',
-        description: 'Sign in with ADP',
-        icon: 'adp',
-        provider: 'adp',
-    },
-    hris_gusto: {
-        id: 'hris_gusto',
-        type: 'hris',
-        identityType: 'email',
-        name: 'Gusto',
-        description: 'Sign in with Gusto',
-        icon: 'gusto',
-        provider: 'gusto',
-    },
-    hris_rippling: {
-        id: 'hris_rippling',
-        type: 'hris',
-        identityType: 'email',
-        name: 'Rippling',
-        description: 'Sign in with Rippling',
-        icon: 'rippling',
-        provider: 'rippling',
-    },
 };
 /**
  * Enrich method IDs with full metadata
@@ -1079,6 +964,8 @@ class VerificationState {
         // Identity being verified
         this._recipient = '';
         this._identityType = 'email';
+        // Auth context for OIDC/simple mode flows
+        this._authContext = undefined;
         // Passkey state
         this._passkey = {
             hasPasskey: null,
@@ -1166,6 +1053,13 @@ class VerificationState {
         const allowed = this._sdkConfig?.allowedIdentityTypes ?? ['email'];
         return allowed;
     }
+    // --- Auth Context (OIDC/simple mode) ---
+    get authContext() {
+        return this._authContext;
+    }
+    setAuthContext(context) {
+        this._authContext = context;
+    }
     // --- Passkey State ---
     get passkey() {
         return this._passkey;
@@ -1226,6 +1120,7 @@ class VerificationState {
         this._viewState = { view: 'loading' };
         this._recipient = '';
         this._identityType = 'email';
+        this._authContext = undefined;
         this._passkey.hasPasskey = null;
         this._passkey.isFallbackMode = false;
         this._passkey.pendingResult = null;
@@ -1237,16 +1132,35 @@ class VerificationState {
 /**
  * Passkey Handler
  *
- * Single responsibility: WebAuthn passkey registration and verification.
- * Extracts passkey logic from IdentityRenderer for better separation of concerns.
+ * Handles WebAuthn passkey registration and verification via popup.
+ * Uses a popup window on sparkvault.com domain to ensure WebAuthn works
+ * correctly when the SDK is embedded on third-party client domains.
+ *
+ * Flow:
+ * 1. SDK opens popup to sparkvault.com/passkey/popup
+ * 2. Popup executes WebAuthn (origin = sparkvault.com matches RP ID)
+ * 3. Popup sends result via postMessage
+ * 4. SDK receives result and returns to caller
  */
+/** Popup window dimensions */
+const POPUP_WIDTH = 450;
+const POPUP_HEIGHT = 500;
+/** Timeout for popup operations (60 seconds) */
+const POPUP_TIMEOUT_MS = 60000;
 /**
- * Handles WebAuthn passkey registration and verification
+ * Handles WebAuthn passkey registration and verification via popup
  */
 class PasskeyHandler {
     constructor(api, state) {
         this.api = api;
         this.state = state;
+        // Extract base URL and account ID from the API's URL construction
+        // The API uses: `${this.config.identityBaseUrl}/${this.config.accountId}`
+        // We need to access these values for popup URL construction
+        // @ts-expect-error - accessing private config for URL construction
+        const config = api.config;
+        this.baseUrl = config.identityBaseUrl;
+        this.accountId = config.accountId;
     }
     /**
      * Check if user has registered passkeys and validate email domain
@@ -1268,119 +1182,155 @@ class PasskeyHandler {
         }
     }
     /**
-     * Register a new passkey for the user
+     * Register a new passkey for the user via popup
      */
     async register() {
-        try {
-            const challengeResponse = await this.api.startPasskeyRegister(this.state.recipient);
-            const publicKeyOptions = {
-                challenge: base64urlToArrayBuffer(challengeResponse.challenge),
-                rp: {
-                    id: challengeResponse.rpId,
-                    name: challengeResponse.rpName,
-                },
-                user: {
-                    id: base64urlToArrayBuffer(challengeResponse.userId ?? this.state.recipient),
-                    name: this.state.recipient,
-                    displayName: this.state.recipient,
-                },
-                pubKeyCredParams: [
-                    { type: 'public-key', alg: -7 }, // ES256
-                    { type: 'public-key', alg: -257 }, // RS256
-                ],
-                timeout: challengeResponse.timeout,
-                authenticatorSelection: {
-                    residentKey: 'preferred',
-                    userVerification: 'preferred',
-                },
-                attestation: 'none',
-            };
-            const credential = await navigator.credentials.create({
-                publicKey: publicKeyOptions,
-            });
-            if (!credential) {
-                return {
-                    success: false,
-                    error: 'Failed to create passkey',
-                    errorType: 'unknown',
-                };
-            }
-            const response = await this.api.completePasskeyRegister({
-                session: challengeResponse.session,
-                credential,
-            });
+        const result = await this.openPasskeyPopup('register');
+        if (result.success) {
             // Update state - user now has a passkey
             this.state.setPasskeyStatus(true);
-            return {
-                success: true,
-                result: {
-                    token: response.token,
-                    identity: response.identity,
-                    identityType: response.identity_type,
-                },
-            };
-        }
-        catch (error) {
-            return this.handleError(error);
         }
+        return result;
     }
     /**
-     * Verify user with existing passkey
+     * Verify user with existing passkey via popup
      */
     async verify() {
-        try {
-            const challengeResponse = await this.api.startPasskeyVerify(this.state.recipient);
-            const publicKeyOptions = {
-                challenge: base64urlToArrayBuffer(challengeResponse.challenge),
-                rpId: challengeResponse.rpId,
-                timeout: challengeResponse.timeout,
-                userVerification: 'preferred',
-                allowCredentials: challengeResponse.allowCredentials?.map((cred) => ({
-                    id: base64urlToArrayBuffer(cred.id),
-                    type: cred.type,
-                    transports: ['internal', 'hybrid', 'usb', 'ble', 'nfc'],
-                })),
-            };
-            const credential = await navigator.credentials.get({
-                publicKey: publicKeyOptions,
+        return this.openPasskeyPopup('verify');
+    }
+    /**
+     * Open passkey popup and wait for result
+     */
+    async openPasskeyPopup(mode) {
+        return new Promise((resolve) => {
+            // Build popup URL
+            const params = new URLSearchParams({
+                mode,
+                email: this.state.recipient,
+                origin: window.location.origin,
             });
-            if (!credential) {
-                return {
+            // Add auth context for OIDC/simple mode flows
+            const authContext = this.state.authContext;
+            if (authContext?.authRequestId) {
+                params.set('auth_request_id', authContext.authRequestId);
+            }
+            if (authContext?.simpleMode) {
+                params.set('simple_mode', 'true');
+                params.set('success_url', authContext.simpleMode.successUrl);
+                params.set('failure_url', authContext.simpleMode.failureUrl);
+                if (authContext.simpleMode.state) {
+                    params.set('state', authContext.simpleMode.state);
+                }
+            }
+            const popupUrl = `${this.baseUrl}/${this.accountId}/passkey/popup?${params}`;
+            // Calculate popup position (centered)
+            const left = Math.round((window.screen.width - POPUP_WIDTH) / 2);
+            const top = Math.round((window.screen.height - POPUP_HEIGHT) / 2);
+            // Open popup
+            const popup = window.open(popupUrl, 'sparkvault-passkey', `width=${POPUP_WIDTH},height=${POPUP_HEIGHT},left=${left},top=${top},popup=1`);
+            if (!popup) {
+                resolve({
                     success: false,
-                    error: 'Failed to verify passkey',
-                    errorType: 'unknown',
-                };
+                    error: 'Popup was blocked. Please allow popups for this site.',
+                    errorType: 'popup_blocked',
+                });
+                return;
             }
-            const response = await this.api.completePasskeyVerify({
-                session: challengeResponse.session,
-                credential,
-            });
-            return {
-                success: true,
-                result: {
-                    token: response.token,
-                    identity: response.identity,
-                    identityType: response.identity_type,
-                },
+            // Set up message listener
+            let resolved = false;
+            const cleanup = () => {
+                window.removeEventListener('message', handleMessage);
+                clearTimeout(timeoutId);
+                clearInterval(pollClosedId);
+            };
+            const handleMessage = (event) => {
+                // Validate origin - must be from sparkvault.com
+                if (!this.isValidMessageOrigin(event.origin)) {
+                    return;
+                }
+                const data = event.data;
+                // Verify message type
+                if (data?.type !== 'sparkvault-passkey-result') {
+                    return;
+                }
+                resolved = true;
+                cleanup();
+                if (data.success && data.data) {
+                    resolve({
+                        success: true,
+                        result: {
+                            token: data.data.token || '',
+                            identity: data.data.identity || this.state.recipient,
+                            identityType: data.data.identity_type || 'email',
+                            redirect: data.data.redirect,
+                        },
+                    });
+                }
+                else {
+                    resolve(this.handlePopupError(data.error, data.message));
+                }
             };
+            window.addEventListener('message', handleMessage);
+            // Timeout after 60 seconds
+            const timeoutId = setTimeout(() => {
+                if (!resolved) {
+                    resolved = true;
+                    cleanup();
+                    popup.close();
+                    resolve({
+                        success: false,
+                        error: 'Passkey operation timed out. Please try again.',
+                        errorType: 'unknown',
+                    });
+                }
+            }, POPUP_TIMEOUT_MS);
+            // Poll for popup being closed manually
+            const pollClosedId = setInterval(() => {
+                if (popup.closed && !resolved) {
+                    resolved = true;
+                    cleanup();
+                    resolve({
+                        success: false,
+                        error: 'Authentication was cancelled.',
+                        errorType: 'cancelled',
+                    });
+                }
+            }, 500);
+        });
+    }
+    /**
+     * Validate that a message origin is from sparkvault.com domain
+     */
+    isValidMessageOrigin(origin) {
+        try {
+            const url = new URL(origin);
+            const hostname = url.hostname;
+            // Allow sparkvault.com and subdomains
+            if (hostname === 'sparkvault.com' || hostname.endsWith('.sparkvault.com')) {
+                return true;
+            }
+            // Allow localhost for development
+            if (hostname === 'localhost') {
+                return true;
+            }
+            return false;
         }
-        catch (error) {
-            return this.handleError(error);
+        catch {
+            return false;
         }
     }
     /**
-     * Handle WebAuthn errors and categorize them
+     * Handle popup error response
      */
-    handleError(error) {
-        const message = error instanceof Error ? error.message : String(error);
-        if (message.includes('not allowed') || message.includes('cancelled')) {
+    handlePopupError(error, message) {
+        if (error === 'cancelled') {
             return {
                 success: false,
-                error: 'Authentication was cancelled. Please try again.',
+                error: message || 'Authentication was cancelled. Please try again.',
                 errorType: 'cancelled',
             };
         }
-        if (message.includes('No credentials')) {
+        if (message?.includes('No passkey') || message?.includes('not found')) {
             return {
                 success: false,
                 error: 'No passkey found. Create one to continue.',
@@ -1389,7 +1339,7 @@ class PasskeyHandler {
         }
         return {
             success: false,
-            error: message || 'Passkey authentication failed',
+            error: message || error || 'Passkey authentication failed',
             errorType: 'unknown',
         };
     }
@@ -1417,6 +1367,7 @@ class TotpHandler {
             const response = await this.api.sendTotp({
                 recipient: this.state.recipient,
                 method,
+                authContext: this.state.authContext,
             });
             // Update state with kindling
             this.state.setKindling(response.kindling);
@@ -1450,6 +1401,7 @@ class TotpHandler {
             const response = await this.api.sendTotp({
                 recipient: this.state.recipient,
                 method,
+                authContext: this.state.authContext,
             });
             // Update state with new kindling
             this.state.setKindling(response.kindling);
@@ -1483,6 +1435,7 @@ class TotpHandler {
                 kindling,
                 pin: code,
                 recipient: this.state.recipient,
+                authContext: this.state.authContext,
             });
             if (response.verified && response.token) {
                 return {
@@ -1491,6 +1444,7 @@ class TotpHandler {
                         token: response.token,
                         identity: response.identity ?? this.state.recipient,
                         identityType: response.identity_type ?? this.state.identityType,
+                        redirect: response.redirect,
                     },
                 };
             }
@@ -1519,11 +1473,11 @@ class TotpHandler {
 /**
  * SparkLink Handler
  *
- * Single responsibility: SparkLink (magic link) sending and status polling.
+ * Single responsibility: SparkLink sending and status polling.
  * Extracts SparkLink logic from IdentityRenderer for better separation of concerns.
  */
 /**
- * Handles SparkLink (magic link) sending and verification polling
+ * Handles SparkLink sending and verification polling
  */
 class SparkLinkHandler {
     constructor(api, state) {
@@ -1535,7 +1489,7 @@ class SparkLinkHandler {
      */
     async send() {
         try {
-            const result = await this.api.sendSparkLink(this.state.recipient);
+            const result = await this.api.sendSparkLink(this.state.recipient, this.state.authContext);
             return {
                 success: true,
                 sparkId: result.sparkId,
@@ -1562,6 +1516,7 @@ class SparkLinkHandler {
                 token: result.token,
                 identity: result.identity,
                 identityType: result.identityType,
+                redirect: result.redirect,
             };
         }
         catch {
@@ -1581,18 +1536,18 @@ class SparkLinkHandler {
  * - Professional typography with clear hierarchy
  * - Refined color palette with single accent
  */
-const STYLE_ID = 'sparkvault-identity-styles';
+const STYLE_ID$1 = 'sparkvault-identity-styles';
 /**
  * Inject modal styles into the document head.
  */
 function injectStyles(options) {
-    if (document.getElementById(STYLE_ID)) {
+    if (document.getElementById(STYLE_ID$1)) {
         updateThemeVariables(options.branding);
         updateBlur(options.backdropBlur);
         return;
     }
     const style = document.createElement('style');
-    style.id = STYLE_ID;
+    style.id = STYLE_ID$1;
     style.textContent = getStyles(options);
     document.head.appendChild(style);
 }
@@ -1681,7 +1636,6 @@ function getStyles(options) {
       width: 100%;
       max-width: 400px;
       max-height: calc(100vh - 32px);
-      overflow: hidden;
       display: flex;
       flex-direction: column;
       color: ${tokens.textPrimary};
@@ -1760,7 +1714,7 @@ function getStyles(options) {
        ======================================== */
 
     .sv-body {
-      padding: 24px;
+      padding: 24px 28px;
       overflow-y: auto;
       flex: 1;
     }
@@ -2570,7 +2524,9 @@ function getStyles(options) {
     .sv-inline-container {
       display: flex;
       flex-direction: column;
+      width: 100%;
       height: 100%;
+      box-sizing: border-box;
       background: ${tokens.bg};
       color: ${tokens.textPrimary};
       font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
@@ -2578,7 +2534,6 @@ function getStyles(options) {
       -moz-osx-font-smoothing: grayscale;
       border-radius: 12px;
       border: 1px solid ${tokens.border};
-      overflow: hidden;
     }
 
     .sv-inline-header {
@@ -2609,7 +2564,7 @@ function getStyles(options) {
       }
 
       .sv-body {
-        padding: 24px;
+        padding: 24px 28px;
       }
 
       .sv-totp-digit {
@@ -2709,7 +2664,7 @@ function createCloseIcon() {
     return svg;
 }
 /**
- * Passkey icon
+ * Passkey icon - simple key design
  */
 function createPasskeyIcon() {
     const svg = createSvgElement('0 0 56 56', 56, 56);
@@ -2720,10 +2675,23 @@ function createPasskeyIcon() {
         stroke: '#E0E7FF',
         'stroke-width': '1',
     }));
-    // Key icon
+    // Key icon - centered at 28,28
     const group = document.createElementNS('http://www.w3.org/2000/svg', 'g');
-    group.setAttribute('transform', 'translate(16, 16)');
-    group.appendChild(createPath('M12 8c-2.21 0-4 1.79-4 4 0 1.56.9 2.93 2.21 3.6L10 20v2h4v-2l-.21-4.4C15.1 14.93 16 13.56 16 12c0-2.21-1.79-4-4-4zm0 6c-1.1 0-2-.9-2-2s.9-2 2-2 2 .9 2 2-.9 2-2 2z', { fill: '#4F46E5' }));
+    group.setAttribute('transform', 'translate(28, 28)');
+    const strokeAttrs = {
+        stroke: '#4F46E5',
+        'stroke-width': '2.5',
+        'stroke-linecap': 'round',
+        'stroke-linejoin': 'round',
+        fill: 'none',
+    };
+    // Key head (circle)
+    group.appendChild(createCircle(-6, -6, 6, strokeAttrs));
+    // Key shaft
+    group.appendChild(createPath('M-1.5 -1.5L10 10', strokeAttrs));
+    // Key teeth
+    group.appendChild(createPath('M6 6L6 10', strokeAttrs));
+    group.appendChild(createPath('M10 10L10 14', strokeAttrs));
     svg.appendChild(group);
     return svg;
 }
@@ -2930,13 +2898,13 @@ function createUsersIcon() {
  * Creates, shows, hides, and destroys the modal overlay and container.
  * Does NOT handle content rendering - that's the Renderer's job.
  */
-const OVERLAY_ID = 'sparkvault-identity-overlay';
-const MODAL_ID = 'sparkvault-identity-modal';
+const OVERLAY_ID$1 = 'sparkvault-identity-overlay';
+const MODAL_ID$1 = 'sparkvault-identity-modal';
 /**
  * Default branding used for immediate modal display before config loads.
  * Uses neutral styling that works with both light and dark themes.
  */
-const DEFAULT_BRANDING = {
+const DEFAULT_BRANDING$1 = {
     companyName: '',
     logoLight: null,
     logoDark: null,
@@ -2960,7 +2928,7 @@ class ModalContainer {
      */
     createLoading(options, onClose) {
         return this.create({
-            branding: DEFAULT_BRANDING,
+            branding: DEFAULT_BRANDING$1,
             backdropBlur: options.backdropBlur,
         }, onClose);
     }
@@ -3011,13 +2979,13 @@ class ModalContainer {
         };
         injectStyles(styleOptions);
         const overlay = document.createElement('div');
-        overlay.id = OVERLAY_ID;
+        overlay.id = OVERLAY_ID$1;
         overlay.className = this.backdropBlur ? 'sv-overlay sv-blur' : 'sv-overlay';
         overlay.setAttribute('role', 'dialog');
         overlay.setAttribute('aria-modal', 'true');
         overlay.setAttribute('aria-labelledby', 'sv-modal-title');
         const modal = document.createElement('div');
-        modal.id = MODAL_ID;
+        modal.id = MODAL_ID$1;
         modal.className = 'sv-modal';
         const header = this.createHeader(options.branding);
         this.headerElement = header;
@@ -3033,6 +3001,8 @@ class ModalContainer {
         footerLink.target = '_blank';
         footerLink.rel = 'noopener noreferrer';
         footerLink.className = 'sv-footer-link';
+        footerLink.style.color = 'inherit';
+        footerLink.style.textDecoration = 'none';
         footerLink.textContent = 'SparkVault';
         footerText.appendChild(footerLink);
         footer.appendChild(footerText);
@@ -4059,6 +4029,11 @@ class PasskeyPromptView {
         const subtitle = document.createElement('p');
         subtitle.className = 'sv-subtitle';
         subtitle.innerHTML = `Next time, sign in instantly as<br><strong>${escapeHtml(this.props.email)}</strong>`;
+        // Error message if registration failed
+        const errorContainer = div();
+        if (this.props.error) {
+            errorContainer.appendChild(errorMessage(this.props.error));
+        }
         const benefitsContainer = document.createElement('div');
         benefitsContainer.className = 'sv-passkey-prompt-benefits';
         const benefitsList = document.createElement('ul');
@@ -4076,15 +4051,16 @@ class PasskeyPromptView {
         benefitsContainer.appendChild(benefitsList);
         this.addButton = document.createElement('button');
         this.addButton.className = 'sv-btn sv-btn-primary';
-        this.addButton.textContent = 'Add Passkey';
+        this.addButton.textContent = this.props.error ? 'Try Again' : 'Add Passkey';
         this.addButton.addEventListener('click', this.boundHandleAdd);
         this.skipLink = document.createElement('button');
         this.skipLink.className = 'sv-skip-link';
-        this.skipLink.textContent = 'Not now';
+        this.skipLink.textContent = this.props.error ? 'Skip for now' : 'Not now';
         this.skipLink.addEventListener('click', this.boundHandleSkip);
         container.appendChild(iconContainer);
         container.appendChild(title);
         container.appendChild(subtitle);
+        container.appendChild(errorContainer);
         container.appendChild(benefitsContainer);
         container.appendChild(this.addButton);
         container.appendChild(this.skipLink);
@@ -4153,7 +4129,7 @@ class SparkLinkWaitingView {
         // Resend button
         const resendContainer = div('sv-resend-container');
         this.resendButton = document.createElement('button');
-        this.resendButton.className = 'sv-back-link';
+        this.resendButton.className = 'sv-btn sv-btn-secondary';
         this.resendButton.textContent = 'Resend link';
         this.resendButton.addEventListener('click', this.boundHandleResend);
         resendContainer.appendChild(this.resendButton);
@@ -4386,6 +4362,10 @@ class IdentityRenderer {
         else if (options.phone) {
             this.verificationState.setIdentity(options.phone, 'phone');
         }
+        // Set auth context for OIDC/simple mode flows
+        if (options.authContext) {
+            this.verificationState.setAuthContext(options.authContext);
+        }
     }
     // Convenience accessors for state
     get recipient() {
@@ -4449,13 +4429,7 @@ class IdentityRenderer {
             }
         }
         catch (error) {
-            const err = this.normalizeError(error);
-            // Show error in modal instead of just calling error callback
-            this.setState({
-                view: 'error',
-                message: err.message,
-                code: err instanceof SparkVaultError ? err.code : 'config_error',
-            });
+            this.handleErrorWithRecovery(error, 'config_error');
         }
     }
     /**
@@ -4548,7 +4522,10 @@ class IdentityRenderer {
                     onStart: () => this.handlePasskeyStart(),
                     onBack: isFromPrompt
                         ? () => this.handlePasskeyRegistrationSkip()
-                        : () => this.showMethodSelect(),
+                        : state.mode === 'verify'
+                            // From passkey verify, enable fallback so showMethodSelect doesn't loop back
+                            ? () => this.handlePasskeyFallback()
+                            : () => this.showMethodSelect(),
                     onFallback: passkey.hasPasskey && !passkey.isFallbackMode
                         ? () => this.handlePasskeyFallback()
                         : undefined,
@@ -4559,6 +4536,7 @@ class IdentityRenderer {
                     email: state.email,
                     onAddPasskey: () => this.handlePasskeyPromptAdd(state.pendingResult),
                     onSkip: () => this.handlePasskeyPromptSkip(state.pendingResult),
+                    error: state.error,
                 });
             case 'sparklink-waiting':
                 return new SparkLinkWaitingView({
@@ -4695,7 +4673,7 @@ class IdentityRenderer {
                     });
                     break;
                 }
-                case 'magic_link': {
+                case 'sparklink': {
                     this.setState({ view: 'loading' });
                     const result = await this.sparkLinkHandler.send();
                     if (!result.success) {
@@ -4730,12 +4708,7 @@ class IdentityRenderer {
             }
         }
         catch (error) {
-            const err = this.normalizeError(error);
-            this.setState({
-                view: 'error',
-                message: err.message,
-                code: err instanceof SparkVaultError ? err.code : 'unknown',
-            });
+            this.handleErrorWithRecovery(error, 'unknown');
         }
     }
     async handleTotpSubmit(code) {
@@ -4744,6 +4717,12 @@ class IdentityRenderer {
         const currentMethod = this.verificationState.totp.method ?? 'email';
         const result = await this.totpHandler.verify(code);
         if (result.success && result.result) {
+            // Handle redirect for OIDC/simple mode flows
+            if (result.result.redirect) {
+                this.close();
+                window.location.href = result.result.redirect;
+                return;
+            }
             // Check if we should prompt for passkey registration
             if (await this.shouldShowPasskeyPrompt()) {
                 this.setState({
@@ -4757,7 +4736,32 @@ class IdentityRenderer {
             this.callbacks.onSuccess(result.result);
         }
         else {
-            // Verification failed
+            // Check if error is expiry - auto-resend if so
+            const errorMsg = result.error?.toLowerCase() ?? '';
+            if (errorMsg.includes('expired')) {
+                // Auto-resend a new code
+                const resendResult = await this.totpHandler.resend();
+                if (resendResult.success) {
+                    this.setState({
+                        view: 'totp-verify',
+                        email: this.recipient,
+                        method: currentMethod,
+                        kindling: this.verificationState.totp.kindling,
+                        error: 'Code expired. We\'ve sent a new one.',
+                    });
+                    return;
+                }
+                // Resend failed - show error
+                this.setState({
+                    view: 'totp-verify',
+                    email: this.recipient,
+                    method: currentMethod,
+                    kindling: this.verificationState.totp.kindling,
+                    error: resendResult.error ?? 'Code expired and failed to resend.',
+                });
+                return;
+            }
+            // Other verification failure
             this.setState({
                 view: 'totp-verify',
                 email: this.recipient,
@@ -4792,6 +4796,12 @@ class IdentityRenderer {
             ? await this.passkeyHandler.register()
             : await this.passkeyHandler.verify();
         if (result.success && result.result) {
+            // Handle redirect for OIDC/simple mode flows
+            if (result.result.redirect) {
+                this.close();
+                window.location.href = result.result.redirect;
+                return;
+            }
             this.close();
             this.callbacks.onSuccess(result.result);
         }
@@ -4831,6 +4841,12 @@ class IdentityRenderer {
         const pendingResult = this.verificationState.passkey.pendingResult;
         if (pendingResult) {
             this.verificationState.setPendingResult(null);
+            // Handle redirect for OIDC/simple mode flows
+            if (pendingResult.redirect) {
+                this.close();
+                window.location.href = pendingResult.redirect;
+                return;
+            }
             this.close();
             this.callbacks.onSuccess(pendingResult);
         }
@@ -4853,6 +4869,38 @@ class IdentityRenderer {
         }
         return new Error(String(error));
     }
+    /**
+     * Check if error is a session/token expiration that should redirect to identity input.
+     */
+    isSessionExpiredError(error) {
+        const message = error.message.toLowerCase();
+        const code = error instanceof SparkVaultError ? error.code : '';
+        return (message.includes('expired') ||
+            message.includes('session') ||
+            message.includes('invalid token') ||
+            message.includes('token invalid') ||
+            code === 'token_expired' ||
+            code === 'session_expired' ||
+            code === 'kindling_expired');
+    }
+    /**
+     * Handle errors - redirect to identity input for session errors, show error view otherwise.
+     */
+    handleErrorWithRecovery(error, fallbackCode) {
+        const err = this.normalizeError(error);
+        if (this.isSessionExpiredError(err)) {
+            // Session expired - let user start over
+            this.showIdentityInput('Your session has expired. Please try again.');
+        }
+        else {
+            // Other error - show error view
+            this.setState({
+                view: 'error',
+                message: err.message,
+                code: err instanceof SparkVaultError ? err.code : fallbackCode,
+            });
+        }
+    }
     /**
      * Check if we should show the passkey registration prompt after PIN verification.
      */
@@ -4882,21 +4930,33 @@ class IdentityRenderer {
         // Directly trigger passkey registration
         const result = await this.passkeyHandler.register();
         if (result.success && result.result) {
+            // Handle redirect for OIDC/simple mode flows
+            if (result.result.redirect) {
+                this.close();
+                window.location.href = result.result.redirect;
+                return;
+            }
             // Passkey created successfully - use the new token
             this.close();
             this.callbacks.onSuccess(result.result);
         }
         else if (result.errorType === 'cancelled') {
-            // User cancelled browser dialog - fall back to original result
-            this.verificationState.setPendingResult(null);
-            this.close();
-            this.callbacks.onSuccess(pendingResult);
+            // User cancelled browser dialog - go back to prompt so they can skip or try again
+            this.setState({
+                view: 'passkey-prompt',
+                email: this.recipient,
+                pendingResult,
+            });
         }
         else {
-            // Registration failed - fall back to original result
-            this.verificationState.setPendingResult(null);
-            this.close();
-            this.callbacks.onSuccess(pendingResult);
+            // Registration failed - show error with retry option
+            const errorMessage = result.error || 'Failed to create passkey. Please try again.';
+            this.setState({
+                view: 'passkey-prompt',
+                email: this.recipient,
+                pendingResult,
+                error: errorMessage,
+            });
         }
     }
     /**
@@ -4905,6 +4965,12 @@ class IdentityRenderer {
     handlePasskeyPromptSkip(pendingResult) {
         // Set 30-day cookie to suppress future prompts
         this.verificationState.dismissPasskeyPrompt();
+        // Handle redirect for OIDC/simple mode flows
+        if (pendingResult.redirect) {
+            this.close();
+            window.location.href = pendingResult.redirect;
+            return;
+        }
         // Complete the verification
         this.close();
         this.callbacks.onSuccess(pendingResult);
@@ -4924,7 +4990,7 @@ class IdentityRenderer {
                 return;
             if (event.data.type !== 'sparklink_verified')
                 return;
-            const { token, identity, identityType } = event.data;
+            const { token, identity, identityType, redirect } = event.data;
             // Validate required fields
             if (!token || !identity)
                 return;
@@ -4932,6 +4998,7 @@ class IdentityRenderer {
                 token,
                 identity,
                 identityType: identityType || 'email',
+                redirect,
             });
         };
         window.addEventListener('message', this.messageListener);
@@ -4944,6 +5011,7 @@ class IdentityRenderer {
                     token: status.token,
                     identity: status.identity,
                     identityType: status.identityType || 'email',
+                    redirect: status.redirect,
                 });
             }
         }, 2000);
@@ -4953,6 +5021,12 @@ class IdentityRenderer {
      */
     async handleSparkLinkVerified(result) {
         this.stopSparkLinkPolling();
+        // Handle redirect for OIDC/simple mode flows
+        if (result.redirect) {
+            this.close();
+            window.location.href = result.redirect;
+            return;
+        }
         // Check if we should prompt for passkey registration
         if (await this.shouldShowPasskeyPrompt()) {
             this.setState({
@@ -5027,7 +5101,7 @@ class IdentityRenderer {
  *
  * Implements the Container interface for use with IdentityRenderer.
  */
-const DEFAULT_OPTIONS = {
+const DEFAULT_OPTIONS$1 = {
     showHeader: true,
     showCloseButton: true,
     showFooter: true,
@@ -5043,7 +5117,7 @@ class InlineContainer {
         this.closeBtnClickHandler = null;
         this.effectiveTheme = 'light';
         this.targetElement = targetElement;
-        this.containerOptions = { ...DEFAULT_OPTIONS, ...options };
+        this.containerOptions = { ...DEFAULT_OPTIONS$1, ...options };
     }
     /**
      * Create the inline container with loading state.
@@ -5091,6 +5165,8 @@ class InlineContainer {
             footerLink.target = '_blank';
             footerLink.rel = 'noopener noreferrer';
             footerLink.className = 'sv-footer-link';
+            footerLink.style.color = 'inherit';
+            footerLink.style.textDecoration = 'none';
             footerLink.textContent = 'SparkVault';
             footerText.appendChild(footerLink);
             this.footer.appendChild(footerText);
@@ -5200,11 +5276,40 @@ class InlineContainer {
     }
 }
 
+/**
+ * DOM Utilities
+ *
+ * Shared utilities for DOM operations.
+ */
+/**
+ * Execute a callback when the DOM is ready.
+ * If DOM is already ready, executes immediately.
+ * Otherwise, waits for DOMContentLoaded.
+ */
+function onDomReady(callback) {
+    if (document.readyState === 'loading') {
+        document.addEventListener('DOMContentLoaded', callback, { once: true });
+    }
+    else {
+        callback();
+    }
+}
+
+/* global Element */
 /**
  * Identity Module
  *
- * Provides identity verification through a DOM-based modal interface.
- * Supports passkey, TOTP, magic link, and social authentication.
+ * Provides identity verification through dialog or inline UI.
+ * Supports passkey, TOTP, SparkLink, and social authentication.
+ *
+ * @example Dialog mode (immediate)
+ * const result = await sv.identity.verify();
+ *
+ * @example Dialog mode (attached to clicks)
+ * sv.identity.attach('.login-btn');
+ *
+ * @example Inline mode
+ * const result = await sv.identity.verify({ target: '#auth-container' });
  */
 function isTokenClaims(payload) {
     if (typeof payload !== 'object' || payload === null) {
@@ -5224,30 +5329,46 @@ function isTokenClaims(payload) {
 class IdentityModule {
     constructor(config) {
         this.renderer = null;
+        this.attachedElements = new Map();
         this.config = config;
         this.api = new IdentityApi(config);
-        // Preload config in background for instant modal opening
+        // Preload config in background for instant dialog opening
         if (config.preloadConfig) {
             this.api.preloadConfig();
         }
     }
     /**
-     * Open the identity verification modal (popup).
-     * Returns when user successfully verifies their identity.
+     * Verify user identity.
      *
-     * @example
-     * const result = await sv.identity.pop({
+     * - Without `target`: Opens a dialog (modal)
+     * - With `target`: Renders inline into the specified element
+     *
+     * @example Dialog mode
+     * const result = await sv.identity.verify();
+     * console.log(result.token, result.identity);
+     *
+     * @example Inline mode
+     * const result = await sv.identity.verify({
+     *   target: '#auth-container',
      *   email: 'user@example.com'
      * });
-     * console.log(result.token, result.identity, result.identityType);
      */
-    async pop(options = {}) {
+    async verify(options = {}) {
         if (this.renderer) {
             this.renderer.close();
         }
+        const isInline = !!options.target;
+        const container = isInline
+            ? this.createInlineContainer(options.target)
+            : new ModalContainer();
+        // Merge global config defaults with per-call options
+        const mergedOptions = {
+            ...options,
+            // Use global backdropBlur unless explicitly overridden per-call
+            backdropBlur: options.backdropBlur ?? this.config.backdropBlur,
+        };
         return new Promise((resolve, reject) => {
-            const modal = new ModalContainer();
-            this.renderer = new IdentityRenderer(modal, this.api, options, {
+            this.renderer = new IdentityRenderer(container, this.api, mergedOptions, {
                 onSuccess: (result) => {
                     options.onSuccess?.(result);
                     resolve(result);
@@ -5269,58 +5390,81 @@ class IdentityModule {
         });
     }
     /**
-     * Render identity verification inline within a target element.
-     * Unlike verify() which opens a modal popup, this embeds the UI
-     * directly into the specified element.
+     * Attach identity verification to element clicks.
+     * When any matching element is clicked, opens the verification dialog.
      *
-     * @example
-     * // Render in a div
-     * const result = await sv.identity.render({
-     *   target: document.getElementById('auth-container'),
-     *   email: 'user@example.com'
-     * });
+     * @param selector - CSS selector for elements to attach to
+     * @param options - Verification options and callbacks
+     * @returns Cleanup function to remove event listeners
      *
      * @example
-     * // Render in a custom dialog without header/footer
-     * const result = await sv.identity.render({
-     *   target: dialogContentElement,
-     *   showHeader: false,
-     *   showFooter: false
+     * const cleanup = sv.identity.attach('.login-btn', {
+     *   onSuccess: (result) => console.log('Verified:', result.identity)
      * });
+     *
+     * // Later, remove listeners
+     * cleanup();
      */
-    async render(options) {
-        if (!options.target || !(options.target instanceof HTMLElement)) {
-            throw new ValidationError('target must be a valid HTMLElement');
-        }
-        if (this.renderer) {
-            this.renderer.close();
-        }
-        return new Promise((resolve, reject) => {
-            const container = new InlineContainer(options.target, {
-                showHeader: options.showHeader,
-                showCloseButton: options.showCloseButton,
-                showFooter: options.showFooter,
-            });
-            this.renderer = new IdentityRenderer(container, this.api, options, {
-                onSuccess: (result) => {
-                    options.onSuccess?.(result);
-                    resolve(result);
-                },
-                onError: (error) => {
-                    options.onError?.(error);
-                    reject(error);
-                },
-                onCancel: () => {
-                    const error = new UserCancelledError();
-                    options.onCancel?.();
-                    reject(error);
-                },
+    attach(selector, options = {}) {
+        let observer = null;
+        const handleClick = async (event) => {
+            event.preventDefault();
+            try {
+                await this.verify({
+                    email: options.email,
+                    phone: options.phone,
+                    authContext: options.authContext,
+                    onSuccess: options.onSuccess,
+                    onError: options.onError,
+                    onCancel: options.onCancel,
+                });
+            }
+            catch {
+                // Error already handled by callbacks or will use server redirect
+            }
+        };
+        const attachToElements = () => {
+            const elements = document.querySelectorAll(selector);
+            elements.forEach((element) => {
+                element.addEventListener('click', handleClick);
+                this.attachedElements.set(element, () => {
+                    element.removeEventListener('click', handleClick);
+                });
             });
-            this.renderer.start().catch((error) => {
-                options.onError?.(error);
-                reject(error);
+            // Watch for dynamically added elements
+            observer = new MutationObserver((mutations) => {
+                mutations.forEach((mutation) => {
+                    mutation.addedNodes.forEach((node) => {
+                        if (node instanceof Element) {
+                            if (node.matches(selector)) {
+                                node.addEventListener('click', handleClick);
+                                this.attachedElements.set(node, () => {
+                                    node.removeEventListener('click', handleClick);
+                                });
+                            }
+                            // Check descendants
+                            node.querySelectorAll(selector).forEach((el) => {
+                                if (!this.attachedElements.has(el)) {
+                                    el.addEventListener('click', handleClick);
+                                    this.attachedElements.set(el, () => {
+                                        el.removeEventListener('click', handleClick);
+                                    });
+                                }
+                            });
+                        }
+                    });
+                });
             });
-        });
+            observer.observe(document.body, { childList: true, subtree: true });
+        };
+        // Defer attachment until DOM is ready
+        onDomReady(attachToElements);
+        // Return cleanup function
+        return () => {
+            observer?.disconnect();
+            this.attachedElements.forEach((cleanup) => cleanup());
+            this.attachedElements.clear();
+        };
     }
     /**
      * Verify and decode an identity token.
@@ -5328,10 +5472,6 @@ class IdentityModule {
      *
      * Note: For production use, verify the Ed25519 signature server-side
      * using the JWKS endpoint.
-     *
-     * @example
-     * const claims = await sv.identity.verifyToken(token);
-     * console.log(claims.identity, claims.identity_type, claims.method);
      */
     async verifyToken(token) {
         if (!token || typeof token !== 'string') {
@@ -5342,7 +5482,6 @@ class IdentityModule {
             throw new ValidationError('Invalid token format');
         }
         const [, payloadB64] = parts;
-        // Use centralized base64url utility (CLAUDE.md DRY)
         const payload = JSON.parse(base64urlToString(payloadB64));
         if (!isTokenClaims(payload)) {
             throw new ValidationError('Invalid token payload structure');
@@ -5358,7 +5497,7 @@ class IdentityModule {
         return payload;
     }
     /**
-     * Close the identity modal if open.
+     * Close the identity dialog/inline UI if open.
      */
     close() {
         if (this.renderer) {
@@ -5367,97 +5506,2855 @@ class IdentityModule {
         }
     }
     /**
-     * @deprecated Use `pop()` instead. Will be removed in v2.0.
+     * Resolve target to an HTMLElement.
      */
-    async verify(options = {}) {
-        return this.pop(options);
-    }
-}
-
+    createInlineContainer(target) {
+        let element;
+        if (typeof target === 'string') {
+            const found = document.querySelector(target);
+            if (!found || !(found instanceof HTMLElement)) {
+                throw new ValidationError(`Target selector "${target}" did not match any element`);
+            }
+            element = found;
+        }
+        else if (target instanceof HTMLElement) {
+            element = target;
+        }
+        else {
+            throw new ValidationError('Target must be a CSS selector string or HTMLElement');
+        }
+        return new InlineContainer(element);
+    }
+    // Deprecated methods for backwards compatibility
+    /**
+     * @deprecated Use `verify()` instead. Will be removed in v2.0.
+     */
+    async pop(options = {}) {
+        return this.verify(options);
+    }
+    /**
+     * @deprecated Use `verify({ target })` instead. Will be removed in v2.0.
+     */
+    async render(options) {
+        return this.verify(options);
+    }
+}
+
+/**
+ * Upload API
+ *
+ * API client for vault upload operations.
+ */
+/** Default request timeout in milliseconds (30 seconds) */
+const DEFAULT_TIMEOUT_MS = 30000;
+/**
+ * Error class for upload API errors.
+ */
+class UploadApiError extends SparkVaultError {
+    constructor(message, code, httpStatus) {
+        super(message, code, httpStatus);
+        this.httpStatus = httpStatus;
+        this.name = 'UploadApiError';
+    }
+}
+/**
+ * Runtime validation for VaultUploadInfoResponse.
+ * Validates required fields exist and have correct types.
+ */
+function isVaultUploadInfoResponse(data) {
+    if (typeof data !== 'object' || data === null)
+        return false;
+    const d = data;
+    return (typeof d.vault_id === 'string' &&
+        typeof d.vault_name === 'string' &&
+        typeof d.max_size_bytes === 'number' &&
+        typeof d.branding === 'object' &&
+        d.branding !== null &&
+        typeof d.branding.organization_name === 'string' &&
+        typeof d.encryption === 'object' &&
+        d.encryption !== null &&
+        typeof d.encryption.algorithm === 'string' &&
+        (d.forge_status === 'active' || d.forge_status === 'inactive'));
+}
+/**
+ * Runtime validation for InitiateUploadResponse.
+ */
+function isInitiateUploadResponse(data) {
+    if (typeof data !== 'object' || data === null)
+        return false;
+    const d = data;
+    return typeof d.forge_url === 'string' && typeof d.ingot_id === 'string';
+}
+class UploadApi {
+    constructor(config) {
+        this.config = config;
+        this.timeoutMs = config.timeout ?? DEFAULT_TIMEOUT_MS;
+    }
+    /**
+     * Get vault upload info (public endpoint).
+     */
+    async getVaultUploadInfo(vaultId) {
+        const url = `${this.config.apiBaseUrl}/v1/files/in/${vaultId}`;
+        const response = await this.request(url, { method: 'GET' });
+        if (!isVaultUploadInfoResponse(response.data)) {
+            throw new UploadApiError('Invalid vault upload info response from server', 'invalid_response', response.status);
+        }
+        const data = response.data;
+        return {
+            vaultId: data.vault_id,
+            vaultName: data.vault_name,
+            maxSizeBytes: data.max_size_bytes,
+            branding: {
+                organizationName: data.branding.organization_name,
+                logoLightUrl: data.branding.logo_light_url,
+                logoDarkUrl: data.branding.logo_dark_url,
+            },
+            encryption: {
+                algorithm: data.encryption.algorithm,
+                keyDerivation: data.encryption.key_derivation,
+                postQuantum: data.encryption.post_quantum,
+            },
+            forgeStatus: data.forge_status,
+        };
+    }
+    /**
+     * Initiate an upload to get Forge URL and ingot ID.
+     */
+    async initiateUpload(vaultId, filename, sizeBytes, contentType) {
+        const url = `${this.config.apiBaseUrl}/v1/files/in/${vaultId}/upload`;
+        const response = await this.request(url, {
+            method: 'POST',
+            body: JSON.stringify({
+                filename,
+                size_bytes: sizeBytes,
+                content_type: contentType,
+            }),
+        });
+        if (!isInitiateUploadResponse(response.data)) {
+            throw new UploadApiError('Invalid initiate upload response from server', 'invalid_response', response.status);
+        }
+        return {
+            forgeUrl: response.data.forge_url,
+            ingotId: response.data.ingot_id,
+        };
+    }
+    /**
+     * Internal request method with timeout handling and error context.
+     */
+    async request(url, options) {
+        const controller = new AbortController();
+        const timeoutId = setTimeout(() => controller.abort(), this.timeoutMs);
+        try {
+            const response = await fetch(url, {
+                method: options.method,
+                headers: {
+                    'Content-Type': 'application/json',
+                    'Accept': 'application/json',
+                },
+                body: options.body,
+                signal: controller.signal,
+            });
+            const json = await response.json();
+            if (!response.ok) {
+                // Safely extract error fields with runtime type checking
+                const errorData = typeof json === 'object' && json !== null ? json : {};
+                const errorObj = typeof errorData.error === 'object' && errorData.error !== null
+                    ? errorData.error
+                    : errorData;
+                const message = (typeof errorObj.message === 'string' ? errorObj.message : null) ??
+                    (typeof errorObj.error === 'string' ? errorObj.error : null) ??
+                    'Request failed';
+                const code = typeof errorObj.code === 'string' ? errorObj.code : 'api_error';
+                throw new UploadApiError(message, code, response.status);
+            }
+            // API responses are wrapped in { data: ..., meta: ... }
+            const data = typeof json === 'object' && json !== null && 'data' in json
+                ? json.data
+                : json;
+            return { data, status: response.status };
+        }
+        catch (error) {
+            // Re-throw SparkVault errors as-is
+            if (error instanceof SparkVaultError) {
+                throw error;
+            }
+            // Convert AbortError to TimeoutError
+            if (error instanceof DOMException && error.name === 'AbortError') {
+                throw new TimeoutError(`Request timed out after ${this.timeoutMs}ms`);
+            }
+            // Network errors with context
+            if (error instanceof TypeError) {
+                throw new NetworkError(`Network request failed: ${error.message}`, { url, method: options.method });
+            }
+            // Unknown errors - preserve message
+            throw new NetworkError(error instanceof Error
+                ? `Request failed: ${error.message}`
+                : 'Request failed: Unknown error');
+        }
+        finally {
+            clearTimeout(timeoutId);
+        }
+    }
+}
+
+/**
+ * Upload Widget Styles
+ *
+ * Enterprise-grade styling for the vault upload widget.
+ * Follows the same design principles as the identity modal.
+ */
+const STYLE_ID = 'sparkvault-upload-styles';
+/**
+ * Inject upload widget styles into the document head.
+ */
+function injectUploadStyles(options) {
+    if (document.getElementById(STYLE_ID)) {
+        return;
+    }
+    const style = document.createElement('style');
+    style.id = STYLE_ID;
+    style.textContent = getUploadStyles(options);
+    document.head.appendChild(style);
+}
+function getUploadStyles(options) {
+    const { backdropBlur } = options;
+    const enableBlur = backdropBlur !== false;
+    // Design tokens - using light theme for upload widget (matches PublicUploader)
+    const tokens = {
+        // Colors
+        primary: '#4F46E5',
+        primaryHover: '#4338CA',
+        primaryLight: 'rgba(79, 70, 229, 0.08)',
+        error: '#DC2626',
+        errorLight: '#FEF2F2',
+        errorBorder: '#FECACA',
+        success: '#059669',
+        // Backgrounds
+        bg: '#FFFFFF',
+        bgSubtle: '#FAFAFA',
+        bgHover: '#F5F5F5',
+        bgDark: '#0F0F0F',
+        bgDarkSubtle: '#171717',
+        // Borders
+        border: '#E5E5E5',
+        borderHover: '#D4D4D4',
+        borderDark: '#262626',
+        // Text
+        textPrimary: '#0A0A0A',
+        textSecondary: '#525252',
+        textMuted: '#737373',
+        textOnPrimary: '#FFFFFF',
+        textOnDark: '#FAFAFA',
+        textMutedOnDark: '#A3A3A3',
+        // Shadows
+        shadowSm: '0 1px 2px rgba(0, 0, 0, 0.04)',
+        shadowLg: '0 8px 24px rgba(0, 0, 0, 0.12), 0 0 0 1px rgba(0, 0, 0, 0.04)',
+    };
+    return `
+    /* ========================================
+       OVERLAY & MODAL CONTAINER
+       ======================================== */
+
+    .svu-overlay {
+      position: fixed;
+      inset: 0;
+      background: rgba(0, 0, 0, 0.5);
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      z-index: 999999;
+      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;
+    }
+
+    .svu-overlay.svu-blur {
+      backdrop-filter: blur(${enableBlur ? '8px' : '0'});
+      -webkit-backdrop-filter: blur(${enableBlur ? '8px' : '0'});
+    }
+
+    .svu-modal {
+      background: ${tokens.bg};
+      border-radius: 16px;
+      box-shadow: ${tokens.shadowLg};
+      width: 100%;
+      max-width: 480px;
+      max-height: calc(100vh - 32px);
+      display: flex;
+      flex-direction: column;
+      color: ${tokens.textPrimary};
+      overflow: hidden;
+    }
+
+    .svu-modal.svu-with-sidebar {
+      max-width: 900px;
+      flex-direction: row;
+    }
+
+    .svu-modal-main {
+      flex: 1;
+      display: flex;
+      flex-direction: column;
+      min-width: 0;
+    }
+
+    /* Dark card variant for uploading/ceremony states */
+    .svu-modal.svu-dark {
+      background: ${tokens.bgDark};
+      color: ${tokens.textOnDark};
+    }
+
+    /* ========================================
+       HEADER
+       ======================================== */
+
+    .svu-header {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      padding: 14px 20px;
+      border-bottom: 1px solid ${tokens.border};
+      background: ${tokens.bg};
+      flex-shrink: 0;
+    }
+
+    .svu-dark .svu-header {
+      border-bottom-color: ${tokens.borderDark};
+      background: ${tokens.bgDark};
+    }
+
+    .svu-header-title {
+      display: flex;
+      align-items: center;
+      gap: 12px;
+      min-width: 0;
+    }
+
+    .svu-logo {
+      height: 28px;
+      width: auto;
+      max-width: 140px;
+      object-fit: contain;
+      flex-shrink: 0;
+    }
+
+    .svu-company-name {
+      font-size: 15px;
+      font-weight: 600;
+      letter-spacing: -0.01em;
+      margin: 0;
+      white-space: nowrap;
+      overflow: hidden;
+      text-overflow: ellipsis;
+    }
+
+    .svu-close-btn {
+      flex-shrink: 0;
+      width: 32px;
+      height: 32px;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      background: transparent;
+      border: none;
+      border-radius: 8px;
+      cursor: pointer;
+      color: ${tokens.textMuted};
+      transition: background 0.15s ease, color 0.15s ease;
+    }
+
+    .svu-close-btn:hover {
+      background: ${tokens.bgHover};
+      color: ${tokens.textPrimary};
+    }
+
+    .svu-dark .svu-close-btn {
+      color: ${tokens.textMutedOnDark};
+    }
+
+    .svu-dark .svu-close-btn:hover {
+      background: ${tokens.bgDarkSubtle};
+      color: ${tokens.textOnDark};
+    }
+
+    /* ========================================
+       BODY
+       ======================================== */
+
+    .svu-body {
+      padding: 24px 28px;
+      overflow-y: auto;
+      flex: 1;
+    }
+
+    /* ========================================
+       FOOTER
+       ======================================== */
+
+    .svu-footer {
+      padding: 10px 20px;
+      border-top: 1px solid ${tokens.border};
+      text-align: center;
+      background: ${tokens.bgSubtle};
+      flex-shrink: 0;
+    }
+
+    .svu-dark .svu-footer {
+      border-top-color: ${tokens.borderDark};
+      background: ${tokens.bgDarkSubtle};
+    }
+
+    .svu-footer-text {
+      font-size: 10px;
+      color: ${tokens.textMuted};
+      letter-spacing: 0.02em;
+    }
+
+    .svu-dark .svu-footer-text {
+      color: ${tokens.textMutedOnDark};
+    }
+
+    .svu-footer-link {
+      color: ${tokens.textSecondary};
+      text-decoration: none;
+      font-weight: 500;
+      transition: color 0.15s ease;
+    }
+
+    .svu-footer-link:hover {
+      color: ${tokens.primary};
+    }
+
+    /* ========================================
+       LOADING STATE
+       ======================================== */
+
+    .svu-loading {
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      justify-content: center;
+      padding: 48px 24px;
+      gap: 16px;
+    }
+
+    .svu-spinner {
+      width: 28px;
+      height: 28px;
+      border: 2.5px solid ${tokens.border};
+      border-top-color: ${tokens.primary};
+      border-radius: 50%;
+      animation: svu-spin 0.7s linear infinite;
+    }
+
+    .svu-loading-text {
+      font-size: 14px;
+      color: ${tokens.textSecondary};
+      margin: 0;
+    }
+
+    @keyframes svu-spin {
+      to { transform: rotate(360deg); }
+    }
+
+    /* ========================================
+       FORM VIEW
+       ======================================== */
+
+    .svu-form-view {
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+    }
+
+    .svu-title {
+      font-size: 18px;
+      font-weight: 600;
+      letter-spacing: -0.02em;
+      line-height: 1.3;
+      margin: 0 0 6px 0;
+      text-align: center;
+      color: ${tokens.textPrimary};
+    }
+
+    .svu-dark .svu-title {
+      color: ${tokens.textOnDark};
+    }
+
+    .svu-subtitle {
+      font-size: 14px;
+      font-weight: 400;
+      line-height: 1.5;
+      color: ${tokens.textSecondary};
+      margin: 0 0 20px 0;
+      text-align: center;
+    }
+
+    .svu-subtitle strong {
+      color: ${tokens.textPrimary};
+      font-weight: 500;
+    }
+
+    /* Drop Zone */
+    .svu-drop-zone {
+      width: 100%;
+      border: 2px dashed ${tokens.border};
+      border-radius: 12px;
+      padding: 32px 24px;
+      text-align: center;
+      cursor: pointer;
+      transition: border-color 0.15s ease, background 0.15s ease;
+      margin-bottom: 16px;
+    }
+
+    .svu-drop-zone:hover {
+      border-color: ${tokens.borderHover};
+      background: ${tokens.bgSubtle};
+    }
+
+    .svu-drop-zone.svu-dragging {
+      border-color: ${tokens.primary};
+      background: ${tokens.primaryLight};
+    }
+
+    .svu-drop-zone.svu-has-file {
+      border-style: solid;
+      border-color: ${tokens.primary};
+      background: ${tokens.primaryLight};
+      cursor: default;
+    }
+
+    .svu-drop-icon {
+      color: ${tokens.textMuted};
+      margin-bottom: 12px;
+    }
+
+    .svu-drop-text {
+      font-size: 14px;
+      font-weight: 500;
+      color: ${tokens.textPrimary};
+      margin: 0 0 4px 0;
+    }
+
+    .svu-drop-subtext {
+      font-size: 13px;
+      color: ${tokens.textSecondary};
+      margin: 0 0 8px 0;
+    }
+
+    .svu-drop-hint {
+      font-size: 12px;
+      color: ${tokens.textMuted};
+      margin: 0;
+    }
+
+    /* Selected File */
+    .svu-selected-file {
+      display: flex;
+      align-items: center;
+      gap: 12px;
+      width: 100%;
+    }
+
+    .svu-file-icon {
+      color: ${tokens.primary};
+      flex-shrink: 0;
+    }
+
+    .svu-file-info {
+      flex: 1;
+      min-width: 0;
+      text-align: left;
+    }
+
+    .svu-file-name {
+      display: block;
+      font-size: 14px;
+      font-weight: 500;
+      color: ${tokens.textPrimary};
+      white-space: nowrap;
+      overflow: hidden;
+      text-overflow: ellipsis;
+    }
+
+    .svu-file-size {
+      display: block;
+      font-size: 12px;
+      color: ${tokens.textSecondary};
+    }
+
+    .svu-remove-file {
+      flex-shrink: 0;
+      width: 24px;
+      height: 24px;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      background: transparent;
+      border: none;
+      border-radius: 50%;
+      cursor: pointer;
+      font-size: 18px;
+      color: ${tokens.textMuted};
+      transition: background 0.15s ease, color 0.15s ease;
+    }
+
+    .svu-remove-file:hover {
+      background: ${tokens.bgHover};
+      color: ${tokens.error};
+    }
+
+    /* Max Size */
+    .svu-max-size {
+      font-size: 12px;
+      color: ${tokens.textMuted};
+      margin: 0 0 16px 0;
+    }
+
+    /* Upload Button */
+    .svu-btn {
+      display: inline-flex;
+      align-items: center;
+      justify-content: center;
+      gap: 8px;
+      width: 100%;
+      padding: 12px 20px;
+      font-size: 14px;
+      font-weight: 500;
+      letter-spacing: -0.005em;
+      line-height: 1.4;
+      border: none;
+      border-radius: 8px;
+      cursor: pointer;
+      transition: background 0.15s ease, transform 0.1s ease;
+      box-sizing: border-box;
+    }
+
+    .svu-btn:disabled {
+      opacity: 0.5;
+      cursor: not-allowed;
+    }
+
+    .svu-btn:active:not(:disabled) {
+      transform: scale(0.98);
+    }
+
+    .svu-btn-primary {
+      background: ${tokens.primary};
+      color: ${tokens.textOnPrimary};
+      box-shadow: ${tokens.shadowSm};
+    }
+
+    .svu-btn-primary:hover:not(:disabled) {
+      background: ${tokens.primaryHover};
+    }
+
+    .svu-btn-secondary {
+      background: ${tokens.bgSubtle};
+      color: ${tokens.textPrimary};
+      border: 1px solid ${tokens.border};
+    }
+
+    .svu-btn-secondary:hover:not(:disabled) {
+      background: ${tokens.bgHover};
+    }
+
+    /* Error Alert */
+    .svu-error-alert {
+      background: ${tokens.errorLight};
+      border: 1px solid ${tokens.errorBorder};
+      color: ${tokens.error};
+      padding: 10px 12px;
+      border-radius: 8px;
+      font-size: 13px;
+      font-weight: 450;
+      margin-bottom: 16px;
+      width: 100%;
+    }
+
+    /* Metadata Grid */
+    .svu-metadata {
+      width: 100%;
+      margin-top: 20px;
+      padding-top: 20px;
+      border-top: 1px solid ${tokens.border};
+    }
+
+    .svu-metadata h4 {
+      font-size: 12px;
+      font-weight: 600;
+      color: ${tokens.textSecondary};
+      text-transform: uppercase;
+      letter-spacing: 0.05em;
+      margin: 0 0 12px 0;
+    }
+
+    .svu-metadata-grid {
+      display: grid;
+      grid-template-columns: 1fr 1fr;
+      gap: 8px;
+    }
+
+    .svu-metadata-item {
+      font-size: 12px;
+    }
+
+    .svu-metadata-item.svu-full-width {
+      grid-column: span 2;
+    }
+
+    .svu-metadata-label {
+      display: block;
+      color: ${tokens.textMuted};
+      margin-bottom: 2px;
+    }
+
+    .svu-metadata-value {
+      display: block;
+      color: ${tokens.textPrimary};
+      font-weight: 500;
+    }
+
+    .svu-metadata-value.svu-status-active {
+      color: ${tokens.success};
+    }
+
+    /* ========================================
+       UPLOADING VIEW
+       ======================================== */
+
+    .svu-uploading-view {
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+    }
+
+    .svu-stages {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      gap: 12px;
+      margin: 24px 0;
+      width: 100%;
+    }
+
+    .svu-stage {
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      gap: 8px;
+      opacity: 0.5;
+      transition: opacity 0.3s ease;
+    }
+
+    .svu-stage.svu-active {
+      opacity: 1;
+    }
+
+    .svu-stage span {
+      font-size: 11px;
+      color: ${tokens.textMutedOnDark};
+    }
+
+    .svu-stage-sub {
+      font-size: 10px !important;
+      color: ${tokens.primary} !important;
+    }
+
+    .svu-stage-arrow {
+      width: 24px;
+      height: 2px;
+      background: ${tokens.borderDark};
+      position: relative;
+    }
+
+    .svu-stage-arrow.svu-active::after {
+      content: '';
+      position: absolute;
+      left: 0;
+      top: 0;
+      height: 100%;
+      background: ${tokens.primary};
+      animation: svu-arrow-flow 1s ease-in-out infinite;
+    }
+
+    @keyframes svu-arrow-flow {
+      0% { width: 0; }
+      50% { width: 100%; }
+      100% { width: 100%; }
+    }
+
+    /* Progress Bar */
+    .svu-progress {
+      width: 100%;
+      margin: 20px 0;
+    }
+
+    .svu-progress-bar {
+      width: 100%;
+      height: 6px;
+      background: ${tokens.borderDark};
+      border-radius: 3px;
+      overflow: hidden;
+    }
+
+    .svu-progress-fill {
+      height: 100%;
+      background: ${tokens.primary};
+      border-radius: 3px;
+      transition: width 0.3s ease;
+    }
+
+    .svu-progress-text {
+      display: flex;
+      justify-content: space-between;
+      margin-top: 8px;
+      font-size: 12px;
+      color: ${tokens.textMutedOnDark};
+    }
+
+    /* Forging Info */
+    .svu-forging-info {
+      width: 100%;
+      margin-top: 20px;
+      padding: 16px;
+      background: ${tokens.bgDarkSubtle};
+      border-radius: 8px;
+    }
+
+    .svu-forging-line {
+      font-size: 12px;
+      color: ${tokens.textMutedOnDark};
+      margin: 0 0 8px 0;
+    }
+
+    .svu-forging-line:last-child {
+      margin-bottom: 0;
+    }
+
+    .svu-mono {
+      font-family: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Monaco, monospace;
+      color: ${tokens.textOnDark};
+    }
+
+    /* ========================================
+       CEREMONY VIEW
+       ======================================== */
+
+    .svu-ceremony-view {
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+    }
+
+    .svu-ceremony-steps {
+      width: 100%;
+      margin: 20px 0;
+    }
+
+    .svu-ceremony-step {
+      display: flex;
+      align-items: center;
+      gap: 12px;
+      padding: 10px 0;
+      opacity: 0.4;
+      transition: opacity 0.3s ease;
+    }
+
+    .svu-ceremony-step.svu-active {
+      opacity: 1;
+    }
+
+    .svu-ceremony-step.svu-complete {
+      opacity: 0.7;
+    }
+
+    .svu-step-icon {
+      width: 20px;
+      height: 20px;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      color: ${tokens.primary};
+    }
+
+    .svu-step-text {
+      font-size: 13px;
+      color: ${tokens.textOnDark};
+    }
+
+    /* Spinning loader */
+    .svu-step-icon .svu-spin {
+      animation: svu-spin 0.7s linear infinite;
+    }
+
+    /* ========================================
+       COMPLETE VIEW
+       ======================================== */
+
+    .svu-complete-view {
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      animation: svu-scale-in 0.3s ease;
+    }
+
+    @keyframes svu-scale-in {
+      from {
+        opacity: 0;
+        transform: scale(0.95);
+      }
+      to {
+        opacity: 1;
+        transform: scale(1);
+      }
+    }
+
+    .svu-success-icon {
+      color: ${tokens.success};
+      margin-bottom: 16px;
+    }
+
+    .svu-success-title {
+      font-size: 20px;
+      font-weight: 600;
+      color: ${tokens.textPrimary};
+      margin: 0 0 24px 0;
+      text-align: center;
+    }
+
+    .svu-success-details {
+      width: 100%;
+      background: ${tokens.bgSubtle};
+      border-radius: 8px;
+      padding: 16px;
+      margin-bottom: 16px;
+    }
+
+    .svu-success-row {
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      padding: 8px 0;
+      font-size: 13px;
+      border-bottom: 1px solid ${tokens.border};
+    }
+
+    .svu-success-row:last-child {
+      border-bottom: none;
+    }
+
+    .svu-success-label {
+      color: ${tokens.textSecondary};
+    }
+
+    .svu-success-value {
+      color: ${tokens.textPrimary};
+      font-weight: 500;
+      display: flex;
+      align-items: center;
+      gap: 8px;
+    }
+
+    .svu-copy-btn {
+      width: 24px;
+      height: 24px;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      background: transparent;
+      border: none;
+      border-radius: 4px;
+      cursor: pointer;
+      color: ${tokens.textMuted};
+      transition: background 0.15s ease, color 0.15s ease;
+    }
+
+    .svu-copy-btn:hover {
+      background: ${tokens.bgHover};
+      color: ${tokens.primary};
+    }
+
+    .svu-success-guidance {
+      font-size: 13px;
+      color: ${tokens.textSecondary};
+      text-align: center;
+      margin: 0 0 20px 0;
+      line-height: 1.5;
+    }
+
+    /* ========================================
+       ERROR VIEW
+       ======================================== */
+
+    .svu-error-view {
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      text-align: center;
+    }
+
+    .svu-error-icon {
+      color: ${tokens.error};
+      margin-bottom: 16px;
+    }
+
+    .svu-error-title {
+      font-size: 18px;
+      font-weight: 600;
+      color: ${tokens.textPrimary};
+      margin: 0 0 8px 0;
+    }
+
+    .svu-error-message {
+      font-size: 14px;
+      color: ${tokens.textSecondary};
+      margin: 0 0 16px 0;
+      line-height: 1.5;
+    }
+
+    .svu-error-code {
+      display: inline-flex;
+      align-items: center;
+      gap: 6px;
+      padding: 6px 10px;
+      background: ${tokens.errorLight};
+      border: 1px solid ${tokens.errorBorder};
+      border-radius: 6px;
+      margin-bottom: 20px;
+    }
+
+    .svu-error-code-label {
+      font-size: 10px;
+      font-weight: 600;
+      color: #991B1B;
+      text-transform: uppercase;
+      letter-spacing: 0.05em;
+    }
+
+    .svu-error-code-value {
+      font-size: 11px;
+      font-family: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Monaco, monospace;
+      color: ${tokens.error};
+      font-weight: 500;
+    }
+
+    /* ========================================
+       SECURITY SIDEBAR
+       ======================================== */
+
+    .svu-sidebar {
+      width: 320px;
+      background: ${tokens.bgDark};
+      border-left: 1px solid ${tokens.borderDark};
+      color: ${tokens.textOnDark};
+      padding: 20px;
+      overflow-y: auto;
+      flex-shrink: 0;
+    }
+
+    .svu-sidebar-toggle {
+      display: flex;
+      align-items: center;
+      gap: 4px;
+      background: transparent;
+      border: none;
+      color: ${tokens.textMutedOnDark};
+      font-size: 12px;
+      cursor: pointer;
+      padding: 0;
+      margin-bottom: 16px;
+    }
+
+    .svu-sidebar-toggle:hover {
+      color: ${tokens.textOnDark};
+    }
+
+    .svu-sidebar-logo {
+      margin-bottom: 20px;
+    }
+
+    .svu-sidebar-logo img {
+      height: 24px;
+      width: auto;
+    }
+
+    .svu-sidebar-intro h3 {
+      font-size: 14px;
+      font-weight: 600;
+      margin: 0 0 8px 0;
+    }
+
+    .svu-sidebar-intro p {
+      font-size: 12px;
+      color: ${tokens.textMutedOnDark};
+      line-height: 1.5;
+      margin: 0 0 20px 0;
+    }
+
+    .svu-sidebar-security h4 {
+      display: flex;
+      align-items: center;
+      gap: 8px;
+      font-size: 12px;
+      font-weight: 600;
+      margin: 0 0 12px 0;
+    }
+
+    .svu-security-intro {
+      font-size: 11px;
+      color: ${tokens.textMutedOnDark};
+      line-height: 1.5;
+      margin: 0 0 16px 0;
+    }
+
+    .svu-security-intro strong {
+      color: ${tokens.textOnDark};
+    }
+
+    .svu-key-chain {
+      display: flex;
+      flex-direction: column;
+      gap: 8px;
+      margin-bottom: 16px;
+    }
+
+    .svu-key-item {
+      display: flex;
+      gap: 12px;
+      padding: 10px;
+      background: ${tokens.bgDarkSubtle};
+      border-radius: 6px;
+    }
+
+    .svu-key-number {
+      width: 20px;
+      height: 20px;
+      background: ${tokens.primary};
+      color: ${tokens.textOnPrimary};
+      border-radius: 50%;
+      font-size: 11px;
+      font-weight: 600;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      flex-shrink: 0;
+    }
+
+    .svu-key-info {
+      flex: 1;
+    }
+
+    .svu-key-name {
+      display: block;
+      font-size: 11px;
+      font-weight: 600;
+      color: ${tokens.textOnDark};
+      margin-bottom: 2px;
+    }
+
+    .svu-key-algo {
+      display: block;
+      font-size: 10px;
+      color: ${tokens.primary};
+      margin-bottom: 4px;
+    }
+
+    .svu-key-desc {
+      display: block;
+      font-size: 10px;
+      color: ${tokens.textMutedOnDark};
+      line-height: 1.4;
+    }
+
+    .svu-key-connector {
+      display: flex;
+      justify-content: center;
+      color: ${tokens.textMutedOnDark};
+    }
+
+    .svu-encryption-result {
+      display: flex;
+      gap: 8px;
+      font-size: 10px;
+      color: ${tokens.textMutedOnDark};
+      line-height: 1.5;
+      padding: 10px;
+      background: ${tokens.bgDarkSubtle};
+      border-radius: 6px;
+      margin-bottom: 16px;
+    }
+
+    .svu-encryption-result svg {
+      color: ${tokens.success};
+      flex-shrink: 0;
+    }
+
+    .svu-encryption-result strong {
+      color: ${tokens.textOnDark};
+    }
+
+    .svu-security-badges {
+      display: flex;
+      flex-wrap: wrap;
+      gap: 6px;
+    }
+
+    .svu-tls-badge {
+      font-size: 9px;
+      font-weight: 500;
+      padding: 4px 8px;
+      background: ${tokens.bgDarkSubtle};
+      border-radius: 4px;
+      color: ${tokens.textMutedOnDark};
+    }
+
+    /* ========================================
+       INLINE CONTAINER
+       ======================================== */
+
+    .svu-inline-container {
+      display: flex;
+      flex-direction: column;
+      width: 100%;
+      height: 100%;
+      box-sizing: border-box;
+      background: ${tokens.bg};
+      color: ${tokens.textPrimary};
+      font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
+      -webkit-font-smoothing: antialiased;
+      -moz-osx-font-smoothing: grayscale;
+      border-radius: 12px;
+      border: 1px solid ${tokens.border};
+      overflow: hidden;
+    }
+
+    .svu-inline-container.svu-dark {
+      background: ${tokens.bgDark};
+      color: ${tokens.textOnDark};
+      border-color: ${tokens.borderDark};
+    }
+
+    /* ========================================
+       RESPONSIVE
+       ======================================== */
+
+    @media (max-width: 768px) {
+      .svu-modal.svu-with-sidebar {
+        flex-direction: column;
+        max-width: 480px;
+      }
+
+      .svu-sidebar {
+        width: 100%;
+        border-left: none;
+        border-top: 1px solid ${tokens.borderDark};
+        max-height: 300px;
+      }
+    }
+
+    @media (max-width: 480px) {
+      .svu-modal {
+        max-width: 100%;
+        max-height: 100%;
+        border-radius: 0;
+      }
+
+      .svu-overlay {
+        padding: 0;
+      }
+
+      .svu-body {
+        padding: 20px;
+      }
+    }
+
+    /* ========================================
+       ACCESSIBILITY
+       ======================================== */
+
+    .svu-sr-only {
+      position: absolute;
+      width: 1px;
+      height: 1px;
+      padding: 0;
+      margin: -1px;
+      overflow: hidden;
+      clip: rect(0, 0, 0, 0);
+      white-space: nowrap;
+      border: 0;
+    }
+  `;
+}
+
+/**
+ * Upload Modal Container
+ *
+ * Single responsibility: DOM modal container lifecycle.
+ * Creates, shows, hides, and destroys the modal overlay and container.
+ * Does NOT handle content rendering - that's the Renderer's job.
+ */
+const OVERLAY_ID = 'sparkvault-upload-overlay';
+const MODAL_ID = 'sparkvault-upload-modal';
+/**
+ * Default branding used for immediate modal display before config loads.
+ */
+const DEFAULT_BRANDING = {
+    organizationName: '',
+    logoLightUrl: null,
+    logoDarkUrl: null,
+};
+class UploadModalContainer {
+    constructor() {
+        this.elements = null;
+        this.onCloseCallback = null;
+        this.keydownHandler = null;
+        this.overlayClickHandler = null;
+        this.closeBtnClickHandler = null;
+        this.closeBtn = null;
+        this.backdropBlur = true;
+        this.isDarkMode = false;
+        this.headerElement = null;
+        this.branding = DEFAULT_BRANDING;
+    }
+    /**
+     * Create and show the modal immediately with loading state.
+     */
+    createLoading(options, onClose) {
+        this.create({
+            branding: DEFAULT_BRANDING,
+            backdropBlur: options.backdropBlur,
+        }, onClose);
+    }
+    /**
+     * Create and show the modal container.
+     */
+    create(options, onClose) {
+        if (this.elements) {
+            return;
+        }
+        this.onCloseCallback = onClose;
+        this.backdropBlur = options.backdropBlur !== false;
+        this.branding = options.branding || DEFAULT_BRANDING;
+        injectUploadStyles({
+            branding: this.branding,
+            backdropBlur: this.backdropBlur,
+        });
+        // Create overlay
+        const overlay = document.createElement('div');
+        overlay.id = OVERLAY_ID;
+        overlay.className = this.backdropBlur ? 'svu-overlay svu-blur' : 'svu-overlay';
+        overlay.setAttribute('role', 'dialog');
+        overlay.setAttribute('aria-modal', 'true');
+        overlay.setAttribute('aria-labelledby', 'svu-modal-title');
+        // Create modal
+        const modal = document.createElement('div');
+        modal.id = MODAL_ID;
+        modal.className = 'svu-modal';
+        // Create main content area
+        const main = document.createElement('div');
+        main.className = 'svu-modal-main';
+        // Create header
+        const header = this.createHeader(this.branding);
+        this.headerElement = header;
+        // Create body
+        const body = document.createElement('div');
+        body.className = 'svu-body';
+        // Create footer
+        const footer = document.createElement('div');
+        footer.className = 'svu-footer';
+        const footerText = document.createElement('span');
+        footerText.className = 'svu-footer-text';
+        footerText.appendChild(document.createTextNode('Secured by '));
+        const footerLink = document.createElement('a');
+        footerLink.href = 'https://sparkvault.com';
+        footerLink.target = '_blank';
+        footerLink.rel = 'noopener noreferrer';
+        footerLink.className = 'svu-footer-link';
+        footerLink.textContent = 'SparkVault';
+        footerText.appendChild(footerLink);
+        footer.appendChild(footerText);
+        main.appendChild(header);
+        main.appendChild(body);
+        main.appendChild(footer);
+        modal.appendChild(main);
+        overlay.appendChild(modal);
+        // Event handlers
+        this.overlayClickHandler = (e) => {
+            if (e.target === overlay) {
+                this.handleClose();
+            }
+        };
+        overlay.addEventListener('click', this.overlayClickHandler);
+        this.keydownHandler = (e) => {
+            if (e.key === 'Escape') {
+                this.handleClose();
+            }
+        };
+        document.addEventListener('keydown', this.keydownHandler);
+        document.body.appendChild(overlay);
+        document.body.style.overflow = 'hidden';
+        this.elements = { overlay, modal, main, header, body, footer, sidebar: null };
+    }
+    createHeader(branding) {
+        const header = document.createElement('div');
+        header.className = 'svu-header';
+        const titleContainer = document.createElement('div');
+        titleContainer.className = 'svu-header-title';
+        // Use light logo for light theme (default), dark logo for dark mode
+        const logoUrl = this.isDarkMode
+            ? branding.logoDarkUrl || branding.logoLightUrl
+            : branding.logoLightUrl || branding.logoDarkUrl;
+        if (logoUrl) {
+            const logo = document.createElement('img');
+            logo.className = 'svu-logo';
+            logo.src = logoUrl;
+            logo.alt = branding.organizationName;
+            titleContainer.appendChild(logo);
+            // Screen reader title
+            const srTitle = document.createElement('span');
+            srTitle.className = 'svu-sr-only';
+            srTitle.id = 'svu-modal-title';
+            srTitle.textContent = branding.organizationName;
+            titleContainer.appendChild(srTitle);
+        }
+        else if (branding.organizationName) {
+            const companyName = document.createElement('h2');
+            companyName.className = 'svu-company-name';
+            companyName.id = 'svu-modal-title';
+            companyName.textContent = branding.organizationName;
+            titleContainer.appendChild(companyName);
+        }
+        // Close button
+        this.closeBtn = document.createElement('button');
+        this.closeBtn.className = 'svu-close-btn';
+        this.closeBtn.setAttribute('aria-label', 'Close');
+        this.closeBtn.innerHTML = `
+      <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+        <path d="M18 6L6 18M6 6l12 12"/>
+      </svg>
+    `;
+        this.closeBtnClickHandler = () => this.handleClose();
+        this.closeBtn.addEventListener('click', this.closeBtnClickHandler);
+        header.appendChild(titleContainer);
+        header.appendChild(this.closeBtn);
+        return header;
+    }
+    /**
+     * Update branding after vault config loads.
+     */
+    updateBranding(branding) {
+        if (!this.elements)
+            return;
+        this.branding = branding;
+        // Update header with real branding
+        const newHeader = this.createHeader(branding);
+        if (this.headerElement?.parentNode) {
+            this.headerElement.parentNode.replaceChild(newHeader, this.headerElement);
+        }
+        this.headerElement = newHeader;
+    }
+    /**
+     * Update backdrop blur setting.
+     */
+    updateBackdropBlur(enabled) {
+        if (!this.elements)
+            return;
+        this.backdropBlur = enabled;
+        if (enabled) {
+            this.elements.overlay.classList.add('svu-blur');
+        }
+        else {
+            this.elements.overlay.classList.remove('svu-blur');
+        }
+    }
+    /**
+     * Set dark mode for uploading/ceremony states.
+     */
+    setDarkMode(enabled) {
+        if (!this.elements)
+            return;
+        this.isDarkMode = enabled;
+        if (enabled) {
+            this.elements.modal.classList.add('svu-dark');
+        }
+        else {
+            this.elements.modal.classList.remove('svu-dark');
+        }
+        // Re-create header with correct logo
+        const newHeader = this.createHeader(this.branding);
+        if (this.headerElement?.parentNode) {
+            this.headerElement.parentNode.replaceChild(newHeader, this.headerElement);
+        }
+        this.headerElement = newHeader;
+    }
+    /**
+     * Show or hide the security sidebar.
+     */
+    toggleSidebar(show) {
+        if (!this.elements)
+            return;
+        if (show && !this.elements.sidebar) {
+            // Create sidebar
+            const sidebar = this.createSecuritySidebar();
+            this.elements.modal.classList.add('svu-with-sidebar');
+            this.elements.modal.appendChild(sidebar);
+            this.elements.sidebar = sidebar;
+        }
+        else if (!show && this.elements.sidebar) {
+            // Remove sidebar
+            this.elements.modal.classList.remove('svu-with-sidebar');
+            this.elements.sidebar.remove();
+            this.elements.sidebar = null;
+        }
+    }
+    createSecuritySidebar() {
+        const sidebar = document.createElement('div');
+        sidebar.className = 'svu-sidebar';
+        // Logo
+        const logoDiv = document.createElement('div');
+        logoDiv.className = 'svu-sidebar-logo';
+        if (this.branding.logoDarkUrl) {
+            const logo = document.createElement('img');
+            logo.src = this.branding.logoDarkUrl;
+            logo.alt = this.branding.organizationName;
+            logoDiv.appendChild(logo);
+        }
+        sidebar.appendChild(logoDiv);
+        // Intro
+        const intro = document.createElement('div');
+        intro.className = 'svu-sidebar-intro';
+        intro.innerHTML = `
+      <h3>Secure File Transfer</h3>
+      <p>This file is secured with SparkVault's advanced multi-key cryptography and end-to-end encryption.</p>
+    `;
+        sidebar.appendChild(intro);
+        // Security details
+        const security = document.createElement('div');
+        security.className = 'svu-sidebar-security';
+        security.innerHTML = `
+      <h4>
+        <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+          <path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z"/>
+        </svg>
+        SparkVault's Triple Zero-Trust
+      </h4>
+      <p class="svu-security-intro">
+        Decryption requires <strong>three independent Master Keys</strong>, held in three different physical locations, by three separate companies, all cryptographically combined in real-time.
+      </p>
+      <div class="svu-key-chain">
+        <div class="svu-key-item">
+          <div class="svu-key-number">1</div>
+          <div class="svu-key-info">
+            <span class="svu-key-name">Kyber-1024 Post-Quantum Key</span>
+            <span class="svu-key-algo">ML-KEM lattice-based encapsulation</span>
+            <span class="svu-key-desc">Quantum-resistant key exchange</span>
+          </div>
+        </div>
+        <div class="svu-key-connector">
+          <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+            <path d="M12 5v14M5 12h14"/>
+          </svg>
+        </div>
+        <div class="svu-key-item">
+          <div class="svu-key-number">2</div>
+          <div class="svu-key-info">
+            <span class="svu-key-name">X25519 Ephemeral Key</span>
+            <span class="svu-key-algo">Elliptic-curve Diffie-Hellman</span>
+            <span class="svu-key-desc">Perfect forward secrecy</span>
+          </div>
+        </div>
+        <div class="svu-key-connector">
+          <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+            <path d="M12 5v14M5 12h14"/>
+          </svg>
+        </div>
+        <div class="svu-key-item">
+          <div class="svu-key-number">3</div>
+          <div class="svu-key-info">
+            <span class="svu-key-name">HKDF-SHA512 Derived Key</span>
+            <span class="svu-key-algo">Hardware-bound key derivation</span>
+            <span class="svu-key-desc">Vault master key in secure enclave</span>
+          </div>
+        </div>
+      </div>
+      <div class="svu-encryption-result">
+        <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+          <path d="M20 6L9 17l-5-5"/>
+        </svg>
+        <span>Combined via <strong>HKDF</strong> producing <strong>AES-256-GCM</strong> authenticated cipher</span>
+      </div>
+      <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>
+      </div>
+    `;
+        sidebar.appendChild(security);
+        return sidebar;
+    }
+    handleClose() {
+        if (this.onCloseCallback) {
+            this.onCloseCallback();
+        }
+    }
+    /**
+     * Get the modal body element for content rendering.
+     */
+    getBody() {
+        return this.elements?.body ?? null;
+    }
+    /**
+     * Get the sidebar element.
+     */
+    getSidebar() {
+        return this.elements?.sidebar ?? null;
+    }
+    /**
+     * Check if the modal is currently open.
+     */
+    isOpen() {
+        return this.elements !== null;
+    }
+    /**
+     * Destroy the modal and clean up all event listeners.
+     */
+    destroy() {
+        if (this.keydownHandler) {
+            document.removeEventListener('keydown', this.keydownHandler);
+            this.keydownHandler = null;
+        }
+        if (this.elements && this.overlayClickHandler) {
+            this.elements.overlay.removeEventListener('click', this.overlayClickHandler);
+            this.overlayClickHandler = null;
+        }
+        if (this.closeBtn && this.closeBtnClickHandler) {
+            this.closeBtn.removeEventListener('click', this.closeBtnClickHandler);
+            this.closeBtnClickHandler = null;
+            this.closeBtn = null;
+        }
+        if (this.elements) {
+            this.elements.overlay.remove();
+            this.elements = null;
+        }
+        this.headerElement = null;
+        document.body.style.overflow = '';
+        this.onCloseCallback = null;
+    }
+}
+
+/**
+ * Inline Upload Container
+ *
+ * Renders upload UI inline within a target element.
+ * Unlike UploadModalContainer which creates an overlay popup, this embeds
+ * directly into the customer's page where render() was called.
+ *
+ * Implements the UploadContainer interface for use with UploadRenderer.
+ */
+const DEFAULT_OPTIONS = {
+    showHeader: true,
+    showCloseButton: true,
+    showFooter: true,
+};
+class UploadInlineContainer {
+    constructor(targetElement, options = {}) {
+        this.container = null;
+        this.header = null;
+        this.body = null;
+        this.footer = null;
+        this.sidebar = null;
+        this.closeBtn = null;
+        this.onCloseCallback = null;
+        this.closeBtnClickHandler = null;
+        this.isDarkMode = false;
+        this.branding = {
+            organizationName: '',
+            logoLightUrl: null,
+            logoDarkUrl: null,
+        };
+        this.targetElement = targetElement;
+        this.containerOptions = { ...DEFAULT_OPTIONS, ...options };
+    }
+    /**
+     * Create the inline container with loading state.
+     */
+    createLoading(_options, onClose) {
+        if (this.container) {
+            return;
+        }
+        this.onCloseCallback = onClose;
+        // Inject styles
+        injectUploadStyles({
+            branding: this.branding,
+            backdropBlur: false,
+        });
+        // Create main container
+        this.container = document.createElement('div');
+        this.container.className = 'svu-inline-container';
+        // Create header if enabled
+        if (this.containerOptions.showHeader) {
+            this.header = this.createHeader(this.branding);
+            this.container.appendChild(this.header);
+        }
+        // Create body for view content
+        this.body = document.createElement('div');
+        this.body.className = 'svu-body';
+        this.container.appendChild(this.body);
+        // Create footer if enabled
+        if (this.containerOptions.showFooter) {
+            this.footer = document.createElement('div');
+            this.footer.className = 'svu-footer';
+            const footerText = document.createElement('span');
+            footerText.className = 'svu-footer-text';
+            footerText.appendChild(document.createTextNode('Secured by '));
+            const footerLink = document.createElement('a');
+            footerLink.href = 'https://sparkvault.com';
+            footerLink.target = '_blank';
+            footerLink.rel = 'noopener noreferrer';
+            footerLink.className = 'svu-footer-link';
+            footerLink.textContent = 'SparkVault';
+            footerText.appendChild(footerLink);
+            this.footer.appendChild(footerText);
+            this.container.appendChild(this.footer);
+        }
+        // Clear target and append container
+        this.targetElement.innerHTML = '';
+        this.targetElement.appendChild(this.container);
+    }
+    /**
+     * Update branding after vault config loads.
+     */
+    updateBranding(branding) {
+        if (!this.container)
+            return;
+        this.branding = branding;
+        // Update header with real branding
+        if (this.containerOptions.showHeader && this.header) {
+            const newHeader = this.createHeader(branding);
+            this.container.replaceChild(newHeader, this.header);
+            this.header = newHeader;
+        }
+    }
+    /**
+     * Update backdrop blur setting (no-op for inline container).
+     */
+    updateBackdropBlur(_enabled) {
+        // No-op - inline containers don't have backdrop blur
+    }
+    /**
+     * Set dark mode for uploading/ceremony states.
+     */
+    setDarkMode(enabled) {
+        if (!this.container)
+            return;
+        this.isDarkMode = enabled;
+        if (enabled) {
+            this.container.classList.add('svu-dark');
+        }
+        else {
+            this.container.classList.remove('svu-dark');
+        }
+        // Re-create header with correct logo
+        if (this.containerOptions.showHeader && this.header) {
+            const newHeader = this.createHeader(this.branding);
+            this.container.replaceChild(newHeader, this.header);
+            this.header = newHeader;
+        }
+    }
+    /**
+     * Show or hide the security sidebar.
+     */
+    toggleSidebar(show) {
+        if (!this.container)
+            return;
+        if (show && !this.sidebar) {
+            // Create sidebar
+            this.sidebar = this.createSecuritySidebar();
+            this.container.classList.add('svu-with-sidebar');
+            this.container.appendChild(this.sidebar);
+        }
+        else if (!show && this.sidebar) {
+            // Remove sidebar
+            this.container.classList.remove('svu-with-sidebar');
+            this.sidebar.remove();
+            this.sidebar = null;
+        }
+    }
+    /**
+     * Get the body element for content rendering.
+     */
+    getBody() {
+        return this.body;
+    }
+    /**
+     * Get the sidebar element.
+     */
+    getSidebar() {
+        return this.sidebar;
+    }
+    /**
+     * Check if the container is currently active.
+     */
+    isOpen() {
+        return this.container !== null;
+    }
+    /**
+     * Destroy the container and clean up.
+     */
+    destroy() {
+        // Clean up close button handler
+        if (this.closeBtn && this.closeBtnClickHandler) {
+            this.closeBtn.removeEventListener('click', this.closeBtnClickHandler);
+            this.closeBtnClickHandler = null;
+            this.closeBtn = null;
+        }
+        // Clear the target element
+        if (this.container && this.container.parentNode) {
+            this.container.remove();
+        }
+        this.container = null;
+        this.header = null;
+        this.body = null;
+        this.footer = null;
+        this.sidebar = null;
+        this.onCloseCallback = null;
+    }
+    createHeader(branding) {
+        const header = document.createElement('div');
+        header.className = 'svu-header';
+        const titleContainer = document.createElement('div');
+        titleContainer.className = 'svu-header-title';
+        // Use appropriate logo based on dark mode
+        const logoUrl = this.isDarkMode
+            ? branding.logoDarkUrl || branding.logoLightUrl
+            : branding.logoLightUrl || branding.logoDarkUrl;
+        if (logoUrl) {
+            const logo = document.createElement('img');
+            logo.className = 'svu-logo';
+            logo.src = logoUrl;
+            logo.alt = branding.organizationName;
+            titleContainer.appendChild(logo);
+            // Screen reader title
+            const srTitle = document.createElement('span');
+            srTitle.className = 'svu-sr-only';
+            srTitle.textContent = branding.organizationName;
+            titleContainer.appendChild(srTitle);
+        }
+        else if (branding.organizationName) {
+            const companyName = document.createElement('h2');
+            companyName.className = 'svu-company-name';
+            companyName.textContent = branding.organizationName;
+            titleContainer.appendChild(companyName);
+        }
+        header.appendChild(titleContainer);
+        // Add close button if enabled
+        if (this.containerOptions.showCloseButton) {
+            this.closeBtn = document.createElement('button');
+            this.closeBtn.className = 'svu-close-btn';
+            this.closeBtn.setAttribute('aria-label', 'Close');
+            this.closeBtn.innerHTML = `
+        <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+          <path d="M18 6L6 18M6 6l12 12"/>
+        </svg>
+      `;
+            this.closeBtnClickHandler = () => this.handleClose();
+            this.closeBtn.addEventListener('click', this.closeBtnClickHandler);
+            header.appendChild(this.closeBtn);
+        }
+        return header;
+    }
+    createSecuritySidebar() {
+        const sidebar = document.createElement('div');
+        sidebar.className = 'svu-sidebar';
+        // Logo
+        const logoDiv = document.createElement('div');
+        logoDiv.className = 'svu-sidebar-logo';
+        if (this.branding.logoDarkUrl) {
+            const logo = document.createElement('img');
+            logo.src = this.branding.logoDarkUrl;
+            logo.alt = this.branding.organizationName;
+            logoDiv.appendChild(logo);
+        }
+        sidebar.appendChild(logoDiv);
+        // Intro
+        const intro = document.createElement('div');
+        intro.className = 'svu-sidebar-intro';
+        intro.innerHTML = `
+      <h3>Secure File Transfer</h3>
+      <p>This file is secured with SparkVault's advanced multi-key cryptography and end-to-end encryption.</p>
+    `;
+        sidebar.appendChild(intro);
+        // Security details
+        const security = document.createElement('div');
+        security.className = 'svu-sidebar-security';
+        security.innerHTML = `
+      <h4>
+        <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+          <path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z"/>
+        </svg>
+        SparkVault's Triple Zero-Trust
+      </h4>
+      <p class="svu-security-intro">
+        Decryption requires <strong>three independent Master Keys</strong>, held in three different physical locations, by three separate companies, all cryptographically combined in real-time.
+      </p>
+      <div class="svu-key-chain">
+        <div class="svu-key-item">
+          <div class="svu-key-number">1</div>
+          <div class="svu-key-info">
+            <span class="svu-key-name">Kyber-1024 Post-Quantum Key</span>
+            <span class="svu-key-algo">ML-KEM lattice-based encapsulation</span>
+            <span class="svu-key-desc">Quantum-resistant key exchange</span>
+          </div>
+        </div>
+        <div class="svu-key-connector">
+          <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+            <path d="M12 5v14M5 12h14"/>
+          </svg>
+        </div>
+        <div class="svu-key-item">
+          <div class="svu-key-number">2</div>
+          <div class="svu-key-info">
+            <span class="svu-key-name">X25519 Ephemeral Key</span>
+            <span class="svu-key-algo">Elliptic-curve Diffie-Hellman</span>
+            <span class="svu-key-desc">Perfect forward secrecy</span>
+          </div>
+        </div>
+        <div class="svu-key-connector">
+          <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+            <path d="M12 5v14M5 12h14"/>
+          </svg>
+        </div>
+        <div class="svu-key-item">
+          <div class="svu-key-number">3</div>
+          <div class="svu-key-info">
+            <span class="svu-key-name">HKDF-SHA512 Derived Key</span>
+            <span class="svu-key-algo">Hardware-bound key derivation</span>
+            <span class="svu-key-desc">Vault master key in secure enclave</span>
+          </div>
+        </div>
+      </div>
+      <div class="svu-encryption-result">
+        <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+          <path d="M20 6L9 17l-5-5"/>
+        </svg>
+        <span>Combined via <strong>HKDF</strong> producing <strong>AES-256-GCM</strong> authenticated cipher</span>
+      </div>
+      <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>
+      </div>
+    `;
+        sidebar.appendChild(security);
+        return sidebar;
+    }
+    handleClose() {
+        if (this.onCloseCallback) {
+            this.onCloseCallback();
+        }
+    }
+}
+
+/**
+ * Upload Renderer
+ *
+ * Orchestrates view state and rendering for vault upload flows.
+ * Manages the complete upload lifecycle: form, uploading, ceremony, completion.
+ */
+/**
+ * Ceremony steps for the cryptographic visualization.
+ */
+const CEREMONY_STEPS = [
+    { text: 'File received by Forge', duration: 600 },
+    { text: 'Deriving Triple Zero-Trust encryption keys', duration: 800 },
+    { text: 'Encrypting with AES-256-GCM', duration: 900 },
+    { text: 'Generating cryptographic signatures', duration: 700 },
+    { text: 'Storing in post-quantum protected vault', duration: 600 },
+    { text: 'Verifying integrity', duration: 400 },
+];
+/**
+ * Convert hex string to base64url for display.
+ */
+function hexToBase64url(hex) {
+    const bytes = new Uint8Array(hex.match(/.{2}/g).map(byte => parseInt(byte, 16)));
+    const base64 = btoa(String.fromCharCode(...bytes));
+    return base64.replace(/\+/g, '-').replace(/\//g, '_').replace(/=+$/, '');
+}
+/**
+ * Generate a request ID for display.
+ */
+function generateRequestId() {
+    const timestamp = Date.now().toString(16);
+    const random = Math.random().toString(16).substring(2, 10);
+    return `${timestamp}${random}`;
+}
+/**
+ * Format bytes to human readable string.
+ */
+function formatBytes(bytes) {
+    if (bytes === 0)
+        return '0 B';
+    const k = 1024;
+    const sizes = ['B', 'KB', 'MB', 'GB', 'TB'];
+    const i = Math.floor(Math.log(bytes) / Math.log(k));
+    return `${parseFloat((bytes / Math.pow(k, i)).toFixed(2))} ${sizes[i]}`;
+}
+class UploadRenderer {
+    constructor(container, api, options, callbacks) {
+        this.viewState = { view: 'loading' };
+        this.config = null;
+        this.selectedFile = null;
+        // File input element for selection
+        this.fileInputElement = null;
+        this.pasteHandler = null;
+        this.container = container;
+        this.api = api;
+        this.options = options;
+        this.callbacks = callbacks;
+    }
+    /**
+     * Start the upload flow.
+     */
+    async start() {
+        // Create container with loading state
+        this.container.createLoading({ backdropBlur: this.options.backdropBlur }, () => this.handleClose());
+        this.setState({ view: 'loading' });
+        try {
+            // Minimum delay for UX
+            const [config] = await Promise.all([
+                this.api.getVaultUploadInfo(this.options.vaultId),
+                new Promise(resolve => setTimeout(resolve, 1000)),
+            ]);
+            this.config = config;
+            // Update branding
+            this.container.updateBranding(config.branding);
+            // Show form
+            this.setState({ view: 'form', config });
+        }
+        catch (error) {
+            this.handleApiError(error);
+        }
+    }
+    /**
+     * Close the upload flow.
+     */
+    close() {
+        this.cleanupFileInput();
+        this.cleanupPasteHandler();
+        this.container.destroy();
+    }
+    handleClose() {
+        this.close();
+        this.callbacks.onCancel();
+    }
+    setState(state) {
+        this.viewState = state;
+        this.render();
+    }
+    render() {
+        const body = this.container.getBody();
+        if (!body)
+            return;
+        // Clear body
+        body.innerHTML = '';
+        // Handle dark mode for certain states
+        const containerWithDarkMode = this.container;
+        if ('setDarkMode' in containerWithDarkMode) {
+            const isDarkState = this.viewState.view === 'uploading' || this.viewState.view === 'ceremony';
+            containerWithDarkMode.setDarkMode(isDarkState);
+            // Show sidebar during dark states (uploading/ceremony)
+            this.container.toggleSidebar(isDarkState);
+        }
+        switch (this.viewState.view) {
+            case 'loading':
+                body.appendChild(this.renderLoading());
+                break;
+            case 'form':
+                body.appendChild(this.renderForm(this.viewState.config, this.viewState.error));
+                break;
+            case 'uploading':
+                body.appendChild(this.renderUploading(this.viewState));
+                break;
+            case 'ceremony':
+                body.appendChild(this.renderCeremony(this.viewState));
+                break;
+            case 'complete':
+                body.appendChild(this.renderComplete(this.viewState.result, this.viewState.config));
+                break;
+            case 'error':
+                body.appendChild(this.renderError(this.viewState));
+                break;
+        }
+    }
+    renderLoading() {
+        const div = document.createElement('div');
+        div.className = 'svu-loading';
+        div.innerHTML = `
+      <div class="svu-spinner"></div>
+      <p class="svu-loading-text">Establishing secure connection...</p>
+    `;
+        return div;
+    }
+    renderForm(config, error) {
+        const div = document.createElement('div');
+        div.className = 'svu-form-view';
+        // Title
+        const title = document.createElement('h2');
+        title.className = 'svu-title';
+        title.textContent = 'Cryptographically Secure File Transfer';
+        div.appendChild(title);
+        // Subtitle with vault name
+        const subtitle = document.createElement('p');
+        subtitle.className = 'svu-subtitle';
+        subtitle.innerHTML = `Destination Vault: <strong>${this.escapeHtml(config.vaultName)}</strong>`;
+        div.appendChild(subtitle);
+        // Error message
+        if (error) {
+            const alert = document.createElement('div');
+            alert.className = 'svu-error-alert';
+            alert.textContent = error;
+            div.appendChild(alert);
+        }
+        // Drop zone
+        const dropZone = document.createElement('div');
+        dropZone.className = `svu-drop-zone${this.selectedFile ? ' svu-has-file' : ''}`;
+        if (this.selectedFile) {
+            dropZone.innerHTML = `
+        <div class="svu-selected-file">
+          <div class="svu-file-icon">
+            <svg width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5">
+              <path d="M14 2H6a2 2 0 00-2 2v16a2 2 0 002 2h12a2 2 0 002-2V8z"/>
+              <path d="M14 2v6h6"/>
+            </svg>
+          </div>
+          <div class="svu-file-info">
+            <span class="svu-file-name">${this.escapeHtml(this.selectedFile.name)}</span>
+            <span class="svu-file-size">${formatBytes(this.selectedFile.size)}</span>
+          </div>
+          <button class="svu-remove-file" aria-label="Remove file">&times;</button>
+        </div>
+      `;
+            const removeBtn = dropZone.querySelector('.svu-remove-file');
+            if (removeBtn) {
+                removeBtn.addEventListener('click', (e) => {
+                    e.stopPropagation();
+                    this.selectedFile = null;
+                    this.render();
+                });
+            }
+        }
+        else {
+            dropZone.innerHTML = `
+        <div class="svu-drop-icon">
+          <svg width="48" height="48" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5">
+            <path d="M21 15v4a2 2 0 01-2 2H5a2 2 0 01-2-2v-4"/>
+            <path d="M17 8l-5-5-5 5"/>
+            <path d="M12 3v12"/>
+          </svg>
+        </div>
+        <p class="svu-drop-text">Drag & drop a file here</p>
+        <p class="svu-drop-subtext">or click to select</p>
+        <p class="svu-drop-hint">Paste from clipboard also supported (Ctrl+V)</p>
+      `;
+        }
+        // Drop zone events
+        dropZone.addEventListener('dragover', (e) => {
+            e.preventDefault();
+            dropZone.classList.add('svu-dragging');
+        });
+        dropZone.addEventListener('dragleave', (e) => {
+            e.preventDefault();
+            dropZone.classList.remove('svu-dragging');
+        });
+        dropZone.addEventListener('drop', (e) => {
+            e.preventDefault();
+            dropZone.classList.remove('svu-dragging');
+            const file = e.dataTransfer?.files[0];
+            if (file) {
+                this.handleFileSelect(file, config);
+            }
+        });
+        dropZone.addEventListener('click', () => {
+            if (!this.selectedFile) {
+                this.openFileSelector(config);
+            }
+        });
+        div.appendChild(dropZone);
+        // Max size
+        const maxSize = document.createElement('p');
+        maxSize.className = 'svu-max-size';
+        maxSize.textContent = `Max upload size: ${formatBytes(config.maxSizeBytes)}`;
+        div.appendChild(maxSize);
+        // Upload button
+        if (this.selectedFile) {
+            const uploadBtn = document.createElement('button');
+            uploadBtn.className = 'svu-btn svu-btn-primary';
+            uploadBtn.textContent = 'Upload Securely';
+            uploadBtn.onclick = () => this.startUpload(config);
+            div.appendChild(uploadBtn);
+        }
+        // Metadata section
+        const metadata = document.createElement('div');
+        metadata.className = 'svu-metadata';
+        metadata.innerHTML = `
+      <h4>Transfer Details</h4>
+      <div class="svu-metadata-grid">
+        <div class="svu-metadata-item">
+          <span class="svu-metadata-label">Recipient</span>
+          <span class="svu-metadata-value">${this.escapeHtml(config.branding.organizationName)}</span>
+        </div>
+        <div class="svu-metadata-item">
+          <span class="svu-metadata-label">Vault</span>
+          <span class="svu-metadata-value">${this.escapeHtml(config.vaultName)}</span>
+        </div>
+        <div class="svu-metadata-item svu-full-width">
+          <span class="svu-metadata-label">Vault ID</span>
+          <span class="svu-metadata-value">${this.escapeHtml(config.vaultId)}</span>
+        </div>
+        <div class="svu-metadata-item">
+          <span class="svu-metadata-label">Encryption</span>
+          <span class="svu-metadata-value">${this.escapeHtml(config.encryption.algorithm)}</span>
+        </div>
+        <div class="svu-metadata-item">
+          <span class="svu-metadata-label">Key Derivation</span>
+          <span class="svu-metadata-value">${this.escapeHtml(config.encryption.keyDerivation)}</span>
+        </div>
+        <div class="svu-metadata-item">
+          <span class="svu-metadata-label">Post-Quantum</span>
+          <span class="svu-metadata-value">${this.escapeHtml(config.encryption.postQuantum)}</span>
+        </div>
+        <div class="svu-metadata-item">
+          <span class="svu-metadata-label">Forge Status</span>
+          <span class="svu-metadata-value ${config.forgeStatus === 'active' ? 'svu-status-active' : ''}">
+            ${config.forgeStatus === 'active' ? '● Active' : '○ Inactive'}
+          </span>
+        </div>
+      </div>
+    `;
+        div.appendChild(metadata);
+        // Setup paste handler
+        this.setupPasteHandler(config);
+        return div;
+    }
+    renderUploading(state) {
+        const div = document.createElement('div');
+        div.className = 'svu-uploading-view';
+        const displayIngotId = hexToBase64url(state.ingotId.replace('ing_', ''));
+        div.innerHTML = `
+      <h2 class="svu-title">Streaming & Encrypting</h2>
+
+      <div class="svu-stages">
+        <div class="svu-stage svu-active">
+          <svg width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5">
+            <rect x="2" y="3" width="20" height="18" rx="2"/>
+            <path d="M2 9h20"/>
+            <circle cx="6" cy="6" r="1" fill="currentColor"/>
+            <circle cx="10" cy="6" r="1" fill="currentColor"/>
+          </svg>
+          <span>Your Browser</span>
+        </div>
+        <div class="svu-stage-arrow svu-active"></div>
+        <div class="svu-stage svu-active">
+          <svg width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5">
+            <path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z"/>
+          </svg>
+          <span>SparkVault</span>
+          <span class="svu-stage-sub">Encrypting</span>
+        </div>
+        <div class="svu-stage-arrow"></div>
+        <div class="svu-stage">
+          <svg width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5">
+            <rect x="3" y="3" width="18" height="18" rx="2"/>
+            <circle cx="12" cy="12" r="3"/>
+            <path d="M12 9V6M12 18v-3M9 12H6M18 12h-3"/>
+          </svg>
+          <span>${this.escapeHtml(this.config?.branding.organizationName || '')}</span>
+        </div>
+      </div>
+
+      <div class="svu-progress">
+        <div class="svu-progress-bar">
+          <div class="svu-progress-fill" style="width: ${state.progress}%"></div>
+        </div>
+        <div class="svu-progress-text">
+          <span>${state.progress}%</span>
+          <span>${formatBytes(state.bytesUploaded)} / ${formatBytes(state.file.size)}</span>
+        </div>
+      </div>
+
+      <div class="svu-forging-info">
+        <p class="svu-forging-line">Forging Ingot ID: <span class="svu-mono">${displayIngotId}</span></p>
+        <p class="svu-forging-line">Secure Transfer Channel: <span class="svu-mono">${state.requestId}</span></p>
+      </div>
+    `;
+        return div;
+    }
+    renderCeremony(state) {
+        const div = document.createElement('div');
+        div.className = 'svu-ceremony-view';
+        const displayIngotId = hexToBase64url(state.ingotId.replace('ing_', ''));
+        let stepsHtml = '';
+        CEREMONY_STEPS.forEach((step, index) => {
+            const isComplete = index < state.step;
+            const isActive = index === state.step;
+            stepsHtml += `
+        <div class="svu-ceremony-step ${isComplete ? 'svu-complete' : ''} ${isActive ? 'svu-active' : ''}">
+          <span class="svu-step-icon">
+            ${isComplete
+                ? '<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M20 6L9 17l-5-5"/></svg>'
+                : isActive
+                    ? '<svg class="svu-spin" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M12 2v4M12 18v4M4.93 4.93l2.83 2.83M16.24 16.24l2.83 2.83M2 12h4M18 12h4M4.93 19.07l2.83-2.83M16.24 7.76l2.83-2.83"/></svg>'
+                    : ''}
+          </span>
+          <span class="svu-step-text">${step.text}</span>
+        </div>
+      `;
+        });
+        div.innerHTML = `
+      <h2 class="svu-title">Securing Your File</h2>
+
+      <div class="svu-ceremony-steps">
+        ${stepsHtml}
+      </div>
+
+      <div class="svu-forging-info">
+        <p class="svu-forging-line">Forging Ingot ID: <span class="svu-mono">${displayIngotId}</span></p>
+        <p class="svu-forging-line">Secure Transfer Channel: <span class="svu-mono">${state.requestId}</span></p>
+      </div>
+    `;
+        return div;
+    }
+    renderComplete(result, config) {
+        const div = document.createElement('div');
+        div.className = 'svu-complete-view';
+        div.innerHTML = `
+      <div class="svu-success-icon">
+        <svg width="64" height="64" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5">
+          <path d="M22 11.08V12a10 10 0 1 1-5.93-9.14"/>
+          <path d="M22 4L12 14.01l-3-3"/>
+        </svg>
+      </div>
+
+      <h2 class="svu-success-title">Your file has been securely sent!</h2>
+
+      <div class="svu-success-details">
+        <div class="svu-success-row">
+          <span class="svu-success-label">Ingot ID</span>
+          <span class="svu-success-value svu-mono">
+            ${this.escapeHtml(result.ingotId)}
+            <button class="svu-copy-btn" aria-label="Copy Ingot ID">
+              <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                <rect x="9" y="9" width="13" height="13" rx="2" ry="2"/>
+                <path d="M5 15H4a2 2 0 01-2-2V4a2 2 0 012-2h9a2 2 0 012 2v1"/>
+              </svg>
+            </button>
+          </span>
+        </div>
+        <div class="svu-success-row">
+          <span class="svu-success-label">File</span>
+          <span class="svu-success-value">${this.escapeHtml(result.filename)}</span>
+        </div>
+        <div class="svu-success-row">
+          <span class="svu-success-label">Size</span>
+          <span class="svu-success-value">${formatBytes(result.sizeBytes)}</span>
+        </div>
+        <div class="svu-success-row">
+          <span class="svu-success-label">Timestamp</span>
+          <span class="svu-success-value svu-mono">${this.escapeHtml(result.uploadTime)}</span>
+        </div>
+        <div class="svu-success-row">
+          <span class="svu-success-label">Encryption</span>
+          <span class="svu-success-value">AES-256-GCM</span>
+        </div>
+      </div>
+
+      <p class="svu-success-guidance">
+        ${this.escapeHtml(config.branding.organizationName)} has been notified and can access this file
+        from their SparkVault dashboard. Save the Ingot ID above for your records.
+      </p>
+
+      <button class="svu-btn svu-btn-secondary">
+        <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+          <path d="M1 4v6h6M23 20v-6h-6"/>
+          <path d="M20.49 9A9 9 0 005.64 5.64L1 10m22 4l-4.64 4.36A9 9 0 013.51 15"/>
+        </svg>
+        Upload Another File
+      </button>
+    `;
+        // Copy button handler
+        const copyBtn = div.querySelector('.svu-copy-btn');
+        if (copyBtn) {
+            copyBtn.addEventListener('click', () => {
+                navigator.clipboard.writeText(result.ingotId);
+            });
+        }
+        // Upload another handler
+        const uploadAnotherBtn = div.querySelector('.svu-btn-secondary');
+        if (uploadAnotherBtn) {
+            uploadAnotherBtn.addEventListener('click', () => {
+                this.selectedFile = null;
+                this.setState({ view: 'form', config });
+            });
+        }
+        return div;
+    }
+    renderError(state) {
+        const div = document.createElement('div');
+        div.className = 'svu-error-view';
+        const statusCode = state.httpStatus || 404;
+        const statusText = statusCode === 402 ? 'Service Unavailable' : 'Resource Not Found';
+        div.innerHTML = `
+      <div class="svu-error-icon">
+        <svg width="64" height="64" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5">
+          <circle cx="12" cy="12" r="10"/>
+          <path d="M12 8v4M12 16h.01"/>
+        </svg>
+      </div>
+
+      <h2 class="svu-error-title">${statusCode} - ${statusText}</h2>
+
+      <p class="svu-error-message">${this.escapeHtml(state.message)}</p>
+
+      <div class="svu-error-code">
+        <span class="svu-error-code-label">Code</span>
+        <span class="svu-error-code-value">${this.escapeHtml(state.code)}</span>
+      </div>
+    `;
+        return div;
+    }
+    handleFileSelect(file, config) {
+        // Validate file size
+        if (file.size > config.maxSizeBytes) {
+            this.setState({
+                view: 'form',
+                config,
+                error: `File size exceeds maximum allowed (${formatBytes(config.maxSizeBytes)})`,
+            });
+            return;
+        }
+        this.selectedFile = file;
+        this.setState({ view: 'form', config });
+    }
+    openFileSelector(config) {
+        this.cleanupFileInput();
+        this.fileInputElement = document.createElement('input');
+        this.fileInputElement.type = 'file';
+        this.fileInputElement.style.display = 'none';
+        this.fileInputElement.onchange = () => {
+            const file = this.fileInputElement?.files?.[0];
+            if (file) {
+                this.handleFileSelect(file, config);
+            }
+        };
+        document.body.appendChild(this.fileInputElement);
+        this.fileInputElement.click();
+    }
+    cleanupFileInput() {
+        if (this.fileInputElement) {
+            this.fileInputElement.remove();
+            this.fileInputElement = null;
+        }
+    }
+    setupPasteHandler(config) {
+        // Remove any existing handler first
+        this.cleanupPasteHandler();
+        this.pasteHandler = (e) => {
+            const items = e.clipboardData?.items;
+            if (!items)
+                return;
+            for (const item of items) {
+                if (item.kind === 'file') {
+                    const file = item.getAsFile();
+                    if (file) {
+                        this.handleFileSelect(file, config);
+                        break;
+                    }
+                }
+            }
+        };
+        document.addEventListener('paste', this.pasteHandler);
+    }
+    cleanupPasteHandler() {
+        if (this.pasteHandler) {
+            document.removeEventListener('paste', this.pasteHandler);
+            this.pasteHandler = null;
+        }
+    }
+    async startUpload(config) {
+        if (!this.selectedFile)
+            return;
+        const file = this.selectedFile;
+        const requestId = generateRequestId();
+        try {
+            // Initiate upload
+            const { forgeUrl, ingotId } = await this.api.initiateUpload(config.vaultId, file.name, file.size, file.type || 'application/octet-stream');
+            // Show uploading state
+            this.setState({
+                view: 'uploading',
+                file,
+                ingotId,
+                requestId,
+                progress: 0,
+                bytesUploaded: 0,
+            });
+            // Upload file using tus (resumable upload)
+            await this.uploadWithTus(file, forgeUrl, ingotId, requestId);
+            // Run ceremony animation
+            await this.runCeremony(file, ingotId, requestId);
+            // Complete
+            const now = new Date();
+            const uploadTime = `${now.getUTCFullYear()}-${String(now.getUTCMonth() + 1).padStart(2, '0')}-${String(now.getUTCDate()).padStart(2, '0')} ${String(now.getUTCHours()).padStart(2, '0')}:${String(now.getUTCMinutes()).padStart(2, '0')}:${String(now.getUTCSeconds()).padStart(2, '0')} UTC`;
+            const result = {
+                ingotId,
+                vaultId: config.vaultId,
+                filename: file.name,
+                sizeBytes: file.size,
+                uploadTime,
+            };
+            // Notify complete phase
+            this.callbacks.onProgress?.({
+                bytesUploaded: file.size,
+                bytesTotal: file.size,
+                percentage: 100,
+                phase: 'complete',
+            });
+            this.setState({ view: 'complete', result, config });
+            // Notify success
+            this.callbacks.onSuccess(result);
+        }
+        catch (error) {
+            this.handleApiError(error);
+        }
+    }
+    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);
+        });
+    }
+    async runCeremony(file, ingotId, requestId) {
+        for (let i = 0; i < CEREMONY_STEPS.length; i++) {
+            this.setState({
+                view: 'ceremony',
+                file,
+                ingotId,
+                requestId,
+                step: i,
+                complete: false,
+            });
+            this.callbacks.onProgress?.({
+                bytesUploaded: file.size,
+                bytesTotal: file.size,
+                percentage: 100,
+                phase: 'ceremony',
+            });
+            await new Promise(resolve => setTimeout(resolve, CEREMONY_STEPS[i].duration));
+        }
+        // Mark complete
+        this.setState({
+            view: 'ceremony',
+            file,
+            ingotId,
+            requestId,
+            step: CEREMONY_STEPS.length,
+            complete: true,
+        });
+        await new Promise(resolve => setTimeout(resolve, 500));
+    }
+    handleApiError(error) {
+        if (error instanceof UploadApiError) {
+            // Handle specific HTTP status codes
+            if (error.httpStatus === 404) {
+                this.setState({
+                    view: 'error',
+                    message: 'The requested upload endpoint could not be located. This may occur if the upload link has expired, been disabled, or was entered incorrectly.',
+                    code: 'NOT_FOUND',
+                    httpStatus: 404,
+                });
+            }
+            else if (error.httpStatus === 402) {
+                this.setState({
+                    view: 'error',
+                    message: 'This upload endpoint has been temporarily disabled due to an account billing issue. Please contact the organization\'s administrator.',
+                    code: 'PAYMENT_REQUIRED',
+                    httpStatus: 402,
+                });
+            }
+            else {
+                this.setState({
+                    view: 'error',
+                    message: error.message,
+                    code: error.code,
+                    httpStatus: error.httpStatus,
+                });
+            }
+            this.callbacks.onError(error);
+        }
+        else if (error instanceof Error) {
+            this.setState({
+                view: 'error',
+                message: error.message,
+                code: 'UNKNOWN_ERROR',
+            });
+            this.callbacks.onError(error);
+        }
+        else {
+            const err = new Error('An unexpected error occurred');
+            this.setState({
+                view: 'error',
+                message: err.message,
+                code: 'UNKNOWN_ERROR',
+            });
+            this.callbacks.onError(err);
+        }
+    }
+    escapeHtml(str) {
+        const div = document.createElement('div');
+        div.textContent = str;
+        return div.innerHTML;
+    }
+}
+
+/* global Element */
 /**
- * Sparks Module
+ * Vault Upload Module
  *
- * Create and read ephemeral encrypted secrets.
- * Sparks are destroyed after being read (burn-on-read).
+ * Embedded upload widget for vaults with public upload enabled.
+ *
+ * @example Dialog mode (immediate)
+ * const result = await sv.vaults.upload({ vaultId: 'vlt_abc123' });
+ *
+ * @example Dialog mode (attached to clicks)
+ * sv.vaults.upload.attach('.upload-btn', { vaultId: 'vlt_abc123' });
+ *
+ * @example Inline mode
+ * const result = await sv.vaults.upload({
+ *   vaultId: 'vlt_abc123',
+ *   target: '#upload-container'
+ * });
  */
-class SparksModule {
-    constructor(http) {
-        this.http = http;
+class VaultUploadModule {
+    constructor(config) {
+        this.renderer = null;
+        this.attachedElements = new Map();
+        this.config = config;
+        this.api = new UploadApi(config);
     }
     /**
-     * Create an ephemeral encrypted secret.
+     * Upload a file to a vault.
      *
-     * @example
-     * const spark = await sv.sparks.create({
-     *   payload: 'my secret data',
-     *   ttl: 3600,
-     *   maxReads: 1
+     * - Without `target`: Opens a dialog (modal)
+     * - With `target`: Renders inline into the specified element
+     *
+     * @example Dialog mode
+     * const result = await sv.vaults.upload({ vaultId: 'vlt_abc123' });
+     * console.log('Uploaded:', result.ingotId);
+     *
+     * @example Inline mode
+     * const result = await sv.vaults.upload({
+     *   vaultId: 'vlt_abc123',
+     *   target: '#upload-container'
      * });
-     * console.log(spark.url);
      */
-    async create(options) {
-        this.validateCreateOptions(options);
-        const payload = this.encodePayload(options.payload);
-        const response = await this.http.post('/v1/sparks', {
-            payload,
-            ttl: options.ttl ?? 3600,
-            max_reads: options.maxReads ?? 1,
-            password: options.password,
-            name: options.name,
-        });
-        return {
-            id: response.data.spark_id,
-            url: response.data.url,
-            expiresAt: response.data.expires_at,
-            maxReads: response.data.max_reads,
-            name: response.data.name,
+    async upload(options) {
+        if (!options.vaultId) {
+            throw new ValidationError('vaultId is required');
+        }
+        // Close any existing renderer
+        if (this.renderer) {
+            this.renderer.close();
+        }
+        const isInline = !!options.target;
+        const container = isInline
+            ? this.createInlineContainer(options.target)
+            : new UploadModalContainer();
+        // Merge global config defaults with per-call options
+        const mergedOptions = {
+            ...options,
+            backdropBlur: options.backdropBlur ?? this.config.backdropBlur,
         };
+        return new Promise((resolve, reject) => {
+            this.renderer = new UploadRenderer(container, this.api, mergedOptions, {
+                onSuccess: (result) => {
+                    options.onSuccess?.(result);
+                    resolve(result);
+                },
+                onError: (error) => {
+                    options.onError?.(error);
+                    reject(error);
+                },
+                onCancel: () => {
+                    const error = new UserCancelledError();
+                    options.onCancel?.();
+                    reject(error);
+                },
+                onProgress: options.onProgress,
+            });
+            this.renderer.start().catch((error) => {
+                options.onError?.(error);
+                reject(error);
+            });
+        });
     }
     /**
-     * Read and burn a spark.
-     * The spark is destroyed after the configured number of reads.
+     * Attach upload functionality to element clicks.
+     * When any matching element is clicked, opens the upload dialog.
+     *
+     * @param selector - CSS selector for elements to attach to
+     * @param options - Upload options including vaultId and callbacks
+     * @returns Cleanup function to remove event listeners
      *
      * @example
-     * const payload = await sv.sparks.read('spk_abc123');
-     * console.log(payload.data);
+     * const cleanup = sv.vaults.upload.attach('.upload-btn', {
+     *   vaultId: 'vlt_abc123',
+     *   onSuccess: (result) => console.log('Uploaded:', result.ingotId)
+     * });
+     *
+     * // Later, remove listeners
+     * cleanup();
      */
-    async read(id, password) {
-        if (!id) {
-            throw new ValidationError('Spark ID is required');
+    attach(selector, options) {
+        if (!options.vaultId) {
+            throw new ValidationError('vaultId is required');
         }
-        const cleanId = id.startsWith('spk_') ? id : `spk_${id}`;
-        const headers = {};
-        if (password) {
-            headers['X-Spark-Password'] = password;
-        }
-        const response = await this.http.get(`/v1/sparks/${cleanId}`, { headers });
-        return {
-            data: this.decodePayload(response.data.payload),
-            readAt: response.data.read_at,
-            burned: response.data.burned,
-            readsRemaining: response.data.reads_remaining,
+        let observer = null;
+        const handleClick = async (event) => {
+            event.preventDefault();
+            try {
+                await this.upload({
+                    vaultId: options.vaultId,
+                    onSuccess: options.onSuccess,
+                    onError: options.onError,
+                    onCancel: options.onCancel,
+                    onProgress: options.onProgress,
+                });
+            }
+            catch {
+                // Error already handled by callbacks or will use server redirect
+            }
+        };
+        const attachToElements = () => {
+            const elements = document.querySelectorAll(selector);
+            elements.forEach((element) => {
+                element.addEventListener('click', handleClick);
+                this.attachedElements.set(element, () => {
+                    element.removeEventListener('click', handleClick);
+                });
+            });
+            // Watch for dynamically added elements
+            observer = new MutationObserver((mutations) => {
+                mutations.forEach((mutation) => {
+                    mutation.addedNodes.forEach((node) => {
+                        if (node instanceof Element) {
+                            if (node.matches(selector)) {
+                                node.addEventListener('click', handleClick);
+                                this.attachedElements.set(node, () => {
+                                    node.removeEventListener('click', handleClick);
+                                });
+                            }
+                            // Check descendants
+                            node.querySelectorAll(selector).forEach((el) => {
+                                if (!this.attachedElements.has(el)) {
+                                    el.addEventListener('click', handleClick);
+                                    this.attachedElements.set(el, () => {
+                                        el.removeEventListener('click', handleClick);
+                                    });
+                                }
+                            });
+                        }
+                    });
+                });
+            });
+            observer.observe(document.body, { childList: true, subtree: true });
+        };
+        // Defer attachment until DOM is ready
+        onDomReady(attachToElements);
+        // Return cleanup function
+        return () => {
+            observer?.disconnect();
+            this.attachedElements.forEach((cleanup) => cleanup());
+            this.attachedElements.clear();
         };
     }
-    validateCreateOptions(options) {
-        if (!options.payload) {
-            throw new ValidationError('Payload is required');
+    /**
+     * Close the upload dialog/inline UI if open.
+     */
+    close() {
+        if (this.renderer) {
+            this.renderer.close();
+            this.renderer = null;
         }
-        if (options.ttl !== undefined && (options.ttl < 60 || options.ttl > 604800)) {
-            throw new ValidationError('TTL must be between 60 and 604800 seconds (1 minute to 7 days)');
+    }
+    /**
+     * Resolve target to an HTMLElement and create inline container.
+     */
+    createInlineContainer(target) {
+        let element;
+        if (typeof target === 'string') {
+            const found = document.querySelector(target);
+            if (!found || !(found instanceof HTMLElement)) {
+                throw new ValidationError(`Target selector "${target}" did not match any element`);
+            }
+            element = found;
         }
-        if (options.maxReads !== undefined && (options.maxReads < 1 || options.maxReads > 100)) {
-            throw new ValidationError('maxReads must be between 1 and 100');
+        else if (target instanceof HTMLElement) {
+            element = target;
         }
-    }
-    encodePayload(payload) {
-        if (typeof payload === 'string') {
-            return payload;
+        else {
+            throw new ValidationError('Target must be a CSS selector string or HTMLElement');
         }
-        // Use centralized base64url utility (CLAUDE.md DRY)
-        return base64urlEncode(payload);
+        return new UploadInlineContainer(element);
     }
-    decodePayload(payload) {
-        return payload;
+    // Deprecated methods for backwards compatibility
+    /**
+     * @deprecated Use `upload()` instead. Will be removed in v2.0.
+     */
+    async pop(options) {
+        return this.upload(options);
+    }
+    /**
+     * @deprecated Use `upload({ target })` instead. Will be removed in v2.0.
+     */
+    async render(options) {
+        return this.upload(options);
     }
 }
 
@@ -5468,9 +8365,14 @@ class SparksModule {
  * Uses Triple Zero-Trust encryption (SVMK + AMK + VMK).
  */
 class VaultsModule {
-    constructor(_config, http) {
-        // Config parameter kept for API consistency; may be used for versioning/feature flags
+    constructor(config, http) {
         this.http = http;
+        this.uploadModule = new VaultUploadModule(config);
+        // Create callable that also has attach/close methods
+        const uploadFn = ((options) => this.uploadModule.upload(options));
+        uploadFn.attach = (selector, options) => this.uploadModule.attach(selector, options);
+        uploadFn.close = () => this.uploadModule.close();
+        this.upload = uploadFn;
     }
     /**
      * Create a new encrypted vault.
@@ -5644,119 +8546,6 @@ class VaultsModule {
     }
 }
 
-/**
- * RNG Module
- *
- * Generate cryptographically secure random numbers.
- * Uses hybrid entropy from AWS KMS HSM + local CSPRNG.
- */
-const VALID_RNG_FORMATS = [
-    'hex', 'base64', 'base64url', 'alphanumeric',
-    'alphanumeric-mixed', 'password', 'numeric', 'uuid', 'bytes'
-];
-function isRNGFormat(value) {
-    return VALID_RNG_FORMATS.includes(value);
-}
-class RNGModule {
-    constructor(http) {
-        this.http = http;
-    }
-    /**
-     * Generate cryptographically secure random bytes.
-     *
-     * @example
-     * const result = await sv.rng.generate({ bytes: 32, format: 'hex' });
-     * console.log(result.value);
-     */
-    async generate(options) {
-        this.validateOptions(options);
-        const response = await this.http.post('/v1/apps/rng/generate', {
-            num_bytes: options.bytes,
-            format: options.format ?? 'base64url',
-        });
-        const responseFormat = response.data.format ?? 'base64url';
-        if (!isRNGFormat(responseFormat)) {
-            throw new ValidationError(`Server returned invalid format: ${responseFormat}`);
-        }
-        return {
-            // Use centralized base64url utility (CLAUDE.md DRY)
-            value: responseFormat === 'bytes'
-                ? base64urlToBytes(response.data.random_bytes_b64)
-                : response.data.random_bytes_b64,
-            bytes: response.data.num_bytes,
-            format: responseFormat,
-            referenceId: response.data.reference_id,
-        };
-    }
-    /**
-     * Generate a random UUID v4.
-     *
-     * @example
-     * const uuid = await sv.rng.uuid();
-     * console.log(uuid); // 'f47ac10b-58cc-4372-a567-0e02b2c3d479'
-     */
-    async uuid() {
-        const result = await this.generate({ bytes: 16, format: 'uuid' });
-        if (typeof result.value !== 'string') {
-            throw new ValidationError('Expected string value for uuid format');
-        }
-        return result.value;
-    }
-    /**
-     * Generate a random hex string.
-     *
-     * @example
-     * const hex = await sv.rng.hex(16);
-     * console.log(hex); // '1a2b3c4d5e6f7890...'
-     */
-    async hex(bytes) {
-        const result = await this.generate({ bytes, format: 'hex' });
-        if (typeof result.value !== 'string') {
-            throw new ValidationError('Expected string value for hex format');
-        }
-        return result.value;
-    }
-    /**
-     * Generate a random alphanumeric string.
-     *
-     * @example
-     * const code = await sv.rng.alphanumeric(8);
-     * console.log(code); // 'A1B2C3D4'
-     */
-    async alphanumeric(bytes) {
-        const result = await this.generate({ bytes, format: 'alphanumeric-mixed' });
-        if (typeof result.value !== 'string') {
-            throw new ValidationError('Expected string value for alphanumeric format');
-        }
-        return result.value;
-    }
-    /**
-     * Generate a random password with special characters.
-     *
-     * @example
-     * const password = await sv.rng.password(16);
-     * console.log(password); // 'aB3$xY7!mN9@pQ2#'
-     */
-    async password(bytes) {
-        const result = await this.generate({ bytes, format: 'password' });
-        if (typeof result.value !== 'string') {
-            throw new ValidationError('Expected string value for password format');
-        }
-        return result.value;
-    }
-    validateOptions(options) {
-        if (!options.bytes || typeof options.bytes !== 'number') {
-            throw new ValidationError('bytes is required and must be a number');
-        }
-        if (options.bytes < 1 || options.bytes > 1024) {
-            throw new ValidationError('bytes must be between 1 and 1024');
-        }
-        if (options.format && !isRNGFormat(options.format)) {
-            throw new ValidationError(`Invalid format. Must be one of: ${VALID_RNG_FORMATS.join(', ')}`);
-        }
-    }
-}
-
 /**
  * SparkVault Debug Logger
  *
@@ -5844,412 +8633,95 @@ const logger = {
 /**
  * SparkVault Auto-Initialization
  *
- * Enables zero-config initialization via script tag data attributes.
+ * Auto-initializes the SDK from script tag data attributes.
  *
  * @example
  * ```html
  * <script
- *   async
  *   src="https://cdn.sparkvault.com/sdk/v1/sparkvault.js"
  *   data-account-id="acc_your_account_id"
- *   data-attach-selector=".js-sparkvault-auth"
- *   data-success-url="https://example.com/auth/verify-token"
- *   data-error-function="handleSparkVaultError"
- *   data-debug="true"
  * ></script>
+ *
+ * <script>
+ *   // SDK is ready - just use it
+ *   SparkVault.identity.attach('.login-btn', {
+ *     onSuccess: (result) => console.log('Verified:', result.identity)
+ *   });
+ * </script>
  * ```
  *
  * Supported attributes:
  * - data-account-id: Account ID (required for auto-init)
- * - data-attach-selector: CSS selector for elements to attach click handlers
- * - data-success-url: URL to POST { token, identity } on successful verification
- * - data-success-function: Global function name to call on success (receives { token, identity, identityType })
- * - data-error-url: URL to redirect to on error (appends ?error=message)
- * - data-error-function: Global function name to call on error (receives Error object)
  * - data-debug: Set to "true" to enable verbose console logging
  */
-const state = {
-    initialized: false,
-    instance: null,
-    config: null,
-    observer: null,
-    isAuthenticating: false,
-};
-/**
- * Get the current script element
- */
-function getCurrentScript() {
-    // Try document.currentScript first (works during initial execution)
-    if (document.currentScript instanceof HTMLScriptElement) {
-        return document.currentScript;
-    }
-    // Fallback: find script by src pattern
-    const scripts = document.querySelectorAll('script[src*="sparkvault"]');
-    for (const script of scripts) {
-        if (script.dataset.accountId) {
-            return script;
-        }
-    }
-    return scripts[0] || null;
-}
-/**
- * Parse configuration from script tag data attributes
- */
-function parseConfig(script) {
-    const timeoutStr = script.dataset.timeout;
-    return {
-        accountId: script.dataset.accountId || null,
-        attachSelector: script.dataset.attachSelector || null,
-        successUrl: script.dataset.successUrl || null,
-        successFunction: script.dataset.successFunction || null,
-        errorUrl: script.dataset.errorUrl || null,
-        errorFunction: script.dataset.errorFunction || null,
-        debug: script.dataset.debug === 'true',
-        preloadConfig: script.dataset.preloadConfig !== 'false', // default: true
-        timeout: timeoutStr ? parseInt(timeoutStr, 10) : 30000,
-    };
-}
-/**
- * Safely resolve a global function by name (no eval)
- */
-function resolveFunction(name) {
-    if (!name || typeof name !== 'string') {
-        return null;
-    }
-    // Split by dots for nested properties (e.g., "MyApp.auth.onSuccess")
-    const parts = name.split('.');
-    // eslint-disable-next-line @typescript-eslint/no-explicit-any
-    let current = window;
-    for (const part of parts) {
-        if (current && typeof current === 'object' && part in current) {
-            current = current[part];
-        }
-        else {
-            logger.warn(`Function "${name}" not found on window`);
-            return null;
-        }
-    }
-    if (typeof current === 'function') {
-        return current;
-    }
-    logger.warn(`"${name}" is not a function`);
-    return null;
-}
-/**
- * Handle successful verification
- */
-async function handleSuccess(result) {
-    const config = state.config;
-    if (!config)
-        return;
-    logger.info('Verification successful', {
-        identity: result.identity,
-        identityType: result.identityType,
-        hasToken: !!result.token,
-    });
-    // Call success function if specified
-    if (config.successFunction) {
-        const fn = resolveFunction(config.successFunction);
-        if (fn) {
-            logger.debug(`Calling success function: ${config.successFunction}`);
-            try {
-                fn(result);
-            }
-            catch (err) {
-                logger.error('Error in success function:', err);
-            }
-        }
-    }
-    // POST to success URL if specified
-    if (config.successUrl) {
-        logger.debug(`POSTing to success URL: ${config.successUrl}`);
-        try {
-            const response = await fetch(config.successUrl, {
-                method: 'POST',
-                headers: {
-                    'Content-Type': 'application/json',
-                    'Accept': 'application/json',
-                },
-                credentials: 'include',
-                body: JSON.stringify({
-                    token: result.token,
-                    identity: result.identity,
-                    identityType: result.identityType,
-                }),
-            });
-            const data = await response.json();
-            logger.debug('Success URL response:', data);
-            // If server returns a redirect URL, follow it
-            if (data.redirectUrl || data.redirect_url) {
-                const redirectUrl = data.redirectUrl || data.redirect_url;
-                logger.info(`Redirecting to: ${redirectUrl}`);
-                window.location.href = redirectUrl;
-            }
-            else if (data.reload === true) {
-                logger.info('Reloading page');
-                window.location.reload();
-            }
-        }
-        catch (err) {
-            logger.error('Failed to POST to success URL:', err);
-            handleError(err instanceof Error ? err : new Error(String(err)));
-        }
-    }
-}
-/**
- * Handle verification error
- */
-function handleError(error) {
-    const config = state.config;
-    if (!config)
-        return;
-    logger.error('Verification error:', error.message);
-    // Call error function if specified
-    if (config.errorFunction) {
-        const fn = resolveFunction(config.errorFunction);
-        if (fn) {
-            logger.debug(`Calling error function: ${config.errorFunction}`);
-            try {
-                fn(error);
-            }
-            catch (err) {
-                logger.error('Error in error function:', err);
-            }
-        }
-    }
-    // Redirect to error URL if specified
-    if (config.errorUrl) {
-        const url = new URL(config.errorUrl, window.location.origin);
-        url.searchParams.set('error', error.message);
-        logger.debug(`Redirecting to error URL: ${url.toString()}`);
-        window.location.href = url.toString();
-    }
-}
-/**
- * Start the verification flow (popup modal with configured handlers)
- */
-async function pop() {
-    if (!state.instance) {
-        logger.error('SDK not initialized');
-        return;
-    }
-    if (state.isAuthenticating) {
-        logger.debug('Already authenticating, skipping');
-        return;
-    }
-    state.isAuthenticating = true;
-    logger.info('Starting verification...');
-    try {
-        const result = await state.instance.identity.pop();
-        // User cancelled
-        if (!result) {
-            logger.info('User cancelled verification');
-            state.isAuthenticating = false;
-            return;
-        }
-        await handleSuccess(result);
-    }
-    catch (err) {
-        // UserCancelledError is not an error
-        if (err && typeof err === 'object' && 'name' in err) {
-            const error = err;
-            if (error.name === 'UserCancelledError' || error.code === 'user_cancelled') {
-                logger.info('User cancelled verification');
-                state.isAuthenticating = false;
-                return;
-            }
-        }
-        handleError(err instanceof Error ? err : new Error(String(err)));
-    }
-    finally {
-        state.isAuthenticating = false;
-    }
-}
-/**
- * Attach click handlers to elements matching the selector
- */
-function attachHandlers() {
-    const config = state.config;
-    if (!config?.attachSelector)
-        return;
-    const elements = document.querySelectorAll(config.attachSelector);
-    logger.debug(`Found ${elements.length} elements matching "${config.attachSelector}"`);
-    elements.forEach((el) => {
-        // Skip if already attached
-        if (el.dataset.sparkvaultAttached === 'true')
-            return;
-        el.dataset.sparkvaultAttached = 'true';
-        logger.debug('Attaching click handler to element:', el);
-        el.addEventListener('click', (e) => {
-            logger.debug('Auth element clicked');
-            e.preventDefault();
-            e.stopPropagation();
-            pop();
-        });
-    });
-}
-/**
- * Start observing for dynamically added elements
- */
-function startObserver() {
-    const config = state.config;
-    if (!config?.attachSelector)
-        return;
-    if (typeof MutationObserver === 'undefined') {
-        logger.warn('MutationObserver not available, dynamic elements will not be auto-attached');
-        return;
-    }
-    state.observer = new MutationObserver((mutations) => {
-        let shouldAttach = false;
-        for (const mutation of mutations) {
-            if (mutation.addedNodes.length > 0) {
-                shouldAttach = true;
-                break;
-            }
-        }
-        if (shouldAttach) {
-            attachHandlers();
-        }
-    });
-    state.observer.observe(document.body, {
-        childList: true,
-        subtree: true,
-    });
-    logger.debug('MutationObserver started for dynamic elements');
-}
 /**
- * Initialize the SDK from script tag attributes
+ * Initialize the SDK from script tag attributes.
  *
  * Called automatically when the script loads.
- * Requires SparkVault class to be passed in to avoid circular dependency.
+ * Returns the initialized instance if data-account-id is present, null otherwise.
  */
 function autoInit(SparkVaultClass) {
-    // Prevent double initialization
-    if (state.initialized) {
-        logger.debug('Auto-init already completed');
-        return;
-    }
     // Only run in browser
     if (typeof window === 'undefined' || typeof document === 'undefined') {
-        return;
+        return null;
     }
-    const script = getCurrentScript();
+    // Get the current script element
+    const script = document.currentScript;
     if (!script) {
-        // No script tag found, but that's okay - manual init is supported
-        return;
+        return null;
     }
-    const config = parseConfig(script);
-    state.config = config;
-    // Enable debug mode first so subsequent logs work
-    if (config.debug) {
+    const accountId = script.dataset.accountId;
+    const debug = script.dataset.debug;
+    // Enable debug mode if requested
+    if (debug === 'true') {
         setDebugMode(true);
     }
-    logger.info('Auto-init starting...');
-    logger.group('Configuration');
-    logger.debug('Account ID:', config.accountId || '(not set)');
-    logger.debug('Attach Selector:', config.attachSelector || '(not set)');
-    logger.debug('Success URL:', config.successUrl || '(not set)');
-    logger.debug('Success Function:', config.successFunction || '(not set)');
-    logger.debug('Error URL:', config.errorUrl || '(not set)');
-    logger.debug('Error Function:', config.errorFunction || '(not set)');
-    logger.debug('Debug:', config.debug);
-    logger.groupEnd();
-    // No account ID = no auto-init (manual init required)
-    if (!config.accountId) {
+    // No account ID = no auto-init
+    if (!accountId) {
         logger.debug('No data-account-id attribute, skipping auto-init');
-        return;
+        return null;
     }
-    // Initialize the SDK
+    logger.info('Auto-initializing SDK...');
     try {
-        state.instance = SparkVaultClass.init({
-            accountId: config.accountId,
-            preloadConfig: config.preloadConfig,
-            timeout: config.timeout,
-        });
-        state.initialized = true;
+        const instance = SparkVaultClass.init({ accountId });
         logger.info('SDK initialized successfully');
+        return instance;
     }
     catch (err) {
         logger.error('Failed to initialize SDK:', err);
-        return;
-    }
-    // Attach handlers if selector specified
-    if (config.attachSelector) {
-        // Wait for DOM to be ready
-        if (document.readyState === 'loading') {
-            document.addEventListener('DOMContentLoaded', () => {
-                attachHandlers();
-                startObserver();
-            });
-        }
-        else {
-            attachHandlers();
-            startObserver();
-        }
-    }
-    // Expose utility methods on SparkVault global for manual use
-    // eslint-disable-next-line @typescript-eslint/no-explicit-any
-    const SparkVaultGlobal = window.SparkVault;
-    if (SparkVaultGlobal) {
-        // Add identity namespace for manual trigger
-        SparkVaultGlobal.identity = {
-            /** Open popup and use configured handlers (data-success-url, etc.) */
-            pop,
-            /** Render inline (requires target element, returns result) */
-            render: (options) => {
-                if (!state.instance) {
-                    return Promise.reject(new Error('SDK not initialized'));
-                }
-                return state.instance.identity.render(options);
-            },
-            /** @deprecated Use pop() instead */
-            authenticate: pop,
-            /** @deprecated Use pop() instead */
-            verify: (options) => {
-                if (!state.instance) {
-                    return Promise.reject(new Error('SDK not initialized'));
-                }
-                return state.instance.identity.pop(options);
-            },
-        };
-        // For advanced users who need full SDK instance
-        SparkVaultGlobal.getInstance = () => state.instance;
+        return null;
     }
-    logger.info('Auto-init complete');
 }
 
 /**
  * SparkVault JavaScript SDK
  *
- * A unified SDK for Identity, Sparks, Vaults, and RNG.
+ * A unified SDK for Identity and Vaults.
  *
- * @example Auto-Init (Zero-Config)
+ * @example CDN Usage (Recommended)
  * ```html
  * <script
- *   async
  *   src="https://cdn.sparkvault.com/sdk/v1/sparkvault.js"
  *   data-account-id="acc_your_account"
- *   data-attach-selector=".js-sparkvault-auth"
- *   data-success-url="https://example.com/auth/verify-token"
- *   data-debug="true"
  * ></script>
  *
- * <button class="js-sparkvault-auth">Login with SparkVault</button>
- * ```
- *
- * @example Manual Init
- * ```html
- * <script src="https://cdn.sparkvault.com/sdk/v1/sparkvault.js"></script>
  * <script>
- *   const sv = SparkVault.init({
- *     accountId: 'acc_your_account'
+ *   // SDK auto-initializes. Use JavaScript API:
+ *   SparkVault.identity.attach('.login-btn', {
+ *     onSuccess: (result) => console.log('Verified:', result.identity)
  *   });
- *
- *   // Open identity verification modal
- *   const result = await sv.identity.pop();
- *   console.log(result.identity, result.identityType);
  * </script>
  * ```
+ *
+ * @example npm/Bundler Usage
+ * ```typescript
+ * import SparkVault from '@sparkvault/sdk';
+ *
+ * const sv = SparkVault.init({ accountId: 'acc_your_account' });
+ *
+ * const result = await sv.identity.verify();
+ * console.log(result.identity, result.identityType);
+ * ```
  */
 class SparkVault {
     constructor(config) {
@@ -6257,9 +8729,7 @@ class SparkVault {
         this.config = resolveConfig(config);
         const http = new HttpClient(this.config);
         this.identity = new IdentityModule(this.config);
-        this.sparks = new SparksModule(http);
         this.vaults = new VaultsModule(this.config, http);
-        this.rng = new RNGModule(http);
     }
     /**
      * Initialize the SparkVault SDK.
@@ -6281,9 +8751,11 @@ class SparkVault {
     }
 }
 if (typeof window !== 'undefined') {
-    window.SparkVault = SparkVault;
-    // Auto-initialize from script tag attributes
-    autoInit(SparkVault);
+    // Auto-initialize from script tag data-account-id attribute
+    const instance = autoInit(SparkVault);
+    // Expose instance (if auto-init succeeded) or class (for manual init)
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    window.SparkVault = instance ?? SparkVault;
 }
 
 exports.AuthenticationError = AuthenticationError;