@pallasoft/ps-file-components 1.3.0 → 1.5.0

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

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

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

@@ -0,0 +1,40 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.PsDocumentScannerLoader = void 0;
+const react_1 = require("react");
+exports.PsDocumentScannerLoader = (0, react_1.lazy)(() => Promise.resolve().then(() => __importStar(require('./ps-document-scanner-sheet'))).then((module) => ({
+    default: module.PsDocumentScannerSheet,
+})));

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

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

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

@@ -0,0 +1,186 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.PsDocumentScannerSheet = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const ps_core_components_1 = require("@pallasoft/ps-core-components");
+const ps_design_system_1 = require("@pallasoft/ps-design-system");
+const ps_icons_1 = require("@pallasoft/ps-icons");
+const react_dom_1 = require("react-dom");
+const ps_scan_camera_status_1 = require("../constants/ps-scan-camera-status");
+const ps_scan_step_1 = require("../constants/ps-scan-step");
+const use_ps_focus_trap_1 = require("../hooks/use-ps-focus-trap");
+const use_ps_scan_camera_1 = require("../hooks/use-ps-scan-camera");
+const use_ps_scan_live_detection_1 = require("../hooks/use-ps-scan-live-detection");
+const use_ps_scan_pages_1 = require("../hooks/use-ps-scan-pages");
+const use_ps_scan_previews_1 = require("../hooks/use-ps-scan-previews");
+const ps_scan_output_service_1 = require("../services/ps-scan-output-service");
+const ps_scan_pipeline_service_1 = require("../services/ps-scan-pipeline-service");
+const ps_scan_template_service_1 = require("../services/ps-scan-template-service");
+const ps_scan_camera_view_1 = require("./ps-scan-camera-view");
+const ps_scan_crop_editor_1 = require("./ps-scan-crop-editor");
+const ps_scan_icon_button_1 = require("./ps-scan-icon-button");
+const ps_scan_permission_view_1 = require("./ps-scan-permission-view");
+const ps_scan_review_1 = require("./ps-scan-review");
+const PsDocumentScannerSheet = ({ fileName, isAutoCapture, jpegQuality, labels, maxDimension, maxPages, onClose, onComplete, outputFormat, }) => {
+    const tier = (0, ps_core_components_1.usePsViewport)();
+    const zIndex = (0, ps_core_components_1.usePsLayerZIndex)(ps_design_system_1.PallasoftZIndex.Modal);
+    const content = (0, react_1.useRef)(null);
+    const { add, move, pages, remove, replace, setCorners, update } = (0, use_ps_scan_pages_1.usePsScanPages)();
+    const [step, setStep] = (0, react_1.useState)(ps_scan_step_1.PsScanStep.Camera);
+    const [cropReturn, setCropReturn] = (0, react_1.useState)(ps_scan_step_1.PsScanStep.Camera);
+    const [activeId, setActiveId] = (0, react_1.useState)('');
+    const [retakeId, setRetakeId] = (0, react_1.useState)('');
+    const [announcement, setAnnouncement] = (0, react_1.useState)('');
+    const [error, setError] = (0, react_1.useState)('');
+    const [isBusy, setIsBusy] = (0, react_1.useState)(false);
+    const [isCapturing, setIsCapturing] = (0, react_1.useState)(false);
+    const [isAuto, setIsAuto] = (0, react_1.useState)(isAutoCapture);
+    const [flashKey, setFlashKey] = (0, react_1.useState)(0);
+    const camera = (0, use_ps_scan_camera_1.usePsScanCamera)(step === ps_scan_step_1.PsScanStep.Camera);
+    const isReady = camera.status === ps_scan_camera_status_1.PsScanCameraStatus.Ready;
+    const isFull = pages.length >= maxPages;
+    const previews = (0, use_ps_scan_previews_1.usePsScanPreviews)(pages);
+    const page = pages.find((item) => item.id === activeId);
+    const lastPage = pages[pages.length - 1];
+    const isDesktop = tier === ps_design_system_1.PallasoftViewportTier.Desktop;
+    const isCameraStep = step === ps_scan_step_1.PsScanStep.Camera;
+    const showsCamera = isReady || camera.status === ps_scan_camera_status_1.PsScanCameraStatus.Starting;
+    (0, ps_core_components_1.usePsScrollLock)(true);
+    (0, ps_core_components_1.usePsRestoreFocus)(true);
+    (0, use_ps_focus_trap_1.usePsFocusTrap)(content, true, onClose);
+    const edgeMessage = (isDetected) => isDetected ? labels.edgesFound : labels.edgesNotFound;
+    const addFiles = async (files, after) => {
+        setError('');
+        try {
+            const images = files.filter((file) => file.type === '' || file.type.startsWith('image/'));
+            if (retakeId !== '' && images.length > 0) {
+                const added = await replace(retakeId, images[0]);
+                setActiveId(retakeId);
+                setRetakeId('');
+                setStep(ps_scan_step_1.PsScanStep.Crop);
+                setAnnouncement(edgeMessage(added.isDetected));
+                return;
+            }
+            const room = Math.max(0, maxPages - pages.length);
+            if (images.length > room)
+                setError(labels.maxPages);
+            const added = await add(images.slice(0, room));
+            if (added.length === 0)
+                return;
+            const position = pages.length + added.length;
+            setActiveId(added[added.length - 1].page.id);
+            setAnnouncement(ps_scan_template_service_1.PsScanTemplateService.fill(labels.pageAdded, { position }));
+            if (after === null)
+                return;
+            if (added.length === 1) {
+                setCropReturn(after);
+                setStep(ps_scan_step_1.PsScanStep.Crop);
+                setAnnouncement(edgeMessage(added[0].isDetected));
+            }
+            else
+                setStep(ps_scan_step_1.PsScanStep.Review);
+        }
+        catch {
+            setError(labels.processFailed);
+        }
+    };
+    const capture = async (isAutomatic) => {
+        if (isCapturing || isFull)
+            return;
+        setIsCapturing(true);
+        try {
+            const blob = await camera.capture();
+            if (blob === null)
+                return;
+            setFlashKey((current) => current + 1);
+            await addFiles([blob], isAutomatic && retakeId === '' ? null : ps_scan_step_1.PsScanStep.Camera);
+        }
+        finally {
+            setIsCapturing(false);
+        }
+    };
+    const detection = (0, use_ps_scan_live_detection_1.usePsScanLiveDetection)(camera.videoRef, isCameraStep && isReady, isAuto, () => capture(true));
+    const autoDetect = async () => {
+        if (page === undefined)
+            return;
+        const prepared = await ps_scan_pipeline_service_1.PsScanPipelineService.prepare(page.source);
+        setCorners(page.id, prepared.corners);
+        setAnnouncement(edgeMessage(prepared.isDetected));
+    };
+    const keep = () => setStep(cropReturn === ps_scan_step_1.PsScanStep.Camera && !isFull ? ps_scan_step_1.PsScanStep.Camera : ps_scan_step_1.PsScanStep.Review);
+    const retake = () => {
+        if (page === undefined)
+            return;
+        if (step === ps_scan_step_1.PsScanStep.Review)
+            setCropReturn(ps_scan_step_1.PsScanStep.Review);
+        setRetakeId(page.id);
+        setStep(ps_scan_step_1.PsScanStep.Camera);
+    };
+    const openCamera = () => {
+        setRetakeId('');
+        setCropReturn(ps_scan_step_1.PsScanStep.Camera);
+        setStep(ps_scan_step_1.PsScanStep.Camera);
+    };
+    const openReview = () => {
+        if (pages.length === 0)
+            return;
+        setRetakeId('');
+        if (page === undefined)
+            setActiveId(lastPage.id);
+        setStep(ps_scan_step_1.PsScanStep.Review);
+    };
+    const editCrop = () => {
+        setCropReturn(ps_scan_step_1.PsScanStep.Review);
+        setStep(ps_scan_step_1.PsScanStep.Crop);
+    };
+    const deletePage = () => {
+        if (page === undefined)
+            return;
+        const index = pages.findIndex((item) => item.id === page.id);
+        const rest = pages.filter((item) => item.id !== page.id);
+        remove(page.id);
+        setAnnouncement(labels.pageDeleted);
+        if (rest.length === 0) {
+            setActiveId('');
+            openCamera();
+        }
+        else
+            setActiveId(rest[Math.min(index, rest.length - 1)].id);
+    };
+    const finish = async () => {
+        setIsBusy(true);
+        setError('');
+        try {
+            const files = await ps_scan_output_service_1.PsScanOutputService.build(pages, {
+                fileName,
+                format: outputFormat,
+                jpegQuality,
+                maxDimension,
+            });
+            onComplete(files);
+            onClose();
+        }
+        catch {
+            setError(labels.processFailed);
+            setIsBusy(false);
+        }
+    };
+    const moveTo = (0, react_1.useCallback)((from, to) => {
+        move(from, to);
+        setAnnouncement(ps_scan_template_service_1.PsScanTemplateService.fill(labels.pageMoved, {
+            count: pages.length,
+            page: `${labels.page} ${from + 1}`,
+            position: to + 1,
+        }));
+    }, [move, pages.length, labels]);
+    const fromLibrary = (files) => addFiles(files, ps_scan_step_1.PsScanStep.Review);
+    if (typeof document === 'undefined')
+        return null;
+    return (0, react_dom_1.createPortal)((0, jsx_runtime_1.jsx)("div", { "aria-label": labels.title, "aria-modal": 'true', className: isDesktop
+            ? 'fixed inset-0 flex items-center justify-center bg-black/70 p-6 backdrop-blur-sm animate-ps-fade-in'
+            : 'fixed inset-0 bg-black animate-ps-fade-in', role: 'dialog', style: { zIndex }, children: (0, jsx_runtime_1.jsx)(ps_core_components_1.PsLayer, { zIndex: zIndex, children: (0, jsx_runtime_1.jsxs)("div", { className: isDesktop
+                    ? 'relative h-[min(52rem,calc(100dvh-3rem))] w-[min(76rem,calc(100vw-3rem))] overflow-hidden rounded-2xl bg-black text-white shadow-2xl ring-1 ring-white/10 animate-ps-scale-in'
+                    : 'relative h-full overflow-hidden bg-black text-white', ref: content, children: [(0, jsx_runtime_1.jsx)("p", { "aria-live": 'polite', className: 'sr-only', role: 'status', children: announcement }), isCameraStep && showsCamera ? ((0, jsx_runtime_1.jsx)(ps_scan_camera_view_1.PsScanCameraView, { canTorch: camera.canTorch, detection: detection, flashKey: flashKey, isAuto: isAuto, isBusy: isCapturing, isFull: isFull, isMultiple: maxPages > 1, isReady: isReady, isTorchOn: camera.isTorchOn, labels: labels, lastPreview: lastPage === undefined ? undefined : previews[lastPage.id], onCapture: () => capture(false), onClose: onClose, onDone: openReview, onFiles: fromLibrary, onToggleAuto: () => setIsAuto((current) => !current), onToggleTorch: camera.toggleTorch, pageCount: pages.length, videoRef: camera.videoRef, videoTarget: camera.attachVideo })) : null, isCameraStep && !showsCamera ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(ps_scan_permission_view_1.PsScanPermissionView, { isMultiple: maxPages > 1, labels: labels, onAllow: camera.allow, onFiles: fromLibrary, status: camera.status }), (0, jsx_runtime_1.jsx)("div", { className: 'absolute left-4 top-[max(1rem,env(safe-area-inset-top))] flex gap-2', children: (0, jsx_runtime_1.jsx)(ps_scan_icon_button_1.PsScanIconButton, { iconKey: ps_icons_1.PsIconKey.Close, label: labels.close, onClick: onClose }) }), pages.length > 0 ? ((0, jsx_runtime_1.jsx)("div", { className: 'absolute right-4 top-[max(1rem,env(safe-area-inset-top))]', children: (0, jsx_runtime_1.jsx)(ps_scan_icon_button_1.PsScanIconButton, { iconKey: ps_icons_1.PsIconKey.Check, label: ps_scan_template_service_1.PsScanTemplateService.fill(labels.viewPages, { count: pages.length }), onClick: openReview }) })) : null] })) : null, step === ps_scan_step_1.PsScanStep.Crop && page !== undefined ? ((0, jsx_runtime_1.jsx)(ps_scan_crop_editor_1.PsScanCropEditor, { labels: labels, onAutoDetect: autoDetect, onChange: (corners) => setCorners(page.id, corners), onKeep: keep, onRetake: retake, page: page })) : null, step === ps_scan_step_1.PsScanStep.Review && page !== undefined ? ((0, jsx_runtime_1.jsx)(ps_scan_review_1.PsScanReview, { canAddPage: !isFull, error: error, isBusy: isBusy, labels: labels, onAddPage: openCamera, onClose: onClose, onDelete: deletePage, onEditCrop: editCrop, onFilter: (filter) => update(page.id, { filter }), onFinish: finish, onMove: moveTo, onRetake: retake, onRotate: () => update(page.id, { rotation: (page.rotation + 90) % 360 }), onSelect: setActiveId, page: page, pages: pages, previews: previews })) : null, isCameraStep && error !== '' ? ((0, jsx_runtime_1.jsx)("p", { className: 'absolute inset-x-4 bottom-36 mx-auto max-w-sm rounded-ps-control bg-danger px-3 py-2 text-center text-sm text-white', role: 'alert', children: error })) : null] }) }) }), document.body);
+};
+exports.PsDocumentScannerSheet = PsDocumentScannerSheet;

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

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

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

