@kernaq/verify-react-native 2.0.0 → 2.0.2

package/dist/index.esm.js

@@ -1,50 +1,51 @@
 import React, { useState, useCallback, useRef, useEffect, useMemo } from 'react';
-import { Platform, Alert, Linking, View, Text, TouchableOpacity, StyleSheet, ActivityIndicator, Image, Animated, Modal, SafeAreaView, ScrollView } from 'react-native';
+import { Platform, Alert, Linking, View, Text, TouchableOpacity, StyleSheet, ActivityIndicator, Image, Animated, Modal, SafeAreaView } from 'react-native';
 import { PERMISSIONS, check, RESULTS, request } from 'react-native-permissions';
 import { useCameraDevice, useCameraPermission, Camera } from 'react-native-vision-camera';
 
 const DEFAULT_LOCALE = {
     intro_title: 'Verify your identity',
-    intro_body: "This takes about 60 seconds. You'll need your ID document and a clear view of your face.",
+    intro_body: 'This takes about 90 seconds. You\'ll need your ID document and a clear view of your face.',
     intro_cta: 'Get started',
-    doc_title: 'Scan your document',
-    doc_instruction: 'Hold your ID flat inside the frame. Make sure it\'s well-lit and all four corners are visible.',
+    doc_front_title: 'Document — front',
+    doc_front_instruction: 'Hold the front of your document flat inside the frame. Ensure all four corners are visible and there is no glare.',
+    doc_back_title: 'Document — back',
+    doc_back_instruction: 'Flip your document over and hold the back inside the frame.',
     doc_capture_btn: 'Capture',
     doc_retake_btn: 'Retake',
-    doc_next_btn: 'Looks good',
-    selfie_title: 'Take a selfie',
-    selfie_instruction: 'Look straight at the camera. Keep your face inside the oval.',
-    selfie_capture_btn: 'Take selfie',
-    selfie_retake_btn: 'Retake',
-    selfie_next_btn: 'Looks good',
+    selfie_title: 'Selfie',
+    selfie_instruction: 'Centre your face inside the oval. Look directly at the camera.',
     liveness_title: 'Liveness check',
-    liveness_instruction: 'Press start, then slowly turn your head left and right.',
-    liveness_start_btn: 'Start recording',
-    liveness_recording: 'Recording…',
-    processing_title: 'Verifying your identity',
-    processing_subtitle: 'This usually takes a few seconds.',
-    result_pass_title: 'Verification passed',
-    result_pass_body: 'Your identity has been verified successfully.',
+    liveness_ready: 'Follow the instructions as they appear.',
+    liveness_task_prefix: 'Please',
+    liveness_complete: 'Hold still…',
+    processing_title: 'Verifying…',
+    result_pass_title: 'Identity verified',
+    result_pass_body: 'Your verification was successful.',
     result_fail_title: 'Verification failed',
-    result_fail_body: 'We were unable to verify your identity. Please try again.',
+    result_fail_body: 'We could not verify your identity. Please try again with better lighting.',
     result_review_title: 'Under review',
-    result_review_body: 'Your submission is being reviewed. This usually takes a few minutes.',
-    result_retry_btn: 'Try again',
-    error_camera_denied: 'Camera access denied. Please allow camera permissions in settings.',
-    error_quality: 'Image quality too low. Try better lighting or hold the camera steady.',
-    error_network: 'Network error. Please check your connection and try again.'
+    result_review_body: 'Your submission is being manually reviewed. This usually takes a few minutes.',
+    error_camera_denied: 'Camera access denied. Allow camera permissions and try again.',
+    error_blur: 'Image is too blurry — hold steady and ensure good lighting.',
+    error_quality: 'Image quality too low. Try better lighting or a steadier hand.',
+    error_network: 'Network error. Check your connection and try again.'
 };
 
 function resolveTheme(theme) {
     const dark = theme?.mode === 'dark';
     return {
-        accent: theme?.accentColor ?? '#111827',
-        bg: theme?.backgroundColor ?? (dark ? '#1a1a2e' : '#ffffff'),
-        text: theme?.textColor ?? (dark ? '#f9fafb' : '#111827'),
-        subtext: theme?.subtextColor ?? (dark ? '#9ca3af' : '#6b7280'),
-        border: theme?.borderColor ?? (dark ? '#374151' : '#e5e7eb'),
-        card: theme?.cardColor ?? (dark ? '#111827' : '#f9fafb'),
-        radius: theme?.borderRadius ?? 12
+        accent: theme?.accentColor ?? (dark ? '#e5e7eb' : '#111827'),
+        accentInv: dark ? '#111827' : '#ffffff',
+        bg: theme?.backgroundColor ?? (dark ? '#0f0f0f' : '#ffffff'),
+        surface: theme?.cardColor ?? (dark ? '#1a1a1a' : '#f7f7f7'),
+        surface2: dark ? '#242424' : '#efefef',
+        text: theme?.textColor ?? (dark ? '#f5f5f5' : '#0f0f0f'),
+        subtext: theme?.subtextColor ?? (dark ? '#888888' : '#6b7280'),
+        border: theme?.borderColor ?? (dark ? '#2a2a2a' : '#e5e5e5'),
+        errorBg: dark ? 'rgba(239,68,68,0.1)' : '#fef2f2',
+        errorText: dark ? '#f87171' : '#b91c1c',
+        radius: theme?.borderRadius ?? 14
     };
 }
 
