@pascal-app/editor 0.9.1 → 0.9.2

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

@@ -25,12 +25,15 @@ const isVec3 = (v: unknown): v is Vec3 =>
   Array.isArray(v) && v.length === 3 && v.every((n) => typeof n === 'number')
 const isVec2 = (v: unknown): v is Vec2 =>
   Array.isArray(v) && v.length === 2 && v.every((n) => typeof n === 'number')
+const isVec2Array = (v: unknown): v is Vec2[] => Array.isArray(v) && v.length > 0 && v.every(isVec2)
 
 // How a participant's placement transforms rigidly around / with the group:
 //   - 'vec3'     position + [x,y,z] rotation (items, …)
 //   - 'scalar'   position + numeric rotation (columns)
 //   - 'endpoint' start/end tuples (walls, fences)
-export type ParticipantKind = 'vec3' | 'scalar' | 'endpoint'
+//   - 'polygon'  [x,z] vertex arrays (slabs, ceilings, zones) — the placement
+//                lives in the vertices themselves (plus optional hole rings)
+export type ParticipantKind = 'vec3' | 'scalar' | 'endpoint' | 'polygon'
 
 // A selected node qualifies when it belongs to the active level's horizontal
 // frame: either parented to that level, or declared building-scoped and parented
@@ -75,27 +78,39 @@ function getParticipantScalarRotation(node: AnyNode): number | null {
   return sceneRegistry.nodes.get(node.id)?.rotation.y ?? 0
 }
 
+// Shape-only classification of a positioned placement (no level-scope check).
+// Used for polygon hosts' attached children, whose parent is the host rather
+// than the level.
+function classifyPlacementShape(node: AnyNode): 'vec3' | 'scalar' | null {
+  const p = getParticipantPosition(node)
+  const r = (node as { rotation?: unknown }).rotation
+  if (isVec3(p) && isVec3(r)) return 'vec3'
+  if (isVec3(p) && getParticipantScalarRotation(node) !== null) return 'scalar'
+  return null
+}
+
 export function classifyParticipant(
   node: AnyNode | undefined,
   levelId: string | null,
   sceneNodes: Record<string, AnyNode | undefined>,
 ): ParticipantKind | null {
   if (!node || !isInGroupTransformScope(node, levelId, sceneNodes)) return null
-  const p = getParticipantPosition(node)
-  const r = (node as { rotation?: unknown }).rotation
+  const shape = classifyPlacementShape(node)
+  if (shape) return shape
   const start = (node as { start?: unknown }).start
   const end = (node as { end?: unknown }).end
-  if (isVec3(p) && isVec3(r)) return 'vec3'
-  if (isVec3(p) && getParticipantScalarRotation(node) !== null) return 'scalar'
   if (isVec2(start) && isVec2(end)) return 'endpoint'
+  if (isVec2Array((node as { polygon?: unknown }).polygon)) return 'polygon'
   return null
 }
 
-// Pre-drag placement snapshot + how to transform it.
+// Pre-drag placement snapshot + how to transform it. `holes` is null when the
+// kind carries no holes field (zone), so patches never write one onto it.
 export type ParticipantStart =
   | { id: AnyNodeId; kind: 'vec3'; position: Vec3; rotation: Vec3 }
   | { id: AnyNodeId; kind: 'scalar'; position: Vec3; rotation: number }
   | { id: AnyNodeId; kind: 'endpoint'; start: Vec2; end: Vec2 }
+  | { id: AnyNodeId; kind: 'polygon'; polygon: Vec2[]; holes: Vec2[][] | null }
 
 // An unselected wall/fence sharing a junction with a transforming endpoint. Only
 // the touching endpoint(s) follow, so the neighbour stays attached while its far
@@ -143,7 +158,7 @@ export function collectParticipants(
         position: [position[0], position[1], position[2]],
         rotation,
       })
