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/ui/VerticalFader.tsx

@@ -12,6 +12,8 @@ export interface VerticalFaderProps {
   step?: number;
   className?: string;
   showDb?: boolean;
+  onTouchStart?: () => void;
+  onTouchEnd?: () => void;
 }
 
 export function VerticalFader({
@@ -23,6 +25,8 @@ export function VerticalFader({
   step = 0.01,
   className,
   showDb = true,
+  onTouchStart,
+  onTouchEnd,
 }: VerticalFaderProps) {
   const trackRef = React.useRef<HTMLDivElement>(null);
   const [isDragging, setIsDragging] = React.useState(false);
@@ -58,8 +62,9 @@ export function VerticalFader({
       e.preventDefault();
       setIsDragging(true);
       updateValue(e.clientY);
+      onTouchStart?.();
     },
-    [updateValue]
+    [updateValue, onTouchStart]
   );
 
   const handleMouseMove = React.useCallback(
@@ -73,7 +78,8 @@ export function VerticalFader({
 
   const handleMouseUp = React.useCallback(() => {
     setIsDragging(false);
-  }, []);
+    onTouchEnd?.();
+  }, [onTouchEnd]);
 
   React.useEffect(() => {
     if (isDragging) {