smartcomply-web-sdk 1.0.61 → 1.0.63

package/dist/esm/flow/DocumentCapture.js

@@ -1,9 +1,18 @@
+import { RADIUS, TYPE } from "./theme";
 import { assessQuality } from "../utils/ImageQuality";
+import { requiresBackSide, computeScaleRatio } from "../utils/documentRules";
+import { CameraManager, CameraAccessError } from "../camera/CameraManager";
+import { isRetryableCameraError } from "../camera/Permission";
+import { DOC_CAMERA_IDEAL_WIDTH, DOC_CAMERA_IDEAL_HEIGHT } from "../utils/constants";
+import { icon } from "./icons";
+import { renderSpinner } from "./spinner";
 export class DocumentCapture {
     constructor() {
         this.root = null;
         this.videoEl = null;
-        this.stream = null;
+        this.videoWrapEl = null;
+        this.cameraManager = new CameraManager();
+        this.orientationHandler = null;
         this.resolveCapture = null;
         this.rejectCapture = null;
         this.frontBlob = null;
@@ -63,26 +72,11 @@ export class DocumentCapture {
         this.backBlob = null;
         this.currentSide = 'front';
     }
-    requiresBackSide(documentType) {
-        // Only request back-side capture for documents where the backend OCR
-        // actually needs the reverse face. NIN cards are single-sided for OCR
-        // purposes — do NOT include "nin" here.
-        const type = documentType.toLowerCase();
-        return type.includes("voter") ||
-            type.includes("driver") ||
-            type.includes("license") ||
-            type.includes("national id") ||
-            type.includes("national id card") ||
-            type.includes("ghana");
-        // Passport: back side is the machine-readable zone but OCR reads from front only.
-        // NIN / NIN with face: front only needed.
-        // Voter's card / Driver's license / National ID card: back required.
-    }
     shouldCaptureBackSide(documentType) {
-        // Prefer the backend-provided flag; fall back to local heuristics only when absent.
+        // Prefer the backend-provided flag; fall back to the shared heuristic only when absent.
         return this.requiresBackOverride !== undefined
             ? this.requiresBackOverride
-            : this.requiresBackSide(documentType);
+            : requiresBackSide(documentType);
     }
     renderChoiceScreen(container, theme, documentType) {
         this.root = document.createElement("div");
@@ -106,14 +100,14 @@ export class DocumentCapture {
         iconBox.style.cssText = `
       width:48px;height:48px;border-radius:14px;flex-shrink:0;
       display:flex;align-items:center;justify-content:center;
-      font-size:24px;
+      color:${theme.primary};
       background:${theme.primary}15;
       border:1.5px solid ${theme.primary}30;
     `;
-        iconBox.textContent = this._docIcon(documentType);
+        iconBox.innerHTML = icon(this._docIcon(documentType), 22);
         const titleBlock = document.createElement("div");
         const titleEl = document.createElement("div");
-        titleEl.style.cssText = `color:${theme.text};font-size:16px;font-weight:700;line-height:1.3;`;
+        titleEl.style.cssText = `color:${theme.text};font-size:${TYPE.headingSm}px;font-weight:700;line-height:1.3;`;
         titleEl.textContent = `Capture your ${docLabel}`;
         const subEl = document.createElement("div");
         subEl.style.cssText = `color:${theme.textSecondary};font-size:12px;margin-top:2px;`;
@@ -142,7 +136,7 @@ export class DocumentCapture {
       transition:all 0.15s ease;min-height:80px;
       box-shadow:0 4px 14px ${theme.primary}30;
     `;
-        cameraBtn.innerHTML = `<span style="font-size:26px;">📷</span><span>Take Photo</span><span style="font-size:10px;opacity:0.8;font-weight:500;">Use camera</span>`;
+        cameraBtn.innerHTML = `<span style="display:inline-flex;">${icon("camera", 24)}</span><span>Take Photo</span><span style="font-size:10px;opacity:0.8;font-weight:500;">Use camera</span>`;
         cameraBtn.addEventListener("mouseenter", () => { cameraBtn.style.opacity = "0.9"; cameraBtn.style.transform = "translateY(-1px)"; });
         cameraBtn.addEventListener("mouseleave", () => { cameraBtn.style.opacity = "1"; cameraBtn.style.transform = "none"; });
         cameraBtn.addEventListener("click", () => {
@@ -159,7 +153,7 @@ export class DocumentCapture {
       font-size:13px;font-weight:600;font-family:inherit;
       transition:all 0.15s ease;min-height:80px;
     `;
-        uploadBtn.innerHTML = `<span style="font-size:26px;">🖼️</span><span>From Gallery</span><span style="font-size:10px;color:${theme.textMuted || theme.textSecondary};font-weight:500;">Upload file</span>`;
+        uploadBtn.innerHTML = `<span style="display:inline-flex;">${icon("gallery", 24)}</span><span>From Gallery</span><span style="font-size:10px;color:${theme.textMuted || theme.textSecondary};font-weight:500;">Upload file</span>`;
         uploadBtn.addEventListener("mouseenter", () => { uploadBtn.style.borderColor = theme.primary; uploadBtn.style.transform = "translateY(-1px)"; });
         uploadBtn.addEventListener("mouseleave", () => { uploadBtn.style.borderColor = theme.border; uploadBtn.style.transform = "none"; });
         uploadBtn.addEventListener("click", () => { this.handleFileUpload(container, theme); });
@@ -171,7 +165,7 @@ export class DocumentCapture {
         tips.style.cssText = `
       margin:0 20px 16px;padding:12px 14px;
       background:${theme.shimmer || theme.cardBg};
-      border:1px solid ${theme.border};border-radius:12px;
+      border:1px solid ${theme.border};border-radius:${RADIUS.md}px;
     `;
         const tipsGrid = document.createElement("div");
         tipsGrid.style.cssText = `
@@ -186,7 +180,7 @@ export class DocumentCapture {
         tipItems.forEach((t) => {
             const row = document.createElement("div");
             row.style.cssText = `display:flex;align-items:center;gap:5px;font-size:11px;color:${theme.textSecondary};`;
-            row.innerHTML = `<span style="color:${theme.primary};font-weight:700;flex-shrink:0;">✓</span><span>${t}</span>`;
+            row.innerHTML = `<span style="color:${theme.primary};flex-shrink:0;display:inline-flex;">${icon("check", 12)}</span><span>${t}</span>`;
             tipsGrid.appendChild(row);
         });
         tips.appendChild(tipsGrid);
@@ -231,51 +225,99 @@ export class DocumentCapture {
         this.root.appendChild(fileInput);
         container.appendChild(this.root);
     }
-    /** Returns an appropriate emoji icon for the document type. */
+    /** Returns the icon name matching the document type. */
     _docIcon(documentType) {
         const t = documentType.toLowerCase();
         if (t.includes("passport"))
-            return "📘";
+            return "passport";
         if (t.includes("driver") || t.includes("licen"))
-            return "🚗";
+            return "car";
         if (t.includes("voter") || t.includes("pvc"))
-            return "🗳️";
-        return "🪪";
+            return "ballot";
+        return "id-card";
     }
     renderCameraView(container, theme, documentType) {
+        // Dark cinematic chrome + corner-bracket guide — matches the liveness
+        // scan screen's visual language (LivenessUI.ts) instead of the plain
+        // rectangle outline this used to be, so the two camera experiences in
+        // the flow read as one product.
         const wrapper = document.createElement("div");
-        wrapper.style.cssText = "position:relative;width:100%;border-radius:12px;overflow:hidden;background:#000;";
+        wrapper.style.cssText = `
+      position:relative;width:100%;max-width:420px;margin:0 auto;
+      background:#0a0a0a;border-radius:${RADIUS.lg}px;overflow:hidden;
+      box-shadow:0 8px 32px rgba(0,0,0,0.4);
+    `;
+        this.videoWrapEl = wrapper;
         this.videoEl = document.createElement("video");
         this.videoEl.autoplay = true;
         this.videoEl.playsInline = true;
         this.videoEl.muted = true;
+        // Starts at 4:3 (typical document-shaped default); _fitToStream() below
+        // corrects this to the stream's real aspect ratio once metadata loads,
+        // instead of force-cropping every device's native ratio into one fixed box.
         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 vignette = document.createElement("div");
+        vignette.style.cssText = `
+      position:absolute;inset:0;pointer-events:none;
+      box-shadow:inset 0 0 0 9999px rgba(0,0,0,0.38);
+      -webkit-mask:radial-gradient(ellipse 46% 34% at 50% 50%, transparent 60%, #000 100%);
+      mask:radial-gradient(ellipse 46% 34% at 50% 50%, transparent 60%, #000 100%);
+    `;
+        wrapper.appendChild(vignette);
+        // Corner-bracket guide — same bracket-path language as LivenessUI's oval
+        // guide, adapted to a rectangle since documents (unlike faces) aren't oval.
+        const guideWrap = document.createElement("div");
+        guideWrap.style.cssText = `
+      position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
+      width:84%;aspect-ratio:16/10;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);
+        const svg = document.createElementNS("http://www.w3.org/2000/svg", "svg");
+        svg.setAttribute("viewBox", "0 0 160 100");
+        svg.style.cssText = "width:100%;height:100%;overflow:visible;";
+        const bracketGroup = document.createElementNS("http://www.w3.org/2000/svg", "g");
+        bracketGroup.setAttribute("stroke", theme.primary);
+        bracketGroup.setAttribute("stroke-width", "3");
+        bracketGroup.setAttribute("stroke-linecap", "round");
+        bracketGroup.setAttribute("fill", "none");
+        const bLen = 16;
+        const bx0 = 4, bx1 = 156, by0 = 4, by1 = 96;
+        const brackets = [
+            `M${bx0},${by0 + bLen} L${bx0},${by0} L${bx0 + bLen},${by0}`,
+            `M${bx1 - bLen},${by0} L${bx1},${by0} L${bx1},${by0 + bLen}`,
+            `M${bx0},${by1 - bLen} L${bx0},${by1} L${bx0 + bLen},${by1}`,
+            `M${bx1 - bLen},${by1} L${bx1},${by1} L${bx1},${by1 - bLen}`,
+        ];
+        for (const d of brackets) {
+            const path = document.createElementNS("http://www.w3.org/2000/svg", "path");
+            path.setAttribute("d", d);
+            bracketGroup.appendChild(path);
+        }
+        svg.appendChild(bracketGroup);
+        guideWrap.appendChild(svg);
+        wrapper.appendChild(guideWrap);
+        // Header — gradient scrim + document label
+        const header = document.createElement("div");
+        header.style.cssText = `
+      position:absolute;top:0;left:0;right:0;
+      background:linear-gradient(180deg,rgba(0,0,0,0.8) 0%,transparent 100%);
+      padding:14px 16px 32px;text-align:center;
     `;
-        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);
+        header.innerHTML = `<div style="color:#fff;font-size:${TYPE.sm}px;font-weight:600;">Align your ${this.getDocumentLabel(documentType)} within the frame</div>`;
+        wrapper.appendChild(header);
+        // Footer — gradient scrim + tips
+        const footer = document.createElement("div");
+        footer.style.cssText = `
+      position:absolute;bottom:0;left:0;right:0;
+      background:linear-gradient(0deg,rgba(0,0,0,0.7) 0%,transparent 100%);
+      padding:28px 10px 18px;text-align:center;
     `;
-        guideLbl.textContent = `Align your ${this.getDocumentLabel(documentType)} within the frame`;
-        wrapper.appendChild(guideLbl);
+        footer.innerHTML = `<div style="font-size:${TYPE.xs}px;color:rgba(255,255,255,0.55);">Good lighting · No glare · All 4 corners visible</div>`;
+        wrapper.appendChild(footer);
         container.appendChild(wrapper);
         // Capture button
         const captureBtn = document.createElement("button");
+        captureBtn.setAttribute("aria-label", "Capture photo");
         captureBtn.style.cssText = `
       display:block;margin:16px auto 0;width:64px;height:64px;
       border-radius:50%;border:4px solid ${theme.primary};
@@ -302,6 +344,41 @@ export class DocumentCapture {
         // Open camera
         this.openCamera();
     }
+    /**
+     * Matches the video box's aspect-ratio CSS to the stream's actual
+     * negotiated dimensions instead of a single hardcoded ratio — a stream
+     * that's natively 16:9 no longer gets force-cropped into a 4:3 box.
+     * Clamped to a sane document-shaped range so a degenerate/unusual stream
+     * can't produce a sliver-thin or absurdly tall box.
+     */
+    _fitToStream() {
+        if (!this.videoEl)
+            return;
+        const { videoWidth: w, videoHeight: h } = this.videoEl;
+        if (!w || !h)
+            return;
+        const ratio = Math.min(Math.max(w / h, 1), 2); // clamp to [1:1, 2:1]
+        this.videoEl.style.aspectRatio = `${ratio}`;
+    }
+    /**
+     * Re-fits the video box when the device rotates mid-capture. Does not
+     * re-request getUserMedia (disruptive/slow) — the stream's dimensions
+     * don't change on rotation, only the viewport does, so re-reading the
+     * already-known videoWidth/videoHeight is enough to keep the box sane.
+     */
+    _watchOrientation() {
+        this._unwatchOrientation();
+        this.orientationHandler = () => this._fitToStream();
+        window.addEventListener("orientationchange", this.orientationHandler);
+        window.addEventListener("resize", this.orientationHandler);
+    }
+    _unwatchOrientation() {
+        if (this.orientationHandler) {
+            window.removeEventListener("orientationchange", this.orientationHandler);
+            window.removeEventListener("resize", this.orientationHandler);
+            this.orientationHandler = null;
+        }
+    }
     async openCamera() {
         // Check browser compatibility
         if (!navigator.mediaDevices || !navigator.mediaDevices.getUserMedia) {
@@ -309,28 +386,32 @@ export class DocumentCapture {
             return;
         }
         const maxRetries = 3;
-        let retryCount = 0;
-        const attemptCameraAccess = async (constraints) => {
+        // Retries only transient/negotiable failures (busy camera, unsupported
+        // constraints, anything unrecognized) — a hard permission denial or "no
+        // camera exists" can never be fixed by retrying, so those short-circuit
+        // to an immediate error instead of burning ~6s of backoff first.
+        const attemptCameraAccess = async (constraints, retryCount = 0) => {
             try {
-                return await navigator.mediaDevices.getUserMedia(constraints);
+                return await this.cameraManager.open(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);
+                const status = err instanceof CameraAccessError ? err.status : "unknown";
+                if (isRetryableCameraError(status) && retryCount < maxRetries - 1) {
+                    await new Promise((resolve) => setTimeout(resolve, 1000 * (retryCount + 1))); // Exponential backoff
+                    return attemptCameraAccess(constraints, retryCount + 1);
                 }
                 throw err;
             }
         };
+        let stream;
         try {
             // Try rear camera first
-            this.stream = await attemptCameraAccess({
+            stream = await attemptCameraAccess({
                 video: {
                     facingMode: { ideal: "environment" },
-                    width: { ideal: 1280 },
-                    height: { ideal: 960 },
+                    width: { ideal: DOC_CAMERA_IDEAL_WIDTH },
+                    height: { ideal: DOC_CAMERA_IDEAL_HEIGHT },
                 },
             });
         }
@@ -338,48 +419,39 @@ export class DocumentCapture {
             console.warn("Rear camera failed, trying any camera:", err);
             // Fallback to any camera
             try {
-                this.stream = await attemptCameraAccess({
-                    video: { width: { ideal: 1280 } },
+                stream = await attemptCameraAccess({
+                    video: { width: { ideal: DOC_CAMERA_IDEAL_WIDTH } },
                 });
             }
             catch (fallbackErr) {
-                const errorMessage = this.getCameraErrorMessage(fallbackErr);
-                this.rejectCapture?.(new Error(errorMessage));
+                this.rejectCapture?.(new Error(fallbackErr?.message || "Camera access failed. Please check your camera permissions and try again."));
                 return;
             }
         }
+        // A capture that's already resolved (photo taken, camera intentionally
+        // stopped) must not surface a stale interruption from the old stream.
+        this.cameraManager.onStreamInterrupted(() => {
+            if (this.resolveCapture || this.rejectCapture) {
+                this.rejectCapture?.(new Error("Camera connection was lost. Please check your camera and try again."));
+            }
+        });
         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.";
+            this.videoEl.srcObject = stream;
+            this.videoEl.addEventListener("loadedmetadata", () => this._fitToStream(), { once: true });
+            this._watchOrientation();
         }
     }
     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);
+        // Draw at the video's native resolution — the downstream compressImage()
+        // call (see proceedWithPhoto) is the single place resolution gets capped
+        // (via computeScaleRatio, which never upscales). Resizing here too used
+        // to cap captures at 1280x960 before compressImage ever ran, silently
+        // undermining its higher resolution/quality target.
         const canvas = document.createElement("canvas");
-        canvas.width = Math.round(vw * ratio);
-        canvas.height = Math.round(vh * ratio);
+        canvas.width = this.videoEl.videoWidth;
+        canvas.height = this.videoEl.videoHeight;
         const ctx = canvas.getContext("2d");
         if (!ctx)
             return;
@@ -387,14 +459,15 @@ export class DocumentCapture {
         canvas.toBlob(async (blob) => {
             if (blob) {
                 this.stopCamera();
-                // Quality analysis runs synchronously over ~1.2MP of pixel data —
-                // show a loading state so the capture->preview transition never
-                // looks like a frozen/unresponsive tap on slower devices.
+                // Quality analysis runs synchronously over the captured frame's
+                // pixel data — show a loading state so the capture->preview
+                // transition never looks like a frozen/unresponsive tap on
+                // slower devices.
                 this.showLoadingState("Analyzing photo...", theme);
                 const quality = await this._assessImageQuality(canvas, ctx);
                 this.showPreview(container, theme, blob, documentType, quality);
             }
-        }, "image/jpeg", 0.85);
+        }, "image/jpeg", 0.92);
     }
     /**
      * Runs the local sharpness/glare/contrast/brightness check against a
@@ -442,23 +515,36 @@ export class DocumentCapture {
             container.appendChild(this.root);
         }
         this.root.style.cssText = "display:flex;flex-direction:column;align-items:center;gap:16px;";
+        // Step badge — same pill treatment as SmartComplyFlow's document-confirm
+        // screen (Step 2: check what we read), so this doesn't read as
+        // unexplained repetition of that later screen — they check different
+        // things (photo clarity here, OCR-extracted data there).
+        const stepBadge = document.createElement("div");
+        stepBadge.style.cssText = `
+      display:inline-flex;align-items:center;gap:5px;
+      padding:3px 11px;border-radius:${RADIUS.pill}px;
+      font-size:10.5px;font-weight:600;letter-spacing:0.2px;
+      color:${theme.primary};background:${theme.primary}15;border:1px solid ${theme.primary}30;
+    `;
+        stepBadge.textContent = "STEP 1 OF 2 · CHECK THE PHOTO";
+        this.root.appendChild(stepBadge);
         // 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;
+      width:100%;max-height:300px;object-fit:contain;border-radius:${RADIUS.md}px;
       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.style.cssText = `color:${theme.text};font-size:${TYPE.base}px;font-weight:700;text-align:center;`;
         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.style.cssText = `color:${theme.textMuted};font-size:${TYPE.xs}px;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);
         // Quality warning banner — only shown when the local check flags an issue.
@@ -587,126 +673,24 @@ export class DocumentCapture {
             input.click();
     }
     stopCamera() {
-        if (this.stream) {
-            this.stream.getTracks().forEach((t) => t.stop());
-            this.stream = null;
-        }
+        this._unwatchOrientation();
+        this.cameraManager.stop();
         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;
+        this.videoWrapEl = null;
     }
     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
+        this.root.appendChild(renderSpinner(theme, { size: 80, icon: icon("document", 28) }));
         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.style.cssText = `color:${theme.text};font-size:${TYPE.heading}px;font-weight:600;text-align:center;`;
         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)
@@ -714,7 +698,7 @@ export class DocumentCapture {
         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;
+      background:#ff444415;border:1px solid #ff444430;border-radius:${RADIUS.md}px;
       color:#ff4444;font-size:14px;margin-top:16px;animation:shake 0.5s ease-in-out;
     `;
         errorContainer.innerHTML = `
@@ -741,7 +725,7 @@ export class DocumentCapture {
         const btn = document.createElement("button");
         btn.textContent = label;
         btn.style.cssText = `
-      padding:16px 24px;border-radius:12px;font-size:16px;font-weight:600;
+      padding:16px 24px;border-radius:${RADIUS.md}px;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
@@ -774,7 +758,7 @@ export class DocumentCapture {
                     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 ratio = computeScaleRatio(srcW, srcH, maxWidth, maxHeight);
                     const outW = Math.round(srcW * ratio);
                     const outH = Math.round(srcH * ratio);
                     const canvas = document.createElement("canvas");
@@ -821,7 +805,7 @@ export class DocumentCapture {
                 imgEl.onload = () => {
                     URL.revokeObjectURL(url);
                     let { naturalWidth: w, naturalHeight: h } = imgEl;
-                    const ratio = Math.min(maxWidth / w, maxHeight / h, 1);
+                    const ratio = computeScaleRatio(w, h, maxWidth, maxHeight);
                     const canvas = document.createElement("canvas");
                     canvas.width = Math.round(w * ratio);
                     canvas.height = Math.round(h * ratio);