feat: Update PDF components to improve rendering performance and manage document lifecycle without caching

package.json

@@ -37,6 +37,7 @@
     "apexcharts": "^5.3.5",
     "highlight.js": "11.11.1",
     "ibantools": "^4.5.1",
+    "lit": "^3.3.1",
     "lucide": "^0.544.0",
     "monaco-editor": "0.52.2",
     "pdfjs-dist": "^4.10.38",

pnpm-lock.yaml

@@ -71,6 +71,9 @@ importers:
       ibantools:
         specifier: ^4.5.1
         version: 4.5.1
+      lit:
+        specifier: ^3.3.1
+        version: 3.3.1
       lucide:
         specifier: ^0.544.0
         version: 0.544.0
@@ -853,15 +856,9 @@ packages:
   '@leichtgewicht/ip-codec@2.0.5':
     resolution: {integrity: sha512-Vo+PSpZG2/fmgmiNzYK9qWRh8h/CHrwD0mo1h1DzL4yzHNSfWYujGTYsWGreD000gcgmZ7K4Ys6Tx9TxtsKdDw==}
 
-  '@lit-labs/ssr-dom-shim@1.3.0':
-    resolution: {integrity: sha512-nQIWonJ6eFAvUUrSlwyHDm/aE8PBDu5kRpL0vHMg6K8fK3Diq1xdPjTnsJSwxABhaZ+5eBi1btQB5ShUTKo4nQ==}
-
   '@lit-labs/ssr-dom-shim@1.4.0':
     resolution: {integrity: sha512-ficsEARKnmmW5njugNYKipTm4SFnbik7CXtoencDZzmzo/dQ+2Q0bgkzJuoJP20Aj0F+izzJjOqsnkd6F/o1bw==}
 
-  '@lit/reactive-element@2.1.0':
-    resolution: {integrity: sha512-L2qyoZSQClcBmq0qajBVbhYEcG6iK0XfLn66ifLe/RfC0/ihpc+pl0Wdn8bJ8o+hj38cG0fGXRgSS20MuXn7qA==}
-
   '@lit/reactive-element@2.1.1':
     resolution: {integrity: sha512-N+dm5PAYdQ8e6UlywyyrgI2t++wFGXfHx+dSJ1oBrg6FAxUj40jId++EaRm80MKX5JnlH1sBsyZ5h0bcZKemCg==}
 
@@ -3850,9 +3847,6 @@ packages:
   linkifyjs@4.3.1:
     resolution: {integrity: sha512-DRSlB9DKVW04c4SUdGvKK5FR6be45lTU9M76JnngqPeeGDqPwYc0zdUErtsNVMtxPXgUWV4HbXbnC4sNyBxkYg==}
 
-  lit-element@4.2.0:
-    resolution: {integrity: sha512-MGrXJVAI5x+Bfth/pU9Kst1iWID6GHDLEzFEnyULB/sFiRLgkd8NPK/PeeXxktA3T6EIIaq8U3KcbTU5XFcP2Q==}
-
   lit-element@4.2.1:
     resolution: {integrity: sha512-WGAWRGzirAgyphK2urmYOV72tlvnxw7YfyLDgQ+OZnM9vQQBQnumQ7jUJe6unEzwGU3ahFOjuz1iz1jjrpCPuw==}
 
@@ -3862,9 +3856,6 @@ packages:
   lit-html@3.3.1:
     resolution: {integrity: sha512-S9hbyDu/vs1qNrithiNyeyv64c9yqiW9l+DBgI18fL+MTvOtWoFR0FWiyq1TxaYef5wNlpEmzlXoBlZEO+WjoA==}
 
-  lit@3.3.0:
-    resolution: {integrity: sha512-DGVsqsOIHBww2DqnuZzW7QsuCdahp50ojuDaBPC7jUDRpYoH0z7kHBBYZewRzer75FwtrkmkKk7iOAwSaWdBmw==}
-
   lit@3.3.1:
     resolution: {integrity: sha512-Ksr/8L3PTapbdXJCk+EJVB78jDodUMaP54gD24W186zGRARvwrsPfS60wae/SSCTCNZVPd1chXqio1qHQmu4NA==}
 
@@ -6466,7 +6457,7 @@ snapshots:
       '@push.rocks/websetup': 3.0.19
       '@push.rocks/webstore': 2.0.20
       lenis: 1.3.4
-      lit: 3.3.0
+      lit: 3.3.1
       sweet-scroll: 4.0.0
     transitivePeerDependencies:
       - '@nuxt/kit'
@@ -6866,14 +6857,8 @@ snapshots:
 
   '@leichtgewicht/ip-codec@2.0.5': {}
 
-  '@lit-labs/ssr-dom-shim@1.3.0': {}
-
   '@lit-labs/ssr-dom-shim@1.4.0': {}
 
-  '@lit/reactive-element@2.1.0':
-    dependencies:
-      '@lit-labs/ssr-dom-shim': 1.3.0
-
   '@lit/reactive-element@2.1.1':
     dependencies:
       '@lit-labs/ssr-dom-shim': 1.4.0
