@pallasoft/ps-file-components 1.5.0 → 2.0.1

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

@@ -4,27 +4,18 @@ import { PsSpinner, usePsElementSize } from '@pallasoft/ps-core-components';
 import { PallasoftClassNameService } from '@pallasoft/ps-design-system';
 import { PsIconKey } from '@pallasoft/ps-icons';
 import { PsScanChromeClasses } from '../constants/ps-scan-chrome-classes';
-import { PsScanTemplateService } from '../services/ps-scan-template-service';
-import { PsScanButton } from './ps-scan-button';
 import { PsScanIconButton } from './ps-scan-icon-button';
-import { PsScanPageStack } from './ps-scan-page-stack';
 import { PsScanPhotoButton } from './ps-scan-photo-button';
 import { PsScanShutter } from './ps-scan-shutter';
 import { PsScanViewfinderOverlay } from './ps-scan-viewfinder-overlay';
-export const PsScanCameraView = ({ canTorch, detection, flashKey, isAuto, isBusy, isFull, isMultiple, isReady, isTorchOn, labels, lastPreview, onCapture, onClose, onDone, onFiles, onToggleAuto, onToggleTorch, pageCount, videoRef, videoTarget, }) => {
+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 = isFull
-        ? labels.maxPages
-        : detection.quad === null
-            ? labels.hintFind
-            : isAuto
-                ? labels.hintHold
-                : labels.hintFound;
+    const hint = detection.quad === null ? labels.hintFind : labels.hintFound;
     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 }), _jsxs("div", { className: 'flex items-center gap-2', children: [canTorch && isReady ? (_jsx(PsScanIconButton, { iconKey: PsIconKey.Flash, isPressed: isTorchOn, label: isTorchOn ? labels.torchOff : labels.torchOn, onClick: onToggleTorch })) : null, _jsx("button", { "aria-label": labels.autoCapture, "aria-pressed": isAuto, className: PallasoftClassNameService.merge(PsScanChromeClasses.button, 'border-transparent', isAuto ? PsScanChromeClasses.iconOn : PsScanChromeClasses.iconOff), onClick: onToggleAuto, title: labels.autoCapture, type: 'button', children: labels.auto })] })] }), isReady ? (_jsx("div", { className: 'absolute inset-x-0 top-[calc(max(1rem,env(safe-area-inset-top))+3.75rem)] flex justify-center px-4', children: _jsx("p", { "aria-live": 'polite', className: PsScanChromeClasses.pill, children: hint }) })) : null, _jsxs("div", { className: 'absolute inset-x-0 bottom-0 grid grid-cols-[1fr_auto_1fr] items-center gap-4 bg-gradient-to-t from-black/80 to-transparent px-5 pb-[max(1.5rem,env(safe-area-inset-bottom))] pt-12', children: [_jsx("div", { className: 'flex justify-start', children: pageCount > 0 ? (_jsx(PsScanPageStack, { count: pageCount, label: PsScanTemplateService.fill(labels.viewPages, { count: pageCount }), onOpen: onDone, preview: lastPreview })) : (_jsx(PsScanPhotoButton, { isIconOnly: true, isMultiple: isMultiple, label: labels.choosePhotos, onFiles: onFiles })) }), _jsx(PsScanShutter, { disabled: !isReady || isFull || isBusy, label: labels.capture, onCapture: onCapture, progress: detection.progress }), _jsx("div", { className: 'flex justify-end', children: pageCount > 0 ? (_jsx(PsScanButton, { isPrimary: true, onClick: onDone, children: labels.done })) : null })] })] }));
+    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' })] })] }));
 };

package/dist/esm/components/ps-scan-crop-editor.js

@@ -9,19 +9,19 @@ import { PsScanGeometryService } from '../services/ps-scan-geometry-service';
 import { PsScanButton } from './ps-scan-button';
 import { PsScanIconButton } from './ps-scan-icon-button';
 import { PsScanLoupe } from './ps-scan-loupe';
