@pallasoft/ps-file-components 1.4.0 → 1.5.0

package/dist/constants/ps-file-picker-labels.d.ts

@@ -1,8 +1,10 @@
 export declare const PsFilePickerLabels: {
-    readonly browse: "or click to browse your files";
-    readonly browseTouch: "or tap to choose from your device";
+    readonly choose: "Choose files";
+    readonly chooseOne: "Choose a file";
+    readonly dragHint: "Drag and drop files here";
+    readonly dragHintOne: "Drag and drop a file here";
     readonly dropActive: "Drop to upload";
-    readonly formats: "Accepted formats:";
     readonly invalidType: "is not a supported file type.";
+    readonly scan: "Scan with camera";
     readonly tooLarge: "is too large.";
 };

package/dist/constants/ps-file-picker-labels.js

@@ -2,10 +2,12 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.PsFilePickerLabels = void 0;
 exports.PsFilePickerLabels = {
-    browse: 'or click to browse your files',
-    browseTouch: 'or tap to choose from your device',
+    choose: 'Choose files',
+    chooseOne: 'Choose a file',
+    dragHint: 'Drag and drop files here',
+    dragHintOne: 'Drag and drop a file here',
     dropActive: 'Drop to upload',
-    formats: 'Accepted formats:',
     invalidType: 'is not a supported file type.',
+    scan: 'Scan with camera',
     tooLarge: 'is too large.',
 };

package/dist/constants/ps-scan-camera-status.d.ts

