truescene-face-id-capture-sdk 1.0.0

package/dist/sdk/CaptureExperience.js

@@ -0,0 +1,241 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useMemo, useRef, useState } from 'react';
+import FaceAndIdCapture, {} from '../components/FaceAndIdCapture';
+const stripDataUrl = (value) => {
+    if (!value)
+        return null;
+    const commaIndex = value.indexOf(',');
+    return commaIndex >= 0 ? value.slice(commaIndex + 1) : value;
+};
+const formatNumber = (value, digits) => {
+    if (typeof value !== 'number' || Number.isNaN(value)) {
+        return '--';
+    }
+    return value.toFixed(digits);
+};
+const CaptureExperience = ({ sessionToken, compareUrl = '/comparev2', tokenHeader = 'Authorization', tokenPrefix = 'Bearer', tokenField = 'session_token', autoStart = false, initialShowDebug = false, showDebugToggle = false, className, onReadyChange, onStepChange, onMetricsChange, onCapture, onCompareResult, onCompareError, onError, }) => {
+    const [ready, setReady] = useState({
+        faceReady: false,
+        idReady: false,
+    });
+    const [step, setStep] = useState('FACE_ALIGN');
+    const [metrics, setMetrics] = useState(null);
+    const [showDebug, setShowDebug] = useState(initialShowDebug);
+    const [started, setStarted] = useState(false);
+    const [captures, setCaptures] = useState({
+        faceImage: null,
+        idImage: null,
+        fullImage: null,
+    });
+    const [compareResult, setCompareResult] = useState(null);
+    const [compareError, setCompareError] = useState(null);
+    const [compareLoading, setCompareLoading] = useState(false);
+    const lastCompareRef = useRef(null);
+    const trimmedToken = sessionToken?.trim() ?? '';
+    const tokenMissing = trimmedToken.length === 0;
+    useEffect(() => {
+        if (!autoStart || started || tokenMissing) {
+            return;
+        }
+        setStarted(true);
+    }, [autoStart, started, tokenMissing]);
+    useEffect(() => {
+        if (!captures.faceImage || !captures.idImage) {
+            return;
+        }
+        if (tokenMissing) {
+            const message = 'Session token is required to compare results.';
+            setCompareError(message);
+            setCompareResult(null);
+            setCompareLoading(false);
+            onCompareError?.(message);
+            onError?.(message);
+            return;
+        }
+        const last = lastCompareRef.current;
+        if (last &&
+            last.faceImage === captures.faceImage &&
+            last.idImage === captures.idImage &&
+            last.sessionToken === trimmedToken) {
+            return;
+        }
+        const facePayload = stripDataUrl(captures.faceImage);
+        const idPayload = stripDataUrl(captures.idImage);
+        if (!facePayload || !idPayload) {
+            return;
+        }
+        lastCompareRef.current = {
+            faceImage: captures.faceImage,
+            idImage: captures.idImage,
+            sessionToken: trimmedToken,
+        };
+        let isActive = true;
+        setCompareLoading(true);
+        setCompareError(null);
+        setCompareResult(null);
+        onCompareResult?.(null);
+        const headers = {
+            'Content-Type': 'application/json',
+        };
+        if (tokenHeader) {
+            headers[tokenHeader] = tokenPrefix
+                ? `${tokenPrefix} ${trimmedToken}`
+                : trimmedToken;
+        }
+        const payload = {
+            image_face: facePayload,
+            image_idcard: idPayload,
+        };
+        if (tokenField) {
+            payload[tokenField] = trimmedToken;
+        }
+        fetch(compareUrl, {
+            method: 'POST',
+            headers,
+            body: JSON.stringify(payload),
+        })
+            .then(async (res) => {
+            if (!res.ok) {
+                throw new Error(`Server error (${res.status})`);
+            }
+            return res.json();
+        })
+            .then((data) => {
+            if (!isActive) {
+                return;
+            }
+            if (typeof data?.error === 'string' && data.error.trim().length > 0) {
+                setCompareError(data.error);
+                setCompareResult(null);
+                onCompareError?.(data.error);
+                onError?.(data.error);
+                return;
+            }
+            setCompareResult(data);
+            onCompareResult?.(data);
+        })
+            .catch((error) => {
+            if (!isActive) {
+                return;
+            }
+            const message = error instanceof Error ? error.message : 'Compare failed';
+            setCompareError(message);
+            onCompareError?.(message);
+            onError?.(message);
+        })
+            .finally(() => {
+            if (!isActive) {
+                return;
+            }
+            setCompareLoading(false);
+        });
+        return () => {
+            isActive = false;
+        };
+    }, [
+        captures.faceImage,
+        captures.idImage,
+        compareUrl,
+        tokenField,
+        tokenHeader,
+        tokenMissing,
+        tokenPrefix,
+        trimmedToken,
+        onCompareError,
+        onCompareResult,
+        onError,
+    ]);
+    const statusLabel = ready.idReady ? 'Ready to continue' : 'Not ready';
+    const statusClass = ready.idReady
+        ? 'status-pill status-pill--ready'
+        : 'status-pill status-pill--not';
+    const stepLabel = step === 'FACE_ALIGN' ? 'Step 1 of 2: Face align' : 'Step 2 of 2: ID align';
+    const metricsRows = useMemo(() => {
+        if (!metrics) {
+            return [];
+        }
+        return [
+            { label: 'Step', value: metrics.step },
+            { label: 'Face ready', value: metrics.ready.faceReady ? 'Yes' : 'No' },
+            { label: 'ID ready', value: metrics.ready.idReady ? 'Yes' : 'No' },
+            { label: 'Face count', value: `${metrics.face.faceCount}` },
+            {
+                label: 'Face box',
+                value: metrics.face.faceBoxNorm
+                    ? `${metrics.face.faceBoxNorm.x.toFixed(2)}, ${metrics.face.faceBoxNorm.y.toFixed(2)}, ${metrics.face.faceBoxNorm.w.toFixed(2)}, ${metrics.face.faceBoxNorm.h.toFixed(2)}`
+                    : '--',
+            },
+            {
+                label: 'Face yaw',
+                value: metrics.face.poseValid
+                    ? `${metrics.face.yawDeg.toFixed(1)} deg`
+                    : '--',
+            },
+            {
+                label: 'Face pitch',
+                value: metrics.face.poseValid
+                    ? `${metrics.face.pitchDeg.toFixed(1)} deg`
+                    : '--',
+            },
+            {
+                label: 'Face roll',
+                value: metrics.face.poseValid
+                    ? `${metrics.face.rollDeg.toFixed(1)} deg`
+                    : '--',
+            },
+            {
+                label: 'ID rect',
+                value: metrics.id.rectNorm
+                    ? `${metrics.id.rectNorm.x.toFixed(2)}, ${metrics.id.rectNorm.y.toFixed(2)}, ${metrics.id.rectNorm.w.toFixed(2)}, ${metrics.id.rectNorm.h.toFixed(2)}`
+                    : '--',
+            },
+            {
+                label: 'ID ROI face count',
+                value: `${metrics.id.roiFaceCount}`,
+            },
+            {
+                label: 'ID ROI face box',
+                value: metrics.id.roiLargestFaceBoxNorm
+                    ? `${metrics.id.roiLargestFaceBoxNorm.x.toFixed(2)}, ${metrics.id.roiLargestFaceBoxNorm.y.toFixed(2)}, ${metrics.id.roiLargestFaceBoxNorm.w.toFixed(2)}, ${metrics.id.roiLargestFaceBoxNorm.h.toFixed(2)}`
+                    : '--',
+            },
+            {
+                label: 'ID ROI face size',
+                value: metrics.id.roiLargestFaceSizeRatio.toFixed(3),
+            },
+            {
+                label: 'ID ROI mean lum',
+                value: metrics.id.meanLumROI.toFixed(0),
+            },
+            {
+                label: 'ID ROI blur',
+                value: metrics.id.blurScoreROI.toFixed(0),
+            },
+            { label: 'Hint', value: metrics.hint },
+        ];
+    }, [metrics]);
+    const handleReadyChange = (next) => {
+        setReady(next);
+        onReadyChange?.(next);
+    };
+    const handleStepChange = (next) => {
+        setStep(next);
+        onStepChange?.(next);
+    };
+    const handleMetricsChange = (next) => {
+        setMetrics(next);
+        onMetricsChange?.(next);
+    };
+    const handleCapture = (images) => {
+        setCaptures(images);
+        onCapture?.(images);
+    };
+    return (_jsxs("div", { className: `ts-capture${className ? ` ${className}` : ''}`, children: [_jsxs("header", { className: "app__header", children: [_jsxs("div", { children: [_jsx("div", { className: "app__eyebrow", children: "TrueScene Capture" }), _jsxs("div", { children: [_jsx("h4", { className: "app__title", children: "Fast & Deepfake Resistant" }), _jsx("h4", { className: "app__title", children: "ID Verification" })] }), _jsx("p", { className: "app__subtitle", children: "Press Start Verification. Align your face in the oval, then place your ID under your nose so it covers your mouth. Keep your eyes visible." })] }), started && (_jsxs("div", { className: "app__status", children: [_jsxs("div", { className: "app__status-stack", children: [_jsx("span", { className: "status-pill status-pill--step", children: stepLabel }), _jsxs("span", { className: ready.faceReady
+                                            ? 'status-pill status-pill--ready'
+                                            : 'status-pill status-pill--pending', children: ["Face ", ready.faceReady ? 'ready' : 'not ready'] }), _jsxs("span", { className: ready.idReady
+                                            ? 'status-pill status-pill--ready'
+                                            : 'status-pill status-pill--pending', children: ["ID ", ready.idReady ? 'ready' : 'not ready'] })] }), _jsx("span", { className: statusClass, children: statusLabel })] }))] }), _jsxs("main", { className: "app__grid", children: [_jsxs("section", { className: "app__camera", children: [!started ? (_jsxs("div", { className: "app__start", children: [_jsx("button", { className: "btn btn--primary", type: "button", disabled: tokenMissing, onClick: () => setStarted(true), children: "Start Verification" }), tokenMissing && (_jsx("p", { className: "app__token-hint", children: "Provide a session token before starting." }))] })) : captures.idImage ? (_jsxs("div", { className: "app__captures", children: [_jsxs("div", { className: "capture-card", children: [_jsx("span", { children: "Face capture" }), _jsx("img", { src: captures.faceImage ?? '', alt: "Face capture" })] }), _jsxs("div", { className: "capture-card", children: [_jsx("span", { children: "ID capture (cropped)" }), _jsx("img", { src: captures.idImage, alt: "ID capture" })] }), _jsxs("div", { className: "capture-card", children: [_jsx("span", { children: "Full frame" }), _jsx("img", { src: captures.fullImage ?? '', alt: "Full frame capture" })] })] })) : (_jsx(FaceAndIdCapture, { onReadyChange: handleReadyChange, onMetricsChange: handleMetricsChange, onStepChange: handleStepChange, onCapture: handleCapture })), started ? null : _jsx("br", {}), started && showDebugToggle && (_jsx("div", { className: "app__actions", children: _jsx("button", { className: "btn btn--ghost", type: "button", onClick: () => setShowDebug((prev) => !prev), children: showDebug ? 'Hide Capture debug' : 'Show Capture Debug' }) }))] }), _jsxs("aside", { className: "app__panel", children: [captures.idImage && (_jsxs("div", { className: "panel-card panel-card--accent", children: [_jsx("h2", { children: "Match result" }), compareLoading && (_jsxs("div", { className: "metrics-row", children: [_jsx("span", { children: "Comparing face to ID..." }), _jsx("span", { className: "spinner", "aria-hidden": "true" })] })), compareError && _jsx("p", { children: compareError }), compareResult && (_jsxs("div", { className: "metrics-grid", children: [_jsxs("div", { className: "metrics-row", children: [_jsx("span", { children: "Match" }), _jsx("span", { className: compareResult.match
+                                                            ? 'match-result match-result--yes'
+                                                            : 'match-result match-result--no', children: compareResult.match ? 'YES' : 'NO' })] }), _jsxs("details", { className: "metrics-details", children: [_jsxs("summary", { className: "metrics-summary", children: [_jsxs("span", { className: "metrics-summary__top", children: [_jsx("span", { children: "Match %" }), _jsxs("span", { className: "metrics-summary__value", children: [formatNumber(compareResult.match_percentage, 2), "%"] })] }), _jsx("span", { className: "metrics-summary__arrow", "aria-hidden": "true" })] }), _jsxs("div", { className: "metrics-row", children: [_jsx("span", { children: "Cosine distance" }), _jsx("span", { children: formatNumber(compareResult.cosine_distance, 4) })] }), _jsxs("div", { className: "metrics-row", children: [_jsx("span", { children: "Cosine similarity" }), _jsx("span", { children: formatNumber(compareResult.cosine_similarity, 4) })] })] })] }))] })), captures.idImage && _jsx("br", {}), showDebug && metrics && (_jsxs("div", { className: "panel-card panel-card--metrics", children: [_jsx("h2", { children: "Debug metrics" }), _jsx("div", { className: "metrics-grid", children: metricsRows.map((row) => (_jsxs("div", { className: "metrics-row", children: [_jsx("span", { children: row.label }), _jsx("span", { children: row.value })] }, row.label))) })] })), showDebug && metrics && (_jsx("div", { children: _jsx("br", {}) })), !captures.idImage && (_jsxs("div", { className: "panel-card", children: [_jsx("h2", { children: "Quick checklist" }), _jsxs("ul", { children: [_jsx("li", { children: "Fill the oval, but avoid getting too close." }), _jsx("li", { children: "Place the ID under your nose and keep eyes visible." }), _jsx("li", { children: "Face a soft, even light source and avoid glare." }), _jsx("li", { children: "Hold steady until the status turns ready." })] })] })), _jsx("br", {}), _jsxs("div", { className: "app__cta-row", children: [_jsx("p", { children: "Already tried verification? Let's start integrating it into your app." }), _jsx("a", { className: "btn btn--ghost", href: "https://truescene.site/", target: "_blank", rel: "noreferrer", children: "Start Building" })] })] })] })] }));
+};
+export default CaptureExperience;

