@file-viewer/core 3.2.2 → 3.3.1

package/dist/browser/controller.js

@@ -1,5 +1,8 @@
-import { appendFileViewerStyle, cloneFileViewerViewState, applyFileViewerZoomAvailability, createViewer, isFileViewerShadowRoot, normalizeFileViewerUiDensity, normalizeFileViewerTheme, normalizeFileViewerStyleIsolation, syncFileViewerRenderSurfaceBackground, } from "../index.js";
-import { DEFAULT_FILE_VIEWER_SOURCE_FILENAME, createFileViewerTranslator, getExtension, normalizeFileViewerSourceUrl, hasVisibleFileViewerToolbarActions, isFileViewerZoomButtonDisabled, normalizeFileViewerToolbar, normalizeFilename, readFileViewerBuffer, resolveFileViewerSourceFilename, resolveFileViewerColorScheme, resolveFileViewerToolbarOrder, resolveFileViewerToolbarPosition, resolveVisibleFileViewerToolbar, toggleFileViewerColorScheme, wrapFileViewerFileRef, } from "../index.js";
+import { appendFileViewerStyle, cloneFileViewerViewState, applyFileViewerZoomAvailability, createViewer, isFileViewerShadowRoot, normalizeFileViewerUiDensity, normalizeFileViewerTheme, normalizeFileViewerStyleIsolation, syncFileViewerRenderSurfaceBackground, } from '../index.js';
+import { DEFAULT_FILE_VIEWER_SOURCE_FILENAME, createFileViewerTranslator, getExtension, normalizeFileViewerSourceUrl, hasVisibleFileViewerToolbarActions, isFileViewerZoomButtonDisabled, normalizeFileViewerToolbar, normalizeFilename, readFileViewerBuffer, resolveFileViewerSourceFilename, resolveFileViewerRemoteSourcePlan, resolveFileViewerColorScheme, resolveFileViewerToolbarOrder, resolveFileViewerToolbarPosition, resolveVisibleFileViewerToolbar, toggleFileViewerColorScheme, wrapFileViewerFileRef, } from '../index.js';
+import { resolveFileViewerToolbarZoomButtons } from '../lifecycle/operations.js';
+import { createToolbarFocusRestorer } from './toolbar-focus.js';
+import { createViewerSourceFeedback } from './source-feedback.js';
 const isBrowser = () => typeof window !== 'undefined' && typeof document !== 'undefined';
 const hasSource = (options = {}) => {
     return !!(options.url || options.file || options.buffer);
@@ -13,6 +16,8 @@ const toViewerSourceInput = (options = {}) => ({
     type: options.type,
     size: options.size,
 });
+// These options feed renderer selection or rendering itself. Viewer chrome,
+// fitting, watermark, and operation callbacks update in place instead.
 const RENDER_AFFECTING_VIEWER_OPTION_KEYS = [
     'theme',
     'rendererMode',
@@ -25,6 +30,7 @@ const RENDER_AFFECTING_VIEWER_OPTION_KEYS = [
     'archive',
     'chm',
     'pdf',
+    'epub',
     'docx',
     'presentation',
     'spreadsheet',
@@ -113,30 +119,43 @@ const resolveViewerSourceFilename = (source) => {
     }), source.type ? `preview.${source.type}` : DEFAULT_FILE_VIEWER_SOURCE_FILENAME);
 };
 const resolveViewerLoadSource = async (source, options = {}) => {
-    var _a, _b, _c;
+    var _a, _b, _c, _d, _e, _f, _g, _h;
     const filename = resolveViewerSourceFilename(source);
     const type = source.type || getExtension(filename);
     if (source.buffer) {
+        (_a = options.onPhase) === null || _a === void 0 ? void 0 : _a.call(options, 'reading');
         return {
             buffer: source.buffer,
             filename,
             type,
-            size: (_a = source.size) !== null && _a !== void 0 ? _a : source.buffer.byteLength,
+            size: (_b = source.size) !== null && _b !== void 0 ? _b : source.buffer.byteLength,
             url: source.url,
         };
     }
     if (source.file) {
+        (_c = options.onPhase) === null || _c === void 0 ? void 0 : _c.call(options, 'reading');
         const file = wrapFileViewerFileRef(source.file, filename);
         return {
             file,
             buffer: await readFileViewerBuffer(file),
             filename: file.name || filename,
             type: type || getExtension(file.name),
-            size: (_b = source.size) !== null && _b !== void 0 ? _b : file.size,
+            size: (_d = source.size) !== null && _d !== void 0 ? _d : file.size,
             url: source.url,
         };
     }
     if (source.url) {
+        const plan = resolveFileViewerRemoteSourcePlan({
+            url: source.url, filename, type,
+            pageHref: options.pageHref, streaming: options.streaming,
+        });
+        // A supplied transport owns authentication/acquisition and keeps its normal
+        // buffered contract. Only the default PDF URL path defers bytes to PDF.js.
+        if (!options.fetchFile && options.acceptsPdfUrl && plan.streamPdf) {
+            (_e = options.onPhase) === null || _e === void 0 ? void 0 : _e.call(options, 'streamingPdf');
+            return { url: plan.url, filename: plan.filename, type: plan.extension, size: source.size };
+        }
+        (_f = options.onPhase) === null || _f === void 0 ? void 0 : _f.call(options, 'downloading');
         const fileRef = await (options.fetchFile || defaultFetchFile)({
             url: source.url,
             signal: options.signal,
@@ -146,12 +165,13 @@ const resolveViewerLoadSource = async (source, options = {}) => {
             throw new Error('Downloaded file is empty.');
         }
         const file = wrapFileViewerFileRef(fileRef, filename);
+        (_g = options.onPhase) === null || _g === void 0 ? void 0 : _g.call(options, 'reading');
         return {
             file,
             buffer: await readFileViewerBuffer(file),
             filename: file.name || filename,
             type: type || getExtension(file.name),
-            size: (_c = source.size) !== null && _c !== void 0 ? _c : file.size,
+            size: (_h = source.size) !== null && _h !== void 0 ? _h : file.size,
             url: source.url,
         };
     }
@@ -280,9 +300,6 @@ const callApi = async (api, action, fallback) => {
     }
     return action(api);
 };
-const isAbortError = (error) => {
-    return Boolean(error && typeof error === 'object' && error.name === 'AbortError');
-};
 const DEFAULT_TOOLBAR_AVAILABILITY = {
     download: false,
     print: false,
@@ -299,6 +316,9 @@ const DEFAULT_TOOLBAR_ZOOM_STATE = {
     canZoomOut: false,
     canReset: false,
 };
+// A ShadowRoot cannot be detached. Track the exact roots created on viewer
+// hosts so a later light-DOM remount can expose its children through a slot,
+// without mistaking and clearing a ShadowRoot owned by the host application.
 const ownedViewerShadowRoots = new WeakMap();
 const WEB_VIEWER_STYLE = `
 :host,.file-viewer-web-shell{display:block;width:100%;height:100%;min-width:0;min-height:0;contain:content;--file-viewer-bg:transparent;--file-viewer-content-bg:transparent;--file-viewer-text:#172033;--file-viewer-muted:#607282;--file-viewer-font:14px/1.45 system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;--file-viewer-border:rgba(20,35,53,.08);--file-viewer-toolbar-bg:rgba(255,255,255,.92);--file-viewer-toolbar-border:rgba(20,35,53,.06);--file-viewer-toolbar-shadow:0 18px 44px rgba(15,23,42,.16);--file-viewer-toolbar-radius:999px;--file-viewer-toolbar-gap:6px;--file-viewer-toolbar-min-height:45px;--file-viewer-toolbar-padding:6px 10px;--file-viewer-toolbar-floating-min-height:42px;--file-viewer-toolbar-floating-padding:6px;--file-viewer-toolbar-floating-offset:16px;--file-viewer-group-bg:rgba(20,35,53,.035);--file-viewer-group-border:rgba(20,35,53,.08);--file-viewer-group-gap:2px;--file-viewer-group-padding:2px;--file-viewer-button-color:#40546a;--file-viewer-button-hover-bg:rgba(33,163,102,.1);--file-viewer-button-hover-color:#16774c;--file-viewer-button-disabled-color:#aab5c0;--file-viewer-button-radius:8px;--file-viewer-button-min-width:42px;--file-viewer-button-height:30px;--file-viewer-button-padding:0 10px;--file-viewer-icon-button-size:30px;--file-viewer-zoom-meter-min-width:48px;--file-viewer-zoom-meter-padding:0 8px;--file-viewer-floating-button-min-width:48px;--file-viewer-floating-button-height:32px;--file-viewer-floating-icon-button-size:32px;--file-viewer-floating-zoom-meter-min-width:54px;--file-viewer-search-input-height:30px;--file-viewer-search-input-padding:0 10px;--file-viewer-search-button-min-width:32px;--file-viewer-search-button-padding:0 8px;--file-viewer-search-count-min-width:42px;--file-viewer-floating-search-input-height:32px;--file-viewer-focus-ring:rgba(31,157,103,.22);--file-viewer-z-toolbar:20;--file-viewer-z-floating-toolbar:30}
@@ -307,6 +327,9 @@ const WEB_VIEWER_STYLE = `
 .file-viewer-web-shell{position:relative;width:100%;height:100%;min-height:0;display:flex;flex-direction:column;overflow:hidden;background:var(--file-viewer-render-surface-background,var(--file-viewer-bg));color:var(--file-viewer-text);font:var(--file-viewer-font);letter-spacing:0;box-sizing:border-box;contain:content}
 .file-viewer-web-shell[data-viewer-density="compact"]{--file-viewer-toolbar-gap:3px;--file-viewer-toolbar-min-height:34px;--file-viewer-toolbar-padding:3px 5px;--file-viewer-toolbar-floating-min-height:32px;--file-viewer-toolbar-floating-padding:3px;--file-viewer-toolbar-floating-offset:10px;--file-viewer-group-gap:2px;--file-viewer-group-padding:2px;--file-viewer-button-radius:6px;--file-viewer-button-min-width:34px;--file-viewer-button-height:26px;--file-viewer-button-padding:0 6px;--file-viewer-icon-button-size:26px;--file-viewer-zoom-meter-min-width:42px;--file-viewer-zoom-meter-padding:0 5px;--file-viewer-floating-button-min-width:38px;--file-viewer-floating-button-height:28px;--file-viewer-floating-icon-button-size:28px;--file-viewer-floating-zoom-meter-min-width:46px;--file-viewer-search-input-height:26px;--file-viewer-search-input-padding:0 8px;--file-viewer-search-button-min-width:28px;--file-viewer-search-button-padding:0 6px;--file-viewer-search-count-min-width:36px;--file-viewer-floating-search-input-height:28px}
 .file-viewer-web-content{position:relative;flex:1 1 auto;min-height:0;min-width:0;overflow:auto;overscroll-behavior:contain;background:var(--file-viewer-render-surface-background,var(--file-viewer-content-bg))}
+.file-viewer-web-source-status{position:absolute;inset:0;z-index:10;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;padding:24px;background:var(--file-viewer-toolbar-bg);color:var(--file-viewer-text);text-align:center;overflow:auto}
+.file-viewer-web-source-status p{margin:0;max-width:560px;white-space:pre-wrap;overflow-wrap:anywhere}
+.file-viewer-web-source-status strong{font-size:18px}
 .file-viewer-web-toolbar{flex:0 0 auto;min-height:var(--file-viewer-toolbar-min-height);display:inline-flex;align-items:center;justify-content:flex-end;gap:var(--file-viewer-toolbar-gap);padding:var(--file-viewer-toolbar-padding);border-bottom:1px solid var(--file-viewer-toolbar-border);background:var(--file-viewer-toolbar-bg);box-sizing:border-box;z-index:var(--file-viewer-z-toolbar)}
 .file-viewer-web-toolbar[hidden]{display:none!important}
 .file-viewer-web-toolbar[data-toolbar-position="top-center"]{justify-content:center}
@@ -399,14 +422,26 @@ export const mountViewer = (container, initialOptions = {}, coreOptions = {}) =>
     }
     else if (shouldUseShadowRoot && canAttachShadowRoot) {
         try {
+            // The viewer owns this root even when its host already lives inside a
+            // customer's ShadowRoot. Reusing the ancestor would let that component's
+            // resets override the toolbar and would make our :host rules mutate the
+            // customer's outer custom element.
+            // Delegated focus makes Safari taps on renderer controls focus the first
+            // toolbar input instead, triggering keyboard zoom and viewport scrolling.
             renderRoot = container.attachShadow({ mode: 'open' });
             ownedViewerShadowRoots.set(container, renderRoot);
         }
         catch {
+            // Some HTMLElement subclasses cannot host Shadow DOM, and a closed root
+            // is intentionally invisible through `shadowRoot`. Keep the legacy
+            // scoped path usable instead of surfacing a raw NotSupportedError.
             renderRoot = container;
         }
     }
     else if (existingHostShadowRoot && !hasOwnedHostShadowRoot) {
+        // The application owns this root. Preserve every existing child and mount
+        // the viewer in a dedicated boundary. Shadow mode gets a nested root so
+        // customer resets in the outer component cannot reach the viewer.
         mountBoundary = documentRef.createElement('div');
         mountBoundary.dataset.fileViewerMountBoundary = 'true';
         existingHostShadowRoot.appendChild(mountBoundary);
@@ -423,6 +458,9 @@ export const mountViewer = (container, initialOptions = {}, coreOptions = {}) =>
         }
     }
     else if (!shouldUseShadowRoot && hasOwnedHostShadowRoot && existingHostShadowRoot) {
+        // Light-DOM children of a shadow host are not painted unless the root has
+        // a slot. Keep the immutable owned root, but project the real light-DOM
+        // viewer so host selectors and legacy deep overrides work as documented.
         const slot = documentRef.createElement('slot');
         slot.dataset.fileViewerLightDomSlot = 'true';
         existingHostShadowRoot.replaceChildren(slot);
@@ -430,6 +468,9 @@ export const mountViewer = (container, initialOptions = {}, coreOptions = {}) =>
     }
     renderRoot.replaceChildren();
     const styleHandle = appendFileViewerStyle(renderRoot, WEB_VIEWER_STYLE, {
+        // Adopt only into a root owned by the viewer. Adopting into an ancestor
+        // ShadowRoot would leak toolbar selectors and apply :host rules to the
+        // customer's custom element.
         adoptedStyleSheet: isFileViewerShadowRoot(renderRoot),
     });
     const shell = documentRef.createElement('div');
@@ -455,7 +496,10 @@ export const mountViewer = (container, initialOptions = {}, coreOptions = {}) =>
     let currentSource = hasSource(currentOptions)
         ? toViewerSourceInput(currentOptions)
         : null;
-    let abortController = null;
+    let sourceRequest = null;
+    let renderingRequest = null;
+    let lifecycleVersion = -1;
+    const updateSourceFeedback = createViewerSourceFeedback(shell, contentEl);
     const listeners = new Set();
     const state = {
         loading: false,
@@ -494,6 +538,7 @@ export const mountViewer = (container, initialOptions = {}, coreOptions = {}) =>
         shell.dataset.viewerDensity = normalizeFileViewerUiDensity((_c = (_b = currentOptions.options) === null || _b === void 0 ? void 0 : _b.ui) === null || _c === void 0 ? void 0 : _c.density);
         syncFileViewerRenderSurfaceBackground(shell, currentOptions.options);
     };
+    const captureToolbarFocus = createToolbarFocusRestorer(toolbarEl, contentEl);
     let controller = null;
     let searchDraft = '';
     const isSearchToolbarVisible = (toolbar, options) => {
@@ -511,21 +556,30 @@ export const mountViewer = (container, initialOptions = {}, coreOptions = {}) =>
         if (disposed) {
             return;
         }
+        const restoreToolbarFocus = captureToolbarFocus();
         syncShellTheme();
         const options = currentOptions.options || {};
         const toolbar = normalizeFileViewerToolbar(options);
         const availability = getToolbarAvailability();
         const showSearchToolbar = isSearchToolbarVisible(toolbar, options);
+        const zoomState = getToolbarZoomState();
+        const zoomButtons = resolveFileViewerToolbarZoomButtons({
+            toolbar,
+            zoomState,
+            renderedReady: state.ready,
+            hasError: !!state.error,
+        });
         const visibleToolbar = resolveVisibleFileViewerToolbar(toolbar, availability, showSearchToolbar);
+        visibleToolbar.zoom = zoomButtons.zoomIn || zoomButtons.zoomOut || zoomButtons.zoomReset;
         const showToolbar = hasVisibleFileViewerToolbarActions(visibleToolbar);
         const toolbarPosition = resolveFileViewerToolbarPosition(options, getCurrentExtension());
         const toolbarDisabled = state.loading || !!state.error;
-        const zoomState = getToolbarZoomState();
         const t = createFileViewerTranslator(options);
         toolbarEl.hidden = !showToolbar;
         toolbarEl.dataset.toolbarPosition = toolbarPosition;
         toolbarEl.replaceChildren();
         if (!showToolbar) {
+            restoreToolbarFocus();
             return;
         }
         const appendSearchToolbar = () => {
@@ -543,6 +597,7 @@ export const mountViewer = (container, initialOptions = {}, coreOptions = {}) =>
             group.setAttribute('aria-label', t('toolbar.search'));
             const input = documentRef.createElement('input');
             input.type = 'search';
+            input.dataset.viewerToolbarKey = 'search-input';
             addPart(input, 'input');
             input.value = searchDraft;
             input.placeholder = t('toolbar.searchPlaceholder');
@@ -554,16 +609,19 @@ export const mountViewer = (container, initialOptions = {}, coreOptions = {}) =>
             });
             const searchButton = documentRef.createElement('button');
             searchButton.type = 'submit';
+            searchButton.dataset.viewerToolbarKey = 'search-submit';
             addPart(searchButton, 'button');
             searchButton.textContent = t('toolbar.search');
             searchButton.title = t('toolbar.search');
             searchButton.setAttribute('aria-label', t('toolbar.search'));
             searchButton.disabled = toolbarDisabled;
             const previousButton = createButton(documentRef, '<', 'file-viewer-web-icon-button', () => controller === null || controller === void 0 ? void 0 : controller.previousSearchResult());
+            previousButton.dataset.viewerToolbarKey = 'search-previous';
             previousButton.title = t('toolbar.searchPrevious');
             previousButton.setAttribute('aria-label', t('toolbar.searchPrevious'));
             previousButton.disabled = toolbarDisabled || searchTotal < 1;
             const nextButton = createButton(documentRef, '>', 'file-viewer-web-icon-button', () => controller === null || controller === void 0 ? void 0 : controller.nextSearchResult());
+            nextButton.dataset.viewerToolbarKey = 'search-next';
             nextButton.title = t('toolbar.searchNext');
             nextButton.setAttribute('aria-label', t('toolbar.searchNext'));
             nextButton.disabled = toolbarDisabled || searchTotal < 1;
@@ -571,6 +629,7 @@ export const mountViewer = (container, initialOptions = {}, coreOptions = {}) =>
                 searchDraft = '';
                 await (controller === null || controller === void 0 ? void 0 : controller.clearDocumentSearch());
             });
