Add visible Audio SFX style ranges and slider hints - PR_26145_010-audio-sfx-visible-style-ranges-and-slider-hints

Author: ToolboxAid

docs/dev/reports/playwright_audio_sfx_visible_style_ranges.md

@@ -0,0 +1,77 @@
+# PR_26145_010 Audio SFX Visible Style Ranges
+
+## Scope
+
+- Updated `tools/audio-sfx-playground-v2` only.
+- Made Sound Style clamp ranges visible in each slider value output.
+- Added help text clarifying that Sound Style changes recommended operating ranges and clamps current values, while waveform options remain selectable.
+- Preserved external CSS/JS only; no inline event handlers or style/script blocks were added.
+
+## Targeted Static Validation
+
+PASS:
+
+- `Get-ChildItem -Recurse -File tools/audio-sfx-playground-v2/js -Filter *.js | ForEach-Object { node --check $_.FullName }`
+- HTML/CSS guard:
+  - no `<style>` blocks in `tools/audio-sfx-playground-v2/index.html`
+  - no inline `<script>` blocks
+  - no inline event handlers
+  - Sound Style tooltip includes range and waveform guidance
+  - Wave tooltip confirms every waveform remains selectable
+  - density CSS reserves the compact slider/range output layout
+- `git diff --check -- tools/audio-sfx-playground-v2`
+  - PASS with Git LF/CRLF warnings only for `index.html` and `audioSfxLayoutDensity.css`.
+
+## Focused Playwright Validation
+
+PASS using a local repo HTTP server and Chromium:
+
+- Audio / SFX Playground V2 launched at `/tools/audio-sfx-playground-v2/index.html`.
+- No console errors and no page errors on launch or during style/slider interactions.
+- Initial range labels rendered:
+  - Frequency: `880 Hz [20-20000 Hz]`
+  - Sweep: `700 cents [-1200-1200 cents]`
+- Selecting Atari-style updated visible and DOM slider ranges:
+  - Frequency range label: `[40-4000 Hz]`
+  - Frequency min/max attributes: `40` / `4000`
+  - Sweep range label: `[-1200-1200 cents]`
+  - Brightness range label: `[400-7000 Hz]`
+- Switching from Pure Tone after setting Frequency to `20000 Hz` visibly changed the value after selecting Atari-style:
+  - Before: `20000 Hz [20-20000 Hz]`
+  - After: `520 Hz [40-4000 Hz]`
+- Selecting TTL Arcade updated Frequency to `1180 Hz [80-2500 Hz]`.
+- All waveform options remained enabled, including `noise`.
+- Slider focus retention passed:
+  - Clicking `#durationInput` left focus on `durationInput`.
+  - `ArrowRight` changed duration from `380` to `385`, preserving the 5 ms step.
+- All 9 density slider rows kept label, slider, and value output on one aligned row without overlap.
+
+V8 coverage entry captured:
+
+- `tools/audio-sfx-playground-v2/js/controls/SfxControlPanel.js`
+
+## Workspace V2 Validation
+
+Command:
+
+```powershell
+$env:PLAYWRIGHT_BROWSERS_PATH='.ms-playwright'; npm.cmd run test:workspace-v2
+```
+
+Result:
+
+- 69 passed
+- 3 failed
+
+Failures observed outside Audio / SFX Playground V2 scope:
+
+- `Workspace Manager V2 bootstrap > shows Object Vector Studio V2 layout shell and schema-only palette gate`
+  - Expected status log to contain `OK Applied transparent fill to shape row 1 by right-click.`
+- `Workspace Manager V2 bootstrap > compacts Object Vector Studio V2 geometry layouts and selected palette state`
+  - Expected selected palette outline width `>= 3`; received `2.8`.
+- `Workspace Manager V2 bootstrap > owns temporary UAT manifest seeding and launches Asset Manager V2 through session context`
+  - Timed out at 120000 ms, then coverage stop reported the target page/context/browser had closed.
+
+## Full Samples Smoke
+
+Skipped per BUILD request because this PR only impacts Audio / SFX Playground V2 UI behavior.

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

@@ -68,7 +68,7 @@ <h2 class="tools-platform-frame__eyebrow">First-Class Tools Surface V2</h2>
               <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>
+              <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">
                 <option value="custom">Custom</option>
                 <option value="pure-tone">Pure Tone</option>
@@ -84,7 +84,7 @@ <h2 class="tools-platform-frame__eyebrow">First-Class Tools Surface V2</h2>
               </select>
             </label>
             <label class="tool-starter__field" for="waveformSelect">
-              <span class="audio-sfx__label-tip" tabindex="0" data-tooltip="Chooses the oscillator shape or noise source that defines the sound character.">Wave</span>
+              <span class="audio-sfx__label-tip" tabindex="0" data-tooltip="Chooses the oscillator shape or noise source; every waveform remains selectable for every Sound Style.">Wave</span>
               <select id="waveformSelect">
                 <option value="sine">Sine</option>
                 <option value="square">Square</option>

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

