Bach to Basics

+ {/* + Page-width wrapper — centres the score and caps it at ~A4 screen width + (900 px). On wide monitors this creates margins on both sides so the + score never looks like a stretched banner; on narrow screens it fills + the full width just like before. position:relative is needed so the + key-signature badge stays anchored inside the content column. + */} +

+ + {settings.showKeySignature && doc?.keySignature && settings.layoutMode !== "all" && ( +

+ {keySignatureToLabel(doc.keySignature)} +

+ )} +

+ ); +} + +// ── Helpers ─────────────────────────────────────────────────────────────────── + +// AlphaTab uses 960 ticks per quarter note internally, regardless of the MIDI file's PPQ. +// This function converts playback seconds to AlphaTab internal ticks (960 PPQ output). +// The tempo map uses MIDI-file ticks for segment boundaries, so we still need `ppq` +// to convert those boundaries to seconds, but the output is always in 960-PPQ space. +const AT_PPQ = 960; + +function secondsToTick(targetSec: number, tempoMap: TempoEvent[], ppq: number): number { + if (!tempoMap.length) return Math.round(targetSec * 2 * AT_PPQ); + let atTick = 0; // accumulated output in AlphaTab 960-PPQ ticks + let remainingSec = targetSec; + + for (let i = 0; i < tempoMap.length; i++) { + const ev = tempoMap[i]; + const next = tempoMap[i + 1]; + + // seconds per MIDI tick at this tempo + const secPerMidiTick = 60 / (ev.bpm * ppq); + // AlphaTab ticks per MIDI tick (scale factor between file PPQ and AT PPQ) + const atPerMidi = AT_PPQ / ppq; + + if (next) { + const midiSpan = next.tick - ev.tick; // segment length in MIDI ticks + const secSpan = midiSpan * secPerMidiTick; + if (remainingSec <= secSpan) { + atTick += Math.round(remainingSec / secPerMidiTick * atPerMidi); + return atTick; + } + remainingSec -= secSpan; + atTick += Math.round(midiSpan * atPerMidi); + } else { + // Last segment - extends to end of piece + atTick += Math.round(remainingSec / secPerMidiTick * atPerMidi); + return atTick; + } + } + return atTick; +} diff --git a/frontend/src/components/Transport/SettingsPanel.tsx b/frontend/src/components/Transport/SettingsPanel.tsx new file mode 100644 index 0000000..41e5109 --- /dev/null +++ b/frontend/src/components/Transport/SettingsPanel.tsx @@ -0,0 +1,1298 @@ +import { useAppStore } from "../../store/useAppStore"; +import type { NoteFilter, ColorTheme, CustomColors, NoteLabelMode, InstrumentId, ImpactStyle } from "../../store/useAppStore"; +import { COLOR_PRESET_VALUES, INSTRUMENT_LABELS } from "../../store/useAppStore"; +import { useState } from "react"; + +const NOTE_FILTER_OPTIONS: { value: NoteFilter; label: string; title: string }[] = [ + { value: "all", label: "All", title: "Show all notes" }, + { value: "white", label: "Natural", title: "Show only natural (white) key notes" }, + { value: "black", label: "Sharps", title: "Show only sharp/flat (black) key notes" }, + { value: "c_only", label: "C only", title: "Show only C notes" }, +]; + +const COLOR_THEME_LABELS: Record = { + violet: "Violet", + classic: "Classic", + ocean: "Ocean", + forest: "Forest", + cascade: "Cascade", + custom: "Custom", +}; + +const NOTE_LABEL_OPTIONS: { value: NoteLabelMode; label: string; title: string }[] = [ + { value: "none", label: "None", title: "No note name labels" }, + { value: "c_only", label: "C only", title: "Label C notes with octave number (C4, C5…)" }, + { value: "white", label: "Natural", title: "Label all natural (white) keys" }, + { value: "black", label: "Sharps", title: "Label all sharp/flat (black) keys" }, + { value: "all", label: "All", title: "Label every key" }, +]; + +const INSTRUMENT_OPTIONS: { value: InstrumentId; label: string; title: string }[] = [ + { value: "grand", label: INSTRUMENT_LABELS.grand, title: "Splendid Grand Piano - high-quality sampled concert grand" }, + { value: "bright", label: INSTRUMENT_LABELS.bright, title: "Bright Acoustic Piano - brighter attack and tone" }, + { value: "electric", label: INSTRUMENT_LABELS.electric, title: "CP80 Electric Grand Piano - vintage Yamaha electric grand" }, + { value: "harpsichord", label: INSTRUMENT_LABELS.harpsichord, title: "Harpsichord - plucked strings, no velocity dynamic" }, + { value: "honkytonk", label: INSTRUMENT_LABELS.honkytonk, title: "Honky-Tonk Piano - slightly out-of-tune saloon upright" }, +]; + +function formatTranspose(n: number): string { + if (n === 0) return "original"; + if (n > 0) return `+${n}♯`; + return `${n}♭`; +} + +// ── Sub-components ──────────────────────────────────────────────────────────── + +function Toggle({ + active, + onClick, + title, +}: { + active: boolean; + onClick: () => void; + title?: string; +}) { + return ( + + ); +} + +/** A row in the settings panel. + * - `sublabel` renders a second, dimmer line under the main label. + * - `stacked` puts the control beneath the label instead of inline (useful for wide controls). */ +function Row({ + label, + sublabel, + title, + stacked = false, + children, +}: { + label: string; + sublabel?: string; + title?: string; + stacked?: boolean; + children: React.ReactNode; +}) { + if (stacked) { + return ( +

+ + {label} + + {sublabel && ( + + {sublabel} + + )} +

+ {children} +

+ ); + } + + return ( +

+ + {label} + + {sublabel && ( + + {sublabel} + + )} +

+ {children} +

+ ); +} + +/** Segmented control - matches the layout-mode tabs in the header. + * `fullWidth` stretches to fill its container, each button sharing equal space. */ +function BtnGroup({ + options, + value, + onChange, + fullWidth = false, + "aria-label": ariaLabel, +}: { + options: { value: T; label: string; title?: string }[]; + value: T; + onChange: (v: T) => void; + fullWidth?: boolean; + "aria-label"?: string; +}) { + return ( +

+ {options.map((opt) => { + const active = opt.value === value; + return ( + + ); + })} +

+ ); +} + +// ── Section header - always open, no accordion collapse ─────────────────────── + +function Section({ title, children }: { title: string; children: React.ReactNode }) { + return ( +

+ {/* Plain text label - no background, just spacing */} +

+ {title} +

+ {children} +

+ ); +} + +/** Lightweight divider that names a sub-group within a Section. */ +function SubHeader({ children }: { children: React.ReactNode }) { + return ( +

+ {children} +

+ ); +} + +// ── Reset button ───────────────────────────────────────────────────────────── + +function ResetButton() { + const { resetSettings } = useAppStore(); + const isDark = useAppStore((s) => s.settings.theme === "dark"); + const [confirmed, setConfirmed] = useState(false); + const [hovered, setHovered] = useState(false); + + const handleClick = () => { + if (!confirmed) { + setConfirmed(true); + setTimeout(() => setConfirmed(false), 3000); + } else { + resetSettings(); + setConfirmed(false); + } + }; + + return ( +

+ + {/* Support link */} + (e.currentTarget.style.opacity = "0.75")} + onMouseLeave={(e) => (e.currentTarget.style.opacity = "1")} + > + Buy me a metronome + + + + + {/* Logo mark — links to GitHub repo */} +

+ +

+ ); +} + +// ── Main component ──────────────────────────────────────────────────────────── + +export function SettingsPanel({ + open, + onClose, +}: { + open: boolean; + onClose: () => void; +}) { + const { settings, updateSettings } = useAppStore(); + + // Computes the inline style for range inputs. + // Sets --fill-pct so the CSS gradient draws the correct filled/unfilled split. + const rangeStyle = (value: number, min: number, max: number): React.CSSProperties => { + const pct = `${((value - min) / (max - min)) * 100}%`; + return { "--fill-pct": pct } as React.CSSProperties; + }; + + const handleColorThemeChange = (t: ColorTheme) => { + if (t === "custom") { + const seed: CustomColors = + settings.colorTheme !== "custom" + ? COLOR_PRESET_VALUES[settings.colorTheme] + : settings.customColors; + updateSettings({ colorTheme: "custom", customColors: seed }); + } else { + updateSettings({ colorTheme: t }); + } + }; + + return ( + <> + {/* Backdrop */} + {open && ( +

+ )} + + {/* Drawer */} +

+ {/* Header */} +

+ + Settings + + +

+ + {/* Scrollable content */} +

+ + {/* ── Appearance ─────────────────────────────────────────────────── */} +

+ + {/* Color theme - swatch grid */} +

+ + Color theme + +

+ {/* Preset swatches - 5 in a row */} +

+ {(["violet", "classic", "ocean", "forest", "cascade"] as const).map((theme) => { + const colors = COLOR_PRESET_VALUES[theme]; + const active = settings.colorTheme === theme; + return ( + + ); + })} +

+ + {/* Custom - separate row */} + + + {/* Custom color pickers - shown inline when custom is active */} + {settings.colorTheme === "custom" && ( +

+ {( + [ + { key: "leftHand" as keyof CustomColors, label: "Left hand" }, + { key: "rightHand" as keyof CustomColors, label: "Right hand" }, + { key: "unknown" as keyof CustomColors, label: "Other" }, + ] as { key: keyof CustomColors; label: string }[] + ).map(({ key, label }) => ( + + + updateSettings({ + customColors: { ...settings.customColors, [key]: e.target.value }, + }) + } + style={{ + width: 36, height: 28, + padding: 2, + border: "1px solid var(--color-border)", + borderRadius: 6, + background: "none", + cursor: "pointer", + }} + /> + + {label} + + + ))} +

+ )} + + {/* Differentiate hands - toggle + live L/R legend */} + {(() => { + const activeColors = settings.colorTheme === "custom" + ? settings.customColors + : COLOR_PRESET_VALUES[settings.colorTheme as Exclude]; + return ( +

+ + Differentiate hands + + + Works with two-track MIDI files + +

+ updateSettings({ showHandColors: !settings.showHandColors })} + /> +

+ {settings.showHandColors && ( +

+ {( + [ + { color: activeColors.leftHand, label: "Left hand" }, + { color: activeColors.rightHand, label: "Right hand" }, + ] as { color: string; label: string }[] + ).map(({ color, label }) => ( +

+ + {label} +

+ ))} +

+ )} +

+ ); + })()} +

+ + {/* ── Keyboard sub-group ──────────────────────────────────────── */} + Keyboard + + {/* Key color - custom picker with mini piano-key previews */} + +

+ {( + [ + { + value: "white" as const, + label: "White", + title: "Bright white piano keys", + topColor: "#c4c4bc", + midColor: "#f5f5f0", + btmColor: "#e4e4dc", + }, + { + value: "ivory" as const, + label: "Ivory", + title: "Warm cream-toned piano keys", + topColor: "#cdc8a8", + midColor: "#fff8e7", + btmColor: "#e8e0c8", + }, + ] as { value: "white" | "ivory"; label: string; title: string; topColor: string; midColor: string; btmColor: string }[] + ).map(({ value, label, title, topColor, midColor, btmColor }) => { + const active = settings.pianoTheme === value; + return ( + + ); + })} +

+ + + + updateSettings({ noteLabelMode: v })} + fullWidth + /> + + + + updateSettings({ useFlats: !settings.useFlats })} + /> + + + {/* ── Falling notes sub-group ─────────────────────────────────── */} + Falling notes + + + updateSettings({ fallingNotesLabelMode: v })} + fullWidth + /> + + + + updateSettings({ noteFilter: v })} + fullWidth + /> + + + + updateSettings({ showGrid: !settings.showGrid })} + /> + + + +

+ 4 + updateSettings({ minNoteHeight: Number(e.target.value) })} + aria-label="Minimum note height in pixels" + aria-valuetext={`${settings.minNoteHeight}px`} + className="flex-1" + style={rangeStyle(settings.minNoteHeight, 4, 24)} + /> + 24 + + {settings.minNoteHeight}px + +

+ + + +

+ 0 + updateSettings({ noteCornerRadius: Number(e.target.value) })} + aria-label="Note corner radius" + aria-valuetext={`${settings.noteCornerRadius}`} + className="flex-1" + style={rangeStyle(settings.noteCornerRadius, 0, 12)} + /> + 12 + + {settings.noteCornerRadius}px + +

+ + + + updateSettings({ showNoteOutline: !settings.showNoteOutline })} + /> + + + + updateSettings({ sheetMusicWhiteBackground: !settings.sheetMusicWhiteBackground })} + /> + + +

+ + {/* ── Overlays ───────────────────────────────────────────────────── */} +

+ + + updateSettings({ showMeasureNums: !settings.showMeasureNums })} + /> + + + + updateSettings({ showBeatLines: !settings.showBeatLines })} + /> + + + + updateSettings({ showSustainPedal: !settings.showSustainPedal })} + /> + + + + updateSettings({ showSustainedNotes: !settings.showSustainedNotes })} + /> + + + + updateSettings({ impactStyle: v as ImpactStyle })} + /> + + +

+ + {/* ── Playback ───────────────────────────────────────────────────── */} +

+ + +

+ 2s + updateSettings({ viewportSeconds: Number(e.target.value) })} + aria-label="Note window - seconds of music visible" + aria-valuetext={`${settings.viewportSeconds} seconds`} + className="flex-1" + style={rangeStyle(settings.viewportSeconds, 2, 10)} + /> + 10s + + {settings.viewportSeconds}s + +

+ + + +

+ -6♭ + updateSettings({ transposeSemitones: Number(e.target.value) })} + aria-label="Transpose in semitones" + aria-valuetext={formatTranspose(settings.transposeSemitones)} + className="flex-1" + style={rangeStyle(settings.transposeSemitones, -6, 6)} + /> + +6♯ + + {formatTranspose(settings.transposeSemitones)} + +

+ + + +

+ -200 + updateSettings({ renderOffset: Number(e.target.value) })} + aria-label="Audio offset in milliseconds" + aria-valuetext={`${settings.renderOffset}ms`} + className="flex-1" + style={rangeStyle(settings.renderOffset, -200, 200)} + /> + +200 + + {settings.renderOffset > 0 ? `+${settings.renderOffset}` : settings.renderOffset}ms + +

+ + + + updateSettings({ scrollToSeek: !settings.scrollToSeek })} + /> + + + + updateSettings({ instrument: v as InstrumentId })} + fullWidth + /> + + + Practice + + + updateSettings({ waitForHand: v as "left" | "right" | "both" })} + fullWidth + /> + + + +

+ {(["left", "right"] as const).map((hand) => ( +

+ + {hand === "left" ? "Left" : "Right"} + + updateSettings({ handVolume: { ...settings.handVolume, [hand]: Number(e.target.value) } })} + aria-label={`${hand === "left" ? "Left" : "Right"} hand volume`} + aria-valuetext={`${Math.round(settings.handVolume[hand] * 100)}%`} + className="flex-1" + style={rangeStyle(settings.handVolume[hand], 0, 1)} + /> + + {Math.round(settings.handVolume[hand] * 100)}% + +

+ ))} +

+ + + + updateSettings({ countInBars: v as 0 | 1 | 2 })} + fullWidth + /> + + + + + updateSettings({ + speedTrainer: { ...settings.speedTrainer, enabled: !settings.speedTrainer.enabled }, + }) + } + /> + + + {/* Speed trainer sub-rows: number inputs to sliders with % units */} + {settings.speedTrainer.enabled && ( + <> + +

+ 25% + + updateSettings({ + speedTrainer: { ...settings.speedTrainer, startPct: Number(e.target.value) }, + }) + } + aria-label="Speed trainer start percentage" + aria-valuetext={`${settings.speedTrainer.startPct}%`} + className="flex-1" + style={rangeStyle(settings.speedTrainer.startPct, 25, 100)} + /> + 100% + + {settings.speedTrainer.startPct}% + +

+ + + +

+ 50% + + updateSettings({ + speedTrainer: { ...settings.speedTrainer, endPct: Number(e.target.value) }, + }) + } + aria-label="Speed trainer end percentage" + aria-valuetext={`${settings.speedTrainer.endPct}%`} + className="flex-1" + style={rangeStyle(settings.speedTrainer.endPct, 50, 200)} + /> + 200% + + {settings.speedTrainer.endPct}% + +

+ + + +

+ 1% + + updateSettings({ + speedTrainer: { ...settings.speedTrainer, stepPct: Number(e.target.value) }, + }) + } + aria-label="Speed trainer step percentage" + aria-valuetext={`${settings.speedTrainer.stepPct}%`} + className="flex-1" + style={rangeStyle(settings.speedTrainer.stepPct, 1, 20)} + /> + 20% + + {settings.speedTrainer.stepPct}% + +

+ + + )} + +

+ + {/* ── Reset to defaults ─────────────────────────────────────────── */} + + +

+ + ); +} + +// ── Icons ───────────────────────────────────────────────────────────────────── + +const MetronomeIcon = () => ( + +); diff --git a/frontend/src/components/Transport/TransportControls.tsx b/frontend/src/components/Transport/TransportControls.tsx new file mode 100644 index 0000000..64ceebf --- /dev/null +++ b/frontend/src/components/Transport/TransportControls.tsx @@ -0,0 +1,532 @@ +import { useEffect, useRef, useState } from "react"; +import { useAppStore } from "../../store/useAppStore"; +import { syncEngine } from "../../engine/SyncEngine"; + +function formatTime(s: number): string { + const m = Math.floor(s / 60); + return `${m}:${Math.floor(s % 60).toString().padStart(2, "0")}`; +} + +export function TransportControls() { + const { + status, currentSeconds, tempoMultiplier, + loopStart, loopEnd, waitMode, + document: doc, + play, pause, stop, seek, + setTempoMultiplier, setLoopPoints, setWaitMode, setMetronome, + settings, loadMidiFile, loadMusicXmlFile, loadPdfFile, + isLoadingDocument, loadingMessage, + } = useAppStore(); + + const [speedOpen, setSpeedOpen] = useState(false); + const [speedRect, setSpeedRect] = useState<{ bottom: number; right: number } | null>(null); + const speedContainerRef = useRef(null); + + // When opening, capture fixed position so popover escapes the overflow:auto container + const toggleSpeed = () => { + if (!speedOpen && speedContainerRef.current) { + const r = speedContainerRef.current.getBoundingClientRect(); + setSpeedRect({ bottom: window.innerHeight - r.top + 8, right: window.innerWidth - r.right }); + } + setSpeedOpen((v) => !v); + }; + + // Close speed popover on outside click + useEffect(() => { + if (!speedOpen) return; + const handler = (e: MouseEvent) => { + if (!speedContainerRef.current?.contains(e.target as Node)) setSpeedOpen(false); + }; + document.addEventListener("mousedown", handler); + return () => document.removeEventListener("mousedown", handler); + }, [speedOpen]); + + const openFile = (file: File) => { + if (file.name.match(/\.midi?$/i)) loadMidiFile(file); + else if (file.name.match(/\.mxl?$/i)) loadMusicXmlFile(file); + else if (file.name.match(/\.pdf$/i)) loadPdfFile(file); + }; + + const total = doc?.totalDuration ?? 0; + const progress = total > 0 ? Math.min(1, currentSeconds / total) : 0; + const loopActive = loopStart !== null && loopEnd !== null; + const isPlaying = status === "playing"; + const isPaused = status === "paused"; + const isStopped = status === "stopped"; + + const handleProgressClick = (e: React.MouseEvent) => { + if (!total) return; + const rect = e.currentTarget.getBoundingClientRect(); + seek(Math.max(0, Math.min(1, (e.clientX - rect.left) / rect.width)) * total); + }; + + const toggleHand = (hand: "left" | "right") => { + const next = new Set(settings.activeHands); + if (next.has(hand)) { if (next.size > 1) next.delete(hand); } + else next.add(hand); + useAppStore.getState().setActiveHands(next); + }; + + const startLoop = () => { + const start = currentSeconds; + const end = Math.min(total, start + 30); + setLoopPoints(start, end > start ? end : total); + }; + const clearLoop = () => setLoopPoints(null, null); + const setLoopA = () => { if (loopEnd !== null) setLoopPoints(Math.min(currentSeconds, loopEnd - 1), loopEnd); }; + const setLoopB = () => { if (loopStart !== null) setLoopPoints(loopStart, Math.max(currentSeconds, loopStart + 1)); }; + + return ( +

+ {/* ── Progress bar ──────────────────────────────────────────────────── */} +

+ + {formatTime(currentSeconds)} + + + {/* Enlarged hit area (vertical padding) around the visual bar */} +

+ {/* Loop region */} + {loopActive && total > 0 && ( +

+ )} + {/* Playhead fill */} +

+ {/* Thumb - clamped so it never bleeds outside the track */} +

+ + + {formatTime(total)} + +

+ + {/* ── Controls row ──────────────────────────────────────────────────── */} +

+ + {/* ── Zone 1: File import - accent-styled to stand out ── */} + ((e.currentTarget as HTMLElement).style.background = "rgba(147,51,234,0.24)")} + onMouseLeave={(e) => ((e.currentTarget as HTMLElement).style.background = "rgba(147,51,234,0.14)")} + > + {isLoadingDocument ? : } + {isLoadingDocument && loadingMessage + ? {loadingMessage} + : Import + } + { const f = e.target.files?.[0]; if (f) openFile(f); e.target.value = ""; }} + /> + + + + + {/* ── Zone 2: Playback controls ───────────────────────── */} +

+ + + + syncEngine.skipBy(-10)} title="Skip back 10 seconds" aria-label="Skip back 10 seconds" disabled={!doc}> + + + play()} + title={isPlaying ? "Pause" : isPaused ? "Resume" : "Play"} + aria-label={isPlaying ? "Pause" : isPaused ? "Resume playback" : "Play"} + disabled={!doc} + > + {isPlaying ? : } + + syncEngine.skipBy(10)} title="Skip forward 10 seconds" aria-label="Skip forward 10 seconds" disabled={!doc}> + + +

+ + + + {/* ── Zone 4: Hands ───────────────────────────────────── */} +

+ {(["left", "right"] as const).map((h) => { + const active = settings.activeHands.has(h); + const isLeft = h === "left"; + return ( + + ); + })} +

+ + {/* Spacer */} +

+ + {/* ── Zone 5: Practice tools ──────────────────────────── */} +

+ + setWaitMode(!waitMode)} title="Pause until you play the correct note" aria-label="Wait mode" aria-pressed={waitMode}> + Wait + + + {/* ── A / Loop / B - single compound grouped control ── */} +

+ {/* A marker */} + + + {/* Loop toggle (middle) */} + + + {/* B marker */} + +

+ + setMetronome(!settings.metronomeEnabled)} + title="Metronome (auto-syncs to MIDI BPM)" + aria-label="Toggle metronome" + aria-pressed={settings.metronomeEnabled} + > + Metronome + + + {/* ── Speed chip with popover ─────────────────────────── */} +

+ + + {tempoMultiplier !== 1.0 ? `${Math.round(tempoMultiplier * 100)}%` : "Speed"} + + + {speedOpen && speedRect && ( +

+ Playback Speed + + {Math.round(tempoMultiplier * 100)}% + +

+ setTempoMultiplier(Number(e.target.value) / 100)} + aria-label="Playback speed" + style={{ width: "100%", accentColor: "var(--color-accent)" }} + /> +

+ 25% + 100% + 200% +

+ {tempoMultiplier !== 1.0 && ( + + )} +

+ )} +

+ +

+ + {/* Waiting status pill */} + {status === "waiting" && ( + + ● Waiting… + + )} + +

+ ); +} + +// ── Sub-components ──────────────────────────────────────────────────────────── + +function Btn({ onClick, title, "aria-label": ariaLabel, children, primary, disabled }: { + onClick: () => void; + title?: string; + "aria-label"?: string; + children: React.ReactNode; + primary?: boolean; + disabled?: boolean; +}) { + return ( + + ); +} + +function ChipBtn({ active, onClick, title, "aria-label": ariaLabel, "aria-pressed": ariaPressed, children, disabled }: { + active: boolean; + onClick: () => void; + title?: string; + "aria-label"?: string; + "aria-pressed"?: boolean; + children: React.ReactNode; + disabled?: boolean; +}) { + return ( + + ); +} + +function Divider() { + return

