@pallasoft/ps-file-components 2.1.0 → 2.2.0

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

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

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

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

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

@@ -14,8 +14,7 @@ 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_photo_1 = require("../hooks/use-ps-scan-photo");
-const ps_scan_file_name_service_1 = require("../services/ps-scan-file-name-service");
-const ps_scan_pdf_service_1 = require("../services/ps-scan-pdf-service");
+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_camera_view_1 = require("./ps-scan-camera-view");
 const ps_scan_crop_editor_1 = require("./ps-scan-crop-editor");
@@ -23,7 +22,7 @@ const ps_scan_icon_button_1 = require("./ps-scan-icon-button");
 const ps_scan_page_strip_1 = require("./ps-scan-page-strip");
 const ps_scan_permission_view_1 = require("./ps-scan-permission-view");
 const ps_scan_preview_1 = require("./ps-scan-preview");
-const PsDocumentScannerSheet = ({ fileName, jpegQuality, labels, maxDimension, onClose, onComplete, pageLabels, }) => {
+const PsDocumentScannerSheet = ({ fileName, formats, jpegQuality, labels, maxDimension, onClose, onComplete, pageLabels, }) => {
     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);
@@ -146,20 +145,19 @@ const PsDocumentScannerSheet = ({ fileName, jpegQuality, labels, maxDimension, o
             URL.revokeObjectURL(removed.url);
         setPages((current) => current.filter((page) => page.id !== id));
     };
-    const useAsPdf = async () => {
-        if (isAddingPage)
+    const save = async (format) => {
+        if (result === null || isAddingPage)
             return;
         setIsAddingPage(true);
         setError('');
         try {
-            const last = await renderPage();
+            const last = pages.length === 0 ? { ...result, id: 0 } : await renderPage();
             if (last === null)
                 return;
-            const pdf = await ps_scan_pdf_service_1.PsScanPdfService.build([...pages, last]);
-            URL.revokeObjectURL(last.url);
-            onComplete([
-                new File([pdf], ps_scan_file_name_service_1.PsScanFileNameService.buildPdf(fileName), { type: 'application/pdf' }),
-            ]);
+            const files = await ps_scan_output_service_1.PsScanOutputService.build([...pages, last], format, fileName);
+            if (pages.length > 0)
+                URL.revokeObjectURL(last.url);
+            onComplete(files);
             onClose();
         }
         catch {
@@ -169,18 +167,6 @@ const PsDocumentScannerSheet = ({ fileName, jpegQuality, labels, maxDimension, o
             setIsAddingPage(false);
         }
     };
-    const use = () => {
-        if (result === null)
-            return;
-        if (pages.length > 0) {
-            void useAsPdf();
-            return;
-        }
-        onComplete([
-            new File([result.blob], ps_scan_file_name_service_1.PsScanFileNameService.build(fileName), { type: 'image/jpeg' }),
-        ]);
-        onClose();
-    };
     const multiPage = pageLabels === null
         ? undefined
         : {
@@ -196,6 +182,6 @@ const PsDocumentScannerSheet = ({ fileName, jpegQuality, labels, maxDimension, o
             ? '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, isBusy: isCapturing, isReady: isReady, isTorchOn: camera.isTorchOn, labels: labels, onCapture: capture, onClose: onClose, onFile: accept, onToggleTorch: camera.toggleTorch, 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, { labels: labels, onAllow: camera.allow, onFile: accept, 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 }) })] })) : null, step === ps_scan_step_1.PsScanStep.Crop && photo !== null ? ((0, jsx_runtime_1.jsx)(ps_scan_crop_editor_1.PsScanCropEditor, { labels: labels, onAutoDetect: autoDetect, onChange: setCorners, onContinue: flatten, onRetake: retake, photo: photo })) : null, step === ps_scan_step_1.PsScanStep.Preview ? ((0, jsx_runtime_1.jsx)(ps_scan_preview_1.PsScanPreview, { error: error, labels: labels, multiPage: multiPage, onAdjust: adjust, onRetake: retake, onUse: use, result: result })) : null, isCameraStep && pageLabels !== null && pages.length > 0 ? ((0, jsx_runtime_1.jsx)("div", { className: 'absolute inset-x-0 bottom-32 flex justify-center', children: (0, jsx_runtime_1.jsx)(ps_scan_page_strip_1.PsScanPageStrip, { labels: pageLabels, onRemove: removePage, pages: pages }) })) : 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);
+                    : '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, isBusy: isCapturing, isReady: isReady, isTorchOn: camera.isTorchOn, labels: labels, onCapture: capture, onClose: onClose, onFile: accept, onToggleTorch: camera.toggleTorch, 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, { labels: labels, onAllow: camera.allow, onFile: accept, 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 }) })] })) : null, step === ps_scan_step_1.PsScanStep.Crop && photo !== null ? ((0, jsx_runtime_1.jsx)(ps_scan_crop_editor_1.PsScanCropEditor, { labels: labels, onAutoDetect: autoDetect, onChange: setCorners, onContinue: flatten, onRetake: retake, photo: photo })) : null, step === ps_scan_step_1.PsScanStep.Preview ? ((0, jsx_runtime_1.jsx)(ps_scan_preview_1.PsScanPreview, { error: error, isSaving: isAddingPage, labels: labels, multiPage: multiPage, onAdjust: adjust, onRetake: retake, onSave: save, formats: formats, preferredFormat: ps_scan_output_service_1.PsScanOutputService.preferred(pages.length + 1, formats), result: result })) : null, isCameraStep && pageLabels !== null && pages.length > 0 ? ((0, jsx_runtime_1.jsx)("div", { className: 'absolute inset-x-0 bottom-32 flex justify-center', children: (0, jsx_runtime_1.jsx)(ps_scan_page_strip_1.PsScanPageStrip, { labels: pageLabels, onRemove: removePage, pages: pages }) })) : 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

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

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

@@ -7,10 +7,10 @@ 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_document_scanner_loader_1 = require("./ps-document-scanner-loader");
-const PsDocumentScanner = ({ fileName = ps_scan_config_1.PsScanConfig.defaultFileName, isMultiPage = false, isOpen, jpegQuality = ps_scan_config_1.PsScanConfig.defaultJpegQuality, labels, maxDimension = ps_scan_config_1.PsScanConfig.defaultMaxDimension, onClose, onComplete, pageLabels, }) => {
+const PsDocumentScanner = ({ fileName = ps_scan_config_1.PsScanConfig.defaultFileName, formats = ps_scan_config_1.PsScanConfig.formats, isMultiPage = false, isOpen, jpegQuality = ps_scan_config_1.PsScanConfig.defaultJpegQuality, labels, maxDimension = ps_scan_config_1.PsScanConfig.defaultMaxDimension, onClose, onComplete, pageLabels, }) => {
     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, jpegQuality: jpegQuality, labels: { ...ps_document_scanner_labels_1.PsDocumentScannerLabels, ...labels }, maxDimension: maxDimension, onClose: onClose, onComplete: onComplete, pageLabels: isMultiPage && pageLabels !== undefined ? pageLabels : 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, formats: formats, jpegQuality: jpegQuality, labels: { ...ps_document_scanner_labels_1.PsDocumentScannerLabels, ...labels }, maxDimension: maxDimension, onClose: onClose, onComplete: onComplete, pageLabels: isMultiPage && pageLabels !== undefined ? pageLabels : null }) }));
 };
 exports.PsDocumentScanner = PsDocumentScanner;

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

@@ -1,14 +1,18 @@
 import { PsDocumentScannerLabels } from '../constants/ps-document-scanner-labels';
+import { PsScanFormat } from '../constants/ps-scan-format';
 import type { PsLabelSet } from '../models/ps-label-set';
 import type { PsScanMultiPage } from '../models/ps-scan-multi-page';
 import type { PsScanResult } from '../models/ps-scan-result';
 export interface PsScanPreviewProps {
     error: string;
     labels: PsLabelSet<typeof PsDocumentScannerLabels>;
+    formats: readonly PsScanFormat[];
+    isSaving: boolean;
     multiPage?: PsScanMultiPage;
     onAdjust: () => void;
     onRetake: () => void;
-    onUse: () => void;
+    onSave: (format: PsScanFormat) => void;
+    preferredFormat: PsScanFormat;
     result: PsScanResult | null;
 }
-export declare const PsScanPreview: ({ error, labels, multiPage, onAdjust, onRetake, onUse, result, }: PsScanPreviewProps) => import("react").JSX.Element;
+export declare const PsScanPreview: ({ error, formats, isSaving, labels, multiPage, onAdjust, onRetake, onSave, preferredFormat, result, }: PsScanPreviewProps) => import("react").JSX.Element;

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

@@ -4,11 +4,12 @@ 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_format_1 = require("../constants/ps-scan-format");
 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_strip_1 = require("./ps-scan-page-strip");
-const PsScanPreview = ({ error, labels, multiPage, 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 })), multiPage === undefined || multiPage.pages.length === 0 ? null : ((0, jsx_runtime_1.jsxs)("div", { className: 'shrink-0', children: [(0, jsx_runtime_1.jsx)(ps_scan_page_strip_1.PsScanPageStrip, { labels: multiPage.labels, onRemove: multiPage.onRemovePage, pages: multiPage.pages }), (0, jsx_runtime_1.jsx)("p", { className: 'text-center text-sm text-white/75', children: ps_scan_template_service_1.PsScanTemplateService.fill(multiPage.labels.pageCount, {
+const PsScanPreview = ({ error, formats, isSaving, labels, multiPage, onAdjust, onRetake, onSave, preferredFormat, 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 })), multiPage === undefined || multiPage.pages.length === 0 ? null : ((0, jsx_runtime_1.jsxs)("div", { className: 'shrink-0', children: [(0, jsx_runtime_1.jsx)(ps_scan_page_strip_1.PsScanPageStrip, { labels: multiPage.labels, onRemove: multiPage.onRemovePage, pages: multiPage.pages }), (0, jsx_runtime_1.jsx)("p", { className: 'text-center text-sm text-white/75', children: ps_scan_template_service_1.PsScanTemplateService.fill(multiPage.labels.pageCount, {
                         count: multiPage.pages.length + 1,
-                    }) })] })), (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: [multiPage === undefined ? null : ((0, jsx_runtime_1.jsx)(ps_scan_button_1.PsScanButton, { className: 'col-span-2', disabled: result === null, isLoading: multiPage.isBusy, isLarge: true, leadingIcon: (0, jsx_runtime_1.jsx)(ps_icons_1.PsIcon, { "aria-hidden": 'true', className: 'size-4', iconKey: ps_icons_1.PsIconKey.Plus }), onClick: multiPage.onAddPage, children: multiPage.labels.addPage })), (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 })] })] }));
+                    }) })] })), (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: [multiPage === undefined ? null : ((0, jsx_runtime_1.jsx)(ps_scan_button_1.PsScanButton, { className: 'col-span-2', disabled: result === null, isLoading: multiPage.isBusy, isLarge: true, leadingIcon: (0, jsx_runtime_1.jsx)(ps_icons_1.PsIcon, { "aria-hidden": 'true', className: 'size-4', iconKey: ps_icons_1.PsIconKey.Plus }), onClick: multiPage.onAddPage, children: multiPage.labels.addPage })), formats.includes(ps_scan_format_1.PsScanFormat.Pdf) ? ((0, jsx_runtime_1.jsx)(ps_scan_button_1.PsScanButton, { className: formats.length === 1 ? 'col-span-2' : undefined, disabled: result === null, isLarge: true, isLoading: isSaving, isPrimary: preferredFormat === ps_scan_format_1.PsScanFormat.Pdf, leadingIcon: (0, jsx_runtime_1.jsx)(ps_icons_1.PsIcon, { "aria-hidden": 'true', className: 'size-4', iconKey: ps_icons_1.PsIconKey.File }), onClick: () => onSave(ps_scan_format_1.PsScanFormat.Pdf), children: labels.saveAsPdf })) : null, formats.includes(ps_scan_format_1.PsScanFormat.Png) ? ((0, jsx_runtime_1.jsx)(ps_scan_button_1.PsScanButton, { className: formats.length === 1 ? 'col-span-2' : undefined, disabled: result === null, isLarge: true, isLoading: isSaving, isPrimary: preferredFormat === ps_scan_format_1.PsScanFormat.Png, leadingIcon: (0, jsx_runtime_1.jsx)(ps_icons_1.PsIcon, { "aria-hidden": 'true', className: 'size-4', iconKey: ps_icons_1.PsIconKey.Image }), onClick: () => onSave(ps_scan_format_1.PsScanFormat.Png), children: labels.saveAsImages })) : null, (0, jsx_runtime_1.jsx)(ps_scan_button_1.PsScanButton, { className: 'col-span-2', disabled: isSaving, isLarge: true, onClick: onRetake, children: labels.retake })] })] }));
 exports.PsScanPreview = PsScanPreview;

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

