@pascal-app/editor 1.0.1 → 1.0.3

package/src/components/editor/index.tsx

@@ -19,6 +19,7 @@ import {
   SceneEnvironment,
   useViewer,
   Viewer,
+  type ViewerImmersiveSession,
   ViewerPresentations,
 } from '@pascal-app/viewer'
 import {
@@ -202,6 +203,7 @@ export interface EditorProps {
   projectId?: string | null
 
   // Persistence — defaults to localStorage when omitted
+  guardAgainstSceneWipe?: boolean
   onLoad?: () => Promise<SceneGraph | null>
   onSave?: (scene: SceneGraph, options?: { keepalive?: boolean }) => Promise<void>
   /**
@@ -234,6 +236,9 @@ export interface EditorProps {
    */
   disablePostFx?: boolean
 
+  /** Host-provided immersive XR runtime for the main 3D canvas. */
+  immersive?: ViewerImmersiveSession
+
   // Version preview overlays (rendered by host app)
   sidebarOverlay?: ReactNode
   viewerBanner?: ReactNode
@@ -783,6 +788,7 @@ const ViewerSceneContent = memo(function ViewerSceneContent({
   isVersionPreviewMode,
   isLoading,
   isFirstPersonMode,
+  isXRMode,
   isStudioMode,
   onThumbnailCapture,
   viewerSceneSlot,
@@ -791,6 +797,7 @@ const ViewerSceneContent = memo(function ViewerSceneContent({
   isVersionPreviewMode: boolean
   isLoading: boolean
   isFirstPersonMode: boolean
+  isXRMode: boolean
   isStudioMode: boolean
   onThumbnailCapture?: (blob: Blob, cameraData: SnapshotCameraData) => void
   viewerSceneSlot?: ReactNode
@@ -807,7 +814,7 @@ const ViewerSceneContent = memo(function ViewerSceneContent({
     <>
       <SceneEnvironment />
       {!(isFirstPersonMode || isStudioMode || isCaptureMode) && <SelectionManager />}
-      {!noEditing && <BoxSelectTool />}
+      {!(noEditing || isXRMode) && <BoxSelectTool />}
       {!noEditing && <NodeArrowHandles />}
       {!noEditing && <GroupRotateHandle />}
       {!noEditing && <GroupSelectionBox3D />}
@@ -815,10 +822,10 @@ const ViewerSceneContent = memo(function ViewerSceneContent({
       {!noEditing && <SlabHoleHighlights />}
       {!noEditing && <WallMoveSideHandles />}
       {!noEditing && <FenceTangentLines3D />}
-      {!noEditing && <FloatingActionMenu />}
-      {!noEditing && <GroupFloatingActionMenu />}
-      {!noEditing && <FloatingBuildingActionMenu />}
-      {!isFirstPersonMode && <WallMeasurementLabel />}
+      {!(noEditing || isXRMode) && <FloatingActionMenu />}
+      {!(noEditing || isXRMode) && <GroupFloatingActionMenu />}
+      {!(noEditing || isXRMode) && <FloatingBuildingActionMenu />}
+      {!(isFirstPersonMode || isXRMode) && <WallMeasurementLabel />}
       <ExportManager />
       {isFirstPersonMode ? <ViewerZoneSystem /> : <ZoneSystem />}
       <CeilingSystem />
@@ -829,10 +836,10 @@ const ViewerSceneContent = memo(function ViewerSceneContent({
       {!(isLoading || isFirstPersonMode) && <SnapAwareGrid />}
       {!(isLoading || noEditing) && <ToolManager />}
       {isFirstPersonMode && <FirstPersonControls />}
-      {isCaptureMode && <CaptureCameraRig />}
-      <CustomCameraControls />
-      <ThumbnailGenerator onThumbnailCapture={onThumbnailCapture} />
-      {!isFirstPersonMode && <SiteEdgeLabels />}
+      {isCaptureMode && !isXRMode && <CaptureCameraRig />}
+      {!isXRMode && <CustomCameraControls />}
+      {!isXRMode && <ThumbnailGenerator onThumbnailCapture={onThumbnailCapture} />}
+      {!(isFirstPersonMode || isXRMode) && <SiteEdgeLabels />}
       <InteractiveSystem />
       {presentationsReady ? <ViewerPresentations /> : null}
       {!noEditing && viewerSceneSlot}
@@ -1022,6 +1029,7 @@ const ViewerCanvas = memo(function ViewerCanvas({
   viewerSceneSlot,
   floorplanSceneSlot,
   disablePostFx = false,
+  immersive,
 }: {
   isVersionPreviewMode: boolean
   isLoading: boolean
@@ -1036,6 +1044,7 @@ const ViewerCanvas = memo(function ViewerCanvas({
   viewerSceneSlot?: ReactNode
   floorplanSceneSlot?: ReactNode
   disablePostFx?: boolean
+  immersive?: ViewerImmersiveSession
 }) {
   const viewMode = useEditor((s) => s.viewMode)
   const floorplanPaneRatio = useEditor((s) => s.floorplanPaneRatio)
@@ -1164,6 +1173,7 @@ const ViewerCanvas = memo(function ViewerCanvas({
             renderContext="editor"
             renderPaused={!show3d && !showLoader}
             sceneReadyKey={sceneReadyKey}
+            immersive={immersive}
             // Walk/drone framing during snapshot capture is camera-only: the
             // viewer's default selection manager would hover-highlight whatever
             // the cursor crosses, which orbit capture never does.
@@ -1172,6 +1182,7 @@ const ViewerCanvas = memo(function ViewerCanvas({
             <ViewerSceneContent
               isFirstPersonMode={isFirstPersonMode}
               isLoading={showLoader}
+              isXRMode={immersive != null}
               isStudioMode={isStudioMode}
               isVersionPreviewMode={isVersionPreviewMode}
               onThumbnailCapture={onThumbnailCapture}
@@ -1241,6 +1252,7 @@ function PreviewStage({
 }
 
 function EditorContent({
+  guardAgainstSceneWipe,
   layoutVersion = 'v1',
   appMenuButton,
   sidebarTop,
@@ -1265,6 +1277,7 @@ function EditorContent({
   onLoaderChange,
   onThumbnailCapture,
   disablePostFx = false,
+  immersive,
   sidebarOverlay,
   viewerBanner,
   settingsPanelProps,
@@ -1300,6 +1313,7 @@ function EditorContent({
   useKeyboard({ isVersionPreviewMode, disabled: isFirstPersonMode || isStudioMode })
 
   const { isLoadingSceneRef, saveNow } = useAutoSave({
+    guardAgainstSceneWipe,
     onSave,
     onDirty,
     onSaveStatusChange,
@@ -1542,6 +1556,7 @@ function EditorContent({
       showLoader={showLoader}
       viewerSceneSlot={viewerSceneSlot}
       floorplanSceneSlot={floorplanSceneSlot}
+      immersive={immersive}
     />
   )
 

package/src/components/editor/node-action-menu.tsx

@@ -3,6 +3,7 @@
 import { Icon } from '@iconify/react'
 import { Copy, Group, Move, PencilRuler, Search, Spline, Trash2, Ungroup } from 'lucide-react'
 import type { MouseEventHandler, PointerEventHandler } from 'react'
+import { RegistryActionContributions } from './registry-action-contributions'
 
 type NodeActionMenuProps = {
   onFind?: MouseEventHandler<HTMLButtonElement>
@@ -111,6 +112,7 @@ export function NodeActionMenu({
           <Spline className="h-4 w-4" />
         </button>
       )}
+      <RegistryActionContributions />
       {onDuplicate && (
         <button
           aria-label="Duplicate"

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

@@ -4,6 +4,7 @@ import {
   type AnyNode,
   type AnyNodeId,
   type ArcResizeHandle,
+  type CornerRadiusHandle,
   type Cursor,
   createSceneApi,
   DEFAULT_ANGLE_STEP,
@@ -46,7 +47,11 @@ import { RESIZE_HANDLE_DRAG_LABEL, ROTATE_HANDLE_DRAG_LABEL } from '../../lib/co
 import { createEditorApi } from '../../lib/editor-api'
 import { sfxEmitter } from '../../lib/sfx-bus'
 import useDirectManipulationFeedback from '../../store/use-direct-manipulation-feedback'
-import useEditor, { isGridSnapActive, isMagneticSnapActive } from '../../store/use-editor'
+import useEditor, {
+  isAngleSnapActive,
+  isGridSnapActive,
+  isMagneticSnapActive,
+} from '../../store/use-editor'
 import { useHandleGroup } from '../../store/use-handle-group'
 import useInteractionScope, {
   useEndpointReshape,
@@ -574,6 +579,17 @@ function ArrowHandle({
       />
     )
   }
+  if (descriptor.kind === 'corner-radius') {
+    return (
+      <CornerRadiusKnob
+        descriptor={descriptor}
+        dragControls={dragControls}
+        handleIndex={handleIndex}
+        node={placementNode}
+        rideObject={rideObject}
+      />
+    )
+  }
   if (descriptor.kind === 'tap-action') {
     // Tap-action handles (fence side-move arrows, corner pickers) aren't
     // resize handles, so the freeze-at-pre-drag mechanism — which only
@@ -587,6 +603,119 @@ function ArrowHandle({
   return null
 }
 
+const CORNER_RADIUS_DOT_INSET = 0.2
+const CORNER_RADIUS_POSITION_FACTOR = Math.SQRT2 - 1
+
+function CornerRadiusKnob({
+  descriptor,
+  node,
+  handleIndex,
+  dragControls,
+  rideObject,
+}: {
+  descriptor: CornerRadiusHandle<AnyNode>
+  node: AnyNode
+  handleIndex: number
+  dragControls: HandleDragControls
+  rideObject: Object3D
+}) {
+  const [isHovered, setIsHovered] = useState(false)
+  const [isDragging, setIsDragging] = useState(false)
+  const { camera } = useThree()
+  const zoom = camera instanceof OrthographicCamera ? 1 / camera.zoom : 1
+  const [sx, sy] = descriptor.corner
+  const radius = descriptor.currentValue(node)
+  const inset = CORNER_RADIUS_DOT_INSET + CORNER_RADIUS_POSITION_FACTOR * radius
+  const position: [number, number, number] = [
+    sx * (descriptor.width(node) / 2 - inset / Math.SQRT2),
+    sy * (descriptor.height(node) / 2 - inset / Math.SQRT2),
+    0,
+  ]
+
+  const activate = useHandleDrag({
+    kind: 'drag',
+    cursor: 'grabbing',
+    dragControls,
+    handleIndex,
+    node,
+    rideObject,
+    setIsDragging,
+    onStart: ({ initialNode, nodeId, rideObject: dragRideObject, sceneApi: dragSceneApi }) => {
+      dragRideObject.updateMatrixWorld(true)
+      const worldMatrix = dragRideObject.matrixWorld.clone()
+      const inverseWorldMatrix = worldMatrix.clone().invert()
+      const center = new Vector3().setFromMatrixPosition(worldMatrix)
+      const normal = new Vector3().setFromMatrixColumn(worldMatrix, 2).normalize()
+      const plane = new Plane().setFromNormalAndCoplanarPoint(normal, center)
+      const maxRadius = resolveBound(
+        descriptor.max,
+        Number.POSITIVE_INFINITY,
+        initialNode,
+        dragSceneApi,
+      )
+      const preview = descriptor.createPreview?.(initialNode as never)
+
+      return {
+        markDirty: !preview,
+        commit: preview ? (patch) => preview.commit(patch as never) : undefined,
+        onBegin: () => {
+          useInteractionScope.getState().begin({
+            kind: 'handle-drag',
+            nodeId,
+            handle: 'Corner radius',
+          })
+        },
+        onCancel: () => preview?.cancel(),
+        onEnd: () => {
+          useInteractionScope.getState().endIf((scope) => scope.kind === 'handle-drag')
+        },
+        move: ({ event, modifiers, intersectPlane }) => {
+          const hit = new Vector3()
+          if (!intersectPlane(event.clientX, event.clientY, plane, hit)) return null
+          hit.applyMatrix4(inverseWorldMatrix)
+          const diagonalDistance =
+            (descriptor.width(initialNode) / 2 +
+              descriptor.height(initialNode) / 2 -
+              sx * hit.x -
+              sy * hit.y) /
+            Math.SQRT2
+          const next = Math.min(
+            maxRadius,
+            Math.max(
+              0,
+              (diagonalDistance - CORNER_RADIUS_DOT_INSET) / CORNER_RADIUS_POSITION_FACTOR,
+            ),
+          )
+          const patch = descriptor.apply(initialNode as never, next, dragSceneApi, modifiers)
+          preview?.preview(patch as never)
+          return patch as Partial<AnyNode>
+        },
+      }
+    },
+  })
+
+  return (
+    <HandleArrow
+      activeCursor="grabbing"
+      cursor="grab"
+      hover={isHovered || isDragging}
+      hoverScale={1.3}
+      onHoverChange={setIsHovered}
+      onPointerDown={activate}
+      placement={{ position, rotation: [0, 0, 0], baseScale: zoom * 0.42 }}
+      round
+      shape="corner-picker"
+    >
+      {isHovered || isDragging ? (
+        <DimensionLabel
+          position={[0, 0.22, 0]}
+          text={formatDimension(radius, useViewer.getState().unit)}
+        />
+      ) : null}
+    </HandleArrow>
+  )
+}
+
 function pickCursor(descriptor: LinearResizeHandle<AnyNode> | RadialResizeHandle<AnyNode>): Cursor {
   if (descriptor.kind === 'linear-resize' && descriptor.cursor) return descriptor.cursor
   return descriptor.axis === 'y' ? 'ns-resize' : 'ew-resize'
@@ -705,7 +834,10 @@ function LinearArrow({
               initialNode,
               nodeId,
               sceneApi,
-              initialModifiers: { altKey: event.nativeEvent.altKey },
+              initialModifiers: {
+                altKey: event.nativeEvent.altKey,
+                shiftKey: event.nativeEvent.shiftKey,
+              },
             })
           : null
       const overrideId = linearBinding?.overrideId ?? nodeId
@@ -1219,10 +1351,7 @@ function ArcArrow({
       }
       const initialAngle = angleOf(hitWorld)
 
-      // Advertise the rotate interaction so the contextual HUD can surface the
-      // Shift = free-rotation toggle (the angle-step bypass below). Resize
-      // handles route a measurement label here; rotate gets a sentinel label so
-      // the HUD shows the rotate hint, not a dimension pill.
+      // A distinct label selects rotation snapping instead of resize measurements.
       if (isRotateShape) {
         useInteractionScope
           .getState()
@@ -1244,7 +1373,12 @@ function ArcArrow({
           while (delta > Math.PI) delta -= 2 * Math.PI
           while (delta < -Math.PI) delta += 2 * Math.PI
 
-          if (!moveEvent.shiftKey && descriptor.shape === 'rotate') {
+          if (
+            !descriptor.continuous &&
+            !moveEvent.altKey &&
+            isAngleSnapActive() &&
+            descriptor.shape === 'rotate'
+          ) {
             delta = Math.round(delta / DEFAULT_ANGLE_STEP) * DEFAULT_ANGLE_STEP
           }
 

package/src/components/editor/registry-action-contributions.tsx

@@ -0,0 +1,53 @@
+'use client'
+
+import { type AnyNodeId, nodeRegistry, useScene } from '@pascal-app/core'
+import { useViewer } from '@pascal-app/viewer'
+import { type ComponentType, lazy, Suspense } from 'react'
+import { useShallow } from 'zustand/react/shallow'
+import { getFloorplanNodeExtension } from '../../lib/floorplan/floorplan-extension'
+
+type Loader = () => Promise<{ default: ComponentType }>
+const lazyCache = new WeakMap<Loader, ComponentType>()
+
+function contribution(kind: string): ComponentType | null {
+  const loader = getFloorplanNodeExtension(nodeRegistry.get(kind))?.actionMenu?.actions
+  if (!loader) return null
+  const cached = lazyCache.get(loader)
+  if (cached) return cached
+  const component = lazy(loader)
+  lazyCache.set(loader, component)
+  return component
+}
+
+/**
+ * The buttons kinds add to the action menu for selections holding them
+ * (`extensions['pascal:editor/floorplan'].actionMenu.actions`), in 2D and 3D
+ * alike. Each contribution reads the selection and decides its own visibility.
+ */
+export function RegistryActionContributions() {
+  const selectedIds = useViewer((s) => s.selection.selectedIds)
+  const kinds = useScene(
+    useShallow((s) =>
+      Array.from(
+        new Set(
+          selectedIds.flatMap((id) => {
+            const type = s.nodes[id as AnyNodeId]?.type
+            return type ? [type] : []
+          }),
+        ),
+      ).sort(),
+    ),
+  )
+  return (
+    <>
+      {kinds.map((kind) => {
+        const Contribution = contribution(kind)
+        return Contribution ? (
+          <Suspense fallback={null} key={kind}>
+            <Contribution />
+          </Suspense>
+        ) : null
+      })}
+    </>
+  )
+}

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

@@ -49,6 +49,8 @@ import {
 import { isHistoryShortcut } from '../../lib/history'
 import { endpointReshapeScope } from '../../lib/interaction/scope'
 import { sfxEmitter } from '../../lib/sfx-bus'
+import { intersectSpatialDragPlane, spatialDragLocalY } from '../../lib/spatial-drag-plane'
+import { getSpatialPointerId, spatialPointerInput } from '../../lib/spatial-pointer-input'
 import useEditor, { isGridSnapActive, isMagneticSnapActive } from '../../store/use-editor'
 import useInteractionScope, {
   useEndpointReshape,
@@ -769,7 +771,9 @@ function WallBaseElevationHandle({
       const midpointWorld = new Vector3(midpoint[0], initialBase, midpoint[1]).applyMatrix4(
         levelObject.matrixWorld,
       )
-      const planeNormal = new Vector3().subVectors(camera.position, midpointWorld).setY(0)
+      const planeNormal = new Vector3()
+        .subVectors(camera.getWorldPosition(new Vector3()), midpointWorld)
+        .setY(0)
       if (planeNormal.lengthSq() === 0) return null
       planeNormal.normalize()
       const plane = new Plane().setFromNormalAndCoplanarPoint(planeNormal, midpointWorld)
@@ -908,16 +912,12 @@ function WallHeightArrowHandle({ wall }: { wall: WallNode }) {
     const levelObject = wall.parentId ? sceneRegistry.nodes.get(wall.parentId) : null
     if (!levelObject) return
 
-    // Vertical plane through the wall midpoint whose normal points toward
-    // the camera (projected to horizontal). Raycasting against it converts
-    // pointer movement into a world-space Y value.
+    levelObject.updateWorldMatrix(true, false)
+    const worldToLocal = levelObject.matrixWorld.clone().invert()
     const midpointWorld = new Vector3(midX, 0, midZ).applyMatrix4(levelObject.matrixWorld)
-    const planeNormal = new Vector3().subVectors(camera.position, midpointWorld).setY(0)
-    if (planeNormal.lengthSq() === 0) return
-    planeNormal.normalize()
-    const plane = new Plane().setFromNormalAndCoplanarPoint(planeNormal, midpointWorld)
-
     const ndc = new Vector2()
+    const spatialPointerId = getSpatialPointerId(event.nativeEvent)
+    const spatialRay = spatialPointerId ? event.ray.clone() : null
     const setNDC = (clientX: number, clientY: number) => {
       const rect = gl.domElement.getBoundingClientRect()
       ndc.set(
@@ -926,17 +926,39 @@ function WallHeightArrowHandle({ wall }: { wall: WallNode }) {
       )
     }
 
-    setNDC(event.nativeEvent.clientX, event.nativeEvent.clientY)
-    raycaster.setFromCamera(ndc, camera)
-    const hit = new Vector3()
-    if (!raycaster.ray.intersectPlane(plane, hit)) return
+    let plane: Plane | null = null
+    let initialY: number
+    if (spatialRay) {
+      const worldUp = new Vector3(0, 1, 0).transformDirection(levelObject.matrixWorld)
+      const axisPoint = new Vector3()
+      const spatialRayLocalY = (ray: Ray) => {
+        const axisParameter = closestAxisParameterToRay(midpointWorld, worldUp, ray)
+        axisPoint.copy(midpointWorld).addScaledVector(worldUp, axisParameter)
+        return spatialDragLocalY(axisPoint, worldToLocal)
+      }
+      initialY = spatialRayLocalY(spatialRay)
+    } else {
+      // A camera-facing vertical plane gives desktop pointer movement a stable
+      // world-space height. Spatial pointers use the closest point on the
+      // wall's vertical axis instead, which remains defined for vertical rays.
+      const planeNormal = new Vector3()
+        .subVectors(camera.getWorldPosition(new Vector3()), midpointWorld)
+        .setY(0)
+      if (planeNormal.lengthSq() === 0) return
+      plane = new Plane().setFromNormalAndCoplanarPoint(planeNormal.normalize(), midpointWorld)
+      setNDC(event.nativeEvent.clientX, event.nativeEvent.clientY)
+      raycaster.setFromCamera(ndc, camera)
+      const hit = new Vector3()
+      if (!intersectSpatialDragPlane(raycaster.ray, plane, hit)) return
+      initialY = spatialDragLocalY(hit, worldToLocal)
+    }
 
     // Dragging the top makes the wall custom-height; seed from the resolved
     // effective height so a plane-bound wall's drag starts at its real top.
     const initialHeight = getWallEffectiveHeightForNodes(wall, useScene.getState().nodes)
-    const initialY = hit.y
     const wallId = wall.id as AnyNodeId
     let pendingHeight = initialHeight
+    let releaseSpatialCapture: (() => void) | null = null
 
     document.body.style.cursor = 'ns-resize'
     sfxEmitter.emit('sfx:item-pick')
@@ -954,9 +976,23 @@ function WallHeightArrowHandle({ wall }: { wall: WallNode }) {
     const onMove = (e: PointerEvent) => {
       setNDC(e.clientX, e.clientY)
       raycaster.setFromCamera(ndc, camera)
-      const intersection = new Vector3()
-      if (!raycaster.ray.intersectPlane(plane, intersection)) return
-      const newHeight = Math.max(MIN_WALL_HEIGHT, initialHeight + (intersection.y - initialY))
+      applyRay(raycaster.ray)
+    }
+    const applyRay = (ray: Ray) => {
+      let currentY: number
+      if (spatialRay) {
+        const worldUp = new Vector3(0, 1, 0).transformDirection(levelObject.matrixWorld)
+        const axisParameter = closestAxisParameterToRay(midpointWorld, worldUp, ray)
+        const axisPoint = midpointWorld.clone().addScaledVector(worldUp, axisParameter)
+        currentY = spatialDragLocalY(axisPoint, worldToLocal)
+      } else {
+        if (!plane) return
+        const intersection = new Vector3()
+        if (!intersectSpatialDragPlane(ray, plane, intersection)) return
+        currentY = spatialDragLocalY(intersection, worldToLocal)
+      }
+      const newHeight = Math.max(MIN_WALL_HEIGHT, initialHeight + (currentY - initialY))
+      if (Math.abs(newHeight - pendingHeight) < 1e-6) return
       pendingHeight = newHeight
       useLiveNodeOverrides.getState().set(wallId, { height: newHeight })
       useScene.getState().markDirty(wallId)
@@ -967,6 +1003,8 @@ function WallHeightArrowHandle({ wall }: { wall: WallNode }) {
       window.removeEventListener('pointerup', onUp)
       window.removeEventListener('pointercancel', onCancel)
       window.removeEventListener('keydown', onKeyDown, true)
+      releaseSpatialCapture?.()
+      releaseSpatialCapture = null
       if (document.body.style.cursor === 'ns-resize') {
         document.body.style.cursor = ''
       }
@@ -981,6 +1019,7 @@ function WallHeightArrowHandle({ wall }: { wall: WallNode }) {
       // Commit: write the final override-merged value to zustand once
       // (tracked, undoable), then drop the override so the renderer
       // falls back to the scene store.
+      useScene.temporal.getState().resume()
       if (pendingHeight !== initialHeight) {
         useScene.getState().updateNode(wallId, { height: pendingHeight })
       }
@@ -1006,10 +1045,21 @@ function WallHeightArrowHandle({ wall }: { wall: WallNode }) {
       onCancel()
     }
 
-    dragCleanupRef.current = cleanup
-    window.addEventListener('pointermove', onMove)
-    window.addEventListener('pointerup', onUp)
-    window.addEventListener('pointercancel', onCancel)
+    dragCleanupRef.current = onCancel
+    if (spatialPointerId && spatialRay) {
+      releaseSpatialCapture = spatialPointerInput.capture(spatialPointerId, {
+        onMove: (ray) => {
+          spatialRay.copy(ray)
+          applyRay(spatialRay)
+        },
+        onRelease: onUp,
+        onCancel,
+      })
+    } else {
+      window.addEventListener('pointermove', onMove)
+      window.addEventListener('pointerup', onUp)
+      window.addEventListener('pointercancel', onCancel)
+    }
     window.addEventListener('keydown', onKeyDown, true)
   }
 

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

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