Refine Sprite Editor fullscreen shell to compact top controls and full-height workspace

- update `tools/Sprite Editor/spriteEditor.css`
- keep fullscreen toolbar/status container at content height (`auto`) instead of stretching
- set fullscreen app shell layout to `grid-template-rows: auto minmax(0, 1fr)` with `height: calc(100dvh - 120px)`
- ensure workspace can shrink/fill correctly with `min-height: 0`
- result: top control area no longer appears overly tall; canvas/workspace gets remaining vertical space

Author: DavidQ

tools/Sprite Editor/index.html

@@ -25,11 +25,6 @@
     </div>
   </details>
   <div class="app-shell" id="appShell">
-    <header class="app-header">
-      <h1>Sprite Editor</h1>
-      <p>Standalone pixel-art authoring editor for sprite documents and frame animation.</p>
-    </header>
-
     <section class="toolbar-row">
       <div class="toolbar-group tools-platform-control-cluster tools-platform-control-cluster--primary">
         <label>Width
@@ -57,18 +52,19 @@ <h1>Sprite Editor</h1>
         <button type="button" data-tool="eraser" class="tool-button">Eraser</button>
         <button type="button" data-tool="fill" class="tool-button">Fill</button>
       </div>
-    </section>
 
-    <section class="state-row">
-      <p id="toolStateText" class="state-pill">Tool: Pencil</p>
-      <p id="activeColorText" class="state-pill">Color: #ff5a5aff</p>
-      <p id="frameStateText" class="state-pill">Frame: 1 / 1</p>
-      <p id="toggleStateText" class="state-pill">Grid: On | Onion: Off</p>
-      <p id="statusBarText" class="state-pill">Canvas: 32x32 | Zoom: 18 | Cursor: -, -</p>
+      <div class="state-row">
+        <p id="toolStateText" class="state-pill">Tool: Pencil</p>
+        <p id="activeColorText" class="state-pill">Color: #ff5a5aff</p>
+        <p id="frameStateText" class="state-pill">Frame: 1 / 1</p>
+        <p id="toggleStateText" class="state-pill">Grid: On | Onion: Off</p>
+        <p id="statusBarText" class="state-pill">Canvas: 32x32 | Zoom: 18 | Cursor: -, -</p>
+      </div>
     </section>
 
     <section class="workspace tools-platform-layout-grid">
-      <div class="left-panel tools-platform-resize-panel" data-panel-side="left">
+      <div id="leftSidebar" class="left-panel tools-platform-resize-panel" data-panel-side="left">
+        <button id="closeLeftOverlayButton" class="overlay-close-button" type="button" aria-label="Close Left Panel">X</button>
         <div class="panel-block">
           <h2>Colors</h2>
           <label>Palette Source (Engine)
@@ -106,7 +102,7 @@ <h2>Frames</h2>
           </label>
         </div>
 
-        <div class="panel-block">
+        <div id="projectIoPanel" class="panel-block">
           <h2>Project I/O</h2>
           <div class="io-controls">
             <button id="saveAssetRegistryButton" type="button">Save Assets Registry</button>
@@ -130,12 +126,15 @@ <h2>Project I/O</h2>
       </div>
 
       <div class="center-panel">
+        <button id="showLeftPanelButton" class="fullscreen-overlay-button" type="button">Tools</button>
+        <button id="showRightPanelButton" class="fullscreen-overlay-button" type="button">Status</button>
         <div class="canvas-wrap">
           <canvas id="editorCanvas" aria-label="Sprite drawing canvas"></canvas>
         </div>
       </div>
 
-      <div class="right-panel tools-platform-resize-panel" data-panel-side="right">
+      <div id="rightSidebar" class="right-panel tools-platform-resize-panel" data-panel-side="right">
+        <button id="closeRightOverlayButton" class="overlay-close-button" type="button" aria-label="Close Right Panel">X</button>
         <div class="panel-block">
           <h2>Preview</h2>
           <canvas id="previewCanvas" aria-label="Animation preview"></canvas>
@@ -150,7 +149,7 @@ <h2>Preview</h2>
           <output id="fpsValue">8</output>
         </div>
 
-        <div class="panel-block">
+        <div id="statusPanel" class="panel-block">
           <h2>Status</h2>
           <p id="statusText" class="status-text">Ready.</p>
           <p id="remediationSummaryText" class="status-text">No remediation actions available.</p>

tools/Sprite Editor/main.js

@@ -25,9 +25,63 @@ function bootSpriteEditor() {
     spriteEditorApp = initializeSpriteEditorApp();
   }
   window.spriteEditorApp = spriteEditorApi;
+  setupFullscreenSidePanels();
   return spriteEditorApi;
 }
 
