v2.1.1

changelog.md

@@ -1,5 +1,23 @@
 # Changelog
 
+## 2025-12-11 - 2.1.1 - fix(viewer)
+Improve sidebar resizing UX and update deps
+
+- Add smooth width transition for the thumbnail sidebar to improve resize visuals
+- Disable viewport CSS transitions while user is actively resizing the sidebar to avoid janky animations
+- Mark viewport as resizing in classes so layout updates skip transitions during drag
+- Make sidebar resize mousemove listener passive to improve scrolling/interaction performance
+- Bump @design.estate/dees-wcctools to ^2.0.0 and @git.zone/tswatch to ^2.3.11
+
+## 2025-12-11 - 2.1.0 - feat(viewer)
+Add smooth zoom and scroll animations to viewer
+
+- Introduce smooth zoom animation: new private animateZoomTo(targetZoom, duration) method and zoomAnimationId to track/cancel running animations
+- Animate transitions for numeric zoom presets and zoom step changes (handleZoomStep now uses animateZoomTo)
+- Cancel ongoing zoom animation when user manipulates the zoom slider
+- Make fit-to-width and fit-to-page calculations optionally animate (calculateFitWidth/ calculateFitPage accept animate flag)
+- Add animated scrolling helper animateScrollTo for smooth page scrolling when requested (used when smooth=true)
+
 ## 2025-12-11 - 2.0.6 - fix(DeDocumentViewer)
 Account for toolbar and padding when calculating Fit Page zoom in viewer
 

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@design.estate/dees-document",
-  "version": "2.0.6",
+  "version": "2.1.1",
   "private": false,
   "description": "A sophisticated framework for dynamically generating and rendering business documents like invoices with modern web technologies, featuring PDF creation, templating, and automation.",
   "main": "dist_ts_web/index.js",
@@ -24,7 +24,7 @@
     "@design.estate/dees-catalog": "^3.3.0",
     "@design.estate/dees-domtools": "^2.3.6",
     "@design.estate/dees-element": "^2.1.3",
-    "@design.estate/dees-wcctools": "^1.3.0",
+    "@design.estate/dees-wcctools": "^2.0.0",
     "@git.zone/tsrun": "^2.0.0",
     "@push.rocks/smartfile": "^13.1.0",
     "@push.rocks/smartfs": "^1.2.0",
@@ -42,7 +42,7 @@
     "@git.zone/tsbuild": "^3.1.2",
     "@git.zone/tsbundle": "^2.6.3",
     "@git.zone/tstest": "^3.1.3",
