@pallasoft/ps-file-components 2.3.0 → 2.4.1

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

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

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

@@ -0,0 +1,17 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.PsWordViewer = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const ps_core_components_1 = require("@pallasoft/ps-core-components");
+const use_ps_loaded_file_1 = require("../hooks/use-ps-loaded-file");
+const ps_word_service_1 = require("../services/ps-word-service");
+const ps_html_document_1 = require("./ps-html-document");
+const PsWordViewer = ({ activeMatch, file, labels, onMatchCount, query, zoom, }) => {
+    const { hasFailed, value } = (0, use_ps_loaded_file_1.usePsLoadedFile)(file.url, ps_word_service_1.PsWordService.load);
+    if (hasFailed)
+        return (0, jsx_runtime_1.jsx)("p", { className: 'm-auto text-sm text-white/70', children: labels.loadFailed });
+    if (value === null)
+        return (0, jsx_runtime_1.jsx)(ps_core_components_1.PsSpinner, { className: 'm-auto', color: 'current', size: 'large' });
+    return ((0, jsx_runtime_1.jsx)(ps_html_document_1.PsHtmlDocument, { activeMatch: activeMatch, html: value, onMatchCount: onMatchCount, query: query, zoom: zoom }));
+};
+exports.PsWordViewer = PsWordViewer;

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

@@ -6,9 +6,12 @@ const ps_file_kind_1 = require("./ps-file-kind");
 exports.PsFileKindIcons = {
     [ps_file_kind_1.PsFileKind.audio]: ps_icons_1.PsIconKey.Audio,
     [ps_file_kind_1.PsFileKind.csv]: ps_icons_1.PsIconKey.Sheet,
+    [ps_file_kind_1.PsFileKind.html]: ps_icons_1.PsIconKey.Text,
     [ps_file_kind_1.PsFileKind.image]: ps_icons_1.PsIconKey.Image,
     [ps_file_kind_1.PsFileKind.other]: ps_icons_1.PsIconKey.File,
     [ps_file_kind_1.PsFileKind.pdf]: ps_icons_1.PsIconKey.Doc,
+    [ps_file_kind_1.PsFileKind.sheet]: ps_icons_1.PsIconKey.Sheet,
     [ps_file_kind_1.PsFileKind.text]: ps_icons_1.PsIconKey.Text,
     [ps_file_kind_1.PsFileKind.video]: ps_icons_1.PsIconKey.Video,
+    [ps_file_kind_1.PsFileKind.word]: ps_icons_1.PsIconKey.Doc,
 };

package/dist/constants/ps-file-kind.d.ts

@@ -1,10 +1,13 @@
 export declare const PsFileKind: {
     readonly audio: "audio";
     readonly csv: "csv";
+    readonly html: "html";
     readonly image: "image";
     readonly other: "other";
     readonly pdf: "pdf";
+    readonly sheet: "sheet";
     readonly text: "text";
     readonly video: "video";
+    readonly word: "word";
 };
 export type PsFileKind = (typeof PsFileKind)[keyof typeof PsFileKind];

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

@@ -4,9 +4,12 @@ exports.PsFileKind = void 0;
 exports.PsFileKind = {
     audio: 'audio',
     csv: 'csv',
+    html: 'html',
     image: 'image',
     other: 'other',
     pdf: 'pdf',
+    sheet: 'sheet',
     text: 'text',
     video: 'video',
+    word: 'word',
 };

package/dist/constants/ps-file-type-config.d.ts

@@ -1,6 +1,11 @@
 import { PsFileKind } from './ps-file-kind';
 export declare const PsFileTypeConfig: {
-    readonly csvTypes: readonly ["text/csv", "application/csv", "application/vnd.ms-excel"];
+    readonly csvTypes: readonly ["text/csv", "application/csv"];
+    readonly excelLegacyType: "application/vnd.ms-excel";
     readonly extensionKinds: Record<string, PsFileKind>;
+    readonly htmlTypes: readonly ["text/html", "application/xhtml+xml"];
+    readonly sheetTypes: readonly ["application/vnd.openxmlformats-officedocument.spreadsheetml.sheet"];
     readonly textTypes: readonly ["application/json", "application/xml"];
+    readonly unsupportedImageTypes: readonly ["image/heic", "image/heif", "image/heic-sequence", "image/heif-sequence"];
+    readonly wordTypes: readonly ["application/vnd.openxmlformats-officedocument.wordprocessingml.document"];
 };

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

@@ -3,27 +3,41 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.PsFileTypeConfig = void 0;
 const ps_file_kind_1 = require("./ps-file-kind");
 exports.PsFileTypeConfig = {
-    csvTypes: ['text/csv', 'application/csv', 'application/vnd.ms-excel'],
+    csvTypes: ['text/csv', 'application/csv'],
+    excelLegacyType: 'application/vnd.ms-excel',
     extensionKinds: {
+        aac: ps_file_kind_1.PsFileKind.audio,
+        avif: ps_file_kind_1.PsFileKind.image,
+        bmp: ps_file_kind_1.PsFileKind.image,
         csv: ps_file_kind_1.PsFileKind.csv,
+        docx: ps_file_kind_1.PsFileKind.word,
         gif: ps_file_kind_1.PsFileKind.image,
-        heic: ps_file_kind_1.PsFileKind.image,
+        htm: ps_file_kind_1.PsFileKind.html,
+        html: ps_file_kind_1.PsFileKind.html,
         jpeg: ps_file_kind_1.PsFileKind.image,
         jpg: ps_file_kind_1.PsFileKind.image,
         json: ps_file_kind_1.PsFileKind.text,
         log: ps_file_kind_1.PsFileKind.text,
+        m4a: ps_file_kind_1.PsFileKind.audio,
         md: ps_file_kind_1.PsFileKind.text,
         mov: ps_file_kind_1.PsFileKind.video,
         mp3: ps_file_kind_1.PsFileKind.audio,
         mp4: ps_file_kind_1.PsFileKind.video,
+        ogg: ps_file_kind_1.PsFileKind.audio,
         pdf: ps_file_kind_1.PsFileKind.pdf,
         png: ps_file_kind_1.PsFileKind.image,
         svg: ps_file_kind_1.PsFileKind.image,
+        tsv: ps_file_kind_1.PsFileKind.text,
         txt: ps_file_kind_1.PsFileKind.text,
         wav: ps_file_kind_1.PsFileKind.audio,
         webm: ps_file_kind_1.PsFileKind.video,
         webp: ps_file_kind_1.PsFileKind.image,
+        xlsx: ps_file_kind_1.PsFileKind.sheet,
         xml: ps_file_kind_1.PsFileKind.text,
     },
+    htmlTypes: ['text/html', 'application/xhtml+xml'],
+    sheetTypes: ['application/vnd.openxmlformats-officedocument.spreadsheetml.sheet'],
     textTypes: ['application/json', 'application/xml'],
+    unsupportedImageTypes: ['image/heic', 'image/heif', 'image/heic-sequence', 'image/heif-sequence'],
+    wordTypes: ['application/vnd.openxmlformats-officedocument.wordprocessingml.document'],
 };

