Merge pull request #86 from pascalorg/feat/polish-editor

Feat/polish editor

apps/editor/components/editor/custom-camera-controls.tsx

@@ -1,54 +1,41 @@
-"use client";
+'use client'
 
-import {
+import { type CameraControlEvent, emitter, sceneRegistry, useScene } from '@pascal-app/core'
-  type CameraControlEvent,
+import { useViewer } from '@pascal-app/viewer'
-  emitter,
+import { CameraControls, CameraControlsImpl } from '@react-three/drei'
-  sceneRegistry,
+import { useEffect, useMemo, useRef } from 'react'
-  useScene,
+import { Vector3 } from 'three'
-} from "@pascal-app/core";
-import { useViewer } from "@pascal-app/viewer";
-import { CameraControls, CameraControlsImpl } from "@react-three/drei";
-import { useEffect, useMemo, useRef } from "react";
-import { Vector3 } from "three";
 
-const currentTarget = new Vector3();
+const currentTarget = new Vector3()
 
 export const CustomCameraControls = () => {
-  const controls = useRef<CameraControlsImpl>(null!);
+  const controls = useRef<CameraControlsImpl>(null!)
-  const currentLevelId = useViewer((state) => state.selection.levelId);
+  const currentLevelId = useViewer((state) => state.selection.levelId)
-  const firstLoad = useRef(true);
+  const firstLoad = useRef(true)
 
   useEffect(() => {
-    let targetY = 0;
+    let targetY = 0
     if (currentLevelId) {
-      const levelMesh = sceneRegistry.nodes.get(currentLevelId);
+      const levelMesh = sceneRegistry.nodes.get(currentLevelId)
       if (levelMesh) {
-        targetY = levelMesh.position.y;
+        targetY = levelMesh.position.y
       }
     }
     if (firstLoad.current) {
-      firstLoad.current = false;
+      firstLoad.current = false
-      (controls.current as CameraControlsImpl).setLookAt(
+      ;(controls.current as CameraControlsImpl).setLookAt(20, 20, 20, 0, 0, 0, true)
-        20,
-        20,
-        20,
-        0,
-        0,
-        0,
-        true,
-      );
     }
-    (controls.current as CameraControlsImpl).getTarget(currentTarget);
+    ;(controls.current as CameraControlsImpl).getTarget(currentTarget)
-    (controls.current as CameraControlsImpl).moveTo(
+    ;(controls.current as CameraControlsImpl).moveTo(
       currentTarget.x,
       targetY,
       currentTarget.z,
       true,
-    );
+    )
-  }, [currentLevelId]);
+  }, [currentLevelId])
 
   // Configure mouse buttons based on control mode and camera mode
-  const cameraMode = useViewer((state) => state.cameraMode);
+  const cameraMode = useViewer((state) => state.cameraMode)
   const mouseButtons = useMemo(() => {
     // Use ZOOM for orthographic camera, DOLLY for perspective camera
     const wheelAction =
@@ -62,19 +49,18 @@ export const CustomCameraControls = () => {
       right: CameraControlsImpl.ACTION.ROTATE,
       wheel: wheelAction,
     }
-  }, [cameraMode]);
+  }, [cameraMode])
-
 
   useEffect(() => {
     const handleNodeCapture = ({ nodeId }: CameraControlEvent) => {
-      if (!controls.current) return;
+      if (!controls.current) return
 
-      const position = new Vector3();
+      const position = new Vector3()
-      const target = new Vector3();
+      const target = new Vector3()
-      controls.current.getPosition(position);
+      controls.current.getPosition(position)
-      controls.current.getTarget(target);
+      controls.current.getTarget(target)
 
-      const state = useScene.getState();
+      const state = useScene.getState()
 
       state.updateNode(nodeId, {
         camera: {
@@ -82,14 +68,14 @@ export const CustomCameraControls = () => {
           target: [target.x, target.y, target.z],
           mode: useViewer.getState().cameraMode,
         },
-      });
+      })
-    };
+    }
     const handleNodeView = ({ nodeId }: CameraControlEvent) => {
-      if (!controls.current) return;
+      if (!controls.current) return
 
-      const node = useScene.getState().nodes[nodeId];
+      const node = useScene.getState().nodes[nodeId]
-      if (!node || !node.camera) return;
+      if (!node || !node.camera) return
-      const { position, target } = node.camera;
+      const { position, target } = node.camera
 
       controls.current.setLookAt(
         position[0],
@@ -99,20 +85,69 @@ export const CustomCameraControls = () => {
         target[1],
         target[2],
         true,
-      );
+      )
-    };
+    }
 
-    emitter.on("camera-controls:capture", handleNodeCapture);
+    const handleTopView = () => {
-    emitter.on("camera-controls:view", handleNodeView);
+      if (!controls.current) return
+
+      const currentPolarAngle = controls.current.polarAngle
+
+      // Toggle: if already near top view (< 0.1 radians ≈ 5.7°), go back to 45°
+      // Otherwise, go to top view (0°)
+      const targetAngle = currentPolarAngle < 0.1 ? Math.PI / 4 : 0
+
+      controls.current.rotatePolarTo(targetAngle, true)
+    }
+
+    const handleOrbitCW = () => {
+      if (!controls.current) return
+
+      const currentAzimuth = controls.current.azimuthAngle
+      const currentPolar = controls.current.polarAngle
+      // Round to nearest 90° increment, then rotate 90° clockwise
+      const rounded = Math.round(currentAzimuth / (Math.PI / 2)) * (Math.PI / 2)
+      const target = rounded - Math.PI / 2
+
+      controls.current.rotateTo(target, currentPolar, true)
+    }
+
+    const handleOrbitCCW = () => {
+      if (!controls.current) return
+
+      const currentAzimuth = controls.current.azimuthAngle
+      const currentPolar = controls.current.polarAngle
+      // Round to nearest 90° increment, then rotate 90° counter-clockwise
+      const rounded = Math.round(currentAzimuth / (Math.PI / 2)) * (Math.PI / 2)
+      const target = rounded + Math.PI / 2
+
+      controls.current.rotateTo(target, currentPolar, true)
+    }
+
+    emitter.on('camera-controls:capture', handleNodeCapture)
+    emitter.on('camera-controls:view', handleNodeView)
+    emitter.on('camera-controls:top-view', handleTopView)
+    emitter.on('camera-controls:orbit-cw', handleOrbitCW)
+    emitter.on('camera-controls:orbit-ccw', handleOrbitCCW)
 
     return () => {
-      emitter.off("camera-controls:capture", handleNodeCapture);
+      emitter.off('camera-controls:capture', handleNodeCapture)
-      emitter.off("camera-controls:view", handleNodeView);
+      emitter.off('camera-controls:view', handleNodeView)
-    };
+      emitter.off('camera-controls:top-view', handleTopView)
-  }, []);
+      emitter.off('camera-controls:orbit-cw', handleOrbitCW)
+      emitter.off('camera-controls:orbit-ccw', handleOrbitCCW)
+    }
+  }, [])
 
-  return <CameraControls maxDistance={100}
+  return (
+    <CameraControls
+      makeDefault
+      maxDistance={100}
       maxPolarAngle={Math.PI / 2 - 0.1}
       minDistance={10}
-      minPolarAngle={0} ref={controls} mouseButtons={mouseButtons} />;
+      minPolarAngle={0}
-};
+      ref={controls}
+      mouseButtons={mouseButtons}
+    />
+  )
+}

