1.12.4

feat(dees-pdf-viewer): improve input handling and remove unused variables

changelog.md

@@ -1,5 +1,12 @@
 # Changelog
 
+## 2025-09-20 - 1.12.4 - fix(ci)
+Add local assistant settings to enable permitted dev tooling commands
+
+- Add a local assistant settings file to configure allowed development tooling commands.
+- Allows running pnpm scripts, file read/search/replace operations and other local project helper actions.
+- Local configuration only — does not change library code or public API.
+
 ## 2025-09-19 - 1.12.3 - fix(dees-input-fileupload)
 Show selected files inside dropzone and improve file upload UX
 

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@design.estate/dees-catalog",
-  "version": "1.12.3",
+  "version": "1.12.4",
   "private": false,
   "description": "A comprehensive library that provides dynamic web components for building sophisticated and modern web applications using JavaScript and TypeScript.",
   "main": "dist_ts_web/index.js",
@@ -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/00_commitinfo_data.ts

@@ -3,6 +3,6 @@
  */
 export const commitinfo = {
   name: '@design.estate/dees-catalog',
-  version: '1.12.3',
+  version: '1.12.4',
   description: 'A comprehensive library that provides dynamic web components for building sophisticated and modern web applications using JavaScript and TypeScript.'
 }

ts_web/elements/dees-input-fileupload/styles.ts

