Add slider value rule and update existing sliders - PR_26159_049-slider-value-visibility

Author: ToolboxAid

admin/controls.html

@@ -115,8 +115,8 @@ <h3>Numeric Inputs</h3>
                         <div class="control-demo">
                             <div class="control-row"><label for="number">Numeric Input - Number - textbox</label><input
                                     id="number" type="number" value="100" min="0" max="999"></div>
-                            <div class="control-row"><label for="range">Numeric Input - Range - slider</label><input
-                                    id="range" type="range" min="0" max="100" value="68"></div>
+                            <div class="control-row control-row--with-value"><label for="range">Numeric Input - Range - slider</label><input
+                                    id="range" type="range" min="0" max="100" value="68"><output class="slider-current-value" for="range" data-slider-value-for="range">68</output></div>
                         </div>
                     </article>
                     <article class="control-card side-green">

assets/theme-v2/css/forms.css

@@ -364,13 +364,31 @@ input[type="range"] {
   width: 100%
 }
 
-.palette-generator-slider-row {
+.slider-value-row {
   display: grid;
-  grid-template-columns: calc(var(--space-78) + var(--space-22)) minmax(var(--space-0), calc(var(--space-78) * 2));
+  grid-template-columns: minmax(calc(var(--space-78) + var(--space-22)), max-content) minmax(var(--space-0), calc(var(--space-78) * 2)) minmax(var(--space-44), max-content);
   align-items: center;
   gap: var(--space-12)
 }
 
+.control-row--with-value {
+  grid-template-columns: var(--control-row-columns) minmax(var(--space-44), max-content)
+}
+
+.slider-current-value {
+  justify-self: end;
+  min-width: var(--space-44);
+  color: var(--text);
+  font-weight: var(--font-weight-bold);
+  font-variant-numeric: tabular-nums;
+  text-align: right;
+  white-space: nowrap
+}
+
+.palette-generator-slider-row {
+  grid-template-columns: minmax(calc(var(--space-78) + var(--space-22)), max-content) minmax(var(--space-0), calc(var(--space-78) * 2)) minmax(var(--space-44), max-content)
+}
+
 textarea {
   min-height: var(--size-textarea-min);
   resize: vertical

assets/theme-v2/js/account-controls.js

@@ -1,22 +1,46 @@
 (function () {
     const selects = Array.from(document.querySelectorAll("[data-controls-theme-select]"));
     const preview = document.querySelector("[data-controls-preview]");
-    if (!selects.length || !preview) return;
 
-    const groups = Array.from(selects[0].options).map((option) => option.value);
+    if (selects.length && preview) {
+        const groups = Array.from(selects[0].options).map((option) => option.value);
+
+        function applyTheme(selectedValue) {
+            groups.forEach((group) => preview.classList.remove(group));
+            preview.classList.add(selectedValue);
+            selects.forEach((select) => {
+                select.value = selectedValue;
+            });
+        }
 
-    function applyTheme(selectedValue) {
-        groups.forEach((group) => preview.classList.remove(group));
-        preview.classList.add(selectedValue);
         selects.forEach((select) => {
-            select.value = selectedValue;
+            select.addEventListener("change", function () {
+                applyTheme(select.value);
+            });
         });
+        applyTheme(selects[0].value);
     }
 
-    selects.forEach((select) => {
-        select.addEventListener("change", function () {
-            applyTheme(select.value);
-        });
+    function sliderDisplayValue(slider, output) {
+        const unit = output.dataset.sliderUnit || "";
+        const prefix = output.dataset.sliderSigned === "true" && Number(slider.value) > 0 ? "+" : "";
+        return `${prefix}${slider.value}${unit}`;
+    }
+
+    document.querySelectorAll("[data-slider-value-for]").forEach((output) => {
+        const slider = document.getElementById(output.dataset.sliderValueFor);
+        if (!slider) {
+            return;
+        }
+
+        const updateOutput = function () {
+            const value = sliderDisplayValue(slider, output);
+            output.value = value;
+            output.textContent = value;
+        };
+
+        slider.addEventListener("input", updateOutput);
+        slider.addEventListener("change", updateOutput);
+        updateOutput();
     });
-    applyTheme(selects[0].value);
 }());

docs_build/dev/PROJECT_INSTRUCTIONS.md

@@ -101,6 +101,37 @@ Required report output:
 - Current branch
 - Branch validation PASS/FAIL
 
+## SLIDER VALUE VISIBILITY REQUIREMENT
+
+All user-adjustable slider controls must display their current value while being adjusted.
+
+Rules:
+- Value display must update live during drag/input.
+- Users must not need to release the slider to see the value.
+- Value display must remain visible at all times.
+- Value display must not rely solely on browser-native tooltips.
+- Sliders should prefer:
+  - Label + Slider + Current Value
+- Example:
+  - `Contrast    [------^------] 40%`
+  - `Saturation  [------^------] 75%`
+  - `Hue Shift   [------^------] +15°`
+- Units should be displayed when meaningful:
+  - `%`
+  - degrees
+  - pixels
+  - milliseconds
+  - volume
+  - opacity
+- Floating thumb tooltips are optional.
+- Persistent visible values are required.
+- Applies to:
+  - Toolbox tools
+  - Project Workspace controls
+  - Account/Admin pages
+  - Theme V2 controls
+  - Future tools and pages
+
 ## RULE PRECEDENCE
 
 Newer appended sections override earlier overlapping rules.

docs_build/dev/reports/coverage_changed_js_guardrail.txt

@@ -6,7 +6,8 @@ Missing changed runtime JS files are WARN, not FAIL.
 Source: Playwright/Chromium built-in V8 coverage from the active Playwright run.
 
 Changed runtime JS files considered:
-(100%) none changed - no changed runtime JS files
+(86%) toolbox/colors/colors.js - executed lines 2111/2111; executed functions 180/209
+(91%) assets/theme-v2/js/account-controls.js - executed lines 39/39; executed functions 10/11
 
 Guardrail warnings:
-(100%) none changed - no changed runtime JS files
+(100%) none - no changed runtime JS coverage warnings

docs_build/dev/reports/playwright_v8_coverage_report.txt

@@ -14,21 +14,26 @@ Note: coverage entries are aggregated across every page/tool where coverageRepor
 Exercised tool entry points detected:
 (85%) Toolbox Index - exercised 3 runtime JS files
 (0%) Tool Template V2 - not exercised by this Playwright run
-(64%) Theme V2 Shared JS - exercised 2 runtime JS files
+(76%) Theme V2 Shared JS - exercised 3 runtime JS files
 
 Changed runtime JS files covered:
-(100%) none changed - no changed runtime JS files
+(86%) toolbox/colors/colors.js - executed lines 2111/2111; executed functions 180/209
+(91%) assets/theme-v2/js/account-controls.js - executed lines 39/39; executed functions 10/11
 
 Files with executed line/function counts where available:
 (58%) src/engine/api/server-api-client.js - executed lines 159/159; executed functions 11/19
-(64%) assets/theme-v2/js/gamefoundry-partials.js - executed lines 525/525; executed functions 28/44
 (64%) assets/theme-v2/js/tool-display-mode.js - executed lines 201/201; executed functions 9/14
+(76%) assets/theme-v2/js/gamefoundry-partials.js - executed lines 525/525; executed functions 35/46
 (78%) toolbox/tool-registry-api-client.js - executed lines 148/148; executed functions 21/27
-(86%) toolbox/colors/colors.js - executed lines 2093/2093; executed functions 177/206
+(86%) toolbox/colors/colors.js - executed lines 2111/2111; executed functions 180/209
+(91%) assets/theme-v2/js/account-controls.js - executed lines 39/39; executed functions 10/11
 (100%) toolbox/colors/palette-api-client.js - executed lines 19/19; executed functions 4/4
 
 Uncovered or low-coverage changed JS files:
-(100%) none changed - no changed runtime JS files
+(100%) none - no low-coverage changed runtime JS files
 
 Changed JS files considered:
-(100%) none - no changed JS files
+(0%) tests/helpers/playwrightV8CoverageReporter.mjs - changed JS file not collected as browser runtime coverage
+(0%) tests/playwright/tools/PaletteToolMockRepository.spec.mjs - changed JS file not collected as browser runtime coverage
+(86%) toolbox/colors/colors.js - changed JS file with browser V8 coverage
+(91%) assets/theme-v2/js/account-controls.js - changed JS file with browser V8 coverage

docs_build/dev/reports/slider-value-visibility-report.md

@@ -0,0 +1,78 @@
+# PR_26159_049-slider-value-visibility
+
+Status: PASS
+
+## Branch Guard
+
+| Requirement | Status | Evidence |
+|---|---|---|
+| Current branch must be `main` before BUILD work | PASS | `git branch --show-current` returned `main`. |
+
+## Requirement Checklist
+
+| Requirement | Status | Evidence |
+|---|---|---|
+| Read `docs_build/dev/PROJECT_INSTRUCTIONS.md` first | PASS | Read before branch validation and implementation. |
+| Add global `SLIDER VALUE VISIBILITY REQUIREMENT` governance section | PASS | `docs_build/dev/PROJECT_INSTRUCTIONS.md` includes the new section with live value, persistent visibility, unit, and scope rules. |
+| Find all active existing user-adjustable sliders | PASS | Active range inputs found in `toolbox/colors/index.html` and `admin/controls.html`; deprecated archive/start_of_day and docs-only mentions excluded. |
+| Update all active sliders to show persistent current values | PASS | Colors sliders have visible `<output>` values; Admin Controls range demo has a visible `<output>` value. |
+| Values update live during `input`, not only release/change | PASS | Colors values update through `renderPaletteGeneratorPreview()` on `input`; Admin Controls values update through `account-controls.js` on `input`. Playwright dispatches `input` and verifies visible text changes. |
+| Colors Contrast shows `%` | PASS | `data-palette-generator-contrast-value` displays `40%`, `80%`, and restored values in Playwright. |
+| Colors Saturation shows `%` | PASS | `data-palette-generator-saturation-value` displays `100%`, `20%`, and restored values in Playwright. |
+| Colors Hue Shift shows `°` | PASS | `data-palette-generator-hue-shift-value` displays `0°`, `+45°`, and `-35°` in Playwright. |
+| Colors Step Range shows `%` | PASS | `data-palette-generator-step-range-value` displays `50%`, `0%`, `100%`, and `70%` in Playwright. |
+| Any other active sliders show appropriate unit/raw value | PASS | Admin Controls generic numeric range displays raw values `68` and `42`. |
+| Use existing Theme V2/control patterns where possible | PASS | Added reusable Theme V2 `.slider-value-row`, `.control-row--with-value`, and `.slider-current-value` support in `assets/theme-v2/css/forms.css`. |
+| Do not add inline script/style/event handlers | PASS | Static scan found no inline script/style/event handlers in changed active HTML files. |
+| Do not add page-local CSS | PASS | CSS change is reusable Theme V2 support under `assets/theme-v2/css/forms.css`. |
+| Validate no console errors | PASS | Targeted Playwright lane collected no page errors, request failures, or console errors for covered pages. |
+| Produce required reports and ZIP | PASS | Review artifacts and `tmp/PR_26159_049-slider-value-visibility_delta.zip` produced. |
+
+## Active Slider Inventory
+
+| Slider | File | Unit | Update Path | Status |
+|---|---|---|---|---|
+| Contrast | `toolbox/colors/index.html` | `%` | `toolbox/colors/colors.js` `input` listener -> `renderPaletteGeneratorPreview()` -> visible output | PASS |
+| Saturation | `toolbox/colors/index.html` | `%` | `toolbox/colors/colors.js` `input` listener -> `renderPaletteGeneratorPreview()` -> visible output | PASS |
+| Hue Shift | `toolbox/colors/index.html` | degrees | `toolbox/colors/colors.js` `input` listener -> `renderPaletteGeneratorPreview()` -> signed degree output | PASS |
+| Step Range | `toolbox/colors/index.html` | `%` | `toolbox/colors/colors.js` `input` listener -> `renderPaletteGeneratorPreview()` -> visible output | PASS |
+| Numeric Input - Range demo | `admin/controls.html` | raw value | `assets/theme-v2/js/account-controls.js` `input` listener -> visible output | PASS |
+
+Intentionally skipped: none. CSS selectors such as `input[type="range"]` are styling rules, not user-adjustable controls. Deprecated `archive/v1-v2` and `start_of_day` paths were excluded per request.
+
+## Validation
+
+| Command / Lane | Result | Notes |
+|---|---|---|
+| `node --check toolbox/colors/colors.js` | PASS | Colors runtime JS syntax. |
+| `node --check assets/theme-v2/js/account-controls.js` | PASS | Admin Controls external JS syntax. |
+| `node --check tests/playwright/tools/PaletteToolMockRepository.spec.mjs` | PASS | Targeted Playwright test syntax. |
+| `node --check tests/helpers/playwrightV8CoverageReporter.mjs` | PASS | Coverage helper syntax after Theme V2 JS runtime classification update. |
+| `rg --pcre2 ... toolbox/colors/index.html admin/controls.html` | PASS | No inline `<script>`, `<style>`, `oninput`, `onchange`, or `onclick` in changed active HTML. |
+| `npx playwright test tests/playwright/tools/PaletteToolMockRepository.spec.mjs` | PASS | 9 passed; covers Colors slider live values and Admin Controls range live value. |
+| `git diff --check` | PASS | No whitespace errors. |
+
+## Playwright Impact
+
+Playwright impacted: Yes.
+
+Validated behavior:
+- Colors slider values are visible at rest and update during `input`.
+- Contrast, Saturation, Hue Shift, and Step Range display the requested units.
+- Reset and Restore Picker Settings refresh visible slider values.
+- Admin Controls range demo displays a persistent value and updates during `input`.
+- Covered pages report no console errors.
+
+## Coverage
+
+`docs_build/dev/reports/playwright_v8_coverage_report.txt` reports:
+- `(86%) toolbox/colors/colors.js`
+- `(91%) assets/theme-v2/js/account-controls.js`
+
+No low-coverage changed runtime JS warnings were reported.
+
+## Skipped Lanes
+
+Full samples validation: SKIP. This PR changes governance, Theme V2 slider display support, Colors slider UI, and an Admin Controls demo slider; no sample loader/framework or sample JSON changed.
+
+Broader workspace/tool suites: SKIP. The targeted Palette Tool lane covers the changed Colors runtime behavior and the Admin Controls slider demo. No shared persistence, engine, sample, or cross-tool launch behavior changed.

tests/helpers/playwrightV8CoverageReporter.mjs

@@ -276,6 +276,7 @@ export class PlaywrightV8CoverageReporter {
       return false;
     }
     return filePath.startsWith("src/")
+      || filePath.startsWith("assets/theme-v2/js/")
       || filePath.startsWith("games/Asteroids/")
       || filePath.startsWith("toolbox/")
       || filePath.startsWith("common/");