dees-wcctools/readme.plan.md

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