[{"_1":2,"_3":-5,"_4":-5},"loaderData",{"_5":6,"_7":8},"actionData","errors","root",{"_23":24,"_25":26,"_27":21,"_28":21,"_29":21,"_30":21,"_31":21,"_32":21,"_33":34},"routes/canvas.shared.$sharedTextdocId",{"_9":10,"_11":-7,"_12":13,"_14":15,"_16":17,"_18":19,"_20":21,"_22":21},"sharedTextdocId","688f8863946c8191b463d02c06c33e46","versionInt","title","Music Production Os — Web Daw (mvp, Single‑file React App)","type","code/react","content","import React, { useEffect, useMemo, useRef, useState } from \"react\";\n\n/**\n * Music Production OS — MVP Web DAW\n * -------------------------------------------------------------\n * Single-file React app implementing a usable subset of the PRD:\n * - Transport: play / pause / stop, position, loop, tempo (for grid + metronome)\n * - Multi-track: Audio tracks (import .wav/.mp3), Instrument tracks (built-in synth)\n * - Clips: draggable on a bar/beat grid with snap; multiple clips per track\n * - Mixer: per-track volume, pan, mute/solo; simple per-track delay + lowpass\n * - Master: limiter (DynamicsCompressorNode) + meter\n * - Waveforms: lightweight peak rendering to Canvas (no external libs)\n * - Piano Roll: 16-step sequencer for Instrument tracks\n * - File ops: export/import project JSON (audio kept via ArrayBuffer in-memory during session)\n * Notes:\n * - No external NPM deps; pure Web Audio + React. Works in modern Chromium/Firefox.\n * - MIDI input (Web MIDI) is optional and gated behind a button (permissions).\n * - This is an MVP designed to be immediately usable in-browser.\n */\n\n/*************************\n * Types\n *************************/\n type TrackType = \"audio\" | \"instrument\";\n type UUID = string;\n type Seconds = number;\n type Beats = number;\n\n type Clip = {\n id: UUID;\n trackId: UUID;\n kind: \"audio\" | \"note\";\n start: Beats; // position in beats\n duration: Beats;\n // Audio-only\n buffer?: AudioBuffer | null;\n offsetSec?: Seconds; // start within buffer (sec)\n // Instrument-only (simple step sequence)\n steps?: boolean[]; // length = 16\n note?: string; // e.g., \"C4\"\n velocity?: number; // 0..1\n };\n\n type Track = {\n id: UUID;\n name: string;\n type: TrackType;\n clips: Clip[];\n volume: number; // 0..1\n pan: number; // -1..1\n mute: boolean;\n solo: boolean;\n fx: {\n delayMs: number;\n delayMix: number; // 0..1\n lpHz: number; // low-pass cutoff\n };\n };\n\n type Project = {\n id: UUID;\n name: string;\n bpm: number;\n loopEnabled: boolean;\n loopStart: Beats;\n loopEnd: Beats;\n tracks: Track[];\n };\n\n type Scheduled = {\n id: UUID;\n source?: AudioBufferSourceNode;\n gain?: GainNode;\n };\n\n/*************************\n * Utilities\n *************************/\n const uid = () => Math.random().toString(36).slice(2) + Date.now().toString(36);\n const clamp = (v: number, a: number, b: number) => Math.max(a, Math.min(b, v));\n const lerp = (a: number, b: number, t: number) => a + (b - a) * t;\n\n // Note -> frequency (A4 = 440)\n const noteToFreq = (note: string): number => {\n // e.g., C4, A#3, Db5\n const A4 = 440;\n const map: Record = {\n C: -9, \"C#\": -8, Db: -8, D: -7, \"D#\": -6, Eb: -6, E: -5,\n F: -4, \"F#\": -3, Gb: -3, G: -2, \"G#\": -1, Ab: -1,\n A: 0, \"A#\": 1, Bb: 1, B: 2,\n };\n const m = note.match(/^([A-G](?:#|b)?)(-?\\d)$/);\n if (!m) return 440;\n const [, n, o] = m;\n const semis = map[n] ?? 0;\n const octave = parseInt(o, 10);\n const dist = semis + (octave - 4) * 12;\n return A4 * Math.pow(2, dist / 12);\n };\n\n const beatsToSeconds = (beats: Beats, bpm: number) => (beats * 60) / bpm;\n const secondsToBeats = (sec: Seconds, bpm: number) => (sec * bpm) / 60;\n\n // Simple peak downsampler for waveform rendering\n const buildPeaks = (buffer: AudioBuffer, desiredLength = 2048) => {\n const chData = buffer.getChannelData(0);\n const block = Math.floor(chData.length / desiredLength) || 1;\n const peaks = new Float32Array(desiredLength);\n for (let i = 0; i < desiredLength; i++) {\n let start = i * block;\n let end = Math.min(start + block, chData.length);\n let max = 0;\n for (let j = start; j < end; j++) max = Math.max(max, Math.abs(chData[j]));\n peaks[i] = max;\n }\n return peaks;\n };\n\n/*************************\n * Audio Engine (minimal)\n *************************/\n class Engine {\n ctx: AudioContext;\n masterGain: GainNode;\n masterComp: DynamicsCompressorNode; // limiter-like\n meterAnalyser: AnalyserNode;\n // transport\n bpm = 120;\n playing = false;\n startCtxTime = 0; // ctx.currentTime when we pressed play\n startPosBeats = 0; // position (beats) when play pressed\n loop = { enabled: false, start: 0, end: 8 };\n\n // scheduling\n lookahead = 0.1; // seconds\n schedInterval: number | null = null;\n scheduled = new Map();\n\n // per-track nodes\n trackNodes = new Map();\n\n constructor() {\n // Prefer low-latency\n // @ts-ignore\n this.ctx = new (window.AudioContext || (window as any).webkitAudioContext)({ latencyHint: \"interactive\", sampleRate: 44100 });\n this.masterGain = this.ctx.createGain();\n this.masterGain.gain.value = 0.9;\n\n this.masterComp = this.ctx.createDynamicsCompressor();\n this.masterComp.threshold.value = -6;\n this.masterComp.knee.value = 12;\n this.masterComp.ratio.value = 16;\n this.masterComp.attack.value = 0.003;\n this.masterComp.release.value = 0.25;\n\n this.meterAnalyser = this.ctx.createAnalyser();\n this.meterAnalyser.fftSize = 2048;\n\n this.masterGain.connect(this.masterComp);\n this.masterComp.connect(this.meterAnalyser);\n this.meterAnalyser.connect(this.ctx.destination);\n }\n\n setBpm(bpm: number) { this.bpm = bpm; }\n setLoop(enabled: boolean, start: Beats, end: Beats) {\n this.loop = { enabled, start, end: Math.max(end, start + 1) };\n }\n\n ensureTrackNodes(trackId: string) {\n if (this.trackNodes.has(trackId)) return this.trackNodes.get(trackId)!;\n const gain = this.ctx.createGain();\n const pan = this.ctx.createStereoPanner();\n const delay = this.ctx.createDelay(2.0);\n const delayGain = this.ctx.createGain();\n const lp = this.ctx.createBiquadFilter();\n lp.type = \"lowpass\"; lp.frequency.value = 20000;\n\n // dry -> LP -> pan -> gain -> master\n lp.connect(pan); pan.connect(gain); gain.connect(this.masterGain);\n\n // delay send/return: lp -> delay -> delayGain -> master\n lp.connect(delay); delay.connect(delayGain); delayGain.connect(this.masterGain);\n\n const nodes = { gain, pan, delay, delayGain, lp };\n this.trackNodes.set(trackId, nodes);\n return nodes;\n }\n\n updateTrackNodes(track: Track) {\n const n = this.ensureTrackNodes(track.id);\n n.gain.gain.value = track.mute ? 0 : track.volume;\n n.pan.pan.value = track.pan;\n n.delay.delayTime.value = Math.max(0, track.fx.delayMs / 1000);\n n.delayGain.gain.value = clamp(track.fx.delayMix, 0, 1) * (track.mute ? 0 : 0.6);\n n.lp.frequency.setTargetAtTime(track.fx.lpHz, this.ctx.currentTime, 0.01);\n }\n\n get positionBeats(): Beats {\n if (!this.playing) return this.startPosBeats;\n const elapsedSec = this.ctx.currentTime - this.startCtxTime;\n return this.startPosBeats + secondsToBeats(elapsedSec, this.bpm);\n }\n\n async resume() {\n if (this.ctx.state !== \"running\") await this.ctx.resume();\n }\n\n play(fromBeats?: Beats) {\n if (fromBeats !== undefined) this.startPosBeats = Math.max(0, fromBeats);\n this.startCtxTime = this.ctx.currentTime;\n this.playing = true;\n this.startScheduler();\n }\n\n pause() {\n this.playing = false;\n this.stopScheduler();\n this.stopAllScheduled();\n // keep startPosBeats where it is\n }\n\n stop() {\n this.playing = false;\n this.stopScheduler();\n this.stopAllScheduled();\n this.startPosBeats = 0;\n }\n\n private startScheduler() {\n this.stopScheduler();\n this.schedInterval = window.setInterval(() => this.schedulerTick(), Math.max(10, (this.lookahead * 1000) / 2));\n }\n private stopScheduler() { if (this.schedInterval) window.clearInterval(this.schedInterval); this.schedInterval = null; }\n\n private stopAllScheduled() {\n this.scheduled.forEach((s) => { try { s.source?.stop(); } catch {} });\n this.scheduled.clear();\n }\n\n /** Schedule audio buffer playback for a window starting at now .. now+lookahead */\n scheduleAudioClip(track: Track, clip: Clip, nowSec: number, winStartBeats: Beats, winEndBeats: Beats) {\n if (!clip.buffer) return;\n const clipStart = clip.start;\n const clipEnd = clip.start + clip.duration;\n // no overlap with window\n if (clipEnd < winStartBeats || clipStart > winEndBeats) return;\n\n const whenBeats = Math.max(clipStart, winStartBeats);\n const whenSec = nowSec + beatsToSeconds(whenBeats - winStartBeats, this.bpm);\n\n const offsetSec = Math.max(0, beatsToSeconds(whenBeats - clipStart, this.bpm)) + (clip.offsetSec || 0);\n const durBeatsLeft = clipEnd - whenBeats;\n const durSec = beatsToSeconds(durBeatsLeft, this.bpm);\n\n const id = `${clip.id}-${whenBeats.toFixed(3)}`;\n if (this.scheduled.has(id)) return; // already scheduled\n\n const n = this.ensureTrackNodes(track.id);\n const src = this.ctx.createBufferSource();\n src.buffer = clip.buffer;\n // simple per-clip gain container (for future automation)\n const g = this.ctx.createGain();\n g.gain.value = 1.0;\n\n src.connect(g); g.connect(n.lp);\n\n try { src.start(whenSec, offsetSec, durSec); } catch {}\n this.scheduled.set(id, { id, source: src, gain: g });\n // cleanup after it ends\n src.onended = () => this.scheduled.delete(id);\n }\n\n /** Schedule instrument steps (simple poly synth with ADSR) */\n scheduleInstrumentClip(track: Track, clip: Clip, nowSec: number, winStartBeats: Beats, winEndBeats: Beats) {\n const steps = clip.steps || [];\n const note = clip.note || \"C4\";\n const freq = noteToFreq(note);\n const totalBeats = clip.duration;\n const stepBeats = totalBeats / steps.length;\n\n for (let i = 0; i < steps.length; i++) {\n if (!steps[i]) continue;\n const stepStartBeats = clip.start + i * stepBeats;\n const stepEndBeats = stepStartBeats + stepBeats;\n if (stepEndBeats < winStartBeats || stepStartBeats > winEndBeats) continue;\n const whenBeats = Math.max(stepStartBeats, winStartBeats);\n const whenSec = nowSec + beatsToSeconds(whenBeats - winStartBeats, this.bpm);\n const durBeats = stepEndBeats - whenBeats;\n const durSec = beatsToSeconds(durBeats, this.bpm) * 0.95; // slight gate to avoid clicks\n this.triggerSynthNote(track, freq, whenSec, durSec, clip.velocity ?? 0.8);\n }\n }\n\n triggerSynthNote(track: Track, freq: number, when: number, dur: number, vel: number) {\n const n = this.ensureTrackNodes(track.id);\n const osc = this.ctx.createOscillator();\n osc.type = \"sawtooth\";\n osc.frequency.setValueAtTime(freq, when);\n\n const vca = this.ctx.createGain();\n const attack = 0.005, decay = 0.08, sustain = 0.6, release = 0.12;\n vca.gain.setValueAtTime(0, when);\n vca.gain.linearRampToValueAtTime(vel, when + attack);\n vca.gain.linearRampToValueAtTime(vel * sustain, when + attack + decay);\n vca.gain.setValueAtTime(vel * sustain, when + Math.max(attack + decay, dur));\n vca.gain.linearRampToValueAtTime(0.0001, when + Math.max(attack + decay, dur) + release);\n\n osc.connect(vca); vca.connect(n.lp);\n osc.start(when);\n osc.stop(when + Math.max(dur + 0.12, attack + decay + release));\n }\n\n schedulerTick() {\n if (!this.playing) return;\n const now = this.ctx.currentTime;\n const posBeats = this.positionBeats; // position at now\n let winStartBeats = posBeats;\n let winEndBeats = posBeats + secondsToBeats(this.lookahead, this.bpm);\n\n // handle looping window\n if (this.loop.enabled) {\n const { start, end } = this.loop;\n // If window passes loop end, split windows\n const loopLen = end - start;\n const normPos = ((posBeats - start) % loopLen + loopLen) % loopLen + start;\n winStartBeats = normPos;\n winEndBeats = normPos + secondsToBeats(this.lookahead, this.bpm);\n }\n\n // The scheduler doesn't know about project; it is driven externally.\n }\n }\n\n/*************************\n * React App\n *************************/\n export default function WebDAW() {\n const engineRef = useRef(null);\n const [project, setProject] = useState(() => ({\n id: uid(),\n name: \"Untitled Session\",\n bpm: 120,\n loopEnabled: false,\n loopStart: 0,\n loopEnd: 8,\n tracks: [\n newInstrumentTrack(\"Keys\"),\n ],\n }));\n\n const [playing, setPlaying] = useState(false);\n const [playheadBeats, setPlayheadBeats] = useState(0);\n const [snap, setSnap] = useState(0.25); // 16th by default\n const [selectedClipId, setSelectedClipId] = useState(null);\n const [meter, setMeter] = useState(0);\n const [showPianoRoll, setShowPianoRoll] = useState(true);\n\n // init engine\n useEffect(() => {\n engineRef.current = new Engine();\n const raf = () => {\n const e = engineRef.current!;\n setPlayheadBeats(e.positionBeats);\n // Meter (RMS-ish from analyser time domain)\n const buf = new Uint8Array(e.meterAnalyser.fftSize);\n e.meterAnalyser.getByteTimeDomainData(buf);\n let mean = 0; for (let i = 0; i < buf.length; i++) { const v = (buf[i] - 128) / 128; mean += v * v; }\n mean /= buf.length; setMeter(Math.sqrt(mean));\n requestAnimationFrame(raf);\n };\n const id = requestAnimationFrame(raf);\n return () => cancelAnimationFrame(id);\n }, []);\n\n // keep engine settings synced\n useEffect(() => {\n const e = engineRef.current!;\n e.setBpm(project.bpm);\n e.setLoop(project.loopEnabled, project.loopStart, project.loopEnd);\n project.tracks.forEach((t) => e.updateTrackNodes(t));\n }, [project]);\n\n // Global document-level mouse handling for clip dragging\n const dragState = useRef<{ clipId: UUID; startBeatOrig: number; startX: number } | null>(null);\n useEffect(() => {\n const onMove = (ev: MouseEvent) => {\n const st = dragState.current; if (!st) return;\n const dx = ev.clientX - st.startX;\n const beatsPerPx = 1 / PX_PER_BEAT;\n let newStart = st.startBeatOrig + dx * beatsPerPx;\n if (snap > 0) newStart = Math.round(newStart / snap) * snap;\n setProject((p) => ({ ...p, tracks: p.tracks.map((t) => ({ ...t, clips: t.clips.map((c) => c.id === st.clipId ? { ...c, start: Math.max(0, newStart) } : c) })) }));\n };\n const onUp = () => { dragState.current = null; };\n window.addEventListener(\"mousemove\", onMove);\n window.addEventListener(\"mouseup\", onUp);\n return () => { window.removeEventListener(\"mousemove\", onMove); window.removeEventListener(\"mouseup\", onUp); };\n }, [snap]);\n\n // Transport controls\n const play = async () => {\n const e = engineRef.current!; await e.resume();\n // Start scheduler that actually places notes/audio for the next window\n startProjectScheduler(project, e);\n e.play(playheadBeats);\n setPlaying(true);\n };\n const pause = () => { const e = engineRef.current!; e.pause(); setPlaying(false); };\n const stop = () => { const e = engineRef.current!; e.stop(); setPlaying(false); };\n\n // Track ops\n const addAudio = () => setProject((p) => ({ ...p, tracks: [...p.tracks, newAudioTrack(`Audio ${p.tracks.length + 1}`)] }));\n const addInst = () => setProject((p) => ({ ...p, tracks: [...p.tracks, newInstrumentTrack(`Inst ${p.tracks.length + 1}`)] }));\n\n const toggleSolo = (id: UUID) => setProject((p) => {\n const target = p.tracks.find((t) => t.id === id)!;\n const newSolo = !target.solo;\n const tracks = p.tracks.map((t) => t.id === id ? { ...t, solo: newSolo } : t);\n // apply mute logic: if any solo is on, mute others (without altering their mute flag visually)\n applySoloMute(engineRef.current!, tracks);\n return { ...p, tracks };\n });\n\n const importAudioToTrack = async (trackId: UUID, file: File) => {\n const arr = await file.arrayBuffer();\n const e = engineRef.current!;\n const buf = await e.ctx.decodeAudioData(arr.slice(0));\n const clip: Clip = { id: uid(), trackId, kind: \"audio\", start: 0, duration: secondsToBeats(buf.duration, project.bpm), buffer: buf, offsetSec: 0 };\n setProject((p) => ({ ...p, tracks: p.tracks.map((t) => t.id === trackId ? { ...t, clips: [...t.clips, clip] } : t) }));\n };\n\n const exportProject = () => {\n const json = JSON.stringify({ ...project, tracks: project.tracks.map(stripBuffersForExport) }, null, 2);\n const blob = new Blob([json], { type: \"application/json\" });\n const url = URL.createObjectURL(blob);\n const a = document.createElement(\"a\");\n a.href = url; a.download = `${project.name.replace(/\\s+/g, \"_\")}.json`; a.click(); URL.revokeObjectURL(url);\n };\n const importProject = async (file: File) => {\n const text = await file.text();\n const obj = JSON.parse(text) as Project;\n // Buffers cannot be restored from JSON; imported projects will load structure only.\n setProject({ ...obj, id: uid() });\n };\n\n const gridBeats = 64; // virtual length of session shown\n\n return (\n

\n {/* Top Bar */}\n

Music Production OS — Web DAW

\n \n \n \n

\n BPM\n setProject({ ...project, bpm: Number(e.target.value || 120) })} />\n Snap\n \n Loop\n setProject({ ...project, loopEnabled: e.target.checked })} />\n [{project.loopStart} — {project.loopEnd}]\n

