Recorder selection now spans imported audio and recorded takes. A drag captures one group snapshot, clamps one shared delta, and commits both clip types through one runtime mutation.
Invariant: group movement changes every selected clip by the same clamped timeline delta. The runtime never reorders takes, so newer-take-wins comping remains intact.
onStart captures Ctrl/Cmd state and gesture-local data immediately.
Pointer up becomes onClick. Selection changes without moving anything.
onDragStart resolves group membership and snapshots positions before live movement.
listenPointerDrag owns pointer capture, identity, end, and cancellation. The new gesture utility layers click-versus-drag classification on top rather than duplicating routing.
if (!state.dragged && deltaSquared >= threshold ** 2) {
state.dragged = true;
onDragStart(event, gesture);
}
if (state.dragged) onDragMove(event, gesture);onStart captures modifiers. Only confirmed drags call startMove, while sub-threshold releases call selection.
onStart: event => ({
additive: event.ctrlKey || event.metaKey,
snapshot: undefined,
}),
onClick: (_, { data }) => onClipClick?.(data.additive)Audio tracks and takes map into private string keys. Callers only see semantic operations such as isSelected, select, and startMove.
function select(clip, additive) {
const key = getKey(clip);
if (!additive) return setKeys(new Set([key]));
const next = new Set(keys);
next.has(key) ? next.delete(key) : next.add(key);
setKeys(next);
}The selected IDs, each original timeline offset, and the group’s minimum visible start are captured once. Trimming matters because the visible boundary is timelineOffset + trimStart.
return {
clips,
minimumVisibleStart: Math.min(
...audioTracks.map(t => t.timelineOffset + t.trimStart),
...takes.map(t => t.timelineOffset + t.trimStart),
),
};The earliest visible clip determines how far left the group can travel. Applying the same result to every original offset preserves spacing.
src/components/recorder/index.tsx:598-607const clampedDelta = Math.max(
delta,
-snapshot.minimumVisibleStart,
);
runtime.moveClips(snapshot.clips.map(clip => ({
...clip,
timelineOffset: clip.timelineOffset + clampedDelta,
})));The runtime validates all IDs, pauses once if needed, derives both next track states, performs one store update, synchronizes playback and comp regions, then resumes once.
src/lib/recorder/runtime.ts:231-288const audioTracks = state.audioTracks.map(updateAudioOffset);
const recordingTrack = {
...state.recordingTrack,
takes: state.recordingTrack.takes.map(updateTakeOffset),
};
this.store.update({ audioTracks, recordingTrack });Import audio, record a take, plain-click audio, then Ctrl-click the take. Both expose data-selected=true.
Dragging the take by roughly 80 px moves both bounding boxes by the same amount.
Clicking empty timeline space removes selection from both clip types.
pnpm lint, 134 unit tests, and all 3 focused recorder E2E scenarios pass.
onStart?timelineOffset + trimStart?moveClips update audio and takes together?Generated from toy-midi PR #370 at commit 57cee20e. The artifact explains the final diff against main, not the intermediate commit sequence.