@design.estate/dees-wcctools 3.8.4 → 3.9.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@design.estate/dees-wcctools",
-  "version": "3.8.4",
+  "version": "3.9.0",
   "private": false,
   "description": "A set of web component tools for creating element catalogues, enabling the structured development and documentation of custom elements and pages.",
   "exports": {
@@ -20,7 +20,8 @@
     "@design.estate/dees-domtools": "^2.5.4",
     "@design.estate/dees-element": "^2.2.4",
     "@push.rocks/smartdelay": "^3.0.5",
-    "lit": "^3.3.2"
+    "lit": "^3.3.2",
+    "mediabunny": "^1.40.1"
   },
   "devDependencies": {
     "@api.global/typedserver": "^8.4.6",
@@ -59,5 +60,11 @@
     "element testing",
     "page development"
   ],
-  "packageManager": "pnpm@10.11.0+sha512.6540583f41cc5f628eb3d9773ecee802f4f9ef9923cc45b69890fb47991d4b092964694ec3a4f738a420c918a333062c8b925d312f42e4f0c263eb603551f977"
+  "packageManager": "pnpm@10.11.0+sha512.6540583f41cc5f628eb3d9773ecee802f4f9ef9923cc45b69890fb47991d4b092964694ec3a4f738a420c918a333062c8b925d312f42e4f0c263eb603551f977",
+  "pnpm": {
+    "overrides": {
+      "@types/dom-webcodecs": "./ts_web/types/dom-webcodecs-stub",
+      "@types/dom-mediacapture-transform": "./ts_web/types/dom-mediacapture-stub"
+    }
+  }
 }

package/readme.hints.md

@@ -1,5 +1,13 @@
 # Project Hints and Findings
 
+## Mediabunny / @types/dom-webcodecs Override (2026-04-12)
+
+The `mediabunny` package depends on `@types/dom-webcodecs` and `@types/dom-mediacapture-transform`, which conflict with TypeScript 6's built-in WebCodecs types in `lib.dom.d.ts`. We override both via `pnpm.overrides` in `package.json`, pointing them to local stubs in `ts_web/types/`:
+- `dom-webcodecs-stub/` — empty, since TS6 provides these types natively
+- `dom-mediacapture-stub/` — provides `MediaStreamVideoTrack` and `MediaStreamAudioTrack` interfaces (not yet in `lib.dom.d.ts`)
+
+If mediabunny drops these `@types` dependencies in a future version, the overrides can be removed.
+
 ## TypeScript 6.0 & Build Tooling (2026-04-12)
 
 ### TypeScript 6.0 Strict Defaults

package/readme.md

@@ -10,7 +10,7 @@
 - 🔧 **Real-time Property Editing** — Modify component props on the fly with auto-detected editors
 - 🌓 **Theme Switching** — Test light/dark modes instantly
 - 📱 **Responsive Viewport Testing** — Phone, phablet, tablet, and desktop views
-- 🎬 **Screen Recording** — Record component demos with audio support and video trimming
+- 🎬 **Screen Recording** — Record component demos with audio, trimming, and MP4/WebM export
 - 🧪 **Advanced Demo Tools** — Post-render hooks for interactive testing
 - 📂 **Section-based Organization** — Group components into custom sections with filtering and sorting
 - 🚀 **Zero-config Setup** — TypeScript and Lit support out of the box