apps/editor/components/tools/shared/polygon-editor.tsx

@@ -0,0 +1,298 @@
+import { useThree } from '@react-three/fiber'
+import { useCallback, useEffect, useMemo, useRef, useState } from 'react'
+import {
+  BufferGeometry,
+  Float32BufferAttribute,
+  type Mesh,
+  Plane,
+  Raycaster,
+  Vector2,
+  Vector3,
+} from 'three'
+
+const Y_OFFSET = 0.02
+
+type DragState = {
+  isDragging: boolean
+  vertexIndex: number
+  initialPosition: [number, number]
+  pointerId: number
+}
+
+export interface PolygonEditorProps {
+  polygon: Array<[number, number]>
+  color?: string
+  onPolygonChange: (polygon: Array<[number, number]>) => void
+  minVertices?: number
+}
+
+/**
+ * Generic polygon editor component for editing polygon vertices
+ * Used by zone and site boundary editors
+ */
+export const PolygonEditor: React.FC<PolygonEditorProps> = ({
+  polygon,
+  color = '#3b82f6',
+  onPolygonChange,
+  minVertices = 3,
+}) => {
+  const { gl, camera } = useThree()
+
+  // Local state for dragging
+  const [dragState, setDragState] = useState<DragState | null>(null)
+  const [previewPolygon, setPreviewPolygon] = useState<Array<[number, number]> | null>(null)
+  const [hoveredVertex, setHoveredVertex] = useState<number | null>(null)
+  const [hoveredMidpoint, setHoveredMidpoint] = useState<number | null>(null)
+
+  // Refs for raycasting during drag
+  const dragPlane = useRef(new Plane(new Vector3(0, 1, 0), -Y_OFFSET))
+  const raycaster = useRef(new Raycaster())
+  const lineRef = useRef<Mesh>(null!)
+
+  // The polygon to display (preview during drag, or actual polygon)
+  const displayPolygon = previewPolygon ?? polygon
+
+  // Calculate midpoints for adding new vertices
+  const midpoints = useMemo(() => {
+    if (displayPolygon.length < 2) return []
+    return displayPolygon.map(([x1, z1], index) => {
+      const nextIndex = (index + 1) % displayPolygon.length
+      const [x2, z2] = displayPolygon[nextIndex]!
+      return [(x1! + x2) / 2, (z1! + z2) / 2] as [number, number]
+    })
+  }, [displayPolygon])
+
+  // Handle vertex drag
+  const handleVertexDrag = useCallback(
+    (clientX: number, clientY: number, vertexIndex: number) => {
+      const canvas = gl.domElement
+      const rect = canvas.getBoundingClientRect()
+      const x = ((clientX - rect.left) / rect.width) * 2 - 1
+      const y = -((clientY - rect.top) / rect.height) * 2 + 1
+
+      raycaster.current.setFromCamera(new Vector2(x, y), camera)
+      const intersection = new Vector3()
+      raycaster.current.ray.intersectPlane(dragPlane.current, intersection)
+
+      if (intersection) {
+        // Snap to 0.5 grid
+        const gridX = Math.round(intersection.x * 2) / 2
+        const gridZ = Math.round(intersection.z * 2) / 2
+
+        const basePolygon = previewPolygon ?? polygon
+        const newPolygon = [...basePolygon]
+        newPolygon[vertexIndex] = [gridX, gridZ]
+        setPreviewPolygon(newPolygon)
+      }
+    },
+    [gl, camera, previewPolygon, polygon],
+  )
+
+  // Commit polygon changes
+  const commitPolygonChange = useCallback(() => {
+    if (previewPolygon) {
+      onPolygonChange(previewPolygon)
+    }
+    setPreviewPolygon(null)
+    setDragState(null)
+  }, [previewPolygon, onPolygonChange])
+
+  // Handle adding a new vertex at midpoint
+  const handleAddVertex = useCallback(
+    (afterIndex: number, position: [number, number]) => {
+      const basePolygon = previewPolygon ?? polygon
+      const newPolygon = [
+        ...basePolygon.slice(0, afterIndex + 1),
+        position,
+        ...basePolygon.slice(afterIndex + 1),
+      ]
+
+      setPreviewPolygon(newPolygon)
+      return afterIndex + 1 // Return new vertex index
+    },
+    [polygon, previewPolygon],
+  )
+
+  // Handle deleting a vertex
+  const handleDeleteVertex = useCallback(
+    (index: number) => {
+      const basePolygon = previewPolygon ?? polygon
+      if (basePolygon.length <= minVertices) return // Need at least minVertices points
+
+      const newPolygon = basePolygon.filter((_, i) => i !== index)
+      onPolygonChange(newPolygon)
+      setPreviewPolygon(null)
+    },
+    [polygon, previewPolygon, onPolygonChange, minVertices],
+  )
+
+  // Set up pointer move/up listeners for dragging with pointer capture
+  useEffect(() => {
+    if (!dragState?.isDragging) return
+
+    const canvas = gl.domElement
+    const pointerId = dragState.pointerId
+
+    // Capture pointer to prevent R3F events from firing on other objects (like the grid)
+    canvas.setPointerCapture(pointerId)
+
+    const handlePointerMove = (e: PointerEvent) => {
+      handleVertexDrag(e.clientX, e.clientY, dragState.vertexIndex)
+    }
+
+    const handlePointerUp = (e: PointerEvent) => {
+      // Release pointer capture
+      if (canvas.hasPointerCapture(e.pointerId)) {
+        canvas.releasePointerCapture(e.pointerId)
+      }
+      commitPolygonChange()
+    }
+
+    canvas.addEventListener('pointermove', handlePointerMove)
+    canvas.addEventListener('pointerup', handlePointerUp)
+
+    return () => {
+      // Release capture on cleanup
+      if (canvas.hasPointerCapture(pointerId)) {
+        canvas.releasePointerCapture(pointerId)
+      }
+      canvas.removeEventListener('pointermove', handlePointerMove)
+      canvas.removeEventListener('pointerup', handlePointerUp)
+    }
+  }, [dragState, gl, handleVertexDrag, commitPolygonChange])
+
+  // Update line geometry when polygon changes
+  useEffect(() => {
+    if (!lineRef.current || displayPolygon.length < 2) return
+
+    const positions: number[] = []
+    for (const [x, z] of displayPolygon) {
+      positions.push(x!, Y_OFFSET + 0.01, z!)
+    }
+    // Close the loop
+    const first = displayPolygon[0]!
+    positions.push(first[0]!, Y_OFFSET + 0.01, first[1]!)
+
+    const geometry = new BufferGeometry()
+    geometry.setAttribute('position', new Float32BufferAttribute(positions, 3))
+
+    lineRef.current.geometry.dispose()
+    lineRef.current.geometry = geometry
+  }, [displayPolygon])
+
+  if (displayPolygon.length < minVertices) return null
+
+  const canDelete = displayPolygon.length > minVertices
+
+  return (
+    <group>
+      {/* Border line */}
+      {/* @ts-ignore */}
+      <line ref={lineRef} frustumCulled={false} renderOrder={10}>
+        <bufferGeometry />
+        <lineBasicNodeMaterial
+          color={color}
+          linewidth={2}
+          depthTest={false}
+          depthWrite={false}
+          transparent
+          opacity={0.8}
+        />
+      </line>
+
+      {/* Vertex handles */}
+      {displayPolygon.map(([x, z], index) => {
+        const isHovered = hoveredVertex === index
+        const isDragging = dragState?.vertexIndex === index
+
+        return (
+          <mesh
+            key={`vertex-${index}`}
+            position={[x!, Y_OFFSET, z!]}
+            onPointerEnter={(e) => {
+              e.stopPropagation()
+              setHoveredVertex(index)
+            }}
+            onPointerLeave={(e) => {
+              e.stopPropagation()
+              setHoveredVertex(null)
+            }}
+            onPointerDown={(e) => {
+              e.stopPropagation()
+              setDragState({
+                isDragging: true,
+                vertexIndex: index,
+                initialPosition: [x!, z!],
+                pointerId: e.nativeEvent.pointerId,
+              })
+            }}
+            onClick={(e) => {
+              e.stopPropagation()
+            }}
+            onDoubleClick={(e) => {
+              e.stopPropagation()
+              if (canDelete) {
+                handleDeleteVertex(index)
+              }
+            }}
+          >
+            <sphereGeometry args={[isHovered || isDragging ? 0.3 : 0.25, 16, 16]} />
+            <meshBasicMaterial
+              color={
+                isDragging ? '#22c55e' : isHovered ? (canDelete ? '#ef4444' : '#ffffff') : color
+              }
+              depthTest={false}
+              depthWrite={false}
+            />
+          </mesh>
+        )
+      })}
+
+      {/* Midpoint handles for adding vertices (hidden while dragging) */}
+      {!dragState &&
+        midpoints.map(([x, z], index) => {
+          const isHovered = hoveredMidpoint === index
+
+          return (
+            <mesh
+              key={`midpoint-${index}`}
+              position={[x!, Y_OFFSET, z!]}
+              onPointerEnter={(e) => {
+                e.stopPropagation()
+                setHoveredMidpoint(index)
+              }}
+              onPointerLeave={(e) => {
+                e.stopPropagation()
+                setHoveredMidpoint(null)
+              }}
+              onPointerDown={(e) => {
+                e.stopPropagation()
+                const newVertexIndex = handleAddVertex(index, [x!, z!])
+                if (newVertexIndex >= 0) {
+                  setDragState({
+                    isDragging: true,
+                    vertexIndex: newVertexIndex,
+                    initialPosition: [x!, z!],
+                    pointerId: e.nativeEvent.pointerId,
+                  })
+                  setHoveredMidpoint(null)
+                }
+              }}
+              onClick={(e) => {
+                e.stopPropagation()
+              }}
+            >
+              <sphereGeometry args={[isHovered ? 0.3 : 0.25, 16, 16]} />
+              <meshBasicMaterial
+                color={isHovered ? '#22c55e' : color}
+                depthTest={false}
+                depthWrite={false}
+                transparent
+                opacity={isHovered ? 1 : 0.6}
+              />
+            </mesh>
+          )
+        })}
+    </group>
+  )
+}

