Polish Palette swatches and promote fullscreen Tool Center accordion behavior - PR_26156_175-palette-swatch-harmony-and-tool-center-flex

Author: ToolboxAid

assets/theme-v2/css/accordion.css

@@ -180,3 +180,25 @@ body.tool-focus-mode .accordion-scroll-body>.scroll-region {
   min-height: var(--space-0);
   overflow: auto
 }
+
+body.tool-focus-mode .tool-center-panel>details.vertical-accordion {
+  flex: 0 0 auto;
+  min-height: var(--space-0)
+}
+
+body.tool-focus-mode .tool-center-panel>details.vertical-accordion[open] {
+  flex: 1 1 var(--space-0);
+  min-height: var(--space-0);
+  position: relative
+}
+
+body.tool-focus-mode .tool-center-panel>details.vertical-accordion[open]>summary {
+  min-block-size: var(--space-52);
+  min-height: var(--space-0)
+}
+
+body.tool-focus-mode .tool-center-panel>details.vertical-accordion[open]>.accordion-body {
+  position: absolute;
+  inset: var(--space-52) var(--space-0) var(--space-0);
+  overflow: auto
+}

assets/theme-v2/css/layout.css

@@ -232,7 +232,8 @@ body.tool-focus-mode .tool-center-panel {
   overflow: auto
 }
 
