@pallasoft/ps-file-components 1.0.0 → 1.2.0

package/dist/components/index.d.ts

@@ -0,0 +1,12 @@
+export * from './viewers';
+export * from './ps-file-delete-confirm';
+export * from './ps-file-icon-button';
+export * from './ps-file-kind-icon';
+export * from './ps-file-list';
+export * from './ps-file-picker';
+export * from './ps-file-viewer';
+export * from './ps-file-viewer-button';
+export * from './ps-file-viewer-content';
+export * from './ps-progress-bar';
+export * from './ps-upload-modal';
+export * from './ps-upload-row';

package/dist/components/index.js

@@ -0,0 +1,28 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+__exportStar(require("./viewers"), exports);
+__exportStar(require("./ps-file-delete-confirm"), exports);
+__exportStar(require("./ps-file-icon-button"), exports);
+__exportStar(require("./ps-file-kind-icon"), exports);
+__exportStar(require("./ps-file-list"), exports);
+__exportStar(require("./ps-file-picker"), exports);
+__exportStar(require("./ps-file-viewer"), exports);
+__exportStar(require("./ps-file-viewer-button"), exports);
+__exportStar(require("./ps-file-viewer-content"), exports);
+__exportStar(require("./ps-progress-bar"), exports);
+__exportStar(require("./ps-upload-modal"), exports);
+__exportStar(require("./ps-upload-row"), exports);

package/dist/components/ps-file-delete-confirm.js

@@ -4,5 +4,5 @@ exports.PsFileDeleteConfirm = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const ps_core_components_1 = require("@pallasoft/ps-core-components");
 const ps_popovers_1 = require("@pallasoft/ps-popovers");
-const PsFileDeleteConfirm = ({ fileName, isDeleting, isOpen, labels, onCancel, onConfirm, }) => ((0, jsx_runtime_1.jsx)(ps_popovers_1.PsModal, { eyebrow: fileName, isOpen: isOpen, onClose: onCancel, size: 'sm', title: labels.deleteConfirm, children: (0, jsx_runtime_1.jsxs)("div", { className: 'flex flex-col gap-5', children: [(0, jsx_runtime_1.jsx)("p", { className: 'text-sm text-ink/70', children: labels.deleteConfirmBody }), (0, jsx_runtime_1.jsxs)("div", { className: 'flex justify-end gap-2', children: [(0, jsx_runtime_1.jsx)(ps_core_components_1.PsButton, { disabled: isDeleting, onClick: onCancel, type: 'button', variant: 'ghost', children: labels.deleteCancel }), (0, jsx_runtime_1.jsx)(ps_core_components_1.PsButton, { isLoading: isDeleting, onClick: onConfirm, type: 'button', variant: 'danger', children: labels.delete })] })] }) }));
+const PsFileDeleteConfirm = ({ fileName, isDeleting, isOpen, labels, onCancel, onConfirm, }) => ((0, jsx_runtime_1.jsx)(ps_popovers_1.PsModal, { eyebrow: fileName, isOpen: isOpen, onClose: onCancel, size: 'sm', title: labels.deleteConfirm, children: (0, jsx_runtime_1.jsxs)("div", { className: 'flex flex-col gap-5', children: [(0, jsx_runtime_1.jsxs)("p", { className: 'text-sm text-ink/70', children: [(0, jsx_runtime_1.jsx)("span", { className: 'font-medium text-ink', children: fileName }), " ", labels.deleteConfirmBody] }), (0, jsx_runtime_1.jsxs)("div", { className: 'flex justify-end gap-2 border-t border-line pt-4', children: [(0, jsx_runtime_1.jsx)(ps_core_components_1.PsButton, { disabled: isDeleting, onClick: onCancel, type: 'button', variant: 'ghost', children: labels.deleteCancel }), (0, jsx_runtime_1.jsx)(ps_core_components_1.PsButton, { isLoading: isDeleting, onClick: onConfirm, type: 'button', variant: 'danger', children: labels.delete })] })] }) }));
 exports.PsFileDeleteConfirm = PsFileDeleteConfirm;

package/dist/components/ps-file-icon-button.d.ts

@@ -0,0 +1,12 @@
+import { type PsIconKey } from '@pallasoft/ps-icons';
+import type { PsFileIconButtonTone } from '../models/ps-file-icon-button-tone';
+export interface PsFileIconButtonProps {
+    disabled?: boolean;
+    href?: string;
+    download?: string;
+    iconKey: PsIconKey;
+    label: string;
+    onClick?: () => void;
+    tone?: PsFileIconButtonTone;
+}
+export declare const PsFileIconButton: ({ disabled, download, href, iconKey, label, onClick, tone, }: PsFileIconButtonProps) => import("react").JSX.Element;

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

