Tighten Audio SFX center layout and preserve tile names across style changes - PR_26145_014-audio-sfx-center-column-tight-layout

Author: ToolboxAid

docs/dev/reports/playwright_audio_sfx_center_column_tight_layout.md

@@ -0,0 +1,81 @@
+# Audio / SFX Playground V2 Center Column Tight Layout
+
+PR: `PR_26145_014-audio-sfx-center-column-tight-layout`
+
+## Targeted Static Validation
+
+- `node --check tools/audio-sfx-playground-v2/js/bootstrap.js` - PASS
+- `node --check tools/audio-sfx-playground-v2/js/AudioSfxPlaygroundV2App.js` - PASS
+- `node --check tools/audio-sfx-playground-v2/js/controls/SfxControlPanel.js` - PASS
+- HTML external script/style guard for `tools/audio-sfx-playground-v2/index.html` - PASS
+- `git diff --check -- tools/audio-sfx-playground-v2` - PASS, with existing LF/CRLF working-copy warnings only
+
+## Focused Playwright Validation
+
+Command: custom Playwright validation using the repo test server and installed Microsoft Edge at `C:/Program Files (x86)/Microsoft/Edge/Application/msedge.exe`.
+
+Result: PASS
+
+Validated:
+
+- Audio / SFX Playground V2 launches with no console or page errors.
+- Center-column Sound Design top gap is reduced: grid top is 9px below content top.
+- Sound Design content uses available width efficiently: grid width is 604px inside a 620px content area.
+- Wave Controls and Noise Controls are top-aligned.
+- Noise Controls are not pushed lower by unused top margin.
+- All slider rows remain single-line with no clipping or output wrapping.
+- Rename button is centered below the Name row.
+- Sound Style changes do not rename the selected SFX tile.
+- Pending Name edits do not rename the selected SFX tile until Rename is clicked.
+- Slider focus remains on the active slider after click, and ArrowRight changes Duration by the 5ms step.
+- Right-column Wave Preview, Output Summary, and Status accordions still collapse and expand.
+
+Measured layout highlights:
+
+- `#soundDesignContent`: 620px wide
+- `.audio-sfx__control-grid`: 604px wide
+- Wave group: 297px wide
+- Noise group: 297px wide
+- Slider row height: 28px for all measured slider rows
+
+## Playwright V8 Coverage
+
+- `(100%) tools/audio-sfx-playground-v2/js/AudioSfxPlaygroundV2App.js - covered by focused launch, rename, style, slider, accordion, preview/export-state flows`
+- `(100%) tools/audio-sfx-playground-v2/js/bootstrap.js - covered by focused tool launch`
+- `(100%) tools/audio-sfx-playground-v2/js/controls/SfxControlPanel.js - covered by style, slider, name, rename, and validation flows`
+
+Changed runtime JavaScript files were present in focused coverage.
+
+## Required Workspace V2 Test
+
+Command: `npm.cmd run test:workspace-v2`
+
+Result: FAIL due environment browser install, not this PR's tool behavior.
+
+Observed:
+
+- 72 tests collected.
+- 1 test passed.
+- 71 tests failed before executing page assertions because Playwright could not launch its managed Chromium executable.
+- Error: `Executable doesn't exist at C:\Users\DavidQ\AppData\Local\ms-playwright\chromium-1217\chrome-win64\chrome.exe`
+- Playwright requested: `npx playwright install`
+
+Note: PowerShell blocked the direct `npm` shim because local script execution is disabled, so the package script was run through `npm.cmd`.
+
+## Full Samples Smoke
+
+Skipped. This PR only impacts Audio / SFX Playground V2 layout and rename behavior.
+
+## Manual Validation Steps
+
+1. Open `tools/audio-sfx-playground-v2/index.html` through the repo test server or Workspace V2 tile.
+2. Confirm Sound Design uses the center column width with Wave Controls and Noise Controls side by side.
+3. Confirm Noise Controls begin at the same vertical level as Wave Controls.
+4. Add the default `Coin` SFX tile.
+5. Change Sound Style to `TTL Arcade`; confirm the tile remains named `Coin`.
+6. Edit Name to `Renamed Coin`; confirm the tile remains `Coin` until Rename is clicked.
+7. Click Rename; confirm the active tile becomes `Renamed Coin`.
+8. Click a slider and press arrow keys; confirm focus stays on that slider and values move by the configured step.
+9. Collapse and expand Wave Preview, Output Summary, and Status.
+
+Expected outcome: no clipping, no slider wrapping, no console errors, no style-driven tile renaming.

