@pallasoft/ps-file-components 2.0.1 → 2.2.0

package/dist/components/ps-document-scanner-loader.d.ts

@@ -1 +1 @@
-export declare const PsDocumentScannerLoader: import("react").LazyExoticComponent<({ fileName, jpegQuality, labels, maxDimension, onClose, onComplete, }: import("../models/ps-document-scanner-sheet-props").PsDocumentScannerSheetProps) => import("react").ReactPortal | null>;
+export declare const PsDocumentScannerLoader: import("react").LazyExoticComponent<({ fileName, formats, jpegQuality, labels, maxDimension, onClose, onComplete, pageLabels, }: import("../models/ps-document-scanner-sheet-props").PsDocumentScannerSheetProps) => import("react").ReactPortal | null>;

package/dist/components/ps-document-scanner-sheet.d.ts

@@ -1,2 +1,2 @@
 import type { PsDocumentScannerSheetProps } from '../models/ps-document-scanner-sheet-props';
-export declare const PsDocumentScannerSheet: ({ fileName, jpegQuality, labels, maxDimension, onClose, onComplete, }: PsDocumentScannerSheetProps) => import("react").ReactPortal | null;
+export declare const PsDocumentScannerSheet: ({ fileName, formats, jpegQuality, labels, maxDimension, onClose, onComplete, pageLabels, }: PsDocumentScannerSheetProps) => import("react").ReactPortal | null;

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

@@ -8,25 +8,31 @@ const ps_design_system_1 = require("@pallasoft/ps-design-system");
 const ps_icons_1 = require("@pallasoft/ps-icons");
 const react_dom_1 = require("react-dom");
 const ps_scan_camera_status_1 = require("../constants/ps-scan-camera-status");
+const ps_scan_config_1 = require("../constants/ps-scan-config");
 const ps_scan_step_1 = require("../constants/ps-scan-step");
 const use_ps_focus_trap_1 = require("../hooks/use-ps-focus-trap");
 const use_ps_scan_camera_1 = require("../hooks/use-ps-scan-camera");
 const use_ps_scan_live_detection_1 = require("../hooks/use-ps-scan-live-detection");
 const use_ps_scan_photo_1 = require("../hooks/use-ps-scan-photo");
-const ps_scan_file_name_service_1 = require("../services/ps-scan-file-name-service");
+const ps_scan_output_service_1 = require("../services/ps-scan-output-service");
 const ps_scan_pipeline_service_1 = require("../services/ps-scan-pipeline-service");
 const ps_scan_camera_view_1 = require("./ps-scan-camera-view");
 const ps_scan_crop_editor_1 = require("./ps-scan-crop-editor");
 const ps_scan_icon_button_1 = require("./ps-scan-icon-button");
+const ps_scan_page_strip_1 = require("./ps-scan-page-strip");
 const ps_scan_permission_view_1 = require("./ps-scan-permission-view");
 const ps_scan_preview_1 = require("./ps-scan-preview");
