@pallasoft/ps-file-components 2.0.1 → 2.2.0

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

@@ -5,25 +5,31 @@ import { PallasoftViewportTier, PallasoftZIndex } from '@pallasoft/ps-design-sys
 import { PsIconKey } from '@pallasoft/ps-icons';
 import { createPortal } from 'react-dom';
 import { PsScanCameraStatus } from '../constants/ps-scan-camera-status';
+import { PsScanConfig } from '../constants/ps-scan-config';
 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 { usePsScanPhoto } from '../hooks/use-ps-scan-photo';
-import { PsScanFileNameService } from '../services/ps-scan-file-name-service';
+import { PsScanOutputService } from '../services/ps-scan-output-service';
 import { PsScanPipelineService } from '../services/ps-scan-pipeline-service';
 import { PsScanCameraView } from './ps-scan-camera-view';
 import { PsScanCropEditor } from './ps-scan-crop-editor';
 import { PsScanIconButton } from './ps-scan-icon-button';
+import { PsScanPageStrip } from './ps-scan-page-strip';
 import { PsScanPermissionView } from './ps-scan-permission-view';
 import { PsScanPreview } from './ps-scan-preview';
-export const PsDocumentScannerSheet = ({ fileName, jpegQuality, labels, maxDimension, onClose, onComplete, }) => {
+export const PsDocumentScannerSheet = ({ fileName, formats, jpegQuality, labels, maxDimension, onClose, onComplete, pageLabels, }) => {
     const tier = usePsViewport();
     const zIndex = usePsLayerZIndex(PallasoftZIndex.Modal);
     const content = useRef(null);
     const { clear, detectAgain, load, photo, setCorners } = usePsScanPhoto();
     const [step, setStep] = useState(PsScanStep.Camera);
     const [result, setResult] = useState(null);
+    const [pages, setPages] = useState([]);
+    const [isAddingPage, setIsAddingPage] = useState(false);
+    const pagesRef = useRef([]);
+    const nextPageId = useRef(1);
     const [announcement, setAnnouncement] = useState('');
     const [error, setError] = useState('');
     const [isCapturing, setIsCapturing] = useState(false);
@@ -41,6 +47,12 @@ export const PsDocumentScannerSheet = ({ fileName, jpegQuality, labels, maxDimen
         if (result !== null)
             URL.revokeObjectURL(result.url);
     }, [result]);
+    useEffect(() => {
+        pagesRef.current = pages;
+    }, [pages]);
+    useEffect(() => () => {
+        pagesRef.current.forEach((page) => URL.revokeObjectURL(page.url));
+    }, []);
     const edgeMessage = (isDetected) => isDetected ? labels.edgesFound : labels.edgesNotFound;
     const accept = async (source) => {
         setError('');
@@ -94,19 +106,78 @@ export const PsDocumentScannerSheet = ({ fileName, jpegQuality, labels, maxDimen
             setError(labels.processFailed);
         }
     };
-    const use = () => {
-        if (result === null)
+    const multiPageDimension = Math.min(maxDimension, PsScanConfig.multiPageMaxDimension);
+    const renderPage = async () => {
+        if (photo === null)
+            return null;
+        const rendered = await PsScanPipelineService.render(photo.source, photo.corners, multiPageDimension, jpegQuality);
+        const id = nextPageId.current;
+        nextPageId.current += 1;
+        return { ...rendered, id, url: URL.createObjectURL(rendered.blob) };
+    };
+    const addPage = async () => {
+        if (result === null || isAddingPage)
+            return;
+        setIsAddingPage(true);
+        setError('');
+        try {
+            const page = await renderPage();
+            if (page === null)
+                return;
+            setPages((current) => [...current, page]);
+            clear();
+            setResult(null);
+            setStep(PsScanStep.Camera);
+        }
+        catch {
+            setError(labels.processFailed);
+        }
+        finally {
+            setIsAddingPage(false);
+        }
+    };
+    const removePage = (id) => {
+        const removed = pages.find((page) => page.id === id);
+        if (removed !== undefined)
+            URL.revokeObjectURL(removed.url);
+        setPages((current) => current.filter((page) => page.id !== id));
+    };
+    const save = async (format) => {
+        if (result === null || isAddingPage)
             return;
-        onComplete([
-            new File([result.blob], PsScanFileNameService.build(fileName), { type: 'image/jpeg' }),
-        ]);
-        onClose();
+        setIsAddingPage(true);
+        setError('');
+        try {
+            const last = pages.length === 0 ? { ...result, id: 0 } : await renderPage();
+            if (last === null)
+                return;
+            const files = await PsScanOutputService.build([...pages, last], format, fileName);
+            if (pages.length > 0)
+                URL.revokeObjectURL(last.url);
+            onComplete(files);
+            onClose();
+        }
+        catch {
+            setError(labels.processFailed);
+        }
+        finally {
+            setIsAddingPage(false);
+        }
     };
+    const multiPage = pageLabels === null
+        ? undefined
+        : {
+            isBusy: isAddingPage,
+            labels: pageLabels,
+            onAddPage: addPage,
+            onRemovePage: removePage,
+            pages,
+        };
     if (typeof document === 'undefined')
         return null;
     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, isBusy: isCapturing, isReady: isReady, isTorchOn: camera.isTorchOn, labels: labels, onCapture: capture, onClose: onClose, onFile: accept, onToggleTorch: camera.toggleTorch, videoRef: camera.videoRef, videoTarget: camera.attachVideo })) : null, isCameraStep && !showsCamera ? (_jsxs(_Fragment, { children: [_jsx(PsScanPermissionView, { labels: labels, onAllow: camera.allow, onFile: accept, 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 }) })] })) : null, step === PsScanStep.Crop && photo !== null ? (_jsx(PsScanCropEditor, { labels: labels, onAutoDetect: autoDetect, onChange: setCorners, onContinue: flatten, onRetake: retake, photo: photo })) : null, step === PsScanStep.Preview ? (_jsx(PsScanPreview, { error: error, labels: labels, onAdjust: adjust, onRetake: retake, onUse: use, result: result })) : 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);
