vesant-sdk 1.7.0-dev.059da4f → 1.7.0-dev.117915b

package/dist/react.mjs

@@ -883,6 +883,87 @@ var Camera = "data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0i
 var Done = "data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz48IS0tIFVwbG9hZGVkIHRvOiBTVkcgUmVwbywgd3d3LnN2Z3JlcG8uY29tLCBHZW5lcmF0b3I6IFNWRyBSZXBvIE1peGVyIFRvb2xzIC0tPg0KPHN2ZyB3aWR0aD0iODAwcHgiIGhlaWdodD0iODAwcHgiIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4NCjxwYXRoIGQ9Ik04LjUgMTIuNUwxMC41IDE0LjVMMTUuNSA5LjUiIHN0cm9rZT0iIzFDMjc0QyIgc3Ryb2tlLXdpZHRoPSIxLjUiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIvPg0KPHBhdGggZD0iTTcgMy4zMzc4MkM4LjQ3MDg3IDIuNDg2OTcgMTAuMTc4NiAyIDEyIDJDMTcuNTIyOCAyIDIyIDYuNDc3MTUgMjIgMTJDMjIgMTcuNTIyOCAxNy41MjI4IDIyIDEyIDIyQzYuNDc3MTUgMjIgMiAxNy41MjI4IDIgMTJDMiAxMC4xNzg2IDIuNDg2OTcgOC40NzA4NyAzLjMzNzgyIDciIHN0cm9rZT0iIzFDMjc0QyIgc3Ryb2tlLXdpZHRoPSIxLjUiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIvPg0KPC9zdmc+";
 var Close = "data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz48IS0tIFVwbG9hZGVkIHRvOiBTVkcgUmVwbywgd3d3LnN2Z3JlcG8uY29tLCBHZW5lcmF0b3I6IFNWRyBSZXBvIE1peGVyIFRvb2xzIC0tPg0KPHN2ZyB3aWR0aD0iODAwcHgiIGhlaWdodD0iODAwcHgiIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4NCjxwYXRoIGQ9Ik0xNC41IDkuNTAwMDJMOS41IDE0LjVNOS40OTk5OCA5LjVMMTQuNSAxNC41IiBzdHJva2U9IiMxQzI3NEMiIHN0cm9rZS13aWR0aD0iMS41IiBzdHJva2UtbGluZWNhcD0icm91bmQiLz4NCjxwYXRoIGQ9Ik03IDMuMzM3ODJDOC40NzA4NyAyLjQ4Njk3IDEwLjE3ODYgMiAxMiAyQzE3LjUyMjggMiAyMiA2LjQ3NzE1IDIyIDEyQzIyIDE3LjUyMjggMTcuNTIyOCAyMiAxMiAyMkM2LjQ3NzE1IDIyIDIgMTcuNTIyOCAyIDEyQzIgMTAuMTc4NiAyLjQ4Njk3IDguNDcwODcgMy4zMzc4MiA3IiBzdHJva2U9IiMxQzI3NEMiIHN0cm9rZS13aWR0aD0iMS41IiBzdHJva2UtbGluZWNhcD0icm91bmQiLz4NCjwvc3ZnPg==";
 
