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

package/src/components/tools/site/site-boundary-editor.tsx

@@ -3,12 +3,21 @@ import { SCENE_LAYER } from '@pascal-app/viewer'
 import { useGLTF } from '@react-three/drei/core/Gltf'
 import { useFrame } from '@react-three/fiber'
 import { Suspense, useCallback, useEffect, useMemo, useRef, useState } from 'react'
-import { Color, CylinderGeometry, DoubleSide, type Mesh, type Object3D, RingGeometry } from 'three'
+import {
+  Color,
+  CylinderGeometry,
+  DoubleSide,
+  type Group,
+  type Mesh,
+  type Object3D,
+  RingGeometry,
+} from 'three'
 import { MeshBasicNodeMaterial } from 'three/webgpu'
 import { EDITOR_LAYER } from '../../../lib/constants'
 import { sfxEmitter } from '../../../lib/sfx-bus'
 import { SITE_BOUNDARY_DRAG_LABEL } from '../../../lib/site-boundary'
 import useEditor, { selectSiteFloorplanContext } from '../../../store/use-editor'
+import useInteractionScope from '../../../store/use-interaction-scope'
 import {
   ARROW_COLOR,
   ARROW_HOVER_COLOR,
@@ -38,6 +47,7 @@ const SITE_FLAG_HALO_COLOR = '#6366f1'
 
 type TintableMaterial = {
   color?: Color
+  depthTest: boolean
   depthWrite: boolean
   opacity: number
   needsUpdate: boolean
@@ -69,10 +79,9 @@ function SiteFlagModel({
         mesh.frustumCulled = false
         mesh.raycast = NO_RAYCAST
         mesh.receiveShadow = false
-        mesh.renderOrder = 1010
         mesh.material = new MeshBasicNodeMaterial({
           color: new Color(ARROW_COLOR),
-          depthTest: false,
+          depthTest: true,
           depthWrite: opacity >= 0.999,
           opacity,
           transparent: opacity < 0.999,
@@ -93,6 +102,7 @@ function SiteFlagModel({
 
         for (const material of materials as Array<MeshBasicNodeMaterial & TintableMaterial>) {
           material.color?.copy(color)
+          material.depthTest = true
           material.opacity = opacity
           material.transparent = opacity < 0.999
           material.depthWrite = opacity >= 0.999
@@ -217,11 +227,23 @@ function SiteFlagFallback({
     <group position={[0, SITE_FLAG_BASE_Y + (active ? SITE_FLAG_ACTIVE_LIFT : 0), 0]}>
       <mesh layers={SCENE_LAYER} position={[0, 0.16, 0]} raycast={NO_RAYCAST}>
         <cylinderGeometry args={[0.11, 0.16, 0.32, 24]} />
-        <meshBasicMaterial color={color} depthTest={false} opacity={opacity} transparent />
+        <meshBasicMaterial
+          color={color}
+          depthTest
+          depthWrite={opacity >= 0.999}
+          opacity={opacity}
+          transparent={opacity < 0.999}
+        />
       </mesh>
       <mesh layers={SCENE_LAYER} position={[0, 0.34, 0]} raycast={NO_RAYCAST}>
         <cylinderGeometry args={[0.04, 0.11, 0.14, 24]} />
-        <meshBasicMaterial color={color} depthTest={false} opacity={opacity} transparent />
+        <meshBasicMaterial
+          color={color}
+          depthTest
+          depthWrite={opacity >= 0.999}
+          opacity={opacity}
+          transparent={opacity < 0.999}
+        />
       </mesh>
     </group>
   )
@@ -355,14 +377,20 @@ export const SiteBoundaryEditor: React.FC = () => {
 
       if (!siteId) return
 
-      const editor = useEditor.getState()
       if (isDragging) {
-        editor.setActiveHandleDrag({ nodeId: siteId, label: SITE_BOUNDARY_DRAG_LABEL })
-      } else if (
-        editor.activeHandleDrag?.nodeId === siteId &&
-        editor.activeHandleDrag.label === SITE_BOUNDARY_DRAG_LABEL
-      ) {
-        editor.setActiveHandleDrag(null)
+        useInteractionScope
+          .getState()
+          .begin({ kind: 'handle-drag', nodeId: siteId, handle: SITE_BOUNDARY_DRAG_LABEL })
+      } else {
+        const scope = useInteractionScope.getState().scope
+        const activeHandleDrag =
+          scope.kind === 'handle-drag' ? { nodeId: scope.nodeId, label: scope.handle } : null
+        if (
+          activeHandleDrag?.nodeId === siteId &&
+          activeHandleDrag.label === SITE_BOUNDARY_DRAG_LABEL
+        ) {
+          useInteractionScope.getState().endIf((sc) => sc.kind === 'handle-drag')
+        }
       }
 
       if (!isDragging) {
@@ -375,12 +403,14 @@ export const SiteBoundaryEditor: React.FC = () => {
   useEffect(
     () => () => {
       if (!siteId) return
-      const editor = useEditor.getState()
+      const scope = useInteractionScope.getState().scope
+      const activeHandleDrag =
+        scope.kind === 'handle-drag' ? { nodeId: scope.nodeId, label: scope.handle } : null
       if (
-        editor.activeHandleDrag?.nodeId === siteId &&
-        editor.activeHandleDrag.label === SITE_BOUNDARY_DRAG_LABEL
+        activeHandleDrag?.nodeId === siteId &&
+        activeHandleDrag.label === SITE_BOUNDARY_DRAG_LABEL
       ) {
-        editor.setActiveHandleDrag(null)
+        useInteractionScope.getState().endIf((sc) => sc.kind === 'handle-drag')
       }
       useLiveNodeOverrides.getState().clearFields(siteId, ['polygon'])
       isDraggingSiteBoundaryRef.current = false
@@ -394,12 +424,35 @@ export const SiteBoundaryEditor: React.FC = () => {
     }
   }, [isSiteEditing, siteId])
 
+  // The flag models render on SCENE_LAYER (scene-depth occlusion), so unlike
+  // EDITOR_LAYER affordances the thumbnail camera can't filter them — hide
+  // them around captures (preset/snapshot/auto-save thumbnails), same as
+  // `handle-arrow.tsx`.
+  const handlesRootRef = useRef<Group>(null)
+  useEffect(() => {
+    const hideForCapture = () => {
+      if (handlesRootRef.current) handlesRootRef.current.visible = false
+    }
+    const restoreAfterCapture = () => {
+      if (handlesRootRef.current) handlesRootRef.current.visible = true
+    }
+    emitter.on('thumbnail:before-capture', hideForCapture)
+    emitter.on('thumbnail:after-capture', restoreAfterCapture)
+    return () => {
+      emitter.off('thumbnail:before-capture', hideForCapture)
+      emitter.off('thumbnail:after-capture', restoreAfterCapture)
+    }
+  }, [])
+
   const activateSiteEditing = useCallback(() => {
     isDraggingSiteBoundaryRef.current = true
     setIsDraggingSiteBoundary(true)
-    if (useEditor.getState().phase !== 'site') {
-      useEditor.setState({ catalogCategory: null, mode: 'select', phase: 'site', tool: null })
-    }
+    const editor = useEditor.getState()
+    // A boundary drag takes ownership away from the terrain brush. Going
+    // through setMode releases the sustained sculpting scope before the
+    // PolygonEditor begins its handle-drag scope.
+    if (editor.mode !== 'select') editor.setMode('select')
+    if (editor.phase !== 'site') editor.setPhase('site')
     selectSiteFloorplanContext()
   }, [])
 
@@ -411,10 +464,14 @@ export const SiteBoundaryEditor: React.FC = () => {
   }, [])
 
   useEffect(() => {
-    if (!isSiteEditing) return
+    // Terrain sculpting also lives in the site phase so the 3D flags stay
+    // available, but its ordinary terrain clicks belong to the brush. Only
+    // select mode treats an empty site-grid click as "leave site editing".
+    if (!isSiteEditing || mode !== 'select') return
 
     const onGridClick = () => {
-      if (useEditor.getState().phase !== 'site') return
+      const editor = useEditor.getState()
+      if (editor.phase !== 'site' || editor.mode !== 'select') return
       exitSiteEditing()
     }
 
@@ -422,7 +479,7 @@ export const SiteBoundaryEditor: React.FC = () => {
     return () => {
       emitter.off('grid:click', onGridClick)
     }
-  }, [exitSiteEditing, isSiteEditing])
+  }, [exitSiteEditing, isSiteEditing, mode])
 
   const renderSiteFlagVertex = useCallback(
     ({
@@ -470,25 +527,27 @@ export const SiteBoundaryEditor: React.FC = () => {
   if (!showSiteHandles) return null
 
   return (
-    <PolygonEditor
-      color={isSiteBoundaryHighlighted ? ARROW_COLOR : '#10b981'}
-      minVertices={3}
-      onBeforeVertexDrag={activateSiteEditing}
-      onDragCommit={() => {
-        sfxEmitter.emit('sfx:item-place')
-        exitSiteEditing()
-      }}
-      onDragStart={() => sfxEmitter.emit('sfx:item-pick')}
-      onDragStateChange={handleSiteBoundaryDragChange}
-      onMidpointHoverChange={setHoveredMidpoint}
-      onPolygonChange={handlePolygonChange}
-      onPolygonPreview={handlePolygonPreview}
-      onVertexHoverChange={setHoveredVertex}
-      polygon={displayPolygon}
-      renderMidpointHandle={renderSiteFlagMidpoint}
-      renderVertexHandle={renderSiteFlagVertex}
-      showBorderLine={isSiteBoundaryHighlighted}
-      showMidpointHandles={showSiteHandles}
-    />
+    <group ref={handlesRootRef}>
+      <PolygonEditor
+        color={isSiteBoundaryHighlighted ? ARROW_COLOR : '#10b981'}
+        minVertices={3}
+        onBeforeVertexDrag={activateSiteEditing}
+        onDragCommit={() => {
+          sfxEmitter.emit('sfx:item-place')
+          exitSiteEditing()
+        }}
+        onDragStart={() => sfxEmitter.emit('sfx:item-pick')}
+        onDragStateChange={handleSiteBoundaryDragChange}
+        onMidpointHoverChange={setHoveredMidpoint}
+        onPolygonChange={handlePolygonChange}
+        onPolygonPreview={handlePolygonPreview}
+        onVertexHoverChange={setHoveredVertex}
+        polygon={displayPolygon}
+        renderMidpointHandle={renderSiteFlagMidpoint}
+        renderVertexHandle={renderSiteFlagVertex}
+        showBorderLine={isSiteBoundaryHighlighted}
+        showMidpointHandles={showSiteHandles}
+      />
+    </group>
   )
 }

package/src/components/tools/site/stroke-pointer-ownership.test.ts

@@ -0,0 +1,91 @@
+import { describe, expect, test } from 'bun:test'
+import {
+  type StrokePointerAction,
+  type StrokePointerEvent,
+  strokePointerAction,
+} from './stroke-pointer-ownership'
+
+/**
+ * A stroke carries uncommitted state, so every one of these has a silent failure
+ * mode rather than a visible one — which is why the matrix is asserted rather
+ * than left to the four call sites.
+ */
+describe('strokePointerAction', () => {
+  const OWNER = 1
+  const OTHER = 2
+  const act = (event: StrokePointerEvent, pointerId: number, ownerPointerId: number | null) =>
+    strokePointerAction({ event, pointerId, ownerPointerId })
+
+  describe('with no stroke in flight', () => {
+    test('a down starts one', () => {
+      expect(act('down', OWNER, null)).toBe('begin')
+    })
+
+    test('every other event is ignored', () => {
+      // Notably `up`: the pointerup of a click that never began a stroke (over the
+      // eyedropper, or off the field) must not commit anything.
+      for (const event of ['move', 'up', 'cancel'] as StrokePointerEvent[]) {
+        expect(act(event, OWNER, null)).toBe('ignore')
+      }
+    })
+  })
+
+  describe('the owning pointer drives the stroke', () => {
+    test('move paints, up commits', () => {
+      expect(act('move', OWNER, OWNER)).toBe('apply')
+      expect(act('up', OWNER, OWNER)).toBe('commit')
+    })
+
+    test('cancel abandons where up commits', () => {
+      // The browser fires `cancel` when it takes the gesture away, so the user
+      // never finished the stroke. These two must not be the same handler — they
+      // were, and a cancelled drag persisted.
+      expect(act('cancel', OWNER, OWNER)).toBe('abandon')
+      expect(act('cancel', OWNER, OWNER)).not.toBe(act('up', OWNER, OWNER))
+    })
+  })
+
+  describe('a second pointer', () => {
+    test('down abandons the stroke in flight', () => {
+      // Two fingers is a pinch-zoom. Abandoning restores the ground exactly,
+      // because nothing was committed yet.
+      expect(act('down', OTHER, OWNER)).toBe('abandon')
+    })
+
+    test('never touches the owner’s stroke any other way', () => {
+      for (const event of ['move', 'up', 'cancel'] as StrokePointerEvent[]) {
+        expect(act(event, OTHER, OWNER)).toBe('ignore')
+      }
+    })
+
+    test('lifting it does not commit — the bug this replaced', () => {
+      // The old handler keyed off `strokeRef` alone, so a resting finger lifting
+      // committed a stroke the other finger was still drawing.
+      expect(act('up', OTHER, OWNER)).not.toBe('commit')
+    })
+  })
+
+  test('only a down can begin, and only an owning up can commit', () => {
+    // Swept over the whole matrix rather than spot-checked: these are the two
+    // actions that write to the scene, so anything else reaching them is a bug.
+    const events: StrokePointerEvent[] = ['down', 'move', 'up', 'cancel']
+    const owners: Array<number | null> = [null, OWNER]
+    const seen: Array<[StrokePointerEvent, number, number | null, StrokePointerAction]> = []
+    for (const event of events) {
+      for (const pointerId of [OWNER, OTHER]) {
+        for (const ownerPointerId of owners) {
+          seen.push([event, pointerId, ownerPointerId, act(event, pointerId, ownerPointerId)])
+        }
+      }
+    }
+    expect(seen.filter(([, , , action]) => action === 'begin').map(([event]) => event)).toEqual([
+      'down',
+      'down',
+    ])
+    expect(
+      seen
+        .filter(([, , , action]) => action === 'commit')
+        .map(([event, pointerId, ownerPointerId]) => [event, pointerId === ownerPointerId]),
+    ).toEqual([['up', true]])
+  })
+})

package/src/components/tools/site/stroke-pointer-ownership.ts

@@ -0,0 +1,57 @@
+/**
+ * Which pointer a terrain stroke belongs to, and what every other one does.
+ *
+ * A stroke is a sustained drag with uncommitted state, so "who owns the pointer"
+ * is a real decision rather than plumbing — and each wrong answer fails silently
+ * in its own way. The tool used to have no answer at all: every branch below fell
+ * through to the owning-pointer path.
+ *
+ * Extracted as a pure function because the interesting part is the *matrix*, which
+ * cannot be asserted through the component — reproducing it needs a WebGL canvas,
+ * a camera, and synthetic multi-touch. The tool keeps the DOM plumbing.
+ */
+export type StrokePointerAction =
+  /** Start a stroke owned by this pointer. */
+  | 'begin'
+  /** Route the event into the active stroke. */
+  | 'apply'
+  /** Drop the stroke, restoring the pre-stroke ground. */
+  | 'abandon'
+  /** Finish and persist the stroke. */
+  | 'commit'
+  /** Not our pointer, or nothing in flight. */
+  | 'ignore'
+
+export type StrokePointerEvent = 'down' | 'move' | 'up' | 'cancel'
+
+/**
+ * `ownerPointerId` is `null` when no stroke is in flight.
+ *
+ * The rules, in the order they matter:
+ *
+ * - **A second `down` abandons.** Two fingers on the glass is a pinch-zoom, and by
+ *   then the first finger has already deposited a dab; abandoning is what makes
+ *   "pinch to look closer" leave no accidental bump. Falling through was the worst
+ *   of the options: it orphaned an uncommitted stroke whose dabs were already
+ *   baked into the live field's snapshot, so they survived on screen while being
+ *   unreachable by undo.
+ * - **A non-owning `up` is ignored, not a commit.** Lifting a resting second finger
+ *   would otherwise persist a stroke the other finger is still drawing.
+ * - **`cancel` abandons where `up` commits.** The browser fires `cancel` when it
+ *   takes the gesture away (OS edge swipe, palm rejection), meaning the user never
+ *   finished — committing there persists a half-drag nobody released.
+ */
+export function strokePointerAction(args: {
+  event: StrokePointerEvent
+  pointerId: number
+  ownerPointerId: number | null
+}): StrokePointerAction {
+  const { event, pointerId, ownerPointerId } = args
+
+  if (event === 'down') {
+    return ownerPointerId === null ? 'begin' : 'abandon'
+  }
+  if (ownerPointerId === null || pointerId !== ownerPointerId) return 'ignore'
+  if (event === 'move') return 'apply'
+  return event === 'cancel' ? 'abandon' : 'commit'
+}

package/src/components/tools/site/terrain-brush-cursor.tsx

@@ -0,0 +1,247 @@
+'use client'
+
+import {
+  minBrushRadius,
+  raycastTerrain,
+  type SiteNode,
+  surfaceHeightAt,
+  type TerrainField,
+  terrainFieldOf,
+  useLiveTerrain,
+} from '@pascal-app/core'
+import { useViewer } from '@pascal-app/viewer'
+import { Html } from '@react-three/drei'
+import { useFrame, useThree } from '@react-three/fiber'
+import { type MutableRefObject, useEffect, useMemo, useRef } from 'react'
+import {
+  BufferGeometry,
+  Float32BufferAttribute,
+  type Group,
+  type Line,
+  Raycaster,
+  Vector2,
+} from 'three'
+import { EDITOR_LAYER } from '../../../lib/constants'
+import { sculptFieldForSite, terrainPointInsideSite } from '../../../lib/terrain-sculpt'
+import { brushRingColor } from '../../../lib/terrain-verb-color'
+import useEditor from '../../../store/use-editor'
+import { formatMeasurement } from '../../editor/measurement-pill'
+
+/** Segments in the cursor ring. 64 reads as a circle at any usable brush size. */
+const RING_SEGMENTS = 64
+
+/**
+ * Lift above the surface, so the ring is not z-fighting the ground it traces.
+ *
+ * Two centimetres only works because the ring samples `surfaceHeightAt` — the
+ * plane of the triangle under each point — and not the bilinear `heightAt`. Those
+ * differ by up to a quarter of a cell's warp, which on steep ground is decimetres,
+ * so a bilinear ring would submerge on half of every cell no matter how large this
+ * gets. `depthTest={false}` hides that on screen but not in the exported GLB.
+ */
+const RING_LIFT = 0.02
+
+/** The ring is decoration; it must never intercept a pointer ray. */
+const NO_RAYCAST = () => null
+
+export type TerrainBrushFocus = {
+  radius: number
+  x: number
+  z: number
+}
+
+/**
+ * The brush ring, drawn *on the terrain surface* rather than as a flat disc.
+ *
+ * Following the surface is the whole point: a flat ring on sloped ground tells
+ * the user nothing about what the brush will touch, because the footprint is a
+ * cylinder in XZ and the interesting question is which part of the slope falls
+ * inside it. Sampling the ring's height per segment answers that directly.
+ *
+ * Updated in `useFrame` from a ref, never through React state — the ring tracks
+ * the pointer, and routing that through a re-render would re-run every hook in
+ * the tool subtree at pointer rate.
+ *
+ * On `EDITOR_LAYER`, non-negotiably: an overlay mesh left on the scene layer
+ * poisons the MRT scene pass and makes FrontSide geometry render see-through.
+ */
+export const TerrainBrushCursor: React.FC<{
+  focusRef: MutableRefObject<TerrainBrushFocus | null>
+  site: SiteNode
+}> = ({ focusRef, site }) => {
+  const { camera, gl } = useThree()
+  const radius = useEditor((state) => state.terrainBrush.radius)
+  const shape = useEditor((state) => state.terrainBrush.shape)
+  // The ring is the only thing at the point of action that can say what the next
+  // drag will do — its geometry is identical for all four verbs, so colour is the
+  // one channel left. Keep the mapping centralized in `lib/terrain-verb-color`.
+  const verb = useEditor((state) => state.terrainVerb)
+  const sampling = useEditor((state) => state.terrainSampling)
+  const color = brushRingColor(verb, sampling)
+  const unit = useViewer((state) => state.unit)
+
+  const lineRef = useRef<Line>(null)
+  const centerRef = useRef<Group>(null)
+  const heightRef = useRef<HTMLSpanElement>(null)
+  const lastHeightLabelRef = useRef('')
+  const pointerRef = useRef<{ x: number; y: number } | null>(null)
+  const raycaster = useRef(new Raycaster())
+  const ndc = useRef(new Vector2())
+
+  const geometry = useMemo(() => {
+    const positions = new Float32Array((RING_SEGMENTS + 1) * 3)
+    const buffer = new BufferGeometry()
+    buffer.setAttribute('position', new Float32BufferAttribute(positions, 3))
+    return buffer
+  }, [])
+  useEffect(() => () => geometry.dispose(), [geometry])
+
+  useEffect(() => {
+    const canvas = gl.domElement
+    const track = (event: PointerEvent) => {
+      const rect = canvas.getBoundingClientRect()
+      pointerRef.current = {
+        x: ((event.clientX - rect.left) / rect.width) * 2 - 1,
+        y: -((event.clientY - rect.top) / rect.height) * 2 + 1,
+      }
+    }
+    const freeze = () => {
+      pointerRef.current = null
+    }
+    canvas.addEventListener('pointermove', track)
+    canvas.addEventListener('pointerleave', freeze)
+    return () => {
+      canvas.removeEventListener('pointermove', track)
+      canvas.removeEventListener('pointerleave', freeze)
+    }
+  }, [gl])
+
+  useFrame(() => {
+    const line = lineRef.current
+    const center = centerRef.current
+    const pointer = pointerRef.current
+    if (!(line && center)) return
+    if (!(pointer || focusRef.current)) {
+      line.visible = false
+      center.visible = false
+      if (heightRef.current) heightRef.current.style.display = 'none'
+      return
+    }
+
+    // Two fields, deliberately. Aiming uses the stroke's *snapshot* so the ring
+    // sits exactly where the next dab will land — the tool raycasts the snapshot
+    // too, and a cursor that disagreed with the brush by even a few centimetres
+    // would read as lag. Drawing uses the live field so the ring drapes over the
+    // hill as it rises. Outside a stroke the two are the same field.
+    const stroke = useLiveTerrain.getState().strokeOf(site.id)
+    const surface: TerrainField = stroke?.field ?? terrainFieldOf(site) ?? sculptFieldForSite(site)
+    const aim: TerrainField = stroke?.snapshot ?? surface
+
+    let hit: { x: number; z: number } | null = null
+    if (pointer) {
+      ndc.current.set(pointer.x, pointer.y)
+      raycaster.current.setFromCamera(ndc.current, camera)
+      const { origin, direction } = raycaster.current.ray
+      hit = raycastTerrain(
+        aim,
+        [origin.x, origin.y, origin.z],
+        [direction.x, direction.y, direction.z],
+      )
+      if (hit && terrainPointInsideSite(site, hit.x, hit.z)) {
+        focusRef.current = { radius: Math.max(radius, minBrushRadius(aim)), x: hit.x, z: hit.z }
+      } else {
+        hit = null
+        focusRef.current = null
+      }
+    } else if (focusRef.current) {
+      hit = terrainPointInsideSite(site, focusRef.current.x, focusRef.current.z)
+        ? focusRef.current
+        : null
+    }
+    if (!hit) {
+      line.visible = false
+      center.visible = false
+      if (heightRef.current) heightRef.current.style.display = 'none'
+      return
+    }
+    line.visible = true
+    center.visible = true
+
+    const attribute = line.geometry.getAttribute('position')
+    const array = attribute.array as Float32Array
+    // The same floor the tool applies at pointer-down. Drawing the stored radius
+    // instead would draw a ring smaller than the footprint the next dab actually
+    // gets — on a coarse lot the ring would be the one thing insisting the brush
+    // is 2 m wide while the stroke is 1.5 spacings wide.
+    const drawn = Math.max(radius, minBrushRadius(aim))
+    focusRef.current = { radius: drawn, x: hit.x, z: hit.z }
+    for (let index = 0; index <= RING_SEGMENTS; index++) {
+      const angle = (index / RING_SEGMENTS) * Math.PI * 2
+      // The square brush uses Chebyshev distance, so its rim is a square: scale
+      // the unit circle out to the box so the ring shows the actual footprint
+      // rather than an inscribed circle that under-reports it.
+      const cos = Math.cos(angle)
+      const sin = Math.sin(angle)
+      const scale =
+        shape === 'square' ? 1 / Math.max(Math.abs(cos), Math.abs(sin), Number.EPSILON) : 1
+      const x = hit.x + cos * drawn * scale
+      const z = hit.z + sin * drawn * scale
+      array[index * 3] = x
+      array[index * 3 + 1] = surfaceHeightAt(surface, x, z) + RING_LIFT
+      array[index * 3 + 2] = z
+    }
+    attribute.needsUpdate = true
+    line.geometry.computeBoundingSphere()
+
+    const centerHeight = surfaceHeightAt(surface, hit.x, hit.z)
+    center.position.set(hit.x, centerHeight + RING_LIFT, hit.z)
+    const heightLabel = `H ${formatMeasurement(centerHeight, unit)}`
+    if (heightRef.current) {
+      heightRef.current.style.display = ''
+      if (heightLabel !== lastHeightLabelRef.current) {
+        heightRef.current.textContent = heightLabel
+        lastHeightLabelRef.current = heightLabel
+      }
+    }
+  })
+
+  return (
+    <>
+      <line
+        frustumCulled={false}
+        geometry={geometry}
+        layers={EDITOR_LAYER}
+        raycast={NO_RAYCAST}
+        // @ts-expect-error R3F <line> element conflicts with SVG <line> type
+        ref={lineRef}
+        renderOrder={13}
+      >
+        <lineBasicNodeMaterial color={color} depthTest={false} depthWrite={false} linewidth={2} />
+      </line>
+      <group ref={centerRef} visible={false}>
+        <mesh
+          layers={EDITOR_LAYER}
+          raycast={NO_RAYCAST}
+          renderOrder={14}
+          rotation={[-Math.PI / 2, 0, 0]}
+        >
+          <circleGeometry args={[0.055, 24]} />
+          <meshBasicMaterial color={color} depthTest={false} depthWrite={false} />
+        </mesh>
+        <Html
+          center
+          position={[0, 0.18, 0]}
+          style={{ pointerEvents: 'none', userSelect: 'none' }}
+          zIndexRange={[20, 0]}
+        >
+          <span
+            className="whitespace-nowrap rounded-full border border-border/60 bg-background/90 px-2 py-1 font-medium font-mono text-foreground text-xs shadow-sm backdrop-blur"
+            ref={heightRef}
+          />
+        </Html>
+      </group>
+    </>
+  )
+}
+
+export default TerrainBrushCursor