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

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],"captureStateVersion":[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,8 @@ export class JaakStamps {
         detectionRate: 0
     };
     backDocumentTimerRemaining = 0;
+    showManualCaptureButton = false;
+    captureStateVersion = 0; // Triggers re-render when StateManager changes
     // Services
     serviceContainer;
     eventBus;
@@ -110,6 +113,7 @@ export class JaakStamps {
             maskSize: this.maskSize,
             cropMargin: this.cropMargin,
             useDocumentClassification: this.useDocumentClassification,
+            useDocumentDetector: this.useDocumentDetector,
             preferredCamera: this.preferredCamera,
             captureDelay: this.captureDelay
         };
@@ -167,27 +171,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 +218,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 +261,32 @@ export class JaakStamps {
             this.updateMaskDimensions(rect);
         }
     }
+    triggerRerender() {
+        this.captureStateVersion = this.captureStateVersion + 1;
+    }
+    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 +634,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 +650,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 +685,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 +825,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: '3026fb421368ee82a1d2cefd8f9355ebf3194146', class: "detector-container" }, h("div", { key: '62b1230c3268412f4ff301d480d666065037d9b3', class: "video-container" }, h("video", { key: '170a0e7235522dec33b914b6d2841b36503c781f', ref: el => this.videoRef = el, autoplay: true, muted: true, playsinline: true, class: this.shouldMirrorVideo ? 'mirror' : '', style: { display: captureState.isVideoActive ? 'block' : 'none' } }), h("div", { key: '915af3649a7a551a46f1cb97af0a45916666cc12', 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 +834,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: 'b40cf136e5b9a120aa7243c12005383196428b34', class: "overlay-mask" }, h("div", { key: 'e82324a37682c94f03576e89d880c3b17520b5e5', class: "card-outline" }, h("div", { key: 'b1fd7df2a36300f2e6eb96474b449be74abd1ed4', class: "side side-top" }), h("div", { key: 'a6b3eb63fb35b22d0d53c8fd5aa88b2e299ae8c4', class: "side side-right" }), h("div", { key: '2d43e9281ad4fe05e314627aa249f56a7b0de9f1', class: "side side-bottom" }), h("div", { key: '231440a2dccc0f8ede35971ef092523d7be444b9', class: "side side-left" })), !captureState.showFlipAnimation && !captureState.showSuccessAnimation && (h("div", { key: 'a923e81e11ead323b9bcf76bd6b0fea421bc1517', class: "guide-text" }, this.getGuideText(captureState.step))), captureState.step === 'back' && !captureState.showFlipAnimation && !captureState.showSuccessAnimation && (h("div", { key: '4b68212634cbc4916cd16c4e00ca4e91b924de6e', class: "back-capture-section" }, h("div", { key: 'f2ec22b132defe1e4026ad38977c52974c5cdb21', class: "back-capture-buttons" }, !this.useDocumentDetector && (h("button", { key: 'ae8c0e452fbf1bb69b6683ae775f1c1a4b7d22d9', class: "capture-button primary-button", onClick: () => this.takeManualScreenshot(), type: "button", disabled: captureState.isCapturing }, captureState.isCapturing ? 'Capturando...' : 'Capturar Reverso')), h("button", { key: 'f1ec52715a584da161885bcbae0db7a38632905c', 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: 'a831afce8ac493fe9716fc5608c1be5373cac9f4', class: "camera-controls" }, h("button", { key: '9a56a494d6357eac86211af857b74db4509aad64', 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: 'b08699bf97018b3318771aa9c19a5848fae6e09f', class: "camera-selector-dropdown" }, h("div", { key: '24d010fde00991a80f92803511ae31ab23d2d4ee', class: "camera-selector-header" }, h("span", { key: 'ea0a21c5989cc28dff59bab870cfbb39b401b466' }, "Seleccionar C\u00E1mara"), h("button", { key: '2cbd997565bfaeceb799a95fcb8e26681bab22ef', class: "close-selector", onClick: () => this.toggleCameraSelector(), type: "button" }, "\u00D7")), h("div", { key: 'c00abb13cb7299ff325b85d3fcd44dcad7839e53', 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: 'e369c9ae07f0638b490d67bb01ad2a3a7f9b56a1', class: "device-info" }, h("small", { key: '04d4a8c24a1a4487939f87e8af240962705fd685' }, "Dispositivo: ", cameraInfo.deviceType)))), this.showManualCaptureButton && captureState.step === 'front' && !captureState.showFlipAnimation && !captureState.showSuccessAnimation && (h("div", { key: 'f955e8e5b6917d01477fd171e3c16a44a3d0a916', class: "manual-capture-section" }, h("button", { key: 'cb122ec84fec7afae8185e561f4da197a210b0dd', class: "manual-capture-button", onClick: () => this.takeManualScreenshot(), type: "button", disabled: captureState.isCapturing }, captureState.isCapturing ? 'Capturando...' : 'Capturar Frente'))))), captureState.isCapturing && (h("div", { key: '98d15bcd0afab9daa3bc64096535db74f795723b', class: "capture-animation" })), captureState.showFlipAnimation && (h("div", { key: '86132c96fc3ff3296c04c32c03ef624511d175fd', class: "flip-animation" }, h("div", { key: '05efba20dc5a4890a6de5650e67b5144853fa9d6', class: "id-card-icon" }), h("div", { key: 'a2e307b126a1c65681733e68bb737ed21e9cb119', class: "flip-text" }, "\u00A1Voltea tu identificaci\u00F3n!"))), captureState.showSuccessAnimation && (h("div", { key: '38e1e4f5c3c8a5002fc45c8490e3134e31b4652a', class: "success-animation" }, h("div", { key: '2f6faebde51e90059106e64ef50af51d9395c0cf', class: "check-icon" }), h("div", { key: '63385f75ab3933966f58bb954c13f4cacb4d5c21', class: "success-text" }, "\u00A1Proceso completado!"))), h("div", { key: '0853a33e794b26c727336fb13c9430d99b992d7f', class: `component-status status-${this.currentStatus.type}` }, (this.currentStatus.type === 'loading' || this.currentStatus.type === 'initializing') && (h("div", { key: 'e0d258b6897ebaa281473ee6633244a89d9b3cc2', class: "status-spinner" })), h("div", { key: 'e54b82a5a895734bdaeb95fc9bfb631fd4680c87', class: "status-content" }, h("div", { key: '57e712d858574138a9ffdefa298adc99765788f3', class: "status-message" }, this.currentStatus.message), this.currentStatus.description && (h("div", { key: 'b2e1240eb71ed506157353fe5e24d62c3a0da8ab', class: "status-description" }, this.currentStatus.description)))), this.debug && (h("div", { key: '3f3acb1ffc8e2c1d64cc8dd0e76bf64772a92def', class: "performance-monitor" }, h("div", { key: '83c1640404aad9552ad082a78327acf9facd79ad', class: "performance-expanded" }, h("div", { key: '18ee837b0fa64bae25285183cbf79733f7654153', class: "metrics-row" }, h("div", { key: 'b7d6b1c15b7e57e67d886c1bbc279573e795a3a3', class: "metric-compact" }, h("span", { key: '2b02e2323aadc064231ab8735a5810acc7bdd871', class: "metric-label" }, "FPS"), h("span", { key: 'd0cbe3e212f216834127456574eef6e61b4f3d6c', class: `metric-value ${this.performanceData.fps < 15 ? 'warning' : this.performanceData.fps < 10 ? 'danger' : 'good'}` }, this.performanceData.fps)), h("div", { key: '974538f93bbe0abb25eadba4a73d9a28f9c9ae0a', class: "metric-compact" }, h("span", { key: 'e04bc2180ede406b787f63f92eb6086d4e372c77', class: "metric-label" }, "MEM"), h("span", { key: 'c7911542d7a39a334b0a2f0f258256d11b297fa4', class: `metric-value ${this.performanceData.memoryUsage > 100 ? 'warning' : this.performanceData.memoryUsage > 200 ? 'danger' : 'good'}` }, this.performanceData.memoryUsage, "MB"))), h("div", { key: '92bbce4d85240a84d53afce554792ae51597e16f', class: "metrics-row" }, h("div", { key: '7b78afc87a85a229b582d870e85d3015ca54b941', class: "metric-compact" }, h("span", { key: '7579b2b804c8a869894c0ed5a89c71f19d493c69', class: "metric-label" }, "INF"), h("span", { key: '029733bca2504d1d3c1fef77519e0df90b28d5d1', class: `metric-value ${this.performanceData.inferenceTime > 100 ? 'warning' : this.performanceData.inferenceTime > 200 ? 'danger' : 'good'}` }, this.performanceData.inferenceTime, "ms")), h("div", { key: 'f7fe505877d8e9214c2c819e714e3039c95c0ec7', class: "metric-compact" }, h("span", { key: 'ecef2280e78aecb7b811f9fa14c7fdbda8c4d065', class: "metric-label" }, "FRAME"), h("span", { key: 'c6cadf43725c125f371d3d849e8b09953a3747fc', class: `metric-value ${this.performanceData.frameProcessingTime > 50 ? 'warning' : this.performanceData.frameProcessingTime > 100 ? 'danger' : 'good'}` }, this.performanceData.frameProcessingTime, "ms"))), h("div", { key: '832e8ee75377791a17279a3c7eee12fc45f21820', class: "metrics-row" }, h("div", { key: 'abb2dc9ce8a52374bc04e4b36560885427303fb6', class: "metric-compact" }, h("span", { key: '8f8c9cfab162a01807d07f44278f4f5889a1b206', class: "metric-label" }, "DET"), h("span", { key: '7359af4c236091e99b1f653ba20d8e3bd3acaf1b', class: "metric-value good" }, this.performanceData.successfulDetections, "/", this.performanceData.totalDetections)), h("div", { key: '7dd17d6d47289a11087a33c6104269899b72e46e', class: "metric-compact" }, h("span", { key: '0b1317becd3af6804e1fb1965593882886c51b15', class: "metric-label" }, "RATE"), h("span", { key: '9e94ba4257aa707e6c751852db48a17fb7ec8bae', class: `metric-value ${this.performanceData.detectionRate < 30 ? 'danger' : this.performanceData.detectionRate < 60 ? 'warning' : 'good'}` }, this.performanceData.detectionRate, "%")))))), h("div", { key: '77beb6f47153c43fddbc643fe00d1777ecfab295', class: "watermark" }, h("img", { key: 'e6aec0055f8ffb058dc2249fa1182dae06638a31', src: "https://storage.googleapis.com/jaak-static/commons/powered-by-jaak.png", alt: "Powered by Jaak" })))));
     }
     // Utility methods
     updateDetectionBoxes(boxes) {
@@ -868,6 +951,115 @@ 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
+            });
+            this.triggerRerender();
+            setTimeout(() => {
+                this.stateManager.updateCaptureState({
+                    showFlipAnimation: false,
+                    isDetectionPaused: false
+                });
+                this.triggerRerender();
+                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 +1493,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 +1607,9 @@ export class JaakStamps {
             "cameraInfoWithAutofocus": {},
             "currentStatus": {},
             "performanceData": {},
-            "backDocumentTimerRemaining": {}
+            "backDocumentTimerRemaining": {},
+            "showManualCaptureButton": {},
+            "captureStateVersion": {}
         };
     }
     static get events() {