feat: complete Phase 8.2 - punch-in/punch-out and overdub recording

Recording Controls (Phase 8.2):
- Added punch-in/punch-out UI controls with time inputs
- Punch mode toggle button with visual feedback
- Set punch times from current playback position
- Collapsible punch time editor shown when enabled
- Overdub mode toggle for layering recordings
- Overdub implementation mixes recorded audio with existing track audio

Components Modified:
- PlaybackControls: Added punch and overdub controls with icons
- AudioEditor: Implemented overdub mixing logic and state management
- PLAN.md: Marked Phase 8.1 and 8.2 as complete

Technical Details:
- Overdub mixes audio buffers by averaging samples to avoid clipping
- Handles multi-channel audio correctly
- Punch controls use AlignVerticalJustifyStart/End icons
- Overdub uses Layers icon for visual clarity

Phase 8 Progress:
- ✅ Phase 8.1: Audio Input (complete)
- ✅ Phase 8.2: Recording Controls (complete)
- 🔲 Phase 8.3: Recording Settings (next)

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

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

components/editor/PlaybackControls.tsx

@@ -1,7 +1,7 @@
 'use client';
 
 import * as React from 'react';
-import { Play, Pause, Square, SkipBack, Volume2, VolumeX, Circle } from 'lucide-react';
+import { Play, Pause, Square, SkipBack, Volume2, VolumeX, Circle, AlignVerticalJustifyStart, AlignVerticalJustifyEnd, Layers } from 'lucide-react';
 import { Button } from '@/components/ui/Button';
 import { Slider } from '@/components/ui/Slider';
 import { cn } from '@/lib/utils/cn';
@@ -24,6 +24,14 @@ export interface PlaybackControlsProps {
   isRecording?: boolean;
   onStartRecording?: () => void;
   onStopRecording?: () => void;
+  punchInEnabled?: boolean;
+  punchInTime?: number;
+  punchOutTime?: number;
+  onPunchInEnabledChange?: (enabled: boolean) => void;
+  onPunchInTimeChange?: (time: number) => void;
+  onPunchOutTimeChange?: (time: number) => void;
+  overdubEnabled?: boolean;
+  onOverdubEnabledChange?: (enabled: boolean) => void;
 }
 
 export function PlaybackControls({
@@ -44,6 +52,14 @@ export function PlaybackControls({
   isRecording = false,
   onStartRecording,
   onStopRecording,
+  punchInEnabled = false,
+  punchInTime = 0,
+  punchOutTime = 0,
+  onPunchInEnabledChange,
+  onPunchInTimeChange,
+  onPunchOutTimeChange,
+  overdubEnabled = false,
+  onOverdubEnabledChange,
 }: PlaybackControlsProps) {
   const [isMuted, setIsMuted] = React.useState(false);
   const [previousVolume, setPreviousVolume] = React.useState(volume);
@@ -113,6 +129,61 @@ export function PlaybackControls({
         </div>
       </div>
 
+      {/* Punch In/Out Times - Show when enabled */}
+      {punchInEnabled && onPunchInTimeChange && onPunchOutTimeChange && (
+        <div className="flex items-center gap-3 text-xs bg-muted/50 rounded px-3 py-2">
+          <div className="flex items-center gap-2 flex-1">
+            <label className="text-muted-foreground flex items-center gap-1 flex-shrink-0">
+              <AlignVerticalJustifyStart className="h-3 w-3" />
+              Punch In
+            </label>
+            <input
+              type="number"
+              min={0}
+              max={punchOutTime || duration}
+              step={0.1}
+              value={punchInTime.toFixed(2)}
+              onChange={(e) => onPunchInTimeChange(parseFloat(e.target.value))}
+              className="flex-1 px-2 py-1 bg-background border border-border rounded text-xs font-mono"
+            />
+            <Button
+              variant="ghost"
+              size="sm"
+              onClick={() => onPunchInTimeChange(currentTime)}
+              title="Set punch-in to current time"
+              className="h-6 px-2 text-xs"
+            >
+              Set
+            </Button>
+          </div>
+
+          <div className="flex items-center gap-2 flex-1">
+            <label className="text-muted-foreground flex items-center gap-1 flex-shrink-0">
+              <AlignVerticalJustifyEnd className="h-3 w-3" />
+              Punch Out
+            </label>
+            <input
+              type="number"
+              min={punchInTime}
+              max={duration}
+              step={0.1}
+              value={punchOutTime.toFixed(2)}
+              onChange={(e) => onPunchOutTimeChange(parseFloat(e.target.value))}
+              className="flex-1 px-2 py-1 bg-background border border-border rounded text-xs font-mono"
+            />
+            <Button
+              variant="ghost"
+              size="sm"
+              onClick={() => onPunchOutTimeChange(currentTime)}
+              title="Set punch-out to current time"
+              className="h-6 px-2 text-xs"
+            >
+              Set
+            </Button>
+          </div>
+        </div>
+      )}
+
       {/* Transport Controls */}
       <div className="flex items-center justify-between gap-4">
         <div className="flex items-center gap-2">
@@ -153,19 +224,54 @@ export function PlaybackControls({
 
           {/* Record Button */}
           {(onStartRecording || onStopRecording) && (
-            <Button
-              variant="outline"
-              size="icon"
-              onClick={isRecording ? onStopRecording : onStartRecording}
-              disabled={disabled}
-              title={isRecording ? 'Stop Recording' : 'Start Recording'}
-              className={cn(
-                isRecording && 'bg-red-500/20 hover:bg-red-500/30 border-red-500/50',
-                isRecording && 'animate-pulse'
-              )}
-            >
-              <Circle className={cn('h-4 w-4', isRecording && 'text-red-500 fill-red-500')} />
-            </Button>
+            <>
+              <Button
+                variant="outline"
+                size="icon"
+                onClick={isRecording ? onStopRecording : onStartRecording}
+                disabled={disabled}
+                title={isRecording ? 'Stop Recording' : 'Start Recording'}
+                className={cn(
+                  isRecording && 'bg-red-500/20 hover:bg-red-500/30 border-red-500/50',
+                  isRecording && 'animate-pulse'
+                )}
+              >
+                <Circle className={cn('h-4 w-4', isRecording && 'text-red-500 fill-red-500')} />
+              </Button>
+
+              {/* Recording Options */}
+              <div className="flex items-center gap-1 border-l border-border pl-2 ml-1">
+                {/* Punch In/Out Toggle */}
+                {onPunchInEnabledChange && (
+                  <Button
+                    variant="ghost"
+                    size="icon-sm"
+                    onClick={() => onPunchInEnabledChange(!punchInEnabled)}
+                    title="Toggle Punch In/Out Recording"
+                    className={cn(
+                      punchInEnabled && 'bg-primary/20 hover:bg-primary/30'
+                    )}
+                  >
+                    <AlignVerticalJustifyStart className={cn('h-3.5 w-3.5', punchInEnabled && 'text-primary')} />
+                  </Button>
+                )}
+
+                {/* Overdub Mode Toggle */}
+                {onOverdubEnabledChange && (
+                  <Button
+                    variant="ghost"
+                    size="icon-sm"
+                    onClick={() => onOverdubEnabledChange(!overdubEnabled)}
+                    title="Toggle Overdub Mode (layer recordings)"
+                    className={cn(
+                      overdubEnabled && 'bg-primary/20 hover:bg-primary/30'
+                    )}
+                  >
+                    <Layers className={cn('h-3.5 w-3.5', overdubEnabled && 'text-primary')} />
+                  </Button>
+                )}
+              </div>
+            </>
           )}
         </div>