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>

lib/audio/track-utils.ts

@@ -0,0 +1,132 @@
+/**
+ * Track utility functions
+ */
+
+import type { Track, TrackColor } from '@/types/track';
+import { DEFAULT_TRACK_HEIGHT, TRACK_COLORS } from '@/types/track';
+
+/**
+ * Generate a unique track ID
+ */
+export function generateTrackId(): string {
+  return `track-${Date.now()}-${Math.random().toString(36).substr(2, 9)}`;
+}
+
+/**
+ * Create a new empty track
+ */
+export function createTrack(name?: string, color?: TrackColor): Track {
+  const colors: TrackColor[] = ['blue', 'green', 'purple', 'orange', 'pink', 'indigo', 'yellow', 'red'];
+  const randomColor = colors[Math.floor(Math.random() * colors.length)];
+
+  return {
+    id: generateTrackId(),
+    name: name || 'New Track',
+    color: TRACK_COLORS[color || randomColor],
+    height: DEFAULT_TRACK_HEIGHT,
+    audioBuffer: null,
+    volume: 0.8,
+    pan: 0,
+    mute: false,
+    solo: false,
+    recordEnabled: false,
+    collapsed: false,
+    selected: false,
+  };
+}
+
+/**
+ * Create a track from an audio buffer
+ */
+export function createTrackFromBuffer(
+  buffer: AudioBuffer,
+  name?: string,
+  color?: TrackColor
+): Track {
+  const track = createTrack(name, color);
+  track.audioBuffer = buffer;
+  return track;
+}
+
+/**
+ * Mix multiple tracks into a single stereo buffer
+ */
+export function mixTracks(
+  tracks: Track[],
+  sampleRate: number,
+  duration: number
+): AudioBuffer {
+  // Determine the length needed
+  const length = Math.ceil(duration * sampleRate);
+
+  // Create output buffer (stereo)
+  const offlineContext = new OfflineAudioContext(2, length, sampleRate);
+  const outputBuffer = offlineContext.createBuffer(2, length, sampleRate);
+
+  const leftChannel = outputBuffer.getChannelData(0);
+  const rightChannel = outputBuffer.getChannelData(1);
+
+  // Check if any tracks are soloed
+  const soloedTracks = tracks.filter((t) => t.solo && !t.mute);
+  const audibleTracks = soloedTracks.length > 0 ? soloedTracks : tracks.filter((t) => !t.mute);
+
+  // Mix each audible track
+  for (const track of audibleTracks) {
+    if (!track.audioBuffer) continue;
+
+    const buffer = track.audioBuffer;
+    const trackLength = Math.min(buffer.length, length);
+
+    // Get source channels (handle mono/stereo)
+    const sourceLeft = buffer.getChannelData(0);
+    const sourceRight = buffer.numberOfChannels > 1 ? buffer.getChannelData(1) : sourceLeft;
+
+    // Calculate pan gains (constant power panning)
+    const panAngle = (track.pan * Math.PI) / 4; // -π/4 to π/4
+    const leftGain = Math.cos(panAngle + Math.PI / 4) * track.volume;
+    const rightGain = Math.sin(panAngle + Math.PI / 4) * track.volume;
+
+    // Mix into output buffer
+    for (let i = 0; i < trackLength; i++) {
+      leftChannel[i] += sourceLeft[i] * leftGain;
+      rightChannel[i] += sourceRight[i] * rightGain;
+    }
+  }
+
+  return outputBuffer;
+}
+
+/**
+ * Get the maximum duration across all tracks
+ */
+export function getMaxTrackDuration(tracks: Track[]): number {
+  let maxDuration = 0;
+
+  for (const track of tracks) {
+    if (track.audioBuffer) {
+      const duration = track.audioBuffer.duration;
+      if (duration > maxDuration) {
+        maxDuration = duration;
+      }
+    }
+  }
+
+  return maxDuration;
+}
+
+/**
+ * Calculate track mix gain (considering solo/mute)
+ */
+export function getTrackGain(track: Track, allTracks: Track[]): number {
+  // If track is muted, gain is 0
+  if (track.mute) return 0;
+
+  // Check if any tracks are soloed
+  const hasSoloedTracks = allTracks.some((t) => t.solo);
+
+  // If there are soloed tracks and this track is not soloed, gain is 0
+  if (hasSoloedTracks && !track.solo) return 0;
+
+  // Otherwise, return the track's volume
+  return track.volume;
+}

lib/hooks/useMultiTrack.ts

@@ -0,0 +1,98 @@
+import { useState, useCallback, useEffect } from 'react';
+import type { Track } from '@/types/track';
+import { createTrack, createTrackFromBuffer } from '@/lib/audio/track-utils';
+
+const STORAGE_KEY = 'audio-ui-multi-track';
+
+export function useMultiTrack() {
+  const [tracks, setTracks] = useState<Track[]>(() => {
+    if (typeof window === 'undefined') return [];
+
+    try {
+      const saved = localStorage.getItem(STORAGE_KEY);
+      if (saved) {
+        const parsed = JSON.parse(saved);
+        // Note: AudioBuffers can't be serialized, so we only restore track metadata
+        return parsed.map((t: any) => ({
+          ...t,
+          audioBuffer: null, // Will need to be reloaded
+        }));
+      }
+    } catch (error) {
+      console.error('Failed to load tracks from localStorage:', error);
+    }
+
+    return [];
+  });
+
+  // Save tracks to localStorage (without audio buffers)
+  useEffect(() => {
+    if (typeof window === 'undefined') return;
+
+    try {
+      const trackData = tracks.map((track) => ({
+        ...track,
+        audioBuffer: null, // Don't serialize audio buffers
+      }));
+      localStorage.setItem(STORAGE_KEY, JSON.stringify(trackData));
+    } catch (error) {
+      console.error('Failed to save tracks to localStorage:', error);
+    }
+  }, [tracks]);
+
+  const addTrack = useCallback((name?: string) => {
+    const track = createTrack(name);
+    setTracks((prev) => [...prev, track]);
+    return track;
+  }, []);
+
+  const addTrackFromBuffer = useCallback((buffer: AudioBuffer, name?: string) => {
+    const track = createTrackFromBuffer(buffer, name);
+    setTracks((prev) => [...prev, track]);
+    return track;
+  }, []);
+
+  const removeTrack = useCallback((trackId: string) => {
+    setTracks((prev) => prev.filter((t) => t.id !== trackId));
+  }, []);
+
+  const updateTrack = useCallback((trackId: string, updates: Partial<Track>) => {
+    setTracks((prev) =>
+      prev.map((track) =>
+        track.id === trackId ? { ...track, ...updates } : track
+      )
+    );
+  }, []);
+
+  const clearTracks = useCallback(() => {
+    setTracks([]);
+  }, []);
+
+  const reorderTracks = useCallback((fromIndex: number, toIndex: number) => {
+    setTracks((prev) => {
+      const newTracks = [...prev];
+      const [movedTrack] = newTracks.splice(fromIndex, 1);
+      newTracks.splice(toIndex, 0, movedTrack);
+      return newTracks;
+    });
+  }, []);
+
+  const setTrackBuffer = useCallback((trackId: string, buffer: AudioBuffer) => {
+    setTracks((prev) =>
+      prev.map((track) =>
+        track.id === trackId ? { ...track, audioBuffer: buffer } : track
+      )
+    );
+  }, []);
+
+  return {
+    tracks,
+    addTrack,
+    addTrackFromBuffer,
+    removeTrack,
+    updateTrack,
+    clearTracks,
+    reorderTracks,
+    setTrackBuffer,
+  };
+}