+                    : '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, isBusy: isCapturing, isReady: isReady, isTorchOn: camera.isTorchOn, labels: labels, onCapture: capture, onClose: onClose, onFile: accept, onToggleTorch: camera.toggleTorch, videoRef: camera.videoRef, videoTarget: camera.attachVideo })) : null, isCameraStep && !showsCamera ? (_jsxs(_Fragment, { children: [_jsx(PsScanPermissionView, { labels: labels, onAllow: camera.allow, onFile: accept, 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 }) })] })) : null, step === PsScanStep.Crop && photo !== null ? (_jsx(PsScanCropEditor, { labels: labels, onAutoDetect: autoDetect, onChange: setCorners, onContinue: flatten, onRetake: retake, photo: photo })) : null, step === PsScanStep.Preview ? (_jsx(PsScanPreview, { error: error, isSaving: isAddingPage, labels: labels, multiPage: multiPage, onAdjust: adjust, onRetake: retake, onSave: save, formats: formats, preferredFormat: PsScanOutputService.preferred(pages.length + 1, formats), result: result })) : null, isCameraStep && pageLabels !== null && pages.length > 0 ? (_jsx("div", { className: 'absolute inset-x-0 bottom-32 flex justify-center', children: _jsx(PsScanPageStrip, { labels: pageLabels, onRemove: removePage, pages: pages }) })) : 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

@@ -4,9 +4,9 @@ import { usePsHydrated } from '@pallasoft/ps-core-components';
 import { PsDocumentScannerLabels } from '../constants/ps-document-scanner-labels';
 import { PsScanConfig } from '../constants/ps-scan-config';
 import { PsDocumentScannerLoader } from './ps-document-scanner-loader';
-export const PsDocumentScanner = ({ fileName = PsScanConfig.defaultFileName, isOpen, jpegQuality = PsScanConfig.defaultJpegQuality, labels, maxDimension = PsScanConfig.defaultMaxDimension, onClose, onComplete, }) => {
+export const PsDocumentScanner = ({ fileName = PsScanConfig.defaultFileName, formats = PsScanConfig.formats, isMultiPage = false, isOpen, jpegQuality = PsScanConfig.defaultJpegQuality, labels, maxDimension = PsScanConfig.defaultMaxDimension, onClose, onComplete, pageLabels, }) => {
     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, onClose: onClose, onComplete: onComplete }) }));
+    return (_jsx(Suspense, { fallback: null, children: _jsx(PsDocumentScannerLoader, { fileName: fileName, formats: formats, jpegQuality: jpegQuality, labels: { ...PsDocumentScannerLabels, ...labels }, maxDimension: maxDimension, onClose: onClose, onComplete: onComplete, pageLabels: isMultiPage && pageLabels !== undefined ? pageLabels : null }) }));
 };

package/dist/esm/components/ps-image-viewer.js