; +} + +// ── Icons ───────────────────────────────────────────────────────────────────── +const PlayIcon = () => ; +const PauseIcon = () => ; +const StopIcon = () => ; +const SkipBackIcon = () => ( + +); +const SkipFwdIcon = () => ( + +); +const UploadIcon = () => ; +const SpinnerIcon = () => ; + +const WaitIcon = () => ( + +); + +const LoopIcon = () => ( + +); + +const SpeedIcon = () => ( + +); + +const MetronomeIcon = () => ( + +); diff --git a/frontend/src/engine/AccuracyTracker.ts b/frontend/src/engine/AccuracyTracker.ts new file mode 100644 index 0000000..ae46741 --- /dev/null +++ b/frontend/src/engine/AccuracyTracker.ts @@ -0,0 +1,119 @@ +/** + * AccuracyTracker - real-time scoring of user input vs. expected notes. + * + * Strategy: + * - When a note:on fires, record it in a "window" of expected notes. + * - When the user plays (input:note:on), check if any expected note in the + * ±HIT_WINDOW_MS tolerance matches the MIDI number. If yes: correct hit. + * - When a note's off-time passes without a matching input: missed. + * - If the user plays a MIDI that doesn't match any expected note: wrong. + * + * Emits bus event "accuracy:update" with running totals after every event. + */ + +import bus from "./EventBus"; +import type { NoteEvent } from "@bach-to-basics/shared"; + +/** How many milliseconds before/after note start counts as a "hit" */ +const HIT_WINDOW_MS = 300; + +interface PendingNote { + note: NoteEvent; + startMs: number; // performance.now() when note:on fired + hit: boolean; +} + +class AccuracyTracker { + private enabled = false; + private pending: PendingNote[] = []; + + private correct = 0; + private wrong = 0; + private missed = 0; + + constructor() { + bus.on("note:on", (note) => this.onNoteOn(note as NoteEvent)); + bus.on("note:off", (note) => this.onNoteOff(note as NoteEvent)); + bus.on("input:note:on", ({ midi }) => this.onInput(midi)); + bus.on("transport:stateChange", ({ status }) => { + if (status === "stopped") this.reset(); + }); + bus.on("transport:seek", () => { + // Clear pending notes on seek - they're no longer relevant + this.pending = []; + }); + } + + enable(on: boolean) { + this.enabled = on; + if (!on) this.reset(); + } + + reset() { + this.pending = []; + this.correct = 0; + this.wrong = 0; + this.missed = 0; + this.emit(); + } + + get score(): number { + const total = this.correct + this.wrong + this.missed; + return total === 0 ? 0 : Math.round((this.correct / total) * 100); + } + + private onNoteOn(note: NoteEvent) { + if (!this.enabled) return; + this.pending.push({ note, startMs: performance.now(), hit: false }); + } + + private onNoteOff(note: NoteEvent) { + if (!this.enabled) return; + const idx = this.pending.findIndex((p) => p.note.id === note.id); + if (idx === -1) return; + const [pending] = this.pending.splice(idx, 1); + if (!pending.hit) { + this.missed++; + this.emit(); + } + } + + private onInput(midi: number) { + if (!this.enabled) return; + const now = performance.now(); + + // Find the closest pending note matching this MIDI within the hit window + let bestIdx = -1; + let bestDelta = Infinity; + for (let i = 0; i < this.pending.length; i++) { + const p = this.pending[i]; + if (p.hit) continue; + if (p.note.midi !== midi) continue; + const delta = Math.abs(now - p.startMs); + if (delta <= HIT_WINDOW_MS && delta < bestDelta) { + bestDelta = delta; + bestIdx = i; + } + } + + if (bestIdx >= 0) { + this.pending[bestIdx].hit = true; + this.correct++; + } else { + this.wrong++; + } + this.emit(); + } + + private emit() { + bus.emit("accuracy:update", { + correct: this.correct, + wrong: this.wrong, + missed: this.missed, + score: this.score, + }); + } +} + +export const accuracyTracker = new AccuracyTracker(); +export default accuracyTracker; diff --git a/frontend/src/engine/AudioEngine.ts b/frontend/src/engine/AudioEngine.ts new file mode 100644 index 0000000..a4befc6 --- /dev/null +++ b/frontend/src/engine/AudioEngine.ts @@ -0,0 +1,109 @@ +import { SplendidGrandPiano, Soundfont, ElectricPiano } from "smplr"; +import type { NoteEvent } from "@bach-to-basics/shared"; + +// ── Instrument catalogue ────────────────────────────────────────────────────── + +export type InstrumentId = + | "grand" // Splendid Grand Piano (SplendidGrandPiano) + | "bright" // Bright Acoustic Piano (Soundfont) + | "electric" // CP80 Electric Grand (ElectricPiano) + | "harpsichord" // Harpsichord (Soundfont) + | "honkytonk"; // Honky-Tonk Piano (Soundfont) + +export const INSTRUMENT_LABELS: Record = { + grand: "Grand", + bright: "Bright", + electric: "E-Piano", + harpsichord: "Harpsi", + honkytonk: "Honky", +}; + +// Minimal common interface shared by all smplr players +type Player = { + load: Promise; + start(opts: { note: number; velocity?: number; stopId?: number | string }): unknown; + stop(opts?: { stopId?: number | string }): void; +}; + +function createPlayer(id: InstrumentId, ctx: AudioContext): Player { + switch (id) { + case "grand": + return new SplendidGrandPiano(ctx) as unknown as Player; + case "bright": + return new Soundfont(ctx, { instrument: "bright_acoustic_piano" }) as unknown as Player; + case "electric": + return new ElectricPiano(ctx, { instrument: "CP80" }) as unknown as Player; + case "harpsichord": + return new Soundfont(ctx, { instrument: "harpsichord" }) as unknown as Player; + case "honkytonk": + return new Soundfont(ctx, { instrument: "honkytonk_piano" }) as unknown as Player; + } +} + +// ── AudioEngine ─────────────────────────────────────────────────────────────── + +export class AudioEngine { + private ctx: AudioContext | null = null; + private player: Player | null = null; + private _currentId: InstrumentId = "grand"; + private _loaded = false; + // Dedup: all callers await the same promise so we never create two AudioContexts + private _loadPromise: Promise | null = null; + + async load() { + if (this._loaded) return; + if (this._loadPromise) return this._loadPromise; + this._loadPromise = (async () => { + if (!this.ctx) this.ctx = new AudioContext(); + this.player = createPlayer(this._currentId, this.ctx); + await this.player.load; + this._loaded = true; + })(); + return this._loadPromise; + } + + /** + * Switch to a different instrument. If the AudioContext already exists the + * new instrument is pre-loaded immediately so the next note plays without delay. + */ + async setInstrument(id: InstrumentId): Promise { + if (id === this._currentId && this._loaded) return; + this._currentId = id; + this._loaded = false; + this._loadPromise = null; + // Silence any ongoing audio before swapping the player + try { this.player?.stop?.(); } catch { /* ignore */ } + this.player = null; + // Pre-load the new instrument if an AudioContext already exists + if (this.ctx) await this.load(); + } + + get loaded() { + return this._loaded; + } + + playNote(note: NoteEvent) { + if (!this.player || !this._loaded) return; + // Resume in case the AudioContext was created before a user gesture (browser + // autoplay policy starts it suspended). Fire-and-forget, resolves quickly. + this.ctx?.resume(); + this.player.start({ note: note.midi, velocity: note.velocity, stopId: note.midi }); + } + + /** Play a single MIDI note by number - for virtual keyboard clicks. */ + playMidi(midi: number, velocity = 90) { + if (!this.player || !this._loaded) return; + // Resume in case the AudioContext was created before a user gesture. + this.ctx?.resume(); + this.player.start({ note: midi, velocity, stopId: midi }); + } + + stopNote(midi: number) { + if (!this.player || !this._loaded) return; + this.player.stop({ stopId: midi }); + } + + stopAll() { + try { this.player?.stop?.(); } catch { /* ignore */ } + } +} diff --git a/frontend/src/engine/EventBus.ts b/frontend/src/engine/EventBus.ts new file mode 100644 index 0000000..8643621 --- /dev/null +++ b/frontend/src/engine/EventBus.ts @@ -0,0 +1,11 @@ +import mitt, { type Emitter } from "mitt"; +import type { SyncEventMap } from "@bach-to-basics/shared"; + +// mitt's generic constraint requires Record. +// We cast our typed map through a compatible intermediate type. +type BusEvents = SyncEventMap & Record; + +const bus = mitt(); + +export type EventBus = Emitter; +export default bus; diff --git a/frontend/src/engine/MidiClock.ts b/frontend/src/engine/MidiClock.ts new file mode 100644 index 0000000..ac02a03 --- /dev/null +++ b/frontend/src/engine/MidiClock.ts @@ -0,0 +1,79 @@ +import * as Tone from "tone"; + +export type TickCallback = (docSeconds: number) => void; + +/** + * MidiClock tracks position in "doc-time" (the song's native seconds, same + * unit as NoteEvent.startSeconds). Playing at tempoMultiplier 0.5 means the + * song advances at half speed relative to real time: + * + * docSeconds = _startOffset + Transport.seconds * tempoMultiplier + * + * This keeps progress-bar / seek values always in doc-time (0..totalDuration). + * Audio scheduling converts doc-time differences to real-time via / multiplier. + */ +export class MidiClock { + private onTickCb: TickCallback | null = null; + private _tempoMultiplier = 1.0; + private _startOffset = 0; // doc-seconds we started / seeked from + + get tempoMultiplier() { return this._tempoMultiplier; } + + set tempoMultiplier(v: number) { + const current = this.currentSeconds; // preserve position + this._tempoMultiplier = Math.max(0.25, Math.min(2.0, v)); + // Recompute offset so currentSeconds stays the same after the change + this._startOffset = current - Tone.getTransport().seconds * this._tempoMultiplier; + } + + onTick(cb: TickCallback) { this.onTickCb = cb; } + + async start(offsetDocSeconds = 0) { + await Tone.start(); + this._startOffset = offsetDocSeconds; + Tone.getTransport().cancel(); + Tone.getTransport().seconds = 0; + // BPM at 120, 16n fires every 0.125 real seconds. Fine for tight ticks. + Tone.getTransport().bpm.value = 120; + + Tone.getTransport().scheduleRepeat(() => { + this.onTickCb?.(this.currentSeconds); + }, "16n"); + + Tone.getTransport().start(); + } + + pause() { Tone.getTransport().pause(); } + resume() { Tone.getTransport().start(); } + + stop() { + Tone.getTransport().stop(); + Tone.getTransport().cancel(); + } + + /** + * Called after an external Tone.getTransport().cancel() to rebuild the + * scheduleRepeat that drives onTick(). Must be called before resume(). + */ + reschedule(docSeconds: number) { + this._startOffset = docSeconds; + Tone.getTransport().seconds = 0; + Tone.getTransport().scheduleRepeat(() => { + this.onTickCb?.(this.currentSeconds); + }, "16n"); + } + + seek(docSeconds: number) { + this._startOffset = docSeconds; + Tone.getTransport().seconds = 0; + } + + get currentSeconds(): number { + // Real Transport.seconds * tempo = how far we've advanced through the song + return this._startOffset + Tone.getTransport().seconds * this._tempoMultiplier; + } + + get state(): "started" | "stopped" | "paused" { + return Tone.getTransport().state as "started" | "stopped" | "paused"; + } +} diff --git a/frontend/src/engine/SyncEngine.ts b/frontend/src/engine/SyncEngine.ts new file mode 100644 index 0000000..8db7aba --- /dev/null +++ b/frontend/src/engine/SyncEngine.ts @@ -0,0 +1,545 @@ +import * as Tone from "tone"; +import bus from "./EventBus"; +import { MidiClock } from "./MidiClock"; +import { AudioEngine } from "./AudioEngine"; +import type { InstrumentId } from "./AudioEngine"; +import type { MusicDocument, NoteEvent, PlaybackStatus } from "@bach-to-basics/shared"; + +interface YTPlayer { + getCurrentTime(): number; + seekTo(seconds: number, allowSeekAhead: boolean): void; +} + +interface SpeedTrainerOpts { + enabled: boolean; + startPct: number; + endPct: number; + stepPct: number; + currentPct: number; +} + +// How many doc-seconds ahead to emit "note:upcoming" for FallingNotes pre-rendering. +const LOOKAHEAD_DOC_SECONDS = 5.0; +const YT_DRIFT_THRESHOLD = 0.25; + +export interface SyncEngineState { + status: PlaybackStatus; + currentSeconds: number; + tempoMultiplier: number; + loopStart: number | null; + loopEnd: number | null; + waitMode: boolean; + activeHands: Set<"left" | "right">; + metronomeEnabled: boolean; + handVolume: { left: number; right: number }; + /** Which hand(s) trigger wait-mode pauses. Only relevant when waitMode is on. */ + waitForHand: "left" | "right" | "both"; +} + +class SyncEngine { + private clock = new MidiClock(); + readonly audio = new AudioEngine(); + + private doc: MusicDocument | null = null; + private noteIndex = 0; + private activeNotes = new Set(); + + private _state: SyncEngineState = { + status: "stopped", + currentSeconds: 0, + tempoMultiplier: 1.0, + loopStart: null, + loopEnd: null, + waitMode: false, + activeHands: new Set(["left", "right"]), + metronomeEnabled: false, + handVolume: { left: 1, right: 1 }, + waitForHand: "both", + }; + + private ytPlayer: YTPlayer | null = null; + private animFrameId: number | null = null; + private stateListeners = new Set<(s: SyncEngineState) => void>(); + + // Metronome + private metronome: Tone.Synth | null = null; + private lastBeatCrossed = -1; + + // ── Virtual keyboard pending-play tracking ────────────────────────────────── + // Tracks MIDI notes that are awaiting audio-load before playing. + // If the user releases a key before the load completes, the entry is removed + // so the note never fires - preventing stuck/echoing notes. + private pendingMidiPlays = new Set(); + + // ── Practice features ─────────────────────────────────────────────────────── + private renderOffsetMs = 0; + private transposeSemitones = 0; + private countInBars: 0 | 1 | 2 = 0; + private countInTimeouts: ReturnType[] = []; + private speedTrainer: SpeedTrainerOpts = { + enabled: false, startPct: 60, endPct: 100, stepPct: 5, currentPct: 60, + }; + + constructor() { + this.clock.onTick(this.onTick.bind(this)); + } + + // ── Public API ────────────────────────────────────────────────────────────── + + async loadDocument(doc: MusicDocument) { + this.stop(); + this.doc = doc; + this.noteIndex = 0; + this.activeNotes.clear(); + this._state.currentSeconds = 0; + bus.emit("document:loaded", { id: doc.id, title: doc.title, totalDuration: doc.totalDuration }); + this.emitState("stopped"); + } + + async play(fromSeconds?: number) { + if (!this.doc) return; + await this.audio.load(); + + const startFrom = fromSeconds ?? this._state.currentSeconds; + + // Speed trainer: reset currentPct when starting from the very beginning + if (this.speedTrainer.enabled && startFrom === 0) { + this.speedTrainer.currentPct = this.speedTrainer.startPct; + this._state.tempoMultiplier = this.speedTrainer.startPct / 100; + this.clock.tempoMultiplier = this._state.tempoMultiplier; + bus.emit("speedTrainer:stepped", { currentPct: this.speedTrainer.startPct }); + } + + if (this.countInBars > 0) { + await this._playWithCountIn(startFrom); + } else { + this.seekTo(startFrom); + await this.clock.start(startFrom); + this.startAnimLoop(); + this.emitState("playing"); + } + } + + private async _playWithCountIn(startFrom: number) { + const bpm = this.doc!.tempoMap[0]?.bpm ?? 120; + const timeSig = this.doc!.timeSignatures[0] ?? { numerator: 4, denominator: 4 }; + const beatsPerBar = timeSig.numerator; + // Beat duration respects current tempo multiplier so count-in matches playback speed + const beatDurMs = (60 / bpm) / this._state.tempoMultiplier * 1000; + const totalBeats = this.countInBars * beatsPerBar; + + // Ensure metronome synth exists + if (!this.metronome) { + this.metronome = new Tone.Synth({ + oscillator: { type: "triangle" }, + envelope: { attack: 0.001, decay: 0.08, sustain: 0, release: 0.02 }, + volume: -8, + }).toDestination(); + } + + this.emitState("playing"); // Show as playing during count-in + + // Schedule one click per beat + for (let b = 0; b < totalBeats; b++) { + const isAccent = b % beatsPerBar === 0; + const id = setTimeout(() => { + try { this.metronome!.triggerAttackRelease(isAccent ? "C6" : "G5", "32n"); } + catch { /* AudioContext not ready */ } + }, b * beatDurMs); + this.countInTimeouts.push(id); + } + + // After count-in, start actual playback + const startId = setTimeout(async () => { + this.countInTimeouts = []; + this.seekTo(startFrom); + await this.clock.start(startFrom); + this.startAnimLoop(); + // status stays "playing" + }, totalBeats * beatDurMs); + this.countInTimeouts.push(startId); + } + + private _cancelCountIn() { + for (const id of this.countInTimeouts) clearTimeout(id); + this.countInTimeouts = []; + } + + pause() { + this._cancelCountIn(); + this.clock.pause(); + this.stopAnimLoop(); + this.emitState("paused"); + } + + stop() { + this._cancelCountIn(); + this.clock.stop(); + this.audio.stopAll(); + this.stopAnimLoop(); + this.noteIndex = 0; + this.activeNotes.clear(); + this._state.currentSeconds = 0; + this.lastBeatCrossed = -1; + this.emitState("stopped"); + bus.emit("transport:tick", { seconds: 0, tick: 0 }); + } + + seek(seconds: number) { + const wasPlaying = this._state.status === "playing" || this._state.status === "waiting"; + if (wasPlaying) this.clock.pause(); + + // Tell the UI to release all visually-pressed keys before we cancel Tone events. + // Without this, any note whose note:on fired but note:off was still scheduled + // (and then cancelled below) leaves the key stuck in a pressed state. + bus.emit("transport:seek", { seconds }); + + // Cancel pending Tone events so notes don't fire from the old position + Tone.getTransport().cancel(); + + this.seekTo(seconds); + this.audio.stopAll(); + bus.emit("transport:tick", { seconds, tick: 0 }); + + if (wasPlaying) { + // cancel() above killed the scheduleRepeat - rebuild it before resuming + this.clock.reschedule(seconds); + this.clock.resume(); + this._state.status = "playing"; + } + this.emitState(this._state.status); + } + + skipBy(delta: number) { + const total = this.doc?.totalDuration ?? 0; + const next = Math.max(0, Math.min(total, this._state.currentSeconds + delta)); + this.seek(next); + } + + setTempoMultiplier(v: number) { + const clamped = Math.max(0.25, Math.min(2.0, v)); + this._state.tempoMultiplier = clamped; + // Update clock rate - its setter recalculates _startOffset so currentSeconds + // stays the same despite the new multiplier. + this.clock.tempoMultiplier = clamped; + + // If playing, all Tone.js note:on/note:off callbacks were scheduled at the + // OLD tempo rate and will now fire at the wrong wall-clock time. + // Solution: same as seek() - cancel pending Tone events, reset the note + // cursor, and reschedule everything at the new rate from the current position. + const isActive = this._state.status === "playing" || this._state.status === "waiting"; + if (isActive) { + const currentSec = this._state.currentSeconds; + this.clock.pause(); + bus.emit("transport:seek", { seconds: currentSec }); // release pressed keys + Tone.getTransport().cancel(); + this.audio.stopAll(); + this.seekTo(currentSec); // resets noteIndex + activeNotes + this.clock.reschedule(currentSec); + this.clock.resume(); + this._state.status = "playing"; + } + + this.emitState(this._state.status); + } + + setLoopPoints(start: number | null, end: number | null) { + this._state.loopStart = start; + this._state.loopEnd = end; + this.emitState(this._state.status); + } + + setWaitMode(on: boolean) { + this._state.waitMode = on; + this.emitState(this._state.status); + } + + setMetronome(on: boolean) { + this._state.metronomeEnabled = on; + if (on && !this.metronome) { + // Lazy-create the synth so AudioContext is already started + this.metronome = new Tone.Synth({ + oscillator: { type: "triangle" }, + envelope: { attack: 0.001, decay: 0.08, sustain: 0, release: 0.02 }, + volume: -8, + }).toDestination(); + } + if (!on) this.lastBeatCrossed = -1; + this.emitState(this._state.status); + } + + setActiveHands(hands: Set<"left" | "right">) { + this._state.activeHands = hands; + this.emitState(this._state.status); + } + + setHandVolume(vol: { left: number; right: number }) { + this._state.handVolume = { left: Math.max(0, Math.min(1, vol.left)), right: Math.max(0, Math.min(1, vol.right)) }; + } + + setWaitForHand(hand: "left" | "right" | "both") { + this._state.waitForHand = hand; + } + + async setInstrument(id: InstrumentId): Promise { + await this.audio.setInstrument(id); + } + + setYouTubePlayer(player: YTPlayer | null) { this.ytPlayer = player; } + + // ── Practice feature setters ──────────────────────────────────────────────── + + setTranspose(semitones: number) { + this.transposeSemitones = Math.round(Math.max(-12, Math.min(12, semitones))); + } + + setCountInBars(n: 0 | 1 | 2) { + this.countInBars = n; + } + + setSpeedTrainer(opts: SpeedTrainerOpts) { + this.speedTrainer = { ...opts }; + } + + setRenderOffset(ms: number) { + this.renderOffsetMs = Math.max(-200, Math.min(200, ms)); + } + + // ── MIDI input ────────────────────────────────────────────────────────────── + + /** Called by WebMidi.js, virtual keyboard click, etc. */ + onMidiInput(midi: number, velocity: number) { + bus.emit("input:note:on", { midi, velocity }); + + if (this._state.status === "waiting") { + const expected = this.waitingNote(); + if (expected && midi === expected.midi) { + this._state.status = "playing"; + this.clock.resume(); + this.emitState("playing"); + } + } + } + + /** Play a note through the audio engine immediately (for virtual keyboard clicks). */ + async playMidi(midi: number, velocity = 90) { + // Emit input:note:on synchronously so the key lights up with no delay. + this.onMidiInput(midi, velocity); + // Register this MIDI as pending. If stopMidi() fires before audio loads + // (user tapped quickly), the entry is removed and we skip the play call - + // preventing the "echo" where a note sustains after the key was released. + this.pendingMidiPlays.add(midi); + await this.audio.load(); + if (this.pendingMidiPlays.has(midi)) { + this.pendingMidiPlays.delete(midi); + this.audio.playMidi(midi, velocity); + } + } + + stopMidi(midi: number) { + this.pendingMidiPlays.delete(midi); // cancel play if still loading + this.audio.stopNote(midi); + this.onMidiInputOff(midi); + } + + onMidiInputOff(midi: number) { + bus.emit("input:note:off", { midi }); + } + + onStateChange(cb: (s: SyncEngineState) => void) { + this.stateListeners.add(cb); + return () => this.stateListeners.delete(cb); + } + + get state(): Readonly { return this._state; } + + // ── Private ───────────────────────────────────────────────────────────────── + + /** + * seekTo positions the note-cursor for doc-time `seconds`. + * All note.startSeconds are in doc-time (same unit as currentSeconds). + */ + private seekTo(seconds: number) { + if (!this.doc) return; + this._state.currentSeconds = seconds; + this.noteIndex = this.doc.notes.findIndex((n) => n.startSeconds >= seconds); + if (this.noteIndex === -1) this.noteIndex = this.doc.notes.length; + this.activeNotes.clear(); + // Reset metronome so the first beat at new position doesn't double-fire + const bpm = this.doc.tempoMap[0]?.bpm ?? 120; + this.lastBeatCrossed = Math.floor(seconds / (60 / bpm)); + } + + private waitingNote(): NoteEvent | null { + if (!this.doc || this.noteIndex >= this.doc.notes.length) return null; + const note = this.doc.notes[this.noteIndex]; + const { activeHands, waitForHand } = this._state; + if (note.hand !== "unknown" && !activeHands.has(note.hand as "left" | "right")) return null; + // When waitForHand restricts to one hand, ignore notes from the other hand + if (waitForHand !== "both" && note.hand !== "unknown" && note.hand !== waitForHand) return null; + return note; + } + + /** + * Applies transposition to a note, clamping to the 88-key range (A0-C8). + * Returns the original note object unchanged if transposeSemitones is 0. + */ + private transposeNote(note: NoteEvent): NoteEvent { + if (this.transposeSemitones === 0) return note; + const tMidi = Math.max(21, Math.min(108, note.midi + this.transposeSemitones)); + return { ...note, midi: tMidi }; + } + + /** + * Called by MidiClock every ~125ms. + * `docSeconds` is in doc-time (same unit as note.startSeconds). + * + * To schedule Tone.js events in real-time: + * realDelay = docTimeDiff / tempoMultiplier + */ + private onTick(docSeconds: number) { + if (!this.doc) return; + this._state.currentSeconds = docSeconds; + + // ── Metronome ───────────────────────────────────────────────────────────── + if (this._state.metronomeEnabled && this.doc && this.metronome) { + const bpm = this.doc.tempoMap[0]?.bpm ?? 120; + const beat = Math.floor(docSeconds / (60 / bpm)); + if (beat !== this.lastBeatCrossed) { + this.lastBeatCrossed = beat; + try { this.metronome.triggerAttackRelease("C6", "64n"); } catch { /* ignore */ } + } + } + + // ── Loop ────────────────────────────────────────────────────────────────── + const { loopStart, loopEnd, tempoMultiplier } = this._state; + if (loopStart !== null && loopEnd !== null && docSeconds >= loopEnd) { + // Speed trainer: bump tempo on each loop wrap (only while below target) + if (this.speedTrainer.enabled) { + const st = this.speedTrainer; + if (st.currentPct < st.endPct) { + const nextPct = Math.min(st.endPct, st.currentPct + st.stepPct); + st.currentPct = nextPct; + // setTempoMultiplier calls emitState internally + this.setTempoMultiplier(nextPct / 100); + bus.emit("speedTrainer:stepped", { currentPct: nextPct }); + } + } + this.seek(loopStart); + return; + } + + // ── End of song auto-stop ───────────────────────────────────────────────── + // When no loop is active and playback reaches the end, stop and reset to 0. + if ((loopStart === null || loopEnd === null) && docSeconds >= this.doc.totalDuration - 0.05) { + this.stop(); + return; + } + + // ── Schedule upcoming notes ─────────────────────────────────────────────── + const notes = this.doc.notes; + while (this.noteIndex < notes.length) { + const note = notes[this.noteIndex]; + + // note.startSeconds is in doc-time; compare directly to docSeconds + if (note.startSeconds > docSeconds + LOOKAHEAD_DOC_SECONDS) break; + if (this.activeNotes.has(note.id)) { this.noteIndex++; continue; } + + // Apply transposition (creates a new NoteEvent if needed, preserves original id) + const tNote = this.transposeNote(note); + + bus.emit("note:upcoming", tNote); + this.activeNotes.add(note.id); + + // Convert doc-time offset to real-time for Tone.js scheduling. + // renderOffsetMs > 0 means audio plays earlier (compensates for delayed output). + const offsetSec = this.renderOffsetMs / 1000; + const onDelay = Math.max(0, (note.startSeconds - docSeconds) / tempoMultiplier - offsetSec); + const offDelay = Math.max(0, (note.endSeconds - docSeconds) / tempoMultiplier - offsetSec); + + Tone.getTransport().scheduleOnce(() => { + // Read activeHands at fire-time so hand toggles take effect immediately + // (not at schedule-time, which would lag up to LOOKAHEAD_DOC_SECONDS). + const isActive = note.hand === "unknown" || this._state.activeHands.has(note.hand as "left" | "right"); + if (isActive) { + bus.emit("note:on", tNote); + // Apply per-hand volume multiplier (also read at fire-time for instant effect) + const handVol = note.hand === "left" ? this._state.handVolume.left + : note.hand === "right" ? this._state.handVolume.right + : 1; + const scaledNote = handVol === 1 ? tNote + : { ...tNote, velocity: Math.max(1, Math.round(tNote.velocity * handVol)) }; + this.audio.playNote(scaledNote); + } + }, `+${onDelay}`); + + Tone.getTransport().scheduleOnce(() => { + bus.emit("note:off", tNote); + this.audio.stopNote(tNote.midi); + }, `+${offDelay}`); + + // Wait mode + if (this._state.waitMode && this._state.status === "playing") { + const isActive = note.hand === "unknown" || this._state.activeHands.has(note.hand as "left" | "right"); + // Only pause for the targeted hand (waitForHand); "both" = current behavior + const isWaited = this._state.waitForHand === "both" + || note.hand === "unknown" + || note.hand === this._state.waitForHand; + if (isActive && isWaited && onDelay <= 0.05) { + this.clock.pause(); + this._state.status = "waiting"; + this.emitState("waiting"); + } + } + + this.noteIndex++; + } + + // ── YouTube sync ────────────────────────────────────────────────────────── + if (this.ytPlayer && this.doc.youtubeId) { + const expectedYtTime = docSeconds + this.doc.youtubeSyncOffset; + try { + const actual = this.ytPlayer.getCurrentTime(); + if (Math.abs(actual - expectedYtTime) > YT_DRIFT_THRESHOLD) { + this.ytPlayer.seekTo(expectedYtTime, true); + } + } catch { /* not ready yet */ } + } + } + + // rAF loop: emits transport:tick at 60fps for smooth visuals. + // State listeners throttled to ~10fps to avoid React re-renders. + private startAnimLoop() { + let lastStateMs = 0; + const loop = () => { + const seconds = this.clock.currentSeconds; + this._state.currentSeconds = seconds; + bus.emit("transport:tick", { seconds, tick: 0 }); + + const now = performance.now(); + if (now - lastStateMs >= 100) { + lastStateMs = now; + for (const cb of this.stateListeners) cb({ ...this._state }); + } + + this.animFrameId = requestAnimationFrame(loop); + }; + this.animFrameId = requestAnimationFrame(loop); + } + + private stopAnimLoop() { + if (this.animFrameId !== null) { + cancelAnimationFrame(this.animFrameId); + this.animFrameId = null; + } + } + + private emitState(status: PlaybackStatus) { + this._state.status = status; + bus.emit("transport:stateChange", { status, seconds: this._state.currentSeconds }); + for (const cb of this.stateListeners) cb({ ...this._state }); + } +} + +export const syncEngine = new SyncEngine(); +export default syncEngine; diff --git a/frontend/src/hooks/useAccuracy.ts b/frontend/src/hooks/useAccuracy.ts new file mode 100644 index 0000000..54270bb --- /dev/null +++ b/frontend/src/hooks/useAccuracy.ts @@ -0,0 +1,37 @@ +import { useEffect, useState } from "react"; +import bus from "../engine/EventBus"; +import { accuracyTracker } from "../engine/AccuracyTracker"; + +export interface AccuracyState { + correct: number; + wrong: number; + missed: number; + score: number; // 0-100 +} + +const INITIAL: AccuracyState = { correct: 0, wrong: 0, missed: 0, score: 0 }; + +/** + * Returns live accuracy data from AccuracyTracker. + * Automatically enables the tracker while the component is mounted. + */ +export function useAccuracy(enabled: boolean): AccuracyState { + const [state, setState] = useState(INITIAL); + + useEffect(() => { + accuracyTracker.enable(enabled); + if (!enabled) { + setState(INITIAL); + return; + } + + const handler = (data: AccuracyState) => setState({ ...data }); + bus.on("accuracy:update", handler as never); + return () => { + bus.off("accuracy:update", handler as never); + accuracyTracker.enable(false); + }; + }, [enabled]); + + return state; +} diff --git a/frontend/src/index.css b/frontend/src/index.css new file mode 100644 index 0000000..6d75c35 --- /dev/null +++ b/frontend/src/index.css @@ -0,0 +1,277 @@ +@import "tailwindcss"; + +/* ── Design tokens ─────────────────────────────────────────────────────────── */ +:root { + /* Surfaces - full indigo palette */ + --color-bg: #1a1a2e; + --color-surface: #1e1e38; + --color-surface-2: #232348; + --color-surface-3: #282858; + --color-border: #2d2d55; + --color-border-subtle: #232348; + + /* Accent */ + --color-accent: #9333ea; + --color-accent-hover: #a855f7; + --color-accent-subtle: rgba(147, 51, 234, 0.18); + --color-accent-subtle-border: rgba(147, 51, 234, 0.35); + --color-accent-text: #c084fc; + + /* Toggle switch inactive track */ + --color-toggle-off: #4a4f88; + + /* Text - muted bumped to #9ca3af for WCAG AA compliance on dark surfaces */ + --color-text: #e2e8f0; + --color-text-muted: #9ca3af; + --color-text-dim: #3d4070; + + /* Notes canvas - slightly deeper than bg so the practice area reads as distinct */ + --color-notes-bg: #141428; + --color-notes-border: #1f1f44; + + /* Hands */ + --color-warning: #f59e0b; + --color-warning-subtle: rgba(245, 158, 11, 0.08); + --color-warning-border: rgba(245, 158, 11, 0.22); + + --color-left-hand: #9333ea; + --color-left-hand-subtle: rgba(147, 51, 234, 0.18); + --color-left-hand-subtle-border: rgba(147, 51, 234, 0.38); + --color-left-hand-text: #c084fc; + --color-right-hand: #22d3ee; + --color-right-hand-subtle: rgba(34, 211, 238, 0.14); + --color-right-hand-subtle-border: rgba(34, 211, 238, 0.32); + --color-right-hand-text: #22d3ee; +} + +[data-theme="light"] { + /* Surfaces */ + --color-bg: #ffffff; + --color-surface: #ffffff; + --color-surface-2: #f5f7fb; + --color-surface-3: #eaecf4; + --color-border: #dde1ea; + --color-border-subtle: #eaecf4; + + /* Accent */ + --color-accent: #6366f1; + --color-accent-hover: #4f46e5; + --color-accent-subtle: rgba(99, 102, 241, 0.12); + --color-accent-subtle-border: rgba(99, 102, 241, 0.30); + --color-accent-text: #4f46e5; + + /* Toggle switch inactive track */ + --color-toggle-off: #c1c9d6; + + /* Text */ + --color-text: #0f172a; + --color-text-muted: #64748b; + --color-text-dim: #94a3b8; + + /* Hands */ + --color-warning: #d97706; + --color-warning-subtle: rgba(217, 119, 6, 0.08); + --color-warning-border: rgba(217, 119, 6, 0.22); + + --color-left-hand: #3b82f6; + --color-left-hand-subtle: rgba(59, 130, 246, 0.12); + --color-left-hand-subtle-border: rgba(59, 130, 246, 0.30); + --color-left-hand-text: #1d4ed8; + --color-right-hand: #ef4444; + --color-right-hand-subtle: rgba(239, 68, 68, 0.10); + --color-right-hand-subtle-border: rgba(239, 68, 68, 0.28); + --color-right-hand-text: #dc2626; + + /* Notes canvas - cooler, slightly darker than chrome to create a + "stage vs UI" separation that mirrors what dark mode does with + #141428 content vs #1E1E38 chrome. #EEF1FA has the same blue-indigo + undertone as the dark palette and reads as white at a glance while + still being visibly distinct from the #FFFFFF header/transport. */ + --color-notes-bg: #EEF1FA; + --color-notes-border: #D4D9EE; +} + +/* ── Reset ─────────────────────────────────────────────────────────────────── */ +*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } + +html, body, #root { + height: 100%; + background: var(--color-bg); + color: var(--color-text); + font-family: "Space Grotesk", system-ui, -apple-system, sans-serif; + -webkit-font-smoothing: antialiased; + overflow: hidden; +} + +/* ── Typography scale ──────────────────────────────────────────────────────── */ +.text-label { + font-size: 11px; + font-weight: 500; + letter-spacing: 0.04em; + color: var(--color-text-muted); +} + +/* ── Inputs & selects ──────────────────────────────────────────────────────── */ +select, input[type="range"] { font-family: inherit; } + +select { + appearance: none; + background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='7'%3E%3Cpath d='M0 0l6 7 6-7z' fill='%2364748b'/%3E%3C/svg%3E"); + background-repeat: no-repeat; + background-position: right 10px center; + padding-right: 28px !important; +} + +[data-theme="dark"] select { + background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='7'%3E%3Cpath d='M0 0l6 7 6-7z' fill='%239ca3af'/%3E%3C/svg%3E"); +} + +/* ── Settings panel rows ───────────────────────────────────────────────────── */ +.settings-row:hover { background: var(--color-surface-2); } + +/* ── Scrollbar ─────────────────────────────────────────────────────────────── */ +::-webkit-scrollbar { width: 5px; height: 5px; } +::-webkit-scrollbar-track { background: transparent; } +::-webkit-scrollbar-thumb { background: var(--color-surface-3); border-radius: 99px; } +::-webkit-scrollbar-thumb:hover { background: var(--color-border); } + +/* ── Range slider - fully custom ───────────────────────────────────────────── */ +/* Remove native appearance so our pseudo-element CSS actually takes effect. + Each slider sets --fill-pct via inline style (computed from value/min/max) + so the gradient draws the correct filled/unfilled split. */ +input[type="range"] { + -webkit-appearance: none; + appearance: none; + background: transparent; + cursor: pointer; + outline: none; +} + +/* Thumb - WebKit/Blink */ +input[type="range"]::-webkit-slider-thumb { + -webkit-appearance: none; + width: 14px; + height: 14px; + border-radius: 50%; + background: var(--color-accent); + cursor: pointer; + margin-top: -5.5px; /* center on 3px track: -(14-3)/2 */ + box-shadow: 0 1px 4px rgba(0,0,0,0.35); + transition: background 0.12s, box-shadow 0.12s; +} +input[type="range"]:hover::-webkit-slider-thumb { + background: var(--color-accent-hover); + box-shadow: 0 0 0 4px var(--color-accent-subtle); +} + +/* Track - WebKit/Blink (uses --fill-pct for filled/unfilled split) */ +input[type="range"]::-webkit-slider-runnable-track { + height: 3px; + border-radius: 99px; + background: linear-gradient( + to right, + var(--color-accent) var(--fill-pct, 0%), + var(--color-border) var(--fill-pct, 0%) + ); +} + +/* Thumb - Firefox */ +input[type="range"]::-moz-range-thumb { + width: 14px; + height: 14px; + border-radius: 50%; + background: var(--color-accent); + border: none; + cursor: pointer; + box-shadow: 0 1px 4px rgba(0,0,0,0.35); +} +input[type="range"]:hover::-moz-range-thumb { + background: var(--color-accent-hover); + box-shadow: 0 0 0 4px var(--color-accent-subtle); +} + +/* Track - Firefox */ +input[type="range"]::-moz-range-track { + height: 3px; + border-radius: 99px; + background: var(--color-border); +} +input[type="range"]::-moz-range-progress { + height: 3px; + border-radius: 99px; + background: var(--color-accent); +} + +/* ── Transport buttons ─────────────────────────────────────────────────────── */ +/* Shared base for all icon/action buttons in the transport bar */ +.t-btn { + display: inline-flex; + align-items: center; + justify-content: center; + gap: 5px; + height: 32px; + min-width: 32px; + padding: 0 8px; + border-radius: 7px; + background: var(--color-surface-2); + color: var(--color-text-muted); + border: 1px solid var(--color-border); + cursor: pointer; + transition: background 0.12s, opacity 0.12s; + flex-shrink: 0; + font-size: 12px; + font-family: inherit; +} +.t-btn:hover:not(:disabled) { background: var(--color-surface-3); color: var(--color-text); } +.t-btn:disabled { opacity: 0.55; cursor: default; } + +/* Primary play/pause button - circular, accent-colored */ +.t-btn.primary { + background: var(--color-accent); + border-color: transparent; + width: 40px; + height: 40px; + min-width: 40px; + padding: 0; + border-radius: 50%; + color: white; + box-shadow: 0 0 18px rgba(147, 51, 234, 0.5); +} +.t-btn.primary:hover:not(:disabled) { + background: var(--color-accent-hover); + box-shadow: 0 0 24px rgba(147, 51, 234, 0.65); +} + +@keyframes spin { to { transform: rotate(360deg); } } + +/* ── AlphaTab host ─────────────────────────────────────────────────────────── */ +.at-surface svg { display: block; } + +/* ── AlphaTab playback cursor ─────────────────────────────────────────────── */ +/* Beat cursor - thin accent-colored vertical bar following playhead */ +.at-cursor-beat { + background: rgba(147, 51, 234, 0.65); + border-radius: 1px; +} + +/* Bar cursor - wider semi-transparent highlight for the current measure */ +.at-cursor-bar { + background: rgba(147, 51, 234, 0.12); + border-radius: 2px; +} + +/* Selection overlay */ +.at-selection div { + background: rgba(147, 51, 234, 0.2); +} + +/* ── Dark-mode sheet music inversion ──────────────────────────────────────── */ +/* Filter is applied only to SVG elements (the actual music notation), NOT to + the container. This way: + - Black staff lines/noteheads to white (readable on dark background) + - The container's background (--color-bg dark gray) shows through transparent SVG areas + - Cursor/selection divs (.at-cursor-beat etc.) are NOT SVGs, so they keep their + natural purple accent colors - no pre-inversion math needed. */ +[data-theme="dark"] .sheet-dark-invert svg { + filter: invert(1); +} diff --git a/frontend/src/main.tsx b/frontend/src/main.tsx new file mode 100644 index 0000000..6f975f5 --- /dev/null +++ b/frontend/src/main.tsx @@ -0,0 +1,7 @@ +import { createRoot } from "react-dom/client"; +import "./index.css"; +import App from "./App"; + +// StrictMode deliberately double-mounts in dev, which conflicts with Pixi.js's +// async init - Application.destroy() fires before init() resolves. +createRoot(document.getElementById("root")!).render(); diff --git a/frontend/src/store/useAppStore.ts b/frontend/src/store/useAppStore.ts new file mode 100644 index 0000000..0770976 --- /dev/null +++ b/frontend/src/store/useAppStore.ts @@ -0,0 +1,555 @@ +import { create } from "zustand"; +import { syncEngine } from "../engine/SyncEngine"; +import bus from "../engine/EventBus"; +import type { MusicDocument, PlaybackStatus } from "@bach-to-basics/shared"; +import type { InstrumentId } from "../engine/AudioEngine"; +export { computeMeasureSeconds, keySignatureToLabel } from "@bach-to-basics/shared"; +export type { InstrumentId } from "../engine/AudioEngine"; +export { INSTRUMENT_LABELS } from "../engine/AudioEngine"; + +/** Which visual effect plays when a note reaches the hit line. */ +export type ImpactStyle = "off" | "bloom" | "side" | "trail"; + +/** Which pitch classes to show in the falling-notes view */ +export type NoteFilter = "all" | "white" | "black" | "c_only"; + +/** Layout mode - which panels are visible */ +export type LayoutMode = "falling" | "sheet" | "piano" | "all"; + +/** + * Color theme for falling notes (and keyboard highlights). + * - violet : all notes violet (default, no hand separation) + * - classic : left=blue, right=red (hand-aware) + * - ocean : cyan palette + * - forest : green palette + * - custom : user-defined colors via CustomColors + */ +export type ColorTheme = "violet" | "classic" | "ocean" | "forest" | "cascade" | "custom"; + +/** Per-channel colors for the custom theme (hex strings, e.g. "#3b82f6"). */ +export interface CustomColors { + leftHand: string; + rightHand: string; + unknown: string; +} + +/** Pre-built color values matching each named preset (used to seed the custom picker). */ +export const COLOR_PRESET_VALUES: Record, CustomColors> = { + violet: { leftHand: "#7c3aed", rightHand: "#f59e0b", unknown: "#a78bfa" }, // purple + amber + classic: { leftHand: "#2563eb", rightHand: "#dc2626", unknown: "#7c3aed" }, // blue + red + ocean: { leftHand: "#0284c7", rightHand: "#f97316", unknown: "#0ea5e9" }, // blue + coral + forest: { leftHand: "#16a34a", rightHand: "#a855f7", unknown: "#4ade80" }, // green + purple + cascade: { leftHand: "#9333ea", rightHand: "#22d3ee", unknown: "#a855f7" }, // purple + cyan +}; + +/** Which keys receive note-name labels on the piano keyboard */ +export type NoteLabelMode = "none" | "c_only" | "white" | "black" | "all"; + +export interface SpeedTrainerSettings { + enabled: boolean; + startPct: number; // 0-100 + endPct: number; // 0-100 + stepPct: number; // increment per loop + currentPct: number; // current ramp position +} + +export interface AppSettings { + showFingering: boolean; + showHandColors: boolean; + useFlats: boolean; + viewportSeconds: number; // FallingNotes lookahead window + theme: "dark" | "light"; + activeHands: Set<"left" | "right">; + volume: number; // 0-1 + noteFilter: NoteFilter; + colorTheme: ColorTheme; + customColors: CustomColors; + layoutMode: LayoutMode; + metronomeEnabled: boolean; + // ── New settings ────────────────────────────────────────────────────────── + /** Note labels on the piano keyboard */ + noteLabelMode: NoteLabelMode; + /** Note labels on the falling notes bars */ + fallingNotesLabelMode: NoteLabelMode; + pianoTheme: "white" | "ivory"; + showGrid: boolean; + showMeasureNums: boolean; + showKeySignature: boolean; + transposeSemitones: number; // -6..+6 + speedTrainer: SpeedTrainerSettings; + countInBars: 0 | 1 | 2; + /** Which visual effect plays when a note reaches the hit line */ + impactStyle: ImpactStyle; + sheetMusicWhiteBackground: boolean; + // ── MIDIano-inspired additions ──────────────────────────────────────────── + /** Scroll wheel on the falling notes canvas seeks playback position */ + scrollToSeek: boolean; + /** Minimum pixel height for note bars (prevents staccato notes becoming invisible) */ + minNoteHeight: number; // 4-24 + /** Border-radius for note bar corners (0 = sharp, 12 = pill) */ + noteCornerRadius: number; // 0-12 + /** Draw faint horizontal lines at each beat and measure boundary */ + showBeatLines: boolean; + /** Show sustain pedal (CC64) regions as semi-transparent bands */ + showSustainPedal: boolean; + /** Per-hand volume multiplier (0 = silent, 1 = full) */ + handVolume: { left: number; right: number }; + /** Active instrument for audio playback */ + instrument: InstrumentId; + /** Which hand(s) trigger wait-mode pauses ("both" = default, all hands) */ + waitForHand: "left" | "right" | "both"; + /** Draw a colored outline stroke around falling note bars */ + showNoteOutline: boolean; + // ── MIDIano live-app additions ──────────────────────────────────────────── + /** Shift audio scheduling by ±ms to compensate for audio interface latency (positive = play earlier) */ + renderOffset: number; // -200..+200 ms + /** Keep a ghost indicator for notes that have ended while sustain pedal is held */ + showSustainedNotes: boolean; +} + +export interface AppState { + // ── Document ───────────────────────────────────────────────────────────── + document: MusicDocument | null; + isLoadingDocument: boolean; + loadError: string | null; + /** Non-null during slow imports (e.g. OMR) to show a descriptive message */ + loadingMessage: string | null; + + // ── Playback ───────────────────────────────────────────────────────────── + status: PlaybackStatus; + currentSeconds: number; + tempoMultiplier: number; + loopStart: number | null; + loopEnd: number | null; + waitMode: boolean; + + // ── Settings ───────────────────────────────────────────────────────────── + settings: AppSettings; + + // ── MIDI device ────────────────────────────────────────────────────────── + midiDeviceName: string | null; + midiEnabled: boolean; + + // ── Actions ────────────────────────────────────────────────────────────── + loadMidiFile: (file: File) => Promise; + loadMusicXmlFile: (file: File) => Promise; + loadPdfFile: (file: File) => Promise; + play: () => void; + pause: () => void; + stop: () => void; + seek: (seconds: number) => void; + setTempoMultiplier: (v: number) => void; + setLoopPoints: (start: number | null, end: number | null) => void; + setWaitMode: (on: boolean) => void; + setActiveHands: (hands: Set<"left" | "right">) => void; + setMetronome: (on: boolean) => void; + updateSettings: (patch: Partial) => void; + resetSettings: () => void; + setMidiDevice: (name: string | null) => void; + clearLoadError: () => void; + syncEngineState: () => void; +} + +export const DEFAULT_SETTINGS: AppSettings = { + showFingering: false, + showHandColors: true, + useFlats: false, + viewportSeconds: 4.0, + theme: "light", + activeHands: new Set(["left", "right"]), + volume: 0.8, + noteFilter: "all", + colorTheme: "cascade", + customColors: { leftHand: "#9333ea", rightHand: "#22d3ee", unknown: "#a855f7" }, + layoutMode: "falling", + metronomeEnabled: false, + // ── New defaults ────────────────────────────────────────────────────────── + noteLabelMode: "c_only", + fallingNotesLabelMode: "all", + pianoTheme: "white", + showGrid: false, + showMeasureNums: true, + showKeySignature: true, + transposeSemitones: 0, + speedTrainer: { enabled: false, startPct: 60, endPct: 100, stepPct: 5, currentPct: 60 }, + countInBars: 0, + impactStyle: "bloom" as ImpactStyle, + sheetMusicWhiteBackground: false, + // ── MIDIano-inspired additions ──────────────────────────────────────────── + scrollToSeek: false, + minNoteHeight: 8, + noteCornerRadius: 4, + showBeatLines: false, + showSustainPedal: false, + handVolume: { left: 1, right: 1 }, + // ── "Consider later" additions ──────────────────────────────────────────── + instrument: "grand" as InstrumentId, + waitForHand: "both" as "left" | "right" | "both", + showNoteOutline: false, + // ── MIDIano live-app additions ──────────────────────────────────────────── + renderOffset: 0, + showSustainedNotes: false, +}; + +export const useAppStore = create((set, get) => { + // Subscribe to SyncEngine state changes --> push into Zustand + syncEngine.onStateChange((s) => { + set({ + status: s.status, + currentSeconds: s.currentSeconds, + tempoMultiplier: s.tempoMultiplier, + loopStart: s.loopStart, + loopEnd: s.loopEnd, + waitMode: s.waitMode, + }); + }); + + // Speed trainer: keep currentPct in sync when the engine steps the tempo + bus.on("speedTrainer:stepped", ({ currentPct }) => { + set((s) => ({ + tempoMultiplier: currentPct / 100, + settings: { + ...s.settings, + speedTrainer: { ...s.settings.speedTrainer, currentPct }, + }, + })); + }); + + return { + document: null, + isLoadingDocument: false, + loadError: null, + loadingMessage: null, + status: "stopped", + currentSeconds: 0, + tempoMultiplier: 1.0, + loopStart: null, + loopEnd: null, + waitMode: false, + settings: DEFAULT_SETTINGS, + midiDeviceName: null, + midiEnabled: false, + + loadMidiFile: async (file: File) => { + set({ isLoadingDocument: true, loadError: null }); + + try { + const rawBuffer = await file.arrayBuffer(); + const id = crypto.randomUUID(); + // M4 - strip path separators, control chars; cap length + const rawTitle = file.name.replace(/\.midi?$/i, ""); + const title = rawTitle.replace(/[\x00-\x1f\x7f/\\]/g, "").slice(0, 200) || "Untitled"; + + // Slice a copy BEFORE transferring - postMessage() detaches (empties) the original + const bufferForXml = rawBuffer.slice(0); + + // Parse in Web Worker (transfers rawBuffer ownership) + const doc = await parseMidiInWorker(rawBuffer, id, title); + set({ document: doc }); + await syncEngine.loadDocument(doc); + + // Request MusicXML from backend (non-blocking), using the copy + fetchMusicXml(bufferForXml, doc, id).catch(console.warn); + } catch (err) { + set({ loadError: String(err) }); + } finally { + set({ isLoadingDocument: false }); + } + }, + + loadMusicXmlFile: async (file: File) => { + set({ isLoadingDocument: true, loadError: null }); + try { + const id = crypto.randomUUID(); + // M4 - strip path separators, control chars; cap length + const rawTitle = file.name.replace(/\.(xml|mxl)$/i, ""); + const title = rawTitle.replace(/[\x00-\x1f\x7f/\\]/g, "").slice(0, 200) || "Untitled"; + const xmlBytes = await file.arrayBuffer(); + + // For .mxl (ZIP-compressed MusicXML) decompress in the browser so we + // always end up with a plain XML string. This is more reliable than + // relying on AlphaTab's internal ZIP reader (errors are swallowed there + // and produce a silent blank sheet view). + let musicXml: string | null; + if (file.name.toLowerCase().endsWith(".mxl")) { + const { extractXmlFromMxl } = await import("../utils/mxlExtract"); + musicXml = await extractXmlFromMxl(xmlBytes); + } else { + musicXml = new TextDecoder().decode(xmlBytes); + } + + // Stub document - sheet music renders immediately via musicXml string + const doc: import("@bach-to-basics/shared").MusicDocument = { + id, title, + sourceType: "musicxml", + musicXml, + midiBuffer: null, + notes: [], + tempoMap: [{ tick: 0, bpm: 120 }], + timeSignatures: [{ tick: 0, numerator: 4, denominator: 4 }], + totalDuration: 0, + ppq: 480, + keySignature: null, + youtubeId: null, + youtubeSyncOffset: 0, + fingeringVersion: "none", + }; + + set({ document: doc }); + await syncEngine.loadDocument(doc); + + // Fetch MIDI from backend for playback + falling notes (non-blocking). + // For .mxl files we send the already-extracted plain XML string (re-encoded + // to UTF-8) with a .xml extension, so the backend gets clean MusicXML rather + // than the ZIP container. This avoids cross-staff voice-duplication artefacts + // that music21 can produce when it parses a compressed .mxl directly. + const xmlBytesForBackend = (musicXml && file.name.toLowerCase().endsWith(".mxl")) + ? new TextEncoder().encode(musicXml).buffer + : xmlBytes; + const filenameForBackend = file.name.toLowerCase().endsWith(".mxl") + ? file.name.replace(/\.mxl$/i, ".xml") + : file.name; + fetchMidiFromXml(xmlBytesForBackend, filenameForBackend, doc, id).catch(console.warn); + } catch (err) { + set({ loadError: String(err) }); + } finally { + set({ isLoadingDocument: false }); + } + }, + + loadPdfFile: async (file: File) => { + const id = crypto.randomUUID(); + // M4 - strip path separators and control chars; cap length + const rawTitle = file.name.replace(/\.pdf$/i, ""); + const title = rawTitle.replace(/[\x00-\x1f\x7f/\\]/g, "").slice(0, 200) || "Untitled"; + + set({ isLoadingDocument: true, loadingMessage: "Reading sheet music\u2026", loadError: null }); + + try { + const form = new FormData(); + form.append("file", file, file.name); + + // OMR can take 10-120 s; no client-side fetch timeout - + // the server's subprocess timeout is the effective limit. + const res = await fetch("/api/omr/pdf2midi", { method: "POST", body: form }); + + if (!res.ok) { + const body = await res.json().catch(() => ({})) as { detail?: string }; + throw new Error(body.detail ?? `Server error ${res.status}`); + } + + const { musicxml, midi_b64 } = await res.json() as { + musicxml: string; + midi_b64: string; + filename: string; + }; + + // Decode base64 MIDI + const binaryStr = atob(midi_b64); + const midiBytes = new Uint8Array(binaryStr.length); + for (let i = 0; i < binaryStr.length; i++) midiBytes[i] = binaryStr.charCodeAt(i); + const midiBuffer = midiBytes.buffer; + const bufferForDoc = midiBuffer.slice(0); + + // Parse notes from MIDI (same Web Worker path as loadMidiFile) + const doc = await parseMidiInWorker(midiBuffer, id, title); + + // Attach MusicXML so sheet music renders immediately alongside playback. + // sourceType "musicxml" tells AlphaTab to render the score. + doc.musicXml = musicxml; + doc.sourceType = "musicxml"; + + set({ document: { ...doc, midiBuffer: bufferForDoc } }); + await syncEngine.loadDocument({ ...doc, midiBuffer: bufferForDoc }); + + } catch (err) { + set({ loadError: String(err) }); + } finally { + set({ isLoadingDocument: false, loadingMessage: null }); + } + }, + + play: () => { + const { settings, status } = get(); + // Speed trainer: seed the engine's current state before play + if (settings.speedTrainer.enabled) { + const st = settings.speedTrainer; + // If stopped (fresh start), reset to startPct; otherwise keep current + const currentPct = status === "stopped" ? st.startPct : st.currentPct; + syncEngine.setSpeedTrainer({ ...st, currentPct }); + syncEngine.setTempoMultiplier(currentPct / 100); + set((s) => ({ + tempoMultiplier: currentPct / 100, + settings: { + ...s.settings, + speedTrainer: { ...s.settings.speedTrainer, currentPct }, + }, + })); + } + syncEngine.play(); + }, + pause: () => syncEngine.pause(), + stop: () => syncEngine.stop(), + seek: (seconds) => syncEngine.seek(seconds), + + setTempoMultiplier: (v) => { + syncEngine.setTempoMultiplier(v); + set({ tempoMultiplier: v }); + }, + + setLoopPoints: (start, end) => { + syncEngine.setLoopPoints(start, end); + set({ loopStart: start, loopEnd: end }); + }, + + setWaitMode: (on) => { + syncEngine.setWaitMode(on); + set({ waitMode: on }); + }, + + setMetronome: (on) => { + syncEngine.setMetronome(on); + set((s) => ({ settings: { ...s.settings, metronomeEnabled: on } })); + }, + + setActiveHands: (hands) => { + syncEngine.setActiveHands(hands); + set((s) => ({ + settings: { ...s.settings, activeHands: hands }, + })); + }, + + updateSettings: (patch) => { + set((s) => ({ settings: { ...s.settings, ...patch } })); + // Sync practice settings to the engine immediately + if ("transposeSemitones" in patch && patch.transposeSemitones !== undefined) + syncEngine.setTranspose(patch.transposeSemitones); + if ("countInBars" in patch && patch.countInBars !== undefined) + syncEngine.setCountInBars(patch.countInBars); + if ("speedTrainer" in patch && patch.speedTrainer !== undefined) + syncEngine.setSpeedTrainer(patch.speedTrainer); + if ("handVolume" in patch && patch.handVolume !== undefined) + syncEngine.setHandVolume(patch.handVolume); + if ("instrument" in patch && patch.instrument !== undefined) + syncEngine.setInstrument(patch.instrument).catch(console.warn); + if ("waitForHand" in patch && patch.waitForHand !== undefined) + syncEngine.setWaitForHand(patch.waitForHand); + if ("renderOffset" in patch && patch.renderOffset !== undefined) + syncEngine.setRenderOffset(patch.renderOffset); + }, + + resetSettings: () => { + set({ settings: { ...DEFAULT_SETTINGS } }); + // Re-sync engine with defaults + syncEngine.setTranspose(DEFAULT_SETTINGS.transposeSemitones); + syncEngine.setCountInBars(DEFAULT_SETTINGS.countInBars); + syncEngine.setSpeedTrainer(DEFAULT_SETTINGS.speedTrainer); + syncEngine.setMetronome(DEFAULT_SETTINGS.metronomeEnabled); + syncEngine.setActiveHands(DEFAULT_SETTINGS.activeHands); + syncEngine.setHandVolume(DEFAULT_SETTINGS.handVolume); + syncEngine.setWaitForHand(DEFAULT_SETTINGS.waitForHand); + syncEngine.setInstrument(DEFAULT_SETTINGS.instrument).catch(console.warn); + syncEngine.setRenderOffset(DEFAULT_SETTINGS.renderOffset); + }, + + setMidiDevice: (name) => set({ midiDeviceName: name, midiEnabled: name !== null }), + + clearLoadError: () => set({ loadError: null }), + + syncEngineState: () => { + const s = syncEngine.state; + set({ + status: s.status, + currentSeconds: s.currentSeconds, + tempoMultiplier: s.tempoMultiplier, + loopStart: s.loopStart, + loopEnd: s.loopEnd, + waitMode: s.waitMode, + }); + }, + }; +}); + +// ── Helpers ────────────────────────────────────────────────────────────────── + +function parseMidiInWorker( + buffer: ArrayBuffer, + id: string, + title: string +): Promise { + return new Promise((resolve, reject) => { + const worker = new Worker(new URL("../workers/midi.worker.ts", import.meta.url), { + type: "module", + }); + + // M3 - kill the worker if it hangs (e.g. malformed MIDI, infinite loop) + const timeout = setTimeout(() => { + worker.terminate(); + reject(new Error("MIDI parsing timed out")); + }, 30_000); + + worker.onmessage = (e) => { + clearTimeout(timeout); + worker.terminate(); + if (e.data.ok) resolve(e.data.doc as MusicDocument); + else reject(new Error(e.data.error)); + }; + worker.onerror = (e) => { + clearTimeout(timeout); + worker.terminate(); + reject(e); + }; + worker.postMessage({ buffer, id, title }, [buffer]); + }); +} + +async function fetchMidiFromXml( + xmlBytes: ArrayBuffer, + filename: string, + doc: import("@bach-to-basics/shared").MusicDocument, + id: string +): Promise { + const blob = new Blob([xmlBytes], { type: "application/xml" }); + const form = new FormData(); + form.append("file", blob, filename); + + const res = await fetch("/api/transcribe/musicxml2midi", { method: "POST", body: form }); + if (!res.ok) return; + + const midiBuffer = await res.arrayBuffer(); + const bufferForDoc = midiBuffer.slice(0); + + // Parse notes from the returned MIDI + const updatedDoc = await parseMidiInWorker(midiBuffer, id, doc.title); + updatedDoc.musicXml = doc.musicXml; + updatedDoc.sourceType = "musicxml"; + + const { document: currentDoc } = useAppStore.getState(); + if (currentDoc?.id === id) { + useAppStore.setState({ document: { ...updatedDoc, midiBuffer: bufferForDoc } }); + await syncEngine.loadDocument({ ...updatedDoc, midiBuffer: bufferForDoc }); + } +} + +async function fetchMusicXml( + buffer: ArrayBuffer, + doc: MusicDocument, + _id: string +): Promise { + const blob = new Blob([buffer], { type: "audio/midi" }); + const form = new FormData(); + form.append("file", blob, "track.mid"); + + const titleParam = encodeURIComponent(doc.title ?? ""); + const res = await fetch(`/api/transcribe/midi2musicxml?title=${titleParam}`, { method: "POST", body: form }); + if (!res.ok) return; + + const { musicxml } = await res.json() as { musicxml: string }; + doc.musicXml = musicxml; + + // Notify sheet view that MusicXML is now available + const { document: currentDoc } = useAppStore.getState(); + if (currentDoc?.id === doc.id) { + useAppStore.setState({ document: { ...doc } }); + } +} diff --git a/frontend/src/utils/colorUtils.ts b/frontend/src/utils/colorUtils.ts new file mode 100644 index 0000000..6cc35bf --- /dev/null +++ b/frontend/src/utils/colorUtils.ts @@ -0,0 +1,22 @@ +/** + * Shared color utility functions used by the PIXI renderers. + */ + +/** + * Multiply each RGB channel of a packed hex color by factor f, clamped to 255. + * Used to generate lighter/darker variants of palette colors. + */ +export function lighten(hex: number, f: number): number { + return ( + (Math.min(255, Math.round(((hex >> 16) & 0xff) * f)) << 16) | + (Math.min(255, Math.round(((hex >> 8) & 0xff) * f)) << 8) | + Math.min(255, Math.round((hex & 0xff) * f)) + ); +} + +/** + * Convert a CSS hex color string ("#rrggbb") to a packed numeric color. + */ +export function hexToNum(hex: string): number { + return parseInt(hex.replace("#", ""), 16); +} diff --git a/frontend/src/utils/mxlExtract.ts b/frontend/src/utils/mxlExtract.ts new file mode 100644 index 0000000..2431c5d --- /dev/null +++ b/frontend/src/utils/mxlExtract.ts @@ -0,0 +1,156 @@ +/** + * Browser-side .mxl extractor. + * + * .mxl (compressed MusicXML) is a ZIP archive containing: + * META-INF/container.xml — lists the root MusicXML file + * .xml — the actual MusicXML document + * + * We parse the ZIP central directory to locate files, then decompress each + * DEFLATE-compressed entry with the browser-native DecompressionStream API + * (available in Chrome 80+, Firefox 113+, Safari 16.4+). + * + * Why not rely on AlphaTab's built-in .mxl support? + * AlphaTab's MusicXmlImporter can parse .mxl, but it runs synchronously inside + * a try/catch; if its ZIP reader or XML parser chokes on any detail of this + * specific file (e.g. MuseScore 2 export quirks) the error is swallowed and + * the sheet view silently stays blank. Extracting ourselves gives us a plain + * XML string that takes the battle-tested string path in SheetMusicView. + */ + +const SIG_LOCAL = 0x04034b50; // PK\x03\x04 +const SIG_CENTRAL = 0x02014b50; // PK\x01\x02 +const SIG_EOCD = 0x06054b50; // PK\x05\x06 + +interface ZipEntry { + name: string; + localOffset: number; +} + +/** Scan for the End-of-Central-Directory record (last PK\x05\x06 in the file). */ +function findEocd(bytes: Uint8Array): number { + for (let i = bytes.length - 22; i >= 0; i--) { + if ( + bytes[i] === 0x50 && bytes[i + 1] === 0x4b && + bytes[i + 2] === 0x05 && bytes[i + 3] === 0x06 + ) return i; + } + return -1; +} + +/** Read central-directory entries to build a name→localOffset map. */ +function readCentralDirectory(view: DataView, bytes: Uint8Array): ZipEntry[] { + const eocd = findEocd(bytes); + if (eocd === -1) throw new Error("Not a ZIP archive"); + + if (view.getUint32(eocd, true) !== SIG_EOCD) throw new Error("Bad EOCD signature"); + + const numEntries = view.getUint16(eocd + 10, true); + let cdPos = view.getUint32(eocd + 16, true); + + const entries: ZipEntry[] = []; + for (let i = 0; i < numEntries; i++) { + if (view.getUint32(cdPos, true) !== SIG_CENTRAL) break; + + const fileNameLen = view.getUint16(cdPos + 28, true); + const extraLen = view.getUint16(cdPos + 30, true); + const commentLen = view.getUint16(cdPos + 32, true); + const localOffset = view.getUint32(cdPos + 42, true); + const name = new TextDecoder().decode(bytes.slice(cdPos + 46, cdPos + 46 + fileNameLen)); + entries.push({ name, localOffset }); + cdPos += 46 + fileNameLen + extraLen + commentLen; + } + return entries; +} + +/** Decompress one local-file entry, returning its raw bytes. */ +async function readLocalEntry( + view: DataView, + bytes: Uint8Array, + entry: ZipEntry, +): Promise { + const off = entry.localOffset; + if (view.getUint32(off, true) !== SIG_LOCAL) { + throw new Error(`Bad local header at offset ${off}`); + } + + const compressionMethod = view.getUint16(off + 8, true); + const compressedSize = view.getUint32(off + 18, true); + const fileNameLen = view.getUint16(off + 26, true); + const extraLen = view.getUint16(off + 28, true); + const dataStart = off + 30 + fileNameLen + extraLen; + + const compressed = bytes.slice(dataStart, dataStart + compressedSize); + + if (compressionMethod === 0) { + // Stored — no compression + return compressed; + } + if (compressionMethod !== 8) { + throw new Error(`Unsupported ZIP compression method ${compressionMethod}`); + } + + // DEFLATE (raw, no zlib header) — decompress with browser-native stream. + // Cap decompressed size to 50 MB to prevent ZIP-bomb attacks: a crafted + // .mxl with a tiny compressed payload that expands to gigabytes would + // otherwise freeze or crash the browser tab. + const MAX_DECOMPRESSED = 50 * 1024 * 1024; // 50 MB - largest real scores are <5 MB + + const ds = new DecompressionStream("deflate-raw"); + const writer = ds.writable.getWriter(); + const reader = ds.readable.getReader(); + + writer.write(compressed); + writer.close(); + + const chunks: Uint8Array[] = []; + let totalDecompressed = 0; + for (;;) { + const { done, value } = await reader.read(); + if (done) break; + totalDecompressed += value.length; + if (totalDecompressed > MAX_DECOMPRESSED) { + throw new Error("Decompressed MusicXML exceeds 50 MB — possible ZIP bomb"); + } + chunks.push(value); + } + + const total = chunks.reduce((n, c) => n + c.length, 0); + const result = new Uint8Array(total); + let cursor = 0; + for (const chunk of chunks) { + result.set(chunk, cursor); + cursor += chunk.length; + } + return result; +} + +/** + * Extract the MusicXML string from a .mxl (ZIP-compressed MusicXML) ArrayBuffer. + * Throws if the archive is malformed or missing required files. + */ +export async function extractXmlFromMxl(buffer: ArrayBuffer): Promise { + const bytes = new Uint8Array(buffer); + const view = new DataView(buffer); + const entries = readCentralDirectory(view, bytes); + + const find = (name: string) => entries.find(e => e.name === name); + + // 1. Read META-INF/container.xml + const containerEntry = find("META-INF/container.xml"); + if (!containerEntry) throw new Error("Not a valid .mxl file: missing META-INF/container.xml"); + + const containerBytes = await readLocalEntry(view, bytes, containerEntry); + const containerXml = new TextDecoder("utf-8").decode(containerBytes); + + // 2. Parse the root-file path (e.g. full-path="score.xml") + const match = containerXml.match(/full-path="([^"]+)"/); + if (!match) throw new Error('Malformed container.xml: no full-path attribute'); + const rootPath = match[1]; + + // 3. Read the root MusicXML entry + const rootEntry = find(rootPath); + if (!rootEntry) throw new Error(`Root file "${rootPath}" not found in .mxl archive`); + + const xmlBytes = await readLocalEntry(view, bytes, rootEntry); + return new TextDecoder("utf-8").decode(xmlBytes); +} diff --git a/frontend/src/views/PracticeView.tsx b/frontend/src/views/PracticeView.tsx new file mode 100644 index 0000000..013b058 --- /dev/null +++ b/frontend/src/views/PracticeView.tsx @@ -0,0 +1,619 @@ +import { useCallback, useEffect, useRef, useState, useMemo } from "react"; +import { FallingNotesView } from "../components/FallingNotes/FallingNotesView"; +import { PianoKeyboardView } from "../components/PianoKeyboard/PianoKeyboardView"; +import { SheetMusicView } from "../components/SheetMusic/SheetMusicView"; +import { TransportControls } from "../components/Transport/TransportControls"; +import { SettingsPanel } from "../components/Transport/SettingsPanel"; +import { DevicePanel } from "../components/DevicePanel/DevicePanel"; +import { useAppStore } from "../store/useAppStore"; +import type { LayoutMode } from "../store/useAppStore"; +import bus from "../engine/EventBus"; +import { midiToPitch, keySignatureToLabel } from "@bach-to-basics/shared"; +import { syncEngine } from "../engine/SyncEngine"; + +const TAB_LABELS: Record = { + piano: "Piano", + falling: "Notes", + sheet: "Sheet", + all: "All", +}; + +const TAB_TITLES: Record = { + piano: "Show only the piano keyboard view", + falling: "Show only the falling notes view", + sheet: "Show only the sheet music view", + all: "Show all views at once", +}; + +export function PracticeView() { + const [settingsOpen, setSettingsOpen] = useState(false); + + const { + loadMidiFile, loadMusicXmlFile, loadPdfFile, + settings, updateSettings, + status, play, pause, seek, + loadError, clearLoadError, + document: doc, + isLoadingDocument, + } = useAppStore(); + + // Pre-warm audio so piano keys respond with minimal latency. + useEffect(() => { + syncEngine.audio.load().catch(() => {}); + const preWarm = () => syncEngine.audio.load().catch(() => {}); + document.addEventListener("pointermove", preWarm, { once: true }); + return () => document.removeEventListener("pointermove", preWarm); + }, []); + + // Apply theme to element + useEffect(() => { + document.documentElement.dataset.theme = settings.theme; + }, [settings.theme]); + + // Spacebar: play / pause + useEffect(() => { + const handler = (e: KeyboardEvent) => { + const tag = (e.target as HTMLElement).tagName; + if (e.code !== "Space" || tag === "INPUT" || tag === "SELECT" || tag === "TEXTAREA") return; + e.preventDefault(); + if (status === "playing") pause(); + else play(); + }; + window.addEventListener("keydown", handler); + return () => window.removeEventListener("keydown", handler); + }, [status, play, pause]); + + // ArrowLeft / ArrowRight: seek to prev / next note onset + useEffect(() => { + const handler = (e: KeyboardEvent) => { + if (e.code !== "ArrowLeft" && e.code !== "ArrowRight") return; + const tag = (e.target as HTMLElement).tagName; + if (tag === "INPUT" || tag === "SELECT" || tag === "TEXTAREA") return; + e.preventDefault(); + const { document: d, currentSeconds } = useAppStore.getState(); + if (!d?.notes.length) return; + const onsets = [...new Set(d.notes.map((n) => n.startSeconds))].sort((a, b) => a - b); + if (e.code === "ArrowRight") { + const next = onsets.find((t) => t > currentSeconds + 0.05); + if (next !== undefined) seek(next); + } else { + const prev = [...onsets].reverse().find((t) => t < currentSeconds - 0.05); + if (prev !== undefined) seek(prev); + } + }; + window.addEventListener("keydown", handler); + return () => window.removeEventListener("keydown", handler); + }, [seek]); + + const loadFile = useCallback((file: File) => { + if (file.name.match(/\.midi?$/i)) loadMidiFile(file); + else if (file.name.match(/\.mxl?$/i)) loadMusicXmlFile(file); + else if (file.name.match(/\.pdf$/i)) loadPdfFile(file); + }, [loadMidiFile, loadMusicXmlFile, loadPdfFile]); + + const handleDrop = useCallback((e: React.DragEvent) => { + e.preventDefault(); + const file = e.dataTransfer.files[0]; + if (file) loadFile(file); + }, [loadFile]); + + const { layoutMode } = settings; + const setLayout = (mode: LayoutMode) => updateSettings({ layoutMode: mode }); + + return ( +

