1.0.95

.gitlab-ci.yml

@@ -1,128 +0,0 @@
-# gitzone ci_default
-image: registry.gitlab.com/hosttoday/ht-docker-node:npmci
-
-cache:
-  paths:
-    - .npmci_cache/
-  key: '$CI_BUILD_STAGE'
-
-stages:
-  - security
-  - test
-  - release
-  - metadata
-
-before_script:
-  - pnpm install -g pnpm
-  - pnpm install -g @shipzone/npmci
-  - npmci npm prepare
-
-# ====================
-# security stage
-# ====================
-# ====================
-# security stage
-# ====================
-auditProductionDependencies:
-  image: registry.gitlab.com/hosttoday/ht-docker-node:npmci
-  stage: security
-  script:
-     - npmci command npm config set registry https://registry.npmjs.org
-     - npmci command pnpm audit --audit-level=high --prod
-  tags:
-    - lossless
-    - docker
-  allow_failure: true
-
-auditDevDependencies:
-  image: registry.gitlab.com/hosttoday/ht-docker-node:npmci
-  stage: security
-  script:
-    - npmci command npm config set registry https://registry.npmjs.org
-    - npmci command pnpm audit --audit-level=high --dev
-  tags:
-    - lossless
-    - docker
-  allow_failure: true
-
-# ====================
-# test stage
-# ====================
-
-testStable:
-  stage: test
-  script:
-    - npmci node install stable
-    - npmci npm install
-    - npmci npm test
-  coverage: /\d+.?\d+?\%\s*coverage/
-  tags:
-    - docker
-
-testBuild:
-  stage: test
-  script:
-    - npmci node install stable
-    - npmci npm install
-    - npmci npm build
-  coverage: /\d+.?\d+?\%\s*coverage/
-  tags:
-    - docker
-
-release:
-  stage: release
-  script:
-    - npmci node install stable
-    - npmci npm publish
-  only:
-    - tags
-  tags:
-    - lossless
-    - docker
-    - notpriv
-
-# ====================
-# metadata stage
-# ====================
-codequality:
-  stage: metadata
-  allow_failure: true
-  only:
-    - tags
-  script:
-    - npmci command npm install -g typescript
-    - npmci npm prepare
-    - npmci npm install
-  tags:
-    - lossless
-    - docker
-    - priv
-
-trigger:
-  stage: metadata
-  script:
-    - npmci trigger
-  only:
-    - tags
-  tags:
-    - lossless
-    - docker
-    - notpriv
-
-pages:
-  stage: metadata
-  script:
-    - npmci node install stable
-    - npmci npm install
-    - npmci command npm run buildDocs
-  tags:
-    - lossless
-    - docker
-    - notpriv
-  only:
-    - tags
-  artifacts:
-    expire_in: 1 week
-    paths:
-      - public
-  allow_failure: true

package.json

@@ -1,14 +1,16 @@
 {
   "name": "@design.estate/dees-wcctools",
-  "version": "1.0.88",
+  "version": "1.0.95",
   "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 element --web --allowimplicitany && tsbundle element)",
+    "build": "(tsbuild tsfolders --allowimplicitany && tsbundle element)",
     "watch": "tswatch element",
     "buildDocs": "tsdoc"
   },
@@ -54,5 +56,6 @@
     "design system",
     "element testing",
     "page development"
-  ]
+  ],
+  "packageManager": "pnpm@10.11.0+sha512.6540583f41cc5f628eb3d9773ecee802f4f9ef9923cc45b69890fb47991d4b092964694ec3a4f738a420c918a333062c8b925d312f42e4f0c263eb603551f977"
 }

readme.hints.md

