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/controls/MasterFader.tsx

@@ -10,6 +10,8 @@ export interface MasterFaderProps {
   isClipping: boolean;
   onChange: (value: number) => void;
   onResetClip?: () => void;
+  onTouchStart?: () => void;
+  onTouchEnd?: () => void;
   className?: string;
 }
 
@@ -20,6 +22,8 @@ export function MasterFader({
   isClipping,
   onChange,
   onResetClip,
+  onTouchStart,
+  onTouchEnd,
   className,
 }: MasterFaderProps) {
   const [isDragging, setIsDragging] = React.useState(false);
@@ -43,6 +47,7 @@ export function MasterFader({
   const handleMouseDown = (e: React.MouseEvent) => {
     e.preventDefault();
     setIsDragging(true);
+    onTouchStart?.();
     updateValue(e.clientY);
   };
 
@@ -56,7 +61,30 @@ export function MasterFader({
 
   const handleMouseUp = React.useCallback(() => {
     setIsDragging(false);
-  }, []);
+    onTouchEnd?.();
+  }, [onTouchEnd]);
+
+  const handleTouchStart = (e: React.TouchEvent) => {
+    e.preventDefault();
+    const touch = e.touches[0];
+    setIsDragging(true);
+    onTouchStart?.();
+    updateValue(touch.clientY);
+  };
+
+  const handleTouchMove = React.useCallback(
+    (e: TouchEvent) => {
+      if (!isDragging || e.touches.length === 0) return;
+      const touch = e.touches[0];
+      updateValue(touch.clientY);
+    },
+    [isDragging]
+  );
+
+  const handleTouchEnd = React.useCallback(() => {
+    setIsDragging(false);
+    onTouchEnd?.();
+  }, [onTouchEnd]);
 
   const updateValue = (clientY: number) => {
     if (!containerRef.current) return;
@@ -72,12 +100,16 @@ export function MasterFader({
     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]);
 
   return (
     <div className={cn('flex gap-3', className)} style={{ marginLeft: '16px' }}>
@@ -94,6 +126,7 @@ export function MasterFader({
         ref={containerRef}
         className="relative w-12 h-40 bg-background/50 rounded-md border border-border/50 cursor-pointer"
         onMouseDown={handleMouseDown}
+        onTouchStart={handleTouchStart}
       >
         {/* Peak Meter (Horizontal Bar - Top) */}
         <div className="absolute inset-x-2 top-2 h-3 bg-background/80 rounded-sm overflow-hidden border border-border/30">

components/tracks/TrackFader.tsx

@@ -60,6 +60,28 @@ export function TrackFader({
     onTouchEnd?.();
   }, [onTouchEnd]);
 
+  const handleTouchStart = (e: React.TouchEvent) => {
+    e.preventDefault();
+    const touch = e.touches[0];
+    setIsDragging(true);
+    onTouchStart?.();
+    updateValue(touch.clientY);
+  };
+
+  const handleTouchMove = React.useCallback(
+    (e: TouchEvent) => {
+      if (!isDragging || e.touches.length === 0) return;
+      const touch = e.touches[0];
+      updateValue(touch.clientY);
+    },
+    [isDragging]
+  );
+
+  const handleTouchEnd = React.useCallback(() => {
+    setIsDragging(false);
+    onTouchEnd?.();
+  }, [onTouchEnd]);
+
   const updateValue = (clientY: number) => {
     if (!containerRef.current) return;
 
@@ -74,12 +96,16 @@ export function TrackFader({
     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]);
 
   return (
     <div className={cn('flex gap-2', className)} style={{ marginLeft: '16px' }}>
@@ -96,6 +122,7 @@ export function TrackFader({
         ref={containerRef}
         className="relative w-10 h-32 bg-background/50 rounded-md border border-border/50 cursor-pointer"
         onMouseDown={handleMouseDown}
+        onTouchStart={handleTouchStart}
       >
         {/* Peak Meter (Horizontal Bar - Top) */}
         <div className="absolute inset-x-1.5 top-1.5 h-2.5 bg-background/80 rounded-sm overflow-hidden border border-border/30">

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 }}
       >