@design.estate/dees-wcctools 1.0.97 → 1.0.99

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@design.estate/dees-wcctools",
-  "version": "1.0.97",
+  "version": "1.0.99",
   "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": {

package/readme.hints.md

@@ -25,9 +25,11 @@ The properties panel had timing issues detecting rendered elements because:
 
 ### Code Flow
 1. Dashboard renders element demo into viewport using `render(anonItem.demo(), viewport)`
-2. Properties panel waits, then searches recursively for the element instance
-3. If not found, retries with delays to handle async rendering
-4. Once found, extracts and displays element properties
+2. Properties panel waits 200ms for demo wrappers to run and set initial values
+3. Searches recursively for the element instance
+4. If not found, retries with delays to handle async rendering
+5. Once found, extracts and displays element properties
+6. Uses property binding (`.value=`) instead of attribute binding to prevent input events during initialization
 
 ## Demo Tools
 

package/readme.plan.md

@@ -85,4 +85,16 @@ These test various scenarios:
 - Complex data type display and editing
 - Element detection inside dees-demowrapper
 - Error handling for problematic values
-- Deep nesting and shadow DOM traversal
+- Deep nesting and shadow DOM traversal
+
+# Fixed Demo Value Overwriting (COMPLETED)
+
+## Issue:
+Properties panel was overwriting values set by demo functions
+
+## Solution:
+1. Changed from attribute binding (`value=`) to property binding (`.value=`)
+2. This prevents browser from firing input events during initialization
+3. Added proper number parsing for number inputs
+4. Increased initial wait to 200ms for demo wrappers to complete
+5. Simplified select element handling to use property binding

package/ts_web/00_commitinfo_data.ts

@@ -1,8 +1,8 @@
 /**
- * autocreated commitinfo by @pushrocks/commitinfo
+ * autocreated commitinfo by @push.rocks/commitinfo
  */
 export const commitinfo = {
   name: '@design.estate/dees-wcctools',
-  version: '1.0.90',
+  version: '1.0.99',
   description: 'A set of web component tools for creating element catalogues, enabling the structured development and documentation of custom elements and pages.'
 }

package/ts_web/elements/wcc-dashboard.ts

@@ -38,6 +38,12 @@ export class WccDashboard extends DeesElement {
   @property()
   public warning: string = null;
   
+  @property()
+  public frameScrollY: number = 0;
+  
+  @property()
+  public sidebarScrollY: number = 0;
+  
   @queryAsync('wcc-frame')
   public wccFrame: Promise<WccFrame>;
 
@@ -113,6 +119,12 @@ export class WccDashboard extends DeesElement {
 
   public async firstUpdated() {
     this.domtools = await plugins.deesDomtools.DomTools.setupDomTools();
+    
+    // Set up scroll listeners after DOM is ready
+    setTimeout(() => {
+      this.setupScrollListeners();
+    }, 500);
+    
     this.domtools.router.on(
       '/wcctools-route/:itemType/:itemName/:viewport/:theme',
       async (routeInfo) => {
@@ -125,6 +137,25 @@ export class WccDashboard extends DeesElement {
         } else if (routeInfo.params.itemType === 'page') {
           this.selectedItem = this.pages[routeInfo.params.itemName];
         }
+        
+        // Restore scroll positions from query parameters
+        if (routeInfo.queryParams) {
+          const frameScrollY = routeInfo.queryParams.frameScrollY;
+          const sidebarScrollY = routeInfo.queryParams.sidebarScrollY;
+          
+          if (frameScrollY) {
+            this.frameScrollY = parseInt(frameScrollY);
+          }
+          if (sidebarScrollY) {
+            this.sidebarScrollY = parseInt(sidebarScrollY);
+          }
+          
+          // Apply scroll positions after a short delay to ensure DOM is ready
+          setTimeout(() => {
+            this.applyScrollPositions();
+          }, 100);
+        }
+        
         const domtoolsInstance = await plugins.deesDomtools.elementBasic.setup();
         this.selectedTheme === 'bright'
           ? domtoolsInstance.themeManager.goBright()
@@ -136,7 +167,6 @@ export class WccDashboard extends DeesElement {
   public async updated(changedPropertiesArg: Map<string, any>) {
     this.domtools = await plugins.deesDomtools.DomTools.setupDomTools();
     await this.domtools.router._handleRouteState();
-    const storeElement = this.selectedItem;
     const wccFrame: WccFrame = this.shadowRoot.querySelector('wcc-frame');
 
     if (changedPropertiesArg.has('selectedItemName')) {
@@ -173,8 +203,82 @@ export class WccDashboard extends DeesElement {
   }
 
   public buildUrl() {
-    this.domtools.router.pushUrl(
-      `/wcctools-route/${this.selectedType}/${this.selectedItemName}/${this.selectedViewport}/${this.selectedTheme}`
-    );
+    const baseUrl = `/wcctools-route/${this.selectedType}/${this.selectedItemName}/${this.selectedViewport}/${this.selectedTheme}`;
+    const queryParams = new URLSearchParams();
+    
+    if (this.frameScrollY > 0) {
+      queryParams.set('frameScrollY', this.frameScrollY.toString());
+    }
+    if (this.sidebarScrollY > 0) {
+      queryParams.set('sidebarScrollY', this.sidebarScrollY.toString());
+    }
+    
+    const queryString = queryParams.toString();
+    const fullUrl = queryString ? `${baseUrl}?${queryString}` : baseUrl;
+    
+    this.domtools.router.pushUrl(fullUrl);
+  }
+  
+  private scrollUpdateTimeout: NodeJS.Timeout;
+  
+  public async setupScrollListeners() {
+    const wccFrame = await this.wccFrame;
+    const wccSidebar = this.shadowRoot.querySelector('wcc-sidebar');
+    
+    if (wccFrame) {
+      // The frame element itself is the scrollable container
+      wccFrame.addEventListener('scroll', () => {
+        this.frameScrollY = wccFrame.scrollTop;
+        this.debouncedScrollUpdate();
+      });
+    }
+    
+    if (wccSidebar) {
+      // The sidebar element itself is the scrollable container
+      wccSidebar.addEventListener('scroll', () => {
+        this.sidebarScrollY = wccSidebar.scrollTop;
+        this.debouncedScrollUpdate();
+      });
+    }
+  }
+  
+  private debouncedScrollUpdate() {
+    clearTimeout(this.scrollUpdateTimeout);
+    this.scrollUpdateTimeout = setTimeout(() => {
+      this.updateUrlWithScrollState();
+    }, 300);
+  }
+  
+  private updateUrlWithScrollState() {
+    const baseUrl = `/wcctools-route/${this.selectedType}/${this.selectedItemName}/${this.selectedViewport}/${this.selectedTheme}`;
+    const queryParams = new URLSearchParams();
+    
+    if (this.frameScrollY > 0) {
+      queryParams.set('frameScrollY', this.frameScrollY.toString());
+    }
+    if (this.sidebarScrollY > 0) {
+      queryParams.set('sidebarScrollY', this.sidebarScrollY.toString());
+    }
+    
+    const queryString = queryParams.toString();
+    const fullUrl = queryString ? `${baseUrl}?${queryString}` : baseUrl;
+    
+    // Use replaceState to update URL without navigation
+    window.history.replaceState(null, '', fullUrl);
+  }
+  
+  public async applyScrollPositions() {
+    const wccFrame = await this.wccFrame;
+    const wccSidebar = this.shadowRoot.querySelector('wcc-sidebar');
+    
+    if (wccFrame && this.frameScrollY > 0) {
+      // The frame element itself is the scrollable container
+      wccFrame.scrollTop = this.frameScrollY;
+    }
+    
+    if (wccSidebar && this.sidebarScrollY > 0) {
+      // The sidebar element itself is the scrollable container
+      wccSidebar.scrollTop = this.sidebarScrollY;
+    }
   }
 }

package/ts_web/elements/wcc-properties.ts

@@ -309,8 +309,8 @@ export class WccProperties extends DeesElement {
       console.log(anonItem.elementProperties);
       const wccFrame = await this.dashboardRef.wccFrame;
       
-      // Wait for render to complete
-      await new Promise(resolve => setTimeout(resolve, 100));
+      // Wait for render to complete and any demo wrappers to run
+      await new Promise(resolve => setTimeout(resolve, 200));
       
       // Try to find the element with recursive search
       const viewport = await wccFrame.getViewportElement();
@@ -370,7 +370,7 @@ export class WccProperties extends DeesElement {
                   case 'String':
                     return html`<input
                       type="text"
-                      value=${firstFoundInstantiatedElement[key]}
+                      .value=${firstFoundInstantiatedElement[key] || ''}
                       @input="${(eventArg: any) => {
                         firstFoundInstantiatedElement[key] = eventArg.target.value;
                       }}"
@@ -378,14 +378,15 @@ export class WccProperties extends DeesElement {
                   case 'Number':
                     return html`<input
                       type="number"
-                      value=${firstFoundInstantiatedElement[key]}
+                      .value=${firstFoundInstantiatedElement[key] ?? ''}
                       @input="${(eventArg: any) => {
-                        firstFoundInstantiatedElement[key] = eventArg.target.value;
+                        firstFoundInstantiatedElement[key] = parseFloat(eventArg.target.value) || 0;
                       }}"
                     />`;
                   case 'Enum':
                     const enumValues: any[] = getEnumValues(property);
                     return html`<select
+                      .value=${firstFoundInstantiatedElement[key] || ''}
                       @change="${(eventArg: any) => {
                         firstFoundInstantiatedElement[key] = eventArg.target.value;
                       }}"
@@ -393,8 +394,7 @@ export class WccProperties extends DeesElement {
                       ${enumValues.map((valueArg) => {
                         return html`
                           <option
-                            ?selected=${valueArg === firstFoundInstantiatedElement[key] ? true : false}
-                            name="${valueArg}"
+                            value="${valueArg}"
                           >
                             ${valueArg}
                           </option>