@pascal-app/editor 1.0.1 → 1.0.3

package/src/components/editor/group-transform-shared.test.ts

@@ -1,9 +1,24 @@
 import { beforeAll, describe, expect, test } from 'bun:test'
-import { type AnyNode, type AnyNodeDefinition, nodeRegistry, registerNode } from '@pascal-app/core'
+import {
+  type AnyNode,
+  type AnyNodeDefinition,
+  type AnyNodeId,
+  CeilingNode,
+  LevelNode,
+  nodeRegistry,
+  registerNode,
+  SlabNode,
+  sceneRegistry,
+  useScene,
+  WallNode,
+} from '@pascal-app/core'
+import { BoxGeometry, Group, Mesh } from 'three'
 import { z } from 'zod'
 import {
   classifyParticipant,
   collectParticipants,
+  computeGroupPlanBox,
+  groupPlanBounds,
   planBoundsCenter,
   rotateGroupPatches,
   rotateGroupSnapshots,
@@ -472,3 +487,113 @@ describe('group transform participants', () => {
     ])
   })
 })
+
+describe('group plan bounds', () => {
+  const withNodes = (nodes: AnyNode[], run: () => void) => {
+    const saved = useScene.getState().nodes
+    useScene.setState({ nodes: Object.fromEntries(nodes.map((n) => [n.id, n])) as typeof saved })
+    try {
+      run()
+    } finally {
+      useScene.setState({ nodes: saved })
+    }
+  }
+
+  test('a placed object measures its built mesh in the level frame, or falls back to its anchor', () => {
+    const level = new Group()
+    level.position.set(10, 0, -4)
+    level.rotation.y = Math.PI / 5
+    const item = new Mesh(new BoxGeometry(1, 1, 1))
+    item.position.set(2, 0.5, 0)
+    level.add(item)
+    level.updateWorldMatrix(true, true)
+    const registry = sceneRegistry.nodes as unknown as Map<string, unknown>
+    registry.set('item_plan_bounds_test', item)
+    const start = {
+      id: 'item_plan_bounds_test' as AnyNodeId,
+      kind: 'vec3' as const,
+      position: [2, 0, 0] as [number, number, number],
+      rotation: [0, 0, 0] as [number, number, number],
+    }
+    try {
+      const frameInv = level.matrixWorld.clone().invert()
+      const built = groupPlanBounds([start], frameInv)
+      expect(built?.minX).toBeCloseTo(1.5)
+      expect(built?.maxX).toBeCloseTo(2.5)
+      expect(built?.minZ).toBeCloseTo(-0.5)
+      expect(built?.maxZ).toBeCloseTo(0.5)
+      // Unbuilt while the 3D scene is paused: the placeholder must not count.
+      item.geometry.userData.placeholder = true
+      expect(groupPlanBounds([start], frameInv)).toEqual({ minX: 2, minZ: 0, maxX: 2, maxZ: 0 })
+    } finally {
+      registry.delete('item_plan_bounds_test')
+    }
+  })
+
+  test('hugs the selected wall outlines; a connected wall stays outside', () => {
+    const level = LevelNode.parse({ children: [] })
+    const bottom = WallNode.parse({
+      parentId: level.id,
+      start: [0, 0],
+      end: [2.4, 0],
+      thickness: 0.2,
+    })
+    const side = WallNode.parse({
+      parentId: level.id,
+      start: [2.4, 0],
+      end: [2.4, 5.3],
+      thickness: 0.2,
+    })
+    const neighbour = WallNode.parse({
+      parentId: level.id,
+      start: [2.4, 5.3],
+      end: [8, 5.3],
+      thickness: 0.2,
+    })
+    withNodes([level, bottom, side, neighbour], () => {
+      const plan = computeGroupPlanBox([bottom.id, side.id], level.id)
+      expect(plan?.minX).toBeCloseTo(0)
+      expect(plan?.maxX).toBeCloseTo(2.5)
+      expect(plan?.minZ).toBeCloseTo(-0.1)
+      expect(plan?.maxZ).toBeLessThan(5.5)
+      expect(plan?.maxX).toBeLessThan(8)
+    })
+  })
+
+  test('two walls with the room floor and ceiling: the box is the drawn outlines, never the meshes', () => {
+    // A user's selection whose box came out 13 m wide in 2D-only view.
+    const level = LevelNode.parse({ id: 'level_vvkg048zziz9ktiy', children: [] })
+    const room: [number, number][] = [
+      [-3.6221682640435353, -9.037533979512114],
+      [-6.21504662384804, -8.29671159099654],
+      [-5.712152486161543, -6.5365821090938],
+      [-5.712152486161543, -5],
+      [-8.223564365687542, -5],
+      [-8.223564365687542, -6.5365821090938],
+      [-10.712152486161543, -6.5365821090938],
+      [-11.712152486161543, -8.5365821090938],
+      [-4.119274126357038, -10.777404497609373],
+    ]
+    const wall15 = WallNode.parse({
+      parentId: level.id,
+      start: [-10.712152486161543, -6.5365821090938],
+      end: [-11.712152486161543, -8.5365821090938],
+    })
+    const wall12 = WallNode.parse({
+      parentId: level.id,
+      start: [-11.712152486161543, -8.5365821090938],
+      end: [-6.712152486161543, -10.0365821090938],
+    })
+    const slab = SlabNode.parse({ parentId: level.id, polygon: room, elevation: 0.05 })
+    const ceiling = CeilingNode.parse({ parentId: level.id, polygon: room, height: 2.49 })
+    withNodes([level, wall15, wall12, slab, ceiling], () => {
+      const plan = computeGroupPlanBox([wall15.id, ceiling.id, slab.id, wall12.id], level.id)!
+      expect(plan.minX).toBeLessThan(-11.71)
+      expect(plan.minX).toBeGreaterThan(-11.95)
+      expect(plan.maxX).toBeCloseTo(-3.62, 1)
+      expect(plan.minZ).toBeCloseTo(-10.78, 1)
+      expect(plan.maxZ).toBeCloseTo(-5, 1)
+      expect(plan.maxX - plan.minX).toBeLessThan(8.4)
+    })
+  })
+})

