@pallasoft/ps-file-components 2.3.0 → 2.4.0

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-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))) }) }));
+};

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))) }) }));
+};