Skip to content

Commit df53fd4

Browse files
author
DavidQ
committed
Unify tool toolbar and header visual presentation across workspace tools - PR 11.1
Improve interaction feedback and visual clarity across tools - PR 11.2
1 parent cd13864 commit df53fd4

12 files changed

Lines changed: 411 additions & 14 deletions

File tree

‎docs/dev/codex_commands.md‎

Lines changed: 8 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -3,14 +3,12 @@
33
model: gpt-5.3-codex
44
reasoning: medium
55

6-
Apply PR_10_27_DUPLICATE_CLASSIFICATION_AND_SAFE_CLEANUP.
6+
Apply PR_11_2_INTERACTION_AND_FEEDBACK_POLISH.
77

8-
Required:
9-
- Read docs/dev/reports/repo_duplicate_file_content_audit.json from PR 10.26.
10-
- Classify duplicate groups before cleanup.
11-
- Remove/demote only confirmed duplicate SSoT or accidental-copy files.
12-
- Do not delete templates, sample variants, generated reports, validation outputs, or ambiguous groups.
13-
- Leave ambiguous groups documented with no action.
14-
- Add report at docs/dev/reports/PR_10_27_DUPLICATE_CLASSIFICATION_AND_SAFE_CLEANUP_report.md.
15-
- Do not modify start_of_day folders.
16-
- Return ZIP artifact at tmp/PR_10_27_DUPLICATE_CLASSIFICATION_AND_SAFE_CLEANUP_delta.zip.
8+
- Add consistent hover, active, focus, and disabled states across all tools
9+
- Normalize selection styling
10+
- Ensure correct cursor behavior
11+
- Add subtle transitions
12+
- Do not change behavior, data, schema, or start_of_day folders
13+
- Add validation report
14+
- Return ZIP at tmp/PR_11_2_INTERACTION_AND_FEEDBACK_POLISH_delta.zip

‎docs/dev/commit_comment.txt‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1 +1 @@
1-
Classify duplicate file content and safely clean only confirmed duplicate SSoT copies - PR 10.27
1+
Improve interaction feedback and visual clarity across tools - PR 11.2

‎docs/dev/reports/PR_11_1_TOOLBAR_AND_VISUAL_POLISH_report.md‎

Lines changed: 45 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,45 @@
1+
# PR_11_1_TOOLBAR_AND_VISUAL_POLISH Report
2+
3+
## Result
4+
PASS
5+
6+
## Scope Applied
7+
- Unified toolbar/header visual presentation across:
8+
- Asset Browser
9+
- Sprite Editor
10+
- Tilemap Studio
11+
- Vector Asset Studio
12+
- Vector Map Editor
13+
- Implemented via shared shell styling in `tools/shared/platformShell.css` using `data-tool-id` scoped selectors.
14+
- No tool runtime behavior logic changed.
15+
16+
## Files Changed
17+
- `tools/shared/platformShell.css`
18+
- `docs/dev/reports/PR_11_1_TOOLBAR_AND_VISUAL_POLISH_report.md`
19+
20+
## What Was Standardized
21+
- Top toolbar surface treatment (border, radius, glass background, shared shadow, padding) for the five target tools.
22+
- Asset Browser top header row alignment and wrapping behavior for consistent presentation.
23+
- Secondary top-row/status strips (`state-row`, `canvas-toolbar`, `statusbar`) for matching visual hierarchy.
24+
- Toolbar control cluster/chip presentation (`toolbar-group` and `tools-platform-control-cluster`) for consistent spacing and framing.
25+
26+
## Preservation Checks
27+
- Fullscreen header summary labels and state text behavior preserved.
28+
- Fullscreen enter/exit behavior preserved.
29+
- Tool lifecycle/state/selection/empty-state behavior unchanged.
30+
- JSON SSoT and loader/data contracts unchanged.
31+
32+
## Non-Changes (Constraint Compliance)
33+
- No modifications to data files, schemas, sample JSON, or loader logic.
34+
- No `start_of_day` folder changes.
35+
36+
## Validation
37+
Command run:
38+
- `node ./tests/runtime/LaunchSmokeAllEntries.test.mjs --tools`
39+
40+
Result:
41+
- PASS `18/18` tools (including Asset Browser, Sprite Editor, Tilemap Studio, Vector Asset Studio, Vector Map Editor)
42+
- FAIL `0`
43+
44+
Additional verification:
45+
- Shared shell JS (`tools/shared/platformShell.js`) was not modified in this PR, preserving fullscreen summary label and exit-state behavior paths.