+// src/kyc/faceDetection.ts
+var FACE_MESSAGES = {
+  idle: "Initializing camera...",
+  loading: "Loading face detection...",
+  scanning: "Position your face in the circle",
+  too_far: "Face too far. Please move closer to the camera",
+  too_close: "Too close. Please move back a little",
+  off_center: "Center your face in the circle",
+  ok: "Looking great! Tap the button to capture"
+};
+var FACE_COLORS = {
+  idle: "#9ca3af",
+  loading: "#3b82f6",
+  scanning: "#3b82f6",
+  too_far: "#ef4444",
+  too_close: "#f59e0b",
+  off_center: "#f59e0b",
+  ok: "#10b981"
+};
+var MEDIAPIPE_BASE = "https://cdn.jsdelivr.net/npm/@mediapipe/face_detection";
+function mapDetectionsToFaceStatus(detections) {
+  if (detections.length === 0) return "scanning";
+  const bb = detections[0].boundingBox;
+  if (bb.width < 0.18) return "too_far";
+  if (bb.width > 0.72) return "too_close";
+  if (bb.xCenter < 0.28 || bb.xCenter > 0.72 || bb.yCenter < 0.28 || bb.yCenter > 0.72) {
+    return "off_center";
+  }
+  return "ok";
+}
+function isCaptureDisabled(ready, detectionActive, faceStatus) {
+  return !ready || detectionActive && faceStatus !== "ok";
+}
+function resolveMediaPipeBase(base) {
+  if (!base) return MEDIAPIPE_BASE;
+  return base.endsWith("/") ? base.slice(0, -1) : base;
+}
+var LIVENESS_SAMPLE_LIMIT = 20;
+function buildLivenessArtifact(samples) {
+  if (samples.length === 0) return void 0;
+  return JSON.stringify({
+    version: 1,
+    source: "mediapipe-face-detection",
+    samples: samples.slice(-LIVENESS_SAMPLE_LIMIT)
+  });
+}
+var mediapipeLoaderPromises = /* @__PURE__ */ new Map();
+function loadMediaPipeFaceDetection(assetBasePath) {
+  if (typeof window === "undefined" || typeof document === "undefined") {
+    return Promise.reject(new Error("MediaPipe requires a browser environment"));
+  }
+  const w = window;
+  if (w.FaceDetection) {
+    return Promise.resolve(w.FaceDetection);
+  }
+  const src = `${resolveMediaPipeBase(assetBasePath)}/face_detection.js`;
+  const existing = mediapipeLoaderPromises.get(src);
+  if (existing) return existing;
+  const loader = new Promise((resolve, reject) => {
+    const script = document.createElement("script");
+    script.src = src;
+    script.async = true;
+    script.crossOrigin = "anonymous";
+    script.onload = () => {
+      if (w.FaceDetection) {
+        resolve(w.FaceDetection);
+      } else {
+        mediapipeLoaderPromises.delete(src);
+        reject(new Error("MediaPipe loaded but FaceDetection global is missing"));
+      }
+    };
+    script.onerror = () => {
+      mediapipeLoaderPromises.delete(src);
+      reject(new Error("Failed to load MediaPipe face_detection script"));
+    };
+    document.head.appendChild(script);
+  });
+  mediapipeLoaderPromises.set(src, loader);
+  return loader;
+}
+
 // src/kyc/FaceCaptureModal.tsx
 var MOBILE_UA = /Mobi|Android|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i;
 var SESSION_EXPIRY_MS = 15 * 60 * 1e3;