@@ -103,93 +104,90 @@ function IntroStep({ theme, locale, onStart }) {
     return /*#__PURE__*/ React.createElement(View, {
         style: s.container
     }, /*#__PURE__*/ React.createElement(View, {
-        style: s.steps
-    }, [
-        {
-            icon: '🪪',
-            label: 'Document'
-        },
-        {
-            icon: '🤳',
-            label: 'Selfie'
-        },
-        {
-            icon: '👁️',
-            label: 'Liveness'
-        }
-    ].map((item)=>/*#__PURE__*/ React.createElement(View, {
-            key: item.label,
-            style: s.step
-        }, /*#__PURE__*/ React.createElement(View, {
-            style: s.stepIcon
-        }, /*#__PURE__*/ React.createElement(Text, {
-            style: s.stepEmoji
-        }, item.icon)), /*#__PURE__*/ React.createElement(Text, {
-            style: s.stepLabel
-        }, item.label)))), /*#__PURE__*/ React.createElement(Text, {
+        style: s.textBlock
+    }, /*#__PURE__*/ React.createElement(Text, {
         style: s.title
     }, locale.intro_title), /*#__PURE__*/ React.createElement(Text, {
-        style: s.body
-    }, locale.intro_body), /*#__PURE__*/ React.createElement(TouchableOpacity, {
+        style: s.subtitle
+    }, locale.intro_body)), /*#__PURE__*/ React.createElement(View, {
+        style: s.hint
+    }, /*#__PURE__*/ React.createElement(Text, {
+        style: s.hintIcon
+    }, "🔒"), /*#__PURE__*/ React.createElement(Text, {
+        style: s.hintText
+    }, "Your data is discarded immediately after processing. Nothing is stored.")), /*#__PURE__*/ React.createElement(TouchableOpacity, {
         style: s.btn,
         onPress: onStart,
         activeOpacity: 0.85
     }, /*#__PURE__*/ React.createElement(Text, {
         style: s.btnText
-    }, locale.intro_cta)));
+    }, locale.intro_cta), /*#__PURE__*/ React.createElement(Text, {
+        style: s.btnArrow
+    }, " →")));
 }
 const styles$6 = (t)=>StyleSheet.create({
         container: {
-            padding: 24
-        },
-        steps: {
-            flexDirection: 'row',
+            flex: 1,
+            padding: 28,
             justifyContent: 'center',
-            gap: 20,
-            marginBottom: 28
-        },
-        step: {
-            alignItems: 'center',
-            gap: 8
+            gap: 16
         },
-        stepIcon: {
-            width: 56,
-            height: 56,
-            borderRadius: 14,
-            backgroundColor: t.card,
-            borderWidth: 1,
-            borderColor: t.border,
+        textBlock: {
             alignItems: 'center',
-            justifyContent: 'center'
-        },
-        stepEmoji: {
-            fontSize: 24
-        },
-        stepLabel: {
-            fontSize: 12,
-            color: t.subtext
+            gap: 8,
+            marginBottom: 4
         },
         title: {
             fontSize: 22,
             fontWeight: '700',
             color: t.text,
-            marginBottom: 10
+            textAlign: 'center',
+            letterSpacing: -0.4
         },
-        body: {
+        subtitle: {
             fontSize: 14,
             color: t.subtext,
             lineHeight: 21,
-            marginBottom: 28
+            textAlign: 'center'
+        },
+        hint: {
+            flexDirection: 'row',
+            alignItems: 'flex-start',
+            gap: 8,
+            padding: 12,
+            backgroundColor: t.surface,
+            borderRadius: t.radius - 4,
+            borderWidth: 1,
+            borderColor: t.border
+        },
+        hintIcon: {
+            fontSize: 12,
+            marginTop: 1
+        },
+        hintText: {
+            flex: 1,
+            fontSize: 12,
+            color: t.subtext,
+            lineHeight: 17
         },
         btn: {
             backgroundColor: t.accent,
-            borderRadius: t.radius,
-            paddingVertical: 14,
-            alignItems: 'center'
+            borderRadius: t.radius - 4,
+            paddingVertical: 13,
+            paddingHorizontal: 20,
+            flexDirection: 'row',
+            alignItems: 'center',
+            justifyContent: 'center'
         },
         btnText: {
-            color: '#fff',
-            fontSize: 15,
+            color: t.accentInv,
+            fontSize: 14,
+            fontWeight: '600',
+            letterSpacing: -0.2
+        },
+        btnArrow: {
+            color: t.accentInv,
+            fontSize: 14,
             fontWeight: '600'
         }
     });
@@ -241,52 +239,256 @@ function useCamera(facing = 'back') {
     };
 }
 
-function DocumentStep({ theme, locale, onCapture }) {
+/**
+ * quality.ts — Native port of @kernaq/capture-web analyseImage logic.
+ *
+ * React Native has no OffscreenCanvas or createImageBitmap, so we decode
+ * the JPEG manually from its base64 representation to extract a luminance
+ * sample, then run the same Laplacian variance + brightness + fill-ratio
+ * checks the web SDK uses.
+ *
+ * This is intentionally dependency-free — no expo-image-manipulator,
+ * no worklets, no native modules beyond what vision-camera already provides.
+ *
+ * The JPEG sampling approach:
+ *   1. takeSnapshot({ quality: 20 }) → tiny file (~5-15KB)
+ *   2. fetch as ArrayBuffer → raw bytes
+ *   3. Skip JPEG header bytes, sample raw DCT-domain luminance bytes
+ *      as a brightness proxy (not exact, but sufficient for dark/overexposed detection)
+ *   4. For blur: compute variance of luminance differences between adjacent samples
+ *
+ * Limitations vs web SDK:
+ *   - Fill ratio check is approximated via luminance variance spread
+ *   - Glasses glare heuristic is the same eye-band brightness check
+ *   - Blur detection is less precise but calibrated to the same thresholds
+ */ const DEFAULTS = {
+    minBlurScore: 25,
+    minBrightness: 40,
+    maxBrightness: 220,
+    minFillRatio: 0.08
+};
+/**
+ * Analyse an image from a file URI.
+ * Reads the raw bytes, samples luminance, returns a quality report.
+ */ async function analyseImageUri(uri, config = {}) {
+    const cfg = {
+        ...DEFAULTS,
+        ...config
+    };
+    try {
+        // Fetch the image as raw bytes
+        const resp = await fetch(uri);
+        const buffer = await resp.arrayBuffer();
+        const bytes = new Uint8Array(buffer);
+        // Sample luminance values from the raw bytes
+        // JPEG compressed bytes in the entropy-coded segment correlate with luminance
+        // We skip the JPEG header (first ~400-600 bytes typically) and sample every Nth byte
+        const start = Math.min(600, Math.floor(bytes.length * 0.1));
+        const end = Math.floor(bytes.length * 0.9);
+        const step = Math.max(1, Math.floor((end - start) / 2048));
+        const samples = [];
+        for(let i = start; i < end; i += step){
+            samples.push(bytes[i]);
+        }
+        if (samples.length === 0) {
+            return {
+                passed: false,
+                blurScore: 0,
+                brightness: 0,
+                fillRatio: 0,
+                failures: [
+                    'too_blurry'
+                ]
+            };
+        }
+        const brightness = computeMean(samples);
+        const blurScore = computeBlurScore(samples);
+        const fillRatio = computeFillProxy(samples);
+        const failures = [];
+        const cfg2 = cfg;
+        if (blurScore < cfg2.minBlurScore) failures.push('too_blurry');
+        if (brightness < cfg2.minBrightness) failures.push('too_dark');
+        if (brightness > cfg2.maxBrightness) failures.push('too_bright');
+        if (fillRatio < cfg2.minFillRatio) failures.push('too_small');
+        return {
+            passed: failures.length === 0,
+            blurScore,
+            brightness,
+            fillRatio,
+            failures
+        };
+    } catch  {
+        // If we can't read the file, assume it's a transient error — don't block
+        return {
+            passed: true,
+            blurScore: 50,
+            brightness: 128,
+            fillRatio: 0.5,
+            failures: []
+        };
+    }
+}
+// ── Helpers ───────────────────────────────────────────────────────────────────
+function computeMean(samples) {
+    return samples.reduce((a, b)=>a + b, 0) / samples.length;
+}
+/**
+ * Laplacian variance proxy: variance of first-difference between adjacent samples.
+ * Normalised to 0–100. Higher = more high-frequency content = sharper.
+ */ function computeBlurScore(samples) {
+    if (samples.length < 2) return 0;
+    let sumSq = 0;
+    let sum = 0;
+    for(let i = 1; i < samples.length; i++){
+        const d = samples[i] - samples[i - 1];
+        sum += d;
+        sumSq += d * d;
+    }
+    const n = samples.length - 1;
+    const mean = sum / n;
+    const variance = sumSq / n - mean * mean;
+    // Empirically ~0 = solid colour (blurry), ~800+ = sharp photo
+    return Math.min(100, Math.round(variance / 800 * 100));
+}
+/**
+ * Fill ratio proxy: fraction of samples that differ significantly from the mean.
+ * Analogous to the foreground pixel fraction in the web SDK.
+ */ function computeFillProxy(samples) {
+    const mean = computeMean(samples);
+    const threshold = 30;
+    const foreground = samples.filter((s)=>Math.abs(s - mean) > threshold).length;
+    return foreground / samples.length;
+}
+/**
+ * Selfie-specific quality check with glasses/glare heuristic.
+ * Takes snapshots from two regions: full frame and top-40% (eye area).
+ *
+ * Returns a guidance message (empty string = all good) and a passing flag.
+ */ async function analyseSelfieFrame(uri, config = {}) {
+    const cfg = {
+        ...DEFAULTS,
+        ...config
+    };
+    try {
+        const resp = await fetch(uri);
+        const buffer = await resp.arrayBuffer();
+        const bytes = new Uint8Array(buffer);
+        const total = bytes.length;
+        const start = Math.min(600, Math.floor(total * 0.1));
+        const step = Math.max(1, Math.floor((total - start) / 1024));
+        // Full-frame samples
+        const full = [];
+        for(let i = start; i < total; i += step)full.push(bytes[i]);
+        // Top-40% samples (eye region proxy — first 40% of the data after header)
+        const eyeEnd = start + Math.floor((total - start) * 0.4);
+        const eyeSamples = [];
+        for(let i = start; i < eyeEnd; i += step)eyeSamples.push(bytes[i]);
+        const brightness = computeMean(full);
+        const blurScore = computeBlurScore(full);
+        const eyeMean = computeMean(eyeSamples);
+        // Priority-ordered checks — mirrors web component exactly
+        if (brightness < cfg.minBrightness) return {
+            passing: false,
+            message: 'Move to better lighting'
+        };
+        if (brightness > cfg.maxBrightness) return {
+            passing: false,
+            message: 'Too bright — avoid direct light'
+        };
+        if (eyeMean > 210) return {
+            passing: false,
+            message: 'Remove glasses'
+        };
+        if (blurScore < cfg.minBlurScore) return {
+            passing: false,
+            message: 'Hold still'
+        };
+        return {
+            passing: true,
+            message: 'Hold still\u2026'
+        };
+    } catch  {
+        return {
+            passing: false,
+            message: 'Hold still'
+        };
+    }
+}
+
+function DocumentStep({ theme, locale, side, frontUri, onCapture, onRetakeFront }) {
     const { cameraRef, device, capturePhoto } = useCamera('back');
-    const [preview, setPreview] = React.useState(null);
-    const [capturing, setCapturing] = React.useState(false);
+    const [capturing, setCapturing] = useState(false);
+    const [error, setError] = useState(null);
     const s = styles$5(theme);
     const handleCapture = async ()=>{
+        if (!cameraRef.current) return;
         setCapturing(true);
+        setError(null);
         const result = await capturePhoto();
+        if (!result) {
+            setError(locale.error_blur);
+            setCapturing(false);
+            return;
+        }
+        // Run same quality checks as web SDK
+        const report = await analyseImageUri(result.uri, {
+            minBlurScore: 20,
+            minBrightness: 30,
+            maxBrightness: 230,
+            minFillRatio: 0.05
+        });
         setCapturing(false);
-        if (result) setPreview(result.uri);
-    };
-    const handleConfirm = ()=>{
-        if (preview) onCapture(preview);
+        if (!report.passed) {
+            const msgs = {
+                too_blurry: locale.error_blur,
+                too_dark: 'Move to better lighting',
+                too_bright: 'Reduce brightness or move away from light',
+                too_small: 'Move closer to the document'
+            };
+            setError(msgs[report.failures[0]] ?? locale.error_quality);
+            return;
+        }
+        onCapture(result.uri);
     };
+    const title = side === 'front' ? locale.doc_front_title : locale.doc_back_title;
+    const instruction = side === 'front' ? locale.doc_front_instruction : locale.doc_back_instruction;
+    const hint = side === 'front' ? 'Hold the camera parallel to the document. Move closer if text is hard to read.' : 'Flip the document over and keep it flat inside the frame.';
     if (!device) {
         return /*#__PURE__*/ React.createElement(View, {
-            style: s.container
+            style: [
+                s.container,
+                {
+                    justifyContent: 'center',
+                    alignItems: 'center'
+                }
+            ]
         }, /*#__PURE__*/ React.createElement(ActivityIndicator, {
             color: theme.accent
         }));
     }
     return /*#__PURE__*/ React.createElement(View, {
         style: s.container
+    }, /*#__PURE__*/ React.createElement(View, {
+        style: s.heading
     }, /*#__PURE__*/ React.createElement(Text, {
         style: s.title
-    }, locale.doc_title), /*#__PURE__*/ React.createElement(Text, {
+    }, title), /*#__PURE__*/ React.createElement(Text, {
         style: s.subtitle
-    }, locale.doc_instruction), preview ? /*#__PURE__*/ React.createElement(React.Fragment, null, /*#__PURE__*/ React.createElement(Image, {
+    }, instruction)), error ? /*#__PURE__*/ React.createElement(View, {
+        style: s.errorBanner
+    }, /*#__PURE__*/ React.createElement(Text, {
+        style: s.errorText
+    }, error)) : null, side === 'back' && frontUri ? /*#__PURE__*/ React.createElement(View, {
+        style: s.thumbRow
+    }, /*#__PURE__*/ React.createElement(Image, {
         source: {
-            uri: preview
+            uri: frontUri
         },
-        style: s.preview,
+        style: s.thumb,
         resizeMode: "cover"
-    }), /*#__PURE__*/ React.createElement(TouchableOpacity, {
-        style: s.btnPrimary,
-        onPress: handleConfirm,
-        activeOpacity: 0.85
-    }, /*#__PURE__*/ React.createElement(Text, {
-        style: s.btnText
-    }, locale.doc_next_btn)), /*#__PURE__*/ React.createElement(TouchableOpacity, {
-        style: s.btnSecondary,
-        onPress: ()=>setPreview(null),
-        activeOpacity: 0.75
-    }, /*#__PURE__*/ React.createElement(Text, {
-        style: s.btnSecondaryText
-    }, locale.doc_retake_btn))) : /*#__PURE__*/ React.createElement(React.Fragment, null, /*#__PURE__*/ React.createElement(View, {
+    }), /*#__PURE__*/ React.createElement(Text, {
+        style: s.thumbLabel
+    }, "✓ Front captured")) : null, /*#__PURE__*/ React.createElement(View, {
         style: s.viewport
     }, /*#__PURE__*/ React.createElement(Camera, {
         ref: cameraRef,
@@ -297,104 +499,287 @@ function DocumentStep({ theme, locale, onCapture }) {
     }), /*#__PURE__*/ React.createElement(View, {
         style: s.frameGuide,
         pointerEvents: "none"
-    })), /*#__PURE__*/ React.createElement(TouchableOpacity, {
+    }, /*#__PURE__*/ React.createElement(View, {
+        style: [
+            s.corner,
+            s.tl
+        ]
+    }), /*#__PURE__*/ React.createElement(View, {
+        style: [
+            s.corner,
+            s.tr
+        ]
+    }), /*#__PURE__*/ React.createElement(View, {
+        style: [
+            s.corner,
+            s.bl
+        ]
+    }), /*#__PURE__*/ React.createElement(View, {
+        style: [
+            s.corner,
+            s.br
+        ]
+    })), /*#__PURE__*/ React.createElement(View, {
+        style: s.dimOverlay,
+        pointerEvents: "none"
+    })), /*#__PURE__*/ React.createElement(View, {
+        style: s.hint
+    }, /*#__PURE__*/ React.createElement(Text, {
+        style: s.hintText
+    }, hint)), /*#__PURE__*/ React.createElement(TouchableOpacity, {
         style: [
-            s.btnPrimary,
+            s.btn,
             capturing && s.btnDisabled
         ],
         onPress: handleCapture,
         disabled: capturing,
         activeOpacity: 0.85
     }, capturing ? /*#__PURE__*/ React.createElement(ActivityIndicator, {
-        color: "#fff"
+        color: theme.accentInv
     }) : /*#__PURE__*/ React.createElement(Text, {
         style: s.btnText
-    }, locale.doc_capture_btn))));
+    }, locale.doc_capture_btn)), side === 'back' && onRetakeFront ? /*#__PURE__*/ React.createElement(TouchableOpacity, {
+        style: s.btnGhost,
+        onPress: onRetakeFront,
+        activeOpacity: 0.75
+    }, /*#__PURE__*/ React.createElement(Text, {
+        style: s.btnGhostText
+    }, locale.doc_retake_btn, " front")) : null);
 }
