# LiveComponents Module

**Zero-Dependency Interactive Components** - Trait-based, keine abstract classes!

## Design Pattern

✅ **Composition over Inheritance**
- Interface: `LiveComponentContract`
- Trait: `LiveComponentTrait`
- Final readonly classes

## Minimal Example

```php
final readonly class MyComponent implements LiveComponentContract
{
    use LiveComponentTrait;

    public function __construct(
        string $id,
        array $initialData = [],
        ?TemplateRenderer $templateRenderer = null
    ) {
        $this->id = $id;
        $this->initialData = $initialData;
        $this->templateRenderer = $templateRenderer;
    }

    public function render(): string
    {
        return $this->template('path/to/template', [
            'data' => $this->initialData
        ]);
    }
}
```

## Features

- **Polling**: `implements Pollable` - Auto-updates
- **File Upload**: `implements Uploadable` - Progress tracking mit `Byte` VO
- **SSE**: Real-time via framework's `SseResult`
- **Zero JS Dependencies**: Pure Vanilla JavaScript

## Structure

```
LiveComponents/
├── Contracts/
│   ├── LiveComponentContract.php  # Main interface
│   ├── Pollable.php              # Polling capability
│   └── Uploadable.php            # Upload capability
├── Traits/
│   └── LiveComponentTrait.php    # Implementation
├── Controllers/
│   ├── LiveComponentController.php
│   └── UploadController.php
├── Templates/
│   └── *.view.php                # Component templates
└── ValueObjects/
    ├── LiveComponentState.php
    ├── ComponentAction.php
    ├── ComponentUpdate.php
    ├── UploadedComponentFile.php  # Uses Byte VO
    └── FileUploadProgress.php     # Uses Byte VO
```

## JavaScript

- `/public/js/live-components.js` - Main client (~3KB)
- `/public/js/sse-client.js` - SSE manager (~2KB)

## Documentation

See: `/docs/claude/livecomponents-system.md`