@pallasoft/ps-file-components 2.4.0 → 2.4.1

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

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

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

@@ -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}` }), 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));
+            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-muted', 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-picker.js

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

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

@@ -19,6 +19,6 @@ const PsUploadRow = ({ item, labels, onCancel, onRemove, onRetry }) => {
         : item.status === ps_upload_status_1.PsUploadStatus.failed && item.error
             ? item.error
             : labels[item.status];
-    return ((0, jsx_runtime_1.jsxs)("li", { className: 'flex items-center gap-3 rounded-ps-control border border-line px-3 py-2.5', children: [(0, jsx_runtime_1.jsx)(ps_file_kind_icon_1.PsFileKindIcon, { contentType: item.file.type, name: item.file.name }), (0, jsx_runtime_1.jsxs)("div", { className: 'flex min-w-0 flex-1 flex-col gap-1.5', children: [(0, jsx_runtime_1.jsx)("p", { className: 'truncate text-sm font-medium text-ink', children: item.file.name }), (0, jsx_runtime_1.jsx)(ps_progress_bar_1.PsProgressBar, { label: item.file.name, tone: ps_upload_status_tones_1.PsUploadStatusTones[item.status], value: isProblem ? 1 : item.progress }), (0, jsx_runtime_1.jsxs)("p", { className: `truncate text-xs ${isProblem ? 'text-danger' : item.status === ps_upload_status_1.PsUploadStatus.done ? 'text-success' : 'text-ink/55'}`, role: item.status === ps_upload_status_1.PsUploadStatus.failed ? 'alert' : undefined, children: [size, " \u00B7 ", status] })] }), (0, jsx_runtime_1.jsxs)("div", { className: 'flex w-20 shrink-0 items-center justify-end gap-1', children: [isProblem ? ((0, jsx_runtime_1.jsx)(ps_file_icon_button_1.PsFileIconButton, { iconKey: ps_icons_1.PsIconKey.Refresh, label: `${labels.retry} ${item.file.name}`, onClick: onRetry })) : null, isActive ? ((0, jsx_runtime_1.jsx)(ps_file_icon_button_1.PsFileIconButton, { iconKey: ps_icons_1.PsIconKey.Close, label: `${labels.cancel} ${item.file.name}`, onClick: onCancel, tone: 'danger' })) : item.status === ps_upload_status_1.PsUploadStatus.done ? ((0, jsx_runtime_1.jsx)("span", { className: 'ps-control-square ps-control-compact inline-flex items-center justify-center text-success', children: (0, jsx_runtime_1.jsx)(ps_icons_1.PsIcon, { "aria-label": labels.done, className: 'h-4 w-4', iconKey: ps_icons_1.PsIconKey.Check }) })) : ((0, jsx_runtime_1.jsx)(ps_file_icon_button_1.PsFileIconButton, { iconKey: ps_icons_1.PsIconKey.Close, label: `${labels.remove} ${item.file.name}`, onClick: onRemove }))] })] }));
+    return ((0, jsx_runtime_1.jsxs)("li", { className: 'flex items-center gap-3 rounded-ps-control border border-line px-3 py-2.5', children: [(0, jsx_runtime_1.jsx)(ps_file_kind_icon_1.PsFileKindIcon, { contentType: item.file.type, name: item.file.name }), (0, jsx_runtime_1.jsxs)("div", { className: 'flex min-w-0 flex-1 flex-col gap-1.5', children: [(0, jsx_runtime_1.jsx)("p", { className: 'truncate text-sm font-medium text-ink', children: item.file.name }), (0, jsx_runtime_1.jsx)(ps_progress_bar_1.PsProgressBar, { label: item.file.name, tone: ps_upload_status_tones_1.PsUploadStatusTones[item.status], value: isProblem ? 1 : item.progress }), (0, jsx_runtime_1.jsxs)("p", { className: `truncate text-xs ${isProblem ? 'text-danger' : item.status === ps_upload_status_1.PsUploadStatus.done ? 'text-success' : 'text-muted'}`, role: item.status === ps_upload_status_1.PsUploadStatus.failed ? 'alert' : undefined, children: [size, " \u00B7 ", status] })] }), (0, jsx_runtime_1.jsxs)("div", { className: 'flex w-20 shrink-0 items-center justify-end gap-1', children: [isProblem ? ((0, jsx_runtime_1.jsx)(ps_file_icon_button_1.PsFileIconButton, { iconKey: ps_icons_1.PsIconKey.Refresh, label: `${labels.retry} ${item.file.name}`, onClick: onRetry })) : null, isActive ? ((0, jsx_runtime_1.jsx)(ps_file_icon_button_1.PsFileIconButton, { iconKey: ps_icons_1.PsIconKey.Close, label: `${labels.cancel} ${item.file.name}`, onClick: onCancel, tone: 'danger' })) : item.status === ps_upload_status_1.PsUploadStatus.done ? ((0, jsx_runtime_1.jsx)("span", { className: 'ps-control-square ps-control-compact inline-flex items-center justify-center text-success', children: (0, jsx_runtime_1.jsx)(ps_icons_1.PsIcon, { "aria-label": labels.done, className: 'h-4 w-4', iconKey: ps_icons_1.PsIconKey.Check }) })) : ((0, jsx_runtime_1.jsx)(ps_file_icon_button_1.PsFileIconButton, { iconKey: ps_icons_1.PsIconKey.Close, label: `${labels.remove} ${item.file.name}`, onClick: onRemove }))] })] }));
 };
 exports.PsUploadRow = PsUploadRow;

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

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

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

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

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

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

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

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

package/dist/esm/services/ps-image-text-service.js

@@ -1,28 +1,6 @@
-import { PsTextSearchService } from './ps-text-search-service';
+import { Common } from '@pallasoft/ps-utilities';
 export class PsImageTextService {
     static matches(layer, query) {
-        if (layer.width <= 0 || layer.height <= 0)
-            return [];
-        const items = layer.words.map((word, index) => ({
-            isBreakAfter: index < layer.words.length - 1,
-            text: word.text,
-        }));
-        const rects = [];
-        PsTextSearchService.findInItems(items, query).forEach((match, matchIndex) => {
-            match.parts.forEach((part) => {
-                const word = layer.words[part.itemIndex];
-                const length = word.text.length;
-                const left = word.box.left + (word.box.width * part.start) / length;
-                const width = (word.box.width * (part.end - part.start)) / length;
-                rects.push({
-                    height: word.box.height / layer.height,
-                    left: left / layer.width,
-                    matchIndex,
-                    top: word.box.top / layer.height,
-                    width: width / layer.width,
-                });
-            });
-        });
-        return rects;
+        return Common.TextLayerService.fractionRects(layer, Common.TextLayerService.phraseMatches(layer, query)).map((rect) => ({ ...rect.box, matchIndex: rect.matchIndex }));
     }
 }

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

@@ -1,86 +1,16 @@
-const whitespace = /\s/u;
-const marks = /\p{M}/gu;
+import { Common } from '@pallasoft/ps-utilities';
 export class PsTextSearchService {
     static normalize(text) {
-        const starts = [];
-        const ends = [];
-        let folded = '';
-        let isAfterSpace = false;
-        let index = 0;
-        while (index < text.length) {
-            const char = String.fromCodePoint(text.codePointAt(index));
-            const next = index + char.length;
-            if (whitespace.test(char)) {
-                if (!isAfterSpace) {
-                    folded += ' ';
-                    starts.push(index);
-                    ends.push(next);
-                }
-                isAfterSpace = true;
-            }
-            else {
-                const plain = char.toLowerCase().normalize('NFD').replace(marks, '');
-                for (let at = 0; at < plain.length; at += 1) {
-                    folded += plain[at];
-                    starts.push(index);
-                    ends.push(next);
-                }
-                isAfterSpace = false;
-            }
-            index = next;
-        }
-        return { ends, starts, text: folded };
+        return Common.TextSearchService.normalize(text);
     }
     static find(text, query) {
-        const needle = PsTextSearchService.normalize(query.trim()).text;
-        if (needle.length === 0)
-            return [];
-        const haystack = PsTextSearchService.normalize(text);
-        const matches = [];
-        let from = haystack.text.indexOf(needle);
-        while (from !== -1) {
-            matches.push({
-                end: haystack.ends[from + needle.length - 1],
-                start: haystack.starts[from],
-            });
-            from = haystack.text.indexOf(needle, from + needle.length);
-        }
-        return matches;
+        return Common.TextSearchService.find(text, query);
     }
     static findInItems(items, query) {
-        const offsets = [];
-        let joined = '';
-        items.forEach((item) => {
-            offsets.push(joined.length);
-            joined += item.isBreakAfter ? `${item.text} ` : item.text;
-        });
-        return PsTextSearchService.find(joined, query).map((match) => {
-            const parts = [];
-            items.forEach((item, itemIndex) => {
-                const start = Math.max(match.start, offsets[itemIndex]) - offsets[itemIndex];
-                const end = Math.min(match.end, offsets[itemIndex] + item.text.length) - offsets[itemIndex];
-                if (end > start)
-                    parts.push({ end, itemIndex, start });
-            });
-            return { parts };
-        });
+        return Common.TextSearchService.findInItems(items, query);
     }
     static segments(text, matches, firstIndex = 0) {
-        const segments = [];
-        let cursor = 0;
-        matches.forEach((match, index) => {
-            if (match.start > cursor)
-                segments.push({ isMatch: false, matchIndex: null, text: text.slice(cursor, match.start) });
-            segments.push({
-                isMatch: true,
-                matchIndex: firstIndex + index,
-                text: text.slice(match.start, match.end),
-            });
-            cursor = match.end;
-        });
-        if (cursor < text.length)
-            segments.push({ isMatch: false, matchIndex: null, text: text.slice(cursor) });
-        return segments;
+        return Common.TextSearchService.segments(text, matches, firstIndex);
     }
     static tableSegments(rows, query) {
         let offset = 0;

package/dist/models/ps-image-text-box.d.ts

@@ -1,6 +1,2 @@
-export interface PsImageTextBox {
-    height: number;
-    left: number;
-    top: number;
-    width: number;
-}
+import type { TextLayerBox } from '@pallasoft/ps-utilities';
+export type PsImageTextBox = TextLayerBox;

package/dist/models/ps-image-text-layer.d.ts

@@ -1,6 +1,2 @@
-import type { PsImageTextWord } from './ps-image-text-word';
-export interface PsImageTextLayer {
-    height: number;
-    width: number;
-    words: PsImageTextWord[];
-}
+import type { TextLayer } from '@pallasoft/ps-utilities';
+export type PsImageTextLayer = TextLayer;

package/dist/models/ps-image-text-word.d.ts

@@ -1,5 +1,2 @@
-import type { PsImageTextBox } from './ps-image-text-box';
-export interface PsImageTextWord {
-    box: PsImageTextBox;
-    text: string;
-}
+import type { TextLayerWord } from '@pallasoft/ps-utilities';
+export type PsImageTextWord = TextLayerWord;

package/dist/models/ps-item-match-part.d.ts

@@ -1,5 +1,2 @@
-export interface PsItemMatchPart {
-    end: number;
-    itemIndex: number;
-    start: number;
-}
+import type { TextItemMatchPart } from '@pallasoft/ps-utilities';
+export type PsItemMatchPart = TextItemMatchPart;

package/dist/models/ps-item-match.d.ts

@@ -1,4 +1,2 @@
-import type { PsItemMatchPart } from './ps-item-match-part';
-export interface PsItemMatch {
-    parts: PsItemMatchPart[];
-}
+import type { TextItemMatch } from '@pallasoft/ps-utilities';
+export type PsItemMatch = TextItemMatch;

package/dist/models/ps-normalized-text.d.ts

@@ -1,5 +1,2 @@
-export interface PsNormalizedText {
-    ends: number[];
-    starts: number[];
-    text: string;
-}
+import type { TextNormalized } from '@pallasoft/ps-utilities';
+export type PsNormalizedText = TextNormalized;

package/dist/models/ps-search-item.d.ts

@@ -1,4 +1,2 @@
-export interface PsSearchItem {
-    isBreakAfter: boolean;
-    text: string;
-}
+import type { TextSearchItem } from '@pallasoft/ps-utilities';
+export type PsSearchItem = TextSearchItem;

package/dist/models/ps-text-match.d.ts

@@ -1,4 +1,2 @@
-export interface PsTextMatch {
-    end: number;
-    start: number;
-}
+import type { TextMatch } from '@pallasoft/ps-utilities';
+export type PsTextMatch = TextMatch;

package/dist/models/ps-text-segment.d.ts

@@ -1,5 +1,2 @@
-export interface PsTextSegment {
-    isMatch: boolean;
-    matchIndex: number | null;
-    text: string;
-}
+import type { TextSegment } from '@pallasoft/ps-utilities';
+export type PsTextSegment = TextSegment;

package/dist/services/ps-image-text-service.js

@@ -1,32 +1,10 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.PsImageTextService = void 0;
-const ps_text_search_service_1 = require("./ps-text-search-service");
+const ps_utilities_1 = require("@pallasoft/ps-utilities");
 class PsImageTextService {
     static matches(layer, query) {
-        if (layer.width <= 0 || layer.height <= 0)
-            return [];
-        const items = layer.words.map((word, index) => ({
-            isBreakAfter: index < layer.words.length - 1,
-            text: word.text,
-        }));
-        const rects = [];
-        ps_text_search_service_1.PsTextSearchService.findInItems(items, query).forEach((match, matchIndex) => {
-            match.parts.forEach((part) => {
-                const word = layer.words[part.itemIndex];
-                const length = word.text.length;
-                const left = word.box.left + (word.box.width * part.start) / length;
-                const width = (word.box.width * (part.end - part.start)) / length;
-                rects.push({
-                    height: word.box.height / layer.height,
-                    left: left / layer.width,
-                    matchIndex,
-                    top: word.box.top / layer.height,
-                    width: width / layer.width,
-                });
-            });
-        });
-        return rects;
+        return ps_utilities_1.Common.TextLayerService.fractionRects(layer, ps_utilities_1.Common.TextLayerService.phraseMatches(layer, query)).map((rect) => ({ ...rect.box, matchIndex: rect.matchIndex }));
     }
 }
 exports.PsImageTextService = PsImageTextService;

package/dist/services/ps-text-search-service.js

@@ -1,89 +1,19 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.PsTextSearchService = void 0;
-const whitespace = /\s/u;
-const marks = /\p{M}/gu;
+const ps_utilities_1 = require("@pallasoft/ps-utilities");
 class PsTextSearchService {
     static normalize(text) {
-        const starts = [];
-        const ends = [];
-        let folded = '';
-        let isAfterSpace = false;
-        let index = 0;
-        while (index < text.length) {
-            const char = String.fromCodePoint(text.codePointAt(index));
-            const next = index + char.length;
-            if (whitespace.test(char)) {
-                if (!isAfterSpace) {
-                    folded += ' ';
-                    starts.push(index);
-                    ends.push(next);
-                }
-                isAfterSpace = true;
-            }
-            else {
-                const plain = char.toLowerCase().normalize('NFD').replace(marks, '');
-                for (let at = 0; at < plain.length; at += 1) {
-                    folded += plain[at];
-                    starts.push(index);
-                    ends.push(next);
-                }
-                isAfterSpace = false;
-            }
-            index = next;
-        }
-        return { ends, starts, text: folded };
+        return ps_utilities_1.Common.TextSearchService.normalize(text);
     }
     static find(text, query) {
-        const needle = PsTextSearchService.normalize(query.trim()).text;
-        if (needle.length === 0)
-            return [];
-        const haystack = PsTextSearchService.normalize(text);
-        const matches = [];
-        let from = haystack.text.indexOf(needle);
-        while (from !== -1) {
-            matches.push({
-                end: haystack.ends[from + needle.length - 1],
-                start: haystack.starts[from],
-            });
-            from = haystack.text.indexOf(needle, from + needle.length);
-        }
-        return matches;
+        return ps_utilities_1.Common.TextSearchService.find(text, query);
     }
     static findInItems(items, query) {
-        const offsets = [];
-        let joined = '';
-        items.forEach((item) => {
-            offsets.push(joined.length);
-            joined += item.isBreakAfter ? `${item.text} ` : item.text;
-        });
-        return PsTextSearchService.find(joined, query).map((match) => {
-            const parts = [];
-            items.forEach((item, itemIndex) => {
-                const start = Math.max(match.start, offsets[itemIndex]) - offsets[itemIndex];
-                const end = Math.min(match.end, offsets[itemIndex] + item.text.length) - offsets[itemIndex];
-                if (end > start)
-                    parts.push({ end, itemIndex, start });
-            });
-            return { parts };
-        });
+        return ps_utilities_1.Common.TextSearchService.findInItems(items, query);
     }
     static segments(text, matches, firstIndex = 0) {
-        const segments = [];
-        let cursor = 0;
-        matches.forEach((match, index) => {
-            if (match.start > cursor)
-                segments.push({ isMatch: false, matchIndex: null, text: text.slice(cursor, match.start) });
-            segments.push({
-                isMatch: true,
-                matchIndex: firstIndex + index,
-                text: text.slice(match.start, match.end),
-            });
-            cursor = match.end;
-        });
-        if (cursor < text.length)
-            segments.push({ isMatch: false, matchIndex: null, text: text.slice(cursor) });
-        return segments;
+        return ps_utilities_1.Common.TextSearchService.segments(text, matches, firstIndex);
     }
     static tableSegments(rows, query) {
         let offset = 0;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@pallasoft/ps-file-components",
-	"version": "2.4.0",
+	"version": "2.4.1",
 	"private": false,
 	"main": "./dist/index.js",
 	"module": "./dist/esm/index.js",
@@ -33,7 +33,7 @@
 		"@pallasoft/ps-core-components": "^2.37.0",
 		"@pallasoft/ps-icons": "^1.9.0",
 		"@pallasoft/ps-popovers": "^1.13.0",
-		"@pallasoft/ps-utilities": "^2.28.0",
+		"@pallasoft/ps-utilities": "^2.30.0",
 		"dompurify": "^3.4.17",
 		"mammoth": "^1.13.0",
 		"pdfjs-dist": "^6.3.289",