@@ -235,15 +235,17 @@ public static styles = [
 
 ### 🎬 Screen Recording
 
-Record component demos directly from the catalogue:
+Record component demos directly from the catalogue with full export control:
 
 - **Viewport Recording** — Record just the component viewport
 - **Full Screen Recording** — Capture the entire screen
 - **Audio Support** — Add microphone commentary with live level monitoring
-- **Video Trimming** — Trim start/end before export with visual timeline
-- **WebM Export** — High-quality video output
+- **Video Trimming** — Trim start/end before export with a visual timeline
+- **60fps Capture** — Smooth, high-bitrate recording at up to 60 frames per second
+- **MP4 Export** — Universal H.264/AAC format via [mediabunny](https://mediabunny.dev) WebCodecs conversion (plays everywhere: WhatsApp, iMessage, Slack, etc.)
+- **WebM Export** — Native VP9 output for maximum quality
 
-Click the red record button in the bottom toolbar to start.
+Click the red record button in the bottom toolbar, choose your format (MP4 or WebM), and start recording.
 
 ### 🧪 Demo Tools
 
@@ -438,7 +440,7 @@ The wrapper provides full DOM API access:
 For custom recording integrations:
 
 ```typescript
-import { RecorderService } from '@design.estate/dees-wcctools';
+import { RecorderService, type TOutputFormat } from '@design.estate/dees-wcctools';
 
 const recorder = new RecorderService({
   onDurationUpdate: (duration) => console.log(`${duration}s`),
@@ -446,9 +448,13 @@ const recorder = new RecorderService({
   onAudioLevelUpdate: (level) => console.log(`Audio: ${level}%`),
 });
 
+// Record (always captures as WebM internally)
 await recorder.startRecording({ mode: 'viewport' });
 // ... later
 recorder.stopRecording();
+
+// Convert to MP4 for universal playback (H.264 + AAC via WebCodecs)
+const mp4Blob = await recorder.convertToMp4(recorder.recordedBlob);
 ```
 
 ## Project Structure
@@ -481,7 +487,7 @@ my-component-library/
 
 ## License and Legal Information
 
-This repository contains open-source code licensed under the MIT License. A copy of the license can be found in the [license](./license) file.
+This repository contains open-source code licensed under the MIT License. A copy of the license can be found in the [LICENSE](./LICENSE) file.
 
 **Please note:** The MIT License does not grant permission to use the trade names, trademarks, service marks, or product names of the project, except as required for reasonable and customary use in describing the origin of the work and reproducing the content of the NOTICE file.
 
@@ -493,7 +499,7 @@ Use of these trademarks must comply with Task Venture Capital GmbH's Trademark G
 
 ### Company Information
 
-Task Venture Capital GmbH
+Task Venture Capital GmbH  
 Registered at District Court Bremen HRB 35230 HB, Germany
 
 For any legal inquiries or further information, please contact us via email at hello@task.vc.

package/ts_web/00_commitinfo_data.ts

@@ -3,6 +3,6 @@
  */
 export const commitinfo = {
   name: '@design.estate/dees-wcctools',
-  version: '3.8.4',
+  version: '3.9.0',
   description: 'A set of web component tools for creating element catalogues, enabling the structured development and documentation of custom elements and pages.'
 }

package/ts_web/elements/wcc-recording-panel.ts

@@ -1,5 +1,5 @@
 import { DeesElement, customElement, html, css, property, state, type TemplateResult } from '@design.estate/dees-element';
-import { RecorderService } from '../services/recorder.service.js';
+import { RecorderService, type TOutputFormat } from '../services/recorder.service.js';
 import type { WccDashboard } from './wcc-dashboard.js';
 
 @customElement('wcc-recording-panel')
@@ -16,6 +16,9 @@ export class WccRecordingPanel extends DeesElement {
   @state()
   accessor recordingMode: 'viewport' | 'screen' = 'viewport';
 
+  @state()
+  accessor outputFormat: TOutputFormat = 'mp4';
+
   @state()
   accessor audioEnabled: boolean = false;
 
@@ -380,6 +383,9 @@ export class WccRecordingPanel extends DeesElement {
         font-weight: 500;
         cursor: pointer;
         transition: all 0.15s ease;
+        display: inline-flex;
+        align-items: center;
+        gap: 0.5rem;
       }
 
       .preview-btn.secondary {
@@ -546,7 +552,7 @@ export class WccRecordingPanel extends DeesElement {
         border-radius: 50%;
         border-top-color: white;
         animation: spin 0.8s linear infinite;
-        margin-right: 0.5rem;
+        flex-shrink: 0;
       }
 
       @keyframes spin {
@@ -591,6 +597,24 @@ export class WccRecordingPanel extends DeesElement {
             </div>
           </div>
 
+          <div class="recording-option-group">
+            <div class="recording-option-label">Format</div>
+            <div class="recording-mode-buttons">
+              <button
+                class="recording-mode-btn ${this.outputFormat === 'mp4' ? 'selected' : ''}"
+                @click=${() => this.outputFormat = 'mp4'}
+              >
+                MP4 (H.264)
+              </button>
+              <button
+                class="recording-mode-btn ${this.outputFormat === 'webm' ? 'selected' : ''}"
+                @click=${() => this.outputFormat = 'webm'}
+              >
+                WebM (VP9)
+              </button>
+            </div>
+          </div>
+
           <div class="recording-option-group">
             <div class="recording-option-label">Audio</div>
             <div class="audio-toggle">
@@ -716,7 +740,9 @@ export class WccRecordingPanel extends DeesElement {
               ?disabled=${this.isExporting}
               @click=${() => this.downloadRecording()}
             >
-              ${this.isExporting ? html`<span class="export-spinner"></span>Exporting...` : 'Download WebM'}
+              ${this.isExporting
+                ? html`<span class="export-spinner"></span>${this.outputFormat === 'mp4' ? 'Converting to MP4...' : 'Exporting...'}`
+                : `Download ${this.outputFormat === 'mp4' ? 'MP4' : 'WebM'}`}
             </button>
           </div>
         </div>
@@ -764,7 +790,7 @@ export class WccRecordingPanel extends DeesElement {
       await this.recorderService.startRecording({
         mode: this.recordingMode,
         audioDeviceId: this.audioEnabled ? this.selectedMicrophoneId : undefined,
-        viewportElement
+        viewportElement,
       });
 
       this.panelState = 'recording';
@@ -817,7 +843,7 @@ export class WccRecordingPanel extends DeesElement {
     try {
       let blobToDownload: Blob;
 
-      // Handle trimming if needed
+      // Handle trimming if needed — always produces WebM
       const needsTrim = this.trimStart > 0.1 || this.trimEnd < this.videoDuration - 0.1;
 
       if (needsTrim) {
@@ -831,9 +857,15 @@ export class WccRecordingPanel extends DeesElement {
         blobToDownload = recordedBlob;
       }
 
+      // Convert WebM → MP4 if MP4 format selected
+      if (this.outputFormat === 'mp4') {
+        blobToDownload = await this.recorderService.convertToMp4(blobToDownload);
+      }
+
       // Trigger download
       const timestamp = new Date().toISOString().replace(/[:.]/g, '-').slice(0, 19);
-      const filename = `wcctools-recording-${timestamp}.webm`;
+      const ext = this.outputFormat === 'mp4' ? 'mp4' : 'webm';
+      const filename = `wcctools-recording-${timestamp}.${ext}`;
 
       const url = URL.createObjectURL(blobToDownload);
       const a = document.createElement('a');

package/ts_web/index.ts

@@ -4,7 +4,7 @@ import type { TTemplateFactory } from './elements/wcctools.helpers.js';
 import type { IWccConfig, IWccSection } from './wcctools.interfaces.js';
 
 // Export recording components and service
-export { RecorderService, type IRecorderEvents, type IRecordingOptions } from './services/recorder.service.js';
+export { RecorderService, type IRecorderEvents, type IRecordingOptions, type TOutputFormat } from './services/recorder.service.js';
 export { WccRecordButton } from './elements/wcc-record-button.js';
 export { WccRecordingPanel } from './elements/wcc-recording-panel.js';
 

package/ts_web/readme.md

@@ -71,11 +71,12 @@ setupWccTools({
 
 | Export | Description |
 |--------|-------------|
-| `RecorderService` | Service class for screen/viewport recording |
+| `RecorderService` | Service class for screen/viewport recording and MP4 conversion |
 | `WccRecordButton` | Record button UI component |
 | `WccRecordingPanel` | Recording options and preview panel |
 | `IRecorderEvents` | TypeScript interface for recorder callbacks |
 | `IRecordingOptions` | TypeScript interface for recording options |
+| `TOutputFormat` | Type for output format selection (`'webm' \| 'mp4'`) |
 
 ## Section Configuration
 
@@ -96,15 +97,15 @@ The module includes these internal web components:
 | Component | Description |
 |-----------|-------------|
 | `wcc-dashboard` | Main dashboard container with routing |
-| `wcc-sidebar` | Navigation sidebar with collapsible sections |
+| `wcc-sidebar` | Navigation sidebar with collapsible sections and search |
 | `wcc-frame` | Responsive viewport with size controls |
 | `wcc-properties` | Property panel with live editing |
 | `wcc-record-button` | Recording state indicator button |
-| `wcc-recording-panel` | Recording workflow UI |
+| `wcc-recording-panel` | Recording workflow UI with format selection |
 
 ## RecorderService API
 
-For programmatic recording control:
+For programmatic recording and MP4 conversion:
 
 ```typescript
 import { RecorderService, type IRecorderEvents } from '@design.estate/dees-wcctools';
@@ -125,7 +126,7 @@ const mics = await recorder.loadMicrophones(true);
 // Start audio level monitoring
 await recorder.startAudioMonitoring(mics[0].deviceId);
 
-// Start recording
+// Start recording (always captures as WebM internally at up to 60fps)
 await recorder.startRecording({
   mode: 'viewport',
   audioDeviceId: mics[0].deviceId,
@@ -135,7 +136,10 @@ await recorder.startRecording({
 // Stop recording
 recorder.stopRecording();
 
-// Export trimmed video
+// Convert to MP4 for universal playback (H.264 + AAC via WebCodecs)
+const mp4Blob = await recorder.convertToMp4(recorder.recordedBlob);
+
+// Or export trimmed video
 const trimmedBlob = await recorder.exportTrimmedVideo(videoElement, startTime, endTime);
 
 // Cleanup
@@ -148,6 +152,9 @@ recorder.dispose();
 ts_web/
 ├── index.ts                    # Main exports
 ├── wcctools.interfaces.ts      # Type definitions
+├── types/
+│   ├── dom-webcodecs-stub/     # TS6 compatibility shim
+│   └── dom-mediacapture-stub/  # MediaCapture Transform types
 ├── elements/
 │   ├── wcc-dashboard.ts        # Root dashboard component
 │   ├── wcc-sidebar.ts          # Navigation sidebar
@@ -157,7 +164,7 @@ ts_web/
 │   ├── wcc-recording-panel.ts  # Recording options/preview
 │   └── wcctools.helpers.ts     # Shared utilities
 ├── services/
-│   └── recorder.service.ts     # MediaRecorder abstraction
+│   └── recorder.service.ts     # MediaRecorder + mediabunny MP4 conversion
 └── pages/
     └── index.ts                # Built-in pages
 ```
@@ -165,9 +172,9 @@ ts_web/
 ## Features
 
 - 🎨 Interactive component preview
-- 📂 Section-based sidebar with filtering & sorting
+- 📂 Section-based sidebar with filtering, sorting & search (by name, tag, or group)
 - 🔧 Real-time property editing with type detection
 - 🌓 Theme switching (light/dark)
 - 📱 Responsive viewport testing
-- 🎬 Screen recording with trimming
+- 🎬 Screen recording with MP4/WebM export, trimming, and audio
 - 🔗 URL-based deep linking

package/ts_web/services/recorder.service.ts

@@ -1,7 +1,11 @@
 /**
- * RecorderService - Handles all MediaRecorder, audio monitoring, and video export logic
+ * RecorderService - Handles all MediaRecorder, audio monitoring, and video export logic.
+ * Recording always uses MediaRecorder → WebM (the reliable browser path).
+ * MP4 output is produced by converting WebM → MP4 via mediabunny at export time.
  */
 
+export type TOutputFormat = 'webm' | 'mp4';
+
 export interface IRecorderEvents {
   onDurationUpdate?: (duration: number) => void;
   onRecordingComplete?: (blob: Blob) => void;
@@ -14,6 +18,7 @@ export interface IRecordingOptions {
   mode: 'viewport' | 'screen';
   audioDeviceId?: string;
   viewportElement?: HTMLElement;
+  outputFormat?: TOutputFormat;
 }
 
 export class RecorderService {
@@ -24,6 +29,7 @@ export class RecorderService {
   private _duration: number = 0;
   private _recordedBlob: Blob | null = null;
   private _isRecording: boolean = false;
+  private _outputFormat: TOutputFormat = 'webm';
 
   // Audio monitoring state
   private audioContext: AudioContext | null = null;
@@ -56,6 +62,10 @@ export class RecorderService {
     return this._recordedBlob;
   }
 
+  get outputFormat(): TOutputFormat {
+    return this._outputFormat;
+  }
+
   // Update event callbacks
   setEvents(events: IRecorderEvents): void {
     this.events = { ...this.events, ...events };
@@ -132,13 +142,16 @@ export class RecorderService {
 
   async startRecording(options: IRecordingOptions): Promise<void> {
     try {
+      this._outputFormat = options.outputFormat || 'webm';
+
       // Stop audio monitoring before recording
       this.stopAudioMonitoring();
 
       // Get video stream based on mode
       const displayMediaOptions: DisplayMediaStreamOptions = {
         video: {
-          displaySurface: options.mode === 'viewport' ? 'browser' : 'monitor'
+          displaySurface: options.mode === 'viewport' ? 'browser' : 'monitor',
+          frameRate: { ideal: 60 },
         } as MediaTrackConstraints,
         audio: false
       };
@@ -182,12 +195,23 @@ export class RecorderService {
       // Store stream for cleanup
       this.currentStream = combinedStream;
 
-      // Create MediaRecorder
+      // Handle stream ending (user clicks "Stop sharing")
+      videoStream.getVideoTracks()[0].onended = () => {
+        if (this._isRecording) {
+          this.stopRecording();
+          this.events.onStreamEnded?.();
+        }
+      };
+
+      // Always record as WebM — conversion to MP4 happens at export time
       const mimeType = MediaRecorder.isTypeSupported('video/webm;codecs=vp9')
         ? 'video/webm;codecs=vp9'
         : 'video/webm';
 
-      this.mediaRecorder = new MediaRecorder(combinedStream, { mimeType });
+      this.mediaRecorder = new MediaRecorder(combinedStream, {
+        mimeType,
+        videoBitsPerSecond: 8_000_000, // 8 Mbps for smooth, high-quality capture
+      });
       this.recordedChunks = [];
 
       this.mediaRecorder.ondataavailable = (e) => {
@@ -198,14 +222,6 @@ export class RecorderService {
 
       this.mediaRecorder.onstop = () => this.handleRecordingComplete();
 
-      // Handle stream ending (user clicks "Stop sharing")
-      videoStream.getVideoTracks()[0].onended = () => {
-        if (this._isRecording) {
-          this.stopRecording();
-          this.events.onStreamEnded?.();
-        }
-      };
-
       this.mediaRecorder.start(1000); // Capture in 1-second chunks
 
       // Start duration timer
@@ -236,9 +252,7 @@ export class RecorderService {
   }
 
   private async handleRecordingComplete(): Promise<void> {
-    // Create blob from recorded chunks
     const blob = new Blob(this.recordedChunks, { type: 'video/webm' });
-
     this._recordedBlob = blob;
 
     // Stop all tracks
@@ -251,7 +265,51 @@ export class RecorderService {
     this.events.onRecordingComplete?.(this._recordedBlob);
   }
 
-  // ==================== Trim & Export ====================
+  // ==================== Conversion & Export ====================
+
+  /**
+   * Converts a WebM blob to MP4 using mediabunny's Conversion API.
+   * Uses WebCodecs for hardware-accelerated H.264 encoding.
+   */
+  async convertToMp4(webmBlob: Blob): Promise<Blob> {
+    const {
+      Input, Output, Conversion, BlobSource, BufferTarget, Mp4OutputFormat, WEBM, QUALITY_HIGH,
+    } = await import('mediabunny');
+
+    const input = new Input({
+      source: new BlobSource(webmBlob),
+      formats: [WEBM],
+    });
+
+    const target = new BufferTarget();
+    const output = new Output({
+      format: new Mp4OutputFormat({ fastStart: 'in-memory' }),
+      target,
+    });
+
+    const conversion = await Conversion.init({
+      input,
+      output,
+      // Force transcoding from VP9 → H.264 and Opus → AAC
+      video: {
+        codec: 'avc',
+        bitrate: QUALITY_HIGH,
+        fit: 'contain',
+      },
+      audio: {
+        codec: 'aac',
+        bitrate: QUALITY_HIGH,
+      },
+    });
+    await conversion.execute();
+
+    const buffer = target.buffer;
+    if (!buffer || buffer.byteLength === 0) {
+      throw new Error('MP4 conversion produced empty output');
+    }
+
+    return new Blob([buffer], { type: 'video/mp4' });
+  }
 
   async exportTrimmedVideo(
     videoElement: HTMLVideoElement,

package/ts_web/types/dom-mediacapture-stub/index.d.ts

@@ -0,0 +1,12 @@
+// Minimal type stubs for MediaCapture Transform API types not yet in lib.dom.d.ts.
+// These specialize MediaStreamTrack for audio/video so mediabunny's API is type-safe.
+
+interface MediaStreamAudioTrack extends MediaStreamTrack {
+  readonly kind: 'audio';
+  clone(): MediaStreamAudioTrack;
+}
+
+interface MediaStreamVideoTrack extends MediaStreamTrack {
+  readonly kind: 'video';
+  clone(): MediaStreamVideoTrack;
+}

package/ts_web/types/dom-mediacapture-stub/package.json

@@ -0,0 +1,6 @@
+{
+  "name": "@types/dom-mediacapture-transform",
+  "version": "0.0.0",
+  "description": "Minimal stub providing MediaStreamVideoTrack/MediaStreamAudioTrack for TS 6",
+  "types": "index.d.ts"
+}

package/ts_web/types/dom-webcodecs-stub/index.d.ts

@@ -0,0 +1,2 @@
+// Empty stub: TypeScript 6 includes WebCodecs types in lib.dom.d.ts natively.
+// This prevents @types/dom-webcodecs from conflicting with the built-in types.

package/ts_web/types/dom-webcodecs-stub/package.json

@@ -0,0 +1,6 @@
+{
+  "name": "@types/dom-webcodecs",
+  "version": "0.0.0",
+  "description": "Empty stub — TypeScript 6 provides WebCodecs types natively in lib.dom.d.ts",
+  "types": "index.d.ts"
+}