Fix Colors picker preview behavior - PR_26159_038-colors-picker-preview-behavior

Author: ToolboxAid

assets/theme-v2/css/accordion.css

@@ -131,6 +131,14 @@ details.vertical-accordion summary:active:after {
   background-image: linear-gradient(135deg, transparent 50%, currentColor 50%), linear-gradient(45deg, currentColor 50%, transparent 50%)
 }
 
+details.vertical-accordion summary .status {
+  font-weight: normal
+}
+
+details.vertical-accordion summary .action-group--end {
+  margin-left: auto
+}
+
 details.vertical-accordion[open] summary:active:after {
   background-image: linear-gradient(45deg, transparent 50%, currentColor 50%), linear-gradient(135deg, currentColor 50%, transparent 50%)
 }

assets/theme-v2/css/forms.css

@@ -267,6 +267,17 @@ input[type="color"][data-palette-swatch-size="large"] {
   pointer-events: none
 }
 
+.palette-generator-preview-color {
+  box-sizing: border-box;
+  width: 100%;
+  min-width: var(--space-0);
+  height: 100%;
+  min-height: var(--space-0);
+  border: var(--border-width-sm) solid var(--line);
+  border-radius: var(--space-0);
+  pointer-events: none
+}
+
 .palette-generator-preview-swatch input[type="color"]::-webkit-color-swatch-wrapper {
   padding: var(--space-0)
 }
@@ -296,13 +307,24 @@ input[type="color"][data-palette-swatch-size="large"] {
   outline-offset: calc(var(--space-3) * -1)
 }
 
+.palette-generator-preview-swatch:hover {
+  transform: none
+}
+
 .palette-swatch-tile[data-palette-selected="true"],
 .palette-generator-preview-swatch[data-palette-selected="true"] {
   outline: var(--border-width-sm) solid var(--gold);
   outline-offset: calc(var(--space-3) * -1);
   box-shadow: inset 0 0 0 var(--space-3) var(--gold-soft), 0 0 var(--space-18) var(--orange-shadow-color)
 }
 
