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>
Changed button dimensions from h-8 w-full to h-12 w-12 for a
square/quadratic shape matching the design of track buttons.
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude <noreply@anthropic.com>
Changed master mute button from Button component to match track style:
- Native button element with rounded-md styling
- Blue background when muted (bg-blue-500) with shadow
- Card background when unmuted with hover state
- Text-based "M" label instead of icons
- Larger size (h-8, text-[11px]) compared to track (h-5, text-[9px])
- Removed unused Volume2/VolumeX icon imports
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude <noreply@anthropic.com>
Added comprehensive touch event handling for mobile/tablet support:
CircularKnob.tsx:
- Added handleTouchStart, handleTouchMove, handleTouchEnd handlers
- Touch events use same drag logic as mouse events
- Prevents default to avoid scrolling while adjusting
TrackFader.tsx:
- Added touch event handlers for vertical fader control
- Integrated with existing onTouchStart/onTouchEnd callbacks
- Supports touch-based automation recording
MasterFader.tsx:
- Added touch event handlers matching TrackFader
- Complete touch support for master volume control
All components now work seamlessly on touch-enabled devices.
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude <noreply@anthropic.com>
Reverted track heights to original values:
- DEFAULT_TRACK_HEIGHT: 360px → 340px
- MIN_TRACK_HEIGHT: 260px → 240px
Increased bottom padding of TrackControls from py-2 to pt-2 pb-4
for better spacing at the bottom of the control card.
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude <noreply@anthropic.com>
Raised MIN_TRACK_HEIGHT to ensure proper spacing for all track
controls with the new border styling.
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude <noreply@anthropic.com>
Increased DEFAULT_TRACK_HEIGHT to provide more vertical space for
track controls and waveform viewing.
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude <noreply@anthropic.com>
Changed background from bg-card to bg-card/50 for both TrackControls
and MasterControls to make the border more prominent.
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude <noreply@anthropic.com>
Increased opacity for both TrackControls and MasterControls:
- bg-muted/10 → bg-muted/20 (background)
- border-accent/30 → border-accent/50 (border)
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude <noreply@anthropic.com>
Shifted faders to the right for better visual alignment:
- TrackFader: 8px margin-left
- MasterFader: 12px margin-left
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude <noreply@anthropic.com>
Changed back from .toFixed(2) to .toFixed(1) while keeping the fixed
widths to prevent component movement.
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude <noreply@anthropic.com>
Added fixed widths to prevent component movement when values change:
- TrackFader: w-[32px] for value display
- MasterFader: w-[36px] for value/peak/RMS display
Changed decimal precision from .toFixed(1) to .toFixed(2) for more
accurate dB readings (e.g., -3.11 instead of -3.1).
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude <noreply@anthropic.com>
Track levels were being converted to dB scale twice:
1. First in useMultiTrackPlayer via linearToDbScale()
2. Again in TrackFader via linearToDb()
This caused tracks to show incorrect meter levels compared to master.
Now both track and master levels store raw linear values (0-1) and
let the fader components handle the single dB conversion for display.
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude <noreply@anthropic.com>
Previously, master meters received raw linear values (0-1) while track
meters received dB-normalized values, causing inconsistent metering display.
Now both master peak and RMS levels are converted using linearToDbScale()
for accurate comparison between track and master levels.
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude <noreply@anthropic.com>
- Changed RMS meter colors from 400 to 500 shades (brighter)
- Both Peak and RMS meters now use same color brightness
- Applied to both TrackFader and MasterFader
- Provides better visual consistency between the two meter types
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude <noreply@anthropic.com>
- Added ml-2 (8px left margin) to TrackFader
- Added ml-2 (8px left margin) to MasterFader
- Both faders with their labels now shifted right for better alignment
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude <noreply@anthropic.com>
- Restructured TrackControls layout using flexbox justify-between
- Pan knob positioned at top
- Fader vertically centered in flex-1 middle section
- R/S/M/A/E buttons positioned at bottom in two rows
- Main container uses h-full for proper vertical distribution
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude <noreply@anthropic.com>
- Increased default track height from 320px to 340px
- Provides more breathing room for all track controls
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude <noreply@anthropic.com>
- Reverted buttons to two rows (R/S/M and A/E) for better organization
- Changed button borders from 'rounded' to 'rounded-md' for consistency
- Centered pan knob and fader in their containers
- Increased spacing from gap-1.5 py-1.5 to gap-2 py-2
- Increased default track height from 300px to 320px
- Increased minimum track height from 220px to 240px
- All buttons now clearly visible with proper spacing
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude <noreply@anthropic.com>
- Added showEffects prop to TrackControls interface
- Effects button (E) now shows active state with primary color when toggled
- Automation button (A) already had active state functionality
- Both buttons now provide clear visual feedback when active
- Updated Track component to pass showEffects state to TrackControls
🤖 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>
Phase 9.3 - Automation Playback:
- Added real-time automation evaluation during playback
- Automation values are applied continuously via requestAnimationFrame
- Volume automation: Interpolates between points and applies to gain nodes
- Pan automation: Converts 0-1 values to -1 to 1 for StereoPannerNode
Implementation details:
- New applyAutomation() function runs in RAF loop alongside level monitoring
- Evaluates automation at current playback time using evaluateAutomationLinear
- Applies values using setValueAtTime for smooth Web Audio API parameter changes
- Automation loop lifecycle matches playback (start/pause/stop/cleanup)
- Respects automation mode (only applies when mode !== 'read')
Technical improvements:
- Added automationFrameRef for RAF management
- Proper cleanup in pause(), unmount, and playback end scenarios
- Integrated with existing effect chain restart mechanism
- Volume automation multiplied with track gain (mute/solo state)
Next steps:
- Effect parameter automation (TODO in code)
- Automation recording (write mode implementation)
- Touch and latch modes
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude <noreply@anthropic.com>
Effects panel improvements:
- Removed track name label header
- Moved "Add Effect" button to top left corner
- Button now uses self-start alignment for left positioning
- Cleaner, more minimal design
Layout changes:
- Button appears consistently in top left whether effects exist or not
- More space for effect devices
- Better visual hierarchy
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude <noreply@anthropic.com>
Fixed playhead marker alignment issue:
- Changed automation controls from w-[180px] to w-48 (192px)
- Now matches track controls panel width exactly
- Playhead marker now aligns perfectly between waveform and automation
Technical details:
- Track controls use Tailwind's w-48 class (12rem = 192px)
- Automation controls were using w-[180px] causing 12px misalignment
- Both sidebars now use consistent w-48 sizing
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude <noreply@anthropic.com>
Major automation UX improvements:
- Moved all automation controls to left sidebar (180px, matching track controls)
- Parameter dropdown selector
- Automation mode button (R/W/T/L with color coding)
- Height adjustment buttons (+/-)
- Automation canvas now fills right side (matching waveform width exactly)
- Removed AutomationHeader component (no longer needed)
- Removed eye icon (automation visibility controlled by "A" button on track)
Two-column layout consistency:
- Left: 180px sidebar with all controls
- Right: Flexible canvas area matching waveform width
- Perfect vertical alignment between waveform and automation
Simplified AutomationLane component:
- Now only renders the canvas area with points
- All controls handled in parent Track component
- Cleaner, more maintainable code structure
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude <noreply@anthropic.com>
Automation lane improvements:
- Lane now aligns exactly with waveform width using two-column layout
- Added 180px left spacer to match track controls sidebar
- Playhead marker now aligns perfectly with waveform
Automation header improvements:
- Dropdown has fixed width (min-w-[120px] max-w-[200px]) instead of flex-1
- Eye icon (show/hide) is now positioned absolutely on the right
- Cleaner, more compact header layout
Visual consistency:
- Removed redundant border-b from AutomationLane (handled by parent)
- Automation lane and waveform now perfectly aligned vertically
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude <noreply@anthropic.com>
Phase 9 Automation Improvements:
- Replaced multiple automation lanes with single lane + parameter selector
- Added dropdown in automation header to switch between parameters:
- Track parameters: Volume, Pan
- Effect parameters: Dynamically generated from effect chain
- Lanes are created on-demand when parameter is selected
- Effects panel now has fixed height (280px) with scroll
- Panel no longer resizes when effects are expanded
- Maintains consistent UI layout
Technical changes:
- Track.automation.selectedParameterId: Tracks current parameter
- AutomationHeader: Added parameter dropdown props
- AutomationLane: Passes parameter selection to header
- Track.tsx: Single lane rendering with IIFE for parameter list
- Effects panel: h-[280px] with flex layout and overflow-y-auto
🤖 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>
Added comprehensive automation lane UI with Ableton-style design:
**Automation Components:**
- AutomationLane: Canvas-based rendering with grid lines, curves, and points
- AutomationHeader: Parameter name, mode selector, value display
- AutomationPoint: Interactive draggable points with hover states
**Automation Utilities:**
- createAutomationLane/Point: Factory functions
- evaluateAutomationLinear: Interpolation between points
- formatAutomationValue: Display formatting with unit support
- addAutomationPoint/updateAutomationPoint/removeAutomationPoint
**Track Integration:**
- Added "A" toggle button in track control panel
- Automation lanes render below waveform
- Default lanes for Volume (orange) and Pan (green)
- Support for add/edit/delete automation points
- Click to add, drag to move, double-click to delete
**Visual Design:**
- Dark background with horizontal grid lines
- Colored curves with semi-transparent fill (20% opacity)
- 4-6px automation points, 8px on hover
- Mode indicators (Read/Write/Touch/Latch) with colors
- Value labels and current value display
Ready for playback integration in next step.
🤖 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>
Fixed "onUpdateTrack is not defined" error by:
- Added onUpdateTrack to TrackProps interface
- Added onUpdateTrack to Track component destructuring
- Passed onUpdateTrack prop from TrackList to Track
This prop is required for:
- Track height resizing functionality
- Automation lane updates
- General track property updates
🤖 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>
