Reorder Audio SFX sound styles and add non selectable divider - PR_26145_005-audio-sfx-style-order-and-divider

ToolboxAid · ToolboxAid · commit f938fe13147c · 2026-05-25T11:53:45.000-04:00
diff --git a/docs/dev/reports/playwright_audio_sfx_style_order.md b/docs/dev/reports/playwright_audio_sfx_style_order.md
@@ -0,0 +1,84 @@
+# Audio / SFX Playground V2 Style Order Validation
+
+PR: `PR_26145_005-audio-sfx-style-order-and-divider`
+
+## Scope
+
+- Updated `tools/audio-sfx-playground-v2` Sound Style ordering.
+- Added a disabled visual divider entry after `Pure Tone`.
+- Added style profile application without persisting the selected style name into exported toolState JSON.
+- Left schema files, `start_of_day`, and unrelated tools untouched.
+
+## Targeted Static Validation
+
+- `node --check` over `tools/audio-sfx-playground-v2/js/**/*.js`: PASS
+- HTML/CSS static guard for changed tool files:
+  - no inline event handlers: PASS
+  - no `<style>` blocks: PASS
+  - no inline `<script>` blocks: PASS
+  - no empty changed HTML/CSS/JS files: PASS
+- `git diff --check -- tools/audio-sfx-playground-v2`: PASS
+  - Git reported LF-to-CRLF working-copy warnings only.
+
+## Targeted Style Validation
+
+Validated with an ESM Node harness against the changed tool files:
+
+- Sound Style select exists: PASS
+- Order is:
+  - `Custom`
+  - `Pure Tone`
+  - disabled divider
+  - `Atari-style`
+  - `Classic Arcade`
+  - `Early Analog`
+  - `Namco-style`
+  - `Nintendo-style`
+  - `TTL Arcade`
+  - `Vector Arcade`
+- Divider value is disabled and visual-only: PASS
+- Selecting `Classic Arcade` updates editor defaults/ranges behavior through the profile handler: PASS
+- Programmatic divider selection is rejected and resets to `Custom`: PASS
+- Validated sound payload does not include `style`, `styleProfile`, or divider data: PASS
+
+## Playwright Impacted Validation
+
+Ran a focused Playwright check against `tools/audio-sfx-playground-v2/index.html` through a temporary local HTTP server using local browser binaries from `.ms-playwright`.
+
+- Tool launches successfully: PASS
+- No console errors on launch or style selection: PASS
+- Sound Style order matches the requested order: PASS
+- Divider is visible but disabled/not selectable by user interaction: PASS
+- Style selection updates defaults:
+  - `Classic Arcade` set name to `Classic Zap`: PASS
+  - `Classic Arcade` set waveform to `square`: PASS
+- Copy JSON after style selection omits style metadata and persists only sound payload data: PASS
+- Programmatic divider selection does not persist and resets to `Custom`: PASS
+
+## Workspace V2
+
+Command:
+
+```powershell
+$env:PLAYWRIGHT_BROWSERS_PATH='.ms-playwright'; npm.cmd run test:workspace-v2
+```
+
+Result: TIMEOUT after 900 seconds.
+
+Observed progress before timeout:
+
+- 72 tests discovered.
+- Tests 1-70 began running.
+- 67 observed as passed.
+- 3 observed as failed before timeout:
+  - Input Mapping V2 mouse drag visual capture state test.
+  - Object Vector Studio V2 layout shell/schema-only palette gate test.
+  - Object Vector Studio V2 compact geometry layout/selected palette state test.
+- The timeout occurred before the final two tests reported.
+
+The observed failures are outside the Audio / SFX Playground V2 scope.
+
+## Notes
+
+- Full samples smoke test skipped per request.
+- V8 coverage was not used for this focused validation.
diff --git a/tools/audio-sfx-playground-v2/index.html b/tools/audio-sfx-playground-v2/index.html
@@ -67,6 +67,21 @@ <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>
+            <label class="tool-starter__field" for="styleProfileSelect">
+              <span class="audio-sfx__label-tip" tabindex="0" data-tooltip="Applies a profile of default SFX ranges without saving the style name into toolState.">Sound Style</span>
+              <select id="styleProfileSelect">
+                <option value="custom">Custom</option>
+                <option value="pure-tone">Pure Tone</option>
+                <option value="divider" disabled>────────────</option>
+                <option value="atari-style">Atari-style</option>
+                <option value="classic-arcade">Classic Arcade</option>
+                <option value="early-analog">Early Analog</option>
+                <option value="namco-style">Namco-style</option>
+                <option value="nintendo-style">Nintendo-style</option>
+                <option value="ttl-arcade">TTL Arcade</option>
+                <option value="vector-arcade">Vector Arcade</option>
+              </select>
+            </label>
             <label class="tool-starter__field" for="waveformSelect">
               <span class="audio-sfx__label-tip" tabindex="0" data-tooltip="Chooses the oscillator shape that defines the sound character.">Wave</span>
               <select id="waveformSelect">