-const PsDocumentScannerSheet = ({ fileName, jpegQuality, labels, maxDimension, onClose, onComplete, }) => {
+const PsDocumentScannerSheet = ({ fileName, formats, jpegQuality, labels, maxDimension, onClose, onComplete, pageLabels, }) => {
     const tier = (0, ps_core_components_1.usePsViewport)();
     const zIndex = (0, ps_core_components_1.usePsLayerZIndex)(ps_design_system_1.PallasoftZIndex.Modal);
     const content = (0, react_1.useRef)(null);
     const { clear, detectAgain, load, photo, setCorners } = (0, use_ps_scan_photo_1.usePsScanPhoto)();
     const [step, setStep] = (0, react_1.useState)(ps_scan_step_1.PsScanStep.Camera);
     const [result, setResult] = (0, react_1.useState)(null);
+    const [pages, setPages] = (0, react_1.useState)([]);
+    const [isAddingPage, setIsAddingPage] = (0, react_1.useState)(false);
+    const pagesRef = (0, react_1.useRef)([]);
+    const nextPageId = (0, react_1.useRef)(1);
     const [announcement, setAnnouncement] = (0, react_1.useState)('');
     const [error, setError] = (0, react_1.useState)('');
     const [isCapturing, setIsCapturing] = (0, react_1.useState)(false);
@@ -44,6 +50,12 @@ const PsDocumentScannerSheet = ({ fileName, jpegQuality, labels, maxDimension, o
         if (result !== null)
             URL.revokeObjectURL(result.url);
     }, [result]);
+    (0, react_1.useEffect)(() => {
+        pagesRef.current = pages;
+    }, [pages]);
+    (0, react_1.useEffect)(() => () => {
+        pagesRef.current.forEach((page) => URL.revokeObjectURL(page.url));
+    }, []);
     const edgeMessage = (isDetected) => isDetected ? labels.edgesFound : labels.edgesNotFound;
     const accept = async (source) => {
         setError('');
@@ -97,20 +109,79 @@ const PsDocumentScannerSheet = ({ fileName, jpegQuality, labels, maxDimension, o
             setError(labels.processFailed);
         }
     };
-    const use = () => {
-        if (result === null)
+    const multiPageDimension = Math.min(maxDimension, ps_scan_config_1.PsScanConfig.multiPageMaxDimension);
+    const renderPage = async () => {
+        if (photo === null)
+            return null;
+        const rendered = await ps_scan_pipeline_service_1.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(ps_scan_step_1.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], ps_scan_file_name_service_1.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 ps_scan_output_service_1.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 (0, react_dom_1.createPortal)((0, jsx_runtime_1.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: (0, jsx_runtime_1.jsx)(ps_core_components_1.PsLayer, { zIndex: zIndex, children: (0, jsx_runtime_1.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: [(0, jsx_runtime_1.jsx)("p", { "aria-live": 'polite', className: 'sr-only', role: 'status', children: announcement }), isCameraStep && showsCamera ? ((0, jsx_runtime_1.jsx)(ps_scan_camera_view_1.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 ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(ps_scan_permission_view_1.PsScanPermissionView, { labels: labels, onAllow: camera.allow, onFile: accept, status: camera.status }), (0, jsx_runtime_1.jsx)("div", { className: 'absolute left-4 top-[max(1rem,env(safe-area-inset-top))] flex gap-2', children: (0, jsx_runtime_1.jsx)(ps_scan_icon_button_1.PsScanIconButton, { iconKey: ps_icons_1.PsIconKey.Close, label: labels.close, onClick: onClose }) })] })) : null, step === ps_scan_step_1.PsScanStep.Crop && photo !== null ? ((0, jsx_runtime_1.jsx)(ps_scan_crop_editor_1.PsScanCropEditor, { labels: labels, onAutoDetect: autoDetect, onChange: setCorners, onContinue: flatten, onRetake: retake, photo: photo })) : null, step === ps_scan_step_1.PsScanStep.Preview ? ((0, jsx_runtime_1.jsx)(ps_scan_preview_1.PsScanPreview, { error: error, labels: labels, onAdjust: adjust, onRetake: retake, onUse: use, result: result })) : null, isCameraStep && error !== '' ? ((0, jsx_runtime_1.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: [(0, jsx_runtime_1.jsx)("p", { "aria-live": 'polite', className: 'sr-only', role: 'status', children: announcement }), isCameraStep && showsCamera ? ((0, jsx_runtime_1.jsx)(ps_scan_camera_view_1.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 ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(ps_scan_permission_view_1.PsScanPermissionView, { labels: labels, onAllow: camera.allow, onFile: accept, status: camera.status }), (0, jsx_runtime_1.jsx)("div", { className: 'absolute left-4 top-[max(1rem,env(safe-area-inset-top))] flex gap-2', children: (0, jsx_runtime_1.jsx)(ps_scan_icon_button_1.PsScanIconButton, { iconKey: ps_icons_1.PsIconKey.Close, label: labels.close, onClick: onClose }) })] })) : null, step === ps_scan_step_1.PsScanStep.Crop && photo !== null ? ((0, jsx_runtime_1.jsx)(ps_scan_crop_editor_1.PsScanCropEditor, { labels: labels, onAutoDetect: autoDetect, onChange: setCorners, onContinue: flatten, onRetake: retake, photo: photo })) : null, step === ps_scan_step_1.PsScanStep.Preview ? ((0, jsx_runtime_1.jsx)(ps_scan_preview_1.PsScanPreview, { error: error, isSaving: isAddingPage, labels: labels, multiPage: multiPage, onAdjust: adjust, onRetake: retake, onSave: save, formats: formats, preferredFormat: ps_scan_output_service_1.PsScanOutputService.preferred(pages.length + 1, formats), result: result })) : null, isCameraStep && pageLabels !== null && pages.length > 0 ? ((0, jsx_runtime_1.jsx)("div", { className: 'absolute inset-x-0 bottom-32 flex justify-center', children: (0, jsx_runtime_1.jsx)(ps_scan_page_strip_1.PsScanPageStrip, { labels: pageLabels, onRemove: removePage, pages: pages }) })) : null, isCameraStep && error !== '' ? ((0, jsx_runtime_1.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);
 };
 exports.PsDocumentScannerSheet = PsDocumentScannerSheet;

package/dist/components/ps-document-scanner.d.ts

@@ -1,2 +1,2 @@
 import type { PsDocumentScannerProps } from '../models/ps-document-scanner-props';
-export declare const PsDocumentScanner: ({ fileName, isOpen, jpegQuality, labels, maxDimension, onClose, onComplete, }: PsDocumentScannerProps) => import("react").JSX.Element | null;
+export declare const PsDocumentScanner: ({ fileName, formats, isMultiPage, isOpen, jpegQuality, labels, maxDimension, onClose, onComplete, pageLabels, }: PsDocumentScannerProps) => import("react").JSX.Element | null;

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

@@ -7,10 +7,10 @@ const ps_core_components_1 = require("@pallasoft/ps-core-components");
 const ps_document_scanner_labels_1 = require("../constants/ps-document-scanner-labels");
 const ps_scan_config_1 = require("../constants/ps-scan-config");
 const ps_document_scanner_loader_1 = require("./ps-document-scanner-loader");
-const PsDocumentScanner = ({ fileName = ps_scan_config_1.PsScanConfig.defaultFileName, isOpen, jpegQuality = ps_scan_config_1.PsScanConfig.defaultJpegQuality, labels, maxDimension = ps_scan_config_1.PsScanConfig.defaultMaxDimension, onClose, onComplete, }) => {
+const PsDocumentScanner = ({ fileName = ps_scan_config_1.PsScanConfig.defaultFileName, formats = ps_scan_config_1.PsScanConfig.formats, isMultiPage = false, isOpen, jpegQuality = ps_scan_config_1.PsScanConfig.defaultJpegQuality, labels, maxDimension = ps_scan_config_1.PsScanConfig.defaultMaxDimension, onClose, onComplete, pageLabels, }) => {
     const isHydrated = (0, ps_core_components_1.usePsHydrated)();
     if (!isOpen || !isHydrated)
         return null;
-    return ((0, jsx_runtime_1.jsx)(react_1.Suspense, { fallback: null, children: (0, jsx_runtime_1.jsx)(ps_document_scanner_loader_1.PsDocumentScannerLoader, { fileName: fileName, jpegQuality: jpegQuality, labels: { ...ps_document_scanner_labels_1.PsDocumentScannerLabels, ...labels }, maxDimension: maxDimension, onClose: onClose, onComplete: onComplete }) }));
+    return ((0, jsx_runtime_1.jsx)(react_1.Suspense, { fallback: null, children: (0, jsx_runtime_1.jsx)(ps_document_scanner_loader_1.PsDocumentScannerLoader, { fileName: fileName, formats: formats, jpegQuality: jpegQuality, labels: { ...ps_document_scanner_labels_1.PsDocumentScannerLabels, ...labels }, maxDimension: maxDimension, onClose: onClose, onComplete: onComplete, pageLabels: isMultiPage && pageLabels !== undefined ? pageLabels : null }) }));
 };
 exports.PsDocumentScanner = PsDocumentScanner;

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

@@ -3,31 +3,50 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.PsImageViewer = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
+const use_ps_drag_pan_1 = require("../hooks/use-ps-drag-pan");
+const ps_pan_service_1 = require("../services/ps-pan-service");
 const PsImageViewer = ({ file, labels, rotation, zoom }) => {
     const [offset, setOffset] = (0, react_1.useState)({ x: 0, y: 0 });
     const [hasFailed, setHasFailed] = (0, react_1.useState)(false);
-    const drag = (0, react_1.useRef)(null);
+    const pan = (0, react_1.useRef)(null);
+    const base = (0, react_1.useRef)({ x: 0, y: 0 });
+    const frame = (0, react_1.useRef)(0);
+    const pending = (0, react_1.useRef)({ x: 0, y: 0 });
     (0, react_1.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 });
+    (0, react_1.useEffect)(() => () => cancelAnimationFrame(frame.current), []);
+    const write = (next) => {
+        if (pan.current !== null)
+            pan.current.style.transform = ps_pan_service_1.PsPanService.translate(next);
     };
+    const handlers = (0, use_ps_drag_pan_1.usePsDragPan)({
+        activationDistance: 0,
+        isEnabled: zoom > 1,
+        isMouseOnly: false,
+        onEnd: (delta) => {
+            cancelAnimationFrame(frame.current);
+            frame.current = 0;
+            const next = ps_pan_service_1.PsPanService.add(base.current, delta);
+            write(next);
+            setOffset(next);
+        },
+        onMove: (delta) => {
+            pending.current = ps_pan_service_1.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 (0, jsx_runtime_1.jsx)("p", { className: 'm-auto text-sm text-white/70', children: labels.loadFailed });
-    return ((0, jsx_runtime_1.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: (0, jsx_runtime_1.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 ((0, jsx_runtime_1.jsx)("div", { className: `h-full w-full touch-none overflow-hidden ${zoom > 1 ? 'cursor-grab active:cursor-grabbing' : ''}`, ...handlers, children: (0, jsx_runtime_1.jsx)("div", { className: 'flex h-full w-full items-center justify-center', ref: pan, style: { transform: ps_pan_service_1.PsPanService.translate(offset) }, children: (0, jsx_runtime_1.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)` } }) }) }));
 };
 exports.PsImageViewer = PsImageViewer;

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

@@ -5,6 +5,7 @@ const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
 const ps_core_components_1 = require("@pallasoft/ps-core-components");
 const ps_file_viewer_config_1 = require("../constants/ps-file-viewer-config");
+const use_ps_drag_pan_1 = require("../hooks/use-ps-drag-pan");
 const ps_pdf_service_1 = require("../services/ps-pdf-service");
 const ps_pdf_page_1 = require("./ps-pdf-page");
 const ps_pdf_thumbnail_1 = require("./ps-pdf-thumbnail");
@@ -16,6 +17,22 @@ const PsPdfViewer = ({ activeMatch, file, labels, onMatchCount, pdfWorkerSrc, qu
     const [currentPage, setCurrentPage] = (0, react_1.useState)(1);
     const [frame, frameSize] = (0, ps_core_components_1.usePsElementSize)();
     const scroller = (0, react_1.useRef)(null);
+    const scrollStart = (0, react_1.useRef)({ x: 0, y: 0 });
+    const handlers = (0, use_ps_drag_pan_1.usePsDragPan)({
+        activationDistance: ps_file_viewer_config_1.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 };
+        },
+    });
     (0, react_1.useEffect)(() => {
         let isCurrent = true;
         let opened = null;
@@ -86,7 +103,7 @@ const PsPdfViewer = ({ activeMatch, file, labels, onMatchCount, pdfWorkerSrc, qu
         return Math.max(0.1, fit * zoom);
     }, [frameSize.width, pageWidth, zoom]);
     const pages = document === null ? [] : Array.from({ length: document.numPages }, (_, index) => index + 1);
-    return ((0, jsx_runtime_1.jsxs)("div", { className: 'flex h-full w-full min-w-0', children: [document !== null && document.numPages > 1 ? ((0, jsx_runtime_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) => ((0, jsx_runtime_1.jsx)(ps_pdf_thumbnail_1.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, (0, jsx_runtime_1.jsx)("div", { className: 'min-w-0 flex-1', ref: frame, children: hasFailed ? ((0, jsx_runtime_1.jsx)("p", { className: 'flex h-full items-center justify-center text-sm text-white/70', children: labels.loadFailed })) : document === null ? ((0, jsx_runtime_1.jsx)("div", { className: 'flex h-full items-center justify-center text-white', children: (0, jsx_runtime_1.jsx)(ps_core_components_1.PsSpinner, { color: 'current', size: 'large' }) })) : ((0, jsx_runtime_1.jsx)("div", { className: 'flex h-full flex-col items-center gap-4 overflow-auto px-6 py-6', onScroll: (event) => {
+    return ((0, jsx_runtime_1.jsxs)("div", { className: 'flex h-full w-full min-w-0', children: [document !== null && document.numPages > 1 ? ((0, jsx_runtime_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) => ((0, jsx_runtime_1.jsx)(ps_pdf_thumbnail_1.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, (0, jsx_runtime_1.jsx)("div", { className: 'min-w-0 flex-1', ref: frame, children: hasFailed ? ((0, jsx_runtime_1.jsx)("p", { className: 'flex h-full items-center justify-center text-sm text-white/70', children: labels.loadFailed })) : document === null ? ((0, jsx_runtime_1.jsx)("div", { className: 'flex h-full items-center justify-center text-white', children: (0, jsx_runtime_1.jsx)(ps_core_components_1.PsSpinner, { color: 'current', size: 'large' }) })) : ((0, jsx_runtime_1.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/components/ps-scan-camera-view.js

@@ -14,12 +14,12 @@ const ps_scan_viewfinder_overlay_1 = require("./ps-scan-viewfinder-overlay");
 const PsScanCameraView = ({ canTorch, detection, flashKey, isBusy, isReady, isTorchOn, labels, onCapture, onClose, onFile, onToggleTorch, videoRef, videoTarget, }) => {
     const [areaRef, area] = (0, ps_core_components_1.usePsElementSize)();
     const [video, setVideo] = (0, react_1.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 ((0, jsx_runtime_1.jsxs)("div", { className: 'relative h-full min-h-0 overflow-hidden bg-black text-white', children: [(0, jsx_runtime_1.jsxs)("div", { className: 'absolute inset-0', ref: areaRef, children: [(0, jsx_runtime_1.jsx)("video", { "aria-hidden": 'true', autoPlay: true, className: ps_design_system_1.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 ? ((0, jsx_runtime_1.jsx)(ps_scan_viewfinder_overlay_1.PsScanViewfinderOverlay, { area: area, quad: detection.quad, video: video })) : null] }), isReady ? null : ((0, jsx_runtime_1.jsxs)("div", { className: 'absolute inset-0 flex flex-col items-center justify-center gap-3 text-sm text-white/75', role: 'status', children: [(0, jsx_runtime_1.jsx)(ps_core_components_1.PsSpinner, { color: 'current', label: labels.cameraStarting, size: 'small' }), (0, jsx_runtime_1.jsx)("span", { children: labels.cameraStarting })] })), flashKey > 0 ? ((0, jsx_runtime_1.jsx)("div", { "aria-hidden": 'true', className: 'pointer-events-none absolute inset-0 bg-white animate-ps-fade-out' }, flashKey)) : null, (0, jsx_runtime_1.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: [(0, jsx_runtime_1.jsx)(ps_scan_icon_button_1.PsScanIconButton, { iconKey: ps_icons_1.PsIconKey.Close, label: labels.close, onClick: onClose }), (0, jsx_runtime_1.jsx)("div", { className: 'flex items-center gap-2', children: canTorch && isReady ? ((0, jsx_runtime_1.jsx)(ps_scan_icon_button_1.PsScanIconButton, { iconKey: ps_icons_1.PsIconKey.Flash, isPressed: isTorchOn, label: isTorchOn ? labels.torchOff : labels.torchOn, onClick: onToggleTorch })) : null })] }), isReady ? ((0, jsx_runtime_1.jsx)("div", { className: 'absolute inset-x-0 top-[calc(max(1rem,env(safe-area-inset-top))+3.75rem)] flex justify-center px-4', children: (0, jsx_runtime_1.jsx)("p", { "aria-live": 'polite', className: ps_scan_chrome_classes_1.PsScanChromeClasses.pill, children: hint }) })) : null, (0, jsx_runtime_1.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: [(0, jsx_runtime_1.jsx)("div", { className: 'flex justify-start', children: (0, jsx_runtime_1.jsx)(ps_scan_photo_button_1.PsScanPhotoButton, { isIconOnly: true, label: labels.choosePhoto, onFile: onFile }) }), (0, jsx_runtime_1.jsx)(ps_scan_shutter_1.PsScanShutter, { disabled: !isReady || isBusy, label: labels.capture, onCapture: onCapture }), (0, jsx_runtime_1.jsx)("span", { "aria-hidden": 'true' })] })] }));
+    return ((0, jsx_runtime_1.jsxs)("div", { className: 'relative h-full min-h-0 overflow-hidden bg-black text-white', children: [(0, jsx_runtime_1.jsxs)("div", { className: 'absolute inset-0', ref: areaRef, children: [(0, jsx_runtime_1.jsx)("video", { "aria-hidden": 'true', autoPlay: true, className: ps_design_system_1.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 ? ((0, jsx_runtime_1.jsx)(ps_scan_viewfinder_overlay_1.PsScanViewfinderOverlay, { area: area, hasQuad: detection.hasQuad, quadRef: detection.quadRef, video: video })) : null] }), isReady ? null : ((0, jsx_runtime_1.jsxs)("div", { className: 'absolute inset-0 flex flex-col items-center justify-center gap-3 text-sm text-white/75', role: 'status', children: [(0, jsx_runtime_1.jsx)(ps_core_components_1.PsSpinner, { color: 'current', label: labels.cameraStarting, size: 'small' }), (0, jsx_runtime_1.jsx)("span", { children: labels.cameraStarting })] })), flashKey > 0 ? ((0, jsx_runtime_1.jsx)("div", { "aria-hidden": 'true', className: 'pointer-events-none absolute inset-0 bg-white animate-ps-fade-out' }, flashKey)) : null, (0, jsx_runtime_1.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: [(0, jsx_runtime_1.jsx)(ps_scan_icon_button_1.PsScanIconButton, { iconKey: ps_icons_1.PsIconKey.Close, label: labels.close, onClick: onClose }), (0, jsx_runtime_1.jsx)("div", { className: 'flex items-center gap-2', children: canTorch && isReady ? ((0, jsx_runtime_1.jsx)(ps_scan_icon_button_1.PsScanIconButton, { iconKey: ps_icons_1.PsIconKey.Flash, isPressed: isTorchOn, label: isTorchOn ? labels.torchOff : labels.torchOn, onClick: onToggleTorch })) : null })] }), isReady ? ((0, jsx_runtime_1.jsx)("div", { className: 'absolute inset-x-0 top-[calc(max(1rem,env(safe-area-inset-top))+3.75rem)] flex justify-center px-4', children: (0, jsx_runtime_1.jsx)("p", { "aria-live": 'polite', className: ps_scan_chrome_classes_1.PsScanChromeClasses.pill, children: hint }) })) : null, (0, jsx_runtime_1.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: [(0, jsx_runtime_1.jsx)("div", { className: 'flex justify-start', children: (0, jsx_runtime_1.jsx)(ps_scan_photo_button_1.PsScanPhotoButton, { isIconOnly: true, label: labels.choosePhoto, onFile: onFile }) }), (0, jsx_runtime_1.jsx)(ps_scan_shutter_1.PsScanShutter, { disabled: !isReady || isBusy, label: labels.capture, onCapture: onCapture }), (0, jsx_runtime_1.jsx)("span", { "aria-hidden": 'true' })] })] }));
 };
 exports.PsScanCameraView = PsScanCameraView;

package/dist/components/ps-scan-page-strip.d.ts

@@ -0,0 +1,8 @@
+import type { PsDocumentScannerPageLabels } from '../models/ps-document-scanner-page-labels';
+import type { PsScanPage } from '../models/ps-scan-page';
+export interface PsScanPageStripProps {
+    labels: PsDocumentScannerPageLabels;
+    onRemove: (id: number) => void;
+    pages: PsScanPage[];
+}
+export declare const PsScanPageStrip: ({ labels, onRemove, pages }: PsScanPageStripProps) => import("react").JSX.Element;

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

@@ -0,0 +1,8 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.PsScanPageStrip = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const ps_icons_1 = require("@pallasoft/ps-icons");
+const ps_scan_template_service_1 = require("../services/ps-scan-template-service");
+const PsScanPageStrip = ({ labels, onRemove, pages }) => ((0, jsx_runtime_1.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) => ((0, jsx_runtime_1.jsxs)("li", { className: 'relative shrink-0', children: [(0, jsx_runtime_1.jsx)("img", { alt: ps_scan_template_service_1.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 }), (0, jsx_runtime_1.jsx)("button", { "aria-label": ps_scan_template_service_1.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: (0, jsx_runtime_1.jsx)(ps_icons_1.PsIcon, { "aria-hidden": 'true', className: 'size-4', iconKey: ps_icons_1.PsIconKey.Close }) })] }, page.id))) }));
+exports.PsScanPageStrip = PsScanPageStrip;

package/dist/components/ps-scan-preview.d.ts

@@ -1,12 +1,18 @@
 import { PsDocumentScannerLabels } from '../constants/ps-document-scanner-labels';
+import { PsScanFormat } from '../constants/ps-scan-format';
 import type { PsLabelSet } from '../models/ps-label-set';
+import type { PsScanMultiPage } from '../models/ps-scan-multi-page';
 import type { PsScanResult } from '../models/ps-scan-result';
 export interface PsScanPreviewProps {
     error: string;
     labels: PsLabelSet<typeof PsDocumentScannerLabels>;
+    formats: readonly PsScanFormat[];
+    isSaving: boolean;
+    multiPage?: PsScanMultiPage;
     onAdjust: () => void;
     onRetake: () => void;
-    onUse: () => void;
+    onSave: (format: PsScanFormat) => void;
+    preferredFormat: PsScanFormat;
     result: PsScanResult | null;
 }
-export declare const PsScanPreview: ({ error, labels, onAdjust, onRetake, onUse, result, }: PsScanPreviewProps) => import("react").JSX.Element;
+export declare const PsScanPreview: ({ error, formats, isSaving, labels, multiPage, onAdjust, onRetake, onSave, preferredFormat, result, }: PsScanPreviewProps) => import("react").JSX.Element;

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

@@ -4,7 +4,12 @@ exports.PsScanPreview = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const ps_core_components_1 = require("@pallasoft/ps-core-components");
 const ps_icons_1 = require("@pallasoft/ps-icons");
+const ps_scan_format_1 = require("../constants/ps-scan-format");
+const ps_scan_template_service_1 = require("../services/ps-scan-template-service");
 const ps_scan_button_1 = require("./ps-scan-button");
 const ps_scan_icon_button_1 = require("./ps-scan-icon-button");
-const PsScanPreview = ({ error, labels, onAdjust, onRetake, onUse, result, }) => ((0, jsx_runtime_1.jsxs)("div", { className: 'flex h-full min-h-0 flex-col bg-black text-white animate-ps-fade-in', children: [(0, jsx_runtime_1.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: [(0, jsx_runtime_1.jsx)(ps_scan_icon_button_1.PsScanIconButton, { iconKey: ps_icons_1.PsIconKey.Crop, label: labels.cropTitle, onClick: onAdjust }), (0, jsx_runtime_1.jsx)("h2", { className: 'truncate text-center text-base font-semibold', children: labels.previewTitle }), (0, jsx_runtime_1.jsx)("span", { "aria-hidden": 'true' })] }), (0, jsx_runtime_1.jsx)("div", { className: 'flex min-h-0 flex-1 items-center justify-center px-6 py-4', children: result === null ? ((0, jsx_runtime_1.jsxs)("div", { className: 'flex flex-col items-center gap-3 text-sm text-white/75', role: 'status', children: [(0, jsx_runtime_1.jsx)(ps_core_components_1.PsSpinner, { color: 'current', label: labels.preparing, size: 'small' }), (0, jsx_runtime_1.jsx)("span", { children: labels.preparing })] })) : ((0, jsx_runtime_1.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 : ((0, jsx_runtime_1.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 })), (0, jsx_runtime_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: [(0, jsx_runtime_1.jsx)(ps_scan_button_1.PsScanButton, { isLarge: true, onClick: onRetake, children: labels.retake }), (0, jsx_runtime_1.jsx)(ps_scan_button_1.PsScanButton, { disabled: result === null, isLarge: true, isPrimary: true, leadingIcon: (0, jsx_runtime_1.jsx)(ps_icons_1.PsIcon, { "aria-hidden": 'true', className: 'size-4', iconKey: ps_icons_1.PsIconKey.Check }), onClick: onUse, children: labels.useScan })] })] }));
+const ps_scan_page_strip_1 = require("./ps-scan-page-strip");
+const PsScanPreview = ({ error, formats, isSaving, labels, multiPage, onAdjust, onRetake, onSave, preferredFormat, result, }) => ((0, jsx_runtime_1.jsxs)("div", { className: 'flex h-full min-h-0 flex-col bg-black text-white animate-ps-fade-in', children: [(0, jsx_runtime_1.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: [(0, jsx_runtime_1.jsx)(ps_scan_icon_button_1.PsScanIconButton, { iconKey: ps_icons_1.PsIconKey.Crop, label: labels.cropTitle, onClick: onAdjust }), (0, jsx_runtime_1.jsx)("h2", { className: 'truncate text-center text-base font-semibold', children: labels.previewTitle }), (0, jsx_runtime_1.jsx)("span", { "aria-hidden": 'true' })] }), (0, jsx_runtime_1.jsx)("div", { className: 'flex min-h-0 flex-1 items-center justify-center px-6 py-4', children: result === null ? ((0, jsx_runtime_1.jsxs)("div", { className: 'flex flex-col items-center gap-3 text-sm text-white/75', role: 'status', children: [(0, jsx_runtime_1.jsx)(ps_core_components_1.PsSpinner, { color: 'current', label: labels.preparing, size: 'small' }), (0, jsx_runtime_1.jsx)("span", { children: labels.preparing })] })) : ((0, jsx_runtime_1.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 : ((0, jsx_runtime_1.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 : ((0, jsx_runtime_1.jsxs)("div", { className: 'shrink-0', children: [(0, jsx_runtime_1.jsx)(ps_scan_page_strip_1.PsScanPageStrip, { labels: multiPage.labels, onRemove: multiPage.onRemovePage, pages: multiPage.pages }), (0, jsx_runtime_1.jsx)("p", { className: 'text-center text-sm text-white/75', children: ps_scan_template_service_1.PsScanTemplateService.fill(multiPage.labels.pageCount, {
+                        count: multiPage.pages.length + 1,
+                    }) })] })), (0, jsx_runtime_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 : ((0, jsx_runtime_1.jsx)(ps_scan_button_1.PsScanButton, { className: 'col-span-2', disabled: result === null, isLoading: multiPage.isBusy, isLarge: true, leadingIcon: (0, jsx_runtime_1.jsx)(ps_icons_1.PsIcon, { "aria-hidden": 'true', className: 'size-4', iconKey: ps_icons_1.PsIconKey.Plus }), onClick: multiPage.onAddPage, children: multiPage.labels.addPage })), formats.includes(ps_scan_format_1.PsScanFormat.Pdf) ? ((0, jsx_runtime_1.jsx)(ps_scan_button_1.PsScanButton, { className: formats.length === 1 ? 'col-span-2' : undefined, disabled: result === null, isLarge: true, isLoading: isSaving, isPrimary: preferredFormat === ps_scan_format_1.PsScanFormat.Pdf, leadingIcon: (0, jsx_runtime_1.jsx)(ps_icons_1.PsIcon, { "aria-hidden": 'true', className: 'size-4', iconKey: ps_icons_1.PsIconKey.File }), onClick: () => onSave(ps_scan_format_1.PsScanFormat.Pdf), children: labels.saveAsPdf })) : null, formats.includes(ps_scan_format_1.PsScanFormat.Png) ? ((0, jsx_runtime_1.jsx)(ps_scan_button_1.PsScanButton, { className: formats.length === 1 ? 'col-span-2' : undefined, disabled: result === null, isLarge: true, isLoading: isSaving, isPrimary: preferredFormat === ps_scan_format_1.PsScanFormat.Png, leadingIcon: (0, jsx_runtime_1.jsx)(ps_icons_1.PsIcon, { "aria-hidden": 'true', className: 'size-4', iconKey: ps_icons_1.PsIconKey.Image }), onClick: () => onSave(ps_scan_format_1.PsScanFormat.Png), children: labels.saveAsImages })) : null, (0, jsx_runtime_1.jsx)(ps_scan_button_1.PsScanButton, { className: 'col-span-2', disabled: isSaving, isLarge: true, onClick: onRetake, children: labels.retake })] })] }));
 exports.PsScanPreview = PsScanPreview;

package/dist/components/ps-scan-viewfinder-overlay.d.ts

@@ -1,8 +1,10 @@
+import type { RefObject } from 'react';
 import type { PsPageSize } from '../models/ps-page-size';
 import type { PsScanQuad } from '../models/ps-scan-quad';
 export interface PsScanViewfinderOverlayProps {
     area: PsPageSize;
-    quad: PsScanQuad | null;
+    hasQuad: boolean;
+    quadRef: RefObject<PsScanQuad | null>;
     video: PsPageSize;
 }
-export declare const PsScanViewfinderOverlay: ({ area, quad, video }: PsScanViewfinderOverlayProps) => import("react").JSX.Element | null;
+export declare const PsScanViewfinderOverlay: ({ area, hasQuad, quadRef, video, }: PsScanViewfinderOverlayProps) => import("react").JSX.Element | null;

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

@@ -3,13 +3,15 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.PsScanViewfinderOverlay = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const ps_scan_config_1 = require("../constants/ps-scan-config");
+const use_ps_scan_quad_tween_1 = require("../hooks/use-ps-scan-quad-tween");
 const ps_scan_geometry_service_1 = require("../services/ps-scan-geometry-service");
-const PsScanViewfinderOverlay = ({ area, quad, video }) => {
-    if (area.width <= 0 || area.height <= 0)
-        return null;
+const PsScanViewfinderOverlay = ({ area, hasQuad, quadRef, video, }) => {
     const box = ps_scan_geometry_service_1.PsScanGeometryService.cover(area, video);
     const left = (area.width - box.width) / 2;
     const top = (area.height - box.height) / 2;
+    const polygon = (0, use_ps_scan_quad_tween_1.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 * ps_scan_config_1.PsScanConfig.guideHeightRatio, (area.width * ps_scan_config_1.PsScanConfig.guideWidthRatio) / ps_scan_config_1.PsScanConfig.guideAspect);
     const frameWidth = frameHeight * ps_scan_config_1.PsScanConfig.guideAspect;
     const frameLeft = (area.width - frameWidth) / 2;
@@ -21,8 +23,6 @@ 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 ((0, jsx_runtime_1.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 ? ((0, jsx_runtime_1.jsx)("path", { className: 'stroke-white/75 animate-ps-fade-in', d: corners, fill: 'none', strokeLinecap: 'round', strokeLinejoin: 'round', strokeWidth: '4' })) : ((0, jsx_runtime_1.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 ((0, jsx_runtime_1.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 ? ((0, jsx_runtime_1.jsx)("path", { className: 'stroke-white/75 animate-ps-fade-in', d: corners, fill: 'none', strokeLinecap: 'round', strokeLinejoin: 'round', strokeWidth: '4' })) : ((0, jsx_runtime_1.jsx)("polygon", { className: 'fill-primary/10 stroke-primary', ref: polygon, strokeLinejoin: 'round', strokeWidth: '3' })) }));
 };
 exports.PsScanViewfinderOverlay = PsScanViewfinderOverlay;

package/dist/constants/ps-document-scanner-labels.d.ts

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

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

@@ -44,11 +44,12 @@ exports.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/constants/ps-file-viewer-config.d.ts

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

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

@@ -2,6 +2,7 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.PsFileViewerConfig = void 0;
 exports.PsFileViewerConfig = {
+    dragActivationDistance: 4,
     maxZoom: 4,
     minZoom: 0.25,
     pdfBaseScale: 1.4,

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

@@ -20,6 +20,7 @@ export declare const PsScanConfig: {
     readonly detectMinAreaRatio: 0.1;
     readonly detectMinQuadFill: 0.88;
     readonly detectMinSideRatio: 0.06;
+    readonly formats: readonly ["pdf", "png"];
     readonly guideArm: 36;
     readonly guideArmRatio: 0.18;
     readonly guideAspect: 0.72;
@@ -27,14 +28,20 @@ export declare const PsScanConfig: {
     readonly guideLift: 0.03;
     readonly guideWidthRatio: 0.76;
     readonly liveDeadzone: 0.006;
-    readonly liveDetectIntervalMs: 200;
+    readonly liveCloseRadii: readonly [2];
+    readonly liveDetectMinIntervalMs: 70;
     readonly liveDetectMaxDimension: 280;
-    readonly liveMissLimit: 3;
-    readonly liveSmoothing: 0.45;
+    readonly liveMissLimit: 1;
+    readonly liveSmoothing: 0.68;
+    readonly liveTweenMs: 55;
     readonly loupeOffset: 72;
     readonly loupeSize: 112;
     readonly loupeZoom: 2.5;
     readonly minCornerGap: 0.02;
+    readonly multiPageMaxDimension: 2400;
+    readonly jpegType: "image/jpeg";
+    readonly pdfType: "application/pdf";
+    readonly pngType: "image/png";
     readonly polygonEpsilons: readonly [0.008, 0.012, 0.018, 0.026, 0.036, 0.05, 0.07];
     readonly torchConstraint: "torch";
     readonly warpChunkPixels: 400000;

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

@@ -1,6 +1,7 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.PsScanConfig = void 0;
+const ps_scan_format_1 = require("./ps-scan-format");
 exports.PsScanConfig = {
     cameraPermission: 'camera',
     cannyHighPercentile: 0.9,
@@ -23,6 +24,7 @@ exports.PsScanConfig = {
     detectMinAreaRatio: 0.1,
     detectMinQuadFill: 0.88,
     detectMinSideRatio: 0.06,
+    formats: [ps_scan_format_1.PsScanFormat.Pdf, ps_scan_format_1.PsScanFormat.Png],
     guideArm: 36,
     guideArmRatio: 0.18,
     guideAspect: 0.72,
@@ -30,14 +32,20 @@ exports.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/constants/ps-scan-detect-profiles.d.ts

@@ -0,0 +1,10 @@
+export declare const PsScanDetectProfiles: {
+    readonly full: {
+        readonly closeRadii: readonly [1, 2, 4];
+        readonly isYielding: true;
+    };
+    readonly live: {
+        readonly closeRadii: readonly [2];
+        readonly isYielding: false;
+    };
+};

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

@@ -0,0 +1,8 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.PsScanDetectProfiles = void 0;
+const ps_scan_config_1 = require("./ps-scan-config");
+exports.PsScanDetectProfiles = {
+    full: { closeRadii: ps_scan_config_1.PsScanConfig.closeRadii, isYielding: true },
+    live: { closeRadii: ps_scan_config_1.PsScanConfig.liveCloseRadii, isYielding: false },
+};

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

@@ -0,0 +1,5 @@
+export declare const PsScanFormat: {
+    readonly Pdf: "pdf";
+    readonly Png: "png";
+};
+export type PsScanFormat = (typeof PsScanFormat)[keyof typeof PsScanFormat];

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

@@ -0,0 +1,7 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.PsScanFormat = void 0;
+exports.PsScanFormat = {
+    Pdf: 'pdf',
+    Png: 'png',
+};