@@ -0,0 +1,13 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.PsFileIconButton = 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_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 inline-flex h-8 w-8 shrink-0 items-center justify-center rounded-full text-ink/55 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: 'h-4 w-4', 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 }));
+};
+exports.PsFileIconButton = PsFileIconButton;

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

@@ -2,12 +2,12 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.PsFileList = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
-const ps_core_components_1 = require("@pallasoft/ps-core-components");
 const ps_icons_1 = require("@pallasoft/ps-icons");
 const ps_file_kind_1 = require("../constants/ps-file-kind");
 const ps_file_list_labels_1 = require("../constants/ps-file-list-labels");
 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 text = { ...ps_file_list_labels_1.PsFileListLabels, ...labels };
@@ -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.jsx)("a", { "aria-label": `${text.download} ${file.name}`, className: 'ps-focus-ring inline-flex h-9 w-9 shrink-0 items-center justify-center rounded-full text-ink/55 transition hover:bg-primary-soft/60 hover:text-primary', download: file.name, href: file.downloadUrl === undefined ? file.url : file.downloadUrl, children: (0, jsx_runtime_1.jsx)(ps_icons_1.PsIcon, { "aria-hidden": 'true', className: 'h-4 w-4', iconKey: ps_icons_1.PsIconKey.Download }) }), onDelete ? ((0, jsx_runtime_1.jsx)(ps_core_components_1.PsButton, { "aria-label": `${text.delete} ${file.name}`, className: 'h-9 w-9 shrink-0 rounded-full p-0', disabled: busyIds.includes(file.id), onClick: () => onDelete(file), size: 'compact', type: 'button', variant: 'ghost', children: (0, jsx_runtime_1.jsx)(ps_icons_1.PsIcon, { "aria-hidden": 'true', className: 'h-4 w-4', iconKey: ps_icons_1.PsIconKey.Trash }) })) : 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}` }), 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-viewer-button.d.ts

@@ -1,10 +1,11 @@
 import type { ReactNode } from 'react';
+import type { PsFileViewerButtonTone } from '../models/ps-file-viewer-button-tone';
 export interface PsFileViewerButtonProps {
     children: ReactNode;
     className?: string;
     disabled?: boolean;
     label: string;
     onClick: () => void;
-    tone?: 'danger' | 'default';
+    tone?: PsFileViewerButtonTone;
 }
 export declare const PsFileViewerButton: ({ children, className, disabled, label, onClick, tone, }: PsFileViewerButtonProps) => import("react").JSX.Element;

package/dist/components/ps-progress-bar.d.ts

@@ -1,7 +1,8 @@
+import type { PsProgressTone } from '../models/ps-progress-tone';
 export interface PsProgressBarProps {
     className?: string;
     label: string;
-    tone?: 'danger' | 'primary' | 'success';
+    tone?: PsProgressTone;
     value: number;
 }
 export declare const PsProgressBar: ({ className, label, tone, value, }: PsProgressBarProps) => import("react").JSX.Element;

package/dist/components/ps-progress-bar.js

@@ -3,13 +3,9 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.PsProgressBar = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const ps_design_system_1 = require("@pallasoft/ps-design-system");
-const toneClassNames = {
-    danger: 'bg-danger',
-    primary: 'bg-primary',
-    success: 'bg-success',
-};
+const ps_progress_tone_classes_1 = require("../constants/ps-progress-tone-classes");
 const PsProgressBar = ({ className, label, tone = 'primary', value, }) => {
     const percent = Math.round(Math.min(1, Math.max(0, value)) * 100);
-    return ((0, jsx_runtime_1.jsx)("div", { "aria-label": label, "aria-valuemax": 100, "aria-valuemin": 0, "aria-valuenow": percent, className: ps_design_system_1.PallasoftClassNameService.merge('h-1.5 w-full overflow-hidden rounded-full bg-line/70', className), role: 'progressbar', children: (0, jsx_runtime_1.jsx)("div", { className: ps_design_system_1.PallasoftClassNameService.merge('h-full rounded-full transition-[width] duration-200 ease-out', toneClassNames[tone]), style: { width: `${percent}%` } }) }));
+    return ((0, jsx_runtime_1.jsx)("div", { "aria-label": label, "aria-valuemax": 100, "aria-valuemin": 0, "aria-valuenow": percent, className: ps_design_system_1.PallasoftClassNameService.merge('h-1.5 w-full overflow-hidden rounded-full bg-line/70', className), role: 'progressbar', children: (0, jsx_runtime_1.jsx)("div", { className: ps_design_system_1.PallasoftClassNameService.merge('h-full rounded-full transition-[width] duration-200 ease-out', ps_progress_tone_classes_1.PsProgressToneClasses[tone]), style: { width: `${percent}%` } }) }));
 };
 exports.PsProgressBar = PsProgressBar;

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

@@ -6,14 +6,11 @@ const ps_core_components_1 = require("@pallasoft/ps-core-components");
 const ps_popovers_1 = require("@pallasoft/ps-popovers");
 const ps_upload_labels_1 = require("../constants/ps-upload-labels");
 const ps_upload_queue_service_1 = require("../services/ps-upload-queue-service");
-const ps_progress_bar_1 = require("./ps-progress-bar");
 const ps_upload_row_1 = require("./ps-upload-row");
 const PsUploadModal = ({ isOpen, labels, onClose, queue }) => {
     const text = { ...ps_upload_labels_1.PsUploadLabels, ...labels };
     const summary = ps_upload_queue_service_1.PsUploadQueueService.summary(queue.items);
-    const overall = queue.items.length === 0
-        ? 0
-        : queue.items.reduce((total, item) => total + item.progress, 0) / queue.items.length;
-    return ((0, jsx_runtime_1.jsx)(ps_popovers_1.PsModal, { eyebrow: `${summary.done} / ${summary.total}`, isOpen: isOpen, onClose: onClose, size: 'md', title: queue.isBusy ? text.title : text.titleDone, children: (0, jsx_runtime_1.jsxs)("div", { className: 'flex flex-col gap-4', children: [(0, jsx_runtime_1.jsx)(ps_progress_bar_1.PsProgressBar, { label: text.title, tone: summary.failed > 0 ? 'danger' : queue.isBusy ? 'primary' : 'success', value: overall }), (0, jsx_runtime_1.jsx)("ul", { className: 'flex max-h-[50vh] flex-col divide-y divide-line/70 overflow-y-auto', children: queue.items.map((item) => ((0, jsx_runtime_1.jsx)(ps_upload_row_1.PsUploadRow, { item: item, labels: text, onCancel: () => queue.cancel(item.id), onRemove: () => queue.remove(item.id), onRetry: () => queue.retry(item.id) }, item.id))) }), (0, jsx_runtime_1.jsx)("div", { className: 'flex justify-end', children: (0, jsx_runtime_1.jsx)(ps_core_components_1.PsButton, { onClick: onClose, type: 'button', variant: queue.isBusy ? 'ghost' : 'primary', children: text.close }) })] }) }));
+    const title = queue.isBusy ? text.title : summary.failed > 0 ? text.titleFailed : text.titleDone;
+    return ((0, jsx_runtime_1.jsx)(ps_popovers_1.PsModal, { isOpen: isOpen, onClose: onClose, size: 'md', title: title, children: (0, jsx_runtime_1.jsxs)("div", { className: 'flex flex-col gap-5', children: [(0, jsx_runtime_1.jsx)("ul", { className: 'flex max-h-[50vh] flex-col gap-2 overflow-y-auto', children: queue.items.map((item) => ((0, jsx_runtime_1.jsx)(ps_upload_row_1.PsUploadRow, { item: item, labels: text, onCancel: () => queue.cancel(item.id), onRemove: () => queue.remove(item.id), onRetry: () => queue.retry(item.id) }, item.id))) }), (0, jsx_runtime_1.jsxs)("div", { className: 'flex flex-wrap items-center justify-end gap-2 border-t border-line pt-4', children: [queue.isBusy ? ((0, jsx_runtime_1.jsx)(ps_core_components_1.PsButton, { onClick: () => queue.items.forEach((item) => queue.cancel(item.id)), type: 'button', variant: 'ghost', children: text.cancelAll })) : null, (0, jsx_runtime_1.jsx)(ps_core_components_1.PsButton, { onClick: onClose, type: 'button', variant: 'primary', children: text.finish })] })] }) }));
 };
 exports.PsUploadModal = PsUploadModal;

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

@@ -2,27 +2,23 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.PsUploadRow = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
-const ps_core_components_1 = require("@pallasoft/ps-core-components");
 const ps_icons_1 = require("@pallasoft/ps-icons");
 const ps_upload_status_1 = require("../constants/ps-upload-status");
 const ps_upload_status_tones_1 = require("../constants/ps-upload-status-tones");
 const ps_file_size_service_1 = require("../services/ps-file-size-service");
 const ps_upload_queue_service_1 = require("../services/ps-upload-queue-service");
+const ps_file_icon_button_1 = require("./ps-file-icon-button");
 const ps_file_kind_icon_1 = require("./ps-file-kind-icon");
 const ps_progress_bar_1 = require("./ps-progress-bar");
 const PsUploadRow = ({ item, labels, onCancel, onRemove, onRetry }) => {
     const isActive = ps_upload_queue_service_1.PsUploadQueueService.isActive(item);
-    const canRetry = item.status === ps_upload_status_1.PsUploadStatus.failed || item.status === ps_upload_status_1.PsUploadStatus.cancelled;
-    const percent = Math.round(item.progress * 100);
-    const statusText = item.status === ps_upload_status_1.PsUploadStatus.uploading
-        ? `${labels.uploading} ${percent}%`
+    const isProblem = item.status === ps_upload_status_1.PsUploadStatus.failed || item.status === ps_upload_status_1.PsUploadStatus.cancelled;
+    const size = ps_file_size_service_1.PsFileSizeService.format(item.file.size);
+    const status = item.status === ps_upload_status_1.PsUploadStatus.uploading
+        ? `${labels.uploading} · ${Math.round(item.progress * 100)}%`
         : 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 py-3', 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.jsxs)("div", { className: 'flex items-baseline justify-between gap-3', children: [(0, jsx_runtime_1.jsx)("p", { className: 'truncate text-sm font-medium text-ink', children: item.file.name }), (0, jsx_runtime_1.jsx)("span", { className: 'shrink-0 text-xs text-ink/55', children: ps_file_size_service_1.PsFileSizeService.format(item.file.size) })] }), (0, jsx_runtime_1.jsx)(ps_progress_bar_1.PsProgressBar, { label: item.file.name, tone: ps_upload_status_tones_1.PsUploadStatusTones[item.status], value: item.status === ps_upload_status_1.PsUploadStatus.failed ? 1 : item.progress }), (0, jsx_runtime_1.jsxs)("p", { className: item.status === ps_upload_status_1.PsUploadStatus.failed || item.status === ps_upload_status_1.PsUploadStatus.cancelled
-                            ? 'text-xs text-danger'
-                            : item.status === ps_upload_status_1.PsUploadStatus.done
-                                ? 'flex items-center gap-1 text-xs text-success'
-                                : 'text-xs text-ink/60', role: item.status === ps_upload_status_1.PsUploadStatus.failed ? 'alert' : undefined, children: [item.status === ps_upload_status_1.PsUploadStatus.done ? ((0, jsx_runtime_1.jsx)(ps_icons_1.PsIcon, { "aria-hidden": 'true', className: 'h-3.5 w-3.5', iconKey: ps_icons_1.PsIconKey.Check })) : null, statusText] })] }), (0, jsx_runtime_1.jsxs)("div", { className: 'flex shrink-0 items-center gap-1', children: [canRetry ? ((0, jsx_runtime_1.jsx)(ps_core_components_1.PsButton, { leadingIcon: (0, jsx_runtime_1.jsx)(ps_icons_1.PsIcon, { "aria-hidden": 'true', className: 'h-4 w-4', iconKey: ps_icons_1.PsIconKey.Refresh }), onClick: onRetry, size: 'compact', type: 'button', variant: 'ghost', children: labels.retry })) : null, (0, jsx_runtime_1.jsx)(ps_core_components_1.PsButton, { "aria-label": `${isActive ? labels.cancel : labels.remove} ${item.file.name}`, onClick: isActive ? onCancel : onRemove, size: 'compact', type: 'button', variant: 'ghost', children: isActive ? labels.cancel : labels.remove })] })] }));
+    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-16 shrink-0 items-center justify-end gap-0.5', 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: 'inline-flex h-8 w-8 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/components/viewers/index.d.ts

@@ -0,0 +1,8 @@
+export * from './ps-highlighted-text';
+export * from './ps-image-viewer';
+export * from './ps-media-viewer';
+export * from './ps-pdf-page';
+export * from './ps-pdf-thumbnail';
+export * from './ps-pdf-viewer';
+export * from './ps-text-viewer';
+export * from './ps-unsupported-viewer';

package/dist/components/viewers/index.js

@@ -0,0 +1,24 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+__exportStar(require("./ps-highlighted-text"), exports);
+__exportStar(require("./ps-image-viewer"), exports);
+__exportStar(require("./ps-media-viewer"), exports);
+__exportStar(require("./ps-pdf-page"), exports);
+__exportStar(require("./ps-pdf-thumbnail"), exports);
+__exportStar(require("./ps-pdf-viewer"), exports);
+__exportStar(require("./ps-text-viewer"), exports);
+__exportStar(require("./ps-unsupported-viewer"), exports);

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

@@ -21,10 +21,6 @@ const PsPdfViewer = ({ activeMatch, file, labels, onMatchCount, pdfWorkerSrc, qu
         let opened = null;
         setDocument(null);
         setHasFailed(false);
-        if (pdfWorkerSrc === undefined) {
-            setHasFailed(true);
-            return;
-        }
         ps_pdf_service_1.PsPdfService.open(file.url, pdfWorkerSrc)
             .then(async (loaded) => {
             opened = loaded;

package/dist/constants/index.d.ts

@@ -0,0 +1,15 @@
+export * from './ps-file-icon-button-classes';
+export * from './ps-file-kind';
+export * from './ps-file-kind-icons';
+export * from './ps-file-list-labels';
+export * from './ps-file-picker-labels';
+export * from './ps-file-type-config';
+export * from './ps-file-viewer-config';
+export * from './ps-file-viewer-kinds';
+export * from './ps-file-viewer-labels';
+export * from './ps-progress-tone-classes';
+export * from './ps-upload-labels';
+export * from './ps-upload-messages';
+export * from './ps-upload-queue-config';
+export * from './ps-upload-status';
+export * from './ps-upload-status-tones';

package/dist/constants/index.js

@@ -0,0 +1,31 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+__exportStar(require("./ps-file-icon-button-classes"), exports);
+__exportStar(require("./ps-file-kind"), exports);
+__exportStar(require("./ps-file-kind-icons"), exports);
+__exportStar(require("./ps-file-list-labels"), exports);
+__exportStar(require("./ps-file-picker-labels"), exports);
+__exportStar(require("./ps-file-type-config"), exports);
+__exportStar(require("./ps-file-viewer-config"), exports);
+__exportStar(require("./ps-file-viewer-kinds"), exports);
+__exportStar(require("./ps-file-viewer-labels"), exports);
+__exportStar(require("./ps-progress-tone-classes"), exports);
+__exportStar(require("./ps-upload-labels"), exports);
+__exportStar(require("./ps-upload-messages"), exports);
+__exportStar(require("./ps-upload-queue-config"), exports);
+__exportStar(require("./ps-upload-status"), exports);
+__exportStar(require("./ps-upload-status-tones"), exports);

package/dist/constants/ps-file-icon-button-classes.d.ts

@@ -0,0 +1,2 @@
+import type { PsFileIconButtonTone } from '../models/ps-file-icon-button-tone';
+export declare const PsFileIconButtonClasses: Record<PsFileIconButtonTone, string>;

package/dist/constants/ps-file-icon-button-classes.js

@@ -0,0 +1,7 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.PsFileIconButtonClasses = void 0;
+exports.PsFileIconButtonClasses = {
+    danger: 'hover:bg-danger-soft hover:text-danger',
+    neutral: 'hover:bg-primary-soft/60 hover:text-primary',
+};

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

@@ -2,8 +2,8 @@ export declare const PsFileViewerLabels: {
     readonly close: "Close";
     readonly delete: "Delete";
     readonly deleteConfirm: "Delete file";
-    readonly deleteConfirmBody: "This file will be removed. This cannot be undone from here.";
-    readonly deleteCancel: "Keep file";
+    readonly deleteConfirmBody: "will be deleted. You cannot undo this.";
+    readonly deleteCancel: "Cancel";
     readonly download: "Download";
     readonly loadFailed: "This file could not be opened.";
     readonly next: "Next file";

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

@@ -5,8 +5,8 @@ exports.PsFileViewerLabels = {
     close: 'Close',
     delete: 'Delete',
     deleteConfirm: 'Delete file',
-    deleteConfirmBody: 'This file will be removed. This cannot be undone from here.',
-    deleteCancel: 'Keep file',
+    deleteConfirmBody: 'will be deleted. You cannot undo this.',
+    deleteCancel: 'Cancel',
     download: 'Download',
     loadFailed: 'This file could not be opened.',
     next: 'Next file',

package/dist/constants/ps-progress-tone-classes.d.ts

@@ -0,0 +1,2 @@
+import type { PsProgressTone } from '../models/ps-progress-tone';
+export declare const PsProgressToneClasses: Record<PsProgressTone, string>;

package/dist/constants/ps-progress-tone-classes.js

@@ -0,0 +1,8 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.PsProgressToneClasses = void 0;
+exports.PsProgressToneClasses = {
+    danger: 'bg-danger',
+    primary: 'bg-primary',
+    success: 'bg-success',
+};

package/dist/constants/ps-upload-labels.d.ts

@@ -1,14 +1,16 @@
 export declare const PsUploadLabels: {
-    readonly cancel: "Cancel";
+    readonly cancel: "Cancel upload";
+    readonly cancelAll: "Cancel uploads";
     readonly cancelled: "Cancelled";
-    readonly close: "Close";
     readonly done: "Uploaded";
     readonly failed: "Failed";
+    readonly finish: "Done";
     readonly processing: "Saving";
-    readonly remove: "Remove";
-    readonly retry: "Retry";
+    readonly remove: "Remove from list";
+    readonly retry: "Try again";
     readonly title: "Uploading files";
-    readonly titleDone: "Upload finished";
+    readonly titleDone: "Files uploaded";
+    readonly titleFailed: "Some files did not upload";
     readonly uploading: "Uploading";
     readonly waiting: "Waiting";
 };

package/dist/constants/ps-upload-labels.js

@@ -2,16 +2,18 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.PsUploadLabels = void 0;
 exports.PsUploadLabels = {
-    cancel: 'Cancel',
+    cancel: 'Cancel upload',
+    cancelAll: 'Cancel uploads',
     cancelled: 'Cancelled',
-    close: 'Close',
     done: 'Uploaded',
     failed: 'Failed',
+    finish: 'Done',
     processing: 'Saving',
-    remove: 'Remove',
-    retry: 'Retry',
+    remove: 'Remove from list',
+    retry: 'Try again',
     title: 'Uploading files',
-    titleDone: 'Upload finished',
+    titleDone: 'Files uploaded',
+    titleFailed: 'Some files did not upload',
     uploading: 'Uploading',
     waiting: 'Waiting',
 };

package/dist/constants/ps-upload-status-tones.d.ts

@@ -1,2 +1,3 @@
+import type { PsProgressTone } from '../models/ps-progress-tone';
 import { PsUploadStatus } from './ps-upload-status';
-export declare const PsUploadStatusTones: Record<PsUploadStatus, 'danger' | 'primary' | 'success'>;
+export declare const PsUploadStatusTones: Record<PsUploadStatus, PsProgressTone>;

package/dist/esm/components/index.js

@@ -0,0 +1,12 @@
+export * from './viewers';
+export * from './ps-file-delete-confirm';
+export * from './ps-file-icon-button';
+export * from './ps-file-kind-icon';
+export * from './ps-file-list';
+export * from './ps-file-picker';
+export * from './ps-file-viewer';
+export * from './ps-file-viewer-button';
+export * from './ps-file-viewer-content';
+export * from './ps-progress-bar';
+export * from './ps-upload-modal';
+export * from './ps-upload-row';

package/dist/esm/components/ps-file-delete-confirm.js

@@ -1,4 +1,4 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { PsButton } from '@pallasoft/ps-core-components';
 import { PsModal } from '@pallasoft/ps-popovers';
-export const PsFileDeleteConfirm = ({ fileName, isDeleting, isOpen, labels, onCancel, onConfirm, }) => (_jsx(PsModal, { eyebrow: fileName, isOpen: isOpen, onClose: onCancel, size: 'sm', title: labels.deleteConfirm, children: _jsxs("div", { className: 'flex flex-col gap-5', children: [_jsx("p", { className: 'text-sm text-ink/70', children: labels.deleteConfirmBody }), _jsxs("div", { className: 'flex justify-end gap-2', children: [_jsx(PsButton, { disabled: isDeleting, onClick: onCancel, type: 'button', variant: 'ghost', children: labels.deleteCancel }), _jsx(PsButton, { isLoading: isDeleting, onClick: onConfirm, type: 'button', variant: 'danger', children: labels.delete })] })] }) }));
+export const PsFileDeleteConfirm = ({ fileName, isDeleting, isOpen, labels, onCancel, onConfirm, }) => (_jsx(PsModal, { eyebrow: fileName, isOpen: isOpen, onClose: onCancel, size: 'sm', title: labels.deleteConfirm, children: _jsxs("div", { className: 'flex flex-col gap-5', children: [_jsxs("p", { className: 'text-sm text-ink/70', children: [_jsx("span", { className: 'font-medium text-ink', children: fileName }), " ", labels.deleteConfirmBody] }), _jsxs("div", { className: 'flex justify-end gap-2 border-t border-line pt-4', children: [_jsx(PsButton, { disabled: isDeleting, onClick: onCancel, type: 'button', variant: 'ghost', children: labels.deleteCancel }), _jsx(PsButton, { isLoading: isDeleting, onClick: onConfirm, type: 'button', variant: 'danger', children: labels.delete })] })] }) }));

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

@@ -0,0 +1,9 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+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 inline-flex h-8 w-8 shrink-0 items-center justify-center rounded-full text-ink/55 transition disabled:pointer-events-none disabled:opacity-40', PsFileIconButtonClasses[tone]);
+    const icon = _jsx(PsIcon, { "aria-hidden": 'true', className: 'h-4 w-4', 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

@@ -1,10 +1,10 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { PsButton } from '@pallasoft/ps-core-components';
-import { PsIcon, PsIconKey } from '@pallasoft/ps-icons';
+import { PsIconKey } from '@pallasoft/ps-icons';
 import { PsFileKind } from '../constants/ps-file-kind';
 import { PsFileListLabels } from '../constants/ps-file-list-labels';
 import { PsFileSizeService } from '../services/ps-file-size-service';
 import { PsFileTypeService } from '../services/ps-file-type-service';
+import { PsFileIconButton } from './ps-file-icon-button';
 import { PsFileKindIcon } from './ps-file-kind-icon';
 export const PsFileList = ({ busyIds = [], files, formatDate, labels, onDelete, onOpen, }) => {
     const text = { ...PsFileListLabels, ...labels };
@@ -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] })] }), _jsx("a", { "aria-label": `${text.download} ${file.name}`, className: 'ps-focus-ring inline-flex h-9 w-9 shrink-0 items-center justify-center rounded-full text-ink/55 transition hover:bg-primary-soft/60 hover:text-primary', download: file.name, href: file.downloadUrl === undefined ? file.url : file.downloadUrl, children: _jsx(PsIcon, { "aria-hidden": 'true', className: 'h-4 w-4', iconKey: PsIconKey.Download }) }), onDelete ? (_jsx(PsButton, { "aria-label": `${text.delete} ${file.name}`, className: 'h-9 w-9 shrink-0 rounded-full p-0', disabled: busyIds.includes(file.id), onClick: () => onDelete(file), size: 'compact', type: 'button', variant: 'ghost', children: _jsx(PsIcon, { "aria-hidden": 'true', className: 'h-4 w-4', iconKey: PsIconKey.Trash }) })) : 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-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}` }), 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-progress-bar.js

