@pallasoft/ps-file-components 1.0.0

package/LICENSE

@@ -0,0 +1,32 @@
+Pallasoft Proprietary License
+
+Version 1.0, 23-Jan-2024
+
+1. Grant of License:
+   Pallasoft grants you a non-exclusive, non-transferable, revocable license to use the software, solely for internal business purposes.
+
+2. Restrictions:
+   You may not:
+   a. Distribute or sublicense the software to third parties.
+   b. Reverse engineer, decompile, or disassemble the software.
+   c. Remove or alter any proprietary notices or labels on the software.
+
+3. Ownership:
+   Pallasoft retains all right, title, and interest in and to the software, including all intellectual property rights.
+
+4. Confidentiality:
+   You agree to keep the software confidential and not disclose it to third parties.
+
+5. Support and Updates:
+   This license does not entitle you to support or updates. Pallasoft may, at its discretion, provide support and updates.
+
+6. Termination:
+   This license is effective until terminated. Pallasoft may terminate the license at any time if you breach any terms. Upon termination, you must cease using the software.
+
+7. Governing Law:
+   This license is governed by the Canadian Laws. Any disputes arising out of this license shall be resolved in the courts of Canada.
+
+8. Contact Information:
+   For inquiries regarding this license, contact operations@pallasoft.com.
+
+[End of License]

package/README.md

@@ -0,0 +1,10 @@
+# @pallasoft/ps-file-components
+
+Shared Pallasoft file components: a file picker, an upload queue with live progress, a file list and a viewer for images, PDFs (with search), text, CSV, audio and video.
+
+## Scripts
+
+- `npm run build` compiles the package into `dist`.
+- `npm run lint` runs ESLint using the shared package baseline.
+- `npm run format:check` checks Prettier formatting.
+- `npm run release` publishes through semantic-release.

package/dist/components/ps-file-delete-confirm.d.ts

@@ -0,0 +1,11 @@
+import type { PsFileViewerLabels } from '../constants/ps-file-viewer-labels';
+import type { PsLabelSet } from '../models/ps-label-set';
+export interface PsFileDeleteConfirmProps {
+    fileName: string;
+    isDeleting: boolean;
+    isOpen: boolean;
+    labels: PsLabelSet<typeof PsFileViewerLabels>;
+    onCancel: () => void;
+    onConfirm: () => void;
+}
+export declare const PsFileDeleteConfirm: ({ fileName, isDeleting, isOpen, labels, onCancel, onConfirm, }: PsFileDeleteConfirmProps) => import("react").JSX.Element;

package/dist/components/ps-file-delete-confirm.js

@@ -0,0 +1,8 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.PsFileDeleteConfirm = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const ps_core_components_1 = require("@pallasoft/ps-core-components");
+const ps_popovers_1 = require("@pallasoft/ps-popovers");
+const PsFileDeleteConfirm = ({ fileName, isDeleting, isOpen, labels, onCancel, onConfirm, }) => ((0, jsx_runtime_1.jsx)(ps_popovers_1.PsModal, { eyebrow: fileName, isOpen: isOpen, onClose: onCancel, size: 'sm', title: labels.deleteConfirm, children: (0, jsx_runtime_1.jsxs)("div", { className: 'flex flex-col gap-5', children: [(0, jsx_runtime_1.jsx)("p", { className: 'text-sm text-ink/70', children: labels.deleteConfirmBody }), (0, jsx_runtime_1.jsxs)("div", { className: 'flex justify-end gap-2', children: [(0, jsx_runtime_1.jsx)(ps_core_components_1.PsButton, { disabled: isDeleting, onClick: onCancel, type: 'button', variant: 'ghost', children: labels.deleteCancel }), (0, jsx_runtime_1.jsx)(ps_core_components_1.PsButton, { isLoading: isDeleting, onClick: onConfirm, type: 'button', variant: 'danger', children: labels.delete })] })] }) }));
+exports.PsFileDeleteConfirm = PsFileDeleteConfirm;

package/dist/components/ps-file-kind-icon.d.ts

@@ -0,0 +1,6 @@
+export interface PsFileKindIconProps {
+    className?: string;
+    contentType: string;
+    name: string;
+}
+export declare const PsFileKindIcon: ({ className, contentType, name }: PsFileKindIconProps) => import("react").JSX.Element;

package/dist/components/ps-file-kind-icon.js

@@ -0,0 +1,10 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.PsFileKindIcon = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const ps_design_system_1 = require("@pallasoft/ps-design-system");
+const ps_icons_1 = require("@pallasoft/ps-icons");
+const ps_file_kind_icons_1 = require("../constants/ps-file-kind-icons");
+const ps_file_type_service_1 = require("../services/ps-file-type-service");
+const PsFileKindIcon = ({ className, contentType, name }) => ((0, jsx_runtime_1.jsx)("span", { className: ps_design_system_1.PallasoftClassNameService.merge('inline-flex h-10 w-10 shrink-0 items-center justify-center rounded-ps-control bg-primary-soft/60 text-primary', className), children: (0, jsx_runtime_1.jsx)(ps_icons_1.PsIcon, { "aria-hidden": 'true', className: 'h-5 w-5', iconKey: ps_file_kind_icons_1.PsFileKindIcons[ps_file_type_service_1.PsFileTypeService.kindOf(contentType, name)] }) }));
+exports.PsFileKindIcon = PsFileKindIcon;

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

@@ -0,0 +1,12 @@
+import { PsFileListLabels } from '../constants/ps-file-list-labels';
+import type { PsLabelSet } from '../models/ps-label-set';
+import type { PsViewerFile } from '../models/ps-viewer-file';
+export interface PsFileListProps {
+    busyIds?: string[];
+    files: PsViewerFile[];
+    formatDate?: (value: string) => string;
+    labels?: Partial<PsLabelSet<typeof PsFileListLabels>>;
+    onDelete?: (file: PsViewerFile) => void;
+    onOpen: (index: number) => void;
+}
+export declare const PsFileList: ({ busyIds, files, formatDate, labels, onDelete, onOpen, }: PsFileListProps) => import("react").JSX.Element;

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