@@ -1,5 +1,9 @@
 export declare const PsScanCameraStatus: {
+    readonly Busy: "busy";
+    readonly Checking: "checking";
     readonly Denied: "denied";
+    readonly Insecure: "insecure";
+    readonly Prompt: "prompt";
     readonly Ready: "ready";
     readonly Starting: "starting";
     readonly Unavailable: "unavailable";

package/dist/constants/ps-scan-camera-status.js

@@ -2,7 +2,11 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.PsScanCameraStatus = void 0;
 exports.PsScanCameraStatus = {
+    Busy: 'busy',
+    Checking: 'checking',
     Denied: 'denied',
+    Insecure: 'insecure',
+    Prompt: 'prompt',
     Ready: 'ready',
     Starting: 'starting',
     Unavailable: 'unavailable',

package/dist/constants/ps-scan-chrome-classes.d.ts

@@ -0,0 +1,12 @@
+export declare const PsScanChromeClasses: {
+    readonly button: "ps-focus-ring ps-control ps-control-padding inline-flex max-w-full items-center justify-center gap-2 rounded-ps-control border text-sm font-semibold leading-5 transition disabled:pointer-events-none disabled:opacity-40";
+    readonly buttonLarge: "ps-control-large ps-control-padding-large";
+    readonly buttonPrimary: "border-primary bg-primary text-[color:var(--ps-color-primary-contrast)] hover:border-primary-dark hover:bg-primary-dark";
+    readonly buttonQuiet: "border-white/15 bg-white/10 text-white hover:border-white/25 hover:bg-white/20";
+    readonly chip: "ps-focus-ring ps-control inline-flex min-w-0 items-center justify-center rounded-ps-control px-2 text-sm font-semibold transition";
+    readonly icon: "ps-focus-ring ps-control ps-control-square inline-flex shrink-0 items-center justify-center rounded-ps-control text-white transition disabled:pointer-events-none disabled:opacity-40";
+    readonly iconOff: "bg-black/45 backdrop-blur-md hover:bg-white/20";
+    readonly iconOn: "bg-white text-black hover:bg-white/90";
+    readonly pill: "pointer-events-none rounded-ps-pill bg-black/55 px-3.5 py-1.5 text-sm font-medium text-white backdrop-blur-md";
+    readonly tool: "ps-focus-ring flex min-h-14 min-w-16 flex-col items-center justify-center gap-1 rounded-ps-control px-2 text-xs font-medium text-white/80 transition hover:bg-white/10 hover:text-white disabled:pointer-events-none disabled:opacity-40";
+};

package/dist/constants/ps-scan-chrome-classes.js

@@ -0,0 +1,15 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.PsScanChromeClasses = void 0;
+exports.PsScanChromeClasses = {
+    button: 'ps-focus-ring ps-control ps-control-padding inline-flex max-w-full items-center justify-center gap-2 rounded-ps-control border text-sm font-semibold leading-5 transition disabled:pointer-events-none disabled:opacity-40',
+    buttonLarge: 'ps-control-large ps-control-padding-large',
+    buttonPrimary: 'border-primary bg-primary text-[color:var(--ps-color-primary-contrast)] hover:border-primary-dark hover:bg-primary-dark',
+    buttonQuiet: 'border-white/15 bg-white/10 text-white hover:border-white/25 hover:bg-white/20',
+    chip: 'ps-focus-ring ps-control inline-flex min-w-0 items-center justify-center rounded-ps-control px-2 text-sm font-semibold transition',
+    icon: 'ps-focus-ring ps-control ps-control-square inline-flex shrink-0 items-center justify-center rounded-ps-control text-white transition disabled:pointer-events-none disabled:opacity-40',
+    iconOff: 'bg-black/45 backdrop-blur-md hover:bg-white/20',
+    iconOn: 'bg-white text-black hover:bg-white/90',
+    pill: 'pointer-events-none rounded-ps-pill bg-black/55 px-3.5 py-1.5 text-sm font-medium text-white backdrop-blur-md',
+    tool: 'ps-focus-ring flex min-h-14 min-w-16 flex-col items-center justify-center gap-1 rounded-ps-control px-2 text-xs font-medium text-white/80 transition hover:bg-white/10 hover:text-white disabled:pointer-events-none disabled:opacity-40',
+};

package/dist/constants/ps-scan-config.d.ts

@@ -2,6 +2,8 @@ export declare const PsScanConfig: {
     readonly adaptiveRatio: 0.92;
     readonly adaptiveWindowDivisor: 16;
     readonly adaptiveWindowMin: 15;
+    readonly autoCaptureMs: 1000;
+    readonly cameraPermission: "camera";
     readonly capturedJpegQuality: 0.92;
     readonly cornerNudge: 0.005;
     readonly cornerNudgeLarge: 0.025;
@@ -11,6 +13,7 @@ export declare const PsScanConfig: {
     readonly defaultMaxDimension: 2000;
     readonly defaultMaxPages: 30;
     readonly detectDilations: 2;
+    readonly detectInset: 3;
     readonly detectMaxDimension: 320;
     readonly detectMinAreaRatio: 0.12;
     readonly detectMaxAreaRatio: 0.995;
@@ -18,14 +21,28 @@ export declare const PsScanConfig: {
     readonly detectMinHullFill: 0.85;
     readonly detectPercentile: 0.98;
     readonly detectRelativeStrength: 0.3;
+    readonly guideArm: 36;
+    readonly guideArmRatio: 0.18;
+    readonly guideAspect: 0.72;
+    readonly guideHeightRatio: 0.58;
+    readonly guideLift: 0.03;
+    readonly guideWidthRatio: 0.76;
     readonly hullCandidateLimit: 18;
     readonly levelHighPercentile: 0.99;
     readonly levelLowPercentile: 0.01;
+    readonly liveDetectIntervalMs: 160;
+    readonly liveDetectMaxDimension: 240;
+    readonly liveMissLimit: 2;
+    readonly liveRearmMovement: 0.08;
+    readonly liveSmoothing: 0.5;
+    readonly liveStillMovement: 0.02;
+    readonly loupeOffset: 72;
+    readonly loupeSize: 112;
+    readonly loupeZoom: 2.5;
     readonly minCornerGap: 0.02;
     readonly pdfDpi: 150;
     readonly pdfPointsPerInch: 72;
     readonly previewDebounceMs: 120;
     readonly previewMaxDimension: 1400;
-    readonly thumbnailHeight: 56;
     readonly torchConstraint: "torch";
 };

package/dist/constants/ps-scan-config.js

@@ -5,6 +5,8 @@ exports.PsScanConfig = {
     adaptiveRatio: 0.92,
     adaptiveWindowDivisor: 16,
     adaptiveWindowMin: 15,
+    autoCaptureMs: 1000,
+    cameraPermission: 'camera',
     capturedJpegQuality: 0.92,
     cornerNudge: 0.005,
     cornerNudgeLarge: 0.025,
@@ -14,6 +16,7 @@ exports.PsScanConfig = {
     defaultMaxDimension: 2000,
     defaultMaxPages: 30,
     detectDilations: 2,
+    detectInset: 3,
     detectMaxDimension: 320,
     detectMinAreaRatio: 0.12,
     detectMaxAreaRatio: 0.995,
@@ -21,14 +24,28 @@ exports.PsScanConfig = {
     detectMinHullFill: 0.85,
     detectPercentile: 0.98,
     detectRelativeStrength: 0.3,
+    guideArm: 36,
+    guideArmRatio: 0.18,
+    guideAspect: 0.72,
+    guideHeightRatio: 0.58,
+    guideLift: 0.03,
+    guideWidthRatio: 0.76,
     hullCandidateLimit: 18,
     levelHighPercentile: 0.99,
     levelLowPercentile: 0.01,
+    liveDetectIntervalMs: 160,
+    liveDetectMaxDimension: 240,
+    liveMissLimit: 2,
+    liveRearmMovement: 0.08,
+    liveSmoothing: 0.5,
+    liveStillMovement: 0.02,
+    loupeOffset: 72,
+    loupeSize: 112,
+    loupeZoom: 2.5,
     minCornerGap: 0.02,
     pdfDpi: 150,
     pdfPointsPerInch: 72,
     previewDebounceMs: 120,
     previewMaxDimension: 1400,
-    thumbnailHeight: 56,
     torchConstraint: 'torch',
 };

package/dist/constants/ps-scan-platform.d.ts

@@ -0,0 +1,6 @@
+export declare const PsScanPlatform: {
+    readonly Android: "android";
+    readonly Desktop: "desktop";
+    readonly Ios: "ios";
+};
+export type PsScanPlatform = (typeof PsScanPlatform)[keyof typeof PsScanPlatform];

package/dist/constants/ps-scan-platform.js

@@ -0,0 +1,8 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.PsScanPlatform = void 0;
+exports.PsScanPlatform = {
+    Android: 'android',
+    Desktop: 'desktop',
+    Ios: 'ios',
+};

package/dist/esm/components/ps-document-scanner-sheet.js

@@ -1,13 +1,14 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 import { useCallback, useRef, useState } from 'react';
 import { PsLayer, usePsLayerZIndex, usePsRestoreFocus, usePsScrollLock, usePsViewport, } from '@pallasoft/ps-core-components';
 import { PallasoftViewportTier, PallasoftZIndex } from '@pallasoft/ps-design-system';
-import { PsIcon, PsIconKey } from '@pallasoft/ps-icons';
-import { PsModal } from '@pallasoft/ps-popovers';
+import { PsIconKey } from '@pallasoft/ps-icons';
 import { createPortal } from 'react-dom';
+import { PsScanCameraStatus } from '../constants/ps-scan-camera-status';
 import { PsScanStep } from '../constants/ps-scan-step';
 import { usePsFocusTrap } from '../hooks/use-ps-focus-trap';
 import { usePsScanCamera } from '../hooks/use-ps-scan-camera';
+import { usePsScanLiveDetection } from '../hooks/use-ps-scan-live-detection';
 import { usePsScanPages } from '../hooks/use-ps-scan-pages';
 import { usePsScanPreviews } from '../hooks/use-ps-scan-previews';
 import { PsScanOutputService } from '../services/ps-scan-output-service';
@@ -16,27 +17,37 @@ import { PsScanTemplateService } from '../services/ps-scan-template-service';
 import { PsScanCameraView } from './ps-scan-camera-view';
 import { PsScanCropEditor } from './ps-scan-crop-editor';
 import { PsScanIconButton } from './ps-scan-icon-button';
+import { PsScanPermissionView } from './ps-scan-permission-view';
 import { PsScanReview } from './ps-scan-review';
-export const PsDocumentScannerSheet = ({ fileName, jpegQuality, labels, maxDimension, maxPages, onClose, onComplete, outputFormat, }) => {
+export const PsDocumentScannerSheet = ({ fileName, isAutoCapture, jpegQuality, labels, maxDimension, maxPages, onClose, onComplete, outputFormat, }) => {
     const tier = usePsViewport();
     const zIndex = usePsLayerZIndex(PallasoftZIndex.Modal);
     const content = useRef(null);
     const { add, move, pages, remove, replace, setCorners, update } = usePsScanPages();
     const [step, setStep] = useState(PsScanStep.Camera);
+    const [cropReturn, setCropReturn] = useState(PsScanStep.Camera);
     const [activeId, setActiveId] = useState('');
     const [retakeId, setRetakeId] = useState('');
     const [announcement, setAnnouncement] = useState('');
     const [error, setError] = useState('');
     const [isBusy, setIsBusy] = useState(false);
+    const [isCapturing, setIsCapturing] = useState(false);
+    const [isAuto, setIsAuto] = useState(isAutoCapture);
+    const [flashKey, setFlashKey] = useState(0);
     const camera = usePsScanCamera(step === PsScanStep.Camera);
+    const isReady = camera.status === PsScanCameraStatus.Ready;
+    const isFull = pages.length >= maxPages;
     const previews = usePsScanPreviews(pages);
     const page = pages.find((item) => item.id === activeId);
+    const lastPage = pages[pages.length - 1];
     const isDesktop = tier === PallasoftViewportTier.Desktop;
-    usePsScrollLock(!isDesktop);
+    const isCameraStep = step === PsScanStep.Camera;
+    const showsCamera = isReady || camera.status === PsScanCameraStatus.Starting;
+    usePsScrollLock(true);
     usePsRestoreFocus(true);
     usePsFocusTrap(content, true, onClose);
     const edgeMessage = (isDetected) => isDetected ? labels.edgesFound : labels.edgesNotFound;
-    const addFiles = async (files) => {
+    const addFiles = async (files, after) => {
         setError('');
         try {
             const images = files.filter((file) => file.type === '' || file.type.startsWith('image/'));
@@ -54,21 +65,39 @@ export const PsDocumentScannerSheet = ({ fileName, jpegQuality, labels, maxDimen
             const added = await add(images.slice(0, room));
             if (added.length === 0)
                 return;
-            setActiveId(added[0].page.id);
-            setStep(added.length === 1 ? PsScanStep.Crop : PsScanStep.Review);
-            setAnnouncement(added.length === 1
-                ? edgeMessage(added[0].isDetected)
-                : PsScanTemplateService.fill(labels.pageAdded, { position: pages.length + added.length }));
+            const position = pages.length + added.length;
+            setActiveId(added[added.length - 1].page.id);
+            setAnnouncement(PsScanTemplateService.fill(labels.pageAdded, { position }));
+            if (after === null)
+                return;
+            if (added.length === 1) {
+                setCropReturn(after);
+                setStep(PsScanStep.Crop);
+                setAnnouncement(edgeMessage(added[0].isDetected));
+            }
+            else
+                setStep(PsScanStep.Review);
         }
         catch {
             setError(labels.processFailed);
         }
     };
-    const capture = async () => {
-        const blob = await camera.capture();
-        if (blob !== null)
-            await addFiles([blob]);
+    const capture = async (isAutomatic) => {
+        if (isCapturing || isFull)
+            return;
+        setIsCapturing(true);
+        try {
+            const blob = await camera.capture();
+            if (blob === null)
+                return;
+            setFlashKey((current) => current + 1);
+            await addFiles([blob], isAutomatic && retakeId === '' ? null : PsScanStep.Camera);
+        }
+        finally {
+            setIsCapturing(false);
+        }
     };
+    const detection = usePsScanLiveDetection(camera.videoRef, isCameraStep && isReady, isAuto, () => capture(true));
     const autoDetect = async () => {
         if (page === undefined)
             return;
@@ -76,12 +105,32 @@ export const PsDocumentScannerSheet = ({ fileName, jpegQuality, labels, maxDimen
         setCorners(page.id, prepared.corners);
         setAnnouncement(edgeMessage(prepared.isDetected));
     };
+    const keep = () => setStep(cropReturn === PsScanStep.Camera && !isFull ? PsScanStep.Camera : PsScanStep.Review);
     const retake = () => {
         if (page === undefined)
             return;
+        if (step === PsScanStep.Review)
+            setCropReturn(PsScanStep.Review);
         setRetakeId(page.id);
         setStep(PsScanStep.Camera);
     };
+    const openCamera = () => {
+        setRetakeId('');
+        setCropReturn(PsScanStep.Camera);
+        setStep(PsScanStep.Camera);
+    };
+    const openReview = () => {
+        if (pages.length === 0)
+            return;
+        setRetakeId('');
+        if (page === undefined)
+            setActiveId(lastPage.id);
+        setStep(PsScanStep.Review);
+    };
+    const editCrop = () => {
+        setCropReturn(PsScanStep.Review);
+        setStep(PsScanStep.Crop);
+    };
     const deletePage = () => {
         if (page === undefined)
             return;
@@ -91,7 +140,7 @@ export const PsDocumentScannerSheet = ({ fileName, jpegQuality, labels, maxDimen
         setAnnouncement(labels.pageDeleted);
         if (rest.length === 0) {
             setActiveId('');
-            setStep(PsScanStep.Camera);
+            openCamera();
         }
         else
             setActiveId(rest[Math.min(index, rest.length - 1)].id);
@@ -122,13 +171,12 @@ export const PsDocumentScannerSheet = ({ fileName, jpegQuality, labels, maxDimen
             position: to + 1,
         }));
     }, [move, pages.length, labels]);
-    const body = (_jsxs("div", { className: 'relative h-full min-h-0 bg-surface text-ink', ref: content, children: [_jsx("p", { "aria-live": 'polite', className: 'sr-only', role: 'status', children: announcement }), step === PsScanStep.Camera ? (_jsx(PsScanCameraView, { canGoBack: pages.length > 0, canTorch: camera.canTorch, isTorchOn: camera.isTorchOn, labels: labels, onBack: () => {
-                    setRetakeId('');
-                    setStep(PsScanStep.Review);
-                }, onCapture: capture, onFiles: addFiles, onToggleTorch: camera.toggleTorch, status: camera.status, videoRef: camera.videoRef })) : null, step === PsScanStep.Crop && page !== undefined ? (_jsx(PsScanCropEditor, { labels: labels, onApply: () => setStep(PsScanStep.Review), onAutoDetect: autoDetect, onChange: (corners) => setCorners(page.id, corners), onRetake: retake, page: page })) : null, step === PsScanStep.Review && page !== undefined ? (_jsx(PsScanReview, { canAddPage: pages.length < maxPages, error: error, isBusy: isBusy, labels: labels, onAddPage: () => setStep(PsScanStep.Camera), onDelete: deletePage, onEditCrop: () => setStep(PsScanStep.Crop), onFilter: (filter) => update(page.id, { filter }), onFinish: finish, onMove: moveTo, onRetake: retake, onRotate: () => update(page.id, { rotation: (page.rotation + 90) % 360 }), onSelect: setActiveId, page: page, pages: pages, previews: previews })) : null, step === PsScanStep.Camera && error !== '' ? (_jsx("p", { className: 'absolute inset-x-4 top-3 rounded-ps-control bg-danger px-3 py-2 text-sm text-white', role: 'alert', children: error })) : null] }));
-    if (isDesktop)
-        return (_jsx(PsModal, { isOpen: true, onClose: onClose, size: 'xl', title: labels.title, children: _jsx("div", { className: '-m-4 h-[min(70dvh,38rem)] overflow-hidden sm:-m-5', children: body }) }));
+    const fromLibrary = (files) => addFiles(files, PsScanStep.Review);
     if (typeof document === 'undefined')
         return null;
-    return createPortal(_jsx("div", { "aria-label": labels.title, "aria-modal": 'true', className: 'fixed inset-0 flex flex-col bg-surface text-ink animate-ps-fade-in', role: 'dialog', style: { zIndex }, children: _jsxs(PsLayer, { zIndex: zIndex, children: [_jsxs("header", { className: 'flex shrink-0 items-center justify-between gap-3 border-b border-line px-4 pt-[max(0.5rem,env(safe-area-inset-top))] pb-2', children: [_jsx("h2", { className: 'truncate text-base font-semibold', children: labels.title }), _jsx(PsScanIconButton, { label: labels.close, onClick: onClose, children: _jsx(PsIcon, { "aria-hidden": 'true', className: 'size-5', iconKey: PsIconKey.Close }) })] }), _jsx("div", { className: 'min-h-0 flex-1', children: body })] }) }), document.body);
+    return createPortal(_jsx("div", { "aria-label": labels.title, "aria-modal": 'true', className: isDesktop
+            ? 'fixed inset-0 flex items-center justify-center bg-black/70 p-6 backdrop-blur-sm animate-ps-fade-in'
+            : 'fixed inset-0 bg-black animate-ps-fade-in', role: 'dialog', style: { zIndex }, children: _jsx(PsLayer, { zIndex: zIndex, children: _jsxs("div", { className: isDesktop
+                    ? 'relative h-[min(52rem,calc(100dvh-3rem))] w-[min(76rem,calc(100vw-3rem))] overflow-hidden rounded-2xl bg-black text-white shadow-2xl ring-1 ring-white/10 animate-ps-scale-in'
+                    : 'relative h-full overflow-hidden bg-black text-white', ref: content, children: [_jsx("p", { "aria-live": 'polite', className: 'sr-only', role: 'status', children: announcement }), isCameraStep && showsCamera ? (_jsx(PsScanCameraView, { canTorch: camera.canTorch, detection: detection, flashKey: flashKey, isAuto: isAuto, isBusy: isCapturing, isFull: isFull, isMultiple: maxPages > 1, isReady: isReady, isTorchOn: camera.isTorchOn, labels: labels, lastPreview: lastPage === undefined ? undefined : previews[lastPage.id], onCapture: () => capture(false), onClose: onClose, onDone: openReview, onFiles: fromLibrary, onToggleAuto: () => setIsAuto((current) => !current), onToggleTorch: camera.toggleTorch, pageCount: pages.length, videoRef: camera.videoRef, videoTarget: camera.attachVideo })) : null, isCameraStep && !showsCamera ? (_jsxs(_Fragment, { children: [_jsx(PsScanPermissionView, { isMultiple: maxPages > 1, labels: labels, onAllow: camera.allow, onFiles: fromLibrary, status: camera.status }), _jsx("div", { className: 'absolute left-4 top-[max(1rem,env(safe-area-inset-top))] flex gap-2', children: _jsx(PsScanIconButton, { iconKey: PsIconKey.Close, label: labels.close, onClick: onClose }) }), pages.length > 0 ? (_jsx("div", { className: 'absolute right-4 top-[max(1rem,env(safe-area-inset-top))]', children: _jsx(PsScanIconButton, { iconKey: PsIconKey.Check, label: PsScanTemplateService.fill(labels.viewPages, { count: pages.length }), onClick: openReview }) })) : null] })) : null, step === PsScanStep.Crop && page !== undefined ? (_jsx(PsScanCropEditor, { labels: labels, onAutoDetect: autoDetect, onChange: (corners) => setCorners(page.id, corners), onKeep: keep, onRetake: retake, page: page })) : null, step === PsScanStep.Review && page !== undefined ? (_jsx(PsScanReview, { canAddPage: !isFull, error: error, isBusy: isBusy, labels: labels, onAddPage: openCamera, onClose: onClose, onDelete: deletePage, onEditCrop: editCrop, onFilter: (filter) => update(page.id, { filter }), onFinish: finish, onMove: moveTo, onRetake: retake, onRotate: () => update(page.id, { rotation: (page.rotation + 90) % 360 }), onSelect: setActiveId, page: page, pages: pages, previews: previews })) : null, isCameraStep && error !== '' ? (_jsx("p", { className: 'absolute inset-x-4 bottom-36 mx-auto max-w-sm rounded-ps-control bg-danger px-3 py-2 text-center text-sm text-white', role: 'alert', children: error })) : null] }) }) }), document.body);
 };

package/dist/esm/components/ps-document-scanner.js

@@ -5,9 +5,9 @@ import { PsDocumentScannerLabels } from '../constants/ps-document-scanner-labels
 import { PsScanConfig } from '../constants/ps-scan-config';
 import { PsScanOutputFormat } from '../constants/ps-scan-output-format';
 import { PsDocumentScannerLoader } from './ps-document-scanner-loader';
-export const PsDocumentScanner = ({ fileName = PsScanConfig.defaultFileName, isOpen, jpegQuality = PsScanConfig.defaultJpegQuality, labels, maxDimension = PsScanConfig.defaultMaxDimension, maxPages = PsScanConfig.defaultMaxPages, onClose, onComplete, outputFormat = PsScanOutputFormat.Pdf, }) => {
+export const PsDocumentScanner = ({ fileName = PsScanConfig.defaultFileName, isAutoCapture = false, isOpen, jpegQuality = PsScanConfig.defaultJpegQuality, labels, maxDimension = PsScanConfig.defaultMaxDimension, maxPages = PsScanConfig.defaultMaxPages, onClose, onComplete, outputFormat = PsScanOutputFormat.Pdf, }) => {
     const isHydrated = usePsHydrated();
     if (!isOpen || !isHydrated)
         return null;
-    return (_jsx(Suspense, { fallback: null, children: _jsx(PsDocumentScannerLoader, { fileName: fileName, jpegQuality: jpegQuality, labels: { ...PsDocumentScannerLabels, ...labels }, maxDimension: maxDimension, maxPages: maxPages, onClose: onClose, onComplete: onComplete, outputFormat: outputFormat }) }));
+    return (_jsx(Suspense, { fallback: null, children: _jsx(PsDocumentScannerLoader, { fileName: fileName, isAutoCapture: isAutoCapture, jpegQuality: jpegQuality, labels: { ...PsDocumentScannerLabels, ...labels }, maxDimension: maxDimension, maxPages: maxPages, onClose: onClose, onComplete: onComplete, outputFormat: outputFormat }) }));
 };

package/dist/esm/components/ps-file-picker-actions.js

@@ -0,0 +1,17 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { PsButton } from '@pallasoft/ps-core-components';
+import { PallasoftClassNameService } from '@pallasoft/ps-design-system';
+import { PsIcon, PsIconKey } from '@pallasoft/ps-icons';
+export const PsFilePickerActions = ({ chooseLabel, className, disabled, isTouch, onChoose, onScan, scanLabel, }) => {
+    const hasScan = scanLabel !== undefined;
+    const choose = (_jsx(PsButton, { className: isTouch ? 'w-full' : '', disabled: disabled, leadingIcon: _jsx(PsIcon, { "aria-hidden": 'true', className: 'size-4', iconKey: PsIconKey.Upload }), onClick: (event) => {
+            event.stopPropagation();
+            onChoose();
+        }, size: isTouch ? 'large' : 'default', variant: hasScan && isTouch ? 'surface' : hasScan || isTouch ? 'primary' : 'surface', children: chooseLabel }));
+    return (_jsx("div", { className: PallasoftClassNameService.merge(isTouch
+            ? 'w-full max-w-xs flex-col gap-2'
+            : 'flex-row flex-wrap items-center justify-center gap-2', className), children: hasScan ? (_jsxs(_Fragment, { children: [isTouch ? null : choose, _jsx(PsButton, { className: isTouch ? 'w-full' : '', disabled: disabled, leadingIcon: _jsx(PsIcon, { "aria-hidden": 'true', className: 'size-4', iconKey: PsIconKey.Camera }), onClick: (event) => {
+                        event.stopPropagation();
+                        onScan();
+                    }, size: isTouch ? 'large' : 'default', variant: isTouch ? 'primary' : 'surface', children: scanLabel }), isTouch ? choose : null] })) : (choose) }));
+};

package/dist/esm/components/ps-file-picker.js

@@ -1,15 +1,26 @@
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
-import { useMemo, useState } from 'react';
+import { useMemo, useRef, useState } from 'react';
 import { PallasoftClassNameService } from '@pallasoft/ps-design-system';
 import { PsIcon, PsIconKey } from '@pallasoft/ps-icons';
 import { PsFilePickerLabels } from '../constants/ps-file-picker-labels';
+import { PsScanConfig } from '../constants/ps-scan-config';
+import { PsUploadLabels } from '../constants/ps-upload-labels';
 import { PsFileSelectionService } from '../services/ps-file-selection-service';
-export const PsFilePicker = ({ accept, acceptLabel, className, disabled = false, dropLabel, isLoading = false, labels, maxSizeBytes, maxSizeLabel, multiple = false, onError, onFileLoad, onFilesSelect, touchLabel, }) => {
+import { PsDocumentScanner } from './ps-document-scanner';
+import { PsFilePickerActions } from './ps-file-picker-actions';
+import { PsUploadRow } from './ps-upload-row';
+export const PsFilePicker = ({ accept, acceptLabel, className, disabled = false, dropLabel, isLoading = false, labels, maxSizeBytes, maxSizeLabel, multiple = false, onError, onFileLoad, onFilesSelect, queue, scan, touchLabel, uploadLabels, }) => {
     const [isDragging, setIsDragging] = useState(false);
+    const [scanName, setScanName] = useState(null);
+    const input = useRef(null);
     const acceptAttr = useMemo(() => accept.join(','), [accept]);
     const text = { ...PsFilePickerLabels, ...labels };
+    const rowLabels = { ...PsUploadLabels, ...uploadLabels };
+    const details = [acceptLabel, maxSizeLabel].filter((value) => value !== undefined && value !== '');
+    const chooseLabel = multiple ? text.choose : text.chooseOne;
+    const scanLabel = scan === undefined ? undefined : text.scan;
     if (isLoading)
-        return (_jsx("span", { "aria-busy": 'true', className: PallasoftClassNameService.merge('ps-skeleton block min-h-32 w-full rounded-ps-panel', className), role: 'status' }));
+        return (_jsx("span", { "aria-busy": 'true', className: PallasoftClassNameService.merge('ps-skeleton block min-h-48 w-full rounded-ps-control', className), role: 'status' }));
     const select = (list) => {
         if (list === null || disabled)
             return;
@@ -28,6 +39,15 @@ export const PsFilePicker = ({ accept, acceptLabel, className, disabled = false,
         else
             onFileLoad?.(accepted[0]);
     };
+    const browse = () => {
+        if (!disabled)
+            input.current?.click();
+    };
+    const openScan = () => {
+        if (disabled || scan === undefined)
+            return;
+        setScanName(scan.getFileName === undefined ? PsScanConfig.defaultFileName : scan.getFileName());
+    };
     const onChange = (event) => {
         select(event.target.files);
         event.target.value = '';
@@ -37,8 +57,12 @@ export const PsFilePicker = ({ accept, acceptLabel, className, disabled = false,
         if (!disabled)
             setIsDragging(isOver);
     };
-    return (_jsxs("div", { className: PallasoftClassNameService.merge('relative flex h-48 w-full flex-col items-center justify-center rounded-ps-control border-2 border-dashed border-line p-4 transition-all hover:border-primary/50 hover:bg-primary/5 sm:h-64', isDragging ? 'border-primary bg-primary/10' : '', disabled ? 'pointer-events-none opacity-60' : '', className), onDragEnter: (event) => onDrag(event, true), onDragLeave: (event) => onDrag(event, false), onDragOver: (event) => onDrag(event, true), onDrop: (event) => {
-            onDrag(event, false);
-            select(event.dataTransfer.files);
-        }, children: [_jsxs("div", { className: 'pointer-events-none flex flex-col items-center gap-3 text-center', children: [_jsx(PsIcon, { className: 'h-8 w-8 text-primary', iconKey: PsIconKey.Upload }), _jsxs("div", { children: [_jsx("p", { className: 'text-body-2 font-medium text-ink sm:text-body-1', children: isDragging ? (text.dropActive) : (_jsxs(_Fragment, { children: [_jsx("span", { className: touchLabel === undefined ? '' : '[@media(pointer:coarse)]:hidden', children: dropLabel }), touchLabel === undefined ? null : (_jsx("span", { className: 'hidden [@media(pointer:coarse)]:inline', children: touchLabel }))] })) }), _jsxs("p", { className: 'mt-1 text-body-3 text-ink/60 sm:text-body-2', children: [_jsx("span", { className: '[@media(pointer:coarse)]:hidden', children: text.browse }), _jsx("span", { className: 'hidden [@media(pointer:coarse)]:inline', children: text.browseTouch })] }), maxSizeLabel ? _jsx("p", { className: 'mt-3 text-body-3 text-ink/60', children: maxSizeLabel }) : null, _jsxs("p", { className: 'text-body-3 text-ink/60', children: [text.formats, " ", acceptLabel] })] })] }), _jsx("input", { accept: acceptAttr, "aria-disabled": disabled, "aria-label": dropLabel, className: 'absolute inset-0 h-full w-full cursor-pointer opacity-0', disabled: disabled, multiple: multiple, onChange: onChange, type: 'file' })] }));
+    return (_jsxs("div", { className: PallasoftClassNameService.merge('flex w-full flex-col gap-3', className), children: [_jsxs("div", { "aria-disabled": disabled || undefined, className: PallasoftClassNameService.merge('flex w-full cursor-pointer flex-col items-center gap-5 rounded-ps-control border-2 border-dashed px-5 py-8 text-center transition-colors duration-200 sm:px-8', isDragging
+                    ? 'border-primary bg-primary/5'
+                    : 'border-line bg-surface/40 hover:border-primary/40 hover:bg-primary/[0.03]', disabled ? 'pointer-events-none opacity-60' : ''), onClick: browse, onDragEnter: (event) => onDrag(event, true), onDragLeave: (event) => onDrag(event, false), onDragOver: (event) => onDrag(event, true), onDrop: (event) => {
+                    onDrag(event, false);
+                    select(event.dataTransfer.files);
+                }, children: [_jsx("span", { "aria-hidden": 'true', className: PallasoftClassNameService.merge('flex size-12 items-center justify-center rounded-full transition-colors duration-200', isDragging
+                            ? 'bg-primary text-[color:var(--ps-color-primary-contrast)]'
+                            : 'bg-primary-soft text-primary'), children: _jsx(PsIcon, { className: 'size-6', iconKey: PsIconKey.Upload }) }), _jsxs("div", { className: 'flex flex-col gap-1', children: [_jsx("p", { className: 'text-base font-semibold text-ink', children: isDragging ? (text.dropActive) : (_jsxs(_Fragment, { children: [_jsx("span", { className: touchLabel === undefined ? '' : '[@media(pointer:coarse)]:hidden', children: dropLabel }), touchLabel === undefined ? null : (_jsx("span", { className: 'hidden [@media(pointer:coarse)]:inline', children: touchLabel }))] })) }), _jsx("p", { className: 'text-sm text-ink/60 [@media(pointer:coarse)]:hidden', children: multiple ? text.dragHint : text.dragHintOne })] }), _jsx(PsFilePickerActions, { chooseLabel: chooseLabel, className: 'flex [@media(pointer:coarse)]:hidden', disabled: disabled, isTouch: false, onChoose: browse, onScan: openScan, scanLabel: scanLabel }), _jsx(PsFilePickerActions, { chooseLabel: chooseLabel, className: 'hidden [@media(pointer:coarse)]:flex', disabled: disabled, isTouch: true, onChoose: browse, onScan: openScan, scanLabel: scanLabel }), details.length > 0 ? _jsx("p", { className: 'text-xs text-ink/50', children: details.join(' · ') }) : null, _jsx("input", { accept: acceptAttr, "aria-hidden": 'true', className: 'sr-only', disabled: disabled, multiple: multiple, onChange: onChange, onClick: (event) => event.stopPropagation(), ref: input, tabIndex: -1, type: 'file' })] }), queue === undefined || queue.items.length === 0 ? null : (_jsx("ul", { "aria-label": rowLabels.title, className: 'flex flex-col gap-2', children: queue.items.map((item) => (_jsx(PsUploadRow, { item: item, labels: rowLabels, onCancel: () => queue.cancel(item.id), onRemove: () => queue.remove(item.id), onRetry: () => queue.retry(item.id) }, item.id))) })), scan === undefined ? null : (_jsx(PsDocumentScanner, { ...scan, fileName: scanName === null ? PsScanConfig.defaultFileName : scanName, isOpen: scanName !== null, onClose: () => setScanName(null), onComplete: select }))] }));
 };

package/dist/esm/components/ps-scan-button.js

@@ -0,0 +1,5 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { PsSpinner } from '@pallasoft/ps-core-components';
+import { PallasoftClassNameService } from '@pallasoft/ps-design-system';
+import { PsScanChromeClasses } from '../constants/ps-scan-chrome-classes';
+export const PsScanButton = ({ children, className, disabled = false, isLarge = false, isLoading = false, isPrimary = false, leadingIcon, loadingLabel, onClick, }) => (_jsxs("button", { "aria-busy": isLoading || undefined, className: PallasoftClassNameService.merge(PsScanChromeClasses.button, isLarge ? PsScanChromeClasses.buttonLarge : '', isPrimary ? PsScanChromeClasses.buttonPrimary : PsScanChromeClasses.buttonQuiet, 'relative', className), disabled: disabled || isLoading, onClick: onClick, type: 'button', children: [isLoading ? (_jsx(PsSpinner, { className: 'absolute inset-0 m-auto', color: 'current', label: loadingLabel === undefined ? '' : loadingLabel, size: 'small' })) : null, _jsxs("span", { "aria-hidden": isLoading || undefined, className: `inline-flex min-w-0 items-center gap-2 ${isLoading ? 'invisible' : ''}`, children: [leadingIcon === undefined ? null : _jsx("span", { className: 'shrink-0', children: leadingIcon }), _jsx("span", { className: 'truncate', children: children })] })] }));

package/dist/esm/components/ps-scan-camera-view.js

@@ -1,23 +1,30 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useRef } from 'react';
-import { PsButton, PsSpinner } from '@pallasoft/ps-core-components';
-import { PsIcon, PsIconKey } from '@pallasoft/ps-icons';
-import { PsScanCameraStatus } from '../constants/ps-scan-camera-status';
+import { useState } from 'react';
+import { PsSpinner, usePsElementSize } from '@pallasoft/ps-core-components';
+import { PallasoftClassNameService } from '@pallasoft/ps-design-system';
+import { PsIconKey } from '@pallasoft/ps-icons';
+import { PsScanChromeClasses } from '../constants/ps-scan-chrome-classes';
+import { PsScanTemplateService } from '../services/ps-scan-template-service';
+import { PsScanButton } from './ps-scan-button';
 import { PsScanIconButton } from './ps-scan-icon-button';
-export const PsScanCameraView = ({ canGoBack, canTorch, isTorchOn, labels, onBack, onCapture, onFiles, onToggleTorch, status, videoRef, }) => {
-    const captureInput = useRef(null);
-    const libraryInput = useRef(null);
-    const isReady = status === PsScanCameraStatus.Ready;
-    const message = status === PsScanCameraStatus.Denied
-        ? labels.cameraDenied
-        : status === PsScanCameraStatus.Unavailable
-            ? labels.cameraUnavailable
-            : '';
-    const onChange = (event) => {
-        const files = Array.from(event.target.files === null ? [] : event.target.files);
-        event.target.value = '';
-        if (files.length > 0)
-            onFiles(files);
+import { PsScanPageStack } from './ps-scan-page-stack';
+import { PsScanPhotoButton } from './ps-scan-photo-button';
+import { PsScanShutter } from './ps-scan-shutter';
+import { PsScanViewfinderOverlay } from './ps-scan-viewfinder-overlay';
+export const PsScanCameraView = ({ canTorch, detection, flashKey, isAuto, isBusy, isFull, isMultiple, isReady, isTorchOn, labels, lastPreview, onCapture, onClose, onDone, onFiles, onToggleAuto, onToggleTorch, pageCount, videoRef, videoTarget, }) => {
+    const [areaRef, area] = usePsElementSize();
+    const [video, setVideo] = useState({ height: 0, width: 0 });
+    const hint = isFull
+        ? labels.maxPages
+        : detection.quad === null
+            ? labels.hintFind
+            : isAuto
+                ? labels.hintHold
+                : labels.hintFound;
+    const measure = () => {
+        const element = videoRef.current;
+        if (element !== null)
+            setVideo({ height: element.videoHeight, width: element.videoWidth });
     };
-    return (_jsxs("div", { className: 'flex h-full min-h-0 flex-col bg-slate-950 text-white', children: [_jsxs("div", { className: 'relative min-h-0 flex-1', children: [_jsx("video", { "aria-label": labels.title, autoPlay: true, className: `size-full object-contain ${isReady ? '' : 'invisible'}`, muted: true, playsInline: true, ref: videoRef }), status === PsScanCameraStatus.Starting ? (_jsxs("div", { className: 'absolute inset-0 flex flex-col items-center justify-center gap-3 text-sm text-white/80', role: 'status', children: [_jsx(PsSpinner, { color: 'current', label: labels.cameraStarting, size: 'small' }), _jsx("span", { children: labels.cameraStarting })] })) : null, message === '' ? null : (_jsx("div", { className: 'absolute inset-0 flex items-center justify-center p-6 text-center text-sm text-white/85', role: 'status', children: _jsx("p", { className: 'max-w-sm', children: message }) }))] }), _jsxs("div", { className: 'flex shrink-0 flex-wrap items-center justify-center gap-3 px-4 pt-3 pb-[max(0.75rem,env(safe-area-inset-bottom))]', children: [canGoBack ? (_jsx(PsButton, { onClick: onBack, variant: 'surface', children: labels.backToPages })) : null, _jsx(PsButton, { leadingIcon: _jsx(PsIcon, { "aria-hidden": 'true', className: 'size-4', iconKey: PsIconKey.Image }), onClick: () => libraryInput.current?.click(), variant: 'surface', children: labels.choosePhotos }), isReady ? (_jsx("button", { "aria-label": labels.capture, className: 'ps-focus-ring flex size-[4.5rem] shrink-0 items-center justify-center rounded-full border-4 border-white bg-white/20 transition active:scale-95', onClick: onCapture, title: labels.capture, type: 'button', children: _jsx("span", { className: 'size-12 rounded-full bg-white' }) })) : (_jsx(PsButton, { onClick: () => captureInput.current?.click(), variant: 'primary', children: labels.takePhoto })), canTorch && isReady ? (_jsx(PsScanIconButton, { isPressed: isTorchOn, label: isTorchOn ? labels.torchOff : labels.torchOn, onClick: onToggleTorch, children: _jsx(PsIcon, { "aria-hidden": 'true', className: 'size-5', iconKey: PsIconKey.Spark }) })) : null] }), _jsx("input", { accept: 'image/*', capture: 'environment', className: 'sr-only', onChange: onChange, ref: captureInput, tabIndex: -1, type: 'file' }), _jsx("input", { accept: 'image/*', className: 'sr-only', multiple: true, onChange: onChange, ref: libraryInput, tabIndex: -1, type: 'file' })] }));
+    return (_jsxs("div", { className: 'relative h-full min-h-0 overflow-hidden bg-black text-white', children: [_jsxs("div", { className: 'absolute inset-0', ref: areaRef, children: [_jsx("video", { "aria-hidden": 'true', autoPlay: true, className: PallasoftClassNameService.merge('size-full object-cover transition-opacity duration-300', isReady ? 'opacity-100' : 'opacity-0'), muted: true, onLoadedMetadata: measure, onResize: measure, playsInline: true, ref: videoTarget }), isReady ? (_jsx(PsScanViewfinderOverlay, { area: area, quad: detection.quad, video: video })) : null] }), isReady ? null : (_jsxs("div", { className: 'absolute inset-0 flex flex-col items-center justify-center gap-3 text-sm text-white/75', role: 'status', children: [_jsx(PsSpinner, { color: 'current', label: labels.cameraStarting, size: 'small' }), _jsx("span", { children: labels.cameraStarting })] })), flashKey > 0 ? (_jsx("div", { "aria-hidden": 'true', className: 'pointer-events-none absolute inset-0 bg-white animate-ps-fade-out' }, flashKey)) : null, _jsxs("div", { className: 'absolute inset-x-0 top-0 flex items-start justify-between gap-3 bg-gradient-to-b from-black/60 to-transparent px-4 pb-10 pt-[max(1rem,env(safe-area-inset-top))]', children: [_jsx(PsScanIconButton, { iconKey: PsIconKey.Close, label: labels.close, onClick: onClose }), _jsxs("div", { className: 'flex items-center gap-2', children: [canTorch && isReady ? (_jsx(PsScanIconButton, { iconKey: PsIconKey.Flash, isPressed: isTorchOn, label: isTorchOn ? labels.torchOff : labels.torchOn, onClick: onToggleTorch })) : null, _jsx("button", { "aria-label": labels.autoCapture, "aria-pressed": isAuto, className: PallasoftClassNameService.merge(PsScanChromeClasses.button, 'border-transparent', isAuto ? PsScanChromeClasses.iconOn : PsScanChromeClasses.iconOff), onClick: onToggleAuto, title: labels.autoCapture, type: 'button', children: labels.auto })] })] }), isReady ? (_jsx("div", { className: 'absolute inset-x-0 top-[calc(max(1rem,env(safe-area-inset-top))+3.75rem)] flex justify-center px-4', children: _jsx("p", { "aria-live": 'polite', className: PsScanChromeClasses.pill, children: hint }) })) : null, _jsxs("div", { className: 'absolute inset-x-0 bottom-0 grid grid-cols-[1fr_auto_1fr] items-center gap-4 bg-gradient-to-t from-black/80 to-transparent px-5 pb-[max(1.5rem,env(safe-area-inset-bottom))] pt-12', children: [_jsx("div", { className: 'flex justify-start', children: pageCount > 0 ? (_jsx(PsScanPageStack, { count: pageCount, label: PsScanTemplateService.fill(labels.viewPages, { count: pageCount }), onOpen: onDone, preview: lastPreview })) : (_jsx(PsScanPhotoButton, { isIconOnly: true, isMultiple: isMultiple, label: labels.choosePhotos, onFiles: onFiles })) }), _jsx(PsScanShutter, { disabled: !isReady || isFull || isBusy, label: labels.capture, onCapture: onCapture, progress: detection.progress }), _jsx("div", { className: 'flex justify-end', children: pageCount > 0 ? (_jsx(PsScanButton, { isPrimary: true, onClick: onDone, children: labels.done })) : null })] })] }));
 };