@design.estate/dees-wcctools 1.2.1 → 2.0.0

package/ts_web/elements/wcc-sidebar.ts

@@ -1,23 +1,28 @@
 import * as plugins from '../wcctools.plugins.js';
-import { DeesElement, property, html, customElement, type TemplateResult } from '@design.estate/dees-element';
+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 { getDemoCount, hasMultipleDemos } from './wcctools.helpers.js';
 
 export type TElementType = 'element' | 'page';
 
 @customElement('wcc-sidebar')
 export class WccSidebar extends DeesElement {
   @property({ attribute: false })
-  public selectedItem: DeesElement | TTemplateFactory;
+  accessor selectedItem: DeesElement | TTemplateFactory;
 
   @property({ attribute: false })
-  public selectedType: TElementType;
+  accessor selectedType: TElementType;
 
   @property()
-  public dashboardRef: WccDashboard;
+  accessor dashboardRef: WccDashboard;
 
   @property()
-  public isFullscreen: boolean = false;
+  accessor isFullscreen: boolean = false;
+
+  // Track which elements are expanded (for multi-demo elements)
+  @state()
+  accessor expandedElements: Set<string> = new Set();
 
   public render(): TemplateResult {
     return html`
@@ -110,7 +115,21 @@ export class WccSidebar extends DeesElement {
           color: #999;
           background: transparent;
         }
-        
+
+        .selectOption.folder {
+          grid-template-columns: 16px 20px 1fr;
+        }
+
+        .selectOption .expand-icon {
+          font-size: 14px;
+          opacity: 0.5;
+          transition: transform 0.2s ease;
+        }
+
+        .selectOption.expanded .expand-icon {
+          transform: rotate(90deg);
+        }
+
         .selectOption:hover {
           background: rgba(59, 130, 246, 0.05);
           color: #bbb;
@@ -143,6 +162,42 @@ export class WccSidebar extends DeesElement {
           font-weight: 400;
         }
 
+        .demo-children {
+          margin-left: 1rem;
+          overflow: hidden;
+        }
+
+        .demo-child {
+          user-select: none;
+          position: relative;
+          margin: 0.125rem 0.5rem;
+          padding: 0.35rem 0.75rem;
+          transition: all 0.15s ease;
+          display: grid;
+          grid-template-columns: 16px 1fr;
+          align-items: center;
+          gap: 0.5rem;
+          border-radius: var(--radius);
+          cursor: pointer;
+          font-size: 0.7rem;
+          color: #777;
+          background: transparent;
+        }
+
+        .demo-child:hover {
+          background: rgba(59, 130, 246, 0.05);
+          color: #bbb;
+        }
+
+        .demo-child.selected {
+          background: rgba(59, 130, 246, 0.15);
+          color: var(--primary);
+        }
+
+        .demo-child .material-symbols-outlined {
+          font-size: 14px;
+        }
+
         ::-webkit-scrollbar {
           width: 8px;
         }
@@ -171,7 +226,7 @@ export class WccSidebar extends DeesElement {
                 class="selectOption ${this.selectedItem === item ? 'selected' : null}"
                 @click=${async () => {
                   const domtools = await plugins.deesDomtools.DomTools.setupDomTools();
-                  this.selectItem('page', pageName, item);
+                  this.selectItem('page', pageName, item, 0);
                 }}
               >
                 <i class="material-symbols-outlined">insert_drive_file</i>
@@ -184,31 +239,83 @@ export class WccSidebar extends DeesElement {
         ${(() => {
           const elements = Object.keys(this.dashboardRef.elements);
           return elements.map(elementName => {
-            const item = this.dashboardRef.elements[elementName];
-            return html`
-              <div
-                class="selectOption ${this.selectedItem === item ? 'selected' : null}"
-                @click=${async () => {
-                  const domtools = await plugins.deesDomtools.DomTools.setupDomTools();
-                  this.selectItem('element', elementName, item);
-                }}
-              >
-                <i class="material-symbols-outlined">featured_video</i>
-                <div class="text">${elementName}</div>
-              </div>
-            `;
+            const item = this.dashboardRef.elements[elementName] as any;
+            const demoCount = item.demo ? getDemoCount(item.demo) : 0;
+            const isMultiDemo = item.demo && hasMultipleDemos(item.demo);
+            const isExpanded = this.expandedElements.has(elementName);
+            const isSelected = this.selectedItem === item;
+
+            if (isMultiDemo) {
+              // Multi-demo element - render as expandable folder
+              return html`
+                <div
+                  class="selectOption folder ${isExpanded ? 'expanded' : ''} ${isSelected ? 'selected' : ''}"
+                  @click=${() => this.toggleExpanded(elementName)}
+                >
+                  <i class="material-symbols-outlined expand-icon">chevron_right</i>
+                  <i class="material-symbols-outlined">folder</i>
+                  <div class="text">${elementName}</div>
+                </div>
+                ${isExpanded ? html`
+                  <div class="demo-children">
+                    ${Array.from({ length: demoCount }, (_, i) => {
+                      const demoIndex = i;
+                      const isThisDemoSelected = isSelected && this.dashboardRef.selectedDemoIndex === demoIndex;
+                      return html`
+                        <div
+                          class="demo-child ${isThisDemoSelected ? 'selected' : ''}"
+                          @click=${async () => {
+                            await plugins.deesDomtools.DomTools.setupDomTools();
+                            this.selectItem('element', elementName, item, demoIndex);
+                          }}
+                        >
+                          <i class="material-symbols-outlined">play_circle</i>
+                          <div class="text">demo${demoIndex + 1}</div>
+                        </div>
+                      `;
+                    })}
+                  </div>
+                ` : null}
+              `;
+            } else {
+              // Single demo element - render as normal
+              return html`
+                <div
+                  class="selectOption ${isSelected ? 'selected' : null}"
+                  @click=${async () => {
+                    await plugins.deesDomtools.DomTools.setupDomTools();
+                    this.selectItem('element', elementName, item, 0);
+                  }}
+                >
+                  <i class="material-symbols-outlined">featured_video</i>
+                  <div class="text">${elementName}</div>
+                </div>
+              `;
+            }
           });
         })()}
       </div>
     `;
   }
 
-  public selectItem(typeArg: TElementType, itemNameArg: string, itemArg: TTemplateFactory | DeesElement) {
+  private toggleExpanded(elementName: string) {
+    const newSet = new Set(this.expandedElements);
+    if (newSet.has(elementName)) {
+      newSet.delete(elementName);
+    } else {
+      newSet.add(elementName);
+    }
+    this.expandedElements = newSet;
+  }
+
+  public selectItem(typeArg: TElementType, itemNameArg: string, itemArg: TTemplateFactory | DeesElement, demoIndex: number = 0) {
     console.log('selected item');
     console.log(itemNameArg);
     console.log(itemArg);
+    console.log('demo index:', demoIndex);
     this.selectedItem = itemArg;
     this.selectedType = typeArg;
+    this.dashboardRef.selectedDemoIndex = demoIndex;
     this.dispatchEvent(
       new CustomEvent('selectedType', {
         detail: typeArg
@@ -224,7 +331,11 @@ export class WccSidebar extends DeesElement {
         detail: itemArg
       })
     );
-    
+
     this.dashboardRef.buildUrl();
+
+    // Force re-render to update demo child selection indicator
+    // (needed when switching between demos of the same element)
+    this.requestUpdate();
   }
 }

package/ts_web/elements/wcctools.helpers.ts

@@ -2,8 +2,39 @@ import type { TemplateResult } from 'lit';
 
 export type TTemplateFactory = () => TemplateResult | Promise<TemplateResult>;
 
+// Demo can be a single function or an array of functions
+export type TDemoDefinition = TTemplateFactory | TTemplateFactory[];
+
 export const resolveTemplateFactory = async (
   factoryArg: TTemplateFactory
 ): Promise<TemplateResult> => {
   return await Promise.resolve(factoryArg());
 };
+
+/**
+ * Get the number of demos for an element
+ */
+export const getDemoCount = (demo: TDemoDefinition): number => {
+  if (Array.isArray(demo)) {
+    return demo.length;
+  }
+  return 1;
+};
+
+/**
+ * Get a specific demo by index (0-based internally, displayed as 1-based)
+ */
+export const getDemoAtIndex = (demo: TDemoDefinition, index: number): TTemplateFactory | null => {
+  if (Array.isArray(demo)) {
+    return demo[index] ?? null;
+  }
+  // Single demo - only index 0 is valid
+  return index === 0 ? demo : null;
+};
+
+/**
+ * Check if an element has multiple demos
+ */
+export const hasMultipleDemos = (demo: TDemoDefinition): boolean => {
+  return Array.isArray(demo) && demo.length > 1;
+};

package/ts_web/index.ts

@@ -2,6 +2,11 @@ import { WccDashboard } from './elements/wcc-dashboard.js';
 import { LitElement } from 'lit';
 import type { TTemplateFactory } from './elements/wcctools.helpers.js';
 
+// Export recording components and service
+export { RecorderService, type IRecorderEvents, type IRecordingOptions } from './services/recorder.service.js';
+export { WccRecordButton } from './elements/wcc-record-button.js';
+export { WccRecordingPanel } from './elements/wcc-recording-panel.js';
+
 const setupWccTools = (
   elementsArg?: { [key: string]: LitElement },
   pagesArg?: Record<string, TTemplateFactory>

package/ts_web/readme.md

@@ -0,0 +1,123 @@
+# @design.estate/dees-wcctools
+
+🛠️ **Web Component Catalogue Tools** — The core dashboard and UI components for building interactive component catalogues
+
+## Overview
+
+This is the main module of `@design.estate/dees-wcctools`, providing the complete dashboard experience for developing, testing, and documenting web components.
+
+## Installation
+
+```bash
+pnpm add -D @design.estate/dees-wcctools
+```
+
+## Usage
+
+```typescript
+import { setupWccTools } from '@design.estate/dees-wcctools';
+import { MyButton } from './components/my-button.js';
+
+setupWccTools({
+  'my-button': MyButton,
+});
+```
+
+## Exports
+
+### Main Entry Point
+
+| Export | Description |
+|--------|-------------|
+| `setupWccTools` | Initialize the component catalogue dashboard |
+
+### Recording Components
+
+| Export | Description |
+|--------|-------------|
+| `RecorderService` | Service class for screen/viewport recording |
+| `WccRecordButton` | Record button UI component |
+| `WccRecordingPanel` | Recording options and preview panel |
+| `IRecorderEvents` | TypeScript interface for recorder callbacks |
+| `IRecordingOptions` | TypeScript interface for recording options |
+
+## Internal Components
+
+The module includes these internal web components:
+
+| Component | Description |
+|-----------|-------------|
+| `wcc-dashboard` | Main dashboard container with routing |
+| `wcc-sidebar` | Navigation sidebar with element/page listing |
+| `wcc-frame` | Iframe viewport with responsive sizing |
+| `wcc-properties` | Property panel with live editing |
+| `wcc-record-button` | Recording state indicator button |
+| `wcc-recording-panel` | Recording workflow UI |
+
+## RecorderService API
+
+For programmatic recording control:
+
+```typescript
+import { RecorderService, type IRecorderEvents } from '@design.estate/dees-wcctools';
+
+const events: IRecorderEvents = {
+  onDurationUpdate: (duration) => console.log(`Recording: ${duration}s`),
+  onRecordingComplete: (blob) => saveBlob(blob),
+  onAudioLevelUpdate: (level) => updateMeter(level),
+  onError: (error) => console.error(error),
+  onStreamEnded: () => console.log('User stopped sharing'),
+};
+
+const recorder = new RecorderService(events);
+
+// Load available microphones
+const mics = await recorder.loadMicrophones(true); // true = request permission
+
+// Start audio level monitoring
+await recorder.startAudioMonitoring(mics[0].deviceId);
+
+// Start recording
+await recorder.startRecording({
+  mode: 'viewport', // or 'screen'
+  audioDeviceId: mics[0].deviceId,
+  viewportElement: document.querySelector('.viewport'),
+});
+
+// Stop recording
+recorder.stopRecording();
+
+// Export trimmed video
+const trimmedBlob = await recorder.exportTrimmedVideo(videoElement, startTime, endTime);
+
+// Cleanup
+recorder.dispose();
+```
+
+## Architecture
+
+```
+ts_web/
+├── index.ts                    # Main exports
+├── elements/
+│   ├── wcc-dashboard.ts        # Root dashboard component
+│   ├── wcc-sidebar.ts          # Navigation sidebar
+│   ├── wcc-frame.ts            # Responsive iframe viewport
+│   ├── wcc-properties.ts       # Property editing panel
+│   ├── wcc-record-button.ts    # Recording button
+│   ├── wcc-recording-panel.ts  # Recording options/preview
+│   └── wcctools.helpers.ts     # Shared utilities
+├── services/
+│   └── recorder.service.ts     # MediaRecorder abstraction
+└── pages/
+    └── index.ts                # Built-in pages
+```
+
+## Features
+
+- 🎨 Interactive component preview
+- 🔧 Real-time property editing with type detection
+- 🌓 Theme switching (light/dark)
+- 📱 Responsive viewport testing
+- 🎬 Screen recording with trimming
+- 🔗 URL-based deep linking