+            clearButton.dataset.viewerToolbarKey = 'search-clear';
             clearButton.title = t('toolbar.searchClear');
             clearButton.setAttribute('aria-label', t('toolbar.searchClear'));
             clearButton.disabled = toolbarDisabled || (!searchDraft && !(searchState === null || searchState === void 0 ? void 0 : searchState.query));
@@ -596,9 +655,10 @@ export const mountViewer = (container, initialOptions = {}, coreOptions = {}) =>
             group.className = 'file-viewer-web-toolbar-group';
             addPart(group, 'toolbar-group');
             group.setAttribute('aria-label', t('toolbar.zoomGroup'));
-            if (availability.zoomOut) {
+            if (zoomButtons.zoomOut) {
                 const button = createButton(documentRef, '-', 'file-viewer-web-icon-button', () => controller === null || controller === void 0 ? void 0 : controller.zoomOut());
                 button.title = t('toolbar.zoomOut');
+                button.dataset.viewerToolbarKey = 'zoom-out';
                 button.setAttribute('aria-label', t('toolbar.zoomOut'));
                 button.disabled = isFileViewerZoomButtonDisabled({
                     action: 'canZoomOut',
@@ -608,9 +668,10 @@ export const mountViewer = (container, initialOptions = {}, coreOptions = {}) =>
                 });
                 group.appendChild(button);
             }
-            if (availability.zoomReset) {
+            if (zoomButtons.zoomReset) {
                 const meter = createButton(documentRef, zoomState.label, 'file-viewer-web-zoom-meter', () => controller === null || controller === void 0 ? void 0 : controller.resetZoom());
                 meter.title = t('toolbar.zoomReset');
+                meter.dataset.viewerToolbarKey = 'zoom-meter';
                 meter.disabled = isFileViewerZoomButtonDisabled({
                     action: 'canReset',
                     availability,
@@ -622,9 +683,16 @@ export const mountViewer = (container, initialOptions = {}, coreOptions = {}) =>
             else {
                 group.appendChild(createReadonlyMeter(documentRef, zoomState.label, 'file-viewer-web-zoom-meter'));
             }
-            if (availability.zoomReset) {
+            if (zoomButtons.zoomReset) {
+                // Placed before the zoom-in button (not after) so that toggling this
+                // button's visibility never shifts the zoom-in button's position: the
+                // toolbar group is right-aligned, and both icon buttons share the same
+                // width, so inserting "1:1" after "+" would make it land exactly on
+                // top of the previous "+" position, turning a repeated zoom-in click
+                // into an accidental reset (see GitHub issue #88).
                 const button = createButton(documentRef, '1:1', 'file-viewer-web-icon-button', () => controller === null || controller === void 0 ? void 0 : controller.resetZoom());
                 button.title = t('toolbar.zoomReset');
+                button.dataset.viewerToolbarKey = 'zoom-reset';
                 button.setAttribute('aria-label', t('toolbar.zoomReset'));
                 button.disabled = isFileViewerZoomButtonDisabled({
                     action: 'canReset',
@@ -634,9 +702,10 @@ export const mountViewer = (container, initialOptions = {}, coreOptions = {}) =>
                 });
                 group.appendChild(button);
             }
-            if (availability.zoomIn) {
+            if (zoomButtons.zoomIn) {
                 const button = createButton(documentRef, '+', 'file-viewer-web-icon-button', () => controller === null || controller === void 0 ? void 0 : controller.zoomIn());
                 button.title = t('toolbar.zoomIn');
+                button.dataset.viewerToolbarKey = 'zoom-in';
                 button.setAttribute('aria-label', t('toolbar.zoomIn'));
                 button.disabled = isFileViewerZoomButtonDisabled({
                     action: 'canZoomIn',
@@ -650,11 +719,12 @@ export const mountViewer = (container, initialOptions = {}, coreOptions = {}) =>
                 toolbarEl.appendChild(group);
             }
         };
-        const appendToolbarButton = (visible, label, title, onClick) => {
+        const appendToolbarButton = (visible, key, label, title, onClick) => {
             if (!visible) {
                 return;
             }
             const button = createButton(documentRef, label, '', onClick);
+            button.dataset.viewerToolbarKey = key;
             button.title = title;
             button.disabled = toolbarDisabled;
             toolbarEl.appendChild(button);
@@ -691,6 +761,7 @@ export const mountViewer = (container, initialOptions = {}, coreOptions = {}) =>
                 }
             });
             addPart(button, 'theme-toggle');
+            button.dataset.viewerToolbarKey = 'theme';
             setThemeButtonIcon(button, currentTheme);
             button.title = title;
             button.setAttribute('aria-label', title);
@@ -706,7 +777,7 @@ export const mountViewer = (container, initialOptions = {}, coreOptions = {}) =>
                 appendZoomToolbar();
             }
             else if (item === 'download') {
-                appendToolbarButton(visibleToolbar.download, t('toolbar.download'), t('toolbar.downloadTitle'), () => controller === null || controller === void 0 ? void 0 : controller.downloadOriginalFile());
+                appendToolbarButton(visibleToolbar.download, 'download', t('toolbar.download'), t('toolbar.downloadTitle'), () => controller === null || controller === void 0 ? void 0 : controller.downloadOriginalFile());
             }
             else if (item === 'print') {
                 if (!visibleToolbar.print) {
@@ -719,6 +790,7 @@ export const mountViewer = (container, initialOptions = {}, coreOptions = {}) =>
                     menu.dataset.open = menu.dataset.open === 'true' ? 'false' : 'true';
                 });
                 trigger.title = t('toolbar.printTitle');
+                trigger.dataset.viewerToolbarKey = 'print';
                 trigger.setAttribute('aria-label', t('toolbar.printTitle'));
                 trigger.setAttribute('aria-haspopup', 'menu');
                 trigger.disabled = toolbarDisabled;
@@ -733,6 +805,7 @@ export const mountViewer = (container, initialOptions = {}, coreOptions = {}) =>
                     await (controller === null || controller === void 0 ? void 0 : controller.printRenderedHtml());
                 });
                 directButton.title = t('toolbar.printTitle');
+                directButton.dataset.viewerToolbarKey = 'print-direct';
                 directButton.setAttribute('role', 'menuitem');
                 directButton.disabled = toolbarDisabled;
                 const maskButton = createButton(documentRef, t('toolbar.printMask'), '', async () => {
@@ -740,6 +813,7 @@ export const mountViewer = (container, initialOptions = {}, coreOptions = {}) =>
                     await (controller === null || controller === void 0 ? void 0 : controller.printWithMask());
                 });
                 maskButton.title = t('toolbar.printMaskTitle');
+                maskButton.dataset.viewerToolbarKey = 'print-mask';
                 maskButton.setAttribute('role', 'menuitem');
                 maskButton.disabled = toolbarDisabled;
                 panel.append(directButton, maskButton);
@@ -753,12 +827,13 @@ export const mountViewer = (container, initialOptions = {}, coreOptions = {}) =>
                 toolbarEl.appendChild(menu);
             }
             else if (item === 'exportHtml') {
-                appendToolbarButton(visibleToolbar.exportHtml, t('toolbar.exportHtml'), t('toolbar.exportHtmlTitle'), () => controller === null || controller === void 0 ? void 0 : controller.exportRenderedHtml());
+                appendToolbarButton(visibleToolbar.exportHtml, 'export-html', t('toolbar.exportHtml'), t('toolbar.exportHtmlTitle'), () => controller === null || controller === void 0 ? void 0 : controller.exportRenderedHtml());
             }
             else if (item === 'theme') {
                 appendThemeToolbar();
             }
         });
+        restoreToolbarFocus(state.loading || (!state.ready && !state.error));
     };
     let refreshSystemThemeDocument = null;
     const handleViewerColorSchemeChange = () => {
@@ -772,11 +847,20 @@ export const mountViewer = (container, initialOptions = {}, coreOptions = {}) =>
         var _a;
         const snapshot = snapshotState();
         renderToolbar();
+        updateSourceFeedback((sourceRequest === null || sourceRequest === void 0 ? void 0 : sourceRequest.pending) ? sourceRequest.phase : null, state.error, currentSource ? currentSource.type || getExtension(resolveViewerSourceFilename(currentSource)) : '', currentOptions.options, Boolean((sourceRequest === null || sourceRequest === void 0 ? void 0 : sourceRequest.rendering) && contentEl.querySelector('.file-viewer-render-error')));
         (_a = currentOptions.onStateChange) === null || _a === void 0 ? void 0 : _a.call(currentOptions, snapshot, event);
         listeners.forEach(listener => listener(snapshot, event));
     };
     const applyViewerEvent = (event) => {
         var _a;
+        if (disposed || sourceRequest !== renderingRequest)
+            return;
+        if (event.type === 'load-start' || event.type === 'load-complete' ||
+            event.type === 'unload-start' || event.type === 'unload-complete') {
+            if (event.payload.version < lifecycleVersion)
+                return;
+            lifecycleVersion = event.payload.version;
+        }
         state.lastEvent = event;
         if (event.type === 'load-start') {
             state.loading = true;
@@ -787,6 +871,8 @@ export const mountViewer = (container, initialOptions = {}, coreOptions = {}) =>
             searchDraft = '';
         }
         else if (event.type === 'load-complete') {
+            if (sourceRequest)
+                sourceRequest.pending = false;
             state.loading = false;
             state.ready = true;
             state.lifecycle = event.payload;
@@ -797,7 +883,7 @@ export const mountViewer = (container, initialOptions = {}, coreOptions = {}) =>
             state.lifecycle = event.payload;
         }
         else if (event.type === 'unload-complete') {
-            state.loading = false;
+            state.loading = Boolean(sourceRequest === null || sourceRequest === void 0 ? void 0 : sourceRequest.pending);
             state.ready = false;
             state.lifecycle = event.payload;
         }
@@ -828,42 +914,71 @@ export const mountViewer = (container, initialOptions = {}, coreOptions = {}) =>
     (_e = viewerColorSchemeQuery === null || viewerColorSchemeQuery === void 0 ? void 0 : viewerColorSchemeQuery.addEventListener) === null || _e === void 0 ? void 0 : _e.call(viewerColorSchemeQuery, 'change', handleViewerColorSchemeChange);
     renderToolbar();
     const cancel = () => {
-        abortController === null || abortController === void 0 ? void 0 : abortController.abort();
-        abortController = null;
+        var _a;
+        const previous = sourceRequest;
+        sourceRequest = null;
+        (_a = previous === null || previous === void 0 ? void 0 : previous.abort) === null || _a === void 0 ? void 0 : _a.abort();
     };
     const loadSource = async (nextSource) => {
-        var _a;
+        var _a, _b, _c, _d, _e, _f, _g, _h;
         cancel();
         currentSource = nextSource;
-        abortController = typeof AbortController !== 'undefined' ? new AbortController() : null;
-        const controller = abortController;
+        const request = {
+            abort: typeof AbortController !== 'undefined' ? new AbortController() : null,
+            phase: 'reading', pending: true, rendering: false,
+        };
+        sourceRequest = request;
+        const isCurrent = () => { var _a; return !disposed && sourceRequest === request && !((_a = request.abort) === null || _a === void 0 ? void 0 : _a.signal.aborted); };
         try {
             state.loading = true;
             state.error = null;
             notifyState();
+            await ((_a = instance.prepare) === null || _a === void 0 ? void 0 : _a.call(instance));
+            if (!isCurrent()) {
+                return null;
+            }
+            const extension = nextSource.type || getExtension(resolveViewerSourceFilename(nextSource));
+            const renderer = instance.getRenderer(extension);
             const resolvedSource = await resolveViewerLoadSource(nextSource, {
+                acceptsPdfUrl: (renderer === null || renderer === void 0 ? void 0 : renderer.sourceAccess) === 'stream-preferred' && Boolean(renderer.load),
                 fetchFile: coreOptions.fetchFile,
-                signal: controller === null || controller === void 0 ? void 0 : controller.signal,
+                signal: (_b = request.abort) === null || _b === void 0 ? void 0 : _b.signal,
+                streaming: (_d = (_c = currentOptions.options) === null || _c === void 0 ? void 0 : _c.pdf) === null || _d === void 0 ? void 0 : _d.streaming,
+                pageHref: (_f = (_e = documentRef.defaultView) === null || _e === void 0 ? void 0 : _e.location) === null || _f === void 0 ? void 0 : _f.href,
+                onPhase(phase) {
+                    if (!isCurrent())
+                        return;
+                    request.phase = phase;
+                    updateSourceFeedback(phase, null, extension, currentOptions.options);
+                },
             });
-            if (disposed || (controller === null || controller === void 0 ? void 0 : controller.signal.aborted) || abortController !== controller) {
+            if (!isCurrent()) {
                 return null;
             }
-            return await instance.load(resolvedSource);
+            if (resolvedSource.buffer || resolvedSource.file)
+                request.phase = 'reading';
+            request.rendering = true;
+            renderingRequest = request;
+            notifyState();
+            return await instance.load(resolvedSource, { signal: (_g = request.abort) === null || _g === void 0 ? void 0 : _g.signal });
         }
         catch (error) {
-            if (isAbortError(error) && (controller === null || controller === void 0 ? void 0 : controller.signal.aborted)) {
+            if (!isCurrent()) {
                 return null;
             }
             state.loading = false;
             state.ready = false;
-            state.error = error;
+            state.error = error !== null && error !== void 0 ? error : new Error(createFileViewerTranslator(currentOptions.options)('error.unknown'));
+            request.pending = false;
             notifyState();
-            (_a = coreOptions.onError) === null || _a === void 0 ? void 0 : _a.call(coreOptions, error, nextSource);
+            (_h = coreOptions.onError) === null || _h === void 0 ? void 0 : _h.call(coreOptions, error, nextSource);
             throw error;
         }
         finally {
-            if (abortController === controller) {
-                abortController = null;
+            if (isCurrent() && request.pending) {
+                request.pending = false;
+                state.loading = false;
+                notifyState();
             }
         }
     };
@@ -881,6 +996,9 @@ export const mountViewer = (container, initialOptions = {}, coreOptions = {}) =>
         }
     };
     if (currentSource) {
+        // The initial declarative source has no caller awaiting it. State changes
+        // and the visible error surface remain authoritative without a global
+        // unhandled-rejection event for an expected rendering failure.
         void loadSource(currentSource).catch(() => undefined);
     }
     controller = {
@@ -928,7 +1046,13 @@ export const mountViewer = (container, initialOptions = {}, coreOptions = {}) =>
                 }
             }
             else {
+                cancel();
+                renderingRequest = null;
                 currentSource = null;
+                state.loading = false;
+                state.ready = false;
+                state.error = null;
+                notifyState();
                 await instance.load({ filename: DEFAULT_FILE_VIEWER_SOURCE_FILENAME });
             }
         },

