@pallasoft/ps-file-components 1.4.0 → 2.0.0

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

@@ -1,20 +1,29 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useRef } from 'react';
-import { PsButton, usePsElementSize } from '@pallasoft/ps-core-components';
+import { useRef, useState } from 'react';
+import { usePsElementSize } from '@pallasoft/ps-core-components';
+import { PallasoftClassNameService } from '@pallasoft/ps-design-system';
+import { PsIconKey } from '@pallasoft/ps-icons';
 import { PsScanConfig } from '../constants/ps-scan-config';
 import { PsScanCornerOrder } from '../constants/ps-scan-corner-order';
 import { PsScanGeometryService } from '../services/ps-scan-geometry-service';
-export const PsScanCropEditor = ({ labels, onApply, onAutoDetect, onChange, onRetake, page, }) => {
+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, 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 = photo.corners
+        .map((point) => `${point.x * size.width},${point.y * size.height}`)
+        .join(' L');
     const move = (index, event) => {
         const stage = stageRef.current;
         if (stage === null || !event.currentTarget.hasPointerCapture(event.pointerId))
@@ -24,10 +33,14 @@ export const PsScanCropEditor = ({ labels, onApply, onAutoDetect, onChange, onRe
             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);
     };
+    const release = (event) => {
+        event.currentTarget.releasePointerCapture(event.pointerId);
+        setActiveIndex(null);
+    };
     const nudge = (index, event) => {
         const step = event.shiftKey ? PsScanConfig.cornerNudgeLarge : PsScanConfig.cornerNudge;
         const deltas = {
@@ -40,10 +53,13 @@ export const PsScanCropEditor = ({ labels, onApply, onAutoDetect, onChange, onRe
         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-slate-950 text-white', children: [_jsx("p", { className: 'shrink-0 px-4 pt-3 text-center text-sm text-white/80', id: hintId, children: labels.cropHint }), _jsx("div", { className: 'flex min-h-0 flex-1 items-center justify-center p-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', draggable: false, src: page.sourceUrl }), _jsx("svg", { "aria-hidden": 'true', className: 'pointer-events-none absolute inset-0 size-full', preserveAspectRatio: 'none', viewBox: '0 0 1 1', children: _jsx("polygon", { fill: 'rgba(255,255,255,0.12)', points: page.corners.map((point) => `${point.x},${point.y}`).join(' '), stroke: 'white', strokeWidth: 2, vectorEffect: 'non-scaling-stroke' }) }), 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: (event) => event.currentTarget.releasePointerCapture(event.pointerId), onPointerDown: (event) => event.currentTarget.setPointerCapture(event.pointerId), onPointerMove: (event) => move(index, event), onPointerUp: (event) => event.currentTarget.releasePointerCapture(event.pointerId), style: {
-                                left: `${page.corners[index].x * 100}%`,
-                                top: `${page.corners[index].y * 100}%`,
-                            }, type: 'button', children: _jsx("span", { className: 'size-5 rounded-full border-2 border-white bg-primary shadow' }) }, key)))] }) }), _jsxs("div", { className: 'flex shrink-0 flex-wrap items-center justify-center gap-3 px-4 pt-2 pb-[max(0.75rem,env(safe-area-inset-bottom))]', children: [_jsx(PsButton, { onClick: onRetake, variant: 'surface', children: labels.retake }), _jsx(PsButton, { onClick: onAutoDetect, variant: 'surface', children: labels.autoDetect }), _jsx(PsButton, { onClick: onApply, variant: 'primary', children: labels.cropApply })] })] }));
+    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: `${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-denied-steps.js

@@ -0,0 +1,29 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState } from 'react';
+import { PallasoftClassNameService } from '@pallasoft/ps-design-system';
+import { PsScanPlatform } from '../constants/ps-scan-platform';
+import { PsScanPlatformService } from '../services/ps-scan-platform-service';
+export const PsScanDeniedSteps = ({ labels }) => {
+    const [platform, setPlatform] = useState(() => PsScanPlatformService.detect());
+    const platforms = [
+        {
+            key: PsScanPlatform.Ios,
+            label: labels.platformIos,
+            steps: [labels.deniedIos1, labels.deniedIos2, labels.deniedIos3],
+        },
+        {
+            key: PsScanPlatform.Android,
+            label: labels.platformAndroid,
+            steps: [labels.deniedAndroid1, labels.deniedAndroid2, labels.deniedAndroid3],
+        },
+        {
+            key: PsScanPlatform.Desktop,
+            label: labels.platformDesktop,
+            steps: [labels.deniedDesktop1, labels.deniedDesktop2, labels.deniedDesktop3],
+        },
+    ];
+    const active = platforms.find((item) => item.key === platform);
+    return (_jsxs("div", { className: 'flex w-full flex-col gap-4 rounded-ps-control border border-white/10 bg-white/5 p-4 text-left', children: [_jsx("div", { className: 'grid grid-cols-3 gap-1 rounded-ps-control bg-black/40 p-1', role: 'group', children: platforms.map((item) => (_jsx("button", { "aria-pressed": item.key === platform, className: PallasoftClassNameService.merge('ps-focus-ring ps-control min-w-0 truncate rounded-ps-control px-2 text-xs font-semibold transition', item.key === platform
+                        ? 'bg-white text-black'
+                        : 'text-white/70 hover:bg-white/10 hover:text-white'), onClick: () => setPlatform(item.key), type: 'button', children: item.label }, item.key))) }), _jsx("ol", { className: 'flex flex-col gap-3', children: (active === undefined ? [] : active.steps).map((step, index) => (_jsxs("li", { className: 'flex items-start gap-3 text-sm leading-5 text-white/85', children: [_jsx("span", { className: 'flex size-6 shrink-0 items-center justify-center rounded-full bg-primary text-xs font-bold text-[color:var(--ps-color-primary-contrast)]', children: index + 1 }), _jsx("span", { className: 'pt-0.5', children: step })] }, step))) })] }));
+};

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

@@ -1,3 +1,5 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { PallasoftClassNameService } from '@pallasoft/ps-design-system';
-export const PsScanIconButton = ({ children, className, disabled, isPressed, label, onClick, }) => (_jsx("button", { "aria-label": label, "aria-pressed": isPressed, className: PallasoftClassNameService.merge('ps-focus-ring inline-flex size-11 min-h-11 min-w-11 shrink-0 items-center justify-center rounded-ps-control border border-line bg-surface text-ink transition hover:border-primary/40 hover:text-primary disabled:pointer-events-none disabled:opacity-40', isPressed ? 'border-primary bg-primary-soft text-primary' : '', className), disabled: disabled, onClick: onClick, title: label, type: 'button', children: children }));
+import { PsIcon } from '@pallasoft/ps-icons';
+import { PsScanChromeClasses } from '../constants/ps-scan-chrome-classes';
+export const PsScanIconButton = ({ className, disabled, iconClassName, iconKey, isPressed, label, onClick, }) => (_jsx("button", { "aria-label": label, "aria-pressed": isPressed, className: PallasoftClassNameService.merge(PsScanChromeClasses.icon, isPressed ? PsScanChromeClasses.iconOn : PsScanChromeClasses.iconOff, className), disabled: disabled, onClick: onClick, title: label, type: 'button', children: _jsx(PsIcon, { "aria-hidden": 'true', className: PallasoftClassNameService.merge('size-ps-control-icon-standalone', iconClassName), iconKey: iconKey }) }));

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

@@ -0,0 +1,2 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+export const PsScanIllustration = () => (_jsxs("svg", { "aria-hidden": 'true', className: 'h-auto w-40', fill: 'none', viewBox: '0 0 160 160', children: [_jsx("rect", { className: 'fill-white/5 stroke-white/15', height: '148', rx: '28', width: '148', x: '6', y: '6' }), _jsx("path", { className: 'fill-white', d: 'M52 34h56a4 4 0 0 1 4 4v84l-8-5-8 5-8-5-8 5-8-5-8 5-8-5-8 5V38a4 4 0 0 1 4-4Z' }), _jsx("path", { className: 'stroke-black/25', d: 'M62 52h36M62 64h28M62 76h36M62 88h20M88 100h10', strokeLinecap: 'round', strokeWidth: '4' }), _jsx("path", { className: 'stroke-primary', d: 'M38 46V30a6 6 0 0 1 6-6h16M100 24h16a6 6 0 0 1 6 6v16M122 114v16a6 6 0 0 1-6 6h-16M60 136H44a6 6 0 0 1-6-6v-16', strokeLinecap: 'round', strokeWidth: '5' }), _jsx("rect", { className: 'fill-primary motion-safe:animate-pulse', height: '4', rx: '2', width: '96', x: '32', y: '78' })] }));

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

@@ -0,0 +1,27 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { PsScanConfig } from '../constants/ps-scan-config';
+export const PsScanLoupe = ({ corners, point, source, stage }) => {
+    const size = PsScanConfig.loupeSize;
+    const zoom = PsScanConfig.loupeZoom;
+    const centreX = point.x * stage.width * zoom;
+    const centreY = point.y * stage.height * zoom;
+    const pointX = point.x * stage.width;
+    const pointY = point.y * stage.height;
+    const isBelow = pointY - PsScanConfig.loupeOffset - size < 0;
+    const left = Math.min(Math.max(pointX - size / 2, -size / 4), stage.width - (size * 3) / 4);
+    const top = isBelow
+        ? pointY + PsScanConfig.loupeOffset
+        : pointY - PsScanConfig.loupeOffset - size;
+    return (_jsx("div", { "aria-hidden": 'true', className: 'pointer-events-none absolute z-10 overflow-hidden rounded-full border-4 border-white bg-black shadow-2xl animate-ps-scale-in', style: {
+            backgroundImage: `url("${source}")`,
+            backgroundPosition: `${size / 2 - centreX}px ${size / 2 - centreY}px`,
+            backgroundRepeat: 'no-repeat',
+            backgroundSize: `${stage.width * zoom}px ${stage.height * zoom}px`,
+            height: size,
+            left,
+            top,
+            width: size,
+        }, children: _jsxs("svg", { className: 'absolute inset-0 size-full', viewBox: `0 0 ${size} ${size}`, children: [_jsx("polygon", { className: 'fill-none stroke-primary', points: corners
+                        .map((corner) => `${corner.x * stage.width * zoom - centreX + size / 2},${corner.y * stage.height * zoom - centreY + size / 2}`)
+                        .join(' '), strokeWidth: '2' }), _jsx("path", { className: 'stroke-white', d: `M${size / 2 - 10} ${size / 2}H${size / 2 + 10}M${size / 2} ${size / 2 - 10}V${size / 2 + 10}`, strokeLinecap: 'round', strokeWidth: '2' })] }) }));
+};

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

@@ -0,0 +1,44 @@
+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 { PsScanCameraStatus } from '../constants/ps-scan-camera-status';
+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 = ({ 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 = {
+        [PsScanCameraStatus.Busy]: {
+            body: labels.busyBody,
+            iconKey: PsIconKey.Camera,
+            title: labels.busyTitle,
+        },
+        [PsScanCameraStatus.Denied]: {
+            body: labels.deniedBody,
+            iconKey: PsIconKey.CameraOff,
+            title: labels.deniedTitle,
+        },
+        [PsScanCameraStatus.Insecure]: {
+            body: labels.insecureBody,
+            iconKey: PsIconKey.Shield,
+            title: labels.insecureTitle,
+        },
+        [PsScanCameraStatus.Prompt]: {
+            body: labels.primerBody,
+            iconKey: PsIconKey.Camera,
+            title: labels.primerTitle,
+        },
+        [PsScanCameraStatus.Ready]: { body: '', iconKey: PsIconKey.Camera, title: '' },
+        [PsScanCameraStatus.Unavailable]: {
+            body: labels.unavailableBody,
+            iconKey: PsIconKey.CameraOff,
+            title: labels.unavailableTitle,
+        },
+    };
+    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', label: labels.choosePhoto, onFile: onFile })] })] }) }));
+};

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

@@ -0,0 +1,16 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+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, label, onFile, }) => {
+    const input = useRef(null);
+    const open = () => input.current?.click();
+    const onChange = (event) => {
+        const file = event.target.files === null ? undefined : event.target.files[0];
+        event.target.value = '';
+        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', 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

@@ -0,0 +1,2 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+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-scan-viewfinder-overlay.js

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

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

@@ -16,5 +16,5 @@ export const PsUploadRow = ({ item, labels, onCancel, onRemove, onRetry }) => {
         : item.status === PsUploadStatus.failed && item.error
             ? item.error
             : labels[item.status];
-    return (_jsxs("li", { className: 'flex items-center gap-3 rounded-ps-control border border-line px-3 py-2.5', children: [_jsx(PsFileKindIcon, { contentType: item.file.type, name: item.file.name }), _jsxs("div", { className: 'flex min-w-0 flex-1 flex-col gap-1.5', children: [_jsx("p", { className: 'truncate text-sm font-medium text-ink', children: item.file.name }), _jsx(PsProgressBar, { label: item.file.name, tone: PsUploadStatusTones[item.status], value: isProblem ? 1 : item.progress }), _jsxs("p", { className: `truncate text-xs ${isProblem ? 'text-danger' : item.status === PsUploadStatus.done ? 'text-success' : 'text-ink/55'}`, role: item.status === PsUploadStatus.failed ? 'alert' : undefined, children: [size, " \u00B7 ", status] })] }), _jsxs("div", { className: 'flex w-16 shrink-0 items-center justify-end gap-0.5', children: [isProblem ? (_jsx(PsFileIconButton, { iconKey: PsIconKey.Refresh, label: `${labels.retry} ${item.file.name}`, onClick: onRetry })) : null, isActive ? (_jsx(PsFileIconButton, { iconKey: PsIconKey.Close, label: `${labels.cancel} ${item.file.name}`, onClick: onCancel, tone: 'danger' })) : item.status === PsUploadStatus.done ? (_jsx("span", { className: 'ps-control-square ps-control-compact inline-flex items-center justify-center text-success', children: _jsx(PsIcon, { "aria-label": labels.done, className: 'h-4 w-4', iconKey: PsIconKey.Check }) })) : (_jsx(PsFileIconButton, { iconKey: PsIconKey.Close, label: `${labels.remove} ${item.file.name}`, onClick: onRemove }))] })] }));
+    return (_jsxs("li", { className: 'flex items-center gap-3 rounded-ps-control border border-line px-3 py-2.5', children: [_jsx(PsFileKindIcon, { contentType: item.file.type, name: item.file.name }), _jsxs("div", { className: 'flex min-w-0 flex-1 flex-col gap-1.5', children: [_jsx("p", { className: 'truncate text-sm font-medium text-ink', children: item.file.name }), _jsx(PsProgressBar, { label: item.file.name, tone: PsUploadStatusTones[item.status], value: isProblem ? 1 : item.progress }), _jsxs("p", { className: `truncate text-xs ${isProblem ? 'text-danger' : item.status === PsUploadStatus.done ? 'text-success' : 'text-ink/55'}`, role: item.status === PsUploadStatus.failed ? 'alert' : undefined, children: [size, " \u00B7 ", status] })] }), _jsxs("div", { className: 'flex w-20 shrink-0 items-center justify-end gap-1', children: [isProblem ? (_jsx(PsFileIconButton, { iconKey: PsIconKey.Refresh, label: `${labels.retry} ${item.file.name}`, onClick: onRetry })) : null, isActive ? (_jsx(PsFileIconButton, { iconKey: PsIconKey.Close, label: `${labels.cancel} ${item.file.name}`, onClick: onCancel, tone: 'danger' })) : item.status === PsUploadStatus.done ? (_jsx("span", { className: 'ps-control-square ps-control-compact inline-flex items-center justify-center text-success', children: _jsx(PsIcon, { "aria-label": labels.done, className: 'h-4 w-4', iconKey: PsIconKey.Check }) })) : (_jsx(PsFileIconButton, { iconKey: PsIconKey.Close, label: `${labels.remove} ${item.file.name}`, onClick: onRemove }))] })] }));
 };

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

@@ -1,50 +1,51 @@
 export const PsDocumentScannerLabels = {
-    addPage: 'Add page',
-    autoDetect: 'Auto-detect edges',
-    cameraDenied: 'Camera access was blocked. Allow it in your browser settings, or take a photo or choose existing photos instead.',
+    allowCamera: 'Allow camera',
+    autoDetect: 'Detect edges',
+    busyBody: 'Another app is using the camera. Close it, then try again.',
+    busyTitle: 'Your camera is busy',
     cameraStarting: 'Starting camera',
-    cameraUnavailable: 'No camera is available here. Take a photo or choose existing photos instead.',
-    backToPages: 'Back to pages',
-    capture: 'Capture page',
-    choosePhotos: 'Choose photos',
+    capture: 'Take photo',
+    choosePhoto: 'Choose a photo instead',
     close: 'Close scanner',
+    continue: 'Continue',
     cornerBottomLeft: 'Bottom left corner',
     cornerBottomRight: 'Bottom right corner',
     cornerTopLeft: 'Top left corner',
     cornerTopRight: 'Top right corner',
-    cropApply: 'Use crop',
-    cropHint: 'Drag the corners to fit the page, or use the arrow keys on a focused corner.',
-    cropTitle: 'Adjust edges',
-    deletePage: 'Delete page',
-    dragPage: 'Drag {page} to reorder',
-    editCrop: 'Edit edges',
+    cropHint: 'Drag the corners to the edges of the page.',
+    cropTitle: 'Adjust corners',
+    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.',
+    deniedBody: 'You can turn it back on in a few taps.',
+    deniedDesktop1: 'Click the camera or site icon in the address bar.',
+    deniedDesktop2: 'Set Camera to Allow for this site.',
+    deniedDesktop3: 'Close the menu, then click Try again.',
+    deniedIos1: 'Tap aA in the address bar, then Website Settings.',
+    deniedIos2: 'Set Camera to Allow.',
+    deniedIos3: 'Come back and tap Try again.',
+    deniedTitle: 'Camera access is off',
     edgesFound: 'Page edges found.',
-    edgesNotFound: 'Edges not found. Adjust the corners.',
-    filterColour: 'Colour',
-    filterDocument: 'Black and white',
-    filterGreyscale: 'Greyscale',
-    filterOriginal: 'Original',
-    filters: 'Enhance',
-    finish: 'Use scan',
-    finishing: 'Preparing your scan',
-    maxPages: 'You reached the page limit.',
-    moveDown: 'Move {page} down',
-    moveUp: 'Move {page} up',
-    page: 'Page',
-    pageAdded: 'Page {position} added.',
-    pageDeleted: 'Page deleted.',
-    pageMoved: '{page} moved to position {position} of {count}.',
-    pages: 'Pages',
+    edgesNotFound: 'Edges not found. Drag the corners to the page.',
+    hintFind: 'Point your camera at a document',
+    hintFound: 'Document found',
+    insecureBody: 'The camera only works on a secure (https) page. You can still choose a photo.',
+    insecureTitle: 'Camera not available here',
+    platformAndroid: 'Android',
+    platformDesktop: 'Computer',
+    platformIos: 'iPhone',
+    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',
-    takePhoto: 'Take photo',
     title: 'Scan document',
-    torchOff: 'Turn light off',
-    torchOn: 'Turn light on',
+    torchOff: 'Turn flash off',
+    torchOn: 'Turn flash on',
+    tryAgain: 'Try again',
+    unavailableBody: 'This device has no camera the browser can use. Choose a photo of the page instead.',
+    unavailableTitle: 'No camera found',
+    useScan: 'Use scan',
 };

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

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

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

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

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

@@ -0,0 +1,10 @@
+export const PsScanChromeClasses = {
+    button: 'ps-focus-ring ps-control ps-control-padding inline-flex max-w-full items-center justify-center gap-2 rounded-ps-control border text-sm font-semibold leading-5 transition disabled:pointer-events-none disabled:opacity-40',
+    buttonLarge: 'ps-control-large ps-control-padding-large',
+    buttonPrimary: 'border-primary bg-primary text-[color:var(--ps-color-primary-contrast)] hover:border-primary-dark hover:bg-primary-dark',
+    buttonQuiet: 'border-white/15 bg-white/10 text-white hover:border-white/25 hover:bg-white/20',
+    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',
+};

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

@@ -1,31 +1,41 @@
 export const PsScanConfig = {
-    adaptiveRatio: 0.92,
-    adaptiveWindowDivisor: 16,
-    adaptiveWindowMin: 15,
-    capturedJpegQuality: 0.92,
+    cameraPermission: 'camera',
+    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,
-    detectMaxDimension: 320,
-    detectMinAreaRatio: 0.12,
-    detectMaxAreaRatio: 0.995,
-    detectMinEdgeStrength: 24,
-    detectMinHullFill: 0.85,
-    detectPercentile: 0.98,
-    detectRelativeStrength: 0.3,
-    hullCandidateLimit: 18,
-    levelHighPercentile: 0.99,
-    levelLowPercentile: 0.01,
+    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,
+    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,
-    thumbnailHeight: 56,
+    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-platform.js

@@ -0,0 +1,5 @@
+export const PsScanPlatform = {
+    Android: 'android',
+    Desktop: 'desktop',
+    Ios: 'ios',
+};

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-camera.js

@@ -6,18 +6,40 @@ import { PsScanCanvasService } from '../services/ps-scan-canvas-service';
 export const usePsScanCamera = (isActive) => {
     const videoRef = useRef(null);
     const sessionRef = useRef(null);
-    const [status, setStatus] = useState(PsScanCameraStatus.Starting);
+    const [status, setStatus] = useState(PsScanCameraStatus.Checking);
+    const [request, setRequest] = useState(0);
     const [canTorch, setCanTorch] = useState(false);
     const [isTorchOn, setIsTorchOn] = useState(false);
     useEffect(() => {
-        if (!isActive)
+        let isCancelled = false;
+        let permission = null;
+        const onChange = () => {
+            if (permission !== null && permission.state === 'granted')
+                setRequest((current) => current + 1);
+        };
+        PsScanCameraService.check().then(async (next) => {
+            if (isCancelled)
+                return;
+            if (next === PsScanCameraStatus.Starting)
+                setRequest(1);
+            else
+                setStatus(next);
+            permission = await PsScanCameraService.permission();
+            if (isCancelled || permission === null)
+                return;
+            permission.addEventListener('change', onChange);
+        });
+        return () => {
+            isCancelled = true;
+            if (permission !== null)
+                permission.removeEventListener('change', onChange);
+        };
+    }, []);
+    useEffect(() => {
+        if (!isActive || request === 0)
             return;
         let isCancelled = false;
         setIsTorchOn(false);
-        if (!PsScanCameraService.isSupported()) {
-            setStatus(PsScanCameraStatus.Unavailable);
-            return;
-        }
         setStatus(PsScanCameraStatus.Starting);
         PsScanCameraService.open()
             .then(async (session) => {
@@ -27,12 +49,10 @@ export const usePsScanCamera = (isActive) => {
             }
             sessionRef.current = session;
             setCanTorch(session.canTorch);
-            const video = videoRef.current;
-            if (video !== null) {
-                video.srcObject = session.stream;
-                await video.play().catch(() => undefined);
-            }
-            setStatus(PsScanCameraStatus.Ready);
+            if (videoRef.current !== null)
+                await PsScanCameraService.attach(videoRef.current, session);
+            if (!isCancelled)
+                setStatus(PsScanCameraStatus.Ready);
         })
             .catch((error) => {
             if (!isCancelled)
@@ -45,7 +65,13 @@ export const usePsScanCamera = (isActive) => {
             if (videoRef.current !== null)
                 videoRef.current.srcObject = null;
         };
-    }, [isActive]);
+    }, [isActive, request]);
+    const attachVideo = useCallback((element) => {
+        videoRef.current = element;
+        if (element !== null && sessionRef.current !== null)
+            void PsScanCameraService.attach(element, sessionRef.current);
+    }, []);
+    const allow = useCallback(() => setRequest((current) => current + 1), []);
     const toggleTorch = useCallback(async () => {
         const session = sessionRef.current;
         if (session === null)
@@ -54,9 +80,20 @@ export const usePsScanCamera = (isActive) => {
     }, [isTorchOn]);
     const capture = useCallback(async () => {
         const video = videoRef.current;
-        if (video === null || video.videoWidth === 0)
+        if (video === null ||
+            video.videoWidth === 0 ||
+            video.readyState < HTMLMediaElement.HAVE_CURRENT_DATA)
             return null;
         return await PsScanCanvasService.fromVideo(video, PsScanConfig.capturedJpegQuality);
     }, []);
-    return { canTorch, capture, isTorchOn, status, toggleTorch, videoRef };
+    return {
+        allow,
+        attachVideo,
+        canTorch,
+        capture,
+        isTorchOn,
+        status,
+        toggleTorch,
+        videoRef,
+    };
 };