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

Feat/polish editor
2026-02-05 15:21:11 +09:00
parent 006a6db4a4 74b70b7877
commit d29b736908
22 changed files with 856 additions and 407 deletions
@@ -1,54 +1,41 @@
-"use client";
+'use client'

-import {
-  type CameraControlEvent,
-  emitter,
-  sceneRegistry,
-  useScene,
-} 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";
+import { type CameraControlEvent, emitter, sceneRegistry, useScene } 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 currentLevelId = useViewer((state) => state.selection.levelId);
-  const firstLoad = useRef(true);
+  const controls = useRef<CameraControlsImpl>(null!)
+  const currentLevelId = useViewer((state) => state.selection.levelId)
+  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;
-      (controls.current as CameraControlsImpl).setLookAt(
-        20,
-        20,
-        20,
-        0,
-        0,
-        0,
-        true,
-      );
+      firstLoad.current = false
+      ;(controls.current as CameraControlsImpl).setLookAt(20, 20, 20, 0, 0, 0, true)
    }
-    (controls.current as CameraControlsImpl).getTarget(currentTarget);
-    (controls.current as CameraControlsImpl).moveTo(
+    ;(controls.current as CameraControlsImpl).getTarget(currentTarget)
+    ;(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 target = new Vector3();
-      controls.current.getPosition(position);
-      controls.current.getTarget(target);
+      const position = new Vector3()
+      const target = new Vector3()
+      controls.current.getPosition(position)
+      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];
-      if (!node || !node.camera) return;
-      const { position, target } = node.camera;
+      const node = useScene.getState().nodes[nodeId]
+      if (!node || !node.camera) return
+      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);
-    emitter.on("camera-controls:view", handleNodeView);
+    const handleTopView = () => {
+      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:view", handleNodeView);
-    };
-  }, []);
+      emitter.off('camera-controls:capture', handleNodeCapture)
+      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}
+    />
+  )
+}
@@ -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>
+  )
+}
@@ -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}
+    />
+  )
+}
@@ -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 />}
@@ -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 { type Line, type Mesh, Vector3 } from 'three'
+import { useEffect, useRef, useMemo } from 'react'
+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) {
-        startingPoint.set(gridPosition[0], event.position[1], gridPosition[1])
-        buildingState = 1
-        console.log('starting building at:', startingPoint)
-        drawingLineRef.current.visible = true
-      } else if (buildingState === 1) {
-        commitWallDrawing([startingPoint.x, startingPoint.z], [endingPoint.x, endingPoint.z])
-        drawingLineRef.current.visible = false
-        buildingState = 0
+      if (buildingState.current === 0) {
+        startingPoint.current.set(gridPosition[0], event.position[1], gridPosition[1])
+        buildingState.current = 1
+        wallPreviewRef.current.visible = true
+      } else if (buildingState.current === 1) {
+        commitWallDrawing(
+          [startingPoint.current.x, startingPoint.current.z],
+          [endingPoint.current.x, endingPoint.current.z]
+        )
+        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 */}
-        <line ref={drawingLineRef} frustumCulled={false} renderOrder={1} visible={false}>
-          <bufferGeometry />
-          <lineDashedNodeMaterial
-            color="blue"
-            linewidth={4}
-            linecap="round"
+
+      {/* Wall preview */}
+      <mesh ref={wallPreviewRef} visible={false} renderOrder={1}>
+        <shapeGeometry />
+        <meshBasicMaterial
+          color="#3b82f6"
+          transparent
+          opacity={0.5}
+          side={DoubleSide}
          depthTest={false}
          depthWrite={false}
-            dashSize={2}
-            gapSize={0.1}
        />
-        </line>
-      </group>
+      </mesh>
    </group>
  )
 }
@@ -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, 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
-}
+import { useCallback } from 'react'
+import { PolygonEditor } from '../shared/polygon-editor'

 /**
 * 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 [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 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],
-  )
-
-  // Commit polygon changes
-  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)
+  const handlePolygonChange = useCallback(
+    (newPolygon: Array<[number, number]>) => {
+      if (selectedZoneId) {
        updateNode(selectedZoneId, { polygon: newPolygon })
-      setPreviewPolygon(null)
+      }
    },
-    [zone, selectedZoneId, previewPolygon, updateNode],
+    [selectedZoneId, updateNode],
  )

-  // Set up pointer move/up listeners for dragging with pointer capture
-  useEffect(() => {
-    if (!dragState?.isDragging) return
+  if (!zone || !zone.polygon || zone.polygon.length < 3) return null

-    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>
-      {/* Border line */}
-      {/* @ts-ignore */}
-      <line ref={lineRef} frustumCulled={false} renderOrder={10}>
-        <bufferGeometry />
-        <lineBasicNodeMaterial
+    <PolygonEditor
+      polygon={zone.polygon}
      color={zoneColor}
-          linewidth={2}
-          depthTest={false}
-          depthWrite={false}
-          transparent
-          opacity={0.8}
+      onPolygonChange={handlePolygonChange}
+      minVertices={3}
    />
-      </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>
  )
 }
@@ -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>
+  )
+}
@@ -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>
@@ -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"
@@ -49,8 +49,10 @@ function SitePhaseView() {
  const selectedBuildingId = useViewer((state) => state.selection.buildingId);
  const setSelection = useViewer((state) => state.setSelection);

-  const buildings = rootNodeIds
-    .map((id) => nodes[id])
+  // Get site node and its building children
+  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
-    .map((id) => nodes[id])
+  // Get site node and its building children
+  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
@@ -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(
@@ -83,17 +83,19 @@ 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 node = scene.nodes[id]
-          return node?.type === 'building'
-        })
-        if (firstBuildingId) {
-          buildingId = firstBuildingId as BuildingNode['id']
+        const siteNode = scene.rootNodeIds[0] ? scene.nodes[scene.rootNodeIds[0]] : null
+        if (siteNode?.type === 'site') {
+          const firstBuilding = siteNode.children
+            .map((child) => (typeof child === 'string' ? scene.nodes[child] : child))
+            .find((node) => node?.type === 'building')
+          if (firstBuilding) {
+            buildingId = firstBuilding.id as BuildingNode['id']
            viewer.setSelection({ buildingId })
          }
        }
+      }

      // If no level selected, find level 0 in the building
      if (buildingId && !viewer.selection.levelId) {
@@ -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",
@@ -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> &
@@ -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>(),
@@ -8,6 +8,7 @@ export type {
  ItemEvent,
  LevelEvent,
  NodeEvent,
+  SiteEvent,
  SlabEvent,
  WallEvent,
  ZoneEvent,
@@ -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],
-      [30, 0],
-      [30, 30],
-      [0, 30],
+      [-15, -15],
+      [15, -15],
+      [15, 15],
+      [-15, 15],
    ],
  }),
  // terrain: TerrainData,
@@ -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({
-            children: [],
-          })
-
+          // Create hierarchy: Site → Building → Level
          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
-          const rootNodeIds = [building.id]
+          // Site is the root
+          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 {
-            console.log('hydration finished')
+            return
          }
+
+          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')
        }
      },
    },
@@ -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} />}
@@ -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
    }
@@ -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>
+  )
+}
@@ -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 }