@pascal-app/editor 0.9.1 → 0.9.2

package/src/components/editor-2d/floorplan-registry-move-overlay.tsx

@@ -10,7 +10,6 @@ import {
   type FloorplanMoveTargetSession,
   nodeRegistry,
   pauseSceneHistory,
-  resolveAlignment,
   resumeSceneHistory,
   useLiveNodeOverrides,
   useLiveTransforms,
@@ -19,11 +18,19 @@ import {
 import { useViewer } from '@pascal-app/viewer'
 import { useEffect } from 'react'
 import { commitFreshPlacementSubtree } from '../../lib/fresh-planar-placement'
+import { isHistoryShortcut } from '../../lib/history'
 import { isFreshPlacementMetadata, stripPlacementMetadataFlags } from '../../lib/placement-metadata'
 import { resolvePlanarCursorPosition } from '../../lib/planar-cursor-placement'
+import { movementSfxStepKey } from '../../lib/sfx/movement-tick'
 import { sfxEmitter } from '../../lib/sfx-bus'
+import { resolveAlignmentForFloorplanView } from '../../lib/world-grid-snap'
 import useAlignmentGuides from '../../store/use-alignment-guides'
-import useEditor from '../../store/use-editor'
+import useEditor, {
+  isAlignmentGuideActive,
+  isGridSnapActive,
+  isMagneticSnapActive,
+} from '../../store/use-editor'
+import { useMovingNode } from '../../store/use-interaction-scope'
 import { useWallMoveGhosts } from '../../store/use-wall-move-ghosts'
 
 // Figma-style alignment snap threshold. Meters in world space; 8cm gives
@@ -53,7 +60,7 @@ const ALIGNMENT_THRESHOLD_M = 0.08
  * cursor → meters accounts for pan / zoom / building rotation.
  */
 export function FloorplanRegistryMoveOverlay() {
-  const movingNode = useEditor((s) => s.movingNode)
+  const movingNode = useMovingNode()
   const setMovingNode = useEditor((s) => s.setMovingNode)
   const setMovingNodeOrigin = useEditor((s) => s.setMovingNodeOrigin)
 
@@ -114,6 +121,17 @@ export function FloorplanRegistryMoveOverlay() {
       pauseSceneHistory(useScene)
       let historyPaused = true
 
+      const clearLivePreviews = () => {
+        const liveTransforms = useLiveTransforms.getState()
+        const liveOverrides = useLiveNodeOverrides.getState()
+        const scene = useScene.getState()
+        for (const id of session.affectedIds) {
+          liveTransforms.clear(id)
+          liveOverrides.clear(id)
+          scene.markDirty(id)
+        }
+      }
+
       // The registry action menu's Move button portals to `document.body`,
       // so the trigger click's pointer-up happens OUTSIDE the floor-plan
       // scene and never reaches `onPointerUp` here. That means: the very
@@ -124,6 +142,18 @@ export function FloorplanRegistryMoveOverlay() {
       // to be consumed. That legacy flow is gone in the registry layer;
       // all entries use the action menu now.
       let hasMovedSinceStart = false
+      // Last resolved position of the moved node — drives the move "tick" SFX.
+      // Parity with the 3D move, which emits on any change of the resolved
+      // position (every snapping mode, not only grid).
+      let lastSnapKey: string | null = null
+      // Live cursor location — updated on EVERY pointermove (even over the 3D
+      // canvas) so R-key ownership can follow the pointer's CURRENT pane rather
+      // than the sticky `hasMovedSinceStart`. Without this, once the user touched
+      // the 2D pane the overlay claimed R forever and the 3D flip went dead.
+      let pointerOverFloorplan = false
+      const onPointerTrack = (event: PointerEvent) => {
+        pointerOverFloorplan = isPointerOverFloorplanScene(event.clientX, event.clientY)
+      }
 
       const onMove = (event: PointerEvent) => {
         // Skip 3D-canvas / other-UI cursor moves so the overlay only
@@ -146,6 +176,23 @@ export function FloorplanRegistryMoveOverlay() {
             metaKey: event.metaKey,
           },
         })
+        // Move "tick" — same feedback the 3D move gives, which fires whenever the
+        // resolved position changes (any snapping mode, not just grid), so it
+        // ticks as the item lands on each new snapped/free position.
+        const movedId = session.affectedIds[0]
+        const moved = movedId ? useScene.getState().nodes[movedId] : undefined
+        const pos = (moved as { position?: [number, number, number] } | undefined)?.position
+        if (pos) {
+          const key = movementSfxStepKey({
+            coords: [pos[0], pos[2]],
+            gridSnapActive: isGridSnapActive(),
+            gridStep: useEditor.getState().gridSnapStep,
+          })
+          if (key !== lastSnapKey) {
+            lastSnapKey = key
+            sfxEmitter.emit('sfx:grid-snap')
+          }
+        }
       }
 
       const commitFinalStateOrRevert = () => {
@@ -283,7 +330,42 @@ export function FloorplanRegistryMoveOverlay() {
       }
 
       const onKey = (event: KeyboardEvent) => {
-        if (event.key !== 'Escape') return
+        // R flips a directional kind's facing mid-placement (door / window:
+        // front ↔ back). The session records the flip and re-runs its last
+        // apply so the 2D symbol updates immediately; kinds without a facing
+        // leave `flipSide` unset and R falls through to the global handler.
+        //
+        // Ownership follows the CURRENT pointer pane, not a sticky flag: the 3D
+        // move tool ALSO listens for R on `window`. We own R only while the
+        // cursor is over the 2D floor-plan pane (`pointerOverFloorplan`) AND the
+        // 2D mover has actually engaged (`hasMovedSinceStart`); then we
+        // `stopImmediatePropagation` (this handler is CAPTURE-phase, so it runs
+        // first) so the 3D tool can't also flip. When the cursor is over the 3D
+        // pane we yield — the 3D tool owns R there. (The old sticky
+        // `hasMovedSinceStart`-only gate made the overlay claim R forever after
+        // the first 2D move, killing the 3D flip.)
+        if (event.key === 'r' || event.key === 'R') {
+          // Yield Cmd/Ctrl+R to the browser reload instead of flipping the side.
+          if (event.metaKey || event.ctrlKey) return
+          if (!(session.flipSide && hasMovedSinceStart && pointerOverFloorplan)) return
+          if (event.repeat) return
+          const t = event.target as HTMLElement | null
+          if (t && (t.tagName === 'INPUT' || t.tagName === 'TEXTAREA' || t.isContentEditable)) {
+            return
+          }
+          event.preventDefault()
+          event.stopImmediatePropagation()
+          session.flipSide()
+          sfxEmitter.emit('sfx:item-rotate')
+          return
+        }
+        if (event.key !== 'Escape' && !isHistoryShortcut(event)) return
+        if (isHistoryShortcut(event)) {
+          // ⌘Z mid-move cancels like Escape — keep it from reaching the
+          // global undo arm (this handler is capture-phase, that one bubbles).
+          event.preventDefault()
+          event.stopImmediatePropagation()
+        }
         // Claim teardown ownership so the 3D move tool's cleanup skips
         // its own restore — without this, both sides would race to
         // write the same baseline, harmless but wasteful.
@@ -295,12 +377,7 @@ export function FloorplanRegistryMoveOverlay() {
             resumeSceneHistory(useScene)
             historyPaused = false
           }
-          const liveTransforms = useLiveTransforms.getState()
-          const liveOverrides = useLiveNodeOverrides.getState()
-          for (const id of session.affectedIds) {
-            liveTransforms.clear(id)
-            liveOverrides.clear(id)
-          }
+          clearLivePreviews()
           useAlignmentGuides.getState().clear()
           setMovingNode(null)
           return
@@ -317,24 +394,24 @@ export function FloorplanRegistryMoveOverlay() {
         // `useLiveNodeOverrides`. Either way, leaving them in place
         // after Esc would freeze the 2D / 3D view at the cancelled
         // position.
-        const liveTransforms = useLiveTransforms.getState()
-        const liveOverrides = useLiveNodeOverrides.getState()
-        for (const id of session.affectedIds) {
-          liveTransforms.clear(id)
-          liveOverrides.clear(id)
-        }
+        clearLivePreviews()
         // Restore selection cleared by the action menu's Move click.
         useViewer.getState().setSelection({ selectedIds: snapshots.map((s) => s.id) })
         setMovingNode(null)
       }
 
+      window.addEventListener('pointermove', onPointerTrack)
       window.addEventListener('pointermove', onMove)
       window.addEventListener('pointerup', onPointerUp)
-      window.addEventListener('keydown', onKey)
+      // Capture phase so this runs BEFORE the 3D move tool's bubble-phase R
+      // listener — when the cursor is over the 2D pane, `stopImmediatePropagation`
+      // then pre-empts it so only one handler flips.
+      window.addEventListener('keydown', onKey, true)
       return () => {
+        window.removeEventListener('pointermove', onPointerTrack)
         window.removeEventListener('pointermove', onMove)
         window.removeEventListener('pointerup', onPointerUp)
-        window.removeEventListener('keydown', onKey)
+        window.removeEventListener('keydown', onKey, true)
         // Unmount cleanup. `historyPaused === true` here means none of
         // our terminal paths (commit, Esc) ran in this overlay — they
         // each call `resumeSceneHistory` and flip the flag.
@@ -365,12 +442,7 @@ export function FloorplanRegistryMoveOverlay() {
         // `useLiveTransforms`; wall sessions write to
         // `useLiveNodeOverrides`. In pure 2D view the corresponding 3D
         // tool's cleanup isn't there to clear them for us.
-        const liveTransforms = useLiveTransforms.getState()
-        const liveOverrides = useLiveNodeOverrides.getState()
-        for (const id of session.affectedIds) {
-          liveTransforms.clear(id)
-          liveOverrides.clear(id)
-        }
+        clearLivePreviews()
         // Sessions that publish Figma-style alignment guides during `apply`
         // (item / shelf / column) leave them in the store; this cleanup runs
         // after every terminal path (commit + Esc both unmount via
@@ -388,12 +460,40 @@ export function FloorplanRegistryMoveOverlay() {
     // ── Path 2 — generic free-floating translate ────────────────────
     const entry = scene.querySelector(`[data-node-id="${movingNode.id}"]`) as SVGGElement | null
     if (!entry) return
-
-    const originalPosition = ((
-      movingNode as unknown as {
-        position?: [number, number, number]
-      }
-    ).position ?? [0, 0, 0]) as [number, number, number]
+    const sceneNodes = useScene.getState().nodes as Record<string, AnyNode>
+    const relatedEntryIds = collectFloorplanMoveEntryIds(movingNode.id as AnyNodeId, sceneNodes)
+    const relatedEntries = Array.from(relatedEntryIds)
+      .map((id) => scene.querySelector(`[data-node-id="${id}"]`) as SVGGElement | null)
+      .filter((value): value is SVGGElement => value != null)
+
+    // Polyline kinds (duct / pipe / lineset) carry a `path`, not a
+    // `position` — translating a `position` here would write a field their
+    // schema ignores and snap the run back. For those we move every path
+    // point by the cursor delta and commit the translated `path` instead.
+    // The reference origin is the path centre so the SVG `translate` delta
+    // matches the geometry's actual location (which isn't at [0,0,0]).
+    // Only 3D `[x, y, z]` polyline kinds (duct / pipe / lineset) are handled
+    // here. A spline fence also carries a `path`, but it is 2D (`[x, y]`) and
+    // moves through its own `floorplanMoveTarget`, so exclude shorter tuples.
+    const rawPath = (movingNode as { path?: unknown }).path
+    const originalPath =
+      Array.isArray(rawPath) && Array.isArray(rawPath[0]) && rawPath[0].length >= 3
+        ? (rawPath as [number, number, number][]).map((p) => [...p] as [number, number, number])
+        : null
+    const originalPosition: [number, number, number] = originalPath
+      ? (() => {
+          let cx = 0
+          let cz = 0
+          for (const p of originalPath) {
+            cx += p[0]
+            cz += p[2]
+          }
+          const n = originalPath.length || 1
+          return [cx / n, originalPath[0]?.[1] ?? 0, cz / n]
+        })()
+      : (((movingNode as unknown as { position?: [number, number, number] }).position ?? [
+          0, 0, 0,
+        ]) as [number, number, number])
     const isFreshPlacement = isFreshPlacementMetadata(
       (movingNode as { metadata?: unknown }).metadata,
     )
@@ -403,20 +503,41 @@ export function FloorplanRegistryMoveOverlay() {
     // so its untransformed bbox IS the world-space footprint. Cache the
     // moving entry's local bbox once (relative to originalPosition) and
     // derive anchors at any proposed (sx, sz) by translating it.
-    const movingLocalBBox = entry.getBBox()
+    const movingLocalBBox = unionFloorplanEntryBBox(relatedEntries)
     const candidateAnchors: AlignmentAnchor[] = []
     const allEntries = scene.querySelectorAll('[data-node-id]')
     for (const el of Array.from(allEntries)) {
       const otherId = el.getAttribute('data-node-id')
-      if (!otherId || otherId === movingNode.id) continue
+      if (!otherId || relatedEntryIds.has(otherId as AnyNodeId)) continue
       const b = (el as SVGGraphicsElement).getBBox()
-      if (b.width <= 0 || b.height <= 0) continue
+      // Skip only fully-degenerate (point) entries. A thin run (duct / pipe /
+      // lineset drawn as a line) has one zero dimension but is still a valid
+      // alignment target — its endpoints become line anchors.
+      if (b.width <= 0 && b.height <= 0) continue
       candidateAnchors.push(...bboxAnchors(otherId, b.x, b.y, b.x + b.width, b.y + b.height))
     }
 
     let lastSnapped: [number, number] | null = null
     let dragAnchor: [number, number] | null = null
 
+    // Footprint bounding box drawn around the dragged entry — the 2D
+    // counterpart of the 3D `DragBoundingBox`, so a moved / duplicated node
+    // reads the same in both views. Green wireframe rect over the entry's
+    // own bbox, translated in lockstep with it. The entry stays visible the
+    // whole drag (no hide-until-move) so it never appears to vanish.
+    const SVG_NS = 'http://www.w3.org/2000/svg'
+    const boxEl = document.createElementNS(SVG_NS, 'rect')
+    boxEl.setAttribute('x', String(movingLocalBBox.x))
+    boxEl.setAttribute('y', String(movingLocalBBox.y))
+    boxEl.setAttribute('width', String(movingLocalBBox.width))
+    boxEl.setAttribute('height', String(movingLocalBBox.height))
+    boxEl.setAttribute('fill', 'none')
+    boxEl.setAttribute('stroke', '#22c55e')
+    boxEl.setAttribute('stroke-width', '1.5')
+    boxEl.setAttribute('vector-effect', 'non-scaling-stroke')
+    boxEl.setAttribute('pointer-events', 'none')
+    scene.appendChild(boxEl)
+
     const onMove = (event: PointerEvent) => {
       // Same target guard as Path 1 — pointer must be over the floor
       // plan scene; otherwise we'd react to 3D-canvas moves with garbage
@@ -426,9 +547,12 @@ export function FloorplanRegistryMoveOverlay() {
       if (!m) return
 
       // 1) Grid snap baseline. Fresh catalog placement is absolute under
-      // the cursor; existing moves preserve the cursor's grab offset.
+      // the cursor; existing moves preserve the cursor's grab offset. Grid
+      // follows the active snapping mode (Shift cycles it); raw cursor in
+      // any non-grid mode.
       const gridStep = useEditor.getState().gridSnapStep
-      const snap = (value: number) => Math.round(value / gridStep) * gridStep
+      const snap = (value: number) =>
+        isGridSnapActive() ? Math.round(value / gridStep) * gridStep : value
       const resolved = resolvePlanarCursorPosition({
         cursor: [m[0], m[1]],
         original: [originalPosition[0], originalPosition[2]],
@@ -441,12 +565,13 @@ export function FloorplanRegistryMoveOverlay() {
 
       // 2) Alignment snap layered on top. Treat the grid-snapped point
       // as the "proposed" position so alignment competes from a stable
-      // base rather than the raw cursor jitter. Alt bypasses alignment
-      // entirely — same affordance Path 1 advertises in its "No Snap"
-      // hint chip.
+      // base rather than the raw cursor jitter. Alignment "lines" are
+      // DISPLAYED in every mode except Off (isAlignmentGuideActive); the
+      // magnetic pull toward them applies only in 'lines' mode. Alt is
+      // force-place, not a snap bypass.
       let finalX = gridX
       let finalZ = gridZ
-      if (!event.altKey && candidateAnchors.length > 0) {
+      if (isAlignmentGuideActive() && candidateAnchors.length > 0) {
         // Translate the cached local bbox to the proposed pos to get the
         // moving anchors at that location. The entry's untransformed
         // bbox is in world meters relative to the node's origin, so a
@@ -469,12 +594,12 @@ export function FloorplanRegistryMoveOverlay() {
         // store, which the 2D FloorplanAlignmentGuideLayer renders
         // inside the rotated scene <g>. The 3D pipeline uses a
         // separate store, so frames stay isolated per surface.
-        const result = resolveAlignment({
+        const result = resolveAlignmentForFloorplanView({
           moving: movingAnchors,
           candidates: candidateAnchors,
           threshold: ALIGNMENT_THRESHOLD_M,
         })
-        if (result.snap) {
+        if (result.snap && isMagneticSnapActive()) {
           finalX += result.snap.dx
           finalZ += result.snap.dz
         }
@@ -483,9 +608,34 @@ export function FloorplanRegistryMoveOverlay() {
         useAlignmentGuides.getState().clear()
       }
 
+      // 3) Kind-owned attachment snap (cabinet → wall) — 2D parity with the
+      // 3D move tool's `groupMoveSnap` pass. An attach behavior, not an
+      // alignment guide, so it runs in every snapping mode except Off.
+      const groupMoveSnap = def?.capabilities?.movable?.groupMoveSnap
+      if (groupMoveSnap && (isGridSnapActive() || isMagneticSnapActive())) {
+        const snappedPosition = groupMoveSnap({
+          node: movingNode,
+          candidatePosition: [finalX, originalPosition[1], finalZ],
+          movingIds: [movingNode.id as AnyNodeId],
+          nodes: useScene.getState().nodes as Record<string, AnyNode>,
+          levelId:
+            (useViewer.getState().selection.levelId as AnyNodeId | null) ??
+            (movingNode.parentId as AnyNodeId | undefined) ??
+            null,
+        })
+        if (snappedPosition) {
+          finalX = snappedPosition[0]
+          finalZ = snappedPosition[2]
+          useAlignmentGuides.getState().clear()
+        }
+      }
+
       const dx = finalX - originalPosition[0]
       const dz = finalZ - originalPosition[2]
-      entry.setAttribute('transform', `translate(${dx} ${dz})`)
+      for (const relatedEntry of relatedEntries) {
+        relatedEntry.setAttribute('transform', `translate(${dx} ${dz})`)
+      }
+      boxEl.setAttribute('transform', `translate(${dx} ${dz})`)
       lastSnapped = [finalX, finalZ]
     }
 
@@ -499,6 +649,35 @@ export function FloorplanRegistryMoveOverlay() {
       const [, oldY] = originalPosition
       setMovingNodeOrigin('2d')
       let selectedId = movingNode.id as AnyNodeId
+      if (originalPath) {
+        // Polyline kinds: shift every point by the committed delta and
+        // write `path`. Strip the fresh-placement flags on first drop.
+        const dx = sx - originalPosition[0]
+        const dz = sz - originalPosition[2]
+        const nextPath = originalPath.map(
+          ([x, y, z]) => [x + dx, y, z + dz] as [number, number, number],
+        )
+        useScene.getState().updateNode(
+          movingNode.id as AnyNodeId,
+          (isFreshPlacement
+            ? {
+                path: nextPath,
+                metadata: stripPlacementMetadataFlags(
+                  (movingNode as { metadata?: unknown }).metadata,
+                ),
+                visible: true,
+              }
+            : { path: nextPath }) as Partial<AnyNode>,
+        )
+        useViewer.getState().setSelection({ selectedIds: [movingNode.id as AnyNodeId] })
+        for (const relatedEntry of relatedEntries) {
+          relatedEntry.removeAttribute('transform')
+        }
+        useAlignmentGuides.getState().clear()
+        setMovingNode(null)
+        swallowNextClick()
+        return
+      }
       if (isFreshPlacement) {
         selectedId =
           commitFreshPlacementSubtree(
@@ -520,37 +699,54 @@ export function FloorplanRegistryMoveOverlay() {
         )
       }
       useViewer.getState().setSelection({ selectedIds: [selectedId] })
-      entry.removeAttribute('transform')
+      for (const relatedEntry of relatedEntries) {
+        relatedEntry.removeAttribute('transform')
+      }
       useAlignmentGuides.getState().clear()
       setMovingNode(null)
       swallowNextClick()
     }
 
     const onKey = (event: KeyboardEvent) => {
-      if (event.key === 'Escape') {
-        setMovingNodeOrigin('2d')
-        if (isFreshPlacement) {
-          emitter.emit('tool:cancel')
-          const temporal = useScene.temporal.getState()
-          const wasTracking = (temporal as { isTracking?: boolean }).isTracking !== false
-          if (wasTracking) temporal.pause()
-          useScene.getState().deleteNode(movingNode.id as AnyNodeId)
-          if (wasTracking) temporal.resume()
-        }
-        entry.removeAttribute('transform')
-        useAlignmentGuides.getState().clear()
-        setMovingNode(null)
+      if (event.key !== 'Escape' && !isHistoryShortcut(event)) return
+      if (isHistoryShortcut(event)) {
+        // ⌘Z mid-move cancels like Escape — keep it from reaching the
+        // global undo arm (this handler is capture-phase, that one bubbles).
+        event.preventDefault()
+        event.stopImmediatePropagation()
       }
+      setMovingNodeOrigin('2d')
+      if (isFreshPlacement) {
+        emitter.emit('tool:cancel')
+        const temporal = useScene.temporal.getState()
+        const wasTracking = (temporal as { isTracking?: boolean }).isTracking !== false
+        if (wasTracking) temporal.pause()
+        useScene.getState().deleteNode(movingNode.id as AnyNodeId)
+        if (wasTracking) temporal.resume()
+      }
+      for (const relatedEntry of relatedEntries) {
+        relatedEntry.removeAttribute('transform')
+      }
+      useAlignmentGuides.getState().clear()
+      setMovingNode(null)
     }
 
     window.addEventListener('pointermove', onMove)
     window.addEventListener('pointerup', onPointerUp)
-    window.addEventListener('keydown', onKey)
+    window.addEventListener('keydown', onKey, true)
     return () => {
       window.removeEventListener('pointermove', onMove)
       window.removeEventListener('pointerup', onPointerUp)
-      window.removeEventListener('keydown', onKey)
-      entry.removeAttribute('transform')
+      window.removeEventListener('keydown', onKey, true)
+      for (const relatedEntry of relatedEntries) {
+        relatedEntry.removeAttribute('transform')
+      }
+      // Always un-hide on teardown so a committed copy shows and a
+      // never-revealed entry doesn't leak a hidden style onto a reused node.
+      for (const relatedEntry of relatedEntries) {
+        relatedEntry.style.visibility = ''
+      }
+      boxEl.remove()
       useAlignmentGuides.getState().clear()
     }
   }, [isActive, movingNode, setMovingNode, setMovingNodeOrigin, hasMoveTarget, def])
@@ -601,6 +797,51 @@ function deepEqual(a: unknown, b: unknown): boolean {
   return false
 }
 
+function collectFloorplanMoveEntryIds(
+  rootId: AnyNodeId,
+  nodes: Record<string, AnyNode>,
+): Set<AnyNodeId> {
+  const root = nodes[rootId]
+  if (root?.type !== 'cabinet' && root?.type !== 'cabinet-module') {
+    return new Set([rootId])
+  }
+
+  const ids = new Set<AnyNodeId>()
+  const queue: AnyNodeId[] = [rootId]
+  while (queue.length > 0) {
+    const id = queue.pop()!
+    if (ids.has(id)) continue
+    const node = nodes[id]
+    if (node?.type !== 'cabinet' && node?.type !== 'cabinet-module') continue
+    ids.add(id)
+    for (const childId of node.children ?? []) {
+      const child = nodes[childId as AnyNodeId]
+      if (child?.type === 'cabinet' || child?.type === 'cabinet-module') {
+        queue.push(childId as AnyNodeId)
+      }
+    }
+  }
+  return ids
+}
+
+function unionFloorplanEntryBBox(entries: readonly SVGGraphicsElement[]): DOMRect {
+  const first = entries[0]?.getBBox()
+  if (!first) return new DOMRect(0, 0, 0, 0)
+
+  let minX = first.x
+  let minY = first.y
+  let maxX = first.x + first.width
+  let maxY = first.y + first.height
+  for (const entry of entries.slice(1)) {
+    const box = entry.getBBox()
+    minX = Math.min(minX, box.x)
+    minY = Math.min(minY, box.y)
+    maxX = Math.max(maxX, box.x + box.width)
+    maxY = Math.max(maxY, box.y + box.height)
+  }
+  return new DOMRect(minX, minY, Math.max(0, maxX - minX), Math.max(0, maxY - minY))
+}
+
 function swallowNextClick() {
   const swallowClick = (e: MouseEvent) => {
     e.stopPropagation()

package/src/components/editor-2d/floorplan-snap-beacon-layer.tsx

@@ -14,12 +14,14 @@ import { useFloorplanRender } from './floorplan-render-context'
  *   endpoint (corner) → square    midpoint → triangle
  *   intersection      → ✕ cross   wall body (edge) → circle
  *
- * Indigo to match the 3D beacon and stay distinct from the red Figma alignment
- * guides. Sizes are pixel-budgeted via `unitsPerPixel` so the marker stays a
+ * Indigo to match the 3D beacon, except the corner (endpoint) square which is
+ * green to match the alignment guides. Sizes are pixel-budgeted via
+ * `unitsPerPixel` so the marker stays a
  * constant size on screen at any zoom. Mounted inside the `data-floorplan-scene`
  * group so coordinates are world meters (XZ) 1:1, like the alignment guides.
  */
 const COLOR = '#6366f1' // indigo-500 — matches the 3D beacon
+const ENDPOINT_COLOR = '#22c55e' // green-500 — corner (endpoint) snap accent
 
 export const FloorplanSnapBeaconLayer = memo(function FloorplanSnapBeaconLayer() {
   const point = useWallSnapIndicator((s) => s.point)
@@ -54,7 +56,7 @@ function SnapMarker({
   z: number
 }) {
   if (kind === 'endpoint') {
-    return <rect fill={color} height={m * 2} width={m * 2} x={x - m} y={z - m} />
+    return <rect fill={ENDPOINT_COLOR} height={m * 2} width={m * 2} x={x - m} y={z - m} />
   }
   if (kind === 'midpoint') {
     const t = m * 1.3

package/src/components/editor-2d/renderers/floorplan-label-angle.test.ts

@@ -0,0 +1,15 @@
+import { describe, expect, test } from 'bun:test'
+import { resolveFloorplanLabelAngle } from './floorplan-label-angle'
+
+describe('resolveFloorplanLabelAngle', () => {
+  test('keeps segment labels readable while preserving their screen direction', () => {
+    expect(resolveFloorplanLabelAngle(0, 0)).toBe(0)
+    expect(resolveFloorplanLabelAngle(Math.PI, 0)).toBe(0)
+    expect(resolveFloorplanLabelAngle(Math.PI / 2, 90)).toBe(-90)
+  })
+
+  test('counter-rotates aggregate labels to remain horizontal', () => {
+    expect(resolveFloorplanLabelAngle(0, 90, true)).toBe(-90)
+    expect(resolveFloorplanLabelAngle(Math.PI / 3, -35, true)).toBe(35)
+  })
+})

package/src/components/editor-2d/renderers/floorplan-label-angle.ts

@@ -0,0 +1,14 @@
+export function resolveFloorplanLabelAngle(
+  angleRadians: number,
+  sceneRotationDeg: number,
+  screenUpright = false,
+): number {
+  if (screenUpright) return -sceneRotationDeg
+
+  let localAngleDeg = (angleRadians * 180) / Math.PI
+  let screenAngleDeg = localAngleDeg + sceneRotationDeg
+  screenAngleDeg = ((((screenAngleDeg + 180) % 360) + 360) % 360) - 180
+  if (screenAngleDeg > 90) localAngleDeg -= 180
+  else if (screenAngleDeg <= -90) localAngleDeg += 180
+  return ((((localAngleDeg + 180) % 360) + 360) % 360) - 180
+}

package/src/components/editor-2d/renderers/floorplan-placement-preview-layer.tsx

@@ -27,6 +27,7 @@ import { FloorplanGeometryRenderer } from './floorplan-geometry-renderer'
  */
 export const FloorplanPlacementPreviewLayer = memo(function FloorplanPlacementPreviewLayer() {
   const node = usePlacementPreview((s) => s.node)
+  const parentNode = usePlacementPreview((s) => s.parentNode)
   if (!node) return null
 
   const builder = nodeRegistry.get(node.type)?.floorplan
@@ -37,11 +38,13 @@ export const FloorplanPlacementPreviewLayer = memo(function FloorplanPlacementPr
   // `resolve` reads the scene lazily (a builder rarely calls it for a ghost,
   // and `parent: null` short-circuits the elevator's level walk) so the layer
   // never subscribes to / bulk-reads the nodes map during render.
+  // `parentNode` is the synthetic wall for an off-wall door/window ghost so
+  // its builder draws the real swing-arc / pane symbol (see use-placement-preview).
   const ctx = {
     resolve: (id: AnyNodeId) => useScene.getState().nodes[id],
     children: [],
     siblings: [],
-    parent: null,
+    parent: parentNode ?? null,
     viewState: undefined,
   } as unknown as GeometryContext