+function setupFullscreenSidePanels() {
+  const leftSidebar = document.getElementById("leftSidebar");
+  const rightSidebar = document.getElementById("rightSidebar");
+  const showLeftPanelButton = document.getElementById("showLeftPanelButton");
+  const showRightPanelButton = document.getElementById("showRightPanelButton");
+  const closeLeftOverlayButton = document.getElementById("closeLeftOverlayButton");
+  const closeRightOverlayButton = document.getElementById("closeRightOverlayButton");
+
+  if (!leftSidebar || !rightSidebar || !showLeftPanelButton || !showRightPanelButton || !closeLeftOverlayButton || !closeRightOverlayButton) {
+    return;
+  }
+
+  const syncOverlayToggleButtons = () => {
+    const leftVisible = leftSidebar.classList.contains("visible-overlay");
+    const rightVisible = rightSidebar.classList.contains("visible-overlay");
+    showLeftPanelButton.style.display = leftVisible ? "none" : "";
+    showRightPanelButton.style.display = rightVisible ? "none" : "";
+  };
+
+  const syncFullscreenClass = () => {
+    const isFullscreen = Boolean(document.fullscreenElement);
+    document.body.classList.toggle("fullscreen-mode", isFullscreen);
+    if (!isFullscreen) {
+      leftSidebar.classList.remove("visible-overlay");
+      rightSidebar.classList.remove("visible-overlay");
+    }
+    syncOverlayToggleButtons();
+  };
+
+  showLeftPanelButton.addEventListener("click", () => {
+    leftSidebar.classList.toggle("visible-overlay");
+    syncOverlayToggleButtons();
+  });
+
+  showRightPanelButton.addEventListener("click", () => {
+    rightSidebar.classList.toggle("visible-overlay");
+    syncOverlayToggleButtons();
+  });
+
+  closeLeftOverlayButton.addEventListener("click", () => {
+    leftSidebar.classList.remove("visible-overlay");
+    syncOverlayToggleButtons();
+  });
+
+  closeRightOverlayButton.addEventListener("click", () => {
+    rightSidebar.classList.remove("visible-overlay");
+    syncOverlayToggleButtons();
+  });
+
+  document.addEventListener("fullscreenchange", syncFullscreenClass);
+  syncFullscreenClass();
+}
+
 registerToolBootContract("sprite-editor", {
   init: bootSpriteEditor,
   destroy() {

tools/Sprite Editor/spriteEditor.css

@@ -56,21 +56,25 @@ spriteEditor.css
 .state-row {
   display: flex;
   flex-wrap: wrap;
+  align-items: flex-start;
   gap: 0.45rem;
+  width: 100%;
   border: 1px solid var(--se-panel-border);
   border-radius: 12px;
   padding: 0.6rem;
   background: color-mix(in srgb, var(--se-panel) 90%, black);
 }
 
 .state-pill {
+  flex: 0 0 auto;
   margin: 0;
   border: 1px solid var(--se-panel-border);
   border-radius: 999px;
   padding: 0.2rem 0.55rem;
   font-size: 0.82rem;
   color: var(--se-muted);
   background: var(--surface-inline, rgba(43, 16, 91, 0.9));
+  white-space: nowrap;
 }
 
 .toolbar-group {
@@ -106,6 +110,35 @@ spriteEditor.css
   background: color-mix(in srgb, var(--se-panel) 68%, var(--se-accent));
 }
 
+.sprite-editor-page .fullscreen-overlay-button {
+  display: none;
+  position: fixed;
+  z-index: 1200;
+  min-height: 32px;
+  padding: 0 12px;
+  border: 1px solid var(--se-panel-border);
+  border-radius: 999px;
+  background: linear-gradient(180deg, var(--se-panel) 0%, color-mix(in srgb, var(--se-panel) 70%, var(--panel2, rgba(49, 17, 102, 0.94))) 100%);
+  color: var(--se-text);
+  font-weight: 600;
+}
+
+.sprite-editor-page .overlay-close-button {
+  display: none;
+  position: absolute;
+  top: 5px;
+  right: 5px;
+  z-index: 1300;
+  min-height: 28px;
+  min-width: 28px;
+  padding: 0 8px;
+  border-radius: 999px;
+  border: 1px solid var(--se-panel-border);
+  background: #ed9700;
+  color: #ffffff;
+  font-weight: 700;
+}
+
 .workspace {
   display: grid;
   grid-template-columns: 260px minmax(0, 1fr) 440px;
@@ -150,19 +183,20 @@ spriteEditor.css
   border-radius: 12px;
   background: var(--surface-inline, rgba(43, 16, 91, 0.9));
   display: grid;
-  justify-items: center;
-  align-items: start;
+  justify-items: stretch;
+  align-items: stretch;
   padding: 0.9rem;
   overflow: auto;
 }
 
 .canvas-wrap {
+  width: 100%;
   border: 1px solid var(--se-panel-border);
   border-radius: 10px;
   background: linear-gradient(45deg, var(--se-canvas-bg-a) 25%, var(--se-canvas-bg-b) 25%, var(--se-canvas-bg-b) 50%, var(--se-canvas-bg-a) 50%, var(--se-canvas-bg-a) 75%, var(--se-canvas-bg-b) 75%, var(--se-canvas-bg-b) 100%);
   background-size: 20px 20px;
   padding: 0.5rem;
-  margin-top: 20px;
+  margin-top: 0;
 }
 
 #editorCanvas {
@@ -247,6 +281,131 @@ spriteEditor.css
   color: var(--se-muted);
 }
 
+#statusPanel {
+  height: 530px;
+  overflow-y: auto;
+  overflow-x: hidden;
+}
+
+#statusPanel pre.status-text {
+  white-space: pre-wrap;
+  word-break: break-word;
+}
+
+#projectIoPanel {
+  resize: none;
+}
+
+body[data-tool-id="sprite-editor"] .tools-platform-resize-panel {
+  resize: none;
+}
+
+body.sprite-editor-page.fullscreen-mode .left-panel,
+body.sprite-editor-page.fullscreen-mode .right-panel {
+  position: fixed;
+  top: 96px;
+  bottom: 72px;
+  width: min(360px, 40vw);
+  max-width: min(360px, 40vw);
+  overflow: auto;
+  z-index: 1250;
+  margin: 0;
+  border-radius: 12px;
+  box-shadow: 0 18px 36px rgba(0, 0, 0, 0.28);
+  transform: translateX(-120%);
+  transition: transform 140ms ease;
+}
+
+body.sprite-editor-page.fullscreen-mode .right-panel {
+  transform: translateX(120%);
+}
+
+body.sprite-editor-page.fullscreen-mode .workspace {
+  grid-template-columns: minmax(0, 1fr);
+  min-height: 0;
+}
+
+body.sprite-editor-page.fullscreen-mode .toolbar-row {
+  align-items: center;
+  align-content: flex-start;
+  gap: 0.45rem;
+  padding: 0.45rem 0.55rem;
+  min-height: 0;
+  height: auto;
+}
+
+body.sprite-editor-page.fullscreen-mode .state-row {
+  flex-wrap: nowrap;
+  align-items: center;
+  gap: 0.28rem;
+  padding: 0.25rem 0.35rem;
+  overflow-x: auto;
+  overflow-y: hidden;
+  margin: 0;
+}
+
+body.sprite-editor-page.fullscreen-mode .app-shell {
+  height: calc(100dvh - 120px);
+  grid-template-rows: auto minmax(0, 1fr);
+  align-content: start;
+}
+
+body.sprite-editor-page.fullscreen-mode .state-pill {
+  padding: 0.15rem 0.45rem;
+  font-size: 0.78rem;
+}
+
+body.sprite-editor-page.fullscreen-mode .center-panel {
+  width: 100%;
+  min-width: 0;
+}
+
+body.sprite-editor-page.fullscreen-mode .left-panel,
+body.sprite-editor-page.fullscreen-mode .right-panel {
+  display: none;
+}
+
+body.sprite-editor-page.fullscreen-mode .left-panel.visible-overlay,
+body.sprite-editor-page.fullscreen-mode .right-panel.visible-overlay {
+  display: grid;
+}
+
+body.sprite-editor-page.fullscreen-mode .left-panel {
+  left: 10px;
+}
+
+body.sprite-editor-page.fullscreen-mode .right-panel {
+  right: 10px;
+}
+
+body.sprite-editor-page.fullscreen-mode .left-panel.visible-overlay,
+body.sprite-editor-page.fullscreen-mode .right-panel.visible-overlay {
+  transform: translateX(0);
+}
+
+body.sprite-editor-page.fullscreen-mode .left-panel.visible-overlay .overlay-close-button,
+body.sprite-editor-page.fullscreen-mode .right-panel.visible-overlay .overlay-close-button {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+}
+
+body.sprite-editor-page.fullscreen-mode .fullscreen-overlay-button {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+}
+
+body.sprite-editor-page.fullscreen-mode #showLeftPanelButton {
+  top: 152px;
+  left: 14px;
+}
+
+body.sprite-editor-page.fullscreen-mode #showRightPanelButton {
+  top: 152px;
+  right: 14px;
+}
+
 button,
 input,
 output {