@file-viewer/renderer-image 2.2.3 → 2.2.5

package/README.en.md

@@ -28,7 +28,8 @@ const options = {
 
 - Common image formats use native browser decoding without extra runtime work.
 - HEIC / HEIF dynamically imports `heic2any` only when those formats are opened.
-- Includes lightbox viewing, a unified zoom provider, theme-aware background, and unmount cleanup.
+- Rotates left or right in 90° steps and refits both the main view and lightbox without clipping.
+- Includes lightbox viewing, unified zoom and view-state providers, a theme-aware background, and unmount cleanup.
 
 ## Migration Note
 

package/README.md

@@ -28,7 +28,8 @@ const options = {
 
 - 普通图片使用浏览器原生解码，不引入额外运行时。
 - HEIC / HEIF 只在命中格式时动态加载 `heic2any` 并转换为 PNG Data URL。
-- 支持图片灯箱、统一缩放 provider、明暗主题背景和组件卸载清理。
+- 支持左右 90° 旋转；主视图和灯箱都会按旋转后的宽高重新适配，不裁切图片。
+- 支持图片灯箱、统一缩放和 view-state provider、明暗主题背景和组件卸载清理。
 
 ## 迁移说明
 

package/dist/image.d.ts

@@ -1,2 +1,9 @@
 import { type FileRenderContext, type FileViewerRenderedInstance } from '@file-viewer/core';
+export declare const normalizeImageRotation: (rotation: number) => number;
+export declare const resolveRotatedImageSize: (naturalWidth: number, naturalHeight: number, scale: number, rotation: number) => {
+    imageWidth: number;
+    imageHeight: number;
+    frameWidth: number;
+    frameHeight: number;
+};
 export default function renderImage(buffer: ArrayBuffer, target: HTMLDivElement, type?: string, context?: FileRenderContext): Promise<FileViewerRenderedInstance>;

package/dist/image.js

@@ -1,4 +1,4 @@
-import { createFileViewerTranslator, createFileViewerZoomChangeEmitter as createZoomChangeEmitter, resolveFileViewerFitScale, registerFileViewerZoomProvider, unregisterFileViewerZoomProvider, } from '@file-viewer/core';
+import { createFileViewerTranslator, createFileViewerViewStateChange, createFileViewerViewStateChangeEmitter, createFileViewerZoomChangeEmitter as createZoomChangeEmitter, resolveFileViewerFitScale, registerFileViewerViewStateProvider, registerFileViewerZoomProvider, unregisterFileViewerViewStateProvider, unregisterFileViewerZoomProvider, } from '@file-viewer/core';
 const imageMimeMap = {
     avif: 'image/avif',
     bmp: 'image/bmp',
@@ -17,15 +17,30 @@ const imageMimeMap = {
 };
 const imageStyle = `
 .image-viewer{position:relative;width:100%;height:100%;overflow:auto;background:var(--file-viewer-render-surface-background,#eef1f4);box-sizing:border-box}
+.image-toolbar{position:sticky;top:12px;z-index:5;display:flex;align-items:center;gap:6px;width:max-content;height:42px;margin:12px 12px -54px auto;padding:5px 7px;border:1px solid rgba(148,163,184,.34);border-radius:10px;background:rgba(255,255,255,.92);box-shadow:0 10px 28px rgba(15,23,42,.14);backdrop-filter:blur(12px);box-sizing:border-box}
+.image-toolbar button{display:grid;width:30px;height:30px;place-items:center;padding:0;border:1px solid transparent;border-radius:7px;background:transparent;color:#334155;font:600 19px/1 system-ui,sans-serif;cursor:pointer;box-sizing:border-box}
+.image-toolbar button:hover{border-color:#bfd2ea;background:#edf5ff;color:#1769d8}
+.image-toolbar button:focus-visible{outline:3px solid #60a5fa;outline-offset:1px}
+.image-rotation-meter{min-width:38px;color:#64748b;font:700 12px/1 system-ui,sans-serif;text-align:center}
 .image-stage{min-width:100%;min-height:100%;display:flex;align-items:center;justify-content:center;padding:24px;box-sizing:border-box}
-.image-stage img{display:block;width:auto;max-width:none;margin:0 auto;border:0;box-shadow:0 18px 48px rgba(15,23,42,.16);background:#fff;cursor:zoom-in}
-.image-lightbox{position:fixed;inset:0;z-index:2147483000;display:flex;align-items:center;justify-content:center;padding:40px;background:rgba(15,23,42,.88);box-sizing:border-box}
-.image-lightbox[hidden]{display:none}
-.image-lightbox img{display:block;max-width:100%;max-height:100%;object-fit:contain;background:#fff;box-shadow:0 30px 80px rgba(0,0,0,.4);cursor:zoom-out}
-.image-lightbox button{position:absolute;top:20px;right:20px;width:40px;height:40px;border:0;border-radius:999px;background:rgba(255,255,255,.92);color:#172033;font-size:24px;line-height:40px;cursor:pointer;box-shadow:0 12px 28px rgba(0,0,0,.18)}
+.image-frame{position:relative;flex:0 0 auto}
+.image-stage img{position:absolute;top:50%;left:50%;display:block;width:auto;max-width:none;margin:0;border:0;box-shadow:0 18px 48px rgba(15,23,42,.16);background:#fff;cursor:zoom-in;transform:translate(-50%,-50%) rotate(var(--image-rotation,0deg));transform-origin:center center;transition:transform .18s ease}
+.image-stage img:focus-visible{outline:3px solid #2563eb;outline-offset:4px}
+.image-lightbox{position:absolute;inset:0;z-index:40;display:flex;align-items:center;justify-content:center;padding:40px;background:rgba(15,23,42,.9);box-sizing:border-box;opacity:0;visibility:hidden;pointer-events:none;transition:opacity .18s ease,visibility 0s linear .18s}
+.image-lightbox[data-open='true']{opacity:1;visibility:visible;pointer-events:auto;transition-delay:0s}
+.image-lightbox img{display:block;max-width:100%;max-height:100%;object-fit:contain;background:#fff;box-shadow:0 30px 80px rgba(0,0,0,.4);cursor:default;transform:rotate(var(--image-rotation,0deg)) scale(.985);transition:transform .18s ease}
+.image-lightbox[data-open='true'] img{transform:rotate(var(--image-rotation,0deg)) scale(1)}
+.image-lightbox button{position:absolute;top:16px;right:16px;display:grid;width:40px;height:40px;place-items:center;padding:0;border:1px solid rgba(255,255,255,.7);border-radius:999px;background:rgba(255,255,255,.96);color:#172033;font:400 27px/1 Arial,sans-serif;cursor:pointer;box-shadow:0 12px 28px rgba(0,0,0,.24);transition:background-color .14s ease,transform .14s ease}
+.image-lightbox button:hover{background:#fff;transform:scale(1.04)}
+.image-lightbox button:focus-visible{outline:3px solid #60a5fa;outline-offset:2px}
 [data-viewer-theme='dark'] .image-viewer{background:var(--file-viewer-render-surface-background,#101820)}
+[data-viewer-theme='dark'] .image-toolbar{border-color:rgba(148,163,184,.28);background:rgba(17,24,39,.88)}
+[data-viewer-theme='dark'] .image-toolbar button{color:#dbe5f2}
+[data-viewer-theme='dark'] .image-rotation-meter{color:#b7c5d7}
 @media (prefers-color-scheme:dark){[data-viewer-theme='system'] .image-viewer{background:var(--file-viewer-render-surface-background,#101820)}}
-@media (max-width:767px){.image-stage{padding:12px}.image-lightbox{padding:16px}.image-lightbox button{top:12px;right:12px}}
+@media (prefers-color-scheme:dark){[data-viewer-theme='system'] .image-toolbar{border-color:rgba(148,163,184,.28);background:rgba(17,24,39,.88)}[data-viewer-theme='system'] .image-toolbar button{color:#dbe5f2}[data-viewer-theme='system'] .image-rotation-meter{color:#b7c5d7}}
+@media (max-width:767px){.image-toolbar{top:8px;margin:8px 8px -50px auto}.image-stage{padding:12px}.image-lightbox{padding:16px}.image-lightbox button{top:12px;right:12px}}
+@media (prefers-reduced-motion:reduce){.image-stage img,.image-lightbox,.image-lightbox img,.image-lightbox button{transition:none}}
 `;
 const createStyle = (documentRef) => {
     const style = documentRef.createElement('style');
@@ -68,41 +83,127 @@ const resolveImageUrl = async (buffer, type) => {
     }
     return readBlobDataUrl(new Blob([buffer], { type: getImageBlobType(normalizedType) }));
 };
+const waitForImageReady = async (image) => {
+    if (image.complete) {
+        if (image.naturalWidth > 0 && image.naturalHeight > 0)
+            return;
+        throw new Error('The browser could not decode this image format.');
+    }
+    await new Promise((resolve, reject) => {
+        const cleanup = () => {
+            image.removeEventListener('load', onLoad);
+            image.removeEventListener('error', onError);
+        };
+        const onLoad = () => {
+            cleanup();
+            resolve();
+        };
+        const onError = () => {
+            cleanup();
+            reject(new Error('The browser could not decode this image format.'));
+        };
+        image.addEventListener('load', onLoad, { once: true });
+        image.addEventListener('error', onError, { once: true });
+    });
+};
 const roundImageScale = (value) => {
     return Number(value.toFixed(3));
 };
+export const normalizeImageRotation = (rotation) => {
+    return ((Math.round(rotation / 90) * 90) % 360 + 360) % 360;
+};
+export const resolveRotatedImageSize = (naturalWidth, naturalHeight, scale, rotation) => {
+    const width = Math.max(1, Math.round(naturalWidth * scale));
+    const height = Math.max(1, Math.round(naturalHeight * scale));
+    const swapsAxes = normalizeImageRotation(rotation) % 180 !== 0;
+    return {
+        imageWidth: width,
+        imageHeight: height,
+        frameWidth: swapsAxes ? height : width,
+        frameHeight: swapsAxes ? width : height,
+    };
+};
 const createLightbox = (documentRef, src, t) => {
     const lightbox = documentRef.createElement('div');
     lightbox.className = 'image-lightbox';
-    lightbox.hidden = true;
+    lightbox.dataset.open = 'false';
     lightbox.setAttribute('role', 'dialog');
     lightbox.setAttribute('aria-modal', 'true');
+    lightbox.setAttribute('aria-hidden', 'true');
     const image = documentRef.createElement('img');
     image.alt = t('image.lightbox.alt');
     image.src = src;
+    const ownerWindow = documentRef.defaultView;
+    let rotation = 0;
+    const syncImageSize = () => {
+        if (!image.naturalWidth || !image.naturalHeight)
+            return;
+        const style = ownerWindow === null || ownerWindow === void 0 ? void 0 : ownerWindow.getComputedStyle(lightbox);
+        const horizontalPadding = Number.parseFloat((style === null || style === void 0 ? void 0 : style.paddingLeft) || '0') +
+            Number.parseFloat((style === null || style === void 0 ? void 0 : style.paddingRight) || '0');
+        const verticalPadding = Number.parseFloat((style === null || style === void 0 ? void 0 : style.paddingTop) || '0') +
+            Number.parseFloat((style === null || style === void 0 ? void 0 : style.paddingBottom) || '0');
+        const availableWidth = Math.max(1, lightbox.clientWidth - horizontalPadding);
+        const availableHeight = Math.max(1, lightbox.clientHeight - verticalPadding);
+        const swapsAxes = rotation % 180 !== 0;
+        const visualWidth = swapsAxes ? image.naturalHeight : image.naturalWidth;
+        const visualHeight = swapsAxes ? image.naturalWidth : image.naturalHeight;
+        const scale = Math.min(1, availableWidth / visualWidth, availableHeight / visualHeight);
+        image.style.width = `${Math.max(1, Math.round(image.naturalWidth * scale))}px`;
+        image.style.height = `${Math.max(1, Math.round(image.naturalHeight * scale))}px`;
+    };
+    image.addEventListener('load', syncImageSize);
+    ownerWindow === null || ownerWindow === void 0 ? void 0 : ownerWindow.addEventListener('resize', syncImageSize);
     const closeButton = documentRef.createElement('button');
     closeButton.type = 'button';
     closeButton.setAttribute('aria-label', t('image.lightbox.close'));
-    closeButton.textContent = 'x';
+    closeButton.textContent = '×';
+    let previousFocus = null;
     const close = () => {
-        lightbox.hidden = true;
+        if (lightbox.dataset.open !== 'true')
+            return;
+        lightbox.dataset.open = 'false';
+        lightbox.setAttribute('aria-hidden', 'true');
+        if (previousFocus === null || previousFocus === void 0 ? void 0 : previousFocus.isConnected) {
+            previousFocus.focus({ preventScroll: true });
+        }
+        previousFocus = null;
+    };
+    const onKeyDown = (event) => {
+        if (event.key === 'Escape' && lightbox.dataset.open === 'true') {
+            event.preventDefault();
+            close();
+        }
     };
     closeButton.addEventListener('click', close);
-    image.addEventListener('click', close);
     lightbox.addEventListener('click', event => {
         if (event.target === lightbox) {
             close();
         }
     });
+    documentRef.addEventListener('keydown', onKeyDown);
     lightbox.append(image, closeButton);
     return {
         element: lightbox,
-        open() {
-            lightbox.hidden = false;
+        setRotation(nextRotation) {
+            rotation = normalizeImageRotation(nextRotation);
+            lightbox.style.setProperty('--image-rotation', `${rotation}deg`);
+            syncImageSize();
+        },
+        open(invoker) {
+            previousFocus =
+                invoker ||
+                    (documentRef.activeElement instanceof HTMLElement ? documentRef.activeElement : null);
+            lightbox.dataset.open = 'true';
+            lightbox.setAttribute('aria-hidden', 'false');
+            syncImageSize();
+            closeButton.focus({ preventScroll: true });
         },
         destroy() {
             closeButton.removeEventListener('click', close);
-            image.removeEventListener('click', close);
+            documentRef.removeEventListener('keydown', onKeyDown);
+            image.removeEventListener('load', syncImageSize);
+            ownerWindow === null || ownerWindow === void 0 ? void 0 : ownerWindow.removeEventListener('resize', syncImageSize);
             lightbox.remove();
         },
     };
@@ -115,16 +216,44 @@ export default async function renderImage(buffer, target, type, context) {
     let userZoom = 1;
     let fitScale = 1;
     let currentScale = 1;
+    let currentRotation = 0;
     let viewportHeight = 0;
+    let scrollStateFrame = 0;
+    let destroyed = false;
     const zoomEmitter = createZoomChangeEmitter();
+    const viewStateEmitter = createFileViewerViewStateChangeEmitter();
     const root = documentRef.createElement('div');
     root.className = 'image-viewer';
     root.dataset.viewerZoomProvider = 'image';
+    const toolbar = documentRef.createElement('div');
+    toolbar.className = 'image-toolbar';
+    toolbar.setAttribute('role', 'toolbar');
+    toolbar.setAttribute('aria-label', t('image.toolbar.rotation'));
+    const createRotateButton = (label, icon) => {
+        const button = documentRef.createElement('button');
+        button.type = 'button';
+        button.setAttribute('aria-label', label);
+        button.title = label;
+        button.textContent = icon;
+        return button;
+    };
+    const rotateLeftButton = createRotateButton(t('image.toolbar.rotateLeft'), '↺');
+    const rotationMeter = documentRef.createElement('span');
+    rotationMeter.className = 'image-rotation-meter';
+    rotationMeter.setAttribute('aria-live', 'polite');
+    rotationMeter.textContent = '0°';
+    const rotateRightButton = createRotateButton(t('image.toolbar.rotateRight'), '↻');
+    toolbar.append(rotateLeftButton, rotationMeter, rotateRightButton);
     const stage = documentRef.createElement('div');
     stage.className = 'image-stage';
+    const frame = documentRef.createElement('div');
+    frame.className = 'image-frame';
     const image = documentRef.createElement('img');
     image.alt = t('image.alt');
     image.src = src;
+    image.tabIndex = 0;
+    image.setAttribute('role', 'button');
+    image.setAttribute('aria-haspopup', 'dialog');
     const normalizedType = (type || '').trim().toLowerCase();
     (_a = context === null || context === void 0 ? void 0 : context.registerThumbnailAdapter) === null || _a === void 0 ? void 0 : _a.call(context, {
         capture: () => normalizedType === 'heic' || normalizedType === 'heif'
@@ -132,11 +261,19 @@ export default async function renderImage(buffer, target, type, context) {
             : new Blob([buffer], { type: getImageBlobType(normalizedType) }),
         getTarget: () => image,
     });
-    stage.append(image);
-    root.append(stage);
+    frame.append(image);
+    stage.append(frame);
+    root.append(toolbar, stage);
     const lightbox = createLightbox(documentRef, src, t);
-    const openLightbox = () => lightbox.open();
+    const openLightbox = () => lightbox.open(image);
+    const openLightboxFromKeyboard = (event) => {
+        if (event.key === 'Enter' || event.key === ' ') {
+            event.preventDefault();
+            lightbox.open(image);
+        }
+    };
     image.addEventListener('click', openLightbox);
+    image.addEventListener('keydown', openLightboxFromKeyboard);
     const getMinScale = () => Math.min(0.1, fitScale || 0.1);
     const clampScale = (value) => {
         const minScale = getMinScale();
@@ -150,20 +287,30 @@ export default async function renderImage(buffer, target, type, context) {
         }
         const availableWidth = Math.max((root.clientWidth || 0) - 48, 1);
         const availableHeight = Math.max((root.clientHeight || viewportHeight || 0) - 48, 1);
-        return Math.min(1, availableWidth / naturalWidth, availableHeight / naturalHeight);
+        const swapsAxes = currentRotation % 180 !== 0;
+        const visualWidth = swapsAxes ? naturalHeight : naturalWidth;
+        const visualHeight = swapsAxes ? naturalWidth : naturalHeight;
+        return Math.min(1, availableWidth / visualWidth, availableHeight / visualHeight);
     };
     const applyImageZoom = () => {
         fitScale = computeFitScale();
         currentScale = clampScale(fitScale * userZoom);
         if (image.naturalWidth && image.naturalHeight) {
-            image.style.width = `${Math.max(1, Math.round(image.naturalWidth * currentScale))}px`;
-            image.style.height = `${Math.max(1, Math.round(image.naturalHeight * currentScale))}px`;
+            const size = resolveRotatedImageSize(image.naturalWidth, image.naturalHeight, currentScale, currentRotation);
+            image.style.width = `${size.imageWidth}px`;
+            image.style.height = `${size.imageHeight}px`;
+            frame.style.width = `${size.frameWidth}px`;
+            frame.style.height = `${size.frameHeight}px`;
+            image.style.setProperty('--image-rotation', `${currentRotation}deg`);
             return;
         }
         image.style.width = 'auto';
         image.style.height = viewportHeight > 0
             ? `${Math.max(1, Math.round(viewportHeight * userZoom))}px`
             : `${userZoom * 100}%`;
+        frame.style.width = image.style.width;
+        frame.style.height = image.style.height;
+        image.style.setProperty('--image-rotation', `${currentRotation}deg`);
     };
     const updateViewportSize = () => {
         viewportHeight = root.clientHeight || 0;
@@ -182,13 +329,58 @@ export default async function renderImage(buffer, target, type, context) {
         minScale: getMinScale(),
         maxScale: 5,
     });
-    const setZoom = (scale) => {
+    const readScrollState = () => {
+        const maxTop = Math.max(0, root.scrollHeight - root.clientHeight);
+        const maxLeft = Math.max(0, root.scrollWidth - root.clientWidth);
+        return {
+            top: root.scrollTop || 0,
+            left: root.scrollLeft || 0,
+            width: root.scrollWidth || 0,
+            height: root.scrollHeight || 0,
+            clientWidth: root.clientWidth || 0,
+            clientHeight: root.clientHeight || 0,
+            topRatio: maxTop > 0 ? (root.scrollTop || 0) / maxTop : 0,
+            leftRatio: maxLeft > 0 ? (root.scrollLeft || 0) / maxLeft : 0,
+        };
+    };
+    const getImageViewState = () => ({
+        renderer: 'image',
+        scale: currentScale,
+        zoom: getZoomState(),
+        rotation: currentRotation,
+        scroll: readScrollState(),
+    });
+    const emitViewStateChange = (action, source = 'viewer') => {
+        const state = getImageViewState();
+        if (!destroyed) {
+            viewStateEmitter.emit(createFileViewerViewStateChange(state, { action, source }));
+        }
+        return state;
+    };
+    const setZoom = (scale, action = 'zoom-change', source = 'api', notifyViewState = true) => {
         const nextScale = clampScale(scale);
         userZoom = nextScale / Math.max(fitScale, 0.001);
         applyImageZoom();
         zoomEmitter.emit();
+        if (notifyViewState) {
+            emitViewStateChange(action, source);
+        }
         return getZoomState();
     };
+    const applyImageRotation = (rotation, action = 'rotation-change', source = 'viewer', notifyViewState = true) => {
+        const normalized = normalizeImageRotation(rotation);
+        if (normalized === currentRotation) {
+            return getImageViewState();
+        }
+        currentRotation = normalized;
+        rotationMeter.textContent = `${currentRotation}°`;
+        lightbox.setRotation(currentRotation);
+        applyImageZoom();
+        zoomEmitter.emit();
+        return notifyViewState
+            ? emitViewStateChange(action, source)
+            : getImageViewState();
+    };
     const fitImage = (request) => {
         var _a, _b;
         const naturalWidth = image.naturalWidth || 0;
@@ -204,12 +396,13 @@ export default async function renderImage(buffer, target, type, context) {
             };
         }
         const mode = request.mode === 'auto' ? 'scale-down' : request.mode;
+        const swapsAxes = currentRotation % 180 !== 0;
         const scale = resolveFileViewerFitScale({
             mode,
             viewportWidth: Math.max(1, request.viewportWidth || root.clientWidth || 0),
             viewportHeight: Math.max(1, request.viewportHeight || root.clientHeight || viewportHeight || 0),
-            contentWidth: naturalWidth,
-            contentHeight: naturalHeight,
+            contentWidth: swapsAxes ? naturalHeight : naturalWidth,
+            contentHeight: swapsAxes ? naturalWidth : naturalHeight,
             currentScale,
             minScale: (_a = request.minScale) !== null && _a !== void 0 ? _a : getMinScale(),
             maxScale: (_b = request.maxScale) !== null && _b !== void 0 ? _b : 5,
@@ -224,7 +417,7 @@ export default async function renderImage(buffer, target, type, context) {
                 provider: 'zoom',
             };
         }
-        const state = setZoom(scale);
+        const state = setZoom(scale, 'fit', request.source);
         return {
             applied: true,
             mode: request.mode,
@@ -234,13 +427,64 @@ export default async function renderImage(buffer, target, type, context) {
             provider: 'zoom',
         };
     };
+    const restoreScrollState = (scroll) => {
+        if (!scroll)
+            return;
+        const maxTop = Math.max(0, root.scrollHeight - root.clientHeight);
+        const maxLeft = Math.max(0, root.scrollWidth - root.clientWidth);
+        const top = Number.isFinite(scroll.top)
+            ? Number(scroll.top)
+            : Number.isFinite(scroll.topRatio)
+                ? Number(scroll.topRatio) * maxTop
+                : undefined;
+        const left = Number.isFinite(scroll.left)
+            ? Number(scroll.left)
+            : Number.isFinite(scroll.leftRatio)
+                ? Number(scroll.leftRatio) * maxLeft
+                : undefined;
+        if (top !== undefined)
+            root.scrollTop = Math.min(Math.max(0, top), maxTop);
+        if (left !== undefined)
+            root.scrollLeft = Math.min(Math.max(0, left), maxLeft);
+    };
+    const applyImageViewState = async (state, options = {}) => {
+        var _a, _b;
+        const source = options.source || 'api';
+        const action = options.action || 'restore';
+        const nextRotation = Number(state.rotation);
+        const nextScale = Number((_a = state.scale) !== null && _a !== void 0 ? _a : (_b = state.zoom) === null || _b === void 0 ? void 0 : _b.scale);
+        if (Number.isFinite(nextRotation)) {
+            applyImageRotation(nextRotation, 'rotation-change', source, false);
+        }
+        if (Number.isFinite(nextScale)) {
+            setZoom(nextScale, 'zoom-change', source, false);
+        }
+        restoreScrollState(state.scroll);
+        return options.notify === false
+            ? getImageViewState()
+            : emitViewStateChange(action, source);
+    };
+    const targetWindow = documentRef.defaultView;
+    const scheduleScrollViewStateChange = () => {
+        if (destroyed || scrollStateFrame)
+            return;
+        if (!(targetWindow === null || targetWindow === void 0 ? void 0 : targetWindow.requestAnimationFrame)) {
+            emitViewStateChange('scroll', 'viewer');
+            return;
+        }
+        scrollStateFrame = targetWindow.requestAnimationFrame(() => {
+            scrollStateFrame = 0;
+            emitViewStateChange('scroll', 'viewer');
+        });
+    };
     registerFileViewerZoomProvider(root, {
-        zoomIn: () => setZoom(currentScale + 0.15),
-        zoomOut: () => setZoom(currentScale - 0.15),
+        zoomIn: () => setZoom(currentScale + 0.15, 'zoom-in', 'api'),
+        zoomOut: () => setZoom(currentScale - 0.15, 'zoom-out', 'api'),
         resetZoom: () => {
             userZoom = 1;
             applyImageZoom();
             zoomEmitter.emit();
+            emitViewStateChange('zoom-reset', 'api');
             return getZoomState();
         },
         setZoom,
@@ -248,20 +492,57 @@ export default async function renderImage(buffer, target, type, context) {
         getState: getZoomState,
         subscribe: zoomEmitter.subscribe,
     });
+    registerFileViewerViewStateProvider(root, {
+        getState: getImageViewState,
+        applyState: applyImageViewState,
+        fit: fitImage,
+        subscribe: viewStateEmitter.subscribe,
+    });
+    const rotateLeft = () => {
+        applyImageRotation(currentRotation - 90, 'rotate-left', 'user');
+    };
+    const rotateRight = () => {
+        applyImageRotation(currentRotation + 90, 'rotate-right', 'user');
+    };
+    rotateLeftButton.addEventListener('click', rotateLeft);
+    rotateRightButton.addEventListener('click', rotateRight);
+    root.addEventListener('scroll', scheduleScrollViewStateChange, { passive: true });
     target.replaceChildren(createStyle(documentRef), root);
     (((_b = context === null || context === void 0 ? void 0 : context.surface) === null || _b === void 0 ? void 0 : _b.shadowRoot) || target).append(lightbox.element);
     updateViewportSize();
+    const cleanup = () => {
+        var _a;
+        destroyed = true;
+        (_a = context === null || context === void 0 ? void 0 : context.registerThumbnailAdapter) === null || _a === void 0 ? void 0 : _a.call(context, null);
+        unregisterFileViewerViewStateProvider(root);
+        unregisterFileViewerZoomProvider(root);
+        if (scrollStateFrame && (targetWindow === null || targetWindow === void 0 ? void 0 : targetWindow.cancelAnimationFrame)) {
+            targetWindow.cancelAnimationFrame(scrollStateFrame);
+            scrollStateFrame = 0;
+        }
+        resizeObserver.disconnect();
+        root.removeEventListener('scroll', scheduleScrollViewStateChange);
+        rotateLeftButton.removeEventListener('click', rotateLeft);
+        rotateRightButton.removeEventListener('click', rotateRight);
+        image.removeEventListener('load', updateViewportSize);
+        image.removeEventListener('click', openLightbox);
+        image.removeEventListener('keydown', openLightboxFromKeyboard);
+        lightbox.destroy();
+        target.replaceChildren();
+    };
+    try {
+        await waitForImageReady(image);
+        updateViewportSize();
+        targetWindow === null || targetWindow === void 0 ? void 0 : targetWindow.requestAnimationFrame(() => emitViewStateChange('init', 'viewer'));
+    }
+    catch (error) {
+        cleanup();
+        throw error;
+    }
     return {
         $el: target,
         unmount() {
-            var _a;
-            (_a = context === null || context === void 0 ? void 0 : context.registerThumbnailAdapter) === null || _a === void 0 ? void 0 : _a.call(context, null);
-            unregisterFileViewerZoomProvider(root);
-            resizeObserver.disconnect();
-            image.removeEventListener('load', updateViewportSize);
-            image.removeEventListener('click', openLightbox);
-            lightbox.destroy();
-            target.replaceChildren();
+            cleanup();
         },
     };
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@file-viewer/renderer-image",
-  "version": "2.2.3",
+  "version": "2.2.5",
   "private": false,
   "type": "module",
   "description": "Standalone image renderer plugin for File Viewer with native image preview, HEIC/HEIF conversion, lightbox, and unified zoom support.",
@@ -54,7 +54,7 @@
     "LICENSE"
   ],
   "dependencies": {
-    "@file-viewer/core": "2.2.3",
+    "@file-viewer/core": "2.2.5",
     "heic2any": "^0.0.4"
   },
   "devDependencies": {