feat(demo): add DeesDemoWrapper component for enhanced demo element handling

readme.hints.md

@@ -21,4 +21,31 @@ The properties panel had timing issues detecting rendered elements because:
 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
+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

readme.plan.md

@@ -1,4 +1,4 @@
-# Fix Properties Panel Element Detection
+# Fix Properties Panel Element Detection (COMPLETED)
 
 To fix the element detection issue, reread CLAUDE.md first.
 
@@ -10,21 +10,32 @@ The properties panel has timing issues detecting rendered elements because:
 
 ## Implementation Plan
 
-### 1. Add proper synchronization
+### 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
+### 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
+### 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
+1. Modify `wcc-properties.ts` createProperties() method ✅
-2. Add element search utility function
+2. Add element search utility function ✅
-3. Improve error handling and user feedback
+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

ts_demotools/demotools.ts

@@ -0,0 +1,41 @@
+import { DeesElement, customElement, html, css, property, type TemplateResult } from '@design.estate/dees-element';
+
+@customElement('dees-demowrapper')
+export class DeesDemoWrapper extends DeesElement {
+  @property({ attribute: false })
+  public runAfterRender: (element: HTMLElement) => void | Promise<void>;
+
+  public static styles = [
+    css`
+      :host {
+        display: contents;
+      }
+    `
+  ];
+
+  public render(): TemplateResult {
+    return html`
+      <slot></slot>
+    `;
+  }
+
+  public async firstUpdated() {
+    await this.updateComplete;
+    
+    // Wait a bit for slotted content to render
+    await new Promise(resolve => setTimeout(resolve, 50));
+    
+    // Find the first element child (excluding text nodes)
+    const slottedElements = this.children;
+    if (slottedElements.length > 0 && this.runAfterRender) {
+      const firstElement = slottedElements[0] as HTMLElement;
+      
+      // Call the runAfterRender function with the element
+      try {
+        await this.runAfterRender(firstElement);
+      } catch (error) {
+        console.error('Error in runAfterRender:', error);
+      }
+    }
+  }
+}

ts_demotools/index.ts

@@ -0,0 +1 @@
+export * from './demotools.js';

ts_demotools/plugins.ts

@@ -1 +1,5 @@
-import {} from '@design.estate/dees-element';
+import * as deesElement from '@design.estate/dees-element';
+
+export {
+  deesElement
+};

ts_demotools/tspublish.json

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

ts_web/tspublish.json

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