apps/editor/components/tools/site/site-boundary-editor.tsx

@@ -0,0 +1,42 @@
+import { useScene, type SiteNode } from '@pascal-app/core'
+import { useCallback } from 'react'
+import { PolygonEditor } from '../shared/polygon-editor'
+
+/**
+ * Site boundary editor - allows editing site polygon when in site phase
+ * Uses the generic PolygonEditor component
+ */
+export const SiteBoundaryEditor: React.FC = () => {
+  const nodes = useScene((state) => state.nodes)
+  const rootNodeIds = useScene((state) => state.rootNodeIds)
+  const updateNode = useScene((state) => state.updateNode)
+
+  // Get the site node (first root node)
+  const siteNode = rootNodeIds[0] ? nodes[rootNodeIds[0]] : null
+  const site = siteNode?.type === 'site' ? (siteNode as SiteNode) : null
+
+  const handlePolygonChange = useCallback(
+    (newPolygon: Array<[number, number]>) => {
+      if (site) {
+        updateNode(site.id, {
+          polygon: {
+            type: 'polygon',
+            points: newPolygon,
+          },
+        })
+      }
+    },
+    [site, updateNode],
+  )
+
+  if (!site || !site.polygon?.points || site.polygon.points.length < 3) return null
+
+  return (
+    <PolygonEditor
+      polygon={site.polygon.points}
+      color="#f59e0b"
+      onPolygonChange={handlePolygonChange}
+      minVertices={3}
+    />
+  )
+}

apps/editor/components/tools/tool-manager.tsx

@@ -4,13 +4,16 @@ import { CeilingTool } from "./ceiling/ceiling-tool";
 import { ItemTool } from "./item/item-tool";
 import { MoveTool } from "./item/move-tool";
 import { RoofTool } from "./roof/roof-tool";
