@pallasoft/ps-file-components 2.2.0 → 2.4.0

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

@@ -8,5 +8,6 @@ export interface PsFileListProps {
     labels?: Partial<PsLabelSet<typeof PsFileListLabels>>;
     onDelete?: (file: PsViewerFile) => void;
     onOpen: (index: number) => void;
+    onRename?: (file: PsViewerFile) => void;
 }
-export declare const PsFileList: ({ busyIds, files, formatDate, labels, onDelete, onOpen, }: PsFileListProps) => import("react").JSX.Element;
+export declare const PsFileList: ({ busyIds, files, formatDate, labels, onDelete, onOpen, onRename, }: PsFileListProps) => import("react").JSX.Element;

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

@@ -9,7 +9,7 @@ const ps_file_size_service_1 = require("../services/ps-file-size-service");
 const ps_file_type_service_1 = require("../services/ps-file-type-service");
 const ps_file_icon_button_1 = require("./ps-file-icon-button");
 const ps_file_kind_icon_1 = require("./ps-file-kind-icon");
-const PsFileList = ({ busyIds = [], files, formatDate, labels, onDelete, onOpen, }) => {
+const PsFileList = ({ busyIds = [], files, formatDate, labels, onDelete, onOpen, onRename, }) => {
     const text = { ...ps_file_list_labels_1.PsFileListLabels, ...labels };
     if (files.length === 0)
         return (0, jsx_runtime_1.jsx)("p", { className: 'text-sm text-ink/60', children: text.empty });
@@ -21,7 +21,7 @@ const PsFileList = ({ busyIds = [], files, formatDate, labels, onDelete, onOpen,
                     ? null
                     : formatDate(file.createdAt),
             ].filter((value) => value !== null);
-            return ((0, jsx_runtime_1.jsxs)("li", { className: 'group flex min-w-0 items-center gap-3 rounded-ps-control border border-line bg-surface p-2 transition hover:border-primary/40', children: [(0, jsx_runtime_1.jsxs)("button", { "aria-label": `${text.open} ${file.name}`, className: 'ps-focus-ring flex min-w-0 flex-1 items-center gap-3 rounded-ps-control text-left', onClick: () => onOpen(index), type: 'button', children: [isImage ? ((0, jsx_runtime_1.jsx)("img", { alt: '', className: 'h-12 w-12 shrink-0 rounded-ps-control border border-line object-cover', loading: 'lazy', src: file.url })) : ((0, jsx_runtime_1.jsx)(ps_file_kind_icon_1.PsFileKindIcon, { className: 'h-12 w-12', contentType: file.contentType, name: file.name })), (0, jsx_runtime_1.jsxs)("span", { className: 'flex min-w-0 flex-col', children: [(0, jsx_runtime_1.jsx)("span", { className: 'truncate text-sm font-medium text-ink group-hover:text-primary', children: file.name }), meta.length > 0 ? ((0, jsx_runtime_1.jsx)("span", { className: 'truncate text-xs text-ink/55', children: meta.join(' · ') })) : null] })] }), (0, jsx_runtime_1.jsxs)("div", { className: 'flex shrink-0 items-center gap-0.5', children: [(0, jsx_runtime_1.jsx)(ps_file_icon_button_1.PsFileIconButton, { download: file.name, href: file.downloadUrl === undefined ? file.url : file.downloadUrl, iconKey: ps_icons_1.PsIconKey.Download, label: `${text.download} ${file.name}` }), onDelete ? ((0, jsx_runtime_1.jsx)(ps_file_icon_button_1.PsFileIconButton, { disabled: busyIds.includes(file.id), iconKey: ps_icons_1.PsIconKey.Trash, label: `${text.delete} ${file.name}`, onClick: () => onDelete(file), tone: 'danger' })) : null] })] }, file.id));
+            return ((0, jsx_runtime_1.jsxs)("li", { className: 'group flex min-w-0 items-center gap-3 rounded-ps-control border border-line bg-surface p-2 transition hover:border-primary/40', children: [(0, jsx_runtime_1.jsxs)("button", { "aria-label": `${text.open} ${file.name}`, className: 'ps-focus-ring flex min-w-0 flex-1 items-center gap-3 rounded-ps-control text-left', onClick: () => onOpen(index), type: 'button', children: [isImage ? ((0, jsx_runtime_1.jsx)("img", { alt: '', className: 'h-12 w-12 shrink-0 rounded-ps-control border border-line object-cover', loading: 'lazy', src: file.url })) : ((0, jsx_runtime_1.jsx)(ps_file_kind_icon_1.PsFileKindIcon, { className: 'h-12 w-12', contentType: file.contentType, name: file.name })), (0, jsx_runtime_1.jsxs)("span", { className: 'flex min-w-0 flex-col', children: [(0, jsx_runtime_1.jsx)("span", { className: 'truncate text-sm font-medium text-ink group-hover:text-primary', children: file.name }), meta.length > 0 ? ((0, jsx_runtime_1.jsx)("span", { className: 'truncate text-xs text-ink/55', children: meta.join(' · ') })) : null] })] }), (0, jsx_runtime_1.jsxs)("div", { className: 'flex shrink-0 items-center gap-0.5', children: [(0, jsx_runtime_1.jsx)(ps_file_icon_button_1.PsFileIconButton, { download: file.name, href: file.downloadUrl === undefined ? file.url : file.downloadUrl, iconKey: ps_icons_1.PsIconKey.Download, label: `${text.download} ${file.name}` }), onRename ? ((0, jsx_runtime_1.jsx)(ps_file_icon_button_1.PsFileIconButton, { disabled: busyIds.includes(file.id), iconKey: ps_icons_1.PsIconKey.Pencil, label: `${text.rename} ${file.name}`, onClick: () => onRename(file) })) : null, onDelete ? ((0, jsx_runtime_1.jsx)(ps_file_icon_button_1.PsFileIconButton, { disabled: busyIds.includes(file.id), iconKey: ps_icons_1.PsIconKey.Trash, label: `${text.delete} ${file.name}`, onClick: () => onDelete(file), tone: 'danger' })) : null] })] }, file.id));
         }) }));
 };
 exports.PsFileList = PsFileList;

package/dist/components/ps-file-search-bar.d.ts

@@ -0,0 +1,10 @@
+import type { PsFileViewerLabels } from '../constants/ps-file-viewer-labels';
+import type { PsFileSearchState } from '../models/ps-file-search-state';
+import type { PsLabelSet } from '../models/ps-label-set';
+export interface PsFileSearchBarProps {
+    className?: string;
+    labels: PsLabelSet<typeof PsFileViewerLabels>;
+    onClose?: () => void;
+    state: PsFileSearchState;
+}
+export declare const PsFileSearchBar: ({ className, labels, onClose, state }: PsFileSearchBarProps) => import("react").JSX.Element;

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

