feat: implement Phase 9.1 - Automation lanes UI

Added comprehensive automation lane UI with Ableton-style design:

**Automation Components:**
- AutomationLane: Canvas-based rendering with grid lines, curves, and points
- AutomationHeader: Parameter name, mode selector, value display
- AutomationPoint: Interactive draggable points with hover states

**Automation Utilities:**
- createAutomationLane/Point: Factory functions
- evaluateAutomationLinear: Interpolation between points
- formatAutomationValue: Display formatting with unit support
- addAutomationPoint/updateAutomationPoint/removeAutomationPoint

**Track Integration:**
- Added "A" toggle button in track control panel
- Automation lanes render below waveform
- Default lanes for Volume (orange) and Pan (green)
- Support for add/edit/delete automation points
- Click to add, drag to move, double-click to delete

**Visual Design:**
- Dark background with horizontal grid lines
- Colored curves with semi-transparent fill (20% opacity)
- 4-6px automation points, 8px on hover
- Mode indicators (Read/Write/Touch/Latch) with colors
- Value labels and current value display

Ready for playback integration in next step.

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
2025-11-18 18:34:35 +01:00
parent f6857bfc7b
commit 03a7e2e485
3 changed files with 274 additions and 2 deletions

View File

@@ -596,6 +596,27 @@ export function Track({
>
{track.mute ? <VolumeX className="h-3 w-3" /> : <Volume2 className="h-3 w-3" />}
</button>
{/* Automation Toggle */}
<button
onClick={() => {
onUpdateTrack(track.id, {
automation: {
...track.automation,
showAutomation: !track.automation?.showAutomation,
},
});
}}
className={cn(
'h-6 w-6 rounded flex items-center justify-center transition-all text-[10px] font-bold',
track.automation?.showAutomation
? 'bg-primary text-primary-foreground shadow-md shadow-primary/30'
: 'bg-card hover:bg-accent text-muted-foreground border border-border/50'
)}
title={track.automation?.showAutomation ? 'Hide automation' : 'Show automation'}
>
A
</button>
</div>
</div>
</div>