@opexa/portal-components 0.0.258 → 0.0.260

package/dist/components/shared/IdFrontImageField/useIdFrontImageField.js

@@ -0,0 +1,111 @@
+import { useFieldContext } from '@ark-ui/react';
+import { useRef } from 'react';
+import invariant from 'tiny-invariant';
+import { useMediaQuery } from 'usehooks-ts';
+import { useCamera } from '../../../client/hooks/useCamera.js';
+import { useControllableState } from '../../../client/hooks/useControllableState.js';
+import { useDisclosure } from '../../../client/hooks/useDisclosure.js';
+import { useFileQuery } from '../../../client/hooks/useFileQuery.js';
+import { useUploadPrivateImageFileMutation } from '../../../client/hooks/useUploadPrivateImageFileMutation.js';
+import { toaster } from '../../../client/utils/toaster.js';
+export function useIdFrontImageField(props) {
+    const field = useFieldContext();
+    const [value, setValue] = useControllableState({
+        value: props.value,
+        defaultValue: props.defaultValue ?? '',
+        onChange: props.onChange,
+    });
+    const query = useFileQuery(value, {
+        refetchInterval({ state }) {
+            return !state.data || state.data.status === 'UPLOADING' ? 1000 : false;
+        },
+    });
+    const mutation = useUploadPrivateImageFileMutation({
+        onSuccess(id) {
+            setValue(id);
+        },
+        onMutate() {
+            setValue('');
+        },
+        onError(error) {
+            toaster.error({
+                title: 'Upload Failed',
+                description: error.message,
+            });
+        },
+        onSettled() {
+            if (inputRef.current) {
+                inputRef.current.value = '';
+            }
+        },
+    });
+    const inputRef = useRef(null);
+    const maskRef = useRef(null);
+    const guideRef = useRef(null);
+    const desktop = useMediaQuery('(min-width: 1024px)');
+    const camera = useCamera({
+        video: {
+            facingMode: desktop ? 'user' : 'environment',
+        },
+        async transform(ctx) {
+            const body = new FormData();
+            const guideRect = guideRef.current?.getBoundingClientRect();
+            const videoRect = ctx.video.getBoundingClientRect();
+            invariant(guideRect, "'guideRef.getBoundingClientRect()' fails");
+            const scaleX = ctx.image.width / videoRect.width;
+            const scaleY = ctx.image.height / videoRect.height;
+            const cropTop = (guideRect.top - videoRect.top) * scaleY;
+            const cropLeft = (guideRect.left - videoRect.left) * scaleX;
+            const cropWidth = guideRect.width * scaleX;
+            const cropHeight = guideRect.height * scaleY;
+            body.append('image', ctx.file);
+            body.append('cropTop', cropTop.toString());
+            body.append('cropLeft', cropLeft.toString());
+            body.append('cropWidth', cropWidth.toString());
+            body.append('cropHeight', cropHeight.toString());
+            const response = await fetch('/api/transformers/id-front-image', {
+                method: 'POST',
+                body,
+            });
+            const blob = await response.blob();
+            const file = new File([blob], ctx.file.name, {
+                type: ctx.file.type,
+                endings: 'native',
+                lastModified: Date.now(),
+            });
+            const url = URL.createObjectURL(file);
+            const image = new Image();
+            image.src = url;
+            image.alt = '';
+            image.width = ctx.image.width;
+            image.height = ctx.image.height;
+            return {
+                ok: true,
+                data: {
+                    url,
+                    file,
+                    image,
+                },
+            };
+        },
+    });
+    const disclosure = useDisclosure({
+        onOpenChange(open) {
+            if (open) {
+                camera.open();
+            }
+        },
+    });
+    return {
+        field,
+        value,
+        setValue,
+        query,
+        mutation,
+        camera,
+        disclosure,
+        inputRef,
+        guideRef,
+        maskRef,
+    };
+}

package/dist/components/shared/SelfieImageField/SelfieImageField.client.d.ts