@@ -0,0 +1,25 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.PsFileSearchBar = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const ps_design_system_1 = require("@pallasoft/ps-design-system");
+const ps_icons_1 = require("@pallasoft/ps-icons");
+const ps_label_service_1 = require("../services/ps-label-service");
+const ps_file_viewer_button_1 = require("./ps-file-viewer-button");
+const PsFileSearchBar = ({ className, labels, onClose, state }) => ((0, jsx_runtime_1.jsxs)("div", { className: ps_design_system_1.PallasoftClassNameService.merge('flex items-center gap-1 rounded-ps-control bg-white/10 px-3', className), role: 'search', children: [(0, jsx_runtime_1.jsx)(ps_icons_1.PsIcon, { "aria-hidden": 'true', className: 'h-4 w-4 shrink-0 text-white/60', iconKey: ps_icons_1.PsIconKey.Search }), (0, jsx_runtime_1.jsx)("input", { "aria-label": 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 ? ((0, jsx_runtime_1.jsx)("span", { "aria-live": 'polite', className: 'shrink-0 whitespace-nowrap text-xs text-white/60', children: state.matchCount === 0
+                ? labels.noMatches
+                : ps_label_service_1.PsLabelService.fill(labels.matchCount, {
+                    current: state.activeMatch + 1,
+                    total: state.matchCount,
+                }) })) : null, (0, jsx_runtime_1.jsx)(ps_file_viewer_button_1.PsFileViewerButton, { disabled: state.matchCount === 0, label: labels.previousMatch, onClick: () => state.step(-1), children: (0, jsx_runtime_1.jsx)(ps_icons_1.PsIcon, { "aria-hidden": 'true', className: 'size-ps-control-icon-standalone -rotate-90', iconKey: ps_icons_1.PsIconKey.ChevronRight }) }), (0, jsx_runtime_1.jsx)(ps_file_viewer_button_1.PsFileViewerButton, { disabled: state.matchCount === 0, label: labels.nextMatch, onClick: () => state.step(1), children: (0, jsx_runtime_1.jsx)(ps_icons_1.PsIcon, { "aria-hidden": 'true', className: 'size-ps-control-icon-standalone rotate-90', iconKey: ps_icons_1.PsIconKey.ChevronRight }) }), onClose === undefined ? null : ((0, jsx_runtime_1.jsx)(ps_file_viewer_button_1.PsFileViewerButton, { label: labels.closeSearch, onClick: onClose, children: (0, jsx_runtime_1.jsx)(ps_icons_1.PsIcon, { "aria-hidden": 'true', className: 'size-ps-control-icon-standalone', iconKey: ps_icons_1.PsIconKey.Close }) }))] }));
+exports.PsFileSearchBar = PsFileSearchBar;

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

@@ -4,11 +4,14 @@ exports.PsFileViewerContent = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const ps_file_kind_1 = require("../constants/ps-file-kind");
 const ps_file_type_service_1 = require("../services/ps-file-type-service");
+const ps_html_viewer_1 = require("./ps-html-viewer");
 const ps_image_viewer_1 = require("./ps-image-viewer");
 const ps_media_viewer_1 = require("./ps-media-viewer");
 const ps_pdf_viewer_1 = require("./ps-pdf-viewer");
+const ps_sheet_viewer_1 = require("./ps-sheet-viewer");
 const ps_text_viewer_1 = require("./ps-text-viewer");
 const ps_unsupported_viewer_1 = require("./ps-unsupported-viewer");
+const ps_word_viewer_1 = require("./ps-word-viewer");
 const PsFileViewerContent = (props) => {
     switch (ps_file_type_service_1.PsFileTypeService.kindOf(props.file.contentType, props.file.name)) {
         case ps_file_kind_1.PsFileKind.image:
@@ -18,6 +21,12 @@ const PsFileViewerContent = (props) => {
         case ps_file_kind_1.PsFileKind.csv:
         case ps_file_kind_1.PsFileKind.text:
             return (0, jsx_runtime_1.jsx)(ps_text_viewer_1.PsTextViewer, { ...props });
+        case ps_file_kind_1.PsFileKind.word:
+            return (0, jsx_runtime_1.jsx)(ps_word_viewer_1.PsWordViewer, { ...props });
+        case ps_file_kind_1.PsFileKind.sheet:
+            return (0, jsx_runtime_1.jsx)(ps_sheet_viewer_1.PsSheetViewer, { ...props });
+        case ps_file_kind_1.PsFileKind.html:
+            return (0, jsx_runtime_1.jsx)(ps_html_viewer_1.PsHtmlViewer, { ...props });
         case ps_file_kind_1.PsFileKind.audio:
         case ps_file_kind_1.PsFileKind.video:
             return (0, jsx_runtime_1.jsx)(ps_media_viewer_1.PsMediaViewer, { ...props });

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

@@ -1,2 +1,2 @@
 import type { PsFileViewerPaneProps } from '../models/ps-file-viewer-pane-props';
-export declare const PsFileViewerPane: ({ contentType, headerActions, id, labels, name, pdfWorkerSrc, url, }: PsFileViewerPaneProps) => import("react").JSX.Element;
+export declare const PsFileViewerPane: ({ contentType, headerActions, id, labels, name, pdfWorkerSrc, textLayer, url, }: PsFileViewerPaneProps) => import("react").JSX.Element;

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

@@ -7,19 +7,43 @@ const ps_icons_1 = require("@pallasoft/ps-icons");
 const ps_file_viewer_config_1 = require("../constants/ps-file-viewer-config");
 const ps_file_viewer_kinds_1 = require("../constants/ps-file-viewer-kinds");
 const ps_file_viewer_labels_1 = require("../constants/ps-file-viewer-labels");
+const use_ps_file_search_1 = require("../hooks/use-ps-file-search");
+const use_ps_find_shortcut_1 = require("../hooks/use-ps-find-shortcut");
+const ps_file_search_service_1 = require("../services/ps-file-search-service");
 const ps_file_type_service_1 = require("../services/ps-file-type-service");
+const ps_file_search_bar_1 = require("./ps-file-search-bar");
 const ps_file_viewer_button_1 = require("./ps-file-viewer-button");
 const ps_file_viewer_content_1 = require("./ps-file-viewer-content");
-const PsFileViewerPane = ({ contentType, headerActions, id, labels = ps_file_viewer_labels_1.PsFileViewerLabels, name, pdfWorkerSrc, url, }) => {
+const PsFileViewerPane = ({ contentType, headerActions, id, labels, name, pdfWorkerSrc, textLayer, url, }) => {
+    const text = { ...ps_file_viewer_labels_1.PsFileViewerLabels, ...labels };
     const [zoom, setZoom] = (0, react_1.useState)(1);
     const [rotation, setRotation] = (0, react_1.useState)(0);
+    const [isFindOpen, setIsFindOpen] = (0, react_1.useState)(false);
+    const root = (0, react_1.useRef)(null);
     const kind = ps_file_type_service_1.PsFileTypeService.kindOf(contentType, name);
     const canZoom = ps_file_viewer_kinds_1.PsFileViewerKinds.zoomable.includes(kind);
     const canRotate = ps_file_viewer_kinds_1.PsFileViewerKinds.rotatable.includes(kind);
+    const canSearch = ps_file_search_service_1.PsFileSearchService.canSearch(kind, textLayer !== undefined);
     const changeZoom = (step) => setZoom((current) => Math.min(ps_file_viewer_config_1.PsFileViewerConfig.maxZoom, Math.max(ps_file_viewer_config_1.PsFileViewerConfig.minZoom, current + step)));
     const fileKey = id === undefined ? url : id;
+    const searchState = (0, use_ps_file_search_1.usePsFileSearch)(fileKey);
+    const { focus, reset } = searchState;
+    const openFind = (0, react_1.useCallback)(() => {
+        setIsFindOpen(true);
+        requestAnimationFrame(focus);
+    }, [focus]);
+    const closeFind = (0, react_1.useCallback)(() => {
+        setIsFindOpen(false);
+        reset();
+    }, [reset]);
+    (0, use_ps_find_shortcut_1.usePsFindShortcut)(root, canSearch, openFind);
     const rotate = () => setRotation((current) => (current + ps_file_viewer_config_1.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 === '='))
@@ -34,6 +58,6 @@ const PsFileViewerPane = ({ contentType, headerActions, id, labels = ps_file_vie
             return;
         event.preventDefault();
     };
-    return ((0, jsx_runtime_1.jsxs)("div", { className: 'flex h-full min-h-0 min-w-0 flex-col overflow-hidden rounded-ps-panel bg-black/85', children: [(0, jsx_runtime_1.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: [(0, jsx_runtime_1.jsx)("p", { className: 'min-w-0 flex-1 basis-32 truncate px-1 text-xs text-white/70', title: name, children: name }), (0, jsx_runtime_1.jsxs)("div", { className: 'flex items-center gap-0.5', role: 'toolbar', children: [canZoom ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(ps_file_viewer_button_1.PsFileViewerButton, { disabled: zoom <= ps_file_viewer_config_1.PsFileViewerConfig.minZoom, label: labels.zoomOut, onClick: () => changeZoom(-ps_file_viewer_config_1.PsFileViewerConfig.zoomStep), children: (0, jsx_runtime_1.jsx)(ps_icons_1.PsIcon, { "aria-hidden": 'true', className: 'size-4', iconKey: ps_icons_1.PsIconKey.ZoomOut }) }), (0, jsx_runtime_1.jsxs)(ps_file_viewer_button_1.PsFileViewerButton, { className: 'w-14 text-xs', label: labels.zoomReset, onClick: () => setZoom(1), children: [Math.round(zoom * 100), "%"] }), (0, jsx_runtime_1.jsx)(ps_file_viewer_button_1.PsFileViewerButton, { disabled: zoom >= ps_file_viewer_config_1.PsFileViewerConfig.maxZoom, label: labels.zoomIn, onClick: () => changeZoom(ps_file_viewer_config_1.PsFileViewerConfig.zoomStep), children: (0, jsx_runtime_1.jsx)(ps_icons_1.PsIcon, { "aria-hidden": 'true', className: 'size-4', iconKey: ps_icons_1.PsIconKey.ZoomIn }) })] })) : null, canRotate ? ((0, jsx_runtime_1.jsx)(ps_file_viewer_button_1.PsFileViewerButton, { label: labels.rotate, onClick: rotate, children: (0, jsx_runtime_1.jsx)(ps_icons_1.PsIcon, { "aria-hidden": 'true', className: 'size-4', iconKey: ps_icons_1.PsIconKey.Rotate }) })) : null, headerActions] })] }), (0, jsx_runtime_1.jsx)("div", { className: 'ps-focus-ring flex min-h-0 flex-1 p-2', onKeyDown: onKeyDown, tabIndex: 0, children: (0, jsx_runtime_1.jsx)(ps_file_viewer_content_1.PsFileViewerContent, { activeMatch: 0, file: { contentType, id: fileKey, name, url }, labels: labels, onMatchCount: () => undefined, pdfWorkerSrc: pdfWorkerSrc, query: '', rotation: rotation, zoom: zoom }, fileKey) })] }));
+    return ((0, jsx_runtime_1.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: [(0, jsx_runtime_1.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: [(0, jsx_runtime_1.jsx)("p", { className: 'min-w-0 flex-1 basis-32 truncate px-1 text-xs text-white/70', title: name, children: name }), (0, jsx_runtime_1.jsxs)("div", { className: 'flex items-center gap-0.5', role: 'toolbar', children: [canSearch ? ((0, jsx_runtime_1.jsx)(ps_file_viewer_button_1.PsFileViewerButton, { label: text.search, onClick: isFindOpen ? closeFind : openFind, children: (0, jsx_runtime_1.jsx)(ps_icons_1.PsIcon, { "aria-hidden": 'true', className: 'size-4', iconKey: ps_icons_1.PsIconKey.Search }) })) : null, canZoom ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(ps_file_viewer_button_1.PsFileViewerButton, { disabled: zoom <= ps_file_viewer_config_1.PsFileViewerConfig.minZoom, label: text.zoomOut, onClick: () => changeZoom(-ps_file_viewer_config_1.PsFileViewerConfig.zoomStep), children: (0, jsx_runtime_1.jsx)(ps_icons_1.PsIcon, { "aria-hidden": 'true', className: 'size-4', iconKey: ps_icons_1.PsIconKey.ZoomOut }) }), (0, jsx_runtime_1.jsxs)(ps_file_viewer_button_1.PsFileViewerButton, { className: 'w-14 text-xs', label: text.zoomReset, onClick: () => setZoom(1), children: [Math.round(zoom * 100), "%"] }), (0, jsx_runtime_1.jsx)(ps_file_viewer_button_1.PsFileViewerButton, { disabled: zoom >= ps_file_viewer_config_1.PsFileViewerConfig.maxZoom, label: text.zoomIn, onClick: () => changeZoom(ps_file_viewer_config_1.PsFileViewerConfig.zoomStep), children: (0, jsx_runtime_1.jsx)(ps_icons_1.PsIcon, { "aria-hidden": 'true', className: 'size-4', iconKey: ps_icons_1.PsIconKey.ZoomIn }) })] })) : null, canRotate ? ((0, jsx_runtime_1.jsx)(ps_file_viewer_button_1.PsFileViewerButton, { label: text.rotate, onClick: rotate, children: (0, jsx_runtime_1.jsx)(ps_icons_1.PsIcon, { "aria-hidden": 'true', className: 'size-4', iconKey: ps_icons_1.PsIconKey.Rotate }) })) : null, headerActions] })] }), canSearch && isFindOpen ? ((0, jsx_runtime_1.jsx)("div", { className: 'shrink-0 border-b border-white/10 px-2 py-1', children: (0, jsx_runtime_1.jsx)(ps_file_search_bar_1.PsFileSearchBar, { labels: text, onClose: closeFind, state: searchState }) })) : null, (0, jsx_runtime_1.jsx)("div", { className: 'ps-focus-ring flex min-h-0 flex-1 p-2', onKeyDown: onKeyDown, tabIndex: 0, children: (0, jsx_runtime_1.jsx)(ps_file_viewer_content_1.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) })] }));
 };
 exports.PsFileViewerPane = PsFileViewerPane;

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

