Require Tool Display Mode on all Game Foundry Studio tool pages and complete SSoT cleanup - PR_26151_007-gamefoundry-ssot-cleanup

Author: ToolboxAid

GameFoundryStudio/assets/css/controls.css

@@ -167,11 +167,16 @@ details.accordion[open] summary:after {
   grid-column: 2;
   grid-row: 1;
   margin: 0 0 12px;
+  border: 1px solid var(--meaning-border, var(--line));
   border-radius: 16px;
+  background: var(--panel);
+  box-shadow: 0 14px 40px var(--shadow);
   overflow: hidden
 }
 
 .tool-display-mode summary {
+  color: var(--meaning-color, var(--gold));
+  background: var(--meaning-soft, var(--panel-soft));
   font-weight: 900
 }
 
@@ -183,6 +188,18 @@ details.tool-display-mode[open] summary:after {
   content: "+"
 }
 
+body.tool-focus-mode .tool-display-mode {
+  grid-column: 2;
+  grid-row: 1;
+  position: sticky;
+  top: 10px;
+  z-index: 50;
+  margin: 0;
+  border-color: var(--meaning-border, var(--line));
+  background: var(--panel);
+  box-shadow: 0 18px 60px var(--shadow)
+}
+
 @media(max-width:980px) {
   .tool-display-mode,
   body.tool-focus-mode .tool-display-mode {

GameFoundryStudio/assets/css/tools.css

@@ -44,10 +44,26 @@
 .meaning-layout {
     display: grid;
     grid-template-columns: minmax(220px, .8fr) minmax(320px, 1.15fr) minmax(220px, .8fr);
+    grid-template-rows: auto minmax(0, 1fr);
     gap: 18px;
     align-items: stretch
 }
 
+.meaning-panel.left-panel {
+    grid-column: 1;
+    grid-row: 1 / span 2
+}
+
+.meaning-center {
+    grid-column: 2;
+    grid-row: 2
+}
+
+.meaning-panel.right-panel {
+    grid-column: 3;
+    grid-row: 1 / span 2
+}
+
 .meaning-panel,
 .meaning-center {
     border: 1px solid var(--line);
@@ -138,12 +154,6 @@
     grid-row: 1 / span 2
 }
 
-.tool-display-mode {
-    border: 1px solid rgba(255, 200, 87, .42);
-    background: rgba(7, 10, 18, .92);
-    box-shadow: 0 14px 40px rgba(0, 0, 0, .28)
-}
-
 .tool-center-panel {
     grid-column: 2;
     grid-row: 2;
@@ -211,12 +221,6 @@ details.accordion summary:after {
     max-width: 540px
 }
 
-.tool-display-mode summary {
-    color: var(--gold);
-    background: rgba(255, 122, 0, .12);
-    font-weight: 900
-}
-
 body.tool-focus-mode .site-header,
 body.tool-focus-mode .page-title,
 body.tool-focus-mode .footer {
@@ -245,20 +249,19 @@ body.tool-focus-mode .tool-workspace {
     align-items: stretch
 }
 
-body.tool-focus-mode .tool-display-mode {
-    grid-column: 2;
-    grid-row: 1;
-    position: sticky;
-    top: 10px;
-    z-index: 50;
-    margin: 0;
-    background: #111722;
-    border-color: rgba(255, 200, 87, .72);
-    box-shadow: 0 18px 60px rgba(0, 0, 0, .7)
+body.tool-focus-mode .meaning-layout {
+    height: 100vh;
+    grid-template-columns: 280px minmax(0, 1fr) 280px;
+    grid-template-rows: auto minmax(0, 1fr);
+    gap: 10px;
+    padding: 10px;
+    align-items: stretch
 }
 
 body.tool-focus-mode .tool-column,
-body.tool-focus-mode .tool-center-panel {
+body.tool-focus-mode .tool-center-panel,
+body.tool-focus-mode .meaning-panel,
+body.tool-focus-mode .meaning-center {
     height: calc(100vh - 20px);
     overflow: auto
 }
@@ -278,6 +281,21 @@ body.tool-focus-mode .tool-column:last-of-type {
     grid-row: 1 / span 2
 }
 
+body.tool-focus-mode .meaning-panel.left-panel {
+    grid-column: 1;
+    grid-row: 1 / span 2
+}
+
+body.tool-focus-mode .meaning-center {
+    grid-column: 2;
+    grid-row: 2
+}
+
+body.tool-focus-mode .meaning-panel.right-panel {
+    grid-column: 3;
+    grid-row: 1 / span 2
+}
+
 @media(max-width:980px) {
     .tool-grid {
         grid-template-columns: repeat(2, 1fr)
@@ -288,12 +306,16 @@ body.tool-focus-mode .tool-column:last-of-type {
         grid-template-columns: 1fr
     }
 
-    .tool-display-mode,
-    body.tool-focus-mode .tool-display-mode,
     .tool-column:first-of-type,
+    .meaning-panel.left-panel,
+    .meaning-center,
+    .meaning-panel.right-panel,
     .tool-center-panel,
     .tool-column:last-of-type,
     body.tool-focus-mode .tool-column:first-of-type,
+    body.tool-focus-mode .meaning-panel.left-panel,
+    body.tool-focus-mode .meaning-center,
+    body.tool-focus-mode .meaning-panel.right-panel,
     body.tool-focus-mode .tool-center-panel,
     body.tool-focus-mode .tool-column:last-of-type {
         grid-column: auto;
@@ -309,8 +331,15 @@ body.tool-focus-mode .tool-column:last-of-type {
         grid-template-columns: 1fr
     }
 
+    body.tool-focus-mode .meaning-layout {
+        height: auto;
+        grid-template-columns: 1fr
+    }
+
     body.tool-focus-mode .tool-column,
-    body.tool-focus-mode .tool-center-panel {
+    body.tool-focus-mode .tool-center-panel,
+    body.tool-focus-mode .meaning-panel,
+    body.tool-focus-mode .meaning-center {
         height: auto
     }
 }

GameFoundryStudio/assets/js/tool-display-mode.js

@@ -1,8 +1,17 @@
 (function () {
-    const displayMode = document.getElementById("toolDisplayMode");
-    if (!displayMode) return;
+    const slot = document.querySelector("[data-tool-display-mode]");
+    if (!slot) return;
+
+    const displayMode = document.createElement("details");
+    displayMode.className = "accordion tool-display-mode";
+    displayMode.id = "toolDisplayMode";
+    displayMode.open = true;
+
+    const summary = document.createElement("summary");
+    summary.textContent = "Tool Display Mode";
+    displayMode.appendChild(summary);
+    slot.replaceWith(displayMode);
 
-    const summary = displayMode.querySelector("summary");
 
     async function enterToolMode() {
         document.body.classList.add("tool-focus-mode");

GameFoundryStudio/tools/ai-assistant.html

@@ -35,9 +35,7 @@ <h2>Toolbox</h2>
                             </details>
                         </div>
                     </aside>
-                    <details class="accordion tool-display-mode" id="toolDisplayMode" open>
-                        <summary>Tool Display Mode</summary>
-                    </details>
+                    <div data-tool-display-mode></div>
                     <section class="tool-center-panel page-hero"><img src="../assets/images/tools/ai-assistant.png" alt="AI Assistant"><div><h2>Purpose</h2><p class="lede">This page is a branded landing page for AI Assistant. In the production app this becomes the place to launch the tool, read docs, see examples, and review tool-specific workflow guidance.</p><div class="hero-actions"><a class="btn primary" href="#">Launch Tool</a><a class="btn" href="../docs/index.html">Read Docs</a></div></div></section>
                     <aside class="tool-column">
                         <div class="tool-column-header forge-gold">

GameFoundryStudio/tools/animation-studio.html

@@ -35,9 +35,7 @@ <h2>Toolbox</h2>
                             </details>
                         </div>
                     </aside>
-                    <details class="accordion tool-display-mode" id="toolDisplayMode" open>
-                        <summary>Tool Display Mode</summary>
-                    </details>
+                    <div data-tool-display-mode></div>
                     <section class="tool-center-panel page-hero"><img src="../assets/images/tools/animation-studio.png" alt="Animation Studio"><div><h2>Purpose</h2><p class="lede">This page is a branded landing page for Animation Studio. In the production app this becomes the place to launch the tool, read docs, see examples, and review tool-specific workflow guidance.</p><div class="hero-actions"><a class="btn primary" href="#">Launch Tool</a><a class="btn" href="../docs/index.html">Read Docs</a></div></div></section>
                     <aside class="tool-column">
                         <div class="tool-column-header forge-gold">

GameFoundryStudio/tools/asset-studio.html

@@ -35,9 +35,7 @@ <h2>Toolbox</h2>
                             </details>
                         </div>
                     </aside>
-                    <details class="accordion tool-display-mode" id="toolDisplayMode" open>
-                        <summary>Tool Display Mode</summary>
-                    </details>
+                    <div data-tool-display-mode></div>
                     <section class="tool-center-panel page-hero"><img src="../assets/images/tools/asset-studio.png" alt="Asset Studio"><div><h2>Purpose</h2><p class="lede">This page is a branded landing page for Asset Studio. In the production app this becomes the place to launch the tool, read docs, see examples, and review tool-specific workflow guidance.</p><div class="hero-actions"><a class="btn primary" href="#">Launch Tool</a><a class="btn" href="../docs/index.html">Read Docs</a></div></div></section>
                     <aside class="tool-column">
                         <div class="tool-column-header forge-gold">

GameFoundryStudio/tools/code-studio.html

@@ -35,9 +35,7 @@ <h2>Toolbox</h2>
                             </details>
                         </div>
                     </aside>
-                    <details class="accordion tool-display-mode" id="toolDisplayMode" open>
-                        <summary>Tool Display Mode</summary>
-                    </details>
+                    <div data-tool-display-mode></div>
                     <section class="tool-center-panel page-hero"><img src="../assets/images/tools/code-studio.png" alt="Code Studio"><div><h2>Purpose</h2><p class="lede">This page is a branded landing page for Code Studio. In the production app this becomes the place to launch the tool, read docs, see examples, and review tool-specific workflow guidance.</p><div class="hero-actions"><a class="btn primary" href="#">Launch Tool</a><a class="btn" href="../docs/index.html">Read Docs</a></div></div></section>
                     <aside class="tool-column">
                         <div class="tool-column-header forge-gold">

GameFoundryStudio/tools/game-builder.html

@@ -35,9 +35,7 @@ <h2>Toolbox</h2>
                             </details>
                         </div>
                     </aside>
-                    <details class="accordion tool-display-mode" id="toolDisplayMode" open>
-                        <summary>Tool Display Mode</summary>
-                    </details>
+                    <div data-tool-display-mode></div>
                     <section class="tool-center-panel page-hero"><img src="../assets/images/tools/game-builder.png" alt="Game Builder"><div><h2>Purpose</h2><p class="lede">This page is a branded landing page for Game Builder. In the production app this becomes the place to launch the tool, read docs, see examples, and review tool-specific workflow guidance.</p><div class="hero-actions"><a class="btn primary" href="#">Launch Tool</a><a class="btn" href="../docs/index.html">Read Docs</a></div></div></section>
                     <aside class="tool-column">
                         <div class="tool-column-header forge-gold">

GameFoundryStudio/tools/game-design-studio.html

@@ -35,9 +35,7 @@ <h2>Toolbox</h2>
                             </details>
                         </div>
                     </aside>
-                    <details class="accordion tool-display-mode" id="toolDisplayMode" open>
-                        <summary>Tool Display Mode</summary>
-                    </details>
+                    <div data-tool-display-mode></div>
                     <section class="tool-center-panel page-hero"><img src="../assets/images/tools/game-design-studio.png" alt="Game Design Studio"><div><h2>Purpose</h2><p class="lede">This page is a branded landing page for Game Design Studio. In the production app this becomes the place to launch the tool, read docs, see examples, and review tool-specific workflow guidance.</p><div class="hero-actions"><a class="btn primary" href="#">Launch Tool</a><a class="btn" href="../docs/index.html">Read Docs</a></div></div></section>
                     <aside class="tool-column">
                         <div class="tool-column-header forge-gold">

GameFoundryStudio/tools/groups/assets-content.html

@@ -34,6 +34,7 @@ <h2>Content Inputs</h2>
                         </ul>
                     </div>
                 </aside>
+                <div data-tool-display-mode></div>
                 <section class="meaning-center">
                     <h2>Forge game-ready content.</h2>
                     <p>Forge Gold marks asset creation and reusable content that creators can place, remix, and publish.
@@ -61,6 +62,7 @@ <h2>Content Output</h2>
     </main>
     <div data-partial="footer"></div>
     <script src="../../assets/js/gamefoundry-partials.js" defer></script>
+    <script src="../../assets/js/tool-display-mode.js" defer></script>
 </body>
 
-</html>
+</html>