package/dist/constants/ps-file-viewer-config.d.ts

@@ -1,5 +1,6 @@
 export declare const PsFileViewerConfig: {
     readonly dragActivationDistance: 4;
+    readonly maxSheetRows: 2000;
     readonly maxZoom: 4;
     readonly minZoom: 0.25;
     readonly pdfBaseScale: 1.4;

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

@@ -3,6 +3,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.PsFileViewerConfig = void 0;
 exports.PsFileViewerConfig = {
     dragActivationDistance: 4,
+    maxSheetRows: 2000,
     maxZoom: 4,
     minZoom: 0.25,
     pdfBaseScale: 1.4,

package/dist/constants/ps-file-viewer-kinds.d.ts

@@ -1,5 +1,5 @@
 export declare const PsFileViewerKinds: {
     readonly rotatable: readonly ["image", "pdf"];
-    readonly searchable: readonly ["csv", "pdf", "text"];
-    readonly zoomable: readonly ["csv", "image", "pdf", "text"];
+    readonly searchable: readonly ["csv", "html", "pdf", "sheet", "text", "word"];
+    readonly zoomable: readonly ["csv", "html", "image", "pdf", "sheet", "text", "word"];
 };

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

@@ -4,6 +4,21 @@ exports.PsFileViewerKinds = void 0;
 const ps_file_kind_1 = require("./ps-file-kind");
 exports.PsFileViewerKinds = {
     rotatable: [ps_file_kind_1.PsFileKind.image, ps_file_kind_1.PsFileKind.pdf],
-    searchable: [ps_file_kind_1.PsFileKind.csv, ps_file_kind_1.PsFileKind.pdf, ps_file_kind_1.PsFileKind.text],
-    zoomable: [ps_file_kind_1.PsFileKind.csv, ps_file_kind_1.PsFileKind.image, ps_file_kind_1.PsFileKind.pdf, ps_file_kind_1.PsFileKind.text],
+    searchable: [
+        ps_file_kind_1.PsFileKind.csv,
+        ps_file_kind_1.PsFileKind.html,
+        ps_file_kind_1.PsFileKind.pdf,
+        ps_file_kind_1.PsFileKind.sheet,
+        ps_file_kind_1.PsFileKind.text,
+        ps_file_kind_1.PsFileKind.word,
+    ],
+    zoomable: [
+        ps_file_kind_1.PsFileKind.csv,
+        ps_file_kind_1.PsFileKind.html,
+        ps_file_kind_1.PsFileKind.image,
+        ps_file_kind_1.PsFileKind.pdf,
+        ps_file_kind_1.PsFileKind.sheet,
+        ps_file_kind_1.PsFileKind.text,
+        ps_file_kind_1.PsFileKind.word,
+    ],
 };

package/dist/constants/ps-file-viewer-labels.d.ts

@@ -1,11 +1,13 @@
 export declare const PsFileViewerLabels: {
     readonly close: "Close";
+    readonly closeSearch: "Close search";
     readonly delete: "Delete";
     readonly deleteConfirm: "Delete file";
     readonly deleteConfirmBody: "will be deleted. You cannot undo this.";
     readonly deleteCancel: "Cancel";
     readonly download: "Download";
     readonly loadFailed: "This file could not be opened.";
+    readonly matchCount: "{current} of {total}";
     readonly next: "Next file";
     readonly nextMatch: "Next match";
     readonly noMatches: "No matches";
@@ -14,6 +16,7 @@ export declare const PsFileViewerLabels: {
     readonly previousMatch: "Previous match";
     readonly rotate: "Rotate";
     readonly search: "Search in file";
+    readonly sheetTruncated: "Showing the first {count} rows";
     readonly unsupported: "This file type cannot be previewed here. Download it to open it.";
     readonly zoomIn: "Zoom in";
     readonly zoomOut: "Zoom out";

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

@@ -3,12 +3,14 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.PsFileViewerLabels = void 0;
 exports.PsFileViewerLabels = {
     close: 'Close',
+    closeSearch: 'Close search',
     delete: 'Delete',
     deleteConfirm: 'Delete file',
     deleteConfirmBody: 'will be deleted. You cannot undo this.',
     deleteCancel: 'Cancel',
     download: 'Download',
     loadFailed: 'This file could not be opened.',
+    matchCount: '{current} of {total}',
     next: 'Next file',
     nextMatch: 'Next match',
     noMatches: 'No matches',
@@ -17,6 +19,7 @@ exports.PsFileViewerLabels = {
     previousMatch: 'Previous match',
     rotate: 'Rotate',
     search: 'Search in file',
+    sheetTruncated: 'Showing the first {count} rows',
     unsupported: 'This file type cannot be previewed here. Download it to open it.',
     zoomIn: 'Zoom in',
     zoomOut: 'Zoom out',

package/dist/constants/ps-html-sanitize-config.d.ts

@@ -0,0 +1,8 @@
+export declare const PsHtmlSanitizeConfig: {
+    readonly anchorRel: "noopener noreferrer";
+    readonly anchorTarget: "_blank";
+    readonly blockSelector: "p,li,td,th,tr,h1,h2,h3,h4,h5,h6,div,pre,blockquote,section,article,caption";
+    readonly forbiddenAttributes: readonly ["style", "srcset"];
+    readonly forbiddenTags: readonly ["style", "form", "input", "button", "textarea", "select", "iframe", "frame", "object", "embed", "link", "meta", "base", "script"];
+    readonly mediaTags: readonly ["img", "picture", "source", "video", "audio", "track"];
+};

package/dist/constants/ps-html-sanitize-config.js

@@ -0,0 +1,26 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.PsHtmlSanitizeConfig = void 0;
+exports.PsHtmlSanitizeConfig = {
+    anchorRel: 'noopener noreferrer',
+    anchorTarget: '_blank',
+    blockSelector: 'p,li,td,th,tr,h1,h2,h3,h4,h5,h6,div,pre,blockquote,section,article,caption',
+    forbiddenAttributes: ['style', 'srcset'],
+    forbiddenTags: [
+        'style',
+        'form',
+        'input',
+        'button',
+        'textarea',
+        'select',
+        'iframe',
+        'frame',
+        'object',
+        'embed',
+        'link',
+        'meta',
+        'base',
+        'script',
+    ],
+    mediaTags: ['img', 'picture', 'source', 'video', 'audio', 'track'],
+};

package/dist/esm/components/ps-file-icon-button.js

@@ -3,7 +3,7 @@ import { PallasoftClassNameService } from '@pallasoft/ps-design-system';
 import { PsIcon } from '@pallasoft/ps-icons';
 import { PsFileIconButtonClasses } from '../constants/ps-file-icon-button-classes';
 export const PsFileIconButton = ({ disabled = false, download, href, iconKey, label, onClick, tone = 'neutral', }) => {
-    const className = PallasoftClassNameService.merge('ps-focus-ring ps-control-square ps-control-compact inline-flex shrink-0 items-center justify-center rounded-ps-control text-ink/55 transition disabled:pointer-events-none disabled:opacity-40', PsFileIconButtonClasses[tone]);
+    const className = PallasoftClassNameService.merge('ps-focus-ring ps-control-square ps-control-compact inline-flex shrink-0 items-center justify-center rounded-ps-control text-muted transition disabled:pointer-events-none disabled:opacity-40', PsFileIconButtonClasses[tone]);
     const icon = (_jsx(PsIcon, { "aria-hidden": 'true', className: 'size-ps-control-icon-standalone', iconKey: iconKey }));
     return href === undefined ? (_jsx("button", { "aria-label": label, className: className, disabled: disabled, onClick: onClick, title: label, type: 'button', children: icon })) : (_jsx("a", { "aria-label": label, className: className, download: download, href: href, title: label, children: icon }));
 };

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

@@ -18,6 +18,6 @@ export const PsFileList = ({ busyIds = [], files, formatDate, labels, onDelete,
                     ? null
                     : formatDate(file.createdAt),
             ].filter((value) => value !== null);
-            return (_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: [_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 ? (_jsx("img", { alt: '', className: 'h-12 w-12 shrink-0 rounded-ps-control border border-line object-cover', loading: 'lazy', src: file.url })) : (_jsx(PsFileKindIcon, { className: 'h-12 w-12', contentType: file.contentType, name: file.name })), _jsxs("span", { className: 'flex min-w-0 flex-col', children: [_jsx("span", { className: 'truncate text-sm font-medium text-ink group-hover:text-primary', children: file.name }), meta.length > 0 ? (_jsx("span", { className: 'truncate text-xs text-ink/55', children: meta.join(' · ') })) : null] })] }), _jsxs("div", { className: 'flex shrink-0 items-center gap-0.5', children: [_jsx(PsFileIconButton, { download: file.name, href: file.downloadUrl === undefined ? file.url : file.downloadUrl, iconKey: PsIconKey.Download, label: `${text.download} ${file.name}` }), onRename ? (_jsx(PsFileIconButton, { disabled: busyIds.includes(file.id), iconKey: PsIconKey.Pencil, label: `${text.rename} ${file.name}`, onClick: () => onRename(file) })) : null, onDelete ? (_jsx(PsFileIconButton, { disabled: busyIds.includes(file.id), iconKey: PsIconKey.Trash, label: `${text.delete} ${file.name}`, onClick: () => onDelete(file), tone: 'danger' })) : null] })] }, file.id));
+            return (_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: [_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 ? (_jsx("img", { alt: '', className: 'h-12 w-12 shrink-0 rounded-ps-control border border-line object-cover', loading: 'lazy', src: file.url })) : (_jsx(PsFileKindIcon, { className: 'h-12 w-12', contentType: file.contentType, name: file.name })), _jsxs("span", { className: 'flex min-w-0 flex-col', children: [_jsx("span", { className: 'truncate text-sm font-medium text-ink group-hover:text-primary', children: file.name }), meta.length > 0 ? (_jsx("span", { className: 'truncate text-xs text-muted', children: meta.join(' · ') })) : null] })] }), _jsxs("div", { className: 'flex shrink-0 items-center gap-0.5', children: [_jsx(PsFileIconButton, { download: file.name, href: file.downloadUrl === undefined ? file.url : file.downloadUrl, iconKey: PsIconKey.Download, label: `${text.download} ${file.name}` }), onRename ? (_jsx(PsFileIconButton, { disabled: busyIds.includes(file.id), iconKey: PsIconKey.Pencil, label: `${text.rename} ${file.name}`, onClick: () => onRename(file) })) : null, onDelete ? (_jsx(PsFileIconButton, { disabled: busyIds.includes(file.id), iconKey: PsIconKey.Trash, label: `${text.delete} ${file.name}`, onClick: () => onDelete(file), tone: 'danger' })) : null] })] }, file.id));
         }) }));
 };

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

