Regroup Toolbox by creator goals and polish role banner tiles - PR_26155_025-027-toolbox-creator-groups-polish

Author: ToolboxAid

assets/theme-v2/css/panels.css

@@ -73,7 +73,7 @@
   display: grid;
   place-items: center;
   background: var(--panel-overlay);
-  overflow: hidden
+  overflow: visible
 }
 
 .card-media img {
@@ -86,10 +86,14 @@
   display: block;
   width: 100%;
   height: 100%;
-  overflow: hidden;
+  overflow: visible;
   border-radius: inherit
 }
 
+.control-card:has(.card-media-link) {
+  overflow: visible
+}
+
 .card-media-link img {
   transition: transform var(--transition-duration-fast) ease
 }

assets/theme-v2/partials/header-nav.html

@@ -9,22 +9,12 @@
         <a data-nav-link data-route="toolbox" href="toolbox/index.html">Toolbox &#9662;</a>
         <div class="sub-menu sub-menu--toolbox" data-toolbox-menu aria-label="Toolbox menu">
           <div class="nav-item nav-popout-item" data-toolbox-menu-group>
-            <a data-toolbox-menu-group-label data-route="toolbox" href="toolbox/index.html" aria-haspopup="true">AI &#9656;</a>
-            <div class="sub-menu sub-menu--nested" data-toolbox-submenu aria-label="AI tools">
+            <a data-toolbox-menu-group-label data-route="toolbox" href="toolbox/index.html" aria-haspopup="true">Build &#9656;</a>
+            <div class="sub-menu sub-menu--nested" data-toolbox-submenu aria-label="Build tools">
               <a data-nav-link data-toolbox-menu-item data-route="ai-assistant" href="toolbox/ai-assistant/index.html">AI Assistant</a>
-            </div>
-          </div>
-          <div class="nav-item nav-popout-item" data-toolbox-menu-group>
-            <a data-toolbox-menu-group-label data-route="toolbox" href="toolbox/index.html" aria-haspopup="true">Planning &#9656;</a>
-            <div class="sub-menu sub-menu--nested" data-toolbox-submenu aria-label="Planning tools">
               <a data-nav-link data-toolbox-menu-item data-route="project-workspace" href="toolbox/project-workspace/index.html">Project Workspace</a>
               <a data-nav-link data-toolbox-menu-item data-route="game-design" href="toolbox/game-design/index.html">Game Design</a>
               <a data-nav-link data-toolbox-menu-item data-route="game-configuration" href="toolbox/game-configuration/index.html">Game Configuration</a>
-            </div>
-          </div>
-          <div class="nav-item nav-popout-item" data-toolbox-menu-group>
-            <a data-toolbox-menu-group-label data-route="toolbox" href="toolbox/index.html" aria-haspopup="true">Content &#9656;</a>
-            <div class="sub-menu sub-menu--nested" data-toolbox-submenu aria-label="Content tools">
               <a data-nav-link data-toolbox-menu-item data-route="tool-assets" href="toolbox/assets/index.html">Assets</a>
               <a data-nav-link data-toolbox-menu-item data-route="colors" href="toolbox/colors/index.html">Colors</a>
               <a data-nav-link data-toolbox-menu-item data-route="fonts" href="toolbox/fonts/index.html">Fonts</a>
@@ -33,57 +23,57 @@
               <a data-nav-link data-toolbox-menu-item data-route="objects" href="toolbox/objects/index.html">Objects</a>
               <a data-nav-link data-toolbox-menu-item data-route="worlds" href="toolbox/worlds/index.html">Worlds</a>
               <a data-nav-link data-toolbox-menu-item data-route="animations" href="toolbox/animations/index.html">Animations</a>
+              <a data-nav-link data-toolbox-menu-item data-route="build-game" href="toolbox/build-game/index.html">Build Game</a>
+              <a data-nav-link data-toolbox-menu-item data-route="code" href="toolbox/code/index.html">Custom Extensions</a>
             </div>
           </div>
           <div class="nav-item nav-popout-item" data-toolbox-menu-group>