package/dist/sdk/element.js

@@ -0,0 +1,221 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { createRoot } from 'react-dom/client';
+import CaptureExperience, {} from './CaptureExperience';
+import { captureStyles } from './styles';
+const parseBoolean = (value) => {
+    if (value === null)
+        return false;
+    if (value === '')
+        return true;
+    const normalized = value.toLowerCase();
+    if (normalized === 'false' || normalized === '0' || normalized === 'no') {
+        return false;
+    }
+    if (normalized === 'true' || normalized === '1' || normalized === 'yes') {
+        return true;
+    }
+    return true;
+};
+export class TrueSceneCaptureElement extends HTMLElement {
+    static observedAttributes = [
+        'session-token',
+        'compare-url',
+        'token-header',
+        'token-prefix',
+        'token-field',
+        'auto-start',
+        'show-debug',
+        'debug-toggle',
+    ];
+    root = null;
+    mount = null;
+    styleEl = null;
+    connectedCallback() {
+        console.count('truescene-capture connected');
+        if (!this.shadowRoot) {
+            this.attachShadow({ mode: 'open' });
+        }
+        const shadow = this.shadowRoot;
+        if (!shadow) {
+            return;
+        }
+        if (!this.styleEl) {
+            const style = document.createElement('style');
+            style.textContent = captureStyles;
+            shadow.appendChild(style);
+            this.styleEl = style;
+        }
+        if (!this.mount) {
+            this.mount = document.createElement('div');
+            shadow.appendChild(this.mount);
+        }
+        if (!this.root) {
+            this.root = createRoot(this.mount);
+        }
+        this.renderReact();
+    }
+    disconnectedCallback() {
+        console.count('truescene-capture disconnected');
+        this.root?.unmount();
+        this.root = null;
+    }
+    attributeChangedCallback() {
+        this.renderReact();
+    }
+    set sessionToken(value) {
+        if (value === null || value === undefined) {
+            this.removeAttribute('session-token');
+            return;
+        }
+        this.setAttribute('session-token', value);
+    }
+    get sessionToken() {
+        return this.getAttribute('session-token') ?? '';
+    }
+    set compareUrl(value) {
+        if (!value) {
+            this.removeAttribute('compare-url');
+            return;
+        }
+        this.setAttribute('compare-url', value);
+    }
+    get compareUrl() {
+        return this.getAttribute('compare-url') ?? undefined;
+    }
+    set tokenHeader(value) {
+        if (!value) {
+            this.removeAttribute('token-header');
+            return;
+        }
+        this.setAttribute('token-header', value);
+    }
+    get tokenHeader() {
+        return this.getAttribute('token-header') ?? undefined;
+    }
+    set tokenPrefix(value) {
+        if (!value) {
+            this.removeAttribute('token-prefix');
+            return;
+        }
+        this.setAttribute('token-prefix', value);
+    }
+    get tokenPrefix() {
+        return this.getAttribute('token-prefix') ?? undefined;
+    }
+    set tokenField(value) {
+        if (!value) {
+            this.removeAttribute('token-field');
+            return;
+        }
+        this.setAttribute('token-field', value);
+    }
+    get tokenField() {
+        return this.getAttribute('token-field') ?? undefined;
+    }
+    set autoStart(value) {
+        if (value) {
+            this.setAttribute('auto-start', '');
+        }
+        else {
+            this.removeAttribute('auto-start');
+        }
+    }
+    get autoStart() {
+        return parseBoolean(this.getAttribute('auto-start'));
+    }
+    set initialShowDebug(value) {
+        if (value) {
+            this.setAttribute('show-debug', '');
+        }
+        else {
+            this.removeAttribute('show-debug');
+        }
+    }
+    get initialShowDebug() {
+        return parseBoolean(this.getAttribute('show-debug'));
+    }
+    set showDebugToggle(value) {
+        if (value) {
+            this.setAttribute('debug-toggle', '');
+        }
+        else {
+            this.removeAttribute('debug-toggle');
+        }
+    }
+    get showDebugToggle() {
+        return parseBoolean(this.getAttribute('debug-toggle'));
+    }
+    renderReact() {
+        if (!this.root) {
+            return;
+        }
+        const props = {
+            sessionToken: this.sessionToken,
+            compareUrl: this.compareUrl,
+            tokenHeader: this.tokenHeader,
+            tokenPrefix: this.tokenPrefix,
+            tokenField: this.tokenField,
+            autoStart: this.autoStart,
+            initialShowDebug: this.initialShowDebug,
+            showDebugToggle: this.showDebugToggle,
+            onReadyChange: (ready) => {
+                this.dispatchEvent(new CustomEvent('ready-change', {
+                    detail: ready,
+                    bubbles: true,
+                    composed: true,
+                }));
+            },
+            onStepChange: (step) => {
+                this.dispatchEvent(new CustomEvent('step-change', {
+                    detail: step,
+                    bubbles: true,
+                    composed: true,
+                }));
+            },
+            onMetricsChange: (metrics) => {
+                this.dispatchEvent(new CustomEvent('metrics-change', {
+                    detail: metrics,
+                    bubbles: true,
+                    composed: true,
+                }));
+            },
+            onCapture: (images) => {
+                this.dispatchEvent(new CustomEvent('capture', {
+                    detail: images,
+                    bubbles: true,
+                    composed: true,
+                }));
+            },
+            onCompareResult: (result) => {
+                this.dispatchEvent(new CustomEvent('compare-result', {
+                    detail: result,
+                    bubbles: true,
+                    composed: true,
+                }));
+            },
+            onCompareError: (message) => {
+                this.dispatchEvent(new CustomEvent('compare-error', {
+                    detail: message,
+                    bubbles: true,
+                    composed: true,
+                }));
+            },
+            onError: (message) => {
+                this.dispatchEvent(new CustomEvent('error', {
+                    detail: message,
+                    bubbles: true,
+                    composed: true,
+                }));
+            },
+        };
+        this.root.render(_jsx(CaptureExperience, { ...props }));
+    }
+}
+export const defineTrueSceneCapture = (tagName = 'truescene-capture') => {
+    if (typeof window === 'undefined') {
+        return;
+    }
+    if (!window.customElements?.get(tagName)) {
+        window.customElements.define(tagName, TrueSceneCaptureElement);
+    }
+};

