feat(docs): document MP4 export support and enhanced recording capabilities

ts_web/00_commitinfo_data.ts

@@ -3,6 +3,6 @@
  */
 export const commitinfo = {
   name: '@design.estate/dees-wcctools',
-  version: '3.8.5',
+  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.'
 }

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