@@ -10,9 +10,13 @@ const react_dom_1 = require("react-dom");
 const ps_file_viewer_config_1 = require("../constants/ps-file-viewer-config");
 const ps_file_viewer_kinds_1 = require("../constants/ps-file-viewer-kinds");
 const ps_file_viewer_labels_1 = require("../constants/ps-file-viewer-labels");
+const use_ps_file_search_1 = require("../hooks/use-ps-file-search");
+const use_ps_find_shortcut_1 = require("../hooks/use-ps-find-shortcut");
+const ps_file_search_service_1 = require("../services/ps-file-search-service");
 const ps_file_size_service_1 = require("../services/ps-file-size-service");
 const ps_file_type_service_1 = require("../services/ps-file-type-service");
 const ps_file_delete_confirm_1 = require("./ps-file-delete-confirm");
+const ps_file_search_bar_1 = require("./ps-file-search-bar");
 const ps_file_viewer_button_1 = require("./ps-file-viewer-button");
 const ps_file_viewer_content_1 = require("./ps-file-viewer-content");
 const PsFileViewer = ({ files, index, isOpen, labels, onClose, onDelete, onIndexChange, pdfWorkerSrc, }) => {
@@ -21,34 +25,24 @@ const PsFileViewer = ({ files, index, isOpen, labels, onClose, onDelete, onIndex
     const zIndex = (0, ps_core_components_1.usePsLayerZIndex)(ps_design_system_1.PallasoftZIndex.Modal);
     const [zoom, setZoom] = (0, react_1.useState)(1);
     const [rotation, setRotation] = (0, react_1.useState)(0);
-    const [search, setSearch] = (0, react_1.useState)('');
-    const [activeMatch, setActiveMatch] = (0, react_1.useState)(0);
-    const [matchCount, setMatchCount] = (0, react_1.useState)(0);
     const [isConfirming, setIsConfirming] = (0, react_1.useState)(false);
     const [isDeleting, setIsDeleting] = (0, react_1.useState)(false);
-    const searchInput = (0, react_1.useRef)(null);
-    const query = (0, ps_core_components_1.usePsDebouncedValue)(search, ps_file_viewer_config_1.PsFileViewerConfig.searchDebounceMs);
     const file = files.length === 0 ? null : files[Math.min(index, files.length - 1)];
     const kind = file === null ? null : ps_file_type_service_1.PsFileTypeService.kindOf(file.contentType, file.name);
-    const canSearch = kind !== null && ps_file_viewer_kinds_1.PsFileViewerKinds.searchable.includes(kind);
+    const searchState = (0, use_ps_file_search_1.usePsFileSearch)(file === null ? null : file.id);
+    const canSearch = kind !== null &&
+        file !== null &&
+        ps_file_search_service_1.PsFileSearchService.canSearch(kind, file.textLayer !== undefined);
     const canZoom = kind !== null && ps_file_viewer_kinds_1.PsFileViewerKinds.zoomable.includes(kind);
     const canRotate = kind !== null && ps_file_viewer_kinds_1.PsFileViewerKinds.rotatable.includes(kind);
     (0, react_1.useEffect)(() => {
         setZoom(1);
         setRotation(0);
-        setSearch('');
-        setActiveMatch(0);
-        setMatchCount(0);
     }, [file === null ? null : file.id]);
-    (0, react_1.useEffect)(() => setActiveMatch(0), [query]);
     const go = (step) => {
         if (files.length > 1)
             onIndexChange((index + step + files.length) % files.length);
     };
-    const stepMatch = (step) => {
-        if (matchCount > 0)
-            setActiveMatch((current) => (current + step + matchCount) % matchCount);
-    };
     const changeZoom = (step) => setZoom((current) => Math.min(ps_file_viewer_config_1.PsFileViewerConfig.maxZoom, Math.max(ps_file_viewer_config_1.PsFileViewerConfig.minZoom, current + step)));
     (0, react_1.useEffect)(() => {
         if (!isOpen)
@@ -57,10 +51,6 @@ const PsFileViewer = ({ files, index, isOpen, labels, onClose, onDelete, onIndex
             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')
@@ -74,7 +64,8 @@ const PsFileViewer = ({ files, index, isOpen, labels, onClose, onDelete, onIndex
         };
         window.addEventListener('keydown', onKey);
         return () => window.removeEventListener('keydown', onKey);
-    }, [isOpen, isConfirming, canSearch, index, files.length]);
+    }, [isOpen, isConfirming, index, files.length]);
+    (0, use_ps_find_shortcut_1.usePsFindShortcut)(null, isOpen && canSearch, searchState.focus);
     if (!shouldRender || file === null || typeof document === 'undefined')
         return null;
     const confirmDelete = async () => {
@@ -94,9 +85,6 @@ const PsFileViewer = ({ files, index, isOpen, labels, onClose, onDelete, onIndex
                                             file.sizeBytes === undefined ? null : ps_file_size_service_1.PsFileSizeService.format(file.sizeBytes),
                                         ]
                                             .filter((value) => value !== null)
-                                            .join(' · ') })] }) }), canSearch ? ((0, jsx_runtime_1.jsxs)("div", { className: 'order-last flex w-full items-center gap-1 rounded-ps-control bg-white/10 px-3 sm:order-none sm:w-72', children: [(0, jsx_runtime_1.jsx)(ps_icons_1.PsIcon, { "aria-hidden": 'true', className: 'h-4 w-4 shrink-0 text-white/60', iconKey: ps_icons_1.PsIconKey.Search }), (0, jsx_runtime_1.jsx)("input", { "aria-label": text.search, className: 'h-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 ? ((0, jsx_runtime_1.jsx)("span", { className: 'shrink-0 text-xs text-white/60', children: matchCount === 0 ? text.noMatches : `${activeMatch + 1} / ${matchCount}` })) : null, (0, jsx_runtime_1.jsx)(ps_file_viewer_button_1.PsFileViewerButton, { disabled: matchCount === 0, label: text.previousMatch, onClick: () => stepMatch(-1), children: (0, jsx_runtime_1.jsx)(ps_icons_1.PsIcon, { "aria-hidden": 'true', className: 'size-ps-control-icon-standalone -rotate-90', iconKey: ps_icons_1.PsIconKey.ChevronRight }) }), (0, jsx_runtime_1.jsx)(ps_file_viewer_button_1.PsFileViewerButton, { disabled: matchCount === 0, label: text.nextMatch, onClick: () => stepMatch(1), children: (0, jsx_runtime_1.jsx)(ps_icons_1.PsIcon, { "aria-hidden": 'true', className: 'size-ps-control-icon-standalone rotate-90', iconKey: ps_icons_1.PsIconKey.ChevronRight }) })] })) : null, (0, jsx_runtime_1.jsxs)("div", { className: 'flex items-center gap-0.5', children: [canZoom ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(ps_file_viewer_button_1.PsFileViewerButton, { label: text.zoomOut, onClick: () => changeZoom(-ps_file_viewer_config_1.PsFileViewerConfig.zoomStep), children: (0, jsx_runtime_1.jsx)(ps_icons_1.PsIcon, { "aria-hidden": 'true', className: 'size-ps-control-icon-standalone', iconKey: ps_icons_1.PsIconKey.ZoomOut }) }), (0, jsx_runtime_1.jsxs)(ps_file_viewer_button_1.PsFileViewerButton, { className: 'w-14 text-xs', label: text.zoomReset, onClick: () => setZoom(1), children: [Math.round(zoom * 100), "%"] }), (0, jsx_runtime_1.jsx)(ps_file_viewer_button_1.PsFileViewerButton, { label: text.zoomIn, onClick: () => changeZoom(ps_file_viewer_config_1.PsFileViewerConfig.zoomStep), children: (0, jsx_runtime_1.jsx)(ps_icons_1.PsIcon, { "aria-hidden": 'true', className: 'size-ps-control-icon-standalone', iconKey: ps_icons_1.PsIconKey.ZoomIn }) })] })) : null, canRotate ? ((0, jsx_runtime_1.jsx)(ps_file_viewer_button_1.PsFileViewerButton, { label: text.rotate, onClick: () => setRotation((current) => (current + ps_file_viewer_config_1.PsFileViewerConfig.rotateStep) % 360), children: (0, jsx_runtime_1.jsx)(ps_icons_1.PsIcon, { "aria-hidden": 'true', className: 'size-ps-control-icon-standalone', iconKey: ps_icons_1.PsIconKey.Rotate }) })) : null, (0, jsx_runtime_1.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: (0, jsx_runtime_1.jsx)(ps_icons_1.PsIcon, { "aria-hidden": 'true', className: 'size-ps-control-icon-standalone', iconKey: ps_icons_1.PsIconKey.Download }) }), onDelete ? ((0, jsx_runtime_1.jsx)(ps_file_viewer_button_1.PsFileViewerButton, { label: text.delete, onClick: () => setIsConfirming(true), tone: 'danger', children: (0, jsx_runtime_1.jsx)(ps_icons_1.PsIcon, { "aria-hidden": 'true', className: 'size-ps-control-icon-standalone', iconKey: ps_icons_1.PsIconKey.Trash }) })) : null, (0, jsx_runtime_1.jsx)(ps_file_viewer_button_1.PsFileViewerButton, { label: text.close, onClick: onClose, children: (0, jsx_runtime_1.jsx)(ps_icons_1.PsIcon, { "aria-hidden": 'true', className: 'size-ps-control-icon-standalone', iconKey: ps_icons_1.PsIconKey.Close }) })] })] }), (0, jsx_runtime_1.jsxs)("div", { className: 'relative flex min-h-0 flex-1', children: [files.length > 1 ? ((0, jsx_runtime_1.jsx)(ps_file_viewer_button_1.PsFileViewerButton, { className: 'absolute left-2 top-1/2 z-docked size-ps-control -translate-y-1/2 bg-black/40', label: text.previous, onClick: () => go(-1), children: (0, jsx_runtime_1.jsx)(ps_icons_1.PsIcon, { "aria-hidden": 'true', className: 'size-ps-control-icon-standalone rotate-180', iconKey: ps_icons_1.PsIconKey.ChevronRight }) })) : null, (0, jsx_runtime_1.jsx)("div", { className: 'flex min-h-0 min-w-0 flex-1 p-3 sm:p-6', children: (0, jsx_runtime_1.jsx)(ps_file_viewer_content_1.PsFileViewerContent, { activeMatch: activeMatch, file: file, labels: text, onMatchCount: setMatchCount, pdfWorkerSrc: pdfWorkerSrc, query: canSearch ? query : '', rotation: rotation, zoom: zoom }, file.id) }), files.length > 1 ? ((0, jsx_runtime_1.jsx)(ps_file_viewer_button_1.PsFileViewerButton, { className: 'absolute right-2 top-1/2 z-docked size-ps-control -translate-y-1/2 bg-black/40', label: text.next, onClick: () => go(1), children: (0, jsx_runtime_1.jsx)(ps_icons_1.PsIcon, { "aria-hidden": 'true', className: 'size-ps-control-icon-standalone', iconKey: ps_icons_1.PsIconKey.ChevronRight }) })) : null] }), (0, jsx_runtime_1.jsx)(ps_file_delete_confirm_1.PsFileDeleteConfirm, { fileName: file.name, isDeleting: isDeleting, isOpen: isConfirming, labels: text, onCancel: () => setIsConfirming(false), onConfirm: () => void confirmDelete() })] }) }), document.body);
+                                            .join(' · ') })] }) }), canSearch ? ((0, jsx_runtime_1.jsx)(ps_file_search_bar_1.PsFileSearchBar, { className: 'order-last w-full sm:order-none sm:w-72', labels: text, state: searchState })) : null, (0, jsx_runtime_1.jsxs)("div", { className: 'flex items-center gap-0.5', children: [canZoom ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(ps_file_viewer_button_1.PsFileViewerButton, { label: text.zoomOut, onClick: () => changeZoom(-ps_file_viewer_config_1.PsFileViewerConfig.zoomStep), children: (0, jsx_runtime_1.jsx)(ps_icons_1.PsIcon, { "aria-hidden": 'true', className: 'size-ps-control-icon-standalone', iconKey: ps_icons_1.PsIconKey.ZoomOut }) }), (0, jsx_runtime_1.jsxs)(ps_file_viewer_button_1.PsFileViewerButton, { className: 'w-14 text-xs', label: text.zoomReset, onClick: () => setZoom(1), children: [Math.round(zoom * 100), "%"] }), (0, jsx_runtime_1.jsx)(ps_file_viewer_button_1.PsFileViewerButton, { label: text.zoomIn, onClick: () => changeZoom(ps_file_viewer_config_1.PsFileViewerConfig.zoomStep), children: (0, jsx_runtime_1.jsx)(ps_icons_1.PsIcon, { "aria-hidden": 'true', className: 'size-ps-control-icon-standalone', iconKey: ps_icons_1.PsIconKey.ZoomIn }) })] })) : null, canRotate ? ((0, jsx_runtime_1.jsx)(ps_file_viewer_button_1.PsFileViewerButton, { label: text.rotate, onClick: () => setRotation((current) => (current + ps_file_viewer_config_1.PsFileViewerConfig.rotateStep) % 360), children: (0, jsx_runtime_1.jsx)(ps_icons_1.PsIcon, { "aria-hidden": 'true', className: 'size-ps-control-icon-standalone', iconKey: ps_icons_1.PsIconKey.Rotate }) })) : null, (0, jsx_runtime_1.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: (0, jsx_runtime_1.jsx)(ps_icons_1.PsIcon, { "aria-hidden": 'true', className: 'size-ps-control-icon-standalone', iconKey: ps_icons_1.PsIconKey.Download }) }), onDelete ? ((0, jsx_runtime_1.jsx)(ps_file_viewer_button_1.PsFileViewerButton, { label: text.delete, onClick: () => setIsConfirming(true), tone: 'danger', children: (0, jsx_runtime_1.jsx)(ps_icons_1.PsIcon, { "aria-hidden": 'true', className: 'size-ps-control-icon-standalone', iconKey: ps_icons_1.PsIconKey.Trash }) })) : null, (0, jsx_runtime_1.jsx)(ps_file_viewer_button_1.PsFileViewerButton, { label: text.close, onClick: onClose, children: (0, jsx_runtime_1.jsx)(ps_icons_1.PsIcon, { "aria-hidden": 'true', className: 'size-ps-control-icon-standalone', iconKey: ps_icons_1.PsIconKey.Close }) })] })] }), (0, jsx_runtime_1.jsxs)("div", { className: 'relative flex min-h-0 flex-1', children: [files.length > 1 ? ((0, jsx_runtime_1.jsx)(ps_file_viewer_button_1.PsFileViewerButton, { className: 'absolute left-2 top-1/2 z-docked size-ps-control -translate-y-1/2 bg-black/40', label: text.previous, onClick: () => go(-1), children: (0, jsx_runtime_1.jsx)(ps_icons_1.PsIcon, { "aria-hidden": 'true', className: 'size-ps-control-icon-standalone rotate-180', iconKey: ps_icons_1.PsIconKey.ChevronRight }) })) : null, (0, jsx_runtime_1.jsx)("div", { className: 'flex min-h-0 min-w-0 flex-1 p-3 sm:p-6', children: (0, jsx_runtime_1.jsx)(ps_file_viewer_content_1.PsFileViewerContent, { activeMatch: searchState.activeMatch, file: file, labels: text, onMatchCount: searchState.setMatchCount, pdfWorkerSrc: pdfWorkerSrc, query: canSearch ? searchState.query : '', rotation: rotation, zoom: zoom }, file.id) }), files.length > 1 ? ((0, jsx_runtime_1.jsx)(ps_file_viewer_button_1.PsFileViewerButton, { className: 'absolute right-2 top-1/2 z-docked size-ps-control -translate-y-1/2 bg-black/40', label: text.next, onClick: () => go(1), children: (0, jsx_runtime_1.jsx)(ps_icons_1.PsIcon, { "aria-hidden": 'true', className: 'size-ps-control-icon-standalone', iconKey: ps_icons_1.PsIconKey.ChevronRight }) })) : null] }), (0, jsx_runtime_1.jsx)(ps_file_delete_confirm_1.PsFileDeleteConfirm, { fileName: file.name, isDeleting: isDeleting, isOpen: isConfirming, labels: text, onCancel: () => setIsConfirming(false), onConfirm: () => void confirmDelete() })] }) }), document.body);
 };
 exports.PsFileViewer = PsFileViewer;

