Align MIDI Studio V2 piano keys to the right and improve keyboard realism - PR_26146_044-midi-studio-v2-piano-key-right-alignment

Author: ToolboxAid

docs/dev/reports/PR_26146_044-midi-studio-v2-piano-key-right-alignment_validation.md

@@ -0,0 +1,86 @@
+# PR_26146_044 MIDI Studio V2 Piano Key Right Alignment Validation
+
+Status: PASS
+
+## Scope
+
+- Right-aligned MIDI Studio V2 black piano keys within the frozen keyboard column.
+- Preserved full-width white/natural keys.
+- Filled the unused left area behind black keys with the same white-key background.
+- Preserved readable left-aligned note text inside the right-aligned black key surface.
+- Preserved frozen keyboard axis behavior, row alignment, square cells, zoom controls, active note highlights without printed note text, multi-note/chord editing, section/loop behavior, and Play/Stop.
+
+## Files Changed
+
+- `tools/midi-studio-v2/styles/midiStudioV2.css`
+- `tests/playwright/tools/MidiStudioV2.spec.mjs`
+- `docs/dev/reports/PR_26146_044-midi-studio-v2-piano-key-right-alignment_validation.md`
+- `docs/dev/reports/coverage_changed_js_guardrail.txt`
+- `docs/dev/codex_commands.md`
+- `docs/dev/commit_comment.txt`
+
+Review artifacts are generated separately:
+
+- `docs/dev/reports/codex_review.diff`
+- `docs/dev/reports/codex_changed_files.txt`
+- `docs/dev/reports/playwright_v8_coverage_report.txt`
+
+## Validation Commands
+
+PASS:
+
+```powershell
+node --check tests/playwright/tools/MidiStudioV2.spec.mjs
+node --check tools/midi-studio-v2/js/controls/InstrumentGridControl.js
+node -e "const fs=require('fs'); const p='tools/midi-studio-v2/index.html'; const html=fs.readFileSync(p,'utf8'); if(/<script(?![^>]*\ssrc=)[^>]*>/i.test(html)) throw new Error('Inline script block found'); if(/<style\b/i.test(html)) throw new Error('Inline style block found'); if(/\son[a-z]+\s*=/i.test(html)) throw new Error('Inline event handler found'); console.log('HTML external-only guard passed:', p);"
+node -e "const fs=require('fs'); for (const file of ['tools/midi-studio-v2/styles/midiStudioV2.css']) { const text=fs.readFileSync(file,'utf8'); let depth=0; for (const ch of text) { if (ch==='{') depth++; if (ch==='}') depth--; if (depth<0) throw new Error(file+': unexpected }'); } if (depth!==0) throw new Error(file+': unbalanced braces'); console.log(file+': CSS brace check OK'); }"
+npx.cmd playwright test tests/playwright/tools/MidiStudioV2.spec.mjs -g "octave timeline freezes compact headers and note labels while active cells stay textless|fast octave note editing supports drag painting keyboard shortcuts selection and timeline scroll sync|renders timing ruler, section navigation, and loop region visualization" --config=codex_playwright_system_chrome.config.cjs --reporter=list --workers=1 --timeout=60000
+git diff --check
+```
+
+Playwright result:
+
+```text
+Running 3 tests using 1 worker
+
+ok 1 MIDI Studio V2 - fast octave note editing supports drag painting keyboard shortcuts selection and timeline scroll sync
+ok 2 MIDI Studio V2 - octave timeline freezes compact headers and note labels while active cells stay textless
+ok 3 MIDI Studio V2 - renders timing ruler, section navigation, and loop region visualization
+
+3 passed
+```
+
+Notes:
+
+- `git diff --check` exited 0. Git emitted line-ending warnings for touched files; no whitespace errors were reported.
+- Full samples smoke test was not run.
+
+## Test Evidence
+
+- Right-aligned keys: Playwright verifies white keys remain full-width and black keys have `right: 0`.
+- Black-key inset: Playwright verifies the black key is narrower than the white key and has unused left space.
+- White bed behind black keys: Playwright verifies the black-key row bed background matches the white-key background.
+- Text readability/alignment: Playwright verifies white and black note letters are visible, use readable colors, and black-key text sits inside the right-aligned black-key surface.
+- Frozen horizontal behavior: Playwright scrolls horizontally and verifies the keyboard axis remains visible while header/body columns stay aligned.
+- Row alignment: Playwright verifies keyboard label rows and timeline cells remain aligned within 1px.
+- Active note cells: Playwright toggles a note and verifies the cell text is empty while highlight metadata and the visual marker remain present.
+- Play and Stop: targeted Playwright verifies Play enables Stop and Stop re-enables Play.
+
+## Coverage
+
+- No browser runtime JavaScript files changed in this PR.
+- `docs/dev/reports/playwright_v8_coverage_report.txt` was still generated by the targeted MIDI Studio V2 Playwright run.
+- Coverage is advisory for this CSS/test-only PR.
+
+## Samples
+
+Full samples smoke test: SKIP.
+
+Reason: PR scope is limited to MIDI Studio V2 piano-key styling and targeted Playwright coverage; sample JSON alignment and full samples smoke are explicitly out of scope.
+
+## Manual UAT
+
+1. Open MIDI Studio V2 and import the UAT manifest.
+2. Confirm the Studio tab Octave Timeline keyboard column has full-width white keys and right-aligned inset black keys.
+3. Confirm the area left of each black key looks like the white-key bed.
+4. Scroll horizontally and vertically, edit a few notes, then confirm Play and Stop still work.

