feat: complete Phase 9.3 - automation recording with write/touch/latch modes

Implemented comprehensive automation recording system for volume, pan, and effect parameters:

- Added automation recording modes:
  - Write: Records continuously during playback when values change
  - Touch: Records only while control is being touched/moved
  - Latch: Records from first touch until playback stops

- Implemented value change detection (0.001 threshold) to prevent infinite loops
- Fixed React setState-in-render errors by:
  - Using queueMicrotask() to defer state updates
  - Moving lane creation logic to useEffect
  - Properly memoizing touch handlers with useMemo

- Added proper value ranges for effect parameters:
  - Frequency: 20-20000 Hz
  - Q: 0.1-20
  - Gain: -40-40 dB

- Enhanced automation lane auto-creation with parameter-specific ranges
- Added touch callbacks to all parameter controls (volume, pan, effects)
- Implemented throttling (100ms) to avoid excessive automation points

Technical improvements:
- Used tracksRef and onRecordAutomationRef to ensure latest values in animation loops
- Added proper cleanup on playback stop
- Optimized recording to only trigger when values actually change

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

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

components/effects/EffectDevice.tsx

@@ -13,6 +13,10 @@ export interface EffectDeviceProps {
   onRemove?: () => void;
   onUpdateParameters?: (parameters: any) => void;
   onToggleExpanded?: () => void;
+  trackId?: string;
+  isPlaying?: boolean;
+  onParameterTouched?: (trackId: string, laneId: string, touched: boolean) => void;
+  automationLanes?: Array<{ id: string; parameterId: string; mode: string }>;
 }
 
 export function EffectDevice({
@@ -21,6 +25,10 @@ export function EffectDevice({
   onRemove,
   onUpdateParameters,
   onToggleExpanded,
+  trackId,
+  isPlaying,
+  onParameterTouched,
+  automationLanes,
 }: EffectDeviceProps) {
   const isExpanded = effect.expanded || false;
 
@@ -108,7 +116,14 @@ export function EffectDevice({
 
           {/* Device Body */}
           <div className="flex-1 min-h-0 overflow-y-auto custom-scrollbar p-3 bg-card/50">
-            <EffectParameters effect={effect} onUpdateParameters={onUpdateParameters} />
+            <EffectParameters
+              effect={effect}
+              onUpdateParameters={onUpdateParameters}
+              trackId={trackId}
+              isPlaying={isPlaying}
+              onParameterTouched={onParameterTouched}
+              automationLanes={automationLanes}
+            />
           </div>
         </>
       )}