@@ -0,0 +1,17 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.PsDocumentScanner = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const ps_core_components_1 = require("@pallasoft/ps-core-components");
+const ps_document_scanner_labels_1 = require("../constants/ps-document-scanner-labels");
+const ps_scan_config_1 = require("../constants/ps-scan-config");
+const ps_scan_output_format_1 = require("../constants/ps-scan-output-format");
+const ps_document_scanner_loader_1 = require("./ps-document-scanner-loader");
+const PsDocumentScanner = ({ fileName = ps_scan_config_1.PsScanConfig.defaultFileName, isAutoCapture = false, isOpen, jpegQuality = ps_scan_config_1.PsScanConfig.defaultJpegQuality, labels, maxDimension = ps_scan_config_1.PsScanConfig.defaultMaxDimension, maxPages = ps_scan_config_1.PsScanConfig.defaultMaxPages, onClose, onComplete, outputFormat = ps_scan_output_format_1.PsScanOutputFormat.Pdf, }) => {
+    const isHydrated = (0, ps_core_components_1.usePsHydrated)();
+    if (!isOpen || !isHydrated)
+        return null;
+    return ((0, jsx_runtime_1.jsx)(react_1.Suspense, { fallback: null, children: (0, jsx_runtime_1.jsx)(ps_document_scanner_loader_1.PsDocumentScannerLoader, { fileName: fileName, isAutoCapture: isAutoCapture, jpegQuality: jpegQuality, labels: { ...ps_document_scanner_labels_1.PsDocumentScannerLabels, ...labels }, maxDimension: maxDimension, maxPages: maxPages, onClose: onClose, onComplete: onComplete, outputFormat: outputFormat }) }));
+};
+exports.PsDocumentScanner = PsDocumentScanner;