-    } else {
+    } else if (kind === 'endpoint') {
       const n = node as AnyNode & { start: Vec2; end: Vec2 }
       starts.push({
         id: id as AnyNodeId,
@@ -151,6 +166,56 @@ export function collectParticipants(
         start: [n.start[0], n.start[1]],
         end: [n.end[0], n.end[1]],
       })
+    } else {
+      const n = node as AnyNode & { polygon: Vec2[]; holes?: Vec2[][] }
+      starts.push({
+        id: id as AnyNodeId,
+        kind,
+        polygon: n.polygon.map(([x, z]) => [x, z] as Vec2),
+        holes: Array.isArray(n.holes)
+          ? n.holes.map((hole) => hole.map(([x, z]) => [x, z] as Vec2))
+          : null,
+      })
+    }
+  }
+
+  // Polygon hosts (slab/ceiling) rebuild their geometry from vertices rather
+  // than transforming a group, so — unlike wall children, which ride the wall
+  // mesh — their attached children (ceiling-mounted items) must transform
+  // explicitly. Their positions are stored in the level frame (the host group
+  // sits at the origin), so the same rigid patches apply.
+  const includedIds = new Set<string>(starts.map((s) => s.id))
+  for (const s of [...starts]) {
+    if (s.kind !== 'polygon') continue
+    const host = sceneNodes[s.id]
+    const childIds = (host as { children?: string[] } | undefined)?.children
+    if (!Array.isArray(childIds)) continue
+    for (const childId of childIds) {
+      if (includedIds.has(childId)) continue
+      const child = sceneNodes[childId]
+      if (!child) continue
+      const shape = classifyPlacementShape(child)
+      const position = child ? getParticipantPosition(child) : null
+      if (!(shape && position)) continue
+      if (shape === 'vec3') {
+        const c = child as AnyNode & { rotation: Vec3 }
+        starts.push({
+          id: childId as AnyNodeId,
+          kind: 'vec3',
+          position: [position[0], position[1], position[2]],
+          rotation: [c.rotation[0], c.rotation[1], c.rotation[2]],
+        })
+      } else {
+        const rotation = getParticipantScalarRotation(child)
+        if (rotation === null) continue
+        starts.push({
+          id: childId as AnyNodeId,
+          kind: 'scalar',
+          position: [position[0], position[1], position[2]],
+          rotation,
+        })
+      }
+      includedIds.add(childId)
     }
   }
 
@@ -219,6 +284,174 @@ export function expandToComponent(
   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>]