@@ -1,29 +1,48 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { useEffect, useRef, useState } from 'react';
+import { usePsDragPan } from '../hooks/use-ps-drag-pan';
+import { PsPanService } from '../services/ps-pan-service';
 export const PsImageViewer = ({ file, labels, rotation, zoom }) => {
     const [offset, setOffset] = useState({ x: 0, y: 0 });
     const [hasFailed, setHasFailed] = useState(false);
-    const drag = useRef(null);
+    const pan = useRef(null);
+    const base = useRef({ x: 0, y: 0 });
+    const frame = useRef(0);
+    const pending = useRef({ x: 0, y: 0 });
     useEffect(() => {
         setOffset({ x: 0, y: 0 });
         setHasFailed(false);
     }, [file.id, zoom === 1]);
-    const onPointerDown = (event) => {
-        if (zoom <= 1)
-            return;
-        drag.current = { x: event.clientX - offset.x, y: event.clientY - offset.y };
-        event.currentTarget.setPointerCapture(event.pointerId);
-    };
-    const onPointerMove = (event) => {
-        if (drag.current === null)
-            return;
-        setOffset({ x: event.clientX - drag.current.x, y: event.clientY - drag.current.y });
+    useEffect(() => () => cancelAnimationFrame(frame.current), []);
+    const write = (next) => {
+        if (pan.current !== null)
+            pan.current.style.transform = PsPanService.translate(next);
     };
+    const handlers = usePsDragPan({
+        activationDistance: 0,
+        isEnabled: zoom > 1,
+        isMouseOnly: false,
+        onEnd: (delta) => {
+            cancelAnimationFrame(frame.current);
+            frame.current = 0;
+            const next = PsPanService.add(base.current, delta);
+            write(next);
+            setOffset(next);
+        },
+        onMove: (delta) => {
+            pending.current = PsPanService.add(base.current, delta);
+            if (frame.current !== 0)
+                return;
+            frame.current = requestAnimationFrame(() => {
+                frame.current = 0;
+                write(pending.current);
+            });
+        },
+        onStart: () => {
+            base.current = offset;
+        },
+    });
     if (hasFailed)
         return _jsx("p", { className: 'm-auto text-sm text-white/70', children: labels.loadFailed });
-    return (_jsx("div", { className: `flex h-full w-full touch-none items-center justify-center overflow-hidden ${zoom > 1 ? 'cursor-grab active:cursor-grabbing' : ''}`, onPointerDown: onPointerDown, onPointerMove: onPointerMove, onPointerUp: () => {
-            drag.current = null;
-        }, children: _jsx("img", { alt: file.name, className: 'max-h-full max-w-full select-none object-contain shadow-2xl transition-transform duration-150', draggable: false, onError: () => setHasFailed(true), src: file.url, style: {
-                transform: `translate(${offset.x}px, ${offset.y}px) scale(${zoom}) rotate(${rotation}deg)`,
-            } }) }));
+    return (_jsx("div", { className: `h-full w-full touch-none overflow-hidden ${zoom > 1 ? 'cursor-grab active:cursor-grabbing' : ''}`, ...handlers, children: _jsx("div", { className: 'flex h-full w-full items-center justify-center', ref: pan, style: { transform: PsPanService.translate(offset) }, children: _jsx("img", { alt: file.name, className: 'max-h-full max-w-full select-none object-contain shadow-2xl transition-transform duration-150', draggable: false, onError: () => setHasFailed(true), src: file.url, style: { transform: `scale(${zoom}) rotate(${rotation}deg)` } }) }) }));
 };

package/dist/esm/components/ps-pdf-viewer.js

@@ -2,6 +2,7 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useEffect, useMemo, useRef, useState } from 'react';
 import { PsSpinner, usePsElementSize } from '@pallasoft/ps-core-components';
 import { PsFileViewerConfig } from '../constants/ps-file-viewer-config';
+import { usePsDragPan } from '../hooks/use-ps-drag-pan';
 import { PsPdfService } from '../services/ps-pdf-service';
 import { PsPdfPage } from './ps-pdf-page';
 import { PsPdfThumbnail } from './ps-pdf-thumbnail';