e.preventDefault()} + onDrop={handleDrop} + > + {/* ── Header ─────────────────────────────────────────────────────────── */} + {/* Flex layout with absolutely-centered tabs: + - Left group: flex, takes natural width (never truncates) + - Center tabs: position:absolute left:50% transform:translateX(-50%) - true viewport center + - Right group: marginLeft:auto, pushes to far right + This pattern is immune to left/right asymmetry that breaks grid-based centering. */} +

+ {/* Left: gradient logo + app name → links to GitHub repo */} + + + {/* Typographic pun: "Bach" and "Basics" bold, "to" muted */} + + Bach + to + Basics + + + + {/* Center: layout mode tabs - absolutely centered in the header */} +

+ {(["piano", "falling", "sheet", "all"] as LayoutMode[]).map((mode) => ( + + ))} +

+ + {/* Right: MIDI device chip + theme toggle + settings gear */} +

+ + + +

+ + {/* ── Main content - layout-aware ────────────────────────────────────── */} +

+ {layoutMode === "piano" && ( +

+ + +

+ )} + {layoutMode === "falling" && ( +

+ + +

+ )} + {layoutMode === "sheet" && ( +

+ + +

+ )} + {layoutMode === "all" && ( + <> +

+ +

+ + +

+ + )} +

+ + {/* ── Empty state overlay ────────────────────────────────────────────── */} + {!doc && !isLoadingDocument && ( + + )} + + {/* ── Error toast ────────────────────────────────────────────────────── */} + {loadError && } + + {/* ── Transport bar ──────────────────────────────────────────────────── */} + + + {/* ── Status bar ─────────────────────────────────────────────────────── */} + + + {/* ── Settings panel (managed here, gear is in header) ───────────────── */} + setSettingsOpen(false)} /> + +

