@pascal-app/editor 0.9.2 → 1.0.0-beta.2

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/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/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)
@@ -160,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])
@@ -179,4 +213,34 @@ describe('buildFirstPersonColliderWorldFromRegistry', () => {
     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()
+  })
 })

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

@@ -3,9 +3,11 @@ import {
   type AnyNodeId,
   type DoorNode,
   getGarageVisibleOpeningRatio,
+  getLevelElevations,
   isOperationDoorType,
   nodeRegistry,
   sceneRegistry,
+  terrainFieldOf,
   useInteractive,
   useScene,
 } from '@pascal-app/core'
@@ -13,6 +15,7 @@ import * as THREE from 'three'
 import { mergeGeometries } from 'three/examples/jsm/utils/BufferGeometryUtils.js'
 import { acceleratedRaycast, computeBoundsTree, disposeBoundsTree } from 'three-mesh-bvh'
 import { computeSceneBoundsXZ } from '../../../lib/scene-bounds'
+import { createTerrainColliderGeometry } from './terrain-collider'
 
 const SKIPPED_MESH_NAMES = new Set(['cutout', 'collision-mesh'])
 const COLLIDER_NODE_CATEGORIES = new Set(['structure', 'furnish'])
@@ -129,10 +132,12 @@ function createLevelFallbackFloorGeometry(level: LevelNode, nodes: SceneNodes) {
 
 function collectLevelFallbackFloorGeometries(nodes: SceneNodes) {
   const geometries: THREE.BufferGeometry[] = []
+  const levelElevations = getLevelElevations(nodes)
 
   for (const levelId of sceneRegistry.byType.level!) {
     const node = nodes[levelId as AnyNodeId]
     if (node?.type !== 'level') continue
+    if (levelElevations.get(node.id)?.baseY !== 0) continue
 
     const geometry = createLevelFallbackFloorGeometry(node, nodes)
     if (geometry) geometries.push(geometry)
@@ -150,12 +155,27 @@ function collectLevelFallbackFloorGeometries(nodes: SceneNodes) {
 // is effectively unbounded (not sized to the site polygon): the ground plane must
 // keep holding the player up even after they step past the site boundary,
 // otherwise they fall below the ground plane into the void.
+//
+// A sculpted site takes the terrain path instead: the flat slab would hold the
+// player at the datum inside an excavation and bury them inside a hill. Derived
+// from the field rather than the rendered terrain mesh for the same
+// mount-timing reason as the flat slab.
 function createSiteGroundColliderGeometry(site: SiteNode, nodes: SceneNodes) {
   if (site.visible === false) return null
 
   const siteObject = sceneRegistry.nodes.get(site.id)
   if (!siteObject?.visible) return null
 
+  const field = terrainFieldOf(site)
+  if (field) {
+    const terrainGeometry = createTerrainColliderGeometry(field)
+    if (terrainGeometry) {
+      siteObject.updateWorldMatrix(true, false)
+      terrainGeometry.applyMatrix4(siteObject.matrixWorld)
+      return terrainGeometry
+    }
+  }
+
   const bounds = computeSceneBoundsXZ(nodes)
   const [centerX, centerZ] = bounds?.center ?? [0, 0]
   const [boundsWidth, boundsDepth] = bounds?.size ?? [0, 0]

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

@@ -0,0 +1,132 @@
+import { describe, expect, test } from 'bun:test'
+import {
+  applyHeightPatch,
+  createTerrainField,
+  flattenPatch,
+  heightAt,
+  type TerrainField,
+} from '@pascal-app/core'
+import { Mesh, MeshBasicMaterial, Raycaster, Vector3 } from 'three'
+import { createTerrainColliderGeometry } from './terrain-collider'
+
+const DOWN = new Vector3(0, -1, 0)
+const UP = new Vector3(0, 1, 0)
+
+/** A 2.5 m plateau over x,z ∈ [2,5] on an otherwise flat field. */
+function plateauField(): TerrainField {
+  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)
+  return applyHeightPatch(base, patch as never)
+}
+
+/** A field sloping 0.1 m per metre along +x, so every sample differs. */
+function slopedField(): TerrainField {
+  const field = createTerrainField({ cols: 9, rows: 9, spacing: 1, origin: [-4, -4] })
+  const heights = new Int16Array(field.heights)
+  for (let r = 0; r < field.rows; r++) {
+    for (let c = 0; c < field.cols; c++) {
+      heights[r * field.cols + c] = Math.round((c * 0.1) /* m */ / field.step)
+    }
+  }
+  return { ...field, heights }
+}
+
+function colliderMesh(field: TerrainField) {
+  const geometry = createTerrainColliderGeometry(field)
+  if (!geometry) throw new Error('no collider geometry')
+  const mesh = new Mesh(geometry, new MeshBasicMaterial())
+  mesh.updateMatrixWorld(true)
+  return mesh
+}
+
+/** The height a downward ray finds — what the walkthrough player stands on. */
+function groundUnder(mesh: Mesh, x: number, z: number): number | null {
+  const raycaster = new Raycaster()
+  raycaster.set(new Vector3(x, 500, z), DOWN)
+  const hits = raycaster.intersectObject(mesh, false)
+  const floor = hits.find((hit) => {
+    if (!hit.face) return true
+    return hit.face.normal.clone().transformDirection(mesh.matrixWorld).dot(UP) > 0.2
+  })
+  return floor ? floor.point.y : null
+}
+
+describe('createTerrainColliderGeometry', () => {
+  test('the walkable surface is the field, not a plane', () => {
+    const field = plateauField()
+    const mesh = colliderMesh(field)
+
+    // On the plateau, off it, and on the slope between: the collider has to agree
+    // with `heightAt` at each, or what you see is not what you stand on.
+    for (const [x, z] of [
+      [3, 3],
+      [-3, -3],
+      [1.5, 3],
+      [4.5, 4.5],
+    ] as Array<[number, number]>) {
+      expect(groundUnder(mesh, x, z)).toBeCloseTo(heightAt(field, x, z), 4)
+    }
+  })
+
+  test('a sloped field is sampled per vertex, not averaged', () => {
+    const field = slopedField()
+    const mesh = colliderMesh(field)
+
+    // Sample midpoints, where a flat or decimated collider would disagree most.
+    for (const x of [-3.5, -0.5, 1.5, 3.5]) {
+      expect(groundUnder(mesh, x, 0)).toBeCloseTo(heightAt(field, x, 0), 4)
+    }
+  })
+
+  test('the skirt keeps holding the player far past the field', () => {
+    const field = slopedField()
+    const mesh = colliderMesh(field)
+
+    // Past every edge and past a corner: `heightAt` clamps to the border there, so
+    // the collider must too. Without the skirt these are null and the player falls.
+    for (const [x, z] of [
+      [400, 0],
+      [-400, 0],
+      [0, 400],
+      [0, -400],
+      [400, 400],
+      [-400, -400],
+    ] as Array<[number, number]>) {
+      expect(groundUnder(mesh, x, z)).toBeCloseTo(heightAt(field, x, z), 4)
+    }
+  })
+
+  test('every triangle carries a normal, and the surface faces up', () => {
+    const geometry = createTerrainColliderGeometry(plateauField())
+    if (!geometry) throw new Error('no collider geometry')
+
+    const position = geometry.getAttribute('position')
+    const normal = geometry.getAttribute('normal')
+    expect(normal).toBeDefined()
+    expect(normal.count).toBe(position.count)
+    // Non-indexed triangles — `mergeGeometries` needs every contributor to match.
+    expect(geometry.index).toBeNull()
+    expect(position.count % 3).toBe(0)
+
+    for (let i = 0; i < normal.count; i++) {
+      expect(normal.getY(i)).toBeGreaterThan(0)
+    }
+  })
+
+  test('decimates rather than exploding on an absurd field', () => {
+    // 1025² is inside the schema's decode-bomb guard but 1M cells — an exact
+    // collider would be 2M triangles for a surface nobody can walk that far across.
+    const field = createTerrainField({ cols: 1025, rows: 1025, spacing: 0.5 })
+    const geometry = createTerrainColliderGeometry(field)
+    if (!geometry) throw new Error('no collider geometry')
+
+    const triangles = geometry.getAttribute('position').count / 3
+    expect(triangles).toBeLessThan(200_000)
+    // Still a real surface, not an empty one.
+    expect(triangles).toBeGreaterThan(1000)
+  })
+
+  test('returns null for a degenerate field', () => {
+    expect(createTerrainColliderGeometry(createTerrainField({ cols: 1, rows: 1 }))).toBeNull()
+  })
+})

package/src/components/editor/first-person/terrain-collider.ts

@@ -0,0 +1,212 @@
+/**
+ * The sculpted ground as walkthrough collision geometry.
+ *
+ * The first-person collider world is a single merged BVH mesh, and before terrain
+ * the ground contributed one flat 2 km box to it. That box is wrong in both
+ * directions on a sculpted site: it holds the player up at the datum inside an
+ * excavation, and buries them inside a hill. This module replaces it.
+ *
+ * Two properties it has to hold, because the whole point is that walking agrees
+ * with every other consumer of the field:
+ *
+ * - **The surface is the field**, sampled at every vertex — the same
+ *   `heightAtSample`/`normalAt` the rendered mesh uses (`terrain-geometry.ts`),
+ *   so what you see is what you stand on. It is deliberately not a decimated
+ *   proxy at realistic field sizes.
+ * - **It extends past the field**, because `heightAt` clamps to the border
+ *   outside it. A collider that stopped at the field edge would drop the player
+ *   into the void one step past the site, which is exactly the bug the flat box
+ *   existed to prevent. The skirt extrudes each border sample outward at its own
+ *   height, so the collider and `heightAt` agree everywhere, not just inside.
+ *
+ * Non-indexed triangles with position + normal, matching what the other collider
+ * contributors emit — `mergeGeometries` requires every input to agree on both.
+ */
+
+import { heightAtSample, normalAt, type TerrainField } from '@pascal-app/core'
+import * as THREE from 'three'
+
+/**
+ * How far past the field the ground keeps holding the player, in metres. Matches
+ * the flat box's half-extent so a site's collider bounds do not change size when
+ * it gains terrain.
+ */
+const SKIRT_REACH = 1000
+
+/**
+ * Cell budget before the collider decimates.
+ *
+ * 66k cells is a 257² field — the largest anything realistic produces, and ~131k
+ * triangles, which the BVH builds in well under a frame's worth of budget. The
+ * schema allows up to 4097² (a decode-bomb guard, not a real terrain); at that
+ * size an exact collider would be 100M triangles, so past the budget this steps
+ * the sample grid and the collider becomes a faithful-but-coarser version of the
+ * same surface rather than an out-of-memory crash.
+ */
+const MAX_COLLIDER_CELLS = 66_000
+
+function colliderStride(field: TerrainField): number {
+  const cells = Math.max(1, (field.cols - 1) * (field.rows - 1))
+  if (cells <= MAX_COLLIDER_CELLS) return 1
+  return Math.ceil(Math.sqrt(cells / MAX_COLLIDER_CELLS))
+}
+
+/** The sample indices the collider walks: every `stride`-th, always including the border. */
+function sampleLine(count: number, stride: number): number[] {
+  const line: number[] = []
+  for (let i = 0; i < count - 1; i += stride) line.push(i)
+  line.push(count - 1)
+  return line
+}
+
+type Vertex = { x: number; y: number; z: number }
+
+class TriangleSink {
+  private readonly positions: number[] = []
+  private readonly normals: number[] = []
+
+  constructor(private readonly field: TerrainField) {}
+
+  private push(v: Vertex): void {
+    this.positions.push(v.x, v.y, v.z)
+    const [nx, ny, nz] = normalAt(this.field, v.x, v.z)
+    this.normals.push(nx, ny, nz)
+  }
+
+  /**
+   * One cell, given its four corners named by axis order. Winding matches
+   * `buildTerrainMesh`: `(p00, p01, p10)` and `(p10, p01, p11)` faces +Y, which is
+   * what the spawn resolver's `normal.dot(UP) > 0.2` floor test needs.
+   */
+  quad(p00: Vertex, p10: Vertex, p01: Vertex, p11: Vertex): void {
+    this.push(p00)
+    this.push(p01)
+    this.push(p10)
+    this.push(p10)
+    this.push(p01)
+    this.push(p11)
+  }
+
+  build(): THREE.BufferGeometry | null {
+    if (this.positions.length === 0) return null
+    const geometry = new THREE.BufferGeometry()
+    geometry.setAttribute(
+      'position',
+      new THREE.BufferAttribute(new Float32Array(this.positions), 3),
+    )
+    geometry.setAttribute('normal', new THREE.BufferAttribute(new Float32Array(this.normals), 3))
+    return geometry
+  }
+}
+
+/**
+ * Terrain collision geometry in the site's own frame — the caller applies the
+ * site's world matrix, exactly as it did for the flat box it replaces.
+ */
+export function createTerrainColliderGeometry(field: TerrainField): THREE.BufferGeometry | null {
+  if (field.cols < 2 || field.rows < 2) return null
+
+  const stride = colliderStride(field)
+  const cols = sampleLine(field.cols, stride)
+  const rows = sampleLine(field.rows, stride)
+  const sink = new TriangleSink(field)
+
+  const xAt = (col: number) => field.origin[0] + col * field.spacing
+  const zAt = (row: number) => field.origin[1] + row * field.spacing
+  const at = (col: number, row: number): Vertex => ({
+    x: xAt(col),
+    y: heightAtSample(field, col, row),
+    z: zAt(row),
+  })
+
+  for (let ri = 0; ri < rows.length - 1; ri++) {
+    const r0 = rows[ri] as number
+    const r1 = rows[ri + 1] as number
+    for (let ci = 0; ci < cols.length - 1; ci++) {
+      const c0 = cols[ci] as number
+      const c1 = cols[ci + 1] as number
+      sink.quad(at(c0, r0), at(c1, r0), at(c0, r1), at(c1, r1))
+    }
+  }
+
+  // The skirt: each border sample extruded outward at its own height, so stepping
+  // off the field lands on the border height rather than on nothing. This is the
+  // collider spelling of `heightAt`'s edge clamp.
+  const firstCol = 0
+  const lastCol = field.cols - 1
+  const firstRow = 0
+  const lastRow = field.rows - 1
+  const westX = xAt(firstCol) - SKIRT_REACH
+  const eastX = xAt(lastCol) + SKIRT_REACH
+  const northZ = zAt(firstRow) - SKIRT_REACH
+  const southZ = zAt(lastRow) + SKIRT_REACH
+
+  for (let ci = 0; ci < cols.length - 1; ci++) {
+    const c0 = cols[ci] as number
+    const c1 = cols[ci + 1] as number
+    const north0 = at(c0, firstRow)
+    const north1 = at(c1, firstRow)
+    sink.quad(
+      { x: north0.x, y: north0.y, z: northZ },
+      { x: north1.x, y: north1.y, z: northZ },
+      north0,
+      north1,
+    )
+    const south0 = at(c0, lastRow)
+    const south1 = at(c1, lastRow)
+    sink.quad(
+      south0,
+      south1,
+      { x: south0.x, y: south0.y, z: southZ },
+      {
+        x: south1.x,
+        y: south1.y,
+        z: southZ,
+      },
+    )
+  }
+
+  for (let ri = 0; ri < rows.length - 1; ri++) {
+    const r0 = rows[ri] as number
+    const r1 = rows[ri + 1] as number
+    const west0 = at(firstCol, r0)
+    const west1 = at(firstCol, r1)
+    sink.quad(
+      { x: westX, y: west0.y, z: west0.z },
+      west0,
+      { x: westX, y: west1.y, z: west1.z },
+      west1,
+    )
+    const east0 = at(lastCol, r0)
+    const east1 = at(lastCol, r1)
+    sink.quad(east0, { x: eastX, y: east0.y, z: east0.z }, east1, {
+      x: eastX,
+      y: east1.y,
+      z: east1.z,
+    })
+  }
+
+  // Corner quads, flat at the corner sample's height — the diagonal region no edge
+  // strip covers, and where `heightAt` also reports the corner value.
+  const corners: Array<[Vertex, number, number]> = [
+    [at(firstCol, firstRow), westX, northZ],
+    [at(lastCol, firstRow), eastX, northZ],
+    [at(firstCol, lastRow), westX, southZ],
+    [at(lastCol, lastRow), eastX, southZ],
+  ]
+  for (const [corner, farX, farZ] of corners) {
+    const minX = Math.min(corner.x, farX)
+    const maxX = Math.max(corner.x, farX)
+    const minZ = Math.min(corner.z, farZ)
+    const maxZ = Math.max(corner.z, farZ)
+    const y = corner.y
+    sink.quad(
+      { x: minX, y, z: minZ },
+      { x: maxX, y, z: minZ },
+      { x: minX, y, z: maxZ },
+      { x: maxX, y, z: maxZ },
+    )
+  }
+
+  return sink.build()
+}