@pallasoft/ps-file-components 2.3.0 → 2.4.1

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

@@ -1,14 +1,23 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import { useEffect, useRef, useState } from 'react';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useMemo, useRef, useState } from 'react';
 import { usePsDragPan } from '../hooks/use-ps-drag-pan';
+import { PsImageTextService } from '../services/ps-image-text-service';
 import { PsPanService } from '../services/ps-pan-service';
-export const PsImageViewer = ({ file, labels, rotation, zoom }) => {
+import { PsImageTextHighlights } from './ps-image-text-highlights';
+export const PsImageViewer = ({ activeMatch, file, labels, onMatchCount, query, rotation, zoom, }) => {
     const [offset, setOffset] = useState({ x: 0, y: 0 });
     const [hasFailed, setHasFailed] = useState(false);
     const pan = useRef(null);
     const base = useRef({ x: 0, y: 0 });
     const frame = useRef(0);
     const pending = useRef({ x: 0, y: 0 });
+    const image = useRef(null);
+    const layer = file.textLayer;
+    const matches = useMemo(() => (layer === undefined ? [] : PsImageTextService.matches(layer, query)), [layer, query]);
+    const count = matches.length === 0 ? 0 : matches[matches.length - 1].matchIndex + 1;
+    const activeIndex = count === 0 ? -1 : activeMatch % count;
+    const imageTransform = `scale(${zoom}) rotate(${rotation}deg)`;
+    useEffect(() => onMatchCount(count), [count]);
     useEffect(() => {
         setOffset({ x: 0, y: 0 });
         setHasFailed(false);
@@ -44,5 +53,5 @@ export const PsImageViewer = ({ file, labels, rotation, zoom }) => {
     });
     if (hasFailed)
         return _jsx("p", { className: 'm-auto text-sm text-white/70', children: labels.loadFailed });
-    return (_jsx("div", { className: `h-full w-full touch-none overflow-hidden ${zoom > 1 ? 'cursor-grab active:cursor-grabbing' : ''}`, ...handlers, children: _jsx("div", { className: 'flex h-full w-full items-center justify-center', ref: pan, style: { transform: PsPanService.translate(offset) }, 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: `scale(${zoom}) rotate(${rotation}deg)` } }) }) }));
+    return (_jsx("div", { className: `h-full w-full touch-none overflow-hidden ${zoom > 1 ? 'cursor-grab active:cursor-grabbing' : ''}`, ...handlers, children: _jsxs("div", { className: 'relative flex h-full w-full items-center justify-center', ref: pan, style: { transform: PsPanService.translate(offset) }, 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), ref: image, src: file.url, style: { transform: imageTransform } }), matches.length > 0 ? (_jsx(PsImageTextHighlights, { activeIndex: activeIndex, image: image, matches: matches, transform: imageTransform })) : null] }) }));
 };

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

@@ -22,7 +22,7 @@ export const PsPdfPage = ({ activeMatch, document, label, matches, pageNumber, r
             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
+    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: activeMatch !== null && match.matchIndex === activeMatch.matchIndex
                     ? '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}%`,

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

@@ -76,13 +76,17 @@ export const PsPdfViewer = ({ activeMatch, file, labels, onMatchCount, pdfWorker
             if (!isCurrent)
                 return;
             setMatches(found);
-            onMatchCount(found.length);
+            onMatchCount(found.length === 0 ? 0 : found[found.length - 1].matchIndex + 1);
         });
         return () => {
             isCurrent = false;
         };
     }, [document, query, rotation]);
