@pascal-app/editor 1.0.1 → 1.0.4

package/src/components/editor/wall-move-side-handles.tsx

@@ -1,7 +1,6 @@
 'use client'
 
 import {
-  type AnyNode,
   type AnyNodeId,
   type FenceNode,
   getFenceCenterlineFrameAt,
@@ -10,6 +9,7 @@ import {
   getWallCurveFrameAt,
   getWallCurveLength,
   getWallEffectiveHeightForNodes,
+  getWallLocalFaceZ,
   getWallThickness,
   isCurvedWall,
   MIN_WALL_HEIGHT,
@@ -48,7 +48,10 @@ import {
 } from '../../lib/elevation-guides'
 import { isHistoryShortcut } from '../../lib/history'
 import { endpointReshapeScope } from '../../lib/interaction/scope'
+import { useRoomHandleDrag, wallPushHandles } from '../../lib/room-handle-drag'
 import { sfxEmitter } from '../../lib/sfx-bus'
+import { intersectSpatialDragPlane, spatialDragLocalY } from '../../lib/spatial-drag-plane'
+import { getSpatialPointerId, spatialPointerInput } from '../../lib/spatial-pointer-input'
 import useEditor, { isGridSnapActive, isMagneticSnapActive } from '../../store/use-editor'
 import useInteractionScope, {
   useEndpointReshape,
@@ -67,6 +70,7 @@ import {
   NO_RAYCAST,
   useInvisibleHitAreaMaterial,
 } from './node-arrow-handles'
+import { WallPushArrow } from './wall-push-arrow'
 
 const HANDLE_OFFSET = 0.27
 const HANDLE_MIN_OFFSET = 0.33
@@ -147,6 +151,7 @@ export function WallMoveSideHandles() {
   const movingNode = useMovingNode()
   const endpointReshape = useEndpointReshape()
   const isCurveReshape = useIsCurveReshape()
+  const isPushing = useRoomHandleDrag((state) => state.drag?.kind === 'push')
 
   const selectedId = selectedIds.length === 1 ? selectedIds[0] : null
   // Walls still use this legacy handle renderer. Fences retain their registry
@@ -162,9 +167,10 @@ export function WallMoveSideHandles() {
     mode !== 'delete' &&
     !movingNode &&
     !endpointReshape &&
-    !isCurveReshape
+    !isCurveReshape &&
+    !isPushing
 
-  if (!shouldRender || !selectedNode) return null
+  if (!(shouldRender && selectedNode)) return null
 
   return selectedNode.type === 'wall' ? (
     <WallMoveSideHandlesForWall wall={selectedNode} />
@@ -219,16 +225,17 @@ function WallMoveSideHandlesForWall({ wall }: { wall: WallNode }) {
   }, [wall.parentId])
 
   const baseElevation = getWallBaseElevationForNodes(effectiveWall, nodes)
-  const handles = useMemo(() => getWallMoveHandles(effectiveWall, nodes), [effectiveWall, nodes])
+  const handles = useMemo(() => wallPushHandles(effectiveWall, nodes), [effectiveWall, nodes])
 
-  if (!levelObject || handles.length === 0) return null
+  const levelId = wall.parentId
+  if (!(levelObject && levelId) || handles.length === 0) return null
 
   return createPortal(
     <>
+      {handles.map((handle) => (
+        <WallPushArrow handle={handle} key={handle.key} levelId={levelId} />
+      ))}
       <group position={[0, baseElevation, 0]}>
-        {handles.map((handle) => (
-          <WallMoveArrowHandle handle={handle} key={handle.key} wall={effectiveWall} />
-        ))}
         <WallHeightArrowHandle wall={effectiveWall} />
         <StructureThicknessHandle
           baseElevation={baseElevation}
@@ -292,7 +299,7 @@ function StructureThicknessHandle({
       ? (node.height ?? 1.8)
       : getWallEffectiveHeightForNodes(node, useScene.getState().nodes)
   const outward = new Vector2(frame.normal.x * side, frame.normal.y * side)
-  const faceOffset = thickness / 2 + 0.006
+  const faceOffset = getWallLocalFaceZ({ ...node, thickness }, side > 0 ? 'a' : 'b') * side + 0.006
   const position: [number, number, number] = [
     frame.point.x + outward.x * faceOffset,
     structureHeight / 2,
@@ -369,11 +376,18 @@ function StructureThicknessHandle({
         initialNode.type === 'fence'
           ? (initialNode.thickness ?? 0.08)
           : getWallThickness(initialNode)
+      const initialFaceOffset =
+        getWallLocalFaceZ(
+          { ...initialNode, thickness: initialStructureThickness },
+          side > 0 ? 'a' : 'b',
+        ) *
+          side +
+        0.006
       const minimumThickness = initialNode.type === 'fence' ? 0.03 : MIN_WALL_THICKNESS
       const localOrigin = new Vector3(
-        initialFrame.point.x + localAxis.x * (initialStructureThickness / 2 + 0.006),
+        initialFrame.point.x + localAxis.x * initialFaceOffset,
         baseElevation + initialStructureHeight / 2,
-        initialFrame.point.y + localAxis.z * (initialStructureThickness / 2 + 0.006),
+        initialFrame.point.y + localAxis.z * initialFaceOffset,
       )
       const worldOrigin = localOrigin.clone().applyMatrix4(rideObject.matrixWorld)
       const worldAxisEnd = localOrigin.clone().add(localAxis).applyMatrix4(rideObject.matrixWorld)
@@ -639,13 +653,14 @@ function WallCornerLeaderHandle({ wall, endpoint }: { wall: WallNode; endpoint:
     }
   })
 
-  useEffect(() => {
-    return () => {
+  useEffect(
+    () => () => {
       if (document.body.style.cursor === 'grab' || document.body.style.cursor === 'grabbing') {
         document.body.style.cursor = ''
       }
-    }
-  }, [])
+    },
+    [],
+  )
 
   const activateEndpointMove = (event: ThreeEvent<PointerEvent>) => {
     if (event.button !== 0) return
@@ -769,7 +784,9 @@ function WallBaseElevationHandle({
       const midpointWorld = new Vector3(midpoint[0], initialBase, midpoint[1]).applyMatrix4(
         levelObject.matrixWorld,
       )
-      const planeNormal = new Vector3().subVectors(camera.position, midpointWorld).setY(0)
+      const planeNormal = new Vector3()
+        .subVectors(camera.getWorldPosition(new Vector3()), midpointWorld)
+        .setY(0)
       if (planeNormal.lengthSq() === 0) return null
       planeNormal.normalize()
       const plane = new Plane().setFromNormalAndCoplanarPoint(planeNormal, midpointWorld)
@@ -873,14 +890,15 @@ function WallHeightArrowHandle({ wall }: { wall: WallNode }) {
     arrowMaterial.color.set(isHovered ? ARROW_HOVER_COLOR : ARROW_COLOR)
   }, [arrowMaterial, isHovered])
 
-  useEffect(() => {
-    return () => {
+  useEffect(
+    () => () => {
       if (document.body.style.cursor === 'ns-resize') {
         document.body.style.cursor = ''
       }
       dragCleanupRef.current?.()
-    }
-  }, [])
+    },
+    [],
+  )
 
   useEffect(() => () => arrowGeometry.dispose(), [arrowGeometry])
   useEffect(() => () => hitGeometry.dispose(), [hitGeometry])
@@ -889,7 +907,7 @@ function WallHeightArrowHandle({ wall }: { wall: WallNode }) {
   // Sit on the visual centre of the wall — for curved walls that's the
   // arc apex at t=0.5, not the chord midpoint. Use the curve tangent for
   // the yaw so the arrow's local frame matches the wall direction at the
-  // apex, consistent with `getWallMoveHandles`.
+  // apex, consistent with `wallPushHandles`.
   const curveFrame = isCurvedWall(wall) ? getWallCurveFrameAt(wall, 0.5) : null
   const midX = curveFrame ? curveFrame.point.x : (wall.start[0] + wall.end[0]) / 2
   const midZ = curveFrame ? curveFrame.point.y : (wall.start[1] + wall.end[1]) / 2
@@ -908,16 +926,12 @@ function WallHeightArrowHandle({ wall }: { wall: WallNode }) {
     const levelObject = wall.parentId ? sceneRegistry.nodes.get(wall.parentId) : null
     if (!levelObject) return
 
-    // Vertical plane through the wall midpoint whose normal points toward
-    // the camera (projected to horizontal). Raycasting against it converts
-    // pointer movement into a world-space Y value.
+    levelObject.updateWorldMatrix(true, false)
+    const worldToLocal = levelObject.matrixWorld.clone().invert()
     const midpointWorld = new Vector3(midX, 0, midZ).applyMatrix4(levelObject.matrixWorld)
-    const planeNormal = new Vector3().subVectors(camera.position, midpointWorld).setY(0)
-    if (planeNormal.lengthSq() === 0) return
-    planeNormal.normalize()
-    const plane = new Plane().setFromNormalAndCoplanarPoint(planeNormal, midpointWorld)
-
     const ndc = new Vector2()
+    const spatialPointerId = getSpatialPointerId(event.nativeEvent)
+    const spatialRay = spatialPointerId ? event.ray.clone() : null
     const setNDC = (clientX: number, clientY: number) => {
       const rect = gl.domElement.getBoundingClientRect()
       ndc.set(
@@ -926,17 +940,39 @@ function WallHeightArrowHandle({ wall }: { wall: WallNode }) {
       )
     }
 
-    setNDC(event.nativeEvent.clientX, event.nativeEvent.clientY)
-    raycaster.setFromCamera(ndc, camera)
-    const hit = new Vector3()
-    if (!raycaster.ray.intersectPlane(plane, hit)) return
+    let plane: Plane | null = null
+    let initialY: number
+    if (spatialRay) {
+      const worldUp = new Vector3(0, 1, 0).transformDirection(levelObject.matrixWorld)
+      const axisPoint = new Vector3()
+      const spatialRayLocalY = (ray: Ray) => {
+        const axisParameter = closestAxisParameterToRay(midpointWorld, worldUp, ray)
+        axisPoint.copy(midpointWorld).addScaledVector(worldUp, axisParameter)
+        return spatialDragLocalY(axisPoint, worldToLocal)
+      }
+      initialY = spatialRayLocalY(spatialRay)
+    } else {
+      // A camera-facing vertical plane gives desktop pointer movement a stable
+      // world-space height. Spatial pointers use the closest point on the
+      // wall's vertical axis instead, which remains defined for vertical rays.
+      const planeNormal = new Vector3()
+        .subVectors(camera.getWorldPosition(new Vector3()), midpointWorld)
+        .setY(0)
+      if (planeNormal.lengthSq() === 0) return
+      plane = new Plane().setFromNormalAndCoplanarPoint(planeNormal.normalize(), midpointWorld)
+      setNDC(event.nativeEvent.clientX, event.nativeEvent.clientY)
+      raycaster.setFromCamera(ndc, camera)
+      const hit = new Vector3()
+      if (!intersectSpatialDragPlane(raycaster.ray, plane, hit)) return
+      initialY = spatialDragLocalY(hit, worldToLocal)
+    }
 
     // Dragging the top makes the wall custom-height; seed from the resolved
     // effective height so a plane-bound wall's drag starts at its real top.
     const initialHeight = getWallEffectiveHeightForNodes(wall, useScene.getState().nodes)
-    const initialY = hit.y
     const wallId = wall.id as AnyNodeId
     let pendingHeight = initialHeight
+    let releaseSpatialCapture: (() => void) | null = null
 
     document.body.style.cursor = 'ns-resize'
     sfxEmitter.emit('sfx:item-pick')
@@ -954,9 +990,23 @@ function WallHeightArrowHandle({ wall }: { wall: WallNode }) {
     const onMove = (e: PointerEvent) => {
       setNDC(e.clientX, e.clientY)
       raycaster.setFromCamera(ndc, camera)
-      const intersection = new Vector3()
-      if (!raycaster.ray.intersectPlane(plane, intersection)) return
-      const newHeight = Math.max(MIN_WALL_HEIGHT, initialHeight + (intersection.y - initialY))
+      applyRay(raycaster.ray)
+    }
+    const applyRay = (ray: Ray) => {
+      let currentY: number
+      if (spatialRay) {
+        const worldUp = new Vector3(0, 1, 0).transformDirection(levelObject.matrixWorld)
+        const axisParameter = closestAxisParameterToRay(midpointWorld, worldUp, ray)
+        const axisPoint = midpointWorld.clone().addScaledVector(worldUp, axisParameter)
+        currentY = spatialDragLocalY(axisPoint, worldToLocal)
+      } else {
+        if (!plane) return
+        const intersection = new Vector3()
+        if (!intersectSpatialDragPlane(ray, plane, intersection)) return
+        currentY = spatialDragLocalY(intersection, worldToLocal)
+      }
+      const newHeight = Math.max(MIN_WALL_HEIGHT, initialHeight + (currentY - initialY))
+      if (Math.abs(newHeight - pendingHeight) < 1e-6) return
       pendingHeight = newHeight
       useLiveNodeOverrides.getState().set(wallId, { height: newHeight })
       useScene.getState().markDirty(wallId)
@@ -967,6 +1017,8 @@ function WallHeightArrowHandle({ wall }: { wall: WallNode }) {
       window.removeEventListener('pointerup', onUp)
       window.removeEventListener('pointercancel', onCancel)
       window.removeEventListener('keydown', onKeyDown, true)
+      releaseSpatialCapture?.()
+      releaseSpatialCapture = null
       if (document.body.style.cursor === 'ns-resize') {
         document.body.style.cursor = ''
       }
@@ -981,6 +1033,7 @@ function WallHeightArrowHandle({ wall }: { wall: WallNode }) {
       // Commit: write the final override-merged value to zustand once
       // (tracked, undoable), then drop the override so the renderer
       // falls back to the scene store.
+      useScene.temporal.getState().resume()
       if (pendingHeight !== initialHeight) {
         useScene.getState().updateNode(wallId, { height: pendingHeight })
       }
@@ -1006,10 +1059,21 @@ function WallHeightArrowHandle({ wall }: { wall: WallNode }) {
       onCancel()
     }
 
-    dragCleanupRef.current = cleanup
-    window.addEventListener('pointermove', onMove)
-    window.addEventListener('pointerup', onUp)
-    window.addEventListener('pointercancel', onCancel)
+    dragCleanupRef.current = onCancel
+    if (spatialPointerId && spatialRay) {
+      releaseSpatialCapture = spatialPointerInput.capture(spatialPointerId, {
+        onMove: (ray) => {
+          spatialRay.copy(ray)
+          applyRay(spatialRay)
+        },
+        onRelease: onUp,
+        onCancel,
+      })
+    } else {
+      window.addEventListener('pointermove', onMove)
+      window.addEventListener('pointerup', onUp)
+      window.addEventListener('pointercancel', onCancel)
+    }
     window.addEventListener('keydown', onKeyDown, true)
   }
 
@@ -1035,7 +1099,10 @@ function WallHeightArrowHandle({ wall }: { wall: WallNode }) {
           scale={baseScale}
         />
         <mesh
-          // Geometry-as-prop + frustumCulled={false} — see WallMoveArrowHandle.
+          // Pass geometry as a prop (not `<primitive attach="geometry">`): with
+          // `frustumCulled={false}` the attach path draws R3F's empty default
+          // geometry on the first frame and WebGPU flags "Vertex buffer slot 0
+          // ... was not set".
           frustumCulled={false}
           geometry={arrowGeometry}
           material={arrowMaterial}
@@ -1048,7 +1115,7 @@ function WallHeightArrowHandle({ wall }: { wall: WallNode }) {
   )
 }
 
-function WallMoveArrowHandle({ wall, handle }: { wall: WallNode; handle: WallMoveHandle }) {
+function FenceMoveArrowHandle({ fence, handle }: { fence: FenceNode; handle: WallMoveHandle }) {
   const [isHovered, setIsHovered] = useState(false)
   const arrowGeometry = useMemo(() => createArrowHandleGeometry(), [])
   const hitGeometry = useMemo(() => createArrowHitAreaGeometry(), [])
@@ -1068,7 +1135,6 @@ function WallMoveArrowHandle({ wall, handle }: { wall: WallNode; handle: WallMov
   const { camera } = useThree()
 
   const zoom = camera instanceof OrthographicCamera ? 1 / camera.zoom : 1
-
   const baseScale = zoom * ARROW_SCALE
   const scale = (isHovered ? 1.12 : 1) * baseScale
 
@@ -1076,103 +1142,14 @@ function WallMoveArrowHandle({ wall, handle }: { wall: WallNode; handle: WallMov
     arrowMaterial.color.set(isHovered ? ARROW_HOVER_COLOR : ARROW_COLOR)
   }, [arrowMaterial, isHovered])
 
-  useEffect(() => {
-    return () => {
+  useEffect(
+    () => () => {
       if (document.body.style.cursor === 'grab' || document.body.style.cursor === 'grabbing') {
         document.body.style.cursor = ''
       }
-    }
-  }, [])
-
-  useEffect(() => () => arrowGeometry.dispose(), [arrowGeometry])
-  useEffect(() => () => hitGeometry.dispose(), [hitGeometry])
-  useEffect(() => () => arrowMaterial.dispose(), [arrowMaterial])
-
-  const activateWallMove = (event: ThreeEvent<PointerEvent>) => {
-    if (event.button !== 0) return
-    event.stopPropagation()
-    suppressBoxSelectForPointer(event)
-    document.body.style.cursor = 'grabbing'
-
-    sfxEmitter.emit('sfx:item-pick')
-    useEditor.getState().setMovingNode(wall)
-    useInteractionScope.getState().endIf((s) => s.kind === 'reshaping' && s.reshape === 'endpoint')
-    useInteractionScope.getState().endIf((s) => s.kind === 'reshaping' && s.reshape === 'curve')
-    // Keep the wall selected so it stays the active item once the move
-    // commits; the `!movingNode` guard on the handles hides them mid-drag.
-  }
-
-  return (
-    <group position={handle.position} rotation={[0, handle.rotationY, 0]}>
-      <InvisibleHandleHitArea
-        geometry={hitGeometry}
-        material={hitMaterial}
-        onPointerDown={activateWallMove}
-        onPointerEnter={(event) => {
-          event.stopPropagation()
-          setIsHovered(true)
-          document.body.style.cursor = 'grab'
-        }}
-        onPointerLeave={(event) => {
-          event.stopPropagation()
-          setIsHovered(false)
-          if (document.body.style.cursor === 'grab') {
-            document.body.style.cursor = ''
-          }
-        }}
-        scale={baseScale}
-      />
-      <mesh
-        // Pass geometry as a prop (not `<primitive attach="geometry">`)
-        // so the mesh is never rendered with R3F's default empty
-        // `BufferGeometry`. Combined with `frustumCulled={false}`, the
-        // primitive-attach path emits a `Draw(0, 1, 0, 0)` on the first
-        // frame and WebGPU flags "Vertex buffer slot 0 ... was not set".
-        frustumCulled={false}
-        geometry={arrowGeometry}
-        material={arrowMaterial}
-        raycast={NO_RAYCAST}
-        renderOrder={1002}
-        scale={scale}
-      />
-    </group>
-  )
-}
-
-function FenceMoveArrowHandle({ fence, handle }: { fence: FenceNode; handle: WallMoveHandle }) {
-  const [isHovered, setIsHovered] = useState(false)
-  const arrowGeometry = useMemo(() => createArrowHandleGeometry(), [])
-  const hitGeometry = useMemo(() => createArrowHitAreaGeometry(), [])
-  const hitMaterial = useInvisibleHitAreaMaterial()
-  const arrowMaterial = useMemo(
-    () =>
-      new MeshBasicNodeMaterial({
-        color: new Color(ARROW_COLOR),
-        side: DoubleSide,
-        depthTest: false,
-        depthWrite: false,
-        transparent: true,
-        opacity: 1,
-      }),
+    },
     [],
   )
-  const { camera } = useThree()
-
-  const zoom = camera instanceof OrthographicCamera ? 1 / camera.zoom : 1
-  const baseScale = zoom * ARROW_SCALE
-  const scale = (isHovered ? 1.12 : 1) * baseScale
-
-  useEffect(() => {
-    arrowMaterial.color.set(isHovered ? ARROW_HOVER_COLOR : ARROW_COLOR)
-  }, [arrowMaterial, isHovered])
-
-  useEffect(() => {
-    return () => {
-      if (document.body.style.cursor === 'grab' || document.body.style.cursor === 'grabbing') {
-        document.body.style.cursor = ''
-      }
-    }
-  }, [])
 
   useEffect(() => () => arrowGeometry.dispose(), [arrowGeometry])
   useEffect(() => () => hitGeometry.dispose(), [hitGeometry])
@@ -1212,7 +1189,7 @@ function FenceMoveArrowHandle({ fence, handle }: { fence: FenceNode; handle: Wal
         scale={baseScale}
       />
       <mesh
-        // Pass geometry as a prop — see WallMoveArrowHandle for the
+        // Pass geometry as a prop — see WallHeightArrowHandle for the
         // WebGPU "Vertex buffer slot 0 ... was not set" rationale.
         frustumCulled={false}
         geometry={arrowGeometry}
@@ -1225,32 +1202,6 @@ function FenceMoveArrowHandle({ fence, handle }: { fence: FenceNode; handle: Wal
   )
 }
 
-function getWallMoveHandles(wall: WallNode, nodes: Record<string, AnyNode>): WallMoveHandle[] {
-  const dx = wall.end[0] - wall.start[0]
-  const dz = wall.end[1] - wall.start[1]
-  const length = Math.hypot(dx, dz)
-
-  if (length < 1e-6) {
-    return []
-  }
-
-  const frame = isCurvedWall(wall) ? getWallCurveFrameAt(wall, 0.5) : null
-  const normal: [number, number] = frame
-    ? [frame.normal.x, frame.normal.y]
-    : [-dz / length, dx / length]
-  const midpoint: [number, number] = frame
-    ? [frame.point.x, frame.point.y]
-    : [(wall.start[0] + wall.end[0]) / 2, (wall.start[1] + wall.end[1]) / 2]
-  const wallHeight = getWallEffectiveHeightForNodes(wall, nodes)
-  const handleHeight = Math.max(wallHeight - HANDLE_TOP_INSET, HANDLE_MIN_HEIGHT)
-  const offset = Math.max(getWallThickness(wall) / 2 + HANDLE_OFFSET, HANDLE_MIN_OFFSET)
-
-  return [
-    buildWallMoveHandle('front', midpoint, normal, offset, handleHeight),
-    buildWallMoveHandle('back', midpoint, [-normal[0], -normal[1]], offset, handleHeight),
-  ]
-}
-
 function WallMoveSideHandlesForFence({ fence }: { fence: FenceNode }) {
   const [levelObject, setLevelObject] = useState<Object3D | null>(() =>
     fence.parentId ? (sceneRegistry.nodes.get(fence.parentId) ?? null) : null,

package/src/components/editor/wall-opening-highlights.tsx

@@ -11,10 +11,10 @@ import {
   type Group,
   type Mesh,
   MeshBasicMaterial,
-  Vector3,
 } from 'three'
 import { LineBasicNodeMaterial, MeshBasicNodeMaterial } from 'three/webgpu'
 import { EDITOR_LAYER } from '../../lib/constants'
+import { copyOverlayWorldTransform } from '../../lib/overlay-transform'
 
 // How far the outline sits outside the opening's own extents, so it reads as
 // a frame *around* the opening rather than coinciding with its edges.
@@ -23,7 +23,6 @@ const PAD = 0.05
 const ACCENT = 0x83_81_ed
 
 const NO_RAYCAST = () => null
-const scratchScale = new Vector3()
 
 // Indigo accent matching the resize-arrow handles — deliberately distinct
 // from the white selection outline so the highlight reads as "editable child
@@ -182,7 +181,7 @@ function OpeningHighlight({ openingId, depth }: { openingId: string; depth: numb
       return
     }
     group.visible = true
-    obj.matrixWorld.decompose(group.position, group.quaternion, scratchScale)
+    copyOverlayWorldTransform(obj, group)
   })
 
   if (!isOpening || !outlineGeometry || !fillGeometry) return null

package/src/components/editor/wall-push-arrow.tsx

@@ -0,0 +1,92 @@
+'use client'
+
+import { sceneRegistry } from '@pascal-app/core'
+import { type ThreeEvent, useThree } from '@react-three/fiber'
+import { useState } from 'react'
+import { OrthographicCamera, Plane, type Ray, Vector2, Vector3 } from 'three'
+import { runWallPushDrag, type WallPushHandle } from '../../lib/room-handle-drag'
+import { getSpatialPointerId } from '../../lib/spatial-pointer-input'
+import { suppressBoxSelectForPointer } from '../tools/select/box-select-state'
+import { ARROW_SCALE, HandleArrow } from './handles/handle-arrow'
+
+/**
+ * The push/pull arrow of a wall stretch — a selected wall's side arrows and a
+ * selected room's boundary arrows are this one component, driven by the one
+ * `runWallPushDrag`. Rendered in the level frame. `zoneId` binds a room's
+ * arrow to its room.
+ */
+export function WallPushArrow({
+  handle,
+  levelId,
+  zoneId,
+}: {
+  handle: WallPushHandle
+  levelId: string
+  zoneId?: string
+}) {
+  const [hover, setHover] = useState(false)
+  const { camera, raycaster, gl } = useThree()
+  const zoom = camera instanceof OrthographicCamera ? 1 / camera.zoom : 1
+  const onPointerDown = (event: ThreeEvent<PointerEvent>) => {
+    if (event.button !== 0) return
+    event.stopPropagation()
+    suppressBoxSelectForPointer(event)
+    const level = sceneRegistry.nodes.get(levelId)
+    if (!level) return
+    level.updateWorldMatrix(true, false)
+    const toLocal = level.matrixWorld.clone().invert()
+    const origin = new Vector3(handle.position[0], handle.height, handle.position[1]).applyMatrix4(
+      level.matrixWorld,
+    )
+    const up = new Vector3(0, 1, 0).transformDirection(level.matrixWorld)
+    const plane = new Plane().setFromNormalAndCoplanarPoint(up, origin)
+    const along = (ray: Ray) => {
+      const hit = ray.intersectPlane(plane, new Vector3())
+      if (!hit) return null
+      const local = hit.applyMatrix4(toLocal)
+      return (
+        (local.x - handle.position[0]) * handle.outward[0] +
+        (local.z - handle.position[1]) * handle.outward[1]
+      )
+    }
+    const rayAt = (clientX: number, clientY: number) => {
+      const rect = gl.domElement.getBoundingClientRect()
+      raycaster.setFromCamera(
+        new Vector2(
+          ((clientX - rect.left) / rect.width) * 2 - 1,
+          -((clientY - rect.top) / rect.height) * 2 + 1,
+        ),
+        camera,
+      )
+      return raycaster.ray
+    }
+    const spatialPointerId = getSpatialPointerId(event.nativeEvent)
+    const from = along(
+      spatialPointerId ? event.ray : rayAt(event.nativeEvent.clientX, event.nativeEvent.clientY),
+    )
+    if (from === null) return
+    runWallPushDrag({
+      handle,
+      levelId,
+      zoneId,
+      from,
+      along: (clientX, clientY) => along(rayAt(clientX, clientY)),
+      spatial: spatialPointerId ? { pointerId: spatialPointerId, along } : undefined,
+    })
+  }
+  return (
+    <HandleArrow
+      cursor="grab"
+      hover={hover}
+      onHoverChange={setHover}
+      onPointerDown={onPointerDown}
+      placement={{
+        position: [handle.position[0], handle.height, handle.position[1]],
+        rotation: [0, Math.atan2(-handle.outward[1], handle.outward[0]), 0],
+        baseScale: zoom * ARROW_SCALE,
+      }}
+      shape="chevron"
+      thin
+    />
+  )
+}