package/src/components/editor/group-transform-shared.ts

@@ -1,11 +1,15 @@
 import {
   type AnyNode,
   type AnyNodeId,
+  calculateLevelMiters,
+  getWallPlanFootprint,
   nodeRegistry,
   resolveBuildingForLevel,
   sceneRegistry,
+  useScene,
+  type WallNode,
 } from '@pascal-app/core'
-import { Box3, Matrix4 } from 'three'
+import { Box3, type BufferGeometry, Matrix4, type Object3D, Vector3 } from 'three'
 
 // Shared plumbing for the group transform gizmos (rotate + move). Both operate
 // on the same multi-selection: classify each participant by how its placement
@@ -242,48 +246,6 @@ export function collectParticipants(
   return { starts, links }
 }
 
-// Grow a selection to the full connected component of walls/fences: any
-// endpoint node transitively reachable through shared junctions from a selected
-// endpoint node joins in, so the whole rigid structure transforms as one piece
-// (rather than tearing/stretching at the boundary). Non-endpoint selections
-// (items, columns) pass through unchanged.
-export function expandToComponent(
-  selectedIds: string[],
-  sceneNodes: Record<string, AnyNode | undefined>,
-  levelId: string | null,
-): string[] {
-  const endpoints: { id: string; start: Vec2; end: Vec2 }[] = []
-  for (const [id, node] of Object.entries(sceneNodes)) {
-    if (classifyParticipant(node, levelId, sceneNodes) === 'endpoint') {
-      const n = node as AnyNode & { start: Vec2; end: Vec2 }
-      endpoints.push({ id, start: [n.start[0], n.start[1]], end: [n.end[0], n.end[1]] })
-    }
-  }
-  const included = new Set(selectedIds)
-  if (!endpoints.some((e) => included.has(e.id))) return selectedIds
-
-  let changed = true
-  while (changed) {
-    changed = false
-    for (const e of endpoints) {
-      if (included.has(e.id)) continue
-      const touches = endpoints.some(
-        (o) =>
-          included.has(o.id) &&
-          (nearPoint(e.start, o.start) ||
-            nearPoint(e.start, o.end) ||
-            nearPoint(e.end, o.start) ||
-            nearPoint(e.end, o.end)),
-      )
-      if (touches) {
-        included.add(e.id)
-        changed = true
-      }
-    }
-  }
-  return Array.from(included)
-}
-
 // Per-node field patch, keyed for `useLiveNodeOverrides.setMany` during a live
 // preview and for the single batched `updateNodes` on commit.
 export type GroupPatch = readonly [AnyNodeId, Record<string, unknown>]
