@design.estate/wcctools 5.1.0

package/ts_web/elements/wcc-properties.ts

@@ -0,0 +1,1089 @@
+import { DeesElement, property, html, customElement, type TemplateResult, state } from '@design.estate/dees-element';
+import { WccDashboard } from './wcc-dashboard.js';
+import { determinePropertyType, findElementInstance, type TPropertyType, type TTemplateFactory } from './wcctools.helpers.js';
+import './wcc-record-button.js';
+import './wcc-recording-panel.js';
+
+export type { TPropertyType } from './wcctools.helpers.js';
+
+export type TEnvironment = 'native' | 'desktop' | 'tablet' | 'phablet' | 'phone';
+export type TTheme = 'bright' | 'dark';
+
+let environment: TEnvironment = 'native';
+
+export const setEnvironment = (envArg) => {
+  environment = envArg;
+};
+
+@customElement('wcc-properties')
+export class WccProperties extends DeesElement {
+  @property({
+    type: WccDashboard
+  })
+  accessor dashboardRef: WccDashboard;
+
+  @property()
+  accessor selectedItem: TTemplateFactory | DeesElement;
+
+  @property()
+  accessor selectedViewport: TEnvironment = 'native';
+
+  @property()
+  accessor selectedTheme: TTheme = 'dark';
+
+  @property()
+  accessor warning: string = null;
+
+  @property()
+  accessor isNative: boolean = false;
+
+  @property({ type: Number })
+  accessor sidebarWidth: number = 200;
+
+  @state()
+  accessor propertyContent: TemplateResult[] = [];
+
+  @state()
+  accessor editingProperties: Array<{
+    id: string;
+    name: string;
+    value: any;
+    element: HTMLElement;
+    editorValue: string;
+    editorError: string;
+  }> = [];
+
+  // Recording coordination state
+  @state()
+  accessor showRecordingPanel: boolean = false;
+
+  @state()
+  accessor isRecording: boolean = false;
+
+  @state()
+  accessor recordingDuration: number = 0;
+
+  // Delayed hide for native mode transition
+  @state()
+  accessor isHidden: boolean = false;
+
+  public editorHeight: number = 300;
+
+  public render(): TemplateResult {
+    return html`
+      <style>
+        :host {
+          /* CSS Variables - Always dark theme */
+          --background: #0a0a0a;
+          --foreground: #e5e5e5;
+          --card: #0f0f0f;
+          --card-foreground: #f0f0f0;
+          --muted: #1a1a1a;
+          --muted-foreground: #666;
+          --accent: #222;
+          --accent-foreground: #fff;
+          --border: rgba(255, 255, 255, 0.06);
+          --input: #141414;
+          --primary: #3b82f6;
+          --primary-foreground: #fff;
+          --ring: #3b82f6;
+          --radius: 4px;
+          --radius-sm: 2px;
+          --radius-md: 4px;
+          --radius-lg: 6px;
+
+          /* Base styles */
+          font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', sans-serif;
+          box-sizing: border-box;
+          position: absolute;
+          left: ${this.sidebarWidth}px;
+          height: ${this.editingProperties.length > 0 ? 100 + this.editorHeight : 100}px;
+          bottom: 0px;
+          right: 0px;
+          overflow: hidden;
+          background: var(--background);
+          color: var(--foreground);
+          display: ${this.isHidden ? 'none' : 'block'};
+        }
+        .grid {
+          display: grid;
+          grid-template-columns: 1fr 150px 350px 100px;
+          height: 100%;
+        }
+        .properties {
+          background: transparent;
+          overflow-y: auto;
+          display: grid;
+          grid-template-columns: repeat(3, 1fr);
+          border-right: 1px solid var(--border);
+          align-content: start;
+        }
+
+        .material-symbols-outlined {
+          font-family: 'Material Symbols Outlined';
+          font-weight: normal;
+          font-style: normal;
+          font-size: 24px;  /* Preferred icon size */
+          display: inline-block;
+          line-height: 1;
+          text-transform: none;
+          letter-spacing: normal;
+          word-wrap: normal;
+          white-space: nowrap;
+          direction: ltr;
+          font-variation-settings: 'FILL' 1, 'wght' 400, 'GRAD' 0, 'opsz' 48;
+        }
+
+        .properties .property {
+          padding: 0.4rem;
+          background: transparent;
+          border-right: 1px solid var(--border);
+          border-bottom: 1px solid var(--border);
+          transition: all 0.15s ease;
+        }
+        
+        .properties .property:hover {
+          background: rgba(255, 255, 255, 0.02);
+        }
+        
+        .properties .property-label {
+          font-size: 0.65rem;
+          font-weight: 400;
+          color: #888;
+          margin-bottom: 0.2rem;
+          text-transform: capitalize;
+          white-space: nowrap;
+          overflow: hidden;
+          text-overflow: ellipsis;
+        }
+
+        .properties input[type="text"],
+        .properties input[type="number"],
+        .properties select {
+          display: block;
+          width: 100%;
+          padding: 0.25rem 0.4rem;
+          background: var(--input);
+          border: 1px solid transparent;
+          color: var(--foreground);
+          border-radius: var(--radius-sm);
+          font-size: 0.7rem;
+          transition: all 0.15s ease;
+          outline: none;
+        }
+        
+        .properties input[type="text"]:focus,
+        .properties input[type="number"]:focus,
+        .properties select:focus {
+          border-color: var(--primary);
+          background: rgba(59, 130, 246, 0.1);
+        }
+        
+        .properties input[type="checkbox"] {
+          width: 1rem;
+          height: 1rem;
+          cursor: pointer;
+          accent-color: var(--primary);
+        }
+        
+        .properties .editor-button {
+          padding: 0.25rem 0.5rem;
+          background: var(--input);
+          border: 1px solid transparent;
+          border-radius: var(--radius-sm);
+          color: var(--foreground);
+          font-size: 0.7rem;
+          cursor: pointer;
+          transition: all 0.15s ease;
+          text-align: center;
+        }
+        
+        .properties .editor-button:hover {
+          border-color: var(--primary);
+          background: rgba(59, 130, 246, 0.1);
+        }
+
+        .viewportSelector,
+        .themeSelector,
+        .shareSelector {
+          user-select: none;
+          background: transparent;
+          display: flex;
+          flex-direction: column;
+          border-right: 1px solid var(--border);
+        }
+        .selectorButtons2 {
+          display: grid;
+          grid-template-columns: repeat(2, minmax(0, 1fr));
+          flex: 1;
+        }
+        .selectorButtons4 {
+          display: grid;
+          grid-template-columns: repeat(4, minmax(0, 1fr));
+          flex: 1;
+        }
+        .selectorButtons5 {
+          display: grid;
+          grid-template-columns: repeat(5, minmax(0, 1fr));
+          flex: 1;
+        }
+        .selectorButtons1 {
+          display: grid;
+          grid-template-columns: minmax(0, 1fr);
+          flex: 1;
+        }
+        .button {
+          appearance: none;
+          margin: 0;
+          font-family: inherit;
+          line-height: 1.2;
+          display: flex;
+          flex-direction: column;
+          align-items: center;
+          justify-content: center;
+          padding: 0.5rem 0.25rem;
+          text-align: center;
+          background: transparent;
+          border: 1px solid var(--border);
+          transition: all 0.15s ease;
+          cursor: pointer;
+          font-size: 0.65rem;
+          gap: 0.2rem;
+          color: #999;
+        }
+        
+        .button:hover {
+          background: rgba(59, 130, 246, 0.05);
+          color: #bbb;
+        }
+
+        .button.selected {
+          background: rgba(59, 130, 246, 0.15);
+          color: var(--primary);
+          border-color: rgba(59, 130, 246, 0.3);
+        }
+
+        .button.selected:hover {
+          background: rgba(59, 130, 246, 0.2);
+        }
+
+        .button:focus-visible,
+        .properties .editor-button:focus-visible,
+        .editor-close-all:focus-visible {
+          outline: 2px solid var(--ring);
+          outline-offset: -2px;
+        }
+
+        .properties input:focus-visible,
+        .properties select:focus-visible {
+          outline: 2px solid var(--ring);
+          outline-offset: 1px;
+        }
+        
+        .button .material-symbols-outlined {
+          font-size: 18px;
+          font-variation-settings: 'FILL' 0, 'wght' 300;
+          min-width: 18px;
+          min-height: 18px;
+          display: inline-flex;
+          align-items: center;
+          justify-content: center;
+        }
+        
+        .button.selected .material-symbols-outlined {
+          font-variation-settings: 'FILL' 1, 'wght' 400;
+        }
+
+        .panelheading {
+          padding: 0.3rem 0.5rem;
+          font-weight: 500;
+          font-size: 0.65rem;
+          background: rgba(59, 130, 246, 0.03);
+          border-bottom: 1px solid var(--border);
+          color: #888;
+          text-transform: uppercase;
+          letter-spacing: 0.08em;
+        }
+        .docs {
+          display: flex;
+          align-items: center;
+          justify-content: center;
+          text-transform: uppercase;
+          background: transparent;
+          cursor: pointer;
+          font-size: 0.65rem;
+          font-weight: 500;
+          letter-spacing: 0.08em;
+          transition: all 0.15s ease;
+          color: #666;
+        }
+
+        .docs:hover {
+          background: rgba(59, 130, 246, 0.05);
+          color: #999;
+        }
+
+        .warning {
+          position: absolute;
+          background: rgba(20, 20, 20, 0.8);
+          color: #888;
+          top: 0.5rem;
+          bottom: 0.5rem;
+          left: 0.5rem;
+          right: calc(600px + 0.5rem);
+          display: flex;
+          align-items: center;
+          justify-content: center;
+          padding: 1.5rem;
+          font-size: 0.85rem;
+          border-radius: var(--radius-md);
+          border: 1px solid var(--border);
+          backdrop-filter: blur(8px);
+        }
+
+        .advanced-editor-container {
+          position: absolute;
+          left: 0;
+          right: 0;
+          top: 0;
+          height: ${this.editorHeight}px;
+          background: #050505;
+          border-bottom: 1px solid rgba(255, 255, 255, 0.1);
+          display: flex;
+          flex-direction: column;
+          transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+          box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.3), 0 2px 4px -1px rgba(0, 0, 0, 0.2);
+        }
+
+        .editor-header-bar {
+          padding: 0.5rem 0.75rem;
+          background: transparent;
+          border-bottom: 1px solid rgba(255, 255, 255, 0.05);
+          display: flex;
+          justify-content: space-between;
+          align-items: center;
+          height: 36px;
+        }
+
+        .editor-header-title {
+          font-size: 0.7rem;
+          font-weight: 500;
+          color: #666;
+          text-transform: uppercase;
+          letter-spacing: 0.08em;
+        }
+
+        .editor-close-all {
+          padding: 0.25rem 0.5rem;
+          background: transparent;
+          border: 1px solid rgba(255, 255, 255, 0.08);
+          border-radius: var(--radius-sm);
+          color: #999;
+          font-size: 0.65rem;
+          font-weight: 500;
+          cursor: pointer;
+          transition: all 0.15s ease;
+        }
+
+        .editor-close-all:hover {
+          background: rgba(255, 255, 255, 0.05);
+          border-color: rgba(255, 255, 255, 0.12);
+          color: #f87171;
+        }
+
+        .editors-container {
+          flex: 1;
+          display: flex;
+          overflow-x: auto;
+          overflow-y: hidden;
+          gap: 0;
+          background: rgba(255, 255, 255, 0.02);
+          padding: 0.75rem;
+        }
+
+        .editors-container::-webkit-scrollbar {
+          height: 8px;
+        }
+
+        .editors-container::-webkit-scrollbar-track {
+          background: rgba(255, 255, 255, 0.02);
+          border-radius: 4px;
+        }
+
+        .editors-container::-webkit-scrollbar-thumb {
+          background: rgba(255, 255, 255, 0.08);
+          border-radius: 4px;
+        }
+
+        .editors-container::-webkit-scrollbar-thumb:hover {
+          background: rgba(255, 255, 255, 0.12);
+        }
+
+        .editor-instance {
+          min-width: 320px;
+          flex: 1;
+          max-width: 480px;
+          background: rgba(10, 10, 10, 0.6);
+          display: flex;
+          flex-direction: column;
+          border-radius: var(--radius);
+          overflow: hidden;
+          margin-right: 0.75rem;
+          border: 1px solid rgba(255, 255, 255, 0.06);
+          transition: all 0.2s ease;
+        }
+
+        .editor-instance:hover {
+          border-color: rgba(255, 255, 255, 0.1);
+        }
+
+        .editor-instance:last-child {
+          margin-right: 0;
+        }
+
+        .editor-header {
+          padding: 0.5rem 0.75rem;
+          background: rgba(255, 255, 255, 0.02);
+          border-bottom: 1px solid rgba(255, 255, 255, 0.05);
+          display: flex;
+          justify-content: space-between;
+          align-items: center;
+          height: 36px;
+        }
+
+        .editor-title {
+          font-size: 0.75rem;
+          font-weight: 500;
+          color: #999;
+          overflow: hidden;
+          text-overflow: ellipsis;
+          white-space: nowrap;
+          font-family: 'Consolas', 'Monaco', monospace;
+        }
+
+        .editor-actions {
+          display: flex;
+          gap: 0.25rem;
+        }
+
+        .editor-button {
+          width: 24px;
+          height: 24px;
+          padding: 0;
+          background: transparent;
+          border: none;
+          color: #666;
+          font-size: 1rem;
+          cursor: pointer;
+          transition: all 0.15s ease;
+          border-radius: var(--radius-sm);
+          display: flex;
+          align-items: center;
+          justify-content: center;
+        }
+
+        .editor-button:hover {
+          background: rgba(255, 255, 255, 0.05);
+          color: #999;
+        }
+
+        .editor-button.primary {
+          color: #4ade80;
+        }
+
+        .editor-button.primary:hover {
+          background: rgba(74, 222, 128, 0.1);
+        }
+
+        .editor-content {
+          flex: 1;
+          display: flex;
+          flex-direction: column;
+          overflow: hidden;
+          min-height: 0;
+          position: relative;
+        }
+
+        .editor-textarea {
+          width: 100%;
+          height: 100%;
+          background: transparent;
+          border: none;
+          color: #d0d0d0;
+          font-family: 'Consolas', 'Monaco', 'Courier New', monospace;
+          font-size: 0.8125rem;
+          line-height: 1.6;
+          padding: 0.75rem;
+          resize: none;
+          outline: none;
+          transition: all 0.15s ease;
+          overflow: auto;
+        }
+
+        .editor-textarea:focus {
+          background: rgba(255, 255, 255, 0.01);
+        }
+
+        .editor-textarea::selection {
+          background: rgba(59, 130, 246, 0.3);
+        }
+
+        .editor-error {
+          position: absolute;
+          bottom: 0;
+          left: 0;
+          right: 0;
+          padding: 0.5rem 0.75rem;
+          background: rgba(239, 68, 68, 0.9);
+          backdrop-filter: blur(4px);
+          color: #fff;
+          font-size: 0.7rem;
+          font-weight: 500;
+          display: flex;
+          align-items: center;
+          gap: 0.375rem;
+          border-top: 1px solid rgba(239, 68, 68, 0.5);
+        }
+
+        .editor-error::before {
+          content: '!';
+          display: inline-flex;
+          width: 16px;
+          height: 16px;
+          align-items: center;
+          justify-content: center;
+          background: rgba(255, 255, 255, 0.2);
+          border-radius: 50%;
+          font-size: 0.65rem;
+          font-weight: bold;
+        }
+
+        .main-content {
+          position: absolute;
+          left: 0;
+          right: 0;
+          bottom: 0;
+          height: 100px;
+        }
+
+        @container wccDashboard (max-width: 600px) {
+          :host {
+            left: 0;
+            height: ${this.editingProperties.length > 0 ? 160 + this.editorHeight : 160}px;
+          }
+
+          .main-content {
+            height: 160px;
+          }
+
+          .grid {
+            grid-template-columns: minmax(90px, 2fr) minmax(0, 5fr) minmax(52px, 1fr);
+            grid-template-rows: 60px 100px;
+          }
+
+          .properties {
+            grid-column: 1 / -1;
+            grid-row: 1;
+            display: flex;
+            overflow-x: auto;
+            overflow-y: hidden;
+            border-right: 0;
+            border-bottom: 1px solid var(--border);
+          }
+
+          .properties .property {
+            flex: 0 0 120px;
+            min-width: 0;
+          }
+
+          .themeSelector {
+            grid-column: 1;
+            grid-row: 2;
+          }
+
+          .viewportSelector {
+            grid-column: 2;
+            grid-row: 2;
+          }
+
+          .shareSelector {
+            grid-column: 3;
+            grid-row: 2;
+          }
+
+          .themeSelector,
+          .viewportSelector,
+          .shareSelector {
+            min-width: 0;
+          }
+
+          .button {
+            min-width: 0;
+            overflow: hidden;
+            padding: 0.25rem 0.1rem;
+            font-size: 0.55rem;
+          }
+
+          .panelheading {
+            overflow: hidden;
+            padding: 0.3rem 0.25rem;
+            text-overflow: ellipsis;
+            white-space: nowrap;
+          }
+
+          .warning {
+            top: 0.25rem;
+            right: 0.25rem;
+            bottom: calc(100px + 0.25rem);
+            left: 0.25rem;
+            padding: 0.5rem;
+          }
+        }
+      </style>
+      ${this.editingProperties.length > 0 ? html`
+        <div class="advanced-editor-container">
+          <div class="editor-header-bar">
+            <div class="editor-header-title">Property Editors</div>
+            <button class="editor-close-all" @click=${this.closeAllEditors}>
+              Close All
+            </button>
+          </div>
+          <div class="editors-container">
+            ${this.editingProperties.length === 0 ? html`
+              <div style="
+                flex: 1;
+                display: flex;
+                align-items: center;
+                justify-content: center;
+                color: #666;
+                font-size: 0.875rem;
+                text-align: center;
+                padding: 2rem;
+              ">
+                <div>
+                  <div style="margin-bottom: 0.5rem; font-size: 1.5rem; opacity: 0.5;">{ }</div>
+                  <div>No properties being edited</div>
+                  <div style="font-size: 0.75rem; margin-top: 0.25rem; opacity: 0.7;">Click "Edit Object/Array" buttons to start editing</div>
+                </div>
+              </div>
+            ` : null}
+            ${this.editingProperties.map(prop => html`
+              <div class="editor-instance">
+                <div class="editor-header">
+                  <div class="editor-title">${prop.name}</div>
+                  <div class="editor-actions">
+                    <button class="editor-button" @click=${() => this.handleEditorCancel(prop.id)}>✕</button>
+                    <button class="editor-button primary" @click=${() => this.handleEditorSave(prop.id)}>✓</button>
+                  </div>
+                </div>
+                <div class="editor-content">
+                  <textarea 
+                    class="editor-textarea"
+                    .value=${prop.editorValue}
+                    @input=${(e: InputEvent) => {
+                      const editor = this.editingProperties.find(p => p.id === prop.id);
+                      if (editor) {
+                        editor.editorValue = (e.target as HTMLTextAreaElement).value;
+                        editor.editorError = '';
+                        this.requestUpdate();
+                      }
+                    }}
+                    @keydown=${(e: KeyboardEvent) => {
+                      if (e.key === 'Tab') {
+                        e.preventDefault();
+                        const target = e.target as HTMLTextAreaElement;
+                        const start = target.selectionStart;
+                        const end = target.selectionEnd;
+                        const value = target.value;
+                        target.value = value.substring(0, start) + '  ' + value.substring(end);
+                        target.selectionStart = target.selectionEnd = start + 2;
+                      }
+                    }}
+                  ></textarea>
+                  ${prop.editorError ? html`
+                    <div class="editor-error">${prop.editorError}</div>
+                  ` : null}
+                </div>
+              </div>
+            `)}
+          </div>
+        </div>
+      ` : null}
+      <div class="main-content">
+        <div class="grid">
+          <div class="properties" role="group" aria-label="Properties">
+            ${this.propertyContent}
+          </div>
+          <div class="themeSelector" role="group" aria-labelledby="wcc-theme-heading">
+            <div class="panelheading" id="wcc-theme-heading">Theme</div>
+            <div class="selectorButtons2">
+              ${([
+                ['dark', 'Dark', 'brightness_3'],
+                ['bright', 'Bright', 'flare'],
+              ] as Array<[TTheme, string, string]>).map(([theme, label, icon]) => html`
+                <button
+                  type="button"
+                  class="button ${this.selectedTheme === theme ? 'selected' : ''}"
+                  aria-pressed=${this.selectedTheme === theme ? 'true' : 'false'}
+                  @click=${() => this.selectTheme(theme)}
+                >
+                  ${label}<i class="material-symbols-outlined" aria-hidden="true">${icon}</i>
+                </button>
+              `)}
+            </div>
+          </div>
+          <div class="viewportSelector" role="group" aria-labelledby="wcc-viewport-heading">
+            <div class="panelheading" id="wcc-viewport-heading">Viewport</div>
+            <div class="selectorButtons5">
+              ${([
+                ['phone', 'Phone', 'smartphone'],
+                ['phablet', 'Phablet', 'smartphone'],
+                ['tablet', 'Tablet', 'tablet'],
+                ['desktop', 'Desktop', 'desktop_windows'],
+                ['native', 'Native', 'fullscreen'],
+              ] as Array<[TEnvironment, string, string]>).map(([viewport, label, icon]) => html`
+                <button
+                  type="button"
+                  class="button ${this.selectedViewport === viewport ? 'selected' : ''}"
+                  aria-pressed=${this.selectedViewport === viewport ? 'true' : 'false'}
+                  @click=${() => this.selectViewport(viewport)}
+                >
+                  ${label}<i class="material-symbols-outlined" aria-hidden="true">${icon}</i>
+                </button>
+              `)}
+            </div>
+          </div>
+          <div class="shareSelector" role="group" aria-labelledby="wcc-share-heading">
+            <div class="panelheading" id="wcc-share-heading">Share</div>
+            <div class="selectorButtons1">
+              <button
+                type="button"
+                class="button ${this.isRecording ? 'selected' : ''}"
+                aria-expanded=${this.showRecordingPanel ? 'true' : 'false'}
+                @click=${() => this.handleRecordButtonClick()}
+              >
+                ${this.isRecording ? 'Stop' : 'Record'}<i class="material-symbols-outlined" aria-hidden="true">${this.isRecording ? 'stop_circle' : 'videocam'}</i>
+              </button>
+            </div>
+          </div>
+        </div>
+        ${this.warning ? html`<div class="warning">${this.warning}</div>` : null}
+      </div>
+
+      <!-- Recording Panel (options + preview) -->
+      ${this.showRecordingPanel ? html`
+        <wcc-recording-panel
+          .dashboardRef=${this.dashboardRef}
+          @recording-start=${() => { this.isRecording = true; }}
+          @recording-stop=${() => { this.isRecording = false; }}
+          @duration-update=${(e: CustomEvent) => { this.recordingDuration = e.detail.duration; }}
+          @close=${() => { this.showRecordingPanel = false; this.isRecording = false; this.recordingDuration = 0; }}
+        ></wcc-recording-panel>
+      ` : null}
+    `;
+  }
+
+  public async createProperties() {
+    // Clear any previous warnings
+    this.warning = null;
+    if (!this.selectedItem) {
+      this.propertyContent = [];
+      return;
+    }
+    const getEnumValues = (propertyArg): any[] => {
+      const enumValues: any[] = [];
+      Object.keys(propertyArg.type).forEach((valueArg: string) => {
+        enumValues.push(valueArg);
+      });
+      return enumValues;
+    };
+    if (this.selectedItem && (this.selectedItem as any).demo) {
+      const anonItem: any = this.selectedItem;
+      if (!anonItem) {
+        this.warning = 'no element selected';
+        return;
+      }
+      const wccFrame = await this.dashboardRef.wccFrame;
+      
+      // Wait for render to complete and any demo wrappers to run
+      await new Promise(resolve => setTimeout(resolve, 200));
+      
+      // Try to find the element with recursive search
+      const viewport = await wccFrame.getViewportElement();
+      let firstFoundInstantiatedElement: HTMLElement = findElementInstance(
+        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));
+        try {
+          firstFoundInstantiatedElement = findElementInstance(
+            viewport,
+            this.selectedItem as any
+          );
+        } catch (error) {
+          console.error('Error during element search retry:', error);
+        }
+        retries++;
+      }
+      
+      if (!firstFoundInstantiatedElement) {
+        this.warning = `no first instantiated element found for >>${anonItem.name}<< after ${retries} retries`;
+        this.propertyContent = [];
+        return;
+      }
+      const classProperties: Map<string, any> = anonItem.elementProperties;
+      if (!classProperties) {
+        this.warning = `selected element >>${anonItem.name}<< does not expose element properties`;
+        return;
+      }
+      this.warning = null;
+      const propertyArray: TemplateResult[] = [];
+      for (const [key, property] of classProperties) {
+        if (typeof key !== 'string' || key.startsWith('#') || key === 'goBright' || key === 'domtools') {
+          continue;
+        }
+        const propertyTypeString = determinePropertyType(property);
+        if (!propertyTypeString) {
+          continue;
+        }
+        propertyArray.push(
+          html`
+            <div class="property">
+              <div class="property-label">${key} (${propertyTypeString})</div>
+              ${(() => {
+                switch (propertyTypeString) {
+                  case 'Boolean':
+                    return html`<input
+                      aria-label=${key}
+                      type="checkbox"
+                      ?checked=${firstFoundInstantiatedElement[key]}
+                      @input="${(eventArg: any) => {
+                        firstFoundInstantiatedElement[key] = eventArg.target.checked;
+                      }}"
+                    />`;
+                  case 'String':
+                    return html`<input
+                      aria-label=${key}
+                      type="text"
+                      .value=${firstFoundInstantiatedElement[key] || ''}
+                      @input="${(eventArg: any) => {
+                        firstFoundInstantiatedElement[key] = eventArg.target.value;
+                      }}"
+                    />`;
+                  case 'Number':
+                    return html`<input
+                      aria-label=${key}
+                      type="number"
+                      .value=${firstFoundInstantiatedElement[key] ?? ''}
+                      @input="${(eventArg: any) => {
+                        firstFoundInstantiatedElement[key] = parseFloat(eventArg.target.value) || 0;
+                      }}"
+                    />`;
+                  case 'Enum':
+                    const enumValues: any[] = getEnumValues(property);
+                    return html`<select
+                      aria-label=${key}
+                      .value=${firstFoundInstantiatedElement[key] || ''}
+                      @change="${(eventArg: any) => {
+                        firstFoundInstantiatedElement[key] = eventArg.target.value;
+                      }}"
+                    >
+                      ${enumValues.map((valueArg) => {
+                        return html`
+                          <option
+                            value="${valueArg}"
+                          >
+                            ${valueArg}
+                          </option>
+                        `;
+                      })}
+                    </select>`;
+                  case 'Object':
+                  case 'Array':
+                    return html`<button
+                      type="button"
+                      aria-label=${`Edit ${key}`}
+                      class="editor-button"
+                      style="width: 100%; margin-top: 0.25rem;"
+                      @click="${() => this.openAdvancedEditor(key, firstFoundInstantiatedElement[key], firstFoundInstantiatedElement)}"
+                    >
+                      Edit ${propertyTypeString}
+                    </button>`;
+                  default:
+                    return html`<div style="color: #666; font-size: 0.7rem;">Unsupported type</div>`;
+                }
+              })()}
+            </div>
+          `
+        );
+      }
+      this.propertyContent = propertyArray;
+    } else {
+      this.propertyContent = [];
+      this.warning = `You selected a page.`;
+      return null;
+    }
+  }
+
+  public selectTheme(themeArg: TTheme) {
+    this.selectedTheme = themeArg;
+    this.dispatchEvent(
+      new CustomEvent('selectedTheme', {
+        detail: themeArg,
+      })
+    );
+    this.dashboardRef.buildUrl();
+  }
+
+  protected updated(changedProperties: Map<string, unknown>) {
+    super.updated(changedProperties);
+
+    // Handle delayed hide for native mode transition
+    if (changedProperties.has('isNative')) {
+      if (this.isNative) {
+        // Delay hiding until frame animation completes
+        setTimeout(() => {
+          this.isHidden = true;
+        }, 300);
+      } else {
+        // Show immediately when exiting native mode
+        this.isHidden = false;
+      }
+    }
+
+    // Only recreate properties when selectedItem changes
+    if (changedProperties.has('selectedItem')) {
+      this.createProperties().catch(error => {
+        console.error('Error creating properties:', error);
+        this.propertyContent = [];
+      });
+    }
+  }
+
+  public selectViewport(viewport: TEnvironment) {
+    this.selectedViewport = viewport;
+    setEnvironment(viewport);
+    this.dispatchEvent(
+      new CustomEvent('selectedViewport', {
+        detail: viewport,
+      })
+    );
+    this.dashboardRef.buildUrl();
+  }
+
+  private openAdvancedEditor(propertyName: string, value: any, element: HTMLElement) {
+    // Check if this property is already being edited
+    const existingEditor = this.editingProperties.find(p => p.name === propertyName && p.element === element);
+    if (existingEditor) {
+      return; // Property is already open for editing
+    }
+
+    const newEditor = {
+      id: `${propertyName}-${Date.now()}`,
+      name: propertyName,
+      value: value,
+      element: element,
+      editorValue: JSON.stringify(value, null, 2),
+      editorError: ''
+    };
+
+    this.editingProperties = [...this.editingProperties, newEditor];
+    
+    // Notify parent to resize frame if this is the first editor
+    if (this.editingProperties.length === 1) {
+      this.dispatchEvent(
+        new CustomEvent('editorStateChanged', {
+          detail: { isOpen: true },
+          bubbles: true
+        })
+      );
+    }
+  }
+
+  private handleEditorSave(editorId: string) {
+    const editor = this.editingProperties.find(p => p.id === editorId);
+    if (!editor) return;
+
+    try {
+      const parsedValue = JSON.parse(editor.editorValue);
+      editor.element[editor.name] = parsedValue;
+      
+      // Remove this editor from the list
+      this.editingProperties = this.editingProperties.filter(p => p.id !== editorId);
+      
+      // If no more editors, notify parent to resize frame
+      if (this.editingProperties.length === 0) {
+        this.dispatchEvent(
+          new CustomEvent('editorStateChanged', {
+            detail: { isOpen: false },
+            bubbles: true
+          })
+        );
+      }
+      
+      // Refresh properties display
+      this.createProperties();
+    } catch (error) {
+      // Update error for this specific editor
+      const editorIndex = this.editingProperties.findIndex(p => p.id === editorId);
+      if (editorIndex !== -1) {
+        this.editingProperties[editorIndex].editorError = `Invalid JSON: ${error.message}`;
+        this.requestUpdate();
+      }
+    }
+  }
+
+  private handleEditorCancel(editorId: string) {
+    // Remove this editor from the list
+    this.editingProperties = this.editingProperties.filter(p => p.id !== editorId);
+    
+    // If no more editors, notify parent to resize frame
+    if (this.editingProperties.length === 0) {
+      this.dispatchEvent(
+        new CustomEvent('editorStateChanged', {
+          detail: { isOpen: false },
+          bubbles: true
+        })
+      );
+    }
+  }
+
+  private closeAllEditors() {
+    this.editingProperties = [];
+    
+    // Notify parent to resize frame back
+    this.dispatchEvent(
+      new CustomEvent('editorStateChanged', {
+        detail: { isOpen: false },
+        bubbles: true
+      })
+    );
+  }
+
+  private toggleNative() {
+    this.dispatchEvent(
+      new CustomEvent('toggleNative', {
+        bubbles: true
+      })
+    );
+  }
+
+  // ==================== Recording Methods ====================
+
+  private handleRecordButtonClick() {
+    if (this.isRecording) {
+      // Stop recording by calling the panel's stopRecording method
+      const panel = this.shadowRoot?.querySelector('wcc-recording-panel') as any;
+      if (panel && panel.stopRecording) {
+        panel.stopRecording();
+      }
+    } else {
+      // Toggle the recording panel
+      this.showRecordingPanel = !this.showRecordingPanel;
+    }
+  }
+}