@@ -1 +1,66 @@
+# 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 * as demoTools from '@design.estate/dees-wcctools/demotools';
+
+// In your demo function:
+demo: () => html`
+  <dees-demowrapper .runAfterRender=${(wrapper) => {
+    // Use querySelector for specific elements
+    const myElement = wrapper.querySelector('my-custom-element');
+    myElement?.setAttribute('data-demo', 'true');
+    
+    // Access all children
+    console.log('All children:', wrapper.children);
+    
+    // Use querySelectorAll for multiple elements
+    wrapper.querySelectorAll('div').forEach(div => {
+      console.log('Found div:', div);
+    });
+    
+    // Full DOM API available
+    const firstChild = wrapper.firstElementChild;
+    const hasClass = wrapper.querySelector('.my-class');
+  }}>
+    <my-custom-element></my-custom-element>
+    <div>Additional content</div>
+  </dees-demowrapper>
+`
+```
+
+**Features:**
+- Wraps demo elements without affecting layout (uses `display: contents`)
+- Provides the wrapper element itself with full DOM API access
+- Use querySelector/querySelectorAll for powerful element selection
+- Access children via wrapper.children property
+- Supports async operations in runAfterRender callback
+- Automatically handles timing to ensure elements are fully rendered

readme.md

@@ -1,101 +1,376 @@
 # @design.estate/dees-wcctools
-wcc tools for creating element catalogues
+Web Component Development Tools - A powerful framework for building, testing, and documenting web components
 
-## Install
-To install `@design.estate/dees-wcctools`, you can use npm:
+## Overview
+`@design.estate/dees-wcctools` provides a comprehensive development environment for web components, featuring:
+- 🎨 Interactive component catalogue with live preview
+- 🔧 Real-time property editing
+- 🌓 Theme switching (light/dark modes)
+- 📱 Responsive viewport testing
+- 🧪 Advanced demo tools for component testing
+- 🚀 Zero-config setup with TypeScript and Lit support
+
+## Installation
 
 ```bash
-npm install @design.estate/dees-wcctools --save
+# Using npm
+npm install @design.estate/dees-wcctools --save-dev
+
+# Using pnpm (recommended)
+pnpm add -D @design.estate/dees-wcctools
 ```
 
-## Usage
-The `@design.estate/dees-wcctools` package provides a set of tools for creating element catalogues using Web Components. It leverages LitElement for creating custom elements and provides a structured way to showcase and test these elements in various environments and themes.
+## Quick Start
 
-### Setting Up
-First, ensure that your project is set up to use TypeScript and ESM syntax. This guide assumes you have a basic understanding of TypeScript and modern JavaScript development practices.
-
-Start by importing the necessary tools from `@design.estate/dees-wcctools` in your main TypeScript file. 
+### 1. Create Your Component
 
 ```typescript
+import { DeesElement, customElement, html, css, property } from '@design.estate/dees-element';
+
+@customElement('my-button')
+export class MyButton extends DeesElement {
+  // Define a demo for the catalogue
+  public static demo = () => html`
+    <my-button .label=${'Click me!'} .variant=${'primary'}></my-button>
+  `;
+
+  @property({ type: String })
+  public label: string = 'Button';
+
+  @property({ type: String })
+  public variant: 'primary' | 'secondary' = 'primary';
+
+  public static styles = [
+    css`
+      :host {
+        display: inline-block;
+      }
+      button {
+        padding: 8px 16px;
+        border-radius: 4px;
+        border: none;
+        font-size: 14px;
+        cursor: pointer;
+        transition: all 0.3s;
+      }
+      button.primary {
+        background: #007bff;
+        color: white;
+      }
+      button.secondary {
+        background: #6c757d;
+        color: white;
+      }
+      button:hover {
+        opacity: 0.9;
+      }
+    `
+  ];
+
+  public render() {
+    return html`
+      <button class="${this.variant}">
+        ${this.label}
+      </button>
+    `;
+  }
+}
+```
+
+### 2. Set Up Your Catalogue
+
+```typescript
+// catalogue.ts
 import { setupWccTools } from '@design.estate/dees-wcctools';