package/dist/components/ps-file-picker-actions.d.ts

@@ -0,0 +1,10 @@
+export interface PsFilePickerActionsProps {
+    chooseLabel: string;
+    className?: string;
+    disabled: boolean;
+    isTouch: boolean;
+    onChoose: () => void;
+    onScan: () => void;
+    scanLabel?: string;
+}
+export declare const PsFilePickerActions: ({ chooseLabel, className, disabled, isTouch, onChoose, onScan, scanLabel, }: PsFilePickerActionsProps) => import("react").JSX.Element;

package/dist/components/ps-file-picker-actions.js

@@ -0,0 +1,21 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.PsFilePickerActions = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const ps_core_components_1 = require("@pallasoft/ps-core-components");
+const ps_design_system_1 = require("@pallasoft/ps-design-system");
+const ps_icons_1 = require("@pallasoft/ps-icons");
+const PsFilePickerActions = ({ chooseLabel, className, disabled, isTouch, onChoose, onScan, scanLabel, }) => {
+    const hasScan = scanLabel !== undefined;
+    const choose = ((0, jsx_runtime_1.jsx)(ps_core_components_1.PsButton, { className: isTouch ? 'w-full' : '', disabled: disabled, leadingIcon: (0, jsx_runtime_1.jsx)(ps_icons_1.PsIcon, { "aria-hidden": 'true', className: 'size-4', iconKey: ps_icons_1.PsIconKey.Upload }), onClick: (event) => {
+            event.stopPropagation();
+            onChoose();
+        }, size: isTouch ? 'large' : 'default', variant: hasScan && isTouch ? 'surface' : hasScan || isTouch ? 'primary' : 'surface', children: chooseLabel }));
+    return ((0, jsx_runtime_1.jsx)("div", { className: ps_design_system_1.PallasoftClassNameService.merge(isTouch
+            ? 'w-full max-w-xs flex-col gap-2'
+            : 'flex-row flex-wrap items-center justify-center gap-2', className), children: hasScan ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [isTouch ? null : choose, (0, jsx_runtime_1.jsx)(ps_core_components_1.PsButton, { className: isTouch ? 'w-full' : '', disabled: disabled, leadingIcon: (0, jsx_runtime_1.jsx)(ps_icons_1.PsIcon, { "aria-hidden": 'true', className: 'size-4', iconKey: ps_icons_1.PsIconKey.Camera }), onClick: (event) => {
+                        event.stopPropagation();
+                        onScan();
+                    }, size: isTouch ? 'large' : 'default', variant: isTouch ? 'primary' : 'surface', children: scanLabel }), isTouch ? choose : null] })) : (choose) }));
+};
+exports.PsFilePickerActions = PsFilePickerActions;

package/dist/components/ps-file-picker.d.ts

@@ -1,5 +1,8 @@
 import { PsFilePickerLabels } from '../constants/ps-file-picker-labels';
+import { PsUploadLabels } from '../constants/ps-upload-labels';
+import type { PsFilePickerScan } from '../models/ps-file-picker-scan';
 import type { PsLabelSet } from '../models/ps-label-set';
