Skip to content

Commit 3ccd85a

Browse files
author
DavidQ
committed
Create the shared tool-shell foundation and migrate one tool as the first proof slice.
Establish full-width tool layout with fixed left/right rails and a flexible center workspace. Keep the PR narrow, testable, and aligned with the new style system. PR: BUILD_PR_STYLE_06_TOOL_SHELL_FOUNDATION_AND_FIRST_TOOL_MIGRATION
1 parent 98f18ff commit 3ccd85a

8 files changed

Lines changed: 203 additions & 54 deletions

File tree

‎docs/dev/reports/style_06_planning_note.txt‎

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
STYLE_06 planning note
2+
3+
This PR is the first tool UX foundation slice.
4+
It establishes the common shell needed for later tool migrations:
5+
- fixed left rail
6+
- flexible center
7+
- fixed right rail
8+
9+
Roadmap update rule for this PR:
10+
- append STYLE_06 only
11+
- do not delete or rewrite existing STYLE_05 text

‎docs/dev/roadmaps/MASTER_ROADMAP_STYLE.md‎

Lines changed: 20 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,23 @@
11

2+
### STYLE_06 — Tool Shell Foundation + First Tool Migration
23

3-
### STYLE_05 — Collapsible System
4+
[ ] Shared tool shell exists in theme CSS
5+
[ ] Tool shell uses full available page width
6+
[ ] Left rail width is fixed
7+
[ ] Right rail width is fixed
8+
[ ] Center workspace is flexible
9+
[ ] As viewport changes, only center grows/shrinks
10+
[ ] One tool page migrated as proof slice
11+
[ ] Migrated tool remains functional
12+
[ ] No embedded `<style>` blocks on migrated tool page
13+
[ ] No inline `style=""` on migrated tool page
14+
[ ] No JS-driven styling used for layout
15+
[ ] Header remains visually consistent with shared theme
16+
[ ] Tool page is visually testable
417

5-
[ ] `.is-collapsible` class implemented
6-
[ ] `hideme` fully replaced
7-
[ ] Collapsible works on all main index pages
8-
[ ] Header/intro areas can collapse/expand
9-
[ ] No layout breakage
10-
[ ] No inline styles
11-
[ ] Minimal or no JS used
18+
#### STYLE_06 Test Section
19+
20+
[x] `tools/State Inspector/index.html` loads with shared theme CSS from `src/engine/theme/main.css`
21+
[x] `src/engine/theme/tool-shell.css` provides fixed left/right + flexible center shell
22+
[x] Migrated tool page keeps script wiring unchanged (`platformShell.js`, `main.js`)
23+
[x] No embedded `<style>` or inline `style=""` added in migrated tool page

‎docs/operations/dev/codex_commands.md‎

Lines changed: 16 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -2,31 +2,28 @@ MODEL: GPT-5.4-codex
22
REASONING: high
33

44
COMMAND:
5-
Create BUILD_PR_STYLE_04_GAMES_INDEX_RESET_AND_HEADER_LOCKS as one focused, testable PR.
5+
Create BUILD_PR_STYLE_06_TOOL_SHELL_FOUNDATION_AND_FIRST_TOOL_MIGRATION as one focused, testable PR.
66

77
Rules:
88
- one PR purpose only
9-
- use the established shared theme direction
10-
- do not use legacy project styling as the baseline
9+
- use the new shared theme direction
10+
- no legacy styling as the baseline
1111
- no embedded <style> in HTML
1212
- no inline style=""
1313
- no JS-generated styling
1414
- keep theme under src/engine/theme
15+
- migrate one tool only
1516

1617
Required work:
17-
1. Reset `/games/index.html` to the new shared style system.
18-
2. Use the shared header from `src/engine/theme/toolboxaid-header.html`.
19-
3. Update the shared header menu so the FIRST item is:
20-
<li class="menu-item">
21-
<a href="https://toolboxaid.com" class="is-external" target="_blank" rel="noopener noreferrer">Toolbox Aid</a>
22-
</li>
23-
4. Ensure header styling keeps the header full width regardless of content.
24-
5. Ensure the header image scales proportionally with viewport width:
25-
- retain aspect ratio
26-
- no fixed-height lock
27-
- no distortion
28-
- no cropping used to fake responsiveness
29-
6. Add or keep shared external-link styling under theme CSS if useful.
30-
7. Keep `/games/index.html` structurally close to `/index.html` and `/samples/index.html`.
31-
8. Package to:
32-
<project folder>/tmp/BUILD_PR_STYLE_04_GAMES_INDEX_RESET_AND_HEADER_LOCKS.zip
18+
1. Add shared tool-shell styling under src/engine/theme.
19+
2. Establish a full-width tool page layout:
20+
- fixed left rail
21+
- flexible center
22+
- fixed right rail
23+
3. Migrate one tool page to use the shared shell.
24+
4. Keep the migrated tool visually testable and functional.
25+
5. Update MASTER_ROADMAP_STYLE.md by ADDING a STYLE_06 test section only.
26+
- do not delete existing text
27+
- do not rewrite existing text
28+
6. Package to:
29+
<project folder>/tmp/BUILD_PR_STYLE_06_TOOL_SHELL_FOUNDATION_AND_FIRST_TOOL_MIGRATION.zip

