@pallasoft/ps-file-components 1.4.0 → 2.0.0

package/dist/components/ps-scan-denied-steps.js

@@ -0,0 +1,33 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.PsScanDeniedSteps = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const ps_design_system_1 = require("@pallasoft/ps-design-system");
+const ps_scan_platform_1 = require("../constants/ps-scan-platform");
+const ps_scan_platform_service_1 = require("../services/ps-scan-platform-service");
+const PsScanDeniedSteps = ({ labels }) => {
+    const [platform, setPlatform] = (0, react_1.useState)(() => ps_scan_platform_service_1.PsScanPlatformService.detect());
+    const platforms = [
+        {
+            key: ps_scan_platform_1.PsScanPlatform.Ios,
+            label: labels.platformIos,
+            steps: [labels.deniedIos1, labels.deniedIos2, labels.deniedIos3],
+        },
+        {
+            key: ps_scan_platform_1.PsScanPlatform.Android,
+            label: labels.platformAndroid,
+            steps: [labels.deniedAndroid1, labels.deniedAndroid2, labels.deniedAndroid3],
+        },
+        {
+            key: ps_scan_platform_1.PsScanPlatform.Desktop,
+            label: labels.platformDesktop,
+            steps: [labels.deniedDesktop1, labels.deniedDesktop2, labels.deniedDesktop3],
+        },
+    ];
+    const active = platforms.find((item) => item.key === platform);
+    return ((0, jsx_runtime_1.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: [(0, jsx_runtime_1.jsx)("div", { className: 'grid grid-cols-3 gap-1 rounded-ps-control bg-black/40 p-1', role: 'group', children: platforms.map((item) => ((0, jsx_runtime_1.jsx)("button", { "aria-pressed": item.key === platform, className: ps_design_system_1.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))) }), (0, jsx_runtime_1.jsx)("ol", { className: 'flex flex-col gap-3', children: (active === undefined ? [] : active.steps).map((step, index) => ((0, jsx_runtime_1.jsxs)("li", { className: 'flex items-start gap-3 text-sm leading-5 text-white/85', children: [(0, jsx_runtime_1.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 }), (0, jsx_runtime_1.jsx)("span", { className: 'pt-0.5', children: step })] }, step))) })] }));
+};
+exports.PsScanDeniedSteps = PsScanDeniedSteps;

package/dist/components/ps-scan-icon-button.d.ts

@@ -1,10 +1,11 @@
-import type { ReactNode } from 'react';
+import { type PsIconKey } from '@pallasoft/ps-icons';
 export interface PsScanIconButtonProps {
-    children: ReactNode;
     className?: string;
     disabled?: boolean;
+    iconClassName?: string;
+    iconKey: PsIconKey;
     isPressed?: boolean;
     label: string;
     onClick: () => void;
 }
-export declare const PsScanIconButton: ({ children, className, disabled, isPressed, label, onClick, }: PsScanIconButtonProps) => import("react").JSX.Element;
+export declare const PsScanIconButton: ({ className, disabled, iconClassName, iconKey, isPressed, label, onClick, }: PsScanIconButtonProps) => import("react").JSX.Element;

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

@@ -3,5 +3,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.PsScanIconButton = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const ps_design_system_1 = require("@pallasoft/ps-design-system");
-const PsScanIconButton = ({ children, className, disabled, isPressed, label, onClick, }) => ((0, jsx_runtime_1.jsx)("button", { "aria-label": label, "aria-pressed": isPressed, className: ps_design_system_1.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 }));
+const ps_icons_1 = require("@pallasoft/ps-icons");
+const ps_scan_chrome_classes_1 = require("../constants/ps-scan-chrome-classes");
+const PsScanIconButton = ({ className, disabled, iconClassName, iconKey, isPressed, label, onClick, }) => ((0, jsx_runtime_1.jsx)("button", { "aria-label": label, "aria-pressed": isPressed, className: ps_design_system_1.PallasoftClassNameService.merge(ps_scan_chrome_classes_1.PsScanChromeClasses.icon, isPressed ? ps_scan_chrome_classes_1.PsScanChromeClasses.iconOn : ps_scan_chrome_classes_1.PsScanChromeClasses.iconOff, className), disabled: disabled, onClick: onClick, title: label, type: 'button', children: (0, jsx_runtime_1.jsx)(ps_icons_1.PsIcon, { "aria-hidden": 'true', className: ps_design_system_1.PallasoftClassNameService.merge('size-ps-control-icon-standalone', iconClassName), iconKey: iconKey }) }));
 exports.PsScanIconButton = PsScanIconButton;

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

