@sanctum-key/react-native-sdk 1.0.13 → 1.0.15

package/build/src/components/KYCElements/IDCardCapture.js

@@ -1,5 +1,5 @@
 import React, { useEffect, useMemo, useState } from 'react';
-import { View, Text, StyleSheet, Image, ScrollView, Platform, ActivityIndicator, TouchableOpacity } from 'react-native'; // 🚨 Added TouchableOpacity
+import { View, Text, StyleSheet, Image, ScrollView, Platform, ActivityIndicator, TouchableOpacity } from 'react-native';
 import { showAlert } from '../../utils/platformAlert';
 import { EnhancedCameraView } from '../EnhancedCameraView';
 import { GovernmentDocumentTypeShorted, GovernmentDocumentTypeBackend } from '../../types/KYC.types';
@@ -23,8 +23,10 @@ export const IDCardCapture = ({ component, value = {}, onValueChange, error, lan
     const [silentCaptureResult, setSilentCaptureResult] = useState({ success: false, isAnalyzing: false });
     const [isProcessingCapture, setIsProcessingCapture] = useState(false);
     const [processingImagePath, setProcessingImagePath] = useState(null);
-    // 🚨 ADDED: Key to force camera re-mount
     const [cameraKey, setCameraKey] = useState(0);
+    const [isRebootingCamera, setIsRebootingCamera] = useState(false);
+    // Web specific state
+    const [cameraType, setCameraType] = useState('back');
     const documentTypeMapping = { 'nationalId': 'national_id', 'passport': 'passport', 'driversLicense': 'drivers_licence', 'residencePermit': 'permanent_residence', 'healthInsuranceCard': 'health_insurance_card', };
     const { actions, state, env } = useTemplateKYCFlowContext();
     const getLocalizedText = (text) => {
@@ -44,7 +46,6 @@ export const IDCardCapture = ({ component, value = {}, onValueChange, error, lan
         return { type: mappedType, region: countrySelectionData.region || 'root' };
     }, [countrySelectionData, documentTypeMapping]);
     const countryData = useMemo(() => countrySelectionData, [countrySelectionData]);
-    const [isRebootingCamera, setIsRebootingCamera] = useState(false);
     const refreshCamera = () => {
         setIsRebootingCamera(true);
         setTimeout(() => {
@@ -52,6 +53,10 @@ export const IDCardCapture = ({ component, value = {}, onValueChange, error, lan
             setIsRebootingCamera(false);
         }, 500);
     };
+    const toggleCameraLens = () => {
+        setCameraType(prev => prev === 'back' ? 'front' : 'back');
+        refreshCamera();
+    };
     useEffect(() => {
         if (value && Object.keys(value).length > 0) {
             if (JSON.stringify(value) !== JSON.stringify(capturedImages)) {
@@ -69,15 +74,20 @@ export const IDCardCapture = ({ component, value = {}, onValueChange, error, lan
     const cameraConfig = useMemo(() => {
         const instructions = selectedDocumentType ? (locale === 'en' ? getDocumentTypeInfo(selectedDocumentType.type).instructions.en : getDocumentTypeInfo(selectedDocumentType.type).instructions.fr) : getLocalizedText(component.instructions);
         return {
-            cameraType: 'back', flashMode: 'auto',
-            overlay: { guideText: instructions, bbox: { xMin: 15, yMin: 20, xMax: 85, yMax: 70, borderColor: '#2DBD60', borderWidth: 3, cornerRadius: 8 } }
+            cameraType: Platform.OS === 'web' ? cameraType : 'back',
+            flashMode: 'auto',
+            overlay: {
+                guideText: instructions,
+                bbox: { xMin: 5, yMin: 15, xMax: 95, yMax: 85, borderColor: '#2DBD60', borderWidth: 3, cornerRadius: 8 }
+            }
         };
-    }, [selectedDocumentType, locale, component.instructions]);
+    }, [selectedDocumentType, locale, component.instructions, cameraType]);
     const retakePicture = (sideToRetake) => {
         setIsProcessingCapture(false);
         setProcessingImagePath(null);
         setSilentCaptureResult({ path: '', success: false, isAnalyzing: false, error: '', templatePath: '', mrz: '', bbox: undefined });
         setShowCamera(true);
+        refreshCamera();
         actions.showCustomStepper(false);
         setCapturedImages((prev) => { const newState = { ...prev }; delete newState[sideToRetake]; return newState; });
         if (value) {
@@ -147,13 +157,22 @@ export const IDCardCapture = ({ component, value = {}, onValueChange, error, lan
         setProcessingImagePath(capturePath);
         try {
             let imagePathForUpload = capturePath;
-            if (verified.bbox) {
-                try {
-                    imagePathForUpload = await cropImageWithBBoxWithTolerance(capturePath, verified.bbox, 0.15);
-                }
-                catch {
-                    imagePathForUpload = capturePath;
-                }
+            // 🚨 THE FIX: Ignore the backend's broken absolute pixels. 
+            // Calculate the crop using the Green UI Frame percentages (0.0 to 1.0)
+            const overlayBbox = cameraConfig.overlay.bbox;
+            const uiCropBbox = {
+                minX: overlayBbox.xMin / 100,
+                minY: overlayBbox.yMin / 100,
+                width: (overlayBbox.xMax - overlayBbox.xMin) / 100,
+                height: (overlayBbox.yMax - overlayBbox.yMin) / 100,
+            };
+            try {
+                // Apply the crop using the UI percentages and a tight 2% tolerance
+                imagePathForUpload = await cropImageWithBBoxWithTolerance(capturePath, uiCropBbox, 0.02);
+            }
+            catch (e) {
+                console.warn("Crop failed, falling back to original image", e);
+                imagePathForUpload = capturePath; // Fallback to raw image if crop fails
             }
             const base64 = await pathToBase64(imagePathForUpload);
             const newImages = {
@@ -177,7 +196,9 @@ export const IDCardCapture = ({ component, value = {}, onValueChange, error, lan
             }, 600);
         }
         catch (e) {
-            showAlert('Error', e?.message || 'Impossible de capturer la photo');
+            console.error("Backend Error:", e);
+            const friendlyError = state.currentLanguage === 'en' ? 'Unable to process document. Please try again.' : 'Impossible de traiter le document. Veuillez réessayer.';
+            showAlert('Error', friendlyError);
             setSilentCaptureResult(prev => ({ ...prev, isAnalyzing: false, success: false }));
             setIsProcessingCapture(false);
             setProcessingImagePath(null);
@@ -239,9 +260,27 @@ export const IDCardCapture = ({ component, value = {}, onValueChange, error, lan
                 await autoCapture(result.path, verifiedResult);
             }
             catch (error) {
-                const isCardNotFullyInFrame = error?.message === 'CARD_NOT_FULLY_IN_FRAME' || error?.message?.includes('entirement');
-                const errorMessage = isCardNotFullyInFrame ? t('kyc.idCardCapture.cardNotFullyInFrame') : (error?.message || 'Erreur de détection');
-                setSilentCaptureResult(prev => ({ ...prev, isAnalyzing: false, success: false, error: errorMessage }));
+                // 1. Keep the technical log for your debugging console
+                console.error("Backend Verification Error:", error);
+                // 2. Define a map of technical keywords to user-friendly messages
+                const rawMessage = (error?.message || '').toLowerCase();
+                let userFriendlyMessage = 'Verification failed. Please try again.';
+                if (rawMessage.includes('impossible') || rawMessage.includes('unreadable')) {
+                    userFriendlyMessage = 'Document unreadable. Please hold the camera steady in good light.';
+                }
+                else if (rawMessage.includes('country mismatch') || rawMessage.includes('pays sélectionné')) {
+                    userFriendlyMessage = 'The document does not match your selected country.';
+                }
+                else if (rawMessage.includes('too far') || rawMessage.includes('card_not_fully_in_frame')) {
+                    userFriendlyMessage = 'Move closer to the document and ensure all corners are visible.';
+                }
+                // 3. Set ONLY the friendly message to the UI state
+                setSilentCaptureResult(prev => ({
+                    ...prev,
+                    isAnalyzing: false,
+                    success: false,
+                    error: userFriendlyMessage
+                }));
             }
         }
     };
@@ -268,29 +307,35 @@ export const IDCardCapture = ({ component, value = {}, onValueChange, error, lan
         const isBusy = isProcessingCapture;
         if (isRebootingCamera) {
             return (<View style={[styles.root, { justifyContent: 'center', alignItems: 'center', backgroundColor: '#000' }]}>
-        <ActivityIndicator size="large" color="#2DBD60"/>
-        <Text style={{ color: 'white', marginTop: 20, fontSize: 16 }}>Initializing Camera...</Text>
-      </View>);
+          <ActivityIndicator size="large" color="#2DBD60"/>
+          <Text style={{ color: 'white', marginTop: 20, fontSize: 16 }}>Initializing Camera...</Text>
+        </View>);
         }
         return (<View style={styles.root}>
-      <View style={[styles.cameraWrapper, { flex: 1, minHeight: 400 }]}>
-        
-        <View style={styles.headerContainer}>
-          <Text style={styles.headerTitle}>
-            {selectedDocumentType ? (locale === 'en' ? getDocumentTypeInfo(selectedDocumentType.type).name.en : getDocumentTypeInfo(selectedDocumentType.type).name.fr) : ''}
-          </Text>
-          <View style={styles.stepBadge}>
-            <Text style={styles.stepText}>
-              {t('kyc.idCardCapture.captureTitle', { side: currentSide === 'front' ? locale === 'en' ? 'Front' : 'Recto' : locale === 'en' ? 'Back' : 'Verso' })}
+        <View style={[styles.cameraWrapper, { flex: 1 }]}>
+          
+          <View style={styles.headerContainer}>
+            <Text style={styles.headerTitle}>
+              {selectedDocumentType ? (locale === 'en' ? getDocumentTypeInfo(selectedDocumentType.type).name.en : getDocumentTypeInfo(selectedDocumentType.type).name.fr) : ''}
             </Text>
+            <View style={styles.stepBadge}>
+              <Text style={styles.stepText}>
+                {t('kyc.idCardCapture.captureTitle', { side: currentSide === 'front' ? locale === 'en' ? 'Front' : 'Recto' : locale === 'en' ? 'Back' : 'Verso' })}
+              </Text>
+            </View>
           </View>
-        </View>
-        
-        <View style={[styles.cameraFeedContainer, { flex: 1, backgroundColor: '#000' }]}>
           
-          <EnhancedCameraView key={`${currentSide}-${cameraKey}`} showCamera={true} isProcessing={isBusy} cameraType={cameraConfig.cameraType} style={styles.absoluteFillObject} onError={handleError} onSilentCapture={handleSilentCapture} silentCaptureResult={silentCaptureResult} overlayComponent={<>
-                 {/* We ONLY put the ID frame here, because if the camera fails, we don't care if the frame fails too */}
-                <IdCardOverlay xMin={cameraConfig.overlay.bbox.xMin} yMin={cameraConfig.overlay.bbox.yMin} xMax={cameraConfig.overlay.bbox.xMax} yMax={cameraConfig.overlay.bbox.yMax} instructions={cameraConfig.overlay.guideText} cornerOpacity={cameraConfig.overlay.bbox.cornerRadius || 0} isSuccess={silentCaptureResult.success} language={state.currentLanguage} stepperProps={{
+          <View style={[styles.cameraFeedContainer, { flex: 1, backgroundColor: '#000' }]}>
+            
+            {/* WEB ONLY: Flip Camera Top Button */}
+            {Platform.OS === 'web' && (<View style={styles.webTopControls}>
+                 <TouchableOpacity style={styles.webFlipButton} onPress={toggleCameraLens}>
+                    <Text style={styles.webFlipText}>🔄 Flip Lens</Text>
+                 </TouchableOpacity>
+              </View>)}
+
+            <EnhancedCameraView key={`${currentSide}-${cameraKey}`} showCamera={true} isProcessing={isBusy} cameraType={cameraConfig.cameraType} style={StyleSheet.absoluteFillObject} onError={handleError} onSilentCapture={handleSilentCapture} silentCaptureResult={silentCaptureResult} overlayComponent={<>
+                  <IdCardOverlay xMin={cameraConfig.overlay.bbox.xMin} yMin={cameraConfig.overlay.bbox.yMin} xMax={cameraConfig.overlay.bbox.xMax} yMax={cameraConfig.overlay.bbox.yMax} instructions={cameraConfig.overlay.guideText} cornerOpacity={cameraConfig.overlay.bbox.cornerRadius || 0} isSuccess={silentCaptureResult.success} language={state.currentLanguage} stepperProps={{
                     back: () => {
                         if (currentSide === 'back') {
                             setCurrentSide('front');
@@ -312,47 +357,59 @@ export const IDCardCapture = ({ component, value = {}, onValueChange, error, lan
                     selectedDocumentType: selectedDocumentType ? (locale === 'en' ? getDocumentTypeInfo(selectedDocumentType.type).name.en : getDocumentTypeInfo(selectedDocumentType.type).name.fr) : '',
                     step: state.currentComponentIndex + 1, totalSteps: state.template.components.length, side: currentSide,
                 }}/>
-              </>}/>
-
+                </>}/>
 
-          {!isBusy && silentCaptureResult.isAnalyzing && (<View style={styles.topAnalyzingPillContainer}>
-              <View style={styles.topAnalyzingPill}>
-                <ActivityIndicator size="small" color="white"/>
-                <Text style={styles.analyzingPillText}>
-                  {state.currentLanguage === 'en' ? 'Scanning...' : 'Analyse...'}
-                </Text>
-              </View>
-            </View>)}
+            {!isBusy && silentCaptureResult.isAnalyzing && (<View style={styles.topAnalyzingPillContainer}>
+                <View style={styles.topAnalyzingPill}>
+                  <ActivityIndicator size="small" color="white"/>
+                  <Text style={styles.analyzingPillText}>
+                    {state.currentLanguage === 'en' ? 'Scanning...' : 'Analyse...'}
+                  </Text>
+                </View>
+              </View>)}
 
-          {isBusy && (<View style={[StyleSheet.absoluteFillObject, { zIndex: 9999 }]}>
-              {processingImagePath && (<Image source={{ uri: processingImagePath.startsWith('file://') ? processingImagePath : `file://${processingImagePath}` }} style={StyleSheet.absoluteFillObject} resizeMode="cover"/>)}
-              <View style={styles.processingOverlay}>
-                <ActivityIndicator size="large" color="#2DBD60"/>
-                <Text style={styles.processingText}>
-                  {state.currentLanguage === 'en' ? 'Perfect!\nProcessing Document...' : 'Parfait!\nTraitement du document...'}
-                </Text>
-              </View>
-            </View>)}
+            {isBusy && (<View style={[StyleSheet.absoluteFillObject, { zIndex: 9999 }]}>
+                {processingImagePath && (<Image source={{ uri: processingImagePath.startsWith('file://') ? processingImagePath : `file://${processingImagePath}` }} style={StyleSheet.absoluteFillObject} resizeMode="cover"/>)}
+                <View style={styles.processingOverlay}>
+                  <ActivityIndicator size="large" color="#2DBD60"/>
+                  <Text style={styles.processingText}>
+                    {state.currentLanguage === 'en' ? 'Perfect!\nProcessing Document...' : 'Parfait!\nTraitement du document...'}
+                  </Text>
+                </View>
+              </View>)}
 
-          {!isBusy && (<View style={styles.escapeHatchContainer}>
-                {/* Refresh Button */}
-                <TouchableOpacity style={styles.fallbackRefreshButton} onPress={refreshCamera}>
-                  <Text style={styles.fallbackRefreshText}>↻ Refresh Camera</Text>
-                </TouchableOpacity>
+            {/* 🚨 THE ESCAPE HATCH: Branching UI for Web vs Mobile */}
+            {!isBusy && Platform.OS === 'web' ? (<View style={styles.webBottomControlBar}>
+                  {silentCaptureResult.error ? (<View style={styles.floatingErrorBanner}>
+                      <Text style={styles.floatingErrorText}>⚠️ {silentCaptureResult.error}</Text>
+                    </View>) : <View style={{ height: 10 }}/>}
 
-                <TouchableOpacity style={[styles.fallbackRefreshButton, { marginTop: 15, backgroundColor: 'rgba(220, 38, 38, 0.8)', borderColor: '#DC2626' }]} onPress={() => setShowCamera(false)}>
-                  <Text style={styles.fallbackRefreshText}>Cancel / Go Back</Text>
-                </TouchableOpacity>
-             </View>)}
+                  <View style={styles.webActionButtonsRow}>
+                    <TouchableOpacity style={styles.webSecondaryButton} onPress={() => setShowCamera(false)}>
+                      <Text style={styles.webSecondaryButtonText}>Cancel</Text>
+                    </TouchableOpacity>
+                    <TouchableOpacity style={styles.webPrimaryButton} onPress={refreshCamera}>
+                      <Text style={styles.webPrimaryButtonText}>↻ Refresh Camera</Text>
+                    </TouchableOpacity>
+                  </View>
+               </View>) : !isBusy ? (<View style={styles.escapeHatchContainer}>
+                  <TouchableOpacity style={styles.fallbackRefreshButton} onPress={refreshCamera}>
+                    <Text style={styles.fallbackRefreshText}>↻ Refresh Camera</Text>
+                  </TouchableOpacity>
+                  <TouchableOpacity style={[styles.fallbackRefreshButton, { marginTop: 15, backgroundColor: 'rgba(220, 38, 38, 0.8)', borderColor: '#DC2626' }]} onPress={() => setShowCamera(false)}>
+                    <Text style={styles.fallbackRefreshText}>Cancel / Go Back</Text>
+                  </TouchableOpacity>
+               </View>) : null}
 
-          {silentCaptureResult.error && !isBusy ? (<View style={[styles.floatingErrorBanner, { zIndex: 10000 }]}>
-              <Text style={styles.floatingErrorText}>⚠️ {silentCaptureResult.error}</Text>
-            </View>) : null}
+            {silentCaptureResult.error && !isBusy && Platform.OS !== 'web' ? (<View style={[styles.floatingErrorBanner, { zIndex: 10000 }]}>
+                <Text style={styles.floatingErrorText}>⚠️ {silentCaptureResult.error}</Text>
+              </View>) : null}
 
+          </View>
         </View>
-      </View>
-    </View>);
+      </View>);
     }
+    // --- PREVIEW RENDER ---
     return (<View style={styles.root}>
       <View style={styles.previewContainer}>
         <ScrollView style={styles.previewItemContainer} showsVerticalScrollIndicator={false}>
@@ -363,16 +420,20 @@ export const IDCardCapture = ({ component, value = {}, onValueChange, error, lan
             <Text style={{ fontSize: 14, color: '#666', textAlign: 'center', marginBottom: 16, lineHeight: 22 }}>
               {getLocalizedText(component.instructions)}
             </Text>
+            
             <View style={{ alignItems: 'center', justifyContent: 'center', flexDirection: "column", gap: 16 }}>
               {silentCaptureResult?.error === 'TOO_FAR_AWAY' && (<View style={styles.warningBanner}>
                   <Text style={styles.warningText}>
                     {state.currentLanguage === "en" ? "Move the document closer to the camera and place it on a flat surface." : "Veuillez rapprocher le document de la caméra et le poser à plat."}
                   </Text>
                 </View>)}
+              
+              {/* 🚨 PREVIEW CONTAINER WITH PLATFORM OVERRIDES */}
               <View style={styles.imagePreviewWrapper}>
                 {capturedImages[currentSide]?.dir ? (<Image source={{ uri: capturedImages[currentSide].dir }} style={styles.previewImage}/>) : silentCaptureResult.path ? (<Image source={{ uri: silentCaptureResult.path }} style={styles.previewImage}/>) : null}
               </View>
-              {!capturedImages[currentSide]?.dir && (<Button title={state.currentLanguage === "en" ? "Start Scanning" : "Commencer la numérisation"} onPress={() => { setShowCamera(true); actions.showCustomStepper(false); }} variant="primary" size="large" fullWidth/>)}
+
+              {!capturedImages[currentSide]?.dir && (<Button title={state.currentLanguage === "en" ? "Start Scanning" : "Commencer la numérisation"} onPress={() => { setShowCamera(true); refreshCamera(); actions.showCustomStepper(false); }} variant="primary" size="large" fullWidth/>)}
               {capturedImages[currentSide]?.dir && (<>
                   <Button title={t('kyc.idCardCapture.retakeButton')} onPress={() => retakePicture(currentSide)} variant="outline" size="medium" fullWidth/>
                   <Button title={t('common.next')} onPress={() => {
@@ -385,6 +446,7 @@ export const IDCardCapture = ({ component, value = {}, onValueChange, error, lan
                 }
                 else {
                     setShowCamera(true);
+                    refreshCamera();
                     setCurrentSide('back');
                     setSilentCaptureResult({ success: false, isAnalyzing: false, path: '', error: '', templatePath: undefined });
                     setIsProcessingCapture(false);
@@ -401,38 +463,63 @@ export const IDCardCapture = ({ component, value = {}, onValueChange, error, lan
 const styles = StyleSheet.create({
     root: {
         flex: 1, width: '100%', backgroundColor: 'transparent', alignSelf: 'center',
-        ...(Platform.OS === 'web' ? { minHeight: '85vh', justifyContent: 'center', alignItems: 'center', backdropFilter: 'blur(8px)' } : {})
+        ...Platform.select({
+            web: { minHeight: '85vh', justifyContent: 'center', alignItems: 'center', backdropFilter: 'blur(8px)' },
+        })
     },
     cameraWrapper: {
-        width: '100%', backgroundColor: '#FFFFFF', overflow: 'hidden',
-        ...(Platform.OS === 'web' ? { maxWidth: 500, height: 700, maxHeight: '90vh', borderRadius: 24, shadowColor: '#000', shadowOffset: { width: 0, height: 20 }, shadowOpacity: 0.25, shadowRadius: 35, elevation: 24, } : { flex: 1, })
+        width: '100%', backgroundColor: '#000000', overflow: 'hidden',
+        ...Platform.select({
+            web: { maxWidth: 550, height: '80vh', minHeight: 600, borderRadius: 24, shadowColor: '#000', shadowOffset: { width: 0, height: 20 }, shadowOpacity: 0.25, shadowRadius: 35, elevation: 24 },
+            default: { flex: 1 }
+        })
     },
     headerContainer: {
         flexDirection: 'row', alignItems: 'center', justifyContent: 'space-between', paddingHorizontal: 24, paddingVertical: 18, backgroundColor: '#FFFFFF', borderBottomWidth: 1, borderBottomColor: '#F1F5F9', zIndex: 10,
-        ...(Platform.OS !== 'web' ? { display: 'none' } : {})
+        ...Platform.select({ web: { display: 'flex' }, default: { display: 'none' } })
     },
     headerTitle: { fontSize: 18, fontWeight: '700', color: '#0F172A', },
     stepBadge: { backgroundColor: '#F1F5F9', paddingHorizontal: 12, paddingVertical: 6, borderRadius: 20, },
     stepText: { fontSize: 13, fontWeight: '600', color: '#64748B', },
     cameraFeedContainer: { flex: 1, position: 'relative', backgroundColor: '#000', },
     camera: { flex: 1, },
-    refreshButton: {
-        position: 'absolute', bottom: 100, alignSelf: 'center', backgroundColor: 'rgba(0,0,0,0.6)', paddingVertical: 12, paddingHorizontal: 24, borderRadius: 24, zIndex: 500
-    },
-    refreshButtonText: { color: 'white', fontWeight: 'bold', fontSize: 16 },
+    // MOBILE: Escape Hatch layout
+    escapeHatchContainer: { position: 'absolute', bottom: 40, left: 0, right: 0, alignItems: 'center', justifyContent: 'center', zIndex: 99999 },
+    fallbackRefreshButton: { backgroundColor: 'rgba(0, 0, 0, 0.8)', borderWidth: 1, borderColor: 'rgba(255, 255, 255, 0.5)', paddingVertical: 12, paddingHorizontal: 24, borderRadius: 24, shadowColor: '#000', shadowOffset: { width: 0, height: 4 }, shadowOpacity: 0.3, shadowRadius: 5, elevation: 8 },
+    fallbackRefreshText: { color: '#FFFFFF', fontWeight: 'bold', fontSize: 16 },
+    // WEB: Control Bar layout
+    webBottomControlBar: { position: 'absolute', bottom: 0, left: 0, right: 0, paddingHorizontal: 20, paddingBottom: 20, paddingTop: 20, backgroundColor: 'rgba(0,0,0,0.6)', zIndex: 99999 },
+    webActionButtonsRow: { flexDirection: 'row', justifyContent: 'space-between', gap: 12, marginTop: 12 },
+    webPrimaryButton: { flex: 1, backgroundColor: '#2DBD60', paddingVertical: 14, borderRadius: 12, alignItems: 'center' },
+    webPrimaryButtonText: { color: 'white', fontWeight: 'bold', fontSize: 16 },
+    webSecondaryButton: { flex: 1, backgroundColor: 'rgba(255,255,255,0.2)', borderWidth: 1, borderColor: 'rgba(255,255,255,0.4)', paddingVertical: 14, borderRadius: 12, alignItems: 'center' },
+    webSecondaryButtonText: { color: 'white', fontWeight: 'bold', fontSize: 16 },
+    // WEB: Flip Controls
+    webTopControls: { position: 'absolute', top: 20, right: 20, zIndex: 9999 },
+    webFlipButton: { backgroundColor: 'rgba(0,0,0,0.5)', paddingHorizontal: 16, paddingVertical: 10, borderRadius: 20, borderWidth: 1, borderColor: 'rgba(255,255,255,0.3)' },
+    webFlipText: { color: 'white', fontWeight: 'bold', fontSize: 14 },
     previewContainer: {
         width: '100%', backgroundColor: 'white', borderRadius: 12, paddingVertical: 24, paddingHorizontal: 20, shadowColor: '#000', shadowOffset: { width: 0, height: 4 }, shadowOpacity: 0.1, shadowRadius: 12, elevation: 8,
-        ...(Platform.OS === 'web' ? { alignSelf: 'center', maxWidth: 600 } : { margin: 10, width: '95%' })
+        ...Platform.select({ web: { alignSelf: 'center', maxWidth: 600 }, default: { margin: 10, width: '95%' } })
     },
     previewItemContainer: { flexGrow: 1, },
     title: { fontSize: 24, fontWeight: 'bold', color: '#333', marginBottom: 8, textAlign: 'center' },
     description: { fontSize: 16, color: '#666', textAlign: 'center', marginBottom: 24, lineHeight: 22 },
     sideContainer: { marginBottom: 24 },
     sideTitle: { fontSize: 25, fontWeight: 'bold', color: '#000', marginBottom: 12, textAlign: 'center' },
-    imagePreviewWrapper: { width: '100%', height: 220, borderRadius: 12, padding: 1, overflow: 'hidden', shadowColor: '#000', shadowOffset: { width: 0, height: 4 }, shadowOpacity: 0.18, shadowRadius: 8, elevation: 8, backgroundColor: '#f0f0f0' },
+    imagePreviewWrapper: {
+        width: '100%', borderRadius: 12, padding: 1, overflow: 'hidden', shadowColor: '#000', shadowOffset: { width: 0, height: 4 }, shadowOpacity: 0.18, shadowRadius: 8, elevation: 8, backgroundColor: '#f0f0f0',
+        ...Platform.select({
+            web: { aspectRatio: 1.59, height: 'auto' }, // 🚨 Perfect ID ratio on web
+            default: { height: 220 } // 🚨 Strict original height on mobile
+        })
+    },
     previewImage: { width: '100%', height: '100%', borderRadius: 12, resizeMode: 'cover' },
     floatingErrorBanner: {
-        position: 'absolute', bottom: 30, left: 24, right: 24, backgroundColor: '#FEF2F2', borderWidth: 1, borderColor: '#FCA5A5', paddingVertical: 12, paddingHorizontal: 16, borderRadius: 12, alignItems: 'center', justifyContent: 'center', shadowColor: '#DC2626', shadowOffset: { width: 0, height: 4 }, shadowOpacity: 0.1, shadowRadius: 8, elevation: 8, zIndex: 100
+        backgroundColor: '#FEF2F2', borderWidth: 1, borderColor: '#FCA5A5', paddingVertical: 12, paddingHorizontal: 16, borderRadius: 12, alignItems: 'center', justifyContent: 'center', width: '100%',
+        ...Platform.select({
+            default: { position: 'absolute', top: Platform.OS === 'ios' ? 90 : 70, left: 24, right: 24, zIndex: 10000 }
+        })
     },
     floatingErrorText: { color: '#991B1B', fontSize: 14, fontWeight: '700', textAlign: 'center' },
     processingOverlay: { flex: 1, backgroundColor: 'rgba(0, 0, 0, 0.6)', justifyContent: 'center', alignItems: 'center', zIndex: 9999 },
@@ -442,40 +529,6 @@ const styles = StyleSheet.create({
     errorText: { color: '#dc2626', fontSize: 14, marginTop: 8, textAlign: 'center' },
     topAnalyzingPillContainer: { position: 'absolute', top: Platform.OS === 'android' ? 60 : 50, left: 0, right: 0, alignItems: 'center', zIndex: 100 },
     topAnalyzingPill: { flexDirection: 'row', alignItems: 'center', backgroundColor: 'rgba(0,0,0,0.6)', paddingVertical: 8, paddingHorizontal: 16, borderRadius: 20, gap: 8 },
-    analyzingPillText: { color: 'white', fontSize: 14, fontWeight: 'bold' },
-    escapeHatchContainer: {
-        position: 'absolute',
-        bottom: 40,
-        left: 0,
-        right: 0,
-        alignItems: 'center',
-        justifyContent: 'center',
-        zIndex: 99999, // Guarantees it is the top-most element
-    },
-    fallbackRefreshButton: {
-        backgroundColor: 'rgba(0, 0, 0, 0.8)', // Darker so it's visible on white or black
-        borderWidth: 1,
-        borderColor: 'rgba(255, 255, 255, 0.5)',
-        paddingVertical: 12,
-        paddingHorizontal: 24,
-        borderRadius: 24,
-        shadowColor: '#000',
-        shadowOffset: { width: 0, height: 4 },
-        shadowOpacity: 0.3,
-        shadowRadius: 5,
-        elevation: 8,
-    },
-    fallbackRefreshText: {
-        color: '#FFFFFF',
-        fontWeight: 'bold',
-        fontSize: 16,
-    },
-    absoluteFillObject: {
-        position: 'absolute',
-        top: 0,
-        left: 0,
-        right: 0,
-        bottom: 0,
-    },
+    analyzingPillText: { color: 'white', fontSize: 14, fontWeight: 'bold' }
 });
 //# sourceMappingURL=IDCardCapture.js.map