From 4bc9a52d1725c30155b9eca42c7b65595d32c1a8 Mon Sep 17 00:00:00 2001
From: Estelle Comment <estelle.comment@gmail.com>
Date: Tue, 18 Nov 2025 16:36:44 +0100
Subject: [PATCH 01/13] Make whistle-in optional in example song

---
 src/config.ts                         |  9 ++++++++-
 src/ui/listen/example-song-player.vue | 12 +++++++-----
 2 files changed, 15 insertions(+), 6 deletions(-)

diff --git a/src/config.ts b/src/config.ts
index bf4a97810..15e2480b0 100644
--- a/src/config.ts
+++ b/src/config.ts
@@ -65,6 +65,11 @@ export type Config = {
 	 * The default speed to use for tunes that don't specify a separate default speed, in beats per minute.
 	 */
 	defaultSpeed: number;
+
+	/**
+	 * Whether to display a whistle-in block to start the example song on a song's main page.
+	 */
+	startSongWithWhistleIn: boolean;
 };
 
 const config: Config = {
@@ -304,7 +309,9 @@ const config: Config = {
 
 	tuneOfTheYear: "The Roof Is on Fire",
 
-	defaultSpeed: 100
+	defaultSpeed: 100,
+
+	startSongWithWhistleIn: true,
 };
 
 // Check some requirements for export so that we don't forget them at some point in the future
diff --git a/src/ui/listen/example-song-player.vue b/src/ui/listen/example-song-player.vue
index 42289b212..106f9a66a 100644
--- a/src/ui/listen/example-song-player.vue
+++ b/src/ui/listen/example-song-player.vue
@@ -53,10 +53,12 @@
 	}));
 
 	const songParts = computed((): SongParts => {
-		let i = 1;
-		const result = {
-			0: allInstruments([ "General Breaks", "Whistle in" ])
-		} as SongParts;
+		const result = {} as SongParts;
+		let i = 0;
+		if (config.startSongWithWhistleIn) {
+			result[0] = allInstruments([ "General Breaks", "Whistle in" ])
+			let i = 1;
+		}
 		for(const part of normalizedSong.value) {
 			result[i] = allInstruments([ part.tuneName, part.patternName ], part.instruments);
 			i += part.length / 4;
@@ -99,7 +101,7 @@
 <template>
 	<div class="bb-example-song">
 		<div class="song" @click="setPosition($event)" ref="songRef">
-			<div class="card" style="width: 10em;">
+			<div v-if="config.startSongWithWhistleIn" class="card" style="width: 10em;">
 				<span class="tune-name">{{getLocalizedDisplayName("General Breaks")}}</span>
 				<span class="pattern-name">{{getLocalizedDisplayName("Whistle in")}}</span>
 			</div>

From a351f14e25d284e56393357f80c0164ecaa01b49 Mon Sep 17 00:00:00 2001
From: Estelle Comment <estelle.comment@gmail.com>
Date: Tue, 18 Nov 2025 16:55:49 +0100
Subject: [PATCH 02/13] Fix index bug

---
 src/ui/listen/example-song-player.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/ui/listen/example-song-player.vue b/src/ui/listen/example-song-player.vue
index 106f9a66a..f7b1a8d0c 100644
--- a/src/ui/listen/example-song-player.vue
+++ b/src/ui/listen/example-song-player.vue
@@ -57,7 +57,7 @@
 		let i = 0;
 		if (config.startSongWithWhistleIn) {
 			result[0] = allInstruments([ "General Breaks", "Whistle in" ])
-			let i = 1;
+			i = 1;
 		}
 		for(const part of normalizedSong.value) {
 			result[i] = allInstruments([ part.tuneName, part.patternName ], part.instruments);

From 91f897c975c62312643b2511e30104e90a8fa8c7 Mon Sep 17 00:00:00 2001
From: Estelle Comment <estelle.comment@gmail.com>
Date: Tue, 18 Nov 2025 22:00:10 +0100
Subject: [PATCH 03/13] Simplify code

---
 src/ui/listen/example-song-player.vue | 54 +++++++++++++++------------
 1 file changed, 31 insertions(+), 23 deletions(-)

diff --git a/src/ui/listen/example-song-player.vue b/src/ui/listen/example-song-player.vue
index f7b1a8d0c..6550b5d38 100644
--- a/src/ui/listen/example-song-player.vue
+++ b/src/ui/listen/example-song-player.vue
@@ -35,30 +35,42 @@
 	const songRef = ref<HTMLElement | null>(null);
 	const abstractPlayerRef = ref<InstanceType<typeof AbstractPlayer>>();
 
-	const normalizedSong = computed((): Array<Required<Exclude<ExampleSong[0], string>>> => props.song.flatMap((part) => {
-		const result = {
-			tuneName: props.tuneName,
-			...(typeof part === "string" ? { patternName: part } : part)
-		};
-		const pattern = getPatternFromState(state.value, result.tuneName, result.patternName);
-		if(!pattern)
-			return [];
-		else {
-			return [{
-				length: pattern.length,
-				instruments: config.instrumentKeys,
-				...result
-			}];
+	const normalizedSong = computed((): Array<Required<Exclude<ExampleSong[0], string>>> => {
+		const normalizedSongParts = props.song.flatMap((part) => {
+			const result = {
+				tuneName: props.tuneName,
+				...(typeof part === "string" ? { patternName: part } : part)
+			};
+			const pattern = getPatternFromState(state.value, result.tuneName, result.patternName);
+			if(!pattern)
+				return [];
+			else {
+				return [{
+					length: pattern.length,
+					instruments: config.instrumentKeys,
+					...result
+				}];
+			}
+		});
+
+		if (config.startSongWithWhistleIn) {
+			const whistleInPattern = getPatternFromState(state.value, "General Breaks", "Whistle in");
+			if (whistleInPattern) {
+				return [{
+					tuneName: "General Breaks",
+					patternName: "Whistle in",
+					instruments: config.instrumentKeys,
+					length: whistleInPattern.length,
+				}, ...normalizedSongParts];
+			}
 		}
-	}));
+
+		return normalizedSongParts;
+	});
 
 	const songParts = computed((): SongParts => {
 		const result = {} as SongParts;
 		let i = 0;
-		if (config.startSongWithWhistleIn) {
-			result[0] = allInstruments([ "General Breaks", "Whistle in" ])
-			i = 1;
-		}
 		for(const part of normalizedSong.value) {
 			result[i] = allInstruments([ part.tuneName, part.patternName ], part.instruments);
 			i += part.length / 4;
@@ -101,10 +113,6 @@
 <template>
 	<div class="bb-example-song">
 		<div class="song" @click="setPosition($event)" ref="songRef">
-			<div v-if="config.startSongWithWhistleIn" class="card" style="width: 10em;">
-				<span class="tune-name">{{getLocalizedDisplayName("General Breaks")}}</span>
-				<span class="pattern-name">{{getLocalizedDisplayName("Whistle in")}}</span>
-			</div>
 			<div v-for="(part, i) in normalizedSong" :key="i" class="card" :style="{ width: `${2.5 * part.length }em` }">
 				<span class="tune-name">{{getLocalizedDisplayName(state.tunes[part.tuneName].displayName || part.tuneName)}}</span>
 				<span class="pattern-name">{{getLocalizedDisplayName(state.tunes[part.tuneName].patterns[part.patternName].displayName || part.patternName)}}</span>

From 7eb94ae79f20a1de3e3da46bd6600fa43d462f7e Mon Sep 17 00:00:00 2001
From: Estelle Comment <estelle.comment@gmail.com>
Date: Wed, 19 Nov 2025 11:04:44 +0100
Subject: [PATCH 04/13] Simple test for example-song-player, and test config
 file to go with it

---
 src/env.d.ts                                  |   9 ++
 .../__tests__/example-song-player.test.ts     | 139 ++++++++++++++++++
 2 files changed, 148 insertions(+)
 create mode 100644 src/env.d.ts
 create mode 100644 src/ui/listen/__tests__/example-song-player.test.ts

diff --git a/src/env.d.ts b/src/env.d.ts
new file mode 100644
index 000000000..dd25fc424
--- /dev/null
+++ b/src/env.d.ts
@@ -0,0 +1,9 @@
+/// <reference types="vite/client" />
+
+declare module "*.vue" {
+	import type { DefineComponent } from "vue";
+	type VueComponentWithExports = DefineComponent<{}, {}, any> & Record<string, unknown>;
+	const component: VueComponentWithExports;
+	export default component;
+}
+
diff --git a/src/ui/listen/__tests__/example-song-player.test.ts b/src/ui/listen/__tests__/example-song-player.test.ts
new file mode 100644
index 000000000..39fb10eb7
--- /dev/null
+++ b/src/ui/listen/__tests__/example-song-player.test.ts
@@ -0,0 +1,139 @@
+import { describe, it, expect, vi, beforeEach, afterEach } from "vitest";
+import { createApp, defineComponent, h, nextTick, ref } from "vue";
+import type { State } from "../../../state/state";
+import type { ExampleSong } from "../../../state/tune";
+import config, { Instrument } from "../../../config";
+import { provideState } from "../../../services/state";
+import ExampleSongPlayer from "../example-song-player.vue";
+import { normalizePattern } from "../../../state/pattern";
+
+vi.mock("../../../services/i18n", () => ({
+	useI18n: () => ({ t: (key: string) => key }),
+	getLocalizedDisplayName: (value: string) => value
+}));
+
+vi.mock("beatbox.js", () => {
+	class MockBeatbox {
+		static registerInstrument = vi.fn();
+
+		playing = false;
+		_position = 0;
+		_events: Record<string, Array<(...args: unknown[]) => void>> = {};
+
+		constructor() {}
+
+		on(event: string, handler: (...args: unknown[]) => void) {
+			(this._events[event] ||= []).push(handler);
+		}
+
+		emit(event: string, ...args: unknown[]) {
+			for (const handler of this._events[event] || [])
+				handler(...args);
+		}
+
+		play() {
+			this.playing = true;
+			this.emit("play");
+		}
+
+		stop() {
+			this.playing = false;
+			this.emit("stop");
+		}
+
+		setPosition(position: number) {
+			this._position = position;
+			this.emit("setPosition");
+		}
+	}
+
+	return { default: MockBeatbox };
+});
+
+const createVolumes = (): Record<Instrument, number> => Object.fromEntries(
+	config.instrumentKeys.map((instrument) => [instrument, 1])
+) as Record<Instrument, number>;
+
+function createMockState(): State {
+	const introPattern = normalizePattern();
+	introPattern.displayName = "Intro DisplayName";
+	introPattern.ls = ["X", " ", " ", " "];
+
+	return {
+		tunes: {
+			"My Tune": {
+				displayName: "My Tune DisplayName",
+				categories: [],
+				patterns: {
+					"Intro": introPattern
+				}
+			}
+		},
+		songs: [],
+		songIdx: 0,
+		playbackSettings: {
+			speed: 100,
+			headphones: [],
+			mute: {},
+			volume: 1,
+			volumes: createVolumes(),
+			loop: false,
+			whistle: false
+		}
+	};
+}
+
+async function mountExampleSongPlayer(state: State, props: { tuneName: string; song: ExampleSong }) {
+	const container = document.createElement("div");
+	document.body.appendChild(container);
+
+	const wrapper = defineComponent({
+		setup() {
+			provideState(ref(state));
+			return () => h(ExampleSongPlayer, props);
+		}
+	});
+
+	const app = createApp(wrapper);
+	app.mount(container);
+	await nextTick();
+
+	return {
+		container,
+		unmount() {
+			app.unmount();
+			document.body.removeChild(container);
+		}
+	};
+}
+
+describe("example-song-player", () => {
+	const originalStartSongWithWhistleIn = config.startSongWithWhistleIn;
+
+	beforeEach(() => {
+		config.startSongWithWhistleIn = false;
+	});
+
+	afterEach(() => {
+		config.startSongWithWhistleIn = originalStartSongWithWhistleIn;
+	});
+
+	it("renders tune and pattern names from props", async () => {
+		const mockState = createMockState();
+		const props = {
+			tuneName: "My Tune",
+			song: ["Intro"] as ExampleSong
+		};
+
+		const { container, unmount } = await mountExampleSongPlayer(mockState, props);
+
+		const tuneName = container.querySelector(".tune-name")?.textContent?.trim();
+		const patternName = container.querySelector(".pattern-name")?.textContent?.trim();
+
+		expect(tuneName).toBe("My Tune DisplayName");
+		expect(patternName).toBe("Intro DisplayName");
+
+		unmount();
+	});
+});
+

From a73c44cee127c5553f2321dc051bd3318a6e4761 Mon Sep 17 00:00:00 2001
From: Estelle Comment <estelle.comment@gmail.com>
Date: Wed, 19 Nov 2025 11:26:54 +0100
Subject: [PATCH 05/13] Test the whistle-in feature

---
 .../__tests__/example-song-player.test.ts     | 104 +++++++++++++-----
 1 file changed, 76 insertions(+), 28 deletions(-)

diff --git a/src/ui/listen/__tests__/example-song-player.test.ts b/src/ui/listen/__tests__/example-song-player.test.ts
index 39fb10eb7..be7671974 100644
--- a/src/ui/listen/__tests__/example-song-player.test.ts
+++ b/src/ui/listen/__tests__/example-song-player.test.ts
@@ -59,6 +59,10 @@ function createMockState(): State {
 	introPattern.displayName = "Intro DisplayName";
 	introPattern.ls = ["X", " ", " ", " "];
 
+    const whistlePattern = normalizePattern();
+    whistlePattern.displayName = "Whistle-in DisplayName";
+    whistlePattern.ls = ["X", "X", " ", " "];
+
 	return {
 		tunes: {
 			"My Tune": {
@@ -67,7 +71,14 @@ function createMockState(): State {
 				patterns: {
 					"Intro": introPattern
 				}
-			}
+			},
+            "General Breaks": {
+                displayName: "General Breaks DisplayName",
+                categories: [],
+                patterns: {
+                    "Whistle in": whistlePattern
+                }
+            },
 		},
 		songs: [],
 		songIdx: 0,
@@ -108,32 +119,69 @@ async function mountExampleSongPlayer(state: State, props: { tuneName: string; s
 }
 
 describe("example-song-player", () => {
-	const originalStartSongWithWhistleIn = config.startSongWithWhistleIn;
-
-	beforeEach(() => {
-		config.startSongWithWhistleIn = false;
-	});
-
-	afterEach(() => {
-		config.startSongWithWhistleIn = originalStartSongWithWhistleIn;
-	});
-
-	it("renders tune and pattern names from props", async () => {
-		const mockState = createMockState();
-		const props = {
-			tuneName: "My Tune",
-			song: ["Intro"] as ExampleSong
-		};
-
-		const { container, unmount } = await mountExampleSongPlayer(mockState, props);
-
-		const tuneName = container.querySelector(".tune-name")?.textContent?.trim();
-		const patternName = container.querySelector(".pattern-name")?.textContent?.trim();
-
-		expect(tuneName).toBe("My Tune DisplayName");
-		expect(patternName).toBe("Intro DisplayName");
-
-		unmount();
-	});
+    const originalStartSongWithWhistleIn = config.startSongWithWhistleIn;
+
+    const expectCardContents = (card: Element, tuneName: string, patternName: string) => {
+        const tuneNameElement = card.querySelector(".tune-name");
+        const patternNameElement = card.querySelector(".pattern-name");
+        expect(tuneNameElement?.textContent?.trim()).toBe(tuneName);
+        expect(patternNameElement?.textContent?.trim()).toBe(patternName);
+    }
+
+    describe("when the song has no whistle-in", () => {
+        beforeEach(() => {
+            config.startSongWithWhistleIn = false;
+        });
+    
+        afterEach(() => {
+            config.startSongWithWhistleIn = originalStartSongWithWhistleIn;
+        });
+    
+        it("renders tune and pattern names from props", async () => {
+            const mockState = createMockState();
+            const props = {
+                tuneName: "My Tune",
+                song: ["Intro"] as ExampleSong
+            };
+
+            const { container, unmount } = await mountExampleSongPlayer(mockState, props);
+
+            const cards = container.querySelectorAll(".song .card");
+            expect(cards.length).toBe(1);
+
+            expectCardContents(cards[0], "My Tune DisplayName", "Intro DisplayName");
+            unmount();
+        });
+    });
+
+    describe("when the song has a whistle-in", () => {
+        beforeEach(() => {
+            config.startSongWithWhistleIn = true;
+        });
+    
+        afterEach(() => {
+            config.startSongWithWhistleIn = originalStartSongWithWhistleIn;
+        });
+
+        it("renders the whistle-in and the song", async () => {
+            const mockState = createMockState();
+            const props = {
+                tuneName: "My Tune",
+                song: ["Intro"] as ExampleSong
+            };
+    
+            const { container, unmount } = await mountExampleSongPlayer(mockState, props);
+
+            const cards = container.querySelectorAll(".song .card");
+            expect(cards.length).toBe(2);
+    
+            const whistleInCard = cards[0];
+            expectCardContents(whistleInCard, "General Breaks DisplayName", "Whistle-in DisplayName");
+
+            expectCardContents(cards[1], "My Tune DisplayName", "Intro DisplayName");    
+
+            unmount();
+        });
+    });
 });
 

From e90e6f40a8cd7f063bebb7cce0135a7098563512 Mon Sep 17 00:00:00 2001
From: Estelle Comment <estelle.comment@gmail.com>
Date: Wed, 19 Nov 2025 11:55:30 +0100
Subject: [PATCH 06/13] Test construction of rawPattern

---
 .../__tests__/example-song-player.test.ts     | 30 ++++++++++++++-----
 1 file changed, 23 insertions(+), 7 deletions(-)

diff --git a/src/ui/listen/__tests__/example-song-player.test.ts b/src/ui/listen/__tests__/example-song-player.test.ts
index be7671974..bbd150890 100644
--- a/src/ui/listen/__tests__/example-song-player.test.ts
+++ b/src/ui/listen/__tests__/example-song-player.test.ts
@@ -5,6 +5,7 @@ import type { ExampleSong } from "../../../state/tune";
 import config, { Instrument } from "../../../config";
 import { provideState } from "../../../services/state";
 import ExampleSongPlayer from "../example-song-player.vue";
+import * as playerModule from "../../../services/player";
 import { normalizePattern } from "../../../state/pattern";
 
 vi.mock("../../../services/i18n", () => ({
@@ -12,6 +13,7 @@ vi.mock("../../../services/i18n", () => ({
 	getLocalizedDisplayName: (value: string) => value
 }));
 
+// Necessary to mock beatbox.js to avoid AudioContext errors
 vi.mock("beatbox.js", () => {
 	class MockBeatbox {
 		static registerInstrument = vi.fn();
@@ -120,13 +122,29 @@ async function mountExampleSongPlayer(state: State, props: { tuneName: string; s
 
 describe("example-song-player", () => {
     const originalStartSongWithWhistleIn = config.startSongWithWhistleIn;
+    const songToBeatboxSpy = vi.spyOn(playerModule, "songToBeatbox");
+
+    beforeEach(() => {
+        songToBeatboxSpy.mockClear();
+        songToBeatboxSpy.mockReturnValue({} as any);
+    });
 
     const expectCardContents = (card: Element, tuneName: string, patternName: string) => {
         const tuneNameElement = card.querySelector(".tune-name");
         const patternNameElement = card.querySelector(".pattern-name");
         expect(tuneNameElement?.textContent?.trim()).toBe(tuneName);
         expect(patternNameElement?.textContent?.trim()).toBe(patternName);
-    }
+    };
+
+    // We don't really test the AbstractPlayer here, but we test the construction of its rawPattern argument.
+    const expectRawPatternBuiltWithArguments = (pieces: string[][]) => {
+        expect(songToBeatboxSpy).toHaveBeenCalledTimes(1);
+        const songPartsArg = songToBeatboxSpy.mock.calls[0][0] as Record<number, Record<string, string[]>>;
+        expect(Object.keys(songPartsArg)).toHaveLength(pieces.length);
+        for (let index = 0; index < pieces.length; index++) {
+            expect(songPartsArg[index].ls).toEqual(pieces[index]);
+        }
+    };
 
     describe("when the song has no whistle-in", () => {
         beforeEach(() => {
@@ -143,13 +161,13 @@ describe("example-song-player", () => {
                 tuneName: "My Tune",
                 song: ["Intro"] as ExampleSong
             };
-
             const { container, unmount } = await mountExampleSongPlayer(mockState, props);
 
             const cards = container.querySelectorAll(".song .card");
             expect(cards.length).toBe(1);
-
             expectCardContents(cards[0], "My Tune DisplayName", "Intro DisplayName");
+            expectRawPatternBuiltWithArguments([["My Tune", "Intro"]]);
+
             unmount();
         });
     });
@@ -169,16 +187,14 @@ describe("example-song-player", () => {
                 tuneName: "My Tune",
                 song: ["Intro"] as ExampleSong
             };
-    
             const { container, unmount } = await mountExampleSongPlayer(mockState, props);
 
             const cards = container.querySelectorAll(".song .card");
             expect(cards.length).toBe(2);
-    
             const whistleInCard = cards[0];
             expectCardContents(whistleInCard, "General Breaks DisplayName", "Whistle-in DisplayName");
-
-            expectCardContents(cards[1], "My Tune DisplayName", "Intro DisplayName");    
+            expectCardContents(cards[1], "My Tune DisplayName", "Intro DisplayName");
+            expectRawPatternBuiltWithArguments([["General Breaks", "Whistle in"], ["My Tune", "Intro"]]);
 
             unmount();
         });

From e0cec291c6cc40483599802bf2b18cd0fa66042c Mon Sep 17 00:00:00 2001
From: Estelle Comment <estelle.comment@gmail.com>
Date: Wed, 19 Nov 2025 12:34:33 +0100
Subject: [PATCH 07/13] Simplify the test by using vue test-utils

---
 package.json                                  |   1 +
 src/env.d.ts                                  |   3 +
 .../__tests__/example-song-player.test.ts     |  14 +-
 tsconfig.json                                 |   3 +-
 yarn.lock                                     | 139 ++++++++++++++++++
 5 files changed, 150 insertions(+), 10 deletions(-)

diff --git a/package.json b/package.json
index 1140aeb31..f793b9d9e 100644
--- a/package.json
+++ b/package.json
@@ -27,6 +27,7 @@
     "@typescript-eslint/eslint-plugin": "^7.18.0",
     "@typescript-eslint/parser": "^7.18.0",
     "@vitejs/plugin-vue": "^5.2.1",
+    "@vue/test-utils": "^2.4.6",
     "eslint": "8",
     "eslint-plugin-import": "^2.31.0",
     "eslint-plugin-vue": "^9.32.0",
diff --git a/src/env.d.ts b/src/env.d.ts
index dd25fc424..cc21a9684 100644
--- a/src/env.d.ts
+++ b/src/env.d.ts
@@ -7,3 +7,6 @@ declare module "*.vue" {
 	export default component;
 }
 
+declare module "@vue/test-utils" {
+	export * from "@vue/test-utils/dist/index";
+}
diff --git a/src/ui/listen/__tests__/example-song-player.test.ts b/src/ui/listen/__tests__/example-song-player.test.ts
index bbd150890..213471ed0 100644
--- a/src/ui/listen/__tests__/example-song-player.test.ts
+++ b/src/ui/listen/__tests__/example-song-player.test.ts
@@ -1,5 +1,6 @@
 import { describe, it, expect, vi, beforeEach, afterEach } from "vitest";
-import { createApp, defineComponent, h, nextTick, ref } from "vue";
+import { defineComponent, h, nextTick, ref } from "vue";
+import { mount } from "@vue/test-utils";
 import type { State } from "../../../state/state";
 import type { ExampleSong } from "../../../state/tune";
 import config, { Instrument } from "../../../config";
@@ -97,9 +98,6 @@ function createMockState(): State {
 }
 
 async function mountExampleSongPlayer(state: State, props: { tuneName: string; song: ExampleSong }) {
-	const container = document.createElement("div");
-	document.body.appendChild(container);
-
 	const wrapper = defineComponent({
 		setup() {
 			provideState(ref(state));
@@ -107,15 +105,13 @@ async function mountExampleSongPlayer(state: State, props: { tuneName: string; s
 		}
 	});
 
-	const app = createApp(wrapper);
-	app.mount(container);
+	const mountedWrapper = mount(wrapper);
 	await nextTick();
 
 	return {
-		container,
+		container: mountedWrapper.element as HTMLElement,
 		unmount() {
-			app.unmount();
-			document.body.removeChild(container);
+			mountedWrapper.unmount();
 		}
 	};
 }
diff --git a/tsconfig.json b/tsconfig.json
index bd9274671..2e587c773 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -7,7 +7,8 @@
 		"moduleResolution": "node",
 		"module": "esnext",
 		"isolatedModules": true,
-		"skipLibCheck": true
+		"skipLibCheck": true,
+		"types": ["vite/client"]
 	},
 	"include": ["src/**/*.ts", "src/**/*.vue"],
 	"vueCompilerOptions": {
diff --git a/yarn.lock b/yarn.lock
index 1a7c91d20..feee6d70a 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -592,6 +592,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@one-ini/wasm@npm:0.1.1":
+  version: 0.1.1
+  resolution: "@one-ini/wasm@npm:0.1.1"
+  checksum: 10/673c11518dba2e582e42415cbefe928513616f3af25e12f6e4e6b1b98b52b3e6c14bc251a361654af63cd64f208f22a1f7556fa49da2bf7efcf28cb14f16f807
+  languageName: node
+  linkType: hard
+
 "@parcel/watcher-android-arm64@npm:2.5.0":
   version: 2.5.0
   resolution: "@parcel/watcher-android-arm64@npm:2.5.0"
@@ -1361,6 +1368,16 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@vue/test-utils@npm:^2.4.6":
+  version: 2.4.6
+  resolution: "@vue/test-utils@npm:2.4.6"
+  dependencies:
+    js-beautify: "npm:^1.14.9"
+    vue-component-type-helpers: "npm:^2.0.0"
+  checksum: 10/a3b445f1dae9b663e8cdb048054bb16d0b24b7901bcf45c81e84a8340030651bb7ad9fd309d36f5963addd25883968e0f81da44a06bab99bb9aa89b4235f2880
+  languageName: node
+  linkType: hard
+
 "abbrev@npm:^2.0.0":
   version: 2.0.0
   resolution: "abbrev@npm:2.0.0"
@@ -1781,6 +1798,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"commander@npm:^10.0.0":
+  version: 10.0.1
+  resolution: "commander@npm:10.0.1"
+  checksum: 10/8799faa84a30da985802e661cc9856adfaee324d4b138413013ef7f087e8d7924b144c30a1f1405475f0909f467665cd9e1ce13270a2f41b141dab0b7a58f3fb
+  languageName: node
+  linkType: hard
+
 "concat-map@npm:0.0.1":
   version: 0.0.1
   resolution: "concat-map@npm:0.0.1"
@@ -1788,6 +1812,16 @@ __metadata:
   languageName: node
   linkType: hard
 
+"config-chain@npm:^1.1.13":
+  version: 1.1.13
+  resolution: "config-chain@npm:1.1.13"
+  dependencies:
+    ini: "npm:^1.3.4"
+    proto-list: "npm:~1.2.1"
+  checksum: 10/83d22cabf709e7669f6870021c4d552e4fc02e9682702b726be94295f42ce76cfed00f70b2910ce3d6c9465d9758e191e28ad2e72ff4e3331768a90da6c1ef03
+  languageName: node
+  linkType: hard
+
 "create-require@npm:^1.1.0":
   version: 1.1.1
   resolution: "create-require@npm:1.1.1"
@@ -2018,6 +2052,20 @@ __metadata:
   languageName: node
   linkType: hard
 
+"editorconfig@npm:^1.0.4":
+  version: 1.0.4
+  resolution: "editorconfig@npm:1.0.4"
+  dependencies:
+    "@one-ini/wasm": "npm:0.1.1"
+    commander: "npm:^10.0.0"
+    minimatch: "npm:9.0.1"
+    semver: "npm:^7.5.3"
+  bin:
+    editorconfig: bin/editorconfig
+  checksum: 10/bd0a7236f31a7f54801cb6f3222508d4f872a24e440bef30ee29f4ba667c0741724e52e0ad521abe3409b12cdafd8384bb751de9b2a2ee5f845c740edd2e742f
+  languageName: node
+  linkType: hard
+
 "emoji-regex@npm:^8.0.0":
   version: 8.0.0
   resolution: "emoji-regex@npm:8.0.0"
@@ -2855,6 +2903,22 @@ __metadata:
   languageName: node
   linkType: hard
 
+"glob@npm:^10.4.2":
+  version: 10.5.0
+  resolution: "glob@npm:10.5.0"
+  dependencies:
+    foreground-child: "npm:^3.1.0"
+    jackspeak: "npm:^3.1.2"
+    minimatch: "npm:^9.0.4"
+    minipass: "npm:^7.1.2"
+    package-json-from-dist: "npm:^1.0.0"
+    path-scurry: "npm:^1.11.1"
+  bin:
+    glob: dist/esm/bin.mjs
+  checksum: 10/ab3bccfefcc0afaedbd1f480cd0c4a2c0e322eb3f0aa7ceaa31b3f00b825069f17cf0f1fc8b6f256795074b903f37c0ade37ddda6a176aa57f1c2bbfe7240653
+  languageName: node
+  linkType: hard
+
 "glob@npm:^11.0.0":
   version: 11.0.0
   resolution: "glob@npm:11.0.0"
@@ -3134,6 +3198,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"ini@npm:^1.3.4":
+  version: 1.3.8
+  resolution: "ini@npm:1.3.8"
+  checksum: 10/314ae176e8d4deb3def56106da8002b462221c174ddb7ce0c49ee72c8cd1f9044f7b10cc555a7d8850982c3b9ca96fc212122749f5234bc2b6fb05fb942ed566
+  languageName: node
+  linkType: hard
+
 "internal-slot@npm:^1.1.0":
   version: 1.1.0
   resolution: "internal-slot@npm:1.1.0"
@@ -3436,6 +3507,30 @@ __metadata:
   languageName: node
   linkType: hard
 
+"js-beautify@npm:^1.14.9":
+  version: 1.15.4
+  resolution: "js-beautify@npm:1.15.4"
+  dependencies:
+    config-chain: "npm:^1.1.13"
+    editorconfig: "npm:^1.0.4"
+    glob: "npm:^10.4.2"
+    js-cookie: "npm:^3.0.5"
+    nopt: "npm:^7.2.1"
+  bin:
+    css-beautify: js/bin/css-beautify.js
+    html-beautify: js/bin/html-beautify.js
+    js-beautify: js/bin/js-beautify.js
+  checksum: 10/89f874f994a409868c74d23bdf3869281a25804dd4f77c4eac170cdee671dfb3248370c3b686ea03bb9a7cc7141769c4f450ad85e9158fbed3d7d78c330ae9a1
+  languageName: node
+  linkType: hard
+
+"js-cookie@npm:^3.0.5":
+  version: 3.0.5
+  resolution: "js-cookie@npm:3.0.5"
+  checksum: 10/366494b1630b9fb8abaef3659748db5dfd52c58c6fc3459b9f0a03b492593bc1b01c6dfcc066b46f6413c28edb3a00cc68fb61ea8cdf6991bedf1f100f8a389d
+  languageName: node
+  linkType: hard
+
 "js-yaml@npm:^3.13.1":
   version: 3.14.1
   resolution: "js-yaml@npm:3.14.1"
@@ -3665,6 +3760,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"minimatch@npm:9.0.1":
+  version: 9.0.1
+  resolution: "minimatch@npm:9.0.1"
+  dependencies:
+    brace-expansion: "npm:^2.0.1"
+  checksum: 10/b4e98f4dc740dcf33999a99af23ae6e5e1c47632f296dc95cb649a282150f92378d41434bf64af4ea2e5975255a757d031c3bf014bad9214544ac57d97f3ba63
+  languageName: node
+  linkType: hard
+
 "minimatch@npm:^10.0.0":
   version: 10.0.1
   resolution: "minimatch@npm:10.0.1"
@@ -3858,6 +3962,17 @@ __metadata:
   languageName: node
   linkType: hard
 
+"nopt@npm:^7.2.1":
+  version: 7.2.1
+  resolution: "nopt@npm:7.2.1"
+  dependencies:
+    abbrev: "npm:^2.0.0"
+  bin:
+    nopt: bin/nopt.js
+  checksum: 10/95a1f6dec8a81cd18cdc2fed93e6f0b4e02cf6bdb4501c848752c6e34f9883d9942f036a5e3b21a699047d8a448562d891e67492df68ec9c373e6198133337ae
+  languageName: node
+  linkType: hard
+
 "nopt@npm:^8.0.0":
   version: 8.0.0
   resolution: "nopt@npm:8.0.0"
@@ -4172,6 +4287,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"proto-list@npm:~1.2.1":
+  version: 1.2.4
+  resolution: "proto-list@npm:1.2.4"
+  checksum: 10/9cc3b46d613fa0d637033b225db1bc98e914c3c05864f7adc9bee728192e353125ef2e49f71129a413f6333951756000b0e54f299d921f02d3e9e370cc994100
+  languageName: node
+  linkType: hard
+
 "punycode@npm:^2.1.0":
   version: 2.3.1
   resolution: "punycode@npm:2.3.1"
@@ -4399,6 +4521,7 @@ __metadata:
     "@typescript-eslint/eslint-plugin": "npm:^7.18.0"
     "@typescript-eslint/parser": "npm:^7.18.0"
     "@vitejs/plugin-vue": "npm:^5.2.1"
+    "@vue/test-utils": "npm:^2.4.6"
     base64-arraybuffer: "npm:^1.0.2"
     beatbox.js: "npm:^4.0.1"
     beatbox.js-export: "npm:^4.0.1"
@@ -4515,6 +4638,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"semver@npm:^7.5.3":
+  version: 7.7.3
+  resolution: "semver@npm:7.7.3"
+  bin:
+    semver: bin/semver.js
+  checksum: 10/8dbc3168e057a38fc322af909c7f5617483c50caddba135439ff09a754b20bdd6482a5123ff543dad4affa488ecf46ec5fb56d61312ad20bb140199b88dfaea9
+  languageName: node
+  linkType: hard
+
 "set-function-length@npm:^1.2.2":
   version: 1.2.2
   resolution: "set-function-length@npm:1.2.2"
@@ -5283,6 +5415,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"vue-component-type-helpers@npm:^2.0.0":
+  version: 2.2.12
+  resolution: "vue-component-type-helpers@npm:2.2.12"
+  checksum: 10/985ca9564966919f5a009514a46fd0b90c7a167795d9f2f58072f5f4a4eaffb8f94bcf70376504f171441827c624b723224acac41ce6a2cd39d2fff13df08d7a
+  languageName: node
+  linkType: hard
+
 "vue-eslint-parser@npm:^9.4.3":
   version: 9.4.3
   resolution: "vue-eslint-parser@npm:9.4.3"

From 5c24b3753d17d0fdb43fa6597dd18f33d0f26e63 Mon Sep 17 00:00:00 2001
From: Estelle Comment <estelle.comment@gmail.com>
Date: Wed, 25 Feb 2026 11:08:30 +0100
Subject: [PATCH 08/13] Fix making whistle-in optional

---
 src/ui/listen/example-song-player.vue | 7 +++++++
 1 file changed, 7 insertions(+)

diff --git a/src/ui/listen/example-song-player.vue b/src/ui/listen/example-song-player.vue
index 6550b5d38..e8614ce77 100644
--- a/src/ui/listen/example-song-player.vue
+++ b/src/ui/listen/example-song-player.vue
@@ -71,6 +71,13 @@
 	const songParts = computed((): SongParts => {
 		const result = {} as SongParts;
 		let i = 0;
+<<<<<<< HEAD
+=======
+		if (config.startSongWithWhistleIn) {
+			result[0] = allInstruments([ "General Breaks", "Whistle in" ])
+			i = 1;
+		}
+>>>>>>> b53e40d (Fix making whistle-in optional)
 		for(const part of normalizedSong.value) {
 			result[i] = allInstruments([ part.tuneName, part.patternName ], part.instruments);
 			i += part.length / 4;

From 0994d596a637c54441a42f82d742f78e1eac25ab Mon Sep 17 00:00:00 2001
From: Estelle Comment <estelle.comment@gmail.com>
Date: Wed, 25 Feb 2026 11:19:19 +0100
Subject: [PATCH 09/13] Throw an error if whistle-in break is not present in
 tunes

---
 src/config.ts | 9 +++++++++
 1 file changed, 9 insertions(+)

diff --git a/src/config.ts b/src/config.ts
index 15e2480b0..b86e9acb6 100644
--- a/src/config.ts
+++ b/src/config.ts
@@ -326,4 +326,13 @@ for(const instr of Object.keys(config.instruments)) {
 		throw new Error("Instrument key must be 2 characters long for `" + instr + "` due to pattern encoder.");
 }
 
+if (config.startSongWithWhistleIn) {
+	// dynamically import defaultTunes to avoid circular dependency
+	import("./defaultTunes").then(({ default: defaultTunes }) => {
+		if (!defaultTunes["General Breaks"]?.patterns["Whistle in"]) {
+			throw new Error("config.startSongWithWhistleIn is true but pattern 'General Breaks' / 'Whistle in' does not exist.");
+		}
+	});
+}
+
 export default config;

From d85604056c0dd2421c8ba75633f62f6a50bfe2c7 Mon Sep 17 00:00:00 2001
From: Estelle Comment <estelle.comment@gmail.com>
Date: Wed, 25 Feb 2026 11:35:49 +0100
Subject: [PATCH 10/13] Check for length of whistle-in break, because it is
 hardcoded in various places around the code.

---
 src/config.ts | 6 +++++-
 1 file changed, 5 insertions(+), 1 deletion(-)

diff --git a/src/config.ts b/src/config.ts
index b86e9acb6..32cb8ee7e 100644
--- a/src/config.ts
+++ b/src/config.ts
@@ -329,9 +329,13 @@ for(const instr of Object.keys(config.instruments)) {
 if (config.startSongWithWhistleIn) {
 	// dynamically import defaultTunes to avoid circular dependency
 	import("./defaultTunes").then(({ default: defaultTunes }) => {
-		if (!defaultTunes["General Breaks"]?.patterns["Whistle in"]) {
+		const whistleInBreak = defaultTunes["General Breaks"]?.patterns["Whistle in"];
+		if (!whistleInBreak) {
 			throw new Error("config.startSongWithWhistleIn is true but pattern 'General Breaks' / 'Whistle in' does not exist.");
 		}
+		if (whistleInBreak.length !== 4) {
+			throw new Error("config.startSongWithWhistleIn is true but pattern 'General Breaks' / 'Whistle in' must be 4 beats long (got " + whistleInBreak.length + ").");
+		}
 	});
 }
 

From 50433a0391acc7f2cc8ab1d4cb2c47ad2480b948 Mon Sep 17 00:00:00 2001
From: Estelle Comment <estelle.comment@gmail.com>
Date: Wed, 25 Feb 2026 13:24:11 +0100
Subject: [PATCH 11/13] Fix merge mistake

---
 src/ui/listen/example-song-player.vue | 3 ---
 1 file changed, 3 deletions(-)

diff --git a/src/ui/listen/example-song-player.vue b/src/ui/listen/example-song-player.vue
index e8614ce77..6a89f596d 100644
--- a/src/ui/listen/example-song-player.vue
+++ b/src/ui/listen/example-song-player.vue
@@ -71,13 +71,10 @@
 	const songParts = computed((): SongParts => {
 		const result = {} as SongParts;
 		let i = 0;
-<<<<<<< HEAD
-=======
 		if (config.startSongWithWhistleIn) {
 			result[0] = allInstruments([ "General Breaks", "Whistle in" ])
 			i = 1;
 		}
->>>>>>> b53e40d (Fix making whistle-in optional)
 		for(const part of normalizedSong.value) {
 			result[i] = allInstruments([ part.tuneName, part.patternName ], part.instruments);
 			i += part.length / 4;

From 2ea8dbcea824999128a8b4696a1f2171a59e2f4a Mon Sep 17 00:00:00 2001
From: Estelle Comment <estelle.comment@gmail.com>
Date: Wed, 25 Feb 2026 13:33:45 +0100
Subject: [PATCH 12/13] Fix merge mistake (for real)

---
 src/ui/listen/example-song-player.vue | 4 ----
 1 file changed, 4 deletions(-)

diff --git a/src/ui/listen/example-song-player.vue b/src/ui/listen/example-song-player.vue
index 6a89f596d..6550b5d38 100644
--- a/src/ui/listen/example-song-player.vue
+++ b/src/ui/listen/example-song-player.vue
@@ -71,10 +71,6 @@
 	const songParts = computed((): SongParts => {
 		const result = {} as SongParts;
 		let i = 0;
-		if (config.startSongWithWhistleIn) {
-			result[0] = allInstruments([ "General Breaks", "Whistle in" ])
-			i = 1;
-		}
 		for(const part of normalizedSong.value) {
 			result[i] = allInstruments([ part.tuneName, part.patternName ], part.instruments);
 			i += part.length / 4;

From 6db6cbf1f189fdd9664abe96a570aa944faf959a Mon Sep 17 00:00:00 2001
From: Estelle Comment <estelle.comment@gmail.com>
Date: Wed, 25 Feb 2026 13:57:58 +0100
Subject: [PATCH 13/13] More a check that was causing a complicated test fail
 because of circular dependencies

---
 src/config.ts       | 13 -------------
 src/defaultTunes.ts | 10 ++++++++++
 2 files changed, 10 insertions(+), 13 deletions(-)

diff --git a/src/config.ts b/src/config.ts
index 32cb8ee7e..15e2480b0 100644
--- a/src/config.ts
+++ b/src/config.ts
@@ -326,17 +326,4 @@ for(const instr of Object.keys(config.instruments)) {
 		throw new Error("Instrument key must be 2 characters long for `" + instr + "` due to pattern encoder.");
 }
 
-if (config.startSongWithWhistleIn) {
-	// dynamically import defaultTunes to avoid circular dependency
-	import("./defaultTunes").then(({ default: defaultTunes }) => {
-		const whistleInBreak = defaultTunes["General Breaks"]?.patterns["Whistle in"];
-		if (!whistleInBreak) {
-			throw new Error("config.startSongWithWhistleIn is true but pattern 'General Breaks' / 'Whistle in' does not exist.");
-		}
-		if (whistleInBreak.length !== 4) {
-			throw new Error("config.startSongWithWhistleIn is true but pattern 'General Breaks' / 'Whistle in' must be 4 beats long (got " + whistleInBreak.length + ").");
-		}
-	});
-}
-
 export default config;
diff --git a/src/defaultTunes.ts b/src/defaultTunes.ts
index ff1f96061..cc1544917 100644
--- a/src/defaultTunes.ts
+++ b/src/defaultTunes.ts
@@ -3428,6 +3428,16 @@ Object.defineProperty(defaultTunes, "firstInSorting", {
 	value: [ "General Breaks", "Special Breaks", "Shouting Breaks" ]
 });
 
+if (config.startSongWithWhistleIn) {
+	const whistleInBreak = defaultTunes["General Breaks"]?.patterns["Whistle in"];
+	if (!whistleInBreak) {
+		throw new Error("config.startSongWithWhistleIn is true but pattern 'General Breaks' / 'Whistle in' does not exist.");
+	}
+	if (whistleInBreak.length !== 4) {
+		throw new Error("config.startSongWithWhistleIn is true but pattern 'General Breaks' / 'Whistle in' must be 4 beats long (got " + whistleInBreak.length + ").");
+	}
+}
+
 interface DefaultTunesMethods {
 	getPattern(tuneName: string, patternName?: string): Pattern | undefined;
 	getPattern(patternReference: PatternReference): Pattern | undefined;