@@ -1,11 +1,7 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { PallasoftClassNameService } from '@pallasoft/ps-design-system';
-const toneClassNames = {
-    danger: 'bg-danger',
-    primary: 'bg-primary',
-    success: 'bg-success',
-};
+import { PsProgressToneClasses } from '../constants/ps-progress-tone-classes';
 export const PsProgressBar = ({ className, label, tone = 'primary', value, }) => {
     const percent = Math.round(Math.min(1, Math.max(0, value)) * 100);
-    return (_jsx("div", { "aria-label": label, "aria-valuemax": 100, "aria-valuemin": 0, "aria-valuenow": percent, className: PallasoftClassNameService.merge('h-1.5 w-full overflow-hidden rounded-full bg-line/70', className), role: 'progressbar', children: _jsx("div", { className: PallasoftClassNameService.merge('h-full rounded-full transition-[width] duration-200 ease-out', toneClassNames[tone]), style: { width: `${percent}%` } }) }));
+    return (_jsx("div", { "aria-label": label, "aria-valuemax": 100, "aria-valuemin": 0, "aria-valuenow": percent, className: PallasoftClassNameService.merge('h-1.5 w-full overflow-hidden rounded-full bg-line/70', className), role: 'progressbar', children: _jsx("div", { className: PallasoftClassNameService.merge('h-full rounded-full transition-[width] duration-200 ease-out', PsProgressToneClasses[tone]), style: { width: `${percent}%` } }) }));
 };

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