-export const PsScanCropEditor = ({ labels, onAutoDetect, onChange, onKeep, onRetake, page, }) => {
+export const PsScanCropEditor = ({ labels, onAutoDetect, onChange, onContinue, onRetake, photo, }) => {
     const [areaRef, area] = usePsElementSize();
     const stageRef = useRef(null);
     const [activeIndex, setActiveIndex] = useState(null);
     const hintId = 'ps-scan-crop-hint';
-    const size = PsScanGeometryService.fit(area, { height: page.height, width: page.width });
+    const size = PsScanGeometryService.fit(area, { height: photo.height, width: photo.width });
     const cornerLabels = [
         labels.cornerTopLeft,
         labels.cornerTopRight,
         labels.cornerBottomRight,
         labels.cornerBottomLeft,
     ];
-    const outline = page.corners
+    const outline = photo.corners
         .map((point) => `${point.x * size.width},${point.y * size.height}`)
         .join(' L');
     const move = (index, event) => {
@@ -33,7 +33,7 @@ export const PsScanCropEditor = ({ labels, onAutoDetect, onChange, onKeep, onRet
             x: (event.clientX - rect.left) / rect.width,
             y: (event.clientY - rect.top) / rect.height,
         });
-        const next = page.corners.map((corner, at) => (at === index ? point : corner));
+        const next = photo.corners.map((corner, at) => (at === index ? point : corner));
         if (PsScanGeometryService.isUsable(next))
             onChange(next);
     };
@@ -53,13 +53,13 @@ export const PsScanCropEditor = ({ labels, onAutoDetect, onChange, onKeep, onRet
         if (delta === undefined)
             return;
         event.preventDefault();
-        onChange(PsScanGeometryService.nudge(page.corners, index, delta[0], delta[1]));
+        onChange(PsScanGeometryService.nudge(photo.corners, index, delta[0], delta[1]));
     };
-    return (_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("span", { "aria-hidden": 'true' }), _jsx("h2", { className: 'truncate text-center text-base font-semibold', children: labels.cropTitle }), _jsx(PsScanIconButton, { iconKey: PsIconKey.Spark, label: labels.autoDetect, onClick: onAutoDetect })] }), _jsx("p", { className: 'shrink-0 px-6 text-center text-sm text-white/65', id: hintId, children: labels.cropHint }), _jsx("div", { className: 'flex min-h-0 flex-1 items-center justify-center px-8 py-6', ref: areaRef, children: _jsxs("div", { className: 'relative touch-none select-none', ref: stageRef, style: { height: size.height, width: size.width }, children: [_jsx("img", { alt: '', className: 'absolute inset-0 size-full rounded-sm', draggable: false, src: page.sourceUrl }), _jsxs("svg", { "aria-hidden": 'true', className: 'pointer-events-none absolute inset-0 size-full overflow-visible', viewBox: `0 0 ${Math.max(1, size.width)} ${Math.max(1, size.height)}`, children: [_jsx("path", { className: 'fill-black/55', d: `M0 0H${size.width}V${size.height}H0Z M${outline}Z`, fillRule: 'evenodd' }), _jsx("path", { className: 'fill-none stroke-primary', d: `M${outline}Z`, strokeLinejoin: 'round', strokeWidth: '2.5' })] }), PsScanCornerOrder.map((key, index) => (_jsx("button", { "aria-describedby": hintId, "aria-label": cornerLabels[index], className: 'ps-focus-ring absolute flex size-12 -translate-x-1/2 -translate-y-1/2 cursor-grab touch-none items-center justify-center rounded-full active:cursor-grabbing', onKeyDown: (event) => nudge(index, event), onPointerCancel: release, onPointerDown: (event) => {
+    return (_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("span", { "aria-hidden": 'true' }), _jsx("h2", { className: 'truncate text-center text-base font-semibold', children: labels.cropTitle }), _jsx(PsScanIconButton, { iconKey: PsIconKey.Spark, label: labels.autoDetect, onClick: onAutoDetect })] }), _jsxs("p", { className: 'shrink-0 px-6 text-center text-sm text-white/65', id: hintId, children: [photo.isDetected ? labels.edgesFound : labels.edgesNotFound, " ", labels.cropHint] }), _jsx("div", { className: 'flex min-h-0 flex-1 items-center justify-center px-8 py-6', ref: areaRef, children: _jsxs("div", { className: 'relative touch-none select-none', ref: stageRef, style: { height: size.height, width: size.width }, children: [_jsx("img", { alt: '', className: 'absolute inset-0 size-full rounded-sm', draggable: false, src: photo.sourceUrl }), _jsxs("svg", { "aria-hidden": 'true', className: 'pointer-events-none absolute inset-0 size-full overflow-visible', viewBox: `0 0 ${Math.max(1, size.width)} ${Math.max(1, size.height)}`, children: [_jsx("path", { className: 'fill-black/55', d: `M0 0H${size.width}V${size.height}H0Z M${outline}Z`, fillRule: 'evenodd' }), _jsx("path", { className: 'fill-none stroke-primary', d: `M${outline}Z`, strokeLinejoin: 'round', strokeWidth: '2.5' })] }), PsScanCornerOrder.map((key, index) => (_jsx("button", { "aria-describedby": hintId, "aria-label": cornerLabels[index], className: 'ps-focus-ring absolute flex size-11 -translate-x-1/2 -translate-y-1/2 cursor-grab touch-none items-center justify-center rounded-full active:cursor-grabbing', onKeyDown: (event) => nudge(index, event), onPointerCancel: release, onPointerDown: (event) => {
                                 event.currentTarget.setPointerCapture(event.pointerId);
                                 setActiveIndex(index);
                             }, onPointerMove: (event) => move(index, event), onPointerUp: release, style: {
-                                left: `${page.corners[index].x * 100}%`,
-                                top: `${page.corners[index].y * 100}%`,
-                            }, type: 'button', children: _jsx("span", { className: PallasoftClassNameService.merge('size-6 rounded-full border-[3px] border-white bg-primary shadow-lg transition-transform duration-150', activeIndex === index ? 'scale-125' : '') }) }, key))), activeIndex === null ? null : (_jsx(PsScanLoupe, { corners: page.corners, point: page.corners[activeIndex], source: page.sourceUrl, stage: size }))] }) }), _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, { isLarge: true, isPrimary: true, onClick: onKeep, children: labels.keepScan })] })] }));
+                                left: `${photo.corners[index].x * 100}%`,
+                                top: `${photo.corners[index].y * 100}%`,
+                            }, type: 'button', children: _jsx("span", { className: PallasoftClassNameService.merge('size-6 rounded-full border-[3px] border-white bg-primary shadow-lg transition-transform duration-150', activeIndex === index ? 'scale-125' : '') }) }, key))), activeIndex === null ? null : (_jsx(PsScanLoupe, { corners: photo.corners, point: photo.corners[activeIndex], source: photo.sourceUrl, stage: size }))] }) }), _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, { isLarge: true, isPrimary: true, onClick: onContinue, children: labels.continue })] })] }));
 };

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

