`feat(parallax-editor): restore fullscreen popout UX and move diagnostics below canvas

- add left/right overlay close buttons (X) for fullscreen side popouts
- wire close-button handlers and keep overlay open/close state synced
- hide launcher buttons while corresponding popout is visible
- move preview diagnostics text out of canvas rendering into dedicated below-canvas panel
- add preview details panel markup/style (`#previewDetailsText`)
- position fullscreen launcher buttons off-canvas at viewport edges
- preserve existing tool behavior and project/remediation flows`

Author: DavidQ

tools/Parallax Scene Studio/index.html

@@ -75,6 +75,7 @@
 
     <div class="workspace tools-platform-layout-grid">
       <aside class="sidebar left-sidebar tools-platform-resize-panel" data-panel-side="left" id="leftSidebar">
+        <button id="closeLeftOverlayButton" class="overlay-close-button" type="button" aria-label="Close Layers Panel">X</button>
         <section class="panel">
           <h3>Parallax Layers</h3>
           <ul id="layerList" class="layer-list"></ul>
@@ -120,10 +121,12 @@ <h3>Preview Camera</h3>
           <button id="showLeftPanelButton" class="fullscreen-overlay-button" type="button">Layers</button>
           <button id="showRightPanelButton" class="fullscreen-overlay-button" type="button">Properties</button>
         </div>
+        <pre id="previewDetailsText" class="preview-details-text">Mode: EDIT</pre>
         <div id="statusText" class="status-text">Ready.</div>
       </main>
 
       <aside class="sidebar right-sidebar tools-platform-resize-panel" data-panel-side="right" id="rightSidebar">
+        <button id="closeRightOverlayButton" class="overlay-close-button" type="button" aria-label="Close Properties Panel">X</button>
         <section class="panel">
           <h3>Selected Layer</h3>
           <label>

tools/Parallax Scene Studio/main.js

@@ -452,12 +452,15 @@ class ParallaxEditorApp {
 
     this.refs.previewMeta = rootDocument.getElementById("previewMeta");
     this.refs.simulationContext = rootDocument.getElementById("simulationContext");
+    this.refs.previewDetailsText = rootDocument.getElementById("previewDetailsText");
     this.refs.statusText = rootDocument.getElementById("statusText");
     this.refs.appShell = rootDocument.querySelector(".app-shell");
     this.refs.leftSidebar = rootDocument.getElementById("leftSidebar");
     this.refs.rightSidebar = rootDocument.getElementById("rightSidebar");
     this.refs.showLeftPanelButton = rootDocument.getElementById("showLeftPanelButton");
     this.refs.showRightPanelButton = rootDocument.getElementById("showRightPanelButton");
+    this.refs.closeLeftOverlayButton = rootDocument.getElementById("closeLeftOverlayButton");
+    this.refs.closeRightOverlayButton = rootDocument.getElementById("closeRightOverlayButton");
     this.refs.previewWrap = rootDocument.querySelector(".preview-wrap");
     this.refs.previewCanvas = rootDocument.getElementById("previewCanvas");
     this.refs.previewContext = this.refs.previewCanvas.getContext("2d", { alpha: false });
@@ -485,14 +488,25 @@ class ParallaxEditorApp {
     this.refs.applyRemediationButton.addEventListener("click", () => this.applyRemediationAction());
     this.refs.showLeftPanelButton?.addEventListener("click", () => {
       this.refs.leftSidebar?.classList.toggle("visible-overlay");
+      this.syncOverlayToggleButtons();
     });
     this.refs.showRightPanelButton?.addEventListener("click", () => {
       this.refs.rightSidebar?.classList.toggle("visible-overlay");
+      this.syncOverlayToggleButtons();
+    });
+    this.refs.closeLeftOverlayButton?.addEventListener("click", () => {
+      this.refs.leftSidebar?.classList.remove("visible-overlay");
+      this.syncOverlayToggleButtons();
+    });
+    this.refs.closeRightOverlayButton?.addEventListener("click", () => {
+      this.refs.rightSidebar?.classList.remove("visible-overlay");
+      this.syncOverlayToggleButtons();
     });
     document.addEventListener("fullscreenchange", () => {
       this.syncFullscreenState();
       this.refs.leftSidebar?.classList.remove("visible-overlay");
       this.refs.rightSidebar?.classList.remove("visible-overlay");
+      this.syncOverlayToggleButtons();
     });
 
     this.refs.applyMapMetaButton.addEventListener("click", () => this.applyMapMetaFromInputs());
@@ -532,6 +546,18 @@ class ParallaxEditorApp {
 
   syncFullscreenState() {
     document.body.classList.toggle("fullscreen-mode", Boolean(document.fullscreenElement));
+    this.syncOverlayToggleButtons();
+  }
+
+  syncOverlayToggleButtons() {
+    const leftVisible = this.refs.leftSidebar?.classList.contains("visible-overlay") === true;
+    const rightVisible = this.refs.rightSidebar?.classList.contains("visible-overlay") === true;
+    if (this.refs.showLeftPanelButton instanceof HTMLElement) {
+      this.refs.showLeftPanelButton.style.display = leftVisible ? "none" : "";
+    }
+    if (this.refs.showRightPanelButton instanceof HTMLElement) {
+      this.refs.showRightPanelButton.style.display = rightVisible ? "none" : "";
+    }
   }
 
   getSelectedLayer() {
@@ -1731,27 +1757,25 @@ class ParallaxEditorApp {
     context.strokeRect(mapOriginX, mapOriginY, worldWidth, worldHeight);
     this.ensureSimulationViewportFocus(proxyX);
 
-    context.fillStyle = "rgba(15, 23, 42, 0.72)";
-    context.fillRect(10, 10, Math.min(860, viewportWidth - 20), 148);
-    context.fillStyle = "#dbeafe";
-    context.font = "12px monospace";
-    context.textBaseline = "top";
     const modeText = this.isSimulationMode
       ? `SIMULATION ${this.simulation.playing ? "PLAY" : "PAUSE"}`
       : "EDIT";
     const repeatCount = sortedLayers.filter((layer) => layer.repeatX || layer.repeatY).length;
     const wrapCount = sortedLayers.filter((layer) => layer.wrapMode === "wrap").length;
 
-    context.fillText(`Mode: ${modeText}`, 18, 18);
-    context.fillText(`Map: ${this.documentModel.map.name}`, 18, 34);
-    context.fillText(`Camera: ${this.cameraX}, ${this.cameraY}`, 18, 50);
-    context.fillText(`Traverse: ${Math.round(progress * 100)}% (${Math.round(this.simulation.traversedDistance)}/${Math.round(this.simulation.traversalDistance || 0)} px)`, 18, 66);
-    context.fillText(`Layers: ${sortedLayers.length} repeat=${repeatCount} wrap=${wrapCount}`, 18, 82);
-    sortedLayers.slice(0, 3).forEach((layer, index) => {
-      const y = 100 + (index * 16);
-      const row = `${layer.drawOrder}:${layer.name} sf(${layer.scrollFactorX.toFixed(2)},${layer.scrollFactorY.toFixed(2)}) ${layer.repeatX ? "RX" : "--"}/${layer.repeatY ? "RY" : "--"} ${layer.wrapMode}`;
-      context.fillText(row, 18, y);
-    });
+    if (this.refs.previewDetailsText instanceof HTMLElement) {
+      const lines = [
+        `Mode: ${modeText}`,
+        `Map: ${this.documentModel.map.name}`,
+        `Camera: ${this.cameraX}, ${this.cameraY}`,
+        `Traverse: ${Math.round(progress * 100)}% (${Math.round(this.simulation.traversedDistance)}/${Math.round(this.simulation.traversalDistance || 0)} px)`,
+        `Layers: ${sortedLayers.length} repeat=${repeatCount} wrap=${wrapCount}`
+      ];
+      sortedLayers.slice(0, 3).forEach((layer) => {
+        lines.push(`${layer.drawOrder}:${layer.name} sf(${layer.scrollFactorX.toFixed(2)},${layer.scrollFactorY.toFixed(2)}) ${layer.repeatX ? "RX" : "--"}/${layer.repeatY ? "RY" : "--"} ${layer.wrapMode}`);
+      });
+      this.refs.previewDetailsText.textContent = lines.join("\n");
+    }
     this.updateSimulationContextReadout();
   }
 

tools/Parallax Scene Studio/parallaxEditor.css

@@ -167,6 +167,20 @@ button:hover,
   margin-top: 8px;
 }
 
+.preview-details-text {
+  margin: 8px 0 0;
+  min-height: 84px;
+  max-height: 180px;
+  overflow: auto;
+  border: 1px solid var(--parallax-border);
+  border-radius: 8px;
+  padding: 10px;
+  background: rgba(15, 23, 42, 0.72);
+  color: #dbeafe;
+  font: 12px/1.35 Consolas, Monaco, monospace;
+  white-space: pre-wrap;
+}
+
 .layer-list {
   list-style: none;
   margin: 0;
@@ -234,6 +248,10 @@ button:hover,
   padding: 0 10px;
 }
 
+.parallax-editor-page .overlay-close-button {
+  display: none;
+}
+
 .parallax-editor-page #showLeftPanelButton {
   left: 10px;
 }
@@ -278,6 +296,29 @@ body.parallax-editor-page.fullscreen-mode .sidebar.visible-overlay {
   width: min(360px, calc(100vw - 24px));
   z-index: 50;
   overflow: auto;
+  padding-top: 48px;
+}
+
+body.parallax-editor-page.fullscreen-mode .sidebar.visible-overlay .overlay-close-button {
+  position: absolute;
+  top: 13px;
+  right: 13px;
+  z-index: 80;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 34px;
+  height: 34px;
+  min-height: 34px;
+  padding: 0;
+  border-radius: 999px;
+  font-size: 16px;
+  font-weight: 900;
+  line-height: 1;
+  border: 2px solid #ffffff;
+  background: #ed9700;
+  color: #ffffff;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.45);
 }
 
 body.parallax-editor-page.fullscreen-mode .left-sidebar.visible-overlay {
@@ -308,8 +349,23 @@ body.parallax-editor-page.fullscreen-mode #previewCanvas {
 
 body.parallax-editor-page.fullscreen-mode .fullscreen-overlay-button {
   display: inline-flex;
+  position: fixed;
   align-items: center;
   justify-content: center;
+  top: 96px;
+  z-index: 60;
+}
+
+body.parallax-editor-page.fullscreen-mode #showLeftPanelButton {
+  left: 10px;
+}
+
+body.parallax-editor-page.fullscreen-mode #showRightPanelButton {
+  right: 10px;
+}
+
+body.parallax-editor-page.fullscreen-mode .preview-details-text {
+  max-height: 150px;
 }
 
 @media (max-width: 1260px) {