@@ -3,13 +3,10 @@ import { PsButton } from '@pallasoft/ps-core-components';
 import { PsModal } from '@pallasoft/ps-popovers';
 import { PsUploadLabels } from '../constants/ps-upload-labels';
 import { PsUploadQueueService } from '../services/ps-upload-queue-service';
-import { PsProgressBar } from './ps-progress-bar';
 import { PsUploadRow } from './ps-upload-row';
 export const PsUploadModal = ({ isOpen, labels, onClose, queue }) => {
     const text = { ...PsUploadLabels, ...labels };
     const summary = PsUploadQueueService.summary(queue.items);
-    const overall = queue.items.length === 0
-        ? 0
-        : queue.items.reduce((total, item) => total + item.progress, 0) / queue.items.length;
-    return (_jsx(PsModal, { eyebrow: `${summary.done} / ${summary.total}`, isOpen: isOpen, onClose: onClose, size: 'md', title: queue.isBusy ? text.title : text.titleDone, children: _jsxs("div", { className: 'flex flex-col gap-4', children: [_jsx(PsProgressBar, { label: text.title, tone: summary.failed > 0 ? 'danger' : queue.isBusy ? 'primary' : 'success', value: overall }), _jsx("ul", { className: 'flex max-h-[50vh] flex-col divide-y divide-line/70 overflow-y-auto', children: queue.items.map((item) => (_jsx(PsUploadRow, { item: item, labels: text, onCancel: () => queue.cancel(item.id), onRemove: () => queue.remove(item.id), onRetry: () => queue.retry(item.id) }, item.id))) }), _jsx("div", { className: 'flex justify-end', children: _jsx(PsButton, { onClick: onClose, type: 'button', variant: queue.isBusy ? 'ghost' : 'primary', children: text.close }) })] }) }));
+    const title = queue.isBusy ? text.title : summary.failed > 0 ? text.titleFailed : text.titleDone;
+    return (_jsx(PsModal, { isOpen: isOpen, onClose: onClose, size: 'md', title: title, children: _jsxs("div", { className: 'flex flex-col gap-5', children: [_jsx("ul", { className: 'flex max-h-[50vh] flex-col gap-2 overflow-y-auto', children: queue.items.map((item) => (_jsx(PsUploadRow, { item: item, labels: text, onCancel: () => queue.cancel(item.id), onRemove: () => queue.remove(item.id), onRetry: () => queue.retry(item.id) }, item.id))) }), _jsxs("div", { className: 'flex flex-wrap items-center justify-end gap-2 border-t border-line pt-4', children: [queue.isBusy ? (_jsx(PsButton, { onClick: () => queue.items.forEach((item) => queue.cancel(item.id)), type: 'button', variant: 'ghost', children: text.cancelAll })) : null, _jsx(PsButton, { onClick: onClose, type: 'button', variant: 'primary', children: text.finish })] })] }) }));
 };

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

