Apply wide tool layout across Toolbox HTML pages - PR_26155_056-057-tool-layout-all-pages

Author: ToolboxAid

docs_build/dev/reports/tool-layout-wide-all-tool-pages.md

@@ -0,0 +1,77 @@
+# Tool Layout Wide All Tool Pages
+
+Stacked PR bundle:
+- PR_26155_056-tool-layout-wide-all-tool-pages
+- PR_26155_057-tool-layout-width-validation-report
+
+## Summary
+
+Applied the approved reusable Theme V2 wide tool layout pattern across first-class Toolbox tool pages.
+
+Approved existing Theme V2 classes used:
+- `container--tool-wide`
+- `tool-workspace--wide`
+
+No CSS was added. No CSS was modified. No page-local CSS, inline styles, style blocks, or tool-local CSS were introduced.
+
+## Implementation Notes
+
+Audited 43 `toolbox/**/*.html` files.
+
+After this PR:
+- 41 active first-class Toolbox tool pages use the wide layout pattern.
+- `toolbox/project-workspace/index.html` was already compliant before this PR.
+- 40 additional active Toolbox tool pages were updated in this PR.
+- `toolbox/_tool_template-v2/index.html` was also updated so future copied tool shells inherit the approved wide layout.
+- `toolbox/index.html` was skipped because it is the Toolbox listing surface, not a first-class tool shell.
+
+The page-level change is intentionally limited to:
+- `class="container"` to `class="container container--tool-wide"`
+- `class="tool-workspace"` to `class="tool-workspace tool-workspace--wide"`
+
+During targeted Playwright validation, `toolbox/assets/index.html` exposed a missing ToolDisplayMode character image request derived from the `assets` slug. A targeted asset reference correction was applied to `toolbox/assets/index.html`, `toolbox/code/index.html`, `toolbox/midi/index.html`, and `toolbox/particles/index.html` so they use the existing Theme V2 generic character image at `assets/theme-v2/images/characters/index.png`.
+
+## Validation Notes
+
+Impacted lane:
+- Project Workspace targeted lane, because the representative layout coverage lives in the Project Workspace Playwright lane.
+- Legacy command/test lane `npm run test:workspace-v2`, because shared toolbox shell wiring changed across active Toolbox pages.
+
+Skipped lanes:
+- Full samples smoke test was skipped because no samples changed.
+- Archive/deprecated lanes were skipped because no archived material changed.
+- Full suite was skipped because the change reused existing Theme V2 layout classes and did not change shared runtime, parser, DB, or cross-tool data behavior.
+
+Commands run:
+- `node --check tests/playwright/tools/ProjectWorkspaceMockRepository.spec.mjs`
+- `npm run test:lane:project-workspace`
+- `npm run test:workspace-v2`
+- `git diff --check`
+
+Results:
+- `node --check tests/playwright/tools/ProjectWorkspaceMockRepository.spec.mjs`: passed.
+- `npm run test:lane:project-workspace`: passed, 6 tests.
+- `npm run test:workspace-v2`: passed, 4 tests.
+- `git diff --check`: passed.
+
+Manual/targeted page coverage included representative Toolbox tool pages across:
+- Create: `toolbox/objects/index.html`
+- Build: `toolbox/game-design/index.html`
+- Content: `toolbox/assets/index.html`
+- Media: `toolbox/audio/index.html`
+- Test: `toolbox/controls/index.html`
+- Share: `toolbox/publish/index.html`
+- Account: `toolbox/saved-data/index.html`
+
+The representative Playwright check verifies:
+- `.container--tool-wide` is visible.
+- `.tool-workspace--wide` is visible.
+- The wide container uses more than 95% of a 1440px viewport.
+- The center panel remains dominant.
+- Left and right panels remain balanced.
+- No inline style attributes, style blocks, or inline script blocks exist on the checked pages.
+- No failed requests, page errors, or console errors occur.
+
+## Theme V2 Gap Findings
+
+No Theme V2 gap was found. The existing approved wide layout classes were sufficient.

docs_build/dev/reports/tool-layout-width-validation-report.md