@@ -64,5 +64,5 @@ export const PsFilePicker = ({ accept, acceptLabel, className, disabled = false,
                     select(event.dataTransfer.files);
                 }, children: [_jsx("span", { "aria-hidden": 'true', className: PallasoftClassNameService.merge('flex size-12 items-center justify-center rounded-full transition-colors duration-200', isDragging
                             ? 'bg-primary text-[color:var(--ps-color-primary-contrast)]'
-                            : 'bg-primary-soft text-primary'), children: _jsx(PsIcon, { className: 'size-6', iconKey: PsIconKey.Upload }) }), _jsxs("div", { className: 'flex flex-col gap-1', children: [_jsx("p", { className: 'text-base font-semibold text-ink', children: isDragging ? (text.dropActive) : (_jsxs(_Fragment, { children: [_jsx("span", { className: touchLabel === undefined ? '' : '[@media(pointer:coarse)]:hidden', children: dropLabel }), touchLabel === undefined ? null : (_jsx("span", { className: 'hidden [@media(pointer:coarse)]:inline', children: touchLabel }))] })) }), _jsx("p", { className: 'text-sm text-ink/60 [@media(pointer:coarse)]:hidden', children: multiple ? text.dragHint : text.dragHintOne })] }), _jsx(PsFilePickerActions, { chooseLabel: chooseLabel, className: 'flex [@media(pointer:coarse)]:hidden', disabled: disabled, isTouch: false, onChoose: browse, onScan: openScan, scanLabel: scanLabel }), _jsx(PsFilePickerActions, { chooseLabel: chooseLabel, className: 'hidden [@media(pointer:coarse)]:flex', disabled: disabled, isTouch: true, onChoose: browse, onScan: openScan, scanLabel: scanLabel }), details.length > 0 ? _jsx("p", { className: 'text-xs text-ink/50', children: details.join(' · ') }) : null, _jsx("input", { accept: acceptAttr, "aria-hidden": 'true', className: 'sr-only', disabled: disabled, multiple: multiple, onChange: onChange, onClick: (event) => event.stopPropagation(), ref: input, tabIndex: -1, type: 'file' })] }), queue === undefined || queue.items.length === 0 ? null : (_jsx("ul", { "aria-label": rowLabels.title, className: 'flex flex-col gap-2', children: queue.items.map((item) => (_jsx(PsUploadRow, { item: item, labels: rowLabels, onCancel: () => queue.cancel(item.id), onRemove: () => queue.remove(item.id), onRetry: () => queue.retry(item.id) }, item.id))) })), scan === undefined ? null : (_jsx(PsDocumentScanner, { ...scan, fileName: scanName === null ? PsScanConfig.defaultFileName : scanName, isOpen: scanName !== null, onClose: () => setScanName(null), onComplete: select }))] }));
+                            : 'bg-primary-soft text-primary'), children: _jsx(PsIcon, { className: 'size-6', iconKey: PsIconKey.Upload }) }), _jsxs("div", { className: 'flex flex-col gap-1', children: [_jsx("p", { className: 'text-base font-semibold text-ink', children: isDragging ? (text.dropActive) : (_jsxs(_Fragment, { children: [_jsx("span", { className: touchLabel === undefined ? '' : '[@media(pointer:coarse)]:hidden', children: dropLabel }), touchLabel === undefined ? null : (_jsx("span", { className: 'hidden [@media(pointer:coarse)]:inline', children: touchLabel }))] })) }), _jsx("p", { className: 'text-sm text-ink/60 [@media(pointer:coarse)]:hidden', children: multiple ? text.dragHint : text.dragHintOne })] }), _jsx(PsFilePickerActions, { chooseLabel: chooseLabel, className: 'flex [@media(pointer:coarse)]:hidden', disabled: disabled, isTouch: false, onChoose: browse, onScan: openScan, scanLabel: scanLabel }), _jsx(PsFilePickerActions, { chooseLabel: chooseLabel, className: 'hidden [@media(pointer:coarse)]:flex', disabled: disabled, isTouch: true, onChoose: browse, onScan: openScan, scanLabel: scanLabel }), details.length > 0 ? _jsx("p", { className: 'text-xs text-muted', children: details.join(' · ') }) : null, _jsx("input", { accept: acceptAttr, "aria-hidden": 'true', className: 'sr-only', disabled: disabled, multiple: multiple, onChange: onChange, onClick: (event) => event.stopPropagation(), ref: input, tabIndex: -1, type: 'file' })] }), queue === undefined || queue.items.length === 0 ? null : (_jsx("ul", { "aria-label": rowLabels.title, className: 'flex flex-col gap-2', children: queue.items.map((item) => (_jsx(PsUploadRow, { item: item, labels: rowLabels, onCancel: () => queue.cancel(item.id), onRemove: () => queue.remove(item.id), onRetry: () => queue.retry(item.id) }, item.id))) })), scan === undefined ? null : (_jsx(PsDocumentScanner, { ...scan, fileName: scanName === null ? PsScanConfig.defaultFileName : scanName, isOpen: scanName !== null, onClose: () => setScanName(null), onComplete: select }))] }));
 };

