Skip to content

Commit 42e74c0

Browse files
ToolboxAidToolboxAid
committed
Correct Theme V2 templates to use shared production page chrome - PR_26152_274-theme-v2-template-correction
1 parent 363dcae commit 42e74c0

3 files changed

Lines changed: 161 additions & 61 deletions

File tree

‎docs/dev/reports/storage_inspector_template_mapping.md‎

Lines changed: 45 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,45 @@
1+
# PR_26152_275 Storage Inspector Template Mapping
2+
3+
## Scope
4+
5+
This report documents the future Storage Inspector mapping to the corrected `_tool_template_v2` layout. Storage Inspector was not rebuilt in this PR.
6+
7+
## Future Mapping
8+
9+
| Template Region | Storage Inspector Responsibility |
10+
| --- | --- |
11+
| Left column | Persistent selector for what to inspect. |
12+
| Center column | `toolDisplayMode` host for tiles, list, tree, and JSON summary display modes. |
13+
| Right column | Selected memory/store record content, status, diagnostics, metadata, and details. |
14+
15+
## Left Column Selection Targets
16+
17+
- Session
18+
- Local
19+
- Project Store
20+
- Runtime
21+
- Tool State
22+
- Manifest
23+
- Custom Extensions
24+
25+
## Center Column Display Modes
26+
27+
- Tiles summary
28+
- List summary
29+
- Tree summary
30+
- JSON summary
31+
32+
## Right Column Details
33+
34+
- Selected record content
35+
- Selected record metadata
36+
- Validation status
37+
- Diagnostics
38+
- Detail output
39+
40+
## Boundaries
41+
42+
- No Storage Inspector runtime code changed.
43+
- No Storage Inspector page rebuild was performed.
44+
- No sample files were touched.
45+
- No new CSS or Theme V2 CSS changes were made.

‎docs/dev/reports/tool_template_display_mode_layout.md‎

Lines changed: 40 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,40 @@
1+
# PR_26152_275 Tool Template Display Mode Layout
2+
3+
## Scope
4+
5+
- Updated `src/engine/theme/v2/templates/_tool_template_v2.html`.
6+
- Kept `_page_template_v2.html` unchanged.
7+
- Did not rebuild Storage Inspector.
8+
- Did not touch samples.
9+
- Did not add CSS, copied CSS, inline style, inline script, or inline event handlers.
10+
11+
## Layout Contract
12+
13+
| Region | Contract | Result |
14+
| --- | --- | --- |
15+
| Left column | Persistent selection, input, and configuration | PASS - left column is explicitly labeled and uses persistent Theme V2 `surface`, `field-group`, and `feedback` patterns. |
16+
| Center column | Includes the `toolDisplayMode` host | PASS - center `tool-center-panel` includes the existing `data-tool-display-mode` host and loads the external `tool-display-mode.js` script. |
17+
| Right column | Persistent output, status, diagnostics, and details | PASS - right column is explicitly labeled and uses persistent Theme V2 `surface`, `feedback`, and `event-log` patterns. |
18+
| Left/right accordions | No accordions in either side column | PASS - left and right side-column accordions were removed. |
19+
20+
## Theme V2 Usage
21+
22+
- Existing Theme V2 classes used: `grid`, `cols-3`, `tool-workspace`, `tool-column`, `tool-center-panel`, `surface`, `surface-header`, `surface-body`, `field-group`, `field-hint`, `feedback`, `feedback-title`, `feedback-message`, `event-log`, `event-log-entry`, `table-wrapper`, and `data-table`.
23+
- The template keeps the `tool-workspace` hook while adding existing Theme V2 `grid cols-3` layout classes so the left, center, and right regions render side by side without new CSS.
24+
- No Theme V2 CSS files were changed.
25+
- No page-local or tool-local CSS was added.
26+
27+
## Validation
28+
29+
- `git diff --check` - PASS
30+
- Template marker scan for explicit left, center, right column labels - PASS
31+
- Template marker scan for `data-tool-display-mode` and external `tool-display-mode.js` wiring - PASS
32+
- Template guard scan for left/right accordion markers - PASS
33+
- Template guard scan for inline style, inline script blocks, and inline event handlers - PASS
34+
35+
## Lanes
36+
37+
- Executed: template/static validation because only the shared Theme V2 tool template changed.
38+
- Skipped: runtime, engine, samples, recovery/UAT, and tool rebuild lanes because no runtime page, engine surface, sample, or tool implementation changed.
39+
- Samples decision: SKIP - samples are out of scope.
40+
- Playwright impacted: No - this PR updates an inactive template contract only and does not rebuild or change a runtime tool page.

