@jaak.ai/stamps 2.1.0-dev.1 → 2.1.0-dev.2

package/dist/cjs/loader.cjs.js

@@ -5,7 +5,7 @@ var index = require('./index-BfhtOB0D.js');
 const defineCustomElements = async (win, options) => {
   if (typeof window === 'undefined') return undefined;
   await index.globalScripts();
-  return index.bootstrapLazy([["jaak-stamps.cjs",[[1,"jaak-stamps",{"debug":[4],"alignmentTolerance":[2,"alignment-tolerance"],"maskSize":[2,"mask-size"],"cropMargin":[2,"crop-margin"],"useDocumentClassification":[4,"use-document-classification"],"preferredCamera":[1,"preferred-camera"],"captureDelay":[2,"capture-delay"],"enableBackDocumentTimer":[4,"enable-back-document-timer"],"backDocumentTimerDuration":[2,"back-document-timer-duration"],"detectionBoxes":[32],"sideAlignment":[32],"isMaskReady":[32],"shouldMirrorVideo":[32],"showCameraSelector":[32],"isSwitchingCamera":[32],"hasDocumentDetected":[32],"cameraInfoWithAutofocus":[32],"currentStatus":[32],"performanceData":[32],"backDocumentTimerRemaining":[32],"getCapturedImages":[64],"isProcessCompleted":[64],"startCapture":[64],"stopCapture":[64],"resetCapture":[64],"skipBackCapture":[64],"getStatus":[64],"preloadModel":[64],"getCameraInfo":[64],"setPreferredCamera":[64],"setCaptureDelay":[64],"getCaptureDelay":[64]}]]]], options);
+  return index.bootstrapLazy([["jaak-stamps.cjs",[[1,"jaak-stamps",{"debug":[4],"alignmentTolerance":[2,"alignment-tolerance"],"maskSize":[2,"mask-size"],"cropMargin":[2,"crop-margin"],"useDocumentClassification":[4,"use-document-classification"],"useDocumentDetector":[4,"use-document-detector"],"preferredCamera":[1,"preferred-camera"],"captureDelay":[2,"capture-delay"],"enableBackDocumentTimer":[4,"enable-back-document-timer"],"backDocumentTimerDuration":[2,"back-document-timer-duration"],"detectionBoxes":[32],"sideAlignment":[32],"isMaskReady":[32],"shouldMirrorVideo":[32],"showCameraSelector":[32],"isSwitchingCamera":[32],"hasDocumentDetected":[32],"cameraInfoWithAutofocus":[32],"currentStatus":[32],"performanceData":[32],"backDocumentTimerRemaining":[32],"showManualCaptureButton":[32],"getCapturedImages":[64],"isProcessCompleted":[64],"startCapture":[64],"stopCapture":[64],"resetCapture":[64],"skipBackCapture":[64],"getStatus":[64],"preloadModel":[64],"getCameraInfo":[64],"setPreferredCamera":[64],"setCaptureDelay":[64],"getCaptureDelay":[64]}]]]], options);
 };
 
 exports.setNonce = index.setNonce;

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

@@ -170,18 +170,21 @@ video {
   top: 50%;
   left: 50%;
   transform: translate(-50%, -50%);
-  color: #fff;
-  font-size: 14px;
-  font-weight: 600;
+  background: rgba(0, 0, 0, 0.25);
+  backdrop-filter: blur(20px);
+  border-radius: 12px;
+  border: 1px solid rgba(255, 255, 255, 0.1);
+  color: #ffffff;
+  font-size: 12px;
+  font-weight: 500;
   text-align: center;
   white-space: normal;
-  background: rgba(0, 0, 0, 0.25);
-  backdrop-filter: blur(12px);
-  padding: 12px 20px;
-  border-radius: 8px;
+  padding: 13px;
   max-width: 300px;
   z-index: 20;
-  border: 1px solid rgba(255, 255, 255, 0.1);
+  height: fit-content;
+  width: fit-content;
+  animation: slideInFromTopCentered 0.3s ease-out;
 }
 
 /* Quality indicator */
@@ -523,6 +526,81 @@ video {
   max-width: 300px;
 }
 
+/* Sección unificada para captura del reverso */
+.back-capture-section {
+  position: absolute;
+  bottom: 20px;
+  left: 50%;
+  transform: translateX(-50%);
+  z-index: 25;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  width: 100%;
+  max-width: 320px;
+}
+
+
+.back-capture-buttons {
+  display: flex;
+  gap: 12px;
+  align-items: center;
+  justify-content: center;
+  flex-wrap: wrap;
+}
+
+.capture-button {
+  pointer-events: auto;
+  background: #fff;
+  color: #333;
+  border: none;
+  border-radius: 25px;
+  padding: 12px 24px;
+  font-size: 14px;
+  font-weight: 600;
+  cursor: pointer;
+  transition: all 0.3s ease;
+}
+
+.capture-button:hover {
+  background: #f8f9fa;
+}
+
+.capture-button:active {
+  background: #e9ecef;
+  transform: translateY(1px);
+}
+
+.capture-button:disabled {
+  background: #e9ecef;
+  color: #6c757d;
+  cursor: not-allowed;
+  transform: none;
+}
+
+/* Responsive para móviles */
+@media (max-width: 480px) {
+  .back-capture-section {
+    bottom: 16px;
+    max-width: 300px;
+  }
+  
+  
+  .back-capture-buttons {
+    flex-direction: column;
+    gap: 8px;
+    width: 100%;
+  }
+  
+  .capture-button,
+  .back-capture-buttons .skip-button {
+    width: 100%;
+    max-width: 200px;
+    padding: 10px 20px;
+    font-size: 13px;
+  }
+}
+
 .skip-explanation {
   background: rgba(0, 0, 0, 0.5);
   color: #ffffff;
@@ -575,6 +653,7 @@ video {
   display: flex;
   gap: 8px;
   pointer-events: auto;
+  animation: slideInFromTop 0.3s ease-out;
 }
 
 
@@ -665,6 +744,18 @@ video {
   }
 }
 