+import type { PsUploadQueueState } from '../models/ps-upload-queue-state';
 export interface PsFilePickerProps {
     accept: string[];
     acceptLabel: string;
@@ -11,9 +14,12 @@ export interface PsFilePickerProps {
     maxSizeBytes?: number;
     maxSizeLabel?: string;
     multiple?: boolean;
+    queue?: PsUploadQueueState;
+    scan?: PsFilePickerScan;
     touchLabel?: string;
+    uploadLabels?: Partial<PsLabelSet<typeof PsUploadLabels>>;
     onError?: (message: string) => void;
     onFileLoad?: (file: File) => void;
     onFilesSelect?: (files: File[]) => void;
 }
-export declare const PsFilePicker: ({ accept, acceptLabel, className, disabled, dropLabel, isLoading, labels, maxSizeBytes, maxSizeLabel, multiple, onError, onFileLoad, onFilesSelect, touchLabel, }: PsFilePickerProps) => import("react").JSX.Element;
+export declare const PsFilePicker: ({ accept, acceptLabel, className, disabled, dropLabel, isLoading, labels, maxSizeBytes, maxSizeLabel, multiple, onError, onFileLoad, onFilesSelect, queue, scan, touchLabel, uploadLabels, }: PsFilePickerProps) => import("react").JSX.Element;

package/dist/components/ps-file-picker.js

@@ -6,13 +6,24 @@ const react_1 = require("react");
 const ps_design_system_1 = require("@pallasoft/ps-design-system");
 const ps_icons_1 = require("@pallasoft/ps-icons");
 const ps_file_picker_labels_1 = require("../constants/ps-file-picker-labels");
+const ps_scan_config_1 = require("../constants/ps-scan-config");
+const ps_upload_labels_1 = require("../constants/ps-upload-labels");
 const ps_file_selection_service_1 = require("../services/ps-file-selection-service");
-const PsFilePicker = ({ accept, acceptLabel, className, disabled = false, dropLabel, isLoading = false, labels, maxSizeBytes, maxSizeLabel, multiple = false, onError, onFileLoad, onFilesSelect, touchLabel, }) => {
+const ps_document_scanner_1 = require("./ps-document-scanner");
+const ps_file_picker_actions_1 = require("./ps-file-picker-actions");
+const ps_upload_row_1 = require("./ps-upload-row");
+const PsFilePicker = ({ accept, acceptLabel, className, disabled = false, dropLabel, isLoading = false, labels, maxSizeBytes, maxSizeLabel, multiple = false, onError, onFileLoad, onFilesSelect, queue, scan, touchLabel, uploadLabels, }) => {
     const [isDragging, setIsDragging] = (0, react_1.useState)(false);
+    const [scanName, setScanName] = (0, react_1.useState)(null);
+    const input = (0, react_1.useRef)(null);
     const acceptAttr = (0, react_1.useMemo)(() => accept.join(','), [accept]);
     const text = { ...ps_file_picker_labels_1.PsFilePickerLabels, ...labels };
+    const rowLabels = { ...ps_upload_labels_1.PsUploadLabels, ...uploadLabels };
+    const details = [acceptLabel, maxSizeLabel].filter((value) => value !== undefined && value !== '');
+    const chooseLabel = multiple ? text.choose : text.chooseOne;
+    const scanLabel = scan === undefined ? undefined : text.scan;
     if (isLoading)
-        return ((0, jsx_runtime_1.jsx)("span", { "aria-busy": 'true', className: ps_design_system_1.PallasoftClassNameService.merge('ps-skeleton block min-h-32 w-full rounded-ps-panel', className), role: 'status' }));
+        return ((0, jsx_runtime_1.jsx)("span", { "aria-busy": 'true', className: ps_design_system_1.PallasoftClassNameService.merge('ps-skeleton block min-h-48 w-full rounded-ps-control', className), role: 'status' }));
     const select = (list) => {
         if (list === null || disabled)
             return;
@@ -31,6 +42,15 @@ const PsFilePicker = ({ accept, acceptLabel, className, disabled = false, dropLa
         else
             onFileLoad?.(accepted[0]);
     };
+    const browse = () => {
+        if (!disabled)
+            input.current?.click();
+    };
+    const openScan = () => {
+        if (disabled || scan === undefined)
+            return;
+        setScanName(scan.getFileName === undefined ? ps_scan_config_1.PsScanConfig.defaultFileName : scan.getFileName());
+    };
     const onChange = (event) => {
         select(event.target.files);
         event.target.value = '';
@@ -40,9 +60,13 @@ const PsFilePicker = ({ accept, acceptLabel, className, disabled = false, dropLa
         if (!disabled)
             setIsDragging(isOver);
     };
-    return ((0, jsx_runtime_1.jsxs)("div", { className: ps_design_system_1.PallasoftClassNameService.merge('relative flex h-48 w-full flex-col items-center justify-center rounded-ps-control border-2 border-dashed border-line p-4 transition-all hover:border-primary/50 hover:bg-primary/5 sm:h-64', isDragging ? 'border-primary bg-primary/10' : '', disabled ? 'pointer-events-none opacity-60' : '', className), onDragEnter: (event) => onDrag(event, true), onDragLeave: (event) => onDrag(event, false), onDragOver: (event) => onDrag(event, true), onDrop: (event) => {
-            onDrag(event, false);
-            select(event.dataTransfer.files);
-        }, children: [(0, jsx_runtime_1.jsxs)("div", { className: 'pointer-events-none flex flex-col items-center gap-3 text-center', children: [(0, jsx_runtime_1.jsx)(ps_icons_1.PsIcon, { className: 'h-8 w-8 text-primary', iconKey: ps_icons_1.PsIconKey.Upload }), (0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)("p", { className: 'text-body-2 font-medium text-ink sm:text-body-1', children: isDragging ? (text.dropActive) : ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("span", { className: touchLabel === undefined ? '' : '[@media(pointer:coarse)]:hidden', children: dropLabel }), touchLabel === undefined ? null : ((0, jsx_runtime_1.jsx)("span", { className: 'hidden [@media(pointer:coarse)]:inline', children: touchLabel }))] })) }), (0, jsx_runtime_1.jsxs)("p", { className: 'mt-1 text-body-3 text-ink/60 sm:text-body-2', children: [(0, jsx_runtime_1.jsx)("span", { className: '[@media(pointer:coarse)]:hidden', children: text.browse }), (0, jsx_runtime_1.jsx)("span", { className: 'hidden [@media(pointer:coarse)]:inline', children: text.browseTouch })] }), maxSizeLabel ? (0, jsx_runtime_1.jsx)("p", { className: 'mt-3 text-body-3 text-ink/60', children: maxSizeLabel }) : null, (0, jsx_runtime_1.jsxs)("p", { className: 'text-body-3 text-ink/60', children: [text.formats, " ", acceptLabel] })] })] }), (0, jsx_runtime_1.jsx)("input", { accept: acceptAttr, "aria-disabled": disabled, "aria-label": dropLabel, className: 'absolute inset-0 h-full w-full cursor-pointer opacity-0', disabled: disabled, multiple: multiple, onChange: onChange, type: 'file' })] }));
+    return ((0, jsx_runtime_1.jsxs)("div", { className: ps_design_system_1.PallasoftClassNameService.merge('flex w-full flex-col gap-3', className), children: [(0, jsx_runtime_1.jsxs)("div", { "aria-disabled": disabled || undefined, className: ps_design_system_1.PallasoftClassNameService.merge('flex w-full cursor-pointer flex-col items-center gap-5 rounded-ps-control border-2 border-dashed px-5 py-8 text-center transition-colors duration-200 sm:px-8', isDragging
+                    ? 'border-primary bg-primary/5'
+                    : 'border-line bg-surface/40 hover:border-primary/40 hover:bg-primary/[0.03]', disabled ? 'pointer-events-none opacity-60' : ''), onClick: browse, onDragEnter: (event) => onDrag(event, true), onDragLeave: (event) => onDrag(event, false), onDragOver: (event) => onDrag(event, true), onDrop: (event) => {
+                    onDrag(event, false);
+                    select(event.dataTransfer.files);
+                }, children: [(0, jsx_runtime_1.jsx)("span", { "aria-hidden": 'true', className: ps_design_system_1.PallasoftClassNameService.merge('flex size-12 items-center justify-center rounded-full transition-colors duration-200', isDragging
+                            ? 'bg-primary text-[color:var(--ps-color-primary-contrast)]'
+                            : 'bg-primary-soft text-primary'), children: (0, jsx_runtime_1.jsx)(ps_icons_1.PsIcon, { className: 'size-6', iconKey: ps_icons_1.PsIconKey.Upload }) }), (0, jsx_runtime_1.jsxs)("div", { className: 'flex flex-col gap-1', children: [(0, jsx_runtime_1.jsx)("p", { className: 'text-base font-semibold text-ink', children: isDragging ? (text.dropActive) : ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("span", { className: touchLabel === undefined ? '' : '[@media(pointer:coarse)]:hidden', children: dropLabel }), touchLabel === undefined ? null : ((0, jsx_runtime_1.jsx)("span", { className: 'hidden [@media(pointer:coarse)]:inline', children: touchLabel }))] })) }), (0, jsx_runtime_1.jsx)("p", { className: 'text-sm text-ink/60 [@media(pointer:coarse)]:hidden', children: multiple ? text.dragHint : text.dragHintOne })] }), (0, jsx_runtime_1.jsx)(ps_file_picker_actions_1.PsFilePickerActions, { chooseLabel: chooseLabel, className: 'flex [@media(pointer:coarse)]:hidden', disabled: disabled, isTouch: false, onChoose: browse, onScan: openScan, scanLabel: scanLabel }), (0, jsx_runtime_1.jsx)(ps_file_picker_actions_1.PsFilePickerActions, { chooseLabel: chooseLabel, className: 'hidden [@media(pointer:coarse)]:flex', disabled: disabled, isTouch: true, onChoose: browse, onScan: openScan, scanLabel: scanLabel }), details.length > 0 ? (0, jsx_runtime_1.jsx)("p", { className: 'text-xs text-ink/50', children: details.join(' · ') }) : null, (0, jsx_runtime_1.jsx)("input", { accept: acceptAttr, "aria-hidden": 'true', className: 'sr-only', disabled: disabled, multiple: multiple, onChange: onChange, onClick: (event) => event.stopPropagation(), ref: input, tabIndex: -1, type: 'file' })] }), queue === undefined || queue.items.length === 0 ? null : ((0, jsx_runtime_1.jsx)("ul", { "aria-label": rowLabels.title, className: 'flex flex-col gap-2', children: queue.items.map((item) => ((0, jsx_runtime_1.jsx)(ps_upload_row_1.PsUploadRow, { item: item, labels: rowLabels, onCancel: () => queue.cancel(item.id), onRemove: () => queue.remove(item.id), onRetry: () => queue.retry(item.id) }, item.id))) })), scan === undefined ? null : ((0, jsx_runtime_1.jsx)(ps_document_scanner_1.PsDocumentScanner, { ...scan, fileName: scanName === null ? ps_scan_config_1.PsScanConfig.defaultFileName : scanName, isOpen: scanName !== null, onClose: () => setScanName(null), onComplete: select }))] }));
 };
 exports.PsFilePicker = PsFilePicker;

