Add Colors project swatch accordions and tag filtering - PR_26159_027-colors-tags-accordions

Author: ToolboxAid

assets/theme-v2/css/forms.css

@@ -184,8 +184,8 @@ input[type="color"][data-palette-swatch-size="large"] {
 
 .palette-swatch-check {
   position: absolute;
-  top: calc(var(--space-8) * -1);
-  left: calc(var(--space-8) * -1);
+  top: var(--space-3);
+  left: var(--space-3);
   z-index: var(--z-index-md);
   width: var(--space-14);
   height: var(--space-14);

docs_build/dev/reports/colors-tags-accordions-report.md

@@ -0,0 +1,76 @@
+# PR_26159_027 Colors Tags Accordions Report
+
+## Executive Summary
+PASS. The Colors center panel now uses the requested Project Swatches and Picker Swatches accordions, picker clicks add colors to Project Swatches with retained picker settings/metadata, hover text is reduced to the requested four fields, Project Swatches checkboxes are visually inset inside swatches, user-defined tag filtering supports typeahead plus Any/All match modes, and the requested button/terminology cleanup is implemented.
+
+Playwright impacted: Yes.
+
+## Requirement Checklist
+| Requirement | Status | Evidence |
+| --- | --- | --- |
+| Read `docs_build/dev/PROJECT_INSTRUCTIONS.md` first | PASS | Read before implementation. |
+| Use PR_26159_026 as base context | PASS | Built on existing PR_026 Colors picker metadata/restore behavior in `toolbox/colors/colors.js`, `toolbox/colors/index.html`, and palette repository metadata preservation. |
+| Rename workflow terms: Project Swatches and Picker Swatches | PASS | Center accordions and user-facing Project Swatches messages updated in `toolbox/colors/index.html` and `toolbox/colors/colors.js`. |
+| Center panel has Project Swatches and Picker Swatches accordions | PASS | `[data-palette-fullscreen-panels] > details > summary` Playwright assertion expects exactly `Project Swatches`, then `Picker Swatches`. |
+| Project Swatches appears above Picker Swatches | PASS | Playwright compares accordion top positions and asserts Project Swatches comes first. |
+| Picker swatch click adds to Project Swatches | PASS | `Palette Tool generated grid swatches can be selected, pinned, and refreshed` clicks picker swatches and verifies Project Swatches count/selected swatch. |
+| Project Swatches retain picker settings | PASS | Generated swatches store `pickerSettings` and `metadata`; Playwright verifies stored theme, type, variant, colors, steps, contrast, saturation, hue shift, sort field/direction, and swatch size on the selected tile. |
+| Move selected/project swatch checkbox inside the color swatch | PASS | Reusable Theme V2 `.palette-swatch-check` now uses top/left `var(--space-3)`; Playwright verifies approximately 3px inset from the swatch top-left. |
+| Store everything formerly shown in tooltip as color metadata | PASS | `metadataFromPickerSettings` and repository `cloneColorMetadata` preserve generation details, tags, source, and picker settings. |
+| Hover tooltip displays only Name, Hex, Theme, Palette Type | PASS | `pickerTooltipText` and `swatchTooltipText` now produce four-line tooltips; Playwright asserts no Contrast details appear in tooltip and checks exact selected swatch title. |
+| Keep remaining picker settings/generation details as metadata | PASS | Playwright checks `data-palette-metadata-*` attributes for generation settings; repository preserves `metadata` through normalize/clone/persist paths. |
+| Change form button labels to Add, Update, Clear | PASS | `toolbox/colors/index.html` labels updated; Playwright uses data hooks to validate buttons. |
+| Place Add, Update, Clear side by side | PASS | Buttons remain in the existing Theme V2 `hero-actions` row; no page-local CSS added. |
+| Right panel tags use checkboxes | PASS | `renderTags` renders checkbox filters; Playwright validates checkbox filters and checked/uncheck behavior. |
+| Tags are user-defined, not rigid categories | PASS | Right panel only renders tags from Project Swatches; suggested vocabulary is only in the typeahead datalist after typing. |
+| Add Tag uses typeahead with broad suggestions | PASS | `SUGGESTED_TAGS` added; Playwright types `pla` and verifies `Player` appears as a datalist option, then adds it. |
+| Suggestions do not appear in right panel until selected or added | PASS | Right panel tag list derives from active Project Swatches only; Playwright verifies `player` appears only after adding the suggested tag. |
+| Remove Deselect All | PASS | Playwright asserts no `Deselect All` button is present. |
+| Keep only Clear Filters | PASS | Right panel includes `Clear Filters`; no Deselect All control exists. |
+| Clicking checked tag unchecks it | PASS | Playwright clicks a checked tag checkbox and asserts it becomes unchecked. |
+| More than one tag can be checked | PASS | Playwright checks `batch` and `solo` together. |
+| Add Match Mode radio buttons | PASS | `Any selected tag` and `All selected tags` radios added and validated by Playwright. |
+| Do not label UI as AND/OR | PASS | Static scan found no AND/OR match labels in Colors UI; user-facing labels are Any selected tag and All selected tags. |
+| Any selected tag matches at least one selected tag | PASS | Playwright verifies batch+solo in Any mode shows Anchor and Brownstone. |
+| All selected tags matches every selected tag | PASS | Playwright switches to All mode and verifies only Anchor remains. |
+| Clear Filters resets tag filters and shows all Project Swatches | PASS | Playwright clicks Clear Filters, verifies checked filters reset, button disables, and all three Project Swatches show. |
+| Preserve Defined Swatch Selector ownership | PASS | Defined Swatch Selector remains in Picker Swatches with Theme Collection, Palette Type, Variant. |
+| Preserve Picker controls ownership | PASS | Swatch Type / Theme remains in Picker Swatches with Colors, Steps, Contrast, Saturation, Hue Shift, Generate, Reset. |
+| Preserve Admin toolbox unfiltered list and non-admin filtering | PASS | `ToolboxRoutePages.spec.mjs` passed. |
+| Preserve Colors on toolbox/index.html | PASS | `ToolboxRoutePages.spec.mjs` passed. |
+| No inline script/style/event handlers | PASS | Static scans found no `<style>`, inline handlers, or inline scripts; existing script tags are external. |
+| No page-local CSS | PASS | No page/tool-local CSS added. The only styling change is to existing reusable Theme V2 `.palette-swatch-check` placement in `assets/theme-v2/css/forms.css`. |
+| Validate no console errors | PASS | Targeted Playwright helper captured page errors/console errors; Palette and Toolbox lanes passed. |
+| Do not run full samples validation | PASS | Full samples validation skipped by request. |
+| Produce repo-structured ZIP | PASS | Created under `tmp/PR_26159_027-colors-tags-accordions_delta.zip`. |
+
+## Validation Evidence
+| Lane | Status | Evidence |
+| --- | --- | --- |
+| Changed-file syntax | PASS | `node --check toolbox/colors/colors.js`; `node --check src/dev-runtime/persistence/tool-repositories/palette-workspace-repository.js`; `node --check tests/playwright/tools/PaletteToolMockRepository.spec.mjs`. |
+| Changed-file/static validation | PASS | `git diff --check` passed with LF/CRLF warnings only. Static scans verified removed labels/hooks and no inline handlers/styles/scripts. |
+| Palette Tool runtime/UI lane | PASS | `npx playwright test tests/playwright/tools/PaletteToolMockRepository.spec.mjs --timeout=180000` -> 6 passed. |
+| Toolbox registration/navigation lane | PASS | `npx playwright test tests/playwright/tools/ToolboxRoutePages.spec.mjs --timeout=180000` -> 2 passed. |
+| Playwright V8 coverage | PASS/WARN | `docs_build/dev/reports/playwright_v8_coverage_report.txt` generated. `toolbox/colors/colors.js` covered at 84%; `palette-workspace-repository.js` is WARN because it is server/dev runtime and not collected by browser V8 coverage. |
+
+## Skipped Lanes
+| Lane | Reason |
+| --- | --- |
+| Full samples validation | Skipped by request. This PR changes the Colors tool UI/runtime and reusable Theme V2 swatch checkbox placement, not sample manifests or the shared sample loader. |
+| Broad workspace smoke | Skipped because no Project Workspace launch/manifest contract changed. Targeted Palette Tool and Toolbox route lanes cover the affected tool behavior and registration/visibility requirements. |
+
+## Changed Files
+- `assets/theme-v2/css/forms.css`
+- `src/dev-runtime/persistence/tool-repositories/palette-workspace-repository.js`
+- `tests/playwright/tools/PaletteToolMockRepository.spec.mjs`
+- `toolbox/colors/colors.js`
+- `toolbox/colors/index.html`
+- `docs_build/dev/reports/coverage_changed_js_guardrail.txt`
+- `docs_build/dev/reports/playwright_v8_coverage_report.txt`
+- `docs_build/dev/reports/colors-tags-accordions-report.md`
+- `docs_build/dev/reports/codex_review.diff`
+- `docs_build/dev/reports/codex_changed_files.txt`
+
+## Notes
+- The Project Swatches checkbox is visually placed inside the swatch using the existing reusable Theme V2 swatch selector. It is intentionally not nested inside the swatch button element to avoid invalid nested interactive controls.
+- The right-panel suggested tag vocabulary is stored in JavaScript for datalist/typeahead use only. Suggestions are not rendered as tag filters until a user adds/selects them on a Project Swatch.

docs_build/dev/reports/coverage_changed_js_guardrail.txt

@@ -6,10 +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:
-(0%) src/dev-runtime/admin/admin-notes-menu.mjs - WARNING: changed runtime JS file was not collected by Playwright V8 coverage; advisory only
-(0%) src/dev-runtime/server/local-api-server.mjs - WARNING: changed runtime JS file was not collected by Playwright V8 coverage; advisory only
-(91%) src/dev-runtime/admin/admin-notes-viewer.js - executed lines 520/520; executed functions 48/53
+(0%) src/dev-runtime/persistence/tool-repositories/palette-workspace-repository.js - WARNING: changed runtime JS file was not collected by Playwright V8 coverage; advisory only
+(84%) toolbox/colors/colors.js - executed lines 1802/1802; executed functions 153/182
 
 Guardrail warnings:
-(0%) src/dev-runtime/admin/admin-notes-menu.mjs - WARNING: changed runtime JS file missing from coverage; advisory only
-(0%) src/dev-runtime/server/local-api-server.mjs - WARNING: changed runtime JS file missing from coverage; advisory only
+(0%) src/dev-runtime/persistence/tool-repositories/palette-workspace-repository.js - WARNING: changed runtime JS file missing from coverage; advisory only

docs_build/dev/reports/playwright_v8_coverage_report.txt

@@ -12,36 +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:
-(77%) Toolbox Index - exercised 8 runtime JS files
+(84%) Toolbox Index - exercised 3 runtime JS files
 (0%) Tool Template V2 - not exercised by this Playwright run
-(74%) Theme V2 Shared JS - exercised 2 runtime JS files
+(70%) Theme V2 Shared JS - exercised 2 runtime JS files
 
 Changed runtime JS files covered:
-(0%) toolbox/toolRegistry.js - WARNING: changed runtime JS file was not collected by Playwright V8 coverage; advisory only
-(58%) toolbox/colors/colors.js - executed lines 1117/1117; executed functions 66/113
-(95%) toolbox/tools-page-accordions.js - executed lines 783/783; executed functions 74/78
+(0%) src/dev-runtime/persistence/tool-repositories/palette-workspace-repository.js - WARNING: changed runtime JS file was not collected by Playwright V8 coverage; advisory only
+(84%) toolbox/colors/colors.js - executed lines 1802/1802; executed functions 153/182
 
 Files with executed line/function counts where available:
-(38%) src/engine/api/session-api-client.js - executed lines 34/34; executed functions 3/8
 (58%) src/engine/api/server-api-client.js - executed lines 159/159; executed functions 11/19
-(58%) toolbox/colors/colors.js - executed lines 1117/1117; executed functions 66/113
 (64%) assets/theme-v2/js/tool-display-mode.js - executed lines 201/201; executed functions 9/14
-(71%) toolbox/project-workspace/project-workspace.js - executed lines 264/264; executed functions 17/24
-(78%) assets/theme-v2/js/gamefoundry-partials.js - executed lines 441/441; executed functions 31/40
-(89%) toolbox/tool-registry-api-client.js - executed lines 148/148; executed functions 24/27
-(91%) toolbox/game-design/game-design.js - executed lines 242/242; executed functions 20/22
-(95%) toolbox/tools-page-accordions.js - executed lines 783/783; executed functions 74/78
+(73%) assets/theme-v2/js/gamefoundry-partials.js - executed lines 441/441; executed functions 29/40
+(78%) toolbox/tool-registry-api-client.js - executed lines 148/148; executed functions 21/27
+(84%) toolbox/colors/colors.js - executed lines 1802/1802; executed functions 153/182
 (100%) toolbox/colors/palette-api-client.js - executed lines 19/19; executed functions 4/4
-(100%) toolbox/game-design/game-design-api-client.js - executed lines 12/12; executed functions 2/2
-(100%) toolbox/project-workspace/project-workspace-api-client.js - executed lines 12/12; executed functions 2/2
 
 Uncovered or low-coverage changed JS files:
-(0%) toolbox/toolRegistry.js - WARNING: uncovered changed runtime JS file; advisory only
+(0%) src/dev-runtime/persistence/tool-repositories/palette-workspace-repository.js - WARNING: uncovered changed runtime JS file; advisory only
 
 Changed JS files considered:
+(0%) src/dev-runtime/persistence/tool-repositories/palette-workspace-repository.js - 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
-(0%) tests/playwright/tools/RootToolsFutureState.spec.mjs - changed JS file not collected as browser runtime coverage
-(0%) tests/playwright/tools/ToolboxRoutePages.spec.mjs - changed JS file not collected as browser runtime coverage
-(0%) toolbox/toolRegistry.js - changed JS file not collected as browser runtime coverage
-(58%) toolbox/colors/colors.js - changed JS file with browser V8 coverage
-(95%) toolbox/tools-page-accordions.js - changed JS file with browser V8 coverage
+(84%) toolbox/colors/colors.js - changed JS file with browser V8 coverage

src/dev-runtime/persistence/tool-repositories/palette-workspace-repository.js

@@ -76,6 +76,24 @@ function clonePickerSettings(settings) {
   };
 }
 
+function cloneColorMetadata(metadata) {
+  if (!metadata || typeof metadata !== "object" || Array.isArray(metadata)) {
+    return null;
+  }
+  const cloned = { ...metadata };
+  if (Array.isArray(metadata.activeTags)) {
+    cloned.activeTags = [...metadata.activeTags];
+  }
+  if (Array.isArray(metadata.tags)) {
+    cloned.tags = [...metadata.tags];
+  }
+  const pickerSettings = clonePickerSettings(metadata.pickerSettings);
+  if (pickerSettings) {
+    cloned.pickerSettings = pickerSettings;
+  }
+  return cloned;
+}
+
 function cloneSwatch(swatch) {
   const cloned = {
     symbol: swatch.symbol,
@@ -88,6 +106,10 @@ function cloneSwatch(swatch) {
   if (pickerSettings) {
     cloned.pickerSettings = pickerSettings;
   }
+  const metadata = cloneColorMetadata(swatch.metadata);
+  if (metadata) {
+    cloned.metadata = metadata;
+  }
   return cloned;
 }
 
@@ -244,6 +266,7 @@ export function normalizePaletteSwatchInput(input = {}, options = {}) {
   const name = normalizeText(source.name);
   const tags = normalizeTags(source.tags);
   const pickerSettings = clonePickerSettings(source.pickerSettings);
+  const metadata = cloneColorMetadata(source.metadata);
 
   const swatch = {
     symbol,
@@ -255,6 +278,16 @@ export function normalizePaletteSwatchInput(input = {}, options = {}) {
   if (pickerSettings) {
     swatch.pickerSettings = pickerSettings;
   }
+  if (metadata) {
+    swatch.metadata = {
+      ...metadata,
+      hex,
+      name,
+      pickerSettings: pickerSettings || metadata.pickerSettings,
+      source: normalizeSource(source.source || options.source),
+      tags: [...tags]
+    };
+  }
   return swatch;
 }
 
@@ -690,6 +723,7 @@ export function createProjectWorkspacePaletteRepository(options = {}) {
       .filter((row) => row.projectId === projectId)
       .map((row) => ({
         hex: row.hex,
+        metadata: cloneColorMetadata(row.metadata) || undefined,
         name: row.name,
         pickerSettings: clonePickerSettings(row.pickerSettings) || undefined,
         source: row.source,
@@ -720,6 +754,7 @@ export function createProjectWorkspacePaletteRepository(options = {}) {
         }, index),
         hex: swatch.hex,
         id: `${projectId}-palette-color-${index + 1}`,
+        metadata: cloneColorMetadata(swatch.metadata) || undefined,
         name: swatch.name,
         pickerSettings: clonePickerSettings(swatch.pickerSettings) || undefined,
         projectId,