From b676dc2e1f775e4232d9bbd3d258bf1720e4a79c Mon Sep 17 00:00:00 2001
From: Victor Giers <mail@victorgiers.com>
Date: Tue, 31 Mar 2026 02:05:57 +0200
Subject: [PATCH] Update component props and styles for App and ViewportCanvas

---
 src/app/App.tsx                       |  2 +-
 src/app/app.css                       | 56 +++++++++++++++++++++++++++
 src/viewport-three/ViewportCanvas.tsx |  8 ++--
 src/viewport-three/viewport-host.ts   |  1 +
 4 files changed, 62 insertions(+), 5 deletions(-)

diff --git a/src/app/App.tsx b/src/app/App.tsx
index bb74b870..8ec946c0 100644
--- a/src/app/App.tsx
+++ b/src/app/App.tsx
@@ -431,7 +431,7 @@ export function App({ store, initialStatusMessage }: AppProps) {
           </div>
           <ViewportCanvas
             world={editorState.document.world}
-            document={editorState.document}
+            sceneDocument={editorState.document}
             selection={editorState.selection}
             onBrushSelectionChange={(brushId) => handleBrushSelection(brushId, "viewport")}
           />
diff --git a/src/app/app.css b/src/app/app.css
index e6fea002..a788981f 100644
--- a/src/app/app.css
+++ b/src/app/app.css
@@ -227,6 +227,18 @@ button:disabled {
   flex-wrap: wrap;
 }
 
+.form-section {
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+}
+
+.vector-inputs {
+  display: grid;
+  grid-template-columns: repeat(3, minmax(0, 1fr));
+  gap: 12px;
+}
+
 .placeholder-list {
   display: flex;
   flex-direction: column;
@@ -244,6 +256,45 @@ button:disabled {
   border-radius: 12px;
 }
 
+.outliner-list {
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+}
+
+.outliner-item {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  gap: 6px;
+  width: 100%;
+  padding: 12px 14px;
+  color: var(--color-text);
+  text-align: left;
+  background: rgba(255, 255, 255, 0.03);
+  border: 1px solid rgba(255, 255, 255, 0.08);
+  border-radius: 14px;
+}
+
+.outliner-item:hover:not(:disabled) {
+  border-color: rgba(255, 255, 255, 0.16);
+}
+
+.outliner-item--selected {
+  background: var(--color-accent-soft);
+  border-color: rgba(207, 123, 66, 0.55);
+}
+
+.outliner-item__title {
+  font-size: 0.92rem;
+  font-weight: 700;
+}
+
+.outliner-item__meta {
+  color: var(--color-muted);
+  font-size: 0.8rem;
+ }
+
 .viewport-region {
   display: grid;
   grid-template-rows: 42px minmax(0, 1fr);
@@ -279,6 +330,7 @@ button:disabled {
 .viewport-canvas {
   position: relative;
   min-height: 420px;
+  cursor: crosshair;
   background:
     radial-gradient(circle at top, rgba(130, 154, 188, 0.28) 0%, rgba(130, 154, 188, 0) 38%),
     linear-gradient(180deg, #55657c 0%, #2c3440 34%, #151920 100%);
@@ -375,6 +427,10 @@ button:disabled {
     min-height: 320px;
   }
 
+  .vector-inputs {
+    grid-template-columns: 1fr;
+  }
+
   .status-bar {
     flex-direction: column;
     align-items: flex-start;
diff --git a/src/viewport-three/ViewportCanvas.tsx b/src/viewport-three/ViewportCanvas.tsx
index 95fcc762..77f92152 100644
--- a/src/viewport-three/ViewportCanvas.tsx
+++ b/src/viewport-three/ViewportCanvas.tsx
@@ -7,12 +7,12 @@ import { ViewportHost } from "./viewport-host";
 
 interface ViewportCanvasProps {
   world: WorldSettings;
-  document: SceneDocument;
+  sceneDocument: SceneDocument;
   selection: EditorSelection;
   onBrushSelectionChange(brushId: string | null): void;
 }
 
-export function ViewportCanvas({ world, document, selection, onBrushSelectionChange }: ViewportCanvasProps) {
+export function ViewportCanvas({ world, sceneDocument, selection, onBrushSelectionChange }: ViewportCanvasProps) {
   const containerRef = useRef<HTMLDivElement | null>(null);
   const hostRef = useRef<ViewportHost | null>(null);
   const [viewportMessage, setViewportMessage] = useState<string | null>(null);
@@ -57,8 +57,8 @@ export function ViewportCanvas({ world, document, selection, onBrushSelectionCha
   }, [world]);
 
   useEffect(() => {
-    hostRef.current?.updateDocument(document, selection);
-  }, [document, selection]);
+    hostRef.current?.updateDocument(sceneDocument, selection);
+  }, [sceneDocument, selection]);
 
   useEffect(() => {
     hostRef.current?.setBrushSelectionChangeHandler(onBrushSelectionChange);
diff --git a/src/viewport-three/viewport-host.ts b/src/viewport-three/viewport-host.ts
index 18de6db4..bb982cfd 100644
--- a/src/viewport-three/viewport-host.ts
+++ b/src/viewport-three/viewport-host.ts
@@ -5,6 +5,7 @@ import {
   Color,
   DirectionalLight,
   EdgesGeometry,
+  GridHelper,
   Group,
   LineBasicMaterial,
   LineSegments,