Standardize fullscreen tool headers to single-line format

- Enforces: <Tool Name> — <Short Description>
- Removes multi-line headers and intro blocks
- Improves workspace density and UX consistency

Author: DavidQ

docs/dev/codex_commands.md

@@ -1,10 +1,25 @@
-model: gpt-5.3-codex
-reasoning: medium
+MODEL: GPT-5.3-codex
+REASONING: low
 
-Apply PR_10_13_WORKSPACE_INTEGRATION_POLISH
+Apply tool header standardization:
 
-- Move lifecycle control to workspace
-- Prevent tool self-reset logic
-- Preserve tool state during navigation
-- Ensure stable tool switching
-- Do not modify data layer
+- Replace all fullscreen tool headers with:
+  <Tool Name> — <Short Description>
+
+- Remove:
+  - intro paragraphs
+  - multi-line headers
+
+- Ensure:
+  - truncation with ellipsis if needed
+  - tooltip shows full text
+
+- Bind UI to:
+  tool.name
+  tool.shortDescription
+
+Target tools:
+- Vector Map Editor
+- Vector Asset Studio
+- Sprite Editor
+- State Inspector

docs/dev/commit_comment.txt

@@ -1 +1,5 @@
-Finalize workspace lifecycle control and persistent tool state across all tools - PR 10.13
+Standardize fullscreen tool headers to single-line format
+
+- Enforces: <Tool Name> — <Short Description>
+- Removes multi-line headers and intro blocks
+- Improves workspace density and UX consistency

docs/dev/pr_tool_header_singleline.md

@@ -0,0 +1,63 @@
+# PR — Tool Header Single-Line Standard
+
+## Purpose
+Standardize fullscreen tool headers to a single-line format to maximize workspace and maintain consistency.
+
+---
+
+## Rule
+
+All tools must render the header as:
+
+<Tool Name> — <Short Description>
+
+---
+
+## Constraints
+
+- Must be a single line
+- No wrapping
+- No separate intro paragraph
+- No multi-line headers
+- Use ellipsis (…) if overflow occurs
+- Tooltip must display full text on hover
+
+---
+
+## Examples
+
+Vector Map Editor — Platform Layout & Tile Composition  
+Vector Asset Studio — Asset Creation & Editing  
+Sprite Editor — Animation & Frame Control  
+State Inspector — Object State & JSON Viewer  
+
+---
+
+## Implementation
+
+tool = {
+  name: "Vector Map Editor",
+  shortDescription: "Platform Layout & Tile Composition"
+}
+
+Render:
+
+`${tool.name} — ${tool.shortDescription}`
+
+---
+
+## Scope
+
+Apply to:
+- Vector Map Editor
+- Vector Asset Studio
+- Sprite Editor
+- State Inspector
+
+---
+
+## Notes
+
+- Removes redundant intro blocks in fullscreen
+- Ensures consistent UX across all tools
+- Maximizes vertical workspace

tools/Vector Map Editor/index.html

@@ -19,37 +19,7 @@
   <details class="is-collapsible" open>
     <summary class="is-collapsible__summary">Header and Intro</summary>
     <div class="is-collapsible__content">
-      <div id="shared-theme-header">
-        <header class="toolboxaid-theme-header">
-          <div class="flex header-content">
-            <div id="image" class="header-image bg-image-fill site-tagline">
-              <img src="/src/engine/theme/toolboxaid-header.png" alt="Toolbox Aid Header Banner" />
-            </div>
-            <div id="tagline" class="site-tagline site-tagline-alt align-center">
-              <h2>HTML-JavaScript Gaming</h2>
-              <P>future: developmen: add Optional later:
-                                        C (curves)
-                                        Q (quadratic)
-                                        A (arc)</P>
-            </div>
-            <div id="nav" class="site-nav align-center">
-              <nav>
-                <div class="menu-header-container">
-                  <ul id="menu-header" class="menu">
-                    <li class="menu-item">
-                      <a href="https://toolboxaid.com" class="is-external" target="_blank" rel="noopener noreferrer">Toolbox Aid</a>
-                    </li>
-                    <li class="menu-item"><a href="/index.html">Home</a></li>
-                    <li class="menu-item"><a href="/games/index.html">Games</a></li>
-                    <li class="menu-item"><a href="/samples/index.html">Samples</a></li>
-                    <li class="menu-item"><a href="/tools/index.html">Tools</a></li>
-                  </ul>
-                </div>
-              </nav>
-            </div>
-          </div>
-        </header>
-      </div>
+      <div id="shared-theme-header"></div>
       <div data-tools-platform-header></div>
     </div>
   </details>

tools/shared/platformShell.css