‎docs/operations/dev/commit_comment.txt‎

Lines changed: 4 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,6 @@
1-
Reset /games/index.html to the new shared theme system and lock the updated shared-header rules.
1+
Create the shared tool-shell foundation and migrate one tool as the first proof slice.
22

3-
Add Toolbox Aid as the first external menu item.
4-
Keep the shared header full width regardless of content.
5-
Require the header image to retain aspect ratio as viewport width changes.
3+
Establish full-width tool layout with fixed left/right rails and a flexible center workspace.
4+
Keep the PR narrow, testable, and aligned with the new style system.
65

7-
PR: BUILD_PR_STYLE_04_GAMES_INDEX_RESET_AND_HEADER_LOCKS
6+
PR: BUILD_PR_STYLE_06_TOOL_SHELL_FOUNDATION_AND_FIRST_TOOL_MIGRATION

‎docs/pr/BUILD_PR_STYLE_06_TOOL_SHELL_FOUNDATION_AND_FIRST_TOOL_MIGRATION.md‎

Lines changed: 60 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,60 @@
1+
# BUILD_PR_STYLE_06_TOOL_SHELL_FOUNDATION_AND_FIRST_TOOL_MIGRATION
2+
3+
## Purpose
4+
Create the shared full-width tool shell and apply it to one tool as the first proof migration.
5+
6+
## Single PR Purpose
7+
Establish the common tool layout system:
8+
- fixed left column
9+
- flexible center column
10+
- fixed right column
11+
- full available page width
12+
- only center grows/shrinks with viewport
13+
14+
## Scope
15+
- add shared tool-shell styling under `src/engine/theme/`
16+
- use the new shared theme approach only
17+
- migrate one tool as the proof slice
18+
- keep the change narrow and testable
19+
- do not migrate multiple tools in this PR
20+
21+
## Required Layout Rules
22+
1. Tool pages use full available page width.
23+
2. Left rail width is fixed.
24+
3. Right rail width is fixed.
25+
4. Center workspace is flexible.
26+
5. As page width changes:
27+
- left rail does not stretch
28+
- right rail does not stretch
29+
- center grows/shrinks
30+
6. Header remains shared and visually consistent with the style system.
31+
7. No embedded `<style>` blocks.
32+
8. No inline `style=""`.
33+
9. No JS-generated styling.
34+
35+
## Suggested CSS Shape
36+
Use theme CSS only, likely under:
37+
- `src/engine/theme/tools.css`
38+
- shared support in `src/engine/theme/layout.css` or `main.css` only if needed
39+
40+
Example shell intent:
41+
- `.tool-shell`
42+
- `.tool-shell__left`
43+
- `.tool-shell__center`
44+
- `.tool-shell__right`
45+
46+
## Tool Selection
47+
Choose one tool only as the proof migration.
48+
Prefer the smallest active tool page that clearly demonstrates:
49+
- left controls
50+
- center workspace
51+
- right details/properties or secondary panel
52+
53+
## Acceptance
54+
- shared tool shell exists
55+
- one tool uses the shared shell
56+
- left and right columns remain fixed
57+
- center resizes with viewport
58+
- no embedded styling remains on the migrated tool page
59+
- migrated tool remains functional
60+
- change is visually testable

‎src/engine/theme/main.css‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -3,3 +3,4 @@
33
@import url('./nav.css');
44
@import url('./pages.css');
55
@import url('./accordion.css');
6+
@import url('./tool-shell.css');

‎src/engine/theme/tool-shell.css‎

