Score: keep q-q-h bars visually symmetric via tied quarter notes

Twinkle's "little star" bars (q q half) rendered with a large empty
slot after the half-note head because beat 4 had no glyph of its own.
On desktop the gap read as a layout bug, though engraving-wise it was
correct. Rewrite the three affected bars as q-q-q-q with a <tie> on
the last two notes so beat 4 carries a visible notehead and the bar
width matches its q-q-q-q siblings.

Audio preserves the original "held" intent: each tie makes the
leading note's `audioEndMs` span the tied duration while the trailing
note sets `playAudio: false`, so the scheduler skips a re-attack.
Visually both notes still receive `.is-active` during their own beat.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>

Author: RuitingMa

public/scores/twinkle/score.mei

@@ -28,13 +28,18 @@
               <harm place="below" staff="1" tstamp="1" n="2">I</harm>
             </measure>
 
-            <!-- Bar 2 — little star, Am7, vi -->
+            <!-- Bar 2 — little star, Am7, vi. Beats 3-4 are a held g;
+                 written as two tied quarter notes rather than a half so
+                 beat 4 shows a notehead (engraving-equivalent, keeps the
+                 measure visually symmetric with the q-q-q-q bars). -->
             <measure n="2">
               <staff n="1"><layer n="1">
                 <note pname="a" oct="4" dur="4"/>
                 <note pname="a" oct="4" dur="4"/>
-                <note pname="g" oct="4" dur="2"/>
+                <note xml:id="tw-b2-n3" pname="g" oct="4" dur="4"/>
+                <note xml:id="tw-b2-n4" pname="g" oct="4" dur="4"/>
               </layer></staff>
+              <tie startid="#tw-b2-n3" endid="#tw-b2-n4"/>
               <harm place="above" staff="1" tstamp="1" n="1">Am7</harm>
               <harm place="below" staff="1" tstamp="1" n="2">vi</harm>
             </measure>
@@ -51,13 +56,15 @@
               <harm place="below" staff="1" tstamp="1" n="2">IV</harm>
             </measure>
 
-            <!-- Bar 4 — what you are, Dm7 → G7 (ii-V), resolving to I next bar -->
+            <!-- Bar 4 — what you are, Dm7 → G7 (ii-V), resolving to I next bar. -->
             <measure n="4">
               <staff n="1"><layer n="1">
                 <note pname="d" oct="4" dur="4"/>
                 <note pname="d" oct="4" dur="4"/>
-                <note pname="c" oct="4" dur="2"/>
+                <note xml:id="tw-b4-n3" pname="c" oct="4" dur="4"/>
+                <note xml:id="tw-b4-n4" pname="c" oct="4" dur="4"/>
               </layer></staff>
+              <tie startid="#tw-b4-n3" endid="#tw-b4-n4"/>
               <harm place="above" staff="1" tstamp="1" n="1">Dm7</harm>
               <harm place="above" staff="1" tstamp="3" n="1">G7</harm>
               <harm place="below" staff="1" tstamp="1" n="2">ii</harm>
@@ -81,8 +88,10 @@
               <staff n="1"><layer n="1">
                 <note pname="e" oct="4" dur="4"/>
                 <note pname="e" oct="4" dur="4"/>
-                <note pname="d" oct="4" dur="2"/>
+                <note xml:id="tw-b6-n3" pname="d" oct="4" dur="4"/>
+                <note xml:id="tw-b6-n4" pname="d" oct="4" dur="4"/>
               </layer></staff>
+              <tie startid="#tw-b6-n3" endid="#tw-b6-n4"/>
               <harm place="above" staff="1" tstamp="1" n="1">G7</harm>
               <harm place="below" staff="1" tstamp="1" n="2">V7</harm>
             </measure>

src/lib/score-player.ts

@@ -105,6 +105,14 @@ interface Note {
   startMs: number;
   endMs: number;
   midi: number;
+  /** If present, audio sustains to this ms instead of `endMs` — used so
+   *  a tie-leading note plays through the whole tied duration without
+   *  the tie-trailing note re-attacking. `endMs` still bounds the
+   *  visual glow so the glyph goes dark when its beat is over. */
+  audioEndMs?: number;
+  /** False on tie-trailing notes so the scheduler skips them. Default
+   *  (undefined) is treated as true. */
+  playAudio?: boolean;
 }
 
 /**
@@ -319,6 +327,23 @@ async function renderMei(meiText: string): Promise<Rendered> {
         'SVG:', svgHarmIds.length, '— skipping harm sync',
       );
     }
+
+    // Ties: `<tie startid="#X" endid="#Y"/>` means the X note sustains
+    // into Y without a re-attack. Extend X's audio range through Y,
+    // and mute Y in the audio scheduler. Visuals keep both notes so
+    // each glyph glows when its own beat is sounding.
+    const notesById = new Map<string, Note>();
+    for (const n of notes) notesById.set(n.id, n);
+    for (const tie of Array.from(meiDoc.querySelectorAll('tie'))) {
+      const startId = tie.getAttribute('startid')?.replace(/^#/, '');
+      const endId = tie.getAttribute('endid')?.replace(/^#/, '');
+      if (!startId || !endId) continue;
+      const startNote = notesById.get(startId);
+      const endNote = notesById.get(endId);
+      if (!startNote || !endNote) continue;
+      startNote.audioEndMs = endNote.endMs;
+      endNote.playAudio = false;
+    }
   } catch (err) {
     console.warn('[score] MEI metadata extraction failed:', err);
   }
@@ -666,8 +691,10 @@ class ScorePlayer {
     for (const note of this.sortedNotes) {
       if (note.startMs < fromMs) continue;
       if (note.startMs >= toMs) break;
+      if (note.playAudio === false) continue;
       const startT = this.iterStart + (iterBase + note.startMs) / 1000;
-      const endT = this.iterStart + (iterBase + note.endMs) / 1000;
+      const audioEnd = note.audioEndMs ?? note.endMs;
+      const endT = this.iterStart + (iterBase + audioEnd) / 1000;
       this.synth.play(note.midi, startT, endT);
     }
   }