v2.1.1

changelog.md

@@ -1,5 +1,14 @@
 # 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
 

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@design.estate/dees-document",
-  "version": "2.1.0",
+  "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
-        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.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.1.0',
+  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

@@ -142,6 +142,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 +552,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 +626,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`
@@ -1004,7 +1010,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";