@@ -0,0 +1,27 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.PsFileList = 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_file_kind_1 = require("../constants/ps-file-kind");
+const ps_file_list_labels_1 = require("../constants/ps-file-list-labels");
+const ps_file_size_service_1 = require("../services/ps-file-size-service");
+const ps_file_type_service_1 = require("../services/ps-file-type-service");
+const ps_file_kind_icon_1 = require("./ps-file-kind-icon");
+const PsFileList = ({ busyIds = [], files, formatDate, labels, onDelete, onOpen, }) => {
+    const text = { ...ps_file_list_labels_1.PsFileListLabels, ...labels };
+    if (files.length === 0)
+        return (0, jsx_runtime_1.jsx)("p", { className: 'text-sm text-ink/60', children: text.empty });
+    return ((0, jsx_runtime_1.jsx)("ul", { className: 'grid gap-2 sm:grid-cols-2', children: files.map((file, index) => {
+            const isImage = ps_file_type_service_1.PsFileTypeService.kindOf(file.contentType, file.name) === ps_file_kind_1.PsFileKind.image;
+            const meta = [
+                file.sizeBytes === undefined ? null : ps_file_size_service_1.PsFileSizeService.format(file.sizeBytes),
+                file.createdAt === undefined || formatDate === undefined
+                    ? null
+                    : formatDate(file.createdAt),
+            ].filter((value) => value !== null);
+            return ((0, jsx_runtime_1.jsxs)("li", { className: 'group flex min-w-0 items-center gap-3 rounded-ps-control border border-line bg-surface p-2 transition hover:border-primary/40', children: [(0, jsx_runtime_1.jsxs)("button", { "aria-label": `${text.open} ${file.name}`, className: 'ps-focus-ring flex min-w-0 flex-1 items-center gap-3 rounded-ps-control text-left', onClick: () => onOpen(index), type: 'button', children: [isImage ? ((0, jsx_runtime_1.jsx)("img", { alt: '', className: 'h-12 w-12 shrink-0 rounded-ps-control border border-line object-cover', loading: 'lazy', src: file.url })) : ((0, jsx_runtime_1.jsx)(ps_file_kind_icon_1.PsFileKindIcon, { className: 'h-12 w-12', contentType: file.contentType, name: file.name })), (0, jsx_runtime_1.jsxs)("span", { className: 'flex min-w-0 flex-col', children: [(0, jsx_runtime_1.jsx)("span", { className: 'truncate text-sm font-medium text-ink group-hover:text-primary', children: file.name }), meta.length > 0 ? ((0, jsx_runtime_1.jsx)("span", { className: 'truncate text-xs text-ink/55', children: meta.join(' · ') })) : null] })] }), (0, jsx_runtime_1.jsx)("a", { "aria-label": `${text.download} ${file.name}`, className: 'ps-focus-ring inline-flex h-9 w-9 shrink-0 items-center justify-center rounded-full text-ink/55 transition hover:bg-primary-soft/60 hover:text-primary', download: file.name, href: file.downloadUrl === undefined ? file.url : file.downloadUrl, children: (0, jsx_runtime_1.jsx)(ps_icons_1.PsIcon, { "aria-hidden": 'true', className: 'h-4 w-4', iconKey: ps_icons_1.PsIconKey.Download }) }), onDelete ? ((0, jsx_runtime_1.jsx)(ps_core_components_1.PsButton, { "aria-label": `${text.delete} ${file.name}`, className: 'h-9 w-9 shrink-0 rounded-full p-0', disabled: busyIds.includes(file.id), onClick: () => onDelete(file), size: 'compact', type: 'button', variant: 'ghost', children: (0, jsx_runtime_1.jsx)(ps_icons_1.PsIcon, { "aria-hidden": 'true', className: 'h-4 w-4', iconKey: ps_icons_1.PsIconKey.Trash }) })) : null] }, file.id));
+        }) }));
+};
+exports.PsFileList = PsFileList;

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

@@ -0,0 +1,18 @@
+import { PsFilePickerLabels } from '../constants/ps-file-picker-labels';
+import type { PsLabelSet } from '../models/ps-label-set';
+export interface PsFilePickerProps {
+    accept: string[];
+    acceptLabel: string;
+    className?: string;
+    disabled?: boolean;
+    dropLabel: string;
+    isLoading?: boolean;
+    labels?: Partial<PsLabelSet<typeof PsFilePickerLabels>>;
+    maxSizeBytes?: number;
+    maxSizeLabel?: string;
+    multiple?: boolean;
+    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, }: PsFilePickerProps) => import("react").JSX.Element;

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

@@ -0,0 +1,48 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.PsFilePicker = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const ps_design_system_1 = require("@pallasoft/ps-design-system");
+const ps_icons_1 = require("@pallasoft/ps-icons");
+const ps_file_picker_labels_1 = require("../constants/ps-file-picker-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, }) => {
+    const [isDragging, setIsDragging] = (0, react_1.useState)(false);
+    const acceptAttr = (0, react_1.useMemo)(() => accept.join(','), [accept]);
+    const text = { ...ps_file_picker_labels_1.PsFilePickerLabels, ...labels };
+    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' }));
+    const select = (list) => {
+        if (list === null || disabled)
+            return;
+        const files = multiple ? Array.from(list) : Array.from(list).slice(0, 1);
+        const { accepted, rejected } = ps_file_selection_service_1.PsFileSelectionService.split(files, {
+            accept,
+            invalidTypeMessage: text.invalidType,
+            maxSizeBytes,
+            tooLargeMessage: maxSizeLabel ? `${text.tooLarge} ${maxSizeLabel}.` : text.tooLarge,
+        });
+        rejected.forEach((rejection) => onError?.(rejection.message));
+        if (accepted.length === 0)
+            return;
+        if (onFilesSelect)
+            onFilesSelect(accepted);
+        else
+            onFileLoad?.(accepted[0]);
+    };
+    const onChange = (event) => {
+        select(event.target.files);
+        event.target.value = '';
+    };
+    const onDrag = (event, isOver) => {
+        event.preventDefault();
+        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-lg 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 : dropLabel }), (0, jsx_runtime_1.jsx)("p", { className: 'mt-1 text-body-3 text-ink/60 sm:text-body-2', children: text.browse }), 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' })] }));
+};
+exports.PsFilePicker = PsFilePicker;

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

