@pascal-app/editor 1.0.1 → 1.0.3

package/src/components/editor/grid.tsx

@@ -1,7 +1,12 @@
 'use client'
 
 import { type AnyNodeId, emitter, type GridEvent, sceneRegistry } from '@pascal-app/core'
-import { GRID_LAYER, getSceneTheme, useViewer } from '@pascal-app/viewer'
+import {
+  GRID_LAYER,
+  getSceneTheme,
+  useImmersiveXRPresentation,
+  useViewer,
+} from '@pascal-app/viewer'
 import { useFrame } from '@react-three/fiber'
 import { useEffect, useMemo, useRef, useState } from 'react'
 import { DoubleSide, type Mesh, PlaneGeometry, Quaternion, Vector2, Vector3 } from 'three'
@@ -10,9 +15,12 @@ import { MeshBasicNodeMaterial } from 'three/webgpu'
 import { useCeilingEvents } from '../../hooks/use-ceiling-events'
 import { useGridEvents } from '../../hooks/use-grid-events'
 import { getPlacementSurface, usesOrientedPlacementPlane } from '../../lib/active-placement-surface'
-import useEditor, { isGridSnapActive } from '../../store/use-editor'
+import { gridLocalNormal, gridLocalPoint } from '../../lib/grid-frame'
+import useEditor, { getActiveSnapContext, isGridSnapActive } from '../../store/use-editor'
 import { getMovingNode } from '../../store/use-interaction-scope'
 
+export const EDITOR_GRID_INPUT_NAME = 'pascal-editor-grid-input'
+
 // Reveal radius (m) of the cursor-local grid patch shown while placing/moving in
 // grid-snap mode — much tighter than the idle reveal so only the area you're
 // about to snap into lights up.