package/dist/components/ps-file-viewer-pane.d.ts

@@ -0,0 +1,2 @@
+import type { PsFileViewerPaneProps } from '../models/ps-file-viewer-pane-props';
+export declare const PsFileViewerPane: ({ contentType, headerActions, id, labels, name, pdfWorkerSrc, url, }: PsFileViewerPaneProps) => import("react").JSX.Element;

package/dist/components/ps-file-viewer-pane.js

@@ -0,0 +1,39 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.PsFileViewerPane = 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_file_viewer_config_1 = require("../constants/ps-file-viewer-config");
+const ps_file_viewer_kinds_1 = require("../constants/ps-file-viewer-kinds");
+const ps_file_viewer_labels_1 = require("../constants/ps-file-viewer-labels");
+const ps_file_type_service_1 = require("../services/ps-file-type-service");
+const ps_file_viewer_button_1 = require("./ps-file-viewer-button");
+const ps_file_viewer_content_1 = require("./ps-file-viewer-content");
+const PsFileViewerPane = ({ contentType, headerActions, id, labels = ps_file_viewer_labels_1.PsFileViewerLabels, name, pdfWorkerSrc, url, }) => {
+    const [zoom, setZoom] = (0, react_1.useState)(1);
+    const [rotation, setRotation] = (0, react_1.useState)(0);
+    const kind = ps_file_type_service_1.PsFileTypeService.kindOf(contentType, name);
+    const canZoom = ps_file_viewer_kinds_1.PsFileViewerKinds.zoomable.includes(kind);
+    const canRotate = ps_file_viewer_kinds_1.PsFileViewerKinds.rotatable.includes(kind);
+    const changeZoom = (step) => setZoom((current) => Math.min(ps_file_viewer_config_1.PsFileViewerConfig.maxZoom, Math.max(ps_file_viewer_config_1.PsFileViewerConfig.minZoom, current + step)));
+    const fileKey = id === undefined ? url : id;
+    const rotate = () => setRotation((current) => (current + ps_file_viewer_config_1.PsFileViewerConfig.rotateStep) % 360);
+    const onKeyDown = (event) => {
+        if (event.metaKey || event.ctrlKey || event.altKey)
+            return;
+        if (canZoom && (event.key === '+' || event.key === '='))
+            changeZoom(ps_file_viewer_config_1.PsFileViewerConfig.zoomStep);
+        else if (canZoom && (event.key === '-' || event.key === '_'))
+            changeZoom(-ps_file_viewer_config_1.PsFileViewerConfig.zoomStep);
+        else if (canZoom && event.key === '0')
+            setZoom(1);
+        else if (canRotate && event.key.toLowerCase() === 'r')
+            rotate();
+        else
+            return;
+        event.preventDefault();
+    };
+    return ((0, jsx_runtime_1.jsxs)("div", { className: 'flex h-full min-h-0 min-w-0 flex-col overflow-hidden rounded-ps-panel bg-black/85', children: [(0, jsx_runtime_1.jsxs)("div", { className: 'flex shrink-0 flex-wrap items-center justify-between gap-x-2 border-b border-white/10 px-2 py-1 text-white', children: [(0, jsx_runtime_1.jsx)("p", { className: 'min-w-0 flex-1 basis-32 truncate px-1 text-xs text-white/70', title: name, children: name }), (0, jsx_runtime_1.jsxs)("div", { className: 'flex items-center gap-0.5', role: 'toolbar', children: [canZoom ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(ps_file_viewer_button_1.PsFileViewerButton, { disabled: zoom <= ps_file_viewer_config_1.PsFileViewerConfig.minZoom, label: labels.zoomOut, onClick: () => changeZoom(-ps_file_viewer_config_1.PsFileViewerConfig.zoomStep), children: (0, jsx_runtime_1.jsx)(ps_icons_1.PsIcon, { "aria-hidden": 'true', className: 'size-4', iconKey: ps_icons_1.PsIconKey.ZoomOut }) }), (0, jsx_runtime_1.jsxs)(ps_file_viewer_button_1.PsFileViewerButton, { className: 'w-14 text-xs', label: labels.zoomReset, onClick: () => setZoom(1), children: [Math.round(zoom * 100), "%"] }), (0, jsx_runtime_1.jsx)(ps_file_viewer_button_1.PsFileViewerButton, { disabled: zoom >= ps_file_viewer_config_1.PsFileViewerConfig.maxZoom, label: labels.zoomIn, onClick: () => changeZoom(ps_file_viewer_config_1.PsFileViewerConfig.zoomStep), children: (0, jsx_runtime_1.jsx)(ps_icons_1.PsIcon, { "aria-hidden": 'true', className: 'size-4', iconKey: ps_icons_1.PsIconKey.ZoomIn }) })] })) : null, canRotate ? ((0, jsx_runtime_1.jsx)(ps_file_viewer_button_1.PsFileViewerButton, { label: labels.rotate, onClick: rotate, children: (0, jsx_runtime_1.jsx)(ps_icons_1.PsIcon, { "aria-hidden": 'true', className: 'size-4', iconKey: ps_icons_1.PsIconKey.Rotate }) })) : null, headerActions] })] }), (0, jsx_runtime_1.jsx)("div", { className: 'ps-focus-ring flex min-h-0 flex-1 p-2', onKeyDown: onKeyDown, tabIndex: 0, children: (0, jsx_runtime_1.jsx)(ps_file_viewer_content_1.PsFileViewerContent, { activeMatch: 0, file: { contentType, id: fileKey, name, url }, labels: labels, onMatchCount: () => undefined, pdfWorkerSrc: pdfWorkerSrc, query: '', rotation: rotation, zoom: zoom }, fileKey) })] }));
+};
+exports.PsFileViewerPane = PsFileViewerPane;

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