@@ -0,0 +1,10 @@
+import type { ReactNode } from 'react';
+export interface PsFileViewerButtonProps {
+    children: ReactNode;
+    className?: string;
+    disabled?: boolean;
+    label: string;
+    onClick: () => void;
+    tone?: 'danger' | 'default';
+}
+export declare const PsFileViewerButton: ({ children, className, disabled, label, onClick, tone, }: PsFileViewerButtonProps) => import("react").JSX.Element;

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

@@ -0,0 +1,7 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.PsFileViewerButton = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const ps_design_system_1 = require("@pallasoft/ps-design-system");
+const PsFileViewerButton = ({ children, className, disabled, label, onClick, tone = 'default', }) => ((0, jsx_runtime_1.jsx)("button", { "aria-label": label, className: ps_design_system_1.PallasoftClassNameService.merge('ps-focus-ring inline-flex h-9 min-w-9 shrink-0 items-center justify-center gap-1.5 rounded-full px-2 text-sm text-white/80 transition hover:bg-white/15 hover:text-white disabled:pointer-events-none disabled:opacity-40', tone === 'danger' ? 'hover:bg-danger/80' : '', className), disabled: disabled, onClick: onClick, title: label, type: 'button', children: children }));
+exports.PsFileViewerButton = PsFileViewerButton;

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

@@ -0,0 +1,2 @@
+import type { PsFileViewerContentProps } from '../models/ps-file-viewer-content-props';
+export declare const PsFileViewerContent: (props: PsFileViewerContentProps) => import("react").JSX.Element;

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

@@ -0,0 +1,28 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.PsFileViewerContent = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const ps_file_kind_1 = require("../constants/ps-file-kind");
+const ps_file_type_service_1 = require("../services/ps-file-type-service");
+const ps_image_viewer_1 = require("./viewers/ps-image-viewer");
+const ps_media_viewer_1 = require("./viewers/ps-media-viewer");
+const ps_pdf_viewer_1 = require("./viewers/ps-pdf-viewer");
+const ps_text_viewer_1 = require("./viewers/ps-text-viewer");
+const ps_unsupported_viewer_1 = require("./viewers/ps-unsupported-viewer");
+const PsFileViewerContent = (props) => {
+    switch (ps_file_type_service_1.PsFileTypeService.kindOf(props.file.contentType, props.file.name)) {
+        case ps_file_kind_1.PsFileKind.image:
+            return (0, jsx_runtime_1.jsx)(ps_image_viewer_1.PsImageViewer, { ...props });
+        case ps_file_kind_1.PsFileKind.pdf:
+            return (0, jsx_runtime_1.jsx)(ps_pdf_viewer_1.PsPdfViewer, { ...props });
+        case ps_file_kind_1.PsFileKind.csv:
+        case ps_file_kind_1.PsFileKind.text:
+            return (0, jsx_runtime_1.jsx)(ps_text_viewer_1.PsTextViewer, { ...props });
+        case ps_file_kind_1.PsFileKind.audio:
+        case ps_file_kind_1.PsFileKind.video:
+            return (0, jsx_runtime_1.jsx)(ps_media_viewer_1.PsMediaViewer, { ...props });
+        default:
+            return (0, jsx_runtime_1.jsx)(ps_unsupported_viewer_1.PsUnsupportedViewer, { ...props });
+    }
+};
+exports.PsFileViewerContent = PsFileViewerContent;

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

@@ -0,0 +1,14 @@
+import { PsFileViewerLabels } from '../constants/ps-file-viewer-labels';
+import type { PsLabelSet } from '../models/ps-label-set';
+import type { PsViewerFile } from '../models/ps-viewer-file';
+export interface PsFileViewerProps {
+    files: PsViewerFile[];
+    index: number;
+    isOpen: boolean;
+    labels?: Partial<PsLabelSet<typeof PsFileViewerLabels>>;
+    onClose: () => void;
+    onDelete?: (file: PsViewerFile) => Promise<void> | void;
+    onIndexChange: (index: number) => void;
+    pdfWorkerSrc?: string;
+}
+export declare const PsFileViewer: ({ files, index, isOpen, labels, onClose, onDelete, onIndexChange, pdfWorkerSrc, }: PsFileViewerProps) => import("react").ReactPortal | null;

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

