Safely reapply Toolbox header popout and update tool NAV usage - PR_26152_257-toolbox-header-popout-safe-reapply

Author: ToolboxAid

GameFoundryStudio/assets/css/theme/v2/layout.css

@@ -141,28 +141,28 @@ div {
   border-bottom: var(--border-standard)
 }
 
-.nav {
+.site-header .nav {
   display: flex;
   align-items: center;
   gap: var(--space-20);
   padding: var(--space-14) var(--space-0);
   overflow: visible
 }
 
-.brand {
+.site-header .brand {
   display: flex;
   align-items: center;
   gap: var(--space-10);
   font-weight: var(--font-weight-heavy);
   letter-spacing: var(--letter-spacing-brand)
 }
 
-.brand img {
+.site-header .brand img {
   width: var(--space-34);
   height: var(--space-34)
 }
 
-.nav-links {
+.site-header .nav-links {
   display: flex;
   align-items: center;
   gap: var(--space-14);
@@ -171,37 +171,37 @@ div {
   overflow: visible
 }
 
-.nav-links a,
-.nav-item>a {
+.site-header .nav-links a,
+.site-header .nav-item>a {
   color: var(--muted);
   font-size: var(--font-size-md)
 }
 
-.nav-links a.active,
-.nav-links a:hover,
-.nav-item:hover>a,
-.nav-item:focus-within>a,
-.nav-item>a.active {
+.site-header .nav-links a.active,
+.site-header .nav-links a:hover,
+.site-header .nav-item:hover>a,
+.site-header .nav-item:focus-within>a,
+.site-header .nav-item>a.active {
   color: var(--gold)
 }
 
-.nav-actions {
+.site-header .nav-actions {
   display: flex;
   gap: var(--space-10)
 }
 
-.nav-item {
+.site-header .nav-item {
   position: relative;
   display: inline-flex;
   align-items: center
 }
 
-.nav-item>a {
+.site-header .nav-item>a {
   display: inline-flex;
   align-items: center
 }
 
-.sub-menu {
+.site-header .sub-menu {
   position: absolute;
   top: 100%;
   left: var(--space-0);
@@ -220,7 +220,7 @@ div {
   z-index: var(--z-index-lg)
 }
 
-.nav-item:after {
+.site-header .nav-item:after {
   content: "";
   position: absolute;
   left: var(--space-0);
@@ -229,26 +229,67 @@ div {
   height: var(--space-10)
 }
 
-.nav-item:hover .sub-menu,
-.nav-item:focus-within .sub-menu {
+.site-header .nav-item:hover>.sub-menu,
+.site-header .nav-item:focus-within>.sub-menu {
   opacity: 1;
   visibility: visible;
   pointer-events: auto
 }
 
-.sub-menu a {
+.site-header .sub-menu a {
   display: block;
   padding: var(--space-10) var(--space-12);
   border-radius: var(--space-10);
   white-space: nowrap
 }
 
-.sub-menu a:hover,
-.sub-menu a.active {
+.site-header .sub-menu a:hover,
+.site-header .sub-menu a.active {
   color: var(--gold);
   background: var(--orange-soft-strong)
 }
 
+.site-header .sub-menu--toolbox {
+  align-content: start
+}
+
+.site-header .sub-menu .nav-popout-item {
+  display: block;
+  width: 100%
+}
+
+.site-header .sub-menu .nav-popout-item>a {
+  display: flex;
+  justify-content: space-between;
+  gap: var(--space-18);
+  padding: var(--space-10) var(--space-12);
+  border-radius: var(--space-10);
+  white-space: nowrap
+}
+
+.site-header .sub-menu .nav-popout-item>.sub-menu {
+  top: var(--space-0);
+  left: calc(100% + var(--space-8));
+  opacity: 0;
+  visibility: hidden;
+  pointer-events: none
+}
+
+.site-header .sub-menu .nav-popout-item:hover>.sub-menu,
+.site-header .sub-menu .nav-popout-item:focus-within>.sub-menu {
+  opacity: 1;
+  visibility: visible;
+  pointer-events: auto
+}
+
+.site-header .sub-menu .nav-popout-item:after {
+  left: 100%;
+  right: auto;
+  top: var(--space-0);
+  width: var(--space-10);
+  height: 100%
+}
+
 .hero {
   padding: var(--space-54) var(--space-0) var(--space-34)
 }
@@ -472,7 +513,7 @@ div {
     grid-template-columns: var(--two-columns)
   }
 
-  .nav-actions {
+  .site-header .nav-actions {
     display: none
   }
 
@@ -511,25 +552,30 @@ div {
     grid-template-columns: var(--one-column)
   }
 
-  .nav {
+  .site-header .nav {
     align-items: flex-start;
     flex-direction: column
   }
 
-  .nav-links {
+  .site-header .nav-links {
     margin-left: var(--space-0)
   }
 
   .footer__groups {
     grid-template-columns: var(--one-column)
   }
 
-  .sub-menu {
+  .site-header .sub-menu,
+  .site-header .sub-menu .nav-popout-item>.sub-menu {
     position: static;
     opacity: 1;
     visibility: visible;
     pointer-events: auto;
     box-shadow: none;
     margin-top: var(--space-8)
   }
+
+  .site-header .sub-menu .nav-popout-item:after {
+    content: none
+  }
 }

GameFoundryStudio/assets/js/gamefoundry-partials.js

@@ -74,8 +74,9 @@
         "tools",
         "configuration-admin",
         "ai-assistant",
-        "animation-studio", "asset-studio", "code-studio", "input-studio", "midi-studio",
-        "object-vector-studio", "palette-manager", "particle-studio", "sound-studio", "storage-inspector",
+        "animation-studio", "asset-studio", "code-studio", "game-builder", "game-design-studio", "input-studio",
+        "midi-studio", "object-vector-studio", "palette-manager", "particle-studio", "sound-studio",
+        "storage-inspector", "world-vector-studio",
         "about", "vision", "mission", "roadmap", "release-notes",
         "account", "account-profile", "account-preferences", "account-security",
         "admin", "admin-site-settings", "admin-branding", "admin-themes", "admin-design-system", "admin-controls",

GameFoundryStudio/assets/partials/header-nav.html

@@ -7,41 +7,30 @@
     <nav class="nav-links" aria-label="Main navigation">
       <div class="nav-item">
         <a data-nav-link data-route="tools" href="tools/index.html">Toolbox &#9662;</a>
-        <div class="sub-menu" data-toolbox-menu aria-label="Toolbox menu">
-          <details data-toolbox-menu-accordion data-toolbox-menu-group>
-            <summary data-toolbox-menu-group-label>Objects</summary>
-            <a data-nav-link data-toolbox-menu-item data-route="object-vector-studio" href="tools/object-vector-studio.html">Vector</a>
-            <a data-nav-link data-toolbox-menu-item data-route="asset-studio" href="tools/asset-studio.html">Sprite</a>
-            <a data-nav-link data-toolbox-menu-item data-route="animation-studio" href="tools/animation-studio.html">Animated Sprite</a>
-            <a data-nav-link data-toolbox-menu-item data-route="code-studio" href="tools/code-studio.html">UI</a>
-          </details>
-          <details data-toolbox-menu-accordion data-toolbox-menu-group>
-            <summary data-toolbox-menu-group-label>Worlds</summary>
-            <a data-nav-link data-toolbox-menu-item data-route="world-vector-studio" href="tools/world-vector-studio.html">Vector</a>
-            <a data-nav-link data-toolbox-menu-item data-route="game-builder" href="tools/game-builder.html">Tilemap</a>
-            <a data-nav-link data-toolbox-menu-item data-route="particle-studio" href="tools/particle-studio.html">Isometric</a>
-            <a data-nav-link data-toolbox-menu-item data-route="game-design-studio" href="tools/game-design-studio.html">Hybrid</a>
-          </details>
-          <details data-toolbox-menu-accordion data-toolbox-menu-group>
-            <summary data-toolbox-menu-group-label>Audio</summary>
-            <a data-nav-link data-toolbox-menu-item data-route="sound-studio" href="tools/sound-studio.html">Audio</a>
-          </details>
-          <details data-toolbox-menu-accordion data-toolbox-menu-group>
-            <summary data-toolbox-menu-group-label>Input</summary>
-            <a data-nav-link data-toolbox-menu-item data-route="input-studio" href="tools/input-studio.html">Input</a>
-          </details>
-          <details data-toolbox-menu-accordion data-toolbox-menu-group>
-            <summary data-toolbox-menu-group-label>AI</summary>
-            <a data-nav-link data-toolbox-menu-item data-route="ai-assistant" href="tools/ai-assistant.html">AI</a>
-          </details>
-          <details data-toolbox-menu-accordion data-toolbox-menu-group>
-            <summary data-toolbox-menu-group-label>Colors</summary>
-            <a data-nav-link data-toolbox-menu-item data-route="palette-manager" href="tools/palette-manager.html">Colors</a>
-          </details>
-          <details data-toolbox-menu-accordion data-toolbox-menu-group>
-            <summary data-toolbox-menu-group-label>Assets</summary>
-            <a data-nav-link data-toolbox-menu-item data-route="storage-inspector" href="tools/storage-inspector.html">Assets</a>
-          </details>
+        <div class="sub-menu sub-menu--toolbox" data-toolbox-menu aria-label="Toolbox menu">
+          <a data-nav-link data-toolbox-menu-item data-route="ai-assistant" href="tools/ai-assistant.html">AI</a>
+          <a data-nav-link data-toolbox-menu-item data-route="storage-inspector" href="tools/storage-inspector.html">Assets</a>
+          <a data-nav-link data-toolbox-menu-item data-route="sound-studio" href="tools/sound-studio.html">Audio</a>
+          <a data-nav-link data-toolbox-menu-item data-route="palette-manager" href="tools/palette-manager.html">Colors</a>
+          <a data-nav-link data-toolbox-menu-item data-route="input-studio" href="tools/input-studio.html">Input</a>
+          <div class="nav-item nav-popout-item" data-toolbox-menu-group>
+            <a data-toolbox-menu-group-label data-route="tools" href="tools/index.html" aria-haspopup="true">Objects &#9656;</a>
+            <div class="sub-menu sub-menu--nested" data-toolbox-submenu aria-label="Objects tools">
+              <a data-nav-link data-toolbox-menu-item data-route="animation-studio" href="tools/animation-studio.html">Animated Sprite</a>
+              <a data-nav-link data-toolbox-menu-item data-route="asset-studio" href="tools/asset-studio.html">Sprite</a>
+              <a data-nav-link data-toolbox-menu-item data-route="code-studio" href="tools/code-studio.html">UI</a>
+              <a data-nav-link data-toolbox-menu-item data-route="object-vector-studio" href="tools/object-vector-studio.html">Vector</a>
+            </div>
+          </div>
+          <div class="nav-item nav-popout-item" data-toolbox-menu-group>
+            <a data-toolbox-menu-group-label data-route="tools" href="tools/index.html" aria-haspopup="true">Worlds &#9656;</a>
+            <div class="sub-menu sub-menu--nested" data-toolbox-submenu aria-label="World tools">
+              <a data-nav-link data-toolbox-menu-item data-route="game-design-studio" href="tools/game-design-studio.html">Hybrid</a>
+              <a data-nav-link data-toolbox-menu-item data-route="particle-studio" href="tools/particle-studio.html">Isometric</a>
+              <a data-nav-link data-toolbox-menu-item data-route="game-builder" href="tools/game-builder.html">Tilemap</a>
+              <a data-nav-link data-toolbox-menu-item data-route="world-vector-studio" href="tools/world-vector-studio.html">Vector</a>
+            </div>
+          </div>
         </div>
       </div>
       <div class="nav-item">

docs/dev/reports/toolbox_header_popout_safe_reapply.md

@@ -0,0 +1,62 @@
+# PR_26152_257 Toolbox Header Popout Safe Reapply
+
+## Scope
+
+- Reapplied the shared Toolbox header submenu as hover/focus popout navigation.
+- Kept internal `tools/` paths unchanged.
+- Updated root shared-header tool pages to load the current Theme V2 shared layer after the existing tool page stylesheet.
+- Did not modify `tools/tools-page-accordions.js`.
+- Did not touch samples.
+- Did not run automated tests per request.
+
+## Changes
+
+- `GameFoundryStudio/assets/partials/header-nav.html`
+  - Replaced Toolbox accordion submenu markup with hover/focus popout markup.
+  - Sorted top-level Toolbox entries alphabetically:
+    - AI
+    - Assets
+    - Audio
+    - Colors
+    - Input
+    - Objects
+    - Worlds
+  - Sorted Objects submenu:
+    - Animated Sprite
+    - Sprite
+    - UI
+    - Vector
+  - Sorted Worlds submenu:
+    - Hybrid
+    - Isometric
+    - Tilemap
+    - Vector
+
+- `GameFoundryStudio/assets/css/theme/v2/layout.css`
+  - Scoped navigation/menu selectors under `.site-header`.
+  - Changed submenu hover/focus behavior to immediate-child popout behavior.
+  - Added nested Toolbox popout positioning under `.site-header` selectors only.
+  - Did not add or change `.tool-workspace`, `.tool-column`, panel, accordion, column, or workspace selectors.
+
+- `GameFoundryStudio/assets/js/gamefoundry-partials.js`
+  - Added missing root-page route handling for new Toolbox submenu routes that already existed in `routeMap`.
+
+- Root shared-header tool pages
+  - Added `assets/css/theme/v2/theme.css` after the existing tool page stylesheet so the shared header uses the current Theme V2 navigation layer while preserving existing tool page workspace styling.
+
+## Validation
+
+- PASS: `git diff --check`
+- Notes: Git emitted line-ending notices for modified files, but the command exited successfully.
+
+## Automated Tests
+
+- SKIP: Automated tests were not run because the BUILD request says the user will perform visual validation.
+
+## Samples
+
+- SKIP: Samples were not touched.
+
+## Blockers
+
+- None.

tools/ai-assistant.html

@@ -9,6 +9,7 @@
     <meta name="description" content="Game Foundry Studio: Build. Play. Share.">
     <link rel="icon" href="assets/images/favicon.svg" type="image/svg+xml">
     <link rel="stylesheet" href="assets/css/styles.css">
+    <link rel="stylesheet" href="assets/css/theme/v2/theme.css">
 </head>
 
 <body class="meaning-molten-orange">

tools/animation-studio.html

@@ -9,6 +9,7 @@
     <meta name="description" content="Game Foundry Studio: Build. Play. Share.">
     <link rel="icon" href="assets/images/favicon.svg" type="image/svg+xml">
     <link rel="stylesheet" href="assets/css/styles.css">
+    <link rel="stylesheet" href="assets/css/theme/v2/theme.css">
 </head>
 
 <body class="meaning-molten-orange">

tools/asset-studio.html

@@ -9,6 +9,7 @@
     <meta name="description" content="Game Foundry Studio: Build. Play. Share.">
     <link rel="icon" href="assets/images/favicon.svg" type="image/svg+xml">
     <link rel="stylesheet" href="assets/css/styles.css">
+    <link rel="stylesheet" href="assets/css/theme/v2/theme.css">
 </head>
 
 <body class="meaning-molten-orange">

tools/builder.html

@@ -9,6 +9,7 @@
     <meta name="description" content="Game Foundry Studio Tool Builder layout.">
     <link rel="icon" href="assets/images/favicon.svg" type="image/svg+xml">
     <link rel="stylesheet" href="assets/css/styles.css">
+    <link rel="stylesheet" href="assets/css/theme/v2/theme.css">
 </head>
 
 <body class="meaning-molten-orange">

tools/code-studio.html

@@ -9,6 +9,7 @@
     <meta name="description" content="Game Foundry Studio: Build. Play. Share.">
     <link rel="icon" href="assets/images/favicon.svg" type="image/svg+xml">
     <link rel="stylesheet" href="assets/css/styles.css">
+    <link rel="stylesheet" href="assets/css/theme/v2/theme.css">
 </head>
 
 <body class="meaning-molten-orange">

tools/creator.html

@@ -9,6 +9,7 @@
     <meta name="description" content="Game Foundry Studio Tool Creator layout.">
     <link rel="icon" href="assets/images/favicon.svg" type="image/svg+xml">
     <link rel="stylesheet" href="assets/css/styles.css">
+    <link rel="stylesheet" href="assets/css/theme/v2/theme.css">
 </head>
 
 <body class="meaning-molten-orange">