@@ -0,0 +1,13 @@
+import type { ReactNode } from 'react';
+export interface PsScanButtonProps {
+    children: ReactNode;
+    className?: string;
+    disabled?: boolean;
+    isLarge?: boolean;
+    isLoading?: boolean;
+    isPrimary?: boolean;
+    leadingIcon?: ReactNode;
+    loadingLabel?: string;
+    onClick: () => void;
+}
+export declare const PsScanButton: ({ children, className, disabled, isLarge, isLoading, isPrimary, leadingIcon, loadingLabel, onClick, }: PsScanButtonProps) => import("react").JSX.Element;

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

@@ -0,0 +1,9 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.PsScanButton = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const ps_core_components_1 = require("@pallasoft/ps-core-components");
+const ps_design_system_1 = require("@pallasoft/ps-design-system");
+const ps_scan_chrome_classes_1 = require("../constants/ps-scan-chrome-classes");
+const PsScanButton = ({ children, className, disabled = false, isLarge = false, isLoading = false, isPrimary = false, leadingIcon, loadingLabel, onClick, }) => ((0, jsx_runtime_1.jsxs)("button", { "aria-busy": isLoading || undefined, className: ps_design_system_1.PallasoftClassNameService.merge(ps_scan_chrome_classes_1.PsScanChromeClasses.button, isLarge ? ps_scan_chrome_classes_1.PsScanChromeClasses.buttonLarge : '', isPrimary ? ps_scan_chrome_classes_1.PsScanChromeClasses.buttonPrimary : ps_scan_chrome_classes_1.PsScanChromeClasses.buttonQuiet, 'relative', className), disabled: disabled || isLoading, onClick: onClick, type: 'button', children: [isLoading ? ((0, jsx_runtime_1.jsx)(ps_core_components_1.PsSpinner, { className: 'absolute inset-0 m-auto', color: 'current', label: loadingLabel === undefined ? '' : loadingLabel, size: 'small' })) : null, (0, jsx_runtime_1.jsxs)("span", { "aria-hidden": isLoading || undefined, className: `inline-flex min-w-0 items-center gap-2 ${isLoading ? 'invisible' : ''}`, children: [leadingIcon === undefined ? null : (0, jsx_runtime_1.jsx)("span", { className: 'shrink-0', children: leadingIcon }), (0, jsx_runtime_1.jsx)("span", { className: 'truncate', children: children })] })] }));
+exports.PsScanButton = PsScanButton;

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

