@design.estate/dees-wcctools 1.2.1 → 2.0.0

package/ts_web/elements/wcc-dashboard.ts

@@ -1,5 +1,5 @@
 import { DeesElement, property, html, customElement, type TemplateResult, queryAsync, render, domtools } from '@design.estate/dees-element';
-import { resolveTemplateFactory } from './wcctools.helpers.js';
+import { resolveTemplateFactory, getDemoAtIndex, getDemoCount, hasMultipleDemos } from './wcctools.helpers.js';
 import type { TTemplateFactory } from './wcctools.helpers.js';
 
 import * as plugins from '../wcctools.plugins.js';
@@ -17,38 +17,41 @@ import { WccFrame } from './wcc-frame.js';
 export class WccDashboard extends DeesElement {
 
   @property()
-  public selectedType: TElementType;
+  accessor selectedType: TElementType;
 
   @property()
-  public selectedItemName: string;
+  accessor selectedItemName: string;
 
   @property()
-  public selectedItem: TTemplateFactory | DeesElement;
+  accessor selectedItem: TTemplateFactory | DeesElement;
+
+  @property({ type: Number })
+  accessor selectedDemoIndex: number = 0;
 
   @property()
-  public selectedViewport: plugins.deesDomtools.breakpoints.TViewport = 'desktop';
+  accessor selectedViewport: plugins.deesDomtools.breakpoints.TViewport = 'desktop';
 
   @property()
-  public selectedTheme: TTheme = 'dark';
+  accessor selectedTheme: TTheme = 'dark';
 
   @property()
-  public isFullscreen: boolean = false;
+  accessor isFullscreen: boolean = false;
 
   @property()
-  public pages: Record<string, TTemplateFactory> = {};
+  accessor pages: Record<string, TTemplateFactory> = {};
 
   @property()
-  public elements: { [key: string]: DeesElement } = {};
+  accessor elements: { [key: string]: DeesElement } = {};
 
   @property()
-  public warning: string = null;
+  accessor warning: string = null;
   
   private frameScrollY: number = 0;
   private sidebarScrollY: number = 0;
   private scrollPositionsApplied: boolean = false;
   
   @queryAsync('wcc-frame')
-  public wccFrame: Promise<WccFrame>;
+  accessor wccFrame: Promise<WccFrame>;
 
   constructor(
     elementsArg?: { [key: string]: DeesElement },
@@ -151,11 +154,53 @@ export class WccDashboard extends DeesElement {
       this.setupScrollListeners();
     }, 500);
     
+    // Route with demo index (new format)
+    this.domtools.router.on(
+      '/wcctools-route/:itemType/:itemName/:demoIndex/:viewport/:theme',
+      async (routeInfo) => {
+        this.selectedType = routeInfo.params.itemType as TElementType;
+        this.selectedItemName = routeInfo.params.itemName;
+        this.selectedDemoIndex = parseInt(routeInfo.params.demoIndex) || 0;
+        this.selectedViewport = routeInfo.params.viewport as breakpoints.TViewport;
+        this.selectedTheme = routeInfo.params.theme as TTheme;
+        if (routeInfo.params.itemType === 'element') {
+          this.selectedItem = this.elements[routeInfo.params.itemName];
+        } else if (routeInfo.params.itemType === 'page') {
+          this.selectedItem = this.pages[routeInfo.params.itemName];
+        }
+
+        // Restore scroll positions from query parameters
+        if (routeInfo.queryParams) {
+          const frameScrollY = routeInfo.queryParams.frameScrollY;
+          const sidebarScrollY = routeInfo.queryParams.sidebarScrollY;
+
+          if (frameScrollY) {
+            this.frameScrollY = parseInt(frameScrollY);
+          }
+          if (sidebarScrollY) {
+            this.sidebarScrollY = parseInt(sidebarScrollY);
+          }
+
+          // Apply scroll positions after a short delay to ensure DOM is ready
+          setTimeout(() => {
+            this.applyScrollPositions();
+          }, 100);
+        }
+
+        const domtoolsInstance = await plugins.deesDomtools.elementBasic.setup();
+        this.selectedTheme === 'bright'
+          ? domtoolsInstance.themeManager.goBright()
+          : domtoolsInstance.themeManager.goDark();
+      }
+    );
+
+    // Legacy route without demo index (for backwards compatibility)
     this.domtools.router.on(
       '/wcctools-route/:itemType/:itemName/:viewport/:theme',
       async (routeInfo) => {
         this.selectedType = routeInfo.params.itemType as TElementType;
         this.selectedItemName = routeInfo.params.itemName;
+        this.selectedDemoIndex = 0; // Default to first demo
         this.selectedViewport = routeInfo.params.viewport as breakpoints.TViewport;
         this.selectedTheme = routeInfo.params.theme as TTheme;
         if (routeInfo.params.itemType === 'element') {
@@ -163,25 +208,25 @@ export class WccDashboard extends DeesElement {
         } else if (routeInfo.params.itemType === 'page') {
           this.selectedItem = this.pages[routeInfo.params.itemName];
         }
-        
+
         // Restore scroll positions from query parameters
         if (routeInfo.queryParams) {
           const frameScrollY = routeInfo.queryParams.frameScrollY;
           const sidebarScrollY = routeInfo.queryParams.sidebarScrollY;
-          
+
           if (frameScrollY) {
             this.frameScrollY = parseInt(frameScrollY);
           }
           if (sidebarScrollY) {
             this.sidebarScrollY = parseInt(sidebarScrollY);
           }
-          
+
           // Apply scroll positions after a short delay to ensure DOM is ready
           setTimeout(() => {
             this.applyScrollPositions();
           }, 100);
         }
-        
+
         const domtoolsInstance = await plugins.deesDomtools.elementBasic.setup();
         this.selectedTheme === 'bright'
           ? domtoolsInstance.themeManager.goBright()
@@ -218,33 +263,48 @@ export class WccDashboard extends DeesElement {
         this.setWarning(`component ${anonItem.name} does not expose a demo property.`);
         return;
       }
-      if (!(typeof anonItem.demo === 'function')) {
+
+      // Support both single demo (function) and multiple demos (array)
+      const isArray = Array.isArray(anonItem.demo);
+      const isFunction = typeof anonItem.demo === 'function';
+
+      if (!isArray && !isFunction) {
         this.setWarning(
-          `component ${anonItem.name} has demo property, but it is not of type function`
+          `component ${anonItem.name} has demo property, but it is not a function or array of functions`
         );
         return;
       }
+
+      // Get the specific demo to render
+      const demoFactory = getDemoAtIndex(anonItem.demo, this.selectedDemoIndex);
+      if (!demoFactory) {
+        this.setWarning(
+          `component ${anonItem.name} does not have a demo at index ${this.selectedDemoIndex + 1}`
+        );
+        return;
+      }
+
       this.setWarning(null);
       const viewport = await wccFrame.getViewportElement();
-      const demoTemplate = await resolveTemplateFactory(() => anonItem.demo());
+      const demoTemplate = await resolveTemplateFactory(demoFactory);
       render(demoTemplate, viewport);
     }
   }
 
   public buildUrl() {
-    const baseUrl = `/wcctools-route/${this.selectedType}/${this.selectedItemName}/${this.selectedViewport}/${this.selectedTheme}`;
+    const baseUrl = `/wcctools-route/${this.selectedType}/${this.selectedItemName}/${this.selectedDemoIndex}/${this.selectedViewport}/${this.selectedTheme}`;
     const queryParams = new URLSearchParams();
-    
+
     if (this.frameScrollY > 0) {
       queryParams.set('frameScrollY', this.frameScrollY.toString());
     }
     if (this.sidebarScrollY > 0) {
       queryParams.set('sidebarScrollY', this.sidebarScrollY.toString());
     }
-    
+
     const queryString = queryParams.toString();
     const fullUrl = queryString ? `${baseUrl}?${queryString}` : baseUrl;
-    
+
     this.domtools.router.pushUrl(fullUrl);
   }
   
@@ -286,19 +346,19 @@ export class WccDashboard extends DeesElement {
   }
   
   private updateUrlWithScrollState() {
-    const baseUrl = `/wcctools-route/${this.selectedType}/${this.selectedItemName}/${this.selectedViewport}/${this.selectedTheme}`;
+    const baseUrl = `/wcctools-route/${this.selectedType}/${this.selectedItemName}/${this.selectedDemoIndex}/${this.selectedViewport}/${this.selectedTheme}`;
     const queryParams = new URLSearchParams();
-    
+
     if (this.frameScrollY > 0) {
       queryParams.set('frameScrollY', this.frameScrollY.toString());
     }
     if (this.sidebarScrollY > 0) {
       queryParams.set('sidebarScrollY', this.sidebarScrollY.toString());
     }
-    
+
     const queryString = queryParams.toString();
     const fullUrl = queryString ? `${baseUrl}?${queryString}` : baseUrl;
-    
+
     // Use replaceState to update URL without navigation
     window.history.replaceState(null, '', fullUrl);
   }

package/ts_web/elements/wcc-frame.ts

@@ -11,13 +11,13 @@ declare global {
 @customElement('wcc-frame')
 export class WccFrame extends DeesElement {
   @property()
-  public viewport: string;
+  accessor viewport: string;
 
   @property({ type: Boolean })
-  public advancedEditorOpen: boolean = false;
+  accessor advancedEditorOpen: boolean = false;
 
   @property({ type: Boolean })
-  public isFullscreen: boolean = false;
+  accessor isFullscreen: boolean = false;
 
   public static styles = [
     css`

package/ts_web/elements/wcc-properties.ts

@@ -1,6 +1,8 @@
 import { DeesElement, property, html, customElement, type TemplateResult, state } from '@design.estate/dees-element';
 import { WccDashboard } from './wcc-dashboard.js';
 import type { TTemplateFactory } from './wcctools.helpers.js';
+import './wcc-record-button.js';
+import './wcc-recording-panel.js';
 
 export type TPropertyType = 'String' | 'Number' | 'Boolean' | 'Object' | 'Enum' | 'Array';
 
@@ -18,28 +20,28 @@ export class WccProperties extends DeesElement {
   @property({
     type: WccDashboard
   })
-  public dashboardRef: WccDashboard;
+  accessor dashboardRef: WccDashboard;
 
   @property()
-  public selectedItem: TTemplateFactory | DeesElement;
+  accessor selectedItem: TTemplateFactory | DeesElement;
 
   @property()
-  public selectedViewport: TEnvironment = 'native';
+  accessor selectedViewport: TEnvironment = 'native';
 
   @property()
-  public selectedTheme: TTheme = 'dark';
+  accessor selectedTheme: TTheme = 'dark';
 
   @property()
-  public warning: string = null;
+  accessor warning: string = null;
 
   @property()
-  public isFullscreen: boolean = false;
+  accessor isFullscreen: boolean = false;
 
   @state()
-  propertyContent: TemplateResult[] = [];
+  accessor propertyContent: TemplateResult[] = [];
 
   @state()
-  editingProperties: Array<{
+  accessor editingProperties: Array<{
     id: string;
     name: string;
     value: any;
@@ -48,6 +50,16 @@ export class WccProperties extends DeesElement {
     editorError: string;
   }> = [];
 
+  // Recording coordination state
+  @state()
+  accessor showRecordingPanel: boolean = false;
+
+  @state()
+  accessor isRecording: boolean = false;
+
+  @state()
+  accessor recordingDuration: number = 0;
+
   public editorHeight: number = 300;
 
   public render(): TemplateResult {
@@ -88,7 +100,7 @@ export class WccProperties extends DeesElement {
         }
         .grid {
           display: grid;
-          grid-template-columns: 1fr 150px 300px 70px;
+          grid-template-columns: 1fr 150px 300px 70px 70px;
           height: 100%;
         }
         .properties {
@@ -654,9 +666,26 @@ export class WccProperties extends DeesElement {
               ${this.isFullscreen ? 'fullscreen_exit' : 'fullscreen'}
             </i>
           </div>
+          <!-- Recording Button -->
+          <wcc-record-button
+            .state=${this.isRecording ? 'recording' : 'idle'}
+            .duration=${this.recordingDuration}
+            @record-click=${() => this.handleRecordButtonClick()}
+          ></wcc-record-button>
         </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}
     `;
   }
 
@@ -994,4 +1023,19 @@ export class WccProperties extends DeesElement {
       })
     );
   }
+
+  // ==================== 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;
+    }
+  }
 }