-    const active = matches.length > 0 ? matches[activeMatch % matches.length] : null;
+    const matchTotal = matches.length === 0 ? 0 : matches[matches.length - 1].matchIndex + 1;
+    const activeRect = matchTotal === 0
+        ? undefined
+        : matches.find((match) => match.matchIndex === activeMatch % matchTotal);
+    const active = activeRect === undefined ? null : activeRect;
     const scrollToPage = (pageNumber) => {
         const node = scroller.current?.querySelector(`[data-ps-pdf-page='${pageNumber}']`);
         if (node instanceof HTMLElement)

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

@@ -0,0 +1,22 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useMemo, useState } from 'react';
+import { PsSpinner } from '@pallasoft/ps-core-components';
+import { PsFileViewerConfig } from '../constants/ps-file-viewer-config';
+import { usePsLoadedFile } from '../hooks/use-ps-loaded-file';
+import { PsLabelService } from '../services/ps-label-service';
+import { PsSheetService } from '../services/ps-sheet-service';
+import { PsTableView } from './ps-table-view';
+export const PsSheetViewer = ({ activeMatch, file, labels, onMatchCount, query, zoom, }) => {
+    const { hasFailed, value } = usePsLoadedFile(file.url, PsSheetService.load);
+    const [sheetIndex, setSheetIndex] = useState(0);
+    const sheet = value === null || value.length === 0 ? null : value[Math.min(sheetIndex, value.length - 1)];
+    const rows = useMemo(() => (sheet === null ? [] : sheet.rows.slice(0, PsFileViewerConfig.maxSheetRows)), [sheet]);
+    useEffect(() => setSheetIndex(0), [file.id]);
+    if (hasFailed || (value !== null && value.length === 0))
+        return _jsx("p", { className: 'm-auto text-sm text-white/70', children: labels.loadFailed });
+    if (value === null || sheet === null)
+        return _jsx(PsSpinner, { className: 'm-auto', color: 'current', size: 'large' });
+    return (_jsxs("div", { className: 'flex h-full w-full min-w-0 flex-col gap-2', children: [_jsx("div", { className: 'min-h-0 flex-1 overflow-auto', children: _jsx("div", { className: 'mx-auto w-full max-w-6xl rounded-lg bg-surface p-5 text-ink shadow-2xl', style: { fontSize: `${zoom * 0.875}rem` }, children: _jsx(PsTableView, { activeMatch: activeMatch, onMatchCount: onMatchCount, query: query, rows: rows }, sheet.name) }) }), _jsxs("div", { className: 'flex shrink-0 flex-wrap items-center gap-2 text-xs text-white/70', children: [value.length > 1 ? (_jsx("div", { className: 'flex flex-wrap gap-1', role: 'tablist', children: value.map((entry, index) => (_jsx("button", { "aria-selected": entry === sheet, className: entry === sheet
+                                ? 'ps-focus-ring ps-control-compact rounded-ps-control bg-white/20 px-3 text-white'
+                                : 'ps-focus-ring ps-control-compact rounded-ps-control px-3 text-white/70 hover:bg-white/10', onClick: () => setSheetIndex(index), role: 'tab', type: 'button', children: entry.name }, `${entry.name}-${index}`))) })) : null, sheet.rows.length > rows.length ? (_jsx("span", { children: PsLabelService.fill(labels.sheetTruncated, { count: PsFileViewerConfig.maxSheetRows }) })) : null] })] }));
+};

package/dist/esm/components/ps-table-view.js

@@ -0,0 +1,13 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useEffect, useMemo, useRef } from 'react';
+import { usePsActiveMatchScroll } from '../hooks/use-ps-active-match-scroll';
+import { PsTextSearchService } from '../services/ps-text-search-service';
+import { PsHighlightedText } from './ps-highlighted-text';
+export const PsTableView = ({ activeMatch, onMatchCount, query, rows }) => {
+    const container = useRef(null);
+    const cells = useMemo(() => PsTextSearchService.tableSegments(rows, query), [rows, query]);
+    const count = useMemo(() => PsTextSearchService.countSegments(cells), [cells]);
+    useEffect(() => onMatchCount(count), [count]);
+    usePsActiveMatchScroll(container, activeMatch, query);
+    return (_jsx("table", { className: 'w-full border-collapse text-left', ref: container, 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))) }) }));
+};

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

@@ -8,31 +8,24 @@ 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';
+import { PsTableView } from './ps-table-view';
 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]);
+    const count = segments.filter((part) => part.isMatch).length;
+    useEffect(() => {
+        if (!isCsv)
+            onMatchCount(count);
+    }, [isCsv, 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 }) })) }) }));
+    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(PsTableView, { activeMatch: activeMatch, onMatchCount: onMatchCount, query: query, rows: rows })) : (_jsx("pre", { className: 'whitespace-pre-wrap break-words font-mono leading-relaxed', children: _jsx(PsHighlightedText, { activeMatch: activeMatch, segments: segments }) })) }) }));
 };

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