\n \n \n \n \n Import e.target.files && importProject(e.target.files[0])} />\n \n

\n\n {/* Main layout */}\n

\n {/* Track list & controls */}\n

\n {project.tracks.map((t, idx) => (\n

{idx + 1}. {t.name}

{t.type}

\n \n \n setProject((p) => ({ ...p, tracks: p.tracks.map((x) => x.id === t.id ? { ...x, volume: Number(e.target.value) } : x) }))} />\n setProject((p) => ({ ...p, tracks: p.tracks.map((x) => x.id === t.id ? { ...x, pan: Number(e.target.value) } : x) }))} />\n

Delay

\n setProject(updateFx(t.id, { delayMs: Number(e.target.value) }))} />\n setProject(updateFx(t.id, { delayMix: Number(e.target.value) }))} />\n

LP Hz

\n setProject(updateFx(t.id, { lpHz: Number(e.target.value) }))} />\n

\n {t.type === \"audio\" && (\n \n Import Audio\n e.target.files && importAudioToTrack(t.id, e.target.files[0])} />\n \n )}\n {t.type === \"instrument\" && (\n \n )}\n

\n ))}\n

\n\n {/* Timeline */}\n {\n dragState.current = { clipId, startBeatOrig: clip.start, startX: ev.clientX };\n }}\n />\n\n {/* Mixer / Meter / Piano Roll */}\n

