@jaak.ai/stamps 2.5.3 → 2.5.4-dev.2

package/dist/esm/jaak-stamps-webcomponent.js

@@ -1,5 +1,5 @@
-import { p as promiseResolve, b as bootstrapLazy } from './index-BCfAsrzL.js';
-export { s as setNonce } from './index-BCfAsrzL.js';
+import { p as promiseResolve, b as bootstrapLazy } from './index-CqdAwiLj.js';
+export { s as setNonce } from './index-CqdAwiLj.js';
 import { g as globalScripts } from './app-globals-DQuL1Twl.js';
 
 /*

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

@@ -1,4 +1,4 @@
-import { r as registerInstance, c as createEvent, g as getElement, h } from './index-BCfAsrzL.js';
+import { r as registerInstance, c as createEvent, g as getElement, h, a as getAssetPath } from './index-CqdAwiLj.js';
 
 class EventBusService {
     events = new Map();
@@ -835,24 +835,12 @@ class DetectionService {
                     errorMsg.includes('FLOAT16') ||
                     errorMsg.includes('float16');
                 if (isFloat16Error) {
-                    // El modelo fp16 no es compatible con este backend.
-                    // Cargar el modelo fp32 que funciona en cualquier backend.
-                    if (this.debug) {
-                        console.log('[JAAK-DEBUG] float16 model not supported, loading fp32 model:', this.MODEL_PATH_FP32);
-                    }
                     this.useFloat16 = false;
                     try {
                         this.session = await window.ort.InferenceSession.create(this.MODEL_PATH_FP32, sessionOptions);
-                        if (this.debug) {
-                            console.log('[JAAK-DEBUG] fp32 model loaded successfully');
-                        }
                     }
                     catch (fp32Error) {
                         // Intentar con opciones minimas de WASM
-                        if (this.debug) {
-                            console.log('[JAAK-DEBUG] fp32 model failed with default options:', fp32Error.message);
-                            console.log('[JAAK-DEBUG] Retrying fp32 model with WASM fallback options');
-                        }
                         const wasmOptions = {
                             executionProviders: ['wasm'],
                             graphOptimizationLevel: 'all',
@@ -887,9 +875,6 @@ class DetectionService {
                     throw error;
                 }
             }
-            if (this.debug) {
-                console.log('[JAAK-DEBUG] Model loaded. useFloat16:', this.useFloat16);
-            }
             this.modelLoaded = true;
         }
         catch (error) {
@@ -1178,9 +1163,6 @@ class DetectionService {
         }
         catch {
             this.useFloat16 = false;
-            if (this.debug) {
-                console.log('[JAAK-DEBUG] float16 not supported by current backend, using float32');
-            }
         }
     }
     float32ToFloat16(value) {
@@ -18779,6 +18761,18 @@ const JaakStamps = class {
     processedFramesCount = 0; // Contador total de frames procesados
     hasAutoSwitchedToManual = false;
     _manualModeLoggedOnce = false;
+    VIDEO_DIAGNOSTIC_EVENTS = [
+        'loadstart',
+        'loadedmetadata',
+        'loadeddata',
+        'canplay',
+        'playing',
+        'pause',
+        'stalled',
+        'suspend',
+        'abort',
+        'emptied',
+    ];
     // Canvas pool for optimized screenshot capture
     canvasPool = [];
     MAX_CANVAS_POOL_SIZE = 3;
@@ -19507,6 +19501,130 @@ const JaakStamps = class {
             memoryMB: deviceMemory ? deviceMemory * 1024 : null
         };
     }
+    debugLog(message, details) {
+        if (!this.debug) {
+            return;
+        }
+        if (typeof details === 'undefined') {
+            console.log(`[jaak-stamps][diag] ${message}`);
+            return;
+        }
+        console.log(`[jaak-stamps][diag] ${message}`, details);
+    }
+    debugWarn(message, details) {
+        if (!this.debug) {
+            return;
+        }
+        if (typeof details === 'undefined') {
+            console.warn(`[jaak-stamps][diag] ${message}`);
+            return;
+        }
+        console.warn(`[jaak-stamps][diag] ${message}`, details);
+    }
+    summarizeId(id) {
+        if (!id) {
+            return null;
+        }
+        return id.length <= 8 ? id : `${id.slice(0, 8)}...`;
+    }
+    getCameraDevicesSnapshot() {
+        return this.cameraService.getAvailableCameras().map(camera => ({
+            label: camera.label || '(sin label)',
+            deviceId: this.summarizeId(camera.deviceId),
+            groupId: this.summarizeId(camera.groupId),
+            kind: camera.kind,
+        }));
+    }
+    sanitizeTrackSettings(settings) {
+        if (!settings) {
+            return null;
+        }
+        return {
+            ...settings,
+            deviceId: this.summarizeId(settings.deviceId),
+            groupId: this.summarizeId(settings.groupId),
+        };
+    }
+    sanitizeTrackConstraints(track) {
+        if (!track) {
+            return null;
+        }
+        const constraints = track.getConstraints ? track.getConstraints() : {};
+        const sanitizedConstraints = { ...constraints };
+        if (typeof sanitizedConstraints.deviceId === 'string') {
+            sanitizedConstraints.deviceId = this.summarizeId(sanitizedConstraints.deviceId);
+        }
+        return sanitizedConstraints;
+    }
+    getStreamSnapshot(stream) {
+        if (!stream) {
+            return { hasStream: false };
+        }
+        const videoTrack = stream.getVideoTracks()[0];
+        if (!videoTrack) {
+            return {
+                hasStream: true,
+                streamActive: stream.active,
+                trackCount: stream.getTracks().length,
+                hasVideoTrack: false,
+            };
+        }
+        return {
+            hasStream: true,
+            streamActive: stream.active,
+            trackCount: stream.getTracks().length,
+            trackLabel: videoTrack.label || '(sin label)',
+            trackEnabled: videoTrack.enabled,
+            trackMuted: videoTrack.muted,
+            trackReadyState: videoTrack.readyState,
+            settings: this.sanitizeTrackSettings(videoTrack.getSettings ? videoTrack.getSettings() : undefined),
+            constraints: this.sanitizeTrackConstraints(videoTrack),
+        };
+    }
+    getVideoElementSnapshot() {
+        if (!this.videoRef) {
+            return { hasVideoRef: false };
+        }
+        const computedStyle = this.el.ownerDocument?.defaultView?.getComputedStyle(this.videoRef);
+        return {
+            hasVideoRef: true,
+            isConnected: this.videoRef.isConnected,
+            readyState: this.videoRef.readyState,
+            networkState: this.videoRef.networkState,
+            paused: this.videoRef.paused,
+            muted: this.videoRef.muted,
+            autoplay: this.videoRef.autoplay,
+            playsInline: this.videoRef.playsInline,
+            currentTime: Number.isFinite(this.videoRef.currentTime)
+                ? Number(this.videoRef.currentTime.toFixed(3))
+                : this.videoRef.currentTime,
+            videoWidth: this.videoRef.videoWidth,
+            videoHeight: this.videoRef.videoHeight,
+            clientWidth: this.videoRef.clientWidth,
+            clientHeight: this.videoRef.clientHeight,
+            hasSrcObject: !!this.videoRef.srcObject,
+            display: computedStyle?.display ?? 'unknown',
+            visibility: computedStyle?.visibility ?? 'unknown',
+        };
+    }
+    attachVideoDiagnosticListeners() {
+        if (!this.debug || !this.videoRef) {
+            return () => undefined;
+        }
+        const video = this.videoRef;
+        const listeners = this.VIDEO_DIAGNOSTIC_EVENTS.map(eventName => {
+            const handler = () => {
+                this.debugLog(`video event "${eventName}"`, this.getVideoElementSnapshot());
+            };
+            video.addEventListener(eventName, handler);
+            return { eventName, handler };
+        });
+        return () => {
+            listeners.forEach(({ eventName, handler }) => {
+                video.removeEventListener(eventName, handler);
+            });
+        };
+    }
     // DETECTION METHODS
     async startDetection() {
         try {
@@ -19593,12 +19711,19 @@ const JaakStamps = class {
             this.updateStatus('Configurando cámara...', 'Buscando dispositivos disponibles', 'loading');
             try {
                 await this.cameraService.enumerateDevices();
+                this.debugLog('step 2/5 enumerateDevices()', {
+                    cameras: this.getCameraDevicesSnapshot(),
+                    selectedCameraId: this.summarizeId(this.cameraService.getSelectedCameraId() || undefined),
+                });
             }
             catch (enumerateError) {
                 throw new Error(`Error al enumerar dispositivos: ${enumerateError.message}`);
             }
             try {
                 await this.updateCameraInfoWithAutofocus();
+                this.debugLog('step 2/5 updateCameraInfoWithAutofocus()', {
+                    cameraInfo: this.cameraInfoWithAutofocus,
+                });
             }
             catch (cameraInfoError) {
                 throw new Error(`Error al actualizar información de cámara: ${cameraInfoError.message}`);
@@ -19608,6 +19733,10 @@ const JaakStamps = class {
             let stream;
             try {
                 stream = await this.cameraService.setupCamera();
+                this.debugLog('step 3/5 setupCamera() resolved', {
+                    stream: this.getStreamSnapshot(stream),
+                    videoRef: this.getVideoElementSnapshot(),
+                });
             }
             catch (setupError) {
                 throw new Error(`Error al configurar cámara: ${setupError.message}`);
@@ -19620,7 +19749,15 @@ const JaakStamps = class {
                 this.updateStatus('Captura activa', 'Posicione su documento y use el botón para capturar', 'active');
             }
             try {
+                this.debugLog('step 4/5 initializeVideoStream() start', {
+                    stream: this.getStreamSnapshot(stream),
+                    videoRef: this.getVideoElementSnapshot(),
+                });
                 await this.initializeVideoStream(stream);
+                this.debugLog('step 4/5 initializeVideoStream() completed', {
+                    stream: this.getStreamSnapshot(stream),
+                    videoRef: this.getVideoElementSnapshot(),
+                });
             }
             catch (videoError) {
                 throw new Error(`Error al inicializar video: ${videoError.message}`);
@@ -19638,9 +19775,19 @@ const JaakStamps = class {
             if (!this.useDocumentDetector) {
                 this.showManualCaptureButton = true;
             }
+            this.debugLog('step 5/5 capture loop ready', {
+                videoRef: this.getVideoElementSnapshot(),
+                stream: this.getStreamSnapshot(this.videoStream),
+                useDocumentDetector: this.useDocumentDetector,
+            });
             this.detectFrame();
         }
         catch (err) {
+            this.debugWarn('startDetection() failed', {
+                error: err instanceof Error ? err.message : String(err),
+                videoRef: this.getVideoElementSnapshot(),
+                stream: this.getStreamSnapshot(this.videoStream),
+            });
             console.error('[jaak-stamps] Error al preparar captura:', err);
             this.updateStatus('Error al iniciar', 'No se pudo preparar la captura', 'error');
             this.stateManager.updateCaptureState({ isLoading: false });
@@ -19650,11 +19797,93 @@ const JaakStamps = class {
         if (!this.videoRef) {
             throw new Error('Video element not available');
         }
+        const detachVideoDiagnosticListeners = this.attachVideoDiagnosticListeners();
+        this.debugLog('initializeVideoStream() pre-assign', {
+            stream: this.getStreamSnapshot(stream),
+            videoRef: this.getVideoElementSnapshot(),
+        });
         this.videoRef.srcObject = stream;
         this.videoStream = stream;
+        this.debugLog('initializeVideoStream() post-srcObject assignment', {
+            stream: this.getStreamSnapshot(stream),
+            videoRef: this.getVideoElementSnapshot(),
+        });
         const isRear = this.cameraService.isRearCamera(stream);
         this.shouldMirrorVideo = !isRear;
         const LOAD_METADATA_TIMEOUT_MS = 10000;
+        // Diagnostic instrumentation: when the timeout fires we need enough
+        // context to distinguish between "OS muted the track", "permission
+        // revoked mid-flight", "device never produced frames" and other modes
+        // that all surface as the same generic timeout error.
+        const track = stream.getVideoTracks()[0];
+        const waitStart = performance.now();
+        const trackEvents = [];
+        const recordTrackEvent = (event) => {
+            trackEvents.push({
+                at: Math.round(performance.now() - waitStart),
+                event,
+                state: track?.readyState,
+            });
+        };
+        const onTrackMute = () => recordTrackEvent('mute');
+        const onTrackUnmute = () => recordTrackEvent('unmute');
+        const onTrackEnded = () => recordTrackEvent('ended');
+        if (track) {
+            track.addEventListener('mute', onTrackMute);
+            track.addEventListener('unmute', onTrackUnmute);
+            track.addEventListener('ended', onTrackEnded);
+        }
+        const cleanupTrackListeners = () => {
+            if (!track)
+                return;
+            track.removeEventListener('mute', onTrackMute);
+            track.removeEventListener('unmute', onTrackUnmute);
+            track.removeEventListener('ended', onTrackEnded);
+        };
+        const captureDiagnostics = () => {
+            const settings = track?.getSettings?.();
+            const computed = this.videoRef ? getComputedStyle(this.videoRef) : null;
+            return {
+                reason: 'VIDEO_METADATA_TIMEOUT',
+                waitedMs: Math.round(performance.now() - waitStart),
+                stream: {
+                    videoTrackCount: stream.getVideoTracks().length,
+                    audioTrackCount: stream.getAudioTracks().length,
+                },
+                track: track ? {
+                    readyState: track.readyState,
+                    muted: track.muted,
+                    enabled: track.enabled,
+                    label: track.label,
+                    kind: track.kind,
+                    settings: settings ? {
+                        width: settings.width,
+                        height: settings.height,
+                        frameRate: settings.frameRate,
+                        deviceId: settings.deviceId,
+                        facingMode: settings.facingMode,
+                    } : null,
+                } : null,
+                video: this.videoRef ? {
+                    readyState: this.videoRef.readyState,
+                    networkState: this.videoRef.networkState,
+                    error: this.videoRef.error ? { code: this.videoRef.error.code, message: this.videoRef.error.message } : null,
+                    paused: this.videoRef.paused,
+                    offsetWidth: this.videoRef.offsetWidth,
+                    offsetHeight: this.videoRef.offsetHeight,
+                    videoWidth: this.videoRef.videoWidth,
+                    videoHeight: this.videoRef.videoHeight,
+                    display: computed?.display,
+                    visibility: computed?.visibility,
+                } : null,
+                document: {
+                    visibilityState: document.visibilityState,
+                    hasFocus: document.hasFocus(),
+                },
+                trackEvents,
+                userAgent: navigator.userAgent,
+            };
+        };
         const finalizeStreamInitialization = async () => {
             try {
                 await this.videoRef.play();
@@ -19669,24 +19898,39 @@ const JaakStamps = class {
                 const rect = container.getBoundingClientRect();
                 this.updateMaskDimensions(rect);
             }
+            this.debugLog('initializeVideoStream() finalized after play()', {
+                stream: this.getStreamSnapshot(stream),
+                videoRef: this.getVideoElementSnapshot(),
+            });
         };
         // If metadata is already available (readyState >= HAVE_METADATA = 1),
         // the 'loadedmetadata' event will not fire again. Handle both cases.
         if (this.videoRef.readyState >= 1) {
-            if (this.debug) {
-                console.log('[JAAK-DEBUG] Video metadata already available (readyState:', this.videoRef.readyState, '), skipping event wait');
-            }
+            this.debugLog('video metadata already available, skipping event wait', this.getVideoElementSnapshot());
+            cleanupTrackListeners();
             await finalizeStreamInitialization();
+            detachVideoDiagnosticListeners();
             return;
         }
         return new Promise((resolve, reject) => {
             let settled = false;
+            const cleanup = () => {
+                this.videoRef.onloadedmetadata = null;
+                this.videoRef.onerror = null;
+                detachVideoDiagnosticListeners();
+            };
             const timeoutId = setTimeout(() => {
                 if (settled)
                     return;
                 settled = true;
-                this.videoRef.onloadedmetadata = null;
-                this.videoRef.onerror = null;
+                const diagnostics = captureDiagnostics();
+                this.debugWarn(`initializeVideoStream() timeout after ${LOAD_METADATA_TIMEOUT_MS}ms`, {
+                    videoRef: this.getVideoElementSnapshot(),
+                    stream: this.getStreamSnapshot(stream),
+                });
+                console.error('[jaak-stamps] Video metadata timeout diagnostics (json):', JSON.stringify(diagnostics));
+                cleanup();
+                cleanupTrackListeners();
                 reject(new Error(`Video metadata load timeout after ${LOAD_METADATA_TIMEOUT_MS}ms`));
             }, LOAD_METADATA_TIMEOUT_MS);
             this.videoRef.onloadedmetadata = async () => {
@@ -19694,13 +19938,18 @@ const JaakStamps = class {
                     return;
                 settled = true;
                 clearTimeout(timeoutId);
-                this.videoRef.onloadedmetadata = null;
-                this.videoRef.onerror = null;
+                this.debugLog('initializeVideoStream() onloadedmetadata fired', {
+                    videoRef: this.getVideoElementSnapshot(),
+                    stream: this.getStreamSnapshot(stream),
+                });
+                cleanupTrackListeners();
                 try {
                     await finalizeStreamInitialization();
+                    cleanup();
                     resolve();
                 }
                 catch (err) {
+                    cleanup();
                     reject(err);
                 }
             };
@@ -19709,8 +19958,13 @@ const JaakStamps = class {
                     return;
                 settled = true;
                 clearTimeout(timeoutId);
-                this.videoRef.onloadedmetadata = null;
-                this.videoRef.onerror = null;
+                this.debugWarn('initializeVideoStream() video element emitted error', {
+                    event,
+                    videoRef: this.getVideoElementSnapshot(),
+                    stream: this.getStreamSnapshot(stream),
+                });
+                cleanup();
+                cleanupTrackListeners();
                 reject(new Error(`Video element error: ${event}`));
             };
         });
@@ -19935,7 +20189,16 @@ const JaakStamps = class {
             isCapturing: false
         };
         const cameraInfo = this.cameraInfoWithAutofocus;
-        return (h("div", { key: 'd9e8fef8a096429937860396347148e6bdd06340', class: "detector-container" }, !this.licenseValid && this.licenseError && (h("div", { key: '7eb2f885adab60a4b8b1667bf0a362510d537794', class: "license-error-container" }, h("div", { key: 'af1079677131e33d5cc7698d4da03b2ba012c4bf', class: "license-error-card" }, h("svg", { key: 'f968e7c76c710dd8a4b6b407a026346d524740fe', 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: '39f44307ef8a1ef1fb786dc925fb753f647aa94c', 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: '64fe021fadc616f46e69b35a7950ad503f55028a', d: "M12 8V12", stroke: "currentColor", "stroke-width": "2", "stroke-linecap": "round" }), h("circle", { key: 'aa86c48652cce218d24f78f49c0f32f8485184ca', cx: "12", cy: "16", r: "0.5", fill: "currentColor", stroke: "currentColor", "stroke-width": "1" })), h("h2", { key: 'b49877aa248f90ef207cc26a294f3f7f4f5f8e03', class: "license-error-title" }, "Licencia Requerida"), h("p", { key: 'fe929456590ae3ee78804613072df9c873732f99', class: "license-error-message" }, this.licenseError), h("p", { key: '1177a85cdd98a3dfd120043ce58256a33095d720', class: "license-error-help" }, "Contacte a soporte: ", h("a", { key: 'd5fe21ac8932ab88907e59775d459597cbd3b51f', href: "mailto:support@jaak.ai" }, "support@jaak.ai")), h("div", { key: '3b764654f555dae41581f5d855548b8f3382e0f2', class: "license-error-footer" }, "JAAK Stamps")))), this.licenseValid && (h("div", { key: '4051657a840db456841fdea943409f75c4c72985', class: "video-container" }, h("video", { key: 'aa7fb4da7f721a511f4e8bbd9d2727ff2a3c350f', ref: el => this.videoRef = el, autoplay: true, muted: true, playsinline: true, class: this.shouldMirrorVideo ? 'mirror' : '', style: { display: captureState.isVideoActive ? 'block' : 'none' } }), h("div", { key: 'a9f5839bd5f7543f5e3e37701c95c3528d233161', 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: '20689d87a0b2f3ec851837a57f97b4bb79ecf10a', class: "detector-container" }, !this.licenseValid && this.licenseError && (h("div", { key: '3dccc3f6fd3ed0db2c2e7034d5cb0940625bade1', class: "license-error-container" }, h("div", { key: '5f39d0762dc5fea0f5d5402cd61f696090e96865', class: "license-error-card" }, h("svg", { key: '34d8290684decfe194328eba1b4af1b582f02518', 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: '2cc8b54522b550f127c1b05a6f8069b78156f84a', 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: 'b3c7918292661cfc92fbc0d3ec237acb80364fa5', d: "M12 8V12", stroke: "currentColor", "stroke-width": "2", "stroke-linecap": "round" }), h("circle", { key: '86a258f69cdf26588436cba2056bdf7c92d08244', cx: "12", cy: "16", r: "0.5", fill: "currentColor", stroke: "currentColor", "stroke-width": "1" })), h("h2", { key: '06e4fbde528663e485ae9a3b04945e6c95595ab2', class: "license-error-title" }, "Licencia Requerida"), h("p", { key: '7466b075c8cf31d67535512e4bdaa1473e89ed47', class: "license-error-message" }, this.licenseError), h("p", { key: 'ba4d06029ef7e896e51ad5c6e2dd72a9a162ef08', class: "license-error-help" }, "Contacte a soporte: ", h("a", { key: '177832433d66cf581743d8774a055405fa1f83fc', href: "mailto:support@jaak.ai" }, "support@jaak.ai")), h("div", { key: 'ce1b33ae5289689c3e07cbb2a68f4411aa3ed2d2', class: "license-error-footer" }, "JAAK Stamps")))), this.licenseValid && (h("div", { key: '394ee2b3c487c9673c1df3b483900720beb42ea5', class: "video-container" }, h("video", { key: '50ba3fb80f05ed35bdc58f9d75538d083cd7af32', ref: el => this.videoRef = el, autoplay: true, muted: true, playsinline: true, class: this.shouldMirrorVideo ? 'mirror' : '', style: {
+                // Keep the element rendered (display: block) so the browser
+                // loads stream metadata and fires 'loadedmetadata'. Hiding it
+                // with display:none prevents metadata loading in Chrome and
+                // causes initializeVideoStream to hang waiting for the event.
+                // Use opacity + visibility to hide visually while keeping the
+                // render context alive.
+                opacity: captureState.isVideoActive ? '1' : '0',
+                visibility: captureState.isVideoActive ? 'visible' : 'hidden',
+            } }), h("div", { key: 'a4ff51674115afeeb2c36aedbbbdf3769bf0af96', 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`,
@@ -19944,9 +20207,9 @@ const JaakStamps = class {
                 border: '2px solid #32406C',
                 pointerEvents: 'none',
                 boxSizing: 'border-box'
-            } })))), this.isMaskReady && (h("div", { key: 'ad737b47a608ba2d6e43a8c41aee15ea00012966', class: "overlay-mask" }, h("div", { key: '70c5b2591dd75742eae22e444eab4d4368fc659d', class: "card-outline" }, h("div", { key: '0962f587354f4b300f6f6a1f5b9652441c3aeb5c', class: "side side-top" }), h("div", { key: '955d5346898f560e1e3fc854c4c339074613116c', class: "side side-right" }), h("div", { key: '0388ccc214b045e392c07e6e8fffe2c8d67d3582', class: "side side-bottom" }), h("div", { key: '718600bfad1eff4298628402190ffb34b7988afa', class: "side side-left" })), !captureState.showFlipAnimation && !captureState.showSuccessAnimation && (h("div", { key: '70603563d303912248bf60e1d39e06d78b3adbaf', class: `guide-text ${this.showPerformanceMessage ? 'performance-warning-text' : ''}` }, this.getGuideText(captureState.step))), captureState.step === 'back' && !captureState.showFlipAnimation && !captureState.showSuccessAnimation && (h("div", { key: 'a3639b10d52b29da6f0490356f7cdae789d62f88', class: "back-capture-section" }, h("div", { key: 'dd430526d6e096396d10367fd216b1c6568ce19b', class: "back-capture-buttons" }, (!this.useDocumentDetector || this.performanceDegradedMode || this.showManualCaptureButton) && (h("button", { key: '04b0afd7e6adc890287749add773910445ff5255', class: "capture-button primary-button", onClick: () => this.takeManualScreenshot(), type: "button", disabled: this.processingButton !== null }, this.processingButton === 'capture-back' && (h("span", { key: '69022991921cbc04ab20dee2148bb95d5dd371f8', class: "button-spinner" })), "Capturar Reverso")), h("button", { key: 'dd698341642e875e8f252746db747ca77b2f37b0', class: "skip-button", onClick: () => this.skipBackCapture(), type: "button", disabled: this.processingButton !== null }, this.processingButton === 'skip-back' && (h("span", { key: 'c33706bf76eeb1ca401ea3df042e858e23d3a929', class: "button-spinner" })), this.enableBackDocumentTimer && this.backDocumentTimerRemaining > 0
+            } })))), this.isMaskReady && (h("div", { key: '6c4e710e25971692bd933486f05a231b56150e5a', class: "overlay-mask" }, h("div", { key: 'd7ec408535cd68a5a9c12e51061f3fd61745b566', class: "card-outline" }, h("div", { key: '0e4c6066cf35cdb13843e54500db8e94603203fa', class: "side side-top" }), h("div", { key: '0c61ebf0940a01b09d509675d021051ac433ba1b', class: "side side-right" }), h("div", { key: 'e1c113fa666ba1ab0b77bac98ac4b08d99bea3af', class: "side side-bottom" }), h("div", { key: '666527c49665fe1d9d04a5d3620686b7471b8d44', class: "side side-left" })), !captureState.showFlipAnimation && !captureState.showSuccessAnimation && (h("div", { key: '71eae3c5e89eeaffd95bc32d7ed9139a5b741cc6', class: `guide-text ${this.showPerformanceMessage ? 'performance-warning-text' : ''}` }, this.getGuideText(captureState.step))), captureState.step === 'back' && !captureState.showFlipAnimation && !captureState.showSuccessAnimation && (h("div", { key: 'b4d6abc22c58eabd5afb6f440701f5b909bf949e', class: "back-capture-section" }, h("div", { key: '6d4bf99ff92829efb64d6dbc7d2d14c16b7c691c', class: "back-capture-buttons" }, (!this.useDocumentDetector || this.performanceDegradedMode || this.showManualCaptureButton) && (h("button", { key: 'f8965079e936e32722b5eb1f8dfb63a84160aa5d', class: "capture-button primary-button", onClick: () => this.takeManualScreenshot(), type: "button", disabled: this.processingButton !== null }, this.processingButton === 'capture-back' && (h("span", { key: '7defab9f244899e188659fd07bf114897737bd48', class: "button-spinner" })), "Capturar Reverso")), h("button", { key: 'd5a501876ce24f25d21df5e8d47183e80be602f3', class: "skip-button", onClick: () => this.skipBackCapture(), type: "button", disabled: this.processingButton !== null }, this.processingButton === 'skip-back' && (h("span", { key: '54e08bed19e50abdd5f5faf9e0a21d8c2cb6a368', class: "button-spinner" })), this.enableBackDocumentTimer && this.backDocumentTimerRemaining > 0
             ? `Saltar reverso (${this.backDocumentTimerRemaining}s)`
-            : 'Saltar reverso')))), captureState.isVideoActive && (h("div", { key: 'f9c95646d564518b75d7511ef69049e82760c687', class: "camera-controls" }, h("button", { key: 'ff21667ee09360e13e0b7fa190eb58d4e9ab2955', 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: '1f5d7ced9311037a22402797075862c66b541201', class: "camera-selector-dropdown" }, h("div", { key: '38ccad6dfb46613519efac337a68ad8ed68ca585', class: "camera-selector-header" }, h("span", { key: 'efd67097b98bf82455703888a0294bba18084b58' }, "Seleccionar C\u00E1mara"), h("button", { key: 'efea962578d1ff9f4dc76e40f98b6763ab32fabd', class: "close-selector", onClick: () => this.toggleCameraSelector(), type: "button" }, "\u00D7")), h("div", { key: 'dc7fcc35ea20505547b9980f0793aab21635815f', 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: '450b9819604b9490c17759eb53468832abdf239c', class: "device-info" }, h("small", { key: '9423cb4f0f6eb767b9a9bf86412dcc74c40e3c9b' }, "Dispositivo: ", cameraInfo.deviceType)))), this.showManualCaptureButton && captureState.step === 'front' && !captureState.showFlipAnimation && !captureState.showSuccessAnimation && (h("div", { key: 'fc02b6ac27b7d239d07ea5df46136b5941a09020', class: "manual-capture-section" }, h("button", { key: '0e8bc7d6b2c44b66f62083bb9682880109ce1b50', class: "manual-capture-button", onClick: () => this.takeManualScreenshot(), type: "button", disabled: this.processingButton !== null }, this.processingButton === 'capture-front' && (h("span", { key: 'd4067363057c004774322ae6ac4c6aac8ac4c1a7', class: "button-spinner" })), "Capturar Frente"))))), captureState.isCapturing && (h("div", { key: '79a88a6cf21fb0d8c2883c44fe181dc34773dae6', class: "capture-animation" })), captureState.showFlipAnimation && (h("div", { key: '2e8f2d1441ea6ae7e62d6cb22fb8afb25308ae5b', class: "flip-animation" }, h("div", { key: '449282679041e4ad1b1f48e26185b1ab1ab3be60', class: "id-card-icon" }), h("div", { key: 'eac0b9728eefcde854ddb1675811f91ee3161176', class: "flip-text" }, "\u00A1Voltea tu identificaci\u00F3n!"))), captureState.showSuccessAnimation && (h("div", { key: '521094652be1010ebb740ef3278649bc0077fbfa', class: "success-animation" }, h("div", { key: 'e9b425d4c039f7267ecb7e3005506f07706f9054', class: "check-icon" }), h("div", { key: '4859b32d3219e325afa326651f21ce3663d9c0b8', class: "success-text" }, "\u00A1Proceso completado!"))), h("div", { key: '8fff23c16b531dda94a087a3ef3fe4ef0b6a51e4', class: `component-status status-${this.currentStatus.type}` }, (this.currentStatus.type === 'loading' || this.currentStatus.type === 'initializing') && (h("div", { key: 'e7139e242d3be20012efe25d808990fc9631492f', class: "status-spinner" })), h("div", { key: '935075ef8c1a7321e445578cdf918471e0f6e01c', class: "status-content" }, h("div", { key: '0f4910657f11df16d6cec635fdeb3864888ed55c', class: "status-message" }, this.currentStatus.message), this.currentStatus.description && (h("div", { key: 'c362a69bed2503ecb4456b183876a5ea0645cc71', class: "status-description" }, this.currentStatus.description)))), this.debug && (h("div", { key: '04d2a4d664742ca110f562fa599b118fa5e7a282', class: "performance-monitor" }, h("div", { key: '30c37005f87500d487e23cb87dd66973ce30bcfa', class: "performance-expanded" }, h("div", { key: '647c87a140f7ea8b39348402e0355b3b15ac9616', class: "metrics-row" }, h("div", { key: '99f886b025473adcd69b42aca61f7aa8158d13cf', class: "metric-compact" }, h("span", { key: '69215c74430c502fa51402e1fcf46d31b89b34f2', class: "metric-label" }, "FPS"), h("span", { key: '27283246a143119a4a8f0e63a8ee335f76868c46', class: `metric-value ${this.performanceData.fps < 15 ? 'warning' : this.performanceData.fps < 10 ? 'danger' : 'good'}` }, this.performanceData.fps)), h("div", { key: '6843f5f79d3e54643c6515e509364b4fa3fc032f', class: "metric-compact" }, h("span", { key: '20e83d94bf0a76e89a47b3d682e5c5c27ee94792', class: "metric-label" }, "MEM"), h("span", { key: '68922415fd8ba5ebf797f52026ecd0cf2abf861e', class: `metric-value ${this.performanceData.memoryUsage > 100 ? 'warning' : this.performanceData.memoryUsage > 200 ? 'danger' : 'good'}` }, this.performanceData.memoryUsage, "MB"))), h("div", { key: 'be6bb0a65bfc5bd16d6948f347756732918f80d1', class: "metrics-row" }, h("div", { key: 'c07a3723b79743697230a11267a6b2c8a847a86b', class: "metric-compact" }, h("span", { key: '2f2c75418ed31ba22f80112f6c02bdc32a1bc7e3', class: "metric-label" }, "INF"), h("span", { key: '788aa1a4220f0150c5ce77127d75be64104591c1', class: `metric-value ${this.performanceData.inferenceTime > 100 ? 'warning' : this.performanceData.inferenceTime > 200 ? 'danger' : 'good'}` }, this.performanceData.inferenceTime, "ms")), h("div", { key: '23bdf32e7ee8533c3327b271bd0cec93551f7c8e', class: "metric-compact" }, h("span", { key: '1d63525671ef0e99072d472f6bbe45919694ca98', class: "metric-label" }, "FRAME"), h("span", { key: '834f075061da75860a481142defddcd3973a2641', class: `metric-value ${this.performanceData.frameProcessingTime > 50 ? 'warning' : this.performanceData.frameProcessingTime > 100 ? 'danger' : 'good'}` }, this.performanceData.frameProcessingTime, "ms"))), h("div", { key: '2767844f849c3a8217dce6d44180b5db604284d9', class: "metrics-row" }, h("div", { key: '78e4ae2297c867c7036186bb9871800b57e6cd50', class: "metric-compact" }, h("span", { key: '9fd42d1a4c18ead68ee81bc72dddb98dcd09952c', class: "metric-label" }, "DET"), h("span", { key: '0e3c0bbf718b21c3c20ae2e68c6f1e8f5dea0624', class: "metric-value good" }, this.performanceData.successfulDetections, "/", this.performanceData.totalDetections)), h("div", { key: '41be4df95b8745706e9b98d28cefb758e9e6b65f', class: "metric-compact" }, h("span", { key: '520b7e3d4841c0865c3643c5db33f0a762e550e7', class: "metric-label" }, "RATE"), h("span", { key: 'fe56fdd018002bce4e0efc5059cbc6562edee17f', class: `metric-value ${this.performanceData.detectionRate < 30 ? 'danger' : this.performanceData.detectionRate < 60 ? 'warning' : 'good'}` }, this.performanceData.detectionRate, "%")))))), h("div", { key: '3c7b83cf7bfd1f42198edd1029f03b7c68f7766f', class: "watermark" }, h("img", { key: '5684517b58bafeffdbe6533c4dcc3ef36bec0b6c', src: "https://static.jaak.ai/commons/powered-by-jaak.png", alt: "Powered by Jaak" }))))));
+            : 'Saltar reverso')))), captureState.isVideoActive && (h("div", { key: '85998cae72d19792d41f94b3fa08fd7054e25c5e', class: "camera-controls" }, h("button", { key: 'fe0471dad8bdc5b45327da52af8b47f94fe2531a', 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: 'de26a8eda76aeec8e7095f793750b2336e2ff6c6', class: "camera-selector-dropdown" }, h("div", { key: '9b4085d7be39ab227a33d02b55dd46e96a68d330', class: "camera-selector-header" }, h("span", { key: '84104fb85d91ccd258c78365cad2e66b62d787b0' }, "Seleccionar C\u00E1mara"), h("button", { key: 'ad1d2b52e64ab8f0028e2cb083f495c2b432c054', class: "close-selector", onClick: () => this.toggleCameraSelector(), type: "button" }, "\u00D7")), h("div", { key: 'e9f56e92ed01afac36ad0986dc78bfc816e60520', 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: '6fa215b5f99d33272cd96a27b2295c95113bc257', class: "device-info" }, h("small", { key: 'f8399e02a4f2a288c09df9065e138ab8def9be5f' }, "Dispositivo: ", cameraInfo.deviceType)))), this.showManualCaptureButton && captureState.step === 'front' && !captureState.showFlipAnimation && !captureState.showSuccessAnimation && (h("div", { key: '4a169ae520fd5ca67716f0fe190889ace448044e', class: "manual-capture-section" }, h("button", { key: '7d7808f0d1017f6eb4c701a8582152905a228e85', class: "manual-capture-button", onClick: () => this.takeManualScreenshot(), type: "button", disabled: this.processingButton !== null }, this.processingButton === 'capture-front' && (h("span", { key: '89ee5a34898a8ba78777177001fa4406531dac3e', class: "button-spinner" })), "Capturar Frente"))))), captureState.isCapturing && (h("div", { key: '0711e1cb5619acbade20f63f6d46bdfdf827ed12', class: "capture-animation" })), captureState.showFlipAnimation && (h("div", { key: '720c0b1dcdb85646b4973ae15abeaef0f3a91a95', class: "flip-animation" }, h("div", { key: 'a31a9500ee6f2f35f762e2f5135219ed869c6188', class: "id-card-icon" }), h("div", { key: '7237f4284d4a5b8fb471d8a568a9c3dd2eae6409', class: "flip-text" }, "\u00A1Voltea tu identificaci\u00F3n!"))), captureState.showSuccessAnimation && (h("div", { key: '94a28257187330f5aaca2302840300460f288f71', class: "success-animation" }, h("div", { key: 'ef9d9072507faac3ae29c31b87c9439f67576c14', class: "check-icon" }), h("div", { key: '7f1c077a2b3b67ebba5d12c9b69ff943b74936e9', class: "success-text" }, "\u00A1Proceso completado!"))), h("div", { key: 'b9cae83d9d9717728a27bd969293fe28702befe3', class: `component-status status-${this.currentStatus.type}` }, (this.currentStatus.type === 'loading' || this.currentStatus.type === 'initializing') && (h("div", { key: '59382426b18de9f04dcfb179acd9a49b68af45ed', class: "status-spinner" })), h("div", { key: 'baa1972a55d439a95b3f91f38f91d9f35eecd7bd', class: "status-content" }, h("div", { key: '3fac24107d04a2b0abcbe6a3a0bff6d395c096b6', class: "status-message" }, this.currentStatus.message), this.currentStatus.description && (h("div", { key: '196c12a4fc3e8f213b17bdd366da9e61c594a0b1', class: "status-description" }, this.currentStatus.description)))), this.debug && (h("div", { key: 'd5c36522d3bd46f434b19e8323a30f441d69c67c', class: "performance-monitor" }, h("div", { key: 'ccc8ae6b27be8d5d89e2722319cfc66a92c3a32f', class: "performance-expanded" }, h("div", { key: 'd7bed7384567663fafe4fa49dd24da4bdd05c9a3', class: "metrics-row" }, h("div", { key: 'a4409744d7d9e8a6288caf077ba5ebdc6aaa5371', class: "metric-compact" }, h("span", { key: '939e03d6aa0138c2b0c1cce16bebf158b9b74bd6', class: "metric-label" }, "FPS"), h("span", { key: '76c20f96b11725d41493b627e7a6b0fb0d594d60', class: `metric-value ${this.performanceData.fps < 15 ? 'warning' : this.performanceData.fps < 10 ? 'danger' : 'good'}` }, this.performanceData.fps)), h("div", { key: 'fafe6b165149f1f590a0b7e26b4001b09a5c70c5', class: "metric-compact" }, h("span", { key: 'a7e99f9c05aced0cb951297ce3a6011500445421', class: "metric-label" }, "MEM"), h("span", { key: '68bd733671a9664c4533e0b24b04ad0422053f77', class: `metric-value ${this.performanceData.memoryUsage > 100 ? 'warning' : this.performanceData.memoryUsage > 200 ? 'danger' : 'good'}` }, this.performanceData.memoryUsage, "MB"))), h("div", { key: 'a53f1ac37527de249425529aff022858c8d924c5', class: "metrics-row" }, h("div", { key: '2213e3646b22056999d29107bb32e43c61dd202f', class: "metric-compact" }, h("span", { key: '31d84002498094f88f71858a91828f42b7157d23', class: "metric-label" }, "INF"), h("span", { key: 'f0ed4e90a338a05bd5193992e7f004df9d31239a', class: `metric-value ${this.performanceData.inferenceTime > 100 ? 'warning' : this.performanceData.inferenceTime > 200 ? 'danger' : 'good'}` }, this.performanceData.inferenceTime, "ms")), h("div", { key: '1288cf2f5a119f146886c08f8b7f036425ead78e', class: "metric-compact" }, h("span", { key: 'db75cca343f7c6ea588e9b62da04fc5d444604a6', class: "metric-label" }, "FRAME"), h("span", { key: '40aee793f30a9cf175be6372981ce7b7be82ed07', class: `metric-value ${this.performanceData.frameProcessingTime > 50 ? 'warning' : this.performanceData.frameProcessingTime > 100 ? 'danger' : 'good'}` }, this.performanceData.frameProcessingTime, "ms"))), h("div", { key: 'd193a9b4c56c6a712213a779dbc6ee161b82e828', class: "metrics-row" }, h("div", { key: '89d060083973e1931232aac0d0c0f813b8aab7ef', class: "metric-compact" }, h("span", { key: '35808d7a448e3f4c6dc27b2b325adf628b9aee16', class: "metric-label" }, "DET"), h("span", { key: 'b60da4f5a4d56e738a65fd0bc480626d4839a048', class: "metric-value good" }, this.performanceData.successfulDetections, "/", this.performanceData.totalDetections)), h("div", { key: 'da779be083f58be8e914d062379b565fdbf7333d', class: "metric-compact" }, h("span", { key: '44645db15818eab212bc5b966213dda67f461d14', class: "metric-label" }, "RATE"), h("span", { key: '39209bdf5a5fa7c74718492218ff4fa404e94879', class: `metric-value ${this.performanceData.detectionRate < 30 ? 'danger' : this.performanceData.detectionRate < 60 ? 'warning' : 'good'}` }, this.performanceData.detectionRate, "%")))))), h("div", { key: 'bb0fb66ffefa86eb6e4b72215acb930c81cb6b01', class: "watermark" }, h("img", { key: '93a1812ab9a1c91c4a81cdc939ef8410170dd6b9', src: "https://static.jaak.ai/commons/powered-by-jaak.png", alt: "Powered by Jaak", onError: (e) => { e.target.src = getAssetPath('/assets/powered-by-jaak.png'); } }))))));
     }
     // Utility methods
     updateDetectionBoxes(boxes) {
@@ -20762,6 +21025,7 @@ const JaakStamps = class {
         }
         // If pool is full, let the canvas be garbage collected
     }
+    static get assetsDirs() { return ["../../assets"]; }
 };
 JaakStamps.style = myComponentCss;