Sync from GitHub 46f60997

apps/web/__tests__/page.test.tsx

@@ -0,0 +1,126 @@
+import { describe, it, expect, vi, beforeEach, afterEach } from "vitest";
+import { render, screen, cleanup, fireEvent } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+
+// The page imports Web Audio + MIDI recorder + canvas visualizers that don't
+// exist cleanly under happy-dom. Mock the noisy, browser-only modules so we
+// can exercise the component's UI logic.
+vi.mock("@/lib/jambuddy/player", async () => {
+  const actual =
+    await vi.importActual<typeof import("@/lib/jambuddy/player")>(
+      "@/lib/jambuddy/player",
+    );
+  return {
+    ...actual,
+    playTogether: vi.fn(async () => ({
+      stop: vi.fn(),
+      done: new Promise<void>((r) => setTimeout(r, 5000)),
+    })),
+    playAudioTogether: vi.fn(async () => ({
+      stop: vi.fn(),
+      done: new Promise<void>((r) => setTimeout(r, 5000)),
+    })),
+  };
+});
+
+vi.mock("@/lib/jambuddy/recorder", () => ({
+  createMidiRecorder: vi.fn(async () => ({
+    start: vi.fn(),
+    stop: vi.fn(() => ({ notes: [], durationSec: 0 })),
+    isActive: vi.fn(() => false),
+    dispose: vi.fn(),
+  })),
+  recordedNotesAsFile: vi.fn(() => new File([""], "cap.mid")),
+}));
+
+vi.mock("@/lib/jambuddy/visualizer", () => ({
+  Visualizer: () => <div data-testid="visualizer" />,
+}));
+
+import HomePage from "@/app/page";
+
+// Object URLs the component creates (take audio + response audio).
+const createObjectURL = vi.fn(() => "blob:fake-audio");
+vi.stubGlobal("URL.createObjectURL", createObjectURL);
+
+/** Drive the app to a state with an audio take + a buddy response. */
+async function setUpTakeAndResponse(user: ReturnType<typeof userEvent.setup>) {
+  render(<HomePage />);
+  // Mock the /api/jambuddy/detect + /api/jambuddy calls (fetch).
+  vi.stubGlobal(
+    "fetch",
+    vi.fn(async (url: RequestInfo | URL, init?: RequestInit) => {
+      const u = String(url);
+      if (u.includes("/detect")) {
+        return new Response(
+          JSON.stringify({ bpm: 158, duration: 24 }),
+          { status: 200, headers: { "Content-Type": "application/json" } },
+        );
+      }
+      // joinIn -> return the generated audio blob.
+      return new Response(
+        new Blob([new Uint8Array([1, 2, 3])], { type: "audio/wav" }),
+        {
+          status: 200,
+          headers: {
+            "X-Jam-Buddy-BPM": "158",
+            "X-Jam-Buddy-Time": "1000",
+            "Content-Type": "audio/wav",
+          },
+        },
+      );
+    }),
+  );
+
+  // Upload an audio take so playBoth takes the audio-mix path.
+  const file = new File([new Uint8Array([1, 2, 3, 4])], "take.wav", {
+    type: "audio/wav",
+  });
+  const input = document.querySelector<HTMLInputElement>(
+    'input[type="file"]',
+  );
+  if (!input) throw new Error("file input not found");
+  fireEvent.change(input, { target: { files: [file] } });
+
+  // Generate the response.
+  await user.click(screen.getByRole("button", { name: "JOIN IN" }));
+  await screen.findByText(/Done — your buddy produced/i);
+}
+
+describe("PLAY TOGETHER toggle", () => {
+  beforeEach(() => {
+    vi.clearAllMocks();
+    vi.unstubAllGlobals();
+    vi.stubGlobal("URL.createObjectURL", createObjectURL);
+  });
+
+  afterEach(() => {
+    cleanup();
+  });
+
+  it("is disabled when there is no generated response", () => {
+    render(<HomePage />);
+    const btn = screen.getByRole("button", { name: "PLAY TOGETHER" });
+    expect(btn).toBeDisabled();
+  });
+
+  it("stays enabled while playing and toggles to STOP, then back", async () => {
+    const user = userEvent.setup();
+    await setUpTakeAndResponse(user);
+
+    const btn = screen.getByRole("button", { name: "PLAY TOGETHER" });
+    expect(btn).toBeEnabled();
+
+    // Start playback.
+    await user.click(btn);
+    const stopBtn = screen.getByRole("button", { name: "■ STOP" });
+    // REGRESSION GUARD: must remain enabled so it can be clicked to stop.
+    expect(stopBtn).toBeEnabled();
+
+    // Click again to stop.
+    await user.click(stopBtn);
+    expect(
+      screen.getByRole("button", { name: "PLAY TOGETHER" }),
+    ).toBeEnabled();
+  });
+});

apps/web/__tests__/setup.ts

@@ -0,0 +1 @@
+import "@testing-library/jest-dom/vitest";

apps/web/app/globals.css

@@ -121,6 +121,75 @@
   cursor: wait;
 }
 
