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/CircularKnob.tsx

@@ -13,6 +13,8 @@ export interface CircularKnobProps {
   className?: string;
   label?: string;
   formatValue?: (value: number) => string;
+  onTouchStart?: () => void;
+  onTouchEnd?: () => void;
 }
 
 export function CircularKnob({
@@ -25,6 +27,8 @@ export function CircularKnob({
   className,
   label,
   formatValue,
+  onTouchStart,
+  onTouchEnd,
 }: CircularKnobProps) {
   const knobRef = React.useRef<HTMLDivElement>(null);
   const [isDragging, setIsDragging] = React.useState(false);
@@ -68,8 +72,9 @@ export function CircularKnob({
         y: e.clientY,
         value,
       };
+      onTouchStart?.();
     },
-    [value]
+    [value, onTouchStart]
   );
 
   const handleMouseMove = React.useCallback(
@@ -83,7 +88,8 @@ export function CircularKnob({
 
   const handleMouseUp = React.useCallback(() => {
     setIsDragging(false);
-  }, []);
+    onTouchEnd?.();
+  }, [onTouchEnd]);
 
   React.useEffect(() => {
     if (isDragging) {