@@ -0,0 +1 @@
+export declare const PsScanIllustration: () => import("react").JSX.Element;

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

@@ -0,0 +1,6 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.PsScanIllustration = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const PsScanIllustration = () => ((0, jsx_runtime_1.jsxs)("svg", { "aria-hidden": 'true', className: 'h-auto w-40', fill: 'none', viewBox: '0 0 160 160', children: [(0, jsx_runtime_1.jsx)("rect", { className: 'fill-white/5 stroke-white/15', height: '148', rx: '28', width: '148', x: '6', y: '6' }), (0, jsx_runtime_1.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' }), (0, jsx_runtime_1.jsx)("path", { className: 'stroke-black/25', d: 'M62 52h36M62 64h28M62 76h36M62 88h20M88 100h10', strokeLinecap: 'round', strokeWidth: '4' }), (0, jsx_runtime_1.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' }), (0, jsx_runtime_1.jsx)("rect", { className: 'fill-primary motion-safe:animate-pulse', height: '4', rx: '2', width: '96', x: '32', y: '78' })] }));
+exports.PsScanIllustration = PsScanIllustration;

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

@@ -0,0 +1,10 @@
+import type { PsPageSize } from '../models/ps-page-size';
+import type { PsPoint } from '../models/ps-point';
+import type { PsScanQuad } from '../models/ps-scan-quad';
+export interface PsScanLoupeProps {
+    corners: PsScanQuad;
+    point: PsPoint;
+    source: string;
+    stage: PsPageSize;
+}
+export declare const PsScanLoupe: ({ corners, point, source, stage }: PsScanLoupeProps) => import("react").JSX.Element;

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

@@ -0,0 +1,31 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.PsScanLoupe = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const ps_scan_config_1 = require("../constants/ps-scan-config");
+const PsScanLoupe = ({ corners, point, source, stage }) => {
+    const size = ps_scan_config_1.PsScanConfig.loupeSize;
+    const zoom = ps_scan_config_1.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 - ps_scan_config_1.PsScanConfig.loupeOffset - size < 0;
+    const left = Math.min(Math.max(pointX - size / 2, -size / 4), stage.width - (size * 3) / 4);
+    const top = isBelow
+        ? pointY + ps_scan_config_1.PsScanConfig.loupeOffset
+        : pointY - ps_scan_config_1.PsScanConfig.loupeOffset - size;
+    return ((0, jsx_runtime_1.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: (0, jsx_runtime_1.jsxs)("svg", { className: 'absolute inset-0 size-full', viewBox: `0 0 ${size} ${size}`, children: [(0, jsx_runtime_1.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' }), (0, jsx_runtime_1.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' })] }) }));
+};
+exports.PsScanLoupe = PsScanLoupe;

package/dist/components/ps-scan-permission-view.d.ts

@@ -0,0 +1,10 @@
+import { PsDocumentScannerLabels } from '../constants/ps-document-scanner-labels';
+import { PsScanCameraStatus } from '../constants/ps-scan-camera-status';
+import type { PsLabelSet } from '../models/ps-label-set';
+export interface PsScanPermissionViewProps {
+    labels: PsLabelSet<typeof PsDocumentScannerLabels>;
+    onAllow: () => void;
+    onFile: (file: File) => void;
+    status: PsScanCameraStatus;
+}
+export declare const PsScanPermissionView: ({ labels, onAllow, onFile, status, }: PsScanPermissionViewProps) => import("react").JSX.Element;

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