+ ); +} + +// ── Empty state ─────────────────────────────────────────────────────────────── + +function EmptyState({ onImport }: { onImport: (file: File) => void }) { + const fileInputRef = useRef(null); + return ( +

+ {/* Illustration */} +

+ +

+ No file loaded +

+ Import a MIDI, MusicXML, or PDF sheet music file to start practicing +

+ + {/* Primary CTA */} + + + + or drag & drop anywhere + + + { const f = e.target.files?.[0]; if (f) onImport(f); e.target.value = ""; }} + /> +

+ ); +} + +const UploadIconLg = () => ( + +); + +// ── Piano-mode background ───────────────────────────────────────────────────── +// Mirrors the grid drawn by FallingNotesRenderer so the piano-only view has the +// same dark background + black-key lanes + octave separator lines. + +const MIDI_MIN_BG = 21; // A0 +const MIDI_MAX_BG = 108; // C8 + +/** Precompute whiteKeyIndex (cumulative white-key counter per MIDI note). */ +function buildWhiteKeyIndex() { + const isBlk = (m: number) => [1,3,6,8,10].includes(m % 12); + const idx = new Array(MIDI_MAX_BG + 1).fill(0); + let wi = 0; + for (let m = MIDI_MIN_BG; m <= MIDI_MAX_BG; m++) { + idx[m] = wi; + if (!isBlk(m)) wi++; + } + return { idx, totalWhite: wi }; +} +const { idx: wkIdx, totalWhite: TOTAL_WHITE_BG } = buildWhiteKeyIndex(); + +function drawPianoGrid(canvas: HTMLCanvasElement) { + const { width, height } = canvas; + if (width === 0 || height === 0) return; + const ctx = canvas.getContext("2d"); + if (!ctx) return; + + const isBlk = (m: number) => [1,3,6,8,10].includes(m % 12); + const wW = width / TOTAL_WHITE_BG; + + // Clear to transparent - the CSS background on the parent div provides the colour. + ctx.clearRect(0, 0, width, height); + + // Faint octave separator lines at every C - neutral, works on dark and light + ctx.fillStyle = "rgba(128,128,144,0.2)"; + for (let m = MIDI_MIN_BG; m <= MIDI_MAX_BG; m++) { + if (m % 12 === 0 && !isBlk(m)) { + const x = wkIdx[m] * wW; + ctx.fillRect(x, 0, 1, height); + } + } +} + +function PianoModeBackground() { + const canvasRef = useRef(null); + const containerRef = useRef(null); + const { settings } = useAppStore(); + + // Reusable draw callback + const redraw = useMemo(() => () => { + const canvas = canvasRef.current; + if (!canvas) return; + drawPianoGrid(canvas); + }, []); + + useEffect(() => { + const container = containerRef.current; + const canvas = canvasRef.current; + if (!container || !canvas) return; + + const ro = new ResizeObserver(([entry]) => { + const { width, height } = entry.contentRect; + canvas.width = Math.round(width); + canvas.height = Math.round(height); + if (settings.showGrid) redraw(); + }); + ro.observe(container); + + // Initial size + canvas.width = container.clientWidth; + canvas.height = container.clientHeight; + if (settings.showGrid) redraw(); + + return () => ro.disconnect(); + // eslint-disable-next-line react-hooks/exhaustive-deps + }, [redraw]); + + // Redraw when showGrid toggles + useEffect(() => { + const canvas = canvasRef.current; + if (!canvas) return; + if (settings.showGrid) { + redraw(); + } else { + const ctx = canvas.getContext("2d"); + if (ctx) ctx.clearRect(0, 0, canvas.width, canvas.height); + } + }, [settings.showGrid, redraw]); + + return ( +

+ ); +} + +// ── Status bar ──────────────────────────────────────────────────────────────── + +function StatusBar() { + const { document: doc, currentSeconds, tempoMultiplier, status } = useAppStore(); + const [lastNote, setLastNote] = useState(""); + const clearTimerRef = useRef | null>(null); + + useEffect(() => { + const onNoteOn = ({ midi }: { midi: number; velocity: number }) => { + setLastNote(midiToPitch(midi)); + if (clearTimerRef.current) clearTimeout(clearTimerRef.current); + clearTimerRef.current = setTimeout(() => setLastNote(""), 2000); + }; + bus.on("input:note:on", onNoteOn as never); + return () => { + bus.off("input:note:on", onNoteOn as never); + if (clearTimerRef.current) clearTimeout(clearTimerRef.current); + }; + }, []); + + const bpm = doc?.tempoMap[0]?.bpm ?? null; + const effectiveBpm = bpm ? Math.round(bpm * tempoMultiplier) : null; + const fmt = (s: number) => `${Math.floor(s / 60)}:${Math.floor(s % 60).toString().padStart(2, "0")}`; + const keySig = doc?.keySignature ? keySignatureToLabel(doc.keySignature) : null; + const isActive = status === "playing" || status === "paused"; + + return ( +

+ {doc ? ( + <> + {isActive && ( + Playing + )} + {doc.title} + {keySig && <>{keySig}} + {effectiveBpm !== null && <>{effectiveBpm} BPM} + {lastNote && <>{lastNote}} + + ) : ( + No file loaded - drag & drop or click ↑ Import + )} +

+ {doc && {fmt(currentSeconds)} / {fmt(doc.totalDuration)}} +

+ ); +} + +const Dot = () => ·; + +// ── Error toast ─────────────────────────────────────────────────────────────── +// Shown whenever loadError is non-null. Dismissible with ✕ or auto-dismissed +// after 12 s so it doesn't block the UI forever. + +function ErrorToast({ message, onDismiss }: { message: string; onDismiss: () => void }) { + useEffect(() => { + // Longer timeout for multi-line messages (setup instructions, etc.) + const delay = message.includes("\n") ? 30_000 : 12_000; + const t = setTimeout(onDismiss, delay); + return () => clearTimeout(t); + }, [message, onDismiss]); + + return ( +

+ {/* Warning icon */} + ⚠ + + {message.split("\n").map((line, i) => ( + {line}{i < message.split("\n").length - 1 &&
} + ))} + + +