package/dist/sdk/react/index.js

@@ -0,0 +1,125 @@
+import { createElement, useEffect, useRef } from 'react';
+const TrueSceneCapture = ({ sessionToken, compareUrl, tokenHeader, tokenPrefix, tokenField, autoStart, initialShowDebug, showDebugToggle, className, style, onReadyChange, onStepChange, onMetricsChange, onCapture, onCompareResult, onCompareError, onError, }) => {
+    const elementRef = useRef(null);
+    useEffect(() => {
+        if (typeof window === 'undefined') {
+            return;
+        }
+        if (window.customElements?.get('truescene-capture')) {
+            return;
+        }
+        const packageName = 'truescene-face-capture';
+        void import(packageName);
+    }, []);
+    useEffect(() => {
+        const element = elementRef.current;
+        if (!element)
+            return;
+        element.sessionToken = sessionToken ?? '';
+    }, [sessionToken]);
+    useEffect(() => {
+        const element = elementRef.current;
+        if (!element)
+            return;
+        element.compareUrl = compareUrl ?? '';
+    }, [compareUrl]);
+    useEffect(() => {
+        const element = elementRef.current;
+        if (!element)
+            return;
+        element.tokenHeader = tokenHeader ?? '';
+    }, [tokenHeader]);
+    useEffect(() => {
+        const element = elementRef.current;
+        if (!element)
+            return;
+        element.tokenPrefix = tokenPrefix ?? '';
+    }, [tokenPrefix]);
+    useEffect(() => {
+        const element = elementRef.current;
+        if (!element)
+            return;
+        element.tokenField = tokenField ?? '';
+    }, [tokenField]);
+    useEffect(() => {
+        const element = elementRef.current;
+        if (!element)
+            return;
+        element.autoStart = Boolean(autoStart);
+    }, [autoStart]);
+    useEffect(() => {
+        const element = elementRef.current;
+        if (!element)
+            return;
+        element.initialShowDebug = Boolean(initialShowDebug);
+    }, [initialShowDebug]);
+    useEffect(() => {
+        const element = elementRef.current;
+        if (!element)
+            return;
+        element.showDebugToggle = Boolean(showDebugToggle);
+    }, [showDebugToggle]);
+    useEffect(() => {
+        const element = elementRef.current;
+        if (!element)
+            return;
+        const readyHandler = (event) => {
+            const detail = event.detail;
+            onReadyChange?.(detail);
+        };
+        const stepHandler = (event) => {
+            const detail = event.detail;
+            onStepChange?.(detail);
+        };
+        const metricsHandler = (event) => {
+            const detail = event.detail;
+            onMetricsChange?.(detail);
+        };
+        const captureHandler = (event) => {
+            const detail = event.detail;
+            onCapture?.(detail);
+        };
+        const compareResultHandler = (event) => {
+            const detail = event.detail;
+            onCompareResult?.(detail);
+        };
+        const compareErrorHandler = (event) => {
+            const detail = event.detail;
+            onCompareError?.(detail);
+        };
+        const errorHandler = (event) => {
+            const detail = event.detail;
+            onError?.(detail);
+        };
+        element.addEventListener('ready-change', readyHandler);
+        element.addEventListener('step-change', stepHandler);
+        element.addEventListener('metrics-change', metricsHandler);
+        element.addEventListener('capture', captureHandler);
+        element.addEventListener('compare-result', compareResultHandler);
+        element.addEventListener('compare-error', compareErrorHandler);
+        element.addEventListener('error', errorHandler);
+        return () => {
+            element.removeEventListener('ready-change', readyHandler);
+            element.removeEventListener('step-change', stepHandler);
+            element.removeEventListener('metrics-change', metricsHandler);
+            element.removeEventListener('capture', captureHandler);
+            element.removeEventListener('compare-result', compareResultHandler);
+            element.removeEventListener('compare-error', compareErrorHandler);
+            element.removeEventListener('error', errorHandler);
+        };
+    }, [
+        onReadyChange,
+        onStepChange,
+        onMetricsChange,
+        onCapture,
+        onCompareResult,
+        onCompareError,
+        onError,
+    ]);
+    return createElement('truescene-capture', {
+        ref: elementRef,
+        className,
+        style,
+    });
+};
+export default TrueSceneCapture;