+
+// Rigid group rotation: orbit each participant's anchor point(s) CCW by
+// `delta` (atan2 x→z sense) around `center` (level-frame XZ) and turn yaws by
+// `-delta` to match three.js Y-rotation handedness (same convention as the
+// single-item rotate handle in item/definition.ts). Endpoint nodes
+// (walls/fences) have no yaw — swinging both endpoints around the pivot
+// rotates them rigidly; their curveOffset sagitta is rotation-invariant, so
+// arcs are preserved. Linked neighbours' shared endpoints land exactly on the
+// selected wall's rotated endpoint (rot is deterministic), keeping junctions
+// welded while the far end stays put.
+export function rotateGroupPatches(
+  starts: ParticipantStart[],
+  links: LinkedNeighbor[],
+  center: { x: number; z: number },
+  delta: number,
+): GroupPatch[] {
+  const cos = Math.cos(delta)
+  const sin = Math.sin(delta)
+  const rot = (x: number, z: number): Vec2 => {
+    const dx = x - center.x
+    const dz = z - center.z
+    return [center.x + dx * cos - dz * sin, center.z + dx * sin + dz * cos]
+  }
+  const patches: GroupPatch[] = []
+  for (const s of starts) {
+    if (s.kind === 'endpoint') {
+      patches.push([s.id, { start: rot(s.start[0], s.start[1]), end: rot(s.end[0], s.end[1]) }])
+    } else if (s.kind === 'polygon') {
+      const patch: Record<string, unknown> = { polygon: s.polygon.map(([x, z]) => rot(x, z)) }
+      if (s.holes) patch.holes = s.holes.map((hole) => hole.map(([x, z]) => rot(x, z)))
+      patches.push([s.id, patch])
+    } else {
+      const [px, pz] = rot(s.position[0], s.position[2])
+      const position: Vec3 = [px, s.position[1], pz]
+      const rotation =
+        s.kind === 'vec3'
+          ? ([s.rotation[0], s.rotation[1] - delta, s.rotation[2]] as Vec3)
+          : s.rotation - delta
+      patches.push([s.id, { position, rotation }])
+    }
+  }
+  for (const l of links) {
+    patches.push([
+      l.id,
+      {
+        start: l.startLinked ? rot(l.start[0], l.start[1]) : l.start,
+        end: l.endLinked ? rot(l.end[0], l.end[1]) : l.end,
+      },
+    ])
+  }
+  return patches
+}
+
+// Rotate the SNAPSHOTS themselves (same math as `rotateGroupPatches`, but
+// producing new snapshot shapes instead of node patches). Lets an in-flight
+// group move re-seed its rest state after a mid-drag R/T: subsequent
+// translate patches then place the rotated layout at the live delta.
+export function rotateGroupSnapshots(
+  starts: ParticipantStart[],
+  links: LinkedNeighbor[],
+  center: { x: number; z: number },
+  delta: number,
+): { starts: ParticipantStart[]; links: LinkedNeighbor[] } {
+  const cos = Math.cos(delta)
+  const sin = Math.sin(delta)
+  const rot = (x: number, z: number): Vec2 => {
+    const dx = x - center.x
+    const dz = z - center.z
+    return [center.x + dx * cos - dz * sin, center.z + dx * sin + dz * cos]
+  }
+  const rotatedStarts = starts.map((s): ParticipantStart => {
+    if (s.kind === 'endpoint') {
+      return { ...s, start: rot(s.start[0], s.start[1]), end: rot(s.end[0], s.end[1]) }
+    }
+    if (s.kind === 'polygon') {
+      return {
+        ...s,
+        polygon: s.polygon.map(([x, z]) => rot(x, z)),
+        holes: s.holes ? s.holes.map((hole) => hole.map(([x, z]) => rot(x, z))) : null,
+      }
+    }
+    const [px, pz] = rot(s.position[0], s.position[2])
+    const position: Vec3 = [px, s.position[1], pz]
+    if (s.kind === 'vec3') {
+      return { ...s, position, rotation: [s.rotation[0], s.rotation[1] - delta, s.rotation[2]] }
+    }
+    return { ...s, position, rotation: s.rotation - delta }
+  })
+  // Only the welded (linked) endpoints follow the rotation; the far ends
+  // stay put, exactly like the per-tick patch path.
+  const rotatedLinks = links.map(
+    (l): LinkedNeighbor => ({
+      ...l,
+      start: l.startLinked ? rot(l.start[0], l.start[1]) : l.start,
+      end: l.endLinked ? rot(l.end[0], l.end[1]) : l.end,
+    }),
+  )
+  return { starts: rotatedStarts, links: rotatedLinks }
+}
+
+// Level-frame XZ extents of the participant DATA — the mesh-free sibling of
+// `computeGroupBox`, used when meshes aren't mounted yet and to re-seed
+// alignment anchors after a mid-drag rotation.
+export function participantExtents(
+  starts: ParticipantStart[],
+): { minX: number; minZ: number; maxX: number; maxZ: number } | null {
+  let minX = Number.POSITIVE_INFINITY
+  let minZ = Number.POSITIVE_INFINITY
+  let maxX = Number.NEGATIVE_INFINITY
+  let maxZ = Number.NEGATIVE_INFINITY
+  const reach = (x: number, z: number) => {
+    minX = Math.min(minX, x)
+    minZ = Math.min(minZ, z)
+    maxX = Math.max(maxX, x)
+    maxZ = Math.max(maxZ, z)
+  }
+  for (const s of starts) {
+    if (s.kind === 'endpoint') {
+      reach(s.start[0], s.start[1])
+      reach(s.end[0], s.end[1])
+    } else if (s.kind === 'polygon') {
+      for (const [x, z] of s.polygon) {
+        reach(x, z)
+      }
+    } else {
+      reach(s.position[0], s.position[2])
+    }
+  }
+  if (!Number.isFinite(minX)) return null
+  return { minX, minZ, maxX, maxZ }
+}
+
+// Rigid group slide: shift every participant (and each linked neighbour's
+// shared endpoint) by the same level-frame XZ delta. Y and rotations untouched.
+export function translateGroupPatches(
+  starts: ParticipantStart[],
+  links: LinkedNeighbor[],
+  dx: number,
+  dz: number,
+): GroupPatch[] {
+  const patches: GroupPatch[] = []
+  const shift = ([x, z]: Vec2): Vec2 => [x + dx, z + dz]
+  for (const s of starts) {
+    if (s.kind === 'endpoint') {
+      patches.push([s.id, { start: shift(s.start), end: shift(s.end) }])
+    } else if (s.kind === 'polygon') {
+      const patch: Record<string, unknown> = { polygon: s.polygon.map(shift) }
+      if (s.holes) patch.holes = s.holes.map((hole) => hole.map(shift))
+      patches.push([s.id, patch])
+    } else {
+      patches.push([s.id, { position: [s.position[0] + dx, s.position[1], s.position[2] + dz] }])
+    }
+  }
+  for (const l of links) {
+    patches.push([
+      l.id,
+      {
+        start: l.startLinked ? [l.start[0] + dx, l.start[1] + dz] : l.start,
+        end: l.endLinked ? [l.end[0] + dx, l.end[1] + dz] : l.end,
+      },
+    ])
+  }
+  return patches
+}
+
 // Frozen world matrix of the level group + its inverse. A node's placement
 // (`position` / `start` / `end`) is stored in its parent level's frame, but the
 // gizmos raycast the ground plane in WORLD space. When the building is rotated

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