@@ -0,0 +1,15 @@
+import { type CSSProperties, type RefObject } from 'react';
+import { type ValidateFileError } from '../../../utils/validateFile';
+import { type UseSelfieImageFieldProps } from './useSelfieImageField';
+export interface SelfieImageFieldProps extends UseSelfieImageFieldProps {
+    ref?: RefObject<HTMLDivElement | null>;
+    id?: string;
+    style?: CSSProperties;
+    className?: string;
+    invalid?: boolean;
+    readOnly?: boolean;
+    disabled?: boolean;
+    required?: boolean;
+    onError?: (error: ValidateFileError<'FaceNotFoundError'>) => void;
+}
+export declare function SelfieImageField__client(props: SelfieImageFieldProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/shared/SelfieImageField/SelfieImageField.client.js

@@ -0,0 +1,170 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import Image from 'next/image';
+import { useEffect, useId, useState, } from 'react';
+import { twMerge } from 'tailwind-merge';
+import { Camera01Icon } from '../../../icons/Camera01Icon.js';
+import { CameraOffIcon } from '../../../icons/CameraOffIcon.js';
+import { CheckCircleIcon } from '../../../icons/CheckCircleIcon.js';
+import { RefreshCcw01Icon } from '../../../icons/RefreshCcw01Icon.js';
+import { Spinner02Icon } from '../../../icons/Spinner02Icon.js';
+import { UploadCloud02Icon } from '../../../icons/UploadCloud02Icon.js';
+import { XIcon } from '../../../icons/XIcon.js';
+import { Button } from '../../../ui/Button/index.js';
+import { Dialog } from '../../../ui/Dialog/index.js';
+import { Portal } from '../../../ui/Portal/index.js';
+import { createSplitProps } from '../../../utils/createSplitProps.js';
+import { validateFile, } from '../../../utils/validateFile.js';
+import { SelfieImageFieldProvider, useSelfieImageFieldContext, } from './SelfieImageFieldContext.js';
+import { useSelfieImageField, } from './useSelfieImageField.js';
+export function SelfieImageField__client(props) {
+    const [useSelfieImageFieldProps, localProps] = createSplitProps([
+        'value',
+        'onChange',
+        'defaultValue',
+    ])(props);
+    const context = useSelfieImageField(useSelfieImageFieldProps);
+    return (_jsxs(SelfieImageFieldProvider, { value: context, children: [_jsxs("div", { ref: localProps.ref, id: localProps.id, style: localProps.style, className: twMerge('group', 'border', 'border-border-primary', 'bg-bg-primary', 'relative', 'w-full', 'aspect-[352/180]', 'shrink-0', 'rounded-xl', 'p-xl', localProps.className), onDragOver: (e) => e.preventDefault(), onDragEnter: (e) => e.preventDefault(), onDragLeave: (e) => e.preventDefault(), onDrop: async (e) => {
+                    e.preventDefault();
+                    const file = e.dataTransfer.files?.[0];
+                    if (!file)
+                        return;
+                    const error = validateFile(file);
+                    if (error)
+                        return localProps.onError?.(error);
+                    context.mutation.mutate({ file });
+                }, "aria-describedby": context.field?.ariaDescribedby, children: [_jsx("input", { id: context.field?.ids?.control, ref: context.inputRef, type: "file", accept: "image/png, image/jpeg", onChange: async (e) => {
+                            const file = e.target.files?.[0];
+                            if (!file)
+                                return;
+                            const error = validateFile(file);
+                            if (error)
+                                return localProps.onError?.(error);
+                            context.mutation.mutate({ file });
+                        }, disabled: context.field?.disabled ||
+                            context.query.isLoading ||
+                            context.mutation.isPending ||
+                            localProps.disabled, readOnly: context.field?.readOnly || localProps.readOnly, required: context.field?.required || localProps.required, className: "sr-only" }), !context.query.data?.url && (_jsxs("div", { className: "flex size-full flex-col justify-center", children: [_jsx("div", { className: "border-border-primary shadow-xs mx-auto flex size-8 items-center justify-center rounded-sm border", children: _jsx(UploadCloud02Icon, { className: "text-text-placeholder-subtle size-4" }) }), _jsxs("h2", { className: "text-text-tertiary-600 mt-lg", children: [_jsxs("span", { className: "block text-center text-sm", children: [_jsx("button", { type: "button", onClick: () => {
+                                                    context.inputRef.current?.click();
+                                                }, disabled: context.field?.disabled ||
+                                                    context.field?.readOnly ||
+                                                    context.query.isLoading ||
+                                                    context.mutation.isPending ||
+                                                    localProps.disabled ||
+                                                    localProps.readOnly, className: "text-button-secondary-fg font-semibold disabled:opacity-60", children: "Click to upload" }), ' ', "or drag and drop"] }), _jsx("span", { className: "mt-xs block text-center text-xs", children: "PNG, JPG or JPEG (max. 10mb)" }), _jsx("span", { className: "m-txs block text-center text-xs", children: "or" })] }), _jsx(Button, { size: "sm", variant: "outline", className: "mx-auto mt-md w-auto", onClick: () => {
+                                    context.disclosure.setOpen(true);
+                                }, disabled: context.field?.disabled ||
+                                    context.field?.readOnly ||
+                                    context.query.isLoading ||
+                                    context.mutation.isPending ||
+                                    localProps.disabled ||
+                                    localProps.readOnly, children: "Take a photo" })] })), context.query.data?.url && (_jsxs("div", { className: "relative", children: [_jsx(Image, { src: context.query.data.url, alt: "", width: 600, height: 600, unoptimized: true, className: "h-auto w-full rounded-md" }), _jsx("button", { type: "button", className: "backdrop-blur-xs absolute right-2 top-2 rounded-full bg-white/10 p-1", onClick: () => {
+                                    context.setValue('');
+                                }, children: _jsx(XIcon, { className: "size-5" }) })] }))] }), _jsx(Camera, {})] }));
+}
+/**
+ * -------------------------------------
+ *  Camera
+ * -------------------------------------
+ */
+function Camera() {
+    const context = useSelfieImageFieldContext();
+    return (_jsx(Dialog.Root, { open: context.disclosure.open, onOpenChange: (details) => {
+            context.disclosure.setOpen(details.open);
+        }, 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 Selfie Holding Your ID" }), _jsx(Dialog.Description, { className: "text-text-tertiary-600 mt-md text-center text-xs lg:text-base", children: "Make sure your face and ID are clearly visible, with no glare\u00A0or\u00A0blur." }), _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-[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: 600, 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();
+                                    }, disabled: context.camera.loading ||
+                                        context.camera.snapping ||
+                                        !!context.camera.error ||
+                                        !context.faceFound, 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);
+                                        }, className: "w-full lg:w-[10rem]", children: [_jsx(CheckCircleIcon, { className: "size-5" }), "Use Photo"] }), _jsxs(Button, { variant: "outline", colorScheme: "gray", onClick: () => {
+                                            context.camera.reset();
+                                        }, className: "w-full lg:w-[10rem]", children: [_jsx(RefreshCcw01Icon, { className: "size-5" }), " Retake"] })] }))] }) })] }) }));
+}
+/*
+ * -------------------------------------
+ *  Video
+ * -------------------------------------
+ */
+function Video() {
+    const id = useId();
+    const context = useSelfieImageFieldContext();
+    const [maskBox, setMaskBox] = useState({
+        x: 0,
+        y: 0,
+        width: 0,
+        height: 0,
+    });
+    useEffect(() => {
+        const update = () => {
+            const guide = context.guideRef.current;
+            const mask = context.maskRef.current;
+            if (!guide || !mask)
+                return;
+            const guideRect = guide.getBoundingClientRect();
+            const maskRect = mask.getBoundingClientRect();
+            const x = guideRect.left - maskRect.left;
+            const y = guideRect.top - maskRect.top;
+            const width = guideRect.width;
+            const height = guideRect.height;
+            if (width && height) {
+                setMaskBox({
+                    x,
+                    y,
+                    width,
+                    height,
+                });
+            }
+        };
+        const observer = new ResizeObserver(update);
+        if (context.guideRef.current)
+            observer.observe(context.guideRef.current);
+        if (context.maskRef.current)
+            observer.observe(context.maskRef.current);
+        requestAnimationFrame(update);
+        return () => observer.disconnect();
+    }, [context.guideRef, context.maskRef]);
+    const [videoSize, setVideoSize] = useState({
+        width: 0,
+        height: 0,
+    });
+    useEffect(() => {
+        const video = context.camera.videoRef.current;
+        if (!video)
+            return;
+        const updateVideoWidth = () => {
+            const rect = video.getBoundingClientRect();
+            setVideoSize({
+                width: rect.width,
+                height: rect.height,
+            });
+        };
+        video.addEventListener('loadedmetadata', updateVideoWidth);
+        video.addEventListener('resize', updateVideoWidth);
+        return () => {
+            video.removeEventListener('loadedmetadata', updateVideoWidth);
+            video.removeEventListener('resize', updateVideoWidth);
+        };
+    }, [context.camera.videoRef]);
+    const guideWidth = videoSize.width <= 0 || videoSize.height <= 0
+        ? 0
+        : videoSize.width > videoSize.height
+            ? videoSize.height
+            : videoSize.width;
+    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',
+                    WebkitMaskRepeat: 'no-repeat',
+                } }), _jsx("div", { ref: context.guideRef, className: twMerge('border-utility-warning-700 absolute left-1/2 top-1/2 z-20 aspect-square -translate-x-1/2 -translate-y-1/2 rounded-md border-4 border-dashed', context.faceFound && 'border-utility-success-700', guideWidth <= 0 ? 'hidden' : 'block'), style: {
+                    width: `calc(${guideWidth}px - 2rem)`,
+                } })] }));
+}

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