@@ -2,8 +2,8 @@ import { css, cssManager } from '@design.estate/dees-element';
 import { DeesInputBase } from '../dees-input-base.js';
 
 export const fileuploadStyles = [
-  ...DeesInputBase.baseStyles,
   cssManager.defaultStyles,
+  ...DeesInputBase.baseStyles,
   css`
     :host {
       position: relative;

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

@@ -0,0 +1,537 @@
+import { DeesElement, property, html, customElement, type TemplateResult } from '@design.estate/dees-element';
+import { PdfManager } from '../dees-pdf-shared/PdfManager.js';
+import { CanvasPool, type PooledCanvas } from '../dees-pdf-shared/CanvasPool.js';
+import { PerformanceMonitor, throttle } from '../dees-pdf-shared/utils.js';
+import { previewStyles } from './styles.js';
+import { demo as demoFunc } from './demo.js';
+import '../dees-icon.js';
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'dees-pdf-preview': DeesPdfPreview;
+  }
+}
+
+@customElement('dees-pdf-preview')
+export class DeesPdfPreview extends DeesElement {
+  public static demo = demoFunc;
+  public static styles = previewStyles;
+
+  @property({ type: String })
+  public pdfUrl: string = '';
+
+  @property({ type: Number })
+  public currentPreviewPage: number = 1;
+
+  @property({ type: Boolean })
+  public clickable: boolean = true;
+
+  @property({ type: Number })
+  private pageCount: number = 0;
+
+  @property({ type: Boolean })
+  private loading: boolean = false;
+
+  @property({ type: Boolean })
+  private rendered: boolean = false;
+
+  @property({ type: Boolean })
+  private error: boolean = false;
+
+  @property({ type: Boolean })
+  private isHovering: boolean = false;
+
+  @property({ type: Boolean })
+  private isA4Format: boolean = true;
+
+  private renderPagesTask: Promise<void> | null = null;
+  private renderPagesQueued: boolean = false;
+
+  private observer: IntersectionObserver;
+  private pdfDocument: any;
+  private canvases: PooledCanvas[] = [];
+  private resizeObserver?: ResizeObserver;
+  private previewContainer: HTMLElement | null = null;
+  private stackElement: HTMLElement | null = null;
+  private loadedPdfUrl: string | null = null;
+
+  constructor() {
+    super();
+  }
+
+  public render(): TemplateResult {
+    return html`
+      <div
+        class="preview-container ${this.loading ? 'loading' : ''} ${this.error ? 'error' : ''} ${this.clickable ? 'clickable' : ''}"
+        @click=${this.handleClick}
+        @mouseenter=${this.handleMouseEnter}
+        @mouseleave=${this.handleMouseLeave}
+        @mousemove=${this.handleMouseMove}
+      >
+        ${this.loading ? html`
+          <div class="preview-loading">
+            <div class="preview-spinner"></div>
+            <div class="preview-text">Loading preview...</div>
+          </div>
+        ` : ''}
+
+        ${this.error ? html`
+          <div class="preview-error">
+            <dees-icon icon="lucide:FileX"></dees-icon>
+            <div class="preview-text">Failed to load PDF</div>
+          </div>
+        ` : ''}
+
+        ${!this.loading && !this.error ? html`
+          <div class="preview-stack ${!this.isA4Format ? 'non-a4' : ''}">
+            <canvas
+              class="preview-canvas"
+              data-page="${this.currentPreviewPage}"
+            ></canvas>
+          </div>
+
+          ${this.pageCount > 1 && this.isHovering ? html`
+            <div class="preview-page-indicator">
+              Page ${this.currentPreviewPage} of ${this.pageCount}
+            </div>
+          ` : ''}
+
+          ${this.pageCount > 0 && !this.isHovering ? html`
+            <div class="preview-info">
+              <dees-icon icon="lucide:FileText"></dees-icon>
+              <span class="preview-pages">${this.pageCount} page${this.pageCount > 1 ? 's' : ''}</span>
+            </div>
+          ` : ''}
+
+          ${this.clickable ? html`
+            <div class="preview-overlay">
+              <dees-icon icon="lucide:Eye"></dees-icon>
+              <span>View PDF</span>
+            </div>
+          ` : ''}
+        ` : ''}
+      </div>
+    `;
+  }
+
+  private handleMouseEnter() {
+    this.isHovering = true;
+  }
+
+  private handleMouseLeave() {
+    this.isHovering = false;
+    // Reset to first page when not hovering
+    if (this.currentPreviewPage !== 1) {
+      this.currentPreviewPage = 1;
+      void this.scheduleRenderPages();
+    }
+  }
+
+  private handleMouseMove(e: MouseEvent) {
+    if (!this.isHovering || this.pageCount <= 1) return;
+
+    const rect = this.getBoundingClientRect();
+    const x = e.clientX - rect.left;
+    const width = rect.width;
+
+    // Calculate which page to show based on horizontal position
+    const percentage = Math.max(0, Math.min(1, x / width));
+    const newPage = Math.ceil(percentage * this.pageCount) || 1;
+
+    if (newPage !== this.currentPreviewPage) {
+      this.currentPreviewPage = newPage;
+      void this.scheduleRenderPages();
+    }
+  }
+
+  public async connectedCallback() {
+    await super.connectedCallback();
+    this.setupIntersectionObserver();
+    await this.updateComplete;
+    this.cacheElements();
+    this.setupResizeObserver();
+  }
+
+  public async disconnectedCallback() {
+    await super.disconnectedCallback();
+    this.cleanup();
+    if (this.observer) {
+      this.observer.disconnect();
+    }
+    this.resizeObserver?.disconnect();
+    this.resizeObserver = undefined;
+  }
+
+  private setupIntersectionObserver() {
+    const options = {
+      root: null,
+      rootMargin: '200px',
+      threshold: 0.01,
+    };
+
+    this.observer = new IntersectionObserver(
+      throttle((entries) => {
+        for (const entry of entries) {
+          if (entry.isIntersecting && !this.rendered && this.pdfUrl) {
+            this.loadAndRenderPreview();
+          } else if (!entry.isIntersecting && this.rendered) {
+            // Optional: Clear canvases when out of view for memory optimization
+            // this.clearCanvases();
+          }
+        }
+      }, 100),
+      options
+    );
+
+    this.observer.observe(this);
+  }
+
+  private async loadAndRenderPreview() {
+    if (this.rendered || this.loading) return;
+
+    this.loading = true;
+    this.error = false;
+    PerformanceMonitor.mark(`preview-load-${this.pdfUrl}`);
+
+    try {
+      this.pdfDocument = await PdfManager.loadDocument(this.pdfUrl);
+      this.pageCount = this.pdfDocument.numPages;
+      this.currentPreviewPage = 1;
+      this.loadedPdfUrl = this.pdfUrl;
+
+      // Force an update to ensure the canvas element is in the DOM
+      this.loading = false;
+      await this.updateComplete;
+      this.cacheElements();
+
+      // Now render the first page
+      await this.scheduleRenderPages();
+
+      this.rendered = true;
+
+      const duration = PerformanceMonitor.measure(`preview-render-${this.pdfUrl}`, `preview-load-${this.pdfUrl}`);
+      console.log(`PDF preview rendered in ${duration}ms`);
+    } catch (error) {
+      console.error('Failed to load PDF preview:', error);
+      this.error = true;
+      this.loading = false;
+    }
+  }
+
+  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;
+
+    // Wait a frame to ensure DOM is ready
+    await new Promise(resolve => requestAnimationFrame(resolve));
+
+    const canvas = this.shadowRoot?.querySelector('.preview-canvas') as HTMLCanvasElement;
+    if (!canvas) {
+      console.warn('Preview canvas not found in DOM');
+      return;
+    }
+
+    // Release old canvases
+    this.clearCanvases();
+
+    this.cacheElements();
+
+    // Get available size for the preview
+    const { availableWidth, availableHeight } = this.getAvailableSize();
+
+    try {
+      // Get the page to render
+      const pageNum = this.currentPreviewPage;
+      const page = await this.pdfDocument.getPage(pageNum);
+
+      // Calculate scale to fit within available area while keeping aspect ratio
+      // Use higher scale for sharper rendering
+      const initialViewport = page.getViewport({ scale: 1 });
+
+      // Check if this is standard paper format (A4 or US Letter)
+      const aspectRatio = initialViewport.height / initialViewport.width;
+
+      // Common paper format ratios
+      const a4PortraitRatio = 1.414; // 297mm / 210mm
+      const a4LandscapeRatio = 0.707; // 210mm / 297mm
+      const letterPortraitRatio = 1.294; // 11" / 8.5"
+      const letterLandscapeRatio = 0.773; // 8.5" / 11"
+
+      // Check for standard formats with 5% tolerance
+      const tolerance = 0.05;
+      const isA4Portrait = Math.abs(aspectRatio - a4PortraitRatio) < (a4PortraitRatio * tolerance);
+      const isA4Landscape = Math.abs(aspectRatio - a4LandscapeRatio) < (a4LandscapeRatio * tolerance);
+      const isLetterPortrait = Math.abs(aspectRatio - letterPortraitRatio) < (letterPortraitRatio * tolerance);
+      const isLetterLandscape = Math.abs(aspectRatio - letterLandscapeRatio) < (letterLandscapeRatio * tolerance);
+
+      // Consider it standard format if it matches A4 or US Letter
+      this.isA4Format = isA4Portrait || isA4Landscape || isLetterPortrait || isLetterLandscape;
+
+      // Debug logging
+      console.log(`PDF aspect ratio: ${aspectRatio.toFixed(3)}, standard format: ${this.isA4Format}`)
+
+      // Adjust available size for non-A4 documents (account for padding)
+      const adjustedWidth = this.isA4Format ? availableWidth : availableWidth - 24;
+      const adjustedHeight = this.isA4Format ? availableHeight : availableHeight - 24;
+
+      const scaleX = adjustedWidth > 0 ? adjustedWidth / initialViewport.width : 0;
+      const scaleY = adjustedHeight > 0 ? adjustedHeight / initialViewport.height : 0;
+      // Increase scale by 2x for sharper rendering, but limit to 3.0 max
+      const baseScale = Math.min(scaleX || 0.5, scaleY || scaleX || 0.5);
+      const renderScale = Math.min(baseScale * 2, 3.0);
+
+      if (!Number.isFinite(renderScale) || renderScale <= 0) {
+        page.cleanup?.();
+        return;
+      }
+
+      const viewport = page.getViewport({ scale: renderScale });
+
+      // Acquire canvas from pool
+      const pooledCanvas = CanvasPool.acquire(viewport.width, viewport.height);
+      this.canvases.push(pooledCanvas);
+
+      // Render to pooled canvas first
+      const renderContext = {
+        canvasContext: pooledCanvas.ctx,
+        viewport: viewport,
+      };
+
+      await page.render(renderContext).promise;
+
+      // Transfer to display canvas
+      // Set actual canvas resolution for sharpness
+      canvas.width = viewport.width;
+      canvas.height = viewport.height;
+
+      // Scale down display size to fit the container while keeping high resolution
+      // For A4, fill the container; for non-A4, respect padding
+      const displayWidth = adjustedWidth;
+      const displayHeight = (viewport.height / viewport.width) * adjustedWidth;
+
+      // If it fits height-wise better, scale by height instead
+      if (displayHeight > adjustedHeight) {
+        const altDisplayHeight = adjustedHeight;
+        const altDisplayWidth = (viewport.width / viewport.height) * adjustedHeight;
+        canvas.style.width = `${altDisplayWidth}px`;
+        canvas.style.height = `${altDisplayHeight}px`;
+      } else {
+        canvas.style.width = `${displayWidth}px`;
+        canvas.style.height = `${displayHeight}px`;
+      }
+
+      const ctx = canvas.getContext('2d');
+      if (ctx) {
+        // Enable image smoothing for better quality
+        ctx.imageSmoothingEnabled = true;
+        ctx.imageSmoothingQuality = 'high';
+        ctx.drawImage(pooledCanvas.canvas, 0, 0);
+      }
+
+      // Release page to free memory
+      page.cleanup();
+    } catch (error) {
+      console.error(`Failed to render page ${this.currentPreviewPage}:`, error);
+    }
+  }
+
+  private clearCanvases() {
+    // Release pooled canvases
+    for (const pooledCanvas of this.canvases) {
+      CanvasPool.release(pooledCanvas);
+    }
+    this.canvases = [];
+  }
+
+  private cleanup() {
+    this.clearCanvases();
+
+    if (this.pdfDocument) {
+      PdfManager.releaseDocument(this.loadedPdfUrl ?? this.pdfUrl);
+      this.pdfDocument = null;
+    }
+
+    this.renderPagesQueued = false;
+
+    this.pageCount = 0;
+    this.currentPreviewPage = 1;
+    this.isHovering = false;
+    this.isA4Format = true;
+    this.previewContainer = null;
+    this.stackElement = null;
+    this.loadedPdfUrl = null;
+    this.rendered = false;
+    this.loading = false;
+    this.error = false;
+  }
+
+  private handleClick() {
+    if (!this.clickable) return;
+
+    // Dispatch custom event for parent to handle
+    this.dispatchEvent(new CustomEvent('pdf-preview-click', {
+      detail: {
+        pdfUrl: this.pdfUrl,
+        pageCount: this.pageCount,
+      },
+      bubbles: true,
+      composed: true,
+    }));
+  }
+
+  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);
+      }
+      this.cleanup();
+      this.rendered = false;
+      this.currentPreviewPage = 1;
+
+      // Check if in viewport and render if so
+      if (this.observer) {
+        const rect = this.getBoundingClientRect();
+        if (rect.top < window.innerHeight && rect.bottom > 0) {
+          this.loadAndRenderPreview();
+        }
+      }
+    }
+
+    if (changedProperties.has('currentPreviewPage') && this.rendered) {
+      await this.scheduleRenderPages();
+    }
+  }
+
+  /**
+   * Provide context menu items for right-click functionality
+   */
+  public getContextMenuItems() {
+    const items: any[] = [];
+
+    // If clickable, add option to view the PDF
+    if (this.clickable) {
+      items.push({
+        name: 'View PDF',
+        iconName: 'lucide:Eye',
+        action: async () => {
+          this.handleClick();
+        }
+      });
+      items.push({ divider: true });
+    }
+
+    items.push(
+      {
+        name: 'Open PDF in New Tab',
+        iconName: 'lucide:ExternalLink',
+        action: async () => {
+          window.open(this.pdfUrl, '_blank');
+        }
+      },
+      { divider: true },
+      {
+        name: 'Copy PDF URL',
+        iconName: 'lucide:Copy',
+        action: async () => {
+          await navigator.clipboard.writeText(this.pdfUrl);
+        }
+      },
+      {
+        name: 'Download PDF',
+        iconName: 'lucide:Download',
+        action: async () => {
+          const link = document.createElement('a');
+          link.href = this.pdfUrl;
+          link.download = this.pdfUrl.split('/').pop() || 'document.pdf';
+          link.click();
+        }
+      }
+    );
+
+    // Add page count info as a disabled item
+    if (this.pageCount > 0) {
+      items.push(
+        { divider: true },
+        {
+          name: `${this.pageCount} page${this.pageCount > 1 ? 's' : ''}`,
+          iconName: 'lucide:FileText',
+          disabled: true,
+          action: async () => {}
+        }
+      );
+    }
+
+    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 getAvailableSize() {
+    if (!this.stackElement) {
+      // Try to get the stack element if it's not cached
+      this.stackElement = this.shadowRoot?.querySelector('.preview-stack') as HTMLElement;
+    }
+
+    if (!this.stackElement) {
+      // Fallback to default size if element not found
+      return {
+        availableWidth: 200,  // Full container width
+        availableHeight: 260, // Full container height
+      };
+    }
+
+    const rect = this.stackElement.getBoundingClientRect();
+    const availableWidth = Math.max(rect.width, 0) || 200;
+    const availableHeight = Math.max(rect.height, 0) || 260;
+
+    return { availableWidth, availableHeight };
+  }
+}

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

@@ -0,0 +1,189 @@
+import { html } from '@design.estate/dees-element';
+
+export const demo = () => {
+  const samplePdfs = [
+    'https://raw.githubusercontent.com/mozilla/pdf.js/ba2edeae/examples/learning/helloworld.pdf',
+    'https://raw.githubusercontent.com/mozilla/pdf.js/ba2edeae/web/compressed.tracemonkey-pldi-09.pdf',
+  ];
+
+  const generateGridItems = (count: number) => {
+    const items = [];
+    for (let i = 0; i < count; i++) {
+      const pdfUrl = samplePdfs[i % samplePdfs.length];
+      items.push(html`
+        <dees-pdf-preview
+          pdfUrl="${pdfUrl}"
+          maxPages="3"
+          stackOffset="6"
+          clickable="true"
+          grid-mode
+          @pdf-preview-click=${(e: CustomEvent) => {
+            console.log('PDF Preview clicked:', e.detail);
+            alert(`PDF clicked: ${e.detail.pageCount} pages`);
+          }}
+        ></dees-pdf-preview>
+      `);
+    }
+    return items;
+  };
+
+  return html`
+    <style>
+      .demo-container {
+        padding: 40px;
+        background: #f5f5f5;
+      }
+
+      .demo-section {
+        margin-bottom: 60px;
+      }
+
+      h3 {
+        margin-bottom: 20px;
+        font-size: 18px;
+        font-weight: 600;
+      }
+
+      .preview-grid {
+        display: grid;
+        grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
+        gap: 24px;
+      }
+
+      .preview-row {
+        display: flex;
+        gap: 24px;
+        align-items: center;
+        margin-bottom: 20px;
+      }
+
+      .preview-label {
+        font-size: 14px;
+        font-weight: 500;
+        min-width: 100px;
+      }
+
+      .performance-stats {
+        margin-top: 20px;
+        padding: 16px;
+        background: white;
+        border-radius: 8px;
+        font-size: 14px;
+      }
+
+      .stats-grid {
+        display: grid;
+        grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
+        gap: 12px;
+        margin-top: 12px;
+      }
+
+      .stat-item {
+        display: flex;
+        flex-direction: column;
+        gap: 4px;
+      }
+
+      .stat-label {
+        font-size: 12px;
+        color: #666;
+      }
+
+      .stat-value {
+        font-size: 16px;
+        font-weight: 600;
+      }
+    </style>
+
+    <div class="demo-container">
+      <div class="demo-section">
+        <h3>Single PDF Preview with Stacked Pages</h3>
+        <dees-pdf-preview
+          pdfUrl="https://raw.githubusercontent.com/mozilla/pdf.js/ba2edeae/web/compressed.tracemonkey-pldi-09.pdf"
+          maxPages="3"
+          stackOffset="8"
+          clickable="true"
+        ></dees-pdf-preview>
+      </div>
+
+      <div class="demo-section">
+        <h3>Different Sizes</h3>
+        <div class="preview-row">
+          <div class="preview-label">Small:</div>
+          <dees-pdf-preview
+            size="small"
+            pdfUrl="https://raw.githubusercontent.com/mozilla/pdf.js/ba2edeae/examples/learning/helloworld.pdf"
+            maxPages="2"
+            stackOffset="6"
+            clickable="true"
+          ></dees-pdf-preview>
+        </div>
+
+        <div class="preview-row">
+          <div class="preview-label">Default:</div>
+          <dees-pdf-preview
+            pdfUrl="https://raw.githubusercontent.com/mozilla/pdf.js/ba2edeae/examples/learning/helloworld.pdf"
+            maxPages="3"
+            stackOffset="8"
+            clickable="true"
+          ></dees-pdf-preview>
+        </div>
+
+        <div class="preview-row">
+          <div class="preview-label">Large:</div>
+          <dees-pdf-preview
+            size="large"
+            pdfUrl="https://raw.githubusercontent.com/mozilla/pdf.js/ba2edeae/examples/learning/helloworld.pdf"
+            maxPages="4"
+            stackOffset="10"
+            clickable="true"
+          ></dees-pdf-preview>
+        </div>
+      </div>
+
+      <div class="demo-section">
+        <h3>Non-Clickable Preview</h3>
+        <dees-pdf-preview
+          pdfUrl="https://raw.githubusercontent.com/mozilla/pdf.js/ba2edeae/examples/learning/helloworld.pdf"
+          maxPages="3"
+          stackOffset="8"
+          clickable="false"
+        ></dees-pdf-preview>
+      </div>
+
+      <div class="demo-section">
+        <h3>Performance Grid - 50 PDFs with Lazy Loading</h3>
+        <p style="margin-bottom: 20px; font-size: 14px; color: #666;">
+          This grid demonstrates the performance optimizations with 50 PDF previews.
+          Scroll to see lazy loading in action - previews render only when visible.
+        </p>
+
+        <div class="preview-grid">
+          ${generateGridItems(50)}
+        </div>
+
+        <div class="performance-stats">
+          <h4>Performance Features</h4>
+          <div class="stats-grid">
+            <div class="stat-item">
+              <span class="stat-label">Lazy Loading</span>
+              <span class="stat-value">✓ Enabled</span>
+            </div>
+            <div class="stat-item">
+              <span class="stat-label">Canvas Pooling</span>
+              <span class="stat-value">✓ Active</span>
+            </div>
+            <div class="stat-item">
+              <span class="stat-label">Memory Management</span>
+              <span class="stat-value">✓ Optimized</span>
+            </div>
+            <div class="stat-item">
+              <span class="stat-label">Intersection Observer</span>
+              <span class="stat-value">200px margin</span>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  `;
+};

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

@@ -0,0 +1 @@
+export * from './component.js';

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

@@ -0,0 +1,223 @@
+import { css, cssManager } from '@design.estate/dees-element';
+
+export const previewStyles = [
+  cssManager.defaultStyles,
+  css`
+    :host {
+      display: inline-block;
+      position: relative;
+    }
+
+    .preview-container {
+      position: relative;
+      width: 200px;
+      height: 260px;
+      background: ${cssManager.bdTheme('hsl(0 0% 98%)', 'hsl(215 20% 14%)')};
+      border-radius: 4px;
+      overflow: hidden;
+      transition: transform 0.2s ease, box-shadow 0.2s ease;
+      box-shadow: 0 1px 3px ${cssManager.bdTheme('rgba(0, 0, 0, 0.12)', 'rgba(0, 0, 0, 0.24)')};
+    }
+
+    .preview-container.clickable {
+      cursor: pointer;
+    }
+
+    .preview-container.clickable:hover {
+      transform: translateY(-2px);
+      box-shadow: 0 8px 24px ${cssManager.bdTheme('rgba(0, 0, 0, 0.12)', 'rgba(0, 0, 0, 0.3)')};
+    }
+
+    .preview-container.clickable:hover .preview-overlay {
+      opacity: 1;
+    }
+
+    .preview-stack {
+      position: relative;
+      width: 100%;
+      height: 100%;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      box-sizing: border-box;
+      overflow: hidden;
+    }
+
+    .preview-stack.non-a4 {
+      padding: 12px;
+    }
+
+    .preview-canvas {
+      position: relative;
+      background: white;
+      display: block;
+      max-width: 100%;
+      max-height: 100%;
+      width: auto;
+      height: auto;
+      object-fit: contain;
+      image-rendering: auto;
+      -webkit-font-smoothing: antialiased;
+      box-shadow: 0 1px 3px ${cssManager.bdTheme('rgba(0, 0, 0, 0.1)', 'rgba(0, 0, 0, 0.3)')};
+    }
+
+    .non-a4 .preview-canvas {
+      border: 1px solid ${cssManager.bdTheme('hsl(214 31% 92%)', 'hsl(217 25% 24%)')};
+      border-radius: 4px;
+    }
+
+    .preview-info {
+      position: absolute;
+      bottom: 8px;
+      left: 8px;
+      right: 8px;
+      padding: 6px 10px;
+      background: ${cssManager.bdTheme('hsl(0 0% 100% / 0.92)', 'hsl(215 20% 12% / 0.92)')};
+      border-radius: 6px;
+      display: flex;
+      align-items: center;
+      gap: 6px;
+      font-size: 12px;
+      color: ${cssManager.bdTheme('hsl(215 16% 45%)', 'hsl(215 16% 75%)')};
+      backdrop-filter: blur(12px);
+      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+      z-index: 10;
+    }
+
+    .preview-info dees-icon {
+      font-size: 13px;
+      color: ${cssManager.bdTheme('hsl(217 91% 60%)', 'hsl(213 93% 68%)')};
+    }
+
+    .preview-pages {
+      font-weight: 500;
+      font-size: 11px;
+    }
+
+    .preview-overlay {
+      position: absolute;
+      top: 0;
+      left: 0;
+      right: 0;
+      bottom: 0;
+      background: ${cssManager.bdTheme('rgba(0, 0, 0, 0.7)', 'rgba(0, 0, 0, 0.8)')};
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      justify-content: center;
+      gap: 8px;
+      opacity: 0;
+      transition: opacity 0.2s ease;
+      z-index: 20;
+    }
+
+    .preview-overlay dees-icon {
+      font-size: 24px;
+      color: white;
+    }
+
+    .preview-overlay span {
+      font-size: 14px;
+      font-weight: 500;
+      color: white;
+    }
+
+    .preview-loading,
+    .preview-error {
+      position: absolute;
+      top: 0;
+      left: 0;
+      right: 0;
+      bottom: 0;
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      justify-content: center;
+      gap: 12px;
+      color: ${cssManager.bdTheme('hsl(215 16% 45%)', 'hsl(215 16% 75%)')};
+    }
+
+    .preview-loading {
+      background: ${cssManager.bdTheme('hsl(0 0% 99%)', 'hsl(215 20% 14%)')};
+    }
+
+    .preview-error {
+      background: ${cssManager.bdTheme('hsl(0 72% 98%)', 'hsl(0 62% 20%)')};
+      color: ${cssManager.bdTheme('hsl(0 72% 40%)', 'hsl(0 70% 68%)')};
+    }
+
+    .preview-spinner {
+      width: 24px;
+      height: 24px;
+      border-radius: 50%;
+      border: 2px solid ${cssManager.bdTheme('hsl(214 31% 86%)', 'hsl(217 25% 28%)')};
+      border-top-color: ${cssManager.bdTheme('hsl(217 91% 60%)', 'hsl(213 93% 68%)')};
+      animation: spin 0.8s linear infinite;
+    }
+
+    @keyframes spin {
+      to {
+        transform: rotate(360deg);
+      }
+    }
+
+    .preview-text {
+      font-size: 13px;
+      font-weight: 500;
+    }
+
+    .preview-error dees-icon {
+      font-size: 32px;
+    }
+
+    .preview-page-indicator {
+      position: absolute;
+      top: 8px;
+      left: 8px;
+      right: 8px;
+      padding: 5px 8px;
+      background: ${cssManager.bdTheme('hsl(0 0% 0% / 0.7)', 'hsl(0 0% 100% / 0.9)')};
+      color: ${cssManager.bdTheme('white', 'hsl(215 20% 12%)')};
+      border-radius: 4px;
+      font-size: 11px;
+      font-weight: 600;
+      text-align: center;
+      backdrop-filter: blur(12px);
+      z-index: 15;
+      pointer-events: none;
+      animation: fadeIn 0.2s ease;
+    }
+
+    @keyframes fadeIn {
+      from {
+        opacity: 0;
+        transform: translateY(-4px);
+      }
+      to {
+        opacity: 1;
+        transform: translateY(0);
+      }
+    }
+
+    /* Responsive sizes */
+    :host([size="small"]) .preview-container {
+      width: 150px;
+      height: 195px;
+    }
+
+    :host([size="large"]) .preview-container {
+      width: 250px;
+      height: 325px;
+    }
+
+    /* Grid optimizations */
+    :host([grid-mode]) .preview-container {
+      will-change: auto;
+    }
+
+    :host([grid-mode]) .preview-canvas {
+      image-rendering: -webkit-optimize-contrast;
+      image-rendering: crisp-edges;
+    }
+  `,
+];

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

@@ -0,0 +1,135 @@
+export interface PooledCanvas {
+  canvas: HTMLCanvasElement;
+  ctx: CanvasRenderingContext2D;
+  inUse: boolean;
+  lastUsed: number;
+}
+
+export class CanvasPool {
+  private static pool: PooledCanvas[] = [];
+  private static maxPoolSize = 20;
+  private static readonly MIN_CANVAS_SIZE = 256;
+  private static readonly MAX_CANVAS_SIZE = 4096;
+
+  public static acquire(width: number, height: number): PooledCanvas {
+    // Try to find a suitable canvas from the pool
+    const suitable = this.pool.find(
+      (item) => !item.inUse &&
+      item.canvas.width >= width &&
+      item.canvas.height >= height &&
+      item.canvas.width <= width * 1.5 &&
+      item.canvas.height <= height * 1.5
+    );
+
+    if (suitable) {
+      suitable.inUse = true;
+      suitable.lastUsed = Date.now();
+
+      // Clear and resize if needed
+      suitable.canvas.width = width;
+      suitable.canvas.height = height;
+      suitable.ctx.clearRect(0, 0, width, height);
+
+      return suitable;
+    }
+
+    // Create new canvas if pool not full
+    if (this.pool.length < this.maxPoolSize) {
+      const canvas = document.createElement('canvas');
+      const ctx = canvas.getContext('2d', {
+        alpha: true,
+        desynchronized: true,
+      }) as CanvasRenderingContext2D;
+
+      canvas.width = Math.min(Math.max(width, this.MIN_CANVAS_SIZE), this.MAX_CANVAS_SIZE);
+      canvas.height = Math.min(Math.max(height, this.MIN_CANVAS_SIZE), this.MAX_CANVAS_SIZE);
+
+      const pooledCanvas: PooledCanvas = {
+        canvas,
+        ctx,
+        inUse: true,
+        lastUsed: Date.now(),
+      };
+
+      this.pool.push(pooledCanvas);
+      return pooledCanvas;
+    }
+
+    // Evict and reuse least recently used canvas
+    const lru = this.pool
+      .filter((item) => !item.inUse)
+      .sort((a, b) => a.lastUsed - b.lastUsed)[0];
+
+    if (lru) {
+      lru.canvas.width = width;
+      lru.canvas.height = height;
+      lru.ctx.clearRect(0, 0, width, height);
+      lru.inUse = true;
+      lru.lastUsed = Date.now();
+      return lru;
+    }
+
+    // Fallback: create temporary canvas (shouldn't normally happen)
+    const canvas = document.createElement('canvas');
+    const ctx = canvas.getContext('2d') as CanvasRenderingContext2D;
+    canvas.width = width;
+    canvas.height = height;
+
+    return {
+      canvas,
+      ctx,
+      inUse: true,
+      lastUsed: Date.now(),
+    };
+  }
+
+  public static release(pooledCanvas: PooledCanvas) {
+    if (this.pool.includes(pooledCanvas)) {
+      pooledCanvas.inUse = false;
+      // Clear canvas to free memory
+      pooledCanvas.ctx.clearRect(0, 0, pooledCanvas.canvas.width, pooledCanvas.canvas.height);
+    }
+  }
+
+  public static releaseAll() {
+    for (const item of this.pool) {
+      item.inUse = false;
+      item.ctx.clearRect(0, 0, item.canvas.width, item.canvas.height);
+    }
+  }
+
+  public static destroy() {
+    for (const item of this.pool) {
+      item.canvas.width = 0;
+      item.canvas.height = 0;
+    }
+    this.pool = [];
+  }
+
+  public static getStats() {
+    return {
+      poolSize: this.pool.length,
+      maxPoolSize: this.maxPoolSize,
+      inUse: this.pool.filter((item) => item.inUse).length,
+      available: this.pool.filter((item) => !item.inUse).length,
+    };
+  }
+
+  public static adjustPoolSize(newSize: number) {
+    if (newSize < this.pool.length) {
+      // Remove excess canvases
+      const toRemove = this.pool.length - newSize;
+      const removed = this.pool
+        .filter((item) => !item.inUse)
+        .slice(0, toRemove);
+
+      for (const item of removed) {
+        const index = this.pool.indexOf(item);
+        if (index > -1) {
+          this.pool.splice(index, 1);
+        }
+      }
+    }
+    this.maxPoolSize = newSize;
+  }
+}

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

@@ -0,0 +1,36 @@
+import { domtools } from '@design.estate/dees-element';
+
+export class PdfManager {
+  private static pdfjsLib: any;
+  private static initialized = false;
+
+  public static async initialize() {
+    if (this.initialized) return;
+
+    // @ts-ignore
+    this.pdfjsLib = await import('https://cdn.jsdelivr.net/npm/pdfjs-dist@4.0.379/+esm');
+    this.pdfjsLib.GlobalWorkerOptions.workerSrc = 'https://cdn.jsdelivr.net/npm/pdfjs-dist@4.0.379/build/pdf.worker.mjs';
+
+    this.initialized = true;
+  }
+
+  public static async loadDocument(url: string): Promise<any> {
+    await this.initialize();
+
+    // IMPORTANT: Disabled caching to ensure component isolation
+    // Each viewer instance gets its own document to prevent state sharing
+    // This fixes issues where multiple viewers interfere with each other
+    const loadingTask = this.pdfjsLib.getDocument(url);
+    const document = await loadingTask.promise;
+
+    return document;
+  }
+
+  public static releaseDocument(_url: string) {
+    // No-op since we're not caching documents anymore
+    // Each viewer manages its own document lifecycle
+  }
+
+  // Cache methods removed to ensure component isolation
+  // Each viewer now manages its own document lifecycle
+}

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

@@ -0,0 +1,98 @@
+export function debounce<T extends (...args: any[]) => any>(
+  func: T,
+  wait: number
+): (...args: Parameters<T>) => void {
+  let timeout: number | undefined;
+
+  return function executedFunction(...args: Parameters<T>) {
+    const later = () => {
+      clearTimeout(timeout);
+      func(...args);
+    };
+
+    clearTimeout(timeout);
+    timeout = window.setTimeout(later, wait);
+  };
+}
+
+export function throttle<T extends (...args: any[]) => any>(
+  func: T,
+  limit: number
+): (...args: Parameters<T>) => void {
+  let inThrottle: boolean;
+
+  return function executedFunction(...args: Parameters<T>) {
+    if (!inThrottle) {
+      func.apply(this, args);
+      inThrottle = true;
+      setTimeout(() => inThrottle = false, limit);
+    }
+  };
+}
+
+export function formatFileSize(bytes: number): string {
+  if (bytes === 0) return '0 Bytes';
+
+  const k = 1024;
+  const sizes = ['Bytes', 'KB', 'MB', 'GB'];
+  const i = Math.floor(Math.log(bytes) / Math.log(k));
+
+  return Math.round(bytes / Math.pow(k, i) * 100) / 100 + ' ' + sizes[i];
+}
+
+export function isInViewport(element: Element, margin = 0): boolean {
+  const rect = element.getBoundingClientRect();
+  return (
+    rect.top >= -margin &&
+    rect.left >= -margin &&
+    rect.bottom <= (window.innerHeight || document.documentElement.clientHeight) + margin &&
+    rect.right <= (window.innerWidth || document.documentElement.clientWidth) + margin
+  );
+}
+
+export class PerformanceMonitor {
+  private static marks = new Map<string, number>();
+  private static measures: Array<{ name: string; duration: number }> = [];
+
+  public static mark(name: string) {
+    this.marks.set(name, performance.now());
+  }
+
+  public static measure(name: string, startMark: string) {
+    const start = this.marks.get(startMark);
+    if (start) {
+      const duration = performance.now() - start;
+      this.measures.push({ name, duration });
+      this.marks.delete(startMark);
+      return duration;
+    }
+    return 0;
+  }
+
+  public static getReport() {
+    const report = {
+      measures: [...this.measures],
+      averages: {} as Record<string, number>,
+    };
+
+    // Calculate averages for repeated measures
+    const grouped = new Map<string, number[]>();
+    for (const measure of this.measures) {
+      if (!grouped.has(measure.name)) {
+        grouped.set(measure.name, []);
+      }
+      grouped.get(measure.name)!.push(measure.duration);
+    }
+
+    for (const [name, durations] of grouped) {
+      report.averages[name] = durations.reduce((a, b) => a + b, 0) / durations.length;
+    }
+
+    return report;
+  }
+
+  public static clear() {
+    this.marks.clear();
+    this.measures = [];
+  }
+}

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

@@ -0,0 +1,800 @@
+import { DeesElement, property, html, customElement, type TemplateResult } from '@design.estate/dees-element';
+import { keyed } from 'lit/directives/keyed.js';
+import { repeat } from 'lit/directives/repeat.js';
+import { PdfManager } from '../dees-pdf-shared/PdfManager.js';
+import { viewerStyles } from './styles.js';
+import { demo as demoFunc } from './demo.js';
+import '../dees-icon.js';
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'dees-pdf-viewer': DeesPdfViewer;
+  }
+}
+
+type RenderState = 'idle' | 'loading' | 'rendering-main' | 'rendering-thumbs' | 'rendered' | 'error' | 'disposed';
+
+@customElement('dees-pdf-viewer')
+export class DeesPdfViewer extends DeesElement {
+  public static demo = demoFunc;
+  public static styles = viewerStyles;
+
+  @property({ type: String })
+  public pdfUrl: string = '';
+
+  @property({ type: Number })
+  public initialPage: number = 1;
+
+  @property({ type: String })
+  public initialZoom: 'auto' | 'page-fit' | 'page-width' | number = 'auto';
+
+  @property({ type: Boolean })
+  public showToolbar: boolean = true;
+
+  @property({ type: Boolean })
+  public showSidebar: boolean = false;
+
+  @property({ type: Number })
+  private currentPage: number = 1;
+
+  @property({ type: Number })
+  private totalPages: number = 1;
+
+  @property({ type: Number })
+  private currentZoom: number = 1;
+
+  @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 currentRenderTask: any = null;
+  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 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();
+  }
+
+  public render(): TemplateResult {
+    return html`
+      <div class="pdf-viewer ${this.showSidebar ? 'with-sidebar' : ''}">
+        ${this.showToolbar ? html`
+          <div class="toolbar">
+            <div class="toolbar-group">
+              <button
+                class="toolbar-button"
+                @click=${this.previousPage}
+                ?disabled=${this.currentPage <= 1}
+              >
+                <dees-icon icon="lucide:ChevronLeft"></dees-icon>
+              </button>
+              <div class="page-info">
+                <input
+                  type="number"
+                  min="1"
+                  max="${this.totalPages}"
+                  .value=${String(this.currentPage)}
+                  @change=${this.handlePageInput}
+                  class="page-input"
+                />
+                <span class="page-separator">/</span>
+                <span class="page-total">${this.totalPages}</span>
+              </div>
+              <button
+                class="toolbar-button"
+                @click=${this.nextPage}
+                ?disabled=${this.currentPage >= this.totalPages}
+              >
+                <dees-icon icon="lucide:ChevronRight"></dees-icon>
+              </button>
+            </div>
+
+            <div class="toolbar-group">
+              <button
+                class="toolbar-button"
+                @click=${this.zoomOut}
+                ?disabled=${!this.canZoomOut}
+              >
+                <dees-icon icon="lucide:ZoomOut"></dees-icon>
+              </button>
+              <button
+                class="toolbar-button"
+                @click=${this.resetZoom}
+              >
+                <span class="zoom-level">${Math.round(this.currentZoom * 100)}%</span>
+              </button>
+              <button
+                class="toolbar-button"
+                @click=${this.zoomIn}
+                ?disabled=${!this.canZoomIn}
+              >
+                <dees-icon icon="lucide:ZoomIn"></dees-icon>
+              </button>
+            </div>
+
+            <div class="toolbar-group">
+              <button
+                class="toolbar-button"
+                @click=${this.fitToPage}
+                title="Fit to page"
+              >
+                <dees-icon icon="lucide:Maximize"></dees-icon>
+              </button>
+              <button
+                class="toolbar-button"
+                @click=${this.fitToWidth}
+                title="Fit to width"
+              >
+                <dees-icon icon="lucide:ArrowLeftRight"></dees-icon>
+              </button>
+            </div>
+
+            <div class="toolbar-group toolbar-group--end">
+              <button
+                class="toolbar-button"
+                @click=${this.downloadPdf}
+                title="Download"
+              >
+                <dees-icon icon="lucide:Download"></dees-icon>
+              </button>
+              <button
+                class="toolbar-button"
+                @click=${this.printPdf}
+                title="Print"
+              >
+                <dees-icon icon="lucide:Printer"></dees-icon>
+              </button>
+            </div>
+          </div>
+        ` : ''}
+
+        <div class="viewer-container">
+          ${this.showSidebar ? html`
+            <div class="sidebar">
+              <div class="sidebar-header">
+                <span>Pages</span>
+                <button
+                  class="sidebar-close"
+                  @click=${() => this.showSidebar = false}
+                >
+                  <dees-icon icon="lucide:X"></dees-icon>
+                </button>
+              </div>
+              <div class="sidebar-content">
+                ${keyed(this.documentId, html`
+                  ${repeat(
+                    this.thumbnailData,
+                    (item) => item.page,
+                    (item) => html`
+                      <div
+                        class="thumbnail ${this.currentPage === item.page ? 'active' : ''}"
+                        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>
+          ` : ''}
+
+          <div class="viewer-main">
+            ${this.loading ? html`
+              <div class="loading-container">
+                <div class="loading-spinner"></div>
+                <div class="loading-text">Loading PDF...</div>
+              </div>
+            ` : html`
+              <div class="canvas-container">
+                <canvas id="pdf-canvas"></canvas>
+              </div>
+            `}
+          </div>
+        </div>
+      </div>
+    `;
+  }
+
+  public async 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.ensureViewerRefs();
+
+      // 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) {
+        // 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';
+    } catch (error) {
+      console.error('Error loading PDF:', error);
+      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) {
+        console.error('Unable to acquire canvas rendering context');
+        this.pageRendering = false;
+        return;
+      }
+      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,
+      };
+
+      // 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) {
+        const nextPage = this.pageNumPending;
+        this.pageNumPending = null;
+        await this.renderPage(nextPage);
+      }
+    } catch (error) {
+      // Ignore cancellation errors
+      if (error?.name !== 'RenderingCancelledException') {
+        console.error('Error rendering page:', error);
+      }
+      this.currentRenderTask = null;
+      this.pageRendering = false;
+    }
+  }
+
+  private queueRenderPage(pageNum: number) {
+    if (this.pageRendering) {
+      this.pageNumPending = pageNum;
+    } else {
+      this.renderPage(pageNum);
+    }
+  }
+
+  private async renderThumbnails() {
+    // Check if document is loaded
+    if (!this.pdfDocument) {
+      return;
+    }
+
+    // Check if already rendered
+    if (this.thumbnailData.length > 0 && this.thumbnailData.every(t => t.rendered)) {
+      return;
+    }
+
+    // Check abort signal
+    if (this.renderAbortController?.signal.aborted) {
+      return;
+    }
+
+    const signal = this.renderAbortController?.signal;
+    this.renderState = 'rendering-thumbs';
+
+    // Cancel any existing thumbnail render tasks
+    for (const task of this.thumbnailRenderTasks) {
+      try {
+        task.cancel();
+      } catch (error) {
+        // Ignore cancellation errors
+      }
+    }
+    this.thumbnailRenderTasks = [];
+
+    try {
+      await this.updateComplete;
+      const thumbnails = this.shadowRoot?.querySelectorAll('.thumbnail-canvas') as NodeListOf<HTMLCanvasElement>;
+      const thumbnailWidth = 176; // Fixed width for thumbnails (200px container - 24px padding)
+
+      // 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 = [];
+    }
+  }
+
+  private previousPage() {
+    if (this.currentPage > 1) {
+      this.currentPage--;
+      this.queueRenderPage(this.currentPage);
+    }
+  }
+
+  private nextPage() {
+    if (this.currentPage < this.totalPages) {
+      this.currentPage++;
+      this.queueRenderPage(this.currentPage);
+    }
+  }
+
+  private async goToPage(pageNum: number) {
+    if (pageNum >= 1 && pageNum <= this.totalPages) {
+      this.currentPage = pageNum;
+
+      // 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);
+    this.goToPage(pageNum);
+  }
+
+  private zoomIn() {
+    const nextZoom = Math.min(this.MANUAL_MAX_ZOOM, this.currentZoom * 1.2);
+    this.viewportMode = 'custom';
+    if (nextZoom !== this.currentZoom) {
+      this.currentZoom = nextZoom;
+      this.queueRenderPage(this.currentPage);
+    }
+  }
+
+  private zoomOut() {
+    const nextZoom = Math.max(this.MANUAL_MIN_ZOOM, 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.viewportMode = 'page-fit';
+    this.queueRenderPage(this.currentPage);
+  }
+
+  private fitToWidth() {
+    this.viewportMode = 'page-width';
+    this.queueRenderPage(this.currentPage);
+  }
+
+  private downloadPdf() {
+    const link = document.createElement('a');
+    link.href = this.pdfUrl;
+    link.download = this.pdfUrl.split('/').pop() || 'document.pdf';
+    link.click();
+  }
+
+  private printPdf() {
+    window.open(this.pdfUrl, '_blank')?.print();
+  }
+
+  /**
+   * Provide context menu items for right-click functionality
+   */
+  public getContextMenuItems() {
+    return [
+      {
+        name: 'Open PDF in New Tab',
+        iconName: 'lucide:ExternalLink',
+        action: async () => {
+          window.open(this.pdfUrl, '_blank');
+        }
+      },
+      { divider: true },
+      {
+        name: 'Copy PDF URL',
+        iconName: 'lucide:Copy',
+        action: async () => {
+          await navigator.clipboard.writeText(this.pdfUrl);
+        }
+      },
+      {
+        name: 'Download PDF',
+        iconName: 'lucide:Download',
+        action: async () => {
+          this.downloadPdf();
+        }
+      },
+      {
+        name: 'Print PDF',
+        iconName: 'lucide:Printer',
+        action: async () => {
+          this.printPdf();
+        }
+      }
+    ];
+  }
+
+  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);
+      }
+    }
+
+    // Finally null the document reference
+    this.pdfDocument = null;
+
+    // Request update to reflect state changes
+    this.requestUpdate();
+  }
+}

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

@@ -0,0 +1,69 @@
+import { html } from '@design.estate/dees-element';
+
+export const demo = () => html`
+  <style>
+    .demo-container {
+      padding: 40px;
+      background: #f5f5f5;
+    }
+
+    .demo-section {
+      margin-bottom: 40px;
+    }
+
+    h3 {
+      margin-bottom: 20px;
+      font-size: 18px;
+      font-weight: 600;
+    }
+
+    dees-pdf-viewer {
+      border: 1px solid #ddd;
+      border-radius: 8px;
+      overflow: hidden;
+    }
+
+    .viewer-tall {
+      height: 800px;
+    }
+
+    .viewer-compact {
+      height: 500px;
+    }
+  </style>
+
+  <div class="demo-container">
+    <div class="demo-section">
+      <h3>Full Featured PDF Viewer with Toolbar</h3>
+      <dees-pdf-viewer
+        class="viewer-tall"
+        pdfUrl="https://raw.githubusercontent.com/mozilla/pdf.js/ba2edeae/web/compressed.tracemonkey-pldi-09.pdf"
+        showToolbar="true"
+        showSidebar="false"
+        initialZoom="page-fit"
+      ></dees-pdf-viewer>
+    </div>
+
+    <div class="demo-section">
+      <h3>PDF Viewer with Sidebar Navigation</h3>
+      <dees-pdf-viewer
+        class="viewer-tall"
+        pdfUrl="https://raw.githubusercontent.com/mozilla/pdf.js/ba2edeae/web/compressed.tracemonkey-pldi-09.pdf"
+        showToolbar="true"
+        showSidebar="true"
+        initialZoom="page-width"
+      ></dees-pdf-viewer>
+    </div>
+
+    <div class="demo-section">
+      <h3>Compact Viewer without Controls</h3>
+      <dees-pdf-viewer
+        class="viewer-compact"
+        pdfUrl="https://raw.githubusercontent.com/mozilla/pdf.js/ba2edeae/examples/learning/helloworld.pdf"
+        showToolbar="false"
+        showSidebar="false"
+        initialZoom="auto"
+      ></dees-pdf-viewer>
+    </div>
+  </div>
+`;

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

@@ -0,0 +1 @@
+export * from './component.js';

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

@@ -0,0 +1,262 @@
+import { css, cssManager } from '@design.estate/dees-element';
+
+export const viewerStyles = [
+  cssManager.defaultStyles,
+  css`
+    :host {
+      display: block;
+      width: 100%;
+      height: 600px;
+      position: relative;
+      font-family: 'Geist Sans', sans-serif;
+    }
+
+    .pdf-viewer {
+      width: 100%;
+      height: 100%;
+      display: flex;
+      flex-direction: column;
+      background: ${cssManager.bdTheme('hsl(0 0% 97%)', 'hsl(215 20% 10%)')};
+    }
+
+    .toolbar {
+      height: 48px;
+      background: ${cssManager.bdTheme('hsl(0 0% 100%)', 'hsl(215 20% 15%)')};
+      border-bottom: 1px solid ${cssManager.bdTheme('hsl(214 31% 91%)', 'hsl(217 25% 22%)')};
+      display: flex;
+      align-items: center;
+      padding: 0 16px;
+      gap: 16px;
+      flex-shrink: 0;
+    }
+
+    .toolbar-group {
+      display: flex;
+      align-items: center;
+      gap: 4px;
+    }
+
+    .toolbar-group--end {
+      margin-left: auto;
+    }
+
+    .toolbar-button {
+      width: 32px;
+      height: 32px;
+      border-radius: 6px;
+      background: transparent;
+      border: none;
+      cursor: pointer;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      transition: background 0.15s ease;
+      color: ${cssManager.bdTheme('hsl(215 16% 45%)', 'hsl(215 16% 75%)')};
+    }
+
+    .toolbar-button:hover:not(:disabled) {
+      background: ${cssManager.bdTheme('hsl(214 31% 92%)', 'hsl(217 25% 22%)')};
+    }
+
+    .toolbar-button:disabled {
+      opacity: 0.4;
+      cursor: not-allowed;
+    }
+
+    .toolbar-button dees-icon {
+      font-size: 16px;
+    }
+
+    .page-info {
+      display: flex;
+      align-items: center;
+      gap: 8px;
+      padding: 0 8px;
+      font-size: 14px;
+      color: ${cssManager.bdTheme('hsl(215 16% 45%)', 'hsl(215 16% 75%)')};
+    }
+
+    .page-input {
+      width: 48px;
+      height: 28px;
+      border-radius: 4px;
+      border: 1px solid ${cssManager.bdTheme('hsl(214 31% 86%)', 'hsl(217 25% 28%)')};
+      background: ${cssManager.bdTheme('hsl(0 0% 100%)', 'hsl(215 20% 12%)')};
+      color: ${cssManager.bdTheme('hsl(222 47% 11%)', 'hsl(210 20% 96%)')};
+      text-align: center;
+      font-size: 14px;
+      font-family: inherit;
+      outline: none;
+    }
+
+    .page-input:focus {
+      border-color: ${cssManager.bdTheme('hsl(217 91% 60%)', 'hsl(213 93% 68%)')};
+    }
+
+    .page-separator {
+      color: ${cssManager.bdTheme('hsl(215 16% 60%)', 'hsl(215 16% 50%)')};
+    }
+
+    .zoom-level {
+      font-size: 13px;
+      font-weight: 500;
+      min-width: 48px;
+      text-align: center;
+    }
+
+    .viewer-container {
+      flex: 1;
+      display: flex;
+      overflow: hidden;
+      position: relative;
+    }
+
+    .sidebar {
+      width: 200px;
+      background: ${cssManager.bdTheme('hsl(0 0% 100%)', 'hsl(215 20% 15%)')};
+      border-right: 1px solid ${cssManager.bdTheme('hsl(214 31% 91%)', 'hsl(217 25% 22%)')};
+      display: flex;
+      flex-direction: column;
+    }
+
+    .sidebar-header {
+      height: 40px;
+      padding: 0 12px;
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      border-bottom: 1px solid ${cssManager.bdTheme('hsl(214 31% 91%)', 'hsl(217 25% 22%)')};
+      font-size: 13px;
+      font-weight: 600;
+      color: ${cssManager.bdTheme('hsl(215 16% 45%)', 'hsl(215 16% 75%)')};
+    }
+
+    .sidebar-close {
+      width: 24px;
+      height: 24px;
+      border-radius: 4px;
+      background: transparent;
+      border: none;
+      cursor: pointer;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      color: ${cssManager.bdTheme('hsl(215 16% 45%)', 'hsl(215 16% 75%)')};
+      transition: background 0.15s ease;
+    }
+
+    .sidebar-close:hover {
+      background: ${cssManager.bdTheme('hsl(214 31% 92%)', 'hsl(217 25% 22%)')};
+    }
+
+    .sidebar-close dees-icon {
+      font-size: 14px;
+    }
+
+    .sidebar-content {
+      flex: 1;
+      overflow-y: auto;
+      padding: 12px;
+      display: flex;
+      flex-direction: column;
+      gap: 12px;
+    }
+
+    .thumbnail {
+      position: relative;
+      border-radius: 8px;
+      overflow: hidden;
+      cursor: pointer;
+      border: 2px solid transparent;
+      transition: border-color 0.15s ease;
+      background: ${cssManager.bdTheme('hsl(0 0% 100%)', 'hsl(215 20% 18%)')};
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      min-height: 100px;
+    }
+
+    .thumbnail:hover {
+      border-color: ${cssManager.bdTheme('hsl(214 31% 86%)', 'hsl(217 25% 35%)')};
+    }
+
+    .thumbnail.active {
+      border-color: ${cssManager.bdTheme('hsl(217 91% 60%)', 'hsl(213 93% 68%)')};
+    }
+
+    .thumbnail-canvas {
+      display: block;
+      max-width: 100%;
+      height: auto;
+      image-rendering: -webkit-optimize-contrast;
+      image-rendering: crisp-edges;
+    }
+
+    .thumbnail-number {
+      position: absolute;
+      bottom: 4px;
+      right: 4px;
+      background: ${cssManager.bdTheme('rgba(0, 0, 0, 0.7)', 'rgba(0, 0, 0, 0.8)')};
+      color: white;
+      font-size: 11px;
+      font-weight: 500;
+      padding: 2px 6px;
+      border-radius: 4px;
+    }
+
+    .viewer-main {
+      flex: 1;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      overflow: auto;
+      padding: 20px;
+    }
+
+    .loading-container {
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      gap: 16px;
+      color: ${cssManager.bdTheme('hsl(215 16% 45%)', 'hsl(215 16% 75%)')};
+    }
+
+    .loading-spinner {
+      width: 32px;
+      height: 32px;
+      border-radius: 50%;
+      border: 3px solid ${cssManager.bdTheme('hsl(214 31% 86%)', 'hsl(217 25% 28%)')};
+      border-top-color: ${cssManager.bdTheme('hsl(217 91% 60%)', 'hsl(213 93% 68%)')};
+      animation: spin 0.8s linear infinite;
+    }
+
+    @keyframes spin {
+      to {
+        transform: rotate(360deg);
+      }
+    }
+
+    .loading-text {
+      font-size: 14px;
+      font-weight: 500;
+    }
+
+    .canvas-container {
+      background: white;
+      box-shadow: 0 2px 12px ${cssManager.bdTheme('rgba(0, 0, 0, 0.1)', 'rgba(0, 0, 0, 0.3)')};
+      border-radius: 4px;
+      overflow: hidden;
+      display: inline-block;
+    }
+
+    #pdf-canvas {
+      display: block;
+      image-rendering: -webkit-optimize-contrast;
+      image-rendering: crisp-edges;
+    }
+
+    .pdf-viewer.with-sidebar .viewer-main {
+      margin-left: 0;
+    }
+  `,
+];

ts_web/elements/dees-pdf/component.ts

@@ -1,6 +1,8 @@
 import { DeesElement, property, html, customElement, domtools, type TemplateResult, type CSSResult, } from '@design.estate/dees-element';
 
 import { Deferred } from '@push.rocks/smartpromise';
+import { DeesContextmenu } from '../dees-contextmenu.js';
+import '../dees-icon.js';
 
 // import type pdfjsTypes from 'pdfjs-dist';
 
@@ -10,6 +12,11 @@ declare global {
   }
 }
 
+/**
+ * @deprecated Use DeesPdfViewer or DeesPdfPreview instead
+ * - DeesPdfViewer: Full-featured PDF viewing with controls, navigation, zoom
+ * - DeesPdfPreview: Lightweight, performance-optimized preview for grids
+ */
 @customElement('dees-pdf')
 export class DeesPdf extends DeesElement {
   // DEMO
@@ -21,6 +28,8 @@ export class DeesPdf extends DeesElement {
   public pdfUrl: string =
     'https://raw.githubusercontent.com/mozilla/pdf.js/ba2edeae/examples/learning/helloworld.pdf';
 
+
+
   constructor() {
     super();
 
@@ -44,9 +53,15 @@ export class DeesPdf extends DeesElement {
         #pdfcanvas {
           box-shadow: 0px 0px 5px #ccc;
           width: 100%;
+          cursor: pointer;
         }
       </style>
-      <canvas id="pdfcanvas" .height=${0} .width=${0}></canvas>
+      <canvas
+        id="pdfcanvas"
+        .height=${0}
+        .width=${0}
+
+      ></canvas>
     `;
   }
 
@@ -64,6 +79,8 @@ export class DeesPdf extends DeesElement {
     }
     await DeesPdf.pdfJsReady;
     this.displayContent();
+
+
   }
 
   public async displayContent() {
@@ -107,4 +124,37 @@ export class DeesPdf extends DeesElement {
       }
     );
   }
