Show selected Palette swatch and render harmony results as swatches - PR_26156_172-palette-selected-swatch-and-harmony-display

ToolboxAid · ToolboxAid · commit 97243c281e0f · 2026-06-05T19:23:35.000-04:00
diff --git a/assets/theme-v2/css/forms.css b/assets/theme-v2/css/forms.css
@@ -162,6 +162,13 @@ input[type="color"][data-palette-swatch-size="large"] {
   outline-offset: var(--space-3)
 }
 
+.palette-swatch-tile[data-palette-selected="true"] {
+  outline: var(--border-width-sm) solid var(--gold);
+  outline-offset: var(--space-3);
+  box-shadow: 0 0 0 var(--space-3) var(--gold-soft), 0 0 var(--space-18) var(--orange-shadow-color);
+  transform: scale(1.04)
+}
+
 .palette-swatch-pin {
   position: absolute;
   top: var(--space-3);
diff --git a/docs_build/dev/reports/coverage_changed_js_guardrail.txt b/docs_build/dev/reports/coverage_changed_js_guardrail.txt
@@ -6,8 +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:
-(85%) toolbox/colors/palette-workspace-repository.js - executed lines 1073/1073; executed functions 98/115
-(92%) toolbox/colors/colors.js - executed lines 694/694; executed functions 69/75
+(86%) toolbox/colors/palette-workspace-repository.js - executed lines 1073/1073; executed functions 102/118
+(93%) toolbox/colors/colors.js - executed lines 717/717; executed functions 71/76
 
 Guardrail warnings:
 (100%) none - no changed runtime JS coverage warnings
diff --git a/docs_build/dev/reports/dependency_gating_report.md b/docs_build/dev/reports/dependency_gating_report.md
@@ -1,6 +1,6 @@
 # Dependency Gating Report
 
-Generated: 2026-06-05T23:00:27.527Z
+Generated: 2026-06-05T23:21:30.828Z
 Status: PASS
 
 ## Gate Order
diff --git a/docs_build/dev/reports/dependency_hydration_reuse_report.md b/docs_build/dev/reports/dependency_hydration_reuse_report.md
@@ -1,6 +1,6 @@
 # Dependency Hydration Reuse Report
 
-Generated: 2026-06-05T23:00:27.528Z
+Generated: 2026-06-05T23:21:30.828Z
 Status: PASS
 
 ## Summary
diff --git a/docs_build/dev/reports/execution_graph_reuse_report.md b/docs_build/dev/reports/execution_graph_reuse_report.md
@@ -1,6 +1,6 @@
 # Execution Graph Reuse Report
 
-Generated: 2026-06-05T23:00:27.528Z
+Generated: 2026-06-05T23:21:30.828Z
 Status: PASS
 
 ## Summary
diff --git a/docs_build/dev/reports/failure_fingerprint_report.md b/docs_build/dev/reports/failure_fingerprint_report.md
@@ -1,6 +1,6 @@
 # Failure Fingerprint Report
 
-Generated: 2026-06-05T23:00:27.528Z
+Generated: 2026-06-05T23:21:30.828Z
 Status: PASS
 
 ## Summary
diff --git a/docs_build/dev/reports/incremental_validation_report.md b/docs_build/dev/reports/incremental_validation_report.md
@@ -1,6 +1,6 @@
 # Incremental Validation Report
 
-Generated: 2026-06-05T23:00:27.528Z
+Generated: 2026-06-05T23:21:30.829Z
 Status: PASS
 
 ## Reuse Summary
diff --git a/docs_build/dev/reports/lane_compilation_report.md b/docs_build/dev/reports/lane_compilation_report.md
@@ -1,6 +1,6 @@
 # Lane Compilation Report
 
-Generated: 2026-06-05T23:00:27.527Z
+Generated: 2026-06-05T23:21:30.827Z
 Status: PASS
 
 ## Lane Graph
diff --git a/docs_build/dev/reports/lane_deduplication_report.md b/docs_build/dev/reports/lane_deduplication_report.md
@@ -1,6 +1,6 @@
 # Lane Deduplication Report
 
-Generated: 2026-06-05T23:00:27.527Z
+Generated: 2026-06-05T23:21:30.828Z
 Status: PASS
 
 ## Summary
diff --git a/docs_build/dev/reports/lane_input_validation_report.md b/docs_build/dev/reports/lane_input_validation_report.md
@@ -1,6 +1,6 @@
 # Lane Input Validation Report
 
-Generated: 2026-06-05T23:00:27.528Z
+Generated: 2026-06-05T23:21:30.829Z
 Status: PASS
 
 ## Input Files
diff --git a/docs_build/dev/reports/lane_runtime_optimization_report.md b/docs_build/dev/reports/lane_runtime_optimization_report.md
@@ -1,6 +1,6 @@
 # Lane Runtime Optimization Report
 
-Generated: 2026-06-05T23:00:27.527Z
+Generated: 2026-06-05T23:21:30.828Z
 Status: PASS
 
 ## Runtime Cost Summary
diff --git a/docs_build/dev/reports/lane_snapshot_report.md b/docs_build/dev/reports/lane_snapshot_report.md
@@ -1,6 +1,6 @@
 # Lane Snapshot Report
 
-Generated: 2026-06-05T23:00:27.528Z
+Generated: 2026-06-05T23:21:30.828Z
 Status: PASS
 Snapshot directory: docs_build/dev/reports/lane_snapshots
 
diff --git a/docs_build/dev/reports/lane_warm_start_report.md b/docs_build/dev/reports/lane_warm_start_report.md
@@ -1,6 +1,6 @@
 # Lane Warm-Start Report
 
-Generated: 2026-06-05T23:00:27.527Z
+Generated: 2026-06-05T23:21:30.828Z
 Status: PASS
 Warm-start directory: docs_build/dev/reports/lane_warm_starts
 
diff --git a/docs_build/dev/reports/monolith_trigger_removal_report.md b/docs_build/dev/reports/monolith_trigger_removal_report.md
@@ -1,6 +1,6 @@
 # Monolith Trigger Removal Report
 
-Generated: 2026-06-05T23:00:27.530Z
+Generated: 2026-06-05T23:21:30.831Z
 Status: PASS
 
 ## Removed Broad Execution Triggers
diff --git a/docs_build/dev/reports/palette-selected-swatch-and-harmony-display-report.md b/docs_build/dev/reports/palette-selected-swatch-and-harmony-display-report.md
@@ -0,0 +1,50 @@
+# PR_26156_172 Palette Selected Swatch And Harmony Display Report
+
+## Result
+PASS
+
+## Scope
+- Added a distinct selected state for Palette Colors swatches.
+- Kept selected state separate from pinned/unpinned state.
+- Rendered Color Harmony Schemes results as swatch tiles instead of text-only lines.
+- Preserved Add Selected and Add All behavior for harmony results.
+
+## Selected Swatch Behavior
+- Active palette tiles now carry `data-palette-selected`.
+- The selected swatch gets `aria-current=true` and an accessible label prefix.
+- The selected swatch is visually distinct with:
+  - existing swatch glow treatment
+  - an outline
+  - a ring/border treatment
+- The pin dot remains in the upper-right corner and still represents pinned/unpinned state.
+- Selected state is separate from the pin marker and does not rely only on color.
+
+## Harmony Display Behavior
+- Harmony results now render through the same swatch tile pattern used by Palette Colors.
+- The harmony result container uses `palette-swatch-list`.
+- Harmony swatches expose generated hex and scheme label through:
+  - `aria-label`
+  - `title`
+- Plain visible text lines such as `Complementary 1: #00FF00 (Harmony Scheme)` are no longer rendered.
+- Clicking a harmony swatch selects it for Add Selected.
+- Add Selected and Add All continue to use the selected/generated harmony rows.
+
+## CSS
+- Added reusable Theme V2 swatch selected-state styling in `assets/theme-v2/css/forms.css`.
+- No page-local CSS, tool-local CSS, inline styles, `<style>` blocks, or inline event handlers were added.
+
+## Files Changed For Implementation
+- `assets/theme-v2/css/forms.css`
+- `toolbox/colors/colors.js`
+- `toolbox/colors/index.html`
+- `tests/playwright/tools/PaletteToolMockRepository.spec.mjs`
+
+## Validation Summary
+- Targeted Palette Tool runtime/UI lane: PASS.
+- Selected Palette Colors swatch is clearly indicated: PASS.
+- Selected state is separate from pin state: PASS.
+- Harmony results render as swatches, not text-only lines: PASS.
+- Harmony swatches expose generated hex and scheme label in accessible text/title/label: PASS.
+- Add Selected and Add All still work from harmony swatches: PASS.
+- Changed-file/static validation: PASS.
+- Full samples smoke: not run per BUILD instruction.
diff --git a/docs_build/dev/reports/persistent_lane_manifest_report.md b/docs_build/dev/reports/persistent_lane_manifest_report.md
@@ -1,6 +1,6 @@
 # Persistent Lane Manifest Report
 
-Generated: 2026-06-05T23:00:27.528Z
+Generated: 2026-06-05T23:21:30.829Z
 Status: PASS
 Manifest directory: docs_build/dev/reports/lane_manifests
 
diff --git a/docs_build/dev/reports/playwright_v8_coverage_report.txt b/docs_build/dev/reports/playwright_v8_coverage_report.txt
@@ -12,26 +12,26 @@ 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:
-(83%) Toolbox Index - exercised 4 runtime JS files
+(84%) Toolbox Index - exercised 4 runtime JS files
 (0%) Tool Template V2 - not exercised by this Playwright run
 (83%) Theme V2 Shared JS - exercised 2 runtime JS files
 
 Changed runtime JS files covered:
-(85%) toolbox/colors/palette-workspace-repository.js - executed lines 1073/1073; executed functions 98/115
-(92%) toolbox/colors/colors.js - executed lines 694/694; executed functions 69/75
+(86%) toolbox/colors/palette-workspace-repository.js - executed lines 1073/1073; executed functions 102/118
+(93%) toolbox/colors/colors.js - executed lines 717/717; executed functions 71/76
 
 Files with executed line/function counts where available:
 (65%) toolbox/project-workspace/project-workspace-mock-repository.js - executed lines 402/402; executed functions 20/31
 (75%) toolbox/toolRegistry.js - executed lines 1754/1754; executed functions 27/36
 (80%) assets/theme-v2/js/gamefoundry-partials.js - executed lines 205/205; executed functions 16/20
-(85%) toolbox/colors/palette-workspace-repository.js - executed lines 1073/1073; executed functions 98/115
+(86%) toolbox/colors/palette-workspace-repository.js - executed lines 1073/1073; executed functions 102/118
 (87%) assets/theme-v2/js/tool-display-mode.js - executed lines 201/201; executed functions 13/15
-(92%) toolbox/colors/colors.js - executed lines 694/694; executed functions 69/75
+(93%) toolbox/colors/colors.js - executed lines 717/717; executed functions 71/76
 
 Uncovered or low-coverage changed JS files:
 (100%) none - no low-coverage changed runtime JS files
 
 Changed JS files considered:
 (0%) tests/playwright/tools/PaletteToolMockRepository.spec.mjs - changed JS file not collected as browser runtime coverage
-(85%) toolbox/colors/palette-workspace-repository.js - changed JS file with browser V8 coverage
-(92%) toolbox/colors/colors.js - changed JS file with browser V8 coverage
+(86%) toolbox/colors/palette-workspace-repository.js - changed JS file with browser V8 coverage
+(93%) toolbox/colors/colors.js - changed JS file with browser V8 coverage
diff --git a/docs_build/dev/reports/retry_suppression_report.md b/docs_build/dev/reports/retry_suppression_report.md
@@ -1,6 +1,6 @@
 # Retry Suppression Report
 
-Generated: 2026-06-05T23:00:27.528Z
+Generated: 2026-06-05T23:21:30.828Z
 Status: PASS
 
 ## Summary
diff --git a/docs_build/dev/reports/slow_path_pruning_report.md b/docs_build/dev/reports/slow_path_pruning_report.md
@@ -1,6 +1,6 @@
 # Slow Path Pruning Report
 
-Generated: 2026-06-05T23:00:27.530Z
+Generated: 2026-06-05T23:21:30.831Z
 Status: PASS
 Source timing evidence: docs_build/dev/reports/test_cleanup_performance_report.md (2026-05-26T21:18:42.199Z)
 
diff --git a/docs_build/dev/reports/static_validation_report.md b/docs_build/dev/reports/static_validation_report.md
@@ -1,6 +1,6 @@
 # Static Validation Report
 
-Generated: 2026-06-05T23:00:27.523Z
+Generated: 2026-06-05T23:21:30.823Z
 Status: PASS
 Static only: Yes
 Dry run: No
diff --git a/docs_build/dev/reports/targeted_file_manifest_report.md b/docs_build/dev/reports/targeted_file_manifest_report.md
@@ -1,6 +1,6 @@
 # Targeted File Manifest Report
 
-Generated: 2026-06-05T23:00:27.528Z
+Generated: 2026-06-05T23:21:30.829Z
 Status: PASS
 
 ## Manifest-Generated Lane Inputs
diff --git a/docs_build/dev/reports/test_cleanup_performance_report.md b/docs_build/dev/reports/test_cleanup_performance_report.md
@@ -1,6 +1,6 @@
 # Test Cleanup Performance Report
 
-Generated: 2026-06-05T23:00:27.530Z
+Generated: 2026-06-05T23:21:30.830Z
 Status: PASS
 
 ## Cost Summary
diff --git a/docs_build/dev/reports/test_cleanup_routing_report.md b/docs_build/dev/reports/test_cleanup_routing_report.md
@@ -1,6 +1,6 @@
 # Test Cleanup Routing Report
 
-Generated: 2026-06-05T23:00:27.530Z
+Generated: 2026-06-05T23:21:30.830Z
 Status: PASS
 
 ## Representative Routing Cases
diff --git a/docs_build/dev/reports/testing_lane_execution_report.md b/docs_build/dev/reports/testing_lane_execution_report.md
@@ -1,4 +1,4 @@
-# PR_26156_171 Testing Lane Execution Report
+# PR_26156_172 Testing Lane Execution Report
 
 ## Result
 PASS
@@ -22,24 +22,24 @@ PASS
 - Changed-file/static validation: PASS.
 
 ## Playwright Coverage
-- Source Palette Browser loads mock-DB `palette_source_swatches` rows: PASS.
-- Source swatches render visibly when DB/mock-DB rows exist: PASS.
-- Empty source palette diagnostic appears only with an explicitly empty source table: PASS.
-- Pin All pins the visible filtered source swatches: PASS.
-- Pin All skips already pinned swatches without duplicates: PASS.
-- Compact Hue/Sat/Brit/Name/Tag and Small/Medium/Large buttons fit one row: PASS.
-- Left/right control groups align on the same baseline: PASS.
-- Active sort/size state and caret direction remain visible: PASS.
+- Selected Palette Colors swatch is visibly indicated: PASS.
+- Selected state is separate from pinned state: PASS.
+- Selected swatch does not rely only on color because it uses a ring/border and glow treatment: PASS.
+- Harmony results render as swatches: PASS.
+- Harmony results do not render as text-only `Scheme N: #HEX (Source)` lines: PASS.
+- Harmony swatches expose scheme and generated hex through title and accessible label: PASS.
+- Add Selected works after choosing a harmony swatch: PASS.
+- Add All still works from rendered harmony swatches: PASS.
 - Swatch-only list rendering, upper-right pin, hover glow, and native browser `title` tooltip remain covered: PASS.
 - Harmony controls and Add Selected action remain covered: PASS.
 
 ## Impacted Lane
 - Palette Tool runtime/UI lane.
-- Theme V2 static validation for reusable `.btn--compact`.
+- Theme V2 static validation for reusable swatch selected-state styling.
 
 ## Skipped Lanes
 - Full samples smoke was skipped by BUILD instruction.
-- Broader tool lanes were skipped because the Theme V2 change is a button modifier covered in the Palette Tool consumer lane plus static validation.
+- Broader tool lanes were skipped because the Theme V2 change is a swatch modifier covered in the Palette Tool consumer lane plus static validation.
 
 ## Not Run
 - Full samples smoke was not run, per BUILD instruction.
diff --git a/docs_build/dev/reports/validation_cache_report.md b/docs_build/dev/reports/validation_cache_report.md
@@ -1,6 +1,6 @@
 # Validation Cache Report
 
-Generated: 2026-06-05T23:00:27.529Z
+Generated: 2026-06-05T23:21:30.830Z
 Status: PASS
 
 ## Cache Summary
diff --git a/docs_build/dev/reports/zero_browser_preflight_report.md b/docs_build/dev/reports/zero_browser_preflight_report.md
@@ -1,6 +1,6 @@
 # Zero-Browser Preflight Report
 
-Generated: 2026-06-05T23:00:27.529Z
+Generated: 2026-06-05T23:21:30.830Z
 Status: PASS
 
 ## Prevented Browser Launches
diff --git a/tests/playwright/tools/PaletteToolMockRepository.spec.mjs b/tests/playwright/tools/PaletteToolMockRepository.spec.mjs
@@ -311,6 +311,10 @@ test("Palette Tool adds, updates, pins, validates, and shows project-owned detai
     await expect(page.locator("[data-palette-log]")).toContainText("0 pinned, 1 already pinned");
     await page.locator("[data-palette-source-search]").fill("");
     await expect(page.locator("[data-palette-source-index]")).toHaveCount(2);
+    await expect(page.locator("[data-palette-harmony-choice]")).toHaveCount(2);
+    await expect(page.locator("[data-palette-harmony-list]")).not.toContainText(/Complementary \d:/);
+    await expect(page.locator("[data-palette-harmony-choice]").first()).toHaveAttribute("title", /^Scheme: Complementary\nLabel: Complementary 1\nHex: #[0-9A-F]{6}$/);
+    await expect(page.locator("[data-palette-harmony-choice]").first()).toHaveAttribute("aria-label", /Complementary 1 #[0-9A-F]{6} from Complementary/);
     await expect(page.locator("[data-palette-harmony-match] option")).toHaveText([
       "Calculated",
       "Source Palette Closest Match",
@@ -351,11 +355,21 @@ test("Palette Tool adds, updates, pins, validates, and shows project-owned detai
     await expect(page.locator("[data-palette-swatch-row='H']")).toHaveAttribute("data-palette-swatch-name", "Hero Blue");
     await expect(page.locator("[data-palette-swatch-row='H']")).toHaveAttribute("data-palette-swatch-hex", "#123456AA");
     await expect(page.locator("[data-palette-swatch-row='H']")).toHaveAttribute("title", "Symbol: H\nHex: #123456AA\nName: Hero Blue\nTags: hero, ui");
+    await expect(page.locator("[data-palette-swatch-row='H']")).toHaveAttribute("data-palette-selected", "true");
+    await expect(page.locator("[data-palette-swatch-row='H']")).toHaveAttribute("aria-current", "true");
+    await expect(page.locator("[data-palette-swatch-row='H']")).toHaveCSS("outline-style", "solid");
+    await expect(page.locator("[data-palette-swatch-row='H']")).not.toHaveCSS("box-shadow", "none");
+    await expect(page.locator("[data-palette-swatch-row='H'] [data-palette-selected-indicator]")).toHaveCount(0);
+    await expect(page.locator("[data-palette-swatch-row='H'] [data-palette-pin-indicator]")).toHaveCount(1);
+    await expect(page.locator("[data-palette-user-list] [data-palette-swatch-name='Reference Green']")).toHaveAttribute("data-palette-pinned", "true");
+    await expect(page.locator("[data-palette-user-list] [data-palette-swatch-name='Reference Green']")).toHaveAttribute("data-palette-selected", "false");
+    await expect(page.locator("[data-palette-user-list] [data-palette-swatch-name='Reference Green'] [data-palette-selected-indicator]")).toHaveCount(0);
     await expect(page.locator("[data-palette-user-list]")).not.toContainText(/Hero Blue|#123456AA|hero, ui|Symbol|Name|Hex|Source|Tags/);
     await expect(page.locator("[data-palette-selected-details]")).toHaveCount(0);
     await expect(page.locator("[data-palette-project-accordion]")).not.toContainText(/Symbol:|Hex:|Name:|Source:|Tags:/);
     await expect(page.locator("[data-palette-table-counts]")).toContainText("palette_colors");
-    await expect(page.locator("[data-palette-harmony-list]")).toContainText("Complementary");
+    await expect(page.locator("[data-palette-harmony-choice]")).toHaveCount(2);
+    await expect(page.locator("[data-palette-harmony-list]")).not.toContainText(/Complementary \d:/);
 
     const activePreviewTile = page.locator("[data-palette-swatch-row='H']");
     await page.locator("[data-palette-user-sort] [data-palette-sort-key='hue']").click();
@@ -384,6 +398,7 @@ test("Palette Tool adds, updates, pins, validates, and shows project-owned detai
     await page.locator("[data-palette-tags]").fill("primary");
     await page.getByRole("button", { name: "Update Selected" }).click();
     await expect(page.locator("[data-palette-swatch-row='J']")).toHaveAttribute("data-palette-swatch-name", "Hero Updated");
+    await expect(page.locator("[data-palette-swatch-row='J']")).toHaveAttribute("data-palette-selected", "true");
     await expect(page.locator("[data-palette-swatch-row='J']")).toHaveAttribute("data-palette-swatch-tags", "feature, primary");
     await expect(page.locator("[data-palette-swatch-row='J']")).toHaveAttribute("title", "Symbol: J\nHex: #ABCDEF\nName: Hero Updated\nTags: feature, primary");
     await expect(page.locator("[data-palette-user-list]")).not.toContainText(/Hero Updated|feature, primary|Symbol|Name|Hex|Source|Tags/);
@@ -404,10 +419,18 @@ test("Palette Tool adds, updates, pins, validates, and shows project-owned detai
     await expect(page.locator("[data-palette-log]")).toHaveText("Editor form cleared.");
 
     await page.locator("[data-palette-harmony-scheme]").selectOption("triadic");
-    await expect(page.locator("[data-palette-harmony-list]")).toContainText("Triadic");
-    await page.locator("[data-palette-harmony-choice='1']").check();
+    await expect(page.locator("[data-palette-harmony-choice]")).toHaveCount(3);
+    await expect(page.locator("[data-palette-harmony-list]")).not.toContainText(/Triadic \d:/);
+    await expect(page.locator("[data-palette-harmony-choice='1']")).toHaveAttribute("title", /^Scheme: Triadic\nLabel: Triadic 2\nHex: #[0-9A-F]{6}$/);
+    await expect(page.locator("[data-palette-harmony-choice='1']")).toHaveAttribute("aria-label", /Triadic 2 #[0-9A-F]{6} from Triadic/);
+    await page.locator("[data-palette-harmony-choice='1']").click();
+    await expect(page.locator("[data-palette-harmony-choice='1']")).toHaveAttribute("data-palette-selected", "true");
+    await expect(page.locator("[data-palette-harmony-choice='1']")).toHaveCSS("outline-style", "solid");
+    await expect(page.locator("[data-palette-harmony-choice='1'] [data-palette-selected-indicator]")).toHaveCount(0);
     await page.locator("[data-palette-harmony-add-selected]").click();
     await expect(page.locator("[data-palette-log]")).toContainText("Saved palette to tools.palette-browser.swatches.");
+    await page.locator("[data-palette-harmony-add-all]").click();
+    await expect(page.locator("[data-palette-log]")).toContainText("Harmony add complete");
 
     await page.getByLabel("Tool Display Mode").click();
     await expect(page.locator("body")).toHaveClass(/tool-focus-mode/);
diff --git a/toolbox/colors/colors.js b/toolbox/colors/colors.js
diff --git a/toolbox/colors/index.html b/toolbox/colors/index.html