@@ -0,0 +1,102 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.PsFileViewer = 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_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_size_service_1 = require("../services/ps-file-size-service");
+const ps_file_type_service_1 = require("../services/ps-file-type-service");
+const ps_file_delete_confirm_1 = require("./ps-file-delete-confirm");
+const ps_file_viewer_button_1 = require("./ps-file-viewer-button");
+const ps_file_viewer_content_1 = require("./ps-file-viewer-content");
+const PsFileViewer = ({ files, index, isOpen, labels, onClose, onDelete, onIndexChange, pdfWorkerSrc, }) => {
+    const text = { ...ps_file_viewer_labels_1.PsFileViewerLabels, ...labels };
+    const { isClosing, shouldRender } = (0, ps_core_components_1.usePsExitTransition)(isOpen);
+    const zIndex = (0, ps_core_components_1.usePsLayerZIndex)(ps_design_system_1.PallasoftZIndex.Modal);
+    const [zoom, setZoom] = (0, react_1.useState)(1);
+    const [rotation, setRotation] = (0, react_1.useState)(0);
+    const [search, setSearch] = (0, react_1.useState)('');
+    const [activeMatch, setActiveMatch] = (0, react_1.useState)(0);
+    const [matchCount, setMatchCount] = (0, react_1.useState)(0);
+    const [isConfirming, setIsConfirming] = (0, react_1.useState)(false);
+    const [isDeleting, setIsDeleting] = (0, react_1.useState)(false);
+    const searchInput = (0, react_1.useRef)(null);
+    const query = (0, ps_core_components_1.usePsDebouncedValue)(search, ps_file_viewer_config_1.PsFileViewerConfig.searchDebounceMs);
+    const file = files.length === 0 ? null : files[Math.min(index, files.length - 1)];
+    const kind = file === null ? null : ps_file_type_service_1.PsFileTypeService.kindOf(file.contentType, file.name);
+    const canSearch = kind !== null && ps_file_viewer_kinds_1.PsFileViewerKinds.searchable.includes(kind);
+    const canZoom = kind !== null && ps_file_viewer_kinds_1.PsFileViewerKinds.zoomable.includes(kind);
+    const canRotate = kind !== null && ps_file_viewer_kinds_1.PsFileViewerKinds.rotatable.includes(kind);
+    (0, react_1.useEffect)(() => {
+        setZoom(1);
+        setRotation(0);
+        setSearch('');
+        setActiveMatch(0);
+        setMatchCount(0);
+    }, [file === null ? null : file.id]);
+    (0, react_1.useEffect)(() => setActiveMatch(0), [query]);
+    const go = (step) => {
+        if (files.length > 1)
+            onIndexChange((index + step + files.length) % files.length);
+    };
+    const stepMatch = (step) => {
+        if (matchCount > 0)
+            setActiveMatch((current) => (current + step + matchCount) % matchCount);
+    };
+    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)));
+    (0, react_1.useEffect)(() => {
+        if (!isOpen)
+            return;
+        const onKey = (event) => {
+            const isTyping = event.target instanceof HTMLInputElement;
+            if (event.key === 'Escape' && !isConfirming)
+                onClose();
+            else if ((event.metaKey || event.ctrlKey) && event.key === 'f' && canSearch) {
+                event.preventDefault();
+                searchInput.current?.focus();
+            }
+            else if (isTyping)
+                return;
+            else if (event.key === 'ArrowRight')
+                go(1);
+            else if (event.key === 'ArrowLeft')
+                go(-1);
+            else if (event.key === '+' || event.key === '=')
+                changeZoom(ps_file_viewer_config_1.PsFileViewerConfig.zoomStep);
+            else if (event.key === '-')
+                changeZoom(-ps_file_viewer_config_1.PsFileViewerConfig.zoomStep);
+        };
+        window.addEventListener('keydown', onKey);
+        return () => window.removeEventListener('keydown', onKey);
+    }, [isOpen, isConfirming, canSearch, index, files.length]);
+    if (!shouldRender || file === null || typeof document === 'undefined')
+        return null;
+    const confirmDelete = async () => {
+        if (!onDelete)
+            return;
+        setIsDeleting(true);
+        try {
+            await onDelete(file);
+            setIsConfirming(false);
+        }
+        finally {
+            setIsDeleting(false);
+        }
+    };
+    return (0, react_dom_1.createPortal)((0, jsx_runtime_1.jsx)("div", { "aria-label": file.name, "aria-modal": 'true', className: ps_design_system_1.PallasoftClassNameService.merge('fixed inset-0 flex flex-col bg-slate-950/95 text-white backdrop-blur-md', isClosing ? 'animate-ps-fade-out' : 'animate-ps-fade-in'), role: 'dialog', style: { zIndex }, children: (0, jsx_runtime_1.jsxs)(ps_core_components_1.PsLayer, { zIndex: zIndex, children: [(0, jsx_runtime_1.jsxs)("header", { className: 'flex shrink-0 flex-wrap items-center gap-2 border-b border-white/10 px-3 py-2 sm:px-4', children: [(0, jsx_runtime_1.jsx)("div", { className: 'flex min-w-0 flex-1 items-center gap-3', children: (0, jsx_runtime_1.jsxs)("div", { className: 'min-w-0', children: [(0, jsx_runtime_1.jsx)("p", { className: 'truncate text-sm font-semibold', children: file.name }), (0, jsx_runtime_1.jsx)("p", { className: 'truncate text-xs text-white/55', children: [
+                                            files.length > 1 ? `${index + 1} / ${files.length}` : null,
+                                            file.sizeBytes === undefined ? null : ps_file_size_service_1.PsFileSizeService.format(file.sizeBytes),
+                                        ]
+                                            .filter((value) => value !== null)
+                                            .join(' · ') })] }) }), canSearch ? ((0, jsx_runtime_1.jsxs)("div", { className: 'order-last flex w-full items-center gap-1 rounded-full bg-white/10 px-3 sm:order-none sm:w-72', children: [(0, jsx_runtime_1.jsx)(ps_icons_1.PsIcon, { "aria-hidden": 'true', className: 'h-4 w-4 shrink-0 text-white/60', iconKey: ps_icons_1.PsIconKey.Search }), (0, jsx_runtime_1.jsx)("input", { "aria-label": text.search, className: 'h-9 min-w-0 flex-1 bg-transparent text-sm text-white placeholder:text-white/45 focus:outline-none', onChange: (event) => setSearch(event.target.value), onKeyDown: (event) => {
+                                        if (event.key === 'Enter')
+                                            stepMatch(event.shiftKey ? -1 : 1);
+                                    }, placeholder: text.search, ref: searchInput, type: 'search', value: search }), query.trim().length > 0 ? ((0, jsx_runtime_1.jsx)("span", { className: 'shrink-0 text-xs text-white/60', children: matchCount === 0 ? text.noMatches : `${activeMatch + 1} / ${matchCount}` })) : null, (0, jsx_runtime_1.jsx)(ps_file_viewer_button_1.PsFileViewerButton, { disabled: matchCount === 0, label: text.previousMatch, onClick: () => stepMatch(-1), children: (0, jsx_runtime_1.jsx)(ps_icons_1.PsIcon, { "aria-hidden": 'true', className: 'h-4 w-4 -rotate-90', iconKey: ps_icons_1.PsIconKey.ChevronRight }) }), (0, jsx_runtime_1.jsx)(ps_file_viewer_button_1.PsFileViewerButton, { disabled: matchCount === 0, label: text.nextMatch, onClick: () => stepMatch(1), children: (0, jsx_runtime_1.jsx)(ps_icons_1.PsIcon, { "aria-hidden": 'true', className: 'h-4 w-4 rotate-90', iconKey: ps_icons_1.PsIconKey.ChevronRight }) })] })) : null, (0, jsx_runtime_1.jsxs)("div", { className: 'flex items-center gap-0.5', children: [canZoom ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(ps_file_viewer_button_1.PsFileViewerButton, { label: text.zoomOut, onClick: () => changeZoom(-ps_file_viewer_config_1.PsFileViewerConfig.zoomStep), children: (0, jsx_runtime_1.jsx)(ps_icons_1.PsIcon, { "aria-hidden": 'true', className: 'h-4 w-4', iconKey: ps_icons_1.PsIconKey.ZoomOut }) }), (0, jsx_runtime_1.jsxs)(ps_file_viewer_button_1.PsFileViewerButton, { className: 'w-14 text-xs', label: text.zoomReset, onClick: () => setZoom(1), children: [Math.round(zoom * 100), "%"] }), (0, jsx_runtime_1.jsx)(ps_file_viewer_button_1.PsFileViewerButton, { label: text.zoomIn, onClick: () => changeZoom(ps_file_viewer_config_1.PsFileViewerConfig.zoomStep), children: (0, jsx_runtime_1.jsx)(ps_icons_1.PsIcon, { "aria-hidden": 'true', className: 'h-4 w-4', iconKey: ps_icons_1.PsIconKey.ZoomIn }) })] })) : null, canRotate ? ((0, jsx_runtime_1.jsx)(ps_file_viewer_button_1.PsFileViewerButton, { label: text.rotate, onClick: () => setRotation((current) => (current + ps_file_viewer_config_1.PsFileViewerConfig.rotateStep) % 360), children: (0, jsx_runtime_1.jsx)(ps_icons_1.PsIcon, { "aria-hidden": 'true', className: 'h-4 w-4', iconKey: ps_icons_1.PsIconKey.Rotate }) })) : null, (0, jsx_runtime_1.jsx)("a", { "aria-label": text.download, className: 'ps-focus-ring inline-flex h-9 w-9 items-center justify-center rounded-full text-white/80 transition hover:bg-white/15 hover:text-white', download: file.name, href: file.downloadUrl === undefined ? file.url : file.downloadUrl, title: text.download, children: (0, jsx_runtime_1.jsx)(ps_icons_1.PsIcon, { "aria-hidden": 'true', className: 'h-4 w-4', iconKey: ps_icons_1.PsIconKey.Download }) }), onDelete ? ((0, jsx_runtime_1.jsx)(ps_file_viewer_button_1.PsFileViewerButton, { label: text.delete, onClick: () => setIsConfirming(true), tone: 'danger', children: (0, jsx_runtime_1.jsx)(ps_icons_1.PsIcon, { "aria-hidden": 'true', className: 'h-4 w-4', iconKey: ps_icons_1.PsIconKey.Trash }) })) : null, (0, jsx_runtime_1.jsx)(ps_file_viewer_button_1.PsFileViewerButton, { label: text.close, onClick: onClose, children: (0, jsx_runtime_1.jsx)(ps_icons_1.PsIcon, { "aria-hidden": 'true', className: 'h-5 w-5', iconKey: ps_icons_1.PsIconKey.Close }) })] })] }), (0, jsx_runtime_1.jsxs)("div", { className: 'relative flex min-h-0 flex-1', children: [files.length > 1 ? ((0, jsx_runtime_1.jsx)(ps_file_viewer_button_1.PsFileViewerButton, { className: 'absolute left-2 top-1/2 z-10 h-11 w-11 -translate-y-1/2 bg-black/40', label: text.previous, onClick: () => go(-1), children: (0, jsx_runtime_1.jsx)(ps_icons_1.PsIcon, { "aria-hidden": 'true', className: 'h-5 w-5 rotate-180', iconKey: ps_icons_1.PsIconKey.ChevronRight }) })) : null, (0, jsx_runtime_1.jsx)("div", { className: 'flex min-h-0 min-w-0 flex-1 p-3 sm:p-6', children: (0, jsx_runtime_1.jsx)(ps_file_viewer_content_1.PsFileViewerContent, { activeMatch: activeMatch, file: file, labels: text, onMatchCount: setMatchCount, pdfWorkerSrc: pdfWorkerSrc, query: canSearch ? query : '', rotation: rotation, zoom: zoom }, file.id) }), files.length > 1 ? ((0, jsx_runtime_1.jsx)(ps_file_viewer_button_1.PsFileViewerButton, { className: 'absolute right-2 top-1/2 z-10 h-11 w-11 -translate-y-1/2 bg-black/40', label: text.next, onClick: () => go(1), children: (0, jsx_runtime_1.jsx)(ps_icons_1.PsIcon, { "aria-hidden": 'true', className: 'h-5 w-5', iconKey: ps_icons_1.PsIconKey.ChevronRight }) })) : null] }), (0, jsx_runtime_1.jsx)(ps_file_delete_confirm_1.PsFileDeleteConfirm, { fileName: file.name, isDeleting: isDeleting, isOpen: isConfirming, labels: text, onCancel: () => setIsConfirming(false), onConfirm: () => void confirmDelete() })] }) }), document.body);
+};
+exports.PsFileViewer = PsFileViewer;

