@pallasoft/ps-file-components 1.4.0 → 1.5.0

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

@@ -1,12 +1,18 @@
 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, onKeep, onRetake, page, }) => {
     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 cornerLabels = [
@@ -15,6 +21,9 @@ export const PsScanCropEditor = ({ labels, onApply, onAutoDetect, onChange, onRe
         labels.cornerBottomRight,
         labels.cornerBottomLeft,
     ];
+    const outline = page.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))
@@ -28,6 +37,10 @@ export const PsScanCropEditor = ({ labels, onApply, onAutoDetect, onChange, onRe
         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 = {
@@ -42,8 +55,11 @@ export const PsScanCropEditor = ({ labels, onApply, onAutoDetect, onChange, onRe
         event.preventDefault();
         onChange(PsScanGeometryService.nudge(page.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: {
+    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) => {
+                                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: '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 })] })] }));
+                            }, 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 })] })] }));
 };

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-page-list.js

@@ -3,17 +3,16 @@ import { PsSortableList } from '@pallasoft/ps-core-components';
 import { PallasoftClassNameService } from '@pallasoft/ps-design-system';
 import { PsIcon, PsIconKey } from '@pallasoft/ps-icons';
 import { PsScanTemplateService } from '../services/ps-scan-template-service';
-import { PsScanIconButton } from './ps-scan-icon-button';
-export const PsScanPageList = ({ activeId, labels, onMove, onSelect, pages, previews, }) => {
+export const PsScanPageList = ({ activeId, canAddPage, labels, onAddPage, onMove, onSelect, pages, previews, }) => {
     const items = pages.map((page, index) => ({
         id: page.id,
         label: `${labels.page} ${index + 1}`,
     }));
     const say = (template, label, position) => PsScanTemplateService.fill(template, { count: pages.length, page: label, position });
-    return (_jsx(PsSortableList, { announcements: {
-            cancelled: (label) => say(labels.reorderCancelled, label, 0),
-            dropped: (label, position) => say(labels.reorderDropped, label, position),
-            lifted: (label, position) => say(labels.reorderLifted, label, position),
-            moved: (label, position) => say(labels.reorderMoved, label, position),
-        }, className: 'flex flex-col gap-2', getHandleLabel: (label) => PsScanTemplateService.fill(labels.dragPage, { page: label }), instructions: labels.reorderInstructions, items: items, onMove: (_id, from, to) => onMove(from, to), renderItem: ({ handle, index, isDragging, item }) => (_jsxs("div", { className: PallasoftClassNameService.merge('flex items-center gap-2 rounded-ps-control border bg-surface p-1.5', item.id === activeId ? 'border-primary' : 'border-line', isDragging ? 'opacity-80 shadow-lg' : ''), children: [handle, _jsxs("button", { "aria-current": item.id === activeId, "aria-label": item.label, className: 'ps-focus-ring flex min-h-11 min-w-0 flex-1 items-center gap-3 rounded-ps-control text-left', onClick: () => onSelect(item.id), type: 'button', children: [previews[item.id] === undefined ? (_jsx("span", { className: 'ps-skeleton h-14 w-10 shrink-0 rounded' })) : (_jsx("img", { alt: '', className: 'h-14 w-10 shrink-0 rounded border border-line bg-white object-cover object-top', src: previews[item.id] })), _jsx("span", { className: 'truncate text-sm font-medium text-ink', children: item.label })] }), _jsx(PsScanIconButton, { disabled: index === 0, label: PsScanTemplateService.fill(labels.moveUp, { page: item.label }), onClick: () => onMove(index, index - 1), children: _jsx(PsIcon, { "aria-hidden": 'true', className: 'size-5 -rotate-90', iconKey: PsIconKey.ChevronRight }) }), _jsx(PsScanIconButton, { disabled: index === pages.length - 1, label: PsScanTemplateService.fill(labels.moveDown, { page: item.label }), onClick: () => onMove(index, index + 1), children: _jsx(PsIcon, { "aria-hidden": 'true', className: 'size-5 rotate-90', iconKey: PsIconKey.ChevronRight }) })] })), role: 'list' }));
+    return (_jsxs("div", { className: 'ps-scrollbar-hidden -mx-4 flex items-center gap-3 overflow-x-auto px-4 py-2 sm:mx-0 sm:px-0 lg:flex-wrap lg:overflow-visible', children: [_jsx(PsSortableList, { announcements: {
+                    cancelled: (label) => say(labels.reorderCancelled, label, 0),
+                    dropped: (label, position) => say(labels.reorderDropped, label, position),
+                    lifted: (label, position) => say(labels.reorderLifted, label, position),
+                    moved: (label, position) => say(labels.reorderMoved, label, position),
+                }, className: 'flex items-center gap-3 lg:flex-wrap', getHandleLabel: (label) => PsScanTemplateService.fill(labels.dragPage, { page: label }), handleClassName: 'ps-focus-ring absolute inset-0 cursor-grab touch-none rounded-md active:cursor-grabbing', handleIcon: _jsx("span", { "aria-hidden": 'true' }), instructions: labels.reorderInstructions, isHorizontal: true, items: items, onMove: (_id, from, to) => onMove(from, to), renderItem: ({ handle, index, isOverlay, item }) => (_jsxs("div", { "aria-current": item.id === activeId, className: 'relative flex flex-col items-center gap-1.5', onClick: () => onSelect(item.id), role: 'listitem', children: [_jsxs("span", { className: PallasoftClassNameService.merge('relative block h-[4.5rem] w-14 overflow-hidden rounded-md bg-white/10 ring-offset-2 ring-offset-black transition', item.id === activeId ? 'ring-2 ring-primary' : 'opacity-75', isOverlay ? 'shadow-2xl' : ''), children: [previews[item.id] === undefined ? (_jsx("span", { className: 'ps-skeleton block size-full' })) : (_jsx("img", { alt: '', className: 'size-full object-cover', src: previews[item.id] })), handle] }), _jsx("span", { className: PallasoftClassNameService.merge('text-xs font-semibold tabular-nums', item.id === activeId ? 'text-white' : 'text-white/55'), children: index + 1 })] })), role: 'list' }), canAddPage ? (_jsxs("div", { className: 'flex shrink-0 flex-col items-center gap-1.5', children: [_jsx("button", { "aria-label": labels.addPage, className: 'ps-focus-ring flex h-[4.5rem] w-14 items-center justify-center rounded-md border-2 border-dashed border-white/25 text-white/70 transition hover:border-white/50 hover:text-white', onClick: onAddPage, title: labels.addPage, type: 'button', children: _jsx(PsIcon, { "aria-hidden": 'true', className: 'size-5', iconKey: PsIconKey.Plus }) }), _jsx("span", { "aria-hidden": 'true', className: 'text-xs text-transparent', children: "0" })] })) : null] }));
 };

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

@@ -0,0 +1,2 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+export const PsScanPageStack = ({ count, label, onOpen, preview }) => (_jsxs("button", { "aria-label": label, className: 'ps-focus-ring relative flex h-16 w-12 shrink-0 rounded-md animate-ps-scale-in', onClick: onOpen, title: label, type: 'button', children: [count > 1 ? (_jsx("span", { "aria-hidden": 'true', className: 'absolute inset-0 rotate-6 rounded-md border-2 border-white/60 bg-white/30' })) : null, _jsx("span", { className: 'relative block size-full overflow-hidden rounded-md border-2 border-white bg-white/20', children: preview === undefined ? null : (_jsx("img", { alt: '', className: 'size-full object-cover', src: preview })) }), _jsx("span", { className: 'absolute -right-2 -top-2 flex h-6 min-w-6 items-center justify-center rounded-full bg-primary px-1.5 text-xs font-bold tabular-nums text-[color:var(--ps-color-primary-contrast)]', children: count })] }));

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 = ({ isMultiple, labels, onAllow, onFiles, 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', isMultiple: isMultiple, label: labels.choosePhoto, onFiles: onFiles })] })] }) }));
+};

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, isMultiple, label, onFiles, }) => {
+    const input = useRef(null);
+    const open = () => input.current?.click();
+    const onChange = (event) => {
+        const files = Array.from(event.target.files === null ? [] : event.target.files);
+        event.target.value = '';
+        if (files.length > 0)
+            onFiles(files);
+    };
+    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' })] }));
+};

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

