v2.2.3

.npmrc

@@ -1 +0,0 @@
-registry=https://registry.npmjs.org/

changelog.md

@@ -1,5 +1,32 @@
 # Changelog
 
+## 2025-12-11 - 2.2.3 - fix(contentinvoice)
+Use shared translation.TranslationKey type in DeContentInvoice.translateKey and remove local import
+
+- Replaced local TranslationKey import with plugins.shared.translation.TranslationKey to ensure type consistency
+- Updated DeContentInvoice.translateKey parameter type to reference the shared translation type
+- Removed an unused type import from ts_web/elements/contentinvoice.ts
+
+## 2025-12-11 - 2.2.0 - feat(viewer)
+Add pagination metadata and thumbnail offset rendering for viewer thumbnails
+
+- Expose per-page pagination metadata (IPagePaginationInfo) from DeDocument during rendering (pageNumber, startOffset, contentLength).
+- DeDocument now collects pagination info while paginating and dispatches a 'pagination-complete' CustomEvent with pageCount and paginationInfo (bubbled & composed).
+- DeContentInvoice: add renderStartOffset and renderContentLength properties and applyOffsetTrimming to support rendering trimmed content (used for thumbnails).
+- DeDocumentViewer: listen for 'pagination-complete', store paginationInfo, and render thumbnail previews by mounting DeContentInvoice instances with precomputed offsets to produce accurate thumbnails.
+- Viewer: wire thumbnail generation to use per-page offsets so thumbnails show exactly the content slice for each page.
+- Demo data: extended demo invoice items in ts_shared/demoletter.ts to better exercise pagination and thumbnail rendering.
+- Remove registry override from .npmrc (previously pointed to registry.npmjs.org).
+
+## 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
 

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@design.estate/dees-document",
-  "version": "2.1.0",
+  "version": "2.2.3",
   "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
-        version: 1.3.0
+        specifier: ^2.0.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
-        version: 2.3.10(@tiptap/pm@2.27.1)
+        specifier: ^2.3.11
+        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':
-    resolution: {integrity: sha512-88bdzD15mYoG0T0AUTg8ATNkV/dN5ecqfiYcQRX1gJHmLrE2yqymFGkb0W0/xWgpcRakc08V+wRbSI7pqg+EOQ==}
+  '@git.zone/tswatch@2.3.11':
+    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.1.0',
+  version: '2.2.3',
   description: 'A sophisticated framework for dynamically generating and rendering business documents like invoices with modern web technologies, featuring PDF creation, templating, and automation.'
 }

ts_shared/demoletter.ts

@@ -237,6 +237,86 @@ export const demoLetter: plugins.tsclass.finance.TInvoice = {
       vatPercentage: 0,
       position: 20,
     },
+    {
+      name: "Consulting Services",
+      unitQuantity: 5,
+      unitNetPrice: 150,
+      unitType: "hours",
+      vatPercentage: 19,
+      position: 21,
+    },
+    {
+      name: "Development Work",
+      unitQuantity: 12,
+      unitNetPrice: 120,
+      unitType: "hours",
+      vatPercentage: 19,
+      position: 22,
+    },
+    {
+      name: "Project Management",
+      unitQuantity: 3,
+      unitNetPrice: 180,
+      unitType: "hours",
+      vatPercentage: 19,
+      position: 23,
+    },
+    {
+      name: "Technical Support",
+      unitQuantity: 8,
+      unitNetPrice: 90,
+      unitType: "hours",
+      vatPercentage: 7,
+      position: 24,
+    },
+    {
+      name: "Documentation",
+      unitQuantity: 4,
+      unitNetPrice: 75,
+      unitType: "hours",
+      vatPercentage: 7,
+      position: 25,
+    },
+    {
+      name: "Code Review",
+      unitQuantity: 6,
+      unitNetPrice: 110,
+      unitType: "hours",
+      vatPercentage: 19,
+      position: 26,
+    },
+    {
+      name: "Testing & QA",
+      unitQuantity: 10,
+      unitNetPrice: 95,
+      unitType: "hours",
+      vatPercentage: 19,
+      position: 27,
+    },
+    {
+      name: "Infrastructure Setup",
+      unitQuantity: 2,
+      unitNetPrice: 250,
+      unitType: "hours",
+      vatPercentage: 19,
+      position: 28,
+    },
+    {
+      name: "Training Session",
+      unitQuantity: 4,
+      unitNetPrice: 200,
+      unitType: "hours",
+      vatPercentage: 7,
+      position: 29,
+    },
+    {
+      name: "Maintenance Package",
+      unitQuantity: 1,
+      unitNetPrice: 500,
+      unitType: "units",
+      vatPercentage: 19,
+      position: 30,
+    },
   ],
 };
 

