@pascal-app/editor 0.9.1 → 1.0.0-beta.1

package/src/components/editor/delete-confirmation-dialog.tsx

@@ -0,0 +1,54 @@
+'use client'
+
+import { useEffect } from 'react'
+import useDeleteConfirmation from '../../store/use-delete-confirmation'
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+} from '../ui/primitives/dialog'
+
+export function DeleteConfirmationDialog() {
+  const request = useDeleteConfirmation((state) => state.request)
+  const cancel = useDeleteConfirmation((state) => state.cancel)
+  const confirm = useDeleteConfirmation((state) => state.confirm)
+
+  useEffect(() => cancel, [cancel])
+
+  return (
+    <Dialog onOpenChange={(open) => !open && cancel()} open={request !== null}>
+      <DialogContent
+        className="border-border/70 bg-background/95 shadow-2xl backdrop-blur-xl sm:max-w-md"
+        data-delete-confirmation-dialog
+        showCloseButton={false}
+      >
+        <DialogHeader>
+          <DialogTitle>Delete {request?.count ?? 0} elements?</DialogTitle>
+          <DialogDescription>
+            This removes every selected element. You can undo the deletion while it remains in the
+            editor history.
+          </DialogDescription>
+        </DialogHeader>
+        <DialogFooter>
+          <button
+            className="rounded-full border border-border px-4 py-2 text-sm transition-colors hover:bg-accent"
+            onClick={cancel}
+            type="button"
+          >
+            Cancel
+          </button>
+          <button
+            className="rounded-full bg-red-600 px-4 py-2 text-sm text-white transition-colors hover:bg-red-700"
+            onClick={confirm}
+            type="button"
+          >
+            Delete
+          </button>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  )
+}

package/src/components/editor/editor-layout-mobile.tsx

@@ -159,6 +159,11 @@ export function EditorLayoutMobile({
       const expandedThreshold = Math.max(SHEET_HANDLE_PX, defaultPx * 0.5)
       if (current > expandedThreshold) {
         sheetRef.current?.snapTo(SHEET_HANDLE_PX)
+        // Closing the sheet disarms any build tool back to select
+        const { mode, setMode } = useEditor.getState()
+        if (mode === 'build') {
+          setMode('select')
+        }
       } else {
         sheetRef.current?.snapTo(defaultPx)
       }

package/src/components/editor/editor-layout-v2.tsx

@@ -52,6 +52,15 @@ function LeftColumn({
     }
   }, [activePanel])
 
+  // Closing (collapsing) the sidebar disarms any build tool back to select
+  useEffect(() => {
+    if (!isCollapsed) return
+    const { mode, setMode } = useEditor.getState()
+    if (mode === 'build') {
+      setMode('select')
+    }
+  }, [isCollapsed])
+
   const handleResizerDown = useCallback(
     (e: React.PointerEvent) => {
       e.preventDefault()
@@ -150,11 +159,13 @@ function RightColumn({
   toolbarRight,
   children,
   overlays,
+  stageOverlay,
 }: {
   toolbarLeft?: ReactNode
   toolbarRight?: ReactNode
   children: ReactNode
   overlays?: ReactNode
+  stageOverlay?: ReactNode
 }) {
   return (
     <div
@@ -174,6 +185,10 @@ function RightColumn({
       )}
       {/* Canvas area */}
       <div className="relative flex-1 overflow-hidden">{children}</div>
+      {/* Stage overlay — replaces the canvas visually (e.g. studio gallery)
+          while keeping it mounted. Sits below the viewer toolbar (z-20) so
+          the stage switch stays reachable. */}
+      {stageOverlay && <div className="absolute inset-0 z-10">{stageOverlay}</div>}
       {/* Overlays scoped to the viewer column. `data-viewer-bounds` marks the
           draggable region the floating inspector clamps itself to. */}
       {overlays && (
@@ -200,6 +215,7 @@ export interface EditorLayoutV2Props {
   viewerToolbarRight?: ReactNode
   viewerContent: ReactNode
   overlays?: ReactNode
+  stageOverlay?: ReactNode
 }
 
 export function EditorLayoutV2({
@@ -211,6 +227,7 @@ export function EditorLayoutV2({
   viewerToolbarRight,
   viewerContent,
   overlays,
+  stageOverlay,
 }: EditorLayoutV2Props) {
   const isCaptureMode = useEditor((s) => s.isCaptureMode)
   const isMobile = useIsMobile()
@@ -246,6 +263,7 @@ export function EditorLayoutV2({
         )}
         <RightColumn
           overlays={overlays}
+          stageOverlay={stageOverlay}
           toolbarLeft={isCaptureMode ? undefined : viewerToolbarLeft}
           toolbarRight={isCaptureMode ? undefined : viewerToolbarRight}
         >

package/src/components/editor/elevation-3d-guide-layer.tsx

@@ -0,0 +1,120 @@
+'use client'
+
+import { sceneRegistry } from '@pascal-app/core'
+import { useViewer } from '@pascal-app/viewer'
+import { Html } from '@react-three/drei'
+import { useFrame } from '@react-three/fiber'
+import { memo, useMemo, useRef } from 'react'
+import { BoxGeometry, CircleGeometry, type Group } from 'three'
+import { MeshBasicNodeMaterial } from 'three/webgpu'
+import { EDITOR_LAYER } from '../../lib/constants'
+import useElevationGuides from '../../store/use-elevation-guides'
+import { formatMeasurement } from './measurement-pill'
+
+const LINE_COLOR = 0x81_8c_f8
+const PILL_COLOR = '#6366f1'
+const GUIDE_LIFT = 0.025
+const GUIDE_LENGTH = 2.4
+const DASH_LENGTH = 0.16
+const DASH_GAP = 0.1
+const LINE_WIDTH = 0.035
+const DOT_RADIUS = 0.07
+
+const guideMaterial = new MeshBasicNodeMaterial({
+  color: LINE_COLOR,
+  depthTest: false,
+  depthWrite: false,
+  toneMapped: false,
+  transparent: true,
+  opacity: 0.9,
+})
+const dotMaterial = new MeshBasicNodeMaterial({
+  color: LINE_COLOR,
+  depthTest: false,
+  depthWrite: false,
+  toneMapped: false,
+  transparent: true,
+  opacity: 0.95,
+})
+const DASH_GEOMETRY = new BoxGeometry(1, 1, 1)
+const DOT_GEOMETRY = new CircleGeometry(1, 24)
+
+type Vec3 = [number, number, number]
+
+export const Elevation3DGuideLayer = memo(function Elevation3DGuideLayer() {
+  const guide = useElevationGuides((state) => state.guide)
+  const unit = useViewer((state) => state.unit)
+  const groupRef = useRef<Group>(null)
+
+  useFrame(() => {
+    const group = groupRef.current
+    if (!(group && guide)) return
+    const levelObject = sceneRegistry.nodes.get(guide.levelId)
+    group.position.y = (levelObject?.position.y ?? 0) + guide.elevation + GUIDE_LIFT
+  })
+
+  const dashes = useMemo(() => {
+    if (!guide) return [] as Vec3[]
+    const [cx, cz] = guide.center
+    const [dx, dz] = guide.direction
+    const start = -GUIDE_LENGTH / 2
+    const period = DASH_LENGTH + DASH_GAP
+    const centers: Vec3[] = []
+    for (let offset = start + DASH_LENGTH / 2; offset < GUIDE_LENGTH / 2; offset += period) {
+      centers.push([cx + dx * offset, 0, cz + dz * offset])
+    }
+    return centers
+  }, [guide])
+
+  if (!guide) return null
+
+  const angleY = -Math.atan2(guide.direction[1], guide.direction[0])
+  const labelPosition: Vec3 = [
+    guide.center[0] - guide.direction[1] * 0.65,
+    0.16,
+    guide.center[1] + guide.direction[0] * 0.65,
+  ]
+  const elevationText =
+    Math.abs(guide.elevation) < 1e-6
+      ? formatMeasurement(0, unit)
+      : `${guide.elevation < 0 ? '-' : '+'}${formatMeasurement(Math.abs(guide.elevation), unit)}`
+
+  return (
+    <group ref={groupRef}>
+      {dashes.map((position, index) => (
+        <mesh
+          geometry={DASH_GEOMETRY}
+          key={index}
+          layers={EDITOR_LAYER}
+          material={guideMaterial}
+          position={position}
+          renderOrder={1010}
+          rotation={[0, angleY, 0]}
+          scale={[DASH_LENGTH, 0.002, LINE_WIDTH]}
+        />
+      ))}
+      <mesh
+        geometry={DOT_GEOMETRY}
+        layers={EDITOR_LAYER}
+        material={dotMaterial}
+        position={[guide.center[0], 0.002, guide.center[1]]}
+        renderOrder={1011}
+        rotation={[-Math.PI / 2, 0, 0]}
+        scale={[DOT_RADIUS, DOT_RADIUS, DOT_RADIUS]}
+      />
+      <Html
+        center
+        position={labelPosition}
+        style={{ pointerEvents: 'none', userSelect: 'none' }}
+        zIndexRange={[25, 0]}
+      >
+        <div
+          className="whitespace-nowrap rounded-[3px] px-[5px] py-[2px] font-medium font-sans text-[11px] text-white"
+          style={{ backgroundColor: PILL_COLOR }}
+        >
+          {`${guide.label} · Y ${elevationText}`}
+        </div>
+      </Html>
+    </group>
+  )
+})

package/src/components/editor/export-manager.tsx

@@ -1,12 +1,35 @@
 'use client'
 
+import { emitter, useScene } from '@pascal-app/core'
 import { useViewer } from '@pascal-app/viewer'
 import { useThree } from '@react-three/fiber'
 import { useEffect } from 'react'
-import type { Mesh, Object3D } from 'three'
-import { GLTFExporter } from 'three/examples/jsm/exporters/GLTFExporter.js'
+import * as THREE from 'three'
 import { OBJExporter } from 'three/examples/jsm/exporters/OBJExporter.js'
 import { STLExporter } from 'three/examples/jsm/exporters/STLExporter.js'
+import { exportSceneToGlb, nextFrames, prepareSceneForExport } from '../../lib/glb-export'
+
+// prepareSceneForExport neutralises container meshes (door/window hitbox roots,
+// material-less renderables) with an attribute-less geometry — GLTFExporter
+// emits those as plain transform nodes, but STL/OBJExporter read
+// `position.count` unconditionally and crash. Swap in a geometry with an empty
+// (count-0) position so they iterate zero vertices instead. Shared: the export
+// scene is a throwaway clone, only its geometry *ref* is swapped.
+const EMPTY_POSITION_GEOMETRY = new THREE.BufferGeometry()
+EMPTY_POSITION_GEOMETRY.setAttribute(
+  'position',
+  new THREE.Float32BufferAttribute(new Float32Array(0), 3),
+)
+
+function ensurePositionAttributes(root: THREE.Object3D) {
+  root.traverse((object) => {
+    const renderable = object as THREE.Mesh & { isLine?: boolean; isPoints?: boolean }
+    if (!(renderable.isMesh || renderable.isLine || renderable.isPoints)) return
+    if (!renderable.geometry?.getAttribute('position')) {
+      renderable.geometry = EMPTY_POSITION_GEOMETRY
+    }
+  })
+}
 
 export function ExportManager() {
   const scene = useThree((state) => state.scene)
@@ -22,42 +45,54 @@ export function ExportManager() {
       }
 
       const date = new Date().toISOString().split('T')[0]
-      const exportScene = prepareSceneForExport(sceneGroup)
-
-      if (format === 'stl') {
-        const exporter = new STLExporter()
-        const result = exporter.parse(exportScene, { binary: true })
-        const blob = new Blob([result], { type: 'model/stl' })
-        downloadBlob(blob, `model_${date}.stl`)
-        return
-      }
 
-      if (format === 'obj') {
-        const exporter = new OBJExporter()
-        const result = exporter.parse(exportScene)
-        const blob = new Blob([result], { type: 'model/obj' })
-        downloadBlob(blob, `model_${date}.obj`)
-        return
+      // Signal export so instanced kinds (trees/flowers/grass) swap their
+      // invisible proxy for real, exportable geometry, then wait for the
+      // commit before cloning the scene graph (same dance as BakeExporter —
+      // without it every plant exports as its raycast collider, a white box).
+      useViewer.getState().setExporting(true)
+      try {
+        await nextFrames()
+
+        if (format === 'glb') {
+          const buffer = await exportSceneToGlb(sceneGroup, useScene.getState().nodes)
+          const blob = new Blob([buffer], { type: 'model/gltf-binary' })
+          downloadBlob(blob, `model_${date}.glb`)
+          return
+        }
+
+        // Hide editor affordances that live on the scene layer (selection handles,
+        // ceiling/site brackets) and let wall-cutout reveal all walls — the same
+        // synchronous capture path thumbnails use. We clone the scene inside the
+        // window, so the export snapshots the clean building, then restore.
+        emitter.emit('thumbnail:before-capture', undefined)
+        let prepared: ReturnType<typeof prepareSceneForExport>
+        try {
+          prepared = prepareSceneForExport(sceneGroup, useScene.getState().nodes)
+        } finally {
+          emitter.emit('thumbnail:after-capture', undefined)
+        }
+        const { scene: exportScene } = prepared
+        ensurePositionAttributes(exportScene)
+
+        if (format === 'stl') {
+          const exporter = new STLExporter()
+          const result = exporter.parse(exportScene, { binary: true })
+          const blob = new Blob([result], { type: 'model/stl' })
+          downloadBlob(blob, `model_${date}.stl`)
+          return
+        }
+
+        if (format === 'obj') {
+          const exporter = new OBJExporter()
+          const result = exporter.parse(exportScene)
+          const blob = new Blob([result], { type: 'model/obj' })
+          downloadBlob(blob, `model_${date}.obj`)
+          return
+        }
+      } finally {
+        useViewer.getState().setExporting(false)
       }
-
-      // Default: GLB export (existing behavior)
-      const exporter = new GLTFExporter()
-
-      return new Promise<void>((resolve, reject) => {
-        exporter.parse(
-          exportScene,
-          (gltf) => {
-            const blob = new Blob([gltf as ArrayBuffer], { type: 'model/gltf-binary' })
-            downloadBlob(blob, `model_${date}.glb`)
-            resolve()
-          },
-          (error) => {
-            console.error('Export error:', error)
-            reject(error)
-          },
-          { binary: true },
-        )
-      })
     }
 
     setExportScene(exportFn)
@@ -70,33 +105,6 @@ export function ExportManager() {
   return null
 }
 
-function prepareSceneForExport(source: Object3D) {
-  const clone = source.clone(true)
-  const meshesToRemove: Mesh[] = []
-
-  clone.traverse((object) => {
-    if (isMeshWithInvalidGeometry(object)) meshesToRemove.push(object)
-  })
-
-  for (const mesh of meshesToRemove) {
-    mesh.removeFromParent()
-  }
-
-  return clone
-}
-
-function isMeshWithInvalidGeometry(object: Object3D): object is Mesh {
-  if (!isMesh(object)) return false
-
-  // Three exporters can crash when a Mesh has no readable position attribute.
-  const position = object.geometry?.getAttribute('position')
-  return !position || position.count === 0
-}
-
-function isMesh(object: Object3D): object is Mesh {
-  return (object as Mesh).isMesh === true
-}
-
 function downloadBlob(blob: Blob, filename: string) {
   const url = URL.createObjectURL(blob)
   const link = document.createElement('a')

package/src/components/editor/fence-tangent-lines-3d.tsx

@@ -0,0 +1,87 @@
+'use client'
+
+import {
+  type AnyNodeId,
+  type FenceNode,
+  getFenceControlHandle,
+  isSplineFence,
+  sceneRegistry,
+  useLiveNodeOverrides,
+  useScene,
+} from '@pascal-app/core'
+import { useViewer } from '@pascal-app/viewer'
+import { createPortal, useFrame } from '@react-three/fiber'
+import { useMemo, useState } from 'react'
+import { BufferGeometry, type Object3D, Vector3 } from 'three'
+import { EDITOR_LAYER } from '../../lib/constants'
+
+/**
+ * Straight connecting line through each spline-fence control point joining its
+ * two tangent handle ends (the classic pen-tool look). The handle *dots* are
+ * registry tap-handles (see `fence/definition.ts`); this overlay only draws
+ * the line between them, in both views' 3D scene.
+ *
+ * Must match the handle placement's arm scale so the line ends land exactly on
+ * the dots. Portals into the fence's own Object3D so it inherits the same world
+ * transform as the geometry (path coords are node-local plan meters), and reads
+ * the live override so the line tracks an in-flight tangent / point drag.
+ */
+
+// Keep in sync with TANGENT_HANDLE_ARM_SCALE in fence/definition.ts.
+const TANGENT_HANDLE_ARM_SCALE = 3
+const LINE_LIFT_Y = 0.02
+
+export function FenceTangentLines3D() {
+  const selectedIds = useViewer((s) => s.selection.selectedIds)
+  const selectedId = selectedIds.length === 1 ? selectedIds[0] : null
+
+  const rawNode = useScene((s) => (selectedId ? s.nodes[selectedId as AnyNodeId] : null))
+  const liveOverride = useLiveNodeOverrides((s) =>
+    selectedId ? s.overrides.get(selectedId as AnyNodeId) : undefined,
+  )
+  const fence = useMemo<FenceNode | null>(() => {
+    if (rawNode?.type !== 'fence') return null
+    const merged = liveOverride ? ({ ...rawNode, ...liveOverride } as FenceNode) : rawNode
+    return isSplineFence(merged) ? merged : null
+  }, [rawNode, liveOverride])
+
+  const [object, setObject] = useState<{ id: AnyNodeId; object: Object3D } | null>(null)
+  const selectedObject = selectedId && object?.id === selectedId ? object.object : null
+
+  useFrame(() => {
+    if (!selectedId || selectedObject) return
+    const next = sceneRegistry.nodes.get(selectedId)
+    if (next) setObject({ id: selectedId as AnyNodeId, object: next })
+  })
+
+  const geometry = useMemo(() => {
+    if (!fence?.path) return null
+    const positions: Vector3[] = []
+    for (let i = 0; i < fence.path.length; i += 1) {
+      const point = fence.path[i]!
+      const handle = getFenceControlHandle(fence.path, fence.tangents, i)
+      const ax = handle.x * TANGENT_HANDLE_ARM_SCALE
+      const az = handle.y * TANGENT_HANDLE_ARM_SCALE
+      // One disjoint segment per point — `lineSegments` pairs vertices, so the
+      // in/out ends connect through the point without joining across points.
+      positions.push(new Vector3(point[0] - ax, LINE_LIFT_Y, point[1] - az))
+      positions.push(new Vector3(point[0] + ax, LINE_LIFT_Y, point[1] + az))
+    }
+    return new BufferGeometry().setFromPoints(positions)
+  }, [fence])
+
+  if (!(fence && selectedObject && geometry)) return null
+
+  return createPortal(
+    <lineSegments frustumCulled={false} geometry={geometry} layers={EDITOR_LAYER} renderOrder={3}>
+      <lineBasicNodeMaterial
+        color="#8381ed"
+        depthTest={false}
+        depthWrite={false}
+        opacity={0.85}
+        transparent
+      />
+    </lineSegments>,
+    selectedObject,
+  )
+}

package/src/components/editor/first-person/build-collider-world.test.ts

@@ -2,9 +2,14 @@ import { afterEach, describe, expect, test } from 'bun:test'
 import {
   type AnyNode,
   type AnyNodeDefinition,
+  applyHeightPatch,
+  BuildingNode,
   CeilingNode,
   ColumnNode,
+  createTerrainField,
   ElevatorNode,
+  encodeTerrainField,
+  flattenPatch,
   LevelNode,
   nodeRegistry,
   registerNode,
@@ -13,7 +18,7 @@ import {
   sceneRegistry,
   useScene,
 } from '@pascal-app/core'
-import { BoxGeometry, Group, Mesh, MeshBasicMaterial } from 'three'
+import { BoxGeometry, Group, Mesh, MeshBasicMaterial, Raycaster, Vector3 } from 'three'
 import { buildFirstPersonColliderWorldFromRegistry } from './build-collider-world'
 
 function registerColliderDefinition(
@@ -46,8 +51,9 @@ function mountNode(
   sceneRegistry.byType[node.type]!.add(node.id)
 }
 
-function mountRegistryGroup(node: AnyNode) {
+function mountRegistryGroup(node: AnyNode, position: [number, number, number] = [0, 0, 0]) {
   const group = new Group()
+  group.position.set(position[0], position[1], position[2])
   group.updateMatrixWorld(true)
   sceneRegistry.nodes.set(node.id, group)
   sceneRegistry.byType[node.type]!.add(node.id)
@@ -105,6 +111,36 @@ describe('buildFirstPersonColliderWorldFromRegistry', () => {
     world?.dispose()
   })
 
+  test('skips meshes hidden by an invisible ancestor (stale roof segment CSG)', () => {
+    registerColliderDefinition('column', ColumnNode, 'structure')
+
+    // Mirror the roof's segments-wrapper shape: the registered mesh's own
+    // visible flag stays true while a hidden wrapper hides it at render
+    // time. The collider must match the render, not the own-flag.
+    const column = ColumnNode.parse({ id: 'column_test' })
+    const visibleColumn = ColumnNode.parse({ id: 'column_visible', position: [3, 0, 0] })
+    setSceneNodes([column, visibleColumn])
+
+    const wrapper = new Group()
+    wrapper.visible = false
+    const hiddenMesh = new Mesh(new BoxGeometry(10, 2, 10), new MeshBasicMaterial())
+    wrapper.add(hiddenMesh)
+    wrapper.updateMatrixWorld(true)
+    sceneRegistry.nodes.set(column.id, hiddenMesh)
+    sceneRegistry.byType[column.type]!.add(column.id)
+
+    mountNode(visibleColumn, [1, 2, 1], [3, 1, 0])
+
+    const world = buildFirstPersonColliderWorldFromRegistry()
+
+    expect(world).not.toBeNull()
+    // Bounds reflect only the visible 1×1 column at x = 3; the 10×10 mesh
+    // under the hidden wrapper contributed no geometry.
+    expect(world?.bounds?.min.x).toBeCloseTo(2.5)
+    expect(world?.bounds?.max.x).toBeCloseTo(3.5)
+    world?.dispose()
+  })
+
   test('leaves elevators to their dedicated dynamic collider meshes', () => {
     registerColliderDefinition('elevator', ElevatorNode, 'structure')
 
@@ -130,6 +166,34 @@ describe('buildFirstPersonColliderWorldFromRegistry', () => {
     world?.dispose()
   })
 
+  test('adds a fallback floor only for the lowest slab-less level in a building', () => {
+    const building = BuildingNode.parse({
+      id: 'building_test',
+      children: ['level_ground', 'level_upper'],
+    })
+    const groundLevel = LevelNode.parse({
+      id: 'level_ground',
+      parentId: building.id,
+      level: 0,
+      height: 3,
+    })
+    const upperLevel = LevelNode.parse({
+      id: 'level_upper',
+      parentId: building.id,
+      level: 1,
+    })
+    setSceneNodes([building, groundLevel, upperLevel])
+    mountRegistryGroup(groundLevel)
+    mountRegistryGroup(upperLevel, [0, 3, 0])
+
+    const world = buildFirstPersonColliderWorldFromRegistry()
+
+    expect(world).not.toBeNull()
+    expect(world?.bounds?.min.y).toBeCloseTo(-0.08)
+    expect(world?.bounds?.max.y).toBeCloseTo(0)
+    world?.dispose()
+  })
+
   test('adds a site ground collider so a spawn on bare ground has a floor', () => {
     const site = SiteNode.parse({ id: 'site_test' })
     setSceneNodes([site])
@@ -141,9 +205,42 @@ describe('buildFirstPersonColliderWorldFromRegistry', () => {
     // Ground slab sits just below the site ground plane (y = 0).
     expect(world?.bounds?.min.y).toBeCloseTo(-0.08)
     expect(world?.bounds?.max.y).toBeCloseTo(0)
-    // Default site footprint falls back to the 30 m minimum size.
-    expect(world?.bounds?.min.x).toBeCloseTo(-15)
-    expect(world?.bounds?.max.x).toBeCloseTo(15)
+    // The ground collider extends far past the site polygon so stepping out of
+    // the site boundary never drops the player below the ground plane.
+    expect(world?.bounds?.min.x).toBeCloseTo(-1000)
+    expect(world?.bounds?.max.x).toBeCloseTo(1000)
+    expect(world?.bounds?.min.z).toBeCloseTo(-1000)
+    expect(world?.bounds?.max.z).toBeCloseTo(1000)
     world?.dispose()
   })
+
+  test('a sculpted site walks on its terrain instead of the flat ground slab', () => {
+    const base = createTerrainField({ cols: 17, rows: 17, spacing: 1, origin: [-8, -8] })
+    const patch = flattenPatch(base, { minX: 2, minZ: 2, maxX: 5, maxZ: 5 }, 2.5)
+    const field = applyHeightPatch(base, patch as never)
+    const site = SiteNode.parse({ id: 'site_test', terrain: encodeTerrainField(field) })
+    setSceneNodes([site])
+    mountRegistryGroup(site)
+
+    const world = buildFirstPersonColliderWorldFromRegistry()
+    expect(world).not.toBeNull()
+    if (!world) return
+
+    // The hill is in the collider: a flat slab would top out at 0.
+    expect(world.bounds?.max.y).toBeCloseTo(2.5)
+    // And it still reaches past the site so stepping out does not drop the player.
+    expect(world.bounds?.min.x).toBeCloseTo(-1008)
+    expect(world.bounds?.max.x).toBeCloseTo(1008)
+
+    // What the player actually stands on, on the plateau and off it.
+    const raycaster = new Raycaster()
+    const standOn = (x: number, z: number) => {
+      raycaster.set(new Vector3(x, 500, z), new Vector3(0, -1, 0))
+      return raycaster.intersectObject(world.mesh, false)[0]?.point.y ?? null
+    }
+    expect(standOn(3, 3)).toBeCloseTo(2.5, 4)
+    expect(standOn(-3, -3)).toBeCloseTo(0, 4)
+
+    world.dispose()
+  })
 })