Restore Colors swatch selection pinning sorting and tags - PR_26159_025-colors-swatch-selection-restore

Author: ToolboxAid

assets/theme-v2/css/forms.css

@@ -216,24 +216,41 @@ input[type="color"][data-palette-swatch-size="large"] {
 .palette-generator-preview {
   display: flex;
   flex-direction: column;
-  gap: var(--space-3);
+  gap: var(--space-0);
   width: 100%;
   min-height: calc(var(--space-78) * 4)
 }
 
 .palette-generator-preview-row {
   display: flex;
   flex: 1 1 0;
-  gap: var(--space-3);
+  gap: var(--space-0);
   min-height: var(--space-0);
   width: 100%
 }
 
 .palette-generator-preview-swatch {
+  appearance: none;
+  box-sizing: border-box;
+  position: relative;
   display: flex;
   flex: 1 1 0;
+  align-items: stretch;
+  justify-content: stretch;
+  margin: var(--space-0);
   min-width: var(--space-0);
-  min-height: var(--space-0)
+  min-height: var(--space-0);
+  padding: var(--space-0);
+  border: 0;
+  border-radius: var(--space-0);
+  background: var(--transparent);
+  overflow: hidden;
+  cursor: pointer
+}
+
+.palette-generator-preview-swatch:disabled {
+  cursor: not-allowed;
+  opacity: 0.5
 }
 
 .palette-generator-preview-swatch input[type="color"] {
@@ -244,7 +261,7 @@ input[type="color"][data-palette-swatch-size="large"] {
   min-height: var(--space-0);
   padding: var(--space-0);
   border: var(--border-width-sm) solid var(--line);
-  border-radius: var(--radius-xs);
+  border-radius: var(--space-0);
   background: var(--transparent);
   overflow: hidden;
   pointer-events: none
@@ -256,27 +273,31 @@ input[type="color"][data-palette-swatch-size="large"] {
 
 .palette-generator-preview-swatch input[type="color"]::-webkit-color-swatch {
   border: var(--border-width-sm) solid var(--line);
-  border-radius: var(--radius-xs)
+  border-radius: var(--space-0)
 }
 
 .palette-generator-preview-swatch input[type="color"]::-moz-color-swatch {
   border: var(--border-width-sm) solid var(--line);
-  border-radius: var(--radius-xs)
+  border-radius: var(--space-0)
 }
 
 .palette-swatch-tile:hover,
-.palette-swatch-tile:focus-visible {
+.palette-swatch-tile:focus-visible,
+.palette-generator-preview-swatch:hover,
+.palette-generator-preview-swatch:focus-visible {
   box-shadow: 0 0 0 var(--space-3) var(--gold-soft), 0 0 var(--space-18) var(--orange-shadow-color);
   transform: translateY(-1px);
   z-index: var(--z-index-sm)
 }
 
-.palette-swatch-tile:focus-visible {
+.palette-swatch-tile:focus-visible,
+.palette-generator-preview-swatch:focus-visible {
   outline: var(--border-width-sm) solid var(--gold);
   outline-offset: var(--space-3)
 }
 
-.palette-swatch-tile[data-palette-selected="true"] {
+.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: var(--space-3);
   box-shadow: 0 0 0 var(--space-3) var(--gold-soft), 0 0 var(--space-18) var(--orange-shadow-color);
@@ -297,7 +318,8 @@ input[type="color"][data-palette-swatch-size="large"] {
   pointer-events: auto
 }
 
-.palette-swatch-tile[data-palette-pinned="true"] .palette-swatch-pin {
+.palette-swatch-tile[data-palette-pinned="true"] .palette-swatch-pin,
+.palette-generator-preview-swatch[data-palette-pinned="true"] .palette-swatch-pin {
   background: var(--green)
 }
 

docs_build/dev/reports/colors-swatch-selection-restore-report.md

@@ -0,0 +1,53 @@
+# PR_26159_025 Colors Swatch Selection Restore Report
+
+## Summary
+
+Restored generated Colors grid swatch selection, visible pinned state, tag filtering, sorting coverage, and explicit Generate logging while preserving the PR_26159_024 control ownership layout and toolbox visibility behavior.
+
+Playwright impacted: Yes.
+
+## Changed Files
+
+- `assets/theme-v2/css/forms.css`
+- `toolbox/colors/colors.js`
+- `tests/playwright/tools/PaletteToolMockRepository.spec.mjs`
+
+## Requirement Checklist
+
+| Requirement | Status | Evidence |
+| --- | --- | --- |
+| Read `docs_build/dev/PROJECT_INSTRUCTIONS.md` first | PASS | Read before implementation. |
+| Use PR_26159_024 as base context | PASS | Work preserved the PR_024 curated selector layout and toolbox registration behavior. |
+| Grid swatch click adds swatch to Selected Swatches | PASS | `toolbox/colors/colors.js` adds generated swatch click handling through `repository.pinSourceSwatch`; Playwright test `Palette Tool generated grid swatches can be selected, pinned, and refreshed` verifies count and row attributes. |
+| Selected swatches remain visible | PASS | Same Playwright test verifies selected generated swatch remains visible before and after control changes and Generate. |
+| Duplicate behavior matches prior tool behavior | PASS | Generated selection uses existing repository `pinSourceSwatch` behavior, preserving the repository duplicate check path instead of adding duplicate-specific browser logic. |
+| Restore Pin Mode | PASS | Generated grid buttons show pin indicators and `data-palette-pinned`; Playwright verifies pinned swatch persistence after Theme Collection, Palette Type, Variant, Colors, Steps, Contrast, Saturation, and Hue Shift changes. |
+| Pin state visible and actionable | PASS | Generated swatches are actionable buttons with `aria-pressed`, title text, selected/pinned data attributes, and the existing pin indicator. |
+| Remove spacing between generated grid cells | PASS | `assets/theme-v2/css/forms.css` sets preview gaps, row gaps, swatch padding, margin, and radius to Theme V2 zero tokens; Playwright verifies computed row/column gaps and adjacent cell spacing. |
+| Restore sorting controls for Hue, Sat, Brit, Name, Tag in both directions | PASS | Existing sort controls are covered by new `expectSortToggle` assertions in `PaletteToolMockRepository.spec.mjs`. |
+| Restore tag checkbox behavior | PASS | `renderTags` now renders tag checkboxes; selected tag filters affect visible Selected Swatches. Playwright verifies checked tags filter rows visibly. |
+| Generate explicitly refreshes from current settings and logs status | PASS | Generate now writes `Generated palette grid: <collection> / <type> / <variant>, <colors> colors x <steps> steps.` to status/log; Playwright verifies log output. |
+| Preserve Defined Swatch Selector ownership | PASS | No control ownership moved; Theme Collection, Palette Type, Variant remain in Defined Swatch Selector. |
+| Preserve Swatch Type / Theme ownership | PASS | Colors, Steps, Contrast, Saturation, Hue Shift, Generate, Reset remain in Swatch Type / Theme. |
+| Admin toolbox list remains unfiltered | PASS | `ToolboxRoutePages.spec.mjs` passed and verifies Admin sees registered list tools including Colors. |
+| Non-admin filtering remains unchanged | PASS | `ToolboxRoutePages.spec.mjs` passed and verifies creator filtering remains active. |
+| Colors remains visible on `toolbox/index.html` | PASS | `ToolboxRoutePages.spec.mjs` passed and verifies the Colors toolbox card/link. |
+| No console errors | PASS | Colors and toolbox Playwright lanes use page failure capture; both passed. |
+
+## Validation
+
+| Lane | Result | Evidence |
+| --- | --- | --- |
+| Changed JS syntax | PASS | `node --check toolbox/colors/colors.js`; `node --check tests/playwright/tools/PaletteToolMockRepository.spec.mjs`. |
+| Changed-file/static validation | PASS | `git diff --check`. |
+| Targeted Colors runtime/UI lane | PASS | `npx playwright test tests/playwright/tools/PaletteToolMockRepository.spec.mjs --timeout=180000` passed 6/6. |
+| Toolbox/page validation | PASS | `npx playwright test tests/playwright/tools/ToolboxRoutePages.spec.mjs --timeout=180000` passed 2/2. |
+
+## Skipped Lanes
+
+- Full samples validation: skipped by request; this PR only touched the Colors tool UI/runtime, reusable Theme V2 form styling for palette swatches, and targeted Playwright tests.
+
+## Notes
+
+- The generated grid selection path intentionally reuses the existing repository pin/add path so prior duplicate and selected-swatch behavior stays centralized.
+- During validation, the new no-spacing assertion caught an accidental selected-state comparison for unpinned generated swatches. The selection predicate now only marks generated swatches selected when a pinned swatch exists and matches the selected project swatch.

tests/playwright/tools/PaletteToolMockRepository.spec.mjs

@@ -148,6 +148,23 @@ async function currentPreviewHexes(page, row) {
   ));
 }
 
+async function visiblePaletteNames(page) {
+  return page.locator("[data-palette-user-list] [data-palette-swatch-row]").evaluateAll((swatches) => (
+    swatches.map((swatch) => swatch.dataset.paletteSwatchName)
+  ));
+}
+
+async function expectSortToggle(page, key, label) {
+  const button = page.locator(`[data-palette-user-sort] [data-palette-sort-key='${key}']`);
+  await button.click();
+  await expect(button).toHaveText(`${label} ^`);
+  const ascending = await visiblePaletteNames(page);
+  await button.click();
+  await expect(button).toHaveText(`${label} v`);
+  const descending = await visiblePaletteNames(page);
+  expect(ascending).toEqual([...descending].reverse());
+}
+
 test("Palette repository owns project swatches and protects invalid payloads", async () => {
   const repository = createProjectWorkspacePaletteRepository({ sourcePaletteRows });
   const baseline = repository.getSnapshot();
@@ -398,6 +415,73 @@ test("Palette Tool renders curated swatch selector controls and live preview", a
 
     await page.locator("[data-palette-generator-generate]").click();
     await expect(page.locator("[data-palette-generator-preview-status]")).toContainText("Computer / Amiga");
+    await expect(page.locator("[data-palette-log]")).toContainText("Generated palette grid: Computer / Amiga");
+
+    expectNoPageFailures(failures);
+  } finally {
+    await workspaceV2CoverageReporter.stop(page);
+    await failures.server.close();
+  }
+});
+
+test("Palette Tool generated grid swatches can be selected, pinned, and refreshed", async ({ page }) => {
+  test.setTimeout(120000);
+  const failures = await openRepoPage(page, "/toolbox/colors/index.html");
+
+  try {
+    const firstGenerated = page.locator("[data-palette-generator-swatch]").first();
+    await expect(firstGenerated).toHaveAttribute("data-palette-pinned", "false");
+    const generatedName = await firstGenerated.getAttribute("data-palette-generator-name");
+    const generatedSymbol = await firstGenerated.getAttribute("data-palette-generator-symbol");
+    const generatedHex = await firstGenerated.getAttribute("data-palette-generator-hex");
+
+    const gridSpacing = await page.locator("[data-palette-generator-preview]").evaluate((preview) => {
+      const firstRow = preview.querySelector("[data-palette-generator-preview-row]");
+      const cells = Array.from(firstRow.querySelectorAll("[data-palette-generator-swatch]")).slice(0, 2);
+      const leftBox = cells[0].getBoundingClientRect();
+      const rightBox = cells[1].getBoundingClientRect();
+      return {
+        columnGap: getComputedStyle(firstRow).columnGap,
+        previewGap: getComputedStyle(preview).rowGap,
+        xGap: Math.round(rightBox.left - leftBox.right)
+      };
+    });
+    expect(gridSpacing.previewGap).toBe("0px");
+    expect(gridSpacing.columnGap).toBe("0px");
+    expect(Math.abs(gridSpacing.xGap)).toBeLessThanOrEqual(1);
+
+    await firstGenerated.click();
+    await expect(page.locator("[data-palette-count]")).toHaveText("1");
+    await expect(page.locator(`[data-palette-swatch-row='${generatedSymbol}']`)).toHaveAttribute("data-palette-swatch-name", generatedName || "");
+    await expect(page.locator(`[data-palette-swatch-row='${generatedSymbol}']`)).toHaveAttribute("data-palette-swatch-hex", generatedHex || "");
+    await expect(page.locator(`[data-palette-swatch-row='${generatedSymbol}']`)).toHaveAttribute("data-palette-selected", "true");
+    await expect(page.locator("[data-palette-generator-swatch]").first()).toHaveAttribute("data-palette-pinned", "true");
+    await expect(page.locator("[data-palette-generator-swatch]").first().locator("[data-palette-pin-indicator]")).toHaveCount(1);
+    await expect(page.locator("[data-palette-log]")).toContainText("Pinned generated swatch");
+
+    await page.locator("[data-palette-theme-collection]").selectOption("Sci-Fi");
+    await page.locator("[data-palette-generator-type]").selectOption("Cyberpunk");
+    await page.locator("[data-palette-generator-variant]").selectOption("High Contrast");
+    await page.locator("[data-palette-generator-colors]").selectOption("12");
+    await page.locator("[data-palette-generator-steps]").selectOption("16");
+    await page.locator("[data-palette-generator-contrast]").evaluate((control) => {
+      control.value = "72";
+      control.dispatchEvent(new Event("input", { bubbles: true }));
+    });
+    await page.locator("[data-palette-generator-saturation]").evaluate((control) => {
+      control.value = "58";
+      control.dispatchEvent(new Event("input", { bubbles: true }));
+    });
+    await page.locator("[data-palette-generator-hue-shift]").evaluate((control) => {
+      control.value = "-35";
+      control.dispatchEvent(new Event("input", { bubbles: true }));
+    });
+    await expect(page.locator(`[data-palette-swatch-row='${generatedSymbol}']`)).toHaveAttribute("data-palette-swatch-name", generatedName || "");
+    await expect(page.locator("[data-palette-count]")).toHaveText("1");
+
+    await page.locator("[data-palette-generator-generate]").click();
+    await expect(page.locator("[data-palette-log]")).toContainText("Generated palette grid: Sci-Fi / Cyberpunk / High Contrast, 12 colors x 16 steps.");
+    await expect(page.locator(`[data-palette-swatch-row='${generatedSymbol}']`)).toHaveAttribute("data-palette-swatch-name", generatedName || "");
 
     expectNoPageFailures(failures);
   } finally {
@@ -468,6 +552,28 @@ test("Palette Tool batch tags checked project palette swatches", async ({ page }
     await expect(brownTile).toHaveAttribute("data-palette-swatch-tags", "batch");
     await expect(blueTile).toHaveAttribute("data-palette-swatch-tags", "");
 
+    await expectSortToggle(page, "hue", "Hue");
+    await expectSortToggle(page, "saturation", "Sat");
+    await expectSortToggle(page, "brightness", "Brit");
+    await expectSortToggle(page, "name", "Name");
+    await expectSortToggle(page, "tag", "Tag");
+
+    const tagFilters = page.locator("[data-palette-tag-filter]");
+    const tagFilterItems = page.locator("[data-palette-tags-list] li");
+    await expect(tagFilters).toHaveCount(3);
+    await expect(tagFilterItems).toHaveText(["afterclear", "batch", "solo"]);
+    await page.locator("[data-palette-tag-filter='batch']").check();
+    await expect(page.locator("[data-palette-user-list] [data-palette-swatch-name='Anchor']")).toHaveCount(1);
+    await expect(page.locator("[data-palette-user-list] [data-palette-swatch-name='Brownstone']")).toHaveCount(1);
+    await expect(page.locator("[data-palette-user-list] [data-palette-swatch-name='Bluegate']")).toHaveCount(0);
+    await page.locator("[data-palette-tag-filter='solo']").check();
+    await expect(page.locator("[data-palette-user-list] [data-palette-swatch-name='Anchor']")).toHaveCount(1);
+    await expect(page.locator("[data-palette-user-list] [data-palette-swatch-name='Brownstone']")).toHaveCount(0);
+    await expect(page.locator("[data-palette-user-list] [data-palette-swatch-name='Bluegate']")).toHaveCount(0);
+    await page.locator("[data-palette-tag-filter='batch']").uncheck();
+    await page.locator("[data-palette-tag-filter='solo']").uncheck();
+    await expect(page.locator("[data-palette-user-list] [data-palette-swatch-row]")).toHaveCount(3);
+
     expectNoPageFailures(failures);
   } finally {
     await workspaceV2CoverageReporter.stop(page);