@simprints/simface-sdk 0.6.1 → 0.8.1

package/dist/components/simface-capture.js

@@ -6,9 +6,11 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
 };
 import { LitElement, html, css } from 'lit';
 import { customElement, property, query, state } from 'lit/decorators.js';
-import { blobToImage, captureFromCamera } from '../services/camera.js';
-import { assessFaceQuality, assessFaceQualityForVideo } from '../services/face-detection.js';
-import { AUTO_CAPTURE_ANALYSIS_INTERVAL_MS, AUTO_CAPTURE_COUNTDOWN_MS, CAPTURE_GUIDE_MASK_PATH, CAPTURE_GUIDE_PATH, autoCaptureCompleteMessage, autoCaptureCountdownMessage, } from '../shared/auto-capture.js';
+import { assessFaceQuality } from '../services/face-detection.js';
+import { CAPTURE_GUIDE_MASK_PATH, CAPTURE_GUIDE_PATH, } from '../shared/auto-capture.js';
+import { buildCapturePlan, normalizeCaptureOptions, resolveCaptureCapabilities, } from '../shared/capture-flow.js';
+import { CameraCaptureSessionController, } from '../shared/capture-session.js';
+import { CameraAccessError, blobToImage, captureFromFileInput, openUserFacingCameraStream, } from '../shared/capture-runtime.js';
 /**
  * <simface-capture> — Web Component for capturing and quality-checking face images.
  *
@@ -24,90 +26,63 @@ let SimFaceCapture = class SimFaceCapture extends LitElement {
         this.embedded = false;
         this.active = false;
         this.confirmLabel = 'Use this capture';
+        this.capturePreference = 'auto-preferred';
+        this.allowMediaPickerFallback = true;
         this.captureState = 'idle';
         this.errorMessage = '';
         this.feedbackMessage = 'Start a capture to see camera guidance here.';
         this.feedbackTone = 'neutral';
         this.previewUrl = '';
-        this.countdownProgress = 0;
         this.qualityResult = null;
+        this.canTakePhoto = true;
+        this.captureMode = 'auto';
         this.stream = null;
-        this.animationFrameId = null;
-        this.analysisInFlight = false;
-        this.lastAnalysisTimestamp = 0;
+        this.sessionController = null;
+        this.currentCaptureStep = null;
         this.capturedBlob = null;
-        this.countdownStartedAt = null;
-        this.bestCaptureBlob = null;
-        this.bestCaptureScore = -1;
-        this.bestQualityResult = null;
+        this.pendingActiveSync = false;
     }
     disconnectedCallback() {
         super.disconnectedCallback();
-        this.stopEmbeddedSession();
+        this.stopSession();
     }
     updated(changedProperties) {
-        if (!this.embedded || !changedProperties.has('active')) {
+        if (!changedProperties.has('active') || this.pendingActiveSync) {
             return;
         }
-        if (this.active) {
-            void this.startEmbeddedCapture();
-            return;
-        }
-        this.stopEmbeddedSession();
-        this.resetEmbeddedState();
+        this.pendingActiveSync = true;
+        queueMicrotask(() => {
+            this.pendingActiveSync = false;
+            if (!this.isConnected) {
+                return;
+            }
+            if (this.active) {
+                if (this.captureState === 'idle') {
+                    void this.beginCapture();
+                }
+                return;
+            }
+            this.endCapture();
+        });
     }
     render() {
-        if (this.embedded) {
-            return html `
-        <div class="container embedded-shell">
-          ${this.renderEmbeddedState()}
-        </div>
-      `;
-        }
         return html `
-      <div class="container">
-        ${this.renderPopupState()}
+      <div class="container capture-shell">
+        ${this.renderCaptureState()}
       </div>
     `;
     }
     async startCapture() {
-        if (this.embedded) {
-            this.active = true;
-            await this.updateComplete;
-            return;
-        }
-        await this.handlePopupCapture();
-    }
-    renderPopupState() {
-        switch (this.captureState) {
-            case 'idle':
-                return html `
-          <p>${this.label}</p>
-          <button class="btn btn-primary" @click=${this.handlePopupCapture}>
-            Open Camera
-          </button>
-        `;
-            case 'starting':
-                return html `
-          <p>Opening camera...</p>
-          <div class="spinner"></div>
-        `;
-            case 'error':
-                return html `
-          <div class="quality-msg quality-bad">${this.errorMessage}</div>
-          <button class="btn btn-primary" @click=${this.handlePopupRetake}>Try again</button>
-          <button class="btn btn-secondary" @click=${this.handlePopupCancel}>Cancel</button>
-        `;
-            default:
-                return html ``;
-        }
+        this.active = true;
+        await this.updateComplete;
+        await this.beginCapture();
     }
-    renderEmbeddedState() {
+    renderCaptureState() {
         return html `
-      <p class="embedded-copy">${this.label}</p>
+      <p class="capture-copy">${this.label}</p>
 
       ${this.captureState === 'idle'
-            ? html `<p class="embedded-copy">Waiting for the host page to start capture.</p>`
+            ? html `<p class="capture-copy">Waiting for the host page to start capture.</p>`
             : html `
             <div class="stage">
               <video
@@ -124,7 +99,6 @@ let SimFaceCapture = class SimFaceCapture extends LitElement {
               />
               <div
                 class="guide-overlay ${this.captureState === 'live' || this.captureState === 'starting' ? '' : 'hidden'}"
-                style=${`--capture-progress:${this.countdownProgress};`}
               >
                 <svg viewBox="0 0 100 100" preserveAspectRatio="none" aria-hidden="true">
                   <path class="guide-mask" d=${CAPTURE_GUIDE_MASK_PATH}></path>
@@ -142,255 +116,197 @@ let SimFaceCapture = class SimFaceCapture extends LitElement {
       <div class="btn-row">
         ${this.captureState === 'live'
             ? html `
-              <button class="btn btn-secondary" @click=${this.handleEmbeddedManualCapture}>Take photo now</button>
-              <button class="btn btn-ghost" @click=${this.handleEmbeddedCancel}>Cancel</button>
+              ${this.captureMode === 'manual'
+                ? html `<button class="btn btn-secondary" data-simface-action="capture" ?disabled=${!this.canTakePhoto} @click=${this.handleManualCapture}>Take photo</button>`
+                : ''}
+              <button class="btn btn-ghost" data-simface-action="cancel" @click=${this.handleCancel}>Cancel</button>
             `
             : ''}
         ${this.captureState === 'preview'
             ? html `
-              <button class="btn btn-secondary" @click=${this.handleEmbeddedRetake}>Retake</button>
+              <button class="btn btn-secondary" data-simface-action="retake" @click=${this.handleRetake}>Retake</button>
               ${this.qualityResult?.passesQualityChecks === false
                 ? ''
-                : html `<button class="btn btn-primary" @click=${this.handleEmbeddedConfirm}>${this.confirmLabel}</button>`}
-              <button class="btn btn-ghost" @click=${this.handleEmbeddedCancel}>Cancel</button>
+                : html `<button class="btn btn-primary" data-simface-action="confirm" @click=${this.handleConfirm}>${this.confirmLabel}</button>`}
+              <button class="btn btn-ghost" data-simface-action="cancel" @click=${this.handleCancel}>Cancel</button>
             `
             : ''}
         ${this.captureState === 'error'
             ? html `
-              <button class="btn btn-primary" @click=${this.startEmbeddedCapture}>Try again</button>
-              <button class="btn btn-ghost" @click=${this.handleEmbeddedCancel}>Cancel</button>
+              <button class="btn btn-primary" data-simface-action="retry" @click=${this.beginCapture}>Try again</button>
+              <button class="btn btn-ghost" data-simface-action="cancel" @click=${this.handleCancel}>Cancel</button>
             `
             : ''}
       </div>
     `;
     }
-    async handlePopupCapture() {
-        this.captureState = 'starting';
-        try {
-            const blob = await captureFromCamera();
-            if (!blob) {
-                this.dispatchCancelled();
-                this.captureState = 'idle';
-                return;
-            }
-            this.dispatchCaptured(blob);
-            this.resetPopupState();
-        }
-        catch (err) {
-            this.errorMessage = err instanceof Error ? err.message : 'Capture failed';
-            this.captureState = 'error';
-            this.dispatchError(this.errorMessage);
-        }
-    }
-    handlePopupRetake() {
-        this.resetPopupState();
-        void this.handlePopupCapture();
-    }
-    handlePopupCancel() {
-        this.dispatchCancelled();
-        this.resetPopupState();
-    }
-    async startEmbeddedCapture() {
+    async beginCapture() {
         if (!this.active || this.captureState === 'starting' || this.captureState === 'live') {
             return;
         }
-        this.stopEmbeddedSession();
-        this.resetEmbeddedState();
+        this.stopSession();
+        this.resetState();
         this.captureState = 'starting';
         this.feedbackMessage = 'Requesting camera access...';
         this.feedbackTone = 'neutral';
-        await this.updateComplete;
-        if (!navigator.mediaDevices?.getUserMedia) {
-            this.handleEmbeddedError(new Error('This browser does not support inline camera capture.'));
+        const options = normalizeCaptureOptions({
+            presentation: 'embedded',
+            capturePreference: this.capturePreference,
+            allowMediaPickerFallback: this.allowMediaPickerFallback,
+            label: this.label,
+            confirmLabel: this.confirmLabel,
+        });
+        const capabilities = await resolveCaptureCapabilities({
+            capturePreference: options.capturePreference,
+        });
+        const plan = buildCapturePlan(options, capabilities);
+        const cameraStep = plan.steps.find((step) => step === 'auto-camera' || step === 'manual-camera') ?? null;
+        const hasMediaPickerFallback = plan.steps.includes('media-picker');
+        if (!cameraStep) {
+            await this.startMediaPicker();
             return;
         }
         try {
-            this.stream = await navigator.mediaDevices.getUserMedia({
-                video: { facingMode: { ideal: 'user' } },
-                audio: false,
-            });
-            this.captureState = 'live';
-            this.feedbackMessage = 'Center your face in the oval. We will capture automatically when framing looks good.';
-            await this.updateComplete;
-            const video = this.embeddedVideoElement;
-            if (!video) {
-                throw new Error('Inline camera preview could not be created.');
-            }
-            video.srcObject = this.stream;
-            await this.waitForVideoReady(video);
-            this.scheduleEmbeddedAnalysis();
+            this.stream = await openUserFacingCameraStream();
         }
         catch (error) {
-            this.handleEmbeddedError(error);
-        }
-    }
-    scheduleEmbeddedAnalysis() {
-        if (this.captureState !== 'live' || !this.stream) {
+            if (error instanceof CameraAccessError && hasMediaPickerFallback) {
+                await this.startMediaPicker();
+                return;
+            }
+            this.handleCaptureError(error);
             return;
         }
-        if (typeof window.requestAnimationFrame !== 'function' ||
-            typeof window.cancelAnimationFrame !== 'function') {
-            this.feedbackMessage = 'Automatic analysis is unavailable. Use Take photo now.';
-            this.feedbackTone = 'neutral';
+        await this.updateComplete;
+        if (!this.active) {
+            this.stopSession();
             return;
         }
-        this.animationFrameId = window.requestAnimationFrame(async (timestamp) => {
-            if (this.captureState !== 'live' ||
-                this.analysisInFlight ||
-                timestamp - this.lastAnalysisTimestamp < AUTO_CAPTURE_ANALYSIS_INTERVAL_MS) {
-                this.scheduleEmbeddedAnalysis();
-                return;
-            }
-            const video = this.embeddedVideoElement;
-            if (!video) {
-                return;
-            }
-            this.lastAnalysisTimestamp = timestamp;
-            this.analysisInFlight = true;
-            try {
-                const qualityResult = await assessFaceQualityForVideo(video, timestamp);
-                this.qualityResult = qualityResult;
-                if (qualityResult.passesQualityChecks) {
-                    if (this.countdownStartedAt === null) {
-                        this.countdownStartedAt = timestamp;
-                        this.countdownProgress = 0;
-                        this.feedbackMessage = 'Great framing detected. Hold still while we pick the best frame.';
-                        this.feedbackTone = 'success';
-                    }
-                    await this.considerBestFrame(video, qualityResult);
-                }
-                if (this.countdownStartedAt !== null) {
-                    this.countdownProgress = Math.min((timestamp - this.countdownStartedAt) / AUTO_CAPTURE_COUNTDOWN_MS, 1);
-                    this.feedbackMessage = autoCaptureCountdownMessage(timestamp, this.countdownStartedAt, qualityResult);
-                    this.feedbackTone = qualityResult.passesQualityChecks ? 'success' : 'neutral';
-                    if (this.countdownProgress >= 1) {
-                        this.finishCountdownCapture();
-                        return;
-                    }
-                }
-                else {
-                    this.feedbackMessage = qualityResult.message;
-                    this.feedbackTone = 'neutral';
-                }
-            }
-            catch {
-                this.feedbackMessage = 'Automatic analysis is unavailable. Use Take photo now.';
-                this.feedbackTone = 'neutral';
-                return;
-            }
-            finally {
-                this.analysisInFlight = false;
-            }
-            this.scheduleEmbeddedAnalysis();
-        });
-    }
-    async captureEmbeddedFrame() {
         const video = this.embeddedVideoElement;
-        if (!video || this.captureState !== 'live') {
+        if (!video || !this.stream) {
+            this.handleCaptureError(new Error('Inline camera preview could not be created.'));
             return;
         }
+        video.srcObject = this.stream;
+        this.currentCaptureStep = cameraStep;
+        this.sessionController = new CameraCaptureSessionController({
+            videoElement: video,
+            initialMode: cameraStep === 'auto-camera' ? 'auto' : 'manual',
+            copy: {
+                autoReadyMessage: 'Center your face in the oval. We will capture automatically when framing looks good.',
+                manualReadyMessage: 'When you are ready, press Take photo.',
+                autoUnavailableMessage: 'Automatic capture is unavailable. Press Take photo instead.',
+                retakeReadyMessage: 'When you are ready, press Take photo.',
+            },
+            onStateChange: (state) => this.applySessionState(state),
+        });
         try {
-            const blob = await this.captureVideoFrame(video);
-            const qualityResult = await this.assessCapturedBlob(blob);
-            this.capturedBlob = blob;
-            this.qualityResult = qualityResult;
-            this.captureState = 'preview';
-            this.feedbackMessage = qualityResult?.message ?? 'Review this capture before continuing.';
-            this.feedbackTone = qualityResult
-                ? qualityResult.passesQualityChecks
-                    ? 'success'
-                    : 'error'
-                : 'neutral';
-            if (this.previewUrl) {
-                URL.revokeObjectURL(this.previewUrl);
-            }
-            this.previewUrl = URL.createObjectURL(blob);
-            this.countdownProgress = 0;
+            await this.sessionController.start();
         }
         catch (error) {
-            this.handleEmbeddedError(error);
+            this.handleCaptureError(error);
         }
     }
-    async considerBestFrame(video, qualityResult) {
-        if (qualityResult.captureScore <= this.bestCaptureScore) {
-            return;
-        }
-        const blob = await this.captureVideoFrame(video);
-        this.bestCaptureBlob = blob;
-        this.bestCaptureScore = qualityResult.captureScore;
-        this.bestQualityResult = qualityResult;
-    }
-    finishCountdownCapture() {
-        if (!this.bestCaptureBlob) {
-            void this.captureEmbeddedFrame();
-            return;
-        }
-        this.capturedBlob = this.bestCaptureBlob;
-        this.qualityResult = this.bestQualityResult;
-        this.captureState = 'preview';
-        this.feedbackMessage = autoCaptureCompleteMessage(this.bestQualityResult);
-        this.feedbackTone = 'success';
-        if (this.previewUrl) {
-            URL.revokeObjectURL(this.previewUrl);
-        }
-        this.previewUrl = URL.createObjectURL(this.bestCaptureBlob);
-        this.countdownProgress = 1;
-    }
-    async assessCapturedBlob(blob) {
+    async startMediaPicker() {
+        this.stopSession();
+        this.currentCaptureStep = 'media-picker';
+        this.captureState = 'starting';
+        this.feedbackMessage = 'Opening media picker...';
+        this.feedbackTone = 'neutral';
         try {
-            const image = await blobToImage(blob);
-            return await assessFaceQuality(image);
+            const blob = await captureFromFileInput();
+            if (!blob) {
+                this.handleCancel();
+                return;
+            }
+            await this.showPickedPreview(blob);
         }
-        catch {
-            return null;
+        catch (error) {
+            this.handleCaptureError(error);
+        }
+    }
+    applySessionState(state) {
+        this.captureState = state.phase;
+        this.feedbackMessage = state.feedbackMessage;
+        this.feedbackTone = state.feedbackTone;
+        this.syncProgress(state.countdownProgress);
+        this.qualityResult = state.qualityResult;
+        this.errorMessage = state.phase === 'error' ? state.errorMessage : '';
+        this.canTakePhoto = state.canTakePhoto;
+        this.captureMode = state.mode;
+        if (state.phase === 'preview') {
+            this.capturedBlob = state.previewBlob;
+            this.setPreviewBlob(state.previewBlob);
+            return;
         }
+        this.capturedBlob = null;
+        this.clearPreviewUrl();
     }
-    handleEmbeddedManualCapture() {
-        void this.captureEmbeddedFrame();
+    async showPickedPreview(blob) {
+        const qualityResult = await this.assessPickedBlob(blob);
+        this.capturedBlob = blob;
+        this.qualityResult = qualityResult;
+        this.captureState = 'preview';
+        this.feedbackMessage = qualityResult?.message ?? 'Review this capture before continuing.';
+        this.feedbackTone = qualityResult
+            ? qualityResult.passesQualityChecks
+                ? 'success'
+                : 'error'
+            : 'neutral';
+        this.syncProgress(qualityResult ? 1 : 0);
+        this.setPreviewBlob(blob);
+    }
+    handleManualCapture() {
+        void this.sessionController?.takePhotoNow().catch((error) => {
+            this.handleCaptureError(error);
+        });
     }
-    handleEmbeddedRetake() {
+    handleRetake() {
         this.capturedBlob = null;
         this.qualityResult = null;
-        this.captureState = 'live';
-        if (this.previewUrl) {
-            URL.revokeObjectURL(this.previewUrl);
-            this.previewUrl = '';
+        this.clearPreviewUrl();
+        if (this.currentCaptureStep === 'media-picker') {
+            if (this.active) {
+                void this.beginCapture();
+            }
+            return;
         }
-        this.feedbackMessage = 'Ready to capture again.';
-        this.feedbackTone = 'neutral';
-        this.resetCountdown();
-        this.resumeEmbeddedVideo();
-        this.scheduleEmbeddedAnalysis();
+        void this.sessionController?.retake().catch((error) => {
+            this.handleCaptureError(error);
+        });
     }
-    handleEmbeddedConfirm() {
+    handleConfirm() {
         if (!this.capturedBlob) {
             return;
         }
         const blob = this.capturedBlob;
         this.active = false;
-        this.stopEmbeddedSession();
-        this.resetEmbeddedState();
+        this.stopSession();
+        this.resetState();
         this.dispatchCaptured(blob);
     }
-    handleEmbeddedCancel() {
+    handleCancel() {
         this.active = false;
-        this.stopEmbeddedSession();
-        this.resetEmbeddedState();
+        this.stopSession();
+        this.resetState();
         this.dispatchCancelled();
     }
-    handleEmbeddedError(error) {
-        this.stopEmbeddedSession();
+    handleCaptureError(error) {
+        this.stopSession();
         this.errorMessage = error instanceof Error ? error.message : 'Capture failed';
         this.captureState = 'error';
         this.feedbackMessage = this.errorMessage;
         this.feedbackTone = 'error';
         this.dispatchError(this.errorMessage);
     }
-    stopEmbeddedSession() {
-        if (this.animationFrameId !== null) {
-            window.cancelAnimationFrame(this.animationFrameId);
-            this.animationFrameId = null;
-        }
+    endCapture() {
+        this.stopSession();
+        this.resetState();
+    }
+    stopSession() {
+        this.sessionController?.stop();
+        this.sessionController = null;
+        this.currentCaptureStep = null;
         if (this.stream) {
             this.stream.getTracks().forEach((track) => track.stop());
             this.stream = null;
@@ -399,26 +315,31 @@ let SimFaceCapture = class SimFaceCapture extends LitElement {
         if (video) {
             video.srcObject = null;
         }
-        this.analysisInFlight = false;
-        this.lastAnalysisTimestamp = 0;
-        this.resetCountdown();
+        this.syncProgress(0);
     }
-    resetEmbeddedState() {
-        if (this.previewUrl) {
-            URL.revokeObjectURL(this.previewUrl);
-            this.previewUrl = '';
-        }
+    resetState() {
+        this.clearPreviewUrl();
         this.captureState = 'idle';
         this.errorMessage = '';
         this.feedbackMessage = 'Start a capture to see camera guidance here.';
         this.feedbackTone = 'neutral';
-        this.countdownProgress = 0;
+        this.syncProgress(0);
         this.qualityResult = null;
         this.capturedBlob = null;
+        this.captureMode = 'auto';
     }
-    resetPopupState() {
-        this.captureState = 'idle';
-        this.errorMessage = '';
+    syncProgress(progress) {
+        this.style.setProperty('--capture-progress', String(progress));
+    }
+    setPreviewBlob(blob) {
+        this.clearPreviewUrl();
+        this.previewUrl = URL.createObjectURL(blob);
+    }
+    clearPreviewUrl() {
+        if (this.previewUrl) {
+            URL.revokeObjectURL(this.previewUrl);
+            this.previewUrl = '';
+        }
     }
     dispatchCaptured(blob) {
         this.dispatchEvent(new CustomEvent('simface-captured', {
@@ -447,66 +368,19 @@ let SimFaceCapture = class SimFaceCapture extends LitElement {
         if (this.feedbackTone === 'error') {
             return 'quality-bad';
         }
-        return 'quality-neutral';
-    }
-    waitForVideoReady(video) {
-        if (video.readyState >= HTMLMediaElement.HAVE_CURRENT_DATA) {
-            return video.play().then(() => undefined);
+        if (this.feedbackTone === 'manual') {
+            return 'quality-manual';
         }
-        return new Promise((resolve, reject) => {
-            const handleReady = () => {
-                cleanup();
-                video.play().then(() => resolve()).catch(reject);
-            };
-            const handleError = () => {
-                cleanup();
-                reject(new Error('Failed to start the inline camera preview.'));
-            };
-            const cleanup = () => {
-                video.removeEventListener('loadedmetadata', handleReady);
-                video.removeEventListener('error', handleError);
-            };
-            video.addEventListener('loadedmetadata', handleReady, { once: true });
-            video.addEventListener('error', handleError, { once: true });
-        });
+        return 'quality-neutral';
     }
-    captureVideoFrame(video) {
-        if (!video.videoWidth || !video.videoHeight) {
-            return Promise.reject(new Error('Camera preview is not ready yet.'));
-        }
-        const canvas = document.createElement('canvas');
-        canvas.width = video.videoWidth;
-        canvas.height = video.videoHeight;
-        const context = canvas.getContext('2d');
-        if (!context) {
-            return Promise.reject(new Error('Failed to initialize camera capture.'));
+    async assessPickedBlob(blob) {
+        try {
+            const image = await blobToImage(blob);
+            return await assessFaceQuality(image);
         }
-        context.drawImage(video, 0, 0, canvas.width, canvas.height);
-        return new Promise((resolve, reject) => {
-            canvas.toBlob((blob) => {
-                if (!blob) {
-                    reject(new Error('Failed to capture an image.'));
-                    return;
-                }
-                resolve(blob);
-            }, 'image/jpeg', 0.92);
-        });
-    }
-    resumeEmbeddedVideo() {
-        const video = this.embeddedVideoElement;
-        if (!video) {
-            return;
+        catch {
+            return null;
         }
-        void video.play().catch(() => {
-            // Ignore replay failures here; the initial preview startup path already errors loudly.
-        });
-    }
-    resetCountdown() {
-        this.countdownStartedAt = null;
-        this.countdownProgress = 0;
-        this.bestCaptureBlob = null;
-        this.bestCaptureScore = -1;
-        this.bestQualityResult = null;
     }
 };
 SimFaceCapture.styles = css `
@@ -516,6 +390,7 @@ SimFaceCapture.styles = css `
       max-width: 400px;
       margin: 0 auto;
       text-align: center;
+      color-scheme: light;
     }
 
     :host([embedded]) {
@@ -531,13 +406,13 @@ SimFaceCapture.styles = css `
       background: #fafafa;
     }
 
-    .embedded-shell {
+    .capture-shell {
       display: flex;
       flex-direction: column;
       gap: 16px;
     }
 
-    .embedded-copy {
+    .capture-copy {
       margin: 0;
       color: #334155;
     }
@@ -560,6 +435,7 @@ SimFaceCapture.styles = css `
       width: 100%;
       height: 100%;
       object-fit: cover;
+      transform: scaleX(-1);
     }
 
     .preview-img {
@@ -611,12 +487,6 @@ SimFaceCapture.styles = css `
       gap: 12px;
     }
 
-    .preview-img-inline {
-      max-width: 100%;
-      border-radius: 8px;
-      margin: 12px 0;
-    }
-
     .btn {
       display: inline-flex;
       align-items: center;
@@ -682,6 +552,11 @@ SimFaceCapture.styles = css `
       color: #0f172a;
     }
 
+    .quality-manual {
+      background: #e0f2fe;
+      color: #0f172a;
+    }
+
     .spinner {
       display: inline-block;
       width: 24px;
@@ -715,6 +590,12 @@ __decorate([
 __decorate([
     property({ type: String, attribute: 'confirm-label' })
 ], SimFaceCapture.prototype, "confirmLabel", void 0);
+__decorate([
+    property({ type: String, attribute: 'capture-preference' })
+], SimFaceCapture.prototype, "capturePreference", void 0);
+__decorate([
+    property({ type: Boolean, attribute: 'allow-media-picker-fallback' })
+], SimFaceCapture.prototype, "allowMediaPickerFallback", void 0);
 __decorate([
     state()
 ], SimFaceCapture.prototype, "captureState", void 0);
@@ -732,10 +613,13 @@ __decorate([
 ], SimFaceCapture.prototype, "previewUrl", void 0);
 __decorate([
     state()
-], SimFaceCapture.prototype, "countdownProgress", void 0);
+], SimFaceCapture.prototype, "qualityResult", void 0);
 __decorate([
     state()
-], SimFaceCapture.prototype, "qualityResult", void 0);
+], SimFaceCapture.prototype, "canTakePhoto", void 0);
+__decorate([
+    state()
+], SimFaceCapture.prototype, "captureMode", void 0);
 __decorate([
     query('#embedded-video')
 ], SimFaceCapture.prototype, "embeddedVideoElement", void 0);