Master Meter

Piano Roll

\n \n setShowPianoRoll(e.target.checked)} /> Show\n \n

\n {showPianoRoll && }\n

\n );\n }\n\n/*************************\n * Timeline Component\n *************************/\n const PX_PER_BEAT = 48; // zoom level\n\n function Timeline({ project, setProject, selectedClipId, setSelectedClipId, playheadBeats, gridBeats, snap, onClipMouseDown }:{\n project: Project;\n setProject: React.Dispatch>;\n selectedClipId: UUID | null;\n setSelectedClipId: (id: UUID | null) => void;\n playheadBeats: Beats;\n gridBeats: Beats;\n snap: Beats;\n onClipMouseDown: (clipId: UUID, ev: React.MouseEvent, clip: Clip) => void;\n }) {\n const totalPx = gridBeats * PX_PER_BEAT;\n\n const addClip = (trackId: UUID, kind: \"audio\" | \"note\") => {\n const c: Clip = kind === \"audio\"\n ? { id: uid(), trackId, kind: \"audio\", start: 0, duration: 4, buffer: undefined, offsetSec: 0 }\n : { id: uid(), trackId, kind: \"note\", start: 0, duration: 4, steps: new Array(16).fill(false), note: \"C4\", velocity: 0.8 };\n setProject((p) => ({ ...p, tracks: p.tracks.map((t) => t.id === trackId ? { ...t, clips: [...t.clips, c] } : t) }));\n };\n\n const onBgDbl = (trackId: UUID, ev: React.MouseEvent) => {\n const rect = (ev.currentTarget as HTMLDivElement).getBoundingClientRect();\n const x = ev.clientX - rect.left;\n let startBeats = x / PX_PER_BEAT; if (snap > 0) startBeats = Math.round(startBeats / snap) * snap;\n // create default clip at that position\n const t = project.tracks.find((t) => t.id === trackId)!;\n if (t.type === \"instrument\") {\n const clip: Clip = { id: uid(), trackId, kind: \"note\", start: startBeats, duration: 4, steps: new Array(16).fill(false), note: \"C4\", velocity: 0.8 };\n setProject((p) => ({ ...p, tracks: p.tracks.map((x) => x.id === trackId ? { ...x, clips: [...x.clips, clip] } : x) }));\n } else {\n const clip: Clip = { id: uid(), trackId, kind: \"audio\", start: startBeats, duration: 4, buffer: undefined, offsetSec: 0 };\n setProject((p) => ({ ...p, tracks: p.tracks.map((x) => x.id === trackId ? { ...x, clips: [...x.clips, clip] } : x) }));\n }\n };\n\n return (\n