package/dist/components/ps-progress-bar.d.ts

@@ -0,0 +1,7 @@
+export interface PsProgressBarProps {
+    className?: string;
+    label: string;
+    tone?: 'danger' | 'primary' | 'success';
+    value: number;
+}
+export declare const PsProgressBar: ({ className, label, tone, value, }: PsProgressBarProps) => import("react").JSX.Element;

package/dist/components/ps-progress-bar.js

@@ -0,0 +1,15 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.PsProgressBar = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const ps_design_system_1 = require("@pallasoft/ps-design-system");
+const toneClassNames = {
+    danger: 'bg-danger',
+    primary: 'bg-primary',
+    success: 'bg-success',
+};
+const PsProgressBar = ({ className, label, tone = 'primary', value, }) => {
+    const percent = Math.round(Math.min(1, Math.max(0, value)) * 100);
+    return ((0, jsx_runtime_1.jsx)("div", { "aria-label": label, "aria-valuemax": 100, "aria-valuemin": 0, "aria-valuenow": percent, className: ps_design_system_1.PallasoftClassNameService.merge('h-1.5 w-full overflow-hidden rounded-full bg-line/70', className), role: 'progressbar', children: (0, jsx_runtime_1.jsx)("div", { className: ps_design_system_1.PallasoftClassNameService.merge('h-full rounded-full transition-[width] duration-200 ease-out', toneClassNames[tone]), style: { width: `${percent}%` } }) }));
+};
+exports.PsProgressBar = PsProgressBar;