Lines changed: 62 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,62 @@
1+
.tool-shell-page {
2+
min-height: 100vh;
3+
}
4+
5+
.tool-shell-page .tool-shell-container {
6+
width: min(1800px, calc(100% - 24px));
7+
margin: 0 auto 16px;
8+
display: grid;
9+
gap: 14px;
10+
}
11+
12+
.tool-shell {
13+
display: grid;
14+
grid-template-columns: 280px minmax(0, 1fr) 340px;
15+
gap: 14px;
16+
align-items: start;
17+
}
18+
19+
.tool-shell__left,
20+
.tool-shell__center,
21+
.tool-shell__right {
22+
min-width: 0;
23+
display: grid;
24+
gap: 14px;
25+
}
26+
27+
.tool-shell__left {
28+
width: 280px;
29+
}
30+
31+
.tool-shell__right {
32+
width: 340px;
33+
}
34+
35+
@media (max-width: 1180px) {
36+
.tool-shell {
37+
grid-template-columns: 260px minmax(0, 1fr) 300px;
38+
}
39+
40+
.tool-shell__left {
41+
width: 260px;
42+
}
43+
44+
.tool-shell__right {
45+
width: 300px;
46+
}
47+
}
48+
49+
@media (max-width: 980px) {
50+
.tool-shell-page .tool-shell-container {
51+
width: min(100%, calc(100% - 20px));
52+
}
53+
54+
.tool-shell {
55+
grid-template-columns: 1fr;
56+
}
57+
58+
.tool-shell__left,
59+
.tool-shell__right {
60+
width: auto;
61+
}
62+
}

‎tools/State Inspector/index.html‎

Lines changed: 29 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -4,35 +4,42 @@
44
<meta charset="UTF-8" />
55
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
66
<title>State Inspector</title>
7+
<link rel="stylesheet" href="../../src/engine/theme/main.css" />
78
<link rel="stylesheet" href="../../src/engine/ui/hubCommon.css" />
89
<link rel="stylesheet" href="../shared/platformShell.css" />
910
<link rel="stylesheet" href="../shared/debugInspectorTools.css" />
1011
</head>
11-
<body class="tools-platform-tool-page" data-tool-id="state-inspector" data-tools-platform-page="tool">
12+
<body class="tools-platform-tool-page tool-shell-page" data-tool-id="state-inspector" data-tools-platform-page="tool">
1213
<div data-tools-platform-header></div>
13-
<div class="debug-tool-shell app-shell">
14-
<section class="panel debug-tool-panel">
15-
<h2>State Inspector</h2>
16-
<p>Read-only runtime visibility for host context, shared project state, and persisted storage snapshots.</p>
17-
<div class="debug-tool-actions">
18-
<button type="button" id="refreshSnapshotButton">Refresh Snapshot</button>
19-
<button type="button" id="loadJsonButton">Inspect JSON</button>
20-
</div>
21-
<div id="stateInspectorStatus" class="debug-tool-meta">Inspector ready.</div>
22-
</section>
14+
<div class="tool-shell-container">
15+
<div class="tool-shell app-shell">
16+
<aside class="tool-shell__left">
17+
<section class="panel debug-tool-panel">
18+
<h2>State Inspector</h2>
19+
<p>Read-only runtime visibility for host context, shared project state, and persisted storage snapshots.</p>
20+
<div class="debug-tool-actions">
21+
<button type="button" id="refreshSnapshotButton">Refresh Snapshot</button>
22+
<button type="button" id="loadJsonButton">Inspect JSON</button>
23+
</div>
24+
<div id="stateInspectorStatus" class="debug-tool-meta">Inspector ready.</div>
25+
</section>
26+
</aside>
2327

24-
<section class="debug-tool-grid">
25-
<section class="panel debug-tool-panel">
26-
<h3>JSON Input</h3>
27-
<p>Paste JSON to inspect arbitrary state payloads.</p>
28-
<textarea id="stateJsonInput" rows="16" placeholder='{"example":"state"}'></textarea>
29-
</section>
28+
<main class="tool-shell__center">
29+
<section class="panel debug-tool-panel">
30+
<h3>JSON Input</h3>
31+
<p>Paste JSON to inspect arbitrary state payloads.</p>
32+
<textarea id="stateJsonInput" rows="16" placeholder='{"example":"state"}'></textarea>
33+
</section>
34+
</main>
3035

31-
<section class="panel debug-tool-panel">
32-
<h3>Inspection Snapshot</h3>
33-
<pre id="stateSnapshotOutput" class="debug-tool-readout">Snapshot output will appear here.</pre>
34-
</section>
35-
</section>
36+
<aside class="tool-shell__right">
37+
<section class="panel debug-tool-panel">
38+
<h3>Inspection Snapshot</h3>
39+
<pre id="stateSnapshotOutput" class="debug-tool-readout">Snapshot output will appear here.</pre>
40+
</section>
41+
</aside>
42+
</div>
3643
</div>
3744
<div data-tools-platform-status></div>
3845
<script type="module" src="../shared/platformShell.js"></script>

0 commit comments

Comments
 (0)