Applied performance and audio settings to actual editor behavior:
- enableSpectrogram: conditionally show/hide spectrogram analyzer option
- sampleRate: sync recording sample rate with global audio settings
Changes:
- Switch analyzer view away from spectrogram when setting is disabled
- Adjust analyzer toggle grid columns based on spectrogram visibility
- Sync recording hook's sampleRate with global settings via useEffect
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude <noreply@anthropic.com>
- Modified createTrack and createTrackFromBuffer to accept height parameter
- Updated useMultiTrack to pass height when creating tracks
- Applied settings.ui.defaultTrackHeight when adding new tracks
- Applied settings.editor.defaultZoom for initial zoom state
- Removed duplicate useSettings hook declaration in AudioEditor
- New tracks now use configured default height from settings
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude <noreply@anthropic.com>
- Streamlined track controls and master controls to same width (240px)
- Fixed track controls container to use full width of parent column
- Matched TrackControls card structure with MasterControls (gap-3, no w-full/h-full)
- Updated outer container padding from p-2 to p-4 with gap-4
- Adjusted track controls wrapper to center content instead of stretching
- Added max-width constraint to PlaybackControls to prevent width changes
- Centered transport control buttons in footer
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude <noreply@anthropic.com>
Added all remaining keyboard shortcuts for a complete keyboard-driven workflow:
Playback Shortcuts:
- Home: Jump to start
- End: Jump to end
- Left/Right Arrow: Seek ±1 second
- Ctrl+Left/Right: Seek ±5 seconds
Editing Shortcuts:
- Ctrl+A: Select All (entire track content)
View Shortcuts:
- Ctrl+Plus/Equals: Zoom in
- Ctrl+Minus: Zoom out
- Ctrl+0: Fit to view
All shortcuts work seamlessly with existing shortcuts:
- Spacebar: Play/Pause
- Ctrl+Z/Y: Undo/Redo
- Ctrl+X/C/V: Cut/Copy/Paste
- Ctrl+S: Save
- Ctrl+D: Duplicate
- Delete/Backspace: Delete
- Escape: Clear selection
The editor is now fully controllable via keyboard for a professional
audio editing workflow similar to Audacity/Reaper.
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude <noreply@anthropic.com>
Changed from single JSON file to ZIP archive format to avoid string
length limits when serializing large audio buffers.
New ZIP structure:
- project.json (metadata, track info, effects, automation)
- track_0.wav, track_1.wav, etc. (audio files in WAV format)
Benefits:
- No more RangeError: Invalid string length
- Smaller file sizes (WAV compression vs base64 JSON)
- Human-readable audio files in standard format
- Can extract and inspect individual tracks
- Easier to edit/debug project metadata
Added jszip dependency for ZIP file handling.
Changed file picker to accept .zip files.
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude <noreply@anthropic.com>
Added full export/import functionality for projects:
Export Features:
- Export button for each project in Projects dialog
- Downloads project as JSON file with all data
- Includes tracks, audio buffers, effects, automation, settings
- Filename format: {project_name}_{timestamp}.json
Import Features:
- Import button in Projects dialog header
- File picker for .json files
- Automatically generates new project ID to avoid conflicts
- Appends "(Imported)" to project name
- Preserves all project data
This enables:
- Backup of projects outside the browser
- Sharing projects with collaborators
- Migration between computers/browsers
- Version snapshots at different stages
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude <noreply@anthropic.com>
Changes:
- Modified handleSaveProject to accept showToast parameter (default: false)
- Auto-saves now run silently without toast notifications
- Added Ctrl+S / Cmd+S keyboard shortcut for manual save with toast
- Added "Save Project" and "Open Projects" to command palette
- Error toasts still shown for all save failures
This provides the best of both worlds:
- Automatic background saves don't interrupt the user
- Manual saves (Ctrl+S or command palette) provide confirmation
- Users can work without being constantly notified
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude <noreply@anthropic.com>
The handleSaveProject callback had currentTime in its dependencies, which
caused the callback to be recreated on every playback frame update. This
made the auto-save effect reset its timer constantly, preventing auto-save
from ever triggering.
Solution: Use a ref to capture the latest currentTime value without
including it in the callback dependencies. This keeps the callback stable
while still saving the correct currentTime.
Added debug logging to track auto-save scheduling and triggering.
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude <noreply@anthropic.com>
**useMultiTrack.ts:**
- Removed localStorage persistence (tracks, effects, automation)
- Now relies entirely on IndexedDB via project management system
- Simpler state management without dual persistence
**AudioEditor.tsx:**
- Store last project ID in localStorage when saving
- Auto-load last project on page mount
- Only runs once per session with hasAutoLoaded flag
- Falls back to empty state if project can't be loaded
**Benefits:**
- No more conflicts between localStorage and IndexedDB
- Effects and automation properly persisted
- Seamless experience - reload page and your project is ready
- Single source of truth (IndexedDB)
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude <noreply@anthropic.com>
Changed auto-save from 30s interval to 3s debounce, and added
currentProjectName to dependencies so it saves when name changes.
**Changes:**
- Auto-save now triggers 3 seconds after ANY change (tracks or name)
- Added `currentProjectName` to auto-save effect dependencies
- Removed `onBlur` handler from input (auto-save handles it)
- Added tooltip "Click to edit project name"
- Faster feedback - saves 3s after typing stops instead of 30s
**User Experience:**
- Edit project name → auto-saves after 3s
- Add/modify tracks → auto-saves after 3s
- No need to manually save or wait 30 seconds
- Toast notification confirms save
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude <noreply@anthropic.com>
Fixed project loading to restore all track properties and added inline
project name editing in header.
**AudioEditor.tsx:**
- Added `loadTracks` from useMultiTrack hook
- Fixed `handleLoadProject` to use `loadTracks()` instead of recreating tracks
- Now properly restores all track properties (effects, automation, volume, pan, etc.)
- Shows track count in success toast message
- Added editable project name input in header
- Positioned between logo and track actions
- Auto-sizes based on text length
- Saves on blur (triggers auto-save)
- Smooth hover/focus transitions
- Muted color that brightens on interaction
**useMultiTrack.ts:**
- Added `loadTracks()` method to replace all tracks at once
- Enables proper project loading with full state restoration
- Maintains all track properties during load
**Fixes:**
- Projects now load correctly with all tracks and their audio buffers
- Track properties (effects, automation, volume, pan, etc.) fully restored
- Project name can be edited inline in header
- Auto-save triggers when project name changes
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude <noreply@anthropic.com>
Integrated complete project management system with auto-save:
**AudioEditor.tsx - Full Integration:**
- Added "Projects" button in header toolbar (FolderOpen icon)
- Project state management (currentProjectId, currentProjectName, projects list)
- Comprehensive project handlers:
- `handleOpenProjectsDialog` - Opens dialog and loads project list
- `handleSaveProject` - Saves current project to IndexedDB
- `handleNewProject` - Creates new project with confirmation
- `handleLoadProject` - Loads project and restores all tracks/settings
- `handleDeleteProject` - Deletes project with cleanup
- `handleDuplicateProject` - Creates project copy
- Auto-save effect: Saves project every 30 seconds when tracks exist
- ProjectsDialog component integrated with all handlers
- Toast notifications for all operations
**lib/storage/projects.ts:**
- Re-exported ProjectMetadata type for easier importing
- Fixed type exports
**Key Features:**
- **Auto-save**: Automatically saves every 30 seconds
- **Project persistence**: Full track state, audio buffers, effects, automation
- **Smart loading**: Restores zoom, track order, and all track properties
- **Safety confirmations**: Warns before creating new project with unsaved changes
- **User feedback**: Toast messages for all operations (save, load, delete, duplicate)
- **Seamless workflow**: Projects → Import → Export in logical toolbar order
**User Flow:**
1. Click "Projects" to open project manager
2. Create new project or load existing
3. Work on tracks (auto-saves every 30s)
4. Switch between projects anytime
5. Duplicate projects for experimentation
6. Delete old projects to clean up
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude <noreply@anthropic.com>
Removed the non-standard FLAC export option which was causing import issues:
**Problem:**
- "FLAC" export was actually a custom compressed WAV format
- Used fflate (DEFLATE compression) instead of real FLAC encoding
- Files couldn't be imported back or opened in other software
- No browser-compatible FLAC encoder library exists
**Changes:**
- Removed FLAC from export format options (WAV and MP3 only)
- Removed FLAC quality slider from ExportDialog
- Removed audioBufferToFlac function reference
- Updated ExportSettings interface to only include 'wav' | 'mp3'
- Simplified bit depth selector (WAV only instead of WAV/FLAC)
- Updated format descriptions to clarify lossy vs lossless
**Export formats now:**
- ✅ WAV - Lossless, Uncompressed (16/24/32-bit)
- ✅ MP3 - Lossy, Compressed (128/192/256/320 kbps)
Users can now successfully export and re-import their audio!
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude <noreply@anthropic.com>
Implemented Phase 11.3 - Export Regions:
- Added export scope selector in ExportDialog
- Entire Project: Mix all tracks into single file
- Selected Region: Export only the selected region (disabled if no selection)
- Individual Tracks: Export each track as separate file
- Updated ExportSettings interface with scope property
- Refactored handleExport to support all three export modes:
- Project mode: Mix all tracks (existing behavior)
- Selection mode: Extract selection from all tracks and mix
- Tracks mode: Loop through tracks and export separately with sanitized filenames
- Added hasSelection prop to ExportDialog to enable/disable selection option
- Created helper function convertAndDownload to reduce code duplication
- Selection mode uses extractBufferSegment for precise region extraction
- Track names are sanitized for filenames (remove special characters)
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude <noreply@anthropic.com>
Implemented Phase 11.1 export format support:
- Added MP3 export using lamejs library
- Added FLAC export using fflate DEFLATE compression
- Updated ExportDialog with format selector and format-specific options
- MP3: bitrate selector (128/192/256/320 kbps)
- FLAC: compression quality slider (0-9)
- WAV: bit depth selector (16/24/32-bit)
- Updated AudioEditor to route export based on selected format
- Created TypeScript declarations for lamejs
- Fixed AudioStatistics to use audioBuffer instead of buffer property
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude <noreply@anthropic.com>
Increased analyzer dimensions from 160px to 192px width
and from 300px to 360px minimum height for better visibility.
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude <noreply@anthropic.com>
Constrained analyzer components to 160px width to match
the MasterControls card width, creating better visual alignment
in the master column.
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude <noreply@anthropic.com>
Added real-time audio analysis visualizations to master column:
- FrequencyAnalyzer component with FFT bar display
- Canvas-based rendering with requestAnimationFrame
- Color gradient from cyan to green based on frequency
- Frequency axis labels (20Hz, 1kHz, 20kHz)
- Spectrogram component with time-frequency waterfall display
- Scrolling visualization with ImageData pixel manipulation
- Color mapping: black → blue → cyan → green → yellow → red
- Vertical frequency axis with labels
- Master column redesign
- Fixed width layout (280px)
- Toggle buttons to switch between FFT and Spectrum views
- Integrated above master controls with 300px minimum height
- Exposed masterAnalyser from useMultiTrackPlayer hook
- Analyser node now accessible to visualization components
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude <noreply@anthropic.com>
- Integrated all R/S/A/E buttons into TrackControls component
- Removed duplicate button sections from Track component
- Updated CircularKnob pan visualization to show no arc at center position
- Arc now extends from center to value for directional indication
- Moved MasterControls to dedicated right sidebar
- Removed master controls from PlaybackControls footer
- Optimized TrackControls spacing (gap-1.5, smaller buttons)
- Cleaner separation between transport and master control sections
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude <noreply@anthropic.com>
Unified design language across all tracks and master section:
- Created TrackFader component: vertical fader with horizontal meter bars
- Created TrackControls: integrated pan + fader + mute in compact layout
- Created MasterFader: similar design but larger for master output
- Created MasterControls: master version with pan + fader + mute
- Updated Track component to use new TrackControls
- Updated PlaybackControls to use new MasterControls
- Removed old VerticalFader and separate meter components
New features:
- Horizontal peak/RMS meter bars behind fader (top=peak, bottom=RMS)
- Color-coded meters (green/yellow/red based on dB levels)
- dB scale labels and numeric readouts
- Integrated mute button in controls
- Consistent circular pan knobs
- Professional DAW-style channel strip appearance
- Master section includes clip indicator
Visual improvements:
- Unified design across all tracks and master
- Compact vertical layout saves space
- Real-time level monitoring integrated with volume control
- Smooth animations and transitions
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude <noreply@anthropic.com>
Added comprehensive master output level monitoring:
- Created MasterMeter component with dual vertical bars (peak + RMS)
- Implemented real-time level monitoring in useMultiTrackPlayer hook
- Added master analyser node connected to audio output
- Displays color-coded levels (green/yellow/red) based on dB thresholds
- Shows numerical dB readouts for both peak and RMS
- Includes clickable clip indicator with reset functionality
- Integrated into PlaybackControls next to master volume
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude <noreply@anthropic.com>
Implemented comprehensive automation recording system for volume, pan, and effect parameters:
- Added automation recording modes:
- Write: Records continuously during playback when values change
- Touch: Records only while control is being touched/moved
- Latch: Records from first touch until playback stops
- Implemented value change detection (0.001 threshold) to prevent infinite loops
- Fixed React setState-in-render errors by:
- Using queueMicrotask() to defer state updates
- Moving lane creation logic to useEffect
- Properly memoizing touch handlers with useMemo
- Added proper value ranges for effect parameters:
- Frequency: 20-20000 Hz
- Q: 0.1-20
- Gain: -40-40 dB
- Enhanced automation lane auto-creation with parameter-specific ranges
- Added touch callbacks to all parameter controls (volume, pan, effects)
- Implemented throttling (100ms) to avoid excessive automation points
Technical improvements:
- Used tracksRef and onRecordAutomationRef to ensure latest values in animation loops
- Added proper cleanup on playback stop
- Optimized recording to only trigger when values actually change
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude <noreply@anthropic.com>
- Added showEffects property to Track type
- Added "E" button with Sparkles icon to toggle per-track effects
- Effects panel now appears below each track when toggled
- Removed global EffectsPanel from AudioEditor
- Updated useMultiTrack to persist showEffects state
- Streamlined workflow: both automation and effects are now per-track
This aligns the UX with professional DAWs like Ableton Live, where
effects and automation are track-scoped rather than global.
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude <noreply@anthropic.com>
Re-enabled mouse event handlers on waveform canvas that were accidentally
removed. Users can now:
- Click to seek to a specific position
- Drag to create selection regions
Also fixed TypeScript error by properly typing EffectType parameter in
handleAddEffect callback.
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude <noreply@anthropic.com>
Major improvements:
- Fixed multi-file import (FileList to Array conversion)
- Auto-select first track when adding to empty project
- Global effects panel folding state (independent of track selection)
- Effects panel collapsed/disabled when no track selected
- Effect device expansion state persisted per-device
- Effect browser with searchable descriptions
Visual refinements:
- Removed center dot from pan knob for cleaner look
- Simplified fader: removed volume fill overlay, dynamic level meter visible through semi-transparent handle
- Level meter capped at fader position (realistic mixer behavior)
- Solid background instead of gradient for fader track
- Subtle volume overlay up to fader handle
- Fixed track control width flickering (consistent 4px border)
- Effect devices: removed shadows/rounded corners for flatter DAW-style look, added consistent border-radius
- Added border between track control and waveform area
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude <noreply@anthropic.com>
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>
Added comprehensive playback level monitoring system that shows
real-time audio levels during playback for each track.
useMultiTrackPlayer Hook:
- Added AnalyserNode for each track in audio graph
- Implemented RMS-based level calculation with requestAnimationFrame
- Added trackLevels state (Record<string, number>) tracking levels by track ID
- Insert analysers after effects chain, before master gain
- Monitor levels continuously during playback
- Clean up level monitoring on pause/stop
Audio Graph Chain:
source -> gain -> pan -> effects -> analyser -> master gain -> destination
AudioEditor Integration:
- Extract trackLevels from useMultiTrackPlayer hook
- Pass trackLevels down to TrackList component
TrackList & Track Components:
- Accept and forward trackLevels prop
- Pass playbackLevel to individual Track components
- Track component displays appropriate level:
* Recording level (with "Input" label) when armed/recording
* Playback level (with "Level" label) during normal playback
Visual Feedback:
- Color-coded meters: green -> yellow (70%) -> red (90%)
- Real-time percentage display
- Seamless switching between input and output modes
This completes Phase 8 (Recording) with full bidirectional level monitoring!
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude <noreply@anthropic.com>
Completed the integration of recording functionality into the AudioEditor:
Recording Controls:
- Added global record button to PlaybackControls component
- Implemented track arming system (arm track before recording)
- Added visual feedback with pulsing red animations during recording
- Connected recording state from useRecording hook to UI
AudioEditor Integration:
- Added handleToggleRecordEnable for per-track record arming
- Added handleStartRecording with permission checks and toast notifications
- Added handleStopRecording to save recorded audio to track buffer
- Connected recording input level monitoring to track meters
TrackList Integration:
- Pass recording props (onToggleRecordEnable, recordingTrackId, recordingLevel)
- Individual tracks show input level meters when armed or recording
- Visual indicators for armed and actively recording tracks
This completes Phase 8 (Recording) implementation with:
✅ MediaRecorder API integration
✅ Input level monitoring with RMS calculation
✅ Per-track record arming
✅ Global record button
✅ Real-time visual feedback
✅ Permission handling
✅ Error handling with user notifications
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude <noreply@anthropic.com>
Added comprehensive selection and editing capabilities to multi-track editor:
- Visual selection overlay with Shift+drag interaction on waveforms
- Multi-track edit commands (cut, copy, paste, delete, duplicate)
- Full keyboard shortcut support (Ctrl+X/C/V/D, Delete, Ctrl+Z/Y)
- Complete undo/redo integration via command pattern
- Per-track selection state with localStorage persistence
- Audio buffer manipulation utilities (extract, insert, delete, duplicate segments)
- Toast notifications for all edit operations
- Red playhead to distinguish from blue selection overlay
All edit operations are fully undoable and integrated with the existing
history manager system.
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude <noreply@anthropic.com>
Removed the master effects section from AudioEditor footer:
- Simplified footer to only show transport controls
- Removed master channel strip area
- Removed border separator between sections
Added note to PLAN.md:
- 🔲 Master channel effects (TODO)
- Will implement master effect chain UI later
- Similar to per-track effects but for final mix
- Documented in Phase 7 multi-track features section
This cleans up the UI for now - we'll add master effects
with a proper device rack UI later, similar to how per-track
effects work (collapsible section with horizontal device cards).
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude <noreply@anthropic.com>
Major UX refactor to match professional DAW workflows (Ableton/Bitwig):
**Layout Changes:**
- Removed sidebar completely
- Track actions moved to header toolbar (Add/Import/Clear All)
- Each track now shows its own devices/effects in the track strip
- Master section moved to bottom footer area
- Full-width waveform display
**Track Strip (left panel):**
- Track name (editable inline)
- Color indicator
- Collapse/Solo/Mute/Delete buttons
- Volume slider with percentage
- Pan slider with L/C/R indicator
- Collapsible "Devices" section showing track effects
- Shows effect count in header
- Each effect card shows: name, enable/disable toggle, remove button
- Effects are colored based on enabled/disabled state
- Click to expand/collapse devices section
**Master Section (bottom):**
- Transport controls (Play/Pause/Stop) with timeline
- Master volume control
- Master effects placeholder (to be implemented)
**Benefits:**
- True DAW experience like Ableton Live
- Each track is self-contained with its own effect chain
- No context switching between tabs
- Effects are always visible for each track
- More screen space for waveforms
- Professional mixer-style layout
Note: Effects are visible but not yet applied to audio - that's next!
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude <noreply@anthropic.com>
Architecture:
- Each track now has its own effect chain stored in track.effectChain
- Separate master effect chain for the final mix output
- SidePanel has 3 tabs: Tracks, Track FX, Master FX
Changes:
- types/track.ts: Add effectChain field to Track interface
- lib/audio/track-utils.ts: Initialize effect chain when creating tracks
- lib/hooks/useMultiTrack.ts: Exclude effectChain from localStorage, recreate on load
- components/editor/AudioEditor.tsx:
- Add master effect chain state using useEffectChain hook
- Add handlers for per-track effect chain manipulation
- Pass both track and master effect chains to SidePanel
- components/layout/SidePanel.tsx:
- Update to 3-tab interface (Tracks | Track FX | Master FX)
- Track FX tab shows effects for currently selected track
- Master FX tab shows master bus effects with preset management
- Different icons for track vs master effects tabs
Note: Effect processing in Web Audio API not yet implemented.
This commit sets up the data structures and UI.
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude <noreply@anthropic.com>
- Add masterVolume state to AudioEditor (default 0.8)
- Pass masterVolume to useMultiTrackPlayer hook
- Create master gain node in audio graph
- Connect all tracks through master gain before destination
- Update master gain in real-time when volume changes
- Wire up PlaybackControls volume slider and mute button
- Clean up master gain node on unmount
Fixes global volume and mute controls not working in transport controls.
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude <noreply@anthropic.com>
Updated spacebar handler to skip when focus is on:
- Input fields
- Textareas
- Buttons (HTMLButtonElement)
- Elements with role="button"
This prevents spacebar from triggering play/pause when clicking
playback control buttons or other UI controls.
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude <noreply@anthropic.com>
Changes:
- Transport controls now centered in footer with flexbox justify-center
- Added spacebar keyboard shortcut for play/pause toggle
- Spacebar only works when not typing in input/textarea fields
- Prevents default spacebar behavior (page scroll) when playing/pausing
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude <noreply@anthropic.com>
Major refactor to simplify the editor and focus exclusively on multi-track editing:
**AudioEditor Changes:**
- Removed single-file waveform view and useAudioPlayer
- Removed all single-file editing operations (cut, copy, paste, trim)
- Simplified to multi-track only with track selection support
- Added selectedTrackId state for track-specific effect chain
- Reduced from ~1500 lines to ~290 lines
**SidePanel Changes:**
- Complete rewrite with 2 tabs: Tracks and Effect Chain
- Tracks tab shows all tracks with inline controls (volume, pan, solo, mute)
- Click tracks to select/deselect
- Effect Chain tab shows effects for selected track
- Removed old file/history/info/effects tabs
- Sidebar now wider (320px) to accommodate inline track controls
**TrackList/Track Changes:**
- Added track selection support (isSelected/onSelect props)
- Visual feedback with ring border when track is selected
- Click anywhere on track to select it
**Workflow:**
1. Import or add audio tracks
2. Select a track in the sidebar or main view
3. Apply effects to selected track via Effect Chain tab
4. Adjust track controls (volume, pan, solo, mute) in Tracks tab
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude <noreply@anthropic.com>
Added comprehensive multi-track support to the main application:
- Added "Tracks" tab to SidePanel with track management controls
- Integrated useMultiTrack and useMultiTrackPlayer hooks into AudioEditor
- Added view mode switching between waveform and tracks views
- Implemented "Convert to Track" to convert current audio buffer to track
- Added TrackList view with multi-track playback controls
- Wired up ImportTrackDialog for importing multiple audio files
Users can now:
- Click "Tracks" tab in side panel to access multi-track mode
- Convert current audio to a track
- Import multiple audio files as tracks
- View and manage tracks in dedicated TrackList view
- Play multiple tracks simultaneously with individual controls
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude <noreply@anthropic.com>
Effect Chain System:
- Create comprehensive effect chain types and state management
- Implement EffectRack component with drag-and-drop reordering
- Add enable/disable toggle for individual effects
- Build PresetManager for save/load/import/export functionality
- Create useEffectChain hook with localStorage persistence
UI Integration:
- Add Chain tab to SidePanel with effect rack
- Integrate preset manager dialog
- Add chain management controls (clear, presets)
- Update SidePanel with chain props and handlers
Features:
- Drag-and-drop effect reordering with visual feedback
- Effect bypass/enable toggle with power icons
- Save effect chains as presets with descriptions
- Import/export presets as JSON files
- localStorage persistence for chains and presets
- Visual status indicators for enabled/disabled effects
- Preset timestamp and effect count display
Components Created:
- /lib/audio/effects/chain.ts - Effect chain types and utilities
- /components/effects/EffectRack.tsx - Visual effect chain component
- /components/effects/PresetManager.tsx - Preset management dialog
- /lib/hooks/useEffectChain.ts - Effect chain state hook
Updated PLAN.md:
- Mark Phase 6.6 as complete
- Update current status to Phase 6.6 Complete
- Add effect chain features to working features list
- Update Next Steps to show Phase 6 complete
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude <noreply@anthropic.com>
- Convert if/else chains to proper type narrowing patterns
- Use type assertions to avoid discriminated union issues
- Simplify EffectPreset and DEFAULT_PARAMS types using any
- Fix TypeScript strict mode compilation errors
- Reorder handler logic to avoid type narrowing conflicts
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude <noreply@anthropic.com>
Phase 6.5 Advanced Effects:
- Add Pitch Shifter with semitones and cents adjustment
- Add Time Stretch with pitch preservation using overlap-add
- Add Distortion with soft/hard/tube types and tone control
- Add Bitcrusher with bit depth and sample rate reduction
- Add AdvancedParameterDialog with real-time waveform visualization
- Add 4 professional presets per effect type
Improvements:
- Fix undefined parameter errors by adding nullish coalescing operators
- Add global custom scrollbar styling with color-mix transparency
- Add custom-scrollbar utility class for side panel
- Improve theme-aware scrollbar appearance in light/dark modes
- Fix parameter initialization when switching effect types
Integration:
- All advanced effects support undo/redo via EffectCommand
- Effects accessible via command palette and side panel
- Selection-based processing support
- Toast notifications for all effects
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude <noreply@anthropic.com>
Complete rewrite of seeking logic to support both scrubbing and
click-to-play functionality with proper state management.
Changes:
1. Added autoPlay parameter to seek() methods across the stack
2. Waveform behavior:
- Click and drag → scrubs WITHOUT auto-play during drag
- Mouse up after drag → auto-plays from release position
- This allows smooth scrubbing while dragging
3. Timeline slider behavior:
- onChange → seeks WITHOUT auto-play (smooth dragging)
- onMouseUp/onTouchEnd → auto-plays from final position
4. Transport button state now correctly syncs with playback state
Technical implementation:
- player.seek(time, autoPlay) - autoPlay defaults to false
- If autoPlay=true OR was already playing → continues playback
- If autoPlay=false AND wasn't playing → just seeks (isPaused=true)
- useAudioPlayer.seek() now reads actual player state after seeking
User experience:
✓ Click on waveform → music plays from that position
✓ Drag on waveform → scrubs smoothly, plays on release
✓ Drag timeline slider → scrubs smoothly, plays on release
✓ Transport buttons show correct state (Play/Pause)
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude <noreply@anthropic.com>
Enhanced info boxes with better contrast and visibility:
- Increased background opacity from /10 to /90 for blue info boxes
- Changed to thicker border (border-2) for better definition
- Changed text color to white for better contrast on blue background
- Applied consistent styling across:
* Selection Active info box (EditControls)
* History Available info box (HistoryControls)
Info boxes are now clearly readable in both light and dark modes.
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude <noreply@anthropic.com>
Added comprehensive undo/redo functionality:
- Command pattern interface and base classes
- HistoryManager with 50-operation stack
- EditCommand for all edit operations (cut, delete, paste, trim)
- Full keyboard shortcuts (Ctrl+Z undo, Ctrl+Y/Ctrl+Shift+Z redo)
- HistoryControls UI component with visual feedback
- Integrated history system with all edit operations
- Toast notifications for undo/redo actions
- History state tracking and display
New files:
- lib/history/command.ts - Command interface and BaseCommand
- lib/history/history-manager.ts - HistoryManager class
- lib/history/commands/edit-command.ts - EditCommand and factory functions
- lib/hooks/useHistory.ts - React hook for history management
- components/editor/HistoryControls.tsx - History UI component
Modified files:
- components/editor/AudioEditor.tsx - Integrated history system
- components/editor/EditControls.tsx - Updated keyboard shortcuts display
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude <noreply@anthropic.com>