+import { html } from 'lit';
+
+// Import your components
+import './components/my-button.js';
+import './components/my-card.js';
+
+// Define elements for the catalogue
+const elements = {
+  'my-button': MyButton,
+  'my-card': MyCard,
+};
+
+// Optionally define pages
+const pages = {
+  'home': () => html`
+    <div style="padding: 20px;">
+      <h1>Welcome to My Component Library</h1>
+      <p>Browse components using the sidebar.</p>
+    </div>
+  `,
+  'getting-started': () => html`
+    <div style="padding: 20px;">
+      <h2>Getting Started</h2>
+      <p>Installation and usage instructions...</p>
+    </div>
+  `,
+};
+
+// Initialize the catalogue
+setupWccTools(elements, pages);
 ```
 
-### Defining Custom Elements
-Define your custom elements using LitElement. Here's a simple example of an element:
+### 3. Create an HTML Entry Point
+
+```html
+<!DOCTYPE html>
+<html>
+<head>
+  <title>Component Catalogue</title>
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+</head>
+<body style="margin: 0; padding: 0;">
+  <script type="module" src="./catalogue.js"></script>
+</body>
+</html>
+```
+
+## Features
+
+### 🎯 Live Property Editing
+The properties panel automatically detects and allows editing of:
+- **String** properties with text inputs
+- **Number** properties with number inputs
+- **Boolean** properties with checkboxes
+- **Enum** properties with select dropdowns
+- **Object** and **Array** properties (read-only display)
+
+### 📱 Viewport Testing
+Test your components across different screen sizes:
+- **Phone** (320px width)
+- **Phablet** (600px width)
+- **Tablet** (768px width)
+- **Desktop** (full width)
+
+### 🌓 Theme Support
+Components automatically adapt to light/dark themes using the `goBright` property:
 
 ```typescript