@@ -6,7 +6,7 @@ import { PsScanButton } from './ps-scan-button';
 import { PsScanDeniedSteps } from './ps-scan-denied-steps';
 import { PsScanIllustration } from './ps-scan-illustration';
 import { PsScanPhotoButton } from './ps-scan-photo-button';
-export const PsScanPermissionView = ({ isMultiple, labels, onAllow, onFiles, status, }) => {
+export const PsScanPermissionView = ({ labels, onAllow, onFile, status, }) => {
     if (status === PsScanCameraStatus.Checking || status === PsScanCameraStatus.Starting)
         return (_jsxs("div", { className: 'flex h-full 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 })] }));
     const screens = {
@@ -40,5 +40,5 @@ export const PsScanPermissionView = ({ isMultiple, labels, onAllow, onFiles, sta
     const screen = screens[status];
     const isPrimer = status === PsScanCameraStatus.Prompt;
     const canRetry = status === PsScanCameraStatus.Denied || status === PsScanCameraStatus.Busy;
-    return (_jsx("div", { className: 'flex h-full min-h-0 flex-col overflow-y-auto', children: _jsxs("div", { className: 'm-auto flex w-full max-w-sm flex-col items-center gap-6 px-6 pb-[max(1.5rem,env(safe-area-inset-bottom))] pt-20 text-center animate-ps-slide-up', children: [isPrimer ? (_jsx(PsScanIllustration, {})) : (_jsx("span", { className: 'flex size-20 items-center justify-center rounded-full bg-white/10 text-white', children: _jsx(PsIcon, { "aria-hidden": 'true', className: 'size-9', iconKey: screen.iconKey }) })), _jsxs("div", { className: 'flex flex-col gap-2', children: [_jsx("h2", { className: 'text-xl font-semibold leading-tight text-white sm:text-2xl', children: screen.title }), _jsx("p", { className: 'text-sm leading-6 text-white/70', children: screen.body })] }), status === PsScanCameraStatus.Denied ? _jsx(PsScanDeniedSteps, { labels: labels }) : null, _jsxs("div", { className: 'flex w-full flex-col gap-3', children: [isPrimer || canRetry ? (_jsx(PsScanButton, { className: 'w-full', isLarge: true, isPrimary: true, leadingIcon: isPrimer ? (_jsx(PsIcon, { "aria-hidden": 'true', className: 'size-4', iconKey: PsIconKey.Camera })) : undefined, onClick: onAllow, children: isPrimer ? labels.allowCamera : labels.tryAgain })) : null, _jsx(PsScanPhotoButton, { className: 'w-full', isMultiple: isMultiple, label: labels.choosePhoto, onFiles: onFiles })] })] }) }));
+    return (_jsx("div", { className: 'flex h-full min-h-0 flex-col overflow-y-auto', children: _jsxs("div", { className: 'm-auto flex w-full max-w-sm flex-col items-center gap-6 px-6 pb-[max(1.5rem,env(safe-area-inset-bottom))] pt-20 text-center animate-ps-slide-up', children: [isPrimer ? (_jsx(PsScanIllustration, {})) : (_jsx("span", { className: 'flex size-20 items-center justify-center rounded-full bg-white/10 text-white', children: _jsx(PsIcon, { "aria-hidden": 'true', className: 'size-9', iconKey: screen.iconKey }) })), _jsxs("div", { className: 'flex flex-col gap-2', children: [_jsx("h2", { className: 'text-xl font-semibold leading-tight text-white sm:text-2xl', children: screen.title }), _jsx("p", { className: 'text-sm leading-6 text-white/70', children: screen.body })] }), status === PsScanCameraStatus.Denied ? _jsx(PsScanDeniedSteps, { labels: labels }) : null, _jsxs("div", { className: 'flex w-full flex-col gap-3', children: [isPrimer || canRetry ? (_jsx(PsScanButton, { className: 'w-full', isLarge: true, isPrimary: true, leadingIcon: isPrimer ? (_jsx(PsIcon, { "aria-hidden": 'true', className: 'size-4', iconKey: PsIconKey.Camera })) : undefined, onClick: onAllow, children: isPrimer ? labels.allowCamera : labels.tryAgain })) : null, _jsx(PsScanPhotoButton, { className: 'w-full', label: labels.choosePhoto, onFile: onFile })] })] }) }));
 };

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

@@ -3,14 +3,14 @@ import { useRef } from 'react';
 import { PsIcon, PsIconKey } from '@pallasoft/ps-icons';
 import { PsScanButton } from './ps-scan-button';
 import { PsScanIconButton } from './ps-scan-icon-button';
-export const PsScanPhotoButton = ({ className, isIconOnly = false, isMultiple, label, onFiles, }) => {
+export const PsScanPhotoButton = ({ className, isIconOnly = false, label, onFile, }) => {
     const input = useRef(null);
     const open = () => input.current?.click();
     const onChange = (event) => {
-        const files = Array.from(event.target.files === null ? [] : event.target.files);
+        const file = event.target.files === null ? undefined : event.target.files[0];
         event.target.value = '';
-        if (files.length > 0)
-            onFiles(files);
+        if (file !== undefined)
+            onFile(file);
     };
-    return (_jsxs(_Fragment, { children: [isIconOnly ? (_jsx(PsScanIconButton, { className: className, iconKey: PsIconKey.Image, label: label, onClick: open })) : (_jsx(PsScanButton, { className: className, isLarge: true, leadingIcon: _jsx(PsIcon, { "aria-hidden": 'true', className: 'size-4', iconKey: PsIconKey.Image }), onClick: open, children: label })), _jsx("input", { accept: 'image/*', "aria-hidden": 'true', className: 'sr-only', multiple: isMultiple, onChange: onChange, ref: input, tabIndex: -1, type: 'file' })] }));
+    return (_jsxs(_Fragment, { children: [isIconOnly ? (_jsx(PsScanIconButton, { className: className, iconKey: PsIconKey.Image, label: label, onClick: open })) : (_jsx(PsScanButton, { className: className, isLarge: true, leadingIcon: _jsx(PsIcon, { "aria-hidden": 'true', className: 'size-4', iconKey: PsIconKey.Image }), onClick: open, children: label })), _jsx("input", { accept: 'image/*', "aria-hidden": 'true', className: 'sr-only', onChange: onChange, ref: input, tabIndex: -1, type: 'file' })] }));
 };

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

@@ -0,0 +1,6 @@
+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 { 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 })] })] }));

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