@@ -0,0 +1,48 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.PsScanPermissionView = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const ps_core_components_1 = require("@pallasoft/ps-core-components");
+const ps_icons_1 = require("@pallasoft/ps-icons");
+const ps_scan_camera_status_1 = require("../constants/ps-scan-camera-status");
+const ps_scan_button_1 = require("./ps-scan-button");
+const ps_scan_denied_steps_1 = require("./ps-scan-denied-steps");
+const ps_scan_illustration_1 = require("./ps-scan-illustration");
+const ps_scan_photo_button_1 = require("./ps-scan-photo-button");
+const PsScanPermissionView = ({ labels, onAllow, onFile, status, }) => {
+    if (status === ps_scan_camera_status_1.PsScanCameraStatus.Checking || status === ps_scan_camera_status_1.PsScanCameraStatus.Starting)
+        return ((0, jsx_runtime_1.jsxs)("div", { className: 'flex h-full flex-col items-center justify-center gap-3 text-sm text-white/75', role: 'status', children: [(0, jsx_runtime_1.jsx)(ps_core_components_1.PsSpinner, { color: 'current', label: labels.cameraStarting, size: 'small' }), (0, jsx_runtime_1.jsx)("span", { children: labels.cameraStarting })] }));
+    const screens = {
+        [ps_scan_camera_status_1.PsScanCameraStatus.Busy]: {
+            body: labels.busyBody,
+            iconKey: ps_icons_1.PsIconKey.Camera,
+            title: labels.busyTitle,
+        },
+        [ps_scan_camera_status_1.PsScanCameraStatus.Denied]: {
+            body: labels.deniedBody,
+            iconKey: ps_icons_1.PsIconKey.CameraOff,
+            title: labels.deniedTitle,
+        },
+        [ps_scan_camera_status_1.PsScanCameraStatus.Insecure]: {
+            body: labels.insecureBody,
+            iconKey: ps_icons_1.PsIconKey.Shield,
+            title: labels.insecureTitle,
+        },
+        [ps_scan_camera_status_1.PsScanCameraStatus.Prompt]: {
+            body: labels.primerBody,
+            iconKey: ps_icons_1.PsIconKey.Camera,
+            title: labels.primerTitle,
+        },
+        [ps_scan_camera_status_1.PsScanCameraStatus.Ready]: { body: '', iconKey: ps_icons_1.PsIconKey.Camera, title: '' },
+        [ps_scan_camera_status_1.PsScanCameraStatus.Unavailable]: {
+            body: labels.unavailableBody,
+            iconKey: ps_icons_1.PsIconKey.CameraOff,
+            title: labels.unavailableTitle,
+        },
+    };
+    const screen = screens[status];
+    const isPrimer = status === ps_scan_camera_status_1.PsScanCameraStatus.Prompt;
+    const canRetry = status === ps_scan_camera_status_1.PsScanCameraStatus.Denied || status === ps_scan_camera_status_1.PsScanCameraStatus.Busy;
+    return ((0, jsx_runtime_1.jsx)("div", { className: 'flex h-full min-h-0 flex-col overflow-y-auto', children: (0, jsx_runtime_1.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 ? ((0, jsx_runtime_1.jsx)(ps_scan_illustration_1.PsScanIllustration, {})) : ((0, jsx_runtime_1.jsx)("span", { className: 'flex size-20 items-center justify-center rounded-full bg-white/10 text-white', children: (0, jsx_runtime_1.jsx)(ps_icons_1.PsIcon, { "aria-hidden": 'true', className: 'size-9', iconKey: screen.iconKey }) })), (0, jsx_runtime_1.jsxs)("div", { className: 'flex flex-col gap-2', children: [(0, jsx_runtime_1.jsx)("h2", { className: 'text-xl font-semibold leading-tight text-white sm:text-2xl', children: screen.title }), (0, jsx_runtime_1.jsx)("p", { className: 'text-sm leading-6 text-white/70', children: screen.body })] }), status === ps_scan_camera_status_1.PsScanCameraStatus.Denied ? (0, jsx_runtime_1.jsx)(ps_scan_denied_steps_1.PsScanDeniedSteps, { labels: labels }) : null, (0, jsx_runtime_1.jsxs)("div", { className: 'flex w-full flex-col gap-3', children: [isPrimer || canRetry ? ((0, jsx_runtime_1.jsx)(ps_scan_button_1.PsScanButton, { className: 'w-full', isLarge: true, isPrimary: true, leadingIcon: isPrimer ? ((0, jsx_runtime_1.jsx)(ps_icons_1.PsIcon, { "aria-hidden": 'true', className: 'size-4', iconKey: ps_icons_1.PsIconKey.Camera })) : undefined, onClick: onAllow, children: isPrimer ? labels.allowCamera : labels.tryAgain })) : null, (0, jsx_runtime_1.jsx)(ps_scan_photo_button_1.PsScanPhotoButton, { className: 'w-full', label: labels.choosePhoto, onFile: onFile })] })] }) }));
+};
+exports.PsScanPermissionView = PsScanPermissionView;

