@pallasoft/ps-file-components 1.0.0

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

@@ -0,0 +1,24 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { PsFileKind } from '../constants/ps-file-kind';
+import { PsFileTypeService } from '../services/ps-file-type-service';
+import { PsImageViewer } from './viewers/ps-image-viewer';
+import { PsMediaViewer } from './viewers/ps-media-viewer';
+import { PsPdfViewer } from './viewers/ps-pdf-viewer';
+import { PsTextViewer } from './viewers/ps-text-viewer';
+import { PsUnsupportedViewer } from './viewers/ps-unsupported-viewer';
+export const PsFileViewerContent = (props) => {
+    switch (PsFileTypeService.kindOf(props.file.contentType, props.file.name)) {
+        case PsFileKind.image:
+            return _jsx(PsImageViewer, { ...props });
+        case PsFileKind.pdf:
+            return _jsx(PsPdfViewer, { ...props });
+        case PsFileKind.csv:
+        case PsFileKind.text:
+            return _jsx(PsTextViewer, { ...props });
+        case PsFileKind.audio:
+        case PsFileKind.video:
+            return _jsx(PsMediaViewer, { ...props });
+        default:
+            return _jsx(PsUnsupportedViewer, { ...props });
+    }
+};

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

@@ -0,0 +1,98 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useEffect, useRef, useState } from 'react';
+import { PsLayer, usePsDebouncedValue, usePsExitTransition, usePsLayerZIndex, } from '@pallasoft/ps-core-components';
+import { PallasoftClassNameService, PallasoftZIndex } from '@pallasoft/ps-design-system';
+import { PsIcon, PsIconKey } from '@pallasoft/ps-icons';
+import { createPortal } from 'react-dom';
+import { PsFileViewerConfig } from '../constants/ps-file-viewer-config';
+import { PsFileViewerKinds } from '../constants/ps-file-viewer-kinds';
+import { PsFileViewerLabels } from '../constants/ps-file-viewer-labels';
+import { PsFileSizeService } from '../services/ps-file-size-service';
+import { PsFileTypeService } from '../services/ps-file-type-service';
+import { PsFileDeleteConfirm } from './ps-file-delete-confirm';
+import { PsFileViewerButton } from './ps-file-viewer-button';
+import { PsFileViewerContent } from './ps-file-viewer-content';
+export const PsFileViewer = ({ files, index, isOpen, labels, onClose, onDelete, onIndexChange, pdfWorkerSrc, }) => {
+    const text = { ...PsFileViewerLabels, ...labels };
+    const { isClosing, shouldRender } = usePsExitTransition(isOpen);
+    const zIndex = usePsLayerZIndex(PallasoftZIndex.Modal);
+    const [zoom, setZoom] = useState(1);
+    const [rotation, setRotation] = useState(0);
+    const [search, setSearch] = useState('');
+    const [activeMatch, setActiveMatch] = useState(0);
+    const [matchCount, setMatchCount] = useState(0);
+    const [isConfirming, setIsConfirming] = useState(false);
+    const [isDeleting, setIsDeleting] = useState(false);
+    const searchInput = useRef(null);
+    const query = usePsDebouncedValue(search, PsFileViewerConfig.searchDebounceMs);
+    const file = files.length === 0 ? null : files[Math.min(index, files.length - 1)];
+    const kind = file === null ? null : PsFileTypeService.kindOf(file.contentType, file.name);
+    const canSearch = kind !== null && PsFileViewerKinds.searchable.includes(kind);
+    const canZoom = kind !== null && PsFileViewerKinds.zoomable.includes(kind);
+    const canRotate = kind !== null && PsFileViewerKinds.rotatable.includes(kind);
+    useEffect(() => {
+        setZoom(1);
+        setRotation(0);
+        setSearch('');
+        setActiveMatch(0);
+        setMatchCount(0);
+    }, [file === null ? null : file.id]);
+    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(PsFileViewerConfig.maxZoom, Math.max(PsFileViewerConfig.minZoom, current + step)));
+    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(PsFileViewerConfig.zoomStep);
+            else if (event.key === '-')
+                changeZoom(-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 createPortal(_jsx("div", { "aria-label": file.name, "aria-modal": 'true', className: 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: _jsxs(PsLayer, { zIndex: zIndex, children: [_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: [_jsx("div", { className: 'flex min-w-0 flex-1 items-center gap-3', children: _jsxs("div", { className: 'min-w-0', children: [_jsx("p", { className: 'truncate text-sm font-semibold', children: file.name }), _jsx("p", { className: 'truncate text-xs text-white/55', children: [
+                                            files.length > 1 ? `${index + 1} / ${files.length}` : null,
+                                            file.sizeBytes === undefined ? null : PsFileSizeService.format(file.sizeBytes),
+                                        ]
+                                            .filter((value) => value !== null)
+                                            .join(' · ') })] }) }), canSearch ? (_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: [_jsx(PsIcon, { "aria-hidden": 'true', className: 'h-4 w-4 shrink-0 text-white/60', iconKey: PsIconKey.Search }), _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 ? (_jsx("span", { className: 'shrink-0 text-xs text-white/60', children: matchCount === 0 ? text.noMatches : `${activeMatch + 1} / ${matchCount}` })) : null, _jsx(PsFileViewerButton, { disabled: matchCount === 0, label: text.previousMatch, onClick: () => stepMatch(-1), children: _jsx(PsIcon, { "aria-hidden": 'true', className: 'h-4 w-4 -rotate-90', iconKey: PsIconKey.ChevronRight }) }), _jsx(PsFileViewerButton, { disabled: matchCount === 0, label: text.nextMatch, onClick: () => stepMatch(1), children: _jsx(PsIcon, { "aria-hidden": 'true', className: 'h-4 w-4 rotate-90', iconKey: PsIconKey.ChevronRight }) })] })) : null, _jsxs("div", { className: 'flex items-center gap-0.5', children: [canZoom ? (_jsxs(_Fragment, { children: [_jsx(PsFileViewerButton, { label: text.zoomOut, onClick: () => changeZoom(-PsFileViewerConfig.zoomStep), children: _jsx(PsIcon, { "aria-hidden": 'true', className: 'h-4 w-4', iconKey: PsIconKey.ZoomOut }) }), _jsxs(PsFileViewerButton, { className: 'w-14 text-xs', label: text.zoomReset, onClick: () => setZoom(1), children: [Math.round(zoom * 100), "%"] }), _jsx(PsFileViewerButton, { label: text.zoomIn, onClick: () => changeZoom(PsFileViewerConfig.zoomStep), children: _jsx(PsIcon, { "aria-hidden": 'true', className: 'h-4 w-4', iconKey: PsIconKey.ZoomIn }) })] })) : null, canRotate ? (_jsx(PsFileViewerButton, { label: text.rotate, onClick: () => setRotation((current) => (current + PsFileViewerConfig.rotateStep) % 360), children: _jsx(PsIcon, { "aria-hidden": 'true', className: 'h-4 w-4', iconKey: PsIconKey.Rotate }) })) : null, _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: _jsx(PsIcon, { "aria-hidden": 'true', className: 'h-4 w-4', iconKey: PsIconKey.Download }) }), onDelete ? (_jsx(PsFileViewerButton, { label: text.delete, onClick: () => setIsConfirming(true), tone: 'danger', children: _jsx(PsIcon, { "aria-hidden": 'true', className: 'h-4 w-4', iconKey: PsIconKey.Trash }) })) : null, _jsx(PsFileViewerButton, { label: text.close, onClick: onClose, children: _jsx(PsIcon, { "aria-hidden": 'true', className: 'h-5 w-5', iconKey: PsIconKey.Close }) })] })] }), _jsxs("div", { className: 'relative flex min-h-0 flex-1', children: [files.length > 1 ? (_jsx(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: _jsx(PsIcon, { "aria-hidden": 'true', className: 'h-5 w-5 rotate-180', iconKey: PsIconKey.ChevronRight }) })) : null, _jsx("div", { className: 'flex min-h-0 min-w-0 flex-1 p-3 sm:p-6', children: _jsx(PsFileViewerContent, { activeMatch: activeMatch, file: file, labels: text, onMatchCount: setMatchCount, pdfWorkerSrc: pdfWorkerSrc, query: canSearch ? query : '', rotation: rotation, zoom: zoom }, file.id) }), files.length > 1 ? (_jsx(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: _jsx(PsIcon, { "aria-hidden": 'true', className: 'h-5 w-5', iconKey: PsIconKey.ChevronRight }) })) : null] }), _jsx(PsFileDeleteConfirm, { fileName: file.name, isDeleting: isDeleting, isOpen: isConfirming, labels: text, onCancel: () => setIsConfirming(false), onConfirm: () => void confirmDelete() })] }) }), document.body);
+};

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

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

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

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

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

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

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