@@ -1,24 +1,20 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { PsButton } from '@pallasoft/ps-core-components';
 import { PsIcon, PsIconKey } from '@pallasoft/ps-icons';
 import { PsUploadStatus } from '../constants/ps-upload-status';
 import { PsUploadStatusTones } from '../constants/ps-upload-status-tones';
 import { PsFileSizeService } from '../services/ps-file-size-service';
 import { PsUploadQueueService } from '../services/ps-upload-queue-service';
+import { PsFileIconButton } from './ps-file-icon-button';
 import { PsFileKindIcon } from './ps-file-kind-icon';
 import { PsProgressBar } from './ps-progress-bar';
 export const PsUploadRow = ({ item, labels, onCancel, onRemove, onRetry }) => {
     const isActive = PsUploadQueueService.isActive(item);
-    const canRetry = item.status === PsUploadStatus.failed || item.status === PsUploadStatus.cancelled;
-    const percent = Math.round(item.progress * 100);
-    const statusText = item.status === PsUploadStatus.uploading
-        ? `${labels.uploading} ${percent}%`
+    const isProblem = item.status === PsUploadStatus.failed || item.status === PsUploadStatus.cancelled;
+    const size = PsFileSizeService.format(item.file.size);
+    const status = item.status === PsUploadStatus.uploading
+        ? `${labels.uploading} · ${Math.round(item.progress * 100)}%`
         : item.status === PsUploadStatus.failed && item.error
             ? item.error
             : labels[item.status];
-    return (_jsxs("li", { className: 'flex items-center gap-3 py-3', 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: [_jsxs("div", { className: 'flex items-baseline justify-between gap-3', children: [_jsx("p", { className: 'truncate text-sm font-medium text-ink', children: item.file.name }), _jsx("span", { className: 'shrink-0 text-xs text-ink/55', children: PsFileSizeService.format(item.file.size) })] }), _jsx(PsProgressBar, { label: item.file.name, tone: PsUploadStatusTones[item.status], value: item.status === PsUploadStatus.failed ? 1 : item.progress }), _jsxs("p", { className: item.status === PsUploadStatus.failed || item.status === PsUploadStatus.cancelled
-                            ? 'text-xs text-danger'
-                            : item.status === PsUploadStatus.done
-                                ? 'flex items-center gap-1 text-xs text-success'
-                                : 'text-xs text-ink/60', role: item.status === PsUploadStatus.failed ? 'alert' : undefined, children: [item.status === PsUploadStatus.done ? (_jsx(PsIcon, { "aria-hidden": 'true', className: 'h-3.5 w-3.5', iconKey: PsIconKey.Check })) : null, statusText] })] }), _jsxs("div", { className: 'flex shrink-0 items-center gap-1', children: [canRetry ? (_jsx(PsButton, { leadingIcon: _jsx(PsIcon, { "aria-hidden": 'true', className: 'h-4 w-4', iconKey: PsIconKey.Refresh }), onClick: onRetry, size: 'compact', type: 'button', variant: 'ghost', children: labels.retry })) : null, _jsx(PsButton, { "aria-label": `${isActive ? labels.cancel : labels.remove} ${item.file.name}`, onClick: isActive ? onCancel : onRemove, size: 'compact', type: 'button', variant: 'ghost', children: isActive ? labels.cancel : labels.remove })] })] }));
+    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-16 shrink-0 items-center justify-end gap-0.5', 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: 'inline-flex h-8 w-8 items-center justify-center text-success', children: _jsx(PsIcon, { "aria-label": labels.done, className: 'h-4 w-4', iconKey: PsIconKey.Check }) })) : (_jsx(PsFileIconButton, { iconKey: PsIconKey.Close, label: `${labels.remove} ${item.file.name}`, onClick: onRemove }))] })] }));
 };

package/dist/esm/components/viewers/index.js

@@ -0,0 +1,8 @@
+export * from './ps-highlighted-text';
+export * from './ps-image-viewer';
+export * from './ps-media-viewer';
+export * from './ps-pdf-page';
+export * from './ps-pdf-thumbnail';
+export * from './ps-pdf-viewer';
+export * from './ps-text-viewer';
+export * from './ps-unsupported-viewer';

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

@@ -18,10 +18,6 @@ export const PsPdfViewer = ({ activeMatch, file, labels, onMatchCount, pdfWorker
         let opened = null;
         setDocument(null);
         setHasFailed(false);
-        if (pdfWorkerSrc === undefined) {
-            setHasFailed(true);
-            return;
-        }
         PsPdfService.open(file.url, pdfWorkerSrc)
             .then(async (loaded) => {
             opened = loaded;