tests/playwright/tools/MidiStudioV2.spec.mjs

@@ -1041,20 +1041,27 @@ test.describe("MIDI Studio V2", () => {
         const blackLabelRect = blackLabel.getBoundingClientRect();
         const whiteCellRect = whiteCell.getBoundingClientRect();
         const blackCellRect = blackCell.getBoundingClientRect();
+        const labelWidth = firstLabel.getBoundingClientRect().width;
+        const blackKeyRight = Number.parseFloat(blackKeyStyle.right);
+        const blackKeyWidth = Number.parseFloat(blackKeyStyle.width);
         return {
           alternatingRowsDiffer: getComputedStyle(firstRow).backgroundColor !== getComputedStyle(secondRow).backgroundColor,
+          blackBedBackground: blackLabelStyle.backgroundImage || blackLabelStyle.backgroundColor,
           blackBackground: blackKeyStyle.backgroundImage || blackKeyStyle.backgroundColor,
           blackClass: blackLabel.className,
           blackColor: blackLabelStyle.color,
           blackJustifyItems: blackLabelStyle.justifyItems,
-          blackKeyLeft: Number.parseFloat(blackKeyStyle.left),
+          blackKeyInsetLeft: labelWidth - blackKeyWidth - blackKeyRight,
+          blackKeyRight,
           blackKeyTop: Number.parseFloat(blackKeyStyle.top),
-          blackKeyWidth: Number.parseFloat(blackKeyStyle.width),
+          blackKeyWidth,
           blackKind: blackLabel.dataset.keyKind,
           blackLabelHeight: blackLabelRect.height,
+          blackLabelRight: blackLabelRect.right,
           blackLabelText: blackLabel.textContent,
           blackTextColor: blackTextStyle.color,
           blackTextLeft: blackText.getBoundingClientRect().left,
+          blackTextRight: blackText.getBoundingClientRect().right,
           blackTextVisible: blackText.getBoundingClientRect().width > 0,
           blackTextAlign: blackLabelStyle.textAlign,
           borderRightWidth: getComputedStyle(firstNote).borderRightWidth,
@@ -1091,7 +1098,7 @@ test.describe("MIDI Studio V2", () => {
           whiteRowHeightDelta: Math.abs(whiteLabelRect.height - whiteCellRect.height),
           blackRowDelta: Math.abs(blackLabelRect.top - blackCellRect.top),
           blackRowHeightDelta: Math.abs(blackLabelRect.height - blackCellRect.height),
-          labelWidth: firstLabel.getBoundingClientRect().width,
+          labelWidth,
           topScrollbarHeight: topScrollbar.getBoundingClientRect().height
         };
       });
@@ -1115,6 +1122,7 @@ test.describe("MIDI Studio V2", () => {
       expect(gridLayout.whiteLabelText).toBe("C5");
       expect(gridLayout.blackLabelText).toBe("C#5");
       expect(gridLayout.whiteBackground).not.toBe(gridLayout.blackBackground);
+      expect(gridLayout.blackBedBackground).toBe(gridLayout.whiteBackground);
       expect(gridLayout.whiteColor).not.toBe(gridLayout.blackColor);
       expect(gridLayout.whiteTextVisible).toBe(true);
       expect(gridLayout.blackTextVisible).toBe(true);
@@ -1133,11 +1141,13 @@ test.describe("MIDI Studio V2", () => {
       expect(gridLayout.whiteKeyLeft).toBe(0);
       expect(gridLayout.whiteKeyTop).toBe(0);
       expect(Math.abs(gridLayout.whiteKeyWidth - gridLayout.labelWidth)).toBeLessThanOrEqual(1);
-      expect(gridLayout.blackKeyLeft).toBeGreaterThan(0);
+      expect(gridLayout.blackKeyRight).toBe(0);
+      expect(gridLayout.blackKeyInsetLeft).toBeGreaterThan(0);
       expect(gridLayout.blackKeyTop).toBeLessThan(0);
       expect(gridLayout.blackKeyWidth).toBeLessThan(gridLayout.whiteKeyWidth);
       expect(gridLayout.whiteTextLeft).toBeGreaterThanOrEqual(gridLayout.whiteKeyLeft);
-      expect(gridLayout.blackTextLeft).toBeGreaterThan(gridLayout.blackKeyLeft);
+      expect(gridLayout.blackTextLeft).toBeGreaterThan(gridLayout.blackKeyInsetLeft);
+      expect(gridLayout.blackTextRight).toBeLessThanOrEqual(gridLayout.blackLabelRight);
       expect(gridLayout.whiteRowDelta).toBeLessThanOrEqual(1);
       expect(gridLayout.blackRowDelta).toBeLessThanOrEqual(1);
       expect(gridLayout.whiteRowHeightDelta).toBeLessThanOrEqual(1);

tools/midi-studio-v2/styles/midiStudioV2.css

@@ -795,26 +795,29 @@ body[data-tool-id="midi-studio-v2"] #instrumentGridContent {
 }
 
 .midi-studio-v2__octave-row-label--black-key {
-  background: #f8fafc;
+  background: linear-gradient(90deg, #ffffff 0%, #f8fafc 78%, #dbeafe 100%);
   border-right-color: #020617;
   color: #f8fafc;
   justify-items: start;
   z-index: 6;
 }
 
 .midi-studio-v2__octave-row-label--black-key .midi-studio-v2__octave-row-label-text {
-  padding-left: 0.95rem;
+  box-sizing: border-box;
+  justify-self: end;
+  padding-left: 0.4rem;
   text-shadow: 0 1px 1px rgba(2, 6, 23, 0.9);
+  width: 64%;
 }
 
 .midi-studio-v2__octave-row-label--black-key::before {
   background: linear-gradient(90deg, #020617 0%, #020617 68%, #1e293b 100%);
   border: 1px solid #020617;
-  border-left: 0;
-  border-radius: 0 4px 4px 0;
+  border-radius: 4px 0 0 4px;
   box-shadow: 0 2px 4px rgba(2, 6, 23, 0.38), inset -1.15rem 0 0 rgba(2, 6, 23, 0.96), inset 0 -1px 0 rgba(248, 250, 252, 0.18);
   bottom: -12%;
-  left: 0.58rem;
+  left: auto;
+  right: 0;
   top: -12%;
   width: 64%;
 }