‎docs/dev/reports/PR_11_2_INTERACTION_AND_FEEDBACK_POLISH_report.md‎

Lines changed: 56 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,56 @@
1+
# PR_11_2_INTERACTION_AND_FEEDBACK_POLISH Report
2+
3+
## Result
4+
PASS
5+
6+
## Scope
7+
- Added consistent interaction/feedback styling in shared shell CSS:
8+
- hover
9+
- active
10+
- focus-visible
11+
- disabled
12+
- Normalized selection styling signals for common selected states.
13+
- Normalized cursor behavior for clickable vs disabled controls.
14+
- Added subtle transitions for controls and selectable UI elements.
15+
16+
## Files Changed
17+
- `tools/shared/platformShell.css`
18+
- `docs/dev/reports/PR_11_2_INTERACTION_AND_FEEDBACK_POLISH_report.md`
19+
20+
## What Was Updated
21+
- Shared interactive controls (`button`, `.button`, `.toolbar-link`, `.file-input-label`):
22+
- pointer cursor
23+
- smooth transitions
24+
- hover border + subtle ring
25+
- active press offset
26+
- disabled visual + not-allowed cursor
27+
- Form controls (`input`, `select`, `textarea`):
28+
- transitions
29+
- hover border polish
30+
- disabled cursor/opacity behavior
31+
- Pointer expectations:
32+
- `checkbox`, `radio`, `range`, `select`, and `summary` use pointer cursor
33+
- Selection normalization:
34+
- `.is-current`, `.active`, `.selected`, `[aria-selected="true"]`, `[data-selected="true"]`
35+
- shared accent border + ring
36+
- Subtle motion added to common selectable elements:
37+
- asset list entries
38+
- tool buttons
39+
- swatches
40+
- common list buttons
41+
42+
## Constraint Compliance
43+
- No behavior logic changes.
44+
- No data/schema/sample JSON/loader changes.
45+
- No `start_of_day` modifications.
46+
47+
## Validation
48+
Command run:
49+
- `node ./tests/runtime/LaunchSmokeAllEntries.test.mjs --tools`
50+
51+
Result:
52+
- PASS `18/18`
53+
- FAIL `0`
54+
55+
## Notes
56+
- Fullscreen header label/exit behavior preserved (no shared fullscreen logic changes in JS).

‎docs/dev/reports/REPORT_PR_11_1.md‎

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
# REPORT_PR_11_1_TOOLBAR_AND_VISUAL_POLISH
2+
3+
## Summary
4+
Starts Phase 11 product polish by standardizing shared toolbar/header presentation across the tool suite.
5+
6+
## Target
7+
- One visual language for all tools.
8+
- No data or lifecycle changes.
9+
- Fullscreen behavior preserved.

‎docs/dev/reports/REPORT_PR_11_2.md‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
# REPORT_PR_11_2_INTERACTION_AND_FEEDBACK_POLISH
2+
3+
## Summary
4+
Enhances interaction feedback across all tools.
5+
6+
## Result
7+
- Clear hover/active/disabled states
8+
- Improved usability without behavior changes

‎docs/dev/reports/launch_smoke_report.md‎

Lines changed: 20 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,26 @@
11
# Launch Smoke Report
22

3-
Generated: 2026-04-28T22:27:21.902Z
3+
Generated: 2026-04-28T23:01:46.332Z
44