package/dist/esm/components/ps-file-search-bar.js

@@ -0,0 +1,21 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { PallasoftClassNameService } from '@pallasoft/ps-design-system';
+import { PsIcon, PsIconKey } from '@pallasoft/ps-icons';
+import { PsLabelService } from '../services/ps-label-service';
+import { PsFileViewerButton } from './ps-file-viewer-button';
+export const PsFileSearchBar = ({ className, labels, onClose, state }) => (_jsxs("div", { className: PallasoftClassNameService.merge('flex items-center gap-1 rounded-ps-control bg-white/10 px-3', className), role: 'search', children: [_jsx(PsIcon, { "aria-hidden": 'true', className: 'h-4 w-4 shrink-0 text-white/60', iconKey: PsIconKey.Search }), _jsx("input", { "aria-label": labels.search, className: 'h-ps-control-compact min-w-0 flex-1 bg-transparent text-sm text-white placeholder:text-white/45 focus:outline-none', onChange: (event) => state.setSearch(event.target.value), onKeyDown: (event) => {
+                if (event.key === 'Enter') {
+                    event.preventDefault();
+                    state.step(event.shiftKey ? -1 : 1);
+                }
+                else if (event.key === 'Escape' && onClose !== undefined) {
+                    event.preventDefault();
+                    event.stopPropagation();
+                    onClose();
+                }
+            }, placeholder: labels.search, ref: state.inputRef, type: 'search', value: state.search }), state.query.trim().length > 0 ? (_jsx("span", { "aria-live": 'polite', className: 'shrink-0 whitespace-nowrap text-xs text-white/60', children: state.matchCount === 0
+                ? labels.noMatches
+                : PsLabelService.fill(labels.matchCount, {
+                    current: state.activeMatch + 1,
+                    total: state.matchCount,
+                }) })) : null, _jsx(PsFileViewerButton, { disabled: state.matchCount === 0, label: labels.previousMatch, onClick: () => state.step(-1), children: _jsx(PsIcon, { "aria-hidden": 'true', className: 'size-ps-control-icon-standalone -rotate-90', iconKey: PsIconKey.ChevronRight }) }), _jsx(PsFileViewerButton, { disabled: state.matchCount === 0, label: labels.nextMatch, onClick: () => state.step(1), children: _jsx(PsIcon, { "aria-hidden": 'true', className: 'size-ps-control-icon-standalone rotate-90', iconKey: PsIconKey.ChevronRight }) }), onClose === undefined ? null : (_jsx(PsFileViewerButton, { label: labels.closeSearch, onClick: onClose, children: _jsx(PsIcon, { "aria-hidden": 'true', className: 'size-ps-control-icon-standalone', iconKey: PsIconKey.Close }) }))] }));

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