-body.tool-focus-mode .tool-center-panel--scroll-contained {
+body.tool-focus-mode .tool-center-panel:has(>.accordion-fill-stack),
+body.tool-focus-mode .tool-center-panel:has(>details.vertical-accordion) {
   display: flex;
   flex-direction: column;
   height: 100%;

assets/theme-v2/css/panels.css

@@ -235,6 +235,17 @@
   max-width: var(--tool-center-copy-max)
 }
 
+body.tool-focus-mode .tool-center-panel:has(>details.vertical-accordion)>img {
+  width: auto;
+  max-width: min(var(--tool-center-image-max), 75%);
+  max-height: var(--space-78);
+  margin: var(--space-0) auto var(--space-10)
+}
+
+body.tool-focus-mode .tool-center-panel:has(>details.vertical-accordion)>p {
+  margin-block: var(--space-0) var(--space-10)
+}
+
 .tool-display-mode {
   margin: var(--space-0) var(--space-0) var(--space-12);
   position: relative;

docs_build/dev/reports/palette-swatch-harmony-and-tool-center-flex-report.md

@@ -0,0 +1,61 @@
+# PR_26156_175 Palette Swatch Harmony and Tool Center Flex Report
+
+## Result
+PASS
+
+## Summary
+- Promoted fullscreen Tool Center accordion height behavior beyond Palette-only markup.
+- Removed Palette Colors selected-summary symbols so the visible summary reads as the swatch name plus the existing `Selected` label.
+- Stopped pinned/copied source and harmony colors from inheriting source metadata tags into user Palette Colors.
+- Removed Harmony `Add Selected` and made harmony swatches use the same red/green pin behavior as other swatches.
+
+## Theme V2 Gap
+PR_26156_174 added reusable fill classes but Palette still opted into the center fullscreen containment directly. Theme V2 did not yet have a reusable Tool Center fullscreen pattern that automatically contains center accordion stacks, supports direct center accordions, and keeps accordion body scrolling separate from headers.
+
+Reusable Theme V2 behavior was added in:
+- `layout.css`: Tool Center panels with an accordion fill stack or direct center accordions become scroll-contained only in fullscreen.
+- `accordion.css`: Direct Tool Center accordions flex-share fullscreen space and scroll only their accordion body.
+- `panels.css`: Direct-accordion Tool Center intro media/copy compacts only in fullscreen so the accordion stack has usable vertical space.
+
+## Palette Behavior
+- Selected summary now shows only the selected swatch name, for example `Black` in the value cell beside the `Selected` label.
+- Source swatch tags remain visible as source metadata, but pinned source colors enter Palette Colors with empty user tags.
+- Harmony-generated colors enter Palette Colors with empty user tags.
+- Harmony swatches show the same pin dot as source and Palette Colors swatches.
+- Clicking an unpinned harmony swatch adds it to Palette Colors and turns the dot green.
+- Clicking a pinned harmony swatch removes that color from Palette Colors and returns the dot to red.
+- Harmony Add All still adds remaining unpinned harmony colors and skips duplicates.
+
+## Validation
+- `node --check toolbox/colors/colors.js`
+  - PASS
+- `node --check toolbox/colors/palette-workspace-repository.js`
+  - PASS
+- `node --check tests/playwright/tools/PaletteToolMockRepository.spec.mjs`
+  - PASS
+- `node --check tests/playwright/tools/ToolCenterFullscreenAccordion.spec.mjs`
+  - PASS
+- `rg "style=|<style|onclick|onchange|oninput|onsubmit" toolbox/colors/index.html toolbox/colors/colors.js toolbox/colors/palette-workspace-repository.js assets/theme-v2/css/layout.css assets/theme-v2/css/accordion.css assets/theme-v2/css/panels.css tests/playwright/tools/PaletteToolMockRepository.spec.mjs tests/playwright/tools/ToolCenterFullscreenAccordion.spec.mjs`
+  - PASS, no matches
+- `npx playwright test tests/playwright/tools/ToolCenterFullscreenAccordion.spec.mjs --project=playwright --workers=1 --reporter=list`
+  - PASS, 1 test
+- `npx playwright test tests/playwright/tools/PaletteToolMockRepository.spec.mjs --project=playwright --workers=1 --reporter=list`
+  - PASS, 3 tests
+- `npm run test:playwright:static`
+  - PASS
+
+## Verification Coverage
+- Fullscreen Palette accordions still share available center height and keep controls visible.
+- Fullscreen Publish Tool Center direct accordions share available height and expand when the other accordion collapses.
+- Only accordion body/swatch content scrolls in the tested fullscreen accordion layouts.
+- Palette selected summary omits the swatch symbol.
+- Source-pinned user Palette Colors do not inherit source tags.
+- Harmony-pinned user Palette Colors do not inherit harmony/source tags.
+- Harmony swatches use red/green pinned state and click-to-add/click-to-remove behavior.
+- Harmony Add All skips duplicates.
+
+## Notes
+- A broader exploratory run of `tests/playwright/tools/ToolDisplayModeNavigation.spec.mjs` exposed existing identity-row copy expectation drift unrelated to this PR. The focused shared Tool Center fullscreen spec was added and passed as the targeted validation lane.
+
+## Skipped
+- Full samples smoke was not run, per BUILD instruction.

docs_build/dev/reports/playwright_v8_coverage_report.txt

@@ -17,20 +17,23 @@ Exercised tool entry points detected:
 (83%) Theme V2 Shared JS - exercised 2 runtime JS files
 
 Changed runtime JS files covered:
-(87%) toolbox/colors/palette-workspace-repository.js - executed lines 1118/1118; executed functions 110/127
+(87%) toolbox/colors/palette-workspace-repository.js - executed lines 1150/1150; executed functions 111/128
+(95%) toolbox/colors/colors.js - executed lines 734/734; executed functions 73/77
 
 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
 (87%) assets/theme-v2/js/tool-display-mode.js - executed lines 201/201; executed functions 13/15
-(87%) toolbox/colors/palette-workspace-repository.js - executed lines 1118/1118; executed functions 110/127
-(95%) toolbox/colors/colors.js - executed lines 745/745; executed functions 74/78
+(87%) toolbox/colors/palette-workspace-repository.js - executed lines 1150/1150; executed functions 111/128
+(95%) toolbox/colors/colors.js - executed lines 734/734; executed functions 73/77
 (100%) toolbox/colors/palette-source-mock-db.js - executed lines 927/927; executed functions 6/6
 
 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
+(0%) tests/playwright/tools/ToolDisplayModeNavigation.spec.mjs - changed JS file not collected as browser runtime coverage
 (87%) toolbox/colors/palette-workspace-repository.js - changed JS file with browser V8 coverage
+(95%) toolbox/colors/colors.js - changed JS file with browser V8 coverage

docs_build/dev/reports/testing_lane_execution_report.md

@@ -1,13 +1,21 @@
-# PR_26156_174 Testing Lane Execution Report
+# PR_26156_175 Testing Lane Execution Report
 
 ## Result
 PASS
 
 ## Commands Run
+- `node --check toolbox/colors/colors.js`
+  - PASS
+- `node --check toolbox/colors/palette-workspace-repository.js`
+  - PASS
 - `node --check tests/playwright/tools/PaletteToolMockRepository.spec.mjs`
   - PASS
-- `rg "style=|<style|onclick|onchange|oninput|onsubmit" toolbox/colors/index.html assets/theme-v2/css/accordion.css assets/theme-v2/css/layout.css tests/playwright/tools/PaletteToolMockRepository.spec.mjs`
+- `node --check tests/playwright/tools/ToolCenterFullscreenAccordion.spec.mjs`
+  - PASS
+- `rg "style=|<style|onclick|onchange|oninput|onsubmit" toolbox/colors/index.html toolbox/colors/colors.js toolbox/colors/palette-workspace-repository.js assets/theme-v2/css/layout.css assets/theme-v2/css/accordion.css assets/theme-v2/css/panels.css tests/playwright/tools/PaletteToolMockRepository.spec.mjs tests/playwright/tools/ToolCenterFullscreenAccordion.spec.mjs`
   - PASS, no matches
+- `npx playwright test tests/playwright/tools/ToolCenterFullscreenAccordion.spec.mjs --project=playwright --workers=1 --reporter=list`
+  - PASS, 1 test
 - `npx playwright test tests/playwright/tools/PaletteToolMockRepository.spec.mjs --project=playwright --workers=1 --reporter=list`
   - PASS, 3 tests
 - `npm run test:playwright:static`
@@ -16,29 +24,37 @@ PASS
   - PASS
 
 ## Required Lanes
-- Targeted Palette Tool fullscreen UI lane: PASS.
+- Targeted shared Tool Center fullscreen UI lane: PASS.
+- Targeted Palette Tool runtime/UI lane: PASS.
 - Changed-file/static validation: PASS.
 
 ## Playwright Coverage
-- Fullscreen center panel overflow is hidden so page-level center scrolling is disabled: PASS.
-- Active Project Palette and Source Palette Browser split fullscreen vertical space evenly when both are expanded: PASS.
-- Collapsing Source Palette Browser expands Active Project Palette into the remaining available space: PASS.
-- Collapsing Active Project Palette expands Source Palette Browser into the remaining available space: PASS.
-- Active Project Palette swatch wrapper scrolls while its summary and control row stay fixed: PASS.
-- Source Palette Browser swatch wrapper scrolls while its summary and filter/control rows stay fixed: PASS.
-- Source Palette Browser DB-backed source loading, Pin All, pin, sort, size, and search behavior remain covered: PASS.
-- Active Project Palette selected swatch, remove/unpin, sort, size, and tag behavior remain covered: PASS.
+- Palette fullscreen center panel overflow remains hidden so page-level center scrolling is disabled: PASS.
+- Palette Active Project Palette and Source Palette Browser split fullscreen vertical space evenly when both are expanded: PASS.
+- Palette swatch wrappers scroll while summaries and control rows stay fixed: PASS.
+- Publish Tool Center direct accordions split fullscreen vertical space evenly when both are expanded: PASS.
+- Publish Tool Center direct accordion body scrolls while summary remains fixed: PASS.
+- Collapsing one Publish Tool Center accordion expands the remaining open accordion: PASS.
+- Palette selected summary omits the swatch symbol: PASS.
+- Source-pinned user Palette Colors start with empty tags: PASS.
+- Harmony-pinned user Palette Colors start with empty tags: PASS.
+- Harmony swatches use red/green pin state and click-to-add/click-to-remove behavior: PASS.
+- Harmony Add All skips duplicates: PASS.
 
 ## Impacted Lane
 - Palette Tool runtime/UI lane.
-- Theme V2 static validation for reusable fullscreen accordion layout classes.
+- Shared Tool Center fullscreen UI lane.
+- Theme V2 static validation for reusable fullscreen accordion and Tool Center panel layout classes.
 
 ## Skipped Lanes
 - Full samples smoke was skipped by BUILD instruction.
-- Broader tool lanes were skipped because changes are confined to Palette Tool fullscreen layout, reusable Theme V2 layout CSS, and the targeted Palette Tool spec.
+- Broader tool lanes were skipped because changes are confined to Palette Tool swatch/harmony behavior, reusable Theme V2 Tool Center fullscreen layout, and targeted specs for those surfaces.
 
 ## Not Run
 - Full samples smoke was not run, per BUILD instruction.
 
+## Notes
+- A broader exploratory run of `tests/playwright/tools/ToolDisplayModeNavigation.spec.mjs` failed existing identity-row copy expectations unrelated to this PR. The required shared Tool Center fullscreen lane was covered by `tests/playwright/tools/ToolCenterFullscreenAccordion.spec.mjs`, which passed.
+
 ## Coverage Artifact
 - Final V8 coverage artifact: `docs_build/dev/reports/playwright_v8_coverage_report.txt`.