feat: complete Phase 7.4 - real-time track effects system

Implemented comprehensive real-time effect processing for multi-track audio:

Core Features:
- Per-track effect chains with drag-and-drop reordering
- Effect bypass/enable toggle per effect
- Real-time parameter updates (filters, dynamics, time-based, distortion, bitcrusher, pitch, timestretch)
- Add/remove effects during playback without interruption
- Effect chain persistence via localStorage
- Automatic playback stop when tracks are deleted

Technical Implementation:
- Effect processor with dry/wet routing for bypass functionality
- Real-time effect parameter updates using AudioParam setValueAtTime
- Structure change detection for add/remove/reorder operations
- Stale closure fix using refs for latest track state
- ScriptProcessorNode for bitcrusher, pitch shifter, and time stretch
- Dual-tap delay line for pitch shifting
- Overlap-add synthesis for time stretching

UI Components:
- EffectBrowser dialog with categorized effects
- EffectDevice component with parameter controls
- EffectParameters for all 19 real-time effect types
- Device rack with horizontal scrolling (Ableton-style)

Removed offline-only effects (normalize, fadeIn, fadeOut, reverse) as they don't fit the real-time processing model.

Completed all items in Phase 7.4:
- [x] Per-track effect chain
- [x] Effect rack UI
- [x] Effect bypass per track
- [x] Real-time effect processing during playback
- [x] Add/remove effects during playback
- [x] Real-time parameter updates
- [x] Effect chain persistence

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

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

components/tracks/Track.tsx

@@ -28,6 +28,7 @@ export interface TrackProps {
   onLoadAudio?: (buffer: AudioBuffer) => void;
   onToggleEffect?: (effectId: string) => void;
   onRemoveEffect?: (effectId: string) => void;
+  onUpdateEffect?: (effectId: string, parameters: any) => void;
   onAddEffect?: (effectType: EffectType) => void;
 }
 
@@ -49,6 +50,7 @@ export function Track({
   onLoadAudio,
   onToggleEffect,
   onRemoveEffect,
+  onUpdateEffect,
   onAddEffect,
 }: TrackProps) {
   const canvasRef = React.useRef<HTMLCanvasElement>(null);
@@ -509,8 +511,8 @@ export function Track({
 
           {/* Horizontal scrolling device rack - expanded state */}
           {showEffects && (
-            <div className="overflow-x-auto custom-scrollbar px-3 py-3 bg-muted/70">
-              <div className="flex gap-2">
+            <div className="h-48 overflow-x-auto custom-scrollbar bg-muted/70">
+              <div className="flex h-full">
                 {track.effectChain.effects.length === 0 ? (
                   <div className="text-xs text-muted-foreground text-center py-8 w-full">
                     No devices. Click + to add an effect.
@@ -522,6 +524,7 @@ export function Track({
                       effect={effect}
                       onToggleEnabled={() => onToggleEffect?.(effect.id)}
                       onRemove={() => onRemoveEffect?.(effect.id)}
+                      onUpdateParameters={(params) => onUpdateEffect?.(effect.id, params)}
                     />
                   ))
                 )}

components/tracks/TrackList.tsx

@@ -124,6 +124,15 @@ export function TrackList({
               };
               onUpdateTrack(track.id, { effectChain: updatedChain });
             }}
+            onUpdateEffect={(effectId, parameters) => {
+              const updatedChain = {
+                ...track.effectChain,
+                effects: track.effectChain.effects.map((e) =>
+                  e.id === effectId ? { ...e, parameters } : e
+                ),
+              };
+              onUpdateTrack(track.id, { effectChain: updatedChain });
+            }}
             onAddEffect={(effectType) => {
               const newEffect = createEffect(
                 effectType,