@@ -13,6 +14,22 @@ export const PsPdfViewer = ({ activeMatch, file, labels, onMatchCount, pdfWorker
     const [currentPage, setCurrentPage] = useState(1);
     const [frame, frameSize] = usePsElementSize();
     const scroller = useRef(null);
+    const scrollStart = useRef({ x: 0, y: 0 });
+    const handlers = usePsDragPan({
+        activationDistance: PsFileViewerConfig.dragActivationDistance,
+        isEnabled: true,
+        isMouseOnly: true,
+        onEnd: () => undefined,
+        onMove: (delta) => {
+            if (scroller.current === null)
+                return;
+            scroller.current.scrollLeft = scrollStart.current.x - delta.x;
+            scroller.current.scrollTop = scrollStart.current.y - delta.y;
+        },
+        onStart: (element) => {
+            scrollStart.current = { x: element.scrollLeft, y: element.scrollTop };
+        },
+    });
     useEffect(() => {
         let isCurrent = true;
         let opened = null;
@@ -83,7 +100,7 @@ export const PsPdfViewer = ({ activeMatch, file, labels, onMatchCount, pdfWorker
         return Math.max(0.1, fit * zoom);
     }, [frameSize.width, pageWidth, zoom]);
     const pages = document === null ? [] : Array.from({ length: document.numPages }, (_, index) => index + 1);
-    return (_jsxs("div", { className: 'flex h-full w-full min-w-0', children: [document !== null && document.numPages > 1 ? (_jsx("nav", { className: 'ps-scrollbar-hidden hidden w-24 shrink-0 flex-col items-center gap-2 overflow-y-auto border-r border-white/10 py-3 md:flex', children: pages.map((pageNumber) => (_jsx(PsPdfThumbnail, { document: document, hasMatches: matches.some((match) => match.pageNumber === pageNumber), isCurrent: pageNumber === currentPage, label: labels.page, onSelect: () => scrollToPage(pageNumber), pageNumber: pageNumber, rotation: rotation }, pageNumber))) })) : null, _jsx("div", { className: 'min-w-0 flex-1', ref: frame, children: hasFailed ? (_jsx("p", { className: 'flex h-full items-center justify-center text-sm text-white/70', children: labels.loadFailed })) : document === null ? (_jsx("div", { className: 'flex h-full items-center justify-center text-white', children: _jsx(PsSpinner, { color: 'current', size: 'large' }) })) : (_jsx("div", { className: 'flex h-full flex-col items-center gap-4 overflow-auto px-6 py-6', onScroll: (event) => {
+    return (_jsxs("div", { className: 'flex h-full w-full min-w-0', children: [document !== null && document.numPages > 1 ? (_jsx("nav", { className: 'ps-scrollbar-hidden hidden w-24 shrink-0 flex-col items-center gap-2 overflow-y-auto border-r border-white/10 py-3 md:flex', children: pages.map((pageNumber) => (_jsx(PsPdfThumbnail, { document: document, hasMatches: matches.some((match) => match.pageNumber === pageNumber), isCurrent: pageNumber === currentPage, label: labels.page, onSelect: () => scrollToPage(pageNumber), pageNumber: pageNumber, rotation: rotation }, pageNumber))) })) : null, _jsx("div", { className: 'min-w-0 flex-1', ref: frame, children: hasFailed ? (_jsx("p", { className: 'flex h-full items-center justify-center text-sm text-white/70', children: labels.loadFailed })) : document === null ? (_jsx("div", { className: 'flex h-full items-center justify-center text-white', children: _jsx(PsSpinner, { color: 'current', size: 'large' }) })) : (_jsx("div", { className: 'flex h-full cursor-grab flex-col items-center gap-4 overflow-auto px-6 py-6 active:cursor-grabbing', ...handlers, onScroll: (event) => {
                         const top = event.currentTarget.scrollTop + event.currentTarget.clientHeight / 3;
                         const visible = Array.from(event.currentTarget.querySelectorAll('[data-ps-pdf-page]')).find((node) => node.offsetTop + node.offsetHeight > top);
                         if (visible)

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

@@ -11,11 +11,11 @@ import { PsScanViewfinderOverlay } from './ps-scan-viewfinder-overlay';
 export const PsScanCameraView = ({ canTorch, detection, flashKey, isBusy, isReady, isTorchOn, labels, onCapture, onClose, onFile, onToggleTorch, videoRef, videoTarget, }) => {
     const [areaRef, area] = usePsElementSize();
     const [video, setVideo] = useState({ height: 0, width: 0 });
-    const hint = detection.quad === null ? labels.hintFind : labels.hintFound;
+    const hint = detection.hasQuad ? labels.hintFound : labels.hintFind;
     const measure = () => {
         const element = videoRef.current;
         if (element !== null)
             setVideo({ height: element.videoHeight, width: element.videoWidth });
     };
-    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 }), _jsx("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 })] }), 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: _jsx(PsScanPhotoButton, { isIconOnly: true, label: labels.choosePhoto, onFile: onFile }) }), _jsx(PsScanShutter, { disabled: !isReady || isBusy, label: labels.capture, onCapture: onCapture }), _jsx("span", { "aria-hidden": 'true' })] })] }));
+    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, hasQuad: detection.hasQuad, quadRef: detection.quadRef, 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 }), _jsx("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 })] }), 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: _jsx(PsScanPhotoButton, { isIconOnly: true, label: labels.choosePhoto, onFile: onFile }) }), _jsx(PsScanShutter, { disabled: !isReady || isBusy, label: labels.capture, onCapture: onCapture }), _jsx("span", { "aria-hidden": 'true' })] })] }));
 };

package/dist/esm/components/ps-scan-page-strip.js

@@ -0,0 +1,4 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { PsIcon, PsIconKey } from '@pallasoft/ps-icons';
+import { PsScanTemplateService } from '../services/ps-scan-template-service';
+export const PsScanPageStrip = ({ labels, onRemove, pages }) => (_jsx("ul", { className: 'ps-scrollbar-hidden flex min-w-0 items-center justify-center gap-3 overflow-x-auto px-4 py-2', children: pages.map((page, index) => (_jsxs("li", { className: 'relative shrink-0', children: [_jsx("img", { alt: PsScanTemplateService.fill(labels.pageLabel, { n: index + 1 }), className: 'h-16 w-auto rounded-sm bg-white object-contain ring-1 ring-white/25', src: page.url }), _jsx("button", { "aria-label": PsScanTemplateService.fill(labels.removePage, { n: index + 1 }), className: 'ps-focus-ring ps-control-square ps-control-compact absolute -right-2 -top-2 inline-flex items-center justify-center rounded-ps-control bg-black/80 text-white transition hover:bg-black', onClick: () => onRemove(page.id), type: 'button', children: _jsx(PsIcon, { "aria-hidden": 'true', className: 'size-4', iconKey: PsIconKey.Close }) })] }, page.id))) }));

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

@@ -1,6 +1,11 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { PsSpinner } from '@pallasoft/ps-core-components';
 import { PsIcon, PsIconKey } from '@pallasoft/ps-icons';
+import { PsScanFormat } from '../constants/ps-scan-format';
+import { PsScanTemplateService } from '../services/ps-scan-template-service';
 import { PsScanButton } from './ps-scan-button';
 import { PsScanIconButton } from './ps-scan-icon-button';
-export const PsScanPreview = ({ error, labels, onAdjust, onRetake, onUse, result, }) => (_jsxs("div", { className: 'flex h-full min-h-0 flex-col bg-black text-white animate-ps-fade-in', children: [_jsxs("header", { className: 'grid shrink-0 grid-cols-[2.75rem_1fr_2.75rem] items-center gap-3 px-4 pb-1 pt-[max(1rem,env(safe-area-inset-top))]', children: [_jsx(PsScanIconButton, { iconKey: PsIconKey.Crop, label: labels.cropTitle, onClick: onAdjust }), _jsx("h2", { className: 'truncate text-center text-base font-semibold', children: labels.previewTitle }), _jsx("span", { "aria-hidden": 'true' })] }), _jsx("div", { className: 'flex min-h-0 flex-1 items-center justify-center px-6 py-4', children: result === null ? (_jsxs("div", { className: 'flex flex-col items-center gap-3 text-sm text-white/75', role: 'status', children: [_jsx(PsSpinner, { color: 'current', label: labels.preparing, size: 'small' }), _jsx("span", { children: labels.preparing })] })) : (_jsx("img", { alt: labels.previewAlt, className: 'max-h-full max-w-full rounded-sm bg-white object-contain shadow-[0_24px_60px_-20px_rgb(0_0_0/0.9)] animate-ps-fade-in', src: result.url })) }), error === '' ? null : (_jsx("p", { className: 'mx-auto mb-2 max-w-sm rounded-ps-control bg-danger px-3 py-2 text-center text-sm text-white', role: 'alert', children: error })), _jsxs("footer", { className: 'mx-auto grid w-full max-w-md shrink-0 grid-cols-2 gap-3 px-4 pb-[max(1.25rem,env(safe-area-inset-bottom))] pt-2', children: [_jsx(PsScanButton, { isLarge: true, onClick: onRetake, children: labels.retake }), _jsx(PsScanButton, { disabled: result === null, isLarge: true, isPrimary: true, leadingIcon: _jsx(PsIcon, { "aria-hidden": 'true', className: 'size-4', iconKey: PsIconKey.Check }), onClick: onUse, children: labels.useScan })] })] }));
+import { PsScanPageStrip } from './ps-scan-page-strip';
+export const PsScanPreview = ({ error, formats, isSaving, labels, multiPage, onAdjust, onRetake, onSave, preferredFormat, result, }) => (_jsxs("div", { className: 'flex h-full min-h-0 flex-col bg-black text-white animate-ps-fade-in', children: [_jsxs("header", { className: 'grid shrink-0 grid-cols-[2.75rem_1fr_2.75rem] items-center gap-3 px-4 pb-1 pt-[max(1rem,env(safe-area-inset-top))]', children: [_jsx(PsScanIconButton, { iconKey: PsIconKey.Crop, label: labels.cropTitle, onClick: onAdjust }), _jsx("h2", { className: 'truncate text-center text-base font-semibold', children: labels.previewTitle }), _jsx("span", { "aria-hidden": 'true' })] }), _jsx("div", { className: 'flex min-h-0 flex-1 items-center justify-center px-6 py-4', children: result === null ? (_jsxs("div", { className: 'flex flex-col items-center gap-3 text-sm text-white/75', role: 'status', children: [_jsx(PsSpinner, { color: 'current', label: labels.preparing, size: 'small' }), _jsx("span", { children: labels.preparing })] })) : (_jsx("img", { alt: labels.previewAlt, className: 'max-h-full max-w-full rounded-sm bg-white object-contain shadow-[0_24px_60px_-20px_rgb(0_0_0/0.9)] animate-ps-fade-in', src: result.url })) }), error === '' ? null : (_jsx("p", { className: 'mx-auto mb-2 max-w-sm rounded-ps-control bg-danger px-3 py-2 text-center text-sm text-white', role: 'alert', children: error })), multiPage === undefined || multiPage.pages.length === 0 ? null : (_jsxs("div", { className: 'shrink-0', children: [_jsx(PsScanPageStrip, { labels: multiPage.labels, onRemove: multiPage.onRemovePage, pages: multiPage.pages }), _jsx("p", { className: 'text-center text-sm text-white/75', children: PsScanTemplateService.fill(multiPage.labels.pageCount, {
+                        count: multiPage.pages.length + 1,
+                    }) })] })), _jsxs("footer", { className: 'mx-auto grid w-full max-w-md shrink-0 grid-cols-2 gap-3 px-4 pb-[max(1.25rem,env(safe-area-inset-bottom))] pt-2', children: [multiPage === undefined ? null : (_jsx(PsScanButton, { className: 'col-span-2', disabled: result === null, isLoading: multiPage.isBusy, isLarge: true, leadingIcon: _jsx(PsIcon, { "aria-hidden": 'true', className: 'size-4', iconKey: PsIconKey.Plus }), onClick: multiPage.onAddPage, children: multiPage.labels.addPage })), formats.includes(PsScanFormat.Pdf) ? (_jsx(PsScanButton, { className: formats.length === 1 ? 'col-span-2' : undefined, disabled: result === null, isLarge: true, isLoading: isSaving, isPrimary: preferredFormat === PsScanFormat.Pdf, leadingIcon: _jsx(PsIcon, { "aria-hidden": 'true', className: 'size-4', iconKey: PsIconKey.File }), onClick: () => onSave(PsScanFormat.Pdf), children: labels.saveAsPdf })) : null, formats.includes(PsScanFormat.Png) ? (_jsx(PsScanButton, { className: formats.length === 1 ? 'col-span-2' : undefined, disabled: result === null, isLarge: true, isLoading: isSaving, isPrimary: preferredFormat === PsScanFormat.Png, leadingIcon: _jsx(PsIcon, { "aria-hidden": 'true', className: 'size-4', iconKey: PsIconKey.Image }), onClick: () => onSave(PsScanFormat.Png), children: labels.saveAsImages })) : null, _jsx(PsScanButton, { className: 'col-span-2', disabled: isSaving, isLarge: true, onClick: onRetake, children: labels.retake })] })] }));

package/dist/esm/components/ps-scan-viewfinder-overlay.js

@@ -1,12 +1,14 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { PsScanConfig } from '../constants/ps-scan-config';
+import { usePsScanQuadTween } from '../hooks/use-ps-scan-quad-tween';
 import { PsScanGeometryService } from '../services/ps-scan-geometry-service';
-export const PsScanViewfinderOverlay = ({ area, quad, video }) => {
-    if (area.width <= 0 || area.height <= 0)
-        return null;
+export const PsScanViewfinderOverlay = ({ area, hasQuad, quadRef, video, }) => {
     const box = PsScanGeometryService.cover(area, video);
     const left = (area.width - box.width) / 2;
     const top = (area.height - box.height) / 2;
+    const polygon = usePsScanQuadTween(quadRef, (quad) => quad.map((point) => `${left + point.x * box.width},${top + point.y * box.height}`).join(' '));
+    if (area.width <= 0 || area.height <= 0)
+        return null;
     const frameHeight = Math.min(area.height * PsScanConfig.guideHeightRatio, (area.width * PsScanConfig.guideWidthRatio) / PsScanConfig.guideAspect);
     const frameWidth = frameHeight * PsScanConfig.guideAspect;
     const frameLeft = (area.width - frameWidth) / 2;
@@ -18,7 +20,5 @@ export const PsScanViewfinderOverlay = ({ area, quad, video }) => {
         `M${frameLeft + frameWidth} ${frameTop + frameHeight - arm}V${frameTop + frameHeight}H${frameLeft + frameWidth - arm}`,
         `M${frameLeft + arm} ${frameTop + frameHeight}H${frameLeft}V${frameTop + frameHeight - arm}`,
     ].join('');
-    return (_jsx("svg", { "aria-hidden": 'true', className: 'pointer-events-none absolute inset-0 size-full', viewBox: `0 0 ${area.width} ${area.height}`, children: quad === null || box.width === 0 ? (_jsx("path", { className: 'stroke-white/75 animate-ps-fade-in', d: corners, fill: 'none', strokeLinecap: 'round', strokeLinejoin: 'round', strokeWidth: '4' })) : (_jsx("polygon", { className: 'fill-primary/10 stroke-primary', points: quad
-                .map((point) => `${left + point.x * box.width},${top + point.y * box.height}`)
-                .join(' '), strokeLinejoin: 'round', strokeWidth: '3' })) }));
+    return (_jsx("svg", { "aria-hidden": 'true', className: 'pointer-events-none absolute inset-0 size-full', viewBox: `0 0 ${area.width} ${area.height}`, children: !hasQuad || box.width === 0 ? (_jsx("path", { className: 'stroke-white/75 animate-ps-fade-in', d: corners, fill: 'none', strokeLinecap: 'round', strokeLinejoin: 'round', strokeWidth: '4' })) : (_jsx("polygon", { className: 'fill-primary/10 stroke-primary', ref: polygon, strokeLinejoin: 'round', strokeWidth: '3' })) }));
 };

package/dist/esm/constants/ps-document-scanner-labels.js

@@ -41,11 +41,12 @@ export const PsDocumentScannerLabels = {
     primerTitle: 'Allow camera access to scan your documents',
     processFailed: 'The scan could not be prepared. Try again.',
     retake: 'Retake',
+    saveAsImages: 'Save as images',
+    saveAsPdf: 'Save as PDF',
     title: 'Scan document',
     torchOff: 'Turn flash off',
     torchOn: 'Turn flash on',
     tryAgain: 'Try again',
     unavailableBody: 'This device has no camera the browser can use. Choose a photo of the page instead.',
     unavailableTitle: 'No camera found',
-    useScan: 'Use scan',
 };

package/dist/esm/constants/ps-file-viewer-config.js

@@ -1,4 +1,5 @@
 export const PsFileViewerConfig = {
+    dragActivationDistance: 4,
     maxZoom: 4,
     minZoom: 0.25,
     pdfBaseScale: 1.4,

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

@@ -1,3 +1,4 @@
+import { PsScanFormat } from './ps-scan-format';
 export const PsScanConfig = {
     cameraPermission: 'camera',
     cannyHighPercentile: 0.9,
@@ -20,6 +21,7 @@ export const PsScanConfig = {
     detectMinAreaRatio: 0.1,
     detectMinQuadFill: 0.88,
     detectMinSideRatio: 0.06,
+    formats: [PsScanFormat.Pdf, PsScanFormat.Png],
     guideArm: 36,
     guideArmRatio: 0.18,
     guideAspect: 0.72,
@@ -27,14 +29,20 @@ export const PsScanConfig = {
     guideLift: 0.03,
     guideWidthRatio: 0.76,
     liveDeadzone: 0.006,
-    liveDetectIntervalMs: 200,
+    liveCloseRadii: [2],
+    liveDetectMinIntervalMs: 70,
     liveDetectMaxDimension: 280,
-    liveMissLimit: 3,
-    liveSmoothing: 0.45,
+    liveMissLimit: 1,
+    liveSmoothing: 0.68,
+    liveTweenMs: 55,
     loupeOffset: 72,
     loupeSize: 112,
     loupeZoom: 2.5,
     minCornerGap: 0.02,
+    multiPageMaxDimension: 2400,
+    jpegType: 'image/jpeg',
+    pdfType: 'application/pdf',
+    pngType: 'image/png',
     polygonEpsilons: [0.008, 0.012, 0.018, 0.026, 0.036, 0.05, 0.07],
     torchConstraint: 'torch',
     warpChunkPixels: 400000,

package/dist/esm/constants/ps-scan-detect-profiles.js

@@ -0,0 +1,5 @@
+import { PsScanConfig } from './ps-scan-config';
+export const PsScanDetectProfiles = {
+    full: { closeRadii: PsScanConfig.closeRadii, isYielding: true },
+    live: { closeRadii: PsScanConfig.liveCloseRadii, isYielding: false },
+};

package/dist/esm/constants/ps-scan-format.js

@@ -0,0 +1,4 @@
+export const PsScanFormat = {
+    Pdf: 'pdf',
+    Png: 'png',
+};

package/dist/esm/hooks/use-ps-drag-pan.js

@@ -0,0 +1,66 @@
+import { useRef } from 'react';
+import { PsPanService } from '../services/ps-pan-service';
+export const usePsDragPan = ({ activationDistance, isEnabled, isMouseOnly, onEnd, onMove, onStart, }) => {
+    const origin = useRef(null);
+    const pointerId = useRef(-1);
+    const isActive = useRef(false);
+    const last = useRef({ x: 0, y: 0 });
+    const activate = (element) => {
+        isActive.current = true;
+        last.current = { x: 0, y: 0 };
+        if (typeof element.setPointerCapture === 'function')
+            element.setPointerCapture(pointerId.current);
+        element.style.userSelect = 'none';
+        window.getSelection()?.removeAllRanges();
+        onStart(element);
+    };
+    const finish = (element) => {
+        if (origin.current === null)
+            return;
+        const wasActive = isActive.current;
+        origin.current = null;
+        isActive.current = false;
+        element.style.userSelect = '';
+        if (wasActive)
+            onEnd(last.current);
+    };
+    const onPointerDown = (event) => {
+        if (!isEnabled || origin.current !== null)
+            return;
+        if (isMouseOnly && event.pointerType === 'touch')
+            return;
+        if (event.pointerType === 'mouse' && event.button !== 0)
+            return;
+        if (PsPanService.isOnScrollbar(event.currentTarget, event.clientX, event.clientY))
+            return;
+        origin.current = { x: event.clientX, y: event.clientY };
+        pointerId.current = event.pointerId;
+        isActive.current = false;
+        if (activationDistance <= 0)
+            activate(event.currentTarget);
+    };
+    const onPointerMove = (event) => {
+        if (origin.current === null || event.pointerId !== pointerId.current)
+            return;
+        const delta = { x: event.clientX - origin.current.x, y: event.clientY - origin.current.y };
+        if (!isActive.current) {
+            if (Math.hypot(delta.x, delta.y) < activationDistance)
+                return;
+            activate(event.currentTarget);
+        }
+        last.current = delta;
+        onMove(delta);
+    };
+    const onPointerEnd = (event) => {
+        if (event.pointerId !== pointerId.current)
+            return;
+        finish(event.currentTarget);
+    };
+    return {
+        onLostPointerCapture: onPointerEnd,
+        onPointerCancel: onPointerEnd,
+        onPointerDown,
+        onPointerMove,
+        onPointerUp: onPointerEnd,
+    };
+};

package/dist/esm/hooks/use-ps-scan-live-detection.js

@@ -1,41 +1,66 @@
-import { useEffect, useState } from 'react';
+import { useEffect, useRef, useState } from 'react';
 import { PsScanConfig } from '../constants/ps-scan-config';
+import { PsScanDetectProfiles } from '../constants/ps-scan-detect-profiles';
 import { PsScanCanvasService } from '../services/ps-scan-canvas-service';
 import { PsScanEdgeService } from '../services/ps-scan-edge-service';
+import { PsScanFrameService } from '../services/ps-scan-frame-service';
 import { PsScanStabilityService } from '../services/ps-scan-stability-service';
 export const usePsScanLiveDetection = (videoRef, isActive) => {
-    const [detection, setDetection] = useState({ quad: null });
+    const [hasQuad, setHasQuad] = useState(false);
+    const quadRef = useRef(null);
     useEffect(() => {
+        quadRef.current = null;
         if (!isActive) {
-            setDetection({ quad: null });
+            setHasQuad(false);
             return;
         }
         let isCancelled = false;
+        let isRunning = false;
+        let lastStart = 0;
         let state = PsScanStabilityService.initial();
-        let timer;
-        const tick = async () => {
+        let cancelNext = () => undefined;
+        const schedule = () => {
+            if (!isCancelled)
+                cancelNext = PsScanFrameService.schedule(videoRef.current, run);
+        };
+        const run = async () => {
             const video = videoRef.current;
-            if (video !== null && video.videoWidth > 0 && document.visibilityState === 'visible') {
-                try {
-                    const raster = PsScanCanvasService.sample(video, PsScanConfig.liveDetectMaxDimension);
-                    const quad = await PsScanEdgeService.detect(raster, PsScanConfig.liveDetectMaxDimension);
-                    if (isCancelled)
-                        return;
-                    state = PsScanStabilityService.next(state, quad);
-                }
-                catch {
-                    state = PsScanStabilityService.initial();
-                }
-                setDetection((current) => (current.quad === state.quad ? current : { quad: state.quad }));
+            const now = performance.now();
+            if (isRunning ||
+                video === null ||
+                video.videoWidth === 0 ||
+                document.visibilityState !== 'visible' ||
+                now - lastStart < PsScanConfig.liveDetectMinIntervalMs) {
+                schedule();
+                return;
             }
-            if (!isCancelled)
-                timer = setTimeout(tick, PsScanConfig.liveDetectIntervalMs);
+            isRunning = true;
+            lastStart = now;
+            try {
+                const raster = PsScanCanvasService.sample(video, PsScanConfig.liveDetectMaxDimension);
+                const quad = await PsScanEdgeService.detect(raster, PsScanConfig.liveDetectMaxDimension, PsScanDetectProfiles.live);
+                if (isCancelled)
+                    return;
+                state = PsScanStabilityService.next(state, quad);
+            }
+            catch {
+                state = PsScanStabilityService.initial();
+            }
+            finally {
+                isRunning = false;
+            }
+            if (isCancelled)
+                return;
+            quadRef.current = state.quad;
+            setHasQuad(state.quad !== null);
+            schedule();
         };
-        timer = setTimeout(tick, PsScanConfig.liveDetectIntervalMs);
+        schedule();
         return () => {
             isCancelled = true;
-            clearTimeout(timer);
+            cancelNext();
+            quadRef.current = null;
         };
     }, [isActive]);
-    return detection;
+    return { hasQuad, quadRef };
 };

package/dist/esm/hooks/use-ps-scan-quad-tween.js

@@ -0,0 +1,34 @@
+import { useEffect, useRef } from 'react';
+import { PsScanQuadTweenService } from '../services/ps-scan-quad-tween-service';
+export const usePsScanQuadTween = (quadRef, format) => {
+    const polygon = useRef(null);
+    const formatRef = useRef(format);
+    formatRef.current = format;
+    useEffect(() => {
+        let displayed = null;
+        let lastTime = performance.now();
+        let lastPoints = '';
+        let handle = 0;
+        const frame = (time) => {
+            const target = quadRef.current;
+            const elapsed = time - lastTime;
+            lastTime = time;
+            if (target === null)
+                displayed = null;
+            else
+                displayed =
+                    displayed === null ? target : PsScanQuadTweenService.step(displayed, target, elapsed);
+            if (displayed !== null && polygon.current !== null) {
+                const points = formatRef.current(displayed);
+                if (points !== lastPoints) {
+                    lastPoints = points;
+                    polygon.current.setAttribute('points', points);
+                }
+            }
+            handle = requestAnimationFrame(frame);
+        };
+        handle = requestAnimationFrame(frame);
+        return () => cancelAnimationFrame(handle);
+    }, [quadRef]);
+    return polygon;
+};

package/dist/esm/index.js

@@ -33,6 +33,8 @@ export * from './constants/ps-upload-messages';
 export * from './constants/ps-upload-queue-config';
 export * from './constants/ps-upload-status-tones';
 export * from './constants/ps-upload-status';
+export * from './models/ps-drag-pan-handlers';
+export * from './models/ps-drag-pan-options';
 export * from './models/ps-file-icon-button-tone';
 export * from './models/ps-file-rejection';
 export * from './models/ps-file-selection-rules';
@@ -66,10 +68,13 @@ export * from './services/ps-text-search-service';
 export * from './services/ps-upload-queue-service';
 export * from './services/ps-xhr-upload-service';
 export * from './hooks/use-ps-active-match-scroll';
+export * from './hooks/use-ps-drag-pan';
 export * from './hooks/use-ps-file-text';
 export * from './hooks/use-ps-in-view';
 export * from './hooks/use-ps-upload-queue';
 export * from './components/ps-document-scanner';
 export * from './constants/ps-document-scanner-labels';
+export * from './constants/ps-scan-format';
+export * from './models/ps-document-scanner-page-labels';
 export * from './models/ps-document-scanner-props';
 export * from './models/ps-file-picker-scan';

package/dist/esm/models/ps-document-scanner-page-labels.js

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