+/* Animación específica para elementos centrados */
+@keyframes slideInFromTopCentered {
+  0% {
+    opacity: 0;
+    transform: translate(-50%, -50%) translateY(-8px) scale(0.95);
+  }
+  100% {
+    opacity: 1;
+    transform: translate(-50%, -50%) translateY(0) scale(1);
+  }
+}
+
 .camera-selector-header {
   display: flex;
   justify-content: space-between;
@@ -903,6 +994,12 @@ video {
   .status-description {
     font-size: 9px;
   }
+  
+  .guide-text {
+    font-size: 11px;
+    padding: 4px 8px;
+    border-radius: 8px;
+  }
 }
 
 /* Animación de carga mejorada */
@@ -968,7 +1065,7 @@ video {
   border: 1px solid rgba(255, 255, 255, 0.1);
   z-index: 35;
   width: fit-content;
-  animation: slideInFromLeft 0.3s ease-out;
+  animation: slideInFromTop 0.3s ease-out;
   transition: all 0.3s ease;
 }
 
@@ -1127,3 +1224,61 @@ video {
     font-size: 10px;
   }
 }
+
+/* Sección de captura manual */
+.manual-capture-section {
+  position: absolute;
+  bottom: 20px;
+  left: 50%;
+  transform: translateX(-50%);
+  z-index: 25;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  width: 100%;
+  max-width: 300px;
+}
+
+
+.manual-capture-button {
+  pointer-events: auto;
+  background: #fff;
+  color: #333;
+  border: none;
+  border-radius: 25px;
+  padding: 12px 24px;
+  font-size: 14px;
+  font-weight: 600;
+  cursor: pointer;
+  transition: all 0.3s ease;
+}
+
+.manual-capture-button:hover {
+  background: #f8f9fa;
+}
+
+.manual-capture-button:active {
+  background: #e9ecef;
+  transform: translateY(1px);
+}
+
+.manual-capture-button:disabled {
+  background: #e9ecef;
+  color: #6c757d;
+  cursor: not-allowed;
+  transform: none;
+}
+
+/* Responsive para móviles */
+@media (max-width: 480px) {
+  .manual-capture-section {
+    bottom: 16px;
+    max-width: 280px;
+  }
+  
+  
+  .manual-capture-button {
+    padding: 10px 20px;
+    font-size: 13px;
+  }
+}

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

