@design.estate/dees-catalog 6.12.1 → 7.0.0

package/ts_web/elements/00group-media/dees-pdf-viewer/component.ts

@@ -1,5 +1,16 @@
 import { DeesElement, property, html, customElement, type TemplateResult, directives } from '@design.estate/dees-element';
+import {
+  TextLayer,
+  type PDFDocumentProxy,
+  type PDFPageProxy,
+  type RenderTask,
+} from 'pdfjs-dist';
 import { PdfManager } from '../dees-pdf-shared/PdfManager.js';
+import {
+  raceWithAbort,
+  settlePromisesWithin,
+  waitForAnimationFrame,
+} from '../dees-pdf-shared/utils.js';
 import { viewerStyles } from './styles.js';
 import { demo as demoFunc } from './demo.js';
 import '../../00group-utility/dees-icon/dees-icon.js';
@@ -13,6 +24,24 @@ declare global {
 
 type RenderState = 'idle' | 'loading' | 'rendering-main' | 'rendering-thumbs' | 'rendered' | 'error' | 'disposed';
 
+interface ILoadOperation {
+  key: string;
+  promise: Promise<void>;
+}
+
+interface IRenderRecoveryState {
+  currentPage: number;
+  currentZoom: number;
+  viewportMode: 'auto' | 'page-fit' | 'page-width' | 'custom';
+}
+
+const pipelineSettlementGraceMs = 2_500;
+
+interface ITextLayerRenderTask {
+  textLayer: TextLayer;
+  promise: Promise<unknown>;
+}
+
 @customElement('dees-pdf-viewer')
 export class DeesPdfViewer extends DeesElement {
   public static demo = demoFunc;
@@ -61,19 +90,38 @@ export class DeesPdfViewer extends DeesElement {
   @property({ type: Number })
   accessor pdfFileSize: number = 0;
 
-  private pdfDocument: any;
+  private pdfDocument: PDFDocumentProxy | null = null;
+  private pdfLoadPromise: Promise<PDFDocumentProxy> | null = null;
+  private loadOperation: ILoadOperation | null = null;
+  private loadGeneration = 0;
+  private connectionEpoch = 0;
+  private cleanupPromise: Promise<void> | null = null;
+  private renderAdmissionOpen = false;
+  private renderGeneration = 0;
   private renderState: RenderState = 'idle';
   private renderAbortController: AbortController | null = null;
   private pageRendering: boolean = false;
   private pageNumPending: number | null = null;
   private currentRenderTask: any = null;
   private currentRenderPromise: Promise<void> | null = null;
-  private thumbnailRenderTasks: any[] = [];
-  private pageRenderTasks: Map<number, any> = new Map();
-  private textLayerRenderTasks: Map<number, any> = new Map();
+  private thumbnailRenderTasks = new Set<RenderTask>();
+  private thumbnailRenderPromise: Promise<void> | null = null;
+  private thumbnailRenderGeneration = 0;
+  private thumbnailRenderQueued = false;
+  private thumbnailRenderQueueEpoch = 0;
+  private pageRenderTasks = new Map<number, RenderTask>();
+  private pageRenderPipelines = new Set<Promise<void>>();
+  private documentUsePipelines = new Set<Promise<void>>();
+  private rerenderPromise: Promise<void> | null = null;
+  private rerenderQueued = false;
+  private rerenderQueueEpoch = 0;
+  private rerenderRecoveryTimeout?: number;
+  private textLayerRenderTasks = new Map<number, ITextLayerRenderTask>();
+  private textSelectionCleanupFunctions = new Map<number, () => void>();
   private canvas: HTMLCanvasElement | undefined;
   private ctx: CanvasRenderingContext2D | undefined;
   private viewerMain: HTMLElement | null = null;
+  private wheelEventTarget: HTMLElement | null = null;
   private resizeObserver?: ResizeObserver;
   private intersectionObserver?: IntersectionObserver;
   private scrollThrottleTimeout?: number;
@@ -268,35 +316,28 @@ export class DeesPdfViewer extends DeesElement {
   }
 
   public async connectedCallback() {
+    const connectionEpoch = ++this.connectionEpoch;
     await super.connectedCallback();
     await this.updateComplete;
+    if (!this.isConnected || connectionEpoch !== this.connectionEpoch) return;
     this.ensureViewerRefs();
-
-    // Generate a unique document ID for this connection
-    if (this.pdfUrl) {
-      this.documentId = `${this.pdfUrl}-${Date.now()}-${Math.random()}`;
-      await this.loadPdf();
+    const operationKey = `${connectionEpoch}:${this.pdfUrl}`;
+    if (this.loadOperation?.key === operationKey) {
+      await this.loadOperation.promise;
+    } else if (connectionEpoch > 1 || !this.pdfDocument) {
+      await this.schedulePdfLoad(connectionEpoch);
     }
   }
 
   public async disconnectedCallback() {
+    this.connectionEpoch += 1;
+    this.loadGeneration += 1;
+    this.renderAdmissionOpen = false;
+    this.renderAbortController?.abort();
+    const cleanupPromise = this.cleanupDocument();
     await super.disconnectedCallback();
-    this.resizeObserver?.disconnect();
-    this.resizeObserver = undefined;
-    this.intersectionObserver?.disconnect();
-    this.intersectionObserver = undefined;
-
-    // Clear scroll timeout
-    if (this.scrollThrottleTimeout) {
-      clearTimeout(this.scrollThrottleTimeout);
-      this.scrollThrottleTimeout = undefined;
-    }
-
-    // Mark as disposed and clean up
+    await cleanupPromise;
     this.renderState = 'disposed';
-    await this.cleanupDocument();
-
-    // Clear all references
     this.canvas = undefined;
     this.ctx = undefined;
   }
@@ -304,23 +345,52 @@ export class DeesPdfViewer extends DeesElement {
   public async updated(changedProperties: Map<PropertyKey, unknown>) {
     super.updated(changedProperties);
 
-    if (changedProperties.has('pdfUrl') && this.pdfUrl) {
-      const previousUrl = changedProperties.get('pdfUrl') as string | undefined;
-      if (previousUrl) {
-        PdfManager.releaseDocument(previousUrl);
+    if (changedProperties.has('pdfUrl') && this.isConnected) {
+      await this.schedulePdfLoad(this.connectionEpoch);
+    }
+
+    if (changedProperties.has('showSidebar') && !this.showSidebar) {
+      this.thumbnailRenderGeneration += 1;
+      this.thumbnailRenderQueued = false;
+      for (const task of this.thumbnailRenderTasks) {
+        try {
+          task.cancel();
+        } catch {
+          // The scheduler still owns each task promise until it settles.
+        }
       }
-      // Generate new document ID for new URL
-      this.documentId = `${this.pdfUrl}-${Date.now()}-${Math.random()}`;
-      await this.loadPdf();
     }
 
     // Re-render thumbnails when sidebar becomes visible and document is loaded
-    if (changedProperties.has('showSidebar') && this.showSidebar && this.pdfDocument) {
-      // Use requestAnimationFrame to ensure DOM is ready
-      await new Promise(resolve => requestAnimationFrame(resolve));
+    if (
+      changedProperties.has('showSidebar')
+      && this.showSidebar
+      && this.renderAdmissionOpen
+      && this.pdfDocument
+    ) {
+      const connectionEpoch = this.connectionEpoch;
+      const loadGeneration = this.loadGeneration;
+      const pdfDocument = this.pdfDocument;
+      await waitForAnimationFrame();
+      if (
+        !this.isConnected
+        || connectionEpoch !== this.connectionEpoch
+        || loadGeneration !== this.loadGeneration
+        || pdfDocument !== this.pdfDocument
+        || !this.renderAdmissionOpen
+        || !this.showSidebar
+      ) return;
       // Force re-render of thumbnails by resetting their rendered state
       this.thumbnailData.forEach(thumb => thumb.rendered = false);
       await this.renderThumbnails();
+      if (
+        !this.isConnected
+        || connectionEpoch !== this.connectionEpoch
+        || loadGeneration !== this.loadGeneration
+        || pdfDocument !== this.pdfDocument
+        || !this.renderAdmissionOpen
+        || !this.showSidebar
+      ) return;
       // Re-setup intersection observer for lazy loading of pages
       this.setupIntersectionObserver();
       // Scroll to active thumbnail after rendering
@@ -334,82 +404,159 @@ export class DeesPdfViewer extends DeesElement {
     return `${(bytes / (1024 * 1024)).toFixed(1)} MB`;
   }
 
-  private async loadPdf() {
-    this.loading = true;
-    this.renderState = 'loading';
-
-    try {
-      await this.cleanupDocument();
+  private schedulePdfLoad(
+    connectionEpochArg: number,
+    renderRecoveryStateArg?: IRenderRecoveryState,
+  ): Promise<void> {
+    const url = this.pdfUrl;
+    const baseKey = `${connectionEpochArg}:${url}`;
+    if (!renderRecoveryStateArg && this.loadOperation?.key === baseKey) {
+      return this.loadOperation.promise;
+    }
+    const generation = ++this.loadGeneration;
+    const key = renderRecoveryStateArg
+      ? `${baseKey}:render-recovery:${generation}`
+      : baseKey;
+    const operation: ILoadOperation = {
+      key,
+      promise: Promise.resolve(),
+    };
+    operation.promise = this.performPdfLoad(
+      generation,
+      connectionEpochArg,
+      url,
+      renderRecoveryStateArg,
+    )
+      .finally(() => {
+        if (this.loadOperation === operation) {
+          this.loadOperation = null;
+        }
+      });
+    this.loadOperation = operation;
+    return operation.promise;
+  }
 
-      // Create new abort controller for this load operation
-      this.renderAbortController = new AbortController();
-      const signal = this.renderAbortController.signal;
+  private isCurrentLoad(generationArg: number, connectionEpochArg: number, urlArg: string): boolean {
+    return this.isConnected
+      && generationArg === this.loadGeneration
+      && connectionEpochArg === this.connectionEpoch
+      && urlArg === this.pdfUrl;
+  }
 
-      this.pdfDocument = await PdfManager.loadDocument(this.pdfUrl);
-      if (signal.aborted) return;
+  private async performPdfLoad(
+    generationArg: number,
+    connectionEpochArg: number,
+    urlArg: string,
+    renderRecoveryStateArg?: IRenderRecoveryState,
+  ): Promise<void> {
+    await this.cleanupDocument();
+    if (!this.isCurrentLoad(generationArg, connectionEpochArg, urlArg)) {
+      return;
+    }
+    if (!urlArg) {
+      this.loading = false;
+      this.renderState = 'idle';
+      return;
+    }
 
-      this.totalPages = this.pdfDocument.numPages;
-      this.currentPage = this.initialPage;
-      this.resolveInitialViewportMode();
+    this.loading = true;
+    this.renderState = 'loading';
+    const abortController = new AbortController();
+    this.renderAbortController = abortController;
+    const { signal } = abortController;
 
-      // Get file size
+    try {
+      const pdfLoadPromise = PdfManager.loadDocument(urlArg, signal);
+      this.pdfLoadPromise = pdfLoadPromise;
+      let pdfDocument: PDFDocumentProxy;
       try {
-        const data = await this.pdfDocument.getData();
-        this.pdfFileSize = data.length;
-      } catch (e) {
-        this.pdfFileSize = 0;
+        pdfDocument = await pdfLoadPromise;
+      } finally {
+        if (this.pdfLoadPromise === pdfLoadPromise) {
+          this.pdfLoadPromise = null;
+        }
       }
-
-      // Initialize thumbnail and page data arrays
-      this.thumbnailData = Array.from({length: this.totalPages}, (_, i) => ({
-        page: i + 1,
-        rendered: false
-      }));
-
-      this.pageData = Array.from({length: this.totalPages}, (_, i) => ({
-        page: i + 1,
-        rendered: false,
-        rendering: false,
-        textLayerRendered: false,
-      }));
-
-      // Set loading to false to render the pages
-      this.loading = false;
-      await this.updateComplete;
-      this.ensureViewerRefs();
-      this.setupIntersectionObserver();
-
-      // Wait for next frame to ensure DOM is ready
-      await new Promise(resolve => requestAnimationFrame(resolve));
-      if (signal.aborted) return;
-
-      this.renderState = 'rendering-main';
-
-      // Render initial visible pages
-      await this.renderVisiblePages();
-      if (signal.aborted) return;
-
-      // Scroll to initial page
-      if (this.initialPage > 1) {
-        await this.scrollToPage(this.initialPage, false);
+      if (!this.isCurrentLoad(generationArg, connectionEpochArg, urlArg) || signal.aborted) {
+        await PdfManager.releaseDocument(pdfDocument);
+        return;
       }
+      this.pdfDocument = pdfDocument;
+      this.renderAdmissionOpen = true;
+      this.documentId = `${urlArg}-${generationArg}`;
+      const documentUsePipeline = (async () => {
+        this.totalPages = pdfDocument.numPages;
+        if (renderRecoveryStateArg) {
+          this.currentPage = Math.min(
+            Math.max(renderRecoveryStateArg.currentPage, 1),
+            this.totalPages,
+          );
+          this.currentZoom = renderRecoveryStateArg.currentZoom;
+          this.viewportMode = renderRecoveryStateArg.viewportMode;
+        } else {
+          this.currentPage = this.initialPage;
+          this.resolveInitialViewportMode();
+        }
 
-      if (this.showSidebar) {
-        // Ensure sidebar is in DOM after loading = false
+        try {
+          const data = await raceWithAbort(pdfDocument.getData(), signal);
+          if (!this.isCurrentLoad(generationArg, connectionEpochArg, urlArg)) return;
+          this.pdfFileSize = data.length;
+        } catch {
+          if (!this.isCurrentLoad(generationArg, connectionEpochArg, urlArg)) return;
+          this.pdfFileSize = 0;
+        }
+
+        this.thumbnailData = Array.from({length: this.totalPages}, (_, i) => ({
+          page: i + 1,
+          rendered: false
+        }));
+        this.pageData = Array.from({length: this.totalPages}, (_, i) => ({
+          page: i + 1,
+          rendered: false,
+          rendering: false,
+          textLayerRendered: false,
+        }));
+
+        this.loading = false;
         await this.updateComplete;
-        // Wait for next frame to ensure DOM is fully ready
-        await new Promise(resolve => requestAnimationFrame(resolve));
-        if (signal.aborted) return;
+        if (!this.isCurrentLoad(generationArg, connectionEpochArg, urlArg)) return;
+        this.ensureViewerRefs();
+        this.setupIntersectionObserver();
+
+        await waitForAnimationFrame(signal);
+        if (!this.isCurrentLoad(generationArg, connectionEpochArg, urlArg) || signal.aborted) return;
+        this.renderState = 'rendering-main';
+
+        await this.renderVisiblePages();
+        if (!this.isCurrentLoad(generationArg, connectionEpochArg, urlArg) || signal.aborted) return;
+        if (this.currentPage > 1) {
+          await this.scrollToPage(this.currentPage, false);
+        }
 
-        await this.renderThumbnails();
-        if (signal.aborted) return;
-      }
+        if (this.showSidebar) {
+          await this.updateComplete;
+          await waitForAnimationFrame(signal);
+          if (!this.isCurrentLoad(generationArg, connectionEpochArg, urlArg) || signal.aborted) return;
+          await this.renderThumbnails();
+          if (!this.isCurrentLoad(generationArg, connectionEpochArg, urlArg) || signal.aborted) return;
+        }
 
-      this.renderState = 'rendered';
+        if (this.isCurrentLoad(generationArg, connectionEpochArg, urlArg)) {
+          this.renderState = 'rendered';
+        }
+      })();
+      this.documentUsePipelines.add(documentUsePipeline);
+      try {
+        await documentUsePipeline;
+      } finally {
+        this.documentUsePipelines.delete(documentUsePipeline);
+      }
     } catch (error) {
-      console.error('Error loading PDF:', error);
-      this.loading = false;
-      this.renderState = 'error';
+      if (this.isCurrentLoad(generationArg, connectionEpochArg, urlArg) && !signal.aborted) {
+        console.error('Error loading PDF:', error);
+        this.loading = false;
+        this.renderState = 'error';
+      }
     }
   }
 
@@ -468,101 +615,169 @@ export class DeesPdfViewer extends DeesElement {
     }
   }
 
-  private async renderPageIfNeeded(pageNum: number) {
+  private renderPageIfNeeded(pageNum: number): Promise<void> {
     const pageInfo = this.pageData.find(p => p.page === pageNum);
-    if (!pageInfo || pageInfo.rendered || pageInfo.rendering) return;
-
+    const pdfDocument = this.pdfDocument;
+    const signal = this.renderAbortController?.signal;
+    if (
+      !this.renderAdmissionOpen
+      || !pdfDocument
+      || !signal
+      || !pageInfo
+      || pageInfo.rendered
+      || pageInfo.rendering
+    ) return Promise.resolve();
+
+    const renderGeneration = this.renderGeneration;
+    const isCurrentRender = (): boolean => (
+      this.isConnected
+      && this.renderAdmissionOpen
+      && !signal.aborted
+      && renderGeneration === this.renderGeneration
+      && pdfDocument === this.pdfDocument
+    );
     pageInfo.rendering = true;
+    const renderPipeline = (async () => {
+      let page: PDFPageProxy | undefined;
+      let renderTask: RenderTask | undefined;
+      try {
+        const canvas = this.shadowRoot?.querySelector(
+          `.page-canvas[data-page="${pageNum}"]`,
+        ) as HTMLCanvasElement;
+        if (!canvas) {
+          pageInfo.rendering = false;
+          return;
+        }
 
-    try {
-      const canvas = this.shadowRoot?.querySelector(`.page-canvas[data-page="${pageNum}"]`) as HTMLCanvasElement;
-      if (!canvas) {
-        pageInfo.rendering = false;
-        return;
-      }
-
-      const page = await this.pdfDocument.getPage(pageNum);
-      const viewport = this.computeViewport(page);
-
-      // Set canvas dimensions with device pixel ratio for sharp rendering
-      const dpr = window.devicePixelRatio || 1;
-      canvas.width = Math.floor(viewport.width * dpr);
-      canvas.height = Math.floor(viewport.height * dpr);
-      canvas.style.width = `${viewport.width}px`;
-      canvas.style.height = `${viewport.height}px`;
-
-      const ctx = canvas.getContext('2d');
-      if (!ctx) {
-        page.cleanup?.();
-        pageInfo.rendering = false;
-        return;
-      }
-
-      // Scale context for high-DPI displays
-      ctx.scale(dpr, dpr);
+        page = await raceWithAbort(pdfDocument.getPage(pageNum), signal);
+        if (!isCurrentRender()) return;
+        const viewport = this.computeViewport(page);
 
-      const renderContext = {
-        canvasContext: ctx,
-        viewport: viewport,
-      };
+        // Set canvas dimensions with device pixel ratio for sharp rendering
+        const dpr = window.devicePixelRatio || 1;
+        canvas.width = Math.floor(viewport.width * dpr);
+        canvas.height = Math.floor(viewport.height * dpr);
+        canvas.style.width = `${viewport.width}px`;
+        canvas.style.height = `${viewport.height}px`;
 
-      const renderTask = page.render(renderContext);
-      this.pageRenderTasks.set(pageNum, renderTask);
+        const ctx = canvas.getContext('2d');
+        if (!ctx) {
+          pageInfo.rendering = false;
+          return;
+        }
 
-      await renderTask.promise;
+        // Scale context for high-DPI displays
+        ctx.scale(dpr, dpr);
 
-      page.cleanup?.();
-      pageInfo.rendered = true;
-      pageInfo.rendering = false;
-      this.pageRenderTasks.delete(pageNum);
+        const renderContext = {
+          canvasContext: ctx,
+          viewport: viewport,
+        };
 
-      // Render text layer for selection
-      await this.renderTextLayer(pageNum);
+        renderTask = page.render(renderContext);
+        this.pageRenderTasks.set(pageNum, renderTask);
+        await raceWithAbort(renderTask.promise, signal);
+        if (!isCurrentRender()) return;
+        pageInfo.rendered = true;
+        pageInfo.rendering = false;
+        if (this.pageRenderTasks.get(pageNum) === renderTask) {
+          this.pageRenderTasks.delete(pageNum);
+        }
 
-      // Update page data to reflect rendered state
-      this.requestUpdate('pageData');
-    } catch (error: any) {
-      if (error?.name !== 'RenderingCancelledException') {
-        console.error(`Error rendering page ${pageNum}:`, error);
+        // Render text layer for selection
+        await this.renderTextLayer(pageNum, renderGeneration, pdfDocument, signal);
+        if (!isCurrentRender()) return;
+
+        // Update page data to reflect rendered state
+        this.requestUpdate('pageData');
+      } catch (error: unknown) {
+        if (
+          !(error instanceof Error)
+          || !['AbortError', 'AbortException', 'RenderingCancelledException'].includes(error.name)
+        ) {
+          console.error(`Error rendering page ${pageNum}:`, error);
+        }
+        if (renderGeneration === this.renderGeneration) {
+          pageInfo.rendering = false;
+        }
+      } finally {
+        if (renderTask && this.pageRenderTasks.get(pageNum) === renderTask) {
+          this.pageRenderTasks.delete(pageNum);
+        }
+        page?.cleanup();
       }
-      pageInfo.rendering = false;
-      this.pageRenderTasks.delete(pageNum);
-    }
+    })();
+    this.pageRenderPipelines.add(renderPipeline);
+    void renderPipeline.finally(() => {
+      this.pageRenderPipelines.delete(renderPipeline);
+    }).catch(() => {});
+    return renderPipeline;
   }
 
-  private async renderTextLayer(pageNum: number): Promise<void> {
+  private async renderTextLayer(
+    pageNum: number,
+    renderGenerationArg: number,
+    pdfDocumentArg: PDFDocumentProxy,
+    signalArg: AbortSignal,
+  ): Promise<void> {
     const pageInfo = this.pageData.find(p => p.page === pageNum);
-    if (!pageInfo || pageInfo.textLayerRendered) return;
-
+    if (
+      renderGenerationArg !== this.renderGeneration
+      || signalArg.aborted
+      || pdfDocumentArg !== this.pdfDocument
+      || !pageInfo
+      || pageInfo.textLayerRendered
+    ) return;
+
+    let page: PDFPageProxy | undefined;
+    let renderTask: ITextLayerRenderTask | undefined;
     try {
       const textLayerDiv = this.shadowRoot?.querySelector(
         `.text-layer[data-page="${pageNum}"]`
       ) as HTMLElement;
       if (!textLayerDiv) return;
 
+      this.textSelectionCleanupFunctions.get(pageNum)?.();
+      this.textSelectionCleanupFunctions.delete(pageNum);
       textLayerDiv.innerHTML = '';
 
-      const page = await this.pdfDocument.getPage(pageNum);
-      const textContent = await page.getTextContent();
+      page = await raceWithAbort(pdfDocumentArg.getPage(pageNum), signalArg);
+      if (
+        renderGenerationArg !== this.renderGeneration
+        || signalArg.aborted
+        || pdfDocumentArg !== this.pdfDocument
+      ) return;
+      const textContent = await raceWithAbort(page.getTextContent(), signalArg);
+      if (
+        renderGenerationArg !== this.renderGeneration
+        || signalArg.aborted
+        || pdfDocumentArg !== this.pdfDocument
+      ) return;
       const viewport = this.computeViewport(page);
 
-      // @ts-ignore - Dynamic import of pdfjs
-      const pdfjs = await import('https://cdn.jsdelivr.net/npm/pdfjs-dist@4.0.379/+esm');
-
       textLayerDiv.style.width = `${viewport.width}px`;
       textLayerDiv.style.height = `${viewport.height}px`;
 
       // Set the scale factor CSS variable - required by PDF.js text layer
       textLayerDiv.style.setProperty('--scale-factor', String(viewport.scale));
 
-      const textLayerRenderTask = pdfjs.renderTextLayer({
+      const textLayer = new TextLayer({
         textContentSource: textContent,
         container: textLayerDiv,
         viewport: viewport,
       });
-
-      this.textLayerRenderTasks.set(pageNum, textLayerRenderTask);
-      await textLayerRenderTask.promise;
+      const textLayerRenderPromise = textLayer.render();
+      renderTask = {
+        textLayer,
+        promise: textLayerRenderPromise,
+      };
+      this.textLayerRenderTasks.set(pageNum, renderTask);
+      await raceWithAbort(textLayerRenderPromise, signalArg);
+      if (
+        renderGenerationArg !== this.renderGeneration
+        || signalArg.aborted
+        || pdfDocumentArg !== this.pdfDocument
+      ) return;
 
       // Add endOfContent for selection boundary
       const endOfContent = document.createElement('div');
@@ -622,7 +837,7 @@ export class DeesPdfViewer extends DeesElement {
         }
       };
 
-      textLayerDiv.addEventListener('mousedown', (e: MouseEvent) => {
+      const handleMouseDown = (e: MouseEvent) => {
         if (e.button !== 0) return;
 
         const pos = getTextPositionFromPoint(e.clientX, e.clientY);
@@ -643,16 +858,27 @@ export class DeesPdfViewer extends DeesElement {
           document.addEventListener('mousemove', handleMouseMove);
           document.addEventListener('mouseup', handleMouseUp);
         }
+      };
+      textLayerDiv.addEventListener('mousedown', handleMouseDown);
+      this.textSelectionCleanupFunctions.set(pageNum, () => {
+        textLayerDiv.removeEventListener('mousedown', handleMouseDown);
+        document.removeEventListener('mouseup', handleMouseUp);
+        document.removeEventListener('mousemove', handleMouseMove);
       });
 
       pageInfo.textLayerRendered = true;
-      page.cleanup?.();
-      this.textLayerRenderTasks.delete(pageNum);
-    } catch (error: any) {
-      if (error?.name !== 'RenderingCancelledException') {
+    } catch (error: unknown) {
+      if (
+        !(error instanceof Error)
+        || !['AbortError', 'AbortException', 'RenderingCancelledException'].includes(error.name)
+      ) {
         console.error(`Error rendering text layer for page ${pageNum}:`, error);
       }
-      this.textLayerRenderTasks.delete(pageNum);
+    } finally {
+      if (renderTask && this.textLayerRenderTasks.get(pageNum) === renderTask) {
+        this.textLayerRenderTasks.delete(pageNum);
+      }
+      page?.cleanup();
     }
   }
 
@@ -762,23 +988,67 @@ export class DeesPdfViewer extends DeesElement {
     }
   }
 
-  private async renderThumbnails() {
-    // Check if document is loaded
-    if (!this.pdfDocument) {
-      return;
+  private renderThumbnails(): Promise<void> {
+    if (!this.renderAdmissionOpen || !this.showSidebar || !this.pdfDocument) {
+      return Promise.resolve();
     }
+    if (this.thumbnailRenderPromise) {
+      this.thumbnailRenderGeneration += 1;
+      this.thumbnailRenderQueued = true;
+      for (const task of this.thumbnailRenderTasks) {
+        try {
+          task.cancel();
+        } catch {
+          // The active queue iteration still awaits the task promise.
+        }
+      }
+      return this.thumbnailRenderPromise;
+    }
+    this.thumbnailRenderGeneration += 1;
+    const thumbnailRenderQueueEpoch = ++this.thumbnailRenderQueueEpoch;
+    const renderPromise = (async () => {
+      do {
+        if (thumbnailRenderQueueEpoch !== this.thumbnailRenderQueueEpoch) return;
+        this.thumbnailRenderQueued = false;
+        const renderGeneration = this.thumbnailRenderGeneration;
+        await this.performRenderThumbnails(renderGeneration);
+      } while (
+        thumbnailRenderQueueEpoch === this.thumbnailRenderQueueEpoch
+        && this.thumbnailRenderQueued
+        && this.renderAdmissionOpen
+        && this.showSidebar
+        && this.pdfDocument
+      );
+    })();
+    this.thumbnailRenderPromise = renderPromise;
+    void renderPromise.finally(() => {
+      if (this.thumbnailRenderPromise === renderPromise) {
+        this.thumbnailRenderPromise = null;
+      }
+    }).catch(() => {});
+    return renderPromise;
+  }
 
-    // Check if already rendered
-    if (this.thumbnailData.length > 0 && this.thumbnailData.every(t => t.rendered)) {
+  private async performRenderThumbnails(renderGenerationArg: number): Promise<void> {
+    const pdfDocument = this.pdfDocument;
+    if (!this.renderAdmissionOpen || !this.showSidebar || !pdfDocument) {
       return;
     }
+    const isCurrentRender = (): boolean => (
+      this.isConnected
+      && this.renderAdmissionOpen
+      && this.showSidebar
+      && renderGenerationArg === this.thumbnailRenderGeneration
+      && pdfDocument === this.pdfDocument
+    );
 
-    // Check abort signal
-    if (this.renderAbortController?.signal.aborted) {
+    // Check if already rendered
+    if (this.thumbnailData.length > 0 && this.thumbnailData.every(t => t.rendered)) {
       return;
     }
 
     const signal = this.renderAbortController?.signal;
+    if (!signal || signal.aborted) return;
     this.renderState = 'rendering-thumbs';
 
     // Cancel any existing thumbnail render tasks
@@ -789,13 +1059,14 @@ export class DeesPdfViewer extends DeesElement {
         // Ignore cancellation errors
       }
     }
-    this.thumbnailRenderTasks = [];
 
     try {
       await this.updateComplete;
+      if (!isCurrentRender()) return;
       const thumbnails = this.shadowRoot?.querySelectorAll('.thumbnail') as NodeListOf<HTMLElement>;
       const thumbnailCanvases = this.shadowRoot?.querySelectorAll('.thumbnail-canvas') as NodeListOf<HTMLCanvasElement>;
       const sidebarContent = this.shadowRoot?.querySelector('.sidebar-content') as HTMLElement;
+      if (!sidebarContent) return;
 
       // Get the actual available width for thumbnails (sidebar width minus padding)
       const sidebarStyles = window.getComputedStyle(sidebarContent);
@@ -811,68 +1082,62 @@ export class DeesPdfViewer extends DeesElement {
       }
 
       for (let i = 0; i < thumbnailCanvases.length; i++) {
-        if (signal?.aborted) return;
+        if (signal?.aborted || !isCurrentRender()) return;
 
         const canvas = thumbnailCanvases[i];
         const thumbnail = thumbnails[i];
         const pageNum = parseInt(canvas.dataset.page || '1');
-        const page = await this.pdfDocument.getPage(pageNum);
-
-        // Get the page's natural dimensions
-        const initialViewport = page.getViewport({ scale: 1 });
-
-        // Calculate scale to fit within the max thumbnail width
-        const scale = maxThumbnailWidth / initialViewport.width;
-        const viewport = page.getViewport({ scale });
-
-        // Set canvas dimensions with device pixel ratio for sharp thumbnails
-        const dpr = window.devicePixelRatio || 1;
-        canvas.width = Math.floor(viewport.width * dpr);
-        canvas.height = Math.floor(viewport.height * dpr);
-
-        // Set the display size via style to ensure proper display
-        canvas.style.width = `${viewport.width}px`;
-        canvas.style.height = `${viewport.height}px`;
-
-        // Set the actual thumbnail container height
-        thumbnail.style.height = `${viewport.height}px`;
-        thumbnail.style.minHeight = `${viewport.height}px`;
-
-        const context = canvas.getContext('2d');
-        if (!context) {
-          page.cleanup?.();
-          continue;
-        }
-
-        // Scale context for high-DPI displays
-        context.scale(dpr, dpr);
-
-        const renderContext = {
-          canvasContext: context,
-          viewport: viewport,
-        };
-
-        const renderTask = page.render(renderContext);
-        this.thumbnailRenderTasks.push(renderTask);
-        await renderTask.promise;
-        page.cleanup?.();
+        const page = await raceWithAbort(pdfDocument.getPage(pageNum), signal);
+        try {
+          if (!isCurrentRender()) return;
+          const initialViewport = page.getViewport({ scale: 1 });
+          const scale = maxThumbnailWidth / initialViewport.width;
+          const viewport = page.getViewport({ scale });
+          const dpr = window.devicePixelRatio || 1;
+          canvas.width = Math.floor(viewport.width * dpr);
+          canvas.height = Math.floor(viewport.height * dpr);
+          canvas.style.width = `${viewport.width}px`;
+          canvas.style.height = `${viewport.height}px`;
+          thumbnail.style.height = `${viewport.height}px`;
+          thumbnail.style.minHeight = `${viewport.height}px`;
+
+          const context = canvas.getContext('2d');
+          if (!context) continue;
+          context.scale(dpr, dpr);
+
+          const renderTask = page.render({
+            canvasContext: context,
+            viewport,
+          });
+          this.thumbnailRenderTasks.add(renderTask);
+          try {
+            await raceWithAbort(renderTask.promise, signal);
+          } finally {
+            this.thumbnailRenderTasks.delete(renderTask);
+          }
+          if (!isCurrentRender()) return;
 
-        // Mark this thumbnail as rendered
-        const thumbData = this.thumbnailData.find(t => t.page === pageNum);
-        if (thumbData) {
-          thumbData.rendered = true;
+          const thumbData = this.thumbnailData.find(t => t.page === pageNum);
+          if (thumbData) {
+            thumbData.rendered = true;
+          }
+        } finally {
+          page.cleanup();
         }
       }
 
       // Trigger update to reflect rendered state
-      this.requestUpdate('thumbnailData');
-    } catch (error: any) {
+      if (isCurrentRender()) {
+        this.requestUpdate('thumbnailData');
+      }
+    } catch (error: unknown) {
       // Only log non-cancellation errors
-      if (error?.name !== 'RenderingCancelledException') {
+      if (
+        !(error instanceof Error)
+        || !['AbortError', 'AbortException', 'RenderingCancelledException'].includes(error.name)
+      ) {
         console.error('Error rendering thumbnails:', error);
       }
-    } finally {
-      this.thumbnailRenderTasks = [];
     }
   }
 
@@ -936,6 +1201,7 @@ export class DeesPdfViewer extends DeesElement {
   }
 
   private reRenderAllPages() {
+    this.renderGeneration += 1;
     // Clear all rendered pages to force re-render with new zoom
     this.pageData.forEach(page => {
       page.rendered = false;
@@ -956,51 +1222,140 @@ export class DeesPdfViewer extends DeesElement {
     // Cancel text layer render tasks
     this.textLayerRenderTasks.forEach(task => {
       try {
-        task.cancel?.();
+        task.textLayer.cancel();
       } catch (error) {
         // Ignore cancellation errors
       }
     });
     this.textLayerRenderTasks.clear();
+    for (const cleanup of this.textSelectionCleanupFunctions.values()) {
+      cleanup();
+    }
+    this.textSelectionCleanupFunctions.clear();
 
     // Request update to re-render pages
     this.requestUpdate();
 
-    // Render visible pages after update
-    this.updateComplete.then(() => {
-      this.renderVisiblePages();
-    });
+    this.rerenderQueued = true;
+    if (this.rerenderPromise) return;
+
+    const rerenderQueueEpoch = ++this.rerenderQueueEpoch;
+    const rerenderPromise = (async () => {
+      while (
+        rerenderQueueEpoch === this.rerenderQueueEpoch
+        && this.rerenderQueued
+        && this.renderAdmissionOpen
+        && this.isConnected
+      ) {
+        this.rerenderQueued = false;
+        const renderGeneration = this.renderGeneration;
+        const priorRenderPipelines = [...this.pageRenderPipelines];
+        const pipelinesSettled = await settlePromisesWithin(
+          priorRenderPipelines,
+          pipelineSettlementGraceMs,
+        );
+        if (!pipelinesSettled) {
+          if (!this.rerenderRecoveryTimeout) {
+            const connectionEpoch = this.connectionEpoch;
+            const loadGeneration = this.loadGeneration;
+            const url = this.pdfUrl;
+            this.rerenderRecoveryTimeout = window.setTimeout(() => {
+              this.rerenderRecoveryTimeout = undefined;
+              if (
+                rerenderQueueEpoch !== this.rerenderQueueEpoch
+                || connectionEpoch !== this.connectionEpoch
+                || loadGeneration !== this.loadGeneration
+                || url !== this.pdfUrl
+                || !this.renderAdmissionOpen
+                || !this.isConnected
+              ) return;
+              void this.schedulePdfLoad(connectionEpoch, {
+                currentPage: this.currentPage,
+                currentZoom: this.currentZoom,
+                viewportMode: this.viewportMode,
+              });
+            }, 0);
+          }
+          return;
+        }
+        await this.updateComplete;
+        if (
+          rerenderQueueEpoch === this.rerenderQueueEpoch
+          && renderGeneration === this.renderGeneration
+          && !this.rerenderQueued
+          && this.renderAdmissionOpen
+          && this.isConnected
+        ) {
+          await this.renderVisiblePages();
+        }
+      }
+    })();
+    this.rerenderPromise = rerenderPromise;
+    void rerenderPromise.finally(() => {
+      if (this.rerenderPromise === rerenderPromise) {
+        this.rerenderPromise = null;
+      }
+    }).catch(() => {});
   }
 
   private async downloadPdf() {
-    if (!this.pdfDocument) return;
+    const pdfDocument = this.pdfDocument;
+    const signal = this.renderAbortController?.signal;
+    if (!pdfDocument || !signal) return;
+    const generation = this.loadGeneration;
+    const connectionEpoch = this.connectionEpoch;
+    const url = this.pdfUrl;
 
+    let ownedBlobUrl: string | undefined;
     try {
       // Get raw PDF data from the loaded document
-      const data = await this.pdfDocument.getData();
-      const blob = new Blob([data.buffer], { type: 'application/pdf' });
-      const blobUrl = URL.createObjectURL(blob);
+      const data = await raceWithAbort(pdfDocument.getData(), signal);
+      if (
+        !this.isCurrentLoad(generation, connectionEpoch, url)
+        || signal.aborted
+        || pdfDocument !== this.pdfDocument
+      ) return;
+      const blob = new Blob([new Uint8Array(data)], { type: 'application/pdf' });
+      ownedBlobUrl = URL.createObjectURL(blob);
 
       const link = document.createElement('a');
-      link.href = blobUrl;
-      link.download = this.pdfUrl ? this.pdfUrl.split('/').pop() || 'document.pdf' : 'document.pdf';
+      link.href = ownedBlobUrl;
+      link.download = url ? url.split('/').pop() || 'document.pdf' : 'document.pdf';
       link.click();
 
       // Clean up blob URL after short delay
-      setTimeout(() => URL.revokeObjectURL(blobUrl), 1000);
+      const scheduledBlobUrl = ownedBlobUrl;
+      setTimeout(() => URL.revokeObjectURL(scheduledBlobUrl), 1000);
+      ownedBlobUrl = undefined;
     } catch (error) {
-      console.error('Error downloading PDF:', error);
+      if (!(error instanceof Error) || error.name !== 'AbortError') {
+        console.error('Error downloading PDF:', error);
+      }
+    } finally {
+      if (ownedBlobUrl) URL.revokeObjectURL(ownedBlobUrl);
     }
   }
 
   private async printPdf() {
-    if (!this.pdfDocument) return;
+    const pdfDocument = this.pdfDocument;
+    const signal = this.renderAbortController?.signal;
+    if (!pdfDocument || !signal) return;
+    const generation = this.loadGeneration;
+    const connectionEpoch = this.connectionEpoch;
+    const url = this.pdfUrl;
 
+    let ownedPdfUrl: string | undefined;
+    let ownedHtmlUrl: string | undefined;
     try {
       // Get raw PDF data from the loaded document
-      const data = await this.pdfDocument.getData();
-      const blob = new Blob([data.buffer], { type: 'application/pdf' });
-      const pdfUrl = URL.createObjectURL(blob);
+      const data = await raceWithAbort(pdfDocument.getData(), signal);
+      if (
+        !this.isCurrentLoad(generation, connectionEpoch, url)
+        || signal.aborted
+        || pdfDocument !== this.pdfDocument
+      ) return;
+      const blob = new Blob([new Uint8Array(data)], { type: 'application/pdf' });
+      ownedPdfUrl = URL.createObjectURL(blob);
 
       // Create an HTML wrapper page that embeds the PDF and handles print/close
       // This gives us control over the afterprint event (direct PDF URLs don't support it)
@@ -1019,7 +1374,7 @@ export class DeesPdfViewer extends DeesElement {
           </style>
         </head>
         <body>
-          <iframe src="${pdfUrl}" type="application/pdf"></iframe>
+          <iframe src="${ownedPdfUrl}" type="application/pdf"></iframe>
           <script>
             window.onload = function() {
               setTimeout(function() {
@@ -1037,32 +1392,49 @@ export class DeesPdfViewer extends DeesElement {
         </html>
       `;
       const htmlBlob = new Blob([htmlContent], { type: 'text/html' });
-      const htmlUrl = URL.createObjectURL(htmlBlob);
+      ownedHtmlUrl = URL.createObjectURL(htmlBlob);
 
-      const printWindow = window.open(htmlUrl, '_blank', 'width=800,height=600');
+      const printWindow = window.open(ownedHtmlUrl, '_blank', 'width=800,height=600');
       if (printWindow) {
+        const scheduledPdfUrl = ownedPdfUrl;
+        const scheduledHtmlUrl = ownedHtmlUrl;
+        let urlsRevoked = false;
+        const revokeUrls = (): void => {
+          if (urlsRevoked) return;
+          urlsRevoked = true;
+          URL.revokeObjectURL(scheduledPdfUrl);
+          URL.revokeObjectURL(scheduledHtmlUrl);
+        };
         // Cleanup blob URLs when window closes
         const checkClosed = setInterval(() => {
           if (printWindow.closed) {
             clearInterval(checkClosed);
-            URL.revokeObjectURL(pdfUrl);
-            URL.revokeObjectURL(htmlUrl);
+            revokeUrls();
           }
         }, 500);
         // Safety cleanup after 2 minutes
         setTimeout(() => {
           clearInterval(checkClosed);
-          URL.revokeObjectURL(pdfUrl);
-          URL.revokeObjectURL(htmlUrl);
+          revokeUrls();
         }, 120000);
+        ownedPdfUrl = undefined;
+        ownedHtmlUrl = undefined;
       } else {
         // Popup blocked - fall back to direct navigation
-        window.open(pdfUrl, '_blank');
-        setTimeout(() => URL.revokeObjectURL(pdfUrl), 60000);
-        URL.revokeObjectURL(htmlUrl);
+        window.open(ownedPdfUrl, '_blank');
+        const scheduledPdfUrl = ownedPdfUrl;
+        setTimeout(() => URL.revokeObjectURL(scheduledPdfUrl), 60000);
+        ownedPdfUrl = undefined;
+        URL.revokeObjectURL(ownedHtmlUrl);
+        ownedHtmlUrl = undefined;
       }
     } catch (error) {
-      console.error('Error printing PDF:', error);
+      if (!(error instanceof Error) || error.name !== 'AbortError') {
+        console.error('Error printing PDF:', error);
+      }
+    } finally {
+      if (ownedPdfUrl) URL.revokeObjectURL(ownedPdfUrl);
+      if (ownedHtmlUrl) URL.revokeObjectURL(ownedHtmlUrl);
     }
   }
 
@@ -1114,6 +1486,28 @@ export class DeesPdfViewer extends DeesElement {
     return this.viewportMode !== 'custom' || this.currentZoom > this.MANUAL_MIN_ZOOM;
   }
 
+  private readonly handleViewerWheel = (eventArg: WheelEvent): void => {
+    const element = eventArg.currentTarget as HTMLElement;
+    const scrollTop = element.scrollTop;
+    const scrollHeight = element.scrollHeight;
+    const clientHeight = element.clientHeight;
+    const isAtTop = scrollTop === 0;
+    const isAtBottom = Math.abs(scrollTop + clientHeight - scrollHeight) < 1;
+
+    if (
+      (eventArg.deltaY < 0 && !isAtTop)
+      || (eventArg.deltaY > 0 && !isAtBottom)
+    ) {
+      eventArg.stopPropagation();
+    } else if (
+      (eventArg.deltaY < 0 && isAtTop)
+      || (eventArg.deltaY > 0 && isAtBottom)
+    ) {
+      eventArg.preventDefault();
+      eventArg.stopPropagation();
+    }
+  };
+
   private ensureViewerRefs() {
     if (!this.viewerMain) {
       this.viewerMain = this.shadowRoot?.querySelector('.viewer-main') as HTMLElement;
@@ -1128,28 +1522,11 @@ export class DeesPdfViewer extends DeesElement {
       });
       this.resizeObserver.observe(this.viewerMain);
       this.measureViewportDimensions();
-
-      // Prevent scroll propagation to parent when scrolling inside viewer
-      this.viewerMain.addEventListener('wheel', (e) => {
-        const element = e.currentTarget as HTMLElement;
-        const scrollTop = element.scrollTop;
-        const scrollHeight = element.scrollHeight;
-        const clientHeight = element.clientHeight;
-        const deltaY = e.deltaY;
-
-        // Check if we're at the boundaries
-        const isAtTop = scrollTop === 0;
-        const isAtBottom = Math.abs(scrollTop + clientHeight - scrollHeight) < 1;
-
-        // Prevent propagation if we're scrolling within bounds
-        if ((deltaY < 0 && !isAtTop) || (deltaY > 0 && !isAtBottom)) {
-          e.stopPropagation();
-        } else if ((deltaY < 0 && isAtTop) || (deltaY > 0 && isAtBottom)) {
-          // Prevent default and propagation when at boundaries
-          e.preventDefault();
-          e.stopPropagation();
-        }
-      }, { passive: false });
+    }
+    if (this.viewerMain && this.wheelEventTarget !== this.viewerMain) {
+      this.wheelEventTarget?.removeEventListener('wheel', this.handleViewerWheel);
+      this.wheelEventTarget = this.viewerMain;
+      this.wheelEventTarget.addEventListener('wheel', this.handleViewerWheel, { passive: false });
     }
   }
 
@@ -1232,82 +1609,152 @@ export class DeesPdfViewer extends DeesElement {
     return Math.min(Math.max(value, min), max);
   }
 
-  private async cleanupDocument() {
-    // Abort any ongoing render operations
-    if (this.renderAbortController) {
-      this.renderAbortController.abort();
-      this.renderAbortController = null;
+  private cleanupDocument(): Promise<void> {
+    if (this.cleanupPromise) {
+      return this.cleanupPromise;
     }
-
-    // Wait for any existing render to complete
-    if (this.currentRenderPromise) {
-      try {
-        await this.currentRenderPromise;
-      } catch (error) {
-        // Ignore errors
+    const cleanupPromise = this.performDocumentCleanup();
+    this.cleanupPromise = cleanupPromise;
+    void cleanupPromise.finally(() => {
+      if (this.cleanupPromise === cleanupPromise) {
+        this.cleanupPromise = null;
       }
-      this.currentRenderPromise = null;
+    }).catch(() => {});
+    return cleanupPromise;
+  }
+
+  private async performDocumentCleanup(): Promise<void> {
+    this.renderAdmissionOpen = false;
+    this.renderGeneration += 1;
+    this.rerenderQueueEpoch += 1;
+    this.thumbnailRenderGeneration += 1;
+    this.thumbnailRenderQueueEpoch += 1;
+    this.thumbnailRenderQueued = false;
+    if (this.rerenderRecoveryTimeout) {
+      clearTimeout(this.rerenderRecoveryTimeout);
+      this.rerenderRecoveryTimeout = undefined;
+    }
+    this.intersectionObserver?.disconnect();
+    this.intersectionObserver = undefined;
+    this.resizeObserver?.disconnect();
+    this.resizeObserver = undefined;
+    this.wheelEventTarget?.removeEventListener('wheel', this.handleViewerWheel);
+    this.wheelEventTarget = null;
+    if (this.scrollThrottleTimeout) {
+      clearTimeout(this.scrollThrottleTimeout);
+      this.scrollThrottleTimeout = undefined;
     }
 
-    // Clear the render task reference
-    this.currentRenderTask = null;
+    const abortController = this.renderAbortController;
+    this.renderAbortController = null;
+    abortController?.abort();
+    const loadOperation = this.loadOperation;
+    const pdfLoadPromise = this.pdfLoadPromise;
+    const pageRenderTasks = [...this.pageRenderTasks.values()];
+    const textLayerRenderTasks = [...this.textLayerRenderTasks.values()];
+    const thumbnailRenderTasks = [...this.thumbnailRenderTasks];
+    const pageRenderPipelines = [...this.pageRenderPipelines];
+    const documentUsePipelines = [...this.documentUsePipelines];
+    const rerenderPromise = this.rerenderPromise;
+    this.rerenderQueued = false;
+    const thumbnailRenderPromise = this.thumbnailRenderPromise;
+    const currentRenderPromise = this.currentRenderPromise;
+    for (const cleanup of this.textSelectionCleanupFunctions.values()) {
+      cleanup();
+    }
+    this.textSelectionCleanupFunctions.clear();
 
-    // Cancel any page render tasks
-    this.pageRenderTasks.forEach(task => {
+    for (const task of pageRenderTasks) {
       try {
         task.cancel();
-      } catch (error) {
-        // Ignore cancellation errors
+      } catch {
+        // The tracked task promise still participates in settlement below.
       }
-    });
-    this.pageRenderTasks.clear();
-
-    // Cancel text layer render tasks
-    this.textLayerRenderTasks.forEach(task => {
+    }
+    for (const task of textLayerRenderTasks) {
       try {
-        task.cancel?.();
-      } catch (error) {
-        // Ignore cancellation errors
+        task.textLayer.cancel();
+      } catch {
+        // The tracked task promise still participates in settlement below.
       }
-    });
-    this.textLayerRenderTasks.clear();
-
-    // Cancel any thumbnail render tasks
-    for (const task of (this.thumbnailRenderTasks || [])) {
+    }
+    for (const task of thumbnailRenderTasks) {
       try {
         task.cancel();
-      } catch (error) {
-        // Ignore cancellation errors
+      } catch {
+        // The tracked task promise still participates in settlement below.
       }
     }
-    this.thumbnailRenderTasks = [];
+    const renderCanvases = this.shadowRoot?.querySelectorAll<HTMLCanvasElement>(
+      '.page-canvas, .thumbnail-canvas',
+    );
+    renderCanvases?.forEach((canvasArg) => {
+      canvasArg.width = 0;
+      canvasArg.height = 0;
+      canvasArg.style.removeProperty('width');
+      canvasArg.style.removeProperty('height');
+    });
+
+    const pdfDocument = this.pdfDocument;
+    this.pdfDocument = null;
+    const releasePromise = pdfDocument
+      ? PdfManager.releaseDocument(pdfDocument).catch((error) => {
+          console.error('Error destroying PDF document:', error);
+        })
+      : null;
+
+    await settlePromisesWithin([
+      ...(pdfLoadPromise ? [pdfLoadPromise] : []),
+      ...(currentRenderPromise ? [currentRenderPromise] : []),
+      ...documentUsePipelines,
+      ...(rerenderPromise ? [rerenderPromise] : []),
+      ...pageRenderPipelines,
+      ...(thumbnailRenderPromise ? [thumbnailRenderPromise] : []),
+      ...pageRenderTasks.map((task) => task.promise),
+      ...textLayerRenderTasks.map((task) => task.promise),
+      ...thumbnailRenderTasks.map((task) => task.promise),
+      ...(releasePromise ? [releasePromise] : []),
+    ], pipelineSettlementGraceMs);
+    for (const cleanup of this.textSelectionCleanupFunctions.values()) {
+      cleanup();
+    }
+    this.textSelectionCleanupFunctions.clear();
 
-    // Reset all state flags
+    if (this.pdfLoadPromise === pdfLoadPromise) {
+      this.pdfLoadPromise = null;
+    }
+    if (this.loadOperation === loadOperation) {
+      this.loadOperation = null;
+    }
+    this.currentRenderPromise = null;
+    this.currentRenderTask = null;
+    this.pageRenderTasks.clear();
+    this.pageRenderPipelines.clear();
+    this.documentUsePipelines.clear();
+    if (this.rerenderPromise === rerenderPromise) {
+      this.rerenderPromise = null;
+    }
+    this.textLayerRenderTasks.clear();
+    for (const task of thumbnailRenderTasks) {
+      this.thumbnailRenderTasks.delete(task);
+    }
+    if (this.thumbnailRenderPromise === thumbnailRenderPromise) {
+      this.thumbnailRenderPromise = null;
+    }
+
+    this.loading = false;
     this.renderState = 'idle';
     this.pageRendering = false;
     this.pageNumPending = null;
     this.thumbnailData = [];
     this.pageData = [];
     this.documentId = '';
-
-    // Clear canvas content
+    this.totalPages = 1;
+    this.currentPage = 1;
+    this.pdfFileSize = 0;
     if (this.canvas && this.ctx) {
       this.ctx.clearRect(0, 0, this.canvas.width, this.canvas.height);
     }
-
-    // Destroy the document to free memory
-    if (this.pdfDocument) {
-      try {
-        this.pdfDocument.destroy();
-      } catch (error) {
-        console.error('Error destroying PDF document:', error);
-      }
-    }
-
-    // Finally null the document reference
-    this.pdfDocument = null;
-
-    // Request update to reflect state changes
     this.requestUpdate();
   }
 }