@design.estate/dees-wcctools 1.0.88 → 1.0.91

package/package.json

@@ -1,11 +1,19 @@
 {
   "name": "@design.estate/dees-wcctools",
-  "version": "1.0.88",
+  "version": "1.0.91",
   "private": false,
   "description": "A set of web component tools for creating element catalogues, enabling the structured development and documentation of custom elements and pages.",
-  "main": "dist_ts_web/index.js",
-  "typings": "dist_ts_web/index.d.ts",
+  "exports": {
+    ".": "./dist_ts_web/index.js",
+    "./demoTools": "./dist_ts_demotools"
+  },
   "type": "module",
+  "scripts": {
+    "test": "(npm run build)",
+    "build": "(tsbuild tsfolders --allowimplicitany && tsbundle element)",
+    "watch": "tswatch element",
+    "buildDocs": "tsdoc"
+  },
   "author": "Lossless GmbH",
   "license": "UNLICENSED",
   "dependencies": {
@@ -49,10 +57,5 @@
     "element testing",
     "page development"
   ],
-  "scripts": {
-    "test": "(npm run build)",
-    "build": "(tsbuild element --web --allowimplicitany && tsbundle element)",
-    "watch": "tswatch element",
-    "buildDocs": "tsdoc"
-  }
-}
+  "packageManager": "pnpm@10.11.0+sha512.6540583f41cc5f628eb3d9773ecee802f4f9ef9923cc45b69890fb47991d4b092964694ec3a4f738a420c918a333062c8b925d312f42e4f0c263eb603551f977"
+}

package/readme.hints.md

@@ -1 +1,51 @@
- 
+# Project Hints and Findings
+
+## Properties Panel Element Detection Issue (Fixed)
+
+### Problem
+The properties panel had timing issues detecting rendered elements because:
+1. Elements are rendered asynchronously via lit's `render()` function in the dashboard component
+2. The properties panel tried to find elements immediately without waiting for render completion
+3. Element search only looked at direct children of the viewport, missing nested elements or those inside shadow DOM
+
+### Solution Implemented
+1. Added a 100ms initial delay to allow render completion
+2. Implemented recursive element search that:
+   - Searches through nested children up to 5 levels deep
+   - Checks shadow roots of elements
+   - Handles complex DOM structures
+3. Added retry mechanism with up to 5 attempts (200ms between retries)
+4. Improved error messages to show retry count
+
+### 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
+
+## Demo Tools
+
+### DeesDemoWrapper Component
+A utility component for wrapping demo elements with post-render functionality.
+
+**Usage:**
+```typescript
+import { DeesDemoWrapper } from '@design.estate/dees-wcctools/demoTools';
+
+// In your demo function:
+demo: () => html`
+  <dees-demowrapper .runAfterRender=${(element) => {
+    // Do something with the rendered element
+    element.setAttribute('data-demo', 'true');
+    console.log('Element rendered:', element);
+  }}>
+    <my-custom-element></my-custom-element>
+  </dees-demowrapper>
+`
+```
+
+**Features:**
+- Wraps demo elements without affecting layout (uses `display: contents`)
+- Provides access to the rendered element instance after mounting
+- Supports async operations in runAfterRender callback
+- Automatically handles timing to ensure element is fully rendered

package/readme.plan.md

@@ -0,0 +1,41 @@
+# Fix Properties Panel Element Detection (COMPLETED)
+
+To fix the element detection issue, reread CLAUDE.md first.
+
+## Problem Analysis
+The properties panel has timing issues detecting rendered elements because:
+1. Elements are rendered asynchronously via lit's `render()` in the dashboard
+2. Properties panel tries to find elements immediately without waiting for render completion
+3. Element search only looks at direct children, missing nested/shadow DOM elements
+
+## Implementation Plan
+
+### 1. Add proper synchronization ✅
+- Add a delay or await render completion before element detection
+- Use MutationObserver or lit's updateComplete promises
+
+### 2. Improve element search algorithm ✅
+- Search recursively through all descendants, not just direct children
+- Handle shadow DOM boundaries properly
+- Support elements wrapped in containers
+
+### 3. Add retry mechanism ✅
+- If element not found, retry after a delay
+- Add maximum retry attempts to prevent infinite loops
+- Clear error state when element is eventually found
+
+## Code Changes Required
+1. Modify `wcc-properties.ts` createProperties() method ✅
+2. Add element search utility function ✅
+3. Improve error handling and user feedback ✅
+
+# Demo Wrapper Implementation (COMPLETED)
+
+## Created DeesDemoWrapper Component
+- Location: ts_demotools/demotools.ts
+- Allows wrapping demo elements with post-render functionality
+- Provides runAfterRender callback that receives the rendered element
+- Uses display: contents to not affect layout
+- Handles timing automatically with 50ms delay after firstUpdated
+- Supports both sync and async callbacks
+- Exports available at @design.estate/dees-wcctools/demoTools

