@beltec/face-gate 0.0.0-stage → 0.1.1

package/dist/index.js

@@ -0,0 +1,653 @@
+"use client";
+
+// src/react/FaceGate.tsx
+import { useEffect, useRef, useState } from "react";
+
+// src/core/types.ts
+var FaceGateError = class extends Error {
+  constructor(code, message, status, resetsAt) {
+    super(message);
+    this.code = code;
+    this.status = status;
+    this.resetsAt = resetsAt;
+    this.name = "FaceGateError";
+  }
+};
+
+// src/core/stream.ts
+var CLOSE = {
+  4400: ["bad_request", "A API recusou a mensagem da c\xE2mera."],
+  4401: ["unauthorized", "Sess\xE3o da c\xE2mera expirada. Tente de novo."],
+  4402: ["token_month_limit", "Limite mensal de tokens atingido."],
+  4403: ["forbidden", "Acesso negado para esta valida\xE7\xE3o."],
+  4408: ["bad_request", "A c\xE2mera ficou ligada tempo demais."],
+  4429: ["token_window_limit", "Limite de uso atingido. Aguarde e tente de novo."],
+  1011: ["server", "Erro interno na API."]
+};
+var DEFAULT_FPS = 6;
+var MAX_BUFFERED = 32 * 1024;
+function openFaceGateStream(url, ticket, options, handlers, WS = WebSocket) {
+  const ws = new WS(url);
+  ws.binaryType = "arraybuffer";
+  let closedByUs = false;
+  let finished = false;
+  let seq = 0;
+  ws.onopen = () => ws.send(JSON.stringify({ type: "start", token: ticket, ...options }));
+  ws.onmessage = (e) => {
+    if (typeof e.data !== "string") return;
+    const m = JSON.parse(e.data);
+    if (m.type === "ready") handlers.onReady?.(Number(m.max_fps) || DEFAULT_FPS);
+    else if (m.type === "frame") handlers.onFrame?.(m.seq, m.result, m.stable ?? { ms: 0, needed: 0 });
+    else if (m.type === "captured") handlers.onCaptured?.(m.seq);
+    else if (m.type === "final") {
+      finished = true;
+      handlers.onFinal?.(m.seq, m.result);
+    }
+  };
+  ws.onclose = (e) => {
+    if (closedByUs || finished) return;
+    const [code, message] = CLOSE[e.code] ?? ["network", e.reason || "Conex\xE3o com a API perdida."];
+    handlers.onError?.(new FaceGateError(code, e.reason || message, e.code));
+  };
+  const open = () => ws.readyState === 1;
+  return {
+    sendFrame: (frame) => {
+      if (!open() || ws.bufferedAmount > MAX_BUFFERED) return null;
+      ws.send(frame);
+      return ++seq;
+    },
+    configure: (o) => {
+      if (open()) ws.send(JSON.stringify({ type: "config", ...o }));
+    },
+    reset: () => {
+      finished = false;
+      if (open()) ws.send(JSON.stringify({ type: "reset" }));
+    },
+    close: () => {
+      closedByUs = true;
+      if (ws.readyState <= 1) ws.close(1e3);
+    }
+  };
+}
+
+// src/react/Emblem.tsx
+import { useId } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+function Emblem({ animated = false, className }) {
+  const id = useId().replace(/:/g, "");
+  const shield = "M4 4.5Q4 4 4.5 4H43.5Q44 4 44 4.5V30C44 42 35 52 24 52C13 52 4 42 4 30Z";
+  return /* @__PURE__ */ jsxs(
+    "svg",
+    {
+      viewBox: "0 0 48 56",
+      fill: "none",
+      "aria-hidden": "true",
+      className: [className, animated ? "fg-emblem-animated" : ""].filter(Boolean).join(" "),
+      children: [
+        /* @__PURE__ */ jsxs("defs", { children: [
+          /* @__PURE__ */ jsxs("linearGradient", { id: `${id}g`, x1: "0", y1: "0", x2: "1", y2: "1", children: [
+            /* @__PURE__ */ jsx("stop", { offset: "0", stopColor: "#e3c35c" }),
+            /* @__PURE__ */ jsx("stop", { offset: "0.55", stopColor: "#c9a43e" }),
+            /* @__PURE__ */ jsx("stop", { offset: "1", stopColor: "#a8852a" })
+          ] }),
+          /* @__PURE__ */ jsx("clipPath", { id: `${id}c`, children: /* @__PURE__ */ jsx("path", { d: shield }) })
+        ] }),
+        /* @__PURE__ */ jsx("path", { className: "fg-emblem-shield", d: shield, fill: `url(#${id}g)` }),
+        /* @__PURE__ */ jsx("g", { clipPath: `url(#${id}c)`, children: /* @__PURE__ */ jsx("path", { className: "fg-emblem-band", d: "M-2 41.2L50 10.8", stroke: "#24282d", strokeWidth: "9.5", pathLength: 1 }) }),
+        /* @__PURE__ */ jsx("path", { className: "fg-emblem-line", d: "M10.5 33.9L37.5 18.1", stroke: "#c9a43e", strokeWidth: "0.9", pathLength: 1 }),
+        /* @__PURE__ */ jsx("circle", { className: "fg-emblem-dot", cx: "10.5", cy: "33.9", r: "1.6", fill: "#c9a43e" }),
+        /* @__PURE__ */ jsx("circle", { className: "fg-emblem-dot fg-emblem-dot-2", cx: "37.5", cy: "18.1", r: "1.6", fill: "#c9a43e" }),
+        /* @__PURE__ */ jsxs("g", { className: "fg-emblem-lens", children: [
+          /* @__PURE__ */ jsx("circle", { cx: "24", cy: "26", r: "7.4", fill: "#24282d" }),
+          /* @__PURE__ */ jsx("circle", { cx: "24", cy: "26", r: "5.3", stroke: "#c9a43e", strokeWidth: "1.6" }),
+          /* @__PURE__ */ jsx("circle", { cx: "24", cy: "26", r: "2.6", fill: "#15181b", stroke: "#c9a43e", strokeWidth: "0.8" }),
+          /* @__PURE__ */ jsx("circle", { cx: "23", cy: "25", r: "0.8", fill: "#f1dc93" })
+        ] })
+      ]
+    }
+  );
+}
+
+// src/react/framing.ts
+var FULL = { x: 0, y: 0, s: 1 };
+var WHOLE = { x: 0, y: 0, w: 1, h: 1 };
+var FACE_H_TARGET = 0.4;
+var MIN_CROP = 0.5;
+var RETARGET = 0.03;
+var CENTER_TOLERANCE = 0.08;
+var clamp = (v, lo, hi) => Math.min(Math.max(v, lo), hi);
+function baseCrop(a) {
+  const s = Math.min(a.w, a.h);
+  return { s, x: a.x + (a.w - s) / 2, y: a.y + (a.h - s) / 2 };
+}
+function fitCrop(c, a) {
+  const s = Math.min(c.s, a.w, a.h);
+  return { s, x: clamp(c.x, a.x, a.x + a.w - s), y: clamp(c.y, a.y, a.y + a.h - s) };
+}
+function aimCrop(box, used, a) {
+  const cx = used.x + (box.xmin + box.xmax) / 2 * used.s;
+  const cy = used.y + (box.ymin + box.ymax) / 2 * used.s;
+  const maxS = Math.min(a.w, a.h);
+  const s = clamp((box.ymax - box.ymin) * used.s / FACE_H_TARGET, Math.min(MIN_CROP, maxS), maxS);
+  return fitCrop({ s, x: cx - s / 2, y: cy - s / 2 }, a);
+}
+var moved = (a, b) => Math.abs(a.x - b.x) + Math.abs(a.y - b.y) + Math.abs(a.s - b.s) > RETARGET;
+var ease = (c, t, k = 0.12) => ({
+  x: c.x + (t.x - c.x) * k,
+  y: c.y + (t.y - c.y) * k,
+  s: c.s + (t.s - c.s) * k
+});
+function cropTransform(c, mirror = true) {
+  const k = 1 / c.s;
+  const move = `translate(${-c.x * 100}%, ${-c.y * 100}%)`;
+  return mirror ? `translateX(100%) scale(${-k}, ${k}) ${move}` : `scale(${k}) ${move}`;
+}
+function overlayTransform(used, now, mirror = true) {
+  const k = used.s / now.s;
+  const dx = (used.x - now.x) / now.s;
+  const tx = mirror ? 1 - k - dx : dx;
+  const ty = (used.y - now.y) / now.s;
+  return `translate(${tx * 100}%, ${ty * 100}%) scale(${k})`;
+}
+function boxStyle(b, mirror) {
+  const left = mirror ? 1 - b.xmax : b.xmin;
+  return {
+    left: `${left * 100}%`,
+    top: `${b.ymin * 100}%`,
+    width: `${(b.xmax - b.xmin) * 100}%`,
+    height: `${(b.ymax - b.ymin) * 100}%`
+  };
+}
+function areaFromPixels(px, w, h) {
+  const lit = (x, y) => {
+    const i = (y * w + x) * 4;
+    return Math.max(px[i] ?? 0, px[i + 1] ?? 0, px[i + 2] ?? 0) > 24;
+  };
+  const colLit = (x) => Array.from({ length: h }, (_, y) => lit(x, y)).some(Boolean);
+  const rowLit = (y) => Array.from({ length: w }, (_, x) => lit(x, y)).some(Boolean);
+  let x0 = 0;
+  let x1 = w - 1;
+  let y0 = 0;
+  let y1 = h - 1;
+  while (x0 < x1 && !colLit(x0)) x0++;
+  while (x1 > x0 && !colLit(x1)) x1--;
+  while (y0 < y1 && !rowLit(y0)) y0++;
+  while (y1 > y0 && !rowLit(y1)) y1--;
+  if (x0 === 0 && x1 === w - 1 && y0 === 0 && y1 === h - 1) return WHOLE;
+  const area = { x: (x0 + 1) / w, y: (y0 + 1) / h, w: Math.max((x1 - x0 - 1) / w, 0), h: Math.max((y1 - y0 - 1) / h, 0) };
+  return area.w < 0.4 || area.h < 0.4 ? WHOLE : area;
+}
+function isDark(px) {
+  let sum = 0;
+  let n = 0;
+  for (let i = 0; i < px.length; i += 4 * 97) {
+    sum += (px[i] ?? 0) + (px[i + 1] ?? 0) + (px[i + 2] ?? 0);
+    n += 3;
+  }
+  return n > 0 && sum / n < 8;
+}
+function framingThresholds(th) {
+  const t = th ?? {};
+  return {
+    ...t,
+    CENTER_TOL_X: Math.min(t.CENTER_TOL_X ?? CENTER_TOLERANCE, CENTER_TOLERANCE),
+    CENTER_TOL_Y: Math.min(t.CENTER_TOL_Y ?? CENTER_TOLERANCE, CENTER_TOLERANCE)
+  };
+}
+
+// src/react/labels.ts
+var DEFAULT_LABELS = {
+  start: "Ligar c\xE2mera",
+  stop: "Desligar c\xE2mera",
+  retry: "Nova captura",
+  connecting: "Conectando\u2026",
+  searching: "Procurando rosto\u2026",
+  hold: "Fique parado\u2026",
+  allGood: "Tudo certo, segure a posi\xE7\xE3o\u2026",
+  fix: "Corrigir",
+  analyzing: "Analisando o rosto\u2026",
+  analyzingClean: "Analisando o rosto e removendo o fundo\u2026",
+  analyzingEnhance: "Melhorando a imagem e analisando o rosto\u2026",
+  enhanced: "Imagem melhorada",
+  enhancedAi: "Rosto restaurado com IA: confira se a foto continua fiel \xE0 pessoa.",
+  approved: "Foto aprovada",
+  rejected: "Foto reprovada",
+  cameraOff: "C\xE2mera desligada",
+  cameraHint: "A foto \xE9 capturada sozinha quando todos os crit\xE9rios passam.",
+  insecure: "A c\xE2mera exige HTTPS (ou localhost).",
+  noCamera: "Este navegador n\xE3o permite acesso \xE0 c\xE2mera.",
+  denied: "Permiss\xE3o de c\xE2mera negada. Libere o acesso na barra do navegador.",
+  notFound: "Nenhuma c\xE2mera encontrada.",
+  busy: "A c\xE2mera est\xE1 em uso por outro aplicativo. Feche-o e tente de novo."
+};
+var FAIL_LABELS = {
+  no_face: "enquadre o rosto",
+  multiple_faces: "s\xF3 uma pessoa na imagem",
+  face_too_small: "aproxime-se da c\xE2mera",
+  face_off_center: "centralize o rosto",
+  eyes_closed: "abra os olhos",
+  not_looking_at_camera: "olhe para a c\xE2mera",
+  head_too_tilted: "endireite a cabe\xE7a",
+  image_blurry: "fique parado (imagem tremida)",
+  poor_lighting: "melhore a luz no rosto",
+  overexposed: "luz forte demais no rosto",
+  glasses_sunglasses: "retire os \xF3culos escuros",
+  helmet_detected: "retire o capacete",
+  covered_face: "descubra o rosto",
+  smile_detected: "express\xE3o neutra"
+};
+function describeFails(codes = []) {
+  return codes.map((c) => FAIL_LABELS[c] ?? c).join(", ");
+}
+
+// src/react/FaceGate.tsx
+import { Fragment, jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
+var NO_STABLE = { ms: 0, needed: 0 };
+var CENTER = { xmin: 0.3, ymin: 0.2, xmax: 0.7, ymax: 0.8 };
+var INTRO_MS = 3400;
+var KEEP_FRAMES = 15;
+var LOST_MS = 1500;
+var SEND_MAX = 800;
+var MEASURE_EVERY = 30;
+var CAMERA_HD = { width: { ideal: 1280 }, height: { ideal: 960 }, facingMode: "user" };
+var CAMERA_SD = { width: { ideal: 640 }, height: { ideal: 480 }, facingMode: "user" };
+var DARK_FRAMES = 3;
+function FaceGate({
+  getTicket,
+  onCapture,
+  onLive,
+  onError,
+  autoStart = false,
+  intro = true,
+  watermark = true,
+  labels,
+  className,
+  style,
+  clean = false,
+  model,
+  device,
+  thresholds,
+  enhance = null,
+  autoFrame = true,
+  mirror = true
+}) {
+  const t = { ...DEFAULT_LABELS, ...labels };
+  const videoRef = useRef(null);
+  const mediaRef = useRef(null);
+  const streamRef = useRef(null);
+  const canvasRef = useRef(null);
+  const framesRef = useRef(/* @__PURE__ */ new Map());
+  const viewRef = useRef(null);
+  const overlayRef = useRef(null);
+  const overlayCropRef = useRef(FULL);
+  const fpsRef = useRef(6);
+  const sendRef = useRef(() => {
+  });
+  const lastSeqRef = useRef(0);
+  const cropRef = useRef(FULL);
+  const targetRef = useRef(FULL);
+  const areaRef = useRef(WHOLE);
+  const measuredRef = useRef(0);
+  const areaCanvasRef = useRef(null);
+  const lostSinceRef = useRef(0);
+  const darkRef = useRef({ count: 0, checked: 0, fellBack: false });
+  const capturedRef = useRef(null);
+  const gateRef = useRef({ camera: false, socket: false, intro: false });
+  const hadFaceRef = useRef(false);
+  const introTimer = useRef(null);
+  const [phase, setPhase] = useState("off");
+  const [showIntro, setShowIntro] = useState(false);
+  const [live, setLive] = useState(null);
+  const [stable, setStable] = useState(NO_STABLE);
+  const [detectKey, setDetectKey] = useState(0);
+  const [frozen, setFrozen] = useState(null);
+  const [final, setFinal] = useState(null);
+  const [error, setError] = useState(null);
+  const [ratio, setRatio] = useState(4 / 3);
+  const th = autoFrame ? framingThresholds(thresholds) : thresholds;
+  const cfg = useRef({ getTicket, onCapture, onLive, onError, options: { clean, model, device, thresholds: th, enhance } });
+  useEffect(() => {
+    cfg.current = { getTicket, onCapture, onLive, onError, options: { clean, model, device, thresholds: th, enhance } };
+  });
+  useEffect(() => {
+    streamRef.current?.configure({ clean, model, device, thresholds: th, enhance });
+  }, [clean, model, device, thresholds, autoFrame, enhance]);
+  useEffect(() => {
+    if (phase !== "live" || !autoFrame) return;
+    let id = 0;
+    const tick = () => {
+      cropRef.current = ease(cropRef.current, targetRef.current);
+      if (viewRef.current) viewRef.current.style.transform = cropTransform(cropRef.current, mirror);
+      if (overlayRef.current) overlayRef.current.style.transform = overlayTransform(overlayCropRef.current, cropRef.current, mirror);
+      id = requestAnimationFrame(tick);
+    };
+    id = requestAnimationFrame(tick);
+    return () => cancelAnimationFrame(id);
+  }, [phase, autoFrame, mirror]);
+  function release() {
+    if (introTimer.current) clearTimeout(introTimer.current);
+    streamRef.current?.close();
+    streamRef.current = null;
+    mediaRef.current?.getTracks().forEach((tr) => tr.stop());
+    mediaRef.current = null;
+  }
+  useEffect(() => release, []);
+  function fail(err) {
+    release();
+    setShowIntro(false);
+    setPhase("off");
+    setError(err.message);
+    cfg.current.onError?.(err);
+  }
+  function measureArea(v) {
+    if (measuredRef.current++ % MEASURE_EVERY !== 0) return;
+    const W = 64;
+    const H = Math.max(8, Math.round(W * v.videoHeight / v.videoWidth));
+    const c = areaCanvasRef.current ?? (areaCanvasRef.current = document.createElement("canvas"));
+    c.width = W;
+    c.height = H;
+    const ctx = c.getContext("2d", { willReadFrequently: true });
+    if (!ctx) return;
+    ctx.drawImage(v, 0, 0, W, H);
+    const next = areaFromPixels(ctx.getImageData(0, 0, W, H).data, W, H);
+    const prev = areaRef.current;
+    if (Math.abs(next.x - prev.x) + Math.abs(next.y - prev.y) + Math.abs(next.w - prev.w) + Math.abs(next.h - prev.h) < 0.02) return;
+    areaRef.current = next;
+    const into = (cr) => fitCrop(cr.s >= 0.999 ? baseCrop(next) : cr, next);
+    cropRef.current = into(cropRef.current);
+    targetRef.current = into(targetRef.current);
+  }
+  function checkDark(ctx, w, h) {
+    const d = darkRef.current;
+    if (d.fellBack || d.checked >= DARK_FRAMES * 2) return false;
+    d.checked += 1;
+    d.count = isDark(ctx.getImageData(0, 0, w, h).data) ? d.count + 1 : 0;
+    if (d.count < DARK_FRAMES) return false;
+    d.fellBack = true;
+    void reopenCamera();
+    return true;
+  }
+  async function reopenCamera() {
+    try {
+      const media = await navigator.mediaDevices.getUserMedia({ video: CAMERA_SD });
+      mediaRef.current?.getTracks().forEach((tr) => tr.stop());
+      mediaRef.current = media;
+      if (videoRef.current) {
+        videoRef.current.srcObject = media;
+        await videoRef.current.play().catch(() => {
+        });
+      }
+    } catch {
+    }
+    requestAnimationFrame(sendFrame);
+  }
+  function aim(seq, box2) {
+    if (!autoFrame) return;
+    const now = performance.now();
+    if (!box2) {
+      lostSinceRef.current || (lostSinceRef.current = now);
+      if (now - lostSinceRef.current > LOST_MS) targetRef.current = baseCrop(areaRef.current);
+      return;
+    }
+    lostSinceRef.current = 0;
+    const used = framesRef.current.get(seq)?.crop ?? cropRef.current;
+    const next = aimCrop(box2, used, areaRef.current);
+    if (moved(next, targetRef.current)) targetRef.current = next;
+  }
+  function sendFrame() {
+    const v = videoRef.current;
+    const s = streamRef.current;
+    if (!v || !v.videoWidth || !s) return;
+    if (autoFrame) measureArea(v);
+    const crop = autoFrame ? cropRef.current : FULL;
+    const sw = crop.s * v.videoWidth;
+    const sh = crop.s * v.videoHeight;
+    const k = Math.min(1, SEND_MAX / Math.max(sw, sh));
+    const c = canvasRef.current ?? (canvasRef.current = document.createElement("canvas"));
+    c.width = Math.round(sw * k);
+    c.height = Math.round(sh * k);
+    const ctx = c.getContext("2d", { willReadFrequently: true });
+    ctx?.drawImage(v, crop.x * v.videoWidth, crop.y * v.videoHeight, sw, sh, 0, 0, c.width, c.height);
+    if (autoFrame && ctx && checkDark(ctx, c.width, c.height)) return;
+    c.toBlob(
+      (blob) => {
+        const cur = streamRef.current;
+        if (!blob || !cur) return;
+        const seq = cur.sendFrame(blob);
+        if (seq == null) return;
+        const frames = framesRef.current;
+        frames.set(seq, { blob, crop });
+        for (const k2 of frames.keys()) if (k2 <= seq - KEEP_FRAMES) frames.delete(k2);
+      },
+      "image/jpeg",
+      0.85
+    );
+  }
+  function goLiveIfReady() {
+    const g = gateRef.current;
+    if (!g.camera || !g.socket || !g.intro || !streamRef.current) return;
+    setShowIntro(false);
+    setPhase("live");
+    sendFrame();
+  }
+  async function start() {
+    setError(null);
+    if (typeof window === "undefined") return;
+    if (!window.isSecureContext) return fail(new FaceGateError("camera_unavailable", t.insecure));
+    if (!navigator.mediaDevices?.getUserMedia) return fail(new FaceGateError("camera_unavailable", t.noCamera));
+    release();
+    const reduceMotion = window.matchMedia?.("(prefers-reduced-motion: reduce)").matches ?? false;
+    const playIntro = intro && !reduceMotion;
+    gateRef.current = { camera: false, socket: false, intro: !playIntro };
+    framesRef.current.clear();
+    hadFaceRef.current = false;
+    lastSeqRef.current = 0;
+    cropRef.current = targetRef.current = overlayCropRef.current = FULL;
+    if (overlayRef.current) overlayRef.current.style.transform = "";
+    areaRef.current = WHOLE;
+    measuredRef.current = 0;
+    lostSinceRef.current = 0;
+    darkRef.current = { count: 0, checked: 0, fellBack: false };
+    if (viewRef.current) viewRef.current.style.transform = cropTransform(FULL, mirror);
+    setLive(null);
+    setStable(NO_STABLE);
+    setFrozen(null);
+    setFinal(null);
+    setShowIntro(playIntro);
+    setPhase("starting");
+    if (playIntro) {
+      introTimer.current = setTimeout(() => {
+        gateRef.current.intro = true;
+        goLiveIfReady();
+      }, INTRO_MS);
+    }
+    const [cam, tk] = await Promise.allSettled([
+      navigator.mediaDevices.getUserMedia({ video: autoFrame ? CAMERA_HD : CAMERA_SD }),
+      cfg.current.getTicket()
+    ]);
+    if (cam.status === "rejected") {
+      const name = cam.reason?.name;
+      const msg = name === "NotAllowedError" ? t.denied : name === "NotFoundError" ? t.notFound : name === "NotReadableError" ? t.busy : String(cam.reason?.message ?? cam.reason);
+      return fail(new FaceGateError(name === "NotAllowedError" ? "camera_denied" : "camera_unavailable", msg));
+    }
+    if (tk.status === "rejected") {
+      cam.value.getTracks().forEach((tr) => tr.stop());
+      const e = tk.reason;
+      return fail(e instanceof FaceGateError ? e : new FaceGateError("network", e?.message ?? "Falha ao obter o ticket"));
+    }
+    mediaRef.current = cam.value;
+    if (videoRef.current) {
+      videoRef.current.srcObject = cam.value;
+      void videoRef.current.play().catch(() => {
+      });
+    }
+    streamRef.current = openFaceGateStream(tk.value.url, tk.value.ticket, cfg.current.options, {
+      onReady: (maxFps) => {
+        fpsRef.current = Math.min(Math.max(maxFps, 1), 10);
+        gateRef.current.socket = true;
+        goLiveIfReady();
+      },
+      onFrame: (seq, r, st) => {
+        if (seq <= lastSeqRef.current) return;
+        lastSeqRef.current = seq;
+        const f = framesRef.current.get(seq);
+        if (f) f.result = r;
+        if (autoFrame) overlayCropRef.current = f?.crop ?? cropRef.current;
+        aim(seq, r.dominant_face_bbox);
+        const hasFace = Boolean(r.dominant_face_bbox);
+        if (hasFace && !hadFaceRef.current) setDetectKey((k) => k + 1);
+        hadFaceRef.current = hasFace;
+        setLive(r);
+        setStable(st);
+        cfg.current.onLive?.(r);
+      },
+      onCaptured: (seq) => {
+        const frames = framesRef.current;
+        const pick = frames.get(seq) ?? frames.get(Math.max(...frames.keys()));
+        mediaRef.current?.getTracks().forEach((tr) => tr.stop());
+        mediaRef.current = null;
+        if (pick) {
+          const url = URL.createObjectURL(pick.blob);
+          capturedRef.current = { blob: pick.blob, url };
+          setFrozen({ url, box: pick.result?.dominant_face_bbox ?? CENTER });
+        }
+        setPhase("processing");
+      },
+      onFinal: (_seq, r) => {
+        streamRef.current?.close();
+        streamRef.current = null;
+        const cap = capturedRef.current;
+        const image = r.cleaned_image ?? r.enhancement?.enhanced_image ?? cap?.url ?? "";
+        setFinal({ url: image, result: r });
+        setPhase("done");
+        if (cap) cfg.current.onCapture?.({ image, frame: cap.blob, result: r });
+      },
+      onError: fail
+    });
+  }
+  function stop() {
+    release();
+    setShowIntro(false);
+    setPhase("off");
+  }
+  useEffect(() => {
+    if (autoStart) void start();
+  }, []);
+  useEffect(() => {
+    sendRef.current = sendFrame;
+  });
+  useEffect(() => {
+    if (phase !== "live") return;
+    const id = setInterval(() => sendRef.current(), 1e3 / fpsRef.current);
+    return () => clearInterval(id);
+  }, [phase]);
+  const cameraOn = phase === "starting" || phase === "live";
+  const box = phase === "live" ? live?.dominant_face_bbox ?? null : null;
+  const ok = Boolean(live?.accepted);
+  const holding = phase === "live" && ok && stable.ms > 0 && stable.needed > 0;
+  const progress = holding ? Math.min(stable.ms / stable.needed, 1) : 0;
+  const status = phase === "starting" ? t.connecting : !live ? t.searching : live.accepted ? holding ? t.hold : t.allGood : !live.dominant_face_bbox ? t.searching : `${t.fix}: ${describeFails(live.hard_fails)}`;
+  return /* @__PURE__ */ jsxs2("div", { className: ["fg-root", className].filter(Boolean).join(" "), style, children: [
+    /* @__PURE__ */ jsxs2("div", { className: "fg-stage", style: { aspectRatio: String(ratio), width: `min(100%, calc(70dvh * ${ratio}))`, marginInline: "auto" }, children: [
+      /* @__PURE__ */ jsx2(
+        "div",
+        {
+          ref: viewRef,
+          hidden: !cameraOn,
+          style: { position: "absolute", inset: 0, transformOrigin: "0 0", transform: cropTransform(FULL, mirror) },
+          children: /* @__PURE__ */ jsx2(
+            "video",
+            {
+              ref: videoRef,
+              autoPlay: true,
+              playsInline: true,
+              muted: true,
+              className: "fg-video",
+              onLoadedData: (e) => {
+                const v = e.currentTarget;
+                if (v.videoWidth && v.videoHeight) setRatio(v.videoWidth / v.videoHeight);
+                gateRef.current.camera = true;
+                goLiveIfReady();
+              }
+            }
+          )
+        }
+      ),
+      phase === "live" && !box && /* @__PURE__ */ jsx2(
+        "div",
+        {
+          className: "fg-search",
+          "aria-hidden": "true",
+          style: { top: "15%", left: "50%", width: "auto", height: "68%", aspectRatio: "3 / 4", maxWidth: "80%", translate: "-50% 0" },
+          children: /* @__PURE__ */ jsx2("span", { className: "fg-search-sweep" })
+        }
+      ),
+      /* @__PURE__ */ jsx2(
+        "div",
+        {
+          ref: overlayRef,
+          "aria-hidden": "true",
+          style: { position: "absolute", inset: 0, transformOrigin: "0 0", pointerEvents: "none" },
+          children: box && /* @__PURE__ */ jsxs2("div", { className: "fg-track", "data-state": ok ? "ok" : "warn", style: boxStyle(box, mirror), children: [
+            /* @__PURE__ */ jsx2("span", { className: "fg-track-line" }),
+            holding && /* @__PURE__ */ jsx2("span", { className: "fg-track-hold", style: { transform: `scaleX(${progress})` } })
+          ] }, detectKey)
+        }
+      ),
+      phase === "processing" && frozen && /* @__PURE__ */ jsxs2(Fragment, { children: [
+        /* @__PURE__ */ jsx2("img", { src: frozen.url, alt: "", className: "fg-video", style: mirror ? { transform: "scaleX(-1)" } : void 0 }),
+        /* @__PURE__ */ jsx2("div", { className: "fg-scan", style: boxStyle(frozen.box, mirror), "aria-hidden": "true", children: /* @__PURE__ */ jsx2("span", { className: "fg-scan-line" }) })
+      ] }),
+      phase === "done" && final && /* @__PURE__ */ jsxs2("div", { className: "fg-result", children: [
+        /* @__PURE__ */ jsx2("img", { src: final.url, alt: final.result.accepted ? t.approved : t.rejected, className: "fg-result-img" }),
+        final.result.enhancement && /* @__PURE__ */ jsxs2(
+          "span",
+          {
+            className: "fg-badge",
+            "data-ai": final.result.warnings?.includes("face_restored_ai") ? "true" : void 0,
+            title: final.result.warnings?.includes("face_restored_ai") ? t.enhancedAi : void 0,
+            children: [
+              t.enhanced,
+              final.result.warnings?.includes("face_restored_ai") && /* @__PURE__ */ jsx2("small", { children: t.enhancedAi })
+            ]
+          }
+        )
+      ] }),
+      watermark && phase !== "off" && /* @__PURE__ */ jsx2(Emblem, { className: "fg-watermark" }),
+      showIntro && /* @__PURE__ */ jsx2("div", { className: "fg-intro", "aria-hidden": "true", children: /* @__PURE__ */ jsx2(Emblem, { animated: true, className: "fg-intro-emblem" }) }),
+      phase === "off" && /* @__PURE__ */ jsxs2("div", { className: "fg-idle", children: [
+        /* @__PURE__ */ jsx2(Emblem, { className: "fg-idle-emblem" }),
+        /* @__PURE__ */ jsx2("strong", { children: t.cameraOff }),
+        /* @__PURE__ */ jsx2("span", { children: error ?? t.cameraHint })
+      ] }),
+      (cameraOn || phase === "processing") && /* @__PURE__ */ jsxs2("div", { className: "fg-status", role: "status", children: [
+        /* @__PURE__ */ jsx2("span", { className: `fg-dot ${phase === "processing" ? "fg-dot-busy" : ok ? "fg-dot-ok" : live ? "fg-dot-warn" : ""}` }),
+        /* @__PURE__ */ jsx2("span", { children: phase === "processing" ? clean ? t.analyzingClean : enhance ? t.analyzingEnhance : t.analyzing : status })
+      ] }),
+      phase === "done" && final && /* @__PURE__ */ jsxs2("div", { className: "fg-status", role: "status", children: [
+        /* @__PURE__ */ jsx2("span", { className: `fg-dot ${final.result.accepted ? "fg-dot-ok" : "fg-dot-warn"}` }),
+        /* @__PURE__ */ jsx2("span", { children: final.result.accepted ? t.approved : `${t.rejected}: ${describeFails(final.result.hard_fails ?? final.result.reasons)}` })
+      ] })
+    ] }),
+    /* @__PURE__ */ jsx2("div", { className: "fg-actions", children: phase === "done" || phase === "off" && final ? /* @__PURE__ */ jsx2("button", { type: "button", className: "fg-button", onClick: start, children: t.retry }) : /* @__PURE__ */ jsx2(
+      "button",
+      {
+        type: "button",
+        className: `fg-button ${cameraOn ? "fg-button-outline" : ""}`,
+        disabled: phase === "processing",
+        onClick: cameraOn ? stop : start,
+        children: cameraOn ? t.stop : t.start
+      }
+    ) })
+  ] });
+}
+export {
+  DEFAULT_LABELS,
+  Emblem,
+  FAIL_LABELS,
+  FaceGate,
+  FaceGateError,
+  describeFails,
+  openFaceGateStream
+};
+//# sourceMappingURL=index.js.map