Done
Build a 16-step drum sequencer for the selected 1-bar hybrid clip.
The first clip editor needs drum programming that stores events in the serializable clip model and can integrate with the existing audio playback/scheduler when present.
Included:
- Render a 16-step grid.
- Add initial lanes for kick, snare, closed hi-hat, and open hi-hat.
- Toggle steps on and off.
- Store events in the clip model using tick positions.
- Store lane sample assignment and lane order in the clip model.
- Allow lane sample selection from bundled drum samples.
- Allow vertical lane reordering.
- Use CSS Modules for styling.
- Use semantic buttons for step toggles.
- Integrate with the existing audio playback/scheduler if already present.
Excluded:
- Piano roll.
- Arrangement view.
- Sample import.
- Advanced velocity editing unless simple velocity is already easy.
- Swing or groove editing.
- Store step positions in ticks.
- Use 120 ticks per 16-step grid step for a 1-bar 4/4 clip at PPQ 480.
- Keep UI rendering separate from scheduler internals.
- Keep project data serializable.
- Users can toggle drum steps for the four initial lanes.
- Drum events are added to and removed from the selected clip model.
- Lane sample selection and lane order update the selected clip model.
- Step buttons have accessible names and visible focus states.
- Playback integration works if the scheduler exists.
Run:
npm run typechecknpm run lintnpm run testnpm run build
Manual check:
- Toggle steps in each lane and confirm model state updates.
- If playback exists, confirm enabled steps trigger the expected sounds in a loop.
- Describe how lanes map to sample IDs.
- Note whether playback integration was included or deferred.