@glideidentity/web-client-sdk 5.1.2 → 6.0.0-beta.1

package/dist/esm/ui/modal.js

@@ -0,0 +1,1117 @@
+/**
+ * Modal UI Component for Phone Authentication
+ *
+ * This file creates the UI components (modals, buttons) that are shown
+ * for Desktop QR code authentication flow.
+ *
+ * Supports three view modes:
+ * - toggle: Single QR with iOS/Android toggle (default)
+ * - dual: Side-by-side QR codes for both platforms
+ * - pre-step: OS selection first, then QR
+ */
+/**
+ * Creates and manages a modal dialog for authentication
+ */
+export class AuthModal {
+    constructor(options) {
+        this.container = null;
+        this.backdrop = null;
+        this.isOpen = false;
+        // State for Pre-step mode
+        this.currentStep = 'os-choice';
+        this.qrCodeData = null;
+        this.statusMessage = '';
+        // Body scroll lock state
+        this.originalBodyOverflow = '';
+        // Close animation state
+        this.isClosing = false;
+        // Icons
+        this.iconApple = `<svg class="glide-icon glide-icon-os" viewBox="0 0 384 512" fill="currentColor"><path d="M318.7 268.7c-.2-36.7 16.4-64.4 50-84.8-18.8-26.9-47.2-41.7-84.7-44.6-35.5-2.8-74.3 20.7-88.5 20.7-15 0-49.4-19.7-76.4-19.7C63.3 141.2 4 184.8 4 273.5q0 39.3 14.4 81.2c12.8 36.7 59 126.7 107.2 125.2 25.2-.6 43-17.9 75.8-17.9 31.8 0 48.3 17.9 76.4 17.9 48.6-.7 90.4-82.5 102.6-119.3-65.2-30.7-61.7-90-61.7-91.9zm-56.6-164.2c27.3-32.4 24.8-61.9 24-72.5-24.1 1.4-52 16.4-67.9 34.9-17.5 19.8-27.8 44.3-25.6 71.9 26.1 2 52.3-11.4 69.5-34.3z"/></svg>`;
+        this.iconAndroid = `<svg class="glide-icon glide-icon-os" viewBox="0 0 576 512" fill="currentColor"><path d="M420.55,301.93a24,24,0,1,1,24-24,24,24,0,0,1-24,24m-265.1,0a24,24,0,1,1,24-24,24,24,0,0,1-24,24m273.7-144.48,47.94-83a10,10,0,1,0-17.27-10h0l-48.54,84.07a301.25,301.25,0,0,0-246.56,0L116.18,64.45a10,10,0,1,0-17.27,10h0l47.94,83C64.53,202.22,8.24,285.55,0,384H576c-8.24-98.45-64.54-181.78-146.85-226.55"/></svg>`;
+        this.iconBack = `<svg class="glide-icon" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"><line x1="19" y1="12" x2="5" y2="12"></line><polyline points="12 19 5 12 12 5"></polyline></svg>`;
+        this.options = options || {};
+        this.theme = this.options.theme || 'auto';
+        this.handleEscapeKey = this.handleEscapeKey.bind(this);
+    }
+    /**
+     * Determines if dark mode should be used based on theme setting
+     */
+    shouldUseDarkMode() {
+        if (this.theme === 'dark')
+            return true;
+        if (this.theme === 'light')
+            return false;
+        // Auto - use system preference
+        return window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches;
+    }
+    handleEscapeKey(event) {
+        if (event.key === 'Escape' && this.isOpen) {
+            if (this.options?.closeOnEscape !== false) {
+                this.closeCallback?.();
+                this.close();
+            }
+        }
+    }
+    escapeHtml(unsafe) {
+        return unsafe
+            .replace(/&/g, "&amp;")
+            .replace(/</g, "&lt;")
+            .replace(/>/g, "&gt;")
+            .replace(/"/g, "&quot;")
+            .replace(/'/g, "&#039;");
+    }
+    /**
+     * Shows the modal with a QR code
+     * @param qrCodeData - Either a string (single QR) or QRCodeData (separate iOS/Android)
+     * @param statusMessage - Optional status message to display
+     */
+    showQRCode(qrCodeData, statusMessage = 'Scan with your phone camera') {
+        this.qrCodeData = qrCodeData;
+        this.statusMessage = statusMessage;
+        // Determine mode
+        const mode = this.options.viewMode || 'toggle';
+        // If legacy string data, force toggle mode
+        if (typeof qrCodeData === 'string') {
+            this.renderToggleMode(qrCodeData, statusMessage);
+        }
+        else {
+            switch (mode) {
+                case 'dual':
+                    this.renderDualMode(qrCodeData, statusMessage);
+                    break;
+                case 'pre-step':
+                    this.renderPreStepMode(qrCodeData, statusMessage);
+                    break;
+                case 'toggle':
+                default:
+                    this.renderToggleMode(qrCodeData, statusMessage);
+                    break;
+            }
+        }
+        this.show();
+    }
+    /**
+     * Updates the status message shown in the modal
+     */
+    updateStatus(status, isError = false) {
+        this.statusMessage = status;
+        if (this.container) {
+            const el = this.container.querySelector('#glide-status');
+            if (el) {
+                el.textContent = status;
+                if (isError) {
+                    el.style.color = '#ff3b30';
+                }
+                else {
+                    el.style.color = '';
+                }
+            }
+        }
+    }
+    setCloseCallback(callback) {
+        this.closeCallback = callback;
+    }
+    // --- Renderers ---
+    renderToggleMode(data, msg) {
+        let iosQR = '';
+        let androidQR = '';
+        if (typeof data === 'string') {
+            iosQR = data;
+            androidQR = data;
+        }
+        else {
+            iosQR = data.iosQRCode;
+            androidQR = data.androidQRCode || data.iosQRCode;
+        }
+        const content = `
+      <div class="glide-content">
+        <div class="glide-toggle" id="glide-toggle" data-active="ios">
+          <div class="glide-toggle-slider"></div>
+          <button class="glide-btn glide-toggle-btn active" data-platform="ios">${this.iconApple}<span>iOS</span></button>
+          <button class="glide-btn glide-toggle-btn" data-platform="android">${this.iconAndroid}<span>Android</span></button>
+        </div>
+
+        <div class="glide-qr-area">
+          <img 
+            class="glide-qr-img"
+            id="glide-qr-img" 
+            src="${this.escapeHtml(iosQR)}" 
+            alt="QR Code" 
+            class="glide-qr-img" 
+            data-ios="${this.escapeHtml(iosQR)}"
+            data-android="${this.escapeHtml(androidQR)}"
+          />
+          
+          <!-- Animation Overlay (Inside QR Area for centering) -->
+          <div id="glide-phone-overlay" class="glide-phone-animation-overlay">
+              <div class="glide-outlined-phone">
+                  <div class="glide-scan-line"></div>
+              </div>
+          </div>
+        </div>
+      </div>
+    `;
+        this.createModal(content, '', true);
+        this.setupPlatformToggles();
+        this.setupHelpInteraction();
+    }
+    renderDualMode(data, msg) {
+        const qrOverlayHtml = `
+        <div class="glide-phone-animation-overlay">
+            <div class="glide-outlined-phone">
+                <div class="glide-scan-line"></div>
+            </div>
+        </div>
+    `;
+        this.createModal(`
+      <div class="glide-content glide-dual-mode">
+        <div class="glide-dual-container">
+            <div class="glide-dual-item">
+                <div class="glide-os-logo">
+                    ${this.iconApple}
+                    <span>iOS</span>
+                </div>
+                <div class="glide-qr-area">
+                    <img src="${this.escapeHtml(data.iosQRCode)}" alt="iOS QR" class="glide-qr-img" />
+                    ${qrOverlayHtml}
+                </div>
+            </div>
+            <div class="glide-dual-separator">
+                <div class="glide-separator-line"></div>
+                <span class="glide-separator-text">or</span>
+                <div class="glide-separator-line"></div>
+            </div>
+            <div class="glide-dual-item">
+                <div class="glide-os-logo">
+                    ${this.iconAndroid}
+                    <span>Android</span>
+                </div>
+                <div class="glide-qr-area">
+                    <img src="${this.escapeHtml(data.androidQRCode || data.iosQRCode)}" alt="Android QR" class="glide-qr-img" />
+                    ${qrOverlayHtml}
+                </div>
+            </div>
+        </div>
+      </div>
+    `, 'glide-modal-wide', true);
+        this.setupHelpInteraction();
+    }
+    renderPreStepMode(data, msg) {
+        this.currentStep = 'os-choice';
+        // First create the initial modal with OS choice buttons
+        const contentHtml = `
+      <div class="glide-pre-step-container">
+        <button class="glide-os-choice-btn" id="glide-btn-ios">
+          ${this.iconApple}
+          <span>iOS</span>
+        </button>
+        <button class="glide-os-choice-btn" id="glide-btn-android">
+          ${this.iconAndroid}
+          <span>Android</span>
+        </button>
+      </div>
+    `;
+        this.createModal(contentHtml, '', false);
+        this.setupPreStepListeners();
+        this.show();
+    }
+    setupPreStepListeners() {
+        if (!this.container)
+            return;
+        this.container.querySelector('#glide-btn-ios')?.addEventListener('click', () => {
+            this.currentStep = 'ios-qr';
+            this.updatePreStepUI();
+        });
+        this.container.querySelector('#glide-btn-android')?.addEventListener('click', () => {
+            this.currentStep = 'android-qr';
+            this.updatePreStepUI();
+        });
+    }
+    updatePreStepUI() {
+        if (!this.container)
+            return;
+        let contentHtml = '';
+        if (this.currentStep === 'os-choice') {
+            // Back to OS choice
+            contentHtml = `
+        <div class="glide-pre-step-container">
+          <button class="glide-os-choice-btn" id="glide-btn-ios">
+            ${this.iconApple}
+            <span>iOS</span>
+          </button>
+          <button class="glide-os-choice-btn" id="glide-btn-android">
+            ${this.iconAndroid}
+            <span>Android</span>
+          </button>
+        </div>
+      `;
+            this.createModal(contentHtml, '', false);
+            this.setupPreStepListeners();
+        }
+        else if (this.currentStep === 'ios-qr') {
+            const qr = (typeof this.qrCodeData === 'object' && this.qrCodeData?.iosQRCode)
+                ? this.qrCodeData.iosQRCode
+                : this.qrCodeData;
+            contentHtml = `
+        <div class="glide-content">
+          <div class="glide-qr-area">
+            <img src="${this.escapeHtml(qr)}" alt="QR Code" class="glide-qr-img" />
+            
+            <!-- Animation Overlay -->
+            <div id="glide-phone-overlay" class="glide-phone-animation-overlay">
+              <div class="glide-outlined-phone">
+                <div class="glide-scan-line"></div>
+              </div>
+            </div>
+          </div>
+        </div>
+      `;
+            // includeHelpButton = true, includeBackButton = true
+            this.createModal(contentHtml, '', true, true);
+            this.setupBackButton();
+            this.setupHelpInteraction();
+        }
+        else if (this.currentStep === 'android-qr') {
+            const qr = (typeof this.qrCodeData === 'object' && this.qrCodeData?.androidQRCode)
+                ? this.qrCodeData.androidQRCode
+                : (typeof this.qrCodeData === 'object' && this.qrCodeData?.iosQRCode)
+                    ? this.qrCodeData.iosQRCode // Fallback to iOS QR if no Android QR
+                    : this.qrCodeData;
+            contentHtml = `
+        <div class="glide-content">
+          <div class="glide-qr-area">
+            <img src="${this.escapeHtml(qr)}" alt="QR Code" class="glide-qr-img" />
+            
+            <!-- Animation Overlay -->
+            <div id="glide-phone-overlay" class="glide-phone-animation-overlay">
+              <div class="glide-outlined-phone">
+                <div class="glide-scan-line"></div>
+              </div>
+            </div>
+          </div>
+        </div>
+      `;
+            // includeHelpButton = true, includeBackButton = true
+            this.createModal(contentHtml, '', true, true);
+            this.setupBackButton();
+            this.setupHelpInteraction();
+        }
+    }
+    setupBackButton() {
+        if (!this.container)
+            return;
+        this.container.querySelector('#glide-back-btn')?.addEventListener('click', () => {
+            this.currentStep = 'os-choice';
+            this.updatePreStepUI();
+        });
+    }
+    // --- Core Methods ---
+    createModal(content, extraClass = '', includeHelpButton = false, includeBackButton = false) {
+        // If a modal is closing, force cleanup before creating new one
+        if (this.isClosing) {
+            this.isClosing = false;
+            this.cleanup();
+        }
+        if (!this.container) {
+            this.backdrop = document.createElement('div');
+            this.backdrop.className = 'glide-backdrop';
+            this.backdrop.id = 'glide-backdrop';
+            this.container = document.createElement('div');
+            this.container.className = `glide-modal ${extraClass}`;
+            this.container.id = 'glide-modal';
+            if (this.shouldUseDarkMode()) {
+                this.container.classList.add('dark');
+            }
+            if (this.isOpen) {
+                document.body.appendChild(this.backdrop);
+                document.body.appendChild(this.container);
+            }
+        }
+        else {
+            this.container.className = `glide-modal ${extraClass}`;
+            if (this.shouldUseDarkMode()) {
+                this.container.classList.add('dark');
+            }
+        }
+        this.container.innerHTML = `
+      ${includeBackButton ? `
+        <button class="glide-btn glide-btn-back" id="glide-back-btn" aria-label="Back">
+          ${this.iconBack}
+        </button>
+      ` : ''}
+      ${this.options?.showCloseButton !== false ? `
+        <button class="glide-btn glide-btn-close" id="glide-close-btn" aria-label="Close">
+          <svg class="glide-icon" width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round">
+            <line x1="18" y1="6" x2="6" y2="18"></line>
+            <line x1="6" y1="6" x2="18" y2="18"></line>
+          </svg>
+        </button>
+      ` : ''}
+      <h2 class="glide-title">${this.options?.title || 'Scan to Verify'}</h2>
+      <div id="glide-modal-content">${content}</div>
+      <p class="glide-status" id="glide-status">${this.options?.description || ''}</p>
+      ${includeHelpButton ? `
+        <button class="glide-btn glide-btn-help" id="glide-help-btn">?</button>
+      ` : ''}
+    `;
+        this.injectStyles();
+        const closeBtn = this.container.querySelector('#glide-close-btn');
+        if (closeBtn) {
+            closeBtn.addEventListener('click', () => {
+                this.closeCallback?.();
+                this.close();
+            });
+        }
+        if (this.backdrop) {
+            this.backdrop.onclick = (e) => {
+                if (e.target === this.backdrop && this.options?.closeOnBackdropClick !== false) {
+                    this.closeCallback?.();
+                    this.close();
+                }
+            };
+        }
+    }
+    setupHelpInteraction() {
+        const trigger = this.container?.querySelector('#glide-help-btn');
+        if (trigger) {
+            trigger.addEventListener('click', () => {
+                // Select all overlays (handles single and dual mode)
+                const overlays = this.container?.querySelectorAll('.glide-phone-animation-overlay');
+                if (overlays) {
+                    overlays.forEach(overlay => {
+                        overlay.classList.remove('playing');
+                        void overlay.offsetWidth; // Trigger reflow
+                        overlay.classList.add('playing');
+                        // Auto-hide after animation (3s)
+                        setTimeout(() => {
+                            overlay.classList.remove('playing');
+                        }, 3000);
+                    });
+                }
+            });
+        }
+    }
+    injectStyles() {
+        if (document.getElementById('glide-modal-styles'))
+            return;
+        const styles = document.createElement('style');
+        styles.id = 'glide-modal-styles';
+        styles.textContent = `
+      :root {
+        --glide-primary: #007AFF;
+        --glide-text: #1d1d1f;
+        --glide-bg-light: rgba(255, 255, 255, 0.6);
+        --glide-bg-dark: rgba(30, 30, 30, 0.6);
+        --glide-phone-border: #000000; /* High Contrast Black */
+        
+        /* Button sizes */
+        --glide-btn-size: 28px;
+        --glide-help-btn-size: 24px;
+        --glide-toggle-icon-size: 14px;
+        --glide-dual-icon-size: 18px;
+      }
+
+      #glide-backdrop {
+        position: fixed;
+        top: 0;
+        left: 0;
+        right: 0;
+        bottom: 0;
+        background: rgba(0, 0, 0, 0.2);
+        backdrop-filter: blur(8px);
+        -webkit-backdrop-filter: blur(8px);
+        z-index: 9998;
+        opacity: 0;
+        transition: opacity 0.4s cubic-bezier(0.16, 1, 0.3, 1);
+      }
+
+      #glide-modal {
+        position: fixed;
+        top: 20px;
+        left: 50%;
+        transform: translateX(-50%) scale(0.94);
+        background: var(--glide-bg-light);
+        backdrop-filter: blur(24px) saturate(180%);
+        -webkit-backdrop-filter: blur(24px) saturate(180%);
+        border-radius: 24px;
+        padding: 32px;
+        width: 360px;
+        max-width: 90%;
+        box-shadow: 
+            0 20px 40px rgba(0,0,0,0.2),
+            0 0 0 1px rgba(255,255,255,0.6) inset,
+            0 0 0 1px rgba(0,0,0,0.05);
+        z-index: 9999;
+        opacity: 0;
+        transition: opacity 0.4s ease, transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
+        font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+        text-align: center;
+        color: var(--glide-text);
+      }
+      
+      #glide-modal.glide-modal-wide {
+        width: 600px;
+        max-width: 95vw;
+      }
+
+      #glide-modal.dark {
+        background: var(--glide-bg-dark);
+        color: white;
+        box-shadow: 
+            0 20px 40px rgba(0,0,0,0.4),
+            0 0 0 1px rgba(255,255,255,0.15) inset,
+            0 0 0 1px rgba(0,0,0,0.5);
+        --glide-phone-border: #ffffff; /* High Contrast White */
+      }
+
+      #glide-modal .glide-btn-close {
+        position: absolute;
+        top: 16px;
+        right: 16px;
+        width: var(--glide-btn-size);
+        height: var(--glide-btn-size);
+        min-width: var(--glide-btn-size);
+        min-height: var(--glide-btn-size);
+        max-width: var(--glide-btn-size);
+        max-height: var(--glide-btn-size);
+        background: rgba(118, 118, 128, 0.12);
+        border: none;
+        border-radius: 50%;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        cursor: pointer;
+        color: rgba(0,0,0,0.5);
+        transition: background 0.2s;
+        padding: 0;
+        z-index: 20;
+        box-sizing: border-box;
+        flex-shrink: 0;
+      }
+
+      #glide-modal.dark .glide-btn-close {
+        background: rgba(255, 255, 255, 0.1);
+        color: rgba(255,255,255,0.5);
+      }
+
+      #glide-modal .glide-btn-close:hover {
+        background: rgba(118, 118, 128, 0.2);
+      }
+      
+      #glide-modal.dark .glide-btn-close:hover {
+        background: rgba(255, 255, 255, 0.2);
+      }
+
+      .glide-title {
+        margin: 0 0 8px 0;
+        font-size: 22px;
+        font-weight: 600;
+        letter-spacing: -0.01em;
+      }
+      
+      .glide-status {
+        margin: 12px 0 0 0;
+        font-size: 13px;
+        color: rgba(0,0,0,0.5);
+        text-align: center;
+        min-height: 18px;
+      }
+      
+      .glide-status:empty {
+        display: none;
+      }
+      
+      #glide-modal.dark .glide-status {
+        color: rgba(255,255,255,0.5);
+      }
+      
+      .glide-content {
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        position: relative;
+      }
+      
+      /* --- Sliding Toggle Switch --- */
+      #glide-toggle {
+        background: rgba(118, 118, 128, 0.12);
+        padding: 2px;
+        border-radius: 8px;
+        display: inline-flex;
+        margin-bottom: 24px;
+        margin-top: 16px;
+        position: relative;
+        height: 32px;
+        width: 200px;
+        box-sizing: border-box;
+      }
+
+      #glide-modal.dark #glide-toggle {
+        background: rgba(118, 118, 128, 0.24);
+      }
+      
+      /* The sliding background */
+      .glide-toggle-slider {
+        position: absolute;
+        top: 2px;
+        left: 2px;
+        width: calc(50% - 2px);
+        height: calc(100% - 4px);
+        background: white;
+        border-radius: 6px;
+        box-shadow: 0 3px 8px rgba(0,0,0,0.12), 0 3px 1px rgba(0,0,0,0.04);
+        transition: transform 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
+        z-index: 0;
+      }
+      
+      #glide-modal.dark .glide-toggle-slider {
+        background: #636366;
+      }
+      
+      /* Move slider for Android */
+      #glide-toggle[data-active="android"] .glide-toggle-slider {
+        transform: translateX(100%);
+      }
+
+      .glide-toggle-btn {
+        flex: 1;
+        background: none;
+        border: none;
+        padding: 0;
+        margin: 0;
+        font-size: 13px;
+        font-weight: 500;
+        color: inherit;
+        cursor: pointer;
+        position: relative;
+        z-index: 1;
+        transition: color 0.2s;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        gap: 6px;
+        min-height: auto;
+        height: auto;
+        min-width: auto;
+        border-radius: 0;
+      }
+      
+      #glide-modal .glide-toggle-btn .glide-icon-os,
+      #glide-modal .glide-toggle-btn svg {
+        width: var(--glide-toggle-icon-size);
+        height: var(--glide-toggle-icon-size);
+        flex-shrink: 0;
+        margin: 0;
+        padding: 0;
+      }
+      
+      .glide-toggle-btn span {
+        margin: 0;
+        padding: 0;
+        line-height: 1;
+      }
+      
+      #glide-modal.dark .glide-toggle-btn {
+        color: rgba(255,255,255,0.6);
+      }
+      
+      #glide-toggle[data-active="ios"] .glide-toggle-btn[data-platform="ios"],
+      #glide-toggle[data-active="android"] .glide-toggle-btn[data-platform="android"] {
+        color: #1d1d1f;
+      }
+      
+      #glide-modal.dark #glide-toggle[data-active="ios"] .glide-toggle-btn[data-platform="ios"],
+      #glide-modal.dark #glide-toggle[data-active="android"] .glide-toggle-btn[data-platform="android"] {
+        color: white;
+      }
+
+      /* QR Area */
+      .glide-qr-area {
+        position: relative;
+        margin: 0 auto;
+      }
+
+      .glide-qr-img {
+        width: 200px;
+        height: 200px;
+        object-fit: contain;
+        display: block;
+        border-radius: 16px;
+      }
+      
+      /* Dual Mode QR Area - no extra padding, same as single mode */
+      .glide-dual-mode .glide-qr-area {
+        background: transparent;
+        padding: 0;
+      }
+      
+      .glide-dual-mode .glide-qr-img {
+        width: 180px;
+        height: 180px;
+        border-radius: 16px;
+      }
+      
+      /* --- Help Icon & Interaction --- */
+      .glide-btn-help {
+        position: absolute;
+        bottom: 20px;
+        right: 20px;
+        width: var(--glide-help-btn-size);
+        height: var(--glide-help-btn-size);
+        min-width: var(--glide-help-btn-size);
+        min-height: var(--glide-help-btn-size);
+        max-width: var(--glide-help-btn-size);
+        max-height: var(--glide-help-btn-size);
+        border-radius: 50%;
+        border: 1.5px solid rgba(0,0,0,0.2);
+        color: rgba(0,0,0,0.4);
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+        font-size: 14px;
+        font-weight: 600;
+        line-height: 1;
+        cursor: pointer;
+        transition: all 0.2s;
+        background: transparent;
+        padding: 0;
+        margin: 0;
+        box-sizing: border-box;
+        z-index: 10;
+      }
+      
+      #glide-modal.dark .glide-btn-help {
+        border-color: rgba(255,255,255,0.3);
+        color: rgba(255,255,255,0.5);
+      }
+
+      .glide-btn-help:hover {
+        border-color: var(--glide-primary);
+        color: var(--glide-primary);
+        background: rgba(0, 122, 255, 0.1);
+      }
+      
+      /* Tooltip */
+      .glide-btn-help::after {
+        content: "Need help?";
+        position: absolute;
+        bottom: 100%;
+        left: 50%;
+        transform: translateX(-50%) translateY(-8px);
+        background: rgba(0,0,0,0.8);
+        color: white;
+        padding: 4px 8px;
+        border-radius: 4px;
+        font-size: 11px;
+        white-space: nowrap;
+        opacity: 0;
+        pointer-events: none;
+        transition: opacity 0.2s;
+      }
+      
+      .glide-btn-help:hover::after {
+        opacity: 1;
+      }
+
+      /* --- Outlined Phone Animation --- */
+      .glide-phone-animation-overlay {
+        position: absolute;
+        top: 0;
+        left: 0;
+        width: 100%;
+        height: 100%;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        pointer-events: none;
+        opacity: 0;
+        transition: opacity 0.3s;
+        border-radius: 16px;
+        background: rgba(255,255,255,0.8);
+      }
+      
+      #glide-modal.dark .glide-phone-animation-overlay {
+        background: rgba(0,0,0,0.6);
+      }
+      
+      .glide-phone-animation-overlay.playing {
+        opacity: 1;
+      }
+
+      .glide-outlined-phone {
+        width: 100px;
+        height: 180px;
+        border: 4px solid var(--glide-phone-border);
+        border-radius: 16px;
+        position: relative;
+        background: transparent;
+        box-shadow: 0 10px 30px rgba(0,0,0,0.2);
+        transform: translateY(20px);
+      }
+      
+      /* Notch */
+      .glide-outlined-phone::before {
+        content: '';
+        position: absolute;
+        top: -1px;
+        left: 50%;
+        transform: translateX(-50%);
+        width: 40%;
+        height: 12px;
+        background: var(--glide-phone-border);
+        border-bottom-left-radius: 8px;
+        border-bottom-right-radius: 8px;
+      }
+      
+      /* Scanning Line */
+      .glide-scan-line {
+        position: absolute;
+        top: 10%;
+        left: 5%;
+        width: 90%;
+        height: 2px;
+        background: var(--glide-primary);
+        box-shadow: 0 0 8px var(--glide-primary);
+        opacity: 0;
+      }
+      
+      /* Animation Keyframes */
+      @keyframes glide-scan-motion {
+        0% { top: 10%; opacity: 0; }
+        10% { opacity: 1; }
+        90% { opacity: 1; }
+        100% { top: 90%; opacity: 0; }
+      }
+      
+      .glide-phone-animation-overlay.playing .glide-outlined-phone {
+        animation: glide-phone-appear 3s ease-in-out forwards;
+      }
+      
+      .glide-phone-animation-overlay.playing .glide-scan-line {
+        animation: glide-scan-motion 2s ease-in-out 0.5s infinite;
+      }
+      
+      @keyframes glide-phone-appear {
+        0% { transform: translateY(20px); opacity: 0; }
+        10% { transform: translateY(0); opacity: 1; }
+        90% { transform: translateY(0); opacity: 1; }
+        100% { transform: translateY(20px); opacity: 0; }
+      }
+      
+      /* Dual Mode */
+      .glide-dual-container {
+        display: flex;
+        justify-content: center;
+        align-items: stretch;
+        gap: 32px;
+        margin-top: 20px;
+      }
+      
+      .glide-dual-item {
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+      }
+      
+      .glide-os-logo {
+        display: flex;
+        align-items: center;
+        gap: 8px;
+        font-weight: 600;
+        margin-bottom: 12px;
+        font-size: 15px;
+        color: inherit;
+      }
+      
+      /* Dual mode OS logo - aligned icons with text, spacing to QR */
+      .glide-dual-mode .glide-os-logo {
+        margin-bottom: 12px; /* Space between label and QR code */
+      }
+      
+      #glide-modal .glide-dual-mode .glide-os-logo .glide-icon-os,
+      #glide-modal .glide-dual-mode .glide-os-logo svg {
+        width: var(--glide-dual-icon-size);
+        height: var(--glide-dual-icon-size);
+        margin: 0;
+        padding: 0;
+        flex-shrink: 0;
+      }
+      
+      .glide-dual-mode .glide-os-logo span {
+        margin: 0;
+        padding: 0;
+        line-height: 1;
+      }
+      
+      .glide-os-logo svg {
+        width: 20px;
+        height: 20px;
+        opacity: 0.8;
+      }
+      
+      /* Dual Mode Separator - aligned to QR codes only */
+      .glide-dual-separator {
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        justify-content: center;
+        align-self: stretch;
+        /* Offset for OS label (18px icon + 12px margin = ~30px) */
+        margin-top: 30px;
+        padding: 20px 0;
+      }
+      
+      .glide-separator-line {
+        width: 1px;
+        flex: 1;
+        background: linear-gradient(to bottom, transparent, rgba(128,128,128,0.3), transparent);
+      }
+      
+      .glide-separator-text {
+        padding: 8px 0;
+        font-size: 11px;
+        font-weight: 500;
+        color: rgba(128,128,128,0.5);
+        text-transform: uppercase;
+        letter-spacing: 0.5px;
+      }
+      
+      #glide-modal.dark .glide-separator-line {
+        background: linear-gradient(to bottom, transparent, rgba(255,255,255,0.2), transparent);
+      }
+      
+      #glide-modal.dark .glide-separator-text {
+        color: rgba(255,255,255,0.4);
+      }
+      
+      /* Pre-Step */
+      .glide-pre-step-container {
+        display: flex;
+        gap: 20px;
+        justify-content: center;
+        margin: 24px 0;
+      }
+      
+      .glide-os-choice-btn {
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        justify-content: center;
+        width: 140px;
+        height: 140px;
+        border: 1px solid rgba(0,0,0,0.08);
+        border-radius: 20px;
+        background: rgba(255,255,255,0.4);
+        cursor: pointer;
+        transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
+        position: relative;
+        overflow: hidden;
+        font-size: 14px;
+        color: inherit;
+      }
+      
+      #glide-modal.dark .glide-os-choice-btn {
+        background: rgba(255,255,255,0.05);
+        border-color: rgba(255,255,255,0.1);
+        color: white;
+      }
+      
+      .glide-os-choice-btn:hover {
+        background: rgba(255,255,255,0.9);
+        transform: translateY(-4px);
+        box-shadow: 0 12px 24px rgba(0,0,0,0.1), 0 4px 8px rgba(0,0,0,0.04);
+        border-color: var(--glide-primary);
+      }
+      
+      #glide-modal.dark .glide-os-choice-btn:hover {
+        background: rgba(255,255,255,0.15);
+        box-shadow: 0 12px 24px rgba(0,0,0,0.3);
+        border-color: var(--glide-primary);
+      }
+      
+      .glide-icon-os {
+        width: 40px;
+        height: 40px;
+        margin-bottom: 12px;
+        transition: transform 0.3s;
+        fill: currentColor;
+      }
+      
+      .glide-os-choice-btn:hover .glide-icon-os {
+        transform: scale(1.1);
+      }
+      
+      #glide-modal .glide-btn-back {
+        position: absolute;
+        top: 16px;
+        left: 16px;
+        width: var(--glide-btn-size);
+        height: var(--glide-btn-size);
+        min-width: var(--glide-btn-size);
+        min-height: var(--glide-btn-size);
+        max-width: var(--glide-btn-size);
+        max-height: var(--glide-btn-size);
+        background: rgba(118, 118, 128, 0.12);
+        border: none;
+        border-radius: 50%;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        cursor: pointer;
+        color: rgba(0,0,0,0.5);
+        transition: background 0.2s;
+        z-index: 20;
+        padding: 0;
+        margin: 0;
+        box-sizing: border-box;
+        flex-shrink: 0;
+      }
+      
+      #glide-modal.dark .glide-btn-back {
+        background: rgba(255, 255, 255, 0.1);
+        color: rgba(255,255,255,0.5);
+      }
+
+      .glide-btn-back:hover {
+        background: rgba(118, 118, 128, 0.2);
+      }
+      
+      #glide-modal.dark .glide-btn-back:hover {
+        background: rgba(255, 255, 255, 0.2);
+      }
+      
+      .glide-spinner {
+        width: 40px;
+        height: 40px;
+        border: 3px solid rgba(0,0,0,0.1);
+        border-top-color: var(--glide-primary);
+        border-radius: 50%;
+        animation: glide-spin 1s linear infinite;
+        margin: 40px auto;
+      }
+      
+      #glide-modal.dark .glide-spinner {
+        border-color: rgba(255,255,255,0.1);
+        border-top-color: var(--glide-primary);
+      }
+      
+      @keyframes glide-spin {
+        to { transform: rotate(360deg); }
+      }
+    `;
+        document.head.appendChild(styles);
+    }
+    show() {
+        if (!this.container || !this.backdrop || this.isOpen) {
+            if (this.isOpen && this.container && this.backdrop) {
+                document.removeEventListener('keydown', this.handleEscapeKey);
+                document.addEventListener('keydown', this.handleEscapeKey);
+            }
+            return;
+        }
+        document.body.appendChild(this.backdrop);
+        document.body.appendChild(this.container);
+        // Lock body scroll when modal opens
+        this.lockBodyScroll();
+        document.addEventListener('keydown', this.handleEscapeKey);
+        // Note: setupPlatformToggles and setupHelpInteraction are called in render methods
+        // Don't call them here to avoid duplicate event listeners
+        requestAnimationFrame(() => {
+            if (this.backdrop && this.container) {
+                this.backdrop.style.opacity = '1';
+                this.container.style.opacity = '1';
+                this.container.style.transform = 'translateX(-50%) scale(1)';
+            }
+        });
+        this.isOpen = true;
+    }
+    setupPlatformToggles() {
+        const container = this.container?.querySelector('#glide-toggle');
+        const platformBtns = this.container?.querySelectorAll('.glide-toggle-btn');
+        const qrImg = this.container?.querySelector('#glide-qr-img');
+        const message = this.container?.querySelector('#glide-platform-message');
+        if (!platformBtns || !qrImg)
+            return;
+        platformBtns.forEach((btn) => {
+            btn.addEventListener('click', (e) => {
+                const target = e.currentTarget;
+                const platform = target.getAttribute('data-platform');
+                // Update container state for slider
+                if (container && platform) {
+                    container.setAttribute('data-active', platform);
+                }
+                platformBtns.forEach(b => b.classList.remove('active'));
+                target.classList.add('active');
+                if (platform === 'ios') {
+                    qrImg.src = qrImg.getAttribute('data-ios') || '';
+                    if (message)
+                        message.textContent = 'Scan with your iPhone camera';
+                }
+                else if (platform === 'android') {
+                    qrImg.src = qrImg.getAttribute('data-android') || '';
+                    if (message)
+                        message.textContent = 'Scan with your Android camera';
+                }
+            });
+        });
+    }
+    // --- Body Scroll Lock ---
+    lockBodyScroll() {
+        this.originalBodyOverflow = document.body.style.overflow;
+        document.body.style.overflow = 'hidden';
+    }
+    unlockBodyScroll() {
+        document.body.style.overflow = this.originalBodyOverflow;
+    }
+    close() {
+        if (!this.container || !this.backdrop || !this.isOpen)
+            return;
+        this.isClosing = true;
+        document.removeEventListener('keydown', this.handleEscapeKey);
+        this.backdrop.style.opacity = '0';
+        this.container.style.opacity = '0';
+        this.container.style.transform = 'translateX(-50%) scale(0.94)';
+        this.closeCallback = undefined;
+        setTimeout(() => {
+            // Only cleanup if we're still in closing state (not interrupted by new modal)
+            if (this.isClosing) {
+                this.cleanup();
+                this.isOpen = false;
+                this.isClosing = false;
+            }
+        }, 400);
+    }
+    cleanup() {
+        this.container?.remove();
+        this.backdrop?.remove();
+        this.container = null;
+        this.backdrop = null;
+        // Unlock body scroll when modal closes
+        this.unlockBodyScroll();
+    }
+    /**
+     * Check if modal is currently open
+     */
+    isModalOpen() {
+        return this.isOpen;
+    }
+}
+/**
+ * Helper to create QRCodeData from DesktopData
+ */
+export function createQRCodeDataFromDesktop(desktopData) {
+    const { data } = desktopData;
+    // If we have platform-specific QRs
+    if (data.ios_qr_image) {
+        return {
+            iosQRCode: data.ios_qr_image,
+            androidQRCode: data.android_qr_image || data.ios_qr_image,
+        };
+    }
+    // Fallback to single QR
+    if (data.qr_code_image) {
+        return data.qr_code_image;
+    }
+    throw new Error('No QR code data available');
+}