‎src/engine/theme/v2/templates/_tool_template_v2.html‎

Lines changed: 76 additions & 61 deletions
Original file line numberDiff line numberDiff line change
@@ -24,49 +24,55 @@ <h1>Tool Name</h1>
2424

2525
<section class="section">
2626
<div class="container">
27-
<div class="tool-workspace">
28-
<aside class="tool-column tool-group-build-create">
27+
<div class="tool-workspace grid cols-3">
28+
<aside class="tool-column tool-group-build-create" aria-label="Left column selection input and configuration">
2929
<div class="tool-column-header molten-orange">
30-
<h2>Toolbox</h2>
30+
<h2>Left Column</h2>
3131
</div>
32-
<div class="accordion-stack">
33-
<details class="vertical-accordion" open>
34-
<summary>Setup</summary>
35-
<div class="accordion-body">
36-
<form aria-label="Tool setup form">
37-
<div class="field-group">
38-
<label for="template-tool-name">Name</label>
39-
<input id="template-tool-name" name="template-tool-name" type="text" value="Untitled Project">
40-
<p class="field-hint">Required project or output name.</p>
41-
</div>
42-
<div class="field-group">
43-
<label for="template-tool-mode">Mode</label>
44-
<select id="template-tool-mode" name="template-tool-mode">
45-
<option>Draft</option>
46-
<option>Review</option>
47-
<option>Export</option>
48-
</select>
49-
<p class="field-hint">Use approved Theme V2 form controls only.</p>
50-
</div>
51-
</form>
52-
</div>
53-
</details>
54-
<details class="vertical-accordion">
55-
<summary>Options</summary>
56-
<div class="accordion-body">
57-
<div class="feedback">
58-
<strong class="feedback-title">Ready</strong>
59-
<p class="feedback-message">Tool options belong in this left column.</p>
32+
<div class="surface" aria-labelledby="template-selection-title">
33+
<div class="surface-header">
34+
<div class="kicker">Selection / Input / Configuration</div>
35+
<h2 id="template-selection-title">Input and Configuration</h2>
36+
</div>
37+
<div class="surface-body">
38+
<form aria-label="Tool selection and configuration form">
39+
<div class="field-group">
40+
<label for="template-tool-source">Source</label>
41+
<select id="template-tool-source" name="template-tool-source">
42+
<option>Project Store</option>
43+
<option>Tool State</option>
44+
<option>Manifest</option>
45+
</select>
46+
<p class="field-hint">Select the active record or input surface.</p>
6047
</div>
61-
</div>
62-
</details>
48+
<div class="field-group">
49+
<label for="template-tool-filter">Filter</label>
50+
<input id="template-tool-filter" name="template-tool-filter" type="search" value="">
51+
<p class="field-hint">Filter or narrow the current selection.</p>
52+
</div>
53+
<div class="field-group">
54+
<label for="template-tool-mode">Mode</label>
55+
<select id="template-tool-mode" name="template-tool-mode">
56+
<option>Draft</option>
57+
<option>Review</option>
58+
<option>Export</option>
59+
</select>
60+
<p class="field-hint">Configuration remains visible while the center changes display modes.</p>
61+
</div>
62+
</form>
63+
</div>
64+
</div>
65+
<div class="feedback">
66+
<strong class="feedback-title">Selection Contract</strong>
67+
<p class="feedback-message">Left column owns persistent selection, input, and configuration.</p>
6368
</div>
6469
</aside>
6570