@@ -916,7 +997,8 @@ function FaceCaptureModal({
   onComplete,
   onCancel,
   defaultDevice,
-  renderQR
+  renderQR,
+  mediapipeAssetBasePath
 }) {
   const isMobile = typeof navigator !== "undefined" && MOBILE_UA.test(navigator.userAgent);
   const initialChoice = defaultDevice ?? (isMobile ? "this" : "ask");
@@ -933,6 +1015,7 @@ function FaceCaptureModal({
   const [captureMode, setCaptureMode] = useState("idle");
   const [capturedPreview, setCapturedPreview] = useState(null);
   const [capturedBase64, setCapturedBase64] = useState(null);
+  const [capturedArtifact, setCapturedArtifact] = useState(null);
   const [livenessMessage, setLivenessMessage] = useState(LIVENESS_MESSAGES[0]);
   const qrPayload = session.link || `vesant://reuse-kyc?token=${encodeURIComponent(session.token)}`;
   const cancelledRef = useRef(false);
@@ -1030,7 +1113,10 @@ function FaceCaptureModal({
           const data = await client.submitEventBasedFaceVerificationSession({
             token: session.token,
             reference: ref,
-            proof
+            proof,
+            // undefined when detection wasn't running for this capture —
+            // JSON.stringify drops it, so the field is absent on the wire.
+            liveness_artifact: capturedArtifact ?? void 0
           });
           return { ok: true, data };
         } catch (err2) {
@@ -1076,16 +1162,18 @@ function FaceCaptureModal({
       submittingRef.current = false;
     }
   };
-  const handleCameraCapture = (dataUrl) => {
+  const handleCameraCapture = (dataUrl, livenessArtifact) => {
     const raw = dataUrl.split(",")[1] ?? "";
     setCapturedPreview(dataUrl);
     setCapturedBase64(raw);
+    setCapturedArtifact(livenessArtifact ?? null);
     setCaptureMode("preview");
   };
   const handleCameraCancel = () => setCaptureMode("idle");
   const handleRetake = () => {
     setCapturedPreview(null);
     setCapturedBase64(null);
+    setCapturedArtifact(null);
     setCaptureMode("live");
   };
   const handleConfirmSubmit = () => {
@@ -1157,7 +1245,8 @@ function FaceCaptureModal({
         {
           onCapture: handleCameraCapture,
           onCancel: handleCameraCancel,
-          message: livenessMessage
+          message: livenessMessage,
+          assetBasePath: mediapipeAssetBasePath
         }
       ), /* @__PURE__ */ React.createElement("p", { style: attemptsTextStyle }, "Attempt ", attempts + 1, " of ", maxAttempts));
     }
@@ -1388,59 +1477,10 @@ var attemptsTextStyle = {
 };
 var footerStyle = { padding: "12px 24px 16px", borderTop: "1px solid #f3f4f6" };
 var footerTextStyle = { margin: 0, fontSize: 12, color: "#9ca3af", textAlign: "center" };
-var FACE_MESSAGES = {
-  idle: "Initializing camera...",
-  loading: "Loading face detection...",
-  scanning: "Position your face in the circle",
-  too_far: "Face too far. Please move closer to the camera",
-  too_close: "Too close. Please move back a little",
-  off_center: "Center your face in the circle",
-  ok: "Looking great! Tap the button to capture"
-};
-var FACE_COLORS = {
-  idle: "#9ca3af",
-  loading: "#3b82f6",
-  scanning: "#3b82f6",
-  too_far: "#ef4444",
-  too_close: "#f59e0b",
-  off_center: "#f59e0b",
-  ok: "#10b981"
-};
-var MEDIAPIPE_BASE = "https://cdn.jsdelivr.net/npm/@mediapipe/face_detection";
-var mediapipeLoaderPromise = null;
-function loadMediaPipeFaceDetection() {
-  if (typeof window === "undefined" || typeof document === "undefined") {
-    return Promise.reject(new Error("MediaPipe requires a browser environment"));
-  }
-  const w = window;
-  if (w.FaceDetection) {
-    return Promise.resolve(w.FaceDetection);
-  }
-  if (mediapipeLoaderPromise) return mediapipeLoaderPromise;
-  mediapipeLoaderPromise = new Promise((resolve, reject) => {
-    const script = document.createElement("script");
-    script.src = `${MEDIAPIPE_BASE}/face_detection.js`;
-    script.async = true;
-    script.crossOrigin = "anonymous";
-    script.onload = () => {
-      if (w.FaceDetection) {
-        resolve(w.FaceDetection);
-      } else {
-        mediapipeLoaderPromise = null;
-        reject(new Error("MediaPipe loaded but FaceDetection global is missing"));
-      }
-    };
-    script.onerror = () => {
-      mediapipeLoaderPromise = null;
-      reject(new Error("Failed to load MediaPipe face_detection script"));
-    };
-    document.head.appendChild(script);
-  });
-  return mediapipeLoaderPromise;
-}
-function LiveCamera({ onCapture, onCancel, message }) {
+function LiveCamera({ onCapture, onCancel, message, assetBasePath }) {
   const videoRef = useRef(null);
   const streamRef = useRef(null);
+  const samplesRef = useRef([]);
   const [ready, setReady] = useState(false);
   const [error, setError] = useState(null);
   const [faceStatus, setFaceStatus] = useState("idle");
@@ -1495,31 +1535,29 @@ function LiveCamera({ onCapture, onCancel, message }) {
     let detector = null;
     setFaceStatus("loading");
     setFaceDetectionFailed(false);
+    samplesRef.current = [];
     (async () => {
       try {
-        const FaceDetection = await loadMediaPipeFaceDetection();
+        const FaceDetection = await loadMediaPipeFaceDetection(assetBasePath);
         if (cancelled) return;
+        const assetBase = resolveMediaPipeBase(assetBasePath);
         const d = new FaceDetection({
-          locateFile: (f) => `${MEDIAPIPE_BASE}/${f}`
+          locateFile: (f) => `${assetBase}/${f}`
         });
         d.setOptions({ model: "short", minDetectionConfidence: 0.5 });
         d.onResults((results) => {
           if (cancelled) return;
           const detections = results.detections ?? [];
-          let next;
-          if (detections.length === 0) {
-            next = "scanning";
-          } else {
-            const bb = detections[0].boundingBox;
-            if (bb.width < 0.18) next = "too_far";
-            else if (bb.width > 0.72) next = "too_close";
-            else if (bb.xCenter < 0.28 || bb.xCenter > 0.72 || bb.yCenter < 0.28 || bb.yCenter > 0.72) {
-              next = "off_center";
-            } else {
-              next = "ok";
-            }
+          const status = mapDetectionsToFaceStatus(detections);
+          samplesRef.current.push({
+            t: Date.now(),
+            status,
+            ...detections.length > 0 ? { boundingBox: detections[0].boundingBox } : {}
+          });
+          if (samplesRef.current.length > LIVENESS_SAMPLE_LIMIT) {
+            samplesRef.current.shift();
           }
-          setFaceStatus(next);
+          setFaceStatus(status);
         });
         await d.initialize();
         if (cancelled) return;
@@ -1555,7 +1593,7 @@ function LiveCamera({ onCapture, onCancel, message }) {
       } catch {
       }
     };
-  }, [ready]);
+  }, [ready, assetBasePath]);
   const capture = () => {
     const video = videoRef.current;
     if (!video || !video.videoWidth) return;
@@ -1572,7 +1610,7 @@ function LiveCamera({ onCapture, onCancel, message }) {
     ctx.drawImage(video, sx, sy, size, size, 0, 0, size, size);
     streamRef.current?.getTracks().forEach((t) => t.stop());
     streamRef.current = null;
-    onCapture(canvas.toDataURL("image/jpeg", 0.9));
+    onCapture(canvas.toDataURL("image/jpeg", 0.9), buildLivenessArtifact(samplesRef.current));
   };
   if (error) {
     return /* @__PURE__ */ React.createElement("div", { style: { ...contentStyle, alignItems: "center", textAlign: "center", padding: 0 } }, /* @__PURE__ */ React.createElement("div", { style: errorCircleStyle }, "!"), /* @__PURE__ */ React.createElement("h3", { style: titleStyle }, "Camera unavailable"), /* @__PURE__ */ React.createElement("p", { style: alertTextStyle }, error), /* @__PURE__ */ React.createElement("div", { style: buttonsContainerStyle }, /* @__PURE__ */ React.createElement("button", { style: secondaryButtonStyle, onClick: onCancel }, "Back")));
@@ -1580,7 +1618,7 @@ function LiveCamera({ onCapture, onCancel, message }) {
   const detectionActive = ready && !faceDetectionFailed;
   const liveMessage = detectionActive ? FACE_MESSAGES[faceStatus] : message;
   const liveFaceColor = detectionActive ? FACE_COLORS[faceStatus] : void 0;
-  const captureDisabled = !ready || detectionActive && faceStatus !== "ok";
+  const captureDisabled = isCaptureDisabled(ready, detectionActive, faceStatus);
   const ringPulse = detectionActive && (faceStatus === "too_far" || faceStatus === "too_close") ? "pulse 1.5s ease-in-out infinite" : void 0;
   const dynamicCircleStyle = {
     ...faceCircleStyle,
@@ -2107,6 +2145,7 @@ function useEventBasedFaceVerificationSubmission(client) {
         defaultDevice: opts.defaultDevice,
         renderQR: opts.renderQR,
         onCancel: opts.onCancel,
+        mediapipeAssetBasePath: opts.mediapipeAssetBasePath,
         onComplete: (result) => {
           cleanup();
           resolve(result);