@jaak.ai/stamps 2.0.0-dev.58 → 2.0.1

package/dist/cjs/jaak-stamps.cjs.entry.js

@@ -2,6 +2,46 @@
 
 var index = require('./index-BfhtOB0D.js');
 
+class LoggerService {
+    debugMode;
+    constructor(debug = false) {
+        this.debugMode = debug;
+    }
+    setDebugMode(debug) {
+        this.debugMode = debug;
+    }
+    info(...args) {
+        if (this.debugMode) {
+            console.log(`[JAAK-STAMPS] [INFO] [${new Date().toLocaleTimeString()}]`, ...args);
+        }
+    }
+    warn(...args) {
+        if (this.debugMode) {
+            console.warn(`[JAAK-STAMPS] [WARN] [${new Date().toLocaleTimeString()}]`, ...args);
+        }
+    }
+    error(...args) {
+        if (this.debugMode) {
+            console.error(`[JAAK-STAMPS] [ERROR] [${new Date().toLocaleTimeString()}]`, ...args);
+        }
+    }
+    debug(...args) {
+        if (this.debugMode) {
+            console.debug(`[JAAK-STAMPS] [DEBUG] [${new Date().toLocaleTimeString()}]`, ...args);
+        }
+    }
+    state(state, data) {
+        if (this.debugMode) {
+            console.log(`[JAAK-STAMPS] [STATE] [${new Date().toLocaleTimeString()}] ${state}`, data || '');
+        }
+    }
+    performance(operation, duration) {
+        if (this.debugMode) {
+            console.log(`[JAAK-STAMPS] [PERF] [${new Date().toLocaleTimeString()}] ${operation}: ${duration}ms`);
+        }
+    }
+}
+
 class EventBusService {
     events = new Map();
     on(event, callback) {
@@ -27,7 +67,7 @@ class EventBusService {
                     callback(data);
                 }
                 catch (error) {
-                    // Silently handle callback errors
+                    console.error(`Error in event callback for ${event}:`, error);
                 }
             });
         }
