Upload folder using huggingface_hub

Dockerfile

@@ -9,7 +9,7 @@ FROM nvidia/cuda:12.4.1-cudnn-runtime-ubuntu22.04
 
 ARG COMFY_REF=master
 # Bumped by hand to make a rebuild obvious in the running container's log.
-ARG BUILD_STAMP=2026-09-18-lyric-structure
+ARG BUILD_STAMP=2026-09-18-score-editor
 
 ENV DEBIAN_FRONTEND=noninteractive \
     PIP_NO_CACHE_DIR=1 \

package-lock.json

@@ -9,6 +9,7 @@
       "version": "0.1.0",
       "dependencies": {
         "@phosphor-icons/react": "^2.1.7",
+        "abcjs": "^6.7.0",
         "geist": "^1.7.2",
         "motion": "^12.0.0",
         "next": "^16.3.5",
@@ -1070,6 +1071,16 @@
         "@types/node": "*"
       }
     },
+    "node_modules/abcjs": {
+      "version": "6.7.0",
+      "resolved": "https://registry.npmjs.org/abcjs/-/abcjs-6.7.0.tgz",
+      "integrity": "sha512-dSj1Iho8IvGZEbfRTcGS4uGt+DMrrXTqXXpfNXYMuUNfDMRadTqA1DlVvs3u0uUDJIej8UOAeDauEPnZ6RThmg==",
+      "license": "MIT",
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/paulrosen"
+      }
+    },
     "node_modules/baseline-browser-mapping": {
       "version": "2.11.24",
       "resolved": "https://registry.npmjs.org/baseline-browser-mapping/-/baseline-browser-mapping-2.11.24.tgz",

package.json

@@ -9,10 +9,13 @@
     "lint": "next lint",
     "typecheck": "tsc --noEmit",
     "check": "node scripts/check.mjs",
-    "verify": "node scripts/verify-build.mjs"
+    "verify": "node scripts/verify-build.mjs",
+    "test:abc": "tsx scripts/test-abc.ts",
+    "test:editor": "node scripts/test-score-editor.mjs"
   },
   "dependencies": {
     "@phosphor-icons/react": "^2.1.7",
+    "abcjs": "^6.7.0",
     "geist": "^1.7.2",
     "motion": "^12.0.0",
     "next": "^16.3.5",

scripts/test-abc.ts

@@ -0,0 +1,172 @@
+/**
+ * Round-trip tests for the ABC parser and serializer.
+ *
+ * The grid rewrites the score, so a parse or spelling bug here silently
+ * transposes the operator's music. The randomised block at the bottom is the
+ * important half: the fixed cases only cover what I thought to write down, and
+ * it was the random ones that found the accidental bugs.
+ *
+ *   npm run test:abc
+ */
+import { unitsPerBar } from "@/lib/abc/model";
+import type { AbcNote, AbcScore } from "@/lib/abc/model";
+import { parseAbc } from "@/lib/abc/parse";
+import { serializeAbc } from "@/lib/abc/serialize";
+
+let fails = 0;
+const check = (label: string, ok: boolean, extra?: string) => {
+  console.log((ok ? "  ok    " : "  FAIL  ") + label + (ok || !extra ? "" : "\n          " + extra));
+  if (!ok) fails++;
+};
+
+const SKELETON = `X:1
+T:Your title
+M:4/4
+L:1/8
+K:G
+V:Vocal
+|: G2 A2 B2 d2 | e4 d4 :|
+V:Ins
+|: G,4 B,4 | C4 D4 :|`;
+
+const first = parseAbc(SKELETON);
+check("the skeleton parses", first.ok, first.ok ? "" : first.reason);
+if (!first.ok) process.exit(1);
+const s = first.score;
+
+check("two voices found", s.voices.length === 2 && s.voices[0].id === "Vocal" && s.voices[1].id === "Ins");
+check("meter and unit read", s.meter[0] === 4 && s.meter[1] === 4 && s.unit[1] === 8);
+check("eight units to a bar", unitsPerBar(s) === 8);
+check("repeats were written out", s.repeatsExpanded);
+
+const vocal = s.notes.filter((n) => n.voice === 0).sort((a, b) => a.start - b.start);
+check("repeat doubled the vocal line", vocal.length === 12, `got ${vocal.length}`);
+check("the first pass spans two bars", vocal[5].start + vocal[5].duration === 16);
+check("G in the key of G is G4 = midi 67", vocal[0].midi === 67, `got ${vocal[0].midi}`);
+check("lower case d is an octave up from D", vocal[3].midi === 74, `got ${vocal[3].midi}`);
+check("the repeat starts where the first pass ended", vocal[6].start === 16, `got ${vocal[6].start}`);
+check(
+  "the repeat replays the same pitches",
+  vocal.slice(0, 6).map((n) => n.midi).join() === vocal.slice(6).map((n) => n.midi).join(),
+);
+const ins = s.notes.filter((n) => n.voice === 1).sort((a, b) => a.start - b.start);
+check("G, is an octave below G", ins[0].midi === 55, `got ${ins[0].midi}`);
+
+// --- key signature and accidentals ------------------------------------------
+const inG = parseAbc("X:1\nM:4/4\nL:1/8\nK:G\nV:1\nF4 f4 |");
+check("the key signature sharpens F", inG.ok && inG.score.notes[0].midi === 66);
+const natural = parseAbc("X:1\nM:4/4\nL:1/8\nK:G\nV:1\n=F4 F4 |");
+check(
+  "a natural cancels it for the rest of the bar",
+  natural.ok && natural.score.notes[0].midi === 65 && natural.score.notes[1].midi === 65,
+);
+const nextBar = parseAbc("X:1\nM:4/4\nL:1/8\nK:G\nV:1\n=F4 z4 | F4 z4 |");
+check("and the signature returns in the next bar", nextBar.ok && nextBar.score.notes[1].midi === 66);
+
+// --- lengths, ties, chords, rests -------------------------------------------
+const lengths = parseAbc("X:1\nM:4/4\nL:1/8\nK:C\nV:1\nC C2 C/ C// C3/2 |");
+check(
+  "plain, doubled, halved, quartered and dotted lengths",
+  lengths.ok && lengths.score.notes.map((n) => n.duration).join() === "1,2,0.5,0.25,1.5",
+);
+const tied = parseAbc("X:1\nM:4/4\nL:1/8\nK:C\nV:1\nC4-C4 |");
+check("a tie merges into one long note", tied.ok && tied.score.notes.length === 1 && tied.score.notes[0].duration === 8);
+const chord = parseAbc("X:1\nM:4/4\nL:1/8\nK:C\nV:1\n[CEG]4 |");
+check(
+  "a chord is three notes at one onset",
+  chord.ok && chord.score.notes.length === 3 && chord.score.notes.every((n) => n.start === 0 && n.duration === 4),
+);
+const rest = parseAbc("X:1\nM:4/4\nL:1/8\nK:C\nV:1\nz4 C4 |");
+check("a rest advances time without a note", rest.ok && rest.score.notes.length === 1 && rest.score.notes[0].start === 4);
+
+// --- refusals ---------------------------------------------------------------
+// Refusing beats dropping: the grid writes the score back out, so anything it
+// cannot draw is something the operator would lose without being told.
+for (const [label, src] of [
+  ["a tuplet", "X:1\nK:C\nV:1\n(3CDE |"],
+  ["a grace note", "X:1\nK:C\nV:1\n{g}C4 |"],
+  ["a chord symbol", 'X:1\nK:C\nV:1\n"Am" C4 |'],
+] as const) {
+  const r = parseAbc(src);
+  check(`${label} is refused rather than dropped`, !r.ok && Boolean(r.offending));
+}
+
+// --- round trip -------------------------------------------------------------
+const fingerprint = (score: AbcScore) =>
+  score.notes.map((n) => `${n.voice}:${n.start}:${n.duration}:${n.midi}`).sort().join("|");
+
+function roundTrip(label: string, src: string) {
+  const a = parseAbc(src);
+  if (!a.ok) return check(`${label} parses`, false, a.reason);
+  const text = serializeAbc(a.score);
+  const b = parseAbc(text);
+  if (!b.ok) return check(`${label} re-parses`, false, `${b.reason}\n${text}`);
+  const same = fingerprint(a.score) === fingerprint(b.score);
+  check(`${label} survives a round trip`, same, same ? "" : `\n${text}\nwas ${fingerprint(a.score)}\nnow ${fingerprint(b.score)}`);
+}
+
+roundTrip("the skeleton", SKELETON);
+roundTrip("chords and rests", "X:1\nM:4/4\nL:1/8\nK:C\nV:1\n[CEG]4 z2 D2 | C8 |");
+roundTrip("accidentals", "X:1\nM:4/4\nL:1/8\nK:C\nV:1\n^C2 _D2 =E2 ^^F2 |");
+roundTrip("a natural after an accidental", "X:1\nM:4/4\nL:1/8\nK:C\nV:1\n^F2 F2 =F2 F2 |");
+roundTrip("naturals under a key signature", "X:1\nM:4/4\nL:1/8\nK:G\nV:1\n=F2 F2 =C2 C2 |");
+roundTrip("wide octaves", "X:1\nM:4/4\nL:1/8\nK:C\nV:1\nC,,2 C,2 C2 c2 | c'2 c''2 z4 |");
+roundTrip("short notes", "X:1\nM:4/4\nL:1/8\nK:C\nV:1\nC/ D/ E// F// G3/2 A/2 z2 |");
+roundTrip("three four time", "X:1\nM:3/4\nL:1/8\nK:D\nV:1\nD2 F2 A2 | d6 |");
+
+// --- randomised round trip ---------------------------------------------------
+function mulberry(seed: number) {
+  return () => {
+    seed |= 0;
+    seed = (seed + 0x6d2b79f5) | 0;
+    let t = Math.imul(seed ^ (seed >>> 15), 1 | seed);
+    t = (t + Math.imul(t ^ (t >>> 7), 61 | t)) ^ t;
+    return ((t ^ (t >>> 14)) >>> 0) / 4294967296;
+  };
+}
+
+let fuzzFails = 0;
+let firstReport = "";
+for (let trial = 0; trial < 500; trial++) {
+  const rand = mulberry(trial * 7919 + 13);
+  const lengths = [0.5, 1, 1.5, 2, 3, 4, 6, 8];
+  const keys = ["C", "G", "D", "F", "Bb", "Am"];
+  const key = keys[Math.floor(rand() * keys.length)];
+  const notes: AbcNote[] = [];
+  const voiceCount = 1 + Math.floor(rand() * 2);
+  let id = 0;
+
+  for (let v = 0; v < voiceCount; v++) {
+    let t = 0;
+    const count = 1 + Math.floor(rand() * 10);
+    for (let i = 0; i < count; i++) {
+      t += Math.floor(rand() * 3) * 0.5;
+      const duration = lengths[Math.floor(rand() * lengths.length)];
+      notes.push({ id: `f${id++}`, voice: v, start: t, duration, midi: 36 + Math.floor(rand() * 48), tied: false });
+      t += duration;
+    }
+  }
+
+  const score: AbcScore = {
+    header: ["X:1", "M:4/4", "L:1/8", `K:${key}`],
+    voices: Array.from({ length: voiceCount }, (_, i) => ({ id: String(i + 1), rest: "" })),
+    notes,
+    meter: [4, 4],
+    unit: [1, 8],
+    key,
+    repeatsExpanded: false,
+  };
+
+  const text = serializeAbc(score);
+  const back = parseAbc(text);
+  const want = fingerprint(score);
+  const got = back.ok ? fingerprint(back.score) : "PARSE FAILED";
+  if (want !== got) {
+    if (!fuzzFails) firstReport = `\n  first mismatch, trial ${trial}, key ${key}\n${text}\nwant ${want}\ngot  ${got}`;
+    fuzzFails++;
+  }
+}
+check("500 random scores round trip", fuzzFails === 0, `${fuzzFails} mismatched${firstReport}`);
+
+console.log(fails ? `\n${fails} FAILURES` : "\nall assertions passed");
+process.exit(fails ? 1 : 0);

scripts/test-score-editor.mjs

@@ -0,0 +1,116 @@
+import { chromium } from 'playwright';
+const b = await chromium.launch({ executablePath: '/opt/pw-browsers/chromium' });
+const page = await b.newPage();
+const fails = [];
+const check = (l, ok, extra) => { console.log((ok?'  ok    ':'  FAIL  ')+l+(ok||!extra?'':'\n          '+extra)); if(!ok) fails.push(l); };
+
+const errors = [];
+page.on('pageerror', (e) => errors.push(String(e)));
+
+await page.goto('http://127.0.0.1:7903/', { waitUntil: 'domcontentloaded' });
+await page.waitForSelector('#style-input', { timeout: 15000 });
+await page.getByRole('button', { name: /Write or paste a score|Open the score editor/ }).click();
+await page.waitForTimeout(400);
+
+const grid = page.locator('svg[aria-label="Note grid"]');
+check('the grid opens by default', await grid.isVisible());
+
+const notes = () => page.locator('rect[data-note]');
+const mine = () => page.locator('rect[data-note][data-voice="0"]');
+const before = await notes().count();
+check('the skeleton renders as notes', before > 0, `count ${before}`);
+
+check('notation renders beside it', await page.locator('text=Notation').first().isVisible());
+await page.waitForTimeout(900);
+const engraved = await page.locator('.console-scroll svg').count();
+check('abcjs engraved something', engraved > 0, `${engraved} svg`);
+// The engraved staff was absolutely positioned and lay across the grid,
+// swallowing every click meant for a note. Test a note that is actually
+// inside the scroller's visible box, otherwise this only proves the note was
+// scrolled out of view.
+const topAtNote = await page.evaluate(() => {
+  const scroll = document.querySelector('svg[aria-label="Note grid"]')?.parentElement;
+  if (!scroll) return 'no scroller';
+  const view = scroll.getBoundingClientRect();
+  const note = [...document.querySelectorAll('rect[data-note]')].find((r) => {
+    const b = r.getBoundingClientRect();
+    return b.top >= view.top && b.bottom <= view.bottom && b.left >= view.left && b.right <= view.right;
+  });
+  if (!note) return 'no note in view';
+  const b = note.getBoundingClientRect();
+  const el = document.elementFromPoint(b.x + b.width / 2, b.y + b.height / 2);
+  return el ? el.tagName + (el.getAttribute('data-note') ? '#note' : '') : 'null';
+});
+check('nothing overlays the notes', topAtNote === 'rect#note', `topmost was ${topAtNote}`);
+
+// --- read the ABC back out of the text view --------------------------------
+const abcOf = async () => {
+  await page.getByRole('button', { name: 'text', exact: true }).click();
+  const v = await page.locator('textarea[aria-label="Score as ABC notation"]').inputValue();
+  await page.getByRole('button', { name: 'notes', exact: true }).click();
+  await page.waitForTimeout(200);
+  return v;
+};
+const original = await abcOf();
+check('text view shows ABC', original.includes('V:Vocal'), original.slice(0, 60));
+
+// --- drag a note up --------------------------------------------------------
+const first = mine().first();
+const box = await first.boundingBox();
+await page.mouse.move(box.x + box.width / 2, box.y + box.height / 2);
+await page.mouse.down();
+await page.mouse.move(box.x + box.width / 2, box.y - 13 * 2, { steps: 8 });
+await page.mouse.up();
+await page.waitForTimeout(250);
+const afterDrag = await abcOf();
+check('dragging up changed the score', afterDrag !== original);
+check('drag did not destroy the voices', afterDrag.includes('V:Vocal') && afterDrag.includes('V:Ins'));
+check('headers survived the rewrite', afterDrag.includes('T:Your title') && afterDrag.includes('K:G'));
+
+// --- add a note by clicking empty grid -------------------------------------
+const scroller = page.locator('div.console-scroll').filter({ has: grid });
+const gb = await scroller.boundingBox();
+const countBeforeAdd = await notes().count();
+await page.mouse.click(gb.x + gb.width - 40, gb.y + gb.height - 30);
+await page.waitForTimeout(250);
+check('clicking empty grid adds a note', (await notes().count()) === countBeforeAdd + 1, `${countBeforeAdd} -> ${await notes().count()}`);
+
+// --- delete with the keyboard ----------------------------------------------
+const countBeforeDelete = await notes().count();
+await mine().first().focus();
+await page.keyboard.press('Backspace');
+await page.waitForTimeout(250);
+check('Backspace deletes the focused note', (await notes().count()) === countBeforeDelete - 1, `${countBeforeDelete} -> ${await notes().count()}`);
+
+// --- arrow keys nudge -------------------------------------------------------
+await mine().first().focus();
+const beforeNudge = await abcOf();
+await mine().first().focus();
+await page.keyboard.press('ArrowUp');
+await page.waitForTimeout(250);
+check('arrow keys move a note without a mouse', (await abcOf()) !== beforeNudge);
+
+// --- paste a score and see it render ---------------------------------------
+await page.getByRole('button', { name: 'text', exact: true }).click();
+const pasted = 'X:1\nT:Pasted\nM:3/4\nL:1/8\nK:D\nV:Lead\nD2 F2 A2 | d6 |';
+await page.locator('textarea[aria-label="Score as ABC notation"]').fill(pasted);
+await page.getByRole('button', { name: 'notes', exact: true }).click();
+await page.waitForTimeout(400);
+check('a pasted score renders in the grid', (await notes().count()) === 4, `got ${await notes().count()}`);
+check('its voice name is picked up', await page.getByRole('button', { name: 'Lead' }).isVisible());
+
+// --- an unsupported score must refuse, not mangle --------------------------
+await page.getByRole('button', { name: 'text', exact: true }).click();
+await page.locator('textarea[aria-label="Score as ABC notation"]').fill('X:1\nM:4/4\nL:1/8\nK:C\nV:1\n(3CDE G4 |');
+await page.getByRole('button', { name: 'notes', exact: true }).click();
+await page.waitForTimeout(300);
+check('a tuplet is refused with an explanation', await page.getByText(/cannot draw without losing it/).isVisible());
+await page.getByRole('button', { name: 'Edit it as text' }).click();
+await page.waitForTimeout(200);
+check('the refused score is still intact in the text', (await page.locator('textarea[aria-label="Score as ABC notation"]').inputValue()).includes('(3CDE'));
+
+check('no page errors throughout', errors.length === 0, errors.join('\n'));
+
+await b.close();
+console.log(fails.length ? `\n${fails.length} FAILURES` : '\nall assertions passed');
+process.exit(fails.length ? 1 : 0);

src/components/piano-roll.tsx

@@ -0,0 +1,346 @@
+"use client";
+
+import { useCallback, useEffect, useMemo, useRef, useState } from "react";
+
+import type { AbcNote, AbcScore } from "@/lib/abc/model";
+import { noteName, unitsPerBar } from "@/lib/abc/model";
+
+const ROW = 13;
+const UNIT = 26;
+const GUTTER = 52;
+/** A note narrower than this has no room left for its resize edge. */
+const RESIZE_EDGE = 7;
+
+type Drag =
+  | { kind: "move"; id: string; grabUnit: number; grabMidi: number; from: AbcNote }
+  | { kind: "resize"; id: string; from: AbcNote }
+  | null;
+
+const BLACK_KEYS = new Set([1, 3, 6, 8, 10]);
+
+/**
+ * The note grid.
+ *
+ * Pitch runs up the vertical axis and time along the horizontal, drawn as SVG
+ * rather than canvas so every note is a real DOM node: focusable, hit-testable
+ * by the browser, and reachable from a test without pixel arithmetic.
+ *
+ * Every edit goes through onChange with a whole new note list. The score text
+ * is regenerated from that, which keeps one source of truth instead of leaving
+ * the grid and the text to disagree about what the tune is.
+ */
+export function PianoRoll({
+  score,
+  selectedVoice,
+  onChange,
+  onSelectVoice,
+}: {
+  score: AbcScore;
+  selectedVoice: number;
+  onChange: (notes: AbcNote[]) => void;
+  onSelectVoice: (voice: number) => void;
+}) {
+  const surface = useRef<SVGSVGElement>(null);
+  const [drag, setDrag] = useState<Drag>(null);
+  const [selected, setSelected] = useState<string | null>(null);
+  const dragRef = useRef<Drag>(null);
+  dragRef.current = drag;
+
+  const bar = unitsPerBar(score);
+
+  const { low, high, span } = useMemo(() => {
+    if (!score.notes.length) return { low: 48, high: 84, span: 36 };
+    let min = Infinity;
+    let max = -Infinity;
+    for (const note of score.notes) {
+      min = Math.min(min, note.midi);
+      max = Math.max(max, note.midi);
+    }
+    // Breathing room above and below, so a note can always be dragged further.
+    const lo = Math.max(0, Math.floor(min) - 4);
+    const hi = Math.min(127, Math.ceil(max) + 4);
+    return { low: lo, high: hi, span: hi - lo + 1 };
+  }, [score.notes]);
+
+  const totalUnits = useMemo(() => {
+    const end = score.notes.reduce((most, note) => Math.max(most, note.start + note.duration), 0);
+    // Always leave an empty bar at the end to write into.
+    return Math.max(bar * 4, Math.ceil((end + 1) / bar) * bar + bar);
+  }, [score.notes, bar]);
+
+  const width = GUTTER + totalUnits * UNIT;
+  const height = span * ROW;
+
+  const yFor = (midi: number) => (high - midi) * ROW;
+  const midiFor = (y: number) => high - Math.floor(y / ROW);
+
+  // getBoundingClientRect is viewport relative, so the scroll position is
+  // already in it. Adding scrollLeft as well counts it twice, and every hit
+  // test drifts further off the further the grid is scrolled.
+  const pointFrom = useCallback((event: { clientX: number; clientY: number }) => {
+    const box = surface.current?.getBoundingClientRect();
+    if (!box) return null;
+    return {
+      unit: (event.clientX - box.left - GUTTER) / UNIT,
+      midi: midiFor(event.clientY - box.top),
+    };
+  }, [high]);
+
+  // Dragging is tracked on the window, not the note, so the pointer leaving the
+  // note (or the grid) mid gesture does not silently abandon the edit.
+  useEffect(() => {
+    if (!drag) return;
+
+    const move = (event: PointerEvent) => {
+      const current = dragRef.current;
+      if (!current) return;
+      const at = pointFrom(event);
+      if (!at) return;
+
+      onChange(
+        score.notes.map((note) => {
+          if (note.id !== current.id) return note;
+          if (current.kind === "resize") {
+            const want = Math.round(at.unit - note.start);
+            return { ...note, duration: Math.max(1, want) };
+          }
+          const start = Math.max(0, Math.round(current.from.start + (at.unit - current.grabUnit)));
+          const midi = Math.min(127, Math.max(0, current.from.midi + (at.midi - current.grabMidi)));
+          return { ...note, start, midi };
+        }),
+      );
+    };
+
+    const end = () => setDrag(null);
+    window.addEventListener("pointermove", move);
+    window.addEventListener("pointerup", end);
+    window.addEventListener("pointercancel", end);
+    return () => {
+      window.removeEventListener("pointermove", move);
+      window.removeEventListener("pointerup", end);
+      window.removeEventListener("pointercancel", end);
+    };
+  }, [drag, onChange, score.notes, pointFrom]);
+
+  const addAt = (event: React.MouseEvent) => {
+    const at = pointFrom(event);
+    if (!at) return;
+    const start = Math.max(0, Math.floor(at.unit));
+    const id = `n${Date.now().toString(36)}${Math.random().toString(36).slice(2, 6)}`;
+    onChange([...score.notes, { id, voice: selectedVoice, start, duration: 2, midi: at.midi, tied: false }]);
+    setSelected(id);
+  };
+
+  const remove = useCallback(
+    (id: string) => {
+      onChange(score.notes.filter((note) => note.id !== id));
+      setSelected((current) => (current === id ? null : current));
+    },
+    [onChange, score.notes],
+  );
+
+  const nudge = useCallback(
+    (id: string, dMidi: number, dStart: number) => {
+      onChange(
+        score.notes.map((note) =>
+          note.id === id
+            ? {
+                ...note,
+                midi: Math.min(127, Math.max(0, note.midi + dMidi)),
+                start: Math.max(0, note.start + dStart),
+              }
+            : note,
+        ),
+      );
+    },
+    [onChange, score.notes],
+  );
+
+  const rows = [];
+  for (let midi = high; midi >= low; midi--) rows.push(midi);
+
+  const bars = [];
+  for (let unit = 0; unit <= totalUnits; unit += bar) bars.push(unit);
+
+  return (
+    <div className="flex min-h-0 flex-1 flex-col">
+      <div className="flex flex-wrap items-center gap-2 border-b border-line px-5 py-2.5">
+        <span className="text-[11px] tracking-[0.06em] text-ink-dim uppercase">Voice</span>
+        {score.voices.map((voice, index) => (
+          <button
+            key={voice.id}
+            type="button"
+            onClick={() => onSelectVoice(index)}
+            className={`rounded-console border px-2.5 py-1 text-[12px] transition-colors duration-150 ${
+              index === selectedVoice
+                ? "border-citron bg-citron/15 text-citron"
+                : "border-line-strong text-ink-dim hover:border-ink-faint hover:text-ink"
+            }`}
+          >
+            {voice.id}
+          </button>
+        ))}
+        <p className="ml-auto text-[11.5px] text-ink-faint">
+          Click to add, drag to move, drag the right edge to stretch, Backspace to delete
+        </p>
+      </div>
+
+      {/*
+        The grid needs real height. Without a floor it collapses to whatever
+        the surrounding flex column has left over, which on a short window was
+        83px against 390px of notes: the roll scrolled, but most of it could
+        not be reached and the notes in it could not be clicked at all.
+      */}
+      <div className="console-scroll min-h-[260px] flex-1 overflow-auto bg-void">
+        <svg
+          ref={surface}
+          width={width}
+          height={height}
+          role="group"
+          aria-label="Note grid"
+          className="block touch-none select-none"
+          onMouseDown={(event) => {
+            if (event.target === event.currentTarget || (event.target as Element).getAttribute("data-grid")) {
+              addAt(event);
+            }
+          }}
+        >
+          {/* Pitch rows. Black keys are shaded so octaves are countable. */}
+          {rows.map((midi) => (
+            <rect
+              key={midi}
+              data-grid="row"
+              x={GUTTER}
+              y={yFor(midi)}
+              width={width - GUTTER}
+              height={ROW}
+              className={BLACK_KEYS.has(((midi % 12) + 12) % 12) ? "fill-white/[0.025]" : "fill-transparent"}
+            />
+          ))}
+
+          {/* Bar lines, with a brighter one at each bar and a faint beat grid. */}
+          {Array.from({ length: totalUnits + 1 }, (_, unit) => (
+            <line
+              key={`u${unit}`}
+              x1={GUTTER + unit * UNIT}
+              x2={GUTTER + unit * UNIT}
+              y1={0}
+              y2={height}
+              className={unit % bar === 0 ? "stroke-white/15" : "stroke-white/[0.05]"}
+              strokeWidth={1}
+            />
+          ))}
+
+          {bars.slice(0, -1).map((unit, index) => (
+            <text
+              key={`b${unit}`}
+              x={GUTTER + unit * UNIT + 4}
+              y={11}
+              className="fill-ink-faint font-mono text-[9px]"
+            >
+              {index + 1}
+            </text>
+          ))}
+
+          {/* The keyboard gutter, pinned left so pitch is always readable. */}
+          <rect x={0} y={0} width={GUTTER} height={height} className="fill-panel" />
+          {rows.map((midi) => (
+            <g key={`k${midi}`}>
+              <rect
+                x={0}
+                y={yFor(midi)}
+                width={GUTTER}
+                height={ROW}
+                className={BLACK_KEYS.has(((midi % 12) + 12) % 12) ? "fill-white/[0.04]" : "fill-transparent"}
+              />
+              {midi % 12 === 0 ? (
+                <text x={6} y={yFor(midi) + ROW - 3} className="fill-ink-faint font-mono text-[9px]">
+                  {noteName(midi)}
+                </text>
+              ) : null}
+            </g>
+          ))}
+          <line x1={GUTTER} x2={GUTTER} y1={0} y2={height} className="stroke-line-strong" strokeWidth={1} />
+
+          {/* Notes. Other voices stay visible but dimmed, so the part being
+              edited reads clearly without losing the context around it. */}
+          {score.notes.map((note) => {
+            const mine = note.voice === selectedVoice;
+            const w = Math.max(UNIT * note.duration, 6);
+            return (
+              <g key={note.id}>
+                <rect
+                  data-note={note.id}
+                  data-voice={note.voice}
+                  tabIndex={mine ? 0 : -1}
+                  role="button"
+                  aria-label={`${noteName(note.midi)}, bar ${Math.floor(note.start / bar) + 1}`}
+                  x={GUTTER + note.start * UNIT}
+                  y={yFor(note.midi) + 1}
+                  width={w}
+                  height={ROW - 2}
+                  rx={2}
+                  className={
+                    mine
+                      ? `cursor-grab ${selected === note.id ? "fill-citron" : "fill-citron/70"} hover:fill-citron`
+                      : "fill-ink-faint/25"
+                  }
+                  onMouseDown={(event) => {
+                    if (!mine) {
+                      onSelectVoice(note.voice);
+                      return;
+                    }
+                    event.stopPropagation();
+                    setSelected(note.id);
+                    const at = pointFrom(event);
+                    if (!at) return;
+                    const fromEnd = (note.start + note.duration - at.unit) * UNIT;
+                    setDrag(
+                      fromEnd <= RESIZE_EDGE
+                        ? { kind: "resize", id: note.id, from: note }
+                        : { kind: "move", id: note.id, grabUnit: at.unit, grabMidi: at.midi, from: note },
+                    );
+                  }}
+                  onKeyDown={(event) => {
+                    if (!mine) return;
+                    if (event.key === "Backspace" || event.key === "Delete") {
+                      event.preventDefault();
+                      remove(note.id);
+                    } else if (event.key === "ArrowUp") {
+                      event.preventDefault();
+                      nudge(note.id, 1, 0);
+                    } else if (event.key === "ArrowDown") {
+                      event.preventDefault();
+                      nudge(note.id, -1, 0);
+                    } else if (event.key === "ArrowLeft") {
+                      event.preventDefault();
+                      nudge(note.id, 0, -1);
+                    } else if (event.key === "ArrowRight") {
+                      event.preventDefault();
+                      nudge(note.id, 0, 1);
+                    }
+                  }}
+                  onFocus={() => setSelected(note.id)}
+                />
+                {mine && w > RESIZE_EDGE * 2 ? (
+                  <rect
+                    x={GUTTER + (note.start + note.duration) * UNIT - RESIZE_EDGE}
+                    y={yFor(note.midi) + 1}
+                    width={RESIZE_EDGE}
+                    height={ROW - 2}
+                    className="cursor-ew-resize fill-void/30"
+                    onMouseDown={(event) => {
+                      event.stopPropagation();
+                      setSelected(note.id);
+                      setDrag({ kind: "resize", id: note.id, from: note });
+                    }}
+                  />
+                ) : null}
+              </g>
+            );
+          })}
+        </svg>
+      </div>
+    </div>
+  );
+}

src/components/score-panel.tsx

@@ -1,11 +1,16 @@
 "use client";
 
-import { useEffect, useState } from "react";
+import { useCallback, useEffect, useMemo, useState } from "react";
 import { motion } from "motion/react";
 import { Check, Copy, X } from "@phosphor-icons/react";
 
+import { PianoRoll } from "@/components/piano-roll";
+import { StaffPreview } from "@/components/staff-preview";
 import { SuggestionHint, acceptSuggestion } from "@/components/suggestion";
 import { Button } from "@/components/ui";
+import type { AbcNote } from "@/lib/abc/model";
+import { parseAbc } from "@/lib/abc/parse";
+import { serializeAbc } from "@/lib/abc/serialize";
 
 /** The shape YuE2 expects: two voices, no chord symbols. */
 const ABC_SKELETON = `X:1
@@ -18,6 +23,8 @@ V:Vocal
 V:Ins
 |: G,4 B,4 | C4 D4 :|`;
 
+type View = "notes" | "text";
+
 export function ScorePanel({
   open,
   score,
@@ -31,9 +38,23 @@ export function ScorePanel({
 }) {
   const [draft, setDraft] = useState(score);
   const [copied, setCopied] = useState(false);
+  const [view, setView] = useState<View>("notes");
+  const [voice, setVoice] = useState(0);
 
   useEffect(() => setDraft(score), [score]);
 
+  // Opening on an empty score used to show the skeleton in the grid while the
+  // text pane stayed blank: two panes disagreeing about what the tune was, and
+  // a drag would then rewrite a score that had never been shown as text. The
+  // skeleton is seeded instead, so both panes say the same thing from the
+  // first frame. The text view still offers it as a Tab suggestion when the
+  // operator clears the field themselves.
+  useEffect(() => {
+    if (open && !score.trim() && !draft.trim()) setDraft(ABC_SKELETON);
+    // Seeding depends on the panel opening, not on every keystroke.
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [open, score]);
+
   useEffect(() => {
     if (!open) return;
     const onKey = (event: KeyboardEvent) => {
@@ -43,6 +64,23 @@ export function ScorePanel({
     return () => window.removeEventListener("keydown", onKey);
   }, [open, onClose]);
 
+  // The text is the source of truth. The grid is a view of it that can write
+  // back, so every keystroke in the editor re-reads the model and the two can
+  // never drift apart.
+  const parsed = useMemo(() => parseAbc(draft.trim() ? draft : ABC_SKELETON), [draft]);
+
+  const applyNotes = useCallback(
+    (notes: AbcNote[]) => {
+      if (!parsed.ok) return;
+      setDraft(serializeAbc({ ...parsed.score, notes }));
+    },
+    [parsed],
+  );
+
+  useEffect(() => {
+    if (parsed.ok && voice >= parsed.score.voices.length) setVoice(0);
+  }, [parsed, voice]);
+
   if (!open) return null;
 
   const dirty = draft !== score && draft.trim().length > 0;
@@ -59,44 +97,97 @@ export function ScorePanel({
         initial={{ x: 24, opacity: 0 }}
         animate={{ x: 0, opacity: 1 }}
         transition={{ duration: 0.2, ease: "easeOut" }}
-        className="relative flex h-full w-full max-w-[560px] flex-col border-l border-line bg-panel"
+        className="relative flex h-full w-full max-w-[860px] flex-col border-l border-line bg-panel"
       >
-        <header className="flex items-center justify-between border-b border-line px-5 py-3.5">
-          <div>
+        <header className="flex items-start justify-between gap-4 border-b border-line px-5 py-3.5">
+          <div className="min-w-0">
             <h2 className="text-[13px] font-medium text-ink">Score</h2>
             <p className="text-[11.5px] text-ink-faint">
               {score
-                ? "ABC notation. Edit it and render again to keep the take but change the tune."
-                : "Paste ABC notation, or write your own. Whatever is here conditions the next render."}
+                ? "Drag the notes or edit the text. Either way it conditions the next take."
+                : "Paste ABC notation or draw it in, then use it for the next take."}
             </p>
           </div>
-          <button
-            type="button"
-            onClick={onClose}
-            className="flex h-8 w-8 items-center justify-center rounded-console text-ink-dim transition-colors hover:bg-raised hover:text-ink"
-            aria-label="Close"
-          >
-            <X size={15} weight="bold" />
-          </button>
+          <div className="flex shrink-0 items-center gap-2">
+            <div className="flex rounded-console border border-line-strong p-0.5">
+              {(["notes", "text"] as View[]).map((option) => (
+                <button
+                  key={option}
+                  type="button"
+                  onClick={() => setView(option)}
+                  className={`rounded-[3px] px-2.5 py-1 text-[12px] capitalize transition-colors duration-150 ${
+                    view === option ? "bg-citron/15 text-citron" : "text-ink-dim hover:text-ink"
+                  }`}
+                >
+                  {option}
+                </button>
+              ))}
+            </div>
+            <button
+              type="button"
+              onClick={onClose}
+              className="flex h-8 w-8 items-center justify-center rounded-console text-ink-dim transition-colors hover:bg-raised hover:text-ink"
+              aria-label="Close"
+            >
+              <X size={15} weight="bold" />
+            </button>
+          </div>
         </header>
 
-        <textarea
-          value={draft}
-          onChange={(event) => setDraft(event.target.value)}
-          onKeyDown={(event) => {
-            if (acceptSuggestion(event, draft, ABC_SKELETON)) setDraft(ABC_SKELETON);
-          }}
-          spellCheck={false}
-          placeholder={ABC_SKELETON}
-          aria-describedby={draft ? undefined : "score-suggestion-hint"}
-          className="console-scroll flex-1 resize-none bg-void px-5 py-4 font-mono text-[12.5px] leading-[1.7] text-ink placeholder:text-ink-faint/60"
-        />
-        {!draft ? (
-          <div className="border-t border-line px-5 pt-2">
-            <SuggestionHint id="score-suggestion-hint" show />
+        {view === "notes" && !parsed.ok ? (
+          <div className="border-b border-alarm/40 bg-alarm/5 px-5 py-3">
+            <p className="text-[12.5px] text-ink">{parsed.reason}</p>
+            <p className="mt-1 text-[11.5px] leading-snug text-ink-faint">
+              {parsed.offending ? `It stopped at ${parsed.offending.trim()}. ` : ""}
+              The text editor still has it, untouched. Nothing was dropped.
+            </p>
+            <button
+              type="button"
+              onClick={() => setView("text")}
+              className="mt-2 text-[12px] text-citron underline-offset-4 hover:underline"
+            >
+              Edit it as text
+            </button>
           </div>
         ) : null}
 
+        {view === "notes" && parsed.ok && parsed.score.repeatsExpanded ? (
+          <p className="border-b border-line bg-raised/40 px-5 py-2 text-[11.5px] text-ink-faint">
+            Repeat marks were written out so the grid could show every bar. Saving keeps them written out.
+          </p>
+        ) : null}
+
+        {view === "notes" && parsed.ok ? (
+          <PianoRoll
+            score={parsed.score}
+            selectedVoice={voice}
+            onChange={applyNotes}
+            onSelectVoice={setVoice}
+          />
+        ) : (
+          <>
+            <textarea
+              value={draft}
+              onChange={(event) => setDraft(event.target.value)}
+              onKeyDown={(event) => {
+                if (acceptSuggestion(event, draft, ABC_SKELETON)) setDraft(ABC_SKELETON);
+              }}
+              spellCheck={false}
+              placeholder={ABC_SKELETON}
+              aria-label="Score as ABC notation"
+              aria-describedby={draft ? undefined : "score-suggestion-hint"}
+              className="console-scroll flex-1 resize-none bg-void px-5 py-4 font-mono text-[12.5px] leading-[1.7] text-ink placeholder:text-ink-faint/60"
+            />
+            {!draft ? (
+              <div className="border-t border-line px-5 pt-2">
+                <SuggestionHint id="score-suggestion-hint" show />
+              </div>
+            ) : null}
+          </>
+        )}
+
+        <StaffPreview abc={draft.trim() || ABC_SKELETON} />
+
         <footer className="flex items-center justify-between gap-3 border-t border-line px-5 py-3.5">
           <button
             type="button"
@@ -119,7 +210,7 @@ export function ScorePanel({
               onClose();
             }}
           >
-            Use this score
+            Use for the next take
           </Button>
         </footer>
       </motion.aside>

src/components/staff-preview.tsx

@@ -0,0 +1,70 @@
+"use client";
+
+import { useEffect, useRef, useState } from "react";
+
+/**
+ * Engraved notation, rendered from the ABC text by abcjs.
+ *
+ * It renders the *text*, not the note model, which is the point: if the grid
+ * ever wrote something the text does not say, the two panes would disagree on
+ * screen and the bug would be visible rather than silent.
+ *
+ * abcjs is loaded on demand. It is the largest dependency here and nothing
+ * needs it until the score panel is actually opened.
+ */
+export function StaffPreview({ abc }: { abc: string }) {
+  const host = useRef<HTMLDivElement>(null);
+  const [error, setError] = useState<string | null>(null);
+
+  useEffect(() => {
+    let cancelled = false;
+
+    if (!abc.trim()) {
+      if (host.current) host.current.innerHTML = "";
+      setError(null);
+      return;
+    }
+
+    import("abcjs")
+      .then((abcjs) => {
+        if (cancelled || !host.current) return;
+        try {
+          abcjs.renderAbc(host.current, abc, {
+            // Not responsive: "resize". That mode absolutely positions the
+            // engraved svg, which then escapes this container and lies on top
+            // of the note grid, swallowing every click meant for a note. A
+            // fixed staff width keeps the drawing in normal flow.
+            staffwidth: 700,
+            paddingtop: 8,
+            paddingbottom: 8,
+            paddingleft: 0,
+            paddingright: 0,
+            // The engraver draws in currentColor, so the panel's own ink colour
+            // carries through instead of abcjs's default black on black.
+            foregroundColor: "currentColor",
+          });
+          setError(null);
+        } catch (caught) {
+          setError(caught instanceof Error ? caught.message : "This score could not be engraved");
+        }
+      })
+      .catch(() => {
+        if (!cancelled) setError("The notation renderer could not be loaded");
+      });
+
+    return () => {
+      cancelled = true;
+    };
+  }, [abc]);
+
+  return (
+    <div className="shrink-0 border-t border-line bg-panel px-5 py-3">
+      <p className="mb-2 text-[11px] tracking-[0.06em] text-ink-dim uppercase">Notation</p>
+      {error ? (
+        <p className="text-[12px] text-alarm">{error}</p>
+      ) : (
+        <div ref={host} className="console-scroll relative max-h-[170px] overflow-auto text-ink" />
+      )}
+    </div>
+  );
+}

src/lib/abc/model.ts

@@ -0,0 +1,75 @@
+/**
+ * The note model behind the piano roll.
+ *
+ * Time is counted in *units*, where one unit is the tune's L: default note
+ * length. That is the same currency ABC itself writes lengths in, so a note
+ * written `A2` under `L:1/8` is two units long and needs no conversion in
+ * either direction. Using seconds or beats here would mean rounding on every
+ * round trip, and rounding is how an edited score slowly drifts out of time.
+ */
+
+export interface AbcNote {
+  id: string;
+  /** Index into AbcScore.voices. */
+  voice: number;
+  /** Onset in units from the start of the piece. */
+  start: number;
+  /** Length in units. Always at least 1. */
+  duration: number;
+  /** MIDI note number. Rests are held separately, so this is always a pitch. */
+  midi: number;
+  /** True when this note is tied into the one that follows it. */
+  tied: boolean;
+}
+
+export interface AbcVoice {
+  /** The V: identifier as written, e.g. "Vocal". */
+  id: string;
+  /** Anything after the identifier on the V: line, kept so it survives a rewrite. */
+  rest: string;
+}
+
+export interface AbcScore {
+  /** Header lines above the first voice, verbatim and in order. */
+  header: string[];
+  voices: AbcVoice[];
+  notes: AbcNote[];
+  /** Meter numerator and denominator from M:, defaulting to 4/4. */
+  meter: [number, number];
+  /** Unit note length from L:, defaulting to 1/8. */
+  unit: [number, number];
+  /** Key signature from K:, used by the grid to shade the scale. */
+  key: string;
+  /** True when a repeat was written out so the grid could show it. */
+  repeatsExpanded: boolean;
+}
+
+/** Why a score could not be opened in the grid. */
+export interface AbcParseFailure {
+  ok: false;
+  reason: string;
+  /** The construct that stopped us, so the message can name it. */
+  offending: string | null;
+}
+
+export interface AbcParseSuccess {
+  ok: true;
+  score: AbcScore;
+}
+
+export type AbcParseResult = AbcParseSuccess | AbcParseFailure;
+
+/** How many units fill one bar, given the meter and unit length. */
+export function unitsPerBar(score: Pick<AbcScore, "meter" | "unit">): number {
+  const [mn, md] = score.meter;
+  const [un, ud] = score.unit;
+  const bars = (mn / md) / (un / ud);
+  // A meter that does not divide evenly into the unit length is legal ABC but
+  // makes a ragged grid, so it is rounded rather than left fractional.
+  return Math.max(1, Math.round(bars));
+}
+
+export function noteName(midi: number): string {
+  const names = ["C", "C#", "D", "D#", "E", "F", "F#", "G", "G#", "A", "A#", "B"];
+  return `${names[((midi % 12) + 12) % 12]}${Math.floor(midi / 12) - 1}`;
+}

src/lib/abc/parse.ts

@@ -0,0 +1,403 @@
+import type { AbcNote, AbcParseResult, AbcScore, AbcVoice } from "@/lib/abc/model";
+
+/**
+ * Reads the ABC dialect YuE2 and SheetSage2 actually emit.
+ *
+ * This is deliberately not a general ABC parser. It covers notes, rests,
+ * chords, ties, accidentals, octaves, bar lines and repeats, and it *refuses*
+ * anything else. Refusing matters more than coverage here: the grid writes the
+ * score back out, so a construct it silently drops is a construct the operator
+ * loses. When this returns a failure the panel keeps the text editor and says
+ * which construct stopped it, which is recoverable. Quietly deleting a tuplet
+ * is not.
+ */
+
+/** Semitone offset of each natural within an octave. */
+const STEP: Record<string, number> = { C: 0, D: 2, E: 4, F: 5, G: 7, A: 9, B: 11 };
+
+/** Sharps and flats a key signature applies, by letter. */
+const KEY_SIGNATURES: Record<string, string[]> = {
+  C: [], G: ["F"], D: ["F", "C"], A: ["F", "C", "G"], E: ["F", "C", "G", "D"],
+  B: ["F", "C", "G", "D", "A"], "F#": ["F", "C", "G", "D", "A", "E"],
+  F: ["B"], Bb: ["B", "E"], Eb: ["B", "E", "A"], Ab: ["B", "E", "A", "D"],
+  Db: ["B", "E", "A", "D", "G"], Gb: ["B", "E", "A", "D", "G", "C"],
+};
+
+const UNSUPPORTED: { pattern: RegExp; name: string }[] = [
+  { pattern: /\(\d/, name: "a tuplet" },
+  { pattern: /\{/, name: "a grace note" },
+  { pattern: /![^!\n]*!/, name: "a decoration" },
+  { pattern: /\+[^+\n]*\+/, name: "a decoration" },
+  { pattern: /"[^"\n]*"/, name: "a chord symbol or annotation" },
+];
+
+interface Cursor {
+  text: string;
+  at: number;
+}
+
+export function parseAbc(source: string): AbcParseResult {
+  const lines = source.replace(/\r\n?/g, "\n").split("\n");
+
+  const header: string[] = [];
+  const voices: AbcVoice[] = [];
+  const bodyByVoice = new Map<number, string[]>();
+
+  let meter: [number, number] = [4, 4];
+  let unit: [number, number] | null = null;
+  let key = "C";
+  let current = -1;
+  let sawVoiceLine = false;
+
+  for (const raw of lines) {
+    const line = raw.replace(/%.*$/, "").trimEnd();
+    if (!line.trim()) continue;
+
+    const field = /^([A-Za-z]):\s*(.*)$/.exec(line);
+    if (field) {
+      const [, tag, value] = field;
+
+      if (tag === "V") {
+        sawVoiceLine = true;
+        const [id, ...rest] = value.trim().split(/\s+/);
+        const existing = voices.findIndex((v) => v.id === id);
+        if (existing >= 0) {
+          current = existing;
+        } else {
+          voices.push({ id: id || `V${voices.length + 1}`, rest: rest.join(" ") });
+          current = voices.length - 1;
+          bodyByVoice.set(current, []);
+        }
+        continue;
+      }
+
+      if (tag === "M") {
+        const m = /^(\d+)\s*\/\s*(\d+)$/.exec(value.trim());
+        if (m) meter = [Number(m[1]), Number(m[2])];
+        else if (value.trim() === "C") meter = [4, 4];
+        else if (value.trim() === "C|") meter = [2, 2];
+      }
+      if (tag === "L") {
+        const m = /^(\d+)\s*\/\s*(\d+)$/.exec(value.trim());
+        if (m) unit = [Number(m[1]), Number(m[2])];
+      }
+      if (tag === "K") key = value.trim() || "C";
+
+      // Header fields stay verbatim so a rewrite cannot reword the tune.
+      if (!sawVoiceLine) header.push(line);
+      continue;
+    }
+
+    if (current < 0) {
+      // Music before any V: line is a single implicit voice.
+      voices.push({ id: "1", rest: "" });
+      current = 0;
+      bodyByVoice.set(0, []);
+    }
+    bodyByVoice.get(current)!.push(line);
+  }
+
+  if (!voices.length) {
+    return { ok: false, reason: "There is no music in this score yet.", offending: null };
+  }
+
+  // L: is optional in ABC. Its default depends on the meter: short meters get
+  // a sixteenth, everything else an eighth.
+  if (!unit) unit = meter[0] / meter[1] < 0.75 ? [1, 16] : [1, 8];
+
+  const notes: AbcNote[] = [];
+  let repeatsExpanded = false;
+  let seq = 0;
+
+  for (const [voiceIndex, body] of bodyByVoice) {
+    const text = body.join(" ");
+
+    for (const { pattern, name } of UNSUPPORTED) {
+      const hit = pattern.exec(text);
+      if (hit) {
+        return {
+          ok: false,
+          reason: `This score contains ${name}, which the grid cannot draw without losing it.`,
+          offending: hit[0],
+        };
+      }
+    }
+
+    const read = readVoice(text, key);
+    if (!read.ok) return read;
+    if (read.repeated) repeatsExpanded = true;
+
+    for (const event of read.events) {
+      notes.push({
+        id: `n${seq++}`,
+        voice: voiceIndex,
+        start: event.start,
+        duration: event.duration,
+        midi: event.midi,
+        tied: event.tied,
+      });
+    }
+  }
+
+  notes.sort((a, b) => a.start - b.start || a.midi - b.midi);
+
+  const score: AbcScore = { header, voices, notes, meter, unit, key, repeatsExpanded };
+  return { ok: true, score };
+}
+
+interface Event {
+  start: number;
+  duration: number;
+  midi: number;
+  tied: boolean;
+}
+
+interface VoiceOk {
+  ok: true;
+  events: Event[];
+  repeated: boolean;
+}
+
+function readVoice(text: string, key: string): VoiceOk | Extract<AbcParseResult, { ok: false }> {
+  const cursor: Cursor = { text, at: 0 };
+  const events: Event[] = [];
+
+  // A repeated section has to be written out, because the grid shows time as
+  // one straight line and cannot draw "go back and play that again".
+  let sectionStart = 0;
+  let sectionEventStart = 0;
+  let repeated = false;
+
+  let time = 0;
+  // Accidentals last to the end of the bar in ABC, exactly as in notation.
+  let barAccidentals: Record<string, number> = {};
+  const signature = accidentalsFor(key);
+
+  const pushTiedOrNew = (event: Event) => {
+    const previous = events[events.length - 1];
+    if (previous && previous.tied && previous.midi === event.midi) {
+      previous.duration += event.duration;
+      previous.tied = event.tied;
+      return;
+    }
+    events.push(event);
+  };
+
+  while (cursor.at < cursor.text.length) {
+    const ch = cursor.text[cursor.at];
+
+    if (ch === " " || ch === "\t") {
+      cursor.at++;
+      continue;
+    }
+
+    // Bar lines, in the order that matters: two-character forms first.
+    const two = cursor.text.slice(cursor.at, cursor.at + 2);
+    if (two === ":|" || two === "::") {
+      const from = events.length;
+      // Replay everything since the section opened.
+      const span = time - sectionStart;
+      for (let i = sectionEventStart; i < from; i++) {
+        const source = events[i];
+        events.push({ ...source, start: source.start + span });
+      }
+      if (from > sectionEventStart) repeated = true;
+      time += span;
+      sectionStart = time;
+      sectionEventStart = events.length;
+      cursor.at += 2;
+      barAccidentals = {};
+      continue;
+    }
+    if (two === "|:" || two === "||" || two === "|]" || two === "[|") {
+      sectionStart = time;
+      sectionEventStart = events.length;
+      cursor.at += 2;
+      barAccidentals = {};
+      continue;
+    }
+    if (ch === "|") {
+      cursor.at++;
+      barAccidentals = {};
+      continue;
+    }
+    if (ch === ":") {
+      cursor.at++;
+      continue;
+    }
+
+    // Slur parentheses carry no duration. Tuplets were rejected earlier, so a
+    // bare "(" here is safe to skip.
+    if (ch === "(" || ch === ")") {
+      cursor.at++;
+      continue;
+    }
+    if (ch === "-") {
+      const previous = events[events.length - 1];
+      if (previous) previous.tied = true;
+      cursor.at++;
+      continue;
+    }
+    if (ch === "$" || ch === "\\") {
+      cursor.at++;
+      continue;
+    }
+
+    // A chord: every note inside shares one onset and one length.
+    if (ch === "[") {
+      const close = cursor.text.indexOf("]", cursor.at);
+      if (close < 0) {
+        return { ok: false, reason: "A chord bracket is never closed.", offending: "[" };
+      }
+      const inner = cursor.text.slice(cursor.at + 1, close);
+      cursor.at = close + 1;
+      const trailing = readLength(cursor);
+
+      const chordCursor: Cursor = { text: inner, at: 0 };
+      let chordLength = 1;
+      const pitches: number[] = [];
+      while (chordCursor.at < inner.length) {
+        if (/\s/.test(inner[chordCursor.at])) {
+          chordCursor.at++;
+          continue;
+        }
+        const note = readNote(chordCursor, barAccidentals, signature);
+        if (!note) {
+          return { ok: false, reason: "A chord contains something that is not a note.", offending: inner };
+        }
+        if (note.midi !== null) pitches.push(note.midi);
+        chordLength = note.length;
+      }
+
+      const duration = chordLength * trailing;
+      for (const midi of pitches) {
+        pushTiedOrNew({ start: time, duration, midi, tied: false });
+      }
+      time += duration;
+      continue;
+    }
+
+    const note = readNote(cursor, barAccidentals, signature);
+    if (note) {
+      if (note.midi === null) {
+        time += note.length; // a rest
+      } else {
+        pushTiedOrNew({ start: time, duration: note.length, midi: note.midi, tied: false });
+        time += note.length;
+      }
+      continue;
+    }
+
+    return {
+      ok: false,
+      reason: "This score has notation the grid does not understand.",
+      offending: cursor.text.slice(cursor.at, cursor.at + 8).trim() || "?",
+    };
+  }
+
+  return { ok: true, events, repeated };
+}
+
+interface ReadNote {
+  midi: number | null;
+  length: number;
+}
+
+function readNote(
+  cursor: Cursor,
+  barAccidentals: Record<string, number>,
+  signature: Record<string, number>,
+): ReadNote | null {
+  const start = cursor.at;
+  let accidental: number | null = null;
+
+  while (cursor.at < cursor.text.length) {
+    const ch = cursor.text[cursor.at];
+    if (ch === "^") {
+      accidental = (accidental ?? 0) + 1;
+      cursor.at++;
+    } else if (ch === "_") {
+      accidental = (accidental ?? 0) - 1;
+      cursor.at++;
+    } else if (ch === "=") {
+      accidental = 0;
+      cursor.at++;
+    } else {
+      break;
+    }
+  }
+
+  const letter = cursor.text[cursor.at];
+  if (!letter || !/[A-Ga-gzZxX]/.test(letter)) {
+    cursor.at = start;
+    return null;
+  }
+  cursor.at++;
+
+  if (/[zZxX]/.test(letter)) {
+    return { midi: null, length: readLength(cursor) };
+  }
+
+  // Lower case is the octave above upper case, then , and ' shift further.
+  const upper = letter.toUpperCase();
+  let octave = letter === upper ? 4 : 5;
+  while (cursor.at < cursor.text.length) {
+    const ch = cursor.text[cursor.at];
+    if (ch === ",") {
+      octave--;
+      cursor.at++;
+    } else if (ch === "'") {
+      octave++;
+      cursor.at++;
+    } else {
+      break;
+    }
+  }
+
+  const slot = `${upper}${octave}`;
+  if (accidental !== null) barAccidentals[slot] = accidental;
+  const applied = slot in barAccidentals ? barAccidentals[slot] : (signature[upper] ?? 0);
+
+  const midi = (octave + 1) * 12 + STEP[upper] + applied;
+  return { midi, length: readLength(cursor) };
+}
+
+/** Reads the multiplier after a note: `2`, `/2`, `/`, `3/2`, or nothing. */
+function readLength(cursor: Cursor): number {
+  let numerator = "";
+  while (/\d/.test(cursor.text[cursor.at] ?? "")) numerator += cursor.text[cursor.at++];
+
+  let denominator = "";
+  let slashes = 0;
+  while (cursor.text[cursor.at] === "/") {
+    slashes++;
+    cursor.at++;
+  }
+  if (slashes) {
+    while (/\d/.test(cursor.text[cursor.at] ?? "")) denominator += cursor.text[cursor.at++];
+  }
+
+  const top = numerator ? Number(numerator) : 1;
+  // `/` alone halves, `//` quarters, and so on.
+  const bottom = denominator ? Number(denominator) : slashes ? 2 ** slashes : 1;
+  const value = top / bottom;
+  return Number.isFinite(value) && value > 0 ? value : 1;
+}
+
+export function accidentalsFor(key: string): Record<string, number> {
+  const match = /^([A-G][#b]?)/.exec(key.trim());
+  const root = match ? match[1] : "C";
+  const minor = /m(?!aj)/i.test(key) && !/major/i.test(key);
+  // A minor key carries the signature of its relative major.
+  const relative = (minor ? RELATIVE_MAJOR[root] : undefined) ?? root;
+  const letters = KEY_SIGNATURES[relative] ?? [];
+  const sharp = !relative.includes("b") && relative !== "F";
+  const out: Record<string, number> = {};
+  for (const letter of letters) out[letter] = sharp ? 1 : -1;
+  return out;
+}
+
+/** A minor key carries the signature of its relative major. */
+const RELATIVE_MAJOR: Record<string, string> = {
+  A: "C", E: "G", B: "D", "F#": "A", "C#": "E", D: "F", G: "Bb", C: "Eb", F: "Ab", Bb: "Db",
+};

src/lib/abc/serialize.ts

@@ -0,0 +1,193 @@
+import type { AbcNote, AbcScore } from "@/lib/abc/model";
+import { unitsPerBar } from "@/lib/abc/model";
+import { accidentalsFor } from "@/lib/abc/parse";
+
+/**
+ * Writes the note model back out as ABC.
+ *
+ * Headers come through verbatim, so a rewrite can never reword the tune's
+ * title, meter or key. Only the music is regenerated, and only from what the
+ * grid actually holds.
+ *
+ * Simultaneous notes in one voice are emitted as chords, rests fill the gaps,
+ * and a note crossing a bar line is tied across it rather than being truncated
+ * or allowed to run past the barline, either of which would change the music.
+ */
+export function serializeAbc(score: AbcScore): string {
+  const bar = unitsPerBar(score);
+  const lines = [...score.header];
+
+  for (let voice = 0; voice < score.voices.length; voice++) {
+    const meta = score.voices[voice];
+    lines.push(`V:${meta.id}${meta.rest ? ` ${meta.rest}` : ""}`);
+
+    const notes = score.notes
+      .filter((note) => note.voice === voice)
+      .sort((a, b) => a.start - b.start || a.midi - b.midi);
+
+    lines.push(...voiceLines(notes, bar, score.key));
+  }
+
+  return lines.join("\n");
+}
+
+function voiceLines(notes: AbcNote[], bar: number, key: string): string[] {
+  if (!notes.length) return ["z8 |"];
+
+  // Accidentals carry to the end of the bar, so writing one changes how every
+  // later note on that pitch reads. The serializer has to track exactly what
+  // the parser will track, or a natural written after a sharp comes back as a
+  // sharp. The fuzz test found this; the fixed cases never did, because they
+  // happened not to put a natural after an accidental in one bar.
+  const signature = accidentalsFor(key);
+  let barAccidentals: Record<string, number> = {};
+
+  // Group by onset so a chord is written once rather than as stacked notes.
+  const byStart = new Map<number, AbcNote[]>();
+  for (const note of notes) {
+    const list = byStart.get(note.start);
+    if (list) list.push(note);
+    else byStart.set(note.start, [note]);
+  }
+
+  const onsets = [...byStart.keys()].sort((a, b) => a - b);
+  const end = Math.max(...notes.map((note) => note.start + note.duration));
+  const totalBars = Math.max(1, Math.ceil(end / bar));
+
+  const out: string[] = [];
+  let tokens: string[] = [];
+  let cursor = 0;
+  let index = 0;
+
+  for (let barIndex = 0; barIndex < totalBars; barIndex++) {
+    const barEnd = (barIndex + 1) * bar;
+    const parts: string[] = [];
+    barAccidentals = {};
+
+    while (index < onsets.length && onsets[index] < barEnd) {
+      const start = onsets[index];
+
+      if (start > cursor) {
+        parts.push(`z${lengthToken(start - cursor)}`);
+        cursor = start;
+      }
+
+      const group = byStart.get(start)!;
+      // A chord's length is its shortest member, so nothing in it overruns.
+      const want = Math.min(...group.map((note) => note.duration));
+      // Split at the bar line and tie, so the written bar still adds up.
+      const fits = Math.min(want, barEnd - start);
+
+      parts.push(chordToken(group, fits, key, barAccidentals, signature) + (fits < want ? "-" : ""));
+      cursor = start + fits;
+
+      if (fits < want) {
+        // The remainder becomes a fresh onset in the next bar.
+        const remainder = group.map((note) => ({ ...note, start: cursor, duration: want - fits }));
+        const existing = byStart.get(cursor);
+        if (existing) existing.push(...remainder);
+        else {
+          byStart.set(cursor, remainder);
+          onsets.splice(index + 1, 0, cursor);
+        }
+      }
+      index++;
+    }
+
+    if (cursor < barEnd && barIndex < totalBars) {
+      const rest = barEnd - cursor;
+      // Trailing silence past the last note is not worth writing.
+      if (index < onsets.length || barIndex < totalBars - 1) {
+        parts.push(`z${lengthToken(rest)}`);
+        cursor = barEnd;
+      }
+    }
+
+    if (parts.length) tokens.push(parts.join(" "), "|");
+
+    // Four bars to a line keeps the text readable next to the grid.
+    if ((barIndex + 1) % 4 === 0 && tokens.length) {
+      out.push(tokens.join(" "));
+      tokens = [];
+    }
+  }
+
+  if (tokens.length) out.push(tokens.join(" "));
+  return out.length ? out : ["z8 |"];
+}
+
+function chordToken(
+  group: AbcNote[],
+  duration: number,
+  key: string,
+  barAccidentals: Record<string, number>,
+  signature: Record<string, number>,
+): string {
+  const spell = (note: AbcNote) => pitchToken(note.midi, key, barAccidentals, signature);
+  if (group.length === 1) return spell(group[0]) + lengthToken(duration);
+  return `[${group.map(spell).join("")}]${lengthToken(duration)}`;
+}
+
+const SHARP_SPELLING = ["C", "^C", "D", "^D", "E", "F", "^F", "G", "^G", "A", "^A", "B"];
+const FLAT_SPELLING = ["C", "_D", "D", "_E", "E", "F", "_G", "G", "_A", "A", "_B", "B"];
+
+/**
+ * Spells a MIDI note, writing an accidental whenever one is needed to be read
+ * back as this exact pitch.
+ *
+ * "Needed" covers three cases, and missing any of them silently transposes a
+ * note on the next parse: the pitch is a black key; the key signature already
+ * alters this letter and we want the natural; or an accidental earlier in this
+ * bar altered it and we want something else now. The last two both require an
+ * explicit natural sign, which is easy to forget because the note itself has
+ * no accidental in it.
+ */
+function pitchToken(
+  midi: number,
+  key: string,
+  barAccidentals: Record<string, number>,
+  signature: Record<string, number>,
+): string {
+  const flats = /b/.test(key) || /^(F|Dm|Gm|Cm|Fm|Bbm|Ebm)\b/.test(key.trim());
+  const spelling = flats ? FLAT_SPELLING : SHARP_SPELLING;
+  const step = spelling[((midi % 12) + 12) % 12];
+  const letter = step.replace(/[\^_]/, "");
+  const wanted = step.startsWith("^") ? 1 : step.startsWith("_") ? -1 : 0;
+  const octave = Math.floor(midi / 12) - 1;
+  const slot = `${letter}${octave}`;
+
+  const inForce = slot in barAccidentals ? barAccidentals[slot] : (signature[letter] ?? 0);
+
+  let mark = "";
+  if (wanted !== inForce) {
+    mark = wanted === 1 ? "^" : wanted === -1 ? "_" : "=";
+    barAccidentals[slot] = wanted;
+  }
+
+  // Lower case is the octave above upper case.
+  const body = octave >= 5 ? letter.toLowerCase() + "'".repeat(octave - 5) : letter + ",".repeat(Math.max(0, 4 - octave));
+  return mark + body;
+}
+
+/** Writes a length in units the way ABC spells it. */
+function lengthToken(units: number): string {
+  if (Math.abs(units - 1) < 1e-9) return "";
+  if (units >= 1 && Math.abs(units - Math.round(units)) < 1e-9) return String(Math.round(units));
+
+  // Halves and quarters have their own shorthand; anything else is a fraction.
+  const rounded = Math.round(units * 16) / 16;
+  if (Math.abs(rounded - 0.5) < 1e-9) return "/";
+  if (Math.abs(rounded - 0.25) < 1e-9) return "//";
+
+  for (let denominator = 2; denominator <= 16; denominator++) {
+    const numerator = rounded * denominator;
+    if (Math.abs(numerator - Math.round(numerator)) < 1e-9) {
+      const top = Math.round(numerator);
+      return top === 1 ? `/${denominator}` : `${top}/${denominator}`;
+    }
+  }
+  return String(Math.max(1, Math.round(units)));
+}
+
+/** Exposed for the round-trip tests only. */
+export const __testables = { lengthToken, pitchToken };