fix(properties-panel): enhance element detection and error handling for nested structures

test/elements/test-edgecases.ts

@@ -0,0 +1,195 @@
+import {
+  DeesElement,
+  customElement,
+  type TemplateResult,
+  html,
+  property,
+  css,
+} from '@design.estate/dees-element';
+
+@customElement('test-edgecases')
+export class TestEdgeCases extends DeesElement {
+  public static demo = () => html`<test-edgecases></test-edgecases>`;
+
+  // Property with null value
+  @property({ type: String })
+  public nullableString: string | null = null;
+
+  // Property with undefined value
+  @property({ type: Number })
+  public undefinedNumber: number | undefined = undefined;
+
+  // Very long string
+  @property({ type: String })
+  public longString: string = 'Lorem ipsum '.repeat(50);
+
+  // Property with special characters
+  @property({ type: String })
+  public specialChars: string = '!@#$%^&*()_+-=[]{}|;\':",./<>?`~';
+
+  // Property that could cause rendering issues
+  @property({ type: String })
+  public htmlString: string = '<script>alert("test")</script><b>Bold text</b>';
+
+  // Numeric edge cases
+  @property({ type: Number })
+  public infinityNumber: number = Infinity;
+
+  @property({ type: Number })
+  public nanNumber: number = NaN;
+
+  @property({ type: Number })
+  public veryLargeNumber: number = Number.MAX_SAFE_INTEGER;
+
+  @property({ type: Number })
+  public verySmallNumber: number = Number.MIN_SAFE_INTEGER;
+
+  @property({ type: Number })
+  public floatNumber: number = 3.14159265359;
+
+  // Boolean-like values
+  @property({ type: String })
+  public booleanString: string = 'false';
+
+  @property({ type: Number })
+  public booleanNumber: number = 0;
+
+  // Empty values
+  @property({ type: String })
+  public emptyString: string = '';
+
+  @property({ type: Array })
+  public emptyArray: any[] = [];
+
+  @property({ type: Object })
+  public emptyObject: {} = {};
+
+  // Circular reference (should not break properties panel)
+  @property({ attribute: false })
+  public circularRef: any = (() => {
+    const obj: any = { name: 'circular' };
+    obj.self = obj;
+    return obj;
+  })();
+
+  public static styles = [
+    css`
+      :host {
+        display: block;
+        padding: 20px;
+        background: #fff3e0;
+        border: 2px solid #ff9800;
+        border-radius: 8px;
+        font-family: monospace;
+        font-size: 12px;
+      }
+      .warning {
+        background: #ffe0b2;
+        padding: 10px;
+        border-radius: 4px;
+        margin-bottom: 10px;
+        color: #e65100;
+      }
+      .property {
+        margin: 5px 0;
+        padding: 5px;
+        background: white;
+        border-radius: 2px;
+        word-break: break-all;
+      }
+      .label {
+        font-weight: bold;
+        color: #f57c00;
+      }
+      .value {
+        color: #666;
+      }
+      .special {
+        background: #ffccbc;
+        padding: 2px 4px;
+        border-radius: 2px;
+      }
+    `
+  ];
+
+  private formatValue(value: any): string {
+    if (value === null) return 'null';
+    if (value === undefined) return 'undefined';
+    if (value === Infinity) return 'Infinity';
+    if (Number.isNaN(value)) return 'NaN';
+    if (typeof value === 'string' && value.length > 50) {
+      return value.substring(0, 50) + '...';
+    }
+    if (typeof value === 'object') {
+      try {
+        return JSON.stringify(value);
+      } catch (e) {
+        return '[Circular Reference]';
+      }
+    }
+    return String(value);
+  }
+
+  public render() {
+    return html`
+      <div class="warning">
+        ⚠️ This element tests edge cases and problematic values
+      </div>
+      
+      <div class="property">
+        <span class="label">Nullable String:</span>
+        <span class="value special">${this.formatValue(this.nullableString)}</span>
+      </div>
+      
+      <div class="property">
+        <span class="label">Undefined Number:</span>
+        <span class="value special">${this.formatValue(this.undefinedNumber)}</span>
+      </div>
+      
+      <div class="property">
+        <span class="label">Long String:</span>
+        <span class="value">${this.formatValue(this.longString)}</span>
+      </div>
+      
+      <div class="property">
+        <span class="label">Special Characters:</span>
+        <span class="value">${this.specialChars}</span>
+      </div>
+      
+      <div class="property">
+        <span class="label">HTML String (escaped):</span>
+        <span class="value">${this.htmlString}</span>
+      </div>
+      
+      <div class="property">
+        <span class="label">Infinity:</span>
+        <span class="value special">${this.formatValue(this.infinityNumber)}</span>
+      </div>
+      
+      <div class="property">
+        <span class="label">NaN:</span>
+        <span class="value special">${this.formatValue(this.nanNumber)}</span>
+      </div>
+      
+      <div class="property">
+        <span class="label">Very Large Number:</span>
+        <span class="value">${this.veryLargeNumber}</span>
+      </div>
+      
+      <div class="property">
+        <span class="label">Float Number:</span>
+        <span class="value">${this.floatNumber}</span>
+      </div>
+      
+      <div class="property">
+        <span class="label">Empty String:</span>
+        <span class="value special">[empty]</span>
+      </div>
+      
+      <div class="property">
+        <span class="label">Circular Reference:</span>
+        <span class="value special">${this.formatValue(this.circularRef)}</span>
+      </div>
+    `;
+  }
+}