fix piano key positions, Svelte event dispatch, black key gap

app.py

@@ -396,12 +396,15 @@ PIANO_HTML = """
     {midi:79,n:'G5'},{midi:81,n:'A5'},{midi:83,n:'B5'},
     {midi:84,n:'C6'}
   ];
+  // Each entry: MIDI -> [white-key-index-of-left-neighbor, 0]
+  // C#/Db is right of C (index 0,7,14), D# right of D (1,8,15), etc.
   const BLACK_POSITIONS = {
-    49:[1,0], 51:[2,0], 54:[4,0], 56:[5,0], 58:[6,0],
-    61:[8,0], 63:[9,0], 66:[11,0], 68:[12,0], 70:[13,0],
-    73:[15,0], 75:[16,0], 78:[18,0], 80:[19,0], 82:[20,0]
+    49:[0,0], 51:[1,0], 54:[3,0], 56:[4,0], 58:[5,0],
+    61:[7,0], 63:[8,0], 66:[10,0], 68:[11,0], 70:[12,0],
+    73:[14,0], 75:[15,0], 78:[17,0], 80:[18,0], 82:[19,0]
   };
   const KEY_WIDTH = 36;
+  const KEY_STEP = 38; // KEY_WIDTH + gap(2)
   let held = new Set();
   const piano = document.getElementById('piano');
 
@@ -424,7 +427,7 @@ PIANO_HTML = """
     const el = document.createElement('div');
     el.className = 'black-key';
     el.dataset.midi = midi;
-    el.style.left = (wIdx * KEY_WIDTH + KEY_WIDTH * 0.65) + 'px';
+    el.style.left = (wIdx * KEY_STEP + KEY_WIDTH * 0.65) + 'px';
     el.addEventListener('mousedown', (e) => { e.preventDefault(); toggleNote(parseInt(midi)); });
     piano.appendChild(el);
   });
@@ -460,13 +463,11 @@ PIANO_HTML = """
 
   function pushNotes() {
     const json = JSON.stringify([...held]);
-    // Find Gradio hidden textbox by elem_id
     const tb = document.querySelector('#notes-state textarea');
     if (tb) {
-      const nativeInputValueSetter = Object.getOwnPropertyDescriptor(
-        window.HTMLTextAreaElement.prototype, 'value').set;
-      nativeInputValueSetter.call(tb, json);
+      tb.value = json;
       tb.dispatchEvent(new Event('input', { bubbles: true }));
+      tb.dispatchEvent(new Event('change', { bubbles: true }));
     }
   }
 })();