\n {/* Ruler */}\n

\n {Array.from({ length: gridBeats }).map((_, i) => (\n

\n {i % 4 === 0 ? i / 4 + 1 : \"\"}\n

\n ))}\n {/* Playhead */}\n

\n\n {/* Tracks lanes */}\n {project.tracks.map((t) => (\n

onBgDbl(t.id, e)}>\n {/* Clips */}\n {t.clips.map((c) => (\n setSelectedClipId(c.id)}\n onMouseDown={(ev) => onClipMouseDown(c.id, ev, c)}\n onResize={(deltaBeats) => setProject((p) => ({ ...p, tracks: p.tracks.map((x) => x.id === t.id ? { ...x, clips: x.clips.map((cc) => cc.id === c.id ? { ...cc, duration: Math.max(0.25, cc.duration + deltaBeats) } : cc) } : x) }))}\n />\n ))}\n

\n ))}\n

\n );\n }\n\n function ClipView({ clip, track, bpm, selected, onSelect, onMouseDown, onResize }:{\n clip: Clip; track: Track; bpm: number; selected: boolean; onSelect: () => void; onMouseDown: (ev: React.MouseEvent) => void; onResize: (deltaBeats: number) => void;\n }) {\n const left = clip.start * PX_PER_BEAT;\n const width = clip.duration * PX_PER_BEAT;\n const color = track.type === \"audio\" ? \"#4ecdc4\" : \"#00ff88\";\n\n return (\n

{ onSelect(); onMouseDown(e); }}>\n

