@kreltix/liveness-sdk 0.1.0

package/dist/index.esm.js

@@ -0,0 +1,1230 @@
+class KreltixError extends Error {
+    constructor(message, code, isRetryable = false) {
+        super(message);
+        this.name = "KreltixError";
+        this.code = code;
+        this.isRetryable = isRetryable;
+    }
+}
+class KreltixNetworkError extends KreltixError {
+    constructor(message = "Network request failed") {
+        super(message, "NETWORK_ERROR", true);
+        this.name = "KreltixNetworkError";
+    }
+}
+class KreltixAuthError extends KreltixError {
+    constructor(message = "Invalid or expired API key") {
+        super(message, "AUTH_ERROR", false);
+        this.name = "KreltixAuthError";
+    }
+}
+class KreltixSessionExpiredError extends KreltixError {
+    constructor(message = "Liveness session expired") {
+        super(message, "SESSION_EXPIRED", false);
+        this.name = "KreltixSessionExpiredError";
+    }
+}
+class KreltixCameraError extends KreltixError {
+    constructor(message = "Camera not available or permission denied") {
+        super(message, "CAMERA_ERROR", false);
+        this.name = "KreltixCameraError";
+    }
+}
+class KreltixServerError extends KreltixError {
+    constructor(message = "Server error") {
+        super(message, "SERVER_ERROR", true);
+        this.name = "KreltixServerError";
+    }
+}
+class KreltixValidationError extends KreltixError {
+    constructor(message = "Validation error") {
+        super(message, "VALIDATION_ERROR", false);
+        this.name = "KreltixValidationError";
+    }
+}
+class KreltixInsufficientFundsError extends KreltixError {
+    constructor(message = "Insufficient wallet balance") {
+        super(message, "INSUFFICIENT_FUNDS", false);
+        this.name = "KreltixInsufficientFundsError";
+    }
+}
+
+async function withRetry(fn, maxRetries, baseDelayMs = 1000) {
+    let lastError;
+    for (let attempt = 0; attempt <= maxRetries; attempt++) {
+        try {
+            return await fn();
+        }
+        catch (err) {
+            lastError = err;
+            if (err instanceof KreltixError && !err.isRetryable) {
+                throw err;
+            }
+            if (attempt < maxRetries) {
+                const delay = baseDelayMs * Math.pow(2, attempt);
+                await new Promise((resolve) => setTimeout(resolve, delay));
+            }
+        }
+    }
+    throw lastError;
+}
+
+class ApiClient {
+    constructor(config) {
+        this.config = config;
+    }
+    async request(method, path, body, timeoutOverride) {
+        const url = `${this.config.baseUrl}${path}`;
+        const controller = new AbortController();
+        const timeout = setTimeout(() => controller.abort(), timeoutOverride ?? this.config.timeout);
+        try {
+            const response = await fetch(url, {
+                method,
+                headers: {
+                    "Content-Type": "application/json",
+                    "X-API-Key": this.config.publicKey,
+                },
+                body: body ? JSON.stringify(body) : undefined,
+                signal: controller.signal,
+            });
+            if (response.ok) {
+                return (await response.json());
+            }
+            const errorBody = await response.json().catch(() => ({ detail: response.statusText }));
+            const detail = errorBody.detail ?? response.statusText;
+            switch (response.status) {
+                case 401:
+                case 403:
+                    throw new KreltixAuthError(detail);
+                case 402:
+                    throw new KreltixInsufficientFundsError(detail);
+                case 409:
+                    throw new KreltixValidationError(detail);
+                case 410:
+                    throw new KreltixSessionExpiredError(detail);
+                case 429:
+                    throw new KreltixServerError("Rate limit exceeded. Try again shortly.");
+                default:
+                    if (response.status >= 500) {
+                        throw new KreltixServerError(detail);
+                    }
+                    throw new KreltixValidationError(detail);
+            }
+        }
+        catch (err) {
+            if (err instanceof TypeError || err.name === "AbortError") {
+                throw new KreltixNetworkError(err.name === "AbortError"
+                    ? "Request timed out"
+                    : "Network request failed");
+            }
+            throw err;
+        }
+        finally {
+            clearTimeout(timeout);
+        }
+    }
+    async createSession(metadata) {
+        return withRetry(() => this.request("POST", "/api/v1/sessions", {
+            metadata: metadata ?? null,
+        }), this.config.maxRetries);
+    }
+    async submitVerification(sessionId, sessionToken, videos) {
+        return withRetry(() => this.request("POST", `/api/v1/sessions/${sessionId}/verify`, {
+            session_token: sessionToken,
+            videos,
+        }, 60000 // 60s timeout for multi-video upload
+        ), this.config.maxRetries);
+    }
+}
+
+class SessionManager {
+    constructor(client) {
+        this.currentSession = null;
+        this.client = client;
+    }
+    async createSession(metadata) {
+        this.currentSession = await this.client.createSession(metadata);
+        return this.currentSession;
+    }
+    async submitVerification(videos) {
+        if (!this.currentSession) {
+            throw new Error("No active session. Call createSession() first.");
+        }
+        const result = await this.client.submitVerification(this.currentSession.session_id, this.currentSession.session_token, videos);
+        this.currentSession = null;
+        return result;
+    }
+    getCurrentSession() {
+        return this.currentSession;
+    }
+    clearSession() {
+        this.currentSession = null;
+    }
+}
+
+/**
+ * Default web camera adapter using getUserMedia.
+ */
+class WebCameraAdapter {
+    constructor() {
+        this.stream = null;
+        this.videoElement = document.createElement("video");
+        this.videoElement.setAttribute("playsinline", "true");
+        this.videoElement.setAttribute("autoplay", "true");
+        this.videoElement.muted = true;
+        this.videoElement.style.width = "100%";
+        this.videoElement.style.height = "100%";
+        this.videoElement.style.objectFit = "cover";
+        this.videoElement.style.transform = "scaleX(-1)"; // Mirror for selfie
+    }
+    async start(facingMode = "user") {
+        try {
+            this.stream = await navigator.mediaDevices.getUserMedia({
+                video: {
+                    facingMode,
+                    width: { ideal: 640 },
+                    height: { ideal: 480 },
+                },
+                audio: false,
+            });
+            this.videoElement.srcObject = this.stream;
+            await this.videoElement.play();
+            return this.stream;
+        }
+        catch (err) {
+            const message = err.name === "NotAllowedError"
+                ? "Camera permission denied. Please allow camera access."
+                : err.name === "NotFoundError"
+                    ? "No camera found on this device."
+                    : `Camera error: ${err.message}`;
+            throw new KreltixCameraError(message);
+        }
+    }
+    stop() {
+        if (this.stream) {
+            this.stream.getTracks().forEach((track) => track.stop());
+            this.stream = null;
+        }
+        this.videoElement.srcObject = null;
+    }
+    getVideoElement() {
+        return this.videoElement;
+    }
+}
+class CameraManager {
+    constructor(adapter) {
+        this.adapter = adapter ?? new WebCameraAdapter();
+    }
+    async start() {
+        return this.adapter.start("user");
+    }
+    stop() {
+        this.adapter.stop();
+    }
+    getVideoElement() {
+        return this.adapter.getVideoElement();
+    }
+}
+
+/**
+ * Convert a Blob to a base64 string (without data URI prefix).
+ */
+function blobToBase64(blob) {
+    return new Promise((resolve, reject) => {
+        const reader = new FileReader();
+        reader.onloadend = () => {
+            const result = reader.result;
+            // Strip the data URI prefix (e.g., "data:video/webm;base64,")
+            const base64 = result.split("base64,")[1];
+            if (base64) {
+                resolve(base64);
+            }
+            else {
+                reject(new Error("Failed to convert blob to base64"));
+            }
+        };
+        reader.onerror = reject;
+        reader.readAsDataURL(blob);
+    });
+}
+
+class VideoRecorder {
+    constructor() {
+        this.mediaRecorder = null;
+        this.chunks = [];
+        this.resolveRecording = null;
+        this._pendingStopEarly = null;
+    }
+    /**
+     * Get the best supported MIME type for video recording.
+     */
+    getMimeType() {
+        const types = [
+            "video/webm;codecs=vp8",
+            "video/webm",
+            "video/mp4",
+        ];
+        for (const type of types) {
+            if (MediaRecorder.isTypeSupported(type)) {
+                return type;
+            }
+        }
+        return "";
+    }
+    /**
+     * Start recording from a media stream.
+     */
+    start(stream, options = {}) {
+        const { videoBitsPerSecond = 1000000 } = options;
+        const mimeType = this.getMimeType();
+        this.chunks = [];
+        this.mediaRecorder = new MediaRecorder(stream, {
+            mimeType: mimeType || undefined,
+            videoBitsPerSecond,
+        });
+        this.mediaRecorder.ondataavailable = (event) => {
+            if (event.data.size > 0) {
+                this.chunks.push(event.data);
+            }
+        };
+        this.mediaRecorder.onstop = () => {
+            const blob = new Blob(this.chunks, { type: mimeType || "video/webm" });
+            if (this.resolveRecording) {
+                this.resolveRecording(blob);
+                this.resolveRecording = null;
+            }
+        };
+        this.mediaRecorder.start(500); // Collect data every 500ms
+    }
+    /**
+     * Stop recording and return the video as a base64 string.
+     */
+    async stop() {
+        return new Promise((resolve, reject) => {
+            if (!this.mediaRecorder || this.mediaRecorder.state === "inactive") {
+                reject(new Error("No active recording"));
+                return;
+            }
+            this.resolveRecording = async (blob) => {
+                try {
+                    const base64 = await blobToBase64(blob);
+                    resolve(base64);
+                }
+                catch (err) {
+                    reject(err);
+                }
+            };
+            this.mediaRecorder.stop();
+        });
+    }
+    /**
+     * Record for a duration, then stop and return base64.
+     * Can be stopped early via the returned controller.
+     */
+    record(stream, options = {}) {
+        const { minDurationMs = 3000, maxDurationMs = 7000 } = options;
+        this.start(stream, options);
+        const promise = new Promise((resolve, reject) => {
+            // Force stop at max duration
+            const maxTimer = setTimeout(() => {
+                this.stop().then(resolve).catch(reject);
+            }, maxDurationMs);
+            // Allow early stop after min duration
+            const stopEarlyFn = () => {
+                const elapsed = Date.now() - startTime;
+                const remaining = Math.max(0, minDurationMs - elapsed);
+                setTimeout(() => {
+                    clearTimeout(maxTimer);
+                    this.stop().then(resolve).catch(reject);
+                }, remaining);
+            };
+            // Store for external access
+            this._pendingStopEarly = stopEarlyFn;
+        });
+        const startTime = Date.now();
+        return {
+            promise,
+            stopEarly: () => {
+                if (this._pendingStopEarly) {
+                    this._pendingStopEarly();
+                }
+            },
+        };
+    }
+}
+
+function distance(a, b) {
+    return Math.sqrt((a[0] - b[0]) ** 2 + (a[1] - b[1]) ** 2);
+}
+function eyeAspectRatio(eye) {
+    if (eye.length < 6)
+        return 0.3; // Default open-eye value
+    const vertical1 = distance(eye[1], eye[5]);
+    const vertical2 = distance(eye[2], eye[4]);
+    const horizontal = distance(eye[0], eye[3]);
+    if (horizontal === 0)
+        return 0;
+    return (vertical1 + vertical2) / (2 * horizontal);
+}
+class BlinkDetector {
+    constructor() {
+        this.earHistory = [];
+        this.blinkDetected = false;
+    }
+    detect(landmarks) {
+        const leftEar = eyeAspectRatio(landmarks.leftEye);
+        const rightEar = eyeAspectRatio(landmarks.rightEye);
+        const avgEar = (leftEar + rightEar) / 2;
+        this.earHistory.push(avgEar);
+        // Look for a dip (closed eyes) followed by a rise (open eyes)
+        if (this.earHistory.length >= 3) {
+            const min = Math.min(...this.earHistory);
+            const max = Math.max(...this.earHistory);
+            if (min < 0.2 && max > 0.25) {
+                this.blinkDetected = true;
+            }
+        }
+        if (this.blinkDetected) {
+            return { completed: true, progress: 1, feedback: "Blink detected!" };
+        }
+        if (avgEar < 0.22) {
+            return { completed: false, progress: 0.6, feedback: "Good, now open your eyes..." };
+        }
+        return { completed: false, progress: 0.2, feedback: "Please blink your eyes clearly." };
+    }
+    reset() {
+        this.earHistory = [];
+        this.blinkDetected = false;
+    }
+}
+
+class HeadTurnDetector {
+    constructor() {
+        this.noseOffsets = [];
+        this.turnDetected = false;
+    }
+    detect(landmarks, direction) {
+        const { noseTip, faceBounds } = landmarks;
+        const faceCenterX = faceBounds.x + faceBounds.width / 2;
+        const normalizedOffset = (noseTip[0] - faceCenterX) / faceBounds.width;
+        this.noseOffsets.push(normalizedOffset);
+        const threshold = 0.15;
+        const minRange = 0.2;
+        if (this.noseOffsets.length >= 3) {
+            const min = Math.min(...this.noseOffsets);
+            const max = Math.max(...this.noseOffsets);
+            const range = max - min;
+            if (direction === "left" && min < -threshold && range > minRange) {
+                this.turnDetected = true;
+            }
+            else if (direction === "right" && max > threshold && range > minRange) {
+                this.turnDetected = true;
+            }
+        }
+        if (this.turnDetected) {
+            return { completed: true, progress: 1, feedback: "Head turn detected!" };
+        }
+        // Progress based on how far they've turned
+        const currentOffset = direction === "left" ? -normalizedOffset : normalizedOffset;
+        const progress = Math.min(0.9, Math.max(0, currentOffset / threshold));
+        if (progress > 0.5) {
+            return {
+                completed: false,
+                progress,
+                feedback: "Almost there, keep turning...",
+            };
+        }
+        const dirLabel = direction === "left" ? "left" : "right";
+        return {
+            completed: false,
+            progress: Math.max(0.1, progress),
+            feedback: `Please turn your head to the ${dirLabel}.`,
+        };
+    }
+    reset() {
+        this.noseOffsets = [];
+        this.turnDetected = false;
+    }
+}
+
+class SmileDetector {
+    constructor() {
+        this.aspectHistory = [];
+        this.smileDetected = false;
+    }
+    detect(landmarks) {
+        const { upperLip, lowerLip } = landmarks;
+        const allPoints = [...upperLip, ...lowerLip];
+        if (allPoints.length < 4) {
+            return { completed: false, progress: 0, feedback: "Please face the camera." };
+        }
+        // Mouth dimensions
+        const xs = allPoints.map((p) => p[0]);
+        const ys = allPoints.map((p) => p[1]);
+        const mouthWidth = Math.max(...xs) - Math.min(...xs);
+        const mouthHeight = Math.max(...ys) - Math.min(...ys);
+        const aspect = mouthWidth > 0 ? mouthHeight / mouthWidth : 0;
+        this.aspectHistory.push(aspect);
+        if (this.aspectHistory.length >= 3) {
+            const min = Math.min(...this.aspectHistory);
+            const max = Math.max(...this.aspectHistory);
+            if (max - min > 0.05 && max > 0.15) {
+                this.smileDetected = true;
+            }
+        }
+        if (this.smileDetected) {
+            return { completed: true, progress: 1, feedback: "Smile detected!" };
+        }
+        if (aspect > 0.12) {
+            return { completed: false, progress: 0.6, feedback: "Keep smiling..." };
+        }
+        return { completed: false, progress: 0.2, feedback: "Please smile naturally." };
+    }
+    reset() {
+        this.aspectHistory = [];
+        this.smileDetected = false;
+    }
+}
+
+/**
+ * Lightweight on-device challenge detection for UX guidance.
+ * This is NOT a security layer -- the server is the sole authority on liveness.
+ */
+class ChallengeDetector {
+    constructor() {
+        this.blinkDetector = new BlinkDetector();
+        this.headTurnDetector = new HeadTurnDetector();
+        this.smileDetector = new SmileDetector();
+    }
+    /**
+     * Process a frame's face landmarks and return detection result for the given challenge.
+     */
+    detect(challenge, landmarks) {
+        switch (challenge) {
+            case "blink":
+                return this.blinkDetector.detect(landmarks);
+            case "turn_left":
+                return this.headTurnDetector.detect(landmarks, "left");
+            case "turn_right":
+                return this.headTurnDetector.detect(landmarks, "right");
+            case "smile":
+                return this.smileDetector.detect(landmarks);
+            default:
+                return { completed: false, progress: 0, feedback: "Unknown challenge" };
+        }
+    }
+    /**
+     * Reset all detectors for a new session.
+     */
+    reset() {
+        this.blinkDetector.reset();
+        this.headTurnDetector.reset();
+        this.smileDetector.reset();
+    }
+}
+
+/**
+ * Animated SVG overlays that render on top of the camera feed.
+ * Semi-transparent so the user can see themselves through them.
+ */
+const CHALLENGE_ILLUSTRATIONS = {
+    turn_right: `
+    <svg viewBox="0 0 320 400" width="100%" height="100%" xmlns="http://www.w3.org/2000/svg">
+      <style>
+        .kr-guide { opacity: 0.85; }
+        .kr-arrow { animation: kr-slideLeft 1.2s ease-in-out infinite; }
+        @keyframes kr-slideLeft {
+          0%,100% { transform: translateX(0); opacity: 0.5; }
+          50% { transform: translateX(-12px); opacity: 1; }
+        }
+        .kr-face-outline { animation: kr-turnRight 2s ease-in-out infinite; transform-origin: 160px 170px; }
+        @keyframes kr-turnRight {
+          0%,100% { transform: rotate(0deg); }
+          50% { transform: rotate(-12deg); }
+        }
+      </style>
+      <g class="kr-guide">
+        <!-- Face oval guide -->
+        <ellipse class="kr-face-outline" cx="160" cy="170" rx="75" ry="95" fill="none" stroke="rgba(59,130,246,0.5)" stroke-width="2.5" stroke-dasharray="8 6"/>
+        <!-- Arrow points left on screen = user's right in mirror -->
+        <g class="kr-arrow">
+          <path d="M65 170 L45 155 L45 163 L25 163 L25 177 L45 177 L45 185 Z" fill="rgba(59,130,246,0.8)"/>
+        </g>
+        <!-- Label -->
+        <text x="160" y="300" text-anchor="middle" fill="rgba(255,255,255,0.9)" font-size="16" font-family="-apple-system,sans-serif" font-weight="600">Turn right</text>
+      </g>
+    </svg>
+  `,
+    turn_left: `
+    <svg viewBox="0 0 320 400" width="100%" height="100%" xmlns="http://www.w3.org/2000/svg">
+      <style>
+        .kr-guide { opacity: 0.85; }
+        .kr-arrow { animation: kr-slideRight 1.2s ease-in-out infinite; }
+        @keyframes kr-slideRight {
+          0%,100% { transform: translateX(0); opacity: 0.5; }
+          50% { transform: translateX(12px); opacity: 1; }
+        }
+        .kr-face-outline { animation: kr-turnLeft 2s ease-in-out infinite; transform-origin: 160px 170px; }
+        @keyframes kr-turnLeft {
+          0%,100% { transform: rotate(0deg); }
+          50% { transform: rotate(12deg); }
+        }
+      </style>
+      <g class="kr-guide">
+        <ellipse class="kr-face-outline" cx="160" cy="170" rx="75" ry="95" fill="none" stroke="rgba(59,130,246,0.5)" stroke-width="2.5" stroke-dasharray="8 6"/>
+        <!-- Arrow points right on screen = user's left in mirror -->
+        <g class="kr-arrow">
+          <path d="M255 170 L275 155 L275 163 L295 163 L295 177 L275 177 L275 185 Z" fill="rgba(59,130,246,0.8)"/>
+        </g>
+        <text x="160" y="300" text-anchor="middle" fill="rgba(255,255,255,0.9)" font-size="16" font-family="-apple-system,sans-serif" font-weight="600">Turn left</text>
+      </g>
+    </svg>
+  `,
+    blink: `
+    <svg viewBox="0 0 320 400" width="100%" height="100%" xmlns="http://www.w3.org/2000/svg">
+      <style>
+        .kr-guide { opacity: 0.85; }
+        .kr-eye { animation: kr-blink 2.2s ease-in-out infinite; }
+        @keyframes kr-blink {
+          0%,30%,50%,100% { ry: 10; }
+          38%,42% { ry: 1; }
+        }
+        .kr-face-outline { opacity: 1; }
+      </style>
+      <g class="kr-guide">
+        <ellipse class="kr-face-outline" cx="160" cy="170" rx="75" ry="95" fill="none" stroke="rgba(59,130,246,0.5)" stroke-width="2.5" stroke-dasharray="8 6"/>
+        <!-- Eye guides -->
+        <ellipse class="kr-eye" cx="130" cy="155" rx="15" ry="10" fill="none" stroke="rgba(59,130,246,0.7)" stroke-width="2"/>
+        <ellipse class="kr-eye" cx="190" cy="155" rx="15" ry="10" fill="none" stroke="rgba(59,130,246,0.7)" stroke-width="2"/>
+        <text x="160" y="300" text-anchor="middle" fill="rgba(255,255,255,0.9)" font-size="16" font-family="-apple-system,sans-serif" font-weight="600">Blink your eyes</text>
+      </g>
+    </svg>
+  `,
+    smile: `
+    <svg viewBox="0 0 320 400" width="100%" height="100%" xmlns="http://www.w3.org/2000/svg">
+      <style>
+        .kr-guide { opacity: 0.85; }
+        .kr-mouth { animation: kr-smile 2s ease-in-out infinite; }
+        @keyframes kr-smile {
+          0%,100% { d: path("M130 200 Q160 215 190 200"); }
+          50% { d: path("M120 195 Q160 235 200 195"); }
+        }
+        .kr-face-outline { opacity: 1; }
+      </style>
+      <g class="kr-guide">
+        <ellipse class="kr-face-outline" cx="160" cy="170" rx="75" ry="95" fill="none" stroke="rgba(59,130,246,0.5)" stroke-width="2.5" stroke-dasharray="8 6"/>
+        <!-- Smile guide -->
+        <path class="kr-mouth" d="M130 200 Q160 215 190 200" fill="none" stroke="rgba(59,130,246,0.7)" stroke-width="2.5" stroke-linecap="round"/>
+        <text x="160" y="300" text-anchor="middle" fill="rgba(255,255,255,0.9)" font-size="16" font-family="-apple-system,sans-serif" font-weight="600">Smile naturally</text>
+      </g>
+    </svg>
+  `,
+};
+/**
+ * Processing/analyzing animation shown while waiting for server response.
+ */
+const PROCESSING_ILLUSTRATION = `
+  <svg viewBox="0 0 200 200" width="200" height="200" xmlns="http://www.w3.org/2000/svg">
+    <style>
+      .kr-scan-ring { animation: kr-rotate 2s linear infinite; transform-origin: 100px 100px; }
+      @keyframes kr-rotate { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }
+      .kr-pulse { animation: kr-pulse 1.5s ease-in-out infinite; transform-origin: 100px 100px; }
+      @keyframes kr-pulse { 0%,100% { transform: scale(1); opacity: 0.3; } 50% { transform: scale(1.08); opacity: 0.6; } }
+      .kr-dot { animation: kr-dotPulse 1.2s ease-in-out infinite; }
+      .kr-dot:nth-child(2) { animation-delay: 0.2s; }
+      .kr-dot:nth-child(3) { animation-delay: 0.4s; }
+      @keyframes kr-dotPulse { 0%,100% { opacity: 0.3; } 50% { opacity: 1; } }
+      .kr-check-path { stroke-dasharray: 60; stroke-dashoffset: 60; }
+      .kr-check-path.visible { animation: kr-drawCheck 0.5s ease forwards; }
+      @keyframes kr-drawCheck { to { stroke-dashoffset: 0; } }
+    </style>
+    <!-- Background pulse -->
+    <circle class="kr-pulse" cx="100" cy="100" r="70" fill="none" stroke="rgba(59,130,246,0.3)" stroke-width="1.5"/>
+    <!-- Spinning ring -->
+    <g class="kr-scan-ring">
+      <circle cx="100" cy="100" r="55" fill="none" stroke="rgba(59,130,246,0.15)" stroke-width="3"/>
+      <path d="M100 45 A55 55 0 0 1 155 100" fill="none" stroke="rgba(59,130,246,0.8)" stroke-width="3" stroke-linecap="round"/>
+    </g>
+    <!-- Face icon -->
+    <circle cx="100" cy="90" r="25" fill="none" stroke="rgba(255,255,255,0.5)" stroke-width="1.5"/>
+    <circle cx="91" cy="85" r="2.5" fill="rgba(255,255,255,0.5)"/>
+    <circle cx="109" cy="85" r="2.5" fill="rgba(255,255,255,0.5)"/>
+    <path d="M92 97 Q100 103 108 97" fill="none" stroke="rgba(255,255,255,0.5)" stroke-width="1.5" stroke-linecap="round"/>
+    <!-- Loading dots -->
+    <circle class="kr-dot" cx="85" cy="140" r="3" fill="rgba(59,130,246,0.8)"/>
+    <circle class="kr-dot" cx="100" cy="140" r="3" fill="rgba(59,130,246,0.8)"/>
+    <circle class="kr-dot" cx="115" cy="140" r="3" fill="rgba(59,130,246,0.8)"/>
+  </svg>
+`;
+/**
+ * Success checkmark animation.
+ */
+const SUCCESS_ILLUSTRATION = `
+  <svg viewBox="0 0 200 200" width="200" height="200" xmlns="http://www.w3.org/2000/svg">
+    <style>
+      .kr-success-circle { animation: kr-scaleIn 0.4s ease forwards; transform-origin: 100px 100px; transform: scale(0); }
+      @keyframes kr-scaleIn { to { transform: scale(1); } }
+      .kr-success-check { stroke-dasharray: 60; stroke-dashoffset: 60; animation: kr-drawCheck 0.5s 0.3s ease forwards; }
+      @keyframes kr-drawCheck { to { stroke-dashoffset: 0; } }
+    </style>
+    <circle class="kr-success-circle" cx="100" cy="100" r="60" fill="rgba(34,197,94,0.15)" stroke="rgba(34,197,94,0.8)" stroke-width="3"/>
+    <path class="kr-success-check" d="M72 100 L92 120 L128 80" fill="none" stroke="rgba(34,197,94,0.9)" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"/>
+  </svg>
+`;
+/**
+ * Failure X animation.
+ */
+const FAILURE_ILLUSTRATION = `
+  <svg viewBox="0 0 200 200" width="200" height="200" xmlns="http://www.w3.org/2000/svg">
+    <style>
+      .kr-fail-circle { animation: kr-scaleIn 0.4s ease forwards; transform-origin: 100px 100px; transform: scale(0); }
+      @keyframes kr-scaleIn { to { transform: scale(1); } }
+      .kr-fail-x1 { stroke-dasharray: 50; stroke-dashoffset: 50; animation: kr-drawX 0.3s 0.3s ease forwards; }
+      .kr-fail-x2 { stroke-dasharray: 50; stroke-dashoffset: 50; animation: kr-drawX 0.3s 0.45s ease forwards; }
+      @keyframes kr-drawX { to { stroke-dashoffset: 0; } }
+    </style>
+    <circle class="kr-fail-circle" cx="100" cy="100" r="60" fill="rgba(239,68,68,0.15)" stroke="rgba(239,68,68,0.8)" stroke-width="3"/>
+    <line class="kr-fail-x1" x1="78" y1="78" x2="122" y2="122" stroke="rgba(239,68,68,0.9)" stroke-width="4" stroke-linecap="round"/>
+    <line class="kr-fail-x2" x1="122" y1="78" x2="78" y2="122" stroke="rgba(239,68,68,0.9)" stroke-width="4" stroke-linecap="round"/>
+  </svg>
+`;
+function getIllustrationHTML(challenge) {
+    return CHALLENGE_ILLUSTRATIONS[challenge] ?? "";
+}
+
+const OVERLAY_STYLES = `
+  .kreltix-overlay {
+    position: fixed;
+    top: 0; left: 0; right: 0; bottom: 0;
+    background: rgba(0, 0, 0, 0.95);
+    z-index: 99999;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+    color: #fff;
+    gap: 0;
+  }
+
+  /* Step indicators */
+  .kreltix-steps {
+    display: flex;
+    gap: 8px;
+    margin-bottom: 14px;
+  }
+  .kreltix-step {
+    width: 40px;
+    height: 4px;
+    border-radius: 2px;
+    background: rgba(255,255,255,0.12);
+    transition: background 0.4s;
+  }
+  .kreltix-step.active { background: #3b82f6; }
+  .kreltix-step.done { background: #22c55e; }
+
+  .kreltix-step-label {
+    font-size: 12px;
+    color: rgba(255,255,255,0.4);
+    margin-bottom: 14px;
+    letter-spacing: 0.5px;
+  }
+
+  /* Camera area with overlay illustration */
+  .kreltix-camera-wrapper {
+    position: relative;
+    width: 300px;
+    height: 380px;
+    border-radius: 20px;
+    overflow: hidden;
+    border: 3px solid rgba(255,255,255,0.1);
+    transition: border-color 0.4s;
+    background: #000;
+  }
+  .kreltix-camera-wrapper.recording { border-color: rgba(59,130,246,0.6); }
+  .kreltix-camera-wrapper.completed { border-color: rgba(34,197,94,0.6); }
+
+  .kreltix-camera-wrapper video {
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+    transform: scaleX(-1);
+  }
+
+  /* SVG guide overlay on top of camera */
+  .kreltix-guide-overlay {
+    position: absolute;
+    top: 0; left: 0; right: 0; bottom: 0;
+    pointer-events: none;
+    transition: opacity 0.4s;
+  }
+  .kreltix-guide-overlay.hidden { opacity: 0; }
+
+  /* Recording indicator */
+  .kreltix-rec-dot {
+    position: absolute;
+    top: 14px;
+    right: 14px;
+    display: flex;
+    align-items: center;
+    gap: 6px;
+    opacity: 0;
+    transition: opacity 0.3s;
+  }
+  .kreltix-rec-dot.visible { opacity: 1; }
+  .kreltix-rec-dot::before {
+    content: '';
+    width: 8px;
+    height: 8px;
+    border-radius: 50%;
+    background: #ef4444;
+    animation: kr-recBlink 1s ease-in-out infinite;
+  }
+  @keyframes kr-recBlink { 0%,100% { opacity: 1; } 50% { opacity: 0.3; } }
+  .kreltix-rec-dot span {
+    font-size: 11px;
+    font-weight: 600;
+    color: rgba(255,255,255,0.8);
+    letter-spacing: 0.5px;
+  }
+
+  /* Timer bar at bottom of camera */
+  .kreltix-timer-bar {
+    position: absolute;
+    bottom: 0; left: 0; right: 0;
+    height: 3px;
+    background: rgba(255,255,255,0.1);
+  }
+  .kreltix-timer-fill {
+    height: 100%;
+    background: #3b82f6;
+    width: 0%;
+    transition: width 0.1s linear;
+  }
+
+  /* Text below camera */
+  .kreltix-instructions {
+    margin-top: 18px;
+    font-size: 17px;
+    font-weight: 600;
+    text-align: center;
+    max-width: 280px;
+    line-height: 1.4;
+  }
+  .kreltix-feedback {
+    margin-top: 6px;
+    font-size: 13px;
+    color: rgba(255,255,255,0.45);
+    text-align: center;
+    min-height: 20px;
+  }
+
+  /* Processing state (replaces camera) */
+  .kreltix-processing {
+    display: none;
+    flex-direction: column;
+    align-items: center;
+    gap: 20px;
+  }
+  .kreltix-processing.visible {
+    display: flex;
+  }
+  .kreltix-processing-anim {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+  .kreltix-processing-text {
+    font-size: 16px;
+    font-weight: 500;
+    color: rgba(255,255,255,0.8);
+    text-align: center;
+  }
+  .kreltix-processing-sub {
+    font-size: 13px;
+    color: rgba(255,255,255,0.35);
+    text-align: center;
+    margin-top: -8px;
+  }
+
+  /* Result state */
+  .kreltix-result {
+    display: none;
+    flex-direction: column;
+    align-items: center;
+    gap: 16px;
+  }
+  .kreltix-result.visible { display: flex; }
+  .kreltix-result-text {
+    font-size: 20px;
+    font-weight: 700;
+    text-align: center;
+  }
+  .kreltix-result-text.pass { color: #22c55e; }
+  .kreltix-result-text.fail { color: #ef4444; }
+  .kreltix-result-sub {
+    font-size: 13px;
+    color: rgba(255,255,255,0.4);
+    text-align: center;
+    max-width: 260px;
+  }
+`;
+class ChallengeOverlay {
+    constructor() {
+        this.overlay = null;
+        this.cameraWrapper = null;
+        this.guideOverlay = null;
+        this.recDot = null;
+        this.timerFill = null;
+        this.instructionsEl = null;
+        this.feedbackEl = null;
+        this.styleEl = null;
+        this.stepsContainer = null;
+        this.stepLabelEl = null;
+        this.stepEls = [];
+        this.processingEl = null;
+        this.processingAnimEl = null;
+        this.processingTextEl = null;
+        this.processingSubEl = null;
+        this.resultEl = null;
+        this.resultTextEl = null;
+        this.resultSubEl = null;
+        this.resultAnimEl = null;
+        this.timerInterval = null;
+    }
+    mount(container, totalSteps = 1) {
+        this.styleEl = document.createElement("style");
+        this.styleEl.textContent = OVERLAY_STYLES;
+        document.head.appendChild(this.styleEl);
+        this.overlay = document.createElement("div");
+        this.overlay.className = "kreltix-overlay";
+        // Steps
+        this.stepsContainer = document.createElement("div");
+        this.stepsContainer.className = "kreltix-steps";
+        this.stepEls = [];
+        for (let i = 0; i < totalSteps; i++) {
+            const step = document.createElement("div");
+            step.className = "kreltix-step";
+            this.stepsContainer.appendChild(step);
+            this.stepEls.push(step);
+        }
+        this.stepLabelEl = document.createElement("div");
+        this.stepLabelEl.className = "kreltix-step-label";
+        // Camera wrapper with guide overlay
+        this.cameraWrapper = document.createElement("div");
+        this.cameraWrapper.className = "kreltix-camera-wrapper";
+        this.guideOverlay = document.createElement("div");
+        this.guideOverlay.className = "kreltix-guide-overlay";
+        this.cameraWrapper.appendChild(this.guideOverlay);
+        this.recDot = document.createElement("div");
+        this.recDot.className = "kreltix-rec-dot";
+        this.recDot.innerHTML = "<span>REC</span>";
+        this.cameraWrapper.appendChild(this.recDot);
+        const timerBar = document.createElement("div");
+        timerBar.className = "kreltix-timer-bar";
+        this.timerFill = document.createElement("div");
+        this.timerFill.className = "kreltix-timer-fill";
+        timerBar.appendChild(this.timerFill);
+        this.cameraWrapper.appendChild(timerBar);
+        // Text
+        this.instructionsEl = document.createElement("div");
+        this.instructionsEl.className = "kreltix-instructions";
+        this.feedbackEl = document.createElement("div");
+        this.feedbackEl.className = "kreltix-feedback";
+        // Processing state
+        this.processingEl = document.createElement("div");
+        this.processingEl.className = "kreltix-processing";
+        this.processingAnimEl = document.createElement("div");
+        this.processingAnimEl.className = "kreltix-processing-anim";
+        this.processingTextEl = document.createElement("div");
+        this.processingTextEl.className = "kreltix-processing-text";
+        this.processingSubEl = document.createElement("div");
+        this.processingSubEl.className = "kreltix-processing-sub";
+        this.processingEl.appendChild(this.processingAnimEl);
+        this.processingEl.appendChild(this.processingTextEl);
+        this.processingEl.appendChild(this.processingSubEl);
+        // Result state
+        this.resultEl = document.createElement("div");
+        this.resultEl.className = "kreltix-result";
+        this.resultAnimEl = document.createElement("div");
+        this.resultAnimEl.className = "kreltix-processing-anim";
+        this.resultTextEl = document.createElement("div");
+        this.resultTextEl.className = "kreltix-result-text";
+        this.resultSubEl = document.createElement("div");
+        this.resultSubEl.className = "kreltix-result-sub";
+        this.resultEl.appendChild(this.resultAnimEl);
+        this.resultEl.appendChild(this.resultTextEl);
+        this.resultEl.appendChild(this.resultSubEl);
+        // Assemble
+        this.overlay.appendChild(this.stepsContainer);
+        this.overlay.appendChild(this.stepLabelEl);
+        this.overlay.appendChild(this.cameraWrapper);
+        this.overlay.appendChild(this.instructionsEl);
+        this.overlay.appendChild(this.feedbackEl);
+        this.overlay.appendChild(this.processingEl);
+        this.overlay.appendChild(this.resultEl);
+        const target = container ?? document.body;
+        target.appendChild(this.overlay);
+        return this.cameraWrapper;
+    }
+    setStep(index, total, challenge) {
+        this.stepEls.forEach((el, i) => {
+            el.className = "kreltix-step";
+            if (i < index)
+                el.classList.add("done");
+            else if (i === index)
+                el.classList.add("active");
+        });
+        if (this.stepLabelEl) {
+            this.stepLabelEl.textContent = `Step ${index + 1} of ${total}`;
+        }
+        // Show illustration on camera
+        if (this.guideOverlay) {
+            this.guideOverlay.innerHTML = getIllustrationHTML(challenge);
+            this.guideOverlay.className = "kreltix-guide-overlay";
+        }
+    }
+    startRecording(durationMs = 7000) {
+        if (this.cameraWrapper)
+            this.cameraWrapper.className = "kreltix-camera-wrapper recording";
+        if (this.recDot)
+            this.recDot.className = "kreltix-rec-dot visible";
+        // Timer bar animation
+        const startTime = Date.now();
+        if (this.timerInterval)
+            clearInterval(this.timerInterval);
+        this.timerInterval = setInterval(() => {
+            const elapsed = Date.now() - startTime;
+            const pct = Math.min(100, (elapsed / durationMs) * 100);
+            if (this.timerFill)
+                this.timerFill.style.width = `${pct}%`;
+            if (elapsed >= durationMs && this.timerInterval) {
+                clearInterval(this.timerInterval);
+            }
+        }, 50);
+    }
+    stopRecording() {
+        if (this.timerInterval) {
+            clearInterval(this.timerInterval);
+            this.timerInterval = null;
+        }
+        if (this.recDot)
+            this.recDot.className = "kreltix-rec-dot";
+        if (this.timerFill)
+            this.timerFill.style.width = "100%";
+        if (this.cameraWrapper)
+            this.cameraWrapper.className = "kreltix-camera-wrapper completed";
+    }
+    hideGuide() {
+        if (this.guideOverlay)
+            this.guideOverlay.className = "kreltix-guide-overlay hidden";
+    }
+    showProcessing() {
+        // Hide camera and text, show processing
+        if (this.cameraWrapper)
+            this.cameraWrapper.style.display = "none";
+        if (this.stepsContainer)
+            this.stepsContainer.style.display = "none";
+        if (this.stepLabelEl)
+            this.stepLabelEl.style.display = "none";
+        if (this.instructionsEl)
+            this.instructionsEl.style.display = "none";
+        if (this.feedbackEl)
+            this.feedbackEl.style.display = "none";
+        if (this.processingAnimEl)
+            this.processingAnimEl.innerHTML = PROCESSING_ILLUSTRATION;
+        if (this.processingTextEl)
+            this.processingTextEl.textContent = "Analyzing your face...";
+        if (this.processingSubEl)
+            this.processingSubEl.textContent = "This usually takes a few seconds";
+        if (this.processingEl)
+            this.processingEl.className = "kreltix-processing visible";
+    }
+    updateProcessingText(text, sub) {
+        if (this.processingTextEl)
+            this.processingTextEl.textContent = text;
+        if (sub && this.processingSubEl)
+            this.processingSubEl.textContent = sub;
+    }
+    showResult(passed, confidence) {
+        if (this.processingEl)
+            this.processingEl.className = "kreltix-processing";
+        if (this.resultAnimEl) {
+            this.resultAnimEl.innerHTML = passed ? SUCCESS_ILLUSTRATION : FAILURE_ILLUSTRATION;
+        }
+        if (this.resultTextEl) {
+            this.resultTextEl.textContent = passed ? "Verification Passed" : "Verification Failed";
+            this.resultTextEl.className = `kreltix-result-text ${passed ? "pass" : "fail"}`;
+        }
+        if (this.resultSubEl) {
+            this.resultSubEl.textContent = passed
+                ? `Confidence: ${confidence}%`
+                : "Please try again with better lighting and follow the instructions carefully.";
+        }
+        if (this.resultEl)
+            this.resultEl.className = "kreltix-result visible";
+    }
+    setInstructions(text) {
+        if (this.instructionsEl)
+            this.instructionsEl.textContent = text;
+    }
+    setFeedback(text) {
+        if (this.feedbackEl)
+            this.feedbackEl.textContent = text;
+    }
+    unmount() {
+        if (this.timerInterval)
+            clearInterval(this.timerInterval);
+        if (this.overlay) {
+            this.overlay.remove();
+            this.overlay = null;
+        }
+        if (this.styleEl) {
+            this.styleEl.remove();
+            this.styleEl = null;
+        }
+    }
+}
+
+const DEFAULT_BASE_URL = "https://api.kreltix.com";
+const DEFAULT_TIMEOUT = 10000;
+const DEFAULT_MAX_RETRIES = 2;
+const RECORDING_DURATION_MS = 7000;
+class KreltixSDK {
+    constructor(config) {
+        this.config = config;
+        this.apiClient = new ApiClient(config);
+        this.sessionManager = new SessionManager(this.apiClient);
+    }
+    static initialize(publicKey, options) {
+        if (!publicKey.startsWith("pk_live_")) {
+            throw new KreltixError("Invalid key. Use a public key (pk_live_...) for client-side SDK.", "INVALID_KEY");
+        }
+        return new KreltixSDK({
+            publicKey,
+            baseUrl: options?.baseUrl ?? DEFAULT_BASE_URL,
+            timeout: options?.timeout ?? DEFAULT_TIMEOUT,
+            maxRetries: options?.maxRetries ?? DEFAULT_MAX_RETRIES,
+        });
+    }
+    async startLivenessCheck(options = {}) {
+        const { container, showOverlay = true, metadata, cameraAdapter, onSessionCreated, onChallengeStarted, onProgress, onError, } = options;
+        const notify = (event) => onProgress?.(event);
+        const camera = new CameraManager(cameraAdapter);
+        const detector = new ChallengeDetector();
+        let overlay = null;
+        try {
+            // 1. Create session
+            notify({ stage: "session_created", message: "Creating verification session..." });
+            const session = await this.sessionManager.createSession(metadata);
+            onSessionCreated?.(session);
+            const { challenges, instructions } = session;
+            notify({ stage: "session_created", message: `Challenges: ${challenges.join(" → ")}` });
+            // 2. Mount overlay & start camera
+            if (showOverlay)
+                overlay = new ChallengeOverlay();
+            const cameraContainer = overlay?.mount(container, challenges.length);
+            notify({ stage: "camera_ready", message: "Opening camera..." });
+            const stream = await camera.start();
+            // Insert video element BEFORE the guide overlay so guide renders on top
+            const videoEl = camera.getVideoElement();
+            if (cameraContainer) {
+                cameraContainer.insertBefore(videoEl, cameraContainer.firstChild);
+            }
+            notify({ stage: "camera_ready", message: "Camera ready" });
+            // 3. Record each challenge step
+            const recordedVideos = [];
+            for (let i = 0; i < challenges.length; i++) {
+                const challenge = challenges[i];
+                const instruction = instructions[i];
+                // Show step + guide overlay on camera
+                if (overlay) {
+                    overlay.setStep(i, challenges.length, challenge);
+                    overlay.setInstructions(instruction);
+                    overlay.setFeedback("Position your face in the oval");
+                }
+                onChallengeStarted?.(challenge);
+                notify({ stage: "recording", message: `Step ${i + 1}/${challenges.length}: ${challenge}` });
+                // Pause so user can see the animated guide on camera
+                await sleep(2000);
+                // Start recording
+                if (overlay) {
+                    overlay.setFeedback("Recording...");
+                    overlay.startRecording(RECORDING_DURATION_MS);
+                }
+                detector.reset();
+                const recorder = new VideoRecorder();
+                const { promise: videoPromise } = recorder.record(stream, {
+                    minDurationMs: 3000,
+                    maxDurationMs: RECORDING_DURATION_MS,
+                });
+                const videoBase64 = await videoPromise;
+                recordedVideos.push(videoBase64);
+                // Step done
+                if (overlay) {
+                    overlay.stopRecording();
+                    overlay.setFeedback("Done!");
+                }
+                // Brief pause between steps
+                if (i < challenges.length - 1) {
+                    await sleep(1000);
+                }
+            }
+            // 4. Processing phase
+            if (overlay) {
+                overlay.showProcessing();
+            }
+            notify({ stage: "uploading", message: "Uploading videos..." });
+            // Simulate progress messages during upload
+            const progressMessages = [
+                { delay: 2000, text: "Uploading videos...", sub: "This usually takes a few seconds" },
+                { delay: 4000, text: "Analyzing facial features...", sub: "Checking liveness indicators" },
+                { delay: 7000, text: "Verifying challenge responses...", sub: "Almost done" },
+            ];
+            const messageTimers = progressMessages.map(({ delay, text, sub }) => setTimeout(() => overlay?.updateProcessingText(text, sub), delay));
+            try {
+                const result = await this.sessionManager.submitVerification(recordedVideos);
+                // Clear progress timers
+                messageTimers.forEach(clearTimeout);
+                notify({ stage: "complete", message: "Verification complete" });
+                // Show result for 2 seconds
+                if (overlay) {
+                    overlay.showResult(result.is_live, result.confidence);
+                    await sleep(2500);
+                }
+                return {
+                    sessionId: result.session_id,
+                    isLive: result.is_live,
+                    confidence: result.confidence,
+                    challengeResults: result.challenges_completed,
+                    allChallengesPassed: result.all_challenges_passed,
+                    recommendation: result.recommendation,
+                    error: result.error,
+                    indicators: result.indicators,
+                };
+            }
+            catch (err) {
+                messageTimers.forEach(clearTimeout);
+                if (err instanceof KreltixSessionExpiredError) {
+                    notify({ stage: "session_created", message: "Session expired, please try again." });
+                }
+                throw err;
+            }
+        }
+        catch (err) {
+            onError?.(err);
+            throw err;
+        }
+        finally {
+            camera.stop();
+            overlay?.unmount();
+            detector.reset();
+        }
+    }
+}
+function sleep(ms) {
+    return new Promise((r) => setTimeout(r, ms));
+}
+
+export { BlinkDetector, CHALLENGE_ILLUSTRATIONS, CameraManager, ChallengeDetector, ChallengeOverlay, HeadTurnDetector, KreltixAuthError, KreltixCameraError, KreltixError, KreltixInsufficientFundsError, KreltixNetworkError, KreltixSDK, KreltixServerError, KreltixSessionExpiredError, KreltixValidationError, SmileDetector, VideoRecorder, WebCameraAdapter, getIllustrationHTML };
+//# sourceMappingURL=index.esm.js.map