-            <a data-toolbox-menu-group-label data-route="toolbox" href="toolbox/index.html" aria-haspopup="true">Media & Audio &#9656;</a>
-            <div class="sub-menu sub-menu--nested" data-toolbox-submenu aria-label="Media & Audio tools">
+            <a data-toolbox-menu-group-label data-route="toolbox" href="toolbox/index.html" aria-haspopup="true">Media &#9656;</a>
+            <div class="sub-menu sub-menu--nested" data-toolbox-submenu aria-label="Media tools">
               <a data-nav-link data-toolbox-menu-item data-route="audio" href="toolbox/audio/index.html">Audio</a>
               <a data-nav-link data-toolbox-menu-item data-route="music" href="toolbox/music/index.html">Music</a>
               <a data-nav-link data-toolbox-menu-item data-route="voices" href="toolbox/voices/index.html">Voices</a>
               <a data-nav-link data-toolbox-menu-item data-route="videos" href="toolbox/videos/index.html">Videos</a>
+              <a data-nav-link data-toolbox-menu-item data-route="midi" href="toolbox/midi/index.html">MIDI</a>
+              <a data-nav-link data-toolbox-menu-item data-route="particles" href="toolbox/particles/index.html">Particles</a>
+              <a data-nav-link data-toolbox-menu-item data-route="audio-effects" href="toolbox/audio-effects/index.html">Audio Effects</a>
+              <a data-nav-link data-toolbox-menu-item data-route="speech-to-text" href="toolbox/speech-to-text/index.html">Voice Capture</a>
+              <a data-nav-link data-toolbox-menu-item data-route="text-to-speech" href="toolbox/text-to-speech/index.html">Voice Output</a>
             </div>
           </div>
           <div class="nav-item nav-popout-item" data-toolbox-menu-group>
-            <a data-toolbox-menu-group-label data-route="toolbox" href="toolbox/index.html" aria-haspopup="true">Build & Test &#9656;</a>
-            <div class="sub-menu sub-menu--nested" data-toolbox-submenu aria-label="Build & Test tools">
-              <a data-nav-link data-toolbox-menu-item data-route="build-game" href="toolbox/build-game/index.html">Build Game</a>
+            <a data-toolbox-menu-group-label data-route="toolbox" href="toolbox/index.html" aria-haspopup="true">Test &#9656;</a>
+            <div class="sub-menu sub-menu--nested" data-toolbox-submenu aria-label="Test tools">
               <a data-nav-link data-toolbox-menu-item data-route="game-testing" href="toolbox/game-testing/index.html">Game Testing</a>
               <a data-nav-link data-toolbox-menu-item data-route="tool-controls" href="toolbox/controls/index.html">Controls</a>
               <a data-nav-link data-toolbox-menu-item data-route="hitboxes" href="toolbox/hitboxes/index.html">Hitboxes</a>
-              <a data-nav-link data-toolbox-menu-item data-route="saved-data" href="toolbox/saved-data/index.html">Saved Data</a>
               <a data-nav-link data-toolbox-menu-item data-route="debug" href="toolbox/debug/index.html">Debug</a>
               <a data-nav-link data-toolbox-menu-item data-route="performance" href="toolbox/performance/index.html">Performance</a>
               <a data-nav-link data-toolbox-menu-item data-route="events" href="toolbox/events/index.html">Events</a>
             </div>
           </div>
           <div class="nav-item nav-popout-item" data-toolbox-menu-group>
-            <a data-toolbox-menu-group-label data-route="toolbox" href="toolbox/index.html" aria-haspopup="true">Share & Community &#9656;</a>
-            <div class="sub-menu sub-menu--nested" data-toolbox-submenu aria-label="Share & Community tools">
+            <a data-toolbox-menu-group-label data-route="toolbox" href="toolbox/index.html" aria-haspopup="true">Share &#9656;</a>
+            <div class="sub-menu sub-menu--nested" data-toolbox-submenu aria-label="Share tools">
               <a data-nav-link data-toolbox-menu-item data-route="tool-publish" href="toolbox/publish/index.html">Publish</a>
               <a data-nav-link data-toolbox-menu-item data-route="tool-marketplace" href="toolbox/marketplace/index.html">Marketplace</a>
               <a data-nav-link data-toolbox-menu-item data-route="tool-community" href="toolbox/community/index.html">Community</a>
               <a data-nav-link data-toolbox-menu-item data-route="languages" href="toolbox/languages/index.html">Languages</a>