@@ -22,6 +22,18 @@ const SLIDER_INPUTS = Object.freeze([
   Object.freeze({ soundKey: "volume", inputProperty: "volumeInput" })
 ]);
 
+const SLIDER_RANGE_UNITS = Object.freeze({
+  attackMs: "ms",
+  durationMs: "ms",
+  frequencyHz: "Hz",
+  noiseAmount: "",
+  noiseDecayMs: "ms",
+  noiseFilterHz: "Hz",
+  pitchSweepCents: "cents",
+  releaseMs: "ms",
+  volume: ""
+});
+
 const STYLE_CLAMPS = Object.freeze({
   "pure-tone": Object.freeze({
     attackMs: Object.freeze({ min: 0, max: 120 }),
@@ -273,6 +285,13 @@ function readRange(input, limits) {
   return { ok: true, value };
 }
 
+function formatRangeNumber(soundKey, value) {
+  if (soundKey === "noiseAmount" || soundKey === "volume") {
+    return value.toFixed(2);
+  }
+  return String(Math.round(value));
+}
+
 export class SfxControlPanel {
   constructor({
     addButton,
@@ -464,15 +483,26 @@ export class SfxControlPanel {
   }
 
   syncOutputs() {
-    this.attackValue.textContent = `${Math.round(toNumber(this.attackInput))} ms`;
-    this.durationValue.textContent = `${Math.round(toNumber(this.durationInput))} ms`;
-    this.frequencyValue.textContent = `${Math.round(toNumber(this.frequencyInput))} Hz`;
-    this.noiseAmountValue.textContent = toNumber(this.noiseAmountInput).toFixed(2);
-    this.noiseDecayValue.textContent = `${Math.round(toNumber(this.noiseDecayInput))} ms`;
-    this.noiseFilterValue.textContent = `${Math.round(toNumber(this.noiseFilterInput))} Hz`;
-    this.pitchSweepValue.textContent = `${Math.round(toNumber(this.pitchSweepInput))} cents`;
-    this.releaseValue.textContent = `${Math.round(toNumber(this.releaseInput))} ms`;
-    this.volumeValue.textContent = toNumber(this.volumeInput).toFixed(2);
+    this.attackValue.textContent = this.valueWithRange("attackMs", `${Math.round(toNumber(this.attackInput))} ms`);
+    this.durationValue.textContent = this.valueWithRange("durationMs", `${Math.round(toNumber(this.durationInput))} ms`);
+    this.frequencyValue.textContent = this.valueWithRange("frequencyHz", `${Math.round(toNumber(this.frequencyInput))} Hz`);
+    this.noiseAmountValue.textContent = this.valueWithRange("noiseAmount", toNumber(this.noiseAmountInput).toFixed(2));
+    this.noiseDecayValue.textContent = this.valueWithRange("noiseDecayMs", `${Math.round(toNumber(this.noiseDecayInput))} ms`);
+    this.noiseFilterValue.textContent = this.valueWithRange("noiseFilterHz", `${Math.round(toNumber(this.noiseFilterInput))} Hz`);
+    this.pitchSweepValue.textContent = this.valueWithRange("pitchSweepCents", `${Math.round(toNumber(this.pitchSweepInput))} cents`);
+    this.releaseValue.textContent = this.valueWithRange("releaseMs", `${Math.round(toNumber(this.releaseInput))} ms`);
+    this.volumeValue.textContent = this.valueWithRange("volume", toNumber(this.volumeInput).toFixed(2));
+  }
+
+  valueWithRange(soundKey, valueText) {
+    return `${valueText} [${this.rangeText(soundKey)}]`;
+  }
+
+  rangeText(soundKey) {
+    const limits = this.activeSliderLimits[soundKey];
+    const unit = SLIDER_RANGE_UNITS[soundKey];
+    const range = `${formatRangeNumber(soundKey, limits.min)}-${formatRangeNumber(soundKey, limits.max)}`;
+    return unit ? `${range} ${unit}` : range;
   }
 
   validate() {

tools/audio-sfx-playground-v2/styles/audioSfxLayoutDensity.css

@@ -36,7 +36,7 @@ body[data-tool-id="audio-sfx-playground-v2"] #sfxShapeContent .tool-starter__fie
 body[data-tool-id="audio-sfx-playground-v2"] #sfxShapeContent .tool-starter__field[data-density-control] {
   align-items: center;
   column-gap: 8px;
-  grid-template-columns: 74px minmax(0, 1fr) minmax(64px, max-content);
+  grid-template-columns: 74px minmax(48px, 1fr) minmax(118px, max-content);
   min-height: 28px;
 }
 
@@ -52,7 +52,9 @@ body[data-tool-id="audio-sfx-playground-v2"] #sfxShapeContent .tool-starter__fie
 }
 
 body[data-tool-id="audio-sfx-playground-v2"] #sfxShapeContent .tool-starter__field[data-density-control] output {
-  min-width: 64px;
+  color: var(--tool-starter-muted);
+  font-size: 0.78rem;
+  min-width: 118px;
   justify-self: end;
   text-align: right;
   white-space: nowrap;