ts_web/00_commitinfo_data.ts

@@ -3,6 +3,6 @@
  */
 export const commitinfo = {
   name: '@design.estate/dees-document',
-  version: '2.1.0',
+  version: '2.2.3',
   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/contentinvoice.ts

@@ -15,7 +15,6 @@ import {
 import * as plugins from "../plugins.js";
 
 import { dedocumentSharedStyle } from "../style.js";
-import type { TranslationKey } from "../../ts_shared/translation.js";
 
 declare global {
   interface HTMLElementTagNameMap {
@@ -49,6 +48,13 @@ export class DeContentInvoice extends DeesElement {
   })
   accessor documentSettings: plugins.shared.interfaces.IDocumentSettings;
 
+  // Offset-based rendering properties for thumbnails
+  @property({ type: Number })
+  accessor renderStartOffset: number = null;
+
+  @property({ type: Number })
+  accessor renderContentLength: number = null;
+
   constructor() {
     super();
     domtools.DomTools.setupDomTools();
@@ -296,7 +302,7 @@ export class DeContentInvoice extends DeesElement {
     }
   }
 
-  public translateKey(key: TranslationKey): string {
+  public translateKey(key: plugins.shared.translation.TranslationKey): string {
     return plugins.shared.translation.translate(
       this.documentSettings.languageCode,
       key
@@ -307,7 +313,29 @@ export class DeContentInvoice extends DeesElement {
     _changedProperties: Map<string | number | symbol, unknown>
   ) {
     super.firstUpdated(_changedProperties);
-    this.attachInvoiceDom();
+    await this.attachInvoiceDom();
+
+    // Apply offset-based trimming if specified (used for thumbnails)
+    if (this.renderStartOffset !== null && this.renderContentLength !== null) {
+      await this.applyOffsetTrimming();
+    }
+  }
+
+  /**
+   * Apply pre-computed pagination offsets for thumbnail rendering
+   */
+  private async applyOffsetTrimming(): Promise<void> {
+    // Trim from start
+    if (this.renderStartOffset > 0) {
+      await this.trimStartToOffset(this.renderStartOffset);
+    }
+
+    // Trim from end to match content length
+    let currentLength = await this.getContentLength();
+    while (currentLength > this.renderContentLength) {
+      await this.trimEndByOne();
+      currentLength = await this.getContentLength();
+    }
   }
 
   private renderPaymentTerms(): TemplateResult {

ts_web/elements/document.ts

@@ -26,6 +26,12 @@ import { DeContentInvoice } from "./contentinvoice.js";
 
 import { demoFunc } from "./document.demo.js";
 
+export interface IPagePaginationInfo {
+  pageNumber: number;
+  startOffset: number;
+  contentLength: number;
+}
+
 declare global {
   interface HTMLElementTagNameMap {
     "dedocument-dedocument": DeDocument;
@@ -142,10 +148,12 @@ export class DeDocument extends DeesElement {
     null;
   public latestRenderedLetterData: plugins.tsclass.business.TLetter = null;
   public cleanupStore: any[] = [];
+  public paginationInfo: IPagePaginationInfo[] = [];
 
   public async renderDocument() {
     this.latestDocumentSettings = this.documentSettings;
     this.latestRenderedLetterData = this.letterData;
+    this.paginationInfo = [];
 
     const cleanUpStoreCurrentRender = [];
     const cleanUpStoreNextRender = [];
@@ -198,7 +206,16 @@ export class DeDocument extends DeesElement {
         newPageOverflows = await newPage.checkOverflow();
       }
       currentContentOffset = await currentContent.getContentLength();
+      const pageStartOffset = overallContentOffset;
       overallContentOffset = overallContentOffset + currentContentOffset;
+
+      // Track pagination info for this page
+      this.paginationInfo.push({
+        pageNumber: pageCounter,
+        startOffset: pageStartOffset,
+        contentLength: currentContentOffset,
+      });
+
       if (trimmed === 0) {
         complete = true;
       }
@@ -234,6 +251,16 @@ export class DeDocument extends DeesElement {
       }
     }
     this.adjustDePageScaling();
+
+    // Emit event with pagination info for thumbnails
+    this.dispatchEvent(new CustomEvent('pagination-complete', {
+      detail: {
+        pageCount: pageCounter,
+        paginationInfo: this.paginationInfo,
+      },
+      bubbles: true,
+      composed: true,
+    }));
   }
 
   async updated(

ts_web/elements/viewer.ts

@@ -11,8 +11,9 @@ import {
   type TemplateResult,
 } from "@design.estate/dees-element";
 import { demoFunc } from "./viewer.demo.js";
-import { DeDocument } from "./document.js";
+import { DeDocument, type IPagePaginationInfo } from "./document.js";
 import "./page.js"; // Import DePage for thumbnail rendering
+import "./contentinvoice.js"; // Import DeContentInvoice for thumbnail content
 
 import "@design.estate/dees-catalog";
 
@@ -105,6 +106,9 @@ export class DeDocumentViewer extends DeesElement {
   @state()
   accessor thumbnailPages: number[] = [];
 
+  @state()
+  accessor paginationInfo: IPagePaginationInfo[] = [];
+
   // Zoom animation
   private zoomAnimationId: number | null = null;
 
@@ -142,6 +146,7 @@ export class DeDocumentViewer extends DeesElement {
         flex-direction: column;
         z-index: 50;
         box-sizing: border-box;
+        transition: width 0.2s ease;
       }
 
       .sidebar--collapsed {
@@ -551,6 +556,10 @@ export class DeDocumentViewer extends DeesElement {
         transition: left 0.2s ease;
       }
 
+      .viewport--resizing {
+        transition: none !important;
+      }
+
       .viewport--with-sidebar {
         left: var(--current-sidebar-width, 140px);
       }
@@ -621,6 +630,7 @@ export class DeDocumentViewer extends DeesElement {
       "viewport",
       this.zoomMode !== "auto" ? "viewport--centered" : "",
       this.showThumbnails ? "viewport--with-sidebar" : "",
+      this.isResizingSidebar ? "viewport--resizing" : "",
     ].filter(Boolean).join(" ");
 
     return html`
@@ -661,8 +671,10 @@ export class DeDocumentViewer extends DeesElement {
       <div class="${sidebarClasses}" style="width: ${this.sidebarWidth}px;">
         <div class="sidebar__header">Pages</div>
         <div class="sidebar__thumbnails">
-          ${this.thumbnailPages.map(
-            (_, i) => html`
+          ${this.thumbnailPages.map((_, i) => {
+            const pageInfo = this.paginationInfo[i];
+
+            return html`
               <div
                 class="thumbnail ${currentPage === i + 1 ? "thumbnail--active" : ""}"
                 @click=${() => this.scrollToPage(i + 1)}
@@ -683,13 +695,20 @@ export class DeDocumentViewer extends DeesElement {
                       .documentSettings=${this.documentSettings}
                       .pageNumber=${i + 1}
                       .pageTotalNumber=${this.thumbnailPages.length}
-                    ></dedocument-page>
+                    >${pageInfo ? html`
+                      <dedocument-contentinvoice
+                        .letterData=${this.letterData as unknown as plugins.tsclass.finance.TInvoice}
+                        .documentSettings=${this.documentSettings}
+                        .renderStartOffset=${pageInfo.startOffset}
+                        .renderContentLength=${pageInfo.contentLength}
+                      ></dedocument-contentinvoice>
+                    ` : null}</dedocument-page>
                   </div>
                 </div>
                 <span class="thumbnail__label">${i + 1}</span>
               </div>
-            `
-          )}
+            `;
+          })}
         </div>
         <div
           class="sidebar__resize-handle"
@@ -1004,7 +1023,7 @@ export class DeDocumentViewer extends DeesElement {
       document.body.style.userSelect = "";
     };
 
-    document.addEventListener("mousemove", onMouseMove);
+    document.addEventListener("mousemove", onMouseMove, { passive: true });
     document.addEventListener("mouseup", onMouseUp);
     document.body.style.cursor = "ew-resize";
     document.body.style.userSelect = "none";
@@ -1210,6 +1229,15 @@ export class DeDocumentViewer extends DeesElement {
       setTimeout(() => this.updateDisplayZoom(), 200);
     }
 
+    // Listen for pagination-complete event from DeDocument
+    this.addEventListener('pagination-complete', (e: CustomEvent) => {
+      this.paginationInfo = e.detail.paginationInfo;
+      const pageCount = e.detail.pageCount;
+      if (pageCount !== this.thumbnailPages.length) {
+        this.thumbnailPages = Array.from({ length: pageCount }, (_, i) => i);
+      }
+    });
+
     // Handle viewport resize and scroll
     const viewport = this.shadowRoot?.querySelector(".viewport");
     if (viewport) {