feat: redesign track controls to Ableton Live style

Major UI Redesign:
- Reduced track control width from 288px to 192px (33% narrower)
- Replaced horizontal sliders with vertical fader and circular knob
- More compact, professional appearance matching Ableton Live
- Global settings dialog replaces inline recording settings

New Components Created:
- VerticalFader.tsx: Vertical volume control with integrated level meter
  - Shows volume dB at top, level dB at bottom
  - Level meter displayed as background gradient
  - Draggable handle for precise control

- CircularKnob.tsx: Rotary pan control
  - SVG-based rotary knob with arc indicator
  - Vertical drag interaction (200px sensitivity)
  - Displays L/C/R values

- GlobalSettingsDialog.tsx: Centralized settings
  - Tabbed interface (Recording, Playback, Interface)
  - Recording settings moved from inline to dialog
  - Accessible via gear icon in header
  - Modal dialog with backdrop

Track Control Panel Changes:
- Track name: More compact (text-xs)
- Buttons: Smaller (h-6 w-6), text-based S/M buttons
- Record button: Circle indicator instead of icon
- Pan: Circular knob (40px) instead of horizontal slider
- Volume: Vertical fader with integrated meter
- Removed: Inline recording settings panel

Header Changes:
- Added Settings button (gear icon) before ThemeToggle
- Opens GlobalSettingsDialog on click
- Clean, accessible from anywhere

Props Cleanup:
- Removed recordingSettings props from Track/TrackList
- Removed onInputGainChange, onRecordMonoChange, onSampleRateChange props
- Settings now managed globally via dialog

Technical Details:
- VerticalFader uses mouse drag for smooth control
- CircularKnob rotates -135° to +135° (270° range)
- Global event listeners for drag interactions
- Proper cleanup on unmount

Benefits:
✅ 33% narrower tracks = more tracks visible
✅ Professional Ableton-style appearance
✅ Cleaner, less cluttered interface
✅ Global settings accessible anywhere
✅ Better use of vertical space
✅ Consistent with industry-standard DAWs

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

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

components/editor/AudioEditor.tsx

@@ -1,10 +1,11 @@
 'use client';
 
 import * as React from 'react';
-import { Music, Plus, Upload, Trash2 } from 'lucide-react';
+import { Music, Plus, Upload, Trash2, Settings } from 'lucide-react';
 import { PlaybackControls } from './PlaybackControls';
 import { ThemeToggle } from '@/components/layout/ThemeToggle';
 import { CommandPalette } from '@/components/ui/CommandPalette';
+import { GlobalSettingsDialog } from '@/components/settings/GlobalSettingsDialog';
 import { Button } from '@/components/ui/Button';
 import type { CommandAction } from '@/components/ui/CommandPalette';
 import { useMultiTrack } from '@/lib/hooks/useMultiTrack';
