feat: connect drum sequencer to clip model

Author: britle20

PLANS.md

@@ -29,9 +29,8 @@ M1 should include:
 
 Use this section as the current execution order for agent work. Feature document numbering describes the planned product sequence, but actual issue order may change as dependencies, review feedback, or implementation risks become clearer.
 
-1. #5 Lookahead Scheduler -> `docs/features/03-lookahead-scheduler.md` (PR #14 in review)
-2. #3 Drum Step Sequencer -> `docs/features/04-drum-step-sequencer.md`
-3. #2 Basic Piano Roll -> `docs/features/05-basic-piano-roll.md`
+1. #3 Drum Step Sequencer -> `docs/features/04-drum-step-sequencer.md` (implementation in progress)
+2. #2 Basic Piano Roll -> `docs/features/05-basic-piano-roll.md`
 
 ## Planned Milestones
 

docs/data-model.md

@@ -28,6 +28,19 @@ Early clips may contain both drum events and note events. This keeps the M1 edit
 
 Later, the model can evolve toward separate drum, MIDI, and audio clip types if arrangement and editing workflows need stronger separation.
 
+## Initial Drum Clip Implementation
+
+The initial drum step sequencer stores drum hits as serializable `DrumEvent` objects in the selected hybrid clip. A 16-step grid maps step indices to ticks with `stepIndex * 120`.
+
+Initial drum lanes map to bundled sample IDs:
+
+- `kick` -> `kick`
+- `snare` -> `snare`
+- `closedHat` -> `closed-hat`
+- `openHat` -> `open-hat`
+
+Drum event IDs are deterministic within a clip using the clip ID, lane ID, and start tick. Runtime playback converts these serializable events into audio engine sample loop events; the project model itself does not store `AudioBuffer` or other Web Audio objects.
+
 ## Illustrative Types
 
 These snippets show model intent. Implementation may refine names and fields, but changes to model semantics must update this document.

docs/features/04-drum-step-sequencer.md

@@ -1,7 +1,7 @@
 # Feature: 04 Drum Step Sequencer
 
 ## Status
-Planned
+In Progress
 
 ## Goal
 

src/app/App.module.css

@@ -71,6 +71,12 @@
   padding: var(--space-unit) var(--space-gutter);
 }
 