@@ -1,2 +1,2 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-export const PsScanShutter = ({ disabled, label, onCapture, progress }) => (_jsxs("button", { "aria-label": label, className: 'ps-focus-ring group relative flex size-[4.75rem] shrink-0 items-center justify-center rounded-full disabled:opacity-40', disabled: disabled, onClick: onCapture, title: label, type: 'button', children: [_jsxs("svg", { "aria-hidden": 'true', className: 'absolute inset-0 size-full -rotate-90', viewBox: '0 0 76 76', children: [_jsx("circle", { className: 'stroke-white', cx: '38', cy: '38', fill: 'none', r: '35', strokeWidth: '4' }), _jsx("circle", { className: 'stroke-primary transition-[stroke-dashoffset] duration-150 ease-linear', cx: '38', cy: '38', fill: 'none', pathLength: '100', r: '35', strokeDasharray: '100', strokeDashoffset: 100 - Math.round(progress * 100), strokeLinecap: 'round', strokeWidth: '4' })] }), _jsx("span", { className: 'size-[3.75rem] rounded-full bg-white transition-transform duration-150 group-active:scale-90' })] }));
+export const PsScanShutter = ({ disabled, label, onCapture }) => (_jsxs("button", { "aria-label": label, className: 'ps-focus-ring group relative flex size-[4.75rem] shrink-0 items-center justify-center rounded-full disabled:opacity-40', disabled: disabled, onClick: onCapture, title: label, type: 'button', children: [_jsx("svg", { "aria-hidden": 'true', className: 'absolute inset-0 size-full -rotate-90', viewBox: '0 0 76 76', children: _jsx("circle", { className: 'stroke-white', cx: '38', cy: '38', fill: 'none', r: '35', strokeWidth: '4' }) }), _jsx("span", { className: 'size-[3.75rem] rounded-full bg-white transition-transform duration-150 group-active:scale-90' })] }));