@@ -1,11 +1,14 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { PsFileKind } from '../constants/ps-file-kind';
 import { PsFileTypeService } from '../services/ps-file-type-service';
+import { PsHtmlViewer } from './ps-html-viewer';
 import { PsImageViewer } from './ps-image-viewer';
 import { PsMediaViewer } from './ps-media-viewer';
 import { PsPdfViewer } from './ps-pdf-viewer';
+import { PsSheetViewer } from './ps-sheet-viewer';
 import { PsTextViewer } from './ps-text-viewer';
 import { PsUnsupportedViewer } from './ps-unsupported-viewer';
+import { PsWordViewer } from './ps-word-viewer';
 export const PsFileViewerContent = (props) => {
     switch (PsFileTypeService.kindOf(props.file.contentType, props.file.name)) {
         case PsFileKind.image:
@@ -15,6 +18,12 @@ export const PsFileViewerContent = (props) => {
         case PsFileKind.csv:
         case PsFileKind.text:
             return _jsx(PsTextViewer, { ...props });
+        case PsFileKind.word:
+            return _jsx(PsWordViewer, { ...props });
+        case PsFileKind.sheet:
+            return _jsx(PsSheetViewer, { ...props });
+        case PsFileKind.html:
+            return _jsx(PsHtmlViewer, { ...props });
         case PsFileKind.audio:
         case PsFileKind.video:
             return _jsx(PsMediaViewer, { ...props });

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

@@ -1,22 +1,46 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import { useState } from 'react';
+import { useCallback, useRef, useState } from 'react';
 import { PsIcon, PsIconKey } from '@pallasoft/ps-icons';
 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 { usePsFileSearch } from '../hooks/use-ps-file-search';
+import { usePsFindShortcut } from '../hooks/use-ps-find-shortcut';
+import { PsFileSearchService } from '../services/ps-file-search-service';
 import { PsFileTypeService } from '../services/ps-file-type-service';
+import { PsFileSearchBar } from './ps-file-search-bar';
 import { PsFileViewerButton } from './ps-file-viewer-button';
 import { PsFileViewerContent } from './ps-file-viewer-content';
-export const PsFileViewerPane = ({ contentType, headerActions, id, labels = PsFileViewerLabels, name, pdfWorkerSrc, url, }) => {
+export const PsFileViewerPane = ({ contentType, headerActions, id, labels, name, pdfWorkerSrc, textLayer, url, }) => {
+    const text = { ...PsFileViewerLabels, ...labels };
     const [zoom, setZoom] = useState(1);
     const [rotation, setRotation] = useState(0);
+    const [isFindOpen, setIsFindOpen] = useState(false);
+    const root = useRef(null);
     const kind = PsFileTypeService.kindOf(contentType, name);
     const canZoom = PsFileViewerKinds.zoomable.includes(kind);
     const canRotate = PsFileViewerKinds.rotatable.includes(kind);
+    const canSearch = PsFileSearchService.canSearch(kind, textLayer !== undefined);
     const changeZoom = (step) => setZoom((current) => Math.min(PsFileViewerConfig.maxZoom, Math.max(PsFileViewerConfig.minZoom, current + step)));
     const fileKey = id === undefined ? url : id;
+    const searchState = usePsFileSearch(fileKey);
+    const { focus, reset } = searchState;
+    const openFind = useCallback(() => {
+        setIsFindOpen(true);
+        requestAnimationFrame(focus);
+    }, [focus]);
+    const closeFind = useCallback(() => {
+        setIsFindOpen(false);
+        reset();
+    }, [reset]);
+    usePsFindShortcut(root, canSearch, openFind);
     const rotate = () => setRotation((current) => (current + PsFileViewerConfig.rotateStep) % 360);
     const onKeyDown = (event) => {
+        if (event.key === 'Escape' && isFindOpen) {
+            closeFind();
+            event.preventDefault();
+            return;
+        }
         if (event.metaKey || event.ctrlKey || event.altKey)
             return;
         if (canZoom && (event.key === '+' || event.key === '='))
@@ -31,5 +55,5 @@ export const PsFileViewerPane = ({ contentType, headerActions, id, labels = PsFi
             return;
         event.preventDefault();
     };
-    return (_jsxs("div", { className: 'flex h-full min-h-0 min-w-0 flex-col overflow-hidden rounded-ps-panel bg-black/85', children: [_jsxs("div", { className: 'flex shrink-0 flex-wrap items-center justify-between gap-x-2 border-b border-white/10 px-2 py-1 text-white', children: [_jsx("p", { className: 'min-w-0 flex-1 basis-32 truncate px-1 text-xs text-white/70', title: name, children: name }), _jsxs("div", { className: 'flex items-center gap-0.5', role: 'toolbar', children: [canZoom ? (_jsxs(_Fragment, { children: [_jsx(PsFileViewerButton, { disabled: zoom <= PsFileViewerConfig.minZoom, label: labels.zoomOut, onClick: () => changeZoom(-PsFileViewerConfig.zoomStep), children: _jsx(PsIcon, { "aria-hidden": 'true', className: 'size-4', iconKey: PsIconKey.ZoomOut }) }), _jsxs(PsFileViewerButton, { className: 'w-14 text-xs', label: labels.zoomReset, onClick: () => setZoom(1), children: [Math.round(zoom * 100), "%"] }), _jsx(PsFileViewerButton, { disabled: zoom >= PsFileViewerConfig.maxZoom, label: labels.zoomIn, onClick: () => changeZoom(PsFileViewerConfig.zoomStep), children: _jsx(PsIcon, { "aria-hidden": 'true', className: 'size-4', iconKey: PsIconKey.ZoomIn }) })] })) : null, canRotate ? (_jsx(PsFileViewerButton, { label: labels.rotate, onClick: rotate, children: _jsx(PsIcon, { "aria-hidden": 'true', className: 'size-4', iconKey: PsIconKey.Rotate }) })) : null, headerActions] })] }), _jsx("div", { className: 'ps-focus-ring flex min-h-0 flex-1 p-2', onKeyDown: onKeyDown, tabIndex: 0, children: _jsx(PsFileViewerContent, { activeMatch: 0, file: { contentType, id: fileKey, name, url }, labels: labels, onMatchCount: () => undefined, pdfWorkerSrc: pdfWorkerSrc, query: '', rotation: rotation, zoom: zoom }, fileKey) })] }));
+    return (_jsxs("div", { className: 'flex h-full min-h-0 min-w-0 flex-col overflow-hidden rounded-ps-panel bg-black/85', ref: root, children: [_jsxs("div", { className: 'flex shrink-0 flex-wrap items-center justify-between gap-x-2 border-b border-white/10 px-2 py-1 text-white', children: [_jsx("p", { className: 'min-w-0 flex-1 basis-32 truncate px-1 text-xs text-white/70', title: name, children: name }), _jsxs("div", { className: 'flex items-center gap-0.5', role: 'toolbar', children: [canSearch ? (_jsx(PsFileViewerButton, { label: text.search, onClick: isFindOpen ? closeFind : openFind, children: _jsx(PsIcon, { "aria-hidden": 'true', className: 'size-4', iconKey: PsIconKey.Search }) })) : null, canZoom ? (_jsxs(_Fragment, { children: [_jsx(PsFileViewerButton, { disabled: zoom <= PsFileViewerConfig.minZoom, label: text.zoomOut, onClick: () => changeZoom(-PsFileViewerConfig.zoomStep), children: _jsx(PsIcon, { "aria-hidden": 'true', className: 'size-4', iconKey: PsIconKey.ZoomOut }) }), _jsxs(PsFileViewerButton, { className: 'w-14 text-xs', label: text.zoomReset, onClick: () => setZoom(1), children: [Math.round(zoom * 100), "%"] }), _jsx(PsFileViewerButton, { disabled: zoom >= PsFileViewerConfig.maxZoom, label: text.zoomIn, onClick: () => changeZoom(PsFileViewerConfig.zoomStep), children: _jsx(PsIcon, { "aria-hidden": 'true', className: 'size-4', iconKey: PsIconKey.ZoomIn }) })] })) : null, canRotate ? (_jsx(PsFileViewerButton, { label: text.rotate, onClick: rotate, children: _jsx(PsIcon, { "aria-hidden": 'true', className: 'size-4', iconKey: PsIconKey.Rotate }) })) : null, headerActions] })] }), canSearch && isFindOpen ? (_jsx("div", { className: 'shrink-0 border-b border-white/10 px-2 py-1', children: _jsx(PsFileSearchBar, { labels: text, onClose: closeFind, state: searchState }) })) : null, _jsx("div", { className: 'ps-focus-ring flex min-h-0 flex-1 p-2', onKeyDown: onKeyDown, tabIndex: 0, children: _jsx(PsFileViewerContent, { activeMatch: searchState.activeMatch, file: { contentType, id: fileKey, name, textLayer, url }, labels: text, onMatchCount: searchState.setMatchCount, pdfWorkerSrc: pdfWorkerSrc, query: canSearch && isFindOpen ? searchState.query : '', rotation: rotation, zoom: zoom }, fileKey) })] }));
 };

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

@@ -1,15 +1,19 @@
 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 { useEffect, useState } from 'react';
+import { PsLayer, 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 { usePsFileSearch } from '../hooks/use-ps-file-search';
+import { usePsFindShortcut } from '../hooks/use-ps-find-shortcut';
+import { PsFileSearchService } from '../services/ps-file-search-service';
 import { PsFileSizeService } from '../services/ps-file-size-service';
 import { PsFileTypeService } from '../services/ps-file-type-service';
 import { PsFileDeleteConfirm } from './ps-file-delete-confirm';
+import { PsFileSearchBar } from './ps-file-search-bar';
 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, }) => {
@@ -18,34 +22,24 @@ export const PsFileViewer = ({ files, index, isOpen, labels, onClose, onDelete,
     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 searchState = usePsFileSearch(file === null ? null : file.id);
+    const canSearch = kind !== null &&
+        file !== null &&
+        PsFileSearchService.canSearch(kind, file.textLayer !== undefined);
     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)
@@ -54,10 +48,6 @@ export const PsFileViewer = ({ files, index, isOpen, labels, onClose, onDelete,
             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')
@@ -71,7 +61,8 @@ export const PsFileViewer = ({ files, index, isOpen, labels, onClose, onDelete,
         };
         window.addEventListener('keydown', onKey);
         return () => window.removeEventListener('keydown', onKey);
-    }, [isOpen, isConfirming, canSearch, index, files.length]);
+    }, [isOpen, isConfirming, index, files.length]);
+    usePsFindShortcut(null, isOpen && canSearch, searchState.focus);
     if (!shouldRender || file === null || typeof document === 'undefined')
         return null;
     const confirmDelete = async () => {
@@ -91,8 +82,5 @@ export const PsFileViewer = ({ files, index, isOpen, labels, onClose, onDelete,
                                             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-ps-control 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-ps-control-compact 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: 'size-ps-control-icon-standalone -rotate-90', iconKey: PsIconKey.ChevronRight }) }), _jsx(PsFileViewerButton, { disabled: matchCount === 0, label: text.nextMatch, onClick: () => stepMatch(1), children: _jsx(PsIcon, { "aria-hidden": 'true', className: 'size-ps-control-icon-standalone 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: 'size-ps-control-icon-standalone', 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: 'size-ps-control-icon-standalone', iconKey: PsIconKey.ZoomIn }) })] })) : null, canRotate ? (_jsx(PsFileViewerButton, { label: text.rotate, onClick: () => setRotation((current) => (current + PsFileViewerConfig.rotateStep) % 360), children: _jsx(PsIcon, { "aria-hidden": 'true', className: 'size-ps-control-icon-standalone', iconKey: PsIconKey.Rotate }) })) : null, _jsx("a", { "aria-label": text.download, className: 'ps-focus-ring ps-control-square ps-control-compact inline-flex items-center justify-center rounded-ps-control 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: 'size-ps-control-icon-standalone', iconKey: PsIconKey.Download }) }), onDelete ? (_jsx(PsFileViewerButton, { label: text.delete, onClick: () => setIsConfirming(true), tone: 'danger', children: _jsx(PsIcon, { "aria-hidden": 'true', className: 'size-ps-control-icon-standalone', iconKey: PsIconKey.Trash }) })) : null, _jsx(PsFileViewerButton, { label: text.close, onClick: onClose, children: _jsx(PsIcon, { "aria-hidden": 'true', className: 'size-ps-control-icon-standalone', 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-docked size-ps-control -translate-y-1/2 bg-black/40', label: text.previous, onClick: () => go(-1), children: _jsx(PsIcon, { "aria-hidden": 'true', className: 'size-ps-control-icon-standalone 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-docked size-ps-control -translate-y-1/2 bg-black/40', label: text.next, onClick: () => go(1), children: _jsx(PsIcon, { "aria-hidden": 'true', className: 'size-ps-control-icon-standalone', iconKey: PsIconKey.ChevronRight }) })) : null] }), _jsx(PsFileDeleteConfirm, { fileName: file.name, isDeleting: isDeleting, isOpen: isConfirming, labels: text, onCancel: () => setIsConfirming(false), onConfirm: () => void confirmDelete() })] }) }), document.body);
+                                            .join(' · ') })] }) }), canSearch ? (_jsx(PsFileSearchBar, { className: 'order-last w-full sm:order-none sm:w-72', labels: text, state: searchState })) : 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: 'size-ps-control-icon-standalone', 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: 'size-ps-control-icon-standalone', iconKey: PsIconKey.ZoomIn }) })] })) : null, canRotate ? (_jsx(PsFileViewerButton, { label: text.rotate, onClick: () => setRotation((current) => (current + PsFileViewerConfig.rotateStep) % 360), children: _jsx(PsIcon, { "aria-hidden": 'true', className: 'size-ps-control-icon-standalone', iconKey: PsIconKey.Rotate }) })) : null, _jsx("a", { "aria-label": text.download, className: 'ps-focus-ring ps-control-square ps-control-compact inline-flex items-center justify-center rounded-ps-control 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: 'size-ps-control-icon-standalone', iconKey: PsIconKey.Download }) }), onDelete ? (_jsx(PsFileViewerButton, { label: text.delete, onClick: () => setIsConfirming(true), tone: 'danger', children: _jsx(PsIcon, { "aria-hidden": 'true', className: 'size-ps-control-icon-standalone', iconKey: PsIconKey.Trash }) })) : null, _jsx(PsFileViewerButton, { label: text.close, onClick: onClose, children: _jsx(PsIcon, { "aria-hidden": 'true', className: 'size-ps-control-icon-standalone', 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-docked size-ps-control -translate-y-1/2 bg-black/40', label: text.previous, onClick: () => go(-1), children: _jsx(PsIcon, { "aria-hidden": 'true', className: 'size-ps-control-icon-standalone 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: searchState.activeMatch, file: file, labels: text, onMatchCount: searchState.setMatchCount, pdfWorkerSrc: pdfWorkerSrc, query: canSearch ? searchState.query : '', rotation: rotation, zoom: zoom }, file.id) }), files.length > 1 ? (_jsx(PsFileViewerButton, { className: 'absolute right-2 top-1/2 z-docked size-ps-control -translate-y-1/2 bg-black/40', label: text.next, onClick: () => go(1), children: _jsx(PsIcon, { "aria-hidden": 'true', className: 'size-ps-control-icon-standalone', 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-html-document.js

@@ -0,0 +1,19 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useEffect, useMemo, useRef } from 'react';
+import { usePsActiveMatchScroll } from '../hooks/use-ps-active-match-scroll';
+import { PsHtmlService } from '../services/ps-html-service';
+export const PsHtmlDocument = ({ activeMatch, html, onMatchCount, query, zoom, }) => {
+    const container = useRef(null);
+    const highlighted = useMemo(() => PsHtmlService.highlight(html, query), [html, query]);
+    useEffect(() => onMatchCount(highlighted.count), [highlighted.count]);
+    useEffect(() => {
+        container.current?.querySelectorAll('mark[data-ps-match]').forEach((mark) => {
+            if (mark.getAttribute('data-ps-match') === String(activeMatch))
+                mark.setAttribute('data-ps-active', '');
+            else
+                mark.removeAttribute('data-ps-active');
+        });
+    }, [highlighted.html, activeMatch]);
+    usePsActiveMatchScroll(container, activeMatch, highlighted.html);
+    return (_jsx("div", { className: 'h-full w-full overflow-auto', children: _jsx("div", { className: 'ps-html-document mx-auto w-full max-w-4xl break-words rounded-lg bg-surface p-8 leading-relaxed text-ink shadow-2xl [&_a]:text-primary [&_a]:underline [&_blockquote]:border-l-4 [&_blockquote]:border-line [&_blockquote]:pl-4 [&_h1]:mb-3 [&_h1]:text-2xl [&_h1]:font-bold [&_h2]:mb-2 [&_h2]:text-xl [&_h2]:font-bold [&_h3]:mb-2 [&_h3]:text-lg [&_h3]:font-semibold [&_img]:h-auto [&_img]:max-w-full [&_li]:my-1 [&_mark]:rounded-sm [&_mark]:bg-warning/40 [&_mark]:text-inherit [&_mark[data-ps-active]]:bg-warning [&_mark[data-ps-active]]:text-ink [&_mark[data-ps-active]]:ring-2 [&_mark[data-ps-active]]:ring-warning [&_ol]:list-decimal [&_ol]:pl-6 [&_p]:mb-3 [&_table]:my-3 [&_table]:border-collapse [&_td]:border [&_td]:border-line [&_td]:px-2 [&_td]:py-1 [&_th]:border [&_th]:border-line [&_th]:px-2 [&_th]:py-1 [&_ul]:list-disc [&_ul]:pl-6', dangerouslySetInnerHTML: { __html: highlighted.html }, ref: container, style: { fontSize: `${zoom}rem` } }) }));
+};

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

@@ -0,0 +1,13 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { PsSpinner } from '@pallasoft/ps-core-components';
+import { usePsLoadedFile } from '../hooks/use-ps-loaded-file';
+import { PsHtmlFileService } from '../services/ps-html-file-service';
+import { PsHtmlDocument } from './ps-html-document';
+export const PsHtmlViewer = ({ activeMatch, file, labels, onMatchCount, query, zoom, }) => {
+    const { hasFailed, value } = usePsLoadedFile(file.url, PsHtmlFileService.load);
+    if (hasFailed)
+        return _jsx("p", { className: 'm-auto text-sm text-white/70', children: labels.loadFailed });
+    if (value === null)
+        return _jsx(PsSpinner, { className: 'm-auto', color: 'current', size: 'large' });
+    return (_jsx(PsHtmlDocument, { activeMatch: activeMatch, html: value, onMatchCount: onMatchCount, query: query, zoom: zoom }));
+};

package/dist/esm/components/ps-image-text-highlights.js

@@ -0,0 +1,27 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useEffect, useState } from 'react';
+export const PsImageTextHighlights = ({ activeIndex, image, matches, transform, }) => {
+    const [size, setSize] = useState({ height: 0, width: 0 });
+    useEffect(() => {
+        const node = image.current;
+        if (node === null)
+            return;
+        const measure = () => setSize({ height: node.clientHeight, width: node.clientWidth });
+        measure();
+        if (typeof ResizeObserver === 'undefined') {
+            window.addEventListener('resize', measure);
+            return () => window.removeEventListener('resize', measure);
+        }
+        const observer = new ResizeObserver(measure);
+        observer.observe(node);
+        return () => observer.disconnect();
+    }, [image]);
+    return (_jsx("div", { className: 'pointer-events-none absolute inset-0 flex items-center justify-center', children: _jsx("div", { className: 'relative shrink-0 transition-transform duration-150', style: { height: size.height, transform, width: size.width }, children: matches.map((match, index) => (_jsx("span", { className: match.matchIndex === activeIndex
+                    ? 'absolute rounded-sm bg-warning/60 ring-2 ring-warning'
+                    : 'absolute rounded-sm bg-warning/35', style: {
+                    height: `${match.height * 100}%`,
+                    left: `${match.left * 100}%`,
+                    top: `${match.top * 100}%`,
+                    width: `${match.width * 100}%`,
+                } }, index))) }) }));
+};