+import { SiteBoundaryEditor } from "./site/site-boundary-editor";
 import { SlabTool } from "./slab/slab-tool";
 import { WallTool } from "./wall/wall-tool";
 import { ZoneBoundaryEditor } from "./zone/zone-boundary-editor";
 import { ZoneTool } from "./zone/zone-tool";
 
 const tools: Record<Phase, Partial<Record<Tool, React.FC>>> = {
-  site: {},
+  site: {
+    "property-line": SiteBoundaryEditor,
+  },
   structure: {
     wall: WallTool,
     slab: SlabTool,
@@ -31,6 +34,9 @@ export const ToolManager: React.FC = () => {
   const movingNode = useEditor((state) => state.movingNode);
   const selectedZoneId = useViewer((state) => state.selection.zoneId);
 
+  // Show site boundary editor when in site phase and edit mode
+  const showSiteBoundaryEditor = phase === "site" && mode === "edit";
+
   // Show zone boundary editor when in structure/select mode with a zone selected
   const showZoneBoundaryEditor =
     phase === "structure" && mode === "select" && selectedZoneId !== null;
@@ -42,6 +48,7 @@ export const ToolManager: React.FC = () => {
 
   return (
     <>
+      {showSiteBoundaryEditor && <SiteBoundaryEditor />}
       {showZoneBoundaryEditor && <ZoneBoundaryEditor />}
       {movingNode && <MoveTool />}
       {!movingNode && BuildToolComponent && <BuildToolComponent />}

apps/editor/components/tools/wall/wall-tool.tsx

@@ -1,7 +1,83 @@
 import { emitter, type GridEvent, useScene, WallNode } from '@pascal-app/core'
 import { useViewer } from '@pascal-app/viewer'
-import { useEffect, useRef } from 'react'
+import { useEffect, useRef, useMemo } from 'react'
-import { type Line, type Mesh, Vector3 } from 'three'
+import { DoubleSide, type Mesh, Vector3, Shape, ShapeGeometry } from 'three'
+
+const WALL_HEIGHT = 2.5
+const WALL_THICKNESS = 0.15
+
+/**
+ * Snap point to 45° angle increments relative to start point
+ * Also snaps end point to 0.5 grid
+ */
+const snapTo45Degrees = (start: Vector3, cursor: Vector3): Vector3 => {
+  const dx = cursor.x - start.x
+  const dz = cursor.z - start.z
+
+  // Calculate angle in radians
+  const angle = Math.atan2(dz, dx)
+
+  // Round to nearest 45° (π/4 radians)
+  const snappedAngle = Math.round(angle / (Math.PI / 4)) * (Math.PI / 4)
+
+  // Calculate distance from start to cursor
+  const distance = Math.sqrt(dx * dx + dz * dz)
+
+  // Project end point along snapped angle
+  let snappedX = start.x + Math.cos(snappedAngle) * distance
+  let snappedZ = start.z + Math.sin(snappedAngle) * distance
+
+  // Snap to 0.5 grid
+  snappedX = Math.round(snappedX * 2) / 2
+  snappedZ = Math.round(snappedZ * 2) / 2
+
+  return new Vector3(snappedX, cursor.y, snappedZ)
+}
+
+/**
+ * Update wall preview mesh geometry to create a vertical plane between two points
+ */
+const updateWallPreview = (mesh: Mesh, start: Vector3, end: Vector3) => {
+  // Calculate direction and perpendicular for wall thickness
+  const direction = new Vector3(end.x - start.x, 0, end.z - start.z)
+  const length = direction.length()
+
+  if (length < 0.01) {
+    mesh.visible = false
+    return
+  }
+
+  mesh.visible = true
+  direction.normalize()
+
+  // Perpendicular vector for thickness
+  const perpendicular = new Vector3(-direction.z, 0, direction.x).multiplyScalar(WALL_THICKNESS / 2)
+
+  // Create wall shape (vertical rectangle in XY plane)
+  const shape = new Shape()
+  shape.moveTo(0, 0)
+  shape.lineTo(length, 0)
+  shape.lineTo(length, WALL_HEIGHT)
+  shape.lineTo(0, WALL_HEIGHT)
+  shape.closePath()
+
+  // Create geometry
+  const geometry = new ShapeGeometry(shape)
+
+  // Calculate rotation angle
+  // Negate the angle to fix the opposite direction issue
+  const angle = -Math.atan2(direction.z, direction.x)
+
+  // Position at start point and rotate
+  mesh.position.set(start.x, start.y, start.z)
+  mesh.rotation.y = angle
+
+  // Dispose old geometry and assign new one
+  if (mesh.geometry) {
+    mesh.geometry.dispose()
+  }
+  mesh.geometry = geometry
+}
 
 const commitWallDrawing = (start: [number, number], end: [number, number]) => {
   const currentLevelId = useViewer.getState().selection.levelId
@@ -16,36 +92,43 @@ const commitWallDrawing = (start: [number, number], end: [number, number]) => {
 
 export const WallTool: React.FC = () => {
   const cursorRef = useRef<Mesh>(null)
-  const drawingLineRef = useRef<Line>(null!)
+  const wallPreviewRef = useRef<Mesh>(null!)
+  const startingPoint = useRef(new Vector3(0, 0, 0))
+  const endingPoint = useRef(new Vector3(0, 0, 0))
+  const buildingState = useRef(0)
 
   useEffect(() => {
-    let buildingState = 0
-    const startingPoint = new Vector3(0, 0, 0)
-    const endingPoint = new Vector3(0, 0, 0)
     let gridPosition: [number, number] = [0, 0]
 
-    drawingLineRef.current.geometry.setFromPoints([startingPoint, endingPoint])
-
     const onGridMove = (event: GridEvent) => {
-      if (!cursorRef.current) return
+      if (!cursorRef.current || !wallPreviewRef.current) return
 
       gridPosition = [Math.round(event.position[0] * 2) / 2, Math.round(event.position[2] * 2) / 2]
+      const cursorPosition = new Vector3(gridPosition[0], event.position[1], gridPosition[1])
       cursorRef.current.position.set(gridPosition[0], event.position[1], gridPosition[1])
-      if (buildingState === 1) {
+
-        endingPoint.set(gridPosition[0], event.position[1], gridPosition[1])
+      if (buildingState.current === 1) {
+        // Snap to 45° angles
+        const snapped = snapTo45Degrees(startingPoint.current, cursorPosition)
+        endingPoint.current.copy(snapped)
+
+        // Update wall preview geometry
+        updateWallPreview(wallPreviewRef.current, startingPoint.current, endingPoint.current)
       }
-      drawingLineRef.current.geometry.setFromPoints([startingPoint, endingPoint])
     }
+
     const onGridClick = (event: GridEvent) => {
-      if (buildingState === 0) {
+      if (buildingState.current === 0) {
-        startingPoint.set(gridPosition[0], event.position[1], gridPosition[1])
+        startingPoint.current.set(gridPosition[0], event.position[1], gridPosition[1])
-        buildingState = 1
+        buildingState.current = 1
-        console.log('starting building at:', startingPoint)
+        wallPreviewRef.current.visible = true
-        drawingLineRef.current.visible = true
+      } else if (buildingState.current === 1) {
-      } else if (buildingState === 1) {
+        commitWallDrawing(
-        commitWallDrawing([startingPoint.x, startingPoint.z], [endingPoint.x, endingPoint.z])
+          [startingPoint.current.x, startingPoint.current.z],
-        drawingLineRef.current.visible = false
+          [endingPoint.current.x, endingPoint.current.z]
-        buildingState = 0
+        )
+        wallPreviewRef.current.visible = false
+        buildingState.current = 0
       }
     }
 
@@ -60,25 +143,24 @@ export const WallTool: React.FC = () => {
 
   return (
     <group>
+      {/* Cursor indicator */}
       <mesh ref={cursorRef}>
         <boxGeometry args={[0.2, 0.2, 0.2]} />
         <meshStandardMaterial color="red" />
       </mesh>
-      <group>
+
-        {/* @ts-ignore */}
+      {/* Wall preview */}
-        <line ref={drawingLineRef} frustumCulled={false} renderOrder={1} visible={false}>
+      <mesh ref={wallPreviewRef} visible={false} renderOrder={1}>
-          <bufferGeometry />
+        <shapeGeometry />
-          <lineDashedNodeMaterial
+        <meshBasicMaterial
-            color="blue"
+          color="#3b82f6"
-            linewidth={4}
+          transparent
-            linecap="round"
+          opacity={0.5}
-            depthTest={false}
+          side={DoubleSide}
-            depthWrite={false}
+          depthTest={false}
-            dashSize={2}
+          depthWrite={false}
-            gapSize={0.1}
+        />
-          />
+      </mesh>
-        </line>
-      </group>
     </group>
   )
 }

apps/editor/components/tools/zone/zone-boundary-editor.tsx

@@ -1,299 +1,37 @@
 import { useScene, type ZoneNode } from '@pascal-app/core'
 import { useViewer } from '@pascal-app/viewer'
-import { useThree } from '@react-three/fiber'
+import { useCallback } from 'react'
-import { useCallback, useEffect, useMemo, useRef, useState } from 'react'
+import { PolygonEditor } from '../shared/polygon-editor'
-import {
-  BufferGeometry,
-  Float32BufferAttribute,
-  type Mesh,
-  Plane,
-  Raycaster,
-  Vector2,
-  Vector3,
-} from 'three'
-
-const Y_OFFSET = 0.02
-
-type DragState = {
-  isDragging: boolean
-  vertexIndex: number
-  initialPosition: [number, number]
-  pointerId: number
-}
 
 /**
  * Zone boundary editor - allows editing zone polygon vertices when a zone is selected
- * Uses the event emitter system for grid interactions
+ * Uses the generic PolygonEditor component
  */
 export const ZoneBoundaryEditor: React.FC = () => {
-  const { gl, camera } = useThree()
   const selectedZoneId = useViewer((state) => state.selection.zoneId)
   const zoneNode = useScene((state) => (selectedZoneId ? state.nodes[selectedZoneId] : null))
   const zone = zoneNode?.type === 'zone' ? (zoneNode as ZoneNode) : null
   const updateNode = useScene((state) => state.updateNode)
 
-  // Local state for dragging
+  const handlePolygonChange = useCallback(
-  const [dragState, setDragState] = useState<DragState | null>(null)
+    (newPolygon: Array<[number, number]>) => {
-  const [previewPolygon, setPreviewPolygon] = useState<Array<[number, number]> | null>(null)
+      if (selectedZoneId) {
-  const [hoveredVertex, setHoveredVertex] = useState<number | null>(null)
+        updateNode(selectedZoneId, { polygon: newPolygon })
-  const [hoveredMidpoint, setHoveredMidpoint] = useState<number | null>(null)
-
-  // Refs for raycasting during drag
-  const dragPlane = useRef(new Plane(new Vector3(0, 1, 0), -Y_OFFSET))
-  const raycaster = useRef(new Raycaster())
-  const lineRef = useRef<Mesh>(null!)
-
-  // The polygon to display (preview during drag, or actual zone polygon)
-  const displayPolygon = previewPolygon ?? zone?.polygon ?? []
-
-  // Calculate midpoints for adding new vertices
-  const midpoints = useMemo(() => {
-    if (displayPolygon.length < 2) return []
-    return displayPolygon.map(([x1, z1], index) => {
-      const nextIndex = (index + 1) % displayPolygon.length
-      const [x2, z2] = displayPolygon[nextIndex]!
-      return [(x1! + x2) / 2, (z1! + z2) / 2] as [number, number]
-    })
-  }, [displayPolygon])
-
-  // Handle vertex drag
-  const handleVertexDrag = useCallback(
-    (clientX: number, clientY: number, vertexIndex: number) => {
-      if (!zone) return
-
-      const canvas = gl.domElement
-      const rect = canvas.getBoundingClientRect()
-      const x = ((clientX - rect.left) / rect.width) * 2 - 1
-      const y = -((clientY - rect.top) / rect.height) * 2 + 1
-
-      raycaster.current.setFromCamera(new Vector2(x, y), camera)
-      const intersection = new Vector3()
-      raycaster.current.ray.intersectPlane(dragPlane.current, intersection)
-
-      if (intersection) {
-        // Snap to 0.5 grid
-        const gridX = Math.round(intersection.x * 2) / 2
-        const gridZ = Math.round(intersection.z * 2) / 2
-
-        const basePolygon = previewPolygon ?? zone.polygon
-        const newPolygon = [...basePolygon]
-        newPolygon[vertexIndex] = [gridX, gridZ]
-        setPreviewPolygon(newPolygon)
       }
     },
-    [zone, gl, camera, previewPolygon],
+    [selectedZoneId, updateNode],
   )
 
-  // Commit polygon changes
+  if (!zone || !zone.polygon || zone.polygon.length < 3) return null
-  const commitPolygonChange = useCallback(() => {
-    if (previewPolygon && selectedZoneId) {
-      updateNode(selectedZoneId, { polygon: previewPolygon })
-    }
-    setPreviewPolygon(null)
-    setDragState(null)
-  }, [previewPolygon, selectedZoneId, updateNode])
 
-  // Handle adding a new vertex at midpoint
-  const handleAddVertex = useCallback(
-    (afterIndex: number, position: [number, number]) => {
-      if (!zone) return -1
-
-      const basePolygon = previewPolygon ?? zone.polygon
-      const newPolygon = [
-        ...basePolygon.slice(0, afterIndex + 1),
-        position,
-        ...basePolygon.slice(afterIndex + 1),
-      ]
-
-      setPreviewPolygon(newPolygon)
-      return afterIndex + 1 // Return new vertex index
-    },
-    [zone, previewPolygon],
-  )
-
-  // Handle deleting a vertex
-  const handleDeleteVertex = useCallback(
-    (index: number) => {
-      if (!zone || !selectedZoneId) return
-
-      const basePolygon = previewPolygon ?? zone.polygon
-      if (basePolygon.length <= 3) return // Need at least 3 points
-
-      const newPolygon = basePolygon.filter((_, i) => i !== index)
-      updateNode(selectedZoneId, { polygon: newPolygon })
-      setPreviewPolygon(null)
-    },
-    [zone, selectedZoneId, previewPolygon, updateNode],
-  )
-
-  // Set up pointer move/up listeners for dragging with pointer capture
-  useEffect(() => {
-    if (!dragState?.isDragging) return
-
-    const canvas = gl.domElement
-    const pointerId = dragState.pointerId
-
-    // Capture pointer to prevent R3F events from firing on other objects (like the grid)
-    canvas.setPointerCapture(pointerId)
-
-    const handlePointerMove = (e: PointerEvent) => {
-      handleVertexDrag(e.clientX, e.clientY, dragState.vertexIndex)
-    }
-
-    const handlePointerUp = (e: PointerEvent) => {
-      // Release pointer capture
-      if (canvas.hasPointerCapture(e.pointerId)) {
-        canvas.releasePointerCapture(e.pointerId)
-      }
-      commitPolygonChange()
-    }
-
-    canvas.addEventListener('pointermove', handlePointerMove)
-    canvas.addEventListener('pointerup', handlePointerUp)
-
-    return () => {
-      // Release capture on cleanup
-      if (canvas.hasPointerCapture(pointerId)) {
-        canvas.releasePointerCapture(pointerId)
-      }
-      canvas.removeEventListener('pointermove', handlePointerMove)
-      canvas.removeEventListener('pointerup', handlePointerUp)
-    }
-  }, [dragState, gl, handleVertexDrag, commitPolygonChange])
-
-  // Update line geometry when polygon changes
-  useEffect(() => {
-    if (!lineRef.current || displayPolygon.length < 2) return
-
-    const positions: number[] = []
-    for (const [x, z] of displayPolygon) {
-      positions.push(x!, Y_OFFSET + 0.01, z!)
-    }
-    // Close the loop
-    const first = displayPolygon[0]!
-    positions.push(first[0]!, Y_OFFSET + 0.01, first[1]!)
-
-    const geometry = new BufferGeometry()
-    geometry.setAttribute('position', new Float32BufferAttribute(positions, 3))
-
-    lineRef.current.geometry.dispose()
-    lineRef.current.geometry = geometry
-  }, [displayPolygon])
-
-  if (!zone || displayPolygon.length < 3) return null
-
-  const canDelete = displayPolygon.length > 3
   const zoneColor = zone.color || '#3b82f6'
 
   return (
-    <group>
+    <PolygonEditor
-      {/* Border line */}
+      polygon={zone.polygon}
-      {/* @ts-ignore */}
+      color={zoneColor}
-      <line ref={lineRef} frustumCulled={false} renderOrder={10}>
+      onPolygonChange={handlePolygonChange}
-        <bufferGeometry />
+      minVertices={3}
-        <lineBasicNodeMaterial
+    />
-          color={zoneColor}
-          linewidth={2}
-          depthTest={false}
-          depthWrite={false}
-          transparent
-          opacity={0.8}
-        />
-      </line>
-
-      {/* Vertex handles */}
-      {displayPolygon.map(([x, z], index) => {
-        const isHovered = hoveredVertex === index
-        const isDragging = dragState?.vertexIndex === index
-
-        return (
-          <mesh
-            key={`vertex-${index}`}
-            position={[x!, Y_OFFSET, z!]}
-            onPointerEnter={(e) => {
-              e.stopPropagation()
-              setHoveredVertex(index)
-            }}
-            onPointerLeave={(e) => {
-              e.stopPropagation()
-              setHoveredVertex(null)
-            }}
-            onPointerDown={(e) => {
-              e.stopPropagation()
-              setDragState({
-                isDragging: true,
-                vertexIndex: index,
-                initialPosition: [x!, z!],
-                pointerId: e.nativeEvent.pointerId,
-              })
-            }}
-            onClick={(e) => {
-              e.stopPropagation()
-            }}
-            onDoubleClick={(e) => {
-              e.stopPropagation()
-              if (canDelete) {
-                handleDeleteVertex(index)
-              }
-            }}
-          >
-            <sphereGeometry args={[isHovered || isDragging ? 0.2 : 0.15, 16, 16]} />
-            <meshBasicMaterial
-              color={
-                isDragging ? '#22c55e' : isHovered ? (canDelete ? '#ef4444' : '#ffffff') : zoneColor
-              }
-              depthTest={false}
-              depthWrite={false}
-            />
-          </mesh>
-        )
-      })}
-
-      {/* Midpoint handles for adding vertices (hidden while dragging) */}
-      {!dragState &&
-        midpoints.map(([x, z], index) => {
-          const isHovered = hoveredMidpoint === index
-
-          return (
-            <mesh
-              key={`midpoint-${index}`}
-              position={[x!, Y_OFFSET, z!]}
-              onPointerEnter={(e) => {
-                e.stopPropagation()
-                setHoveredMidpoint(index)
-              }}
-              onPointerLeave={(e) => {
-                e.stopPropagation()
-                setHoveredMidpoint(null)
-              }}
-              onPointerDown={(e) => {
-                e.stopPropagation()
-                const newVertexIndex = handleAddVertex(index, [x!, z!])
-                if (newVertexIndex >= 0) {
-                  setDragState({
-                    isDragging: true,
-                    vertexIndex: newVertexIndex,
-                    initialPosition: [x!, z!],
-                    pointerId: e.nativeEvent.pointerId,
-                  })
-                  setHoveredMidpoint(null)
-                }
-              }}
-              onClick={(e) => {
-                e.stopPropagation()
-              }}
-            >
-              <sphereGeometry args={[isHovered ? 0.12 : 0.08, 16, 16]} />
-              <meshBasicMaterial
-                color={isHovered ? '#22c55e' : zoneColor}
-                depthTest={false}
-                depthWrite={false}
-                transparent
-                opacity={isHovered ? 1 : 0.4}
-              />
-            </mesh>
-          )
-        })}
-    </group>
   )
 }

apps/editor/components/ui/action-menu/camera-actions.tsx

@@ -0,0 +1,79 @@
+'use client'
+
+import { emitter } from '@pascal-app/core'
+import { RotateCcw, RotateCw, Rotate3D } from 'lucide-react'
+import { Button } from '@/components/ui/primitives/button'
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipTrigger,
+} from '@/components/ui/primitives/tooltip'
+
+export function CameraActions() {
+  const goToTopView = () => {
+    emitter.emit('camera-controls:top-view')
+  }
+
+  const orbitCW = () => {
+    emitter.emit('camera-controls:orbit-cw')
+  }
+
+  const orbitCCW = () => {
+    emitter.emit('camera-controls:orbit-ccw')
+  }
+
+  return (
+    <div className="flex items-center gap-1">
+      {/* Orbit CCW */}
+      <Tooltip>
+        <TooltipTrigger asChild>
+          <Button
+            className="h-8 w-8 text-zinc-400 transition-all hover:text-sky-400"
+            onClick={orbitCCW}
+            size="icon"
+            variant="ghost"
+          >
+            <RotateCcw className="h-4 w-4" />
+          </Button>
+        </TooltipTrigger>
+        <TooltipContent>
+          <p>Orbit Left</p>
+        </TooltipContent>
+      </Tooltip>
+
+      {/* Orbit CW */}
+      <Tooltip>
+        <TooltipTrigger asChild>
+          <Button
+            className="h-8 w-8 text-zinc-400 transition-all hover:text-sky-400"
+            onClick={orbitCW}
+            size="icon"
+            variant="ghost"
+          >
+            <RotateCw className="h-4 w-4" />
+          </Button>
+        </TooltipTrigger>
+        <TooltipContent>
+          <p>Orbit Right</p>
+        </TooltipContent>
+      </Tooltip>
+
+      {/* Top View */}
+      <Tooltip>
+        <TooltipTrigger asChild>
+          <Button
+            className="h-8 w-8 text-zinc-400 transition-all hover:text-sky-400"
+            onClick={goToTopView}
+            size="icon"
+            variant="ghost"
+          >
+            <Rotate3D className="h-4 w-4 -rotate-90" />
+          </Button>
+        </TooltipTrigger>
+        <TooltipContent>
+          <p>Top View</p>
+        </TooltipContent>
+      </Tooltip>
+    </div>
+  )
+}

apps/editor/components/ui/action-menu/index.tsx

@@ -3,6 +3,7 @@
 import { TooltipProvider } from "@/components/ui/primitives/tooltip";
 import { cn } from "@/lib/utils";
 
+import { CameraActions } from "./camera-actions";
 import { ControlModes } from "./control-modes";
 import { PhaseSwitcher } from "./phase-switcher";
 import { StructureTools } from "./structure-tools";
@@ -140,6 +141,8 @@ export function ActionMenu({ className }: { className?: string }) {
           <ControlModes />
           <div className="mx-1 h-5 w-px bg-zinc-700" />
           <ViewToggles />
+          <div className="mx-1 h-5 w-px bg-zinc-700" />
+          <CameraActions />
         </div>
       </div>
     </TooltipProvider>

apps/editor/components/ui/action-menu/view-toggles.tsx

@@ -88,7 +88,7 @@ export function ViewToggles() {
               'h-8 w-8 text-zinc-400 transition-all',
               cameraMode === 'orthographic'
                 ? 'bg-violet-500/20 text-violet-400'
-                : 'hover:bg-zinc-800',
+                : 'hover:text-violet-400',
             )}
             onClick={toggleCameraMode}
             size="icon"
@@ -110,7 +110,7 @@ export function ViewToggles() {
               'h-8 w-8 text-zinc-400 transition-all',
               levelMode !== 'stacked'
                 ? 'bg-amber-500/20 text-amber-400'
-                : 'hover:bg-zinc-800',
+                : 'hover:text-amber-400',
             )}
             onClick={cycleLevelMode}
             size="icon"

apps/editor/components/ui/sidebar/panels/site-panel/index.tsx

@@ -49,8 +49,10 @@ function SitePhaseView() {
   const selectedBuildingId = useViewer((state) => state.selection.buildingId);
   const setSelection = useViewer((state) => state.setSelection);
 
-  const buildings = rootNodeIds
+  // Get site node and its building children
-    .map((id) => nodes[id])
+  const siteNode = rootNodeIds[0] ? nodes[rootNodeIds[0]] : null;
+  const buildings = (siteNode?.type === 'site' ? siteNode.children : [])
+    .map((child) => typeof child === 'string' ? nodes[child] : child)
     .filter((node): node is BuildingNode => node?.type === "building");
 
   if (buildings.length === 0) {
@@ -92,8 +94,10 @@ function BuildingSelector() {
   const selectedBuildingId = useViewer((state) => state.selection.buildingId);
   const setSelection = useViewer((state) => state.setSelection);
 
-  const buildings = rootNodeIds
+  // Get site node and its building children
-    .map((id) => nodes[id])
+  const siteNode = rootNodeIds[0] ? nodes[rootNodeIds[0]] : null;
+  const buildings = (siteNode?.type === 'site' ? siteNode.children : [])
+    .map((child) => typeof child === 'string' ? nodes[child] : child)
     .filter((node): node is BuildingNode => node?.type === "building");
 
   const selectedBuilding = selectedBuildingId

apps/editor/components/ui/sidebar/panels/site-panel/references-dialog.tsx

@@ -59,8 +59,11 @@ export function ReferencesDialog({ levelId, open, onOpenChange }: ReferencesDial
       })
       createNode(node, levelId as AnyNodeId)
       e.target.value = ''
+      // Auto-select and close dialog
+      setSelectedReferenceId(node.id)
+      onOpenChange(false)
     },
-    [levelId, createNode],
+    [levelId, createNode, setSelectedReferenceId, onOpenChange],
   )
 
   const handleAddGuide = useCallback(
@@ -75,8 +78,11 @@ export function ReferencesDialog({ levelId, open, onOpenChange }: ReferencesDial
       })
       createNode(node, levelId as AnyNodeId)
       e.target.value = ''
+      // Auto-select and close dialog
+      setSelectedReferenceId(node.id)
+      onOpenChange(false)
     },
-    [levelId, createNode],
+    [levelId, createNode, setSelectedReferenceId, onOpenChange],
   )
 
   const handleEdit = useCallback(

apps/editor/store/use-editor.tsx

@@ -83,15 +83,17 @@ const useEditor = create<EditorState>()((set, get) => ({
     const selectBuildingAndLevel0 = () => {
       let buildingId = viewer.selection.buildingId
 
-      // If no building selected, find the first one
+      // If no building selected, find the first one from site's children
       if (!buildingId) {
-        const firstBuildingId = scene.rootNodeIds.find((id) => {
+        const siteNode = scene.rootNodeIds[0] ? scene.nodes[scene.rootNodeIds[0]] : null
-          const node = scene.nodes[id]
+        if (siteNode?.type === 'site') {
-          return node?.type === 'building'
+          const firstBuilding = siteNode.children
-        })
+            .map((child) => (typeof child === 'string' ? scene.nodes[child] : child))
-        if (firstBuildingId) {
+            .find((node) => node?.type === 'building')
-          buildingId = firstBuildingId as BuildingNode['id']
+          if (firstBuilding) {
-          viewer.setSelection({ buildingId })
+            buildingId = firstBuilding.id as BuildingNode['id']
+            viewer.setSelection({ buildingId })
+          }
         }
       }
 

bun.lock

@@ -62,7 +62,7 @@
     },
     "packages/core": {
       "name": "@pascal-app/core",
-      "version": "0.1.3",
+      "version": "0.1.10",
       "dependencies": {
         "dedent": "^1.7.1",
         "idb-keyval": "^6.2.2",
@@ -126,7 +126,7 @@
     },
     "packages/viewer": {
       "name": "@pascal-app/viewer",
-      "version": "0.1.3",
+      "version": "0.1.10",
       "dependencies": {
         "zustand": "^5",
       },
@@ -137,7 +137,7 @@
         "typescript": "5.9.2",
       },
       "peerDependencies": {
-        "@pascal-app/core": "^0.1.3",
+        "@pascal-app/core": "^0.1.4",
         "@react-three/drei": "^10",
         "@react-three/fiber": "^9",
         "react": "^18 || ^19",

packages/core/src/events/bus.ts

@@ -1,6 +1,6 @@
 import type { ThreeEvent } from '@react-three/fiber'
 import mitt from 'mitt'
-import type { BuildingNode, CeilingNode, ItemNode, LevelNode, RoofNode, SlabNode, WallNode, ZoneNode } from '../schema'
+import type { BuildingNode, CeilingNode, ItemNode, LevelNode, RoofNode, SiteNode, SlabNode, WallNode, ZoneNode } from '../schema'
 import type { AnyNode } from '../schema/types'
 
 // Base event interfaces
@@ -20,6 +20,7 @@ export interface NodeEvent<T extends AnyNode = AnyNode> {
 
 export type WallEvent = NodeEvent<WallNode>
 export type ItemEvent = NodeEvent<ItemNode>
+export type SiteEvent = NodeEvent<SiteNode>
 export type BuildingEvent = NodeEvent<BuildingNode>
 export type LevelEvent = NodeEvent<LevelNode>
 export type ZoneEvent = NodeEvent<ZoneNode>
@@ -56,11 +57,15 @@ export interface CameraControlEvent {
 type CameraControlEvents = {
   'camera-controls:view': CameraControlEvent
   'camera-controls:capture': CameraControlEvent
+  'camera-controls:top-view': undefined
+  'camera-controls:orbit-cw': undefined
+  'camera-controls:orbit-ccw': undefined
 }
 
 type EditorEvents = GridEvents &
   NodeEvents<'wall', WallEvent> &
   NodeEvents<'item', ItemEvent> &
+  NodeEvents<'site', SiteEvent> &
   NodeEvents<'building', BuildingEvent> &
   NodeEvents<'level', LevelEvent> &
   NodeEvents<'zone', ZoneEvent> &

packages/core/src/hooks/scene-registry/scene-registry.ts

@@ -8,6 +8,7 @@ export const sceneRegistry = {
   // Categorized lookups: Type -> Set of IDs
   // Using a Set is faster for adding/deleting than an Array
   byType: {
+    site: new Set<string>(),
     building: new Set<string>(),
     ceiling: new Set<string>(),
     level: new Set<string>(),

packages/core/src/index.ts

@@ -8,6 +8,7 @@ export type {
   ItemEvent,
   LevelEvent,
   NodeEvent,
+  SiteEvent,
   SlabEvent,
   WallEvent,
   ZoneEvent,

packages/core/src/schema/nodes/site.ts

@@ -24,12 +24,12 @@ export const SiteNode = BaseNode.extend({
   // Specific props
   polygon: PropertyLineData.optional().default({
     type: 'polygon',
-    // Default 30x30 square matching GRID_SIZE
+    // Default 30x30 square centered at origin
     points: [
-      [0, 0],
+      [-15, -15],
-      [30, 0],
+      [15, -15],
-      [30, 30],
+      [15, 15],
-      [0, 30],
+      [-15, 15],
     ],
   }),
   // terrain: TerrainData,

packages/core/src/store/use-scene.ts

@@ -6,6 +6,7 @@ import { create, type StoreApi, type UseBoundStore } from 'zustand'
 import { persist } from 'zustand/middleware'
 import { BuildingNode } from '../schema'
 import { LevelNode } from '../schema/nodes/level'
+import { SiteNode } from '../schema/nodes/site'
 import type { AnyNode, AnyNodeId } from '../schema/types'
 import { isObject } from '../utils/types'
 import * as nodeActions from './actions/node-actions'
@@ -87,25 +88,29 @@ const useScene: UseSceneStore = create<SceneState>()(
             return // Scene already loaded
           }
 
-          const building = BuildingNode.parse({
+          // Create hierarchy: Site → Building → Level
-            children: [],
-          })
-
           const level0 = LevelNode.parse({
             level: 0,
             children: [],
           })
 
-          building.children.push(level0.id)
+          const building = BuildingNode.parse({
+            children: [level0.id],
+          })
+
+          const site = SiteNode.parse({
+            children: [building],
+          })
 
           // Define all nodes flat
           const nodes: Record<AnyNodeId, AnyNode> = {
+            [site.id]: site,
             [building.id]: building,
             [level0.id]: level0,
           }
 
-          // Root nodes are the levels
+          // Site is the root
-          const rootNodeIds = [building.id]
+          const rootNodeIds = [site.id]
 
           set({ nodes, rootNodeIds })
         },
@@ -155,13 +160,44 @@ const useScene: UseSceneStore = create<SceneState>()(
       onRehydrateStorage: (state) => {
         console.log('hydrating...')
 
-        // optional
         return (state, error) => {
           if (error) {
             console.log('an error happened during hydration', error)
-          } else {
+            return
-            console.log('hydration finished')
           }
+
+          if (!state) {
+            console.log('hydration finished - no state')
+            return
+          }
+
+          // Migration: Wrap old scenes (where root is not a SiteNode) in a SiteNode
+          const rootId = state.rootNodeIds?.[0]
+          const rootNode = rootId ? state.nodes[rootId] : null
+
+          if (rootNode && rootNode.type !== 'site') {
+            console.log('Migrating old scene: wrapping in SiteNode')
+
+            // Collect existing root nodes (should be BuildingNode or ItemNode)
+            const existingRoots = (state.rootNodeIds || [])
+              .map(id => state.nodes[id])
+              .filter(node => node?.type === 'building' || node?.type === 'item')
+
+            // Create a new SiteNode with existing roots as children
+            const site = SiteNode.parse({
+              children: existingRoots,
+            })
+
+            // Add site to nodes
+            state.nodes[site.id] = site
+
+            // Update root to be the site
+            state.rootNodeIds = [site.id]
+
+            console.log('Migration complete: scene now has SiteNode as root')
+          }
+
+          console.log('hydration finished')
         }
       },
     },

packages/viewer/src/components/renderers/node-renderer.tsx

@@ -8,6 +8,7 @@ import { ItemRenderer } from './item/item-renderer'
 import { LevelRenderer } from './level/level-renderer'
 import { RoofRenderer } from './roof/roof-renderer'
 import { ScanRenderer } from './scan/scan-renderer'
+import { SiteRenderer } from './site/site-renderer'
 import { SlabRenderer } from './slab/slab-renderer'
 import { WallRenderer } from './wall/wall-renderer'
 import { ZoneRenderer } from './zone/zone-renderer'
@@ -19,6 +20,7 @@ export const NodeRenderer = ({ nodeId }: { nodeId: AnyNode['id'] }) => {
 
   return (
     <>
+      {node.type === 'site' && <SiteRenderer node={node} />}
       {node.type === 'building' && <BuildingRenderer node={node} />}
       {node.type === 'ceiling' && <CeilingRenderer node={node} />}
       {node.type === 'level' && <LevelRenderer node={node} />}

packages/viewer/src/components/renderers/scan/scan-renderer.tsx

@@ -38,9 +38,11 @@ const ScanModel = ({ url, opacity }: { url: string; opacity: number }) => {
       if (isTransparent) {
         material.transparent = true
         material.opacity = normalizedOpacity
+        material.depthWrite = false;
       } else {
         material.transparent = false
         material.opacity = 1
+        material.depthWrite = true;
       }
       material.needsUpdate = true
     }

packages/viewer/src/components/renderers/site/site-renderer.tsx

@@ -0,0 +1,103 @@
+import { type SiteNode, useRegistry } from '@pascal-app/core'
+import { useMemo, useRef } from 'react'
+import { BufferGeometry, DoubleSide, Float32BufferAttribute, type Group, Shape } from 'three'
+import { useNodeEvents } from '../../../hooks/use-node-events'
+import { NodeRenderer } from '../node-renderer'
+
+const Y_OFFSET = 0.01
+const LINE_HEIGHT = 0.5
+
+/**
+ * Creates simple line geometry for site boundary
+ * Single horizontal line at ground level
+ */
+const createBoundaryLineGeometry = (points: Array<[number, number]>): BufferGeometry => {
+  const geometry = new BufferGeometry()
+
+  if (points.length < 2) return geometry
+
+  const positions: number[] = []
+
+  // Create a simple line loop at ground level
+  for (const [x, z] of points) {
+    positions.push(x!, Y_OFFSET, z!)
+  }
+  // Close the loop
+  positions.push(points[0]![0]!, Y_OFFSET, points[0]![1]!)
+
+  geometry.setAttribute('position', new Float32BufferAttribute(positions, 3))
+
+  return geometry
+}
+
+export const SiteRenderer = ({ node }: { node: SiteNode }) => {
+  const ref = useRef<Group>(null!)
+
+  useRegistry(node.id, 'site', ref)
+
+  // Create floor shape from polygon points
+  const floorShape = useMemo(() => {
+    if (!node?.polygon?.points || node.polygon.points.length < 3) return null
+    const shape = new Shape()
+    const firstPt = node.polygon.points[0]!
+
+    // Shape is in X-Y plane, we rotate it to X-Z plane
+    // Negate Y (which becomes Z) to get correct orientation
+    shape.moveTo(firstPt[0]!, -firstPt[1]!)
+
+    for (let i = 1; i < node.polygon.points.length; i++) {
+      const pt = node.polygon.points[i]!
+      shape.lineTo(pt[0]!, -pt[1]!)
+    }
+    shape.closePath()
+
+    return shape
+  }, [node?.polygon?.points])
+
+  // Create boundary line geometry
+  const lineGeometry = useMemo(() => {
+    if (!node?.polygon?.points || node.polygon.points.length < 2) return null
+    return createBoundaryLineGeometry(node.polygon.points)
+  }, [node?.polygon?.points])
+
+  const handlers = useNodeEvents(node, 'site')
+
+  if (!node || !floorShape || !lineGeometry) {
+    return null
+  }
+
+  return (
+    <group ref={ref} {...handlers}>
+      {/* Render children (buildings and items) */}
+      {node.children.map((child) => (
+        <NodeRenderer
+          key={typeof child === 'string' ? child : child.id}
+          nodeId={typeof child === 'string' ? child : child.id}
+        />
+      ))}
+
+      {/* Transparent floor fill */}
+      <mesh position={[0, Y_OFFSET - 0.005, 0]} rotation={[-Math.PI / 2, 0, 0]}>
+        <shapeGeometry args={[floorShape]} />
+        <meshBasicMaterial
+          color="#f59e0b"
+          transparent
+          opacity={0.05}
+          side={DoubleSide}
+          depthWrite={false}
+        />
+      </mesh>
+
+      {/* Simple boundary line */}
+      {/* @ts-ignore */}
+      <line geometry={lineGeometry} frustumCulled={false} renderOrder={9}>
+        <lineBasicMaterial
+          color="#f59e0b"
+          linewidth={2}
+          transparent
+          opacity={0.6}
+        />
+      </line>
+    </group>
+  )
+}

packages/viewer/src/hooks/use-node-events.ts

@@ -11,6 +11,8 @@ import {
   type LevelNode,
   type RoofEvent,
   type RoofNode,
+  type SiteEvent,
+  type SiteNode,
   type SlabEvent,
   type SlabNode,
   type WallEvent,
@@ -21,6 +23,7 @@ import {
 import type { ThreeEvent } from '@react-three/fiber'
 
 type NodeConfig = {
+  site: { node: SiteNode; event: SiteEvent }
   item: { node: ItemNode; event: ItemEvent }
   wall: { node: WallNode; event: WallEvent }
   building: { node: BuildingNode; event: BuildingEvent }