@@ -1,16 +1,33 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { PsButton } from '@pallasoft/ps-core-components';
+import { PallasoftClassNameService } from '@pallasoft/ps-design-system';
 import { PsIcon, PsIconKey } from '@pallasoft/ps-icons';
+import { PsScanChromeClasses } from '../constants/ps-scan-chrome-classes';
 import { PsScanFilter } from '../constants/ps-scan-filter';
+import { PsScanTemplateService } from '../services/ps-scan-template-service';
+import { PsScanButton } from './ps-scan-button';
 import { PsScanIconButton } from './ps-scan-icon-button';
 import { PsScanPageList } from './ps-scan-page-list';
-export const PsScanReview = ({ canAddPage, error, isBusy, labels, onAddPage, onDelete, onEditCrop, onFilter, onFinish, onMove, onRetake, onRotate, onSelect, page, pages, previews, }) => {
+export const PsScanReview = ({ canAddPage, error, isBusy, labels, onAddPage, onClose, onDelete, onEditCrop, onFilter, onFinish, onMove, onRetake, onRotate, onSelect, page, pages, previews, }) => {
+    const index = pages.findIndex((item) => item.id === page.id);
+    const preview = previews[page.id];
     const filters = [
         { key: PsScanFilter.Original, label: labels.filterOriginal },
         { key: PsScanFilter.Colour, label: labels.filterColour },
         { key: PsScanFilter.Greyscale, label: labels.filterGreyscale },
         { key: PsScanFilter.Document, label: labels.filterDocument },
     ];
-    const preview = previews[page.id];
-    return (_jsxs("div", { className: 'flex h-full min-h-0 flex-col lg:flex-row', children: [_jsx("div", { className: 'flex min-h-0 flex-1 items-center justify-center bg-slate-950 p-3', children: preview === undefined ? (_jsx("span", { "aria-hidden": 'true', className: 'ps-skeleton h-full w-2/3 rounded' })) : (_jsx("img", { alt: labels.page, className: 'max-h-full max-w-full object-contain', src: preview })) }), _jsxs("div", { className: 'flex max-h-[55%] min-h-0 shrink-0 flex-col gap-3 overflow-y-auto bg-surface px-4 pt-3 lg:max-h-none lg:w-80 lg:border-l lg:border-line', children: [_jsxs("div", { className: 'flex flex-wrap items-center gap-2', children: [_jsx(PsScanIconButton, { label: labels.rotate, onClick: onRotate, children: _jsx(PsIcon, { "aria-hidden": 'true', className: 'size-5', iconKey: PsIconKey.Rotate }) }), _jsx(PsScanIconButton, { label: labels.editCrop, onClick: onEditCrop, children: _jsx(PsIcon, { "aria-hidden": 'true', className: 'size-5', iconKey: PsIconKey.Pencil }) }), _jsx(PsScanIconButton, { label: labels.retake, onClick: onRetake, children: _jsx(PsIcon, { "aria-hidden": 'true', className: 'size-5', iconKey: PsIconKey.Refresh }) }), _jsx(PsScanIconButton, { label: labels.deletePage, onClick: onDelete, children: _jsx(PsIcon, { "aria-hidden": 'true', className: 'size-5', iconKey: PsIconKey.Trash }) })] }), _jsx("div", { "aria-label": labels.filters, className: 'flex flex-wrap gap-2', role: 'group', children: filters.map((filter) => (_jsx("button", { "aria-pressed": page.filter === filter.key, className: `ps-focus-ring min-h-11 rounded-ps-control border px-3 text-sm font-medium transition ${page.filter === filter.key ? 'border-primary bg-primary-soft text-primary' : 'border-line bg-surface text-ink hover:border-primary/40'}`, onClick: () => onFilter(filter.key), type: 'button', children: filter.label }, filter.key))) }), _jsxs("section", { "aria-label": labels.pages, className: 'min-h-0', children: [_jsxs("h3", { className: 'mb-2 text-sm font-semibold text-ink', children: [labels.pages, " (", pages.length, ")"] }), _jsx(PsScanPageList, { activeId: page.id, labels: labels, onMove: onMove, onSelect: onSelect, pages: pages, previews: previews })] }), error === '' ? null : (_jsx("p", { className: 'text-sm text-danger', role: 'alert', children: error })), _jsxs("div", { className: 'sticky bottom-0 mt-auto flex flex-wrap gap-3 bg-surface pt-2 pb-[max(0.75rem,env(safe-area-inset-bottom))]', children: [_jsx(PsButton, { className: 'flex-1', disabled: !canAddPage || isBusy, leadingIcon: _jsx(PsIcon, { "aria-hidden": 'true', className: 'size-4', iconKey: PsIconKey.Plus }), onClick: onAddPage, variant: 'surface', children: labels.addPage }), _jsx(PsButton, { className: 'flex-1', isLoading: isBusy, loadingLabel: labels.finishing, onClick: onFinish, variant: 'primary', children: labels.finish })] })] })] }));
+    const tools = [
+        { iconKey: PsIconKey.Crop, label: labels.editCrop, onClick: onEditCrop },
+        { iconKey: PsIconKey.Rotate, label: labels.rotate, onClick: onRotate },
+        { iconKey: PsIconKey.Refresh, label: labels.retake, onClick: onRetake },
+        { iconKey: PsIconKey.Trash, label: labels.deletePage, onClick: onDelete },
+    ];
+    return (_jsxs("div", { className: 'flex h-full min-h-0 flex-col bg-black text-white animate-ps-fade-in lg:flex-row', children: [_jsxs("section", { className: 'flex min-h-0 flex-1 flex-col', 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.Close, label: labels.close, onClick: onClose }), _jsxs("div", { className: 'flex items-center justify-center gap-1', children: [_jsx(PsScanIconButton, { disabled: index <= 0, iconClassName: 'rotate-180', iconKey: PsIconKey.ChevronRight, label: labels.previousPage, onClick: () => onSelect(pages[index - 1].id) }), _jsx("h2", { className: 'min-w-16 text-center text-sm font-semibold tabular-nums', children: PsScanTemplateService.fill(labels.pageOf, {
+                                            count: pages.length,
+                                            position: index + 1,
+                                        }) }), _jsx(PsScanIconButton, { disabled: index >= pages.length - 1, iconKey: PsIconKey.ChevronRight, label: labels.nextPage, onClick: () => onSelect(pages[index + 1].id) })] }), _jsx(PsScanIconButton, { disabled: !canAddPage, iconKey: PsIconKey.Camera, label: labels.addPage, onClick: onAddPage })] }), _jsx("div", { className: 'flex min-h-0 flex-1 items-center justify-center px-6 py-4', children: preview === undefined ? (_jsx("span", { "aria-hidden": 'true', className: 'ps-skeleton block h-4/5 w-3/5 rounded-sm' })) : (_jsx("img", { alt: `${labels.page} ${index + 1}`, className: 'max-h-full max-w-full rounded-sm object-contain shadow-[0_24px_60px_-20px_rgb(0_0_0/0.9)] animate-ps-fade-in', src: preview }, preview)) })] }), _jsxs("aside", { className: 'flex shrink-0 flex-col gap-3 border-white/10 px-4 pb-[max(1rem,env(safe-area-inset-bottom))] lg:w-[22rem] lg:gap-5 lg:overflow-y-auto lg:border-l lg:pt-[max(1rem,env(safe-area-inset-top))]', children: [_jsx("div", { "aria-label": labels.filters, className: 'grid grid-cols-4 gap-2 sm:mx-auto sm:w-full sm:max-w-md lg:max-w-none lg:grid-cols-2', role: 'group', children: filters.map((filter) => (_jsx("button", { "aria-pressed": page.filter === filter.key, className: PallasoftClassNameService.merge(PsScanChromeClasses.chip, page.filter === filter.key
+                                ? PsScanChromeClasses.iconOn
+                                : 'bg-white/10 text-white/85 hover:bg-white/20'), onClick: () => onFilter(filter.key), type: 'button', children: filter.label }, filter.key))) }), _jsx("div", { className: 'grid grid-cols-4 gap-1 sm:mx-auto sm:w-full sm:max-w-md lg:max-w-none', children: tools.map((tool) => (_jsxs("button", { className: PsScanChromeClasses.tool, onClick: tool.onClick, type: 'button', children: [_jsx(PsIcon, { "aria-hidden": 'true', className: 'size-ps-control-icon-standalone', iconKey: tool.iconKey }), _jsx("span", { children: tool.label })] }, tool.label))) }), _jsxs("section", { "aria-label": labels.pages, className: 'min-w-0 sm:mx-auto sm:w-full sm:max-w-md lg:max-w-none', children: [_jsx("h3", { className: 'hidden text-xs font-semibold uppercase tracking-wide text-white/50 lg:block', children: labels.pages }), _jsx(PsScanPageList, { activeId: page.id, canAddPage: canAddPage, labels: labels, onAddPage: onAddPage, onMove: onMove, onSelect: onSelect, pages: pages, previews: previews })] }), error === '' ? null : (_jsx("p", { className: 'rounded-ps-control bg-danger px-3 py-2 text-sm text-white', role: 'alert', children: error })), _jsx(PsScanButton, { className: 'w-full sm:mx-auto sm:max-w-md lg:mt-auto lg:max-w-none', isLarge: true, isLoading: isBusy, isPrimary: true, leadingIcon: _jsx(PsIcon, { "aria-hidden": 'true', className: 'size-4', iconKey: PsIconKey.Upload }), loadingLabel: labels.finishing, onClick: onFinish, children: pages.length === 1
+                            ? labels.finishOne
+                            : PsScanTemplateService.fill(labels.finish, { count: pages.length }) })] })] }));
 };

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, 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' })] }));

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,40 +1,67 @@
 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',
