@jaak.ai/stamps 2.1.0-dev.9 → 2.2.0-beta.1

package/dist/collection/components/my-component/my-component.js

@@ -1,5 +1,6 @@
 import { h } from "@stencil/core";
 import { ServiceContainer } from "../../services/ServiceContainer";
+import { LicenseValidationService } from "../../services/LicenseValidationService";
 export class JaakStamps {
     el;
     debug = false;
@@ -12,8 +13,22 @@ export class JaakStamps {
     captureDelay = 1500;
     enableBackDocumentTimer = false;
     backDocumentTimerDuration = 20;
+    telemetryCollectorUrl = 'https://collector.jaak.ai/v1/traces';
+    metricsCollectorUrl = 'https://collector.jaak.ai/v1/metrics';
+    enableTelemetry = true;
+    enableMetrics = true;
+    customerId;
+    tenantId;
+    environment = 'production';
+    propagateTraceHeaderCorsUrls; // Comma-separated URLs or regex patterns
+    metricsExportIntervalMillis = 60000; // Export metrics every 60 seconds
+    license; // License key for validation
+    licenseEnvironment = 'prod'; // Environment for license validation
+    traceId; // Optional trace ID for tracking
+    appId = 'jaak-stamps-web'; // Application ID for license validation
     captureCompleted;
     isReady;
+    traceIdGenerated;
     // State derived from services
     detectionBoxes = [];
     sideAlignment = {
@@ -53,12 +68,17 @@ export class JaakStamps {
     showPerformanceMessage = false; // Show performance message temporarily
     captureStateVersion = 0; // Triggers re-render when StateManager changes
     processingButton = null; // Track which button is processing
+    licenseValid = true; // License validation status
+    licenseError = null; // License validation error message
     // Services
+    licenseValidationService = null;
     serviceContainer;
     eventBus;
     stateManager;
     cameraService;
     detectionService;
+    tracingService;
+    metricsService;
     // UI References
     videoRef;
     detectionContainer;
@@ -71,6 +91,7 @@ export class JaakStamps {
     alignmentStartTime;
     alignmentTimer;
     backDocumentTimer;
+    orientationTimer;
     // Performance monitoring
     performanceMetrics = {
         fps: 0,
@@ -92,6 +113,7 @@ export class JaakStamps {
     MAX_FAILURES = 30;
     lastInferenceTime = 0;
     MIN_INFERENCE_INTERVAL = 50;
+    MOBILE_MIN_INFERENCE_INTERVAL = 100; // Higher interval for mobile to prevent slow motion
     performanceHistory = [];
     PERFORMANCE_HISTORY_SIZE = 10;
     // Sistema simplificado de monitoreo de rendimiento
@@ -103,8 +125,23 @@ export class JaakStamps {
     // Canvas pool for optimized screenshot capture
     canvasPool = [];
     MAX_CANVAS_POOL_SIZE = 3;
+    async componentWillLoad() {
+        // License is required - always validate
+        // Wait a bit to ensure props are set from attributes
+        await new Promise(resolve => setTimeout(resolve, 50));
+        this.updateStatus('Validando licencia...', 'Verificando autorización de uso', 'initializing');
+        await this.validateLicense();
+        // If license validation failed, stop initialization
+        if (!this.licenseValid) {
+            return;
+        }
+    }
     async componentDidLoad() {
         try {
+            // If license validation failed, stop initialization
+            if (!this.licenseValid) {
+                return;
+            }
             this.updateStatus('Preparando capturador...', 'Configurando herramientas de captura', 'initializing');
             await this.initializeServices();
             this.updateStatus('Preparando funciones...', 'Configurando herramientas de trabajo', 'initializing');
@@ -120,6 +157,10 @@ export class JaakStamps {
         }
     }
     async initializeServices() {
+        // Parse propagateTraceHeaderCorsUrls from comma-separated string
+        const propagateUrls = this.propagateTraceHeaderCorsUrls
+            ? this.propagateTraceHeaderCorsUrls.split(',').map(url => url.trim())
+            : [];
         const config = {
             debug: this.debug,
             alignmentTolerance: this.alignmentTolerance,
@@ -128,13 +169,76 @@ export class JaakStamps {
             useDocumentClassification: this.useDocumentClassification,
             useDocumentDetector: this.useDocumentDetector,
             preferredCamera: this.preferredCamera,
-            captureDelay: this.captureDelay
+            captureDelay: this.captureDelay,
+            telemetryCollectorUrl: this.telemetryCollectorUrl,
+            metricsCollectorUrl: this.metricsCollectorUrl,
+            enableTelemetry: this.enableTelemetry,
+            enableMetrics: this.enableMetrics,
+            customerId: this.customerId,
+            tenantId: this.tenantId,
+            environment: this.environment,
+            propagateTraceHeaderCorsUrls: propagateUrls,
+            metricsExportIntervalMillis: this.metricsExportIntervalMillis
         };
         this.serviceContainer = new ServiceContainer(config);
         this.eventBus = this.serviceContainer.getEventBus();
         this.stateManager = this.serviceContainer.getStateManager();
         this.cameraService = this.serviceContainer.getCameraService();
         this.detectionService = this.serviceContainer.getDetectionService();
+        this.tracingService = this.serviceContainer.getTracingService();
+        this.metricsService = this.serviceContainer.getMetricsService();
+        // Set the custom trace ID if provided via prop
+        if (this.tracingService && this.traceId) {
+            this.tracingService.setSessionTraceId(this.traceId);
+        }
+        // Record component initialization
+        if (this.tracingService) {
+            const span = this.tracingService.startSpan('component.initialize', {
+                'component.debug': this.debug,
+                'component.useDocumentDetector': this.useDocumentDetector,
+                'component.useDocumentClassification': this.useDocumentClassification,
+            });
+            this.tracingService.endSpan(span);
+        }
+    }
+    async validateLicense() {
+        if (!this.license) {
+            console.error('❌ No license provided for JAAK Stamps component');
+            this.licenseError = 'Este componente requiere una licencia válida. Por favor, proporcione una licencia usando el atributo "license".';
+            this.licenseValid = false;
+            this.updateStatus('Error de licencia', 'Licencia no proporcionada', 'error');
+            return;
+        }
+        try {
+            console.log('🔑 Validating license for JAAK Stamps...');
+            // Initialize license validation service
+            this.licenseValidationService = new LicenseValidationService(this.licenseEnvironment);
+            // Validate the license, passing traceId and appId if provided
+            const response = await this.licenseValidationService.validateLicense(this.license, this.traceId, this.appId);
+            if (response && response.access_token) {
+                this.licenseValid = true;
+                this.licenseError = null;
+                console.log('✅ License validated successfully for JAAK Stamps');
+                // Emit the traceId (either provided or generated)
+                if (response.traceId) {
+                    this.traceIdGenerated.emit({ traceId: response.traceId });
+                    console.log('📋 TraceId:', response.traceId);
+                }
+            }
+            else {
+                this.licenseValid = false;
+                this.licenseError = 'La licencia proporcionada no es válida. Por favor, verifique su licencia e intente nuevamente.';
+                this.updateStatus('Error de licencia', 'Licencia inválida', 'error');
+                console.error('❌ Invalid license for JAAK Stamps');
+            }
+        }
+        catch (error) {
+            this.licenseValid = false;
+            const licenseError = error;
+            this.licenseError = licenseError.error_description || 'Error al validar la licencia. Por favor, verifique su conexión e intente nuevamente.';
+            this.updateStatus('Error de licencia', 'Fallo en la validación', 'error');
+            console.error('❌ License validation failed for JAAK Stamps:', error);
+        }
     }
     async setupEventListeners() {
         this.eventBus.on('state-changed', () => {
@@ -174,7 +278,7 @@ export class JaakStamps {
         if (!window.ort) {
             this.updateStatus('Preparando herramientas...', 'Configurando funciones de captura', 'initializing');
             const script = document.createElement('script');
-            script.src = 'https://cdn.jsdelivr.net/npm/onnxruntime-web/dist/ort.min.js';
+            script.src = 'https://cdn.jsdelivr.net/npm/onnxruntime-web@1.23.0/dist/ort.min.js';
             document.head.appendChild(script);
             await new Promise((resolve) => {
                 script.onload = () => {
@@ -255,6 +359,18 @@ export class JaakStamps {
             });
             resizeObserver.observe(this.detectionContainer.parentElement);
         }
+        // Handle mobile device orientation changes
+        window.addEventListener('orientationchange', () => {
+            // Clear any existing orientation timer
+            if (this.orientationTimer) {
+                clearTimeout(this.orientationTimer);
+            }
+            // Add delay to ensure video dimensions are updated after rotation
+            this.orientationTimer = window.setTimeout(() => {
+                this.handleResize();
+                this.orientationTimer = undefined;
+            }, 300);
+        });
     }
     handleResize() {
         if (this.detectionContainer) {
@@ -390,17 +506,31 @@ export class JaakStamps {
         return this.stateManager.isProcessCompleted();
     }
     async startCapture() {
+        const span = this.tracingService?.startSpan('capture.start');
         const readyCheck = this.isComponentReady();
         if (!readyCheck.ready) {
             this.updateStatus(readyCheck.message, 'Espere a que termine la inicialización', readyCheck.status);
+            if (span) {
+                this.tracingService?.setSpanAttribute(span, 'error', true);
+                this.tracingService?.setSpanAttribute(span, 'error.message', readyCheck.message);
+                this.tracingService?.endSpan(span);
+            }
             return { success: false, error: readyCheck.message };
         }
         try {
             await this.startDetection();
+            if (span) {
+                this.tracingService?.setSpanAttribute(span, 'success', true);
+                this.tracingService?.endSpan(span);
+            }
             return { success: true };
         }
         catch (error) {
             this.updateStatus('Error al iniciar captura', error.message, 'error');
+            if (span) {
+                this.tracingService?.recordException(span, error);
+                this.tracingService?.endSpan(span);
+            }
             return { success: false, error: error.message };
         }
     }
@@ -411,13 +541,7 @@ export class JaakStamps {
         }
         try {
             this.exitSession();
-            // Aggressive cleanup when stopping capture
-            const cleanupResult = await this.aggressiveResourceCleanup();
-            return {
-                success: true,
-                resourcesFreed: cleanupResult.freed,
-                cleanupErrors: cleanupResult.errors
-            };
+            return { success: true };
         }
         catch (error) {
             return { success: false, error: error.message };
@@ -504,13 +628,22 @@ export class JaakStamps {
         }
     }
     async preloadModel() {
+        const span = this.tracingService?.startSpan('model.preload');
         const readyCheck = this.isComponentReady();
         if (!readyCheck.ready) {
             this.updateStatus(readyCheck.message, 'Espere a que termine la inicialización', readyCheck.status);
+            if (span) {
+                this.tracingService?.setSpanAttribute(span, 'error', true);
+                this.tracingService?.endSpan(span);
+            }
             return { success: false, error: readyCheck.message };
         }
         if (this.detectionService.isModelLoaded()) {
             this.updateStatus('Reconocimiento listo', '', 'ready');
+            if (span) {
+                this.tracingService?.setSpanAttribute(span, 'cached', true);
+                this.tracingService?.endSpan(span);
+            }
             return { success: true, message: 'Model already loaded' };
         }
         try {
@@ -520,17 +653,31 @@ export class JaakStamps {
                 this.stateManager.updateCaptureState({ isLoading: true });
             }
             try {
+                const detectionStartTime = performance.now();
+                const modelSpan = this.tracingService?.startSpan('model.detection.load');
                 await this.detectionService.loadModel();
+                if (modelSpan)
+                    this.tracingService?.endSpan(modelSpan);
+                const detectionLoadTime = performance.now() - detectionStartTime;
+                this.metricsService?.recordModelLoad('detection', detectionLoadTime, false);
             }
             catch (modelError) {
+                this.metricsService?.recordError('model_load_failed', 'detection');
                 this.switchToManualModeWithError('Error al cargar modelo de detección');
                 throw modelError;
             }
             this.updateStatus('Optimizando detección...', 'Configurando reconocimiento de documentos', 'loading');
             try {
+                const classificationStartTime = performance.now();
+                const classSpan = this.tracingService?.startSpan('model.classification.load');
                 await this.detectionService.loadClassificationModel();
+                if (classSpan)
+                    this.tracingService?.endSpan(classSpan);
+                const classificationLoadTime = performance.now() - classificationStartTime;
+                this.metricsService?.recordModelLoad('classification', classificationLoadTime, false);
             }
             catch (classificationError) {
+                this.metricsService?.recordError('model_load_failed', 'classification');
                 this.switchToManualModeWithError('Error al cargar modelo de clasificación');
                 throw classificationError;
             }
@@ -540,6 +687,9 @@ export class JaakStamps {
             if (this.debug) {
                 this.recordOnnxPerformance(loadTime, 0);
             }
+            if (span) {
+                this.tracingService?.setSpanAttribute(span, 'loadTime', loadTime);
+            }
             this.updateStatus('Finalizando configuración...', 'Preparando herramientas para captura', 'loading');
             await new Promise(resolve => setTimeout(resolve, 300));
             this.updateStatus('Reconocimiento preparado', '', 'ready');
@@ -547,6 +697,10 @@ export class JaakStamps {
                 this.stateManager.updateCaptureState({ isLoading: false });
             }
             this.emitReadyEvent();
+            if (span) {
+                this.tracingService?.setSpanAttribute(span, 'success', true);
+                this.tracingService?.endSpan(span);
+            }
             return { success: true, message: 'Models preloaded successfully' };
         }
         catch (error) {
@@ -554,6 +708,10 @@ export class JaakStamps {
             if (this.stateManager) {
                 this.stateManager.updateCaptureState({ isLoading: false });
             }
+            if (span) {
+                this.tracingService?.recordException(span, error);
+                this.tracingService?.endSpan(span);
+            }
             return { success: false, error: error.message };
         }
     }
@@ -642,65 +800,11 @@ export class JaakStamps {
         // Always allow getting capture delay, even during initialization
         return this.captureDelay;
     }
-    async getResourceReport() {
-        // Public method to get resource usage report
-        return this.getResourceReportInternal();
-    }
-    async forceResourceCleanup() {
-        // Public method to force aggressive resource cleanup
-        const readyCheck = this.isComponentReady();
-        if (!readyCheck.ready) {
-            return { success: false, error: readyCheck.message };
-        }
-        try {
-            const cleanupResult = await this.aggressiveResourceCleanup();
-            return {
-                success: true,
-                resourcesFreed: cleanupResult.freed,
-                errors: cleanupResult.errors,
-                timestamp: new Date().toISOString()
-            };
-        }
-        catch (error) {
-            return { success: false, error: error.message };
-        }
-    }
     // Memory and device capability detection
     checkDeviceCapabilities() {
         const deviceMemory = navigator.deviceMemory;
-        const hardwareConcurrency = navigator.hardwareConcurrency || 1;
-        const isLowEndDevice = hardwareConcurrency <= 2;
-        const isMobile = /Android|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent);
-        const isSafari = /Safari/.test(navigator.userAgent) && !/Chrome/.test(navigator.userAgent);
-        // Si tenemos info de memoria del dispositivo
-        if (deviceMemory && deviceMemory < 4) {
-            return {
-                canUseML: false,
-                reason: `Memoria del dispositivo (${deviceMemory}GB) insuficiente para detección automática. Modo manual activado para mejor rendimiento.`,
-                memoryMB: deviceMemory * 1024
-            };
-        }
-        // Dispositivos móviles de gama baja
-        if (isMobile && isLowEndDevice) {
-            return {
-                canUseML: false,
-                reason: 'Dispositivo móvil optimizado detectado. Modo manual activado para mejor rendimiento y duración de batería.',
-                memoryMB: null
-            };
-        }
-        // Safari moderno soporta WASM, solo bloquearlo en versiones muy antiguas
-        if (isSafari) {
-            const safariMatch = navigator.userAgent.match(/Version\/(\d+)/);
-            const safariVersion = safariMatch ? parseInt(safariMatch[1]) : 0;
-            // Solo bloquear Safari muy antiguo (< version 14)
-            if (safariVersion > 0 && safariVersion < 14) {
-                return {
-                    canUseML: false,
-                    reason: 'Safari antiguo detectado. Modo manual activado por compatibilidad.',
-                    memoryMB: null
-                };
-            }
-        }
+        // Siempre intentar usar ML, independientemente del dispositivo
+        // Las restricciones anteriores no eran confiables
         return {
             canUseML: true,
             reason: 'Dispositivo compatible con detección automática.',
@@ -826,6 +930,12 @@ export class JaakStamps {
                 this.videoRef.onloadedmetadata = async () => {
                     await this.videoRef.play();
                     this.stateManager.updateCaptureState({ isVideoActive: true });
+                    // Recalculate mask dimensions when new camera stream loads
+                    if (this.detectionContainer) {
+                        const container = this.detectionContainer.parentElement;
+                        const rect = container.getBoundingClientRect();
+                        this.updateMaskDimensions(rect);
+                    }
                     resolve();
                 };
             });
@@ -868,9 +978,14 @@ export class JaakStamps {
                 return;
             }
             this.frameSkipCounter = 0;
-            // Throttle inference
+            // Throttle inference - use higher interval for mobile devices to prevent slow motion effect
             const currentTime = Date.now();
-            if (currentTime - this.lastInferenceTime < this.MIN_INFERENCE_INTERVAL) {
+            const isMobileDevice = this.cameraInfoWithAutofocus.deviceType === 'mobile' ||
+                /Android|iPhone|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent);
+            const isTablet = this.cameraInfoWithAutofocus.deviceType === 'tablet' ||
+                (/iPad|Android/i.test(navigator.userAgent) && window.innerWidth >= 768);
+            const minInterval = (isMobileDevice && !isTablet) ? this.MOBILE_MIN_INFERENCE_INTERVAL : this.MIN_INFERENCE_INTERVAL;
+            if (currentTime - this.lastInferenceTime < minInterval) {
                 if (captureState.step !== 'completed') {
                     this.animationId = requestAnimationFrame(() => this.detectFrame());
                 }
@@ -997,6 +1112,10 @@ export class JaakStamps {
             clearTimeout(this.alignmentTimer);
             this.alignmentTimer = undefined;
         }
+        if (this.orientationTimer) {
+            clearTimeout(this.orientationTimer);
+            this.orientationTimer = undefined;
+        }
         // Liberar recursos de ONNX al limpiar el componente
         this.releaseOnnxResources();
         if (this.performanceUpdateInterval) {
@@ -1005,182 +1124,11 @@ export class JaakStamps {
         }
         // Clear canvas pool
         this.canvasPool = [];
-        // Clean DOM references and memory leaks
-        this.cleanupDOMReferences();
         this.detectionBoxes = [];
         this.alignmentStartTime = undefined;
         this.hasDocumentDetected = false;
         this.serviceContainer?.cleanup();
     }
-    // AGGRESSIVE RESOURCE CLEANUP METHODS
-    // Clean DOM references and memory leaks
-    cleanupDOMReferences() {
-        // Remove event listeners that could maintain references
-        if (this.videoRef) {
-            // Remove common event listeners (if any were added)
-            this.videoRef.srcObject = null;
-            this.videoRef = undefined;
-        }
-        // Clean detection container
-        if (this.detectionContainer) {
-            this.detectionContainer = undefined;
-        }
-        // Clean references to images in the DOM and revoke blob URLs
-        const images = this.el.shadowRoot?.querySelectorAll('img');
-        images?.forEach(img => {
-            if (img.src.startsWith('blob:')) {
-                URL.revokeObjectURL(img.src);
-            }
-            img.src = '';
-        });
-    }
-    // Clear browser cache and storage
-    async clearBrowserCache() {
-        try {
-            // 1. Clear Service Worker cache if exists
-            if ('serviceWorker' in navigator) {
-                const registrations = await navigator.serviceWorker.getRegistrations();
-                await Promise.all(registrations.map(registration => registration.unregister()));
-            }
-            // 2. Clear Cache API specific to the component
-            const cacheNames = await caches.keys();
-            const componentCaches = cacheNames.filter(name => name.includes('jaak') || name.includes('stamps'));
-            await Promise.all(componentCaches.map(cacheName => caches.delete(cacheName)));
-            // 3. Force garbage collection if available (only in dev)
-            if (this.debug && window.gc) {
-                window.gc();
-            }
-        }
-        catch (error) {
-            console.warn('Error clearing browser cache:', error);
-        }
-    }
-    // Clear local storage specific to the component
-    async clearLocalStorage() {
-        try {
-            // Clear localStorage specific to the component
-            const keysToRemove = [];
-            for (let i = 0; i < localStorage.length; i++) {
-                const key = localStorage.key(i);
-                if (key && (key.includes('jaak') || key.includes('onnx') || key.includes('stamps'))) {
-                    keysToRemove.push(key);
-                }
-            }
-            keysToRemove.forEach(key => localStorage.removeItem(key));
-            // Clear sessionStorage
-            const sessionKeysToRemove = [];
-            for (let i = 0; i < sessionStorage.length; i++) {
-                const key = sessionStorage.key(i);
-                if (key && (key.includes('jaak') || key.includes('onnx'))) {
-                    sessionKeysToRemove.push(key);
-                }
-            }
-            sessionKeysToRemove.forEach(key => sessionStorage.removeItem(key));
-        }
-        catch (error) {
-            console.warn('Error clearing local storage:', error);
-        }
-    }
-    // Aggressive resource cleanup combining all strategies
-    async aggressiveResourceCleanup() {
-        const freed = [];
-        const errors = [];
-        try {
-            // 1. Release ONNX resources
-            this.releaseOnnxResources();
-            freed.push('ONNX models');
-            // 2. Clear model cache in detection service
-            if (this.detectionService) {
-                await this.detectionService.clearModelCache();
-                freed.push('Model cache');
-            }
-            // 3. Clear browser cache
-            await this.clearBrowserCache();
-            freed.push('Browser cache');
-            // 4. Clear local storage
-            await this.clearLocalStorage();
-            freed.push('Local storage');
-            // 5. Clean DOM references
-            this.cleanupDOMReferences();
-            freed.push('DOM references');
-            // 6. Optimize canvas pools
-            if (this.detectionService) {
-                this.detectionService.optimizeCanvasPool(0);
-                freed.push('Canvas pools');
-            }
-            // 7. Clear component canvas pool
-            this.canvasPool = [];
-            freed.push('Component canvas pool');
-            // 8. Force garbage collection (if available)
-            if (this.debug && window.gc) {
-                window.gc();
-                freed.push('Garbage collection');
-            }
-        }
-        catch (error) {
-            errors.push(error.message);
-        }
-        return { freed, errors };
-    }
-    // Progressive resource release after front capture
-    async onFrontCaptureComplete() {
-        try {
-            // Release classification model if not needed for back
-            if (this.detectionService && !this.useDocumentClassification) {
-                await this.detectionService.releaseMobileNetResources();
-            }
-            // Optimize canvas pool to minimum needed for back capture
-            if (this.detectionService) {
-                this.detectionService.optimizeCanvasPool(1);
-            }
-            // Reduce component canvas pool
-            while (this.canvasPool.length > 1) {
-                const canvas = this.canvasPool.pop();
-                if (canvas) {
-                    const ctx = canvas.getContext('2d');
-                    if (ctx) {
-                        ctx.clearRect(0, 0, canvas.width, canvas.height);
-                    }
-                }
-            }
-            if (this.debug) {
-                console.log('🧹 Progressive cleanup after front capture completed');
-            }
-        }
-        catch (error) {
-            console.warn('Error in progressive cleanup:', error);
-        }
-    }
-    // Resource reporting for debugging
-    getResourceReportInternal() {
-        const report = {
-            timestamp: new Date().toISOString(),
-            component: {
-                hasVideoStream: !!this.videoStream,
-                hasAnimationFrame: !!this.animationId,
-                canvasPoolSize: this.canvasPool.length,
-                detectionBoxesCount: this.detectionBoxes.length,
-                performanceMonitorActive: !!this.performanceUpdateInterval
-            }
-        };
-        // Add detection service stats if available
-        if (this.detectionService) {
-            report.detectionService = {
-                isModelLoaded: this.detectionService.isModelLoaded(),
-                canvasPoolStats: this.detectionService.getPoolStats()
-            };
-        }
-        // Add memory info if available
-        if ('memory' in performance) {
-            const memInfo = performance.memory;
-            report.memory = {
-                usedJSHeapSize: Math.round(memInfo.usedJSHeapSize / 1048576), // MB
-                totalJSHeapSize: Math.round(memInfo.totalJSHeapSize / 1048576), // MB
-                jsHeapSizeLimit: Math.round(memInfo.jsHeapSizeLimit / 1048576) // MB
-            };
-        }
-        return report;
-    }
     render() {
         const captureState = this.stateManager?.getCaptureState() || {
             isVideoActive: false,
@@ -1191,7 +1139,7 @@ export class JaakStamps {
             isCapturing: false
         };
         const cameraInfo = this.cameraInfoWithAutofocus;
-        return (h("div", { key: 'd32941c10b3b7193b2113691dae712a80315b430', class: "detector-container" }, h("div", { key: '7704c993cb9e6e3d29edf6b0adfe341dc1cc8e04', class: "video-container" }, h("video", { key: '2d0d46f1973c86e91f9fe9ede0aa938326c6071f', ref: el => this.videoRef = el, autoplay: true, muted: true, playsinline: true, class: this.shouldMirrorVideo ? 'mirror' : '', style: { display: captureState.isVideoActive ? 'block' : 'none' } }), h("div", { key: '9d62ea5221271a18938a9f80535ec7d960745ddb', ref: el => this.detectionContainer = el, class: `detection-overlay ${this.shouldMirrorVideo ? 'mirror' : ''}` }, this.debug && this.detectionBoxes.map((box, index) => (h("div", { key: index, class: "detection-box", style: {
+        return (h("div", { key: 'df70f4fa13b2997a19312125c8b236651cb2b81e', class: "detector-container" }, !this.licenseValid && this.licenseError && (h("div", { key: 'c4f7b51515843177bc3063dd7cf9383e3a4c6c73', class: "license-error-container" }, h("div", { key: 'a4a7e95a23690f9f59c971dd2af9bd096ae13ef0', class: "license-error-card" }, h("svg", { key: '6489a82c60fc9c1a7d89c2b3a537c04c1766cbd4', class: "license-error-icon", width: "64", height: "64", viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, h("path", { key: 'b90b16b0ee155c8baeee321237470de7b6fa1ff5', d: "M12 22C12 22 20 18 20 12V5L12 2L4 5V12C4 18 12 22 12 22Z", stroke: "currentColor", "stroke-width": "2", "stroke-linecap": "round", "stroke-linejoin": "round" }), h("path", { key: 'c90ec519befb073208dbc5e30e1237dda7f0a18f', d: "M12 8V12", stroke: "currentColor", "stroke-width": "2", "stroke-linecap": "round" }), h("circle", { key: 'b926e97a83e19c7ca9b66472fedd53b12d22b7d8', cx: "12", cy: "16", r: "0.5", fill: "currentColor", stroke: "currentColor", "stroke-width": "1" })), h("h2", { key: '1f1fce48179331b0150e0c55a6d5efcd0bf95762', class: "license-error-title" }, "Licencia Requerida"), h("p", { key: '1f28787cea92c5160664bd8e445fb514ac55eff4', class: "license-error-message" }, this.licenseError), h("p", { key: '552aecf92fd34fbdd802fc80cdba46596edb115b', class: "license-error-help" }, "Contacte a soporte: ", h("a", { key: '8c44e1e33fbd22a2319acd6c6b27766bec4355f0', href: "mailto:support@jaak.ai" }, "support@jaak.ai")), h("div", { key: 'c2e139fdedcb8e8922f37e915caa7ae3a1b09cb9', class: "license-error-footer" }, "JAAK Stamps")))), this.licenseValid && (h("div", { key: 'c7876bbe35cd28b52433aab6e97de4a0282e25d5', class: "video-container" }, h("video", { key: 'a5fa99c086eb3730ceee7750ece0842539defa3d', ref: el => this.videoRef = el, autoplay: true, muted: true, playsinline: true, class: this.shouldMirrorVideo ? 'mirror' : '', style: { display: captureState.isVideoActive ? 'block' : 'none' } }), h("div", { key: '2c7923dfa706f65cfc3fe71a6ec626cb2ccce7d4', ref: el => this.detectionContainer = el, class: `detection-overlay ${this.shouldMirrorVideo ? 'mirror' : ''}` }, this.debug && this.detectionBoxes.map((box, index) => (h("div", { key: index, class: "detection-box", style: {
                 position: 'absolute',
                 left: `${box.x}px`,
                 top: `${box.y}px`,
@@ -1200,9 +1148,9 @@ export class JaakStamps {
                 border: '2px solid #32406C',
                 pointerEvents: 'none',
                 boxSizing: 'border-box'
-            } })))), this.isMaskReady && (h("div", { key: '38ebb5be5c55a184644411f06fe20221bdbdf693', class: "overlay-mask" }, h("div", { key: '6200c59e7a1212267e7335e1495cf9d9db2bca62', class: "card-outline" }, h("div", { key: 'c5321d2b5c09734cbca69fc8bb7849eef465a0ce', class: "side side-top" }), h("div", { key: 'd73b5afcb6781307460b8827c491673ebbfc40ef', class: "side side-right" }), h("div", { key: '787dfa0792c5a00f8a83feaa423ca22092e0a8bf', class: "side side-bottom" }), h("div", { key: '50736a6b9c7c8847d1dabaa22464e26f284da11e', class: "side side-left" })), !captureState.showFlipAnimation && !captureState.showSuccessAnimation && (h("div", { key: 'ec8cc90cd589e4f713becb57b6787ce4f57318d4', class: `guide-text ${this.showPerformanceMessage ? 'performance-warning-text' : ''}` }, this.getGuideText(captureState.step))), captureState.step === 'back' && !captureState.showFlipAnimation && !captureState.showSuccessAnimation && (h("div", { key: 'd9d391c02855ac754607cbf77c119153d1f6e56f', class: "back-capture-section" }, h("div", { key: 'a3ebe694f74958b7910fc355a66cbf1394fb5a2a', class: "back-capture-buttons" }, (!this.useDocumentDetector || this.performanceDegradedMode) && (h("button", { key: 'bc6baf4e00199dfdd50bbfbf8abbcede0fb719e9', class: "capture-button primary-button", onClick: () => this.takeManualScreenshot(), type: "button", disabled: this.processingButton !== null }, this.processingButton === 'capture-back' && (h("span", { key: '3a56f9132fce454c792818925c8bed5557e69eed', class: "button-spinner" })), "Capturar Reverso")), h("button", { key: '2fe7e44bc91b73581d6333b7c404ec018a390372', class: "skip-button", onClick: () => this.skipBackCapture(), type: "button", disabled: this.processingButton !== null }, this.processingButton === 'skip-back' && (h("span", { key: 'ebb2d40cbcb646c9bd70ebe278b0643f9335779b', class: "button-spinner" })), this.enableBackDocumentTimer && this.backDocumentTimerRemaining > 0
+            } })))), this.isMaskReady && (h("div", { key: '3e1f77d89a00e4ad1519875cacd5c541c9b16f91', class: "overlay-mask" }, h("div", { key: '3c717afa809ef2fa102fdaab3418915602516d39', class: "card-outline" }, h("div", { key: 'd3dcd1a85290f3fb2216b1182dce9a4b62cc59c6', class: "side side-top" }), h("div", { key: '4280c1e0f0900ec69b905a6226c1afe9a0a993ad', class: "side side-right" }), h("div", { key: '9b88c21f5eb28d74872409335cd6ca83a284bd9b', class: "side side-bottom" }), h("div", { key: '46b4ef3fca60fcf807da8f574a43cba7f148165b', class: "side side-left" })), !captureState.showFlipAnimation && !captureState.showSuccessAnimation && (h("div", { key: '2222975293bebfd04fa2d4ac4878bce48fd35880', class: `guide-text ${this.showPerformanceMessage ? 'performance-warning-text' : ''}` }, this.getGuideText(captureState.step))), captureState.step === 'back' && !captureState.showFlipAnimation && !captureState.showSuccessAnimation && (h("div", { key: '836fbeadb849cb9df66e03ef0cb791dd0e179df8', class: "back-capture-section" }, h("div", { key: 'f0e8119b79f30ffd40ae206783a83869196757ac', class: "back-capture-buttons" }, (!this.useDocumentDetector || this.performanceDegradedMode || this.showManualCaptureButton) && (h("button", { key: 'e245e800e2378989bfa011524cca66026ace52d9', class: "capture-button primary-button", onClick: () => this.takeManualScreenshot(), type: "button", disabled: this.processingButton !== null }, this.processingButton === 'capture-back' && (h("span", { key: 'd98a692f9ff883d05e24122b54c4e36f5f96e82f', class: "button-spinner" })), "Capturar Reverso")), h("button", { key: 'c32b7784e2bbb89947219f0d458d0a4d62b5352a', class: "skip-button", onClick: () => this.skipBackCapture(), type: "button", disabled: this.processingButton !== null }, this.processingButton === 'skip-back' && (h("span", { key: 'bb935e91f07c4c1052576c52aa2a82a726877217', class: "button-spinner" })), this.enableBackDocumentTimer && this.backDocumentTimerRemaining > 0
             ? `Saltar reverso (${this.backDocumentTimerRemaining}s)`
-            : 'Saltar reverso')))), captureState.isVideoActive && (h("div", { key: '4373e4f9ab73d93ce32ae52fbdc14f7bcb69e68e', class: "camera-controls" }, h("button", { key: '5d2afe5b71b02d379fe2ec82bd57a86f614fbea6', class: `camera-selector-button ${this.isSwitchingCamera ? 'loading' : ''}`, onClick: () => this.toggleCameraSelector(), type: "button", title: "Seleccionar c\u00E1mara", disabled: this.isSwitchingCamera }, this.isSwitchingCamera ? (h("div", { class: "button-spinner" })) : ('Cámaras')))), this.showCameraSelector && cameraInfo.availableCameras.length > 0 && (h("div", { key: '4fe5e10260a1299a0dc8517646bed8134fe38d9a', class: "camera-selector-dropdown" }, h("div", { key: 'b041acd0b0292864d20ad256301e7be714854424', class: "camera-selector-header" }, h("span", { key: '2769170dc9ce382b420a719cad6f9bb1f5e4420f' }, "Seleccionar C\u00E1mara"), h("button", { key: '0c54f73bb29041ba88e1838c5b1c8a54eafdc67d', class: "close-selector", onClick: () => this.toggleCameraSelector(), type: "button" }, "\u00D7")), h("div", { key: 'd72ae015c5e89cc3396c14406591308eda4d4c4a', class: "camera-list" }, cameraInfo.availableCameras.map((camera) => (h("button", { key: camera.id, class: `camera-option ${cameraInfo.selectedCameraId === camera.id ? 'selected' : ''}`, onClick: () => this.handleCameraSwitch(camera.id), type: "button" }, h("span", { class: "camera-label" }, camera.label || `Cámara ${cameraInfo.availableCameras.indexOf(camera) + 1}`, camera.hasAutofocus && (h("span", { class: "autofocus-icon", title: "Autofoco disponible" }, "\u29BF"))), cameraInfo.selectedCameraId === camera.id && (h("span", { class: "selected-indicator" }, "\u2713")))))), h("div", { key: '5933bb5c8345debf2eb78fc2cd3900cb09a29335', class: "device-info" }, h("small", { key: 'a126d886feaede4f9657abee9b45d1eff1910e25' }, "Dispositivo: ", cameraInfo.deviceType)))), this.showManualCaptureButton && captureState.step === 'front' && !captureState.showFlipAnimation && !captureState.showSuccessAnimation && (h("div", { key: '62ab98c6afa629583ff13f1792422ef1c5012883', class: "manual-capture-section" }, h("button", { key: '93a42f7b0626a63ab795652eb9eb81657f4fec13', class: "manual-capture-button", onClick: () => this.takeManualScreenshot(), type: "button", disabled: this.processingButton !== null }, this.processingButton === 'capture-front' && (h("span", { key: '77b5aaf62edab4fe8eb68f37083121d9f8493797', class: "button-spinner" })), "Capturar Frente"))))), captureState.isCapturing && (h("div", { key: '399242238fd4a2a4985af0f30faed504d73a0adc', class: "capture-animation" })), captureState.showFlipAnimation && (h("div", { key: '06add02bc244511dc0dc82bf206f41d9ce3cdcd3', class: "flip-animation" }, h("div", { key: 'e3949d8e41bc496bf503d1dcd34df53d2bf876aa', class: "id-card-icon" }), h("div", { key: 'e8ebdd9d29e0b33dcfc506b40e67e0d4af8cb0bb', class: "flip-text" }, "\u00A1Voltea tu identificaci\u00F3n!"))), captureState.showSuccessAnimation && (h("div", { key: 'f72f6fc4d42c7b10d98c8aff7541596afe131883', class: "success-animation" }, h("div", { key: '8d0d422b37caa97f695f62c0094c52c3c12c7bda', class: "check-icon" }), h("div", { key: 'd9d673dbfd2af4a1b8ca1a775e5b318326d70446', class: "success-text" }, "\u00A1Proceso completado!"))), h("div", { key: 'fdfa1239ddea40bbbabf032542a7160fae3f3c96', class: `component-status status-${this.currentStatus.type}` }, (this.currentStatus.type === 'loading' || this.currentStatus.type === 'initializing') && (h("div", { key: '34bb9d5b83e4383c4f640ccf11189484514e4efd', class: "status-spinner" })), h("div", { key: '131bcd252fc7e1f6eb27332d64fd249b5889aa9d', class: "status-content" }, h("div", { key: '911b7324456e84842fa3c14c9a6fd3ba475804cf', class: "status-message" }, this.currentStatus.message), this.currentStatus.description && (h("div", { key: 'e938b9294ee3c6125b133bf737caa4a33a016872', class: "status-description" }, this.currentStatus.description)))), this.debug && (h("div", { key: 'cab385a12f6ccf8579d2d073c1ed987bf815efeb', class: "performance-monitor" }, h("div", { key: '903f8a7005a98c4b99eb7d4c91662911cee8beae', class: "performance-expanded" }, h("div", { key: 'f1ba17573d53442a23212e2c8fdd132bd3ddf4f0', class: "metrics-row" }, h("div", { key: '71357107dcc19749e5af2d5668df535db65cb986', class: "metric-compact" }, h("span", { key: '9ad542fb9445340c669c3d18fc293e2364fc5dcc', class: "metric-label" }, "FPS"), h("span", { key: 'ab0fb401df5dc792c0a641a574851aec48093862', class: `metric-value ${this.performanceData.fps < 15 ? 'warning' : this.performanceData.fps < 10 ? 'danger' : 'good'}` }, this.performanceData.fps)), h("div", { key: 'a650ab2a1af27829d4a63a264f00907dfba363c6', class: "metric-compact" }, h("span", { key: '56e195b0fd468f2a457a66b2342ed6a80fbef0a0', class: "metric-label" }, "MEM"), h("span", { key: '265445131d4492c6e2f7571d367f52c93e00b711', class: `metric-value ${this.performanceData.memoryUsage > 100 ? 'warning' : this.performanceData.memoryUsage > 200 ? 'danger' : 'good'}` }, this.performanceData.memoryUsage, "MB"))), h("div", { key: '56023a82a1978c7c2f8f08edac729f39efcafa63', class: "metrics-row" }, h("div", { key: '6f1ceb668fc246ec11bfeee3f14c745f21d4986e', class: "metric-compact" }, h("span", { key: '92efba3ee31c5b9a382f1e205584950217482722', class: "metric-label" }, "INF"), h("span", { key: 'fc2baec34fd2f0696a216c487753b94b8bacaf7e', class: `metric-value ${this.performanceData.inferenceTime > 100 ? 'warning' : this.performanceData.inferenceTime > 200 ? 'danger' : 'good'}` }, this.performanceData.inferenceTime, "ms")), h("div", { key: '683eeb875e96c94cf36c403385c2764239fb5a4d', class: "metric-compact" }, h("span", { key: '33ba3f357868f7feaaeefab35e3ecc35d3b5b726', class: "metric-label" }, "FRAME"), h("span", { key: 'f496be674b0328556d27a9a9b2f24ffa50ff76ea', class: `metric-value ${this.performanceData.frameProcessingTime > 50 ? 'warning' : this.performanceData.frameProcessingTime > 100 ? 'danger' : 'good'}` }, this.performanceData.frameProcessingTime, "ms"))), h("div", { key: '521f275481d35c2132dbcf138e4bbda84a0b97b2', class: "metrics-row" }, h("div", { key: '17acc0238696816077b80b66aee317ae9ab20e75', class: "metric-compact" }, h("span", { key: 'cac1a4ee661de14739623a1a6f0149ba72fa918c', class: "metric-label" }, "DET"), h("span", { key: '70071c404c5e50001d813f1f3e0d1002776ed887', class: "metric-value good" }, this.performanceData.successfulDetections, "/", this.performanceData.totalDetections)), h("div", { key: '26a00ad1c95e6c2b8feaafc36103fb7fb869039f', class: "metric-compact" }, h("span", { key: 'a1c7fb80b6795f10111c1ed403de933aadcbe450', class: "metric-label" }, "RATE"), h("span", { key: '49471b7bfa2d6ca6357a39bf611738fd6344764a', class: `metric-value ${this.performanceData.detectionRate < 30 ? 'danger' : this.performanceData.detectionRate < 60 ? 'warning' : 'good'}` }, this.performanceData.detectionRate, "%")))))), h("div", { key: '3870b7399d2d5068e7f59177225476b00bef7fc7', class: "watermark" }, h("img", { key: '5030e9f14eebd4546207ced129d7d00d85abb189', src: "https://storage.googleapis.com/jaak-static/commons/powered-by-jaak.png", alt: "Powered by Jaak" })))));
+            : 'Saltar reverso')))), captureState.isVideoActive && (h("div", { key: '471a1292e9d093cce0a0d3fa7f96f3665de749fb', class: "camera-controls" }, h("button", { key: '406911235a06723310ff577c27e3858912e522c4', class: `camera-selector-button ${this.isSwitchingCamera ? 'loading' : ''}`, onClick: () => this.toggleCameraSelector(), type: "button", title: "Seleccionar c\u00E1mara", disabled: this.isSwitchingCamera }, this.isSwitchingCamera ? (h("div", { class: "button-spinner" })) : ('Cámaras')))), this.showCameraSelector && cameraInfo.availableCameras.length > 0 && (h("div", { key: 'b8fd729b78a3c5cb52b7f17d031bb12b894aaf41', class: "camera-selector-dropdown" }, h("div", { key: '2b9b451440d6b6be4103419694ff6a53c92e68ad', class: "camera-selector-header" }, h("span", { key: '2271f4694aa6c0b32ab23a02a7a8d6d4c1bd4144' }, "Seleccionar C\u00E1mara"), h("button", { key: 'ccfc02eb031da17a4907cd835642785bc2ef5e77', class: "close-selector", onClick: () => this.toggleCameraSelector(), type: "button" }, "\u00D7")), h("div", { key: '073d6e9e09cde8523e926850dfa73704b579c899', class: "camera-list" }, cameraInfo.availableCameras.map((camera) => (h("button", { key: camera.id, class: `camera-option ${cameraInfo.selectedCameraId === camera.id ? 'selected' : ''}`, onClick: () => this.handleCameraSwitch(camera.id), type: "button" }, h("span", { class: "camera-label" }, camera.label || `Cámara ${cameraInfo.availableCameras.indexOf(camera) + 1}`, camera.hasAutofocus && (h("span", { class: "autofocus-icon", title: "Autofoco disponible" }, "\u29BF"))), cameraInfo.selectedCameraId === camera.id && (h("span", { class: "selected-indicator" }, "\u2713")))))), h("div", { key: '8f914f855727a6ab02a2941fee91283bf3882df2', class: "device-info" }, h("small", { key: '295433a43a539034992f04a29355deed12082092' }, "Dispositivo: ", cameraInfo.deviceType)))), this.showManualCaptureButton && captureState.step === 'front' && !captureState.showFlipAnimation && !captureState.showSuccessAnimation && (h("div", { key: 'cc780583a636e7d4910851789710837c9e188d40', class: "manual-capture-section" }, h("button", { key: '40c5e212a3a4eab4d2edf44e29e6b4fe0e4c5e37', class: "manual-capture-button", onClick: () => this.takeManualScreenshot(), type: "button", disabled: this.processingButton !== null }, this.processingButton === 'capture-front' && (h("span", { key: '1245a13523250b5959a1c303ca20662c2d6750c7', class: "button-spinner" })), "Capturar Frente"))))), captureState.isCapturing && (h("div", { key: '10a0a26b346ecf0945688f82292720871f8dc0b7', class: "capture-animation" })), captureState.showFlipAnimation && (h("div", { key: '68dc7effe82d2f043d778239e2aecb847d159818', class: "flip-animation" }, h("div", { key: '153e0c2229c39c5b9402b9610eaee586d98f84c1', class: "id-card-icon" }), h("div", { key: 'b60b249c43ac5f8417c15b8ce46f60d2cb3134d5', class: "flip-text" }, "\u00A1Voltea tu identificaci\u00F3n!"))), captureState.showSuccessAnimation && (h("div", { key: 'fefa7bf80546a463a54a275e425241545ace5c77', class: "success-animation" }, h("div", { key: 'cda9d64b3b30cc636d976c2c644a927a8ebe341e', class: "check-icon" }), h("div", { key: 'fd00554df841cdb6e1a167b7e6cc4a6b9b60957a', class: "success-text" }, "\u00A1Proceso completado!"))), h("div", { key: 'cd5fa1fbfa5e3a4e362281553dde2c37601b1078', class: `component-status status-${this.currentStatus.type}` }, (this.currentStatus.type === 'loading' || this.currentStatus.type === 'initializing') && (h("div", { key: 'cb0d76938d8ccab99632920ffc9d73a1fa7dec79', class: "status-spinner" })), h("div", { key: 'bcfdc2a24e12dc0bcc19ae0d647be5ce810994d5', class: "status-content" }, h("div", { key: 'a4b6dad22b40aed65a9c81e9581e61a9ca064e40', class: "status-message" }, this.currentStatus.message), this.currentStatus.description && (h("div", { key: '236084444d4d156b672f823349f95b462a8a9bba', class: "status-description" }, this.currentStatus.description)))), this.debug && (h("div", { key: '7423d6c8c7e37b7baffc27fc243536e2659475cc', class: "performance-monitor" }, h("div", { key: '892736f4be3d1cd563ec919c5a504ca8e0d55db0', class: "performance-expanded" }, h("div", { key: 'aa0464f739f838ac4c9e553c79f4c7815f7f65cf', class: "metrics-row" }, h("div", { key: '5dca0c5fe0f91ecfaa25c5775c18a99d53eb8f73', class: "metric-compact" }, h("span", { key: '8e498b185cdefb97286356b56e45dc7b514f667e', class: "metric-label" }, "FPS"), h("span", { key: '3a90611c84b338314ae1503aef6208c67d1282ff', class: `metric-value ${this.performanceData.fps < 15 ? 'warning' : this.performanceData.fps < 10 ? 'danger' : 'good'}` }, this.performanceData.fps)), h("div", { key: '568e492ef7dad971f1613132028999a81f38f457', class: "metric-compact" }, h("span", { key: '222fd2b522dd9f7172ad9adb442b10c1ce4c6455', class: "metric-label" }, "MEM"), h("span", { key: '8cbe2cf9fd7dd9e22e9a0df6f214165a09e03045', class: `metric-value ${this.performanceData.memoryUsage > 100 ? 'warning' : this.performanceData.memoryUsage > 200 ? 'danger' : 'good'}` }, this.performanceData.memoryUsage, "MB"))), h("div", { key: 'e5d946afd1cc80a15a52c9ba1cb252e6e146e929', class: "metrics-row" }, h("div", { key: '65aaaa92e3ce7b5567560d94f98e16226ecf9fd5', class: "metric-compact" }, h("span", { key: '80c6ad0923e729912274a05fffca039e88aa5719', class: "metric-label" }, "INF"), h("span", { key: '4a87270ebdad3be718b86d1382b2a54092e53a16', class: `metric-value ${this.performanceData.inferenceTime > 100 ? 'warning' : this.performanceData.inferenceTime > 200 ? 'danger' : 'good'}` }, this.performanceData.inferenceTime, "ms")), h("div", { key: '41ddc923cdfab0012a2f5d3e19aee33dad6116fe', class: "metric-compact" }, h("span", { key: '84e9f4fb3d5bf60235d71d61dc1d6a8ad429293c', class: "metric-label" }, "FRAME"), h("span", { key: '88fd6964307399ac1547c7086f489af90a92a925', class: `metric-value ${this.performanceData.frameProcessingTime > 50 ? 'warning' : this.performanceData.frameProcessingTime > 100 ? 'danger' : 'good'}` }, this.performanceData.frameProcessingTime, "ms"))), h("div", { key: '22409e8dfb349e66ac54c20c6043b414b7ddba34', class: "metrics-row" }, h("div", { key: 'bbe72cb477f4bc313e7978d98c217a4789765df1', class: "metric-compact" }, h("span", { key: '56df43d72df8d3549fa42b2bc32fa5491c3cdb41', class: "metric-label" }, "DET"), h("span", { key: '7ceedb73086eccaed0e25177d76218e9bae1262d', class: "metric-value good" }, this.performanceData.successfulDetections, "/", this.performanceData.totalDetections)), h("div", { key: '9407541b4f975b20843c19e7081d1c26bb3f4fd4', class: "metric-compact" }, h("span", { key: '511ffc66436ffe2f14300122213de11f50fbbc30', class: "metric-label" }, "RATE"), h("span", { key: '6a0c864b46314937043831be7646fbfa3d994c86', class: `metric-value ${this.performanceData.detectionRate < 30 ? 'danger' : this.performanceData.detectionRate < 60 ? 'warning' : 'good'}` }, this.performanceData.detectionRate, "%")))))), h("div", { key: '72f26e4248c87e428a10bbd7b67bd77a9a32f321', class: "watermark" }, h("img", { key: '32e3f23ca1ff81699dd2a4922f8f7d4aeaa3cc2b', src: "https://storage.googleapis.com/jaak-static/commons/powered-by-jaak.png", alt: "Powered by Jaak" }))))));
     }
     // Utility methods
     updateDetectionBoxes(boxes) {
@@ -1319,24 +1267,44 @@ export class JaakStamps {
     }
     async takeManualScreenshot() {
         console.log('🔵 Botón clicked: Capturar (Frente/Reverso)');
+        const captureStartTime = performance.now();
+        const span = this.tracingService?.startSpan('capture.screenshot.manual');
         // Set processing state immediately
         const captureState = this.stateManager?.getCaptureState();
+        const side = captureState?.step === 'front' ? 'front' : 'back';
         if (captureState?.step === 'front') {
             this.processingButton = 'capture-front';
+            if (span)
+                this.tracingService?.setSpanAttribute(span, 'side', 'front');
         }
         else if (captureState?.step === 'back') {
             this.processingButton = 'capture-back';
+            if (span)
+                this.tracingService?.setSpanAttribute(span, 'side', 'back');
         }
+        // Record user interaction
+        this.metricsService?.recordUserInteraction('manual_capture_button');
         console.log('🔵 processingButton set to:', this.processingButton);
         // Add small delay to show spinner
         await new Promise(resolve => setTimeout(resolve, 100));
         if (!this.videoRef) {
             this.processingButton = null;
+            if (span) {
+                this.tracingService?.setSpanAttribute(span, 'error', 'no_video_ref');
+                this.tracingService?.endSpan(span);
+            }
             return;
         }
         // When using manual capture, use mask coordinates for cropping
         // Note: processingButton will be cleared inside takeScreenshotWithMaskCoordinates
         await this.takeScreenshotWithMaskCoordinates();
+        // Record metrics
+        const captureDuration = performance.now() - captureStartTime;
+        this.metricsService?.recordCapture(side, 'manual', captureDuration);
+        if (span) {
+            this.tracingService?.setSpanAttribute(span, 'success', true);
+            this.tracingService?.endSpan(span);
+        }
     }
     async takeScreenshotWithMaskCoordinates() {
         if (!this.videoRef || !this.detectionContainer)
@@ -1399,8 +1367,8 @@ export class JaakStamps {
         if (captureState.step === 'front') {
             this.stateManager.setCapturedImages({
                 front: {
-                    fullFrame: captureCanvas.toDataURL('image/png'),
-                    cropped: croppedCanvas.toDataURL('image/png')
+                    fullFrame: captureCanvas.toDataURL('image/jpeg'),
+                    cropped: croppedCanvas.toDataURL('image/jpeg')
                 }
             });
             // Check if document classification is enabled (independent of detector)
@@ -1426,8 +1394,6 @@ export class JaakStamps {
                 showFlipAnimation: true
             });
             this.triggerRerender();
-            // Progressive resource cleanup after front capture
-            await this.onFrontCaptureComplete();
             setTimeout(() => {
                 this.stateManager.updateCaptureState({
                     showFlipAnimation: false,
@@ -1442,8 +1408,8 @@ export class JaakStamps {
         else if (captureState.step === 'back') {
             this.stateManager.setCapturedImages({
                 back: {
-                    fullFrame: captureCanvas.toDataURL('image/png'),
-                    cropped: croppedCanvas.toDataURL('image/png')
+                    fullFrame: captureCanvas.toDataURL('image/jpeg'),
+                    cropped: croppedCanvas.toDataURL('image/jpeg')
                 }
             });
             this.completeProcess(false);
@@ -1457,6 +1423,8 @@ export class JaakStamps {
     async takeScreenshot() {
         if (!this.videoRef || !this.lastDetectedBox)
             return;
+        const captureStartTime = performance.now();
+        const span = this.tracingService?.startSpan('capture.screenshot.auto');
         this.stateManager.updateCaptureState({ isCapturing: true });
         this.triggerCaptureAnimation();
         // Use pooled canvas for optimization
@@ -1479,17 +1447,30 @@ export class JaakStamps {
         croppedCtx.drawImage(this.videoRef, cropX, cropY, cropWidth, cropHeight, 0, 0, cropWidth, cropHeight);
         const captureState = this.stateManager.getCaptureState();
         if (captureState.step === 'front') {
+            const frontImageData = captureCanvas.toDataURL('image/jpeg');
+            const croppedImageData = croppedCanvas.toDataURL('image/jpeg');
             this.stateManager.setCapturedImages({
                 front: {
-                    fullFrame: captureCanvas.toDataURL('image/png'),
-                    cropped: croppedCanvas.toDataURL('image/png')
+                    fullFrame: frontImageData,
+                    cropped: croppedImageData
                 }
             });
+            // Record metrics
+            const captureDuration = performance.now() - captureStartTime;
+            this.metricsService?.recordCapture('front', 'auto', captureDuration);
+            this.metricsService?.recordImageSize('front', frontImageData.length);
+            if (span) {
+                this.tracingService?.setSpanAttribute(span, 'side', 'front');
+            }
             // Check if document classification is enabled
             if (this.useDocumentClassification) {
                 try {
                     const classification = await this.detectionService.classifyDocument(croppedCanvas);
                     if (classification && classification.class === 'passport') {
+                        if (span) {
+                            this.tracingService?.setSpanAttribute(span, 'document.type', 'passport');
+                            this.tracingService?.endSpan(span);
+                        }
                         this.completeProcess(true);
                         return;
                     }
@@ -1503,8 +1484,9 @@ export class JaakStamps {
                 isDetectionPaused: true,
                 showFlipAnimation: true
             });
-            // Progressive resource cleanup after front capture
-            await this.onFrontCaptureComplete();
+            if (span) {
+                this.tracingService?.endSpan(span);
+            }
             setTimeout(() => {
                 this.stateManager.updateCaptureState({
                     showFlipAnimation: false,
@@ -1514,12 +1496,22 @@ export class JaakStamps {
             }, 3000);
         }
         else if (captureState.step === 'back') {
+            const backImageData = captureCanvas.toDataURL('image/jpeg');
+            const croppedBackImageData = croppedCanvas.toDataURL('image/jpeg');
             this.stateManager.setCapturedImages({
                 back: {
-                    fullFrame: captureCanvas.toDataURL('image/png'),
-                    cropped: croppedCanvas.toDataURL('image/png')
+                    fullFrame: backImageData,
+                    cropped: croppedBackImageData
                 }
             });
+            // Record metrics
+            const captureDuration = performance.now() - captureStartTime;
+            this.metricsService?.recordCapture('back', 'auto', captureDuration);
+            this.metricsService?.recordImageSize('back', backImageData.length);
+            if (span) {
+                this.tracingService?.setSpanAttribute(span, 'side', 'back');
+                this.tracingService?.endSpan(span);
+            }
             this.completeProcess(false);
         }
         // Return canvases to pool after use
@@ -1643,10 +1635,13 @@ export class JaakStamps {
         this.useDocumentDetector = false; // Desactivar detector automático
         // Actualizar el estado con mensaje de error
         this.updateStatus('Modo manual activado', errorMessage, 'error');
-        // Ocultar mensaje después de 5 segundos
-        setTimeout(() => {
-            this.updateStatus('Captura manual', 'Use el botón para capturar', 'ready');
-        }, 5000);
+        // Continuar con la configuración de cámara para mostrar el video
+        this.continueWithCameraSetup().catch(() => {
+            // Si falla la configuración de cámara, mantener el mensaje de error pero cambiar el estado
+            setTimeout(() => {
+                this.updateStatus('Captura manual', 'Use el botón para capturar', 'ready');
+            }, 5000);
+        });
     }
     stopPerformanceMonitoring() {
         // Nota: No necesitamos limpiar más variables porque ya no se usarán
@@ -1663,7 +1658,7 @@ export class JaakStamps {
         catch (error) {
         }
     }
-    completeProcess(skippedBack = false) {
+    async completeProcess(skippedBack = false) {
         this.stateManager.updateCaptureState({
             step: 'completed',
             showSuccessAnimation: true
@@ -1678,20 +1673,19 @@ export class JaakStamps {
             ...capturedImages,
             timestamp: new Date().toISOString()
         };
+        // Flush all traces to collector before emitting capture completed
+        if (this.tracingService) {
+            try {
+                await this.tracingService.flush();
+            }
+            catch (error) {
+                console.error('[my-component] Failed to flush traces:', error);
+            }
+        }
         this.captureCompleted.emit(finalImages);
         setTimeout(() => {
             this.stateManager.updateCaptureState({ showSuccessAnimation: false });
         }, 3000);
-        // Aggressive cleanup after process completion with delay
-        setTimeout(async () => {
-            const cleanupResult = await this.aggressiveResourceCleanup();
-            if (this.debug) {
-                console.log('🧹 Post-completion cleanup:', cleanupResult.freed);
-                if (cleanupResult.errors.length > 0) {
-                    console.warn('⚠️ Cleanup errors:', cleanupResult.errors);
-                }
-            }
-        }, 1000); // Wait 1 second after completion
     }
     stopDetection() {
         if (this.animationId) {
@@ -1743,6 +1737,12 @@ export class JaakStamps {
         try {
             // Close the selector immediately when user selects a camera
             this.showCameraSelector = false;
+            // Check if user selected the same camera that's already active
+            const currentCameraId = this.cameraService.getSelectedCameraId();
+            if (currentCameraId === cameraId) {
+                // Same camera selected, just close the selector without switching
+                return;
+            }
             this.isSwitchingCamera = true;
             // Stop current video stream
             if (this.videoStream) {
@@ -1873,28 +1873,35 @@ export class JaakStamps {
     }
     // Adaptive frame skipping based on performance
     getAdaptiveFrameSkip() {
+        // Check if running on mobile device for more aggressive frame skipping
+        const isMobileDevice = this.cameraInfoWithAutofocus.deviceType === 'mobile' ||
+            /Android|iPhone|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent);
+        const isTablet = this.cameraInfoWithAutofocus.deviceType === 'tablet' ||
+            (/iPad|Android/i.test(navigator.userAgent) && window.innerWidth >= 768);
+        // Mobile-specific base frame skip (more aggressive to prevent slow motion effect)
+        const mobileBaseSkip = isMobileDevice && !isTablet ? 4 : this.BASE_FRAME_SKIP;
         // Base conditions for high frame skip
         if (this.consecutiveFailures > 20)
             return this.MAX_FRAME_SKIP;
         if (this.performanceMetrics.inferenceTime > 200)
-            return 6;
+            return Math.max(6, mobileBaseSkip);
         if (this.performanceMetrics.memoryUsage > 200)
-            return 5;
+            return Math.max(5, mobileBaseSkip);
         // 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;
+                return Math.max(4, mobileBaseSkip);
             if (avgProcessingTime > 80)
-                return 3;
+                return Math.max(3, mobileBaseSkip);
             if (avgProcessingTime > 60)
-                return this.BASE_FRAME_SKIP + 1;
+                return Math.max(this.BASE_FRAME_SKIP + 1, mobileBaseSkip);
         }
         // 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;
+            return Math.max(4, mobileBaseSkip);
+        // Mobile devices use higher base frame skip for smoother video
+        return mobileBaseSkip;
     }
     // Método para resetear la máscara a color blanco
     resetMaskToWhite() {
@@ -2157,6 +2164,261 @@ export class JaakStamps {
                 "setter": false,
                 "reflect": false,
                 "defaultValue": "20"
+            },
+            "telemetryCollectorUrl": {
+                "type": "string",
+                "attribute": "telemetry-collector-url",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "defaultValue": "'https://collector.jaak.ai/v1/traces'"
+            },
+            "metricsCollectorUrl": {
+                "type": "string",
+                "attribute": "metrics-collector-url",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "defaultValue": "'https://collector.jaak.ai/v1/metrics'"
+            },
+            "enableTelemetry": {
+                "type": "boolean",
+                "attribute": "enable-telemetry",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "defaultValue": "true"
+            },
+            "enableMetrics": {
+                "type": "boolean",
+                "attribute": "enable-metrics",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "defaultValue": "true"
+            },
+            "customerId": {
+                "type": "string",
+                "attribute": "customer-id",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false
+            },
+            "tenantId": {
+                "type": "string",
+                "attribute": "tenant-id",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false
+            },
+            "environment": {
+                "type": "string",
+                "attribute": "environment",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "defaultValue": "'production'"
+            },
+            "propagateTraceHeaderCorsUrls": {
+                "type": "string",
+                "attribute": "propagate-trace-header-cors-urls",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false
+            },
+            "metricsExportIntervalMillis": {
+                "type": "number",
+                "attribute": "metrics-export-interval-millis",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "defaultValue": "60000"
+            },
+            "license": {
+                "type": "string",
+                "attribute": "license",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false
+            },
+            "licenseEnvironment": {
+                "type": "string",
+                "attribute": "license-environment",
+                "mutable": false,
+                "complexType": {
+                    "original": "'dev' | 'qa' | 'sandbox' | 'prod'",
+                    "resolved": "\"dev\" | \"prod\" | \"qa\" | \"sandbox\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "defaultValue": "'prod'"
+            },
+            "traceId": {
+                "type": "string",
+                "attribute": "trace-id",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false
+            },
+            "appId": {
+                "type": "string",
+                "attribute": "app-id",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "defaultValue": "'jaak-stamps-web'"
             }
         };
     }
@@ -2177,7 +2439,9 @@ export class JaakStamps {
             "performanceDegradedMode": {},
             "showPerformanceMessage": {},
             "captureStateVersion": {},
-            "processingButton": {}
+            "processingButton": {},
+            "licenseValid": {},
+            "licenseError": {}
         };
     }
     static get events() {
@@ -2211,6 +2475,21 @@ export class JaakStamps {
                     "resolved": "boolean",
                     "references": {}
                 }
+            }, {
+                "method": "traceIdGenerated",
+                "name": "traceIdGenerated",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "{traceId: string}",
+                    "resolved": "{ traceId: string; }",
+                    "references": {}
+                }
             }];
     }
     static get methods() {
@@ -2273,7 +2552,7 @@ export class JaakStamps {
             },
             "stopCapture": {
                 "complexType": {
-                    "signature": "() => Promise<{ success: boolean; resourcesFreed: string[]; cleanupErrors: string[]; error?: undefined; } | { success: boolean; error: any; resourcesFreed?: undefined; cleanupErrors?: undefined; }>",
+                    "signature": "() => Promise<{ success: boolean; error?: undefined; } | { success: boolean; error: any; }>",
                     "parameters": [],
                     "references": {
                         "Promise": {
@@ -2281,7 +2560,7 @@ export class JaakStamps {
                             "id": "global::Promise"
                         }
                     },
-                    "return": "Promise<{ success: boolean; resourcesFreed: string[]; cleanupErrors: string[]; error?: undefined; } | { success: boolean; error: any; resourcesFreed?: undefined; cleanupErrors?: undefined; }>"
+                    "return": "Promise<{ success: boolean; error?: undefined; } | { success: boolean; error: any; }>"
                 },
                 "docs": {
                     "text": "",
@@ -2441,40 +2720,6 @@ export class JaakStamps {
                     "text": "",
                     "tags": []
                 }
-            },
-            "getResourceReport": {
-                "complexType": {
-                    "signature": "() => Promise<any>",
-                    "parameters": [],
-                    "references": {
-                        "Promise": {
-                            "location": "global",
-                            "id": "global::Promise"
-                        }
-                    },
-                    "return": "Promise<any>"
-                },
-                "docs": {
-                    "text": "",
-                    "tags": []
-                }
-            },
-            "forceResourceCleanup": {
-                "complexType": {
-                    "signature": "() => Promise<{ success: boolean; resourcesFreed: string[]; errors: string[]; timestamp: string; error?: undefined; } | { success: boolean; error: any; resourcesFreed?: undefined; errors?: undefined; timestamp?: undefined; }>",
-                    "parameters": [],
-                    "references": {
-                        "Promise": {
-                            "location": "global",
-                            "id": "global::Promise"
-                        }
-                    },
-                    "return": "Promise<{ success: boolean; resourcesFreed: string[]; errors: string[]; timestamp: string; error?: undefined; } | { success: boolean; error: any; resourcesFreed?: undefined; errors?: undefined; timestamp?: undefined; }>"
-                },
-                "docs": {
-                    "text": "",
-                    "tags": []
-                }
             }
         };
     }