@@ -0,0 +1,4 @@
+import { jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
+export const PsHighlightedText = ({ activeMatch, segments }) => (_jsx(_Fragment, { children: segments.map((segment, index) => segment.isMatch ? (_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)) : (_jsx("span", { children: segment.text }, index))) }));

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

@@ -0,0 +1,29 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useEffect, useRef, useState } from 'react';
+export const PsImageViewer = ({ file, labels, rotation, zoom }) => {
+    const [offset, setOffset] = useState({ x: 0, y: 0 });
+    const [hasFailed, setHasFailed] = useState(false);
+    const drag = useRef(null);
+    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 _jsx("p", { className: 'm-auto text-sm text-white/70', children: labels.loadFailed });
+    return (_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: _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)`,
+            } }) }));
+};

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

@@ -0,0 +1,4 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { PsFileKind } from '../../constants/ps-file-kind';
+import { PsFileTypeService } from '../../services/ps-file-type-service';
+export const PsMediaViewer = ({ file }) => PsFileTypeService.kindOf(file.contentType, file.name) === PsFileKind.video ? (_jsx("video", { className: 'm-auto max-h-full max-w-full rounded-lg shadow-2xl', controls: true, src: file.url })) : (_jsx("audio", { className: 'm-auto w-full max-w-xl', controls: true, src: file.url }));

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

@@ -0,0 +1,33 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useRef, useState } from 'react';
+import { usePsInView } from '../../hooks/use-ps-in-view';
+import { PsPdfService } from '../../services/ps-pdf-service';
+export const PsPdfPage = ({ activeMatch, document, label, matches, pageNumber, rotation, scale, }) => {
+    const canvas = useRef(null);
+    const [container, isInView] = usePsInView('600px');
+    const [size, setSize] = useState(null);
+    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 = PsPdfService.render(page, canvas.current, scale, rotation);
+        });
+        return () => {
+            isCurrent = false;
+            task?.cancel();
+        };
+    }, [document, pageNumber, rotation, scale, isInView]);
+    return (_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: [_jsx("canvas", { className: 'block', ref: canvas }), matches.map((match, index) => (_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)))] }));
+};

package/dist/esm/components/viewers/ps-pdf-thumbnail.js

@@ -0,0 +1,24 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useRef } from 'react';
+import { PsFileViewerConfig } from '../../constants/ps-file-viewer-config';
+import { usePsInView } from '../../hooks/use-ps-in-view';
+import { PsPdfService } from '../../services/ps-pdf-service';
+export const PsPdfThumbnail = ({ document, hasMatches, isCurrent, label, onSelect, pageNumber, rotation, }) => {
+    const canvas = useRef(null);
+    const [container, isInView] = usePsInView('200px');
+    useEffect(() => {
+        if (!isInView)
+            return;
+        let isCurrent = true;
+        let task = null;
+        document.getPage(pageNumber).then((page) => {
+            if (isCurrent && canvas.current)
+                task = PsPdfService.render(page, canvas.current, PsFileViewerConfig.pdfThumbnailScale, rotation);
+        });
+        return () => {
+            isCurrent = false;
+            task?.cancel();
+        };
+    }, [document, pageNumber, rotation, isInView]);
+    return (_jsxs("button", { "aria-current": isCurrent ? 'page' : undefined, "aria-label": `${label} ${pageNumber}`, className: `ps-focus-ring relative flex flex-col items-center gap-1 rounded-md p-1.5 transition ${isCurrent ? 'bg-white/15' : 'hover:bg-white/10'}`, onClick: onSelect, ref: container, type: 'button', children: [_jsx("canvas", { className: `block min-h-16 min-w-12 bg-white ${isCurrent ? 'ring-2 ring-primary' : ''}`, ref: canvas }), _jsx("span", { className: 'text-[0.7rem] text-white/70', children: pageNumber }), hasMatches ? (_jsx("span", { className: 'absolute right-1 top-1 h-2 w-2 rounded-full bg-warning' })) : null] }));
+};

package/dist/esm/components/viewers/ps-pdf-viewer.js

@@ -0,0 +1,96 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useMemo, useRef, useState } from 'react';
+import { PsSpinner, usePsElementSize } from '@pallasoft/ps-core-components';
+import { PsFileViewerConfig } from '../../constants/ps-file-viewer-config';
+import { PsPdfService } from '../../services/ps-pdf-service';
+import { PsPdfPage } from './ps-pdf-page';
+import { PsPdfThumbnail } from './ps-pdf-thumbnail';
+export const PsPdfViewer = ({ activeMatch, file, labels, onMatchCount, pdfWorkerSrc, query, rotation, zoom, }) => {
+    const [document, setDocument] = useState(null);
+    const [hasFailed, setHasFailed] = useState(false);
+    const [pageWidth, setPageWidth] = useState(0);
+    const [matches, setMatches] = useState([]);
+    const [currentPage, setCurrentPage] = useState(1);
+    const [frame, frameSize] = usePsElementSize();
+    const scroller = useRef(null);
+    useEffect(() => {
+        let isCurrent = true;
+        let opened = null;
+        setDocument(null);
+        setHasFailed(false);
+        if (pdfWorkerSrc === undefined) {
+            setHasFailed(true);
+            return;
+        }
+        PsPdfService.open(file.url, pdfWorkerSrc)
+            .then(async (loaded) => {
+            opened = loaded;
+            const firstPage = await loaded.getPage(1);
+            if (!isCurrent)
+                return;
+            setPageWidth(firstPage.getViewport({ rotation: firstPage.rotate + rotation, scale: 1 }).width);
+            setDocument(loaded);
+        })
+            .catch(() => {
+            if (isCurrent)
+                setHasFailed(true);
+        });
+        return () => {
+            isCurrent = false;
+            void opened?.loadingTask.destroy();
+        };
+    }, [file.url, pdfWorkerSrc]);
+    useEffect(() => {
+        if (document === null)
+            return;
+        let isCurrent = true;
+        document.getPage(1).then((page) => {
+            if (isCurrent)
+                setPageWidth(page.getViewport({ rotation: page.rotate + rotation, scale: 1 }).width);
+        });
+        return () => {
+            isCurrent = false;
+        };
+    }, [document, rotation]);
+    useEffect(() => {
+        if (document === null || query.trim().length === 0) {
+            setMatches([]);
+            onMatchCount(0);
+            return;
+        }
+        let isCurrent = true;
+        PsPdfService.search(document, query, rotation).then((found) => {
+            if (!isCurrent)
+                return;
+            setMatches(found);
+            onMatchCount(found.length);
+        });
+        return () => {
+            isCurrent = false;
+        };
+    }, [document, query, rotation]);
+    const active = matches.length > 0 ? matches[activeMatch % matches.length] : null;
+    const scrollToPage = (pageNumber) => {
+        const node = scroller.current?.querySelector(`[data-ps-pdf-page='${pageNumber}']`);
+        if (node instanceof HTMLElement)
+            node.scrollIntoView({ behavior: 'smooth', block: 'start' });
+        setCurrentPage(pageNumber);
+    };
+    useEffect(() => {
+        if (active !== null)
+            scrollToPage(active.pageNumber);
+    }, [active]);
+    const scale = useMemo(() => {
+        const fit = frameSize.width > 0 && pageWidth > 0
+            ? (frameSize.width - 48) / pageWidth
+            : PsFileViewerConfig.pdfBaseScale;
+        return Math.max(0.1, fit * zoom);
+    }, [frameSize.width, pageWidth, zoom]);
+    const pages = document === null ? [] : Array.from({ length: document.numPages }, (_, index) => index + 1);
+    return (_jsxs("div", { className: 'flex h-full w-full min-w-0', children: [document !== null && document.numPages > 1 ? (_jsx("nav", { className: 'ps-scrollbar-hidden hidden w-24 shrink-0 flex-col items-center gap-2 overflow-y-auto border-r border-white/10 py-3 md:flex', children: pages.map((pageNumber) => (_jsx(PsPdfThumbnail, { document: document, hasMatches: matches.some((match) => match.pageNumber === pageNumber), isCurrent: pageNumber === currentPage, label: labels.page, onSelect: () => scrollToPage(pageNumber), pageNumber: pageNumber, rotation: rotation }, pageNumber))) })) : null, _jsx("div", { className: 'min-w-0 flex-1', ref: frame, children: hasFailed ? (_jsx("p", { className: 'flex h-full items-center justify-center text-sm text-white/70', children: labels.loadFailed })) : document === null ? (_jsx("div", { className: 'flex h-full items-center justify-center text-white', children: _jsx(PsSpinner, { color: 'current', size: 'large' }) })) : (_jsx("div", { className: 'flex h-full flex-col items-center gap-4 overflow-auto px-6 py-6', onScroll: (event) => {
+                        const top = event.currentTarget.scrollTop + event.currentTarget.clientHeight / 3;
+                        const visible = Array.from(event.currentTarget.querySelectorAll('[data-ps-pdf-page]')).find((node) => node.offsetTop + node.offsetHeight > top);
+                        if (visible)
+                            setCurrentPage(Number(visible.dataset.psPdfPage));
+                    }, ref: scroller, children: pages.map((pageNumber) => (_jsx(PsPdfPage, { activeMatch: active, document: document, label: labels.page, matches: matches.filter((match) => match.pageNumber === pageNumber), pageNumber: pageNumber, rotation: rotation, scale: scale }, pageNumber))) })) })] }));
+};

package/dist/esm/components/viewers/ps-text-viewer.js

@@ -0,0 +1,38 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useEffect, useMemo, useRef } from 'react';
+import { PsSpinner } from '@pallasoft/ps-core-components';
+import { PsFileKind } from '../../constants/ps-file-kind';
+import { usePsActiveMatchScroll } from '../../hooks/use-ps-active-match-scroll';
+import { usePsFileText } from '../../hooks/use-ps-file-text';
+import { PsCsvService } from '../../services/ps-csv-service';
+import { PsFileTypeService } from '../../services/ps-file-type-service';
+import { PsTextSearchService } from '../../services/ps-text-search-service';
+import { PsHighlightedText } from './ps-highlighted-text';
+export const PsTextViewer = ({ activeMatch, file, labels, onMatchCount, query, zoom, }) => {
+    const { hasFailed, text } = usePsFileText(file.url);
+    const container = useRef(null);
+    const isCsv = PsFileTypeService.kindOf(file.contentType, file.name) === PsFileKind.csv;
+    const rows = useMemo(() => (isCsv && text !== null ? PsCsvService.parse(text) : []), [isCsv, text]);
+    const cells = useMemo(() => {
+        let offset = 0;
+        return rows.map((row) => row.map((cell) => {
+            const matches = PsTextSearchService.find(cell, query);
+            const segments = PsTextSearchService.segments(cell, matches, offset);
+            offset += matches.length;
+            return segments;
+        }));
+    }, [rows, query]);
+    const segments = useMemo(() => isCsv || text === null
+        ? []
+        : PsTextSearchService.segments(text, PsTextSearchService.find(text, query)), [isCsv, text, query]);
+    const count = isCsv
+        ? cells.reduce((total, row) => total + row.reduce((sum, cell) => sum + cell.filter((part) => part.isMatch).length, 0), 0)
+        : segments.filter((part) => part.isMatch).length;
+    useEffect(() => onMatchCount(count), [count]);
+    usePsActiveMatchScroll(container, activeMatch, query);
+    if (hasFailed)
+        return _jsx("p", { className: 'm-auto text-sm text-white/70', children: labels.loadFailed });
+    if (text === null)
+        return _jsx(PsSpinner, { className: 'm-auto', color: 'current', size: 'large' });
+    return (_jsx("div", { className: 'h-full w-full overflow-auto', ref: container, children: _jsx("div", { className: 'mx-auto w-full max-w-5xl rounded-lg bg-surface p-5 text-ink shadow-2xl', style: { fontSize: `${zoom * 0.875}rem` }, children: isCsv ? (_jsx("table", { className: 'w-full border-collapse text-left', children: _jsx("tbody", { children: cells.map((row, rowIndex) => (_jsx("tr", { className: rowIndex === 0 ? 'bg-primary-soft/50 font-semibold' : 'border-t border-line', children: row.map((cell, cellIndex) => (_jsx("td", { className: 'whitespace-nowrap px-3 py-1.5 align-top', children: _jsx(PsHighlightedText, { activeMatch: activeMatch, segments: cell }) }, cellIndex))) }, rowIndex))) }) })) : (_jsx("pre", { className: 'whitespace-pre-wrap break-words font-mono leading-relaxed', children: _jsx(PsHighlightedText, { activeMatch: activeMatch, segments: segments }) })) }) }));
+};

package/dist/esm/components/viewers/ps-unsupported-viewer.js

@@ -0,0 +1,4 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { PsIcon, PsIconKey } from '@pallasoft/ps-icons';
+import { PsFileKindIcon } from '../ps-file-kind-icon';
+export const PsUnsupportedViewer = ({ file, labels }) => (_jsxs("div", { className: 'm-auto flex max-w-sm flex-col items-center gap-4 rounded-2xl bg-surface p-8 text-center shadow-2xl', children: [_jsx(PsFileKindIcon, { className: 'h-14 w-14', contentType: file.contentType, name: file.name }), _jsx("p", { className: 'break-all font-semibold text-ink', children: file.name }), _jsx("p", { className: 'text-sm text-ink/60', children: labels.unsupported }), _jsxs("a", { className: 'ps-focus-ring inline-flex items-center gap-2 rounded-full bg-primary px-4 py-2 text-sm font-semibold text-white hover:bg-primary/90', download: file.name, href: file.downloadUrl === undefined ? file.url : file.downloadUrl, children: [_jsx(PsIcon, { "aria-hidden": 'true', className: 'h-4 w-4', iconKey: PsIconKey.Download }), labels.download] })] }));

package/dist/esm/constants/ps-file-kind-icons.js

@@ -0,0 +1,11 @@
+import { PsIconKey } from '@pallasoft/ps-icons';
+import { PsFileKind } from './ps-file-kind';
+export const PsFileKindIcons = {
+    [PsFileKind.audio]: PsIconKey.Audio,
+    [PsFileKind.csv]: PsIconKey.Sheet,
+    [PsFileKind.image]: PsIconKey.Image,
+    [PsFileKind.other]: PsIconKey.File,
+    [PsFileKind.pdf]: PsIconKey.Doc,
+    [PsFileKind.text]: PsIconKey.Text,
+    [PsFileKind.video]: PsIconKey.Video,
+};

package/dist/esm/constants/ps-file-kind.js

@@ -0,0 +1,9 @@
+export const PsFileKind = {
+    audio: 'audio',
+    csv: 'csv',
+    image: 'image',
+    other: 'other',
+    pdf: 'pdf',
+    text: 'text',
+    video: 'video',
+};

package/dist/esm/constants/ps-file-list-labels.js

@@ -0,0 +1,6 @@
+export const PsFileListLabels = {
+    delete: 'Delete',
+    download: 'Download',
+    empty: 'No files yet',
+    open: 'Open',
+};

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

@@ -0,0 +1,7 @@
+export const PsFilePickerLabels = {
+    browse: 'or click to browse your files',
+    dropActive: 'Drop to upload',
+    formats: 'Accepted formats:',
+    invalidType: 'is not a supported file type.',
+    tooLarge: 'is too large.',
+};

package/dist/esm/constants/ps-file-type-config.js

@@ -0,0 +1,27 @@
+import { PsFileKind } from './ps-file-kind';
+export const PsFileTypeConfig = {
+    csvTypes: ['text/csv', 'application/csv', 'application/vnd.ms-excel'],
+    extensionKinds: {
+        csv: PsFileKind.csv,
+        gif: PsFileKind.image,
+        heic: PsFileKind.image,
+        jpeg: PsFileKind.image,
+        jpg: PsFileKind.image,
+        json: PsFileKind.text,
+        log: PsFileKind.text,
+        md: PsFileKind.text,
+        mov: PsFileKind.video,
+        mp3: PsFileKind.audio,
+        mp4: PsFileKind.video,
+        pdf: PsFileKind.pdf,
+        png: PsFileKind.image,
+        svg: PsFileKind.image,
+        txt: PsFileKind.text,
+        wav: PsFileKind.audio,
+        webm: PsFileKind.video,
+        webp: PsFileKind.image,
+        xml: PsFileKind.text,
+    },
+    sizeUnits: ['B', 'KB', 'MB', 'GB'],
+    textTypes: ['application/json', 'application/xml'],
+};

package/dist/esm/constants/ps-file-viewer-config.js

@@ -0,0 +1,9 @@
+export const PsFileViewerConfig = {
+    maxZoom: 4,
+    minZoom: 0.25,
+    pdfBaseScale: 1.4,
+    pdfThumbnailScale: 0.2,
+    rotateStep: 90,
+    searchDebounceMs: 250,
+    zoomStep: 0.25,
+};

package/dist/esm/constants/ps-file-viewer-kinds.js

@@ -0,0 +1,6 @@
+import { PsFileKind } from './ps-file-kind';
+export const PsFileViewerKinds = {
+    rotatable: [PsFileKind.image, PsFileKind.pdf],
+    searchable: [PsFileKind.csv, PsFileKind.pdf, PsFileKind.text],
+    zoomable: [PsFileKind.csv, PsFileKind.image, PsFileKind.pdf, PsFileKind.text],
+};

package/dist/esm/constants/ps-file-viewer-labels.js

@@ -0,0 +1,21 @@
+export const PsFileViewerLabels = {
+    close: 'Close',
+    delete: 'Delete',
+    deleteConfirm: 'Delete file',
+    deleteConfirmBody: 'This file will be removed. This cannot be undone from here.',
+    deleteCancel: 'Keep file',
+    download: 'Download',
+    loadFailed: 'This file could not be opened.',
+    next: 'Next file',
+    nextMatch: 'Next match',
+    noMatches: 'No matches',
+    page: 'Page',
+    previous: 'Previous file',
+    previousMatch: 'Previous match',
+    rotate: 'Rotate',
+    search: 'Search in file',
+    unsupported: 'This file type cannot be previewed here. Download it to open it.',
+    zoomIn: 'Zoom in',
+    zoomOut: 'Zoom out',
+    zoomReset: 'Fit',
+};

package/dist/esm/constants/ps-upload-labels.js

@@ -0,0 +1,14 @@
+export const PsUploadLabels = {
+    cancel: 'Cancel',
+    cancelled: 'Cancelled',
+    close: 'Close',
+    done: 'Uploaded',
+    failed: 'Failed',
+    processing: 'Saving',
+    remove: 'Remove',
+    retry: 'Retry',
+    title: 'Uploading files',
+    titleDone: 'Upload finished',
+    uploading: 'Uploading',
+    waiting: 'Waiting',
+};

package/dist/esm/constants/ps-upload-messages.js

@@ -0,0 +1,4 @@
+export const PsUploadMessages = {
+    cancelled: 'Upload cancelled',
+    failed: 'Upload failed',
+};

package/dist/esm/constants/ps-upload-queue-config.js

@@ -0,0 +1,4 @@
+export const PsUploadQueueConfig = {
+    concurrency: 3,
+    progressDone: 1,
+};

package/dist/esm/constants/ps-upload-status-tones.js

@@ -0,0 +1,9 @@
+import { PsUploadStatus } from './ps-upload-status';
+export const PsUploadStatusTones = {
+    [PsUploadStatus.cancelled]: 'danger',
+    [PsUploadStatus.done]: 'success',
+    [PsUploadStatus.failed]: 'danger',
+    [PsUploadStatus.processing]: 'primary',
+    [PsUploadStatus.uploading]: 'primary',
+    [PsUploadStatus.waiting]: 'primary',
+};

package/dist/esm/constants/ps-upload-status.js

@@ -0,0 +1,8 @@
+export const PsUploadStatus = {
+    cancelled: 'cancelled',
+    done: 'done',
+    failed: 'failed',
+    processing: 'processing',
+    uploading: 'uploading',
+    waiting: 'waiting',
+};

package/dist/esm/hooks/use-ps-active-match-scroll.js

@@ -0,0 +1,8 @@
+import { useEffect } from 'react';
+export const usePsActiveMatchScroll = (container, activeMatch, dependency) => {
+    useEffect(() => {
+        const node = container.current?.querySelector(`[data-ps-match='${activeMatch}']`);
+        if (node instanceof HTMLElement)
+            node.scrollIntoView({ behavior: 'smooth', block: 'center' });
+    }, [activeMatch, dependency]);
+};

package/dist/esm/hooks/use-ps-file-text.js

@@ -0,0 +1,21 @@
+import { useEffect, useState } from 'react';
+export const usePsFileText = (url) => {
+    const [state, setState] = useState({ hasFailed: false, text: null });
+    useEffect(() => {
+        const controller = new AbortController();
+        setState({ hasFailed: false, text: null });
+        fetch(url, { credentials: 'include', signal: controller.signal })
+            .then((response) => {
+            if (!response.ok)
+                throw new Error(response.statusText);
+            return response.text();
+        })
+            .then((text) => setState({ hasFailed: false, text }))
+            .catch(() => {
+            if (!controller.signal.aborted)
+                setState({ hasFailed: true, text: null });
+        });
+        return () => controller.abort();
+    }, [url]);
+    return state;
+};