package/dist/browser/source-feedback.d.ts

@@ -0,0 +1,4 @@
+import { type FileViewerI18nInput } from '../i18n/messages.js';
+export type ViewerSourcePhase = 'downloading' | 'reading' | 'streamingPdf';
+/** The shell owns acquisition feedback; renderers retain their own error surface. */
+export declare const createViewerSourceFeedback: (shell: HTMLElement, content: HTMLElement) => (phase: ViewerSourcePhase | null, error: unknown, extension: string, options?: FileViewerI18nInput, rendererHasError?: boolean) => void;

package/dist/browser/source-feedback.js

@@ -0,0 +1,40 @@
+import { createFileViewerTranslator } from '../i18n/messages.js';
+import { createFileViewerErrorState } from '../viewer/state.js';
+/** The shell owns acquisition feedback; renderers retain their own error surface. */
+export const createViewerSourceFeedback = (shell, content) => {
+    let surface = null;
+    let title = null;
+    let message = null;
+    return (phase, error, extension, options, rendererHasError = false) => {
+        content.setAttribute('aria-busy', String(Boolean(phase)));
+        content.toggleAttribute('inert', Boolean(phase));
+        if (!phase && (error == null || rendererHasError)) {
+            surface === null || surface === void 0 ? void 0 : surface.remove();
+            surface = title = message = null;
+            return;
+        }
+        if (!surface) {
+            surface = shell.ownerDocument.createElement('div');
+            surface.className = 'file-viewer-web-source-status';
+            surface.setAttribute('part', 'source-status');
+            title = shell.ownerDocument.createElement('strong');
+            message = shell.ownerDocument.createElement('p');
+            surface.append(title, message);
+            shell.append(surface);
+        }
+        surface.dataset.fileViewerSourceState = phase ? 'loading' : 'error';
+        surface.setAttribute('role', phase ? 'status' : 'alert');
+        surface.setAttribute('aria-live', phase ? 'polite' : 'assertive');
+        surface.setAttribute('aria-atomic', 'true');
+        const failure = phase ? null : createFileViewerErrorState(extension, error, undefined, options);
+        const nextTitle = (failure === null || failure === void 0 ? void 0 : failure.title) || '';
+        const nextMessage = phase
+            ? createFileViewerTranslator(options)(`preview.${phase}`)
+            : failure.message;
+        title.hidden = Boolean(phase);
+        if (title.textContent !== nextTitle)
+            title.textContent = nextTitle;
+        if (message.textContent !== nextMessage)
+            message.textContent = nextMessage;
+    };
+};