@@ -16,5 +16,5 @@ export const PsUploadRow = ({ item, labels, onCancel, onRemove, onRetry }) => {
         : item.status === PsUploadStatus.failed && item.error
             ? item.error
             : labels[item.status];
-    return (_jsxs("li", { className: 'flex items-center gap-3 rounded-ps-control border border-line px-3 py-2.5', 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: [_jsx("p", { className: 'truncate text-sm font-medium text-ink', children: item.file.name }), _jsx(PsProgressBar, { label: item.file.name, tone: PsUploadStatusTones[item.status], value: isProblem ? 1 : item.progress }), _jsxs("p", { className: `truncate text-xs ${isProblem ? 'text-danger' : item.status === PsUploadStatus.done ? 'text-success' : 'text-ink/55'}`, role: item.status === PsUploadStatus.failed ? 'alert' : undefined, children: [size, " \u00B7 ", status] })] }), _jsxs("div", { className: 'flex w-20 shrink-0 items-center justify-end gap-1', children: [isProblem ? (_jsx(PsFileIconButton, { iconKey: PsIconKey.Refresh, label: `${labels.retry} ${item.file.name}`, onClick: onRetry })) : null, isActive ? (_jsx(PsFileIconButton, { iconKey: PsIconKey.Close, label: `${labels.cancel} ${item.file.name}`, onClick: onCancel, tone: 'danger' })) : item.status === PsUploadStatus.done ? (_jsx("span", { className: 'ps-control-square ps-control-compact inline-flex items-center justify-center text-success', children: _jsx(PsIcon, { "aria-label": labels.done, className: 'h-4 w-4', iconKey: PsIconKey.Check }) })) : (_jsx(PsFileIconButton, { iconKey: PsIconKey.Close, label: `${labels.remove} ${item.file.name}`, onClick: onRemove }))] })] }));
+    return (_jsxs("li", { className: 'flex items-center gap-3 rounded-ps-control border border-line px-3 py-2.5', 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: [_jsx("p", { className: 'truncate text-sm font-medium text-ink', children: item.file.name }), _jsx(PsProgressBar, { label: item.file.name, tone: PsUploadStatusTones[item.status], value: isProblem ? 1 : item.progress }), _jsxs("p", { className: `truncate text-xs ${isProblem ? 'text-danger' : item.status === PsUploadStatus.done ? 'text-success' : 'text-muted'}`, role: item.status === PsUploadStatus.failed ? 'alert' : undefined, children: [size, " \u00B7 ", status] })] }), _jsxs("div", { className: 'flex w-20 shrink-0 items-center justify-end gap-1', children: [isProblem ? (_jsx(PsFileIconButton, { iconKey: PsIconKey.Refresh, label: `${labels.retry} ${item.file.name}`, onClick: onRetry })) : null, isActive ? (_jsx(PsFileIconButton, { iconKey: PsIconKey.Close, label: `${labels.cancel} ${item.file.name}`, onClick: onCancel, tone: 'danger' })) : item.status === PsUploadStatus.done ? (_jsx("span", { className: 'ps-control-square ps-control-compact inline-flex items-center justify-center text-success', children: _jsx(PsIcon, { "aria-label": labels.done, className: 'h-4 w-4', iconKey: PsIconKey.Check }) })) : (_jsx(PsFileIconButton, { iconKey: PsIconKey.Close, label: `${labels.remove} ${item.file.name}`, onClick: onRemove }))] })] }));
 };

