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:
@@ -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>
|
||||
|
||||
Reference in New Issue
Block a user