@@ -7,6 +7,7 @@ export class JaakStamps {
     maskSize = 90;
     cropMargin = 20;
     useDocumentClassification = false;
+    useDocumentDetector = true;
     preferredCamera = 'auto';
     captureDelay = 1500;
     enableBackDocumentTimer = false;
@@ -47,6 +48,7 @@ export class JaakStamps {
         detectionRate: 0
     };
     backDocumentTimerRemaining = 0;
+    showManualCaptureButton = false;
     // Services
     serviceContainer;
     eventBus;
@@ -110,6 +112,7 @@ export class JaakStamps {
             maskSize: this.maskSize,
             cropMargin: this.cropMargin,
             useDocumentClassification: this.useDocumentClassification,
+            useDocumentDetector: this.useDocumentDetector,
             preferredCamera: this.preferredCamera,
             captureDelay: this.captureDelay
         };
@@ -167,27 +170,39 @@ export class JaakStamps {
             document.head.appendChild(script);
             await new Promise((resolve) => {
                 script.onload = () => {
-                    setTimeout(() => {
-                        this.finalizeInitialization();
+                    setTimeout(async () => {
+                        await this.finalizeInitialization();
                         resolve(undefined);
                     }, 300);
                 };
             });
         }
         else {
-            setTimeout(() => {
-                this.finalizeInitialization();
+            setTimeout(async () => {
+                await this.finalizeInitialization();
             }, 300);
         }
     }
-    finalizeInitialization() {
+    async finalizeInitialization() {
         this.stateManager.updateCaptureState({ isLoading: false });
-        this.currentStatus = {
-            message: 'Listo para capturar',
-            description: '',
-            type: 'ready',
-            isInitialized: true
-        };
+        // Check camera permissions before showing "ready" status
+        const hasPermissions = await this.checkCameraPermissions();
+        if (hasPermissions) {
+            this.currentStatus = {
+                message: 'Listo para capturar',
+                description: '',
+                type: 'ready',
+                isInitialized: true
+            };
+        }
+        else {
+            this.currentStatus = {
+                message: 'Permisos de cámara requeridos',
+                description: 'Por favor, otorgue permisos de cámara para continuar',
+                type: 'error',
+                isInitialized: true
+            };
+        }
         this.emitReadyEvent();
     }
     updateStatus(message, description, type = 'loading') {
@@ -202,6 +217,26 @@ export class JaakStamps {
         const isDocumentReady = !!window.ort && this.detectionService.isModelLoaded();
         this.isReady.emit(isDocumentReady);
     }
+    async checkCameraPermissions() {
+        try {
+            if (!navigator.permissions) {
+                // Fallback: try to access camera directly
+                try {
+                    const stream = await navigator.mediaDevices.getUserMedia({ video: true });
+                    stream.getTracks().forEach(track => track.stop());
+                    return true;
+                }
+                catch {
+                    return false;
+                }
+            }
+            const permission = await navigator.permissions.query({ name: 'camera' });
+            return permission.state === 'granted';
+        }
+        catch (error) {
+            return false;
+        }
+    }
     handleStateChange(data) {
         // React to state changes from StateManager
         // This is where the component updates its internal state based on service state changes
@@ -225,6 +260,29 @@ export class JaakStamps {
             this.updateMaskDimensions(rect);
         }
     }
+    getGuideText(step) {
+        if (step === 'completed') {
+            return 'Proceso completado';
+        }
+        if (step === 'front') {
+            // Para el frente, si el detector manual está activo, mostrar instrucciones de captura manual
+            if (this.showManualCaptureButton) {
+                return 'Posicione el frente de su documento en el marco y presione el botón para capturar';
+            }
+            // Instrucción básica de alineación
+            return 'Alinee su identificación con el marco';
+        }
+        else if (step === 'back') {
+            // Para el reverso, mostrar instrucciones específicas según el modo
+            if (this.useDocumentDetector) {
+                return 'Si tu documento no tiene lado trasero, da clic en el botón para continuar con el proceso';
+            }
+            else {
+                return 'Posicione el reverso de su documento en el marco y capture, o salte este paso';
+            }
+        }
+        return 'Alinee su identificación con el marco';
+    }
     updateMaskDimensions(containerRect) {
         if (!this.videoRef)
             return;
@@ -572,7 +630,12 @@ export class JaakStamps {
             this.updateStatus('Ajustando cámara...', 'Configurando calidad de imagen', 'loading');
             const stream = await this.cameraService.setupCamera();
             // Paso 4: Inicializar video y ocultar estado inmediatamente
-            this.updateStatus('Captura activa', 'Buscando documento en el marco de captura', 'active');
+            if (this.useDocumentDetector) {
+                this.updateStatus('Captura activa', 'Buscando documento en el marco de captura', 'active');
+            }
+            else {
+                this.updateStatus('Captura activa', 'Posicione su documento y use el botón para capturar', 'active');
+            }
             await this.initializeVideoStream(stream);
             // Paso 5: Calibrar máscara
             if (this.detectionContainer) {
@@ -583,6 +646,10 @@ export class JaakStamps {
             // Finalizar e iniciar captura
             this.startTime = Date.now();
             this.stateManager.updateCaptureState({ isLoading: false });
+            // Mostrar botón manual si el detector está deshabilitado
+            if (!this.useDocumentDetector) {
+                this.showManualCaptureButton = true;
+            }
             this.detectFrame();
         }
         catch (err) {
@@ -614,6 +681,18 @@ export class JaakStamps {
             const captureState = this.stateManager.getCaptureState();
             if (!this.videoRef || !this.detectionContainer || !this.detectionService.isModelLoaded())
                 return;
+            // Show manual capture button when document detector is disabled
+            if (!this.useDocumentDetector) {
+                this.showManualCaptureButton = true;
+                // Continue the loop for UI updates but skip detection logic
+                if (captureState.step !== 'completed') {
+                    this.animationId = requestAnimationFrame(() => this.detectFrame());
+                }
+                return;
+            }
+            else {
+                this.showManualCaptureButton = false;
+            }
             if (captureState.isDetectionPaused) {
                 if (captureState.step !== 'completed') {
                     this.animationId = requestAnimationFrame(() => this.detectFrame());
@@ -742,7 +821,7 @@ export class JaakStamps {
             isCapturing: false
         };
         const cameraInfo = this.cameraInfoWithAutofocus;
-        return (h("div", { key: '69a8df7969288e19088e8809f1fefcc89b237cda', class: "detector-container" }, h("div", { key: '79e59a315d266be9d4fb5eed5740e5ad825d5890', class: "video-container" }, h("video", { key: 'a3312788c739748b774a25acb30c2dcea7f01695', ref: el => this.videoRef = el, autoplay: true, muted: true, playsinline: true, class: this.shouldMirrorVideo ? 'mirror' : '', style: { display: captureState.isVideoActive ? 'block' : 'none' } }), h("div", { key: 'ddab107500c2dab24c140049bef0b44aafc35dc7', 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: 'e0b32b1b41b58e3a58b552199384080e8f2c069b', class: "detector-container" }, h("div", { key: '03c77af311ff12d936994d629d58550cbaae190c', class: "video-container" }, h("video", { key: '94f15b34f34367a10d17816a31cd147adb57bc90', ref: el => this.videoRef = el, autoplay: true, muted: true, playsinline: true, class: this.shouldMirrorVideo ? 'mirror' : '', style: { display: captureState.isVideoActive ? 'block' : 'none' } }), h("div", { key: '982be192792dfaf644eb173bfee9b26ebd229288', 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`,
@@ -751,9 +830,9 @@ export class JaakStamps {
                 border: '2px solid #32406C',
                 pointerEvents: 'none',
                 boxSizing: 'border-box'
-            } })))), this.isMaskReady && (h("div", { key: '370337089a3de949b8cb4ae84dc0037e6044b2d5', class: "overlay-mask" }, h("div", { key: 'cb35c2e42bf1729ad02a8fe7e7abaf27cf1a8d7a', class: "card-outline" }, h("div", { key: '637d72ada63805e7f25051cd1ad9093030cb025a', class: "side side-top" }), h("div", { key: 'c7a465aa686afa41f80433d949715b40f6f349dc', class: "side side-right" }), h("div", { key: '384aade0610b5bc7bdd7db350a70d82f9bebd8ab', class: "side side-bottom" }), h("div", { key: '5506cc346f3fd718e3fda4365f69ea780304b6d6', class: "side side-left" }), !captureState.showFlipAnimation && !captureState.showSuccessAnimation && (h("div", { key: 'f5b9b62937eabab7c096b7417a13bbf6f822ee8a', class: "guide-text" }, "Alinee su identificaci\u00F3n con el marco"))), captureState.step === 'back' && !captureState.showFlipAnimation && !captureState.showSuccessAnimation && (h("div", { key: '74b122125a42839d2600cf99fb855140042ab761', class: "skip-section" }, h("div", { key: '0b4a39d1599854d6c445e2c35dcc89a0e4970846', class: "skip-explanation" }, "Si tu documento no tiene lado trasero, da clic en el bot\u00F3n para continuar con el proceso"), h("button", { key: 'b52b47df390cc099c8847ca8a676270bb154294d', class: "skip-button", onClick: () => this.skipBackCapture(), type: "button" }, this.enableBackDocumentTimer && this.backDocumentTimerRemaining > 0
+            } })))), this.isMaskReady && (h("div", { key: 'f5212ff70db65d2b836a3ac456a1701701630660', class: "overlay-mask" }, h("div", { key: '5080217f4962c2c7152def39cc978ba1c40a3a1c', class: "card-outline" }, h("div", { key: 'd37f1ca8723d79b10d1c6a3afaf54e2f2657ae79', class: "side side-top" }), h("div", { key: 'c5bb4f7d646a991f43598688ffa909c04697bb06', class: "side side-right" }), h("div", { key: '4a5040b4a236367dcdf72f4e72d497b8b6dee6c0', class: "side side-bottom" }), h("div", { key: 'c74ecef56eee8e92cd9491d693fa89a6c01bdbbd', class: "side side-left" })), !captureState.showFlipAnimation && !captureState.showSuccessAnimation && (h("div", { key: '2a2932b0c03835193ebf86ddb5f13173b1dba367', class: "guide-text" }, this.getGuideText(captureState.step))), captureState.step === 'back' && !captureState.showFlipAnimation && !captureState.showSuccessAnimation && (h("div", { key: '41fcf2d79106d3ed928fc2842cb6a6725ba4d4f6', class: "back-capture-section" }, h("div", { key: '98dbe1bbe454bad42c3e155247f25a9151aaf1f9', class: "back-capture-buttons" }, !this.useDocumentDetector && (h("button", { key: '01693bc0d6915a4d02f318268020dfbcf3a70b94', class: "capture-button primary-button", onClick: () => this.takeManualScreenshot(), type: "button", disabled: captureState.isCapturing }, captureState.isCapturing ? 'Capturando...' : 'Capturar Reverso')), h("button", { key: '0a4ba55cbbea867b936a83a16a622a3c36a225f9', class: "skip-button", onClick: () => this.skipBackCapture(), type: "button" }, this.enableBackDocumentTimer && this.backDocumentTimerRemaining > 0
             ? `Saltar reverso (${this.backDocumentTimerRemaining}s)`
-            : 'Saltar reverso'))), captureState.isVideoActive && (h("div", { key: 'f04e47749a25197c434b849844c67eadca5c6af3', class: "camera-controls" }, h("button", { key: '82625eef057f59b6dac11c4443ccb315231eac7f', class: `camera-selector-button ${this.isSwitchingCamera ? 'loading' : ''}`, onClick: () => this.toggleCameraSelector(), type: "button", title: "Seleccionar c\u00E1mara", disabled: this.isSwitchingCamera }, this.isSwitchingCamera ? (h("div", { class: "button-spinner" })) : ('Cámaras')))), this.showCameraSelector && cameraInfo.availableCameras.length > 0 && (h("div", { key: '61cfb89cd9bb549cfff2cb70293db06ee6cdf06b', class: "camera-selector-dropdown" }, h("div", { key: '60f751d8db7b305f2bdfdc089d2110bcff940150', class: "camera-selector-header" }, h("span", { key: '9dae045a34cc06f323ff4850921b495fc845be47' }, "Seleccionar C\u00E1mara"), h("button", { key: '4584d7964d91ddd7f3d980c3e5e90493530d33bd', class: "close-selector", onClick: () => this.toggleCameraSelector(), type: "button" }, "\u00D7")), h("div", { key: '9881f2b4fc6ffbdc76db06a7b49d060cefbe6277', 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: '3dfe9ffc7b4cc9afb199a78026cef6d4b469805e', class: "device-info" }, h("small", { key: 'bddc865a30469bd2724624b2f7c8f641f9d97a07' }, "Dispositivo: ", cameraInfo.deviceType)))))), captureState.isCapturing && (h("div", { key: '2fd963e44f69f80d17c6bbbfa3c9b5e11bc816be', class: "capture-animation" })), captureState.showFlipAnimation && (h("div", { key: 'ba4872ea5388a0ac3134be61feff5412373465ab', class: "flip-animation" }, h("div", { key: 'e83a92cea79f3e85aefc6964c5d9de7b495d511e', class: "id-card-icon" }), h("div", { key: '1d06b51fd6ad14d9b37aa6bca72bd13c951a386a', class: "flip-text" }, "\u00A1Voltea tu identificaci\u00F3n!"))), captureState.showSuccessAnimation && (h("div", { key: '503c377896d5fdc3ae8476b09f511d571f23ae72', class: "success-animation" }, h("div", { key: 'e1929c245b0d1479a6fb1513b0b37c53070c4291', class: "check-icon" }), h("div", { key: '024c897c70427b205390770fc3dfb999ffcc84d3', class: "success-text" }, "\u00A1Proceso completado!"))), h("div", { key: '54e350707628e5c88ae2900e412e6bda2eace943', class: `component-status status-${this.currentStatus.type}` }, (this.currentStatus.type === 'loading' || this.currentStatus.type === 'initializing') && (h("div", { key: '82ea10569ed46285686cf3e63885ca1941bb559c', class: "status-spinner" })), h("div", { key: '1fecf179c10965cccf1be3dc0a54afd377ba38ad', class: "status-content" }, h("div", { key: '1b301c1bbb02e5cac2e6babcb20c190662d45c68', class: "status-message" }, this.currentStatus.message), this.currentStatus.description && (h("div", { key: '5b6c61308d17176daade02c951a436d114a74100', class: "status-description" }, this.currentStatus.description)))), this.debug && (h("div", { key: 'b8104db64208dc87a617a072957c007f28055194', class: "performance-monitor" }, h("div", { key: 'e66aec071f10821be2713858dcc251c04f480e63', class: "performance-expanded" }, h("div", { key: '1ae09a91d0704ab21b9eb51097cf452fd5f44359', class: "metrics-row" }, h("div", { key: '340d4d16d048a5217fe13d5de63618c9ea221165', class: "metric-compact" }, h("span", { key: '20cfda14969ef70d232edd68f2e9902bd44b5d9a', class: "metric-label" }, "FPS"), h("span", { key: '3a089c2814a71ed6513bf05b0120a66aa159daee', class: `metric-value ${this.performanceData.fps < 15 ? 'warning' : this.performanceData.fps < 10 ? 'danger' : 'good'}` }, this.performanceData.fps)), h("div", { key: '23f700def988c3220fc5df37aeb57a0a20ff56b3', class: "metric-compact" }, h("span", { key: '441e8490a871469813a6d832114e03583d375e91', class: "metric-label" }, "MEM"), h("span", { key: '51f7c49164c9d5e699141c92c88375fc99b312ed', class: `metric-value ${this.performanceData.memoryUsage > 100 ? 'warning' : this.performanceData.memoryUsage > 200 ? 'danger' : 'good'}` }, this.performanceData.memoryUsage, "MB"))), h("div", { key: '6547fee80e2a1db7c9ff889a1c478fc8248159e6', class: "metrics-row" }, h("div", { key: '7b2d1642fd122ee0fbed36387afb23152afe10c2', class: "metric-compact" }, h("span", { key: 'a9137119bf7da366f18feaf8f28807ee40ad7a25', class: "metric-label" }, "INF"), h("span", { key: '5cbc0c040102688f1039cdcd4bb58020248cf700', class: `metric-value ${this.performanceData.inferenceTime > 100 ? 'warning' : this.performanceData.inferenceTime > 200 ? 'danger' : 'good'}` }, this.performanceData.inferenceTime, "ms")), h("div", { key: 'cb4a86f5da46e4081d997c8b8bb6a899f06dfcd2', class: "metric-compact" }, h("span", { key: '88ad5e1d842eb156cf6813ecaa9d2bec76a5999e', class: "metric-label" }, "FRAME"), h("span", { key: 'a9b14cd98b64dcfc058d3b68a3c168a9e092fb3c', class: `metric-value ${this.performanceData.frameProcessingTime > 50 ? 'warning' : this.performanceData.frameProcessingTime > 100 ? 'danger' : 'good'}` }, this.performanceData.frameProcessingTime, "ms"))), h("div", { key: '86e01f3596682cb8ad2ff5464748e6ecb7db374a', class: "metrics-row" }, h("div", { key: 'e73b9d39e9bcbc5d46fa0ba0a737700e3e5566d9', class: "metric-compact" }, h("span", { key: '8ecfe969dfe77c87d9da76d7390706014b4872f3', class: "metric-label" }, "DET"), h("span", { key: 'bd1a6a52e0bd1fb4d377413d7515e4e0f00da10f', class: "metric-value good" }, this.performanceData.successfulDetections, "/", this.performanceData.totalDetections)), h("div", { key: '36539ae98787fd60642082db1bf89031003c4bef', class: "metric-compact" }, h("span", { key: '7f3a81629c09053e3beeca97f485da0f60412052', class: "metric-label" }, "RATE"), h("span", { key: '72399e0ac39270c82b265ce64e402f84cda9fb2c', class: `metric-value ${this.performanceData.detectionRate < 30 ? 'danger' : this.performanceData.detectionRate < 60 ? 'warning' : 'good'}` }, this.performanceData.detectionRate, "%")))))), h("div", { key: '4e3a914ba2f5993f85de7b9dd6dc93d76b41c96d', class: "watermark" }, h("img", { key: 'aa634c2ba2090f64ee9b41aa1d75a9114d46fd63', src: "https://storage.googleapis.com/jaak-static/commons/powered-by-jaak.png", alt: "Powered by Jaak" })))));
+            : 'Saltar reverso')))), captureState.isVideoActive && (h("div", { key: '1db208a53dea37211bdd88254e575142b7abf91f', class: "camera-controls" }, h("button", { key: '90755839358f997c3ce2f4c36a8d17d39ea5f8ad', 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: 'ef7889ab82f9eaabcabec3e3dc3ebb7850818dd4', class: "camera-selector-dropdown" }, h("div", { key: 'e28fb005316a742318be3cf8582f520392b71bba', class: "camera-selector-header" }, h("span", { key: '97338030b1aedb50c5f5a588ea03c0f19bcb0ddd' }, "Seleccionar C\u00E1mara"), h("button", { key: '1537c907dfab17c232a256f9fc9210cbd0125cc6', class: "close-selector", onClick: () => this.toggleCameraSelector(), type: "button" }, "\u00D7")), h("div", { key: '509178119e6eed5fe0a6ea287904a53bd9fbecbc', 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: '485f7e1a97c43ed280a106bde3c6ee910625025c', class: "device-info" }, h("small", { key: 'd76edba943f4e06c14024923496555fa1fe6d845' }, "Dispositivo: ", cameraInfo.deviceType)))), this.showManualCaptureButton && captureState.step === 'front' && !captureState.showFlipAnimation && !captureState.showSuccessAnimation && (h("div", { key: 'c5184dd93aa41cff61b88ea2046b481efc87c1f2', class: "manual-capture-section" }, h("button", { key: '6e45d9a0fec60469eb926ff353cb1a440d59f5fe', class: "manual-capture-button", onClick: () => this.takeManualScreenshot(), type: "button", disabled: captureState.isCapturing }, captureState.isCapturing ? 'Capturando...' : 'Capturar Frente'))))), captureState.isCapturing && (h("div", { key: '9e296a942ba51cc1fd152e76ae406620c84ed721', class: "capture-animation" })), captureState.showFlipAnimation && (h("div", { key: '517db50f7273788d94d5e6db6c40f65e00e18784', class: "flip-animation" }, h("div", { key: 'fbf6a26c4cc0539bd16b45899d19984af3449610', class: "id-card-icon" }), h("div", { key: 'fb3a201864d04531a078074458aa6e7f6580d565', class: "flip-text" }, "\u00A1Voltea tu identificaci\u00F3n!"))), captureState.showSuccessAnimation && (h("div", { key: '10c694e233d26523d538ff0d2edbf6dcfb8e37c8', class: "success-animation" }, h("div", { key: '87e545650825ab805e887667281ecdf8bdb34c45', class: "check-icon" }), h("div", { key: '359da71f391d68e9437b749b949ee90685b96b3f', class: "success-text" }, "\u00A1Proceso completado!"))), h("div", { key: '7c5533bb875eb3d9cdcc6cfdfc20e4d5bd98d103', class: `component-status status-${this.currentStatus.type}` }, (this.currentStatus.type === 'loading' || this.currentStatus.type === 'initializing') && (h("div", { key: 'f32df46ab83279387de606eadf53cd4a4009f449', class: "status-spinner" })), h("div", { key: 'dd640de5a3b64f5f99363318e2fc70e32ccbc7db', class: "status-content" }, h("div", { key: '618c0ab9cb0a24b0af3f6946052beab0d660fe6d', class: "status-message" }, this.currentStatus.message), this.currentStatus.description && (h("div", { key: 'e52c2a4945c7f5a190a446ac588aa1668c21f26d', class: "status-description" }, this.currentStatus.description)))), this.debug && (h("div", { key: '61cea10bc3438fb74aa176d71c4238b070cb0f09', class: "performance-monitor" }, h("div", { key: '44f6b1accb56d99a236b22c0769f870638d9c768', class: "performance-expanded" }, h("div", { key: '6febc85e319752b0aebc0a4e4050ea6d597375a7', class: "metrics-row" }, h("div", { key: '96b81895ad3cd742c96308ed53a2126af76eb619', class: "metric-compact" }, h("span", { key: '774a11c6fed6a87db7673b018b3cdc378c5252ef', class: "metric-label" }, "FPS"), h("span", { key: 'cb866dcbea661e5f715b82c4dd760f786fd5bb2a', class: `metric-value ${this.performanceData.fps < 15 ? 'warning' : this.performanceData.fps < 10 ? 'danger' : 'good'}` }, this.performanceData.fps)), h("div", { key: 'a935aaadb83ea400bfaa984d1d845bdfd87becc8', class: "metric-compact" }, h("span", { key: 'ffacaa2cb7838403a297145b70586e255cc845c7', class: "metric-label" }, "MEM"), h("span", { key: 'a1d7a7abec97dc0544d50b11b372f699f750b76f', class: `metric-value ${this.performanceData.memoryUsage > 100 ? 'warning' : this.performanceData.memoryUsage > 200 ? 'danger' : 'good'}` }, this.performanceData.memoryUsage, "MB"))), h("div", { key: 'bb3d156a46569a8c290bc518c42ec7957bc5b94e', class: "metrics-row" }, h("div", { key: '4cadd8f845e4c12120ed549e4a73e02c6cbd9257', class: "metric-compact" }, h("span", { key: '1fc5661222f495b79fd7eb126e04f52eecab6fb3', class: "metric-label" }, "INF"), h("span", { key: 'eca1f59d1c41ab99158eec81592bc7150bfeabe1', class: `metric-value ${this.performanceData.inferenceTime > 100 ? 'warning' : this.performanceData.inferenceTime > 200 ? 'danger' : 'good'}` }, this.performanceData.inferenceTime, "ms")), h("div", { key: 'f708e2757adcb03e633111d96bd6786fb6b80ea6', class: "metric-compact" }, h("span", { key: 'a13099ded64180996d6f65bf215483ba83daccbc', class: "metric-label" }, "FRAME"), h("span", { key: '2765cd1f7c1a49df9de64639cc1b777c79f89f4c', class: `metric-value ${this.performanceData.frameProcessingTime > 50 ? 'warning' : this.performanceData.frameProcessingTime > 100 ? 'danger' : 'good'}` }, this.performanceData.frameProcessingTime, "ms"))), h("div", { key: '13aaf85a1b4b66294c4204f02d956b64665aa766', class: "metrics-row" }, h("div", { key: '40012f3f646d70c535a606ebbe581a2fe6fd2e50', class: "metric-compact" }, h("span", { key: '03f8b17746fe404485820d06a50173678db2fd25', class: "metric-label" }, "DET"), h("span", { key: 'c4f87430f142355054d9361330d6a5d508974b70', class: "metric-value good" }, this.performanceData.successfulDetections, "/", this.performanceData.totalDetections)), h("div", { key: 'cf366a41d7f7cda6046c32cc7c514eb7b46b05d1', class: "metric-compact" }, h("span", { key: '925e7de15b96ba4dbbcdbf8a9f0e3173bae49573', class: "metric-label" }, "RATE"), h("span", { key: '9701e60c7793f2c205f3c9ffd254b6a115b8a68c', class: `metric-value ${this.performanceData.detectionRate < 30 ? 'danger' : this.performanceData.detectionRate < 60 ? 'warning' : 'good'}` }, this.performanceData.detectionRate, "%")))))), h("div", { key: '636aeb9b2b8dd992d8a28a8db44b213e12514096', class: "watermark" }, h("img", { key: '0407b550d962a6113e05ad75e25a1a1bbd76d9ce', src: "https://storage.googleapis.com/jaak-static/commons/powered-by-jaak.png", alt: "Powered by Jaak" })))));
     }
     // Utility methods
     updateDetectionBoxes(boxes) {
@@ -868,6 +947,113 @@ export class JaakStamps {
             }
         }
     }
+    async takeManualScreenshot() {
+        if (!this.videoRef)
+            return;
+        // When using manual capture, use mask coordinates for cropping
+        await this.takeScreenshotWithMaskCoordinates();
+    }
+    async takeScreenshotWithMaskCoordinates() {
+        if (!this.videoRef || !this.detectionContainer)
+            return;
+        this.stateManager.updateCaptureState({ isCapturing: true });
+        this.triggerCaptureAnimation();
+        // Use pooled canvas for optimization
+        const captureCanvas = this.getPooledCanvas(this.videoRef.videoWidth, this.videoRef.videoHeight);
+        const captureCtx = captureCanvas.getContext('2d', { alpha: false });
+        captureCtx.clearRect(0, 0, captureCanvas.width, captureCanvas.height);
+        captureCtx.drawImage(this.videoRef, 0, 0, captureCanvas.width, captureCanvas.height);
+        // Calculate mask coordinates for cropping
+        const container = this.detectionContainer.parentElement;
+        const containerRect = container.getBoundingClientRect();
+        // Get mask dimensions from CSS properties
+        const maskWidthPercent = parseFloat(this.el.style.getPropertyValue('--mask-width').replace('%', '')) || 90;
+        const maskHeightPercent = parseFloat(this.el.style.getPropertyValue('--mask-height').replace('%', '')) || 56.25;
+        const maskCenterXPercent = parseFloat(this.el.style.getPropertyValue('--mask-center-x').replace('%', '')) || 50;
+        const maskCenterYPercent = parseFloat(this.el.style.getPropertyValue('--mask-center-y').replace('%', '')) || 50;
+        // Convert percentages to actual video coordinates
+        const videoWidth = this.videoRef.videoWidth;
+        const videoHeight = this.videoRef.videoHeight;
+        const videoAspectRatio = videoWidth / videoHeight;
+        const containerAspectRatio = containerRect.width / containerRect.height;
+        let displayedVideoWidth, displayedVideoHeight;
+        let videoOffsetX = 0, videoOffsetY = 0;
+        if (videoAspectRatio > containerAspectRatio) {
+            displayedVideoWidth = containerRect.width;
+            displayedVideoHeight = containerRect.width / videoAspectRatio;
+            videoOffsetY = (containerRect.height - displayedVideoHeight) / 2;
+        }
+        else {
+            displayedVideoHeight = containerRect.height;
+            displayedVideoWidth = containerRect.height * videoAspectRatio;
+            videoOffsetX = (containerRect.width - displayedVideoWidth) / 2;
+        }
+        // Calculate mask coordinates in video space
+        const maskWidthInContainer = (maskWidthPercent / 100) * containerRect.width;
+        const maskHeightInContainer = (maskHeightPercent / 100) * containerRect.height;
+        const maskCenterXInContainer = (maskCenterXPercent / 100) * containerRect.width;
+        const maskCenterYInContainer = (maskCenterYPercent / 100) * containerRect.height;
+        // Convert to video coordinates
+        const scaleX = videoWidth / displayedVideoWidth;
+        const scaleY = videoHeight / displayedVideoHeight;
+        const maskCenterXInVideo = (maskCenterXInContainer - videoOffsetX) * scaleX;
+        const maskCenterYInVideo = (maskCenterYInContainer - videoOffsetY) * scaleY;
+        const maskWidthInVideo = maskWidthInContainer * scaleX;
+        const maskHeightInVideo = maskHeightInContainer * scaleY;
+        // Calculate crop coordinates
+        const cropX = Math.max(0, maskCenterXInVideo - (maskWidthInVideo / 2) - this.cropMargin);
+        const cropY = Math.max(0, maskCenterYInVideo - (maskHeightInVideo / 2) - this.cropMargin);
+        const cropWidth = Math.min(maskWidthInVideo + (2 * this.cropMargin), videoWidth - cropX);
+        const cropHeight = Math.min(maskHeightInVideo + (2 * this.cropMargin), videoHeight - cropY);
+        // Use pooled canvas for cropped version
+        const croppedCanvas = this.getPooledCanvas(cropWidth, cropHeight);
+        const croppedCtx = croppedCanvas.getContext('2d', { alpha: false });
+        croppedCtx.clearRect(0, 0, croppedCanvas.width, croppedCanvas.height);
+        croppedCtx.drawImage(this.videoRef, cropX, cropY, cropWidth, cropHeight, 0, 0, cropWidth, cropHeight);
+        const captureState = this.stateManager.getCaptureState();
+        if (captureState.step === 'front') {
+            this.stateManager.setCapturedImages({
+                front: {
+                    fullFrame: captureCanvas.toDataURL('image/png'),
+                    cropped: croppedCanvas.toDataURL('image/png')
+                }
+            });
+            // Check if document classification is enabled (independent of detector)
+            if (this.useDocumentClassification) {
+                const classification = await this.detectionService.classifyDocument(croppedCanvas);
+                if (classification && classification.class === 'passport') {
+                    this.completeProcess(true);
+                    this.returnCanvasToPool(captureCanvas);
+                    this.returnCanvasToPool(croppedCanvas);
+                    return;
+                }
+            }
+            this.stateManager.updateCaptureState({
+                step: 'back',
+                isDetectionPaused: true,
+                showFlipAnimation: true
+            });
+            setTimeout(() => {
+                this.stateManager.updateCaptureState({
+                    showFlipAnimation: false,
+                    isDetectionPaused: false
+                });
+                this.startBackDocumentTimer();
+            }, 3000);
+        }
+        else if (captureState.step === 'back') {
+            this.stateManager.setCapturedImages({
+                back: {
+                    fullFrame: captureCanvas.toDataURL('image/png'),
+                    cropped: croppedCanvas.toDataURL('image/png')
+                }
+            });
+            this.completeProcess(false);
+        }
+        // Return canvases to pool after use
+        this.returnCanvasToPool(captureCanvas);
+        this.returnCanvasToPool(croppedCanvas);
+    }
     async takeScreenshot() {
         if (!this.videoRef || !this.lastDetectedBox)
             return;
@@ -1301,6 +1487,26 @@ export class JaakStamps {
                 "reflect": false,
                 "defaultValue": "false"
             },
+            "useDocumentDetector": {
+                "type": "boolean",
+                "attribute": "use-document-detector",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "defaultValue": "true"
+            },
             "preferredCamera": {
                 "type": "string",
                 "attribute": "preferred-camera",
@@ -1395,7 +1601,8 @@ export class JaakStamps {
             "cameraInfoWithAutofocus": {},
             "currentStatus": {},
             "performanceData": {},
-            "backDocumentTimerRemaining": {}
+            "backDocumentTimerRemaining": {},
+            "showManualCaptureButton": {}
         };
     }
     static get events() {