@@ -0,0 +1,27 @@
+import { type RefCallback, type RefObject } from 'react';
+import { PsDocumentScannerLabels } from '../constants/ps-document-scanner-labels';
+import type { PsLabelSet } from '../models/ps-label-set';
+import type { PsScanLiveDetection } from '../models/ps-scan-live-detection';
+export interface PsScanCameraViewProps {
+    canTorch: boolean;
+    detection: PsScanLiveDetection;
+    flashKey: number;
+    isAuto: boolean;
+    isBusy: boolean;
+    isFull: boolean;
+    isMultiple: boolean;
+    isReady: boolean;
+    isTorchOn: boolean;
+    labels: PsLabelSet<typeof PsDocumentScannerLabels>;
+    lastPreview: string | undefined;
+    onCapture: () => void;
+    onClose: () => void;
+    onDone: () => void;
+    onFiles: (files: File[]) => void;
+    onToggleAuto: () => void;
+    onToggleTorch: () => void;
+    pageCount: number;
+    videoRef: RefObject<HTMLVideoElement | null>;
+    videoTarget: RefCallback<HTMLVideoElement>;
+}
+export declare const PsScanCameraView: ({ canTorch, detection, flashKey, isAuto, isBusy, isFull, isMultiple, isReady, isTorchOn, labels, lastPreview, onCapture, onClose, onDone, onFiles, onToggleAuto, onToggleTorch, pageCount, videoRef, videoTarget, }: PsScanCameraViewProps) => import("react").JSX.Element;

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

@@ -0,0 +1,34 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.PsScanCameraView = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const ps_core_components_1 = require("@pallasoft/ps-core-components");
+const ps_design_system_1 = require("@pallasoft/ps-design-system");
+const ps_icons_1 = require("@pallasoft/ps-icons");
+const ps_scan_chrome_classes_1 = require("../constants/ps-scan-chrome-classes");
+const ps_scan_template_service_1 = require("../services/ps-scan-template-service");
+const ps_scan_button_1 = require("./ps-scan-button");
+const ps_scan_icon_button_1 = require("./ps-scan-icon-button");
+const ps_scan_page_stack_1 = require("./ps-scan-page-stack");
+const ps_scan_photo_button_1 = require("./ps-scan-photo-button");
+const ps_scan_shutter_1 = require("./ps-scan-shutter");
+const ps_scan_viewfinder_overlay_1 = require("./ps-scan-viewfinder-overlay");
+const PsScanCameraView = ({ canTorch, detection, flashKey, isAuto, isBusy, isFull, isMultiple, isReady, isTorchOn, labels, lastPreview, onCapture, onClose, onDone, onFiles, onToggleAuto, onToggleTorch, pageCount, videoRef, videoTarget, }) => {
+    const [areaRef, area] = (0, ps_core_components_1.usePsElementSize)();
+    const [video, setVideo] = (0, react_1.useState)({ height: 0, width: 0 });
+    const hint = isFull
+        ? labels.maxPages
+        : detection.quad === null
+            ? labels.hintFind
+            : isAuto
+                ? labels.hintHold
+                : labels.hintFound;
+    const measure = () => {
+        const element = videoRef.current;
+        if (element !== null)
+            setVideo({ height: element.videoHeight, width: element.videoWidth });
+    };
+    return ((0, jsx_runtime_1.jsxs)("div", { className: 'relative h-full min-h-0 overflow-hidden bg-black text-white', children: [(0, jsx_runtime_1.jsxs)("div", { className: 'absolute inset-0', ref: areaRef, children: [(0, jsx_runtime_1.jsx)("video", { "aria-hidden": 'true', autoPlay: true, className: ps_design_system_1.PallasoftClassNameService.merge('size-full object-cover transition-opacity duration-300', isReady ? 'opacity-100' : 'opacity-0'), muted: true, onLoadedMetadata: measure, onResize: measure, playsInline: true, ref: videoTarget }), isReady ? ((0, jsx_runtime_1.jsx)(ps_scan_viewfinder_overlay_1.PsScanViewfinderOverlay, { area: area, quad: detection.quad, video: video })) : null] }), isReady ? null : ((0, jsx_runtime_1.jsxs)("div", { className: 'absolute inset-0 flex flex-col items-center justify-center gap-3 text-sm text-white/75', role: 'status', children: [(0, jsx_runtime_1.jsx)(ps_core_components_1.PsSpinner, { color: 'current', label: labels.cameraStarting, size: 'small' }), (0, jsx_runtime_1.jsx)("span", { children: labels.cameraStarting })] })), flashKey > 0 ? ((0, jsx_runtime_1.jsx)("div", { "aria-hidden": 'true', className: 'pointer-events-none absolute inset-0 bg-white animate-ps-fade-out' }, flashKey)) : null, (0, jsx_runtime_1.jsxs)("div", { className: 'absolute inset-x-0 top-0 flex items-start justify-between gap-3 bg-gradient-to-b from-black/60 to-transparent px-4 pb-10 pt-[max(1rem,env(safe-area-inset-top))]', children: [(0, jsx_runtime_1.jsx)(ps_scan_icon_button_1.PsScanIconButton, { iconKey: ps_icons_1.PsIconKey.Close, label: labels.close, onClick: onClose }), (0, jsx_runtime_1.jsxs)("div", { className: 'flex items-center gap-2', children: [canTorch && isReady ? ((0, jsx_runtime_1.jsx)(ps_scan_icon_button_1.PsScanIconButton, { iconKey: ps_icons_1.PsIconKey.Flash, isPressed: isTorchOn, label: isTorchOn ? labels.torchOff : labels.torchOn, onClick: onToggleTorch })) : null, (0, jsx_runtime_1.jsx)("button", { "aria-label": labels.autoCapture, "aria-pressed": isAuto, className: ps_design_system_1.PallasoftClassNameService.merge(ps_scan_chrome_classes_1.PsScanChromeClasses.button, 'border-transparent', isAuto ? ps_scan_chrome_classes_1.PsScanChromeClasses.iconOn : ps_scan_chrome_classes_1.PsScanChromeClasses.iconOff), onClick: onToggleAuto, title: labels.autoCapture, type: 'button', children: labels.auto })] })] }), isReady ? ((0, jsx_runtime_1.jsx)("div", { className: 'absolute inset-x-0 top-[calc(max(1rem,env(safe-area-inset-top))+3.75rem)] flex justify-center px-4', children: (0, jsx_runtime_1.jsx)("p", { "aria-live": 'polite', className: ps_scan_chrome_classes_1.PsScanChromeClasses.pill, children: hint }) })) : null, (0, jsx_runtime_1.jsxs)("div", { className: 'absolute inset-x-0 bottom-0 grid grid-cols-[1fr_auto_1fr] items-center gap-4 bg-gradient-to-t from-black/80 to-transparent px-5 pb-[max(1.5rem,env(safe-area-inset-bottom))] pt-12', children: [(0, jsx_runtime_1.jsx)("div", { className: 'flex justify-start', children: pageCount > 0 ? ((0, jsx_runtime_1.jsx)(ps_scan_page_stack_1.PsScanPageStack, { count: pageCount, label: ps_scan_template_service_1.PsScanTemplateService.fill(labels.viewPages, { count: pageCount }), onOpen: onDone, preview: lastPreview })) : ((0, jsx_runtime_1.jsx)(ps_scan_photo_button_1.PsScanPhotoButton, { isIconOnly: true, isMultiple: isMultiple, label: labels.choosePhotos, onFiles: onFiles })) }), (0, jsx_runtime_1.jsx)(ps_scan_shutter_1.PsScanShutter, { disabled: !isReady || isFull || isBusy, label: labels.capture, onCapture: onCapture, progress: detection.progress }), (0, jsx_runtime_1.jsx)("div", { className: 'flex justify-end', children: pageCount > 0 ? ((0, jsx_runtime_1.jsx)(ps_scan_button_1.PsScanButton, { isPrimary: true, onClick: onDone, children: labels.done })) : null })] })] }));
+};
+exports.PsScanCameraView = PsScanCameraView;