-import { LitElement, html, customElement } from 'lit';
+public render() {
+  return html`
+    <div class="${this.goBright ? 'light-theme' : 'dark-theme'}">
+      <!-- Your component content -->
+    </div>
+  `;
+}
+```
 
-@customElement('my-element')
-class MyElement extends LitElement {
-  render() {
-    return html`<p>Hello, world!</p>`;
+Or use CSS custom properties:
+```typescript
+import { cssManager } from '@design.estate/dees-element';
+
+public static styles = [
+  css`
+    :host {
+      color: ${cssManager.bdTheme('#000', '#fff')};
+      background: ${cssManager.bdTheme('#fff', '#000')};
+    }
+  `
+];
+```
+
+### 🧪 Advanced Demo Tools
+
+The demo tools provide enhanced testing capabilities:
+
+```typescript
+import * as demoTools from '@design.estate/dees-wcctools/demotools';
+
+@customElement('my-component')
+export class MyComponent extends DeesElement {
+  public static demo = () => html`
+    <dees-demowrapper .runAfterRender=${async (wrapper) => {
+      // Use querySelector to find specific elements
+      const myComponent = wrapper.querySelector('my-component') as MyComponent;
+      console.log('Component found:', myComponent);
+      
+      // Access all children via wrapper.children
+      console.log('Total children:', wrapper.children.length);
+      
+      // Use querySelectorAll for multiple elements
+      const allDivs = wrapper.querySelectorAll('div');
+      console.log('Found divs:', allDivs.length);
+      
+      // Simulate user interactions
+      myComponent.value = 'Test value';
+      await myComponent.updateComplete;
+      
+      // Work with all children
+      Array.from(wrapper.children).forEach((child, index) => {
+        console.log(`Child ${index}:`, child.tagName);
+      });
+    }}>
+      <my-component></my-component>
+      <div>Additional content</div>
+    </dees-demowrapper>
+  `;
+}
+```
+
+### 🎭 Container Queries Support
+
+Components can respond to their container size:
+
+```typescript
+public static styles = [
+  css`
+    @container wccToolsViewport (min-width: 768px) {
+      :host {
+        flex-direction: row;
+      }
+    }
+    
+    @container wccToolsViewport (max-width: 767px) {
+      :host {
+        flex-direction: column;
+      }
+    }
+  `
+];
+```
+
+## Component Guidelines
+
+### Required for Catalogue Display
+1. Components must expose a static `demo` property returning a Lit template
+2. Use `@property()` decorators for properties you want to be editable
+3. Export component classes for proper detection
+
+### Best Practices
+```typescript
+@customElement('best-practice-component')
+export class BestPracticeComponent extends DeesElement {
+  // ✅ Static demo property
+  public static demo = () => html`
+    <best-practice-component 
+      .complexProp=${{ key: 'value' }}
+      simpleAttribute="test"
+    ></best-practice-component>
+  `;
+
+  // ✅ Typed properties with defaults
+  @property({ type: String })
+  public title: string = 'Default Title';
+
+  // ✅ Complex property without attribute
+  @property({ attribute: false })
+  public complexProp: { key: string } = { key: 'default' };
+
+  // ✅ Enum with proper typing
+  @property({ type: String })
+  public variant: 'small' | 'medium' | 'large' = 'medium';
+}
+```
+
+## URL Routing
+
+The catalogue uses URL routing for deep linking:
+```
+/wcctools-route/:type/:name/:viewport/:theme
+
+Example:
+/wcctools-route/element/my-button/desktop/dark
+/wcctools-route/page/home/tablet/bright
+```
+
+## Development Workflow
+
+### Build and Watch
+```json
+{
+  "scripts": {
+    "build": "tsbuild tsfolders --allowimplicitany && tsbundle element",
+    "watch": "tswatch element",
+    "serve": "http-server ./dist"
   }
 }
 ```
 
-### Bootstrapping the WCCTools Dashboard
-To showcase your elements, `@design.estate/dees-wcctools` provides a handy way to bootstrap a dashboard where your elements can be registered and displayed.
-
-Create a bootstrap function in your main file or a separate module:
-
-```typescript
-async function bootstrapWCCTools() {
-  // Define your elements here
-  const elements = {
-    'my-element': MyElement, // Assuming MyElement is imported
-  };
-
-  // Optionally, define pages as functions returning Lit HTML Templates
-  const pages = {
-    home: () => html`<h1>Welcome to My Element Catalogue</h1>`,
-  };
-
-  // Setup the WCCTools dashboard
-  setupWccTools(elements, pages);
-}
+### Project Structure
+```
+my-components/
+├── src/
+│   ├── components/
+│   │   ├── my-button.ts
+│   │   └── my-card.ts
+│   └── catalogue.ts
+├── dist/
+├── index.html
+└── package.json
 ```
 
-Call this function to initialize your catalogue:
+## Advanced Features
+
+### Custom Property Handlers
+For complex property types, implement custom logic in your demo:
 
 ```typescript
-bootstrapWCCTools();
+public static demo = () => html`
+  <dees-demowrapper .runAfterRender=${(wrapper) => {
+    // Use querySelector to target specific elements
+    const component = wrapper.querySelector('my-component');
+    if (component) {
+      component.addEventListener('property-change', (e) => {
+        console.log('Property changed:', e.detail);
+      });
+    }
+    
+    // Or handle all elements of a type
+    wrapper.querySelectorAll('my-component').forEach(el => {
+      el.addEventListener('click', () => console.log('Clicked!'));
+    });
+  }}>
+    <my-component></my-component>
+  </dees-demowrapper>
+`;
 ```
 
