Prevent duplicate User Defined swatch adds and show Hex preview - PR_26156_181-palette-user-defined-add-state

Author: ToolboxAid

assets/theme-v2/css/forms.css

@@ -34,6 +34,21 @@ form {
   gap: var(--space-14)
 }
 
+.field-inline {
+  display: flex;
+  gap: var(--space-8);
+  align-items: center;
+  max-width: 100%
+}
+
+.field-inline input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]),
+.field-inline textarea,
+.field-inline select {
+  flex: 1 1 auto;
+  min-width: var(--space-0);
+  width: auto
+}
+
 .field-hint {
   color: var(--muted);
   font-size: var(--font-size-sm);
@@ -114,6 +129,21 @@ input[type="color"][data-palette-swatch-preview]::-webkit-color-swatch {
   border-radius: var(--radius-xs)
 }
 
+input[type="color"][data-palette-preview-state="invalid"] {
+  background: repeating-linear-gradient(45deg, var(--panel), var(--panel) var(--space-4), var(--steel-soft) var(--space-4), var(--steel-soft) var(--space-8));
+  border-style: dashed
+}
+
+input[type="color"][data-palette-preview-state="invalid"]::-webkit-color-swatch {
+  background: repeating-linear-gradient(45deg, var(--panel), var(--panel) var(--space-4), var(--steel-soft) var(--space-4), var(--steel-soft) var(--space-8));
+  border-style: dashed
+}
+
+input[type="color"][data-palette-preview-state="invalid"]::-moz-color-swatch {
+  background: repeating-linear-gradient(45deg, var(--panel), var(--panel) var(--space-4), var(--steel-soft) var(--space-4), var(--steel-soft) var(--space-8));
+  border-style: dashed
+}
+
 input[type="color"][data-palette-swatch-size="small"] {
   width: var(--space-28);
   min-width: var(--space-28);

docs_build/dev/reports/palette-user-defined-add-state-report.md

@@ -0,0 +1,53 @@
+# PR_26156_181 Palette User Defined Add State Report
+
+## Result
+PASS
+
+## Summary
+- Fixed User Defined Swatch add state so `Add User Defined` is disabled until Symbol, Hex, and Name form a valid new unique user-defined swatch.
+- After a successful add, the added Symbol, Hex, and Name remain visible and `Add User Defined` becomes disabled because the displayed swatch already exists.
+- Repeat-click duplicate add failure is prevented by the disabled add state and submit guard.
+- Editing Symbol, Hex, or Name to a valid unique swatch re-enables `Add User Defined`.
+- Selecting source/harmony/project colors continues to populate or clear User Defined fields according to the existing selection rules.
+- Added a Hex preview swatch in the left column immediately after the Hex label that updates for valid hex values and shows a visible invalid/empty state for blank or invalid values.
+- Tooltip Source remains on its own newline through the existing browser `title` format.
+
+## Theme V2 Gap
+Existing Theme V2 form utilities had no reusable inline field layout for a compact preview plus full-width input, and no reusable invalid color-preview state.
+
+Reusable Theme V2 additions:
+- `.field-inline` lays out compact inline field controls without page-local CSS.
+- `input[type="color"][data-palette-preview-state="invalid"]` shows a dashed patterned preview for blank/invalid color values.
+
+## 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
+- `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
+- `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`
+  - PASS with Git LF-to-CRLF warnings for touched files
+
+## Verification Coverage
+- Add User Defined disables when the form is blank or invalid.
+- Add User Defined enables for a valid new unique user-defined swatch.
+- Successful add keeps Symbol, Hex, and Name visible.
+- Successful add disables Add User Defined while the displayed swatch already exists.
+- Repeat duplicate add is prevented by disabled Add User Defined state.
+- Changing Symbol, Hex, and Name to a valid unique swatch re-enables Add User Defined.
+- Selecting a source-backed color clears User Defined fields.
+- Selecting a user-defined color populates User Defined fields.
+- Hex preview appears in the left column immediately after the Hex label.
+- Hex preview updates for valid values and shows a visible invalid state for blank/invalid values.
+- Browser tooltip Source remains on its own newline before Tags.
+
+## Skipped
+- Full samples smoke was not run, per BUILD instruction.
+- Broader tool/runtime lanes were skipped because this PR touches Palette Tool User Defined behavior and a small reusable Theme V2 form utility covered by the targeted Palette Tool runtime/UI lane plus static validation.

docs_build/dev/reports/playwright_v8_coverage_report.txt

@@ -18,15 +18,15 @@ Exercised tool entry points detected:
 
 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 794/794; executed functions 78/81
+(96%) toolbox/colors/colors.js - executed lines 831/831; executed functions 82/85
 
 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 794/794; executed functions 78/81
+(96%) toolbox/colors/colors.js - executed lines 831/831; executed functions 82/85
 (100%) toolbox/colors/palette-source-mock-db.js - executed lines 927/927; executed functions 6/6
 
 Uncovered or low-coverage changed JS files:

docs_build/dev/reports/testing_lane_execution_report.md

@@ -1,4 +1,4 @@
-# PR_26156_180 Testing Lane Execution Report
+# PR_26156_181 Testing Lane Execution Report
 
 ## Result
 PASS
@@ -10,44 +10,43 @@ 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`
+- `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
 - `npm run test:playwright:static`
   - PASS
-- `git diff --check -- toolbox/colors/colors.js toolbox/colors/palette-workspace-repository.js tests/playwright/tools/PaletteToolMockRepository.spec.mjs`
-  - PASS with Git LF-to-CRLF warning for the touched Playwright spec
+- `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`
+  - PASS with Git LF-to-CRLF warnings for touched files
 
 ## Required Lanes
-- Targeted Palette Tool runtime/UI lane: PASS.
+- Targeted Palette Tool User Defined runtime/UI lane: PASS.
 - Changed-file/static validation: PASS.
 
 ## Playwright Coverage
-- Source Palette Browser direct pin/add selects the newly added active swatch: PASS.
-- Source Pin All selects the last newly added swatch: PASS.
-- Duplicate-only Source Pin All keeps the existing selected swatch: PASS.
-- User Defined Swatch add selects the newly added custom swatch: PASS.
-- Harmony pin/add selects the newly added harmony swatch: PASS.
-- Harmony Add All selects the last newly added harmony swatch: PASS.
-- Duplicate-only Harmony Add All keeps the current selected swatch: PASS.
-- Browser tooltip order is Name, Hex, Source, Tags: PASS.
-- Empty active user-tag sets omit the Tags line: PASS.
+- 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.
 
 ## Impacted Lane
-- Palette Tool runtime/UI lane.
+- Palette Tool User Defined runtime/UI lane.
 - Changed-file/static validation lane.
 
 ## Skipped Lanes
 - Full samples smoke was skipped by BUILD instruction.
-- Shared Tool Center fullscreen UI lane was skipped because PR180 does not modify shared Tool Center or Theme V2 behavior.
-- Broader tool lanes were skipped because changes are confined to Palette Tool repository/UI behavior and targeted Palette spec assertions.
+- 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.
 
 ## Notes
-- Static validation generated companion reports during the run; non-required generated companion report updates were restored to their prior contents so the PR remains scoped to the requested report artifacts.
+- 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.
 
 ## Coverage Artifact
 - Final V8 coverage artifact: `docs_build/dev/reports/playwright_v8_coverage_report.txt`.