5-
Filters: games=false, samples=true, tools=false, sampleRange=1505-1505
5+
Filters: games=false, samples=false, tools=true, sampleRange=all
66

77
| Status | Type | Label | Path | Notes | Steps |
88
| --- | --- | --- | --- | --- | --- |
9-
| PASS | sample | 1505 | samples\phase-15\1505\index.html | | npm install --prefix ./tmp ws → npm run test:launch-smoke |
9+
| PASS | tool | 3D Asset Viewer | tools\3D Asset Viewer\index.html | | npm install --prefix ./tmp ws → npm run test:launch-smoke |
10+
| PASS | tool | 3D Camera Path Editor | tools\3D Camera Path Editor\index.html | | npm install --prefix ./tmp ws → npm run test:launch-smoke |
11+
| PASS | tool | 3D JSON Payload Normalizer | tools\3D JSON Payload Normalizer\index.html | | npm install --prefix ./tmp ws → npm run test:launch-smoke |
12+
| PASS | tool | Asset Browser | tools\Asset Browser\index.html | | npm install --prefix ./tmp ws → npm run test:launch-smoke |
13+
| PASS | tool | Asset Pipeline Tool | tools\Asset Pipeline Tool\index.html | | npm install --prefix ./tmp ws → npm run test:launch-smoke |
14+
| PASS | tool | Palette Browser | tools\Palette Browser\index.html | | npm install --prefix ./tmp ws → npm run test:launch-smoke |
15+
| PASS | tool | Parallax Scene Studio | tools\Parallax Scene Studio\index.html | | npm install --prefix ./tmp ws → npm run test:launch-smoke |
16+
| PASS | tool | Performance Profiler | tools\Performance Profiler\index.html | | npm install --prefix ./tmp ws → npm run test:launch-smoke |
17+
| PASS | tool | Physics Sandbox | tools\Physics Sandbox\index.html | | npm install --prefix ./tmp ws → npm run test:launch-smoke |
18+
| PASS | tool | Replay Visualizer | tools\Replay Visualizer\index.html | | npm install --prefix ./tmp ws → npm run test:launch-smoke |
19+
| PASS | tool | Skin Editor | tools\Skin Editor\index.html | | npm install --prefix ./tmp ws → npm run test:launch-smoke |
20+
| PASS | tool | Sprite Editor | tools\Sprite Editor\index.html | | npm install --prefix ./tmp ws → npm run test:launch-smoke |
21+
| PASS | tool | State Inspector | tools\State Inspector\index.html | | npm install --prefix ./tmp ws → npm run test:launch-smoke |
22+
| PASS | tool | Tile Model Converter | tools\Tile Model Converter\index.html | | npm install --prefix ./tmp ws → npm run test:launch-smoke |
23+
| PASS | tool | Tilemap Studio | tools\Tilemap Studio\index.html | | npm install --prefix ./tmp ws → npm run test:launch-smoke |
24+
| PASS | tool | Vector Asset Studio | tools\Vector Asset Studio\index.html | | npm install --prefix ./tmp ws → npm run test:launch-smoke |
25+
| PASS | tool | Vector Map Editor | tools\Vector Map Editor\index.html | | npm install --prefix ./tmp ws → npm run test:launch-smoke |
26+
| PASS | tool | Workspace Manager | tools\Workspace Manager\index.html | | npm install --prefix ./tmp ws → npm run test:launch-smoke |

‎docs/pr/PR_11_1_TOOLBAR_AND_VISUAL_POLISH/BUILD.md‎