package/dist/components/ps-scan-photo-button.d.ts

@@ -0,0 +1,7 @@
+export interface PsScanPhotoButtonProps {
+    className?: string;
+    isIconOnly?: boolean;
+    label: string;
+    onFile: (file: File) => void;
+}
+export declare const PsScanPhotoButton: ({ className, isIconOnly, label, onFile, }: PsScanPhotoButtonProps) => import("react").JSX.Element;

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

@@ -0,0 +1,20 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.PsScanPhotoButton = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const ps_icons_1 = require("@pallasoft/ps-icons");
+const ps_scan_button_1 = require("./ps-scan-button");
+const ps_scan_icon_button_1 = require("./ps-scan-icon-button");
+const PsScanPhotoButton = ({ className, isIconOnly = false, label, onFile, }) => {
+    const input = (0, react_1.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 ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [isIconOnly ? ((0, jsx_runtime_1.jsx)(ps_scan_icon_button_1.PsScanIconButton, { className: className, iconKey: ps_icons_1.PsIconKey.Image, label: label, onClick: open })) : ((0, jsx_runtime_1.jsx)(ps_scan_button_1.PsScanButton, { className: className, isLarge: true, leadingIcon: (0, jsx_runtime_1.jsx)(ps_icons_1.PsIcon, { "aria-hidden": 'true', className: 'size-4', iconKey: ps_icons_1.PsIconKey.Image }), onClick: open, children: label })), (0, jsx_runtime_1.jsx)("input", { accept: 'image/*', "aria-hidden": 'true', className: 'sr-only', onChange: onChange, ref: input, tabIndex: -1, type: 'file' })] }));
+};
+exports.PsScanPhotoButton = PsScanPhotoButton;

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

@@ -0,0 +1,12 @@
+import { PsDocumentScannerLabels } from '../constants/ps-document-scanner-labels';
+import type { PsLabelSet } from '../models/ps-label-set';
+import type { PsScanResult } from '../models/ps-scan-result';
+export interface PsScanPreviewProps {
+    error: string;
+    labels: PsLabelSet<typeof PsDocumentScannerLabels>;
+    onAdjust: () => void;
+    onRetake: () => void;
+    onUse: () => void;
+    result: PsScanResult | null;
+}
+export declare const PsScanPreview: ({ error, labels, onAdjust, onRetake, onUse, result, }: PsScanPreviewProps) => import("react").JSX.Element;

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