package/dist/esm/components/ps-word-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 { PsWordService } from '../services/ps-word-service';
+import { PsHtmlDocument } from './ps-html-document';
+export const PsWordViewer = ({ activeMatch, file, labels, onMatchCount, query, zoom, }) => {
+    const { hasFailed, value } = usePsLoadedFile(file.url, PsWordService.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/constants/ps-file-kind-icons.js

@@ -3,9 +3,12 @@ import { PsFileKind } from './ps-file-kind';
 export const PsFileKindIcons = {
     [PsFileKind.audio]: PsIconKey.Audio,
     [PsFileKind.csv]: PsIconKey.Sheet,
+    [PsFileKind.html]: PsIconKey.Text,
     [PsFileKind.image]: PsIconKey.Image,
     [PsFileKind.other]: PsIconKey.File,
     [PsFileKind.pdf]: PsIconKey.Doc,
+    [PsFileKind.sheet]: PsIconKey.Sheet,
     [PsFileKind.text]: PsIconKey.Text,
     [PsFileKind.video]: PsIconKey.Video,
+    [PsFileKind.word]: PsIconKey.Doc,
 };

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

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

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

@@ -1,26 +1,40 @@
 import { PsFileKind } from './ps-file-kind';
 export const PsFileTypeConfig = {
-    csvTypes: ['text/csv', 'application/csv', 'application/vnd.ms-excel'],
+    csvTypes: ['text/csv', 'application/csv'],
+    excelLegacyType: 'application/vnd.ms-excel',
     extensionKinds: {
+        aac: PsFileKind.audio,
+        avif: PsFileKind.image,
+        bmp: PsFileKind.image,
         csv: PsFileKind.csv,
+        docx: PsFileKind.word,
         gif: PsFileKind.image,
-        heic: PsFileKind.image,
+        htm: PsFileKind.html,
+        html: PsFileKind.html,
         jpeg: PsFileKind.image,
         jpg: PsFileKind.image,
         json: PsFileKind.text,
         log: PsFileKind.text,
+        m4a: PsFileKind.audio,
         md: PsFileKind.text,
         mov: PsFileKind.video,
         mp3: PsFileKind.audio,
         mp4: PsFileKind.video,
+        ogg: PsFileKind.audio,
         pdf: PsFileKind.pdf,
         png: PsFileKind.image,
         svg: PsFileKind.image,
+        tsv: PsFileKind.text,
         txt: PsFileKind.text,
         wav: PsFileKind.audio,
         webm: PsFileKind.video,
         webp: PsFileKind.image,
+        xlsx: PsFileKind.sheet,
         xml: 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/esm/constants/ps-file-viewer-config.js

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

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

@@ -1,6 +1,21 @@
 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],
+    searchable: [
+        PsFileKind.csv,
+        PsFileKind.html,
+        PsFileKind.pdf,
+        PsFileKind.sheet,
+        PsFileKind.text,
+        PsFileKind.word,
+    ],
+    zoomable: [
+        PsFileKind.csv,
+        PsFileKind.html,
+        PsFileKind.image,
+        PsFileKind.pdf,
+        PsFileKind.sheet,
+        PsFileKind.text,
+        PsFileKind.word,
+    ],
 };

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

@@ -1,11 +1,13 @@
 export const 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',
@@ -14,6 +16,7 @@ export const 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/esm/constants/ps-html-sanitize-config.js

@@ -0,0 +1,23 @@
+export const 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/hooks/use-ps-file-search.js

@@ -0,0 +1,37 @@
+import { useCallback, useEffect, useRef, useState } from 'react';
+import { usePsDebouncedValue } from '@pallasoft/ps-core-components';
+import { PsFileViewerConfig } from '../constants/ps-file-viewer-config';
+export const usePsFileSearch = (resetKey) => {
+    const [search, setSearch] = useState('');
+    const [activeMatch, setActiveMatch] = useState(0);
+    const [matchCount, setMatchCount] = useState(0);
+    const inputRef = useRef(null);
+    const query = usePsDebouncedValue(search, PsFileViewerConfig.searchDebounceMs);
+    const reset = useCallback(() => {
+        setSearch('');
+        setActiveMatch(0);
+        setMatchCount(0);
+    }, []);
+    useEffect(reset, [resetKey]);
+    useEffect(() => setActiveMatch(0), [query]);
+    const focus = useCallback(() => {
+        inputRef.current?.focus();
+        inputRef.current?.select();
+    }, []);
+    const step = useCallback((delta) => {
+        if (matchCount > 0)
+            setActiveMatch((current) => (current + delta + matchCount) % matchCount);
+    }, [matchCount]);
+    return {
+        activeMatch,
+        focus,
+        inputRef,
+        matchCount,
+        query,
+        reset,
+        search,
+        setMatchCount,
+        setSearch,
+        step,
+    };
+};

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

@@ -1,21 +1,6 @@
-import { useEffect, useState } from 'react';
+import { PsFileFetchService } from '../services/ps-file-fetch-service';
+import { usePsLoadedFile } from './use-ps-loaded-file';
 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;
+    const { hasFailed, value } = usePsLoadedFile(url, PsFileFetchService.text);
+    return { hasFailed, text: value };
 };

package/dist/esm/hooks/use-ps-find-shortcut.js

@@ -0,0 +1,23 @@
+import { useEffect } from 'react';
+import { PsFileSearchService } from '../services/ps-file-search-service';
+export const usePsFindShortcut = (scope, isEnabled, onFind) => {
+    useEffect(() => {
+        if (!isEnabled)
+            return;
+        const onKey = (event) => {
+            if (!PsFileSearchService.isFindShortcut(event))
+                return;
+            if (scope !== null) {
+                const node = scope.current;
+                if (node === null)
+                    return;
+                if (!node.contains(document.activeElement) && !node.matches(':hover'))
+                    return;
+            }
+            event.preventDefault();
+            onFind();
+        };
+        window.addEventListener('keydown', onKey);
+        return () => window.removeEventListener('keydown', onKey);
+    }, [scope, isEnabled, onFind]);
+};

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

@@ -0,0 +1,19 @@
+import { useEffect, useState } from 'react';
+export const usePsLoadedFile = (url, load) => {
+    const [state, setState] = useState({ hasFailed: false, value: null });
+    useEffect(() => {
+        const controller = new AbortController();
+        setState({ hasFailed: false, value: null });
+        load(url, controller.signal)
+            .then((value) => {
+            if (!controller.signal.aborted)
+                setState({ hasFailed: false, value });
+        })
+            .catch(() => {
+            if (!controller.signal.aborted)
+                setState({ hasFailed: true, value: null });
+        });
+        return () => controller.abort();
+    }, [url, load]);
+    return state;
+};

package/dist/esm/index.js

@@ -18,6 +18,13 @@ export * from './components/ps-text-viewer';
 export * from './components/ps-unsupported-viewer';
 export * from './components/ps-upload-modal';
 export * from './components/ps-upload-row';
+export * from './components/ps-file-search-bar';
+export * from './components/ps-html-document';
+export * from './components/ps-html-viewer';
+export * from './components/ps-image-text-highlights';
+export * from './components/ps-sheet-viewer';
+export * from './components/ps-table-view';
+export * from './components/ps-word-viewer';
 export * from './constants/ps-file-icon-button-classes';
 export * from './constants/ps-file-kind-icons';
 export * from './constants/ps-file-kind';
@@ -33,6 +40,7 @@ export * from './constants/ps-upload-messages';
 export * from './constants/ps-upload-queue-config';
 export * from './constants/ps-upload-status-tones';
 export * from './constants/ps-upload-status';
+export * from './constants/ps-html-sanitize-config';
 export * from './models/ps-drag-pan-handlers';
 export * from './models/ps-drag-pan-options';
 export * from './models/ps-file-icon-button-tone';
@@ -59,6 +67,20 @@ export * from './models/ps-viewer-file';
 export * from './models/ps-xhr-response-type';
 export * from './models/ps-xhr-upload-request';
 export * from './models/ps-xhr-upload-response';
+export * from './models/ps-file-search-state';
+export * from './models/ps-html-highlight-result';
+export * from './models/ps-image-match';
+export * from './models/ps-image-text-box';
+export * from './models/ps-image-text-layer';
+export * from './models/ps-image-text-word';
+export * from './models/ps-item-match';
+export * from './models/ps-item-match-part';
+export * from './models/ps-loaded-file-state';
+export * from './models/ps-normalized-text';
+export * from './models/ps-pdf-text-item';
+export * from './models/ps-pdf-viewport-like';
+export * from './models/ps-search-item';
+export * from './models/ps-sheet-data';
 export * from './services/ps-csv-service';
 export * from './services/ps-file-selection-service';
 export * from './services/ps-file-size-service';
@@ -67,11 +89,22 @@ export * from './services/ps-pdf-service';
 export * from './services/ps-text-search-service';
 export * from './services/ps-upload-queue-service';
 export * from './services/ps-xhr-upload-service';
+export * from './services/ps-file-fetch-service';
+export * from './services/ps-file-search-service';
+export * from './services/ps-html-file-service';
+export * from './services/ps-html-service';
+export * from './services/ps-image-text-service';
+export * from './services/ps-label-service';
+export * from './services/ps-sheet-service';
+export * from './services/ps-word-service';
 export * from './hooks/use-ps-active-match-scroll';
 export * from './hooks/use-ps-drag-pan';
 export * from './hooks/use-ps-file-text';
 export * from './hooks/use-ps-in-view';
 export * from './hooks/use-ps-upload-queue';
+export * from './hooks/use-ps-file-search';
+export * from './hooks/use-ps-find-shortcut';
+export * from './hooks/use-ps-loaded-file';
 export * from './components/ps-document-scanner';
 export * from './constants/ps-document-scanner-labels';
 export * from './constants/ps-scan-format';

package/dist/esm/models/ps-file-search-state.js

@@ -0,0 +1 @@
+export {};

package/dist/esm/models/ps-html-highlight-result.js

@@ -0,0 +1 @@
+export {};

package/dist/esm/models/ps-html-text-node.js

@@ -0,0 +1 @@
+export {};

package/dist/esm/models/ps-image-match.js

@@ -0,0 +1 @@
+export {};

package/dist/esm/models/ps-image-text-box.js

@@ -0,0 +1 @@
+export {};

package/dist/esm/models/ps-image-text-layer.js

@@ -0,0 +1 @@
+export {};

package/dist/esm/models/ps-image-text-word.js

@@ -0,0 +1 @@
+export {};

package/dist/esm/models/ps-item-match-part.js

@@ -0,0 +1 @@
+export {};

package/dist/esm/models/ps-item-match.js

@@ -0,0 +1 @@
+export {};

package/dist/esm/models/ps-loaded-file-state.js

@@ -0,0 +1 @@
+export {};

package/dist/esm/models/ps-normalized-text.js

@@ -0,0 +1 @@
+export {};

package/dist/esm/models/ps-pdf-text-item.js

@@ -0,0 +1 @@
+export {};

package/dist/esm/models/ps-pdf-viewport-like.js

@@ -0,0 +1 @@
+export {};

package/dist/esm/models/ps-search-item.js

@@ -0,0 +1 @@
+export {};

package/dist/esm/models/ps-sheet-data.js

@@ -0,0 +1 @@
+export {};

package/dist/esm/services/ps-file-fetch-service.js

@@ -0,0 +1,14 @@
+export class PsFileFetchService {
+    static async response(url, signal) {
+        const response = await fetch(url, { credentials: 'include', signal });
+        if (!response.ok)
+            throw new Error(response.statusText);
+        return response;
+    }
+    static async text(url, signal) {
+        return (await PsFileFetchService.response(url, signal)).text();
+    }
+    static async buffer(url, signal) {
+        return (await PsFileFetchService.response(url, signal)).arrayBuffer();
+    }
+}

package/dist/esm/services/ps-file-search-service.js

@@ -0,0 +1,15 @@
+import { PsFileKind } from '../constants/ps-file-kind';
+import { PsFileViewerKinds } from '../constants/ps-file-viewer-kinds';
+export class PsFileSearchService {
+    static canSearch(kind, hasTextLayer) {
+        if (PsFileViewerKinds.searchable.includes(kind))
+            return true;
+        return kind === PsFileKind.image && hasTextLayer;
+    }
+    static isFindShortcut(event) {
+        return ((event.metaKey || event.ctrlKey) &&
+            !event.altKey &&
+            !event.shiftKey &&
+            event.key.toLowerCase() === 'f');
+    }
+}

package/dist/esm/services/ps-file-type-service.js

@@ -7,10 +7,21 @@ export class PsFileTypeService {
     }
     static kindOf(contentType, name) {
         const type = contentType.toLowerCase();
+        const extension = PsFileTypeService.extension(name);
         if (type === 'application/pdf')
             return PsFileKind.pdf;
         if (PsFileTypeConfig.csvTypes.includes(type))
             return PsFileKind.csv;
+        if (type === PsFileTypeConfig.excelLegacyType)
+            return extension === 'xls' || extension === 'xlsb' ? PsFileKind.other : PsFileKind.csv;
+        if (PsFileTypeConfig.sheetTypes.includes(type))
+            return PsFileKind.sheet;
+        if (PsFileTypeConfig.wordTypes.includes(type))
+            return PsFileKind.word;
+        if (PsFileTypeConfig.htmlTypes.includes(type))
+            return PsFileKind.html;
+        if (PsFileTypeConfig.unsupportedImageTypes.includes(type))
+            return PsFileKind.other;
         if (type.startsWith('image/'))
             return PsFileKind.image;
         if (type.startsWith('video/'))
@@ -20,7 +31,7 @@ export class PsFileTypeService {
         if (type.startsWith('text/') ||
             PsFileTypeConfig.textTypes.includes(type))
             return PsFileKind.text;
-        const byExtension = PsFileTypeConfig.extensionKinds[PsFileTypeService.extension(name)];
+        const byExtension = PsFileTypeConfig.extensionKinds[extension];
         return byExtension === undefined ? PsFileKind.other : byExtension;
     }
     static isAccepted(file, accept) {

package/dist/esm/services/ps-html-file-service.js

@@ -0,0 +1,7 @@
+import { PsFileFetchService } from './ps-file-fetch-service';
+import { PsHtmlService } from './ps-html-service';
+export class PsHtmlFileService {
+    static async load(url, signal) {
+        return PsHtmlService.sanitize(await PsFileFetchService.text(url, signal), false);
+    }
+}