Lines changed: 54 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,54 @@
1+
# BUILD_PR_11_1_TOOLBAR_AND_VISUAL_POLISH
2+
3+
## Required Codex Work
4+
5+
### 1. Inspect shared tool shell styling
6+
Focus on shared workspace/tool shell files, expected around:
7+
- tools/shared/platformShell.js
8+
- tools/shared/platformShell.css
9+
- shared tool CSS used by Asset Browser, Sprite Editor, Tilemap Studio, Vector Asset Studio, Vector Map Editor
10+
11+
### 2. Normalize toolbar/header visual language
12+
Apply a shared product-style toolbar model:
13+
- consistent height/density
14+
- consistent title alignment
15+
- consistent description/subtitle placement
16+
- consistent button spacing
17+
- consistent icon/caret/header action placement
18+
- consistent disabled/active visual states
19+
- no unexpected wrapping except where viewport requires it
20+
21+
### 3. Preserve behavior
22+
Do not regress:
23+
- fullscreen header open label: `Hide Header and Details`
24+
- fullscreen collapsed label: `<tool> — <details>`
25+
- fullscreen exit restore
26+
- tool selection persistence
27+
- empty-state behavior
28+
- JSON SSoT behavior
29+
30+
### 4. Avoid unrelated changes
31+
Do not:
32+
- change data
33+
- change schema
34+
- change sample JSON
35+
- change loaders
36+
- change workspace lifecycle logic except if required by styling hook names
37+
- rewrite tools
38+
39+
### 5. Validation report
40+
Create:
41+
docs/dev/reports/PR_11_1_TOOLBAR_AND_VISUAL_POLISH_report.md
42+
43+
Report must include:
44+
- changed files
45+
- tools visually checked
46+
- normal mode validation
47+
- fullscreen expanded validation
48+
- fullscreen collapsed validation
49+
- confirmation no data/schema/sample JSON/start_of_day changes
50+
51+
## Constraints
52+
- One PR purpose only.
53+
- Smallest scoped visual polish.
54+
- Shared styling preferred over tool-local overrides.

‎docs/pr/PR_11_1_TOOLBAR_AND_VISUAL_POLISH/PLAN.md‎

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
# PLAN_PR_11_1_TOOLBAR_AND_VISUAL_POLISH
2+
3+
## Purpose
4+
Unify toolbar/header visual presentation across the workspace tools so the tool suite feels like one product.
5+
6+
## Scope
7+
- Shared toolbar/header styling only.
8+
- Consistent spacing, alignment, density, button treatment, and title/description placement.
9+
- Preserve existing fullscreen header behavior.
10+
- Preserve existing tool lifecycle/state behavior.
11+
- No data, schema, loader, or sample-path changes.
12+
- Do not modify start_of_day folders.
13+
14+
## Acceptance
15+
- Asset Browser, Sprite Editor, Tilemap Studio, Vector Asset Studio, and Vector Map Editor share a consistent toolbar/header visual model.
16+
- Normal mode and fullscreen mode remain correct.
17+
- Existing header/details open/collapse behavior remains intact.
18+
- No tool-specific one-off toolbar styling remains unless explicitly justified in the report.

‎docs/pr/PR_11_2_INTERACTION_AND_FEEDBACK_POLISH/BUILD.md‎

Lines changed: 32 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,32 @@
1+
# BUILD_PR_11_2_INTERACTION_AND_FEEDBACK_POLISH
2+
3+
## Required Codex Work
4+
5+
1. Apply consistent hover states across all tools
6+
2. Normalize selected state styling
7+
3. Ensure disabled controls are clearly styled
8+
4. Add consistent cursor behavior:
9+
- pointer for clickable
10+
- not-allowed for disabled
11+
5. Add subtle transition effects (fast, non-distracting)
12+
6. Do not modify layout or logic
13+
7. Validate across:
14+
- Asset Browser
15+
- Sprite Editor
16+
- Tilemap Studio
17+
- Vector Asset Studio
18+
- Vector Map Editor
19+
20+
## Validation
21+
Create:
22+
docs/dev/reports/PR_11_2_INTERACTION_AND_FEEDBACK_POLISH_report.md
23+
24+
Include:
25+
- elements updated
26+
- tools tested
27+
- confirmation no behavior change
28+
29+
## Constraints
30+
- Visual only
31+
- No refactors
32+
- No schema/data changes

0 commit comments

Comments
 (0)