@pascal-app/editor 1.0.0 → 1.0.3

package/src/components/editor/floorplan-panel.tsx

@@ -34,6 +34,7 @@ import {
   type RoofSegmentNode,
   resolveSlabPlacementElevation,
   resolveTerrainWallConstructionOptions,
+  runAsSingleSceneHistoryStep,
   type SiteNode,
   type SlabNode,
   SlabNode as SlabNodeSchema,
@@ -54,6 +55,7 @@ import {
   type WindowNode,
   WindowNode as WindowNodeSchema,
   wallClosesRoom,
+  wallRectangleCorners,
   ZoneNode as ZoneNodeSchema,
   type ZoneNode as ZoneNodeType,
 } from '@pascal-app/core'
@@ -93,11 +95,21 @@ import { resolveGenericFloorplanGridEventPoint } from '../../lib/floorplan-grid-
 import type { EditorGridEvent } from '../../lib/grid-event-presentation'
 import { groundHeightAt } from '../../lib/ground-surface'
 import { guideEmitter } from '../../lib/guide-events'
+import {
+  acceptsKeyboardPan,
+  clearKeyboardPanKeys,
+  isKeyboardPanKey,
+  type KeyboardPanState,
+  keyboardPanDirection,
+  keyboardPanSpeed,
+  setKeyboardPanKey,
+} from '../../lib/keyboard-pan'
 import { measurementHint, parseMeasurement } from '../../lib/measurement-parser'
 import { formatLinearMeasurement, linearUnitToMeters } from '../../lib/measurements'
 import { sfxEmitter } from '../../lib/sfx-bus'
 import { SITE_BOUNDARY_DRAG_LABEL, siteBoundaryHandlesEnabled } from '../../lib/site-boundary'
 import { resolveSlabPlanPointSnap } from '../../lib/slab-plan-snap'
+import { cancelPendingZonePaint, focusedUnitNode, paintZoneMembership } from '../../lib/units'
 import { cn } from '../../lib/utils'
 import { snapBuildingLocalToWorldGrid } from '../../lib/world-grid-snap'
 import { subscribeNavigationSyncPose } from '../../store/navigation-sync-pose-store'
@@ -135,6 +147,7 @@ import {
 import { FloorplanSnapBeaconLayer } from '../editor-2d/floorplan-snap-beacon-layer'
 import { FloorplanWallMoveGhostLayer } from '../editor-2d/floorplan-wall-move-ghost-layer'
 import { FloorplanDraftLayer } from '../editor-2d/renderers/floorplan-draft-layer'
+import { FloorplanDraftWallMeasurement } from '../editor-2d/renderers/floorplan-draft-wall-measurement'
 import { FloorplanGeometryRenderer } from '../editor-2d/renderers/floorplan-geometry-renderer'
 import { FloorplanMarqueeLayer } from '../editor-2d/renderers/floorplan-marquee-layer'
 import { FloorplanPlacementPreviewLayer } from '../editor-2d/renderers/floorplan-placement-preview-layer'
@@ -2318,168 +2331,6 @@ function buildDraftWall(levelId: string, start: WallPlanPoint, end: WallPlanPoin
   }
 }
 
-type DraftWallMeasurement = {
-  lengthLabel: string
-  midpoint: WallPlanPoint
-  direction: WallPlanPoint
-  angleLabels: {
-    id: string
-    label: string
-    center: WallPlanPoint
-    radius: number
-    startAngle: number
-    endAngle: number
-    midAngle: number
-  }[]
-}
-
-function FloorplanDraftWallMeasurement({
-  measurement,
-  measurementStroke,
-  labelBackground,
-  labelText,
-  sceneRotationDeg,
-  unitsPerPixel,
-}: {
-  measurement: DraftWallMeasurement
-  measurementStroke: string
-  labelBackground: string
-  labelText: string
-  sceneRotationDeg: number
-  unitsPerPixel: number
-}) {
-  const stroke = measurementStroke
-  const labelBg = labelBackground
-
-  const upx = unitsPerPixel
-  const fontSize = Math.max(upx * 10, 0.08)
-  const padX = upx * 6
-  const padY = upx * 3
-
-  // Length plate: rotates to follow the wall direction, but flips 180°
-  // when its on-screen orientation would read upside-down (same trick as
-  // `floorplan-registry-layer.tsx` for dimension labels).
-  const wallAngleDeg =
-    (Math.atan2(measurement.direction[1], measurement.direction[0]) * 180) / Math.PI
-  let labelAngleDeg = wallAngleDeg
-  let screenDeg = wallAngleDeg + sceneRotationDeg
-  screenDeg = ((((screenDeg + 180) % 360) + 360) % 360) - 180
-  if (screenDeg > 90) labelAngleDeg -= 180
-  else if (screenDeg <= -90) labelAngleDeg += 180
-
-  // Push the plate perpendicular to the wall so the dashed footprint
-  // stays visible underneath.
-  const perpX = -measurement.direction[1]
-  const perpY = measurement.direction[0]
-  const offset = upx * 18
-  const cx = measurement.midpoint[0] + perpX * offset
-  const cy = measurement.midpoint[1] + perpY * offset
-
-  const lengthTextWidth = measurement.lengthLabel.length * upx * 6.2
-  const lengthPlateW = lengthTextWidth + padX * 2
-  const lengthPlateH = fontSize + padY * 2
-
-  const arcSampleCount = 32
-
-  return (
-    <g pointerEvents="none">
-      <g transform={`translate(${cx} ${cy}) rotate(${labelAngleDeg})`}>
-        <rect
-          fill={labelBg}
-          height={lengthPlateH}
-          opacity={0.92}
-          rx={upx * 3}
-          ry={upx * 3}
-          stroke={stroke}
-          strokeWidth={upx * 0.5}
-          vectorEffect="non-scaling-stroke"
-          width={lengthPlateW}
-          x={-lengthPlateW / 2}
-          y={-lengthPlateH / 2}
-        />
-        <text
-          dominantBaseline="middle"
-          fill={labelText}
-          fontFamily="ui-monospace, SFMono-Regular, Menlo, monospace"
-          fontSize={fontSize}
-          fontWeight={600}
-          textAnchor="middle"
-          x={0}
-          y={0}
-        >
-          {measurement.lengthLabel}
-        </text>
-      </g>
-
-      {measurement.angleLabels.map((arc) => {
-        // Sample the arc as a polyline — avoids the SVG arc command's
-        // sweep-flag direction quirks across negative/positive sweeps.
-        const points: string[] = []
-        for (let i = 0; i <= arcSampleCount; i += 1) {
-          const t = i / arcSampleCount
-          const a = arc.startAngle + (arc.endAngle - arc.startAngle) * t
-          const px = arc.center[0] + Math.cos(a) * arc.radius
-          const py = arc.center[1] + Math.sin(a) * arc.radius
-          points.push(`${px},${py}`)
-        }
-
-        const aFontSize = Math.max(upx * 9, 0.075)
-        const aPadX = upx * 5
-        const aPadY = upx * 2.5
-        const aTextWidth = arc.label.length * upx * 6.2
-        const aPlateW = aTextWidth + aPadX * 2
-        const aPlateH = aFontSize + aPadY * 2
-
-        const labelDist = arc.radius + upx * 16
-        const lx = arc.center[0] + Math.cos(arc.midAngle) * labelDist
-        const ly = arc.center[1] + Math.sin(arc.midAngle) * labelDist
-
-        return (
-          <g key={`draft-angle-${arc.id}`}>
-            <polyline
-              fill="none"
-              points={points.join(' ')}
-              stroke={stroke}
-              strokeLinecap="round"
-              strokeLinejoin="round"
-              strokeOpacity={0.95}
-              strokeWidth={upx * 1.2}
-              vectorEffect="non-scaling-stroke"
-            />
-            <g transform={`translate(${lx} ${ly})`}>
-              <rect
-                fill={labelBg}
-                height={aPlateH}
-                opacity={0.92}
-                rx={upx * 3}
-                ry={upx * 3}
-                stroke={stroke}
-                strokeWidth={upx * 0.5}
-                vectorEffect="non-scaling-stroke"
-                width={aPlateW}
-                x={-aPlateW / 2}
-                y={-aPlateH / 2}
-              />
-              <text
-                dominantBaseline="middle"
-                fill={labelText}
-                fontFamily="ui-monospace, SFMono-Regular, Menlo, monospace"
-                fontSize={aFontSize}
-                fontWeight={600}
-                textAnchor="middle"
-                x={0}
-                y={0}
-              >
-                {arc.label}
-              </text>
-            </g>
-          </g>
-        )
-      })}
-    </g>
-  )
-}
-
 function pointsEqual(a: WallPlanPoint, b: WallPlanPoint): boolean {
   return a[0] === b[0] && a[1] === b[1]
 }
@@ -4568,7 +4419,7 @@ function FloorplanDraftCursorLayer({
       )}
 
       {cursorPoint && (
-        <g>
+        <g pointerEvents="none">
           <circle
             cx={toSvgX(cursorPoint[0])}
             cy={toSvgY(cursorPoint[1])}
@@ -4678,6 +4529,12 @@ function FloorplanLinearDraftLayer({
   const fenceDraftEnd = useFloorplanDraftPreview((s) => s.fenceDraftEnd)
   const roofDraftEnd = useFloorplanDraftPreview((s) => s.roofDraftEnd)
   const roofDraftQuarterTurn = useFloorplanDraftPreview((s) => s.roofDraftQuarterTurn)
+  const wallRectangleDraftStart = useFloorplanDraftPreview((s) => s.wallRectangleDraftStart)
+  // The live cursor is the rectangle's opposite corner; select it only while a
+  // rectangle draft is open so idle moves don't re-render this layer.
+  const wallRectangleDraftEnd = useFloorplanDraftPreview((s) =>
+    s.wallRectangleDraftStart ? s.cursorPoint : null,
+  )
 
   const draftPolygon = useMemo(() => {
     if (
@@ -4695,6 +4552,53 @@ function FloorplanLinearDraftLayer({
     return getWallPlanFootprint(draftWall, EMPTY_WALL_MITER_DATA)
   }, [levelId, wallDraftStart, wallDraftEnd])
 
+  // Rectangle mode drafts four walls at once; they read exactly like a line
+  // draft — same mitered footprints, measurement plates and axis guides.
+  const rectangleDraft = useMemo(() => {
+    if (!(levelId && isWallBuildActive && wallRectangleDraftStart && wallRectangleDraftEnd)) {
+      return null
+    }
+    const corners = wallRectangleCorners(wallRectangleDraftStart, wallRectangleDraftEnd)
+    if (corners.length !== 4) return null
+    const draftWalls = corners.map((start, index) =>
+      getSharedFloorplanWall({
+        ...buildDraftWall(levelId, start, corners[(index + 1) % 4]!),
+        id: `wall_draft_${index}` as WallNode['id'],
+      }),
+    )
+    const miterData = calculateLevelMiters(draftWalls)
+    const polygons = draftWalls.map((wall) =>
+      formatPolygonPoints(getWallPlanFootprint(wall, miterData)),
+    )
+    // Measure the two sides meeting at the cursor corner. Corners wind
+    // counter-clockwise, so each side is measured end → start to push its
+    // plate outside the rectangle.
+    const cursorIndex = corners.findIndex(
+      ([x, z]) => x === wallRectangleDraftEnd[0] && z === wallRectangleDraftEnd[1],
+    )
+    const measurements = [cursorIndex - 1, cursorIndex].map((side) => {
+      const from = corners[(side + 5) % 4]!
+      const to = corners[(side + 4) % 4]!
+      const dx = to[0] - from[0]
+      const dy = to[1] - from[1]
+      const length = Math.hypot(dx, dy)
+      return {
+        lengthLabel: formatMeasurement(length, unit, null, metricNotation),
+        midpoint: [(from[0] + to[0]) / 2, (from[1] + to[1]) / 2] as WallPlanPoint,
+        direction: [dx / length, dy / length] as WallPlanPoint,
+        angleLabels: [],
+      }
+    })
+    return { polygons, measurements }
+  }, [
+    isWallBuildActive,
+    levelId,
+    metricNotation,
+    unit,
+    wallRectangleDraftEnd,
+    wallRectangleDraftStart,
+  ])
+
   const draftPolygonPoints = useMemo(() => {
     if (isRoofBuildActive && roofDraftStart && roofDraftEnd) {
       const minX = Math.min(roofDraftStart[0], roofDraftEnd[0])
@@ -4862,6 +4766,10 @@ function FloorplanLinearDraftLayer({
     if (isWallBuildActive && wallDraftStart && wallDraftEnd) {
       pushDraft(wallDraftStart, wallDraftEnd)
     }
+    if (isWallBuildActive && wallRectangleDraftStart && wallRectangleDraftEnd) {
+      pushCross(wallRectangleDraftStart)
+      pushCross(wallRectangleDraftEnd)
+    }
     if (isFenceBuildActive && fenceDraftStart && fenceDraftEnd) {
       pushDraft(fenceDraftStart, fenceDraftEnd)
     }
@@ -4873,6 +4781,8 @@ function FloorplanLinearDraftLayer({
     fenceDraftStart,
     wallDraftEnd,
     wallDraftStart,
+    wallRectangleDraftEnd,
+    wallRectangleDraftStart,
   ])
 
   return (
@@ -4930,6 +4840,34 @@ function FloorplanLinearDraftLayer({
           unitsPerPixel={unitsPerPixel}
         />
       )}
+
+      {rectangleDraft?.polygons.map((points, index) => (
+        <FloorplanDraftLayer
+          anchorFill={draftStroke}
+          draftAnchorPoints={EMPTY_DRAFT_ANCHOR_POINTS}
+          draftFill={draftFill}
+          draftPolygonPoints={points}
+          draftStroke={draftStroke}
+          key={index}
+          linearDraftSegment={null}
+          polygonDraftClosingSegment={null}
+          polygonDraftPolygonPoints={null}
+          polygonDraftPolylinePoints={null}
+          unitsPerPixel={unitsPerPixel}
+        />
+      ))}
+
+      {rectangleDraft?.measurements.map((measurement, index) => (
+        <FloorplanDraftWallMeasurement
+          key={index}
+          labelBackground={isDark ? '#0f172a' : '#ffffff'}
+          labelText={isDark ? '#e2e8f0' : '#171717'}
+          measurement={measurement}
+          measurementStroke={measurementStroke}
+          sceneRotationDeg={sceneRotationDeg}
+          unitsPerPixel={unitsPerPixel}
+        />
+      ))}
     </>
   )
 }
@@ -5034,6 +4972,7 @@ export function FloorplanPanel({
   // the user closes and re-opens the 2D editor instead of restoring the
   // stale viewport from before they closed it.
   const isFloorplanOpen = useEditor((state) => state.isFloorplanOpen)
+  const viewMode = useEditor((state) => state.viewMode)
   // Mirror for callbacks that fire outside React's render (the per-frame
   // navigation-pose subscriber): when the 2D panel is hidden (`display:none` in
   // 3D mode) it must NOT re-render on every camera-zoom frame.
@@ -7782,6 +7721,116 @@ export function FloorplanPanel({
     [publishFloorplanNavigationPose],
   )
 
+  // WASD and the orbit buttons in 2D-only view. The 3D canvas is paused there
+  // (`renderPaused`), so the plan drives them itself — same keys and speed as
+  // the camera — and hands the pose to 3D when the move ends.
+  const keyboardPanKeysRef = useRef<KeyboardPanState>({
+    forward: false,
+    backward: false,
+    left: false,
+    right: false,
+  })
+  useEffect(() => {
+    if (viewMode !== '2d') return
+    const keys = keyboardPanKeysRef.current
+    let frame: number | null = null
+    let lastTime: number | null = null
+    const sceneRotationDeg = (userRotationDeg: number) =>
+      FLOORPLAN_VIEW_ROTATION_DEG + userRotationDeg - buildingRotationDeg
+    const step = (time: number) => {
+      const { horizontal, vertical } = keyboardPanDirection(keys)
+      const viewport = latestViewportRef.current ?? latestFittedViewportRef.current
+      if ((horizontal === 0 && vertical === 0) || !viewport) {
+        frame = null
+        lastTime = null
+        commitFloorplanPan()
+        return
+      }
+      const elapsed = lastTime === null ? 0 : Math.min((time - lastTime) / 1000, 0.05)
+      lastTime = time
+      const distance =
+        (keyboardPanSpeed(viewport.width) * elapsed) / Math.hypot(horizontal, vertical)
+      const next = {
+        centerX: viewport.centerX + horizontal * distance,
+        centerY: viewport.centerY - vertical * distance,
+        width: viewport.width,
+      }
+      const userRotationDeg = latestFloorplanUserRotationDegRef.current
+      floorplanViewportInteractionInProgressRef.current = true
+      applyFloorplanViewportImperatively(next)
+      floorplanPanPoseRef.current = {
+        localCenter: rotateSvgPoint(
+          { x: next.centerX, y: next.centerY },
+          -sceneRotationDeg(userRotationDeg),
+        ),
+        userRotationDeg,
+        viewWidth: next.width,
+      }
+      frame = requestAnimationFrame(step)
+    }
+    const start = () => {
+      if (frame === null) frame = requestAnimationFrame(step)
+    }
+    const onKeyDown = (event: KeyboardEvent) => {
+      if (!(isKeyboardPanKey(event.code) && acceptsKeyboardPan(event))) return
+      if (setKeyboardPanKey(keys, event.code, true)) start()
+      event.preventDefault()
+      event.stopPropagation()
+    }
+    const onKeyUp = (event: KeyboardEvent) => {
+      if (isKeyboardPanKey(event.code) && setKeyboardPanKey(keys, event.code, false)) {
+        event.preventDefault()
+        event.stopPropagation()
+      }
+    }
+    const onBlur = () => clearKeyboardPanKeys(keys)
+    // Same rule as the 3D buttons: snap to the nearest quarter turn, then turn one more.
+    const orbit = (clockwise: boolean) => {
+      const viewport = latestViewportRef.current ?? latestFittedViewportRef.current
+      if (!viewport) return
+      const userRotationDeg = latestFloorplanUserRotationDegRef.current
+      const quarter = Math.PI / 2
+      const azimuth =
+        Math.round(cameraAzimuthFromFloorplanRotation(userRotationDeg) / quarter) * quarter +
+        (clockwise ? -quarter : quarter)
+      const nextRotationDeg = floorplanRotationFromCameraAzimuth(azimuth, userRotationDeg)
+      const localCenter = rotateSvgPoint(
+        { x: viewport.centerX, y: viewport.centerY },
+        -sceneRotationDeg(userRotationDeg),
+      )
+      smoothFloorplanNavigationView(localCenter, nextRotationDeg, viewport.width)
+      publishFloorplanNavigationPose(localCenter, nextRotationDeg, viewport.width)
+    }
+    const orbitClockwise = () => orbit(true)
+    const orbitCounterClockwise = () => orbit(false)
+    document.addEventListener('keydown', onKeyDown)
+    document.addEventListener('keyup', onKeyUp)
+    window.addEventListener('blur', onBlur)
+    emitter.on('camera-controls:orbit-cw', orbitClockwise)
+    emitter.on('camera-controls:orbit-ccw', orbitCounterClockwise)
+    return () => {
+      document.removeEventListener('keydown', onKeyDown)
+      document.removeEventListener('keyup', onKeyUp)
+      window.removeEventListener('blur', onBlur)
+      emitter.off('camera-controls:orbit-cw', orbitClockwise)
+      emitter.off('camera-controls:orbit-ccw', orbitCounterClockwise)
+      // A key released while 3D owns the keys would otherwise still read as
+      // held when the plan takes them back; the camera clears its own the same way.
+      clearKeyboardPanKeys(keys)
+      if (frame !== null) {
+        cancelAnimationFrame(frame)
+        commitFloorplanPan()
+      }
+    }
+  }, [
+    applyFloorplanViewportImperatively,
+    buildingRotationDeg,
+    commitFloorplanPan,
+    publishFloorplanNavigationPose,
+    smoothFloorplanNavigationView,
+    viewMode,
+  ])
+
   useLayoutEffect(() => {
     flushFloorplanRotationPresentationRestore(pendingFloorplanRotationRestoreRef)
   })
@@ -7952,7 +8001,7 @@ export function FloorplanPanel({
         return null
       }
 
-      const { createNode, nodes } = useScene.getState()
+      const { createNode, updateNode, nodes } = useScene.getState()
       const zoneCount = Object.values(nodes).filter((node) => node.type === 'zone').length
       const zone = ZoneNodeSchema.parse({
         color: PALETTE_COLORS[zoneCount % PALETTE_COLORS.length],
@@ -7960,9 +8009,15 @@ export function FloorplanPanel({
         polygon: points.map(([x, z]) => [x, z] as [number, number]),
       })
 
-      createNode(zone, levelId)
+      // Joining the focused unit rides in the zone's own undo step; selecting
+      // the zone would end focus, so a painted unit keeps it instead.
+      const focusedUnit = focusedUnitNode()
+      runAsSingleSceneHistoryStep(useScene, () => {
+        createNode(zone, levelId)
+        if (focusedUnit) updateNode(focusedUnit.id, { members: [...focusedUnit.members, zone.id] })
+      })
       sfxEmitter.emit('sfx:structure-build')
-      setSelection({ zoneId: zone.id })
+      if (!focusedUnit) setSelection({ zoneId: zone.id })
       return zone.id
     },
     [levelId, setSelection],
@@ -10008,6 +10063,18 @@ export function FloorplanPanel({
         setSelectedReferenceId(null)
 
         if (backgroundSelection.kind === 'select-zone') {
+          // Unit focus: a click paints membership, a double-click selects the
+          // zone and keeps focus (the SVG gets the second click as detail 2).
+          const focusedUnitId = useViewer.getState().focusedUnitId
+          if (focusedUnitId) {
+            if (event.detail >= 2) {
+              cancelPendingZonePaint(backgroundSelection.zoneId)
+              setSelection({ zoneId: backgroundSelection.zoneId })
+            } else {
+              paintZoneMembership(focusedUnitId, backgroundSelection.zoneId)
+            }
+            return
+          }
           setSelection({ zoneId: backgroundSelection.zoneId })
           return
         }

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