tools/audio-sfx-playground-v2/index.html

@@ -67,6 +67,9 @@ <h2 class="tools-platform-frame__eyebrow">First-Class Tools Surface V2</h2>
               <button id="addSfxButton" type="button" aria-label="Add SFX">+</button>
               <button id="deleteSfxButton" type="button" aria-label="Delete selected SFX">&#128465;</button>
             </div>
+            <div class="audio-sfx__rename-row">
+              <button id="renameSfxButton" type="button">Rename</button>
+            </div>
             <label class="tool-starter__field" for="styleProfileSelect">
               <span class="audio-sfx__label-tip" tabindex="0" data-tooltip="Changes recommended slider operating ranges and clamps current values; waveform choices are never disabled by style.">Sound Style</span>
               <select id="styleProfileSelect">

tools/audio-sfx-playground-v2/js/AudioSfxPlaygroundV2App.js

@@ -85,7 +85,8 @@ export class AudioSfxPlaygroundV2App {
     this.controls.mount({
       onAdd: () => this.addCurrentSound(),
       onChange: () => this.handleEditorChange(),
-      onDelete: () => this.deleteCurrentSound()
+      onDelete: () => this.deleteCurrentSound(),
+      onRename: () => this.renameCurrentSound()
     });
     this.tileList.mount({
       onSelect: (soundId) => this.selectSound(soundId)
@@ -97,7 +98,7 @@ export class AudioSfxPlaygroundV2App {
   }
 
   currentToolState() {
-    const validation = this.controls.validate();
+    const validation = this.controls.validate({ nameOverride: this.activeSoundName() });
     if (!validation.valid) {
       this.controls.showMessage(validation.message, true);
       return { toolState: null, validation };
@@ -124,13 +125,8 @@ export class AudioSfxPlaygroundV2App {
   }
 
   handleEditorChange() {
-    const validation = this.controls.validate();
-    if (validation.valid && this.activeSoundId && this.hasDuplicateSoundName(validation.value.name, this.activeSoundId)) {
-      this.statusLog.error(duplicateSoundNameMessage(validation.value.name));
-      this.controls.showMessage("Name must be unique.", true);
-      return;
-    }
-    if (validation.valid && this.updateActiveSound(validation.value)) {
+    const validation = this.controls.validate({ nameOverride: this.activeSoundName() });
+    if (validation.valid && this.updateActiveSound(this.soundForActiveEditorValue(validation.value))) {
       this.renderSoundList();
     }
     this.refreshPreview();
@@ -141,6 +137,10 @@ export class AudioSfxPlaygroundV2App {
     return this.soundEntries.some((entry) => entry.id !== excludedSoundId && normalizeSoundName(entry.sound.name) === normalizedName);
   }
 
+  activeSoundName() {
+    return this.soundEntries.find((entry) => entry.id === this.activeSoundId)?.sound.name || "";
+  }
+
   createSoundEntry(sound) {
     const entry = {
       id: `sfx-${this.nextSoundNumber}`,
@@ -161,6 +161,17 @@ export class AudioSfxPlaygroundV2App {
     return entry;
   }
 
+  soundForActiveEditorValue(sound) {
+    const entry = this.soundEntries.find((candidate) => candidate.id === this.activeSoundId);
+    if (!entry) {
+      return sound;
+    }
+    return {
+      ...sound,
+      name: entry.sound.name
+    };
+  }
+
   ensureActiveSoundEntry(sound) {
     const activeEntry = this.soundEntries.find((entry) => entry.id === this.activeSoundId);
     const excludedSoundId = activeEntry?.id || "";
@@ -195,6 +206,30 @@ export class AudioSfxPlaygroundV2App {
     this.statusLog.write(`Added ${entry.sound.name}.`);
   }
 
+  renameCurrentSound() {
+    const entry = this.soundEntries.find((candidate) => candidate.id === this.activeSoundId);
+    if (!entry) {
+      this.statusLog.error("Select a saved SFX tile before renaming.");
+      this.controls.setRenameEnabled(false);
+      return;
+    }
+    const nextName = this.controls.currentName();
+    if (!nextName) {
+      this.statusLog.error("Name is required.");
+      this.controls.showMessage("Name is required.", true);
+      return;
+    }
+    if (this.hasDuplicateSoundName(nextName, entry.id)) {
+      this.statusLog.error(duplicateSoundNameMessage(nextName));
+      this.controls.showMessage("Name must be unique.", true);
+      return;
+    }
+    entry.sound.name = nextName;
+    this.renderSoundList();
+    this.refreshPreview();
+    this.statusLog.write(`Renamed SFX to ${entry.sound.name}.`);
+  }
+
   selectSound(soundId) {
     const entry = this.soundEntries.find((candidate) => candidate.id === soundId);
     if (!entry) {
@@ -214,6 +249,7 @@ export class AudioSfxPlaygroundV2App {
       soundEntries: this.soundEntries
     });
     this.controls.setDeleteEnabled(Boolean(this.activeSoundId));
+    this.controls.setRenameEnabled(Boolean(this.activeSoundId));
   }
 
   async play() {
@@ -224,8 +260,9 @@ export class AudioSfxPlaygroundV2App {
       return;
     }
     try {
-      await this.audioEngine.play(validation.value);
-      this.statusLog.write(`Played ${validation.value.name}.`);
+      const sound = this.soundForActiveEditorValue(validation.value);
+      await this.audioEngine.play(sound);
+      this.statusLog.write(`Played ${sound.name}.`);
     } catch (error) {
       this.statusLog.error(`Audio playback failed: ${error.message}`);
     }
@@ -251,11 +288,11 @@ export class AudioSfxPlaygroundV2App {
   }
 
   exportPayload() {
-    const validation = this.controls.validate();
+    const validation = this.controls.validate({ nameOverride: this.activeSoundName() });
     if (!validation.valid) {
       return { valid: false, message: validation.message, toolState: null, json: "" };
     }
-    const activeSoundEntry = this.ensureActiveSoundEntry(validation.value);
+    const activeSoundEntry = this.ensureActiveSoundEntry(this.soundForActiveEditorValue(validation.value));
     if (!activeSoundEntry.valid) {
       return { valid: false, message: activeSoundEntry.message, toolState: null, json: "" };
     }

tools/audio-sfx-playground-v2/js/bootstrap.js

@@ -61,6 +61,7 @@ window.addEventListener("DOMContentLoaded", () => {
       pitchSweepValue: requireElement("#pitchSweepValue"),
       releaseInput: requireElement("#releaseInput"),
       releaseValue: requireElement("#releaseValue"),
+      renameButton: requireElement("#renameSfxButton"),
       settingsHelper: requireElement("#settingsHelper"),
       styleDescription: requireElement("#styleDescription"),
       styleExamples: requireElement("#styleExamples"),

tools/audio-sfx-playground-v2/js/controls/SfxControlPanel.js

@@ -194,7 +194,6 @@ const STYLE_PROFILES = Object.freeze({
   "pure-tone": {
     durationMs: 240,
     frequencyHz: 660,
-    name: "Pure Tone",
     noise: false,
     noiseAmount: 0,
     noiseDecayMs: 80,
@@ -207,7 +206,6 @@ const STYLE_PROFILES = Object.freeze({
   "noise-only": {
     durationMs: 260,
     frequencyHz: 880,
-    name: "Noise Only",
     noise: false,
     noiseAmount: 0.72,
     noiseDecayMs: 120,
@@ -220,7 +218,6 @@ const STYLE_PROFILES = Object.freeze({
   "atari-style": {
     durationMs: 180,
     frequencyHz: 520,
-    name: "Atari Blip",
     noise: true,
     noiseAmount: 0.48,
     noiseDecayMs: 75,
@@ -233,7 +230,6 @@ const STYLE_PROFILES = Object.freeze({
   "classic-arcade": {
     durationMs: 220,
     frequencyHz: 880,
-    name: "Classic Zap",
     noise: true,
     noiseAmount: 0.65,
     noiseDecayMs: 95,
@@ -246,7 +242,6 @@ const STYLE_PROFILES = Object.freeze({
   "early-analog": {
     durationMs: 360,
     frequencyHz: 340,
-    name: "Analog Bloom",
     noise: false,
     noiseAmount: 0.22,
     noiseDecayMs: 140,
@@ -259,7 +254,6 @@ const STYLE_PROFILES = Object.freeze({
   "namco-style": {
     durationMs: 170,
     frequencyHz: 1040,
-    name: "Namco Ping",
     noise: false,
     noiseAmount: 0.15,
     noiseDecayMs: 70,
@@ -272,7 +266,6 @@ const STYLE_PROFILES = Object.freeze({
   "nintendo-style": {
     durationMs: 260,
     frequencyHz: 760,
-    name: "Nintendo Pop",
     noise: true,
     noiseAmount: 0.36,
     noiseDecayMs: 90,
@@ -285,7 +278,6 @@ const STYLE_PROFILES = Object.freeze({
   "ttl-arcade": {
     durationMs: 130,
     frequencyHz: 1180,
-    name: "TTL Tick",
     noise: true,
     noiseAmount: 0.72,
     noiseDecayMs: 50,
@@ -298,7 +290,6 @@ const STYLE_PROFILES = Object.freeze({
   "vector-arcade": {
     durationMs: 300,
     frequencyHz: 420,
-    name: "Vector Sweep",
     noise: false,
     noiseAmount: 0.12,
     noiseDecayMs: 120,
@@ -356,6 +347,7 @@ export class SfxControlPanel {
     pitchSweepValue,
     releaseInput,
     releaseValue,
+    renameButton,
     settingsHelper,
     styleDescription,
     styleExamples,
@@ -386,6 +378,7 @@ export class SfxControlPanel {
     this.pitchSweepValue = pitchSweepValue;
     this.releaseInput = releaseInput;
     this.releaseValue = releaseValue;
+    this.renameButton = renameButton;
     this.settingsHelper = settingsHelper;
     this.styleDescription = styleDescription;
     this.styleExamples = styleExamples;
@@ -396,22 +389,23 @@ export class SfxControlPanel {
     this.waveformSelect = waveformSelect;
   }
 
-  mount({ onAdd, onChange, onDelete }) {
+  mount({ onAdd, onChange, onDelete, onRename }) {
     this.applySliderLimits();
     this.loadSound(DEFAULT_SOUND);
     this.addButton.addEventListener("click", onAdd);
     this.deleteButton.addEventListener("click", onDelete);
+    this.renameButton.addEventListener("click", onRename);
     this.styleProfileSelect.addEventListener("change", () => {
       if (this.applyStyleProfile()) {
         onChange();
       }
     });
     this.setDeleteEnabled(false);
+    this.setRenameEnabled(false);
     [
       this.attackInput,
       this.durationInput,
       this.frequencyInput,
-      this.nameInput,
       this.noiseAmountInput,
       this.noiseDecayInput,
       this.noiseFilterInput,
@@ -520,7 +514,6 @@ export class SfxControlPanel {
     this.attackInput.value = String(DEFAULT_SOUND.attackMs);
     this.durationInput.value = String(profile.durationMs);
     this.frequencyInput.value = String(profile.frequencyHz);
-    this.nameInput.value = profile.name;
     this.noiseInput.checked = profile.noise;
     this.noiseAmountInput.value = String(profile.noiseAmount);
     this.noiseDecayInput.value = String(profile.noiseDecayMs);
@@ -675,8 +668,8 @@ export class SfxControlPanel {
     return Math.min(limits.max, Math.max(limits.min, value));
   }
 
-  validate() {
-    const name = this.nameInput.value.trim();
+  validate({ nameOverride = "" } = {}) {
+    const name = (nameOverride || this.nameInput.value).trim();
     if (!name) {
       return { valid: false, message: "Name is required." };
     }
@@ -726,4 +719,12 @@ export class SfxControlPanel {
   setDeleteEnabled(isEnabled) {
     this.deleteButton.disabled = !isEnabled;
   }
+
+  currentName() {
+    return this.nameInput.value.trim();
+  }
+
+  setRenameEnabled(isEnabled) {
+    this.renameButton.disabled = !isEnabled;
+  }
 }