@@ -12,12 +12,27 @@ import {
   DoubleSide,
   ExtrudeGeometry,
   type Group,
+  type Intersection,
+  Mesh,
+  type Raycaster,
   Shape,
   TorusGeometry,
 } from 'three'
 import { mergeGeometries } from 'three/examples/jsm/utils/BufferGeometryUtils.js'
 import { MeshBasicNodeMaterial } from 'three/webgpu'
 import { EDITOR_LAYER } from '../../../lib/constants'
+import useEditor from '../../../store/use-editor'
+
+// While a press-drag move is in flight (`placementDragMode`), the move tool
+// owns the pointer and the handle rig rides the moving node — so a handle hit
+// area would sit under the cursor and starve the tool's surface raycast
+// (`wall:move` for openings, `grid:move` for free movers), freezing the drag.
+// Make every handle hit area inert for the duration; the indicator mesh still
+// renders (it's already NO_RAYCAST + depthTest off) so the grip stays visible.
+function hitAreaRaycast(this: Mesh, raycaster: Raycaster, intersects: Intersection[]): void {
+  if (useEditor.getState().placementDragMode) return
+  Mesh.prototype.raycast.call(this, raycaster, intersects)
+}
 
 export const ARROW_SCALE = 0.65
 export const ARROW_COLOR = '#8381ed'
@@ -36,6 +51,13 @@ const CHEVRON_DEPTH = 0.08
 const CHEVRON_BEVEL_THICKNESS = 0.035
 const CHEVRON_BEVEL_SIZE = 0.03
 const CHEVRON_BEVEL_SEGMENTS = 10
+// Slimmer extrude profile matching the legacy wall side handles
+// (`wall-move-side-handles.tsx`) — opt-in via the `thin` prop so the chunkier
+// default is preserved for every other handle that uses the shared chevron.
+const CHEVRON_THIN_DEPTH = 0.045
+const CHEVRON_THIN_BEVEL_THICKNESS = 0.018
+const CHEVRON_THIN_BEVEL_SIZE = 0.02
+const CHEVRON_THIN_BEVEL_SEGMENTS = 8
 const MOVE_CROSS_HALF_LENGTH = 0.36
 const MOVE_CROSS_SHAFT_HALF_WIDTH = 0.03
 const MOVE_CROSS_HEAD_HALF_WIDTH = 0.12
@@ -49,7 +71,7 @@ const ROTATE_HANDLE_HALF_SWEEP = Math.PI / 3
 const ROTATE_RIBBON_HALF_WIDTH = 0.02
 const ROTATE_HEAD_HALF_WIDTH = 0.045
 const TRACKER_CUBE_SIZE = 0.16
-export const CORNER_HEX_RADIUS = 0.16
+export const CORNER_HEX_RADIUS = 0.11
 
 export type HandleArrowShape = 'chevron' | 'cross' | 'curved-arrow' | 'tracker' | 'corner-picker'
 export type HandleArrowInputShape = HandleArrowShape | 'arrow' | 'move-cross'
