feat: add touch event support to knobs and faders

Added comprehensive touch event handling for mobile/tablet support:

CircularKnob.tsx:
- Added handleTouchStart, handleTouchMove, handleTouchEnd handlers
- Touch events use same drag logic as mouse events
- Prevents default to avoid scrolling while adjusting

TrackFader.tsx:
- Added touch event handlers for vertical fader control
- Integrated with existing onTouchStart/onTouchEnd callbacks
- Supports touch-based automation recording

MasterFader.tsx:
- Added touch event handlers matching TrackFader
- Complete touch support for master volume control

All components now work seamlessly on touch-enabled devices.

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

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

components/ui/CircularKnob.tsx

@@ -91,17 +91,51 @@ export function CircularKnob({
     onTouchEnd?.();
   }, [onTouchEnd]);
 
+  const handleTouchStart = React.useCallback(
+    (e: React.TouchEvent) => {
+      e.preventDefault();
+      const touch = e.touches[0];
+      setIsDragging(true);
+      dragStartRef.current = {
+        x: touch.clientX,
+        y: touch.clientY,
+        value,
+      };
+      onTouchStart?.();
+    },
+    [value, onTouchStart]
+  );
+
+  const handleTouchMove = React.useCallback(
+    (e: TouchEvent) => {
+      if (isDragging && e.touches.length > 0) {
+        const touch = e.touches[0];
+        updateValue(touch.clientX, touch.clientY);
+      }
+    },
+    [isDragging, updateValue]
+  );
+
+  const handleTouchEnd = React.useCallback(() => {
+    setIsDragging(false);
+    onTouchEnd?.();
+  }, [onTouchEnd]);
+
   React.useEffect(() => {
     if (isDragging) {
       window.addEventListener('mousemove', handleMouseMove);
       window.addEventListener('mouseup', handleMouseUp);
+      window.addEventListener('touchmove', handleTouchMove);
+      window.addEventListener('touchend', handleTouchEnd);
 
       return () => {
         window.removeEventListener('mousemove', handleMouseMove);
         window.removeEventListener('mouseup', handleMouseUp);
+        window.removeEventListener('touchmove', handleTouchMove);
+        window.removeEventListener('touchend', handleTouchEnd);
       };
     }
-  }, [isDragging, handleMouseMove, handleMouseUp]);
+  }, [isDragging, handleMouseMove, handleMouseUp, handleTouchMove, handleTouchEnd]);
 
   // Calculate rotation angle (-135deg to 135deg, 270deg range)
   const percentage = (value - min) / (max - min);
@@ -148,6 +182,7 @@ export function CircularKnob({
       <div
         ref={knobRef}
         onMouseDown={handleMouseDown}
+        onTouchStart={handleTouchStart}
         className="relative cursor-pointer select-none"
         style={{ width: size, height: size }}
       >