@simprints/simface-sdk 0.11.1 → 0.12.1

package/dist/simface-sdk.umd.cjs

@@ -108,7 +108,8 @@
     `}async beginCapture(){if(!this.active||this.captureState==="starting"||this.captureState==="live")return;this.stopSession(),this.resetState(),this.captureState="starting",this.feedbackMessage="Requesting camera access...",this.feedbackTone="neutral";const t=wc({capturePreference:this.capturePreference,allowMediaPickerFallback:this.allowMediaPickerFallback},this);t.label=this.label,t.idleFeedbackLabel=this.idleFeedbackLabel,t.confirmLabel=this.confirmLabel,t.captureLabel=this.captureLabel,t.retakeLabel=this.retakeLabel,t.retryLabel=this.retryLabel;const r=await Vu({capturePreference:t.capturePreference}),s=Gu(t,r),n=s.steps.find(a=>a==="auto-camera"||a==="manual-camera")??null,i=s.steps.includes("media-picker");if(!n){await this.startMediaPicker();return}try{this.stream=await zu()}catch(a){if(a instanceof Vn&&i){await this.startMediaPicker();return}this.handleCaptureError(a);return}if(await this.updateComplete,!this.active){this.stopSession();return}const o=this.embeddedVideoElement;if(!o||!this.stream){this.handleCaptureError(new Error("Inline camera preview could not be created."));return}o.srcObject=this.stream,this.currentCaptureStep=n,this.sessionController=new F2({videoElement:o,initialMode:n==="auto-camera"?"auto":"manual",copy:{autoReadyMessage:"Center your face in the oval. We will capture automatically when framing looks good.",manualReadyMessage:"When you are ready, press Take photo.",autoUnavailableMessage:"Automatic capture is unavailable. Press Take photo instead.",retakeReadyMessage:"When you are ready, press Take photo."},onStateChange:a=>this.applySessionState(a)});try{await this.sessionController.start()}catch(a){this.handleCaptureError(a)}}async startMediaPicker(){this.stopSession(),this.currentCaptureStep="media-picker",this.captureState="starting",this.feedbackMessage="Opening media picker...",this.feedbackTone="neutral";try{const t=await Ac();if(!t){this.handleCancel();return}await this.showPickedPreview(t)}catch(t){this.handleCaptureError(t)}}applySessionState(t){if(this.captureState=t.phase,this.feedbackMessage=t.feedbackMessage,this.feedbackTone=t.feedbackTone,this.syncProgress(t.countdownProgress),this.qualityResult=t.qualityResult,this.errorMessage=t.phase==="error"?t.errorMessage:"",this.canTakePhoto=t.canTakePhoto,this.captureMode=t.mode,t.phase==="preview"){this.capturedBlob=t.previewBlob,this.setPreviewBlob(t.previewBlob);return}this.capturedBlob=null,this.clearPreviewUrl()}async showPickedPreview(t){const r=await this.assessPickedBlob(t);this.capturedBlob=t,this.qualityResult=r,this.captureState="preview",this.feedbackMessage=(r==null?void 0:r.message)??"Review this capture before continuing.",this.feedbackTone=r?r.passesQualityChecks?"success":"error":"neutral",this.syncProgress(r?1:0),this.setPreviewBlob(t)}handleManualCapture(){var t;(t=this.sessionController)==null||t.takePhotoNow().catch(r=>{this.handleCaptureError(r)})}handleRetake(){var t;if(this.capturedBlob=null,this.qualityResult=null,this.clearPreviewUrl(),this.currentCaptureStep==="media-picker"){this.active&&this.beginCapture();return}(t=this.sessionController)==null||t.retake().catch(r=>{this.handleCaptureError(r)})}handleConfirm(){if(!this.capturedBlob)return;const t=this.capturedBlob;this.active=!1,this.stopSession(),this.resetState(),this.dispatchCaptured(t)}handleCancel(){this.active=!1,this.stopSession(),this.resetState(),this.dispatchCancelled()}handleCaptureError(t){this.stopSession(),this.errorMessage=t instanceof Error?t.message:"Capture failed",this.captureState="error",this.feedbackMessage=this.errorMessage,this.feedbackTone="error",this.dispatchError(this.errorMessage)}endCapture(){this.stopSession(),this.resetState()}stopSession(){var r;(r=this.sessionController)==null||r.stop(),this.sessionController=null,this.currentCaptureStep=null,this.stream&&(this.stream.getTracks().forEach(s=>s.stop()),this.stream=null);const t=this.embeddedVideoElement;t&&(t.srcObject=null),this.syncProgress(0)}resetState(){this.clearPreviewUrl(),this.captureState="idle",this.errorMessage="",this.feedbackMessage=this.idleFeedbackLabel,this.feedbackTone="neutral",this.syncProgress(0),this.qualityResult=null,this.capturedBlob=null,this.captureMode="auto"}syncProgress(t){this.style.setProperty("--capture-progress",String(t))}setPreviewBlob(t){this.clearPreviewUrl(),this.previewUrl=URL.createObjectURL(t)}clearPreviewUrl(){this.previewUrl&&(URL.revokeObjectURL(this.previewUrl),this.previewUrl="")}dispatchCaptured(t){this.dispatchEvent(new CustomEvent("simface-captured",{detail:{imageBlob:t},bubbles:!0,composed:!0}))}dispatchCancelled(){this.dispatchEvent(new CustomEvent("simface-cancelled",{bubbles:!0,composed:!0}))}dispatchError(t){this.dispatchEvent(new CustomEvent("simface-error",{detail:{error:t},bubbles:!0,composed:!0}))}feedbackClass(){return this.feedbackTone==="success"?"quality-good":this.feedbackTone==="error"?"quality-bad":this.feedbackTone==="manual"?"quality-manual":"quality-neutral"}async assessPickedBlob(t){try{const r=await Gn(t);return await Dn(r)}catch{return null}}},_.SimFaceCapture.styles=s2`
     :host {
       display: block;
-      font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+      font-family: 'Mulish', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+      color: #212529;
       max-width: 400px;
       margin: 0 auto;
       text-align: center;
@@ -123,9 +124,9 @@
     .container {
       position: relative;
       padding: 16px;
-      border: 1px solid #e0e0e0;
+      border: 1px solid #E0E0E0;
       border-radius: 16px;
-      background: #fafafa;
+      background: #F6F6F6;
     }
 
     .close-btn {
@@ -142,7 +143,7 @@
       border: none;
       border-radius: 50%;
       background: rgba(0, 0, 0, 0.06);
-      color: #49454f;
+      color: #5D5E5E;
       cursor: pointer;
       transition: background-color 0.15s;
     }
@@ -165,7 +166,7 @@
 
     .capture-copy {
       margin: 0;
-      color: #334155;
+      color: #5D5E5E;
       text-align: center;
       width: 100%;
     }
@@ -177,8 +178,8 @@
       aspect-ratio: 3 / 4;
       border-radius: 22px;
       background:
-        radial-gradient(circle at top, rgba(56, 189, 248, 0.16), transparent 30%),
-        linear-gradient(180deg, #0f172a, #020617);
+        radial-gradient(circle at top, rgba(0, 179, 209, 0.16), transparent 30%),
+        linear-gradient(180deg, #1a1a1a, #0d0d0d);
       box-shadow: inset 0 0 0 1px rgba(148, 163, 184, 0.2);
     }
 
@@ -210,7 +211,7 @@
     }
 
     .guide-mask {
-      fill: rgba(51, 65, 85, 0.75);
+      fill: rgba(42, 42, 42, 0.75);
       fill-rule: evenodd;
     }
 
@@ -224,7 +225,7 @@
 
     .ring-progress {
       fill: none;
-      stroke: #22c55e;
+      stroke: #00B3D1;
       stroke-width: 2.8;
       stroke-linecap: round;
       stroke-linejoin: round;
@@ -248,24 +249,25 @@
       border: none;
       border-radius: 100px;
       font-size: 15px;
-      font-weight: 600;
-      letter-spacing: 0.02em;
+      font-weight: 700;
+      letter-spacing: 0.04em;
+      text-transform: var(--simface-button-text-transform, uppercase);
       cursor: pointer;
       transition: background-color 0.15s, box-shadow 0.15s;
     }
 
     .btn-primary {
-      background: #2563eb;
+      background: #00B3D1;
       color: white;
     }
 
     .btn-primary:hover {
-      background: #1d4ed8;
-      box-shadow: 0 1px 3px rgba(37, 99, 235, 0.3);
+      background: #009DB8;
+      box-shadow: 0 1px 3px rgba(0, 179, 209, 0.3);
     }
 
     .btn-primary:disabled {
-      background: #93c5fd;
+      background: #80D9E8;
       cursor: not-allowed;
       box-shadow: none;
     }
@@ -291,12 +293,12 @@
     }
 
     .btn-secondary {
-      background: #e5e7eb;
-      color: #374151;
+      background: #E0E0E0;
+      color: #212529;
     }
 
     .btn-secondary:hover {
-      background: #d1d5db;
+      background: #D0D0D0;
     }
 
     .quality-msg {
@@ -323,21 +325,21 @@
     }
 
     .quality-neutral {
-      background: #e2e8f0;
-      color: #0f172a;
+      background: #E0E0E0;
+      color: #212529;
     }
 
     .quality-manual {
-      background: #e0f2fe;
-      color: #0f172a;
+      background: #E0F7FB;
+      color: #212529;
     }
 
     .spinner {
       display: inline-block;
       width: 24px;
       height: 24px;
-      border: 3px solid #e5e7eb;
-      border-top: 3px solid #2563eb;
+      border: 3px solid #E0E0E0;
+      border-top: 3px solid #00B3D1;
       border-radius: 50%;
       animation: spin 0.8s linear infinite;
       margin: 12px auto;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@simprints/simface-sdk",
-  "version": "0.11.1",
+  "version": "0.12.1",
   "simprints:releaseMajorVersion": "0",
   "description": "SimFace facial recognition SDK for web-based KYC workflows",
   "type": "module",