fix(sidebar): disable frame CSS transition while user is resizing the sidebar to prevent janky animations

changelog.md

@@ -1,5 +1,13 @@
 # Changelog
 
+## 2026-01-04 - 3.5.1 - fix(sidebar)
+disable frame CSS transition while user is resizing the sidebar to prevent janky animations
+
+- Added isResizing boolean property to wcc-frame to toggle transitions during resize
+- Set frame.isResizing = true at resize start and false on mouseup to re-enable transitions
+- Updated CSS to skip transition while isResizing is true
+- Files changed: ts_web/elements/wcc-frame.ts, ts_web/elements/wcc-sidebar.ts
+
 ## 2026-01-04 - 3.5.0 - feat(wcctools)
 add context menu and pinning support, persist pinned state in URL, and add grouped demo test elements
 

ts_web/00_commitinfo_data.ts

@@ -3,6 +3,6 @@
  */
 export const commitinfo = {
   name: '@design.estate/dees-wcctools',
-  version: '3.5.0',
+  version: '3.5.1',
   description: 'A set of web component tools for creating element catalogues, enabling the structured development and documentation of custom elements and pages.'
 }

ts_web/elements/wcc-frame.ts

@@ -22,6 +22,9 @@ export class WccFrame extends DeesElement {
   @property({ type: Number })
   accessor sidebarWidth: number = 200;
 
+  @property({ type: Boolean })
+  accessor isResizing: boolean = false;
+
   public static styles = [
     css`
       :host {
@@ -59,7 +62,7 @@ export class WccFrame extends DeesElement {
             border: 10px solid #ffaeaf;
             left: ${this.sidebarWidth}px;
           `}
-          transition: all 0.3s ease;
+          transition: ${this.isResizing ? 'none' : 'all 0.3s ease'};
           ${this.isNative ? 'padding: 0px;' : (() => {
           switch (this.viewport) {
             case 'desktop':

ts_web/elements/wcc-sidebar.ts

@@ -768,6 +768,11 @@ export class WccSidebar extends DeesElement {
     const frame = this.dashboardRef?.shadowRoot?.querySelector('wcc-frame') as any;
     const properties = this.dashboardRef?.shadowRoot?.querySelector('wcc-properties') as any;
 
+    // Disable frame transition during resize
+    if (frame) {
+      frame.isResizing = true;
+    }
+
     const onMouseMove = (e: MouseEvent) => {
       const newWidth = Math.min(400, Math.max(150, startWidth + (e.clientX - startX)));
       this.sidebarWidth = newWidth;
@@ -784,6 +789,10 @@ export class WccSidebar extends DeesElement {
       this.isResizing = false;
       document.removeEventListener('mousemove', onMouseMove);
       document.removeEventListener('mouseup', onMouseUp);
+      // Re-enable frame transition
+      if (frame) {
+        frame.isResizing = false;
+      }
       // Dispatch event on release for URL persistence
       this.dispatchEvent(new CustomEvent('widthChanged', { detail: this.sidebarWidth }));
     };