+.palette-generator-preview-swatch:focus-visible,
+.palette-generator-preview-swatch[data-palette-selected="true"] {
+  outline: 0;
+  box-shadow: none;
+  transform: none
+}
+
 .palette-swatch-pin {
   position: absolute;
   top: var(--space-3);
@@ -322,10 +344,6 @@ input[type="color"][data-palette-swatch-size="large"] {
   background: var(--green)
 }
 
-.palette-generator-preview-swatch[data-palette-generator-availability="available"] .palette-swatch-pin {
-  background: var(--green)
-}
-
 input[type="file"],
 select {
   min-height: var(--space-44)

docs_build/dev/reports/colors-picker-preview-behavior-report.md

@@ -0,0 +1,66 @@
+# PR_26159_038-colors-picker-preview-behavior Report
+
+## Summary
+
+Implemented the Colors Picker Preview behavior polish from PR_26159_038:
+
+- Picker Preview red pins add swatches to Project Swatches.
+- Picker Preview green pins remove already-added swatches from Project Swatches.
+- Same-column duplicate Hex swatches keep their true color, have no pin, and do not add.
+- Added `Show duplicates` beside the `Available Picker Swatches (xx)` header count.
+- Changed Steps to a numeric spinner where actual rows are `steps * 2 + 1`.
+- Removed Generate because live updates regenerate the preview.
+- Moved Tags to the left column after Picker Swatches.
+- Moved History to the right column before Validation.
+- Moved Restore Grid Picker Settings into the Project Swatches accordion header.
+
+## Requirement Checklist
+
+| Requirement | Status | Evidence |
+| --- | --- | --- |
+| Red pin adds a swatch to Project Swatches | PASS | `toolbox/colors/colors.js` `activateGeneratorPreviewTile`; Playwright test `Palette Tool uses green pins...` and generated-grid test |
+| Green pin removes an already-added swatch | PASS | `toolbox/colors/colors.js` `activateGeneratorPreviewTile`; Playwright test `Palette Tool uses green pins to remove already-added picker swatches` |
+| No pin duplicate does nothing | PASS | `toolbox/colors/colors.js` duplicate availability path; Playwright test `Palette Tool blocks only lower duplicate hexes...` |
+| Picker Preview swatches do not remain selected/boxed after click | PASS | `createGeneratorPreviewInput` always sets `data-palette-selected="false"`; CSS removes preview focus/selected outlines; Playwright asserts no selected state/box after click |
+| Add Show duplicates checkbox beside Available Picker Swatches | PASS | `toolbox/colors/index.html` `data-palette-show-duplicates`; Playwright asserts checked default and hide/show behavior |
+| Available Picker Swatches count is not bold | PASS | `assets/theme-v2/css/accordion.css`; Playwright checks computed font weight |
+| Show duplicates checked shows full grid | PASS | Default checked state plus row-count assertions in targeted Playwright |
+| Show duplicates unchecked hides duplicate-color swatches | PASS | Duplicate Playwright test unchecks control and verifies lower duplicate disappears |
+| Duplicate detection is same-column Hex and keeps top instance | PASS | `duplicatePickerHexReasons`; duplicate Playwright test validates top duplicate addable and lower duplicate blocked |
+| Duplicate swatches do not get pins | PASS | `appendPickerRows` and `createGeneratorPreviewInput`; duplicate Playwright test checks no pin on lower duplicate |
+| Add human-readable Theme display/control where needed | PASS | Existing Theme label/dropdown preserved in left Picker Swatches control table |
+| Contrast, Saturation, Hue Shift on one line | PASS | `toolbox/colors/index.html` grid `cols-3`; Playwright layout assertion |
+| Remove Generate button | PASS | `toolbox/colors/index.html` removed button; `toolbox/colors/colors.js` removed Generate handler; Playwright asserts selector absent |
+| Steps numeric spinner increments by 1 | PASS | `paletteGeneratorSteps` is `type="number"` with `step="1"`; Playwright asserts attributes |
+| Steps means rows above/below center | PASS | `actualPaletteGeneratorRows(steps)` returns `steps * 2 + 1`; Playwright validates `Grid 8 x 3` and row counts |
+| Grid summary uses actual rows | PASS | `renderPaletteGeneratorPreview`; Playwright asserts `Grid 8 x 3` and changed row counts |
+| Generated swatch names use Hex instead of row/column suffix | PASS | `generatorSwatchName`; Playwright asserts Hex present and no `R# C#` suffix |
+| History moved to right column before Validation | PASS | `toolbox/colors/index.html`; Playwright layout assertion with `data-palette-history-accordion` |
+| Tags moved to left column after Picker Swatches | PASS | `toolbox/colors/index.html`; Playwright layout assertion with `data-palette-tags-accordion` |
+| Restore Grid Picker Settings in Project Swatches header anchored right | PASS | `toolbox/colors/index.html`; `assets/theme-v2/css/accordion.css`; Playwright header layout assertion |
+| Preserve Project Swatches and Picker Preview vertical sharing | PASS | Existing `accordion-fill-panel` behavior preserved; Playwright height-sharing assertions pass |
+| Preserve no forced accordion height | PASS | No fixed height added; targeted Playwright vertical sharing assertions pass |
+| Add/Update/Clear show no Symbol validation | PASS | Existing repository and UI tests pass; static scan found no active Colors `Symbol: Enter a symbol` string |
+| No console errors | PASS | `expectNoPageFailures` passed across targeted Palette Tool Playwright lane |
+
+## Validation
+
+| Lane | Result | Evidence |
+| --- | --- | --- |
+| Changed-file syntax | PASS | `node --check toolbox/colors/colors.js`; `node --check tests/playwright/tools/PaletteToolMockRepository.spec.mjs` |
+| Static diff whitespace | PASS | `git diff --check` |
+| Static active-source scan | PASS | Active Colors/runtime scan found no stale Generate handler, old `Colors x Steps`, old active `Already in Project` unavailable logic, or active Symbol validation string. Remaining Generate hits are tests asserting absence. |
+| Targeted Palette/Colors Playwright | PASS | `npx playwright test tests/playwright/tools/PaletteToolMockRepository.spec.mjs` passed 8/8 |
+| Playwright V8 coverage | PASS | `docs_build/dev/reports/playwright_v8_coverage_report.txt` shows `toolbox/colors/colors.js` covered by browser V8 coverage |
+
+## Skipped Lanes
+
+| Lane | Skipped | Reason |
+| --- | --- | --- |
+| Full samples validation | Yes | PR only changes Colors tool behavior, reusable Theme V2 swatch/accordion CSS, and targeted Palette Playwright coverage. No shared sample loader/framework changed. |
+| Full workspace suite | Yes | Existing request says do not run full samples validation; targeted Colors runtime lane covers touched UI/runtime behavior. |
+
+## Notes
+
+- The first targeted Playwright run exposed two implementation/test issues: old layout expectations and physical pointer clicks not synthesizing `click` in the preview grid. The final implementation handles pointer activation directly while preserving click/keyboard activation through the same runtime path.
+- The active branch is `PR_26159_038-colors-picker-preview-behavior`; these changes are not on `main` until committed, pushed, and merged.

docs_build/dev/reports/coverage_changed_js_guardrail.txt

@@ -6,7 +6,7 @@ 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:
-(85%) toolbox/colors/colors.js - executed lines 1938/1938; executed functions 166/195
+(85%) toolbox/colors/colors.js - executed lines 1981/1981; executed functions 169/200
 
 Guardrail warnings:
 (100%) none - no changed runtime JS coverage warnings

docs_build/dev/reports/playwright_v8_coverage_report.txt

@@ -12,19 +12,19 @@ Note: entry percentages use function coverage when available, otherwise line cov
 Note: coverage entries are aggregated across every page/tool where coverageReporter.start(page) and coverageReporter.stop(page) ran.
 
 Exercised tool entry points detected:
-(85%) Toolbox Index - exercised 3 runtime JS files
+(84%) 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
 
 Changed runtime JS files covered:
-(85%) toolbox/colors/colors.js - executed lines 1938/1938; executed functions 166/195
+(85%) toolbox/colors/colors.js - executed lines 1981/1981; executed functions 169/200
 
 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
 (78%) toolbox/tool-registry-api-client.js - executed lines 148/148; executed functions 21/27
-(85%) toolbox/colors/colors.js - executed lines 1938/1938; executed functions 166/195
+(85%) toolbox/colors/colors.js - executed lines 1981/1981; executed functions 169/200
 (100%) toolbox/colors/palette-api-client.js - executed lines 19/19; executed functions 4/4
 
 Uncovered or low-coverage changed JS files: