sync: comprehensive monorepo → editor parity (2D/3D decoupling, UX polish, crash fixes)

Squash merge of 3 commits:
1. useLiveTransforms store for 2D/3D decoupling + floorplan overhaul + Sentry crash fixes
2. Comprehensive 59-file sync bringing editor to full monorepo parity (selection highlights, delete tool, furnish/zone modes, keyboard shortcuts, all panels)
3. Missing files fix (materials.ts, merged-outline-node.ts, type fix)

75 files changed, ~6K additions.

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

@@ -1,7 +1,9 @@
-import { type SiteNode, useRegistry } from '@pascal-app/core'
+import { type SiteNode, type SlabNode, useRegistry, useScene } from '@pascal-app/core'
+import polygonClipping from 'polygon-clipping'
 import { useMemo, useRef } from 'react'
-import { BufferGeometry, Float32BufferAttribute, type Group, Shape } from 'three'
+import { BufferGeometry, Float32BufferAttribute, type Group, Path, Shape } from 'three'
 import { useNodeEvents } from '../../../hooks/use-node-events'
+import useViewer from '../../../store/use-viewer'
 import { NodeRenderer } from '../node-renderer'
 
 const Y_OFFSET = 0.01
@@ -29,29 +31,76 @@ const createBoundaryLineGeometry = (points: Array<[number, number]>): BufferGeom
   return geometry
 }
 
+type S = ReturnType<typeof useScene.getState>
+
 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(() => {
+  const theme = useViewer((state) => state.theme)
+  const bgColor = theme === 'dark' ? '#1f2433' : '#fafafa'
+
+  // Cache slab polygon references to keep the selector stable across unrelated store updates
+  const slabPolygonsCache = useRef<[number, number][][]>([])
+  const slabPolygons = useScene((state: S) => {
+    const nodeList = Object.values(state.nodes)
+
+    const levelIndexById = new Map<string, number>()
+    let lowestLevelIndex = Number.POSITIVE_INFINITY
+    nodeList.forEach((n) => {
+      if (n.type !== 'level') return
+      levelIndexById.set(n.id, n.level)
+      lowestLevelIndex = Math.min(lowestLevelIndex, n.level)
+    })
+
+    const next = nodeList
+      .filter((n): n is SlabNode => n.type === 'slab' && n.visible && n.polygon.length >= 3)
+      .filter((n) => {
+        if (!Number.isFinite(lowestLevelIndex)) return true
+        const parentLevel = n.parentId ? levelIndexById.get(n.parentId as string) : undefined
+        return parentLevel === lowestLevelIndex
+      })
+      .map((n) => n.polygon as [number, number][])
+
+    const prev = slabPolygonsCache.current
+    if (next.length === prev.length && next.every((p, i) => p === prev[i])) return prev
+    slabPolygonsCache.current = next
+    return next
+  })
+
+  // Ground shape: site polygon with slab footprints punched as holes
+  const groundShape = useMemo(() => {
     if (!node?.polygon?.points || node.polygon.points.length < 3) return null
+
+    const pts = node.polygon.points
     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.moveTo(pts[0]![0], -pts[0]![1])
+    for (let i = 1; i < pts.length; i++) shape.lineTo(pts[i]![0], -pts[i]![1])
     shape.closePath()
 
+    if (slabPolygons.length > 0) {
+      const multiPolygons = slabPolygons.map((p) => [
+        p.map((pt) => [pt[0], -pt[1]] as [number, number]),
+      ])
+      const unioned = polygonClipping.union(
+        multiPolygons[0] as polygonClipping.Polygon,
+        ...(multiPolygons.slice(1) as polygonClipping.Polygon[]),
+      )
+      for (const geom of unioned) {
+        const ring = geom[0]
+        if (ring && ring.length > 0) {
+          const hole = new Path()
+          hole.moveTo(ring[0]![0], ring[0]![1])
+          for (let i = 1; i < ring.length; i++) hole.lineTo(ring[i]![0], ring[i]![1])
+          hole.closePath()
+          shape.holes.push(hole)
+        }
+      }
+    }
+
     return shape
-  }, [node?.polygon?.points])
+  }, [node?.polygon?.points, slabPolygons])
 
   // Create boundary line geometry
   const lineGeometry = useMemo(() => {
@@ -61,7 +110,7 @@ export const SiteRenderer = ({ node }: { node: SiteNode }) => {
 
   const handlers = useNodeEvents(node, 'site')
 
-  if (!(node && floorShape && lineGeometry)) {
+  if (!(node && lineGeometry)) {
     return null
   }
 
@@ -75,11 +124,19 @@ export const SiteRenderer = ({ node }: { node: SiteNode }) => {
         />
       ))}
 
-      {/* Transparent floor fill */}
-      <mesh position={[0, Y_OFFSET - 0.005, 0]} receiveShadow rotation={[-Math.PI / 2, 0, 0]}>
-        <shapeGeometry args={[floorShape]} />
-        <shadowMaterial opacity={0.75} transparent />
-      </mesh>
+      {/* Ground fill: site polygon with slab holes, occludes below-grade geometry */}
+      {groundShape && (
+        <mesh position={[0, -0.05, 0]} receiveShadow rotation={[-Math.PI / 2, 0, 0]}>
+          <shapeGeometry args={[groundShape]} />
+          <meshStandardMaterial
+            color={bgColor}
+            depthWrite={true}
+            polygonOffset={true}
+            polygonOffsetFactor={1}
+            polygonOffsetUnits={1}
+          />
+        </mesh>
+      )}
 
       {/* Simple boundary line */}
       {/* @ts-ignore */}