From 0e1d637df29c7f959864c54a21b7b9dc29f59818 Mon Sep 17 00:00:00 2001
From: Victor Giers <mail@victorgiers.com>
Date: Thu, 2 Apr 2026 22:33:53 +0200
Subject: [PATCH] Enhance viewport region with layout modes and panels

---
 src/app/App.tsx | 62 +++++++++++++++++++++++++++++++------------------
 1 file changed, 39 insertions(+), 23 deletions(-)

diff --git a/src/app/App.tsx b/src/app/App.tsx
index 648bee99..4a7910fe 100644
--- a/src/app/App.tsx
+++ b/src/app/App.tsx
@@ -4077,41 +4077,57 @@ export function App({ store, initialStatusMessage }: AppProps) {
           </Panel>
         </aside>
 
-        <main className="viewport-region">
+        <main className={`viewport-region viewport-region--${layoutMode}`}>
           <div className="viewport-region__header">
             <div className="viewport-region__meta">
               <div className="viewport-region__title">Viewport</div>
-              <div className="viewport-region__caption">{getViewportCaption(editorState.toolMode, viewMode, brushList.length)}</div>
+              <div className="viewport-region__caption">
+                {getViewportCaption(editorState.toolMode, layoutMode, activePanelId, activePanelState, brushList.length)}
+              </div>
+              <div className="viewport-region__active-panel" data-testid="viewport-active-panel">
+                Active panel: {activePanelLabel} ({activePanelDisplaySummary})
+              </div>
             </div>
-            <div className="viewport-region__view-toggle" role="group" aria-label="Viewport view mode">
-              {VIEWPORT_VIEW_MODES.map((mode) => (
+            <div className="viewport-region__layout-toggle" role="group" aria-label="Viewport layout mode">
+              {VIEWPORT_LAYOUT_MODES.map((mode) => (
                 <button
                   key={mode}
-                  className={`toolbar__button viewport-region__view-button ${viewMode === mode ? "viewport-region__view-button--active" : ""}`}
+                  className={`toolbar__button viewport-region__layout-button ${layoutMode === mode ? "viewport-region__layout-button--active" : ""}`}
                   type="button"
-                  data-testid={`viewport-mode-${mode}`}
-                  aria-pressed={viewMode === mode}
-                  onClick={() => handleSetViewportViewMode(mode)}
+                  data-testid={`viewport-layout-${mode}`}
+                  aria-pressed={layoutMode === mode}
+                  onClick={() => handleSetViewportLayoutMode(mode)}
                 >
-                  {getViewportViewModeLabel(mode)}
+                  {getViewportLayoutModeLabel(mode)}
                 </button>
               ))}
             </div>
           </div>
-          <ViewportCanvas
-            world={editorState.document.world}
-            sceneDocument={editorState.document}
-            projectAssets={editorState.document.assets}
-            loadedModelAssets={loadedModelAssets}
-            loadedImageAssets={loadedImageAssets}
-            selection={editorState.selection}
-            toolMode={editorState.toolMode}
-            viewMode={viewMode}
-            focusRequestId={focusRequest.id}
-            focusSelection={focusRequest.selection}
-            onSelectionChange={(selection) => applySelection(selection, "viewport")}
-            onCreateBoxBrush={handleCreateBoxBrush}
-          />
+          <div className={`viewport-region__panels viewport-region__panels--${layoutMode}`}>
+            {VIEWPORT_PANEL_IDS.map((panelId) => (
+              <ViewportPanel
+                key={panelId}
+                panelId={panelId}
+                panelState={editorState.viewportPanels[panelId]}
+                layoutMode={layoutMode}
+                isActive={activePanelId === panelId}
+                world={editorState.document.world}
+                sceneDocument={editorState.document}
+                projectAssets={editorState.document.assets}
+                loadedModelAssets={loadedModelAssets}
+                loadedImageAssets={loadedImageAssets}
+                selection={editorState.selection}
+                toolMode={editorState.toolMode}
+                focusRequestId={focusRequest.panelId === panelId ? focusRequest.id : 0}
+                focusSelection={focusRequest.selection}
+                onActivatePanel={handleActivateViewportPanel}
+                onSetPanelViewMode={handleSetViewportPanelViewMode}
+                onSetPanelDisplayMode={handleSetViewportPanelDisplayMode}
+                onSelectionChange={(selection) => applySelection(selection, "viewport")}
+                onCreateBoxBrush={handleCreateBoxBrush}
+              />
+            ))}
+          </div>
         </main>
 
         <aside className="side-column">