diff --git a/tools/audio-sfx-playground-v2/js/bootstrap.js b/tools/audio-sfx-playground-v2/js/bootstrap.js
@@ -61,6 +61,7 @@ window.addEventListener("DOMContentLoaded", () => {
       pitchSweepValue: requireElement("#pitchSweepValue"),
       releaseInput: requireElement("#releaseInput"),
       releaseValue: requireElement("#releaseValue"),
+      styleProfileSelect: requireElement("#styleProfileSelect"),
       validationMessage: requireElement("#sfxValidationMessage"),
       volumeInput: requireElement("#volumeInput"),
       volumeValue: requireElement("#volumeValue"),
diff --git a/tools/audio-sfx-playground-v2/js/controls/SfxControlPanel.js b/tools/audio-sfx-playground-v2/js/controls/SfxControlPanel.js
@@ -14,6 +14,112 @@ const DEFAULT_SOUND = Object.freeze({
 });
 
 const ALLOWED_WAVEFORMS = Object.freeze(new Set(["sine", "square", "triangle", "sawtooth"]));
+const STYLE_PROFILES = Object.freeze({
+  "pure-tone": {
+    durationMs: 240,
+    frequencyHz: 660,
+    name: "Pure Tone",
+    noise: false,
+    noiseAmount: 0,
+    noiseDecayMs: 80,
+    noiseFilterHz: 5200,
+    pitchSweepCents: 0,
+    releaseMs: 120,
+    volume: 0.38,
+    waveform: "sine"
+  },
+  "atari-style": {
+    durationMs: 180,
+    frequencyHz: 520,
+    name: "Atari Blip",
+    noise: true,
+    noiseAmount: 0.48,
+    noiseDecayMs: 75,
+    noiseFilterHz: 4200,
+    pitchSweepCents: -520,
+    releaseMs: 60,
+    volume: 0.5,
+    waveform: "square"
+  },
+  "classic-arcade": {
+    durationMs: 220,
+    frequencyHz: 880,
+    name: "Classic Zap",
+    noise: true,
+    noiseAmount: 0.65,
+    noiseDecayMs: 95,
+    noiseFilterHz: 5600,
+    pitchSweepCents: 700,
+    releaseMs: 85,
+    volume: 0.46,
+    waveform: "square"
+  },
+  "early-analog": {
+    durationMs: 360,
+    frequencyHz: 340,
+    name: "Analog Bloom",
+    noise: false,
+    noiseAmount: 0.22,
+    noiseDecayMs: 140,
+    noiseFilterHz: 3600,
+    pitchSweepCents: 240,
+    releaseMs: 180,
+    volume: 0.42,
+    waveform: "sawtooth"
+  },
+  "namco-style": {
+    durationMs: 170,
+    frequencyHz: 1040,
+    name: "Namco Ping",
+    noise: false,
+    noiseAmount: 0.15,
+    noiseDecayMs: 70,
+    noiseFilterHz: 6800,
+    pitchSweepCents: 420,
+    releaseMs: 70,
+    volume: 0.44,
+    waveform: "triangle"
+  },
+  "nintendo-style": {
+    durationMs: 260,
+    frequencyHz: 760,
+    name: "Nintendo Pop",
+    noise: true,
+    noiseAmount: 0.36,
+    noiseDecayMs: 90,
+    noiseFilterHz: 7600,
+    pitchSweepCents: 520,
+    releaseMs: 95,
+    volume: 0.4,
+    waveform: "square"
+  },
+  "ttl-arcade": {
+    durationMs: 130,
+    frequencyHz: 1180,
+    name: "TTL Tick",
+    noise: true,
+    noiseAmount: 0.72,
+    noiseDecayMs: 50,
+    noiseFilterHz: 8300,
+    pitchSweepCents: -260,
+    releaseMs: 45,
+    volume: 0.48,
+    waveform: "square"
+  },
+  "vector-arcade": {
+    durationMs: 300,
+    frequencyHz: 420,
+    name: "Vector Sweep",
+    noise: false,
+    noiseAmount: 0.12,
+    noiseDecayMs: 120,
+    noiseFilterHz: 4600,
+    pitchSweepCents: 900,
+    releaseMs: 130,
+    volume: 0.43,
+    waveform: "sawtooth"
+  }
+});
 
 function toNumber(input) {
   return Number.parseFloat(input.value);
@@ -51,6 +157,7 @@ export class SfxControlPanel {
     pitchSweepValue,
     releaseInput,
     releaseValue,
+    styleProfileSelect,
     validationMessage,
     volumeInput,
     volumeValue,
@@ -76,6 +183,7 @@ export class SfxControlPanel {
     this.pitchSweepValue = pitchSweepValue;
     this.releaseInput = releaseInput;
     this.releaseValue = releaseValue;
+    this.styleProfileSelect = styleProfileSelect;
     this.validationMessage = validationMessage;
     this.volumeInput = volumeInput;
     this.volumeValue = volumeValue;
@@ -86,6 +194,11 @@ export class SfxControlPanel {
     this.loadSound(DEFAULT_SOUND);
     this.addButton.addEventListener("click", onAdd);
     this.deleteButton.addEventListener("click", onDelete);
+    this.styleProfileSelect.addEventListener("change", () => {
+      if (this.applyStyleProfile()) {
+        onChange();
+      }
+    });
     this.setDeleteEnabled(false);
     [
       this.attackInput,
@@ -113,6 +226,7 @@ export class SfxControlPanel {
   }
 
   loadSound(sound) {
+    this.styleProfileSelect.value = "custom";
     this.attackInput.value = String(sound.attackMs);
     this.durationInput.value = String(sound.durationMs);
     this.frequencyInput.value = String(sound.frequencyHz);
@@ -128,6 +242,28 @@ export class SfxControlPanel {
     this.syncOutputs();
   }
 
+  applyStyleProfile() {
+    const profile = STYLE_PROFILES[this.styleProfileSelect.value];
+    if (!profile) {
+      this.styleProfileSelect.value = "custom";
+      return false;
+    }
+    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);
+    this.noiseFilterInput.value = String(profile.noiseFilterHz);
+    this.pitchSweepInput.value = String(profile.pitchSweepCents);
+    this.releaseInput.value = String(profile.releaseMs);
+    this.volumeInput.value = String(profile.volume);
+    this.waveformSelect.value = profile.waveform;
+    this.syncOutputs();
+    return true;
+  }
+
   syncOutputs() {
     this.attackValue.textContent = `${Math.round(toNumber(this.attackInput))} ms`;
     this.durationValue.textContent = `${Math.round(toNumber(this.durationInput))} ms`;