package/dist/components/ps-upload-modal.d.ts

@@ -0,0 +1,10 @@
+import { PsUploadLabels } from '../constants/ps-upload-labels';
+import type { PsLabelSet } from '../models/ps-label-set';
+import type { PsUploadQueueState } from '../models/ps-upload-queue-state';
+export interface PsUploadModalProps {
+    isOpen: boolean;
+    labels?: Partial<PsLabelSet<typeof PsUploadLabels>>;
+    onClose: () => void;
+    queue: PsUploadQueueState;
+}
+export declare const PsUploadModal: ({ isOpen, labels, onClose, queue }: PsUploadModalProps) => import("react").JSX.Element;

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

@@ -0,0 +1,19 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.PsUploadModal = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const ps_core_components_1 = require("@pallasoft/ps-core-components");
+const ps_popovers_1 = require("@pallasoft/ps-popovers");
+const ps_upload_labels_1 = require("../constants/ps-upload-labels");
+const ps_upload_queue_service_1 = require("../services/ps-upload-queue-service");
+const ps_progress_bar_1 = require("./ps-progress-bar");
+const ps_upload_row_1 = require("./ps-upload-row");
+const PsUploadModal = ({ isOpen, labels, onClose, queue }) => {
+    const text = { ...ps_upload_labels_1.PsUploadLabels, ...labels };
+    const summary = ps_upload_queue_service_1.PsUploadQueueService.summary(queue.items);
+    const overall = queue.items.length === 0
+        ? 0
+        : queue.items.reduce((total, item) => total + item.progress, 0) / queue.items.length;
+    return ((0, jsx_runtime_1.jsx)(ps_popovers_1.PsModal, { eyebrow: `${summary.done} / ${summary.total}`, isOpen: isOpen, onClose: onClose, size: 'md', title: queue.isBusy ? text.title : text.titleDone, children: (0, jsx_runtime_1.jsxs)("div", { className: 'flex flex-col gap-4', children: [(0, jsx_runtime_1.jsx)(ps_progress_bar_1.PsProgressBar, { label: text.title, tone: summary.failed > 0 ? 'danger' : queue.isBusy ? 'primary' : 'success', value: overall }), (0, jsx_runtime_1.jsx)("ul", { className: 'flex max-h-[50vh] flex-col divide-y divide-line/70 overflow-y-auto', children: queue.items.map((item) => ((0, jsx_runtime_1.jsx)(ps_upload_row_1.PsUploadRow, { item: item, labels: text, onCancel: () => queue.cancel(item.id), onRemove: () => queue.remove(item.id), onRetry: () => queue.retry(item.id) }, item.id))) }), (0, jsx_runtime_1.jsx)("div", { className: 'flex justify-end', children: (0, jsx_runtime_1.jsx)(ps_core_components_1.PsButton, { onClick: onClose, type: 'button', variant: queue.isBusy ? 'ghost' : 'primary', children: text.close }) })] }) }));
+};
+exports.PsUploadModal = PsUploadModal;

package/dist/components/ps-upload-row.d.ts

@@ -0,0 +1,11 @@
+import { PsUploadLabels } from '../constants/ps-upload-labels';
+import type { PsLabelSet } from '../models/ps-label-set';
+import type { PsUploadItem } from '../models/ps-upload-item';
+export interface PsUploadRowProps {
+    item: PsUploadItem;
+    labels: PsLabelSet<typeof PsUploadLabels>;
+    onCancel: () => void;
+    onRemove: () => void;
+    onRetry: () => void;
+}
+export declare const PsUploadRow: ({ item, labels, onCancel, onRemove, onRetry }: PsUploadRowProps) => import("react").JSX.Element;

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