@@ -0,0 +1,10 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.PsScanPreview = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const ps_core_components_1 = require("@pallasoft/ps-core-components");
+const ps_icons_1 = require("@pallasoft/ps-icons");
+const ps_scan_button_1 = require("./ps-scan-button");
+const ps_scan_icon_button_1 = require("./ps-scan-icon-button");
+const PsScanPreview = ({ error, labels, onAdjust, onRetake, onUse, result, }) => ((0, jsx_runtime_1.jsxs)("div", { className: 'flex h-full min-h-0 flex-col bg-black text-white animate-ps-fade-in', children: [(0, jsx_runtime_1.jsxs)("header", { className: 'grid shrink-0 grid-cols-[2.75rem_1fr_2.75rem] items-center gap-3 px-4 pb-1 pt-[max(1rem,env(safe-area-inset-top))]', children: [(0, jsx_runtime_1.jsx)(ps_scan_icon_button_1.PsScanIconButton, { iconKey: ps_icons_1.PsIconKey.Crop, label: labels.cropTitle, onClick: onAdjust }), (0, jsx_runtime_1.jsx)("h2", { className: 'truncate text-center text-base font-semibold', children: labels.previewTitle }), (0, jsx_runtime_1.jsx)("span", { "aria-hidden": 'true' })] }), (0, jsx_runtime_1.jsx)("div", { className: 'flex min-h-0 flex-1 items-center justify-center px-6 py-4', children: result === null ? ((0, jsx_runtime_1.jsxs)("div", { className: 'flex flex-col items-center gap-3 text-sm text-white/75', role: 'status', children: [(0, jsx_runtime_1.jsx)(ps_core_components_1.PsSpinner, { color: 'current', label: labels.preparing, size: 'small' }), (0, jsx_runtime_1.jsx)("span", { children: labels.preparing })] })) : ((0, jsx_runtime_1.jsx)("img", { alt: labels.previewAlt, className: 'max-h-full max-w-full rounded-sm bg-white object-contain shadow-[0_24px_60px_-20px_rgb(0_0_0/0.9)] animate-ps-fade-in', src: result.url })) }), error === '' ? null : ((0, jsx_runtime_1.jsx)("p", { className: 'mx-auto mb-2 max-w-sm rounded-ps-control bg-danger px-3 py-2 text-center text-sm text-white', role: 'alert', children: error })), (0, jsx_runtime_1.jsxs)("footer", { className: 'mx-auto grid w-full max-w-md shrink-0 grid-cols-2 gap-3 px-4 pb-[max(1.25rem,env(safe-area-inset-bottom))] pt-2', children: [(0, jsx_runtime_1.jsx)(ps_scan_button_1.PsScanButton, { isLarge: true, onClick: onRetake, children: labels.retake }), (0, jsx_runtime_1.jsx)(ps_scan_button_1.PsScanButton, { disabled: result === null, isLarge: true, isPrimary: true, leadingIcon: (0, jsx_runtime_1.jsx)(ps_icons_1.PsIcon, { "aria-hidden": 'true', className: 'size-4', iconKey: ps_icons_1.PsIconKey.Check }), onClick: onUse, children: labels.useScan })] })] }));
+exports.PsScanPreview = PsScanPreview;

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

@@ -0,0 +1,6 @@
+export interface PsScanShutterProps {
+    disabled: boolean;
+    label: string;
+    onCapture: () => void;
+}
+export declare const PsScanShutter: ({ disabled, label, onCapture }: PsScanShutterProps) => import("react").JSX.Element;

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

@@ -0,0 +1,6 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.PsScanShutter = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const PsScanShutter = ({ disabled, label, onCapture }) => ((0, jsx_runtime_1.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: [(0, jsx_runtime_1.jsx)("svg", { "aria-hidden": 'true', className: 'absolute inset-0 size-full -rotate-90', viewBox: '0 0 76 76', children: (0, jsx_runtime_1.jsx)("circle", { className: 'stroke-white', cx: '38', cy: '38', fill: 'none', r: '35', strokeWidth: '4' }) }), (0, jsx_runtime_1.jsx)("span", { className: 'size-[3.75rem] rounded-full bg-white transition-transform duration-150 group-active:scale-90' })] }));
+exports.PsScanShutter = PsScanShutter;

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

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

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