@@ -154,20 +194,16 @@ class StateManagerService {
 }
 
 class CameraService {
+    logger;
     eventBus;
     availableCameras = [];
     selectedCameraId = null;
     deviceType = 'desktop';
     preferredCameraFacing = null;
     preferredCamera = 'auto';
-    // Optimization: Static caches for performance
-    static cameraCapabilitiesCache = new Map();
-    static deviceEnumerationCache = null;
-    static CACHE_DURATION = 30000; // 30 seconds
-    // Stream management for optimization
-    currentStreamPromise;
-    lastStreamConstraints;
-    constructor(eventBus, preferredCamera = 'auto') {
+    isManuallySelected = false;
+    constructor(logger, eventBus, preferredCamera = 'auto') {
+        this.logger = logger;
         this.eventBus = eventBus;
         this.preferredCamera = preferredCamera;
     }
@@ -184,21 +220,18 @@ class CameraService {
         else {
             this.deviceType = 'desktop';
         }
+        this.logger.state('DISPOSITIVO_DETECTADO', {
+            deviceType: this.deviceType,
+            userAgent: navigator.userAgent,
+            screenDimensions: { width: window.innerWidth, height: window.innerHeight }
+        });
         return this.deviceType;
     }
     async enumerateDevices() {
         try {
-            // Check cache first for optimization
-            const now = Date.now();
-            if (CameraService.deviceEnumerationCache &&
-                (now - CameraService.deviceEnumerationCache.timestamp) < CameraService.CACHE_DURATION) {
-                this.availableCameras = CameraService.deviceEnumerationCache.devices;
-                await this.setInitialCameraPreference();
-                this.eventBus.emit('camera-changed', this.selectedCameraId);
-                return this.availableCameras;
-            }
             const permissionStatus = await this.checkCameraPermission();
             if (permissionStatus === 'denied') {
+                this.logger.error('Permiso de cámara denegado por el usuario');
                 return [];
             }
             if (permissionStatus === 'prompt') {
@@ -207,16 +240,24 @@ class CameraService {
             }
             const devices = await navigator.mediaDevices.enumerateDevices();
             this.availableCameras = devices.filter(device => device.kind === 'videoinput');
-            // Cache the results for optimization
-            CameraService.deviceEnumerationCache = {
-                devices: this.availableCameras,
-                timestamp: now
-            };
-            await this.setInitialCameraPreference();
+            this.logger.state('CAMARAS_DETECTADAS', {
+                count: this.availableCameras.length,
+                cameras: this.availableCameras.map(cam => ({
+                    id: cam.deviceId,
+                    label: cam.label || 'Unknown Camera'
+                }))
+            });
+            this.setInitialCameraPreference();
+            this.logger.state('PREFERENCIA_INICIAL_APLICADA', {
+                selectedCameraId: this.selectedCameraId,
+                preferredCameraFacing: this.preferredCameraFacing,
+                preferredCamera: this.preferredCamera
+            });
             this.eventBus.emit('camera-changed', this.selectedCameraId);
             return this.availableCameras;
         }
         catch (error) {
+            this.logger.error('Error al enumerar cámaras disponibles:', error);
             this.handleCameraPermissionError(error);
             return [];
         }
@@ -237,6 +278,8 @@ class CameraService {
         }
         this.selectedCameraId = cameraId;
         this.updatePreferredFacing(camera);
+        this.isManuallySelected = true; // Mark as manually selected
+        this.savePreference();
         this.eventBus.emit('camera-changed', cameraId);
     }
     getPreferredFacing() {
@@ -245,20 +288,14 @@ class CameraService {
     async setupCamera(constraints) {
         try {
             const finalConstraints = constraints || await this.getMaxResolution();
-            // Optimization: Check if we can reuse existing stream with same constraints
-            if (this.currentStreamPromise && this.constraintsEqual(finalConstraints, this.lastStreamConstraints)) {
-                return await this.currentStreamPromise;
-            }
-            // Create new stream promise for lazy loading
-            this.currentStreamPromise = navigator.mediaDevices.getUserMedia({
+            const stream = await navigator.mediaDevices.getUserMedia({
                 video: finalConstraints,
                 audio: false
             });
-            this.lastStreamConstraints = finalConstraints;
-            const stream = await this.currentStreamPromise;
             return stream;
         }
         catch (error) {
+            this.logger.error('Error en setupCamera, intentando con restricciones básicas:', error);
             // Fallback to basic constraints if getMaxResolution fails
             const basicConstraints = {
                 width: { ideal: 1280 },
@@ -268,21 +305,65 @@ class CameraService {
             if (this.deviceType !== 'desktop' && this.preferredCameraFacing) {
                 basicConstraints.facingMode = this.preferredCameraFacing;
             }
-            this.currentStreamPromise = navigator.mediaDevices.getUserMedia({
+            this.logger.state('USANDO_RESTRICCIONES_BASICAS', { constraints: basicConstraints });
+            return await navigator.mediaDevices.getUserMedia({
                 video: basicConstraints,
                 audio: false
             });
-            this.lastStreamConstraints = basicConstraints;
-            return await this.currentStreamPromise;
         }
     }
     async switchCamera(cameraId) {
         const selectedCamera = this.availableCameras.find(cam => cam.deviceId === cameraId);
         if (!selectedCamera) {
+            this.logger.warn('Cámara seleccionada no encontrada, re-enumerando dispositivos...');
             await this.enumerateDevices();
             return;
         }
         await this.setSelectedCamera(cameraId);
+        this.logger.state('CAMARA_CAMBIADA', {
+            label: selectedCamera.label,
+            deviceId: selectedCamera.deviceId,
+            isManuallySelected: this.isManuallySelected
+        });
+    }
+    async flipToNextCamera() {
+        if (!this.isMultipleCamerasAvailable())
+            return;
+        const currentIndex = this.availableCameras.findIndex(camera => camera.deviceId === this.selectedCameraId);
+        const nextIndex = (currentIndex + 1) % this.availableCameras.length;
+        const nextCamera = this.availableCameras[nextIndex];
+        await this.switchCamera(nextCamera.deviceId);
+    }
+    savePreference() {
+        try {
+            const preference = {
+                cameraId: this.selectedCameraId,
+                facing: this.preferredCameraFacing,
+                timestamp: Date.now()
+            };
+            localStorage.setItem('jaak-stamps-camera-preference', JSON.stringify(preference));
+            this.logger.state('PREFERENCIA_CAMARA_GUARDADA', preference);
+        }
+        catch (error) {
+            this.logger.warn('Error al guardar preferencia de cámara:', error);
+        }
+    }
+    loadPreference() {
+        try {
+            const saved = localStorage.getItem('jaak-stamps-camera-preference');
+            if (saved) {
+                const preference = JSON.parse(saved);
+                const isStillAvailable = this.availableCameras.some(camera => camera.deviceId === preference.cameraId);
+                if (isStillAvailable) {
+                    this.selectedCameraId = preference.cameraId;
+                    this.preferredCameraFacing = preference.facing;
+                    this.logger.state('PREFERENCIA_CAMARA_CARGADA', preference);
+                }
+            }
+        }
+        catch (error) {
+            this.logger.warn('Error al cargar preferencia de cámara:', error);
+        }
     }
     isRearCamera(stream) {
         const videoTrack = stream.getVideoTracks()[0];
@@ -291,18 +372,13 @@ class CameraService {
         const settings = videoTrack.getSettings();
         return settings.facingMode === 'environment';
     }
-    async getCameraInfo() {
-        const availableCamerasWithAutofocus = await Promise.all(this.availableCameras.map(async (camera) => {
-            const hasAutofocus = await this.checkCameraAutofocus(camera.deviceId);
-            return {
+    getCameraInfo() {
+        return {
+            availableCameras: this.availableCameras.map(camera => ({
                 id: camera.deviceId,
                 label: camera.label || 'Unknown Camera',
-                selected: camera.deviceId === this.selectedCameraId,
-                hasAutofocus
-            };
-        }));
-        return {
-            availableCameras: availableCamerasWithAutofocus,
+                selected: camera.deviceId === this.selectedCameraId
+            })),
             selectedCameraId: this.selectedCameraId,
             deviceType: this.deviceType,
             isMultipleCamerasAvailable: this.isMultipleCamerasAvailable(),
@@ -318,6 +394,7 @@ class CameraService {
             return permission.state;
         }
         catch (error) {
+            this.logger.warn('No se pudo verificar permisos de cámara:', error);
             return 'prompt';
         }
     }
@@ -325,48 +402,35 @@ class CameraService {
         this.availableCameras = [];
         this.eventBus.emit('error', new Error(`Camera permission error: ${error.message}`));
     }
-    async setInitialCameraPreference() {
+    setInitialCameraPreference() {
         if (this.availableCameras.length === 0)
             return;
+        // Clear any existing localStorage preferences to ensure fresh start
+        localStorage.removeItem('jaak-stamps-camera-preference');
+        this.logger.state('APLICANDO_PREFERENCIA_INICIAL', {
+            preferredCamera: this.preferredCamera,
+            availableCamerasCount: this.availableCameras.length
+        });
+        this.isManuallySelected = false; // Reset manual selection flag
         if (this.preferredCamera === 'front') {
-            await this.selectFrontCamera();
+            this.selectFrontCamera();
         }
         else if (this.preferredCamera === 'back') {
-            await this.selectBackCamera();
+            this.selectBackCamera();
         }
         else {
-            await this.selectAutoCamera();
+            this.selectAutoCamera();
         }
     }
-    async checkCameraAutofocus(deviceId) {
-        try {
-            // Check cache first for optimization
-            if (CameraService.cameraCapabilitiesCache.has(deviceId)) {
-                const cached = CameraService.cameraCapabilitiesCache.get(deviceId);
-                return typeof cached === 'boolean' ? cached : false;
-            }
-            const stream = await navigator.mediaDevices.getUserMedia({
-                video: { deviceId: { exact: deviceId } }
-            });
-            const videoTrack = stream.getVideoTracks()[0];
-            const capabilities = videoTrack.getCapabilities();
-            stream.getTracks().forEach(track => track.stop());
-            const hasFocusMode = capabilities.focusMode && Array.isArray(capabilities.focusMode) && capabilities.focusMode.length > 0;
-            const hasAutofocus = hasFocusMode && (capabilities.focusMode.includes('continuous') ||
-                capabilities.focusMode.includes('auto'));
-            // Cache the result for future use
-            CameraService.cameraCapabilitiesCache.set(deviceId, hasAutofocus);
-            return hasAutofocus;
-        }
-        catch (error) {
-            // Cache negative result to avoid repeated failures
-            CameraService.cameraCapabilitiesCache.set(deviceId, false);
-            return false;
-        }
-    }
-    async selectFrontCamera() {
+    selectFrontCamera() {
         this.preferredCameraFacing = 'user';
-        const frontCameras = this.availableCameras.filter(camera => {
+        this.logger.state('BUSCANDO_CAMARA_FRONTAL', {
+            availableCameras: this.availableCameras.map(cam => ({
+                id: cam.deviceId,
+                label: cam.label
+            }))
+        });
+        const frontCamera = this.availableCameras.find(camera => {
             const label = camera.label.toLowerCase();
             return label.includes('front') ||
                 label.includes('user') ||
@@ -374,24 +438,24 @@ class CameraService {
                 label.includes('frontal') ||
                 (!label.includes('back') && !label.includes('rear') && !label.includes('environment'));
         });
-        let selectedCamera = null;
-        if (frontCameras.length > 0) {
-            for (const camera of frontCameras) {
-                const hasAutofocus = await this.checkCameraAutofocus(camera.deviceId);
-                if (hasAutofocus) {
-                    selectedCamera = camera;
-                    break;
-                }
-            }
-            if (!selectedCamera) {
-                selectedCamera = frontCameras[0];
-            }
-        }
-        this.selectedCameraId = selectedCamera ? selectedCamera.deviceId : this.availableCameras[0].deviceId;
+        // If not found, use the first camera (usually front on mobile)
+        this.selectedCameraId = frontCamera ? frontCamera.deviceId : this.availableCameras[0].deviceId;
+        this.logger.state('CAMARA_FRONTAL_SELECCIONADA', {
+            found: !!frontCamera,
+            label: frontCamera?.label || this.availableCameras[0].label,
+            deviceId: this.selectedCameraId
+        });
     }
-    async selectBackCamera() {
+    selectBackCamera() {
         this.preferredCameraFacing = 'environment';
-        const backCameras = this.availableCameras.filter(camera => {
+        this.logger.state('BUSCANDO_CAMARA_TRASERA', {
+            availableCameras: this.availableCameras.map(cam => ({
+                id: cam.deviceId,
+                label: cam.label
+            }))
+        });
+        // Try to find rear camera with multiple detection methods
+        let backCamera = this.availableCameras.find(camera => {
             const label = camera.label.toLowerCase();
             return label.includes('back') ||
                 label.includes('rear') ||
@@ -399,33 +463,34 @@ class CameraService {
                 label.includes('trasera') ||
                 label.includes('posterior');
         });
-        let selectedCamera = null;
-        if (backCameras.length > 0) {
-            for (const camera of backCameras) {
-                const hasAutofocus = await this.checkCameraAutofocus(camera.deviceId);
-                if (hasAutofocus) {
-                    selectedCamera = camera;
-                    break;
-                }
-            }
-            if (!selectedCamera) {
-                selectedCamera = backCameras[0];
-            }
-        }
-        else if (this.availableCameras.length > 1) {
-            const lastCamera = this.availableCameras[this.availableCameras.length - 1];
-            const hasAutofocus = await this.checkCameraAutofocus(lastCamera.deviceId);
-            selectedCamera = hasAutofocus ? lastCamera : this.availableCameras[this.availableCameras.length - 1];
+        // If not found by label, try to use the last camera (usually rear on mobile)
+        if (!backCamera && this.availableCameras.length > 1) {
+            backCamera = this.availableCameras[this.availableCameras.length - 1];
+            this.logger.state('USANDO_ULTIMA_CAMARA_COMO_TRASERA', {
+                label: backCamera.label,
+                deviceId: backCamera.deviceId
+            });
         }
-        this.selectedCameraId = selectedCamera ? selectedCamera.deviceId : this.availableCameras[0].deviceId;
+        this.selectedCameraId = backCamera ? backCamera.deviceId : this.availableCameras[0].deviceId;
+        this.logger.state('CAMARA_TRASERA_SELECCIONADA', {
+            found: !!backCamera,
+            label: backCamera?.label || this.availableCameras[0].label,
+            deviceId: this.selectedCameraId
+        });
     }
-    async selectAutoCamera() {
+    selectAutoCamera() {
         if (this.deviceType === 'mobile' || this.deviceType === 'tablet') {
-            await this.selectBackCamera();
+            this.selectBackCamera();
+            this.logger.state('CAMARA_AUTO_SELECCIONADA_MOBILE', { type: 'rear' });
         }
         else {
             // For desktop, prefer front camera (usually built-in webcam)
-            await this.selectFrontCamera();
+            this.selectFrontCamera();
+            this.logger.state('CAMARA_AUTO_SELECCIONADA_DESKTOP', {
+                type: 'front',
+                label: this.availableCameras[0].label,
+                deviceId: this.selectedCameraId
+            });
         }
     }
     updatePreferredFacing(camera) {
@@ -441,19 +506,40 @@ class CameraService {
                 await this.detectDeviceType();
             }
             const videoConstraints = {};
-            // Priority 1: Always use deviceId if available (ensures specific camera with autofocus)
-            if (this.selectedCameraId) {
+            this.logger.state('CONFIGURANDO_CONSTRAINS_CAMARA', {
+                selectedCameraId: this.selectedCameraId,
+                preferredCameraFacing: this.preferredCameraFacing,
+                preferredCamera: this.preferredCamera,
+                deviceType: this.deviceType,
+                isManuallySelected: this.isManuallySelected
+            });
+            if (this.isManuallySelected && this.selectedCameraId) {
+                // When manually selected, use deviceId for exact camera selection
                 videoConstraints.deviceId = { exact: this.selectedCameraId };
+                this.logger.state('USANDO_CAMARA_MANUAL', {
+                    deviceId: this.selectedCameraId
+                });
             }
-            // Priority 2: Use facingMode as fallback when no specific camera is selected
             else if (this.preferredCameraFacing) {
+                // Use facingMode for initial preference-based selection
+                // Use 'ideal' instead of 'exact' to avoid OverconstrainedError on desktop
                 const facingConstraint = this.deviceType === 'desktop'
                     ? { ideal: this.preferredCameraFacing }
                     : { exact: this.preferredCameraFacing };
                 videoConstraints.facingMode = facingConstraint;
+                this.logger.state('USANDO_FACING_CONSTRAINT', {
+                    facingMode: this.preferredCameraFacing,
+                    constraintType: this.deviceType === 'desktop' ? 'ideal' : 'exact'
+                });
+            }
+            else if (this.selectedCameraId) {
+                videoConstraints.deviceId = { exact: this.selectedCameraId };
+                this.logger.state('USANDO_CAMARA_SELECCIONADA', {
+                    deviceId: this.selectedCameraId
+                });
             }
-            // Priority 3: Fallback to preferredCamera setting
             else {
+                // Use preferredCamera setting to determine default facing mode
                 if (this.preferredCamera === 'front') {
                     videoConstraints.facingMode = "user";
                 }
@@ -461,25 +547,24 @@ class CameraService {
                     videoConstraints.facingMode = "environment";
                 }
                 else {
+                    // Auto mode: use environment for mobile/tablet, user for desktop
                     videoConstraints.facingMode = (this.deviceType === 'mobile' || this.deviceType === 'tablet') ? "environment" : "user";
                 }
+                this.logger.state('USANDO_PREFERENCIA_CONFIGURADA', {
+                    facingMode: videoConstraints.facingMode,
+                    preferredCamera: this.preferredCamera,
+                    deviceType: this.deviceType
+                });
             }
-            // Optimization: Use cached capabilities if available
-            let capabilities;
-            if (this.selectedCameraId && CameraService.cameraCapabilitiesCache.has(this.selectedCameraId + '_caps')) {
-                capabilities = JSON.parse(CameraService.cameraCapabilitiesCache.get(this.selectedCameraId + '_caps'));
-            }
-            else {
-                const tempStream = await navigator.mediaDevices.getUserMedia({ video: videoConstraints });
-                const videoTrack = tempStream.getVideoTracks()[0];
-                capabilities = videoTrack.getCapabilities();
-                tempStream.getTracks().forEach(track => track.stop());
-                // Cache capabilities for future use
-                if (this.selectedCameraId) {
-                    CameraService.cameraCapabilitiesCache.set(this.selectedCameraId + '_caps', JSON.stringify(capabilities));
-                }
-            }
+            const tempStream = await navigator.mediaDevices.getUserMedia({
+                video: videoConstraints
+            });
+            const videoTrack = tempStream.getVideoTracks()[0];
+            const capabilities = videoTrack.getCapabilities();
+            tempStream.getTracks().forEach(track => track.stop());
             const constraints = { ...videoConstraints };
+            // Enhanced focus and image quality settings
+            this.applyAdvancedCameraSettings(constraints, capabilities);
             if (capabilities.width && capabilities.height) {
                 const maxWidth = Math.min(capabilities.width.max, 1920);
                 const maxHeight = Math.min(capabilities.height.max, 1080);
@@ -493,20 +578,15 @@ class CameraService {
                     constraints.height = { ideal: maxHeight };
                 }
             }
-            // Configure autofocus if camera has the capability
-            const capabilitiesAny = capabilities;
-            if (capabilitiesAny.focusMode && Array.isArray(capabilitiesAny.focusMode)) {
-                if (capabilitiesAny.focusMode.includes('continuous')) {
-                    constraints.focusMode = 'continuous';
-                }
-                else if (capabilitiesAny.focusMode.includes('auto')) {
-                    constraints.focusMode = 'auto';
-                }
-            }
+            this.logger.state('CONFIGURACION_CAMARA_OPTIMIZADA', {
+                constraints,
+                capabilities: this.getCapabilitiesSummary(capabilities)
+            });
             return constraints;
         }
         catch (err) {
-            // Fallback logic with minimal temporary streams
+            this.logger.warn('No se pudieron obtener capacidades de cámara, usando configuración de respaldo');
+            // Ensure device type is detected before determining constraints
             if (!this.deviceType || this.deviceType === 'desktop') {
                 await this.detectDeviceType();
             }
@@ -515,16 +595,25 @@ class CameraService {
                 width: { ideal: isTablet ? 1280 : 1920 },
                 height: { ideal: isTablet ? 720 : 1080 }
             };
-            if (this.selectedCameraId) {
+            // Apply basic focus settings even for fallback
+            this.applyBasicFocusSettings(fallbackConstraints);
+            if (this.isManuallySelected && this.selectedCameraId) {
+                // When manually selected, use deviceId for exact camera selection
                 fallbackConstraints.deviceId = { exact: this.selectedCameraId };
             }
             else if (this.preferredCameraFacing) {
+                // Use facingMode for initial preference-based selection
+                // Use 'ideal' instead of 'exact' to avoid OverconstrainedError on desktop
                 const facingConstraint = this.deviceType === 'desktop'
                     ? { ideal: this.preferredCameraFacing }
                     : { exact: this.preferredCameraFacing };
                 fallbackConstraints.facingMode = facingConstraint;
             }
+            else if (this.selectedCameraId) {
+                fallbackConstraints.deviceId = { exact: this.selectedCameraId };
+            }
             else {
+                // Use preferredCamera setting to determine default facing mode
                 if (this.preferredCamera === 'front') {
                     fallbackConstraints.facingMode = "user";
                 }
@@ -532,26 +621,165 @@ class CameraService {
                     fallbackConstraints.facingMode = "environment";
                 }
                 else {
+                    // Auto mode: use environment for mobile/tablet, user for desktop
                     fallbackConstraints.facingMode = (this.deviceType === 'mobile' || this.deviceType === 'tablet') ? "environment" : "user";
                 }
             }
             return fallbackConstraints;
         }
     }
-    // Optimization helper methods
-    constraintsEqual(a, b) {
-        if (!a || !b)
-            return false;
-        return JSON.stringify(a) === JSON.stringify(b);
+    applyAdvancedCameraSettings(constraints, capabilities) {
+        // Apply standard camera settings that are widely supported
+        // Frame rate optimization
+        if (capabilities.frameRate) {
+            constraints.frameRate = {
+                ideal: 30,
+                min: 15,
+                max: 60
+            };
+        }
+        // Width and height constraints for optimal resolution
+        if (capabilities.width && capabilities.height) {
+            constraints.width = {
+                ideal: Math.min(1920, capabilities.width.max || 1920),
+                min: 640
+            };
+            constraints.height = {
+                ideal: Math.min(1080, capabilities.height.max || 1080),
+                min: 480
+            };
+        }
+        // Apply enhanced constraints through advanced array for better browser compatibility
+        const advancedConstraints = [];
+        // Try to set optimal settings through advanced constraints
+        const advanced = {};
+        // Focus mode - use 'any' type to bypass TypeScript limitations
+        if (capabilities.focusMode) {
+            if (capabilities.focusMode.includes('continuous')) {
+                advanced.focusMode = 'continuous';
+            }
+            else if (capabilities.focusMode.includes('single-shot')) {
+                advanced.focusMode = 'single-shot';
+            }
+        }
+        // Focus distance for close objects
+        if (capabilities.focusDistance) {
+            advanced.focusDistance = {
+                ideal: 0.4, // 40cm - optimal for document capture
+                min: 0.2,
+                max: 1.0
+            };
+        }
+        // Zoom control
+        if (capabilities.zoom) {
+            advanced.zoom = {
+                ideal: 1.0,
+                min: capabilities.zoom.min,
+                max: Math.min(capabilities.zoom.max, 3.0)
+            };
+        }
+        // Add advanced constraints if any were set
+        if (Object.keys(advanced).length > 0) {
+            advancedConstraints.push(advanced);
+        }
+        if (advancedConstraints.length > 0) {
+            constraints.advanced = advancedConstraints;
+        }
     }
-    // Cleanup method for optimization
-    static clearCaches() {
-        CameraService.cameraCapabilitiesCache.clear();
-        CameraService.deviceEnumerationCache = null;
+    applyBasicFocusSettings(constraints) {
+        // Apply basic focus settings when capabilities are not available
+        // Use advanced constraints for non-standard properties
+        const advanced = {
+            focusMode: 'continuous',
+            exposureMode: 'continuous',
+            whiteBalanceMode: 'continuous'
+        };
+        if (!constraints.advanced) {
+            constraints.advanced = [];
+        }
+        constraints.advanced.push(advanced);
+        constraints.frameRate = { ideal: 30 };
     }
-    // Method to invalidate device cache when needed
-    invalidateDeviceCache() {
-        CameraService.deviceEnumerationCache = null;
+    getCapabilitiesSummary(capabilities) {
+        return {
+            hasAutoFocus: !!capabilities.focusMode,
+            hasFocusDistance: !!capabilities.focusDistance,
+            hasExposureControl: !!capabilities.exposureMode,
+            hasWhiteBalance: !!capabilities.whiteBalanceMode,
+            hasZoom: !!capabilities.zoom,
+            hasTorch: capabilities.torch !== undefined,
+            hasImageControls: !!(capabilities.brightness || capabilities.contrast || capabilities.saturation || capabilities.sharpness),
+            resolutionRange: capabilities.width && capabilities.height ?
+                `${capabilities.width.min}x${capabilities.height.min} - ${capabilities.width.max}x${capabilities.height.max}` : 'unknown'
+        };
+    }
+    // New method to enable torch/flash for better illumination
+    async setTorchEnabled(enabled, stream) {
+        try {
+            if (!stream) {
+                this.logger.warn('No hay stream disponible para controlar el flash');
+                return false;
+            }
+            const videoTrack = stream.getVideoTracks()[0];
+            if (!videoTrack) {
+                this.logger.warn('No hay track de video disponible');
+                return false;
+            }
+            const capabilities = videoTrack.getCapabilities();
+            if (capabilities.torch === undefined) {
+                this.logger.warn('El dispositivo no soporta control de flash');
+                return false;
+            }
+            await videoTrack.applyConstraints({
+                advanced: [{ torch: enabled }]
+            });
+            this.logger.state('FLASH_CONTROLADO', { enabled });
+            return true;
+        }
+        catch (error) {
+            this.logger.error('Error al controlar el flash:', error);
+            return false;
+        }
+    }
+    // Method to manually trigger focus on a specific point
+    async focusAtPoint(x, y, stream) {
+        try {
+            if (!stream) {
+                this.logger.warn('No hay stream disponible para enfocar');
+                return false;
+            }
+            const videoTrack = stream.getVideoTracks()[0];
+            if (!videoTrack) {
+                this.logger.warn('No hay track de video disponible');
+                return false;
+            }
+            const capabilities = videoTrack.getCapabilities();
+            if (!capabilities.focusMode || !capabilities.focusMode.includes('single-shot')) {
+                this.logger.warn('El dispositivo no soporta enfoque manual');
+                return false;
+            }
+            // Trigger single-shot focus
+            await videoTrack.applyConstraints({
+                advanced: [{ focusMode: 'single-shot' }]
+            });
+            // Return to continuous focus after a short delay
+            setTimeout(async () => {
+                try {
+                    await videoTrack.applyConstraints({
+                        advanced: [{ focusMode: 'continuous' }]
+                    });
+                }
+                catch (error) {
+                    this.logger.warn('Error al volver a enfoque continuo:', error);
+                }
+            }, 1000);
+            this.logger.state('ENFOQUE_MANUAL_ACTIVADO', { x, y });
+            return true;
+        }
+        catch (error) {
+            this.logger.error('Error al enfocar manualmente:', error);
+            return false;
+        }
     }
 }
 
@@ -630,6 +858,7 @@ class DeviceStrategyFactory {
 }
 
 class DetectionService {
+    logger;
     debug;
     useDocumentClassification;
     session;
@@ -646,10 +875,8 @@ class DetectionService {
     preprocessCanvas;
     preprocessCtx;
     captureCanvas;
-    // Static canvas pool for reuse across instances
-    static canvasPool = new Map();
-    static MAX_POOL_SIZE = 5;
-    constructor(debug = false, useDocumentClassification = false) {
+    constructor(logger, debug = false, useDocumentClassification = false) {
+        this.logger = logger;
         this.debug = debug;
         this.useDocumentClassification = useDocumentClassification;
         this.deviceStrategy = DeviceStrategyFactory.createStrategy();
@@ -657,15 +884,21 @@ class DetectionService {
     }
     async loadModel() {
         if (this.modelLoaded || this.session) {
+            this.logger.state('MODELO_YA_PRECARGADO', {
+                sessionExists: !!this.session,
+                modelPreloaded: this.modelLoaded
+            });
             return;
         }
         try {
+            this.logger.state('PRECARGANDO_MODELO_DETECCION', { modelPath: this.MODEL_PATH });
             const sessionOptions = this.deviceStrategy.getSessionOptions(this.debug);
             try {
                 this.session = await window.ort.InferenceSession.create(this.MODEL_PATH, sessionOptions);
             }
             catch (error) {
                 if (error.message.includes('failed to allocate a buffer')) {
+                    this.logger.warn('Fallo en asignación de buffer durante precarga, intentando con configuración mínima');
                     const fallbackOptions = {
                         executionProviders: ['wasm'],
                         graphOptimizationLevel: 'disabled',
@@ -683,8 +916,10 @@ class DetectionService {
                 }
             }
             this.modelLoaded = true;
+            this.logger.state('MODELO_DETECCION_CARGADO_EXITOSAMENTE', { sessionCreated: !!this.session });
         }
         catch (error) {
+            this.logger.error('Error al precargar modelo de detección:', error);
             throw error;
         }
     }
@@ -693,14 +928,19 @@ class DetectionService {
             return;
         }
         try {
+            this.logger.state('CARGANDO_MODELO_MOBILENET', { path: this.MOBILENET_MODEL_PATH });
             // Try to load class map (optional - SqueezeNet may not need it for basic classification)
             try {
                 const classResponse = await fetch(this.MOBILENET_CLASSES_PATH);
                 if (classResponse.ok) {
                     this.mobileNetClassMap = await classResponse.json();
+                    this.logger.state('CLASES_MOBILENET_CARGADAS', {
+                        classCount: Object.keys(this.mobileNetClassMap).length
+                    });
                 }
             }
             catch (error) {
+                this.logger.warn('No se pudo cargar el mapa de clases de MobileNet, usando clasificación básica');
                 // Create a basic class map for document types
                 this.mobileNetClassMap = {
                     "0": "document",
@@ -717,6 +957,7 @@ class DetectionService {
             }
             catch (error) {
                 if (error.message.includes('failed to allocate a buffer')) {
+                    this.logger.warn('Fallo en asignación de buffer de MobileNet, intentando con configuración mínima');
                     const fallbackOptions = {
                         executionProviders: ['wasm'],
                         graphOptimizationLevel: 'disabled',
@@ -733,8 +974,12 @@ class DetectionService {
                     throw error;
                 }
             }
+            this.logger.state('MODELO_MOBILENET_CARGADO_EXITOSAMENTE', {
+                sessionCreated: !!this.mobileNetSession
+            });
         }
         catch (error) {
+            this.logger.error('Error al cargar modelo MobileNet:', error);
             throw error;
         }
     }
@@ -787,9 +1032,11 @@ class DetectionService {
     }
     async classifyDocument(canvas) {
         if (!this.mobileNetSession || !this.mobileNetClassMap) {
+            this.logger.warn('Modelo MobileNet no está cargado, saltando clasificación');
             return null;
         }
         try {
+            this.logger.state('CLASIFICANDO_DOCUMENTO', { timestamp: Date.now() });
             const inputTensor = this.preprocessMobileNet(canvas);
             const feeds = { [this.mobileNetSession.inputNames[0]]: inputTensor };
             const results = await this.mobileNetSession.run(feeds);
@@ -797,6 +1044,13 @@ class DetectionService {
             const maxIdx = output.reduce((bestIdx, val, idx, arr) => val > arr[bestIdx] ? idx : bestIdx, 0);
             const confidence = output[maxIdx];
             const className = this.mobileNetClassMap[maxIdx.toString()] || "unknown";
+            this.logger.state('DOCUMENTO_CLASIFICADO', {
+                class: className,
+                confidence: confidence.toFixed(3),
+                classIndex: maxIdx,
+                timestamp: Date.now(),
+                results
+            });
             return {
                 class: className,
                 confidence: confidence,
@@ -804,6 +1058,7 @@ class DetectionService {
             };
         }
         catch (error) {
+            this.logger.error('Error al clasificar documento:', error);
             return null;
         }
     }
@@ -916,6 +1171,7 @@ class DetectionService {
         }
         this.mobileNetClassMap = undefined;
         this.modelLoaded = false;
+        this.logger.state('DETECCION_SERVICE_LIMPIADO', { timestamp: Date.now() });
     }
     initializeCanvasPool() {
         this.preprocessCanvas = document.createElement('canvas');
@@ -926,6 +1182,9 @@ class DetectionService {
             willReadFrequently: true
         });
         this.captureCanvas = document.createElement('canvas');
+        this.logger.state('CANVAS_POOL_INICIALIZADO', {
+            preprocessCanvasSize: this.INPUT_SIZE
+        });
     }
     cleanupCanvasPool() {
         if (this.preprocessCanvas) {
@@ -961,11 +1220,10 @@ class DetectionService {
         return (sign << 15) | (newExp << 10) | (frac >> 13);
     }
     preprocessMobileNet(canvas) {
-        // Use pooled canvas instead of creating new one
-        const tempCanvas = this.getCanvas(224, 224);
+        const tempCanvas = document.createElement('canvas');
+        tempCanvas.width = 224;
+        tempCanvas.height = 224;
         const tempCtx = tempCanvas.getContext('2d');
-        // Clear canvas before use
-        tempCtx.clearRect(0, 0, 224, 224);
         // Resize image to 224x224 for SqueezeNet (using MobileNet interface)
         tempCtx.drawImage(canvas, 0, 0, 224, 224);
         const imageData = tempCtx.getImageData(0, 0, 224, 224);
@@ -981,53 +1239,8 @@ class DetectionService {
             // Blue channel
             arr[2 * hw + i] = data[i * 4 + 2] / 255.0;
         }
-        // Return canvas to pool after use
-        this.returnCanvas(tempCanvas);
         return new window.ort.Tensor('float32', arr, [1, 3, 224, 224]);
     }
-    // Canvas pool management methods for optimization
-    getCanvas(width, height) {
-        const key = `${width}x${height}`;
-        if (!DetectionService.canvasPool.has(key)) {
-            DetectionService.canvasPool.set(key, []);
-        }
-        const pool = DetectionService.canvasPool.get(key);
-        let canvas = pool.pop();
-        if (!canvas) {
-            canvas = document.createElement('canvas');
-            canvas.width = width;
-            canvas.height = height;
-        }
-        else {
-            // Clear the canvas before reuse
-            const ctx = canvas.getContext('2d');
-            ctx.clearRect(0, 0, width, height);
-        }
-        return canvas;
-    }
-    returnCanvas(canvas) {
-        const key = `${canvas.width}x${canvas.height}`;
-        if (!DetectionService.canvasPool.has(key)) {
-            DetectionService.canvasPool.set(key, []);
-        }
-        const pool = DetectionService.canvasPool.get(key);
-        // Only return to pool if not at max capacity
-        if (pool.length < DetectionService.MAX_POOL_SIZE) {
-            pool.push(canvas);
-        }
-    }
-    // Static method to clear all canvas pools (useful for memory management)
-    static clearCanvasPools() {
-        DetectionService.canvasPool.clear();
-    }
-    // Method to get pool statistics for debugging
-    getPoolStats() {
-        const stats = {};
-        DetectionService.canvasPool.forEach((pool, key) => {
-            stats[key] = pool.length;
-        });
-        return stats;
-    }
 }
 
 class ServiceContainer {
@@ -1038,11 +1251,13 @@ class ServiceContainer {
     initializeServices(config) {
         // Initialize services in dependency order
         const eventBus = new EventBusService();
+        const logger = new LoggerService(config.debug);
         const stateManager = new StateManagerService(eventBus);
-        const cameraService = new CameraService(eventBus, config.preferredCamera);
-        const detectionService = new DetectionService(config.debug, config.useDocumentClassification);
+        const cameraService = new CameraService(logger, eventBus, config.preferredCamera);
+        const detectionService = new DetectionService(logger, config.debug, config.useDocumentClassification);
         // Register services
         this.services.set('eventBus', eventBus);
+        this.services.set('logger', logger);
         this.services.set('stateManager', stateManager);
         this.services.set('cameraService', cameraService);
         this.services.set('detectionService', detectionService);
@@ -1054,6 +1269,9 @@ class ServiceContainer {
         }
         return service;
     }
+    getLogger() {
+        return this.get('logger');
+    }
     getEventBus() {
         return this.get('eventBus');
     }
@@ -1067,6 +1285,10 @@ class ServiceContainer {
         return this.get('detectionService');
     }
     updateConfig(config) {
+        if (config.debug !== undefined) {
+            const logger = this.services.get('logger');
+            logger.setDebugMode(config.debug);
+        }
     }
     cleanup() {
         // Cleanup services in reverse order
@@ -1076,7 +1298,7 @@ class ServiceContainer {
     }
 }
 
-const myComponentCss = ":host{display:block;width:100%;height:100%;font-family:system-ui, -apple-system, sans-serif;color:#1a1a1a}.detector-container{display:flex;flex-direction:column;align-items:center;width:100%;height:100%}h1{font-size:24px;font-weight:500;color:#333;margin:0 0 24px 0}.video-container{position:relative;width:100%;height:100%;background:#333;border:1px solid #e0e0e0;border-radius:8px;overflow:hidden}video,.detection-overlay{position:absolute;width:100%;height:100%;border-radius:8px}video.mirror,.detection-overlay.mirror{transform:rotateY(180deg)}.detection-overlay{z-index:1;pointer-events:none}video{z-index:0}.detection-box{transition:opacity 0.2s ease}.status{margin-top:16px;font-size:12px;color:#666}.overlay-mask{position:absolute;top:0;left:0;width:100%;height:100%;z-index:10;display:block;pointer-events:none}.card-outline{position:absolute;top:var(--mask-center-y, 50%);left:var(--mask-center-x, 50%);transform:translate(-50%, -50%);width:var(--mask-width, 88%);height:var(--mask-height, 55%);border:none;border-radius:4px;background:transparent;opacity:0.8}.side{position:absolute;background:#999;transition:background-color 0.3s ease;border-radius:1px}.side-top.aligned{border-left-color:#28a745;border-top-color:#28a745}.side-right.aligned{border-right-color:#28a745;border-top-color:#28a745}.side-bottom.aligned{border-left-color:#28a745;border-bottom-color:#28a745}.side-left.aligned{border-right-color:#28a745;border-bottom-color:#28a745}.side-top{top:-3px;left:-3px;width:30px;height:30px;border-left:6px solid #ffffff;border-top:6px solid #ffffff;background:transparent}.side-right{top:-3px;right:-3px;width:30px;height:30px;border-right:6px solid #ffffff;border-top:6px solid #ffffff;background:transparent}.side-bottom{bottom:-3px;left:-3px;width:30px;height:30px;border-left:6px solid #ffffff;border-bottom:6px solid #ffffff;background:transparent}.side-left{bottom:-3px;right:-3px;width:30px;height:30px;border-right:6px solid #ffffff;border-bottom:6px solid #ffffff;background:transparent}.guide-text{position:absolute;top:50%;left:50%;transform:translate(-50%, -50%);color:#fff;font-size:14px;font-weight:600;text-align:center;white-space:normal;background:rgba(0, 0, 0, 0.25);backdrop-filter:blur(12px);padding:12px 20px;border-radius:8px;max-width:300px;z-index:20;border:1px solid rgba(255, 255, 255, 0.1)}.quality-indicator{position:absolute;top:20px;right:20px;display:flex;align-items:center;gap:8px;background:rgba(0, 0, 0, 0.8);padding:8px 12px;border-radius:20px;z-index:25;transition:all 0.3s ease}.quality-indicator.warning{background:rgba(255, 152, 0, 0.9)}.quality-indicator.good{background:rgba(76, 175, 80, 0.9)}.quality-score{color:#fff;font-size:12px;font-weight:600;min-width:30px;text-align:center}.quality-status{width:20px;height:20px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:14px;font-weight:bold;color:#fff;transition:all 0.3s ease}.quality-status.ready{background:#4CAF50}.quality-status.not-ready{background:#f44336}.card-outline.quality-warning{animation:qualityWarning 1s ease-in-out infinite alternate}@keyframes qualityWarning{0%{box-shadow:0 0 0 3px rgba(255, 152, 0, 0.6)}100%{box-shadow:0 0 0 6px rgba(255, 152, 0, 0.3)}}.capture-animation{position:absolute;top:0;left:0;width:100%;height:100%;background:#fff;opacity:0;z-index:30;pointer-events:none;animation:captureFlash 0.6s ease-out}@keyframes captureFlash{0%{opacity:0}15%{opacity:0.8}30%{opacity:0}45%{opacity:0.4}60%{opacity:0}100%{opacity:0}}.card-outline.capturing{animation:pulseGreen 0.6s ease-out}@keyframes pulseGreen{0%{border-color:#28a745;box-shadow:0 0 0 4px rgba(40, 167, 69, 0)}50%{border-color:#28a745;box-shadow:0 0 0 8px rgba(40, 167, 69, 0.6)}100%{border-color:#28a745;box-shadow:0 0 0 4px rgba(40, 167, 69, 0)}}.flip-animation{position:absolute;top:50%;left:50%;transform:translate(-50%, -50%);z-index:35;pointer-events:none;opacity:0;animation:showFlipInstruction 3s ease-in-out;display:flex;flex-direction:column;align-items:center;justify-content:center}.id-card-icon{width:80px;height:50px;background:linear-gradient(135deg, #6c757d 0%, #495057 100%);border-radius:8px;position:relative;animation:flipCard 2s ease-in-out infinite;box-shadow:0 4px 12px rgba(0, 0, 0, 0.3)}.id-card-icon::before{content:'';position:absolute;top:8px;left:8px;width:16px;height:12px;background:rgba(255, 255, 255, 0.9);border-radius:2px}.id-card-icon::after{content:'';position:absolute;top:25px;left:8px;width:64px;height:3px;background:rgba(255, 255, 255, 0.7);border-radius:1px;box-shadow:0 6px 0 rgba(255, 255, 255, 0.7), 0 12px 0 rgba(255, 255, 255, 0.7)}.flip-text{margin-top:12px;color:#fff;font-size:14px;font-weight:600;text-align:center;background:rgba(128, 128, 128, 0.8);padding:12px 20px;border-radius:20px;max-width:300px}@keyframes showFlipInstruction{0%{opacity:0;transform:translate(-50%, -50%) scale(0.8)}15%{opacity:1;transform:translate(-50%, -50%) scale(1)}85%{opacity:1;transform:translate(-50%, -50%) scale(1)}100%{opacity:0;transform:translate(-50%, -50%) scale(0.8)}}@keyframes flipCard{0%{transform:rotateY(0deg)}50%{transform:rotateY(180deg)}100%{transform:rotateY(360deg)}}.success-animation{position:absolute;top:50%;left:50%;transform:translate(-50%, -50%);z-index:35;pointer-events:none;opacity:0;animation:showSuccessMessage 3s ease-in-out;display:flex;flex-direction:column;align-items:center;justify-content:center}.check-icon{width:80px;height:80px;background:linear-gradient(135deg, #6c757d 0%, #495057 100%);border-radius:50%;position:relative;animation:bounceSuccess 0.6s ease-out;box-shadow:0 4px 16px rgba(108, 117, 125, 0.4);display:flex;align-items:center;justify-content:center}.check-icon::before{content:'';position:absolute;width:20px;height:35px;border:4px solid #fff;border-top:none;border-left:none;transform:rotate(45deg);animation:drawCheck 0.4s ease-out 0.2s both}.success-text{margin-top:16px;color:#fff;font-size:14px;font-weight:600;text-align:center;background:rgba(128, 128, 128, 0.8);padding:12px 20px;border-radius:20px;max-width:300px;animation:fadeInUp 0.5s ease-out 0.4s both}@keyframes showSuccessMessage{0%{opacity:0;transform:translate(-50%, -50%) scale(0.5)}15%{opacity:1;transform:translate(-50%, -50%) scale(1)}85%{opacity:1;transform:translate(-50%, -50%) scale(1)}100%{opacity:0;transform:translate(-50%, -50%) scale(0.9)}}@keyframes bounceSuccess{0%{transform:scale(0)}50%{transform:scale(1.1)}100%{transform:scale(1)}}@keyframes drawCheck{0%{width:0;height:0}50%{width:20px;height:0}100%{width:20px;height:35px}}@keyframes fadeInUp{0%{opacity:0;transform:translateY(20px)}100%{opacity:1;transform:translateY(0)}}.skip-section{position:absolute;bottom:20px;left:50%;transform:translateX(-50%);z-index:25;display:flex;flex-direction:column;align-items:center;width:100%;max-width:300px}.skip-explanation{background:rgba(0, 0, 0, 0.5);color:#ffffff;padding:10px 16px;border-radius:8px;font-size:14px;font-weight:500;text-align:center;margin-bottom:12px;box-shadow:0 2px 8px rgba(0, 0, 0, 0.2);backdrop-filter:blur(12px);border:1px solid rgba(255, 255, 255, 0.1);animation:fadeIn 0.3s ease-in-out}@keyframes fadeIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}.skip-button{pointer-events:auto;background:#fff;color:#333;border:none;border-radius:25px;padding:12px 24px;font-size:14px;font-weight:600;cursor:pointer;transition:all 0.3s ease}.skip-button:hover{background:#f8f9fa}.skip-button:active{background:#e9ecef;transform:translateY(1px)}.camera-controls{position:absolute;top:16px;right:16px;z-index:25;display:flex;gap:8px;pointer-events:auto}.camera-selector-button{height:32px;padding:0 10px;border:none;border-radius:8px;background:rgba(0, 0, 0, 0.25);backdrop-filter:blur(12px);color:#ffffff;font-size:12px;font-weight:500;cursor:pointer;transition:all 0.2s ease;display:flex;align-items:center;justify-content:center;border:1px solid rgba(255, 255, 255, 0.1);white-space:nowrap;min-width:fit-content}.camera-selector-button:hover{background:rgba(0, 0, 0, 0.8);border-color:rgba(255, 255, 255, 0.2);transform:translateY(-1px)}.camera-selector-button:active{transform:translateY(0);background:rgba(0, 0, 0, 0.9)}.camera-selector-button:disabled,.camera-selector-button.loading{opacity:0.7;cursor:not-allowed;pointer-events:none}.camera-selector-button:disabled:hover,.camera-selector-button.loading:hover{transform:none;background:rgba(0, 0, 0, 0.6);border-color:rgba(255, 255, 255, 0.1)}.button-spinner{width:16px;height:16px;border:2px solid rgba(255, 255, 255, 0.3);border-top:2px solid #ffffff;border-radius:50%;animation:spin 1s linear infinite}@keyframes spin{0%{transform:rotate(0deg)}100%{transform:rotate(360deg)}}.camera-selector-dropdown{position:absolute;top:56px;right:16px;z-index:30;background:rgba(0, 0, 0, 0.25);backdrop-filter:blur(20px);border-radius:12px;min-width:260px;max-width:300px;border:1px solid rgba(255, 255, 255, 0.1);overflow:hidden;pointer-events:auto;animation:slideInFromTop 0.3s ease-out}@keyframes slideInFromTop{0%{opacity:0;transform:translateY(-8px) scale(0.95)}100%{opacity:1;transform:translateY(0) scale(1)}}.camera-selector-header{display:flex;justify-content:space-between;align-items:center;padding:8px 12px;border-bottom:1px solid rgba(255, 255, 255, 0.1)}.camera-selector-header span{font-weight:500;color:#ffffff;font-size:13px;opacity:0.9}.close-selector{width:20px;height:20px;border:none;background:none;color:rgba(255, 255, 255, 0.7);font-size:16px;cursor:pointer;display:flex;align-items:center;justify-content:center;border-radius:4px;transition:all 0.2s ease}.close-selector:hover{background:rgba(255, 255, 255, 0.1);color:#ffffff}.camera-list{padding:4px 0;max-height:240px;overflow-y:auto}.camera-option{width:100%;padding:8px 12px;border:none;background:none;text-align:left;cursor:pointer;transition:all 0.2s ease;display:flex;justify-content:flex-start;align-items:center;gap:8px;color:rgba(255, 255, 255, 0.9)}.camera-option:hover{background:rgba(255, 255, 255, 0.08)}.camera-option.selected{background:rgba(255, 255, 255, 0.12);color:#ffffff}.camera-label{font-size:13px;flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-right:0;font-weight:400;display:flex;align-items:center;gap:6px}.camera-label .autofocus-icon{font-size:12px;color:#ffffff !important;opacity:0.8;flex-shrink:0}.selected-indicator{font-size:14px;color:#ffffff;opacity:0.9;flex-shrink:0}.device-info{padding:6px 12px;border-top:1px solid rgba(255, 255, 255, 0.1);background:rgba(255, 255, 255, 0.05)}.device-info small{color:rgba(255, 255, 255, 0.6);font-size:11px;text-transform:capitalize;font-weight:400}@media (max-width: 480px){.camera-controls{top:12px;right:12px;gap:6px}.camera-selector-button{height:36px;padding:0 12px;font-size:11px;border-radius:6px}.camera-selector-dropdown{right:12px;top:48px;min-width:240px;max-width:calc(100vw - 24px)}.camera-selector-header{padding:6px 10px}.camera-option{padding:6px 10px}.device-info{padding:4px 10px}}.watermark{position:absolute;bottom:12px;right:12px;z-index:15;pointer-events:none;opacity:0.7}.watermark img{height:24px;width:auto;filter:drop-shadow(0 1px 2px rgba(0, 0, 0, 0.3))}.component-status{position:absolute;top:16px;left:16px;background:rgba(0, 0, 0, 0.25);backdrop-filter:blur(20px);border-radius:12px;border:1px solid rgba(255, 255, 255, 0.1);display:flex;align-items:center;gap:6px;padding:6px 10px;z-index:40;height:32px;width:fit-content;animation:slideInFromTop 0.3s ease-out}.status-spinner{width:16px;height:16px;border:1px solid rgba(255, 255, 255, 0.3);border-top:1px solid #ffffff;border-radius:50%;animation:statusSpin 1s linear infinite;flex-shrink:0}.status-content{display:flex;flex-direction:column;gap:1px}.status-message{color:#ffffff;font-size:12px;font-weight:500;margin:0}.status-description{color:rgba(255, 255, 255, 0.7);font-size:10px;line-height:1.2;margin:0}@keyframes statusSpin{0%{transform:rotate(0deg)}100%{transform:rotate(360deg)}}@media (max-width: 480px){.component-status{top:12px;left:12px;padding:4px 8px;gap:4px;height:28px;border-radius:8px}.status-spinner{width:14px;height:14px}.status-message{font-size:11px}.status-description{font-size:9px}}.loading-overlay{position:absolute;top:0;left:0;width:100%;height:100%;background:rgba(0, 0, 0, 0.85);backdrop-filter:blur(4px);display:flex;flex-direction:column;align-items:center;justify-content:center;z-index:30;border-radius:8px}.loading-spinner{width:50px;height:50px;border:3px solid rgba(255, 255, 255, 0.15);border-top:3px solid #28a745;border-radius:50%;animation:spin 1s ease-in-out infinite;margin-bottom:16px}.loading-text{color:#ffffff;font-size:14px;font-weight:500;text-align:center;opacity:0.9;margin-bottom:4px}.loading-description{color:rgba(255, 255, 255, 0.7);font-size:12px;text-align:center;opacity:0.8}@keyframes spin{0%{transform:rotate(0deg)}100%{transform:rotate(360deg)}}.performance-monitor{position:absolute;top:70px;left:16px;background:rgba(0, 0, 0, 0.25);backdrop-filter:blur(20px);border-radius:12px;border:1px solid rgba(255, 255, 255, 0.1);z-index:35;width:fit-content;animation:slideInFromLeft 0.3s ease-out;transition:all 0.3s ease}@keyframes slideInFromLeft{0%{opacity:0;transform:translateX(-20px) scale(0.95)}100%{opacity:1;transform:translateX(0) scale(1)}}.performance-expanded{padding:6px 10px}.metrics-row{display:flex;gap:8px;margin-bottom:4px}.metrics-row:last-child{margin-bottom:0}.metric-compact{display:flex;flex-direction:column;align-items:center;gap:2px;min-width:50px}.metric-label{font-size:9px;color:rgba(255, 255, 255, 0.6);font-weight:500;text-transform:uppercase;letter-spacing:0.3px}.metric-value{font-size:10px;font-weight:600;font-family:'Monaco', 'Menlo', 'Consolas', monospace;padding:2px 4px;border-radius:3px;text-align:center;white-space:nowrap}.metric-value.good{color:#4ade80;background:rgba(74, 222, 128, 0.1);border:1px solid rgba(74, 222, 128, 0.2)}.metric-value.warning{color:#fbbf24;background:rgba(251, 191, 36, 0.1);border:1px solid rgba(251, 191, 36, 0.2)}.metric-value.danger{color:#f87171;background:rgba(248, 113, 113, 0.1);border:1px solid rgba(248, 113, 113, 0.2)}@media (max-width: 480px){.performance-monitor{top:60px;left:12px;width:fit-content}.performance-expanded{padding:4px 8px}.metrics-row{gap:6px;margin-bottom:3px}.metric-compact{min-width:45px;gap:1px}.metric-label{font-size:8px}.metric-value{font-size:9px;padding:1px 3px}}.quality-monitor{position:absolute;top:200px;left:16px;background:rgba(0, 0, 0, 0.25);backdrop-filter:blur(20px);border-radius:12px;border:1px solid rgba(255, 255, 255, 0.1);z-index:35;width:fit-content;animation:slideInFromLeft 0.3s ease-out;transition:all 0.3s ease}.quality-text{padding:6px 10px;font-size:11px;color:white;font-family:'Monaco', 'Menlo', 'Consolas', monospace;line-height:1.4}.quality-fail{color:#ff9999}@keyframes pulse{0%,100%{opacity:1}50%{opacity:0.7}}.metric-value.danger{animation:pulse 2s infinite}@media (max-width: 480px){.quality-monitor{top:160px;left:12px}.quality-text{padding:4px 8px;font-size:10px}}";
+const myComponentCss = ":host{display:block;width:100%;height:100%;font-family:system-ui, -apple-system, sans-serif;color:#1a1a1a}.detector-container{display:flex;flex-direction:column;align-items:center;width:100%;height:100%}h1{font-size:24px;font-weight:500;color:#333;margin:0 0 24px 0}.video-container{position:relative;width:100%;height:100%;background:#333;border:1px solid #e0e0e0;border-radius:8px;overflow:hidden}video,.detection-overlay{position:absolute;width:100%;height:100%;border-radius:8px}video.mirror,.detection-overlay.mirror{transform:rotateY(180deg)}.detection-overlay{z-index:1;pointer-events:none}video{z-index:0}.detection-box{transition:opacity 0.2s ease}.status{margin-top:16px;font-size:12px;color:#666}.overlay-mask{position:absolute;top:0;left:0;width:100%;height:100%;z-index:10;display:block;pointer-events:none}.card-outline{position:absolute;top:var(--mask-center-y, 50%);left:var(--mask-center-x, 50%);transform:translate(-50%, -50%);width:var(--mask-width, 88%);height:var(--mask-height, 55%);border:none;border-radius:4px;background:transparent;opacity:0.8}.side{position:absolute;background:#999;transition:background-color 0.3s ease;border-radius:1px}.side-top.aligned{border-left-color:#28a745;border-top-color:#28a745}.side-right.aligned{border-right-color:#28a745;border-top-color:#28a745}.side-bottom.aligned{border-left-color:#28a745;border-bottom-color:#28a745}.side-left.aligned{border-right-color:#28a745;border-bottom-color:#28a745}.side-top{top:-3px;left:-3px;width:30px;height:30px;border-left:6px solid #ffffff;border-top:6px solid #ffffff;background:transparent}.side-right{top:-3px;right:-3px;width:30px;height:30px;border-right:6px solid #ffffff;border-top:6px solid #ffffff;background:transparent}.side-bottom{bottom:-3px;left:-3px;width:30px;height:30px;border-left:6px solid #ffffff;border-bottom:6px solid #ffffff;background:transparent}.side-left{bottom:-3px;right:-3px;width:30px;height:30px;border-right:6px solid #ffffff;border-bottom:6px solid #ffffff;background:transparent}.guide-text{position:absolute;top:50%;left:50%;transform:translate(-50%, -50%);color:#fff;font-size:14px;font-weight:600;text-align:center;white-space:normal;background:rgba(0, 0, 0, 0.25);backdrop-filter:blur(12px);padding:12px 20px;border-radius:8px;max-width:300px;z-index:20;border:1px solid rgba(255, 255, 255, 0.1)}.quality-indicator{position:absolute;top:20px;right:20px;display:flex;align-items:center;gap:8px;background:rgba(0, 0, 0, 0.8);padding:8px 12px;border-radius:20px;z-index:25;transition:all 0.3s ease}.quality-indicator.warning{background:rgba(255, 152, 0, 0.9)}.quality-indicator.good{background:rgba(76, 175, 80, 0.9)}.quality-score{color:#fff;font-size:12px;font-weight:600;min-width:30px;text-align:center}.quality-status{width:20px;height:20px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:14px;font-weight:bold;color:#fff;transition:all 0.3s ease}.quality-status.ready{background:#4CAF50}.quality-status.not-ready{background:#f44336}.card-outline.quality-warning{animation:qualityWarning 1s ease-in-out infinite alternate}@keyframes qualityWarning{0%{box-shadow:0 0 0 3px rgba(255, 152, 0, 0.6)}100%{box-shadow:0 0 0 6px rgba(255, 152, 0, 0.3)}}.capture-animation{position:absolute;top:0;left:0;width:100%;height:100%;background:#fff;opacity:0;z-index:30;pointer-events:none;animation:captureFlash 0.6s ease-out}@keyframes captureFlash{0%{opacity:0}15%{opacity:0.8}30%{opacity:0}45%{opacity:0.4}60%{opacity:0}100%{opacity:0}}.card-outline.capturing{animation:pulseGreen 0.6s ease-out}@keyframes pulseGreen{0%{border-color:#28a745;box-shadow:0 0 0 4px rgba(40, 167, 69, 0)}50%{border-color:#28a745;box-shadow:0 0 0 8px rgba(40, 167, 69, 0.6)}100%{border-color:#28a745;box-shadow:0 0 0 4px rgba(40, 167, 69, 0)}}.flip-animation{position:absolute;top:50%;left:50%;transform:translate(-50%, -50%);z-index:35;pointer-events:none;opacity:0;animation:showFlipInstruction 3s ease-in-out;display:flex;flex-direction:column;align-items:center;justify-content:center}.id-card-icon{width:80px;height:50px;background:linear-gradient(135deg, #6c757d 0%, #495057 100%);border-radius:8px;position:relative;animation:flipCard 2s ease-in-out infinite;box-shadow:0 4px 12px rgba(0, 0, 0, 0.3)}.id-card-icon::before{content:'';position:absolute;top:8px;left:8px;width:16px;height:12px;background:rgba(255, 255, 255, 0.9);border-radius:2px}.id-card-icon::after{content:'';position:absolute;top:25px;left:8px;width:64px;height:3px;background:rgba(255, 255, 255, 0.7);border-radius:1px;box-shadow:0 6px 0 rgba(255, 255, 255, 0.7), 0 12px 0 rgba(255, 255, 255, 0.7)}.flip-text{margin-top:12px;color:#fff;font-size:14px;font-weight:600;text-align:center;background:rgba(128, 128, 128, 0.8);padding:12px 20px;border-radius:20px;max-width:300px}@keyframes showFlipInstruction{0%{opacity:0;transform:translate(-50%, -50%) scale(0.8)}15%{opacity:1;transform:translate(-50%, -50%) scale(1)}85%{opacity:1;transform:translate(-50%, -50%) scale(1)}100%{opacity:0;transform:translate(-50%, -50%) scale(0.8)}}@keyframes flipCard{0%{transform:rotateY(0deg)}50%{transform:rotateY(180deg)}100%{transform:rotateY(360deg)}}.success-animation{position:absolute;top:50%;left:50%;transform:translate(-50%, -50%);z-index:35;pointer-events:none;opacity:0;animation:showSuccessMessage 3s ease-in-out;display:flex;flex-direction:column;align-items:center;justify-content:center}.check-icon{width:80px;height:80px;background:linear-gradient(135deg, #6c757d 0%, #495057 100%);border-radius:50%;position:relative;animation:bounceSuccess 0.6s ease-out;box-shadow:0 4px 16px rgba(108, 117, 125, 0.4);display:flex;align-items:center;justify-content:center}.check-icon::before{content:'';position:absolute;width:20px;height:35px;border:4px solid #fff;border-top:none;border-left:none;transform:rotate(45deg);animation:drawCheck 0.4s ease-out 0.2s both}.success-text{margin-top:16px;color:#fff;font-size:14px;font-weight:600;text-align:center;background:rgba(128, 128, 128, 0.8);padding:12px 20px;border-radius:20px;max-width:300px;animation:fadeInUp 0.5s ease-out 0.4s both}@keyframes showSuccessMessage{0%{opacity:0;transform:translate(-50%, -50%) scale(0.5)}15%{opacity:1;transform:translate(-50%, -50%) scale(1)}85%{opacity:1;transform:translate(-50%, -50%) scale(1)}100%{opacity:0;transform:translate(-50%, -50%) scale(0.9)}}@keyframes bounceSuccess{0%{transform:scale(0)}50%{transform:scale(1.1)}100%{transform:scale(1)}}@keyframes drawCheck{0%{width:0;height:0}50%{width:20px;height:0}100%{width:20px;height:35px}}@keyframes fadeInUp{0%{opacity:0;transform:translateY(20px)}100%{opacity:1;transform:translateY(0)}}.skip-section{position:absolute;bottom:20px;left:50%;transform:translateX(-50%);z-index:25;display:flex;flex-direction:column;align-items:center;width:100%;max-width:300px}.skip-explanation{background:rgba(0, 0, 0, 0.5);color:#ffffff;padding:10px 16px;border-radius:8px;font-size:14px;font-weight:500;text-align:center;margin-bottom:12px;box-shadow:0 2px 8px rgba(0, 0, 0, 0.2);backdrop-filter:blur(12px);border:1px solid rgba(255, 255, 255, 0.1);animation:fadeIn 0.3s ease-in-out}@keyframes fadeIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}.skip-button{pointer-events:auto;background:#fff;color:#333;border:none;border-radius:25px;padding:12px 24px;font-size:14px;font-weight:600;cursor:pointer;transition:all 0.3s ease}.skip-button:hover{background:#f8f9fa}.skip-button:active{background:#e9ecef;transform:translateY(1px)}.camera-controls{position:absolute;top:16px;right:16px;z-index:25;display:flex;gap:8px;pointer-events:auto}.camera-selector-button{height:32px;padding:0 10px;border:none;border-radius:8px;background:rgba(0, 0, 0, 0.25);backdrop-filter:blur(12px);color:#ffffff;font-size:12px;font-weight:500;cursor:pointer;transition:all 0.2s ease;display:flex;align-items:center;justify-content:center;border:1px solid rgba(255, 255, 255, 0.1);white-space:nowrap;min-width:fit-content}.camera-selector-button:hover{background:rgba(0, 0, 0, 0.8);border-color:rgba(255, 255, 255, 0.2);transform:translateY(-1px)}.camera-selector-button:active{transform:translateY(0);background:rgba(0, 0, 0, 0.9)}.camera-selector-button:disabled,.camera-selector-button.loading{opacity:0.7;cursor:not-allowed;pointer-events:none}.camera-selector-button:disabled:hover,.camera-selector-button.loading:hover{transform:none;background:rgba(0, 0, 0, 0.6);border-color:rgba(255, 255, 255, 0.1)}.button-spinner{width:16px;height:16px;border:2px solid rgba(255, 255, 255, 0.3);border-top:2px solid #ffffff;border-radius:50%;animation:spin 1s linear infinite}@keyframes spin{0%{transform:rotate(0deg)}100%{transform:rotate(360deg)}}.camera-selector-dropdown{position:absolute;top:56px;right:16px;z-index:30;background:rgba(0, 0, 0, 0.25);backdrop-filter:blur(20px);border-radius:12px;min-width:260px;max-width:300px;border:1px solid rgba(255, 255, 255, 0.1);overflow:hidden;pointer-events:auto;animation:slideInFromTop 0.3s ease-out}@keyframes slideInFromTop{0%{opacity:0;transform:translateY(-8px) scale(0.95)}100%{opacity:1;transform:translateY(0) scale(1)}}.camera-selector-header{display:flex;justify-content:space-between;align-items:center;padding:8px 12px;border-bottom:1px solid rgba(255, 255, 255, 0.1)}.camera-selector-header span{font-weight:500;color:#ffffff;font-size:13px;opacity:0.9}.close-selector{width:20px;height:20px;border:none;background:none;color:rgba(255, 255, 255, 0.7);font-size:16px;cursor:pointer;display:flex;align-items:center;justify-content:center;border-radius:4px;transition:all 0.2s ease}.close-selector:hover{background:rgba(255, 255, 255, 0.1);color:#ffffff}.camera-list{padding:4px 0;max-height:240px;overflow-y:auto}.camera-option{width:100%;padding:8px 12px;border:none;background:none;text-align:left;cursor:pointer;transition:all 0.2s ease;display:flex;justify-content:space-between;align-items:center;color:rgba(255, 255, 255, 0.9)}.camera-option:hover{background:rgba(255, 255, 255, 0.08)}.camera-option.selected{background:rgba(255, 255, 255, 0.12);color:#ffffff}.camera-label{font-size:13px;flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-right:8px;font-weight:400}.selected-indicator{font-size:14px;color:#ffffff;opacity:0.9}.device-info{padding:6px 12px;border-top:1px solid rgba(255, 255, 255, 0.1);background:rgba(255, 255, 255, 0.05)}.device-info small{color:rgba(255, 255, 255, 0.6);font-size:11px;text-transform:capitalize;font-weight:400}@media (max-width: 480px){.camera-controls{top:12px;right:12px;gap:6px}.camera-selector-button{height:36px;padding:0 12px;font-size:11px;border-radius:6px}.camera-selector-dropdown{right:12px;top:48px;min-width:240px;max-width:calc(100vw - 24px)}.camera-selector-header{padding:6px 10px}.camera-option{padding:6px 10px}.device-info{padding:4px 10px}}.watermark{position:absolute;bottom:12px;right:12px;z-index:15;pointer-events:none;opacity:0.7}.watermark img{height:24px;width:auto;filter:drop-shadow(0 1px 2px rgba(0, 0, 0, 0.3))}.component-status{position:absolute;top:16px;left:16px;background:rgba(0, 0, 0, 0.25);backdrop-filter:blur(20px);border-radius:12px;border:1px solid rgba(255, 255, 255, 0.1);display:flex;align-items:center;gap:6px;padding:6px 10px;z-index:40;height:32px;width:fit-content;animation:slideInFromTop 0.3s ease-out}.status-spinner{width:16px;height:16px;border:1px solid rgba(255, 255, 255, 0.3);border-top:1px solid #ffffff;border-radius:50%;animation:statusSpin 1s linear infinite;flex-shrink:0}.status-content{display:flex;flex-direction:column;gap:1px}.status-message{color:#ffffff;font-size:12px;font-weight:500;margin:0}.status-description{color:rgba(255, 255, 255, 0.7);font-size:10px;line-height:1.2;margin:0}@keyframes statusSpin{0%{transform:rotate(0deg)}100%{transform:rotate(360deg)}}@media (max-width: 480px){.component-status{top:12px;left:12px;padding:4px 8px;gap:4px;height:28px;border-radius:8px}.status-spinner{width:14px;height:14px}.status-message{font-size:11px}.status-description{font-size:9px}}.loading-overlay{position:absolute;top:0;left:0;width:100%;height:100%;background:rgba(0, 0, 0, 0.85);backdrop-filter:blur(4px);display:flex;flex-direction:column;align-items:center;justify-content:center;z-index:30;border-radius:8px}.loading-spinner{width:50px;height:50px;border:3px solid rgba(255, 255, 255, 0.15);border-top:3px solid #28a745;border-radius:50%;animation:spin 1s ease-in-out infinite;margin-bottom:16px}.loading-text{color:#ffffff;font-size:14px;font-weight:500;text-align:center;opacity:0.9;margin-bottom:4px}.loading-description{color:rgba(255, 255, 255, 0.7);font-size:12px;text-align:center;opacity:0.8}@keyframes spin{0%{transform:rotate(0deg)}100%{transform:rotate(360deg)}}.performance-monitor{position:absolute;top:70px;left:16px;background:rgba(0, 0, 0, 0.25);backdrop-filter:blur(20px);border-radius:12px;border:1px solid rgba(255, 255, 255, 0.1);z-index:35;width:fit-content;animation:slideInFromLeft 0.3s ease-out;transition:all 0.3s ease}@keyframes slideInFromLeft{0%{opacity:0;transform:translateX(-20px) scale(0.95)}100%{opacity:1;transform:translateX(0) scale(1)}}.performance-expanded{padding:6px 10px}.metrics-row{display:flex;gap:8px;margin-bottom:4px}.metrics-row:last-child{margin-bottom:0}.metric-compact{display:flex;flex-direction:column;align-items:center;gap:2px;min-width:50px}.metric-label{font-size:9px;color:rgba(255, 255, 255, 0.6);font-weight:500;text-transform:uppercase;letter-spacing:0.3px}.metric-value{font-size:10px;font-weight:600;font-family:'Monaco', 'Menlo', 'Consolas', monospace;padding:2px 4px;border-radius:3px;text-align:center;white-space:nowrap}.metric-value.good{color:#4ade80;background:rgba(74, 222, 128, 0.1);border:1px solid rgba(74, 222, 128, 0.2)}.metric-value.warning{color:#fbbf24;background:rgba(251, 191, 36, 0.1);border:1px solid rgba(251, 191, 36, 0.2)}.metric-value.danger{color:#f87171;background:rgba(248, 113, 113, 0.1);border:1px solid rgba(248, 113, 113, 0.2)}@media (max-width: 480px){.performance-monitor{top:60px;left:12px;width:fit-content}.performance-expanded{padding:4px 8px}.metrics-row{gap:6px;margin-bottom:3px}.metric-compact{min-width:45px;gap:1px}.metric-label{font-size:8px}.metric-value{font-size:9px;padding:1px 3px}}.quality-monitor{position:absolute;top:200px;left:16px;background:rgba(0, 0, 0, 0.25);backdrop-filter:blur(20px);border-radius:12px;border:1px solid rgba(255, 255, 255, 0.1);z-index:35;width:fit-content;animation:slideInFromLeft 0.3s ease-out;transition:all 0.3s ease}.quality-text{padding:6px 10px;font-size:11px;color:white;font-family:'Monaco', 'Menlo', 'Consolas', monospace;line-height:1.4}.quality-fail{color:#ff9999}@keyframes pulse{0%,100%{opacity:1}50%{opacity:0.7}}.metric-value.danger{animation:pulse 2s infinite}@media (max-width: 480px){.quality-monitor{top:160px;left:12px}.quality-text{padding:4px 8px;font-size:10px}}";
 
 const JaakStamps = class {
     constructor(hostRef) {
@@ -1106,16 +1328,9 @@ const JaakStamps = class {
     showCameraSelector = false;
     isSwitchingCamera = false;
     hasDocumentDetected = false;
-    cameraInfoWithAutofocus = {
-        availableCameras: [],
-        selectedCameraId: null,
-        deviceType: 'desktop',
-        isMultipleCamerasAvailable: false,
-        preferredFacing: null
-    };
     currentStatus = {
-        message: 'Preparando capturador...',
-        description: 'Configurando herramientas de captura',
+        message: 'Inicializando componente...',
+        description: 'Configurando servicios y cargando recursos',
         type: 'initializing',
         isInitialized: false
     };
@@ -1132,6 +1347,7 @@ const JaakStamps = class {
     backDocumentTimerRemaining = 0;
     // Services
     serviceContainer;
+    logger;
     eventBus;
     stateManager;
     cameraService;
@@ -1162,25 +1378,19 @@ const JaakStamps = class {
         lastUpdateTime: 0
     };
     performanceUpdateInterval;
-    // Performance optimization with adaptive frame skipping
+    // Performance optimization
     frameSkipCounter = 0;
-    BASE_FRAME_SKIP = 2;
-    MAX_FRAME_SKIP = 8;
+    FRAME_SKIP = 2;
     consecutiveFailures = 0;
     MAX_FAILURES = 30;
     lastInferenceTime = 0;
     MIN_INFERENCE_INTERVAL = 50;
-    performanceHistory = [];
-    PERFORMANCE_HISTORY_SIZE = 10;
-    // Canvas pool for optimized screenshot capture
-    canvasPool = [];
-    MAX_CANVAS_POOL_SIZE = 3;
     async componentDidLoad() {
-        this.updateStatus('Preparando capturador...', 'Configurando herramientas de captura', 'initializing');
+        this.updateStatus('Iniciando servicios...', 'Configurando módulos internos', 'initializing');
         await this.initializeServices();
-        this.updateStatus('Preparando funciones...', 'Configurando herramientas de trabajo', 'initializing');
+        this.updateStatus('Configurando eventos...', 'Preparando comunicación entre servicios', 'initializing');
         await this.setupEventListeners();
-        this.updateStatus('Configurando cámara...', 'Detectando dispositivos disponibles', 'initializing');
+        this.updateStatus('Inicializando cámara...', 'Detectando dispositivos disponibles', 'initializing');
         await this.initializeComponent();
         if (this.debug) {
             this.initializePerformanceMonitor();
@@ -1197,23 +1407,33 @@ const JaakStamps = class {
             captureDelay: this.captureDelay
         };
         this.serviceContainer = new ServiceContainer(config);
+        this.logger = this.serviceContainer.getLogger();
         this.eventBus = this.serviceContainer.getEventBus();
         this.stateManager = this.serviceContainer.getStateManager();
         this.cameraService = this.serviceContainer.getCameraService();
         this.detectionService = this.serviceContainer.getDetectionService();
+        this.logger.state('SERVICIOS_INICIALIZADOS', { timestamp: Date.now() });
     }
     async setupEventListeners() {
         this.eventBus.on('state-changed', (data) => {
             this.handleStateChange(data);
         });
-        this.eventBus.on('camera-changed', () => {
-            // Camera changed event
+        this.eventBus.on('camera-changed', (cameraId) => {
+            this.logger.state('CAMARA_CAMBIADA_EVENT', { cameraId });
         });
-        this.eventBus.on('error', () => {
-            // Handle service errors
+        this.eventBus.on('error', (error) => {
+            this.logger.error('Error en servicio:', error);
         });
     }
     async initializeComponent() {
+        this.logger.state('COMPONENTE_INICIALIZANDO', {
+            debug: this.debug,
+            maskSize: this.maskSize,
+            cropMargin: this.cropMargin,
+            useDocumentClassification: this.useDocumentClassification,
+            preferredCamera: this.preferredCamera,
+            captureDelay: this.captureDelay
+        });
         this.validateProps();
         if (this.debug) {
             this.stateManager.updateCaptureState({ isLoading: true });
@@ -1222,29 +1442,32 @@ const JaakStamps = class {
         this.updateStatus('Detectando cámaras...', 'Buscando dispositivos de captura', 'initializing');
         await this.cameraService.detectDeviceType();
         await this.cameraService.enumerateDevices();
-        await this.updateCameraInfoWithAutofocus();
-        this.updateStatus('Preparando reconocimiento...', 'Configurando detección de documentos', 'initializing');
+        this.updateStatus('Cargando modelo IA...', 'Preparando reconocimiento de documentos', 'initializing');
         await this.loadOnnxRuntime();
         this.initializeResizeObserver();
     }
     validateProps() {
         if (this.maskSize < 50 || this.maskSize > 100) {
+            this.logger.warn(`Propiedad maskSize inválida. Valor: ${this.maskSize}, esperado: 50-100. Usando valor por defecto: 90`);
             this.maskSize = 90;
         }
         if (this.cropMargin < 0 || this.cropMargin > 100) {
+            this.logger.warn(`Propiedad cropMargin inválida. Valor: ${this.cropMargin}, esperado: 0-100. Usando valor por defecto: 0`);
             this.cropMargin = 0;
         }
         const validOptions = ['auto', 'front', 'back'];
         if (!validOptions.includes(this.preferredCamera)) {
+            this.logger.warn(`Propiedad preferredCamera inválida. Valor: ${this.preferredCamera}, esperado: ${validOptions.join(', ')}. Usando valor por defecto: 'auto'`);
             this.preferredCamera = 'auto';
         }
         if (this.captureDelay < 0 || this.captureDelay > 10000) {
+            this.logger.warn(`Propiedad captureDelay inválida. Valor: ${this.captureDelay}, esperado: 0-10000. Usando valor por defecto: 1500`);
             this.captureDelay = 1500;
         }
     }
     async loadOnnxRuntime() {
         if (!window.ort) {
-            this.updateStatus('Preparando herramientas...', 'Configurando funciones de captura', 'initializing');
+            this.updateStatus('Descargando librerías...', 'Obteniendo recursos de reconocimiento', 'initializing');
             const script = document.createElement('script');
             script.src = 'https://cdn.jsdelivr.net/npm/onnxruntime-web/dist/ort.min.js';
             document.head.appendChild(script);
@@ -1284,6 +1507,11 @@ const JaakStamps = class {
     emitReadyEvent() {
         const isDocumentReady = !!window.ort && this.detectionService.isModelLoaded();
         this.isReady.emit(isDocumentReady);
+        this.logger.state('COMPONENTE_LISTO', {
+            ortLibraryLoaded: !!window.ort,
+            modelPreloaded: this.detectionService.isModelLoaded(),
+            isReady: isDocumentReady
+        });
     }
     handleStateChange(data) {
     }
@@ -1300,6 +1528,7 @@ const JaakStamps = class {
             const container = this.detectionContainer.parentElement;
             const rect = container.getBoundingClientRect();
             this.updateMaskDimensions(rect);
+            this.logger.debug('Container redimensionado:', { width: rect.width, height: rect.height });
         }
     }
     updateMaskDimensions(containerRect) {
@@ -1353,38 +1582,16 @@ const JaakStamps = class {
         this.el.style.setProperty('--mask-center-x', `${videoCenterXPercent}%`);
         this.el.style.setProperty('--mask-center-y', `${videoCenterYPercent}%`);
         this.isMaskReady = true;
+        this.logger.state('DIMENSIONES_MASCARA_ACTUALIZADAS', {
+            video: { width: videoWidth, height: videoHeight },
+            displayed: { width: displayedVideoWidth, height: displayedVideoHeight },
+            mask: { widthPercent: maskWidthPercent, heightPercent: maskHeightPercent },
+            center: { x: videoCenterXPercent, y: videoCenterYPercent },
+            offset: { x: videoOffsetX, y: videoOffsetY }
+        });
     }
     // PUBLIC METHODS
-    // Helper method to check if component is ready for operations
-    isComponentReady() {
-        if (!this.currentStatus.isInitialized) {
-            return {
-                ready: false,
-                message: 'El componente aún se está inicializando',
-                status: 'initializing'
-            };
-        }
-        if (this.currentStatus.type === 'loading' || this.currentStatus.type === 'initializing') {
-            return {
-                ready: false,
-                message: 'El componente está cargando recursos',
-                status: 'loading'
-            };
-        }
-        if (!this.serviceContainer || !this.stateManager || !this.cameraService || !this.detectionService) {
-            return {
-                ready: false,
-                message: 'Los servicios del componente no están disponibles',
-                status: 'error'
-            };
-        }
-        return { ready: true };
-    }
     async getCapturedImages() {
-        const readyCheck = this.isComponentReady();
-        if (!readyCheck.ready) {
-            throw new Error(readyCheck.message);
-        }
         const state = this.stateManager.getCaptureState();
         if (state.step !== 'completed') {
             throw new Error('El proceso de captura no ha sido completado');
@@ -1392,128 +1599,47 @@ const JaakStamps = class {
         return this.stateManager.getCapturedImages();
     }
     async isProcessCompleted() {
-        const readyCheck = this.isComponentReady();
-        if (!readyCheck.ready) {
-            return false; // Return false instead of error for this method
-        }
         return this.stateManager.isProcessCompleted();
     }
     async startCapture() {
-        const readyCheck = this.isComponentReady();
-        if (!readyCheck.ready) {
-            this.updateStatus(readyCheck.message, 'Espere a que termine la inicialización', readyCheck.status);
-            return { success: false, error: readyCheck.message };
-        }
-        try {
-            await this.startDetection();
-            return { success: true };
-        }
-        catch (error) {
-            this.updateStatus('Error al iniciar captura', error.message, 'error');
-            return { success: false, error: error.message };
-        }
+        await this.startDetection();
     }
     async stopCapture() {
-        const readyCheck = this.isComponentReady();
-        if (!readyCheck.ready) {
-            return { success: false, error: readyCheck.message };
-        }
-        try {
-            this.exitSession();
-            return { success: true };
-        }
-        catch (error) {
-            return { success: false, error: error.message };
-        }
+        this.exitSession();
     }
     async resetCapture() {
-        const readyCheck = this.isComponentReady();
-        if (!readyCheck.ready) {
-            return { success: false, error: readyCheck.message };
-        }
-        try {
-            this.resetDetection();
-            return { success: true };
-        }
-        catch (error) {
-            return { success: false, error: error.message };
-        }
+        this.resetDetection();
     }
     async skipBackCapture() {
-        const readyCheck = this.isComponentReady();
-        if (!readyCheck.ready) {
-            return { success: false, error: readyCheck.message };
-        }
-        try {
-            const captureState = this.stateManager.getCaptureState();
-            const capturedImages = this.stateManager.getCapturedImages();
-            if (captureState.step === 'back' && capturedImages.front.fullFrame) {
-                this.completeProcess(true);
-                return { success: true };
-            }
-            else {
-                return { success: false, error: 'No se puede saltar el reverso en el estado actual' };
-            }
-        }
-        catch (error) {
-            return { success: false, error: error.message };
+        const captureState = this.stateManager.getCaptureState();
+        const capturedImages = this.stateManager.getCapturedImages();
+        if (captureState.step === 'back' && capturedImages.front.fullFrame) {
+            this.completeProcess(true);
         }
     }
     async getStatus() {
-        const readyCheck = this.isComponentReady();
-        if (!readyCheck.ready) {
-            return {
-                isVideoActive: false,
-                captureStep: 'front',
-                hasImages: false,
-                isProcessCompleted: false,
-                isModelPreloaded: false,
-                componentStatus: readyCheck.status,
-                componentMessage: readyCheck.message
-            };
-        }
-        try {
-            const captureState = this.stateManager.getCaptureState();
-            const capturedImages = this.stateManager.getCapturedImages();
-            return {
-                isVideoActive: captureState.isVideoActive,
-                captureStep: captureState.step,
-                hasImages: !!(capturedImages.front.fullFrame || capturedImages.back.fullFrame),
-                isProcessCompleted: this.stateManager.isProcessCompleted(),
-                isModelPreloaded: this.detectionService.isModelLoaded(),
-                componentStatus: 'ready'
-            };
-        }
-        catch (error) {
-            return {
-                isVideoActive: false,
-                captureStep: 'front',
-                hasImages: false,
-                isProcessCompleted: false,
-                isModelPreloaded: false,
-                componentStatus: 'error',
-                componentMessage: error.message
-            };
-        }
+        const captureState = this.stateManager.getCaptureState();
+        const capturedImages = this.stateManager.getCapturedImages();
+        return {
+            isVideoActive: captureState.isVideoActive,
+            captureStep: captureState.step,
+            hasImages: !!(capturedImages.front.fullFrame || capturedImages.back.fullFrame),
+            isProcessCompleted: this.stateManager.isProcessCompleted(),
+            isModelPreloaded: this.detectionService.isModelLoaded()
+        };
     }
     async preloadModel() {
-        const readyCheck = this.isComponentReady();
-        if (!readyCheck.ready) {
-            this.updateStatus(readyCheck.message, 'Espere a que termine la inicialización', readyCheck.status);
-            return { success: false, error: readyCheck.message };
-        }
         if (this.detectionService.isModelLoaded()) {
-            this.updateStatus('Reconocimiento listo', '', 'ready');
+            this.logger.state('MODELO_YA_PRECARGADO');
+            this.updateStatus('Modelos ya cargados', '', 'ready');
             return { success: true, message: 'Model already loaded' };
         }
         try {
             const loadStartTime = performance.now();
-            this.updateStatus('Preparando reconocimiento...', 'Configurando detección de documentos', 'loading');
-            if (this.stateManager) {
-                this.stateManager.updateCaptureState({ isLoading: true });
-            }
+            this.updateStatus('Descargando modelo de detección...', 'Obteniendo red neuronal para reconocimiento de documentos', 'loading');
+            this.stateManager.updateCaptureState({ isLoading: true });
             await this.detectionService.loadModel();
-            this.updateStatus('Optimizando detección...', 'Configurando reconocimiento de documentos', 'loading');
+            this.updateStatus('Cargando clasificador...', 'Preparando modelo de clasificación de tipos de documento', 'loading');
             await this.detectionService.loadClassificationModel();
             const loadEndTime = performance.now();
             const loadTime = loadEndTime - loadStartTime;
@@ -1521,118 +1647,80 @@ const JaakStamps = class {
             if (this.debug) {
                 this.recordOnnxPerformance(loadTime, 0);
             }
-            this.updateStatus('Finalizando configuración...', 'Preparando herramientas para captura', 'loading');
+            this.updateStatus('Optimizando modelos...', 'Configurando parámetros de rendimiento', 'loading');
             await new Promise(resolve => setTimeout(resolve, 300));
-            this.updateStatus('Reconocimiento preparado', '', 'ready');
-            if (this.stateManager) {
-                this.stateManager.updateCaptureState({ isLoading: false });
-            }
+            this.updateStatus('Modelos precargados', '', 'ready');
+            this.stateManager.updateCaptureState({ isLoading: false });
             this.emitReadyEvent();
+            this.logger.state('MODELOS_PRECARGADOS_EXITOSAMENTE', { loadTime: Math.round(loadTime) });
             return { success: true, message: 'Models preloaded successfully' };
         }
         catch (error) {
-            this.updateStatus('Error de configuración', 'No se pudieron preparar las herramientas necesarias', 'error');
-            if (this.stateManager) {
-                this.stateManager.updateCaptureState({ isLoading: false });
-            }
+            this.logger.error('Error al precargar modelos:', error);
+            this.updateStatus('Error al cargar modelos', 'No se pudieron descargar los recursos necesarios', 'error');
+            this.stateManager.updateCaptureState({ isLoading: false });
             return { success: false, error: error.message };
         }
     }
     async getCameraInfo() {
-        const readyCheck = this.isComponentReady();
-        if (!readyCheck.ready) {
-            return {
-                availableCameras: [],
-                selectedCameraId: null,
-                deviceType: 'desktop',
-                isMultipleCamerasAvailable: false,
-                preferredFacing: null,
-                error: readyCheck.message
-            };
-        }
-        try {
-            return await this.cameraService.getCameraInfo();
-        }
-        catch (error) {
-            return {
-                availableCameras: [],
-                selectedCameraId: null,
-                deviceType: 'desktop',
-                isMultipleCamerasAvailable: false,
-                preferredFacing: null,
-                error: error.message
-            };
-        }
+        return this.cameraService.getCameraInfo();
     }
     async setPreferredCamera(camera) {
-        const readyCheck = this.isComponentReady();
-        if (!readyCheck.ready) {
-            return {
-                success: false,
-                error: readyCheck.message,
-                selectedCamera: null,
-                availableCameras: 0
-            };
-        }
-        try {
-            this.preferredCamera = camera;
-            this.serviceContainer.updateConfig({ preferredCamera: camera });
-            await this.cameraService.enumerateDevices();
-            await this.updateCameraInfoWithAutofocus();
-            const captureState = this.stateManager.getCaptureState();
-            if (captureState.isVideoActive) {
-                const selectedCameraId = this.cameraService.getSelectedCameraId();
-                if (selectedCameraId) {
-                    await this.cameraService.switchCamera(selectedCameraId);
-                }
+        this.preferredCamera = camera;
+        this.serviceContainer.updateConfig({ preferredCamera: camera });
+        await this.cameraService.enumerateDevices();
+        const captureState = this.stateManager.getCaptureState();
+        if (captureState.isVideoActive) {
+            const selectedCameraId = this.cameraService.getSelectedCameraId();
+            if (selectedCameraId) {
+                await this.cameraService.switchCamera(selectedCameraId);
             }
-            return {
-                success: true,
-                selectedCamera: this.cameraService.getSelectedCameraId(),
-                availableCameras: this.cameraService.getAvailableCameras().length
-            };
-        }
-        catch (error) {
-            return {
-                success: false,
-                error: error.message,
-                selectedCamera: null,
-                availableCameras: 0
-            };
         }
+        return {
+            success: true,
+            selectedCamera: this.cameraService.getSelectedCameraId(),
+            availableCameras: this.cameraService.getAvailableCameras().length
+        };
     }
     async setCaptureDelay(delay) {
         if (delay < 0 || delay > 10000) {
-            return {
-                success: false,
-                error: 'Capture delay must be between 0 and 10000 milliseconds',
-                captureDelay: this.captureDelay
-            };
+            throw new Error('Capture delay must be between 0 and 10000 milliseconds');
         }
-        // Allow setting capture delay even during initialization
         this.captureDelay = delay;
-        if (this.serviceContainer) {
-            this.serviceContainer.updateConfig({ captureDelay: delay });
-        }
+        this.serviceContainer.updateConfig({ captureDelay: delay });
         return {
             success: true,
             captureDelay: this.captureDelay
         };
     }
     async getCaptureDelay() {
-        // Always allow getting capture delay, even during initialization
         return this.captureDelay;
     }
+    async setTorchEnabled(enabled) {
+        const torchEnabled = await this.cameraService.setTorchEnabled(enabled, this.videoStream);
+        return {
+            success: torchEnabled,
+            enabled: torchEnabled ? enabled : false
+        };
+    }
+    async focusAtPoint(x, y) {
+        const focused = await this.cameraService.focusAtPoint(x, y, this.videoStream);
+        return {
+            success: focused,
+            coordinates: { x, y }
+        };
+    }
     // DETECTION METHODS
     async startDetection() {
+        this.logger.state('INICIANDO_DETECCION');
         try {
             // Paso 1: Verificar y cargar modelos si es necesario
             if (!this.detectionService.isModelLoaded()) {
                 const loadStartTime = performance.now();
-                this.updateStatus('Preparando reconocimiento...', 'Configurando detección de documentos', 'loading');
+                this.updateStatus('Cargando modelo de detección...', 'Descargando red neuronal para reconocimiento', 'loading');
                 this.stateManager.updateCaptureState({ isLoading: true });
                 await this.detectionService.loadModel();
-                this.updateStatus('Optimizando detección...', 'Configurando reconocimiento de documentos', 'loading');
+                this.updateStatus('Cargando clasificador...', 'Preparando modelo de clasificación de documentos', 'loading');
                 await this.detectionService.loadClassificationModel();
                 const loadEndTime = performance.now();
                 const loadTime = loadEndTime - loadStartTime;
@@ -1640,13 +1728,13 @@ const JaakStamps = class {
                 if (this.debug) {
                     this.recordOnnxPerformance(loadTime, 0);
                 }
+                this.logger.state('MODELOS_CARGADOS_EN_DETECCION', { loadTime: Math.round(loadTime) });
             }
             // Paso 2: Detectar y configurar dispositivos
-            this.updateStatus('Configurando cámara...', 'Buscando dispositivos disponibles', 'loading');
+            this.updateStatus('Detectando cámaras...', 'Buscando dispositivos de captura disponibles', 'loading');
             await this.cameraService.enumerateDevices();
-            await this.updateCameraInfoWithAutofocus();
             // Paso 3: Configurar cámara seleccionada
-            this.updateStatus('Ajustando cámara...', 'Configurando calidad de imagen', 'loading');
+            this.updateStatus('Configurando cámara...', 'Estableciendo resolución y parámetros óptimos', 'loading');
             const stream = await this.cameraService.setupCamera();
             // Paso 4: Inicializar video y ocultar estado inmediatamente
             this.updateStatus('Captura activa', 'Buscando documento en el marco de captura', 'active');
@@ -1663,7 +1751,8 @@ const JaakStamps = class {
             this.detectFrame();
         }
         catch (err) {
-            this.updateStatus('Error al iniciar', 'No se pudo preparar la captura', 'error');
+            this.logger.error('Error al inicializar detección:', err);
+            this.updateStatus('Error al iniciar captura', 'No se pudo completar la inicialización', 'error');
             this.stateManager.updateCaptureState({ isLoading: false });
         }
     }
@@ -1673,6 +1762,10 @@ const JaakStamps = class {
             this.videoStream = stream;
             const isRear = this.cameraService.isRearCamera(stream);
             this.shouldMirrorVideo = !isRear;
+            this.logger.state('CAMARA_CONFIGURADA', {
+                isRearCamera: isRear,
+                shouldMirrorVideo: this.shouldMirrorVideo
+            });
             return new Promise((resolve) => {
                 this.videoRef.onloadedmetadata = async () => {
                     await this.videoRef.play();
@@ -1697,10 +1790,9 @@ const JaakStamps = class {
                 }
                 return;
             }
-            // Adaptive frame skipping for performance
+            // Frame skipping for performance
             this.frameSkipCounter++;
-            const currentFrameSkip = this.getAdaptiveFrameSkip();
-            if (this.frameSkipCounter <= currentFrameSkip) {
+            if (this.frameSkipCounter <= this.FRAME_SKIP) {
                 if (captureState.step !== 'completed') {
                     this.animationId = requestAnimationFrame(() => this.detectFrame());
                 }
@@ -1776,6 +1868,7 @@ const JaakStamps = class {
             }
         }
         catch (e) {
+            this.logger.error('Error en inferencia de modelo:', e);
             const captureState = this.stateManager.getCaptureState();
             if (captureState.step !== 'completed') {
                 setTimeout(() => this.detectFrame(), 100);
@@ -1802,8 +1895,6 @@ const JaakStamps = class {
             clearInterval(this.performanceUpdateInterval);
             this.performanceUpdateInterval = undefined;
         }
-        // Clear canvas pool
-        this.canvasPool = [];
         this.detectionBoxes = [];
         this.alignmentStartTime = undefined;
         this.hasDocumentDetected = false;
@@ -1817,8 +1908,11 @@ const JaakStamps = class {
             step: 'front',
             isCapturing: false
         };
-        const cameraInfo = this.cameraInfoWithAutofocus;
-        return (index.h("div", { key: '69a8df7969288e19088e8809f1fefcc89b237cda', class: "detector-container" }, index.h("div", { key: '79e59a315d266be9d4fb5eed5740e5ad825d5890', class: "video-container" }, index.h("video", { key: 'a3312788c739748b774a25acb30c2dcea7f01695', ref: el => this.videoRef = el, autoplay: true, muted: true, playsinline: true, class: this.shouldMirrorVideo ? 'mirror' : '', style: { display: captureState.isVideoActive ? 'block' : 'none' } }), index.h("div", { key: 'ddab107500c2dab24c140049bef0b44aafc35dc7', ref: el => this.detectionContainer = el, class: `detection-overlay ${this.shouldMirrorVideo ? 'mirror' : ''}` }, this.debug && this.detectionBoxes.map((box, index$1) => (index.h("div", { key: index$1, class: "detection-box", style: {
+        const cameraInfo = this.cameraService?.getCameraInfo() || {
+            availableCameras: [],
+            selectedCameraId: null,
+            deviceType: 'desktop'};
+        return (index.h("div", { key: '9d4d77042218ab3d0bc4fb1ce879db09dc3e78b4', class: "detector-container" }, index.h("div", { key: '51ac8ccb1275637282b038ad8364d19f14ef61b1', class: "video-container" }, index.h("video", { key: 'a34f0481da20ec5b7b62b21aa275ec5f6dfec5d1', ref: el => this.videoRef = el, autoplay: true, muted: true, playsinline: true, class: this.shouldMirrorVideo ? 'mirror' : '', style: { display: captureState.isVideoActive ? 'block' : 'none' } }), index.h("div", { key: '43b71dfe3eaf20ffa66a4139e24b1af6a2074631', ref: el => this.detectionContainer = el, class: `detection-overlay ${this.shouldMirrorVideo ? 'mirror' : ''}` }, this.debug && this.detectionBoxes.map((box, index$1) => (index.h("div", { key: index$1, class: "detection-box", style: {
                 position: 'absolute',
                 left: `${box.x}px`,
                 top: `${box.y}px`,
@@ -1827,9 +1921,9 @@ const JaakStamps = class {
                 border: '2px solid #32406C',
                 pointerEvents: 'none',
                 boxSizing: 'border-box'
-            } })))), this.isMaskReady && (index.h("div", { key: '370337089a3de949b8cb4ae84dc0037e6044b2d5', class: "overlay-mask" }, index.h("div", { key: 'cb35c2e42bf1729ad02a8fe7e7abaf27cf1a8d7a', class: "card-outline" }, index.h("div", { key: '637d72ada63805e7f25051cd1ad9093030cb025a', class: "side side-top" }), index.h("div", { key: 'c7a465aa686afa41f80433d949715b40f6f349dc', class: "side side-right" }), index.h("div", { key: '384aade0610b5bc7bdd7db350a70d82f9bebd8ab', class: "side side-bottom" }), index.h("div", { key: '5506cc346f3fd718e3fda4365f69ea780304b6d6', class: "side side-left" }), !captureState.showFlipAnimation && !captureState.showSuccessAnimation && (index.h("div", { key: 'f5b9b62937eabab7c096b7417a13bbf6f822ee8a', class: "guide-text" }, "Alinee su identificaci\u00F3n con el marco"))), captureState.step === 'back' && !captureState.showFlipAnimation && !captureState.showSuccessAnimation && (index.h("div", { key: '74b122125a42839d2600cf99fb855140042ab761', class: "skip-section" }, index.h("div", { key: '0b4a39d1599854d6c445e2c35dcc89a0e4970846', class: "skip-explanation" }, "Si tu documento no tiene lado trasero, da clic en el bot\u00F3n para continuar con el proceso"), index.h("button", { key: 'b52b47df390cc099c8847ca8a676270bb154294d', class: "skip-button", onClick: () => this.skipBackCapture(), type: "button" }, this.enableBackDocumentTimer && this.backDocumentTimerRemaining > 0
+            } })))), this.isMaskReady && (index.h("div", { key: 'c2596f8cabb227e3ea3b082495f52b141cb1690f', class: "overlay-mask" }, index.h("div", { key: 'ba1ea39b5df1cd312a9bd9410b7225a29cfb8a29', class: "card-outline" }, index.h("div", { key: '6ce4d4d969d5f3fbcf75a4eb285f61d434c5633b', class: "side side-top" }), index.h("div", { key: '36653ecc4fcda25dfc84bc4d1f4c4c5dfb71ced7', class: "side side-right" }), index.h("div", { key: '8b108fa8fb370b229a0d1a77cb1ff044319a8f75', class: "side side-bottom" }), index.h("div", { key: 'a7aa3b45c065a50445aafd5c3ccefb57b0c9c769', class: "side side-left" }), !captureState.showFlipAnimation && !captureState.showSuccessAnimation && (index.h("div", { key: 'b94b92273e12a019238e11ae57f21e140f13c3f1', class: "guide-text" }, "Alinee su identificaci\u00F3n con el marco"))), captureState.step === 'back' && !captureState.showFlipAnimation && !captureState.showSuccessAnimation && (index.h("div", { key: '144c3741003ec0cc148bb6ce92012d7b3cd110c8', class: "skip-section" }, index.h("div", { key: 'f0a984a6b75afa374c5d47da9d53e39f98071da0', class: "skip-explanation" }, "Si tu documento no tiene lado trasero, da clic en el bot\u00F3n para continuar con el proceso"), index.h("button", { key: '57ac30d776e30709aab6e0a621cef889da3cc677', class: "skip-button", onClick: () => this.skipBackCapture(), type: "button" }, this.enableBackDocumentTimer && this.backDocumentTimerRemaining > 0
             ? `Saltar reverso (${this.backDocumentTimerRemaining}s)`
-            : 'Saltar reverso'))), captureState.isVideoActive && (index.h("div", { key: 'f04e47749a25197c434b849844c67eadca5c6af3', class: "camera-controls" }, index.h("button", { key: '82625eef057f59b6dac11c4443ccb315231eac7f', class: `camera-selector-button ${this.isSwitchingCamera ? 'loading' : ''}`, onClick: () => this.toggleCameraSelector(), type: "button", title: "Seleccionar c\u00E1mara", disabled: this.isSwitchingCamera }, this.isSwitchingCamera ? (index.h("div", { class: "button-spinner" })) : ('Cámaras')))), this.showCameraSelector && cameraInfo.availableCameras.length > 0 && (index.h("div", { key: '61cfb89cd9bb549cfff2cb70293db06ee6cdf06b', class: "camera-selector-dropdown" }, index.h("div", { key: '60f751d8db7b305f2bdfdc089d2110bcff940150', class: "camera-selector-header" }, index.h("span", { key: '9dae045a34cc06f323ff4850921b495fc845be47' }, "Seleccionar C\u00E1mara"), index.h("button", { key: '4584d7964d91ddd7f3d980c3e5e90493530d33bd', class: "close-selector", onClick: () => this.toggleCameraSelector(), type: "button" }, "\u00D7")), index.h("div", { key: '9881f2b4fc6ffbdc76db06a7b49d060cefbe6277', class: "camera-list" }, cameraInfo.availableCameras.map((camera) => (index.h("button", { key: camera.id, class: `camera-option ${cameraInfo.selectedCameraId === camera.id ? 'selected' : ''}`, onClick: () => this.handleCameraSwitch(camera.id), type: "button" }, index.h("span", { class: "camera-label" }, camera.label || `Cámara ${cameraInfo.availableCameras.indexOf(camera) + 1}`, camera.hasAutofocus && (index.h("span", { class: "autofocus-icon", title: "Autofoco disponible" }, "\u29BF"))), cameraInfo.selectedCameraId === camera.id && (index.h("span", { class: "selected-indicator" }, "\u2713")))))), index.h("div", { key: '3dfe9ffc7b4cc9afb199a78026cef6d4b469805e', class: "device-info" }, index.h("small", { key: 'bddc865a30469bd2724624b2f7c8f641f9d97a07' }, "Dispositivo: ", cameraInfo.deviceType)))))), captureState.isCapturing && (index.h("div", { key: '2fd963e44f69f80d17c6bbbfa3c9b5e11bc816be', class: "capture-animation" })), captureState.showFlipAnimation && (index.h("div", { key: 'ba4872ea5388a0ac3134be61feff5412373465ab', class: "flip-animation" }, index.h("div", { key: 'e83a92cea79f3e85aefc6964c5d9de7b495d511e', class: "id-card-icon" }), index.h("div", { key: '1d06b51fd6ad14d9b37aa6bca72bd13c951a386a', class: "flip-text" }, "\u00A1Voltea tu identificaci\u00F3n!"))), captureState.showSuccessAnimation && (index.h("div", { key: '503c377896d5fdc3ae8476b09f511d571f23ae72', class: "success-animation" }, index.h("div", { key: 'e1929c245b0d1479a6fb1513b0b37c53070c4291', class: "check-icon" }), index.h("div", { key: '024c897c70427b205390770fc3dfb999ffcc84d3', class: "success-text" }, "\u00A1Proceso completado!"))), index.h("div", { key: '54e350707628e5c88ae2900e412e6bda2eace943', class: `component-status status-${this.currentStatus.type}` }, (this.currentStatus.type === 'loading' || this.currentStatus.type === 'initializing') && (index.h("div", { key: '82ea10569ed46285686cf3e63885ca1941bb559c', class: "status-spinner" })), index.h("div", { key: '1fecf179c10965cccf1be3dc0a54afd377ba38ad', class: "status-content" }, index.h("div", { key: '1b301c1bbb02e5cac2e6babcb20c190662d45c68', class: "status-message" }, this.currentStatus.message), this.currentStatus.description && (index.h("div", { key: '5b6c61308d17176daade02c951a436d114a74100', class: "status-description" }, this.currentStatus.description)))), this.debug && (index.h("div", { key: 'b8104db64208dc87a617a072957c007f28055194', class: "performance-monitor" }, index.h("div", { key: 'e66aec071f10821be2713858dcc251c04f480e63', class: "performance-expanded" }, index.h("div", { key: '1ae09a91d0704ab21b9eb51097cf452fd5f44359', class: "metrics-row" }, index.h("div", { key: '340d4d16d048a5217fe13d5de63618c9ea221165', class: "metric-compact" }, index.h("span", { key: '20cfda14969ef70d232edd68f2e9902bd44b5d9a', class: "metric-label" }, "FPS"), index.h("span", { key: '3a089c2814a71ed6513bf05b0120a66aa159daee', class: `metric-value ${this.performanceData.fps < 15 ? 'warning' : this.performanceData.fps < 10 ? 'danger' : 'good'}` }, this.performanceData.fps)), index.h("div", { key: '23f700def988c3220fc5df37aeb57a0a20ff56b3', class: "metric-compact" }, index.h("span", { key: '441e8490a871469813a6d832114e03583d375e91', class: "metric-label" }, "MEM"), index.h("span", { key: '51f7c49164c9d5e699141c92c88375fc99b312ed', class: `metric-value ${this.performanceData.memoryUsage > 100 ? 'warning' : this.performanceData.memoryUsage > 200 ? 'danger' : 'good'}` }, this.performanceData.memoryUsage, "MB"))), index.h("div", { key: '6547fee80e2a1db7c9ff889a1c478fc8248159e6', class: "metrics-row" }, index.h("div", { key: '7b2d1642fd122ee0fbed36387afb23152afe10c2', class: "metric-compact" }, index.h("span", { key: 'a9137119bf7da366f18feaf8f28807ee40ad7a25', class: "metric-label" }, "INF"), index.h("span", { key: '5cbc0c040102688f1039cdcd4bb58020248cf700', class: `metric-value ${this.performanceData.inferenceTime > 100 ? 'warning' : this.performanceData.inferenceTime > 200 ? 'danger' : 'good'}` }, this.performanceData.inferenceTime, "ms")), index.h("div", { key: 'cb4a86f5da46e4081d997c8b8bb6a899f06dfcd2', class: "metric-compact" }, index.h("span", { key: '88ad5e1d842eb156cf6813ecaa9d2bec76a5999e', class: "metric-label" }, "FRAME"), index.h("span", { key: 'a9b14cd98b64dcfc058d3b68a3c168a9e092fb3c', class: `metric-value ${this.performanceData.frameProcessingTime > 50 ? 'warning' : this.performanceData.frameProcessingTime > 100 ? 'danger' : 'good'}` }, this.performanceData.frameProcessingTime, "ms"))), index.h("div", { key: '86e01f3596682cb8ad2ff5464748e6ecb7db374a', class: "metrics-row" }, index.h("div", { key: 'e73b9d39e9bcbc5d46fa0ba0a737700e3e5566d9', class: "metric-compact" }, index.h("span", { key: '8ecfe969dfe77c87d9da76d7390706014b4872f3', class: "metric-label" }, "DET"), index.h("span", { key: 'bd1a6a52e0bd1fb4d377413d7515e4e0f00da10f', class: "metric-value good" }, this.performanceData.successfulDetections, "/", this.performanceData.totalDetections)), index.h("div", { key: '36539ae98787fd60642082db1bf89031003c4bef', class: "metric-compact" }, index.h("span", { key: '7f3a81629c09053e3beeca97f485da0f60412052', class: "metric-label" }, "RATE"), index.h("span", { key: '72399e0ac39270c82b265ce64e402f84cda9fb2c', class: `metric-value ${this.performanceData.detectionRate < 30 ? 'danger' : this.performanceData.detectionRate < 60 ? 'warning' : 'good'}` }, this.performanceData.detectionRate, "%")))))), index.h("div", { key: '4e3a914ba2f5993f85de7b9dd6dc93d76b41c96d', class: "watermark" }, index.h("img", { key: 'aa634c2ba2090f64ee9b41aa1d75a9114d46fd63', src: "https://storage.googleapis.com/jaak-static/commons/powered-by-jaak.png", alt: "Powered by Jaak" })))));
+            : 'Saltar reverso'))), captureState.isVideoActive && (index.h("div", { key: 'bd45628707e0169317ed3dd4247e1056d7046104', class: "camera-controls" }, index.h("button", { key: 'e750fbf4d5d76d9e9596823bb2b86801ef19e485', class: `camera-selector-button ${this.isSwitchingCamera ? 'loading' : ''}`, onClick: () => this.toggleCameraSelector(), type: "button", title: "Seleccionar c\u00E1mara", disabled: this.isSwitchingCamera }, this.isSwitchingCamera ? (index.h("div", { class: "button-spinner" })) : ('Cámaras')))), this.showCameraSelector && cameraInfo.availableCameras.length > 0 && (index.h("div", { key: '40ada780a8ea13aeeaee9cb39bc6496f69f2679d', class: "camera-selector-dropdown" }, index.h("div", { key: '3a920bb02ba024f0359513f10544bf0528ecee6d', class: "camera-selector-header" }, index.h("span", { key: 'e5efd478a602b13821ba53cb9a7a59d1b4a71178' }, "Seleccionar C\u00E1mara"), index.h("button", { key: '2df6cc11e162be74862029e33815927e3fa8f2f8', class: "close-selector", onClick: () => this.toggleCameraSelector(), type: "button" }, "\u00D7")), index.h("div", { key: '06934642dff134c9e1a6872f935a5892a9c7b835', class: "camera-list" }, cameraInfo.availableCameras.map((camera) => (index.h("button", { key: camera.id, class: `camera-option ${cameraInfo.selectedCameraId === camera.id ? 'selected' : ''}`, onClick: () => this.handleCameraSwitch(camera.id), type: "button" }, index.h("span", { class: "camera-label" }, camera.label || `Cámara ${cameraInfo.availableCameras.indexOf(camera) + 1}`), cameraInfo.selectedCameraId === camera.id && (index.h("span", { class: "selected-indicator" }, "\u2713")))))), index.h("div", { key: '8d5ede287c2efb0ebe418bee8dc7fb310443c991', class: "device-info" }, index.h("small", { key: 'b7dd10565113694b09f01ab28ffa29262ae1d2bc' }, "Dispositivo: ", cameraInfo.deviceType)))))), captureState.isCapturing && (index.h("div", { key: '2f9e549e6c0c56d4db5835e58361fb17bba6cf90', class: "capture-animation" })), captureState.showFlipAnimation && (index.h("div", { key: 'a6ef0ed127f23e9d764896ed743ca8d8454851a6', class: "flip-animation" }, index.h("div", { key: '0b04411f88a634bb3243b00ca2d5a45fd6962dea', class: "id-card-icon" }), index.h("div", { key: '9327be58879b407cea87f455989406e58302e9d1', class: "flip-text" }, "\u00A1Voltea tu identificaci\u00F3n!"))), captureState.showSuccessAnimation && (index.h("div", { key: 'bd268578b5003e99256e3340b4a9a6fb7656be64', class: "success-animation" }, index.h("div", { key: '064e0a5b9851de14bc6829f028e7ea7161fd1633', class: "check-icon" }), index.h("div", { key: 'bdcd94a8806399e396e218a359c10b11d05f38d6', class: "success-text" }, "\u00A1Proceso completado!"))), index.h("div", { key: '3d9af617376c16e44e065873919c3d90ff46110a', class: `component-status status-${this.currentStatus.type}` }, (this.currentStatus.type === 'loading' || this.currentStatus.type === 'initializing') && (index.h("div", { key: 'be7b56decfd6f12dcca46b2a9456480e3d5ac00e', class: "status-spinner" })), index.h("div", { key: '5fe9850883cb749cebaa18c3e9c13ca21325e373', class: "status-content" }, index.h("div", { key: '43fdb50691e4b98e56126af1a129f625061128bf', class: "status-message" }, this.currentStatus.message), this.currentStatus.description && (index.h("div", { key: 'b76cbfa4a0349421fcd535d3fd8bf40c89ca3aef', class: "status-description" }, this.currentStatus.description)))), this.debug && (index.h("div", { key: 'eddefb464af0487ab9ab2a0f76dccbb6a2092e51', class: "performance-monitor" }, index.h("div", { key: '7b7d93b56cb4cd4fbb1bdde89c6150b282fa805e', class: "performance-expanded" }, index.h("div", { key: 'f302e8b9d985fb8cad53c4c4e0d37a3bf5a63261', class: "metrics-row" }, index.h("div", { key: 'e8d8f2420ee8643a7f454d38065c75b5be598f77', class: "metric-compact" }, index.h("span", { key: '6e52eb5bb06e0df57e61774de38c31349f45e22b', class: "metric-label" }, "FPS"), index.h("span", { key: '6636f9cea20c49b49c17db86188e2f6b214c45c3', class: `metric-value ${this.performanceData.fps < 15 ? 'warning' : this.performanceData.fps < 10 ? 'danger' : 'good'}` }, this.performanceData.fps)), index.h("div", { key: 'afa1d9dec05b14256a1b1fcec8638b8c21a56e37', class: "metric-compact" }, index.h("span", { key: '9c55e30f5d01582648bacc1fb38ca1990485a591', class: "metric-label" }, "MEM"), index.h("span", { key: 'ca263601e8715027f95ffb2d5413a643dc570cf2', class: `metric-value ${this.performanceData.memoryUsage > 100 ? 'warning' : this.performanceData.memoryUsage > 200 ? 'danger' : 'good'}` }, this.performanceData.memoryUsage, "MB"))), index.h("div", { key: '03caf19961fd01b7781484d49d8121b1e78c161f', class: "metrics-row" }, index.h("div", { key: 'bffb08f01f703411f7c8605e4f8d95b1c37b5c0f', class: "metric-compact" }, index.h("span", { key: '9b92279b3253cc669412733facb3751f4344d69f', class: "metric-label" }, "INF"), index.h("span", { key: '3234d4150e2e1479e3b552767af8123e69911d6c', class: `metric-value ${this.performanceData.inferenceTime > 100 ? 'warning' : this.performanceData.inferenceTime > 200 ? 'danger' : 'good'}` }, this.performanceData.inferenceTime, "ms")), index.h("div", { key: '77082d2669db53f19fb50b3bbfa1ebefb0b86ff4', class: "metric-compact" }, index.h("span", { key: 'cc6ef96c72c800ba36dab2a388f1de863b2dacd5', class: "metric-label" }, "FRAME"), index.h("span", { key: 'e2bb4b7351869a76e810f8bbf20d805154495e35', class: `metric-value ${this.performanceData.frameProcessingTime > 50 ? 'warning' : this.performanceData.frameProcessingTime > 100 ? 'danger' : 'good'}` }, this.performanceData.frameProcessingTime, "ms"))), index.h("div", { key: '5700d7ef839fa77686299d79445203090dc8079f', class: "metrics-row" }, index.h("div", { key: 'a2999a035fccb7f250c01b084075490678513c87', class: "metric-compact" }, index.h("span", { key: '3677d58665996fa5969507dbaff9e956b2ea54ee', class: "metric-label" }, "DET"), index.h("span", { key: 'c584312438b339c82a3bdc33f00fb985ff2a6f55', class: "metric-value good" }, this.performanceData.successfulDetections, "/", this.performanceData.totalDetections)), index.h("div", { key: '58866219f213bf8607083f30be2d5ca5d0515cea', class: "metric-compact" }, index.h("span", { key: 'd90b450051331347f219b6c0f197536d0dcee9b7', class: "metric-label" }, "RATE"), index.h("span", { key: 'f6e6cd7948e06014e5a0416e4e81394fa36ec61d', class: `metric-value ${this.performanceData.detectionRate < 30 ? 'danger' : this.performanceData.detectionRate < 60 ? 'warning' : 'good'}` }, this.performanceData.detectionRate, "%")))))), index.h("div", { key: 'c1d0194f181a0082cc1aa5452de382908da61b65', class: "watermark" }, index.h("img", { key: 'e04d35f3c79a2b4a3922ab5b0f102220171fa7c0', src: "https://storage.googleapis.com/jaak-static/commons/powered-by-jaak.png", alt: "Powered by Jaak" })))));
     }
     // Utility methods
     updateDetectionBoxes(boxes) {
@@ -1910,18 +2004,35 @@ const JaakStamps = class {
         if (allSidesAligned && bestBox) {
             cardOutline?.classList.add('perfect-match');
             corners?.forEach(corner => corner.classList.add('perfect-match'));
+            // Debug logging
+            this.logger.state('CAPTURE_EVALUATION', {
+                allSidesAligned: true,
+                hasScreenshotTaken: this.hasScreenshotTaken,
+                captureDelay: this.captureDelay,
+                alignmentStartTime: this.alignmentStartTime
+            });
             if (!this.hasScreenshotTaken) {
                 const currentTime = Date.now();
                 // Initialize alignment start time if not set
                 if (!this.alignmentStartTime) {
                     this.alignmentStartTime = currentTime;
+                    this.logger.state('ALIGNMENT_TIMER_STARTED', { startTime: currentTime });
                 }
                 // Check if document has been aligned for the configured delay
                 const alignmentDuration = currentTime - this.alignmentStartTime;
+                this.logger.state('ALIGNMENT_DURATION_CHECK', {
+                    alignmentDuration,
+                    captureDelay: this.captureDelay,
+                    readyToCapture: alignmentDuration >= this.captureDelay
+                });
                 if (alignmentDuration >= this.captureDelay) {
+                    this.logger.state('TRIGGERING_CAPTURE', {
+                        alignmentDuration,
+                        captureDelay: this.captureDelay
+                    });
                     this.lastDetectedBox = bestBox;
-                    this.takeScreenshot().catch(() => {
-                        // Handle screenshot error silently
+                    this.takeScreenshot().catch(error => {
+                        this.logger.error('Error al tomar captura de pantalla:', error);
                     });
                     this.hasScreenshotTaken = true;
                     this.alignmentStartTime = undefined;
@@ -1947,12 +2058,21 @@ const JaakStamps = class {
     async takeScreenshot() {
         if (!this.videoRef || !this.lastDetectedBox)
             return;
+        this.logger.state('INICIANDO_CAPTURA', {
+            captureStep: this.stateManager.getCaptureState().step,
+            detectedBox: this.lastDetectedBox,
+            videoResolution: {
+                width: this.videoRef.videoWidth,
+                height: this.videoRef.videoHeight
+            }
+        });
         this.stateManager.updateCaptureState({ isCapturing: true });
         this.triggerCaptureAnimation();
-        // Use pooled canvas for optimization
-        const captureCanvas = this.getPooledCanvas(this.videoRef.videoWidth, this.videoRef.videoHeight);
+        // Create capture canvas
+        const captureCanvas = document.createElement('canvas');
+        captureCanvas.width = this.videoRef.videoWidth;
+        captureCanvas.height = this.videoRef.videoHeight;
         const captureCtx = captureCanvas.getContext('2d', { alpha: false });
-        captureCtx.clearRect(0, 0, captureCanvas.width, captureCanvas.height);
         captureCtx.drawImage(this.videoRef, 0, 0, captureCanvas.width, captureCanvas.height);
         // Calculate crop coordinates
         const INPUT_SIZE = 320;
@@ -1962,10 +2082,11 @@ const JaakStamps = class {
         const cropY = Math.max(0, (this.lastDetectedBox.y * scaleY) - this.cropMargin);
         const cropWidth = Math.min((this.lastDetectedBox.w * scaleX) + (2 * this.cropMargin), this.videoRef.videoWidth - cropX);
         const cropHeight = Math.min((this.lastDetectedBox.h * scaleY) + (2 * this.cropMargin), this.videoRef.videoHeight - cropY);
-        // Use pooled canvas for cropped version
-        const croppedCanvas = this.getPooledCanvas(cropWidth, cropHeight);
+        // Create cropped version
+        const croppedCanvas = document.createElement('canvas');
+        croppedCanvas.width = cropWidth;
+        croppedCanvas.height = cropHeight;
         const croppedCtx = croppedCanvas.getContext('2d', { alpha: false });
-        croppedCtx.clearRect(0, 0, croppedCanvas.width, croppedCanvas.height);
         croppedCtx.drawImage(this.videoRef, cropX, cropY, cropWidth, cropHeight, 0, 0, cropWidth, cropHeight);
         const captureState = this.stateManager.getCaptureState();
         if (captureState.step === 'front') {
@@ -1979,6 +2100,7 @@ const JaakStamps = class {
             if (this.useDocumentClassification) {
                 const classification = await this.detectionService.classifyDocument(croppedCanvas);
                 if (classification && classification.class === 'passport') {
+                    this.logger.state('PASAPORTE_DETECTADO_SALTANDO_REVERSO', { classification: classification?.class });
                     this.completeProcess(true);
                     return;
                 }
@@ -2005,9 +2127,6 @@ const JaakStamps = class {
             });
             this.completeProcess(false);
         }
-        // Return canvases to pool after use
-        this.returnCanvasToPool(captureCanvas);
-        this.returnCanvasToPool(croppedCanvas);
     }
     triggerCaptureAnimation() {
         const cardOutline = this.el.shadowRoot?.querySelector('.card-outline');
@@ -2036,6 +2155,11 @@ const JaakStamps = class {
         setTimeout(() => {
             this.stateManager.updateCaptureState({ showSuccessAnimation: false });
         }, 3000);
+        this.logger.state('PROCESO_COMPLETADO', {
+            skippedBack,
+            totalImages: capturedImages.metadata.totalImages,
+            timestamp: new Date().toISOString()
+        });
     }
     stopDetection() {
         if (this.animationId) {
@@ -2044,6 +2168,7 @@ const JaakStamps = class {
         }
         this.clearBackDocumentTimer();
         this.detectionBoxes = [];
+        this.logger.state('DETECTOR_DETENIDO', { timestamp: Date.now() });
     }
     startBackDocumentTimer() {
         if (!this.enableBackDocumentTimer)
@@ -2072,15 +2197,6 @@ const JaakStamps = class {
             return; // Don't toggle if switching camera
         this.showCameraSelector = !this.showCameraSelector;
     }
-    async updateCameraInfoWithAutofocus() {
-        try {
-            const cameraInfo = await this.cameraService.getCameraInfo();
-            this.cameraInfoWithAutofocus = cameraInfo;
-        }
-        catch (error) {
-            // Keep existing state if update fails
-        }
-    }
     async handleCameraSwitch(cameraId) {
         if (this.isSwitchingCamera)
             return; // Prevent multiple simultaneous switches
@@ -2088,6 +2204,10 @@ const JaakStamps = class {
             // Close the selector immediately when user selects a camera
             this.showCameraSelector = false;
             this.isSwitchingCamera = true;
+            this.logger.state('INICIANDO_CAMBIO_CAMARA', {
+                from: this.cameraService.getSelectedCameraId(),
+                to: cameraId
+            });
             // Stop current video stream
             if (this.videoStream) {
                 this.videoStream.getTracks().forEach(track => track.stop());
@@ -2098,17 +2218,21 @@ const JaakStamps = class {
             const newStream = await this.cameraService.setupCamera();
             // Update video element
             await this.initializeVideoStream(newStream);
-            // Update camera info with autofocus data
-            await this.updateCameraInfoWithAutofocus();
+            this.logger.state('CAMBIO_CAMARA_EXITOSO', {
+                newCameraId: cameraId,
+                isRearCamera: this.cameraService.isRearCamera(newStream)
+            });
         }
         catch (error) {
+            this.logger.error('Error al cambiar cámara:', error);
             // Try to restore previous camera if switch failed
             try {
                 const fallbackStream = await this.cameraService.setupCamera();
                 await this.initializeVideoStream(fallbackStream);
             }
             catch (fallbackError) {
-                this.updateStatus('Error al cambiar cámara', 'No se pudo cambiar el dispositivo', 'error');
+                this.logger.error('Error al restaurar cámara anterior:', fallbackError);
+                this.updateStatus('Error al cambiar cámara', 'No se pudo completar el cambio de dispositivo', 'error');
             }
         }
         finally {
@@ -2149,7 +2273,7 @@ const JaakStamps = class {
             this.stateManager.updateCaptureState({ isVideoActive: false, isLoading: false });
         }
         this.isMaskReady = false;
-        this.updateStatus('Captura finalizada', '', 'ready');
+        this.updateStatus('Sesión finalizada', '', 'ready');
         this.detectionBoxes = [];
         this.cleanup();
     }
@@ -2160,6 +2284,7 @@ const JaakStamps = class {
         this.performanceUpdateInterval = window.setInterval(() => {
             this.updatePerformanceMetrics();
         }, 500);
+        this.logger.debug('Monitor de performance inicializado');
     }
     updatePerformanceMetrics() {
         const currentTime = performance.now();
@@ -2202,66 +2327,6 @@ const JaakStamps = class {
         if (detectionsFound > 0) {
             this.performanceMetrics.successfulDetections++;
         }
-        // Update performance history for adaptive frame skipping
-        this.performanceHistory.push(processingTime);
-        if (this.performanceHistory.length > this.PERFORMANCE_HISTORY_SIZE) {
-            this.performanceHistory.shift();
-        }
-    }
-    // Adaptive frame skipping based on performance
-    getAdaptiveFrameSkip() {
-        // Base conditions for high frame skip
-        if (this.consecutiveFailures > 20)
-            return this.MAX_FRAME_SKIP;
-        if (this.performanceMetrics.inferenceTime > 200)
-            return 6;
-        if (this.performanceMetrics.memoryUsage > 200)
-            return 5;
-        // Calculate average processing time
-        if (this.performanceHistory.length > 0) {
-            const avgProcessingTime = this.performanceHistory.reduce((a, b) => a + b, 0) / this.performanceHistory.length;
-            if (avgProcessingTime > 100)
-                return 4;
-            if (avgProcessingTime > 80)
-                return 3;
-            if (avgProcessingTime > 60)
-                return this.BASE_FRAME_SKIP + 1;
-        }
-        // Low memory devices get higher frame skip
-        if (this.performanceMetrics.memoryUsage > 150)
-            return 4;
-        // Performance is good, use base frame skip
-        return this.BASE_FRAME_SKIP;
-    }
-    // Canvas pool management for screenshots
-    getPooledCanvas(width, height) {
-        // Try to find a canvas with matching dimensions
-        const matchingIndex = this.canvasPool.findIndex(canvas => canvas.width === width && canvas.height === height);
-        if (matchingIndex !== -1) {
-            return this.canvasPool.splice(matchingIndex, 1)[0];
-        }
-        // If no matching canvas, try to reuse any canvas and resize
-        if (this.canvasPool.length > 0) {
-            const canvas = this.canvasPool.pop();
-            canvas.width = width;
-            canvas.height = height;
-            return canvas;
-        }
-        // Create new canvas if pool is empty
-        const canvas = document.createElement('canvas');
-        canvas.width = width;
-        canvas.height = height;
-        return canvas;
-    }
-    returnCanvasToPool(canvas) {
-        // Only return to pool if not at max capacity
-        if (this.canvasPool.length < this.MAX_CANVAS_POOL_SIZE) {
-            // Clear the canvas before returning to pool
-            const ctx = canvas.getContext('2d');
-            ctx.clearRect(0, 0, canvas.width, canvas.height);
-            this.canvasPool.push(canvas);
-        }
-        // If pool is full, let the canvas be garbage collected
     }
 };
 JaakStamps.style = myComponentCss;