package/dist/sdk/styles.js

@@ -0,0 +1,2 @@
+import styles from './styles.css?inline';
+export const captureStyles = styles;

package/dist/sdk/types.js

@@ -0,0 +1 @@
+export {};

package/dist/types/components/FaceAndIdCapture.d.ts

@@ -0,0 +1,47 @@
+import { type NormalizedBox } from '../utils/faceAnalysis';
+import { type NormalizedRect } from '../utils/idPlacement';
+export type CaptureStep = 'FACE_ALIGN' | 'ID_ALIGN';
+export type FaceMetrics = {
+    faceCount: number;
+    faceBoxNorm: NormalizedBox | null;
+    yawDeg: number;
+    pitchDeg: number;
+    rollDeg: number;
+    poseValid: boolean;
+};
+export type IdMetrics = {
+    rectNorm: NormalizedRect | null;
+    roiFaceCount: number;
+    roiLargestFaceBoxNorm: NormalizedBox | null;
+    roiLargestFaceSizeRatio: number;
+    meanLumROI: number;
+    blurScoreROI: number;
+};
+export type FaceAndIdCaptureMetrics = {
+    step: CaptureStep;
+    face: FaceMetrics;
+    id: IdMetrics;
+    hint: string;
+    ready: {
+        faceReady: boolean;
+        idReady: boolean;
+    };
+};
+type FaceAndIdCaptureProps = {
+    onReadyChange: (ready: {
+        faceReady: boolean;
+        idReady: boolean;
+    }) => void;
+    onStepChange?: (step: CaptureStep) => void;
+    onMetricsChange?: (metrics: FaceAndIdCaptureMetrics) => void;
+    onCapture?: (images: {
+        faceImage: string | null;
+        idImage: string | null;
+        fullImage: string | null;
+    }) => void;
+    width?: number;
+    height?: number;
+    showBackButton?: boolean;
+};
+declare const FaceAndIdCapture: ({ onReadyChange, onStepChange, onMetricsChange, onCapture, width, height, showBackButton, }: FaceAndIdCaptureProps) => import("react/jsx-runtime").JSX.Element;
+export default FaceAndIdCapture;