+    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',
-    cameraUnavailable: 'No camera is available here. Take a photo or choose existing photos instead.',
-    backToPages: 'Back to pages',
-    capture: 'Capture page',
+    capture: 'Take photo',
+    choosePhoto: 'Choose a photo instead',
     choosePhotos: 'Choose photos',
     close: 'Close scanner',
     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',
+    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.',
+    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',
+    done: 'Done',
     dragPage: 'Drag {page} to reorder',
-    editCrop: 'Edit edges',
+    editCrop: 'Crop',
     edgesFound: 'Page edges found.',
-    edgesNotFound: 'Edges not found. Adjust the corners.',
+    edgesNotFound: 'Edges not found. Drag the corners to the page.',
     filterColour: 'Colour',
-    filterDocument: 'Black and white',
+    filterDocument: 'Document',
     filterGreyscale: 'Greyscale',
     filterOriginal: 'Original',
-    filters: 'Enhance',
-    finish: 'Use scan',
+    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.',
-    moveDown: 'Move {page} down',
-    moveUp: 'Move {page} up',
+    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',
+    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}.',
@@ -43,8 +70,11 @@ export const PsDocumentScannerLabels = {
     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',
+    viewPages: 'Review {count} pages',
 };

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,12 @@
+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',
+    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

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

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

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