# @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