@@ -0,0 +1,148 @@
+# Tool Layout Width Validation Report
+
+Stacked PR bundle:
+- PR_26155_056-tool-layout-wide-all-tool-pages
+- PR_26155_057-tool-layout-width-validation-report
+
+## Checked Toolbox HTML Pages
+
+Checked 43 `toolbox/**/*.html` pages:
+
+- `toolbox/_tool_template-v2/index.html`
+- `toolbox/achievements/index.html`
+- `toolbox/ai-assistant/index.html`
+- `toolbox/animations/index.html`
+- `toolbox/assets/index.html`
+- `toolbox/audio-effects/index.html`
+- `toolbox/audio/index.html`
+- `toolbox/build-game/index.html`
+- `toolbox/characters/index.html`
+- `toolbox/cloud/index.html`
+- `toolbox/code/index.html`
+- `toolbox/colors/index.html`
+- `toolbox/community/index.html`
+- `toolbox/controls/index.html`
+- `toolbox/debug/index.html`
+- `toolbox/environments/index.html`
+- `toolbox/events/index.html`
+- `toolbox/fonts/index.html`
+- `toolbox/game-configuration/index.html`
+- `toolbox/game-design/index.html`
+- `toolbox/game-migration/index.html`
+- `toolbox/game-testing/index.html`
+- `toolbox/hitboxes/index.html`
+- `toolbox/index.html`
+- `toolbox/languages/index.html`
+- `toolbox/marketplace/index.html`
+- `toolbox/midi/index.html`
+- `toolbox/music/index.html`
+- `toolbox/objects/index.html`
+- `toolbox/particles/index.html`
+- `toolbox/performance/index.html`
+- `toolbox/platform-settings/index.html`
+- `toolbox/project-workspace/index.html`
+- `toolbox/publish/index.html`
+- `toolbox/ratings/index.html`
+- `toolbox/saved-data/index.html`
+- `toolbox/speech-to-text/index.html`
+- `toolbox/sprites/index.html`
+- `toolbox/text-to-speech/index.html`
+- `toolbox/users/index.html`
+- `toolbox/videos/index.html`
+- `toolbox/voices/index.html`
+- `toolbox/worlds/index.html`
+
+## Pages Updated
+
+Updated active Toolbox tool pages:
+
+- `toolbox/achievements/index.html`
+- `toolbox/ai-assistant/index.html`
+- `toolbox/animations/index.html`
+- `toolbox/assets/index.html`
+- `toolbox/audio-effects/index.html`
+- `toolbox/audio/index.html`
+- `toolbox/build-game/index.html`
+- `toolbox/characters/index.html`
+- `toolbox/cloud/index.html`
+- `toolbox/code/index.html`
+- `toolbox/colors/index.html`
+- `toolbox/community/index.html`
+- `toolbox/controls/index.html`
+- `toolbox/debug/index.html`
+- `toolbox/environments/index.html`
+- `toolbox/events/index.html`
+- `toolbox/fonts/index.html`
+- `toolbox/game-configuration/index.html`
+- `toolbox/game-design/index.html`
+- `toolbox/game-migration/index.html`
+- `toolbox/game-testing/index.html`
+- `toolbox/hitboxes/index.html`
+- `toolbox/languages/index.html`
+- `toolbox/marketplace/index.html`
+- `toolbox/midi/index.html`
+- `toolbox/music/index.html`
+- `toolbox/objects/index.html`
+- `toolbox/particles/index.html`
+- `toolbox/performance/index.html`
+- `toolbox/platform-settings/index.html`
+- `toolbox/publish/index.html`
+- `toolbox/ratings/index.html`
+- `toolbox/saved-data/index.html`
+- `toolbox/speech-to-text/index.html`
+- `toolbox/sprites/index.html`
+- `toolbox/text-to-speech/index.html`
+- `toolbox/users/index.html`
+- `toolbox/videos/index.html`
+- `toolbox/voices/index.html`
+- `toolbox/worlds/index.html`
+
+Updated template source:
+
+- `toolbox/_tool_template-v2/index.html`
+
+Already compliant before this PR:
+
+- `toolbox/project-workspace/index.html`
+
+## Skipped Pages
+
+- `toolbox/index.html`: skipped because it is the Toolbox listing/index surface and does not contain a `tool-workspace` shell.
+
+## Validation Results
+
+Automated audit:
+- 43 Toolbox HTML pages checked.
+- 42 pages contain a `tool-workspace` shell.
+- All 42 tool-workspace shell pages now include `container--tool-wide` and `tool-workspace--wide`.
+- No checked Toolbox HTML page contains page-local style blocks, inline style attributes, or inline script blocks.
+- ToolDisplayMode badge and character image paths resolve for all Toolbox pages under the current helper rules.
+
+Representative Playwright coverage:
+- Create: `toolbox/objects/index.html`
+- Build: `toolbox/game-design/index.html`
+- Content: `toolbox/assets/index.html`
+- Media: `toolbox/audio/index.html`
+- Test: `toolbox/controls/index.html`
+- Share: `toolbox/publish/index.html`
+- Account: `toolbox/saved-data/index.html`
+
+The representative pages all loaded with:
+- Visible `.container--tool-wide`
+- Visible `.tool-workspace--wide`
+- Wide desktop container usage at 1440px
+- Balanced side panels
+- Dominant center panel
+- No console errors
+- No failed requests
+
+Project Workspace is not the only visible wide-layout page. The representative Playwright test validates seven additional Toolbox pages across the current creator-facing groups.
+
+## Commands Run
+
+- `node --check tests/playwright/tools/ProjectWorkspaceMockRepository.spec.mjs`
+- `npm run test:lane:project-workspace`
+- `npm run test:workspace-v2`
+- `git diff --check`
+
+All final validation commands passed.