6671
<section class="tool-center-panel" aria-labelledby="template-workspace-title">
72+
<div data-tool-display-mode data-asset-root="../src/engine/theme/v2/assets" data-tool-slug="tool-template-v2" data-tool-icon-src="../src/engine/theme/v2/assets/image-missing.svg"></div>
6773
<img src="../src/engine/theme/v2/assets/image-missing.svg" alt="Tool preview placeholder">
68-
<h2 id="template-workspace-title">Workspace</h2>
69-
<p>Primary tool work area for canvas, editor, preview, or generated output.</p>
74+
<h2 id="template-workspace-title">Center Column</h2>
75+
<p>Primary tool display area with the toolDisplayMode host for tiles, lists, trees, JSON summaries, canvas, editor, preview, or generated output.</p>
7076
<div class="button-row" aria-label="Tool actions">
7177
<button class="btn primary" type="button">Save Draft</button>
7278
<button class="btn" type="button">Preview</button>
@@ -102,36 +108,44 @@ <h2 id="template-output-title">Current Result</h2>
102108
</div>
103109
</section>
104110

105-
<aside class="tool-column tool-group-build-create">
111+
<aside class="tool-column tool-group-build-create" aria-label="Right column output status diagnostics and details">
106112
<div class="tool-column-header forge-gold">
107-
<h2>Inspector</h2>
113+
<h2>Right Column</h2>
108114
</div>
109-
<div class="accordion-stack">
110-
<details class="vertical-accordion" open>
111-
<summary>Status</summary>
112-
<div class="accordion-body">
113-
<div class="event-log" aria-label="Tool status log">
114-
<div class="event-log-entry">PASS Theme V2 shell loaded.</div>
115-
<div class="event-log-entry">WAIT Tool implementation not attached.</div>
116-
</div>
115+
<div class="surface" aria-labelledby="template-details-title">
116+
<div class="surface-header">
117+
<div class="kicker">Output / Status / Diagnostics / Details</div>
118+
<h2 id="template-details-title">Status and Diagnostics</h2>
119+
</div>
120+
<div class="surface-body">
121+
<div class="feedback">
122+
<strong class="feedback-title">Selected Record</strong>
123+
<p class="feedback-message">Right column owns selected output, diagnostics, metadata, and details.</p>
117124
</div>
118-
</details>
119-
<details class="vertical-accordion">
120-
<summary>Dialog Contract</summary>
121-
<div class="accordion-body">
122-
<dialog aria-labelledby="template-dialog-title">
123-
<div class="surface">
124-
<div class="surface-header">
125-
<h2 id="template-dialog-title">Dialog Title</h2>
126-
</div>
127-
<div class="surface-body">
128-
<p>Dialog content uses Theme V2 dialog ownership when implemented.</p>
129-
</div>
130-
</div>
131-
</dialog>
132-
<p>Dialog markup is present as a closed production placeholder.</p>
125+
<div class="event-log" aria-label="Tool status log">
126+
<div class="event-log-entry">PASS Theme V2 shell loaded.</div>
127+
<div class="event-log-entry">WAIT Tool implementation not attached.</div>
133128
</div>
134-
</details>
129+
</div>
130+
</div>
131+
<div class="surface" aria-labelledby="template-dialog-title">
132+
<div class="surface-header">
133+
<div class="kicker">Dialog Contract</div>
134+
<h2 id="template-dialog-title">Dialog Placeholder</h2>
135+
</div>
136+
<div class="surface-body">
137+
<dialog aria-labelledby="template-dialog-heading">
138+
<div class="surface">
139+
<div class="surface-header">
140+
<h2 id="template-dialog-heading">Dialog Title</h2>
141+
</div>
142+
<div class="surface-body">
143+
<p>Dialog content uses Theme V2 dialog ownership when implemented.</p>
144+
</div>
145+
</div>
146+
</dialog>
147+
<p>Closed dialog markup documents the approved Theme V2 dialog surface.</p>
148+
</div>
135149
</div>
136150
</aside>
137151
</div>
@@ -140,6 +154,7 @@ <h2 id="template-dialog-title">Dialog Title</h2>
140154
</main>
141155
<div data-partial="footer"></div>
142156
<script src="assets/js/gamefoundry-partials.js" defer></script>
157+
<script src="assets/js/tool-display-mode.js" defer></script>
143158
</body>
144159

145160
</html>

0 commit comments

Comments
 (0)