@@ -6994,7 +6979,7 @@ snapshots:
   '@open-wc/scoped-elements@3.0.5':
     dependencies:
       '@open-wc/dedupe-mixin': 1.4.0
-      lit: 3.3.0
+      lit: 3.3.1
 
   '@open-wc/semantic-dom-diff@0.20.1':
     dependencies:
@@ -7008,7 +6993,7 @@ snapshots:
   '@open-wc/testing-helpers@3.0.1':
     dependencies:
       '@open-wc/scoped-elements': 3.0.5
-      lit: 3.3.0
+      lit: 3.3.1
       lit-html: 3.3.0
 
   '@open-wc/testing@4.0.0':
@@ -10989,12 +10974,6 @@ snapshots:
 
   linkifyjs@4.3.1: {}
 
-  lit-element@4.2.0:
-    dependencies:
-      '@lit-labs/ssr-dom-shim': 1.3.0
-      '@lit/reactive-element': 2.1.0
-      lit-html: 3.3.0
-
   lit-element@4.2.1:
     dependencies:
       '@lit-labs/ssr-dom-shim': 1.4.0
@@ -11009,12 +10988,6 @@ snapshots:
     dependencies:
       '@types/trusted-types': 2.0.7
 
-  lit@3.3.0:
-    dependencies:
-      '@lit/reactive-element': 2.1.0
-      lit-element: 4.2.0
-      lit-html: 3.3.0
-
   lit@3.3.1:
     dependencies:
       '@lit/reactive-element': 2.1.1

ts_web/elements/dees-pdf-preview/component.ts

