@opexa/portal-components 0.0.242 → 0.0.243

package/dist/client/hooks/useCamera.d.ts

@@ -7,6 +7,7 @@ export interface CameraError<T extends string = never> {
 export interface CameraData {
     url: string;
     file: File;
+    image: HTMLImageElement;
 }
 export interface CameraCropPoints {
     x: number;
@@ -29,11 +30,15 @@ export interface UseCameraReturn<T extends string = never> {
     data: CameraData | null;
     error: CameraError<T> | null;
     loading: boolean;
+    snapping: boolean;
     videoRef: React.RefObject<HTMLVideoElement | null>;
     videoProps: ComponentPropsWithRef<'video'>;
 }
+export interface CameraTransformData extends CameraData {
+    canvas: HTMLCanvasElement;
+}
 export interface UseCameraOptions<T extends string = never> extends MediaStreamConstraints {
-    transform?(data: CameraData): CameraData | Promise<CameraData>;
+    transform?(data: CameraTransformData): CameraData | Promise<CameraData>;
     validate?(data: CameraData): CameraError<T> | void | null | undefined | Promise<CameraError<T> | void | null | undefined>;
 }
 export declare function useCamera<T extends string = never>(options?: UseCameraOptions<T>): UseCameraReturn<T>;

package/dist/client/hooks/useCamera.js

@@ -1,6 +1,7 @@
 import { isBoolean, isFunction, isObject } from 'lodash-es';
 import { useCallback, useMemo, useRef, useState, } from 'react';
 import invariant from 'tiny-invariant';
+import { useMediaQuery } from 'usehooks-ts';
 export function useCamera(options = {}) {
     const { transform, validate, ...constraints } = options;
     const videoRef = useRef(null);
@@ -8,6 +9,8 @@ export function useCamera(options = {}) {
     const [data, setData] = useState(null);
     const [error, setError] = useState(null);
     const [loading, setLoading] = useState(false);
+    const [snapping, setSnapping] = useState(false);
+    const desktop = useMediaQuery('(min-width: 1024px)');
     const [mirror, setMirror] = useState(false);
     const open = useCallback(async () => {
         setData(null);
@@ -31,10 +34,18 @@ export function useCamera(options = {}) {
                 video: {
                     facingMode: 'user',
                     noiseSuppression: true,
+                    width: {
+                        ideal: 9999,
+                    },
+                    height: {
+                        ideal: 9999,
+                    },
+                    aspectRatio: {
+                        exact: desktop ? 16 / 9 : 4 / 3,
+                    },
                     frameRate: {
-                        min: 15,
-                        max: 60,
-                        ideal: 30,
+                        max: 120,
+                        ideal: 90,
                     },
                     ...(isBoolean(constraints.video) ? {} : constraints.video),
                 },
@@ -74,10 +85,12 @@ export function useCamera(options = {}) {
         finally {
             setLoading(false);
         }
-    }, [constraints, setData, setError]);
+    }, [constraints, desktop]);
     const close = useCallback(() => {
         setData(null);
         setError(null);
+        setLoading(false);
+        setSnapping(false);
         return new Promise((resolve) => {
             stream.current?.getTracks().forEach((track) => track.stop());
             videoRef.current?.pause();
@@ -87,6 +100,7 @@ export function useCamera(options = {}) {
     const snap = useCallback(async (opts = {}) => {
         setData(null);
         setError(null);
+        setSnapping(true);
         const video = videoRef.current;
         const canvas = document.createElement('canvas');
         const context = canvas.getContext('2d');
@@ -98,12 +112,18 @@ export function useCamera(options = {}) {
         const hdResolution = video.videoWidth >= 1280 && video.videoHeight >= 720;
         const highResolution = video.videoWidth >= 1920 && video.videoHeight >= 1080;
         const scaleFactor = lowResolution
-            ? (opts.scale ?? 2)
+            ? (opts.scale ?? (opts.crop ? 2.15 : 2))
             : highResolution
-                ? 1
+                ? opts.crop
+                    ? 1.25
+                    : 1.15
                 : hdResolution
-                    ? 1.15
-                    : 1.25;
+                    ? opts.crop
+                        ? 1.5
+                        : 1.25
+                    : opts.crop
+                        ? 1.5
+                        : 2;
         let x = 0;
         let y = 0;
         let w = video.videoWidth;
@@ -127,6 +147,7 @@ export function useCamera(options = {}) {
         context.drawImage(video, x, y, w, h, 0, 0, w * scaleFactor, h * scaleFactor);
         canvas.toBlob(async (blob) => {
             if (!blob) {
+                setSnapping(false);
                 return setError({
                     name: 'CameraError',
                     message: "'canvas.toBlob' failed to create blob",
@@ -138,21 +159,46 @@ export function useCamera(options = {}) {
                 endings: 'native',
                 lastModified: Date.now(),
             });
-            const data = { url, file };
+            const image = new Image();
+            image.src = url;
+            image.alt = '';
+            image.width = canvas.width;
+            image.height = canvas.height;
+            if (!image.complete || image.naturalWidth === 0) {
+                await new Promise((resolve, reject) => {
+                    image.onload = () => resolve();
+                    image.onerror = () => reject();
+                });
+            }
+            const data = isFunction(transform)
+                ? await transform({
+                    url,
+                    file,
+                    image,
+                    canvas,
+                })
+                : {
+                    url,
+                    file,
+                    image,
+                };
             const error = await validate?.(data);
             if (error)
                 setError(error);
             else
-                setData(isFunction(transform) ? await transform(data) : data);
+                setData(data);
+            setSnapping(false);
         }, 'image/jpeg', 1);
     }, [mirror, transform, validate]);
     const reset = useCallback(() => {
         setData(null);
         setError(null);
         setLoading(false);
+        setSnapping(false);
         return Promise.resolve();
     }, [setData, setError]);
     const reopen = useCallback(async () => {
+        setSnapping(false);
         setLoading(true);
         close();
         await sleep();
@@ -171,8 +217,6 @@ export function useCamera(options = {}) {
             position: 'relative',
             boxSizing: 'border-box',
             background: 'transparent',
-            objectFit: 'cover',
-            objectPosition: 'center',
             transform: mirror ? 'scaleX(-1)' : 'none',
         },
     }), [mirror]);
@@ -185,6 +229,7 @@ export function useCamera(options = {}) {
         data,
         error,
         loading,
+        snapping,
         videoRef,
         videoProps,
     };

package/dist/client/hooks/useFeatureFlag.d.ts

@@ -1,5 +1,21 @@
-export declare const FEATURE_FLAG_KEY = "FEATURE_FLAG_ENABLED";
-export declare const useFeatureFlag: () => {
-    featureFlagEnabled: boolean;
-    setFeatureFlagEnabled: import("react").Dispatch<import("react").SetStateAction<boolean>>;
-};
+export interface UseFeatureFlagReturn {
+    enabled: boolean;
+    enable(): Promise<void>;
+    disable(): Promise<void>;
+}
+export declare function useFeatureFlag(): UseFeatureFlagReturn;
+interface FeatureFlagEventDetail {
+    enabled: boolean;
+}
+type FeatureFlagEvent = CustomEvent<FeatureFlagEventDetail>;
+interface EventsMap {
+    'web-portal::feature-flag': FeatureFlagEvent;
+}
+type Listener<K extends keyof EventsMap> = (this: Window, event: EventsMap[K]) => void;
+declare global {
+    interface Window {
+        addEventListener<T extends keyof EventsMap>(type: T, listener: Listener<T>): void;
+        removeEventListener<K extends keyof EventsMap>(type: K, listener: Listener<K>): void;
+    }
+}
+export {};

package/dist/client/hooks/useFeatureFlag.js

@@ -1,16 +1,56 @@
 'use client';
 import { useEffect, useState } from 'react';
-export const FEATURE_FLAG_KEY = 'FEATURE_FLAG_ENABLED';
-export const useFeatureFlag = () => {
-    const [featureFlagEnabled, setFeatureFlagEnabled] = useState(false);
+import { FEATURE_FLAG_LOCAL_STORAGE_KEY } from '../../constants/index.js';
+const event = new CustomEvent('web-portal::feature-flag', {
+    detail: {
+        enabled: false,
+    },
+    bubbles: true,
+    cancelable: false,
+});
+export function useFeatureFlag() {
+    const [enabled, setEnabled] = useState(false);
+    function enable() {
+        return new Promise((resolve) => {
+            const event = new CustomEvent('web-portal::feature-flag', {
+                detail: {
+                    enabled: true,
+                },
+                bubbles: true,
+                cancelable: false,
+            });
+            window.dispatchEvent(event);
+            resolve();
+        });
+    }
+    function disable() {
+        return new Promise((resolve) => {
+            window.dispatchEvent(event);
+            resolve();
+        });
+    }
     useEffect(() => {
-        const storedFlag = localStorage.getItem(FEATURE_FLAG_KEY);
-        if (storedFlag !== null) {
-            setFeatureFlagEnabled(storedFlag === 'true');
+        if (localStorage.getItem(FEATURE_FLAG_LOCAL_STORAGE_KEY) != null) {
+            setEnabled(true);
         }
     }, []);
+    useEffect(() => {
+        const handle = (event) => {
+            if (event.detail.enabled) {
+                setEnabled(true);
+                localStorage.setItem(FEATURE_FLAG_LOCAL_STORAGE_KEY, '');
+            }
+            else {
+                setEnabled(false);
+                localStorage.removeItem(FEATURE_FLAG_LOCAL_STORAGE_KEY);
+            }
+        };
+        window.addEventListener('web-portal::feature-flag', handle);
+        return () => window.removeEventListener('web-portal::feature-flag', handle);
+    }, []);
     return {
-        featureFlagEnabled,
-        setFeatureFlagEnabled,
+        enabled,
+        enable,
+        disable,
     };
-};
+}

package/dist/components/PortalProvider/FeatureFlag.d.ts

@@ -0,0 +1 @@
+export declare function FeatureFlag(): import("react/jsx-runtime").JSX.Element;

package/dist/components/PortalProvider/FeatureFlag.js

@@ -0,0 +1,26 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { usePathname, useRouter, useSearchParams } from 'next/navigation';
+import { useEffect } from 'react';
+import { useFeatureFlag } from '../../client/hooks/useFeatureFlag.js';
+import { Portal } from '../../ui/Portal/index.js';
+import { Presence } from '../../ui/Presence/index.js';
+export function FeatureFlag() {
+    const router = useRouter();
+    const pathname = usePathname();
+    const searchParams = useSearchParams();
+    const featureFlag = useFeatureFlag();
+    useEffect(() => {
+        if (searchParams.has('future')) {
+            featureFlag.enable();
+        }
+    }, [featureFlag, searchParams]);
+    return (_jsx(Portal, { children: _jsx(Presence, { present: featureFlag.enabled, asChild: true, children: _jsx("div", { className: "fixed bottom-3 flex w-full flex-col items-center justify-center", children: _jsxs("div", { className: "rounded-full bg-black/50 px-2 py-1 text-sm leading-none backdrop-blur-md", children: ["Experimental features are enabled.", ' ', _jsx("button", { type: "button", className: "cursor-pointer underline underline-offset-2", onClick: async () => {
+                                await featureFlag.disable();
+                                const newSearchParams = new URLSearchParams(searchParams);
+                                newSearchParams.delete('future');
+                                router.replace(`${pathname}?${newSearchParams.toString()}`, {
+                                    scroll: false,
+                                });
+                            }, children: "Disable" })] }) }) }) }));
+}

package/dist/components/PortalProvider/PortalProvider.js

@@ -9,6 +9,7 @@ import { prefetchSessionQuery } from '../../server/utils/prefetchSessionQuery.js
 import { prefetchWalletQuery } from '../../server/utils/prefetchWalletQuery.js';
 import { FacebookPixel, GoogleRecaptcha } from '../../third-parties/index.js';
 import { getQueryClient } from '../../utils/getQueryClient.js';
+import { FeatureFlag } from './FeatureFlag.js';
 import { Providers } from './Providers.js';
 import { SetupDomain } from './SetupDomain.js';
 import { Snackbar } from './Snackbar.js';
@@ -21,5 +22,5 @@ export async function PortalProvider({ children, facebookPixelId, googleAnalytic
         prefetchAccountQuery(),
         prefetchWalletQuery(),
     ]);
-    return (_jsxs(_Fragment, { children: [INTERNALS__REPORT_WEB_VITALS && _jsx(WebVitals, {}), _jsx(Providers, { children: _jsxs(HydrationBoundary, { state: dehydrate(queryClient), children: [children, _jsx(Suspense, { fallback: null, children: _jsx(SetupDomain, {}) })] }) }), _jsx(Snackbar, {}), facebookPixelId && _jsx(FacebookPixel, { fbId: facebookPixelId }), googleAnalyticsId && _jsx(GoogleAnalytics, { gaId: googleAnalyticsId }), googleTagManagerId && _jsx(GoogleTagManager, { gtmId: googleTagManagerId }), googleRecaptchaSiteKey && (_jsx(GoogleRecaptcha, { siteKey: googleRecaptchaSiteKey }))] }));
+    return (_jsxs(_Fragment, { children: [INTERNALS__REPORT_WEB_VITALS && _jsx(WebVitals, {}), _jsx(Providers, { children: _jsxs(HydrationBoundary, { state: dehydrate(queryClient), children: [children, _jsx(Suspense, { fallback: null, children: _jsx(SetupDomain, {}) })] }) }), _jsx(Snackbar, {}), _jsx(Suspense, { fallback: null, children: _jsx(FeatureFlag, {}) }), facebookPixelId && _jsx(FacebookPixel, { fbId: facebookPixelId }), googleAnalyticsId && _jsx(GoogleAnalytics, { gaId: googleAnalyticsId }), googleTagManagerId && _jsx(GoogleTagManager, { gtmId: googleTagManagerId }), googleRecaptchaSiteKey && (_jsx(GoogleRecaptcha, { siteKey: googleRecaptchaSiteKey }))] }));
 }

package/dist/components/SignIn/MobileNumberSignIn.js

@@ -121,9 +121,11 @@ export function MobileNumberSignIn() {
                                 globalStore.signIn.setOpen(false);
                                 globalStore.kycReminder.setOpen(true);
                             }
-                            catch {
+                            catch (err) {
                                 toaster.error({
-                                    description: 'Invalid Verification Code',
+                                    description: err instanceof Error
+                                        ? err.message
+                                        : 'Invalid Verification Code',
                                 });
                             }
                         }), children: [_jsx(Controller, { name: "verificationCode", control: step2Form.control, render: (o) => (_jsxs(Field.Root, { invalid: o.fieldState.invalid, children: [_jsxs(PinInput.Root, { placeholder: "0", value: o.field.value, onValueChange: (details) => {

package/dist/components/SignIn/NameAndPasswordSignIn.js

@@ -41,9 +41,10 @@ export function NameAndPasswordSignIn() {
                 form.reset();
             }
         },
-        onError() {
+        onError(err) {
             toaster.error({
-                description: 'Invalid username or password',
+                description: err.message ||
+                    'An error occurred while signing in. Please try again.',
             });
         },
     });

package/dist/components/shared/IdDocumentField.js

@@ -1,8 +1,8 @@
 'use client';
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useFieldContext } from '@ark-ui/react';
 import Image from 'next/image';
-import { useId, useLayoutEffect, useRef, useState, } from 'react';
+import { useEffect, useId, useRef, useState, } from 'react';
 import { twMerge } from 'tailwind-merge';
 import { useMediaQuery } from 'usehooks-ts';
 import { useCamera } from '../../client/hooks/useCamera.js';
@@ -72,41 +72,30 @@ function Camera() {
     const context = useIdDocumentFieldContext();
     return (_jsx(Dialog.Root, { open: context.disclosure.open, onOpenChange: (details) => {
             context.disclosure.setOpen(details.open);
-        }, onExitComplete: context.camera.close, children: _jsxs(Portal, { children: [_jsx(Dialog.Backdrop, { className: "!z-[calc(var(--z-dialog)+1)]" }), _jsx(Dialog.Positioner, { className: "!z-[calc(var(--z-dialog)+2)] flex items-center justify-center overflow-y-auto py-4", children: _jsxs(Dialog.Content, { className: "bg-bg-primary-alt mx-auto w-[calc(100dvw-1rem)] max-w-[calc(100dvw-1rem)] overflow-y-auto rounded-lg px-4 py-5 lg:w-[747px] lg:max-w-[747px] lg:px-3xl lg:py-4xl", children: [_jsx(Dialog.CloseTrigger, { children: _jsx(XIcon, {}) }), _jsx(Dialog.Title, { className: "text-center font-semibold lg:text-xl", children: "Take a Picture of Your Front ID" }), _jsxs(Dialog.Description, { className: "text-text-tertiary-600 mt-md text-center text-xs lg:text-base", children: ["Make sure your ID is clearly visible, well-lit, and not blurry.", ' ', _jsx("br", { className: "hidden lg:block" }), "Avoid glare or reflections, and ensure all corners are within\u00A0the\u00A0frame."] }), _jsxs("div", { className: "relative mt-5 lg:mt-10 lg:px-3xl", children: [_jsxs("div", { className: twMerge('border-border-disabled relative w-full overflow-hidden rounded-md border bg-black lg:rounded-lg', !context.camera.data &&
-                                            !context.camera.error &&
-                                            !context.camera.loading
-                                            ? 'block'
-                                            : 'hidden'), children: [_jsx("video", { ...context.camera.videoProps }), _jsx(Mask, {})] }), context.camera.error && (_jsxs("div", { className: "border-border-disabled flex aspect-[85.60/53.98] flex-col items-center justify-center rounded-md border bg-black px-4 lg:rounded-lg", children: [_jsx(CameraOffIcon, { className: "text-text-placeholder-subtle size-10 text-center lg:size-12" }), _jsx("h2", { className: "mt-3 text-sm font-semibold lg:mt-4 lg:text-base", children: context.camera.error.name }), _jsx("p", { className: "text-text-tertiary-600 mt-0.5 text-center text-xs lg:mt-1 lg:text-sm", children: context.camera.error.message }), _jsx(Button, { size: "xs", variant: "outline", colorScheme: "gray", fullWidth: false, className: "mt-4 lg:mt-5", onClick: () => {
+        }, closeOnEscape: false, closeOnInteractOutside: false, onExitComplete: context.camera.close, children: _jsxs(Portal, { children: [_jsx(Dialog.Backdrop, { className: "!z-[calc(var(--z-dialog)+1)]" }), _jsx(Dialog.Positioner, { className: "!z-[calc(var(--z-dialog)+2)] flex items-center justify-center overflow-y-auto py-4", children: _jsxs(Dialog.Content, { className: "bg-bg-primary-alt mx-auto w-[calc(100dvw-1rem)] max-w-[calc(100dvw-1rem)] overflow-y-auto rounded-lg px-4 py-5 lg:w-[747px] lg:max-w-[747px] lg:px-3xl lg:py-4xl", children: [_jsx(Dialog.CloseTrigger, { children: _jsx(XIcon, {}) }), _jsx(Dialog.Title, { className: "text-center font-semibold lg:text-xl", children: "Take a Picture of Your Front ID" }), _jsxs(Dialog.Description, { className: "text-text-tertiary-600 mt-md text-center text-xs lg:text-base", children: ["Make sure your ID is clearly visible, well-lit, and not blurry.", ' ', _jsx("br", { className: "hidden lg:block" }), "Avoid glare or reflections, and ensure all corners are within\u00A0the\u00A0frame."] }), _jsxs("div", { className: "relative mt-5 lg:mt-10 lg:px-3xl", children: [_jsx(Video, {}), context.camera.error && (_jsxs("div", { className: "border-border-disabled flex aspect-[4/3] flex-col items-center justify-center rounded-md border bg-black px-4 lg:aspect-video", children: [_jsx(CameraOffIcon, { className: "text-text-placeholder-subtle size-10 text-center lg:size-12" }), _jsx("h2", { className: "mt-3 text-sm font-semibold lg:mt-4 lg:text-base", children: context.camera.error.name }), _jsx("p", { className: "text-text-tertiary-600 mt-0.5 text-center text-xs lg:mt-1 lg:text-sm", children: context.camera.error.message }), _jsx(Button, { size: "xs", variant: "outline", colorScheme: "gray", fullWidth: false, className: "mt-4 lg:mt-5", onClick: () => {
                                                     context.camera.reopen();
-                                                }, children: "Try again" })] })), context.camera.loading && (_jsx("div", { className: "border-border-disabled flex aspect-[85.60/53.98] flex-col items-center justify-center rounded-md border bg-black px-4 lg:rounded-lg", children: _jsx(Spinner02Icon, { className: "text-text-placeholder size-8" }) })), context.camera.data && (_jsx("div", { className: "border-border-disabled h-auto w-full overflow-hidden rounded-md border bg-black lg:rounded-lg", children: _jsx(Image, { src: context.camera.data.url, alt: "", width: 600, height: 378.08, unoptimized: true, className: "block h-auto w-full" }) }))] }), !context.camera.data &&
-                                !context.camera.error &&
-                                !context.camera.loading && (_jsx("div", { className: "mt-5 lg:mt-10", children: _jsxs(Button, { className: "disabled:bg-bg-disabled disabled:text-text-disabled mx-auto w-full px-xl lg:w-auto", onClick: () => {
-                                        const rect = context.guideRef.current?.getBoundingClientRect();
-                                        const crop = !rect
-                                            ? undefined
-                                            : {
-                                                y: rect.y,
-                                                x: rect.x,
-                                                width: rect.width,
-                                                height: rect.height,
-                                            };
-                                        context.camera.snap({ crop });
-                                    }, children: [_jsx(Camera01Icon, { className: "size-5" }), "Capture"] }) })), context.camera.data && (_jsxs("div", { className: "mt-5 flex gap-3 lg:mt-10", children: [_jsxs(Button, { onClick: () => {
+                                                }, children: "Try again" })] })), context.camera.loading && (_jsx("div", { className: "border-border-disabled flex aspect-[4/3] flex-col items-center justify-center rounded-md border bg-black px-4 lg:aspect-video", children: _jsx(Spinner02Icon, { className: "text-text-placeholder size-8" }) })), context.camera.data && (_jsx("div", { className: "border-border-disabled aspect-[4/3] w-full overflow-hidden rounded-md border bg-black lg:aspect-video", children: _jsx(Image, { src: context.camera.data.url, alt: "", width: 600, height: 378.08, unoptimized: true, className: "mx-auto mt-2 block h-[calc(100%-1rem)] w-auto" }) }))] }), !context.camera.data && (_jsx("div", { className: "mt-5 lg:mt-10", children: _jsxs(Button, { className: "disabled:bg-bg-disabled disabled:text-text-disabled mx-auto w-full px-xl py-lg lg:w-[10rem]", onClick: () => {
+                                        context.camera.snap({
+                                            crop: context.guideRef.current?.getBoundingClientRect(),
+                                        });
+                                    }, disabled: context.camera.snapping ||
+                                        context.camera.loading ||
+                                        !!context.camera.error, children: [context.camera.snapping ? (_jsx(Spinner02Icon, { className: "size-5" })) : (_jsx(Camera01Icon, { className: "size-5" })), "Capture"] }) })), context.camera.data && (_jsxs("div", { className: "mt-5 flex gap-3 lg:mt-10 lg:justify-center", children: [_jsxs(Button, { onClick: () => {
                                             const file = context.camera.data?.file;
                                             if (!file)
                                                 return;
                                             context.mutation.mutate({ file });
                                             context.disclosure.setOpen(false);
-                                        }, children: [_jsx(CheckCircleIcon, { className: "size-5" }), "Use Photo"] }), _jsxs(Button, { variant: "outline", colorScheme: "gray", onClick: () => {
+                                        }, className: "w-full lg:w-[10rem]", children: [_jsx(CheckCircleIcon, { className: "size-5" }), "Use Photo"] }), _jsxs(Button, { variant: "outline", colorScheme: "gray", onClick: () => {
                                             context.camera.reset();
-                                        }, children: [_jsx(RefreshCcw01Icon, { className: "size-5" }), " Retake"] })] }))] }) })] }) }));
+                                        }, className: "w-full lg:w-[10rem]", children: [_jsx(RefreshCcw01Icon, { className: "size-5" }), " Retake"] })] }))] }) })] }) }));
 }
 /**
  * -------------------------------------
- *  Mask
+ *  Video
  * -------------------------------------
  */
-function Mask() {
+function Video() {
     const id = useId();
     const context = useIdDocumentFieldContext();
     const [maskBox, setMaskBox] = useState({
@@ -115,7 +104,7 @@ function Mask() {
         width: 0,
         height: 0,
     });
-    useLayoutEffect(() => {
+    useEffect(() => {
         const update = () => {
             const guide = context.guideRef.current;
             const mask = context.maskRef.current;
@@ -144,7 +133,9 @@ function Mask() {
         requestAnimationFrame(update);
         return () => observer.disconnect();
     }, [context.guideRef, context.maskRef]);
-    return (_jsxs(_Fragment, { children: [_jsx("svg", { className: "pointer-events-none absolute h-full w-full", children: _jsx("defs", { children: _jsxs("mask", { id: id, maskUnits: "userSpaceOnUse", children: [_jsx("rect", { x: "0", y: "0", width: "100%", height: "100%", fill: "white" }), _jsx("rect", { x: maskBox.x, y: maskBox.y, width: maskBox.width, height: maskBox.height, fill: "black", rx: "8", ry: "8" })] }) }) }), _jsx("div", { ref: context.maskRef, className: "absolute inset-0 bg-black/60 backdrop-blur-sm", style: {
+    return (_jsxs("div", { className: twMerge('relative h-auto w-full overflow-hidden', !context.camera.data && !context.camera.error && !context.camera.loading
+            ? 'block'
+            : 'hidden'), children: [_jsx("video", { ...context.camera.videoProps }), _jsx("svg", { className: "pointer-events-none absolute -inset-4 size-[200%]", children: _jsx("defs", { children: _jsxs("mask", { id: id, maskUnits: "userSpaceOnUse", children: [_jsx("rect", { x: "0", y: "0", width: "200%", height: "200%", fill: "white" }), _jsx("rect", { x: maskBox.x, y: maskBox.y, width: maskBox.width, height: maskBox.height, fill: "black", rx: "8", ry: "8" })] }) }) }), _jsx("div", { ref: context.maskRef, className: "absolute -inset-4 size-[200%] bg-black/60 backdrop-blur-sm", style: {
                     mask: `url(#${id})`,
                     WebkitMask: `url(#${id})`,
                     maskRepeat: 'no-repeat',

package/dist/components/shared/SelfieField.d.ts

@@ -1,6 +1,3 @@
-import '@mediapipe/face_detection';
-import '@tensorflow/tfjs-backend-webgl';
-import '@tensorflow/tfjs-core';
 import { type CSSProperties, type RefObject } from 'react';
 import { type ValidateFileError } from '../../utils/validateFile';
 export interface SelfieFieldProps extends UseSelfieFieldProps {
@@ -20,4 +17,5 @@ interface UseSelfieFieldProps {
     onChange?: (value: string) => void;
     defaultValue?: string;
 }
+export declare function validateFaceFromImage(img: HTMLImageElement): Promise<boolean>;
 export {};