package/ts_web/elements/wcc-record-button.ts

@@ -0,0 +1,108 @@
+import { DeesElement, customElement, html, css, property, type TemplateResult } from '@design.estate/dees-element';
+
+@customElement('wcc-record-button')
+export class WccRecordButton extends DeesElement {
+  @property({ type: String })
+  accessor state: 'idle' | 'recording' = 'idle';
+
+  @property({ type: Number })
+  accessor duration: number = 0;
+
+  public static styles = [
+    css`
+      :host {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        background: transparent;
+        cursor: pointer;
+        transition: all 0.15s ease;
+        color: #666;
+        user-select: none;
+      }
+
+      :host(:hover) {
+        background: rgba(239, 68, 68, 0.05);
+        color: #f87171;
+      }
+
+      :host(.recording) {
+        background: rgba(239, 68, 68, 0.15);
+        color: #f87171;
+      }
+
+      .content {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        gap: 0.25rem;
+      }
+
+      .rec-icon {
+        width: 12px;
+        height: 12px;
+        border-radius: 50%;
+        background: currentColor;
+      }
+
+      :host(.recording) .rec-icon {
+        animation: pulse-recording 1s ease-in-out infinite;
+      }
+
+      @keyframes pulse-recording {
+        0%, 100% { opacity: 1; transform: scale(1); }
+        50% { opacity: 0.5; transform: scale(0.9); }
+      }
+
+      .recording-timer {
+        font-family: 'Consolas', 'Monaco', monospace;
+        font-size: 0.7rem;
+      }
+    `
+  ];
+
+  private formatDuration(seconds: number): string {
+    const mins = Math.floor(seconds / 60);
+    const secs = seconds % 60;
+    return `${mins.toString().padStart(2, '0')}:${secs.toString().padStart(2, '0')}`;
+  }
+
+  public render(): TemplateResult {
+    return html`
+      <div class="content">
+        <div class="rec-icon"></div>
+        ${this.state === 'recording' ? html`
+          <span class="recording-timer">${this.formatDuration(this.duration)}</span>
+        ` : null}
+      </div>
+    `;
+  }
+
+  async connectedCallback(): Promise<void> {
+    await super.connectedCallback();
+    this.addEventListener('click', this.handleClick);
+  }
+
+  async disconnectedCallback(): Promise<void> {
+    await super.disconnectedCallback();
+    this.removeEventListener('click', this.handleClick);
+  }
+
+  private handleClick = (): void => {
+    this.dispatchEvent(new CustomEvent('record-click', {
+      bubbles: true,
+      composed: true
+    }));
+  };
+
+  updated(changedProperties: Map<string, unknown>): void {
+    super.updated(changedProperties);
+    if (changedProperties.has('state')) {
+      if (this.state === 'recording') {
+        this.classList.add('recording');
+      } else {
+        this.classList.remove('recording');
+      }
+    }
+  }
+}