@@ -75,6 +97,10 @@ export type HandleArrowProps = {
   indicatorRotation?: readonly [number, number, number]
   onPointerEnter?: PointerHandler
   onPointerLeave?: PointerHandler
+  // Extrude the slimmer wall-handle chevron profile (chevron shape only).
+  thin?: boolean
+  // Render the corner-picker disc as a smooth circle instead of a hexagon.
+  round?: boolean
 }
 
 function normalizeHandleArrowShape(shape: HandleArrowInputShape, cursor: Cursor): HandleArrowShape {
@@ -164,8 +190,9 @@ export function createRotateArrowHandleGeometry() {
 
 // Reused chevron+shaft silhouette. The chevron points along +X by default;
 // callers rotate it around Y for Z-axis handles and into a vertical frame for
-// Y-axis handles.
-export function createArrowHandleGeometry() {
+// Y-axis handles. `thin` extrudes the slimmer wall-handle profile.
+export function createArrowHandleGeometry(thin = false) {
+  const depth = thin ? CHEVRON_THIN_DEPTH : CHEVRON_DEPTH
   const shape = new Shape()
   shape.moveTo(CHEVRON_MAX_X, 0)
   shape.lineTo(CHEVRON_NOTCH_X, CHEVRON_HALF_WIDTH)
@@ -176,16 +203,16 @@ export function createArrowHandleGeometry() {
   shape.lineTo(CHEVRON_NOTCH_X, -CHEVRON_HALF_WIDTH)
   shape.lineTo(CHEVRON_MAX_X, 0)
   const geometry = new ExtrudeGeometry(shape, {
-    depth: CHEVRON_DEPTH,
+    depth,
     bevelEnabled: true,
-    bevelThickness: CHEVRON_BEVEL_THICKNESS,
-    bevelSize: CHEVRON_BEVEL_SIZE,
+    bevelThickness: thin ? CHEVRON_THIN_BEVEL_THICKNESS : CHEVRON_BEVEL_THICKNESS,
+    bevelSize: thin ? CHEVRON_THIN_BEVEL_SIZE : CHEVRON_BEVEL_SIZE,
     bevelOffset: 0,
-    bevelSegments: CHEVRON_BEVEL_SEGMENTS,
+    bevelSegments: thin ? CHEVRON_THIN_BEVEL_SEGMENTS : CHEVRON_BEVEL_SEGMENTS,
     curveSegments: 16,
     steps: 1,
   })
-  geometry.translate(0, 0, -CHEVRON_DEPTH / 2)
+  geometry.translate(0, 0, -depth / 2)
   geometry.rotateX(-Math.PI / 2)
   geometry.computeVertexNormals()
   geometry.computeBoundingSphere()
@@ -254,15 +281,27 @@ export function createArrowHitAreaGeometry() {
   return geometry
 }
 
+// The move cross is a plus, not a disk. A disk-shaped hit area fills the four
+// corner gaps between the arms, so a neighbouring node sitting next to the
+// selected node (a lamp by a door, a slab beside a wall) gets swallowed by the
+// invisible grip and can't be picked. Wrap the visible arms instead: two flat
+// arm boxes (length/width + margin) merged into a plus, leaving the corners
+// empty so co-located neighbours stay selectable while the grip stays grabbable.
 function createMoveCrossHitAreaGeometry() {
-  const geometry = new CylinderGeometry(
-    MOVE_CROSS_HALF_LENGTH + HIT_AREA_MARGIN,
-    MOVE_CROSS_HALF_LENGTH + HIT_AREA_MARGIN,
-    HIT_AREA_THICKNESS,
-    32,
-  )
-  geometry.computeBoundingSphere()
-  return geometry
+  const armLength = (MOVE_CROSS_HALF_LENGTH + HIT_AREA_MARGIN) * 2
+  const armWidth = (MOVE_CROSS_HEAD_HALF_WIDTH + HIT_AREA_MARGIN) * 2
+  const armX = new BoxGeometry(armLength, HIT_AREA_THICKNESS, armWidth)
+  const armZ = new BoxGeometry(armWidth, HIT_AREA_THICKNESS, armLength)
+  const merged = mergeGeometries([armX, armZ], false)
+  if (!merged) {
+    armZ.dispose()
+    armX.computeBoundingSphere()
+    return armX
+  }
+  armX.dispose()
+  armZ.dispose()
+  merged.computeBoundingSphere()
+  return merged
 }
 
 export function createRotateArrowHitAreaGeometry() {
@@ -299,8 +338,12 @@ export function createEndpointHitAreaGeometry(radius: number) {
   return geometry
 }
 
-function createHandleArrowGeometry(shape: HandleArrowShape) {
-  if (shape === 'chevron') return createArrowHandleGeometry()
+// Hexagon (6 segments) by default; a smooth circle (32 segments) when `round`.
+const CORNER_DISC_SEGMENTS = 6
+const CORNER_DISC_ROUND_SEGMENTS = 32
+
+function createHandleArrowGeometry(shape: HandleArrowShape, thin = false, round = false) {
+  if (shape === 'chevron') return createArrowHandleGeometry(thin)
   if (shape === 'cross') return createMoveCrossHandleGeometry()
   if (shape === 'curved-arrow') return createRotateArrowHandleGeometry()
   if (shape === 'tracker') {
@@ -308,17 +351,23 @@ function createHandleArrowGeometry(shape: HandleArrowShape) {
     geometry.computeBoundingSphere()
     return geometry
   }
-  const geometry = new CircleGeometry(CORNER_HEX_RADIUS, 6)
+  const geometry = new CircleGeometry(
+    CORNER_HEX_RADIUS,
+    round ? CORNER_DISC_ROUND_SEGMENTS : CORNER_DISC_SEGMENTS,
+  )
   geometry.computeBoundingSphere()
   return geometry
 }
 
-function createHandleArrowHitGeometry(shape: HandleArrowShape) {
+function createHandleArrowHitGeometry(shape: HandleArrowShape, round = false) {
   if (shape === 'chevron') return createArrowHitAreaGeometry()
   if (shape === 'cross') return createMoveCrossHitAreaGeometry()
   if (shape === 'curved-arrow') return createRotateArrowHitAreaGeometry()
   if (shape === 'tracker') return createTrackerHitAreaGeometry()
-  const geometry = new CircleGeometry(CORNER_HEX_RADIUS, 6)
+  const geometry = new CircleGeometry(
+    CORNER_HEX_RADIUS,
+    round ? CORNER_DISC_ROUND_SEGMENTS : CORNER_DISC_SEGMENTS,
+  )
   geometry.computeBoundingSphere()
   return geometry
 }
@@ -382,6 +431,7 @@ export function InvisibleHandleHitArea({
       onPointerDown={onPointerDown}
       onPointerEnter={onPointerEnter}
       onPointerLeave={onPointerLeave}
+      raycast={hitAreaRaycast}
       renderOrder={HIT_AREA_RENDER_ORDER}
       scale={scale}
     />
@@ -443,10 +493,18 @@ export function HandleArrow({
   onPointerDown,
   onPointerEnter,
   onPointerLeave,
+  thin = false,
+  round = false,
 }: HandleArrowProps) {
   const visualShape = normalizeHandleArrowShape(shape, cursor)
-  const geometry = useMemo(() => createHandleArrowGeometry(visualShape), [visualShape])
-  const hitGeometry = useMemo(() => createHandleArrowHitGeometry(visualShape), [visualShape])
+  const geometry = useMemo(
+    () => createHandleArrowGeometry(visualShape, thin, round),
+    [visualShape, thin, round],
+  )
+  const hitGeometry = useMemo(
+    () => createHandleArrowHitGeometry(visualShape, round),
+    [visualShape, round],
+  )
   const indicatorMaterial = useHandleArrowMaterial(visualShape)
   const hitMaterial = useInvisibleHitAreaMaterial()
   const rootRef = useRef<Group>(null)

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

@@ -11,7 +11,8 @@ import {
 import { useViewer } from '@pascal-app/viewer'
 import { type ThreeEvent, useThree } from '@react-three/fiber'
 import { useEffect, useRef } from 'react'
-import { type Camera, type Object3D, type Plane, Vector2, type Vector3 } from 'three'
+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 { suppressBoxSelectForPointer } from '../../tools/select/box-select-state'
 
@@ -27,9 +28,12 @@ type IntersectPlane = (
   target: Vector3,
 ) => Vector3 | null
 
+type GetPointerRay = (clientX: number, clientY: number, target: Ray) => Ray
+
 export type HandleDragStartContext = {
   event: ThreeEvent<PointerEvent>
   camera: Camera
+  getPointerRay: GetPointerRay
   intersectPlane: IntersectPlane
   initialNode: AnyNode
   node: AnyNode
@@ -40,11 +44,13 @@ export type HandleDragStartContext = {
 
 export type HandleDragMoveContext = {
   event: PointerEvent
+  getPointerRay: GetPointerRay
   intersectPlane: IntersectPlane
 }
 
 type HandleDragSession = {
   move: (context: HandleDragMoveContext) => Partial<AnyNode> | null
+  commit?: (patch: Partial<AnyNode>) => void
   markDirty?: boolean
   onBegin?: () => void
   onEnd?: () => void
@@ -105,6 +111,9 @@ export function useHandleDrag(args: UseHandleDragArgs) {
   useEffect(() => () => dragCleanupRef.current?.(), [])
 
   return (event: ThreeEvent<PointerEvent>) => {
+    // Only the primary button starts a handle gesture — right/middle-drag
+    // belongs to the camera, so let it propagate untouched.
+    if (event.button !== 0) return
     event.stopPropagation()
     suppressBoxSelectForPointer(event)
 
@@ -121,13 +130,20 @@ export function useHandleDrag(args: UseHandleDragArgs) {
     rideObject.updateMatrixWorld()
 
     const ndc = new Vector2()
-    const intersectPlane: IntersectPlane = (clientX, clientY, plane, target) => {
+    const setPointerRay = (clientX: number, clientY: number) => {
       const rect = gl.domElement.getBoundingClientRect()
       ndc.set(
         ((clientX - rect.left) / rect.width) * 2 - 1,
         -((clientY - rect.top) / rect.height) * 2 + 1,
       )
       raycaster.setFromCamera(ndc, camera)
+    }
+    const getPointerRay: GetPointerRay = (clientX, clientY, target) => {
+      setPointerRay(clientX, clientY)
+      return target.copy(raycaster.ray)
+    }
+    const intersectPlane: IntersectPlane = (clientX, clientY, plane, target) => {
+      setPointerRay(clientX, clientY)
       return raycaster.ray.intersectPlane(plane, target)
     }
 
@@ -137,6 +153,7 @@ export function useHandleDrag(args: UseHandleDragArgs) {
     const session = args.onStart({
       event,
       camera,
+      getPointerRay,
       intersectPlane,
       initialNode,
       node,
@@ -159,7 +176,7 @@ export function useHandleDrag(args: UseHandleDragArgs) {
     let lastPatch: Partial<AnyNode> | null = null
 
     const onMove = (moveEvent: PointerEvent) => {
-      const patch = session.move({ event: moveEvent, intersectPlane })
+      const patch = session.move({ event: moveEvent, getPointerRay, intersectPlane })
       if (!patch) return
       lastPatch = patch
       useLiveNodeOverrides.getState().set(overrideId, patch as Record<string, unknown>)
@@ -172,6 +189,7 @@ export function useHandleDrag(args: UseHandleDragArgs) {
       window.removeEventListener('pointermove', onMove)
       window.removeEventListener('pointerup', onUp)
       window.removeEventListener('pointercancel', onCancel)
+      window.removeEventListener('keydown', onKeyDown, true)
       if (document.body.style.cursor === cursor) {
         document.body.style.cursor = ''
       }
@@ -194,7 +212,11 @@ export function useHandleDrag(args: UseHandleDragArgs) {
       swallowNextClick()
       sfxEmitter.emit('sfx:item-place')
       if (lastPatch) {
-        sceneApi.update(overrideId, lastPatch)
+        if (session.commit) {
+          session.commit(lastPatch)
+        } else {
+          sceneApi.update(overrideId, lastPatch)
+        }
       }
       clearOverride()
       cleanup()
@@ -205,9 +227,20 @@ export function useHandleDrag(args: UseHandleDragArgs) {
       cleanup()
     }
 
+    // Escape / ⌘Z abort the drag — capture phase so they win over the global
+    // use-keyboard arms (⌘Z must never history-jump under a live pointer).
+    const onKeyDown = (e: KeyboardEvent) => {
+      if (e.key !== 'Escape' && !isHistoryShortcut(e)) return
+      e.preventDefault()
+      e.stopPropagation()
+      swallowNextClick()
+      onCancel()
+    }
+
     dragCleanupRef.current = cleanup
     window.addEventListener('pointermove', onMove)
     window.addEventListener('pointerup', onUp)
     window.addEventListener('pointercancel', onCancel)
+    window.addEventListener('keydown', onKeyDown, true)
   }
 }