@@ -0,0 +1,28 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.PsUploadRow = 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_upload_status_1 = require("../constants/ps-upload-status");
+const ps_upload_status_tones_1 = require("../constants/ps-upload-status-tones");
+const ps_file_size_service_1 = require("../services/ps-file-size-service");
+const ps_upload_queue_service_1 = require("../services/ps-upload-queue-service");
+const ps_file_kind_icon_1 = require("./ps-file-kind-icon");
+const ps_progress_bar_1 = require("./ps-progress-bar");
+const PsUploadRow = ({ item, labels, onCancel, onRemove, onRetry }) => {
+    const isActive = ps_upload_queue_service_1.PsUploadQueueService.isActive(item);
+    const canRetry = item.status === ps_upload_status_1.PsUploadStatus.failed || item.status === ps_upload_status_1.PsUploadStatus.cancelled;
+    const percent = Math.round(item.progress * 100);
+    const statusText = item.status === ps_upload_status_1.PsUploadStatus.uploading
+        ? `${labels.uploading} ${percent}%`
+        : item.status === ps_upload_status_1.PsUploadStatus.failed && item.error
+            ? item.error
+            : labels[item.status];
+    return ((0, jsx_runtime_1.jsxs)("li", { className: 'flex items-center gap-3 py-3', children: [(0, jsx_runtime_1.jsx)(ps_file_kind_icon_1.PsFileKindIcon, { contentType: item.file.type, name: item.file.name }), (0, jsx_runtime_1.jsxs)("div", { className: 'flex min-w-0 flex-1 flex-col gap-1.5', children: [(0, jsx_runtime_1.jsxs)("div", { className: 'flex items-baseline justify-between gap-3', children: [(0, jsx_runtime_1.jsx)("p", { className: 'truncate text-sm font-medium text-ink', children: item.file.name }), (0, jsx_runtime_1.jsx)("span", { className: 'shrink-0 text-xs text-ink/55', children: ps_file_size_service_1.PsFileSizeService.format(item.file.size) })] }), (0, jsx_runtime_1.jsx)(ps_progress_bar_1.PsProgressBar, { label: item.file.name, tone: ps_upload_status_tones_1.PsUploadStatusTones[item.status], value: item.status === ps_upload_status_1.PsUploadStatus.failed ? 1 : item.progress }), (0, jsx_runtime_1.jsxs)("p", { className: item.status === ps_upload_status_1.PsUploadStatus.failed || item.status === ps_upload_status_1.PsUploadStatus.cancelled
+                            ? 'text-xs text-danger'
+                            : item.status === ps_upload_status_1.PsUploadStatus.done
+                                ? 'flex items-center gap-1 text-xs text-success'
+                                : 'text-xs text-ink/60', role: item.status === ps_upload_status_1.PsUploadStatus.failed ? 'alert' : undefined, children: [item.status === ps_upload_status_1.PsUploadStatus.done ? ((0, jsx_runtime_1.jsx)(ps_icons_1.PsIcon, { "aria-hidden": 'true', className: 'h-3.5 w-3.5', iconKey: ps_icons_1.PsIconKey.Check })) : null, statusText] })] }), (0, jsx_runtime_1.jsxs)("div", { className: 'flex shrink-0 items-center gap-1', children: [canRetry ? ((0, jsx_runtime_1.jsx)(ps_core_components_1.PsButton, { leadingIcon: (0, jsx_runtime_1.jsx)(ps_icons_1.PsIcon, { "aria-hidden": 'true', className: 'h-4 w-4', iconKey: ps_icons_1.PsIconKey.Refresh }), onClick: onRetry, size: 'compact', type: 'button', variant: 'ghost', children: labels.retry })) : null, (0, jsx_runtime_1.jsx)(ps_core_components_1.PsButton, { "aria-label": `${isActive ? labels.cancel : labels.remove} ${item.file.name}`, onClick: isActive ? onCancel : onRemove, size: 'compact', type: 'button', variant: 'ghost', children: isActive ? labels.cancel : labels.remove })] })] }));
+};
+exports.PsUploadRow = PsUploadRow;

package/dist/components/viewers/ps-highlighted-text.d.ts

@@ -0,0 +1,6 @@
+import type { PsTextSegment } from '../../models/ps-text-segment';
+export interface PsHighlightedTextProps {
+    activeMatch: number;
+    segments: PsTextSegment[];
+}
+export declare const PsHighlightedText: ({ activeMatch, segments }: PsHighlightedTextProps) => import("react").JSX.Element;

package/dist/components/viewers/ps-highlighted-text.js

@@ -0,0 +1,8 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.PsHighlightedText = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const PsHighlightedText = ({ activeMatch, segments }) => ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: segments.map((segment, index) => segment.isMatch ? ((0, jsx_runtime_1.jsx)("mark", { className: segment.matchIndex === activeMatch
+            ? 'rounded-sm bg-warning px-0.5 text-ink ring-2 ring-warning'
+            : 'rounded-sm bg-warning/40 px-0.5 text-inherit', "data-ps-match": segment.matchIndex === null ? undefined : segment.matchIndex, children: segment.text }, index)) : ((0, jsx_runtime_1.jsx)("span", { children: segment.text }, index))) }));
+exports.PsHighlightedText = PsHighlightedText;

package/dist/components/viewers/ps-image-viewer.d.ts

@@ -0,0 +1,2 @@
+import type { PsFileViewerContentProps } from '../../models/ps-file-viewer-content-props';
+export declare const PsImageViewer: ({ file, labels, rotation, zoom }: PsFileViewerContentProps) => import("react").JSX.Element;

package/dist/components/viewers/ps-image-viewer.js