+const CORNER_SIZE = 20;
+const CORNER_W = 2;
 const styles$5 = (t)=>StyleSheet.create({
         container: {
-            padding: 24
+            flex: 1,
+            padding: 20,
+            gap: 12
+        },
+        heading: {
+            gap: 4,
+            alignItems: 'center'
         },
         title: {
             fontSize: 20,
             fontWeight: '700',
             color: t.text,
-            marginBottom: 8
+            textAlign: 'center',
+            letterSpacing: -0.3
         },
         subtitle: {
-            fontSize: 14,
+            fontSize: 13,
             color: t.subtext,
-            lineHeight: 20,
-            marginBottom: 16
+            lineHeight: 19,
+            textAlign: 'center'
+        },
+        errorBanner: {
+            backgroundColor: t.errorBg,
+            borderRadius: 8,
+            padding: 10
+        },
+        errorText: {
+            fontSize: 12.5,
+            color: t.errorText,
+            lineHeight: 17
+        },
+        thumbRow: {
+            flexDirection: 'row',
+            alignItems: 'center',
+            gap: 10,
+            padding: 8,
+            backgroundColor: t.surface,
+            borderRadius: 8,
+            borderWidth: 1,
+            borderColor: t.border
+        },
+        thumb: {
+            width: 48,
+            height: 32,
+            borderRadius: 5,
+            borderWidth: 1,
+            borderColor: t.border
+        },
+        thumbLabel: {
+            fontSize: 12,
+            color: t.subtext
         },
         viewport: {
-            width: '100%',
-            aspectRatio: 4 / 3,
-            borderRadius: t.radius,
+            flex: 1,
+            borderRadius: t.radius - 4,
             overflow: 'hidden',
             backgroundColor: '#000',
-            marginBottom: 16,
             position: 'relative'
         },
         frameGuide: {
             position: 'absolute',
             top: '8%',
-            left: '5%',
-            right: '5%',
-            bottom: '8%',
-            borderWidth: 2,
-            borderColor: 'rgba(255,255,255,0.7)',
-            borderRadius: 8
+            left: '6%',
+            right: '6%',
+            bottom: '8%'
         },
-        preview: {
-            width: '100%',
-            aspectRatio: 4 / 3,
-            borderRadius: t.radius,
-            marginBottom: 16,
+        corner: {
+            position: 'absolute',
+            width: CORNER_SIZE,
+            height: CORNER_SIZE,
+            borderColor: 'rgba(255,255,255,0.9)'
+        },
+        tl: {
+            top: 0,
+            left: 0,
+            borderTopWidth: CORNER_W,
+            borderLeftWidth: CORNER_W,
+            borderTopLeftRadius: 3
+        },
+        tr: {
+            top: 0,
+            right: 0,
+            borderTopWidth: CORNER_W,
+            borderRightWidth: CORNER_W,
+            borderTopRightRadius: 3
+        },
+        bl: {
+            bottom: 0,
+            left: 0,
+            borderBottomWidth: CORNER_W,
+            borderLeftWidth: CORNER_W,
+            borderBottomLeftRadius: 3
+        },
+        br: {
+            bottom: 0,
+            right: 0,
+            borderBottomWidth: CORNER_W,
+            borderRightWidth: CORNER_W,
+            borderBottomRightRadius: 3
+        },
+        dimOverlay: {
+            position: 'absolute',
+            top: 0,
+            left: 0,
+            right: 0,
+            bottom: 0,
+            backgroundColor: 'transparent'
+        },
+        hint: {
+            flexDirection: 'row',
+            gap: 7,
+            padding: 9,
+            backgroundColor: t.surface,
+            borderRadius: 8,
             borderWidth: 1,
             borderColor: t.border
         },
-        btnPrimary: {
-            backgroundColor: t.accent,
-            borderRadius: t.radius,
-            paddingVertical: 14,
-            alignItems: 'center',
-            marginBottom: 10
+        hintText: {
+            flex: 1,
+            fontSize: 12,
+            color: t.subtext,
+            lineHeight: 16
         },
-        btnSecondary: {
-            backgroundColor: t.card,
-            borderRadius: t.radius,
-            paddingVertical: 14,
-            alignItems: 'center',
-            borderWidth: 1,
-            borderColor: t.border
+        btn: {
+            backgroundColor: t.accent,
+            borderRadius: t.radius - 4,
+            paddingVertical: 12,
+            alignItems: 'center'
         },
         btnDisabled: {
-            opacity: 0.6
+            opacity: 0.5
         },
         btnText: {
-            color: '#fff',
-            fontSize: 15,
+            color: t.accentInv,
+            fontSize: 14,
             fontWeight: '600'
         },
-        btnSecondaryText: {
-            color: t.text,
-            fontSize: 15,
-            fontWeight: '600'
+        btnGhost: {
+            borderRadius: t.radius - 4,
+            paddingVertical: 11,
+            alignItems: 'center',
+            borderWidth: 1,
+            borderColor: t.border,
+            backgroundColor: 'transparent'
+        },
+        btnGhostText: {
+            color: t.subtext,
+            fontSize: 13.5,
+            fontWeight: '500'
         }
     });
 
-function SelfieStep({ theme, locale, onCapture, onBack }) {
-    const { cameraRef, device, capturePhoto } = useCamera('front');
-    const [preview, setPreview] = React.useState(null);
-    const [capturing, setCapturing] = React.useState(false);
+const HOLD_FRAMES = 12 // ~1.5s at 120ms per frame
+;
+function SelfieStep({ theme, locale, onCapture }) {
+    const cameraRef = useRef(null);
+    const device = useCameraDevice('front');
+    const [pill, setPill] = useState('Align your face');
+    const [pillOk, setPillOk] = useState(false);
+    const [capturing, setCapturing] = useState(false);
+    const readyFrames = useRef(0);
+    const timerRef = useRef(null);
+    const borderAnim = useRef(new Animated.Value(0)).current // 0 = white, 1 = green
+    ;
     const s = styles$4(theme);
-    const handleCapture = async ()=>{
-        setCapturing(true);
-        const result = await capturePhoto();
-        setCapturing(false);
-        if (result) setPreview(result.uri);
-    };
+    // Animate oval border colour
+    useEffect(()=>{
+        Animated.timing(borderAnim, {
+            toValue: pillOk ? 1 : 0,
+            duration: 200,
+            useNativeDriver: false
+        }).start();
+    }, [
+        pillOk,
+        borderAnim
+    ]);
+    const ovalBorder = borderAnim.interpolate({
+        inputRange: [
+            0,
+            1
+        ],
+        outputRange: [
+            'rgba(255,255,255,0.75)',
+            '#4ade80'
+        ]
+    });
+    useEffect(()=>{
+        if (!device || capturing) return;
+        timerRef.current = setInterval(async ()=>{
+            if (!cameraRef.current || capturing) return;
+            try {
+                // Fast low-quality snapshot for analysis only
+                const snap = await cameraRef.current.takeSnapshot({
+                    quality: 20
+                });
+                const uri = `file://${snap.path}`;
+                const { passing, message } = await analyseSelfieFrame(uri, {
+                    minBlurScore: 22,
+                    minBrightness: 40,
+                    maxBrightness: 220
+                });
+                setPill(passing ? 'Hold still\u2026' : message);
+                setPillOk(passing);
+                if (passing) {
+                    readyFrames.current++;
+                } else {
+                    readyFrames.current = 0;
+                }
+                if (readyFrames.current >= HOLD_FRAMES) {
+                    // Stop loop, take full-quality photo
+                    clearInterval(timerRef.current);
+                    timerRef.current = null;
+                    setCapturing(true);
+                    const full = await cameraRef.current.takePhoto({
+                        qualityPrioritization: 'quality'
+                    });
+                    onCapture(`file://${full.path}`);
+                }
+            } catch  {
+                readyFrames.current = 0;
+            }
+        }, 120);
+        return ()=>{
+            if (timerRef.current) clearInterval(timerRef.current);
+        };
+    }, [
+        device,
+        capturing,
+        onCapture
+    ]);
     if (!device) return /*#__PURE__*/ React.createElement(ActivityIndicator, {
         color: theme.accent,
         style: {
@@ -403,148 +788,188 @@ function SelfieStep({ theme, locale, onCapture, onBack }) {
     });
     return /*#__PURE__*/ React.createElement(View, {
         style: s.container
+    }, /*#__PURE__*/ React.createElement(View, {
+        style: s.heading
     }, /*#__PURE__*/ React.createElement(Text, {
         style: s.title
     }, locale.selfie_title), /*#__PURE__*/ React.createElement(Text, {
         style: s.subtitle
-    }, locale.selfie_instruction), preview ? /*#__PURE__*/ React.createElement(React.Fragment, null, /*#__PURE__*/ React.createElement(Image, {
-        source: {
-            uri: preview
-        },
-        style: s.preview,
-        resizeMode: "cover"
-    }), /*#__PURE__*/ React.createElement(TouchableOpacity, {
-        style: s.btnPrimary,
-        onPress: ()=>onCapture(preview),
-        activeOpacity: 0.85
-    }, /*#__PURE__*/ React.createElement(Text, {
-        style: s.btnText
-    }, locale.selfie_next_btn)), /*#__PURE__*/ React.createElement(TouchableOpacity, {
-        style: s.btnSecondary,
-        onPress: ()=>setPreview(null),
-        activeOpacity: 0.75
-    }, /*#__PURE__*/ React.createElement(Text, {
-        style: s.btnSecondaryText
-    }, locale.selfie_retake_btn))) : /*#__PURE__*/ React.createElement(React.Fragment, null, /*#__PURE__*/ React.createElement(View, {
+    }, locale.selfie_instruction)), /*#__PURE__*/ React.createElement(View, {
         style: s.viewport
     }, /*#__PURE__*/ React.createElement(Camera, {
         ref: cameraRef,
         style: StyleSheet.absoluteFill,
         device: device,
-        isActive: true,
+        isActive: !capturing,
         photo: true
-    }), /*#__PURE__*/ React.createElement(View, {
-        style: s.ovalGuide,
+    }), /*#__PURE__*/ React.createElement(Animated.View, {
+        style: [
+            s.oval,
+            {
+                borderColor: ovalBorder
+            }
+        ],
         pointerEvents: "none"
-    })), /*#__PURE__*/ React.createElement(TouchableOpacity, {
+    }), /*#__PURE__*/ React.createElement(View, {
         style: [
-            s.btnPrimary,
-            capturing && s.btnDisabled
+            s.pill,
+            pillOk && s.pillOk
         ],
-        onPress: handleCapture,
-        disabled: capturing,
-        activeOpacity: 0.85
-    }, capturing ? /*#__PURE__*/ React.createElement(ActivityIndicator, {
-        color: "#fff"
-    }) : /*#__PURE__*/ React.createElement(Text, {
-        style: s.btnText
-    }, locale.selfie_capture_btn)), /*#__PURE__*/ React.createElement(TouchableOpacity, {
-        style: s.btnSecondary,
-        onPress: onBack,
-        activeOpacity: 0.75
+        pointerEvents: "none"
     }, /*#__PURE__*/ React.createElement(Text, {
-        style: s.btnSecondaryText
-    }, locale.doc_retake_btn))));
+        style: s.pillText
+    }, pill))), capturing && /*#__PURE__*/ React.createElement(View, {
+        style: s.capturingRow
+    }, /*#__PURE__*/ React.createElement(ActivityIndicator, {
+        color: theme.accent,
+        size: "small"
+    }), /*#__PURE__*/ React.createElement(Text, {
+        style: s.capturingText
+    }, "Capturing…")));
 }
 const styles$4 = (t)=>StyleSheet.create({
         container: {
-            padding: 24
+            flex: 1,
+            padding: 20,
+            gap: 12
+        },
+        heading: {
+            gap: 4,
+            alignItems: 'center'
         },
         title: {
             fontSize: 20,
             fontWeight: '700',
             color: t.text,
-            marginBottom: 8
+            textAlign: 'center',
+            letterSpacing: -0.3
         },
         subtitle: {
-            fontSize: 14,
+            fontSize: 13,
             color: t.subtext,
-            lineHeight: 20,
-            marginBottom: 16
+            lineHeight: 19,
+            textAlign: 'center'
         },
         viewport: {
-            width: '100%',
-            aspectRatio: 3 / 4,
-            borderRadius: t.radius,
+            flex: 1,
+            borderRadius: t.radius - 4,
             overflow: 'hidden',
             backgroundColor: '#000',
-            marginBottom: 16,
-            position: 'relative',
-            alignSelf: 'center',
-            maxWidth: 280
+            position: 'relative'
         },
-        ovalGuide: {
+        oval: {
             position: 'absolute',
-            top: '8%',
-            left: '12%',
-            right: '12%',
-            bottom: '8%',
+            left: '21%',
+            right: '21%',
+            top: '6%',
+            bottom: '6%',
             borderWidth: 2,
-            borderColor: 'rgba(255,255,255,0.7)',
             borderRadius: 999
         },
-        preview: {
-            width: 240,
-            height: 320,
-            borderRadius: t.radius,
-            marginBottom: 16,
+        pill: {
+            position: 'absolute',
+            bottom: 14,
             alignSelf: 'center',
-            borderWidth: 1,
-            borderColor: t.border
-        },
-        btnPrimary: {
-            backgroundColor: t.accent,
-            borderRadius: t.radius,
-            paddingVertical: 14,
-            alignItems: 'center',
-            marginBottom: 10
-        },
-        btnSecondary: {
-            backgroundColor: t.card,
-            borderRadius: t.radius,
-            paddingVertical: 14,
-            alignItems: 'center',
-            borderWidth: 1,
-            borderColor: t.border
+            backgroundColor: 'rgba(0,0,0,0.65)',
+            borderRadius: 999,
+            paddingHorizontal: 16,
+            paddingVertical: 7,
+            borderWidth: 1.5,
+            borderColor: 'rgba(255,255,255,0.15)'
         },
-        btnDisabled: {
-            opacity: 0.6
+        pillOk: {
+            backgroundColor: 'rgba(22,163,74,0.8)',
+            borderColor: 'rgba(134,239,172,0.5)'
         },
-        btnText: {
+        pillText: {
             color: '#fff',
-            fontSize: 15,
+            fontSize: 13,
             fontWeight: '600'
         },
-        btnSecondaryText: {
-            color: t.text,
-            fontSize: 15,
-            fontWeight: '600'
+        capturingRow: {
+            flexDirection: 'row',
+            alignItems: 'center',
+            justifyContent: 'center',
+            gap: 8,
+            paddingVertical: 8
+        },
+        capturingText: {
+            fontSize: 13,
+            color: t.subtext
         }
     });
 
-function LivenessStep({ theme, locale, duration, onCapture, onBack }) {
-    const { cameraRef, device, startRecording, stopRecording } = useCamera('front');
+const TASK_POOL = [
+    {
+        id: 'blink',
+        label: 'Blink twice',
+        duration: 3000
+    },
+    {
+        id: 'turn-left',
+        label: 'Turn your head left',
+        duration: 3000
+    },
+    {
+        id: 'turn-right',
+        label: 'Turn your head right',
+        duration: 3000
+    },
+    {
+        id: 'nod',
+        label: 'Nod your head',
+        duration: 3000
+    },
+    {
+        id: 'open-mouth',
+        label: 'Open your mouth',
+        duration: 3000
+    }
+];
+function shuffle(arr) {
+    const a = [
+        ...arr
+    ];
+    for(let i = a.length - 1; i > 0; i--){
+        const j = Math.floor(Math.random() * (i + 1));
+        [a[i], a[j]] = [
+            a[j],
+            a[i]
+        ];
+    }
+    return a;
+}
+function LivenessStep({ theme, locale, duration, taskCount = 2, onCapture }) {
+    const { cameraRef, startRecording, stopRecording } = useCamera('front');
+    const device = useCameraDevice('front');
+    const tasks = useMemo(()=>shuffle(TASK_POOL).slice(0, Math.min(taskCount, TASK_POOL.length)), [
+        taskCount
+    ]);
+    const [taskIdx, setTaskIdx] = useState(0);
+    const [started, setStarted] = useState(false) // task in progress
+    ;
+    const [taskDone, setTaskDone] = useState(0) // completed tasks count
+    ;
+    const [progress, setProgress] = useState(0) // 0–100 for current task bar
+    ;
+    const [complete, setComplete] = useState(false);
     const [recording, setRecording] = useState(false);
-    const [countdown, setCountdown] = useState(Math.ceil(duration / 1000));
-    const timerRef = useRef(null);
+    // Keep a ref in sync with taskIdx so setTimeout/setInterval closures always
+    // read the latest value and don't stall on a stale snapshot.
+    const taskIdxRef = useRef(0);
+    const setTaskIdxSynced = (n)=>{
+        taskIdxRef.current = n;
+        setTaskIdx(n);
+    };
+    const progressTimer = useRef(null);
+    const taskTimer = useRef(null);
     const pulseAnim = useRef(new Animated.Value(1)).current;
-    const s = styles$3(theme);
-    // Pulse animation for recording indicator
+    // Pulse REC dot
     useEffect(()=>{
         if (recording) {
             Animated.loop(Animated.sequence([
                 Animated.timing(pulseAnim, {
-                    toValue: 0.3,
+                    toValue: 0.2,
                     duration: 600,
                     useNativeDriver: true
                 }),
@@ -555,34 +980,59 @@ function LivenessStep({ theme, locale, duration, onCapture, onBack }) {
                 })
             ])).start();
         } else {
+            pulseAnim.stopAnimation();
             pulseAnim.setValue(1);
         }
     }, [
         recording,
         pulseAnim
     ]);
-    const handleStart = ()=>{
-        if (!cameraRef.current) return;
-        setRecording(true);
-        setCountdown(Math.ceil(duration / 1000));
-        startRecording((video)=>{
-            setRecording(false);
-            onCapture(video.uri);
-        }, ()=>setRecording(false));
-        // Countdown tick
-        let remaining = duration / 1000;
-        timerRef.current = setInterval(()=>{
-            remaining -= 0.1;
-            setCountdown(Math.max(0, Math.ceil(remaining)));
-            if (remaining <= 0) {
-                if (timerRef.current) clearInterval(timerRef.current);
-                stopRecording();
+    const startTask = ()=>{
+        if (!recording) {
+            startRecording((video)=>{
+                onCapture(video.uri);
+            }, ()=>{});
+            setRecording(true);
+        }
+        const task = tasks[taskIdxRef.current];
+        if (!task) return;
+        setStarted(true);
+        setProgress(0);
+        const start = Date.now();
+        progressTimer.current = setInterval(()=>{
+            const elapsed = Date.now() - start;
+            const pct = Math.min(100, elapsed / task.duration * 100);
+            setProgress(pct);
+            if (elapsed >= task.duration) {
+                clearInterval(progressTimer.current);
+                progressTimer.current = null;
+                nextTask();
             }
-        }, 100);
+        }, 80);
+    };
+    const nextTask = ()=>{
+        const next = taskIdxRef.current + 1;
+        setTaskDone((prev)=>prev + 1);
+        if (next >= tasks.length) {
+            finishLiveness();
+            return;
+        }
+        setTaskIdxSynced(next);
+        setStarted(false);
+        setProgress(0);
+        // Use the ref-based startTask via the timer so it reads the fresh taskIdx
+        taskTimer.current = setTimeout(()=>startTask(), 500);
+    };
+    const finishLiveness = ()=>{
+        setComplete(true);
+        taskTimer.current = setTimeout(()=>{
+            stopRecording();
+        }, 1000);
     };
     useEffect(()=>{
         return ()=>{
-            if (timerRef.current) clearInterval(timerRef.current);
+            if (progressTimer.current) clearInterval(progressTimer.current);
+            if (taskTimer.current) clearTimeout(taskTimer.current);
         };
     }, []);
     if (!device) return /*#__PURE__*/ React.createElement(ActivityIndicator, {
@@ -591,13 +1041,26 @@ function LivenessStep({ theme, locale, duration, onCapture, onBack }) {
             margin: 40
         }
     });
+    const currentTask = tasks[taskIdx];
+    const s = styles$3(theme);
     return /*#__PURE__*/ React.createElement(View, {
         style: s.container
+    }, /*#__PURE__*/ React.createElement(View, {
+        style: s.heading
     }, /*#__PURE__*/ React.createElement(Text, {
         style: s.title
-    }, locale.liveness_title), /*#__PURE__*/ React.createElement(Text, {
+    }, complete ? locale.liveness_complete : locale.liveness_title), !complete && /*#__PURE__*/ React.createElement(Text, {
         style: s.subtitle
-    }, recording ? locale.liveness_recording : locale.liveness_instruction), /*#__PURE__*/ React.createElement(View, {
+    }, locale.liveness_ready)), !complete && /*#__PURE__*/ React.createElement(View, {
+        style: s.taskDots
+    }, tasks.map((_, i)=>/*#__PURE__*/ React.createElement(View, {
+            key: i,
+            style: [
+                s.dot,
+                i < taskDone && s.dotDone,
+                i === taskIdx && s.dotActive
+            ]
+        }))), /*#__PURE__*/ React.createElement(View, {
         style: s.viewport
     }, /*#__PURE__*/ React.createElement(Camera, {
         ref: cameraRef,
@@ -605,11 +1068,11 @@ function LivenessStep({ theme, locale, duration, onCapture, onBack }) {
         device: device,
         isActive: true,
         video: true,
-        audio: true
+        audio: false
     }), /*#__PURE__*/ React.createElement(View, {
         style: s.ovalGuide,
         pointerEvents: "none"
-    }), recording && /*#__PURE__*/ React.createElement(React.Fragment, null, /*#__PURE__*/ React.createElement(View, {
+    }), recording && /*#__PURE__*/ React.createElement(View, {
         style: s.recBadge
     }, /*#__PURE__*/ React.createElement(Animated.View, {
         style: [
@@ -620,59 +1083,94 @@ function LivenessStep({ theme, locale, duration, onCapture, onBack }) {
         ]
     }), /*#__PURE__*/ React.createElement(Text, {
         style: s.recText
-    }, "REC")), /*#__PURE__*/ React.createElement(View, {
-        style: s.countdownBadge
+    }, "REC")), currentTask && !complete && /*#__PURE__*/ React.createElement(View, {
+        style: s.overlay
+    }, /*#__PURE__*/ React.createElement(View, {
+        style: s.overlayPill
+    }, /*#__PURE__*/ React.createElement(Text, {
+        style: s.overlayNum
+    }, taskIdx + 1, "/", tasks.length), /*#__PURE__*/ React.createElement(Text, {
+        style: s.overlayLabel
+    }, currentTask.label)), started && /*#__PURE__*/ React.createElement(View, {
+        style: s.barWrap
+    }, /*#__PURE__*/ React.createElement(View, {
+        style: [
+            s.barFill,
+            {
+                width: `${progress}%`
+            }
+        ]
+    }))), complete && /*#__PURE__*/ React.createElement(View, {
+        style: s.overlay
+    }, /*#__PURE__*/ React.createElement(View, {
+        style: s.overlayPill
     }, /*#__PURE__*/ React.createElement(Text, {
-        style: s.countdownText
-    }, countdown)))), !recording && /*#__PURE__*/ React.createElement(React.Fragment, null, /*#__PURE__*/ React.createElement(TouchableOpacity, {
-        style: s.btnPrimary,
-        onPress: handleStart,
+        style: s.overlayLabel
+    }, locale.liveness_complete)))), !started && !complete && currentTask && taskDone === 0 && /*#__PURE__*/ React.createElement(TouchableOpacity, {
+        style: s.btn,
+        onPress: startTask,
         activeOpacity: 0.85
     }, /*#__PURE__*/ React.createElement(Text, {
         style: s.btnText
-    }, locale.liveness_start_btn)), /*#__PURE__*/ React.createElement(TouchableOpacity, {
-        style: s.btnSecondary,
-        onPress: onBack,
-        activeOpacity: 0.75
-    }, /*#__PURE__*/ React.createElement(Text, {
-        style: s.btnSecondaryText
-    }, locale.selfie_retake_btn))));
+    }, "Begin"), /*#__PURE__*/ React.createElement(Text, {
+        style: s.btnArrow
+    }, " →")));
 }
 const styles$3 = (t)=>StyleSheet.create({
         container: {
-            padding: 24
+            flex: 1,
+            padding: 20,
+            gap: 12
+        },
+        heading: {
+            gap: 4,
+            alignItems: 'center'
         },
         title: {
             fontSize: 20,
             fontWeight: '700',
             color: t.text,
-            marginBottom: 8
+            textAlign: 'center',
+            letterSpacing: -0.3
         },
         subtitle: {
-            fontSize: 14,
+            fontSize: 13,
             color: t.subtext,
-            lineHeight: 20,
-            marginBottom: 16
+            lineHeight: 19,
+            textAlign: 'center'
+        },
+        taskDots: {
+            flexDirection: 'row',
+            gap: 6
+        },
+        dot: {
+            flex: 1,
+            height: 2.5,
+            borderRadius: 999,
+            backgroundColor: t.border
+        },
+        dotDone: {
+            backgroundColor: t.accent,
+            opacity: 0.35
+        },
+        dotActive: {
+            backgroundColor: t.accent
         },
         viewport: {
-            width: '100%',
-            aspectRatio: 3 / 4,
-            borderRadius: t.radius,
+            flex: 1,
+            borderRadius: t.radius - 4,
             overflow: 'hidden',
             backgroundColor: '#000',
-            marginBottom: 16,
-            alignSelf: 'center',
-            maxWidth: 280,
             position: 'relative'
         },
         ovalGuide: {
             position: 'absolute',
-            top: '8%',
-            left: '12%',
-            right: '12%',
-            bottom: '8%',
+            left: '21%',
+            right: '21%',
+            top: '6%',
+            bottom: '6%',
             borderWidth: 2,
-            borderColor: 'rgba(255,255,255,0.7)',
+            borderColor: 'rgba(255,255,255,0.75)',
             borderRadius: 999
         },
         recBadge: {
@@ -681,144 +1179,134 @@ const styles$3 = (t)=>StyleSheet.create({
             left: 10,
             flexDirection: 'row',
             alignItems: 'center',
-            backgroundColor: 'rgba(220,38,38,0.85)',
-            borderRadius: 999,
-            paddingHorizontal: 10,
-            paddingVertical: 4,
-            gap: 6
+            gap: 5,
+            backgroundColor: 'rgba(0,0,0,0.65)',
+            borderWidth: 1,
+            borderColor: 'rgba(239,68,68,0.5)',
+            borderRadius: 5,
+            paddingHorizontal: 8,
+            paddingVertical: 4
         },
         recDot: {
-            width: 8,
-            height: 8,
-            borderRadius: 4,
-            backgroundColor: '#fff'
+            width: 7,
+            height: 7,
+            borderRadius: 3.5,
+            backgroundColor: '#ef4444'
         },
         recText: {
-            color: '#fff',
-            fontSize: 12,
-            fontWeight: '700'
+            color: '#ef4444',
+            fontSize: 11,
+            fontWeight: '700',
+            letterSpacing: 0.5
         },
-        countdownBadge: {
+        overlay: {
             position: 'absolute',
-            bottom: 12,
-            alignSelf: 'center',
-            width: 44,
-            height: 44,
-            borderRadius: 22,
-            backgroundColor: 'rgba(0,0,0,0.5)',
+            bottom: 0,
+            left: 0,
+            right: 0,
+            paddingHorizontal: 12,
+            paddingTop: 10,
+            paddingBottom: 12,
+            gap: 8,
+            backgroundColor: 'transparent'
+        },
+        overlayPill: {
+            flexDirection: 'row',
             alignItems: 'center',
-            justifyContent: 'center'
+            gap: 8
         },
-        countdownText: {
-            color: '#fff',
-            fontSize: 18,
-            fontWeight: '700'
+        overlayNum: {
+            fontSize: 11,
+            fontWeight: '700',
+            color: 'rgba(255,255,255,0.55)',
+            textTransform: 'uppercase',
+            letterSpacing: 0.5
         },
-        btnPrimary: {
-            backgroundColor: t.accent,
-            borderRadius: t.radius,
-            paddingVertical: 14,
-            alignItems: 'center',
-            marginBottom: 10
+        overlayLabel: {
+            fontSize: 15,
+            fontWeight: '700',
+            color: '#fff'
+        },
+        barWrap: {
+            height: 3,
+            backgroundColor: 'rgba(255,255,255,0.2)',
+            borderRadius: 999,
+            overflow: 'hidden'
+        },
+        barFill: {
+            height: '100%',
+            backgroundColor: '#fff',
+            borderRadius: 999
         },
-        btnSecondary: {
-            backgroundColor: t.card,
-            borderRadius: t.radius,
-            paddingVertical: 14,
+        btn: {
+            backgroundColor: t.accent,
+            borderRadius: t.radius - 4,
+            paddingVertical: 12,
+            flexDirection: 'row',
             alignItems: 'center',
-            borderWidth: 1,
-            borderColor: t.border
+            justifyContent: 'center'
         },
         btnText: {
-            color: '#fff',
-            fontSize: 15,
+            color: t.accentInv,
+            fontSize: 14,
             fontWeight: '600'
         },
-        btnSecondaryText: {
-            color: t.text,
-            fontSize: 15,
+        btnArrow: {
+            color: t.accentInv,
+            fontSize: 14,
             fontWeight: '600'
         }
     });
 
 function ProcessingStep({ theme, locale }) {
-    const spinAnim = useRef(new Animated.Value(0)).current;
     const s = styles$2(theme);
-    useEffect(()=>{
-        Animated.loop(Animated.timing(spinAnim, {
-            toValue: 1,
-            duration: 800,
-            useNativeDriver: true
-        })).start();
-    }, [
-        spinAnim
-    ]);
-    const spin = spinAnim.interpolate({
-        inputRange: [
-            0,
-            1
-        ],
-        outputRange: [
-            '0deg',
-            '360deg'
-        ]
-    });
     return /*#__PURE__*/ React.createElement(View, {
         style: s.container
-    }, /*#__PURE__*/ React.createElement(Animated.View, {
-        style: [
-            s.spinner,
-            {
-                transform: [
-                    {
-                        rotate: spin
-                    }
-                ]
-            }
-        ]
+    }, /*#__PURE__*/ React.createElement(ActivityIndicator, {
+        color: theme.accent,
+        size: "large"
     }), /*#__PURE__*/ React.createElement(Text, {
         style: s.title
     }, locale.processing_title), /*#__PURE__*/ React.createElement(Text, {
         style: s.subtitle
-    }, locale.processing_subtitle));
+    }, "This usually takes under 10 seconds."));
 }
 const styles$2 = (t)=>StyleSheet.create({
         container: {
-            padding: 48,
+            flex: 1,
             alignItems: 'center',
-            gap: 16
-        },
-        spinner: {
-            width: 52,
-            height: 52,
-            borderRadius: 26,
-            borderWidth: 4,
-            borderColor: t.border,
-            borderTopColor: t.accent,
-            marginBottom: 8
+            justifyContent: 'center',
+            gap: 16,
+            padding: 32
         },
         title: {
-            fontSize: 18,
+            fontSize: 16,
             fontWeight: '700',
             color: t.text,
             textAlign: 'center'
         },
         subtitle: {
-            fontSize: 14,
+            fontSize: 13,
             color: t.subtext,
             textAlign: 'center'
         }
     });
 
-const ICONS = {
-    pass: '✅',
-    fail: '❌',
-    review: '⏳'
+// Unicode block characters — no emoji, render cleanly on all platforms
+const ICON = {
+    pass: '\u2714',
+    fail: '\u2718',
+    review: '\u29D6'
 };
 const ICON_BG = {
-    pass: '#d1fae5',
+    pass: '#dcfce7',
     fail: '#fee2e2',
-    review: '#fef3c7'
+    review: '#fef9c3'
+};
+const ICON_COLOR = {
+    pass: '#16a34a',
+    fail: '#dc2626',
+    review: '#ca8a04'
 };
 function ResultStep({ theme, locale, result, error, onRetry }) {
     const s = styles$1(theme);
@@ -827,14 +1315,19 @@ function ResultStep({ theme, locale, result, error, onRetry }) {
             style: s.container
         }, /*#__PURE__*/ React.createElement(View, {
             style: [
-                s.iconWrap,
+                s.iconBox,
                 {
-                    backgroundColor: '#fee2e2'
+                    backgroundColor: ICON_BG.fail
                 }
             ]
         }, /*#__PURE__*/ React.createElement(Text, {
-            style: s.icon
-        }, "❌")), /*#__PURE__*/ React.createElement(Text, {
+            style: [
+                s.icon,
+                {
+                    color: ICON_COLOR.fail
+                }
+            ]
+        }, ICON.fail)), /*#__PURE__*/ React.createElement(Text, {
             style: s.title
         }, locale.result_fail_title), /*#__PURE__*/ React.createElement(Text, {
             style: s.body
@@ -844,8 +1337,9 @@ function ResultStep({ theme, locale, result, error, onRetry }) {
             activeOpacity: 0.85
         }, /*#__PURE__*/ React.createElement(Text, {
             style: s.btnText
-        }, locale.result_retry_btn)));
+        }, "Try again")));
     }
+    const v = result.verdict;
     const titles = {
         pass: locale.result_pass_title,
         fail: locale.result_fail_title,
@@ -856,89 +1350,162 @@ function ResultStep({ theme, locale, result, error, onRetry }) {
         fail: locale.result_fail_body,
         review: locale.result_review_body
     };
+    const rows = [
+        {
+            label: 'Verdict',
+            value: v.charAt(0).toUpperCase() + v.slice(1),
+            ok: v === 'pass',
+            bad: v === 'fail'
+        },
+        {
+            label: 'Risk score',
+            value: String(result.score ?? '—')
+        },
+        {
+            label: 'Face match',
+            value: result.faceMatch ? 'Confirmed' : 'Not confirmed',
+            ok: result.faceMatch,
+            bad: !result.faceMatch
+        },
+        {
+            label: 'Liveness',
+            value: result.isLive ? 'Confirmed' : 'Not confirmed',
+            ok: result.isLive,
+            bad: !result.isLive
+        }
+    ];
     return /*#__PURE__*/ React.createElement(View, {
         style: s.container
     }, /*#__PURE__*/ React.createElement(View, {
         style: [
-            s.iconWrap,
+            s.iconBox,
             {
-                backgroundColor: ICON_BG[result.verdict]
+                backgroundColor: ICON_BG[v]
             }
         ]
     }, /*#__PURE__*/ React.createElement(Text, {
-        style: s.icon
-    }, ICONS[result.verdict])), /*#__PURE__*/ React.createElement(Text, {
+        style: [
+            s.icon,
+            {
+                color: ICON_COLOR[v]
+            }
+        ]
+    }, ICON[v])), /*#__PURE__*/ React.createElement(Text, {
         style: s.title
-    }, titles[result.verdict]), /*#__PURE__*/ React.createElement(Text, {
+    }, titles[v]), /*#__PURE__*/ React.createElement(Text, {
         style: s.body
-    }, bodies[result.verdict]), result.verdict === 'fail' && /*#__PURE__*/ React.createElement(TouchableOpacity, {
+    }, bodies[v]), /*#__PURE__*/ React.createElement(View, {
+        style: s.details
+    }, rows.map((row)=>/*#__PURE__*/ React.createElement(View, {
+            key: row.label,
+            style: s.row
+        }, /*#__PURE__*/ React.createElement(Text, {
+            style: s.rowLabel
+        }, row.label), /*#__PURE__*/ React.createElement(Text, {
+            style: [
+                s.rowVal,
+                row.ok && s.rowOk,
+                row.bad && s.rowBad
+            ]
+        }, row.value)))), v === 'fail' && /*#__PURE__*/ React.createElement(TouchableOpacity, {
         style: s.btn,
         onPress: onRetry,
         activeOpacity: 0.85
     }, /*#__PURE__*/ React.createElement(Text, {
         style: s.btnText
-    }, locale.result_retry_btn)));
+    }, "Try again")));
 }
 const styles$1 = (t)=>StyleSheet.create({
         container: {
-            padding: 40,
+            flex: 1,
+            padding: 28,
             alignItems: 'center',
-            gap: 12
+            gap: 14,
+            justifyContent: 'center'
         },
-        iconWrap: {
-            width: 76,
-            height: 76,
-            borderRadius: 38,
+        iconBox: {
+            width: 52,
+            height: 52,
+            borderRadius: 14,
             alignItems: 'center',
             justifyContent: 'center',
-            marginBottom: 8
+            marginBottom: 4
         },
         icon: {
-            fontSize: 34
+            fontSize: 22,
+            fontWeight: '700'
         },
         title: {
             fontSize: 20,
             fontWeight: '700',
             color: t.text,
-            textAlign: 'center'
+            textAlign: 'center',
+            letterSpacing: -0.3
         },
         body: {
-            fontSize: 14,
+            fontSize: 13.5,
             color: t.subtext,
             textAlign: 'center',
-            lineHeight: 21
+            lineHeight: 19
+        },
+        details: {
+            width: '100%',
+            gap: 6
+        },
+        row: {
+            flexDirection: 'row',
+            justifyContent: 'space-between',
+            alignItems: 'center',
+            paddingVertical: 9,
+            paddingHorizontal: 12,
+            backgroundColor: t.surface,
+            borderRadius: 8
+        },
+        rowLabel: {
+            fontSize: 12.5,
+            color: t.subtext
+        },
+        rowVal: {
+            fontSize: 12.5,
+            fontWeight: '600',
+            color: t.text
+        },
+        rowOk: {
+            color: '#16a34a'
+        },
+        rowBad: {
+            color: '#dc2626'
         },
         btn: {
-            marginTop: 8,
+            width: '100%',
             backgroundColor: t.accent,
-            borderRadius: t.radius,
-            paddingVertical: 14,
-            paddingHorizontal: 32,
-            alignItems: 'center'
+            borderRadius: t.radius - 4,
+            paddingVertical: 12,
+            alignItems: 'center',
+            marginTop: 4
         },
         btnText: {
-            color: '#fff',
-            fontSize: 15,
+            color: t.accentInv,
+            fontSize: 14,
             fontWeight: '600'
         }
     });
 
-const STEP_INDEX = {
-    intro: -1,
-    document: 0,
-    selfie: 1,
-    liveness: 2,
-    processing: 3,
-    result: 3
-};
-function KernaqVerify({ visible, apiKey, backendUrl, country = 'KEN', reference, sandbox = false, livenessDuration = 3000, documentTypes = [
-    'national_id',
-    'passport'
-], theme: themeProp, locale: localeProp, onCancel, onComplete, onError }) {
+function KernaqVerify({ visible, apiKey, backendUrl, country = 'KEN', reference, sandbox = false, livenessDuration = 3000, livenessTaskCount = 2, documentType = 'national_id', steps: stepsProp, theme: themeProp, locale: localeProp, onComplete, onError }) {
     const [step, setStep] = useState('intro');
     const [capture, setCapture] = useState({});
     const [result, setResult] = useState(null);
     const [error, setError] = useState(null);
+    // Mirror capture in a ref so submit() always reads the latest value even
+    // when called from inside a stale closure (e.g. goto → submit chain).
+    const captureRef = useRef({});
+    const setCaptureSync = (updater)=>{
+        setCapture((prev)=>{
+            const next = updater(prev);
+            captureRef.current = next;
+            return next;
+        });
+    };
     const theme = useMemo(()=>resolveTheme(themeProp), [
         themeProp
     ]);
@@ -950,48 +1517,104 @@ function KernaqVerify({ visible, apiKey, backendUrl, country = 'KEN', reference,
     ]);
     const { requestPermissions } = usePermissions();
     const s = styles(theme);
-    const reset = useCallback(()=>{
-        setStep('intro');
-        setCapture({});
-        setResult(null);
-        setError(null);
-    }, []);
-    const goto = useCallback(async (next)=>{
-        if (next === 'document' || next === 'selfie' || next === 'liveness') {
+    // Build the ordered flow from the steps prop
+    const flow = useMemo(()=>{
+        const wanted = stepsProp ?? [
+            'document',
+            'selfie',
+            'liveness'
+        ];
+        const out = [];
+        if (wanted.includes('document')) {
+            out.push('doc-front');
+            out.push('doc-back');
+        }
+        if (wanted.includes('selfie')) out.push('selfie');
+        if (wanted.includes('liveness')) out.push('liveness');
+        out.push('processing');
+        return out;
+    }, [
+        stepsProp
+    ]);
+    const next = useCallback((current)=>{
+        const idx = flow.indexOf(current);
+        const nextStep = flow[idx + 1] ?? 'processing';
+        goto(nextStep);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [
+        flow
+    ]);
+    const goto = useCallback(async (s)=>{
+        if (s === 'doc-front' || s === 'doc-back' || s === 'selfie' || s === 'liveness') {
             const granted = await requestPermissions();
             if (!granted) {
                 setError(locale.error_camera_denied);
                 return;
             }
         }
-        setStep(next);
-        if (next === 'processing') {
-            submit();
-        }
+        setStep(s);
+        if (s === 'processing') submit();
+    // submit is stable (no deps that change); locale/requestPermissions are stable refs
     // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [
-        capture,
         locale
     ]);
+    const reset = useCallback(()=>{
+        setStep('intro');
+        captureRef.current = {};
+        setCapture({});
+        setResult(null);
+        setError(null);
+    }, []);
     const submit = useCallback(async ()=>{
-        const { documentUri, selfieUri, videoUri } = capture;
-        if (!documentUri || !selfieUri) {
-            setError('Missing captures — please restart.');
+        const { docFrontUri, docBackUri, selfieUri, videoUri } = captureRef.current;
+        const steps = stepsProp ?? [
+            'document',
+            'selfie',
+            'liveness'
+        ];
+        if (steps.includes('document') && !docFrontUri) {
+            setError('Document capture is missing — please restart.');
+            setStep('result');
+            onError?.({
+                code: 'capture_missing',
+                message: 'Document capture missing'
+            });
+            return;
+        }
+        if (steps.includes('selfie') && !selfieUri) {
+            setError('Selfie capture is missing — please restart.');
             setStep('result');
+            onError?.({
+                code: 'capture_missing',
+                message: 'Selfie capture missing'
+            });
             return;
         }
         const base = (backendUrl ?? 'https://api.identity.kernaq.com/v1').replace(/\/$/, '');
+        const endpoint = sandbox ? '/verify/sandbox' : '/verify';
         const form = new FormData();
-        form.append('document', {
-            uri: documentUri,
-            name: 'document.jpg',
-            type: 'image/jpeg'
-        });
-        form.append('selfie', {
-            uri: selfieUri,
-            name: 'selfie.jpg',
-            type: 'image/jpeg'
-        });
+        if (docFrontUri) {
+            form.append('doc_front', {
+                uri: docFrontUri,
+                name: 'doc_front.jpg',
+                type: 'image/jpeg'
+            });
+        }
+        if (docBackUri) {
+            form.append('doc_back', {
+                uri: docBackUri,
+                name: 'doc_back.jpg',
+                type: 'image/jpeg'
+            });
+        }
+        if (selfieUri) {
+            form.append('selfie', {
+                uri: selfieUri,
+                name: 'selfie.jpg',
+                type: 'image/jpeg'
+            });
+        }
         if (videoUri) {
             form.append('video', {
                 uri: videoUri,
@@ -999,16 +1622,17 @@ function KernaqVerify({ visible, apiKey, backendUrl, country = 'KEN', reference,
                 type: 'video/mp4'
             });
         }
-        form.append('document_type', documentTypes[0] ?? 'national_id');
+        form.append('document_type', documentType);
         form.append('country', country);
         form.append('reference', reference ?? `kq_${Date.now()}`);
-        if (sandbox) form.append('sandbox', 'true');
-        const headers = {
-            'Content-Type': 'multipart/form-data'
-        };
+        // sandbox is handled via URL routing above — no form field needed
+        // Do NOT set Content-Type manually — RN fetch will set multipart/form-data with
+        // the correct boundary automatically. Setting it manually omits the boundary and
+        // causes the server to reject the request.
+        const headers = {};
         if (apiKey) headers['X-API-Key'] = apiKey;
         try {
-            const res = await fetch(`${base}/verify`, {
+            const res = await fetch(`${base}${endpoint}`, {
                 method: 'POST',
                 headers,
                 body: form
@@ -1030,6 +1654,7 @@ function KernaqVerify({ visible, apiKey, backendUrl, country = 'KEN', reference,
         } catch (err) {
             const msg = err.message;
             setError(`${locale.error_network} ${msg}`);
+            setResult(null);
             setStep('result');
             onError?.({
                 code: 'network_error',
@@ -1037,103 +1662,81 @@ function KernaqVerify({ visible, apiKey, backendUrl, country = 'KEN', reference,
             });
         }
     // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [
-        capture
-    ]);
-    const handleCancel = ()=>{
-        reset();
-        onCancel?.();
-    };
-    const progressSteps = [
-        'document',
-        'selfie',
-        'liveness',
-        'processing'
-    ];
-    const currentIdx = STEP_INDEX[step];
+    }, []) // no deps — always reads from captureRef.current, never from stale closure
+    ;
     return /*#__PURE__*/ React.createElement(Modal, {
         visible: visible,
         animationType: "slide",
         presentationStyle: "pageSheet",
-        onRequestClose: handleCancel
+        onRequestClose: ()=>{}
     }, /*#__PURE__*/ React.createElement(SafeAreaView, {
         style: [
-            s.safeArea,
+            s.safe,
             {
                 backgroundColor: theme.bg
             }
         ]
     }, /*#__PURE__*/ React.createElement(View, {
-        style: s.header
-    }, /*#__PURE__*/ React.createElement(Text, {
-        style: s.logo
-    }, "Kernaq"), step !== 'processing' && /*#__PURE__*/ React.createElement(TouchableOpacity, {
-        onPress: handleCancel,
-        style: s.closeBtn,
-        hitSlop: {
-            top: 8,
-            bottom: 8,
-            left: 8,
-            right: 8
-        }
-    }, /*#__PURE__*/ React.createElement(Text, {
-        style: s.closeText
-    }, "✕"))), currentIdx >= 0 && /*#__PURE__*/ React.createElement(View, {
-        style: s.progress
-    }, progressSteps.map((_, i)=>/*#__PURE__*/ React.createElement(View, {
-            key: i,
-            style: [
-                s.progressDot,
-                i < currentIdx && {
-                    backgroundColor: theme.accent,
-                    opacity: 0.4
-                },
-                i === currentIdx && {
-                    backgroundColor: theme.accent
-                }
-            ]
-        }))), /*#__PURE__*/ React.createElement(ScrollView, {
-        style: s.scroll,
-        contentContainerStyle: s.scrollContent,
-        keyboardShouldPersistTaps: "handled",
-        bounces: false
+        style: s.body
     }, step === 'intro' && /*#__PURE__*/ React.createElement(IntroStep, {
         theme: theme,
         locale: locale,
-        onStart: ()=>goto('document')
-    }), step === 'document' && /*#__PURE__*/ React.createElement(DocumentStep, {
+        onStart: ()=>{
+            const first = flow[0];
+            if (first) goto(first);
+        }
+    }), step === 'doc-front' && /*#__PURE__*/ React.createElement(DocumentStep, {
+        theme: theme,
+        locale: locale,
+        side: "front",
+        onCapture: (uri)=>{
+            setCaptureSync((c)=>({
+                    ...c,
+                    docFrontUri: uri
+                }));
+            next('doc-front');
+        }
+    }), step === 'doc-back' && /*#__PURE__*/ React.createElement(DocumentStep, {
         theme: theme,
         locale: locale,
+        side: "back",
+        frontUri: capture.docFrontUri,
         onCapture: (uri)=>{
-            setCapture((c)=>({
+            setCaptureSync((c)=>({
+                    ...c,
+                    docBackUri: uri
+                }));
+            next('doc-back');
+        },
+        onRetakeFront: ()=>{
+            setCaptureSync((c)=>({
                     ...c,
-                    documentUri: uri
+                    docFrontUri: undefined
                 }));
-            goto('selfie');
+            goto('doc-front');
         }
     }), step === 'selfie' && /*#__PURE__*/ React.createElement(SelfieStep, {
         theme: theme,
         locale: locale,
         onCapture: (uri)=>{
-            setCapture((c)=>({
+            setCaptureSync((c)=>({
                     ...c,
                     selfieUri: uri
                 }));
-            goto('liveness');
-        },
-        onBack: ()=>setStep('document')
+            next('selfie');
+        }
     }), step === 'liveness' && /*#__PURE__*/ React.createElement(LivenessStep, {
         theme: theme,
         locale: locale,
         duration: livenessDuration,
+        taskCount: livenessTaskCount,
         onCapture: (uri)=>{
-            setCapture((c)=>({
+            setCaptureSync((c)=>({
                     ...c,
                     videoUri: uri
                 }));
-            goto('processing');
-        },
-        onBack: ()=>setStep('selfie')
+            next('liveness');
+        }
     }), step === 'processing' && /*#__PURE__*/ React.createElement(ProcessingStep, {
         theme: theme,
         locale: locale
@@ -1144,55 +1747,43 @@ function KernaqVerify({ visible, apiKey, backendUrl, country = 'KEN', reference,
         error: error,
         onRetry: ()=>{
             reset();
-            setStep('intro');
+            goto('intro');
         }
-    }))));
+    })), step !== 'processing' && /*#__PURE__*/ React.createElement(View, {
+        style: s.footer
+    }, /*#__PURE__*/ React.createElement(Text, {
+        style: s.footerText
+    }, "Secured by "), /*#__PURE__*/ React.createElement(Text, {
+        style: [
+            s.footerText,
+            {
+                fontWeight: '600',
+                color: theme.text
+            }
+        ]
+    }, "Kernaq"))));
 }
 const styles = (t)=>StyleSheet.create({
-        safeArea: {
+        safe: {
+            flex: 1
+        },
+        body: {
             flex: 1
         },
-        header: {
+        footer: {
             flexDirection: 'row',
             alignItems: 'center',
-            justifyContent: 'space-between',
-            paddingHorizontal: 20,
-            paddingTop: Platform.OS === 'android' ? 16 : 8,
-            paddingBottom: 8
-        },
-        logo: {
-            fontSize: 14,
-            fontWeight: '700',
-            color: t.accent,
-            letterSpacing: 1.2,
-            textTransform: 'uppercase'
-        },
-        closeBtn: {
-            padding: 4
+            justifyContent: 'center',
+            paddingVertical: 10,
+            paddingBottom: Platform.OS === 'ios' ? 4 : 10,
+            borderTopWidth: StyleSheet.hairlineWidth,
+            borderTopColor: t.border
         },
-        closeText: {
-            fontSize: 18,
+        footerText: {
+            fontSize: 11,
             color: t.subtext
-        },
-        progress: {
-            flexDirection: 'row',
-            gap: 6,
-            paddingHorizontal: 20,
-            paddingBottom: 8
-        },
-        progressDot: {
-            flex: 1,
-            height: 3,
-            borderRadius: 999,
-            backgroundColor: t.border
-        },
-        scroll: {
-            flex: 1
-        },
-        scrollContent: {
-            flexGrow: 1
         }
     });
 
-export { KernaqVerify };
+export { KernaqVerify, analyseImageUri, analyseSelfieFrame };
 //# sourceMappingURL=index.esm.js.map