package/dist/esm/components/ps-upload-modal.js

@@ -1,4 +1,4 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 import { PsButton } from '@pallasoft/ps-core-components';
 import { PsModal } from '@pallasoft/ps-popovers';
 import { PsUploadLabels } from '../constants/ps-upload-labels';
@@ -8,5 +8,5 @@ export const PsUploadModal = ({ isOpen, labels, onClose, queue }) => {
     const text = { ...PsUploadLabels, ...labels };
     const summary = PsUploadQueueService.summary(queue.items);
     const title = queue.isBusy ? text.title : summary.failed > 0 ? text.titleFailed : text.titleDone;
-    return (_jsx(PsModal, { isOpen: isOpen, onClose: onClose, size: 'md', title: title, children: _jsxs("div", { className: 'flex flex-col gap-5', children: [_jsx("ul", { className: 'flex max-h-[50vh] flex-col gap-2 overflow-y-auto', children: queue.items.map((item) => (_jsx(PsUploadRow, { item: item, labels: text, onCancel: () => queue.cancel(item.id), onRemove: () => queue.remove(item.id), onRetry: () => queue.retry(item.id) }, item.id))) }), _jsxs("div", { className: 'flex flex-wrap items-center justify-end gap-2 border-t border-line pt-4', children: [queue.isBusy ? (_jsx(PsButton, { onClick: () => queue.items.forEach((item) => queue.cancel(item.id)), type: 'button', variant: 'ghost', children: text.cancelAll })) : null, _jsx(PsButton, { onClick: onClose, type: 'button', variant: 'primary', children: text.finish })] })] }) }));
+    return (_jsx(PsModal, { footer: _jsxs(_Fragment, { children: [queue.isBusy ? (_jsx(PsButton, { onClick: () => queue.items.forEach((item) => queue.cancel(item.id)), type: 'button', variant: 'surface', children: text.cancelAll })) : null, _jsx(PsButton, { onClick: onClose, type: 'button', variant: 'primary', children: text.finish })] }), isOpen: isOpen, onClose: onClose, size: 'md', title: title, children: _jsx("ul", { className: 'flex flex-col gap-2', children: queue.items.map((item) => (_jsx(PsUploadRow, { item: item, labels: text, onCancel: () => queue.cancel(item.id), onRemove: () => queue.remove(item.id), onRetry: () => queue.retry(item.id) }, item.id))) }) }));
 };

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