package/dist/browser/toolbar-focus.d.ts

@@ -0,0 +1,2 @@
+/** Preserve the active logical action across state-driven toolbar rebuilds. */
+export declare function createToolbarFocusRestorer(toolbar: HTMLElement, content: HTMLElement): () => (temporarilyUnavailable?: boolean) => void;

package/dist/browser/toolbar-focus.js

@@ -0,0 +1,46 @@
+/** Preserve the active logical action across state-driven toolbar rebuilds. */
+export function createToolbarFocusRestorer(toolbar, content) {
+    let pendingKey = null;
+    const controls = () => Array.from(toolbar.querySelectorAll('[data-viewer-toolbar-key]'));
+    return () => {
+        const root = toolbar.getRootNode();
+        const active = root.activeElement;
+        const key = active === toolbar ? pendingKey : active && toolbar.contains(active)
+            ? active.dataset.viewerToolbarKey : null;
+        pendingKey = null;
+        if (!key)
+            return (_temporarilyUnavailable = false) => undefined;
+        const oldIndex = controls().indexOf(active);
+        const input = (active === null || active === void 0 ? void 0 : active.tagName) === 'INPUT' ? active : null;
+        const selection = input && input.selectionStart !== null
+            ? [input.selectionStart, input.selectionEnd, input.selectionDirection] : null;
+        return (temporarilyUnavailable = false) => {
+            if (!toolbar.isConnected)
+                return;
+            if (toolbar.hidden) {
+                content.tabIndex = -1;
+                content.focus({ preventScroll: true });
+                return;
+            }
+            const all = controls();
+            const original = all.find(element => element.dataset.viewerToolbarKey === key);
+            const available = (element) => !element.disabled && element.getClientRects().length > 0;
+            const index = original ? all.indexOf(original) : Math.max(0, oldIndex);
+            const target = original && available(original) ? original
+                : temporarilyUnavailable ? undefined
+                    : all.slice(index).find(available) || all.slice(0, index).reverse().find(available);
+            if (target) {
+                target.focus({ preventScroll: true });
+                if (target === original && target.tagName === 'INPUT' && selection)
+                    target.setSelectionRange(selection[0], selection[1], selection[2] || undefined);
+            }
+            else {
+                // All actions may be temporarily disabled during a load. Restore only
+                // while the user remains here; moving elsewhere clears this pending key.
+                pendingKey = key;
+                toolbar.tabIndex = -1;
+                toolbar.focus({ preventScroll: true });
+            }
+        };
+    };
+}

