smartcomply-web-sdk 1.0.3 → 1.0.4

package/dist/esm/flow/DocumentCapture.js

@@ -0,0 +1,797 @@
+export class DocumentCapture {
+    constructor() {
+        this.root = null;
+        this.videoEl = null;
+        this.stream = null;
+        this.resolveCapture = null;
+        this.rejectCapture = null;
+        this.frontBlob = null;
+        this.backBlob = null;
+        this.currentSide = 'front';
+    }
+    /**
+     * Mount the document capture UI and return a promise that resolves
+     * with the captured document image(s).
+     */
+    capture(container, theme, documentType) {
+        return new Promise((resolve, reject) => {
+            // Validate input parameters
+            if (!container) {
+                reject(new Error("Container element is required"));
+                return;
+            }
+            if (!theme) {
+                reject(new Error("Theme configuration is required"));
+                return;
+            }
+            if (!documentType || typeof documentType !== 'string') {
+                reject(new Error("Document type is required and must be a string"));
+                return;
+            }
+            // Check if already capturing
+            if (this.resolveCapture || this.rejectCapture) {
+                reject(new Error("Document capture is already in progress"));
+                return;
+            }
+            this.resolveCapture = resolve;
+            this.rejectCapture = reject;
+            this.frontBlob = null;
+            this.backBlob = null;
+            this.currentSide = 'front';
+            this.renderChoiceScreen(container, theme, documentType);
+        });
+    }
+    destroy() {
+        // Stop any ongoing camera streams
+        this.stopCamera();
+        // Clean up DOM elements
+        if (this.root && this.root.parentElement) {
+            this.root.parentElement.removeChild(this.root);
+        }
+        this.root = null;
+        // Clean up any pending promises
+        if (this.rejectCapture) {
+            this.rejectCapture(new Error("Document capture was cancelled"));
+            this.rejectCapture = null;
+        }
+        this.resolveCapture = null;
+        // Clean up blob data
+        this.frontBlob = null;
+        this.backBlob = null;
+        this.currentSide = 'front';
+    }
+    requiresBackSide(documentType) {
+        const type = documentType.toLowerCase();
+        return type.includes("voter") ||
+            type.includes("nin") ||
+            type.includes("driver") ||
+            type.includes("license") ||
+            type.includes("national id") ||
+            type.includes("national id card") ||
+            type.includes("ghana");
+    }
+    renderChoiceScreen(container, theme, documentType) {
+        this.root = document.createElement("div");
+        this.root.style.cssText = "display:flex;flex-direction:column;align-items:center;gap:24px;padding:24px 20px;max-width:100%;";
+        const docLabel = this.getDocumentLabel(documentType);
+        const requiresBack = this.requiresBackSide(documentType);
+        const isCapturingFront = this.currentSide === 'front';
+        // Header with enhanced illustration
+        const header = document.createElement("div");
+        header.style.cssText = "display:flex;flex-direction:column;align-items:center;gap:16px;text-align:center;";
+        // Enhanced illustration with gradient background
+        const iconContainer = document.createElement("div");
+        iconContainer.style.cssText = `
+      width:120px;height:120px;border-radius:24px;
+      display:flex;align-items:center;justify-content:center;
+      background:linear-gradient(135deg, ${theme.primary}15, ${theme.primary}05);
+      border:3px solid ${theme.primary}30;
+      position:relative;overflow:hidden;
+      box-shadow:0 8px 32px ${theme.primary}20;
+    `;
+        const icon = document.createElement("div");
+        icon.style.cssText = "font-size:48px;animation:float 3s ease-in-out infinite;";
+        icon.textContent = "🪪";
+        iconContainer.appendChild(icon);
+        // Add floating animation
+        if (!document.head.querySelector('style[data-float-animation]')) {
+            const style = document.createElement('style');
+            style.setAttribute('data-float-animation', 'true');
+            style.textContent = `
+        @keyframes float {
+          0%, 100% { transform: translateY(0px); }
+          50% { transform: translateY(-10px); }
+        }
+      `;
+            document.head.appendChild(style);
+        }
+        header.appendChild(iconContainer);
+        // Enhanced title and subtitle
+        const title = document.createElement("div");
+        title.style.cssText = `color:${theme.text};font-size:20px;font-weight:700;text-align:center;line-height:1.4;`;
+        let labelText = `Capture your ${docLabel}`;
+        if (requiresBack) {
+            labelText += ` (${isCapturingFront ? 'Front Side' : 'Back Side'})`;
+        }
+        title.textContent = labelText;
+        header.appendChild(title);
+        const subtitle = document.createElement("div");
+        subtitle.style.cssText = `color:${theme.textSecondary};font-size:14px;text-align:center;line-height:1.5;max-width:280px;`;
+        subtitle.textContent = "Choose how you'd like to provide your document";
+        header.appendChild(subtitle);
+        this.root.appendChild(header);
+        // Enhanced progress indicator for multi-sided documents
+        if (requiresBack) {
+            const progress = document.createElement("div");
+            progress.style.cssText = `
+        display:flex;flex-direction:column;align-items:center;gap:12px;
+        padding:16px 20px;background:${theme.primary}08;border-radius:16px;
+        border:1px solid ${theme.primary}20;width:100%;max-width:320px;
+      `;
+            progress.innerHTML = `
+        <div style="display:flex;gap:8px;align-items:center;">
+          <div style="width:12px;height:12px;border-radius:50%;background:${isCapturingFront ? theme.primary : theme.border};transition:all 0.3s ease;"></div>
+          <div style="width:32px;height:2px;background:${theme.border};border-radius:1px;"></div>
+          <div style="width:12px;height:12px;border-radius:50%;background:${!isCapturingFront ? theme.primary : theme.border};transition:all 0.3s ease;"></div>
+        </div>
+        <span style="color:${theme.text};font-size:13px;font-weight:600;">${isCapturingFront ? 'Step 1 of 2' : 'Step 2 of 2'}</span>
+      `;
+            this.root.appendChild(progress);
+        }
+        // Enhanced action buttons container
+        const actionsContainer = document.createElement("div");
+        actionsContainer.style.cssText = "display:flex;flex-direction:column;gap:16px;width:100%;max-width:320px;";
+        // Camera button with enhanced design
+        const cameraBtn = this.createEnhancedButton("📷  Take Photo with Camera", theme, true, "Open camera to capture document");
+        cameraBtn.addEventListener("click", () => {
+            this.showLoadingState("Opening camera...", theme);
+            this.root.innerHTML = "";
+            setTimeout(() => {
+                this.renderCameraView(this.root, theme, documentType);
+            }, 500);
+        });
+        actionsContainer.appendChild(cameraBtn);
+        // Upload button with enhanced design
+        const uploadBtn = this.createEnhancedButton("📁  Choose from Gallery", theme, false, "Upload document image from device");
+        uploadBtn.addEventListener("click", () => {
+            this.handleFileUpload(container, theme);
+        });
+        actionsContainer.appendChild(uploadBtn);
+        this.root.appendChild(actionsContainer);
+        // Enhanced tips section
+        const tips = document.createElement("div");
+        tips.style.cssText = `
+      width:100%;padding:16px 20px;border-radius:16px;
+      background:${theme.shimmer};border:1px solid ${theme.border};
+      margin-top:8px;
+    `;
+        const tipsTitle = document.createElement("div");
+        tipsTitle.style.cssText = `font-weight:700;color:${theme.text};margin-bottom:12px;font-size:14px;display:flex;align-items:center;gap:8px;`;
+        tipsTitle.innerHTML = `💡 Tips for best results`;
+        tips.appendChild(tipsTitle);
+        const tipsList = document.createElement("div");
+        tipsList.style.cssText = `display:grid;gap:8px;font-size:13px;color:${theme.textSecondary};line-height:1.6;`;
+        tipsList.innerHTML = `
+      <div style="display:flex;gap:8px;align-items:flex-start;">
+        <span style="color:${theme.primary};font-weight:bold;">✓</span>
+        <span>Lay document flat on a solid surface</span>
+      </div>
+      <div style="display:flex;gap:8px;align-items:flex-start;">
+        <span style="color:${theme.primary};font-weight:bold;">✓</span>
+        <span>Ensure all four corners are visible</span>
+      </div>
+      <div style="display:flex;gap:8px;align-items:flex-start;">
+        <span style="color:${theme.primary};font-weight:bold;">✓</span>
+        <span>Use good lighting, avoid glare</span>
+      </div>
+      <div style="display:flex;gap:8px;align-items:flex-start;">
+        <span style="color:${theme.primary};font-weight:bold;">✓</span>
+        <span>Make sure all text is clearly readable</span>
+      </div>
+    `;
+        tips.appendChild(tipsList);
+        this.root.appendChild(tips);
+        // File input (hidden)
+        const fileInput = document.createElement("input");
+        fileInput.type = "file";
+        fileInput.accept = "image/jpeg,image/png";
+        fileInput.style.display = "none";
+        fileInput.id = "sc-doc-file-input";
+        fileInput.addEventListener("change", (e) => {
+            const file = e.target.files?.[0];
+            if (file) {
+                // Validate file
+                const validationError = this.validateFile(file);
+                if (validationError) {
+                    this.showError(validationError);
+                    return;
+                }
+                this.showLoadingState("Processing image...", theme);
+                this.compressImage(file, 1280, 960, 0.85)
+                    .then((compressed) => this.handleFileUploadComplete(compressed, container, theme, documentType))
+                    .catch(() => this.handleFileUploadComplete(file, container, theme, documentType)); // fallback to original if compress fails
+            }
+        });
+        this.root.appendChild(fileInput);
+        container.appendChild(this.root);
+    }
+    renderCameraView(container, theme, documentType) {
+        const wrapper = document.createElement("div");
+        wrapper.style.cssText = "position:relative;width:100%;border-radius:12px;overflow:hidden;background:#000;";
+        this.videoEl = document.createElement("video");
+        this.videoEl.autoplay = true;
+        this.videoEl.playsInline = true;
+        this.videoEl.muted = true;
+        this.videoEl.style.cssText = "width:100%;display:block;aspect-ratio:4/3;object-fit:cover;";
+        wrapper.appendChild(this.videoEl);
+        // Guide overlay — rectangular
+        const guide = document.createElement("div");
+        guide.style.cssText = `
+      position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
+      pointer-events:none;
+    `;
+        const rect = document.createElement("div");
+        rect.style.cssText = `
+      width:85%;height:60%;border:2px solid rgba(255,255,255,0.6);
+      border-radius:12px;box-shadow:0 0 0 9999px rgba(0,0,0,0.4);
+    `;
+        guide.appendChild(rect);
+        wrapper.appendChild(guide);
+        // Guide label
+        const guideLbl = document.createElement("div");
+        guideLbl.style.cssText = `
+      position:absolute;bottom:60px;left:0;right:0;text-align:center;
+      color:#fff;font-size:13px;font-weight:600;
+      text-shadow:0 1px 3px rgba(0,0,0,0.5);
+    `;
+        guideLbl.textContent = `Align your ${this.getDocumentLabel(documentType)} within the frame`;
+        wrapper.appendChild(guideLbl);
+        container.appendChild(wrapper);
+        // Capture button
+        const captureBtn = document.createElement("button");
+        captureBtn.style.cssText = `
+      display:block;margin:16px auto 0;width:64px;height:64px;
+      border-radius:50%;border:4px solid ${theme.primary};
+      background:transparent;cursor:pointer;position:relative;
+      transition:all 0.2s ease;
+    `;
+        const inner = document.createElement("div");
+        inner.style.cssText = `
+      width:48px;height:48px;border-radius:50%;background:${theme.primary};
+      position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
+      transition:all 0.15s ease;
+    `;
+        captureBtn.appendChild(inner);
+        captureBtn.addEventListener("mousedown", () => {
+            inner.style.transform = "translate(-50%,-50%) scale(0.9)";
+        });
+        captureBtn.addEventListener("mouseup", () => {
+            inner.style.transform = "translate(-50%,-50%) scale(1)";
+        });
+        captureBtn.addEventListener("click", () => {
+            this.captureFrame(container, theme, documentType);
+        });
+        container.appendChild(captureBtn);
+        // Open camera
+        this.openCamera();
+    }
+    async openCamera() {
+        // Check browser compatibility
+        if (!navigator.mediaDevices || !navigator.mediaDevices.getUserMedia) {
+            this.rejectCapture?.(new Error("Camera access is not supported in this browser. Please use a modern browser like Chrome, Firefox, or Safari."));
+            return;
+        }
+        const maxRetries = 3;
+        let retryCount = 0;
+        const attemptCameraAccess = async (constraints) => {
+            try {
+                return await navigator.mediaDevices.getUserMedia(constraints);
+            }
+            catch (err) {
+                console.warn(`Camera access attempt ${retryCount + 1} failed:`, err);
+                if (retryCount < maxRetries - 1) {
+                    retryCount++;
+                    await new Promise(resolve => setTimeout(resolve, 1000 * retryCount)); // Exponential backoff
+                    return attemptCameraAccess(constraints);
+                }
+                throw err;
+            }
+        };
+        try {
+            // Try rear camera first
+            this.stream = await attemptCameraAccess({
+                video: {
+                    facingMode: { ideal: "environment" },
+                    width: { ideal: 1280 },
+                    height: { ideal: 960 },
+                },
+            });
+        }
+        catch (err) {
+            console.warn("Rear camera failed, trying any camera:", err);
+            // Fallback to any camera
+            try {
+                this.stream = await attemptCameraAccess({
+                    video: { width: { ideal: 1280 } },
+                });
+            }
+            catch (fallbackErr) {
+                const errorMessage = this.getCameraErrorMessage(fallbackErr);
+                this.rejectCapture?.(new Error(errorMessage));
+                return;
+            }
+        }
+        if (this.videoEl) {
+            this.videoEl.srcObject = this.stream;
+        }
+    }
+    getCameraErrorMessage(error) {
+        if (error.name === 'NotAllowedError') {
+            return "Camera access denied. Please allow camera permissions and try again.";
+        }
+        else if (error.name === 'NotFoundError') {
+            return "No camera found. Please ensure your device has a working camera.";
+        }
+        else if (error.name === 'NotReadableError') {
+            return "Camera is already in use by another application. Please close other apps using the camera and try again.";
+        }
+        else if (error.name === 'OverconstrainedError') {
+            return "Camera constraints not supported. Trying with different settings...";
+        }
+        else {
+            return "Camera access failed. Please check your camera permissions and try again.";
+        }
+    }
+    captureFrame(container, theme, documentType) {
+        if (!this.videoEl)
+            return;
+        const MAX_W = 1280;
+        const MAX_H = 960;
+        const vw = this.videoEl.videoWidth || MAX_W;
+        const vh = this.videoEl.videoHeight || MAX_H;
+        const ratio = Math.min(MAX_W / vw, MAX_H / vh, 1);
+        const canvas = document.createElement("canvas");
+        canvas.width = Math.round(vw * ratio);
+        canvas.height = Math.round(vh * ratio);
+        const ctx = canvas.getContext("2d");
+        if (!ctx)
+            return;
+        ctx.drawImage(this.videoEl, 0, 0, canvas.width, canvas.height);
+        canvas.toBlob((blob) => {
+            if (blob) {
+                this.stopCamera();
+                this.showPreview(container, theme, blob, documentType);
+            }
+        }, "image/jpeg", 0.85);
+    }
+    showPreview(container, theme, imageData, documentType) {
+        if (this.root)
+            this.root.innerHTML = "";
+        else {
+            this.root = document.createElement("div");
+            container.appendChild(this.root);
+        }
+        this.root.style.cssText = "display:flex;flex-direction:column;align-items:center;gap:16px;";
+        // Preview image
+        const img = document.createElement("img");
+        const imageUrl = URL.createObjectURL(imageData);
+        img.src = imageUrl;
+        img.style.cssText = `
+      width:100%;max-height:300px;object-fit:contain;border-radius:12px;
+      border:2px solid ${theme.border};
+    `;
+        this.root.appendChild(img);
+        // Store URL for cleanup
+        img._blobUrl = imageUrl;
+        const label = document.createElement("div");
+        label.style.cssText = `color:${theme.textSecondary};font-size:13px;text-align:center;font-weight:500;`;
+        label.textContent = "Does the photo look clear?";
+        this.root.appendChild(label);
+        const sublabel = document.createElement("div");
+        sublabel.style.cssText = `color:${theme.textMuted};font-size:11px;text-align:center;line-height:1.6;`;
+        sublabel.textContent = "All text must be readable and all four corners must be visible.";
+        this.root.appendChild(sublabel);
+        // Buttons
+        const btnRow = document.createElement("div");
+        btnRow.style.cssText = "display:flex;gap:12px;width:100%;";
+        const retakeBtn = this.createButton("Retake", theme, false);
+        retakeBtn.style.flex = "1";
+        retakeBtn.addEventListener("click", () => {
+            if (img._blobUrl) {
+                URL.revokeObjectURL(img._blobUrl);
+            }
+            this.root.innerHTML = "";
+            this.renderChoiceScreen(container, theme, documentType);
+        });
+        const useBtn = this.createButton("Use Photo ✓", theme, true);
+        useBtn.style.flex = "1";
+        useBtn.addEventListener("click", () => {
+            if (img._blobUrl) {
+                URL.revokeObjectURL(img._blobUrl);
+            }
+            useBtn.textContent = "Processing...";
+            useBtn.disabled = true;
+            this.compressImage(imageData, 1280, 960, 0.85)
+                .then((compressed) => this.handleCaptureComplete(compressed, container, theme, documentType))
+                .catch(() => this.handleCaptureComplete(imageData, container, theme, documentType)); // fallback to original
+        });
+        btnRow.appendChild(retakeBtn);
+        btnRow.appendChild(useBtn);
+        this.root.appendChild(btnRow);
+    }
+    handleCaptureComplete(imageData, container, theme, documentType) {
+        const requiresBack = this.requiresBackSide(documentType);
+        const wasCapturingFront = this.currentSide === 'front';
+        // Store the captured image
+        if (wasCapturingFront) {
+            this.frontBlob = imageData;
+        }
+        else {
+            this.backBlob = imageData;
+        }
+        // If we need back side and haven't captured it yet, move to back side
+        if (requiresBack && wasCapturingFront) {
+            this.currentSide = 'back';
+            this.root.innerHTML = "";
+            this.renderChoiceScreen(container, theme, documentType);
+            return;
+        }
+        // All captures complete, resolve with result
+        if (!this.frontBlob) {
+            this.rejectCapture?.(new Error("No front image captured. Please try again."));
+            return;
+        }
+        const result = {
+            front: this.frontBlob,
+            back: this.backBlob || undefined
+        };
+        this.resolveCapture?.(result);
+    }
+    handleFileUploadComplete(imageData, container, theme, documentType) {
+        // Show preview first, then handle completion
+        this.showPreview(container, theme, imageData, documentType);
+    }
+    validateFile(file) {
+        // Check file type
+        const allowedTypes = ['image/jpeg', 'image/jpg', 'image/png'];
+        if (!allowedTypes.includes(file.type)) {
+            return "Invalid file type. Please upload a JPEG or PNG image.";
+        }
+        // Check file size (max 10MB)
+        const maxSize = 10 * 1024 * 1024;
+        if (file.size > maxSize) {
+            return "File is too large. Please upload an image smaller than 10MB.";
+        }
+        // Check minimum file size (at least 1KB to avoid empty files)
+        if (file.size < 1024) {
+            return "File is too small. Please upload a valid image file.";
+        }
+        return null;
+    }
+    handleFileUpload(container, theme) {
+        const input = this.root?.querySelector("#sc-doc-file-input");
+        if (input)
+            input.click();
+    }
+    stopCamera() {
+        if (this.stream) {
+            this.stream.getTracks().forEach((t) => t.stop());
+            this.stream = null;
+        }
+        if (this.videoEl) {
+            this.videoEl.srcObject = null;
+            this.videoEl = null;
+        }
+    }
+    createEnhancedButton(label, theme, isPrimary, ariaLabel) {
+        const btn = document.createElement("button");
+        btn.textContent = label;
+        btn.setAttribute("aria-label", ariaLabel);
+        btn.style.cssText = `
+      padding:18px 24px;border-radius:16px;font-size:16px;font-weight:600;
+      cursor:pointer;transition:all 0.3s ease;border:none;width:100%;
+      min-height:56px;touch-action:manipulation;-webkit-tap-highlight-color:transparent;
+      position:relative;overflow:hidden;
+      ${isPrimary
+            ? `background:linear-gradient(135deg, ${theme.primary}, ${theme.primary}DD);color:#fff;box-shadow:0 8px 24px ${theme.primary}25, 0 4px 12px ${theme.primary}15;`
+            : `background:${theme.inputBg};color:${theme.text};border:2px solid ${theme.border};box-shadow:0 2px 8px ${theme.border}20;`}
+    `;
+        // Add ripple effect
+        btn.addEventListener("click", (e) => {
+            const ripple = document.createElement("span");
+            const rect = btn.getBoundingClientRect();
+            const size = Math.max(rect.width, rect.height);
+            const x = e.clientX - rect.left - size / 2;
+            const y = e.clientY - rect.top - size / 2;
+            ripple.style.cssText = `
+        position:absolute;width:${size}px;height:${size}px;
+        left:${x}px;top:${y}px;border-radius:50%;
+        background:${isPrimary ? 'rgba(255,255,255,0.3)' : theme.primary + '20'};
+        transform:scale(0);animation:ripple 0.6s ease-out;
+        pointer-events:none;
+      `;
+            btn.appendChild(ripple);
+            setTimeout(() => ripple.remove(), 600);
+        });
+        btn.addEventListener("mouseenter", () => {
+            btn.style.transform = "translateY(-2px)";
+            if (isPrimary) {
+                btn.style.boxShadow = `0 12px 32px ${theme.primary}30, 0 6px 16px ${theme.primary}20`;
+            }
+            else {
+                btn.style.boxShadow = `0 4px 16px ${theme.border}30, 0 2px 8px ${theme.border}20`;
+                btn.style.borderColor = theme.primary;
+            }
+        });
+        btn.addEventListener("mouseleave", () => {
+            btn.style.transform = "translateY(0)";
+            if (isPrimary) {
+                btn.style.boxShadow = `0 8px 24px ${theme.primary}25, 0 4px 12px ${theme.primary}15`;
+            }
+            else {
+                btn.style.boxShadow = `0 2px 8px ${theme.border}20`;
+                btn.style.borderColor = theme.border;
+            }
+        });
+        // Add ripple animation
+        if (!document.head.querySelector('style[data-ripple-animation]')) {
+            const style = document.createElement('style');
+            style.setAttribute('data-ripple-animation', 'true');
+            style.textContent = `
+        @keyframes ripple {
+          to { transform: scale(4); opacity: 0; }
+        }
+      `;
+            document.head.appendChild(style);
+        }
+        return btn;
+    }
+    showLoadingState(message, theme) {
+        if (!this.root)
+            return;
+        this.root.innerHTML = "";
+        this.root.style.cssText = "display:flex;flex-direction:column;align-items:center;justify-content:center;gap:20px;padding:40px 20px;min-height:300px;";
+        // Enhanced loading spinner
+        const spinnerContainer = document.createElement("div");
+        spinnerContainer.style.cssText = "position:relative;width:80px;height:80px;";
+        const spinner = document.createElement("div");
+        spinner.style.cssText = `
+      position:absolute;inset:0;border-radius:50%;
+      border:4px solid ${theme.border};
+      border-top-color:${theme.primary};
+      animation:sc-spin 1s linear infinite;
+    `;
+        spinnerContainer.appendChild(spinner);
+        const centerIcon = document.createElement("div");
+        centerIcon.style.cssText = `
+      position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
+      font-size:28px;animation:pulse 2s ease-in-out infinite;
+    `;
+        centerIcon.textContent = "📄";
+        spinnerContainer.appendChild(centerIcon);
+        this.root.appendChild(spinnerContainer);
+        // Loading message
+        const loadingText = document.createElement("div");
+        loadingText.style.cssText = `
+      color:${theme.text};font-size:16px;font-weight:600;text-align:center;
+      animation:fadeIn 0.5s ease-out;
+    `;
+        loadingText.textContent = message;
+        this.root.appendChild(loadingText);
+        // Add pulse animation
+        if (!document.head.querySelector('style[data-pulse-animation]')) {
+            const style = document.createElement('style');
+            style.setAttribute('data-pulse-animation', 'true');
+            style.textContent = `
+        @keyframes pulse {
+          0%, 100% { transform: scale(1); opacity: 1; }
+          50% { transform: scale(1.1); opacity: 0.8; }
+        }
+        @keyframes fadeIn {
+          from { opacity: 0; transform: translateY(10px); }
+          to { opacity: 1; transform: translateY(0); }
+        }
+      `;
+            document.head.appendChild(style);
+        }
+    }
+    showError(message) {
+        if (!this.root)
+            return;
+        const errorContainer = document.createElement("div");
+        errorContainer.style.cssText = `
+      display:flex;align-items:center;gap:12px;padding:16px;
+      background:#ff444415;border:1px solid #ff444430;border-radius:12px;
+      color:#ff4444;font-size:14px;margin-top:16px;animation:shake 0.5s ease-in-out;
+    `;
+        errorContainer.innerHTML = `
+      <span style="font-size:18px;">⚠️</span>
+      <span>${message}</span>
+    `;
+        // Add shake animation
+        if (!document.head.querySelector('style[data-shake-animation]')) {
+            const style = document.createElement('style');
+            style.setAttribute('data-shake-animation', 'true');
+            style.textContent = `
+        @keyframes shake {
+          0%, 100% { transform: translateX(0); }
+          25% { transform: translateX(-5px); }
+          75% { transform: translateX(5px); }
+        }
+      `;
+            document.head.appendChild(style);
+        }
+        this.root.appendChild(errorContainer);
+        setTimeout(() => errorContainer.remove(), 5000);
+    }
+    createButton(label, theme, isPrimary) {
+        const btn = document.createElement("button");
+        btn.textContent = label;
+        btn.style.cssText = `
+      padding:16px 24px;border-radius:12px;font-size:16px;font-weight:600;
+      cursor:pointer;transition:all 0.2s ease;border:none;width:100%;
+      min-height:52px;touch-action:manipulation;-webkit-tap-highlight-color:transparent;
+      ${isPrimary
+            ? `background:${theme.primary};color:#fff;box-shadow:0 4px 12px ${theme.primary}30;`
+            : `background:${theme.inputBg};color:${theme.text};border:2px solid ${theme.border};`}
+    `;
+        btn.addEventListener("mouseenter", () => {
+            btn.style.transform = "translateY(-1px)";
+            if (isPrimary)
+                btn.style.background = theme.primaryHover;
+        });
+        btn.addEventListener("mouseleave", () => {
+            btn.style.transform = "translateY(0)";
+            if (isPrimary)
+                btn.style.background = theme.primary;
+        });
+        return btn;
+    }
+    compressImage(source, maxWidth, maxHeight, quality) {
+        return new Promise((resolve, reject) => {
+            // Read EXIF orientation FIRST so we can correct rotation before canvas draw.
+            // Canvas ignores EXIF metadata — without this, phone uploads arrive rotated.
+            this._readExifOrientation(source).then((orientation) => {
+                const url = URL.createObjectURL(source);
+                const imgEl = document.createElement("img");
+                imgEl.onload = () => {
+                    URL.revokeObjectURL(url);
+                    let { naturalWidth: w, naturalHeight: h } = imgEl;
+                    // For orientations 5-8 the image is rotated 90°/270° — swap dimensions
+                    const swapped = orientation >= 5 && orientation <= 8;
+                    const srcW = swapped ? h : w;
+                    const srcH = swapped ? w : h;
+                    const ratio = Math.min(maxWidth / srcW, maxHeight / srcH, 1);
+                    const outW = Math.round(srcW * ratio);
+                    const outH = Math.round(srcH * ratio);
+                    const canvas = document.createElement("canvas");
+                    canvas.width = outW;
+                    canvas.height = outH;
+                    const ctx = canvas.getContext("2d");
+                    if (!ctx) {
+                        reject(new Error("Canvas unavailable"));
+                        return;
+                    }
+                    // Apply EXIF rotation transform before drawing
+                    ctx.save();
+                    if (orientation === 2) {
+                        ctx.transform(-1, 0, 0, 1, outW, 0);
+                    }
+                    else if (orientation === 3) {
+                        ctx.transform(-1, 0, 0, -1, outW, outH);
+                    }
+                    else if (orientation === 4) {
+                        ctx.transform(1, 0, 0, -1, 0, outH);
+                    }
+                    else if (orientation === 5) {
+                        ctx.transform(0, 1, 1, 0, 0, 0);
+                    }
+                    else if (orientation === 6) {
+                        ctx.transform(0, 1, -1, 0, outH, 0);
+                    }
+                    else if (orientation === 7) {
+                        ctx.transform(0, -1, -1, 0, outH, outW);
+                    }
+                    else if (orientation === 8) {
+                        ctx.transform(0, -1, 1, 0, 0, outW);
+                    }
+                    ctx.drawImage(imgEl, 0, 0, swapped ? outH : outW, swapped ? outW : outH);
+                    ctx.restore();
+                    canvas.toBlob((blob) => { blob ? resolve(blob) : reject(new Error("Compression failed")); }, "image/jpeg", quality);
+                };
+                imgEl.onerror = () => { URL.revokeObjectURL(url); reject(new Error("Image load failed")); };
+                imgEl.src = url;
+            }).catch(() => {
+                // If EXIF read fails, fall back to simple compression without rotation
+                const url = URL.createObjectURL(source);
+                const imgEl = document.createElement("img");
+                imgEl.onload = () => {
+                    URL.revokeObjectURL(url);
+                    let { naturalWidth: w, naturalHeight: h } = imgEl;
+                    const ratio = Math.min(maxWidth / w, maxHeight / h, 1);
+                    const canvas = document.createElement("canvas");
+                    canvas.width = Math.round(w * ratio);
+                    canvas.height = Math.round(h * ratio);
+                    const ctx = canvas.getContext("2d");
+                    if (!ctx) {
+                        reject(new Error("Canvas unavailable"));
+                        return;
+                    }
+                    ctx.drawImage(imgEl, 0, 0, canvas.width, canvas.height);
+                    canvas.toBlob((blob) => { blob ? resolve(blob) : reject(new Error("Compression failed")); }, "image/jpeg", quality);
+                };
+                imgEl.onerror = () => { URL.revokeObjectURL(url); reject(new Error("Image load failed")); };
+                imgEl.src = url;
+            });
+        });
+    }
+    /**
+     * Read JPEG EXIF orientation tag (1–8) from a Blob/File.
+     * Returns 1 (no rotation) if EXIF is absent or unreadable.
+     */
+    _readExifOrientation(source) {
+        return new Promise((resolve) => {
+            const reader = new FileReader();
+            reader.onload = (e) => {
+                try {
+                    const buf = e.target?.result;
+                    const view = new DataView(buf);
+                    if (view.getUint16(0, false) !== 0xFFD8) {
+                        resolve(1);
+                        return;
+                    } // not JPEG
+                    let offset = 2;
+                    while (offset < view.byteLength) {
+                        const marker = view.getUint16(offset, false);
+                        offset += 2;
+                        if (marker === 0xFFE1) { // APP1 — may contain EXIF
+                            if (view.getUint32(offset + 2, false) !== 0x45786966) {
+                                resolve(1);
+                                return;
+                            }
+                            const little = view.getUint16(offset + 8, false) === 0x4949;
+                            const ifdOff = offset + 8 + view.getUint32(offset + 12, little);
+                            const tags = view.getUint16(ifdOff, little);
+                            for (let i = 0; i < tags; i++) {
+                                if (view.getUint16(ifdOff + 2 + 12 * i, little) === 0x0112) {
+                                    resolve(view.getUint16(ifdOff + 2 + 12 * i + 8, little));
+                                    return;
+                                }
+                            }
+                            resolve(1);
+                            return;
+                        }
+                        else if ((marker & 0xFF00) !== 0xFF00) {
+                            break;
+                        }
+                        else {
+                            offset += view.getUint16(offset, false);
+                        }
+                    }
+                    resolve(1);
+                }
+                catch {
+                    resolve(1);
+                }
+            };
+            reader.onerror = () => resolve(1);
+            // Only need the first 64KB — EXIF is always in the first APP1 segment
+            reader.readAsArrayBuffer(source.slice(0, 65536));
+        });
+    }
+    getDocumentLabel(type) {
+        const t = type.toLowerCase();
+        if (t.includes("passport"))
+            return "passport";
+        if (t.includes("driver") || t.includes("licen"))
+            return "driver's license";
+        if (t.includes("voter") || t.includes("pvc"))
+            return "voter's card";
+        if (t.includes("national") || t.includes("nin") || t.includes("national id"))
+            return "national ID card";
+        if (t.includes("bvn"))
+            return "BVN card";
+        return "identity document";
+    }
+}
+//# sourceMappingURL=DocumentCapture.js.map