package/dist/components/ps-scan-crop-editor.d.ts

@@ -0,0 +1,13 @@
+import { PsDocumentScannerLabels } from '../constants/ps-document-scanner-labels';
+import type { PsLabelSet } from '../models/ps-label-set';
+import type { PsScanPage } from '../models/ps-scan-page';
+import type { PsScanQuad } from '../models/ps-scan-quad';
+export interface PsScanCropEditorProps {
+    labels: PsLabelSet<typeof PsDocumentScannerLabels>;
+    onAutoDetect: () => void;
+    onChange: (corners: PsScanQuad) => void;
+    onKeep: () => void;
+    onRetake: () => void;
+    page: PsScanPage;
+}
+export declare const PsScanCropEditor: ({ labels, onAutoDetect, onChange, onKeep, onRetake, page, }: PsScanCropEditorProps) => import("react").JSX.Element;

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

@@ -0,0 +1,69 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.PsScanCropEditor = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const ps_core_components_1 = require("@pallasoft/ps-core-components");
+const ps_design_system_1 = require("@pallasoft/ps-design-system");
+const ps_icons_1 = require("@pallasoft/ps-icons");
+const ps_scan_config_1 = require("../constants/ps-scan-config");
+const ps_scan_corner_order_1 = require("../constants/ps-scan-corner-order");
+const ps_scan_geometry_service_1 = require("../services/ps-scan-geometry-service");
+const ps_scan_button_1 = require("./ps-scan-button");
+const ps_scan_icon_button_1 = require("./ps-scan-icon-button");
+const ps_scan_loupe_1 = require("./ps-scan-loupe");
+const PsScanCropEditor = ({ labels, onAutoDetect, onChange, onKeep, onRetake, page, }) => {
+    const [areaRef, area] = (0, ps_core_components_1.usePsElementSize)();
+    const stageRef = (0, react_1.useRef)(null);
+    const [activeIndex, setActiveIndex] = (0, react_1.useState)(null);
+    const hintId = 'ps-scan-crop-hint';
+    const size = ps_scan_geometry_service_1.PsScanGeometryService.fit(area, { height: page.height, width: page.width });
+    const cornerLabels = [
+        labels.cornerTopLeft,
+        labels.cornerTopRight,
+        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))
+            return;
+        const rect = stage.getBoundingClientRect();
+        const point = ps_scan_geometry_service_1.PsScanGeometryService.clamp({
+            x: (event.clientX - rect.left) / rect.width,
+            y: (event.clientY - rect.top) / rect.height,
+        });
+        const next = page.corners.map((corner, at) => (at === index ? point : corner));
+        if (ps_scan_geometry_service_1.PsScanGeometryService.isUsable(next))
+            onChange(next);
+    };
+    const release = (event) => {
+        event.currentTarget.releasePointerCapture(event.pointerId);
+        setActiveIndex(null);
+    };
+    const nudge = (index, event) => {
+        const step = event.shiftKey ? ps_scan_config_1.PsScanConfig.cornerNudgeLarge : ps_scan_config_1.PsScanConfig.cornerNudge;
+        const deltas = {
+            ArrowDown: [0, step],
+            ArrowLeft: [-step, 0],
+            ArrowRight: [step, 0],
+            ArrowUp: [0, -step],
+        };
+        const delta = deltas[event.key];
+        if (delta === undefined)
+            return;
+        event.preventDefault();
+        onChange(ps_scan_geometry_service_1.PsScanGeometryService.nudge(page.corners, index, delta[0], delta[1]));
+    };
+    return ((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)("span", { "aria-hidden": 'true' }), (0, jsx_runtime_1.jsx)("h2", { className: 'truncate text-center text-base font-semibold', children: labels.cropTitle }), (0, jsx_runtime_1.jsx)(ps_scan_icon_button_1.PsScanIconButton, { iconKey: ps_icons_1.PsIconKey.Spark, label: labels.autoDetect, onClick: onAutoDetect })] }), (0, jsx_runtime_1.jsx)("p", { className: 'shrink-0 px-6 text-center text-sm text-white/65', id: hintId, children: labels.cropHint }), (0, jsx_runtime_1.jsx)("div", { className: 'flex min-h-0 flex-1 items-center justify-center px-8 py-6', ref: areaRef, children: (0, jsx_runtime_1.jsxs)("div", { className: 'relative touch-none select-none', ref: stageRef, style: { height: size.height, width: size.width }, children: [(0, jsx_runtime_1.jsx)("img", { alt: '', className: 'absolute inset-0 size-full rounded-sm', draggable: false, src: page.sourceUrl }), (0, jsx_runtime_1.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: [(0, jsx_runtime_1.jsx)("path", { className: 'fill-black/55', d: `M0 0H${size.width}V${size.height}H0Z M${outline}Z`, fillRule: 'evenodd' }), (0, jsx_runtime_1.jsx)("path", { className: 'fill-none stroke-primary', d: `M${outline}Z`, strokeLinejoin: 'round', strokeWidth: '2.5' })] }), ps_scan_corner_order_1.PsScanCornerOrder.map((key, index) => ((0, jsx_runtime_1.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: (0, jsx_runtime_1.jsx)("span", { className: ps_design_system_1.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 : ((0, jsx_runtime_1.jsx)(ps_scan_loupe_1.PsScanLoupe, { corners: page.corners, point: page.corners[activeIndex], source: page.sourceUrl, stage: size }))] }) }), (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, { isLarge: true, isPrimary: true, onClick: onKeep, children: labels.keepScan })] })] }));
+};
+exports.PsScanCropEditor = PsScanCropEditor;