@pascal-app/editor 0.9.1 → 1.0.0-beta.1

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

@@ -1,12 +1,15 @@
 'use client'
 
 import {
+  type AnyNode,
   type AnyNodeId,
-  DEFAULT_WALL_HEIGHT,
   type FenceNode,
+  getWallBaseElevationForNodes,
   getWallCurveFrameAt,
+  getWallEffectiveHeightForNodes,
   getWallThickness,
   isCurvedWall,
+  MIN_WALL_HEIGHT,
   sceneRegistry,
   useLiveNodeOverrides,
   useScene,
@@ -32,12 +35,27 @@ import {
 } from 'three'
 import { mergeGeometries } from 'three/examples/jsm/utils/BufferGeometryUtils.js'
 import { MeshBasicNodeMaterial } from 'three/webgpu'
+import {
+  clearStructuralElevationGuide,
+  publishStructuralElevationGuide,
+  resolveStructuralElevationSnap,
+} from '../../lib/elevation-guides'
+import { isHistoryShortcut } from '../../lib/history'
+import { endpointReshapeScope } from '../../lib/interaction/scope'
 import { sfxEmitter } from '../../lib/sfx-bus'
-import useEditor from '../../store/use-editor'
+import useEditor, { isGridSnapActive, isMagneticSnapActive } from '../../store/use-editor'
+import useInteractionScope, {
+  useEndpointReshape,
+  useIsCurveReshape,
+  useMovingNode,
+} from '../../store/use-interaction-scope'
 import { suppressBoxSelectForPointer } from '../tools/select/box-select-state'
+import { resolveResizeSnapValue } from './handles/resize-snap'
+import { type HandleDragControls, useHandleDrag } from './handles/use-handle-drag'
 import {
   createArrowHitAreaGeometry,
   createEndpointHitAreaGeometry,
+  HandleArrow,
   InvisibleHandleHitArea,
   NO_RAYCAST,
   useInvisibleHitAreaMaterial,
@@ -48,13 +66,12 @@ const HANDLE_MIN_OFFSET = 0.33
 const HANDLE_MIN_HEIGHT = 0.4
 const HANDLE_TOP_INSET = 0.08
 const HEIGHT_HANDLE_OFFSET = 0.26
-const MIN_WALL_HEIGHT = 0.5
 const ARROW_COLOR = '#8381ed'
 const ARROW_HOVER_COLOR = '#a5b4fc'
 // Match the door arrows: scale the rendered chevron down to ~two-thirds
 // so the in-world handles read as a single UI family.
 const ARROW_SCALE = 0.65
-const CORNER_HEX_RADIUS = 0.16
+const CORNER_HEX_RADIUS = 0.11
 const CORNER_DASH_SIZE = 0.1
 const CORNER_GAP_SIZE = 0.07
 const CORNER_DASH_THICKNESS = 0.006
@@ -118,11 +135,9 @@ export function WallMoveSideHandles() {
   const selectedIds = useViewer((state) => state.selection.selectedIds)
   const mode = useEditor((state) => state.mode)
   const isFloorplanHovered = useEditor((state) => state.isFloorplanHovered)
-  const movingNode = useEditor((state) => state.movingNode)
-  const movingWallEndpoint = useEditor((state) => state.movingWallEndpoint)
-  const movingFenceEndpoint = useEditor((state) => state.movingFenceEndpoint)
-  const curvingWall = useEditor((state) => state.curvingWall)
-  const curvingFence = useEditor((state) => state.curvingFence)
+  const movingNode = useMovingNode()
+  const endpointReshape = useEndpointReshape()
+  const isCurveReshape = useIsCurveReshape()
 
   const selectedId = selectedIds.length === 1 ? selectedIds[0] : null
   // Fence side-move / height / corner-pickers now flow through the
@@ -140,10 +155,8 @@ export function WallMoveSideHandles() {
     !isFloorplanHovered &&
     mode !== 'delete' &&
     !movingNode &&
-    !movingWallEndpoint &&
-    !movingFenceEndpoint &&
-    !curvingWall &&
-    !curvingFence
+    !endpointReshape &&
+    !isCurveReshape
 
   if (!shouldRender || !selectedNode) return null
 
@@ -151,6 +164,7 @@ export function WallMoveSideHandles() {
 }
 
 function WallMoveSideHandlesForWall({ wall }: { wall: WallNode }) {
+  const nodes = useScene((state) => state.nodes)
   // Merge the in-flight drag override so every handle (side-move arrows,
   // height arrow, corner leaders) tracks the live height in real time
   // during a height drag — the scene store stays at the pre-drag value
@@ -194,24 +208,34 @@ function WallMoveSideHandlesForWall({ wall }: { wall: WallNode }) {
     }
   }, [wall.parentId])
 
-  const handles = useMemo(() => getWallMoveHandles(effectiveWall), [effectiveWall])
+  const baseElevation = getWallBaseElevationForNodes(effectiveWall, nodes)
+  const handles = useMemo(() => getWallMoveHandles(effectiveWall, nodes), [effectiveWall, nodes])
 
   if (!levelObject || handles.length === 0) return null
 
   return createPortal(
-    <group>
-      {handles.map((handle) => (
-        <WallMoveArrowHandle handle={handle} key={handle.key} wall={effectiveWall} />
-      ))}
-      <WallHeightArrowHandle wall={effectiveWall} />
-      <WallCornerLeaderHandle endpoint="start" wall={effectiveWall} />
-      <WallCornerLeaderHandle endpoint="end" wall={effectiveWall} />
-    </group>,
+    <>
+      <group position={[0, baseElevation, 0]}>
+        {handles.map((handle) => (
+          <WallMoveArrowHandle handle={handle} key={handle.key} wall={effectiveWall} />
+        ))}
+        <WallHeightArrowHandle wall={effectiveWall} />
+        <WallCornerLeaderHandle endpoint="start" wall={effectiveWall} />
+        <WallCornerLeaderHandle endpoint="end" wall={effectiveWall} />
+      </group>
+      <WallBaseElevationHandle
+        baseElevation={baseElevation}
+        levelObject={levelObject}
+        wall={effectiveWall}
+      />
+    </>,
     levelObject,
   )
 }
 
 function buildDashedVerticalGeometry(height: number) {
+  if (!(Number.isFinite(height) && height > 0)) return new BufferGeometry()
+
   // Build each dash as a thin cylinder section so thickness is
   // controllable — native `lineSegments` lock to 1px on WebGL/WebGPU.
   const dashes: BufferGeometry[] = []
@@ -224,7 +248,10 @@ function buildDashedVerticalGeometry(height: number) {
     dashes.push(cylinder)
     y = end + CORNER_GAP_SIZE
   }
-  const merged = mergeGeometries(dashes, false) ?? new BufferGeometry()
+  const merged =
+    dashes.length > 0
+      ? (mergeGeometries(dashes, false) ?? new BufferGeometry())
+      : new BufferGeometry()
   for (const dash of dashes) dash.dispose()
   return merged
 }
@@ -241,7 +268,7 @@ function WallCornerLeaderHandle({ wall, endpoint }: { wall: WallNode; endpoint:
   const corner = endpoint === 'start' ? wall.start : wall.end
   const x = corner[0]
   const z = corner[1]
-  const wallHeight = wall.height ?? DEFAULT_WALL_HEIGHT
+  const wallHeight = getWallEffectiveHeightForNodes(wall, useScene.getState().nodes)
 
   const dashedGeometry = useMemo(() => buildDashedVerticalGeometry(wallHeight), [wallHeight])
   const hitGeometry = useMemo(() => createEndpointHitAreaGeometry(CORNER_HEX_RADIUS), [])
@@ -329,11 +356,12 @@ function WallCornerLeaderHandle({ wall, endpoint }: { wall: WallNode; endpoint:
   }, [])
 
   const activateEndpointMove = (event: ThreeEvent<PointerEvent>) => {
+    if (event.button !== 0) return
     event.stopPropagation()
     suppressBoxSelectForPointer(event)
     sfxEmitter.emit('sfx:item-pick')
     document.body.style.cursor = 'grabbing'
-    useEditor.getState().setMovingWallEndpoint({ wall, endpoint })
+    useInteractionScope.getState().begin(endpointReshapeScope(wall.id, endpoint))
   }
 
   return (
@@ -377,6 +405,155 @@ function WallCornerLeaderHandle({ wall, endpoint }: { wall: WallNode; endpoint:
   )
 }
 
+function WallBaseElevationHandle({
+  wall,
+  baseElevation,
+  levelObject,
+}: {
+  wall: WallNode
+  baseElevation: number
+  levelObject: Object3D
+}) {
+  const [isHovered, setIsHovered] = useState(false)
+  const [isDragging, setIsDragging] = useState(false)
+  const { camera } = useThree()
+  const zoom = camera instanceof OrthographicCamera ? 1 / camera.zoom : 1
+  const curveFrame = isCurvedWall(wall) ? getWallCurveFrameAt(wall, 0.5) : null
+  const midpoint: [number, number] = curveFrame
+    ? [curveFrame.point.x, curveFrame.point.y]
+    : [(wall.start[0] + wall.end[0]) / 2, (wall.start[1] + wall.end[1]) / 2]
+  const elevationGuideSource = {
+    nodeId: wall.id,
+    levelId: wall.parentId,
+    anchor: midpoint,
+  }
+  const leaderBottom = Math.min(0, baseElevation)
+  const leaderHeight = Math.abs(baseElevation)
+  const dashedGeometry = useMemo(
+    () => (leaderHeight > 0.0001 ? buildDashedVerticalGeometry(leaderHeight) : null),
+    [leaderHeight],
+  )
+  const dashMaterial = useMemo(
+    () =>
+      new MeshBasicNodeMaterial({
+        color: new Color(ARROW_COLOR),
+        transparent: true,
+        opacity: 0.85,
+        depthTest: false,
+        depthWrite: false,
+      }),
+    [],
+  )
+
+  const isActive = isHovered || isDragging
+  useEffect(() => {
+    dashMaterial.color.set(isActive ? ARROW_HOVER_COLOR : ARROW_COLOR)
+  }, [dashMaterial, isActive])
+  useEffect(() => () => dashedGeometry?.dispose(), [dashedGeometry])
+  useEffect(() => () => dashMaterial.dispose(), [dashMaterial])
+  const dragControls = useMemo<HandleDragControls>(
+    () => ({
+      onStart: () => {},
+      onEnd: () => {},
+    }),
+    [],
+  )
+
+  const activateElevationMove = useHandleDrag({
+    kind: 'drag',
+    cursor: 'ns-resize',
+    dragControls,
+    handleIndex: 0,
+    node: wall,
+    rideObject: levelObject,
+    setIsDragging,
+    onStart: ({ event, initialNode, intersectPlane, nodeId, sceneApi }) => {
+      if (initialNode.type !== 'wall') return null
+
+      levelObject.updateWorldMatrix(true, false)
+      const initialBase = getWallBaseElevationForNodes(initialNode, sceneApi.nodes())
+      const supportBase = initialBase - (initialNode.supportOffset ?? 0)
+      const initialHeight = getWallEffectiveHeightForNodes(initialNode, sceneApi.nodes())
+      const midpointWorld = new Vector3(midpoint[0], initialBase, midpoint[1]).applyMatrix4(
+        levelObject.matrixWorld,
+      )
+      const planeNormal = new Vector3().subVectors(camera.position, midpointWorld).setY(0)
+      if (planeNormal.lengthSq() === 0) return null
+      planeNormal.normalize()
+      const plane = new Plane().setFromNormalAndCoplanarPoint(planeNormal, midpointWorld)
+      const initialHit = new Vector3()
+      if (
+        !intersectPlane(event.nativeEvent.clientX, event.nativeEvent.clientY, plane, initialHit)
+      ) {
+        return null
+      }
+      const initialPointerY = levelObject.worldToLocal(initialHit).y
+
+      return {
+        onBegin: () => {
+          useInteractionScope.getState().begin({ kind: 'handle-drag', nodeId, handle: 'elevation' })
+        },
+        onEnd: () => {
+          useInteractionScope.getState().endIf((scope) => scope.kind === 'handle-drag')
+          clearStructuralElevationGuide(initialNode.id)
+        },
+        move: ({ event: moveEvent, intersectPlane: intersectMovePlane }) => {
+          const hit = new Vector3()
+          if (!intersectMovePlane(moveEvent.clientX, moveEvent.clientY, plane, hit)) return null
+          const pointerY = levelObject.worldToLocal(hit).y
+          const nextBase = resolveResizeSnapValue({
+            rawValue: initialBase + pointerY - initialPointerY,
+            gridSnapEnabled: true,
+            gridSnapActive: isGridSnapActive(),
+            gridSnapStep: useEditor.getState().gridSnapStep,
+            magneticSnapActive: isMagneticSnapActive(),
+            magneticSnap: (value) =>
+              resolveStructuralElevationSnap(elevationGuideSource, value, sceneApi.nodes()),
+          })
+          publishStructuralElevationGuide(elevationGuideSource, nextBase, sceneApi.nodes())
+          if (Math.abs(nextBase - initialBase) < 1e-6) {
+            return {
+              supportOffset: initialNode.supportOffset,
+              height: initialNode.height,
+            }
+          }
+          const nextOffset = nextBase - supportBase
+          return {
+            supportOffset: Math.abs(nextOffset) < 1e-6 ? undefined : nextOffset,
+            height: initialHeight,
+          }
+        },
+      }
+    },
+  })
+
+  return (
+    <>
+      {dashedGeometry ? (
+        <mesh
+          frustumCulled={false}
+          geometry={dashedGeometry}
+          material={dashMaterial}
+          position={[midpoint[0], leaderBottom, midpoint[1]]}
+          renderOrder={1001}
+        />
+      ) : null}
+      <HandleArrow
+        cursor="ns-resize"
+        hover={isActive}
+        hoverScale={1.25}
+        onHoverChange={setIsHovered}
+        onPointerDown={activateElevationMove}
+        placement={{
+          position: [midpoint[0], baseElevation, midpoint[1]],
+          baseScale: zoom,
+        }}
+        shape="tracker"
+      />
+    </>
+  )
+}
+
 function WallHeightArrowHandle({ wall }: { wall: WallNode }) {
   const [isHovered, setIsHovered] = useState(false)
   const arrowGeometry = useMemo(() => createArrowHandleGeometry(), [])
@@ -429,10 +606,11 @@ function WallHeightArrowHandle({ wall }: { wall: WallNode }) {
   const wallAngle = Math.atan2(-dirZ, dirX)
   // `wall` is the override-merged effective wall (see
   // WallMoveSideHandlesForWall), so this height is already live during a drag.
-  const wallHeight = wall.height ?? DEFAULT_WALL_HEIGHT
+  const wallHeight = getWallEffectiveHeightForNodes(wall, useScene.getState().nodes)
   const handleY = wallHeight + HEIGHT_HANDLE_OFFSET
 
   const activateHeightResize = (event: ThreeEvent<PointerEvent>) => {
+    if (event.button !== 0) return
     event.stopPropagation()
     suppressBoxSelectForPointer(event)
     const levelObject = wall.parentId ? sceneRegistry.nodes.get(wall.parentId) : null
@@ -461,14 +639,16 @@ function WallHeightArrowHandle({ wall }: { wall: WallNode }) {
     const hit = new Vector3()
     if (!raycaster.ray.intersectPlane(plane, hit)) return
 
-    const initialHeight = wall.height ?? DEFAULT_WALL_HEIGHT
+    // 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
 
     document.body.style.cursor = 'ns-resize'
     sfxEmitter.emit('sfx:item-pick')
-    useEditor.getState().setActiveHandleDrag({ nodeId: wallId, label: 'height' })
+    useInteractionScope.getState().begin({ kind: 'handle-drag', nodeId: wallId, handle: 'height' })
     // Suppress R3F node pointer events until pointerup completes so the
     // synthesized click doesn't reroute selection to whatever mesh sits
     // under the cursor at release.
@@ -494,11 +674,12 @@ function WallHeightArrowHandle({ wall }: { wall: WallNode }) {
       window.removeEventListener('pointermove', onMove)
       window.removeEventListener('pointerup', onUp)
       window.removeEventListener('pointercancel', onCancel)
+      window.removeEventListener('keydown', onKeyDown, true)
       if (document.body.style.cursor === 'ns-resize') {
         document.body.style.cursor = ''
       }
       useScene.temporal.getState().resume()
-      useEditor.getState().setActiveHandleDrag(null)
+      useInteractionScope.getState().endIf((sc) => sc.kind === 'handle-drag')
       useViewer.getState().setInputDragging(false)
       dragCleanupRef.current = null
     }
@@ -523,10 +704,21 @@ function WallHeightArrowHandle({ wall }: { wall: WallNode }) {
       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)
   }
 
   return (
@@ -605,16 +797,15 @@ function WallMoveArrowHandle({ wall, handle }: { wall: WallNode; handle: WallMov
   useEffect(() => () => arrowMaterial.dispose(), [arrowMaterial])
 
   const activateWallMove = (event: ThreeEvent<PointerEvent>) => {
+    if (event.button !== 0) return
     event.stopPropagation()
     suppressBoxSelectForPointer(event)
     document.body.style.cursor = 'grabbing'
 
     sfxEmitter.emit('sfx:item-pick')
     useEditor.getState().setMovingNode(wall)
-    useEditor.getState().setMovingWallEndpoint(null)
-    useEditor.getState().setMovingFenceEndpoint(null)
-    useEditor.getState().setCurvingWall(null)
-    useEditor.getState().setCurvingFence(null)
+    useInteractionScope.getState().endIf((s) => s.kind === 'reshaping' && s.reshape === 'endpoint')
+    useInteractionScope.getState().endIf((s) => s.kind === 'reshaping' && s.reshape === 'curve')
     // Keep the wall selected so it stays the active item once the move
     // commits; the `!movingNode` guard on the handles hides them mid-drag.
   }
@@ -696,16 +887,15 @@ function FenceMoveArrowHandle({ fence, handle }: { fence: FenceNode; handle: Wal
   useEffect(() => () => arrowMaterial.dispose(), [arrowMaterial])
 
   const activateFenceMove = (event: ThreeEvent<PointerEvent>) => {
+    if (event.button !== 0) return
     event.stopPropagation()
     suppressBoxSelectForPointer(event)
     document.body.style.cursor = 'grabbing'
 
     sfxEmitter.emit('sfx:item-pick')
     useEditor.getState().setMovingNode(fence)
-    useEditor.getState().setMovingWallEndpoint(null)
-    useEditor.getState().setMovingFenceEndpoint(null)
-    useEditor.getState().setCurvingWall(null)
-    useEditor.getState().setCurvingFence(null)
+    useInteractionScope.getState().endIf((s) => s.kind === 'reshaping' && s.reshape === 'endpoint')
+    useInteractionScope.getState().endIf((s) => s.kind === 'reshaping' && s.reshape === 'curve')
     // Keep the fence selected so it stays active once the move commits.
   }
 
@@ -743,7 +933,7 @@ function FenceMoveArrowHandle({ fence, handle }: { fence: FenceNode; handle: Wal
   )
 }
 
-function getWallMoveHandles(wall: WallNode): WallMoveHandle[] {
+function getWallMoveHandles(wall: WallNode, nodes: Record<string, AnyNode>): WallMoveHandle[] {
   const dx = wall.end[0] - wall.start[0]
   const dz = wall.end[1] - wall.start[1]
   const length = Math.hypot(dx, dz)
@@ -759,7 +949,7 @@ function getWallMoveHandles(wall: WallNode): WallMoveHandle[] {
   const midpoint: [number, number] = frame
     ? [frame.point.x, frame.point.y]
     : [(wall.start[0] + wall.end[0]) / 2, (wall.start[1] + wall.end[1]) / 2]
-  const wallHeight = wall.height ?? DEFAULT_WALL_HEIGHT
+  const wallHeight = getWallEffectiveHeightForNodes(wall, nodes)
   const handleHeight = Math.max(wallHeight - HANDLE_TOP_INSET, HANDLE_MIN_HEIGHT)
   const offset = Math.max(getWallThickness(wall) / 2 + HANDLE_OFFSET, HANDLE_MIN_OFFSET)
 

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

@@ -3,8 +3,16 @@
 import { type AnyNodeId, sceneRegistry, useLiveNodeOverrides, useScene } from '@pascal-app/core'
 import { useViewer } from '@pascal-app/viewer'
 import { createPortal, useFrame, useThree } from '@react-three/fiber'
-import { useEffect, useMemo, useRef } from 'react'
-import { BoxGeometry, type BufferGeometry, EdgesGeometry, type Group, Vector3 } from 'three'
+import { useEffect, useLayoutEffect, useMemo, useRef } from 'react'
+import {
+  BoxGeometry,
+  type BufferGeometry,
+  EdgesGeometry,
+  type Group,
+  type Mesh,
+  MeshBasicMaterial,
+  Vector3,
+} from 'three'
 import { LineBasicNodeMaterial, MeshBasicNodeMaterial } from 'three/webgpu'
 import { EDITOR_LAYER } from '../../lib/constants'
 
@@ -41,6 +49,13 @@ const fillMaterial = new MeshBasicNodeMaterial({
   depthWrite: false,
 })
 
+// Keep the cutout in the render list for the outliner's override material
+// without letting its source material alter the normal scene pass.
+const outlineProxyMaterial = new MeshBasicMaterial({
+  colorWrite: false,
+  depthWrite: false,
+})
+
 function makeOutlineGeometry(width: number, height: number, depth: number): BufferGeometry {
   const box = new BoxGeometry(width + PAD, height + PAD, depth + PAD)
   const edges = new EdgesGeometry(box)
@@ -60,26 +75,60 @@ function makeOutlineGeometry(width: number, height: number, depth: number): Buff
  */
 export function WallOpeningHighlights() {
   const selectedIds = useViewer((state) => state.selection.selectedIds)
+  const hoveredId = useViewer((state) => state.hoveredId)
   const { scene } = useThree()
+  const outlineProxyIds = Array.from(new Set(hoveredId ? [...selectedIds, hoveredId] : selectedIds))
 
-  if (selectedIds.length === 0) return null
+  if (selectedIds.length === 0 && !hoveredId) return null
 
-  return createPortal(
+  return (
     <>
-      {selectedIds.map((id) => (
-        <SelectionOpeningHighlights key={id} selectedId={id} />
+      {outlineProxyIds.map((id) => (
+        <OpeningOutlineProxy key={id} openingId={id} />
       ))}
-    </>,
-    scene,
+      {selectedIds.length > 0 &&
+        createPortal(
+          <>
+            {selectedIds.map((id) => (
+              <SelectionOpeningHighlights key={id} selectedId={id} />
+            ))}
+          </>,
+          scene,
+        )}
+    </>
   )
 }
 
-// Resolves a selected node into the opening highlight(s) to draw:
-//  - a selected wall → a hint over each door / window it hosts ("editable
-//    child here").
-//  - a directly-selected frameless opening (a `door` whose `openingKind` is
-//    `'opening'`) → a fill over its own cutout, so the selection reads as
-//    occupied even though the opening renders no geometry of its own.
+function OpeningOutlineProxy({ openingId }: { openingId: string }) {
+  const node = useScene((state) => state.nodes[openingId as AnyNodeId])
+  const geometryRevision = useViewer((state) => state.geometryRevision)
+  const proxyRef = useRef<Mesh | null>(null)
+  const isFramelessOpening = node?.type === 'door' && node.openingKind === 'opening'
+
+  useLayoutEffect(() => {
+    void geometryRevision
+    if (!isFramelessOpening) return
+    const root = sceneRegistry.nodes.get(openingId as AnyNodeId)
+    const proxy = root?.getObjectByName('cutout') as Mesh | undefined
+    if (!proxy) return
+
+    proxy.material = outlineProxyMaterial
+    proxy.visible = true
+    proxyRef.current = proxy
+
+    return () => {
+      proxy.visible = false
+      proxyRef.current = null
+    }
+  }, [geometryRevision, isFramelessOpening, openingId])
+
+  useFrame(() => {
+    if (proxyRef.current) proxyRef.current.visible = true
+  })
+
+  return null
+}
+
 function SelectionOpeningHighlights({ selectedId }: { selectedId: string }) {
   const node = useScene((state) => state.nodes[selectedId as AnyNodeId])
 
@@ -94,27 +143,9 @@ function SelectionOpeningHighlights({ selectedId }: { selectedId: string }) {
     )
   }
 
-  if (node?.type === 'door' && node.openingKind === 'opening') {
-    return <SelectedOpeningHighlight openingId={selectedId} parentId={node.parentId} />
-  }
-
   return null
 }
 
-// A frameless opening selected on its own. Pulls the cutout depth from its
-// host wall's thickness so the fill block matches the wall it sits in.
-function SelectedOpeningHighlight({
-  openingId,
-  parentId,
-}: {
-  openingId: string
-  parentId: string | null
-}) {
-  const parent = useScene((state) => (parentId ? state.nodes[parentId as AnyNodeId] : undefined))
-  const depth = parent?.type === 'wall' ? (parent.thickness ?? 0.1) : 0.1
-  return <OpeningHighlight depth={depth} openingId={openingId} />
-}
-
 function OpeningHighlight({ openingId, depth }: { openingId: string; depth: number }) {
   const node = useScene((state) => state.nodes[openingId as AnyNodeId])
   // Resize arrows publish width/height to the live-override store during the