feat: implement Phase 7.1-7.2 multi-track infrastructure

Added core multi-track support with track management and controls:

**Track Types & Utilities:**
- Track interface with audio buffer, controls (volume/pan/solo/mute)
- Track utility functions for creation, mixing, and gain calculation
- Track color system with 9 preset colors
- Configurable track heights (60-300px)

**Components:**
- TrackHeader: Collapsible track controls with inline name editing
  - Solo/Mute buttons with visual feedback
  - Volume slider (0-100%) and Pan control (L-C-R)
  - Track color indicator and remove button
- Track: Waveform display component with canvas rendering
  - Click-to-seek on waveform
  - Playhead visualization
  - Support for collapsed state
- TrackList: Container managing multiple tracks
  - Scrollable track list with custom scrollbar
  - Add track button
  - Empty state UI

**State Management:**
- useMultiTrack hook with localStorage persistence
- Add/remove/update/reorder track operations
- Track buffer management

Features implemented:
- ✅ Track creation and removal
- ✅ Track naming (editable)
- ✅ Track colors
- ✅ Solo/Mute per track
- ✅ Volume fader per track (0-100%)
- ✅ Pan control per track (L-C-R)
- ✅ Track collapse/expand
- ✅ Track height configuration
- ✅ Waveform visualization per track
- ✅ Multi-track audio mixing utilities

Next: Integrate into AudioEditor and implement multi-track playback

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

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

components/tracks/TrackHeader.tsx

@@ -0,0 +1,180 @@
+'use client';
+
+import * as React from 'react';
+import { Volume2, VolumeX, Headphones, Mic, X, ChevronDown, ChevronRight } from 'lucide-react';
+import { Button } from '@/components/ui/Button';
+import { Slider } from '@/components/ui/Slider';
+import type { Track } from '@/types/track';
+import { cn } from '@/lib/utils/cn';
+
+export interface TrackHeaderProps {
+  track: Track;
+  onToggleMute: () => void;
+  onToggleSolo: () => void;
+  onToggleCollapse: () => void;
+  onVolumeChange: (volume: number) => void;
+  onPanChange: (pan: number) => void;
+  onRemove: () => void;
+  onNameChange: (name: string) => void;
+}
+
+export function TrackHeader({
+  track,
+  onToggleMute,
+  onToggleSolo,
+  onToggleCollapse,
+  onVolumeChange,
+  onPanChange,
+  onRemove,
+  onNameChange,
+}: TrackHeaderProps) {
+  const [isEditingName, setIsEditingName] = React.useState(false);
+  const [nameInput, setNameInput] = React.useState(track.name);
+  const inputRef = React.useRef<HTMLInputElement>(null);
+
+  const handleNameClick = () => {
+    setIsEditingName(true);
+    setNameInput(track.name);
+  };
+
+  const handleNameBlur = () => {
+    setIsEditingName(false);
+    if (nameInput.trim()) {
+      onNameChange(nameInput.trim());
+    } else {
+      setNameInput(track.name);
+    }
+  };
+
+  const handleNameKeyDown = (e: React.KeyboardEvent) => {
+    if (e.key === 'Enter') {
+      inputRef.current?.blur();
+    } else if (e.key === 'Escape') {
+      setNameInput(track.name);
+      setIsEditingName(false);
+    }
+  };
+
+  React.useEffect(() => {
+    if (isEditingName && inputRef.current) {
+      inputRef.current.focus();
+      inputRef.current.select();
+    }
+  }, [isEditingName]);
+
+  return (
+    <div className="flex items-center gap-2 px-3 py-2 border-b border-border bg-card">
+      {/* Collapse Toggle */}
+      <Button
+        variant="ghost"
+        size="icon-sm"
+        onClick={onToggleCollapse}
+        title={track.collapsed ? 'Expand track' : 'Collapse track'}
+      >
+        {track.collapsed ? (
+          <ChevronRight className="h-4 w-4" />
+        ) : (
+          <ChevronDown className="h-4 w-4" />
+        )}
+      </Button>
+
+      {/* Track Color Indicator */}
+      <div
+        className="w-1 h-8 rounded-full"
+        style={{ backgroundColor: track.color }}
+      />
+
+      {/* Track Name */}
+      <div className="flex-1 min-w-0">
+        {isEditingName ? (
+          <input
+            ref={inputRef}
+            type="text"
+            value={nameInput}
+            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"
+          />
+        ) : (
+          <div
+            onClick={handleNameClick}
+            className="px-2 py-1 text-sm font-medium text-foreground truncate cursor-pointer hover:bg-accent rounded"
+            title={track.name}
+          >
+            {track.name}
+          </div>
+        )}
+      </div>
+
+      {/* Solo Button */}
+      <Button
+        variant={track.solo ? 'secondary' : 'ghost'}
+        size="icon-sm"
+        onClick={onToggleSolo}
+        title="Solo track"
+        className={cn(track.solo && 'bg-yellow-500/20 hover:bg-yellow-500/30')}
+      >
+        <Headphones className={cn('h-4 w-4', track.solo && 'text-yellow-500')} />
+      </Button>
+
+      {/* Mute Button */}
+      <Button
+        variant={track.mute ? 'secondary' : 'ghost'}
+        size="icon-sm"
+        onClick={onToggleMute}
+        title="Mute track"
+        className={cn(track.mute && 'bg-red-500/20 hover:bg-red-500/30')}
+      >
+        {track.mute ? (
+          <VolumeX className="h-4 w-4 text-red-500" />
+        ) : (
+          <Volume2 className="h-4 w-4" />
+        )}
+      </Button>
+
+      {/* Volume Slider */}
+      <div className="flex items-center gap-2 w-24">
+        <Slider
+          value={[track.volume]}
+          onValueChange={([value]) => onVolumeChange(value)}
+          min={0}
+          max={1}
+          step={0.01}
+          className="flex-1"
+          title={`Volume: ${Math.round(track.volume * 100)}%`}
+        />
+        <span className="text-xs text-muted-foreground w-8 text-right">
+          {Math.round(track.volume * 100)}
+        </span>
+      </div>
+
+      {/* Pan Knob (simplified as slider) */}
+      <div className="flex items-center gap-2 w-20">
+        <Slider
+          value={[track.pan]}
+          onValueChange={([value]) => onPanChange(value)}
+          min={-1}
+          max={1}
+          step={0.01}
+          className="flex-1"
+          title={`Pan: ${track.pan === 0 ? 'C' : track.pan < 0 ? `L${Math.abs(Math.round(track.pan * 100))}` : `R${Math.round(track.pan * 100)}`}`}
+        />
+        <span className="text-xs text-muted-foreground w-6 text-right">
+          {track.pan === 0 ? 'C' : track.pan < 0 ? `L` : 'R'}
+        </span>
+      </div>
+
+      {/* Remove Button */}
+      <Button
+        variant="ghost"
+        size="icon-sm"
+        onClick={onRemove}
+        title="Remove track"
+        className="text-destructive hover:text-destructive hover:bg-destructive/10"
+      >
+        <X className="h-4 w-4" />
+      </Button>
+    </div>
+  );
+}