-              <a data-nav-link data-toolbox-menu-item data-route="achievements" href="toolbox/achievements/index.html">Achievements</a>
-              <a data-nav-link data-toolbox-menu-item data-route="ratings" href="toolbox/ratings/index.html">Ratings</a>
-            </div>
-          </div>
-          <div class="nav-item nav-popout-item" data-toolbox-menu-group>
-            <a data-toolbox-menu-group-label data-route="toolbox" href="toolbox/index.html" aria-haspopup="true">Hidden Capability &#9656;</a>
-            <div class="sub-menu sub-menu--nested" data-toolbox-submenu aria-label="Hidden Capability tools">
               <a data-nav-link data-toolbox-menu-item data-route="cloud" href="toolbox/cloud/index.html">Cloud</a>
-              <a data-nav-link data-toolbox-menu-item data-route="code" href="toolbox/code/index.html">Custom Extensions</a>
               <a data-nav-link data-toolbox-menu-item data-route="tool-learn" href="toolbox/learn/index.html">Creator Learning</a>
-              <a data-nav-link data-toolbox-menu-item data-route="midi" href="toolbox/midi/index.html">MIDI</a>
-              <a data-nav-link data-toolbox-menu-item data-route="particles" href="toolbox/particles/index.html">Particles</a>
-              <a data-nav-link data-toolbox-menu-item data-route="audio-effects" href="toolbox/audio-effects/index.html">Audio Effects</a>
-              <a data-nav-link data-toolbox-menu-item data-route="speech-to-text" href="toolbox/speech-to-text/index.html">Voice Capture</a>
-              <a data-nav-link data-toolbox-menu-item data-route="text-to-speech" href="toolbox/text-to-speech/index.html">Voice Output</a>
             </div>
           </div>
           <div class="nav-item nav-popout-item" data-toolbox-menu-group>
-            <a data-toolbox-menu-group-label data-route="toolbox" href="toolbox/index.html" aria-haspopup="true">Admin Tools &#9656;</a>
-            <div class="sub-menu sub-menu--nested" data-toolbox-submenu aria-label="Admin Tools tools">
+            <a data-toolbox-menu-group-label data-route="toolbox" href="toolbox/index.html" aria-haspopup="true">Account &#9656;</a>
+            <div class="sub-menu sub-menu--nested" data-toolbox-submenu aria-label="Account tools">
+              <a data-nav-link data-toolbox-menu-item data-route="saved-data" href="toolbox/saved-data/index.html">Saved Data</a>
+              <a data-nav-link data-toolbox-menu-item data-route="achievements" href="toolbox/achievements/index.html">Achievements</a>
+              <a data-nav-link data-toolbox-menu-item data-route="ratings" href="toolbox/ratings/index.html">Ratings</a>
+            </div>
+          </div>
+          <div class="nav-item nav-popout-item" data-toolbox-menu-group data-toolbox-admin-nav-group hidden>
+            <a data-toolbox-menu-group-label data-route="toolbox" href="toolbox/index.html" aria-haspopup="true">Admin &#9656;</a>
+            <div class="sub-menu sub-menu--nested" data-toolbox-submenu aria-label="Admin tools">
               <a data-nav-link data-toolbox-menu-item data-route="users" href="toolbox/users/index.html">Users</a>
               <a data-nav-link data-toolbox-menu-item data-route="environments" href="toolbox/environments/index.html">Environments</a>
               <a data-nav-link data-toolbox-menu-item data-route="game-migration" href="toolbox/game-migration/index.html">Game Migration</a>

docs_build/dev/reports/toolbox-banner-and-image-polish.md