@@ -42,10 +42,16 @@ export class DeesPdfPreview extends DeesElement {
   @property({ type: Boolean })
   private error: boolean = false;
 
+  private renderPagesTask: Promise<void> | null = null;
+  private renderPagesQueued: boolean = false;
+
   private observer: IntersectionObserver;
   private pdfDocument: any;
   private canvases: PooledCanvas[] = [];
-  private renderRequestId: number;
+  private resizeObserver?: ResizeObserver;
+  private previewContainer: HTMLElement | null = null;
+  private stackElement: HTMLElement | null = null;
+  private loadedPdfUrl: string | null = null;
 
   constructor() {
     super();
@@ -118,13 +124,21 @@ export class DeesPdfPreview extends DeesElement {
   }
 
   public async connectedCallback() {
-    super.connectedCallback();
+    await super.connectedCallback();
     this.setupIntersectionObserver();
+    await this.updateComplete;
+    this.cacheElements();
+    this.setupResizeObserver();
   }
 
   public async disconnectedCallback() {
-    super.disconnectedCallback();
+    await super.disconnectedCallback();
     this.cleanup();
+    if (this.observer) {
+      this.observer.disconnect();
+    }
+    this.resizeObserver?.disconnect();
+    this.resizeObserver = undefined;
   }
 
   private setupIntersectionObserver() {
@@ -161,9 +175,11 @@ export class DeesPdfPreview extends DeesElement {
     try {
       this.pdfDocument = await PdfManager.loadDocument(this.pdfUrl);
       this.pageCount = this.pdfDocument.numPages;
+      this.loadedPdfUrl = this.pdfUrl;
 
       await this.updateComplete;
-      await this.renderPages();
+      this.cacheElements();
+      await this.scheduleRenderPages();
 
       this.rendered = true;
 
@@ -177,17 +193,46 @@ export class DeesPdfPreview extends DeesElement {
     }
   }
 
-  private async renderPages() {
+  private scheduleRenderPages(): Promise<void> {
+    if (!this.pdfDocument) {
+      return Promise.resolve();
+    }
+
+    if (this.renderPagesTask) {
+      this.renderPagesQueued = true;
+      return this.renderPagesTask;
+    }
+
+    this.renderPagesTask = (async () => {
+      try {
+        await this.performRenderPages();
+      } catch (error) {
+        console.error('Failed to render PDF preview pages:', error);
+      }
+    })().finally(() => {
+      this.renderPagesTask = null;
+      if (this.renderPagesQueued) {
+        this.renderPagesQueued = false;
+        void this.scheduleRenderPages();
+      }
+    });
+
+    return this.renderPagesTask;
+  }
+
+  private async performRenderPages() {
+    if (!this.pdfDocument) return;
     const canvasElements = this.shadowRoot?.querySelectorAll('.preview-canvas') as NodeListOf<HTMLCanvasElement>;
     const pagesToRender = Math.min(this.pageCount, this.maxPages);
 
     // Release old canvases
     this.clearCanvases();
 
-    // Calculate available width for preview (container width minus padding and stacking offset)
-    const containerWidth = 160; // 200px container - 40px padding
     const maxStackOffset = (pagesToRender - 1) * this.stackOffset;
-    const availableWidth = containerWidth - maxStackOffset;
+
+    this.cacheElements();
+
+    const { availableWidth, availableHeight } = this.getAvailableStackSize(maxStackOffset);
 
     // Render pages in reverse order (back to front for stacking)
     for (let i = 0; i < pagesToRender; i++) {
@@ -197,9 +242,15 @@ export class DeesPdfPreview extends DeesElement {
       const pageNum = parseInt(canvas.dataset.page || '1');
       const page = await this.pdfDocument.getPage(pageNum);
 
-      // Calculate scale to fit within available width
+      // Calculate scale to fit within available area while keeping aspect ratio
       const initialViewport = page.getViewport({ scale: 1 });
-      const scale = Math.min(availableWidth / initialViewport.width, 0.5); // Cap at 0.5 for quality
+      const scaleX = availableWidth > 0 ? availableWidth / initialViewport.width : 0;
+      const scaleY = availableHeight > 0 ? availableHeight / initialViewport.height : 0;
+      const scale = Math.min(scaleX || 0.5, scaleY || scaleX || 0.5, 0.75);
+      if (!Number.isFinite(scale) || scale <= 0) {
+        page.cleanup?.();
+        continue;
+      }
       const viewport = page.getViewport({ scale });
 
       // Acquire canvas from pool
@@ -231,12 +282,6 @@ export class DeesPdfPreview extends DeesElement {
   }
 
   private clearCanvases() {
-    // Cancel any pending render
-    if (this.renderRequestId) {
-      cancelAnimationFrame(this.renderRequestId);
-      this.renderRequestId = 0;
-    }
-
     // Release pooled canvases
     for (const pooledCanvas of this.canvases) {
       CanvasPool.release(pooledCanvas);
@@ -245,18 +290,22 @@ export class DeesPdfPreview extends DeesElement {
   }
 
   private cleanup() {
-    if (this.observer) {
-      this.observer.disconnect();
-    }
-
     this.clearCanvases();
 
-    if (this.pdfUrl && this.pdfDocument) {
+    if (this.pdfDocument) {
-      PdfManager.releaseDocument(this.pdfUrl);
+      PdfManager.releaseDocument(this.loadedPdfUrl ?? this.pdfUrl);
       this.pdfDocument = null;
     }
 
+    this.renderPagesQueued = false;
+
+    this.pageCount = 0;
+    this.previewContainer = null;
+    this.stackElement = null;
+    this.loadedPdfUrl = null;
     this.rendered = false;
+    this.loading = false;
+    this.error = false;
   }
 
   private handleClick() {
@@ -277,6 +326,10 @@ export class DeesPdfPreview extends DeesElement {
     super.updated(changedProperties);
 
     if (changedProperties.has('pdfUrl') && this.pdfUrl) {
+      const previousUrl = changedProperties.get('pdfUrl') as string | undefined;
+      if (previousUrl) {
+        PdfManager.releaseDocument(previousUrl);
+      }
       this.cleanup();
       this.rendered = false;
 
@@ -288,6 +341,10 @@ export class DeesPdfPreview extends DeesElement {
         }
       }
     }
+
+    if ((changedProperties.has('maxPages') || changedProperties.has('stackOffset')) && this.rendered) {
+      await this.scheduleRenderPages();
+    }
   }
 
   /**
@@ -351,4 +408,40 @@ export class DeesPdfPreview extends DeesElement {
 
     return items;
   }
-}
+
+  private cacheElements() {
+    if (!this.previewContainer) {
+      this.previewContainer = this.shadowRoot?.querySelector('.preview-container') as HTMLElement;
+    }
+    if (!this.stackElement) {
+      this.stackElement = this.shadowRoot?.querySelector('.preview-stack') as HTMLElement;
+    }
+  }
+
+  private setupResizeObserver() {
+    if (!this.previewContainer || this.resizeObserver) return;
+
+    this.resizeObserver = new ResizeObserver(() => {
+      if (this.rendered && this.pdfDocument && !this.loading) {
+        void this.scheduleRenderPages();
+      }
+    });
+
+    this.resizeObserver.observe(this);
+  }
+
+  private getAvailableStackSize(maxStackOffset: number) {
+    if (!this.stackElement) {
+      return {
+        availableWidth: 0,
+        availableHeight: 0,
+      };
+    }
+
+    const rect = this.stackElement.getBoundingClientRect();
+    const availableWidth = Math.max(rect.width - maxStackOffset, 0);
+    const availableHeight = Math.max(rect.height - maxStackOffset, 0);
+
+    return { availableWidth, availableHeight };
+  }
+}

ts_web/elements/dees-pdf-shared/PdfManager.ts

@@ -1,15 +1,6 @@
 import { domtools } from '@design.estate/dees-element';
 
-interface CachedDocument {
-  url: string;
-  document: any;
-  lastAccessed: number;
-  refCount: number;
-}
-
 export class PdfManager {
-  private static cache = new Map<string, CachedDocument>();
-  private static maxCacheSize = 10;
   private static pdfjsLib: any;
   private static initialized = false;
 
@@ -26,83 +17,20 @@ export class PdfManager {
   public static async loadDocument(url: string): Promise<any> {
     await this.initialize();
 
-    // Check cache first
+    // IMPORTANT: Disabled caching to ensure component isolation
-    const cached = this.cache.get(url);
+    // Each viewer instance gets its own document to prevent state sharing
-    if (cached) {
+    // This fixes issues where multiple viewers interfere with each other
-      cached.lastAccessed = Date.now();
-      cached.refCount++;
-      return cached.document;
-    }
-
-    // Load new document
     const loadingTask = this.pdfjsLib.getDocument(url);
     const document = await loadingTask.promise;
 
-    // Add to cache with LRU eviction if needed
-    if (this.cache.size >= this.maxCacheSize) {
-      this.evictLeastRecentlyUsed();
-    }
-
-    this.cache.set(url, {
-      url,
-      document,
-      lastAccessed: Date.now(),
-      refCount: 1,
-    });
-
     return document;
   }
 
-  public static releaseDocument(url: string) {
+  public static releaseDocument(_url: string) {
-    const cached = this.cache.get(url);
+    // No-op since we're not caching documents anymore
-    if (cached) {
+    // Each viewer manages its own document lifecycle
-      cached.refCount--;
-      if (cached.refCount <= 0) {
-        // Don't immediately remove, keep for potential reuse
-        cached.refCount = 0;
-      }
-    }
   }
 
-  private static evictLeastRecentlyUsed() {
+  // Cache methods removed to ensure component isolation
-    let oldestTime = Infinity;
+  // Each viewer now manages its own document lifecycle
-    let oldestKey: string | null = null;
+}
-
-    for (const [key, value] of this.cache.entries()) {
-      // Only evict if not currently in use
-      if (value.refCount === 0 && value.lastAccessed < oldestTime) {
-        oldestTime = value.lastAccessed;
-        oldestKey = key;
-      }
-    }
-
-    if (oldestKey) {
-      const cached = this.cache.get(oldestKey);
-      if (cached?.document) {
-        cached.document.destroy?.();
-      }
-      this.cache.delete(oldestKey);
-    }
-  }
-
-  public static clearCache() {
-    for (const cached of this.cache.values()) {
-      if (cached.document) {
-        cached.document.destroy?.();
-      }
-    }
-    this.cache.clear();
-  }
-
-  public static getCacheStats() {
-    return {
-      size: this.cache.size,
-      maxSize: this.maxCacheSize,
-      entries: Array.from(this.cache.entries()).map(([url, data]) => ({
-        url,
-        refCount: data.refCount,
-        lastAccessed: new Date(data.lastAccessed).toISOString(),
-      })),
-    };
-  }
-}

ts_web/elements/dees-pdf-viewer/component.ts

@@ -1,4 +1,6 @@
 import { DeesElement, property, html, customElement, domtools, type TemplateResult, type CSSResult, css, cssManager } from '@design.estate/dees-element';
+import { keyed } from 'lit/directives/keyed.js';
+import { repeat } from 'lit/directives/repeat.js';
 import { DeesInputBase } from '../dees-input-base.js';
 import { PdfManager } from '../dees-pdf-shared/PdfManager.js';
 import { viewerStyles } from './styles.js';
@@ -12,6 +14,8 @@ declare global {
   }
 }
 
+type RenderState = 'idle' | 'loading' | 'rendering-main' | 'rendering-thumbs' | 'rendered' | 'error' | 'disposed';
+
 @customElement('dees-pdf-viewer')
 export class DeesPdfViewer extends DeesElement {
   public static demo = demoFunc;
@@ -44,11 +48,31 @@ export class DeesPdfViewer extends DeesElement {
   @property({ type: Boolean })
   private loading: boolean = false;
 
+  @property({ type: String })
+  private documentId: string = '';
+
+  @property({ type: Array })
+  private thumbnailData: Array<{page: number, rendered: boolean}> = [];
+
   private pdfDocument: any;
+  private renderState: RenderState = 'idle';
+  private renderAbortController: AbortController | null = null;
   private pageRendering: boolean = false;
   private pageNumPending: number | null = null;
-  private canvas: HTMLCanvasElement;
+  private currentRenderTask: any = null;
-  private ctx: CanvasRenderingContext2D;
+  private currentRenderPromise: Promise<void> | null = null;
+  private thumbnailRenderTasks: any[] = [];
+  private canvas: HTMLCanvasElement | undefined;
+  private ctx: CanvasRenderingContext2D | undefined;
+  private viewerMain: HTMLElement | null = null;
+  private resizeObserver?: ResizeObserver;
+  private viewportDimensions = { width: 0, height: 0 };
+  private viewportMode: 'auto' | 'page-fit' | 'page-width' | 'custom' = 'auto';
+  private loadedPdfUrl: string | null = null;
+  private readonly MANUAL_MIN_ZOOM = 0.5;
+  private readonly MANUAL_MAX_ZOOM = 3;
+  private readonly ABSOLUTE_MIN_ZOOM = 0.1;
+  private readonly ABSOLUTE_MAX_ZOOM = 4;
 
   constructor() {
     super();
@@ -92,7 +116,7 @@ export class DeesPdfViewer extends DeesElement {
               <button
                 class="toolbar-button"
                 @click=${this.zoomOut}
-                ?disabled=${this.currentZoom <= 0.5}
+                ?disabled=${!this.canZoomOut}
               >
                 <dees-icon icon="lucide:ZoomOut"></dees-icon>
               </button>
@@ -105,7 +129,7 @@ export class DeesPdfViewer extends DeesElement {
               <button
                 class="toolbar-button"
                 @click=${this.zoomIn}
-                ?disabled=${this.currentZoom >= 3}
+                ?disabled=${!this.canZoomIn}
               >
                 <dees-icon icon="lucide:ZoomIn"></dees-icon>
               </button>
@@ -160,14 +184,21 @@ export class DeesPdfViewer extends DeesElement {
                 </button>
               </div>
               <div class="sidebar-content">
-                ${Array(this.totalPages).fill(0).map((_, i) => html`
+                ${keyed(this.documentId, html`
-                  <div
+                  ${repeat(
-                    class="thumbnail ${this.currentPage === i + 1 ? 'active' : ''}"
+                    this.thumbnailData,
-                    @click=${() => this.goToPage(i + 1)}
+                    (item) => item.page,
-                  >
+                    (item) => html`
-                    <canvas class="thumbnail-canvas" data-page="${i + 1}"></canvas>
+                      <div
-                    <span class="thumbnail-number">${i + 1}</span>
+                        class="thumbnail ${this.currentPage === item.page ? 'active' : ''}"
-                  </div>
+                        data-page="${item.page}"
+                        @click=${this.handleThumbnailClick}
+                      >
+                        <canvas class="thumbnail-canvas" data-page="${item.page}"></canvas>
+                        <span class="thumbnail-number">${item.page}</span>
+                      </div>
+                    `
+                  )}
                 `)}
               </div>
             </div>
@@ -191,90 +222,193 @@ export class DeesPdfViewer extends DeesElement {
   }
 
   public async connectedCallback() {
-    super.connectedCallback();
+    await super.connectedCallback();
     await this.updateComplete;
+    this.ensureViewerRefs();
+
+    // Generate a unique document ID for this connection
     if (this.pdfUrl) {
+      this.documentId = `${this.pdfUrl}-${Date.now()}-${Math.random()}`;
       await this.loadPdf();
     }
   }
 
+  public async disconnectedCallback() {
+    await super.disconnectedCallback();
+    this.resizeObserver?.disconnect();
+    this.resizeObserver = undefined;
+
+    // Mark as disposed and clean up
+    this.renderState = 'disposed';
+    await this.cleanupDocument();
+
+    // Clear all references
+    this.canvas = undefined;
+    this.ctx = undefined;
+  }
+
   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);
+      }
+      // Generate new document ID for new URL
+      this.documentId = `${this.pdfUrl}-${Date.now()}-${Math.random()}`;
       await this.loadPdf();
     }
+
+    // Only re-render thumbnails when sidebar becomes visible and document is loaded
+    if (changedProperties.has('showSidebar') && this.showSidebar && this.pdfDocument && this.renderState === 'rendered') {
+      // Use requestAnimationFrame to ensure DOM is ready
+      await new Promise(resolve => requestAnimationFrame(resolve));
+      await this.renderThumbnails();
+    }
   }
 
   private async loadPdf() {
     this.loading = true;
+    this.renderState = 'loading';
 
     try {
+      await this.cleanupDocument();
+
+      // Create new abort controller for this load operation
+      this.renderAbortController = new AbortController();
+      const signal = this.renderAbortController.signal;
+
       this.pdfDocument = await PdfManager.loadDocument(this.pdfUrl);
+      if (signal.aborted) return;
+
       this.totalPages = this.pdfDocument.numPages;
       this.currentPage = this.initialPage;
+      this.resolveInitialViewportMode();
 
+      // Initialize thumbnail data array
+      this.thumbnailData = Array.from({length: this.totalPages}, (_, i) => ({
+        page: i + 1,
+        rendered: false
+      }));
+
+      // Set loading to false to render the canvas
+      this.loading = false;
       await this.updateComplete;
-      this.canvas = this.shadowRoot?.querySelector('#pdf-canvas') as HTMLCanvasElement;
+      this.ensureViewerRefs();
-      this.ctx = this.canvas?.getContext('2d') as CanvasRenderingContext2D;
 
+      // Wait for next frame to ensure DOM is ready
+      await new Promise(resolve => requestAnimationFrame(resolve));
+      if (signal.aborted) return;
+
+      // Always re-acquire canvas references
+      this.canvas = this.shadowRoot?.querySelector('#pdf-canvas') as HTMLCanvasElement;
+
+      if (!this.canvas) {
+        console.error('Canvas element not found in DOM');
+        this.renderState = 'error';
+        return;
+      }
+
+      this.ctx = this.canvas.getContext('2d');
+
+      if (!this.ctx) {
+        console.error('Failed to acquire 2D rendering context');
+        this.renderState = 'error';
+        return;
+      }
+
+      this.renderState = 'rendering-main';
       await this.renderPage(this.currentPage);
+      if (signal.aborted) return;
 
       if (this.showSidebar) {
-        this.renderThumbnails();
+        // Ensure sidebar is in DOM after 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;
+
+        await this.renderThumbnails();
+        if (signal.aborted) return;
       }
+
+      this.renderState = 'rendered';
+      this.loadedPdfUrl = this.pdfUrl;
     } catch (error) {
       console.error('Error loading PDF:', error);
-    } finally {
       this.loading = false;
+      this.renderState = 'error';
     }
   }
 
   private async renderPage(pageNum: number) {
     if (!this.pdfDocument || !this.canvas || !this.ctx) return;
 
+    // Wait for any existing render to complete
+    if (this.currentRenderPromise) {
+      try {
+        await this.currentRenderPromise;
+      } catch (error) {
+        // Ignore errors from previous renders
+      }
+    }
+
+    // Create a new promise for this render
+    this.currentRenderPromise = this._doRenderPage(pageNum);
+    
+    try {
+      await this.currentRenderPromise;
+    } finally {
+      this.currentRenderPromise = null;
+    }
+  }
+
+  private async _doRenderPage(pageNum: number) {
+    if (!this.pdfDocument || !this.canvas || !this.ctx) return;
+
     this.pageRendering = true;
 
     try {
       const page = await this.pdfDocument.getPage(pageNum);
-
+      if (!this.ctx) {
-      let viewport;
+        console.error('Unable to acquire canvas rendering context');
-      if (this.initialZoom === 'auto' || this.initialZoom === 'page-fit') {
+        this.pageRendering = false;
-        const tempViewport = page.getViewport({ scale: 1 });
+        return;
-        const containerWidth = this.canvas.parentElement?.clientWidth || 800;
-        const containerHeight = this.canvas.parentElement?.clientHeight || 600;
-        const scaleX = containerWidth / tempViewport.width;
-        const scaleY = containerHeight / tempViewport.height;
-        this.currentZoom = Math.min(scaleX, scaleY);
-        viewport = page.getViewport({ scale: this.currentZoom });
-      } else if (this.initialZoom === 'page-width') {
-        const tempViewport = page.getViewport({ scale: 1 });
-        const containerWidth = this.canvas.parentElement?.clientWidth || 800;
-        this.currentZoom = containerWidth / tempViewport.width;
-        viewport = page.getViewport({ scale: this.currentZoom });
-      } else {
-        this.currentZoom = typeof this.initialZoom === 'number' ? this.initialZoom : 1;
-        viewport = page.getViewport({ scale: this.currentZoom });
       }
+      const viewport = this.computeViewport(page);
 
       this.canvas.height = viewport.height;
       this.canvas.width = viewport.width;
+      this.canvas.style.width = `${viewport.width}px`;
+      this.canvas.style.height = `${viewport.height}px`;
 
       const renderContext = {
         canvasContext: this.ctx,
         viewport: viewport,
       };
 
-      await page.render(renderContext).promise;
+      // Store the render task
+      this.currentRenderTask = page.render(renderContext);
+      await this.currentRenderTask.promise;
 
+      this.currentRenderTask = null;
       this.pageRendering = false;
+      
+      // Clean up the page object
+      page.cleanup?.();
 
       if (this.pageNumPending !== null) {
-        await this.renderPage(this.pageNumPending);
+        const nextPage = this.pageNumPending;
         this.pageNumPending = null;
+        await this.renderPage(nextPage);
       }
     } catch (error) {
-      console.error('Error rendering page:', error);
+      // Ignore cancellation errors
+      if (error?.name !== 'RenderingCancelledException') {
+        console.error('Error rendering page:', error);
+      }
+      this.currentRenderTask = null;
       this.pageRendering = false;
     }
   }
@@ -288,34 +422,97 @@ export class DeesPdfViewer extends DeesElement {
   }
 
   private async renderThumbnails() {
-    await this.updateComplete;
+    // Check if document is loaded
-    const thumbnails = this.shadowRoot?.querySelectorAll('.thumbnail-canvas') as NodeListOf<HTMLCanvasElement>;
+    if (!this.pdfDocument) {
-    const thumbnailWidth = 176; // Fixed width for thumbnails (200px container - 24px padding)
+      return;
+    }
 
-    for (const canvas of Array.from(thumbnails)) {
+    // Check if already rendered
-      const pageNum = parseInt(canvas.dataset.page || '1');
+    if (this.thumbnailData.length > 0 && this.thumbnailData.every(t => t.rendered)) {
-      const page = await this.pdfDocument.getPage(pageNum);
+      return;
+    }
 
-      // Calculate scale to fit thumbnail width while maintaining aspect ratio
+    // Check abort signal
-      const initialViewport = page.getViewport({ scale: 1 });
+    if (this.renderAbortController?.signal.aborted) {
-      const scale = thumbnailWidth / initialViewport.width;
+      return;
-      const viewport = page.getViewport({ scale });
+    }
 
-      // Set canvas dimensions to actual render size
+    const signal = this.renderAbortController?.signal;
-      canvas.width = viewport.width;
+    this.renderState = 'rendering-thumbs';
-      canvas.height = viewport.height;
 
-      // Also set the display size via style to ensure proper display
+    // Cancel any existing thumbnail render tasks
-      canvas.style.width = `${viewport.width}px`;
+    for (const task of this.thumbnailRenderTasks) {
-      canvas.style.height = `${viewport.height}px`;
+      try {
+        task.cancel();
+      } catch (error) {
+        // Ignore cancellation errors
+      }
+    }
+    this.thumbnailRenderTasks = [];
 
-      const context = canvas.getContext('2d');
+    try {
-      const renderContext = {
+      await this.updateComplete;
-        canvasContext: context,
+      const thumbnails = this.shadowRoot?.querySelectorAll('.thumbnail-canvas') as NodeListOf<HTMLCanvasElement>;
-        viewport: viewport,
+      const thumbnailWidth = 176; // Fixed width for thumbnails (200px container - 24px padding)
-      };
 
-      await page.render(renderContext).promise;
+      // Clear all canvases first to prevent conflicts
+      for (const canvas of Array.from(thumbnails)) {
+        const context = canvas.getContext('2d');
+        if (context) {
+          context.clearRect(0, 0, canvas.width, canvas.height);
+        }
+      }
+
+      for (const canvas of Array.from(thumbnails)) {
+        if (signal?.aborted) return;
+
+        const pageNum = parseInt(canvas.dataset.page || '1');
+        const page = await this.pdfDocument.getPage(pageNum);
+
+        // Calculate scale to fit thumbnail width while maintaining aspect ratio
+        const initialViewport = page.getViewport({ scale: 1 });
+        const scale = thumbnailWidth / initialViewport.width;
+        const viewport = page.getViewport({ scale });
+
+        // Set canvas dimensions to actual render size
+        canvas.width = viewport.width;
+        canvas.height = viewport.height;
+
+        // Also set the display size via style to ensure proper display
+        canvas.style.width = `${viewport.width}px`;
+        canvas.style.height = `${viewport.height}px`;
+
+        const context = canvas.getContext('2d');
+        if (!context) {
+          page.cleanup?.();
+          continue;
+        }
+        const renderContext = {
+          canvasContext: context,
+          viewport: viewport,
+        };
+
+        const renderTask = page.render(renderContext);
+        this.thumbnailRenderTasks.push(renderTask);
+        await renderTask.promise;
+        page.cleanup?.();
+
+        // Mark this thumbnail as rendered
+        const thumbData = this.thumbnailData.find(t => t.page === pageNum);
+        if (thumbData) {
+          thumbData.rendered = true;
+        }
+      }
+
+      // Trigger update to reflect rendered state
+      this.requestUpdate('thumbnailData');
+    } catch (error: any) {
+      // Only log non-cancellation errors
+      if (error?.name !== 'RenderingCancelledException') {
+        console.error('Error rendering thumbnails:', error);
+      }
+    } finally {
+      this.thumbnailRenderTasks = [];
     }
   }
 
@@ -333,13 +530,29 @@ export class DeesPdfViewer extends DeesElement {
     }
   }
 
-  private goToPage(pageNum: number) {
+  private async goToPage(pageNum: number) {
     if (pageNum >= 1 && pageNum <= this.totalPages) {
       this.currentPage = pageNum;
-      this.queueRenderPage(this.currentPage);
+
+      // Ensure canvas references are available
+      if (!this.canvas || !this.ctx) {
+        await this.updateComplete;
+        this.canvas = this.shadowRoot?.querySelector('#pdf-canvas') as HTMLCanvasElement;
+        this.ctx = this.canvas?.getContext('2d') || null;
+      }
+
+      if (this.canvas && this.ctx) {
+        this.queueRenderPage(this.currentPage);
+      }
     }
   }
 
+  private handleThumbnailClick(e: Event) {
+    const target = e.currentTarget as HTMLElement;
+    const pageNum = parseInt(target.dataset.page || '1');
+    this.goToPage(pageNum);
+  }
+
   private handlePageInput(e: Event) {
     const input = e.target as HTMLInputElement;
     const pageNum = parseInt(input.value);
@@ -347,31 +560,36 @@ export class DeesPdfViewer extends DeesElement {
   }
 
   private zoomIn() {
-    if (this.currentZoom < 3) {
+    const nextZoom = Math.min(this.MANUAL_MAX_ZOOM, this.currentZoom * 1.2);
-      this.currentZoom = Math.min(3, this.currentZoom * 1.2);
+    this.viewportMode = 'custom';
+    if (nextZoom !== this.currentZoom) {
+      this.currentZoom = nextZoom;
       this.queueRenderPage(this.currentPage);
     }
   }
 
   private zoomOut() {
-    if (this.currentZoom > 0.5) {
+    const nextZoom = Math.max(this.MANUAL_MIN_ZOOM, this.currentZoom / 1.2);
-      this.currentZoom = Math.max(0.5, this.currentZoom / 1.2);
+    this.viewportMode = 'custom';
+    if (nextZoom !== this.currentZoom) {
+      this.currentZoom = nextZoom;
       this.queueRenderPage(this.currentPage);
     }
   }
 
   private resetZoom() {
+    this.viewportMode = 'custom';
     this.currentZoom = 1;
     this.queueRenderPage(this.currentPage);
   }
 
   private fitToPage() {
-    this.initialZoom = 'page-fit';
+    this.viewportMode = 'page-fit';
     this.queueRenderPage(this.currentPage);
   }
 
   private fitToWidth() {
-    this.initialZoom = 'page-width';
+    this.viewportMode = 'page-width';
     this.queueRenderPage(this.currentPage);
   }
 
@@ -422,4 +640,168 @@ export class DeesPdfViewer extends DeesElement {
       }
     ];
   }
-}
+
+  private get canZoomIn(): boolean {
+    return this.viewportMode !== 'custom' || this.currentZoom < this.MANUAL_MAX_ZOOM;
+  }
+
+  private get canZoomOut(): boolean {
+    return this.viewportMode !== 'custom' || this.currentZoom > this.MANUAL_MIN_ZOOM;
+  }
+
+  private ensureViewerRefs() {
+    if (!this.viewerMain) {
+      this.viewerMain = this.shadowRoot?.querySelector('.viewer-main') as HTMLElement;
+    }
+    if (this.viewerMain && !this.resizeObserver) {
+      this.resizeObserver = new ResizeObserver(() => {
+        this.measureViewportDimensions();
+        if (this.pdfDocument) {
+          this.queueRenderPage(this.currentPage);
+        }
+      });
+      this.resizeObserver.observe(this.viewerMain);
+      this.measureViewportDimensions();
+    }
+  }
+
+  private measureViewportDimensions() {
+    if (!this.viewerMain) {
+      this.viewportDimensions = { width: 0, height: 0 };
+      return;
+    }
+
+    const styles = getComputedStyle(this.viewerMain);
+    const paddingX = parseFloat(styles.paddingLeft || '0') + parseFloat(styles.paddingRight || '0');
+    const paddingY = parseFloat(styles.paddingTop || '0') + parseFloat(styles.paddingBottom || '0');
+    const width = Math.max(this.viewerMain.clientWidth - paddingX, 0);
+    const height = Math.max(this.viewerMain.clientHeight - paddingY, 0);
+    this.viewportDimensions = { width, height };
+  }
+
+  private resolveInitialViewportMode() {
+    if (typeof this.initialZoom === 'number') {
+      this.viewportMode = 'custom';
+      this.currentZoom = this.normalizeZoom(this.initialZoom, true);
+    } else if (this.initialZoom === 'page-width') {
+      this.viewportMode = 'page-width';
+    } else if (this.initialZoom === 'page-fit' || this.initialZoom === 'auto') {
+      this.viewportMode = 'page-fit';
+    } else {
+      this.viewportMode = 'auto';
+    }
+
+    if (this.viewportMode !== 'custom') {
+      this.currentZoom = 1;
+    }
+  }
+
+  private computeViewport(page: any) {
+    this.measureViewportDimensions();
+    const baseViewport = page.getViewport({ scale: 1 });
+    let scale: number;
+
+    switch (this.viewportMode) {
+      case 'page-width': {
+        const availableWidth = this.viewportDimensions.width || baseViewport.width;
+        scale = availableWidth / baseViewport.width;
+        break;
+      }
+      case 'page-fit':
+      case 'auto': {
+        const availableWidth = this.viewportDimensions.width || baseViewport.width;
+        const availableHeight = this.viewportDimensions.height || baseViewport.height;
+        const widthScale = availableWidth / baseViewport.width;
+        const heightScale = availableHeight / baseViewport.height;
+        scale = Math.min(widthScale, heightScale);
+        break;
+      }
+      case 'custom':
+      default: {
+        scale = this.normalizeZoom(this.currentZoom || 1, false);
+        break;
+      }
+    }
+
+    if (!Number.isFinite(scale) || scale <= 0) {
+      scale = 1;
+    }
+
+    const clampedScale = this.viewportMode === 'custom'
+      ? this.normalizeZoom(scale, true)
+      : this.normalizeZoom(scale, false);
+
+    if (this.viewportMode !== 'custom') {
+      this.currentZoom = clampedScale;
+    }
+
+    return page.getViewport({ scale: clampedScale });
+  }
+
+  private normalizeZoom(value: number, clampToManualRange: boolean) {
+    const min = clampToManualRange ? this.MANUAL_MIN_ZOOM : this.ABSOLUTE_MIN_ZOOM;
+    const max = clampToManualRange ? this.MANUAL_MAX_ZOOM : this.ABSOLUTE_MAX_ZOOM;
+    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;
+    }
+
+    // Wait for any existing render to complete
+    if (this.currentRenderPromise) {
+      try {
+        await this.currentRenderPromise;
+      } catch (error) {
+        // Ignore errors
+      }
+      this.currentRenderPromise = null;
+    }
+
+    // Clear the render task reference
+    this.currentRenderTask = null;
+
+    // Cancel any thumbnail render tasks
+    for (const task of (this.thumbnailRenderTasks || [])) {
+      try {
+        task.cancel();
+      } catch (error) {
+        // Ignore cancellation errors
+      }
+    }
+    this.thumbnailRenderTasks = [];
+
+    // Reset all state flags
+    this.renderState = 'idle';
+    this.pageRendering = false;
+    this.pageNumPending = null;
+    this.thumbnailData = [];
+    this.documentId = '';
+
+    // Clear canvas content
+    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);
+      }
+    }
+
+    // Clear the loaded URL reference
+    this.loadedPdfUrl = null;
+
+    // Finally null the document reference
+    this.pdfDocument = null;
+
+    // Request update to reflect state changes
+    this.requestUpdate();
+  }
+}