package/dist/components/ps-html-document.d.ts

@@ -0,0 +1,8 @@
+export interface PsHtmlDocumentProps {
+    activeMatch: number;
+    html: string;
+    onMatchCount: (count: number) => void;
+    query: string;
+    zoom: number;
+}
+export declare const PsHtmlDocument: ({ activeMatch, html, onMatchCount, query, zoom, }: PsHtmlDocumentProps) => import("react").JSX.Element;

package/dist/components/ps-html-document.js

@@ -0,0 +1,23 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.PsHtmlDocument = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const use_ps_active_match_scroll_1 = require("../hooks/use-ps-active-match-scroll");
+const ps_html_service_1 = require("../services/ps-html-service");
+const PsHtmlDocument = ({ activeMatch, html, onMatchCount, query, zoom, }) => {
+    const container = (0, react_1.useRef)(null);
+    const highlighted = (0, react_1.useMemo)(() => ps_html_service_1.PsHtmlService.highlight(html, query), [html, query]);
+    (0, react_1.useEffect)(() => onMatchCount(highlighted.count), [highlighted.count]);
+    (0, react_1.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]);
+    (0, use_ps_active_match_scroll_1.usePsActiveMatchScroll)(container, activeMatch, highlighted.html);
+    return ((0, jsx_runtime_1.jsx)("div", { className: 'h-full w-full overflow-auto', children: (0, jsx_runtime_1.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` } }) }));
+};
+exports.PsHtmlDocument = PsHtmlDocument;

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

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

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

@@ -0,0 +1,17 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.PsHtmlViewer = 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_html_file_service_1 = require("../services/ps-html-file-service");
+const ps_html_document_1 = require("./ps-html-document");
+const PsHtmlViewer = ({ activeMatch, file, labels, onMatchCount, query, zoom, }) => {
+    const { hasFailed, value } = (0, use_ps_loaded_file_1.usePsLoadedFile)(file.url, ps_html_file_service_1.PsHtmlFileService.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.PsHtmlViewer = PsHtmlViewer;

package/dist/components/ps-image-text-highlights.d.ts

@@ -0,0 +1,9 @@
+import { type RefObject } from 'react';
+import type { PsImageMatch } from '../models/ps-image-match';
+export interface PsImageTextHighlightsProps {
+    activeIndex: number;
+    image: RefObject<HTMLImageElement>;
+    matches: PsImageMatch[];
+    transform: string;
+}
+export declare const PsImageTextHighlights: ({ activeIndex, image, matches, transform, }: PsImageTextHighlightsProps) => import("react").JSX.Element;

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

@@ -0,0 +1,31 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.PsImageTextHighlights = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const PsImageTextHighlights = ({ activeIndex, image, matches, transform, }) => {
+    const [size, setSize] = (0, react_1.useState)({ height: 0, width: 0 });
+    (0, react_1.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 ((0, jsx_runtime_1.jsx)("div", { className: 'pointer-events-none absolute inset-0 flex items-center justify-center', children: (0, jsx_runtime_1.jsx)("div", { className: 'relative shrink-0 transition-transform duration-150', style: { height: size.height, transform, width: size.width }, children: matches.map((match, index) => ((0, jsx_runtime_1.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))) }) }));
+};
+exports.PsImageTextHighlights = PsImageTextHighlights;

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

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

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

@@ -4,14 +4,23 @@ exports.PsImageViewer = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
 const use_ps_drag_pan_1 = require("../hooks/use-ps-drag-pan");
+const ps_image_text_service_1 = require("../services/ps-image-text-service");
 const ps_pan_service_1 = require("../services/ps-pan-service");
-const PsImageViewer = ({ file, labels, rotation, zoom }) => {
+const ps_image_text_highlights_1 = require("./ps-image-text-highlights");
+const PsImageViewer = ({ activeMatch, file, labels, onMatchCount, query, rotation, zoom, }) => {
     const [offset, setOffset] = (0, react_1.useState)({ x: 0, y: 0 });
     const [hasFailed, setHasFailed] = (0, react_1.useState)(false);
     const pan = (0, react_1.useRef)(null);
     const base = (0, react_1.useRef)({ x: 0, y: 0 });
     const frame = (0, react_1.useRef)(0);
     const pending = (0, react_1.useRef)({ x: 0, y: 0 });
+    const image = (0, react_1.useRef)(null);
+    const layer = file.textLayer;
+    const matches = (0, react_1.useMemo)(() => (layer === undefined ? [] : ps_image_text_service_1.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)`;
+    (0, react_1.useEffect)(() => onMatchCount(count), [count]);
     (0, react_1.useEffect)(() => {
         setOffset({ x: 0, y: 0 });
         setHasFailed(false);
@@ -47,6 +56,6 @@ const PsImageViewer = ({ file, labels, rotation, zoom }) => {
     });
     if (hasFailed)
         return (0, jsx_runtime_1.jsx)("p", { className: 'm-auto text-sm text-white/70', children: labels.loadFailed });
-    return ((0, jsx_runtime_1.jsx)("div", { className: `h-full w-full touch-none overflow-hidden ${zoom > 1 ? 'cursor-grab active:cursor-grabbing' : ''}`, ...handlers, children: (0, jsx_runtime_1.jsx)("div", { className: 'flex h-full w-full items-center justify-center', ref: pan, style: { transform: ps_pan_service_1.PsPanService.translate(offset) }, children: (0, jsx_runtime_1.jsx)("img", { alt: file.name, className: 'max-h-full max-w-full select-none object-contain shadow-2xl transition-transform duration-150', draggable: false, onError: () => setHasFailed(true), src: file.url, style: { transform: `scale(${zoom}) rotate(${rotation}deg)` } }) }) }));
+    return ((0, jsx_runtime_1.jsx)("div", { className: `h-full w-full touch-none overflow-hidden ${zoom > 1 ? 'cursor-grab active:cursor-grabbing' : ''}`, ...handlers, children: (0, jsx_runtime_1.jsxs)("div", { className: 'relative flex h-full w-full items-center justify-center', ref: pan, style: { transform: ps_pan_service_1.PsPanService.translate(offset) }, children: [(0, jsx_runtime_1.jsx)("img", { alt: file.name, className: 'max-h-full max-w-full select-none object-contain shadow-2xl transition-transform duration-150', draggable: false, onError: () => setHasFailed(true), ref: image, src: file.url, style: { transform: imageTransform } }), matches.length > 0 ? ((0, jsx_runtime_1.jsx)(ps_image_text_highlights_1.PsImageTextHighlights, { activeIndex: activeIndex, image: image, matches: matches, transform: imageTransform })) : null] }) }));
 };
 exports.PsImageViewer = PsImageViewer;

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

@@ -25,7 +25,7 @@ const PsPdfPage = ({ activeMatch, document, label, matches, pageNumber, rotation
             task?.cancel();
         };
     }, [document, pageNumber, rotation, scale, isInView]);
-    return ((0, jsx_runtime_1.jsxs)("div", { "aria-label": `${label} ${pageNumber}`, className: 'relative mx-auto bg-white shadow-2xl', "data-ps-pdf-page": pageNumber, ref: container, style: size === null ? { height: 800, width: 600 } : { height: size.height, width: size.width }, children: [(0, jsx_runtime_1.jsx)("canvas", { className: 'block', ref: canvas }), matches.map((match, index) => ((0, jsx_runtime_1.jsx)("span", { className: match === activeMatch
+    return ((0, jsx_runtime_1.jsxs)("div", { "aria-label": `${label} ${pageNumber}`, className: 'relative mx-auto bg-white shadow-2xl', "data-ps-pdf-page": pageNumber, ref: container, style: size === null ? { height: 800, width: 600 } : { height: size.height, width: size.width }, children: [(0, jsx_runtime_1.jsx)("canvas", { className: 'block', ref: canvas }), matches.map((match, index) => ((0, jsx_runtime_1.jsx)("span", { className: 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/components/ps-pdf-viewer.js

@@ -79,13 +79,17 @@ const PsPdfViewer = ({ activeMatch, file, labels, onMatchCount, pdfWorkerSrc, qu
             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/components/ps-sheet-viewer.d.ts

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

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

@@ -0,0 +1,26 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.PsSheetViewer = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const ps_core_components_1 = require("@pallasoft/ps-core-components");
+const ps_file_viewer_config_1 = require("../constants/ps-file-viewer-config");
+const use_ps_loaded_file_1 = require("../hooks/use-ps-loaded-file");
+const ps_label_service_1 = require("../services/ps-label-service");
+const ps_sheet_service_1 = require("../services/ps-sheet-service");
+const ps_table_view_1 = require("./ps-table-view");
+const PsSheetViewer = ({ activeMatch, file, labels, onMatchCount, query, zoom, }) => {
+    const { hasFailed, value } = (0, use_ps_loaded_file_1.usePsLoadedFile)(file.url, ps_sheet_service_1.PsSheetService.load);
+    const [sheetIndex, setSheetIndex] = (0, react_1.useState)(0);
+    const sheet = value === null || value.length === 0 ? null : value[Math.min(sheetIndex, value.length - 1)];
+    const rows = (0, react_1.useMemo)(() => (sheet === null ? [] : sheet.rows.slice(0, ps_file_viewer_config_1.PsFileViewerConfig.maxSheetRows)), [sheet]);
+    (0, react_1.useEffect)(() => setSheetIndex(0), [file.id]);
+    if (hasFailed || (value !== null && value.length === 0))
+        return (0, jsx_runtime_1.jsx)("p", { className: 'm-auto text-sm text-white/70', children: labels.loadFailed });
+    if (value === null || sheet === null)
+        return (0, jsx_runtime_1.jsx)(ps_core_components_1.PsSpinner, { className: 'm-auto', color: 'current', size: 'large' });
+    return ((0, jsx_runtime_1.jsxs)("div", { className: 'flex h-full w-full min-w-0 flex-col gap-2', children: [(0, jsx_runtime_1.jsx)("div", { className: 'min-h-0 flex-1 overflow-auto', children: (0, jsx_runtime_1.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: (0, jsx_runtime_1.jsx)(ps_table_view_1.PsTableView, { activeMatch: activeMatch, onMatchCount: onMatchCount, query: query, rows: rows }, sheet.name) }) }), (0, jsx_runtime_1.jsxs)("div", { className: 'flex shrink-0 flex-wrap items-center gap-2 text-xs text-white/70', children: [value.length > 1 ? ((0, jsx_runtime_1.jsx)("div", { className: 'flex flex-wrap gap-1', role: 'tablist', children: value.map((entry, index) => ((0, jsx_runtime_1.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 ? ((0, jsx_runtime_1.jsx)("span", { children: ps_label_service_1.PsLabelService.fill(labels.sheetTruncated, { count: ps_file_viewer_config_1.PsFileViewerConfig.maxSheetRows }) })) : null] })] }));
+};
+exports.PsSheetViewer = PsSheetViewer;

package/dist/components/ps-table-view.d.ts

@@ -0,0 +1,7 @@
+export interface PsTableViewProps {
+    activeMatch: number;
+    onMatchCount: (count: number) => void;
+    query: string;
+    rows: string[][];
+}
+export declare const PsTableView: ({ activeMatch, onMatchCount, query, rows }: PsTableViewProps) => import("react").JSX.Element;

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

@@ -0,0 +1,17 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.PsTableView = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const use_ps_active_match_scroll_1 = require("../hooks/use-ps-active-match-scroll");
+const ps_text_search_service_1 = require("../services/ps-text-search-service");
+const ps_highlighted_text_1 = require("./ps-highlighted-text");
+const PsTableView = ({ activeMatch, onMatchCount, query, rows }) => {
+    const container = (0, react_1.useRef)(null);
+    const cells = (0, react_1.useMemo)(() => ps_text_search_service_1.PsTextSearchService.tableSegments(rows, query), [rows, query]);
+    const count = (0, react_1.useMemo)(() => ps_text_search_service_1.PsTextSearchService.countSegments(cells), [cells]);
+    (0, react_1.useEffect)(() => onMatchCount(count), [count]);
+    (0, use_ps_active_match_scroll_1.usePsActiveMatchScroll)(container, activeMatch, query);
+    return ((0, jsx_runtime_1.jsx)("table", { className: 'w-full border-collapse text-left', ref: container, children: (0, jsx_runtime_1.jsx)("tbody", { children: cells.map((row, rowIndex) => ((0, jsx_runtime_1.jsx)("tr", { className: rowIndex === 0 ? 'bg-primary-soft/50 font-semibold' : 'border-t border-line', children: row.map((cell, cellIndex) => ((0, jsx_runtime_1.jsx)("td", { className: 'whitespace-nowrap px-3 py-1.5 align-top', children: (0, jsx_runtime_1.jsx)(ps_highlighted_text_1.PsHighlightedText, { activeMatch: activeMatch, segments: cell }) }, cellIndex))) }, rowIndex))) }) }));
+};
+exports.PsTableView = PsTableView;

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

@@ -11,32 +11,25 @@ const ps_csv_service_1 = require("../services/ps-csv-service");
 const ps_file_type_service_1 = require("../services/ps-file-type-service");
 const ps_text_search_service_1 = require("../services/ps-text-search-service");
 const ps_highlighted_text_1 = require("./ps-highlighted-text");
+const ps_table_view_1 = require("./ps-table-view");
 const PsTextViewer = ({ activeMatch, file, labels, onMatchCount, query, zoom, }) => {
     const { hasFailed, text } = (0, use_ps_file_text_1.usePsFileText)(file.url);
     const container = (0, react_1.useRef)(null);
     const isCsv = ps_file_type_service_1.PsFileTypeService.kindOf(file.contentType, file.name) === ps_file_kind_1.PsFileKind.csv;
     const rows = (0, react_1.useMemo)(() => (isCsv && text !== null ? ps_csv_service_1.PsCsvService.parse(text) : []), [isCsv, text]);
-    const cells = (0, react_1.useMemo)(() => {
-        let offset = 0;
-        return rows.map((row) => row.map((cell) => {
-            const matches = ps_text_search_service_1.PsTextSearchService.find(cell, query);
-            const segments = ps_text_search_service_1.PsTextSearchService.segments(cell, matches, offset);
-            offset += matches.length;
-            return segments;
-        }));
-    }, [rows, query]);
     const segments = (0, react_1.useMemo)(() => isCsv || text === null
         ? []
         : ps_text_search_service_1.PsTextSearchService.segments(text, ps_text_search_service_1.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;
-    (0, react_1.useEffect)(() => onMatchCount(count), [count]);
+    const count = segments.filter((part) => part.isMatch).length;
+    (0, react_1.useEffect)(() => {
+        if (!isCsv)
+            onMatchCount(count);
+    }, [isCsv, count]);
     (0, use_ps_active_match_scroll_1.usePsActiveMatchScroll)(container, activeMatch, query);
     if (hasFailed)
         return (0, jsx_runtime_1.jsx)("p", { className: 'm-auto text-sm text-white/70', children: labels.loadFailed });
     if (text === 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)("div", { className: 'h-full w-full overflow-auto', ref: container, children: (0, jsx_runtime_1.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 ? ((0, jsx_runtime_1.jsx)("table", { className: 'w-full border-collapse text-left', children: (0, jsx_runtime_1.jsx)("tbody", { children: cells.map((row, rowIndex) => ((0, jsx_runtime_1.jsx)("tr", { className: rowIndex === 0 ? 'bg-primary-soft/50 font-semibold' : 'border-t border-line', children: row.map((cell, cellIndex) => ((0, jsx_runtime_1.jsx)("td", { className: 'whitespace-nowrap px-3 py-1.5 align-top', children: (0, jsx_runtime_1.jsx)(ps_highlighted_text_1.PsHighlightedText, { activeMatch: activeMatch, segments: cell }) }, cellIndex))) }, rowIndex))) }) })) : ((0, jsx_runtime_1.jsx)("pre", { className: 'whitespace-pre-wrap break-words font-mono leading-relaxed', children: (0, jsx_runtime_1.jsx)(ps_highlighted_text_1.PsHighlightedText, { activeMatch: activeMatch, segments: segments }) })) }) }));
+    return ((0, jsx_runtime_1.jsx)("div", { className: 'h-full w-full overflow-auto', ref: container, children: (0, jsx_runtime_1.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 ? ((0, jsx_runtime_1.jsx)(ps_table_view_1.PsTableView, { activeMatch: activeMatch, onMatchCount: onMatchCount, query: query, rows: rows })) : ((0, jsx_runtime_1.jsx)("pre", { className: 'whitespace-pre-wrap break-words font-mono leading-relaxed', children: (0, jsx_runtime_1.jsx)(ps_highlighted_text_1.PsHighlightedText, { activeMatch: activeMatch, segments: segments }) })) }) }));
 };
 exports.PsTextViewer = PsTextViewer;

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,
 };