feat: redesign track and master controls with integrated fader+meters+pan

Unified design language across all tracks and master section:
- Created TrackFader component: vertical fader with horizontal meter bars
- Created TrackControls: integrated pan + fader + mute in compact layout
- Created MasterFader: similar design but larger for master output
- Created MasterControls: master version with pan + fader + mute
- Updated Track component to use new TrackControls
- Updated PlaybackControls to use new MasterControls
- Removed old VerticalFader and separate meter components

New features:
- Horizontal peak/RMS meter bars behind fader (top=peak, bottom=RMS)
- Color-coded meters (green/yellow/red based on dB levels)
- dB scale labels and numeric readouts
- Integrated mute button in controls
- Consistent circular pan knobs
- Professional DAW-style channel strip appearance
- Master section includes clip indicator

Visual improvements:
- Unified design across all tracks and master
- Compact vertical layout saves space
- Real-time level monitoring integrated with volume control
- Smooth animations and transitions

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

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

components/controls/MasterControls.tsx

@@ -0,0 +1,92 @@
+'use client';
+
+import * as React from 'react';
+import { Volume2, VolumeX } from 'lucide-react';
+import { Button } from '@/components/ui/Button';
+import { CircularKnob } from '@/components/ui/CircularKnob';
+import { MasterFader } from './MasterFader';
+import { cn } from '@/lib/utils/cn';
+
+export interface MasterControlsProps {
+  volume: number;
+  pan: number;
+  peakLevel: number;
+  rmsLevel: number;
+  isClipping: boolean;
+  isMuted?: boolean;
+  onVolumeChange: (volume: number) => void;
+  onPanChange: (pan: number) => void;
+  onMuteToggle: () => void;
+  onResetClip?: () => void;
+  className?: string;
+}
+
+export function MasterControls({
+  volume,
+  pan,
+  peakLevel,
+  rmsLevel,
+  isClipping,
+  isMuted = false,
+  onVolumeChange,
+  onPanChange,
+  onMuteToggle,
+  onResetClip,
+  className,
+}: MasterControlsProps) {
+  return (
+    <div className={cn(
+      'flex flex-col items-center gap-3 px-4 py-3 bg-muted/10 border-2 border-accent/30 rounded-lg',
+      className
+    )}>
+      {/* Master Label */}
+      <div className="text-[10px] font-bold text-accent uppercase tracking-wider">
+        Master
+      </div>
+
+      {/* Pan Control */}
+      <CircularKnob
+        value={pan}
+        onChange={onPanChange}
+        min={-1}
+        max={1}
+        step={0.01}
+        label="PAN"
+        size={48}
+        formatter={(value) => {
+          if (Math.abs(value) < 0.01) return 'C';
+          if (value < 0) return `${Math.abs(value * 100).toFixed(0)}L`;
+          return `${(value * 100).toFixed(0)}R`;
+        }}
+      />
+
+      {/* Master Fader with Integrated Meters */}
+      <MasterFader
+        value={volume}
+        peakLevel={peakLevel}
+        rmsLevel={rmsLevel}
+        isClipping={isClipping}
+        onChange={onVolumeChange}
+        onResetClip={onResetClip}
+      />
+
+      {/* Mute Button */}
+      <Button
+        variant={isMuted ? 'default' : 'outline'}
+        size="sm"
+        onClick={onMuteToggle}
+        title={isMuted ? 'Unmute' : 'Mute'}
+        className={cn(
+          'w-full h-8',
+          isMuted && 'bg-red-500/20 hover:bg-red-500/30 border-red-500/50'
+        )}
+      >
+        {isMuted ? (
+          <VolumeX className="h-4 w-4" />
+        ) : (
+          <Volume2 className="h-4 w-4" />
+        )}
+      </Button>
+    </div>
+  );
+}