tests/playwright/tools/ProjectWorkspaceMockRepository.spec.mjs

@@ -190,6 +190,51 @@ test("Project Workspace uses the wide Theme V2 tool layout at desktop widths", a
   }
 });
 
+test("representative Toolbox tool pages use the wide Theme V2 layout", async ({ page }) => {
+  await page.setViewportSize({ width: 1440, height: 1100 });
+  const failures = await openRepoPage(page, "/toolbox/objects/index.html");
+  const representativeToolPages = [
+    { group: "Create", path: "/toolbox/objects/index.html" },
+    { group: "Build", path: "/toolbox/game-design/index.html" },
+    { group: "Content", path: "/toolbox/assets/index.html" },
+    { group: "Media", path: "/toolbox/audio/index.html" },
+    { group: "Test", path: "/toolbox/controls/index.html" },
+    { group: "Share", path: "/toolbox/publish/index.html" },
+    { group: "Account", path: "/toolbox/saved-data/index.html" }
+  ];
+
+  try {
+    for (const toolPage of representativeToolPages) {
+      await page.goto(`${failures.server.baseUrl}${toolPage.path}`, { waitUntil: "networkidle" });
+      await expect(page.locator(".container--tool-wide")).toBeVisible();
+      await expect(page.locator(".tool-workspace--wide")).toBeVisible();
+      await expect(page.locator("style, [style], script:not([src])")).toHaveCount(0);
+      const layout = await page.locator(".tool-workspace--wide").evaluate((workspace) => {
+        const container = workspace.closest(".container--tool-wide");
+        const columns = getComputedStyle(workspace).gridTemplateColumns
+          .split(" ")
+          .map((value) => Number.parseFloat(value));
+        const [left, center, right] = columns;
+        return {
+          center,
+          containerWidth: container.getBoundingClientRect().width,
+          left,
+          right,
+          viewportWidth: window.innerWidth
+        };
+      });
+      expect(layout.containerWidth, `${toolPage.group} page uses wide container`).toBeGreaterThan(1300);
+      expect(layout.containerWidth / layout.viewportWidth, `${toolPage.group} page reduces side margins`).toBeGreaterThan(0.95);
+      expect(Math.abs(layout.left - layout.right), `${toolPage.group} side panels are balanced`).toBeLessThan(2);
+      expect(layout.center, `${toolPage.group} center panel is dominant`).toBeGreaterThan(layout.left);
+    }
+
+    await expectNoPageFailures(failures);
+  } finally {
+    await failures.server.close();
+  }
+});
+
 test("Learn Getting Started documents screen and layout guidance", async ({ page }) => {
   const failures = await openRepoPage(page, "/learn/index.html");
 

toolbox/_tool_template-v2/index.html

@@ -22,8 +22,8 @@ <h1>Tool Template</h1>
             </div>
         </section>
         <section class="section">
-            <div class="container">
-                <div class="tool-workspace">
+            <div class="container container--tool-wide">
+                <div class="tool-workspace tool-workspace--wide">
                     <aside class="tool-column tool-group-ai-learning">
                         <div class="tool-column-header molten-orange">
                             <h2>Toolbox</h2>

toolbox/achievements/index.html

@@ -22,8 +22,8 @@ <h1>Achievements</h1>
             </div>
         </section>
         <section class="section">
-            <div class="container">
-                <div class="tool-workspace">
+            <div class="container container--tool-wide">
+                <div class="tool-workspace tool-workspace--wide">
                     <aside class="tool-column tool-group-community-marketplace">
                         <div class="tool-column-header molten-orange">
                             <h2>Achievements</h2>

toolbox/ai-assistant/index.html

@@ -21,8 +21,8 @@ <h1>AI Assistant</h1>
             </div>
         </section>
         <section class="section">
-            <div class="container">
-                <div class="tool-workspace">
+            <div class="container container--tool-wide">
+                <div class="tool-workspace tool-workspace--wide">
                     <aside class="tool-column tool-group-ai-learning">
                         <div class="tool-column-header molten-orange">
                             <h2>Toolbox</h2>

toolbox/animations/index.html

@@ -22,8 +22,8 @@ <h1>Animations</h1>
             </div>
         </section>
         <section class="section">
-            <div class="container">
-                <div class="tool-workspace">
+            <div class="container container--tool-wide">
+                <div class="tool-workspace tool-workspace--wide">
                     <aside class="tool-column tool-group-build-create">
                         <div class="tool-column-header molten-orange">
                             <h2>Animations</h2>

toolbox/assets/index.html

@@ -21,8 +21,8 @@ <h1>Assets</h1>
             </div>
         </section>
         <section class="section">
-            <div class="container">
-                <div class="tool-workspace">
+            <div class="container container--tool-wide">
+                <div class="tool-workspace tool-workspace--wide">
                     <aside class="tool-column tool-group-content-assets">
                         <div class="tool-column-header molten-orange">
                             <h2>Toolbox</h2>
@@ -34,7 +34,7 @@ <h2>Toolbox</h2>
                             </details>
                         </div>
                     </aside>
-                    <div data-tool-display-mode data-asset-root="../../assets/theme-v2/images" data-tool-slug="assets" data-tool-icon-src="../../assets/theme-v2/images/badges/index.png"></div>
+                    <div data-tool-display-mode data-asset-root="../../assets/theme-v2/images" data-tool-slug="assets" data-tool-icon-src="../../assets/theme-v2/images/badges/index.png" data-tool-character-src="../../assets/theme-v2/images/characters/index.png"></div>
                     <section class="tool-center-panel"><img src="../../assets/theme-v2/images/forge-bot-single.png" alt="ForgeBot">
                         <h2>Workspace</h2>
                         <p>Assets: Create sprites, animations, vectors and palettes.</p>

toolbox/audio-effects/index.html

@@ -22,8 +22,8 @@ <h1>Audio Effects</h1>
             </div>
         </section>
         <section class="section">
-            <div class="container">
-                <div class="tool-workspace">
+            <div class="container container--tool-wide">
+                <div class="tool-workspace tool-workspace--wide">
                     <aside class="tool-column tool-group-ai-learning">
                         <div class="tool-column-header molten-orange">
                             <h2>Audio Effects</h2>

toolbox/audio/index.html

@@ -22,8 +22,8 @@ <h1>Audio</h1>
             </div>
         </section>
         <section class="section">
-            <div class="container">
-                <div class="tool-workspace">
+            <div class="container container--tool-wide">
+                <div class="tool-workspace tool-workspace--wide">
                     <aside class="tool-column tool-group-media-audio">
                         <div class="tool-column-header molten-orange">
                             <h2>Audio</h2>