From ef34df4a7d9393933f59e9bcb9c30e016b6f5387 Mon Sep 17 00:00:00 2001
From: anti <samuel@securejump.cl>
Date: Wed, 22 Apr 2026 18:11:37 -0400
Subject: [PATCH] feat(web/mazenet): fullscreen canvas mode (hides topbar +
 sidebar, Esc to exit)

---
 decnet_web/src/components/MazeNET/MazeNET.css | 13 +++++++++
 decnet_web/src/components/MazeNET/MazeNET.tsx | 27 ++++++++++++++++++-
 2 files changed, 39 insertions(+), 1 deletion(-)

diff --git a/decnet_web/src/components/MazeNET/MazeNET.css b/decnet_web/src/components/MazeNET/MazeNET.css
index d8ae1ad1..7b470621 100644
--- a/decnet_web/src/components/MazeNET/MazeNET.css
+++ b/decnet_web/src/components/MazeNET/MazeNET.css
@@ -1,5 +1,18 @@
 /* ── MazeNET canvas ─────────────────────────── */
 
+body.maze-fullscreen .sidebar,
+body.maze-fullscreen .topbar {
+  display: none !important;
+}
+body.maze-fullscreen .content-viewport {
+  padding: 16px 32px;
+}
+body.maze-fullscreen .maze-shell {
+  /* Full viewport minus content-viewport padding (16 top + 32 bottom) and header+gap. */
+  /* With flex:1 this stays correct because maze-page fills 100% of the new viewport. */
+}
+
+
 .maze-page {
   display: flex;
   flex-direction: column;
diff --git a/decnet_web/src/components/MazeNET/MazeNET.tsx b/decnet_web/src/components/MazeNET/MazeNET.tsx
index 63c771b0..ab5c71ae 100644
--- a/decnet_web/src/components/MazeNET/MazeNET.tsx
+++ b/decnet_web/src/components/MazeNET/MazeNET.tsx
@@ -2,7 +2,7 @@ import React, { useCallback, useEffect, useRef, useState } from 'react';
 import { useSearchParams, useNavigate } from 'react-router-dom';
 import {
   PanelRightOpen, PanelRightClose, PanelLeftOpen, PanelLeftClose,
-  RotateCcw, UploadCloud, ArrowLeft,
+  Maximize2, Minimize2, RotateCcw, UploadCloud, ArrowLeft,
   Plus, Trash2, Zap, Copy, Eye, ShieldAlert, GitMerge, Server,
 } from 'lucide-react';
 import './MazeNET.css';
@@ -48,6 +48,22 @@ const MazeNET: React.FC = () => {
   const [selection, setSelection] = useState<Selection>(null);
   const [inspectorOpen, setInspectorOpen] = useState(true);
   const [paletteOpen, setPaletteOpen] = useState(true);
+  const [fullscreen, setFullscreen] = useState(false);
+
+  useEffect(() => {
+    const cls = 'maze-fullscreen';
+    if (fullscreen) document.body.classList.add(cls);
+    else document.body.classList.remove(cls);
+    return () => document.body.classList.remove(cls);
+  }, [fullscreen]);
+
+  useEffect(() => {
+    const onKey = (e: KeyboardEvent) => {
+      if (e.key === 'Escape' && fullscreen) setFullscreen(false);
+    };
+    window.addEventListener('keydown', onKey);
+    return () => window.removeEventListener('keydown', onKey);
+  }, [fullscreen]);
   const [services, setServices] = useState<ServiceDef[]>(DEFAULT_SERVICES);
   const [archetypes, setArchetypes] = useState<Archetype[]>(DEFAULT_ARCHETYPES);
 
@@ -562,6 +578,15 @@ const MazeNET: React.FC = () => {
           <button type="button" className="maze-btn ghost" onClick={() => setInspectorOpen((o) => !o)}>
             {inspectorOpen ? <PanelRightClose size={12} /> : <PanelRightOpen size={12} />} INSPECTOR
           </button>
+          <button
+            type="button"
+            className="maze-btn ghost"
+            onClick={() => setFullscreen((f) => !f)}
+            title={fullscreen ? 'Exit fullscreen (Esc)' : 'Fullscreen canvas'}
+          >
+            {fullscreen ? <Minimize2 size={12} /> : <Maximize2 size={12} />}
+            {fullscreen ? ' EXIT FULL' : ' FULLSCREEN'}
+          </button>
           <button type="button" className="maze-btn ghost" onClick={refetch} title="Revert local state to server">
             <RotateCcw size={12} /> REFRESH
           </button>