@@ -0,0 +1,33 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.PsImageViewer = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const PsImageViewer = ({ file, labels, rotation, zoom }) => {
+    const [offset, setOffset] = (0, react_1.useState)({ x: 0, y: 0 });
+    const [hasFailed, setHasFailed] = (0, react_1.useState)(false);
+    const drag = (0, react_1.useRef)(null);
+    (0, react_1.useEffect)(() => {
+        setOffset({ x: 0, y: 0 });
+        setHasFailed(false);
+    }, [file.id, zoom === 1]);
+    const onPointerDown = (event) => {
+        if (zoom <= 1)
+            return;
+        drag.current = { x: event.clientX - offset.x, y: event.clientY - offset.y };
+        event.currentTarget.setPointerCapture(event.pointerId);
+    };
+    const onPointerMove = (event) => {
+        if (drag.current === null)
+            return;
+        setOffset({ x: event.clientX - drag.current.x, y: event.clientY - drag.current.y });
+    };
+    if (hasFailed)
+        return (0, jsx_runtime_1.jsx)("p", { className: 'm-auto text-sm text-white/70', children: labels.loadFailed });
+    return ((0, jsx_runtime_1.jsx)("div", { className: `flex h-full w-full touch-none items-center justify-center overflow-hidden ${zoom > 1 ? 'cursor-grab active:cursor-grabbing' : ''}`, onPointerDown: onPointerDown, onPointerMove: onPointerMove, onPointerUp: () => {
+            drag.current = null;
+        }, children: (0, jsx_runtime_1.jsx)("img", { alt: file.name, className: 'max-h-full max-w-full select-none object-contain shadow-2xl transition-transform duration-150', draggable: false, onError: () => setHasFailed(true), src: file.url, style: {
+                transform: `translate(${offset.x}px, ${offset.y}px) scale(${zoom}) rotate(${rotation}deg)`,
+            } }) }));
+};
+exports.PsImageViewer = PsImageViewer;

package/dist/components/viewers/ps-media-viewer.d.ts

@@ -0,0 +1,2 @@
+import type { PsFileViewerContentProps } from '../../models/ps-file-viewer-content-props';
+export declare const PsMediaViewer: ({ file }: PsFileViewerContentProps) => import("react").JSX.Element;

package/dist/components/viewers/ps-media-viewer.js

@@ -0,0 +1,8 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.PsMediaViewer = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const ps_file_kind_1 = require("../../constants/ps-file-kind");
+const ps_file_type_service_1 = require("../../services/ps-file-type-service");
+const PsMediaViewer = ({ file }) => ps_file_type_service_1.PsFileTypeService.kindOf(file.contentType, file.name) === ps_file_kind_1.PsFileKind.video ? ((0, jsx_runtime_1.jsx)("video", { className: 'm-auto max-h-full max-w-full rounded-lg shadow-2xl', controls: true, src: file.url })) : ((0, jsx_runtime_1.jsx)("audio", { className: 'm-auto w-full max-w-xl', controls: true, src: file.url }));
+exports.PsMediaViewer = PsMediaViewer;

package/dist/components/viewers/ps-pdf-page.d.ts

@@ -0,0 +1,12 @@
+import type { PDFDocumentProxy } from 'pdfjs-dist';
+import type { PsPdfMatch } from '../../models/ps-pdf-match';
+export interface PsPdfPageProps {
+    activeMatch: PsPdfMatch | null;
+    document: PDFDocumentProxy;
+    label: string;
+    matches: PsPdfMatch[];
+    pageNumber: number;
+    rotation: number;
+    scale: number;
+}
+export declare const PsPdfPage: ({ activeMatch, document, label, matches, pageNumber, rotation, scale, }: PsPdfPageProps) => import("react").JSX.Element;

package/dist/components/viewers/ps-pdf-page.js

@@ -0,0 +1,37 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.PsPdfPage = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const use_ps_in_view_1 = require("../../hooks/use-ps-in-view");
+const ps_pdf_service_1 = require("../../services/ps-pdf-service");
+const PsPdfPage = ({ activeMatch, document, label, matches, pageNumber, rotation, scale, }) => {
+    const canvas = (0, react_1.useRef)(null);
+    const [container, isInView] = (0, use_ps_in_view_1.usePsInView)('600px');
+    const [size, setSize] = (0, react_1.useState)(null);
+    (0, react_1.useEffect)(() => {
+        let isCurrent = true;
+        let task = null;
+        document.getPage(pageNumber).then((page) => {
+            if (!isCurrent)
+                return;
+            const viewport = page.getViewport({ rotation: page.rotate + rotation, scale });
+            setSize({ height: viewport.height, width: viewport.width });
+            if (isInView && canvas.current)
+                task = ps_pdf_service_1.PsPdfService.render(page, canvas.current, scale, rotation);
+        });
+        return () => {
+            isCurrent = false;
+            task?.cancel();
+        };
+    }, [document, pageNumber, rotation, scale, isInView]);
+    return ((0, jsx_runtime_1.jsxs)("div", { "aria-label": `${label} ${pageNumber}`, className: 'relative mx-auto bg-white shadow-2xl', "data-ps-pdf-page": pageNumber, ref: container, style: size === null ? { height: 800, width: 600 } : { height: size.height, width: size.width }, children: [(0, jsx_runtime_1.jsx)("canvas", { className: 'block', ref: canvas }), matches.map((match, index) => ((0, jsx_runtime_1.jsx)("span", { className: match === activeMatch
+                    ? 'pointer-events-none absolute rounded-sm bg-warning/60 ring-2 ring-warning'
+                    : 'pointer-events-none absolute rounded-sm bg-warning/35', style: {
+                    height: `${match.height * 100}%`,
+                    left: `${match.left * 100}%`,
+                    top: `${match.top * 100}%`,
+                    width: `${match.width * 100}%`,
+                } }, index)))] }));
+};
+exports.PsPdfPage = PsPdfPage;