+.clipMeta .errorMeta {
+  border-color: var(--color-status-error);
+  color: var(--color-status-error);
+  text-transform: none;
+}
+
 .editorStack {
   display: grid;
   gap: var(--space-panel);

src/app/App.tsx

@@ -1,5 +1,6 @@
 import { useState } from "react";
 
+import { createAudioEngine, type SampleLoopEvent } from "../audio";
 import {
   DrumSequencer,
   PianoRoll,
@@ -9,20 +10,75 @@ import {
   type TransportMode,
   type TransportState,
 } from "../features";
+import {
+  createEmptyHybridClip,
+  toggleDrumStep,
+  type DrumEvent,
+  type DrumLaneId,
+} from "../model";
 import styles from "./App.module.css";
 
+const audioEngine = createAudioEngine();
+
 const instrumentLabels: Record<InstrumentId, string> = {
   drums: "Drums",
   leadSynth: "Lead Synth",
   subBass: "Sub Bass",
 };
 
+function drumEventsToSampleLoopEvents(
+  drumEvents: readonly DrumEvent[],
+): SampleLoopEvent[] {
+  return drumEvents.map((event) => ({
+    gain: event.velocity,
+    id: event.id,
+    sampleId: event.sampleId,
+    startTick: event.startTick,
+  }));
+}
+
 export function App() {
   const [transportState, setTransportState] = useState<TransportState>("stopped");
   const [transportMode, setTransportMode] = useState<TransportMode>("pattern");
   const [bpm, setBpm] = useState(124);
   const [selectedInstrumentId, setSelectedInstrumentId] =
     useState<InstrumentId>("leadSynth");
+  const [selectedClip, setSelectedClip] = useState(() => createEmptyHybridClip());
+  const [audioError, setAudioError] = useState<string | null>(null);
+
+  function handleDrumStepToggle(laneId: DrumLaneId, stepIndex: number) {
+    setSelectedClip((currentClip) =>
+      toggleDrumStep({
+        clip: currentClip,
+        laneId,
+        stepIndex,
+      }),
+    );
+  }
+
+  async function handleTransportStateChange(nextTransportState: TransportState) {
+    setAudioError(null);
+
+    if (nextTransportState === "stopped") {
+      audioEngine.stopLoop();
+      setTransportState("stopped");
+      return;
+    }
+
+    setTransportState("playing");
+
+    try {
+      await audioEngine.startSampleLoop({
+        events: drumEventsToSampleLoopEvents(selectedClip.drumEvents),
+        tempoBpm: bpm,
+      });
+    } catch (error) {
+      setTransportState("stopped");
+      setAudioError(
+        error instanceof Error ? error.message : "Audio playback failed.",
+      );
+    }
+  }
 
   return (
     <div className={styles.appShell}>
@@ -31,7 +87,7 @@ export function App() {
         mode={transportMode}
         onBpmChange={setBpm}
         onModeChange={setTransportMode}
-        onTransportStateChange={setTransportState}
+        onTransportStateChange={handleTransportStateChange}
         transportState={transportState}
       />
 
@@ -45,17 +101,24 @@ export function App() {
           <header className={styles.workspaceHeader}>
             <div>
               <p className={styles.eyebrow}>M1 Hybrid Clip Editor</p>
-              <h1 className={styles.title}>Clip 1</h1>
+              <h1 className={styles.title}>{selectedClip.name}</h1>
             </div>
             <div className={styles.clipMeta}>
               <span>1 bar</span>
               <span>4/4</span>
               <span>PPQ 480</span>
+              <span>{selectedClip.drumEvents.length} drum events</span>
+              {audioError ? (
+                <span className={styles.errorMeta}>{audioError}</span>
+              ) : null}
             </div>
           </header>
 
           <div className={styles.editorStack}>
-            <DrumSequencer />
+            <DrumSequencer
+              drumEvents={selectedClip.drumEvents}
+              onStepToggle={handleDrumStepToggle}
+            />
             <PianoRoll instrumentName={instrumentLabels[selectedInstrumentId]} />
           </div>
         </main>

src/features/drum-sequencer/DrumSequencer.tsx

@@ -1,50 +1,22 @@
-import { useState } from "react";
-
 import { Panel } from "../../components";
+import {
+  DRUM_LANES,
+  DRUM_STEP_COUNT,
+  isDrumStepActive,
+  type DrumEvent,
+  type DrumLaneId,
+} from "../../model";
 import styles from "./DrumSequencer.module.css";
 
-interface DrumLane {
-  id: string;
-  label: string;
+interface DrumSequencerProps {
+  drumEvents: readonly DrumEvent[];
+  onStepToggle: (laneId: DrumLaneId, stepIndex: number) => void;
 }
 
-const drumLanes: DrumLane[] = [
-  { id: "kick", label: "KICK" },
-  { id: "snare", label: "SNARE" },
-  { id: "closedHat", label: "CLOSED HI-HAT" },
-  { id: "openHat", label: "OPEN HI-HAT" },
-];
-
-type StepState = Record<string, Set<number>>;
-
-export function DrumSequencer() {
-  const [stepState, setStepState] = useState<StepState>(() => {
-    const initialState: StepState = {};
-
-    for (const lane of drumLanes) {
-      initialState[lane.id] = new Set<number>();
-    }
-
-    return initialState;
-  });
-
-  function handleStepToggle(laneId: string, stepIndex: number) {
-    setStepState((currentState) => {
-      const nextLaneSteps = new Set(currentState[laneId]);
-
-      if (nextLaneSteps.has(stepIndex)) {
-        nextLaneSteps.delete(stepIndex);
-      } else {
-        nextLaneSteps.add(stepIndex);
-      }
-
-      return {
-        ...currentState,
-        [laneId]: nextLaneSteps,
-      };
-    });
-  }
-
+export function DrumSequencer({
+  drumEvents,
+  onStepToggle,
+}: DrumSequencerProps) {
   return (
     <Panel
       actions={<span className={styles.stepMeta}>1 BAR / 16 STEPS</span>}
@@ -55,7 +27,7 @@ export function DrumSequencer() {
         <div className={styles.beatHeader} aria-hidden="true">
           <span />
           <div className={styles.stepNumbers}>
-            {Array.from({ length: 16 }, (_, stepIndex) => {
+            {Array.from({ length: DRUM_STEP_COUNT }, (_, stepIndex) => {
               const isGroupStart = stepIndex > 0 && stepIndex % 4 === 0;
 
               return (
@@ -72,7 +44,7 @@ export function DrumSequencer() {
           </div>
         </div>
 
-        {drumLanes.map((lane) => (
+        {DRUM_LANES.map((lane) => (
           <div className={styles.lane} key={lane.id}>
             <div className={styles.laneControls}>
               <span className={styles.laneLabel}>{lane.label}</span>
@@ -83,8 +55,12 @@ export function DrumSequencer() {
             </div>
 
             <div className={styles.steps}>
-              {Array.from({ length: 16 }, (_, stepIndex) => {
-                const isActive = stepState[lane.id]?.has(stepIndex) ?? false;
+              {Array.from({ length: DRUM_STEP_COUNT }, (_, stepIndex) => {
+                const isActive = isDrumStepActive(
+                  drumEvents,
+                  lane.id,
+                  stepIndex,
+                );
                 const isAlternateGroup = Math.floor(stepIndex / 4) % 2 === 1;
                 const isGroupStart = stepIndex > 0 && stepIndex % 4 === 0;
 
@@ -100,7 +76,7 @@ export function DrumSequencer() {
                       isActive ? styles.stepButtonActive : ""
                     }`}
                     key={stepIndex}
-                    onClick={() => handleStepToggle(lane.id, stepIndex)}
+                    onClick={() => onStepToggle(lane.id, stepIndex)}
                     type="button"
                   />
                 );