@@ -0,0 +1,28 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.PsScanViewfinderOverlay = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const ps_scan_config_1 = require("../constants/ps-scan-config");
+const ps_scan_geometry_service_1 = require("../services/ps-scan-geometry-service");
+const PsScanViewfinderOverlay = ({ area, quad, video }) => {
+    if (area.width <= 0 || area.height <= 0)
+        return null;
+    const box = ps_scan_geometry_service_1.PsScanGeometryService.cover(area, video);
+    const left = (area.width - box.width) / 2;
+    const top = (area.height - box.height) / 2;
+    const frameHeight = Math.min(area.height * ps_scan_config_1.PsScanConfig.guideHeightRatio, (area.width * ps_scan_config_1.PsScanConfig.guideWidthRatio) / ps_scan_config_1.PsScanConfig.guideAspect);
+    const frameWidth = frameHeight * ps_scan_config_1.PsScanConfig.guideAspect;
+    const frameLeft = (area.width - frameWidth) / 2;
+    const frameTop = (area.height - frameHeight) / 2 - area.height * ps_scan_config_1.PsScanConfig.guideLift;
+    const arm = Math.min(ps_scan_config_1.PsScanConfig.guideArm, frameWidth * ps_scan_config_1.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 ((0, jsx_runtime_1.jsx)("svg", { "aria-hidden": 'true', className: 'pointer-events-none absolute inset-0 size-full', viewBox: `0 0 ${area.width} ${area.height}`, children: quad === null || box.width === 0 ? ((0, jsx_runtime_1.jsx)("path", { className: 'stroke-white/75 animate-ps-fade-in', d: corners, fill: 'none', strokeLinecap: 'round', strokeLinejoin: 'round', strokeWidth: '4' })) : ((0, jsx_runtime_1.jsx)("polygon", { className: 'fill-primary/10 stroke-primary', points: quad
+                .map((point) => `${left + point.x * box.width},${top + point.y * box.height}`)
+                .join(' '), strokeLinejoin: 'round', strokeWidth: '3' })) }));
+};
+exports.PsScanViewfinderOverlay = PsScanViewfinderOverlay;

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

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

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

@@ -1,50 +1,51 @@
 export declare const PsDocumentScannerLabels: {
-    readonly addPage: "Add page";
-    readonly autoDetect: "Auto-detect edges";
-    readonly cameraDenied: "Camera access was blocked. Allow it in your browser settings, or take a photo or choose existing photos instead.";
+    readonly allowCamera: "Allow camera";
+    readonly autoDetect: "Detect edges";
+    readonly busyBody: "Another app is using the camera. Close it, then try again.";
+    readonly busyTitle: "Your camera is busy";
     readonly cameraStarting: "Starting camera";
-    readonly cameraUnavailable: "No camera is available here. Take a photo or choose existing photos instead.";
-    readonly backToPages: "Back to pages";
-    readonly capture: "Capture page";
-    readonly choosePhotos: "Choose photos";
+    readonly capture: "Take photo";
+    readonly choosePhoto: "Choose a photo instead";
     readonly close: "Close scanner";
+    readonly continue: "Continue";
     readonly cornerBottomLeft: "Bottom left corner";
     readonly cornerBottomRight: "Bottom right corner";
     readonly cornerTopLeft: "Top left corner";
     readonly cornerTopRight: "Top right corner";
-    readonly cropApply: "Use crop";
-    readonly cropHint: "Drag the corners to fit the page, or use the arrow keys on a focused corner.";
-    readonly cropTitle: "Adjust edges";
-    readonly deletePage: "Delete page";
-    readonly dragPage: "Drag {page} to reorder";
-    readonly editCrop: "Edit edges";
+    readonly cropHint: "Drag the corners to the edges of the page.";
+    readonly cropTitle: "Adjust corners";
+    readonly deniedAndroid1: "Tap the icon to the left of the address bar.";
+    readonly deniedAndroid2: "Open Permissions, then Camera.";
+    readonly deniedAndroid3: "Choose Allow, then come back and tap Try again.";
+    readonly deniedBody: "You can turn it back on in a few taps.";
+    readonly deniedDesktop1: "Click the camera or site icon in the address bar.";
+    readonly deniedDesktop2: "Set Camera to Allow for this site.";
+    readonly deniedDesktop3: "Close the menu, then click Try again.";
+    readonly deniedIos1: "Tap aA in the address bar, then Website Settings.";
+    readonly deniedIos2: "Set Camera to Allow.";
+    readonly deniedIos3: "Come back and tap Try again.";
+    readonly deniedTitle: "Camera access is off";
     readonly edgesFound: "Page edges found.";
-    readonly edgesNotFound: "Edges not found. Adjust the corners.";
-    readonly filterColour: "Colour";
-    readonly filterDocument: "Black and white";
-    readonly filterGreyscale: "Greyscale";
-    readonly filterOriginal: "Original";
-    readonly filters: "Enhance";
-    readonly finish: "Use scan";
-    readonly finishing: "Preparing your scan";
-    readonly maxPages: "You reached the page limit.";
-    readonly moveDown: "Move {page} down";
-    readonly moveUp: "Move {page} up";
-    readonly page: "Page";
-    readonly pageAdded: "Page {position} added.";
-    readonly pageDeleted: "Page deleted.";
-    readonly pageMoved: "{page} moved to position {position} of {count}.";
-    readonly pages: "Pages";
+    readonly edgesNotFound: "Edges not found. Drag the corners to the page.";
+    readonly hintFind: "Point your camera at a document";
+    readonly hintFound: "Document found";
+    readonly insecureBody: "The camera only works on a secure (https) page. You can still choose a photo.";
+    readonly insecureTitle: "Camera not available here";
+    readonly platformAndroid: "Android";
+    readonly platformDesktop: "Computer";
+    readonly platformIos: "iPhone";
+    readonly preparing: "Preparing your scan";
+    readonly previewAlt: "Your flattened scan";
+    readonly previewTitle: "Your scan";
+    readonly primerBody: "The camera is only used while the scanner is open. Nothing is saved until you upload.";
+    readonly primerTitle: "Allow camera access to scan your documents";
     readonly processFailed: "The scan could not be prepared. Try again.";
-    readonly reorderCancelled: "{page} stays where it was.";
-    readonly reorderDropped: "{page} dropped at {position} of {count}.";
-    readonly reorderInstructions: "Press space to lift a page, the arrow keys to move it and space to drop it.";
-    readonly reorderLifted: "{page} lifted from {position} of {count}.";
-    readonly reorderMoved: "{page} is now {position} of {count}.";
     readonly retake: "Retake";
-    readonly rotate: "Rotate";
-    readonly takePhoto: "Take photo";
     readonly title: "Scan document";
-    readonly torchOff: "Turn light off";
-    readonly torchOn: "Turn light on";
+    readonly torchOff: "Turn flash off";
+    readonly torchOn: "Turn flash on";
+    readonly tryAgain: "Try again";
+    readonly unavailableBody: "This device has no camera the browser can use. Choose a photo of the page instead.";
+    readonly unavailableTitle: "No camera found";
+    readonly useScan: "Use scan";
 };

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

@@ -2,52 +2,53 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.PsDocumentScannerLabels = void 0;
 exports.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/constants/ps-file-picker-labels.d.ts

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

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

@@ -2,10 +2,12 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.PsFilePickerLabels = void 0;
 exports.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/constants/ps-scan-camera-status.d.ts

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

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

@@ -2,7 +2,11 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.PsScanCameraStatus = void 0;
 exports.PsScanCameraStatus = {
+    Busy: 'busy',
+    Checking: 'checking',
     Denied: 'denied',
+    Insecure: 'insecure',
+    Prompt: 'prompt',
     Ready: 'ready',
     Starting: 'starting',
     Unavailable: 'unavailable',

package/dist/constants/ps-scan-chrome-classes.d.ts

@@ -0,0 +1,10 @@
+export declare const PsScanChromeClasses: {
+    readonly 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";
+    readonly buttonLarge: "ps-control-large ps-control-padding-large";
+    readonly buttonPrimary: "border-primary bg-primary text-[color:var(--ps-color-primary-contrast)] hover:border-primary-dark hover:bg-primary-dark";
+    readonly buttonQuiet: "border-white/15 bg-white/10 text-white hover:border-white/25 hover:bg-white/20";
+    readonly 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";
+    readonly iconOff: "bg-black/45 backdrop-blur-md hover:bg-white/20";
+    readonly iconOn: "bg-white text-black hover:bg-white/90";
+    readonly 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/constants/ps-scan-chrome-classes.js

@@ -0,0 +1,13 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.PsScanChromeClasses = void 0;
+exports.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',
+};