package/dist/types/sdk/CaptureExperience.d.ts

@@ -0,0 +1,26 @@
+import { type CaptureStep, type FaceAndIdCaptureMetrics } from '../components/FaceAndIdCapture';
+import type { CaptureImages, CompareResult } from './types';
+type ReadyState = {
+    faceReady: boolean;
+    idReady: boolean;
+};
+export type CaptureExperienceProps = {
+    sessionToken: string;
+    compareUrl?: string;
+    tokenHeader?: string;
+    tokenPrefix?: string;
+    tokenField?: string | null;
+    autoStart?: boolean;
+    initialShowDebug?: boolean;
+    showDebugToggle?: boolean;
+    className?: string;
+    onReadyChange?: (ready: ReadyState) => void;
+    onStepChange?: (step: CaptureStep) => void;
+    onMetricsChange?: (metrics: FaceAndIdCaptureMetrics) => void;
+    onCapture?: (images: CaptureImages) => void;
+    onCompareResult?: (result: CompareResult | null) => void;
+    onCompareError?: (message: string | null) => void;
+    onError?: (message: string) => void;
+};
+declare const CaptureExperience: ({ sessionToken, compareUrl, tokenHeader, tokenPrefix, tokenField, autoStart, initialShowDebug, showDebugToggle, className, onReadyChange, onStepChange, onMetricsChange, onCapture, onCompareResult, onCompareError, onError, }: CaptureExperienceProps) => import("react/jsx-runtime").JSX.Element;
+export default CaptureExperience;