-}
+
+  /**
+   * Provide context menu items for the global context menu handler
+   */
+  public getContextMenuItems() {
+    return [
+      {
+        name: 'Open PDF in New Tab',
+        iconName: 'lucide:ExternalLink',
+        action: async () => {
+          window.open(this.pdfUrl, '_blank');
+        }
+      },
+      { divider: true },
+      {
+        name: 'Copy PDF URL',
+        iconName: 'lucide:Copy',
+        action: async () => {
+          await navigator.clipboard.writeText(this.pdfUrl);
+        }
+      },
+      {
+        name: 'Download PDF',
+        iconName: 'lucide:Download',
+        action: async () => {
+          const link = document.createElement('a');
+          link.href = this.pdfUrl;
+          link.download = this.pdfUrl.split('/').pop() || 'document.pdf';
+          link.click();
+        }
+      }
+    ];
+  }
+}

ts_web/elements/dees-pdf/index.ts

@@ -0,0 +1 @@
+export * from './component.js';

ts_web/elements/index.ts

@@ -48,7 +48,9 @@ export * from './dees-mobilenavigation.js';
 export * from './dees-modal.js';
 export * from './dees-input-multitoggle.js';
 export * from './dees-panel.js';
-export * from './dees-pdf.js';
+export * from './dees-pdf/index.js'; // @deprecated - Use dees-pdf-viewer or dees-pdf-preview instead
+export * from './dees-pdf-viewer/index.js';
+export * from './dees-pdf-preview/index.js';
 export * from './dees-searchbar.js';
 export * from './dees-shopping-productcard.js';
 export * from './dees-simple-appdash.js';