@@ -389,9 +351,24 @@ export function rotateGroupSnapshots(
 
 export type GroupPlanBounds = { minX: number; minZ: number; maxX: number; maxZ: number }
 
-// Level-frame XZ extents of the participant DATA — the mesh-free sibling of
-// `computeGroupBox`, used when meshes aren't mounted yet.
-function participantExtents(starts: ParticipantStart[]): GroupPlanBounds | null {
+const planCorner = new Vector3()
+const planMatrix = new Matrix4()
+
+/**
+ * The selection's footprint in the level frame — the plan's own coordinates,
+ * measured from node data wherever the plan draws from data: walls by their
+ * mitered outline, polygon hosts (slab, ceiling, zone) by their polygon, fences
+ * by their run. Only placed objects (items, columns, stairs…) measure their
+ * meshes: bounds go through `frameInv × matrixWorld` (a world box can't be
+ * carried into a rotated building's frame), placeholders — unbuilt while the
+ * 3D scene is paused in 2D-only view — are skipped, and a node with no built
+ * mesh falls back to its anchor.
+ */
+export function groupPlanBounds(
+  starts: ParticipantStart[],
+  frameInv: Matrix4,
+): GroupPlanBounds | null {
+  const nodes = useScene.getState().nodes
   let minX = Number.POSITIVE_INFINITY
   let minZ = Number.POSITIVE_INFINITY
   let maxX = Number.NEGATIVE_INFINITY
@@ -402,43 +379,72 @@ function participantExtents(starts: ParticipantStart[]): GroupPlanBounds | null
     maxX = Math.max(maxX, x)
     maxZ = Math.max(maxZ, z)
   }
+  const miters = new Map<string | null, ReturnType<typeof calculateLevelMiters>>()
+  const wallOutline = (wall: WallNode) => {
+    const levelId = wall.parentId ?? null
+    let levelMiters = miters.get(levelId)
+    if (!levelMiters) {
+      levelMiters = calculateLevelMiters(
+        Object.values(nodes).filter(
+          (node): node is WallNode => node?.type === 'wall' && (node.parentId ?? null) === levelId,
+        ),
+      )
+      miters.set(levelId, levelMiters)
+    }
+    return getWallPlanFootprint(wall, levelMiters)
+  }
+  const measureMeshes = (id: string) => {
+    const obj = sceneRegistry.nodes.get(id as AnyNodeId)
+    if (!obj) return false
+    obj.updateWorldMatrix(true, true)
+    let found = false
+    obj.traverse((child: Object3D) => {
+      const geometry = (child as Object3D & { geometry?: BufferGeometry }).geometry
+      if (!child.visible || !geometry || geometry.userData.placeholder) return
+      // Always fresh: geometries rebuilt in place keep a stale cached box.
+      geometry.computeBoundingBox()
+      const bounds = geometry.boundingBox
+      if (!bounds || bounds.isEmpty()) return
+      planMatrix.multiplyMatrices(frameInv, child.matrixWorld)
+      for (let corner = 0; corner < 8; corner++) {
+        planCorner
+          .set(
+            corner & 1 ? bounds.max.x : bounds.min.x,
+            corner & 2 ? bounds.max.y : bounds.min.y,
+            corner & 4 ? bounds.max.z : bounds.min.z,
+          )
+          .applyMatrix4(planMatrix)
+        reach(planCorner.x, planCorner.z)
+      }
+      found = true
+    })
+    return found
+  }
   for (const s of starts) {
+    const node = nodes[s.id]
     if (s.kind === 'endpoint') {
+      const outline = node?.type === 'wall' ? wallOutline(node) : []
+      if (outline.length > 0) {
+        for (const point of outline) reach(point.x, point.y)
+        continue
+      }
       reach(s.start[0], s.start[1])
       reach(s.end[0], s.end[1])
+      const path = (node as { path?: unknown } | undefined)?.path
+      if (isVec2Array(path)) for (const [x, z] of path) reach(x, z)
     } else if (s.kind === 'polygon') {
-      for (const [x, z] of s.polygon) {
-        reach(x, z)
-      }
-    } else {
+      for (const [x, z] of s.polygon) reach(x, z)
+    } else if (!measureMeshes(s.id)) {
       reach(s.position[0], s.position[2])
     }
   }
-  if (!Number.isFinite(minX)) return null
-  return { minX, minZ, maxX, maxZ }
+  return Number.isFinite(minX) ? { minX, minZ, maxX, maxZ } : null
 }
 
-// The one footprint every group transform measures itself against: the
-// selection's mounted meshes (world box, converted into the level frame) with
-// the participant DATA extents as the fallback when the meshes aren't up yet
-// (Duplicate picks up its clones a frame before their renderers mount). Anchor
-// points alone sit metres inside a wide selection's real footprint, so a
-// gesture that pivots on the data extents orbits a different point than the
-// idle keyboard rotate and the rotate gizmos, which both use the mesh box.
-export function groupPlanBounds(
-  box: Box3 | null,
-  starts: ParticipantStart[],
-  frameInv: Matrix4,
-): GroupPlanBounds | null {
-  if (!box) return participantExtents(starts)
-  const min = box.min.clone().applyMatrix4(frameInv)
-  const max = box.max.clone().applyMatrix4(frameInv)
-  return {
-    minX: Math.min(min.x, max.x),
-    minZ: Math.min(min.z, max.z),
-    maxX: Math.max(min.x, max.x),
-    maxZ: Math.max(min.z, max.z),
-  }
+/** `groupPlanBounds` for a selection: the dashed boxes and gizmos measure this. */
+export function computeGroupPlanBox(ids: string[], levelId: string | null): GroupPlanBounds | null {
+  const { starts } = collectParticipants(ids, useScene.getState().nodes, levelId)
+  return groupPlanBounds(starts, levelFrame(levelId).inverse)
 }
 
 export const planBoundsCenter = (b: GroupPlanBounds): Vec2 => [

package/src/components/editor/handles/handle-arrow.tsx

@@ -1,6 +1,6 @@
 'use client'
 
-import { type Cursor, emitter } from '@pascal-app/core'
+import { type Cursor, emitter, sceneRegistry } from '@pascal-app/core'
 import type { ThreeEvent } from '@react-three/fiber'
 import { type ReactNode, useEffect, useMemo, useRef } from 'react'
 import {
@@ -17,11 +17,15 @@ import {
   type Raycaster,
   Shape,
   TorusGeometry,
+  Vector3,
 } from 'three'
 import { mergeGeometries } from 'three/examples/jsm/utils/BufferGeometryUtils.js'
 import { MeshBasicNodeMaterial } from 'three/webgpu'
 import { EDITOR_LAYER } from '../../../lib/constants'
 import { EDITOR_HANDLE_HIT_AREA_USER_DATA_KEY } from '../../../lib/direct-manipulation'
+import { createSpatialDragPlane, intersectSpatialDragPlane } from '../../../lib/spatial-drag-plane'
+import { getSpatialPointerId, spatialPointerInput } from '../../../lib/spatial-pointer-input'
+import { getActiveBuildingId } from '../../../lib/world-grid-snap'
 import useEditor from '../../../store/use-editor'
 
 // While a press-drag move is in flight (`placementDragMode`), the move tool
@@ -42,6 +46,7 @@ export const NO_RAYCAST = () => null
 export const HIT_AREA_MARGIN = 0.035
 
 const HIT_AREA_RENDER_ORDER = 1011
+const HIT_AREA_POINTER_EVENTS_ORDER = 10
 const HIT_AREA_THICKNESS = 0.08
 const CHEVRON_MIN_X = -0.2
 const CHEVRON_MAX_X = 0.22
@@ -492,15 +497,80 @@ export function InvisibleHandleHitArea({
   onPointerLeave: PointerHandler
   scale: number
 }) {
+  const handlePointerDown: PointerHandler = (event) => {
+    const spatialPointerId = getSpatialPointerId(event.nativeEvent)
+    if (spatialPointerId) {
+      const pointerTarget = event.object as typeof event.object & {
+        releasePointerCapture?: (pointerId: number) => void
+        setPointerCapture?: (pointerId: number) => void
+      }
+      pointerTarget.setPointerCapture?.(event.pointerId)
+      const buildingId = getActiveBuildingId()
+      const building = buildingId ? sceneRegistry.nodes.get(buildingId) : undefined
+      building?.updateWorldMatrix(true, false)
+      const inverse = building?.matrixWorld.clone().invert()
+      const initialPoint = event.point.clone()
+      const plane = createSpatialDragPlane(initialPoint, event.ray, building?.matrixWorld)
+      const point = new Vector3()
+      let seeded = false
+      const emitPoint = (position: Vector3, ray = event.ray) => {
+        const local = inverse ? position.clone().applyMatrix4(inverse) : position
+        emitter.emit('grid:move', {
+          position: [position.x, position.y, position.z],
+          localPosition: [local.x, local.y, local.z],
+          nativeEvent: {
+            ...event.nativeEvent,
+            inputSource: spatialPointerId,
+            pointerType: 'xr',
+            pointerId: event.pointerId,
+            target: event.nativeEvent.target,
+            ray: ray.clone(),
+          } as never,
+        })
+      }
+      // Direct resize sessions replace this capture in onPointerDown below.
+      // Move/reshape tools consume grid events in a plane frozen at the grip.
+      spatialPointerInput.capture(spatialPointerId, {
+        onMove: (ray) => {
+          if (!seeded) {
+            emitPoint(initialPoint)
+            seeded = true
+          }
+          if (intersectSpatialDragPlane(ray, plane, point)) emitPoint(point, ray)
+        },
+        onRelease: () => {
+          pointerTarget.releasePointerCapture?.(event.pointerId)
+          window.dispatchEvent(
+            new PointerEvent('pointerup', {
+              bubbles: true,
+              button: 0,
+              pointerId: event.pointerId,
+              pointerType: 'xr',
+            }),
+          )
+        },
+        onCancel: () => {
+          pointerTarget.releasePointerCapture?.(event.pointerId)
+          emitter.emit('tool:cancel')
+        },
+        onReplace: () => {
+          pointerTarget.releasePointerCapture?.(event.pointerId)
+        },
+      })
+    }
+    onPointerDown(event)
+  }
+
   return (
     <mesh
       frustumCulled={false}
       geometry={geometry}
       layers={EDITOR_LAYER}
       material={material}
-      onPointerDown={onPointerDown}
+      onPointerDown={handlePointerDown}
       onPointerEnter={onPointerEnter}
       onPointerLeave={onPointerLeave}
+      {...({ pointerEventsOrder: HIT_AREA_POINTER_EVENTS_ORDER } as Record<string, unknown>)}
       raycast={hitAreaRaycast}
       renderOrder={HIT_AREA_RENDER_ORDER}
       scale={scale}

package/src/components/editor/handles/use-handle-drag.ts

@@ -17,6 +17,8 @@ import { useEffect, useRef } from 'react'
 import { type Camera, type Object3D, type Plane, type Ray, Vector2, type Vector3 } from 'three'
 import { isHistoryShortcut } from '../../../lib/history'
 import { sfxEmitter } from '../../../lib/sfx-bus'
+import { intersectSpatialDragPlane } from '../../../lib/spatial-drag-plane'
+import { getSpatialPointerId, spatialPointerInput } from '../../../lib/spatial-pointer-input'
 import { suppressBoxSelectForPointer } from '../../tools/select/box-select-state'
 import { commitHandleDragPatch } from './handle-drag-history'
 
@@ -58,6 +60,7 @@ type HandleDragSession = {
   commit?: (patch: Partial<AnyNode>) => void
   markDirty?: boolean
   onBegin?: () => void
+  onCancel?: () => void
   onEnd?: () => void
   overrideId?: AnyNodeId
 }
@@ -107,6 +110,7 @@ function suppressInputDraggingUntilPointerRelease(pointerId: number) {
   window.addEventListener('pointerup', restore)
   window.addEventListener('pointercancel', restore)
   window.addEventListener('blur', onBlur)
+  return () => restore()
 }
 
 export function useHandleDrag(args: UseHandleDragArgs) {
@@ -121,9 +125,17 @@ export function useHandleDrag(args: UseHandleDragArgs) {
     if (event.button !== 0) return
     event.stopPropagation()
     suppressBoxSelectForPointer(event)
+    const spatialPointerId = getSpatialPointerId(event.nativeEvent)
 
     if (args.kind === 'tap') {
-      suppressInputDraggingUntilPointerRelease(event.nativeEvent.pointerId)
+      const restoreInputDragging = suppressInputDraggingUntilPointerRelease(event.pointerId)
+      if (spatialPointerId) {
+        spatialPointerInput.capture(spatialPointerId, {
+          onMove: () => undefined,
+          onRelease: restoreInputDragging,
+          onCancel: restoreInputDragging,
+        })
+      }
       swallowNextClick()
       sfxEmitter.emit('sfx:item-pick')
       document.body.style.cursor = ''
@@ -133,6 +145,7 @@ export function useHandleDrag(args: UseHandleDragArgs) {
 
     const { cursor, dragControls, handleIndex, node, rideObject, setIsDragging } = args
     rideObject.updateMatrixWorld()
+    const spatialRay = spatialPointerId ? event.ray.clone() : null
 
     const ndc = new Vector2()
     const setPointerRay = (clientX: number, clientY: number) => {
@@ -144,10 +157,12 @@ export function useHandleDrag(args: UseHandleDragArgs) {
       raycaster.setFromCamera(ndc, camera)
     }
     const getPointerRay: GetPointerRay = (clientX, clientY, target) => {
+      if (spatialRay) return target.copy(spatialRay)
       setPointerRay(clientX, clientY)
       return target.copy(raycaster.ray)
     }
     const intersectPlane: IntersectPlane = (clientX, clientY, plane, target) => {
+      if (spatialRay) return intersectSpatialDragPlane(spatialRay, plane, target)
       setPointerRay(clientX, clientY)
       return raycaster.ray.intersectPlane(plane, target)
     }
@@ -180,7 +195,11 @@ export function useHandleDrag(args: UseHandleDragArgs) {
 
     let lastPatch: Partial<AnyNode> | null = null
     let historyPaused = true
+    let releaseSpatialCapture: (() => void) | null = null
     let altKey = event.nativeEvent.altKey
+    let shiftKey = event.nativeEvent.shiftKey
+    let pendingMoveEvent: PointerEvent | null = null
+    let moveFrame = 0
 
     const resumeHistory = () => {
       if (!historyPaused) return
@@ -188,10 +207,10 @@ export function useHandleDrag(args: UseHandleDragArgs) {
       useScene.temporal.getState().resume()
     }
 
-    const onMove = (moveEvent: PointerEvent) => {
+    const processMove = (moveEvent: PointerEvent) => {
       const patch = session.move({
         event: moveEvent,
-        modifiers: { altKey },
+        modifiers: { altKey, shiftKey },
         getPointerRay,
         intersectPlane,
       })
@@ -204,12 +223,35 @@ export function useHandleDrag(args: UseHandleDragArgs) {
       }
     }
 
+    // Coalesce high-frequency pointer events so live React/store updates happen
+    // at most once per animation frame while retaining the newest position.
+    const flushMove = () => {
+      moveFrame = 0
+      const moveEvent = pendingMoveEvent
+      pendingMoveEvent = null
+      if (moveEvent) processMove(moveEvent)
+    }
+    const onMove = (moveEvent: PointerEvent) => {
+      pendingMoveEvent = moveEvent
+      if (moveFrame !== 0) return
+      if (typeof window.requestAnimationFrame === 'function') {
+        moveFrame = window.requestAnimationFrame(flushMove)
+      } else {
+        flushMove()
+      }
+    }
+
     const cleanup = () => {
+      if (moveFrame !== 0) window.cancelAnimationFrame?.(moveFrame)
+      moveFrame = 0
+      pendingMoveEvent = null
       window.removeEventListener('pointermove', onMove)
       window.removeEventListener('pointerup', onUp)
       window.removeEventListener('pointercancel', onCancel)
       window.removeEventListener('keydown', onKeyDown, true)
       window.removeEventListener('keyup', onKeyUp, true)
+      releaseSpatialCapture?.()
+      releaseSpatialCapture = null
       if (document.body.style.cursor === cursor) {
         document.body.style.cursor = ''
       }
@@ -230,6 +272,8 @@ export function useHandleDrag(args: UseHandleDragArgs) {
     }
 
     const onUp = () => {
+      if (moveFrame !== 0) window.cancelAnimationFrame?.(moveFrame)
+      flushMove()
       swallowNextClick()
       sfxEmitter.emit('sfx:item-place')
       if (lastPatch) {
@@ -245,6 +289,7 @@ export function useHandleDrag(args: UseHandleDragArgs) {
     }
 
     const onCancel = () => {
+      session.onCancel?.()
       clearOverride()
       cleanup()
     }
@@ -256,6 +301,10 @@ export function useHandleDrag(args: UseHandleDragArgs) {
         altKey = true
         return
       }
+      if (e.key === 'Shift') {
+        shiftKey = true
+        return
+      }
       if (e.key !== 'Escape' && !isHistoryShortcut(e)) return
       e.preventDefault()
       e.stopPropagation()
@@ -264,12 +313,32 @@ export function useHandleDrag(args: UseHandleDragArgs) {
     }
     const onKeyUp = (e: KeyboardEvent) => {
       if (e.key === 'Alt') altKey = false
+      if (e.key === 'Shift') shiftKey = false
     }
 
     dragCleanupRef.current = onCancel
-    window.addEventListener('pointermove', onMove)
-    window.addEventListener('pointerup', onUp)
-    window.addEventListener('pointercancel', onCancel)
+    if (spatialPointerId && spatialRay) {
+      releaseSpatialCapture = spatialPointerInput.capture(spatialPointerId, {
+        onMove: (ray) => {
+          spatialRay.copy(ray)
+          processMove(
+            new PointerEvent('pointermove', {
+              button: 0,
+              buttons: 1,
+              altKey,
+              pointerId: event.pointerId,
+              pointerType: 'xr',
+            }),
+          )
+        },
+        onRelease: onUp,
+        onCancel,
+      })
+    } else {
+      window.addEventListener('pointermove', onMove)
+      window.addEventListener('pointerup', onUp)
+      window.addEventListener('pointercancel', onCancel)
+    }
     window.addEventListener('keydown', onKeyDown, true)
     window.addEventListener('keyup', onKeyUp, true)
   }