genus-pdf-viewer 0.1.7 → 0.1.9

package/fesm2022/genus-pdf-viewer.mjs

@@ -14,6 +14,9 @@ class GenusPdfViewerComponent {
     disableTextLayer = true;
     continuous = true;
     showToolbar = true;
+    zoomAnimation = true;
+    zoomAnimationMs = 180;
+    gestureAnimationMs = 120;
     canvas;
     singleStage;
     stage;
@@ -27,46 +30,64 @@ class GenusPdfViewerComponent {
     error = signal(null, ...(ngDevMode ? [{ debugName: "error" }] : []));
     PRINT_SCALE = 2;
     scrollRaf = 0;
-    pinchRaf = 0;
-    pinchActive = false;
-    pinchStartDistance = 0;
-    pinchStartZoom = 1;
-    pinchAnchorClient = null;
-    activePointers = new Map();
     renderLockCount = 0;
+    zoomAnimInFlight = false;
+    activeRenderTasks = new Set();
+    wheelRaf = 0;
+    pinchState = null;
+    activePointers = new Map();
+    renderVersion = 0;
+    previewActive = false;
+    reRenderQueued = false;
+    pendingAnchor;
+    lastZoomClient = null;
+    WHEEL_STEP = 0.02;
+    PINCH_SENSITIVITY = 0.5;
+    wheelCommitTimer = 0;
     constructor() {
         effect(() => {
-            // Track dependencies explicitly
-            this.pageSig();
+            // Only react to zoom changes here; page changes in continuous mode should NOT trigger a re-render
             this.zoomSig();
-            if (this.renderLockCount > 0)
+            if (this.renderLockCount > 0 || this.previewActive)
                 return;
             this.safeRender();
         });
     }
-    async ngOnChanges() {
-        this.pageSig.set(this.page);
-        this.zoomSig.set(this.zoom);
+    async ngOnChanges(changes) {
+        if (changes['page'])
+            this.pageSig.set(this.page);
+        if (changes['zoom'])
+            this.zoomSig.set(this.zoom);
+        const srcChanged = !!changes['src'];
+        const layoutChanged = !!(changes['fit'] || changes['minZoom'] || changes['maxZoom']);
         if (!this.src)
             return;
-        this.loading.set(true);
-        this.error.set(null);
-        try {
-            const task = pdfjsLib.getDocument(this.normalizePdfSource(this.src));
-            this.doc = await task.promise;
+        if (srcChanged) {
+            await this.loadDocument();
+            if (this.doc) {
+                const pages = this.doc.numPages;
+                if (this.pageSig() < 1)
+                    this.pageSig.set(1);
+                if (this.pageSig() > pages)
+                    this.pageSig.set(pages);
+                await this.render();
+            }
+            return;
         }
-        catch (e) {
-            this.error.set('Failed to load PDF');
-            this.loading.set(false);
+        if (layoutChanged) {
+            if (this.continuous) {
+                const container = this.stage?.nativeElement;
+                const anchor = container ? this.captureScrollAnchor(container) || undefined : undefined;
+                await this.renderAllPages(anchor);
+            }
+            else {
+                await this.render();
+            }
             return;
         }
-        const pages = this.doc.numPages;
-        if (this.pageSig() < 1)
-            this.pageSig.set(1);
-        if (this.pageSig() > pages)
-            this.pageSig.set(pages);
-        await this.render();
-        this.loading.set(false);
+        if (!this.continuous && changes['page']) {
+            await this.render();
+        }
     }
     async safeRender() {
         try {
@@ -74,9 +95,48 @@ class GenusPdfViewerComponent {
         }
         catch (_) { }
     }
+    async loadDocument() {
+        this.loading.set(true);
+        this.error.set(null);
+        try {
+            const task = pdfjsLib.getDocument(this.normalizePdfSource(this.src));
+            this.doc = await task.promise;
+        }
+        catch (e) {
+            // Fallback for environments (notably some iOS builds) where range/streaming fetch fails.
+            // Try fetching the whole file via fetch() and pass ArrayBuffer to pdf.js.
+            try {
+                const href = typeof this.src === 'string' ? this.src : (this.src instanceof URL ? this.src.toString() : '');
+                if (href && typeof fetch !== 'undefined') {
+                    const res = await fetch(href, { mode: 'cors' });
+                    if (res.ok) {
+                        const ab = await res.arrayBuffer();
+                        const data = new Uint8Array(ab);
+                        const task2 = pdfjsLib.getDocument({ data });
+                        this.doc = await task2.promise;
+                    }
+                    else {
+                        this.doc = undefined;
+                    }
+                }
+                else {
+                    this.doc = undefined;
+                }
+            }
+            catch {
+                this.doc = undefined;
+            }
+            if (!this.doc)
+                this.error.set('Failed to load PDF');
+        }
+        finally {
+            this.loading.set(false);
+        }
+    }
     async render() {
         if (!this.doc)
             return;
+        const version = ++this.renderVersion;
         if (this.continuous) {
             await this.renderAllPages();
             return;
@@ -90,6 +150,7 @@ class GenusPdfViewerComponent {
         const ctx = canvas.getContext('2d');
         const baseViewport = pdfPage.getViewport({ scale: 1 });
         const parent = canvas.parentElement;
+        const anchor = this.captureScrollAnchor(parent) || undefined;
         const pW = parent.clientWidth, pH = parent.clientHeight || baseViewport.height;
         let baseScale = 1;
         if (this.fit === 'width')
@@ -111,7 +172,12 @@ class GenusPdfViewerComponent {
         const renderCtx = { canvasContext: ctx, viewport };
         if (dpr !== 1)
             renderCtx.transform = [dpr, 0, 0, dpr, 0, 0];
-        await pdfPage.render(renderCtx).promise;
+        const task = pdfPage.render(renderCtx);
+        await task.promise;
+        if (this.renderVersion !== version)
+            return;
+        if (anchor)
+            this.restoreScrollAnchor(parent, anchor);
     }
     async renderAllPages(anchorOverride) {
         if (!this.doc)
@@ -119,63 +185,104 @@ class GenusPdfViewerComponent {
         const stageEl = this.stage?.nativeElement;
         if (!stageEl)
             return;
+        const version = ++this.renderVersion;
         const anchor = anchorOverride ?? this.captureScrollAnchor(stageEl);
-        const placeholderMinHeight = stageEl.scrollHeight;
-        if (placeholderMinHeight > 0)
-            stageEl.style.minHeight = placeholderMinHeight + 'px';
-        const fragment = document.createDocumentFragment();
         const total = this.doc.numPages;
         const parentRect = stageEl.getBoundingClientRect();
         const parentWidth = parentRect.width || stageEl.clientWidth || 800;
         let computedCanPan = false;
-        for (let i = 1; i <= total; i++) {
-            const page = await this.doc.getPage(i);
-            const baseViewport = page.getViewport({ scale: 1 });
-            let baseScale = 1;
-            if (this.fit === 'width')
-                baseScale = (parentWidth - 16) / baseViewport.width;
-            if (this.fit === 'page')
-                baseScale = (parentWidth - 16) / baseViewport.width; // simple width-fit for page mode in continuous
-            const minScale = baseScale * this.minZoom;
-            const maxScale = baseScale * this.maxZoom;
-            const finalScale = Math.max(minScale, Math.min(maxScale, baseScale * this.zoomSig()));
-            if (i === 1)
-                computedCanPan = finalScale > baseScale + 0.001;
-            const viewport = page.getViewport({ scale: finalScale });
-            const wrapper = document.createElement('div');
-            wrapper.className = 'pdf-page';
-            wrapper.setAttribute('data-page', String(i));
-            wrapper.style.width = Math.floor(viewport.width) + 'px';
-            wrapper.style.margin = '0 auto 12px auto';
-            const canvas = document.createElement('canvas');
-            const dpr = (typeof window !== 'undefined' && window.devicePixelRatio) ? window.devicePixelRatio : 1;
-            canvas.style.width = Math.floor(viewport.width) + 'px';
-            canvas.style.height = Math.floor(viewport.height) + 'px';
-            canvas.width = Math.floor(viewport.width * dpr);
-            canvas.height = Math.floor(viewport.height * dpr);
-            const ctx = canvas.getContext('2d');
-            wrapper.appendChild(canvas);
-            fragment.appendChild(wrapper);
-            const renderCtx = { canvasContext: ctx, viewport };
-            if (dpr !== 1)
-                renderCtx.transform = [dpr, 0, 0, dpr, 0, 0];
-            await page.render(renderCtx).promise;
+        const existing = Array.from(stageEl.querySelectorAll('.pdf-page'));
+        const isInitialBuild = existing.length !== total;
+        this.renderLockCount++;
+        if (isInitialBuild) {
+            stageEl.innerHTML = '';
+            const contentEl = document.createElement('div');
+            contentEl.className = 'pdf-content';
+            stageEl.appendChild(contentEl);
+            for (let i = 1; i <= total; i++) {
+                const page = await this.doc.getPage(i);
+                const baseViewport = page.getViewport({ scale: 1 });
+                let baseScale = 1;
+                if (this.fit === 'width')
+                    baseScale = (parentWidth - 16) / baseViewport.width;
+                if (this.fit === 'page')
+                    baseScale = (parentWidth - 16) / baseViewport.width;
+                const minScale = baseScale * this.minZoom;
+                const maxScale = baseScale * this.maxZoom;
+                const finalScale = Math.max(minScale, Math.min(maxScale, baseScale * this.zoomSig()));
+                if (i === 1)
+                    computedCanPan = finalScale > baseScale + 0.001;
+                const viewport = page.getViewport({ scale: finalScale });
+                const wrapper = document.createElement('div');
+                wrapper.className = 'pdf-page';
+                wrapper.setAttribute('data-page', String(i));
+                wrapper.style.width = Math.floor(viewport.width) + 'px';
+                wrapper.style.height = Math.floor(viewport.height) + 'px';
+                wrapper.style.margin = '0 auto 12px auto';
+                const canvas = document.createElement('canvas');
+                const dpr = (typeof window !== 'undefined' && window.devicePixelRatio) ? window.devicePixelRatio : 1;
+                canvas.style.width = Math.floor(viewport.width) + 'px';
+                canvas.style.height = Math.floor(viewport.height) + 'px';
+                canvas.width = Math.floor(viewport.width * dpr);
+                canvas.height = Math.floor(viewport.height * dpr);
+                const ctx = canvas.getContext('2d');
+                wrapper.appendChild(canvas);
+                contentEl.appendChild(wrapper);
+                const renderCtx = { canvasContext: ctx, viewport };
+                if (dpr !== 1)
+                    renderCtx.transform = [dpr, 0, 0, dpr, 0, 0];
+                const task = page.render(renderCtx);
+                await task.promise;
+                if (this.renderVersion !== version)
+                    return;
+            }
+        }
+        else {
+            let contentEl = stageEl.querySelector('.pdf-content');
+            if (!contentEl) {
+                contentEl = document.createElement('div');
+                contentEl.className = 'pdf-content';
+                const pages = Array.from(stageEl.querySelectorAll('.pdf-page'));
+                for (const el of pages)
+                    contentEl.appendChild(el);
+                stageEl.appendChild(contentEl);
+            }
+            for (let i = 1; i <= total; i++) {
+                const page = await this.doc.getPage(i);
+                const baseViewport = page.getViewport({ scale: 1 });
+                let baseScale = 1;
+                if (this.fit === 'width')
+                    baseScale = (parentWidth - 16) / baseViewport.width;
+                if (this.fit === 'page')
+                    baseScale = (parentWidth - 16) / baseViewport.width;
+                const minScale = baseScale * this.minZoom;
+                const maxScale = baseScale * this.maxZoom;
+                const finalScale = Math.max(minScale, Math.min(maxScale, baseScale * this.zoomSig()));
+                if (i === 1)
+                    computedCanPan = finalScale > baseScale + 0.001;
+                const viewport = page.getViewport({ scale: finalScale });
+                const wrapper = existing[i - 1];
+                const canvas = wrapper.querySelector('canvas');
+                wrapper.style.width = Math.floor(viewport.width) + 'px';
+                wrapper.style.height = Math.floor(viewport.height) + 'px';
+                const dpr = (typeof window !== 'undefined' && window.devicePixelRatio) ? window.devicePixelRatio : 1;
+                canvas.style.width = Math.floor(viewport.width) + 'px';
+                canvas.style.height = Math.floor(viewport.height) + 'px';
+                canvas.width = Math.floor(viewport.width * dpr);
+                canvas.height = Math.floor(viewport.height * dpr);
+                const ctx = canvas.getContext('2d');
+                const renderCtx = { canvasContext: ctx, viewport };
+                if (dpr !== 1)
+                    renderCtx.transform = [dpr, 0, 0, dpr, 0, 0];
+                const task = page.render(renderCtx);
+                await task.promise;
+                if (this.renderVersion !== version)
+                    return;
+            }
         }
         this.canPan.set(computedCanPan);
-        const prevBehavior = stageEl.style.scrollBehavior;
-        const prevOverflow = stageEl.style.overflow;
-        const prevVisibility = stageEl.style.visibility;
-        this.renderLockCount++;
-        stageEl.style.scrollBehavior = 'auto';
-        stageEl.style.overflow = 'hidden';
-        stageEl.style.visibility = 'hidden';
-        stageEl.replaceChildren(fragment);
         if (anchor)
             this.restoreScrollAnchor(stageEl, anchor);
-        stageEl.style.scrollBehavior = prevBehavior;
-        stageEl.style.overflow = prevOverflow;
-        stageEl.style.visibility = prevVisibility;
-        stageEl.style.minHeight = '';
         this.renderLockCount = Math.max(0, this.renderLockCount - 1);
     }
     async goTo(page) {
@@ -192,27 +299,108 @@ class GenusPdfViewerComponent {
             await this.render();
         }
     }
-    async zoomIn(step = 0.1) {
-        this.zoomSig.set(Math.min(this.maxZoom, this.zoomSig() + step));
+    async zoomIn(step = 0.1) { await this.applyZoomDelta(step); }
+    async zoomOut(step = 0.1) { await this.applyZoomDelta(-step); }
+    clampZoom(z) {
+        return Math.max(this.minZoom, Math.min(this.maxZoom, z));
+    }
+    cancelPreviewIfAny(container) {
+        if (!this.previewActive || !container)
+            return;
+        const target = this.continuous ? (container.querySelector('.pdf-content') || container) : (container.querySelector('canvas') || container);
+        try {
+            target.style.transform = '';
+            target.style.willChange = '';
+            target.style.transition = '';
+        }
+        catch { }
+        this.previewActive = false;
+        this.lastZoomClient = null;
+    }
+    async applyZoomDelta(delta) {
+        const oldZoom = this.zoomSig();
+        const newZoom = this.clampZoom(oldZoom + delta);
+        if (Math.abs(newZoom - oldZoom) < 0.0001)
+            return;
         const container = this.continuous ? this.stage?.nativeElement : this.singleStage?.nativeElement;
-        if (container) {
-            const anchor = this.captureScrollAnchor(container) || undefined;
-            await this.renderAllPages(anchor);
+        // If a preview transform is active (from pinch/wheel), clear it before capturing anchor or animating
+        this.cancelPreviewIfAny(container);
+        const anchor = container ? this.captureScrollAnchor(container) || undefined : undefined;
+        const ratio = newZoom / oldZoom;
+        if (this.zoomAnimation && container && !this.zoomAnimInFlight) {
+            this.zoomAnimInFlight = true;
+            this.renderLockCount++;
+            // Update UI value immediately
+            this.zoomSig.set(newZoom);
+            try {
+                await this.runZoomAnimation(container, ratio);
+            }
+            finally {
+                // Release the render lock before triggering the actual re-render
+                this.renderLockCount = Math.max(0, this.renderLockCount - 1);
+                await this.safeReRenderWithCancellation(anchor);
+                this.zoomAnimInFlight = false;
+            }
         }
         else {
-            await this.render();
+            this.zoomSig.set(newZoom);
+            await this.safeReRenderWithCancellation(anchor);
         }
     }
-    async zoomOut(step = 0.1) {
-        this.zoomSig.set(Math.max(this.minZoom, this.zoomSig() - step));
-        const container = this.continuous ? this.stage?.nativeElement : this.singleStage?.nativeElement;
-        if (container) {
-            const anchor = this.captureScrollAnchor(container) || undefined;
-            await this.renderAllPages(anchor);
+    async runZoomAnimation(container, ratio) {
+        if (Math.abs(ratio - 1) < 0.0001)
+            return;
+        const { target, originX, originY } = this.getZoomAnimTarget(container);
+        return new Promise((resolve) => {
+            try {
+                const onDone = () => {
+                    cleanup();
+                    resolve();
+                };
+                const cleanup = () => {
+                    target.removeEventListener('transitionend', onEnd);
+                    target.style.transition = '';
+                    target.style.transform = '';
+                    target.style.transformOrigin = '';
+                    target.style.willChange = '';
+                };
+                const onEnd = () => onDone();
+                target.style.willChange = 'transform';
+                target.style.transformOrigin = `${Math.max(0, originX)}px ${Math.max(0, originY)}px`;
+                target.style.transition = 'none';
+                target.style.transform = 'scale(1)';
+                requestAnimationFrame(() => {
+                    target.addEventListener('transitionend', onEnd, { once: true });
+                    target.style.transition = `transform ${this.zoomAnimationMs}ms cubic-bezier(0.2,0,0,1)`;
+                    target.style.transform = `scale(${ratio})`;
+                    setTimeout(onDone, this.zoomAnimationMs + 60);
+                });
+            }
+            catch {
+                resolve();
+            }
+        });
+    }
+    getZoomAnimTarget(container) {
+        const isContinuous = this.continuous;
+        let target = null;
+        if (isContinuous) {
+            target = container.querySelector('.pdf-content');
+            if (!target)
+                target = container; // fallback
         }
         else {
-            await this.render();
+            target = container.querySelector('canvas');
+            if (!target)
+                target = container; // fallback
         }
+        const rectLeft = target.offsetLeft;
+        const rectTop = target.offsetTop;
+        // Prefer last gesture point (pinch center or wheel pointer) if available
+        const client = this.lastZoomClient;
+        const originX = client ? (container.scrollLeft + client.x - rectLeft) : (container.scrollLeft + container.clientWidth / 2 - rectLeft);
+        const originY = client ? (container.scrollTop + client.y - rectTop) : (container.scrollTop + container.clientHeight / 2 - rectTop);
+        return { target, originX, originY };
     }
     onScroll(evt) {
         const container = evt.target;
@@ -242,61 +430,80 @@ class GenusPdfViewerComponent {
     }
     async nextPage() { await this.goTo(this.pageSig() + 1); }
     async prevPage() { await this.goTo(this.pageSig() - 1); }
+    isZoomed() {
+        return Math.abs(this.zoomSig() - 1) > 0.0001;
+    }
+    async resetZoom() {
+        // Reset to exactly 1.0 (100%)
+        const delta = 1 - this.zoomSig();
+        await this.applyZoomDelta(delta);
+    }
+    async retryLoad() {
+        await this.loadDocument();
+        if (this.doc) {
+            const pages = this.doc.numPages;
+            if (this.pageSig() < 1)
+                this.pageSig.set(1);
+            if (this.pageSig() > pages)
+                this.pageSig.set(pages);
+            await this.render();
+        }
+    }
     onPointerDown(evt, containerEl) {
-        // Track pointers for pinch and pan
-        this.activePointers.set(evt.pointerId, { x: evt.clientX, y: evt.clientY });
-        // If two pointers → start pinch gesture
-        if (this.activePointers.size === 2) {
-            const pts = Array.from(this.activePointers.values());
-            this.pinchStartDistance = Math.hypot(pts[1].x - pts[0].x, pts[1].y - pts[0].y);
-            this.pinchStartZoom = this.zoomSig();
-            this.pinchAnchorClient = {
-                x: (pts[0].x + pts[1].x) / 2,
-                y: (pts[0].y + pts[1].y) / 2,
-            };
-            this.pinchActive = true;
-            containerEl.style.touchAction = 'none';
-            containerEl.setPointerCapture?.(evt.pointerId);
-            const onMove = (e) => {
-                if (!this.pinchActive)
+        // Pinch-to-zoom (two pointers)
+        if (evt.pointerType === 'touch') {
+            this.activePointers.set(evt.pointerId, { x: evt.clientX, y: evt.clientY, type: evt.pointerType });
+            const onPointerMove = (e) => {
+                if (e.pointerType === 'touch')
+                    this.activePointers.set(e.pointerId, { x: e.clientX, y: e.clientY, type: e.pointerType });
+                const touches = Array.from(this.activePointers.entries()).map(([id, p]) => ({ pointerId: id, clientX: p.x, clientY: p.y }))
+                    .slice(0, 2);
+                if (touches.length === 2) {
+                    const [a, b] = touches;
+                    const dist = Math.hypot(a.clientX - b.clientX, a.clientY - b.clientY);
+                    if (!this.pinchState) {
+                        this.pinchState = { id1: a.pointerId, id2: b.pointerId, startDist: Math.max(1, dist), startZoom: this.zoomSig() };
+                        const rect = containerEl.getBoundingClientRect();
+                        this.lastZoomClient = { x: ((a.clientX + b.clientX) / 2) - rect.left, y: ((a.clientY + b.clientY) / 2) - rect.top };
+                    }
+                    const scale = dist / Math.max(1, this.pinchState.startDist);
+                    const adjusted = 1 + (scale - 1) * this.PINCH_SENSITIVITY;
+                    const desiredAdj = this.clampZoom(this.pinchState.startZoom * adjusted);
+                    this.previewZoom(containerEl, desiredAdj);
+                    e.preventDefault();
                     return;
-                const p = this.activePointers.get(e.pointerId);
-                if (p) {
-                    p.x = e.clientX;
-                    p.y = e.clientY;
                 }
-                if (this.activePointers.size < 2)
-                    return;
-                const all = Array.from(this.activePointers.values());
-                const dist = Math.hypot(all[1].x - all[0].x, all[1].y - all[0].y);
-                const scale = dist / Math.max(1, this.pinchStartDistance);
-                const targetZoom = Math.max(this.minZoom, Math.min(this.maxZoom, this.pinchStartZoom * scale));
-                if (!this.pinchRaf) {
-                    this.pinchRaf = requestAnimationFrame(() => {
-                        this.pinchRaf = 0;
-                        this.zoomSig.set(targetZoom);
-                        this.renderWithAnchor(containerEl, this.pinchAnchorClient);
-                    });
+                // When pinch ends (not exactly two touches), commit render if we were previewing
+                if (this.pinchState) {
+                    const final = this.zoomSig();
+                    this.commitPreviewZoom(containerEl, final);
+                    this.pinchState = null;
+                    this.lastZoomClient = null;
                 }
-                e.preventDefault();
             };
-            const onEnd = (e) => {
+            const onPointerEnd = (e) => {
                 this.activePointers.delete(e.pointerId);
-                if (this.activePointers.size <= 1) {
-                    this.pinchActive = false;
-                    containerEl.releasePointerCapture?.(evt.pointerId);
-                    containerEl.removeEventListener('pointermove', onMove);
-                    containerEl.removeEventListener('pointerup', onEnd);
-                    containerEl.removeEventListener('pointercancel', onEnd);
-                    containerEl.style.touchAction = '';
+                const touches = Array.from(this.activePointers.values());
+                if (touches.length !== 2 && this.pinchState) {
+                    const final = this.zoomSig();
+                    this.commitPreviewZoom(containerEl, final);
+                    this.pinchState = null;
+                    this.lastZoomClient = null;
                 }
+                cleanup();
             };
-            containerEl.addEventListener('pointermove', onMove);
-            containerEl.addEventListener('pointerup', onEnd);
-            containerEl.addEventListener('pointercancel', onEnd);
+            const cleanup = () => {
+                containerEl.removeEventListener('pointermove', onPointerMove);
+                containerEl.removeEventListener('pointerup', onPointerEnd);
+                containerEl.removeEventListener('pointercancel', onPointerEnd);
+                this.activePointers.clear();
+            };
+            containerEl.addEventListener('pointermove', onPointerMove);
+            containerEl.addEventListener('pointerup', onPointerEnd);
+            containerEl.addEventListener('pointercancel', onPointerEnd);
             return;
         }
-        // Single-pointer: pan when canPan
+        // Mouse pan when canPan
         if (!this.canPan())
             return;
         this.isPanning.set(true);
@@ -307,9 +514,6 @@ class GenusPdfViewerComponent {
         containerEl.style.scrollBehavior = 'auto';
         containerEl.setPointerCapture?.(evt.pointerId);
         const move = (e) => {
-            if (this.pinchActive)
-                return; // ignore while pinching
-            this.activePointers.set(e.pointerId, { x: e.clientX, y: e.clientY });
             const dx = e.clientX - startX;
             const dy = e.clientY - startY;
             containerEl.scrollLeft = startLeft - dx;
@@ -317,7 +521,6 @@ class GenusPdfViewerComponent {
             e.preventDefault();
         };
         const end = (e) => {
-            this.activePointers.delete(e.pointerId);
             this.isPanning.set(false);
             containerEl.releasePointerCapture?.(evt.pointerId);
             containerEl.removeEventListener('pointermove', move);
@@ -329,32 +532,109 @@ class GenusPdfViewerComponent {
         containerEl.addEventListener('pointerup', end);
         containerEl.addEventListener('pointercancel', end);
     }
-    async renderWithAnchor(containerEl, anchorClient) {
-        if (this.continuous) {
-            // For pinch, anchor around the midpoint of the gesture if available
-            const anchor = this.captureScrollAnchor(containerEl, anchorClient);
-            await this.renderAllPages(anchor || undefined);
+    getActiveTouches(containerEl) {
+        // We capture pointer events only on this element; maintain list by querying PointerEvent.getCoalescedEvents not available broadly.
+        // Instead, rely on touches reported in native events; browsers will deliver move events for all active pointers targeting the element.
+        // Here we cannot query directly; so we return an empty array and use move handler state. For simplicity, we derive from event stream only.
+        // This helper remains for future extension; current logic passes actual events to compute pinch.
+        return [];
+    }
+    onWheel(evt, containerEl) {
+        const isCtrlZoom = evt.ctrlKey || evt.metaKey;
+        if (!isCtrlZoom)
+            return;
+        evt.preventDefault();
+        const rect = containerEl.getBoundingClientRect();
+        // Record gesture point relative to container
+        this.lastZoomClient = { x: evt.clientX - rect.left, y: evt.clientY - rect.top };
+        if (this.wheelRaf)
+            cancelAnimationFrame(this.wheelRaf);
+        if (this.wheelCommitTimer)
+            clearTimeout(this.wheelCommitTimer);
+        const delta = -evt.deltaY;
+        const step = delta > 0 ? this.WHEEL_STEP : -this.WHEEL_STEP;
+        const desired = this.clampZoom(this.zoomSig() + step);
+        this.previewZoom(containerEl, desired);
+        this.wheelRaf = requestAnimationFrame(() => {
+            this.wheelCommitTimer = setTimeout(() => {
+                this.commitPreviewZoom(containerEl, this.zoomSig());
+                this.lastZoomClient = null;
+            }, this.gestureAnimationMs + 20);
+        });
+    }
+    previewZoom(container, newZoom) {
+        const oldZoom = this.zoomSig();
+        if (Math.abs(newZoom - oldZoom) < 0.0001)
+            return;
+        const ratio = newZoom / oldZoom;
+        const target = this.continuous ? (container.querySelector('.pdf-content') || container) : (container.querySelector('canvas') || container);
+        const origin = this.getZoomAnimTarget(container);
+        target.style.willChange = 'transform';
+        target.style.transformOrigin = `${Math.max(0, origin.originX)}px ${Math.max(0, origin.originY)}px`;
+        target.style.transition = `transform ${this.gestureAnimationMs}ms cubic-bezier(0.2,0,0,1)`;
+        target.style.transform = `scale(${ratio})`;
+        this.zoomSig.set(newZoom);
+        this.previewActive = true;
+    }
+    async commitPreviewZoom(container, expectedZoom) {
+        // Clear transform and re-render once; cancel any in-flight render tasks
+        const target = this.continuous ? (container.querySelector('.pdf-content') || container) : (container.querySelector('canvas') || container);
+        target.style.transform = '';
+        target.style.willChange = '';
+        target.style.transition = '';
+        const anchor = this.captureScrollAnchor(container) || undefined;
+        if (this.previewActive) {
+            await this.safeReRenderWithCancellation(anchor);
+            this.previewActive = false;
+        }
+    }
+    async safeReRenderWithCancellation(anchor) {
+        // If a render is in progress, queue once with the most recent anchor
+        if (this.renderLockCount > 0) {
+            this.reRenderQueued = true;
             if (anchor)
-                this.restoreScrollAnchor(containerEl, anchor);
+                this.pendingAnchor = anchor;
             return;
         }
-        await this.render();
+        try {
+            this.renderLockCount++;
+            if (this.continuous) {
+                await this.renderAllPages(anchor);
+            }
+            else {
+                await this.render();
+            }
+        }
+        finally {
+            this.renderLockCount = Math.max(0, this.renderLockCount - 1);
+            if (this.renderLockCount === 0 && this.reRenderQueued) {
+                const nextAnchor = this.pendingAnchor;
+                this.reRenderQueued = false;
+                this.pendingAnchor = undefined;
+                await this.safeReRenderWithCancellation(nextAnchor);
+            }
+        }
     }
     captureScrollAnchor(container, client) {
         try {
             const pages = Array.from(container.querySelectorAll('.pdf-page'));
-            if (pages.length === 0)
+            const centerY = container.scrollTop + container.clientHeight / 2;
+            if (pages.length > 0) {
+                let pageEl = pages.find(el => (el.offsetTop <= centerY && (el.offsetTop + el.offsetHeight) >= centerY))
+                    || pages.find(el => (el.offsetTop + el.offsetHeight) > (container.scrollTop + 1))
+                    || pages[0];
+                const page = parseInt(pageEl.getAttribute('data-page') || '1', 10);
+                const height = Math.max(1, pageEl.offsetHeight);
+                const ratio = Math.max(0, Math.min(1, (centerY - pageEl.offsetTop) / height));
+                return { page, ratio };
+            }
+            // Fallback: single-canvas mode
+            const canvas = container.querySelector('canvas');
+            if (!canvas)
                 return null;
-            const centerY = (typeof client?.y === 'number')
-                ? (client.y - container.getBoundingClientRect().top + container.scrollTop)
-                : (container.scrollTop + container.clientHeight / 2);
-            let pageEl = pages.find(el => (el.offsetTop <= centerY && (el.offsetTop + el.offsetHeight) >= centerY))
-                || pages.find(el => (el.offsetTop + el.offsetHeight) > (container.scrollTop + 1))
-                || pages[0];
-            const page = parseInt(pageEl.getAttribute('data-page') || '1', 10);
-            const height = Math.max(1, pageEl.offsetHeight);
-            const ratio = Math.max(0, Math.min(1, (centerY - pageEl.offsetTop) / height));
-            return { page, ratio };
+            const height = Math.max(1, canvas.offsetHeight);
+            const ratio = Math.max(0, Math.min(1, (centerY - canvas.offsetTop) / height));
+            return { page: 1, ratio };
         }
         catch {
             return null;
@@ -362,13 +642,17 @@ class GenusPdfViewerComponent {
     }
     restoreScrollAnchor(container, anchor) {
         try {
-            const el = container.querySelector(`[data-page="${anchor.page}"]`);
+            let el = container.querySelector(`[data-page="${anchor.page}"]`);
+            if (!el)
+                el = container.querySelector('canvas');
             if (!el)
                 return;
             const prevBehavior = container.style.scrollBehavior;
             container.style.scrollBehavior = 'auto';
             const height = Math.max(1, el.offsetHeight);
-            container.scrollTop = el.offsetTop + anchor.ratio * height;
+            const desired = el.offsetTop + anchor.ratio * height - container.clientHeight / 2;
+            const maxScroll = Math.max(0, container.scrollHeight - container.clientHeight);
+            container.scrollTop = Math.max(0, Math.min(maxScroll, desired));
             container.style.scrollBehavior = prevBehavior;
         }
         catch { }
@@ -376,31 +660,83 @@ class GenusPdfViewerComponent {
     async download() {
         const filename = this.deriveFilename();
         const link = document.createElement('a');
+        const isIOS = /iPad|iPhone|iPod/.test(navigator.userAgent) || (navigator.platform === 'MacIntel' && navigator.maxTouchPoints > 1);
+        let popup = null;
+        if (isIOS) {
+            // Open a tab synchronously to stay within user gesture
+            try {
+                popup = window.open('', '_blank', 'noopener,noreferrer');
+            }
+            catch {
+                popup = null;
+            }
+        }
         const blob = await this.createBlobFromSrc();
         if (blob) {
             const url = URL.createObjectURL(blob);
-            link.href = url;
-            link.download = filename;
+            if (isIOS) {
+                if (popup) {
+                    try {
+                        popup.location.href = url;
+                    }
+                    catch { /* ignore */ }
+                    // Revoke later to allow the view to load fully
+                    setTimeout(() => URL.revokeObjectURL(url), 30000);
+                }
+                else {
+                    const a = document.createElement('a');
+                    a.href = url;
+                    a.target = '_blank';
+                    a.rel = 'noopener';
+                    document.body.appendChild(a);
+                    a.click();
+                    a.remove();
+                    setTimeout(() => URL.revokeObjectURL(url), 30000);
+                }
+            }
+            else {
+                link.href = url;
+                link.download = filename;
+                link.rel = 'noopener';
+                link.style.display = 'none';
+                document.body.appendChild(link);
+                link.click();
+                link.remove();
+                URL.revokeObjectURL(url);
+            }
+            return;
+        }
+        // Fallback: cross-origin without CORS
+        const href = typeof this.src === 'string' ? this.src : (this.src instanceof URL ? this.src.toString() : '');
+        if (!href)
+            return;
+        if (isIOS) {
+            if (popup) {
+                try {
+                    popup.location.href = href;
+                }
+                catch { /* ignore */ }
+            }
+            else {
+                const a = document.createElement('a');
+                a.href = href;
+                a.target = '_blank';
+                a.rel = 'noopener';
+                document.body.appendChild(a);
+                a.click();
+                a.remove();
+            }
+        }
+        else {
+            link.href = href;
+            link.target = '_blank';
             link.rel = 'noopener';
+            link.download = filename; // browsers may ignore for cross-origin
             link.style.display = 'none';
             document.body.appendChild(link);
             link.click();
             link.remove();
-            URL.revokeObjectURL(url);
-            return;
         }
-        // Fallback: cross-origin without CORS; open in new tab rather than current window
-        const href = typeof this.src === 'string' ? this.src : (this.src instanceof URL ? this.src.toString() : '');
-        if (!href)
-            return;
-        link.href = href;
-        link.target = '_blank';
-        link.rel = 'noopener';
-        link.download = filename; // browsers may ignore for cross-origin
-        link.style.display = 'none';
-        document.body.appendChild(link);
-        link.click();
-        link.remove();
     }
     async print() {
         // Robust, plugin-free printing by rendering pages to images
@@ -549,7 +885,7 @@ class GenusPdfViewerComponent {
         return src;
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.1", ngImport: i0, type: GenusPdfViewerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.1", type: GenusPdfViewerComponent, isStandalone: true, selector: "genus-pdf-viewer", inputs: { src: "src", page: "page", zoom: "zoom", maxZoom: "maxZoom", minZoom: "minZoom", fit: "fit", disableTextLayer: "disableTextLayer", continuous: "continuous", showToolbar: "showToolbar" }, viewQueries: [{ propertyName: "canvas", first: true, predicate: ["canvas"], descendants: true }, { propertyName: "singleStage", first: true, predicate: ["singleStage"], descendants: true }, { propertyName: "stage", first: true, predicate: ["stage"], descendants: true }], usesOnChanges: true, ngImport: i0, template: `
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.1", type: GenusPdfViewerComponent, isStandalone: true, selector: "genus-pdf-viewer", inputs: { src: "src", page: "page", zoom: "zoom", maxZoom: "maxZoom", minZoom: "minZoom", fit: "fit", disableTextLayer: "disableTextLayer", continuous: "continuous", showToolbar: "showToolbar", zoomAnimation: "zoomAnimation", zoomAnimationMs: "zoomAnimationMs", gestureAnimationMs: "gestureAnimationMs" }, viewQueries: [{ propertyName: "canvas", first: true, predicate: ["canvas"], descendants: true }, { propertyName: "singleStage", first: true, predicate: ["singleStage"], descendants: true }, { propertyName: "stage", first: true, predicate: ["stage"], descendants: true }], usesOnChanges: true, ngImport: i0, template: `
     <div class="genus-pdf-shell">
       <ng-content select="[toolbar]"></ng-content>
 
@@ -557,12 +893,13 @@ class GenusPdfViewerComponent {
         <button type="button" title="Zoom out" aria-label="Zoom out" (click)="zoomOut()">−</button>
         <span class="pct">{{ (zoomSig() * 100) | number:'1.0-0' }}%</span>
         <button type="button" title="Zoom in" aria-label="Zoom in" (click)="zoomIn()">＋</button>
+        <button type="button" *ngIf="isZoomed()" title="Reset zoom to 100%" aria-label="Reset zoom to 100%" (click)="resetZoom()">100%</button>
         <span class="spacer"></span>
         <button type="button" title="Previous page" aria-label="Previous page" (click)="prevPage()" [disabled]="pageSig() <= 1">⟨</button>
         <span>{{ pageSig() }} / {{ doc ? doc.numPages : 0 }}</span>
         <button type="button" title="Next page" aria-label="Next page" (click)="nextPage()" [disabled]="doc ? pageSig() >= doc.numPages : true">⟩</button>
         <span class="spacer"></span>
-        <button type="button" title="Download" aria-label="Download" (click)="download()">
+        <button type="button" class="download-btn" title="Download" aria-label="Download" (click)="download()">
           <svg width="16" height="16" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
             <path d="M12 3v10m0 0 4-4m-4 4-4-4M5 15v3a3 3 0 0 0 3 3h8a3 3 0 0 0 3-3v-3" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
           </svg>
@@ -570,15 +907,28 @@ class GenusPdfViewerComponent {
         </button>
       </div>
 
-      <div class="genus-pdf-stage" #singleStage [style.display]="continuous ? 'none' : 'flex'" [class.can-pan]="canPan()" [class.is-panning]="isPanning()" (pointerdown)="onPointerDown($event, singleStage)" (scroll)="onScroll($event)">
+      <div class="genus-pdf-stage" #singleStage [style.display]="continuous ? 'none' : 'flex'" [class.can-pan]="canPan()" [class.is-panning]="isPanning()" (pointerdown)="onPointerDown($event, singleStage)" (wheel)="onWheel($event, singleStage)" (scroll)="onScroll($event)">
         <div class="genus-pdf-overlay" *ngIf="loading()"><div class="spinner" aria-label="Loading"></div></div>
-        <div class="genus-pdf-overlay error" *ngIf="error()"><span>{{ error() }}</span></div>
+        <div class="genus-pdf-overlay error" *ngIf="error()">
+          <div style="display:flex;flex-direction:column;gap:8px;align-items:center;">
+            <span>{{ error() }}</span>
+            <button type="button" (click)="retryLoad()">Retry</button>
+          </div>
+        </div>
         <canvas #canvas></canvas>
       </div>
 
-      <div class="genus-pdf-stage genus-pdf-stage--continuous" #stage [style.display]="continuous ? 'block' : 'none'" [class.can-pan]="canPan()" [class.is-panning]="isPanning()" (pointerdown)="onPointerDown($event, stage)" (scroll)="onScroll($event)"></div>
+      <div class="genus-pdf-stage genus-pdf-stage--continuous" #stage [style.display]="continuous ? 'block' : 'none'" [class.can-pan]="canPan()" [class.is-panning]="isPanning()" (pointerdown)="onPointerDown($event, stage)" (wheel)="onWheel($event, stage)" (scroll)="onScroll($event)">
+        <div class="genus-pdf-overlay" *ngIf="loading()"><div class="spinner" aria-label="Loading"></div></div>
+        <div class="genus-pdf-overlay error" *ngIf="error()">
+          <div style="display:flex;flex-direction:column;gap:8px;align-items:center;">
+            <span>{{ error() }}</span>
+            <button type="button" (click)="retryLoad()">Retry</button>
+          </div>
+        </div>
+      </div>
     </div>
-  `, isInline: true, styles: [".genus-pdf-shell{display:flex;flex-direction:column;gap:8px;width:100%;height:100%;background:#f3f4f6}.genus-pdf-toolbar{position:sticky;top:0;z-index:2;display:flex;align-items:center;gap:8px;padding:6px 8px;border:1px solid #e5e7eb;border-radius:8px;background:#ffffffd9;-webkit-backdrop-filter:saturate(1.2) blur(6px);backdrop-filter:saturate(1.2) blur(6px);box-shadow:0 1px 2px #0000000f}.genus-pdf-toolbar .pct{min-width:48px;text-align:center;font-variant-numeric:tabular-nums;color:#111827}.genus-pdf-toolbar button{appearance:none;border:1px solid #e5e7eb;background:#fff;padding:6px 10px;border-radius:6px;cursor:pointer;color:#111827;font-size:14px;line-height:1;font-weight:500;min-width:32px;-webkit-user-select:none;user-select:none;display:inline-flex;align-items:center;gap:6px}.genus-pdf-toolbar button:disabled{opacity:.5;cursor:not-allowed}.genus-pdf-toolbar .spacer{flex:1}.genus-pdf-stage{position:relative;flex:1;overflow:auto;display:flex;align-items:flex-start;justify-content:center;background:#fafafa;touch-action:pan-y;-webkit-overflow-scrolling:touch;overscroll-behavior:contain;overscroll-behavior-y:contain}.genus-pdf-stage.can-pan{cursor:grab;touch-action:none}.genus-pdf-stage.is-panning{cursor:grabbing}.genus-pdf-stage--continuous{display:block;align-items:unset;justify-content:unset;padding:8px;scroll-behavior:smooth}.genus-pdf-stage--continuous .pdf-page{margin:0 auto 12px;background:#fff;box-shadow:0 1px 2px #00000014}canvas{display:block;max-width:100%;height:auto}.genus-pdf-overlay{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:#ffffffb3;z-index:1}.genus-pdf-overlay.error{background:transparent}.spinner{width:28px;height:28px;border-radius:50%;border:3px solid #e5e7eb;border-top-color:#111827;animation:spin 1s linear infinite}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: i1.DecimalPipe, name: "number" }] });
+  `, isInline: true, styles: [".genus-pdf-shell{display:flex;flex-direction:column;gap:8px;width:100%;height:100%;background:#f3f4f6}.genus-pdf-toolbar{position:sticky;top:0;z-index:2;display:flex;align-items:center;gap:8px;padding:6px 8px;border:1px solid #e5e7eb;border-radius:8px;background:#ffffffd9;-webkit-backdrop-filter:saturate(1.2) blur(6px);backdrop-filter:saturate(1.2) blur(6px);box-shadow:0 1px 2px #0000000f}.genus-pdf-toolbar .pct{min-width:48px;text-align:center;font-variant-numeric:tabular-nums;color:#111827}.genus-pdf-toolbar button{appearance:none;border:1px solid #e5e7eb;background:#fff;padding:6px 10px;border-radius:6px;cursor:pointer;color:#111827;font-size:14px;line-height:1;font-weight:500;min-width:32px;-webkit-user-select:none;user-select:none;display:inline-flex;align-items:center;gap:6px}.genus-pdf-toolbar button.download-btn{background:#2563eb;border-color:#2563eb;color:#fff}.genus-pdf-toolbar button.download-btn:hover{background:#1d4ed8;border-color:#1d4ed8}.genus-pdf-toolbar button:disabled{opacity:.5;cursor:not-allowed}.genus-pdf-toolbar .spacer{flex:1}.genus-pdf-stage{position:relative;flex:1;overflow:auto;display:flex;align-items:flex-start;justify-content:center;background:#fafafa;touch-action:pan-y;-webkit-overflow-scrolling:touch;overscroll-behavior:contain;overscroll-behavior-y:contain}.genus-pdf-stage.can-pan{cursor:grab;touch-action:none}.genus-pdf-stage.is-panning{cursor:grabbing}.genus-pdf-stage--continuous{display:block;align-items:unset;justify-content:unset;padding:8px;scroll-behavior:smooth}.genus-pdf-stage--continuous .pdf-page{margin:0 auto 12px;background:#fff;box-shadow:0 1px 2px #00000014}canvas{display:block;max-width:100%;height:auto}.genus-pdf-overlay{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:#ffffffb3;z-index:1}.genus-pdf-overlay.error{background:transparent}.spinner{width:28px;height:28px;border-radius:50%;border:3px solid #e5e7eb;border-top-color:#111827;animation:spin 1s linear infinite}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: i1.DecimalPipe, name: "number" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.1", ngImport: i0, type: GenusPdfViewerComponent, decorators: [{
             type: Component,
@@ -590,12 +940,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.1", ngImpor
         <button type="button" title="Zoom out" aria-label="Zoom out" (click)="zoomOut()">−</button>
         <span class="pct">{{ (zoomSig() * 100) | number:'1.0-0' }}%</span>
         <button type="button" title="Zoom in" aria-label="Zoom in" (click)="zoomIn()">＋</button>
+        <button type="button" *ngIf="isZoomed()" title="Reset zoom to 100%" aria-label="Reset zoom to 100%" (click)="resetZoom()">100%</button>
         <span class="spacer"></span>
         <button type="button" title="Previous page" aria-label="Previous page" (click)="prevPage()" [disabled]="pageSig() <= 1">⟨</button>
         <span>{{ pageSig() }} / {{ doc ? doc.numPages : 0 }}</span>
         <button type="button" title="Next page" aria-label="Next page" (click)="nextPage()" [disabled]="doc ? pageSig() >= doc.numPages : true">⟩</button>
         <span class="spacer"></span>
-        <button type="button" title="Download" aria-label="Download" (click)="download()">
+        <button type="button" class="download-btn" title="Download" aria-label="Download" (click)="download()">
           <svg width="16" height="16" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
             <path d="M12 3v10m0 0 4-4m-4 4-4-4M5 15v3a3 3 0 0 0 3 3h8a3 3 0 0 0 3-3v-3" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
           </svg>
@@ -603,15 +954,28 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.1", ngImpor
         </button>
       </div>
 
-      <div class="genus-pdf-stage" #singleStage [style.display]="continuous ? 'none' : 'flex'" [class.can-pan]="canPan()" [class.is-panning]="isPanning()" (pointerdown)="onPointerDown($event, singleStage)" (scroll)="onScroll($event)">
+      <div class="genus-pdf-stage" #singleStage [style.display]="continuous ? 'none' : 'flex'" [class.can-pan]="canPan()" [class.is-panning]="isPanning()" (pointerdown)="onPointerDown($event, singleStage)" (wheel)="onWheel($event, singleStage)" (scroll)="onScroll($event)">
         <div class="genus-pdf-overlay" *ngIf="loading()"><div class="spinner" aria-label="Loading"></div></div>
-        <div class="genus-pdf-overlay error" *ngIf="error()"><span>{{ error() }}</span></div>
+        <div class="genus-pdf-overlay error" *ngIf="error()">
+          <div style="display:flex;flex-direction:column;gap:8px;align-items:center;">
+            <span>{{ error() }}</span>
+            <button type="button" (click)="retryLoad()">Retry</button>
+          </div>
+        </div>
         <canvas #canvas></canvas>
       </div>
 
-      <div class="genus-pdf-stage genus-pdf-stage--continuous" #stage [style.display]="continuous ? 'block' : 'none'" [class.can-pan]="canPan()" [class.is-panning]="isPanning()" (pointerdown)="onPointerDown($event, stage)" (scroll)="onScroll($event)"></div>
+      <div class="genus-pdf-stage genus-pdf-stage--continuous" #stage [style.display]="continuous ? 'block' : 'none'" [class.can-pan]="canPan()" [class.is-panning]="isPanning()" (pointerdown)="onPointerDown($event, stage)" (wheel)="onWheel($event, stage)" (scroll)="onScroll($event)">
+        <div class="genus-pdf-overlay" *ngIf="loading()"><div class="spinner" aria-label="Loading"></div></div>
+        <div class="genus-pdf-overlay error" *ngIf="error()">
+          <div style="display:flex;flex-direction:column;gap:8px;align-items:center;">
+            <span>{{ error() }}</span>
+            <button type="button" (click)="retryLoad()">Retry</button>
+          </div>
+        </div>
+      </div>
     </div>
-  `, styles: [".genus-pdf-shell{display:flex;flex-direction:column;gap:8px;width:100%;height:100%;background:#f3f4f6}.genus-pdf-toolbar{position:sticky;top:0;z-index:2;display:flex;align-items:center;gap:8px;padding:6px 8px;border:1px solid #e5e7eb;border-radius:8px;background:#ffffffd9;-webkit-backdrop-filter:saturate(1.2) blur(6px);backdrop-filter:saturate(1.2) blur(6px);box-shadow:0 1px 2px #0000000f}.genus-pdf-toolbar .pct{min-width:48px;text-align:center;font-variant-numeric:tabular-nums;color:#111827}.genus-pdf-toolbar button{appearance:none;border:1px solid #e5e7eb;background:#fff;padding:6px 10px;border-radius:6px;cursor:pointer;color:#111827;font-size:14px;line-height:1;font-weight:500;min-width:32px;-webkit-user-select:none;user-select:none;display:inline-flex;align-items:center;gap:6px}.genus-pdf-toolbar button:disabled{opacity:.5;cursor:not-allowed}.genus-pdf-toolbar .spacer{flex:1}.genus-pdf-stage{position:relative;flex:1;overflow:auto;display:flex;align-items:flex-start;justify-content:center;background:#fafafa;touch-action:pan-y;-webkit-overflow-scrolling:touch;overscroll-behavior:contain;overscroll-behavior-y:contain}.genus-pdf-stage.can-pan{cursor:grab;touch-action:none}.genus-pdf-stage.is-panning{cursor:grabbing}.genus-pdf-stage--continuous{display:block;align-items:unset;justify-content:unset;padding:8px;scroll-behavior:smooth}.genus-pdf-stage--continuous .pdf-page{margin:0 auto 12px;background:#fff;box-shadow:0 1px 2px #00000014}canvas{display:block;max-width:100%;height:auto}.genus-pdf-overlay{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:#ffffffb3;z-index:1}.genus-pdf-overlay.error{background:transparent}.spinner{width:28px;height:28px;border-radius:50%;border:3px solid #e5e7eb;border-top-color:#111827;animation:spin 1s linear infinite}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}\n"] }]
+  `, styles: [".genus-pdf-shell{display:flex;flex-direction:column;gap:8px;width:100%;height:100%;background:#f3f4f6}.genus-pdf-toolbar{position:sticky;top:0;z-index:2;display:flex;align-items:center;gap:8px;padding:6px 8px;border:1px solid #e5e7eb;border-radius:8px;background:#ffffffd9;-webkit-backdrop-filter:saturate(1.2) blur(6px);backdrop-filter:saturate(1.2) blur(6px);box-shadow:0 1px 2px #0000000f}.genus-pdf-toolbar .pct{min-width:48px;text-align:center;font-variant-numeric:tabular-nums;color:#111827}.genus-pdf-toolbar button{appearance:none;border:1px solid #e5e7eb;background:#fff;padding:6px 10px;border-radius:6px;cursor:pointer;color:#111827;font-size:14px;line-height:1;font-weight:500;min-width:32px;-webkit-user-select:none;user-select:none;display:inline-flex;align-items:center;gap:6px}.genus-pdf-toolbar button.download-btn{background:#2563eb;border-color:#2563eb;color:#fff}.genus-pdf-toolbar button.download-btn:hover{background:#1d4ed8;border-color:#1d4ed8}.genus-pdf-toolbar button:disabled{opacity:.5;cursor:not-allowed}.genus-pdf-toolbar .spacer{flex:1}.genus-pdf-stage{position:relative;flex:1;overflow:auto;display:flex;align-items:flex-start;justify-content:center;background:#fafafa;touch-action:pan-y;-webkit-overflow-scrolling:touch;overscroll-behavior:contain;overscroll-behavior-y:contain}.genus-pdf-stage.can-pan{cursor:grab;touch-action:none}.genus-pdf-stage.is-panning{cursor:grabbing}.genus-pdf-stage--continuous{display:block;align-items:unset;justify-content:unset;padding:8px;scroll-behavior:smooth}.genus-pdf-stage--continuous .pdf-page{margin:0 auto 12px;background:#fff;box-shadow:0 1px 2px #00000014}canvas{display:block;max-width:100%;height:auto}.genus-pdf-overlay{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:#ffffffb3;z-index:1}.genus-pdf-overlay.error{background:transparent}.spinner{width:28px;height:28px;border-radius:50%;border:3px solid #e5e7eb;border-top-color:#111827;animation:spin 1s linear infinite}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}\n"] }]
         }], ctorParameters: () => [], propDecorators: { src: [{
                 type: Input
             }], page: [{
@@ -630,6 +994,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.1", ngImpor
                 type: Input
             }], showToolbar: [{
                 type: Input
+            }], zoomAnimation: [{
+                type: Input
+            }], zoomAnimationMs: [{
+                type: Input
+            }], gestureAnimationMs: [{
+                type: Input
             }], canvas: [{
                 type: ViewChild,
                 args: ['canvas', { static: false }]
@@ -646,23 +1016,24 @@ function initPdfWorkerFactory(cfg, platformId) {
     return () => {
         if (!isPlatformBrowser(platformId))
             return;
-        const tryModuleWorker = cfg.tryModuleWorker ?? true;
-        // 1) First, always try a real ESM module worker (best for Amplify)
+        const defaults = {
+            tryModuleWorker: true,
+            workerSrc: '/assets/pdf.worker.min.mjs',
+        };
+        const merged = { ...defaults, ...cfg };
+        // 1) Try an ESM module worker (most robust across modern browsers)
         try {
-            if (tryModuleWorker && 'Worker' in window) {
+            if (merged.tryModuleWorker && 'Worker' in window) {
                 const worker = new Worker(new URL('pdfjs-dist/build/pdf.worker.min.mjs', import.meta.url), { type: 'module' });
                 pdfjsLib.GlobalWorkerOptions.workerPort = worker;
                 return;
             }
         }
         catch {
-            /* fall through to workerSrc fallback */
-        }
-        // 2) Fallback: classic worker path (only if you explicitly pass one)
-        const workerSrc = cfg.workerSrc;
-        if (workerSrc) {
-            pdfjsLib.GlobalWorkerOptions.workerSrc = workerSrc;
+            // fall back below
         }
+        // 2) Fallback: classic worker path served by the app
+        pdfjsLib.GlobalWorkerOptions.workerSrc = merged.workerSrc;
     };
 }
 function provideGenusPdfViewer(cfg = {}) {