{track.type === \"audio\" ? \"Audio Clip\" : `${clip.note} — Steps`}

{clip.duration.toFixed(2)} beats

\n {track.type === \"audio\" ? : }\n {/* Resize handle */}\n

{\n e.stopPropagation();\n const startX = e.clientX; const orig = clip.duration;\n const mm = (ev: MouseEvent) => { const dx = ev.clientX - startX; let db = dx / PX_PER_BEAT; db = Math.round(db / 0.0625) * 0.0625; onResize(db); };\n const up = () => { window.removeEventListener(\"mousemove\", mm); window.removeEventListener(\"mouseup\", up); };\n window.addEventListener(\"mousemove\", mm); window.addEventListener(\"mouseup\", up);\n }} />\n

\n );\n }\n\n function Waveform({ buffer, color }:{ buffer: AudioBuffer | null; color: string }) {\n const ref = useRef(null);\n useEffect(() => {\n const canvas = ref.current; if (!canvas) return;\n const ctx = canvas.getContext(\"2d\")!;\n ctx.clearRect(0, 0, canvas.width, canvas.height);\n ctx.fillStyle = \"#0f172a\"; ctx.fillRect(0,0,canvas.width,canvas.height);\n if (!buffer) {\n ctx.fillStyle = \"#334155\"; ctx.fillRect(0, 0, canvas.width, canvas.height);\n ctx.fillStyle = \"#64748b\"; ctx.fillText(\"(Import audio to render waveform)\", 8, 16);\n return;\n }\n const peaks = buildPeaks(buffer, Math.floor(canvas.width));\n const mid = canvas.height / 2;\n ctx.strokeStyle = color; ctx.lineWidth = 1;\n ctx.beginPath();\n for (let x = 0; x < canvas.width; x++) {\n const p = peaks[x] || 0; const y = p * (canvas.height / 2 - 2);\n ctx.moveTo(x + 0.5, mid - y); ctx.lineTo(x + 0.5, mid + y);\n }\n ctx.stroke();\n }, [buffer, color]);\n return