-### Configurations and Customizations
-The `setupWccTools` function accepts two arguments: `elements` and `pages`. 
-
-- `elements`: An object where keys are element tags (e.g., 'my-element') and values are the corresponding class definitions.
-- `pages`: An optional object where keys are page identifiers and values are functions returning Lit HTML templates.
-
-### Testing Elements
-Once the dashboard is set up, navigate to your project in a web browser. You'll see a sidebar listing all registered elements and pages. Clicking on an element name will display it in the main view, allowing you to interact with it and see it in action.
-
-### Theme and Environment Testing
-The dashboard also provides options for testing your elements in different environments (e.g., desktop, tablet) and themes (light or dark). This helps ensure that your elements are versatile and adaptable to varying conditions.
-
-### Expanding Your Catalogue
-To add more elements to your catalogue, simply extend the `elements` object and rerun `bootstrapWCCTools()`. This modular approach makes it easy to maintain and expand your element catalogue.
-
-### Leveraging TypeScript
-Using TypeScript allows you to enforce typing and build more reliable web components. Define properties with decorators, and use TypeScript's features to enhance your component development process.
-
+### Responsive Testing Helpers
 ```typescript
-import { LitElement, property, html, customElement } from 'lit';
+import * as domtools from '@design.estate/dees-domtools';
 
-@customElement('typed-element')
-class TypedElement extends LitElement {
-  @property({type: String})
-  name: string = 'World';
+public static styles = [
+  // Media query helpers
+  domtools.breakpoints.cssForPhone(css`
+    :host { font-size: 14px; }
+  `),
   
-  render() {
-    return html`<p>Hello, ${this.name}!</p>`;
-  }
-}
+  domtools.breakpoints.cssForTablet(css`
+    :host { font-size: 16px; }
+  `),
+  
+  domtools.breakpoints.cssForDesktop(css`
+    :host { font-size: 18px; }
+  `)
+];
 ```
 
-### Conclusion
-`@design.estate/dees-wcctools` provides a powerful, flexible platform for developing, showcasing, and testing web components. By leveraging modern development practices like TypeScript and LitElement, you can build a robust catalogue of reusable web components ready for any project.
+## API Reference
+
+### setupWccTools(elements, pages?)
+Initialize the WCC Tools dashboard.
+
+- `elements`: Object mapping element names to element classes
+- `pages`: Optional object mapping page names to template functions
+
+### DeesDemoWrapper
+Component for wrapping demos with post-render logic.
+
+- `runAfterRender`: Function called after the wrapped elements render
+- Receives the wrapper element itself, providing full DOM API access
+- Use `wrapper.querySelector()` and `wrapper.querySelectorAll()` for element selection
+- Access children via `wrapper.children` property
+- Supports async operations
+
+## Browser Support
+- Chrome/Edge (latest)
+- Firefox (latest)
+- Safari (latest)
+- Mobile browsers with Web Components support
 
 ## License and Legal Information
 

readme.plan.md

@@ -0,0 +1,64 @@
+# 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 ALL slotted elements as HTMLCollection
+- 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 (lowercase)
+
+# Documentation Update (COMPLETED)
+
+## Updated readme.md with:
+- Comprehensive overview with feature highlights
+- Quick start guide with code examples
+- Detailed feature documentation
+- Advanced demo tools usage
+- Best practices and guidelines
+- API reference
+- Browser support information
+- Complete examples for all major features
+
+# Enhanced DemoWrapper (COMPLETED)
+
+## Modified runAfterRender callback:
+- Now receives the wrapper element itself instead of just children
+- Provides full DOM API access (querySelector, querySelectorAll, etc.)
+- querySelector works on slotted content (light DOM children)
+- Access children via wrapper.children property
+- Updated documentation with correct import path (lowercase 'demotools')
+- Examples show how to use querySelector for powerful element selection
+- Added clarifying comment about querySelector working on slotted content

ts_demotools/demotools.ts

@@ -0,0 +1,40 @@
+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: (wrapperElement: DeesDemoWrapper) => 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));
+    
+    // Check if there are slotted elements and runAfterRender is defined
+    if (this.children.length > 0 && this.runAfterRender) {
+      // Call the runAfterRender function with the wrapper element itself
+      // Note: querySelector/querySelectorAll will work on slotted content
+      // because slotted elements remain in the light DOM as children
+      try {
+        await this.runAfterRender(this);
+      } catch (error) {
+        console.error('Error in runAfterRender:', error);
+      }
+    }
+  }
+}

ts_demotools/index.ts

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

ts_demotools/plugins.ts

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

ts_demotools/tspublish.json

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

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.'
 }

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.');

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;

ts_web/tspublish.json

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