@@ -132,6 +132,14 @@ body.tools-platform-surface {
   color: var(--text, #f7f4ff);
 }
 
+.tools-platform-frame__title--single-line {
+  display: block;
+  max-width: 100%;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
 .tools-platform-frame__description {
   margin: 0;
   max-width: 72ch;

tools/shared/platformShell.js

@@ -33,6 +33,12 @@ const GAME_ASSET_CATALOG_SCHEMA = "html-js-gaming.game-asset-catalog";
 const GAME_ASSET_CATALOG_VERSION = 1;
 const WORKSPACE_LAUNCH_SIGNATURE_STORAGE_KEY = "toolboxaid.toolsPlatform.launchSignature";
 const TOOL_STATE_STORAGE_KEY_PREFIX = "toolboxaid.";
+const STANDARDIZED_TOOL_HEADER_IDS = new Set([
+  "vector-map-editor",
+  "vector-asset-studio",
+  "sprite-editor",
+  "state-inspector"
+]);
 const PRESERVED_TOOL_STATE_KEYS = new Set([
   HEADER_EXPANDED_STORAGE_KEY,
   WORKSPACE_LAUNCH_SIGNATURE_STORAGE_KEY
@@ -1168,6 +1174,14 @@ function renderHeaderMarkup(currentTool, isHeaderExpanded) {
   const description = currentTool
     ? currentTool.description
     : "Registry-driven, engine-themed entry surface for vector maps, vector assets, tilemaps, parallax scenes, and sprite workspaces.";
+  const useStandardizedToolHeader = !isLanding
+    && Boolean(currentTool?.id)
+    && STANDARDIZED_TOOL_HEADER_IDS.has(currentTool.id);
+  const standardizedToolName = normalizeTextValue(currentTool?.name) || title;
+  const standardizedToolShortDescription = normalizeTextValue(currentTool?.shortDescription);
+  const standardizedHeaderText = standardizedToolShortDescription
+    ? `${standardizedToolName} — ${standardizedToolShortDescription}`
+    : standardizedToolName;
   const meta = isLanding
     ? `${getToolRegistry().filter((entry) => entry.active === true && entry.visibleInToolsList === true).length} active tools | hubCommon.css theme`
     : "Shared shell, engine theme, and workspace context applied from the active tool registry";
@@ -1177,16 +1191,18 @@ function renderHeaderMarkup(currentTool, isHeaderExpanded) {
       <div class="tools-platform-frame__accordion-content">
         <div class="tools-platform-frame__accordion-summary">
           <div class="tools-platform-frame__summary-copy">
-            <h1 class="tools-platform-frame__title">${escapeHtml(title)}</h1>
-            <h2 class="tools-platform-frame__eyebrow">First-Class Tools Surface</h2>
+            <h1 class="tools-platform-frame__title${useStandardizedToolHeader ? " tools-platform-frame__title--single-line" : ""}"${useStandardizedToolHeader ? ` title="${escapeHtml(standardizedHeaderText)}"` : ""}>${escapeHtml(useStandardizedToolHeader ? standardizedHeaderText : title)}</h1>
+            ${useStandardizedToolHeader ? "" : '<h2 class="tools-platform-frame__eyebrow">First-Class Tools Surface</h2>'}
           </div>
           <div class="tools-platform-frame__summary-meta">
             <div class="tools-platform-frame__meta">${escapeHtml(meta)}</div>
           </div>
         </div>
+        ${useStandardizedToolHeader ? "" : `
         <div class="tools-platform-frame__topline">
           <p class="tools-platform-frame__description">${escapeHtml(description)}</p>
         </div>
+        `}
         ${showNavThroughTiles ? `
           <div class="tools-platform-frame__bottomline">
             ${!isLanding ? `<hr class="tools-platform-frame__divider" />` : ""}

tools/toolRegistry.js

@@ -5,6 +5,7 @@ export const TOOL_REGISTRY = Object.freeze([
     id: "vector-map-editor",
     name: "Vector Map Editor",
     displayName: "Vector Map Editor",
+    shortDescription: "Map layout and collision authoring",
     shortLabel: "Map",
     path: "Vector Map Editor",
     folderName: "Vector Map Editor",
@@ -31,6 +32,7 @@ export const TOOL_REGISTRY = Object.freeze([
     id: "vector-asset-studio",
     name: "Vector Asset Studio",
     displayName: "Vector Asset Studio",
+    shortDescription: "SVG asset authoring and export",
     shortLabel: "Asset",
     path: "Vector Asset Studio",
     folderName: "Vector Asset Studio",
@@ -121,6 +123,7 @@ export const TOOL_REGISTRY = Object.freeze([
     id: "sprite-editor",
     name: "Sprite Editor",
     displayName: "Sprite Editor",
+    shortDescription: "Palette-locked sprite and frame editing",
     shortLabel: "Sprite",
     path: "Sprite Editor",
     folderName: "Sprite Editor",
@@ -213,6 +216,7 @@ export const TOOL_REGISTRY = Object.freeze([
     id: "state-inspector",
     name: "State Inspector",
     displayName: "State Inspector",
+    shortDescription: "Host/runtime state snapshot inspection",
     shortLabel: "Inspect",
     path: "State Inspector",
     folderName: "State Inspector",