+ ); +} + +// ── Icons ───────────────────────────────────────────────────────────────────── + +const MusicNoteIcon = () => ( + +); + +/** Piano keyboard icon: 5 white keys with 3 black keys (C-D-E-F-G pattern) */ +const PianoKeysIcon = () => ( + +); + +const SunIcon = () => ( + +); +const MoonIcon = () => ( + +); +const GearIcon = () => ( + +); diff --git a/frontend/src/workers/midi.worker.ts b/frontend/src/workers/midi.worker.ts new file mode 100644 index 0000000..452c889 --- /dev/null +++ b/frontend/src/workers/midi.worker.ts @@ -0,0 +1,133 @@ +// Web Worker: parses MIDI ArrayBuffer --> NoteEvent[] + metadata +// Uses @tonejs/midi for parsing (synchronous, no nested worker issues). + +import { Midi } from "@tonejs/midi"; +import type { NoteEvent, TempoEvent, TimeSignatureEvent, MusicDocument, KeySignature, SustainRange } from "@bach-to-basics/shared"; +import { midiToPitch } from "@bach-to-basics/shared"; + +self.onmessage = (e: MessageEvent<{ buffer: ArrayBuffer; id: string; title: string }>) => { + const { buffer, id } = e.data; + // L5 - strip control characters that could corrupt downstream metadata + const title = e.data.title.replace(/[\x00-\x1f\x7f]/g, "").slice(0, 200); + + try { + const midi = new Midi(buffer); + const ppq = midi.header.ppq; + + // ── Tempo map ──────────────────────────────────────────────────────────── + const tempoMap: TempoEvent[] = midi.header.tempos.map((t) => ({ + tick: t.ticks, + bpm: t.bpm, + })); + if (tempoMap.length === 0) tempoMap.push({ tick: 0, bpm: 120 }); + + // ── Time signatures ────────────────────────────────────────────────────── + const timeSignatures: TimeSignatureEvent[] = midi.header.timeSignatures.map((ts) => ({ + tick: ts.ticks, + numerator: ts.timeSignature[0], + denominator: ts.timeSignature[1], + })); + if (timeSignatures.length === 0) timeSignatures.push({ tick: 0, numerator: 4, denominator: 4 }); + + // ── Key signature ──────────────────────────────────────────────────────── + // @tonejs/midi exposes header.keySignatures as { ticks, key, scale }[] + // eslint-disable-next-line @typescript-eslint/no-explicit-any + const rawKeySigs: any[] = (midi.header as any).keySignatures ?? []; + let keySignature: KeySignature | null = null; + if (rawKeySigs.length > 0) { + const first = rawKeySigs[0]; + // L5 - sanitize key field: allow only valid key-signature characters + const rawKey = String(first.key ?? "C"); + const safeKey = rawKey.replace(/[^A-Ga-g#b]/g, "").slice(0, 3) || "C"; + keySignature = { + key: safeKey, + scale: first.scale === "minor" ? "minor" : "major", + }; + } + + // ── Note events ────────────────────────────────────────────────────────── + const notes: NoteEvent[] = []; + let idCounter = 0; + + for (let trackIdx = 0; trackIdx < midi.tracks.length; trackIdx++) { + const track = midi.tracks[trackIdx]; + + // Hand assignment by track: track 0 = right, track 1 = left (standard) + let hand: NoteEvent["hand"] = "unknown"; + if (midi.tracks.length >= 2) { + hand = trackIdx === 0 ? "right" : "left"; + } + + for (const note of track.notes) { + notes.push({ + id: `n${idCounter++}`, + midi: note.midi, + pitch: midiToPitch(note.midi), + startTick: note.ticks, + durationTick: note.durationTicks, + startSeconds: note.time, // @tonejs/midi computes this + endSeconds: note.time + note.duration, + hand, + finger: null, + velocity: Math.round(note.velocity * 127), + channel: 0, + }); + } + } + + notes.sort((a, b) => a.startSeconds - b.startSeconds); + + const totalDuration = notes.length > 0 + ? Math.max(...notes.map((n) => n.endSeconds)) + : 0; + + // ── Sustain pedal (CC64) to sustain ranges ─────────────────────────────── + // @tonejs/midi normalises CC values to 0-1; ≥0.5 means pedal is depressed. + const sustainRanges: SustainRange[] = []; + const allCC64: { time: number; value: number }[] = []; + for (const track of midi.tracks) { + // eslint-disable-next-line @typescript-eslint/no-explicit-any + const cc64: any[] = (track.controlChanges as any)[64] ?? []; + for (const cc of cc64) { + allCC64.push({ time: cc.time as number, value: cc.value as number }); + } + } + allCC64.sort((a, b) => a.time - b.time); + + let sustainStart: number | null = null; + for (const cc of allCC64) { + const isOn = cc.value >= 0.5; + if (isOn && sustainStart === null) { + sustainStart = cc.time; + } else if (!isOn && sustainStart !== null) { + sustainRanges.push({ startSeconds: sustainStart, endSeconds: cc.time }); + sustainStart = null; + } + } + if (sustainStart !== null) { + sustainRanges.push({ startSeconds: sustainStart, endSeconds: totalDuration }); + } + + const doc: MusicDocument = { + id, + title, + sourceType: "midi", + musicXml: null, + midiBuffer: buffer, + notes, + tempoMap, + timeSignatures, + totalDuration, + ppq, + keySignature, + youtubeId: null, + youtubeSyncOffset: 0, + fingeringVersion: "none", + sustainRanges, + }; + + self.postMessage({ ok: true, doc }); + } catch (err) { + self.postMessage({ ok: false, error: String(err) }); + } +}; diff --git a/frontend/tsconfig.json b/frontend/tsconfig.json new file mode 100644 index 0000000..fa57ca7 --- /dev/null +++ b/frontend/tsconfig.json @@ -0,0 +1,23 @@ +{ + "compilerOptions": { + "target": "ES2022", + "useDefineForClassFields": true, + "lib": ["ES2022", "DOM", "DOM.Iterable"], + "module": "ESNext", + "skipLibCheck": true, + "moduleResolution": "bundler", + "allowImportingTsExtensions": true, + "isolatedModules": true, + "moduleDetection": "force", + "noEmit": true, + "jsx": "react-jsx", + "strict": true, + "noUnusedLocals": true, + "noUnusedParameters": true, + "noFallthroughCasesInSwitch": true, + "paths": { + "@bach-to-basics/shared": ["../shared/types/index.ts"] + } + }, + "include": ["src"] +} diff --git a/frontend/vite.config.ts b/frontend/vite.config.ts new file mode 100644 index 0000000..891f913 --- /dev/null +++ b/frontend/vite.config.ts @@ -0,0 +1,29 @@ +import { defineConfig } from "vite"; +import react from "@vitejs/plugin-react"; +import tailwindcss from "@tailwindcss/vite"; +import { resolve } from "path"; + +export default defineConfig({ + plugins: [react(), tailwindcss()], + resolve: { + alias: { + "@bach-to-basics/shared": resolve(__dirname, "../shared/types/index.ts"), + }, + }, + server: { + port: 5173, + proxy: { + "/api": { + target: "http://localhost:8000", + rewrite: (path) => path.replace(/^\/api/, ""), + }, + }, + }, + worker: { + format: "es", + }, + optimizeDeps: { + exclude: ["@coderline/alphatab"], + include: ["pixi.js"], + }, +}); diff --git a/package.json b/package.json new file mode 100644 index 0000000..82f0fa2 --- /dev/null +++ b/package.json @@ -0,0 +1,33 @@ +{ + "name": "bach-to-basics", + "private": true, + "version": "0.1.0", + "description": "Bach to Basics — browser-based piano learning app with falling notes, sheet music, and MIDI support", + "author": "gigliof", + "license": "MIT", + "homepage": "https://github.com/gigliof/bach-to-basics#readme", + "repository": { + "type": "git", + "url": "https://github.com/gigliof/bach-to-basics.git" + }, + "bugs": { + "url": "https://github.com/gigliof/bach-to-basics/issues" + }, + "scripts": { + "dev": "concurrently --names \"frontend,backend\" --prefix-colors \"cyan,yellow\" \"pnpm --filter frontend dev\" \"cd backend && .venv/bin/uvicorn main:app --reload --port 8000\"", + "build": "pnpm --filter frontend build", + "test": "pnpm --filter frontend test", + "backend:setup": "cd backend && python3 -m venv .venv && .venv/bin/pip install -r requirements.txt" + }, + "devDependencies": { + "concurrently": "^9.0.0" + }, + "pnpm": { + "onlyBuiltDependencies": [ + "esbuild" + ], + "overrides": { + "@xmldom/xmldom": "0.8.13" + } + } +} diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml new file mode 100644 index 0000000..55c98f1 --- /dev/null +++ b/pnpm-lock.yaml @@ -0,0 +1,2500 @@ +lockfileVersion: '9.0' + +settings: + autoInstallPeers: true + excludeLinksFromLockfile: false + +overrides: + '@xmldom/xmldom': 0.8.13 + +importers: + + .: + devDependencies: + concurrently: + specifier: ^9.0.0 + version: 9.2.1 + + frontend: + dependencies: + '@bach-to-basics/shared': + specifier: workspace:* + version: link:../shared + '@coderline/alphatab': + specifier: ^1.3.0 + version: 1.8.2 + '@tonejs/midi': + specifier: ^2.0.6 + version: 2.0.28 + mitt: + specifier: ^3.0.1 + version: 3.0.1 + pixi.js: + specifier: ^8.0.0 + version: 8.17.1 + react: + specifier: ^19.0.0 + version: 19.2.5 + react-dom: + specifier: ^19.0.0 + version: 19.2.5(react@19.2.5) + smplr: + specifier: ^0.14.0 + version: 0.14.0 + tone: + specifier: ^15.0.4 + version: 15.1.22 + webmidi: + specifier: ^3.1.11 + version: 3.1.16 + zustand: + specifier: ^5.0.0 + version: 5.0.12(@types/react@19.2.14)(react@19.2.5) + devDependencies: + '@tailwindcss/vite': + specifier: ^4.0.0 + version: 4.2.2(vite@6.4.2(jiti@2.6.1)(lightningcss@1.32.0)) + '@types/react': + specifier: ^19.0.0 + version: 19.2.14 + '@types/react-dom': + specifier: ^19.0.0 + version: 19.2.3(@types/react@19.2.14) + '@vitejs/plugin-react': + specifier: ^4.3.0 + version: 4.7.0(vite@6.4.2(jiti@2.6.1)(lightningcss@1.32.0)) + '@vitest/ui': + specifier: ^2.0.0 + version: 2.1.9(vitest@2.1.9) + tailwindcss: + specifier: ^4.0.0 + version: 4.2.2 + typescript: + specifier: ~5.7.0 + version: 5.7.3 + vite: + specifier: ^6.0.0 + version: 6.4.2(jiti@2.6.1)(lightningcss@1.32.0) + vitest: + specifier: ^2.0.0 + version: 2.1.9(@vitest/ui@2.1.9)(lightningcss@1.32.0) + + shared: {} + +packages: + + '@babel/code-frame@7.29.0': + resolution: {integrity: sha512-9NhCeYjq9+3uxgdtp20LSiJXJvN0FeCtNGpJxuMFZ1Kv3cWUNb6DOhJwUvcVCzKGR66cw4njwM6hrJLqgOwbcw==} + engines: {node: '>=6.9.0'} + + '@babel/compat-data@7.29.0': + resolution: {integrity: sha512-T1NCJqT/j9+cn8fvkt7jtwbLBfLC/1y1c7NtCeXFRgzGTsafi68MRv8yzkYSapBnFA6L3U2VSc02ciDzoAJhJg==} + engines: {node: '>=6.9.0'} + + '@babel/core@7.29.0': + resolution: {integrity: sha512-CGOfOJqWjg2qW/Mb6zNsDm+u5vFQ8DxXfbM09z69p5Z6+mE1ikP2jUXw+j42Pf1XTYED2Rni5f95npYeuwMDQA==} + engines: {node: '>=6.9.0'} + + '@babel/generator@7.29.1': + resolution: {integrity: sha512-qsaF+9Qcm2Qv8SRIMMscAvG4O3lJ0F1GuMo5HR/Bp02LopNgnZBC/EkbevHFeGs4ls/oPz9v+Bsmzbkbe+0dUw==} + engines: {node: '>=6.9.0'} + + '@babel/helper-compilation-targets@7.28.6': + resolution: {integrity: sha512-JYtls3hqi15fcx5GaSNL7SCTJ2MNmjrkHXg4FSpOA/grxK8KwyZ5bubHsCq8FXCkua6xhuaaBit+3b7+VZRfcA==} + engines: {node: '>=6.9.0'} + + '@babel/helper-globals@7.28.0': + resolution: {integrity: sha512-+W6cISkXFa1jXsDEdYA8HeevQT/FULhxzR99pxphltZcVaugps53THCeiWA8SguxxpSp3gKPiuYfSWopkLQ4hw==} + engines: {node: '>=6.9.0'} + + '@babel/helper-module-imports@7.28.6': + resolution: {integrity: sha512-l5XkZK7r7wa9LucGw9LwZyyCUscb4x37JWTPz7swwFE/0FMQAGpiWUZn8u9DzkSBWEcK25jmvubfpw2dnAMdbw==} + engines: {node: '>=6.9.0'} + + '@babel/helper-module-transforms@7.28.6': + resolution: {integrity: sha512-67oXFAYr2cDLDVGLXTEABjdBJZ6drElUSI7WKp70NrpyISso3plG9SAGEF6y7zbha/wOzUByWWTJvEDVNIUGcA==} + engines: {node: '>=6.9.0'} + peerDependencies: + '@babel/core': ^7.0.0 + + '@babel/helper-plugin-utils@7.28.6': + resolution: {integrity: sha512-S9gzZ/bz83GRysI7gAD4wPT/AI3uCnY+9xn+Mx/KPs2JwHJIz1W8PZkg2cqyt3RNOBM8ejcXhV6y8Og7ly/Dug==} + engines: {node: '>=6.9.0'} + + '@babel/helper-string-parser@7.27.1': + resolution: {integrity: sha512-qMlSxKbpRlAridDExk92nSobyDdpPijUq2DW6oDnUqd0iOGxmQjyqhMIihI9+zv4LPyZdRje2cavWPbCbWm3eA==} + engines: {node: '>=6.9.0'} + + '@babel/helper-validator-identifier@7.28.5': + resolution: {integrity: sha512-qSs4ifwzKJSV39ucNjsvc6WVHs6b7S03sOh2OcHF9UHfVPqWWALUsNUVzhSBiItjRZoLHx7nIarVjqKVusUZ1Q==} + engines: {node: '>=6.9.0'} + + '@babel/helper-validator-option@7.27.1': + resolution: {integrity: sha512-YvjJow9FxbhFFKDSuFnVCe2WxXk1zWc22fFePVNEaWJEu8IrZVlda6N0uHwzZrUM1il7NC9Mlp4MaJYbYd9JSg==} + engines: {node: '>=6.9.0'} + + '@babel/helpers@7.29.2': + resolution: {integrity: sha512-HoGuUs4sCZNezVEKdVcwqmZN8GoHirLUcLaYVNBK2J0DadGtdcqgr3BCbvH8+XUo4NGjNl3VOtSjEKNzqfFgKw==} + engines: {node: '>=6.9.0'} + + '@babel/parser@7.29.2': + resolution: {integrity: sha512-4GgRzy/+fsBa72/RZVJmGKPmZu9Byn8o4MoLpmNe1m8ZfYnz5emHLQz3U4gLud6Zwl0RZIcgiLD7Uq7ySFuDLA==} + engines: {node: '>=6.0.0'} + hasBin: true + + '@babel/plugin-transform-react-jsx-self@7.27.1': + resolution: {integrity: sha512-6UzkCs+ejGdZ5mFFC/OCUrv028ab2fp1znZmCZjAOBKiBK2jXD1O+BPSfX8X2qjJ75fZBMSnQn3Rq2mrBJK2mw==} + engines: {node: '>=6.9.0'} + peerDependencies: + '@babel/core': ^7.0.0-0 + + '@babel/plugin-transform-react-jsx-source@7.27.1': + resolution: {integrity: sha512-zbwoTsBruTeKB9hSq73ha66iFeJHuaFkUbwvqElnygoNbj/jHRsSeokowZFN3CZ64IvEqcmmkVe89OPXc7ldAw==} + engines: {node: '>=6.9.0'} + peerDependencies: + '@babel/core': ^7.0.0-0 + + '@babel/runtime@7.29.2': + resolution: {integrity: sha512-JiDShH45zKHWyGe4ZNVRrCjBz8Nh9TMmZG1kh4QTK8hCBTWBi8Da+i7s1fJw7/lYpM4ccepSNfqzZ/QvABBi5g==} + engines: {node: '>=6.9.0'} + + '@babel/template@7.28.6': + resolution: {integrity: sha512-YA6Ma2KsCdGb+WC6UpBVFJGXL58MDA6oyONbjyF/+5sBgxY/dwkhLogbMT2GXXyU84/IhRw/2D1Os1B/giz+BQ==} + engines: {node: '>=6.9.0'} + + '@babel/traverse@7.29.0': + resolution: {integrity: sha512-4HPiQr0X7+waHfyXPZpWPfWL/J7dcN1mx9gL6WdQVMbPnF3+ZhSMs8tCxN7oHddJE9fhNE7+lxdnlyemKfJRuA==} + engines: {node: '>=6.9.0'} + + '@babel/types@7.29.0': + resolution: {integrity: sha512-LwdZHpScM4Qz8Xw2iKSzS+cfglZzJGvofQICy7W7v4caru4EaAmyUuO6BGrbyQ2mYV11W0U8j5mBhd14dd3B0A==} + engines: {node: '>=6.9.0'} + + '@coderline/alphatab@1.8.2': + resolution: {integrity: sha512-Ab11m2IwCdOG+Wbzbv+v4pvJgJnNqw+UjIgKyaTu9TBTWfE7GlOuuElpswkQ2mLB6E4HcOX1FSBopMZdP41B5g==} + engines: {node: '>=6.0.0'} + + '@esbuild/aix-ppc64@0.21.5': + resolution: {integrity: sha512-1SDgH6ZSPTlggy1yI6+Dbkiz8xzpHJEVAlF/AM1tHPLsf5STom9rwtjE4hKAF20FfXXNTFqEYXyJNWh1GiZedQ==} + engines: {node: '>=12'} + cpu: [ppc64] + os: [aix] + + '@esbuild/aix-ppc64@0.25.12': + resolution: {integrity: sha512-Hhmwd6CInZ3dwpuGTF8fJG6yoWmsToE+vYgD4nytZVxcu1ulHpUQRAB1UJ8+N1Am3Mz4+xOByoQoSZf4D+CpkA==} + engines: {node: '>=18'} + cpu: [ppc64] + os: [aix] + + '@esbuild/android-arm64@0.21.5': + resolution: {integrity: sha512-c0uX9VAUBQ7dTDCjq+wdyGLowMdtR/GoC2U5IYk/7D1H1JYC0qseD7+11iMP2mRLN9RcCMRcjC4YMclCzGwS/A==} + engines: {node: '>=12'} + cpu: [arm64] + os: [android] + + '@esbuild/android-arm64@0.25.12': + resolution: {integrity: sha512-6AAmLG7zwD1Z159jCKPvAxZd4y/VTO0VkprYy+3N2FtJ8+BQWFXU+OxARIwA46c5tdD9SsKGZ/1ocqBS/gAKHg==} + engines: {node: '>=18'} + cpu: [arm64] + os: [android] + + '@esbuild/android-arm@0.21.5': + resolution: {integrity: sha512-vCPvzSjpPHEi1siZdlvAlsPxXl7WbOVUBBAowWug4rJHb68Ox8KualB+1ocNvT5fjv6wpkX6o/iEpbDrf68zcg==} + engines: {node: '>=12'} + cpu: [arm] + os: [android] + + '@esbuild/android-arm@0.25.12': + resolution: {integrity: sha512-VJ+sKvNA/GE7Ccacc9Cha7bpS8nyzVv0jdVgwNDaR4gDMC/2TTRc33Ip8qrNYUcpkOHUT5OZ0bUcNNVZQ9RLlg==} + engines: {node: '>=18'} + cpu: [arm] + os: [android] + + '@esbuild/android-x64@0.21.5': + resolution: {integrity: sha512-D7aPRUUNHRBwHxzxRvp856rjUHRFW1SdQATKXH2hqA0kAZb1hKmi02OpYRacl0TxIGz/ZmXWlbZgjwWYaCakTA==} + engines: {node: '>=12'} + cpu: [x64] + os: [android] + + '@esbuild/android-x64@0.25.12': + resolution: {integrity: sha512-5jbb+2hhDHx5phYR2By8GTWEzn6I9UqR11Kwf22iKbNpYrsmRB18aX/9ivc5cabcUiAT/wM+YIZ6SG9QO6a8kg==} + engines: {node: '>=18'} + cpu: [x64] + os: [android] + + '@esbuild/darwin-arm64@0.21.5': + resolution: {integrity: sha512-DwqXqZyuk5AiWWf3UfLiRDJ5EDd49zg6O9wclZ7kUMv2WRFr4HKjXp/5t8JZ11QbQfUS6/cRCKGwYhtNAY88kQ==} + engines: {node: '>=12'} + cpu: [arm64] + os: [darwin] + + '@esbuild/darwin-arm64@0.25.12': + resolution: {integrity: sha512-N3zl+lxHCifgIlcMUP5016ESkeQjLj/959RxxNYIthIg+CQHInujFuXeWbWMgnTo4cp5XVHqFPmpyu9J65C1Yg==} + engines: {node: '>=18'} + cpu: [arm64] + os: [darwin] + + '@esbuild/darwin-x64@0.21.5': + resolution: {integrity: sha512-se/JjF8NlmKVG4kNIuyWMV/22ZaerB+qaSi5MdrXtd6R08kvs2qCN4C09miupktDitvh8jRFflwGFBQcxZRjbw==} + engines: {node: '>=12'} + cpu: [x64] + os: [darwin] + + '@esbuild/darwin-x64@0.25.12': + resolution: {integrity: sha512-HQ9ka4Kx21qHXwtlTUVbKJOAnmG1ipXhdWTmNXiPzPfWKpXqASVcWdnf2bnL73wgjNrFXAa3yYvBSd9pzfEIpA==} + engines: {node: '>=18'} + cpu: [x64] + os: [darwin] + + '@esbuild/freebsd-arm64@0.21.5': + resolution: {integrity: sha512-5JcRxxRDUJLX8JXp/wcBCy3pENnCgBR9bN6JsY4OmhfUtIHe3ZW0mawA7+RDAcMLrMIZaf03NlQiX9DGyB8h4g==} + engines: {node: '>=12'} + cpu: [arm64] + os: [freebsd] + + '@esbuild/freebsd-arm64@0.25.12': + resolution: {integrity: sha512-gA0Bx759+7Jve03K1S0vkOu5Lg/85dou3EseOGUes8flVOGxbhDDh/iZaoek11Y8mtyKPGF3vP8XhnkDEAmzeg==} + engines: {node: '>=18'} + cpu: [arm64] + os: [freebsd] + + '@esbuild/freebsd-x64@0.21.5': + resolution: {integrity: sha512-J95kNBj1zkbMXtHVH29bBriQygMXqoVQOQYA+ISs0/2l3T9/kj42ow2mpqerRBxDJnmkUDCaQT/dfNXWX/ZZCQ==} + engines: {node: '>=12'} + cpu: [x64] + os: [freebsd] + + '@esbuild/freebsd-x64@0.25.12': + resolution: {integrity: sha512-TGbO26Yw2xsHzxtbVFGEXBFH0FRAP7gtcPE7P5yP7wGy7cXK2oO7RyOhL5NLiqTlBh47XhmIUXuGciXEqYFfBQ==} + engines: {node: '>=18'} + cpu: [x64] + os: [freebsd] + + '@esbuild/linux-arm64@0.21.5': + resolution: {integrity: sha512-ibKvmyYzKsBeX8d8I7MH/TMfWDXBF3db4qM6sy+7re0YXya+K1cem3on9XgdT2EQGMu4hQyZhan7TeQ8XkGp4Q==} + engines: {node: '>=12'} + cpu: [arm64] + os: [linux] + + '@esbuild/linux-arm64@0.25.12': + resolution: {integrity: sha512-8bwX7a8FghIgrupcxb4aUmYDLp8pX06rGh5HqDT7bB+8Rdells6mHvrFHHW2JAOPZUbnjUpKTLg6ECyzvas2AQ==} + engines: {node: '>=18'} + cpu: [arm64] + os: [linux] + + '@esbuild/linux-arm@0.21.5': + resolution: {integrity: sha512-bPb5AHZtbeNGjCKVZ9UGqGwo8EUu4cLq68E95A53KlxAPRmUyYv2D6F0uUI65XisGOL1hBP5mTronbgo+0bFcA==} + engines: {node: '>=12'} + cpu: [arm] + os: [linux] + + '@esbuild/linux-arm@0.25.12': + resolution: {integrity: sha512-lPDGyC1JPDou8kGcywY0YILzWlhhnRjdof3UlcoqYmS9El818LLfJJc3PXXgZHrHCAKs/Z2SeZtDJr5MrkxtOw==} + engines: {node: '>=18'} + cpu: [arm] + os: [linux] + + '@esbuild/linux-ia32@0.21.5': + resolution: {integrity: sha512-YvjXDqLRqPDl2dvRODYmmhz4rPeVKYvppfGYKSNGdyZkA01046pLWyRKKI3ax8fbJoK5QbxblURkwK/MWY18Tg==} + engines: {node: '>=12'} + cpu: [ia32] + os: [linux] + + '@esbuild/linux-ia32@0.25.12': + resolution: {integrity: sha512-0y9KrdVnbMM2/vG8KfU0byhUN+EFCny9+8g202gYqSSVMonbsCfLjUO+rCci7pM0WBEtz+oK/PIwHkzxkyharA==} + engines: {node: '>=18'} + cpu: [ia32] + os: [linux] + + '@esbuild/linux-loong64@0.21.5': + resolution: {integrity: sha512-uHf1BmMG8qEvzdrzAqg2SIG/02+4/DHB6a9Kbya0XDvwDEKCoC8ZRWI5JJvNdUjtciBGFQ5PuBlpEOXQj+JQSg==} + engines: {node: '>=12'} + cpu: [loong64] + os: [linux] + + '@esbuild/linux-loong64@0.25.12': + resolution: {integrity: sha512-h///Lr5a9rib/v1GGqXVGzjL4TMvVTv+s1DPoxQdz7l/AYv6LDSxdIwzxkrPW438oUXiDtwM10o9PmwS/6Z0Ng==} + engines: {node: '>=18'} + cpu: [loong64] + os: [linux] + + '@esbuild/linux-mips64el@0.21.5': + resolution: {integrity: sha512-IajOmO+KJK23bj52dFSNCMsz1QP1DqM6cwLUv3W1QwyxkyIWecfafnI555fvSGqEKwjMXVLokcV5ygHW5b3Jbg==} + engines: {node: '>=12'} + cpu: [mips64el] + os: [linux] + + '@esbuild/linux-mips64el@0.25.12': + resolution: {integrity: sha512-iyRrM1Pzy9GFMDLsXn1iHUm18nhKnNMWscjmp4+hpafcZjrr2WbT//d20xaGljXDBYHqRcl8HnxbX6uaA/eGVw==} + engines: {node: '>=18'} + cpu: [mips64el] + os: [linux] + + '@esbuild/linux-ppc64@0.21.5': + resolution: {integrity: sha512-1hHV/Z4OEfMwpLO8rp7CvlhBDnjsC3CttJXIhBi+5Aj5r+MBvy4egg7wCbe//hSsT+RvDAG7s81tAvpL2XAE4w==} + engines: {node: '>=12'} + cpu: [ppc64] + os: [linux] + + '@esbuild/linux-ppc64@0.25.12': + resolution: {integrity: sha512-9meM/lRXxMi5PSUqEXRCtVjEZBGwB7P/D4yT8UG/mwIdze2aV4Vo6U5gD3+RsoHXKkHCfSxZKzmDssVlRj1QQA==} + engines: {node: '>=18'} + cpu: [ppc64] + os: [linux] + + '@esbuild/linux-riscv64@0.21.5': + resolution: {integrity: sha512-2HdXDMd9GMgTGrPWnJzP2ALSokE/0O5HhTUvWIbD3YdjME8JwvSCnNGBnTThKGEB91OZhzrJ4qIIxk/SBmyDDA==} + engines: {node: '>=12'} + cpu: [riscv64] + os: [linux] + + '@esbuild/linux-riscv64@0.25.12': + resolution: {integrity: sha512-Zr7KR4hgKUpWAwb1f3o5ygT04MzqVrGEGXGLnj15YQDJErYu/BGg+wmFlIDOdJp0PmB0lLvxFIOXZgFRrdjR0w==} + engines: {node: '>=18'} + cpu: [riscv64] + os: [linux] + + '@esbuild/linux-s390x@0.21.5': + resolution: {integrity: sha512-zus5sxzqBJD3eXxwvjN1yQkRepANgxE9lgOW2qLnmr8ikMTphkjgXu1HR01K4FJg8h1kEEDAqDcZQtbrRnB41A==} + engines: {node: '>=12'} + cpu: [s390x] + os: [linux] + + '@esbuild/linux-s390x@0.25.12': + resolution: {integrity: sha512-MsKncOcgTNvdtiISc/jZs/Zf8d0cl/t3gYWX8J9ubBnVOwlk65UIEEvgBORTiljloIWnBzLs4qhzPkJcitIzIg==} + engines: {node: '>=18'} + cpu: [s390x] + os: [linux] + + '@esbuild/linux-x64@0.21.5': + resolution: {integrity: sha512-1rYdTpyv03iycF1+BhzrzQJCdOuAOtaqHTWJZCWvijKD2N5Xu0TtVC8/+1faWqcP9iBCWOmjmhoH94dH82BxPQ==} + engines: {node: '>=12'} + cpu: [x64] + os: [linux] + + '@esbuild/linux-x64@0.25.12': + resolution: {integrity: sha512-uqZMTLr/zR/ed4jIGnwSLkaHmPjOjJvnm6TVVitAa08SLS9Z0VM8wIRx7gWbJB5/J54YuIMInDquWyYvQLZkgw==} + engines: {node: '>=18'} + cpu: [x64] + os: [linux] + + '@esbuild/netbsd-arm64@0.25.12': + resolution: {integrity: sha512-xXwcTq4GhRM7J9A8Gv5boanHhRa/Q9KLVmcyXHCTaM4wKfIpWkdXiMog/KsnxzJ0A1+nD+zoecuzqPmCRyBGjg==} + engines: {node: '>=18'} + cpu: [arm64] + os: [netbsd] + + '@esbuild/netbsd-x64@0.21.5': + resolution: {integrity: sha512-Woi2MXzXjMULccIwMnLciyZH4nCIMpWQAs049KEeMvOcNADVxo0UBIQPfSmxB3CWKedngg7sWZdLvLczpe0tLg==} + engines: {node: '>=12'} + cpu: [x64] + os: [netbsd] + + '@esbuild/netbsd-x64@0.25.12': + resolution: {integrity: sha512-Ld5pTlzPy3YwGec4OuHh1aCVCRvOXdH8DgRjfDy/oumVovmuSzWfnSJg+VtakB9Cm0gxNO9BzWkj6mtO1FMXkQ==} + engines: {node: '>=18'} + cpu: [x64] + os: [netbsd] + + '@esbuild/openbsd-arm64@0.25.12': + resolution: {integrity: sha512-fF96T6KsBo/pkQI950FARU9apGNTSlZGsv1jZBAlcLL1MLjLNIWPBkj5NlSz8aAzYKg+eNqknrUJ24QBybeR5A==} + engines: {node: '>=18'} + cpu: [arm64] + os: [openbsd] + + '@esbuild/openbsd-x64@0.21.5': + resolution: {integrity: sha512-HLNNw99xsvx12lFBUwoT8EVCsSvRNDVxNpjZ7bPn947b8gJPzeHWyNVhFsaerc0n3TsbOINvRP2byTZ5LKezow==} + engines: {node: '>=12'} + cpu: [x64] + os: [openbsd] + + '@esbuild/openbsd-x64@0.25.12': + resolution: {integrity: sha512-MZyXUkZHjQxUvzK7rN8DJ3SRmrVrke8ZyRusHlP+kuwqTcfWLyqMOE3sScPPyeIXN/mDJIfGXvcMqCgYKekoQw==} + engines: {node: '>=18'} + cpu: [x64] + os: [openbsd] + + '@esbuild/openharmony-arm64@0.25.12': + resolution: {integrity: sha512-rm0YWsqUSRrjncSXGA7Zv78Nbnw4XL6/dzr20cyrQf7ZmRcsovpcRBdhD43Nuk3y7XIoW2OxMVvwuRvk9XdASg==} + engines: {node: '>=18'} + cpu: [arm64] + os: [openharmony] + + '@esbuild/sunos-x64@0.21.5': + resolution: {integrity: sha512-6+gjmFpfy0BHU5Tpptkuh8+uw3mnrvgs+dSPQXQOv3ekbordwnzTVEb4qnIvQcYXq6gzkyTnoZ9dZG+D4garKg==} + engines: {node: '>=12'} + cpu: [x64] + os: [sunos] + + '@esbuild/sunos-x64@0.25.12': + resolution: {integrity: sha512-3wGSCDyuTHQUzt0nV7bocDy72r2lI33QL3gkDNGkod22EsYl04sMf0qLb8luNKTOmgF/eDEDP5BFNwoBKH441w==} + engines: {node: '>=18'} + cpu: [x64] + os: [sunos] + + '@esbuild/win32-arm64@0.21.5': + resolution: {integrity: sha512-Z0gOTd75VvXqyq7nsl93zwahcTROgqvuAcYDUr+vOv8uHhNSKROyU961kgtCD1e95IqPKSQKH7tBTslnS3tA8A==} + engines: {node: '>=12'} + cpu: [arm64] + os: [win32] + + '@esbuild/win32-arm64@0.25.12': + resolution: {integrity: sha512-rMmLrur64A7+DKlnSuwqUdRKyd3UE7oPJZmnljqEptesKM8wx9J8gx5u0+9Pq0fQQW8vqeKebwNXdfOyP+8Bsg==} + engines: {node: '>=18'} + cpu: [arm64] + os: [win32] + + '@esbuild/win32-ia32@0.21.5': + resolution: {integrity: sha512-SWXFF1CL2RVNMaVs+BBClwtfZSvDgtL//G/smwAc5oVK/UPu2Gu9tIaRgFmYFFKrmg3SyAjSrElf0TiJ1v8fYA==} + engines: {node: '>=12'} + cpu: [ia32] + os: [win32] + + '@esbuild/win32-ia32@0.25.12': + resolution: {integrity: sha512-HkqnmmBoCbCwxUKKNPBixiWDGCpQGVsrQfJoVGYLPT41XWF8lHuE5N6WhVia2n4o5QK5M4tYr21827fNhi4byQ==} + engines: {node: '>=18'} + cpu: [ia32] + os: [win32] + + '@esbuild/win32-x64@0.21.5': + resolution: {integrity: sha512-tQd/1efJuzPC6rCFwEvLtci/xNFcTZknmXs98FYDfGE4wP9ClFV98nyKrzJKVPMhdDnjzLhdUyMX4PsQAPjwIw==} + engines: {node: '>=12'} + cpu: [x64] + os: [win32] + + '@esbuild/win32-x64@0.25.12': + resolution: {integrity: sha512-alJC0uCZpTFrSL0CCDjcgleBXPnCrEAhTBILpeAp7M/OFgoqtAetfBzX0xM00MUsVVPpVjlPuMbREqnZCXaTnA==} + engines: {node: '>=18'} + cpu: [x64] + os: [win32] + + '@jridgewell/gen-mapping@0.3.13': + resolution: {integrity: sha512-2kkt/7niJ6MgEPxF0bYdQ6etZaA+fQvDcLKckhy1yIQOzaoKjBBjSj63/aLVjYE3qhRt5dvM+uUyfCg6UKCBbA==} + + '@jridgewell/remapping@2.3.5': + resolution: {integrity: sha512-LI9u/+laYG4Ds1TDKSJW2YPrIlcVYOwi2fUC6xB43lueCjgxV4lffOCZCtYFiH6TNOX+tQKXx97T4IKHbhyHEQ==} + + '@jridgewell/resolve-uri@3.1.2': + resolution: {integrity: sha512-bRISgCIjP20/tbWSPWMEi54QVPRZExkuD9lJL+UIxUKtwVJA8wW1Trb1jMs1RFXo1CBTNZ/5hpC9QvmKWdopKw==} + engines: {node: '>=6.0.0'} + + '@jridgewell/sourcemap-codec@1.5.5': + resolution: {integrity: sha512-cYQ9310grqxueWbl+WuIUIaiUaDcj7WOq5fVhEljNVgRfOUhY9fy2zTvfoqWsnebh8Sl70VScFbICvJnLKB0Og==} + + '@jridgewell/trace-mapping@0.3.31': + resolution: {integrity: sha512-zzNR+SdQSDJzc8joaeP8QQoCQr8NuYx2dIIytl1QeBEZHJ9uW6hebsrYgbz8hJwUQao3TWCMtmfV8Nu1twOLAw==} + + '@pixi/colord@2.9.6': + resolution: {integrity: sha512-nezytU2pw587fQstUu1AsJZDVEynjskwOL+kibwcdxsMBFqPsFFNA7xl0ii/gXuDi6M0xj3mfRJj8pBSc2jCfA==} + + '@polka/url@1.0.0-next.29': + resolution: {integrity: sha512-wwQAWhWSuHaag8c4q/KN/vCoeOJYshAIvMQwD4GpSb3OiZklFfvAgmj0VCBBImRpuF/aFgIRzllXlVX93Jevww==} + + '@rolldown/pluginutils@1.0.0-beta.27': + resolution: {integrity: sha512-+d0F4MKMCbeVUJwG96uQ4SgAznZNSq93I3V+9NHA4OpvqG8mRCpGdKmK8l/dl02h2CCDHwW2FqilnTyDcAnqjA==} + + '@rollup/rollup-android-arm-eabi@4.60.1': + resolution: {integrity: sha512-d6FinEBLdIiK+1uACUttJKfgZREXrF0Qc2SmLII7W2AD8FfiZ9Wjd+rD/iRuf5s5dWrr1GgwXCvPqOuDquOowA==} + cpu: [arm] + os: [android] + + '@rollup/rollup-android-arm64@4.60.1': + resolution: {integrity: sha512-YjG/EwIDvvYI1YvYbHvDz/BYHtkY4ygUIXHnTdLhG+hKIQFBiosfWiACWortsKPKU/+dUwQQCKQM3qrDe8c9BA==} + cpu: [arm64] + os: [android] + + '@rollup/rollup-darwin-arm64@4.60.1': + resolution: {integrity: sha512-mjCpF7GmkRtSJwon+Rq1N8+pI+8l7w5g9Z3vWj4T7abguC4Czwi3Yu/pFaLvA3TTeMVjnu3ctigusqWUfjZzvw==} + cpu: [arm64] + os: [darwin] + + '@rollup/rollup-darwin-x64@4.60.1': + resolution: {integrity: sha512-haZ7hJ1JT4e9hqkoT9R/19XW2QKqjfJVv+i5AGg57S+nLk9lQnJ1F/eZloRO3o9Scy9CM3wQ9l+dkXtcBgN5Ew==} + cpu: [x64] + os: [darwin] + + '@rollup/rollup-freebsd-arm64@4.60.1': + resolution: {integrity: sha512-czw90wpQq3ZsAVBlinZjAYTKduOjTywlG7fEeWKUA7oCmpA8xdTkxZZlwNJKWqILlq0wehoZcJYfBvOyhPTQ6w==} + cpu: [arm64] + os: [freebsd] + + '@rollup/rollup-freebsd-x64@4.60.1': + resolution: {integrity: sha512-KVB2rqsxTHuBtfOeySEyzEOB7ltlB/ux38iu2rBQzkjbwRVlkhAGIEDiiYnO2kFOkJp+Z7pUXKyrRRFuFUKt+g==} + cpu: [x64] + os: [freebsd] + + '@rollup/rollup-linux-arm-gnueabihf@4.60.1': + resolution: {integrity: sha512-L+34Qqil+v5uC0zEubW7uByo78WOCIrBvci69E7sFASRl0X7b/MB6Cqd1lky/CtcSVTydWa2WZwFuWexjS5o6g==} + cpu: [arm] + os: [linux] + libc: [glibc] + + '@rollup/rollup-linux-arm-musleabihf@4.60.1': + resolution: {integrity: sha512-n83O8rt4v34hgFzlkb1ycniJh7IR5RCIqt6mz1VRJD6pmhRi0CXdmfnLu9dIUS6buzh60IvACM842Ffb3xd6Gg==} + cpu: [arm] + os: [linux] + libc: [musl] + + '@rollup/rollup-linux-arm64-gnu@4.60.1': + resolution: {integrity: sha512-Nql7sTeAzhTAja3QXeAI48+/+GjBJ+QmAH13snn0AJSNL50JsDqotyudHyMbO2RbJkskbMbFJfIJKWA6R1LCJQ==} + cpu: [arm64] + os: [linux] + libc: [glibc] + + '@rollup/rollup-linux-arm64-musl@4.60.1': + resolution: {integrity: sha512-+pUymDhd0ys9GcKZPPWlFiZ67sTWV5UU6zOJat02M1+PiuSGDziyRuI/pPue3hoUwm2uGfxdL+trT6Z9rxnlMA==} + cpu: [arm64] + os: [linux] + libc: [musl] + + '@rollup/rollup-linux-loong64-gnu@4.60.1': + resolution: {integrity: sha512-VSvgvQeIcsEvY4bKDHEDWcpW4Yw7BtlKG1GUT4FzBUlEKQK0rWHYBqQt6Fm2taXS+1bXvJT6kICu5ZwqKCnvlQ==} + cpu: [loong64] + os: [linux] + libc: [glibc] + + '@rollup/rollup-linux-loong64-musl@4.60.1': + resolution: {integrity: sha512-4LqhUomJqwe641gsPp6xLfhqWMbQV04KtPp7/dIp0nzPxAkNY1AbwL5W0MQpcalLYk07vaW9Kp1PBhdpZYYcEw==} + cpu: [loong64] + os: [linux] + libc: [musl] + + '@rollup/rollup-linux-ppc64-gnu@4.60.1': + resolution: {integrity: sha512-tLQQ9aPvkBxOc/EUT6j3pyeMD6Hb8QF2BTBnCQWP/uu1lhc9AIrIjKnLYMEroIz/JvtGYgI9dF3AxHZNaEH0rw==} + cpu: [ppc64] + os: [linux] + libc: [glibc] + + '@rollup/rollup-linux-ppc64-musl@4.60.1': + resolution: {integrity: sha512-RMxFhJwc9fSXP6PqmAz4cbv3kAyvD1etJFjTx4ONqFP9DkTkXsAMU4v3Vyc5BgzC+anz7nS/9tp4obsKfqkDHg==} + cpu: [ppc64] + os: [linux] + libc: [musl] + + '@rollup/rollup-linux-riscv64-gnu@4.60.1': + resolution: {integrity: sha512-QKgFl+Yc1eEk6MmOBfRHYF6lTxiiiV3/z/BRrbSiW2I7AFTXoBFvdMEyglohPj//2mZS4hDOqeB0H1ACh3sBbg==} + cpu: [riscv64] + os: [linux] + libc: [glibc] + + '@rollup/rollup-linux-riscv64-musl@4.60.1': + resolution: {integrity: sha512-RAjXjP/8c6ZtzatZcA1RaQr6O1TRhzC+adn8YZDnChliZHviqIjmvFwHcxi4JKPSDAt6Uhf/7vqcBzQJy0PDJg==} + cpu: [riscv64] + os: [linux] + libc: [musl] + + '@rollup/rollup-linux-s390x-gnu@4.60.1': + resolution: {integrity: sha512-wcuocpaOlaL1COBYiA89O6yfjlp3RwKDeTIA0hM7OpmhR1Bjo9j31G1uQVpDlTvwxGn2nQs65fBFL5UFd76FcQ==} + cpu: [s390x] + os: [linux] + libc: [glibc] + + '@rollup/rollup-linux-x64-gnu@4.60.1': + resolution: {integrity: sha512-77PpsFQUCOiZR9+LQEFg9GClyfkNXj1MP6wRnzYs0EeWbPcHs02AXu4xuUbM1zhwn3wqaizle3AEYg5aeoohhg==} + cpu: [x64] + os: [linux] + libc: [glibc] + + '@rollup/rollup-linux-x64-musl@4.60.1': + resolution: {integrity: sha512-5cIATbk5vynAjqqmyBjlciMJl1+R/CwX9oLk/EyiFXDWd95KpHdrOJT//rnUl4cUcskrd0jCCw3wpZnhIHdD9w==} + cpu: [x64] + os: [linux] + libc: [musl] + + '@rollup/rollup-openbsd-x64@4.60.1': + resolution: {integrity: sha512-cl0w09WsCi17mcmWqqglez9Gk8isgeWvoUZ3WiJFYSR3zjBQc2J5/ihSjpl+VLjPqjQ/1hJRcqBfLjssREQILw==} + cpu: [x64] + os: [openbsd] + + '@rollup/rollup-openharmony-arm64@4.60.1': + resolution: {integrity: sha512-4Cv23ZrONRbNtbZa37mLSueXUCtN7MXccChtKpUnQNgF010rjrjfHx3QxkS2PI7LqGT5xXyYs1a7LbzAwT0iCA==} + cpu: [arm64] + os: [openharmony] + + '@rollup/rollup-win32-arm64-msvc@4.60.1': + resolution: {integrity: sha512-i1okWYkA4FJICtr7KpYzFpRTHgy5jdDbZiWfvny21iIKky5YExiDXP+zbXzm3dUcFpkEeYNHgQ5fuG236JPq0g==} + cpu: [arm64] + os: [win32] + + '@rollup/rollup-win32-ia32-msvc@4.60.1': + resolution: {integrity: sha512-u09m3CuwLzShA0EYKMNiFgcjjzwqtUMLmuCJLeZWjjOYA3IT2Di09KaxGBTP9xVztWyIWjVdsB2E9goMjZvTQg==} + cpu: [ia32] + os: [win32] + + '@rollup/rollup-win32-x64-gnu@4.60.1': + resolution: {integrity: sha512-k+600V9Zl1CM7eZxJgMyTUzmrmhB/0XZnF4pRypKAlAgxmedUA+1v9R+XOFv56W4SlHEzfeMtzujLJD22Uz5zg==} + cpu: [x64] + os: [win32] + + '@rollup/rollup-win32-x64-msvc@4.60.1': + resolution: {integrity: sha512-lWMnixq/QzxyhTV6NjQJ4SFo1J6PvOX8vUx5Wb4bBPsEb+8xZ89Bz6kOXpfXj9ak9AHTQVQzlgzBEc1SyM27xQ==} + cpu: [x64] + os: [win32] + + '@tailwindcss/node@4.2.2': + resolution: {integrity: sha512-pXS+wJ2gZpVXqFaUEjojq7jzMpTGf8rU6ipJz5ovJV6PUGmlJ+jvIwGrzdHdQ80Sg+wmQxUFuoW1UAAwHNEdFA==} + + '@tailwindcss/oxide-android-arm64@4.2.2': + resolution: {integrity: sha512-dXGR1n+P3B6748jZO/SvHZq7qBOqqzQ+yFrXpoOWWALWndF9MoSKAT3Q0fYgAzYzGhxNYOoysRvYlpixRBBoDg==} + engines: {node: '>= 20'} + cpu: [arm64] + os: [android] + + '@tailwindcss/oxide-darwin-arm64@4.2.2': + resolution: {integrity: sha512-iq9Qjr6knfMpZHj55/37ouZeykwbDqF21gPFtfnhCCKGDcPI/21FKC9XdMO/XyBM7qKORx6UIhGgg6jLl7BZlg==} + engines: {node: '>= 20'} + cpu: [arm64] + os: [darwin] + + '@tailwindcss/oxide-darwin-x64@4.2.2': + resolution: {integrity: sha512-BlR+2c3nzc8f2G639LpL89YY4bdcIdUmiOOkv2GQv4/4M0vJlpXEa0JXNHhCHU7VWOKWT/CjqHdTP8aUuDJkuw==} + engines: {node: '>= 20'} + cpu: [x64] + os: [darwin] + + '@tailwindcss/oxide-freebsd-x64@4.2.2': + resolution: {integrity: sha512-YUqUgrGMSu2CDO82hzlQ5qSb5xmx3RUrke/QgnoEx7KvmRJHQuZHZmZTLSuuHwFf0DJPybFMXMYf+WJdxHy/nQ==} + engines: {node: '>= 20'} + cpu: [x64] + os: [freebsd] + + '@tailwindcss/oxide-linux-arm-gnueabihf@4.2.2': + resolution: {integrity: sha512-FPdhvsW6g06T9BWT0qTwiVZYE2WIFo2dY5aCSpjG/S/u1tby+wXoslXS0kl3/KXnULlLr1E3NPRRw0g7t2kgaQ==} + engines: {node: '>= 20'} + cpu: [arm] + os: [linux] + + '@tailwindcss/oxide-linux-arm64-gnu@4.2.2': + resolution: {integrity: sha512-4og1V+ftEPXGttOO7eCmW7VICmzzJWgMx+QXAJRAhjrSjumCwWqMfkDrNu1LXEQzNAwz28NCUpucgQPrR4S2yw==} + engines: {node: '>= 20'} + cpu: [arm64] + os: [linux] + libc: [glibc] + + '@tailwindcss/oxide-linux-arm64-musl@4.2.2': + resolution: {integrity: sha512-oCfG/mS+/+XRlwNjnsNLVwnMWYH7tn/kYPsNPh+JSOMlnt93mYNCKHYzylRhI51X+TbR+ufNhhKKzm6QkqX8ag==} + engines: {node: '>= 20'} + cpu: [arm64] + os: [linux] + libc: [musl] + + '@tailwindcss/oxide-linux-x64-gnu@4.2.2': + resolution: {integrity: sha512-rTAGAkDgqbXHNp/xW0iugLVmX62wOp2PoE39BTCGKjv3Iocf6AFbRP/wZT/kuCxC9QBh9Pu8XPkv/zCZB2mcMg==} + engines: {node: '>= 20'} + cpu: [x64] + os: [linux] + libc: [glibc] + + '@tailwindcss/oxide-linux-x64-musl@4.2.2': + resolution: {integrity: sha512-XW3t3qwbIwiSyRCggeO2zxe3KWaEbM0/kW9e8+0XpBgyKU4ATYzcVSMKteZJ1iukJ3HgHBjbg9P5YPRCVUxlnQ==} + engines: {node: '>= 20'} + cpu: [x64] + os: [linux] + libc: [musl] + + '@tailwindcss/oxide-wasm32-wasi@4.2.2': + resolution: {integrity: sha512-eKSztKsmEsn1O5lJ4ZAfyn41NfG7vzCg496YiGtMDV86jz1q/irhms5O0VrY6ZwTUkFy/EKG3RfWgxSI3VbZ8Q==} + engines: {node: '>=14.0.0'} + cpu: [wasm32] + bundledDependencies: + - '@napi-rs/wasm-runtime' + - '@emnapi/core' + - '@emnapi/runtime' + - '@tybys/wasm-util' + - '@emnapi/wasi-threads' + - tslib + + '@tailwindcss/oxide-win32-arm64-msvc@4.2.2': + resolution: {integrity: sha512-qPmaQM4iKu5mxpsrWZMOZRgZv1tOZpUm+zdhhQP0VhJfyGGO3aUKdbh3gDZc/dPLQwW4eSqWGrrcWNBZWUWaXQ==} + engines: {node: '>= 20'} + cpu: [arm64] + os: [win32] + + '@tailwindcss/oxide-win32-x64-msvc@4.2.2': + resolution: {integrity: sha512-1T/37VvI7WyH66b+vqHj/cLwnCxt7Qt3WFu5Q8hk65aOvlwAhs7rAp1VkulBJw/N4tMirXjVnylTR72uI0HGcA==} + engines: {node: '>= 20'} + cpu: [x64] + os: [win32] + + '@tailwindcss/oxide@4.2.2': + resolution: {integrity: sha512-qEUA07+E5kehxYp9BVMpq9E8vnJuBHfJEC0vPC5e7iL/hw7HR61aDKoVoKzrG+QKp56vhNZe4qwkRmMC0zDLvg==} + engines: {node: '>= 20'} + + '@tailwindcss/vite@4.2.2': + resolution: {integrity: sha512-mEiF5HO1QqCLXoNEfXVA1Tzo+cYsrqV7w9Juj2wdUFyW07JRenqMG225MvPwr3ZD9N1bFQj46X7r33iHxLUW0w==} + peerDependencies: + vite: ^5.2.0 || ^6 || ^7 || ^8 + + '@tonejs/midi@2.0.28': + resolution: {integrity: sha512-RII6YpInPsOZ5t3Si/20QKpNqB1lZ2OCFJSOzJxz38YdY/3zqDr3uaml4JuCWkdixuPqP1/TBnXzhQ39csyoVg==} + + '@types/babel__core@7.20.5': + resolution: {integrity: sha512-qoQprZvz5wQFJwMDqeseRXWv3rqMvhgpbXFfVyWhbx9X47POIA6i/+dXefEmZKoAgOaTdaIgNSMqMIU61yRyzA==} + + '@types/babel__generator@7.27.0': + resolution: {integrity: sha512-ufFd2Xi92OAVPYsy+P4n7/U7e68fex0+Ee8gSG9KX7eo084CWiQ4sdxktvdl0bOPupXtVJPY19zk6EwWqUQ8lg==} + + '@types/babel__template@7.4.4': + resolution: {integrity: sha512-h/NUaSyG5EyxBIp8YRxo4RMe2/qQgvyowRwVMzhYhBCONbW8PUsg4lkFMrhgZhUe5z3L3MiLDuvyJ/CaPa2A8A==} + + '@types/babel__traverse@7.28.0': + resolution: {integrity: sha512-8PvcXf70gTDZBgt9ptxJ8elBeBjcLOAcOtoO/mPJjtji1+CdGbHgm77om1GrsPxsiE+uXIpNSK64UYaIwQXd4Q==} + + '@types/earcut@3.0.0': + resolution: {integrity: sha512-k/9fOUGO39yd2sCjrbAJvGDEQvRwRnQIZlBz43roGwUZo5SHAmyVvSFyaVVZkicRVCaDXPKlbxrUcBuJoSWunQ==} + + '@types/estree@1.0.8': + resolution: {integrity: sha512-dWHzHa2WqEXI/O1E9OjrocMTKJl2mSrEolh1Iomrv6U+JuNwaHXsXx9bLu5gG7BUWFIN0skIQJQ/L1rIex4X6w==} + + '@types/react-dom@19.2.3': + resolution: {integrity: sha512-jp2L/eY6fn+KgVVQAOqYItbF0VY/YApe5Mz2F0aykSO8gx31bYCZyvSeYxCHKvzHG5eZjc+zyaS5BrBWya2+kQ==} + peerDependencies: + '@types/react': ^19.2.0 + + '@types/react@19.2.14': + resolution: {integrity: sha512-ilcTH/UniCkMdtexkoCN0bI7pMcJDvmQFPvuPvmEaYA/NSfFTAgdUSLAoVjaRJm7+6PvcM+q1zYOwS4wTYMF9w==} + + '@vitejs/plugin-react@4.7.0': + resolution: {integrity: sha512-gUu9hwfWvvEDBBmgtAowQCojwZmJ5mcLn3aufeCsitijs3+f2NsrPtlAWIR6OPiqljl96GVCUbLe0HyqIpVaoA==} + engines: {node: ^14.18.0 || >=16.0.0} + peerDependencies: + vite: ^4.2.0 || ^5.0.0 || ^6.0.0 || ^7.0.0 + + '@vitest/expect@2.1.9': + resolution: {integrity: sha512-UJCIkTBenHeKT1TTlKMJWy1laZewsRIzYighyYiJKZreqtdxSos/S1t+ktRMQWu2CKqaarrkeszJx1cgC5tGZw==} + + '@vitest/mocker@2.1.9': + resolution: {integrity: sha512-tVL6uJgoUdi6icpxmdrn5YNo3g3Dxv+IHJBr0GXHaEdTcw3F+cPKnsXFhli6nO+f/6SDKPHEK1UN+k+TQv0Ehg==} + peerDependencies: + msw: ^2.4.9 + vite: ^5.0.0 + peerDependenciesMeta: + msw: + optional: true + vite: + optional: true + + '@vitest/pretty-format@2.1.9': + resolution: {integrity: sha512-KhRIdGV2U9HOUzxfiHmY8IFHTdqtOhIzCpd8WRdJiE7D/HUcZVD0EgQCVjm+Q9gkUXWgBvMmTtZgIG48wq7sOQ==} + + '@vitest/runner@2.1.9': + resolution: {integrity: sha512-ZXSSqTFIrzduD63btIfEyOmNcBmQvgOVsPNPe0jYtESiXkhd8u2erDLnMxmGrDCwHCCHE7hxwRDCT3pt0esT4g==} + + '@vitest/snapshot@2.1.9': + resolution: {integrity: sha512-oBO82rEjsxLNJincVhLhaxxZdEtV0EFHMK5Kmx5sJ6H9L183dHECjiefOAdnqpIgT5eZwT04PoggUnW88vOBNQ==} + + '@vitest/spy@2.1.9': + resolution: {integrity: sha512-E1B35FwzXXTs9FHNK6bDszs7mtydNi5MIfUWpceJ8Xbfb1gBMscAnwLbEu+B44ed6W3XjL9/ehLPHR1fkf1KLQ==} + + '@vitest/ui@2.1.9': + resolution: {integrity: sha512-izzd2zmnk8Nl5ECYkW27328RbQ1nKvkm6Bb5DAaz1Gk59EbLkiCMa6OLT0NoaAYTjOFS6N+SMYW1nh4/9ljPiw==} + peerDependencies: + vitest: 2.1.9 + + '@vitest/utils@2.1.9': + resolution: {integrity: sha512-v0psaMSkNJ3A2NMrUEHFRzJtDPFn+/VWZ5WxImB21T9fjucJRmS7xCS3ppEnARb9y11OAzaD+P2Ps+b+BGX5iQ==} + + '@webgpu/types@0.1.69': + resolution: {integrity: sha512-RPmm6kgRbI8e98zSD3RVACvnuktIja5+yLgDAkTmxLr90BEwdTXRQWNLF3ETTTyH/8mKhznZuN5AveXYFEsMGQ==} + + '@xmldom/xmldom@0.8.13': + resolution: {integrity: sha512-KRYzxepc14G/CEpEGc3Yn+JKaAeT63smlDr+vjB8jRfgTBBI9wRj/nkQEO+ucV8p8I9bfKLWp37uHgFrbntPvw==} + engines: {node: '>=10.0.0'} + + ansi-regex@5.0.1: + resolution: {integrity: sha512-quJQXlTSUGL2LH9SUXo8VwsY4soanhgo6LNSm84E1LBcE8s3O0wpdiRzyR9z/ZZJMlMWv37qOOb9pdJlMUEKFQ==} + engines: {node: '>=8'} + + ansi-styles@4.3.0: + resolution: {integrity: sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==} + engines: {node: '>=8'} + + array-flatten@3.0.0: + resolution: {integrity: sha512-zPMVc3ZYlGLNk4mpK1NzP2wg0ml9t7fUgDsayR5Y5rSzxQilzR9FGu/EH2jQOcKSAeAfWeylyW8juy3OkWRvNA==} + + assertion-error@2.0.1: + resolution: {integrity: sha512-Izi8RQcffqCeNVgFigKli1ssklIbpHnCYc6AknXGYoB6grJqyeby7jv12JUQgmTAnIDnbck1uxksT4dzN3PWBA==} + engines: {node: '>=12'} + + automation-events@7.1.17: + resolution: {integrity: sha512-L9MTEpShvoOrFETgB9PMQ4cHq1Foe3p53QFKrefGsgSzlRBORzRi0cC81tMYAgN71W30yYEt5cDZnWZvJKjLoQ==} + engines: {node: '>=18.2.0'} + + baseline-browser-mapping@2.10.18: + resolution: {integrity: sha512-VSnGQAOLtP5mib/DPyg2/t+Tlv65NTBz83BJBJvmLVHHuKJVaDOBvJJykiT5TR++em5nfAySPccDZDa4oSrn8A==} + engines: {node: '>=6.0.0'} + hasBin: true + + browserslist@4.28.2: + resolution: {integrity: sha512-48xSriZYYg+8qXna9kwqjIVzuQxi+KYWp2+5nCYnYKPTr0LvD89Jqk2Or5ogxz0NUMfIjhh2lIUX/LyX9B4oIg==} + engines: {node: ^6 || ^7 || ^8 || ^9 || ^10 || ^11 || ^12 || >=13.7} + hasBin: true + + cac@6.7.14: + resolution: {integrity: sha512-b6Ilus+c3RrdDk+JhLKUAQfzzgLEPy6wcXqS7f/xe1EETvsDP6GORG7SFuOs6cID5YkqchW/LXZbX5bc8j7ZcQ==} + engines: {node: '>=8'} + + caniuse-lite@1.0.30001787: + resolution: {integrity: sha512-mNcrMN9KeI68u7muanUpEejSLghOKlVhRqS/Za2IeyGllJ9I9otGpR9g3nsw7n4W378TE/LyIteA0+/FOZm4Kg==} + + chai@5.3.3: + resolution: {integrity: sha512-4zNhdJD/iOjSH0A05ea+Ke6MU5mmpQcbQsSOkgdaUMJ9zTlDTD/GYlwohmIE2u0gaxHYiVHEn1Fw9mZ/ktJWgw==} + engines: {node: '>=18'} + + chalk@4.1.2: + resolution: {integrity: sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==} + engines: {node: '>=10'} + + check-error@2.1.3: + resolution: {integrity: sha512-PAJdDJusoxnwm1VwW07VWwUN1sl7smmC3OKggvndJFadxxDRyFJBX/ggnu/KE4kQAB7a3Dp8f/YXC1FlUprWmA==} + engines: {node: '>= 16'} + + cliui@8.0.1: + resolution: {integrity: sha512-BSeNnyus75C4//NQ9gQt1/csTXyo/8Sb+afLAkzAptFuMsod9HFokGNudZpi/oQV73hnVK+sR+5PVRMd+Dr7YQ==} + engines: {node: '>=12'} + + color-convert@2.0.1: + resolution: {integrity: sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==} + engines: {node: '>=7.0.0'} + + color-name@1.1.4: + resolution: {integrity: sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==} + + concurrently@9.2.1: + resolution: {integrity: sha512-fsfrO0MxV64Znoy8/l1vVIjjHa29SZyyqPgQBwhiDcaW8wJc2W3XWVOGx4M3oJBnv/zdUZIIp1gDeS98GzP8Ng==} + engines: {node: '>=18'} + hasBin: true + + convert-source-map@2.0.0: + resolution: {integrity: sha512-Kvp459HrV2FEJ1CAsi1Ku+MY3kasH19TFykTz2xWmMeq6bk2NU3XXvfJ+Q61m0xktWwt+1HSYf3JZsTms3aRJg==} + + csstype@3.2.3: + resolution: {integrity: sha512-z1HGKcYy2xA8AGQfwrn0PAy+PB7X/GSj3UVJW9qKyn43xWa+gl5nXmU4qqLMRzWVLFC8KusUX8T/0kCiOYpAIQ==} + + debug@4.4.3: + resolution: {integrity: sha512-RGwwWnwQvkVfavKVt22FGLw+xYSdzARwm0ru6DhTVA3umU5hZc28V3kO4stgYryrTlLpuvgI9GiijltAjNbcqA==} + engines: {node: '>=6.0'} + peerDependencies: + supports-color: '*' + peerDependenciesMeta: + supports-color: + optional: true + + deep-eql@5.0.2: + resolution: {integrity: sha512-h5k/5U50IJJFpzfL6nO9jaaumfjO/f2NjK/oYB2Djzm4p9L+3T9qWpZqZ2hAbLPuuYq9wrU08WQyBTL5GbPk5Q==} + engines: {node: '>=6'} + + detect-libc@2.1.2: + resolution: {integrity: sha512-Btj2BOOO83o3WyH59e8MgXsxEQVcarkUOpEYrubB0urwnN10yQ364rsiByU11nZlqWYZm05i/of7io4mzihBtQ==} + engines: {node: '>=8'} + + djipevents@2.0.7: + resolution: {integrity: sha512-KNFYaU85imxOCKOUsIR70Iz9E19r96/X7LSH+u0tSoZdpWcBdzoqtTsU+wuLhc6GMpSFob+KInkZAbfKi01Bjg==} + + earcut@3.0.2: + resolution: {integrity: sha512-X7hshQbLyMJ/3RPhyObLARM2sNxxmRALLKx1+NVFFnQ9gKzmCrxm9+uLIAdBcvc8FNLpctqlQ2V6AE92Ol9UDQ==} + + electron-to-chromium@1.5.335: + resolution: {integrity: sha512-q9n5T4BR4Xwa2cwbrwcsDJtHD/enpQ5S1xF1IAtdqf5AAgqDFmR/aakqH3ChFdqd/QXJhS3rnnXFtexU7rax6Q==} + + emoji-regex@8.0.0: + resolution: {integrity: sha512-MSjYzcWNOA0ewAHpz0MxpYFvwg6yjy1NG3xteoqz644VCo/RPgnr1/GGt+ic3iJTzQ8Eu3TdM14SawnVUmGE6A==} + + enhanced-resolve@5.20.1: + resolution: {integrity: sha512-Qohcme7V1inbAfvjItgw0EaxVX5q2rdVEZHRBrEQdRZTssLDGsL8Lwrznl8oQ/6kuTJONLaDcGjkNP247XEhcA==} + engines: {node: '>=10.13.0'} + + es-module-lexer@1.7.0: + resolution: {integrity: sha512-jEQoCwk8hyb2AZziIOLhDqpm5+2ww5uIE6lkO/6jcOCusfk6LhMHpXXfBLXTZ7Ydyt0j4VoUQv6uGNYbdW+kBA==} + + esbuild@0.21.5: + resolution: {integrity: sha512-mg3OPMV4hXywwpoDxu3Qda5xCKQi+vCTZq8S9J/EpkhB2HzKXq4SNFZE3+NK93JYxc8VMSep+lOUSC/RVKaBqw==} + engines: {node: '>=12'} + hasBin: true + + esbuild@0.25.12: + resolution: {integrity: sha512-bbPBYYrtZbkt6Os6FiTLCTFxvq4tt3JKall1vRwshA3fdVztsLAatFaZobhkBC8/BrPetoa0oksYoKXoG4ryJg==} + engines: {node: '>=18'} + hasBin: true + + escalade@3.2.0: + resolution: {integrity: sha512-WUj2qlxaQtO4g6Pq5c29GTcWGDyd8itL8zTlipgECz3JesAiiOKotd8JU6otB3PACgG6xkJUyVhboMS+bje/jA==} + engines: {node: '>=6'} + + estree-walker@3.0.3: + resolution: {integrity: sha512-7RUKfXgSMMkzt6ZuXmqapOurLGPPfgj6l9uRZ7lRGolvk0y2yocc35LdcxKC5PQZdn2DMqioAQ2NoWcrTKmm6g==} + + eventemitter3@5.0.4: + resolution: {integrity: sha512-mlsTRyGaPBjPedk6Bvw+aqbsXDtoAyAzm5MO7JgU+yVRyMQ5O8bD4Kcci7BS85f93veegeCPkL8R4GLClnjLFw==} + + expect-type@1.3.0: + resolution: {integrity: sha512-knvyeauYhqjOYvQ66MznSMs83wmHrCycNEN6Ao+2AeYEfxUIkuiVxdEa1qlGEPK+We3n0THiDciYSsCcgW/DoA==} + engines: {node: '>=12.0.0'} + + fdir@6.5.0: + resolution: {integrity: sha512-tIbYtZbucOs0BRGqPJkshJUYdL+SDH7dVM8gjy+ERp3WAUjLEFJE+02kanyHtwjWOnwrKYBiwAmM0p4kLJAnXg==} + engines: {node: '>=12.0.0'} + peerDependencies: + picomatch: ^3 || ^4 + peerDependenciesMeta: + picomatch: + optional: true + + fflate@0.8.2: + resolution: {integrity: sha512-cPJU47OaAoCbg0pBvzsgpTPhmhqI5eJjh/JIu8tPj5q+T7iLvW/JAYUqmE7KOB4R1ZyEhzBaIQpQpardBF5z8A==} + + flatted@3.4.2: + resolution: {integrity: sha512-PjDse7RzhcPkIJwy5t7KPWQSZ9cAbzQXcafsetQoD7sOJRQlGikNbx7yZp2OotDnJyrDcbyRq3Ttb18iYOqkxA==} + + fsevents@2.3.3: + resolution: {integrity: sha512-5xoDfX+fL7faATnagmWPpbFtwh/R77WmMMqqHGS65C3vvB0YHrgF+B1YmZ3441tMj5n63k0212XNoJwzlhffQw==} + engines: {node: ^8.16.0 || ^10.6.0 || >=11.0.0} + os: [darwin] + + gensync@1.0.0-beta.2: + resolution: {integrity: sha512-3hN7NaskYvMDLQY55gnW3NQ+mesEAepTqlg+VEbj7zzqEMBVNhzcGYYeqFo/TlYz6eQiFcp1HcsCZO+nGgS8zg==} + engines: {node: '>=6.9.0'} + + get-caller-file@2.0.5: + resolution: {integrity: sha512-DyFP3BM/3YHTQOCUL/w0OZHR0lpKeGrxotcHWcqNEdnltqFwXVfhEBQ94eIo34AfQpo0rGki4cyIiftY06h2Fg==} + engines: {node: 6.* || 8.* || >= 10.*} + + gifuct-js@2.1.2: + resolution: {integrity: sha512-rI2asw77u0mGgwhV3qA+OEgYqaDn5UNqgs+Bx0FGwSpuqfYn+Ir6RQY5ENNQ8SbIiG/m5gVa7CD5RriO4f4Lsg==} + + graceful-fs@4.2.11: + resolution: {integrity: sha512-RbJ5/jmFcNNCcDV5o9eTnBLJ/HszWV0P73bc+Ff4nS/rJj+YaS6IGyiOL0VoBYX+l1Wrl3k63h/KrH+nhJ0XvQ==} + + has-flag@4.0.0: + resolution: {integrity: sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==} + engines: {node: '>=8'} + + is-fullwidth-code-point@3.0.0: + resolution: {integrity: sha512-zymm5+u+sCsSWyD9qNaejV3DFvhCKclKdizYaJUuHA83RLjb7nSuGnddCHGv0hk+KY7BMAlsWeK4Ueg6EV6XQg==} + engines: {node: '>=8'} + + ismobilejs@1.1.1: + resolution: {integrity: sha512-VaFW53yt8QO61k2WJui0dHf4SlL8lxBofUuUmwBo0ljPk0Drz2TiuDW4jo3wDcv41qy/SxrJ+VAzJ/qYqsmzRw==} + + jazz-midi@1.7.9: + resolution: {integrity: sha512-c8c4BBgwxdsIr1iVm53nadCrtH7BUlnX3V95ciK/gbvXN/ndE5+POskBalXgqlc/r9p2XUbdLTrgrC6fou5p9w==} + engines: {node: '>=10.0.0'} + + jiti@2.6.1: + resolution: {integrity: sha512-ekilCSN1jwRvIbgeg/57YFh8qQDNbwDb9xT/qu2DAHbFFZUicIl4ygVaAvzveMhMVr3LnpSKTNnwt8PoOfmKhQ==} + hasBin: true + + js-binary-schema-parser@2.0.3: + resolution: {integrity: sha512-xezGJmOb4lk/M1ZZLTR/jaBHQ4gG/lqQnJqdIv4721DMggsa1bDVlHXNeHYogaIEHD9vCRv0fcL4hMA+Coarkg==} + + js-tokens@4.0.0: + resolution: {integrity: sha512-RdJUflcE3cUzKiMqQgsCu06FPu9UdIJO0beYbPhHN4k6apgJtifcoCtT9bcxOpYBtpD2kCM6Sbzg4CausW/PKQ==} + + jsesc@3.1.0: + resolution: {integrity: sha512-/sM3dO2FOzXjKQhJuo0Q173wf2KOo8t4I8vHy6lF9poUp7bKT0/NHE8fPX23PwfhnykfqnC2xRxOnVw5XuGIaA==} + engines: {node: '>=6'} + hasBin: true + + json5@2.2.3: + resolution: {integrity: sha512-XmOWe7eyHYH14cLdVPoyg+GOH3rYX++KpzrylJwSW98t3Nk+U8XOl8FWKOgwtzdb8lXGf6zYwDUzeHMWfxasyg==} + engines: {node: '>=6'} + hasBin: true + + jzz@1.9.6: + resolution: {integrity: sha512-J7ENLhXwfm2BNDKRUrL8eKtPhUS/CtMBpiafxQHDBcOWSocLhearDKEdh+ylnZFcr5OXWTed0gj6l/txeQA9vg==} + + lightningcss-android-arm64@1.32.0: + resolution: {integrity: sha512-YK7/ClTt4kAK0vo6w3X+Pnm0D2cf2vPHbhOXdoNti1Ga0al1P4TBZhwjATvjNwLEBCnKvjJc2jQgHXH0NEwlAg==} + engines: {node: '>= 12.0.0'} + cpu: [arm64] + os: [android] + + lightningcss-darwin-arm64@1.32.0: + resolution: {integrity: sha512-RzeG9Ju5bag2Bv1/lwlVJvBE3q6TtXskdZLLCyfg5pt+HLz9BqlICO7LZM7VHNTTn/5PRhHFBSjk5lc4cmscPQ==} + engines: {node: '>= 12.0.0'} + cpu: [arm64] + os: [darwin] + + lightningcss-darwin-x64@1.32.0: + resolution: {integrity: sha512-U+QsBp2m/s2wqpUYT/6wnlagdZbtZdndSmut/NJqlCcMLTWp5muCrID+K5UJ6jqD2BFshejCYXniPDbNh73V8w==} + engines: {node: '>= 12.0.0'} + cpu: [x64] + os: [darwin] + + lightningcss-freebsd-x64@1.32.0: + resolution: {integrity: sha512-JCTigedEksZk3tHTTthnMdVfGf61Fky8Ji2E4YjUTEQX14xiy/lTzXnu1vwiZe3bYe0q+SpsSH/CTeDXK6WHig==} + engines: {node: '>= 12.0.0'} + cpu: [x64] + os: [freebsd] + + lightningcss-linux-arm-gnueabihf@1.32.0: + resolution: {integrity: sha512-x6rnnpRa2GL0zQOkt6rts3YDPzduLpWvwAF6EMhXFVZXD4tPrBkEFqzGowzCsIWsPjqSK+tyNEODUBXeeVHSkw==} + engines: {node: '>= 12.0.0'} + cpu: [arm] + os: [linux] + + lightningcss-linux-arm64-gnu@1.32.0: + resolution: {integrity: sha512-0nnMyoyOLRJXfbMOilaSRcLH3Jw5z9HDNGfT/gwCPgaDjnx0i8w7vBzFLFR1f6CMLKF8gVbebmkUN3fa/kQJpQ==} + engines: {node: '>= 12.0.0'} + cpu: [arm64] + os: [linux] + libc: [glibc] + + lightningcss-linux-arm64-musl@1.32.0: + resolution: {integrity: sha512-UpQkoenr4UJEzgVIYpI80lDFvRmPVg6oqboNHfoH4CQIfNA+HOrZ7Mo7KZP02dC6LjghPQJeBsvXhJod/wnIBg==} + engines: {node: '>= 12.0.0'} + cpu: [arm64] + os: [linux] + libc: [musl] + + lightningcss-linux-x64-gnu@1.32.0: + resolution: {integrity: sha512-V7Qr52IhZmdKPVr+Vtw8o+WLsQJYCTd8loIfpDaMRWGUZfBOYEJeyJIkqGIDMZPwPx24pUMfwSxxI8phr/MbOA==} + engines: {node: '>= 12.0.0'} + cpu: [x64] + os: [linux] + libc: [glibc] + + lightningcss-linux-x64-musl@1.32.0: + resolution: {integrity: sha512-bYcLp+Vb0awsiXg/80uCRezCYHNg1/l3mt0gzHnWV9XP1W5sKa5/TCdGWaR/zBM2PeF/HbsQv/j2URNOiVuxWg==} + engines: {node: '>= 12.0.0'} + cpu: [x64] + os: [linux] + libc: [musl] + + lightningcss-win32-arm64-msvc@1.32.0: + resolution: {integrity: sha512-8SbC8BR40pS6baCM8sbtYDSwEVQd4JlFTOlaD3gWGHfThTcABnNDBda6eTZeqbofalIJhFx0qKzgHJmcPTnGdw==} + engines: {node: '>= 12.0.0'} + cpu: [arm64] + os: [win32] + + lightningcss-win32-x64-msvc@1.32.0: + resolution: {integrity: sha512-Amq9B/SoZYdDi1kFrojnoqPLxYhQ4Wo5XiL8EVJrVsB8ARoC1PWW6VGtT0WKCemjy8aC+louJnjS7U18x3b06Q==} + engines: {node: '>= 12.0.0'} + cpu: [x64] + os: [win32] + + lightningcss@1.32.0: + resolution: {integrity: sha512-NXYBzinNrblfraPGyrbPoD19C1h9lfI/1mzgWYvXUTe414Gz/X1FD2XBZSZM7rRTrMA8JL3OtAaGifrIKhQ5yQ==} + engines: {node: '>= 12.0.0'} + + loupe@3.2.1: + resolution: {integrity: sha512-CdzqowRJCeLU72bHvWqwRBBlLcMEtIvGrlvef74kMnV2AolS9Y8xUv1I0U/MNAWMhBlKIoyuEgoJ0t/bbwHbLQ==} + + lru-cache@5.1.1: + resolution: {integrity: sha512-KpNARQA3Iwv+jTA0utUVVbrh+Jlrr1Fv0e56GGzAFOXN7dk/FviaDW8LHmK52DlcH4WP2n6gI8vN1aesBFgo9w==} + + magic-string@0.30.21: + resolution: {integrity: sha512-vd2F4YUyEXKGcLHoq+TEyCjxueSeHnFxyyjNp80yg0XV4vUhnDer/lvvlqM/arB5bXQN5K2/3oinyCRyx8T2CQ==} + + midi-file@1.2.4: + resolution: {integrity: sha512-B5SnBC6i2bwJIXTY9MElIydJwAmnKx+r5eJ1jknTLetzLflEl0GWveuBB6ACrQpecSRkOB6fhTx1PwXk2BVxnA==} + + mitt@3.0.1: + resolution: {integrity: sha512-vKivATfr97l2/QBCYAkXYDbrIWPM2IIKEl7YPhjCvKlG3kE2gm+uBo6nEXK3M5/Ffh/FLpKExzOQ3JJoJGFKBw==} + + mrmime@2.0.1: + resolution: {integrity: sha512-Y3wQdFg2Va6etvQ5I82yUhGdsKrcYox6p7FfL1LbK2J4V01F9TGlepTIhnK24t7koZibmg82KGglhA1XK5IsLQ==} + engines: {node: '>=10'} + + ms@2.1.3: + resolution: {integrity: sha512-6FlzubTLZG3J2a/NVCAleEhjzq5oxgHyaCU9yYXvcLsvoVaHJq/s5xXI6/XXP6tz7R9xAOtHnSO/tXtF3WRTlA==} + + nanoid@3.3.11: + resolution: {integrity: sha512-N8SpfPUnUp1bK+PMYW8qSWdl9U+wwNWI4QKxOYDy9JAro3WMX7p2OeVRF9v+347pnakNevPmiHhNmZ2HbFA76w==} + engines: {node: ^10 || ^12 || ^13.7 || ^14 || >=15.0.1} + hasBin: true + + node-releases@2.0.37: + resolution: {integrity: sha512-1h5gKZCF+pO/o3Iqt5Jp7wc9rH3eJJ0+nh/CIoiRwjRxde/hAHyLPXYN4V3CqKAbiZPSeJFSWHmJsbkicta0Eg==} + + parse-svg-path@0.1.2: + resolution: {integrity: sha512-JyPSBnkTJ0AI8GGJLfMXvKq42cj5c006fnLz6fXy6zfoVjJizi8BNTpu8on8ziI1cKy9d9DGNuY17Ce7wuejpQ==} + + pathe@1.1.2: + resolution: {integrity: sha512-whLdWMYL2TwI08hn8/ZqAbrVemu0LNaNNJZX73O6qaIdCTfXutsLhMkjdENX0qhsQ9uIimo4/aQOmXkoon2nDQ==} + + pathval@2.0.1: + resolution: {integrity: sha512-//nshmD55c46FuFw26xV/xFAaB5HF9Xdap7HJBBnrKdAd6/GxDBaNA1870O79+9ueg61cZLSVc+OaFlfmObYVQ==} + engines: {node: '>= 14.16'} + + picocolors@1.1.1: + resolution: {integrity: sha512-xceH2snhtb5M9liqDsmEw56le376mTZkEX/jEb/RxNFyegNul7eNslCXP9FDj/Lcu0X8KEyMceP2ntpaHrDEVA==} + + picomatch@4.0.4: + resolution: {integrity: sha512-QP88BAKvMam/3NxH6vj2o21R6MjxZUAd6nlwAS/pnGvN9IVLocLHxGYIzFhg6fUQ+5th6P4dv4eW9jX3DSIj7A==} + engines: {node: '>=12'} + + pixi.js@8.17.1: + resolution: {integrity: sha512-OB4TpZHrP5RYy+7FqmFrAc0IHRhfOoNIfF4sVeinvK3aG1r2pYrSMneJAKi9+WvGKC70Dj7GEpZ2OZGB6o/xdg==} + + postcss@8.5.9: + resolution: {integrity: sha512-7a70Nsot+EMX9fFU3064K/kdHWZqGVY+BADLyXc8Dfv+mTLLVl6JzJpPaCZ2kQL9gIJvKXSLMHhqdRRjwQeFtw==} + engines: {node: ^10 || ^12 || >=14} + + react-dom@19.2.5: + resolution: {integrity: sha512-J5bAZz+DXMMwW/wV3xzKke59Af6CHY7G4uYLN1OvBcKEsWOs4pQExj86BBKamxl/Ik5bx9whOrvBlSDfWzgSag==} + peerDependencies: + react: ^19.2.5 + + react-refresh@0.17.0: + resolution: {integrity: sha512-z6F7K9bV85EfseRCp2bzrpyQ0Gkw1uLoCel9XBVWPg/TjRj94SkJzUTGfOa4bs7iJvBWtQG0Wq7wnI0syw3EBQ==} + engines: {node: '>=0.10.0'} + + react@19.2.5: + resolution: {integrity: sha512-llUJLzz1zTUBrskt2pwZgLq59AemifIftw4aB7JxOqf1HY2FDaGDxgwpAPVzHU1kdWabH7FauP4i1oEeer2WCA==} + engines: {node: '>=0.10.0'} + + require-directory@2.1.1: + resolution: {integrity: sha512-fGxEI7+wsG9xrvdjsrlmL22OMTTiHRwAMroiEeMgq8gzoLC/PQr7RsRDSTLUg/bZAZtF+TVIkHc6/4RIKrui+Q==} + engines: {node: '>=0.10.0'} + + rollup@4.60.1: + resolution: {integrity: sha512-VmtB2rFU/GroZ4oL8+ZqXgSA38O6GR8KSIvWmEFv63pQ0G6KaBH9s07PO8XTXP4vI+3UJUEypOfjkGfmSBBR0w==} + engines: {node: '>=18.0.0', npm: '>=8.0.0'} + hasBin: true + + rxjs@7.8.2: + resolution: {integrity: sha512-dhKf903U/PQZY6boNNtAGdWbG85WAbjT/1xYoZIC7FAY0yWapOBQVsVrDl58W86//e1VpMNBtRV4MaXfdMySFA==} + + scheduler@0.27.0: + resolution: {integrity: sha512-eNv+WrVbKu1f3vbYJT/xtiF5syA5HPIMtf9IgY/nKg0sWqzAUEvqY/xm7OcZc/qafLx/iO9FgOmeSAp4v5ti/Q==} + + semver@6.3.1: + resolution: {integrity: sha512-BR7VvDCVHO+q2xBEWskxS6DJE1qRnb7DxzUrogb71CWoSficBxYsiAGd+Kl0mmq/MprG9yArRkyrQxTO6XjMzA==} + hasBin: true + + shell-quote@1.8.3: + resolution: {integrity: sha512-ObmnIF4hXNg1BqhnHmgbDETF8dLPCggZWBjkQfhZpbszZnYur5DUljTcCHii5LC3J5E0yeO/1LIMyH+UvHQgyw==} + engines: {node: '>= 0.4'} + + siginfo@2.0.0: + resolution: {integrity: sha512-ybx0WO1/8bSBLEWXZvEd7gMW3Sn3JFlW3TvX1nREbDLRNQNaeNN8WK0meBwPdAaOI7TtRRRJn/Es1zhrrCHu7g==} + + sirv@3.0.2: + resolution: {integrity: sha512-2wcC/oGxHis/BoHkkPwldgiPSYcpZK3JU28WoMVv55yHJgcZ8rlXvuG9iZggz+sU1d4bRgIGASwyWqjxu3FM0g==} + engines: {node: '>=18'} + + smplr@0.14.0: + resolution: {integrity: sha512-CLKTaAja5ZzRaX4ayqOs3H/Fl8dhhHjV6kAfW72z+zaTisvxyy3K81S+br4FoBqWY9WuBY40ejIWMdzXZWa2eA==} + engines: {node: '>=14.0.0'} + + source-map-js@1.2.1: + resolution: {integrity: sha512-UXWMKhLOwVKb728IUtQPXxfYU+usdybtUrK/8uGE8CQMvrhOpwvzDBwj0QhSL7MQc7vIsISBG8VQ8+IDQxpfQA==} + engines: {node: '>=0.10.0'} + + stackback@0.0.2: + resolution: {integrity: sha512-1XMJE5fQo1jGH6Y/7ebnwPOBEkIEnT4QF32d5R1+VXdXveM0IBMJt8zfaxX1P3QhVwrYe+576+jkANtSS2mBbw==} + + standardized-audio-context@25.3.77: + resolution: {integrity: sha512-Ki9zNz6pKcC5Pi+QPjPyVsD9GwJIJWgryji0XL9cAJXMGyn+dPOf6Qik1AHei0+UNVcc4BOCa0hWLBzlwqsW/A==} + + std-env@3.10.0: + resolution: {integrity: sha512-5GS12FdOZNliM5mAOxFRg7Ir0pWz8MdpYm6AY6VPkGpbA7ZzmbzNcBJQ0GPvvyWgcY7QAhCgf9Uy89I03faLkg==} + + string-width@4.2.3: + resolution: {integrity: sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==} + engines: {node: '>=8'} + + strip-ansi@6.0.1: + resolution: {integrity: sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==} + engines: {node: '>=8'} + + supports-color@7.2.0: + resolution: {integrity: sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==} + engines: {node: '>=8'} + + supports-color@8.1.1: + resolution: {integrity: sha512-MpUEN2OodtUzxvKQl72cUF7RQ5EiHsGvSsVG0ia9c5RbWGL2CI4C7EpPS8UTBIplnlzZiNuV56w+FuNxy3ty2Q==} + engines: {node: '>=10'} + + tailwindcss@4.2.2: + resolution: {integrity: sha512-KWBIxs1Xb6NoLdMVqhbhgwZf2PGBpPEiwOqgI4pFIYbNTfBXiKYyWoTsXgBQ9WFg/OlhnvHaY+AEpW7wSmFo2Q==} + + tapable@2.3.2: + resolution: {integrity: sha512-1MOpMXuhGzGL5TTCZFItxCc0AARf1EZFQkGqMm7ERKj8+Hgr5oLvJOVFcC+lRmR8hCe2S3jC4T5D7Vg/d7/fhA==} + engines: {node: '>=6'} + + tiny-lru@11.4.7: + resolution: {integrity: sha512-w/Te7uMUVeH0CR8vZIjr+XiN41V+30lkDdK+NRIDCUYKKuL9VcmaUEmaPISuwGhLlrTGh5yu18lENtR9axSxYw==} + engines: {node: '>=12'} + + tinybench@2.9.0: + resolution: {integrity: sha512-0+DUvqWMValLmha6lr4kD8iAMK1HzV0/aKnCtWb9v9641TnP/MFb7Pc2bxoxQjTXAErryXVgUOfv2YqNllqGeg==} + + tinyexec@0.3.2: + resolution: {integrity: sha512-KQQR9yN7R5+OSwaK0XQoj22pwHoTlgYqmUscPYoknOoWCWfj/5/ABTMRi69FrKU5ffPVh5QcFikpWJI/P1ocHA==} + + tinyglobby@0.2.16: + resolution: {integrity: sha512-pn99VhoACYR8nFHhxqix+uvsbXineAasWm5ojXoN8xEwK5Kd3/TrhNn1wByuD52UxWRLy8pu+kRMniEi6Eq9Zg==} + engines: {node: '>=12.0.0'} + + tinypool@1.1.1: + resolution: {integrity: sha512-Zba82s87IFq9A9XmjiX5uZA/ARWDrB03OHlq+Vw1fSdt0I+4/Kutwy8BP4Y/y/aORMo61FQ0vIb5j44vSo5Pkg==} + engines: {node: ^18.0.0 || >=20.0.0} + + tinyrainbow@1.2.0: + resolution: {integrity: sha512-weEDEq7Z5eTHPDh4xjX789+fHfF+P8boiFB+0vbWzpbnbsEr/GRaohi/uMKxg8RZMXnl1ItAi/IUHWMsjDV7kQ==} + engines: {node: '>=14.0.0'} + + tinyspy@3.0.2: + resolution: {integrity: sha512-n1cw8k1k0x4pgA2+9XrOkFydTerNcJ1zWCO5Nn9scWHTD+5tp8dghT2x1uduQePZTZgd3Tupf+x9BxJjeJi77Q==} + engines: {node: '>=14.0.0'} + + tone@15.1.22: + resolution: {integrity: sha512-TCScAGD4sLsama5DjvTUXlLDXSqPealhL64nsdV1hhr6frPWve0DeSo63AKnSJwgfg55fhvxj0iPPRwPN5o0ag==} + + totalist@3.0.1: + resolution: {integrity: sha512-sf4i37nQ2LBx4m3wB74y+ubopq6W/dIzXg0FDGjsYnZHVa1Da8FH853wlL2gtUhg+xJXjfk3kUZS3BRoQeoQBQ==} + engines: {node: '>=6'} + + tree-kill@1.2.2: + resolution: {integrity: sha512-L0Orpi8qGpRG//Nd+H90vFB+3iHnue1zSSGmNOOCh1GLJ7rUKVwV2HvijphGQS2UmhUZewS9VgvxYIdgr+fG1A==} + hasBin: true + + tslib@2.8.1: + resolution: {integrity: sha512-oJFu94HQb+KVduSUQL7wnpmqnfmLsOA/nAh6b6EH0wCEoK0/mPeXU6c3wKDV83MkOuHPRHtSXKKU99IBazS/2w==} + + typescript@5.7.3: + resolution: {integrity: sha512-84MVSjMEHP+FQRPy3pX9sTVV/INIex71s9TL2Gm5FG/WG1SqXeKyZ0k7/blY/4FdOzI12CBy1vGc4og/eus0fw==} + engines: {node: '>=14.17'} + hasBin: true + + update-browserslist-db@1.2.3: + resolution: {integrity: sha512-Js0m9cx+qOgDxo0eMiFGEueWztz+d4+M3rGlmKPT+T4IS/jP4ylw3Nwpu6cpTTP8R1MAC1kF4VbdLt3ARf209w==} + hasBin: true + peerDependencies: + browserslist: '>= 4.21.0' + + vite-node@2.1.9: + resolution: {integrity: sha512-AM9aQ/IPrW/6ENLQg3AGY4K1N2TGZdR5e4gu/MmmR2xR3Ll1+dib+nook92g4TV3PXVyeyxdWwtaCAiUL0hMxA==} + engines: {node: ^18.0.0 || >=20.0.0} + hasBin: true + + vite@5.4.21: + resolution: {integrity: sha512-o5a9xKjbtuhY6Bi5S3+HvbRERmouabWbyUcpXXUA1u+GNUKoROi9byOJ8M0nHbHYHkYICiMlqxkg1KkYmm25Sw==} + engines: {node: ^18.0.0 || >=20.0.0} + hasBin: true + peerDependencies: + '@types/node': ^18.0.0 || >=20.0.0 + less: '*' + lightningcss: ^1.21.0 + sass: '*' + sass-embedded: '*' + stylus: '*' + sugarss: '*' + terser: ^5.4.0 + peerDependenciesMeta: + '@types/node': + optional: true + less: + optional: true + lightningcss: + optional: true + sass: + optional: true + sass-embedded: + optional: true + stylus: + optional: true + sugarss: + optional: true + terser: + optional: true + + vite@6.4.2: + resolution: {integrity: sha512-2N/55r4JDJ4gdrCvGgINMy+HH3iRpNIz8K6SFwVsA+JbQScLiC+clmAxBgwiSPgcG9U15QmvqCGWzMbqda5zGQ==} + engines: {node: ^18.0.0 || ^20.0.0 || >=22.0.0} + hasBin: true + peerDependencies: + '@types/node': ^18.0.0 || ^20.0.0 || >=22.0.0 + jiti: '>=1.21.0' + less: '*' + lightningcss: ^1.21.0 + sass: '*' + sass-embedded: '*' + stylus: '*' + sugarss: '*' + terser: ^5.16.0 + tsx: ^4.8.1 + yaml: ^2.4.2 + peerDependenciesMeta: + '@types/node': + optional: true + jiti: + optional: true + less: + optional: true + lightningcss: + optional: true + sass: + optional: true + sass-embedded: + optional: true + stylus: + optional: true + sugarss: + optional: true + terser: + optional: true + tsx: + optional: true + yaml: + optional: true + + vitest@2.1.9: + resolution: {integrity: sha512-MSmPM9REYqDGBI8439mA4mWhV5sKmDlBKWIYbA3lRb2PTHACE0mgKwA8yQ2xq9vxDTuk4iPrECBAEW2aoFXY0Q==} + engines: {node: ^18.0.0 || >=20.0.0} + hasBin: true + peerDependencies: + '@edge-runtime/vm': '*' + '@types/node': ^18.0.0 || >=20.0.0 + '@vitest/browser': 2.1.9 + '@vitest/ui': 2.1.9 + happy-dom: '*' + jsdom: '*' + peerDependenciesMeta: + '@edge-runtime/vm': + optional: true + '@types/node': + optional: true + '@vitest/browser': + optional: true + '@vitest/ui': + optional: true + happy-dom: + optional: true + jsdom: + optional: true + + webmidi@3.1.16: + resolution: {integrity: sha512-I6NnCfBUXNbV8q6EU+DPtr1u1EgjzDrFKHQQS2OgaHzcuQRFhRHgogfKpKSpxD0IgXhZHz8+k/OpGfZoWbvWAQ==} + engines: {node: '>=8.5'} + + why-is-node-running@2.3.0: + resolution: {integrity: sha512-hUrmaWBdVDcxvYqnyh09zunKzROWjbZTiNy8dBEjkS7ehEDQibXJ7XvlmtbwuTclUiIyN+CyXQD4Vmko8fNm8w==} + engines: {node: '>=8'} + hasBin: true + + wrap-ansi@7.0.0: + resolution: {integrity: sha512-YVGIj2kamLSTxw6NsZjoBxfSwsn0ycdesmc4p+Q21c5zPuZ1pl+NfxVdxPtdHvmNVOQ6XSYG4AUtyt/Fi7D16Q==} + engines: {node: '>=10'} + + y18n@5.0.8: + resolution: {integrity: sha512-0pfFzegeDWJHJIAmTLRP2DwHjdF5s7jo9tuztdQxAhINCdvS+3nGINqPd00AphqJR/0LhANUS6/+7SCb98YOfA==} + engines: {node: '>=10'} + + yallist@3.1.1: + resolution: {integrity: sha512-a4UGQaWPH59mOXUYnAG2ewncQS4i4F43Tv3JoAM+s2VDAmS9NsK8GpDMLrCHPksFT7h3K6TOoUNn2pb7RoXx4g==} + + yargs-parser@21.1.1: + resolution: {integrity: sha512-tVpsJW7DdjecAiFpbIB1e3qxIQsE6NoPc5/eTdrbbIC4h0LVsWhnoa3g+m2HclBIujHzsxZ4VJVA+GUuc2/LBw==} + engines: {node: '>=12'} + + yargs@17.7.2: + resolution: {integrity: sha512-7dSzzRQ++CKnNI/krKnYRV7JKKPUXMEh61soaHKg9mrWEhzFWhFnxPxGl+69cD1Ou63C13NUPCnmIcrvqCuM6w==} + engines: {node: '>=12'} + + zustand@5.0.12: + resolution: {integrity: sha512-i77ae3aZq4dhMlRhJVCYgMLKuSiZAaUPAct2AksxQ+gOtimhGMdXljRT21P5BNpeT4kXlLIckvkPM029OljD7g==} + engines: {node: '>=12.20.0'} + peerDependencies: + '@types/react': '>=18.0.0' + immer: '>=9.0.6' + react: '>=18.0.0' + use-sync-external-store: '>=1.2.0' + peerDependenciesMeta: + '@types/react': + optional: true + immer: + optional: true + react: + optional: true + use-sync-external-store: + optional: true + +snapshots: + + '@babel/code-frame@7.29.0': + dependencies: + '@babel/helper-validator-identifier': 7.28.5 + js-tokens: 4.0.0 + picocolors: 1.1.1 + + '@babel/compat-data@7.29.0': {} + + '@babel/core@7.29.0': + dependencies: + '@babel/code-frame': 7.29.0 + '@babel/generator': 7.29.1 + '@babel/helper-compilation-targets': 7.28.6 + '@babel/helper-module-transforms': 7.28.6(@babel/core@7.29.0) + '@babel/helpers': 7.29.2 + '@babel/parser': 7.29.2 + '@babel/template': 7.28.6 + '@babel/traverse': 7.29.0 + '@babel/types': 7.29.0 + '@jridgewell/remapping': 2.3.5 + convert-source-map: 2.0.0 + debug: 4.4.3 + gensync: 1.0.0-beta.2 + json5: 2.2.3 + semver: 6.3.1 + transitivePeerDependencies: + - supports-color + + '@babel/generator@7.29.1': + dependencies: + '@babel/parser': 7.29.2 + '@babel/types': 7.29.0 + '@jridgewell/gen-mapping': 0.3.13 + '@jridgewell/trace-mapping': 0.3.31 + jsesc: 3.1.0 + + '@babel/helper-compilation-targets@7.28.6': + dependencies: + '@babel/compat-data': 7.29.0 + '@babel/helper-validator-option': 7.27.1 + browserslist: 4.28.2 + lru-cache: 5.1.1 + semver: 6.3.1 + + '@babel/helper-globals@7.28.0': {} + + '@babel/helper-module-imports@7.28.6': + dependencies: + '@babel/traverse': 7.29.0 + '@babel/types': 7.29.0 + transitivePeerDependencies: + - supports-color + + '@babel/helper-module-transforms@7.28.6(@babel/core@7.29.0)': + dependencies: + '@babel/core': 7.29.0 + '@babel/helper-module-imports': 7.28.6 + '@babel/helper-validator-identifier': 7.28.5 + '@babel/traverse': 7.29.0 + transitivePeerDependencies: + - supports-color + + '@babel/helper-plugin-utils@7.28.6': {} + + '@babel/helper-string-parser@7.27.1': {} + + '@babel/helper-validator-identifier@7.28.5': {} + + '@babel/helper-validator-option@7.27.1': {} + + '@babel/helpers@7.29.2': + dependencies: + '@babel/template': 7.28.6 + '@babel/types': 7.29.0 + + '@babel/parser@7.29.2': + dependencies: + '@babel/types': 7.29.0 + + '@babel/plugin-transform-react-jsx-self@7.27.1(@babel/core@7.29.0)': + dependencies: + '@babel/core': 7.29.0 + '@babel/helper-plugin-utils': 7.28.6 + + '@babel/plugin-transform-react-jsx-source@7.27.1(@babel/core@7.29.0)': + dependencies: + '@babel/core': 7.29.0 + '@babel/helper-plugin-utils': 7.28.6 + + '@babel/runtime@7.29.2': {} + + '@babel/template@7.28.6': + dependencies: + '@babel/code-frame': 7.29.0 + '@babel/parser': 7.29.2 + '@babel/types': 7.29.0 + + '@babel/traverse@7.29.0': + dependencies: + '@babel/code-frame': 7.29.0 + '@babel/generator': 7.29.1 + '@babel/helper-globals': 7.28.0 + '@babel/parser': 7.29.2 + '@babel/template': 7.28.6 + '@babel/types': 7.29.0 + debug: 4.4.3 + transitivePeerDependencies: + - supports-color + + '@babel/types@7.29.0': + dependencies: + '@babel/helper-string-parser': 7.27.1 + '@babel/helper-validator-identifier': 7.28.5 + + '@coderline/alphatab@1.8.2': {} + + '@esbuild/aix-ppc64@0.21.5': + optional: true + + '@esbuild/aix-ppc64@0.25.12': + optional: true + + '@esbuild/android-arm64@0.21.5': + optional: true + + '@esbuild/android-arm64@0.25.12': + optional: true + + '@esbuild/android-arm@0.21.5': + optional: true + + '@esbuild/android-arm@0.25.12': + optional: true + + '@esbuild/android-x64@0.21.5': + optional: true + + '@esbuild/android-x64@0.25.12': + optional: true + + '@esbuild/darwin-arm64@0.21.5': + optional: true + + '@esbuild/darwin-arm64@0.25.12': + optional: true + + '@esbuild/darwin-x64@0.21.5': + optional: true + + '@esbuild/darwin-x64@0.25.12': + optional: true + + '@esbuild/freebsd-arm64@0.21.5': + optional: true + + '@esbuild/freebsd-arm64@0.25.12': + optional: true + + '@esbuild/freebsd-x64@0.21.5': + optional: true + + '@esbuild/freebsd-x64@0.25.12': + optional: true + + '@esbuild/linux-arm64@0.21.5': + optional: true + + '@esbuild/linux-arm64@0.25.12': + optional: true + + '@esbuild/linux-arm@0.21.5': + optional: true + + '@esbuild/linux-arm@0.25.12': + optional: true + + '@esbuild/linux-ia32@0.21.5': + optional: true + + '@esbuild/linux-ia32@0.25.12': + optional: true + + '@esbuild/linux-loong64@0.21.5': + optional: true + + '@esbuild/linux-loong64@0.25.12': + optional: true + + '@esbuild/linux-mips64el@0.21.5': + optional: true + + '@esbuild/linux-mips64el@0.25.12': + optional: true + + '@esbuild/linux-ppc64@0.21.5': + optional: true + + '@esbuild/linux-ppc64@0.25.12': + optional: true + + '@esbuild/linux-riscv64@0.21.5': + optional: true + + '@esbuild/linux-riscv64@0.25.12': + optional: true + + '@esbuild/linux-s390x@0.21.5': + optional: true + + '@esbuild/linux-s390x@0.25.12': + optional: true + + '@esbuild/linux-x64@0.21.5': + optional: true + + '@esbuild/linux-x64@0.25.12': + optional: true + + '@esbuild/netbsd-arm64@0.25.12': + optional: true + + '@esbuild/netbsd-x64@0.21.5': + optional: true + + '@esbuild/netbsd-x64@0.25.12': + optional: true + + '@esbuild/openbsd-arm64@0.25.12': + optional: true + + '@esbuild/openbsd-x64@0.21.5': + optional: true + + '@esbuild/openbsd-x64@0.25.12': + optional: true + + '@esbuild/openharmony-arm64@0.25.12': + optional: true + + '@esbuild/sunos-x64@0.21.5': + optional: true + + '@esbuild/sunos-x64@0.25.12': + optional: true + + '@esbuild/win32-arm64@0.21.5': + optional: true + + '@esbuild/win32-arm64@0.25.12': + optional: true + + '@esbuild/win32-ia32@0.21.5': + optional: true + + '@esbuild/win32-ia32@0.25.12': + optional: true + + '@esbuild/win32-x64@0.21.5': + optional: true + + '@esbuild/win32-x64@0.25.12': + optional: true + + '@jridgewell/gen-mapping@0.3.13': + dependencies: + '@jridgewell/sourcemap-codec': 1.5.5 + '@jridgewell/trace-mapping': 0.3.31 + + '@jridgewell/remapping@2.3.5': + dependencies: + '@jridgewell/gen-mapping': 0.3.13 + '@jridgewell/trace-mapping': 0.3.31 + + '@jridgewell/resolve-uri@3.1.2': {} + + '@jridgewell/sourcemap-codec@1.5.5': {} + + '@jridgewell/trace-mapping@0.3.31': + dependencies: + '@jridgewell/resolve-uri': 3.1.2 + '@jridgewell/sourcemap-codec': 1.5.5 + + '@pixi/colord@2.9.6': {} + + '@polka/url@1.0.0-next.29': {} + + '@rolldown/pluginutils@1.0.0-beta.27': {} + + '@rollup/rollup-android-arm-eabi@4.60.1': + optional: true + + '@rollup/rollup-android-arm64@4.60.1': + optional: true + + '@rollup/rollup-darwin-arm64@4.60.1': + optional: true + + '@rollup/rollup-darwin-x64@4.60.1': + optional: true + + '@rollup/rollup-freebsd-arm64@4.60.1': + optional: true + + '@rollup/rollup-freebsd-x64@4.60.1': + optional: true + + '@rollup/rollup-linux-arm-gnueabihf@4.60.1': + optional: true + + '@rollup/rollup-linux-arm-musleabihf@4.60.1': + optional: true + + '@rollup/rollup-linux-arm64-gnu@4.60.1': + optional: true + + '@rollup/rollup-linux-arm64-musl@4.60.1': + optional: true + + '@rollup/rollup-linux-loong64-gnu@4.60.1': + optional: true + + '@rollup/rollup-linux-loong64-musl@4.60.1': + optional: true + + '@rollup/rollup-linux-ppc64-gnu@4.60.1': + optional: true + + '@rollup/rollup-linux-ppc64-musl@4.60.1': + optional: true + + '@rollup/rollup-linux-riscv64-gnu@4.60.1': + optional: true + + '@rollup/rollup-linux-riscv64-musl@4.60.1': + optional: true + + '@rollup/rollup-linux-s390x-gnu@4.60.1': + optional: true + + '@rollup/rollup-linux-x64-gnu@4.60.1': + optional: true + + '@rollup/rollup-linux-x64-musl@4.60.1': + optional: true + + '@rollup/rollup-openbsd-x64@4.60.1': + optional: true + + '@rollup/rollup-openharmony-arm64@4.60.1': + optional: true + + '@rollup/rollup-win32-arm64-msvc@4.60.1': + optional: true + + '@rollup/rollup-win32-ia32-msvc@4.60.1': + optional: true + + '@rollup/rollup-win32-x64-gnu@4.60.1': + optional: true + + '@rollup/rollup-win32-x64-msvc@4.60.1': + optional: true + + '@tailwindcss/node@4.2.2': + dependencies: + '@jridgewell/remapping': 2.3.5 + enhanced-resolve: 5.20.1 + jiti: 2.6.1 + lightningcss: 1.32.0 + magic-string: 0.30.21 + source-map-js: 1.2.1 + tailwindcss: 4.2.2 + + '@tailwindcss/oxide-android-arm64@4.2.2': + optional: true + + '@tailwindcss/oxide-darwin-arm64@4.2.2': + optional: true + + '@tailwindcss/oxide-darwin-x64@4.2.2': + optional: true + + '@tailwindcss/oxide-freebsd-x64@4.2.2': + optional: true + + '@tailwindcss/oxide-linux-arm-gnueabihf@4.2.2': + optional: true + + '@tailwindcss/oxide-linux-arm64-gnu@4.2.2': + optional: true + + '@tailwindcss/oxide-linux-arm64-musl@4.2.2': + optional: true + + '@tailwindcss/oxide-linux-x64-gnu@4.2.2': + optional: true + + '@tailwindcss/oxide-linux-x64-musl@4.2.2': + optional: true + + '@tailwindcss/oxide-wasm32-wasi@4.2.2': + optional: true + + '@tailwindcss/oxide-win32-arm64-msvc@4.2.2': + optional: true + + '@tailwindcss/oxide-win32-x64-msvc@4.2.2': + optional: true + + '@tailwindcss/oxide@4.2.2': + optionalDependencies: + '@tailwindcss/oxide-android-arm64': 4.2.2 + '@tailwindcss/oxide-darwin-arm64': 4.2.2 + '@tailwindcss/oxide-darwin-x64': 4.2.2 + '@tailwindcss/oxide-freebsd-x64': 4.2.2 + '@tailwindcss/oxide-linux-arm-gnueabihf': 4.2.2 + '@tailwindcss/oxide-linux-arm64-gnu': 4.2.2 + '@tailwindcss/oxide-linux-arm64-musl': 4.2.2 + '@tailwindcss/oxide-linux-x64-gnu': 4.2.2 + '@tailwindcss/oxide-linux-x64-musl': 4.2.2 + '@tailwindcss/oxide-wasm32-wasi': 4.2.2 + '@tailwindcss/oxide-win32-arm64-msvc': 4.2.2 + '@tailwindcss/oxide-win32-x64-msvc': 4.2.2 + + '@tailwindcss/vite@4.2.2(vite@6.4.2(jiti@2.6.1)(lightningcss@1.32.0))': + dependencies: + '@tailwindcss/node': 4.2.2 + '@tailwindcss/oxide': 4.2.2 + tailwindcss: 4.2.2 + vite: 6.4.2(jiti@2.6.1)(lightningcss@1.32.0) + + '@tonejs/midi@2.0.28': + dependencies: + array-flatten: 3.0.0 + midi-file: 1.2.4 + + '@types/babel__core@7.20.5': + dependencies: + '@babel/parser': 7.29.2 + '@babel/types': 7.29.0 + '@types/babel__generator': 7.27.0 + '@types/babel__template': 7.4.4 + '@types/babel__traverse': 7.28.0 + + '@types/babel__generator@7.27.0': + dependencies: + '@babel/types': 7.29.0 + + '@types/babel__template@7.4.4': + dependencies: + '@babel/parser': 7.29.2 + '@babel/types': 7.29.0 + + '@types/babel__traverse@7.28.0': + dependencies: + '@babel/types': 7.29.0 + + '@types/earcut@3.0.0': {} + + '@types/estree@1.0.8': {} + + '@types/react-dom@19.2.3(@types/react@19.2.14)': + dependencies: + '@types/react': 19.2.14 + + '@types/react@19.2.14': + dependencies: + csstype: 3.2.3 + + '@vitejs/plugin-react@4.7.0(vite@6.4.2(jiti@2.6.1)(lightningcss@1.32.0))': + dependencies: + '@babel/core': 7.29.0 + '@babel/plugin-transform-react-jsx-self': 7.27.1(@babel/core@7.29.0) + '@babel/plugin-transform-react-jsx-source': 7.27.1(@babel/core@7.29.0) + '@rolldown/pluginutils': 1.0.0-beta.27 + '@types/babel__core': 7.20.5 + react-refresh: 0.17.0 + vite: 6.4.2(jiti@2.6.1)(lightningcss@1.32.0) + transitivePeerDependencies: + - supports-color + + '@vitest/expect@2.1.9': + dependencies: + '@vitest/spy': 2.1.9 + '@vitest/utils': 2.1.9 + chai: 5.3.3 + tinyrainbow: 1.2.0 + + '@vitest/mocker@2.1.9(vite@5.4.21(lightningcss@1.32.0))': + dependencies: + '@vitest/spy': 2.1.9 + estree-walker: 3.0.3 + magic-string: 0.30.21 + optionalDependencies: + vite: 5.4.21(lightningcss@1.32.0) + + '@vitest/pretty-format@2.1.9': + dependencies: + tinyrainbow: 1.2.0 + + '@vitest/runner@2.1.9': + dependencies: + '@vitest/utils': 2.1.9 + pathe: 1.1.2 + + '@vitest/snapshot@2.1.9': + dependencies: + '@vitest/pretty-format': 2.1.9 + magic-string: 0.30.21 + pathe: 1.1.2 + + '@vitest/spy@2.1.9': + dependencies: + tinyspy: 3.0.2 + + '@vitest/ui@2.1.9(vitest@2.1.9)': + dependencies: + '@vitest/utils': 2.1.9 + fflate: 0.8.2 + flatted: 3.4.2 + pathe: 1.1.2 + sirv: 3.0.2 + tinyglobby: 0.2.16 + tinyrainbow: 1.2.0 + vitest: 2.1.9(@vitest/ui@2.1.9)(lightningcss@1.32.0) + + '@vitest/utils@2.1.9': + dependencies: + '@vitest/pretty-format': 2.1.9 + loupe: 3.2.1 + tinyrainbow: 1.2.0 + + '@webgpu/types@0.1.69': {} + + '@xmldom/xmldom@0.8.13': {} + + ansi-regex@5.0.1: {} + + ansi-styles@4.3.0: + dependencies: + color-convert: 2.0.1 + + array-flatten@3.0.0: {} + + assertion-error@2.0.1: {} + + automation-events@7.1.17: + dependencies: + '@babel/runtime': 7.29.2 + tslib: 2.8.1 + + baseline-browser-mapping@2.10.18: {} + + browserslist@4.28.2: + dependencies: + baseline-browser-mapping: 2.10.18 + caniuse-lite: 1.0.30001787 + electron-to-chromium: 1.5.335 + node-releases: 2.0.37 + update-browserslist-db: 1.2.3(browserslist@4.28.2) + + cac@6.7.14: {} + + caniuse-lite@1.0.30001787: {} + + chai@5.3.3: + dependencies: + assertion-error: 2.0.1 + check-error: 2.1.3 + deep-eql: 5.0.2 + loupe: 3.2.1 + pathval: 2.0.1 + + chalk@4.1.2: + dependencies: + ansi-styles: 4.3.0 + supports-color: 7.2.0 + + check-error@2.1.3: {} + + cliui@8.0.1: + dependencies: + string-width: 4.2.3 + strip-ansi: 6.0.1 + wrap-ansi: 7.0.0 + + color-convert@2.0.1: + dependencies: + color-name: 1.1.4 + + color-name@1.1.4: {} + + concurrently@9.2.1: + dependencies: + chalk: 4.1.2 + rxjs: 7.8.2 + shell-quote: 1.8.3 + supports-color: 8.1.1 + tree-kill: 1.2.2 + yargs: 17.7.2 + + convert-source-map@2.0.0: {} + + csstype@3.2.3: {} + + debug@4.4.3: + dependencies: + ms: 2.1.3 + + deep-eql@5.0.2: {} + + detect-libc@2.1.2: {} + + djipevents@2.0.7: + dependencies: + '@babel/runtime': 7.29.2 + + earcut@3.0.2: {} + + electron-to-chromium@1.5.335: {} + + emoji-regex@8.0.0: {} + + enhanced-resolve@5.20.1: + dependencies: + graceful-fs: 4.2.11 + tapable: 2.3.2 + + es-module-lexer@1.7.0: {} + + esbuild@0.21.5: + optionalDependencies: + '@esbuild/aix-ppc64': 0.21.5 + '@esbuild/android-arm': 0.21.5 + '@esbuild/android-arm64': 0.21.5 + '@esbuild/android-x64': 0.21.5 + '@esbuild/darwin-arm64': 0.21.5 + '@esbuild/darwin-x64': 0.21.5 + '@esbuild/freebsd-arm64': 0.21.5 + '@esbuild/freebsd-x64': 0.21.5 + '@esbuild/linux-arm': 0.21.5 + '@esbuild/linux-arm64': 0.21.5 + '@esbuild/linux-ia32': 0.21.5 + '@esbuild/linux-loong64': 0.21.5 + '@esbuild/linux-mips64el': 0.21.5 + '@esbuild/linux-ppc64': 0.21.5 + '@esbuild/linux-riscv64': 0.21.5 + '@esbuild/linux-s390x': 0.21.5 + '@esbuild/linux-x64': 0.21.5 + '@esbuild/netbsd-x64': 0.21.5 + '@esbuild/openbsd-x64': 0.21.5 + '@esbuild/sunos-x64': 0.21.5 + '@esbuild/win32-arm64': 0.21.5 + '@esbuild/win32-ia32': 0.21.5 + '@esbuild/win32-x64': 0.21.5 + + esbuild@0.25.12: + optionalDependencies: + '@esbuild/aix-ppc64': 0.25.12 + '@esbuild/android-arm': 0.25.12 + '@esbuild/android-arm64': 0.25.12 + '@esbuild/android-x64': 0.25.12 + '@esbuild/darwin-arm64': 0.25.12 + '@esbuild/darwin-x64': 0.25.12 + '@esbuild/freebsd-arm64': 0.25.12 + '@esbuild/freebsd-x64': 0.25.12 + '@esbuild/linux-arm': 0.25.12 + '@esbuild/linux-arm64': 0.25.12 + '@esbuild/linux-ia32': 0.25.12 + '@esbuild/linux-loong64': 0.25.12 + '@esbuild/linux-mips64el': 0.25.12 + '@esbuild/linux-ppc64': 0.25.12 + '@esbuild/linux-riscv64': 0.25.12 + '@esbuild/linux-s390x': 0.25.12 + '@esbuild/linux-x64': 0.25.12 + '@esbuild/netbsd-arm64': 0.25.12 + '@esbuild/netbsd-x64': 0.25.12 + '@esbuild/openbsd-arm64': 0.25.12 + '@esbuild/openbsd-x64': 0.25.12 + '@esbuild/openharmony-arm64': 0.25.12 + '@esbuild/sunos-x64': 0.25.12 + '@esbuild/win32-arm64': 0.25.12 + '@esbuild/win32-ia32': 0.25.12 + '@esbuild/win32-x64': 0.25.12 + + escalade@3.2.0: {} + + estree-walker@3.0.3: + dependencies: + '@types/estree': 1.0.8 + + eventemitter3@5.0.4: {} + + expect-type@1.3.0: {} + + fdir@6.5.0(picomatch@4.0.4): + optionalDependencies: + picomatch: 4.0.4 + + fflate@0.8.2: {} + + flatted@3.4.2: {} + + fsevents@2.3.3: + optional: true + + gensync@1.0.0-beta.2: {} + + get-caller-file@2.0.5: {} + + gifuct-js@2.1.2: + dependencies: + js-binary-schema-parser: 2.0.3 + + graceful-fs@4.2.11: {} + + has-flag@4.0.0: {} + + is-fullwidth-code-point@3.0.0: {} + + ismobilejs@1.1.1: {} + + jazz-midi@1.7.9: + optional: true + + jiti@2.6.1: {} + + js-binary-schema-parser@2.0.3: {} + + js-tokens@4.0.0: {} + + jsesc@3.1.0: {} + + json5@2.2.3: {} + + jzz@1.9.6: + dependencies: + jazz-midi: 1.7.9 + optional: true + + lightningcss-android-arm64@1.32.0: + optional: true + + lightningcss-darwin-arm64@1.32.0: + optional: true + + lightningcss-darwin-x64@1.32.0: + optional: true + + lightningcss-freebsd-x64@1.32.0: + optional: true + + lightningcss-linux-arm-gnueabihf@1.32.0: + optional: true + + lightningcss-linux-arm64-gnu@1.32.0: + optional: true + + lightningcss-linux-arm64-musl@1.32.0: + optional: true + + lightningcss-linux-x64-gnu@1.32.0: + optional: true + + lightningcss-linux-x64-musl@1.32.0: + optional: true + + lightningcss-win32-arm64-msvc@1.32.0: + optional: true + + lightningcss-win32-x64-msvc@1.32.0: + optional: true + + lightningcss@1.32.0: + dependencies: + detect-libc: 2.1.2 + optionalDependencies: + lightningcss-android-arm64: 1.32.0 + lightningcss-darwin-arm64: 1.32.0 + lightningcss-darwin-x64: 1.32.0 + lightningcss-freebsd-x64: 1.32.0 + lightningcss-linux-arm-gnueabihf: 1.32.0 + lightningcss-linux-arm64-gnu: 1.32.0 + lightningcss-linux-arm64-musl: 1.32.0 + lightningcss-linux-x64-gnu: 1.32.0 + lightningcss-linux-x64-musl: 1.32.0 + lightningcss-win32-arm64-msvc: 1.32.0 + lightningcss-win32-x64-msvc: 1.32.0 + + loupe@3.2.1: {} + + lru-cache@5.1.1: + dependencies: + yallist: 3.1.1 + + magic-string@0.30.21: + dependencies: + '@jridgewell/sourcemap-codec': 1.5.5 + + midi-file@1.2.4: {} + + mitt@3.0.1: {} + + mrmime@2.0.1: {} + + ms@2.1.3: {} + + nanoid@3.3.11: {} + + node-releases@2.0.37: {} + + parse-svg-path@0.1.2: {} + + pathe@1.1.2: {} + + pathval@2.0.1: {} + + picocolors@1.1.1: {} + + picomatch@4.0.4: {} + + pixi.js@8.17.1: + dependencies: + '@pixi/colord': 2.9.6 + '@types/earcut': 3.0.0 + '@webgpu/types': 0.1.69 + '@xmldom/xmldom': 0.8.13 + earcut: 3.0.2 + eventemitter3: 5.0.4 + gifuct-js: 2.1.2 + ismobilejs: 1.1.1 + parse-svg-path: 0.1.2 + tiny-lru: 11.4.7 + + postcss@8.5.9: + dependencies: + nanoid: 3.3.11 + picocolors: 1.1.1 + source-map-js: 1.2.1 + + react-dom@19.2.5(react@19.2.5): + dependencies: + react: 19.2.5 + scheduler: 0.27.0 + + react-refresh@0.17.0: {} + + react@19.2.5: {} + + require-directory@2.1.1: {} + + rollup@4.60.1: + dependencies: + '@types/estree': 1.0.8 + optionalDependencies: + '@rollup/rollup-android-arm-eabi': 4.60.1 + '@rollup/rollup-android-arm64': 4.60.1 + '@rollup/rollup-darwin-arm64': 4.60.1 + '@rollup/rollup-darwin-x64': 4.60.1 + '@rollup/rollup-freebsd-arm64': 4.60.1 + '@rollup/rollup-freebsd-x64': 4.60.1 + '@rollup/rollup-linux-arm-gnueabihf': 4.60.1 + '@rollup/rollup-linux-arm-musleabihf': 4.60.1 + '@rollup/rollup-linux-arm64-gnu': 4.60.1 + '@rollup/rollup-linux-arm64-musl': 4.60.1 + '@rollup/rollup-linux-loong64-gnu': 4.60.1 + '@rollup/rollup-linux-loong64-musl': 4.60.1 + '@rollup/rollup-linux-ppc64-gnu': 4.60.1 + '@rollup/rollup-linux-ppc64-musl': 4.60.1 + '@rollup/rollup-linux-riscv64-gnu': 4.60.1 + '@rollup/rollup-linux-riscv64-musl': 4.60.1 + '@rollup/rollup-linux-s390x-gnu': 4.60.1 + '@rollup/rollup-linux-x64-gnu': 4.60.1 + '@rollup/rollup-linux-x64-musl': 4.60.1 + '@rollup/rollup-openbsd-x64': 4.60.1 + '@rollup/rollup-openharmony-arm64': 4.60.1 + '@rollup/rollup-win32-arm64-msvc': 4.60.1 + '@rollup/rollup-win32-ia32-msvc': 4.60.1 + '@rollup/rollup-win32-x64-gnu': 4.60.1 + '@rollup/rollup-win32-x64-msvc': 4.60.1 + fsevents: 2.3.3 + + rxjs@7.8.2: + dependencies: + tslib: 2.8.1 + + scheduler@0.27.0: {} + + semver@6.3.1: {} + + shell-quote@1.8.3: {} + + siginfo@2.0.0: {} + + sirv@3.0.2: + dependencies: + '@polka/url': 1.0.0-next.29 + mrmime: 2.0.1 + totalist: 3.0.1 + + smplr@0.14.0: {} + + source-map-js@1.2.1: {} + + stackback@0.0.2: {} + + standardized-audio-context@25.3.77: + dependencies: + '@babel/runtime': 7.29.2 + automation-events: 7.1.17 + tslib: 2.8.1 + + std-env@3.10.0: {} + + string-width@4.2.3: + dependencies: + emoji-regex: 8.0.0 + is-fullwidth-code-point: 3.0.0 + strip-ansi: 6.0.1 + + strip-ansi@6.0.1: + dependencies: + ansi-regex: 5.0.1 + + supports-color@7.2.0: + dependencies: + has-flag: 4.0.0 + + supports-color@8.1.1: + dependencies: + has-flag: 4.0.0 + + tailwindcss@4.2.2: {} + + tapable@2.3.2: {} + + tiny-lru@11.4.7: {} + + tinybench@2.9.0: {} + + tinyexec@0.3.2: {} + + tinyglobby@0.2.16: + dependencies: + fdir: 6.5.0(picomatch@4.0.4) + picomatch: 4.0.4 + + tinypool@1.1.1: {} + + tinyrainbow@1.2.0: {} + + tinyspy@3.0.2: {} + + tone@15.1.22: + dependencies: + standardized-audio-context: 25.3.77 + tslib: 2.8.1 + + totalist@3.0.1: {} + + tree-kill@1.2.2: {} + + tslib@2.8.1: {} + + typescript@5.7.3: {} + + update-browserslist-db@1.2.3(browserslist@4.28.2): + dependencies: + browserslist: 4.28.2 + escalade: 3.2.0 + picocolors: 1.1.1 + + vite-node@2.1.9(lightningcss@1.32.0): + dependencies: + cac: 6.7.14 + debug: 4.4.3 + es-module-lexer: 1.7.0 + pathe: 1.1.2 + vite: 5.4.21(lightningcss@1.32.0) + transitivePeerDependencies: + - '@types/node' + - less + - lightningcss + - sass + - sass-embedded + - stylus + - sugarss + - supports-color + - terser + + vite@5.4.21(lightningcss@1.32.0): + dependencies: + esbuild: 0.21.5 + postcss: 8.5.9 + rollup: 4.60.1 + optionalDependencies: + fsevents: 2.3.3 + lightningcss: 1.32.0 + + vite@6.4.2(jiti@2.6.1)(lightningcss@1.32.0): + dependencies: + esbuild: 0.25.12 + fdir: 6.5.0(picomatch@4.0.4) + picomatch: 4.0.4 + postcss: 8.5.9 + rollup: 4.60.1 + tinyglobby: 0.2.16 + optionalDependencies: + fsevents: 2.3.3 + jiti: 2.6.1 + lightningcss: 1.32.0 + + vitest@2.1.9(@vitest/ui@2.1.9)(lightningcss@1.32.0): + dependencies: + '@vitest/expect': 2.1.9 + '@vitest/mocker': 2.1.9(vite@5.4.21(lightningcss@1.32.0)) + '@vitest/pretty-format': 2.1.9 + '@vitest/runner': 2.1.9 + '@vitest/snapshot': 2.1.9 + '@vitest/spy': 2.1.9 + '@vitest/utils': 2.1.9 + chai: 5.3.3 + debug: 4.4.3 + expect-type: 1.3.0 + magic-string: 0.30.21 + pathe: 1.1.2 + std-env: 3.10.0 + tinybench: 2.9.0 + tinyexec: 0.3.2 + tinypool: 1.1.1 + tinyrainbow: 1.2.0 + vite: 5.4.21(lightningcss@1.32.0) + vite-node: 2.1.9(lightningcss@1.32.0) + why-is-node-running: 2.3.0 + optionalDependencies: + '@vitest/ui': 2.1.9(vitest@2.1.9) + transitivePeerDependencies: + - less + - lightningcss + - msw + - sass + - sass-embedded + - stylus + - sugarss + - supports-color + - terser + + webmidi@3.1.16: + dependencies: + djipevents: 2.0.7 + optionalDependencies: + jzz: 1.9.6 + + why-is-node-running@2.3.0: + dependencies: + siginfo: 2.0.0 + stackback: 0.0.2 + + wrap-ansi@7.0.0: + dependencies: + ansi-styles: 4.3.0 + string-width: 4.2.3 + strip-ansi: 6.0.1 + + y18n@5.0.8: {} + + yallist@3.1.1: {} + + yargs-parser@21.1.1: {} + + yargs@17.7.2: + dependencies: + cliui: 8.0.1 + escalade: 3.2.0 + get-caller-file: 2.0.5 + require-directory: 2.1.1 + string-width: 4.2.3 + y18n: 5.0.8 + yargs-parser: 21.1.1 + + zustand@5.0.12(@types/react@19.2.14)(react@19.2.5): + optionalDependencies: + '@types/react': 19.2.14 + react: 19.2.5 diff --git a/pnpm-workspace.yaml b/pnpm-workspace.yaml new file mode 100644 index 0000000..0ffe4bf --- /dev/null +++ b/pnpm-workspace.yaml @@ -0,0 +1,3 @@ +packages: + - "frontend" + - "shared" diff --git a/shared/package.json b/shared/package.json new file mode 100644 index 0000000..14b79c9 --- /dev/null +++ b/shared/package.json @@ -0,0 +1,7 @@ +{ + "name": "@bach-to-basics/shared", + "version": "0.1.0", + "private": true, + "main": "./types/index.ts", + "types": "./types/index.ts" +} diff --git a/shared/types/MusicData.ts b/shared/types/MusicData.ts new file mode 100644 index 0000000..9f812a9 --- /dev/null +++ b/shared/types/MusicData.ts @@ -0,0 +1,201 @@ +// ─── Core music data model ──────────────────────────────────────────────────── +// All views (SheetMusic, PianoKeyboard, FallingNotes) are driven by these types. +// NoteEvent arrays are computed ONCE at import time and never mutated during playback. + +export type Hand = "left" | "right" | "unknown"; +export type Finger = 1 | 2 | 3 | 4 | 5; +export type SourceType = "midi" | "musicxml" | "guitarpro" | "mp3" | "youtube"; +export type FingeringVersion = "auto" | "manual" | "none"; +export type PlaybackStatus = "stopped" | "playing" | "paused" | "waiting"; + +export interface NoteEvent { + id: string; + /** MIDI note number 0-127 */ + midi: number; + /** Human-readable pitch e.g. "C4", "F#5" */ + pitch: string; + startTick: number; + durationTick: number; + /** Wall-clock start time at tempo multiplier 1.0 (seconds) */ + startSeconds: number; + /** Wall-clock end time at tempo multiplier 1.0 (seconds) */ + endSeconds: number; + hand: Hand; + finger: Finger | null; + /** MIDI velocity 0-127 */ + velocity: number; + channel: number; +} + +export interface TempoEvent { + tick: number; + bpm: number; +} + +export interface TimeSignatureEvent { + tick: number; + numerator: number; + denominator: number; +} + +export interface KeySignature { + /** Root note name: "C" | "G" | "D" | "A" | "E" | "B" | "F#" | "C#" | "F" | "Bb" | "Eb" | "Ab" | "Db" | "Gb" | "Cb" */ + key: string; + scale: "major" | "minor"; +} + +export interface SustainRange { + startSeconds: number; + endSeconds: number; +} + +export interface MusicDocument { + id: string; + title: string; + sourceType: SourceType; + /** MusicXML string - drives AlphaTab sheet music view */ + musicXml: string | null; + /** Raw .mxl bytes (ZIP-compressed MusicXML) - present only for direct .mxl imports */ + mxlBuffer?: ArrayBuffer; + /** Raw MIDI binary - drives Tone.js playback */ + midiBuffer: ArrayBuffer | null; + /** Flat sorted array of all note events, pre-computed at import time */ + notes: NoteEvent[]; + tempoMap: TempoEvent[]; + timeSignatures: TimeSignatureEvent[]; + /** Total duration in seconds at tempo multiplier 1.0 */ + totalDuration: number; + /** Ticks per quarter note (PPQ) */ + ppq: number; + /** Key signature - null if not present in the source file */ + keySignature: KeySignature | null; + /** YouTube video ID if source is YouTube */ + youtubeId: string | null; + /** User-adjustable sync offset for YouTube (seconds) */ + youtubeSyncOffset: number; + fingeringVersion: FingeringVersion; + /** Sustain pedal (CC64) on/off ranges, pre-converted to seconds */ + sustainRanges?: SustainRange[]; +} + +export interface PlaybackState { + status: PlaybackStatus; + /** Current position in seconds (scaled by tempo multiplier) */ + currentSeconds: number; + /** Tempo multiplier: 0.25 = 25%, 1.0 = 100%, 2.0 = 200% */ + tempoMultiplier: number; + /** Loop start in seconds (tempo-scaled), null = no loop */ + loopStart: number | null; + /** Loop end in seconds (tempo-scaled), null = no loop */ + loopEnd: number | null; + /** Which hands are active for playback and wait-mode evaluation */ + activeHands: Set; + /** When true, transport pauses until user plays the expected note */ + waitMode: boolean; +} + +// ─── Utility: key signature to display label ───────────────────────────────── +export function keySignatureToLabel(ks: KeySignature): string { + return `${ks.key} ${ks.scale}`; +} + +// ─── Utility: MIDI ticks to seconds using a tempo map ──────────────────────── +function tickToSeconds(tick: number, tempoMap: TempoEvent[], ppq: number): number { + let sec = 0; + let prevTick = 0; + for (let i = 0; i < tempoMap.length; i++) { + const ev = tempoMap[i]; + if (ev.tick > tick) break; + const next = tempoMap[i + 1]; + const endTick = (next && next.tick <= tick) ? next.tick : tick; + sec += (endTick - prevTick) * (60 / (ev.bpm * ppq)); + prevTick = endTick; + if (!next || next.tick > tick) break; + } + return sec; +} + +// ─── Utility: compute measure start times in seconds ───────────────────────── +export function computeMeasureSeconds( + timeSignatures: TimeSignatureEvent[], + tempoMap: TempoEvent[], + ppq: number, + totalDuration: number, +): number[] { + if (!timeSignatures.length || !tempoMap.length) return []; + + const measures: number[] = []; + let measureTick = 0; + let tsIdx = 0; + + while (true) { + // Advance to the right time signature segment + while (tsIdx + 1 < timeSignatures.length && timeSignatures[tsIdx + 1].tick <= measureTick) { + tsIdx++; + } + const ts = timeSignatures[tsIdx]; + const ticksPerMeasure = Math.round(ppq * 4 * ts.numerator / ts.denominator); + const sec = tickToSeconds(measureTick, tempoMap, ppq); + if (sec > totalDuration + 1) break; + measures.push(sec); + measureTick += ticksPerMeasure; + if (measures.length > 2000) break; // safety cap + } + + return measures; +} + +// ─── Utility: compute every beat start time in seconds ─────────────────────── +export function computeBeatSeconds( + timeSignatures: TimeSignatureEvent[], + tempoMap: TempoEvent[], + ppq: number, + totalDuration: number, +): number[] { + if (!timeSignatures.length || !tempoMap.length) return []; + + const beats: number[] = []; + let beatTick = 0; + let tsIdx = 0; + + while (true) { + while (tsIdx + 1 < timeSignatures.length && timeSignatures[tsIdx + 1].tick <= beatTick) { + tsIdx++; + } + const ts = timeSignatures[tsIdx]; + // One beat = one denominator unit relative to the quarter note + const ticksPerBeat = Math.round(ppq * 4 / ts.denominator); + const sec = tickToSeconds(beatTick, tempoMap, ppq); + if (sec > totalDuration + 1) break; + beats.push(sec); + beatTick += ticksPerBeat; + if (beats.length > 20000) break; // safety cap + } + + return beats; +} + +// ─── Utility: scale stored seconds by tempo multiplier ─────────────────────── +export function scaleTime(storedSeconds: number, tempoMultiplier: number): number { + return storedSeconds / tempoMultiplier; +} + +// ─── Utility: MIDI note number to pitch string ──────────────────────────────── +const SHARP_NAMES = ["C", "C#", "D", "D#", "E", "F", "F#", "G", "G#", "A", "A#", "B"]; +const FLAT_NAMES = ["C", "D♭", "D", "E♭", "E", "F", "G♭", "G", "A♭", "A", "B♭", "B"]; + +export function midiToPitch(midi: number, useFlats = false): string { + const names = useFlats ? FLAT_NAMES : SHARP_NAMES; + const octave = Math.floor(midi / 12) - 1; + return `${names[midi % 12]}${octave}`; +} + +export function midiToNoteName(midi: number, useFlats = false): string { + const names = useFlats ? FLAT_NAMES : SHARP_NAMES; + return names[midi % 12]; +} + +export function isBlackKey(midi: number): boolean { + const mod = midi % 12; + return [1, 3, 6, 8, 10].includes(mod); +} diff --git a/shared/types/SyncEvent.ts b/shared/types/SyncEvent.ts new file mode 100644 index 0000000..33ea97c --- /dev/null +++ b/shared/types/SyncEvent.ts @@ -0,0 +1,89 @@ +// ─── EventBus typed event map ───────────────────────────────────────────────── +// All inter-component communication flows through these events. +// Views subscribe; only SyncEngine emits (except input:note from MIDI/WebMidi). + +import type { NoteEvent, PlaybackStatus } from "./MusicData"; + +export interface SyncEventMap { + // ── Playback events ────────────────────────────────────────────────────────── + + /** + * Emitted LOOKAHEAD_SECONDS before a note plays. + * FallingNotes pre-renders the bar so it's ready when it enters the viewport. + */ + "note:upcoming": NoteEvent; + + /** + * Emitted at the exact moment a note begins playing. + * PianoKeyboard highlights the key; Tone.js triggers the sample. + */ + "note:on": NoteEvent; + + /** + * Emitted at the exact moment a note stops playing. + * PianoKeyboard un-highlights the key. + */ + "note:off": NoteEvent; + + /** + * Emitted every animation frame (~16ms) with the current playback position. + * SheetMusicView drives the AlphaTab cursor; FallingNotesView moves bars. + */ + "transport:tick": { seconds: number; tick: number }; + + /** + * Emitted when transport status changes (play/pause/stop/loop/waiting). + */ + "transport:stateChange": { status: PlaybackStatus; seconds: number }; + + // ── User input events ──────────────────────────────────────────────────────── + + /** + * Emitted when the user plays a note on the physical piano or virtual keyboard. + * SyncEngine uses this for wait-mode comparison. + * PianoKeyboard echoes the key highlight with a different color. + */ + "input:note:on": { midi: number; velocity: number }; + + /** + * Emitted when the user releases a note. + */ + "input:note:off": { midi: number }; + + // ── Document events ────────────────────────────────────────────────────────── + + /** + * Emitted when a new MusicDocument is loaded and all views should reset. + */ + "document:loaded": { id: string; title: string; totalDuration: number }; + + /** + * Emitted when settings change that affect all views (e.g., toggle labels, + * change hand colors, toggle fingering). + */ + "settings:changed": { key: string; value: unknown }; + + // ── Transport ──────────────────────────────────────────────────────────────── + + /** + * Emitted at the start of every seek/skip so UI can release pressed keys + * before Tone cancels pending note:off callbacks. + */ + "transport:seek": { seconds: number }; + + // ── Practice features ──────────────────────────────────────────────────────── + + /** + * Emitted by SyncEngine when the speed trainer advances one step. + * The store updates settings.speedTrainer.currentPct to keep UI in sync. + */ + "speedTrainer:stepped": { currentPct: number }; + + /** + * Emitted by AccuracyTracker after each note event with running totals. + */ + "accuracy:update": { correct: number; wrong: number; missed: number; score: number }; +} + +export type SyncEventName = keyof SyncEventMap; +export type SyncEventPayload = SyncEventMap[K]; diff --git a/shared/types/index.ts b/shared/types/index.ts new file mode 100644 index 0000000..f661d00 --- /dev/null +++ b/shared/types/index.ts @@ -0,0 +1,2 @@ +export * from "./MusicData"; +export * from "./SyncEvent";