@@ -36,6 +37,7 @@ export function AudioEditor() {
   const [punchInTime, setPunchInTime] = React.useState(0);
   const [punchOutTime, setPunchOutTime] = React.useState(0);
   const [overdubEnabled, setOverdubEnabled] = React.useState(false);
+  const [settingsDialogOpen, setSettingsDialogOpen] = React.useState(false);
 
   const { addToast } = useToast();
 
@@ -663,9 +665,17 @@ export function AudioEditor() {
           </div>
         </div>
 
-        {/* Right: Command Palette + Theme Toggle */}
+        {/* Right: Command Palette + Settings + Theme Toggle */}
         <div className="flex items-center gap-2 flex-shrink-0">
           <CommandPalette actions={commandActions} />
+          <Button
+            variant="ghost"
+            size="icon"
+            onClick={() => setSettingsDialogOpen(true)}
+            title="Settings"
+          >
+            <Settings className="h-5 w-5" />
+          </Button>
           <ThemeToggle />
         </div>
       </header>
@@ -693,10 +703,6 @@ export function AudioEditor() {
               recordingTrackId={recordingTrackId}
               recordingLevel={recordingState.inputLevel}
               trackLevels={trackLevels}
-              recordingSettings={recordingSettings}
-              onInputGainChange={setInputGain}
-              onRecordMonoChange={setRecordMono}
-              onSampleRateChange={setSampleRate}
             />
           </div>
 
@@ -738,6 +744,16 @@ export function AudioEditor() {
         onClose={() => setImportDialogOpen(false)}
         onImportTrack={handleImportTrack}
       />
+
+      {/* Global Settings Dialog */}
+      <GlobalSettingsDialog
+        open={settingsDialogOpen}
+        onClose={() => setSettingsDialogOpen(false)}
+        recordingSettings={recordingSettings}
+        onInputGainChange={setInputGain}
+        onRecordMonoChange={setRecordMono}
+        onSampleRateChange={setSampleRate}
+      />
     </>
   );
 }

components/settings/GlobalSettingsDialog.tsx

@@ -0,0 +1,189 @@
+'use client';
+
+import * as React from 'react';
+import { X } from 'lucide-react';
+import { Button } from '@/components/ui/Button';
+import { RecordingSettings } from '@/components/recording/RecordingSettings';
+import { cn } from '@/lib/utils/cn';
+import type { RecordingSettings as RecordingSettingsType } from '@/lib/hooks/useRecording';
+
+export interface GlobalSettingsDialogProps {
+  open: boolean;
+  onClose: () => void;
+  recordingSettings: RecordingSettingsType;
+  onInputGainChange: (gain: number) => void;
+  onRecordMonoChange: (mono: boolean) => void;
+  onSampleRateChange: (sampleRate: number) => void;
+}
+
+type TabType = 'recording' | 'playback' | 'interface';
+
+export function GlobalSettingsDialog({
+  open,
+  onClose,
+  recordingSettings,
+  onInputGainChange,
+  onRecordMonoChange,
+  onSampleRateChange,
+}: GlobalSettingsDialogProps) {
+  const [activeTab, setActiveTab] = React.useState<TabType>('recording');
+
+  if (!open) return null;
+
+  return (
+    <>
+      {/* Backdrop */}
+      <div
+        className="fixed inset-0 bg-background/80 backdrop-blur-sm z-40"
+        onClick={onClose}
+      />
+
+      {/* Dialog */}
+      <div className="fixed left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 w-full max-w-2xl z-50">
+        <div className="bg-card border border-border rounded-lg shadow-2xl overflow-hidden">
+          {/* Header */}
+          <div className="flex items-center justify-between px-6 py-4 border-b border-border">
+            <h2 className="text-lg font-semibold">Settings</h2>
+            <Button
+              variant="ghost"
+              size="icon-sm"
+              onClick={onClose}
+              title="Close"
+            >
+              <X className="h-4 w-4" />
+            </Button>
+          </div>
+
+          {/* Tabs */}
+          <div className="flex border-b border-border bg-muted/30">
+            <button
+              onClick={() => setActiveTab('recording')}
+              className={cn(
+                'px-6 py-3 text-sm font-medium transition-colors relative',
+                activeTab === 'recording'
+                  ? 'text-foreground bg-card'
+                  : 'text-muted-foreground hover:text-foreground hover:bg-muted/50'
+              )}
+            >
+              Recording
+              {activeTab === 'recording' && (
+                <div className="absolute bottom-0 left-0 right-0 h-0.5 bg-primary" />
+              )}
+            </button>
+            <button
+              onClick={() => setActiveTab('playback')}
+              className={cn(
+                'px-6 py-3 text-sm font-medium transition-colors relative',
+                activeTab === 'playback'
+                  ? 'text-foreground bg-card'
+                  : 'text-muted-foreground hover:text-foreground hover:bg-muted/50'
+              )}
+            >
+              Playback
+              {activeTab === 'playback' && (
+                <div className="absolute bottom-0 left-0 right-0 h-0.5 bg-primary" />
+              )}
+            </button>
+            <button
+              onClick={() => setActiveTab('interface')}
+              className={cn(
+                'px-6 py-3 text-sm font-medium transition-colors relative',
+                activeTab === 'interface'
+                  ? 'text-foreground bg-card'
+                  : 'text-muted-foreground hover:text-foreground hover:bg-muted/50'
+              )}
+            >
+              Interface
+              {activeTab === 'interface' && (
+                <div className="absolute bottom-0 left-0 right-0 h-0.5 bg-primary" />
+              )}
+            </button>
+          </div>
+
+          {/* Content */}
+          <div className="p-6 max-h-[60vh] overflow-y-auto custom-scrollbar">
+            {activeTab === 'recording' && (
+              <div className="space-y-4">
+                <div>
+                  <h3 className="text-sm font-medium mb-3">Recording Settings</h3>
+                  <RecordingSettings
+                    settings={recordingSettings}
+                    onInputGainChange={onInputGainChange}
+                    onRecordMonoChange={onRecordMonoChange}
+                    onSampleRateChange={onSampleRateChange}
+                    className="border-0 bg-transparent p-0"
+                  />
+                </div>
+
+                <div className="pt-4 border-t border-border">
+                  <h3 className="text-sm font-medium mb-2">Note</h3>
+                  <p className="text-sm text-muted-foreground">
+                    These settings apply globally to all recordings. Arm a track (red button)
+                    to enable recording on that specific track.
+                  </p>
+                </div>
+              </div>
+            )}
+
+            {activeTab === 'playback' && (
+              <div className="space-y-4">
+                <div>
+                  <h3 className="text-sm font-medium mb-2">Playback Settings</h3>
+                  <p className="text-sm text-muted-foreground mb-4">
+                    Configure audio playback preferences.
+                  </p>
+
+                  <div className="space-y-3 text-sm text-muted-foreground">
+                    <div className="flex items-center justify-between p-3 bg-muted/50 rounded">
+                      <span>Buffer Size</span>
+                      <span className="font-mono">Auto</span>
+                    </div>
+                    <div className="flex items-center justify-between p-3 bg-muted/50 rounded">
+                      <span>Output Latency</span>
+                      <span className="font-mono">~20ms</span>
+                    </div>
+                    <p className="text-xs italic">
+                      Advanced playback settings coming soon...
+                    </p>
+                  </div>
+                </div>
+              </div>
+            )}
+
+            {activeTab === 'interface' && (
+              <div className="space-y-4">
+                <div>
+                  <h3 className="text-sm font-medium mb-2">Interface Settings</h3>
+                  <p className="text-sm text-muted-foreground mb-4">
+                    Customize the editor appearance and behavior.
+                  </p>
+
+                  <div className="space-y-3 text-sm text-muted-foreground">
+                    <div className="flex items-center justify-between p-3 bg-muted/50 rounded">
+                      <span>Theme</span>
+                      <span>Use theme toggle in header</span>
+                    </div>
+                    <div className="flex items-center justify-between p-3 bg-muted/50 rounded">
+                      <span>Default Track Height</span>
+                      <span className="font-mono">180px</span>
+                    </div>
+                    <p className="text-xs italic">
+                      More interface options coming soon...
+                    </p>
+                  </div>
+                </div>
+              </div>
+            )}
+          </div>
+
+          {/* Footer */}
+          <div className="flex items-center justify-end gap-2 px-6 py-4 border-t border-border bg-muted/30">
+            <Button variant="default" onClick={onClose}>
+              Done
+            </Button>
+          </div>
+        </div>
+      </div>
+    </>
+  );
+}

components/tracks/Track.tsx

@@ -9,9 +9,8 @@ import { cn } from '@/lib/utils/cn';
 import { EffectBrowser } from '@/components/effects/EffectBrowser';
 import { EffectDevice } from '@/components/effects/EffectDevice';
 import { createEffect, type EffectType } from '@/lib/audio/effects/chain';
-import { InputLevelMeter } from '@/components/recording/InputLevelMeter';
+import { VerticalFader } from '@/components/ui/VerticalFader';
-import { RecordingSettings } from '@/components/recording/RecordingSettings';
+import { CircularKnob } from '@/components/ui/CircularKnob';
-import type { RecordingSettings as RecordingSettingsType } from '@/lib/hooks/useRecording';
 
 export interface TrackProps {
   track: TrackType;
@@ -38,10 +37,6 @@ export interface TrackProps {
   isRecording?: boolean;
   recordingLevel?: number;
   playbackLevel?: number;
-  recordingSettings?: RecordingSettingsType;
-  onInputGainChange?: (gain: number) => void;
-  onRecordMonoChange?: (mono: boolean) => void;
-  onSampleRateChange?: (sampleRate: number) => void;
 }
 
 export function Track({
@@ -69,10 +64,6 @@ export function Track({
   isRecording = false,
   recordingLevel = 0,
   playbackLevel = 0,
-  recordingSettings,
-  onInputGainChange,
-  onRecordMonoChange,
-  onSampleRateChange,
 }: TrackProps) {
   const canvasRef = React.useRef<HTMLCanvasElement>(null);
   const containerRef = React.useRef<HTMLDivElement>(null);
@@ -411,28 +402,29 @@ export function Track({
     >
       {/* Top: Track Row (Control Panel + Waveform) */}
       <div className="flex" style={{ height: trackHeight }}>
-        {/* Left: Track Control Panel (Fixed Width) */}
+        {/* Left: Track Control Panel (Fixed Width) - Ableton Style */}
         <div
-          className="w-72 flex-shrink-0 bg-card border-r border-border border-b border-border p-3 flex flex-col gap-2"
+          className="w-48 flex-shrink-0 bg-card border-r border-border border-b border-border p-2 flex flex-col gap-2"
           onClick={(e) => e.stopPropagation()}
         >
-        {/* Track Name & Collapse Toggle */}
+        {/* Track Name (Full Width) */}
-        <div className="flex items-center gap-2">
+        <div className="flex items-center gap-1">
           <Button
             variant="ghost"
             size="icon-sm"
             onClick={onToggleCollapse}
             title={track.collapsed ? 'Expand track' : 'Collapse track'}
+            className="flex-shrink-0 h-6 w-6"
           >
             {track.collapsed ? (
-              <ChevronRight className="h-4 w-4" />
+              <ChevronRight className="h-3 w-3" />
             ) : (
-              <ChevronDown className="h-4 w-4" />
+              <ChevronDown className="h-3 w-3" />
             )}
           </Button>
 
           <div
-            className="w-1 h-8 rounded-full flex-shrink-0"
+            className="w-1 h-6 rounded-full flex-shrink-0"
             style={{ backgroundColor: track.color }}
           />
 
@@ -445,19 +437,22 @@ export function Track({
                 onChange={(e) => setNameInput(e.target.value)}
                 onBlur={handleNameBlur}
                 onKeyDown={handleNameKeyDown}
-                className="w-full px-2 py-1 text-sm font-medium bg-background border border-border rounded"
+                className="w-full px-1 py-0.5 text-xs font-medium bg-background border border-border rounded"
               />
             ) : (
               <div
                 onClick={handleNameClick}
-                className="px-2 py-1 text-sm font-medium text-foreground truncate cursor-pointer hover:bg-accent rounded"
+                className="px-1 py-0.5 text-xs font-medium text-foreground truncate cursor-pointer hover:bg-accent rounded"
                 title={String(track.name || 'Untitled Track')}
               >
                 {String(track.name || 'Untitled Track')}
               </div>
             )}
           </div>
+        </div>
 
+        {/* Compact Button Row */}
+        <div className="flex items-center justify-center gap-1">
           {/* Record Enable Button */}
           {onToggleRecordEnable && (
             <Button
@@ -466,11 +461,17 @@ export function Track({
               onClick={onToggleRecordEnable}
               title="Arm track for recording"
               className={cn(
+                'h-6 w-6',
                 track.recordEnabled && 'bg-red-500/20 hover:bg-red-500/30',
                 isRecording && 'animate-pulse'
               )}
             >
-              <Mic className={cn('h-4 w-4', track.recordEnabled && 'text-red-500')} />
+              <div
+                className={cn(
+                  'h-3 w-3 rounded-full border-2',
+                  track.recordEnabled ? 'bg-red-500 border-red-500' : 'border-current'
+                )}
+              />
             </Button>
           )}
 
@@ -480,9 +481,12 @@ export function Track({
             size="icon-sm"
             onClick={onToggleSolo}
             title="Solo track"
-            className={cn(track.solo && 'bg-yellow-500/20 hover:bg-yellow-500/30')}
+            className={cn(
+              'h-6 w-6 text-[10px] font-bold',
+              track.solo && 'bg-yellow-500/20 hover:bg-yellow-500/30 text-yellow-500'
+            )}
           >
-            <Headphones className={cn('h-4 w-4', track.solo && 'text-yellow-500')} />
+            S
           </Button>
 
           {/* Mute Button */}
@@ -491,13 +495,12 @@ export function Track({
             size="icon-sm"
             onClick={onToggleMute}
             title="Mute track"
-            className={cn(track.mute && 'bg-red-500/20 hover:bg-red-500/30')}
+            className={cn(
-          >
+              'h-6 w-6 text-[10px] font-bold',
-            {track.mute ? (
+              track.mute && 'bg-red-500/20 hover:bg-red-500/30 text-red-500'
-              <VolumeX className="h-4 w-4 text-red-500" />
-            ) : (
-              <Volume2 className="h-4 w-4" />
             )}
+          >
+            M
           </Button>
 
           {/* Remove Button */}
@@ -506,105 +509,37 @@ export function Track({
             size="icon-sm"
             onClick={onRemove}
             title="Remove track"
-            className="text-destructive hover:text-destructive hover:bg-destructive/10"
+            className="h-6 w-6 text-destructive hover:text-destructive hover:bg-destructive/10"
           >
-            <Trash2 className="h-4 w-4" />
+            <Trash2 className="h-3 w-3" />
           </Button>
         </div>
 
         {/* Track Controls - Only show when not collapsed */}
         {!track.collapsed && (
-          <>
+          <div className="flex-1 flex flex-col items-center justify-center gap-2 py-2">
-            {/* Volume */}
+            {/* Pan Knob */}
-            <div className="flex items-center gap-2">
+            <CircularKnob
-              <label className="text-xs text-muted-foreground flex items-center gap-1 w-16 flex-shrink-0">
+              value={track.pan}
-                {track.volume === 0 ? (
+              onChange={onPanChange}
-                  <VolumeX className="h-3.5 w-3.5" />
+              min={-1}
-                ) : (
+              max={1}
-                  <Volume2 className="h-3.5 w-3.5" />
+              step={0.01}
-                )}
+              size={40}
-                Volume
+              label="PAN"
-              </label>
+            />
-              <div className="flex-1">
-                <Slider
-                  value={track.volume}
-                  onChange={onVolumeChange}
-                  min={0}
-                  max={1}
-                  step={0.01}
-                />
-              </div>
-              <span className="text-xs text-muted-foreground w-10 text-right flex-shrink-0">
-                {Math.round(track.volume * 100)}%
-              </span>
-            </div>
 
-            {/* Pan */}
+            {/* Vertical Volume Fader with integrated meter */}
-            <div className="flex items-center gap-2">
+            <VerticalFader
-              <label className="text-xs text-muted-foreground flex items-center gap-1 w-16 flex-shrink-0">
+              value={track.volume}
-                <UnfoldHorizontal className="h-3.5 w-3.5" />
+              level={track.recordEnabled || isRecording ? recordingLevel : playbackLevel}
-                Pan
+              onChange={onVolumeChange}
-              </label>
+              min={0}
-              <div className="flex-1">
+              max={1}
-                <Slider
+              step={0.01}
-                  value={track.pan}
+              showDb={true}
-                  onChange={onPanChange}
+            />
-                  min={-1}
+          </div>
-                  max={1}
-                  step={0.01}
-                />
-              </div>
-              <span className="text-xs text-muted-foreground w-10 text-right flex-shrink-0">
-                {track.pan === 0
-                  ? 'C'
-                  : track.pan < 0
-                  ? `L${Math.abs(Math.round(track.pan * 100))}`
-                  : `R${Math.round(track.pan * 100)}`}
-              </span>
-            </div>
-
-            {/* Level Meter (shows input when recording, output level otherwise) */}
-            <div className="flex items-center gap-2">
-              <label className="text-xs text-muted-foreground flex items-center gap-1 w-16 flex-shrink-0">
-                {track.recordEnabled || isRecording ? (
-                  <>
-                    <Mic className="h-3.5 w-3.5" />
-                    Input
-                  </>
-                ) : (
-                  <>
-                    <Gauge className="h-3.5 w-3.5" />
-                    Level
-                  </>
-                )}
-              </label>
-              <div className="flex-1">
-                <InputLevelMeter
-                  level={track.recordEnabled || isRecording ? recordingLevel : playbackLevel}
-                  orientation="horizontal"
-                />
-              </div>
-              <span className="text-xs text-muted-foreground w-12 text-right flex-shrink-0 font-mono">
-                {(() => {
-                  const level = track.recordEnabled || isRecording ? recordingLevel : playbackLevel;
-                  // Convert normalized (0-1) back to dB
-                  // normalized = (dB - (-60)) / 60, so dB = (normalized * 60) - 60
-                  const db = (level * 60) - 60;
-                  return level === 0 ? '-∞' : `${db.toFixed(0)}`;
-                })()}
-              </span>
-            </div>
-
-            {/* Recording Settings - Show when track is armed */}
-            {track.recordEnabled && recordingSettings && onInputGainChange && onRecordMonoChange && onSampleRateChange && (
-              <RecordingSettings
-                settings={recordingSettings}
-                onInputGainChange={onInputGainChange}
-                onRecordMonoChange={onRecordMonoChange}
-                onSampleRateChange={onSampleRateChange}
-              />
-            )}
-          </>
         )}
       </div>
 

components/tracks/TrackList.tsx

@@ -7,7 +7,6 @@ import { Track } from './Track';
 import { ImportTrackDialog } from './ImportTrackDialog';
 import type { Track as TrackType } from '@/types/track';
 import { createEffect, type EffectType, EFFECT_NAMES } from '@/lib/audio/effects/chain';
-import type { RecordingSettings } from '@/lib/hooks/useRecording';
 
 export interface TrackListProps {
   tracks: TrackType[];
@@ -26,10 +25,6 @@ export interface TrackListProps {
   recordingTrackId?: string | null;
   recordingLevel?: number;
   trackLevels?: Record<string, number>;
-  recordingSettings?: RecordingSettings;
-  onInputGainChange?: (gain: number) => void;
-  onRecordMonoChange?: (mono: boolean) => void;
-  onSampleRateChange?: (sampleRate: number) => void;
 }
 
 export function TrackList({
@@ -49,10 +44,6 @@ export function TrackList({
   recordingTrackId,
   recordingLevel = 0,
   trackLevels = {},
-  recordingSettings,
-  onInputGainChange,
-  onRecordMonoChange,
-  onSampleRateChange,
 }: TrackListProps) {
   const [importDialogOpen, setImportDialogOpen] = React.useState(false);
 
@@ -176,10 +167,6 @@ export function TrackList({
             isRecording={recordingTrackId === track.id}
             recordingLevel={recordingTrackId === track.id ? recordingLevel : 0}
             playbackLevel={trackLevels[track.id] || 0}
-            recordingSettings={recordingSettings}
-            onInputGainChange={onInputGainChange}
-            onRecordMonoChange={onRecordMonoChange}
-            onSampleRateChange={onSampleRateChange}
           />
         ))}
       </div>

components/ui/CircularKnob.tsx

@@ -0,0 +1,183 @@
+'use client';
+
+import * as React from 'react';
+import { cn } from '@/lib/utils/cn';
+
+export interface CircularKnobProps {
+  value: number; // -1.0 to 1.0 for pan
+  onChange: (value: number) => void;
+  min?: number;
+  max?: number;
+  step?: number;
+  size?: number;
+  className?: string;
+  label?: string;
+  formatValue?: (value: number) => string;
+}
+
+export function CircularKnob({
+  value,
+  onChange,
+  min = -1,
+  max = 1,
+  step = 0.01,
+  size = 48,
+  className,
+  label,
+  formatValue,
+}: CircularKnobProps) {
+  const knobRef = React.useRef<HTMLDivElement>(null);
+  const [isDragging, setIsDragging] = React.useState(false);
+  const dragStartRef = React.useRef({ x: 0, y: 0, value: 0 });
+
+  const updateValue = React.useCallback(
+    (clientX: number, clientY: number) => {
+      if (!knobRef.current) return;
+
+      const rect = knobRef.current.getBoundingClientRect();
+      const centerX = rect.left + rect.width / 2;
+      const centerY = rect.top + rect.height / 2;
+
+      // Calculate vertical drag distance from start
+      const deltaY = dragStartRef.current.y - clientY;
+      const sensitivity = 200; // pixels for full range
+      const range = max - min;
+      const delta = (deltaY / sensitivity) * range;
+
+      let newValue = dragStartRef.current.value + delta;
+
+      // Snap to step
+      if (step) {
+        newValue = Math.round(newValue / step) * step;
+      }
+
+      // Clamp to range
+      newValue = Math.max(min, Math.min(max, newValue));
+
+      onChange(newValue);
+    },
+    [min, max, step, onChange]
+  );
+
+  const handleMouseDown = React.useCallback(
+    (e: React.MouseEvent) => {
+      e.preventDefault();
+      setIsDragging(true);
+      dragStartRef.current = {
+        x: e.clientX,
+        y: e.clientY,
+        value,
+      };
+    },
+    [value]
+  );
+
+  const handleMouseMove = React.useCallback(
+    (e: MouseEvent) => {
+      if (isDragging) {
+        updateValue(e.clientX, e.clientY);
+      }
+    },
+    [isDragging, updateValue]
+  );
+
+  const handleMouseUp = React.useCallback(() => {
+    setIsDragging(false);
+  }, []);
+
+  React.useEffect(() => {
+    if (isDragging) {
+      window.addEventListener('mousemove', handleMouseMove);
+      window.addEventListener('mouseup', handleMouseUp);
+
+      return () => {
+        window.removeEventListener('mousemove', handleMouseMove);
+        window.removeEventListener('mouseup', handleMouseUp);
+      };
+    }
+  }, [isDragging, handleMouseMove, handleMouseUp]);
+
+  // Calculate rotation angle (-135deg to 135deg, 270deg range)
+  const percentage = (value - min) / (max - min);
+  const angle = -135 + percentage * 270;
+
+  const displayValue = formatValue
+    ? formatValue(value)
+    : value === 0
+    ? 'C'
+    : value < 0
+    ? `L${Math.abs(Math.round(value * 100))}`
+    : `R${Math.round(value * 100)}`;
+
+  return (
+    <div className={cn('flex flex-col items-center gap-1', className)}>
+      {label && (
+        <div className="text-[10px] text-muted-foreground uppercase tracking-wide">
+          {label}
+        </div>
+      )}
+
+      <div
+        ref={knobRef}
+        onMouseDown={handleMouseDown}
+        className="relative cursor-pointer select-none"
+        style={{ width: size, height: size }}
+      >
+        {/* Outer ring */}
+        <svg
+          width={size}
+          height={size}
+          viewBox={`0 0 ${size} ${size}`}
+          className="absolute inset-0"
+        >
+          {/* Background arc */}
+          <circle
+            cx={size / 2}
+            cy={size / 2}
+            r={size / 2 - 4}
+            fill="none"
+            stroke="currentColor"
+            strokeWidth="2"
+            className="text-muted/30"
+          />
+
+          {/* Value arc */}
+          <circle
+            cx={size / 2}
+            cy={size / 2}
+            r={size / 2 - 4}
+            fill="none"
+            stroke="currentColor"
+            strokeWidth="3"
+            strokeLinecap="round"
+            className="text-primary"
+            strokeDasharray={`${(percentage * 270 * Math.PI * (size / 2 - 4)) / 180} ${(Math.PI * 2 * (size / 2 - 4))}`}
+            transform={`rotate(-225 ${size / 2} ${size / 2})`}
+          />
+        </svg>
+
+        {/* Knob body */}
+        <div
+          className="absolute inset-0 rounded-full bg-card border-2 border-border shadow-sm flex items-center justify-center transition-transform hover:scale-105 active:scale-95"
+          style={{
+            transform: `rotate(${angle}deg)`,
+            margin: '4px',
+          }}
+        >
+          {/* Indicator line */}
+          <div className="absolute top-1 left-1/2 w-0.5 h-2 bg-primary rounded-full -translate-x-1/2" />
+        </div>
+
+        {/* Center dot (for zero position) */}
+        {value === 0 && (
+          <div className="absolute top-1/2 left-1/2 w-1 h-1 bg-primary rounded-full -translate-x-1/2 -translate-y-1/2" />
+        )}
+      </div>
+
+      {/* Value Display */}
+      <div className="text-[10px] font-medium text-foreground min-w-[32px] text-center">
+        {displayValue}
+      </div>
+    </div>
+  );
+}

components/ui/VerticalFader.tsx

@@ -0,0 +1,165 @@
+'use client';
+
+import * as React from 'react';
+import { cn } from '@/lib/utils/cn';
+
+export interface VerticalFaderProps {
+  value: number; // 0.0 to 1.0
+  level?: number; // 0.0 to 1.0 (for level meter display)
+  onChange: (value: number) => void;
+  min?: number;
+  max?: number;
+  step?: number;
+  className?: string;
+  showDb?: boolean;
+}
+
+export function VerticalFader({
+  value,
+  level = 0,
+  onChange,
+  min = 0,
+  max = 1,
+  step = 0.01,
+  className,
+  showDb = true,
+}: VerticalFaderProps) {
+  const trackRef = React.useRef<HTMLDivElement>(null);
+  const [isDragging, setIsDragging] = React.useState(false);
+
+  const updateValue = React.useCallback(
+    (clientY: number) => {
+      if (!trackRef.current) return;
+
+      const rect = trackRef.current.getBoundingClientRect();
+      const height = rect.height;
+      const y = Math.max(0, Math.min(height, clientY - rect.top));
+
+      // Invert Y (top = max, bottom = min)
+      const percentage = 1 - y / height;
+      const range = max - min;
+      let newValue = min + percentage * range;
+
+      // Snap to step
+      if (step) {
+        newValue = Math.round(newValue / step) * step;
+      }
+
+      // Clamp to range
+      newValue = Math.max(min, Math.min(max, newValue));
+
+      onChange(newValue);
+    },
+    [min, max, step, onChange]
+  );
+
+  const handleMouseDown = React.useCallback(
+    (e: React.MouseEvent) => {
+      e.preventDefault();
+      setIsDragging(true);
+      updateValue(e.clientY);
+    },
+    [updateValue]
+  );
+
+  const handleMouseMove = React.useCallback(
+    (e: MouseEvent) => {
+      if (isDragging) {
+        updateValue(e.clientY);
+      }
+    },
+    [isDragging, updateValue]
+  );
+
+  const handleMouseUp = React.useCallback(() => {
+    setIsDragging(false);
+  }, []);
+
+  React.useEffect(() => {
+    if (isDragging) {
+      window.addEventListener('mousemove', handleMouseMove);
+      window.addEventListener('mouseup', handleMouseUp);
+
+      return () => {
+        window.removeEventListener('mousemove', handleMouseMove);
+        window.removeEventListener('mouseup', handleMouseUp);
+      };
+    }
+  }, [isDragging, handleMouseMove, handleMouseUp]);
+
+  // Convert value to percentage (0-100)
+  const valuePercentage = ((value - min) / (max - min)) * 100;
+
+  // Convert level to dB for display
+  const db = value === 0 ? -Infinity : 20 * Math.log10(value);
+  const levelDb = level === 0 ? -Infinity : (level * 60) - 60;
+
+  return (
+    <div className={cn('flex flex-col items-center gap-1', className)}>
+      {/* dB Display */}
+      {showDb && (
+        <div className="text-[10px] font-mono text-muted-foreground min-w-[32px] text-center">
+          {db === -Infinity ? '-∞' : `${db.toFixed(1)}`}
+        </div>
+      )}
+
+      {/* Fader Track */}
+      <div
+        ref={trackRef}
+        onMouseDown={handleMouseDown}
+        className="relative w-8 h-32 bg-muted rounded cursor-pointer select-none overflow-hidden"
+      >
+        {/* Level Meter Background (green/yellow/red gradient) */}
+        <div
+          className="absolute inset-0 opacity-40"
+          style={{
+            background: 'linear-gradient(to top, rgb(34, 197, 94) 0%, rgb(34, 197, 94) 70%, rgb(234, 179, 8) 85%, rgb(239, 68, 68) 100%)',
+          }}
+        />
+
+        {/* Level Meter (actual level) */}
+        <div
+          className="absolute bottom-0 left-0 right-0 transition-all duration-75"
+          style={{
+            height: `${level * 100}%`,
+            background: 'linear-gradient(to top, rgb(34, 197, 94) 0%, rgb(34, 197, 94) 70%, rgb(234, 179, 8) 85%, rgb(239, 68, 68) 100%)',
+            opacity: 0.6,
+          }}
+        />
+
+        {/* Volume Value Fill */}
+        <div
+          className="absolute bottom-0 left-0 right-0 bg-primary/30 border-t-2 border-primary"
+          style={{ height: `${valuePercentage}%` }}
+        />
+
+        {/* Fader Handle */}
+        <div
+          className="absolute left-0 right-0 h-3 -ml-1 -mr-1 bg-primary rounded-sm shadow-lg cursor-grab active:cursor-grabbing"
+          style={{
+            bottom: `calc(${valuePercentage}% - 6px)`,
+            width: 'calc(100% + 8px)',
+          }}
+        />
+
+        {/* Scale Marks */}
+        <div className="absolute inset-0 pointer-events-none">
+          {[0.25, 0.5, 0.75].map((mark) => (
+            <div
+              key={mark}
+              className="absolute left-0 right-0 h-px bg-background/50"
+              style={{ bottom: `${mark * 100}%` }}
+            />
+          ))}
+        </div>
+      </div>
+
+      {/* Level dB Display */}
+      {showDb && (
+        <div className="text-[10px] font-mono text-muted-foreground min-w-[32px] text-center">
+          {levelDb === -Infinity ? '-∞' : `${levelDb.toFixed(0)}`}
+        </div>
+      )}
+    </div>
+  );
+}