@file-viewer/core 3.2.1 → 3.3.0

package/dist/browser/controller.js

@@ -1,5 +1,7 @@
-import { appendFileViewerStyle, 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";
 const isBrowser = () => typeof window !== 'undefined' && typeof document !== 'undefined';
 const hasSource = (options = {}) => {
     return !!(options.url || options.file || options.buffer);
@@ -25,6 +27,7 @@ const RENDER_AFFECTING_VIEWER_OPTION_KEYS = [
     'archive',
     'chm',
     'pdf',
+    'epub',
     'docx',
     'presentation',
     'spreadsheet',
@@ -137,6 +140,13 @@ const resolveViewerLoadSource = async (source, options = {}) => {
         };
     }
     if (source.url) {
+        const plan = resolveFileViewerRemoteSourcePlan({
+            url: source.url, filename, type,
+            pageHref: options.pageHref, streaming: options.streaming,
+        });
+        if (!options.fetchFile && options.acceptsPdfUrl && plan.streamPdf) {
+            return { url: plan.url, filename: plan.filename, type: plan.extension, size: source.size };
+        }
         const fileRef = await (options.fetchFile || defaultFetchFile)({
             url: source.url,
             signal: options.signal,
@@ -280,9 +290,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,
@@ -486,15 +493,7 @@ export const mountViewer = (container, initialOptions = {}, coreOptions = {}) =>
             : null,
         zoom: state.zoom ? { ...state.zoom } : null,
         location: state.location ? { ...state.location } : null,
-        viewState: state.viewState
-            ? {
-                ...state.viewState,
-                zoom: state.viewState.zoom ? { ...state.viewState.zoom } : undefined,
-                scroll: state.viewState.scroll ? { ...state.viewState.scroll } : undefined,
-                navigation: state.viewState.navigation ? { ...state.viewState.navigation } : undefined,
-                extra: state.viewState.extra ? { ...state.viewState.extra } : undefined,
-            }
-            : null,
+        viewState: cloneFileViewerViewState(state.viewState),
     });
     const syncShellTheme = () => {
         var _a, _b, _c;
@@ -502,6 +501,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) => {
@@ -519,21 +519,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 = () => {
@@ -551,6 +560,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');
@@ -562,16 +572,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;
@@ -579,6 +592,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));
@@ -604,9 +618,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',
@@ -616,9 +631,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,
@@ -630,9 +646,10 @@ export const mountViewer = (container, initialOptions = {}, coreOptions = {}) =>
             else {
                 group.appendChild(createReadonlyMeter(documentRef, zoomState.label, 'file-viewer-web-zoom-meter'));
             }
-            if (availability.zoomReset) {
+            if (zoomButtons.zoomReset) {
                 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',
@@ -642,9 +659,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',
@@ -658,11 +676,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);
@@ -699,6 +718,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);
@@ -714,7 +734,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) {
@@ -727,6 +747,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;
@@ -741,6 +762,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 () => {
@@ -748,6 +770,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);
@@ -761,12 +784,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 = () => {
@@ -840,7 +864,7 @@ export const mountViewer = (container, initialOptions = {}, coreOptions = {}) =>
         abortController = null;
     };
     const loadSource = async (nextSource) => {
-        var _a;
+        var _a, _b, _c, _d, _e, _f;
         cancel();
         currentSource = nextSource;
         abortController = typeof AbortController !== 'undefined' ? new AbortController() : null;
@@ -849,9 +873,18 @@ export const mountViewer = (container, initialOptions = {}, coreOptions = {}) =>
             state.loading = true;
             state.error = null;
             notifyState();
+            await ((_a = instance.prepare) === null || _a === void 0 ? void 0 : _a.call(instance));
+            if (disposed || (controller === null || controller === void 0 ? void 0 : controller.signal.aborted) || abortController !== controller) {
+                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,
+                streaming: (_c = (_b = currentOptions.options) === null || _b === void 0 ? void 0 : _b.pdf) === null || _c === void 0 ? void 0 : _c.streaming,
+                pageHref: (_e = (_d = documentRef.defaultView) === null || _d === void 0 ? void 0 : _d.location) === null || _e === void 0 ? void 0 : _e.href,
             });
             if (disposed || (controller === null || controller === void 0 ? void 0 : controller.signal.aborted) || abortController !== controller) {
                 return null;
@@ -859,14 +892,14 @@ export const mountViewer = (container, initialOptions = {}, coreOptions = {}) =>
             return await instance.load(resolvedSource);
         }
         catch (error) {
-            if (isAbortError(error) && (controller === null || controller === void 0 ? void 0 : controller.signal.aborted)) {
+            if (disposed || (controller === null || controller === void 0 ? void 0 : controller.signal.aborted) || abortController !== controller) {
                 return null;
             }
             state.loading = false;
             state.ready = false;
             state.error = error;
             notifyState();
-            (_a = coreOptions.onError) === null || _a === void 0 ? void 0 : _a.call(coreOptions, error, nextSource);
+            (_f = coreOptions.onError) === null || _f === void 0 ? void 0 : _f.call(coreOptions, error, nextSource);
             throw error;
         }
         finally {

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

@@ -0,0 +1 @@
+export declare function createToolbarFocusRestorer(toolbar: HTMLElement, content: HTMLElement): () => (temporarilyUnavailable?: boolean) => void;

package/dist/browser/toolbar-focus.js

@@ -0,0 +1,43 @@
+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 {
+                pendingKey = key;
+                toolbar.tabIndex = -1;
+                toolbar.focus({ preventScroll: true });
+            }
+        };
+    };
+}

package/dist/contracts/types.d.ts

@@ -106,8 +106,10 @@ export interface FileViewerArchivePasswordRequestContext {
     error?: unknown;
 }
 export interface FileViewerPdfOptions {
+    darkMode?: boolean;
     handTool?: boolean;
     toolbar?: boolean;
+    zoomToolbar?: boolean;
     navigation?: boolean;
     defaultNavigationVisible?: boolean;
     thumbnails?: boolean;
@@ -115,6 +117,8 @@ export interface FileViewerPdfOptions {
     bbox?: FileViewerPdfBoundingBox | readonly FileViewerPdfBoundingBox[];
     initialViewState?: FileViewerViewState;
     streaming?: boolean | 'same-origin';
+    disableStream?: boolean;
+    disableAutoFetch?: boolean;
     rangeChunkSize?: number;
     withCredentials?: boolean;
     assetBaseUrl?: string | URL;
@@ -166,6 +170,9 @@ export interface FileViewerDocxOptions {
     externalResourcePolicy?: 'allow' | 'block';
     darkMode?: boolean;
 }
+export interface FileViewerEpubOptions {
+    darkMode?: boolean;
+}
 export interface FileViewerSpreadsheetOptions {
     worker?: boolean | 'auto';
     workerUrl?: string;
@@ -605,10 +612,12 @@ export interface FileViewerOptions {
     archive?: FileViewerArchiveOptions;
     chm?: FileViewerChmOptions;
     pdf?: FileViewerPdfOptions;
+    epub?: FileViewerEpubOptions;
     docx?: FileViewerDocxOptions;
     presentation?: FileViewerPresentationOptions;
     spreadsheet?: FileViewerSpreadsheetOptions;
     image?: {
+        handTool?: boolean;
         rotation?: boolean;
     };
     iwork?: FileViewerIworkOptions;
@@ -727,7 +736,20 @@ export interface FileViewerNavigationState {
     visible?: boolean;
     mode?: string;
 }
+export interface FileViewerSpreadsheetRange {
+    sheetId: number;
+    startRow: number;
+    startCol: number;
+    endRow: number;
+    endCol: number;
+}
+export type FileViewerSpreadsheetNavigationStatus = 'idle' | 'pending' | 'applied' | 'rejected' | 'cancelled' | 'failed' | 'disposed';
 export interface FileViewerViewState {
+    spreadsheet?: {
+        sheetId?: number;
+        range?: FileViewerSpreadsheetRange;
+        status?: FileViewerSpreadsheetNavigationStatus;
+    };
     renderer?: string;
     page?: number;
     pageCount?: number;

package/dist/features/document/imageHandTool.d.ts

@@ -0,0 +1 @@
+export declare function installFileViewerImageHandTool(container: HTMLElement, signal?: AbortSignal): () => void;

package/dist/features/document/imageHandTool.js

@@ -0,0 +1,137 @@
+export function installFileViewerImageHandTool(container, signal) {
+    const view = container.ownerDocument.defaultView;
+    if (!view || (signal === null || signal === void 0 ? void 0 : signal.aborted))
+        return () => { };
+    const cursor = container.style.getPropertyValue('cursor');
+    const cursorPriority = container.style.getPropertyPriority('cursor');
+    const selection = container.style.getPropertyValue('user-select');
+    const selectionPriority = container.style.getPropertyPriority('user-select');
+    const previousMode = container.getAttribute('data-viewer-image-hand-tool');
+    const previousPanning = container.getAttribute('data-viewer-image-panning');
+    const style = container.ownerDocument.createElement('style');
+    style.textContent = '[data-viewer-image-hand-tool="true"] img{cursor:grab!important}[data-viewer-image-panning="true"] img{cursor:grabbing!important}';
+    container.append(style);
+    const interactive = 'a,button,input,textarea,select,option,[contenteditable]:not([contenteditable="false"]),[role="button"]:not(img),[role="link"],[role="textbox"]';
+    let drag = null;
+    let disposed = false;
+    let suppressClick = false;
+    let clickTimer = 0;
+    const canPan = () => container.scrollWidth > container.clientWidth || container.scrollHeight > container.clientHeight;
+    const syncCursor = () => {
+        if (disposed || (drag === null || drag === void 0 ? void 0 : drag.moved))
+            return;
+        const enabled = canPan();
+        container.setAttribute('data-viewer-image-hand-tool', String(enabled));
+        container.style.setProperty('cursor', enabled ? 'grab' : cursor, enabled ? '' : cursorPriority);
+    };
+    const finish = () => {
+        var _a;
+        const state = drag;
+        if (!state)
+            return;
+        drag = null;
+        container.style.setProperty('user-select', selection, selectionPriority);
+        container.removeAttribute('data-viewer-image-panning');
+        view.removeEventListener('pointermove', move, true);
+        view.removeEventListener('pointerup', up, true);
+        view.removeEventListener('pointercancel', up, true);
+        view.removeEventListener('blur', finish);
+        if ((_a = container.hasPointerCapture) === null || _a === void 0 ? void 0 : _a.call(container, state.id))
+            container.releasePointerCapture(state.id);
+        suppressClick = state.moved;
+        view.clearTimeout(clickTimer);
+        clickTimer = view.setTimeout(() => { suppressClick = false; }, 250);
+        syncCursor();
+    };
+    const move = (event) => {
+        var _a;
+        if (!drag || event.pointerId !== drag.id)
+            return;
+        if (!(event.buttons & 1)) {
+            finish();
+            return;
+        }
+        const dx = (event.clientX - drag.x) / drag.ratioX;
+        const dy = (event.clientY - drag.y) / drag.ratioY;
+        if (!drag.moved && Math.hypot(dx, dy) < 3)
+            return;
+        if (!drag.moved) {
+            drag.moved = true;
+            container.setAttribute('data-viewer-image-panning', 'true');
+            container.style.cursor = 'grabbing';
+            container.style.setProperty('user-select', 'none');
+            try {
+                (_a = container.setPointerCapture) === null || _a === void 0 ? void 0 : _a.call(container, event.pointerId);
+            }
+            catch { }
+        }
+        container.scrollLeft = drag.left - dx;
+        container.scrollTop = drag.top - dy;
+        event.preventDefault();
+    };
+    const up = (event) => { if (event.pointerId === (drag === null || drag === void 0 ? void 0 : drag.id))
+        finish(); };
+    const down = (event) => {
+        if (disposed || event.defaultPrevented || event.pointerType !== 'mouse' || event.button !== 0 || event.isPrimary === false || event.ctrlKey || event.metaKey || event.altKey || event.shiftKey)
+            return;
+        if (event.composedPath().some(node => { var _a, _b; return node !== container && ((_b = (_a = node).matches) === null || _b === void 0 ? void 0 : _b.call(_a, interactive)); }))
+            return;
+        finish();
+        suppressClick = false;
+        syncCursor();
+        if (!canPan())
+            return;
+        const rect = container.getBoundingClientRect();
+        const ratioX = container.offsetWidth ? rect.width / container.offsetWidth : 1;
+        const ratioY = container.offsetHeight ? rect.height / container.offsetHeight : 1;
+        if (![ratioX, ratioY].every(value => Number.isFinite(value) && value > 0))
+            return;
+        const x = (event.clientX - rect.left) / ratioX - container.clientLeft;
+        const y = (event.clientY - rect.top) / ratioY - container.clientTop;
+        if (x < 0 || y < 0 || x >= container.clientWidth || y >= container.clientHeight)
+            return;
+        drag = { id: event.pointerId, x: event.clientX, y: event.clientY, left: container.scrollLeft, top: container.scrollTop, ratioX, ratioY, moved: false };
+        view.addEventListener('pointermove', move, { capture: true, passive: false });
+        view.addEventListener('pointerup', up, true);
+        view.addEventListener('pointercancel', up, true);
+        view.addEventListener('blur', finish);
+    };
+    const click = (event) => {
+        if (suppressClick && event.detail > 0) {
+            event.preventDefault();
+            event.stopImmediatePropagation();
+        }
+    };
+    const nativeDrag = (event) => { if (drag)
+        event.preventDefault(); };
+    const restoreAttribute = (name, value) => value === null ? container.removeAttribute(name) : container.setAttribute(name, value);
+    const dispose = () => {
+        if (disposed)
+            return;
+        finish();
+        disposed = true;
+        view.clearTimeout(clickTimer);
+        suppressClick = false;
+        container.style.setProperty('cursor', cursor, cursorPriority);
+        container.style.setProperty('user-select', selection, selectionPriority);
+        restoreAttribute('data-viewer-image-hand-tool', previousMode);
+        restoreAttribute('data-viewer-image-panning', previousPanning);
+        container.removeEventListener('pointerdown', down);
+        container.removeEventListener('pointermove', syncCursor);
+        container.removeEventListener('pointerover', syncCursor);
+        container.removeEventListener('lostpointercapture', up);
+        container.removeEventListener('click', click, true);
+        container.removeEventListener('dragstart', nativeDrag);
+        signal === null || signal === void 0 ? void 0 : signal.removeEventListener('abort', dispose);
+        style.remove();
+    };
+    container.addEventListener('pointerdown', down);
+    container.addEventListener('pointermove', syncCursor);
+    container.addEventListener('pointerover', syncCursor);
+    container.addEventListener('lostpointercapture', up);
+    container.addEventListener('click', click, true);
+    container.addEventListener('dragstart', nativeDrag);
+    signal === null || signal === void 0 ? void 0 : signal.addEventListener('abort', dispose, { once: true });
+    syncCursor();
+    return dispose;
+}

package/dist/features/document/viewState.js

@@ -6,6 +6,10 @@ export const cloneFileViewerViewState = (state) => {
     }
     return {
         ...state,
+        spreadsheet: state.spreadsheet ? {
+            ...state.spreadsheet,
+            range: state.spreadsheet.range ? { ...state.spreadsheet.range } : undefined,
+        } : undefined,
         zoom: state.zoom ? { ...state.zoom } : undefined,
         scroll: state.scroll ? { ...state.scroll } : undefined,
         navigation: state.navigation ? { ...state.navigation } : undefined,
@@ -253,6 +257,8 @@ export const createFileViewerViewStateController = ({ root, enabled, onChange, }
     let unsubscribe = null;
     let observer = null;
     let state = null;
+    let applySequence = 0;
+    let destroyed = false;
     const readProviderState = () => { var _a; return cloneFileViewerViewState(((_a = provider === null || provider === void 0 ? void 0 : provider.getState) === null || _a === void 0 ? void 0 : _a.call(provider)) || null); };
     const commitState = (nextState, change) => {
         state = cloneFileViewerViewState(nextState);
@@ -265,6 +271,7 @@ export const createFileViewerViewStateController = ({ root, enabled, onChange, }
         return cloneFileViewerViewState(state);
     };
     const clearProvider = () => {
+        applySequence += 1;
         unsubscribe === null || unsubscribe === void 0 ? void 0 : unsubscribe();
         unsubscribe = null;
         provider = null;
@@ -272,15 +279,18 @@ export const createFileViewerViewStateController = ({ root, enabled, onChange, }
     };
     const syncProvider = () => {
         var _a;
-        if ((enabled === null || enabled === void 0 ? void 0 : enabled()) === false) {
+        if (destroyed || (enabled === null || enabled === void 0 ? void 0 : enabled()) === false) {
             clearProvider();
             return null;
         }
         const nextProvider = findFileViewerViewStateProvider(root());
         if (nextProvider !== provider) {
+            applySequence += 1;
             unsubscribe === null || unsubscribe === void 0 ? void 0 : unsubscribe();
             provider = nextProvider;
             unsubscribe = ((_a = nextProvider === null || nextProvider === void 0 ? void 0 : nextProvider.subscribe) === null || _a === void 0 ? void 0 : _a.call(nextProvider, change => {
+                if (destroyed || provider !== nextProvider)
+                    return;
                 commitState(change.state, change);
             })) || null;
         }
@@ -329,11 +339,19 @@ export const createFileViewerViewStateController = ({ root, enabled, onChange, }
             if (!(nextProvider === null || nextProvider === void 0 ? void 0 : nextProvider.applyState)) {
                 return cloneFileViewerViewState(state);
             }
-            const appliedState = await nextProvider.applyState(nextState, options);
+            const sequence = ++applySequence;
+            const appliedState = await nextProvider.applyState(cloneFileViewerViewState(nextState) || {}, options);
+            if (destroyed || nextProvider !== syncProvider()) {
+                return cloneFileViewerViewState(state);
+            }
+            if (sequence !== applySequence) {
+                return cloneFileViewerViewState(appliedState || nextProvider.getState());
+            }
             commitState(appliedState || nextProvider.getState());
             return cloneFileViewerViewState(state);
         },
         destroy() {
+            destroyed = true;
             disconnectObserver();
             clearProvider();
         },

package/dist/headless.d.ts

@@ -5,7 +5,7 @@ export { DEFAULT_FILE_VIEWER_TEXT_CHUNK_OVERLAP, DEFAULT_FILE_VIEWER_TEXT_CHUNK_
 export { ARCHIVE_EXTENSIONS, DEFAULT_REGISTERED_EXTENSIONS, DEFAULT_RENDERER_DEFINITIONS, DEFAULT_STABLE_SUPPORTED_EXTENSIONS, DEFAULT_SUPPORTED_EXTENSIONS, IMAGE_EXTENSIONS, MODEL_EXTENSIONS, TEXT_EXTENSIONS, } from "./registry/formats.js";
 export { precheckFileViewerSource } from "./source/precheck.js";
 export type { FileViewerPrecheckOptions, FileViewerPrecheckReason, FileViewerPrecheckResult, FileViewerPrecheckStatus, } from "./source/precheck.js";
-export { FILE_VIEWER_BEFORE_OPERATION_ERROR_PREFIX, DEFAULT_FILE_VIEWER_TOOLBAR_ORDER, FILE_VIEWER_LIFECYCLE_HOOK_ERROR_MESSAGE_PREFIX, FILE_VIEWER_LIFECYCLE_HOOKS, FILE_VIEWER_OPERATION_LABELS, buildFileViewerLifecycleContext, buildFileViewerLifecycleContextFromNormalizedSource, buildFileViewerOperationContext, buildFileViewerOperationContextFromLifecycleState, cloneFileViewerOperationAvailability, createFileViewerLifecycleActions, createFileViewerLifecycleStateController, createFileViewerPublicApi, createFileViewerToolbarActions, createFileViewerToolbarControllerActionHandlers, createFileViewerToolbarZoomSyncSnapshot, DEFAULT_FILE_VIEWER_LIFECYCLE_HOOK_ERROR_LOGGER, DEFAULT_FILE_VIEWER_OPERATION_ERROR_LOGGER, dispatchFileViewerLifecycleEvent, dispatchFileViewerOperationAvailabilityChange, dispatchFileViewerOperationContextEvent, dispatchFileViewerZoomChange, emitFileViewerComponentLifecycleEvent, getFileViewerBeforeOperationHooks, getFileViewerLifecycleHookName, hasVisibleFileViewerToolbarActions, isFileViewerToolbarOperationPermitted, isFileViewerZoomButtonDisabled, normalizeFileViewerToolbar, reportFileViewerLifecycleHookError, reportFileViewerOperationError, resolveFileViewerBeforeOperationErrorMessage, resolveFileViewerLifecycleFallbackSource, resolveFileViewerLifecycleHookErrorMessage, resolveFileViewerOperationAvailability, resolveFileViewerToolbarPosition, resolveFileViewerToolbarOrder, resolveFileViewerToolbarState, resolveVisibleFileViewerToolbar, runFileViewerActiveUnloadComplete, runFileViewerActiveUnloadStart, runFileViewerBeforeOperation, runFileViewerLifecycleHook, runFileViewerToolbarAvailabilitySync, runFileViewerToolbarZoomSync, serializeFileViewerContext, } from "./lifecycle/operations.js";
+export { FILE_VIEWER_BEFORE_OPERATION_ERROR_PREFIX, DEFAULT_FILE_VIEWER_TOOLBAR_ORDER, FILE_VIEWER_LIFECYCLE_HOOK_ERROR_MESSAGE_PREFIX, FILE_VIEWER_LIFECYCLE_HOOKS, FILE_VIEWER_OPERATION_LABELS, buildFileViewerLifecycleContext, buildFileViewerLifecycleContextFromNormalizedSource, buildFileViewerOperationContext, buildFileViewerOperationContextFromLifecycleState, cloneFileViewerOperationAvailability, createFileViewerLifecycleActions, createFileViewerLifecycleStateController, createFileViewerPublicApi, createFileViewerToolbarActions, createFileViewerToolbarControllerActionHandlers, createFileViewerToolbarZoomSyncSnapshot, DEFAULT_FILE_VIEWER_LIFECYCLE_HOOK_ERROR_LOGGER, DEFAULT_FILE_VIEWER_OPERATION_ERROR_LOGGER, dispatchFileViewerLifecycleEvent, dispatchFileViewerOperationAvailabilityChange, dispatchFileViewerOperationContextEvent, dispatchFileViewerZoomChange, emitFileViewerComponentLifecycleEvent, getFileViewerBeforeOperationHooks, getFileViewerLifecycleHookName, hasVisibleFileViewerToolbarActions, isFileViewerToolbarOperationPermitted, isFileViewerZoomButtonDisabled, normalizeFileViewerToolbar, reportFileViewerLifecycleHookError, reportFileViewerOperationError, resolveFileViewerBeforeOperationErrorMessage, resolveFileViewerLifecycleFallbackSource, resolveFileViewerLifecycleHookErrorMessage, resolveFileViewerOperationAvailability, resolveFileViewerToolbarZoomButtons, resolveFileViewerToolbarPosition, resolveFileViewerToolbarOrder, resolveFileViewerToolbarState, resolveVisibleFileViewerToolbar, runFileViewerActiveUnloadComplete, runFileViewerActiveUnloadStart, runFileViewerBeforeOperation, runFileViewerLifecycleHook, runFileViewerToolbarAvailabilitySync, runFileViewerToolbarZoomSync, serializeFileViewerContext, } from "./lifecycle/operations.js";
 export { FILE_VIEWER_BUILTIN_MESSAGES, FILE_VIEWER_DEFAULT_LOCALE, FILE_VIEWER_FALLBACK_LOCALE, FILE_VIEWER_SUPPORTED_LOCALES, createFileViewerTranslator, formatFileViewerMessage, normalizeFileViewerLocale, resolveFileViewerLocale, translateFileViewerMessage, } from "./i18n/messages.js";
 export type { FileViewerI18nInput, FileViewerResolvedLocale, ResolveFileViewerI18nInput, } from "./i18n/messages.js";
 export type { BuildFileViewerLifecycleContextFromNormalizedSourceInput, BuildFileViewerOperationContextFromLifecycleStateInput, BuildFileViewerLifecycleContextInput, BuiltFileViewerLifecycleContext, BuiltFileViewerOperationContext, CreateFileViewerLifecycleActionsInput, CreateFileViewerPublicApiInput, CreateFileViewerToolbarActionsInput, CreateFileViewerToolbarControllerActionHandlersInput, DispatchFileViewerLifecycleEventInput, DispatchFileViewerOperationAvailabilityChangeInput, DispatchFileViewerOperationContextEventInput, DispatchFileViewerZoomChangeInput, FileViewerActiveUnloadState, FileViewerLifecycleActions, FileViewerLifecycleComponentEmit, FileViewerLifecycleHookErrorLogger, FileViewerLifecycleStateController, FileViewerOperationErrorLogger, FileViewerToolbarActions, FileViewerToolbarControllerActionHandlers, FileViewerToolbarState, FileViewerToolbarZoomSyncSnapshot, FileViewerZoomButtonAction, ReportFileViewerLifecycleHookErrorInput, ReportFileViewerOperationErrorInput, ResolveFileViewerBeforeOperationErrorMessageInput, ResolveFileViewerLifecycleHookErrorMessageInput, ResolveFileViewerOperationAvailabilityInput, ResolveFileViewerToolbarStateInput, RunFileViewerActiveUnloadCompleteInput, RunFileViewerActiveUnloadStartInput, RunFileViewerBeforeOperationInput, RunFileViewerToolbarAvailabilitySyncInput, RunFileViewerToolbarZoomSyncInput, SerializedFileViewerContext, } from "./lifecycle/operations.js";
@@ -26,4 +26,4 @@ export { DEFAULT_FILE_VIEWER_STATE_THEME, DEFAULT_FILE_VIEWER_UNSUPPORTED_DESCRI
 export type { FileViewerErrorMessageCarrier, FileViewerErrorMessageFormatter, } from "./viewer/state.js";
 export { buildFileViewerWatermarkBackgroundImage, buildFileViewerWatermarkInlineStyle, buildFileViewerWatermarkStyle, buildFileViewerWatermarkSvg, normalizeFileViewerWatermark, resolveFileViewerWatermarkPresentationState, } from "./features/watermark.js";
 export type { FileViewerWatermarkPresentationState, FileViewerWatermarkStyle, } from "./features/watermark.js";
-export type { FileRenderContext, FileRenderExportAdapter, FileRenderExportMode, FileRenderExportOptions, FileRenderHandler, FileRenderHandlerComposite, FileViewerBuiltinRendererPreset, FileViewerAiOptions, FileViewerArchiveEntryActionContext, FileViewerArchiveEntryActionPolicy, FileViewerArchiveEntryActionsOptions, FileViewerArchiveOptions, FileViewerChmOptions, FileViewerApplyViewStateOptions, FileViewerBeforeOperation, FileViewerCadColorMode, FileViewerCadDwfLineWeightMode, FileViewerCadOptions, FileViewerCadRenderer, FileViewerComponentEmits, FileViewerComponentEventMap, FileViewerComponentProps, FileViewerDocumentAnchor, FileViewerDocumentChunk, FileViewerDocxOptions, FileViewerDrawingOptions, FileViewerDownloadOptions, FileViewerEvent, FileViewerEventHandler, FileViewerEventType, FileViewerExportHtmlOptions, FileViewerFileRef, FileViewerFitMode, FileViewerFitOptions, FileViewerFitRequest, FileViewerFitResize, FileViewerFitResult, FileViewerFormatStatus, FileViewerFormatSupportLevel, FileViewerGeoOptions, FileViewerInstance, FileViewerLifecycleContext, FileViewerLifecycleHooks, FileViewerLifecyclePhase, FileViewerI18nOptions, FileViewerIworkEmbeddedPreviewMode, FileViewerIworkOptions, FileViewerHangulOptions, FileViewerDiagnostic, FileViewerLocale, FileViewerMessageKey, FileViewerMessageParams, FileViewerMessageResolver, FileViewerMessages, FileViewerNavigationState, FileViewerOperationAvailability, FileViewerOperationContext, FileViewerOperationType, FileViewerOptions, FileViewerPdfBoundingBox, FileViewerPdfBoundingBoxOrigin, FileViewerPdfBoundingBoxUnit, FileViewerPdfOptions, FileViewerPresentationOptions, FileViewerPrintMaskOptions, FileViewerPrintMaskRegion, FileViewerPrintOptions, FileViewerPrintStamp, FileViewerPublicApi, FileViewerRenderStateKind, FileViewerRenderedInstance, FileViewerRendererCategory, FileViewerSearchMatch, FileViewerSearchOptions, FileViewerSearchProvider, FileViewerSearchState, FileViewerSource, FileViewerSourceKind, FileViewerSpreadsheetOptions, FileViewerStateDescriptor, FileViewerStateTheme, FileViewerTextOptions, FileViewerResolvedThemeMode, FileViewerThemeMode, FileViewerToolbarActionMap, FileViewerToolbarItem, FileViewerToolbarOptions, FileViewerToolbarPosition, FileViewerResolvedToolbarItem, FileViewerUiDensity, FileViewerUiOptions, FileViewerTypstOptions, FileViewerViewScrollState, FileViewerViewState, FileViewerViewStateChange, FileViewerViewStateChangeAction, FileViewerViewStateChangeSource, FileViewerViewStateProvider, FileViewerWatermarkOptions, FileViewerWordPerfectOptions, FileViewerZoomProvider, FileViewerZoomState, NormalizedFileViewerSource, RenderSurface, RendererCapability, RendererSourceTypeProbe, RendererSourceTypeProbeInput, RendererDefinition, RendererLoadContext, RendererLoader, RendererPlugin, RendererRegistry, RendererSession, ViewerCapabilityState, ViewerLifecycleContext, ViewerOperationContext, } from "./contracts/types.js";
+export type { FileRenderContext, FileRenderExportAdapter, FileRenderExportMode, FileRenderExportOptions, FileRenderHandler, FileRenderHandlerComposite, FileViewerBuiltinRendererPreset, FileViewerAiOptions, FileViewerArchiveEntryActionContext, FileViewerArchiveEntryActionPolicy, FileViewerArchiveEntryActionsOptions, FileViewerArchiveOptions, FileViewerChmOptions, FileViewerApplyViewStateOptions, FileViewerBeforeOperation, FileViewerCadColorMode, FileViewerCadDwfLineWeightMode, FileViewerCadOptions, FileViewerCadRenderer, FileViewerComponentEmits, FileViewerComponentEventMap, FileViewerComponentProps, FileViewerDocumentAnchor, FileViewerDocumentChunk, FileViewerDocxOptions, FileViewerDrawingOptions, FileViewerDownloadOptions, FileViewerEvent, FileViewerEventHandler, FileViewerEventType, FileViewerExportHtmlOptions, FileViewerFileRef, FileViewerFitMode, FileViewerFitOptions, FileViewerFitRequest, FileViewerFitResize, FileViewerFitResult, FileViewerFormatStatus, FileViewerFormatSupportLevel, FileViewerGeoOptions, FileViewerInstance, FileViewerLifecycleContext, FileViewerLifecycleHooks, FileViewerLifecyclePhase, FileViewerI18nOptions, FileViewerIworkEmbeddedPreviewMode, FileViewerIworkOptions, FileViewerHangulOptions, FileViewerDiagnostic, FileViewerLocale, FileViewerMessageKey, FileViewerMessageParams, FileViewerMessageResolver, FileViewerMessages, FileViewerNavigationState, FileViewerOperationAvailability, FileViewerOperationContext, FileViewerOperationType, FileViewerOptions, FileViewerPdfBoundingBox, FileViewerPdfBoundingBoxOrigin, FileViewerPdfBoundingBoxUnit, FileViewerPdfOptions, FileViewerEpubOptions, FileViewerPresentationOptions, FileViewerPrintMaskOptions, FileViewerPrintMaskRegion, FileViewerPrintOptions, FileViewerPrintStamp, FileViewerPublicApi, FileViewerRenderStateKind, FileViewerRenderedInstance, FileViewerRendererCategory, FileViewerSearchMatch, FileViewerSearchOptions, FileViewerSearchProvider, FileViewerSearchState, FileViewerSource, FileViewerSourceKind, FileViewerSpreadsheetOptions, FileViewerStateDescriptor, FileViewerStateTheme, FileViewerTextOptions, FileViewerResolvedThemeMode, FileViewerThemeMode, FileViewerToolbarActionMap, FileViewerToolbarItem, FileViewerToolbarOptions, FileViewerToolbarPosition, FileViewerResolvedToolbarItem, FileViewerUiDensity, FileViewerUiOptions, FileViewerTypstOptions, FileViewerViewScrollState, FileViewerViewState, FileViewerViewStateChange, FileViewerViewStateChangeAction, FileViewerViewStateChangeSource, FileViewerViewStateProvider, FileViewerWatermarkOptions, FileViewerWordPerfectOptions, FileViewerZoomProvider, FileViewerZoomState, NormalizedFileViewerSource, RenderSurface, RendererCapability, RendererSourceTypeProbe, RendererSourceTypeProbeInput, RendererDefinition, RendererLoadContext, RendererLoader, RendererPlugin, RendererRegistry, RendererSession, ViewerCapabilityState, ViewerLifecycleContext, ViewerOperationContext, } from "./contracts/types.js";