@@ -0,0 +1,2 @@
+import type { SelfieImageFieldProps } from './SelfieImageField.client';
+export declare function SelfieImageField(props: SelfieImageFieldProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/shared/SelfieImageField/SelfieImageField.js

@@ -0,0 +1,11 @@
+'use client';
+import { jsx as _jsx } from "react/jsx-runtime";
+import dynamic from 'next/dynamic';
+import { Spinner02Icon } from '../../../icons/Spinner02Icon.js';
+const Component = dynamic(() => import('./SelfieImageField.client.js').then((mod) => mod.SelfieImageField__client), {
+    ssr: false,
+    loading: () => (_jsx("div", { className: "border-border-primary bg-bg-primary flex aspect-[352/180] w-full shrink-0 items-center justify-center rounded-xl border", children: _jsx(Spinner02Icon, { className: "text-text-quinary size-8" }) })),
+});
+export function SelfieImageField(props) {
+    return _jsx(Component, { ...props });
+}

package/dist/components/shared/SelfieImageField/SelfieImageFieldContext.d.ts

@@ -0,0 +1,6 @@
+import type { UseSelfieImageFieldReturn } from './useSelfieImageField';
+export declare const SelfieImageFieldProvider: (props: {
+    value: UseSelfieImageFieldReturn;
+} & {
+    children?: import("react").ReactNode | undefined;
+}) => React.ReactNode, useSelfieImageFieldContext: () => UseSelfieImageFieldReturn;

package/dist/components/shared/SelfieImageField/SelfieImageFieldContext.js

@@ -0,0 +1,2 @@
+import { createContext } from '../../../client/utils/createContext.js';
+export const [SelfieImageFieldProvider, useSelfieImageFieldContext] = createContext();

package/dist/components/shared/SelfieImageField/index.d.ts

@@ -0,0 +1 @@
+export * from './SelfieImageField';

package/dist/components/shared/SelfieImageField/index.js

@@ -0,0 +1 @@
+export * from './SelfieImageField.js';

package/dist/components/shared/SelfieImageField/useSelfieImageField.d.ts

@@ -0,0 +1,23 @@
+export interface UseSelfieImageFieldProps {
+    value?: string;
+    onChange?: (value: string) => void;
+    defaultValue?: string;
+}
+export interface UseSelfieImageFieldReturn extends ReturnType<typeof useSelfieImageField> {
+}
+export declare function useSelfieImageField(props: UseSelfieImageFieldProps): {
+    field: import("@ark-ui/react").UseFieldContext;
+    value: string;
+    setValue: import("react").Dispatch<import("react").SetStateAction<string>>;
+    query: import("@tanstack/react-query").UseQueryResult<import("../../../types").File | null, Error>;
+    mutation: import("@tanstack/react-query").UseMutationResult<string, Error, {
+        file: globalThis.File;
+        id?: string | undefined;
+    }, unknown>;
+    camera: import("../../../client/hooks/useCamera").UseCameraReturn<"FaceNotFoundError">;
+    disclosure: import("../../../client/hooks/useDisclosure").UseDisclosureReturn;
+    inputRef: import("react").RefObject<HTMLInputElement | null>;
+    guideRef: import("react").RefObject<HTMLDivElement | null>;
+    maskRef: import("react").RefObject<HTMLDivElement | null>;
+    faceFound: boolean;
+};

package/dist/components/shared/SelfieImageField/useSelfieImageField.js

@@ -0,0 +1,208 @@
+import { useFieldContext } from '@ark-ui/react';
+import { FaceDetector, FilesetResolver } from '@mediapipe/tasks-vision';
+import { useRef, useState } from 'react';
+import invariant from 'tiny-invariant';
+import { useInterval } from 'usehooks-ts';
+import { useCamera } from '../../../client/hooks/useCamera.js';
+import { useControllableState } from '../../../client/hooks/useControllableState.js';
+import { useDisclosure } from '../../../client/hooks/useDisclosure.js';
+import { useFileQuery } from '../../../client/hooks/useFileQuery.js';
+import { useUploadPrivateImageFileMutation } from '../../../client/hooks/useUploadPrivateImageFileMutation.js';
+import { toaster } from '../../../client/utils/toaster.js';
+export function useSelfieImageField(props) {
+    const field = useFieldContext();
+    const [value, setValue] = useControllableState({
+        value: props.value,
+        defaultValue: props.defaultValue ?? '',
+        onChange: props.onChange,
+    });
+    const query = useFileQuery(value, {
+        refetchInterval({ state }) {
+            return !state.data || state.data.status === 'UPLOADING' ? 1000 : false;
+        },
+    });
+    const mutation = useUploadPrivateImageFileMutation({
+        onSuccess(id) {
+            setValue(id);
+        },
+        onMutate() {
+            setValue('');
+        },
+        onError(error) {
+            toaster.error({
+                title: 'Upload Failed',
+                description: error.message,
+            });
+        },
+        onSettled() {
+            if (inputRef.current) {
+                inputRef.current.value = '';
+            }
+        },
+    });
+    const inputRef = useRef(null);
+    const maskRef = useRef(null);
+    const guideRef = useRef(null);
+    const camera = useCamera({
+        async transform(ctx) {
+            const hasFace = await validateFaceFromImage(ctx.image);
+            if (!hasFace) {
+                return {
+                    ok: false,
+                    error: {
+                        name: 'FaceNotFoundError',
+                        message: 'No face detected in the image. Please try again.',
+                    },
+                };
+            }
+            const body = new FormData();
+            const guideRect = guideRef.current?.getBoundingClientRect();
+            const videoRect = ctx.video.getBoundingClientRect();
+            invariant(guideRect, "'guideRef.getBoundingClientRect()' fails");
+            const scaleX = ctx.image.width / videoRect.width;
+            const scaleY = ctx.image.height / videoRect.height;
+            const cropTop = (guideRect.top - videoRect.top) * scaleY;
+            const cropLeft = (guideRect.left - videoRect.left) * scaleX;
+            const cropWidth = guideRect.width * scaleX;
+            const cropHeight = guideRect.height * scaleY;
+            body.append('image', ctx.file);
+            body.append('cropTop', cropTop.toString());
+            body.append('cropLeft', cropLeft.toString());
+            body.append('cropWidth', cropWidth.toString());
+            body.append('cropHeight', cropHeight.toString());
+            const response = await fetch('/api/transformers/selfie-image', {
+                method: 'POST',
+                body,
+            });
+            const blob = await response.blob();
+            const file = new File([blob], ctx.file.name, {
+                type: ctx.file.type,
+                endings: 'native',
+                lastModified: Date.now(),
+            });
+            const url = URL.createObjectURL(file);
+            const image = new Image();
+            image.src = url;
+            image.alt = '';
+            image.width = ctx.image.width;
+            image.height = ctx.image.height;
+            return {
+                ok: true,
+                data: {
+                    url,
+                    file,
+                    image,
+                },
+            };
+        },
+    });
+    const disclosure = useDisclosure({
+        onOpenChange(open) {
+            if (open) {
+                camera.open();
+            }
+        },
+    });
+    const [faceFound, setFaceFound] = useState(false);
+    useInterval(async () => {
+        if (!camera.videoRef.current || !guideRef.current) {
+            return setFaceFound(false);
+        }
+        setFaceFound(await validateFaceFromVideo(camera.videoRef.current, guideRef.current));
+    }, disclosure.open && !camera.data && !camera.error && !camera.loading
+        ? 1000
+        : null);
+    return {
+        field,
+        value,
+        setValue,
+        query,
+        mutation,
+        camera,
+        disclosure,
+        inputRef,
+        guideRef,
+        maskRef,
+        faceFound,
+    };
+}
+let __image_face_detector__;
+let __video_face_detector__;
+/* eslint-disable-next-line @typescript-eslint/no-explicit-any */
+let __vision__;
+async function getImageFaceDetector() {
+    if (!__image_face_detector__) {
+        if (!__vision__) {
+            __vision__ = await FilesetResolver.forVisionTasks('https://cdn.jsdelivr.net/npm/@mediapipe/tasks-vision@0.10.0/wasm');
+        }
+        const detector = await FaceDetector.createFromOptions(__vision__, {
+            runningMode: 'IMAGE',
+            minDetectionConfidence: 0.75,
+            baseOptions: {
+                delegate: 'GPU',
+                modelAssetPath: 'https://storage.googleapis.com/mediapipe-models/face_detector/blaze_face_short_range/float16/1/blaze_face_short_range.tflite',
+            },
+        });
+        __image_face_detector__ = detector;
+        return detector;
+    }
+    return __image_face_detector__;
+}
+async function getVideoFaceDetector() {
+    if (!__video_face_detector__) {
+        if (!__vision__) {
+            __vision__ = await FilesetResolver.forVisionTasks('https://cdn.jsdelivr.net/npm/@mediapipe/tasks-vision@0.10.0/wasm');
+        }
+        const detector = await FaceDetector.createFromOptions(__vision__, {
+            runningMode: 'VIDEO',
+            minDetectionConfidence: 0.75,
+            baseOptions: {
+                delegate: 'GPU',
+                modelAssetPath: 'https://storage.googleapis.com/mediapipe-models/face_detector/blaze_face_short_range/float16/1/blaze_face_short_range.tflite',
+            },
+        });
+        __video_face_detector__ = detector;
+        return detector;
+    }
+    return __video_face_detector__;
+}
+async function validateFaceFromImage(image) {
+    const detector = await getImageFaceDetector();
+    try {
+        const result = detector.detect(image);
+        return result.detections.length > 0;
+    }
+    catch (e) {
+        console.error(e);
+        return false;
+    }
+}
+async function validateFaceFromVideo(video, guide) {
+    if (video.readyState < 2)
+        return false;
+    const detector = await getVideoFaceDetector();
+    const result = detector.detectForVideo(video, performance.now());
+    const detection = result.detections.at(0);
+    if (!detection)
+        return false;
+    const category = detection.categories.at(0);
+    if (!category || category.score < 0.75)
+        return false;
+    const videoRect = video.getBoundingClientRect(); // DOM position & size
+    const guideRect = guide.getBoundingClientRect();
+    if (!detection.boundingBox)
+        return false;
+    const faceLeft = videoRect.left +
+        (detection.boundingBox.originX / video.videoWidth) * videoRect.width;
+    const faceTop = videoRect.top +
+        (detection.boundingBox.originY / video.videoHeight) * videoRect.height;
+    const faceRight = faceLeft +
+        (detection.boundingBox.width / video.videoWidth) * videoRect.width;
+    const faceBottom = faceTop +
+        (detection.boundingBox.height / video.videoHeight) * videoRect.height;
+    const isInside = faceLeft >= guideRect.left &&
+        faceTop >= guideRect.top &&
+        faceRight <= guideRect.right &&
+        faceBottom <= guideRect.bottom;
+    return isInside;
+}

package/dist/handlers/deleteSession.d.ts

@@ -0,0 +1,9 @@
+import { NextResponse, type NextRequest } from 'next/server';
+export declare function deleteSession(request: NextRequest): Promise<NextResponse<{
+    ok: true;
+    data?: never;
+} | {
+    ok: false;
+    message: string;
+    __error?: unknown;
+}>>;

package/dist/handlers/deleteSession.js

@@ -0,0 +1,19 @@
+import { NextResponse } from 'next/server';
+import { ACCESS_TOKEN_COOKIE_NAME, REFRESH_TOKEN_COOKIE_NAME, } from '../constants/index.js';
+import { destroySession } from '../services/auth.js';
+export async function deleteSession(request) {
+    const accessToken = request.cookies.get(ACCESS_TOKEN_COOKIE_NAME)?.value;
+    if (accessToken) {
+        await destroySession({
+            headers: {
+                Authorization: `Bearer ${accessToken}`,
+            },
+        });
+    }
+    const response = NextResponse.json({
+        ok: true,
+    });
+    response.cookies.delete(ACCESS_TOKEN_COOKIE_NAME);
+    response.cookies.delete(REFRESH_TOKEN_COOKIE_NAME);
+    return response;
+}

package/dist/handlers/getHealthCheck.d.ts

@@ -0,0 +1,9 @@
+import { NextResponse, type NextRequest } from 'next/server';
+export declare function getHealthCheck(req: NextRequest): Promise<NextResponse<{
+    ok: false;
+    message: string;
+    __error?: unknown;
+} | {
+    ok: true;
+    data: Record<string, unknown>;
+}>>;

package/dist/handlers/getHealthCheck.js

@@ -0,0 +1,16 @@
+import { NextResponse } from 'next/server';
+export async function getHealthCheck(req) {
+    return NextResponse.json({
+        ok: true,
+        data: {
+            userAgent: req.headers.get('user-agent') ?? 'UNKNOWN',
+        },
+    }, {
+        headers: {
+            'Access-Control-Allow-Origin': '*',
+            'Cache-Control': 'no-cache, no-store, must-revalidate',
+            Pragma: 'no-cache',
+            Expires: '0',
+        },
+    });
+}

package/dist/handlers/getSession.d.ts

@@ -0,0 +1,10 @@
+import { NextResponse, type NextRequest } from 'next/server';
+import type { Session } from '../types';
+export declare function getSession(request: NextRequest): Promise<NextResponse<{
+    ok: false;
+    message: string;
+    __error?: unknown;
+} | {
+    ok: true;
+    data: Session;
+}>>;