@neofaceid/web-sdk 1.32.0 → 1.34.0

package/dist/index.d.ts

@@ -91,6 +91,14 @@ export declare interface AuthorizeOptions {
     onSuccess?: (result: LivenessChallengeResult) => void;
     onError?: (error: NeoFaceError) => void;
     onCancel?: () => void;
+    /**
+     * NEO-420 · US14.9 — "screen flash" assistivo: quando o frame está muito
+     * escuro, inverte o fundo para branco alto brilho para usar a tela como
+     * fonte de luz. Só ajuda quando faz diferença: se não subir o brilho,
+     * reverte. Nunca usado como sinal de liveness (essa decisão é do servidor).
+     * Default: `true`.
+     */
+    autoLighting?: boolean;
 }
 
 export declare class BiometricCaptureModal {
@@ -1626,7 +1634,7 @@ export declare const validateToken: (applicationToken: string) => Promise<boolea
  * MINOR: Incrementado quando adicionamos funcionalidades mantendo compatibilidade
  * PATCH: Incrementado quando corrigimos bugs mantendo compatibilidade
  */
-export declare const VERSION = "1.32.0";
+export declare const VERSION = "1.34.0";
 
 /**
  * Executa `fn(sessionId)`. Se o servidor devolver 410 (sessão consumida/expirada),

package/dist/neoface-id-sdk.es.js

@@ -10866,7 +10866,7 @@ const biometricDetection = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.
   initializeBiometricDetection,
   isAdvancedDetectionAvailable
 }, Symbol.toStringTag, { value: "Module" }));
-const VERSION = "1.32.0";
+const VERSION = "1.34.0";
 const RELEASE_DATE = "2026-09-02";
 let cachedSession = null;
 function getCachedCaptureSession() {
@@ -12459,6 +12459,201 @@ function AuthorizePermissionDenied({
     ] })
   ] });
 }
+function measureFrameBrightness(video, options = {}) {
+  if (!video || video.videoWidth === 0 || video.videoHeight === 0) return 0;
+  const sample = options.sample ?? 64;
+  const vw = video.videoWidth;
+  const vh = video.videoHeight;
+  const roi = options.roi ?? centerRoi(vw, vh, 0.4);
+  const canvas = options.scratch ?? document.createElement("canvas");
+  canvas.width = sample;
+  canvas.height = sample;
+  const ctx = canvas.getContext("2d", { willReadFrequently: true });
+  if (!ctx) return 0;
+  try {
+    ctx.drawImage(
+      video,
+      roi.x,
+      roi.y,
+      roi.width,
+      roi.height,
+      0,
+      0,
+      sample,
+      sample
+    );
+    const data = ctx.getImageData(0, 0, sample, sample).data;
+    return computeLumaMean(data);
+  } catch {
+    return 0;
+  }
+}
+function centerRoi(vw, vh, fraction) {
+  const w = Math.round(vw * fraction);
+  const h = Math.round(vh * fraction);
+  return {
+    x: Math.round((vw - w) / 2),
+    y: Math.round((vh - h) / 2),
+    width: w,
+    height: h
+  };
+}
+function computeLumaMean(rgba) {
+  const len = rgba.length;
+  if (len === 0) return 0;
+  let sum = 0;
+  let n = 0;
+  for (let i = 0; i < len; i += 4) {
+    const r = rgba[i];
+    const g = rgba[i + 1];
+    const b = rgba[i + 2];
+    sum += 0.2126 * r + 0.7152 * g + 0.0722 * b;
+    n += 1;
+  }
+  if (n === 0) return 0;
+  return sum / (n * 255);
+}
+const DARK_THRESHOLD = 0.235;
+const IMPROVEMENT_TARGET = 0.12;
+const SAMPLE_INTERVAL_MS = 600;
+const EVALUATION_DELAY_MS = 600;
+const MIN_TOGGLE_MS = 3e3;
+function useScreenFlash(videoRef, options = {}) {
+  const enabled = options.enabled ?? true;
+  const darkThreshold = options.darkThreshold ?? DARK_THRESHOLD;
+  const improvementTarget = options.improvementTarget ?? IMPROVEMENT_TARGET;
+  const sampleIntervalMs = options.sampleIntervalMs ?? SAMPLE_INTERVAL_MS;
+  const minToggleMs = options.minToggleMs ?? MIN_TOGGLE_MS;
+  const [flashOn, setFlashOn] = useState(false);
+  const [lastBrightness, setLastBrightness] = useState(0);
+  const darkStreakRef = useRef(0);
+  const lastToggleAtRef = useRef(0);
+  const preFlashBrightnessRef = useRef(null);
+  const flashOnRef = useRef(false);
+  const scratchRef = useRef(null);
+  useEffect(() => {
+    flashOnRef.current = flashOn;
+  }, [flashOn]);
+  useEffect(() => {
+    if (!enabled) {
+      setFlashOn(false);
+      return () => {
+      };
+    }
+    if (typeof document !== "undefined" && !scratchRef.current) {
+      scratchRef.current = document.createElement("canvas");
+    }
+    let timer = null;
+    let evalTimer = null;
+    let disposed = false;
+    const tick = () => {
+      if (disposed) return;
+      const b = measureFrameBrightness(videoRef.current, {
+        scratch: scratchRef.current ?? void 0
+      });
+      setLastBrightness(b);
+      const now = Date.now();
+      if (!flashOnRef.current) {
+        if (b > 0 && b < darkThreshold) {
+          darkStreakRef.current += 1;
+        } else {
+          darkStreakRef.current = 0;
+        }
+        if (darkStreakRef.current >= 2 && now - lastToggleAtRef.current >= minToggleMs) {
+          preFlashBrightnessRef.current = b;
+          lastToggleAtRef.current = now;
+          flashOnRef.current = true;
+          setFlashOn(true);
+          darkStreakRef.current = 0;
+          evalTimer = setTimeout(() => {
+            if (disposed) return;
+            const after = measureFrameBrightness(videoRef.current, {
+              scratch: scratchRef.current ?? void 0
+            });
+            const gained = after - (preFlashBrightnessRef.current ?? 0);
+            if (gained < improvementTarget) {
+              lastToggleAtRef.current = Date.now();
+              flashOnRef.current = false;
+              setFlashOn(false);
+            }
+            preFlashBrightnessRef.current = null;
+          }, EVALUATION_DELAY_MS);
+        }
+      }
+    };
+    timer = setInterval(tick, sampleIntervalMs);
+    tick();
+    return () => {
+      disposed = true;
+      if (timer) clearInterval(timer);
+      if (evalTimer) clearTimeout(evalTimer);
+    };
+  }, [enabled, darkThreshold, improvementTarget, sampleIntervalMs, minToggleMs, videoRef]);
+  return { flashOn, lastBrightness };
+}
+function ScreenFlashOverlay({
+  active,
+  zIndex = 10001,
+  onDismiss
+}) {
+  if (!active) return null;
+  const overlayStyle = {
+    position: "fixed",
+    inset: 0,
+    background: "#FFFFFF",
+    zIndex,
+    pointerEvents: "none",
+    animation: "nfid-flash-in 200ms ease-out"
+  };
+  const hintStyle = {
+    position: "fixed",
+    top: 12,
+    left: "50%",
+    transform: "translateX(-50%)",
+    zIndex: zIndex + 1,
+    background: "rgba(10,19,32,.72)",
+    color: "#FFFFFF",
+    fontSize: 12,
+    fontWeight: 600,
+    letterSpacing: 0.2,
+    padding: "6px 12px",
+    borderRadius: 999,
+    pointerEvents: onDismiss ? "auto" : "none",
+    display: "flex",
+    alignItems: "center",
+    gap: 8
+  };
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx("style", { children: `
+        @keyframes nfid-flash-in { from { opacity: 0 } to { opacity: 1 } }
+        @media (prefers-reduced-motion: reduce) {
+          .nfid-screen-flash { animation: none !important; }
+        }
+      ` }),
+    /* @__PURE__ */ jsx("div", { className: "nfid-screen-flash", style: overlayStyle, "aria-hidden": "true" }),
+    /* @__PURE__ */ jsxs("div", { className: "nfid-screen-flash-hint", style: hintStyle, role: "status", children: [
+      "Aumentando a luz da tela",
+      onDismiss && /* @__PURE__ */ jsx(
+        "button",
+        {
+          type: "button",
+          onClick: onDismiss,
+          "aria-label": "Desligar iluminação assistiva",
+          style: {
+            background: "transparent",
+            border: "none",
+            color: "#FFFFFF",
+            cursor: "pointer",
+            fontSize: 14,
+            lineHeight: 1,
+            padding: "0 4px"
+          },
+          children: "×"
+        }
+      )
+    ] })
+  ] });
+}
 const STYLE_ID = "neofaceid-authorize-styles";
 const GESTURE_TO_GLYPH = {
   center: "center",
@@ -12502,6 +12697,7 @@ function AuthorizeModalComponent({
   onSuccess,
   onError,
   onCancel,
+  autoLighting = true,
   onClose
 }) {
   const videoRef = useRef(null);
@@ -12513,6 +12709,10 @@ function AuthorizeModalComponent({
   const [failureAt, setFailureAt] = useState(void 0);
   const [runCounter, setRunCounter] = useState(0);
   const cancelRef = useRef(false);
+  const [flashDismissed, setFlashDismissed] = useState(false);
+  const { flashOn } = useScreenFlash(videoRef, {
+    enabled: autoLighting && !flashDismissed && phase === "challenging"
+  });
   const locale = getLocale();
   const headerAppName = appName ?? getAppName() ?? "sua aplicação";
   const headerAmount = typeof amount === "number" && Number.isFinite(amount) ? formatCurrency(amount, locale) : null;
@@ -12664,42 +12864,51 @@ function AuthorizeModalComponent({
       }
     ) });
   }
-  return /* @__PURE__ */ jsx(Sheet, { open: true, onDismiss: void 0, dismissOnOverlay: false, ariaLabel: "Autorização por biometria", children: /* @__PURE__ */ jsxs("div", { style: { position: "relative" }, children: [
+  return /* @__PURE__ */ jsxs(Sheet, { open: true, onDismiss: void 0, dismissOnOverlay: false, ariaLabel: "Autorização por biometria", children: [
     /* @__PURE__ */ jsx(
-      "button",
+      ScreenFlashOverlay,
       {
-        type: "button",
-        className: "nfid-authorize-close",
-        onClick: handleClose,
-        "aria-label": "Cancelar autorização",
-        children: /* @__PURE__ */ jsx("svg", { width: "20", height: "20", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", "aria-hidden": "true", children: /* @__PURE__ */ jsx("path", { d: "M18 6L6 18M6 6l12 12" }) })
+        active: flashOn,
+        onDismiss: () => setFlashDismissed(true)
       }
     ),
-    /* @__PURE__ */ jsxs("div", { className: "nfid-authorize-header", children: [
-      /* @__PURE__ */ jsx("span", { className: "nfid-authorize-appname", children: headerAppName }),
-      headerAmount && /* @__PURE__ */ jsxs("span", { className: "nfid-authorize-amount", children: [
-        "Autorizando ",
-        headerAmount
-      ] }),
-      /* @__PURE__ */ jsx("span", { className: "nfid-authorize-brand", children: "NeoFaceID" })
-    ] }),
-    /* @__PURE__ */ jsx("div", { style: { display: "flex", justifyContent: "center" }, children: /* @__PURE__ */ jsx(ChallengeRing, { progress, size: 220, children: /* @__PURE__ */ jsx("video", { ref: videoRef, className: "nfid-authorize-video", autoPlay: true, muted: true, playsInline: true }) }) }),
-    /* @__PURE__ */ jsxs("div", { style: { display: "flex", alignItems: "center", justifyContent: "center", gap: 12, marginTop: 16 }, children: [
-      /* @__PURE__ */ jsx(ChallengeGlyph, { gesture: gestureKey, size: 40 }),
+    /* @__PURE__ */ jsxs("div", { style: { position: "relative" }, children: [
       /* @__PURE__ */ jsx(
-        "p",
+        "button",
         {
-          className: "nfid-authorize-instruction",
-          "aria-live": "assertive",
-          style: { margin: 0 },
-          children: instruction
+          type: "button",
+          className: "nfid-authorize-close",
+          onClick: handleClose,
+          "aria-label": "Cancelar autorização",
+          children: /* @__PURE__ */ jsx("svg", { width: "20", height: "20", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", "aria-hidden": "true", children: /* @__PURE__ */ jsx("path", { d: "M18 6L6 18M6 6l12 12" }) })
         }
-      )
-    ] }),
-    phase === "preparing" && /* @__PURE__ */ jsx("p", { className: "nfid-authorize-support", children: "Ligando sua câmera…" }),
-    /* @__PURE__ */ jsx("div", { className: "nfid-authorize-actions", children: /* @__PURE__ */ jsx(Button, { variant: "ghost", onClick: handleClose, children: "Não consigo fazer esse movimento" }) }),
-    /* @__PURE__ */ jsx("div", { className: "nfid-authorize-footer", children: /* @__PURE__ */ jsx("span", { className: "nfid-authorize-seal", children: "Protegido por NeoFaceID" }) })
-  ] }) });
+      ),
+      /* @__PURE__ */ jsxs("div", { className: "nfid-authorize-header", children: [
+        /* @__PURE__ */ jsx("span", { className: "nfid-authorize-appname", children: headerAppName }),
+        headerAmount && /* @__PURE__ */ jsxs("span", { className: "nfid-authorize-amount", children: [
+          "Autorizando ",
+          headerAmount
+        ] }),
+        /* @__PURE__ */ jsx("span", { className: "nfid-authorize-brand", children: "NeoFaceID" })
+      ] }),
+      /* @__PURE__ */ jsx("div", { style: { display: "flex", justifyContent: "center" }, children: /* @__PURE__ */ jsx(ChallengeRing, { progress, size: 220, children: /* @__PURE__ */ jsx("video", { ref: videoRef, className: "nfid-authorize-video", autoPlay: true, muted: true, playsInline: true }) }) }),
+      /* @__PURE__ */ jsxs("div", { style: { display: "flex", alignItems: "center", justifyContent: "center", gap: 12, marginTop: 16 }, children: [
+        /* @__PURE__ */ jsx(ChallengeGlyph, { gesture: gestureKey, size: 40 }),
+        /* @__PURE__ */ jsx(
+          "p",
+          {
+            className: "nfid-authorize-instruction",
+            "aria-live": "assertive",
+            style: { margin: 0 },
+            children: instruction
+          }
+        )
+      ] }),
+      phase === "preparing" && /* @__PURE__ */ jsx("p", { className: "nfid-authorize-support", children: "Ligando sua câmera…" }),
+      /* @__PURE__ */ jsx("div", { className: "nfid-authorize-actions", children: /* @__PURE__ */ jsx(Button, { variant: "ghost", onClick: handleClose, children: "Não consigo fazer esse movimento" }) }),
+      /* @__PURE__ */ jsx("div", { className: "nfid-authorize-footer", children: /* @__PURE__ */ jsx("span", { className: "nfid-authorize-seal", children: "Protegido por NeoFaceID" }) })
+    ] })
+  ] });
 }
 async function progressiveHold(setter) {
   const total = 1500;
@@ -12935,7 +13144,7 @@ class DocumentCaptureModal {
           </div>
           <div class="neoface-doc-instruction">
             <svg class="neoface-doc-instruction-icon" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="5"/><path d="M12 1v2M12 21v2M4.22 4.22l1.42 1.42M18.36 18.36l1.42 1.42M1 12h2M21 12h2M4.22 19.78l1.42-1.42M18.36 5.64l1.42-1.42"/></svg>
-            <span>Evite reflexos e sombras</span>
+            <span>Sem reflexo do flash sobre o texto</span>
           </div>
         </div>
       </div>
@@ -12991,15 +13200,16 @@ class DocumentCaptureModal {
       <div class="neoface-doc-body">
         <div class="neoface-doc-preview-single">
           <span class="neoface-doc-preview-label">${label}</span>
-          <img class="neoface-doc-preview-img neoface-doc-preview-current" />
+          <img class="neoface-doc-preview-img neoface-doc-preview-current" alt="Prévia do documento capturado" />
         </div>
-        
+
+        <h3 class="neoface-doc-preview-question" id="neoface-doc-preview-question">Está legível?</h3>
         <div class="neoface-doc-preview-hint">
           <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="10"/><path d="M12 16v-4M12 8h.01"/></svg>
-          <span>Verifique se todos os dados estão legíveis</span>
+          <span>Confira se dá para ler nome, número e data sem esforço.</span>
         </div>
       </div>
-      
+
       <div class="neoface-doc-footer">
         <button class="neoface-doc-btn neoface-doc-btn-secondary neoface-doc-retake-btn">
           <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
@@ -13008,11 +13218,11 @@ class DocumentCaptureModal {
           </svg>
           Refazer
         </button>
-        <button class="neoface-doc-btn neoface-doc-btn-success neoface-doc-confirm-btn">
+        <button class="neoface-doc-btn neoface-doc-btn-primary neoface-doc-confirm-btn">
           <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
             <path d="M20 6L9 17l-5-5"/>
           </svg>
-          ${isLastStep ? "Confirmar e Enviar" : "Próximo"}
+          ${isLastStep ? "Sim, enviar" : "Sim, próximo"}
         </button>
       </div>
       
@@ -13429,8 +13639,8 @@ class DocumentCaptureModal {
       }
       
       .neoface-doc-select-option:hover {
-        background: rgba(0, 200, 255, 0.1);
-        border-color: rgba(0, 200, 255, 0.4);
+        background: rgba(0, 145, 246, 0.1);
+        border-color: rgba(0, 145, 246, 0.4);
         transform: translateX(4px);
       }
       
@@ -13440,7 +13650,7 @@ class DocumentCaptureModal {
         justify-content: center;
         width: 44px;
         height: 44px;
-        background: rgba(0, 200, 255, 0.15);
+        background: rgba(0, 145, 246, 0.15);
         border-radius: 12px;
         color: #0091F6;
       }
@@ -13476,8 +13686,8 @@ class DocumentCaptureModal {
         align-items: center;
         justify-content: center;
         padding: 14px 16px;
-        background: rgba(0, 200, 255, 0.08);
-        border: 1px solid rgba(0, 200, 255, 0.15);
+        background: rgba(0, 145, 246, 0.08);
+        border: 1px solid rgba(0, 145, 246, 0.15);
         border-radius: 10px;
         color: rgba(255, 255, 255, 0.8);
         font-size: 13px;
@@ -13494,13 +13704,13 @@ class DocumentCaptureModal {
         flex-shrink: 0;
       }
       
-      /* Camera */
+      /* Camera — ISO/IEC 7810 ID-1 (85.60 × 53.98 mm ≈ 1.586:1) */
       .neoface-doc-camera-container {
         position: relative;
         background: #000;
         border-radius: 16px;
         overflow: hidden;
-        aspect-ratio: 4/3;
+        aspect-ratio: 1.586 / 1;
       }
       
       .neoface-doc-video {
@@ -13522,20 +13732,19 @@ class DocumentCaptureModal {
         pointer-events: none;
       }
       
+      /* Moldura Focus Frame — proporção ID-1 (1.586:1), sem borda contínua. */
       .neoface-doc-frame {
-        width: 75%;
-        height: 65%;
+        width: 82%;
+        aspect-ratio: 1.586 / 1;
         position: relative;
-        border: 2px dashed rgba(0, 200, 255, 0.5);
         border-radius: 12px;
-        background: rgba(0, 200, 255, 0.03);
       }
-      
+
       .neoface-doc-corner {
         position: absolute;
         width: 28px;
         height: 28px;
-        border-color: #0091F6;
+        border-color: var(--nfid-action, #0059C4);
         border-style: solid;
       }
       
@@ -13624,23 +13833,31 @@ class DocumentCaptureModal {
         width: 75%;
         height: auto;
         border-radius: 12px;
-        border: 2px solid rgba(0, 200, 255, 0.3);
+        border: 2px solid rgba(0, 145, 246, 0.3);
         box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
       }
       
+      .neoface-doc-preview-question {
+        margin: 12px 0 4px;
+        font-size: 17px;
+        font-weight: 700;
+        color: var(--nfid-text, #0A1320);
+        text-align: center;
+      }
+
       .neoface-doc-preview-hint {
         display: flex;
         align-items: center;
         gap: 10px;
         padding: 12px 16px;
-        background: rgba(0, 200, 255, 0.08);
-        border: 1px solid rgba(0, 200, 255, 0.15);
+        background: rgba(0, 145, 246, 0.08);
+        border: 1px solid rgba(0, 145, 246, 0.15);
         border-radius: 10px;
         font-size: 13px;
         color: rgba(255, 255, 255, 0.8);
         margin-top: 8px;
       }
-      
+
       .neoface-doc-preview-hint svg {
         color: #0091F6;
         flex-shrink: 0;
@@ -13675,7 +13892,7 @@ class DocumentCaptureModal {
       
       .neoface-doc-btn-primary:hover {
         transform: translateY(-2px);
-        box-shadow: 0 6px 20px rgba(0, 200, 255, 0.4);
+        box-shadow: 0 6px 20px rgba(0, 145, 246, 0.4);
       }
       
       .neoface-doc-btn-success {