v3.5.2

changelog.md

@@ -1,5 +1,20 @@
 # Changelog
 
+## 2026-01-04 - 3.5.2 - fix(elements)
+delay hiding sidebar and properties panels during native-mode transition and use transparent rgba border for frame to avoid layout jumps
+
+- Add isHidden state to wcc-sidebar and wcc-properties and switch display bindings to use isHidden instead of directly using isNative
+- Introduce a 300ms delayed hide when entering native mode so UI hides after frame animation completes; show immediately when exiting native mode
+- Replace hardcoded hex border values in wcc-frame with rgba and set native border to a transparent 0px to prevent abrupt visual jumps
+
+## 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
 

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@design.estate/dees-wcctools",
-  "version": "3.5.0",
+  "version": "3.5.2",
   "private": false,
   "description": "A set of web component tools for creating element catalogues, enabling the structured development and documentation of custom elements and pages.",
   "exports": {

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.2',
   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-dashboard.ts

@@ -66,6 +66,10 @@ export class WccDashboard extends DeesElement {
   @property({ attribute: false })
   accessor pinnedItems: Set<string> = new Set();
 
+  // Sidebar width (resizable)
+  @property({ type: Number })
+  accessor sidebarWidth: number = 200;
+
   // Derived from selectedViewport - no need for separate property
   public get isNative(): boolean {
     return this.selectedViewport === 'native';
@@ -127,6 +131,7 @@ export class WccDashboard extends DeesElement {
         .selectedItem=${this.selectedItem}
         .searchQuery=${this.searchQuery}
         .pinnedItems=${this.pinnedItems}
+        .sidebarWidth=${this.sidebarWidth}
         .isNative=${this.isNative}
         @selectedType=${(eventArg) => {
           this.selectedType = eventArg.detail;
@@ -145,6 +150,15 @@ export class WccDashboard extends DeesElement {
           this.pinnedItems = eventArg.detail;
           this.updateUrlWithScrollState();
         }}
+        @widthChanged=${async (eventArg: CustomEvent) => {
+          this.sidebarWidth = eventArg.detail;
+          this.updateUrlWithScrollState();
+          const frame = await this.wccFrame;
+          if (frame) {
+            frame.sidebarWidth = eventArg.detail;
+            frame.requestUpdate();
+          }
+        }}
       ></wcc-sidebar>
       <wcc-properties
         .dashboardRef=${this}
@@ -153,6 +167,7 @@ export class WccDashboard extends DeesElement {
         .selectedViewport=${this.selectedViewport}
         .selectedTheme=${this.selectedTheme}
         .isNative=${this.isNative}
+        .sidebarWidth=${this.sidebarWidth}
         @selectedViewport=${(eventArg) => {
           this.selectedViewport = eventArg.detail;
           this.scheduleUpdate();
@@ -171,7 +186,7 @@ export class WccDashboard extends DeesElement {
           this.toggleNative();
         }}
       ></wcc-properties>
-      <wcc-frame id="wccFrame" viewport=${this.selectedViewport} .isNative=${this.isNative}>
+      <wcc-frame id="wccFrame" viewport=${this.selectedViewport} .isNative=${this.isNative} .sidebarWidth=${this.sidebarWidth}>
       </wcc-frame>
     `;
   }
@@ -247,6 +262,7 @@ export class WccDashboard extends DeesElement {
           const frameScrollY = routeInfo.queryParams.frameScrollY;
           const sidebarScrollY = routeInfo.queryParams.sidebarScrollY;
           const pinned = routeInfo.queryParams.pinned;
+          const sidebarWidth = routeInfo.queryParams.sidebarWidth;
 
           if (search) {
             this.searchQuery = search;
@@ -269,10 +285,19 @@ export class WccDashboard extends DeesElement {
           } else if (this.pinnedItems.size > 0) {
             this.pinnedItems = new Set();
           }
+          if (sidebarWidth) {
+            this.sidebarWidth = parseInt(sidebarWidth, 10);
+          }
 
-          // Apply scroll positions after a short delay to ensure DOM is ready
-          setTimeout(() => {
+          // Apply scroll positions and update frame after a short delay to ensure DOM is ready
+          setTimeout(async () => {
             this.applyScrollPositions();
+            // Ensure frame gets the sidebarWidth
+            const frame = await this.wccFrame;
+            if (frame) {
+              frame.sidebarWidth = this.sidebarWidth;
+              frame.requestUpdate();
+            }
           }, 100);
         } else {
           this.searchQuery = '';
@@ -326,6 +351,7 @@ export class WccDashboard extends DeesElement {
           const frameScrollY = routeInfo.queryParams.frameScrollY;
           const sidebarScrollY = routeInfo.queryParams.sidebarScrollY;
           const pinned = routeInfo.queryParams.pinned;
+          const sidebarWidth = routeInfo.queryParams.sidebarWidth;
 
           if (search) {
             this.searchQuery = search;
@@ -348,6 +374,9 @@ export class WccDashboard extends DeesElement {
           } else if (this.pinnedItems.size > 0) {
             this.pinnedItems = new Set();
           }
+          if (sidebarWidth) {
+            this.sidebarWidth = parseInt(sidebarWidth, 10);
+          }
 
           // Apply scroll positions after a short delay to ensure DOM is ready
           setTimeout(() => {
@@ -444,6 +473,9 @@ export class WccDashboard extends DeesElement {
     if (this.pinnedItems.size > 0) {
       queryParams.set('pinned', Array.from(this.pinnedItems).join(','));
     }
+    if (this.sidebarWidth !== 200) {
+      queryParams.set('sidebarWidth', this.sidebarWidth.toString());
+    }
 
     const queryString = queryParams.toString();
     const fullUrl = queryString ? `${baseUrl}?${queryString}` : baseUrl;
@@ -507,6 +539,9 @@ export class WccDashboard extends DeesElement {
     if (this.pinnedItems.size > 0) {
       queryParams.set('pinned', Array.from(this.pinnedItems).join(','));
     }
+    if (this.sidebarWidth !== 200) {
+      queryParams.set('sidebarWidth', this.sidebarWidth.toString());
+    }
 
     const queryString = queryParams.toString();
     const fullUrl = queryString ? `${baseUrl}?${queryString}` : baseUrl;

ts_web/elements/wcc-frame.ts

@@ -19,13 +19,18 @@ export class WccFrame extends DeesElement {
   @property({ type: Boolean })
   accessor isNative: boolean = false;
 
+  @property({ type: Number })
+  accessor sidebarWidth: number = 200;
+
+  @property({ type: Boolean })
+  accessor isResizing: boolean = false;
+
   public static styles = [
     css`
       :host {
-        border: 10px solid #ffaeaf;
+        border: 10px solid rgba(255, 174, 175, 1);
         position: absolute;
         background: ${cssManager.bdTheme('#333', '#000')};
-        left: 200px;
         right: 0px;
         top: 0px;
         overflow-y: auto;
@@ -47,17 +52,17 @@ export class WccFrame extends DeesElement {
       <style>
         :host {
           ${this.isNative ? `
-            border: none !important;
+            border: 0px solid rgba(255, 174, 175, 0) !important;
             left: 0px !important;
             right: 0px !important;
             top: 0px !important;
             bottom: 0px !important;
           ` : `
             bottom: ${this.advancedEditorOpen ? '400px' : '100px'};
-            border: 10px solid #ffaeaf;
-            left: 200px;
+            border: 10px solid rgba(255, 174, 175, 1);
+            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':
@@ -67,19 +72,19 @@ export class WccFrame extends DeesElement {
             case 'tablet':
               return `
                   padding: 0px ${
-                    (document.body.clientWidth - 200 - domtools.breakpoints.tablet) / 2
+                    (document.body.clientWidth - this.sidebarWidth - domtools.breakpoints.tablet) / 2
                   }px;
                 `;
             case 'phablet':
               return `
                   padding: 0px ${
-                    (document.body.clientWidth - 200 - domtools.breakpoints.phablet) / 2
+                    (document.body.clientWidth - this.sidebarWidth - domtools.breakpoints.phablet) / 2
                   }px;
                 `;
             case 'phone':
               return `
                   padding: 0px ${
-                    (document.body.clientWidth - 200 - domtools.breakpoints.phone) / 2
+                    (document.body.clientWidth - this.sidebarWidth - domtools.breakpoints.phone) / 2
                   }px;
                 `;
           }

ts_web/elements/wcc-properties.ts

@@ -37,6 +37,9 @@ export class WccProperties extends DeesElement {
   @property()
   accessor isNative: boolean = false;
 
+  @property({ type: Number })
+  accessor sidebarWidth: number = 200;
+
   @state()
   accessor propertyContent: TemplateResult[] = [];
 
@@ -60,6 +63,10 @@ export class WccProperties extends DeesElement {
   @state()
   accessor recordingDuration: number = 0;
 
+  // Delayed hide for native mode transition
+  @state()
+  accessor isHidden: boolean = false;
+
   public editorHeight: number = 300;
 
   public render(): TemplateResult {
@@ -89,14 +96,14 @@ export class WccProperties extends DeesElement {
           font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', sans-serif;
           box-sizing: border-box;
           position: absolute;
-          left: 200px;
+          left: ${this.sidebarWidth}px;
           height: ${this.editingProperties.length > 0 ? 100 + this.editorHeight : 100}px;
           bottom: 0px;
           right: 0px;
           overflow: hidden;
           background: var(--background);
           color: var(--foreground);
-          display: ${this.isNative ? 'none' : 'block'};
+          display: ${this.isHidden ? 'none' : 'block'};
         }
         .grid {
           display: grid;
@@ -928,6 +935,19 @@ export class WccProperties extends DeesElement {
   protected updated(changedProperties: Map<string, unknown>) {
     super.updated(changedProperties);
 
+    // Handle delayed hide for native mode transition
+    if (changedProperties.has('isNative')) {
+      if (this.isNative) {
+        // Delay hiding until frame animation completes
+        setTimeout(() => {
+          this.isHidden = true;
+        }, 300);
+      } else {
+        // Show immediately when exiting native mode
+        this.isHidden = false;
+      }
+    }
+
     // Only recreate properties when selectedItem changes
     if (changedProperties.has('selectedItem')) {
       this.createProperties().catch(error => {

ts_web/elements/wcc-sidebar.ts

@@ -36,6 +36,18 @@ export class WccSidebar extends DeesElement {
   @property({ attribute: false })
   accessor pinnedItems: Set<string> = new Set();
 
+  // Sidebar width (resizable)
+  @property({ type: Number })
+  accessor sidebarWidth: number = 200;
+
+  // Track if currently resizing
+  @state()
+  accessor isResizing: boolean = false;
+
+  // Delayed hide for native mode transition
+  @state()
+  accessor isHidden: boolean = false;
+
   private sectionsInitialized = false;
 
   public render(): TemplateResult {
@@ -59,14 +71,14 @@ export class WccSidebar extends DeesElement {
           --ring: #3b82f6;
           --radius: 4px;
 
-          display: ${this.isNative ? 'none' : 'block'};
+          display: ${this.isHidden ? 'none' : 'block'};
           border-right: 1px solid rgba(255, 255, 255, 0.08);
           font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', sans-serif;
           font-size: 14px;
           box-sizing: border-box;
           position: absolute;
           left: 0px;
-          width: 200px;
+          width: ${this.sidebarWidth}px;
           top: 0px;
           bottom: 0px;
           overflow-y: auto;
@@ -167,6 +179,10 @@ export class WccSidebar extends DeesElement {
           grid-template-columns: 16px 1fr;
         }
 
+        .selectOption.folder .text {
+          margin-left: 4px;
+        }
+
         .selectOption .expand-icon {
           font-size: 14px;
           opacity: 0.5;
@@ -321,13 +337,17 @@ export class WccSidebar extends DeesElement {
           opacity: 0.8;
         }
 
-        /* Section tag for pinned items */
+        /* Section tag pill for pinned items */
         .section-tag {
-          font-size: 0.55rem;
-          color: #555;
+          font-size: 0.5rem;
+          color: #888;
           margin-left: auto;
           text-transform: uppercase;
-          letter-spacing: 0.03em;
+          letter-spacing: 0.02em;
+          background: rgba(255, 255, 255, 0.06);
+          padding: 0.15rem 0.4rem;
+          border-radius: 9999px;
+          white-space: nowrap;
         }
 
         /* Group container */
@@ -352,6 +372,27 @@ export class WccSidebar extends DeesElement {
           margin-left: 0.25rem;
           margin-right: 0.25rem;
         }
+
+        /* Resize handle */
+        .resize-handle {
+          position: absolute;
+          top: 0;
+          right: 0;
+          bottom: 0;
+          width: 4px;
+          cursor: col-resize;
+          background: transparent;
+          transition: background 0.15s ease;
+          z-index: 10;
+        }
+
+        .resize-handle:hover {
+          background: rgba(59, 130, 246, 0.3);
+        }
+
+        .resize-handle.active {
+          background: var(--primary);
+        }
       </style>
       <div class="search-container">
         <input
@@ -366,6 +407,10 @@ export class WccSidebar extends DeesElement {
         ${this.renderPinnedSection()}
         ${this.renderSections()}
       </div>
+      <div
+        class="resize-handle ${this.isResizing ? 'active' : ''}"
+        @mousedown=${this.startResize}
+      ></div>
     `;
   }
 
@@ -429,6 +474,7 @@ export class WccSidebar extends DeesElement {
     const isCollapsed = this.collapsedSections.has('__pinned__');
 
     // Collect pinned items with their original section info
+    // Pinned items are NOT filtered by search - they always remain visible
     const pinnedEntries: Array<{ sectionName: string; itemName: string; item: any; section: IWccSection }> = [];
 
     for (const key of this.pinnedItems) {
@@ -443,10 +489,7 @@ export class WccSidebar extends DeesElement {
       }
     }
 
-    // Filter by search
-    const filteredEntries = pinnedEntries.filter(e => this.matchesSearch(e.itemName));
-
-    if (filteredEntries.length === 0 && this.searchQuery) {
+    if (pinnedEntries.length === 0) {
       return null;
     }
 
@@ -460,7 +503,7 @@ export class WccSidebar extends DeesElement {
         <span>Pinned</span>
       </div>
       <div class="section-content ${isCollapsed ? 'collapsed' : ''}">
-        ${filteredEntries.map(({ sectionName, itemName, item, section }) => {
+        ${pinnedEntries.map(({ sectionName, itemName, item, section }) => {
           const isSelected = this.selectedItem === item;
           const type = section.type === 'elements' ? 'element' : 'page';
           const icon = section.type === 'elements' ? 'featured_video' : 'insert_drive_file';
@@ -693,6 +736,19 @@ export class WccSidebar extends DeesElement {
   protected updated(changedProperties: Map<string, unknown>) {
     super.updated(changedProperties);
 
+    // Handle delayed hide for native mode transition
+    if (changedProperties.has('isNative')) {
+      if (this.isNative) {
+        // Delay hiding until frame animation completes
+        setTimeout(() => {
+          this.isHidden = true;
+        }, 300);
+      } else {
+        // Show immediately when exiting native mode
+        this.isHidden = false;
+      }
+    }
+
     // Auto-expand folder when a multi-demo element is selected
     if (changedProperties.has('selectedItem') && this.selectedItem && this.dashboardRef?.sections) {
       // Find the element in any section
@@ -717,6 +773,51 @@ export class WccSidebar extends DeesElement {
     }
   }
 
+  // ============ Resize functionality ============
+
+  private startResize = (e: MouseEvent) => {
+    e.preventDefault();
+    this.isResizing = true;
+    const startX = e.clientX;
+    const startWidth = this.sidebarWidth;
+
+    // Cache references once at start
+    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;
+      // Update frame and properties directly
+      if (frame) {
+        frame.sidebarWidth = newWidth;
+      }
+      if (properties) {
+        properties.sidebarWidth = newWidth;
+      }
+    };
+
+    const onMouseUp = () => {
+      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 }));
+    };
+
+    document.addEventListener('mousemove', onMouseMove);
+    document.addEventListener('mouseup', onMouseUp);
+  };
+
   public selectItem(
     typeArg: TElementType,
     itemNameArg: string,