+/* Sampler/sequencer transport pad — a big backlit pad with an LED color
+ * (set via --pad-c) that brightens when pressed. */
+.jambuddy-padbig {
+  border-radius: 0.6rem;
+  border: 2px solid rgba(0, 0, 0, 0.6);
+  background:
+    radial-gradient(circle at 50% 30%, rgba(255, 255, 255, 0.06), transparent 60%),
+    linear-gradient(180deg, #2a2d3d 0%, #1a1c28 100%);
+  color: var(--pad-c, #f4a261);
+  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
+  font-size: 1.1rem;
+  font-weight: 800;
+  letter-spacing: 0.12em;
+  padding: 1.1rem 0;
+  cursor: pointer;
+  box-shadow:
+    inset 0 -4px 8px rgba(0, 0, 0, 0.6),
+    inset 0 1px 0 rgba(255, 255, 255, 0.15),
+    0 3px 0 rgba(0, 0, 0, 0.5);
+  transition: transform 0.08s, box-shadow 0.08s, filter 0.15s;
+}
+.jambuddy-padbig:hover {
+  filter: brightness(1.12);
+}
+.jambuddy-padbig[aria-pressed="true"],
+.jambuddy-padbig:active {
+  transform: translateY(2px);
+  box-shadow:
+    inset 0 2px 6px rgba(0, 0, 0, 0.6),
+    0 0 16px var(--pad-c, #f4a261),
+    0 1px 0 rgba(0, 0, 0, 0.5);
+}
+.jambuddy-padbig:disabled {
+  opacity: 0.4;
+  cursor: wait;
+}
+.jambuddy-padbig__label {
+  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6);
+}
+
+/* Icon download button pinned beside a waveform — sized to match the track,
+ * vertically centered, with a visible border and hover glow. */
+.jambuddy-save {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  align-self: center;
+  width: 3rem;
+  height: 3rem;
+  border-radius: 0.5rem;
+  border: 1px solid #2a2d3d;
+  background: linear-gradient(180deg, #2a2d3d 0%, #1a1c28 100%);
+  color: #5fd38a;
+  cursor: pointer;
+  transition: filter 0.15s, box-shadow 0.15s, transform 0.08s;
+}
+.jambuddy-save:hover {
+  filter: brightness(1.2);
+  box-shadow: 0 0 10px rgba(95, 211, 138, 0.3);
+}
+.jambuddy-save:active {
+  transform: translateY(1px);
+}
+.jambuddy-save:disabled {
+  opacity: 0.4;
+  cursor: default;
+  box-shadow: none;
+}
+
 /* Big RED record button — a physical record arm with a glowing tip. */
 .jambuddy-record {
   border-radius: 0.5rem;

apps/web/app/page.tsx

@@ -16,7 +16,7 @@ import {
   type BuddyMood,
   type InputInstrument,
 } from "@/lib/jambuddy/prompt";
-import { parseMidi, isPercussion, midiDuration } from "@/lib/jambuddy/player";
+import { parseMidi, isPercussion, midiDuration, playTogether, playAudioTogether } from "@/lib/jambuddy/player";
 import { createMidiRecorder, recordedNotesAsFile, type MidiRecorder } from "@/lib/jambuddy/recorder";
 import { Visualizer } from "@/lib/jambuddy/visualizer";
 
@@ -134,8 +134,11 @@ export default function HomePage() {
   const [midiFile, setMidiFile] = useState<File | null>(null);
   const [midiBytes, setMidiBytes] = useState<ArrayBuffer | null>(null);
   const [audioFile, setAudioFile] = useState<File | null>(null);
+  // Object URL of the uploaded audio take (for playback + waveform).
+  const [takeAudioUrl, setTakeAudioUrl] = useState<string | null>(null);
   const [status, setStatus] = useState<string>("Ready.");
   const [audioUrl, setAudioUrl] = useState<string | null>(null);
+  const [isPlayingTogether, setIsPlayingTogether] = useState(false);
   const [usedBpm, setUsedBpm] = useState<number | null>(null);
   const [usedSeconds, setUsedSeconds] = useState<number | null>(null);
   const [busy, setBusy] = useState(false);
@@ -191,6 +194,8 @@ export default function HomePage() {
     setMidiFile(null);
     setMidiBytes(null);
     setAudioFile(null);
+    if (takeAudioUrl) URL.revokeObjectURL(takeAudioUrl);
+    setTakeAudioUrl(null);
     if (!f) {
       setStatus("Ready.");
       return;
@@ -215,6 +220,7 @@ export default function HomePage() {
       );
     } else {
       setAudioFile(f);
+      setTakeAudioUrl(URL.createObjectURL(f));
       // Audio is heard by the buddy (audio-to-audio). Clear the MIDI-driven
       // input-instrument default so the user's declaration reflects the audio.
       setInputInstrument("other");
@@ -310,6 +316,79 @@ export default function HomePage() {
     setStatus("Saved your recorded MIDI take.");
   }
 
+  /** Download the generated buddy response (audio) as a file. */
+  function saveGeneratedAudio() {
+    if (!audioUrl) {
+      setStatus("Generate a response first, then save it.");
+      return;
+    }
+    const a = document.createElement("a");
+    a.href = audioUrl;
+    a.download = `jambuddy-response-${new Date()
+      .toISOString()
+      .replace(/[-:]/g, "")
+      .replace(/\.\d+Z$/, "Z")}.${mode === "api" ? "mp3" : "wav"}`;
+    a.rel = "noopener";
+    document.body.appendChild(a);
+    a.click();
+    document.body.removeChild(a);
+    setStatus("Saved the buddy's response.");
+  }
+
+  /** Play the take and the buddy response together (audio mix, or MIDI synth).
+   * Toggle: pressing again stops playback.
+   *
+   * Re-entry guard: isPlayingTogether is React state (async), so a fast second
+   * click can read a stale `false` and start a SECOND simultaneous layer. Keep
+   * a synchronous ref so the toggle is atomic. */
+  const playbackRef = useRef<{ stop: () => void } | null>(null);
+  const audioRef = useRef<HTMLAudioElement | null>(null);
+  async function playBoth() {
+    if (playbackRef.current) {
+      // Stop: kill current playback (synchronous — immune to stale state).
+      playbackRef.current.stop();
+      playbackRef.current = null;
+      setIsPlayingTogether(false);
+      setStatus("Stopped.");
+      return;
+    }
+    if (!audioUrl) {
+      setStatus("Generate a response first.");
+      return;
+    }
+    // Pause the standalone audio element so the response isn't heard twice.
+    audioRef.current?.pause();
+    playbackRef.current = { stop: () => {} }; // claim the toggle synchronously
+    setIsPlayingTogether(true);
+    setStatus("Playing your take + the buddy together…");
+    try {
+      let handle: { stop: () => void; done: Promise<void> };
+      if (midiBytes) {
+        // MIDI take: render with the built-in synth, layered with the buddy.
+        handle = await playTogether(midiBytes, audioUrl);
+      } else if (takeAudioUrl) {
+        // Audio take: mix the two audio files on the same clock.
+        handle = await playAudioTogether(takeAudioUrl, audioUrl);
+      } else {
+        playbackRef.current = null;
+        setIsPlayingTogether(false);
+        setStatus("Load a take first to play it with the response.");
+        return;
+      }
+      playbackRef.current = handle;
+      await handle.done;
+      if (playbackRef.current === handle) {
+        playbackRef.current = null;
+        setIsPlayingTogether(false);
+        setStatus("Done — both played together.");
+      }
+    } catch (e) {
+      playbackRef.current = null;
+      setIsPlayingTogether(false);
+      setStatus(`Playback error: ${String(e)}`);
+    }
+  }
+
   async function joinIn() {
     setBusy(true);
     setStatus(
@@ -437,6 +516,13 @@ export default function HomePage() {
           />
         </section>
 
+        {/* Prompt — mirrors the knobs, shown right below them */}
+        <div className="mb-6 rounded bg-[#15161f] px-4 py-2 font-mono text-xs text-[#7f829c]">
+          <div className="uppercase tracking-widest">Prompt</div>
+          <div className="mt-1 truncate text-[#e8e8f0]">{prompt}</div>
+          <div className="mt-1 opacity-60">neg: {negativePrompt}</div>
+        </div>
+
         {/* Your-take-is knob — declares what instrument the user is playing
             so the buddy can complement it (no MIR on input). */}
         <section
@@ -522,44 +608,44 @@ export default function HomePage() {
               : "Local CPU · free · supports negative prompt · slower"}
           </span>
         </div>
-        <div className="mb-2 flex items-center gap-4">
+        {/* Transport — sampler/sequencer pads */}
+        <div className="mb-2 grid grid-cols-3 gap-4">
           <button
             type="button"
             onClick={toggleRecord}
             disabled={busy}
             aria-pressed={recording}
             aria-label={recording ? "Stop recording" : "Record from MIDI controller"}
-            className="jambuddy-record flex-1"
+            className="jambuddy-padbig flex-1"
+            style={{ ["--pad-c" as string]: "#e05252" }}
           >
-            {recording ? "■ STOP" : "● RECORD"}
+            <span className="jambuddy-padbig__label">
+              {recording ? "■ STOP" : "● RECORD"}
+            </span>
           </button>
           <button
             type="button"
-            onClick={saveRecordedMidi}
-            disabled={!recordedMidiUrl || busy}
-            className="jambuddy-trigger flex-1"
-            style={{
-              background: "linear-gradient(180deg,#5fd38a 0%,#3aa55f 100%)",
-              boxShadow: "0 2px 0 #256b3f",
-            }}
+            onClick={joinIn}
+            disabled={busy}
+            className="jambuddy-padbig flex-1"
+            style={{ ["--pad-c" as string]: "#f4a261" }}
           >
-            SAVE MIDI
+            <span className="jambuddy-padbig__label">
+              {busy ? "PRODUCING…" : "JOIN IN"}
+            </span>
           </button>
           <button
             type="button"
-            onClick={joinIn}
-            disabled={busy}
-            className="jambuddy-trigger flex-1"
+            onClick={playBoth}
+            disabled={!audioUrl}
+            aria-pressed={isPlayingTogether}
+            className="jambuddy-padbig flex-1"
+            style={{ ["--pad-c" as string]: "#5fd38a" }}
           >
-            {busy ? "PRODUCING…" : "JOIN IN"}
+            <span className="jambuddy-padbig__label">
+              {isPlayingTogether ? "■ STOP" : "PLAY TOGETHER"}
+            </span>
           </button>
-          <div className="font-mono text-xs text-[#7f829c]">
-            <div className="uppercase tracking-widest">Prompt</div>
-            <div className="mt-1 max-w-[16rem] truncate text-[#e8e8f0]">
-              {prompt}
-            </div>
-            <div className="mt-1 opacity-60">neg: {negativePrompt}</div>
-          </div>
         </div>
 
         {/* Status + playback */}
@@ -588,26 +674,85 @@ export default function HomePage() {
             </p>
           )}
           {audioUrl && (
-            <audio controls src={audioUrl} className="mt-3 w-full">
+            <audio
+              ref={audioRef}
+              controls
+              src={audioUrl}
+              className="mt-3 w-full"
+            >
               Your browser does not support audio playback.
             </audio>
           )}
         </section>
 
-        {/* Take + response visualizers */}
-        {(midiBytes || audioUrl) && (
+        {/* Take + response visualizers — stacked vertically, DAW-style.
+            Each waveform has its own SAVE button beside it. */}
+        {(midiBytes || takeAudioUrl || audioUrl) && (
           <section
             aria-label="Take and response"
-            className="mt-4 grid grid-cols-1 gap-4 sm:grid-cols-2"
+            className="mt-4 flex flex-col gap-4"
           >
-            <Visualizer
-              midiBytes={midiBytes}
-              label="Your take (MIDI piano-roll)"
-            />
-            <Visualizer
-              audioUrl={audioUrl}
-              label="Buddy response (waveform)"
-            />
+            {midiBytes ? (
+              <div className="flex items-end gap-3">
+                <div className="flex-1">
+                  <Visualizer
+                    midiBytes={midiBytes}
+                    label="Your take (MIDI piano-roll)"
+                  />
+                </div>
+                <button
+                  type="button"
+                  onClick={saveRecordedMidi}
+                  disabled={!recordedMidiUrl}
+                  className="jambuddy-save"
+                  title="Download this MIDI take"
+                  aria-label="Download this MIDI take"
+                >
+                  <svg viewBox="0 0 24 24" width="26" height="26" fill="none"
+                    stroke="currentColor" strokeWidth="2.2" strokeLinecap="round"
+                    strokeLinejoin="round" aria-hidden="true">
+                    <path d="M12 3v12" />
+                    <path d="M6 11l6 6 6-6" />
+                    <path d="M4 20h16" />
+                  </svg>
+                </button>
+              </div>
+            ) : takeAudioUrl ? (
+              <div className="flex items-end gap-3">
+                <div className="flex-1">
+                  <Visualizer
+                    audioUrl={takeAudioUrl}
+                    label="Your take (audio waveform)"
+                  />
+                </div>
+              </div>
+            ) : null}
+            {audioUrl && (
+              <div className="flex items-end gap-3">
+                <div className="flex-1">
+                  <Visualizer
+                    audioUrl={audioUrl}
+                    label="Buddy response (waveform)"
+                  />
+                </div>
+                <button
+                  type="button"
+                  onClick={saveGeneratedAudio}
+                  disabled={!audioUrl}
+                  className="jambuddy-save"
+                  title="Download this response"
+                  aria-label="Download this response"
+                >
+                  <svg viewBox="0 0 24 24" width="26" height="26" fill="none"
+                    stroke="currentColor" strokeWidth="2.2" strokeLinecap="round"
+                    strokeLinejoin="round" aria-hidden="true">
+                    <path d="M12 3v12" />
+                    <path d="M6 11l6 6 6-6" />
+                    <path d="M4 20h16" />
+                  </svg>
+                </button>
+              </div>
+            )}
           </section>
         )}
       </div>

apps/web/lib/jambuddy/player.ts

@@ -207,3 +207,73 @@ export function midiDuration(buf: ArrayBuffer): number {
     return 30;
   }
 }
+
+/**
+ * Play an AUDIO take and the buddy response TOGETHER (mixed on the same clock).
+ * This is the audio-take analogue of playTogether (which is MIDI + buddy).
+ * Both are decoded AudioBuffers scheduled to start at the same time.
+ *
+ * @param takeAudioUrl   the user's audio take (object URL)
+ * @param buddyAudioUrl  the generated response (object URL)
+ * @returns an object with stop() and a promise resolving when both finish.
+ */
+export async function playAudioTogether(
+  takeAudioUrl: string,
+  buddyAudioUrl: string,
+): Promise<{ stop: () => void; done: Promise<void> }> {
+  const ctx = new AudioContext();
+  await ctx.resume();
+
+  const decode = async (url: string) => {
+    const resp = await fetch(url);
+    const buf = await resp.arrayBuffer();
+    return ctx.decodeAudioData(buf);
+  };
+
+  const [takeBuffer, buddyBuffer] = await Promise.all([
+    decode(takeAudioUrl),
+    decode(buddyAudioUrl),
+  ]);
+
+  const master = ctx.createGain();
+  master.gain.value = 0.8;
+  master.connect(ctx.destination);
+
+  const startAt = ctx.currentTime + 0.1;
+
+  const takeSrc = ctx.createBufferSource();
+  takeSrc.buffer = takeBuffer;
+  takeSrc.connect(master);
+  takeSrc.start(startAt);
+
+  const buddySrc = ctx.createBufferSource();
+  buddySrc.buffer = buddyBuffer;
+  buddySrc.connect(master);
+  buddySrc.start(startAt);
+
+  const end = startAt + Math.max(takeBuffer.duration, buddyBuffer.duration);
+
+  const done = new Promise<void>((resolve) => {
+    setTimeout(() => {
+      try {
+        ctx.close();
+      } catch {
+        /* already closed */
+      }
+      resolve();
+    }, Math.max(0, (end - ctx.currentTime) * 1000) + 200);
+  });
+
+  return {
+    stop: () => {
+      try {
+        takeSrc.stop();
+        buddySrc.stop();
+        ctx.close();
+      } catch {
+        /* ignore */
+      }
+    },
+    done,
+  };
+}

apps/web/package.json

@@ -20,6 +20,10 @@
     "react-dom": "^18.3.1"
   },
   "devDependencies": {
+    "@testing-library/dom": "^10.4.1",
+    "@testing-library/jest-dom": "^7.0.1",
+    "@testing-library/react": "^16.3.2",
+    "@testing-library/user-event": "^14.6.6",
     "@types/node": "^22.9.3",
     "@types/react": "^18.3.12",
     "@types/react-dom": "^18.3.1",

apps/web/vitest.config.ts

@@ -7,6 +7,7 @@ export default defineConfig({
   test: {
     environment: "happy-dom",
     globals: false,
+    setupFiles: ["./__tests__/setup.ts"],
     include: ["__tests__/**/*.test.ts", "__tests__/**/*.test.tsx"],
   },
   resolve: {

pnpm-lock.yaml

@@ -30,6 +30,18 @@ importers:
         specifier: ^18.3.1
         version: 18.3.1(react@18.3.1)
     devDependencies:
+      '@testing-library/dom':
+        specifier: ^10.4.1
+        version: 10.4.1
+      '@testing-library/jest-dom':
+        specifier: ^7.0.1
+        version: 7.0.1(@testing-library/dom@10.4.1)(vitest@2.1.9(@types/node@22.20.1)(happy-dom@15.11.7))
+      '@testing-library/react':
+        specifier: ^16.3.2
+        version: 16.3.2(@testing-library/dom@10.4.1)(@types/react-dom@18.3.7(@types/react@18.3.31))(@types/react@18.3.31)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      '@testing-library/user-event':
+        specifier: ^14.6.6
+        version: 14.6.6(@testing-library/dom@10.4.1)
       '@types/node':
         specifier: ^22.9.3
         version: 22.20.1
@@ -75,6 +87,9 @@ importers:
 
 packages:
 
+  '@adobe/css-tools@4.5.0':
+    resolution: {integrity: sha512-6OzddxPio9UiWTCemp4N8cYLV2ZN1ncRnV1cVGtve7dhPOtRkleRyx32GQCYSwDYgaHU3USMm84tNsvKzRCa1Q==}
+
   '@alloc/quick-lru@5.2.0':
     resolution: {integrity: sha512-UrcABB+4bUrFABwbluTIBErXwvbsU/V7TZWfmbgJfbkwiBuziS9gxdODUyuiecfdGQ85jglMW6juS3+z5TsKLw==}
     engines: {node: '>=10'}
@@ -150,6 +165,10 @@ packages:
     peerDependencies:
       '@babel/core': ^7.0.0-0
 
+  '@babel/runtime@7.29.7':
+    resolution: {integrity: sha512-Nq8OhGWiZIZGV6hLHoyAKLLcJihP/xFeBMGJoUrxTX2psI8dCifzLhZISFb+VWS3wFMRDmCGw5R+dOySCqPLhw==}
+    engines: {node: '>=6.9.0'}
+
   '@babel/template@7.29.7':
     resolution: {integrity: sha512-puq+Gf35oI24FeN11LkoUQFqv9uwNeWpxXZi/Ji3rRIoKAzKnxRaZ+Gkj0vKS9ZCiTESfng1N9LyOyXvo+m+Gg==}
     engines: {node: '>=6.9.0'}
@@ -593,12 +612,50 @@ packages:
   '@swc/helpers@0.5.5':
     resolution: {integrity: sha512-KGYxvIOXcceOAbEk4bi/dVLEK9z8sZ0uBB3Il5b1rhfClSpcX0yfRO0KmTkqR2cnQDymwLB+25ZyMzICg/cm/A==}
 
+  '@testing-library/dom@10.4.1':
+    resolution: {integrity: sha512-o4PXJQidqJl82ckFaXUeoAW+XysPLauYI43Abki5hABd853iMhitooc6znOnczgbTYmEP6U6/y1ZyKAIsvMKGg==}
+    engines: {node: '>=18'}
+
+  '@testing-library/jest-dom@7.0.1':
+    resolution: {integrity: sha512-oMDTC3oA+6CXSO2JZnvOI7CA6oVub6kij5ggk9ohwye5slmkwxYDXcPOVxgMw/RQlticjtO0C1RZkR97HgrWMw==}
+    engines: {node: '>=22', npm: '>=6', yarn: '>=1'}
+    peerDependencies:
+      '@testing-library/dom': '>=10 <11'
+      vitest: '>= 0.32'
+    peerDependenciesMeta:
+      vitest:
+        optional: true
+
+  '@testing-library/react@16.3.2':
+    resolution: {integrity: sha512-XU5/SytQM+ykqMnAnvB2umaJNIOsLF3PVv//1Ew4CTcpz0/BRyy/af40qqrt7SjKpDdT1saBMc42CUok5gaw+g==}
+    engines: {node: '>=18'}
+    peerDependencies:
+      '@testing-library/dom': ^10.0.0
+      '@types/react': ^18.0.0 || ^19.0.0
+      '@types/react-dom': ^18.0.0 || ^19.0.0
+      react: ^18.0.0 || ^19.0.0
+      react-dom: ^18.0.0 || ^19.0.0
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+      '@types/react-dom':
+        optional: true
+
+  '@testing-library/user-event@14.6.6':
+    resolution: {integrity: sha512-Jbs9FpkkIDw8FgSc6kOVsOv8JuuqGAL7J4X1oot77JxAoDlkNn2GRkd0aYRVuQ+pVQAiHWVkE4rX/dkF5fBiCw==}
+    engines: {node: '>=12', npm: '>=6'}
+    peerDependencies:
+      '@testing-library/dom': '>=7.21.4'
+
   '@tonejs/midi@2.0.28':
     resolution: {integrity: sha512-RII6YpInPsOZ5t3Si/20QKpNqB1lZ2OCFJSOzJxz38YdY/3zqDr3uaml4JuCWkdixuPqP1/TBnXzhQ39csyoVg==}
 
   '@tybys/wasm-util@0.10.3':
     resolution: {integrity: sha512-F3fo1MYrRJYL3zER0OUOmkutjr1Vp23m7OsSgp7nq4SP6OqX6C/56XFIPAl5bt3zaBRjmW7SGz3u/6LwFpYcOg==}
 
+  '@types/aria-query@5.0.4':
+    resolution: {integrity: sha512-rfT93uj5s0PRL7EzccGMs3brplhcrghnDoV26NqKhCAS1hVo+WdNsPvE/yb6ilfr5hi2MEk6d5EWJTKdxg8jVw==}
+
   '@types/babel__core@7.20.5':
     resolution: {integrity: sha512-qoQprZvz5wQFJwMDqeseRXWv3rqMvhgpbXFfVyWhbx9X47POIA6i/+dXefEmZKoAgOaTdaIgNSMqMIU61yRyzA==}
 
@@ -863,6 +920,10 @@ packages:
     resolution: {integrity: sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==}
     engines: {node: '>=8'}
 
+  ansi-styles@5.2.0:
+    resolution: {integrity: sha512-Cxwpt2SfTzTtXcfOlzGEee8O+c+MmUgGrNiBcXnuWxuFJHe6a5Hz7qwhwe5OgaSYI0IJvkLqWX1ASG+cJOkEiA==}
+    engines: {node: '>=10'}
+
   ansi-styles@6.2.3:
     resolution: {integrity: sha512-4Dj6M28JB+oAH8kFkTLUo+a2jwOFkuqb3yucU0CANcRRUbxS0cP0nZYCGjcc3BNXwRIsUVmDGgzawme7zvJHvg==}
     engines: {node: '>=12'}
@@ -880,6 +941,9 @@ packages:
   argparse@2.0.1:
     resolution: {integrity: sha512-8+9WqebbFzpX9OR+Wa6O29asIogeRMzcGtAINdpMHHyAg10f05aSFVBbcEqGf/PXw1EjAZ+q2/bEBg3DvurK3Q==}
 
+  aria-query@5.3.0:
+    resolution: {integrity: sha512-b0P0sZPKtyu8HkeRAfCq0IfURZK+SuwMjY1UXGBU27wpAiTwQAIlq56IbIO+ytk/JjS1fMR14ee5WBBfKi5J6A==}
+
   aria-query@5.3.2:
     resolution: {integrity: sha512-COROpnaoap1E2F000S62r6A60uHZnmlvomhfyT2DlTcrY1OrBKn2UhH7qn5wTC9zMvD0AY7csdPSNwKP+7WiQw==}
     engines: {node: '>= 0.4'}
@@ -1055,6 +1119,9 @@ packages:
     resolution: {integrity: sha512-uV2QOWP2nWzsy2aMp8aRibhi9dlzF5Hgh5SHaB9OiTGEyDTiJJyx0uy51QXdyWbtAHNua4XJzUKca3OzKUd3vA==}
     engines: {node: '>= 8'}
 
+  css.escape@1.5.1:
+    resolution: {integrity: sha512-YUifsXXuknHlUsmlgyY0PKzgPOr7/FjCePfHNt0jxm83wHZi44VDMQ7/fGNkjY3/jV1MC+1CmZbaHzugyeRtpg==}
+
   cssesc@3.0.0:
     resolution: {integrity: sha512-/Tb/JcjK111nNScGob5MNtsntNM1aCNUDipB/TkwZFhyDrrE47SOx/18wF2bbjgc3ZzCSKW1T5nt5EbFoAz/Vg==}
     engines: {node: '>=4'}
@@ -1110,6 +1177,10 @@ packages:
     resolution: {integrity: sha512-8QmQKqEASLd5nx0U1B1okLElbUuuttJ/AnYmRXbbbGDWh6uS208EjD4Xqq/I9wK7u0v6O08XhTWnt5XtEbR6Dg==}
     engines: {node: '>= 0.4'}
 
+  dequal@2.0.3:
+    resolution: {integrity: sha512-0je+qPKHEMohvfRTCEo3CrPG6cAzAYgmzKyxRiYSSDkS6eGJdyVJm7WaYA5ECaAD9wLB2T4EEeymA5aFVcYXCA==}
+    engines: {node: '>=6'}
+
   didyoumean@1.2.2:
     resolution: {integrity: sha512-gxtyfqMg7GKyhQmb056K7M3xszy/myH8w+B4RT+QXBQsvAOdc3XymqDDPHx1BgPgsdAA5SIifona89YtRATDzw==}
 
@@ -1124,6 +1195,12 @@ packages:
     resolution: {integrity: sha512-yS+Q5i3hBf7GBkd4KG8a7eBNNWNGLTaEwwYWUijIYM7zrlYDM0BFXHjjPWlWZ1Rg7UaddZeIDmi9jF3HmqiQ2w==}
     engines: {node: '>=6.0.0'}
 
+  dom-accessibility-api@0.5.16:
+    resolution: {integrity: sha512-X7BJ2yElsnOJ30pZF4uIIDfBEVgF4XEBxL9Bxhy6dnrm5hkzqmsWHGTiHqRiITNhMyFLyAiWndIJP7Z1NTteDg==}
+
+  dom-accessibility-api@0.6.3:
+    resolution: {integrity: sha512-7ZgogeTnjuHbo+ct10G9Ffp0mif17idi0IyWNVA/wcwcm7NPOD/WEHVP3n7n3MhXqxoIYm8d6MuZohYWIZ4T3w==}
+
   dunder-proto@1.0.1:
     resolution: {integrity: sha512-KIN/nDJBQRcXw0MLVhZE9iQHmG68qAVIBg9CqmUYjmQIhgij9U5MFvrqkUL5FbtyyzZuOeOt0zdeRe4UY7ct+A==}
     engines: {node: '>= 0.4'}
@@ -1494,6 +1571,10 @@ packages:
     resolution: {integrity: sha512-JmXMZ6wuvDmLiHEml9ykzqO6lwFbof0GG4IkcGaENdCRDDmMVnny7s5HsIgHCbaq0w2MyPhDqkhTUgS2LU2PHA==}
     engines: {node: '>=0.8.19'}
 
+  indent-string@4.0.0:
+    resolution: {integrity: sha512-EdDDZu4A2OyIK7Lr/2zG+w5jmbuk1DVBnEwREQvBzspBJkCEbRa8GxU1lghYcaGJCnRWibjDXlq779X1/y5xwg==}
+    engines: {node: '>=8'}
+
   inflight@1.0.6:
     resolution: {integrity: sha512-k92I/b08q4wvFscXCLvqfsHCrjrF7yiXsQuIVvVE7N82W3+aqpzuUdBbfhWcy/FZR3/4IgflMgKLOsvPDrGCJA==}
     deprecated: This module is not supported, and leaks memory. Do not use it. Check out lru-cache if you want a good and tested way to coalesce async requests by a key value, which is much more comprehensive and powerful.
@@ -1717,6 +1798,10 @@ packages:
   lru-cache@5.1.1:
     resolution: {integrity: sha512-KpNARQA3Iwv+jTA0utUVVbrh+Jlrr1Fv0e56GGzAFOXN7dk/FviaDW8LHmK52DlcH4WP2n6gI8vN1aesBFgo9w==}
 
+  lz-string@1.5.0:
+    resolution: {integrity: sha512-h5bgJWpxJNswbU7qCrV0tIKQCaS3blPDrqKWx+QxzuzL1zGUzij9XCWLrSLsJPu5t+eWA/ycetzYAO5IOMcWAQ==}
+    hasBin: true
+
   magic-string@0.30.21:
     resolution: {integrity: sha512-vd2F4YUyEXKGcLHoq+TEyCjxueSeHnFxyyjNp80yg0XV4vUhnDer/lvvlqM/arB5bXQN5K2/3oinyCRyx8T2CQ==}
 
@@ -1735,6 +1820,10 @@ packages:
   midi-file@1.2.4:
     resolution: {integrity: sha512-B5SnBC6i2bwJIXTY9MElIydJwAmnKx+r5eJ1jknTLetzLflEl0GWveuBB6ACrQpecSRkOB6fhTx1PwXk2BVxnA==}
 
+  min-indent@1.0.1:
+    resolution: {integrity: sha512-I9jwMn07Sy/IwOj3zVkVik2JTvgpaykDZEigL6Rx6N9LbMywwUSMtxET+7lVoDLLd3O3IXwJwvuuns8UB/HeAg==}
+    engines: {node: '>=4'}
+
   minimatch@10.2.6:
     resolution: {integrity: sha512-vpLQEs+VLCr1nU0BXS07maYoFwlDAH0gngQuuttxIwutDFEMHq2blX+8vpgxDdK3J1PwjCJiep77OitTZ4Ll1A==}
     engines: {node: 18 || 20 || >=22}
@@ -1965,6 +2054,10 @@ packages:
     resolution: {integrity: sha512-vkcDPrRZo1QZLbn5RLGPpg/WmIQ65qoWWhcGKf/b5eplkkarX0m9z8ppCat4mlOqUsWpyNuYgO3VRyrYHSzX5g==}
     engines: {node: '>= 0.8.0'}
 
+  pretty-format@27.5.1:
+    resolution: {integrity: sha512-Qb1gy5OrP5+zDf2Bvnzdl3jsTf1qXVMazbvCoKhtKqVs4/YK4ozX4gKQJJVyNe+cajNPn0KoC0MC3FUmaHWEmQ==}
+    engines: {node: ^10.13.0 || ^12.13.0 || ^14.15.0 || >=15.0.0}
+
   prop-types@15.8.1:
     resolution: {integrity: sha512-oj87CgZICdulUohogVAR7AjlC0327U4el4L6eAvOqCeudMDVU0NThNaV+b9Df4dXgSP1gXMTnPdhfe/2qDH5cg==}
 
@@ -1983,6 +2076,9 @@ packages:
   react-is@16.13.1:
     resolution: {integrity: sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==}
 
+  react-is@17.0.2:
+    resolution: {integrity: sha512-w2GsyukL62IJnlaff/nRegPQR94C/XXamvMWmSHRJ4y7Ts/4ocGRmTHvOs8PSE6pB3dWOrD/nueuU5sduBsQ4w==}
+
   react-refresh@0.17.0:
     resolution: {integrity: sha512-z6F7K9bV85EfseRCp2bzrpyQ0Gkw1uLoCel9XBVWPg/TjRj94SkJzUTGfOa4bs7iJvBWtQG0Wq7wnI0syw3EBQ==}
     engines: {node: '>=0.10.0'}
@@ -1998,6 +2094,10 @@ packages:
     resolution: {integrity: sha512-hOS089on8RduqdbhvQ5Z37A0ESjsqz6qnRcffsMU3495FuTdqSm+7bhJ29JvIOsBDEEnan5DPu9t3To9VRlMzA==}
     engines: {node: '>=8.10.0'}
 
+  redent@3.0.0:
+    resolution: {integrity: sha512-6tDA8g98We0zd0GvVeMT9arEOnTw9qM03L9cJXaCjrip1OO764RDBLBfrB4cwzNGDj5OA5ioymC9GkizgWJDUg==}
+    engines: {node: '>=8'}
+
   reflect.getprototypeof@1.0.10:
     resolution: {integrity: sha512-00o4I+DVrefhv+nX0ulyi3biSHCPDe+yLv5o/p6d/UVlirijB8E16FtfwSAi4g3tcqrQ4lRAqQSoFEZJehYEcw==}
     engines: {node: '>= 0.4'}
@@ -2171,6 +2271,10 @@ packages:
     resolution: {integrity: sha512-vavAMRXOgBVNF6nyEEmL3DBK19iRpDcoIwW+swQ+CbGiu7lju6t+JklA1MHweoWtadgt4ISVUsXLyDq34ddcwA==}
     engines: {node: '>=4'}
 
+  strip-indent@3.0.0:
+    resolution: {integrity: sha512-laJTa3Jb+VQpaC6DseHhF7dXVqHTfJPCRDaEbid/drOhgitgYku/letMUqOXFoWV0zIIUbjpdH2t+tYj4bQMRQ==}
+    engines: {node: '>=8'}
+
   strip-json-comments@3.1.1:
     resolution: {integrity: sha512-6fPc+R4ihwqP6N/aIv2f1gMH8lOVtWQHoqC4yK6oSDVVocumAsfCqjkXnqiYMhmMwS/mEHLp7Vehlt3ql6lEig==}
     engines: {node: '>=8'}
@@ -2427,6 +2531,8 @@ packages:
 
 snapshots:
 
+  '@adobe/css-tools@4.5.0': {}
+
   '@alloc/quick-lru@5.2.0': {}
 
   '@babel/code-frame@7.29.7':
@@ -2518,6 +2624,8 @@ snapshots:
       '@babel/core': 7.29.7
       '@babel/helper-plugin-utils': 7.29.7
 
+  '@babel/runtime@7.29.7': {}
+
   '@babel/template@7.29.7':
     dependencies:
       '@babel/code-frame': 7.29.7
@@ -2837,6 +2945,43 @@ snapshots:
       '@swc/counter': 0.1.3
       tslib: 2.8.1
 
+  '@testing-library/dom@10.4.1':
+    dependencies:
+      '@babel/code-frame': 7.29.7
+      '@babel/runtime': 7.29.7
+      '@types/aria-query': 5.0.4
+      aria-query: 5.3.0
+      dom-accessibility-api: 0.5.16
+      lz-string: 1.5.0
+      picocolors: 1.1.1
+      pretty-format: 27.5.1
+
+  '@testing-library/jest-dom@7.0.1(@testing-library/dom@10.4.1)(vitest@2.1.9(@types/node@22.20.1)(happy-dom@15.11.7))':
+    dependencies:
+      '@adobe/css-tools': 4.5.0
+      '@testing-library/dom': 10.4.1
+      aria-query: 5.3.2
+      css.escape: 1.5.1
+      dom-accessibility-api: 0.6.3
+      picocolors: 1.1.1
+      redent: 3.0.0
+    optionalDependencies:
+      vitest: 2.1.9(@types/node@22.20.1)(happy-dom@15.11.7)
+
+  '@testing-library/react@16.3.2(@testing-library/dom@10.4.1)(@types/react-dom@18.3.7(@types/react@18.3.31))(@types/react@18.3.31)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)':
+    dependencies:
+      '@babel/runtime': 7.29.7
+      '@testing-library/dom': 10.4.1
+      react: 18.3.1
+      react-dom: 18.3.1(react@18.3.1)
+    optionalDependencies:
+      '@types/react': 18.3.31
+      '@types/react-dom': 18.3.7(@types/react@18.3.31)
+
+  '@testing-library/user-event@14.6.6(@testing-library/dom@10.4.1)':
+    dependencies:
+      '@testing-library/dom': 10.4.1
+
   '@tonejs/midi@2.0.28':
     dependencies:
       array-flatten: 3.0.0
@@ -2847,6 +2992,8 @@ snapshots:
       tslib: 2.8.1
     optional: true
 
+  '@types/aria-query@5.0.4': {}
+
   '@types/babel__core@7.20.5':
     dependencies:
       '@babel/parser': 7.29.8
@@ -3123,6 +3270,8 @@ snapshots:
     dependencies:
       color-convert: 2.0.1
 
+  ansi-styles@5.2.0: {}
+
   ansi-styles@6.2.3: {}
 
   any-promise@1.3.0: {}
@@ -3136,6 +3285,10 @@ snapshots:
 
   argparse@2.0.1: {}
 
+  aria-query@5.3.0:
+    dependencies:
+      dequal: 2.0.3
+
   aria-query@5.3.2: {}
 
   array-buffer-byte-length@1.0.2:
@@ -3339,6 +3492,8 @@ snapshots:
       shebang-command: 2.0.0
       which: 2.0.2
 
+  css.escape@1.5.1: {}
+
   cssesc@3.0.0: {}
 
   csstype@3.2.3: {}
@@ -3387,6 +3542,8 @@ snapshots:
       has-property-descriptors: 1.0.2
       object-keys: 1.1.1
 
+  dequal@2.0.3: {}
+
   didyoumean@1.2.2: {}
 
   dlv@1.1.3: {}
@@ -3399,6 +3556,10 @@ snapshots:
     dependencies:
       esutils: 2.0.3
 
+  dom-accessibility-api@0.5.16: {}
+
+  dom-accessibility-api@0.6.3: {}
+
   dunder-proto@1.0.1:
     dependencies:
       call-bind-apply-helpers: 1.0.2
@@ -3948,6 +4109,8 @@ snapshots:
 
   imurmurhash@0.1.4: {}
 
+  indent-string@4.0.0: {}
+
   inflight@1.0.6:
     dependencies:
       once: 1.4.0
@@ -4170,6 +4333,8 @@ snapshots:
     dependencies:
       yallist: 3.1.1
 
+  lz-string@1.5.0: {}
+
   magic-string@0.30.21:
     dependencies:
       '@jridgewell/sourcemap-codec': 1.5.5
@@ -4185,6 +4350,8 @@ snapshots:
 
   midi-file@1.2.4: {}
 
+  min-indent@1.0.1: {}
+
   minimatch@10.2.6:
     dependencies:
       brace-expansion: 5.0.9
@@ -4401,6 +4568,12 @@ snapshots:
 
   prelude-ls@1.2.1: {}
 
+  pretty-format@27.5.1:
+    dependencies:
+      ansi-regex: 5.0.1
+      ansi-styles: 5.2.0
+      react-is: 17.0.2
+
   prop-types@15.8.1:
     dependencies:
       loose-envify: 1.4.0
@@ -4419,6 +4592,8 @@ snapshots:
 
   react-is@16.13.1: {}
 
+  react-is@17.0.2: {}
+
   react-refresh@0.17.0: {}
 
   react@18.3.1:
@@ -4433,6 +4608,11 @@ snapshots:
     dependencies:
       picomatch: 2.3.2
 
+  redent@3.0.0:
+    dependencies:
+      indent-string: 4.0.0
+      strip-indent: 3.0.0
+
   reflect.getprototypeof@1.0.10:
     dependencies:
       call-bind: 1.0.9
@@ -4690,6 +4870,10 @@ snapshots:
 
   strip-bom@3.0.0: {}
 
+  strip-indent@3.0.0:
+    dependencies:
+      min-indent: 1.0.1
+
   strip-json-comments@3.1.1: {}
 
   styled-jsx@5.1.1(@babel/core@7.29.7)(react@18.3.1):