-    "@git.zone/tswatch": "^2.3.10",
+    "@git.zone/tswatch": "^2.3.11",
     "@push.rocks/projectinfo": "^5.0.2"
   },
   "files": [

pnpm-lock.yaml

@@ -18,8 +18,8 @@ importers:
         specifier: ^2.1.3
         version: 2.1.3
       '@design.estate/dees-wcctools':
-        specifier: ^1.3.0
+        specifier: ^2.0.0
-        version: 1.3.0
+        version: 2.0.0
       '@git.zone/tsrun':
         specifier: ^2.0.0
         version: 2.0.0
@@ -67,8 +67,8 @@ importers:
         specifier: ^3.1.3
         version: 3.1.3(@push.rocks/smartserve@1.4.0)(socks@2.8.7)(typescript@5.9.3)
       '@git.zone/tswatch':
-        specifier: ^2.3.10
+        specifier: ^2.3.11
-        version: 2.3.10(@tiptap/pm@2.27.1)
+        version: 2.3.11(@tiptap/pm@2.27.1)
       '@push.rocks/projectinfo':
         specifier: ^5.0.2
         version: 5.0.2
@@ -304,6 +304,9 @@ packages:
   '@design.estate/dees-wcctools@1.3.0':
     resolution: {integrity: sha512-+yd8c1gTIKNRQYCvG0xu6Am8dHsRm7ymluX2gnoBQN4aFOpZgIBi/v9CvGyPhTD1p/VRouIBz1wsUCejnwrFCA==}
 
+  '@design.estate/dees-wcctools@2.0.0':
+    resolution: {integrity: sha512-+JXzU/FzOs48NcynbozX0lPfvszhp0mODdZU2ECCTkwOQi+0smhYAlFTUNZ8JcWSLDq3g5HqRMv7XoJELMk4Zw==}
+
   '@emnapi/core@1.7.1':
     resolution: {integrity: sha512-o1uhUASyo921r2XtHYOHy7gdkGLge8ghBEQHMWmyJFoXlpU58kIrhhN3w26lpQb6dspetweapMn2CSNwQ8I4wg==}
 
@@ -509,8 +512,8 @@ packages:
     resolution: {integrity: sha512-t+/cKV21JHK8X7NGAmihs5M/eMm+V+jn4R5rzfwGG97WJFAcP5qE1Os9VYtyZw3tx/NZXA2yA4abo/ELluTuRA==}
     hasBin: true
 
-  '@git.zone/tswatch@2.3.10':
+  '@git.zone/tswatch@2.3.11':
-    resolution: {integrity: sha512-88bdzD15mYoG0T0AUTg8ATNkV/dN5ecqfiYcQRX1gJHmLrE2yqymFGkb0W0/xWgpcRakc08V+wRbSI7pqg+EOQ==}
+    resolution: {integrity: sha512-FJWOsPQ9i0INn1i7uqMD0ECrZ6bwwGQC8oFDEx9PLcaS+qHpGsYj3P9UscpW1N78P+6Yd1WFUfBh9sUQiKm+KA==}
     hasBin: true
 
   '@happy-dom/global-registrator@15.11.7':
@@ -5002,6 +5005,18 @@ snapshots:
       - supports-color
       - vue
 
+  '@design.estate/dees-wcctools@2.0.0':
+    dependencies:
+      '@design.estate/dees-domtools': 2.3.6
+      '@design.estate/dees-element': 2.1.3
+      '@push.rocks/smartdelay': 3.0.5
+      lit: 3.3.1
+    transitivePeerDependencies:
+      - '@nuxt/kit'
+      - react
+      - supports-color
+      - vue
+
   '@emnapi/core@1.7.1':
     dependencies:
       '@emnapi/wasi-threads': 1.1.0
@@ -5230,7 +5245,7 @@ snapshots:
       - utf-8-validate
       - vue
 
-  '@git.zone/tswatch@2.3.10(@tiptap/pm@2.27.1)':
+  '@git.zone/tswatch@2.3.11(@tiptap/pm@2.27.1)':
     dependencies:
       '@api.global/typedserver': 7.11.1(@tiptap/pm@2.27.1)
       '@git.zone/tsbundle': 2.6.3

ts/00_commitinfo_data.ts

@@ -3,6 +3,6 @@
  */
 export const commitinfo = {
   name: '@design.estate/dees-document',
-  version: '2.0.6',
+  version: '2.1.1',
   description: 'A sophisticated framework for dynamically generating and rendering business documents like invoices with modern web technologies, featuring PDF creation, templating, and automation.'
 }

ts_web/00_commitinfo_data.ts

@@ -3,6 +3,6 @@
  */
 export const commitinfo = {
   name: '@design.estate/dees-document',
-  version: '2.0.6',
+  version: '2.1.1',
   description: 'A sophisticated framework for dynamically generating and rendering business documents like invoices with modern web technologies, featuring PDF creation, templating, and automation.'
 }

ts_web/elements/viewer.ts

@@ -12,6 +12,7 @@ import {
 } from "@design.estate/dees-element";
 import { demoFunc } from "./viewer.demo.js";
 import { DeDocument } from "./document.js";
+import "./page.js"; // Import DePage for thumbnail rendering
 
 import "@design.estate/dees-catalog";
 
@@ -88,6 +89,25 @@ export class DeDocumentViewer extends DeesElement {
   @state()
   accessor displayZoom: number = 100;
 
+  @state()
+  accessor currentPageDisplay: string = "1 / 1";
+
+  // Sidebar state
+  @state()
+  accessor showThumbnails: boolean = true;
+
+  @state()
+  accessor sidebarWidth: number = 140;
+
+  @state()
+  accessor isResizingSidebar: boolean = false;
+
+  @state()
+  accessor thumbnailPages: number[] = [];
+
+  // Zoom animation
+  private zoomAnimationId: number | null = null;
+
   public static styles = [
     cssManager.defaultStyles,
     css`
@@ -104,6 +124,125 @@ export class DeDocumentViewer extends DeesElement {
         --dropdown-shadow: ${cssManager.bdTheme("0 4px 16px rgba(0,0,0,0.15)", "0 4px 16px rgba(0,0,0,0.4)")};
         --slider-track: ${cssManager.bdTheme("#ddd", "#444")};
         --slider-fill: ${cssManager.bdTheme("#0066cc", "#4d9fff")};
+        --sidebar-min-width: 100px;
+        --sidebar-max-width: 300px;
+      }
+
+      /* Sidebar Styles */
+      .sidebar {
+        position: absolute;
+        left: 0;
+        top: var(--toolbar-height);
+        bottom: 0;
+        background: var(--toolbar-bg);
+        backdrop-filter: blur(12px);
+        -webkit-backdrop-filter: blur(12px);
+        border-right: 1px solid var(--toolbar-border);
+        display: flex;
+        flex-direction: column;
+        z-index: 50;
+        box-sizing: border-box;
+        transition: width 0.2s ease;
+      }
+
+      .sidebar--collapsed {
+        width: 0 !important;
+        overflow: hidden;
+        border-right: none;
+      }
+
+      .sidebar--resizing {
+        transition: none !important;
+        user-select: none;
+      }
+
+      .sidebar__header {
+        padding: 10px 12px;
+        font-size: 11px;
+        font-weight: 600;
+        color: var(--text-secondary);
+        border-bottom: 1px solid var(--toolbar-border);
+        text-transform: uppercase;
+        letter-spacing: 0.5px;
+        flex-shrink: 0;
+      }
+
+      .sidebar__thumbnails {
+        flex: 1;
+        overflow-y: auto;
+        overflow-x: hidden;
+        padding: 8px;
+        display: flex;
+        flex-direction: column;
+        gap: 12px;
+      }
+
+      .thumbnail {
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        gap: 4px;
+        cursor: pointer;
+        padding: 4px;
+        border-radius: 6px;
+        transition: background 0.15s ease;
+        flex-shrink: 0;
+      }
+
+      .thumbnail:hover {
+        background: var(--button-hover);
+      }
+
+      .thumbnail--active {
+        background: var(--button-active);
+      }
+
+      .thumbnail--active .thumbnail__preview {
+        outline: 2px solid var(--accent-color);
+        outline-offset: 2px;
+      }
+
+      .thumbnail__preview {
+        width: 100%;
+        aspect-ratio: 210 / 297;
+        background: ${cssManager.bdTheme("#fff", "#2a2a2a")};
+        box-shadow: ${cssManager.bdTheme("0 1px 4px rgba(0,0,0,0.15)", "0 1px 4px rgba(0,0,0,0.4)")};
+        border-radius: 2px;
+        overflow: hidden;
+        position: relative;
+      }
+
+      .thumbnail__label {
+        font-size: 11px;
+        color: var(--text-secondary);
+        font-weight: 500;
+      }
+
+      .sidebar__resize-handle {
+        position: absolute;
+        top: 0;
+        right: -4px;
+        bottom: 0;
+        width: 8px;
+        cursor: ew-resize;
+        background: transparent;
+        z-index: 60;
+      }
+
+      .sidebar__resize-handle::after {
+        content: '';
+        position: absolute;
+        top: 0;
+        left: 3px;
+        bottom: 0;
+        width: 2px;
+        background: transparent;
+        transition: background 0.15s ease;
+      }
+
+      .sidebar__resize-handle:hover::after,
+      .sidebar--resizing .sidebar__resize-handle::after {
+        background: var(--accent-color);
       }
 
       .maincontainer {
@@ -194,7 +333,7 @@ export class DeDocumentViewer extends DeesElement {
         color: var(--text-primary);
         font-size: 13px;
         font-weight: 500;
-        min-width: 80px;
+        width: 90px; /* Fixed width to prevent reflow - fits "Fit Width" */
         justify-content: space-between;
         transition: all 0.15s ease;
       }
@@ -322,6 +461,25 @@ export class DeDocumentViewer extends DeesElement {
         gap: 2px;
       }
 
+      .fit-buttons {
+        display: flex;
+        align-items: center;
+        gap: 2px;
+      }
+
+      .page-nav {
+        display: flex;
+        align-items: center;
+        gap: 2px;
+      }
+
+      .page-indicator {
+        font-size: 12px;
+        color: var(--text-secondary);
+        min-width: 45px;
+        text-align: center;
+      }
+
       .spacing-slider-container {
         display: flex;
         align-items: center;
@@ -391,6 +549,15 @@ export class DeDocumentViewer extends DeesElement {
         overflow-y: scroll;
         overflow-x: auto;
         overscroll-behavior: contain;
+        transition: left 0.2s ease;
+      }
+
+      .viewport--resizing {
+        transition: none !important;
+      }
+
+      .viewport--with-sidebar {
+        left: var(--current-sidebar-width, 140px);
       }
 
       .viewport--centered {
@@ -407,12 +574,25 @@ export class DeDocumentViewer extends DeesElement {
       .spacing-slider-container {
         display: none;
       }
+      /* Collapse sidebar by default on tablet */
+      .sidebar {
+        width: 0 !important;
+      }
+      .sidebar--collapsed {
+        width: 0 !important;
+      }
+      .viewport--with-sidebar {
+        left: 0 !important;
+      }
     `),
     // Phone styles
     cssManager.cssForPhone(css`
       .zoom-slider-container {
         display: none;
       }
+      .fit-buttons {
+        display: none;
+      }
       .spacing-label {
         display: none;
       }
@@ -428,13 +608,31 @@ export class DeDocumentViewer extends DeesElement {
       .controls__section {
         gap: 2px;
       }
+      /* Hide sidebar and toggle on phone */
+      .sidebar {
+        display: none !important;
+      }
+      .sidebar-toggle {
+        display: none !important;
+      }
+      .viewport--with-sidebar {
+        left: 0 !important;
+      }
     `),
   ];
 
   public render(): TemplateResult {
+    const viewportClasses = [
+      "viewport",
+      this.zoomMode !== "auto" ? "viewport--centered" : "",
+      this.showThumbnails ? "viewport--with-sidebar" : "",
+      this.isResizingSidebar ? "viewport--resizing" : "",
+    ].filter(Boolean).join(" ");
+
     return html`
-      <div class="maincontainer">
+      <div class="maincontainer" style="--current-sidebar-width: ${this.sidebarWidth}px;">
-        <div class="viewport ${this.zoomMode !== "auto" ? "viewport--centered" : ""}">
+        ${this.renderSidebar()}
+        <div class="${viewportClasses}">
           ${this.letterData
             ? html`
                 <dedocument-dedocument
@@ -455,9 +653,77 @@ export class DeDocumentViewer extends DeesElement {
     `;
   }
 
+  private renderSidebar(): TemplateResult {
+    const sidebarClasses = [
+      "sidebar",
+      !this.showThumbnails ? "sidebar--collapsed" : "",
+      this.isResizingSidebar ? "sidebar--resizing" : "",
+    ].filter(Boolean).join(" ");
+
+    const thumbnailScale = this.getThumbnailScale();
+    const currentPage = this.getCurrentPage();
+
+    return html`
+      <div class="${sidebarClasses}" style="width: ${this.sidebarWidth}px;">
+        <div class="sidebar__header">Pages</div>
+        <div class="sidebar__thumbnails">
+          ${this.thumbnailPages.map(
+            (_, i) => html`
+              <div
+                class="thumbnail ${currentPage === i + 1 ? "thumbnail--active" : ""}"
+                @click=${() => this.scrollToPage(i + 1)}
+              >
+                <div
+                  class="thumbnail__preview"
+                  style="--thumbnail-scale: ${thumbnailScale};"
+                >
+                  <div style="
+                    width: ${plugins.shared.A4_WIDTH}px;
+                    height: ${plugins.shared.A4_HEIGHT}px;
+                    transform: scale(${thumbnailScale});
+                    transform-origin: top left;
+                    pointer-events: none;
+                  ">
+                    <dedocument-page
+                      .letterData=${this.letterData}
+                      .documentSettings=${this.documentSettings}
+                      .pageNumber=${i + 1}
+                      .pageTotalNumber=${this.thumbnailPages.length}
+                    ></dedocument-page>
+                  </div>
+                </div>
+                <span class="thumbnail__label">${i + 1}</span>
+              </div>
+            `
+          )}
+        </div>
+        <div
+          class="sidebar__resize-handle"
+          @mousedown=${this.startSidebarResize}
+        ></div>
+      </div>
+    `;
+  }
+
+  private getThumbnailScale(): number {
+    const previewWidth = this.sidebarWidth - 24; // Account for padding
+    return previewWidth / plugins.shared.A4_WIDTH;
+  }
+
   private renderZoomControls(): TemplateResult {
     return html`
       <div class="controls__section">
+        <!-- Sidebar Toggle Button -->
+        <button
+          class="controls__button sidebar-toggle ${this.showThumbnails ? "controls__button--active" : ""}"
+          @click=${() => this.toggleThumbnails()}
+          title="Toggle Thumbnails"
+        >
+          <dees-icon icon="lucide:panelLeft"></dees-icon>
+        </button>
+
+        <div class="controls__divider sidebar-toggle"></div>
+
         <!-- Zoom Out Button -->
         <button
           class="controls__button"
@@ -501,6 +767,29 @@ export class DeDocumentViewer extends DeesElement {
 
         <div class="controls__divider"></div>
 
+        <!-- Fit Buttons -->
+        <div class="fit-buttons">
+          <!-- Fit Width Button -->
+          <button
+            class="controls__button ${this.zoomMode === "fit-width" ? "controls__button--active" : ""}"
+            @click=${() => this.handleZoomPreset("fit-width")}
+            title="Fit Width"
+          >
+            <dees-icon icon="lucide:arrowLeftRight"></dees-icon>
+          </button>
+
+          <!-- Fit Page Button -->
+          <button
+            class="controls__button ${this.zoomMode === "fit-page" ? "controls__button--active" : ""}"
+            @click=${() => this.handleZoomPreset("fit-page")}
+            title="Fit Page"
+          >
+            <dees-icon icon="lucide:expand"></dees-icon>
+          </button>
+        </div>
+
+        <div class="controls__divider"></div>
+
         <!-- Zoom Slider -->
         <div class="zoom-slider-container">
           <input
@@ -553,6 +842,27 @@ export class DeDocumentViewer extends DeesElement {
 
         <div class="controls__divider"></div>
 
+        <!-- Page Navigation -->
+        <div class="page-nav">
+          <button
+            class="controls__button"
+            @click=${() => this.handlePreviousPage()}
+            title="Previous Page"
+          >
+            <dees-icon icon="lucide:chevronUp"></dees-icon>
+          </button>
+          <span class="page-indicator">${this.currentPageDisplay}</span>
+          <button
+            class="controls__button"
+            @click=${() => this.handleNextPage()}
+            title="Next Page"
+          >
+            <dees-icon icon="lucide:chevronDown"></dees-icon>
+          </button>
+        </div>
+
+        <div class="controls__divider"></div>
+
         <!-- Print Button -->
         <button
           class="controls__button"
@@ -604,31 +914,69 @@ export class DeDocumentViewer extends DeesElement {
       this.updateDisplayZoom();
     } else if (value === "fit-width") {
       // Calculate zoom to fit page width to viewport width
-      this.calculateFitWidth();
+      this.calculateFitWidth(true);
     } else if (value === "fit-page") {
       // Calculate zoom to fit entire page in viewport
-      this.calculateFitPage();
+      this.calculateFitPage(true);
     } else {
-      this.zoomLevel = value;
+      // Animate to numeric preset
-      this.displayZoom = value;
+      this.animateZoomTo(value);
     }
   }
 
   private handleZoomStep(delta: number): void {
     const current = this.zoomLevel ?? this.displayZoom;
     const newZoom = Math.min(400, Math.max(25, current + delta));
-    this.zoomLevel = newZoom;
+    this.animateZoomTo(newZoom);
-    this.displayZoom = newZoom;
     this.zoomMode = newZoom;
   }
 
   private handleZoomSlider(e: Event): void {
+    // Cancel any running animation when user takes manual control
+    if (this.zoomAnimationId !== null) {
+      cancelAnimationFrame(this.zoomAnimationId);
+      this.zoomAnimationId = null;
+    }
     const value = parseInt((e.target as HTMLInputElement).value, 10);
     this.zoomLevel = value;
     this.displayZoom = value;
     this.zoomMode = value;
   }
 
+  /**
+   * Animate zoom level to target value
+   * @param targetZoom - Target zoom percentage
+   * @param duration - Animation duration in ms (default: 200)
+   */
+  private animateZoomTo(targetZoom: number, duration: number = 200): void {
+    // Cancel any existing animation
+    if (this.zoomAnimationId !== null) {
+      cancelAnimationFrame(this.zoomAnimationId);
+    }
+
+    const startZoom = this.zoomLevel ?? this.displayZoom;
+    const startTime = performance.now();
+    const easeOutCubic = (t: number) => 1 - Math.pow(1 - t, 3);
+
+    const animate = (currentTime: number) => {
+      const elapsed = currentTime - startTime;
+      const progress = Math.min(elapsed / duration, 1);
+      const easedProgress = easeOutCubic(progress);
+
+      const currentZoom = startZoom + (targetZoom - startZoom) * easedProgress;
+      this.zoomLevel = Math.round(currentZoom);
+      this.displayZoom = this.zoomLevel;
+
+      if (progress < 1) {
+        this.zoomAnimationId = requestAnimationFrame(animate);
+      } else {
+        this.zoomAnimationId = null;
+      }
+    };
+
+    this.zoomAnimationId = requestAnimationFrame(animate);
+  }
+
   private handleSpacingPreset(value: number): void {
     this.pageGap = value;
   }
@@ -637,6 +985,65 @@ export class DeDocumentViewer extends DeesElement {
     this.pageGap = parseInt((e.target as HTMLInputElement).value, 10);
   }
 
+  // ============================================
+  // SIDEBAR METHODS
+  // ============================================
+
+  private startSidebarResize(e: MouseEvent): void {
+    e.preventDefault();
+    this.isResizingSidebar = true;
+
+    const startX = e.clientX;
+    const startWidth = this.sidebarWidth;
+
+    const onMouseMove = (moveEvent: MouseEvent) => {
+      const delta = moveEvent.clientX - startX;
+      const newWidth = Math.min(300, Math.max(100, startWidth + delta));
+      this.sidebarWidth = newWidth;
+    };
+
+    const onMouseUp = () => {
+      this.isResizingSidebar = false;
+      document.removeEventListener("mousemove", onMouseMove);
+      document.removeEventListener("mouseup", onMouseUp);
+      document.body.style.cursor = "";
+      document.body.style.userSelect = "";
+    };
+
+    document.addEventListener("mousemove", onMouseMove, { passive: true });
+    document.addEventListener("mouseup", onMouseUp);
+    document.body.style.cursor = "ew-resize";
+    document.body.style.userSelect = "none";
+  }
+
+  private updateThumbnailPages(): void {
+    const pageCount = this.getPageCount();
+    if (pageCount !== this.thumbnailPages.length) {
+      this.thumbnailPages = Array.from({ length: pageCount }, (_, i) => i);
+    }
+  }
+
+  private handlePreviousPage(): void {
+    const current = this.getCurrentPage();
+    if (current > 1) {
+      this.scrollToPage(current - 1);
+    }
+  }
+
+  private handleNextPage(): void {
+    const current = this.getCurrentPage();
+    const total = this.getPageCount();
+    if (current < total) {
+      this.scrollToPage(current + 1);
+    }
+  }
+
+  private updatePageIndicator(): void {
+    const current = this.getCurrentPage();
+    const total = this.getPageCount();
+    this.currentPageDisplay = `${current} / ${total || 1}`;
+  }
+
   private async handlePrint(): Promise<void> {
     // Create a print-specific container - hidden on screen, visible only in print
     const printContainer = document.createElement("div");
@@ -723,19 +1130,24 @@ export class DeDocumentViewer extends DeesElement {
     setTimeout(cleanup, 100);
   }
 
-  private calculateFitWidth(): void {
+  private calculateFitWidth(animate: boolean = false): void {
     const viewport = this.shadowRoot?.querySelector(".viewport");
     if (!viewport) return;
 
     // Account for padding and scrollbar width
     const viewportWidth = viewport.clientWidth - 32 - 16;
     const scale = viewportWidth / plugins.shared.A4_WIDTH;
+    const targetZoom = Math.round(scale * 100);
 
-    this.zoomLevel = Math.round(scale * 100);
+    if (animate) {
-    this.displayZoom = this.zoomLevel;
+      this.animateZoomTo(targetZoom);
+    } else {
+      this.zoomLevel = targetZoom;
+      this.displayZoom = targetZoom;
+    }
   }
 
-  private calculateFitPage(): void {
+  private calculateFitPage(animate: boolean = false): void {
     const viewport = this.shadowRoot?.querySelector(".viewport");
     if (!viewport) return;
 
@@ -750,9 +1162,14 @@ export class DeDocumentViewer extends DeesElement {
     const scaleByHeight = viewportHeight / plugins.shared.A4_HEIGHT;
     const scaleByWidth = viewportWidth / plugins.shared.A4_WIDTH;
     const scale = Math.min(scaleByHeight, scaleByWidth);
+    const targetZoom = Math.round(scale * 100);
 
-    this.zoomLevel = Math.round(scale * 100);
+    if (animate) {
-    this.displayZoom = this.zoomLevel;
+      this.animateZoomTo(targetZoom);
+    } else {
+      this.zoomLevel = targetZoom;
+      this.displayZoom = targetZoom;
+    }
   }
 
   private updateDisplayZoom(): void {
@@ -771,8 +1188,16 @@ export class DeDocumentViewer extends DeesElement {
     super.updated(changedProperties);
 
     if (changedProperties.has("letterData")) {
-      // Update display zoom after document renders
+      // Update display zoom, page indicator, and thumbnails after document renders
-      setTimeout(() => this.updateDisplayZoom(), 100);
+      setTimeout(() => {
+        this.updateDisplayZoom();
+        this.updatePageIndicator();
+        this.updateThumbnailPages();
+      }, 100);
+      // Additional delay to ensure all pages are rendered
+      setTimeout(() => {
+        this.updateThumbnailPages();
+      }, 500);
     }
   }
 
@@ -791,9 +1216,10 @@ export class DeDocumentViewer extends DeesElement {
       setTimeout(() => this.updateDisplayZoom(), 200);
     }
 
-    // Handle viewport resize to update display zoom in auto mode
+    // Handle viewport resize and scroll
     const viewport = this.shadowRoot?.querySelector(".viewport");
     if (viewport) {
+      // Resize observer for zoom updates
       const resizeObserver = new ResizeObserver(() => {
         if (this.zoomMode === "auto" || this.zoomMode === "fit-width") {
           this.updateDisplayZoom();
@@ -801,7 +1227,22 @@ export class DeDocumentViewer extends DeesElement {
       });
       resizeObserver.observe(viewport);
       this.registerGarbageFunction(() => resizeObserver.disconnect());
+
+      // Scroll listener for page indicator and thumbnail highlighting
+      const scrollHandler = () => {
+        this.updatePageIndicator();
+        // Trigger re-render to update active thumbnail
+        this.requestUpdate();
+      };
+      viewport.addEventListener("scroll", scrollHandler, { passive: true });
+      this.registerGarbageFunction(() => viewport.removeEventListener("scroll", scrollHandler));
     }
+
+    // Initial page indicator and thumbnail update
+    setTimeout(() => {
+      this.updatePageIndicator();
+      this.updateThumbnailPages();
+    }, 300);
   }
 
   // ============================================
@@ -896,27 +1337,100 @@ export class DeDocumentViewer extends DeesElement {
    * @param smooth - Whether to use smooth scrolling (default: true)
    */
   public scrollToPage(pageNumber: number, smooth: boolean = true): void {
+    const viewport = this.shadowRoot?.querySelector(".viewport");
     const doc = this.shadowRoot?.querySelector("dedocument-dedocument");
-    if (!doc) return;
+    if (!viewport || !doc) return;
 
     const pages = doc.shadowRoot?.querySelectorAll("dedocument-page");
     if (!pages || pages.length === 0) return;
 
     const targetIndex = Math.min(Math.max(0, pageNumber - 1), pages.length - 1);
-    const targetPage = pages[targetIndex];
+    const targetPage = pages[targetIndex] as HTMLElement;
 
     if (targetPage) {
-      targetPage.scrollIntoView({
+      // Calculate scroll position relative to viewport
-        behavior: smooth ? "smooth" : "instant",
+      // Account for the document's position within the viewport
-        block: "start",
+      const docRect = doc.getBoundingClientRect();
-      });
+      const pageRect = targetPage.getBoundingClientRect();
+      const pageOffsetFromDoc = pageRect.top - docRect.top;
+
+      // Scroll to the page position with fast custom animation
+      if (smooth) {
+        this.animateScrollTo(viewport, pageOffsetFromDoc, 250);
+      } else {
+        viewport.scrollTop = pageOffsetFromDoc;
+      }
     }
   }
 
+  /**
+   * Animate scroll to target position
+   * @param element - The scrollable element
+   * @param targetTop - Target scroll position
+   * @param duration - Animation duration in ms (default: 150)
+   */
+  private animateScrollTo(element: Element, targetTop: number, duration: number = 150): void {
+    const startTop = element.scrollTop;
+    const distance = targetTop - startTop;
+    const startTime = performance.now();
+    const easeOutCubic = (t: number) => 1 - Math.pow(1 - t, 3);
+
+    const step = (currentTime: number) => {
+      const elapsed = currentTime - startTime;
+      const progress = Math.min(elapsed / duration, 1);
+      const easedProgress = easeOutCubic(progress);
+
+      element.scrollTop = startTop + distance * easedProgress;
+
+      if (progress < 1) {
+        requestAnimationFrame(step);
+      }
+    };
+
+    requestAnimationFrame(step);
+  }
+
   /**
    * Trigger the print dialog
    */
   public async print(): Promise<void> {
     await this.handlePrint();
   }
+
+  /**
+   * Toggle the thumbnails sidebar visibility
+   */
+  public toggleThumbnails(): void {
+    this.showThumbnails = !this.showThumbnails;
+  }
+
+  /**
+   * Set whether the thumbnails sidebar is visible
+   * @param visible - Whether the sidebar should be visible
+   */
+  public setThumbnailsVisible(visible: boolean): void {
+    this.showThumbnails = visible;
+  }
+
+  /**
+   * Get whether the thumbnails sidebar is visible
+   */
+  public getThumbnailsVisible(): boolean {
+    return this.showThumbnails;
+  }
+
+  /**
+   * Set the sidebar width
+   * @param width - Width in pixels (100-300)
+   */
+  public setSidebarWidth(width: number): void {
+    this.sidebarWidth = Math.min(300, Math.max(100, width));
+  }
+
+  /**
+   * Get the current sidebar width
+   */
+  public getSidebarWidth(): number {
+    return this.sidebarWidth;
+  }
 }