@@ -0,0 +1,31 @@
+# Toolbox Banner And Image Polish
+
+Stack item: `PR_26155_027-toolbox-banner-and-image-polish`
+
+## Summary
+
+- Added the existing Theme V2 `callout` class to the role banner container.
+- Preserved the single-line clickable banner text for Guest, Creator, and Admin roles.
+- Kept preview images linked to the same route as the Open Tool button.
+- Updated shared Theme V2 card media overflow so hover scale/rotate is not clipped.
+
+## Theme V2 Gap Findings
+
+- Banner background did not require new CSS; existing Theme V2 `callout` styling covered it.
+- Existing preview hover styling already lived in shared Theme V2 `panels.css`, but the media/link containers clipped the hover transform.
+- Adjusted the reusable Theme V2 card media pattern in `assets/theme-v2/css/panels.css`.
+- No inline styles, style blocks, page-local CSS, or tool-local CSS were added.
+
+## Validation Notes
+
+- Targeted Playwright checks verify Guest, Creator, and Admin banners render with a non-transparent background.
+- Targeted Playwright checks verify preview image hover applies scale/rotate and the relevant containers use visible overflow.
+- Targeted Playwright checks verify preview image click opens the same tool route as Open Tool.
+- `npm run test:workspace-v2` passed.
+
+## Manual Test Notes
+
+- Guest banner: `GUEST VIEW • Preview only • Sign in to create`.
+- Creator banner: `CREATOR VIEW • Project tools enabled • Switch to Admin View`.
+- Admin banner: `ADMIN VIEW • Planned tools visible • Switch to Creator View`.
+- The Assets preview image routes to `/toolbox/assets/index.html`, matching Open Tool.

docs_build/dev/reports/toolbox-creator-grouping.md

@@ -0,0 +1,38 @@
+# Toolbox Creator Grouping
+
+Stack item: `PR_26155_025-toolbox-creator-grouping`
+
+## Summary
+
+- Reworked Toolbox groupings around creator goals:
+  - Build
+  - Media
+  - Test
+  - Share
+  - Account
+  - Admin
+- Updated `toolbox/tools-page-accordions.js` rendering data to use the six groups.
+- Updated `toolbox/toolRegistry.js` category metadata to match the six groups.
+- Updated the shared Toolbox header menu to use the same creator-goal group labels.
+- Preserved existing role simulation for `?role=guest`, `?role=user`, and `?role=admin`.
+
+## Role Behavior
+
+- Guest and Creator views show the public preview-safe tool groups: Build, Media, Test, Share, and Account.
+- Admin view shows Build, Media, Test, Share, Account, and Admin.
+- The Admin group remains hidden outside admin role view.
+- Arcade remains outside Toolbox.
+
+## Validation Notes
+
+- Read `docs_build/dev/PROJECT_INSTRUCTIONS.md` before changes.
+- Ran `node scripts/validate-active-tools-surface.mjs`: passed.
+- Ran `node scripts/validate-tool-registry.mjs`: passed.
+- Ran `npm run test:workspace-v2`: passed. This is the legacy command name for the Project Workspace validation lane.
+
+## Manual Test Notes
+
+- `/toolbox/index.html?role=guest` shows Build, Media, Test, Share, and Account groups.
+- `/toolbox/index.html?role=user` keeps Admin hidden.
+- `/toolbox/index.html?role=admin` shows the Admin group and planned/admin tiles.
+- Banner switch links continue Guest -> Creator, Creator -> Admin, and Admin -> Creator.

docs_build/dev/reports/toolbox-worlds-objects-naming.md