package/dist/browser.d.ts

@@ -1,2 +1,2 @@
-export * from "./index.js";
-export * from "./browser/controller.js";
+export * from './index.js';
+export * from './browser/controller.js';

package/dist/browser.js

@@ -1,2 +1,2 @@
-export * from "./index.js";
-export * from "./browser/controller.js";
+export * from './index.js';
+export * from './browser/controller.js';

package/dist/config/options.d.ts

@@ -1,4 +1,4 @@
-import type { FileViewerArchiveOptions, FileViewerCadOptions, FileViewerOptions, FileViewerResolvedThemeMode, FileViewerThemeMode, FileViewerToolbarOptions, FileViewerUiDensity } from "../contracts/types.js";
+import type { FileViewerArchiveOptions, FileViewerCadOptions, FileViewerOptions, FileViewerResolvedThemeMode, FileViewerThemeMode, FileViewerToolbarOptions, FileViewerUiDensity } from '../contracts/types.js';
 export type FileViewerSerializableToolbarOptions = Omit<FileViewerToolbarOptions, 'beforeOperation' | 'beforeDownload' | 'beforePrint' | 'beforeExportHtml'>;
 export type FileViewerSerializableCadOptions = Omit<FileViewerCadOptions, 'workerUrl'> & {
     workerUrl?: string;