@@ -1,23 +1,19 @@
 export const PsDocumentScannerLabels = {
-    addPage: 'Add page',
     allowCamera: 'Allow camera',
-    auto: 'Auto',
-    autoCapture: 'Capture automatically when the page is steady',
     autoDetect: 'Detect edges',
     busyBody: 'Another app is using the camera. Close it, then try again.',
     busyTitle: 'Your camera is busy',
     cameraStarting: 'Starting camera',
     capture: 'Take photo',
     choosePhoto: 'Choose a photo instead',
-    choosePhotos: 'Choose photos',
     close: 'Close scanner',
+    continue: 'Continue',
     cornerBottomLeft: 'Bottom left corner',
     cornerBottomRight: 'Bottom right corner',
     cornerTopLeft: 'Top left corner',
     cornerTopRight: 'Top right corner',
     cropHint: 'Drag the corners to the edges of the page.',
     cropTitle: 'Adjust corners',
-    deletePage: 'Delete',
     deniedAndroid1: 'Tap the icon to the left of the address bar.',
     deniedAndroid2: 'Open Permissions, then Camera.',
     deniedAndroid3: 'Choose Allow, then come back and tap Try again.',
@@ -29,52 +25,27 @@ export const PsDocumentScannerLabels = {
     deniedIos2: 'Set Camera to Allow.',
     deniedIos3: 'Come back and tap Try again.',
     deniedTitle: 'Camera access is off',
-    done: 'Done',
-    dragPage: 'Drag {page} to reorder',
-    editCrop: 'Crop',
     edgesFound: 'Page edges found.',
     edgesNotFound: 'Edges not found. Drag the corners to the page.',
-    filterColour: 'Colour',
-    filterDocument: 'Document',
-    filterGreyscale: 'Greyscale',
-    filterOriginal: 'Original',
-    filters: 'Filter',
-    finish: 'Upload {count} pages',
-    finishOne: 'Upload 1 page',
-    finishing: 'Preparing your scan',
     hintFind: 'Point your camera at a document',
     hintFound: 'Document found',
-    hintHold: 'Hold steady',
     insecureBody: 'The camera only works on a secure (https) page. You can still choose a photo.',
     insecureTitle: 'Camera not available here',
-    keepScan: 'Keep scan',
-    maxPages: 'You reached the page limit.',
-    nextPage: 'Next page',
-    page: 'Page',
-    pageAdded: 'Page {position} added.',
-    pageDeleted: 'Page deleted.',
-    pageMoved: '{page} moved to position {position} of {count}.',
-    pageOf: '{position} of {count}',
-    pages: 'Pages',
     platformAndroid: 'Android',
     platformDesktop: 'Computer',
     platformIos: 'iPhone',
-    previousPage: 'Previous page',
+    preparing: 'Preparing your scan',
+    previewAlt: 'Your flattened scan',
+    previewTitle: 'Your scan',
     primerBody: 'The camera is only used while the scanner is open. Nothing is saved until you upload.',
     primerTitle: 'Allow camera access to scan your documents',
     processFailed: 'The scan could not be prepared. Try again.',
-    reorderCancelled: '{page} stays where it was.',
-    reorderDropped: '{page} dropped at {position} of {count}.',
-    reorderInstructions: 'Press space to lift a page, the arrow keys to move it and space to drop it.',
-    reorderLifted: '{page} lifted from {position} of {count}.',
-    reorderMoved: '{page} is now {position} of {count}.',
     retake: 'Retake',
-    rotate: 'Rotate',
     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',
-    viewPages: 'Review {count} pages',
+    useScan: 'Use scan',
 };

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

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

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

@@ -1,48 +1,41 @@
 export const PsScanConfig = {
-    adaptiveRatio: 0.92,
-    adaptiveWindowDivisor: 16,
-    adaptiveWindowMin: 15,
-    autoCaptureMs: 1000,
     cameraPermission: 'camera',
-    capturedJpegQuality: 0.92,
+    cannyHighPercentile: 0.9,
+    cannyLowRatio: 0.45,
+    cannyMinHigh: 12,
+    capturedJpegQuality: 0.97,
+    closeRadii: [1, 2, 4],
     cornerNudge: 0.005,
     cornerNudgeLarge: 0.025,
-    decodeMaxDimension: 3000,
+    decodeMaxPixels: 16000000,
     defaultFileName: 'scan',
-    defaultJpegQuality: 0.82,
-    defaultMaxDimension: 2000,
-    defaultMaxPages: 30,
-    detectDilations: 2,
-    detectInset: 3,
-    detectMaxDimension: 320,
-    detectMinAreaRatio: 0.12,
-    detectMaxAreaRatio: 0.995,
-    detectMinEdgeStrength: 24,
-    detectMinHullFill: 0.85,
-    detectPercentile: 0.98,
-    detectRelativeStrength: 0.3,
+    defaultJpegQuality: 0.92,
+    defaultMaxDimension: 4000,
+    detectBorderMargin: 3,
+    detectExpand: 0.3,
+    detectMaxAngle: 140,
+    detectMaxAreaRatio: 0.95,
+    detectMaxDimension: 480,
+    detectMinAngle: 40,
+    detectMinAreaRatio: 0.1,
+    detectMinQuadFill: 0.88,
+    detectMinSideRatio: 0.06,
     guideArm: 36,
     guideArmRatio: 0.18,
     guideAspect: 0.72,
     guideHeightRatio: 0.58,
     guideLift: 0.03,
     guideWidthRatio: 0.76,
-    hullCandidateLimit: 18,
-    levelHighPercentile: 0.99,
-    levelLowPercentile: 0.01,
-    liveDetectIntervalMs: 160,
-    liveDetectMaxDimension: 240,
-    liveMissLimit: 2,
-    liveRearmMovement: 0.08,
-    liveSmoothing: 0.5,
-    liveStillMovement: 0.02,
+    liveDeadzone: 0.006,
+    liveDetectIntervalMs: 200,
+    liveDetectMaxDimension: 280,
+    liveMissLimit: 3,
+    liveSmoothing: 0.45,
     loupeOffset: 72,
     loupeSize: 112,
     loupeZoom: 2.5,
     minCornerGap: 0.02,
-    pdfDpi: 150,
-    pdfPointsPerInch: 72,
-    previewDebounceMs: 120,
-    previewMaxDimension: 1400,
+    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-step.js

@@ -1,5 +1,5 @@
 export const PsScanStep = {
     Camera: 'camera',
     Crop: 'crop',
-    Review: 'review',
+    Preview: 'preview',
 };

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

@@ -1,45 +1,41 @@
-import { useEffect, useRef, useState } from 'react';
+import { useEffect, useState } from 'react';
 import { PsScanConfig } from '../constants/ps-scan-config';
 import { PsScanCanvasService } from '../services/ps-scan-canvas-service';
 import { PsScanEdgeService } from '../services/ps-scan-edge-service';
 import { PsScanStabilityService } from '../services/ps-scan-stability-service';
-export const usePsScanLiveDetection = (videoRef, isActive, isAuto, onSteady) => {
-    const [detection, setDetection] = useState({ progress: 0, quad: null });
-    const isAutoRef = useRef(isAuto);
-    const onSteadyRef = useRef(onSteady);
-    isAutoRef.current = isAuto;
-    onSteadyRef.current = onSteady;
+export const usePsScanLiveDetection = (videoRef, isActive) => {
+    const [detection, setDetection] = useState({ quad: null });
     useEffect(() => {
         if (!isActive) {
-            setDetection({ progress: 0, quad: null });
+            setDetection({ quad: null });
             return;
         }
+        let isCancelled = false;
         let state = PsScanStabilityService.initial();
-        let last = performance.now();
         let timer;
-        const tick = () => {
+        const tick = async () => {
             const video = videoRef.current;
-            const now = performance.now();
             if (video !== null && video.videoWidth > 0 && document.visibilityState === 'visible') {
                 try {
                     const raster = PsScanCanvasService.sample(video, PsScanConfig.liveDetectMaxDimension);
-                    state = PsScanStabilityService.next(state, PsScanEdgeService.detect(raster), now - last);
+                    const quad = await PsScanEdgeService.detect(raster, PsScanConfig.liveDetectMaxDimension);
+                    if (isCancelled)
+                        return;
+                    state = PsScanStabilityService.next(state, quad);
                 }
                 catch {
                     state = PsScanStabilityService.initial();
                 }
-                const progress = isAutoRef.current ? PsScanStabilityService.progress(state) : 0;
-                setDetection({ progress, quad: state.quad });
-                if (progress >= 1) {
-                    state = PsScanStabilityService.disarm(state);
-                    onSteadyRef.current();
-                }
+                setDetection((current) => (current.quad === state.quad ? current : { quad: state.quad }));
             }
-            last = now;
-            timer = setTimeout(tick, PsScanConfig.liveDetectIntervalMs);
+            if (!isCancelled)
+                timer = setTimeout(tick, PsScanConfig.liveDetectIntervalMs);
         };
         timer = setTimeout(tick, PsScanConfig.liveDetectIntervalMs);
-        return () => clearTimeout(timer);
+        return () => {
+            isCancelled = true;
+            clearTimeout(timer);
+        };
     }, [isActive]);
     return detection;
 };

package/dist/esm/hooks/use-ps-scan-photo.js

@@ -0,0 +1,42 @@
+import { useCallback, useEffect, useRef, useState } from 'react';
+import { PsScanPipelineService } from '../services/ps-scan-pipeline-service';
+export const usePsScanPhoto = () => {
+    const [photo, setPhoto] = useState(null);
+    const url = useRef('');
+    const release = useCallback(() => {
+        if (url.current !== '')
+            URL.revokeObjectURL(url.current);
+        url.current = '';
+    }, []);
+    useEffect(() => release, [release]);
+    const load = useCallback(async (source) => {
+        const prepared = await PsScanPipelineService.prepare(source);
+        const next = {
+            corners: prepared.corners,
+            height: prepared.height,
+            isDetected: prepared.isDetected,
+            source,
+            sourceUrl: URL.createObjectURL(source),
+            width: prepared.width,
+        };
+        release();
+        url.current = next.sourceUrl;
+        setPhoto(next);
+        return next;
+    }, [release]);
+    const setCorners = useCallback((corners) => setPhoto((current) => (current === null ? current : { ...current, corners })), []);
+    const detectAgain = useCallback(async () => {
+        if (photo === null)
+            return false;
+        const prepared = await PsScanPipelineService.prepare(photo.source);
+        setPhoto((current) => current === null
+            ? current
+            : { ...current, corners: prepared.corners, isDetected: prepared.isDetected });
+        return prepared.isDetected;
+    }, [photo]);
+    const clear = useCallback(() => {
+        release();
+        setPhoto(null);
+    }, [release]);
+    return { clear, detectAgain, load, photo, setCorners };
+};

package/dist/esm/index.js

@@ -71,7 +71,5 @@ 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-filter';
-export * from './constants/ps-scan-output-format';
 export * from './models/ps-document-scanner-props';
 export * from './models/ps-file-picker-scan';

package/dist/esm/services/ps-scan-camera-service.js

@@ -51,8 +51,8 @@ export class PsScanCameraService {
             audio: false,
             video: {
                 facingMode: { ideal: 'environment' },
-                height: { ideal: 1440 },
-                width: { ideal: 1920 },
+                height: { ideal: 2160 },
+                width: { ideal: 3840 },
             },
         });
         const track = stream.getVideoTracks()[0];

package/dist/esm/services/ps-scan-canny-service.js

@@ -0,0 +1,93 @@
+import { PsScanConfig } from '../constants/ps-scan-config';
+export class PsScanCannyService {
+    static edges(gray, width, height) {
+        const gradient = PsScanCannyService.gradient(gray, width, height);
+        const ridges = PsScanCannyService.suppress(gradient, width, height);
+        const high = PsScanCannyService.highThreshold(ridges);
+        return PsScanCannyService.hysteresis(ridges, width, height, high * PsScanConfig.cannyLowRatio, high);
+    }
+    static gradient(gray, width, height) {
+        const magnitude = new Float32Array(width * height);
+        const direction = new Uint8Array(width * height);
+        for (let y = 1; y < height - 1; y += 1)
+            for (let x = 1; x < width - 1; x += 1) {
+                const i = y * width + x;
+                const gx = -gray[i - width - 1] +
+                    gray[i - width + 1] -
+                    2 * gray[i - 1] +
+                    2 * gray[i + 1] -
+                    gray[i + width - 1] +
+                    gray[i + width + 1];
+                const gy = -gray[i - width - 1] -
+                    2 * gray[i - width] -
+                    gray[i - width + 1] +
+                    gray[i + width - 1] +
+                    2 * gray[i + width] +
+                    gray[i + width + 1];
+                const ax = Math.abs(gx);
+                const ay = Math.abs(gy);
+                magnitude[i] = Math.hypot(gx, gy) / 4;
+                if (ay <= ax * 0.41421356)
+                    direction[i] = 0;
+                else if (ay >= ax * 2.41421356)
+                    direction[i] = 2;
+                else
+                    direction[i] = gx * gy > 0 ? 1 : 3;
+            }
+        return { direction, magnitude };
+    }
+    static highThreshold(ridges) {
+        const values = [];
+        for (let index = 0; index < ridges.length; index += 1)
+            if (ridges[index] > 0)
+                values.push(ridges[index]);
+        if (values.length === 0)
+            return PsScanConfig.cannyMinHigh;
+        values.sort((a, b) => a - b);
+        const at = Math.min(values.length - 1, Math.floor(values.length * PsScanConfig.cannyHighPercentile));
+        return Math.max(PsScanConfig.cannyMinHigh, values[at]);
+    }
+    static hysteresis(ridges, width, height, low, high) {
+        const out = new Uint8Array(width * height);
+        const stack = [];
+        for (let index = 0; index < ridges.length; index += 1)
+            if (ridges[index] >= high) {
+                out[index] = 1;
+                stack.push(index);
+            }
+        while (stack.length > 0) {
+            const index = stack.pop();
+            if (index === undefined)
+                break;
+            const x = index % width;
+            const y = (index - x) / width;
+            for (let dy = -1; dy <= 1; dy += 1)
+                for (let dx = -1; dx <= 1; dx += 1) {
+                    const nx = x + dx;
+                    const ny = y + dy;
+                    if (nx < 0 || ny < 0 || nx >= width || ny >= height)
+                        continue;
+                    const next = ny * width + nx;
+                    if (out[next] === 0 && ridges[next] >= low) {
+                        out[next] = 1;
+                        stack.push(next);
+                    }
+                }
+        }
+        return out;
+    }
+    static suppress(gradient, width, height) {
+        const { direction, magnitude } = gradient;
+        const out = new Float32Array(width * height);
+        const offsets = [1, width + 1, width, width - 1];
+        for (let y = 1; y < height - 1; y += 1)
+            for (let x = 1; x < width - 1; x += 1) {
+                const i = y * width + x;
+                const offset = offsets[direction[i]];
+                const value = magnitude[i];
+                if (value >= magnitude[i - offset] && value > magnitude[i + offset])
+                    out[i] = value;
+            }
+        return out;
+    }
+}

package/dist/esm/services/ps-scan-canvas-service.js

@@ -1,8 +1,14 @@
+import { PsScanConfig } from '../constants/ps-scan-config';
 import { PsScanGeometryService } from './ps-scan-geometry-service';
 export class PsScanCanvasService {
     static async decode(blob, maxDimension) {
         const bitmap = await createImageBitmap(blob, { imageOrientation: 'from-image' });
-        const size = PsScanGeometryService.fitWithin({ height: bitmap.height, width: bitmap.width }, maxDimension);
+        const capped = PsScanGeometryService.fitWithin({ height: bitmap.height, width: bitmap.width }, maxDimension);
+        const shrink = Math.min(1, Math.sqrt(PsScanConfig.decodeMaxPixels / (capped.width * capped.height)));
+        const size = {
+            height: Math.max(1, Math.round(capped.height * shrink)),
+            width: Math.max(1, Math.round(capped.width * shrink)),
+        };
         const context = PsScanCanvasService.context(size.width, size.height);
         context.drawImage(bitmap, 0, 0, size.width, size.height);
         const naturalHeight = bitmap.height;