package/ts_web/00_commitinfo_data.ts

@@ -3,6 +3,6 @@
  */
 export const commitinfo = {
   name: '@design.estate/dees-wcctools',
-  version: '1.0.88',
+  version: '1.0.90',
   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

@@ -76,7 +76,6 @@ export class WccDashboard extends DeesElement {
           this.selectedType = eventArg.detail;
         }}
         @selectedItemName=${(eventArg) => {
-          document.title = eventArg.detail;
           this.selectedItemName = eventArg.detail;
         }}
         @selectedItem=${(eventArg) => {
@@ -134,12 +133,16 @@ export class WccDashboard extends DeesElement {
     );
   }
 
-  public async updated() {
+  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')) {
+      document.title = this.selectedItemName;
+    };
+
     if (this.selectedType === 'page' && this.selectedItem) {
       if (typeof this.selectedItem === 'function') {
         console.log('slotting page.');

package/ts_web/elements/wcc-properties.ts

@@ -226,6 +226,31 @@ export class WccProperties extends DeesElement {
     `;
   }
 
+  private async findElementRecursively(container: Element, elementClass: any, maxDepth: number = 5): Promise<HTMLElement | null> {
+    if (maxDepth <= 0) return null;
+    
+    // Check direct children
+    for (const child of Array.from(container.children)) {
+      if (child instanceof elementClass) {
+        return child as HTMLElement;
+      }
+    }
+    
+    // Check shadow roots of children
+    for (const child of Array.from(container.children)) {
+      if (child.shadowRoot) {
+        const found = await this.findElementRecursively(child.shadowRoot as any, elementClass, maxDepth - 1);
+        if (found) return found;
+      }
+      
+      // Also check nested children
+      const found = await this.findElementRecursively(child, elementClass, maxDepth - 1);
+      if (found) return found;
+    }
+    
+    return null;
+  }
+
   public async createProperties() {
     console.log('creating properties for:');
     console.log(this.selectedItem);
@@ -275,15 +300,30 @@ export class WccProperties extends DeesElement {
       }
       console.log(anonItem.elementProperties);
       const wccFrame = await this.dashboardRef.wccFrame;
-      let firstFoundInstantiatedElement: HTMLElement;
-      for (const element of Array.from((await wccFrame.getViewportElement()).children)) {
-        if (element instanceof (this.selectedItem as any)) {
-          firstFoundInstantiatedElement = element as HTMLElement;
-          break;
-        }
+      
+      // Wait for render to complete
+      await new Promise(resolve => setTimeout(resolve, 100));
+      
+      // Try to find the element with recursive search
+      const viewport = await wccFrame.getViewportElement();
+      let firstFoundInstantiatedElement: HTMLElement = await this.findElementRecursively(
+        viewport, 
+        this.selectedItem as any
+      );
+      
+      // Retry logic if element not found
+      let retries = 0;
+      while (!firstFoundInstantiatedElement && retries < 5) {
+        await new Promise(resolve => setTimeout(resolve, 200));
+        firstFoundInstantiatedElement = await this.findElementRecursively(
+          viewport,
+          this.selectedItem as any
+        );
+        retries++;
       }
+      
       if (!firstFoundInstantiatedElement) {
-        this.warning = `no first instantiated element found for >>${anonItem.name}<<`;
+        this.warning = `no first instantiated element found for >>${anonItem.name}<< after ${retries} retries`;
         return;
       }
       const classProperties: Map<string, any> = anonItem.elementProperties;

package/ts_web/tspublish.json

@@ -0,0 +1,3 @@
+{
+  "order": 1
+}