feat: Ableton Live-style effects and complete automation system

Enhanced visual design:
- Improved device rack container with darker background and inner shadow
- Device cards now have rounded corners, shadows, and colored indicators
- Better visual separation between enabled/disabled effects
- Active devices highlighted with accent border

Complete automation infrastructure (Phase 9):
- Created comprehensive type system for automation lanes and points
- Implemented AutomationPoint component with drag-and-drop editing
- Implemented AutomationHeader with mode controls (Read/Write/Touch/Latch)
- Implemented AutomationLane with canvas-based curve rendering
- Integrated automation lanes into Track component below effects
- Created automation playback engine with real-time interpolation
- Added automation data persistence to localStorage

Automation features:
- Add/remove automation points by clicking/double-clicking
- Drag points to change time and value
- Multiple automation modes (Read, Write, Touch, Latch)
- Linear and step curve types (bezier planned)
- Adjustable lane height (60-180px)
- Show/hide automation per lane
- Real-time value display at playhead
- Color-coded lanes by parameter type
- Keyboard delete support (Delete/Backspace)

Track type updates:
- Added automation field to Track interface
- Updated track creation to initialize empty automation
- Updated localStorage save/load to include automation data

Files created:
- components/automation/AutomationPoint.tsx
- components/automation/AutomationHeader.tsx
- components/automation/AutomationLane.tsx
- lib/audio/automation/utils.ts (helper functions)
- lib/audio/automation/playback.ts (playback engine)
- types/automation.ts (complete type system)

Files modified:
- components/effects/EffectDevice.tsx (Ableton-style visual improvements)
- components/tracks/Track.tsx (automation lanes integration)
- types/track.ts (automation field added)
- lib/audio/track-utils.ts (automation initialization)
- lib/hooks/useMultiTrack.ts (automation persistence)

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

Co-Authored-By: Claude <noreply@anthropic.com>

types/automation.ts

@@ -0,0 +1,105 @@
+/**
+ * Automation system type definitions
+ * Based on Ableton Live's automation model
+ */
+
+/**
+ * Automation curve types
+ * - linear: Straight line between points
+ * - bezier: Curved line with control handles
+ * - step: Horizontal lines with vertical transitions (for discrete values)
+ */
+export type AutomationCurveType = 'linear' | 'bezier' | 'step';
+
+/**
+ * Automation recording/playback modes
+ * - read: Only playback automation
+ * - write: Record automation (replaces existing)
+ * - touch: Record while touching control, then return to read mode
+ * - latch: Record from first touch until stop, then return to read mode
+ */
+export type AutomationMode = 'read' | 'write' | 'touch' | 'latch';
+
+/**
+ * Single automation breakpoint
+ */
+export interface AutomationPoint {
+  id: string;
+  time: number; // Position in seconds from track start
+  value: number; // Parameter value (normalized 0-1)
+  curve: AutomationCurveType;
+  // Bezier control handles (only used when curve is 'bezier')
+  handleIn?: { x: number; y: number }; // Relative to point position
+  handleOut?: { x: number; y: number }; // Relative to point position
+}
+
+/**
+ * Parameter identifier for automation
+ * Examples:
+ * - 'volume' - Track volume
+ * - 'pan' - Track pan
+ * - 'mute' - Track mute (step curve)
+ * - 'effect.compressor-1.threshold' - Effect parameter
+ * - 'effect.delay-2.time' - Effect parameter
+ */
+export type AutomationParameterId = string;
+
+/**
+ * Single automation lane for a specific parameter
+ */
+export interface AutomationLane {
+  id: string;
+  trackId: string;
+  parameterId: AutomationParameterId;
+  parameterName: string; // Display name (e.g., "Volume", "Compressor Threshold")
+  visible: boolean; // Show/hide lane
+  height: number; // Lane height in pixels (user-adjustable, 60-120px)
+  points: AutomationPoint[];
+  mode: AutomationMode;
+  color?: string; // Optional color override (defaults to parameter type color)
+  // Value range for display (actual values are normalized 0-1)
+  valueRange: {
+    min: number; // Display minimum (e.g., 0 for volume)
+    max: number; // Display maximum (e.g., 1 for volume)
+    unit?: string; // Display unit (e.g., 'dB', '%', 'ms', 'Hz')
+    formatter?: (value: number) => string; // Custom value formatter
+  };
+}
+
+/**
+ * All automation lanes for a single track
+ */
+export interface TrackAutomation {
+  trackId: string;
+  lanes: AutomationLane[];
+  showAutomation: boolean; // Master show/hide toggle for all lanes
+}
+
+/**
+ * Complete automation data for entire project
+ */
+export interface ProjectAutomation {
+  tracks: Record<string, TrackAutomation>;
+}
+
+/**
+ * Automation parameter value at a specific time
+ * Used for real-time playback
+ */
+export interface AutomationValue {
+  parameterId: AutomationParameterId;
+  value: number;
+  time: number;
+}
+
+/**
+ * Helper type for creating new automation points
+ */
+export type CreateAutomationPointInput = Omit<AutomationPoint, 'id'>;
+
+/**
+ * Helper type for creating new automation lanes
+ */
+export type CreateAutomationLaneInput = Omit<AutomationLane, 'id' | 'points'> & {
+  points?: AutomationPoint[];
+};

types/track.ts

@@ -4,6 +4,7 @@
 
 import type { EffectChain } from '@/lib/audio/effects/chain';
 import type { Selection } from './selection';
+import type { AutomationLane } from './automation';
 
 export interface Track {
   id: string;
@@ -22,6 +23,12 @@ export interface Track {
   // Effects
   effectChain: EffectChain;
 
+  // Automation
+  automation: {
+    lanes: AutomationLane[];
+    showAutomation: boolean; // Master show/hide toggle
+  };
+
   // UI state
   collapsed: boolean;
   selected: boolean;