@@ -45,6 +53,7 @@ export const Grid = ({
   fadeStrength?: number
   revealRadius?: number
 }) => {
+  const immersive = useImmersiveXRPresentation()
   const isDark = useViewer((state) => getSceneTheme(state.sceneTheme).appearance === 'dark')
 
   // Use slightly lighter colors for dark themes' grid to make it apparent
@@ -60,6 +69,9 @@ export const Grid = ({
   const wallCursorRef = useRef(new Vector3())
   // Scratch for deriving a moving wall-item's host normal from its mesh.
   const wallNormalRef = useRef(new Vector3())
+  const localSurfaceRef = useRef(new Vector3())
+  const localNormalRef = useRef(new Vector3())
+  const localCursorRef = useRef(new Vector3())
   // Last Y pushed to `gridY` state, so the per-frame surface follow only triggers
   // a React re-render when the height actually changes (not every frame).
   const lastGridYRef = useRef<number | null>(null)
@@ -176,10 +188,11 @@ export const Grid = ({
   // laid-flat orientation maps `positionLocal.y` to world `-Z` relative to the
   // mesh origin. The cursor is recomputed every frame from the stored world hit
   // so the reveal stays put regardless of where the mesh origin sits.
-  const lastWorldCursorRef = useRef<{ x: number; z: number } | null>(null)
+  const lastWorldCursorRef = useRef<Vector3 | null>(null)
   useEffect(() => {
     const onGridMove = (event: GridEvent) => {
-      lastWorldCursorRef.current = { x: event.position[0], z: event.position[2] }
+      lastWorldCursorRef.current ??= new Vector3()
+      lastWorldCursorRef.current.set(...event.position)
     }
 
     emitter.on('grid:move', onGridMove)
@@ -194,7 +207,12 @@ export const Grid = ({
     if (levelId) {
       const levelMesh = sceneRegistry.nodes.get(levelId)
       if (levelMesh) {
-        levelY = levelMesh.position.y
+        levelMesh.getWorldPosition(worldPosRef.current)
+        levelY = gridLocalPoint(
+          gridRef.current.parent,
+          worldPosRef.current,
+          localSurfaceRef.current,
+        ).y
       }
     }
 
@@ -229,6 +247,10 @@ export const Grid = ({
     }
 
     const gridMesh = gridRef.current
+    if (surfacePoint) {
+      surfacePoint = gridLocalPoint(gridMesh.parent, surfacePoint, localSurfaceRef.current)
+      surfaceNormal = gridLocalNormal(gridMesh.parent, surfaceNormal, localNormalRef.current)
+    }
     const onOrientedPlane = surfacePoint != null && usesOrientedPlacementPlane(surfaceNormal)
     if (onOrientedPlane && surfacePoint) {
       // Surface-anchored lattice: orient the plane into the host and pin the mesh to
@@ -269,7 +291,8 @@ export const Grid = ({
       gridMesh.quaternion.copy(HORIZONTAL_QUATERNION)
       const world = lastWorldCursorRef.current
       if (world) {
-        cursorPositionRef.current.set(world.x, -world.z)
+        const local = gridLocalPoint(gridMesh.parent, world, localCursorRef.current)
+        cursorPositionRef.current.set(local.x, -local.z)
       }
       if (lastGridYRef.current !== targetY) {
         lastGridYRef.current = targetY
@@ -293,7 +316,7 @@ export const Grid = ({
     // from the interaction scope OR the armed build tool and is true only when
     // that context resolves to grid, so it IS the gate. (Previously this also
     // required a ghost in flight, so a merely-armed draft tool showed nothing.)
-    const snapPatchVisible = isGridSnapActive()
+    const snapPatchVisible = isGridSnapActive() || (immersive && getActiveSnapContext() !== null)
     revealRadiusUniform.value = PLACEMENT_REVEAL_RADIUS
     baseAlphaUniform.value = 0
     cellSizeUniform.value = useEditor.getState().gridSnapStep
@@ -320,6 +343,7 @@ export const Grid = ({
       geometry={geometry}
       layers={GRID_LAYER}
       material={material}
+      name={EDITOR_GRID_INPUT_NAME}
       ref={gridRef}
       renderOrder={1}
     />

package/src/components/editor/group-actions.ts

@@ -39,7 +39,6 @@ import {
   classifyParticipant,
   collectParticipants,
   computeGroupBox,
-  expandToComponent,
   groupPlanBounds,
   levelFrame,
   planBoundsCenter,
@@ -83,8 +82,8 @@ export function canGroupPickUp(): boolean {
  * until a click commits, mirroring the single-node `movingNode` flow. Returns
  * false when the selection holds no transformable participants.
  *
- * `scopeToSelection` limits the moving set to the selected participants —
- * no connected-component expansion and no welded-neighbor endpoints. The
+ * `scopeToSelection` drops the welded-neighbor endpoints, so connected walls
+ * don't stretch along with the move. The
  * Duplicate flow needs this: its clones sit EXACTLY on the originals, so
  * junction coincidence would otherwise weld the originals into the pick-up
  * and drag them along with the copies.
@@ -96,10 +95,7 @@ export function startGroupPickUp(
   const participantIds = groupParticipantIds()
   if (participantIds.length === 0) return false
   const nodes = useScene.getState().nodes
-  const fullIds = opts.scopeToSelection
-    ? participantIds
-    : expandToComponent(participantIds, nodes, levelId)
-  const collected = collectParticipants(fullIds, nodes, levelId)
+  const collected = collectParticipants(participantIds, nodes, levelId)
   // Mutable: mid-carry R/T rotates these snapshots in place.
   let starts = collected.starts
   let links = opts.scopeToSelection ? [] : collected.links
@@ -107,8 +103,8 @@ export function startGroupPickUp(
   const affectedIds: AnyNodeId[] = [...starts.map((s) => s.id), ...links.map((l) => l.id)]
 
   const { inverse: frameInv } = levelFrame(levelId)
-  const restBox = computeGroupBox(fullIds)
-  const startBounds = groupPlanBounds(restBox, starts, frameInv)
+  const restBox = computeGroupBox(participantIds)
+  const startBounds = groupPlanBounds(starts, frameInv)
   if (!startBounds) return false
   // Mutable: mid-carry R/T re-seeds the footprint around the same pivot.
   let restBounds = startBounds

package/src/components/editor/group-floating-action-menu.tsx

@@ -15,7 +15,12 @@ import useSessionGroups, {
   ungroupCurrentSelection,
 } from '../../store/use-session-groups'
 import { deleteSelection, duplicateSelectionAndPickUp, startGroupPickUp } from './group-actions'
-import { classifyParticipant, computeGroupBox, expandToComponent } from './group-transform-shared'
+import {
+  classifyParticipant,
+  computeGroupBox,
+  computeGroupPlanBox,
+  levelFrame,
+} from './group-transform-shared'
 import { NodeActionMenu } from './node-action-menu'
 import { useMeshSettleEpoch } from './use-mesh-settle-epoch'
 
@@ -69,15 +74,20 @@ export function GroupFloatingActionMenu() {
   const anchor = useMemo(() => {
     void meshEpoch
     if (participantIds.length === 0) return null
-    const fullIds = expandToComponent(participantIds, nodes, levelId)
-    const box = computeGroupBox(fullIds)
+    const box = computeGroupBox(participantIds)
     if (!box) return null
-    return new THREE.Vector3(
-      (box.min.x + box.max.x) / 2,
-      box.max.y + MENU_Y_OFFSET,
-      (box.min.z + box.max.z) / 2,
-    )
-  }, [participantIds, nodes, levelId, meshEpoch])
+    // Over the level-frame box's centre (the dashed boxes' and gizmo's), so the
+    // pill stays on the box under a rotated building; the mesh box gives the top.
+    const levelId = useViewer.getState().selection.levelId
+    const plan = computeGroupPlanBox(participantIds, levelId)
+    const anchor = plan
+      ? new THREE.Vector3((plan.minX + plan.maxX) / 2, 0, (plan.minZ + plan.maxZ) / 2).applyMatrix4(
+          levelFrame(levelId).matrix,
+        )
+      : new THREE.Vector3((box.min.x + box.max.x) / 2, 0, (box.min.z + box.max.z) / 2)
+    anchor.y = box.max.y + MENU_Y_OFFSET
+    return anchor
+  }, [participantIds, meshEpoch])
 
   useFrame((state) => {
     if (!(menuScaleRef.current && groupRef.current)) return

package/src/components/editor/group-move-3d.ts

@@ -31,7 +31,6 @@ import {
   classifyParticipant,
   collectParticipants,
   computeGroupBox,
-  expandToComponent,
   type GroupPlanBounds,
   groupPlanBounds,
   levelFrame,
@@ -107,16 +106,15 @@ export function armGroupMove3d(args: {
     const participantIds = selectedIds.filter(
       (id) => classifyParticipant(nodes[id as AnyNodeId], levelId, nodes) !== null,
     )
-    // Move the full connected wall/fence component, mirroring the 2D session.
-    const fullIds = expandToComponent(participantIds, nodes, levelId)
-    const { starts, links } = collectParticipants(fullIds, nodes, levelId)
+    // Only the selection moves; connected walls stretch through `links`, as in 2D.
+    const { starts, links } = collectParticipants(participantIds, nodes, levelId)
     if (starts.length === 0) return null
     const affectedIds: AnyNodeId[] = [...starts.map((s) => s.id), ...links.map((l) => l.id)]
 
     // Horizontal drag plane at the group's base; placements live in the level
     // frame, so world-space plane hits convert through it (a rotated building
     // would otherwise drift off-axis from the cursor).
-    const restBox = computeGroupBox(fullIds)
+    const restBox = computeGroupBox(participantIds)
     if (!restBox) return null
     const plane = new Plane(new Vector3(0, 1, 0), -restBox.min.y)
     const { inverse: frameInv } = levelFrame(levelId)
@@ -136,7 +134,7 @@ export function armGroupMove3d(args: {
       if (n && !movingIdSet.has(nid)) staticNodes[nid] = n
     }
     const candidates = collectAlignmentAnchors(staticNodes, '', levelId)
-    const restBounds = groupPlanBounds(restBox, starts, frameInv)
+    const restBounds = groupPlanBounds(starts, frameInv)
     if (!restBounds) return null
     const restAnchors = bboxCornerAnchors(
       'group-move',

package/src/components/editor/group-rotate-handle.tsx

@@ -13,11 +13,13 @@ import {
 import { useViewer } from '@pascal-app/viewer'
 import { createPortal, type ThreeEvent, useThree } from '@react-three/fiber'
 import { useEffect, useMemo, useRef, useState } from 'react'
-import { OrthographicCamera, Plane, Vector2, Vector3 } from 'three'
+import { OrthographicCamera, Plane, type Ray, Vector2, Vector3 } from 'three'
 import { GROUP_MOVE_DRAG_LABEL, GROUP_ROTATE_DRAG_LABEL } from '../../lib/contextual-help'
 import { isHistoryShortcut } from '../../lib/history'
 import { sfxEmitter } from '../../lib/sfx-bus'
-import useEditor from '../../store/use-editor'
+import { intersectSpatialDragPlane } from '../../lib/spatial-drag-plane'
+import { getSpatialPointerId, spatialPointerInput } from '../../lib/spatial-pointer-input'
+import useEditor, { isAngleSnapActive } from '../../store/use-editor'
 import useInteractionScope, {
   useActiveHandleDrag,
   useMovingNode,
@@ -28,7 +30,7 @@ import {
   classifyParticipant,
   collectParticipants,
   computeGroupBox,
-  expandToComponent,
+  computeGroupPlanBox,
   levelFrame,
   rotateGroupPatches,
   type Vec3,
@@ -79,14 +81,6 @@ export function GroupRotateHandle() {
     [selectedIds, levelId, nodes],
   )
 
-  // Gate on the explicit selection (so a single connected wall still gets the
-  // per-node handles), but transform the full connected wall/fence component so
-  // attached structure rotates rigidly as one piece.
-  const fullIds = useMemo(
-    () => expandToComponent(participantIds, nodes, levelId),
-    [participantIds, levelId, nodes],
-  )
-
   const shouldRender =
     participantIds.length >= 2 &&
     mode !== 'delete' &&
@@ -98,7 +92,13 @@ export function GroupRotateHandle() {
 
   if (!shouldRender) return null
   // Remount when the moving set changes so the rest pivot re-seeds cleanly.
-  return <GroupRotateHandleInner ids={fullIds} key={fullIds.join(',')} meshEpoch={meshEpoch} />
+  return (
+    <GroupRotateHandleInner
+      ids={participantIds}
+      key={participantIds.join(',')}
+      meshEpoch={meshEpoch}
+    />
+  )
 }
 
 function GroupRotateHandleInner({ ids, meshEpoch }: { ids: string[]; meshEpoch: number }) {
@@ -125,22 +125,28 @@ function GroupRotateHandleInner({ ids, meshEpoch }: { ids: string[]; meshEpoch:
   const baseScale = zoom * ARROW_SCALE * 1.05
   const scale = (isHovered ? 1.12 : 1) * baseScale
 
-  // World-space bounding box of the selected meshes. Levels are axis-aligned in
-  // XZ, so world XZ coincides with each node's level-local placement — letting
-  // us rotate `position` / `start` / `end` directly against the pivot without
-  // per-node frame conversion.
-  //   - `pivot`  = bbox center (XZ), Y at the group's base → the rotation origin
-  //   - `corner` = front-right bbox corner at mid-height → where the gizmo sits
+  // Both rest points come from the level-frame box (the dashed boxes' box, also
+  // keyboard R/T's pivot), carried to world so they stay on it under a rotated
+  // building; the world mesh box only supplies heights.
+  //   - `pivot`  = box center, Y at the group's base → the rotation origin
+  //   - `corner` = far box corner at mid-height → where the gizmo sits
   const rest = useMemo(() => {
     void meshEpoch
     const box = computeGroupBox(ids)
     if (!box) return null
-    const pivot = new Vector3((box.min.x + box.max.x) / 2, box.min.y, (box.min.z + box.max.z) / 2)
-    const corner = new Vector3(
-      box.max.x + CORNER_OFFSET,
-      (box.min.y + box.max.y) / 2,
-      box.max.z + CORNER_OFFSET,
-    )
+    const levelId = useViewer.getState().selection.levelId
+    const { matrix } = levelFrame(levelId)
+    const plan = computeGroupPlanBox(ids, levelId)
+    const pivot = plan
+      ? new Vector3((plan.minX + plan.maxX) / 2, 0, (plan.minZ + plan.maxZ) / 2).applyMatrix4(
+          matrix,
+        )
+      : new Vector3((box.min.x + box.max.x) / 2, 0, (box.min.z + box.max.z) / 2)
+    pivot.y = box.min.y
+    const corner = plan
+      ? new Vector3(plan.maxX + CORNER_OFFSET, 0, plan.maxZ + CORNER_OFFSET).applyMatrix4(matrix)
+      : new Vector3(box.max.x + CORNER_OFFSET, 0, box.max.z + CORNER_OFFSET)
+    corner.y = (box.min.y + box.max.y) / 2
     return { pivot, corner }
   }, [ids, meshEpoch])
 
@@ -163,6 +169,12 @@ function GroupRotateHandleInner({ ids, meshEpoch }: { ids: string[]; meshEpoch:
     if (event.button !== 0) return
     event.stopPropagation()
     suppressBoxSelectForPointer(event)
+    const spatialPointerId = getSpatialPointerId(event.nativeEvent)
+    const spatialRay = spatialPointerId ? event.ray.clone() : null
+    const pointerTarget = event.object as typeof event.object & {
+      releasePointerCapture?: (pointerId: number) => void
+      setPointerCapture?: (pointerId: number) => void
+    }
 
     frozenRest.current = { pivot: rest.pivot.clone(), corner: rest.corner.clone() }
     const center = rest.pivot.clone()
@@ -213,11 +225,15 @@ function GroupRotateHandleInner({ ids, meshEpoch }: { ids: string[]; meshEpoch:
       )
     }
 
-    setNDC(event.nativeEvent.clientX, event.nativeEvent.clientY)
-    raycaster.setFromCamera(ndc, camera)
+    if (!spatialRay) {
+      setNDC(event.nativeEvent.clientX, event.nativeEvent.clientY)
+      raycaster.setFromCamera(ndc, camera)
+    }
     const hit = new Vector3()
-    if (!raycaster.ray.intersectPlane(plane, hit)) return
+    if (!intersectSpatialDragPlane(spatialRay ?? raycaster.ray, plane, hit)) return
     const initialAngle = angleOf(hit)
+    if (spatialPointerId) pointerTarget.setPointerCapture?.(event.pointerId)
+    let altKey = event.nativeEvent.altKey
 
     document.body.style.cursor = 'grabbing'
     sfxEmitter.emit('sfx:item-pick')
@@ -230,15 +246,14 @@ function GroupRotateHandleInner({ ids, meshEpoch }: { ids: string[]; meshEpoch:
     })
     setIsDragging(true)
 
-    const onMove = (e: PointerEvent) => {
-      setNDC(e.clientX, e.clientY)
-      raycaster.setFromCamera(ndc, camera)
+    const applyRay = (ray: Ray, freeRotation = false) => {
       const moveHit = new Vector3()
-      if (!raycaster.ray.intersectPlane(plane, moveHit)) return
+      if (!intersectSpatialDragPlane(ray, plane, moveHit)) return
       let delta = angleOf(moveHit) - initialAngle
       while (delta > Math.PI) delta -= 2 * Math.PI
       while (delta < -Math.PI) delta += 2 * Math.PI
-      if (!e.shiftKey) delta = Math.round(delta / DEFAULT_ANGLE_STEP) * DEFAULT_ANGLE_STEP
+      if (!freeRotation && isAngleSnapActive())
+        delta = Math.round(delta / DEFAULT_ANGLE_STEP) * DEFAULT_ANGLE_STEP
 
       // Shared rigid-rotation math (also used by the keyboard group R/T);
       // see `rotateGroupPatches` for the orbit/yaw handedness contract.
@@ -286,8 +301,14 @@ function GroupRotateHandleInner({ ids, meshEpoch }: { ids: string[]; meshEpoch:
         })
       }
     }
+    const onMove = (e: PointerEvent) => {
+      setNDC(e.clientX, e.clientY)
+      raycaster.setFromCamera(ndc, camera)
+      applyRay(raycaster.ray, e.altKey)
+    }
 
     const affectedIds: AnyNodeId[] = [...starts.map((s) => s.id), ...links.map((l) => l.id)]
+    let releaseSpatialCapture: (() => void) | null = null
     const clearLivePreviews = () => {
       const overrides = useLiveNodeOverrides.getState()
       const liveTransforms = useLiveTransforms.getState()
@@ -303,6 +324,10 @@ function GroupRotateHandleInner({ ids, meshEpoch }: { ids: string[]; meshEpoch:
       window.removeEventListener('pointerup', onUp)
       window.removeEventListener('pointercancel', onCancel)
       window.removeEventListener('keydown', onKeyDown, true)
+      window.removeEventListener('keyup', onKeyUp, true)
+      releaseSpatialCapture?.()
+      releaseSpatialCapture = null
+      if (spatialPointerId) pointerTarget.releasePointerCapture?.(event.pointerId)
       if (document.body.style.cursor === 'grabbing') document.body.style.cursor = ''
       useScene.temporal.getState().resume()
       useViewer.getState().setInputDragging(false)
@@ -352,12 +377,19 @@ function GroupRotateHandleInner({ ids, meshEpoch }: { ids: string[]; meshEpoch:
     // Escape / ⌘Z abort the rotate — 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 === 'Alt') {
+        altKey = true
+        return
+      }
       if (e.key !== 'Escape' && !isHistoryShortcut(e)) return
       e.preventDefault()
       e.stopPropagation()
       swallowNextClick()
       onCancel()
     }
+    const onKeyUp = (e: KeyboardEvent) => {
+      if (e.key === 'Alt') altKey = false
+    }
 
     dragCleanupRef.current = () => {
       clearLivePreviews()
@@ -366,10 +398,22 @@ function GroupRotateHandleInner({ ids, meshEpoch }: { ids: string[]; meshEpoch:
     for (const id of affectedIds) {
       useLiveTransforms.getState().clear(id)
     }
-    window.addEventListener('pointermove', onMove)
-    window.addEventListener('pointerup', onUp)
-    window.addEventListener('pointercancel', onCancel)
+    if (spatialPointerId && spatialRay) {
+      releaseSpatialCapture = spatialPointerInput.capture(spatialPointerId, {
+        onMove: (ray) => {
+          spatialRay.copy(ray)
+          applyRay(spatialRay, altKey)
+        },
+        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)
   }
 
   return createPortal(
@@ -398,6 +442,7 @@ function GroupRotateHandleInner({ ids, meshEpoch }: { ids: string[]; meshEpoch:
           onPointerDown={activate}
           onPointerEnter={onHoverEnter}
           onPointerLeave={onHoverLeave}
+          {...({ pointerEventsOrder: 10 } as Record<string, unknown>)}
           scale={baseScale}
         />
         <mesh
@@ -407,6 +452,7 @@ function GroupRotateHandleInner({ ids, meshEpoch }: { ids: string[]; meshEpoch:
           onPointerDown={activate}
           onPointerEnter={onHoverEnter}
           onPointerLeave={onHoverLeave}
+          {...({ pointerEventsOrder: 10 } as Record<string, unknown>)}
           renderOrder={1010}
           scale={scale}
         />

package/src/components/editor/group-selection-box-3d.tsx

@@ -12,7 +12,7 @@ import { armGroupMove3d } from './group-move-3d'
 import {
   classifyParticipant,
   computeGroupBox,
-  expandToComponent,
+  computeGroupPlanBox,
   levelFrame,
 } from './group-transform-shared'
 import { useMeshSettleEpoch } from './use-mesh-settle-epoch'
@@ -24,8 +24,8 @@ const BOX_PAD = 0.06
 
 /**
  * 3D sibling of the 2D dashed group selection box: a dashed wireframe around
- * the multi-selection's transformable participants (expanded to the welded
- * wall/fence component) that doubles as the group's whole-volume drag
+ * the multi-selection's transformable participants that doubles as the
+ * group's whole-volume drag
  * handle — move cursor across it, press-drag anywhere on it slides the group,
  * a plain click picks it up. Holding a selection modifier passes the press
  * through so members inside can still be toggled. Rides the live drag delta
@@ -55,22 +55,30 @@ export function GroupSelectionBox3D() {
   const box = useMemo(() => {
     void meshEpoch
     if (participantIds.length === 0) return null
-    const fullIds = expandToComponent(participantIds, nodes, levelId)
-    const world = computeGroupBox(fullIds)
-    if (!world) return null
-    const size = new THREE.Vector3()
-    world.getSize(size)
-    const center = new THREE.Vector3()
-    world.getCenter(center)
+    // Aligned with the building like the 2D box: level-frame footprint, world
+    // height span, turned by the level's rotation.
+    const world = computeGroupBox(participantIds)
+    const { matrix } = levelFrame(levelId)
+    const plan = computeGroupPlanBox(participantIds, levelId)
+    if (!(world && plan)) return null
+    const center = new THREE.Vector3(
+      (plan.minX + plan.maxX) / 2,
+      0,
+      (plan.minZ + plan.maxZ) / 2,
+    ).applyMatrix4(matrix)
+    center.y = (world.min.y + world.max.y) / 2
+    const quaternion = new THREE.Quaternion()
+    matrix.decompose(new THREE.Vector3(), quaternion, new THREE.Vector3())
     return {
-      size: [size.x + 2 * BOX_PAD, size.y + 2 * BOX_PAD, size.z + 2 * BOX_PAD] as [
-        number,
-        number,
-        number,
-      ],
+      size: [
+        plan.maxX - plan.minX + 2 * BOX_PAD,
+        world.max.y - world.min.y + 2 * BOX_PAD,
+        plan.maxZ - plan.minZ + 2 * BOX_PAD,
+      ] as [number, number, number],
       center,
+      quaternion,
     }
-  }, [participantIds, nodes, levelId, meshEpoch])
+  }, [participantIds, levelId, meshEpoch])
 
   // Dashed wireframe. Built per box size (rare — selection / commit changes)
   // because LineDashedMaterial measures dashes along the line, so scaling a
@@ -156,7 +164,7 @@ export function GroupSelectionBox3D() {
   ]
 
   return (
-    <group position={position}>
+    <group position={position} quaternion={box.quaternion}>
       <primitive object={edges} />
       {/* Invisible whole-volume hit target — the box IS the drag handle. */}
       <mesh