Recover input density work and add Palette checked-tag batch behavior - PR_26156_183-palette-checkbox-tag-batch-recovery

Author: ToolboxAid

assets/theme-v2/css/forms.css

@@ -83,6 +83,14 @@ select {
   padding: var(--space-12)
 }
 
+.tool-form-control {
+  box-sizing: border-box;
+  height: var(--space-28);
+  min-height: var(--space-28);
+  padding: var(--space-3) var(--space-8);
+  line-height: var(--line-height-sm)
+}
+
 .field-value--readable-disabled:disabled {
   color: var(--text);
   -webkit-text-fill-color: var(--text);
@@ -169,6 +177,23 @@ input[type="color"][data-palette-swatch-size="large"] {
   align-items: flex-start
 }
 
+.palette-swatch-item {
+  position: relative;
+  display: inline-flex
+}
+
+.palette-swatch-check {
+  position: absolute;
+  top: calc(var(--space-8) * -1);
+  left: calc(var(--space-8) * -1);
+  z-index: var(--z-index-md);
+  width: var(--space-14);
+  height: var(--space-14);
+  margin: var(--space-0);
+  background: var(--panel);
+  cursor: pointer
+}
+
 .palette-swatch-tile {
   position: relative;
   display: inline-flex;

docs_build/dev/reports/palette-checkbox-tag-batch-recovery-report.md

@@ -0,0 +1,47 @@
+# PR_26156_183 Palette Checkbox Tag Batch Recovery Report
+
+## Purpose
+Recover from incomplete PR_26156_182 work, keep only valid Palette input-density changes, and add checked-swatch batch tagging to the Active Project Palette.
+
+## Recovery Decisions
+- Kept valid PR_26156_182 input-density slice:
+  - `assets/theme-v2/css/forms.css` reusable `.tool-form-control`.
+  - Palette-only `tool-form-control` usage in `toolbox/colors/index.html`.
+  - Palette-only compact form-control assertions in `tests/playwright/tools/PaletteToolMockRepository.spec.mjs`.
+  - Shared test helper `tests/helpers/toolFormControlAssertions.mjs`.
+- Reverted unrelated failed-run spillover:
+  - `toolbox/assets/index.html`
+  - `toolbox/game-design/index.html`
+  - `toolbox/project-workspace/index.html`
+  - `tests/playwright/tools/AssetToolMockRepository.spec.mjs`
+  - `tests/playwright/tools/GameDesignMockRepository.spec.mjs`
+  - `tests/playwright/tools/ProjectWorkspaceMockRepository.spec.mjs`
+  - stale failed-run coverage guardrail output
+
+## Implementation
+- Renamed the left-panel tag editor summary from `Swatch Editor` to `Project Palette Tags`.
+- Added a compact `Clear Checked` button at the bottom of Project Palette Tags.
+- Added a checkbox control to every Active Project Palette swatch.
+- Added `addTagToSwatches` in the Palette repository to append one normalized tag to checked swatches while preserving current selection.
+- Updated tag entry behavior:
+  - checked swatches present: add tag to checked swatches.
+  - no checked swatches: add tag only to selected swatch.
+  - empty tag input: no action.
+- Added Theme V2 Palette swatch checkbox styling under `assets/theme-v2/css/forms.css`; no page-local CSS, tool-local CSS, inline styles, `<style>` blocks, or inline event handlers were added.
+
+## Validation
+- Targeted Palette Tool runtime/UI lane: PASS.
+- Checked swatches receive new tags: PASS.
+- Clear Checked clears checked swatches: PASS.
+- Unchecked swatches are not modified: PASS.
+- Selected-only fallback works when none are checked: PASS.
+- No auto-add before Enter: PASS.
+- Changed-file/static validation: PASS.
+- Recovery removed unrelated failed-run edits: PASS.
+- Full samples smoke: SKIP by BUILD instruction.
+
+## Required Artifacts
+- `docs_build/dev/reports/testing_lane_execution_report.md`
+- `docs_build/dev/reports/playwright_v8_coverage_report.txt`
+- `docs_build/dev/reports/codex_review.diff`
+- `docs_build/dev/reports/codex_changed_files.txt`

docs_build/dev/reports/playwright_v8_coverage_report.txt

@@ -12,27 +12,28 @@ 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:
-(87%) Toolbox Index - exercised 5 runtime JS files
+(88%) Toolbox Index - exercised 5 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:
-(89%) toolbox/colors/palette-workspace-repository.js - executed lines 1244/1244; executed functions 125/140
-(96%) toolbox/colors/colors.js - executed lines 831/831; executed functions 82/85
+(90%) toolbox/colors/palette-workspace-repository.js - executed lines 1288/1288; executed functions 129/144
+(97%) toolbox/colors/colors.js - executed lines 883/883; executed functions 88/91
 
 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
-(89%) toolbox/colors/palette-workspace-repository.js - executed lines 1244/1244; executed functions 125/140
-(96%) toolbox/colors/colors.js - executed lines 831/831; executed functions 82/85
+(90%) toolbox/colors/palette-workspace-repository.js - executed lines 1288/1288; executed functions 129/144
+(97%) toolbox/colors/colors.js - executed lines 883/883; executed functions 88/91
 (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/helpers/toolFormControlAssertions.mjs - 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
-(89%) toolbox/colors/palette-workspace-repository.js - changed JS file with browser V8 coverage
-(96%) toolbox/colors/colors.js - changed JS file with browser V8 coverage
+(90%) toolbox/colors/palette-workspace-repository.js - changed JS file with browser V8 coverage
+(97%) toolbox/colors/colors.js - changed JS file with browser V8 coverage

docs_build/dev/reports/testing_lane_execution_report.md

@@ -1,4 +1,4 @@
-# PR_26156_181 Testing Lane Execution Report
+# PR_26156_183 Testing Lane Execution Report
 
 ## Result
 PASS
@@ -10,43 +10,45 @@ PASS
   - PASS
 - `node --check tests/playwright/tools/PaletteToolMockRepository.spec.mjs`
   - PASS
-- `rg -n "DEFAULT_SOURCE_PALETTES|style=|<style|onclick|onchange|oninput|onsubmit" toolbox/colors/index.html toolbox/colors/colors.js toolbox/colors/palette-workspace-repository.js tests/playwright/tools/PaletteToolMockRepository.spec.mjs assets/theme-v2/css/forms.css`
-  - PASS, no matches
-- `npx playwright test tests/playwright/tools/PaletteToolMockRepository.spec.mjs --project=playwright --workers=1 --reporter=list`
-  - PASS, 3 tests
+- `node --check tests/helpers/toolFormControlAssertions.mjs`
+  - PASS
+- `node node_modules/@playwright/test/cli.js test tests/playwright/tools/PaletteToolMockRepository.spec.mjs --project=playwright --workers=1 --reporter=list`
+  - PASS, 4 tests
 - `npm run test:playwright:static`
   - PASS
-- `git diff --check -- assets/theme-v2/css/forms.css toolbox/colors/index.html toolbox/colors/colors.js toolbox/colors/palette-workspace-repository.js tests/playwright/tools/PaletteToolMockRepository.spec.mjs`
+- `Select-String -Path toolbox/colors/index.html -Pattern '<style\\b|\\s(onclick|onchange|oninput|onsubmit|onkeydown|onkeyup|onload)=' -CaseSensitive`
+  - PASS, no matches
+- `Select-String -Path toolbox/colors/index.html -Pattern '<script(?![^>]*\\bsrc=)' -CaseSensitive`
+  - PASS, no inline script blocks
+- `Select-String -Path toolbox/colors/index.html -Pattern '\\sstyle=' -CaseSensitive`
+  - PASS, no inline styles
+- `git diff -- toolbox/assets/index.html toolbox/game-design/index.html toolbox/project-workspace/index.html tests/playwright/tools/AssetToolMockRepository.spec.mjs tests/playwright/tools/GameDesignMockRepository.spec.mjs tests/playwright/tools/ProjectWorkspaceMockRepository.spec.mjs`
+  - PASS, no remaining unrelated failed-run diffs
+- `git diff --check -- assets/theme-v2/css/forms.css toolbox/colors/index.html toolbox/colors/colors.js toolbox/colors/palette-workspace-repository.js tests/playwright/tools/PaletteToolMockRepository.spec.mjs tests/helpers/toolFormControlAssertions.mjs docs_build/dev/reports/palette-checkbox-tag-batch-recovery-report.md docs_build/dev/reports/testing_lane_execution_report.md docs_build/dev/reports/playwright_v8_coverage_report.txt`
   - PASS with Git LF-to-CRLF warnings for touched files
 
-## Required Lanes
-- Targeted Palette Tool User Defined runtime/UI lane: PASS.
-- Changed-file/static validation: PASS.
-
-## Playwright Coverage
-- Add User Defined disabled after successful add: PASS.
-- Successful add keeps Symbol/Hex/Name visible: PASS.
-- Repeat-click duplicate add failure prevented by disabled Add state: PASS.
-- Add User Defined re-enables only for a valid unique new swatch: PASS.
-- Selecting a source-backed color clears User Defined fields: PASS.
-- Selecting a user-defined color populates User Defined fields: PASS.
-- Hex preview appears in the left column immediately after the Hex label: PASS.
-- Hex preview updates valid/invalid state: PASS.
-- Tooltip Source remains newline-separated in browser title text: PASS.
+## Runtime/UI Coverage
+- Project Palette Tags label replaces Swatch Editor: PASS.
+- Each Active Project Palette swatch renders a small upper-left checkbox: PASS.
+- Typing in the tag field does not auto-add tags before Enter: PASS.
+- With checked swatches, Enter adds the new tag to every checked swatch: PASS.
+- Unchecked swatches keep their existing tags unchanged: PASS.
+- Clear Checked clears all checked swatches and disables itself: PASS.
+- With no checked swatches, Enter falls back to the selected swatch only: PASS.
+- Existing Palette add/update/pin/harmony/fullscreen behavior remains covered by the targeted Palette spec: PASS.
 
 ## Impacted Lane
-- Palette Tool User Defined runtime/UI lane.
+- Targeted Palette Tool runtime/UI lane.
 - Changed-file/static validation lane.
 
 ## Skipped Lanes
-- Full samples smoke was skipped by BUILD instruction.
-- Broader tool lanes were skipped because behavior changes are confined to Palette Tool User Defined state and a reusable Theme V2 form utility exercised by the targeted Palette Tool spec.
-
-## Not Run
-- Full samples smoke was not run, per BUILD instruction.
+- Full samples smoke: SKIP by BUILD instruction.
+- Broader tool lanes: SKIP because PR_26156_183 changes are confined to Palette Tool runtime/UI, Palette repository tag behavior, Theme V2 Palette swatch styling, and Palette tests.
+- Engine lane: SKIP because no engine/core files changed.
 
 ## Notes
-- Static validation generated companion reports during the run; non-required generated companion report updates were restored to prior contents so the PR remains scoped to requested report artifacts.
+- The package script name `test:workspace-v2` remains legacy repo wording; this PR uses user-facing Project Palette Tags and Project Workspace naming in changed UI/report prose.
+- Static validation generated companion reports during execution. Non-required companion report updates were restored so the PR remains scoped to requested artifacts.
 
 ## Coverage Artifact
-- Final V8 coverage artifact: `docs_build/dev/reports/playwright_v8_coverage_report.txt`.
+- `docs_build/dev/reports/playwright_v8_coverage_report.txt`

tests/helpers/toolFormControlAssertions.mjs

@@ -0,0 +1,32 @@
+import { expect } from "@playwright/test";
+
+const COMPACT_TOOL_FORM_CONTROL_MAX_HEIGHT = 32;
+const COMPACT_TOOL_FORM_CONTROL_MIN_HEIGHT = 24;
+
+async function controlHeight(locator) {
+  return locator.evaluate((node) => node.getBoundingClientRect().height);
+}
+
+export async function expectCompactToolFormControl(locator) {
+  await expect(locator).toHaveClass(/tool-form-control/);
+  const height = await controlHeight(locator);
+  expect(height).toBeGreaterThanOrEqual(COMPACT_TOOL_FORM_CONTROL_MIN_HEIGHT);
+  expect(height).toBeLessThanOrEqual(COMPACT_TOOL_FORM_CONTROL_MAX_HEIGHT);
+  return height;
+}
+
+export async function expectCompactToolFormControls(page, selectors) {
+  const heights = [];
+  for (const selector of selectors) {
+    heights.push(await expectCompactToolFormControl(page.locator(selector)));
+  }
+  return heights;
+}
+
+export async function expectFilePickerRemainsDefault(fileInput, compactReference) {
+  await expect(fileInput).not.toHaveClass(/tool-form-control/);
+  const fileHeight = await controlHeight(fileInput);
+  const compactHeight = await controlHeight(compactReference);
+  expect(fileHeight).toBeGreaterThan(compactHeight + 4);
+  return fileHeight;
+}

tests/playwright/tools/PaletteToolMockRepository.spec.mjs

@@ -6,6 +6,7 @@ import {
 } from "../../../toolbox/colors/palette-workspace-repository.js";
 import { startRepoServer } from "../../helpers/playwrightRepoServer.mjs";
 import { clearPlaywrightStorage, installPlaywrightStorageIsolation } from "../../helpers/playwrightStorageIsolation.mjs";
+import { expectCompactToolFormControls } from "../../helpers/toolFormControlAssertions.mjs";
 import { workspaceV2CoverageReporter } from "../../helpers/workspaceV2CoverageReporter.mjs";
 
 const sourcePaletteRows = [
@@ -341,6 +342,13 @@ test("Palette repository owns active project swatches without mutating invalid p
   expect(repeatPinAllResult.message).toContain("0 pinned, 2 already pinned");
   expect(repository.listSwatches().filter((swatch) => swatch.source === "reference")).toHaveLength(sourceCountAfterPinAll);
   expect(repository.getSnapshot().selectedSwatch).toMatchObject({ name: "Reference Green", symbol: "G" });
+  const batchTagResult = repository.addTagToSwatches(["J", "R"], "batch");
+  expect(batchTagResult.ok).toBe(true);
+  expect(batchTagResult.message).toBe("Added tag batch to 2 checked swatches.");
+  expect(repository.findSwatch("J")).toMatchObject({ name: "Hero Updated", tags: ["primary", "batch"] });
+  expect(repository.findSwatch("R")).toMatchObject({ name: "Reference Red", tags: ["batch"] });
+  expect(repository.findSwatch("G")).toMatchObject({ name: "Reference Green", tags: [] });
+  expect(repository.getSnapshot().selectedSwatch).toMatchObject({ name: "Reference Green", symbol: "G" });
 
   const bulkPinRepository = createProjectWorkspacePaletteRepository({ sourcePaletteRows });
   const bulkSourceSwatches = bulkPinRepository.listSourceSwatches({ sourceId: "reference", sortKey: "hue" });
@@ -477,6 +485,20 @@ test("Palette Tool adds, updates, pins, validates, and shows project-owned detai
     await expect(page.locator("[data-palette-tags]")).toBeDisabled();
     await expect(page.locator("[data-palette-tags]")).toHaveValue("");
     await expect(page.locator("[data-palette-editor-form] input[placeholder], [data-palette-user-swatch-form] input[placeholder]")).toHaveCount(0);
+    await expectCompactToolFormControls(page, [
+      "[data-palette-selected-symbol]",
+      "[data-palette-selected-hex]",
+      "[data-palette-selected-name]",
+      "[data-palette-tags]",
+      "[data-palette-symbol]",
+      "[data-palette-hex]",
+      "[data-palette-name]",
+      "[data-palette-source-select]",
+      "[data-palette-source-search]",
+      "[data-palette-harmony-match]",
+      "[data-palette-harmony-scheme]"
+    ]);
+    await expect(page.locator("[data-palette-user-hex-preview]")).not.toHaveClass(/tool-form-control/);
     await expect(page.locator("[data-palette-editor-tags-input-row] th")).toHaveAttribute("rowspan", "2");
     const tagInputRowBox = await page.locator("[data-palette-editor-tags-input-row]").boundingBox();
     const tagListRowBox = await page.locator("[data-palette-editor-tags-list-row]").boundingBox();
@@ -849,6 +871,75 @@ test("Palette Tool adds, updates, pins, validates, and shows project-owned detai
   }
 });
 
+test("Palette Tool batch tags checked project palette swatches", async ({ page }) => {
+  const failures = await openRepoPage(page, "/toolbox/colors/index.html");
+
+  try {
+    await expect(page.getByText("Project Palette Tags")).toBeVisible();
+    await expect(page.getByText("Swatch Editor")).toHaveCount(0);
+    await expect(page.locator("[data-palette-clear-checked]")).toBeDisabled();
+
+    await page.locator("[data-palette-source-select]").selectOption("palette-colors008");
+    await page.locator("[data-palette-source-pin-all]").click();
+    await expect(page.locator("[data-palette-count]")).toHaveText("8");
+    await expect(page.locator("[data-palette-swatch-check]")).toHaveCount(8);
+
+    const blackItem = page.locator("[data-palette-swatch-item]", {
+      has: page.locator("[data-palette-swatch-name='Black']")
+    });
+    const brownItem = page.locator("[data-palette-swatch-item]", {
+      has: page.locator("[data-palette-swatch-name='Brown']")
+    });
+    const blueItem = page.locator("[data-palette-swatch-item]", {
+      has: page.locator("[data-palette-swatch-name='Blue']")
+    });
+    const blackTile = blackItem.locator("[data-palette-swatch-row]");
+    const brownTile = brownItem.locator("[data-palette-swatch-row]");
+    const blueTile = blueItem.locator("[data-palette-swatch-row]");
+    const blackCheck = blackItem.locator("[data-palette-swatch-check]");
+    const brownCheck = brownItem.locator("[data-palette-swatch-check]");
+
+    await blackTile.click();
+    await expect(page.locator("[data-palette-selected-summary]")).toHaveText("Black");
+    const checkBox = await blackCheck.boundingBox();
+    const tileBox = await blackTile.boundingBox();
+    expect((checkBox?.x || 0) - (tileBox?.x || 0)).toBeLessThan(10);
+    expect((checkBox?.y || 0) - (tileBox?.y || 0)).toBeLessThan(10);
+
+    await page.locator("[data-palette-tags]").fill("solo");
+    await expect(blackTile).toHaveAttribute("data-palette-swatch-tags", "");
+    await page.locator("[data-palette-tags]").press("Enter");
+    await expect(blackTile).toHaveAttribute("data-palette-swatch-tags", "solo");
+    await expect(brownTile).toHaveAttribute("data-palette-swatch-tags", "");
+    await expect(blueTile).toHaveAttribute("data-palette-swatch-tags", "");
+
+    await blackCheck.check();
+    await brownCheck.check();
+    await expect(page.locator("[data-palette-clear-checked]")).toBeEnabled();
+    await page.locator("[data-palette-tags]").fill("batch");
+    await page.locator("[data-palette-tags]").press("Enter");
+    await expect(blackTile).toHaveAttribute("data-palette-swatch-tags", "solo, batch");
+    await expect(brownTile).toHaveAttribute("data-palette-swatch-tags", "batch");
+    await expect(blueTile).toHaveAttribute("data-palette-swatch-tags", "");
+
+    await page.locator("[data-palette-clear-checked]").click();
+    await expect(blackCheck).not.toBeChecked();
+    await expect(brownCheck).not.toBeChecked();
+    await expect(page.locator("[data-palette-clear-checked]")).toBeDisabled();
+
+    await page.locator("[data-palette-tags]").fill("afterclear");
+    await page.locator("[data-palette-tags]").press("Enter");
+    await expect(blackTile).toHaveAttribute("data-palette-swatch-tags", "solo, batch, afterclear");
+    await expect(brownTile).toHaveAttribute("data-palette-swatch-tags", "batch");
+    await expect(blueTile).toHaveAttribute("data-palette-swatch-tags", "");
+
+    expectNoPageFailures(failures);
+  } finally {
+    await workspaceV2CoverageReporter.stop(page);
+    await failures.server.close();
+  }
+});
+
 test("Palette Tool rejects invalid payloads before render and blocks editing without an active project", async ({ page }) => {
   const invalidFailures = await openRepoPage(page, "/toolbox/colors/index.html?palette=invalid");