@@ -0,0 +1,48 @@
+# Toolbox Worlds Objects Naming
+
+Stack item: `PR_26155_026-toolbox-worlds-objects-naming`
+
+## Summary
+
+- Verified creator-facing labels remain:
+  - Objects
+  - Worlds
+  - Controls
+  - Hitboxes
+  - Saved Data
+- Preserved `Worlds` as the parent tool label.
+- Preserved `Objects` as the parent tool label.
+- Kept technical child capability terms beneath the relevant parent cards instead of top-level Toolbox groups.
+
+## Planned Child Capabilities
+
+- Worlds card now lists planned world types:
+  - Vector
+  - Tilemap
+  - Isometric
+  - Hex
+- Objects card now lists planned object types:
+  - Character
+  - Enemy
+  - Decoration
+  - Interactive
+  - Vector Object
+  - Sprite Object
+
+## Validation Notes
+
+- Targeted validation confirms old labels are not active top-level tool labels:
+  - Object Vector
+  - World Vector
+  - Input Mapping
+  - Collision Inspector
+  - Storage Inspector
+  - Save Data
+- Targeted Playwright checks confirm Objects and Worlds render as parent cards and planned child capability text remains beneath them.
+- No DB, auth, persistence, or real tool implementation was added.
+
+## Manual Test Notes
+
+- `/toolbox/index.html` shows Objects and Worlds as creator-facing parent cards.
+- Vector, Tilemap, Isometric, and Hex appear only as planned world-type child capability text beneath Worlds.
+- Character, Enemy, Decoration, Interactive, Vector Object, and Sprite Object appear only as planned object-type child capability text beneath Objects.

scripts/validate-active-tools-surface.mjs

@@ -125,8 +125,28 @@ async function main() {
   if (!/GUEST VIEW/.test(toolboxIndex + "\n" + toolsAccordions) || !/"guest"/.test(toolsAccordions)) {
     issues.push("Toolbox role simulation must support an explicit Guest view.");
   }
-  if (!/"group": "Content"/.test(toolsAccordions) || /"group": "Assets"/.test(toolsAccordions)) {
-    issues.push("Toolbox Content group must replace the old Assets group label while keeping the Assets tool label.");
+  for (const groupName of ["Build", "Media", "Test", "Share", "Account", "Admin"]) {
+    if (!toolsAccordions.includes(`"group": "${groupName}"`) || !headerNav.includes(`${groupName} ▸`)) {
+      issues.push(`Toolbox creator-goal group is missing from active wiring: ${groupName}.`);
+    }
+  }
+  if (/"group": "(?:AI|Planning|Content|Media & Audio|Build & Test|Share & Community|Hidden Capability|Admin Tools)"/.test(toolsAccordions)) {
+    issues.push("Toolbox index must use creator-goal groups instead of legacy technical grouping labels.");
+  }
+  if (!/data-toolbox-admin-nav-group hidden/.test(headerNav) || !/data-toolbox-admin-nav-group/.test(toolsAccordions)) {
+    issues.push("Toolbox Admin navigation group must be role-gated for the admin role view.");
+  }
+  if (!/Planned world types/.test(toolsAccordions) || !/Vector/.test(toolsAccordions) || !/Tilemap/.test(toolsAccordions) || !/Isometric/.test(toolsAccordions) || !/Hex/.test(toolsAccordions)) {
+    issues.push("Worlds must preserve planned world-type child capabilities: Vector, Tilemap, Isometric, and Hex.");
+  }
+  if (!/Planned object types/.test(toolsAccordions) || !/Character/.test(toolsAccordions) || !/Enemy/.test(toolsAccordions) || !/Decoration/.test(toolsAccordions) || !/Interactive/.test(toolsAccordions) || !/Vector Object/.test(toolsAccordions) || !/Sprite Object/.test(toolsAccordions)) {
+    issues.push("Objects must preserve planned object-type child capabilities.");
+  }
+  if (!/container callout/.test(toolboxIndex)) {
+    issues.push("Toolbox role banner container must use an existing Theme V2 background panel class.");
+  }
+  if (/Object Vector|World Vector|Input Mapping|Collision Inspector|Storage Inspector|Save Data/.test(toolsAccordions + "\n" + headerNav)) {
+    issues.push("Toolbox must use current creator-facing tool labels for Objects, Worlds, Controls, Hitboxes, and Saved Data.");
   }
   if (!/card-media-link/.test(toolsAccordions)) {
     issues.push("Toolbox preview images must be linked through the shared card media link pattern.");