@@ -41,11 +41,12 @@ export declare const PsDocumentScannerLabels: {
     readonly primerTitle: "Allow camera access to scan your documents";
     readonly processFailed: "The scan could not be prepared. Try again.";
     readonly retake: "Retake";
+    readonly saveAsImages: "Save as images";
+    readonly saveAsPdf: "Save as PDF";
     readonly title: "Scan document";
     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

@@ -44,11 +44,12 @@ exports.PsDocumentScannerLabels = {
     primerTitle: 'Allow camera access to scan your documents',
     processFailed: 'The scan could not be prepared. Try again.',
     retake: 'Retake',
+    saveAsImages: 'Save as images',
+    saveAsPdf: 'Save as PDF',
     title: 'Scan document',
     torchOff: 'Turn flash off',
     torchOn: 'Turn flash on',
     tryAgain: 'Try again',
     unavailableBody: 'This device has no camera the browser can use. Choose a photo of the page instead.',
     unavailableTitle: 'No camera found',
-    useScan: 'Use scan',
 };

package/dist/constants/ps-scan-config.d.ts

@@ -20,6 +20,7 @@ export declare const PsScanConfig: {
     readonly detectMinAreaRatio: 0.1;
     readonly detectMinQuadFill: 0.88;
     readonly detectMinSideRatio: 0.06;
+    readonly formats: readonly ["pdf", "png"];
     readonly guideArm: 36;
     readonly guideArmRatio: 0.18;
     readonly guideAspect: 0.72;
@@ -38,7 +39,9 @@ export declare const PsScanConfig: {
     readonly loupeZoom: 2.5;
     readonly minCornerGap: 0.02;
     readonly multiPageMaxDimension: 2400;
-    readonly pdfLongEdgePoints: 842;
+    readonly jpegType: "image/jpeg";
+    readonly pdfType: "application/pdf";
+    readonly pngType: "image/png";
     readonly polygonEpsilons: readonly [0.008, 0.012, 0.018, 0.026, 0.036, 0.05, 0.07];
     readonly torchConstraint: "torch";
     readonly warpChunkPixels: 400000;

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

@@ -1,6 +1,7 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.PsScanConfig = void 0;
+const ps_scan_format_1 = require("./ps-scan-format");
 exports.PsScanConfig = {
     cameraPermission: 'camera',
     cannyHighPercentile: 0.9,
@@ -23,6 +24,7 @@ exports.PsScanConfig = {
     detectMinAreaRatio: 0.1,
     detectMinQuadFill: 0.88,
     detectMinSideRatio: 0.06,
+    formats: [ps_scan_format_1.PsScanFormat.Pdf, ps_scan_format_1.PsScanFormat.Png],
     guideArm: 36,
     guideArmRatio: 0.18,
     guideAspect: 0.72,
@@ -41,7 +43,9 @@ exports.PsScanConfig = {
     loupeZoom: 2.5,
     minCornerGap: 0.02,
     multiPageMaxDimension: 2400,
-    pdfLongEdgePoints: 842,
+    jpegType: 'image/jpeg',
+    pdfType: 'application/pdf',
+    pngType: 'image/png',
     polygonEpsilons: [0.008, 0.012, 0.018, 0.026, 0.036, 0.05, 0.07],
     torchConstraint: 'torch',
     warpChunkPixels: 400000,

package/dist/constants/ps-scan-format.d.ts

@@ -0,0 +1,5 @@
+export declare const PsScanFormat: {
+    readonly Pdf: "pdf";
+    readonly Png: "png";
+};
+export type PsScanFormat = (typeof PsScanFormat)[keyof typeof PsScanFormat];

package/dist/constants/ps-scan-format.js

@@ -0,0 +1,7 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.PsScanFormat = void 0;
+exports.PsScanFormat = {
+    Pdf: 'pdf',
+    Png: 'png',
+};

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

@@ -11,8 +11,7 @@ import { usePsFocusTrap } from '../hooks/use-ps-focus-trap';
 import { usePsScanCamera } from '../hooks/use-ps-scan-camera';
 import { usePsScanLiveDetection } from '../hooks/use-ps-scan-live-detection';
 import { usePsScanPhoto } from '../hooks/use-ps-scan-photo';
-import { PsScanFileNameService } from '../services/ps-scan-file-name-service';
-import { PsScanPdfService } from '../services/ps-scan-pdf-service';
+import { PsScanOutputService } from '../services/ps-scan-output-service';
 import { PsScanPipelineService } from '../services/ps-scan-pipeline-service';
 import { PsScanCameraView } from './ps-scan-camera-view';
 import { PsScanCropEditor } from './ps-scan-crop-editor';
@@ -20,7 +19,7 @@ import { PsScanIconButton } from './ps-scan-icon-button';
 import { PsScanPageStrip } from './ps-scan-page-strip';
 import { PsScanPermissionView } from './ps-scan-permission-view';
 import { PsScanPreview } from './ps-scan-preview';
-export const PsDocumentScannerSheet = ({ fileName, jpegQuality, labels, maxDimension, onClose, onComplete, pageLabels, }) => {
+export const PsDocumentScannerSheet = ({ fileName, formats, jpegQuality, labels, maxDimension, onClose, onComplete, pageLabels, }) => {
     const tier = usePsViewport();
     const zIndex = usePsLayerZIndex(PallasoftZIndex.Modal);
     const content = useRef(null);
@@ -143,20 +142,19 @@ export const PsDocumentScannerSheet = ({ fileName, jpegQuality, labels, maxDimen
             URL.revokeObjectURL(removed.url);
         setPages((current) => current.filter((page) => page.id !== id));
     };
-    const useAsPdf = async () => {
-        if (isAddingPage)
+    const save = async (format) => {
+        if (result === null || isAddingPage)
             return;
         setIsAddingPage(true);
         setError('');
         try {
-            const last = await renderPage();
+            const last = pages.length === 0 ? { ...result, id: 0 } : await renderPage();
             if (last === null)
                 return;
-            const pdf = await PsScanPdfService.build([...pages, last]);
-            URL.revokeObjectURL(last.url);
-            onComplete([
-                new File([pdf], PsScanFileNameService.buildPdf(fileName), { type: 'application/pdf' }),
-            ]);
+            const files = await PsScanOutputService.build([...pages, last], format, fileName);
+            if (pages.length > 0)
+                URL.revokeObjectURL(last.url);
+            onComplete(files);
             onClose();
         }
         catch {
@@ -166,18 +164,6 @@ export const PsDocumentScannerSheet = ({ fileName, jpegQuality, labels, maxDimen
             setIsAddingPage(false);
         }
     };
-    const use = () => {
-        if (result === null)
-            return;
-        if (pages.length > 0) {
-            void useAsPdf();
-            return;
-        }
-        onComplete([
-            new File([result.blob], PsScanFileNameService.build(fileName), { type: 'image/jpeg' }),
-        ]);
-        onClose();
-    };
     const multiPage = pageLabels === null
         ? undefined
         : {
@@ -193,5 +179,5 @@ export const PsDocumentScannerSheet = ({ fileName, jpegQuality, labels, maxDimen
             ? '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: _jsx(PsLayer, { zIndex: zIndex, children: _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: [_jsx("p", { "aria-live": 'polite', className: 'sr-only', role: 'status', children: announcement }), isCameraStep && showsCamera ? (_jsx(PsScanCameraView, { canTorch: camera.canTorch, detection: detection, flashKey: flashKey, isBusy: isCapturing, isReady: isReady, isTorchOn: camera.isTorchOn, labels: labels, onCapture: capture, onClose: onClose, onFile: accept, onToggleTorch: camera.toggleTorch, videoRef: camera.videoRef, videoTarget: camera.attachVideo })) : null, isCameraStep && !showsCamera ? (_jsxs(_Fragment, { children: [_jsx(PsScanPermissionView, { labels: labels, onAllow: camera.allow, onFile: accept, status: camera.status }), _jsx("div", { className: 'absolute left-4 top-[max(1rem,env(safe-area-inset-top))] flex gap-2', children: _jsx(PsScanIconButton, { iconKey: PsIconKey.Close, label: labels.close, onClick: onClose }) })] })) : null, step === PsScanStep.Crop && photo !== null ? (_jsx(PsScanCropEditor, { labels: labels, onAutoDetect: autoDetect, onChange: setCorners, onContinue: flatten, onRetake: retake, photo: photo })) : null, step === PsScanStep.Preview ? (_jsx(PsScanPreview, { error: error, labels: labels, multiPage: multiPage, onAdjust: adjust, onRetake: retake, onUse: use, result: result })) : null, isCameraStep && pageLabels !== null && pages.length > 0 ? (_jsx("div", { className: 'absolute inset-x-0 bottom-32 flex justify-center', children: _jsx(PsScanPageStrip, { labels: pageLabels, onRemove: removePage, pages: pages }) })) : null, isCameraStep && error !== '' ? (_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);
+                    : 'relative h-full overflow-hidden bg-black text-white', ref: content, children: [_jsx("p", { "aria-live": 'polite', className: 'sr-only', role: 'status', children: announcement }), isCameraStep && showsCamera ? (_jsx(PsScanCameraView, { canTorch: camera.canTorch, detection: detection, flashKey: flashKey, isBusy: isCapturing, isReady: isReady, isTorchOn: camera.isTorchOn, labels: labels, onCapture: capture, onClose: onClose, onFile: accept, onToggleTorch: camera.toggleTorch, videoRef: camera.videoRef, videoTarget: camera.attachVideo })) : null, isCameraStep && !showsCamera ? (_jsxs(_Fragment, { children: [_jsx(PsScanPermissionView, { labels: labels, onAllow: camera.allow, onFile: accept, status: camera.status }), _jsx("div", { className: 'absolute left-4 top-[max(1rem,env(safe-area-inset-top))] flex gap-2', children: _jsx(PsScanIconButton, { iconKey: PsIconKey.Close, label: labels.close, onClick: onClose }) })] })) : null, step === PsScanStep.Crop && photo !== null ? (_jsx(PsScanCropEditor, { labels: labels, onAutoDetect: autoDetect, onChange: setCorners, onContinue: flatten, onRetake: retake, photo: photo })) : null, step === PsScanStep.Preview ? (_jsx(PsScanPreview, { error: error, isSaving: isAddingPage, labels: labels, multiPage: multiPage, onAdjust: adjust, onRetake: retake, onSave: save, formats: formats, preferredFormat: PsScanOutputService.preferred(pages.length + 1, formats), result: result })) : null, isCameraStep && pageLabels !== null && pages.length > 0 ? (_jsx("div", { className: 'absolute inset-x-0 bottom-32 flex justify-center', children: _jsx(PsScanPageStrip, { labels: pageLabels, onRemove: removePage, pages: pages }) })) : null, isCameraStep && error !== '' ? (_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);
 };

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

@@ -4,9 +4,9 @@ import { usePsHydrated } from '@pallasoft/ps-core-components';
 import { PsDocumentScannerLabels } from '../constants/ps-document-scanner-labels';
 import { PsScanConfig } from '../constants/ps-scan-config';
 import { PsDocumentScannerLoader } from './ps-document-scanner-loader';
-export const PsDocumentScanner = ({ fileName = PsScanConfig.defaultFileName, isMultiPage = false, isOpen, jpegQuality = PsScanConfig.defaultJpegQuality, labels, maxDimension = PsScanConfig.defaultMaxDimension, onClose, onComplete, pageLabels, }) => {
+export const PsDocumentScanner = ({ fileName = PsScanConfig.defaultFileName, formats = PsScanConfig.formats, isMultiPage = false, isOpen, jpegQuality = PsScanConfig.defaultJpegQuality, labels, maxDimension = PsScanConfig.defaultMaxDimension, onClose, onComplete, pageLabels, }) => {
     const isHydrated = usePsHydrated();
     if (!isOpen || !isHydrated)
         return null;
-    return (_jsx(Suspense, { fallback: null, children: _jsx(PsDocumentScannerLoader, { fileName: fileName, jpegQuality: jpegQuality, labels: { ...PsDocumentScannerLabels, ...labels }, maxDimension: maxDimension, onClose: onClose, onComplete: onComplete, pageLabels: isMultiPage && pageLabels !== undefined ? pageLabels : null }) }));
+    return (_jsx(Suspense, { fallback: null, children: _jsx(PsDocumentScannerLoader, { fileName: fileName, formats: formats, jpegQuality: jpegQuality, labels: { ...PsDocumentScannerLabels, ...labels }, maxDimension: maxDimension, onClose: onClose, onComplete: onComplete, pageLabels: isMultiPage && pageLabels !== undefined ? pageLabels : null }) }));
 };

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

@@ -1,10 +1,11 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { PsSpinner } from '@pallasoft/ps-core-components';
 import { PsIcon, PsIconKey } from '@pallasoft/ps-icons';
+import { PsScanFormat } from '../constants/ps-scan-format';
 import { PsScanTemplateService } from '../services/ps-scan-template-service';
 import { PsScanButton } from './ps-scan-button';
 import { PsScanIconButton } from './ps-scan-icon-button';
 import { PsScanPageStrip } from './ps-scan-page-strip';
-export const PsScanPreview = ({ error, labels, multiPage, onAdjust, onRetake, onUse, result, }) => (_jsxs("div", { className: 'flex h-full min-h-0 flex-col bg-black text-white animate-ps-fade-in', children: [_jsxs("header", { className: 'grid shrink-0 grid-cols-[2.75rem_1fr_2.75rem] items-center gap-3 px-4 pb-1 pt-[max(1rem,env(safe-area-inset-top))]', children: [_jsx(PsScanIconButton, { iconKey: PsIconKey.Crop, label: labels.cropTitle, onClick: onAdjust }), _jsx("h2", { className: 'truncate text-center text-base font-semibold', children: labels.previewTitle }), _jsx("span", { "aria-hidden": 'true' })] }), _jsx("div", { className: 'flex min-h-0 flex-1 items-center justify-center px-6 py-4', children: result === null ? (_jsxs("div", { className: 'flex flex-col items-center gap-3 text-sm text-white/75', role: 'status', children: [_jsx(PsSpinner, { color: 'current', label: labels.preparing, size: 'small' }), _jsx("span", { children: labels.preparing })] })) : (_jsx("img", { alt: labels.previewAlt, className: 'max-h-full max-w-full rounded-sm bg-white object-contain shadow-[0_24px_60px_-20px_rgb(0_0_0/0.9)] animate-ps-fade-in', src: result.url })) }), error === '' ? null : (_jsx("p", { className: 'mx-auto mb-2 max-w-sm rounded-ps-control bg-danger px-3 py-2 text-center text-sm text-white', role: 'alert', children: error })), multiPage === undefined || multiPage.pages.length === 0 ? null : (_jsxs("div", { className: 'shrink-0', children: [_jsx(PsScanPageStrip, { labels: multiPage.labels, onRemove: multiPage.onRemovePage, pages: multiPage.pages }), _jsx("p", { className: 'text-center text-sm text-white/75', children: PsScanTemplateService.fill(multiPage.labels.pageCount, {
+export const PsScanPreview = ({ error, formats, isSaving, labels, multiPage, onAdjust, onRetake, onSave, preferredFormat, result, }) => (_jsxs("div", { className: 'flex h-full min-h-0 flex-col bg-black text-white animate-ps-fade-in', children: [_jsxs("header", { className: 'grid shrink-0 grid-cols-[2.75rem_1fr_2.75rem] items-center gap-3 px-4 pb-1 pt-[max(1rem,env(safe-area-inset-top))]', children: [_jsx(PsScanIconButton, { iconKey: PsIconKey.Crop, label: labels.cropTitle, onClick: onAdjust }), _jsx("h2", { className: 'truncate text-center text-base font-semibold', children: labels.previewTitle }), _jsx("span", { "aria-hidden": 'true' })] }), _jsx("div", { className: 'flex min-h-0 flex-1 items-center justify-center px-6 py-4', children: result === null ? (_jsxs("div", { className: 'flex flex-col items-center gap-3 text-sm text-white/75', role: 'status', children: [_jsx(PsSpinner, { color: 'current', label: labels.preparing, size: 'small' }), _jsx("span", { children: labels.preparing })] })) : (_jsx("img", { alt: labels.previewAlt, className: 'max-h-full max-w-full rounded-sm bg-white object-contain shadow-[0_24px_60px_-20px_rgb(0_0_0/0.9)] animate-ps-fade-in', src: result.url })) }), error === '' ? null : (_jsx("p", { className: 'mx-auto mb-2 max-w-sm rounded-ps-control bg-danger px-3 py-2 text-center text-sm text-white', role: 'alert', children: error })), multiPage === undefined || multiPage.pages.length === 0 ? null : (_jsxs("div", { className: 'shrink-0', children: [_jsx(PsScanPageStrip, { labels: multiPage.labels, onRemove: multiPage.onRemovePage, pages: multiPage.pages }), _jsx("p", { className: 'text-center text-sm text-white/75', children: PsScanTemplateService.fill(multiPage.labels.pageCount, {
                         count: multiPage.pages.length + 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: [multiPage === undefined ? null : (_jsx(PsScanButton, { className: 'col-span-2', disabled: result === null, isLoading: multiPage.isBusy, isLarge: true, leadingIcon: _jsx(PsIcon, { "aria-hidden": 'true', className: 'size-4', iconKey: PsIconKey.Plus }), onClick: multiPage.onAddPage, children: multiPage.labels.addPage })), _jsx(PsScanButton, { isLarge: true, onClick: onRetake, children: labels.retake }), _jsx(PsScanButton, { disabled: result === null, isLarge: true, isPrimary: true, leadingIcon: _jsx(PsIcon, { "aria-hidden": 'true', className: 'size-4', iconKey: PsIconKey.Check }), onClick: onUse, children: labels.useScan })] })] }));
+                    }) })] })), _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: [multiPage === undefined ? null : (_jsx(PsScanButton, { className: 'col-span-2', disabled: result === null, isLoading: multiPage.isBusy, isLarge: true, leadingIcon: _jsx(PsIcon, { "aria-hidden": 'true', className: 'size-4', iconKey: PsIconKey.Plus }), onClick: multiPage.onAddPage, children: multiPage.labels.addPage })), formats.includes(PsScanFormat.Pdf) ? (_jsx(PsScanButton, { className: formats.length === 1 ? 'col-span-2' : undefined, disabled: result === null, isLarge: true, isLoading: isSaving, isPrimary: preferredFormat === PsScanFormat.Pdf, leadingIcon: _jsx(PsIcon, { "aria-hidden": 'true', className: 'size-4', iconKey: PsIconKey.File }), onClick: () => onSave(PsScanFormat.Pdf), children: labels.saveAsPdf })) : null, formats.includes(PsScanFormat.Png) ? (_jsx(PsScanButton, { className: formats.length === 1 ? 'col-span-2' : undefined, disabled: result === null, isLarge: true, isLoading: isSaving, isPrimary: preferredFormat === PsScanFormat.Png, leadingIcon: _jsx(PsIcon, { "aria-hidden": 'true', className: 'size-4', iconKey: PsIconKey.Image }), onClick: () => onSave(PsScanFormat.Png), children: labels.saveAsImages })) : null, _jsx(PsScanButton, { className: 'col-span-2', disabled: isSaving, isLarge: true, onClick: onRetake, children: labels.retake })] })] }));

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

@@ -41,11 +41,12 @@ export const PsDocumentScannerLabels = {
     primerTitle: 'Allow camera access to scan your documents',
     processFailed: 'The scan could not be prepared. Try again.',
     retake: 'Retake',
+    saveAsImages: 'Save as images',
+    saveAsPdf: 'Save as PDF',
     title: 'Scan document',
     torchOff: 'Turn flash off',
     torchOn: 'Turn flash on',
     tryAgain: 'Try again',
     unavailableBody: 'This device has no camera the browser can use. Choose a photo of the page instead.',
     unavailableTitle: 'No camera found',
-    useScan: 'Use scan',
 };

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

@@ -1,3 +1,4 @@
+import { PsScanFormat } from './ps-scan-format';
 export const PsScanConfig = {
     cameraPermission: 'camera',
     cannyHighPercentile: 0.9,
@@ -20,6 +21,7 @@ export const PsScanConfig = {
     detectMinAreaRatio: 0.1,
     detectMinQuadFill: 0.88,
     detectMinSideRatio: 0.06,
+    formats: [PsScanFormat.Pdf, PsScanFormat.Png],
     guideArm: 36,
     guideArmRatio: 0.18,
     guideAspect: 0.72,
@@ -38,7 +40,9 @@ export const PsScanConfig = {
     loupeZoom: 2.5,
     minCornerGap: 0.02,
     multiPageMaxDimension: 2400,
-    pdfLongEdgePoints: 842,
+    jpegType: 'image/jpeg',
+    pdfType: 'application/pdf',
+    pngType: 'image/png',
     polygonEpsilons: [0.008, 0.012, 0.018, 0.026, 0.036, 0.05, 0.07],
     torchConstraint: 'torch',
     warpChunkPixels: 400000,

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

@@ -0,0 +1,4 @@
+export const PsScanFormat = {
+    Pdf: 'pdf',
+    Png: 'png',
+};

package/dist/esm/index.js

@@ -74,6 +74,7 @@ export * from './hooks/use-ps-in-view';
 export * from './hooks/use-ps-upload-queue';
 export * from './components/ps-document-scanner';
 export * from './constants/ps-document-scanner-labels';
+export * from './constants/ps-scan-format';
 export * from './models/ps-document-scanner-page-labels';
 export * from './models/ps-document-scanner-props';
 export * from './models/ps-file-picker-scan';

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

@@ -28,6 +28,16 @@ export class PsScanCanvasService {
             return await new Promise((resolve, reject) => canvas.toBlob((blob) => (blob === null ? reject(new Error('encode')) : resolve(blob)), 'image/jpeg', quality));
         return await canvas.convertToBlob({ quality, type: 'image/jpeg' });
     }
+    static async toPng(blob) {
+        const bitmap = await createImageBitmap(blob);
+        const context = PsScanCanvasService.context(bitmap.width, bitmap.height);
+        context.drawImage(bitmap, 0, 0);
+        bitmap.close();
+        const canvas = context.canvas;
+        if (canvas instanceof HTMLCanvasElement)
+            return await new Promise((resolve, reject) => canvas.toBlob((png) => (png === null ? reject(new Error('encode')) : resolve(png)), PsScanConfig.pngType));
+        return await canvas.convertToBlob({ type: PsScanConfig.pngType });
+    }
     static async fromVideo(video, quality) {
         const context = PsScanCanvasService.context(video.videoWidth, video.videoHeight);
         context.drawImage(video, 0, 0);

package/dist/esm/services/ps-scan-file-name-service.js

@@ -3,6 +3,10 @@ export class PsScanFileNameService {
     static build(base) {
         return `${PsScanFileNameService.sanitize(base)}.jpg`;
     }
+    static buildPng(base, index, count) {
+        const name = PsScanFileNameService.sanitize(base);
+        return count > 1 ? `${name}-${index + 1}.png` : `${name}.png`;
+    }
     static buildPdf(base) {
         return `${PsScanFileNameService.sanitize(base)}.pdf`;
     }
@@ -10,7 +14,7 @@ export class PsScanFileNameService {
         const cleaned = Array.from(base)
             .filter((char) => char.charCodeAt(0) >= 32)
             .join('')
-            .replace(/\.(pdf|jpe?g)$/i, '')
+            .replace(/\.(pdf|jpe?g|png)$/i, '')
             .replace(/[\\/:*?"<>|]+/g, '-')
             .replace(/\s+/g, ' ')
             .replace(/^[\s.-]+|[\s.-]+$/g, '');

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

@@ -0,0 +1,23 @@
+import { PsScanConfig } from '../constants/ps-scan-config';
+import { PsScanFormat } from '../constants/ps-scan-format';
+import { PsScanCanvasService } from './ps-scan-canvas-service';
+import { PsScanFileNameService } from './ps-scan-file-name-service';
+import { PsScanPdfService } from './ps-scan-pdf-service';
+export class PsScanOutputService {
+    static async build(pages, format, fileName) {
+        if (format === PsScanFormat.Pdf)
+            return [
+                new File([await PsScanPdfService.build(pages)], PsScanFileNameService.buildPdf(fileName), {
+                    type: PsScanConfig.pdfType,
+                }),
+            ];
+        const files = [];
+        for (const [index, page] of pages.entries())
+            files.push(new File([await PsScanCanvasService.toPng(page.blob)], PsScanFileNameService.buildPng(fileName, index, pages.length), { type: PsScanConfig.pngType }));
+        return files;
+    }
+    static preferred(pageCount, formats) {
+        const wanted = pageCount > 1 ? PsScanFormat.Pdf : PsScanFormat.Png;
+        return formats.includes(wanted) ? wanted : formats[0];
+    }
+}

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

@@ -1,3 +1,4 @@
+import { Common } from '@pallasoft/ps-utilities';
 import { PsScanConfig } from '../constants/ps-scan-config';
 export class PsScanPdfService {
     static async build(pages) {
@@ -11,59 +12,9 @@ export class PsScanPdfService {
         return PsScanPdfService.fromJpegs(loaded);
     }
     static fromJpegs(pages) {
-        const chunks = [];
-        const offsets = [];
-        let length = 0;
-        const push = (chunk) => {
-            chunks.push(chunk);
-            length += chunk.length;
-        };
-        const begin = (objectNumber) => {
-            offsets[objectNumber] = length;
-            push(PsScanPdfService.text(`${objectNumber} 0 obj\n`));
-        };
-        push(PsScanPdfService.text('%PDF-1.4\n'));
-        push(new Uint8Array([0x25, 0xe2, 0xe3, 0xcf, 0xd3, 0x0a]));
-        begin(1);
-        push(PsScanPdfService.text('<< /Type /Catalog /Pages 2 0 R >>\nendobj\n'));
-        const kids = pages.map((_, index) => `${PsScanPdfService.pageObject(index)} 0 R`).join(' ');
-        begin(2);
-        push(PsScanPdfService.text(`<< /Type /Pages /Kids [${kids}] /Count ${pages.length} >>\nendobj\n`));
-        pages.forEach((page, index) => {
-            const size = PsScanPdfService.pageSize(page);
-            const pageNumber = PsScanPdfService.pageObject(index);
-            const content = `q ${size.width} 0 0 ${size.height} 0 0 cm /Im0 Do Q`;
-            begin(pageNumber);
-            push(PsScanPdfService.text(`<< /Type /Page /Parent 2 0 R /MediaBox [0 0 ${size.width} ${size.height}] /Resources << /XObject << /Im0 ${pageNumber + 1} 0 R >> >> /Contents ${pageNumber + 2} 0 R >>\nendobj\n`));
-            begin(pageNumber + 1);
-            push(PsScanPdfService.text(`<< /Type /XObject /Subtype /Image /Width ${page.width} /Height ${page.height} /ColorSpace /DeviceRGB /BitsPerComponent 8 /Filter /DCTDecode /Length ${page.bytes.length} >>\nstream\n`));
-            push(page.bytes);
-            push(PsScanPdfService.text('\nendstream\nendobj\n'));
-            begin(pageNumber + 2);
-            push(PsScanPdfService.text(`<< /Length ${content.length} >>\nstream\n${content}\nendstream\nendobj\n`));
-        });
-        const count = 3 + pages.length * 3;
-        const entries = Array.from({ length: count - 1 }, (_, index) => `${String(offsets[index + 1]).padStart(10, '0')} 00000 n \n`).join('');
-        push(PsScanPdfService.text(`xref\n0 ${count}\n0000000000 65535 f \n${entries}trailer\n<< /Size ${count} /Root 1 0 R >>\nstartxref\n${length}\n%%EOF\n`));
-        const merged = new Uint8Array(length);
-        let cursor = 0;
-        for (const chunk of chunks) {
-            merged.set(chunk, cursor);
-            cursor += chunk.length;
-        }
-        return new Blob([merged], { type: 'application/pdf' });
+        return new Blob([Common.JpegPdfService.fromJpegs(pages)], { type: PsScanConfig.pdfType });
     }
     static pageSize(page) {
-        const scale = PsScanConfig.pdfLongEdgePoints / Math.max(page.width, page.height);
-        return {
-            height: Math.round(page.height * scale * 100) / 100,
-            width: Math.round(page.width * scale * 100) / 100,
-        };
-    }
-    static pageObject(index) {
-        return 3 + index * 3;
-    }
-    static text(value) {
-        return new TextEncoder().encode(value);
+        return Common.JpegPdfService.pageSize(page);
     }
 }

package/dist/index.d.ts

@@ -74,6 +74,7 @@ export * from './hooks/use-ps-in-view';
 export * from './hooks/use-ps-upload-queue';
 export * from './components/ps-document-scanner';
 export * from './constants/ps-document-scanner-labels';
+export * from './constants/ps-scan-format';
 export * from './models/ps-document-scanner-page-labels';
 export * from './models/ps-document-scanner-props';
 export * from './models/ps-file-picker-scan';

package/dist/index.js

@@ -90,6 +90,7 @@ __exportStar(require("./hooks/use-ps-in-view"), exports);
 __exportStar(require("./hooks/use-ps-upload-queue"), exports);
 __exportStar(require("./components/ps-document-scanner"), exports);
 __exportStar(require("./constants/ps-document-scanner-labels"), exports);
+__exportStar(require("./constants/ps-scan-format"), exports);
 __exportStar(require("./models/ps-document-scanner-page-labels"), exports);
 __exportStar(require("./models/ps-document-scanner-props"), exports);
 __exportStar(require("./models/ps-file-picker-scan"), exports);

package/dist/models/ps-document-scanner-props.d.ts

@@ -1,9 +1,11 @@
 import type { PsDocumentScannerLabels } from '../constants/ps-document-scanner-labels';
+import type { PsScanFormat } from '../constants/ps-scan-format';
 import type { PsDocumentScannerPageLabels } from './ps-document-scanner-page-labels';
 import type { PsLabelSet } from './ps-label-set';
 export interface PsDocumentScannerProps {
     className?: string;
     fileName?: string;
+    formats?: readonly PsScanFormat[];
     isMultiPage?: boolean;
     isOpen: boolean;
     jpegQuality?: number;

package/dist/models/ps-document-scanner-sheet-props.d.ts

@@ -1,8 +1,10 @@
 import type { PsDocumentScannerLabels } from '../constants/ps-document-scanner-labels';
+import type { PsScanFormat } from '../constants/ps-scan-format';
 import type { PsDocumentScannerPageLabels } from './ps-document-scanner-page-labels';
 import type { PsLabelSet } from './ps-label-set';
 export interface PsDocumentScannerSheetProps {
     fileName: string;
+    formats: readonly PsScanFormat[];
     jpegQuality: number;
     labels: PsLabelSet<typeof PsDocumentScannerLabels>;
     maxDimension: number;

package/dist/services/ps-scan-canvas-service.d.ts

@@ -3,6 +3,7 @@ import type { PsScanRaster } from '../models/ps-scan-raster';
 export declare class PsScanCanvasService {
     static decode(blob: Blob, maxDimension: number): Promise<PsScanDecodedImage>;
     static encode(raster: PsScanRaster, quality: number): Promise<Blob>;
+    static toPng(blob: Blob): Promise<Blob>;
     static fromVideo(video: HTMLVideoElement, quality: number): Promise<Blob>;
     static sample(video: HTMLVideoElement, maxDimension: number): PsScanRaster;
     private static context;

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

@@ -31,6 +31,16 @@ class PsScanCanvasService {
             return await new Promise((resolve, reject) => canvas.toBlob((blob) => (blob === null ? reject(new Error('encode')) : resolve(blob)), 'image/jpeg', quality));
         return await canvas.convertToBlob({ quality, type: 'image/jpeg' });
     }
+    static async toPng(blob) {
+        const bitmap = await createImageBitmap(blob);
+        const context = PsScanCanvasService.context(bitmap.width, bitmap.height);
+        context.drawImage(bitmap, 0, 0);
+        bitmap.close();
+        const canvas = context.canvas;
+        if (canvas instanceof HTMLCanvasElement)
+            return await new Promise((resolve, reject) => canvas.toBlob((png) => (png === null ? reject(new Error('encode')) : resolve(png)), ps_scan_config_1.PsScanConfig.pngType));
+        return await canvas.convertToBlob({ type: ps_scan_config_1.PsScanConfig.pngType });
+    }
     static async fromVideo(video, quality) {
         const context = PsScanCanvasService.context(video.videoWidth, video.videoHeight);
         context.drawImage(video, 0, 0);

package/dist/services/ps-scan-file-name-service.d.ts

@@ -1,5 +1,6 @@
 export declare class PsScanFileNameService {
     static build(base: string): string;
+    static buildPng(base: string, index: number, count: number): string;
     static buildPdf(base: string): string;
     static sanitize(base: string): string;
 }

package/dist/services/ps-scan-file-name-service.js

@@ -6,6 +6,10 @@ class PsScanFileNameService {
     static build(base) {
         return `${PsScanFileNameService.sanitize(base)}.jpg`;
     }
+    static buildPng(base, index, count) {
+        const name = PsScanFileNameService.sanitize(base);
+        return count > 1 ? `${name}-${index + 1}.png` : `${name}.png`;
+    }
     static buildPdf(base) {
         return `${PsScanFileNameService.sanitize(base)}.pdf`;
     }
@@ -13,7 +17,7 @@ class PsScanFileNameService {
         const cleaned = Array.from(base)
             .filter((char) => char.charCodeAt(0) >= 32)
             .join('')
-            .replace(/\.(pdf|jpe?g)$/i, '')
+            .replace(/\.(pdf|jpe?g|png)$/i, '')
             .replace(/[\\/:*?"<>|]+/g, '-')
             .replace(/\s+/g, ' ')
             .replace(/^[\s.-]+|[\s.-]+$/g, '');

package/dist/services/ps-scan-output-service.d.ts

@@ -0,0 +1,6 @@
+import { PsScanFormat } from '../constants/ps-scan-format';
+import type { PsScanPage } from '../models/ps-scan-page';
+export declare class PsScanOutputService {
+    static build(pages: PsScanPage[], format: PsScanFormat, fileName: string): Promise<File[]>;
+    static preferred(pageCount: number, formats: readonly PsScanFormat[]): PsScanFormat;
+}

package/dist/services/ps-scan-output-service.js

@@ -0,0 +1,27 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.PsScanOutputService = void 0;
+const ps_scan_config_1 = require("../constants/ps-scan-config");
+const ps_scan_format_1 = require("../constants/ps-scan-format");
+const ps_scan_canvas_service_1 = require("./ps-scan-canvas-service");
+const ps_scan_file_name_service_1 = require("./ps-scan-file-name-service");
+const ps_scan_pdf_service_1 = require("./ps-scan-pdf-service");
+class PsScanOutputService {
+    static async build(pages, format, fileName) {
+        if (format === ps_scan_format_1.PsScanFormat.Pdf)
+            return [
+                new File([await ps_scan_pdf_service_1.PsScanPdfService.build(pages)], ps_scan_file_name_service_1.PsScanFileNameService.buildPdf(fileName), {
+                    type: ps_scan_config_1.PsScanConfig.pdfType,
+                }),
+            ];
+        const files = [];
+        for (const [index, page] of pages.entries())
+            files.push(new File([await ps_scan_canvas_service_1.PsScanCanvasService.toPng(page.blob)], ps_scan_file_name_service_1.PsScanFileNameService.buildPng(fileName, index, pages.length), { type: ps_scan_config_1.PsScanConfig.pngType }));
+        return files;
+    }
+    static preferred(pageCount, formats) {
+        const wanted = pageCount > 1 ? ps_scan_format_1.PsScanFormat.Pdf : ps_scan_format_1.PsScanFormat.Png;
+        return formats.includes(wanted) ? wanted : formats[0];
+    }
+}
+exports.PsScanOutputService = PsScanOutputService;

package/dist/services/ps-scan-pdf-service.d.ts

@@ -5,6 +5,4 @@ export declare class PsScanPdfService {
     static build(pages: PsScanPage[]): Promise<Blob>;
     static fromJpegs(pages: PsScanPdfPage[]): Blob;
     static pageSize(page: PsScanPdfPage): PsPageSize;
-    private static pageObject;
-    private static text;
 }

package/dist/services/ps-scan-pdf-service.js

@@ -1,6 +1,7 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.PsScanPdfService = void 0;
+const ps_utilities_1 = require("@pallasoft/ps-utilities");
 const ps_scan_config_1 = require("../constants/ps-scan-config");
 class PsScanPdfService {
     static async build(pages) {
@@ -14,60 +15,10 @@ class PsScanPdfService {
         return PsScanPdfService.fromJpegs(loaded);
     }
     static fromJpegs(pages) {
-        const chunks = [];
-        const offsets = [];
-        let length = 0;
-        const push = (chunk) => {
-            chunks.push(chunk);
-            length += chunk.length;
-        };
-        const begin = (objectNumber) => {
-            offsets[objectNumber] = length;
-            push(PsScanPdfService.text(`${objectNumber} 0 obj\n`));
-        };
-        push(PsScanPdfService.text('%PDF-1.4\n'));
-        push(new Uint8Array([0x25, 0xe2, 0xe3, 0xcf, 0xd3, 0x0a]));
-        begin(1);
-        push(PsScanPdfService.text('<< /Type /Catalog /Pages 2 0 R >>\nendobj\n'));
-        const kids = pages.map((_, index) => `${PsScanPdfService.pageObject(index)} 0 R`).join(' ');
-        begin(2);
-        push(PsScanPdfService.text(`<< /Type /Pages /Kids [${kids}] /Count ${pages.length} >>\nendobj\n`));
-        pages.forEach((page, index) => {
-            const size = PsScanPdfService.pageSize(page);
-            const pageNumber = PsScanPdfService.pageObject(index);
-            const content = `q ${size.width} 0 0 ${size.height} 0 0 cm /Im0 Do Q`;
-            begin(pageNumber);
-            push(PsScanPdfService.text(`<< /Type /Page /Parent 2 0 R /MediaBox [0 0 ${size.width} ${size.height}] /Resources << /XObject << /Im0 ${pageNumber + 1} 0 R >> >> /Contents ${pageNumber + 2} 0 R >>\nendobj\n`));
-            begin(pageNumber + 1);
-            push(PsScanPdfService.text(`<< /Type /XObject /Subtype /Image /Width ${page.width} /Height ${page.height} /ColorSpace /DeviceRGB /BitsPerComponent 8 /Filter /DCTDecode /Length ${page.bytes.length} >>\nstream\n`));
-            push(page.bytes);
-            push(PsScanPdfService.text('\nendstream\nendobj\n'));
-            begin(pageNumber + 2);
-            push(PsScanPdfService.text(`<< /Length ${content.length} >>\nstream\n${content}\nendstream\nendobj\n`));
-        });
-        const count = 3 + pages.length * 3;
-        const entries = Array.from({ length: count - 1 }, (_, index) => `${String(offsets[index + 1]).padStart(10, '0')} 00000 n \n`).join('');
-        push(PsScanPdfService.text(`xref\n0 ${count}\n0000000000 65535 f \n${entries}trailer\n<< /Size ${count} /Root 1 0 R >>\nstartxref\n${length}\n%%EOF\n`));
-        const merged = new Uint8Array(length);
-        let cursor = 0;
-        for (const chunk of chunks) {
-            merged.set(chunk, cursor);
-            cursor += chunk.length;
-        }
-        return new Blob([merged], { type: 'application/pdf' });
+        return new Blob([ps_utilities_1.Common.JpegPdfService.fromJpegs(pages)], { type: ps_scan_config_1.PsScanConfig.pdfType });
     }
     static pageSize(page) {
-        const scale = ps_scan_config_1.PsScanConfig.pdfLongEdgePoints / Math.max(page.width, page.height);
-        return {
-            height: Math.round(page.height * scale * 100) / 100,
-            width: Math.round(page.width * scale * 100) / 100,
-        };
-    }
-    static pageObject(index) {
-        return 3 + index * 3;
-    }
-    static text(value) {
-        return new TextEncoder().encode(value);
+        return ps_utilities_1.Common.JpegPdfService.pageSize(page);
     }
 }
 exports.PsScanPdfService = PsScanPdfService;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@pallasoft/ps-file-components",
-	"version": "2.1.0",
+	"version": "2.2.0",
 	"private": false,
 	"main": "./dist/index.js",
 	"module": "./dist/esm/index.js",
@@ -33,7 +33,7 @@
 		"@pallasoft/ps-core-components": "^2.37.0",
 		"@pallasoft/ps-icons": "^1.9.0",
 		"@pallasoft/ps-popovers": "^1.13.0",
-		"@pallasoft/ps-utilities": "^2.19.1",
+		"@pallasoft/ps-utilities": "^2.28.0",
 		"pdfjs-dist": "^6.3.289"
 	},
 	"peerDependencies": {